old
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user