/* ══ HÖFFMANE · "LE LINGER" — single warm theme (no dark mode) ═══════ Cream ground, terracotta ink, bright-orange accent. One palette only — the dual light/dark theme has been removed. Token names are retained so every existing rule + JS-rendered component re-skins automatically. */ :root { --noir: #ECE4D2; /* cream page ground */ --ombre: #E7DEC9; /* warm cream inset */ --gold: #E85D1A; /* bright orange accent / CTA */ --champagne: #B8410E; /* deep terracotta — secondary accent / hover */ --ivory: #B8410E; /* terracotta ink (primary text) */ --muted: #A65A2E; /* WCAG AA on cream ground */ --border: #D8BFA1; /* soft hairline */ --danger: #B8410E; --panel-bg: #E2D8C2; /* sand panel */ --input-bg: #ECE4D2; --card-bg: #ECE4D2; --sand: #E2D8C2; /* diagonal-stripe placeholder base */ --camel: #D89B6A; /* camel section ground */ --noise-op: 0.16; --overlay-bg: rgba(184,65,14,0.25); --search-bg: rgba(236,228,210,0.97); --cart-bg: #ECE4D2; --shadow: rgba(184,65,14,0.18); --mono: ui-monospace, Menlo, 'SFMono-Regular', monospace; --theme-transition: background .35s ease, color .35s ease, border-color .35s ease; } .story-sig-logo{height:64px;width:auto;object-fit:contain;opacity:0.9;} *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:var(--noir);color:var(--ivory);font-family:'Jost',sans-serif;font-weight:400;overflow-x:hidden;cursor:auto;transition:var(--theme-transition);} /* ── CURSOR SYSTEM ("L'Aiguille") ────────────────────────────── Arrow + lagging orange dot site-wide · DRAG — badge on rails · VIEW ✳︎ badge on product cards · scent-trail smudge on product page. Native cursor is hidden ONLY while the custom cursor is active (JS adds .hf-cursor-on to on fine pointers, no reduced-motion); text fields always keep the native caret. */ html.hf-cursor-on, html.hf-cursor-on *{cursor:none !important;} html.hf-cursor-on input, html.hf-cursor-on textarea, html.hf-cursor-on select, html.hf-cursor-on [contenteditable]{cursor:text !important;} #hf-cursor{position:fixed;inset:0;pointer-events:none;z-index:999999;} .hf-cur-arrow{position:fixed;left:0;top:0;width:18px;height:18px;transform:translate(-2px,-2px);transition:opacity .2s ease;will-change:transform;} .hf-cur-dot{position:fixed;left:0;top:0;width:7px;height:7px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%);transition:opacity .2s ease;will-change:transform;} /* Position is driven by the rAF lerp in JS — only opacity transitions here */ .hf-cur-badge{ position:fixed;left:0;top:0;width:74px;height:74px;border-radius:50%; background:var(--noir);color:var(--ivory);display:grid;place-items:center; transform:translate(-50%,-50%) scale(0); transition:transform .18s ease,background-color .18s ease,color .18s ease; font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.22em;font-weight:500; box-shadow:0 10px 26px rgba(120,35,5,.25);white-space:nowrap; } .hf-cur-badge.view{background:var(--gold);color:var(--noir);} .hf-smudge{ position:fixed;width:46px;height:46px;border-radius:50%; background:radial-gradient(circle, rgba(184,65,14,.35), rgba(184,65,14,0) 70%); filter:blur(6px);transform:translate(-50%,-50%); transition:opacity 2s ease;pointer-events:none; } input,textarea,select{cursor:text;}select{cursor:pointer;} @keyframes skeletonPulse{0%,100%{opacity:.3;}50%{opacity:.6;}} @media(max-width:768px){#hf-cursor{display:none;}body{cursor:auto;}} /* Reduced motion / accessibility + low-end relief: kill the decorative continuous animations and the custom cursor; keep functional UI transitions. Honours the OS "Reduce motion" setting. */ @media(prefers-reduced-motion:reduce){ .hero-logo-wrap::before,.scroll-chevron,.story-particle, .tc-slabel-dot.current,.dp-glow,.strip-inner,.hf-hero-orb{animation:none !important;} #hf-cursor{display:none !important;} body{cursor:auto;} html{scroll-behavior:auto !important;} /* Scroll reveals render in their final state (no slide/fade) */ .reveal{opacity:1 !important;transform:none !important;transition:none !important;} } /* GRAIN */ body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");pointer-events:none;z-index:9000;opacity:var(--noise-op);transition:opacity .35s;} /* ══════════════════════════════════════ NAV — DESKTOP ══════════════════════════════════════ */ nav { position:fixed;top:0;left:0;right:0;z-index:1000; padding:24px 48px; padding-top:max(24px, env(safe-area-inset-top)); display:flex;align-items:center;justify-content:space-between; background:linear-gradient(to bottom,color-mix(in srgb,var(--noir) 95%,transparent),transparent); transition: transform .35s cubic-bezier(.4,0,.2,1), padding .3s, background .3s, border-color .3s; } nav.scrolled { padding: 16px 48px; padding-top:max(16px, env(safe-area-inset-top)); background: var(--noir); border-bottom: 1px solid var(--border); /* No backdrop-filter — the background is opaque, so blur was invisible yet forced a full-viewport GPU re-blur on every scroll frame. Removing it is the single biggest scroll-smoothness win on low-end GPUs. */ } .nav-brand{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;letter-spacing:4px;color:var(--ivory);text-decoration:none;cursor:pointer;} .nav-brand span{color:var(--gold);} /* Desktop links */ .nav-links{display:flex;gap:36px;align-items:center;} .nav-links a{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;cursor:pointer;} .nav-links a:hover{color:var(--champagne);} /* Desktop cart */ .nav-cart{position:relative;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--champagne);background:transparent;border:1px solid var(--border);padding:10px 20px;cursor:pointer;transition:all .25s;} .nav-cart:hover{background:var(--gold);color:var(--noir);border-color:var(--gold);} /* Cart badge — 16px circle with a single digit visually centred. line-height:1 stops the parent .nav-cart's 1.4 line-height from pushing the glyph down off-axis. padding-top:1px compensates for Jost's ascender-heavy bounding box at 10px (the glyph sits slightly high in its box; +1px down restores the visual centre). */ .cart-badge { position: absolute; top: -6px; right: -6px; background: var(--gold); color: var(--noir); border-radius: 50%; width: 16px; height: 16px; font-size: 10px; font-weight: 600; font-family: 'Jost', sans-serif; font-variant-numeric: tabular-nums lining-nums; line-height: 1; letter-spacing: 0; display: none; align-items: center; justify-content: center; padding: 1px 0 0; /* +1px down nudge for visual centre */ } /* ══════════════════════════════════════ MOBILE NAV ══════════════════════════════════════ */ .nav-right { display:flex; align-items:center; gap:16px; } /* Hamburger */ .hamburger { display: none; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 40px; height: 40px; background: transparent; border: 1px solid color-mix(in srgb, var(--ivory) 40%, transparent); border-radius: 9px; padding: 10px; cursor: pointer; z-index: 1100; flex-shrink: 0; transition: border-color .2s; } .hamburger:hover { border-color: var(--gold); } .hamburger .bar { display: block; height: 1px; background: var(--champagne); transition: all .35s cubic-bezier(.77,0,.18,1); transform-origin: right center; } .hamburger .bar:nth-child(1) { width: 20px; } .hamburger .bar:nth-child(2) { width: 14px; } .hamburger .bar:nth-child(3) { width: 18px; } .hamburger.open .bar:nth-child(1) { width: 20px; transform: rotate(-45deg) translate(1px, 0); } .hamburger.open .bar:nth-child(2) { width: 0; opacity: 0; } .hamburger.open .bar:nth-child(3) { width: 20px; transform: rotate(45deg) translate(1px, 0); } /* Mobile cart icon (inside hamburger area) */ .mob-cart-btn { display: none; position: relative; background: transparent; border: 1px solid color-mix(in srgb, var(--ivory) 40%, transparent); border-radius: 9px; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s; flex-shrink: 0; } .mob-cart-btn:hover { border-color: var(--gold); } nav.nav--hidden { transform: translateY(-110%); } .mob-cart-icon { font-size: 14px; color: var(--champagne); display:flex;align-items:center;justify-content:center; } .mob-cart-badge { position: absolute; top: -5px; right: -5px; background: var(--gold); color: var(--noir); border-radius: 50%; width: 14px; height: 14px; font-size: 7px; display: none; align-items: center; justify-content: center; font-weight: 600; font-family: 'Jost', sans-serif; font-variant-numeric: tabular-nums lining-nums; line-height: 1; letter-spacing: 0; padding: 1px 0 0; /* same +1px nudge as desktop cart-badge */ } /* ══════════════════════════════════════ MOBILE MENU OVERLAY ══════════════════════════════════════ */ .mobile-menu { position: fixed; inset: 0; z-index: 1050; background: var(--noir); display: flex; flex-direction: column; padding: 0; transform: translateX(100%); transition: transform .5s cubic-bezier(.77,0,.18,1); overflow: hidden; } .mobile-menu.open { transform: translateX(0); } /* Grain on menu too */ .mobile-menu::before { content:'';position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); pointer-events:none;z-index:0;opacity:.6; } .mm-header { padding: 24px 28px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; } .mm-brand { font-family: 'Cormorant Garamond', serif; font-size: 20px; letter-spacing: 4px; color: var(--ivory); } .mm-brand em { color: var(--gold); font-style: normal; } .mm-close { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 36px; height: 36px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; } .mm-close:hover { border-color: var(--gold); color: var(--gold); } .mm-links { flex: 1; padding: 40px 28px; display: flex; flex-direction: column; justify-content: center; gap: 0; position: relative; z-index: 1; } .mm-link { display: block; font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 8vw, 52px); font-weight: 300; color: var(--muted); text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: color .25s, padding-left .25s; letter-spacing: 1px; opacity: 0; transform: translateX(40px); transition: opacity .4s, transform .4s, color .2s, padding-left .2s; } .mm-link:first-child { border-top: 1px solid var(--border); } .mm-link em { font-style: italic; color: var(--champagne); } .mm-link:hover { color: var(--ivory); padding-left: 12px; } .mobile-menu.open .mm-link:nth-child(1) { opacity:1; transform:translateX(0); transition-delay: .15s; } .mobile-menu.open .mm-link:nth-child(2) { opacity:1; transform:translateX(0); transition-delay: .22s; } .mobile-menu.open .mm-link:nth-child(3) { opacity:1; transform:translateX(0); transition-delay: .29s; } .mobile-menu.open .mm-link:nth-child(4) { opacity:1; transform:translateX(0); transition-delay: .36s; } .mm-footer { padding: 28px; border-top: 1px solid var(--border); position: relative; z-index: 1; opacity: 0; transform: translateY(16px); transition: opacity .4s .45s, transform .4s .45s; } .mobile-menu.open .mm-footer { opacity: 1; transform: translateY(0); } .mm-cart-btn { width: 100%; background: var(--gold); border: 1px solid var(--gold); color: var(--noir); font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; padding: 18px; cursor: pointer; transition: all .3s; display: flex; align-items: center; justify-content: center; gap: 12px; } .mm-cart-btn:hover { background: var(--champagne); border-color: var(--champagne); } .mm-social { display: flex; gap: 12px; margin-top: 20px; } /* ══════════════════════════════════════ RESPONSIVE BREAKPOINTS ══════════════════════════════════════ */ @media(max-width:768px) { nav { padding: 18px 20px; padding-top:max(18px, env(safe-area-inset-top)); } nav.scrolled { padding: 14px 20px; padding-top:max(14px, env(safe-area-inset-top)); } .nav-links { display: none; } .nav-cart { display: none; } .hamburger { display: flex; } .mob-cart-btn { display: flex; } } /* PAGES */ .sr-wrap{max-width:800px;margin:0 auto;padding:120px 48px 80px;} .sr-eyebrow{font-size:10px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:16px;} .sr-title{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,5vw,58px);font-weight:300;color:var(--ivory);line-height:1.1;margin-bottom:48px;} .sr-title em{font-style:italic;color:var(--champagne);} .sr-block{border-top:1px solid var(--border);padding:40px 0;} .sr-block:last-child{border-bottom:1px solid var(--border);} .sr-block-icon{font-size:24px;margin-bottom:16px;display:block;} .sr-block-label{font-size:10px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:12px;} .sr-block-title{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;color:var(--ivory);margin-bottom:16px;} .sr-block-text{font-size:15px;color:var(--muted);line-height:1.85;} .sr-block-text strong{color:var(--ivory);font-weight:400;} .sr-note{margin-top:48px;padding:24px 32px;border:1px solid var(--border);background:var(--ombre);} .sr-note-label{font-size:7px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:10px;} .sr-note-text{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--muted);font-style:italic;line-height:1.8;} @media(max-width:768px){.sr-wrap{padding:100px 24px 60px;}} .page{display:none;min-height:100vh;} .page.active{display:block;} /* ══════════════════════════════════════ HOME PAGE ══════════════════════════════════════ */ #home{position:relative;overflow:hidden;} /* HERO */ .hero{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;} #hero-canvas{position:absolute;inset:0;z-index:1;} .hero-vignette{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 55% 55% at 50% 58%, transparent 20%, color-mix(in srgb, var(--noir) 30%, transparent) 60%, color-mix(in srgb, var(--noir) 82%, transparent) 100%);pointer-events:none;transition:background .35s;} @media(max-width:768px){.hero-vignette{background:radial-gradient(ellipse 70% 50% at 50% 52%, transparent 25%, color-mix(in srgb, var(--noir) 25%, transparent) 60%, color-mix(in srgb, var(--noir) 80%, transparent) 100%);}} .hero-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;text-align:center;pointer-events:none;} @media(max-width:768px){.hero-content{top:46%;}} .hero-logo-wrap{display:flex;flex-direction:column;align-items:center;gap:0px;opacity:0;animation:fadeUp 1s .7s forwards;position:relative;} .hero-logo-wrap::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);width:clamp(120px,18vw,200px);height:clamp(120px,18vw,200px);border-radius:50%;background:radial-gradient(circle,rgba(232,93,26,.18) 0%,rgba(232,93,26,.06) 40%,transparent 70%);animation:logoBreath 4s ease-in-out infinite;pointer-events:none;z-index:-1;} .hero-logo-wrap::before{width:clamp(140px,20vw,220px);height:clamp(140px,20vw,220px);background:radial-gradient(circle,rgba(255,255,255,.5) 0%,rgba(255,255,255,.25) 35%,rgba(255,255,255,.08) 60%,transparent 80%);} @keyframes logoBreath{0%,100%{opacity:.5;transform:translate(-50%,-55%) scale(1);}50%{opacity:1;transform:translate(-50%,-55%) scale(1.15);}} .hero-logo{width:clamp(200px,28vw,360px);height:auto;display:block;filter:drop-shadow(0 0 60px rgba(232,93,26,.4)) drop-shadow(0 0 120px rgba(232,93,26,.2)) drop-shadow(0 0 20px rgba(250,248,243,.15));} .hero-maison-sub{font-family:'Jost',sans-serif;font-size:clamp(7px,1vw,10px);letter-spacing:clamp(4px,0.8vw,8px);color:var(--muted);text-transform:uppercase;margin-top:-8px;font-weight:400;white-space:nowrap;text-align:center;transform:translateX(6px);} @media(max-width:480px){.hero-logo{width:clamp(160px,50vw,220px);}.hero-maison-sub{font-size:6px;letter-spacing:4px;margin-top:-6px;}} .hero-logo{filter:invert(1) drop-shadow(0 0 60px rgba(232,93,26,.5)) drop-shadow(0 0 120px rgba(232,93,26,.25)) drop-shadow(0 0 20px rgba(250,248,243,.2));} .footer-brand-name img { filter: invert(1); } /* Brand logo image (replaces the text wordmark) */ .nav-logo{height:38px;width:auto;display:block;} .mm-logo{height:34px;} @media(max-width:768px){.nav-logo{height:30px;}} @media(max-width:380px){.nav-logo{height:26px;}} .pd-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:32px;padding-top:36px;border-top:1px solid var(--border);} .pd-pillar{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 10px 12px;background:transparent;border:none;} .pd-pillar-icon{font-size:38px;line-height:1;margin-bottom:16px;display:flex;align-items:center;justify-content:center;height:48px;} .pd-pillar-title{font-size:11px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:8px;font-weight:500;} .pd-pillar-sub{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--muted);line-height:1.55;font-style:italic;max-width:180px;margin:0 auto;} @media(max-width:600px){.pd-pillars{grid-template-columns:1fr 1fr;gap:16px;}.pd-pillar-icon{font-size:34px;}} @media(max-width:380px){.pd-pillars{grid-template-columns:1fr;}.pd-pillar-sub{max-width:240px;}} .page-back-btn{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;cursor:pointer;border:none;background:transparent;padding:0;margin-bottom:32px;transition:color .2s;} .page-back-btn:hover{color:var(--champagne);} .hero-maison{font-size:11px;letter-spacing:10px;color:var(--muted);text-transform:uppercase;margin-top:16px;opacity:0;animation:fadeUp .8s .9s forwards;} @media(max-width:480px){.hero-maison{letter-spacing:4px;font-size:10px;padding:0 20px;}} .hero-scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;pointer-events:all;} .hero-scroll span{font-size:10px;letter-spacing:4px;color:var(--muted);text-transform:uppercase;} .scroll-chevron{width:24px;height:24px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);animation:chevronBob 2s ease-in-out infinite;opacity:.7;} @keyframes chevronBob{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5;}50%{transform:rotate(45deg) translate(3px,3px);opacity:1;}} /* FEATURED PRODUCT SECTION */ .featured{padding:120px 80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1400px;margin:0 auto;} @media(max-width:900px){.featured{grid-template-columns:1fr;padding:80px 32px;gap:48px;}} @media(max-width:480px){.featured{padding:60px 20px;gap:40px;}} .featured-3d{position:relative;height:500px;} #bottle-canvas{width:100%;height:100%;display:block;} .featured-glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 60%,rgba(232,93,26,.15),transparent);pointer-events:none;} .featured-info{padding:24px 0;} .fi-label{font-size:11px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:20px;} .fi-title{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,5vw,56px);font-weight:300;line-height:1.1;margin-bottom:24px;} .fi-title em{font-style:italic;color:var(--champagne);} .fi-desc{font-size:12px;color:var(--muted);line-height:2.2;margin-bottom:32px;max-width:420px;} .fi-notes{display:flex;gap:24px;margin-bottom:40px;} .note-item{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0;} .note-icon{font-size:18px;line-height:1;} .note-label{font-size:10px;letter-spacing:3px;color:var(--champagne);text-transform:uppercase;} .note-name{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--ivory);word-wrap:break-word;overflow-wrap:break-word;} @media(max-width:480px){.note-name{font-size:12px;}.note-label{font-size:7px;letter-spacing:2px;}.fi-notes{gap:12px;}} .btn-primary{background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:'Jost',sans-serif;font-size:10px;letter-spacing:4px;text-transform:uppercase;padding:18px 48px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;} .btn-primary::before{content:'';position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);transition:transform .3s ease;} .btn-primary:hover::before{transform:translateX(0);} .btn-primary span{position:relative;z-index:1;} .btn-primary:hover span{color:var(--noir);} @media(max-width:768px){.btn-primary{cursor:pointer;}} /* BRAND STRIP */ .brand-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px 0;overflow:hidden;} .strip-inner{display:flex;align-items:center;gap:0;white-space:nowrap;will-change:transform;} .strip-item{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:6px;color:var(--muted);text-transform:uppercase;flex-shrink:0;font-weight:400;line-height:1;padding:0 12px;} .strip-sep{color:var(--gold);opacity:.5;font-size:11px;line-height:1;flex-shrink:0;padding:0 12px;} @media(max-width:768px){.strip-item{font-size:10px;letter-spacing:4px;padding:0 8px;}.strip-sep{font-size:10px;padding:0 8px;}} /* ══════════════════════════════════════ PRODUCT PAGE ══════════════════════════════════════ */ #product-page{padding-top:100px;} .product-wrap{max-width:1300px;margin:0 auto;padding:60px 48px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;} @media(max-width:900px){.product-wrap{grid-template-columns:1fr;padding:40px 24px;gap:40px;}} /* Desktop only: pin the product image while the right-hand details scroll. Sticky kicks in when .product-visuals' top hits 90px (just below the fixed nav). It stops when .product-wrap's bottom passes 90px — which is exactly where the reviews section begins, since reviews are appended AFTER .product-wrap. So: image pins → right scrolls → image unpins → page continues normally into reviews. Disabled below 901px because the layout collapses to a single column there. */ @media(min-width:901px){ .product-visuals{ position: sticky; top: 90px; align-self: start; } } @media(max-width:480px){.product-wrap{padding:24px 16px;}} .pv-main{background:var(--ombre);border:1px solid var(--border);height:480px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-bottom:16px;transition:background .4s;} @media(max-width:480px){.pv-main{height:320px;}} #product-3d-canvas{width:100%;height:100%;display:block;} #product-img-display{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:none;background:var(--ombre);padding:24px;} #product-img-display.visible{display:block;} .pd-breadcrumb-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;position:relative;} .pd-breadcrumb{font-size:11px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;} .pd-breadcrumb a{color:var(--muted);text-decoration:none;cursor:pointer;} .pd-breadcrumb a:hover{color:var(--champagne);} /* Share — small circular icon button, matches the maison icon-button language */ .pd-share-btn{ flex-shrink:0;width:30px;height:30px; background:transparent;border:none;color:var(--muted); display:inline-flex;align-items:center;justify-content:center;cursor:pointer; transition:color .25s,transform .25s;margin-top:-4px;padding:0; } .pd-share-btn:hover{color:var(--gold);transform:translateY(-1px);} .pd-share-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;} /* Desktop fallback menu */ .pd-share-menu{ position:absolute;top:38px;right:0;z-index:60;min-width:170px; background:var(--panel-bg,var(--ombre));border:1px solid var(--border); box-shadow:0 16px 40px rgba(0,0,0,.28); display:flex;flex-direction:column; animation:pdShareIn .2s ease; } @keyframes pdShareIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}} .pd-share-opt{ appearance:none;background:none;border:none;border-bottom:1px solid var(--border); color:var(--ivory);font-family:'Jost',sans-serif;font-size:11px; letter-spacing:2px;text-transform:uppercase;text-align:left; padding:13px 18px;cursor:pointer;text-decoration:none;display:block; transition:background .2s,color .2s; } .pd-share-opt:last-child{border-bottom:none;} .pd-share-opt:hover{background:rgba(232,93,26,.08);color:var(--gold);} .pd-tag{font-size:10px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:12px;} .pd-name{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,4vw,52px);font-weight:300;line-height:1.1;margin:0 0 16px;} .pd-name em{font-style:italic;color:var(--champagne);} .pd-mood{font-family:'Cormorant Garamond',serif;font-size:18px;font-style:italic;color:var(--muted);margin-bottom:32px;} .pd-rating{display:flex;align-items:center;gap:12px;margin-bottom:32px;} .pd-stars{color:var(--gold);letter-spacing:3px;font-size:13px;} .pd-reviews{font-size:11px;color:var(--muted);} .pd-price{font-family:'Jost',sans-serif;font-weight:400;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.02em;font-size:34px;color:var(--ivory);margin-bottom:8px;} .pd-original{font-size:13px;color:var(--muted);text-decoration:line-through;font-family:'Jost',sans-serif;} .pd-divider{border:none;border-top:1px solid var(--border);margin:32px 0;} .pd-desc{font-size:12px;color:var(--muted);line-height:2.4;margin-bottom:32px;} /* Notes pyramid — same visual language as the homepage New Arrivals featured section: centred, an emoji icon on top, label, name. No bordered box — quieter, more aligned with the rest of the page. */ .pd-notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px;} .pd-note{background:transparent;border:none;padding:14px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;} .pdn-icon{font-size:24px;line-height:1;margin-bottom:2px;} .pdn-label{font-size:9px;letter-spacing:3px;color:var(--champagne);text-transform:uppercase;} .pdn-name{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--ivory);word-wrap:break-word;overflow-wrap:break-word;line-height:1.35;} .pd-size{margin-bottom:32px;} .pd-size-label{font-size:11px;letter-spacing:3px;color:var(--champagne);text-transform:uppercase;margin-bottom:12px;} .size-opts{display:flex;gap:10px;flex-wrap:wrap;} .size-opt{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;padding:10px 20px;cursor:pointer;transition:all .2s;} .size-opt.active,.size-opt:hover{border-color:var(--gold);color:var(--gold);} @media(max-width:768px){.size-opt{cursor:pointer;}} .pd-qty{display:flex;align-items:center;gap:0;margin-bottom:32px;border:1px solid var(--border);width:fit-content;} .qty-btn{background:transparent;color:var(--champagne);border:none;width:44px;height:44px;font-size:16px;cursor:pointer;transition:background .2s;} .qty-btn:hover{background:var(--ombre);} @media(max-width:768px){.qty-btn{cursor:pointer;}} .qty-val{width:48px;text-align:center;font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--ivory);border-left:1px solid var(--border);border-right:1px solid var(--border);height:44px;line-height:44px;} .pd-actions{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap;} .btn-add{flex:1;background:var(--gold);border:1px solid var(--gold);color:var(--noir);font-family:'Jost',sans-serif;font-size:10px;letter-spacing:4px;text-transform:uppercase;padding:18px 32px;cursor:pointer;transition:all .3s;min-width:200px;} .btn-add:hover{background:var(--champagne);border-color:var(--champagne);} @media(max-width:768px){.btn-add{cursor:pointer;}} /* ══════════════════════════════════════ CART PANEL ══════════════════════════════════════ */ .cart-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:2000;opacity:0;pointer-events:none;transition:opacity .3s;} .cart-overlay.open{opacity:1;pointer-events:all;} .cart-panel{position:fixed;top:0;right:0;bottom:0;width:420px;height:100%;background:var(--noir);border-left:1px solid var(--border);z-index:2001;transform:translateX(100%);transition:transform .4s cubic-bezier(.25,.46,.45,.94);display:flex;flex-direction:column;overflow-y:auto;} @media(max-width:480px){.cart-panel{width:100%;left:0;right:0;}} .cart-overlay.open .cart-panel{transform:translateX(0);} .cart-header{padding:32px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;} .ch-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;} .ch-close{background:transparent;border:1px solid var(--border);color:var(--muted);width:36px;height:36px;cursor:pointer;font-size:16px;transition:all .2s;} .ch-close:hover{border-color:var(--gold);color:var(--gold);} .cart-items{flex:1;overflow-y:auto;padding:24px 32px;} .cart-empty{text-align:center;padding:60px 24px;} .ce-icon{font-size:48px;margin-bottom:16px;opacity:.3;} .ce-text{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--muted);font-style:italic;} .cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--border);} .ci-img{width:64px;height:64px;background:var(--noir);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;} .ci-info{flex:1;} .ci-name{font-family:'Cormorant Garamond',serif;font-size:17px;margin-bottom:4px;} .ci-meta{font-size:10px;color:var(--muted);letter-spacing:1px;margin-bottom:8px;} .ci-price{font-family:'Jost',sans-serif;font-weight:400;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.02em;font-size:15px;color:var(--champagne);} .ci-qty-wrap{display:flex;align-items:center;gap:0;margin-bottom:8px;} .ci-qty-btn{width:26px;height:26px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:'Jost',sans-serif;} .ci-qty-btn:hover{border-color:var(--gold);color:var(--gold);} .ci-qty-val{width:32px;height:26px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ivory);letter-spacing:1px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .ci-remove{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:4px;transition:color .2s;align-self:flex-start;} .ci-remove:hover{color:var(--gold);} .cart-footer{padding:24px 32px;border-top:1px solid var(--border);} .cf-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;} .cf-label{font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;} .cf-total{font-family:'Jost',sans-serif;font-weight:400;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.02em;font-size:24px;color:var(--ivory);} .btn-checkout{width:100%;background:var(--gold);border:1px solid var(--gold);color:var(--noir);font-family:'Jost',sans-serif;font-size:10px;letter-spacing:4px;text-transform:uppercase;padding:18px;cursor:pointer;transition:all .3s;margin-top:16px;} .btn-checkout:hover{background:var(--champagne);border-color:var(--champagne);} .cf-note{font-size:11px;color:var(--muted);text-align:center;margin-top:12px;letter-spacing:1px;} /* Voucher / discount code in cart */ .cf-voucher{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border);} .cf-voucher-row{display:flex;gap:8px;} .cf-voucher-row input{flex:1;min-width:0;background:var(--input-bg,var(--ombre));border:1px solid var(--border);color:var(--ivory);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;letter-spacing:.5px;text-transform:none;padding:9px 14px;border-radius:2px;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;} .cf-voucher-row input::placeholder{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;letter-spacing:.5px;color:var(--muted);opacity:.8;} .cf-voucher-row input:focus{outline:none;border-color:var(--gold);} .cf-voucher-row input:disabled{opacity:.85;color:var(--champagne);} .cf-voucher-row button{flex:none;background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:0 18px;cursor:pointer;border-radius:2px;transition:background .25s,color .25s;} .cf-voucher-row button:hover{background:var(--gold);color:var(--noir);} .cf-voucher-msg{font-size:10px;letter-spacing:.5px;margin-top:8px;min-height:13px;color:var(--muted);} .cf-voucher-msg.ok{color:var(--gold);} .cf-voucher-msg.err{color:#c07070;} /* ══════════════════════════════════════ CHECKOUT MODAL ══════════════════════════════════════ */ .checkout-overlay { position:fixed;inset:0;background:var(--overlay-bg); z-index:3000;opacity:0;pointer-events:none; transition:opacity .3s;backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center;padding:20px; } .checkout-overlay.open{opacity:1;pointer-events:all;} .checkout-modal { background:var(--ombre);border:1px solid var(--border); width:100%;max-width:540px;max-height:90vh;overflow-y:auto; transform:translateY(24px);transition:transform .4s; } .checkout-overlay.open .checkout-modal{transform:translateY(0);} .cm-header{padding:28px 32px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;} .cm-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;} .cm-close{background:transparent;border:1px solid var(--border);color:var(--muted);width:32px;height:32px;cursor:pointer;font-size:14px;transition:all .2s;display:flex;align-items:center;justify-content:center;} .cm-close:hover{border-color:var(--gold);color:var(--gold);} .cm-body{padding:28px 32px;} .cm-section-title{font-size:10px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:20px;} .cm-order-summary{background:var(--noir);border:1px solid var(--border);padding:20px;margin-bottom:28px;} .cm-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:none;font-size:11px;} .cm-item:last-child{border-bottom:none;} .cm-item-name{color:var(--ivory);font-family:'Cormorant Garamond',serif;font-size:15px;} .cm-item-meta{color:var(--muted);font-size:10px;margin-top:2px;} .cm-item-price{color:var(--champagne);font-family:'Cormorant Garamond',serif;font-size:15px;white-space:nowrap;} .cm-sub-row,.cm-disc-row{display:flex;justify-content:space-between;align-items:center;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.5px;font-variant-numeric:tabular-nums lining-nums;padding-top:10px;} .cm-sub-row{color:var(--muted);} .cm-disc-row{color:var(--gold);} .cm-total-row{display:flex;justify-content:space-between;align-items:center;padding-top:18px;margin-top:10px;border-top:1px solid var(--border);} .cm-total-label{font-size:10px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;} .cm-total-val{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--ivory);} .cform{display:flex;flex-direction:column;gap:16px;} .cfield{display:flex;flex-direction:column;gap:7px;} .cfield-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .clabel{font-size:10px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;} .cfield input,.cfield select,.cfield textarea{ background:var(--noir);border:1px solid var(--border); color:var(--ivory);font-family:'Jost',sans-serif; font-size:13px;font-weight:400;padding:13px 15px; outline:none;transition:border-color .2s;width:100%; } .cfield input:focus,.cfield select:focus,.cfield textarea:focus{border-color:var(--gold);} .cfield input::placeholder,.cfield textarea::placeholder{color:var(--muted);} .cfield select{color:var(--muted);} .cfield select option{background:var(--noir);} .pay-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);cursor:pointer;transition:border-color .2s;} .pay-opt:hover,.pay-opt.selected{border-color:var(--gold);} .pay-opt input{accent-color:var(--gold);} .btn-place-order { width:100%;background:var(--gold);border:1px solid var(--gold); color:var(--noir);font-family:'Jost',sans-serif; font-size:10px;letter-spacing:4px;text-transform:uppercase; padding:18px;cursor:pointer;transition:all .3s;margin-top:24px; } .btn-place-order:hover{background:var(--champagne);border-color:var(--champagne);} /* Order success */ .order-success{text-align:center;padding:48px 32px;} .os-icon{font-size:48px;margin-bottom:20px;} .os-title{font-family:'Cormorant Garamond',serif;font-size:28px;margin-bottom:12px;} .os-sub{font-size:11px;color:var(--muted);line-height:2;margin-bottom:8px;} .os-order-num{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--champagne);margin:20px 0;} .os-btn{margin-top:24px;background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:'Jost',sans-serif;font-size:10px;letter-spacing:4px;text-transform:uppercase;padding:14px 32px;cursor:pointer;transition:all .3s;} .os-btn:hover{background:var(--gold);color:var(--noir);} /* TOAST */ .toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--gold);color:var(--noir);font-size:10px;letter-spacing:3px;text-transform:uppercase;padding:14px 28px;opacity:0;transition:all .3s;z-index:9999;pointer-events:none;} .toast.show{opacity:1;transform:translateX(-50%) translateY(0);} /* FOOTER */ /* ── NEWSLETTER / INNER CIRCLE ── */ .nl-section{padding:100px 48px;text-align:center;border-top:none;border-bottom:1px solid var(--border);background:var(--noir);} .nl-divider{display:flex;align-items:center;justify-content:center;gap:0;padding:48px 0 0;background:var(--noir);} .nl-divider-line{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.4;flex-shrink:0;} .nl-divider-star{font-size:10px;color:var(--gold);opacity:.6;line-height:1;width:32px;text-align:center;flex-shrink:0;} .nl-section{background:#F8F5F0;} .nl-divider{background:#F8F5F0;} .nl-input-wrap{border-color:#C8BBA8;} .nl-input-wrap input{color:#3D3833;} .nl-note{color:#8A6E2A;} .nl-inner{max-width:560px;margin:0 auto;} .nl-eyebrow{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:8px;color:var(--gold);text-transform:uppercase;margin-bottom:20px;} .nl-title{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,5vw,48px);font-weight:300;line-height:1.1;margin-bottom:20px;} .nl-title em{font-style:italic;color:var(--champagne);} .nl-desc{font-size:12px;color:var(--muted);line-height:2;margin-bottom:32px;max-width:440px;margin-left:auto;margin-right:auto;} .nl-form{margin-bottom:16px;} .nl-input-wrap{display:flex;gap:0;border:1px solid var(--border);transition:border-color .3s;} .nl-input-wrap:focus-within{border-color:var(--gold);} .nl-input-wrap input{flex:1;background:transparent;border:none;color:var(--ivory);font-family:'Jost',sans-serif;font-size:13px;font-weight:400;padding:16px 20px;outline:none;letter-spacing:1px;} .nl-input-wrap input::placeholder{color:var(--muted);} .nl-submit{background:var(--gold);border:none;color:var(--noir);font-family:'Jost',sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;padding:16px 28px;cursor:pointer;transition:all .25s;white-space:nowrap;} .nl-submit:hover:not(:disabled){background:var(--champagne);} .nl-submit:disabled{opacity:.3;cursor:not-allowed;} .nl-note{font-size:11px;color:var(--gold);letter-spacing:2px;opacity:.7;} @media(max-width:768px){.nl-section{padding:72px 24px;}.nl-desc{font-size:11px;}} @media(max-width:480px){.nl-section{padding:56px 20px;}.nl-input-wrap{flex-direction:column;}.nl-submit{width:100%;padding:14px;}} /* ── CREATORS PAGE ── */ .creators-wrap{max-width:700px;margin:0 auto;padding:120px 64px 100px;position:relative;z-index:1;} .creators-desc{font-size:15px;color:var(--muted);line-height:1.95;margin-bottom:48px;text-align:center;} .creators-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:48px;} .creators-card{border:1px solid var(--border);padding:24px;text-align:center;} .creators-card-title{font-size:10px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:8px;} .creators-card-desc{font-size:11px;color:var(--muted);line-height:1.8;} .creators-form-section{border-top:1px solid var(--border);padding-top:48px;margin-bottom:48px;} .creators-form-eyebrow{font-size:11px;letter-spacing:6px;color:var(--gold);text-transform:uppercase;text-align:center;margin-bottom:24px;} .creators-note{font-size:10px;color:var(--muted);text-align:center;line-height:2;opacity:.6;} @media(max-width:768px){ .creators-wrap{padding:100px 32px 80px;} .creators-desc{font-size:12px;line-height:2;} .creators-grid{gap:12px;} .creators-card{padding:20px 16px;} .creators-card-title{font-size:11px;letter-spacing:2px;} .creators-card-desc{font-size:10px;} #creators-page .story-headline{font-size:clamp(48px,10vw,64px);} #creators-page .story-pull{font-size:clamp(20px,4vw,28px);padding-left:20px;} #creators-page .story-eyebrow{font-size:7px;letter-spacing:6px;} } @media(max-width:480px){ .creators-wrap{padding:90px 20px 60px;} .creators-grid{grid-template-columns:1fr;gap:12px;} .creators-card{padding:20px;} .creators-desc{font-size:11px;} .creators-form-section{padding-top:36px;margin-bottom:36px;} .creators-form-section .btn-primary{width:100%;padding:16px 24px;font-size:11px;letter-spacing:3px;} #creators-page .story-headline{font-size:clamp(44px,12vw,60px);letter-spacing:-1px;} #creators-page .story-headline-line2{padding-left:clamp(16px,4vw,32px);} #creators-page .story-pull{font-size:clamp(18px,4.5vw,24px);padding-left:16px;margin-bottom:32px;} } /* ── MAISON PRIVÉE PAGE ── */ .privee-wrap{max-width:800px;margin:0 auto;padding:140px 64px 100px;position:relative;z-index:1;} .privee-intro{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--muted);line-height:2;text-align:center;max-width:600px;margin:0 auto;} .privee-spacer{height:80px;} .privee-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .privee-card{border:1px solid var(--border);padding:40px 32px;text-align:center;transition:border-color .3s;} .privee-card:hover{border-color:var(--gold);} .privee-card-icon{margin-bottom:20px;opacity:.7;} .privee-card-title{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:16px;} .privee-card-line{width:24px;height:1px;background:var(--gold);opacity:.3;margin:0 auto 16px;} .privee-card-desc{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--muted);line-height:1.9;} .privee-pull{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,3vw,32px);font-weight:300;font-style:italic;color:var(--ivory);line-height:1.5;text-align:center;max-width:500px;margin:0 auto;} .privee-pull em{color:var(--gold);font-style:normal;} .privee-form-section{border-top:1px solid var(--border);padding-top:64px;} .privee-form-eyebrow{font-size:11px;letter-spacing:6px;color:var(--gold);text-transform:uppercase;text-align:center;margin-bottom:32px;} .privee-note{font-size:10px;color:var(--muted);text-align:center;line-height:2;opacity:.6;} @media(max-width:768px){ .privee-wrap{padding:100px 32px 80px;} #privee-page .story-headline{font-size:clamp(48px,10vw,64px);} .privee-intro{font-size:16px;} .privee-spacer{height:56px;} .privee-grid{gap:16px;} .privee-card{padding:28px 24px;} .privee-card-desc{font-size:13px;} .privee-pull{font-size:clamp(20px,5vw,28px);} } @media(max-width:480px){ .privee-wrap{padding:90px 20px 60px;} .privee-grid{grid-template-columns:1fr;gap:14px;} .privee-card{padding:24px 20px;} .privee-intro{font-size:14px;} .privee-spacer{height:40px;} .privee-form-section{padding-top:40px;} .privee-form-section .btn-primary{width:100%;padding:16px 24px;font-size:11px;letter-spacing:3px;} #privee-page .story-headline{font-size:clamp(44px,12vw,60px);letter-spacing:-1px;} } footer{border-top:1px solid var(--border);padding:80px 80px 48px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;width:100%;box-sizing:border-box;} @media(max-width:900px){footer{grid-template-columns:1fr 1fr;padding:60px 32px 40px;}} @media(max-width:480px){footer{grid-template-columns:1fr;padding:48px 20px 32px;gap:32px;}} .footer-brand-name{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;letter-spacing:4px;margin-bottom:8px;} .footer-brand-name em{color:var(--gold);} .footer-social{display:flex;gap:12px;} .social-btn{width:36px;height:36px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-decoration:none;cursor:pointer;transition:all .2s;} .social-btn:hover{border-color:var(--gold);color:var(--gold);} .footer-col-title{font-size:11px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:20px;} .footer-links{display:flex;flex-direction:column;gap:10px;} .footer-links a{font-size:11px;color:var(--muted);text-decoration:none;cursor:pointer;transition:color .2s;letter-spacing:1px;} .footer-links a:hover{color:var(--champagne);} /* Ornamental footer wordmark — large calligraphic flourish above the copyright line. Uses Cormorant Garamond (loaded via Google Fonts) which renders true script swashes without needing OpenType features that Google Fonts strips. Falls back to Cormorant Garamond italic if Cormorant Garamond fails to load. */ .footer-ornament{ font-family:'Cormorant Garamond','Cormorant Garamond',serif; font-weight:400;font-style:normal; font-size:clamp(54px,11vw,148px); line-height:.95;letter-spacing:.005em; /* Match the copyright bar's text colour so the whole footer reads as one palette */ color:var(--muted);opacity:1; text-align:center;width:100%; padding:18px 24px 28px;margin:0; user-select:none;-webkit-font-smoothing:antialiased; white-space:nowrap;overflow:hidden;text-overflow:clip; } @media(max-width:768px){ .footer-ornament{font-size:clamp(42px,13vw,88px);padding:12px 16px 18px;} } @media(max-width:480px){ .footer-ornament{font-size:clamp(34px,15vw,66px);padding:10px 12px 14px;letter-spacing:0;} } .footer-bottom{padding:24px 80px;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;} .fb-payments{display:flex;gap:6px;align-items:center;} .fb-payments svg{opacity:.7;transition:opacity .3s;} .fb-payments svg:hover{opacity:1;} @media(max-width:600px){.footer-bottom{padding:20px 20px;flex-direction:column;gap:12px;text-align:center;}} .fb-copy{font-size:11px;color:var(--muted);letter-spacing:2px;} .pv-arrow{position:absolute;top:50%;transform:translateY(-50%);background:color-mix(in srgb,var(--noir) 55%,transparent);border:1px solid var(--border);color:var(--ivory);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;z-index:10;transition:all .2s;backdrop-filter:blur(6px);} .pv-arrow:hover{background:var(--gold);color:var(--noir);border-color:var(--gold);} .pv-arrow.left{left:12px;} .pv-arrow.right{right:12px;} .pv-arrow{background:rgba(255,255,255,0.75);border-color:rgba(180,165,140,0.4);color:var(--text-dark,#3D3833);} .pv-arrow:hover{background:var(--gold);color:#fff;border-color:var(--gold);} .pv-dot-wrap{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10;} .pv-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .2s;cursor:pointer;} .pv-dot.active{background:var(--gold);} .pv-dot{background:rgba(100,80,60,.25);} .pv-dot.active{background:var(--gold);} /* ANIMATIONS */ @keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}} @keyframes pulse{0%,100%{opacity:.3;}50%{opacity:1;}} .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s ease;} .reveal.visible{opacity:1;transform:translateY(0);} /* FEATURED IMAGE */ .featured-img-wrap{width:100%;height:500px;position:relative;overflow:hidden;background:transparent;} .featured-img-wrap img{width:100%;height:100%;object-fit:contain;object-position:center;background:transparent;} @media(max-width:480px){.featured-img-wrap{height:320px;}} .feat-img-arrow{position:absolute;top:50%;transform:translateY(-50%);background:color-mix(in srgb,var(--noir) 65%,transparent);border:1px solid var(--border);color:var(--champagne);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .25s;z-index:3;backdrop-filter:blur(4px);} .feat-img-arrow:hover{border-color:var(--gold);color:var(--gold);} .feat-img-arrow.prev{left:12px;} .feat-img-arrow.next{right:12px;} .feat-img-arrow{background:rgba(255,255,255,0.75);border-color:rgba(180,165,140,0.4);color:#3D3833;} .feat-img-arrow:hover{background:var(--gold);color:#fff;border-color:var(--gold);} .feat-img-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3;} .feat-img-dot{width:5px;height:5px;border-radius:50%;background:var(--muted);transition:all .25px;cursor:pointer;} .feat-img-dot.active{background:var(--gold);width:14px;border-radius:3px;} /* STORY PAGE */ /* ── STORY PAGE — ULTRA LUXURY REDESIGN ── */ .story-page-inner{position:relative;min-height:100vh;overflow:hidden;} /* Atmospheric background layers */ .story-bg{position:fixed;inset:0;pointer-events:none;z-index:0;} .story-bg-grad{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(232,93,26,.07) 0%,transparent 70%),radial-gradient(ellipse 60% 40% at 80% 80%,rgba(232,93,26,.04) 0%,transparent 60%),var(--bg);} .story-bg-lines{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(232,93,26,.03) 80px);opacity:.6;} .story-wrap{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:120px 64px 100px;} .story-back{margin-bottom:64px;} .story-back a{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--muted);text-decoration:none;cursor:pointer;transition:color .3s,letter-spacing .3s;} .story-back a:hover{color:var(--champagne);letter-spacing:6px;} /* Eyebrow */ .story-eyebrow{display:flex;align-items:center;gap:16px;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:10px;color:var(--gold);text-transform:uppercase;margin-bottom:24px;font-weight:400;opacity:0;animation:storyFadeUp .8s ease forwards .1s;} .story-eyebrow::before,.story-eyebrow::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.4;} /* Giant headline */ .story-headline{font-family:'Cormorant Garamond',serif;font-size:clamp(64px,10vw,130px);font-weight:300;line-height:.88;margin-bottom:0;letter-spacing:-2px;opacity:0;animation:storyFadeUp .9s ease forwards .2s;} .story-headline-line1{display:block;color:var(--ivory);} .story-headline-line2{display:block;font-style:italic;color:var(--gold);padding-left:clamp(32px,6vw,96px);} /* Horizontal rule after headline */ .story-rule{display:flex;align-items:center;gap:20px;margin:48px 0 64px;opacity:0;animation:storyFadeUp .7s ease forwards .35s;} .story-rule-line{flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.3;} .story-rule-diamond{color:var(--gold);font-size:10px;letter-spacing:4px;white-space:nowrap;text-align:center;line-height:1;} /* Opening statement — massive pull quote */ .story-pull{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3.5vw,42px);font-weight:300;font-style:italic;color:var(--ivory);line-height:1.3;letter-spacing:.3px;border-left:1px solid var(--gold);padding-left:32px;margin-bottom:64px;opacity:0;animation:storyFadeUp .8s ease forwards .45s;} .story-pull em{color:var(--gold);font-style:normal;} /* Body text columns */ .story-columns{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:64px;opacity:0;animation:storyFadeUp .8s ease forwards .6s;} .story-col p{font-size:15px;color:var(--muted);line-height:1.95;letter-spacing:.3px;} .story-col p+p{margin-top:24px;} /* Centre divider with roman numeral */ .story-center-break{text-align:center;margin:16px 0 64px;opacity:0;animation:storyFadeUp .7s ease forwards .75s;} .story-roman{font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:12px;color:var(--gold);opacity:.6;text-transform:uppercase;} .story-center-ornament{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:16px;} .story-center-ornament span{display:inline-block;width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));opacity:.3;} .story-center-ornament em{color:var(--gold);font-style:normal;font-size:14px;} .story-center-ornament span:last-child{background:linear-gradient(90deg,var(--gold),transparent);} /* Philosophy statement — full width */ .story-philosophy{font-family:'Cormorant Garamond',serif;font-size:clamp(18px,2.2vw,28px);font-weight:300;color:var(--ivory);line-height:1.7;text-align:center;max-width:640px;margin:0 auto 80px;opacity:0;animation:storyFadeUp .8s ease forwards .85s;} .story-philosophy em{font-style:italic;color:var(--champagne);} /* Closing manifesto line */ .story-manifesto{position:relative;padding:48px 0;border-top:1px solid rgba(232,93,26,.15);border-bottom:1px solid rgba(232,93,26,.15);margin-bottom:64px;text-align:center;opacity:0;animation:storyFadeUp .8s ease forwards 1s;} .story-manifesto-text{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,3vw,36px);font-style:italic;color:var(--ivory);line-height:1.4;letter-spacing:.5px;} .story-manifesto-text em{color:var(--gold);font-style:normal;} /* Signature */ .story-sig{display:flex;align-items:flex-end;justify-content:space-between;opacity:0;animation:storyFadeUp .8s ease forwards 1.1s;} .story-sig-left{} .story-maison{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:6px;color:var(--gold);text-transform:uppercase;margin-top:8px;font-weight:400;opacity:.7;} .story-sig-right{text-align:right;} .story-year{font-family:'Cormorant Garamond',serif;font-size:clamp(48px,6vw,80px);color:rgba(232,93,26,.12);font-weight:300;line-height:1;letter-spacing:-2px;} /* Animations */ @keyframes storyFadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}} /* Floating gold particles */ .story-particle{position:fixed;pointer-events:none;z-index:0;width:1px;height:1px;background:var(--gold);border-radius:50%;animation:particleDrift linear infinite;opacity:0;} @keyframes particleDrift{0%{opacity:0;transform:translateY(100vh) translateX(0);}10%{opacity:.4;}90%{opacity:.2;}100%{opacity:0;transform:translateY(-10vh) translateX(20px);}} /* CONTACT PAGE */ .contact-wrap{max-width:1100px;margin:0 auto;padding:120px 48px 80px;} @media(max-width:480px){.contact-wrap{padding:100px 20px 60px;}} .contact-header{margin-bottom:64px;} .contact-grid{display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:start;} @media(max-width:800px){.contact-grid{grid-template-columns:1fr;gap:40px;}} .contact-info{display:flex;flex-direction:column;gap:28px;} .ci-block{border-bottom:1px solid var(--border);padding-bottom:24px;} .ci-icon{font-size:18px;margin-bottom:6px;} .ci-label{font-size:10px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:6px;} .ci-value{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--ivory);line-height:1.6;} .ci-value a{color:var(--champagne);text-decoration:none;cursor:pointer;transition:color .2s;} .ci-value a:hover{color:var(--ivory);} .cf-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;margin-bottom:32px;} .contact-cform{display:flex;flex-direction:column;gap:20px;} .contact-cfield{display:flex;flex-direction:column;gap:8px;} .contact-clabel{font-size:10px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;} .contact-cfield input,.contact-cfield textarea{background:var(--ombre);border:1px solid var(--border);color:var(--ivory);font-family:'Jost',sans-serif;font-size:13px;font-weight:400;padding:14px 16px;outline:none;transition:border-color .2s;width:100%;resize:vertical;} .contact-cfield input:focus,.contact-cfield textarea:focus{border-color:var(--gold);} .contact-cfield input::placeholder,.contact-cfield textarea::placeholder{color:var(--muted);} /* ══════════════════════════════════════ SEARCH ══════════════════════════════════════ */ .search-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:4px 8px;font-size:15px;transition:color .2s;display:flex;align-items:center;} .search-btn:hover{color:var(--champagne);} @media(max-width:768px){.search-btn{cursor:pointer;}} .search-overlay{position:fixed;inset:0;z-index:3000;background:var(--search-bg);opacity:0;pointer-events:none;transition:opacity .35s;display:flex;flex-direction:column;} .search-overlay.open{opacity:1;pointer-events:all;} .search-overlay::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");pointer-events:none;} .search-header{padding:28px 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:relative;z-index:1;} @media(max-width:480px){.search-header{padding:20px 20px;}} .search-label{font-size:10px;letter-spacing:6px;color:var(--gold);text-transform:uppercase;} .search-close{background:transparent;border:1px solid var(--border);color:var(--muted);width:36px;height:36px;cursor:pointer;font-size:14px;transition:all .2s;display:flex;align-items:center;justify-content:center;} .search-close:hover{border-color:var(--gold);color:var(--gold);} .search-input-wrap{padding:48px 48px 32px;position:relative;z-index:1;} @media(max-width:480px){.search-input-wrap{padding:32px 20px 24px;}} .search-input-row{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--border);padding-bottom:16px;} .search-icon-disp{color:var(--gold);font-size:18px;flex-shrink:0;} .search-input{background:transparent;border:none;outline:none;color:var(--ivory);font-family:'Cormorant Garamond',serif;font-size:clamp(28px,5vw,52px);font-weight:300;width:100%;letter-spacing:1px;} .search-input::placeholder{color:var(--muted);font-style:italic;} .search-clear{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:20px;padding:4px;transition:color .2s;flex-shrink:0;} .search-clear:hover{color:var(--gold);} .search-body{flex:1;overflow-y:auto;padding:0 48px 48px;position:relative;z-index:1;} @media(max-width:480px){.search-body{padding:0 20px 32px;}} .search-hint{font-size:10px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;margin-bottom:32px;} .search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;} .search-card{background:var(--ombre);border:1px solid var(--border);padding:20px;cursor:pointer;transition:all .25s;display:flex;gap:16px;align-items:center;} .search-card:hover{border-color:var(--gold);transform:translateY(-2px);} .sc-thumb{width:56px;height:56px;background:var(--noir);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;overflow:hidden;} .sc-thumb img{width:100%;height:100%;object-fit:cover;} .sc-info{flex:1;min-width:0;} .sc-tag{font-size:7px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:4px;} .sc-name{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--ivory);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sc-mood{font-family:'Cormorant Garamond',serif;font-size:12px;color:var(--muted);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sc-price{font-family:'Jost',sans-serif;font-weight:400;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.02em;font-size:13px;color:var(--champagne);margin-top:4px;} .search-no-results{text-align:center;padding:60px 24px;} .snr-icon{font-size:36px;margin-bottom:14px;opacity:.25;} .snr-text{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--muted);font-style:italic;margin-bottom:8px;} .snr-sub{font-size:10px;color:var(--muted);letter-spacing:2px;opacity:.6;} /* ══════════════════════════════════════ REVIEWS ══════════════════════════════════════ */ .reviews-section{margin-top:0;padding:64px 48px;border-top:1px solid var(--border);max-width:100%;box-sizing:border-box;} @media(max-width:768px){.reviews-section{padding:48px 24px;}} @media(max-width:480px){.reviews-section{padding:40px 16px;}} /* ── RECOMMENDATIONS ── */ .reco-section{margin-top:0;padding:64px 0;border-top:1px solid var(--border);} .reco-section-header{padding:0 48px;margin-bottom:32px;} @media(max-width:768px){.reco-section-header{padding:0 24px;}} @media(max-width:480px){.reco-section-header{padding:0 20px;}} .reco-eyebrow{font-size:10px;letter-spacing:6px;color:var(--gold);text-transform:uppercase;margin-bottom:8px;} .reco-title{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4vw,40px);font-weight:300;color:var(--ivory);margin-bottom:0;} .reco-title em{font-style:italic;color:var(--champagne);} .reco-grid{display:flex;flex-wrap:nowrap;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 0 32px;} .reco-grid::-webkit-scrollbar{display:none;} .reco-grid .reco-card:first-child{margin-left:48px;} .reco-grid .reco-card:last-child{margin-right:48px;} @media(max-width:768px){.reco-grid{gap:16px;padding-bottom:24px;}.reco-grid .reco-card:first-child{margin-left:24px;}.reco-grid .reco-card:last-child{margin-right:24px;}} @media(max-width:480px){.reco-grid{gap:16px;padding-bottom:20px;}.reco-grid .reco-card:first-child{margin-left:20px;}.reco-grid .reco-card:last-child{margin-right:20px;}} .reco-card{background:var(--ombre);border:none;box-shadow:inset 0 0 0 1px var(--border);border-radius:14px;cursor:pointer;transition:box-shadow .3s,transform .3s;position:relative;overflow:hidden;min-width:260px;max-width:260px;flex-shrink:0;scroll-snap-align:start;display:flex;flex-direction:column;} .reco-card:hover{box-shadow:inset 0 0 0 1px var(--gold);transform:translateY(-6px);} @media(max-width:768px){.reco-card{min-width:220px;max-width:220px;}} @media(max-width:480px){.reco-card{min-width:190px;max-width:190px;}} .reco-card-visual{height:220px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .reco-card-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .5s cubic-bezier(.25,.46,.45,.94);} .reco-card:hover .reco-card-visual img{transform:scale(1.05);} .reco-card-emoji{font-size:64px;filter:drop-shadow(0 12px 30px rgba(232,93,26,.3));transition:transform .4s;} .reco-card:hover .reco-card-emoji{transform:scale(1.08) translateY(-6px);} .reco-card-glow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:70%;height:45%;background:radial-gradient(ellipse,rgba(232,93,26,.18),transparent);pointer-events:none;} .reco-card-body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--border);} .reco-card-tag{font-size:7px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:4px;} .reco-card-name{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:400;color:var(--ivory);line-height:1.2;} .reco-card-mood{font-family:'Cormorant Garamond',serif;font-size:12px;color:var(--muted);font-style:italic;line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .reco-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;} .reco-card-btn{font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;transition:color .2s;} .reco-card:hover .reco-card-btn{color:var(--gold);} .reco-card:hover{border-color:var(--gold);transform:translateY(-4px);} .reco-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,93,26,.05),transparent);opacity:0;transition:opacity .3s;} .reco-card:hover::before{opacity:1;} .reco-card{background:#EDE8E0;border-color:#D8D0C4;} .rs-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:40px;flex-wrap:wrap;gap:20px;} .rs-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;} .rs-title em{font-style:italic;color:var(--champagne);} .rs-summary{display:flex;align-items:center;gap:24px;flex-wrap:wrap;} .rss-score{text-align:center;} .rss-big{font-family:'Cormorant Garamond',serif;font-size:56px;color:var(--ivory);line-height:1;} .rss-stars{color:var(--gold);font-size:14px;letter-spacing:4px;margin:4px 0;} .rss-count{font-size:11px;color:var(--muted);letter-spacing:3px;text-transform:uppercase;} .rss-bars{display:flex;flex-direction:column;gap:6px;min-width:160px;} .rss-bar-row{display:flex;align-items:center;gap:8px;} .rss-bar-label{font-size:11px;color:var(--muted);width:10px;text-align:right;flex-shrink:0;} .rss-bar-track{flex:1;height:3px;background:var(--border);position:relative;overflow:hidden;} .rss-bar-fill{height:100%;background:var(--gold);transition:width .6s ease;} .rss-bar-count{font-size:11px;color:var(--muted);width:16px;text-align:right;flex-shrink:0;} .btn-write-review{background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:'Jost',sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;padding:13px 28px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;} .btn-write-review::before{content:'';position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);transition:transform .3s ease;} .btn-write-review:hover::before{transform:translateX(0);} .btn-write-review span{position:relative;z-index:1;} .btn-write-review:hover span{color:var(--noir);} .reviews-list{display:flex;flex-direction:column;gap:0;} .review-item{padding:28px 0;border-bottom:1px solid var(--border);} .review-item:first-child{border-top:1px solid var(--border);} .ri-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;gap:16px;flex-wrap:wrap;} .ri-author{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--ivory);} .ri-meta{font-size:11px;color:var(--muted);letter-spacing:1px;margin-top:4px;} .ri-stars{color:var(--gold);font-size:12px;letter-spacing:3px;} .ri-body{font-size:12px;color:var(--muted);line-height:2.2;max-width:640px;} .reviews-load-more-wrap{text-align:center;padding:32px 0 8px;} .btn-load-more-reviews{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Jost',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;padding:13px 32px;cursor:pointer;transition:all .25s;} .btn-load-more-reviews:hover{border-color:var(--gold);color:var(--champagne);} .no-reviews{text-align:center;padding:48px 24px;border:1px solid var(--border);} .nr-stars{font-size:28px;color:var(--border);letter-spacing:4px;margin-bottom:14px;} .nr-sub{font-size:11px;color:var(--muted);letter-spacing:2px;margin-top:6px;} .nr-text{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--muted);font-style:italic;margin-bottom:16px;} /* Review Form Modal */ .review-modal-bg{position:fixed;inset:0;background:var(--overlay-bg);z-index:4000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(8px);padding:20px;} .review-modal-bg.open{opacity:1;pointer-events:all;} .review-modal{background:var(--ombre);border:1px solid var(--border);width:100%;max-width:520px;transform:translateY(20px);transition:transform .35s;} .review-modal-bg.open .review-modal{transform:translateY(0);} .rm-header{padding:24px 28px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;} .rm-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;} .rm-close{background:transparent;border:1px solid var(--border);color:var(--muted);width:32px;height:32px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .2s;} .rm-close:hover{border-color:var(--gold);color:var(--gold);} .rm-body{padding:28px;} .rm-product{display:flex;align-items:center;gap:12px;padding:14px;background:var(--noir);border:1px solid var(--border);margin-bottom:24px;} .rm-product-thumb{width:40px;height:40px;font-size:20px;display:flex;align-items:center;justify-content:center;} .rm-product-name{font-family:'Cormorant Garamond',serif;font-size:16px;} .rm-product-sub{font-size:11px;color:var(--muted);letter-spacing:2px;} .rm-field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;} .rm-label{font-size:10px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;} .rm-field input,.rm-field textarea{background:var(--noir);border:1px solid var(--border);color:var(--ivory);font-family:'Jost',sans-serif;font-size:13px;font-weight:400;padding:13px 15px;outline:none;transition:border-color .2s;width:100%;resize:vertical;} .rm-field input:focus,.rm-field textarea:focus{border-color:var(--gold);} .rm-field input::placeholder,.rm-field textarea::placeholder{color:var(--muted);} /* Star selector */ .star-selector{display:flex;gap:6px;margin-top:4px;} .star-sel{font-size:26px;cursor:pointer;color:var(--border);transition:color .15s,transform .15s;} .star-sel:hover,.star-sel.active{color:var(--gold);} .star-sel:hover{transform:scale(1.15);} .star-sel.pop{animation:hf-star-pop .25s ease;} @keyframes hf-star-pop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}} .rating-label{font-size:10px;color:var(--muted);margin-left:8px;font-style:italic;font-family:'Cormorant Garamond',serif;align-self:center;} .btn-submit-review{width:100%;background:var(--gold);border:1px solid var(--gold);color:var(--noir);font-family:'Jost',sans-serif;font-size:10px;letter-spacing:4px;text-transform:uppercase;padding:16px;cursor:pointer;transition:all .3s;margin-top:8px;} .btn-submit-review:hover{background:var(--champagne);border-color:var(--champagne);} /* ══════════════════════════════════════ FAQ PAGE ══════════════════════════════════════ */ .faq-wrap{max-width:900px;margin:0 auto;padding:120px 48px 100px;} @media(max-width:600px){.faq-wrap{padding:100px 20px 80px;}} .faq-back{margin-bottom:48px;} .faq-back a{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);text-decoration:none;cursor:pointer;transition:color .2s;} .faq-back a:hover{color:var(--champagne);} .faq-eyebrow{font-size:11px;letter-spacing:8px;color:var(--gold);text-transform:uppercase;margin-bottom:16px;} .faq-headline{font-family:'Cormorant Garamond',serif;font-size:clamp(48px,8vw,96px);font-weight:300;line-height:.95;margin-bottom:20px;} .faq-headline em{font-style:italic;color:var(--champagne);} .faq-intro{font-size:15px;color:var(--muted);line-height:1.85;max-width:600px;margin-bottom:72px;font-family:'Cormorant Garamond',serif;font-style:italic;} /* Category label */ .faq-category{font-size:10px;letter-spacing:6px;color:var(--gold);text-transform:uppercase;margin-bottom:0;padding:0 0 16px;border-bottom:1px solid var(--border);margin-top:64px;} .faq-category:first-of-type{margin-top:0;} /* Accordion items */ .faq-list{margin-top:0;} .faq-item{border-bottom:1px solid var(--border);overflow:hidden;} .faq-question{ width:100%;background:transparent;border:none; display:flex;align-items:center;justify-content:space-between;gap:24px; padding:28px 0;cursor:pointer;text-align:left; transition:all .2s; } .faq-question:hover .fq-text{color:var(--ivory);} .fq-text{ font-family:'Cormorant Garamond',serif; font-size:clamp(18px,2.5vw,22px); font-weight:400;color:var(--champagne); line-height:1.3;transition:color .25s; } .fq-icon{ flex-shrink:0;width:32px;height:32px; border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--gold);font-size:16px; transition:all .35s cubic-bezier(.4,0,.2,1); } .faq-item.open .fq-icon{ transform:rotate(45deg); border-color:var(--gold); background:rgba(232,93,26,.08); } .faq-item.open .fq-text{color:var(--ivory);} .faq-answer{ max-height:0;overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease; opacity:0; } .faq-item.open .faq-answer{opacity:1;} .fa-inner{ padding:0 48px 28px 0; font-size:15px;color:var(--muted); line-height:1.85; } @media(max-width:480px){.fa-inner{padding:0 0 24px;}} .fa-inner strong{color:var(--champagne);font-weight:500;} .fa-inner em{font-style:italic;color:var(--ivory);} /* Still have questions */ .faq-cta{margin-top:80px;padding:48px;border:1px solid var(--border);background:var(--ombre);text-align:center;} .faq-cta-title{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4vw,40px);margin-bottom:12px;} .faq-cta-title em{font-style:italic;color:var(--champagne);} .faq-cta-sub{font-size:12px;color:var(--muted);margin-bottom:32px;line-height:2;} .faq-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} /* ══════════════════════════════════════════════════════ THE SCENTS PAGE ══════════════════════════════════════════════════════ */ #scents-page { min-height: 100vh; } /* ── SCENTS HERO BANNER ── */ .scents-hero { padding: 140px 80px 80px; display: grid; grid-template-columns: 1fr auto; align-items: flex-end; gap: 40px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } @media(max-width:768px){ .scents-hero{ padding: 120px 24px 48px; grid-template-columns:1fr; } } .scents-hero::before { content:''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: radial-gradient(ellipse at 80% 30%, rgba(232,93,26,.06), transparent 70%); pointer-events: none; } .sh-left {} .sh-eyebrow { font-size: 10px; letter-spacing: 8px; color: var(--gold); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .sh-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--gold); display: inline-block; } .sh-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(56px, 9vw, 120px); font-weight: 300; line-height: .88; letter-spacing: -2px; margin-bottom: 24px; } .sh-title em { font-style: italic; color: var(--champagne); } .sh-desc { font-family: 'Cormorant Garamond', serif; font-size: 16px; color: var(--muted); font-style: italic; line-height: 2; max-width: 420px; } .sh-count { text-align: right; flex-shrink: 0; } .sh-count-num { font-family: 'Cormorant Garamond', serif; font-size: 80px; color: var(--border); line-height: 1; font-weight: 300; } .sh-count-label { font-size: 10px; letter-spacing: 4px; color: var(--muted); text-transform: uppercase; } /* ── CONTROLS BAR ── */ .scents-controls { padding: 24px 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border); background: var(--noir); backdrop-filter: blur(8px); position: sticky; top: var(--nav-h, 60px); z-index: 50; flex-wrap: wrap; transition: top .35s cubic-bezier(.4,0,.2,1); } .nav-hidden-mode .scents-controls { top: 0; } @media(max-width:768px){ .filter-pills{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .filter-pills::-webkit-scrollbar{display:none;} } /* Filter pills */ .filter-pills { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; flex: 1; overflow-x: auto; scrollbar-width: none; } .filter-pills::-webkit-scrollbar{display:none;} @media(max-width:768px){ .filter-pills { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; } .filter-pills::-webkit-scrollbar { display: none; } } .fp-label { font-size: 7px; letter-spacing: 4px; color: var(--muted); text-transform: uppercase; margin-right: 4px; } .fp-pill { background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; padding: 8px 18px; border-radius: 999px; /* capsule shape */ cursor: pointer; transition: all .2s; white-space: nowrap; } .fp-pill:hover { border-color: rgba(232,93,26,.5); color: var(--champagne); } .fp-pill.active { border-color: var(--gold); color: var(--gold); background: rgba(232,93,26,.08); } /* Sort + View controls */ .scents-right-controls { display: flex; align-items: center; gap: 16px; } .sort-select { background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 8px 14px; cursor: pointer; outline: none; transition: border-color .2s; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236a6050'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } .sort-select:focus, .sort-select:hover { border-color: rgba(232,93,26,.5); color: var(--champagne); } .sort-select option { background: #2A1608; color: var(--ivory); } .view-toggle { display: flex; gap: 4px; } .vt-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 34px; height: 34px; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; font-size: 13px; } .vt-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(232,93,26,.08); } .vt-btn:hover { border-color: rgba(232,93,26,.5); color: var(--champagne); } /* Results count */ .scents-results-bar { padding: 20px 80px; display: flex; align-items: center; justify-content: space-between; } @media(max-width:768px){ .scents-results-bar{ padding: 16px 20px; } } .srb-count { font-size: 11px; letter-spacing: 3px; color: var(--muted); text-transform: uppercase; } .srb-count span { color: var(--champagne); } .srb-clear { background: transparent; border: none; color: var(--muted); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: color .2s; padding: 0; display: none; } .srb-clear.show { display: block; } .srb-clear:hover { color: var(--gold); } /* ── PRODUCT GRID ── */ .scents-grid-wrap { padding: 32px 80px 120px; max-width: 1400px; margin: 0 auto; } @media(max-width:768px){ .scents-grid-wrap{ padding: 16px 20px 80px; } } .scents-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; transition: all .3s; } /* Gallery view — pure photo mosaic, no card chrome. Click a tile to open the product page. Replaces the previous horizontal "list" view. The icon toggle in the controls bar still flips this class. */ .scents-grid.view-list { grid-template-columns: repeat(6, 1fr); gap: 10px; } /* Stable column count at every desktop/laptop width: always 4 */ @media(max-width:1100px){ .scents-grid{ grid-template-columns: repeat(3, 1fr); gap: 22px; } } @media(max-width:820px){ .scents-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; } } /* Phones: keep exactly 2 cards per row — never drop to 1. Tighter gap + smaller body padding so two cards fit comfortably even at iPhone SE width (~375px). List view still forces 1 column at all sizes. */ @media(max-width:480px){ .scents-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; } .scents-grid.view-list{ grid-template-columns: repeat(4, 1fr); gap: 6px; } .scents-grid:not(.view-list) .sc-card-body{ padding: 14px 1px 0; } .scents-grid:not(.view-list) .sc-cat{ font-size: 8.5px; letter-spacing: 0.24em; margin-bottom: 7px; } .scents-grid:not(.view-list) .sc-pname{ font-size: 20px; } .scents-grid:not(.view-list) .sc-pdesc{ font-size: 13.5px; margin-bottom: 12px; } .scents-grid:not(.view-list) .sc-foot{ padding-top: 12px; } .scents-grid:not(.view-list) .sc-price-lg{ font-size: 19px; } .scents-grid:not(.view-list) .sc-price-lg .cur{ font-size: 13px; } .scents-grid:not(.view-list) .sc-add-btn{ font-size: 9px; gap: 8px; } .scents-grid:not(.view-list) .sc-plus{ width: 26px; height: 26px; } .scents-grid:not(.view-list) .sc-sig{ font-size: 7.5px; padding: 6px 10px; } } /* Gallery intermediate breakpoints */ @media(max-width:1100px){ .scents-grid.view-list{ grid-template-columns: repeat(5, 1fr); gap: 8px; } } @media(max-width:820px) { .scents-grid.view-list{ grid-template-columns: repeat(4, 1fr); gap: 8px; } } /* Size picker — slides up from the bottom of the card when Add to Cart is clicked on a multi-size product. Single-size products skip this and add directly. */ .sc-card-size-picker { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ombre); border-top: 1px solid var(--gold); padding: 16px 18px 18px; transform: translateY(100%); transition: transform .3s cubic-bezier(.25,.46,.45,.94); z-index: 5; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } .sc-card-size-picker.is-open { transform: translateY(0); } .sc-picker-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 4px 6px; transition: color .2s; } .sc-picker-close:hover { color: var(--gold); } .sc-picker-label { font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .sc-picker-options { display: flex; flex-direction: column; gap: 6px; } .sc-picker-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: transparent; border: 1px solid var(--border); color: var(--ivory); font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 10px 14px; cursor: pointer; text-align: left; transition: background .2s, border-color .2s, color .2s; } .sc-picker-opt:hover:not(.is-oos) { background: var(--gold); color: var(--noir); border-color: var(--gold); } .sc-picker-opt.is-oos { opacity: .4; cursor: not-allowed; } .sc-picker-opt-size { font-weight: 500; } .sc-picker-opt-meta { font-weight: 300; opacity: .85; font-feature-settings: 'tnum'; } .sc-picker-opt.is-oos .sc-picker-opt-meta { color: #c07070; opacity: 1; } /* GRID CARD — stripped of card chrome: no card background, no border, no rounded clip. Image is the card; text floats below on the page. */ .sc-card { position: relative; background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; /* let the image keep its own corners; nothing to clip */ cursor: pointer; transition: transform .35s cubic-bezier(.25,.46,.45,.94); animation: sc-fadein .4s ease both; display: flex; flex-direction: column; } .sc-card:hover { transform: translateY(-4px); z-index: 2; } @keyframes sc-fadein { from { opacity: 0; transform: translateY(16px) rotate(var(--tilt,0deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--tilt,0deg)); } } /* staggered animation delays */ .sc-card:nth-child(1){animation-delay:.05s} .sc-card:nth-child(2){animation-delay:.08s} .sc-card:nth-child(3){animation-delay:.11s} .sc-card:nth-child(4){animation-delay:.14s} .sc-card:nth-child(5){animation-delay:.17s} .sc-card:nth-child(6){animation-delay:.20s} .sc-card:nth-child(7){animation-delay:.23s} .sc-card:nth-child(8){animation-delay:.26s} .sc-card-visual { aspect-ratio: 4 / 5; /* matches upload spec — full photo always visible, no crop */ position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: transparent; /* no card-visual tint either — image stands alone */ border-radius: 14px; /* round just the photo; card itself has no chrome */ } .sc-card-visual img { width: 100%; height: 100%; object-fit: cover; /* with matching 4:5 aspect, this shows the full image */ position: absolute; inset: 0; transition: transform .6s cubic-bezier(.25,.46,.45,.94); } .sc-card:hover .sc-card-visual img { transform: scale(1.06); } .sc-card-emoji { font-size: 72px; filter: drop-shadow(0 12px 40px rgba(232,93,26,.25)); transition: transform .4s cubic-bezier(.25,.46,.45,.94); position: relative; z-index: 1; } .sc-card:hover .sc-card-emoji { transform: scale(1.1) translateY(-8px); } .sc-card-glow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 60%; background: radial-gradient(ellipse, rgba(232,93,26,.15), transparent); pointer-events: none; } /* ════════════════════════════════════════════════════════════ "ELEVATED" SCENTS CARD (from The Scents · Elevated design handoff) media → signal badge + hover-reveal olfactive pyramid; info → category / name / italic desc / footer (discovery price + Add). Theme-aware via MDP vars so it reads in both light + dark. ════════════════════════════════════════════════════════════ */ /* Signal badge — translucent panel, gold hairline */ .sc-sig { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; font-family: 'Jost', sans-serif; font-size: 8.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ivory); background: color-mix(in srgb, var(--ombre) 86%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 7px 12px; border: 1px solid rgba(232,93,26,0.42); border-radius: 2px; } .sc-sig-star { color: var(--gold); font-size: 10px; line-height: 1; } .sc-sig.scarce { color: var(--champagne); } .sc-sig.oos { color: #e5a8a8; border-color: rgba(192,112,112,0.5); } /* Hover-reveal olfactive pyramid — slides up from the media bottom */ .sc-notes { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; padding: 24px 20px 20px; background: linear-gradient(to top, var(--ombre) 0%, color-mix(in srgb, var(--ombre) 90%, transparent) 55%, color-mix(in srgb, var(--ombre) 0%, transparent) 100%); transform: translateY(101%); opacity: 0; transition: transform .7s cubic-bezier(.2,.7,.15,1), opacity .5s ease; } .sc-card:hover .sc-notes { transform: translateY(0); opacity: 1; } .sc-nrule { width: 24px; height: 1px; background: var(--gold); margin-bottom: 14px; } .sc-note { display: flex; align-items: baseline; gap: 11px; margin-bottom: 8px; } .sc-note:last-child { margin-bottom: 0; } .sc-note .lbl { font-family: 'Jost', sans-serif; font-size: 8px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); flex: none; width: 42px; } .sc-note .val { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; line-height: 1.25; color: var(--ivory); } /* media hairline frame warms on hover */ .sc-card-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; border: 1px solid transparent; border-radius: 14px; transition: border-color .6s ease; } .sc-card:hover .sc-card-visual::after { border-color: rgba(232,93,26,0.32); } /* Info block */ .sc-card-body { position: relative; padding: 18px 2px 0; display: flex; flex-direction: column; flex: 1; background: transparent; } .sc-cat { font-family: 'Jost', sans-serif; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .sc-pname { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 26px; line-height: 1; color: var(--ivory); margin: 0 0 8px; } .sc-pname em { font-style: italic; color: var(--champagne); } .sc-pdesc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; line-height: 1.4; color: var(--muted); margin: 0 0 18px; max-width: 30ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.8em; /* 2-line reserve → cards align */ } .sc-foot { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 16px; margin-top: auto; } .sc-pricewrap { display: flex; flex-direction: column; gap: 5px; } .sc-disc { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); } .sc-price-lg { font-family: 'Cormorant Garamond', serif; font-size: 23px; line-height: 1; color: var(--ivory); font-variant-numeric: tabular-nums lining-nums; } .sc-price-lg .cur { font-size: 16px; vertical-align: 1px; margin-right: 1px; } /* Single Add action — circular plus that fills gold */ .sc-add-btn { display: inline-flex; align-items: center; gap: 11px; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ivory); background: none; border: none; cursor: pointer; padding: 0; } .sc-add-txt { transition: color .4s ease; } .sc-add-btn:hover .sc-add-txt { color: var(--gold); } .sc-plus { width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative; border: 1px solid var(--gold); display: grid; place-items: center; transition: background .45s ease, border-color .45s ease; } .sc-plus::before, .sc-plus::after { content: ''; position: absolute; background: var(--gold); transition: background .45s ease; } .sc-plus::before { width: 11px; height: 1px; } .sc-plus::after { width: 1px; height: 11px; } .sc-add-btn:hover .sc-plus { background: var(--gold); border-color: var(--gold); } .sc-add-btn:hover .sc-plus::before, .sc-add-btn:hover .sc-plus::after { background: var(--noir); } /* Sold-out (notify) variant — red-tinted */ .sc-plus.is-bell { border-color: rgba(192,112,112,0.6); } .sc-plus.is-bell::before, .sc-plus.is-bell::after { background: #c07070; } .sc-add-btn:hover .sc-plus.is-bell { background: #c07070; border-color: #c07070; } .sc-add-btn:hover .sc-plus.is-bell::before, .sc-add-btn:hover .sc-plus.is-bell::after { background: var(--noir); } /* Gallery/list view keeps just the photo — suppress the notes overlay there */ .scents-grid.view-list .sc-notes { display: none; } /* LIST VIEW card */ /* Gallery tile — rounded corners, no border/box-shadow, no body chrome. Just the photo, clipped to the rounded shape. */ .scents-grid.view-list .sc-card { border-radius: 10px; border: none; box-shadow: none; background: transparent; animation: sc-fadein .4s ease both; transform: none !important; cursor: pointer; overflow: hidden; display: block; } .scents-grid.view-list .sc-card:hover { transform: none !important; z-index: 2; } .scents-grid.view-list .sc-card-visual { aspect-ratio: 4 / 5; height: auto; position: relative; overflow: hidden; display: block; } .scents-grid.view-list .sc-card-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .55s cubic-bezier(.25,.46,.45,.94); } /* Hover: image enlarges, nothing else changes */ .scents-grid.view-list .sc-card:hover .sc-card-visual img { transform: scale(1.08); } /* Hide every piece of card chrome — the gallery is pure photo */ .scents-grid.view-list .sc-card-body, .scents-grid.view-list .sc-sig, .scents-grid.view-list .sc-notes, .scents-grid.view-list .sc-card-emoji, .scents-grid.view-list .sc-card-glow { display: none !important; } /* ── MOBILE FILTER DRAWER ── */ .mf-trigger-bar{display:none;} .mf-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1100;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .3s;} .mf-overlay.open{display:block;opacity:1;} .mf-drawer{position:fixed;bottom:0;left:0;right:0;z-index:1101;background:var(--noir);border-top:1px solid var(--border);transform:translateY(100%);transition:transform .4s cubic-bezier(.25,.8,.25,1);max-height:85vh;display:flex;flex-direction:column;border-radius:16px 16px 0 0;} .mf-drawer.open{transform:translateY(0);} .mf-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);} .mf-drawer-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:var(--ivory);} .mf-drawer-close{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px;transition:color .2s;} .mf-drawer-close:hover{color:var(--ivory);} .mf-drawer-body{flex:1;overflow-y:auto;padding:20px 24px;-webkit-overflow-scrolling:touch;} .mf-section{margin-bottom:28px;} .mf-section:last-child{margin-bottom:12px;} .mf-section-label{font-size:10px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:14px;} .mf-chips{display:flex;gap:8px;flex-wrap:wrap;} .mf-chip{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Jost',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:10px 22px;border-radius:999px;cursor:pointer;transition:all .25s;} .mf-chip:hover{border-color:rgba(232,93,26,.4);color:var(--champagne);} .mf-chip.active{border-color:var(--gold);color:var(--gold);background:rgba(232,93,26,.1);} .mf-sort-opts{display:flex;flex-direction:column;gap:2px;} .mf-sort-opt{background:transparent;border:none;color:var(--muted);font-family:'Jost',sans-serif;font-size:11px;letter-spacing:1px;padding:12px 16px;cursor:pointer;transition:all .2s;text-align:left;border-left:2px solid transparent;} .mf-sort-opt:hover{color:var(--champagne);} .mf-sort-opt.active{color:var(--gold);border-left-color:var(--gold);background:rgba(232,93,26,.05);} .mf-view-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:12px;cursor:pointer;transition:all .25s;} .mf-view-opt:hover{border-color:rgba(232,93,26,.4);} .mf-view-opt.active{border-color:var(--gold);color:var(--gold);background:rgba(232,93,26,.08);} .mf-drawer-footer{display:flex;gap:12px;padding:16px 24px 28px;border-top:1px solid var(--border);} .mf-clear-btn{flex:1;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Jost',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;padding:14px;cursor:pointer;transition:all .2s;} .mf-clear-btn:hover{border-color:var(--gold);color:var(--champagne);} .mf-apply-btn{flex:2;background:var(--gold);border:none;color:var(--noir);font-family:'Jost',sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;padding:14px;cursor:pointer;transition:opacity .2s;} .mf-apply-btn:hover{opacity:.85;} /* Trigger bar */ .mf-trigger-bar{position:sticky;top:var(--nav-h, 56px);z-index:50;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;background:var(--noir);border-bottom:1px solid var(--border);transition:top .35s cubic-bezier(.4,0,.2,1);} .nav-hidden-mode .mf-trigger-bar{top:0;} .mf-trigger-btn{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Jost',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;padding:9px 16px;cursor:pointer;transition:all .2s;} .mf-trigger-btn:hover{border-color:var(--gold);color:var(--gold);} .mf-trigger-btn svg{opacity:.6;} .mf-count{background:var(--gold);color:var(--noir);font-size:10px;font-weight:600;padding:1px 6px;border-radius:8px;margin-left:2px;} .mf-trigger-right{display:flex;align-items:center;gap:10px;} .mf-result-count{font-size:11px;color:var(--muted);letter-spacing:1px;} .mf-view-toggle{gap:3px;} .mf-view-toggle .vt-btn{width:30px;height:30px;} /* Light theme */ .mf-drawer{background:var(--panel-bg);} .mf-apply-btn{background:var(--gold);color:#fff;} /* Desktop: hide mobile drawer, show controls */ @media(min-width:769px){.mf-trigger-bar{display:none !important;}.mf-drawer{display:none !important;}.mf-overlay{display:none !important;}} /* Mobile: hide desktop controls, show trigger */ @media(max-width:768px){.scents-controls{display:none !important;}.mf-trigger-bar{display:flex;}} /* Empty state */ .scents-empty { padding: 100px 20px; text-align: center; grid-column: 1 / -1; } .se-icon { font-size: 48px; margin-bottom: 20px; opacity: .2; } .se-title { font-family: 'Cormorant Garamond', serif; font-size: 32px; color: var(--muted); font-style: italic; margin-bottom: 10px; } .se-sub { font-size: 10px; color: var(--muted); letter-spacing: 2px; opacity: .6; } .se-sub { font-size: 10px; color: var(--muted); letter-spacing: 2px; opacity: .6; } /* ── Single-theme component overrides (formerly light-theme) ──────── */ body::before { opacity: 0.18; } .hero-maison { color: #9A8E82; } .hero-scroll span { color: #9A8E82; } /* Nav in light mode */ nav { background: linear-gradient(to bottom, color-mix(in srgb,#F8F5F0 95%,transparent), transparent); } nav.scrolled { background: rgba(248,245,240,.97); } .mobile-menu { background: #F0EBE3; border-right: 1px solid #D8D0C4; } .mobile-menu::before { display: none; } .hamburger .bar { background: #6a5c4a; } .mob-cart-icon { color: #6a5c4a; } /* Buttons */ .btn-primary { border-color: #A8873A; color: #A8873A; } .btn-primary::before { background: #A8873A; } .btn-primary:hover span { color: #F8F5F0; } .nav-cart { color: #8B6B20; border-color: #D8D0C4; } .nav-cart:hover { background: #A8873A; color: #F8F5F0; border-color: #A8873A; } /* Cart */ .cart-panel { background: #EDE8E0; border-left-color: #D8D0C4; } .cart-item { border-bottom-color: #D8D0C4; } /* Checkout + forms */ .checkout-modal { background: #EDE8E0; border-color: #D8D0C4; } .cm-order-summary { background: #F8F5F0; border-color: #D8D0C4; } .cfield input, .cfield select, .cfield textarea { background: #F8F5F0; border-color: #D8D0C4; color: #3D3833; } .cfield select option { background: #F8F5F0; color: #3D3833; } /* Product page */ .pv-main { background: #F0EBE3; border-color: #D8D0C4; } /* Search */ .search-input { color: #3D3833; } .search-input::placeholder { color: #9A8E82; } /* FAQ */ .faq-item { border-color: #D8D0C4; } .faq-cta { background: #EDE8E0; border-color: #D8D0C4; } /* Scents page — light theme. .sc-card + .sc-card-body intentionally have NO chrome here: the stripped-card design is identical across both themes (image alone{ background: #F0EBE3; border-color: #D8D0C4; } .sort-select { color: #6a5c4a; } .sort-select option { background: #F8F5F0; color: #3D3833; } /* Toast in light mode — dark on light */ .toast { background: #3D3833; color: #F8F5F0; } /* Carousel cards */ /* Editorial carousel card is a self-contained dark world (image + scrim + cream text) — it intentionally does NOT recolour in light theme. */ /* Featured section */ .fi-notes .note-item { background: transparent; } .fi-label { color: #A8873A; } /* pd notes — light-theme label tint (name uses theme var) */ .pdn-label { color: #6B5518; } /* Footer */ footer { border-top-color: #D8D0C4; background: #DDD5C8; } .footer-bottom { border-top-color: #D8D0C4; background: #DDD5C8; border-top: none; } .footer-ornament { background: #DDD5C8; } .social-btn { border-color: #D8D0C4; color: #9A8E82; } /* Footer */ footer { border-top-color: #D8D0C4; background: #DDD5C8; } .footer-bottom { border-top-color: #D8D0C4; background: #DDD5C8; border-top: none; } .footer-ornament { background: #DDD5C8; } .social-btn { border-color: #D8D0C4; color: #9A8E82; } /* ══ TRACK ORDER PAGE ════════════════════════════════ */ .track-wrap{max-width:860px;margin:0 auto;padding:120px 48px 80px;} .track-header{margin-bottom:48px;} .track-search-box{background:var(--ombre);border:1px solid var(--border);padding:36px 40px;margin-bottom:40px;} .track-search-label{font-size:11px;color:var(--muted);letter-spacing:2px;margin-bottom:20px;} .track-input-row{display:flex;gap:12px;margin-bottom:16px;} .track-input{flex:1;background:var(--noir);border:1px solid var(--border);color:var(--ivory);font-family:'Jost',sans-serif;font-size:14px;font-weight:400;padding:14px 18px;outline:none;transition:border-color .2s;letter-spacing:1px;} .track-input:focus{border-color:var(--gold);} .track-input::placeholder{color:var(--muted);} .track-search-btn{white-space:nowrap;flex-shrink:0;} .track-hint{font-size:11px;color:var(--muted);letter-spacing:1px;} /* ── JOURNEY ROADMAP ── */ .tc-journey{margin-bottom:40px;} .tc-journey-title{font-size:10px;letter-spacing:4px;color:var(--champagne);text-transform:uppercase;margin-bottom:16px;text-align:center;} .tc-road-canvas-wrap{position:relative;width:100%;border-radius:4px;overflow:hidden;} #tc-road-canvas{display:block;width:100%;height:200px;} .tc-stage-labels{display:flex;justify-content:space-between;padding:10px 20px 0;margin-top:4px;} .tc-slabel{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;} .tc-slabel-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .4s;} .tc-slabel-dot.done{background:var(--gold);} .tc-slabel-dot.current{background:var(--gold);box-shadow:0 0 8px var(--gold);animation:dotPulse 1.5s ease-in-out infinite;} @keyframes dotPulse{0%,100%{box-shadow:0 0 8px var(--gold);}50%{box-shadow:0 0 16px var(--gold),0 0 28px rgba(232,93,26,.4);}} .tc-slabel-text{font-size:7px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.5;} .tc-slabel-text.active{color:var(--champagne);} @media(max-width:700px){#tc-road-canvas{height:140px;}.tc-slabel-text{font-size:6px;letter-spacing:1px;}} /* Result card */ .track-card{background:var(--ombre);border:1px solid var(--border);padding:36px 40px;} .tc-order-id{font-family:'Cormorant Garamond',serif;font-size:28px;color:var(--ivory);margin-bottom:4px;} .tc-date{font-size:11px;color:var(--muted);letter-spacing:2px;margin-bottom:28px;} .tc-awb-box{background:var(--noir);border:1px solid var(--border);padding:20px 24px;margin-bottom:32px;} .tc-awb-label{font-size:10px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:8px;} .tc-awb-val{font-family:'Jost',sans-serif;font-weight:500;font-size:18px;color:var(--ivory);letter-spacing:2px;font-variant-numeric:tabular-nums lining-nums;} .tc-track-link{display:inline-block;margin-top:12px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px;transition:opacity .2s;} .tc-track-link:hover{opacity:.7;} /* Shiprocket events */ .tc-events-wrap{margin-top:8px;} .tc-tl-title{font-size:10px;letter-spacing:4px;color:var(--champagne);text-transform:uppercase;margin-bottom:16px;} .tl-item{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);position:relative;} .tl-item:last-child{border-bottom:none;} .tl-dot{width:10px;height:10px;border-radius:50%;background:var(--border);flex-shrink:0;margin-top:5px;} .tl-dot.active{background:var(--gold);} .tl-body{flex:1;display:flex;flex-direction:column;gap:4px;} .tl-status{font-size:11px;color:var(--ivory);letter-spacing:1px;line-height:1.4;} .tl-location{font-size:11px;color:var(--muted);letter-spacing:1px;line-height:1.4;} .tl-time{font-size:10px;color:var(--muted);letter-spacing:0.5px;font-variant-numeric:tabular-nums lining-nums;opacity:0.75;} /* Items */ .tc-items{margin-top:24px;padding-top:24px;border-top:1px solid var(--border);} .tc-items-title{font-size:10px;letter-spacing:4px;color:var(--muted);text-transform:uppercase;margin-bottom:14px;} .tc-item-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:11px;} .tc-item-row:last-child{border-bottom:none;} .tc-item-name{color:var(--ivory);font-family:'Cormorant Garamond',serif;font-size:14px;line-height:1.3;} .tc-item-meta{font-size:11px;color:var(--muted);letter-spacing:1px;margin-top:4px;} .tc-item-price{color:var(--champagne);font-family:'Jost',sans-serif;font-weight:500;font-size:13px;font-variant-numeric:tabular-nums lining-nums;letter-spacing:0.5px;} .tc-not-found{padding:40px;text-align:center;background:var(--ombre);border:1px solid var(--border);} .tc-nf-icon{font-size:32px;margin-bottom:12px;} .tc-nf-text{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--ivory);margin-bottom:8px;} .tc-nf-sub{font-size:10px;color:var(--muted);letter-spacing:1px;} .tc-refresh-btn{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Jost',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;padding:8px 16px;cursor:pointer;transition:all .2s;margin-top:16px;} .tc-refresh-btn:hover{border-color:var(--gold);color:var(--gold);} .tc-loading{padding:40px;text-align:center;color:var(--muted);font-size:11px;letter-spacing:2px;} /* ── Delivered Celebration Popup ── */ .delivered-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999991;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;animation:dpPopIn .6s cubic-bezier(.16,1,.3,1) forwards;} .delivered-popup{background:#1E0E05;border:1px solid rgba(232,93,26,.35);padding:52px 48px;text-align:center;max-width:420px;width:90%;position:relative;overflow:hidden;transform:scale(.85) translateY(30px);animation:dpCardIn .6s cubic-bezier(.16,1,.3,1) .1s forwards;opacity:0;} @media(max-width:480px){.delivered-popup{padding:36px 28px;max-width:340px;}.dp-title{font-size:26px !important;}.dp-checkmark{width:52px;height:52px;}.dp-checkmark svg{width:22px;height:22px;}.dp-message{font-size:13px !important;margin-bottom:20px !important;}} .delivered-popup::before{content:'';position:absolute;inset:-1px;background:linear-gradient(135deg,rgba(232,93,26,.15),transparent 50%,rgba(232,93,26,.08));pointer-events:none;} .dp-checkmark{width:64px;height:64px;margin:0 auto 28px;border:2px solid #E85D1A;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;} .dp-checkmark svg{width:28px;height:28px;stroke:#E85D1A;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:dpCheck .5s ease .5s forwards;} .dp-glow{position:absolute;width:100%;height:100%;border-radius:50%;box-shadow:0 0 24px rgba(232,93,26,.4),0 0 48px rgba(232,93,26,.15);animation:dpGlow 2s ease-in-out infinite;} .dp-title{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:#ECE4D2;margin-bottom:8px;letter-spacing:1px;} .dp-subtitle{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:#E85D1A;margin-bottom:24px;} .dp-message{font-family:'Cormorant Garamond',serif;font-size:15px;color:#6a6050;line-height:2;font-style:italic;margin-bottom:28px;} @keyframes dpPopIn{to{opacity:1;}} @keyframes dpCardIn{to{opacity:1;transform:scale(1) translateY(0);}} @keyframes dpCheck{to{stroke-dashoffset:0;}} @keyframes dpGlow{0%,100%{box-shadow:0 0 24px rgba(232,93,26,.4),0 0 48px rgba(232,93,26,.15);}50%{box-shadow:0 0 32px rgba(232,93,26,.6),0 0 64px rgba(232,93,26,.25);}} .delivered-popup-overlay.fade-out{animation:dpPopOut .8s ease forwards;} .delivered-popup-overlay.fade-out .delivered-popup{animation:dpCardOut .6s ease forwards;} @keyframes dpPopOut{to{opacity:0;}} @keyframes dpCardOut{to{opacity:0;transform:scale(.9) translateY(-20px);}} .delivered-popup{background:#ECE4D2;border-color:rgba(232,93,26,.3);} .dp-title{color:#1E0E05;} .dp-message{color:#8a7e6e;} .delivered-popup-overlay{background:rgba(255,255,255,.5);} .track-search-box{background:var(--ombre);border-color:var(--border);} .track-input{background:var(--input-bg);} .track-card{background:var(--ombre);border-color:var(--border);} .tc-awb-box{background:var(--input-bg);border-color:var(--border);} @media(max-width:700px){ .track-wrap{padding:90px 16px 48px;} .track-search-box{padding:24px 20px;} .track-input-row{flex-direction:column;} .track-card{padding:24px 20px;} } 600px (large phone) 480px (phone — already handled above) 380px (small phone) ══════════════════════════════════════════════════════ */ /* ── TABLET LANDSCAPE (≤1100px) ── */ @media(max-width:1100px){ .featured{ padding:100px 48px; gap:56px; } footer{ padding:72px 48px 40px; } .footer-bottom{ padding:20px 48px; } .scents-hero{ padding:140px 48px 72px; } .scents-controls{ padding:20px 48px; } .scents-results-bar{ padding:16px 48px; } .scents-grid-wrap{ padding:0 48px 100px; } .sh-count-num{ font-size:60px; } } /* ── TABLET PORTRAIT (≤900px) ── */ @media(max-width:900px){ /* Nav */ nav{ padding:18px 24px; } /* Hero */ /* Featured / New Arrival */ .featured{ padding:72px 24px; gap:40px; } .featured-3d{ height:380px; } .featured-img-wrap{ height:380px; } .fi-title{ font-size:clamp(32px,6vw,48px); } /* Product page */ .product-wrap{ grid-template-columns:1fr; padding:40px 24px; gap:32px; } .pv-main{ height:380px; } .pd-notes-grid{ grid-template-columns:repeat(3,1fr); gap:8px; } .pd-actions{ flex-wrap:wrap; } .pd-actions .btn-primary{ flex:1; min-width:140px; text-align:center; } /* Checkout */ .checkout-modal{ max-width:100%; margin:0 16px; } .cfield-row{ grid-template-columns:1fr; } .cm-body{ padding:20px 20px; } .cm-header{ padding:20px 20px; } /* Story */ .story-wrap{ padding:100px 32px 60px; } .story-columns{ grid-template-columns:1fr; gap:32px; } /* Contact */ .contact-wrap{ padding:100px 32px 60px; } /* FAQ */ .faq-wrap{ padding:100px 32px 80px; } .faq-cta{ padding:32px 24px; } /* Scents page */ .scents-hero{ padding:120px 24px 56px; } .sh-title{ font-size:clamp(48px,10vw,80px); } .sh-count-num{ font-size:48px; } .scents-controls{ padding:14px 20px; } .scents-right-controls{ justify-content:flex-end; } .filter-pills{ width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .filter-pills::-webkit-scrollbar{display:none;} .scents-grid-wrap{ padding:0 20px 80px; } .scents-results-bar{ padding:12px 20px; } /* Footer */ .footer-bottom{ padding:16px 24px; } } /* ── LARGE PHONE (≤600px) ── */ @media(max-width:600px){ /* Nav */ nav{ padding:16px 16px; } .nav-brand{ font-size:18px; letter-spacing:3px; } /* Hero */ .hero-content{ padding:0 16px; } /* Featured */ .featured{ padding:56px 16px; gap:32px; } .featured-3d,.featured-img-wrap{ height:300px; } .fi-title{ font-size:clamp(28px,8vw,40px); } .fi-desc{ font-size:11px; } .fi-notes{ gap:16px; } .btn-primary{ padding:16px 32px; font-size:11px; width:100%; text-align:center; } /* Product page */ .pv-main{ height:300px; } .pd-notes-grid{ grid-template-columns:1fr; gap:8px; } .pd-price{ font-size:28px; } .pd-mood{ font-size:15px; } .size-opts{ gap:8px; } .size-opt{ padding:10px 14px; font-size:11px; } .pd-actions{ gap:8px; } .pd-actions .btn-primary,.pd-actions .btn-add{ width:100%; } /* Review section */ /* Cart */ .cart-panel{ width:100%; left:0; right:0; } /* Checkout */ .checkout-modal{ margin:0; border-radius:0; max-height:100vh; } .cm-body{ padding:16px 16px; } .cm-header{ padding:16px 16px; } /* Scents page */ .scents-hero{ padding:100px 16px 40px; } .sh-title{ font-size:clamp(40px,12vw,60px); } .sh-desc{ font-size:14px; } .sh-count{ display:none; } .sc-card-visual{ height:240px; } .scents-controls{ padding:10px 12px; top:var(--nav-h, 52px); gap:8px; } .scents-right-controls{ gap:6px; } .sort-select{ font-size:7px; padding:6px 22px 6px 8px; } .fp-pill{ font-size:7px; padding:6px 10px; letter-spacing:2px; } .fp-label{ display:none; } .scents-grid-wrap{ padding:0 16px 64px; } /* Story */ .story-wrap{ padding:90px 20px 48px; } .story-columns{ grid-template-columns:1fr; gap:24px; } .story-pull{ font-size:clamp(20px,5vw,28px); padding-left:20px; } .story-sig{ flex-direction:column; gap:16px; } .story-sig-right{ text-align:left; } /* Contact */ .contact-wrap{ padding:90px 16px 48px; } .contact-info{ gap:20px; } .ci-block{ gap:12px; } /* FAQ */ .faq-wrap{ padding:90px 16px 64px; } .fq-text{ font-size:16px; } .faq-cta{ padding:24px 16px; } .faq-cta-btns .btn-primary{ width:100%; } /* Footer */ footer{ padding:40px 16px 28px; gap:24px; } .footer-brand-name{ font-size:22px; } .footer-bottom{ padding:16px 16px; gap:8px; } .fb-copy{ font-size:10px; } /* Search */ .search-header{ padding:16px 16px; } .search-input-wrap{ padding:24px 16px 16px; } .search-body{ padding:0 16px 24px; } .search-input{ font-size:clamp(22px,7vw,36px); } /* Toast */ .toast{ font-size:11px; padding:12px 20px; max-width:calc(100vw - 32px); white-space:normal; text-align:center; } } /* ── SMALL PHONE (≤420px) ── */ @media(max-width:420px){ .nav-brand{ font-size:16px; letter-spacing:2px; } .featured-3d,.featured-img-wrap{ height:260px; } .fi-title{ font-size:clamp(26px,9vw,36px); } .pv-main{ height:260px; } .pd-name{ font-size:clamp(28px,8vw,40px); } .sh-title{ font-size:clamp(36px,12vw,52px); } .faq-headline{ font-size:clamp(40px,12vw,64px); } .story-headline{ font-size:clamp(44px,12vw,60px); } /* Scents list view — compact horizontal like search results */ .scents-grid.view-list .sc-card{ grid-template-columns:80px 1fr; } .scents-grid.view-list .sc-card-visual{ height:80px; } .checkout-modal{ max-height:100dvh; } } /* ── TOUCH / HOVER STATES ── */ @media(hover:none){ /* Custom cursor never runs on touch — restore native cursors everywhere */ *{ cursor:auto !important; } .btn-primary:hover,.nav-cart:hover{ background:transparent; } .sc-card:hover{ transform:none; } } /* ── SAFE AREA (iPhone notch/home indicator) ── */ @supports(padding-bottom:env(safe-area-inset-bottom)){ nav{ padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); } .mobile-menu{ padding-bottom:env(safe-area-inset-bottom); } .cart-panel{ padding-bottom:env(safe-area-inset-bottom); } footer{ padding-left:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right)); } } /* ── LANDSCAPE PHONE ── */ @media(max-height:500px) and (orientation:landscape){ .hero{ height:auto; min-height:100vh; padding:80px 20px 40px; } .mobile-menu{ overflow-y:auto; } .pv-main{ height:240px; } .featured-3d,.featured-img-wrap{ height:260px; } .checkout-modal{ max-height:95vh; } } /* ── HIGH DPI / RETINA ── */ @media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){ } /* (Theme intro popup CSS removed — popup deprecated, light is the default theme.) */ /* ══ COOKIE CONSENT ══════════════════════════════════ */ .cookie-bar{position:fixed;bottom:0;left:0;right:0;z-index:10000;background:var(--ombre);border-top:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;transform:translateY(100%);opacity:0;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .45s ease;pointer-events:none;} .cookie-bar.show{transform:translateY(0);opacity:1;pointer-events:auto;} .cookie-bar-text{font-family:'Jost',sans-serif;font-size:11px;color:var(--muted);line-height:1.6;letter-spacing:0.3px;} .cookie-bar-text a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;} .cookie-bar-text a:hover{border-bottom-color:var(--gold);} .cookie-bar-btn{flex-shrink:0;background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:'Jost',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;padding:10px 24px;cursor:pointer;transition:background .25s,color .25s;white-space:nowrap;} .cookie-bar-btn:hover{background:var(--gold);color:var(--noir);} @media(max-width:600px){ .cookie-bar{flex-direction:column;align-items:stretch;gap:12px;padding:16px 20px;} .cookie-bar-btn{text-align:center;padding:12px 20px;} } /* ════════════════════════════════════════════════════════ THE JOURNAL (Gazette editorial · mapped to site vars) ════════════════════════════════════════════════════════ */ #blog-page, #blog-article-page { font-family:'Cormorant Garamond', Georgia, serif; background: var(--noir); color: var(--ivory); padding-top: 86px; /* clear fixed nav */ min-height: 100vh; } #blog-page .jo-wrap, #blog-article-page .jo-wrap { max-width: 1400px; margin: 0 auto; } /* Masthead */ .jo-masthead { text-align:center; border-top: 3px double var(--ivory); border-bottom: 3px double var(--ivory); padding: 36px 32px; background: var(--noir); transition: var(--theme-transition); } .jo-orn { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display:flex; align-items:center; justify-content:center; gap: 16px; font-family:'Cormorant Garamond', serif; } .jo-orn::before, .jo-orn::after { content:'─ ─ ─'; color: var(--border); letter-spacing:-0.05em; } .jo-title { font-family:'Cormorant Garamond', serif; font-size: 92px; font-weight: 300; letter-spacing: 0.12em; line-height: 0.9; color: var(--ivory); } .jo-title em { font-style: italic; color: var(--champagne); } .jo-sub { font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase; color: var(--muted); margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; } /* Dateline */ .jo-dateline { display:flex; justify-content:space-between; padding: 7px 32px; font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-style: italic; border-bottom: 1px solid var(--border); } /* Controls */ .jo-controls { display:flex; justify-content:space-between; align-items:center; padding: 14px 32px; border-bottom: 1px solid var(--border); gap: 32px; background: var(--ombre); transition: var(--theme-transition); } .jo-search-wrap { position: relative; max-width: 280px; flex: 1; } .jo-search { width: 100%; padding: 8px 24px 8px 0; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--ivory); font-family:'Cormorant Garamond', serif; font-size: 14px; outline: none; transition: border-color 0.2s; cursor: text; } .jo-search::placeholder { color: var(--muted); font-style: italic; } .jo-search:focus { border-bottom-color: var(--gold); } .jo-search-icon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 11px; pointer-events:none; } .jo-pills { display:flex; gap: 7px; flex-wrap: wrap; } .jo-pill { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; padding: 5px 13px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-family:'Cormorant Garamond', serif; transition: all 0.2s; } .jo-pill:hover { color: var(--ivory); border-color: var(--muted); } .jo-pill.active { color: var(--ivory); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); } /* Hero (pinned) */ .jo-hero { display:grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--ivory); cursor: pointer; } .jo-hero-img { height: 520px; overflow:hidden; background: var(--ombre); background-size: cover; background-position: center; } .jo-hero-img.placeholder::after { content:'✦'; display:flex; align-items:center; justify-content:center; height:100%; color: var(--border); font-size: 48px; } .jo-hero-body { padding: 58px; border-left: 1px solid var(--border); display:flex; flex-direction:column; justify-content:space-between; } .jo-hero-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); display:flex; align-items:center; gap: 13px; margin-bottom: 26px; } .jo-hero-label::before { content:''; width: 28px; height: 1px; background: var(--gold); flex-shrink: 0; } .jo-hero-h { font-family:'Cormorant Garamond', serif; font-size: 52px; font-weight: 400; line-height: 1.1; color: var(--ivory); margin-bottom: 22px; flex: 1; } .jo-hero-h em { font-style: italic; color: var(--champagne); } .jo-hero-p { font-size: 16px; line-height: 1.9; color: var(--muted); margin-bottom: 26px; text-wrap: pretty; } .jo-hero-foot { display:flex; justify-content:space-between; align-items:flex-end; border-top: 1px solid var(--border); padding-top: 16px; } .jo-meta { font-size: 11px; color: var(--muted); font-style: italic; } .jo-meta strong { font-style: normal; color: var(--ivory); font-weight: 500; display:block; margin-bottom: 2px; } .jo-link { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory); text-decoration: none; transition: color 0.2s; background: transparent; border: none; cursor: pointer; font-family:'Cormorant Garamond', serif; padding: 0; } .jo-link:hover { color: var(--gold); } /* Section divider */ .jo-sec { display:flex; align-items:center; gap: 16px; padding: 13px 32px; border-top: 2px solid var(--ivory); border-bottom: 1px solid var(--border); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ivory); } .jo-sec-line { flex: 1; height: 1px; background: var(--border); } /* Grid */ .jo-grid { display:grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; background: var(--noir); transition: var(--theme-transition); } .jo-grid-div { background: var(--border); } .jo-col { padding: 36px; cursor: pointer; transition: background 0.2s; } .jo-col:hover { background: color-mix(in srgb, var(--gold) 4%, transparent); } .jo-col-img { height: 180px; margin-bottom: 20px; background: var(--ombre); background-size: cover; background-position: center; } .jo-col-img.placeholder::after { content:'✦'; display:flex; align-items:center; justify-content:center; height:100%; color: var(--border); font-size: 28px; } .jo-tag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; display: block; } .jo-col-h { font-family:'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; line-height: 1.2; color: var(--ivory); margin-bottom: 8px; } .jo-col-h em { font-style: italic; color: var(--champagne); } .jo-col-p { font-size: 14px; line-height: 1.78; color: var(--muted); margin-bottom: 14px; text-wrap: pretty; } /* Inner Circle CTA */ .jo-cta { display:grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 56px 64px; background: var(--ombre); transition: var(--theme-transition); border-top: 2px solid var(--ivory); align-items:center; } .jo-cta-h { font-family:'Cormorant Garamond', serif; font-size: 44px; font-weight: 300; line-height: 1.15; color: var(--ivory); } .jo-cta-h em { font-style: italic; color: var(--gold); } .jo-cta-p { font-size: 15px; line-height: 1.82; color: var(--muted); font-style: italic; margin-bottom: 22px; text-wrap: pretty; } .jo-cta-form { display:flex; } .jo-cta-in { flex: 1; padding: 11px 16px; border: 1px solid var(--border); background: var(--noir); color: var(--ivory); font-family:'Cormorant Garamond', serif; font-size: 15px; outline: none; font-style: italic; transition: border-color 0.2s; cursor: text; } .jo-cta-in:focus { border-color: var(--gold); } .jo-cta-btn { padding: 11px 22px; background: var(--ivory); color: var(--noir); border: 1px solid var(--ivory); font-family:'Cormorant Garamond', serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .jo-cta-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--noir); } /* Footer strip */ .jo-footer { border-top: 1px solid var(--border); padding: 20px 32px; display:flex; justify-content:space-between; align-items:center; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* Empty state */ .jo-empty { padding: 80px 32px; text-align:center; color: var(--muted); font-family:'Cormorant Garamond', serif; font-size: 20px; font-style: italic; } /* ── ARTICLE PAGE ── */ .jo-art-wrap { max-width: 760px; margin: 0 auto; padding: 48px 32px 120px; } .jo-art-back { margin-bottom: 32px; } .jo-art-eyebrow { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; text-align: center; } .jo-art-h1 { font-family:'Cormorant Garamond', serif; font-size: 64px; font-weight: 300; line-height: 1.08; color: var(--ivory); text-align: center; margin-bottom: 16px; } .jo-art-h1 em { font-style: italic; color: var(--champagne); } .jo-art-sub { font-size: 18px; line-height: 1.7; color: var(--muted); font-style: italic; text-align: center; margin-bottom: 28px; font-family:'Cormorant Garamond', serif; } .jo-art-meta { display:flex; justify-content:center; align-items:center; gap: 20px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-bottom: 32px; border-bottom: 1px solid var(--border); margin-bottom: 48px; } .jo-art-meta span.dot { color: var(--border); } .jo-art-cover { width: 100%; margin-bottom: 48px; background: var(--ombre); } .jo-art-cover img { width: 100%; display: block; } .jo-art-body { font-family:'Cormorant Garamond', Georgia, serif; font-size: 19px; line-height: 1.85; color: var(--ivory); } .jo-art-body p { margin-bottom: 24px; text-wrap: pretty; } .jo-art-body h2 { font-family:'Cormorant Garamond', serif; font-weight: 400; font-size: 36px; line-height: 1.2; color: var(--ivory); margin: 56px 0 20px; } .jo-art-body h3 { font-family:'Cormorant Garamond', serif; font-weight: 400; font-size: 26px; line-height: 1.25; color: var(--ivory); margin: 40px 0 16px; } .jo-art-body em { font-style: italic; color: var(--champagne); } .jo-art-body strong { font-weight: 500; color: var(--ivory); } .jo-art-body a { color: var(--gold); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); } .jo-art-body a:hover { border-bottom-color: var(--gold); } .jo-art-body blockquote { border-left: 2px solid var(--gold); margin: 32px 0; padding: 8px 0 8px 28px; font-style: italic; color: var(--champagne); font-family:'Cormorant Garamond', serif; font-size: 22px; line-height: 1.5; } .jo-art-body hr { border: none; text-align: center; margin: 48px 0; font-size: 10px; letter-spacing: 0.4em; color: var(--muted); } .jo-art-body hr::after { content: '✦ ✦ ✦'; } .jo-art-body figure { margin: 40px 0; } .jo-art-body figure img { width: 100%; display: block; background: var(--ombre); } .jo-art-body figcaption { font-size: 12px; color: var(--muted); font-style: italic; text-align: center; margin-top: 10px; letter-spacing: 0.06em; } .jo-art-body ul, .jo-art-body ol { margin: 0 0 24px 28px; } .jo-art-body li { margin-bottom: 10px; } /* Related */ .jo-related-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 32px 80px; border-top: 1px solid var(--border); } .jo-related-h { font-family:'Cormorant Garamond', serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ivory); margin-bottom: 24px; text-align:center; } .jo-related-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 900px) { #blog-page, #blog-article-page { padding-top: 70px; } .jo-title { font-size: 56px; } .jo-hero { grid-template-columns: 1fr; } .jo-hero-img { height: 300px; } .jo-hero-body { padding: 32px; } .jo-hero-h { font-size: 36px; } .jo-grid { grid-template-columns: 1fr; } .jo-grid-div { display: none; } .jo-cta { grid-template-columns: 1fr; padding: 32px; gap: 20px; } .jo-cta-h { font-size: 30px; } .jo-dateline span:nth-child(2) { display: none; } .jo-related-grid { grid-template-columns: 1fr; } .jo-art-h1 { font-size: 40px; } .jo-art-body { font-size: 17px; } .jo-art-body h2 { font-size: 28px; } } @media (max-width: 600px) { .jo-title { font-size: 42px; } .jo-controls { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 20px; } .jo-search-wrap { max-width: none; } .jo-dateline { padding: 7px 16px; font-size: 11px; } .jo-masthead { padding: 28px 16px; } .jo-sec { padding: 13px 20px; } .jo-col { padding: 28px 20px; } .jo-art-wrap { padding: 24px 20px 80px; } } /* ═══════════════════════════════════════════════════════════ INSTAGRAM · "LIVE FROM THE MAISON" (Curator.io mosaic) Wraps the Curator.io embed in our typography + spacing so it lives inside the house aesthetic, not as a foreign island. Curator's own grid (.crt-feed) is left alone — we just frame it. ═══════════════════════════════════════════════════════════ */ .ig-section{ padding: 110px 64px 80px; background: var(--bg); position: relative; } .ig-header{ text-align: center; margin: 0 auto 56px; max-width: 760px; } .ig-eyebrow{ font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 6px; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; font-weight: 400; } .ig-title{ font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.04; letter-spacing: -0.5px; color: var(--text); margin: 0 0 22px; } .ig-title em{ font-style: italic; color: var(--gold); font-weight: 300; } .ig-lead{ font-family: 'Jost', sans-serif; font-weight: 300; font-size: 14px; line-height: 1.7; letter-spacing: 0.4px; color: var(--muted, var(--text)); opacity: 0.78; max-width: 520px; margin: 0 auto; } /* Feed wrap: gold hairline frame, generous padding, never wider than 1320px. overflow:hidden contains any Curator template that tries to spill horizontally (e.g. a misconfigured Carousel template with reel tiles). */ .ig-feed-wrap{ max-width: 1320px; margin: 0 auto; padding: 28px 28px 56px; /* extra bottom pad so the "Powered by" tag sits below tiles, not over them */ background: var(--ombre); box-shadow: inset 0 0 0 1px var(--border); border-radius: 4px; position: relative; min-height: 280px; overflow: hidden; } /* Curator injects its own grid into #curator-feed-default-feed-layout. We override its defaults so it inherits our spacing + tile radius. */ .ig-feed-wrap #curator-feed-default-feed-layout{ max-width: 100%; } .ig-feed-wrap .crt-widget{ background: transparent !important; max-width: 100% !important; } .ig-feed-wrap .crt-feed{ background: transparent !important; max-width: 100% !important; } .ig-feed-wrap .crt-post{ border-radius: 6px !important; overflow: hidden !important; transition: transform .35s ease, box-shadow .35s ease !important; } .ig-feed-wrap .crt-post:hover{ transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.18) !important; } /* Push Curator's "Powered by" tag out of the tile area, under the grid */ .ig-feed-wrap .crt-logo{ position: absolute !important; bottom: 16px; right: 22px; font-size: 10px !important; opacity: 0.6; } /* Paid Curator tier removes the badge entirely — uncomment to hide if upgraded */ /* .ig-feed-wrap .crt-logo{ display: none !important; } */ /* CTA row beneath the feed */ .ig-cta-row{ text-align: center; margin-top: 40px; } .ig-cta{ display: inline-block; font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); text-decoration: none; padding: 14px 28px; box-shadow: inset 0 0 0 1px var(--gold); border-radius: 2px; transition: background .25s ease, color .25s ease; } .ig-cta:hover{ background: var(--gold); color: var(--noir); } .ig-cta span{ margin-left: 6px; display: inline-block; transition: transform .25s ease; } .ig-cta:hover span{ transform: translateX(4px); } /* ── Tablet ── */ @media (max-width: 900px){ .ig-section{ padding: 80px 32px 60px; } .ig-header{ margin-bottom: 40px; } .ig-feed-wrap{ padding: 18px; } } /* ── Mobile ── */ @media (max-width: 600px){ .ig-section{ padding: 60px 18px 50px; } .ig-eyebrow{ font-size: 10px; letter-spacing: 4px; margin-bottom: 16px; } .ig-title{ font-size: clamp(34px, 11vw, 48px); } .ig-lead{ font-size: 13px; } .ig-feed-wrap{ padding: 12px; border-radius: 3px; } .ig-cta{ font-size: 10px; letter-spacing: 3px; padding: 12px 22px; } } /* ═══════════════════════════════════════════════════════════════════════ HÖFFMANE · "LE LINGER" — component layer (appended override) Warm maison-de-parfum design system: cream ground, terracotta ink, bright-orange accent, Cormorant display + Jost UI, pills, tilted bordered cards, diagonal-stripe placeholders, marquees, stickers. Targets the exact classes the partials + app.js emit, so no JS breaks. ═══════════════════════════════════════════════════════════════════════ */ /* ── Base type ─────────────────────────────────────────────── */ body{font-family:'Jost',system-ui,sans-serif;font-weight:400;} h1,h2,h3,.display{font-family:'Cormorant Garamond',serif;font-weight:300;} em,.italic{font-style:italic;} ::selection{background:var(--gold);color:#ECE4D2;} /* Reusable stripe placeholder (empty product/gallery visuals) */ .hf-stripe{background:repeating-linear-gradient(45deg,var(--sand) 0 12px,var(--noir) 12px 24px);} .hf-mono{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;} /* ── NAV — pill bar ────────────────────────────────────────── */ nav{background:linear-gradient(to bottom,color-mix(in srgb,var(--noir) 96%,transparent),transparent);} nav.scrolled{background:var(--noir);border-bottom:none;box-shadow:0 6px 22px rgba(120,35,5,.13);} .nav-brand{border:0;} .nav-links{gap:8px;} .nav-links a{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--ivory);border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent);border-radius:999px;padding:8px 18px;transition:background .2s,color .2s,border-color .2s;} .nav-links a:hover,.nav-links a.active{background:var(--gold);border-color:var(--gold);color:#ECE4D2;} .nav-cart{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:#ECE4D2;background:var(--ivory);border:1px solid var(--ivory);border-radius:999px;padding:8px 18px;} .nav-cart:hover{background:var(--gold);border-color:var(--gold);color:#ECE4D2;} .cart-badge,.mob-cart-badge{background:var(--gold);color:#ECE4D2;} .search-btn{border-radius:999px;} .search-btn{border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent);color:var(--ivory);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;background:transparent;} .search-btn:hover{background:var(--gold);border-color:var(--gold);color:#ECE4D2;} /* ── BUTTONS — outlined pills, identical to the nav "Track Order" pill ── Transparent with a terracotta hairline + terracotta label; fill with orange (cream label) on hover. Matches .nav-links a exactly. */ .btn-primary,.btn-checkout,.sc-add-btn,.nl-submit,.btn-submit-review,.track-search-btn,.jo-cta-btn,.page-back-btn,.btn-notify,.cf-voucher button,#voucher-apply-btn,.mm-cart-btn{ font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500; border-radius:999px !important;border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent);background:transparent;color:var(--ivory); transition:background .2s,color .2s,border-color .2s; } .btn-primary:hover,.btn-checkout:hover,.sc-add-btn:hover,.nl-submit:hover:not(:disabled),.btn-submit-review:hover,.track-search-btn:hover,.jo-cta-btn:hover,.page-back-btn:hover,.btn-notify:hover,#voucher-apply-btn:hover,.mm-cart-btn:hover{ background:var(--gold);border-color:var(--gold);color:#ECE4D2; } .btn-checkout{width:100%;padding:16px 0;} /* ── Section grounds (utility classes for page markup) ─────── */ .hf-bg-cream{background:var(--noir);color:var(--ivory);} .hf-bg-sand{background:var(--panel-bg);color:var(--ivory);} .hf-bg-camel{background:var(--camel);color:var(--ivory);} .hf-bg-orange{background:var(--gold);color:#ECE4D2;} .hf-bg-terra{background:var(--ivory);color:#ECE4D2;} .hf-bg-orange *,.hf-bg-terra *{border-color:rgba(236,228,210,.4);} /* ── Display headings ──────────────────────────────────────── */ .hf-eyebrow{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.35em;text-transform:uppercase;font-weight:500;} .hf-display{font-family:'Cormorant Garamond',serif;font-weight:300;line-height:1.02;letter-spacing:-.01em;} .hf-display em,.hf-accent{font-style:italic;color:var(--gold);} .hf-hl{display:inline-block;background:var(--gold);color:#ECE4D2;padding:0 20px;transform:rotate(-2deg);} /* ── Marquee bands ─────────────────────────────────────────── */ @keyframes hf-marquee{to{transform:translateX(-50%);}} .hf-marquee{overflow:hidden;background:var(--gold);color:#ECE4D2;} .hf-marquee.terra{background:var(--ivory);} .hf-marquee-inner{display:flex;width:max-content;animation:hf-marquee 18s linear infinite;} .hf-marquee.rev .hf-marquee-inner{animation-direction:reverse;animation-duration:22s;} .hf-marquee-inner>span{padding:14px 0;font-size:12px;letter-spacing:.3em;font-weight:500;white-space:nowrap;text-transform:uppercase;} .hf-marquee.serif .hf-marquee-inner>span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;letter-spacing:0;text-transform:none;} @media(prefers-reduced-motion:reduce){.hf-marquee-inner{animation:none;}} /* ── Spinning circular badge ───────────────────────────────── */ @keyframes hf-spin{to{transform:rotate(360deg);}} .hf-spin{animation:hf-spin 12s linear infinite;} @media(prefers-reduced-motion:reduce){.hf-spin{animation:none;}} /* ── Sticker badges ────────────────────────────────────────── */ .hf-sticker{position:absolute;background:var(--gold);color:#ECE4D2;padding:8px 14px;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.25em;font-weight:500;text-transform:uppercase;transform:rotate(5deg);z-index:2;} /* ── PRODUCT CARDS (scents grid — .sc-card) ────────────────── */ .sc-card{background:var(--card-bg);border:1px solid var(--ivory);border-radius:0;padding:14px;box-shadow:none;transition:transform .3s ease,box-shadow .3s ease;} .sc-card:nth-child(6n+1){transform:rotate(-1.2deg);} .sc-card:nth-child(6n+2){transform:rotate(1.4deg) translateY(12px);} .sc-card:nth-child(6n+3){transform:rotate(-1deg);} .sc-card:nth-child(6n+4){transform:rotate(1deg);} .sc-card:nth-child(6n+5){transform:rotate(-1.4deg) translateY(8px);} .sc-card:nth-child(6n+6){transform:rotate(1.6deg);} .sc-card:hover{transform:rotate(0) translateY(-4px);box-shadow:0 14px 30px var(--shadow);z-index:3;} .sc-card-visual{background:repeating-linear-gradient(45deg,var(--sand) 0 12px,var(--noir) 12px 24px);border-radius:0;} .sc-pname{font-family:'Cormorant Garamond',serif;font-weight:400;} .sc-cat,.sc-note{font-family:'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;} .sc-sig{font-family:'Jost',sans-serif;letter-spacing:.25em;text-transform:uppercase;transform:rotate(5deg);border-radius:0;} .sc-add-btn{border-radius:999px !important;} /* ── FEATURED block ────────────────────────────────────────── */ .fi-label{font-family:'Jost',sans-serif;letter-spacing:.35em;text-transform:uppercase;} .fi-title{font-family:'Cormorant Garamond',serif;font-weight:300;} .fi-notes .note-item,.size-opt{border-radius:999px;border:1px solid color-mix(in srgb,var(--ivory) 45%,transparent);} .size-opt.active,.pd-size.active{background:var(--ivory);color:#ECE4D2;border-color:var(--ivory);} .featured-img-wrap{border:1px solid var(--ivory);border-radius:0;} /* ── CART drawer + items ───────────────────────────────────── */ .cart-panel{background:var(--cart-bg);border-left:1px solid var(--ivory);} .ch-title{font-family:'Cormorant Garamond',serif;font-weight:400;} .cart-item{border-bottom:1px solid var(--border);} .ci-name{font-family:'Cormorant Garamond',serif;font-weight:400;} .ci-qty-wrap{border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent);border-radius:999px;overflow:hidden;} .cf-total{font-family:'Cormorant Garamond',serif;} .cf-voucher-row input,#voucher-input{border-radius:999px 0 0 999px;} /* ── Checkout modal ────────────────────────────────────────── */ .checkout-modal{background:var(--card-bg);border:1px solid var(--ivory);} /* ── FORMS — underline fields ──────────────────────────────── */ .cfield input,.cfield textarea,.rm-field input,.rm-field textarea,.contact-form input,.contact-form textarea,.nl-input-wrap input,.track-input{ background:transparent;border:none;border-bottom:1px solid color-mix(in srgb,var(--ivory) 42%,transparent);border-radius:0;color:var(--ivory);font-family:'Jost',sans-serif;font-weight:300; } .cfield input:focus,.contact-form input:focus,.contact-form textarea:focus{border-bottom-color:var(--gold);outline:none;} .clabel,.cfield label,.rm-label,.pd-size-label{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;} /* ── FOOTER — terracotta ground ────────────────────────────── */ footer{background:var(--ivory);color:#ECE4D2;} .footer-wordmark{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:44px;color:#ECE4D2;line-height:1;} .footer-tagline{margin-top:10px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;color:rgba(236,228,210,.85);} .footer-col-title{color:var(--camel);font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;} .footer-links a{color:rgba(236,228,210,.9);font-family:'Jost',sans-serif;font-weight:300;} .footer-links a:hover{color:#ECE4D2;} .footer-social .social-btn{border-color:rgba(236,228,210,.5);color:#ECE4D2;} .footer-ornament{background:var(--ivory);color:rgba(236,228,210,.5);font-family:'Cormorant Garamond',serif;font-style:italic;} .footer-bottom{background:var(--ivory);color:rgba(236,228,210,.7);} .fb-copy{color:rgba(236,228,210,.75);letter-spacing:.15em;} /* ── Toast / cookie / misc accents ─────────────────────────── */ .toast{background:var(--ivory);color:#ECE4D2;border-radius:999px;} .cookie-bar-btn{border-radius:999px;background:var(--ivory);color:#ECE4D2;} /* ── HOME — Le Linger hero + newsletter ────────────────────── */ .hf-hero{position:relative;min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:0 48px;overflow:hidden;background:var(--noir);} .hf-hero-inner{position:relative;z-index:2;} .hf-hero-title{font-size:clamp(48px,8.5vw,96px);max-width:980px;text-wrap:balance;color:var(--ivory);} .hf-hero-row{margin-top:40px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;} .hf-hero-cta{padding:22px 46px;background:var(--gold);border-color:var(--gold);border-radius:16px;color:var(--noir);text-decoration:none;} .hf-hero-cta span{color:var(--noir);} .hf-hero-cta::before{background:var(--champagne);} .hf-hero-cta:hover span{color:var(--noir);} .hf-hero-note{font-size:13px;font-weight:300;color:var(--muted);} .hf-hero-badge{position:absolute;right:70px;top:90px;width:150px;height:150px;z-index:2;} .hf-hero-badge svg text{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.3em;fill:var(--gold);} .hf-hero-badge svg circle{fill:var(--gold);} .hf-hero-orb{position:absolute;right:-60px;bottom:-90px;width:340px;height:340px;border-radius:50%;background:var(--camel);opacity:.5;z-index:1;animation:hf-orb-drift 9s ease-in-out infinite;will-change:transform;} @keyframes hf-orb-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-28px)}} @media(max-width:768px){.hf-hero{min-height:78vh;padding:0 26px;}.hf-hero-badge{display:none;}} /* Newsletter orange block */ .nl-section.hf-bg-orange{background:var(--gold);color:#ECE4D2;text-align:center;padding:110px 48px;} .nl-section.hf-bg-orange .nl-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(40px,6vw,74px);color:#ECE4D2;line-height:1;} .nl-section.hf-bg-orange .nl-input-wrap{margin-top:38px;display:inline-flex;border:1px solid #ECE4D2;border-radius:999px;overflow:hidden;align-items:center;background:transparent;} .nl-section.hf-bg-orange .nl-input-wrap input{background:transparent;border:none;color:#ECE4D2;padding:16px 28px;width:300px;font-family:'Jost',sans-serif;font-weight:300;} .nl-section.hf-bg-orange .nl-input-wrap input::placeholder{color:rgba(236,228,210,.65);} .nl-section.hf-bg-orange .nl-submit{background:#ECE4D2 !important;color:var(--gold) !important;border:none !important;border-radius:0 !important;padding:16px 30px;} .nl-section.hf-bg-orange .nl-submit:disabled{opacity:.7;} .nl-social-row{margin-top:44px;display:flex;justify-content:center;gap:40px;font-size:10px;letter-spacing:.25em;color:rgba(236,228,210,.8);flex-wrap:wrap;} /* ═══════════════════════════════════════════════════════════════════════ HÖFFMANE · "LE LINGER" — page layer (headlines, cards, page grounds) ═══════════════════════════════════════════════════════════════════════ */ /* ── Eyebrows (all pages) ──────────────────────────────────── */ .story-eyebrow,.sr-eyebrow,.faq-eyebrow,.sh-eyebrow,.creators-form-eyebrow, .privee-form-eyebrow,.contact-header .story-eyebrow,.cf-title-eyebrow,.ig-eyebrow,.nl-eyebrow{ font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.35em;text-transform:uppercase;font-weight:500;color:var(--muted); } /* ── Display headlines (all pages) ─────────────────────────── */ .story-headline,.sr-title,.faq-headline,.cf-title,.sh-title,.privee-pull,.story-pull, .ig-title,.faq-cta-title{ font-family:'Cormorant Garamond',serif;font-weight:300;line-height:1.02;letter-spacing:-.01em;color:var(--ivory); } .story-headline em,.sr-title em,.faq-headline em,.cf-title em,.sh-title em,.ig-title em, .story-pull em{font-style:italic;color:var(--gold);} .sh-title,.faq-headline,.sr-title,.cf-title{font-size:clamp(52px,7vw,84px);} /* ── Cards: cream, terracotta hairline, faint tilt ─────────── */ .creators-card,.privee-card,.sr-block,.faq-item{ background:var(--card-bg);border:1px solid var(--ivory);border-radius:0;box-shadow:none; } .creators-card{transform:rotate(-.6deg);} .creators-card:nth-child(2n){transform:rotate(.7deg);} .sr-block{transform:rotate(-.5deg);} .sr-block:nth-child(2n){transform:rotate(.5deg);} .creators-card-title,.privee-card-title,.sr-block-title{font-family:'Cormorant Garamond',serif;font-weight:400;} .privee-card-icon,.sr-block-icon,.creators-card svg{color:var(--gold);stroke:var(--gold);} /* ── FAQ accordion ─────────────────────────────────────────── */ .faq-item{margin-top:-1px;} .faq-question,.fq-text{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;color:var(--ivory);} .fq-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent);color:var(--ivory);} .faq-item.open .fq-icon,.faq-item.active .fq-icon{background:var(--gold);color:#ECE4D2;border-color:var(--gold);} .fa-inner,.faq-answer{color:var(--muted);font-weight:300;line-height:1.7;} /* ── SCENTS controls ───────────────────────────────────────── */ .fp-pill,.mf-chip,.mf-sort-opt{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent);border-radius:999px;color:var(--ivory);background:transparent;padding:7px 16px;} .fp-pill.active,.mf-chip.active,.mf-sort-opt.active{background:var(--ivory);color:#ECE4D2;border-color:var(--ivory);} .fp-label,.mf-section-label{font-family:'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);} .sort-select,.scents-controls,.scents-results-bar{border-color:var(--border);} .sh-title{font-size:clamp(56px,8vw,96px);} /* ── CONTACT ───────────────────────────────────────────────── */ .contact-cfield input,.contact-cfield textarea{background:transparent;border:none;border-bottom:1px solid color-mix(in srgb,var(--ivory) 42%,transparent);border-radius:0;color:var(--ivory);} .contact-clabel{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);} .contact-cform{border:1px solid var(--ivory);background:var(--card-bg);transform:rotate(.6deg);} .ci-block{border:1px solid var(--border);} .ci-icon{color:var(--gold);} /* ── STORY editorial ───────────────────────────────────────── */ .story-manifesto-text,.story-philosophy,.story-origin,.story-maison{color:var(--muted);font-weight:300;} .story-roman,.story-col{font-family:'Cormorant Garamond',serif;} .story-rule-diamond,.story-center-ornament{color:var(--gold);} /* ── PRODUCT gallery placeholder ───────────────────────────── */ .pv-main,.product-visuals .pv-thumb{background:repeating-linear-gradient(45deg,var(--sand) 0 12px,var(--noir) 12px 24px);border:1px solid var(--ivory);} /* ── CREATORS — orange ground ──────────────────────────────── */ #creators-page{background:var(--gold);color:#ECE4D2;} #creators-page .story-eyebrow,#creators-page .creators-form-eyebrow{color:rgba(236,228,210,.85);} #creators-page .story-headline,#creators-page .story-pull,#creators-page .creators-desc,#creators-page .creators-note{color:#ECE4D2;} #creators-page .story-pull em{color:#ECE4D2;} #creators-page .creators-card{background:var(--noir);color:var(--ivory);border-color:var(--noir);} #creators-page .creators-card-title{color:var(--ivory);} #creators-page .creators-card-desc{color:var(--muted);} #creators-page .cform{background:var(--noir);border:1px solid var(--noir);color:var(--ivory);transform:rotate(.4deg);padding:44px;} #creators-page .clabel{color:var(--muted);} #creators-page .cfield input,#creators-page .cfield select{color:var(--ivory);border-bottom:1px solid color-mix(in srgb,var(--ivory) 40%,transparent);background:transparent;} #creators-page .btn-primary{background:var(--gold);border-color:var(--gold);color:#ECE4D2;} #creators-page .btn-primary:hover{background:var(--ivory);border-color:var(--ivory);} #creators-page .page-back-btn{border-color:rgba(236,228,210,.5);color:#ECE4D2;background:transparent;} #creators-page .story-rule-diamond{color:#ECE4D2;} /* ── MAISON PRIVÉE — terracotta ground ─────────────────────── */ #privee-page{background:var(--gold);color:#ECE4D2;} #privee-page .story-eyebrow,#privee-page .privee-form-eyebrow{color:#ECE4D2;} #privee-page .story-headline,#privee-page .privee-pull,#privee-page .privee-intro,#privee-page .privee-note{color:#ECE4D2;} #privee-page .story-headline em,#privee-page .privee-pull em{color:#ECE4D2;} #privee-page .privee-card{background:transparent;border:1px solid rgba(236,228,210,.4);color:#ECE4D2;} #privee-page .privee-card-title{color:#ECE4D2;} #privee-page .privee-card-desc{color:rgba(236,228,210,.8);} #privee-page .privee-card-icon{color:#ECE4D2;stroke:#ECE4D2;opacity:1;} #privee-page .privee-card-icon svg{stroke:#ECE4D2;} #privee-page .privee-card-line{background:#ECE4D2;opacity:.5;} #privee-page .cform{border:1px solid rgba(236,228,210,.5);padding:52px 56px;gap:30px;} #privee-page .cfield{gap:13px;} #privee-page .cfield-row{gap:40px;} #privee-page .clabel{color:#ECE4D2;} #privee-page .cfield input{color:#ECE4D2;border-bottom:1px solid rgba(236,228,210,.55);background:transparent;padding:10px 2px;font-size:15px;letter-spacing:.02em;} #privee-page .cfield input::placeholder{color:rgba(236,228,210,.5);} @media(max-width:768px){#privee-page .cform{padding:30px 24px;gap:24px;}#privee-page .cfield-row{gap:24px;}} /* Clean, high-contrast submit button (cream fill, terracotta ink) */ #privee-page .btn-primary{background:#ECE4D2;border:1px solid #ECE4D2;color:var(--ivory);text-decoration:none;} #privee-page .btn-primary span{color:var(--ivory);} #privee-page .btn-primary::before{display:none;} #privee-page .btn-primary:hover{background:transparent;border-color:#ECE4D2;color:#ECE4D2;} #privee-page .btn-primary:hover span{color:#ECE4D2;} #privee-page .page-back-btn{border-color:rgba(236,228,210,.5);color:#ECE4D2;background:transparent;} #privee-page .story-rule-diamond{color:var(--camel);} /* Highlight box on colored grounds */ #creators-page .hf-hl{background:#ECE4D2;color:var(--gold);} #privee-page .hf-hl{background:var(--camel);color:var(--ivory);} /* Story signature wordmark (replaces old logo image) */ .story-sig-wordmark{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:44px;color:var(--ivory);line-height:1;opacity:.9;} /* Colored-ground headline spans must be cream (design), not terracotta */ #creators-page .story-headline-line1,#creators-page .story-headline-line2{color:#ECE4D2;} #privee-page .story-headline-line1,#privee-page .story-headline-line2{color:#ECE4D2;} #privee-page .story-headline-line2 em{color:#ECE4D2;font-style:italic;} /* ═══════════════════════════════════════════════════════════════════════ HÖFFMANE · "LE LINGER" — v2: rebuilt static pages (shipping/privacy/ story/contact) to match desktop design + mobile layer (390px screens). ═══════════════════════════════════════════════════════════════════════ */ /* ── SHIPPING (2g) ─────────────────────────────────────────── */ .sr-wrap{max-width:1180px;margin:0 auto;padding:100px 48px 80px;} .sr-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;margin:40px 0 40px;} .sr-card{border:1px solid var(--ivory);padding:34px;transform:rotate(-.6deg);background:var(--noir);} .sr-card:nth-child(2){transform:rotate(.5deg) translateY(8px);} .sr-card:nth-child(3){transform:rotate(-.4deg);} .sr-card-accent{background:var(--gold);color:#ECE4D2;} .sr-card-accent .sr-card-num,.sr-card-accent .sr-card-text{color:rgba(236,228,210,.9);} .sr-card-num{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--muted);} .sr-card-title{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:400;margin-top:14px;color:inherit;} .sr-card-text{margin-top:14px;font-size:13px;font-weight:300;line-height:1.7;color:var(--muted);} .sr-card-accent .sr-card-title{color:#ECE4D2;} .sr-cta{margin:0 0 60px;border:1px solid var(--border);padding:36px 44px;display:flex;justify-content:space-between;align-items:center;gap:30px;background:var(--camel);} .sr-cta-title{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--ivory);} .sr-cta-sub{margin-top:8px;font-size:13px;font-weight:300;color:var(--ivory);opacity:.85;} .sr-cta-btn{flex:none;padding:16px 38px;} /* ── PRIVACY (2h) ──────────────────────────────────────────── */ .pv-wrap{max-width:1180px;margin:0 auto;padding:100px 48px 100px;display:grid;grid-template-columns:300px 1fr;gap:70px;} .pv-index{position:sticky;top:100px;align-self:start;} .pv-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:56px;line-height:1.05;margin:14px 0 0;color:var(--ivory);} .pv-title em{font-style:italic;color:var(--gold);} .pv-nav{margin-top:30px;display:flex;flex-direction:column;gap:12px;} .pv-nav a{font-size:12px;font-weight:300;color:var(--muted);text-decoration:none;transition:color .2s;} .pv-nav a:hover{color:var(--gold);} .pv-updated{margin-top:30px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);} .pv-content{max-width:620px;} .pv-sec{margin-bottom:44px;scroll-margin-top:100px;} .pv-sec-h{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:30px;color:var(--ivory);margin:0;} .pv-content p{margin-top:14px;font-size:14px;font-weight:300;line-height:1.8;color:var(--muted);} .pv-content strong{color:var(--ivory);font-weight:400;} /* ── STORY (2c) ────────────────────────────────────────────── */ .st-back{padding:100px 48px 0;max-width:1180px;margin:0 auto;} .st-hero{position:relative;min-height:560px;display:grid;place-items:center;text-align:center;padding:60px 80px;overflow:hidden;} .st-hero-title{font-size:clamp(52px,8vw,88px);max-width:900px;text-wrap:balance;} .st-orb{position:absolute;left:-80px;bottom:-120px;width:300px;height:300px;border-radius:50%;background:var(--camel);opacity:.45;} .st-block{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:0 48px 100px;max-width:1180px;margin:0 auto;} .st-media{height:460px;border:1px solid var(--ivory);display:grid;place-items:center;transform:rotate(-1.5deg);} .st-block-rev .st-media{transform:rotate(1.5deg);} .st-media-camel{background:repeating-linear-gradient(45deg,#CE9260 0 12px,var(--camel) 12px 24px);} .st-media-tag{background:var(--gold);color:#ECE4D2;padding:6px 12px;} .st-media-tag-dark{background:var(--noir);color:var(--ivory);} .st-index{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--muted);} .st-copy-h{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:48px;line-height:1.1;margin:16px 0 0;color:var(--ivory);} .st-copy p{margin-top:20px;font-size:15px;font-weight:300;line-height:1.75;max-width:420px;color:var(--muted);} .st-quote{padding:120px 48px;text-align:center;} .st-quote-text{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(34px,5vw,64px);line-height:1.2;max-width:820px;margin:0 auto;color:#ECE4D2;} .st-quote-index{margin-top:30px;font-size:11px;letter-spacing:.3em;font-weight:500;color:rgba(236,228,210,.8);} .st-quote-btn{margin-top:50px;background:#ECE4D2 !important;border-color:#ECE4D2 !important;color:var(--gold) !important;padding:18px 44px;border-radius:999px !important;text-decoration:none !important;} /* Kill the sliding fill overlay so the hover is a clean flat colour, not a muddy blend */ .st-quote-btn::before{display:none !important;} .st-quote-btn span{color:var(--gold) !important;text-decoration:none !important;} .st-quote-btn:hover{background:var(--ivory) !important;border-color:var(--ivory) !important;color:#ECE4D2 !important;} .st-quote-btn:hover span{color:#ECE4D2 !important;} /* ── CONTACT (2d) ──────────────────────────────────────────── */ .cf-lede{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(56px,7vw,84px);line-height:1;margin:18px 0 0;color:var(--ivory);} .cf-lede em{font-style:italic;color:var(--gold);} .contact-lede-p{margin-top:26px;font-size:15px;font-weight:300;line-height:1.75;max-width:360px;color:var(--muted);} .ci-methods{margin-top:44px;display:flex;flex-direction:column;gap:18px;} .ci-row{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:300;color:var(--ivory);text-decoration:none;} .ci-row:hover{color:var(--gold);} .ci-ring{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent);font-size:13px;flex:none;} .contact-cform{background:var(--card-bg);border:1px solid var(--ivory);padding:44px;transform:rotate(.6deg);} /* ═══════════════════════════════════════════════════════════════════════ MOBILE LAYER — Le Linger 390px (matches 3a–3h) ═══════════════════════════════════════════════════════════════════════ */ @media(max-width:768px){ /* Nav: pill links collapse into the existing hamburger drawer */ .nav-links{display:none;} nav{padding:14px 20px;} nav.scrolled{padding:12px 20px;} /* Hero */ .hf-hero{min-height:76vh;padding:56px 22px;} .hf-hero-title{font-size:clamp(40px,12vw,56px);} .hf-hero-badge{width:86px;height:86px;right:14px;top:70px;} .hf-hero-orb{width:220px;height:220px;right:-70px;bottom:-90px;} .hf-hero-row{gap:16px;} /* Marquees a touch tighter */ .hf-marquee-inner>span{font-size:11px;} .hf-marquee.serif .hf-marquee-inner>span{font-size:17px;} /* Section headlines */ .sh-title,.faq-headline,.sr-title,.cf-lede,.pv-title,.st-hero-title,.cf-title{font-size:clamp(44px,13vw,60px);} /* Shipping → single column */ .sr-wrap{padding:80px 22px 60px;} .sr-cards{grid-template-columns:1fr;gap:22px;} .sr-card,.sr-card:nth-child(2),.sr-card:nth-child(3){transform:none;} .sr-cta{flex-direction:column;align-items:flex-start;gap:20px;padding:26px;} /* Privacy → stacked, index not sticky */ .pv-wrap{grid-template-columns:1fr;gap:34px;padding:80px 22px 70px;} .pv-index{position:static;} .pv-nav{flex-flow:row wrap;gap:10px 18px;} /* Story → stacked, media un-tilted */ .st-back{padding:80px 22px 0;} .st-hero{min-height:auto;padding:60px 26px;} .st-block,.st-block-rev{grid-template-columns:1fr;gap:30px;padding:0 22px 64px;} .st-block-rev .st-copy{order:2;} .st-block-rev .st-media{order:1;} .st-media,.st-block-rev .st-media{height:320px;transform:none;} .st-copy p{max-width:none;} .st-quote{padding:76px 26px;} /* Contact → stacked, form un-tilted */ .contact-wrap{padding:70px 22px 56px;} .contact-grid{grid-template-columns:1fr;gap:36px;} .contact-cform{transform:none;padding:28px 24px;} /* Scents / product / creators / privee grids → single column */ .scents-grid{grid-template-columns:1fr !important;gap:26px;} .creators-grid,.privee-grid{grid-template-columns:1fr !important;} #creators-page .cform,#creators-page .cform .cfield-row{grid-template-columns:1fr !important;} /* Newsletter input wrap fits small screens */ .nl-section.hf-bg-orange .nl-input-wrap input{width:auto;flex:1;} .nl-section.hf-bg-orange .nl-input-wrap{display:flex;width:100%;max-width:340px;} } /* Newsletter headline is wrapped in — force cream so it's visible on orange */ .nl-section.hf-bg-orange .nl-title, .nl-section.hf-bg-orange .nl-title em{color:#ECE4D2 !important;} /* ═══════════════════════════════════════════════════════════════════════ HÖFFMANE · "LE LINGER" — Tier 1: purchase-flow overlays & modals (4a–4h) ═══════════════════════════════════════════════════════════════════════ */ /* ── 4a SEARCH OVERLAY — terracotta ground, tilted result cards ──── */ .search-overlay{background:var(--ivory);color:#ECE4D2;} .search-header{border-bottom:1px solid rgba(236,228,210,.3);padding:22px 48px;} .search-label{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(236,228,210,.75);} .search-close{border:1px solid rgba(236,228,210,.5)!important;color:#ECE4D2!important;border-radius:50%!important;width:44px;height:44px;background:transparent!important;} .search-close:hover{background:#ECE4D2!important;color:var(--ivory)!important;} .search-input-wrap{padding:40px 48px 0;} .search-input-row{border-bottom:2px solid #ECE4D2;padding-bottom:16px;gap:20px;} .search-icon-disp{color:#ECE4D2;} .search-input{background:transparent!important;border:none!important;color:#ECE4D2!important;font-family:'Cormorant Garamond',serif!important;font-weight:300;font-size:clamp(28px,4vw,48px)!important;} .search-input::placeholder{color:rgba(236,228,210,.45);font-style:italic;} .search-clear{color:rgba(236,228,210,.7)!important;} .search-hint{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(236,228,210,.6);padding:14px 48px 0;} /* SIGNATURE placeholder + live results count on the query row */ .search-sig{display:inline-flex;align-items:center;border:1px dashed rgba(236,228,210,.5);padding:7px 16px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(236,228,210,.8);} .search-input-row{align-items:baseline;} .search-icon-disp{align-self:center;} .search-meta{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,228,210,.65);white-space:nowrap;align-self:center;} .search-hint{display:none;} .search-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:36px 48px;} @media(max-width:900px){.search-results{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:560px){.search-results{grid-template-columns:minmax(0,1fr);}} .search-card{background:var(--noir);color:var(--ivory);border:1px solid var(--ivory);border-radius:0;padding:0;overflow:visible;transition:transform .35s cubic-bezier(.2,.7,.15,1),box-shadow .35s ease;box-shadow:0 12px 30px rgba(120,35,5,.14);display:flex;flex-direction:column;align-items:stretch;text-align:left;min-width:0;} .search-card:nth-child(3n+1){transform:rotate(-1.2deg);} .search-card:nth-child(3n+2){transform:rotate(1deg) translateY(8px);} .search-card:nth-child(3n){transform:rotate(-.6deg);} .search-card:hover{transform:rotate(0) translateY(-4px);box-shadow:0 18px 42px rgba(120,35,5,.22);} /* Media tile with diagonal-stripe placeholder + [ Shot ] label */ .search-card .src-media{position:relative;margin:18px 18px 0;aspect-ratio:3/2;overflow:hidden;background:repeating-linear-gradient(45deg,var(--sand) 0 12px,var(--noir) 12px 24px);display:flex;align-items:center;justify-content:center;} .search-card .src-media.has-photo{background:var(--ombre);} .search-card .src-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;} .src-shot{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);background:transparent;padding:5px 12px;} .search-card .src-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;} .src-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;} .src-name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;line-height:1.02;color:var(--ivory);} .src-price{font-family:'Jost',sans-serif;font-size:14px;font-weight:500;color:var(--ivory);white-space:nowrap;font-variant-numeric:tabular-nums;} .src-match{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} .src-mlabel{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);} .src-hl{background:var(--gold);color:#ECE4D2;padding:1px 6px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;} /* Discovery / set — inverts onto the orange ground */ .search-card.is-discovery{background:var(--gold);border-color:var(--gold);} .search-card.is-discovery .src-media{background:repeating-linear-gradient(45deg,#D0500F 0 12px,var(--gold) 12px 24px);border-bottom-color:rgba(236,228,210,.4);} .search-card.is-discovery .src-shot{background:#ECE4D2;color:var(--gold);} .search-card.is-discovery .src-name,.search-card.is-discovery .src-price{color:#ECE4D2;} .search-card.is-discovery .src-match,.search-card.is-discovery .src-mlabel{color:rgba(236,228,210,.85);} .search-card.is-discovery .src-hl{background:#ECE4D2;color:var(--gold);} @media(max-width:480px){.search-sig{display:none;}} .search-footer-hints{border-top:1px solid rgba(236,228,210,.3);padding:16px 48px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(236,228,210,.6);} .search-no-results,.snr-icon,.snr-text,.snr-sub{color:#ECE4D2;text-align:center;} .snr-text{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:300;} .snr-sub{font-size:13px;font-weight:300;color:rgba(236,228,210,.75);} /* ── 4b SIZE PICKER (card slide-up) — pill rows ─────────────────── */ .sc-card-size-picker{background:var(--card-bg)!important;border:1px solid var(--ivory)!important;color:var(--ivory);border-radius:0;box-shadow:0 -14px 34px var(--shadow);} .sc-picker-label{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--muted);} .sc-picker-opt{display:flex!important;justify-content:space-between;align-items:center;border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent)!important;border-radius:999px!important;padding:13px 22px!important;background:transparent!important;color:var(--ivory)!important;transition:background .2s,border-color .2s;} .sc-picker-opt:hover:not(.is-oos){border-color:var(--ivory)!important;background:var(--ombre)!important;} .sc-picker-opt-size{font-size:11px;letter-spacing:.18em;font-weight:500;text-transform:uppercase;} .sc-picker-opt-meta{font-family:'Cormorant Garamond',serif;font-size:20px;} .sc-picker-opt.is-oos{border-style:dashed!important;color:var(--muted)!important;} .sc-picker-close{border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent)!important;color:var(--ivory)!important;border-radius:50%!important;background:transparent!important;} /* ── 4c REVIEW MODAL / 4d NOTIFY MODAL — tilted cards ───────────── */ .review-modal-bg{background:rgba(184,65,14,.55);} .review-modal{background:var(--card-bg);color:var(--ivory);border:1px solid var(--ivory);border-radius:0;transform:rotate(.6deg);box-shadow:0 24px 60px rgba(120,35,5,.35);} .rm-title{font-family:'Cormorant Garamond',serif;font-weight:300;color:var(--ivory);} .rm-title em,.rm-title span{font-style:italic;color:var(--gold);} .rm-label,.rm-header .rm-eyebrow{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--muted);} .rm-field input,.rm-field textarea,.rm-field .rm-input{background:transparent;border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent);border-radius:0;color:var(--ivory);font-family:'Cormorant Garamond',serif;font-style:italic;} .rm-close{border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent)!important;color:var(--ivory)!important;border-radius:50%!important;background:transparent!important;} .rm-close:hover{background:var(--ivory)!important;color:#ECE4D2!important;} .pd-stars span,.rm-stars span,.rm-star{color:var(--gold);} #notify-modal-content{background:var(--gold);color:#ECE4D2;border:0;transform:rotate(-1deg);box-shadow:0 24px 60px rgba(120,35,5,.4);} #notify-modal-content .rm-title,#notify-modal-content .nm-title{color:#ECE4D2;} #notify-modal-content input{background:#ECE4D2;color:var(--ivory);border-radius:999px;border:none;} #notify-modal-content .btn-notify,#notify-modal-content button{background:var(--ivory)!important;color:#ECE4D2!important;border:none!important;} /* ── 4g TOAST — cream card ──────────────────────────────────────── */ .toast{background:var(--card-bg)!important;color:var(--ivory)!important;border:1px solid var(--ivory);border-radius:0!important;padding:16px 22px;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.06em;box-shadow:0 14px 34px var(--shadow);transform:rotate(.6deg);} .toast.show{transform:rotate(.6deg) translateY(0);} /* ── 4g COOKIE BAR — terracotta ─────────────────────────────────── */ .cookie-bar{background:var(--ivory);color:#ECE4D2;border:0;box-shadow:0 18px 40px rgba(120,35,5,.3);gap:22px;} .cookie-bar-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;line-height:1.2;color:#ECE4D2;} .cookie-bar-text{font-size:11px;font-weight:300;line-height:1.5;color:rgba(236,228,210,.85);} .cookie-bar-text a{color:#ECE4D2;text-decoration:underline;} .cookie-bar-actions{display:flex;gap:10px;flex:none;} .cookie-bar-essential{border:1px solid rgba(236,228,210,.6);border-radius:999px;padding:12px 20px;font-size:9px;letter-spacing:.22em;font-weight:500;text-transform:uppercase;color:#ECE4D2;background:transparent;cursor:pointer;} .cookie-bar-btn{background:#ECE4D2!important;color:var(--ivory)!important;border:0!important;border-radius:999px!important;padding:12px 20px;font-size:9px;letter-spacing:.22em;font-weight:500;text-transform:uppercase;} .cookie-bar-btn:hover{background:var(--gold)!important;color:#ECE4D2!important;} /* ── 4h EMPTY STATES — cart / no-results ────────────────────────── */ .scents-empty{text-align:center;padding:80px 40px;} .se-icon{width:110px;height:110px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--ivory) 45%,transparent);display:grid;place-items:center;margin:0 auto 24px;transform:rotate(-6deg);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:44px;color:var(--gold);} .se-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:38px;color:var(--ivory);} .se-title em,.se-title span{font-style:italic;color:var(--gold);} .se-sub{font-size:13px;font-weight:300;color:var(--muted);margin-top:12px;} .cart-empty,.cart-empty-msg{text-align:center;padding:60px 30px;color:var(--muted);} .cart-empty-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:32px;color:var(--ivory);} .cart-empty-title em{font-style:italic;color:var(--gold);} /* ── 4e/4f ORDER SUCCESS + DELIVERED — celebration ──────────────── */ .delivered-popup-overlay{background:rgba(184,65,14,.35);} .delivered-popup{background:var(--card-bg)!important;color:var(--ivory)!important;border:1px solid var(--ivory)!important;border-radius:0;box-shadow:0 24px 60px var(--shadow);} .dp-title{font-family:'Cormorant Garamond',serif;font-weight:300;color:var(--ivory)!important;} .dp-title em,.dp-title span{font-style:italic;color:var(--gold);} .dp-message,.dp-subtitle{color:var(--muted)!important;} .dp-checkmark{border-color:var(--gold)!important;} .dp-checkmark svg{stroke:var(--gold)!important;} .toast.is-error{background:var(--gold)!important;color:#ECE4D2!important;} .snr-text em{font-style:italic;color:var(--gold);} .search-no-results{padding:70px 40px;} /* ═══════════════════════════════════════════════════════════════════════ HÖFFMANE · "LE LINGER" — Tier 2: Journal (5a/5b), 404 (5c) ═══════════════════════════════════════════════════════════════════════ */ /* ── 5c 404 ─────────────────────────────────────────────────────── */ #notfound-page.active{display:flex;flex-direction:column;min-height:100vh;background:var(--gold);} .nf-hero{position:relative;flex:1;min-height:70vh;display:grid;place-items:center;text-align:center;padding:120px 48px 80px;overflow:hidden;} .nf-inner{position:relative;z-index:2;} .nf-code{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(120px,18vw,180px);line-height:.9;letter-spacing:.02em;} .nf-zero{font-style:italic;display:inline-block;transform:rotate(-6deg);color:#ECE4D2;background:var(--ivory);padding:0 clamp(14px,2vw,28px);margin:0 8px;} .nf-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(28px,4vw,40px);margin-top:30px;} .nf-sub{margin-top:14px;font-size:14px;font-weight:300;color:rgba(236,228,210,.85);} .nf-actions{margin-top:36px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} .nf-btn{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.25em;text-transform:uppercase;font-weight:500;border-radius:999px;padding:16px 34px;cursor:pointer;text-decoration:none;display:inline-block;transition:background .2s,color .2s;} .nf-btn-cream{background:#ECE4D2;color:var(--gold);border:1px solid #ECE4D2;} .nf-btn-cream:hover{background:var(--ivory);border-color:var(--ivory);color:#ECE4D2;} .nf-btn-ghost{background:transparent;color:#ECE4D2;border:1px solid rgba(236,228,210,.6);} .nf-btn-ghost:hover{background:rgba(236,228,210,.15);} .nf-spark{position:absolute;color:#ECE4D2;z-index:1;} .nf-spark-1{left:8%;top:16%;font-size:26px;opacity:.55;transform:rotate(-15deg);} .nf-spark-2{right:12%;bottom:22%;font-size:32px;opacity:.45;transform:rotate(12deg);} .nf-marquee{background:var(--gold);color:#ECE4D2;border-top:1px solid rgba(236,228,210,.3);} /* ── 5a/5b THE JOURNAL — Le Linger reskin of jo-* ───────────────── */ .jo-wrap,.jo-art-wrap{background:var(--noir);color:var(--ivory);} .jo-masthead{border:0;text-align:left;padding:64px 48px 20px;} .jo-orn{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--muted);} .jo-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(56px,8vw,84px);line-height:.98;color:var(--ivory);} .jo-title em{font-style:italic;color:var(--gold);} .jo-sub{color:var(--muted);font-weight:300;} .jo-dateline{border-color:var(--border);color:var(--muted);} .jo-search{background:transparent;border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent);border-radius:999px;color:var(--ivory);} .jo-pill{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;border:1px solid color-mix(in srgb,var(--ivory) 40%,transparent);border-radius:999px;background:transparent;color:var(--ivory);padding:7px 14px;} .jo-pill.active{background:var(--ivory);color:#ECE4D2;border-color:var(--ivory);} .jo-sec{color:var(--muted);} .jo-sec-line{background:var(--border);} .jo-card,.jo-hero-card,.jo-related-card{background:var(--card-bg);border:1px solid var(--ivory);border-radius:0;box-shadow:none;} .jo-grid > *:nth-child(3n+1) .jo-card,.jo-grid > *:nth-child(3n+1){transform:rotate(-1deg);} .jo-grid > *:nth-child(3n+2) .jo-card,.jo-grid > *:nth-child(3n+2){transform:rotate(1.2deg) translateY(12px);} .jo-card-cat,.jo-card-meta,.jo-hero-cat{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);} .jo-card-title,.jo-hero-title,.jo-card-h{font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--ivory);} .jo-card-img,.jo-hero-img{background:repeating-linear-gradient(45deg,var(--sand) 0 12px,var(--noir) 12px 24px);} .jo-cta{background:var(--gold);color:#ECE4D2;border:0;} .jo-cta-h{font-family:'Cormorant Garamond',serif;color:#ECE4D2;} .jo-cta-h em{font-style:italic;} .jo-cta-in{background:#ECE4D2;border:0;border-radius:999px;color:var(--ivory);} .jo-cta-btn{background:#ECE4D2!important;color:var(--gold)!important;border:0!important;} .jo-footer{background:var(--ivory);color:rgba(236,228,210,.8);border:0;} /* Article */ .jo-art-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);} .jo-art-h1{font-family:'Cormorant Garamond',serif;font-weight:300;color:var(--ivory);} .jo-art-h1 em{font-style:italic;color:var(--gold);} .jo-art-meta{color:var(--muted);} .jo-art-cover img,.jo-art-body img{border:1px solid var(--ivory);} .jo-art-body{color:rgba(184,65,14,.9);font-weight:300;font-family:'Jost',sans-serif;} .jo-art-body h2,.jo-art-body h3{font-family:'Cormorant Garamond',serif;color:var(--ivory);} .jo-art-body blockquote{background:var(--gold);color:#ECE4D2;border:0;font-family:'Cormorant Garamond',serif;font-style:italic;padding:36px 40px;transform:rotate(-.6deg);} .jo-related-h{font-family:'Cormorant Garamond',serif;color:var(--ivory);} /* ═══════════════════════════════════════════════════════════════════════ HÖFFMANE · "LE LINGER" — Scents grid card (design 2a) ═══════════════════════════════════════════════════════════════════════ */ .scents-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:34px 28px;} .sc-card{position:relative;background:var(--card-bg)!important;border:1px solid var(--ivory)!important;border-radius:0!important;padding:14px!important;box-shadow:none!important;overflow:visible!important;cursor:pointer;display:block;transition:transform .3s ease,box-shadow .3s ease;} .sc-card:hover{transform:rotate(0) translateY(-4px)!important;box-shadow:0 14px 30px var(--shadow)!important;z-index:3;} .sc-card-visual{position:relative;width:100%;aspect-ratio:4/5;background:repeating-linear-gradient(45deg,var(--sand) 0 12px,var(--noir) 12px 24px)!important;border-radius:0!important;display:grid;place-items:center;overflow:hidden;} .sc-card-visual img{width:100%;height:100%;object-fit:cover;} .sc-shot-label{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:color-mix(in srgb,var(--ivory) 60%,transparent);} /* Card body fills the card height so the Add button can pin to the bottom */ .sc-card-body{padding:14px 4px 4px!important;flex:1;display:flex;flex-direction:column;} .sc-card-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;} .sc-pname{font-family:'Cormorant Garamond',serif!important;font-weight:400!important;font-size:26px!important;line-height:1.1;color:var(--ivory)!important;} .sc-price{font-family:'Jost',sans-serif;font-size:13px;color:var(--ivory);flex:none;} .sc-cat{margin-top:4px;font-family:'Jost',sans-serif!important;font-size:10px!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--muted)!important;} /* Mood/note on its own line, clamped to 2 lines so cards stay uniform and the category never runs into it. Reserves 2 lines so bodies align. */ .sc-mood{margin-top:7px;margin-bottom:16px;font-family:'Jost',sans-serif;font-style:normal;white-space:normal;font-size:10px;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.6em * 2);} /* Add button pinned to the card bottom — same position on every card */ .sc-add-btn{width:100%;margin-top:auto!important;display:flex!important;align-items:center;justify-content:center;padding:11px 0!important;border-radius:999px!important;border:1px solid var(--ivory)!important;background:transparent!important;color:var(--ivory)!important;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.25em;text-transform:uppercase;font-weight:500;transition:background .2s,color .2s;} .sc-add-btn:hover{background:var(--ivory)!important;color:#ECE4D2!important;} /* rotated stickers */ .sc-sticker{position:absolute;top:-12px;right:-10px;z-index:2;background:var(--gold);color:#ECE4D2;padding:8px 14px;transform:rotate(5deg);font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.25em;text-transform:uppercase;font-weight:500;} .sc-sticker-start{right:auto;left:-10px;background:#ECE4D2;color:var(--gold);border:1px solid var(--gold);transform:rotate(-5deg);} .sc-sticker-oos{background:var(--ivory);color:#ECE4D2;} /* inverted-orange discovery card */ .sc-card.is-discovery{background:var(--gold)!important;color:#ECE4D2;border-color:var(--gold)!important;} .sc-card.is-discovery .sc-card-visual{background:repeating-linear-gradient(45deg,#D0500F 0 12px,var(--gold) 12px 24px)!important;} .sc-card.is-discovery .sc-shot-label{background:#ECE4D2;color:var(--gold);padding:4px 8px;} .sc-card.is-discovery .sc-pname,.sc-card.is-discovery .sc-price{color:#ECE4D2!important;} .sc-card.is-discovery .sc-cat{color:rgba(236,228,210,.75)!important;} .sc-card.is-discovery .sc-mood{color:rgba(236,228,210,.72);} .sc-card.is-discovery .sc-add-btn{border-color:#ECE4D2!important;color:#ECE4D2!important;} .sc-card.is-discovery .sc-add-btn:hover{background:#ECE4D2!important;color:var(--gold)!important;} .sc-card.is-oos{opacity:.92;} @media(max-width:900px){.scents-grid{grid-template-columns:1fr 1fr!important;}} @media(max-width:600px){.scents-grid{grid-template-columns:1fr!important;}} /* Scents cards — alternating tilt (design 2a), threaded through --tilt so the sc-fadein entrance animation settles AT the tilt instead of overriding it. */ .scents-grid .sc-card{--tilt:0deg;} .scents-grid .sc-card:nth-child(6n+1){--tilt:-1.2deg;} .scents-grid .sc-card:nth-child(6n+2){--tilt:1.4deg;} .scents-grid .sc-card:nth-child(6n+3){--tilt:-1deg;} .scents-grid .sc-card:nth-child(6n+4){--tilt:1deg;} .scents-grid .sc-card:nth-child(6n+5){--tilt:-1.4deg;} .scents-grid .sc-card:nth-child(6n+6){--tilt:1.6deg;} .scents-grid .sc-card{transform:rotate(var(--tilt));} .scents-grid .sc-card:hover{transform:rotate(0) translateY(-4px)!important;} .scents-grid.view-list .sc-card{--tilt:0deg;transform:none!important;} @media(prefers-reduced-motion:reduce){.scents-grid .sc-card{--tilt:0deg!important;}} /* ════════════════════════════════════════════════════════════════════ PRODUCT PAGE — design 2b (/scents/:slug) Editorial detail column + "what they couldn't place." reviews. Reuses the existing #product-details markup; only re-skins it. ════════════════════════════════════════════════════════════════════ */ /* Image frame fills the box; positionPvSticker() (app.js) offsets the sticker to the contained photo's real corner so it never floats in the letterbox. */ .pv-frame{position:absolute;inset:0;} #pv-main-img{ display:block;width:100%;height:100%; object-fit:contain;object-position:center; } /* Editorial sticker on the main visual (PARFUM ✳︎ / BESTSELLER ✳︎ etc.) — sits on the photo's top-right corner with a slight overhang. */ .pv-sticker{ position:absolute;top:-12px;right:-10px;z-index:5; background:var(--gold);color:var(--noir); padding:9px 18px;transform:rotate(4deg); font-family:'Jost',sans-serif;font-size:9px;font-weight:500; letter-spacing:3px;text-transform:uppercase;white-space:nowrap; box-shadow:0 8px 20px var(--shadow); } /* Let the overhang show instead of being clipped; keep the stripe ground as a fallback behind the canvas / while an image loads. */ .pv-main{overflow:visible;background:repeating-linear-gradient(45deg,var(--sand) 0 12px,var(--noir) 12px 24px);} /* Big editorial product name */ .pd-name{font-size:clamp(46px,6vw,84px);line-height:.98;letter-spacing:-1.5px;margin:0 0 20px;} .pd-name em{font-style:italic;color:var(--gold);} /* Description — readable, with an italic serif lede pulled from the mood line */ .pd-desc{font-size:14.5px;line-height:1.9;color:var(--muted);margin:26px 0 30px;} /* Mood is its own italic lede paragraph, set apart from the body copy */ .pd-desc-lede{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:20px;line-height:1.5;color:var(--champagne);margin:0 0 20px;} .pd-desc-body{margin:0;} /* Notes pyramid — TOP / HEART / BASE as editorial rows */ .pd-notes{margin:0 0 34px;border-top:1px solid var(--border);} .pd-note-row{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:15px 0;border-bottom:1px solid var(--border); } .pd-note-row .pdn-label{ font-family:'Jost',sans-serif;font-size:10px;font-weight:500; letter-spacing:4px;text-transform:uppercase;color:var(--champagne); } .pd-note-row .pdn-name{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:22px;color:var(--gold);text-align:right;line-height:1.2; } /* Size — rounded pills, selected fills terracotta */ .size-opts{display:flex;gap:10px;flex-wrap:wrap;} .size-opt{ display:inline-flex;align-items:center;gap:6px; border:1px solid var(--border);border-radius:999px; color:var(--champagne);background:transparent; font-family:'Jost',sans-serif;font-size:11px;font-weight:500; letter-spacing:1.5px;text-transform:uppercase;padding:12px 22px; transition:background .2s,color .2s,border-color .2s; } .size-opt .so-price{color:var(--muted);font-weight:400;letter-spacing:1px;} .size-opt.active,.size-opt:hover{background:var(--champagne);border-color:var(--champagne);color:var(--noir);} .size-opt.active .so-price,.size-opt:hover .so-price{color:rgba(236,228,210,.8);} .size-opt.is-oos{ background:transparent;border-color:var(--border);color:var(--muted); text-decoration:line-through;opacity:.6; } .size-opt.is-oos:hover{background:transparent;color:var(--champagne);border-color:var(--muted);text-decoration:line-through;} .pd-oos-note{margin-top:14px;font-size:11px;letter-spacing:1px;color:var(--muted);} .pd-oos-note a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;} .pd-oos-note a:hover{color:var(--champagne);} /* Price + quantity */ .pd-price-row{display:flex;align-items:baseline;gap:14px;margin:28px 0 8px;} .pd-price{margin:0;} /* Add-to-cart — pill to match the rest of the storefront */ .btn-add{border-radius:999px;color:var(--noir);} .btn-add.btn-notify{background:transparent;border-color:var(--champagne);color:var(--champagne);} .btn-add.btn-notify:hover{background:var(--champagne);color:var(--noir);} /* ── Reviews — "what they couldn't place." ─────────────────────── */ .reviews-section{padding:0;border-top:none;} .rs-marquee{border-top:1px solid rgba(236,228,210,.3);border-bottom:1px solid var(--champagne);} .rs-marq-dot{opacity:.55;padding:0 22px;} .rs-ground{ background:linear-gradient(160deg,#E3B48F,var(--camel)); padding:60px 48px 72px; } @media(max-width:768px){.rs-ground{padding:48px 24px 56px;}} @media(max-width:480px){.rs-ground{padding:40px 16px 48px;}} .rs-ground .rs-header{align-items:center;margin-bottom:44px;} .rs-title{font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-1px;color:var(--champagne);} .rs-title em{font-style:italic;color:var(--champagne);} /* Write-a-review pill sits on the peach ground */ .rs-ground .btn-write-review{border-color:var(--champagne);color:var(--champagne);border-radius:999px;flex:none;} .rs-ground .btn-write-review::before{background:var(--champagne);} .rs-ground .btn-write-review:hover span{color:var(--noir);} .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} @media(max-width:900px){.rev-grid{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.rev-grid{grid-template-columns:1fr;}} .rev-card{ background:var(--noir);border:none; padding:34px 32px 30px;display:flex;flex-direction:column;gap:18px; box-shadow:0 18px 40px rgba(120,35,5,.16), 0 3px 10px rgba(120,35,5,.08); transition:transform .35s ease, box-shadow .35s ease; } /* Slight scattered paper tilt — varied by position, works for any count. Cards straighten and lift a touch on hover. */ .rev-card:nth-child(3n+1){transform:rotate(-1.5deg);} .rev-card:nth-child(3n+2){transform:rotate(1deg);} .rev-card:nth-child(3n+3){transform:rotate(-0.6deg);} .rev-card:hover{transform:rotate(0) translateY(-4px);box-shadow:0 26px 52px rgba(120,35,5,.2), 0 4px 12px rgba(120,35,5,.1);} @media(prefers-reduced-motion:reduce){.rev-card,.rev-card:hover{transform:none;transition:none;}} .rev-stars{letter-spacing:2px;line-height:1;} .rev-quote{ font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300; font-size:22px;line-height:1.35;color:var(--champagne); } /* Name follows the quote (content packed to the top), leaving airy space below on shorter cards — the paper-tile look from the design. */ .rev-author{ font-family:'Jost',sans-serif;font-size:10px;font-weight:500; letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-top:2px; } .reviews-load-more-wrap{text-align:center;margin-top:40px;} .btn-load-more-reviews{ background:transparent;border:1px solid var(--champagne);color:var(--champagne); border-radius:999px;font-family:'Jost',sans-serif;font-size:10px;font-weight:500; letter-spacing:4px;text-transform:uppercase;padding:14px 34px;cursor:pointer; transition:background .25s,color .25s; } .btn-load-more-reviews:hover{background:var(--champagne);color:var(--noir);} .rev-empty{text-align:center;padding:40px 20px;} .rev-empty-stars{color:var(--champagne);letter-spacing:5px;font-size:18px;opacity:.5;margin-bottom:14px;} .rev-empty-text{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:30px;color:var(--champagne);margin-bottom:6px;} .rev-empty-sub{font-size:12px;letter-spacing:1px;color:var(--muted);} /* ════════════════════════════════════════════════════════════════════ HOME — design 1c ("Le Linger" Gen-Z lean) Featured hero + "all the traces" tilted-card gallery on the camel ground. ════════════════════════════════════════════════════════════════════ */ /* ── "All the traces" collection rail (uploaded design) ───────── */ .hf-traces{background:var(--noir);color:var(--champagne);overflow:hidden;position:relative;} .hf-traces-watermark{position:absolute;left:50%;top:150px;transform:translateX(-50%);pointer-events:none;user-select:none;white-space:nowrap;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:295px;line-height:1;color:rgba(184,65,14,.07);} .hf-traces-inner{position:relative;padding:90px 0;} .hf-traces-head{padding:0 64px;margin-bottom:54px;display:flex;justify-content:space-between;align-items:baseline;gap:24px;} .hf-traces-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(44px,6vw,72px);line-height:1;margin:0;color:var(--champagne);} .hf-traces-title em{font-style:italic;color:var(--gold);} .hf-traces-hint{font-size:11px;letter-spacing:.3em;font-weight:500;color:rgba(184,65,14,.7);text-transform:uppercase;white-space:nowrap;} .hf-traces-rail{display:flex;gap:44px;overflow-x:auto;padding:24px 64px 30px;scroll-snap-type:x mandatory;cursor:grab;scrollbar-width:none;} .hf-traces-rail::-webkit-scrollbar{display:none;} .hf-traces-rail:active{cursor:grabbing;} .hf-trace-card{flex:none;width:480px;background:var(--noir);border:1px solid var(--gold);box-shadow:0 18px 44px rgba(120,35,5,.14);padding:16px 16px 0;scroll-snap-align:start;cursor:pointer;transition:transform .2s ease;} .hf-trace-card:nth-child(odd){transform:rotate(-1.6deg);} .hf-trace-card:nth-child(even){transform:rotate(1.4deg) translateY(14px);} .hf-trace-card:hover{transform:rotate(0deg);} .hf-trace-card:nth-child(even):hover{transform:rotate(0deg) translateY(14px);} .hf-trace-img{height:560px;display:grid;place-items:center;overflow:hidden;background:repeating-linear-gradient(45deg,var(--sand) 0 12px,var(--noir) 12px 24px);} .hf-trace-img.has-photo{background:var(--ombre);} .hf-trace-img img{width:100%;height:100%;object-fit:cover;display:block;} .hf-trace-img .slot-label{font-family:var(--mono);font-size:9px;letter-spacing:.1em;background:var(--gold);color:var(--noir);padding:5px 10px;text-transform:uppercase;} .hf-trace-meta{padding:22px 8px 26px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;} .hf-trace-name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:32px;color:var(--champagne);line-height:1.05;} .hf-trace-sub{margin-top:8px;font-size:10px;letter-spacing:.3em;font-weight:500;color:rgba(184,65,14,.65);text-transform:uppercase;} .hf-trace-price{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;color:var(--champagne);white-space:nowrap;} .hf-traces-nav{margin-top:36px;display:flex;justify-content:center;align-items:center;gap:18px;} .hf-traces .hf-arrow{display:inline-grid;place-items:center;width:52px;height:52px;border:1px solid rgba(184,65,14,.45);background:transparent;color:var(--champagne);font-size:16px;cursor:pointer;transition:background-color .18s ease,color .18s ease;} .hf-traces .hf-arrow:hover{background:var(--champagne);color:var(--noir);} .hf-traces-dot{width:34px;height:5px;background:var(--gold);border-radius:999px;} /* Discovery set inverts to the orange ground */ .hf-trace-card.is-discovery{background:var(--gold);border-color:var(--gold);} .hf-trace-card.is-discovery .hf-trace-img{background:repeating-linear-gradient(45deg,#D0500F 0 12px,var(--gold) 12px 24px);} .hf-trace-card.is-discovery .hf-trace-img.has-photo{background:#D0500F;} .hf-trace-card.is-discovery .hf-trace-name,.hf-trace-card.is-discovery .hf-trace-price{color:#ECE4D2;} .hf-trace-card.is-discovery .hf-trace-sub{color:rgba(236,228,210,.75);} .hf-trace-card.is-discovery .slot-label{background:#ECE4D2;color:var(--gold);} @media(max-width:900px){ .hf-traces-inner{padding:64px 0;} .hf-traces-head{padding:0 22px;margin-bottom:34px;} .hf-traces-rail{padding:18px 22px 24px;gap:24px;} .hf-trace-card{width:300px;} .hf-trace-img{height:340px;} .hf-trace-name{font-size:24px;} .hf-traces-watermark{font-size:160px;top:120px;} } /* ── Featured hero (NEW ARRIVAL — 001) ─────────────────────────── */ #featured .feat-stage{position:relative;} #featured .feat-frame{ position:relative;aspect-ratio:1/1;overflow:hidden; border:1px solid var(--champagne); background:repeating-linear-gradient(45deg,var(--sand) 0 14px,var(--noir) 14px 28px); display:flex;align-items:center;justify-content:center; } /* With a real photo, drop the forced 1:1 crop — let the frame take the image's own aspect ratio so the whole photo shows and the stickers sit on its true top/bottom edges. (The square stays for the stripe placeholder.) */ #featured .feat-frame.has-photo{background:var(--ombre);aspect-ratio:auto;display:block;} #featured .feat-photo{width:100%;height:auto;display:block;} #featured .feat-shot{ font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase; background:var(--gold);color:var(--noir);padding:8px 14px; } #featured .feat-sticker{ position:absolute;top:-14px;right:26px;z-index:3; background:var(--gold);color:var(--noir);padding:9px 18px;transform:rotate(4deg); font-family:'Jost',sans-serif;font-size:9px;font-weight:500;letter-spacing:3px;text-transform:uppercase; box-shadow:0 8px 20px var(--shadow); } #featured .feat-price-sticker{ position:absolute;left:-16px;bottom:-18px;z-index:3; background:var(--noir);border:1px solid var(--champagne);color:var(--champagne); font-family:'Cormorant Garamond',serif;font-size:30px;padding:8px 22px;transform:rotate(-4deg); box-shadow:0 12px 30px var(--shadow); } #featured .fi-label{color:var(--gold);letter-spacing:5px;} #featured .fi-title{font-size:clamp(38px,7vw,92px);line-height:.92;letter-spacing:-2px;color:var(--champagne);margin-bottom:22px;} #featured .fi-title em{color:var(--gold);font-style:italic;} #featured .fi-desc{font-size:14px;line-height:1.8;color:var(--muted);max-width:440px;margin-bottom:28px;} #featured .fi-note-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;} #featured .fi-note-pill{ border:1px solid var(--border);border-radius:999px;padding:9px 18px; font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.5px;color:var(--champagne); } /* Filled-orange pill CTA with the price */ #featured .feat-cta{background:var(--gold);border-color:var(--gold);} #featured .feat-cta span{color:var(--noir);} #featured .feat-cta::before{background:var(--champagne);} #featured .feat-cta:hover span{color:#ECE4D2;} @media(max-width:900px){ #featured .feat-price-sticker{left:0;} } /* ════════════════════════════════════════════════════════════════════ CART DRAWER + CHECKOUT — design 12-2k Cream panels, pill steppers/CTAs, editorial thumbs, underline fields. ════════════════════════════════════════════════════════════════════ */ /* ── Cart drawer ───────────────────────────────────────────────── */ .cart-panel{background:var(--noir);border-left:1px solid var(--champagne);width:460px;} @media(max-width:520px){.cart-panel{width:100%;}} .cart-header{border-bottom:1px solid var(--champagne);padding:30px 34px 22px;} .ch-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:30px;color:var(--champagne);} .ch-title #cart-title-count{color:var(--muted);font-size:24px;} .ch-close{border:1px solid var(--champagne);color:var(--champagne);border-radius:50%;width:40px;height:40px;background:transparent;} .ch-close:hover{background:var(--champagne);color:var(--noir);border-color:var(--champagne);} .cart-items{padding:6px 34px;} .cart-item{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--border);align-items:stretch;} .ci-img{width:92px;height:92px;flex:none;border:1px solid var(--champagne);border-radius:0;background:repeating-linear-gradient(45deg,var(--sand) 0 10px,var(--noir) 10px 20px);overflow:hidden;display:block;} .ci-img.has-photo{background:var(--ombre);} .ci-img.is-discovery{background:repeating-linear-gradient(45deg,#D0500F 0 10px,var(--gold) 10px 20px);border-color:var(--gold);} .ci-img img{width:100%;height:100%;object-fit:cover;display:block;} .ci-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;} .ci-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;} .ci-name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:22px;line-height:1.05;color:var(--champagne);margin:0;} .ci-meta{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:1px;color:var(--muted);margin-top:4px;} .ci-remove{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:2px;flex:none;transition:color .2s;} .ci-remove:hover{color:var(--champagne);} .ci-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;} .ci-qty-wrap{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;overflow:hidden;margin:0;} .ci-qty-btn{width:34px;height:34px;border:none;background:transparent;color:var(--champagne);font-size:15px;} .ci-qty-btn:hover{background:var(--ombre);color:var(--champagne);} .ci-qty-val{width:34px;height:34px;line-height:34px;border:none;color:var(--champagne);font-size:12px;} .ci-price{font-family:'Jost',sans-serif;font-weight:500;font-variant-numeric:tabular-nums;font-size:16px;color:var(--champagne);white-space:nowrap;} /* Voucher — pill with filled action */ .cf-voucher{border-bottom:none;margin-bottom:8px;padding-bottom:0;} .cf-voucher-row{border:1px solid var(--champagne);border-radius:999px;overflow:hidden;gap:0;} .cf-voucher-row input{flex:1;min-width:0;background:transparent;border:none;border-radius:0;font-family:'Jost',sans-serif;font-style:normal;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne);padding:15px 22px;} .cf-voucher-row input::placeholder{font-family:'Jost',sans-serif;font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);opacity:.8;} .cf-voucher-row input:disabled{opacity:1;color:var(--champagne);} .cf-voucher-row button,#voucher-apply-btn{flex:none;background:var(--champagne)!important;border:none!important;border-radius:0!important;color:var(--noir)!important;font-family:'Jost',sans-serif;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding:0 26px;} .cf-voucher-row button:hover,#voucher-apply-btn:hover{background:var(--gold)!important;color:var(--noir)!important;} .cf-voucher-msg{font-size:11px;letter-spacing:.04em;color:var(--gold);margin-top:12px;} .cf-voucher-msg.err{color:var(--danger);} /* Footer totals + CTA */ .cart-footer{border-top:1px solid var(--champagne);padding:24px 34px 30px;} .cf-row{margin-bottom:12px;} .cf-row .cf-label{font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.02em;color:var(--muted);} .cf-row .cf-sub,.cf-row .cf-discount{font-family:'Jost',sans-serif;font-size:13px;font-variant-numeric:tabular-nums;} #cf-discount-row .cf-label,#cf-discount-row .cf-discount{color:var(--gold);} .cf-row:last-of-type .cf-label{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--champagne);letter-spacing:0;} .cf-total{font-family:'Jost',sans-serif;font-weight:500;font-variant-numeric:tabular-nums;font-size:26px;color:var(--champagne);} .btn-checkout{background:var(--champagne);border:1px solid var(--champagne);color:var(--noir);border-radius:999px;padding:20px;letter-spacing:.28em;margin-top:18px;} .btn-checkout:hover{background:var(--gold);border-color:var(--gold);color:var(--noir);} .cf-note{display:none;} /* ── Checkout modal ────────────────────────────────────────────── */ .checkout-modal{background:var(--noir);border:1px solid var(--champagne);border-radius:0;max-width:460px;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(120,35,5,.3);} .cm-header{border-bottom:1px solid var(--champagne);padding:28px 36px;} .cm-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:30px;color:var(--champagne);} .cm-close{border:1px solid var(--champagne);color:var(--champagne);border-radius:50%;width:40px;height:40px;background:transparent;} .cm-close:hover{background:var(--champagne);color:var(--noir);} .cm-body{padding:26px 36px 8px;overflow-y:auto;} /* Summary bar — filled peach */ .cm-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#E6BE99;border-radius:8px;padding:16px 22px;margin-bottom:28px;} .cm-summary-left{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.08em;color:var(--champagne);} .cm-summary-total{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--champagne);font-variant-numeric:tabular-nums;} /* Underline fields */ .checkout-modal .cform{display:flex;flex-direction:column;gap:22px;} .checkout-modal .clabel{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--champagne);} .checkout-modal .cfield{gap:9px;} .checkout-modal .cfield input,.checkout-modal .cfield select{ background:transparent;border:none;border-bottom:1px solid rgba(184,65,14,.35);border-radius:0; color:var(--champagne);font-family:'Jost',sans-serif;font-weight:400;font-size:15px;letter-spacing:.01em;padding:9px 2px; } .checkout-modal .cfield input:focus,.checkout-modal .cfield select:focus{border-bottom-color:var(--gold);outline:none;} .checkout-modal .cfield input::placeholder{color:rgba(184,65,14,.4);} .checkout-modal .cfield select{color:var(--champagne);} .checkout-modal .cfield select option{background:var(--noir);color:var(--champagne);} .cm-pin-status{font-size:11px;letter-spacing:.04em;margin-top:6px;min-height:14px;} /* Footer — filled orange PAY pill */ .cm-foot{border-top:1px solid var(--champagne);padding:22px 36px 28px;} .checkout-modal .btn-place-order{width:100%;background:var(--gold);border:1px solid var(--gold);color:var(--noir);border-radius:999px;padding:20px;font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:background .25s,border-color .25s;} .checkout-modal .btn-place-order:hover{background:var(--champagne);border-color:var(--champagne);color:var(--noir);} .cm-secure{text-align:center;margin-top:14px;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);} @media(max-width:520px){ .cm-header,.cm-foot{padding-left:22px;padding-right:22px;} .cm-body{padding-left:22px;padding-right:22px;} } /* ════════════════════════════════════════════════════════════════════ TRACK ORDER — design 06-2e ("where is my trace?") ════════════════════════════════════════════════════════════════════ */ #track-page .track-wrap{max-width:1180px;margin:0 auto;padding:40px 40px 100px;} @media(max-width:600px){#track-page .track-wrap{padding:24px 20px 64px;}} .trk-headline{ font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(52px,8vw,104px);line-height:1;letter-spacing:-2px; text-align:center;color:var(--champagne);margin:48px 0 40px; } .trk-headline em{font-style:italic;color:var(--gold);} /* Search — single pill: order id + Track button */ #track-page .track-search-box{max-width:640px;margin:0 auto 56px;} .trk-search-pill{ display:flex;align-items:stretch;border:1px solid var(--champagne); border-radius:999px;overflow:hidden;background:transparent; } .trk-search-pill .track-input{ flex:1;min-width:0;background:transparent;border:none;outline:none; color:var(--champagne);font-family:'Jost',sans-serif;font-size:14px; letter-spacing:.16em;text-transform:uppercase;padding:20px 30px; } .trk-search-pill .track-input::placeholder{color:var(--muted);letter-spacing:.16em;} .trk-track-btn{ flex:none;background:var(--champagne);border:none;color:var(--noir); font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;padding:0 40px;cursor:pointer;transition:background .25s; } .trk-track-btn:hover{background:var(--gold);color:var(--noir);} #track-page .track-hint{text-align:center;margin-top:16px;font-size:11px;letter-spacing:.04em;color:var(--muted);} #track-page .track-hint strong{color:var(--champagne);font-weight:500;} /* ── Trace card ────────────────────────────────────────────────── */ .trace-card{border:1px solid var(--champagne);border-radius:0;background:transparent;padding:50px 54px 54px;} @media(max-width:600px){.trace-card{padding:30px 22px 34px;}} .trc-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:44px;} .trc-order{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:34px;color:var(--champagne);letter-spacing:-.5px;} .trc-badge{display:inline-flex;align-items:center;background:var(--gold);color:var(--noir);border-radius:999px;padding:9px 20px;font-family:'Jost',sans-serif;font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;} .trc-badge.is-delivered{background:var(--champagne);color:var(--noir);} .trc-badge.is-bad{background:transparent;border:1px solid var(--muted);color:var(--muted);} /* Roadmap: 4-step line */ .trc-road{position:relative;padding:6px 0 4px;margin-bottom:52px;} .trc-road-line{position:absolute;top:20px;left:12.5%;right:12.5%;height:2px;background:color-mix(in srgb,var(--champagne) 26%,transparent);} .trc-road-fill{height:100%;background:var(--gold);transition:width .5s ease;} .trc-road-steps{position:relative;display:flex;} .trc-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;} .trc-dot{ width:30px;height:30px;border-radius:50%;display:grid;place-items:center; font-size:13px;line-height:1;background:var(--noir);position:relative;z-index:1; } .trc-step.is-done .trc-dot{background:var(--gold);color:var(--noir);border:2px solid var(--gold);} .trc-step.is-current .trc-dot{background:var(--noir);color:transparent;border:2px solid var(--gold);} .trc-step.is-future .trc-dot{background:var(--noir);color:color-mix(in srgb,var(--champagne) 40%,transparent);border:1px solid color-mix(in srgb,var(--champagne) 30%,transparent);} .trc-step-label{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);} .trc-step.is-future .trc-step-label{color:color-mix(in srgb,var(--champagne) 45%,transparent);} .trc-step-sub{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.04em;color:var(--muted);min-height:14px;} /* Two columns */ .trc-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;border-top:1px solid var(--border);padding-top:36px;} @media(max-width:760px){.trc-cols{grid-template-columns:1fr;gap:36px;}} .trc-col-title{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin-bottom:22px;} /* Activity list */ .trc-events{display:flex;flex-direction:column;} .trc-ev{display:flex;gap:22px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--border);} .trc-ev:last-child{border-bottom:none;} .trc-ev-when{flex:none;width:104px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} .trc-ev-what{font-family:'Jost',sans-serif;font-size:14px;color:var(--champagne);} .trc-noevents{font-size:12px;line-height:1.7;color:var(--muted);letter-spacing:.02em;} /* In the box */ .trc-box-card{border:1px solid var(--border);padding:22px;display:flex;flex-direction:column;gap:18px;} .trc-box-row{display:flex;align-items:center;gap:18px;} .trc-box-thumb{width:68px;height:68px;flex:none;border:1px solid var(--border);background:repeating-linear-gradient(45deg,var(--sand) 0 9px,var(--noir) 9px 18px);overflow:hidden;} .trc-box-thumb.has-photo{background:var(--ombre);} .trc-box-thumb.is-discovery{background:repeating-linear-gradient(45deg,#D0500F 0 9px,var(--gold) 9px 18px);border-color:var(--gold);} .trc-box-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .trc-box-info{flex:1;min-width:0;} .trc-box-name{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--champagne);line-height:1.1;} .trc-box-name em{font-style:italic;color:var(--gold);} .trc-box-meta{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.06em;color:var(--muted);margin-top:4px;} .trc-box-price{font-family:'Jost',sans-serif;font-weight:500;font-variant-numeric:tabular-nums;font-size:15px;color:var(--champagne);white-space:nowrap;} .trc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px;padding-top:2px;} .trc-total-label{font-family:'Jost',sans-serif;font-size:13px;color:var(--muted);letter-spacing:.02em;} .trc-total-val{font-family:'Jost',sans-serif;font-weight:500;font-variant-numeric:tabular-nums;font-size:20px;color:var(--champagne);} /* Cancelled / RTO */ .trc-halt{text-align:center;padding:40px 24px;border:1px solid var(--border);margin-bottom:44px;} .trc-halt-mark{font-size:36px;color:var(--gold);margin-bottom:12px;} .trc-halt-title{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--champagne);margin-bottom:8px;} .trc-halt-sub{font-size:12px;letter-spacing:.04em;color:var(--muted);} /* ════════════════════════════════════════════════════════════════════ FAQ — design 07-2f ("ask us anything.") Two-column: sticky editorial left, bordered accordion right. ════════════════════════════════════════════════════════════════════ */ #faq-page .faq-wrap{max-width:1240px;margin:0 auto;padding:80px 48px 110px;} @media(max-width:900px){#faq-page .faq-wrap{padding:64px 24px 80px;}} @media(max-width:600px){#faq-page .faq-wrap{padding:48px 18px 64px;}} .faq-grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:80px;align-items:start;} @media(max-width:900px){.faq-grid{grid-template-columns:1fr;gap:40px;}} /* Left editorial column */ .faq-aside{position:sticky;top:120px;} @media(max-width:900px){.faq-aside{position:static;}} #faq-page .faq-eyebrow{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--gold);margin-bottom:30px;} #faq-page .faq-headline{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(56px,7vw,92px);line-height:.96;letter-spacing:-1.5px;color:var(--champagne);margin:0;} #faq-page .faq-headline em{font-style:italic;color:var(--gold);} .faq-note{margin-top:34px;font-family:'Jost',sans-serif;font-size:14px;line-height:1.7;color:var(--muted);max-width:340px;} .faq-note a{color:var(--champagne);text-decoration:underline;text-underline-offset:3px;} .faq-note a:hover{color:var(--gold);} /* Right accordion column */ .faq-main .faq-list{border:1px solid var(--champagne);margin:0;} .faq-main .faq-item{border-bottom:1px solid var(--champagne);overflow:hidden;position:relative;margin:0;background:transparent;} .faq-main .faq-item:last-child{border-bottom:none;} .faq-main .faq-item.open{box-shadow:inset 0 0 0 1px var(--champagne);} .faq-main .faq-question{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:transparent;border:none;text-align:left;padding:26px 34px;cursor:pointer;} @media(max-width:600px){.faq-main .faq-question{padding:22px 20px;}} .faq-main .fq-text{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:26px;line-height:1.2;color:var(--champagne);transition:color .2s;} @media(max-width:600px){.faq-main .fq-text{font-size:21px;}} .faq-main .faq-question:hover .fq-text{color:var(--gold);} /* Circular +/− toggle — glyph swapped via ::before content */ .faq-main .fq-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--champagne);background:transparent;font-family:'Jost',sans-serif;font-size:22px;font-weight:300;line-height:1;color:var(--champagne);transition:background .25s,border-color .25s,color .25s;} .faq-main .fq-icon::before{content:'+';display:block;transform:translateY(-1px);} .faq-main .faq-question:hover .fq-icon{border-color:var(--gold);color:var(--gold);} .faq-main .faq-item.open .fq-icon{background:var(--gold);border-color:var(--gold);color:var(--noir);transform:none;} .faq-main .faq-item.open .fq-icon::before{content:'−';transform:translateY(-2px);} /* Answer */ .faq-main .faq-answer{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s ease;} .faq-main .faq-item.open .faq-answer{opacity:1;} .faq-main .fa-inner{padding:0 34px 30px;font-family:'Jost',sans-serif;font-weight:400;font-size:14px;line-height:1.8;color:var(--muted);max-width:660px;} @media(max-width:600px){.faq-main .fa-inner{padding:0 20px 24px;font-size:13px;}} .faq-main .fa-inner strong{color:var(--champagne);font-weight:500;} .faq-main .fa-inner em{font-style:italic;color:var(--champagne);} /* ════════════════════════════════════════════════════════════════════ SHIPPING & RETURNS — design 08-2g ("getting to you.") Straight bordered cards (number top, content bottom), filled CTA. ════════════════════════════════════════════════════════════════════ */ #shipping-page .sr-wrap{max-width:1180px;margin:0 auto;padding:70px 48px 100px;} @media(max-width:600px){#shipping-page .sr-wrap{padding:48px 20px 64px;}} #shipping-page .sr-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;margin:44px 0 44px;align-items:stretch;} @media(max-width:820px){#shipping-page .sr-cards{grid-template-columns:1fr;gap:22px;}} /* straight cards — cancel the earlier tilt */ #shipping-page .sr-card, #shipping-page .sr-card:nth-child(2), #shipping-page .sr-card:nth-child(3){transform:none;} #shipping-page .sr-card{ display:flex;flex-direction:column;min-height:320px; border:1px solid var(--champagne);background:transparent;padding:38px 40px 40px; } #shipping-page .sr-card-num{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--muted);} #shipping-page .sr-card-body{margin-top:auto;} /* pin title + text to the lower area */ #shipping-page .sr-card-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:30px;line-height:1.08;color:var(--champagne);margin:0;} #shipping-page .sr-card-text{margin-top:16px;font-family:'Jost',sans-serif;font-size:14px;font-weight:400;line-height:1.7;color:var(--muted);} #shipping-page .sr-card-text a{color:var(--champagne);text-decoration:underline;text-underline-offset:2px;} /* accent (middle) card — solid orange */ #shipping-page .sr-card-accent{background:var(--gold);border-color:var(--gold);} #shipping-page .sr-card-accent .sr-card-num{color:rgba(236,228,210,.75);} #shipping-page .sr-card-accent .sr-card-title{color:#ECE4D2;} #shipping-page .sr-card-accent .sr-card-text{color:rgba(236,228,210,.9);} /* CTA bar — peach ground, filled deep-terracotta pill */ #shipping-page .sr-cta{margin:0;border:none;background:var(--camel);padding:44px 48px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;} @media(max-width:700px){#shipping-page .sr-cta{flex-direction:column;align-items:flex-start;gap:22px;padding:32px 26px;}} #shipping-page .sr-cta-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(26px,3vw,34px);color:var(--champagne);line-height:1.1;} #shipping-page .sr-cta-sub{margin-top:10px;font-family:'Jost',sans-serif;font-size:13px;color:var(--champagne);opacity:.8;} #shipping-page .sr-cta-btn{flex:none;background:var(--champagne);border:1px solid var(--champagne);color:var(--noir);border-radius:999px;padding:18px 40px;letter-spacing:.24em;} #shipping-page .sr-cta-btn span{color:var(--noir);} #shipping-page .sr-cta-btn::before{background:var(--gold);} #shipping-page .sr-cta-btn:hover span{color:var(--noir);} @media(max-width:700px){#shipping-page .sr-cta-btn{width:100%;text-align:center;}} /* ════════════════════════════════════════════════════════════════════ PRIVACY — design 09-2h ("quietly kept.") Sticky index with active scroll-spy + large editorial sections. ════════════════════════════════════════════════════════════════════ */ #privacy-page .pv-wrap{max-width:1240px;padding:72px 48px 110px;gap:90px;grid-template-columns:320px 1fr;} @media(max-width:860px){#privacy-page .pv-wrap{grid-template-columns:1fr;gap:36px;padding:56px 22px 72px;}} #privacy-page .pv-title{font-size:clamp(52px,7vw,88px);line-height:1;letter-spacing:-1.5px;color:var(--champagne);margin-top:26px;} #privacy-page .pv-title em{font-style:italic;color:var(--gold);} #privacy-page .pv-nav{margin-top:40px;gap:14px;} #privacy-page .pv-nav a{font-family:'Jost',sans-serif;font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--muted);transition:color .2s;} #privacy-page .pv-nav a:hover{color:var(--champagne);} #privacy-page .pv-nav a.active{color:var(--champagne);font-weight:500;} #privacy-page .pv-updated{margin-top:44px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);} #privacy-page .pv-content{max-width:820px;padding-top:48px;} #privacy-page .pv-sec{margin-bottom:72px;scroll-margin-top:120px;} #privacy-page .pv-sec:last-child{margin-bottom:0;} #privacy-page .pv-sec-h{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(30px,3.4vw,42px);line-height:1.1;letter-spacing:-.5px;color:var(--champagne);margin:0;} #privacy-page .pv-num{font-feature-settings:'onum' 1;font-variant-numeric:oldstyle-nums;} #privacy-page .pv-content p{margin-top:22px;font-family:'Jost',sans-serif;font-weight:400;font-size:15px;line-height:1.75;color:var(--muted);max-width:660px;} #privacy-page .pv-content strong{color:var(--champagne);font-weight:500;} #privacy-page .pv-content a{color:var(--champagne);text-decoration:underline;text-underline-offset:2px;} #privacy-page .pv-content a:hover{color:var(--gold);} /* ════════════════════════════════════════════════════════════════════ ADDED-TO-CART TOAST — design 27-4g ════════════════════════════════════════════════════════════════════ */ .cart-toast{ position:fixed;top:90px;left:24px;z-index:10001; display:flex;align-items:center;gap:18px; background:var(--noir);border:1px solid var(--champagne); padding:15px 22px;min-width:360px;max-width:calc(100vw - 48px); box-shadow:0 18px 44px var(--shadow); opacity:0;transform:translateY(-12px);transition:opacity .3s ease,transform .3s ease; } .cart-toast.show{opacity:1;transform:translateY(0);} .ct-thumb{width:58px;height:58px;flex:none;border:1px solid var(--champagne);overflow:hidden;background:repeating-linear-gradient(45deg,var(--sand) 0 8px,var(--noir) 8px 16px);} .ct-thumb.has-photo{background:var(--ombre);} .ct-thumb.is-discovery{background:repeating-linear-gradient(45deg,#D0500F 0 8px,var(--gold) 8px 16px);border-color:var(--gold);} .ct-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .ct-info{flex:1;min-width:0;} .ct-eyebrow{font-family:'Jost',sans-serif;font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);} .ct-name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:20px;line-height:1.1;color:var(--champagne);margin-top:6px;} .ct-view{flex:none;background:transparent;border:none;border-bottom:1px solid var(--champagne);padding:0 0 3px;font-family:'Jost',sans-serif;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne);cursor:pointer;transition:color .2s,border-color .2s;white-space:nowrap;} .ct-view:hover{color:var(--gold);border-color:var(--gold);} @media(max-width:520px){.cart-toast{left:16px;right:16px;min-width:0;top:80px;padding:13px 16px;gap:14px;}} /* ════════════════════════════════════════════════════════════════════ ORDER PLACED — design 25-4e (full-screen orange takeover) ════════════════════════════════════════════════════════════════════ */ .order-success-screen{ position:fixed;inset:0;z-index:20000;overflow-y:auto; background:var(--gold);color:#ECE4D2; display:flex;flex-direction:column;align-items:center;text-align:center; padding:64px 24px 90px;animation:ossIn .4s ease; } @keyframes ossIn{from{opacity:0;transform:scale(.99);}to{opacity:1;transform:none;}} .oss-sig{position:absolute;top:22px;left:50%;transform:translateX(-50%);border:1px dashed rgba(236,228,210,.5);padding:7px 16px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(236,228,210,.8);} .oss-spark{position:absolute;color:rgba(236,228,210,.5);pointer-events:none;line-height:1;} .oss-spark.s1{left:6%;top:20%;font-size:22px;transform:rotate(-12deg);} .oss-spark.s2{right:7%;top:16%;font-size:26px;opacity:.8;} .oss-spark.s3{left:12%;bottom:16%;font-size:24px;transform:rotate(14deg);} .oss-spark.s4{right:9%;bottom:24%;font-size:20px;opacity:.7;} .oss-inner{max-width:820px;width:100%;margin-top:64px;position:relative;z-index:1;} .oss-badge{width:150px;height:150px;margin:0 auto 44px;} .oss-badge svg{width:150px;height:150px;overflow:visible;} .oss-badge svg text{font-family:'Jost',sans-serif;font-size:7.5px;font-weight:500;letter-spacing:2.5px;fill:#ECE4D2;} .oss-badge svg circle{fill:#ECE4D2;} .oss-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(56px,8vw,104px);line-height:1;letter-spacing:-1.5px;color:#ECE4D2;margin:0;} .oss-title em{font-style:italic;} .oss-sub{margin-top:26px;font-family:'Jost',sans-serif;font-size:15px;line-height:1.6;color:rgba(236,228,210,.85);} .oss-card{margin:52px auto 0;max-width:800px;width:100%;background:var(--noir);color:var(--champagne);padding:34px 40px 36px;text-align:left;box-shadow:0 34px 80px rgba(120,35,5,.4);} @media(max-width:640px){.oss-card{padding:26px 22px 28px;}} .oss-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;} .oss-card-label{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne);} .oss-ships{flex:none;background:var(--gold);color:#ECE4D2;border-radius:999px;padding:8px 18px;font-family:'Jost',sans-serif;font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;} .oss-items{border:1px solid var(--border);} .oss-item{display:flex;align-items:center;gap:20px;padding:20px 22px;border-bottom:1px solid var(--border);} .oss-item:last-child{border-bottom:none;} .oss-thumb{width:64px;height:64px;flex:none;border:1px solid var(--champagne);overflow:hidden;background:repeating-linear-gradient(45deg,var(--sand) 0 8px,var(--noir) 8px 16px);} .oss-thumb.has-photo{background:var(--ombre);} .oss-thumb.is-discovery{background:repeating-linear-gradient(45deg,#D0500F 0 8px,var(--gold) 8px 16px);border-color:var(--gold);} .oss-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .oss-item-info{flex:1;min-width:0;} .oss-item-name{font-family:'Cormorant Garamond',serif;font-size:22px;line-height:1.1;color:var(--champagne);} .oss-item-name em{font-style:italic;color:var(--gold);} .oss-item-meta{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.06em;color:var(--muted);margin-top:4px;} .oss-item-price{font-family:'Jost',sans-serif;font-weight:500;font-variant-numeric:tabular-nums;font-size:15px;color:var(--champagne);white-space:nowrap;} .oss-paid{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:20px;} .oss-paid span:first-child{font-family:'Jost',sans-serif;font-size:13px;color:var(--muted);letter-spacing:.02em;} .oss-total{font-family:'Jost',sans-serif;font-weight:500;font-variant-numeric:tabular-nums;font-size:20px;color:var(--champagne);} .oss-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px;} @media(max-width:560px){.oss-actions{grid-template-columns:1fr;}} .oss-btn-primary,.oss-btn-ghost{border-radius:999px;padding:20px;font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s;} .oss-btn-primary{background:var(--champagne);border:1px solid var(--champagne);color:var(--noir);} .oss-btn-primary:hover{background:var(--gold);border-color:var(--gold);color:#ECE4D2;} .oss-btn-ghost{background:transparent;border:1px solid var(--champagne);color:var(--champagne);} .oss-btn-ghost:hover{background:var(--champagne);color:var(--noir);} /* ════════════════════════════════════════════════════════════════════ EMPTY / SOLD-OUT STATES — design 28-4h ════════════════════════════════════════════════════════════════════ */ /* Empty-cart + no-results CTA button — filled deep terracotta */ .cart-empty .btn-primary,.scents-empty .btn-primary{ background:var(--champagne)!important;border:1px solid var(--champagne)!important;color:#ECE4D2!important;border-radius:999px!important;text-decoration:none!important; } /* Kill the sliding fill overlay so the hover is a clean flat colour, not a muddy blend */ .cart-empty .btn-primary::before,.scents-empty .btn-primary::before{display:none!important;} .cart-empty .btn-primary span,.scents-empty .btn-primary span{color:#ECE4D2!important;text-decoration:none!important;} .cart-empty .btn-primary:hover,.scents-empty .btn-primary:hover{background:var(--gold)!important;border-color:var(--gold)!important;} .cart-empty .btn-primary:hover span,.scents-empty .btn-primary:hover span{color:#ECE4D2!important;} /* ── Sold-out / notify panel (orange) ──────────────────────────── */ #notify-modal-content{position:relative;padding:48px 40px 40px;transform:rotate(-2deg);text-align:left;overflow:visible;} @media(max-width:480px){#notify-modal-content{padding:40px 26px 32px;}} #notify-modal-content .nm-close{position:absolute;top:18px;right:18px;width:34px;height:34px;border:1px solid rgba(236,228,210,.5)!important;color:#ECE4D2!important;background:transparent!important;border-radius:50%!important;display:grid;place-items:center;cursor:pointer;font-size:13px;} #notify-modal-content .nm-close:hover{background:#ECE4D2!important;color:var(--gold)!important;} .nm-eyebrow{font-family:'Jost',sans-serif;font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(236,228,210,.7);margin-bottom:18px;} /* Cream sold-out sticker overhanging the top-left corner */ .nm-sticker{position:absolute;top:-15px;left:-10px;background:#ECE4D2;color:var(--champagne);padding:9px 18px;transform:rotate(-4deg);font-family:'Jost',sans-serif;font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;box-shadow:0 8px 20px rgba(120,35,5,.28);} .nm-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(32px,4.4vw,46px);line-height:1.06;letter-spacing:-.5px;color:#ECE4D2;margin:6px 0 0;} .nm-title em{font-style:italic;} .nm-sub{margin:18px 0 0;font-family:'Jost',sans-serif;font-size:14px;line-height:1.6;color:rgba(236,228,210,.85);max-width:440px;} .nm-email{margin:14px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(236,228,210,.75);} /* email + notify pill — cream input + deep-terracotta button (override Tier-1 id rules) */ #notify-modal-content .nm-form{margin-top:28px;display:flex;align-items:stretch;border:none;border-radius:999px;overflow:hidden;background:transparent;} #notify-modal-content .nm-form input{flex:1;min-width:0;background:#ECE4D2!important;border:none!important;border-radius:0!important;outline:none;color:var(--champagne)!important;font-family:'Jost',sans-serif;font-size:14px;letter-spacing:.02em;padding:19px 26px;} #notify-modal-content .nm-form input::placeholder{color:rgba(184,65,14,.5);} #notify-modal-content .nm-form button{flex:none;background:var(--champagne)!important;color:#ECE4D2!important;border:none!important;border-radius:0!important;font-family:'Jost',sans-serif;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding:0 32px;cursor:pointer;transition:background .2s,color .2s;} #notify-modal-content .nm-form button:hover{background:#ECE4D2!important;color:var(--champagne)!important;} #notify-modal-content #notify-status{margin-top:12px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.04em;min-height:14px;color:#ECE4D2;} #notify-modal-content .nm-foot{margin-top:16px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.04em;color:rgba(236,228,210,.7);} /* ════════════════════════════════════════════════════════════════════ SIZE PICKER MODAL — design 22-4b ════════════════════════════════════════════════════════════════════ */ .size-picker-overlay{ position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center; padding:32px 20px;background:rgba(184,65,14,.35);backdrop-filter:blur(3px); opacity:0;transition:opacity .3s ease;overflow-y:auto; } .size-picker-overlay.is-open{opacity:1;} .size-picker-card{ position:relative;width:100%;max-width:560px;background:var(--noir); border:1px solid var(--champagne);padding:44px 44px 34px; transform:translateY(14px) rotate(-.7deg);transition:transform .35s cubic-bezier(.2,.7,.15,1); box-shadow:0 34px 80px rgba(120,35,5,.4); } .size-picker-overlay.is-open .size-picker-card{transform:translateY(0) rotate(-.7deg);} @media(max-width:560px){.size-picker-card{padding:38px 24px 28px;transform:translateY(14px);} .size-picker-overlay.is-open .size-picker-card{transform:none;}} .sp-sticker{position:absolute;top:-14px;right:34px;background:var(--gold);color:#ECE4D2;padding:9px 18px;transform:rotate(4deg);font-family:'Jost',sans-serif;font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;box-shadow:0 8px 20px var(--shadow);} .sp-close{position:absolute;top:18px;left:18px;width:34px;height:34px;border:1px solid var(--champagne);color:var(--champagne);background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:12px;transition:background .2s,color .2s;} .sp-close:hover{background:var(--champagne);color:var(--noir);} .sp-head{display:flex;align-items:center;gap:22px;margin:8px 0 30px;} .sp-thumb{width:96px;height:96px;flex:none;border:1px solid var(--champagne);overflow:hidden;display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--sand) 0 10px,var(--noir) 10px 20px);} .sp-thumb.has-photo{background:var(--ombre);} .sp-thumb.is-discovery{background:repeating-linear-gradient(45deg,#D0500F 0 10px,var(--gold) 10px 20px);border-color:var(--gold);} .sp-thumb img{width:100%;height:100%;object-fit:contain;display:block;} .sp-shot{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);} .sp-name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:34px;line-height:1.02;color:var(--champagne);} .sp-name em{font-style:italic;color:var(--gold);} .sp-eyebrow{margin-top:8px;font-family:'Jost',sans-serif;font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);} .sp-options{display:flex;flex-direction:column;gap:14px;margin-bottom:26px;} .sp-opt{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%; background:transparent;border:1px solid var(--champagne);border-radius:999px; padding:20px 30px;cursor:pointer;text-align:left;transition:background .2s,color .2s,border-color .2s;} .sp-opt-label{font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);} .sp-opt-price{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--champagne);font-feature-settings:'onum' 1;} .sp-opt:hover{border-color:var(--gold);} .sp-opt.is-selected{background:var(--champagne);border-color:var(--champagne);} .sp-opt.is-selected .sp-opt-label,.sp-opt.is-selected .sp-opt-price{color:#ECE4D2;} .sp-opt.is-oos{border-style:dashed;border-color:var(--muted);cursor:default;} .sp-opt.is-oos .sp-opt-label{color:var(--muted);text-decoration:line-through;} .sp-opt-oos{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.02em;color:var(--gold);text-decoration:underline;text-underline-offset:2px;} .sp-add{width:100%;background:var(--gold);border:1px solid var(--gold);color:#ECE4D2;border-radius:999px; padding:22px;font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:background .25s,border-color .25s;} .sp-add:hover:not(:disabled){background:var(--champagne);border-color:var(--champagne);} .sp-add:disabled{opacity:.5;cursor:not-allowed;} .sp-foot{margin-top:18px;text-align:center;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.04em;color:var(--muted);} /* ════════════════════════════════════════════════════════════════════ WRITE A REVIEW — design 23-4c Scoped to #review-modal-content (the notify modal shares .review-modal). ════════════════════════════════════════════════════════════════════ */ .review-modal-bg.open .review-modal{transform:rotate(.6deg);} /* keep the tilt when open */ #review-modal-content{position:relative;padding:46px 46px 36px;} @media(max-width:560px){#review-modal-content{padding:36px 24px 28px;}} .wr-close{position:absolute;top:20px;right:20px;width:36px;height:36px;border:1px solid var(--champagne);color:var(--champagne);background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:13px;transition:background .2s,color .2s;} .wr-close:hover{background:var(--champagne);color:var(--noir);} .wr-eyebrow{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;} .wr-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(34px,4.4vw,46px);line-height:1.05;letter-spacing:-.5px;color:var(--champagne);margin:0 0 30px;} .wr-title em{font-style:italic;color:var(--gold);} .wr-field{margin-bottom:24px;} .wr-label{font-family:'Jost',sans-serif;font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--champagne);margin-bottom:12px;} .wr-stars{display:flex;gap:8px;} .wr-stars .star-sel{font-size:30px;line-height:1;color:var(--border);cursor:pointer;transition:color .15s,transform .15s;} .wr-stars .star-sel:hover{transform:scale(1.08);} .wr-stars .star-sel.active{color:var(--gold);} .wr-textarea{width:100%;background:transparent;border:1px solid var(--champagne);border-radius:0;color:var(--champagne);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;line-height:1.6;padding:18px 20px;resize:vertical;min-height:130px;outline:none;} .wr-textarea::placeholder{color:rgba(184,65,14,.45);font-style:italic;} .wr-textarea:focus{border-color:var(--gold);} .wr-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:22px;} @media(max-width:480px){.wr-row{grid-template-columns:1fr;gap:16px;}} .wr-input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(184,65,14,.4);border-radius:0;color:var(--champagne);font-family:'Jost',sans-serif;font-size:15px;letter-spacing:.01em;padding:9px 2px;outline:none;} .wr-input::placeholder{color:rgba(184,65,14,.4);} .wr-input:focus{border-bottom-color:var(--gold);} .wr-check{display:flex;align-items:center;gap:11px;margin-bottom:28px;font-family:'Jost',sans-serif;font-size:12px;color:var(--muted);cursor:pointer;} .wr-check input{width:17px;height:17px;accent-color:var(--gold);cursor:pointer;flex:none;} .wr-actions{display:flex;align-items:center;gap:22px;} .wr-publish{flex:1;background:var(--champagne);border:1px solid var(--champagne);color:var(--noir);border-radius:999px;padding:20px;font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:background .25s,border-color .25s;} .wr-publish:hover{background:var(--gold);border-color:var(--gold);color:#ECE4D2;} .wr-note{flex:none;font-family:'Jost',sans-serif;font-size:11px;line-height:1.35;color:var(--muted);max-width:84px;} /* Newsletter social row — Instagram / LinkedIn links inherit the cream ink */ .nl-social-row a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;} .nl-social-row a:hover{border-bottom-color:currentColor;} /* ════════════════════════════════════════════════════════════════════ NAV on the orange/terracotta full-bleed pages (creators, privée) The default nav has a cream top-gradient + terracotta ink that reads as an ugly light band on these grounds — here it goes transparent with cream ink so it blends into the page. ════════════════════════════════════════════════════════════════════ */ body:has(#creators-page.active) nav, body:has(#creators-page.active) nav.scrolled, body:has(#privee-page.active) nav, body:has(#privee-page.active) nav.scrolled, body:has(#notfound-page.active) nav, body:has(#notfound-page.active) nav.scrolled{ background:transparent !important; border-bottom:none !important; box-shadow:none !important; } /* On the orange-ground pages, swap the orange logo for the cream one */ body:has(#creators-page.active) .nav-brand .nav-logo, body:has(#privee-page.active) .nav-brand .nav-logo, body:has(#notfound-page.active) .nav-brand .nav-logo{ content:url("/logo-cream.png?v=2"); } body:has(#creators-page.active) .nav-links a, body:has(#privee-page.active) .nav-links a, body:has(#notfound-page.active) .nav-links a{ color:#ECE4D2 !important; border-color:rgba(236,228,210,.45) !important; } body:has(#creators-page.active) .nav-links a:hover, body:has(#creators-page.active) .nav-links a.active, body:has(#privee-page.active) .nav-links a:hover, body:has(#privee-page.active) .nav-links a.active, body:has(#notfound-page.active) .nav-links a:hover, body:has(#notfound-page.active) .nav-links a.active{ background:#ECE4D2 !important; color:var(--champagne) !important; border-color:#ECE4D2 !important; } body:has(#creators-page.active) .nav-cart, body:has(#privee-page.active) .nav-cart, body:has(#notfound-page.active) .nav-cart{ background:#ECE4D2 !important; color:var(--champagne) !important; border-color:#ECE4D2 !important; } body:has(#creators-page.active) .nav-cart:hover, body:has(#privee-page.active) .nav-cart:hover, body:has(#notfound-page.active) .nav-cart:hover{ background:transparent !important; color:#ECE4D2 !important; border-color:#ECE4D2 !important; } body:has(#creators-page.active) .search-btn, body:has(#privee-page.active) .search-btn, body:has(#notfound-page.active) .search-btn, body:has(#creators-page.active) .mob-cart-btn, body:has(#privee-page.active) .mob-cart-btn, body:has(#notfound-page.active) .mob-cart-btn{ color:#ECE4D2 !important; } body:has(#creators-page.active) .hamburger .bar, body:has(#privee-page.active) .hamburger .bar, body:has(#notfound-page.active) .hamburger .bar{ background:#ECE4D2 !important; } /* ════════════════════════════════════════════════════════════════════ UNIFIED FOOTER — "don't miss being missed" (uploaded design) Scoped under .hf-footer; local color tokens so it can be dropped in verbatim. Reset neutralises the site's generic footer{} grid rules. ════════════════════════════════════════════════════════════════════ */ footer.hf-footer{ display:block !important;grid-template-columns:none !important; padding:0 !important;margin:0 !important;border:none !important;gap:0 !important; max-width:none !important; --cream:#ECE4D2; --terracotta:#B8410E; --orange:#E85D1A; --camel:#D89B6A; background:var(--terracotta);color:var(--cream);overflow:hidden;position:relative; } /* newsletter = footer opening statement */ .hf-footer .hf-foot-cta{padding:110px 64px 0;position:relative;} .hf-footer .hf-eyebrow{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.35em;font-weight:500;color:rgba(236,228,210,.7);text-transform:uppercase;} .hf-footer .hf-headline{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(44px,7.8vw,92px);line-height:1.04;margin-top:22px;max-width:900px;} .hf-footer .hf-headline em{font-style:italic;display:inline-block;background:var(--orange);color:var(--cream);padding:0 .28em;transform:rotate(-2deg);} .hf-footer .hf-sentence{margin-top:44px;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;} .hf-footer .hf-sentence .word{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:34px;color:rgba(236,228,210,.85);} .hf-footer .hf-email{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:34px;background:transparent;border:0;outline:0;border-bottom:1px solid rgba(236,228,210,.5);padding:0 14px 8px;min-width:340px;color:var(--cream);} .hf-footer .hf-email::placeholder{color:rgba(236,228,210,.45);} .hf-footer .hf-email:focus{border-bottom-color:var(--cream);} .hf-footer .hf-join{background:var(--cream);color:var(--terracotta);border:0;border-radius:999px;padding:16px 36px;cursor:pointer;transform:rotate(1.5deg);font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.28em;font-weight:500;transition:background-color .18s ease,color .18s ease;} .hf-footer .hf-join:hover{background:var(--orange);color:var(--cream);} /* hairline + link columns */ .hf-footer .hf-foot-links{margin:78px 64px 0;border-top:1px solid rgba(236,228,210,.3);padding-top:52px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;} .hf-footer .hf-socials{display:flex;gap:10px;} .hf-footer .hf-social{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(236,228,210,.5);font-size:13px;cursor:pointer;color:var(--cream);text-decoration:none;transition:background-color .18s ease,color .18s ease;} .hf-footer .hf-social:hover{background:var(--cream);color:var(--terracotta);} .hf-footer .hf-col{display:flex;flex-direction:column;gap:12px;font-size:13px;font-weight:300;} .hf-footer .hf-col-title{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.3em;font-weight:500;color:var(--camel);margin-bottom:6px;text-transform:uppercase;} .hf-footer .hf-col a{color:var(--cream);text-decoration:none;} .hf-footer .hf-col a:hover{font-style:italic;} /* giant cropped ff watermark */ .hf-footer .hf-watermark-band{position:relative;margin-top:40px;overflow:hidden;} /* © row + payment pills */ .hf-footer .hf-legal{padding:26px 64px 30px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;} .hf-footer .hf-copy{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.25em;font-weight:300;color:rgba(236,228,210,.75);} .hf-footer .hf-pay{display:flex;gap:8px;} .hf-footer .hf-pay span{border:1px solid rgba(236,228,210,.4);border-radius:6px;padding:6px 12px;font-family:ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:.1em;color:rgba(236,228,210,.8);} @media(max-width:900px){ .hf-footer .hf-foot-cta{padding:72px 24px 0;} /* Shop · House · Support share one 3-across row (invisible columns); the social icons sit on their own full-width row above. Keeps the mobile footer compact instead of a long vertical stack. */ .hf-footer .hf-foot-links{margin:56px 24px 0;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:44px;} .hf-footer .hf-foot-links > div:first-child{grid-column:1 / -1;margin-bottom:22px;} .hf-footer .hf-col{gap:11px;font-size:12px;} .hf-footer .hf-col-title{margin-bottom:4px;letter-spacing:.22em;} /* Pull the "leave __ behind — JOIN" sentence together so it reads as one tight block instead of spread-out lines. */ .hf-footer .hf-sentence{margin-top:26px;gap:6px 16px;} .hf-footer .hf-sentence .word{font-size:25px;} .hf-footer .hf-email{font-size:25px;min-width:0;width:100%;padding:0 12px 6px;} .hf-footer .hf-join{padding:14px 32px;} .hf-footer .hf-legal{padding:22px 24px 26px;} } @media(max-width:400px){ .hf-footer .hf-foot-links{gap:12px;} .hf-footer .hf-col{font-size:11.5px;gap:10px;} .hf-footer .hf-col-title{font-size:9px;letter-spacing:.16em;} }