:root{ --cream:#f9f2e2; --brown:#43372D; --terra:#BC5B38; --honey-soft:#FBE397; --honey:#F2B831; --gold:#EA9A36; --noir:#0d0a06; --line:rgba(67,55,45,.14); --ink-soft:#6E6052; --sans:"Mulish",sans-serif; --serif:"Fraunces",serif; --script:"Sacramento",cursive; } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } body{ background-image:url("../img/bg.webp"); background:var(--cream); font-family:var(--sans); color:var(--cream); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ display:block; } /* Buttons */ .b{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; gap:.6em; padding:1em 1.9em; border-radius:6px; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; transition:transform .35s cubic-bezier(.16,1,.3,1), background .3s, color .3s, box-shadow .35s; cursor:pointer; border:none; } .b:hover{ transform:translateY(-2px); } .b--gold{ background:var(--honey); color:var(--brown); } .b--gold:hover{ background:var(--gold); box-shadow:0 12px 30px rgba(234,154,54,.45); } .b--out-l{ border:1px solid rgba(255,255,255,.5); color:#fff; background:transparent; } .b--out-l:hover{ background:#fff; color:var(--brown); } /* ===== HEADER ===== */ .hp-header{ position:fixed; top:0; left:0; right:0; z-index:80; transition:background .35s, box-shadow .35s, border-color .35s; border-bottom:1px solid rgba(255,255,255,.12); } .hp-nav{ max-width:1440px; margin-inline:auto; height:86px; display:flex; align-items:center; justify-content:space-between; padding-inline:clamp(20px,4vw,40px); } .hp-brand{ display:flex; align-items:center; gap:13px; color:#fff; text-decoration:none; } .hp-brand .wm{ font-family:var(--script); font-size:2.2rem; line-height:.8; padding-top:6px; width:130px; filter:grayscale(100%) brightness(5000%); } .hp-links{ display:flex; gap:2.3rem; } .hp-links a{ color:rgba(255,255,255,.9); font-size:15px; font-weight:600; letter-spacing:.015em; text-decoration:none; transition:color .25s; } .hp-links a:hover{ color:var(--honey); } .hp-icons{ display:flex; align-items:center; gap:1.1rem; } .hp-icons button,.hp-icons a{ color:#fff; position:relative; display:grid; place-items:center; width:24px; height:24px; background:transparent; border:none; cursor:pointer; text-decoration:none; } .hp-icons .cart-count{ position:absolute; top:-7px; right:-9px; min-width:17px; height:17px; background:var(--honey); color:var(--brown); border-radius:100px; font-size:0.69rem; font-weight:700; display:grid; place-items:center; padding:0 3px; } .hp-icons .hp-burger{ display:none; flex-direction:column; gap:5px; width:24px; } .hp-burger span{ width:100%; height:2px; background:#fff; border-radius:2px; } .hp-header.is-stuck{ background:rgba(255,253,248,.98); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); box-shadow:0 6px 24px rgba(67,55,45,.13); } .hp-header.is-stuck .hp-brand{ color:var(--brown); } .hp-header.is-stuck .hp-brand .wm{ filter:none; } .hp-header.is-stuck .hp-links a{ color:var(--ink-soft); } .hp-header.is-stuck .hp-links a:hover{ color:var(--terra); } .hp-header.is-stuck .hp-icons button,.hp-header.is-stuck .hp-icons a{ color:var(--brown); } .hp-header.is-stuck .hp-burger span{ background:var(--brown); } @media(max-width:1080px){ .hp-links{ display:none; } .hp-icons .hp-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:26px; height:24px; padding:0; } } @media(max-width:680px){ .hp-icons{ gap:1rem; } .hp-icons a[aria-label="Search"],.hp-icons a[aria-label="Account"]{ display:none; } } /* ===== MOBILE MENU ===== */ .mobile-menu{ position:fixed; top:0; left:0; right:0; bottom:0; background:var(--cream); z-index:90; display:none; flex-direction:column; padding:20px; } .mobile-menu.open{ display:flex; } .mm-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; } .mm-top .brand{ font-family:var(--script); font-size:1.6rem; color:var(--brown); text-decoration:none; } .close-x{ font-size:1.6rem; background:none; border:none; cursor:pointer; color:var(--brown); } .mobile-menu nav{ display:flex; flex-direction:column; gap:20px; } .mobile-menu nav a{ font-size:1.2rem; font-weight:500; color:var(--brown); text-decoration:none; } /* ======================================== CINEMATIC HERO — frame sequence on scroll ======================================== */ .hero{ position:relative; height:420vh; background:var(--noir); } .hero__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; } .hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; } /* Cinematic overlays */ .hero__vignette{ position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(125% 95% at 50% 42%, transparent 46%, rgba(13,10,6,.55) 100%); } .hero__grain{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .cinebar{ position:absolute; left:0; right:0; z-index:4; height:clamp(26px,5vh,58px); background:#000; pointer-events:none; transition:transform .7s cubic-bezier(.16,1,.3,1); } .cinebar--top{ top:0; transform:translateY(-100%); } .cinebar--bot{ bottom:0; transform:translateY(100%); } .hero.rolling .cinebar--top{ transform:translateY(0); } .hero.rolling .cinebar--bot{ transform:translateY(0); } /* CTA cluster — fades in once the tagline frame arrives */ .hero__cta{ position:absolute; left:50%; bottom:clamp(64px,13vh,132px); transform:translate(-50%,24px); z-index:6; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; opacity:0; pointer-events:none; transition:opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); } .hero__cta.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; } /* Scroll cue — visible at the very start, fades on scroll */ .hero__cue{ position:absolute; left:50%; bottom:clamp(40px,8vh,72px); transform:translateX(-50%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.6); font-size:0.69rem; letter-spacing:.26em; text-transform:uppercase; transition:opacity .5s; } .hero__cue::after{ content:''; width:1px; height:30px; background:linear-gradient(180deg,rgba(255,255,255,.7),transparent); animation:cue 2s ease-in-out infinite; } @keyframes cue{ 0%,100%{ opacity:.3; transform:scaleY(.7); } 50%{ opacity:1; transform:scaleY(1.3); } } /* Progress timeline */ .hero__timeline{ position:absolute; left:0; right:0; bottom:0; height:3px; z-index:6; background:rgba(255,255,255,.08); } .hero__timefill{ height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--honey)); box-shadow:0 0 12px rgba(242,184,49,.6); } /* Chapter ticker — small lower-left captions synced to footage */ .hero__ticker{ position:absolute; left:clamp(18px,4vw,46px); bottom:clamp(58px,11vh,120px); z-index:6; display:flex; align-items:center; gap:11px; opacity:0; transition:opacity .5s; } .hero.rolling .hero__ticker{ opacity:1; } .hero__dot{ width:8px; height:8px; border-radius:50%; background:var(--honey); box-shadow:0 0 10px rgba(242,184,49,.7); } .hero__tick{ font-family:var(--serif); font-style:italic; font-size:clamp(.85rem,1.5vw,1.1rem); color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.6); transition:opacity .4s; } /* Loader */ .loader{ position:absolute; inset:0; z-index:20; background:var(--noir); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity .9s ease; } .loader.done{ opacity:0; pointer-events:none; } .loader__mark{ font-family:var(--script); font-size:2.5rem; color:var(--honey); } .loader__bar{ width:190px; height:2px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; } .loader__fill{ height:100%; width:0; background:var(--honey); } .loader__txt{ font-size:0.69rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.4); } @media(max-width:680px){ .hero{ height:340vh; } .hero__cta{ width:calc(100% - 40px); } .hero__cta .b{ justify-content:center; } .hero__ticker{ display:none; } } .hero__cta { position: absolute; left: 50%; bottom: clamp(64px, 10vh, 132px); } @media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } /* laptop tier (~1024-1366): relieve cramping, scale oversized type/gaps */ @media (min-width:1021px) and (max-width:1366px){ .founder__grid{ gap:clamp(24px,4vw,52px); } .pola__head h2{ font-size:clamp(1.5rem,2.6vw,2.2rem); } .fpanel h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); } .cta h2{ font-size:clamp(2.2rem,min(4.6vw,8vh),3.6rem); } .tst__grid{ gap:clamp(12px,1.4vw,18px); } } /* short-viewport laptops (e.g. 1366x768): keep hero overlay layers off the baked-in copy */ @media (min-width:1021px) and (max-height:820px){ .hero__cta{ bottom:clamp(40px,9vh,96px); } .hero__cue{ bottom:clamp(26px,5vh,52px); font-size:0.69rem; } .hero__cue::after{ height:20px; } .hero__ticker{ bottom:clamp(40px,8vh,88px); } .founder__media{ height:min(520px,66vh); } .founder__panels{ min-height:clamp(320px,54vh,520px); } .fpanel h2{ font-size:clamp(1.7rem,5vh,2.5rem); margin-bottom:12px; } .fpanel p{ line-height:1.6; margin-bottom:10px; } .fpanel__sign{ font-size:1.6rem; margin:4px 0 14px; } .founder__rail{ margin-top:20px; } } /* ===== shared section furniture ===== */ .sec{ position:relative; z-index:2; } .wrap{ max-width: 1440px; margin-inline:auto; padding-inline:clamp(20px,4vw,40px); } .kicker{ font-size:0.75rem; letter-spacing:.32em; text-transform:uppercase; font-weight:700; color:var(--honey); } .reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .reveal.in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } /* ===== FOUNDER — pinned: each point switches with a ZOOM effect ===== */ .founder{ position:relative; z-index:2; height:480vh; color:var(--cream); } .founder__stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; } .founder__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,5vw,72px); align-items:center; width:100%; max-width: 1440px; margin:0 auto; } .founder__grid { background: #404A33; border: 1px solid; border-radius: 20px; } /* left media — crossfades + slow ken-burns per step */ .founder__media{ position:relative; height:min(600px,74vh); 18px 0 0 18px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); border-radius:18px 0 0 18px; } .fmedia{ position:absolute; inset:0; opacity:0; transform:scale(1.12); transition:opacity 1s ease, transform 7s linear; } .fmedia.is-active{ opacity:1; transform:scale(1); } .fmedia img{ width:100%; height:100%; object-fit:cover; object-position:center top; border-radius: 18px 0 0 18px; } .founder__media::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(13,10,6,.65), transparent 50%); border-radius: 18px 0 0 18px; } .founder__tag{ position:absolute; left:20px; bottom:20px; z-index:2; } .founder__tag span{ display:block; font-size:0.69rem; letter-spacing:.26em; text-transform:uppercase; color:var(--honey); } .founder__tag strong{ font-family:var(--serif); font-weight:400; font-size:1.4rem; color:#fff; } /* right panels — only one active; switch with a ZOOM (scale + fade) */ .founder__panels{ position:relative; min-height:clamp(380px,62vh,560px); } .fpanel{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:scale(.82); filter:blur(6px); transform-origin:left center; pointer-events:none; transition:opacity .7s ease, transform .85s cubic-bezier(.16,1,.3,1), filter .7s ease; } .fpanel.is-active{ opacity:1; transform:scale(1); filter:blur(0); pointer-events:auto; } .fpanel__kicker{ display:flex; align-items:center; gap:12px; font-size:0.69rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:var(--honey); margin-bottom:14px; } .fpanel__kicker em{ font-family:var(--serif); font-style:normal; color:rgba(255,255,255,.35); font-size:1.5rem; letter-spacing:0; } .fpanel h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,min(3.8vw,6.5vh),3rem); line-height:1.08; letter-spacing:-.01em; color:#fff; margin-bottom:16px; } .fpanel p{ color:rgba(249,242,226,.72); line-height:1.8; margin-bottom:14px; font-weight:300; max-width:52ch; } .fpanel__sign{ font-family:var(--script); font-size:1.9rem; color:var(--honey-soft); margin:6px 0 20px; } .fpanel .b{ align-self:flex-start; } /* progress rail — 4 steps */ .founder__rail{ display:flex; gap:10px; margin-top:30px; } .frail{ display:flex; flex-direction:column; gap:7px; font-size:0.69rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.35); transition:color .35s; } .frail i{ display:block; height:3px; width:46px; background:rgba(255,255,255,.14); border-radius:3px; transition:background .35s; } .frail.is-active{ color:var(--honey); } .frail.is-active i{ background:var(--honey); box-shadow:0 0 10px rgba(242,184,49,.5); } .frail.is-done i{ background:rgba(242,184,49,.45); } @media(max-width:860px){ .founder__grid{ grid-template-columns:1fr; gap:20px; align-content:center; } .founder__media{ height:30vh; } .founder__panels{ min-height:50vh; } .founder__rail{ flex-wrap:wrap; } } @media(max-width:680px){ .founder{ height:420vh; } .founder__grid{ gap:14px; padding-top:76px; } .founder__media{ height:23vh; border-radius:14px; } .founder__panels{ min-height:56vh; } .fpanel{ justify-content:flex-start; padding-bottom:34px; } .fpanel__kicker{ margin-bottom:8px; } .fpanel h2{ font-size:clamp(1.45rem,6.2vw,2rem); margin-bottom:9px; } .fpanel p{ font-size:.88rem; line-height:1.5; margin-bottom:8px; } .fpanel__sign{ font-size:1.45rem; margin:2px 0 12px; } .fpanel .b{ padding:.8em 1.4em; font-size:0.75rem; } .founder__rail{ position:absolute; left:0; right:0; bottom:0; margin-top:0; gap:8px; } } @media(max-width:480px){ .frail span{ display:none; } } /* small-mobile overflow safety (<=420px) */ @media(max-width:420px){ .founder__rail{ gap:6px; } .frail i{ width:auto; min-width:30px; } .pola__vcap{ max-width:90%; } .pola__detail{ width:min(380px,94%); } .fpanel p{ max-width:100%; } } .txtlink{ font-size:0.75rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--honey); text-decoration:none; display:inline-flex; gap:.5em; align-items:center; transition:gap .3s, color .25s; } .txtlink:hover{ gap:.9em; color:var(--honey-soft); } /* ===== POLAROID STACK — video left / scroll-revealed photo pile right ===== */ .pola{ position:relative; z-index:2; height:460vh; background:var(--noir); } .pola__stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; } /* left — looping video */ .pola__video{ position:relative; overflow:hidden; background:#000; } .pola__video video{ width:100%; height:100%; object-fit:cover; } .pola__video::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,10,6,.25), rgba(13,10,6,.55) 100%); pointer-events:none; } .pola__vcap{ position:absolute; left:clamp(20px,3vw,40px); bottom:clamp(24px,5vh,48px); z-index:2; max-width:80%; } .pola__vcap .k{ font-size:0.69rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:var(--honey); } .pola__vcap .t{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,2.4vw,2.1rem); color:#fff; line-height:1.1; margin-top:8px; text-shadow:0 2px 20px rgba(0,0,0,.6); } /* right — stage for the photo pile */ .pola__right { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 56px); background: #f9f2e2; background-image: url(../img/bg.webp); background-repeat: no-repeat; background-size: cover; background-blend-mode: color; background-color: #000000d9; background-position: center; } /* .pola__right{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(20px,4vw,56px); } */ .pola__right::before{ content:''; position:absolute; inset:0; background:radial-gradient(110% 80% at 60% 40%, rgba(242,184,49,.08), transparent 70%); pointer-events:none; } .pola__head{ position:relative; z-index:1; text-align:center; margin-bottom:clamp(16px,3vh,30px); } .pola__head .k{ font-size:0.69rem; letter-spacing:.32em; text-transform:uppercase; font-weight:700; color:var(--honey); } .pola__head h2{ font-family:var(--serif); font-weight:400; color:#fff; font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.08; margin-top:8px; } .pola__stack{ position:relative; width:min(340px,36%); aspect-ratio:4/5; } /* each polaroid */ .polaroid{ position:absolute; inset:0; background:#fdfaf3; padding:14px 14px 0; border-radius:4px; box-shadow:0 24px 50px rgba(0,0,0,.5); display:flex; flex-direction:column; transform-origin:center center; will-change:transform,opacity; } .polaroid img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; } .polaroid .cap{ font-family:var(--script); font-size:1.7rem; color:#43372D; text-align:center; padding:6px 4px 14px; line-height:1; } .polaroid .pin{ position:absolute; top:-9px; left:50%; width:14px; height:14px; border-radius:50%; background:var(--terra); box-shadow:0 2px 6px rgba(0,0,0,.4); transform:translateX(-50%); } /* pre-reveal: dropped in from above, rotated, blurred (JS-gated so it degrades gracefully) */ .js .polaroid{ opacity:0; transform:translateY(-130%) rotate(-22deg) scale(.9); filter:blur(8px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.22,1.2,.36,1), filter .7s ease; } .js .polaroid.shown{ opacity:1; filter:blur(0); transform:translate(var(--x,0), var(--y,0)) rotate(var(--r,0deg)) scale(1); } .pola__count{ position:relative; z-index:1; margin-top:clamp(14px,2.2vh,26px); font-family:var(--serif); font-style:italic; color:rgba(255,255,255,.6); font-size:.92rem; } .pola__count b{ color:var(--honey); font-style:normal; } /* product detail card — bottom of the right panel, synced to active polaroid */ .pola__detail{ position:relative; z-index:1; width:min(380px,86%); margin-top:clamp(14px,2.4vh,26px); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:clamp(14px,2vw,20px) clamp(16px,2.2vw,22px); text-align:left; backdrop-filter:blur(8px); opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); } .pola__detail.show{ opacity:1; transform:none; } .pola__detail.flip{ opacity:0; transform:translateY(8px); } /* brief fade between products */ .pd-type{ font-size:0.69rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--honey); } .pd-name{ font-family:var(--serif); font-weight:500; font-size:clamp(1.2rem,2vw,1.5rem); color:#fff; line-height:1.1; margin:5px 0 6px; } .pd-desc{ font-size:.84rem; color:rgba(255,255,255,.66); line-height:1.55; margin-bottom:14px; } .pd-meta{ display:flex; align-items:center; justify-content:space-between; gap:14px; } .pd-price{ font-family:var(--serif); font-size:1.35rem; color:var(--honey); } .pd-add{ background:var(--honey); color:var(--brown); border:none; border-radius:100px; padding:.7em 1.5em; font-size:0.69rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .25s, transform .3s, box-shadow .3s; } .pd-add:hover{ background:var(--gold); transform:translateY(-2px); box-shadow:0 10px 24px rgba(234,154,54,.4); } @media(max-width:860px){ .pola{ height:420vh; } .pola__stage{ grid-template-columns:1fr; grid-template-rows:40vh 1fr; height: 125vh; top: -220px; } .pola__stack{ width:min(280px,64%); } } @media(prefers-reduced-motion:reduce){ .js .polaroid{ transition:opacity .4s ease; transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)); filter:none; } } /* ===== shared reveal ===== */ .reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .reveal.in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .sec-wrap{ max-width: 1440px; margin-inline:auto; padding-inline:clamp(20px,4vw,40px); } .sec-kicker{ font-size:0.69rem; letter-spacing:.32em; text-transform:uppercase; font-weight:700; color:var(--honey); } /* ===== REVIEWS — cinematic pinned editorial ("the next scene in the film") ===== */ .rev{ position:relative; z-index:2; height:350vh; background:var(--cream); } .rev__stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; background: radial-gradient(120% 95% at 80% 6%, rgba(251,227,151,.55), transparent 52%), radial-gradient(90% 70% at 8% 104%, rgba(242,184,49,.14), transparent 58%), linear-gradient(180deg,#fbf5e6,#f3e8cf); } /* soft drifting sunlight */ .rev__sun{ position:absolute; top:-32%; right:-12%; width:78vmax; height:78vmax; pointer-events:none; z-index:0; background:radial-gradient(circle, rgba(255,245,208,.7), rgba(255,245,208,0) 60%); filter:blur(8px); animation:revSun 22s ease-in-out infinite alternate; } @keyframes revSun{ 0%{ transform:translate(0,0) scale(1); opacity:.85; } 100%{ transform:translate(-5vw,4vh) scale(1.1); opacity:1; } } /* very subtle floating particles */ .rev__particles{ position:absolute; inset:0; pointer-events:none; z-index:1; } .rev__particles span{ position:absolute; bottom:-4%; width:var(--sz,3px); height:var(--sz,3px); border-radius:50%; background:rgba(242,184,49,.5); box-shadow:0 0 7px rgba(242,184,49,.45); animation:revFloat var(--d,14s) linear var(--delay,0s) infinite; opacity:0; } @keyframes revFloat{ 0%{ transform:translateY(0) translateX(0); opacity:0; } 12%{ opacity:.6; } 88%{ opacity:.4; } 100%{ transform:translateY(-112vh) translateX(var(--drift,14px)); opacity:0; } } /* minimal grain */ .rev__grain{ position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.035; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; } /* persistent heading pinned at the top */ .rev__head{ position:relative; z-index:3; text-align:center; flex:0 0 auto; padding:clamp(96px,15vh,150px) 24px clamp(8px,2vh,20px); } .rev__kicker{ display:block; font-size:0.75rem; letter-spacing:.36em; text-transform:uppercase; font-weight:700; color:var(--honey); margin-bottom:14px; } .rev__title{ font-family:var(--serif); font-weight:400; color:var(--brown); letter-spacing:-.015em; line-height:1.05; margin:0; font-size:clamp(1.8rem,min(4.2vw,5.6vh),3.2rem); } .rev__title em{ font-family:var(--script); font-style:normal; color:var(--gold); font-size:1.14em; } /* stories — Variation 18 "Asymmetric Overlap": image overlaps a warm text card */ .rev__stories{ position:relative; z-index:2; flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:0 clamp(20px,5vw,64px) clamp(56px,8vh,84px); } .asym{ position:relative; display:grid; grid-template-columns:52% 48%; align-items:stretch; width:min(1060px,92vw); min-height:min(58vh,520px); } .asym__img{ position:relative; z-index:2; border-radius:18px; overflow:hidden; margin-right:-64px; box-shadow:0 30px 80px rgba(67,55,45,.24); background:var(--brown); } .asym__panel{ position:absolute; inset:0; opacity:0; transform:scale(1.07); transition:opacity 1.3s ease, transform 6.5s linear; } .asym__panel.is-active{ opacity:1; transform:scale(1); } .asym__panel img{ width:100%; height:100%; object-fit:cover; } .asym__panel::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(188,91,56,.14), transparent 55%); } .asym__box{ position:relative; z-index:1; background:#FFFDF7; border-radius:18px; box-shadow:0 20px 60px rgba(67,55,45,.1); } .asym__card{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,4vw,52px) clamp(30px,4vw,52px) clamp(30px,4vw,52px) clamp(86px,9vw,124px); opacity:0; transform:translateY(18px); filter:blur(4px); pointer-events:none; transition:opacity 1.1s ease, transform 1.2s cubic-bezier(.16,1,.3,1), filter 1.1s ease; } .asym__card.is-active{ opacity:1; transform:none; filter:blur(0); pointer-events:auto; } .asym__line{ width:3px; height:44px; background:linear-gradient(180deg,var(--honey),var(--terra)); border-radius:3px; margin-bottom:20px; } .asym__stars{ color:var(--honey); letter-spacing:3px; font-size:.92rem; margin-bottom:16px; } .asym__quote{ font-family:var(--serif); font-weight:400; color:var(--brown); line-height:1.22; letter-spacing:-.01em; margin:0 0 24px; font-size:clamp(1.35rem,2.2vw,2.15rem); } .asym__who{ display:flex; flex-direction:column; gap:6px; } .asym__name{ font-family:var(--script); font-size:clamp(1.5rem,2.4vw,2rem); color:var(--gold); line-height:1; } .asym__loc{ font-size:0.75rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); } .asym__dots{ position:absolute; left:0; right:0; bottom:clamp(26px,5vh,52px); z-index:3; display:flex; gap:10px; justify-content:center; } .asym__dot{ width:8px; height:8px; border-radius:50%; background:rgba(67,55,45,.2); transition:width .5s cubic-bezier(.16,1,.3,1), background .5s ease, border-radius .5s ease; } .asym__dot.is-active{ width:24px; border-radius:6px; background:var(--terra); } @media(prefers-reduced-motion:reduce){ .rev__sun,.rev__particles span{ animation:none; } .rev__scene,.rev__stories,.asym__card,.asym__panel{ transition:opacity .5s ease; transform:none; filter:none; } } @media(max-width:860px){ .rev__head{ padding:clamp(72px,10vh,96px) 20px 4px; } .rev__kicker{ margin-bottom:10px; } .rev__stories{ align-items:flex-start; padding-bottom:44px; } .asym{ grid-template-columns:1fr; grid-template-rows:26vh auto; min-height:auto; width:min(540px,92vw); } .asym__img{ margin-right:0; border-radius: 18px 18px 0 0; } .asym__box{ min-height:38vh; border-radius: 0 0 18px 18px; } .asym__card{ padding:clamp(24px,5.5vw,34px) 24px; } .asym__dots{ bottom:22px; } } /* ===== FOUNDER JOURNEY — founder card + thumbnails, zoom-reveal on scroll (pinned) ===== */ .wpx{ position:relative; z-index:2; height:420vh; background:#2a2418; color:var(--cream); } .wpx__stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(18px,3vh,38px); padding:clamp(36px,6vh,80px) clamp(16px,3vw,44px);} /* background:radial-gradient(95% 75% at 50% 0%, rgba(64,74,51,.32), transparent 62%), linear-gradient(180deg,#2f2e1d,#1b1e11); } */ /* the big founder card */ .wpx__card{ position:relative; width:min(1080px,94vw); height:min(560px,62vh); border-radius:22px; overflow:hidden; display:grid; grid-template-columns:53% 47%; box-shadow:0 44px 110px rgba(0,0,0,.5); flex:0 0 auto; } /* LEFT — image, zoom-reveal crossfade */ .wpx__media{ position:relative; overflow:hidden; background:#1a140d; } .wpx__frame{ position:absolute; inset:0; opacity:0; transform:scale(1.08); transition:opacity 1.1s ease, transform 1.5s cubic-bezier(.16,1,.3,1); } .wpx__frame.is-active{ opacity:1; transform:scale(1); } .wpx__frame img{ width:100%; height:100%; object-fit:cover; } .wpx__frame.is-active img{ animation:wpxKen 8s ease-out forwards; } @keyframes wpxKen{ from{ transform:scale(1.12); } to{ transform:scale(1); } } .wpx__media::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(20,16,9,.7), transparent 42%); } .wpx__cap{ position:absolute; left:clamp(18px,2vw,26px); bottom:clamp(16px,2vh,24px); z-index:2; font-size:0.69rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:rgba(249,242,226,.72); } .wpx__cap b{ display:block; font-family:var(--script); font-size:1.5rem; letter-spacing:0; color:#fff; text-transform:none; margin-top:2px; } /* RIGHT — olive editorial panel, zoom-reveal slides */ .wpx__content{ position:relative; background:linear-gradient(150deg,#454f38,#3a4330); } .wpx__slide{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:clamp(26px,3.2vw,56px); opacity:0; transform:translateY(24px) scale(.985); filter:blur(6px); pointer-events:none; transition:opacity 1s ease, transform 1.1s cubic-bezier(.16,1,.3,1), filter 1s ease; } .wpx__slide.is-active{ opacity:1; transform:none; filter:blur(0); pointer-events:auto; } .wpx__num{ display:block; font-size:0.69rem; letter-spacing:.26em; text-transform:uppercase; font-weight:800; color:var(--honey); } .wpx__slide h3{ font-family:var(--serif); font-weight:400; color:#fff; line-height:1.08; letter-spacing:-.01em; margin:12px 0 14px; font-size:clamp(1.5rem,min(2.6vw,4.4vh),2.6rem); max-width:16ch; } .wpx__slide p{ color:rgba(249,242,226,.8); line-height:1.68; font-weight:300; max-width:44ch; font-size:clamp(.92rem,1vw,1.05rem); margin:0 0 10px; } .wpx__sign{ display:block; font-family:var(--script); font-size:clamp(1.5rem,2vw,1.95rem); color:var(--honey-soft); margin:12px 0 18px; } .wpx__btn{ display:inline-flex; align-self:flex-start; } /* thumbnail navigation row */ .wpx__thumbs{ display:flex; gap:clamp(10px,1.3vw,18px); justify-content:center; flex:0 0 auto; } .wpx__thumb{ width:clamp(60px,7vw,94px); aspect-ratio:1.12; border-radius:13px; overflow:hidden; border:2px solid transparent; cursor:pointer; padding:0; opacity:.55; background:#242a19; transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1), border-color .5s ease, box-shadow .5s ease; } .wpx__thumb img{ width:100%; height:100%; object-fit:cover; } .wpx__thumb.is-active{ opacity:1; border-color:var(--honey); transform:translateY(-5px) scale(1.05); box-shadow:0 14px 34px rgba(234,154,54,.4); } @media(prefers-reduced-motion:reduce){ .wpx__frame,.wpx__slide{ transition:opacity .5s ease; transform:none; filter:none; } .wpx__frame.is-active img{ animation:none; } } @media(max-width:860px){ .wpx{ height:440vh; } .wpx__stage{ gap:clamp(12px,2vh,22px); padding:clamp(20px,4vh,40px) 16px; height: 110vh; } .wpx__card{ width:min(520px,94vw); height:min(70vh,600px); grid-template-columns:1fr; grid-template-rows:50% 60%; } .wpx__slide{ padding:20px 19px; justify-content:flex-start; } .wpx__slide h3{ font-size:20px; margin:8px 0 10px; max-width: 100%; } .wpx__slide p{ font-size:.9rem; line-height:1.5; margin-bottom:8px; } .wpx__slide p + p{ display:none; } /* keep one paragraph on small screens */ .wpx__sign{ font-size:1.35rem; margin:8px 0 12px; } .wpx__thumb{ width:clamp(52px,15vw,68px); border-radius:11px; } } /* ===== FAQ — Scene 5: full image + editorial answer + edge timeline (pinned) ===== */ .faq{ position:relative; z-index:2; height:220vh; background:var(--band); color:var(--brown); } .faq__stage{ position:sticky; top:250px; height:60vh; overflow:hidden; display:grid; grid-template-columns:46% 54%; align-items:stretch; background:linear-gradient(180deg,#f6ecd6,#f1e5c9); } /* soft sunlight vignette + handcrafted paper grain over the whole scene */ .faq__stage::after{ content:''; position:absolute; inset:0; z-index:6; pointer-events:none; background:radial-gradient(66% 60% at 72% 10%, rgba(255,247,216,.5), transparent 60%); } .faq__stage::before{ content:''; position:absolute; inset:0; z-index:6; pointer-events:none; opacity:.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:170px 170px; } /* .rev__stage { background-image: url(../img/bg.webp); background-repeat: no-repeat; background-size: cover; background-blend-mode: color; background-color: #000000c2; } */ /* LEFT — full cinematic image, slow Ken Burns crossfade */ .faq__media{ position:relative; overflow:hidden; background:var(--brown); } .faq__frame{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; } .faq__frame.is-active{ opacity:1; } .faq__frame img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); } .faq__frame.is-active img{ animation:faqKen 9s ease-out forwards; } @keyframes faqKen{ from{ transform:scale(1.14); } to{ transform:scale(1.02); } } .faq__media::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(67,55,45,.12), transparent 26%, transparent 74%, rgba(243,232,203,.92)); } /* RIGHT — editorial answer column */ .faq__panel{ position:relative; z-index:5; display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,9vh,104px) clamp(70px,7vw,120px) clamp(48px,9vh,104px) clamp(30px,4.5vw,80px); } .faq__eyebrow{ display:flex; align-items:center; gap:16px; font-size:0.75rem; letter-spacing:.34em; text-transform:uppercase; font-weight:700; color:var(--honey); margin-bottom:clamp(26px,5vh,52px); } .faq__eyebrow::after{ content:''; height:1px; width:clamp(40px,6vw,90px); background:var(--line); } /* active answer — crossfades, one at a time */ .faq__answers{ position:relative; flex:0 0 auto; min-height:clamp(230px,34vh,300px); } .faq__a{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-start; opacity:0; transform:translateY(14px); filter:blur(6px); pointer-events:none; transition:opacity 1s ease, transform 1.1s cubic-bezier(.16,1,.3,1), filter 1s ease; } .faq__a.is-active{ opacity:1; transform:none; filter:blur(0); pointer-events:auto; } .faq__ano{ font-family:var(--serif); font-size:clamp(1.4rem,2vw,1.9rem); color:var(--gold); letter-spacing:.02em; line-height:1; } .faq__q{ font-family:var(--serif); font-weight:400; color:var(--brown); line-height:1.06; letter-spacing:-.01em; margin:14px 0 20px; font-size:clamp(1.7rem,min(3vw,4.6vh),2.8rem); } .faq__text{ color:var(--ink-soft); line-height:1.8; max-width:46ch; font-size:clamp(1rem,1.05vw,1.12rem); } /* scroll-to-continue cue */ .faq__cue{ display:flex; align-items:center; gap:14px; margin-top:clamp(30px,5vh,56px); color:var(--ink-soft); font-size:0.75rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; } .faq__cue .ring{ position:relative; width:34px; height:34px; border-radius:50%; border:1px solid rgba(67,55,45,.3); flex:0 0 auto; } .faq__cue .ring::before{ content:''; position:absolute; left:50%; top:9px; width:3px; height:7px; border-radius:3px; background:var(--gold); transform:translateX(-50%); animation:faqCue 1.8s var(--ease,cubic-bezier(.16,1,.3,1)) infinite; } @keyframes faqCue{ 0%{ transform:translate(-50%,0); opacity:1; } 70%{ transform:translate(-50%,12px); opacity:0; } 100%{ opacity:0; } } /* FAR-RIGHT edge timeline (numbers only) */ .faq__timeline{ position:absolute; right:clamp(18px,2.4vw,44px); top:50%; transform:translateY(-50%); z-index:7; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(14px,2.4vh,26px); } .faq__timeline::before{ content:''; position:absolute; right:4px; top:6px; bottom:6px; width:1px; background:var(--line); } .faq__step{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap:12px; cursor:pointer; color:rgba(67,55,45,.4); transition:color .45s ease; padding-right:16px; } .faq__step::after{ content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:7px; height:1px; background:currentColor; transition:width .45s ease; } .faq__stepno{ font-family:var(--serif); font-style:italic; font-size:.82rem; letter-spacing:.06em; transition:font-size .45s ease; } .faq__stepq{ display:none; } .faq__step:hover{ color:var(--ink-soft); } .faq__step.is-active{ color:var(--terra); } .faq__step.is-active::after{ width:16px; } .faq__step.is-active .faq__stepno{ font-size:1rem; } @media(prefers-reduced-motion:reduce){ .faq__frame.is-active img{ animation:none; transform:scale(1.02); } .faq__frame,.faq__a{ transition:opacity .5s ease; } .faq__cue .ring::before{ animation:none; } } @media(max-width:860px){ .hero__cta.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .faq{ height:210vh; } .faq__stage{ grid-template-columns:1fr; grid-template-rows:32vh 1fr; align-items:start; } .faq__media{ height:32vh; align-self:stretch; } .faq__media::after{ background:linear-gradient(180deg, transparent 58%, rgba(243,232,203,.94)); } .faq__panel{ justify-content:flex-start; padding:clamp(18px,3vh,28px) 22px clamp(14px,2vh,22px); } .faq__eyebrow{ margin-bottom:clamp(14px,2.5vh,22px); } .faq__a{ justify-content:flex-start; } .faq__ano{ font-size:1.3rem; } .faq__q{ font-size:clamp(1.4rem,5.4vw,1.9rem); margin:10px 0 14px; } .faq__text{ font-size:.92rem; line-height:1.58; } .faq__answers{ min-height:clamp(224px,34vh,250px); } .faq__cue{ margin-top:14px; } /* timeline → compact bottom number strip */ .faq__timeline{ position:static; transform:none; flex-direction:row; justify-content:center; gap:16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); } .faq__timeline::before{ display:none; } .faq__step{ padding-right:0; justify-content:center; } .faq__step::after{ display:none; } .faq__stepno{ font-size:.95rem; } .faq__step.is-active .faq__stepno{ font-size:1.05rem; } } /* ===== CTA (cinematic finale) ===== */ .cta { justify-items: center; text-align: center; padding: clamp(80px, 12vh, 150px) 24px; overflow: hidden; background: var(--noir); background-image: url(../img/bg.webp); background-repeat: no-repeat; background-size: cover; background-blend-mode: color; background-color: #000000d9; background-position: center; } /* .cta{ justify-items: center; text-align:center; padding:clamp(80px,12vh,150px) 24px; overflow:hidden; background:var(--noir); } */ /* .cta__bg{ position:absolute; inset:0; z-index:0; background:url('../Hero-section/045.png') center/cover no-repeat; transform:scale(1.1); filter:brightness(.42) saturate(1.05); } */ /* .cta__bg::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 50%, rgba(13,10,6,.4), rgba(13,10,6,.92)); } */ .cta__grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E"); } .cta__in{ position:relative; z-index:2; max-width:720px; } .cta__credit{ font-size:0.69rem; letter-spacing:.4em; text-transform:uppercase; color:var(--honey); margin-bottom:18px; } .cta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(2.3rem,min(5.5vw,9vh),4.2rem); line-height:1.05; color:#fff; } .cta h2 em{ font-family:var(--script); font-style:normal; color:var(--honey-soft); } .cta p{ color:rgba(255,255,255,.78); font-weight:300; margin:18px auto 32px; max-width:46ch; } .cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .cta__badges{ position:relative; z-index:2; display:flex; gap:clamp(14px,3vw,38px); flex-wrap:wrap; justify-content:center; margin-top:clamp(40px,7vh,70px); } .cta__badges span{ font-size:0.75rem; color:rgba(255,255,255,.7); display:inline-flex; gap:8px; align-items:center; } .cta__badges i{ color:var(--honey); font-style:normal; } /* ===== FOOTER ===== */ .footer{ position:relative; z-index:2; background:#070502; color:rgba(249,242,226,.7); } .footer__top{ max-width: 1440px; margin-inline:auto; padding:clamp(48px,7vw,84px) clamp(20px,4vw,40px) 44px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; } .footer__brand{ font-family:var(--script); font-size:1.8rem; color:var(--cream); text-decoration:none; } .footer__tag{ font-family:var(--script); font-size:1.15rem; color:var(--honey-soft); margin:10px 0 18px; } .footer__soc{ display:flex; gap:14px; } .footer__soc a{ color:rgba(249,242,226,.55); transition:color .25s; } .footer__soc a:hover{ color:var(--honey); } .footer h4{ color:var(--honey); font-size:0.75rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; } .footer ul{ list-style:none; } .footer ul li{ margin-bottom:9px; } .footer ul a{ color:rgba(249,242,226,.6); text-decoration:none; font-size:.9rem; transition:color .25s; } .footer ul a:hover{ color:var(--honey); } .footer__bottom{ border-top:1px solid rgba(255,255,255,.08); } .footer__bottom div{ max-width: 1440px; margin-inline:auto; padding:20px clamp(20px,4vw,40px); display:flex; justify-content:space-between; gap:10px; font-size:.76rem; color:rgba(249,242,226,.45); flex-wrap:wrap; } @media(max-width:760px){ .footer__top{ grid-template-columns:1fr 1fr; } } @media(max-width:480px){ .footer__top{ grid-template-columns:1fr; } } /* ======================================================================== PERFORMANCE (no visual change) - Pause the reviews' perpetual sun + particle animations while off-screen (JS toggles .is-idle via IntersectionObserver). - Isolate each pinned stage's painting so scrolling one scene never repaints the others (`contain:paint` — safe: stages are overflow:hidden + positioned). ======================================================================== */ .rev.is-idle .rev__sun, .rev.is-idle .rev__particles span{ animation-play-state:paused; } .hero__sticky, .founder__stage, .pola__stage, .rev__stage, .wpx__stage, .faq__stage{ contain:paint; } /* ------------------------------------------------------------------------ FOOTER LOGO — identical brand logo to the header (same image source via tsp_brand_logo()), given the same white treatment so it reads on the dark footer exactly like the header logo reads on the dark hero. ------------------------------------------------------------------------ */ .footer__logo{ display:inline-block; line-height:0; } .footer__wm{ width:150px; max-width:70%; height:auto; filter:grayscale(100%) brightness(5000%); } /* ======================================================================== CONTENT PAGES (non-cinematic): About, Learn, single, archive, search, 404, Founder intro, and WooCommerce. These views have no dark hero, so they need readable dark-on-light text and clearance below the fixed header. ======================================================================== */ .site-main--page, .site-main--single, .site-main--archive, .site-main--search, .site-main--404, .woo-main{ max-width:var(--tsp-container,1440px); margin-inline:auto; color:var(--brown); padding:calc(86px + clamp(34px,7vh,80px)) clamp(20px,4vw,40px) clamp(56px,10vh,110px); } .page-intro{ max-width:900px; margin-inline:auto; text-align:center; padding:calc(86px + clamp(30px,6vh,70px)) clamp(20px,4vw,40px) clamp(24px,4vh,44px); } .page-article__title,.entry__title,.archive__title,.error-404__title,.page-intro__title{ font-family:var(--serif); font-weight:400; color:var(--brown); line-height:1.08; font-size:clamp(2rem,4vw,3.2rem); margin-bottom:clamp(16px,3vh,28px); } .page-article__content,.entry__content,.page-intro__content{ color:var(--ink-soft); line-height:1.8; font-size:1.05rem; max-width:74ch; } .page-intro__content{ margin-inline:auto; } .page-article__content h2,.entry__content h2,.page-intro__content h2{ font-family:var(--serif); font-weight:400; color:var(--brown); margin:1.4em 0 .5em; } .page-article__content p,.entry__content p,.page-intro__content p{ margin-bottom:1.1em; } .page-article__content a,.entry__content a,.page-intro__content a{ color:var(--terra); } .entry__meta{ color:var(--ink-soft); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-top:8px; } .entry__media{ margin:clamp(20px,4vh,36px) 0; border-radius:16px; overflow:hidden; } .entry__media img{ width:100%; height:auto; } /* card grids (blog / learn / search) */ .archive__head{ margin-bottom:clamp(20px,4vh,40px); } .archive__desc{ color:var(--ink-soft); line-height:1.7; margin-top:10px; } .archive__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(20px,3vw,34px); } .card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; } .card:hover{ transform:translateY(-4px); box-shadow:0 20px 50px rgba(67,55,45,.14); } .card__link{ text-decoration:none; color:inherit; display:block; } .card__media img{ width:100%; height:220px; object-fit:cover; } .card__title{ font-family:var(--serif); font-weight:500; color:var(--brown); font-size:1.25rem; padding:16px 18px 0; line-height:1.2; } .card__excerpt{ color:var(--ink-soft); font-size:.92rem; line-height:1.6; padding:8px 18px 18px; } .archive__empty{ color:var(--ink-soft); } .error-404{ text-align:center; max-width:640px; margin-inline:auto; } .error-404__text{ color:var(--ink-soft); line-height:1.7; margin:14px 0 26px; } /* pagination + search form */ .pagination,.nav-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:clamp(30px,5vh,50px); } .pagination .page-numbers{ display:grid; place-items:center; min-width:42px; height:42px; padding:0 12px; border-radius:10px; border:1px solid var(--line); color:var(--brown); text-decoration:none; font-weight:600; } .pagination .page-numbers.current{ background:var(--honey); border-color:var(--honey); color:var(--brown); } .search-form{ display:flex; gap:10px; margin-top:20px; justify-content:center; } .search-form .search-field{ padding:.8em 1em; border:1px solid var(--line); border-radius:10px; min-width:min(320px,70vw); font:inherit; } .search-form .search-submit{ background:var(--honey); color:var(--brown); border:none; border-radius:10px; padding:.8em 1.4em; font-weight:700; cursor:pointer; } /* ===== WooCommerce — shop + product, matched to the brand ===== */ .woo-wrap{ color:var(--brown); } .woocommerce h1,.woocommerce .woocommerce-products-header__title{ font-family:var(--serif); font-weight:400; color:var(--brown); } .woocommerce ul.products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:clamp(18px,2.4vw,30px); margin:clamp(20px,4vh,40px) 0; list-style:none; padding:0; } .woocommerce ul.products li.product{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; padding:14px; text-align:center; margin:0; width:auto !important; float:none !important; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; } .woocommerce ul.products li.product:hover{ transform:translateY(-4px); box-shadow:0 20px 50px rgba(67,55,45,.14); } .woocommerce ul.products li.product img{ border-radius:10px; margin-bottom:12px; } .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--serif); font-weight:500; color:var(--brown); font-size:1.1rem; padding:0 4px; } .woocommerce ul.products li.product .price{ color:var(--gold); font-family:var(--serif); font-size:1.2rem; } .woocommerce ul.products li.product .price del{ color:var(--ink-soft); font-size:.9rem; } .woocommerce a.button,.woocommerce button.button,.woocommerce .button,.woocommerce #respond input#submit, .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce div.product form.cart .button{ background:var(--honey); color:var(--brown); border:none; border-radius:100px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:0.75rem; padding:.85em 1.6em; cursor:pointer; transition:background .25s, transform .3s, box-shadow .3s; } .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover, .woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{ background:var(--gold); color:var(--brown); transform:translateY(-2px); box-shadow:0 10px 24px rgba(234,154,54,.4); } .woocommerce div.product .product_title{ font-family:var(--serif); font-weight:400; color:var(--brown); font-size:clamp(1.8rem,3.4vw,2.6rem); } .woocommerce div.product p.price,.woocommerce div.product span.price{ color:var(--gold); font-family:var(--serif); font-size:1.6rem; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom-color:var(--honey); } .woocommerce .woocommerce-message,.woocommerce .woocommerce-info{ border-top-color:var(--honey); } .woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{ color:var(--honey); } .woocommerce span.onsale{ background:var(--terra); color:#fff; } .woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{ color:var(--brown); } .woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--honey); border-radius:6px; color:var(--brown); } @media(max-width:680px){ .site-main--page,.site-main--single,.site-main--archive,.site-main--search,.site-main--404,.woo-main{ padding-top:calc(70px + clamp(24px,5vh,50px)); } .page-intro{ padding-top:calc(70px + clamp(24px,5vh,50px)); } } /* ===== FOOTER (accessibility + spacing) ===== Site-wide, not a homepage change. Column titles are

(were

, and an h4 with no preceding h3 broke heading order on every page). The bottom bar's text was rgba(...,.45) on #070502 = 4.12:1, under the 4.5:1 minimum for small text; .62 lifts it clear while staying quiet. Appended last so it wins over the theme's own footer rules. */ .footer__ct{ color:var(--honey); font-family:var(--sans); font-size:0.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; } .footer__col{ padding-top:4px; } .footer ul a{ display:inline-block; padding:3px 0; } .footer__bottom div{ color:rgba(249,242,226,.62); } /* Raised from the theme's 760: at 768px four columns left only ~127px each. */ @media(max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr; } } /* ===================================================================== HOMEPAGE TONAL ALTERNATION The page ran three dark sections, then two light, then two dark, then three light. It now alternates strictly: 1 hero DARK 2 founder LIGHT 3 collection DARK 4 valley LIGHT 5 journey DARK 6 standard LIGHT 7 impact DARK 8 gifting LIGHT 9 reviews DARK 10 faq LIGHT 11 cta DARK Only the two theme-side flips live here; the luxv2 sections are in lux-v2.css. No new colours - existing tokens only. ===================================================================== */ /* 2 · The founder chapter goes LIGHT. Cheap and safe: .wpx is the tall scroll track, and every word in this scene lives inside .wpx__card (its own photo plus the dark-green .wpx__content panel), so inverting the band around the card leaves all of its text untouched. */ .wpx{ background:var(--cream); color:var(--brown); } /* 9 · Reviews goes DARK. The visible surface is .rev__stage, which carries its own gradient and covers the viewport - .rev's background never shows, so the stage is what has to flip. The testimonial itself sits in the white .asym__box card, so the quote, name and location keep their own colours; only the pinned heading and the indicator dots need inverting. */ .rev__stage{ background: radial-gradient(120% 95% at 80% 6%, rgba(251,227,151,.17), transparent 52%), radial-gradient(90% 70% at 8% 104%, rgba(242,184,49,.11), transparent 58%), linear-gradient(180deg,#15100a,var(--noir)); } .rev__title{ color:#fff; } .rev__title em{ color:var(--honey-soft); } /* The sunlight wash was tuned against cream; at full strength it blows out a dark scene, and `multiply` grain is invisible on black. */ .rev__sun{ background:radial-gradient(circle, rgba(255,245,208,.24), rgba(255,245,208,0) 60%); } .rev__grain{ mix-blend-mode:screen; opacity:.05; } .asym__dot{ background:rgba(249,242,226,.26); } .asym__dot.is-active{ background:var(--honey); } /* ===================================================================== HONEYCOMB LIGHT BANDS (homepage only) Every LIGHT section shares one surface: cream base, tiled honeycomb, a warm glow from the top-right, and - critically - a cream VEIL that keeps the middle of the band calm. The veil is the readability fix. Without it the hex grid and the glow sat directly behind the section headlines and intro paragraphs (7+ text nodes measured with nothing between them and the pattern), which read as noise on the type. The veil is the topmost layer, so it softens both the comb and the glow exactly where the copy lives while leaving the texture plainly visible around the edges and corners - which is how the reference treatment reads. The tile is an inlined SVG data URI: no network request, no image bytes. Scoped to `.home`: `.luxv2-cfg` and `.faq__stage` also render on /gifting/ and elsewhere, and this is a homepage decision. ===================================================================== */ :root{ --tsp-comb: url("data:image/svg+xml,"); --tsp-comb-size: 64px 112px; /* Warm, restrained. Was .34, which washed the top of the band. */ --tsp-glow: radial-gradient(76% 60% at 92% -8%, rgba(242,184,49,.24), rgba(242,184,49,0) 62%); /* Centre-weighted cream veil - the text protection layer. Its centre is tunable per section (--tsp-veil-y), because a tall section's header sits near its top rather than its middle. Nested var() resolves against the element using --tsp-veil, so a per-section override works. */ --tsp-veil: radial-gradient(80% var(--tsp-veil-h, 78%) at 50% var(--tsp-veil-y, 46%), rgba(249,242,226,.95) 12%, rgba(249,242,226,.74) 48%, rgba(249,242,226,0) 80%); } /* Content-height light sections. Layer order is front-to-back: the veil sits ON TOP of both the glow and the comb. */ .home .luxv2-valley, .home .luxv2-trust, .home .luxv2-cfg{ background-color:var(--cream); background-image:var(--tsp-veil), var(--tsp-glow), var(--tsp-comb); background-repeat:no-repeat, no-repeat, repeat; background-size:auto, auto, var(--tsp-comb-size); background-position:center, top right, top left; } /* Pinned scenes: the comb goes on the tall scroll TRACK, but the glow and veil must sit on the sticky stage - anchored to the top of a 400vh track they would never be seen. */ .home .wpx{ background-color:var(--cream); background-image:var(--tsp-comb); background-repeat:repeat; background-size:var(--tsp-comb-size); } .home .wpx__stage{ background-image:var(--tsp-glow); background-repeat:no-repeat; background-position:top right; } /* FAQ: `.faq` is transparent (--band is never defined) so the body showed through, while .faq__stage carried its own flat gradient. Both get the same surface so the band reads as one piece, and the stage gets the veil because the answers sit inside it. */ .home .faq{ background-color:var(--cream); background-image:var(--tsp-comb); background-repeat:repeat; background-size:var(--tsp-comb-size); } .home .faq__stage{ background-color:var(--cream); background-image:var(--tsp-veil), var(--tsp-glow), var(--tsp-comb); background-repeat:no-repeat, no-repeat, repeat; background-size:auto, auto, var(--tsp-comb-size); background-position:center, top right, top left; } /* The gifting chapter was --honey-soft, a different light tone from the other three; unifying it on cream is what makes the alternation read as one system. Its own dark sub-panel is unaffected. It is also by far the tallest light band (the configurator): its heading sits at ~10% of section height and its last step legend at ~65%, so the veil is both raised and stretched to span the whole run of copy. */ .home .luxv2-cfg{ background-color:var(--cream); --tsp-veil-y:30%; --tsp-veil-h:112%; } /* Belt and braces for the two longest measures on a patterned band: a hair more weight and a tighter measure keep them crisp against the texture. */ .home .luxv2-valley__sub, .home .luxv2-trust__sub, .home .luxv2-cfg__sub{ color:var(--brown); } /* ===================================================================== FORM CONTROLS INHERIT THE BRAND TYPE Browsers do not inherit font-family into button / input / select / textarea - they get the UA default instead, which on this stack is Arial. That left real, visible text in a system font while everything around it was Mulish: the contact form's fields, the Collection's "Add to Cart", the six honey-chooser buttons in the gifting configurator, and the mobile-menu close button. Only the FAMILY is inherited. font-size / weight / letter-spacing are deliberately left alone, because several of these controls are sized against the UA default (13.33px) and inheriting size would resize them and shift layout. ===================================================================== */ button, input, select, textarea, optgroup{ font-family:inherit; } /* Placeholders and the number-spinner inherit from the field itself, but Safari needs the appearance reset restated to keep the family. */ ::placeholder{ font-family:inherit; } /* ===================================================================== TYPE SYSTEM - matched to the brand mark The header logo is a script wordmark over a geometric sans tagline. Headings were Fraunces, a display serif that echoed neither, so the page type never matched the header. Headings are now the sans at display weight, and emphasis inside a heading uses the script - which is the pattern the theme already used for .rev__title em / .cta h2 em. To go back to the serif: restore --serif below to "Fraunces",serif and revert the em rules. Fraunces' two woff2 files stay on disk untouched; once nothing references them the browser stops downloading them, so this also drops ~148 KB of webfont from every page. ===================================================================== */ :root{ --serif:"Mulish",sans-serif; } /* Display headings: the sans needs weight and tighter tracking to carry the sizes the serif used to. */ .fpanel h2, .pola__vcap .t, .pola__head h2, .cta h2, .rev__title, .card__title, .pd-name, .woocommerce h1, .woocommerce .woocommerce-products-header__title, .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-weight:700; letter-spacing:-.022em; } .faq__q{ font-weight:700; letter-spacing:-.018em; } .wpx__slide h3{ font-weight:700; letter-spacing:-.022em; } /* Pull-quote: one step lighter than a headline so it still reads as speech. */ .asym__quote{ font-weight:600; letter-spacing:-.015em; } /* Numerals and prices read better a touch lighter than the headlines. */ .faq__ano, .faq__stepno, .pola__count, .pd-price, .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price{ font-weight:600; font-style:normal; } /* ===================================================================== ANNOUNCEMENT BAR Fixed above the fixed header, on every page. z-index 85 sits above the header (80) but BELOW the mobile menu (90), so the full-screen menu still covers it. The header is position:fixed;top:0, so it has to be pushed down by exactly the bar's height or it would sit on top of it. That offset is --tspbar-h, and the bar's height is pinned per breakpoint so the number is deterministic rather than measured at runtime by JS. ===================================================================== */ :root{ --tspbar-h:38px; } .tspbar{ position:fixed; top:0; left:0; right:0; z-index:85; height:var(--tspbar-h); display:flex; align-items:center; justify-content:center; background:var(--brown); color:var(--cream); border-bottom:1px solid rgba(249,242,226,.14); } .tspbar__in{ display:flex; align-items:center; justify-content:center; gap:8px 14px; flex-wrap:nowrap; margin:0; padding:0 clamp(12px,4vw,40px); font-family:var(--sans); font-size:.76rem; font-weight:500; letter-spacing:.04em; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tspbar__txt strong{ color:var(--honey); font-weight:700; } .tspbar__link{ color:var(--honey); text-decoration:none; font-weight:700; border-bottom:1px solid currentColor; padding-bottom:1px; flex:0 0 auto; } .tspbar__link:hover{ color:#fff; } /* Push the fixed header below the bar. */ .hp-header{ top:var(--tspbar-h); } /* In-page anchors (#faq, #cta …) must clear the bar AND the header, or the target lands underneath both. 86px is the .hp-nav height. */ html{ scroll-padding-top:calc(var(--tspbar-h) + 86px); } @media(max-width:680px){ :root{ --tspbar-h:34px; } .tspbar__in{ font-size:0.75rem; letter-spacing:.02em; gap:6px 10px; } html{ scroll-padding-top:calc(var(--tspbar-h) + 68px); } } @media(max-width:380px){ .tspbar__in{ font-size:0.69rem; } } /* Google reviews link in the reviews head. */ .rev__google{ display:inline-flex; align-items:center; gap:9px; margin:clamp(14px,2.4vh,22px) 0 0; padding:9px 16px; min-height:40px; border-radius:100px; background:rgba(255,255,255,.9); border:1px solid rgba(67,55,45,.14); font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.04em; color:var(--brown); text-decoration:none; transition:background .25s, border-color .25s, transform .3s cubic-bezier(.16,.84,.44,1); } .rev__google:hover{ background:#fff; border-color:rgba(67,55,45,.3); transform:translateY(-2px); } .rev__googleicon{ display:inline-flex; line-height:0; } @media(prefers-reduced-motion:reduce){ .rev__google:hover{ transform:none; } } /* ===================================================================== FAQ REFINEMENT --------------------------------------------------------------------- 1 · The answers slide in from the RIGHT as you scroll, instead of the old vertical fade + 6px blur (the blur softened the type badly mid-transition). Only the horizontal axis moves, so the eye tracks one direction. Because pinnedScene() keeps exactly one `.is-active` at a time, the outgoing answer leaves back to the right as the incoming one arrives — the motion stays on the right-hand side, and it reads the same scrolling up or down. 2 · The stage was pinned at a hard-coded `top: 250px`, chosen before the announcement bar existed. With the bar the fixed chrome is ~124px, so the panel had 125px of air above it and only 70px below (130/75 on mobile) and sat noticeably low. It is now centred in the area beneath the chrome: for a 60vh stage that is `chrome/2 + 20vh`, which stays balanced at any viewport height and self-corrects if the bar height changes or the bar is removed entirely. ===================================================================== */ /* --- 1 · slide in from the right ------------------------------------- */ .faq__a{ transform:translateX(var(--faq-slide, 64px)); filter:none; transition:opacity .55s ease, transform .85s cubic-bezier(.16,.84,.44,1); } .faq__a.is-active{ transform:translateX(0); filter:none; } /* The answers are absolutely stacked inside a clipped stage, but make the clipping explicit so a sliding panel can never peek outside the frame. */ .faq__answers{ overflow:hidden; } /* --- 2 · centre the pinned stage under the fixed chrome -------------- */ .faq__stage{ top:calc((var(--tspbar-h, 0px) + 86px) / 2 + 20vh); } @media(max-width:860px){ /* Shorter travel on a narrow column so the slide reads as a slide rather than a swipe across the whole screen. */ .faq__a{ --faq-slide:38px; } } @media(prefers-reduced-motion:reduce){ .faq__a{ transform:none; transition:opacity .3s ease; } } /* ===================================================================== FAQ REBUILT ON THE REVIEWS LAYOUT --------------------------------------------------------------------- The FAQ was a 60vh panel floating in empty cream with a column of tiny italic numbers pinned to the right edge. The reviews section is a full-viewport pinned stage holding a photo that overlaps a white card, with pill dots centred at the bottom. This gives the FAQ that same anatomy, using only CSS — the markup is untouched, so pinnedScene() in theme.js keeps stepping the three groups exactly as before. .faq__stage -> full-bleed pinned stage (was 60vh at top:222px) .faq__media -> photo that overlaps the card (like .asym__img) .faq__panel -> the white card (like .asym__box) .faq__q -> the big changing serif line (like .asym__quote) .faq__timeline -> pill dots, bottom centre (was a right-edge rail) ===================================================================== */ /* Track lengthened so the pin still gives ~32vh of scroll per answer now that the stage is 100vh rather than 60vh (220vh would have been 24vh). */ .faq{ height:260vh; } /* --- the stage: full-viewport pin, like .rev__stage ------------------- */ .faq__stage{ top:0; height:100vh; /* Gutter grid: flexible edges with a capped two-column block centred between them, which is how .asym gets its min(1060px,92vw) width without needing a wrapper element. */ grid-template-columns:1fr min(552px,48vw) min(508px,44vw) 1fr; align-content:center; align-items:stretch; padding:clamp(80px,12vh,140px) clamp(16px,4vw,48px) clamp(64px,10vh,96px); } .faq__media{ grid-column:2; } .faq__panel{ grid-column:3; } /* --- the photo, overlapping the card (mirrors .asym__img) ------------- */ .faq__media{ z-index:2; border-radius:18px; margin-right:-64px; box-shadow:0 30px 80px rgba(67,55,45,.24); min-height:min(58vh,520px); } /* --- the white card (mirrors .asym__box) ----------------------------- */ .faq__panel{ z-index:1; background:#FFFDF7; border-radius:18px; box-shadow:0 20px 60px rgba(67,55,45,.1); min-height:min(58vh,520px); justify-content:center; /* Extra left padding clears the photo's -64px overlap, same as .asym__card does. */ padding:clamp(30px,4vw,52px) clamp(30px,4vw,52px) clamp(30px,4vw,52px) clamp(86px,9vw,124px); } /* --- pill dots at the bottom (mirrors .asym__dots) -------------------- */ .faq__timeline{ position:absolute; left:0; right:0; top:auto; bottom:clamp(26px,5vh,52px); transform:none; z-index:7; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px; } .faq__timeline::before{ display:none; } .faq__step{ width:8px; height:8px; padding:0; gap:0; border-radius:50%; background:rgba(67,55,45,.2); justify-content:center; transition:width .5s cubic-bezier(.16,1,.3,1), background .5s ease, border-radius .5s ease; } .faq__step::after{ display:none; } .faq__step.is-active{ width:24px; border-radius:6px; background:var(--terra); } .faq__step:hover{ background:rgba(67,55,45,.42); } /* The step number is the dot's only label, so it is clipped rather than display:none — a display:none dot would leave these click targets with no accessible name at all. */ .faq__step .faq__stepno, .faq__step .faq__stepq{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* The cue would collide with the dots now that both sit at the bottom. */ .faq__cue{ display:none; } /* --- narrow screens: stack, photo above the card --------------------- */ @media(max-width:860px){ .faq__stage{ grid-template-columns:1fr; grid-template-rows:min(30vh,260px) 1fr; align-content:center; padding:clamp(70px,11vh,110px) clamp(16px,5vw,28px) clamp(64px,9vh,88px); } .faq__media{ grid-column:1; grid-row:1; margin-right:0; margin-bottom:-44px; min-height:0; } .faq__panel{ grid-column:1; grid-row:2; min-height:0; padding:clamp(58px,8vw,72px) clamp(22px,5vw,30px) clamp(26px,4vw,34px); } } /* ===================================================================== FAQ LAYOUT 2 — full-bleed backdrop, centred column, titled --------------------------------------------------------------------- Supersedes the side-by-side card above (that block is left in place so reverting is a matter of deleting this one). .faq__media -> full-bleed photo backdrop, veiled back to cream .faq__head -> eyebrow + section title, pinned above the answers .faq__panel -> one centred column, no card chrome .faq__timeline -> pill dots, bottom centre (unchanged) The veil is centre-weighted, so the photograph stays visible around the edges while the type sits on near-solid cream. Same technique as the honeycomb veil, and it is what keeps the band light rather than dark. ===================================================================== */ .faq__stage{ display:block; padding:0; } /* --- the photo becomes the backdrop --------------------------------- */ .faq__media{ position:absolute; inset:0; z-index:0; min-height:0; margin:0; border-radius:0; box-shadow:none; background:var(--cream); } .faq__media::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background: radial-gradient(76% 60% at 50% 46%, rgba(249,242,226,.98) 34%, rgba(249,242,226,.93) 62%, rgba(249,242,226,.60) 100%), linear-gradient(180deg, rgba(249,242,226,.62), rgba(249,242,226,.78)); } /* --- title, pinned above the stepping answers ----------------------- */ .faq__head{ position:relative; z-index:3; text-align:center; padding:clamp(76px,12vh,140px) clamp(20px,5vw,48px) 0; } .faq__eyebrow{ justify-content:center; margin-bottom:14px; /* Was gold (#F2B831): fine on the old dark-ish card, but on the cream veil it measured 1.57:1 — invisible. This is the brand terracotta taken a few steps darker: --terra itself only reached 3.91:1, and the eyebrow is 11px uppercase, so it needs the full 4.5:1 rather than the large-text threshold. */ color:#8F3D22; } .faq__eyebrow::after{ display:none; } .faq__title{ font-family:var(--serif); font-weight:700; color:var(--brown); letter-spacing:-.022em; line-height:1.05; margin:0; font-size:clamp(1.8rem,min(4.2vw,5.6vh),3.2rem); } /* Matches .rev__title em — the emphasised word takes the script face. */ .faq__title em{ font-family:var(--script); font-style:normal; font-weight:400; color:var(--gold); font-size:1.14em; } /* --- one centred column, card chrome removed ------------------------ */ .faq__panel{ position:relative; z-index:2; background:none; box-shadow:none; border-radius:0; min-height:0; max-width:min(720px,92vw); margin-inline:auto; text-align:center; justify-content:flex-start; padding:clamp(22px,3.6vh,40px) clamp(20px,5vw,40px) 0; } .faq__answers{ min-height:clamp(250px,32vh,330px); } .faq__a{ align-items:center; } .faq__ano{ display:block; margin-bottom:6px; } .faq__text{ margin-inline:auto; } @media(max-width:860px){ .faq__head{ padding-top:clamp(68px,10vh,110px); } .faq__answers{ min-height:clamp(260px,36vh,340px); } /* The earlier stacked-card rules still target .faq__media on narrow screens and left the backdrop 260px tall instead of filling the stage. Restate the full-bleed geometry so it wins here too. */ .faq__media{ position:absolute; inset:0; grid-column:auto; grid-row:auto; width:auto; height:auto; min-height:0; max-height:none; margin:0; } .faq__panel{ grid-column:auto; grid-row:auto; padding:clamp(20px,3.2vh,34px) clamp(20px,5vw,30px) 0; } } /* ===================================================================== FAQ LAYOUT 3 — split stage: photo left, questions right --------------------------------------------------------------------- Supersedes the two earlier FAQ layout blocks above (side-by-side card, then full-bleed backdrop). Those are left in place because this block only has to override the properties it actually changes; deleting this block reverts to the backdrop layout. .faq__media -> full-height photo, bleeding off the left edge .faq__head -> eyebrow + title, top of the right column .faq__panel -> the stepping answers, under the title .faq__timeline -> pill dots, aligned with the right column's text Grid, not flex, because the right column is two separate stage children (head and panel) that must share one column and split the height: the title takes what it needs, the answers take the rest. ===================================================================== */ .faq__stage{ display:grid; grid-template-columns:minmax(0,46%) minmax(0,1fr); /* Title sized to content, answers absorb the remaining height. */ grid-template-rows:auto minmax(0,1fr); align-content:stretch; align-items:stretch; gap:0; padding:0; /* the photo has to reach the viewport edge */ } /* --- the photo, filling the left half ------------------------------- */ .faq__media{ position:relative; inset:auto; grid-column:1; grid-row:1 / span 2; /* full height, alongside both right rows */ z-index:0; width:auto; height:auto; min-height:0; max-height:none; margin:0; border-radius:0; box-shadow:none; overflow:hidden; } /* No cream veil now — nothing is set over the photo, so it shows at full strength. What is left is a soft inner shading that stops the image ending in a hard bright line against the cream column. */ .faq__media::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(90deg, rgba(67,55,45,.22), rgba(67,55,45,0) 38%), linear-gradient(180deg, rgba(67,55,45,.12), rgba(67,55,45,.05)); } /* --- right column: title above, answers below ----------------------- */ .faq__head{ position:relative; z-index:3; grid-column:2; grid-row:1; text-align:left; padding:clamp(70px,11vh,128px) clamp(26px,4.4vw,64px) 0; } .faq__eyebrow{ justify-content:flex-start; } .faq__title{ /* Half the width to work in, so the ceiling comes down a step. */ font-size:clamp(1.7rem,min(3.4vw,5vh),2.8rem); } .faq__panel{ position:relative; z-index:2; grid-column:2; grid-row:2; background:none; box-shadow:none; border-radius:0; max-width:none; min-height:0; margin:0; text-align:left; justify-content:flex-start; padding:clamp(18px,3vh,34px) clamp(26px,4.4vw,64px) clamp(88px,12vh,116px); } /* The answers are absolutely stacked, so this box has no content height of its own — and .faq__answers is overflow:hidden, so at height 0 every answer would be clipped away. It takes the leftover height of the panel instead. */ .faq__panel{ display:flex; flex-direction:column; } .faq__answers{ flex:1 1 auto; min-height:clamp(200px,26vh,300px); position:relative; } .faq__a{ align-items:flex-start; } .faq__text{ margin-inline:0; } /* --- dots, aligned with the right column's text, not the viewport --- */ .faq__timeline{ left:46%; right:0; justify-content:flex-start; padding-left:clamp(26px,4.4vw,64px); bottom:clamp(30px,5vh,56px); } /* --- narrow screens: photo on top, column beneath ------------------- */ @media(max-width:860px){ .faq__stage{ grid-template-columns:minmax(0,1fr); grid-template-rows:clamp(190px,26vh,270px) auto minmax(0,1fr); } /* inset:auto is restated because layout 2's own mobile rule sets inset:0, and it would otherwise still apply here. */ .faq__media{ grid-column:1; grid-row:1; position:relative; inset:auto; } .faq__media::after{ /* Shading rotates with the layout: the seam is now the bottom edge. */ background: linear-gradient(180deg, rgba(67,55,45,.14) 0%, rgba(67,55,45,0) 40%, rgba(67,55,45,.20) 100%); } .faq__head{ grid-column:1; grid-row:2; padding:clamp(26px,4.5vh,40px) clamp(20px,5.5vw,32px) 0; } .faq__panel{ grid-column:1; grid-row:3; padding:clamp(14px,2.4vh,24px) clamp(20px,5.5vw,32px) clamp(76px,10vh,96px); } .faq__timeline{ left:0; right:0; justify-content:center; padding-left:0; } } /* ===================================================================== FAQ LAYOUT 4 — contained photo, capped content block --------------------------------------------------------------------- Sizing/containment pass over layout 3 above. The split stays (photo left, questions right) and so does the animation; what changes is that the photo stops being a full-bleed slab and becomes a card, and the whole stage is capped and centred instead of running edge to edge. Matches the rest of the page: same min(1080px,92vw) content cap as the reviews scene, same 18px radius, same shadow family. The photo is now about a third of its old area. ===================================================================== */ .faq__stage{ /* Gutter grid: flexible edges, two capped columns centred between them. Same technique as .asym — it caps and centres the block without needing a wrapper element the markup does not have. */ grid-template-columns:1fr minmax(0,min(408px,34vw)) minmax(0,min(516px,44vw)) 1fr; /* Both rows content-sized, NOT `auto minmax(0,1fr)`: a 1fr row absorbs every spare pixel, which made the answers box 546px tall to hold 259px of text and left the block sitting 160px from the top and 88px from the bottom. Content-sized rows let align-content:center actually centre. */ grid-template-rows:auto auto; align-content:center; column-gap:clamp(26px,3.2vw,52px); padding:clamp(64px,9vh,104px) clamp(20px,4vw,48px) clamp(84px,11vh,112px); } /* --- the photo, now a contained card -------------------------------- */ .faq__media{ grid-column:2; grid-row:1 / span 2; /* Stretches to the right column's height. That was what made it a slab in layout 3 only because the column was `1fr` and therefore as tall as the viewport; now the column is content-sized (~460px), so stretching is what keeps the two sides an exactly matched pair at every width, with no hand-tuned height to drift out of sync. */ align-self:stretch; width:100%; height:auto; min-height:240px; border-radius:18px; box-shadow:0 24px 60px rgba(67,55,45,.18); } /* Contained now, so it no longer needs an edge-blend on the left — just a light top-to-bottom shading to keep the image from going flat. */ .faq__media::after{ background:linear-gradient(180deg, rgba(67,55,45,.10), rgba(67,55,45,.04)); } /* --- right column --------------------------------------------------- */ .faq__head{ grid-column:3; grid-row:1; padding:0 0 clamp(10px,1.8vh,20px); } .faq__panel{ grid-column:3; grid-row:2; padding:0; } /* This is the answers box's real height now, and .faq__answers is overflow:hidden, so the floor has to clear the tallest answer. Measured worst case is 264px just above the 861px breakpoint, where the column is at its narrowest and the text wraps most; 300px leaves headroom for a longer answer being added later. The vh term is also what sets how much of the pinned stage the whole block fills. At 34vh it came to 45% of the viewport, against 58% for the reviews scene (.asym is min(58vh,520px)) — noticeably emptier than its neighbour. 42vh brings the block to the same proportion. */ .faq__answers{ flex:0 0 auto; min-height:clamp(300px,42vh,400px); } /* --- dots centred on the stage, as in the reviews scene -------------- */ .faq__timeline{ left:0; right:0; justify-content:center; padding-left:0; } /* --- narrow screens: contained card on top, column beneath ---------- */ @media(max-width:860px){ .faq__stage{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; align-content:center; padding:clamp(58px,8vh,92px) clamp(20px,5.5vw,32px) clamp(80px,10vh,100px); } .faq__media{ grid-column:1; grid-row:1; align-self:auto; height:clamp(180px,23vh,240px); min-height:0; margin-bottom:clamp(20px,3.4vh,30px); } .faq__head{ grid-column:1; grid-row:2; padding:0 0 clamp(8px,1.4vh,16px); } .faq__panel{ grid-column:1; grid-row:3; padding:0; } /* 26vh resolved to 211px on a 375x812 phone against 215px of content, so the tallest answers were cropped by 4px. Floor raised with headroom for the extra wrapping on a 320px-wide phone. */ .faq__answers{ min-height:clamp(265px,32vh,330px); } } /* --- short phones: the vertical budget genuinely runs out ------------ */ /* At 320x568 the stacked block came to 575px inside a 530px budget (stage height less the dots), so the answers ran over the dots. The answer text cannot shrink — it is the content — so the photo and the paddings give up the room instead. Keyed on height as well as width: a 375x812 phone has no problem and should keep the larger photo. */ @media (max-width:860px) and (max-height:700px){ .faq__stage{ padding-top:clamp(40px,6vh,58px); padding-bottom:clamp(60px,9vh,80px); } .faq__media{ height:clamp(120px,17vh,150px); margin-bottom:clamp(14px,2.2vh,20px); } .faq__head{ padding-bottom:clamp(6px,1.2vh,12px); } .faq__answers{ min-height:clamp(245px,44vh,290px); } } /* ===================================================================== PRIMARY NAV DROPDOWNS (tsp_tree_menu) --------------------------------------------------------------------- The header bar was a flat row of anchors. The client's site map nests Shop, Collaborate and Our Story, so top-level items with children now render as .hp-navi with a .hp-sub panel. Opens on :hover AND :focus-within — the second is what makes it work for keyboard users, since there is no JavaScript involved. The panel is visibility:hidden rather than display:none so the transition runs and so it stays out of the tab order while closed. The third level (Skincare > Lip Balm, Soap) is an indented group inside the same panel, not a nested flyout. ===================================================================== */ .hp-navi{ position:relative; display:inline-flex; align-items:center; } .hp-navi__top{ display:inline-flex; align-items:center; gap:5px; } .hp-navi__chev{ transition:transform .28s ease; opacity:.6; flex:none; } .hp-navi:hover .hp-navi__chev, .hp-navi:focus-within .hp-navi__chev{ transform:rotate(180deg); opacity:1; } .hp-sub{ position:absolute; top:100%; left:50%; transform:translate(-50%,6px); display:flex; flex-direction:column; min-width:232px; padding:12px; margin-top:10px; background:#FFFDF7; border:1px solid rgba(67,55,45,.1); border-radius:16px; box-shadow:0 26px 60px rgba(67,55,45,.16); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .26s ease, transform .32s cubic-bezier(.16,.84,.44,1), visibility .26s; z-index:80; } /* Bridges the 10px gap so the pointer can travel from the trigger into the panel without it closing underneath. */ .hp-sub::before{ content:''; position:absolute; left:0; right:0; top:-12px; height:12px; } .hp-navi:hover .hp-sub, .hp-navi:focus-within .hp-sub{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); } .hp-sub__link{ display:block; padding:9px 12px; border-radius:9px; font-size:.86rem; line-height:1.35; letter-spacing:.01em; text-transform:none; white-space:nowrap; color:var(--brown); transition:background .2s ease, color .2s ease; } .hp-sub__link:hover, .hp-sub__link:focus-visible{ background:rgba(242,184,49,.16); color:var(--terra); } .hp-sub__grp{ display:flex; flex-direction:column; margin-top:4px; padding-top:4px; border-top:1px solid rgba(67,55,45,.09); } .hp-sub__link--head{ font-weight:700; } .hp-sub__link--deep{ padding-left:26px; opacity:.86; font-size:.82rem; } /* --- off-canvas panel: no hover, children always shown ---------------- */ .hp-navi--panel{ display:block; width:100%; } .hp-navi--panel .hp-navi__chev{ display:none; } .hp-navi--panel .hp-sub{ position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto; min-width:0; margin:0 0 6px; padding:0 0 0 14px; background:none; border:0; border-left:1px solid rgba(249,242,226,.18); border-radius:0; box-shadow:none; } .hp-navi--panel .hp-sub::before{ content:none; } .hp-navi--panel .hp-sub__link{ white-space:normal; color:inherit; opacity:.8; } .hp-navi--panel .hp-sub__link--deep{ padding-left:22px; } /* Below the desktop bar the header collapses to the burger, so the dropdown would never be reachable by touch — the off-canvas panel handles it. */ @media (max-width:900px){ .hp-navi{ position:static; } } /* ===================================================================== SITE CONTAINER + RHYTHM (single source of truth) --------------------------------------------------------------------- The audit found 66 different max-width declarations across 10 stylesheets. Every section now shares ONE container width so content lines up from page to page instead of drifting between 720px and 1240px. Two separate ideas, deliberately not conflated: --tsp-container 1440px the SECTION shell (what the client asked for) --tsp-measure 68ch the TEXT line length inside it Widening the shell without capping the measure would give 1440px-long lines of body copy, which is unreadable — so the shell grows and the prose stays at a comfortable measure inside it. ===================================================================== */ :root{ --tsp-container:1440px; --tsp-gutter:clamp(20px,4vw,64px); --tsp-measure:68ch; } /* --- the section shell ---------------------------------------------- */ .wrap, .sec-wrap, .story-panel__inner, .luxshop, .luxshop-hero__inner, .luxshop-trust__inner, .luxshop-finder__inner, .luxshop-compare__inner, .luxshop-faq__inner, .luxv2-fin__inner, .luxv2-phi__wrap, .rev__head, .cta__inner, .footer__inner{ max-width:var(--tsp-container); margin-left:auto; margin-right:auto; padding-left:var(--tsp-gutter); padding-right:var(--tsp-gutter); box-sizing:border-box; width:100%; } /* --- text measure inside the wider shell ---------------------------- */ .story-panel__inner > p, .story-sub, .story-copy, .luxshop-hero__sub, .rev__head p{ max-width:var(--tsp-measure); } /* Centred panels keep their copy centred; left-aligned ones do not get yanked to the middle. */ .story-panel__inner{ margin-inline:auto; } .story-panel__inner > p{ margin-inline:auto; } .story-panel--split .story-panel__inner > p{ margin-inline:0; } /* ===================================================================== TONE ALTERNATION GUARD The brief is: never two consecutive sections with the same background. Rather than hand-checking every page, adjacent same-tone siblings are corrected here with :has()/sibling selectors, so a section that follows one of its own tone is nudged to the alternate band. ===================================================================== */ /* A cream panel directly after a cream panel becomes white. */ .story-panel--cream + .story-panel--cream{ background:#FFFDF7; } /* ...and a third in a row goes back to cream, so runs read L-W-L. */ .story-panel--cream + .story-panel--cream + .story-panel--cream{ background:var(--cream); } /* Two dark panels in a row: the second takes the honey-gradient band so the seam is still visible. */ .story-panel--dark + .story-panel--dark{ background:linear-gradient(160deg,#1a1409 0%,#2b2114 55%,#3a2c17 100%); } /* ===================================================================== ONE TYPEFACE, EVERY PAGE --serif already resolves to Mulish site-wide. The remaining divergence was --script (Sacramento), used for the emphasised word in section titles. It stays on the HOME page, which is the approved identity, and is unified to the site face everywhere else so no interior page shows a different family. ===================================================================== */ /* Site chrome — footer tagline and the text wordmark in the off-canvas menu — is unified EVERYWHERE, home included. Scoping it to interior pages only would have made the footer render in a different face on the homepage than on every other page, which is a worse inconsistency than the one being fixed. */ .footer__tag, .mobile-menu .brand{ font-family:var(--serif); font-style:normal; } /* Section accents: the Sacramento script stays on the HOME page, which is the approved identity, and resolves to the site face on every interior page. `em` inside any heading is targeted rather than a hand-kept list of title classes, because the reused homepage sections (lux-trust, lux-impact) put their accent in .luxv2-* headings that a list kept missing. */ body:not(.home) :is(h1,h2,h3,h4) em, body:not(.home) .story-title em, body:not(.home) .faq__title em, body:not(.home) .rev__title em{ font-family:var(--serif); font-style:italic; font-size:1em; color:var(--honey); } /* ===================================================================== WOOCOMMERCE PAGE LAYOUT — Cart, Checkout, Account --------------------------------------------------------------------- These render through the default page template, so their content sat inside `.page-article__content { max-width: 74ch }` — a ~660px reading column. The block Cart and Checkout are two-column layouts that need the full shell, which is why the cart looked squeezed into the middle of the screen. Fix is scoped by body class so the 74ch measure is preserved for actual prose pages, where it is correct. ===================================================================== */ .woocommerce-cart .page-article__content, .woocommerce-checkout .page-article__content, .woocommerce-account .page-article__content, .woocommerce-cart .page-article, .woocommerce-checkout .page-article, .woocommerce-account .page-article{ max-width:none; width:100%; font-size:1rem; } /* The page title above a cart is redundant with the block's own heading and was eating vertical space at the top of the funnel. */ .woocommerce-cart .page-article__head, .woocommerce-checkout .page-article__head{ margin-bottom:clamp(18px,3vh,32px); } /* Give the block layout real breathing room and let the two columns sit side by side at the shell width. */ .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout{ max-width:var(--tsp-container,1440px); margin-inline:auto; } .wc-block-cart, .wc-block-checkout{ width:100%; } /* Cart/checkout side panel: make the order summary read as a card in the brand rather than an unstyled column. */ .wc-block-cart__sidebar > .wc-block-components-sidebar, .wc-block-checkout__sidebar > .wc-block-components-sidebar, .wc-block-components-sidebar{ background:#FFFDF7; border:1px solid rgba(67,55,45,.1); border-radius:18px; padding:clamp(20px,2.6vw,32px); box-shadow:0 18px 44px rgba(67,55,45,.08); } /* Woo block buttons inherit the brand button shape instead of the default square block style. */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-button:not(.is-link){ border-radius:100px; font-family:var(--sans); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.76rem; padding:1.05em 2.2em; background:var(--honey); color:var(--brown); border:1px solid transparent; } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover{ background:var(--terra); color:#fff; } /* Product titles and prices in the cart pick up the site face/scale. */ .wc-block-components-product-name{ font-family:var(--serif); font-weight:700; color:var(--brown); } .wc-block-components-totals-item__label, .wc-block-components-totals-item__value{ font-family:var(--sans); } /* Empty cart: the default is a bare line of text at the top of a blank page. Give it height and a route back into the catalogue. */ .wc-block-cart--is-empty{ text-align:center; padding-block:clamp(40px,8vh,90px); } @media (max-width:860px){ /* Stacked, and the summary card loses its inset so it does not look like a narrow box inside an already narrow screen. */ .wc-block-components-sidebar{ border-radius:14px; padding:clamp(16px,4vw,22px); } } /* ===================================================================== PAGE FLOW CHROME (.tspflow-*) Hero band + closing band for the pages that had neither: Shop-adjacent utility pages, Blog, Cart, Checkout, Account, search and 404. These previously opened straight into a content column on one flat colour, while every other page opens on a photographic hero and alternates dark/light. See inc/flow.php. Both bands are full-bleed and sit OUTSIDE the capped
, so they break the container deliberately while their inner content respects the 1440px shell. ===================================================================== */ .tspflow-hero{ position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:clamp(320px,46vh,520px); /* Clears the fixed header + announcement bar. */ padding-top:calc(var(--tspbar-h,38px) + 86px); overflow:hidden; background:var(--noir,#0d0a06); } .tspflow-hero__bg{ position:absolute; inset:0; z-index:0; } /* The image inside was never told to fill its container. WordPress prints width/height attributes from the file (1600x1067), so the browser sized it by aspect ratio: on a 360px phone that is 240px tall inside a 309px hero, leaving a bare dark band across the bottom that the hero's own text then straddled. object-fit:cover only crops once the box is the right size. */ .tspflow-hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; } .tspflow-hero__img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 40%; } .tspflow-hero::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(13,10,6,.66) 0%, rgba(13,10,6,.48) 40%, rgba(13,10,6,.88) 100%), linear-gradient(115deg, rgba(67,40,10,.34), rgba(13,10,6,0) 62%); } .tspflow-hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--tsp-container,1440px); margin-inline:auto; padding:0 var(--tsp-gutter,clamp(20px,4vw,64px)) clamp(34px,6vh,64px); box-sizing:border-box; } .tspflow-hero__eyebrow{ display:block; font-family:var(--sans); font-size:0.75rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--honey); margin-bottom:14px; } .tspflow-hero__title{ font-family:var(--serif); font-weight:700; font-size:clamp(2rem,5vw,3.6rem); line-height:1.05; letter-spacing:-.022em; color:#fff; margin:0; } .tspflow-hero__title em{ font-style:italic; color:var(--honey); } .tspflow-hero__sub{ font-family:var(--sans); font-size:clamp(.95rem,1.3vw,1.1rem); line-height:1.7; color:rgba(249,242,226,.82); max-width:var(--tsp-measure,68ch); margin:16px 0 0; } /* --- closing band ---------------------------------------------------- */ .tspflow-cta{ background:linear-gradient(160deg,#12100a 0%,#1f1a10 55%,#2a2114 100%); padding:clamp(56px,9vh,104px) 0; text-align:center; } .tspflow-cta__inner{ max-width:var(--tsp-container,1440px); margin-inline:auto; padding-inline:var(--tsp-gutter,clamp(20px,4vw,64px)); box-sizing:border-box; } .tspflow-cta__title{ font-family:var(--serif); font-weight:700; font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.12; color:#fff; margin:0; } .tspflow-cta__sub{ font-family:var(--sans); font-size:clamp(.92rem,1.2vw,1.05rem); line-height:1.7; color:rgba(249,242,226,.74); max-width:56ch; margin:14px auto 0; } .tspflow-cta__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(24px,4vh,38px); } .tspflow-btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:0.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:1.05em 2.2em; border-radius:100px; border:1px solid transparent; transition:transform .3s, background .25s, color .25s, border-color .25s; } .tspflow-btn--gold{ background:var(--honey); color:var(--brown); } .tspflow-btn--gold:hover{ background:#fff; transform:translateY(-2px); } .tspflow-btn--ghost{ border-color:rgba(249,242,226,.4); color:var(--cream); } .tspflow-btn--ghost:hover{ border-color:var(--honey); color:var(--honey); transform:translateY(-2px); } /* The pages now open on a dark hero, so the content column beneath no longer needs to reserve space for the fixed header. */ .tspflow-hero + .site-main--page, .tspflow-hero + .site-main--index, .tspflow-hero + .site-main--search, .tspflow-hero + .site-main--404, .tspflow-hero + .site-main--archive, .tspflow-hero + .woo-main{ padding-top:clamp(38px,6vh,72px); } @media (max-width:860px){ .tspflow-hero{ min-height:clamp(260px,38vh,380px); padding-top:calc(var(--tspbar-h,34px) + 70px); } } @media (prefers-reduced-motion:no-preference){ .tspflow-hero__img{ animation:tsp-drift 26s ease-in-out infinite alternate; } } /* Visually hidden, still announced by screen readers and read by crawlers. clip-path rather than display:none, which would remove it from the accessibility tree entirely. */ .tsp-sr-only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* ===================================================================== CRO PASS - length, fold, mobile-first The homepage measured 23 screens desktop / 27 mobile, first product 13.5 screens down. With the reorder (products to screen 2) and the removal of polaroid + impact, the pinned scenes are shortened: each mapped ~4 screens of scroll to one screen of content. Track height is progress-mapped, so lowering it preserves pacing and only plays quicker. ===================================================================== */ .hero{ height:230vh; } .wpx{ height:230vh; } .rev{ height:300vh; } @media (max-width:860px){ .wpx{ height:250vh; } } .tsp-shopbar{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:none; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(13,10,6,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-top:1px solid rgba(242,184,49,.28); } .tsp-shopbar__in{ display:flex; align-items:center; gap:12px; max-width:560px; margin-inline:auto; } .tsp-shopbar__txt{ flex:1; min-width:0; font-family:var(--sans); color:var(--cream); font-size:.78rem; line-height:1.3; } .tsp-shopbar__txt strong{ display:block; font-family:var(--serif); font-size:.92rem; color:#fff; } .tsp-shopbar__btn{ flex:none; min-height:44px; display:inline-flex; align-items:center; padding:.8em 1.5em; border-radius:100px; background:var(--honey); color:var(--brown); font-family:var(--sans); font-size:0.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; } .tsp-shopbar__btn:active{ transform:scale(.97); } @media (max-width:860px){ body.home .tsp-shopbar{ display:block; } body.home .cta{ padding-bottom:96px; } } /* ===================================================================== TONE SWAP (requested): reviews -> LIGHT, gifting -> DARK Appended last so it overrides the earlier homepage tone rules. ===================================================================== */ /* --- "Every Morning..." (reviews) back to the light honeycomb band. The dark stage override is reverted to the same cream+comb+glow+veil surface the other light bands use. The white .asym__box testimonial card keeps its own colours, so only the pinned heading, the sun wash, the grain blend and the dots need putting back to their light-band values. */ .home .rev, .home .rev__stage{ background-color:var(--cream); background-image:var(--tsp-veil), var(--tsp-glow), var(--tsp-comb); background-repeat:no-repeat, no-repeat, repeat; background-size:auto, auto, var(--tsp-comb-size); background-position:center, top right, top left; } .home .rev__title{ color:var(--brown); } .home .rev__title em{ color:var(--terra); } .home .rev__sun{ background:radial-gradient(circle, rgba(255,245,208,.5), rgba(255,245,208,0) 60%); } .home .rev__grain{ mix-blend-mode:multiply; opacity:.5; } .home .asym__dot{ background:rgba(67,55,45,.24); } .home .asym__dot.is-active{ background:var(--terra); } /* --- "The Art of Gifting" (configurator) -> DARK. Its SUMMARY panel was already built for a dark surface (light text); the PICKER side is light-designed (brown text, brown chips, dark step badges), so every picker text node is inverted here or it would read dark-on-dark. */ .home .luxv2-cfg{ background-color:var(--noir); background-image: radial-gradient(120% 90% at 82% 4%, rgba(251,227,151,.14), transparent 54%), linear-gradient(180deg,#15100a,var(--noir)); color:var(--cream); } .home .luxv2-cfg .luxv2-title{ color:#fff; } .home .luxv2-cfg .luxv2-eyebrow:not(.luxv2-eyebrow--light){ color:var(--honey); } .home .luxv2-cfg__sub{ color:rgba(249,242,226,.8); } .home .luxv2-cfg__legend{ color:var(--cream); } .home .luxv2-cfg__legend span{ background:var(--honey); color:var(--brown); } /* Honey cards and chips keep their base #fff background and dark text: white cards read as bright, tappable surfaces on the dark band, so their text must NOT be inverted (light text on a white card is unreadable). Only text sitting directly on the dark band is lightened. */ .home .luxv2-cfg__slabel{ color:var(--honey); } /* ===================================================================== STICKY MOBILE BUY BAR (.tsp-shopbar) - homepage, small screens only A persistent buy path: the header collapses to a burger on mobile and there was no add-to-cart above the fold. Hidden on desktop (>=861px) where the full nav is present. Body gets bottom padding so the bar never covers the footer's last line. ===================================================================== */ .tsp-shopbar{ display:none; } @media (max-width:860px){ .tsp-shopbar{ position:fixed; left:0; right:0; bottom:0; z-index:95; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px clamp(14px,4vw,20px); padding-bottom:calc(11px + env(safe-area-inset-bottom)); background:rgba(255,253,247,.97); border-top:1px solid rgba(67,55,45,.14); box-shadow:0 -8px 26px rgba(67,55,45,.14); font-family:var(--sans); } .tsp-shopbar__txt{ font-size:.82rem; font-weight:600; color:var(--brown); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tsp-shopbar__btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 1.6em; border-radius:100px; background:var(--honey); color:var(--brown); font-size:0.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; } .tsp-shopbar__btn:active{ background:var(--terra); color:#fff; } /* keep the footer clear of the fixed bar */ body.has-shopbar .site-footer, body.has-shopbar footer{ padding-bottom:72px; } } /* ===================================================================== GIFTING TRIM (homepage only) The configurator is the tallest content section; on the homepage it only needs to invite, so its vertical padding is cut. The full-height version stays on /gifting/ (this rule is .home-scoped). ===================================================================== */ .home .luxv2-cfg{ padding-block:clamp(44px,6vh,84px); } /* ===================================================================== STATIC IMAGE HERO (.hero-img) - replaces the canvas film on request. Full-bleed photograph, real for LCP + srcset. Copy sits on the left with an asymmetric scrim (bright on the right where the jar is, dark on the left where the type is) so the golden bokeh does not wash out the headline and the product remains untouched by any tint. ===================================================================== */ .hero-img{ position:relative; isolation:isolate; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--noir,#0d0a06); padding:calc(var(--tspbar-h,38px) + 96px) 0 clamp(56px,9vh,110px); } .hero-img__bg{ position:absolute; inset:0; z-index:0; } .hero-img__pic{ width:100%; height:100%; object-fit:cover; object-position:center 45%; display:block; } /* Scrim: dark on the left, transparent on the right, plus a soft bottom fade so the CTA row reads on any tone. Two layers so no single stop is heavy enough to look muddy. */ .hero-img::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(13,10,6,.66) 0%, rgba(13,10,6,.44) 32%, rgba(13,10,6,.08) 58%, rgba(13,10,6,0) 74%), linear-gradient(180deg, rgba(13,10,6,0) 55%, rgba(13,10,6,.42) 100%); } .hero-img__inner{ position:relative; z-index:2; width:100%; max-width:var(--tsp-container,1440px); margin-inline:auto; padding-inline:var(--tsp-gutter,clamp(20px,4vw,64px)); color:#fff; } .hero-img__kicker{ display:block; font-family:var(--sans); font-size:0.75rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--honey,#F2B831); margin-bottom:16px; } .hero-img__title{ font-family:var(--serif); font-weight:700; color:#fff; margin:0; font-size:clamp(2.4rem,6.6vw,5.4rem); line-height:1; letter-spacing:-.032em; max-width:15ch; text-shadow:0 2px 30px rgba(13,10,6,.35); } .hero-img__title em{ font-style:italic; color:var(--honey,#F2B831); } .hero-img__sub{ font-family:var(--sans); font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.7; color:rgba(249,242,226,.9); max-width:46ch; margin:22px 0 0; text-shadow:0 1px 12px rgba(13,10,6,.35); } .hero-img__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,4.5vh,44px); } .hero-img__btn{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; font-family:var(--sans); font-size:0.75rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; text-decoration:none; padding:1.05em 2.2em; border-radius:100px; border:1px solid transparent; transition:transform .28s cubic-bezier(.16,.84,.44,1),background .22s,color .22s,border-color .22s; } .hero-img__btn--gold{ background:var(--honey,#F2B831); color:var(--brown,#43372d); } .hero-img__btn--gold:hover{ background:#fff; transform:translateY(-2px); } .hero-img__btn--ghost{ border-color:rgba(249,242,226,.45); color:var(--cream,#F9F2E2); } .hero-img__btn--ghost:hover{ border-color:var(--honey,#F2B831); color:var(--honey,#F2B831); transform:translateY(-2px); } /* MOBILE: the jar is on the right of a wide image. Shifting the focal point to about 72% keeps it visible when the sides get cropped. */ @media (max-width:860px){ .hero-img{ padding-top:calc(var(--tspbar-h,34px) + 78px); min-height:92svh; } .hero-img__pic{ object-position:72% 45%; } /* Scrim rotates: heavier at the top on mobile where the type sits. */ .hero-img::after{ background: linear-gradient(180deg, rgba(13,10,6,.7) 0%, rgba(13,10,6,.42) 40%, rgba(13,10,6,.1) 62%, rgba(13,10,6,.7) 100%); } .hero-img__title{ max-width:none; } .hero-img__cta .hero-img__btn{ flex:1; } } @media (prefers-reduced-motion:no-preference){ .hero-img__pic{ animation:tsp-hero-drift 22s ease-in-out infinite alternate; will-change:transform; } @keyframes tsp-hero-drift{ from{ transform:scale(1.02) translate3d(0,0,0); } to{ transform:scale(1.08) translate3d(-0.8%,-0.6%,0); } } } /* ===================================================================== FINAL TONE LOCK - strict D-L-D-L-D-L-D on the homepage. With hero-image D, bestsellers L, valley L, gifting D (swapped), reviews L (swapped), cta D, the only run left was three lights at positions 2-3-4 because the founder chapter (.wpx) was tinted cream for a light band. Flipping it back to its native DARK gives the run: hero D > bestsellers L > founder D > valley L > gifting D > reviews L > cta D The .wpx__content card is already dark green, so the type on it is unchanged. Only the track and the sticky stage return to noir. ===================================================================== */ .home .wpx, .home .wpx__stage{ background-color:var(--noir); background-image:none; } /* the wpx__sign text (script gold accent) already reads well on dark. */ /* ===================================================================== HERO FRAMING — tuned for the 2.90:1 gift-box photograph (media 185). The composition puts an empty dark wall across the left ~38% and the product cluster from ~40% to the right edge, so the copy sits over the wall and the open box stays in frame. Because the image is very wide, `cover` crops the sides hard. Measured visible source band by viewport: 1920x1080 @50% 19%–81% wall + closed box + open box 1440x900 @50% 23%–77% wall + closed box + open box 1024x820 @58% 33%–76% wall + closed box + open box 375x747 @66% 55%–72% open box and jars (product-forward) The mobile scrim is deepened below because the visible band there is the box lid and gold foil rather than dark wall. ===================================================================== */ @media (max-width:860px){ .hero-img__pic{ object-position:66% 48%; } .hero-img::after{ background: linear-gradient(180deg, rgba(13,10,6,.72) 0%, rgba(13,10,6,.58) 30%, rgba(13,10,6,.50) 52%, rgba(13,10,6,.42) 68%, rgba(13,10,6,.74) 100%) !important; } } /* Tablet: enough width to show the jar and some range behind it. */ @media (min-width:861px) and (max-width:1100px){ .hero-img__pic{ object-position:58% 46%; } }