old
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#1F1F1F;}
|
||||
.st1{fill:#212121;}
|
||||
.st2{fill:#1E1E1E;}
|
||||
.st3{fill:#202020;}
|
||||
.st4{fill:#222222;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M568.4,574.3c-25.3,0-47.9,0-74.1,0c3.5-5.2,6.1-8.4,8-11.9c4.1-7.4,10.3-14.8,11.1-22.6
|
||||
c1.8-15.9,0.2-32.1,0.7-48.1c0.3-10.6-2.7-18.5-13.1-22.9c-2.3-1-5.8-4.4-5.4-5.5c0.9-2.7,3.5-5.8,6.1-6.9
|
||||
c12.4-5.2,25.1-9.8,38.9-15c2.4,9.8,4.5,18.8,7.2,29.8c8.1-6.9,14.9-13.2,22.2-18.7c12.2-9.1,25.6-14.8,40.8-7.6
|
||||
c16.3,7.7,23.4,21.2,23.2,38.9c-0.2,17.1,0.2,34.1-0.1,51.2c-0.2,12,0.4,23.1,13.8,28.9c2,0.9,2.3,5.7,3.9,10.1
|
||||
c-24.3,0-46.8,0-74.1,0c3.9-4.9,6.7-7.8,8.8-11.1c4.1-6.3,10.7-12.6,11.3-19.3c1.6-18.4,1.1-37.1,0.4-55.6
|
||||
c-0.7-20-12.1-25.3-29.1-14.6c-12.8,8-21.2,17.6-19.2,34.2c1.3,10.9,0.2,22,0.3,33.1c0.1,10,1.8,18.7,13,22.9
|
||||
C565.4,564.3,566.2,569.7,568.4,574.3z"/>
|
||||
<path class="st1" d="M201.6,643.5c-22.9,0-45,0-67.8,0c0-95.8,0-190.9,0-287.2c22.3,0,44.3,0,66.4,0c3,12.1,3,12.1-8.5,12.4
|
||||
c-22.8,0.6-25.3,3.2-25.3,25.2c0,70.8,0,141.6,0,212.3c0,21,3.3,24.6,24.3,24.8C198.8,631.2,205.2,631.7,201.6,643.5z"/>
|
||||
<path class="st2" d="M799.1,355.9c22,0,44.1,0,67.1,0c0,95.8,0,190.9,0,288.2c-20.6,0-41.7,0.3-62.6-0.4c-2.6-0.1-5-5.7-7.7-9
|
||||
c3.4-2,4.3-3,5.1-2.9c36.9,0.6,33-8,32.9-34.8c-0.2-67.8-0.1-135.5-0.1-203.3c0-21.8-2.3-24.2-24-24.9
|
||||
C797.9,368.2,797.9,368.2,799.1,355.9z"/>
|
||||
<path class="st3" d="M199.9,459.3c0-4.9,0-8.8,0-13.8c7.8-0.4,15.1-0.8,23.2-1.2c1.2-12.3,1.6-24.2,3.8-35.8
|
||||
c3.5-17.9,11.1-33.5,30.3-39.9c14.3-4.8,28.8-0.2,32.5,10.9c3.5,10.7,0.7,20.1-9.7,25.8c-11,6-22.1,0.9-30.4-13.3
|
||||
c-8.3,9.5-8.1,12.2-1.3,22.5c5.9,8.8,10.8,18.2,17.6,29.9c5.2,0,14.1,0,24.1,0c0.3,5.3,0.6,9.5,1,15.2c-9.7,0-18.6,0-29.3,0
|
||||
c0,29.7-1,58.1,0.8,86.4c0.4,6,11.2,11.4,17.3,17c3,2.7,6.2,5.1,9.3,7.7c-0.9,1.2-1.7,2.3-2.6,3.5c-26.6,0-53.3,0-84.1,0
|
||||
c4.3-5.4,6.1-9.6,9.3-11.3c9-4.8,13-11.5,12.7-21.8c-0.5-18.6-0.1-37.1-0.1-55.7C224.2,461.3,224.2,461.3,199.9,459.3z"/>
|
||||
<path class="st4" d="M704.2,511.1c2.1,18.6,10.1,31.1,26.4,37c17.8,6.4,32.3-0.7,45.7-12c4.8-4,10.4-7,17.8-11.9
|
||||
c-2.8,34.3-38.6,58.4-72.8,52.8c-39-6.4-60.9-42.9-51.4-85.8c7.8-35.4,44.5-57.1,80.3-47.5c21.4,5.7,37.1,25.5,38.2,47.1
|
||||
c0.5,9.7-2.1,14.5-13.2,14.9C752.1,506.7,729,509.2,704.2,511.1z M751.3,492.4c3.4-21.1-3.5-34.4-17.8-35.6
|
||||
c-17.7-1.4-29.4,13.9-29.3,39.9C720.1,495.3,735.8,493.8,751.3,492.4z"/>
|
||||
<path class="st3" d="M387.2,574.5c-27.4,0-50.6,0-77.3,0c2.8-4.8,4-10,6.9-11.3c10.8-4.9,14.3-12.8,13.9-24
|
||||
c-0.5-15.5-0.5-31.1,0-46.6c0.4-11.1-2.1-19.7-13.8-23.7c-2.1-0.7-4.6-4.1-4.4-6c0.2-2.1,2.9-5,5.1-5.7c15.7-5.2,31.5-9.9,49-15.3
|
||||
c0,32.3,0.2,63.7-0.1,95c-0.1,11.8,1.6,21.7,14.7,26.4C383.7,564.2,384.6,569.5,387.2,574.5z"/>
|
||||
<path class="st2" d="M400,517.3c0-11.5,0-21.3,0-32.9c13.4,0,26.4,0,39.3,0c12.5,0,25.1,0,38.8,0c0,10.9,0,21.1,0,32.9
|
||||
c-13,0-25.9,0-38.9,0C426.7,517.3,414.2,517.3,400,517.3z"/>
|
||||
<path class="st4" d="M311.1,383.6c1.5-0.9,1.9-1.3,2.3-1.3c40.7-2.4,41.2-2,51,46.2C350.9,431.9,334.6,418.2,311.1,383.6z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,111 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 1000 1000"
|
||||
style="enable-background:new 0 0 1000 1000;"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<style type="text/css">
|
||||
.st0 {
|
||||
fill: #96471e;
|
||||
}
|
||||
.st1 {
|
||||
fill: #97481e;
|
||||
}
|
||||
.st2 {
|
||||
fill: #97481f;
|
||||
}
|
||||
.st3 {
|
||||
fill: #974920;
|
||||
}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
class="st0"
|
||||
d="M947.9,571.5c-4.2,0-8.3-0.1-12.5-0.1c-2.3,0-4.5,0.1-6.8-0.1c-9.1-0.4-12.5-3.3-13.3-12.3
|
||||
c-0.5-5.8,0-11.7-0.4-17.5c-0.5-7-1.3-14-2.3-21c-0.7-4.7-3.2-8.6-6.6-11.9c-2.2-2.2-4.4-4.5-6.2-6.9c-3.1-4.1-2.8-7.5,0.8-11.1
|
||||
c2-2,4-4,6.2-5.8c9.3-7.7,11.8-17.7,10.2-29.2c-0.9-6.2-2.5-12-6.9-16.7c-5.3-5.7-12.3-7.7-19.7-7.9c-4.8-0.1-9.8,0.6-14.5,1.6
|
||||
c-3.9,0.8-4.5,2.3-4.5,6.3c0,40.8,0,81.5,0,122.3c0,4.4,1.1,5.9,5.4,6.9c1.6,0.4,3.4,0.5,5,0.9c0.7,0.2,1.2,0.8,1.8,1.3
|
||||
c-0.7,0.4-1.4,1.1-2.1,1.1c-9.5,0.1-18.9,0.1-28.4,0.1c-3.2,0-6.4,0.1-9.6,0c-0.7,0-1.3-0.6-2-0.9c0.6-0.5,1.1-1.4,1.8-1.5
|
||||
c2.3-0.6,4.6-0.8,6.9-1.5c2.5-0.8,3.7-2.6,3.6-5.4c-0.1-9.8,0-19.6,0-29.4c0-31.3,0-62.5,0-93.8c0-4.8-1-6-5.8-7.1
|
||||
c-1.7-0.4-3.4-0.5-5-0.9c-0.7-0.2-1.2-0.9-1.8-1.4c0.2-0.2,0.3-0.5,0.5-0.7c0.5-0.1,0.9-0.2,1.4-0.2c16.5,0,32.9-0.1,49.4,0.1
|
||||
c8.5,0.1,16.9,1.2,25.1,3.8c21.2,6.7,21.6,33.4,10.2,44.4c-5.2,5-11.1,8.6-17.3,12.1c-2.4,1.3-4.8,2.7-7,4.3
|
||||
c-3.7,2.7-3.5,4.8,0.7,6.6c2.2,1,4.6,1.8,6.8,2.7c13.1,5.2,20.3,14.8,21.7,28.7c0.9,8.8,1.5,17.6,2.9,26.3
|
||||
c1.2,7.7,5.1,10.9,12.4,11.6C947.9,570,947.9,570.7,947.9,571.5z"
|
||||
/>
|
||||
<path
|
||||
class="st1"
|
||||
d="M761.8,427.4c3.4,0.7,6.8,1.1,10.1,2c26.2,7.1,42.3,24.2,49.1,49.9c8.9,33.5-8.2,70.6-39.1,86
|
||||
c-33.2,16.5-72.2,3.2-88.4-30.1c-17.9-36.8-2.2-82.6,34.5-100.8c7.3-3.6,15.1-5.9,23.3-6.6c0.5,0,1-0.3,1.5-0.5
|
||||
C755.8,427.4,758.8,427.4,761.8,427.4z M804.3,501.5c-0.3-3.3-0.5-8-1.1-12.7c-2-14.9-6.7-28.7-16.3-40.6
|
||||
c-12.5-15.3-33.2-21.1-50.7-14c-11.8,4.8-19,14-23.7,25.3c-8.3,19.5-9.3,39.6-4.7,60c3.1,13.9,8.8,26.5,19.2,36.7
|
||||
c16.9,16.6,49.2,19.1,65.4-7.2C801.1,534.9,803.8,519.2,804.3,501.5z"
|
||||
/>
|
||||
<path
|
||||
class="st2"
|
||||
d="M368.6,427.4c2.8,0.6,5.6,1,8.4,1.7c12.8,3,23.2,9.3,29.7,21.1c2.9,5.2,4.9,10.8,4.4,16.9
|
||||
c-0.5,5.8-3.1,10.2-8.5,12.7c-4,1.9-6.1,0.7-6.5-3.8c-0.6-7.9-1.8-15.7-4.8-23.1c-7.9-19.5-25.8-24.3-40.3-21
|
||||
c-9.3,2.2-15.7,8.4-20.5,16.2c-9.2,15-12.1,31.5-11.3,48.7c0.8,16.7,4.8,32.4,15,46c9,12,20.8,19.3,36,20.3
|
||||
c10.9,0.7,20.3-3.5,29-9.6c11.8-8.5,20.5-19.6,26.8-32.9c0.7,0.3,1.5,0.5,2.3,0.9c-6.4,15.6-16.3,28.1-29.7,37.9
|
||||
c-10.9,8-22.9,13.1-36.7,13.2c-15.3,0.1-28.1-6.2-38.6-16.9c-24.3-24.8-30-64.8-13.3-94.9c10.7-19.2,26.8-30.7,49.1-32.9
|
||||
c0.3,0,0.6-0.3,0.9-0.5C362.9,427.4,365.7,427.4,368.6,427.4z"
|
||||
/>
|
||||
<path
|
||||
class="st2"
|
||||
d="M552.6,429.4c-0.6,0.5-1.2,1.4-1.9,1.6c-2,0.5-4.1,0.6-6.1,1.2c-3.5,1-4.5,2.4-4.5,6.1c0,25.1,0,50.3,0,75.4
|
||||
c0,12.3-1.7,24.2-7,35.4c-6.2,13.1-15.9,21.9-30.9,22.7c-16.4,0.9-29.9-5.1-39.3-19.1c-5.6-8.4-7.2-17.9-7.2-27.7
|
||||
c0-28.8,0-57.6,0-86.5c0-4.5-1-5.8-5.4-6.8c-1.7-0.4-3.4-0.4-5-0.9c-0.8-0.2-1.3-1.1-2-1.6c0.2-0.2,0.3-0.5,0.5-0.7
|
||||
c13.9,0,27.7,0,41.6,0c0.2,0.2,0.3,0.4,0.5,0.6c-0.6,0.6-1.1,1.5-1.8,1.7c-2.4,0.7-4.8,0.9-7.2,1.6c-2.1,0.6-3.5,2.1-3.5,4.6
|
||||
c0.1,31.5-0.1,63.1,0.4,94.6c0.2,15.3,10.3,26.9,24.4,30.2c13,3,24-2.1,31.3-14.7c6.1-10.5,8.1-22,8.2-33.9c0.1-25,0-49.9,0-74.9
|
||||
c0-4-1.2-5.6-5.1-6.5c-1.8-0.4-3.7-0.5-5.6-1.1c-0.7-0.2-1.2-1.1-1.8-1.6c0.2-0.2,0.3-0.4,0.5-0.6c8.9,0,17.7,0,26.6,0
|
||||
C552.2,428.9,552.4,429.2,552.6,429.4z"
|
||||
/>
|
||||
<path
|
||||
class="st3"
|
||||
d="M601.1,497.3c0,1.1,0,2,0,2.8c0,20.4,0,40.9,0,61.3c0,4.3,0.9,5.7,5.2,6.8c2.3,0.6,4.6,0.9,7,0.9
|
||||
c7.6,0.1,15.1-0.1,22.7,0.1c8.9,0.2,15.8-3.4,20.9-10.3c2.8-3.8,4.8-8.1,7.2-12.1c0.4-0.7,1.2-1.1,1.8-1.6
|
||||
c0.2,0.2,0.5,0.4,0.7,0.7c-2.3,6.8-4.6,13.7-7,20.5c-1.1,3-3.4,4.7-6.6,4.9c-1.2,0.1-2.5,0.2-3.7,0.2c-25,0-49.9,0-74.9,0
|
||||
c-0.3,0-0.6,0.1-0.8,0c-0.8-0.4-1.6-0.8-2.3-1.2c0.8-0.5,1.5-1.1,2.3-1.4c1.4-0.4,2.8-0.4,4.2-0.7c4.7-1.1,5.8-2.5,5.8-7.2
|
||||
c0-40.3,0-80.6,0-120.9c0-6.1-1.4-7.7-7.5-8.6c-1.1-0.2-2.3-0.2-3.3-0.5c-0.7-0.2-1.2-1-1.8-1.5c0.2-0.3,0.3-0.5,0.5-0.8
|
||||
c1,0,2,0,3.1,0c24.1,0,48.2,0,72.3,0c6.4,0,8.4,1.4,10.4,7.3c2,6.1,4,12.1,6,18.2c-0.2,0.2-0.4,0.4-0.7,0.6
|
||||
c-0.6-0.6-1.4-1.1-1.8-1.8c-2.7-5.8-5.8-11.4-10.7-15.8c-4.6-4.2-9.9-6.4-16.2-6.3c-6.8,0-13.6,0-20.4,0c-1,0-2.1,0-3.1,0.1
|
||||
c-7.9,0.9-9.3,2.4-9.3,10.2c0,16.9,0,33.7,0,50.6c0,1,0,2,0,3.3c8,0,15.7,0.1,23.4-0.2c1.1,0,2.9-2,3.2-3.4
|
||||
c1.1-4.8,1.7-9.8,2.4-14.7c0.2-1.4,0.3-2.5,2.3-1.6c0,6,0,12,0,18c0,7.3,0,14.7,0,22c0,1.4-0.1,2.5-1.9,1.9c-0.7-4.7-1.1-9.4-2-14
|
||||
c-1-5.4-1.8-5.9-7.3-5.9C614.6,497.3,608.1,497.3,601.1,497.3z"
|
||||
/>
|
||||
<path
|
||||
class="st3"
|
||||
d="M186.5,512.1c-2.6,8.1-5.3,16.1-7.8,24.1c-2.7,8.5-5.5,17-8.2,25.5c-1,3.3-0.6,4.5,2.6,5.7
|
||||
c1.9,0.7,4,0.9,6,1.5c0.7,0.2,1.3,1.1,1.9,1.7c-0.2,0.2-0.3,0.5-0.5,0.7c-8.7,0-17.3,0-26,0c-0.2-0.2-0.4-0.5-0.5-0.7
|
||||
c0.7-0.6,1.3-1.5,2.1-1.7c2-0.6,4.1-0.7,6.1-1.2c2.9-0.8,4.8-2.6,5.7-5.7c12.6-39.3,25.2-78.6,37.9-117.8
|
||||
c1.3-3.9,2.9-7.8,5.1-11.2c4.3-6.8,13.6-7.3,18.1-0.7c3.1,4.6,5.4,9.9,7.2,15.2c12.8,37.4,25.5,74.9,38,112.4
|
||||
c1.9,5.6,5.2,8.1,10.6,8.8c0.6,0.1,1.2,0,1.7,0.3s0.9,0.9,1.3,1.4c-0.5,0.3-1.1,1-1.6,1c-3.1,0.1-6.2,0-9.4,0
|
||||
c-9.9,0-19.8,0-29.8,0c-0.2-0.2-0.4-0.5-0.6-0.7c0.6-0.6,1.1-1.6,1.9-1.8c2-0.5,4.1-0.6,6.1-1.1c2.8-0.9,3.6-2.4,2.6-5.2
|
||||
c-5.5-16.3-11-32.6-16.6-48.8c-0.2-0.7-1.4-1.6-2.1-1.6C221.1,512.1,203.9,512.1,186.5,512.1z M239,509.8
|
||||
c-0.2-0.8-0.4-1.4-0.5-1.9c-5.6-16.7-11.3-33.5-17-50.2c-1.2-3.6-2.3-7.2-3.6-10.7c-0.8-2-2.1-3.8-4.7-4c-2.5-0.1-4.1,1.4-5.1,3.4
|
||||
c-1,1.8-1.8,3.7-2.4,5.7c-6,18.5-11.9,37-17.8,55.5c-0.2,0.7-0.3,1.4-0.4,2.1C204.8,509.8,221.8,509.8,239,509.8z"
|
||||
/>
|
||||
<path
|
||||
class="st3"
|
||||
d="M52.8,428.7c13.8,0,27.6,0,41.3,0c0.4,2,0.4,2-1.2,2.3c-2.3,0.5-4.6,0.8-6.9,1.5c-2.4,0.7-3.6,2.4-3.6,5
|
||||
c0,41.7,0,83.4,0,125.1c0,2.5,1.1,4.3,3.4,4.9c2.8,0.8,5.7,1.4,8.6,1.5c6.2,0.2,12.5-0.2,18.7,0.1c9.5,0.4,16.8-3.6,21.9-11.1
|
||||
c3.3-4.8,5.6-10.2,8.3-15.3c0.4-0.8,1.2-1.4,1.8-2.1c0.3,0.2,0.5,0.4,0.8,0.6c-2.9,8.4-5.6,16.9-8.6,25.3c-0.9,2.7-3.1,4.2-6,4.5
|
||||
c-1.1,0.1-2.3,0.2-3.4,0.2c-24.4,0-48.8,0-73.2,0c-0.7,0-1.3,0-2,0c-0.2-0.2-0.4-0.5-0.6-0.7c0.6-0.6,1.2-1.5,1.9-1.7
|
||||
c1.9-0.5,3.9-0.6,5.8-1.1c3.7-1,4.7-2.4,4.7-6.3c0-39.8,0-79.6,0-119.5c0-1.4,0-2.8,0-4.2c0-3.4-1-4.8-4.3-5.7
|
||||
c-2.1-0.6-4.3-0.7-6.4-1.3c-0.7-0.2-1.2-1.1-1.8-1.6C52.4,429.1,52.6,428.9,52.8,428.7z"
|
||||
/>
|
||||
<path
|
||||
class="st2"
|
||||
d="M754.6,511c-5.9,0-10.8-5.2-10.8-11.4c0-6.3,4.9-11.4,10.8-11.5c6.1-0.1,11,5.2,10.9,11.6
|
||||
C765.4,506,760.5,511.1,754.6,511z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
@@ -0,0 +1,36 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
|
||||
<!-- Background -->
|
||||
<rect width="200" height="150" fill="#fdfbf8"/>
|
||||
<!-- Top gold border -->
|
||||
<rect width="200" height="2" fill="#b8965a" opacity="0.5"/>
|
||||
<!-- Label line -->
|
||||
<rect x="75" y="14" width="50" height="3" rx="1" fill="#b8965a" opacity="0.7"/>
|
||||
<!-- Title lines -->
|
||||
<rect x="40" y="23" width="120" height="5" rx="1" fill="#1c1c1c" opacity="0.18"/>
|
||||
<rect x="60" y="32" width="80" height="3" rx="1" fill="#1c1c1c" opacity="0.10"/>
|
||||
<!-- Three benefit columns -->
|
||||
<rect x="12" y="48" width="52" height="44" rx="1" fill="none" stroke="#b8965a" stroke-width="0.8" opacity="0.4"/>
|
||||
<rect x="74" y="48" width="52" height="44" rx="1" fill="none" stroke="#b8965a" stroke-width="0.8" opacity="0.4"/>
|
||||
<rect x="136" y="48" width="52" height="44" rx="1" fill="none" stroke="#b8965a" stroke-width="0.8" opacity="0.4"/>
|
||||
<!-- Column icons (diamond dots) -->
|
||||
<rect x="35" y="54" width="5" height="5" rx="0.5" fill="#b8965a" opacity="0.6" transform="rotate(45 37.5 56.5)"/>
|
||||
<rect x="97" y="54" width="5" height="5" rx="0.5" fill="#b8965a" opacity="0.6" transform="rotate(45 99.5 56.5)"/>
|
||||
<rect x="159" y="54" width="5" height="5" rx="0.5" fill="#b8965a" opacity="0.6" transform="rotate(45 161.5 56.5)"/>
|
||||
<!-- Column text lines -->
|
||||
<rect x="20" y="65" width="36" height="2.5" rx="1" fill="#1c1c1c" opacity="0.15"/>
|
||||
<rect x="22" y="71" width="32" height="2" rx="1" fill="#7a7265" opacity="0.2"/>
|
||||
<rect x="22" y="76" width="28" height="2" rx="1" fill="#7a7265" opacity="0.15"/>
|
||||
<rect x="82" y="65" width="36" height="2.5" rx="1" fill="#1c1c1c" opacity="0.15"/>
|
||||
<rect x="84" y="71" width="32" height="2" rx="1" fill="#7a7265" opacity="0.2"/>
|
||||
<rect x="84" y="76" width="28" height="2" rx="1" fill="#7a7265" opacity="0.15"/>
|
||||
<rect x="144" y="65" width="36" height="2.5" rx="1" fill="#1c1c1c" opacity="0.15"/>
|
||||
<rect x="146" y="71" width="32" height="2" rx="1" fill="#7a7265" opacity="0.2"/>
|
||||
<rect x="146" y="76" width="28" height="2" rx="1" fill="#7a7265" opacity="0.15"/>
|
||||
<!-- Gold divider rule -->
|
||||
<rect x="90" y="98" width="20" height="1" fill="#b8965a" opacity="0.5"/>
|
||||
<!-- Form placeholder (dashed box) -->
|
||||
<rect x="30" y="106" width="140" height="30" rx="1" fill="#f7f4ef" stroke="#b8965a" stroke-width="0.8" stroke-dasharray="4 2" opacity="0.6"/>
|
||||
<rect x="70" y="119" width="60" height="2.5" rx="1" fill="#7a7265" opacity="0.2"/>
|
||||
<!-- Bottom border -->
|
||||
<rect y="148" width="200" height="2" fill="#b8965a" opacity="0.3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 89 KiB |
@@ -0,0 +1,45 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 120" width="400" height="120">
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="400" height="120" fill="#f7f4ef"/>
|
||||
|
||||
<!-- Header bar -->
|
||||
<rect x="0" y="16" width="400" height="52" fill="rgba(247,244,239,0.95)"/>
|
||||
<rect x="0" y="67" width="400" height="1" fill="rgba(184,150,90,0.35)"/>
|
||||
|
||||
<!-- Logo text (italic serif) -->
|
||||
<text x="24" y="47" font-family="Georgia, serif" font-size="13" font-style="italic"
|
||||
font-weight="300" fill="#1c1c1c" letter-spacing="1">fi-ne & LACUEOR</text>
|
||||
|
||||
<!-- Portal label separator -->
|
||||
<rect x="148" y="34" width="1" height="18" fill="#d6d0c8"/>
|
||||
|
||||
<!-- Portal label text -->
|
||||
<text x="154" y="43" font-family="Arial, sans-serif" font-size="5.5" font-weight="500"
|
||||
fill="#7a7265" letter-spacing="1.4" text-transform="uppercase">B2B</text>
|
||||
<text x="154" y="51" font-family="Arial, sans-serif" font-size="5.5" font-weight="500"
|
||||
fill="#7a7265" letter-spacing="1.4">PARTNER PORTAL</text>
|
||||
|
||||
<!-- Nav links -->
|
||||
<text x="210" y="46" font-family="Arial, sans-serif" font-size="7" font-weight="500"
|
||||
fill="#7a7265" letter-spacing="1.8">OUR BRANDS</text>
|
||||
<text x="278" y="46" font-family="Arial, sans-serif" font-size="7" font-weight="500"
|
||||
fill="#7a7265" letter-spacing="1.8">CONTACT</text>
|
||||
|
||||
<!-- Sign In button -->
|
||||
<rect x="327" y="30" width="52" height="22" fill="none"
|
||||
stroke="#b8965a" stroke-width="1"/>
|
||||
<text x="353" y="45" font-family="Arial, sans-serif" font-size="6.5" font-weight="600"
|
||||
fill="#b8965a" letter-spacing="1.5" text-anchor="middle">SIGN IN</text>
|
||||
|
||||
<!-- Bottom gold rule decoration -->
|
||||
<rect x="0" y="68" width="400" height="1" fill="rgba(184,150,90,0.18)"/>
|
||||
|
||||
<!-- Snippet label at bottom -->
|
||||
<text x="200" y="100" font-family="Arial, sans-serif" font-size="8.5" font-weight="500"
|
||||
fill="#7a7265" letter-spacing="0.5" text-anchor="middle">Finor – Luxury B2B</text>
|
||||
|
||||
<!-- Small gold diamond decoration -->
|
||||
<rect x="188" y="107" width="5" height="5" fill="#b8965a" transform="rotate(45 190.5 109.5)"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,15 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 100" width="180" height="100">
|
||||
<rect width="180" height="100" fill="#f9f5f0"/>
|
||||
<!-- left card -->
|
||||
<rect x="8" y="20" width="76" height="68" rx="5" fill="#2a2a2a"/>
|
||||
<rect x="8" y="20" width="76" height="3" rx="2" fill="#c9a96e"/>
|
||||
<rect x="16" y="72" width="40" height="5" rx="2" fill="#c9a96e" opacity=".8"/>
|
||||
<rect x="16" y="80" width="28" height="3" rx="1.5" fill="#fff" opacity=".6"/>
|
||||
<!-- right card -->
|
||||
<rect x="96" y="20" width="76" height="68" rx="5" fill="#1e1e1e"/>
|
||||
<rect x="96" y="20" width="76" height="3" rx="2" fill="#c9a96e"/>
|
||||
<rect x="104" y="72" width="40" height="5" rx="2" fill="#c9a96e" opacity=".8"/>
|
||||
<rect x="104" y="80" width="28" height="3" rx="1.5" fill="#fff" opacity=".6"/>
|
||||
<!-- label -->
|
||||
<text x="90" y="13" font-family="sans-serif" font-size="7" fill="#6b7280" text-anchor="middle">Brand Universe</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 920 B |
@@ -0,0 +1,676 @@
|
||||
// ============================================================
|
||||
// Fino – Brand Snippets + Fino Luxury Header
|
||||
// Sections:
|
||||
// 1. fino_brands – Consumer & Retail Destinations
|
||||
// 2. o_fino_navbar – Fino Luxury Header
|
||||
// 3. fino_b2b – B2B Partner Access
|
||||
// ============================================================
|
||||
|
||||
// ── Shared design tokens ─────────────────────────────────────────────────────
|
||||
$cream: #f7f4ef;
|
||||
$warm-white: #fdfbf8;
|
||||
$gold: #b8965a;
|
||||
$gold-light: #d4b07a;
|
||||
$charcoal: #1c1c1c;
|
||||
$mid-grey: #7a7265;
|
||||
$light-grey: #d6d0c8;
|
||||
$fine-beige: #e8e0d0;
|
||||
$lacueor-dark: #1a1814;
|
||||
$lacueor-gold: #c9aa5e;
|
||||
$border: rgba(184, 150, 90, 0.25);
|
||||
$transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
$font-serif:
|
||||
"Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Georgia,
|
||||
serif;
|
||||
$font-sans:
|
||||
"Optima", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
|
||||
"Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
// ============================================================
|
||||
// 1. BRAND UNIVERSE SNIPPET (.fino_brands)
|
||||
// ============================================================
|
||||
.fino_brands {
|
||||
font-family: $font-sans;
|
||||
background: $warm-white;
|
||||
border-top: 1px solid $border;
|
||||
border-bottom: 1px solid $border;
|
||||
padding-top: 56px;
|
||||
padding-bottom: 56px;
|
||||
|
||||
// ── Section header ────────────────────────────────────────────────────
|
||||
.fino_brands_section_label {
|
||||
font-family: $font-sans;
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: $gold;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fino_brands_section_title {
|
||||
font-family: $font-serif;
|
||||
font-size: clamp(26px, 4vw, 42px);
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.04em;
|
||||
color: $charcoal;
|
||||
text-align: center;
|
||||
margin-bottom: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.fino_brands_section_body {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
line-height: 1.9;
|
||||
color: $mid-grey;
|
||||
text-align: center;
|
||||
max-width: 560px;
|
||||
margin: 0 auto 40px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
// ── Grid ─────────────────────────────────────────────────────────────
|
||||
.fino_brands_grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Card base ─────────────────────────────────────────────────────────
|
||||
.fino_brands_card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-height: 392px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
min-height: 294px;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Fine card ─────────────────────────────────────────────────────────
|
||||
.fino_brands_card--fine {
|
||||
background: $fine-beige;
|
||||
border-right: 1px solid $border;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Lacueor card ──────────────────────────────────────────────────────
|
||||
.fino_brands_card--lacueor {
|
||||
background: $lacueor-dark;
|
||||
}
|
||||
|
||||
// ── Product image ─────────────────────────────────────────────────────
|
||||
.fino_brands_card_image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.fino_brands_card--fine .fino_brands_card_image {
|
||||
opacity: 0.45;
|
||||
object-position: center 30%;
|
||||
}
|
||||
|
||||
.fino_brands_card--lacueor .fino_brands_card_image {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// ── Gradient overlay ──────────────────────────────────────────────────
|
||||
.fino_brands_card_overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fino_brands_card--fine .fino_brands_card_overlay {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(232, 224, 208, 0.2) 0%,
|
||||
rgba(232, 224, 208, 0.6) 50%,
|
||||
rgba(232, 224, 208, 0.94) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.fino_brands_card--lacueor .fino_brands_card_overlay {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(14, 12, 10, 0.1) 0%,
|
||||
rgba(14, 12, 10, 0.55) 50%,
|
||||
rgba(14, 12, 10, 0.95) 100%
|
||||
);
|
||||
}
|
||||
|
||||
// ── Top accent line (fades in on hover) ───────────────────────────────
|
||||
.fino_brands_card_top_accent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
transition: opacity $transition;
|
||||
}
|
||||
|
||||
.fino_brands_card--fine .fino_brands_card_top_accent {
|
||||
background: linear-gradient(to right, transparent, $gold, transparent);
|
||||
}
|
||||
|
||||
.fino_brands_card--lacueor .fino_brands_card_top_accent {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
$lacueor-gold,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
// ── Card content ──────────────────────────────────────────────────────
|
||||
.fino_brands_card_content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
padding: 32px 44px;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 991px) {
|
||||
padding: 24px 22px;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Eyebrow ───────────────────────────────────────────────────────────
|
||||
.fino_brands_card_eyebrow {
|
||||
font-size: 8px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.32em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 14px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fino_brands_card--fine .fino_brands_card_eyebrow {
|
||||
color: $gold;
|
||||
}
|
||||
.fino_brands_card--lacueor .fino_brands_card_eyebrow {
|
||||
color: $lacueor-gold;
|
||||
}
|
||||
|
||||
// ── Brand logo ────────────────────────────────────────────────────────
|
||||
.fino_brands_card_logo {
|
||||
display: block;
|
||||
width: 52%;
|
||||
max-width: 200px;
|
||||
min-width: 110px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
margin: 0 auto 16px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transition: opacity $transition;
|
||||
}
|
||||
|
||||
// Fine logo: dark fills work perfectly on the beige card — no filter
|
||||
.fino_brands_card--fine .fino_brands_card_logo {
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
// Lacueor logo: invert to clean white against the dark card
|
||||
.fino_brands_card--lacueor .fino_brands_card_logo {
|
||||
filter: brightness(0) invert(1);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
// ── Tagline ───────────────────────────────────────────────────────────
|
||||
.fino_brands_card_tagline {
|
||||
font-family: $font-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 22px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fino_brands_card--fine .fino_brands_card_tagline {
|
||||
color: $mid-grey;
|
||||
}
|
||||
.fino_brands_card--lacueor .fino_brands_card_tagline {
|
||||
color: rgba(247, 244, 239, 0.65);
|
||||
}
|
||||
|
||||
// ── CTA button ────────────────────────────────────────────────────────
|
||||
.fino_brands_card_cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
padding: 11px 28px;
|
||||
border: 1px solid;
|
||||
transition: all $transition;
|
||||
}
|
||||
|
||||
.fino_brands_card--fine .fino_brands_card_cta {
|
||||
color: $charcoal;
|
||||
border-color: $charcoal;
|
||||
}
|
||||
|
||||
.fino_brands_card--lacueor .fino_brands_card_cta {
|
||||
color: $lacueor-gold;
|
||||
border-color: $lacueor-gold;
|
||||
}
|
||||
|
||||
// ── CTA arrow ─────────────────────────────────────────────────────────
|
||||
.fino_brands_card_cta_arrow {
|
||||
display: inline-block;
|
||||
transition: transform $transition;
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════════════
|
||||
// HOVER STATES
|
||||
// ══════════════════════════════════════════════════════════════════════
|
||||
|
||||
.fino_brands_card:hover {
|
||||
text-decoration: none;
|
||||
|
||||
.fino_brands_card_image {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.fino_brands_card_top_accent {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fino_brands_card_cta_arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.fino_brands_card_logo {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// CTA fill — Fine card
|
||||
.fino_brands_card--fine:hover {
|
||||
.fino_brands_card_cta {
|
||||
background: $charcoal;
|
||||
color: $cream;
|
||||
}
|
||||
}
|
||||
|
||||
// CTA fill — Lacueor card
|
||||
.fino_brands_card--lacueor:hover {
|
||||
.fino_brands_card_cta {
|
||||
background: $lacueor-gold;
|
||||
color: $lacueor-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 2. FINOR LUXURY HEADER (.o_fino_navbar)
|
||||
// ============================================================
|
||||
.o_fino_navbar {
|
||||
background: rgba(247, 244, 239, 0.92) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid $border !important;
|
||||
height: 72px;
|
||||
box-shadow: none !important;
|
||||
|
||||
.o_fino_nav_inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 48px;
|
||||
height: 100%;
|
||||
|
||||
@media (max-width: 991px) {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.o_fino_brand_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.o_fino_brand_link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
||||
img {
|
||||
height: 28px;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: $font-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
letter-spacing: 0.06em;
|
||||
color: $charcoal;
|
||||
}
|
||||
}
|
||||
|
||||
.o_fino_portal_label {
|
||||
font-family: $font-sans;
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: $mid-grey;
|
||||
border-left: 1px solid $light-grey;
|
||||
padding-left: 12px;
|
||||
margin-left: 4px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.o_fino_nav_links {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.o_fino_nav_link,
|
||||
.o_fino_nav_links .nav-link {
|
||||
font-family: $font-sans !important;
|
||||
font-size: 10px !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 0.18em !important;
|
||||
text-transform: uppercase !important;
|
||||
color: $mid-grey !important;
|
||||
text-decoration: none !important;
|
||||
transition: color $transition !important;
|
||||
padding: 0 12px !important;
|
||||
background: none !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $gold !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.o_fino_nav_actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.o_fino_btn_signin {
|
||||
display: inline-block;
|
||||
font-family: $font-sans !important;
|
||||
font-size: 9px !important;
|
||||
font-weight: 600 !important;
|
||||
letter-spacing: 0.2em !important;
|
||||
text-transform: uppercase !important;
|
||||
padding: 9px 22px !important;
|
||||
border: 1px solid $gold !important;
|
||||
color: $gold !important;
|
||||
background: transparent !important;
|
||||
text-decoration: none !important;
|
||||
transition: all $transition !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $gold !important;
|
||||
color: $warm-white !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 3. B2B PARTNER ACCESS SNIPPET (.fino_b2b)
|
||||
// ============================================================
|
||||
.fino_b2b {
|
||||
font-family: $font-sans;
|
||||
background: $warm-white;
|
||||
border-top: 1px solid $border;
|
||||
border-bottom: 1px solid $border;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 0;
|
||||
|
||||
// ── Section label ─────────────────────────────────────────────────────
|
||||
.fino_b2b_label {
|
||||
font-family: $font-sans;
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: $gold;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// ── Section title ─────────────────────────────────────────────────────
|
||||
.fino_b2b_title {
|
||||
font-family: $font-serif;
|
||||
font-size: clamp(28px, 4vw, 44px);
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.04em;
|
||||
color: $charcoal;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
// ── Body paragraph ────────────────────────────────────────────────────
|
||||
.fino_b2b_body {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
line-height: 1.9;
|
||||
color: $mid-grey;
|
||||
text-align: center;
|
||||
max-width: 580px;
|
||||
margin: 0 auto 56px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
// ── Benefits grid ─────────────────────────────────────────────────────
|
||||
.fino_b2b_benefits {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto 56px;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Benefit card ──────────────────────────────────────────────────────
|
||||
.fino_b2b_benefit {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 48px 36px 44px;
|
||||
border-top: 2px solid $gold;
|
||||
border-left: 1px solid $border;
|
||||
border-right: 1px solid $border;
|
||||
border-bottom: 1px solid $border;
|
||||
background: $warm-white;
|
||||
transition:
|
||||
background $transition,
|
||||
transform $transition,
|
||||
box-shadow $transition;
|
||||
|
||||
// Top gold accent line glow on hover
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: $gold-light;
|
||||
transition: width $transition;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $cream;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 16px 48px rgba(184, 150, 90, 0.14);
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fino_b2b_benefit_icon_wrap {
|
||||
background: $gold;
|
||||
border-color: $gold;
|
||||
|
||||
svg {
|
||||
stroke: $warm-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Icon wrapper ──────────────────────────────────────────────────────
|
||||
.fino_b2b_benefit_icon_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border: 1px solid rgba(184, 150, 90, 0.45);
|
||||
background: $cream;
|
||||
margin-bottom: 26px;
|
||||
flex-shrink: 0;
|
||||
transition:
|
||||
background $transition,
|
||||
border-color $transition;
|
||||
|
||||
svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
stroke: $gold;
|
||||
fill: none;
|
||||
stroke-width: 1.2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
transition: stroke $transition;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Benefit title ─────────────────────────────────────────────────────
|
||||
.fino_b2b_benefit_title {
|
||||
font-family: $font-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.07em;
|
||||
color: $charcoal;
|
||||
margin-bottom: 14px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// ── Title–body separator ──────────────────────────────────────────────
|
||||
.fino_b2b_benefit_rule {
|
||||
width: 32px;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, $gold, transparent);
|
||||
margin: 0 auto 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// ── Benefit body ──────────────────────────────────────────────────────
|
||||
.fino_b2b_benefit_text {
|
||||
font-size: 12.5px;
|
||||
font-weight: 300;
|
||||
line-height: 1.9;
|
||||
color: $mid-grey;
|
||||
letter-spacing: 0.018em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// ── Gold rule divider ─────────────────────────────────────────────────
|
||||
.fino_b2b_divider {
|
||||
width: 80px;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, $gold, transparent);
|
||||
margin: 0 auto 52px;
|
||||
}
|
||||
|
||||
// ── Form placeholder area ─────────────────────────────────────────────
|
||||
.fino_b2b_form_area {
|
||||
max-width: 640px;
|
||||
margin: 0 auto 56px;
|
||||
border: 1px dashed rgba(184, 150, 90, 0.45);
|
||||
padding: 48px 40px;
|
||||
text-align: center;
|
||||
background: $cream;
|
||||
}
|
||||
|
||||
.fino_b2b_form_placeholder {
|
||||
font-family: $font-sans;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(122, 114, 101, 0.55);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// ── Footer notice ribbon ──────────────────────────────────────────────
|
||||
.fino_b2b_notice {
|
||||
text-align: center;
|
||||
padding: 20px 48px;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.15em;
|
||||
color: $mid-grey;
|
||||
background: $cream;
|
||||
border-top: 1px solid $border;
|
||||
margin-top: 0;
|
||||
|
||||
a {
|
||||
color: $gold;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: $gold-light;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/** @odoo-module **/
|
||||
import options from '@web_editor/js/editor/snippets.options';
|
||||
|
||||
options.registry.BrandsSnippet = options.Class.extend({
|
||||
// No custom options needed – the snippet is fully styled via SCSS.
|
||||
});
|
||||
Reference in New Issue
Block a user