*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--gold:#1B6B45;--gold-l:#2E9B65;--gold-d:#134F33;
--ink:#08060F;--navy:#071A10;--cream:#F4FAF6;
--wine:#0D5C35;--wine-d:#094025;
--white:#FFFFFF;--muted:#9CA3AF;--border:#D0E9DA;
--nav-h:100px;
}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;background:var(--cream);color:#1A1A2E;overflow-x:hidden}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
NAVBAR — Modern Floating Pill Layout
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 900;
}
/* ── Transparent bar — full-bleed, flush to the top edge ──────────
At the top of the page the bar is fully transparent and lets the
hero show through cleanly, with no scrim, border or edge line.
On scroll it turns into a frosted-glass panel. */
.nav {
--nav-fg: #F8FCF9;
--nav-fg-soft: rgba(244, 250, 246, 0.78);
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 92px;
background: transparent;
border-bottom: 1px solid transparent;
box-shadow: none;
transition: height 0.45s cubic-bezier(.16, 1, .3, 1),
background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
/* A fine emerald filament along the very top edge — matches the footer. */
.nav::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent,
var(--gold-d) 15%, var(--gold-l) 50%, var(--gold-d) 85%, transparent);
opacity: 0.9;
}
/* Minimised — the bar slims down on scroll into a frosted-glass
panel: a strong blur with only a light dark tint, so it stays
transparent-feeling yet keeps the white nav text readable over
light page content. */
.nav.scrolled {
height: 72px;
background: rgba(6, 14, 10, 0.38);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
border-bottom-color: rgba(255, 255, 255, 0.10);
box-shadow: 0 8px 26px rgba(6, 14, 10, 0.20);
}
/* Inner row — content held to a max width, generous breathing room. */
.nav-inner {
width: 100%;
max-width: 1440px;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: 0 clamp(24px, 5vw, 72px);
transition: padding 0.45s cubic-bezier(.16, 1, .3, 1);
}
.nav.scrolled .nav-inner { padding: 0 clamp(20px, 4vw, 56px); }
/* ── Logo ── */
.nav-logo {
flex-shrink: 0; display: flex; align-items: center;
text-decoration: none;
transition: opacity 0.3s ease, transform 0.45s cubic-bezier(.16, 1, .3, 1);
}
.nav-logo:hover { opacity: 0.72; }
.nav-logo img {
height: 96px; width: auto; object-fit: contain;
transition: height 0.45s cubic-bezier(.16, 1, .3, 1);
}
.nav.scrolled .nav-logo img { height: 72px; }
/* ── Centre links ── */
.nav-links-wrap { flex: 1; display: flex; justify-content: center; }
.nav-links-list { position: relative; display: flex; align-items: center; gap: 8px; list-style: none; }
.nav-links-list > li { position: static; }
.nav-links-list > li > a,
.nav-links-list > li > button {
position: relative;
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 12px;
font-family: 'Jost', sans-serif; font-size: 11.5px; font-weight: 500;
letter-spacing: .17em; text-transform: uppercase;
color: var(--nav-fg-soft);
text-decoration: none; background: none; border: none; cursor: pointer;
white-space: nowrap;
transition: color 0.3s ease, transform 0.32s cubic-bezier(.16, 1, .3, 1);
}
.nav-links-list > li > a:hover,
.nav-links-list > li > button:hover,
.nav-links-list > li:focus-within > a,
.nav-links-list > li:focus-within > button,
.nav-links-list > li.nv-has-mega.open > a,
.nav-links-list > li.is-active > a {
color: var(--nav-fg);
}
.nav-links-list > li > a:hover,
.nav-links-list > li > button:hover { transform: translateY(-1px); }
/* ── Sliding gem indicator ──────────────────────────────────────
A single hairline carrying a gliding diamond. The nav JS moves it
between links via custom properties, following the cursor. */
.nav-ind {
position: absolute; top: 0; left: 0;
width: var(--nav-ind-w, 0px); height: 2px;
transform: translate(var(--nav-ind-x, 0px), var(--nav-ind-y, 0px));
background: linear-gradient(90deg, transparent, var(--gold-l) 20%, var(--gold-l) 80%, transparent);
border-radius: 2px;
opacity: 0; pointer-events: none;
transition: transform 0.52s cubic-bezier(.34, 1.32, .38, 1),
width 0.52s cubic-bezier(.34, 1.32, .38, 1),
opacity 0.3s ease;
}
.nav-ind.is-on { opacity: 1; }
.nav-ind::after {
content: '';
position: absolute; left: 50%; top: 50%;
width: 7px; height: 7px; margin: -4px 0 0 -3.5px;
background: var(--gold-l); transform: rotate(45deg);
box-shadow: 0 0 8px rgba(46, 155, 101, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.35);
animation: navGemGlow 2.8s ease-in-out infinite;
}
@keyframes navGemGlow {
0%, 100% { box-shadow: 0 0 6px rgba(46, 155, 101, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.3); }
50% { box-shadow: 0 0 16px rgba(46, 155, 101, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
.nav-ind { transition: opacity 0.2s ease; }
.nav-ind::after { animation: none; }
/* No size/slide animation — state changes apply instantly. */
.nav, .nav-inner, .nav-logo img, .nav-ico {
transition: background 0.2s ease, border-color 0.2s ease;
}
}
.nav-links-list > li > a svg,
.nav-links-list > li > button svg {
width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2;
flex-shrink: 0; opacity: .6;
transition: transform 0.35s ease, opacity 0.3s ease;
}
.nav-links-list > li.nv-has-mega:hover > a svg,
.nav-links-list > li.nv-has-mega.open > a svg,
.nav-links-list > li.nv-has-mega:focus-within > a svg,
.nav-links-list > li:hover > button svg,
.nav-links-list > li.open > button svg,
.nav-links-list > li:focus-within > button svg { transform: rotate(180deg); opacity: 1; }
/* ── Right actions ── */
.nav-actions { flex-shrink: 0; display: flex; align-items: center; gap: 2px; }
.nav-ico {
position: relative;
width: 40px; height: 40px; display: grid; place-items: center;
border: none; background: transparent; border-radius: 50%;
color: var(--nav-fg-soft); cursor: pointer;
transition: color 0.3s ease, transform 0.4s cubic-bezier(.16, 1, .3, 1),
width 0.45s cubic-bezier(.16, 1, .3, 1),
height 0.45s cubic-bezier(.16, 1, .3, 1);
}
.nav.scrolled .nav-ico { width: 36px; height: 36px; }
.nav-ico::before {
content: '';
position: absolute; inset: 5px; border-radius: 50%;
background: rgba(46, 155, 101, 0.18);
transform: scale(0.4); opacity: 0;
transition: transform 0.3s cubic-bezier(.16, 1, .3, 1), opacity 0.3s ease;
}
.nav-ico:hover { color: var(--gold-l); }
.nav-ico:hover::before { transform: scale(1); opacity: 1; }
.nav-ico svg {
position: relative; z-index: 1;
width: 18px; height: 18px;
fill: none; stroke: currentColor; stroke-width: 1.7;
}
.badge, .nav-wl-badge {
position: absolute; top: 2px; right: 2px;
min-width: 17px; height: 17px; padding: 0 3px;
background: var(--gold-l);
color: #fff; font-size: 9px; font-weight: 700; line-height: 1;
font-family: 'Jost', sans-serif;
border-radius: 9px; display: grid; place-items: center;
border: none;
z-index: 2;
}
/* Wishlisted heart — filled red */
.cgu-wished svg { fill: #e0245e !important; stroke: #e0245e !important; }
/* Product already in cart — its add control offers removal */
.cgu-incart { outline: 2px solid #000000; outline-offset: 2px; border-radius: 8px; }
.nav-rule {
width: 1px; height: 22px;
background: rgba(255, 255, 255, 0.14);
margin: 0 8px;
}
/* Hamburger */
.hamburger {
display: none; flex-direction: column; gap: 5px;
justify-content: center; align-items: center;
width: 42px; height: 42px;
background: transparent; border: none;
border-radius: 50%; cursor: pointer; padding: 13px;
transition: background 0.3s ease;
}
.hamburger:hover { background: rgba(255, 255, 255, 0.09); }
.hamburger span {
display: block; height: 1.6px; width: 100%;
background: var(--nav-fg, #16140F);
border-radius: 2px; transition: all 0.3s ease; transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
/* ── Mega menu ── */
/* The live mega-dropdowns are the `.nv-mega` components defined further
down. The legacy `.mega-panel` / `.simple-dd` styles were unused markup
and have been removed. */
/* ── Bridal dropdown ── */
/* (legacy .simple-dd removed — see .nv-mega) */
/* ═══════════════════════════════════════════════════
SEARCH OVERLAY — sidebar + content layout
═══════════════════════════════════════════════════ */
/* Shell */
.search-ov {
position: fixed; inset: 0; z-index: 1000;
height: 100vh; height: 100dvh;
background:
radial-gradient(ellipse 70% 50% at 20% 0%, rgba(138,138,138,0.10) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 100% 100%, rgba(74,74,74,0.18) 0%, transparent 55%),
#141414;
backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
display: flex; flex-direction: column;
opacity: 0; visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.search-ov.show { opacity: 1; visibility: visible; }
.search-ov.show .srch-topbar,
.search-ov.show .srch-sidebar,
.search-ov.show .srch-content { transform: translateY(0); opacity: 1; }
/* ── Top bar ── */
.srch-topbar {
flex-shrink: 0; display: flex; align-items: center; gap: 16px;
padding: 18px clamp(16px, 3vw, 36px);
border-bottom: 1px solid rgba(255,255,255,0.08);
transform: translateY(-12px); opacity: 0;
transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1), opacity 0.5s ease;
}
.srch-logo-wrap { display: flex; align-items: center; text-decoration: none; }
.srch-logo-img { height: clamp(52px, 6vw, 76px); width: auto; opacity: 1; }
.srch-topbar-hint {
margin-left: auto;
font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 0.06em; color: rgba(255,255,255,0.32);
}
.srch-topbar-hint kbd {
display: inline-block; padding: 2px 7px; margin: 0 2px;
font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
border-radius: 5px; color: rgba(255,255,255,0.7);
}
.srch-close-btn {
width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%; color: rgba(255,255,255,0.7); cursor: pointer;
transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.35s;
}
.srch-close-btn:hover { background: #000000; border-color: #000000; color: #fff; transform: rotate(90deg); }
.srch-close-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* ── Main 2-col body ── */
.srch-main {
flex: 1; min-height: 0;
display: grid; grid-template-columns: 320px 1fr;
grid-template-rows: minmax(0, 1fr);
}
/* ── Sidebar ── */
.srch-sidebar {
background:
linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%),
rgba(20,20,20,0.55);
border-right: 1px solid rgba(255,255,255,0.10);
padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 28px);
overflow-y: auto;
display: flex; flex-direction: column; gap: 36px;
scrollbar-width: thin; scrollbar-color: rgba(138,138,138,0.35) transparent;
transform: translateX(-16px); opacity: 0;
transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1) 0.05s, opacity 0.5s ease 0.05s;
}
.srch-sidebar::-webkit-scrollbar { width: 4px; }
.srch-sidebar::-webkit-scrollbar-thumb { background: rgba(138,138,138,0.35); border-radius: 2px; }
.srch-side-title {
font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 700;
letter-spacing: 0.28em; text-transform: uppercase;
color: rgba(255,255,255,0.45); margin-bottom: 16px;
}
/* Vertical category pills */
.srch-pills {
display: flex; flex-direction: column; gap: 4px;
}
.srch-pill {
display: flex; align-items: center; gap: 12px;
padding: 11px 14px; border-radius: 12px;
font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
letter-spacing: 0.02em; text-align: left;
background: transparent; border: 1px solid transparent;
color: rgba(255,255,255,0.65); cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.srch-pill-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,0.18); flex-shrink: 0;
transition: background 0.2s, box-shadow 0.2s;
}
.srch-pill-label { flex: 1; }
.srch-pill:hover {
background: rgba(255,255,255,0.06); color: #fff;
}
.srch-pill:hover .srch-pill-dot { background: #FFFFFF; }
.srch-pill.active {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.22);
color: #FFFFFF;
}
.srch-pill.active .srch-pill-dot {
background: #FFFFFF;
box-shadow: 0 0 0 4px rgba(138,138,138,0.20);
}
/* Sidebar popular tags */
.srch-side-tags {
display: flex; flex-wrap: wrap; gap: 6px;
}
/* ── Content pane ── */
.srch-content {
display: flex; flex-direction: column; min-width: 0; min-height: 0;
transform: translateY(8px); opacity: 0;
transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1) 0.1s, opacity 0.5s ease 0.1s;
}
/* Sticky search bar */
.srch-search-bar {
flex-shrink: 0;
padding: clamp(20px, 2.5vw, 28px) clamp(20px, 3vw, 36px);
background: linear-gradient(to bottom, rgba(20,20,20,0.95), rgba(20,20,20,0.82));
border-bottom: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.srch-input-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 20px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
outline: none;
box-shadow: none;
transition: border-color 0.25s, background 0.25s;
}
.srch-input-row:focus,
.srch-input-row:focus-within,
.srch-input-row:focus-visible {
border-color: rgba(255,255,255,0.28);
background: rgba(255,255,255,0.06);
outline: none;
box-shadow: none;
}
.srch-icon {
width: 22px; height: 22px; flex-shrink: 0;
fill: none; stroke: rgba(255,255,255,0.45); stroke-width: 1.8;
stroke-linecap: round; transition: stroke 0.25s;
}
.srch-input-row:focus-within .srch-icon { stroke: #FFFFFF; }
.srch-input {
flex: 1; min-width: 0; background: none; border: none;
outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(20px, 2.4vw, 28px); font-weight: 400;
color: #fff; caret-color: #FFFFFF; line-height: 1.3;
}
/* Beat the global input:focus emerald ring (style.css:7619) — keep monochrome inside the overlay */
.search-ov .srch-input-row .srch-input:focus,
.search-ov .srch-input-row .srch-input:focus-visible,
.search-ov .srch-input-row input:focus,
.search-ov .srch-input-row input:focus-visible {
outline: none !important;
box-shadow: none !important;
background: transparent;
}
.srch-input::placeholder { color: rgba(255,255,255,0.32); font-weight: 300; }
.srch-clear-btn {
width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
background: rgba(255,255,255,0.07); border: none; border-radius: 50%;
color: rgba(255,255,255,0.5); cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.srch-clear-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.srch-clear-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* Scrollable content body */
.srch-body {
flex: 1; min-height: 0; overflow-y: auto;
padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 36px) clamp(32px, 5vw, 56px);
scrollbar-width: thin; scrollbar-color: rgba(74,74,74,0.3) transparent;
}
.srch-body::-webkit-scrollbar { width: 6px; }
.srch-body::-webkit-scrollbar-thumb { background: rgba(74,74,74,0.28); border-radius: 3px; }
.srch-body::-webkit-scrollbar-thumb:hover { background: rgba(74,74,74,0.5); }
/* Empty / default state */
.srch-empty {
max-width: 540px; margin: clamp(24px, 5vh, 64px) auto;
text-align: center;
}
.srch-empty-glyph {
width: 76px; height: 76px; margin: 0 auto 22px;
display: grid; place-items: center; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 70%);
border: 1px solid rgba(255,255,255,0.18);
}
.srch-empty-glyph svg {
width: 28px; height: 28px; fill: none; stroke: #FFFFFF;
stroke-width: 1.6; stroke-linecap: round;
}
.srch-empty-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(24px, 3vw, 32px); font-weight: 400;
color: #fff; margin-bottom: 10px; letter-spacing: -0.01em;
}
.srch-empty-text {
font-size: 14px; color: rgba(255,255,255,0.55);
margin-bottom: 24px; line-height: 1.6;
}
.srch-empty-tags {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
/* Tag chip (used in sidebar + empty state) */
.srch-tag {
padding: 7px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 100px;
font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
color: rgba(255,255,255,0.75); cursor: pointer;
transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s;
}
.srch-tag:hover {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.28);
color: #FFFFFF;
transform: translateY(-1px);
}
/* Results */
.srch-results { width: 100%; }
.srch-results-meta {
font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255,255,255,0.5); margin-bottom: 24px;
padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.srch-results-meta em { color: #FFFFFF; font-style: normal; font-weight: 700; }
.srch-results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: clamp(14px, 1.6vw, 22px);
}
/* Product card */
.srch-prod-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px; overflow: hidden; text-decoration: none;
display: flex; flex-direction: column; position: relative;
transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s;
animation: srchCardIn 0.4s ease both;
}
.srch-prod-card:hover {
transform: translateY(-4px);
border-color: rgba(74,74,74,0.4);
box-shadow: 0 16px 36px rgba(0,0,0,0.5);
}
@keyframes srchCardIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.srch-prod-img {
position: relative; overflow: hidden; background: #141414;
aspect-ratio: 4 / 5;
}
.srch-prod-img img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.5s ease;
}
.srch-prod-card:hover .srch-prod-img img { transform: scale(1.06); }
.srch-prod-wish {
position: absolute; top: 10px; right: 10px; z-index: 2;
width: 32px; height: 32px; display: grid; place-items: center;
background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.12); border-radius: 50%;
color: rgba(255,255,255,0.6); cursor: pointer;
transition: background 0.22s, border-color 0.22s, color 0.22s;
}
.srch-prod-wish:hover { background: rgba(200,30,50,0.35); border-color: rgba(255,80,100,0.45); color: #ff7090; }
.srch-prod-wish svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.srch-prod-hover-overlay {
position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
padding: 16px; display: flex; justify-content: center;
opacity: 0; transition: opacity 0.28s;
}
.srch-prod-card:hover .srch-prod-hover-overlay { opacity: 1; }
.srch-view-btn {
padding: 9px 22px;
background: rgba(74,74,74,0.92); backdrop-filter: blur(8px);
border: none; border-radius: 100px;
font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: #fff; cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.srch-view-btn:hover { background: #FFFFFF; color: #000000; transform: scale(1.04); }
.srch-prod-body { padding: 14px 16px 16px; }
.srch-prod-cat {
font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: #8A8A8A; display: block; margin-bottom: 5px;
}
.srch-prod-name {
font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 500;
color: rgba(255,255,255,0.95); display: block; line-height: 1.3; margin-bottom: 3px;
}
.srch-prod-sub { font-size: 11px; color: rgba(255,255,255,0.45); display: block; margin-bottom: 10px; }
.srch-prod-price {
font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 500;
color: #FFFFFF;
}
/* No results */
.srch-no-results { text-align: center; padding: clamp(48px, 8vw, 80px) 24px; }
.srch-no-results svg { width: 52px; height: 52px; fill: none; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; display: block; margin: 0 auto 20px; }
.srch-no-results p { font-family: 'Cormorant Garamond', serif; font-size: clamp(18px, 2.5vw, 22px); font-weight: 300; color: rgba(255,255,255,0.65); margin-bottom: 8px; }
.srch-no-results p span { color: #FFFFFF; }
.srch-no-results small { font-size: 13px; color: rgba(255,255,255,0.35); }
/* ─── Mobile drawer ─────────────────────────── */
.mob-ov {
display: none; position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, 0.98); backdrop-filter: blur(20px);
flex-direction: column; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mob-ov.show { transform: translateX(0); }
.mob-ov-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; }
.mob-ov-head img { height: 84px; width: auto; max-width: 75%; object-fit: contain; }
.mob-x { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255, 255, 255, 0.8); width: 40px; height: 40px; border-radius: 50%; font-size: 24px; cursor: pointer; transition: all 0.3s; display: grid; place-items: center; line-height: 1; }
.mob-x:hover { background: #000000; color: #FFFFFF; border-color: #000000; transform: rotate(90deg); }
.mob-body { flex: 1; overflow-y: auto; padding: 16px 0 32px; }
.mob-item { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mob-lnk, .mob-tog { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-decoration: none; background: none; border: none; width: 100%; cursor: pointer; transition: color 0.2s, background 0.2s, padding-left 0.3s; }
.mob-lnk:hover, .mob-tog:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); padding-left: 36px; }
.mob-tog svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform 0.3s; }
.mob-tog.open { color: #FFFFFF; background: rgba(255, 255, 255, 0.04); }
.mob-tog.open svg { transform: rotate(180deg); }
.mob-sub-dd { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: rgba(0, 0, 0, 0.4); }
.mob-sub-dd.open { max-height: 400px; }
.mob-sub-dd a { display: flex; align-items: center; gap: 12px; padding: 14px 28px 14px 44px; font-size: 13px; color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.2s, padding-left 0.3s, background 0.2s; border-bottom: 1px solid rgba(255,255,255,0.02); }
.mob-sub-dd a::before { content: ''; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; flex-shrink: 0; opacity: 0.5; transition: opacity 0.2s, transform 0.2s; }
.mob-sub-dd a:hover { color: #FFFFFF; padding-left: 52px; background: rgba(255, 255, 255, 0.05); }
.mob-sub-dd a:hover::before { opacity: 1; transform: scale(1.5); }
.mob-foot { padding: 22px 24px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; }
.mob-info { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.mob-info-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.78); font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; min-width: 0; }
.mob-info-row svg { width: 16px; height: 16px; flex-shrink: 0; color: rgba(255,255,255,0.55); }
.mob-info-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-info-row:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); color: #fff; }
.mob-info-row:hover svg { color: #fff; }
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
3D HERO
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.hero{
min-height:100vh;position:relative;overflow:hidden;
background:radial-gradient(ellipse 80% 60% at 50% 0%,#0C2414 0%,#071A10 40%,#040E08 100%);
display:flex;align-items:center;
perspective:1000px;
}
/* deep background orbs */
.orb{
position:absolute;border-radius:50%;pointer-events:none;
animation:float 8s ease-in-out infinite;
}
.orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(46,155,101,0.10) 0%,transparent 70%);top:-100px;right:-100px;animation-duration:10s}
.orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(13,92,53,0.12) 0%,transparent 70%);bottom:-80px;left:5%;animation-duration:13s;animation-delay:-4s}
.orb-3{width:280px;height:280px;background:radial-gradient(circle,rgba(46,155,101,0.08) 0%,transparent 70%);top:30%;left:40%;animation-duration:9s;animation-delay:-2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-28px)}}
/* Grid lines depth effect */
.hero-grid{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(46,155,101,0.04) 1px, transparent 1px),
linear-gradient(90deg,rgba(46,155,101,0.04) 1px,transparent 1px);
background-size:60px 60px;
transform:perspective(900px) rotateX(55deg) translateY(30%) scale(2.2);
transform-origin:50% 100%;
opacity:.6;
mask-image:linear-gradient(to top,rgba(0,0,0,0.6) 0%,transparent 55%);
-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0.6) 0%,transparent 55%);
}
/* Hero content */
.hero-inner{
position:relative;z-index:2;
max-width:1340px;margin:0 auto;
width:100%;padding:0 80px;
display:grid;grid-template-columns:1fr 1fr;
gap:60px;align-items:center;
padding-top:calc(var(--nav-h) + 20px);
}
.hero-badge{
display:inline-flex;align-items:center;gap:8px;
background:rgba(46,155,101,0.1);
border:1px solid rgba(46,155,101,0.25);
border-radius:100px;
padding:6px 16px;
font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold);margin-bottom:28px;
}
.hero-badge span{width:6px;height:6px;background:var(--gold);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.hero-title{
font-family:'Cormorant Garamond',serif;
font-size:clamp(44px,5.5vw,82px);
font-weight:300;line-height:1.08;
color:#fff;
margin-bottom:24px;
text-shadow:0 2px 4px rgba(0,0,0,0.4),0 8px 30px rgba(0,0,0,0.3);
}
.hero-title .accent{
font-style:italic;
background:linear-gradient(135deg,var(--gold-l) 0%,var(--gold) 50%,var(--gold-d) 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-title .line-offset{display:block;padding-left:clamp(20px,4vw,60px)}
.hero-desc{
font-size:15px;color:rgba(255,255,255,0.55);
line-height:1.8;max-width:420px;margin-bottom:40px;
}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px}
.btn-gold{
padding:14px 32px;
background:linear-gradient(135deg,var(--gold-l) 0%,var(--gold) 50%,var(--gold-d) 100%);
color:var(--ink);font-size:12px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;
text-decoration:none;border-radius:100px;
box-shadow:0 4px 24px rgba(46,155,101,0.4);
transition:transform .2s,box-shadow .2s;display:inline-block;
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(46,155,101,0.55)}
.btn-ghost{
padding:14px 32px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.18);
color:rgba(255,255,255,0.85);font-size:12px;font-weight:500;
letter-spacing:.1em;text-transform:uppercase;
text-decoration:none;border-radius:100px;
backdrop-filter:blur(8px);
transition:background .2s,border-color .2s,color .2s;display:inline-block;
}
.btn-ghost:hover{background:rgba(255,255,255,0.12);border-color:rgba(46,155,101,0.4);color:var(--gold-l)}
.hero-stats{
display:flex;gap:32px;
padding-top:32px;border-top:1px solid rgba(255,255,255,0.08);
}
.h-stat-n{
font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:500;
background:linear-gradient(135deg,var(--gold-l),var(--gold));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
display:block;
}
.h-stat-l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.35)}
/* Right 3D card scene */
.hero-right{
display:flex;align-items:center;justify-content:center;
position:relative;
}
.scene-3d{
width:100%;max-width:480px;
perspective:900px;
position:relative;
}
/* floating rings behind the card */
.ring-float{
position:absolute;border-radius:50%;border:1px solid rgba(46,155,101,0.18);
pointer-events:none;animation:spin-slow linear infinite;
}
.ring-float-1{width:380px;height:380px;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(65deg);animation-duration:24s;border-color:rgba(46,155,101,0.12)}
.ring-float-2{width:480px;height:480px;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(65deg);animation-duration:36s;animation-direction:reverse;border-color:rgba(46,155,101,0.07)}
@keyframes spin-slow{from{transform:translate(-50%,-50%) rotateX(65deg) rotateZ(0)}to{transform:translate(-50%,-50%) rotateX(65deg) rotateZ(360deg)}}
.card-3d{
background:linear-gradient(145deg,rgba(10,30,18,0.85) 0%,rgba(6,18,10,0.95) 100%);
border:1px solid rgba(46,155,101,0.25);
border-radius:24px;
padding:40px;
position:relative;z-index:2;
transform:perspective(900px) rotateY(-8deg) rotateX(4deg);
transform-style:preserve-3d;
box-shadow:
20px 20px 60px rgba(0,0,0,0.8),
-2px -2px 0 rgba(46,155,101,0.1),
inset 0 1px 0 rgba(255,255,255,0.07),
0 0 0 1px rgba(0,0,0,0.5);
transition:transform .6s cubic-bezier(.2,.8,.2,1);
backdrop-filter:blur(12px);
}
.card-3d:hover{transform:perspective(900px) rotateY(2deg) rotateX(-2deg) scale(1.02)}
.card-3d::before{
content:'';position:absolute;inset:0;border-radius:24px;
background:linear-gradient(135deg,rgba(255,255,255,0.07) 0%,transparent 50%,rgba(0,0,0,0.1) 100%);
pointer-events:none;
}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.card-badge-tag{
font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--gold);background:rgba(46,155,101,0.1);
border:1px solid rgba(46,155,101,0.25);border-radius:100px;padding:4px 12px;
}
.card-dot-grid{display:flex;gap:6px}
.cdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.08)}
.cdot.active{background:var(--gold)}
.card-img-area{
height:220px;
background:linear-gradient(145deg,rgba(46,155,101,0.06) 0%,rgba(13,92,53,0.08) 100%);
border:1px solid rgba(255,255,255,0.06);
border-radius:16px;
display:grid;place-items:center;
margin-bottom:24px;
font-family:'Cormorant Garamond',serif;
font-size:14px;color:rgba(255,255,255,0.2);letter-spacing:.1em;
position:relative;overflow:hidden;
}
.card-img-area::after{
content:'';position:absolute;
width:60px;height:200%;background:rgba(255,255,255,0.04);
transform:rotate(20deg) translateX(-200px);
animation:shimmer 4s ease-in-out infinite;
}
@keyframes shimmer{0%{transform:rotate(20deg) translateX(-200px)}60%,100%{transform:rotate(20deg) translateX(600px)}}
.card-name{
font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;
color:#fff;margin-bottom:4px;
}
.card-sub{font-size:11.5px;color:rgba(255,255,255,0.38);margin-bottom:20px;letter-spacing:.04em}
.card-footer{display:flex;align-items:center;justify-content:space-between}
.card-price{
font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:500;
background:linear-gradient(135deg,var(--gold-l),var(--gold));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.card-btn{
padding:10px 22px;
background:linear-gradient(135deg,var(--gold) 0%,var(--gold-d) 100%);
color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
border:none;border-radius:100px;cursor:pointer;
box-shadow:0 4px 16px rgba(46,155,101,0.35);
transition:transform .2s,box-shadow .2s;
}
.card-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(46,155,101,0.5)}
/* floating micro-cards */
.float-chip{
position:absolute;
background:rgba(8,6,15,0.85);
backdrop-filter:blur(12px);
border:1px solid rgba(46,155,101,0.2);
border-radius:12px;padding:10px 16px;
z-index:3;pointer-events:none;
}
.chip-1{bottom:-20px;left:-30px;animation:chipFloat 5s ease-in-out infinite}
.chip-2{top:30px;right:-40px;animation:chipFloat 6s ease-in-out infinite;animation-delay:-2s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.chip-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:2px}
.chip-val{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:500;color:var(--gold-l)}
/* scroll cue */
.scroll-cue{
position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:8px;
color:rgba(255,255,255,0.3);font-size:10px;letter-spacing:.18em;text-transform:uppercase;z-index:2;
}
.scroll-cue-line{
width:1px;height:44px;
background:linear-gradient(to bottom,transparent,rgba(46,155,101,0.5));
animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{0%,100%{transform:scaleY(1);opacity:.6}50%{transform:scaleY(.5);opacity:1}}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
MARQUEE
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.marquee{background:linear-gradient(90deg,var(--gold-d) 0%,var(--gold) 50%,var(--gold-d) 100%);padding:13px 0;overflow:hidden}
.marquee-track{display:flex;animation:mq 26s linear infinite;white-space:nowrap}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{display:inline-flex;align-items:center;gap:10px;padding:0 28px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.85}
.mq-dot{width:4px;height:4px;background:var(--ink);border-radius:50%;flex-shrink:0;opacity:.4}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
SECTIONS
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.sec{padding:100px 80px}
.sec-in{max-width:1280px;margin:0 auto}
.sec-hd{text-align:center;margin-bottom:56px}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--wine);margin-bottom:12px}
.sec-title{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,4vw,52px);font-weight:300;color:#1A1A2E;line-height:1.15;margin-bottom:14px}
.sec-desc{font-size:14.5px;color:var(--muted);max-width:500px;margin:0 auto;line-height:1.7}
/* Collections */
.col-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.col-card{
border-radius:14px;overflow:hidden;text-decoration:none;
background:#fff;border:1px solid var(--border);
transition:transform .3s,box-shadow .3s;
}
.col-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,0.12)}
.col-img{
height:200px;
background:linear-gradient(145deg,#f5eee8,#ead8da);
display:grid;place-items:center;
font-family:'Cormorant Garamond',serif;font-size:13px;
color:var(--muted);letter-spacing:.08em;
border-bottom:1px solid var(--border);
}
.col-body{padding:18px 20px}
.col-name{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;color:#1A1A2E;display:block;margin-bottom:4px}
.col-count{font-size:11.5px;color:var(--muted)}
/* Craft */
.craft-sec{background:var(--navy)}
.craft-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.craft-img{
height:460px;border-radius:16px;overflow:hidden;
background:linear-gradient(145deg,rgba(46,155,101,0.06),rgba(13,92,53,0.06));
border:1px solid rgba(255,255,255,0.07);
display:grid;place-items:center;
font-family:'Cormorant Garamond',serif;font-size:15px;color:rgba(255,255,255,0.2);
}
.craft-steps{display:flex;flex-direction:column;gap:24px;margin-top:36px}
.craft-step{display:flex;gap:18px;align-items:flex-start}
.step-no{
width:38px;height:38px;flex-shrink:0;border-radius:50%;
border:1px solid rgba(46,155,101,0.3);
display:grid;place-items:center;
font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--gold);
}
.step-body h4{font-size:14px;font-weight:500;color:#fff;margin-bottom:4px}
.step-body p{font-size:12.5px;color:rgba(255,255,255,0.42);line-height:1.65}
/* Testimonials */
.testi-outer{overflow:hidden}
.testi-track{display:flex;gap:22px;animation:tscroll 30s linear infinite}
.testi-track:hover{animation-play-state:paused}
@keyframes tscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tcard{flex-shrink:0;width:330px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px}
.tcard-stars{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:12px}
.tcard-q{font-family:'Cormorant Garamond',serif;font-size:16.5px;line-height:1.65;color:#1A1A2E;margin-bottom:16px}
.tcard-auth{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* Features */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.feat-card{background:#fff;padding:34px 26px;text-align:center}
.feat-ico{width:52px;height:52px;background:#EEF9F3;border:1px solid #C0E4D0;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px}
.feat-ico svg{width:24px;height:24px;fill:none;stroke:var(--wine);stroke-width:1.5}
.feat-t{font-size:13.5px;font-weight:600;color:#1A1A2E;margin-bottom:8px}
.feat-d{font-size:12px;color:var(--muted);line-height:1.65}
/* CTA */
.cta-band{
background:linear-gradient(135deg,#FBF6EE 0%,#F1E7D6 100%);
padding:90px 80px;text-align:center;color:var(--wine-d);
}
.cta-band h2{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,4vw,56px);font-weight:300;margin-bottom:14px;line-height:1.15}
.cta-band p{font-size:14.5px;color:rgba(9,64,37,0.72);margin-bottom:36px}
.btn-wh{
padding:16px 42px;background:var(--wine);color:#fff;
font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
text-decoration:none;border-radius:100px;display:inline-block;
box-shadow:0 4px 20px rgba(13,92,53,0.22);transition:transform .2s,box-shadow .2s;
}
.btn-wh:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(13,92,53,0.32)}
/* =============================================
FOOTER
============================================= */
/* Pin the footer to the home-page palette on every page (graphite +
noir, not emerald). Scoped to .site-footer so other UI on non-home
pages keeps its emerald accent. Mirrors the :root overrides in
home.css. */
.site-footer{
--gold: #4A4A4A;
--gold-l: #8A8A8A;
--gold-d: #2A2A2A;
--ink: #000000;
--navy: #141414;
--cream: #FAFAFA;
}
.site-footer{background:var(--navy);color:rgba(255,255,255,0.5);position:relative}
/* top accent line */
.ft-bar{height:3px;background:linear-gradient(90deg,transparent 0%,var(--gold-d) 15%,var(--gold-l) 50%,var(--gold-d) 85%,transparent 100%)}
/* container */
.ft-container{max-width:1240px;margin:0 auto;padding:0 72px}
/* main body */
.ft-main{padding:44px 0 36px;position:relative}
.ft-main::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 8% 0%,rgba(46,155,101,0.08) 0%,transparent 65%);pointer-events:none}
.ft-main-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:20px 32px;align-items:start}
/* brand column — row 1: logo + tagline */
.ft-brand{display:flex;flex-direction:column;align-items:flex-start}
.ft-logo-lnk{display:inline-block;margin-bottom:14px;transition:opacity .3s}
.ft-logo-lnk:hover{opacity:.82}
.ft-logo{height:110px;width:auto;display:block}
.ft-tagline{font-family:'Cormorant Garamond',serif;font-size:18px;font-style:italic;color:rgba(255,255,255,0.78);line-height:1.75;margin:0}
/* brand info — full-width bottom strip: address + socials side by side */
.ft-brand-info{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid rgba(255,255,255,0.07);padding-top:20px}
/* contact address */
.ft-addr{font-style:normal;display:flex;flex-direction:row;flex-wrap:wrap;gap:0;flex:1;margin-bottom:0}
.ft-addr-item{display:flex;align-items:center;gap:10px;padding:4px 22px 4px 0;font-size:12.5px;color:rgba(255,255,255,0.62);text-decoration:none;line-height:1.4;border-right:1px solid rgba(255,255,255,0.08);margin-right:22px;transition:color .25s}
.ft-addr-item:last-child{border-right:none;padding-right:0;margin-right:0}
.ft-addr-item:hover{color:rgba(255,255,255,0.78)}
.ft-addr-ico{flex-shrink:0;width:28px;height:28px;border-radius:7px;background:rgba(46,155,101,0.1);border:1px solid rgba(46,155,101,0.16);display:grid;place-items:center;color:var(--gold-l);transition:background .25s,border-color .25s}
.ft-addr-item:hover .ft-addr-ico{background:rgba(46,155,101,0.18);border-color:rgba(46,155,101,0.32)}
.ft-addr-ico svg{width:14px;height:14px}
.ft-addr-hours{cursor:default}
/* social icons */
.ft-socials{display:flex;gap:8px;flex-wrap:wrap}
.ft-soc{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);display:grid;place-items:center;color:rgba(255,255,255,0.36);text-decoration:none;transition:all .25s}
.ft-soc svg{width:16px;height:16px}
.ft-soc:hover{border-color:var(--gold-l);background:rgba(46,155,101,0.14);color:var(--gold-l);transform:translateY(-3px)}
/* link columns */
.ft-col-title{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);margin:0 0 14px;padding-left:12px;border-left:2px solid var(--gold);line-height:1.4}
.ft-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.ft-col ul li a{display:flex;align-items:center;gap:0;font-size:13.5px;color:rgba(255,255,255,0.62);text-decoration:none;padding:7px 0;border-bottom:1px solid rgba(255,255,255,0.07);transition:color .2s,gap .2s}
.ft-col ul li:last-child a{border-bottom:none}
.ft-col ul li a::before{content:'';width:0;height:1px;background:var(--gold-l);transition:width .25s;flex-shrink:0}
.ft-col ul li a:hover{color:rgba(255,255,255,0.9);gap:10px}
.ft-col ul li a:hover::before{width:10px}
/* trust strip — standalone page section */
.trust-strip{padding:28px 0;background:var(--navy)}
.ft-trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.05);border-radius:18px;overflow:hidden}
.ft-trust-item{display:flex;align-items:center;gap:16px;padding:22px 28px;background:#071A10;transition:background .3s}
.ft-trust-item:hover{background:rgba(27,107,69,0.14)}
.ft-trust-ico{width:50px;height:50px;flex-shrink:0;border-radius:14px;background:rgba(46,155,101,0.1);border:1px solid rgba(46,155,101,0.2);display:grid;place-items:center;color:var(--gold-l);transition:all .3s}
.ft-trust-item:hover .ft-trust-ico{background:rgba(46,155,101,0.2);border-color:rgba(46,155,101,0.4);box-shadow:0 0 18px rgba(46,155,101,0.18)}
.ft-trust-ico svg{width:20px;height:20px}
.ft-trust-text{display:flex;flex-direction:column;gap:3px}
.ft-trust-item strong{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,0.82);line-height:1.3}
.ft-trust-item span{font-size:11.5px;color:rgba(255,255,255,0.32);line-height:1.4}
/* bottom bar */
.ft-bottom{padding:24px 0;background:rgba(0,0,0,0.28);border-top:1px solid rgba(255,255,255,0.05)}
.ft-bottom-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.ft-copy{font-size:12.5px;color:rgba(255,255,255,0.55);margin:0}
.ft-made{font-size:12px;color:rgba(255,255,255,0.42);font-style:italic;margin:0}
.ft-made a{color:rgba(255,255,255,0.7);text-decoration:none;transition:color .2s}
.ft-made a:hover{color:var(--gold-l)}
.ft-legal{display:flex;align-items:center;gap:24px}
.ft-legal a{font-size:12px;color:rgba(255,255,255,0.6);text-decoration:none;transition:color .2s}
.ft-legal a:hover{color:var(--gold-l)}
/* Reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
RESPONSIVE
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
@media(max-width:1100px){
.col-grid{grid-template-columns:repeat(2,1fr)}
.feat-grid{grid-template-columns:repeat(2,1fr)}
.mega-cats{grid-template-columns:repeat(2,1fr)}
.ft-container{padding:0 40px}
.ft-main-grid{grid-template-columns:1fr 1fr 1fr}
.ft-brand{grid-column:span 3}
.ft-trust-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
.nav-links-wrap,.nav-rule,.nav-cta,.nav-ico:not(#search-ico){display:none}
#search-ico{display:grid}
.hamburger{display:flex}
.nav-inner{gap:12px;padding:0 22px;}
.hero-inner{grid-template-columns:1fr;padding:calc(var(--nav-h)+40px) 32px 60px;text-align:center}
.hero-right{display:none}
.hero-desc{max-width:none;margin-inline:auto}
.hero-btns{justify-content:center}
.hero-stats{justify-content:center}
.craft-grid{grid-template-columns:1fr;gap:40px}
.sec{padding:72px 40px}
.ft-main-grid{grid-template-columns:1fr 1fr 1fr}
.ft-brand{grid-column:span 3}
.ft-trust-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.nav-inner{padding:0 16px;}
.hero-inner{padding:calc(var(--nav-h)+30px) 22px 52px}
.hero-title{font-size:clamp(36px,10vw,56px)}
.hero-stats{gap:20px;flex-wrap:wrap}
.sec{padding:56px 22px}
.cta-band{padding:60px 22px}
.ft-container{padding:0 20px}
.ft-main{padding:44px 0 32px}
.ft-main-grid{grid-template-columns:1fr}
.ft-brand{grid-column:span 1}
.ft-brand-info{flex-wrap:wrap;gap:16px}
.ft-addr{flex-direction:column}
.ft-addr-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.05);padding:6px 0;margin-right:0}
.ft-addr-item:last-child{border-bottom:none}
.ft-trust-row{grid-template-columns:1fr 1fr}
.ft-trust-item{padding:20px 18px}
.ft-bottom-in{flex-direction:column;text-align:center;gap:12px}
.ft-made{display:none}
.ft-socials{justify-content:flex-start}
.ft-legal{justify-content:center;flex-wrap:wrap;gap:12px}
.col-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
/* ── Search overlay responsive ── */
/* Slightly narrower sidebar at medium widths */
@media(max-width:1100px){
.srch-main{ grid-template-columns: 280px 1fr; }
.srch-sidebar{ padding: 28px 22px; gap: 28px; }
}
/* Tablet & below: collapse to single column. The search bar sits at the top,
followed by a horizontal pill strip (the sidebar's category list), then
the scrollable body. The "Popular" block is hidden — its tags already
appear in the empty-state body. */
@media(max-width:860px){
/* 3-row stack: search-bar / pill-strip / body */
.srch-main{
grid-template-columns: 1fr;
grid-template-rows: auto auto minmax(0, 1fr);
}
/* display:contents lifts search-bar + body out of .srch-content into the grid */
.srch-content{ display: contents; }
.srch-search-bar{ grid-row: 1 / 2; padding: 16px clamp(16px, 3vw, 24px); }
.srch-sidebar{ grid-row: 2 / 3; }
.srch-body{ grid-row: 3 / 4; }
/* Sidebar becomes a thin horizontal strip */
.srch-sidebar{
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 12px 0;
overflow: visible;
flex-direction: row; gap: 0;
transform: none;
}
.srch-side-block{ width: 100%; }
.srch-side-popular{ display: none; }
.srch-side-title{ display: none; }
/* Horizontal scroll-snap pills with edge fade */
.srch-pills{
flex-direction: row; gap: 8px;
overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 0 clamp(16px, 3vw, 28px);
scrollbar-width: none;
mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.srch-pills::-webkit-scrollbar{ display: none; }
/* Compact horizontal pill style */
.srch-pill{
flex-shrink: 0; scroll-snap-align: start;
padding: 8px 16px; border-radius: 100px;
font-size: 12px; letter-spacing: 0.04em;
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
}
.srch-pill-dot{ display: none; }
.srch-pill.active{
background: #000000; border-color: #000000; color: #fff;
box-shadow: 0 4px 14px rgba(74,74,74,0.3);
}
/* Tighter input + grid for tablet */
.srch-input-row{ padding: 12px 16px; }
.srch-input{ font-size: clamp(18px, 4vw, 22px); }
.srch-results-grid{
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
}
}
/* Small phones */
@media(max-width:480px){
.srch-topbar{ padding: 12px 16px; gap: 10px; }
.srch-topbar-hint{ display: none; }
.srch-close-btn{ width: 38px; height: 38px; }
.srch-logo-img{ height: 32px; }
.srch-input-row{ padding: 11px 14px; gap: 10px; }
.srch-icon{ width: 18px; height: 18px; }
.srch-input{ font-size: 17px; }
.srch-clear-btn{ width: 26px; height: 26px; }
.srch-results-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.srch-prod-body{ padding: 10px 12px 12px; }
.srch-prod-cat{ font-size: 8px; letter-spacing: 0.18em; }
.srch-prod-name{ font-size: 14px; line-height: 1.25; }
.srch-prod-sub{ font-size: 10px; margin-bottom: 6px; }
.srch-prod-price{ font-size: 15px; }
.srch-prod-wish{ width: 28px; height: 28px; top: 8px; right: 8px; }
.srch-prod-wish svg{ width: 12px; height: 12px; }
.srch-empty{ margin: 16px auto; }
.srch-empty-glyph{ width: 64px; height: 64px; margin-bottom: 18px; }
.srch-empty-glyph svg{ width: 24px; height: 24px; }
.srch-empty-title{ font-size: 22px; }
.srch-empty-text{ font-size: 13px; margin-bottom: 18px; }
}
/* Short viewports (landscape phones) — trim vertical chrome */
@media(max-height:520px){
.srch-topbar{ padding: 10px 16px; }
.srch-search-bar{ padding: 12px 16px; }
.srch-empty{ margin: 12px auto; }
.srch-empty-glyph{ width: 56px; height: 56px; margin-bottom: 12px; }
.srch-empty-title{ font-size: 20px; margin-bottom: 6px; }
.srch-empty-text{ font-size: 12px; margin-bottom: 14px; }
}
/* ============================================================
JEWELRY HERO
============================================================ */
/* ================================================================
BEYOND EXPRESSION — Jewelry Hero
Scroll-linked canvas image sequence with luxury text overlays
================================================================ */
/* New variables only — does NOT override main site's --gold or body styles */
:root {
--canvas-bg: #000000;
--page-bg: #050505;
--gold-light: #9DD5BC;
--gold-dim: #2E9B65;
--hero-text: #8EC4A8;
--font-heading: 'Cormorant Garamond', 'Georgia', serif;
}
/* ================================================================
LOADING SCREEN — Dark Luxury Bokeh
================================================================ */
#loading-screen {
position: fixed;
inset: 0;
z-index: 9000;
background: #080808;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: opacity 1s ease;
}
/* Skip loader on in-app navigation (set by inline script in header.php). */
html.no-loader #loading-screen { display: none !important; }
html.no-loader #scroll-progress { /* no-op, kept for parity */ }
/* ── Bokeh orbs — blurred light spheres like gems in a dark room ─ */
.ls-bokeh {
position: absolute;
inset: 0;
pointer-events: none;
}
.bk {
position: absolute;
border-radius: 50%;
filter: blur(72px);
will-change: transform, opacity;
animation: bk-drift 14s ease-in-out infinite;
}
.bk-1 {
width: 480px; height: 480px;
top: -160px; left: -80px;
background: radial-gradient(circle, rgba(27,107,69,0.28) 0%, transparent 68%);
animation-duration: 16s; animation-delay: 0s;
}
.bk-2 {
width: 340px; height: 340px;
top: 45%; right: -90px;
background: radial-gradient(circle, rgba(157,213,188,0.18) 0%, transparent 68%);
animation-duration: 13s; animation-delay: 2.2s;
}
.bk-3 {
width: 560px; height: 560px;
bottom: -200px; left: 28%;
background: radial-gradient(circle, rgba(46,155,101,0.20) 0%, transparent 68%);
animation-duration: 18s; animation-delay: 1s;
}
.bk-4 {
width: 260px; height: 260px;
top: 15%; left: -50px;
background: radial-gradient(circle, rgba(157,213,188,0.12) 0%, transparent 68%);
animation-duration: 11s; animation-delay: 3.8s;
}
.bk-5 {
width: 300px; height: 300px;
top: 5%; right: 8%;
background: radial-gradient(circle, rgba(46,155,101,0.15) 0%, transparent 68%);
animation-duration: 15s; animation-delay: 0.6s;
}
@keyframes bk-drift {
0% { transform: translate( 0px, 0px) scale(0.86); opacity: 0.55; }
25% { transform: translate( 16px, -12px) scale(1.02); opacity: 0.90; }
55% { transform: translate( -10px, 18px) scale(0.94); opacity: 0.72; }
80% { transform: translate( 12px, 8px) scale(1.06); opacity: 0.85; }
100% { transform: translate( 0px, 0px) scale(0.86); opacity: 0.55; }
}
/* ── Centre stack ─────────────────────────────────────────────── */
.ls-centre {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* ── Logo ─────────────────────────────────────────────────────── */
.ls-logo {
display: block;
width: clamp(230px, 40vw, 400px);
/* crop bottom whitespace baked into the SVG viewBox */
height: calc(clamp(230px, 40vw, 400px) * 0.48);
object-fit: cover;
object-position: center top;
filter: drop-shadow(0 0 24px rgba(157, 213, 188, 0.28))
drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
opacity: 0;
transform: translateY(10px) scale(0.96);
animation: logo-in 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
will-change: opacity, transform;
}
@keyframes logo-in {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* subtle breathing glow on the logo once visible */
.ls-logo.ls-logo--loaded {
animation:
logo-breathe 4s ease-in-out 0s infinite;
}
@keyframes logo-breathe {
0%, 100% {
filter: drop-shadow(0 0 18px rgba(157,213,188,0.20))
drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
50% {
filter: drop-shadow(0 0 36px rgba(157,213,188,0.45))
drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
}
/* ── Ornamental rule hidden ── */
.ls-ornament { display: none; }
/* ── Progress wrapper ─────────────────────────────────────────── */
.ls-progress-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 16px;
opacity: 0;
animation: ls-fadein 0.7s ease-out 1.1s forwards;
}
.ls-bar-wrap {
width: clamp(180px, 30vw, 280px);
height: 1px;
background: rgba(255,255,255,0.08);
position: relative;
overflow: visible;
}
.ls-bar-fill {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 0%;
background: linear-gradient(90deg,
rgba(46,155,101,0.55) 0%,
var(--gold-light) 100%);
transition: width 0.15s linear;
box-shadow: 0 0 8px 1px rgba(157,213,188,0.5);
}
/* Glowing leading tip */
.ls-bar-fill::after {
content: '';
position: absolute;
right: -1px;
top: -4px;
width: 3px;
height: 9px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 8px 4px rgba(157,213,188,0.95),
0 0 16px 6px rgba(157,213,188,0.4);
}
.ls-pct {
font-family: 'Jost', sans-serif;
font-size: clamp(0.56rem, 1.1vw, 0.66rem);
font-weight: 300;
letter-spacing: 0.32em;
color: rgba(157, 213, 188, 0.42);
font-variant-numeric: tabular-nums;
}
/* ── Shared fade-in ───────────────────────────────────────────── */
@keyframes ls-fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 480px) {
.ls-logo { width: clamp(180px, 70vw, 280px); }
}
/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.bk { animation: none !important; opacity: 0.6; }
.ls-logo { animation: none !important; opacity: 1;
transform: none;
filter: drop-shadow(0 0 20px rgba(157,213,188,0.3)); }
.ls-ornament,
.ls-progress-wrap { animation: none; opacity: 1; }
.ls-orn-gem { animation: none; }
.ls-bar-fill { transition: none; }
}
/* ================================================================
SCROLL PROGRESS LINE
================================================================ */
.scroll-progress-line {
position: fixed;
top: 0;
left: 0;
height: 1px;
width: 0%;
background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, var(--gold-light) 100%);
z-index: 8000;
opacity: 0.65;
pointer-events: none;
}
/* ================================================================
HERO SCROLL SECTION
================================================================ */
.hero-scroll-section {
position: relative;
height: 500vh;
background: var(--canvas-bg);
}
.hero-sticky {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
background:
var(--canvas-bg)
url('../hero_section/_MConverter.eu_final_video-1.png')
center center / cover no-repeat;
}
#hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 0;
}
.hero-vignette {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(ellipse 75% 75% at 50% 50%,
transparent 30%,
rgba(0, 0, 0, 0.45) 80%,
rgba(0, 0, 0, 0.7) 100%
);
pointer-events: none;
}
/* ================================================================
TEXT OVERLAYS
================================================================ */
.text-overlay {
position: absolute;
z-index: 10;
opacity: 0;
pointer-events: none;
will-change: opacity, transform;
transition: opacity 0.7s ease, transform 0.7s ease;
}
.text-overlay.is-active {
opacity: 1;
pointer-events: auto;
}
.text-overlay[data-pos="left"] {
left: 7%;
top: 50%;
transform: translateY(-50%);
max-width: min(320px, 35vw);
}
.text-overlay[data-pos="right"] {
right: 7%;
top: 50%;
transform: translateY(-50%);
max-width: min(320px, 35vw);
text-align: right;
}
.text-overlay[data-pos="bottom"] {
left: 50%;
bottom: 12%;
transform: translateX(-50%);
text-align: center;
max-width: min(480px, 60vw);
}
.overlay-inner {
display: flex;
flex-direction: column;
gap: 14px;
will-change: transform;
position: relative;
isolation: isolate;
}
/* Soft readability scrim behind the text — keeps the jewellery footage
visible while guaranteeing contrast for the overlay copy. */
.overlay-inner::before {
content: '';
position: absolute;
inset: -30px -52px -30px -44px;
z-index: -1;
pointer-events: none;
border-radius: 28px;
background: radial-gradient(125% 100% at 22% 50%,
rgba(4, 16, 10, 0.68) 0%,
rgba(4, 16, 10, 0.48) 42%,
rgba(4, 16, 10, 0.18) 68%,
transparent 84%);
filter: blur(3px);
}
.text-overlay[data-pos="right"] .overlay-inner::before {
background: radial-gradient(125% 100% at 78% 50%,
rgba(4, 16, 10, 0.68) 0%,
rgba(4, 16, 10, 0.48) 42%,
rgba(4, 16, 10, 0.18) 68%,
transparent 84%);
}
.text-overlay[data-pos="bottom"] .overlay-inner::before {
inset: -28px -44px;
background: radial-gradient(120% 120% at 50% 50%,
rgba(4, 16, 10, 0.66) 0%,
rgba(4, 16, 10, 0.46) 46%,
rgba(4, 16, 10, 0.16) 70%,
transparent 86%);
}
.overlay-eyebrow {
font-family: 'Jost', sans-serif;
font-size: clamp(0.58rem, 0.9vw, 0.68rem);
font-weight: 400;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.85;
}
.overlay-heading {
font-family: var(--font-heading);
font-size: clamp(1.9rem, 3.5vw, 3.2rem);
font-weight: 300;
line-height: 1.1;
color: var(--gold-light);
letter-spacing: 0.015em;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.overlay-rule {
width: 28px;
height: 1px;
background: var(--gold);
opacity: 0.55;
flex-shrink: 0;
}
.text-overlay[data-pos="right"] .overlay-rule {
margin-left: auto;
}
.text-overlay[data-pos="bottom"] .overlay-rule {
margin: 0 auto;
}
.overlay-body {
font-family: 'Jost', sans-serif;
font-size: clamp(0.78rem, 1.1vw, 0.9rem);
font-weight: 300;
line-height: 1.75;
color: #CBE7D8;
letter-spacing: 0.04em;
max-width: 28ch;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.text-overlay[data-pos="bottom"] .overlay-body {
max-width: 36ch;
margin: 0 auto;
}
.overlay-cta {
display: inline-block;
margin-top: 6px;
font-family: 'Jost', sans-serif;
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid rgba(46, 155, 101, 0.4);
padding-bottom: 3px;
transition: border-color 0.25s ease, color 0.25s ease;
}
.overlay-cta:hover {
color: var(--gold-light);
border-color: var(--gold-light);
}
/* ================================================================
SCROLL INDICATOR
================================================================ */
.scroll-indicator {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
pointer-events: none;
transition: opacity 0.4s ease;
}
.scroll-indicator-text {
font-family: 'Jost', sans-serif;
font-size: 0.6rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-dim);
font-weight: 300;
}
.scroll-arrow {
width: 1px;
height: 28px;
background: linear-gradient(to bottom, var(--gold-dim), transparent);
animation: arrow-pulse 2.2s ease infinite;
}
@keyframes arrow-pulse {
0%, 100% { opacity: 0.3; transform: scaleY(0.85); }
55% { opacity: 0.9; transform: scaleY(1.15); }
}
/* ================================================================
RESPONSIVE — TABLET (768px–1023px)
================================================================ */
@media (max-width: 1023px) {
.text-overlay[data-pos="left"] { max-width: min(280px, 42vw); }
.text-overlay[data-pos="right"] { max-width: min(280px, 42vw); }
.text-overlay[data-pos="bottom"] { max-width: min(420px, 70vw); }
.overlay-heading { font-size: clamp(1.6rem, 3vw, 2.4rem); }
}
/* ================================================================
RESPONSIVE — MOBILE (< 768px)
================================================================ */
@media (max-width: 767px) {
.text-overlay[data-pos="left"] {
left: 50% !important; right: auto !important;
top: auto !important; bottom: 16% !important;
transform: translateX(-50%) !important;
text-align: center !important; max-width: 82vw !important;
}
.text-overlay[data-pos="right"] {
right: auto !important; left: 50% !important;
top: 8% !important; bottom: auto !important;
transform: translateX(-50%) !important;
text-align: center !important; max-width: 82vw !important;
}
.text-overlay[data-pos="bottom"] {
bottom: 8% !important; left: 50% !important;
transform: translateX(-50%) !important;
max-width: 88vw !important; text-align: center !important;
}
.overlay-rule { margin-left: auto !important; margin-right: auto !important; }
.overlay-body { max-width: 100% !important; margin: 0 auto !important; }
.overlay-heading { font-size: clamp(1.5rem, 6vw, 2rem); }
.scroll-indicator { bottom: 22px; }
}
/* ================================================================
HERO — INTRO CONTENT (chip · CTAs · meta-strip)
================================================================ */
.hero-chip {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(157, 213, 188, 0.22);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: 'Jost', sans-serif;
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
white-space: nowrap;
color: var(--gold-light);
}
.hero-chip svg {
width: 12px;
height: 12px;
stroke: var(--gold-light);
flex-shrink: 0;
opacity: 0.85;
}
.text-overlay[data-pos="right"] .hero-chip { align-self: flex-end; }
.text-overlay[data-pos="bottom"] .hero-chip { align-self: center; }
.hero-cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 10px;
}
.hero-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 26px;
border-radius: 999px;
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
white-space: nowrap;
cursor: pointer;
}
.hero-btn svg {
width: 14px;
height: 14px;
transition: transform 0.3s ease;
}
.hero-btn--primary {
background: linear-gradient(135deg, var(--gold-l) 0%, var(--gold) 100%);
color: #fff;
border: 1px solid transparent;
box-shadow: 0 8px 24px rgba(46, 155, 101, 0.28);
}
.hero-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(46, 155, 101, 0.42);
}
.hero-btn--primary:hover svg { transform: translateX(3px); }
.hero-btn--ghost {
background: rgba(255, 255, 255, 0.04);
color: var(--gold-light);
border: 1px solid rgba(157, 213, 188, 0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero-btn--ghost:hover {
background: rgba(157, 213, 188, 0.1);
border-color: var(--gold-light);
color: #fff;
transform: translateY(-2px);
}
/* Tablet ≤ 1023px — tighter chip & CTAs */
@media (max-width: 1023px) {
.hero-chip { font-size: 0.6rem; padding: 6px 12px 6px 9px; }
.hero-btn { padding: 11px 20px; font-size: 0.66rem; letter-spacing: 0.18em; }
}
/* Mobile ≤ 767px — center CTAs */
@media (max-width: 767px) {
.hero-cta-row {
justify-content: center;
gap: 10px;
margin-top: 6px;
}
.hero-btn {
padding: 11px 18px;
font-size: 0.62rem;
letter-spacing: 0.16em;
}
.text-overlay[data-pos="left"] .hero-chip,
.text-overlay[data-pos="left"] .hero-cta-row { align-self: center; }
}
@media (max-width: 420px) {
.hero-btn--ghost { display: none; }
}
/* ================================================================
REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
.scroll-arrow { animation: none; opacity: 0.5; }
.lsp-fill { transition: none; }
.ls-orrery,
.ls-1, .ls-2, .ls-3,
.ls-gem-shape, .ls-gem-glow, .ls-bg-glow,
.sp { animation: none !important; opacity: 0.7; }
}
/* ============================================================
HOME
============================================================ */
/* ═══════════════════════════════════════════════════════════════
HOME PAGE — refined sections (excludes hero)
Brand palette: --gold #1B6B45 / --wine #0D5C35 / --navy #071A10
--cream #F4FAF6 — see style.css :root
═══════════════════════════════════════════════════════════════ */
/* Header layout helper used in bestsellers */
.hp-sec-hd{
display:flex;align-items:flex-end;justify-content:space-between;
text-align:left;gap:32px;margin-bottom:48px;flex-wrap:wrap;
}
.hp-sec-hd .eyebrow{margin-bottom:10px}
.hp-sec-hd .sec-title{margin-bottom:0}
.hp-link-arrow{
display:inline-flex;align-items:center;gap:10px;
font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--wine);text-decoration:none;
border-bottom:1px solid transparent;padding-bottom:4px;
transition:gap .25s,border-color .25s,color .25s;
}
.hp-link-arrow svg{width:16px;height:16px;transition:transform .25s}
.hp-link-arrow:hover{gap:14px;border-color:var(--gold);color:var(--gold)}
.hp-link-arrow:hover svg{transform:translateX(3px)}
/* ═══════════════════════════════════════════════════════════════
1. COLLECTIONS — asymmetric magazine grid with image cards
═══════════════════════════════════════════════════════════════ */
.hp-collections{background:var(--cream);position:relative}
.hp-collections::before{
content:'';position:absolute;inset:0;
background:
radial-gradient(ellipse 50% 40% at 90% 0%, rgba(46,155,101,.08) 0%, transparent 70%),
radial-gradient(ellipse 40% 35% at 5% 100%, rgba(46,155,101,.06) 0%, transparent 70%);
pointer-events:none;
}
.hp-collections > .sec-in{position:relative;z-index:1}
.hp-col-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
grid-template-rows:300px 240px;
gap:18px;
}
.hp-col-card--large{grid-column:span 2;grid-row:span 2}
.hp-col-card--small{grid-column:span 2;grid-row:span 1}
.hp-col-card--wide {grid-column:span 2;grid-row:span 1}
.hp-col-card{
position:relative;display:block;overflow:hidden;
border-radius:18px;text-decoration:none;color:#fff;
border:1px solid var(--border);background:#fff;
box-shadow:0 4px 20px rgba(8,6,15,.04);
transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;
}
.hp-col-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(8,6,15,.18)}
.hp-col-card-img{position:absolute;inset:0;overflow:hidden;background:#1A1A2E}
.hp-col-card-img img{
width:100%;height:100%;object-fit:cover;
transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.hp-col-card:hover .hp-col-card-img img{transform:scale(1.08)}
.hp-col-card-shade{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(8,6,15,.0) 0%,rgba(8,6,15,.15) 35%,rgba(7,26,16,.85) 100%);
}
.hp-col-card-body{
position:absolute;inset:auto 0 0 0;
padding:26px 28px;
display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
.hp-col-card-count{
display:inline-block;font-size:10px;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px;
}
.hp-col-card-name{
font-family:'Cormorant Garamond',serif;font-weight:400;
font-size:clamp(22px,2.4vw,32px);line-height:1.05;color:#fff;margin-bottom:6px;
}
.hp-col-card-sub{
font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.5;
}
.hp-col-card-cta{
flex-shrink:0;display:inline-flex;align-items:center;gap:8px;
font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:#fff;padding:10px 16px;border-radius:100px;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.25);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
transition:background .3s,border-color .3s,gap .25s;
}
.hp-col-card-cta svg{width:14px;height:14px}
.hp-col-card:hover .hp-col-card-cta{background:var(--gold);border-color:var(--gold);gap:12px}
/* ═══════════════════════════════════════════════════════════════
2. BESTSELLERS — product card grid
═══════════════════════════════════════════════════════════════ */
.hp-bestsellers{background:#fff}
/* Filter pills */
.hp-prod-filters{
display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;
scrollbar-width:none;
}
.hp-prod-filters::-webkit-scrollbar{display:none}
.hp-filter-pill{
display:inline-flex;align-items:center;gap:8px;
padding:10px 18px;border-radius:100px;cursor:pointer;
background:#fff;color:var(--ink);
border:1px solid var(--border);
font-family:'Jost',sans-serif;font-size:12px;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;
transition:background .25s,border-color .25s,color .25s,transform .2s;
}
.hp-filter-pill:hover{
background:var(--cream);border-color:rgba(46,155,101,.4);
transform:translateY(-1px);
}
.hp-filter-pill.active{
background:var(--wine);color:#fff;border-color:var(--wine);
box-shadow:0 6px 18px rgba(13,92,53,.22);
}
.hp-filter-count{
display:inline-grid;place-items:center;min-width:22px;height:18px;
padding:0 6px;border-radius:100px;
font-size:9.5px;font-weight:700;letter-spacing:.04em;
background:rgba(46,155,101,.12);color:var(--wine);
transition:background .25s,color .25s;
}
.hp-filter-pill.active .hp-filter-count{
background:rgba(255,255,255,.18);color:#fff;
}
.hp-prod-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.hp-prod-card{position:relative}
.hp-prod-card.filtering-out{
opacity:0;transform:translateY(8px) scale(.96);
transition:opacity .3s,transform .3s;
pointer-events:none;
}
.hp-prod-card.filtering-in{
animation:hp-card-in .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes hp-card-in{
from{opacity:0;transform:translateY(14px) scale(.97)}
to {opacity:1;transform:none}
}
.hp-prod-card.is-hidden{display:none}
.hp-prod-empty{
grid-column:1/-1;text-align:center;padding:42px 22px;
border:1px dashed var(--border);border-radius:14px;
background:#fbfdfb;color:var(--muted);font-size:14px;
}
.hp-prod-card{
display:flex;flex-direction:column;text-decoration:none;
background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;
transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
}
.hp-prod-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 44px rgba(8,6,15,.12);
border-color:rgba(27,107,69,.3);
}
.hp-prod-card-img{
position:relative;aspect-ratio:1/1;overflow:hidden;background:#f5eee8;
}
.hp-prod-card-img img{
width:100%;height:100%;object-fit:cover;
transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.hp-prod-card:hover .hp-prod-card-img img{transform:scale(1.08)}
.hp-prod-badge{
position:absolute;top:12px;left:12px;z-index:2;
font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
padding:6px 12px;border-radius:100px;
background:#fff;color:var(--wine);
border:1px solid var(--border);
box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.hp-prod-wish{
position:absolute;top:12px;right:12px;z-index:2;
width:36px;height:36px;border-radius:50%;
background:rgba(255,255,255,.94);border:1px solid var(--border);
display:grid;place-items:center;cursor:pointer;
color:#1A1A2E;transition:all .25s;
}
.hp-prod-wish svg{width:16px;height:16px;fill:none;transition:fill .25s,stroke .25s}
.hp-prod-wish:hover{background:var(--wine);border-color:var(--wine);color:#fff;transform:scale(1.08)}
.hp-prod-wish:hover svg{fill:#fff}
.hp-prod-wish.is-active{
background:var(--wine);border-color:var(--wine);color:#fff;
animation:hp-heart-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.hp-prod-wish.is-active svg{fill:#fff;stroke:#fff}
@keyframes hp-heart-pop{
0%{transform:scale(.9)}
50%{transform:scale(1.25)}
100%{transform:scale(1.08)}
}
.hp-prod-hover-overlay{
position:absolute;left:0;right:0;bottom:0;z-index:2;
display:flex;justify-content:center;align-items:flex-end;
padding:18px;
background:linear-gradient(to top,rgba(7,26,16,.78) 0%,transparent 100%);
opacity:0;transition:opacity .3s;
pointer-events:none;
}
.hp-prod-card:hover .hp-prod-hover-overlay,
.hp-prod-card:focus-within .hp-prod-hover-overlay{opacity:1}
.hp-prod-quick{
pointer-events:auto;
padding:10px 24px;border:none;cursor:pointer;
background:rgba(46,155,101,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border-radius:100px;
color:#fff;font-family:'Jost',sans-serif;
font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
transform:translateY(8px);transition:transform .3s,background .2s,box-shadow .25s;
box-shadow:0 6px 18px rgba(7,26,16,.35);
}
.hp-prod-card:hover .hp-prod-quick,
.hp-prod-card:focus-within .hp-prod-quick{transform:translateY(0) scale(1)}
.hp-prod-quick:hover{background:var(--gold);box-shadow:0 8px 22px rgba(7,26,16,.45);transform:translateY(0) scale(1.04)}
@media (hover:none){
.hp-prod-hover-overlay{opacity:1}
.hp-prod-quick{transform:none}
}
.hp-prod-body{
padding:18px 20px 22px;display:flex;flex-direction:column;gap:4px;flex:1;
}
.hp-prod-cat{
font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:var(--gold);margin-bottom:2px;
}
.hp-prod-name{
font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;
color:#1A1A2E;line-height:1.25;
}
.hp-prod-sub{
font-size:12px;color:var(--muted);margin-bottom:6px;line-height:1.45;
min-height:2.9em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hp-prod-price{font-size:15px;font-weight:600;color:#1A1A2E;letter-spacing:.01em}
.hp-prod-foot{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:auto;padding-top:6px;
}
.hp-prod-add{
width:34px;height:34px;flex-shrink:0;border-radius:50%;
background:var(--cream);border:1px solid var(--border);
display:grid;place-items:center;cursor:pointer;color:var(--wine);
transition:background .25s,border-color .25s,color .25s,transform .25s;
}
.hp-prod-add svg{width:14px;height:14px;fill:none}
.hp-prod-add:hover{
background:var(--wine);border-color:var(--wine);color:#fff;transform:rotate(90deg);
}
/* Quantity stepper — replaces .hp-prod-add once in cart */
.hp-prod-qty{
display:inline-flex;align-items:center;flex-shrink:0;
height:34px;padding:3px;border-radius:100px;
background:var(--wine);border:1px solid var(--wine);color:#fff;
box-shadow:0 6px 16px rgba(13,92,53,.18);
animation:hp-qty-pop .28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes hp-qty-pop{
0%{transform:scale(.85);opacity:0}
100%{transform:scale(1);opacity:1}
}
.hp-qty-btn{
width:26px;height:26px;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.12);border:0;color:#fff;
display:grid;place-items:center;
transition:background .2s,transform .15s;
}
.hp-qty-btn svg{width:12px;height:12px;fill:none;stroke:currentColor}
.hp-qty-btn:hover{background:rgba(255,255,255,.28)}
.hp-qty-btn:active{transform:scale(.92)}
.hp-prod-qty .hp-qty-num{
min-width:24px;padding:0 4px;
text-align:center;
font-family:'Jost',sans-serif;font-size:12.5px;font-weight:700;
color:#fff;letter-spacing:.02em;line-height:1;
font-variant-numeric:tabular-nums;
}
/* ═══════════════════════════════════════════════════════════════
3. CRAFTSMANSHIP — image with floating stamp + step list
═══════════════════════════════════════════════════════════════ */
.hp-craft{background:var(--navy);position:relative;overflow:hidden}
.hp-craft::before{
content:'';position:absolute;inset:0;
background:
radial-gradient(ellipse 50% 60% at 100% 0%, rgba(46,155,101,.18) 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 0% 100%, rgba(46,155,101,.12) 0%, transparent 60%);
pointer-events:none;
}
.hp-craft > .sec-in{position:relative;z-index:1}
.hp-craft-grid{
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.hp-craft-visual{position:relative}
.hp-craft-img-wrap{
position:relative;border-radius:20px;overflow:hidden;
aspect-ratio:4/5;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.hp-craft-img-wrap img{
width:100%;height:100%;object-fit:cover;
filter:saturate(.95);
}
.hp-craft-img-wrap::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(7,26,16,0) 50%,rgba(7,26,16,.4) 100%);
}
.hp-craft-stamp{
position:absolute;right:-22px;bottom:48px;z-index:2;
width:128px;height:128px;border-radius:50%;
background:linear-gradient(135deg,var(--gold) 0%,var(--gold-d) 100%);
color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
box-shadow:0 14px 40px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.18);
text-align:center;padding:6px;
}
.hp-craft-stamp-yr{
font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:500;line-height:1;
}
.hp-craft-stamp-lbl{
font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
margin-top:4px;line-height:1.3;color:rgba(255,255,255,.92);
}
.hp-craft-eyebrow{color:var(--gold-l)}
.hp-craft-title{color:#fff;text-align:left}
.hp-craft-desc{
font-size:14.5px;color:rgba(255,255,255,.55);
line-height:1.75;margin:18px 0 0;max-width:520px;
}
.hp-craft-steps{display:flex;flex-direction:column;gap:24px;margin-top:36px}
.hp-craft-step{
display:flex;gap:20px;align-items:flex-start;padding:18px 20px;
border:1px solid rgba(255,255,255,.06);border-radius:14px;
background:rgba(255,255,255,.02);
transition:background .3s,border-color .3s,transform .3s;
}
.hp-craft-step:hover{
background:rgba(46,155,101,.06);
border-color:rgba(46,155,101,.25);
transform:translateX(4px);
}
.hp-step-no{
width:42px;height:42px;flex-shrink:0;border-radius:50%;
border:1px solid rgba(46,155,101,.4);
background:rgba(46,155,101,.1);
display:grid;place-items:center;
font-family:'Cormorant Garamond',serif;font-size:16px;
color:var(--gold-l);
}
.hp-step-body h4{font-size:14.5px;font-weight:500;color:#fff;margin-bottom:4px}
.hp-step-body p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.65}
/* "Our Process" — each 01/02/03 box rises + scales in while its
number circle springs with a glow-ring pulse, staggered 01→02→03.
Triggered by a dedicated, well-timed observer in home.js that adds
`.craft-anim-ready` to the container and `.is-in` to each box only
when it is genuinely in the viewport (not when the tall parent
merely peeks in). Text inside each box still reveals left-to-right
via the shared per-letter split (see SELECTOR in index.php).
`backwards` (not `forwards`) so each box reverts to a clean state
and its existing :hover transform keeps working. */
@keyframes hp-craft-step-rise{
from{opacity:0;transform:translateY(46px) scale(.94)}
to {opacity:1;transform:translateY(0) scale(1)}
}
@keyframes hp-step-no-pop{
0% {transform:scale(.4) rotate(-20deg)}
55% {transform:scale(1.16) rotate(6deg)}
100%{transform:scale(1) rotate(0)}
}
/* Hidden pre-state only once JS has armed the section, so the boxes
are never stuck invisible if the script fails to run. */
.hp-craft-steps.craft-anim-ready .hp-craft-step:not(.is-in){
opacity:0;transform:translateY(46px) scale(.94);
}
.hp-craft-steps.craft-anim-ready .hp-craft-step.is-in{
animation:hp-craft-step-rise .8s cubic-bezier(.16,1,.3,1) backwards;
}
.hp-craft-steps.craft-anim-ready .hp-craft-step.is-in .hp-step-no{
animation:hp-step-no-pop .7s cubic-bezier(.34,1.56,.64,1) backwards;
}
.hp-craft-steps.craft-anim-ready .hp-craft-step:nth-child(1).is-in,
.hp-craft-steps.craft-anim-ready .hp-craft-step:nth-child(1).is-in .hp-step-no{animation-delay:0s}
.hp-craft-steps.craft-anim-ready .hp-craft-step:nth-child(2).is-in,
.hp-craft-steps.craft-anim-ready .hp-craft-step:nth-child(2).is-in .hp-step-no{animation-delay:.14s}
.hp-craft-steps.craft-anim-ready .hp-craft-step:nth-child(3).is-in,
.hp-craft-steps.craft-anim-ready .hp-craft-step:nth-child(3).is-in .hp-step-no{animation-delay:.28s}
@media (prefers-reduced-motion:reduce){
.hp-craft-steps.craft-anim-ready .hp-craft-step:not(.is-in){opacity:1;transform:none}
.hp-craft-steps.craft-anim-ready .hp-craft-step.is-in,
.hp-craft-steps.craft-anim-ready .hp-craft-step.is-in .hp-step-no{animation:none}
}
/* ═══════════════════════════════════════════════════════════════
4. BRIDAL SHOWCASE — full-bleed banner with parallax-feel image
═══════════════════════════════════════════════════════════════ */
.hp-bridal{
position:relative;min-height:520px;
display:flex;align-items:center;justify-content:center;
overflow:hidden;color:#fff;
padding:100px 80px;
background:var(--navy); /* fallback while img loads */
}
.hp-bridal-bg{
position:absolute;inset:0;z-index:0;overflow:hidden;
}
.hp-bridal-bg img{
position:absolute;top:-10%;left:0;
width:100%;height:120%;
object-fit:cover;object-position:center;
display:block;
will-change:transform;
}
.hp-bridal-overlay{
position:absolute;inset:0;
background:
linear-gradient(135deg,rgba(5,18,11,.82) 0%,rgba(9,48,29,.66) 50%,rgba(5,18,11,.82) 100%),
radial-gradient(ellipse 75% 70% at 50% 46%, rgba(3,12,7,.30) 0%, rgba(3,12,7,.62) 100%);
}
/* ─── Floating sparkles ─── */
.hp-bridal-sparkles{
position:absolute;inset:0;z-index:0;
pointer-events:none;overflow:hidden;
}
.hp-spark{
position:absolute;
width:6px;height:6px;border-radius:50%;
background:radial-gradient(circle,#FFE7A8 0%,rgba(232,196,107,.7) 40%,transparent 70%);
filter:blur(.4px);
opacity:0;
animation:hp-spark-rise 9s linear infinite;
will-change:transform,opacity;
}
.hp-spark::after{
content:'';position:absolute;inset:-200%;
background:radial-gradient(circle,rgba(255,231,168,.4) 0%,transparent 60%);
pointer-events:none;
}
@keyframes hp-spark-rise{
0% { transform:translate3d(0, 40px, 0) scale(.4); opacity:0; }
10% { opacity:.9; }
60% { opacity:.7; }
100% { transform:translate3d(0, -120px, 0) scale(1); opacity:0; }
}
/* Spread sparkles across the section with varied sizes & delays */
.hp-spark--1 { left: 6%; bottom: 12%; animation-delay: 0s; animation-duration: 9s; width:4px;height:4px; }
.hp-spark--2 { left: 14%; bottom: 38%; animation-delay: 1.2s; animation-duration: 11s; width:6px;height:6px; }
.hp-spark--3 { left: 22%; bottom: 8%; animation-delay: 2.6s; animation-duration: 10s; width:3px;height:3px; }
.hp-spark--4 { left: 30%; bottom: 55%; animation-delay: 4.1s; animation-duration: 12s; width:5px;height:5px; }
.hp-spark--5 { left: 38%; bottom: 22%; animation-delay: 0.6s; animation-duration: 9.5s;width:4px;height:4px; }
.hp-spark--6 { left: 48%; bottom: 60%; animation-delay: 3.4s; animation-duration: 11s; width:7px;height:7px; }
.hp-spark--7 { left: 56%; bottom: 14%; animation-delay: 1.8s; animation-duration: 10s; width:5px;height:5px; }
.hp-spark--8 { left: 64%; bottom: 44%; animation-delay: 5s; animation-duration: 12s; width:4px;height:4px; }
.hp-spark--9 { left: 72%; bottom: 26%; animation-delay: 2.2s; animation-duration: 9s; width:6px;height:6px; }
.hp-spark--10{ left: 80%; bottom: 52%; animation-delay: 4.6s; animation-duration: 11s; width:3px;height:3px; }
.hp-spark--11{ left: 86%; bottom: 18%; animation-delay: 1s; animation-duration: 10.5s;width:5px;height:5px; }
.hp-spark--12{ left: 92%; bottom: 38%; animation-delay: 3s; animation-duration: 12s; width:4px;height:4px; }
.hp-spark--13{ left: 44%; bottom: 6%; animation-delay: 6s; animation-duration: 9s; width:6px;height:6px; }
.hp-spark--14{ left: 68%; bottom: 70%; animation-delay: 5.6s; animation-duration: 11s; width:3px;height:3px; }
/* ─── Pulsing radial halo — sits behind the title only ─── */
.hp-bridal-halo{
position:absolute;left:50%;top:38%;
width:520px;height:320px;
transform:translate(-50%,-50%);
background:radial-gradient(ellipse at center,rgba(232,196,107,.14) 0%,rgba(46,155,101,.05) 45%,transparent 70%);
filter:blur(24px);
z-index:0;
animation:hp-halo-breathe 8s ease-in-out infinite;
pointer-events:none;
}
@keyframes hp-halo-breathe{
0%, 100% { opacity:.55; transform:translate(-50%,-50%) scale(1); }
50% { opacity:.9; transform:translate(-50%,-50%) scale(1.06); }
}
.hp-bridal-inner{
position:relative;z-index:1;max-width:720px;text-align:center;
}
/* Higher specificity so it isn't overridden by the later generic .eyebrow
rule; warm gold + shadow keeps it legible on the dark bridal imagery. */
.hp-bridal .hp-bridal-eyebrow{
color:#E8C46B;
margin-bottom:18px;
text-shadow:0 1px 8px rgba(7,26,16,.55);
}
/* ─── Ornamental flourish above the title ─── */
.hp-bridal-flourish{
display:flex;align-items:center;justify-content:center;gap:16px;
margin-bottom:14px;
opacity:0;transform:translateY(8px);
transition:opacity .8s .2s var(--ease-out-quint),transform .8s .2s var(--ease-out-quint);
}
.reveal.visible .hp-bridal-flourish{opacity:1;transform:none}
.hp-bridal-flourish-line{
width:54px;height:1px;
background:linear-gradient(90deg,transparent 0%,rgba(232,196,107,.55) 100%);
}
.hp-bridal-flourish-line:last-child{
background:linear-gradient(90deg,rgba(232,196,107,.55) 0%,transparent 100%);
}
.hp-bridal-flourish-gem{
width:18px;height:18px;color:#E8C46B;
filter:drop-shadow(0 0 6px rgba(232,196,107,.6));
animation:hp-gem-rotate 14s linear infinite;
}
@keyframes hp-gem-rotate{
from{transform:rotate(0)}to{transform:rotate(360deg)}
}
/* ─── Title shimmer sweep ─── */
.hp-bridal-title{
font-family:'Cormorant Garamond',serif;font-weight:300;
font-size:clamp(34px,5vw,64px);line-height:1.1;color:#fff;
margin-bottom:18px;letter-spacing:-.005em;
}
.hp-bridal-title-shine{
display:inline;
background-image:linear-gradient(110deg,#fff 0%,#fff 30%,#FFE7A8 48%,#FFFFFF 56%,#fff 70%,#fff 100%);
background-size:300% 100%;
background-position:200% 0;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
/* Falls back to white if background-clip:text isn't supported */
animation:hp-title-shine 7s ease-in-out 1.4s infinite;
}
/* When the per-letter reveal splits the title into .char spans
(each becomes inline-block with its own transform → own stacking context),
the parent's background-clip:text can't reach the glyphs. Repeat the
gradient+clip on the chars so every letter paints its own slice. */
.hp-bridal-title-shine .char{
background-image:linear-gradient(110deg,#fff 0%,#fff 30%,#FFE7A8 48%,#FFFFFF 56%,#fff 70%,#fff 100%);
background-size:300% 100%;
background-position:200% 0;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
animation:hp-title-shine 7s ease-in-out 1.4s infinite;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.hp-bridal-title-shine,
.hp-bridal-title-shine .char{
-webkit-text-fill-color:#fff;color:#fff;background:none;animation:none;
}
}
@keyframes hp-title-shine{
0%, 70%, 100% { background-position:200% 0; }
85% { background-position:-100% 0; }
}
.hp-bridal-desc{
font-size:15px;line-height:1.75;color:rgba(255,255,255,.78);
max-width:560px;margin:0 auto 36px;
}
.hp-bridal-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* Bridal mini stats */
.hp-bridal-mini{
display:inline-flex;align-items:center;gap:24px;flex-wrap:wrap;
margin-top:36px;padding:14px 24px;border-radius:100px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
justify-content:center;
}
.hp-bridal-mini-item{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.hp-bridal-mini-item strong{
font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:#fff;
display:inline-flex;align-items:baseline;
}
/* Suffix inside bridal mini-stats inherits the strong's white color, not the
green→white gradient used in the main stats grid */
.hp-bridal-mini-item .hp-stat-suffix{
background:none;-webkit-text-fill-color:#fff;color:#fff;
margin-left:1px;
}
.hp-bridal-mini-item span{
font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:rgba(255,255,255,.6);margin-top:2px;
}
.hp-bridal-mini-sep{
width:1px;height:28px;background:rgba(255,255,255,.18);
}
.hp-btn-gold svg{width:14px;height:14px;fill:none;transition:transform .25s}
.hp-btn-gold:hover svg{transform:translateX(3px)}
.hp-btn-gold{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:15px 36px;border:none;cursor:pointer;
background:linear-gradient(135deg,var(--gold) 0%,var(--gold-l) 100%);
color:#fff;font-family:'Jost',sans-serif;
font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
border-radius:100px;text-decoration:none;
box-shadow:0 8px 24px rgba(46,155,101,.35);
transition:transform .25s,box-shadow .25s,filter .25s;
}
.hp-btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(46,155,101,.5);filter:brightness(1.06)}
/* Pulsing-glow variant — used on the bridal CTA */
.hp-btn-gold--pulse{position:relative;isolation:isolate}
.hp-btn-gold--pulse::before{
content:'';position:absolute;inset:-4px;border-radius:100px;z-index:-1;
background:linear-gradient(135deg,rgba(232,196,107,.55),rgba(46,155,101,.55));
filter:blur(14px);opacity:.55;
animation:hp-btn-pulse 3.2s ease-in-out infinite;
pointer-events:none;
}
@keyframes hp-btn-pulse{
0%, 100% { opacity:.45; transform:scale(1); }
50% { opacity:.85; transform:scale(1.06); }
}
.hp-btn-ghost{
display:inline-flex;align-items:center;justify-content:center;
padding:15px 32px;
background:transparent;color:#fff;
font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
border:1px solid rgba(255,255,255,.4);border-radius:100px;
text-decoration:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
transition:background .25s,border-color .25s,transform .25s;
}
.hp-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
/* ═══════════════════════════════════════════════════════════════
5. TESTIMONIALS — refined cards
═══════════════════════════════════════════════════════════════ */
.hp-testi-sec{background:var(--cream)}
.hp-testi-outer{
position:relative;overflow:hidden;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);
}
.hp-testi-track{
display:flex;gap:22px;
animation:hp-tscroll 38s linear infinite;
padding:8px 0;
will-change:transform;
}
.hp-testi-track:hover{animation-play-state:paused}
.hp-testi-track.is-paused{animation-play-state:paused}
@keyframes hp-tscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Manual nav arrows */
.hp-testi-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:5;
width:46px;height:46px;border-radius:50%;cursor:pointer;
background:#fff;border:1px solid var(--border);
display:grid;place-items:center;color:var(--wine);
box-shadow:0 8px 24px rgba(8,6,15,.08);
opacity:0;transition:opacity .3s,background .25s,border-color .25s,transform .25s,color .25s;
}
.hp-testi-outer:hover .hp-testi-nav,
.hp-testi-nav:focus-visible{opacity:1}
.hp-testi-nav--prev{left:18px}
.hp-testi-nav--next{right:18px}
.hp-testi-nav svg{width:18px;height:18px;fill:none}
.hp-testi-nav:hover{
background:var(--wine);border-color:var(--wine);color:#fff;
transform:translateY(-50%) scale(1.06);
}
@media (hover:none){
.hp-testi-nav{opacity:1;background:rgba(255,255,255,.92)}
}
.hp-tcard{
position:relative;flex-shrink:0;width:340px;
background:#fff;border:1px solid var(--border);border-radius:16px;
padding:30px 28px;
box-shadow:0 4px 18px rgba(8,6,15,.04);
transition:transform .3s,box-shadow .3s,border-color .3s;
}
.hp-tcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(8,6,15,.1);border-color:rgba(27,107,69,.25)}
.hp-tcard-quote{
position:absolute;top:8px;right:18px;
font-family:'Cormorant Garamond',serif;font-size:90px;line-height:1;
color:rgba(27,107,69,.1);font-weight:600;
pointer-events:none;
}
.hp-tcard-stars{color:var(--gold);font-size:13px;letter-spacing:3px;margin-bottom:14px}
.hp-tcard-q{
font-family:'Cormorant Garamond',serif;font-size:17px;line-height:1.6;
color:#1A1A2E;margin-bottom:22px;font-weight:400;
}
.hp-tcard-author{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);padding-top:16px}
.hp-tcard-avatar{
width:38px;height:38px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,var(--gold) 0%,var(--wine) 100%);
color:#fff;display:grid;place-items:center;
font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;
}
.hp-tcard-name{display:block;font-size:13.5px;font-weight:600;color:#1A1A2E;line-height:1.2}
.hp-tcard-loc{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
/* ═══════════════════════════════════════════════════════════════
6. FEATURES — clean card row
═══════════════════════════════════════════════════════════════ */
.hp-features{background:#fff}
.hp-feat-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.hp-feat-card{
background:var(--cream);
padding:36px 28px;text-align:center;
border:1px solid var(--border);border-radius:16px;
transition:transform .3s,box-shadow .3s,border-color .3s,background .3s;
}
.hp-feat-card:hover{
transform:translateY(-6px);
background:#fff;
border-color:rgba(27,107,69,.3);
box-shadow:0 18px 40px rgba(8,6,15,.08);
}
.hp-feat-ico{
width:62px;height:62px;margin:0 auto 18px;
border-radius:50%;
background:#fff;border:1px solid var(--border);
display:grid;place-items:center;
transition:background .3s,border-color .3s;
}
.hp-feat-ico svg{width:26px;height:26px;fill:none;stroke:var(--wine);stroke-width:1.5;transition:stroke .3s}
.hp-feat-card:hover .hp-feat-ico{background:var(--wine);border-color:var(--wine)}
.hp-feat-card:hover .hp-feat-ico svg{stroke:#fff}
.hp-feat-t{font-size:14.5px;font-weight:600;color:#1A1A2E;margin-bottom:10px}
.hp-feat-d{font-size:13px;color:var(--muted);line-height:1.7}
/* ═══════════════════════════════════════════════════════════════
7. NEWSLETTER
═══════════════════════════════════════════════════════════════ */
.hp-newsletter{
background:var(--cream);
padding:80px 80px;
}
.hp-newsletter-inner{
max-width:1200px;margin:0 auto;
display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;
background:linear-gradient(135deg,#fff 0%,#fbfdfb 100%);
border:1px solid var(--border);border-radius:24px;
padding:60px;
box-shadow:0 18px 50px rgba(8,6,15,.06);
position:relative;overflow:hidden;
}
.hp-newsletter-inner::before{
content:'';position:absolute;inset:0;
background:
radial-gradient(ellipse 35% 60% at 100% 0%, rgba(46,155,101,.12) 0%, transparent 70%),
radial-gradient(ellipse 30% 50% at 0% 100%, rgba(46,155,101,.08) 0%, transparent 70%);
pointer-events:none;
}
.hp-newsletter-text{position:relative;z-index:1}
.hp-newsletter-eyebrow{margin-bottom:14px}
.hp-newsletter-title{
font-family:'Cormorant Garamond',serif;font-weight:300;
font-size:clamp(28px,3.4vw,42px);line-height:1.1;color:#1A1A2E;
margin-bottom:14px;
}
.hp-newsletter-desc{font-size:14.5px;color:var(--muted);line-height:1.7;max-width:440px}
.hp-newsletter-form{
position:relative;z-index:1;
display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;
}
.hp-newsletter-field{
flex:1;min-width:240px;
display:flex;align-items:center;gap:12px;
padding:0 18px;background:#fff;
border:1px solid var(--border);border-radius:100px;
transition:border-color .25s,box-shadow .25s;
}
.hp-newsletter-field:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(46,155,101,.12)}
.hp-newsletter-field svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.hp-newsletter-field input{
flex:1;border:none;outline:none;background:transparent;
padding:16px 0;font-family:'Jost',sans-serif;font-size:14.5px;color:#1A1A2E;
}
.hp-newsletter-field input::placeholder{color:var(--muted)}
.hp-newsletter-form .hp-btn-gold{flex-shrink:0;position:relative;min-width:148px}
.hp-newsletter-form.is-error .hp-newsletter-field{
border-color:#c44a4a;box-shadow:0 0 0 4px rgba(196,74,74,.12);
}
.hp-newsletter-msg{
width:100%;font-size:12.5px;letter-spacing:.02em;
margin-top:4px;min-height:18px;color:var(--muted);
opacity:0;transform:translateY(-4px);
transition:opacity .25s,transform .25s,color .25s;
}
.hp-newsletter-msg.is-shown{opacity:1;transform:none}
.hp-newsletter-msg.is-error{color:#c44a4a}
.hp-newsletter-msg.is-success{color:var(--wine)}
.hp-news-btn-spin,
.hp-news-btn-tick{
position:absolute;left:50%;top:50%;
width:18px;height:18px;fill:none;
transform:translate(-50%,-50%) scale(.7);
opacity:0;pointer-events:none;
transition:opacity .2s,transform .25s;
}
.hp-newsletter-form.is-loading .hp-news-btn-label{opacity:0}
.hp-newsletter-form.is-loading .hp-news-btn-spin{
opacity:1;transform:translate(-50%,-50%) scale(1);
animation:hp-spin .9s linear infinite;
}
.hp-newsletter-form.is-success .hp-news-btn-label{opacity:0}
.hp-newsletter-form.is-success .hp-news-btn-tick{
opacity:1;transform:translate(-50%,-50%) scale(1);
}
.hp-newsletter-form.is-success .hp-btn-gold{
pointer-events:none;background:linear-gradient(135deg,var(--gold-d) 0%,var(--gold) 100%);
}
.hp-news-btn-label{transition:opacity .2s}
@keyframes hp-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* ═══════════════════════════════════════════════════════════════
8. STATS / ACHIEVEMENTS
═══════════════════════════════════════════════════════════════ */
.hp-stats{
background:var(--navy);color:#fff;
padding:80px 80px;position:relative;overflow:hidden;
}
.hp-stats::before{
content:'';position:absolute;inset:0;
background:
radial-gradient(ellipse 50% 60% at 0% 0%, rgba(46,155,101,.18) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 100% 100%, rgba(46,155,101,.14) 0%, transparent 60%);
pointer-events:none;
}
.hp-stats-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1}
.hp-stats-hd{text-align:center;margin-bottom:48px}
.hp-stats-eyebrow{color:var(--gold-l);margin-bottom:12px}
.hp-stats-title{
font-family:'Cormorant Garamond',serif;font-weight:300;
font-size:clamp(28px,3.6vw,46px);line-height:1.1;color:#fff;
}
.hp-stats-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:0;border-top:1px solid rgba(255,255,255,.08);
}
.hp-stat{
padding:36px 28px;text-align:center;
border-right:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
display:flex;flex-direction:column;align-items:center;gap:8px;
transition:background .3s;
}
.hp-stat:last-child{border-right:none}
.hp-stat:hover{background:rgba(46,155,101,.06)}
.hp-stat-num{
font-family:'Cormorant Garamond',serif;font-weight:400;
font-size:clamp(40px,5vw,64px);line-height:1;
background:linear-gradient(135deg,var(--gold-l) 0%,#fff 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
letter-spacing:-.01em;margin-bottom:6px;
}
.hp-stat-label{
font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.92);
}
.hp-stat-sub{font-size:12.5px;color:rgba(255,255,255,.42);line-height:1.5}
/* ═══════════════════════════════════════════════════════════════
9. INSTAGRAM GALLERY
═══════════════════════════════════════════════════════════════ */
.hp-insta{background:#fff}
.hp-insta-grid{
display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
}
.hp-insta-tile{
position:relative;aspect-ratio:1/1;overflow:hidden;
border-radius:12px;display:block;
background:#f5eee8;
}
.hp-insta-tile img{
width:100%;height:100%;object-fit:cover;
transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.hp-insta-tile:hover img{transform:scale(1.1)}
.hp-insta-overlay{
position:absolute;inset:0;
background:linear-gradient(135deg,rgba(27,107,69,.7) 0%,rgba(13,92,53,.85) 100%);
display:grid;place-items:center;
opacity:0;transition:opacity .3s;
}
.hp-insta-tile:hover .hp-insta-overlay{opacity:1}
.hp-insta-overlay svg{width:30px;height:30px;color:#fff;fill:none}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE — tablet ≤ 1100px
═══════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
.hp-prod-grid{grid-template-columns:repeat(3,1fr);gap:20px}
.hp-col-grid{
grid-template-columns:repeat(2,1fr);
grid-template-rows:auto;
gap:16px;
}
.hp-col-card{height:280px;position:relative}
.hp-col-card--large,
.hp-col-card--small,
.hp-col-card--wide{grid-column:span 1;grid-row:span 1}
.hp-craft-grid{gap:60px}
.hp-craft-stamp{width:108px;height:108px;right:-12px;bottom:36px}
.hp-craft-stamp-yr{font-size:36px}
.hp-newsletter-inner{padding:48px;gap:40px}
.hp-stats{padding:64px 40px}
.hp-insta-grid{grid-template-columns:repeat(3,1fr)}
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE — small tablet / large phone ≤ 900px
═══════════════════════════════════════════════════════════════ */
@media(max-width:900px){
.hp-sec-hd{flex-direction:column;align-items:flex-start;text-align:left;gap:16px}
.hp-prod-grid{grid-template-columns:repeat(2,1fr);gap:16px}
.hp-craft-grid{grid-template-columns:1fr;gap:90px}
.hp-craft-img-wrap{aspect-ratio:5/4;max-width:560px;margin:0 auto}
.hp-craft-content{text-align:center}
.hp-craft-content .hp-craft-title{text-align:center}
.hp-craft-desc{margin-left:auto;margin-right:auto}
.hp-craft-stamp{right:auto;left:50%;transform:translateX(-50%);bottom:-50px}
.hp-feat-grid{grid-template-columns:repeat(2,1fr);gap:16px}
.hp-bridal{padding:80px 32px;min-height:460px}
.hp-newsletter{padding:60px 32px}
.hp-newsletter-inner{
grid-template-columns:1fr;gap:32px;padding:40px 32px;text-align:center;
}
.hp-newsletter-desc{margin-left:auto;margin-right:auto}
.hp-newsletter-form{justify-content:center}
/* Stats: 2x2 grid; restore right-borders for col 1 of each row */
.hp-stats-grid{grid-template-columns:repeat(2,1fr)}
.hp-stat{padding:32px 22px}
.hp-stat:nth-child(2n){border-right:none}
.hp-stat:last-child{border-right:none}
/* Instagram: keep 3-col so tiles don't get tiny */
.hp-insta-grid{grid-template-columns:repeat(3,1fr);gap:6px}
/* CTA band — was missing a tablet breakpoint */
.cta-band{padding:72px 32px}
/* Marquee: trim item padding so more items fit */
.mq-item{padding:0 18px;font-size:10px}
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE — phone ≤ 600px
═══════════════════════════════════════════════════════════════ */
@media(max-width:600px){
.hp-col-grid{
grid-template-columns:1fr;gap:14px;
}
.hp-col-card{height:260px}
.hp-col-card-body{padding:20px 22px;flex-direction:column;align-items:flex-start;gap:14px}
.hp-col-card-cta{align-self:flex-start}
.hp-prod-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.hp-prod-body{padding:14px 14px 18px}
.hp-prod-name{font-size:16px}
.hp-prod-sub{font-size:11px}
.hp-prod-price{font-size:14px}
.hp-prod-wish{width:32px;height:32px;top:8px;right:8px}
.hp-prod-wish svg{width:14px;height:14px}
.hp-prod-badge{top:8px;left:8px;padding:5px 10px;font-size:9px}
.hp-craft-stamp{width:92px;height:92px;bottom:-40px}
.hp-craft-stamp-yr{font-size:30px}
.hp-craft-stamp-lbl{font-size:8.5px}
.hp-craft-step{padding:14px 16px;gap:14px}
.hp-step-no{width:36px;height:36px;font-size:14px}
.hp-bridal{padding:64px 22px;min-height:420px}
.hp-bridal-actions{flex-direction:column;gap:12px;align-items:center}
.hp-bridal-actions a{width:100%;max-width:300px}
.hp-tcard{
width:min(calc(100vw - 80px),360px);
padding:24px 22px;
scroll-snap-align:center;
}
.hp-tcard-q{font-size:15.5px}
.hp-testi-outer{
-webkit-mask-image:none;
mask-image:none;
}
.hp-testi-track{
animation:none;
gap:16px;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
-ms-overflow-style:none;
padding-inline:calc((100vw - min(100vw - 80px, 360px)) / 2);
transform:none !important;
}
.hp-testi-track::-webkit-scrollbar{display:none}
.hp-feat-grid{grid-template-columns:1fr;gap:12px}
.hp-feat-card{padding:28px 22px}
.hp-newsletter{padding:48px 18px}
.hp-newsletter-inner{padding:32px 22px;border-radius:18px}
.hp-newsletter-form{flex-direction:column;gap:10px}
.hp-newsletter-field{min-width:0;width:100%}
.hp-newsletter-form .hp-btn-gold{width:100%}
/* Stats: keep 2x2 — single column feels too sparse */
.hp-stats{padding:56px 22px}
.hp-stats-hd{margin-bottom:32px}
.hp-stat{padding:26px 16px;gap:6px}
.hp-stat-label{font-size:11.5px;letter-spacing:.14em}
.hp-stat-sub{font-size:11.5px}
/* Instagram: 2x3 grid on phone */
.hp-insta-grid{grid-template-columns:repeat(2,1fr);gap:6px}
/* Bestsellers section header link wraps cleanly */
.hp-link-arrow{font-size:11px;letter-spacing:.14em}
/* Section header description should center on phones */
.hp-insta .sec-desc{text-align:left}
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE — small phone ≤ 420px
═══════════════════════════════════════════════════════════════ */
@media(max-width:420px){
.hp-prod-grid{grid-template-columns:1fr;gap:14px}
.hp-prod-card-img{aspect-ratio:4/3}
.hp-stat-num{font-size:38px}
.hp-bridal-title{font-size:30px}
.hp-newsletter-title{font-size:26px}
}
/* ═══════════════════════════════════════════════════════════════
10. CTA BAND — overrides for richer CTA
═══════════════════════════════════════════════════════════════ */
.cta-band{
position:relative;overflow:hidden;
}
.cta-band::before{
content:'';position:absolute;inset:0;
background:
radial-gradient(ellipse 50% 60% at 80% 0%,rgba(46,155,101,.12) 0%,transparent 60%),
radial-gradient(ellipse 40% 60% at 10% 100%,rgba(19,79,51,.07) 0%,transparent 60%);
pointer-events:none;
}
.cta-band > *{position:relative;z-index:1}
.cta-eyebrow{
display:inline-block;font-size:10px;font-weight:700;letter-spacing:.26em;
text-transform:uppercase;color:var(--gold-d);margin-bottom:14px;
}
.cta-actions{
display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;
}
.cta-band .btn-wh{display:inline-flex;align-items:center;gap:10px}
.cta-band .btn-wh svg{width:14px;height:14px;fill:none;transition:transform .25s}
.cta-band .btn-wh:hover svg{transform:translateX(4px)}
.btn-wh-ghost{
display:inline-flex;align-items:center;justify-content:center;
padding:16px 32px;
background:transparent;color:var(--wine-d);
font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
border:1px solid rgba(13,92,53,.38);border-radius:100px;
text-decoration:none;
transition:background .25s,border-color .25s,transform .25s;
}
.btn-wh-ghost:hover{
background:rgba(13,92,53,.07);border-color:var(--wine);transform:translateY(-3px);
}
/* ═══════════════════════════════════════════════════════════════
11. QUICK-VIEW MODAL
═══════════════════════════════════════════════════════════════ */
.hp-qv{
position:fixed;inset:0;z-index:1100;
display:flex;align-items:center;justify-content:center;padding:20px;
visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;
}
.hp-qv.is-open{visibility:visible;opacity:1}
.hp-qv-backdrop{
position:absolute;inset:0;
background:rgba(7,26,16,.78);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hp-qv-card{
position:relative;z-index:1;
display:grid;grid-template-columns:1fr 1fr;
width:min(960px,100%);max-height:90vh;overflow:auto;
background:#fff;border-radius:20px;
box-shadow:0 30px 80px rgba(0,0,0,.4);
transform:translateY(20px) scale(.96);
transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.hp-qv.is-open .hp-qv-card{transform:none}
.hp-qv-close{
position:absolute;top:14px;right:14px;z-index:2;
width:38px;height:38px;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.96);border:1px solid var(--border);
display:grid;place-items:center;color:#1A1A2E;
transition:background .2s,color .2s,transform .2s;
}
.hp-qv-close svg{width:16px;height:16px;fill:none}
.hp-qv-close:hover{background:var(--wine);color:#fff;transform:rotate(90deg)}
.hp-qv-img{
background:#f5eee8;overflow:hidden;position:relative;
display:flex;align-items:stretch;justify-content:center;
}
/* ── Slider ── */
.hp-qv-slider{
position:relative;width:100%;height:100%;
overflow:hidden;
display:flex;align-items:stretch;justify-content:center;
touch-action:pan-y;user-select:none;
}
.hp-qv-track{
display:flex;width:100%;height:100%;
transition:transform .55s cubic-bezier(.22,1,.36,1);
will-change:transform;
}
.hp-qv-slide{
flex:0 0 100%;width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
background:#f5eee8;
}
.hp-qv-slide img{
width:100%;height:100%;object-fit:cover;display:block;
min-height:340px;
pointer-events:none;
}
/* ── Arrow buttons ── */
.hp-qv-arr{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:42px;height:42px;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.6);
color:#1A1A2E;display:grid;place-items:center;
box-shadow:0 6px 18px rgba(0,0,0,.18);
transition:background .22s,color .22s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,opacity .25s;
opacity:0;
}
.hp-qv-arr svg{width:18px;height:18px;fill:none}
.hp-qv-arr--prev{left:14px}
.hp-qv-arr--next{right:14px}
.hp-qv-slider:hover .hp-qv-arr,
.hp-qv-arr:focus-visible{opacity:1}
.hp-qv-arr:hover{
background:var(--wine,#7a1f2b);color:#fff;border-color:var(--wine,#7a1f2b);
transform:translateY(-50%) scale(1.08);
box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.hp-qv-arr:disabled,
.hp-qv-arr[aria-hidden="true"]{display:none}
/* ── Image counter ── */
.hp-qv-count{
position:absolute;top:14px;left:14px;z-index:3;
padding:5px 11px;border-radius:100px;
background:rgba(7,26,16,.7);color:#fff;
font-size:10.5px;font-weight:600;letter-spacing:.12em;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
pointer-events:none;
}
.hp-qv-count[aria-hidden="true"]{display:none}
/* ── Dot indicators ── */
.hp-qv-dots{
position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
display:flex;align-items:center;gap:7px;
padding:7px 11px;border-radius:100px;
background:rgba(7,26,16,.55);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hp-qv-dots[aria-hidden="true"]{display:none}
.hp-qv-dot{
width:7px;height:7px;border-radius:50%;
background:rgba(255,255,255,.5);border:0;padding:0;cursor:pointer;
transition:background .25s,width .3s cubic-bezier(.22,1,.36,1);
}
.hp-qv-dot:hover{background:rgba(255,255,255,.85)}
.hp-qv-dot.is-active{width:22px;border-radius:100px;background:var(--gold,#c9a96b)}
.hp-qv-body{
padding:40px 36px;display:flex;flex-direction:column;gap:8px;
}
.hp-qv-cat{
font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);
}
.hp-qv-name{
font-family:'Cormorant Garamond',serif;font-weight:400;
font-size:clamp(22px,2.6vw,32px);line-height:1.15;color:#1A1A2E;
margin:6px 0 4px;
}
.hp-qv-sub{font-size:13.5px;color:var(--muted);margin-bottom:8px}
.hp-qv-price{
font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:500;
color:var(--wine);margin:6px 0 10px;
}
.hp-qv-desc{font-size:13.5px;color:var(--muted);line-height:1.7;margin-bottom:18px}
.hp-qv-actions{display:flex;gap:10px;flex-wrap:wrap}
.hp-qv-actions .hp-btn-gold,
.hp-qv-actions .hp-btn-ghost{padding:13px 22px;font-size:11px;letter-spacing:.14em}
.hp-qv-actions .hp-btn-ghost{
color:var(--ink);border-color:var(--border);background:#fff;
}
.hp-qv-actions .hp-btn-ghost svg{width:14px;height:14px;fill:none;margin-right:6px}
.hp-qv-actions .hp-btn-ghost:hover{
background:var(--cream);border-color:var(--wine);color:var(--wine);transform:translateY(-2px);
}
body.hp-modal-open{overflow:hidden}
/* ═══════════════════════════════════════════════════════════════
12. INSTAGRAM LIGHTBOX
═══════════════════════════════════════════════════════════════ */
.hp-lb{
position:fixed;inset:0;z-index:1100;
display:flex;align-items:center;justify-content:center;
visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;
}
.hp-lb.is-open{visibility:visible;opacity:1}
.hp-lb-backdrop{
position:absolute;inset:0;
background:rgba(7,26,16,.92);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hp-lb-stage{
position:relative;z-index:1;
width:min(720px,90vw);max-height:80vh;
display:flex;align-items:center;justify-content:center;
transform:scale(.92);transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.hp-lb.is-open .hp-lb-stage{transform:none}
.hp-lb-stage img{
max-width:100%;max-height:80vh;
border-radius:14px;
box-shadow:0 30px 80px rgba(0,0,0,.5);
display:block;
}
.hp-lb-counter{
position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);
font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(255,255,255,.7);
}
.hp-lb-close{
position:absolute;top:18px;right:18px;z-index:2;
width:42px;height:42px;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
color:#fff;display:grid;place-items:center;
transition:background .2s,transform .2s;
}
.hp-lb-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.hp-lb-close svg{width:18px;height:18px;fill:none}
.hp-lb-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:50px;height:50px;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
color:#fff;display:grid;place-items:center;
transition:background .2s,transform .2s;
}
.hp-lb-nav:hover{background:var(--wine);border-color:var(--wine);transform:translateY(-50%) scale(1.06)}
.hp-lb-nav svg{width:20px;height:20px;fill:none}
.hp-lb-nav--prev{left:24px}
.hp-lb-nav--next{right:24px}
/* ═══════════════════════════════════════════════════════════════
13. TOAST
═══════════════════════════════════════════════════════════════ */
.hp-toast{
position:fixed;left:50%;bottom:30px;transform:translate(-50%,30px);
z-index:1200;
padding:13px 20px;border-radius:100px;
background:var(--ink);color:#fff;
font-size:13px;font-weight:500;letter-spacing:.02em;
box-shadow:0 14px 36px rgba(0,0,0,.32);
display:inline-flex;align-items:center;gap:10px;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1),visibility .3s;
max-width:calc(100% - 40px);
}
.hp-toast.is-shown{
opacity:1;visibility:visible;transform:translate(-50%,0);
}
.hp-toast::before{
content:'';width:9px;height:9px;border-radius:50%;background:var(--gold-l);flex-shrink:0;
box-shadow:0 0 0 4px rgba(46,155,101,.22);
transition:background .2s,box-shadow .2s;
}
/* Variant accents — keeps the same dark pill, recolours the status dot */
.hp-toast--success::before{
background:#2EBD78;box-shadow:0 0 0 4px rgba(46,189,120,.22);
}
.hp-toast--error::before{
background:#E0573B;box-shadow:0 0 0 4px rgba(224,87,59,.22);
}
.hp-toast--info::before{
background:#C79A53;box-shadow:0 0 0 4px rgba(199,154,83,.22);
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE — modal + lightbox + new bits
═══════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
.hp-prod-filters{margin-bottom:24px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
-webkit-overflow-scrolling:touch;
mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
}
.hp-filter-pill{flex-shrink:0}
}
@media(max-width:900px){
.hp-qv-card{grid-template-columns:1fr;max-width:520px}
.hp-qv-slide img{min-height:280px;max-height:360px}
.hp-qv-body{padding:28px 24px}
.hp-bridal-mini{gap:14px;padding:12px 18px}
.hp-bridal-mini-item strong{font-size:18px}
.hp-bridal-mini-sep{height:22px}
.cta-actions{flex-direction:column;width:100%;align-items:stretch}
.cta-actions a{width:100%;max-width:340px;margin-inline:auto}
}
@media(max-width:600px){
.hp-prod-filters{gap:8px;margin-bottom:18px}
.hp-filter-pill{padding:8px 14px;font-size:11px;gap:6px}
.hp-filter-count{font-size:9px;min-width:18px;height:16px}
.hp-prod-foot{padding-top:4px}
.hp-prod-add{width:30px;height:30px}
.hp-prod-add svg{width:12px;height:12px}
.hp-prod-qty{height:30px;padding:2px}
.hp-qty-btn{width:24px;height:24px}
.hp-qty-btn svg{width:10px;height:10px}
.hp-prod-qty .hp-qty-num{min-width:20px;font-size:11.5px}
.hp-testi-nav{width:38px;height:38px}
.hp-testi-nav svg{width:14px;height:14px}
.hp-testi-nav--prev{left:8px}
.hp-testi-nav--next{right:8px}
.hp-bridal-mini{margin-top:24px;padding:10px 14px;gap:10px}
.hp-bridal-mini-sep{display:none}
.hp-bridal-mini-item{flex-direction:row;gap:8px;align-items:baseline}
.hp-bridal-mini-item strong{font-size:16px}
.hp-bridal-mini-item span{margin-top:0;font-size:9.5px;letter-spacing:.14em}
.hp-qv{padding:0}
.hp-qv-card{
max-height:100vh;height:100vh;width:100%;
border-radius:0;
}
.hp-qv-slide img{min-height:240px;max-height:300px}
.hp-qv-body{padding:22px 20px}
.hp-qv-actions{flex-direction:column;width:100%}
.hp-qv-actions .hp-btn-gold,
.hp-qv-actions .hp-btn-ghost{width:100%;justify-content:center}
.hp-qv-arr{width:36px;height:36px;opacity:1}
.hp-qv-arr svg{width:15px;height:15px}
.hp-qv-arr--prev{left:10px}
.hp-qv-arr--next{right:10px}
.hp-qv-dots{bottom:10px;padding:6px 10px;gap:6px}
.hp-qv-dot{width:6px;height:6px}
.hp-qv-dot.is-active{width:18px}
.hp-qv-count{top:10px;left:10px;font-size:10px;padding:4px 9px}
.hp-lb-nav{width:40px;height:40px}
.hp-lb-nav--prev{left:8px}
.hp-lb-nav--next{right:8px}
.hp-lb-close{top:10px;right:10px;width:36px;height:36px}
.hp-toast{font-size:12px;padding:10px 16px}
}
@media(max-width:420px){
.cta-band h2{font-size:28px}
.cta-eyebrow{font-size:9px;letter-spacing:.2em}
.hp-newsletter-title{font-size:24px}
}
/* ═══════════════════════════════════════════════════════════════
14. STYLE FINDER QUIZ — multi-step interactive picker
═══════════════════════════════════════════════════════════════ */
.hp-style{background:var(--cream);position:relative}
.hp-style::before{
content:'';position:absolute;inset:0;
background:
radial-gradient(ellipse 40% 50% at 100% 0%, rgba(46,155,101,.07) 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 0% 100%, rgba(232,196,107,.06) 0%, transparent 60%);
pointer-events:none;
}
.hp-style > .sec-in{position:relative;z-index:1}
.hp-style-card{
position:relative;
max-width:1080px;margin:0 auto;
background:linear-gradient(140deg,#fff 0%,#fbfdfb 100%);
border:1px solid var(--border);border-radius:24px;
padding:48px 48px 36px;
box-shadow:0 20px 60px rgba(8,6,15,.07);
overflow:hidden;
}
/* Progress */
.hp-style-progress{
position:relative;height:48px;margin-bottom:36px;
}
.hp-style-progress-fill{
position:absolute;left:0;right:0;top:23px;height:2px;
background:var(--border);border-radius:2px;
overflow:hidden;
}
.hp-style-progress-fill::after{
content:'';position:absolute;left:0;top:0;bottom:0;
width:0%;
background:linear-gradient(90deg,var(--gold-l),var(--gold));
transition:width .55s var(--ease-out-quint);
}
.hp-style-card[data-quiz-stage="0"] .hp-style-progress-fill::after{width:12%}
.hp-style-card[data-quiz-stage="1"] .hp-style-progress-fill::after{width:42%}
.hp-style-card[data-quiz-stage="2"] .hp-style-progress-fill::after{width:72%}
.hp-style-card[data-quiz-stage="3"] .hp-style-progress-fill::after{width:100%}
.hp-style-steps{
position:relative;display:flex;justify-content:space-between;
align-items:flex-start;
}
.hp-style-step{
display:flex;flex-direction:column;align-items:center;gap:8px;
font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);background:#fff;padding:0 6px;
transition:color .35s;
}
.hp-style-step i{
width:32px;height:32px;border-radius:50%;
display:grid;place-items:center;
background:#fff;border:1.5px solid var(--border);
font-family:'Cormorant Garamond',serif;font-style:normal;
font-size:14px;font-weight:500;color:var(--muted);
transition:all .35s var(--ease-out-back);
}
.hp-style-step b{font-weight:600}
.hp-style-step.is-done i,
.hp-style-step.is-active i{
background:linear-gradient(135deg,var(--gold-l),var(--gold));
border-color:transparent;color:#fff;
box-shadow:0 6px 18px rgba(46,155,101,.3);
}
.hp-style-step.is-active{color:var(--ink)}
.hp-style-step.is-active i{transform:scale(1.08)}
.hp-style-step.is-done{color:var(--wine)}
/* Stages */
.hp-style-stages{position:relative;min-height:220px}
.hp-style-stage{
position:absolute;inset:0;
opacity:0;visibility:hidden;
transform:translateX(36px);
transition:opacity .45s,transform .45s var(--ease-out-quint),visibility .45s;
pointer-events:none;
}
.hp-style-stage.is-current{
opacity:1;visibility:visible;transform:none;pointer-events:auto;
}
.hp-style-stage.is-prev{transform:translateX(-36px)}
/* The result stage flows in normal layout so the card hugs its content
instead of leaving dead space below the buttons. */
.hp-style-card[data-quiz-stage="3"] .hp-style-stages{min-height:0}
.hp-style-card[data-quiz-stage="3"] .hp-style-stage[data-stage="3"]{position:relative;inset:auto}
.hp-style-q{
font-family:'Cormorant Garamond',serif;font-weight:400;
font-size:clamp(22px,2.4vw,32px);line-height:1.2;
color:#1A1A2E;text-align:center;margin-bottom:28px;
}
.hp-style-opts{
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.hp-style-opt{
position:relative;
display:flex;flex-direction:column;align-items:center;gap:10px;
padding:24px 16px 20px;cursor:pointer;
background:#fff;border:1.5px solid var(--border);border-radius:18px;
font-family:'Jost',sans-serif;text-align:center;
transition:transform .3s var(--ease-out-back),border-color .3s,background .3s,box-shadow .3s;
}
.hp-style-opt::before{
content:'';position:absolute;inset:0;border-radius:18px;
background:linear-gradient(135deg,rgba(46,155,101,.04),rgba(232,196,107,.04));
opacity:0;transition:opacity .3s;
pointer-events:none;
}
.hp-style-opt:hover{
transform:translateY(-4px);
border-color:rgba(46,155,101,.4);
box-shadow:0 12px 28px rgba(8,6,15,.08);
}
.hp-style-opt:hover::before{opacity:1}
.hp-style-opt.is-selected{
border-color:var(--gold);
background:linear-gradient(135deg,#fff 0%,#fbfdfb 100%);
box-shadow:0 0 0 3px rgba(46,155,101,.18),0 14px 30px rgba(8,6,15,.1);
transform:translateY(-3px);
}
.hp-style-opt.is-selected::after{
content:'';position:absolute;top:10px;right:10px;
width:22px;height:22px;border-radius:50%;
background:linear-gradient(135deg,var(--gold-l),var(--gold));
background-image:url("data:image/svg+xml;utf8,");
background-size:14px 14px;background-position:center;background-repeat:no-repeat;
background-color:var(--gold);
animation:hp-style-pop .35s var(--ease-out-back);
}
@keyframes hp-style-pop{
0%{transform:scale(0)}
60%{transform:scale(1.2)}
100%{transform:scale(1)}
}
.hp-style-opt-ico{
width:48px;height:48px;border-radius:50%;
background:var(--cream);
display:grid;place-items:center;
color:var(--wine);
transition:background .3s,color .3s,transform .35s var(--ease-out-back);
}
.hp-style-opt-ico svg{width:22px;height:22px;fill:none}
.hp-style-opt:hover .hp-style-opt-ico{
background:var(--wine);color:#fff;transform:rotate(-6deg) scale(1.06);
}
.hp-style-opt.is-selected .hp-style-opt-ico{
background:linear-gradient(135deg,var(--gold-l),var(--gold));color:#fff;
}
/* Swatch (metal) variant */
.hp-style-swatch{
width:48px;height:48px;border-radius:50%;
background:radial-gradient(circle at 30% 30%,var(--sw1) 0%,var(--sw2) 100%);
box-shadow:inset 0 -3px 8px rgba(0,0,0,.18),inset 0 3px 6px rgba(255,255,255,.6),0 4px 12px rgba(0,0,0,.1);
transition:transform .35s var(--ease-out-back);
}
.hp-style-opt--swatch:hover .hp-style-swatch{transform:scale(1.08) rotate(-8deg)}
.hp-style-opt-t{
font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;
color:#1A1A2E;line-height:1.1;position:relative;
}
.hp-style-opt-d{
font-size:11.5px;color:var(--muted);line-height:1.4;position:relative;
}
/* Result */
.hp-style-result{padding:8px 0}
.hp-style-result-grid{
display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center;
animation:hp-style-result-in .6s var(--ease-out-quint) both;
}
@keyframes hp-style-result-in{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:none}
}
.hp-style-result-img{
position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;
background:#f5eee8;
box-shadow:0 18px 40px rgba(8,6,15,.14);
}
.hp-style-result-img img{
width:100%;height:100%;object-fit:cover;
animation:hp-style-img-in .9s var(--ease-out-quint) both;
}
@keyframes hp-style-img-in{
from{transform:scale(1.1);filter:brightness(.85)}
to{transform:scale(1);filter:brightness(1)}
}
.hp-style-result-shimmer{
position:absolute;inset:-50% -50%;
background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);
transform:translateX(-100%);
animation:hp-style-shimmer 2.4s 1s var(--ease-out-quint);
pointer-events:none;
}
@keyframes hp-style-shimmer{to{transform:translateX(100%)}}
.hp-style-result-eyebrow{color:var(--gold);margin-bottom:10px}
.hp-style-result-name{
font-family:'Cormorant Garamond',serif;font-weight:400;
font-size:clamp(24px,3vw,38px);line-height:1.1;color:#1A1A2E;
margin-bottom:8px;
}
.hp-style-result-sub{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.hp-style-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.hp-style-tag{
font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
padding:6px 12px;border-radius:100px;
background:rgba(46,155,101,.08);color:var(--wine);
border:1px solid rgba(46,155,101,.18);
animation:hp-style-tag-in .4s var(--ease-out-back) both;
}
.hp-style-tag:nth-child(2){animation-delay:.1s}
.hp-style-tag:nth-child(3){animation-delay:.2s}
@keyframes hp-style-tag-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hp-style-result-desc{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:15px;line-height:1.6;color:#1A1A2E;
margin-bottom:22px;
}
.hp-style-result-actions{display:flex;gap:12px;flex-wrap:wrap}
.hp-btn-ghost--dark{
display:inline-flex;align-items:center;gap:8px;
padding:14px 24px;cursor:pointer;
background:#fff;color:var(--ink);
font-family:'Jost',sans-serif;
font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
border:1px solid var(--border);border-radius:100px;
transition:background .25s,border-color .25s,color .25s,transform .25s;
}
.hp-btn-ghost--dark svg{width:14px;height:14px;fill:none}
.hp-btn-ghost--dark:hover{
background:var(--cream);border-color:var(--wine);color:var(--wine);transform:translateY(-2px);
}
/* Quiz nav */
.hp-style-nav{
display:flex;align-items:center;justify-content:space-between;gap:18px;
margin-top:32px;padding-top:24px;
border-top:1px solid var(--border);
}
.hp-style-back{
display:inline-flex;align-items:center;gap:8px;cursor:pointer;
background:none;border:none;
font-family:'Jost',sans-serif;
font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink);padding:10px 16px;border-radius:100px;
transition:background .2s,color .2s,opacity .2s;
}
.hp-style-back:hover:not(:disabled){background:var(--cream);color:var(--wine)}
.hp-style-back svg{width:14px;height:14px;fill:none}
.hp-style-back:disabled{opacity:.35;cursor:not-allowed}
.hp-style-hint{
font-size:11.5px;color:var(--muted);letter-spacing:.04em;
}
/* ═══════════════════════════════════════════════════════════════
15. WHAT WE OFFER — interactive tabbed showcase
═══════════════════════════════════════════════════════════════ */
.hp-offer{
background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);
position:relative;overflow:hidden;
}
.hp-offer::before{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 60% 60% at 50% 0%,rgba(232,196,107,.1) 0%,transparent 60%);
pointer-events:none;
}
.hp-offer > .sec-in{position:relative;z-index:1}
.hp-offer-stage{
display:grid;grid-template-columns:280px 1fr;gap:48px;
background:#fff;border:1px solid var(--border);border-radius:24px;
padding:32px;
box-shadow:0 18px 50px rgba(8,6,15,.06);
overflow:hidden;position:relative;
}
/* Tabs */
.hp-offer-tabs{
display:flex;flex-direction:column;gap:8px;
}
.hp-offer-tab{
position:relative;
display:flex;flex-direction:column;align-items:flex-start;gap:2px;
padding:14px 18px 14px 24px;cursor:pointer;
background:transparent;border:1px solid transparent;border-radius:14px;
font-family:'Jost',sans-serif;text-align:left;
transition:background .3s,border-color .3s,transform .3s;
}
.hp-offer-tab::before{
content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);
width:3px;height:0;background:linear-gradient(180deg,var(--gold-l),var(--gold));
border-radius:3px;transition:height .35s var(--ease-out-back);
}
.hp-offer-tab-dot{
position:absolute;left:0;top:50%;width:8px;height:8px;
transform:translate(-50%,-50%);border-radius:50%;
background:var(--offer-color);
box-shadow:0 0 0 4px var(--offer-glow),0 0 12px var(--offer-glow);
opacity:.5;transition:opacity .3s,transform .3s var(--ease-out-back);
}
.hp-offer-tab:hover{
background:var(--cream);
transform:translateX(4px);
}
.hp-offer-tab:hover .hp-offer-tab-dot{opacity:1}
.hp-offer-tab.is-active{
background:linear-gradient(135deg,#fff 0%,var(--cream) 100%);
border-color:rgba(232,196,107,.32);
}
.hp-offer-tab.is-active::before{height:24px}
.hp-offer-tab.is-active .hp-offer-tab-dot{opacity:1;transform:translate(-50%,-50%) scale(1.3)}
.hp-offer-tab-name{
font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;
color:#1A1A2E;line-height:1.1;
}
.hp-offer-tab-tag{
font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--muted);transition:color .3s;
}
.hp-offer-tab.is-active .hp-offer-tab-tag{color:var(--wine)}
/* Show area */
.hp-offer-show{
display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
min-height:380px;
}
.hp-offer-images{
position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;
background:radial-gradient(circle at 50% 40%,var(--cream) 0%,#fff 70%);
box-shadow:inset 0 0 0 1px var(--border);
}
.hp-offer-img{
position:absolute;inset:0;
opacity:0;visibility:hidden;
transform:scale(.94);filter:blur(6px);
transition:opacity .6s,transform .8s var(--ease-out-quint),filter .6s,visibility .6s;
}
.hp-offer-img.is-active{
opacity:1;visibility:visible;transform:scale(1);filter:blur(0);
}
.hp-offer-img img{
width:100%;height:100%;object-fit:cover;
display:block;
transition:transform .8s var(--ease-soft);
}
.hp-offer-img.is-active:hover img{transform:scale(1.05)}
.hp-offer-img-glow{
position:absolute;inset:0;
background:radial-gradient(circle at 30% 30%,var(--offer-glow) 0%,transparent 60%);
mix-blend-mode:screen;opacity:.7;
pointer-events:none;
}
/* Info panels */
.hp-offer-info{position:relative;min-height:300px}
.hp-offer-panel{
position:absolute;inset:0;
opacity:0;visibility:hidden;
transform:translateY(20px);
transition:opacity .5s,transform .55s var(--ease-out-quint),visibility .5s;
display:flex;flex-direction:column;justify-content:center;
}
.hp-offer-panel.is-active{
opacity:1;visibility:visible;transform:none;
}
.hp-offer-tag{
display:inline-block;align-self:flex-start;
font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
padding:6px 14px;border-radius:100px;
background:rgba(232,196,107,.16);color:var(--wine);
border:1px solid rgba(232,196,107,.34);
margin-bottom:14px;
}
.hp-offer-name{
font-family:'Cormorant Garamond',serif;font-weight:400;
font-size:clamp(28px,3.6vw,46px);line-height:1.05;
color:#1A1A2E;margin-bottom:14px;letter-spacing:-.005em;
}
.hp-offer-desc-txt{
font-size:14.5px;line-height:1.7;color:var(--muted);
margin-bottom:24px;max-width:480px;
}
.hp-offer-meta{
display:grid;grid-template-columns:1fr 1fr;gap:14px;
margin-bottom:24px;max-width:380px;
}
.hp-offer-meta-item{
padding:14px 18px;
background:var(--cream);border-radius:12px;
border:1px solid var(--border);
display:flex;flex-direction:column;gap:4px;
}
.hp-offer-meta-lbl{
font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);
}
.hp-offer-meta-val{
font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;
color:#1A1A2E;
}
.hp-offer-cta{
display:inline-flex;align-self:flex-start;align-items:center;gap:10px;
font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--wine);text-decoration:none;
padding-bottom:6px;
border-bottom:1px solid var(--border);
transition:gap .3s,color .3s,border-color .3s;
}
.hp-offer-cta svg{width:14px;height:14px;transition:transform .3s}
.hp-offer-cta:hover{gap:14px;color:var(--gold);border-color:var(--gold)}
.hp-offer-cta:hover svg{transform:translateX(4px)}
/* ═══════════════════════════════════════════════════════════════
16. PRESS / AS FEATURED IN
═══════════════════════════════════════════════════════════════ */
.hp-press{
background:var(--navy);color:#fff;
padding:80px 80px;position:relative;overflow:hidden;
}
.hp-press::before{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(46,155,101,.1) 0%,transparent 60%);
pointer-events:none;
}
.hp-press-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1;text-align:center}
.hp-press-hd{
display:flex;align-items:center;justify-content:center;gap:18px;
margin-bottom:36px;
}
.hp-press-line{
flex:1;max-width:120px;height:1px;
background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);
}
.hp-press-eyebrow{
font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
color:var(--gold-l);white-space:nowrap;
}
.hp-press-strip{
display:flex;align-items:center;justify-content:center;
gap:48px;flex-wrap:wrap;
padding:18px 0;margin-bottom:32px;
}
.hp-press-item{
background:none;border:none;cursor:pointer;
padding:14px 8px;color:rgba(255,255,255,.55);
font-size:clamp(24px,3vw,40px);
text-transform:uppercase;
transition:color .35s,transform .35s var(--ease-out-back),text-shadow .4s;
}
.hp-press-name{display:inline-block;transition:transform .4s var(--ease-out-back)}
.hp-press-item:hover{
color:#fff;
text-shadow:0 0 28px rgba(232,196,107,.4);
transform:translateY(-3px);
}
.hp-press-item:hover .hp-press-name{transform:scale(1.04)}
.hp-press-item.is-active{
color:#fff;
text-shadow:0 0 28px rgba(232,196,107,.5);
}
.hp-press-quote-wrap{
max-width:680px;margin:0 auto;
min-height:60px;
display:flex;align-items:center;justify-content:center;
}
.hp-press-quote{
font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
font-size:clamp(18px,2.2vw,26px);line-height:1.5;
color:rgba(255,255,255,.85);
transition:opacity .35s,transform .45s var(--ease-out-quint);
}
.hp-press-quote.is-changing{opacity:0;transform:translateY(8px)}
/* ═══════════════════════════════════════════════════════════════
17. STATS COUNT-UP — small layout tweak for new structure
═══════════════════════════════════════════════════════════════ */
.hp-stat-num{
display:inline-flex;align-items:baseline;
white-space:nowrap;
}
.hp-stat-suffix{
display:inline-block;
background:linear-gradient(135deg,var(--gold-l) 0%,#fff 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE — new sections
═══════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
.hp-style-card{padding:40px 36px 28px}
.hp-style-opts{grid-template-columns:repeat(4,1fr);gap:12px}
.hp-style-opt{padding:20px 12px 16px}
.hp-offer-stage{grid-template-columns:240px 1fr;gap:32px;padding:24px}
.hp-offer-show{grid-template-columns:1fr 1fr;gap:28px}
.hp-offer-name{font-size:36px}
.hp-press{padding:64px 40px}
.hp-press-strip{gap:36px}
}
@media(max-width:900px){
/* Style quiz */
.hp-style-card{padding:32px 24px 24px;border-radius:20px}
.hp-style-progress{height:28px;margin-bottom:24px}
.hp-style-progress-fill{top:13px;height:2px}
.hp-style-steps{gap:6px}
.hp-style-step{font-size:9.5px;letter-spacing:.1em;gap:4px}
.hp-style-step b{display:none}
.hp-style-step i{width:28px;height:28px;font-size:12px}
.hp-style-step.is-active b{display:inline;margin-top:2px}
.hp-style-stages{min-height:380px}
.hp-style-q{font-size:24px;margin-bottom:22px}
.hp-style-opts{grid-template-columns:repeat(2,1fr);gap:12px}
.hp-style-result-grid{grid-template-columns:1fr;gap:20px;text-align:center}
.hp-style-result-img{max-width:260px;margin:0 auto}
.hp-style-tags,
.hp-style-result-actions{justify-content:center}
.hp-style-result-actions{flex-direction:row}
/* What We Offer */
.hp-offer-stage{
grid-template-columns:1fr;gap:24px;padding:20px;
}
.hp-offer-tabs{
flex-direction:row;gap:8px;
overflow-x:auto;padding:4px 4px 12px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
}
.hp-offer-tabs::-webkit-scrollbar{display:none}
.hp-offer-tab{
flex-shrink:0;flex-direction:row;align-items:center;gap:8px;
padding:10px 16px 10px 24px;
}
.hp-offer-tab::before{left:6px;height:0;width:3px}
.hp-offer-tab.is-active::before{height:18px}
.hp-offer-tab-name{font-size:15px}
.hp-offer-tab-tag{font-size:9px}
.hp-offer-show{grid-template-columns:1fr;gap:24px;min-height:0}
.hp-offer-images{max-width:420px;margin:0 auto}
.hp-offer-info{min-height:340px;text-align:center}
.hp-offer-panel{align-items:center}
.hp-offer-tag,
.hp-offer-cta{align-self:center}
.hp-offer-meta{margin-left:auto;margin-right:auto}
.hp-offer-desc-txt{margin-left:auto;margin-right:auto}
/* Press */
.hp-press{padding:56px 28px}
.hp-press-strip{gap:24px 32px}
}
@media(max-width:600px){
.hp-style{padding:48px 22px}
.hp-style-card{padding:24px 18px 18px}
.hp-style-progress{margin-bottom:22px}
.hp-style-stages{min-height:420px}
.hp-style-result-img{max-width:240px}
.hp-style-opts{grid-template-columns:repeat(2,1fr);gap:10px}
.hp-style-opt{padding:16px 10px 14px;border-radius:14px}
.hp-style-opt-ico,.hp-style-swatch{width:40px;height:40px}
.hp-style-opt-ico svg{width:18px;height:18px}
.hp-style-opt-t{font-size:15px}
.hp-style-opt-d{font-size:10.5px}
.hp-style-result-actions{flex-direction:column}
.hp-style-result-actions a,
.hp-style-result-actions button{width:100%;justify-content:center}
.hp-style-nav{margin-top:22px;padding-top:18px}
.hp-style-hint{font-size:10.5px}
.hp-offer-stage{padding:16px;border-radius:18px}
.hp-offer-tab{padding:8px 14px 8px 22px}
.hp-offer-meta{grid-template-columns:1fr 1fr;gap:10px}
.hp-offer-meta-item{padding:10px 14px}
.hp-offer-meta-val{font-size:16px}
.hp-press{padding:48px 18px}
.hp-press-hd{gap:10px;margin-bottom:24px}
.hp-press-line{max-width:60px}
.hp-press-eyebrow{font-size:9.5px;letter-spacing:.24em}
.hp-press-strip{gap:18px 24px;margin-bottom:22px}
.hp-press-item{font-size:20px;padding:8px 4px}
.hp-press-quote{font-size:16px}
}
@media(max-width:420px){
.hp-style-opts{grid-template-columns:1fr 1fr}
.hp-style-q{font-size:22px}
.hp-style-result-img{max-width:220px}
.hp-offer-name{font-size:28px}
.hp-press-item{font-size:17px}
}
/* ═══════════════════════════════════════════════════════════════
Reduced motion
═══════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
.hp-testi-track{animation:none}
.hp-bridal-bg img{transition:none}
.hp-col-card-img img,
.hp-prod-card-img img{transition:none}
.hp-prod-card.filtering-in,
.hp-prod-card.filtering-out{animation:none;transition:none;transform:none}
.hp-news-btn-spin{animation:none}
.hp-prod-add:hover{transform:none}
.hp-qv-card{transition:none;transform:none}
.hp-lb-stage{transition:none;transform:none}
.hp-style-stage,
.hp-offer-img,
.hp-offer-panel,
.hp-style-result-shimmer,
.hp-style-result-grid,
.hp-style-result-img img,
.hp-style-tag{animation:none;transition:opacity .2s}
.hp-press-item:hover{transform:none}
/* Bridal section — keep static, no drifting/breathing/rotating effects */
.hp-spark,
.hp-bridal-halo,
.hp-bridal-flourish-gem,
.hp-bridal-title-shine,
.hp-bridal-title-shine .char,
.hp-btn-gold--pulse::before{animation:none}
.hp-bridal-title-shine,
.hp-bridal-title-shine .char{
-webkit-text-fill-color:#fff;color:#fff;background:none;
}
.hp-btn-gold--pulse::before{display:none}
}
/* ============================================================
ABOUT
============================================================ */
/* ═══════════════════════════════════════════════════════════════
ABOUT US — luxury, motion-rich layout for Beyond Expression.
Reuses the global emerald-gold tokens from style.css and the
shared reveal/lift/tilt utilities from motions.css.
═══════════════════════════════════════════════════════════════ */
:root{
--ab-em: var(--gold);
--ab-em-l: var(--gold-l);
--ab-em-ll: #5DC992;
--ab-em-d: var(--gold-d);
--ab-ink: #08120C;
--ab-cream: #F4FAF6;
--ab-bg-soft: #EEF6F1;
--ab-bg-deep: #051A11;
--ab-line: rgba(27,107,69,.18);
}
/* ═══════════════════════════════════════════════════════════════
PAGE-ABOUT — distinct navbar treatment (separates from home)
═══════════════════════════════════════════════════════════════ */
/* The About page now shares the single light navbar treatment —
no per-page override is needed. */
/* ═══════════════════════════════════════════════════════════════
PRODUCTS PAGE — mirrors the home-page nav behaviour:
• At top: transparent background, near-black text readable on
the light hero (white text would be invisible there).
• Scrolled: inherits the default `.nav.scrolled` frosted-dark
backdrop + white text — same blur as the home page.
═══════════════════════════════════════════════════════════════ */
body.products-page .nav {
--nav-fg: #0F0F0F;
--nav-fg-soft: rgba(15, 15, 15, 0.72);
}
body.products-page .nav.scrolled {
--nav-fg: #F8FCF9;
--nav-fg-soft: rgba(244, 250, 246, 0.78);
}
body.products-page .nav-rule {
background: rgba(15, 15, 15, 0.16);
}
body.products-page .nav.scrolled .nav-rule {
background: rgba(255, 255, 255, 0.14);
}
body.products-page .nav-ico,
body.products-page .nav-signin,
body.products-page .nav-account-btn {
color: #0F0F0F;
}
body.products-page .nav-ico svg,
body.products-page .nav-signin svg,
body.products-page .nav-account-btn svg {
stroke: #0F0F0F;
}
body.products-page .nav.scrolled .nav-ico,
body.products-page .nav.scrolled .nav-signin,
body.products-page .nav.scrolled .nav-account-btn {
color: #F8FCF9;
}
body.products-page .nav.scrolled .nav-ico svg,
body.products-page .nav.scrolled .nav-signin svg,
body.products-page .nav.scrolled .nav-account-btn svg {
stroke: #F8FCF9;
}
/* logo.svg has its "Beyond Expression" text baked in as white-filled
paths, alongside an embedded gem PNG. On the products page's light
hero the white text is invisible — invert the SVG to darken the
text, then overlay the gem region as an unfiltered background-image
so the symbol keeps its original colour. On scroll the nav goes
frosted-dark, so the original white logo is restored.
The gem occupies roughly x: 17–44% of the SVG viewBox; the
horizontal clip-path crops the overlay to that band. */
body.products-page .nav-logo {
position: relative;
}
body.products-page .nav-logo img {
filter: invert(1);
transition: filter .3s ease;
display: block;
}
body.products-page .nav-logo::after {
content: '';
position: absolute;
inset: 0;
background: url('../images/logo.svg') no-repeat center / 100% 100%;
clip-path: inset(0 56.1% 0 17.2%);
pointer-events: none;
transition: opacity .3s ease;
}
body.products-page .nav.scrolled .nav-logo img {
filter: none;
}
body.products-page .nav.scrolled .nav-logo::after {
opacity: 0;
}
/* Account chip — the default avatar gradient uses `--gold` which is
actually emerald green in this project's palette, so it reads as a
dark-green disc on the light at-top nav. Replace the fill with
neutral black + white initial text, and wrap the entire chip
(avatar + name + chevron) in a single pill outline so it sits
cleanly against the transparent at-top nav. Reverts to the default
styling once the nav blurs to its frosted-dark scrolled state. */
body.products-page .nav-account-btn {
padding: 4px 14px 4px 4px;
border: 1.5px solid #0F0F0F;
border-radius: 999px;
background: rgba(255, 255, 255, 0.55);
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.products-page .nav-account-btn:hover,
body.products-page .nav-account.is-open .nav-account-btn {
background: rgba(255, 255, 255, 0.85);
border-color: #0F0F0F;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
transform: translateY(-1px);
}
body.products-page .nav-account-avatar {
background: #0F0F0F;
color: #FFFFFF;
box-shadow: none;
}
body.products-page .nav-account-btn:hover .nav-account-avatar,
body.products-page .nav-account.is-open .nav-account-avatar {
box-shadow: none;
transform: none;
}
/* Restore the default look once the nav blurs to its dark state. */
body.products-page .nav.scrolled .nav-account-btn {
padding: 0;
border: none;
border-radius: 0;
background: none;
box-shadow: none;
transform: none;
}
body.products-page .nav.scrolled .nav-account-avatar {
background: linear-gradient(135deg, var(--gold-l), var(--gold));
color: #04140a;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.9),
0 0 0 1.5px var(--gold),
0 2px 6px rgba(8, 6, 15, 0.18);
}
body.products-page .nav.scrolled .nav-account-btn:hover .nav-account-avatar,
body.products-page .nav.scrolled .nav-account.is-open .nav-account-avatar {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.95),
0 0 0 2px var(--gold-l),
0 3px 10px rgba(27, 107, 69, 0.28);
}
/* ═══════════════════════════════════════════════════════════════
1. HERO — deep emerald, ambient orbs, cursor-follow glow
═══════════════════════════════════════════════════════════════ */
/* Hero shell — minimal, compact, dark emerald */
.ab-hero{
position:relative;
overflow:hidden;
padding:calc(var(--nav-h) + 56px) 32px 88px;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(ellipse 80% 60% at 50% 0%, #0A2716 0%, #061B10 45%, #03120A 100%);
isolation:isolate;
--ab-ease: cubic-bezier(.22,.61,.36,1);
}
/* Hairline edge — quiet handoff into the white philosophy section */
.ab-hero::after{
content:"";
position:absolute; left:50%; bottom:0; transform:translateX(-50%);
width:min(1180px, calc(100% - 64px));
height:1px;
background:linear-gradient(90deg, transparent, rgba(93,201,146,.22), transparent);
}
/* Single soft aura — the only ambient flourish */
.ab-hero-aura{
position:absolute; left:50%; top:50%;
transform:translate(-50%, -50%);
width:min(720px, 86vw); height:min(540px, 60vw);
border-radius:50%;
background:radial-gradient(ellipse at 50% 50%,
rgba(93,201,146,.18) 0%,
rgba(46,155,101,.06) 40%,
transparent 70%);
pointer-events:none; z-index:0;
filter:blur(2px);
}
/* Inner shell */
.ab-hero-inner{
position:relative; z-index:1;
width:100%; max-width:820px;
text-align:center;
display:flex; flex-direction:column; align-items:center;
}
/* Stagger animation primitive — driven by .is-in on the section */
.ab-hero [data-a]{
opacity:0;
transform:translateY(12px);
transition:
opacity .8s var(--ab-ease),
transform .8s var(--ab-ease);
transition-delay:calc((var(--ai, 0)) * 80ms + 60ms);
}
.ab-hero.is-in [data-a]{
opacity:1;
transform:translateY(0);
}
.ab-hero [data-a="1"]{ --ai:0; }
.ab-hero [data-a="2"]{ --ai:1; }
.ab-hero [data-a="3"]{ --ai:2; }
.ab-hero [data-a="4"]{ --ai:4; }
.ab-hero [data-a="5"]{ --ai:5; }
.ab-hero [data-a="6"]{ --ai:6; }
/* Breadcrumb */
.ab-breadcrumb{
display:inline-flex; align-items:center; gap:10px;
font-family:'Jost', sans-serif;
font-size:11px; font-weight:500;
letter-spacing:.22em; text-transform:uppercase;
color:rgba(255,255,255,.45);
margin-bottom:22px;
}
.ab-breadcrumb a{
color:inherit; text-decoration:none;
transition:color .25s var(--ab-ease);
}
.ab-breadcrumb a:hover{ color:var(--ab-em-ll); }
.ab-breadcrumb span{ color:rgba(255,255,255,.25); }
/* Eyebrow with hairline brackets */
.ab-hero-eyebrow{
display:inline-flex; align-items:center; gap:14px;
font-family:'Jost', sans-serif;
font-size:11px; font-weight:600;
letter-spacing:.32em; text-transform:uppercase;
color:var(--ab-em-ll);
margin-bottom:22px;
}
.ab-hero-eyebrow-bar{
display:block; width:36px; height:1px;
background:linear-gradient(90deg, transparent, rgba(93,201,146,.55));
}
.ab-hero-eyebrow-bar:last-child{
background:linear-gradient(90deg, rgba(93,201,146,.55), transparent);
}
/* Title */
.ab-hero-title{
font-family:'Cormorant Garamond', serif;
font-size:clamp(38px, 5vw, 76px);
font-weight:300;
color:#FFFFFF;
line-height:1.04;
letter-spacing:-.012em;
margin:0;
}
.ab-hero-title .ab-line{
display:block;
overflow:hidden; padding-bottom:.06em;
}
.ab-hero-title .ab-line > *{ display:inline-block; }
.ab-hero-title em{
font-style:italic;
font-weight:400;
background:linear-gradient(135deg, var(--ab-em-ll) 0%, var(--ab-em-l) 50%, var(--ab-em) 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
/* Per-line clip reveal layered over the parent's fade */
.ab-hero-title .ab-line{
clip-path:inset(0 0 100% 0);
transition:clip-path 1s var(--ab-ease);
transition-delay:calc((var(--li, 0)) * 110ms + 220ms);
}
.ab-hero-title .ab-line:nth-child(1){ --li:0; }
.ab-hero-title .ab-line:nth-child(2){ --li:1; }
.ab-hero.is-in .ab-hero-title .ab-line{
clip-path:inset(0 0 0 0);
}
/* Hairline rule that scales in horizontally */
.ab-hero-rule{
display:block; height:1px; width:96px;
margin:24px auto 22px;
background:linear-gradient(90deg, transparent, rgba(93,201,146,.55), transparent);
transform-origin:center;
transform:scaleX(0);
opacity:0;
transition:transform .9s var(--ab-ease), opacity .5s var(--ab-ease);
transition-delay:calc((var(--ai, 0)) * 80ms + 60ms);
}
.ab-hero.is-in .ab-hero-rule{
transform:scaleX(1); opacity:1;
}
/* Description */
.ab-hero-desc{
font-family:'Cormorant Garamond', serif;
font-style:italic; font-weight:400;
font-size:clamp(15px, 1.2vw, 18px);
color:rgba(255,255,255,.62);
line-height:1.65;
max-width:520px;
margin:0 0 32px;
}
/* CTAs — one pill primary, one underlined text link */
.ab-hero-actions{
display:inline-flex; align-items:center; gap:24px;
flex-wrap:wrap; justify-content:center;
}
.ab-hero-cta{
display:inline-flex; align-items:center; gap:10px;
font-family:'Jost', sans-serif;
font-size:11px; font-weight:600;
letter-spacing:.22em; text-transform:uppercase;
text-decoration:none; cursor:pointer;
transition:transform .35s var(--ab-ease), color .25s var(--ab-ease), background .25s var(--ab-ease), box-shadow .35s var(--ab-ease);
}
.ab-hero-cta svg{ width:14px; height:14px; transition:transform .35s var(--ab-ease); }
.ab-hero-cta--primary{
padding:13px 26px;
border-radius:999px;
background:linear-gradient(135deg, var(--ab-em-l), var(--ab-em));
color:#0A140E;
box-shadow:0 10px 24px -8px rgba(46,155,101,.45);
}
.ab-hero-cta--primary:hover{
box-shadow:0 14px 30px -8px rgba(46,155,101,.6);
transform:translateY(-2px);
}
.ab-hero-cta--primary:hover svg{ transform:translateX(4px); }
.ab-hero-cta--text{
position:relative; padding:6px 0;
color:rgba(255,255,255,.78);
}
.ab-hero-cta--text::after{
content:""; position:absolute; left:0; right:0; bottom:0;
height:1px; background:rgba(255,255,255,.35);
transform-origin:right center;
transition:transform .45s var(--ab-ease);
}
.ab-hero-cta--text:hover{ color:var(--ab-em-ll); }
.ab-hero-cta--text:hover::after{
background:var(--ab-em-ll);
transform-origin:left center;
animation:abCtaUnderline .7s var(--ab-ease);
}
@keyframes abCtaUnderline{
0% { transform:scaleX(1); transform-origin:right center; }
49% { transform:scaleX(0); transform-origin:right center; }
50% { transform:scaleX(0); transform-origin:left center; }
100% { transform:scaleX(1); transform-origin:left center; }
}
/* ═══════════════════════════════════════════════════════════════
2. PHILOSOPHY
═══════════════════════════════════════════════════════════════ */
.ab-philo{ background:#fff; padding:120px 80px; }
.ab-philo .sec-in{ max-width:1280px; margin:0 auto; }
.ab-philo-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
align-items:center;
}
.ab-philo-text,
.ab-philo-pillars{ min-width:0; }
.ab-philo-text .eyebrow{
font-size:10px; font-weight:700; letter-spacing:.26em;
text-transform:uppercase; color:var(--ab-em-d);
margin-bottom:18px; display:inline-block;
}
.ab-philo-title{
font-family:'Cormorant Garamond', serif;
font-size:clamp(38px, 4.6vw, 64px);
font-weight:300; line-height:1.08;
color:var(--ab-ink);
margin-bottom:28px;
}
.ab-philo-title em{
font-style:italic;
background:linear-gradient(135deg, var(--ab-em-l), var(--ab-em-d));
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.ab-philo-desc{
font-size:15px; color:#475042; line-height:1.85;
margin-bottom:18px; max-width:540px;
}
.ab-philo-link{
display:inline-flex; align-items:center; gap:10px;
margin-top:14px;
font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color:var(--ab-em-d); text-decoration:none;
border-bottom:1px solid var(--ab-em-d); padding-bottom:4px;
}
.ab-philo-link svg{ width:14px; height:14px; transition:transform .3s; }
.ab-philo-link:hover svg{ transform:translateX(6px); }
.ab-philo-pillars{
display:flex; flex-direction:column; gap:18px;
width:100%;
}
.ab-philo-pillar{
position:relative; padding:24px 26px;
min-width:0;
background:linear-gradient(135deg, #FAFDF9 0%, #F1F8F3 100%);
border:1px solid var(--ab-line);
border-radius:18px;
display:grid;
grid-template-columns:46px 1fr;
grid-template-rows:auto auto;
column-gap:18px;
row-gap:6px;
align-items:start;
overflow:hidden;
transition:transform .35s var(--ease-out-quint), box-shadow .35s var(--ease-out-quint), border-color .35s;
}
.ab-pillar-ico{ grid-column:1; grid-row:1 / span 2; align-self:center; }
.ab-philo-pillar .ab-pillar-title{ grid-column:2; grid-row:1; align-self:end; }
.ab-philo-pillar .ab-pillar-desc{ grid-column:2; grid-row:2; align-self:start; }
.ab-philo-pillar::before{
content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
background:linear-gradient(180deg, var(--ab-em-l), var(--ab-em));
transform:scaleY(0); transform-origin:top;
transition:transform .4s var(--ease-out-quint);
}
.ab-philo-pillar:hover{
transform:translateY(-4px);
border-color:rgba(46,155,101,.45);
box-shadow:0 18px 42px rgba(27,107,69,.14);
}
.ab-philo-pillar:hover::before{ transform:scaleY(1); }
.ab-pillar-ico{
width:46px; height:46px; border-radius:14px;
background:rgba(46,155,101,.12);
border:1px solid rgba(46,155,101,.22);
display:grid; place-items:center;
color:var(--ab-em-d);
transition:all .35s;
}
.ab-philo-pillar:hover .ab-pillar-ico{
background:linear-gradient(135deg, var(--ab-em-l), var(--ab-em));
color:#fff; border-color:transparent;
transform:rotate(-6deg) scale(1.05);
}
.ab-pillar-ico svg{ width:22px; height:22px; }
.ab-pillar-title{
font-family:'Cormorant Garamond',serif;
font-size:21px; font-weight:500; color:var(--ab-ink);
margin-bottom:4px;
}
.ab-pillar-desc{ font-size:13px; color:#647062; line-height:1.6; }
/* ═══════════════════════════════════════════════════════════════
3. JOURNEY / TIMELINE
═══════════════════════════════════════════════════════════════ */
.ab-journey{
background:linear-gradient(180deg, #F4FAF6 0%, #EAF5EE 100%);
padding:120px 80px;
position:relative; overflow:hidden;
}
.ab-journey .sec-in{ max-width:1180px; margin:0 auto; }
.ab-journey .sec-hd{ text-align:center; margin-bottom:80px; }
.ab-journey .sec-hd .eyebrow{
font-size:10px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
color:var(--ab-em-d); margin-bottom:14px; display:inline-block;
}
.ab-journey .sec-title{
font-family:'Cormorant Garamond',serif; font-weight:300;
font-size:clamp(40px,5vw,64px); color:var(--ab-ink); line-height:1.1; margin-bottom:14px;
}
.ab-journey .sec-title em{
font-style:italic;
background:linear-gradient(135deg,var(--ab-em-l),var(--ab-em-d));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ab-journey .sec-desc{
font-size:15px; color:#647062; line-height:1.8;
max-width:560px; margin:0 auto;
}
.ab-timeline{ position:relative; padding:20px 0; }
/* Vertical rail */
.ab-timeline-rail{
position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%);
width:2px;
background:linear-gradient(180deg, transparent 0%, var(--ab-line) 8%, var(--ab-line) 92%, transparent 100%);
z-index:0;
}
.ab-timeline-progress{
position:absolute; top:0; left:0; right:0;
height:0;
background:linear-gradient(180deg, var(--ab-em-ll), var(--ab-em-d));
box-shadow:0 0 14px rgba(46,155,101,.5);
transition:height .15s linear;
}
.ab-tl-row{
position:relative;
display:grid;
grid-template-columns:1fr 80px 1fr;
align-items:center;
margin-bottom:80px;
}
.ab-tl-row:last-child{ margin-bottom:0; }
/* Marker on the rail */
.ab-tl-marker{
position:relative;
grid-column:2;
width:80px; height:80px;
display:grid; place-items:center;
z-index:2;
}
.ab-tl-dot{
width:18px; height:18px; border-radius:50%;
background:#fff;
border:3px solid var(--ab-em);
box-shadow:0 4px 14px rgba(46,155,101,.35), 0 0 0 6px rgba(255,255,255,.6);
transition:transform .35s var(--ease-out-back), background .35s, border-color .35s;
}
.ab-tl-pulse{
position:absolute; inset:auto; width:18px; height:18px; border-radius:50%;
border:1px solid var(--ab-em);
opacity:0;
animation:abTlPulse 2.6s ease-out infinite;
}
@keyframes abTlPulse{
0%{ transform:scale(1); opacity:.6; }
100%{ transform:scale(3.6); opacity:0; }
}
.ab-tl-row.is-active .ab-tl-dot{
background:var(--ab-em);
transform:scale(1.25);
}
/* Card sides */
.ab-tl-row--left .ab-tl-card{ grid-column:1; margin-right:30px; }
.ab-tl-row--right .ab-tl-card{ grid-column:3; margin-left:30px; }
.ab-tl-card{
background:#fff;
border:1px solid var(--ab-line);
border-radius:24px;
overflow:hidden;
display:grid;
grid-template-columns:160px 1fr;
align-items:stretch;
transition:transform .45s var(--ease-out-quint), box-shadow .45s var(--ease-out-quint), border-color .45s;
}
.ab-tl-row--right .ab-tl-card{ grid-template-columns:1fr 160px; }
.ab-tl-card:hover{
transform:translateY(-6px);
border-color:rgba(46,155,101,.45);
box-shadow:0 24px 50px rgba(27,107,69,.18);
}
.ab-tl-card-img{
position:relative; overflow:hidden;
}
.ab-tl-row--right .ab-tl-card-img{ order:2; }
.ab-tl-card-img img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .8s var(--ease-out-quint);
}
.ab-tl-card:hover .ab-tl-card-img img{ transform:scale(1.08); }
.ab-tl-card-shade{
position:absolute; inset:0;
background:linear-gradient(180deg, transparent 50%, rgba(8,18,12,.55) 100%);
}
.ab-tl-card-year{
position:absolute; left:12px; bottom:10px; z-index:2;
font-family:'Cormorant Garamond', serif;
font-size:24px; font-weight:500; font-style:italic;
color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.ab-tl-card-body{ padding:22px 24px; }
.ab-tl-card-eyebrow{
font-size:9px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
color:var(--ab-em-d); display:block; margin-bottom:8px;
}
.ab-tl-card-title{
font-family:'Cormorant Garamond', serif;
font-size:22px; font-weight:500; color:var(--ab-ink); line-height:1.25;
margin-bottom:8px;
}
.ab-tl-card-desc{ font-size:13px; color:#5d6a5e; line-height:1.7; }
/* ═══════════════════════════════════════════════════════════════
4. ATELIER
═══════════════════════════════════════════════════════════════ */
.ab-atelier{ background:#fff; padding:120px 80px; overflow:hidden; }
.ab-atelier .sec-in{ max-width:1280px; margin:0 auto; }
.ab-atelier-grid{
display:grid; grid-template-columns:1fr 1fr; gap:90px;
align-items:center;
}
/* Image collage */
.ab-atelier-visual{ position:relative; }
.ab-atelier-stack{
position:relative;
aspect-ratio:1/1.15;
width:100%;
max-width:520px;
}
.ab-atelier-img{
position:absolute;
border-radius:18px;
overflow:hidden;
box-shadow:0 24px 60px rgba(8,18,12,.18);
transition:transform .6s var(--ease-out-quint);
}
.ab-atelier-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease-out-quint); }
.ab-atelier-img:hover img{ transform:scale(1.06); }
.ab-atelier-img-shade{
position:absolute; inset:0;
background:linear-gradient(180deg, transparent 60%, rgba(5,26,17,.4) 100%);
}
.ab-atelier-img--lg{ inset:0 18% 14% 0; }
.ab-atelier-img--sm{ width:55%; aspect-ratio:1/1; bottom:0; right:0; border:8px solid #fff; }
.ab-atelier-img--xs{ width:34%; aspect-ratio:1/1; top:5%; right:0; border:6px solid #fff; }
.ab-atelier-img--lg:hover{ transform:translate(-4px,-4px); }
.ab-atelier-img--sm:hover{ transform:translate(4px,-4px); }
.ab-atelier-img--xs:hover{ transform:translate(0,-4px); }
.ab-atelier-stamp{
position:absolute;
left:-20px; top:38%;
width:118px; height:118px;
border-radius:50%;
background:linear-gradient(135deg, var(--ab-em-l), var(--ab-em-d));
color:#fff;
display:grid; place-items:center;
text-align:center;
font-size:10px; line-height:1.4; letter-spacing:.16em; text-transform:uppercase;
box-shadow:0 16px 36px rgba(27,107,69,.4);
z-index:3;
animation:abStampFloat 6s ease-in-out infinite alternate;
}
@keyframes abStampFloat{
from{ transform:translateY(0) rotate(-6deg); }
to { transform:translateY(-10px) rotate(6deg); }
}
.ab-stamp-rune{
position:absolute; top:14px; left:50%; transform:translateX(-50%);
font-size:14px; opacity:.9;
}
.ab-stamp-text{ display:block; font-weight:600; }
/* Right content */
.ab-atelier-content .eyebrow{
font-size:10px; font-weight:700; letter-spacing:.26em;
text-transform:uppercase; color:var(--ab-em-d);
margin-bottom:16px; display:inline-block;
}
.ab-atelier-title{
font-family:'Cormorant Garamond', serif;
font-size:clamp(40px,4.8vw,64px); font-weight:300;
color:var(--ab-ink); line-height:1.08; margin-bottom:24px;
}
.ab-atelier-title em{
font-style:italic;
background:linear-gradient(135deg, var(--ab-em-l), var(--ab-em-d));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ab-atelier-desc{
font-size:15px; color:#5d6a5e; line-height:1.85;
margin-bottom:34px; max-width:520px;
}
.ab-atelier-facts{
display:grid; grid-template-columns:1fr 1fr; gap:18px;
margin-bottom:36px;
}
.ab-fact{
background:#FAFDF9;
border:1px solid var(--ab-line);
border-radius:16px;
padding:20px 22px;
position:relative;
transition:transform .35s var(--ease-out-quint), background .35s, border-color .35s;
}
.ab-fact:hover{
transform:translateY(-3px);
background:#fff;
border-color:rgba(46,155,101,.45);
box-shadow:0 14px 32px rgba(27,107,69,.12);
}
.ab-fact-num{
display:block;
font-family:'Cormorant Garamond', serif;
font-size:34px; font-weight:500;
background:linear-gradient(135deg,var(--ab-em-l),var(--ab-em-d));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
margin-bottom:4px;
}
.ab-fact-lbl{ display:block; font-size:13px; font-weight:600; color:var(--ab-ink); margin-bottom:2px; }
.ab-fact-sub{ display:block; font-size:11px; color:#7a8579; }
.ab-atelier-cta{ display:inline-flex !important; }
/* ═══════════════════════════════════════════════════════════════
5. VALUES
═══════════════════════════════════════════════════════════════ */
.ab-values{
background:linear-gradient(180deg, #FAFDF9 0%, #F1F8F3 100%);
padding:120px 80px;
position:relative; overflow:hidden;
}
.ab-values::before{
content:'';
position:absolute; top:-200px; right:-200px; width:600px; height:600px;
background:radial-gradient(circle, rgba(46,155,101,.10) 0%, transparent 70%);
pointer-events:none;
}
.ab-values .sec-in{ max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.ab-values .sec-hd{ text-align:center; margin-bottom:60px; }
.ab-values .sec-hd .eyebrow{
font-size:10px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
color:var(--ab-em-d); margin-bottom:14px; display:inline-block;
}
.ab-values .sec-title{
font-family:'Cormorant Garamond',serif; font-weight:300;
font-size:clamp(40px,5vw,64px); color:var(--ab-ink); line-height:1.1; margin-bottom:14px;
}
.ab-values .sec-title em{
font-style:italic;
background:linear-gradient(135deg,var(--ab-em-l),var(--ab-em-d));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ab-values .sec-desc{
font-size:15px; color:#647062; line-height:1.8;
max-width:560px; margin:0 auto;
}
.ab-values-grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.ab-val-card{
position:relative; padding:34px 28px 30px;
background:#fff;
border:1px solid var(--ab-line);
border-radius:22px;
overflow:hidden;
transition:transform .5s var(--ease-out-quint), box-shadow .5s var(--ease-out-quint), border-color .5s;
}
.ab-val-card::after{
content:''; position:absolute; inset:0;
background:radial-gradient(circle at top right, rgba(46,155,101,.10) 0%, transparent 60%);
opacity:0; transition:opacity .5s;
pointer-events:none;
}
.ab-val-card:hover{
transform:translateY(-8px);
border-color:rgba(46,155,101,.45);
box-shadow:0 24px 50px rgba(27,107,69,.18);
}
.ab-val-card:hover::after{ opacity:1; }
.ab-val-no{
position:absolute; top:18px; right:22px;
font-family:'Cormorant Garamond', serif; font-style:italic;
font-size:48px; font-weight:300;
color:rgba(27,107,69,.10);
line-height:1; pointer-events:none;
transition:color .5s;
}
.ab-val-card:hover .ab-val-no{ color:rgba(46,155,101,.18); }
.ab-val-ico{
width:54px; height:54px; border-radius:16px;
background:linear-gradient(135deg, rgba(46,155,101,.12), rgba(19,79,51,.06));
border:1px solid rgba(46,155,101,.22);
display:grid; place-items:center;
color:var(--ab-em-d);
margin-bottom:22px;
transition:all .45s var(--ease-out-back);
}
.ab-val-card:hover .ab-val-ico{
background:linear-gradient(135deg, var(--ab-em-l), var(--ab-em));
border-color:transparent;
color:#fff;
transform:rotate(-8deg) scale(1.08);
box-shadow:0 10px 24px rgba(46,155,101,.4);
}
.ab-val-ico svg{ width:24px; height:24px; }
.ab-val-tag{
font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
color:var(--ab-em-d); display:block; margin-bottom:6px;
}
.ab-val-title{
font-family:'Cormorant Garamond', serif;
font-size:22px; font-weight:500;
color:var(--ab-ink); line-height:1.25; margin-bottom:10px;
}
.ab-val-desc{
font-size:13px; color:#647062; line-height:1.7;
}
/* Subtle shine swipe on hover */
.ab-val-shine{
position:absolute; inset:0;
background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
transform:translateX(-120%);
transition:transform .9s var(--ease-out-quint);
pointer-events:none;
mix-blend-mode:overlay;
}
.ab-val-card:hover .ab-val-shine{ transform:translateX(120%); }
/* ═══════════════════════════════════════════════════════════════
6. TEAM
═══════════════════════════════════════════════════════════════ */
.ab-team{ background:#fff; padding:120px 80px; }
.ab-team .sec-in{ max-width:1280px; margin:0 auto; }
.ab-team .sec-hd{ text-align:center; margin-bottom:60px; }
.ab-team .sec-hd .eyebrow{
font-size:10px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
color:var(--ab-em-d); margin-bottom:14px; display:inline-block;
}
.ab-team .sec-title{
font-family:'Cormorant Garamond',serif; font-weight:300;
font-size:clamp(40px,5vw,64px); color:var(--ab-ink); line-height:1.1; margin-bottom:14px;
}
.ab-team .sec-title em{
font-style:italic;
background:linear-gradient(135deg,var(--ab-em-l),var(--ab-em-d));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ab-team .sec-desc{
font-size:15px; color:#647062; line-height:1.8;
max-width:560px; margin:0 auto;
}
.ab-team-grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.ab-team-card{
background:#fff;
border-radius:22px;
overflow:hidden;
border:1px solid var(--ab-line);
transition:transform .5s var(--ease-out-quint), box-shadow .5s var(--ease-out-quint), border-color .5s;
}
.ab-team-card:hover{
transform:translateY(-6px);
border-color:rgba(46,155,101,.45);
box-shadow:0 24px 50px rgba(27,107,69,.18);
}
.ab-team-img{
position:relative; aspect-ratio:4/5;
overflow:hidden;
background:#EAF5EE;
}
.ab-team-img img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .8s var(--ease-out-quint), filter .5s;
filter:grayscale(28%);
}
.ab-team-card:hover .ab-team-img img{
transform:scale(1.06);
filter:grayscale(0%);
}
.ab-team-overlay{
position:absolute; inset:0;
background:linear-gradient(180deg, transparent 30%, rgba(5,26,17,.92) 100%);
display:flex; align-items:flex-end;
padding:22px;
opacity:0;
transition:opacity .45s var(--ease-out-quint);
}
.ab-team-card:hover .ab-team-overlay{ opacity:1; }
.ab-team-quote{
font-family:'Cormorant Garamond', serif;
font-style:italic; font-size:15px;
color:#fff; line-height:1.5;
transform:translateY(14px);
transition:transform .5s var(--ease-out-quint) .05s;
}
.ab-team-card:hover .ab-team-quote{ transform:translateY(0); }
.ab-team-body{ padding:22px 22px 26px; }
.ab-team-name{
font-family:'Cormorant Garamond', serif;
font-size:22px; font-weight:500;
color:var(--ab-ink); line-height:1.2;
margin-bottom:4px;
}
.ab-team-role{
display:block;
font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color:var(--ab-em-d); margin-bottom:12px;
}
.ab-team-bio{ font-size:13px; color:#647062; line-height:1.7; }
/* ═══════════════════════════════════════════════════════════════
7. PULL QUOTE
═══════════════════════════════════════════════════════════════ */
.ab-quote{
position:relative;
padding:140px 80px;
overflow:hidden;
isolation:isolate;
text-align:center;
color:#fff;
}
.ab-quote-bg{
position:absolute; inset:0; z-index:-1;
overflow:hidden;
}
.ab-quote-bg img{
width:100%; height:100%; object-fit:cover;
filter:blur(2px) brightness(.55);
transform:scale(1.1);
will-change:transform;
}
.ab-quote-overlay{
position:absolute; inset:0;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(5,26,17,.45) 0%, rgba(5,26,17,.85) 70%, rgba(5,26,17,.95) 100%);
}
.ab-quote-sparkles{ position:absolute; inset:0; pointer-events:none; }
.ab-qspark{
position:absolute; width:5px; height:5px; border-radius:50%;
background:radial-gradient(circle, #FFE9B0 0%, rgba(255,233,176,0) 70%);
box-shadow:0 0 14px rgba(255,233,176,.7);
opacity:0;
animation:abQspark 5s ease-in-out infinite;
}
@keyframes abQspark{
0%,100%{ opacity:0; transform:translateY(0) scale(.6); }
40%{ opacity:.85; transform:translateY(-14px) scale(1); }
80%{ opacity:0; transform:translateY(-32px) scale(.5); }
}
.ab-qspark--1 { left:10%; top:30%; animation-delay:0s; }
.ab-qspark--2 { left:22%; top:65%; animation-delay:.6s; }
.ab-qspark--3 { left:35%; top:25%; animation-delay:1.4s; }
.ab-qspark--4 { left:48%; top:75%; animation-delay:.9s; }
.ab-qspark--5 { left:60%; top:35%; animation-delay:.3s; }
.ab-qspark--6 { left:70%; top:60%; animation-delay:1.7s; }
.ab-qspark--7 { left:82%; top:30%; animation-delay:1.1s; }
.ab-qspark--8 { left:90%; top:55%; animation-delay:.5s; }
.ab-qspark--9 { left:5%; top:50%; animation-delay:1.3s; }
.ab-qspark--10{ left:95%; top:78%; animation-delay:1.9s; }
.ab-quote-inner{ max-width:880px; margin:0 auto; position:relative; z-index:2; }
.ab-quote-mark{
width:54px; height:auto;
color:rgba(93,201,146,.55);
margin:0 auto 26px; display:block;
}
.ab-quote-text{
font-family:'Cormorant Garamond', serif;
font-size:clamp(28px,3.4vw,42px);
font-weight:300; line-height:1.4;
color:#fff;
margin-bottom:30px;
}
.ab-quote-text em{
font-style:italic;
background:linear-gradient(135deg,#FFE9B0 0%,#FFD786 50%,#E9C268 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.ab-quote-author{
display:inline-flex; flex-direction:column; gap:4px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.18);
}
.ab-quote-name{ font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff; }
.ab-quote-role{ font-size:11px; color:rgba(255,255,255,.55); letter-spacing:.1em; }
/* ═══════════════════════════════════════════════════════════════
8. STATS overrides — tints to match about page
═══════════════════════════════════════════════════════════════ */
.ab-stats{ background:linear-gradient(180deg,#fff 0%, #FAFDF9 100%); color:var(--ab-ink); }
.ab-stats::before{ display:none; }
.ab-stats .hp-stats-eyebrow{ color:var(--ab-em-d); }
.ab-stats .hp-stats-title{ color:var(--ab-ink); }
.ab-stats .hp-stats-title em{
font-style:italic;
background:linear-gradient(135deg,var(--ab-em-l),var(--ab-em-d));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ab-stats .hp-stats-grid{ border-top-color:var(--ab-line); }
.ab-stats .hp-stat{
border-right-color:var(--ab-line);
border-bottom-color:var(--ab-line);
}
.ab-stats .hp-stat:hover{ background:rgba(46,155,101,.05); }
.ab-stats .hp-stat-num{
background:linear-gradient(135deg,var(--ab-em-l) 0%,var(--ab-em-d) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
.ab-stats .hp-stat-label{ color:var(--ab-ink); }
.ab-stats .hp-stat-sub{ color:#647062; }
/* ═══════════════════════════════════════════════════════════════
9. PRESS overrides
═══════════════════════════════════════════════════════════════ */
.ab-press{ background:#fff; color:var(--ab-ink); }
.ab-press::before{ display:none; }
.ab-press .hp-press-eyebrow{ color:var(--ab-em-d); }
.ab-press .hp-press-line{
background:linear-gradient(90deg,transparent 0%,rgba(8,6,15,.18) 50%,transparent 100%);
}
.ab-press .hp-press-item{ color:rgba(8,6,15,.42); }
.ab-press .hp-press-item:hover,
.ab-press .hp-press-item.is-active{
color:var(--ab-em-d);
text-shadow:0 0 24px rgba(46,155,101,.18);
}
.ab-press .hp-press-quote{ color:#3d4a3d; }
/* ═══════════════════════════════════════════════════════════════
10. RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px){
.ab-hero{ padding:calc(var(--nav-h) + 48px) 28px 80px; }
.ab-philo, .ab-journey, .ab-atelier, .ab-values, .ab-team{ padding-left:40px; padding-right:40px; }
.ab-quote{ padding:110px 40px; }
.ab-philo-grid{ grid-template-columns:1fr; gap:60px; }
.ab-atelier-grid{ grid-template-columns:1fr; gap:80px; }
.ab-atelier-stack{ margin:0 auto; }
.ab-values-grid{ grid-template-columns:1fr 1fr; gap:18px; }
.ab-team-grid{ grid-template-columns:1fr 1fr; gap:18px; }
}
@media (max-width: 820px){
.ab-hero{ padding:calc(var(--nav-h) + 36px) 22px 72px; }
.ab-hero-eyebrow{ gap:10px; font-size:10px; letter-spacing:.26em; margin-bottom:18px; }
.ab-hero-eyebrow-bar{ width:26px; }
.ab-breadcrumb{ margin-bottom:18px; }
.ab-hero-title{ font-size:clamp(34px, 7.5vw, 56px); }
.ab-hero-rule{ width:80px; margin:20px auto 18px; }
.ab-hero-desc{ font-size:16px; margin-bottom:28px; }
.ab-hero-actions{ gap:20px; }
.ab-philo, .ab-journey, .ab-atelier, .ab-values, .ab-team{ padding:80px 20px; }
.ab-philo-title{ font-size:clamp(30px,7vw,44px); }
.ab-atelier-title{ font-size:clamp(30px,7vw,44px); }
/* Timeline collapses to single column on the LEFT side */
.ab-tl-row,
.ab-tl-row--left,
.ab-tl-row--right{
grid-template-columns:60px 1fr;
margin-bottom:48px;
}
.ab-timeline-rail{ left:30px; transform:none; }
.ab-tl-marker{ grid-column:1; width:60px; }
.ab-tl-row--left .ab-tl-card,
.ab-tl-row--right .ab-tl-card{
grid-column:2;
margin:0;
grid-template-columns:120px 1fr;
}
.ab-tl-row--right .ab-tl-card-img{ order:0; }
.ab-atelier-stack{ aspect-ratio:1/1; max-width:100%; }
.ab-atelier-img--lg{ inset:0 14% 18% 0; }
.ab-atelier-img--sm{ width:50%; }
.ab-atelier-img--xs{ width:30%; }
.ab-atelier-stamp{ width:96px; height:96px; left:-10px; }
.ab-atelier-facts{ grid-template-columns:1fr 1fr; gap:12px; }
.ab-fact{ padding:16px 18px; }
.ab-fact-num{ font-size:28px; }
.ab-quote{ padding:80px 20px; }
.ab-quote-text{ font-size:clamp(22px,5vw,30px); }
}
@media (max-width: 560px){
.ab-hero{ padding:calc(var(--nav-h) + 24px) 18px 60px; }
.ab-hero-title{ font-size:clamp(30px, 9.5vw, 44px); }
.ab-hero-desc{ font-size:15px; line-height:1.6; }
.ab-hero-actions{ flex-direction:column; gap:14px; align-items:center; }
.ab-hero-cta--primary{ width:100%; max-width:260px; justify-content:center; }
.ab-values-grid{ grid-template-columns:1fr; }
.ab-team-grid{ grid-template-columns:1fr; }
.ab-tl-card{
grid-template-columns:1fr !important;
}
.ab-tl-card-img{ height:160px; }
.ab-tl-row--right .ab-tl-card-img{ order:0 !important; }
.ab-atelier-facts{ grid-template-columns:1fr; }
.ab-philo-pillar{ grid-template-columns:40px 1fr; column-gap:14px; row-gap:4px; padding:18px 20px; }
.ab-pillar-ico{ width:40px; height:40px; }
}
/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce){
.ab-qspark,
.ab-tl-pulse, .ab-atelier-stamp,
.ab-hero-scroll-bead{ animation:none !important; }
.ab-hero [data-a],
.ab-hero-title .ab-line,
.ab-hero-rule{
transition:none !important;
opacity:1 !important;
transform:none !important;
clip-path:none !important;
}
.ab-quote-bg img{ transform:none; }
}
/* ============================================================
CART
============================================================ */
/* ═══════════════════════════════════════════════════════════
CART PAGE — Beyond Expression Fine Jewellery
═══════════════════════════════════════════════════════════ */
/* ── Hero ── */
.cart-hero {
position: relative;
background: #141414;
padding: 100px 80px 44px;
overflow: hidden;
}
.cart-hero .orb { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; }
.cart-hero .orb-1 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(0,0,0,.28) 0%, transparent 70%); top: -100px; left: -80px; }
.cart-hero .orb-2 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(74,74,74,.18) 0%, transparent 70%); bottom: -60px; right: -40px; }
.cart-hero .hero-grid {
position: absolute; inset: 0;
background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
opacity: .5;
}
.cart-hero-inner { position: relative; z-index: 2; }
/* Breadcrumb */
.cart-breadcrumb {
display: flex; align-items: center; gap: 8px;
font-family: 'Jost', sans-serif; font-size: .73rem; letter-spacing: .12em;
text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 24px;
}
.cart-breadcrumb a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .2s; }
.cart-breadcrumb a:hover { color: #fff; }
.cart-breadcrumb span.sep { color: rgba(255,255,255,.25); }
/* Checkout steps */
.cart-steps {
display: flex; align-items: center; gap: 0; margin-bottom: 32px;
}
.cart-step {
display: flex; align-items: center; gap: 10px;
font-family: 'Jost', sans-serif; font-size: .7rem; letter-spacing: .1em;
text-transform: uppercase; color: rgba(255,255,255,.3);
}
.cart-step.active { color: #fff; }
.cart-step.done { color: #4A4A4A; }
.cart-step-dot {
width: 28px; height: 28px; border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.2);
display: grid; place-items: center;
font-size: .65rem; font-weight: 600; flex-shrink: 0; transition: all .3s;
}
.cart-step.active .cart-step-dot {
background: #000000; border-color: #000000; color: #fff;
}
.cart-step.done .cart-step-dot {
background: #000000; border-color: #000000; color: #fff;
}
.cart-step.done .cart-step-dot::after { content: '✓'; font-size: .7rem; }
.cart-step-line {
height: 1px; width: 52px; background: rgba(255,255,255,.12);
margin: 0 6px; flex-shrink: 0;
}
.cart-step-line.done { background: linear-gradient(90deg, #000000, rgba(0,0,0,.4)); }
.cart-hero h1 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 400; color: #fff; line-height: 1.1; margin: 0 0 16px;
}
.cart-hero h1 em { font-style: italic; color: #FFFFFF; }
.cart-count-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(74,74,74,.12); border: 1px solid rgba(74,74,74,.28);
border-radius: 100px; padding: 6px 14px 6px 8px;
font-family: 'Jost', sans-serif; font-size: .73rem; color: #FFFFFF;
letter-spacing: .08em; text-transform: uppercase;
}
.cart-count-badge .badge-num {
background: #FFFFFF; color: #000000; border-radius: 50%;
width: 22px; height: 22px; display: grid; place-items: center;
font-size: .68rem; font-weight: 600;
}
/* ── Main Layout ── */
.cart-body { background: #FAFAFA; padding: 44px 80px 56px; }
.cart-layout {
display: grid; grid-template-columns: 1fr 380px; gap: 44px;
max-width: 1340px; margin: 0 auto; align-items: start;
}
/* ── Free Shipping Progress ── */
.shipping-progress-wrap {
background: #fff; border: 1px solid #E0E0E0; border-radius: 16px;
padding: 18px 22px; margin-bottom: 28px;
display: flex; align-items: center; gap: 16px;
}
.ship-prog-icon {
width: 42px; height: 42px; border-radius: 50%;
background: linear-gradient(135deg, #4A4A4A, #000000);
display: grid; place-items: center; flex-shrink: 0;
}
.ship-prog-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.ship-prog-content { flex: 1; }
.ship-prog-text {
font-family: 'Jost', sans-serif; font-size: .8rem; color: #000000; margin-bottom: 8px;
}
.ship-prog-text strong { color: #000000; font-weight: 600; }
.ship-bar-track {
height: 6px; background: #E0E0E0; border-radius: 10px; overflow: visible; position: relative;
}
.ship-bar-fill {
height: 100%; border-radius: 10px;
background: linear-gradient(90deg, #4A4A4A, #000000);
width: 0; transition: width 1s cubic-bezier(.4,0,.2,1);
position: relative;
}
.ship-bar-fill::after {
content: '';
position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; background: #fff;
border: 2.5px solid #000000; border-radius: 50%;
box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}
/* ── Cart Items ── */
.cart-items-head {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.cart-items-head h2 {
font-family: 'Cormorant Garamond', serif; font-size: 1.65rem; font-weight: 400; color: #000000;
}
.cart-clear-btn {
font-family: 'Jost', sans-serif; font-size: .73rem; letter-spacing: .1em;
text-transform: uppercase; color: #8A8A8A; background: none; border: none;
cursor: pointer; text-decoration: none;
transition: color .2s; padding: 0;
}
.cart-clear-btn:hover { color: #dc2626; }
/* ── Item Card ── */
.cart-item {
background: #fff; border: 1px solid #E0E0E0; border-radius: 18px;
padding: 22px 22px 18px; margin-bottom: 16px;
display: grid; grid-template-columns: 96px 1fr; gap: 20px;
position: relative; overflow: hidden;
transition: box-shadow .3s, border-color .3s;
}
.cart-item::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; background: linear-gradient(180deg, #4A4A4A, #000000);
transition: width .3s;
}
.cart-item:hover { box-shadow: 0 8px 36px rgba(0,0,0,.1); border-color: rgba(0,0,0,.35); }
.cart-item:hover::before { width: 4px; }
.cart-item.removing {
opacity: 0; transform: translateX(-24px) scale(.97);
transition: opacity .4s, transform .4s; pointer-events: none;
}
/* Image */
.cart-item-img {
width: 96px; height: 96px; border-radius: 12px;
background: linear-gradient(135deg, #FAFAFA, #E0E0E0);
overflow: hidden; flex-shrink: 0;
display: grid; place-items: center;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-img svg { width: 42px; height: 42px; stroke: #000000; fill: none; stroke-width: 1; opacity: .45; }
/* Details */
.cart-item-details { min-width: 0; }
.cart-item-badges { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.cart-item-badge {
font-family: 'Jost', sans-serif; font-size: .62rem;
letter-spacing: .12em; text-transform: uppercase; padding: 3px 10px;
border-radius: 100px; font-weight: 500;
}
.badge-metal {
background: rgba(0,0,0,.1); color: #000000;
border: 1px solid rgba(0,0,0,.2);
}
.badge-hallmark {
background: rgba(253,230,138,.35); color: #92400e;
border: 1px solid rgba(253,230,138,.6);
}
.cart-item-name {
font-family: 'Cormorant Garamond', serif; font-size: 1.15rem;
font-weight: 500; color: #000000; line-height: 1.3; margin-bottom: 3px;
}
.cart-item-sku {
font-family: 'Jost', sans-serif; font-size: .7rem;
color: #8A8A8A; letter-spacing: .06em; margin-bottom: 10px;
}
.cart-item-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cart-item-meta-row {
display: flex; align-items: center; gap: 5px;
font-family: 'Jost', sans-serif; font-size: .76rem; color: #4A4A4A;
}
.cart-item-meta-row svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Item footer row */
.cart-item-footer {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
}
.cart-item-left-actions { display: flex; gap: 14px; }
.cart-link-btn {
font-family: 'Jost', sans-serif; font-size: .7rem; letter-spacing: .08em;
text-transform: uppercase; background: none; border: none; cursor: pointer;
padding: 0; transition: color .2s; display: flex; align-items: center; gap: 5px;
text-decoration: none;
}
.cart-link-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.cart-link-save { color: #000000; }
.cart-link-save:hover { color: #4A4A4A; }
.cart-link-remove { color: #8A8A8A; }
.cart-link-remove:hover { color: #dc2626; }
/* Right side: qty + price */
.cart-item-right {
display: flex; align-items: center; gap: 20px;
grid-column: 1 / -1; justify-content: space-between;
padding-top: 12px; border-top: 1px solid #FAFAFA;
margin-top: 4px;
}
.cart-item-price-col { text-align: right; }
.cart-item-price {
font-family: 'Cormorant Garamond', serif; font-size: 1.35rem;
font-weight: 600; color: #000000; display: block;
}
.cart-item-price-old {
font-family: 'Jost', sans-serif; font-size: .72rem;
color: #8A8A8A; text-decoration: line-through;
}
/* Quantity stepper */
.qty-stepper {
display: flex; align-items: center;
background: #FAFAFA; border: 1.5px solid #E0E0E0;
border-radius: 100px; overflow: hidden;
transition: border-color .2s;
}
.qty-stepper:focus-within { border-color: #000000; }
.qty-btn {
width: 36px; height: 36px; background: none; border: none;
display: grid; place-items: center; cursor: pointer;
color: #000000; transition: background .2s, color .2s;
}
.qty-btn:hover { background: #000000; color: #fff; }
.qty-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.qty-val {
min-width: 38px; text-align: center;
font-family: 'Jost', sans-serif; font-size: .92rem; font-weight: 600;
color: #000000; border: none; background: none; padding: 0;
}
/* Saved item image */
.saved-item-img img {
width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block;
}
/* Crosssell image fill */
.crosssell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Saved for Later ── */
.cart-saved-section { margin-top: 40px; }
.cart-saved-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cart-saved-head h3 {
font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 400; color: #000000;
white-space: nowrap;
}
.cart-saved-rule { flex: 1; height: 1px; background: #E0E0E0; }
.cart-saved-count {
font-family: 'Jost', sans-serif; font-size: .7rem; letter-spacing: .1em;
text-transform: uppercase; color: #8A8A8A; white-space: nowrap;
}
.saved-item {
background: #fff; border: 1px dashed #E0E0E0; border-radius: 18px;
padding: 18px 20px; margin-bottom: 12px;
display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center;
transition: border-color .2s;
}
.saved-item:hover { border-color: rgba(0,0,0,.3); }
.saved-item-img {
width: 72px; height: 72px; border-radius: 10px;
background: linear-gradient(135deg, #FAFAFA, #E0E0E0);
display: grid; place-items: center; opacity: .8;
}
.saved-item-img svg { width: 32px; height: 32px; stroke: #000000; fill: none; stroke-width: 1; opacity: .4; }
.saved-item-name {
font-family: 'Cormorant Garamond', serif; font-size: 1.05rem;
font-weight: 400; color: #4A4A4A; margin-bottom: 4px;
}
.saved-item-price {
font-family: 'Jost', sans-serif; font-size: .82rem; color: #8A8A8A;
}
.saved-item-move-btn {
font-family: 'Jost', sans-serif; font-size: .72rem; letter-spacing: .1em;
text-transform: uppercase; color: #000000; background: none;
border: 1.5px solid #E0E0E0; border-radius: 100px; padding: 8px 16px;
cursor: pointer; transition: background .2s, border-color .2s, color .2s; white-space: nowrap;
}
.saved-item-move-btn:hover { background: #000000; border-color: #000000; color: #fff; }
/* Continue shopping */
.cart-continue {
margin-top: 28px; display: inline-flex; align-items: center; gap: 8px;
font-family: 'Jost', sans-serif; font-size: .78rem; letter-spacing: .1em;
text-transform: uppercase; color: #000000; text-decoration: none; transition: gap .2s, color .2s;
}
.cart-continue:hover { gap: 14px; color: #4A4A4A; }
.cart-continue svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* ── Order Summary Card (dark) ── */
.cart-summary { position: sticky; top: 100px; }
.summary-card {
background: #141414; border-radius: 22px; overflow: hidden;
box-shadow: 0 28px 72px rgba(0,0,0,.45), 0 0 0 1px rgba(74,74,74,.08);
}
.summary-header {
padding: 26px 28px 22px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.summary-header h2 {
font-family: 'Cormorant Garamond', serif; font-size: 1.45rem;
font-weight: 400; color: #fff; margin-bottom: 4px;
}
.summary-items-count {
font-family: 'Jost', sans-serif; font-size: .7rem;
color: rgba(255,255,255,.35); letter-spacing: .1em; text-transform: uppercase;
}
.summary-body { padding: 24px 28px; }
.summary-row {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
}
.summary-row-label {
font-family: 'Jost', sans-serif; font-size: .8rem; color: rgba(255,255,255,.5);
}
.summary-row-val {
font-family: 'Jost', sans-serif; font-size: .86rem; color: #fff; font-weight: 500;
}
.summary-row-val.discount { color: #FFFFFF; }
.summary-row-val.free-shipping {
background: rgba(74,74,74,.15); border: 1px solid rgba(74,74,74,.28);
color: #FFFFFF; font-size: .65rem; letter-spacing: .1em;
text-transform: uppercase; padding: 3px 10px; border-radius: 100px; font-weight: 500;
}
.summary-divider { height: 1px; background: rgba(255,255,255,.08); margin: 18px 0; }
.summary-total-row {
display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px;
}
.summary-total-label {
font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; color: rgba(255,255,255,.6);
}
.summary-total-val {
font-family: 'Cormorant Garamond', serif; font-size: 1.9rem;
font-weight: 600; color: #fff; letter-spacing: .02em;
}
.summary-gst {
font-family: 'Jost', sans-serif; font-size: .66rem;
color: rgba(255,255,255,.25); text-align: right; margin-bottom: 22px;
}
/* Delivery estimate */
.delivery-estimate {
display: flex; align-items: center; gap: 10px;
background: rgba(74,74,74,.08); border: 1px solid rgba(74,74,74,.18);
border-radius: 10px; padding: 11px 14px; margin-bottom: 16px;
}
.delivery-estimate svg {
width: 18px; height: 18px; stroke: #FFFFFF; fill: none;
stroke-width: 1.8; flex-shrink: 0;
}
.delivery-text {
font-family: 'Jost', sans-serif; font-size: .76rem; color: rgba(255,255,255,.55); line-height: 1.5;
}
.delivery-text strong { color: #FFFFFF; font-weight: 500; display: block; }
/* Coupon */
.coupon-toggle {
width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
border-radius: 10px; padding: 12px 16px; display: flex; align-items: center;
justify-content: space-between; cursor: pointer;
font-family: 'Jost', sans-serif; font-size: .77rem;
color: rgba(255,255,255,.55); letter-spacing: .06em; transition: background .2s, border-color .2s;
margin-bottom: 10px;
}
.coupon-toggle:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.coupon-toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .3s; }
.coupon-toggle.open svg { transform: rotate(180deg); }
.coupon-toggle span.ct-icon { margin-right: 8px; opacity: .5; }
.coupon-field {
display: flex; gap: 8px; overflow: hidden;
max-height: 0; transition: max-height .4s cubic-bezier(.4,0,.2,1);
margin-bottom: 0; transition: max-height .4s, margin-bottom .3s;
}
.coupon-field.open { max-height: 56px; margin-bottom: 16px; }
.coupon-input {
flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
border-radius: 8px; padding: 10px 14px;
font-family: 'Jost', sans-serif; font-size: .8rem; color: #fff;
letter-spacing: .08em; text-transform: uppercase; transition: border-color .2s;
}
.coupon-input::placeholder { color: rgba(255,255,255,.2); text-transform: none; letter-spacing: 0; }
.coupon-input:focus { outline: none; border-color: #FFFFFF; }
.coupon-apply-btn {
background: #FFFFFF; color: #000000; border: none; border-radius: 8px;
padding: 10px 18px; font-family: 'Jost', sans-serif; font-size: .76rem;
letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
transition: background .2s; white-space: nowrap;
}
.coupon-apply-btn:hover { background: #E0E0E0; }
/* Checkout button */
.checkout-btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; background: linear-gradient(135deg, #4A4A4A 0%, #000000 100%);
color: #fff; border: none; border-radius: 100px; padding: 17px 32px;
font-family: 'Jost', sans-serif; font-size: .84rem;
letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
cursor: pointer; transition: transform .25s, box-shadow .25s;
position: relative; overflow: hidden; margin-bottom: 18px;
}
.checkout-btn::before {
content: ''; position: absolute; top: 0; left: -120%;
width: 80%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
transform: skewX(-20deg); transition: left .7s;
}
.checkout-btn:hover::before { left: 140%; }
.checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.checkout-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Trust icons */
.summary-trust {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
padding: 18px 28px 24px; border-top: 1px solid rgba(255,255,255,.06);
}
.trust-item {
display: flex; flex-direction: column; align-items: center; gap: 6px;
font-family: 'Jost', sans-serif; font-size: .6rem; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255,255,255,.32); text-align: center;
}
.trust-item svg { width: 18px; height: 18px; stroke: rgba(255,255,255,.28); fill: none; stroke-width: 1.8; }
/* ── Cross-sell Section ── */
.cart-crosssell { background: #fff; padding: 48px 80px; border-top: 1px solid #E0E0E0; }
.cart-crosssell-inner { max-width: 1340px; margin: 0 auto; }
.cart-crosssell .eyebrow { margin-bottom: 8px; }
.cart-crosssell h2 {
font-family: 'Cormorant Garamond', serif; font-size: 2.1rem;
font-weight: 400; color: #000000; margin-bottom: 36px;
}
.cart-crosssell h2 em { font-style: italic; color: #000000; }
.crosssell-scroll {
display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 6px;
}
.crosssell-scroll::-webkit-scrollbar { display: none; }
.crosssell-card {
flex-shrink: 0; width: 236px; background: #FAFAFA;
border: 1px solid #E0E0E0; border-radius: 16px; overflow: hidden;
transition: box-shadow .25s, transform .25s;
}
.crosssell-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.13); transform: translateY(-5px); }
.crosssell-img {
height: 186px; background: linear-gradient(135deg, #E0E0E0, #FAFAFA);
display: grid; place-items: center; overflow: hidden;
}
.crosssell-img img { width: 100%; height: 100%; object-fit: cover; }
.crosssell-img svg { width: 50px; height: 50px; stroke: #000000; fill: none; stroke-width: .9; opacity: .38; }
.crosssell-body { padding: 16px; }
.crosssell-name {
font-family: 'Cormorant Garamond', serif; font-size: 1rem;
font-weight: 500; color: #000000; margin-bottom: 4px; line-height: 1.3;
}
.crosssell-price {
font-family: 'Jost', sans-serif; font-size: .8rem;
color: #000000; font-weight: 500; margin-bottom: 12px;
}
.crosssell-add-btn {
width: 100%; background: none; border: 1.5px solid #000000;
color: #000000; border-radius: 100px; padding: 8px;
font-family: 'Jost', sans-serif; font-size: .7rem; letter-spacing: .1em;
text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s;
}
.crosssell-add-btn:hover { background: #000000; color: #fff; }
/* ── Empty Cart ── */
.cart-empty {
grid-column: 1 / -1; display: flex; flex-direction: column;
align-items: center; text-align: center; padding: 80px 40px;
}
.cart-empty-art { width: 180px; height: 180px; margin: 0 auto 36px; opacity: .55; }
.cart-empty h2 {
font-family: 'Cormorant Garamond', serif; font-size: 2.2rem;
font-weight: 400; color: #000000; margin-bottom: 12px;
}
.cart-empty h2 em { font-style: italic; color: #000000; }
.cart-empty p {
font-family: 'Jost', sans-serif; font-size: .88rem;
color: #8A8A8A; max-width: 360px; line-height: 1.75; margin-bottom: 32px;
}
.cart-empty-btn {
display: inline-flex; align-items: center; gap: 10px;
background: linear-gradient(135deg, #4A4A4A, #000000); color: #fff;
border-radius: 100px; padding: 14px 32px;
font-family: 'Jost', sans-serif; font-size: .8rem; letter-spacing: .12em;
text-transform: uppercase; text-decoration: none; font-weight: 500;
transition: transform .2s, box-shadow .2s;
}
.cart-empty-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.cart-empty-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* ── Responsive ── */
@media (max-width: 1100px) {
.cart-body { padding: 48px 44px 80px; }
.cart-layout { grid-template-columns: 1fr 340px; gap: 28px; }
.cart-crosssell { padding: 60px 44px; }
}
@media (max-width: 900px) {
.cart-hero { padding: 108px 32px 52px; }
.cart-body { padding: 40px 28px 64px; }
.cart-layout { grid-template-columns: 1fr; }
.cart-summary { position: static; }
.cart-crosssell { padding: 52px 28px; }
.cart-steps { display: none; }
}
@media (max-width: 600px) {
.cart-hero { padding: 90px 20px 40px; }
.cart-body { padding: 28px 16px 52px; }
.cart-item { grid-template-columns: 78px 1fr; gap: 14px; padding: 16px; }
.cart-item-right { flex-wrap: wrap; }
.shipping-progress-wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
.cart-crosssell { padding: 40px 16px; }
.summary-body { padding: 20px 20px; }
.summary-header { padding: 20px 20px 18px; }
.summary-trust { padding: 16px 20px 20px; }
}
/* ============================================================
CONTACT
============================================================ */
/* ═══════════════════════════════════════════
CONTACT PAGE
═══════════════════════════════════════════ */
/* Shorthand aliases that map to the global emerald palette */
:root {
--em: var(--gold);
--em-l: var(--gold-l);
--em-ll: #5DC992;
--em-d: var(--gold-d);
--em-bg: rgba(27,107,69,.09);
--em-br: rgba(27,107,69,.22);
--em-sh: rgba(27,107,69,.28);
}
/* ─── Hero ─── */
.ct-hero {
background: radial-gradient(ellipse 80% 60% at 50% 0%, #091F14 0%, #071A10 40%, #04110A 100%);
position: relative;
overflow: hidden;
padding: calc(var(--nav-h) + 60px) 80px 100px;
display: flex;
align-items: center;
justify-content: center;
}
/* Override orb colours for this page */
.ct-hero .orb-1 { background: radial-gradient(circle, rgba(46,155,101,.13) 0%, transparent 70%); }
.ct-hero .orb-2 { background: radial-gradient(circle, rgba(19,79,51,.18) 0%, transparent 70%); }
.ct-hero .orb-3 { background: radial-gradient(circle, rgba(27,107,69,.10) 0%, transparent 70%); }
/* Grid lines in emerald tint */
.ct-hero .hero-grid {
background-image:
linear-gradient(rgba(46,155,101,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(46,155,101,.05) 1px, transparent 1px);
}
.ct-hero-inner {
position: relative;
z-index: 2;
text-align: center;
max-width: 680px;
width: 100%;
}
/* Badge override — emerald instead of gold */
.ct-hero .hero-badge {
background: rgba(27,107,69,.15);
border-color: rgba(27,107,69,.35);
color: var(--em-l);
}
.ct-hero .hero-badge span { background: var(--em-l); }
.ct-breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 11px;
font-weight: 500;
letter-spacing: .08em;
color: rgba(255,255,255,.3);
margin-bottom: 28px;
}
.ct-breadcrumb a { color: rgba(255,255,255,.3); text-decoration: none; transition: color .2s; }
.ct-breadcrumb a:hover { color: var(--em-l); }
.ct-breadcrumb span { color: rgba(255,255,255,.15); }
.ct-hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(46px, 6.5vw, 84px);
font-weight: 300;
color: #fff;
line-height: 1.08;
margin-bottom: 18px;
}
.ct-hero-title em {
font-style: italic;
background: linear-gradient(135deg, var(--em-ll) 0%, var(--em-l) 50%, var(--em) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ct-hero-desc {
font-size: 15px;
color: rgba(255,255,255,.45);
line-height: 1.8;
max-width: 480px;
margin: 0 auto;
}
/* ─── Hero entrance — fade-up stagger when section enters viewport ─── */
.ct-hero {
--ct-ease: cubic-bezier(.22,.61,.36,1);
}
.ct-hero [data-a] {
opacity: 0;
transform: translateY(14px);
transition:
opacity .85s var(--ct-ease),
transform .85s var(--ct-ease);
transition-delay: calc((var(--ai, 0)) * 90ms + 80ms);
}
.ct-hero.is-in [data-a] {
opacity: 1;
transform: translateY(0);
}
.ct-hero [data-a="1"] { --ai: 0; }
.ct-hero [data-a="2"] { --ai: 1; }
.ct-hero [data-a="3"] { --ai: 2; }
.ct-hero [data-a="4"] { --ai: 4; }
/* Title clip-reveal layered over the parent's fade */
.ct-hero-title .ct-line {
display: inline-block;
overflow: hidden;
padding-bottom: .06em;
clip-path: inset(0 0 100% 0);
transition: clip-path 1s var(--ct-ease);
transition-delay: 320ms;
}
.ct-hero.is-in .ct-hero-title .ct-line {
clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
.ct-hero [data-a],
.ct-hero-title .ct-line {
transition: none !important;
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
}
}
/* ─── Info Cards ─── */
.ct-cards-sec {
background: #F3F8F5;
padding: 0 80px;
}
.ct-cards {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
transform: translateY(-56px);
}
.ct-info-card {
background: #fff;
border: 1px solid #D8EDE2;
border-radius: 22px;
padding: 36px 32px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 24px rgba(27,107,69,.06);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ct-info-card:hover {
transform: translateY(-7px);
box-shadow: 0 20px 56px rgba(27,107,69,.13);
border-color: rgba(27,107,69,.3);
}
.ct-ico {
width: 56px;
height: 56px;
background: var(--em-bg);
border: 1px solid var(--em-br);
border-radius: 16px;
display: grid;
place-items: center;
color: var(--em);
margin-bottom: 22px;
transition: background .3s, color .3s, border-color .3s;
flex-shrink: 0;
}
.ct-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ct-info-card:hover .ct-ico { background: var(--em); color: #fff; border-color: var(--em); }
.ct-info-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 500;
color: #1A1A2E;
margin-bottom: 10px;
}
.ct-info-card p {
font-size: 13.5px;
color: var(--muted);
line-height: 1.85;
margin-bottom: 22px;
flex: 1;
}
.ct-link {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--em);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
border-bottom: 1px solid rgba(27,107,69,.3);
padding-bottom: 2px;
transition: gap .2s, color .2s, border-color .2s;
}
.ct-link:hover { gap: 12px; color: var(--em-l); border-color: var(--em-l); }
.ct-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5; }
/* ─── Main Section ─── */
.ct-main-sec {
background: #F3F8F5;
padding: 0 80px 110px;
}
.ct-split {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 64px;
align-items: start;
}
/* ─── Form Side ─── */
.ct-form-eyebrow { margin-bottom: 8px; }
/* Eyebrow override — emerald instead of wine */
.ct-main-sec .eyebrow { color: var(--em); }
.ct-form-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(30px, 3.5vw, 46px);
font-weight: 300;
color: #1A1A2E;
line-height: 1.15;
margin-bottom: 36px;
}
.ct-form-title em { font-style: italic; color: var(--em); }
.ct-form { display: flex; flex-direction: column; gap: 20px; }
.ct-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.ct-field {
position: relative;
display: flex;
flex-direction: column;
}
.ct-field input,
.ct-field textarea {
background: #fff;
border: 1.5px solid #D8EDE2;
border-radius: 14px;
padding: 26px 18px 10px;
font-family: 'Jost', sans-serif;
font-size: 14px;
font-weight: 400;
color: #1A1A2E;
outline: none;
transition: border-color .3s, box-shadow .3s;
width: 100%;
}
.ct-field input:hover,
.ct-field textarea:hover { border-color: #BFE3D2; }
.ct-field input:focus,
.ct-field textarea:focus {
border-color: var(--em);
box-shadow: 0 0 0 3px rgba(27,107,69,.14);
}
/* Date field — themed to match (light scheme + emerald-tinted picker) */
.ct-field input[type="date"] {
color-scheme: light;
cursor: text;
}
.ct-field input[type="date"]::-webkit-calendar-picker-indicator {
width: 17px; height: 17px;
cursor: pointer;
border-radius: 6px;
/* recolour the picker glyph toward emerald */
filter: invert(28%) sepia(64%) saturate(640%) hue-rotate(105deg) brightness(92%) contrast(90%);
opacity: .75;
transition: opacity .2s, background .2s;
}
.ct-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
background: rgba(27,107,69,.12);
}
.ct-field input[type="date"]::-webkit-inner-spin-button { display: none; }
.ct-field textarea {
resize: none;
min-height: 150px;
line-height: 1.65;
}
.ct-field label {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
font-family: 'Jost', sans-serif;
font-size: 13.5px;
color: var(--muted);
pointer-events: none;
transition: top .22s ease, transform .22s ease, font-size .22s ease, color .22s ease, font-weight .22s ease, letter-spacing .22s ease;
}
.ct-field.ct-textarea-wrap label { top: 22px; transform: none; }
.ct-field input:focus + label,
.ct-field input:not(:placeholder-shown) + label,
.ct-field input[type="date"] + label {
top: 10px; transform: none;
font-size: 9.5px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--em);
}
.ct-field textarea:focus + label,
.ct-field textarea:not(:placeholder-shown) + label {
top: 8px;
font-size: 9.5px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--em);
}
/* Select */
.ct-select-outer { position: relative; display: flex; flex-direction: column; }
.ct-select-outer::after {
content: '';
position: absolute; right: 18px; top: 50%; transform: translateY(-50%) rotate(0deg);
width: 0; height: 0;
border-left: 5px solid transparent; border-right: 5px solid transparent;
border-top: 5px solid var(--muted);
pointer-events: none;
transition: border-top-color .3s, transform .3s ease;
}
.ct-select-outer:hover::after { border-top-color: #1A1A2E; }
.ct-select-outer:focus-within::after {
border-top-color: var(--em);
transform: translateY(-50%) rotate(180deg);
}
.ct-select-outer select {
background: #fff;
border: 1.5px solid #D8EDE2;
border-radius: 14px;
padding: 18px 42px 18px 18px;
font-family: 'Jost', sans-serif; font-size: 13.5px; color: var(--muted);
outline: none; cursor: pointer; appearance: none; -webkit-appearance: none;
color-scheme: light;
transition: border-color .3s, box-shadow .3s, color .3s;
width: 100%;
}
.ct-select-outer select:hover { border-color: #BFE3D2; }
.ct-select-outer select:focus { border-color: var(--em); box-shadow: 0 0 0 3px rgba(27,107,69,.14); }
.ct-select-outer select.has-val { color: #1A1A2E; padding-top: 26px; padding-bottom: 10px; }
.ct-select-outer option { padding: 10px 14px; }
/* ══════════════════════════════════════════
SHARED CUSTOM CONTROLS — base structure
Pages re-skin colors/borders via scoped overrides
(.ct-form .ct-dd ..., .custom-design-page .cd-form ...,
.bridal-page .br-form ..., .pp-sort-dd ...). Without
these base rules the shows as a bulleted list and
the button collapses — see form-controls.js.
══════════════════════════════════════════ */
/* ── Custom dropdown (.bv-dd) ── */
.bv-dd { position: relative; }
.bv-dd-btn {
width: 100%;
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 14px 6px 18px;
background: var(--cream);
border: 1.5px solid var(--border);
border-radius: 12px;
font-family: 'Jost', sans-serif;
font-size: 14px;
color: var(--ink);
cursor: pointer;
text-align: left;
outline: none;
transition: border-color .25s, box-shadow .25s, background .25s;
}
.bv-dd-btn:focus,
.bv-dd.open .bv-dd-btn {
border-color: #4A4A4A;
background: #fff;
box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.bv-dd-display {
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bv-dd-arrow {
flex-shrink: 0;
width: 18px; height: 18px;
fill: none; stroke: #bbb; stroke-width: 2;
transition: transform .3s cubic-bezier(.22,.61,.36,1), stroke .25s;
}
.bv-dd.open .bv-dd-arrow { transform: rotate(180deg); stroke: #4A4A4A; }
.bv-dd-lbl {
position: absolute;
top: 18px; left: 18px;
font-family: 'Jost', sans-serif; font-size: 13.5px;
color: #999; pointer-events: none; transition: all .2s;
}
.bv-dd.open .bv-dd-lbl,
.bv-dd.has-val .bv-dd-lbl {
top: 7px; font-size: 10px;
letter-spacing: .06em; text-transform: uppercase; color: #4A4A4A;
}
.bv-dd-list {
position: absolute;
top: calc(100% + 8px);
left: 0; right: 0;
background: #fff;
border: 1.5px solid var(--border);
border-radius: 14px;
box-shadow: 0 16px 48px rgba(8,6,15,.13), 0 4px 12px rgba(8,6,15,.07);
overflow: hidden;
list-style: none;
z-index: 200;
opacity: 0;
transform: translateY(-6px) scale(.98);
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
max-height: 240px;
overflow-y: auto;
margin: 0; padding: 0;
}
.bv-dd.open .bv-dd-list {
opacity: 1; transform: none; pointer-events: auto;
}
.bv-dd-list::-webkit-scrollbar { width: 4px; }
.bv-dd-list::-webkit-scrollbar-track { background: transparent; }
.bv-dd-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.bv-dd-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 18px;
font-family: 'Jost', sans-serif;
font-size: 13.5px; font-weight: 400;
color: #444; cursor: pointer;
border-bottom: 1px solid #f5f5f5;
list-style: none;
transition: background .15s, color .15s;
}
.bv-dd-item:last-child { border-bottom: none; }
.bv-dd-item:hover { background: rgba(0,0,0,.05); color: #0F0F0F; }
.bv-dd-item.selected {
background: rgba(0,0,0,.06); color: #0F0F0F; font-weight: 500;
}
.bv-dd-item.selected::after {
content: '';
flex-shrink: 0;
width: 16px; height: 16px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* ── Custom calendar (.bv-cal) — used by bridal pages ── */
.bv-cal { position: relative; }
.bv-cal-trigger {
width: 100%;
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 12px 6px 18px;
background: var(--cream);
border: 1.5px solid var(--border);
border-radius: 12px;
font-family: 'Jost', sans-serif;
font-size: 14px;
color: var(--ink);
cursor: pointer;
text-align: left;
outline: none;
transition: border-color .25s, box-shadow .25s, background .25s;
}
.bv-cal-trigger:focus,
.bv-cal.open .bv-cal-trigger {
border-color: #4A4A4A;
background: #fff;
box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.bv-cal-display { flex: 1; font-size: 14px; color: var(--ink); min-height: 1em; }
.bv-cal-ico {
flex-shrink: 0;
width: 34px; height: 34px;
border-radius: 8px;
background: rgba(0,0,0,.05);
display: grid; place-items: center;
transition: background .25s;
}
.bv-cal-ico svg { width: 16px; height: 16px; stroke: #4A4A4A; fill: none; transition: stroke .25s; }
.bv-cal.open .bv-cal-ico,
.bv-cal-trigger:focus .bv-cal-ico { background: #0F0F0F; }
.bv-cal.open .bv-cal-ico svg,
.bv-cal-trigger:focus .bv-cal-ico svg { stroke: #fff; }
.bv-cal-lbl {
position: absolute;
top: 18px; left: 18px;
font-family: 'Jost', sans-serif;
font-size: 13.5px; color: #999;
pointer-events: none; transition: all .2s;
}
.bv-cal.open .bv-cal-lbl,
.bv-cal.has-val .bv-cal-lbl {
top: 7px; font-size: 10px;
letter-spacing: .06em; text-transform: uppercase; color: #4A4A4A;
}
.bv-cal-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 316px;
background: #fff;
border: 1.5px solid var(--border);
border-radius: 20px;
box-shadow: 0 24px 64px rgba(8,6,15,.14), 0 6px 18px rgba(8,6,15,.07);
z-index: 300;
overflow: hidden;
opacity: 0;
transform: translateY(-8px) scale(.97);
pointer-events: none;
transition: opacity .22s ease, transform .22s ease;
}
.bv-cal-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.bv-cal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 16px 12px;
border-bottom: 1px solid var(--cream);
gap: 8px;
}
.bv-cal-title {
flex: 1; text-align: center;
font-family: 'Cormorant Garamond', serif;
font-size: 19px; font-weight: 500; color: var(--ink);
}
.bv-cal-nav {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 8px;
background: var(--cream);
border: 1px solid var(--border);
cursor: pointer; outline: none;
display: grid; place-items: center;
transition: all .2s;
}
.bv-cal-nav:hover { background: rgba(0,0,0,.05); border-color: #4A4A4A; }
.bv-cal-nav svg { width: 13px; height: 13px; fill: none; stroke: #777; stroke-width: 2.5; transition: stroke .2s; }
.bv-cal-nav:hover svg { stroke: #0F0F0F; }
.bv-cal-wdays {
display: grid; grid-template-columns: repeat(7, 1fr);
padding: 10px 14px 2px;
}
.bv-cal-wdays span {
text-align: center;
font-family: 'Jost', sans-serif;
font-size: 10px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: #c0c0c0; padding: 4px 0;
}
.bv-cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr);
padding: 2px 14px 10px; gap: 2px;
}
.bv-cal-day {
aspect-ratio: 1;
display: grid; place-items: center;
border-radius: 50%;
border: 2px solid transparent;
background: none;
font-family: 'Jost', sans-serif;
font-size: 13px; color: #333;
cursor: pointer; outline: none; padding: 0;
min-height: 34px;
transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.bv-cal-day--empty { pointer-events: none; }
.bv-cal-day:not(:disabled):not(.bv-cal-day--sel):hover {
background: rgba(0,0,0,.05); color: #0F0F0F;
}
.bv-cal-day--today {
border-color: #4A4A4A; color: #0F0F0F; font-weight: 600;
}
.bv-cal-day--sel {
background: #0F0F0F !important;
border-color: #0F0F0F !important;
color: #fff !important;
font-weight: 700;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.bv-cal-day--past { color: #d0d0d0; cursor: not-allowed; }
.bv-cal-day--past:hover { background: none; color: #d0d0d0; }
.bv-cal-foot {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 18px 14px;
border-top: 1px solid var(--cream);
}
.bv-cal-today-btn,
.bv-cal-clear-btn {
border: none; cursor: pointer; outline: none;
font-family: 'Jost', sans-serif;
font-size: 11.5px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
padding: 7px 14px; border-radius: 8px;
transition: all .2s;
}
.bv-cal-today-btn { background: rgba(0,0,0,.05); color: #0F0F0F; }
.bv-cal-today-btn:hover { background: #0F0F0F; color: #fff; }
.bv-cal-clear-btn { background: none; color: #bbb; }
.bv-cal-clear-btn:hover { color: #e53e3e; background: rgba(229,62,62,.07); }
/* Custom dropdown (.bv-dd) on the contact form — align with the field styling */
.ct-form .ct-dd .bv-dd-btn {
min-height: 56px;
padding: 24px 14px 8px 18px;
background: #fff;
border: 1.5px solid #D8EDE2;
border-radius: 14px;
}
.ct-form .ct-dd .bv-dd-btn:focus,
.ct-form .ct-dd.open .bv-dd-btn {
border-color: var(--em);
box-shadow: 0 0 0 3px rgba(27,107,69,.14);
}
.ct-form .ct-dd .bv-dd-lbl { top: 18px; left: 18px; font-size: 13.5px; }
.ct-form .ct-dd.open .bv-dd-lbl,
.ct-form .ct-dd.has-val .bv-dd-lbl {
top: 9px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
}
.ct-form .ct-dd .bv-dd-list { border-radius: 14px; }
.ct-select-label {
position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
font-family: 'Jost', sans-serif; font-size: 13.5px; color: var(--muted);
pointer-events: none;
transition: top .22s ease, transform .22s ease, font-size .22s ease, color .22s ease, font-weight .22s ease, letter-spacing .22s ease;
}
.ct-select-outer select.has-val ~ .ct-select-label,
.ct-select-outer select:focus ~ .ct-select-label {
top: 10px; transform: none;
font-size: 9.5px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--em);
}
/* Submit */
.ct-submit {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 44px;
background: linear-gradient(135deg, var(--em-ll) 0%, var(--em-l) 45%, var(--em) 100%);
color: #fff;
font-family: 'Jost', sans-serif; font-size: 11.5px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
border: none; border-radius: 100px; cursor: pointer;
box-shadow: 0 4px 24px var(--em-sh);
transition: transform .2s, box-shadow .2s;
margin-top: 4px;
}
.ct-submit:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(27,107,69,.45); }
.ct-submit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .2s; }
.ct-submit:hover svg { transform: translateX(5px); }
/* Success */
.ct-success {
display: none; align-items: center; gap: 16px;
padding: 22px 26px;
background: rgba(27,107,69,.07);
border: 1.5px solid rgba(27,107,69,.25);
border-radius: 18px;
color: var(--em-d); font-size: 14px; line-height: 1.55; margin-top: 4px;
}
.ct-success.show { display: flex; }
.ct-success-icon {
width: 44px; height: 44px; flex-shrink: 0;
background: var(--em); border-radius: 50%;
display: grid; place-items: center; color: #fff;
}
.ct-success-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.ct-success strong { display: block; font-weight: 700; margin-bottom: 2px; }
/* ─── Store Card Side ─── */
.ct-store-card {
background: #fff;
border: 1px solid #D8EDE2;
border-radius: 24px; overflow: hidden;
box-shadow: 0 8px 40px rgba(27,107,69,.08);
}
/* Decorative map area — green tones */
.ct-map-area {
height: 240px;
background: linear-gradient(160deg, #B8DAC8 0%, #96C8AE 35%, #7BB89A 60%, #5E9F82 100%);
position: relative; overflow: hidden;
}
.ct-map-area::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size: 38px 38px;
}
.ct-road-h {
position: absolute; left: 0; right: 0; height: 10px;
background: rgba(255,255,255,.55); top: 45%;
}
.ct-road-h::before {
content: ''; position: absolute; inset: 3px 0;
background: repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 24px, transparent 24px 40px);
}
.ct-road-v {
position: absolute; top: 0; bottom: 0; width: 10px;
background: rgba(255,255,255,.55); left: 38%;
}
.ct-road-v::before {
content: ''; position: absolute; inset: 0 3px;
background: repeating-linear-gradient(180deg, rgba(255,255,255,.8) 0 24px, transparent 24px 40px);
}
.ct-block { position: absolute; background: rgba(255,255,255,.35); border-radius: 4px; }
.ct-map-pin-wrap {
position: absolute; top: 44%; left: 39%;
transform: translate(-50%, -100%);
display: flex; flex-direction: column; align-items: center; gap: 0; z-index: 2;
}
.ct-map-pin {
width: 36px; height: 36px;
background: var(--em-d);
border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
border: 3px solid #fff; box-shadow: 0 4px 18px rgba(0,0,0,.3);
display: grid; place-items: center; position: relative;
}
.ct-map-pin::after {
content: ''; width: 10px; height: 10px;
background: #fff; border-radius: 50%; transform: rotate(45deg);
}
.ct-map-shadow {
width: 16px; height: 5px;
background: rgba(0,0,0,.2); border-radius: 50%;
margin-top: 2px; filter: blur(2px);
}
.ct-map-tag {
background: rgba(255,255,255,.97); border-radius: 8px;
padding: 5px 12px;
font-family: 'Jost', sans-serif; font-size: 10.5px; font-weight: 700;
color: var(--em-d); white-space: nowrap;
box-shadow: 0 2px 12px rgba(0,0,0,.12);
letter-spacing: .04em; margin-top: 10px;
}
.ct-store-body { padding: 32px; }
.ct-store-body h3 {
font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500;
color: #1A1A2E; margin-bottom: 24px;
}
.ct-detail-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.ct-detail-icon {
width: 38px; height: 38px; flex-shrink: 0;
background: var(--em-bg);
border: 1px solid var(--em-br);
border-radius: 11px; display: grid; place-items: center; color: var(--em);
}
.ct-detail-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ct-detail-text { font-size: 13px; color: #1A1A2E; line-height: 1.7; }
.ct-detail-text strong { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
/* Phone & email links inside the store card read as plain text — no
underline, no link color. Still keyboard/click-actionable via tel:/mailto:. */
.ct-detail-text a {
color: inherit;
text-decoration: none;
border-bottom: 0;
}
.ct-detail-text a:hover { color: var(--em, #1B6B45); }
.ct-store-divider { height: 1px; background: #D8EDE2; margin: 20px 0; }
.ct-store-actions { display: flex; gap: 10px; margin-top: 24px; }
.ct-dir-btn {
flex: 1; padding: 13px 16px;
background: var(--em); color: #fff;
font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
border: none; border-radius: 100px; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
transition: background .2s, transform .2s, box-shadow .2s;
}
.ct-dir-btn:hover { background: var(--em-l); transform: translateY(-2px); box-shadow: 0 6px 20px var(--em-sh); }
.ct-dir-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.ct-call-btn {
flex: 1; padding: 13px 16px;
background: transparent; color: #1A1A2E;
font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
border: 1.5px solid #D8EDE2; border-radius: 100px; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
transition: border-color .2s, color .2s, transform .2s;
}
.ct-call-btn:hover { border-color: var(--em); color: var(--em); transform: translateY(-2px); }
.ct-call-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Social strip */
.ct-social-strip {
margin-top: 18px; background: #fff;
border: 1px solid #D8EDE2; border-radius: 20px;
padding: 22px 28px; display: flex; align-items: center; gap: 20px;
}
.ct-social-label { font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ct-social-links { display: flex; gap: 10px; }
.ct-soc-ico {
width: 40px; height: 40px;
border: 1px solid #D8EDE2; border-radius: 12px;
display: grid; place-items: center; color: var(--muted);
text-decoration: none; transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.ct-soc-ico:hover { border-color: var(--em); color: var(--em); background: var(--em-bg); transform: translateY(-3px); }
.ct-soc-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* ─── Responsive ─── */
@media (max-width: 1100px) {
.ct-split { grid-template-columns: 1fr; gap: 48px; }
.ct-form-title { text-align: center; }
.ct-form-eyebrow { text-align: center; }
.ct-submit { align-self: center; }
}
@media (max-width: 900px) {
.ct-hero { padding: calc(var(--nav-h) + 40px) 40px 80px; }
.ct-cards-sec { padding: 0 40px; }
.ct-main-sec { padding: 0 40px 80px; }
.ct-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.ct-hero { padding: calc(var(--nav-h) + 28px) 22px 72px; }
.ct-cards-sec { padding: 0 22px; }
.ct-main-sec { padding: 0 22px 60px; }
.ct-cards { grid-template-columns: 1fr; transform: translateY(-40px); }
.ct-field-row { grid-template-columns: 1fr; }
.ct-store-actions { flex-direction: column; }
.ct-social-strip { flex-wrap: wrap; gap: 12px; }
}
/* ============================================================
WISHLIST
============================================================ */
/* ═══════════════════════════════════════════════════════════
WISHLIST PAGE — Beyond Expression Fine Jewellery
═══════════════════════════════════════════════════════════ */
/* ── Hero ── */
.wl-hero {
position: relative;
background: #141414;
padding: 130px 80px 64px;
overflow: hidden;
}
.wl-hero .orb { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; }
.wl-hero .orb-1 { width: 440px; height: 440px; background: radial-gradient(circle, rgba(0,0,0,.26) 0%, transparent 70%); top: -120px; left: -80px; }
.wl-hero .orb-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(74,74,74,.16) 0%, transparent 70%); bottom: -40px; right: -40px; }
.wl-hero .orb-3 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(0,0,0,.2) 0%, transparent 70%); top: 40%; right: 30%; }
.wl-hero .hero-grid {
position: absolute; inset: 0;
background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
opacity: .5;
}
.wl-hero-inner { position: relative; z-index: 2; }
/* Breadcrumb */
.wl-breadcrumb {
display: flex; align-items: center; gap: 8px;
font-family: 'Jost', sans-serif; font-size: .73rem; letter-spacing: .12em;
text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 24px;
}
.wl-breadcrumb a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .2s; }
.wl-breadcrumb a:hover { color: #fff; }
.wl-breadcrumb span.sep { color: rgba(255,255,255,.25); }
/* Hero top row */
.wl-hero-top {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
}
.wl-hero h1 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 400; color: #fff; line-height: 1.1; margin: 0;
}
.wl-hero h1 em { font-style: italic; color: #FFFFFF; }
/* Hero action buttons */
.wl-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.wl-share-btn {
display: flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.78); border-radius: 100px; padding: 10px 20px;
font-family: 'Jost', sans-serif; font-size: .73rem; letter-spacing: .1em;
text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s;
}
.wl-share-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.wl-share-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.wl-cart-all-btn {
display: flex; align-items: center; gap: 8px;
background: #000000; border: 1px solid #000000; color: #fff;
border-radius: 100px; padding: 10px 20px;
font-family: 'Jost', sans-serif; font-size: .73rem; letter-spacing: .1em;
text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s;
}
.wl-cart-all-btn:hover { background: #4A4A4A; border-color: #4A4A4A; }
.wl-cart-all-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Stats row */
.wl-hero-stats {
display: flex; gap: 36px; margin-top: 32px; flex-wrap: wrap;
padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08);
}
.wl-stat {
font-family: 'Jost', sans-serif; font-size: .7rem; letter-spacing: .12em;
text-transform: uppercase; color: rgba(255,255,255,.38);
}
.wl-stat strong {
font-family: 'Cormorant Garamond', serif; font-size: 1.6rem;
font-weight: 400; color: #fff; display: block; letter-spacing: 0;
text-transform: none; line-height: 1.1; margin-bottom: 2px;
}
/* ── Filter / Sort Bar ── */
.wl-filter-bar {
background: #fff; border-bottom: 1px solid #E0E0E0;
padding: 0 80px; position: sticky; top: 70px; z-index: 100;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.wl-filter-inner {
display: flex; align-items: center; overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none;
}
.wl-filter-inner::-webkit-scrollbar { display: none; }
.wl-filter-pill {
flex-shrink: 0; padding: 16px 20px;
font-family: 'Jost', sans-serif; font-size: .76rem; letter-spacing: .1em;
text-transform: uppercase; color: #8A8A8A; background: none; border: none;
border-bottom: 2px solid transparent; cursor: pointer;
transition: color .2s, border-color .2s; white-space: nowrap;
}
.wl-filter-pill:hover { color: #000000; }
.wl-filter-pill.active { color: #000000; border-bottom-color: #000000; }
.wl-filter-sep { flex: 1; }
.wl-sort-wrap {
flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 12px 0;
}
.wl-sort-label {
font-family: 'Jost', sans-serif; font-size: .72rem;
letter-spacing: .08em; text-transform: uppercase; color: #8A8A8A; white-space: nowrap;
}
.wl-sort-select {
font-family: 'Jost', sans-serif; font-size: .76rem; color: #000000;
background: none; border: none; cursor: pointer;
padding: 4px 8px; border-radius: 6px; transition: background .2s;
}
.wl-sort-select:hover { background: #FAFAFA; }
.wl-sort-select:focus { outline: 1px solid #000000; border-radius: 4px; }
/* ── Wishlist Body ── */
.wl-body { background: #FAFAFA; padding: 56px 80px 100px; min-height: 400px; }
.wl-body-inner { max-width: 1340px; margin: 0 auto; }
/* Section header */
.wl-body-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
}
.wl-body-header h2 {
font-family: 'Cormorant Garamond', serif; font-size: 1.6rem;
font-weight: 400; color: #000000;
}
.wl-view-toggle { display: flex; gap: 6px; }
.wl-view-btn {
width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E0E0E0;
background: none; cursor: pointer; display: grid; place-items: center;
transition: background .2s, border-color .2s; color: #8A8A8A;
}
.wl-view-btn:hover { border-color: #000000; color: #000000; }
.wl-view-btn.active { background: #000000; border-color: #000000; color: #fff; }
.wl-view-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
/* ── Masonry / Column Grid ── */
.wl-grid {
columns: 4; column-gap: 20px;
}
.wl-card {
break-inside: avoid; background: #fff; border: 1px solid #E0E0E0;
border-radius: 18px; overflow: hidden; margin-bottom: 20px;
transition: box-shadow .3s, transform .3s, border-color .3s;
position: relative; display: block;
}
.wl-card:hover {
box-shadow: 0 18px 52px rgba(0,0,0,.14); transform: translateY(-5px);
border-color: rgba(0,0,0,.3);
}
.wl-card.hiding {
opacity: 0; transform: scale(.94) translateY(-8px);
transition: opacity .35s, transform .35s; pointer-events: none;
}
/* Card image */
.wl-card-img {
position: relative; overflow: hidden;
background: linear-gradient(135deg, #E0E0E0, #FAFAFA);
}
.wl-card-img img {
width: 100%; display: block; object-fit: cover;
transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.wl-card:hover .wl-card-img img { transform: scale(1.07); }
.wl-card-img-ph {
display: flex; align-items: center; justify-content: center; width: 100%;
}
.wl-card-img-ph svg { stroke: #000000; fill: none; stroke-width: .9; opacity: .32; }
/* Crosssell image fill (shared with cart crosssell) */
.crosssell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hover overlay (slides up from bottom) */
.wl-card-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
padding: 40px 14px 14px;
display: flex; gap: 8px;
transform: translateY(100%);
transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.wl-card:hover .wl-card-overlay { transform: translateY(0); }
.wl-card-add-btn {
flex: 1; background: #000000; color: #fff; border: none; border-radius: 8px;
padding: 10px; font-family: 'Jost', sans-serif; font-size: .7rem;
letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
transition: background .2s; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.wl-card-add-btn:hover { background: #4A4A4A; }
.wl-card-add-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.wl-card-remove-btn {
width: 38px; height: 38px; background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
color: rgba(255,255,255,.7); cursor: pointer;
display: grid; place-items: center; flex-shrink: 0;
transition: background .2s, color .2s, border-color .2s;
}
.wl-card-remove-btn:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.wl-card-remove-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Heart button (top-right corner) */
.wl-heart-btn {
position: absolute; top: 12px; right: 12px;
width: 34px; height: 34px; background: #fff; border: none; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,.12); z-index: 5;
transition: transform .3s, box-shadow .3s;
}
.wl-heart-btn:hover { transform: scale(1.16); box-shadow: 0 4px 18px rgba(0,0,0,.16); }
.wl-heart-btn svg {
width: 16px; height: 16px; stroke: #e11d48; fill: #e11d48;
stroke-width: 1.5; transition: transform .3s;
}
.wl-heart-btn:hover svg { transform: scale(1.2); }
/* Tag pill (top-left) */
.wl-card-tag {
position: absolute; top: 12px; left: 12px;
background: rgba(0,0,0,.72); backdrop-filter: blur(8px);
color: #fff; font-family: 'Jost', sans-serif; font-size: .6rem;
letter-spacing: .12em; text-transform: uppercase;
padding: 4px 10px; border-radius: 100px;
}
.wl-card-tag.sale { background: rgba(220,38,38,.8); }
.wl-card-tag.new { background: rgba(0,0,0,.85); }
/* Card body */
.wl-card-body { padding: 15px 16px 16px; }
.wl-card-category {
font-family: 'Jost', sans-serif; font-size: .62rem; letter-spacing: .14em;
text-transform: uppercase; color: #000000; margin-bottom: 5px; font-weight: 500;
}
.wl-card-name {
font-family: 'Cormorant Garamond', serif; font-size: 1.06rem;
font-weight: 500; color: #000000; line-height: 1.3; margin-bottom: 3px;
}
.wl-card-metal {
font-family: 'Jost', sans-serif; font-size: .7rem; color: #8A8A8A; margin-bottom: 10px;
}
.wl-card-price-row { display: flex; align-items: baseline; gap: 8px; }
.wl-card-price {
font-family: 'Cormorant Garamond', serif; font-size: 1.12rem;
font-weight: 600; color: #000000;
}
.wl-card-price-old {
font-family: 'Jost', sans-serif; font-size: .7rem;
color: #8A8A8A; text-decoration: line-through;
}
.wl-card-date {
font-family: 'Jost', sans-serif; font-size: .62rem; color: #8A8A8A;
margin-top: 10px; display: flex; align-items: center; gap: 5px;
}
.wl-card-date svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
/* ── Empty State ── */
.wl-empty {
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 80px 40px;
}
.wl-empty-art { width: 200px; height: 200px; margin: 0 auto 40px; }
.wl-empty h2 {
font-family: 'Cormorant Garamond', serif; font-size: 2.3rem;
font-weight: 400; color: #000000; margin-bottom: 12px;
}
.wl-empty h2 em { font-style: italic; color: #000000; }
.wl-empty p {
font-family: 'Jost', sans-serif; font-size: .88rem;
color: #8A8A8A; max-width: 380px; line-height: 1.75; margin-bottom: 36px;
}
.wl-empty-cta {
display: inline-flex; align-items: center; gap: 10px;
background: linear-gradient(135deg, #4A4A4A, #000000); color: #fff;
border-radius: 100px; padding: 14px 32px;
font-family: 'Jost', sans-serif; font-size: .8rem; letter-spacing: .12em;
text-transform: uppercase; text-decoration: none; font-weight: 500;
transition: transform .2s, box-shadow .2s;
}
.wl-empty-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.wl-empty-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* ── Recommended Section ── */
.wl-recommend {
background: #FAFAFA; padding: 80px 80px 100px;
border-top: 1px solid #E0E0E0;
}
.wl-recommend-inner { max-width: 1340px; margin: 0 auto; }
/* Section header row */
.wl-rec-header {
display: flex; align-items: flex-end;
justify-content: space-between; gap: 24px;
margin-bottom: 44px; flex-wrap: wrap;
}
.wl-rec-header-left .eyebrow { margin-bottom: 8px; }
.wl-rec-header-left h2 {
font-family: 'Cormorant Garamond', serif; font-size: 2.2rem;
font-weight: 400; color: #000000; line-height: 1.2; margin-bottom: 10px;
}
.wl-rec-header-left h2 em { font-style: italic; color: #000000; }
.wl-rec-desc {
font-family: 'Jost', sans-serif; font-size: .83rem; color: #8A8A8A;
max-width: 420px; line-height: 1.65;
}
.wl-rec-all-link {
display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
font-family: 'Jost', sans-serif; font-size: .76rem; letter-spacing: .1em;
text-transform: uppercase; color: #000000; text-decoration: none;
transition: gap .2s, color .2s;
}
.wl-rec-all-link:hover { gap: 14px; color: #4A4A4A; }
.wl-rec-all-link svg {
width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;
}
/* ── 5-column recommendation grid ── */
.wl-rec-grid {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 4px 4px 14px;
margin: 0 -4px;
}
.wl-rec-grid::-webkit-scrollbar { display: none; }
/* Slider header controls */
.wl-rec-header-right { display: flex; align-items: center; gap: 18px; }
.wl-rec-nav { display: flex; gap: 10px; }
.wl-rec-arrow {
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid #E0E0E0; background: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #000000; transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.wl-rec-arrow:hover { background: #000000; color: #fff; border-color: #000000; }
.wl-rec-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.wl-rec-arrow:disabled { opacity: .32; cursor: default; }
.wl-rec-arrow:disabled:hover { background: #fff; color: #000000; border-color: #E0E0E0; }
/* Each card */
.wl-rec-card {
flex: 0 0 clamp(240px, 23vw, 290px);
scroll-snap-align: start;
background: #fff; border: 1px solid #E0E0E0; border-radius: 18px;
overflow: hidden; transition: box-shadow .3s, transform .3s, border-color .3s;
display: flex; flex-direction: column;
}
.wl-rec-card:hover {
box-shadow: 0 20px 56px rgba(0,0,0,.15);
transform: translateY(-6px);
border-color: rgba(0,0,0,.32);
}
/* Card image area */
.wl-rec-img {
position: relative; overflow: hidden;
background: linear-gradient(135deg, #FAFAFA, #E0E0E0);
aspect-ratio: 3 / 4;
}
.wl-rec-img img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.wl-rec-card:hover .wl-rec-img img { transform: scale(1.07); }
/* Tag pill */
.wl-rec-tag {
position: absolute; top: 12px; left: 12px;
background: rgba(0,0,0,.72); backdrop-filter: blur(10px);
color: #fff; font-family: 'Jost', sans-serif; font-size: .58rem;
letter-spacing: .13em; text-transform: uppercase;
padding: 4px 10px; border-radius: 100px; pointer-events: none;
}
.wl-rec-tag.new-arrival { background: rgba(0,0,0,.88); }
.wl-rec-tag.bestseller { background: rgba(74,74,74,.85); }
.wl-rec-tag.sale { background: rgba(220,38,38,.85); }
/* Hover action overlay */
.wl-rec-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 55%, transparent 100%);
padding: 48px 12px 12px; display: flex; gap: 8px;
transform: translateY(100%);
transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.wl-rec-card:hover .wl-rec-overlay { transform: translateY(0); }
.wl-rec-cart-btn {
flex: 1; background: #000000; color: #fff; border: none; border-radius: 8px;
padding: 10px 8px; font-family: 'Jost', sans-serif; font-size: .68rem;
letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
transition: background .2s; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.wl-rec-cart-btn:hover { background: #4A4A4A; }
.wl-rec-cart-btn svg {
width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0;
}
.wl-rec-save-btn {
width: 38px; height: 38px; flex-shrink: 0;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
border-radius: 8px; color: rgba(255,255,255,.75); cursor: pointer;
display: grid; place-items: center;
transition: background .2s, border-color .2s, color .2s;
}
.wl-rec-save-btn:hover { background: #e11d48; border-color: #e11d48; color: #fff; }
.wl-rec-save-btn.saved { background: #e11d48; border-color: #e11d48; }
.wl-rec-save-btn.saved svg { fill: #fff; stroke: #fff; }
.wl-rec-save-btn svg {
width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2;
transition: fill .2s, stroke .2s;
}
/* Card body */
.wl-rec-body { padding: 15px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.wl-rec-category {
font-family: 'Jost', sans-serif; font-size: .6rem; letter-spacing: .14em;
text-transform: uppercase; color: #000000; font-weight: 500;
display: block; margin-bottom: 5px;
}
.wl-rec-name {
font-family: 'Cormorant Garamond', serif; font-size: 1.05rem;
font-weight: 500; color: #000000; line-height: 1.3; margin-bottom: 4px;
}
.wl-rec-meta {
font-family: 'Jost', sans-serif; font-size: .68rem;
color: #8A8A8A; margin-bottom: 10px; flex: 1;
}
.wl-rec-price-row { display: flex; align-items: baseline; gap: 7px; }
.wl-rec-price {
font-family: 'Cormorant Garamond', serif; font-size: 1.1rem;
font-weight: 600; color: #000000;
}
.wl-rec-old {
font-family: 'Jost', sans-serif; font-size: .68rem;
color: #8A8A8A; text-decoration: line-through;
}
/* CTA band */
.wl-cta-band {
background: linear-gradient(135deg, #000000 0%, #141414 100%);
padding: 64px 80px; text-align: center; position: relative; overflow: hidden;
}
.wl-cta-band::before {
content: ''; position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 50%, rgba(74,74,74,.15) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(0,0,0,.1) 0%, transparent 50%);
}
.wl-cta-band-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
.wl-cta-band .eyebrow { justify-content: center; margin-bottom: 14px; }
.wl-cta-band h2 {
font-family: 'Cormorant Garamond', serif; font-size: 2.4rem;
font-weight: 400; color: #fff; margin-bottom: 14px; line-height: 1.2;
}
.wl-cta-band h2 em { font-style: italic; color: #FFFFFF; }
.wl-cta-band p {
font-family: 'Jost', sans-serif; font-size: .86rem;
color: rgba(255,255,255,.55); line-height: 1.7; margin-bottom: 32px;
}
.wl-cta-band-btn {
display: inline-flex; align-items: center; gap: 10px;
background: #fff; color: #000000;
border-radius: 100px; padding: 14px 32px;
font-family: 'Jost', sans-serif; font-size: .8rem; letter-spacing: .12em;
text-transform: uppercase; text-decoration: none; font-weight: 600;
transition: transform .2s, box-shadow .2s;
}
.wl-cta-band-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.wl-cta-band-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* ── Toast notification ── */
.wl-toast {
position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(80px);
background: #141414; color: #fff; border: 1px solid rgba(74,74,74,.3);
border-radius: 100px; padding: 12px 24px;
font-family: 'Jost', sans-serif; font-size: .8rem; letter-spacing: .06em;
display: flex; align-items: center; gap: 10px; z-index: 9999;
box-shadow: 0 12px 40px rgba(0,0,0,.5);
transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s;
opacity: 0;
}
.wl-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.wl-toast svg { width: 16px; height: 16px; stroke: #FFFFFF; fill: none; stroke-width: 2; }
/* ── Responsive ── */
@media (max-width: 1400px) {
.wl-rec-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
@media (max-width: 1200px) {
.wl-grid { columns: 3; }
.wl-filter-bar { padding: 0 44px; }
.wl-body { padding: 48px 44px 80px; }
.wl-recommend { padding: 60px 44px 80px; }
.wl-cta-band { padding: 56px 44px; }
.wl-rec-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.wl-hero { padding: 108px 32px 52px; }
.wl-hero-top { flex-direction: column; align-items: flex-start; gap: 20px; }
.wl-grid { columns: 2; }
.wl-filter-bar { padding: 0 28px; top: 60px; }
.wl-body { padding: 40px 28px 64px; }
.wl-recommend { padding: 48px 28px 64px; }
.wl-cta-band { padding: 48px 28px; }
.wl-hero-stats { gap: 24px; }
.wl-rec-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.wl-rec-header { flex-direction: column; align-items: flex-start; gap: 16px; }
.wl-rec-header-left h2 { font-size: 1.8rem; }
}
@media (max-width: 600px) {
.wl-hero { padding: 90px 20px 44px; }
.wl-grid { columns: 1; }
.wl-filter-bar { padding: 0 16px; }
.wl-body { padding: 28px 16px 52px; }
.wl-recommend { padding: 36px 16px 52px; }
.wl-cta-band { padding: 40px 20px; }
.wl-hero-stats { gap: 20px; padding-top: 20px; }
.wl-hero-actions { gap: 8px; }
.wl-rec-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wl-rec-body { padding: 12px 12px 14px; }
.wl-rec-name { font-size: .95rem; }
}
@media (max-width: 400px) {
.wl-rec-grid { grid-template-columns: 1fr; }
}
/* ============================================================
MOTIONS / ANIMATIONS
============================================================ */
/* ═══════════════════════════════════════════════════════════════
MOTIONS — site-wide motion + responsive enhancement layer.
Loaded on every page via partials/header.php after style.css.
Kept tasteful: respects prefers-reduced-motion, GPU-only transforms.
═══════════════════════════════════════════════════════════════ */
/* ── Easing tokens (extend the palette in style.css) ── */
:root{
--ease-out-quint: cubic-bezier(.22, 1, .36, 1);
--ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
--ease-soft: cubic-bezier(.2, .7, .2, 1);
--motion-slow: .8s;
--motion-base: .55s;
--motion-fast: .25s;
}
/* ═══════════════════════════════════════════════════════════════
1. SCROLL-REVEAL — extends the existing `.reveal` pattern
.reveal exists already; we add directional + stagger variants.
═══════════════════════════════════════════════════════════════ */
.reveal{
opacity:0;
transform:translate3d(0,28px,0);
transition:opacity var(--motion-base) var(--ease-out-quint),
transform var(--motion-base) var(--ease-out-quint);
will-change:opacity, transform;
}
.reveal.visible{opacity:1;transform:translate3d(0,0,0)}
/* directional variants (motions.js auto-applies these) */
.reveal-up { transform:translate3d(0, 36px, 0); }
.reveal-down { transform:translate3d(0,-36px, 0); }
.reveal-left { transform:translate3d(-44px, 0, 0); }
.reveal-right{ transform:translate3d( 44px, 0, 0); }
.reveal-zoom { transform:scale(.92) translateZ(0); }
.reveal-fade { transform:translateZ(0); }
.reveal-up.visible,
.reveal-down.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-zoom.visible,
.reveal-fade.visible{ transform:translate3d(0,0,0) scale(1); }
/* stagger delays — children of [data-stagger] get progressive delay */
[data-stagger] > .reveal,
[data-stagger] > * > .reveal{
transition-delay:0ms;
}
[data-stagger] > .reveal:nth-child(1){transition-delay:60ms}
[data-stagger] > .reveal:nth-child(2){transition-delay:120ms}
[data-stagger] > .reveal:nth-child(3){transition-delay:180ms}
[data-stagger] > .reveal:nth-child(4){transition-delay:240ms}
[data-stagger] > .reveal:nth-child(5){transition-delay:300ms}
[data-stagger] > .reveal:nth-child(6){transition-delay:360ms}
[data-stagger] > .reveal:nth-child(7){transition-delay:420ms}
[data-stagger] > .reveal:nth-child(8){transition-delay:480ms}
[data-stagger] > .reveal:nth-child(n+9){transition-delay:540ms}
/* ═══════════════════════════════════════════════════════════════
2. INTERACTIVE BASELINE — every button/link/card feels alive
═══════════════════════════════════════════════════════════════ */
button, a, input, textarea, select{
transition:
background-color var(--motion-fast) var(--ease-soft),
border-color var(--motion-fast) var(--ease-soft),
color var(--motion-fast) var(--ease-soft),
box-shadow var(--motion-fast) var(--ease-soft),
transform var(--motion-fast) var(--ease-soft);
}
/* Press feedback for any clickable */
button:active,
a:active,
[role="button"]:active{
transform:translateY(1px) scale(.985);
}
/* Focus ring — subtle gold glow, accessible */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible{
outline:none;
box-shadow:0 0 0 3px rgba(46,155,101,.28);
}
/* ── Magnetic / lift cards (auto-tagged via JS: .mo-lift) ── */
.mo-lift{
transition:transform .45s var(--ease-out-quint),
box-shadow .45s var(--ease-out-quint);
will-change:transform;
}
.mo-lift:hover{
transform:translateY(-4px);
box-shadow:0 18px 44px rgba(8,6,15,.14);
}
/* Tilt scene — only enabled on devices with hover */
@media (hover: hover) and (pointer: fine){
.mo-tilt{
transition:transform .25s var(--ease-soft);
transform-style:preserve-3d;
will-change:transform;
}
}
/* ── Image zoom inside cards (works on any .mo-zoom-img wrapper) ── */
.mo-zoom-img{overflow:hidden}
.mo-zoom-img img{
transition:transform .8s var(--ease-out-quint);
will-change:transform;
}
.mo-zoom-img:hover img,
.mo-zoom-img:focus-within img{ transform:scale(1.06); }
/* ── Ripple ── */
.mo-rip{position:relative;overflow:hidden;isolation:isolate}
.mo-rip-ink{
position:absolute;border-radius:50%;
background:rgba(255,255,255,.35);
pointer-events:none;
transform:scale(0);
animation:moRipple .6s var(--ease-out-quint) forwards;
z-index:0;
}
@keyframes moRipple{
to{ transform:scale(2.6); opacity:0; }
}
/* ── Magnetic button hover (tag .mo-mag) ── */
.mo-mag{ transition:transform .35s var(--ease-out-quint); will-change:transform; }
/* ── Underline-grow links ── */
.mo-link{
position:relative;
background-image:linear-gradient(currentColor,currentColor);
background-size:0% 1px;
background-repeat:no-repeat;
background-position:0 100%;
transition:background-size .35s var(--ease-out-quint);
}
.mo-link:hover{ background-size:100% 1px; }
/* ── Float / breath ambient animation for hero orbs etc ── */
.mo-float{ animation:moFloat 7s var(--ease-soft) infinite alternate; }
@keyframes moFloat{
from{ transform:translate3d(0,0,0); }
to { transform:translate3d(0,-10px,0); }
}
/* ── Marquee pause on hover (existing marquee element) ── */
.marquee:hover .marquee-track{ animation-play-state:paused; }
/* ── Carousel/scroll snap helpers (existing horizontal scrollers) ── */
.crosssell-scroll,
.testi-track,
.hp-testi-track{
scroll-behavior:smooth;
}
/* ═══════════════════════════════════════════════════════════════
3. INPUT / FIELD POLISH
═══════════════════════════════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select{
transition:border-color .25s var(--ease-soft),
background-color .25s var(--ease-soft),
box-shadow .25s var(--ease-soft);
}
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus{
box-shadow:0 0 0 3px rgba(46,155,101,.18);
}
/* ═══════════════════════════════════════════════════════════════
4. PAGE-WIDE MICRO-MOTIONS
═══════════════════════════════════════════════════════════════ */
/* SVG icons inside buttons — gentle slide on hover */
.mo-icon-shift svg{ transition:transform .3s var(--ease-out-quint); }
.mo-icon-shift:hover svg{ transform:translateX(4px); }
/* Badge / pill pop-in */
.mo-pop{ animation:moPop .55s var(--ease-out-back) both; }
@keyframes moPop{
from{ transform:scale(.6); opacity:0; }
to { transform:scale(1); opacity:1; }
}
/* Number count-up holder reset (JS animates) */
.mo-count{ display:inline-block; will-change:contents; }
/* Removal animation (cart/wishlist already use .removing — extend it) */
.removing{
animation:moRemove .45s var(--ease-soft) forwards !important;
}
@keyframes moRemove{
to{ opacity:0; transform:translateX(-22px) scale(.96); height:0; margin:0; padding:0; border-width:0; }
}
/* Page transition — body fades in on first paint.
IMPORTANT: opacity-only. Never transform the body — a transform on
creates a new containing block and breaks every position:fixed
descendant (loading screen, navbar, back-to-top, scroll bar). */
body.mo-page-in{
animation:moPageIn .55s var(--ease-out-quint) both;
}
@keyframes moPageIn{
from{ opacity:0; }
to { opacity:1; }
}
/* Scroll progress bar (exists on home; we add a global thin one) */
.mo-scroll-bar{
position:fixed; top:0; left:0; height:2px; width:0;
background:linear-gradient(90deg, var(--gold), var(--gold-l));
z-index:9999; pointer-events:none;
transition:width .12s linear;
}
/* Back-to-top button */
.mo-top-btn{
position:fixed; right:20px; bottom:20px; z-index:800;
width:46px; height:46px; border-radius:50%;
background:var(--gold); color:#fff; border:none;
box-shadow:0 8px 22px rgba(27,107,69,.35);
cursor:pointer;
display:grid; place-items:center;
opacity:0; visibility:hidden; transform:translateY(12px) scale(.92);
transition:opacity .3s var(--ease-out-quint),
transform .35s var(--ease-out-back),
visibility .3s,
background .25s;
}
.mo-top-btn.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.mo-top-btn:hover{ background:var(--gold-d); }
.mo-top-btn svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; }
/* ═══════════════════════════════════════════════════════════════
5. RESPONSIVE PATCHES — extra breakpoints across pages
These complement (don't override) each page's own media queries.
═══════════════════════════════════════════════════════════════ */
/* Tablet & below */
@media (max-width: 980px){
/* Cart layout collapses */
.cart-layout{ grid-template-columns:1fr !important; gap:24px; }
.cart-summary{ position:static !important; }
/* Wishlist filters wrap */
.wishlist-filters,
.wl-filters{ flex-wrap:wrap !important; }
/* Footer grid */
.ft-main-grid{ grid-template-columns:1fr 1fr 1fr !important; gap:30px !important; }
/* Cross-sell shows scrollbar hint */
.crosssell-scroll{ scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.crosssell-card{ scroll-snap-align:start; }
}
/* Phone */
@media (max-width: 640px){
:root{ --nav-h: 80px; }
/* Headlines breathe */
h1{ font-size:clamp(2rem, 9vw, 3rem) !important; }
/* Cart item layout stacks */
.cart-item{
grid-template-columns:1fr !important;
gap:14px !important;
}
.cart-item-img{ width:100% !important; height:auto !important; aspect-ratio:1/1; }
.cart-item-right{ flex-direction:row !important; justify-content:space-between; align-items:center; }
/* Cross-sell card sizing */
.crosssell-card{ flex:0 0 78vw !important; }
/* Footer single column */
.ft-main-grid{ grid-template-columns:1fr !important; }
.ft-bottom-in{ flex-direction:column !important; gap:10px; text-align:center; }
/* Cart steps shrink labels */
.cart-steps span{ font-size:.65rem !important; }
/* Newsletter form stacks */
.hp-newsletter-form{ flex-direction:column !important; align-items:stretch !important; }
/* Stat grid two-up */
.hp-stats-grid{ grid-template-columns:1fr 1fr !important; }
/* Insta grid two-up */
.hp-insta-grid{ grid-template-columns:1fr 1fr !important; }
/* Bestseller grid two-up (wishlist uses CSS columns, handled by wishlist.css) */
.hp-prod-grid{ grid-template-columns:1fr 1fr !important; gap:14px !important; }
/* Back to top button — pull above mobile chrome */
.mo-top-btn{ right:14px; bottom:14px; width:42px; height:42px; }
/* Disable heavy parallax on phones (battery + jank) */
[data-parallax]{ transform:none !important; }
}
/* Tiny phones */
@media (max-width: 380px){
.hp-stats-grid,
.hp-insta-grid,
.hp-prod-grid{ grid-template-columns:1fr !important; }
}
/* ═══════════════════════════════════════════════════════════════
6. REDUCED MOTION — turn off animation for users who ask
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
.reveal{ opacity:1 !important; transform:none !important; }
.mo-float, .mo-pop{ animation:none !important; }
}
/* ═══════════════════════════════════════════════════════════════════
NAVBAR — preview dropdown (Gemstones / Bridal)
A dark glass panel: a navigable link column on the left, a live image
preview on the right that crossfades as you move between rows.
Mobile drawer keeps the nested accordion (.mob-sub-*).
═══════════════════════════════════════════════════════════════════ */
.nv-mega{
position:absolute; top:calc(100% + 14px); left:50%;
transform:translateX(-50%) translateY(-10px);
width:min(660px, calc(100vw - 28px));
display:flex; flex-direction:column; gap:12px; padding:14px;
background:linear-gradient(158deg, rgba(12,31,21,.97), rgba(7,14,9,.985));
border:1px solid rgba(46,155,101,.20);
border-radius:20px;
box-shadow:0 30px 70px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter:blur(22px) saturate(1.2); -webkit-backdrop-filter:blur(22px) saturate(1.2);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), visibility .3s;
z-index:50;
}
.nv-mega.show{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
/* invisible hover bridge between the trigger and the panel */
.nv-mega::before{ content:''; position:absolute; top:-16px; left:0; right:0; height:16px; }
/* faint top accent hairline */
.nv-mega::after{ content:''; position:absolute; top:0; left:26px; right:26px; height:1px;
background:linear-gradient(90deg, transparent, rgba(46,155,101,.55), transparent); }
.nv-pane{ display:grid; grid-template-columns:1fr 236px; gap:14px; align-items:stretch; }
/* ── left: navigable list ── */
.nv-list{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.nv-list-eyebrow{
font-family:'Jost',sans-serif; font-size:9px; font-weight:600; letter-spacing:.26em;
text-transform:uppercase; color:rgba(46,155,101,.92); padding:5px 12px 9px;
}
.nv-list-div{ height:1px; margin:7px 12px; background:rgba(255,255,255,.07); }
.nv-row{
position:relative; isolation:isolate;
display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px;
text-decoration:none; color:var(--cream);
transition:transform .22s ease;
}
.nv-row::before{ /* hover sheen */
content:''; position:absolute; inset:0; border-radius:12px; z-index:-1; opacity:0;
background:linear-gradient(100deg, rgba(46,155,101,.20), rgba(46,155,101,.06));
box-shadow:inset 0 0 0 1px rgba(46,155,101,.24);
transition:opacity .22s ease;
}
.nv-row:hover, .nv-row:focus-visible{ outline:none; transform:translateX(3px); }
.nv-row:hover::before, .nv-row:focus-visible::before{ opacity:1; }
.nv-row-ico{
width:34px; height:34px; flex-shrink:0; border-radius:10px; display:grid; place-items:center;
background:rgba(46,155,101,.12); border:1px solid rgba(46,155,101,.22); color:var(--gold-l);
transition:background .22s, color .22s, border-color .22s;
}
.nv-row:hover .nv-row-ico{ background:var(--gold-l); border-color:var(--gold-l); color:#06140d; }
.nv-row-ico svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.nv-row-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.nv-row-name{
font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; line-height:1.12; letter-spacing:.01em;
}
.nv-row-sub{
font-family:'Jost',sans-serif; font-size:8.5px; font-weight:500; letter-spacing:.15em;
text-transform:uppercase; color:rgba(244,250,246,.5);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nv-row-arw{
width:15px; height:15px; flex-shrink:0; fill:none; stroke:rgba(244,250,246,.32); stroke-width:2;
transform:translateX(-5px); opacity:0; transition:opacity .22s, transform .22s, stroke .22s;
}
.nv-row:hover .nv-row-arw{ opacity:1; transform:translateX(0); stroke:var(--gold-l); }
/* compact sub-rows (In Gold / In Silver, Necklace & Earrings …) */
.nv-row--sm{ padding:8px 12px 8px 30px; }
.nv-row--sm::after{ /* leading tick aligns under the icon column */
content:''; position:absolute; left:13px; top:50%; width:8px; height:1px;
background:rgba(46,155,101,.55); transform:translateY(-50%); transition:width .22s, background .22s;
}
.nv-row--sm:hover::after{ width:12px; background:var(--gold-l); }
.nv-row--sm .nv-row-name{
font-family:'Jost',sans-serif; font-size:12px; font-weight:500; letter-spacing:.02em;
color:rgba(244,250,246,.82); transition:color .22s;
}
.nv-row--sm:hover .nv-row-name{ color:var(--cream); }
.nv-row--sm .nv-row-arw{ width:13px; height:13px; }
/* full-width "view all" row */
.nv-row--all{
justify-content:center; gap:10px; padding:13px 12px; border-radius:12px;
border:1px dashed rgba(46,155,101,.34); color:var(--gold-l);
font-family:'Jost',sans-serif; font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
transition:background .22s, color .22s, border-color .22s, border-style .22s;
}
.nv-row--all::before{ display:none; }
.nv-row--all:hover{ transform:none; background:var(--gold-l); color:#06140d; border-color:var(--gold-l); border-style:solid; }
.nv-row--all svg{ width:13px; height:13px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; transition:transform .22s; }
.nv-row--all:hover svg{ transform:translateX(4px); }
/* ── right: image preview ── */
.nv-preview{
position:relative; border-radius:14px; overflow:hidden; min-height:240px;
background:#06140d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.nv-fig{
position:absolute; inset:0; margin:0; background-color:#06140d;
background-size:cover; background-position:center;
display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
opacity:0; transform:scale(1.06); transition:opacity .45s ease, transform .65s ease, filter .35s ease;
text-decoration:none; color:inherit; cursor:pointer;
}
.nv-fig.is-active{ opacity:1; transform:scale(1); }
a.nv-fig.is-active:hover{ filter:brightness(1.08); }
a.nv-fig.is-active:hover .nv-fig-go{ color:var(--gold-l); }
a.nv-fig.is-active:hover .nv-fig-go svg{ transform:translateX(4px); }
.nv-fig::before{ content:''; position:absolute; inset:0;
background:linear-gradient(to top, rgba(4,12,7,.92), rgba(4,12,7,.2) 55%, rgba(4,12,7,.04)); }
.nv-fig figcaption, .nv-fig .nv-fig-cap{ position:relative; z-index:1; display:flex; flex-direction:column; gap:5px; }
.nv-fig-cat{
font-family:'Jost',sans-serif; font-size:8.5px; font-weight:600; letter-spacing:.2em;
text-transform:uppercase; color:var(--gold-l);
}
.nv-fig-name{ font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; line-height:1.16; color:#fff; }
.nv-fig-go{
display:inline-flex; align-items:center; gap:7px; margin-top:3px;
font-family:'Jost',sans-serif; font-size:8.5px; font-weight:600; letter-spacing:.18em;
text-transform:uppercase; color:rgba(255,255,255,.8);
}
.nv-fig-go svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .25s ease; }
/* open animation — rows ease in from the left with a small stagger */
.nv-mega.show .nv-list-eyebrow,
.nv-mega.show .nv-list .nv-row,
.nv-mega.show .nv-preview,
.nv-mega.show .nv-row--all{ animation:nvRowIn .42s cubic-bezier(.16,1,.3,1) backwards; }
.nv-mega.show .nv-list-eyebrow{ animation-delay:.03s; }
.nv-mega.show .nv-list .nv-row:nth-of-type(1){ animation-delay:.06s; }
.nv-mega.show .nv-list .nv-row:nth-of-type(2){ animation-delay:.085s; }
.nv-mega.show .nv-list .nv-row:nth-of-type(3){ animation-delay:.11s; }
.nv-mega.show .nv-list .nv-row:nth-of-type(4){ animation-delay:.135s; }
.nv-mega.show .nv-list .nv-row:nth-of-type(5){ animation-delay:.16s; }
.nv-mega.show .nv-list .nv-row:nth-of-type(6){ animation-delay:.185s; }
.nv-mega.show .nv-list .nv-row:nth-of-type(7){ animation-delay:.21s; }
.nv-mega.show .nv-list .nv-row:nth-of-type(8){ animation-delay:.235s; }
.nv-mega.show .nv-preview{ animation-name:nvPrevIn; animation-delay:.1s; }
.nv-mega.show .nv-row--all{ animation-delay:.26s; }
@keyframes nvRowIn{ from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:translateX(0); } }
@keyframes nvPrevIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } }
/* ── Responsive — below 900px the nav collapses to the mobile drawer ── */
@media(max-width:1080px){
.nv-mega{ width:min(580px, calc(100vw - 24px)); }
.nv-pane{ grid-template-columns:1fr 196px; }
.nv-preview{ min-height:226px; }
.nv-row-name{ font-size:18px; }
}
@media(prefers-reduced-motion:reduce){
.nv-row, .nv-row-ico, .nv-row-arw, .nv-row--sm::after{ transition:none; }
.nv-mega.show .nv-list-eyebrow, .nv-mega.show .nv-list .nv-row,
.nv-mega.show .nv-preview, .nv-mega.show .nv-row--all{ animation:none; }
.nv-fig{ transition:opacity .2s ease; transform:none; }
.nv-fig.is-active{ transform:none; }
}
/* ── Mobile drawer — nested second level ── */
.mob-sub-tog{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:14px 28px 14px 44px;
font-family:'Jost',sans-serif; font-size:13px; font-weight:500; letter-spacing:.04em;
color:rgba(255,255,255,.55); text-decoration:none;
background:none; border:none; width:100%; cursor:pointer;
border-bottom:1px solid rgba(255,255,255,.02);
transition:color .2s, background .2s, padding-left .3s;
}
.mob-sub-tog:hover{ color:#FFFFFF; padding-left:52px; background:rgba(255,255,255,.05); }
.mob-sub-tog svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .3s; }
.mob-sub-tog.open{ color:#FFFFFF; background:rgba(255,255,255,.04); }
.mob-sub-tog.open svg{ transform:rotate(180deg); }
.mob-sub-l2{ max-height:0; overflow:hidden; transition:max-height .35s ease; background:rgba(0,0,0,.25); }
.mob-sub-l2.open{ max-height:300px; }
.mob-sub-l2 a{
display:flex; align-items:center; gap:10px;
padding:12px 28px 12px 62px;
font-family:'Jost',sans-serif; font-size:12px; font-weight:500;
color:rgba(255,255,255,.5); text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.02);
transition:color .2s, padding-left .3s, background .2s;
}
.mob-sub-l2 a:hover{ color:#FFFFFF; padding-left:70px; background:rgba(255,255,255,.05); }
/* the top-level mobile dropdown needs more room when it holds nested submenus */
.mob-sub-dd.open{ max-height:760px; }
/* ═══════════════════════════════════════════════════════════════
NAV AUTH — Sign-In pill + Account chip & dropdown
═══════════════════════════════════════════════════════════════ */
.nav-signin {
margin-left: 6px;
height: 42px;
padding: 0 22px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 30px;
background: transparent;
border: 1px solid rgba(255,255,255,0.22);
color: var(--nav-fg, #F6FBF7);
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.nav-signin svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nav-signin:hover {
background: var(--gold-l);
border-color: var(--gold-l);
color: var(--ink);
transform: translateY(-1px);
}
/* Account chip */
.nav-account { position: relative; }
.nav-account-btn {
display: inline-flex;
align-items: center;
gap: 9px;
/* Left inset (1px border + 5px pad = 6px) keeps the 32px avatar
concentric inside the 42px pill, leaving a clean 5px ring. */
padding: 0 16px 0 5px;
height: 42px;
margin-left: 4px;
border-radius: 999px;
background: transparent;
border: 1px solid rgba(255,255,255,0.20);
color: var(--nav-fg, #F6FBF7);
cursor: pointer;
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
transition: background 0.3s, border-color 0.3s, transform 0.4s cubic-bezier(.16, 1, .3, 1);
}
.nav-account-btn:hover {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.32);
}
.nav-account-btn svg {
width: 12px; height: 12px;
fill: none; stroke: currentColor; stroke-width: 2;
opacity: 0.6;
transition: transform 0.3s;
}
.nav-account.open .nav-account-btn svg { transform: rotate(180deg); }
.nav-account-name {
max-width: 110px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-account-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-l), var(--gold));
color: #04140a;
display: grid;
place-items: center;
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
aspect-ratio: 1;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.9),
0 0 0 1.5px var(--gold),
0 2px 6px rgba(8,6,15,0.18);
transition: box-shadow .2s ease, transform .2s ease;
}
.nav-account-btn:hover .nav-account-avatar,
.nav-account.is-open .nav-account-avatar {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.95),
0 0 0 2px var(--gold-l),
0 3px 10px rgba(27,107,69,0.28);
}
.nav-account-avatar--lg {
width: 44px; height: 44px; font-size: 17px;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.9),
0 0 0 2px var(--gold),
0 4px 12px rgba(8,6,15,0.18);
}
.nav-account-avatar img {
width: 100%; height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.nav-account-menu {
position: absolute;
top: calc(100% + 14px);
right: 0;
min-width: 280px;
padding: 10px;
background: rgba(253, 250, 245, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(46,155,101,0.2);
border-radius: 20px;
box-shadow: 0 24px 60px rgba(0,0,0,0.18);
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(0.98);
transform-origin: top right;
transition: opacity 0.25s, visibility 0.25s, transform 0.25s ease;
pointer-events: none;
z-index: 950;
}
.nav-account.open .nav-account-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.nav-account-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px 16px;
border-bottom: 1px solid rgba(46,155,101,0.15);
margin-bottom: 8px;
}
.nav-account-head div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-account-head strong {
font-family: 'Jost', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-account-head small {
font-size: 11px;
color: rgba(8,6,15,0.55);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.nav-account-menu a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 500;
color: rgba(8,6,15,0.75);
text-decoration: none;
transition: all 0.2s;
}
.nav-account-menu a svg {
width: 16px; height: 16px;
flex-shrink: 0;
color: var(--gold-d);
}
.nav-account-menu a:hover {
background: rgba(46,155,101,0.1);
color: var(--ink);
transform: translateX(2px);
}
.nav-account-div {
display: block;
height: 1px;
margin: 8px 6px;
background: rgba(46,155,101,0.15);
}
.nav-account-out { color: #b54242 !important; }
.nav-account-out svg { color: #b54242 !important; }
.nav-account-out:hover { background: rgba(181,66,66,0.08) !important; }
/* ── Mobile drawer auth ──────────────────────────────────────── */
.mob-auth-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.mob-auth-btn {
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 18px;
border-radius: 999px;
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
text-align: center;
background: linear-gradient(135deg, var(--gold-l), var(--gold));
color: #04140a;
border: 1px solid transparent;
transition: all 0.25s;
}
.mob-auth-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(46,155,101,0.35); }
.mob-auth-btn--out {
background: transparent;
color: #fff;
border-color: rgba(255,255,255,0.22);
}
.mob-auth-btn--out:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.4);
box-shadow: none;
}
.mob-account {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
border-radius: 16px;
background: rgba(46,155,101,0.08);
border: 1px solid rgba(46,155,101,0.2);
margin-bottom: 12px;
}
.mob-account-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-l), var(--gold));
color: #04140a;
display: grid;
place-items: center;
font-family: 'Jost', sans-serif;
font-size: 17px;
font-weight: 700;
flex-shrink: 0;
}
.mob-account-avatar img {
width: 100%; height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.mob-account div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mob-account strong {
font-family: 'Jost', sans-serif;
font-size: 14px;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mob-account small {
font-size: 11px;
color: rgba(255,255,255,0.55);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mob-account-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
.mob-account-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
border-radius: 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.85);
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
text-decoration: none;
text-transform: uppercase;
transition: all 0.25s;
}
.mob-account-link:hover {
background: rgba(46,155,101,0.12);
border-color: rgba(46,155,101,0.32);
color: #fff;
}
.mob-account-link svg { width: 14px; height: 14px; }
.mob-account-link--out {
grid-column: 1 / -1;
color: #ffb4b4;
border-color: rgba(220,70,70,0.2);
}
.mob-account-link--out:hover {
background: rgba(220,70,70,0.12);
border-color: rgba(220,70,70,0.35);
color: #ffd1d1;
}
@media (max-width: 1100px) {
.nav-account-name { display: none; }
}
@media (max-width: 900px) {
.nav-signin, .nav-account { display: none; }
}
/* ═══════════════════════════════════════════════════════════
NAVBAR + MEGA DROPDOWN — site-wide B&W palette
Mirrors the home-page navbar treatment so the nav reads the
same on every page: pure black-glass panel, white type,
silver edges. Scoped CSS variables override every var(--gold*)
reference inside the nav so descendants pick up monochrome
even when style.css uses the green palette globally.
═══════════════════════════════════════════════════════════ */
/* Scope monochrome palette to the navbar — propagates through
var() to every descendant including the mega dropdown,
account menu, and the mobile drawer (which sits outside
.nav-wrapper as a top-level off-canvas element). */
.nav-wrapper,
.mob-ov {
--gold: #4A4A4A;
--gold-l: #8A8A8A;
--gold-d: #2A2A2A;
--ink: #000000;
--navy: #141414;
--cream: #FAFAFA;
--wine: #000000;
--wine-d: #000000;
--border: #E0E0E0;
}
/* ─── Top thin gradient line that runs above the navbar ──── */
.nav::before {
background: linear-gradient(90deg, transparent,
#4A4A4A 15%, #FFFFFF 50%, #4A4A4A 85%, transparent);
opacity: .85;
}
/* ─── Scrolled-state nav (dark glass) ─────────────────────── */
.nav.scrolled {
background: rgba(0, 0, 0, 0.5);
border-bottom-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
}
/* ─── Sliding gem indicator under nav links ──────────────── */
.nav-ind {
background: linear-gradient(90deg, transparent, #FFFFFF 20%, #FFFFFF 80%, transparent);
}
.nav-ind::after {
background: #FFFFFF;
box-shadow: 0 0 8px rgba(255,255,255,.85), 0 0 0 1px rgba(0,0,0,.35);
animation: navGemGlowBW 2.8s ease-in-out infinite;
}
@keyframes navGemGlowBW {
0%, 100% { box-shadow: 0 0 6px rgba(255,255,255,.55), 0 0 0 1px rgba(0,0,0,.3); }
50% { box-shadow: 0 0 16px rgba(255,255,255,.95), 0 0 0 1px rgba(0,0,0,.35); }
}
/* ─── Nav icons hover bubble ──────────────────────────────── */
.nav-ico::before {
background: rgba(255, 255, 255, 0.18);
}
.nav-ico:hover { color: #FFFFFF; }
/* Badges on cart / wishlist icons */
.badge, .nav-wl-badge {
background: #FFFFFF;
color: #000000;
border: none;
}
/* ═══════════════════════════════════════════════════════════
MEGA DROPDOWN — pure black glass panel
═══════════════════════════════════════════════════════════ */
.nv-mega {
background: linear-gradient(158deg, rgba(20,20,20,.97), rgba(0,0,0,.985));
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.06);
}
.nv-mega::after {
background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
/* ─── Dropdown list ───────────────────────────────────────── */
.nv-list-eyebrow {
color: rgba(255,255,255,.55);
}
.nv-list-div { background: rgba(255,255,255,.08); }
/* Dropdown row */
.nv-row { color: #FAFAFA; }
.nv-row::before {
background: linear-gradient(100deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.nv-row-ico {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
color: #FFFFFF;
}
.nv-row:hover .nv-row-ico {
background: #FFFFFF;
border-color: #FFFFFF;
color: #000000;
}
.nv-row-sub { color: rgba(255,255,255,.5); }
.nv-row-arw { stroke: rgba(255,255,255,.35); }
.nv-row:hover .nv-row-arw { stroke: #FFFFFF; }
/* Compact sub-rows (tick + dim text) */
.nv-row--sm::after { background: rgba(255,255,255,.45); }
.nv-row--sm:hover::after { background: #FFFFFF; }
.nv-row--sm .nv-row-name { color: rgba(255,255,255,.78); }
.nv-row--sm:hover .nv-row-name { color: #FFFFFF; }
/* "View all" footer row */
.nv-row--all {
border: 1px dashed rgba(255,255,255,.32);
color: #FFFFFF;
}
.nv-row--all:hover {
background: #FFFFFF;
color: #000000;
border-color: #FFFFFF;
}
/* ─── Right-side image preview pane ───────────────────────── */
.nv-preview {
background: #0A0A0A;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.nv-fig {
background-color: #0A0A0A;
}
.nv-fig::before {
background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.2) 55%, rgba(0,0,0,.04));
}
.nv-fig-cat { color: #FFFFFF; }
a.nv-fig.is-active:hover .nv-fig-go { color: #FFFFFF; }
/* ─── Account menu — flip green tints to monochrome ───────── */
.nav-account-menu {
border-color: rgba(0,0,0,0.12);
}
.nav-account-head {
border-bottom-color: rgba(0,0,0,0.08);
}
.nav-account-menu a:hover {
background: rgba(0,0,0,0.06);
}
.nav-account-div {
background: rgba(0,0,0,0.08);
}