/* ============================================================ VERSELLE — mobile-first, scroll-animated, CSS 3D All motion is driven by --p (0..1) set per section by main.js. Only transform / opacity animate, so everything stays on the compositor and holds 60fps on low-end Android. ============================================================ */ :root{ --ink:#101010; --ink-soft:#2a2724; --cream:#F4EFE7; --warm:#E9E0D2; --paper:#FFFFFF; --tan:#A98B63; --mute:#6E6862; --line:rgba(16,16,16,.12); --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --serif:'Fraunces',Georgia,'Times New Roman',serif; --pad:22px; --rad:2px; --ease:cubic-bezier(.22,.61,.36,1); --bar:68px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip; padding-bottom:var(--bar); } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4,h5{margin:0;font-weight:400;line-height:1.12;letter-spacing:-.01em} p{margin:0 0 1em} /* start-state only applies once the engine is confirmed alive (see ). Without .anim, --p is undefined: transforms fall back to none and opacity:var(--p,1) resolves to 1, so the page renders fully without JS. */ .anim [data-scene]{--p:0} /* ---------- shared ---------- */ .eyebrow{ font-size:11px;letter-spacing:.28em;text-transform:uppercase; color:var(--tan);font-weight:500;margin:0 0 14px; } .lede{color:var(--mute);max-width:46ch;margin:14px auto 0} .sec{padding:76px var(--pad)} .sec__head{text-align:center;margin-bottom:40px} .sec__head h2{font-family:var(--serif);font-size:clamp(28px,8vw,44px);font-weight:300} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:16px 26px;border-radius:var(--rad); font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500; border:1px solid transparent;transition:.35s var(--ease);cursor:pointer; min-height:52px;text-align:center; } .btn--primary{background:var(--ink);color:var(--cream)} .btn--ghost{border-color:var(--ink);color:var(--ink)} .btn--light{background:var(--cream);color:var(--ink)} .btn--ghost-light{border-color:rgba(244,239,231,.4);color:var(--cream)} .btn:active{transform:scale(.98)} @media(hover:hover){ .btn--primary:hover{background:var(--tan);color:#fff} .btn--ghost:hover{background:var(--ink);color:var(--cream)} .btn--light:hover{background:var(--tan);color:#fff} .btn--ghost-light:hover{background:var(--cream);color:var(--ink)} } /* ---------- scroll progress ---------- */ .prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;background:transparent;pointer-events:none} .prog i{display:block;height:100%;background:var(--tan);transform:scaleX(0);transform-origin:0 50%} /* ============================================================ THE 3D PANEL — a real framed print in perspective space ============================================================ */ .pnl{ margin:0; position:relative; flex:0 0 auto; width:var(--pw,clamp(84px,25vw,168px)); transform-style:preserve-3d; will-change:transform; backface-visibility:hidden; } .pnl img{ width:100%;height:auto; box-shadow:0 18px 38px -14px rgba(0,0,0,.6), 0 3px 10px -3px rgba(0,0,0,.4); } /* the frame's physical edge — gives real thickness in 3D */ .pnl::after{ content:'';position:absolute;inset:0; transform:translateZ(-7px); background:#0a0a0a; box-shadow:0 0 0 1px #0a0a0a; } /* ============================================================ HERO — three panels assemble out of depth ============================================================ */ .hero{height:178vh;position:relative;background:var(--ink)} .hero__stage{ position:sticky;top:0;height:100svh; display:flex;flex-direction:column;justify-content:center;align-items:center; gap:clamp(20px,5vh,42px); padding:86px var(--pad) 92px; perspective:1000px;perspective-origin:50% 42%; overflow:hidden;color:var(--cream); } .hero__space{ flex:0 0 auto; height:min(34vh,240px); display:flex;align-items:center;justify-content:center; gap:clamp(6px,2.2vw,18px); transform-style:preserve-3d; } .hero__space .pnl{--pw:clamp(78px,23vw,150px)} /* start: scattered in depth · end: aligned flat row */ .pnl--a{ transform: translate3d(calc(-46px + 46px * var(--p)), calc(26px - 26px * var(--p)), calc(-460px + 460px * var(--p))) rotateY(calc(42deg - 42deg * var(--p))) rotateZ(calc(-7deg + 7deg * var(--p))); } .pnl--b{ transform: translate3d(0px, calc(-34px + 34px * var(--p)), calc(210px - 210px * var(--p))) rotateY(calc(-9deg + 9deg * var(--p))) rotateX(calc(12deg - 12deg * var(--p))); } .pnl--c{ transform: translate3d(calc(48px - 48px * var(--p)), calc(30px - 30px * var(--p)), calc(-380px + 380px * var(--p))) rotateY(calc(-38deg + 38deg * var(--p))) rotateZ(calc(8deg - 8deg * var(--p))); } .hero__copy{text-align:center;max-width:540px;flex:0 0 auto} .hero__h1{ font-family:var(--serif);font-weight:300; font-size:clamp(40px,13vw,72px);line-height:.95;letter-spacing:-.02em; margin:0 0 16px; } .hero__h1 em{font-style:italic;color:var(--tan)} .hero__sub{color:rgba(244,239,231,.68);max-width:30ch;margin:0 auto 24px;font-size:15.5px} .hero__cta{display:flex;flex-direction:column;gap:10px} .hero .eyebrow{color:var(--tan)} .hero__hint{ position:absolute;bottom:22px;left:50%;margin-left:-.5px; width:1px;height:34px;background:rgba(244,239,231,.25);overflow:hidden; opacity:calc(1 - var(--p) * 3); } .hero__hint span{display:block;width:100%;height:11px;background:var(--cream);animation:sc 2.2s var(--ease) infinite} @keyframes sc{0%{transform:translateY(-13px)}100%{transform:translateY(36px)}} /* ============================================================ PRODUCT 2 — panels fan open as you scroll ============================================================ */ .fan{height:168vh;position:relative;background:var(--ink)} .fan__stage{ position:sticky;top:0;height:100svh; display:flex;flex-direction:column;justify-content:center;align-items:center; gap:clamp(18px,4vh,36px); padding:80px var(--pad) 90px; perspective:1100px;overflow:hidden;color:var(--cream); } .fan__space{ flex:0 0 auto;height:min(32vh,230px); display:flex;align-items:center;justify-content:center; gap:clamp(5px,1.8vw,14px); transform-style:preserve-3d; } .fan__space .pnl{--pw:clamp(74px,22vw,144px)} /* start: stacked as one · end: fanned apart in depth */ .pnl--d{ transform: translate3d(calc(42px - 76px * var(--p)), 0px, calc(-34px + 34px * var(--p) - 120px * var(--p))) rotateZ(calc(-8deg + 8deg * var(--p))) rotateY(calc(26deg * var(--p))); } .pnl--e{ transform:translate3d(0,calc(-10px * var(--p)),calc(34px + 26px * var(--p))); } .pnl--f{ transform: translate3d(calc(-42px + 76px * var(--p)), 0px, calc(-34px + 34px * var(--p) - 120px * var(--p))) rotateZ(calc(8deg - 8deg * var(--p))) rotateY(calc(-26deg * var(--p))); } .fan__copy{text-align:center;max-width:460px} .fan__copy .prod__name{color:var(--cream);margin-bottom:10px} .fan__copy .prod__desc{color:rgba(244,239,231,.66);margin-bottom:22px} .fan__copy .price{color:var(--cream)} .fan__copy .price small{color:rgba(244,239,231,.5)} .fan__copy .prod__buy{align-items:center} /* ============ MARQUEE ============ */ .marquee{background:var(--tan);color:#fff;overflow:hidden;padding:15px 0} .marquee__track{display:flex;gap:28px;white-space:nowrap;width:max-content;animation:mq 26s linear infinite} .marquee__track span{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:400} .marquee__track i{color:rgba(255,255,255,.55);font-style:normal} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================================================ ENTER SCENES — 3D rise driven by --p ============================================================ */ .sec__head,.story,.custom,.band__inner,.spec,.step,.tip,.shop__note,.prod{ opacity:var(--p,1); transform:translate3d(0, calc(34px - 34px * var(--p)), 0) rotateX(calc(6deg - 6deg * var(--p))); transform-origin:50% 100%; } .prod{transform:translate3d(0, calc(28px - 28px * var(--p)), 0)} /* product photo tilts in 3D as it rises */ .tilt{perspective:900px} .tilt img{ transform:rotateY(calc(9deg - 9deg * var(--p))) rotateX(calc(-4deg + 4deg * var(--p))); transform-origin:70% 50%; will-change:transform; } /* ============ SHOP ============ */ .sec--shop{padding-bottom:34px} .prod__media{position:relative;background:var(--warm);overflow:hidden} .prod__media img{width:100%;height:auto} .prod__tag{ position:absolute;top:14px;left:14px; background:var(--ink);color:var(--cream); font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; padding:7px 12px;font-weight:500;z-index:2; } .prod__tag.prod__tag--inline{ position:static;display:inline-block;margin:0 0 14px; background:var(--tan);color:#fff; } .prod__body{padding-top:24px} .prod__name{font-family:var(--serif);font-size:30px;font-weight:300;margin-bottom:12px} .prod__desc{color:var(--mute);max-width:44ch} .prod__specs{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid var(--line)} .prod__specs li{padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-soft)} .prod__specs b{font-weight:500} .prod__buy{display:flex;flex-direction:column;gap:16px} .price{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1} .price small{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase} .shop__note{ text-align:center;color:var(--mute);font-size:14.5px;max-width:40ch; margin:0 auto;padding:46px var(--pad); } .shop__note a{border-bottom:1px solid var(--tan);color:var(--ink)} /* ============ SPECS ============ */ .specs{background:var(--ink);color:var(--cream);padding:64px var(--pad)} .specs__grid{display:grid;gap:40px} .spec__n{display:block;font-family:var(--serif);font-size:38px;font-weight:300;color:var(--tan);line-height:1;margin-bottom:12px} .spec h4{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:10px} .spec p{color:rgba(244,239,231,.62);font-size:14.5px;margin:0;max-width:34ch} /* ============ STORY ============ */ .sec--story{background:var(--warm)} .story{max-width:560px;margin:0 auto} .story h2{font-family:var(--serif);font-size:clamp(26px,7.5vw,38px);font-weight:300;margin-bottom:22px} .story p{color:var(--ink-soft)} .story__sign{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tan);margin-top:26px} /* ============ ROOM BAND ============ */ .roomband{ position:relative;overflow:hidden;background:var(--ink); /* band stays short enough that object-fit:cover crops the portrait source vertically rather than slicing a frame off the right edge */ height:60vh;min-height:360px;max-height:520px; } .roomband picture{position:absolute;inset:-8% 0;display:block} .roomband img{ width:100%;height:100%;object-fit:cover;object-position:58% 44%; transform:translate3d(0,calc(26px - 52px * var(--p,.5)),0); will-change:transform; } .roomband::after{ content:'';position:absolute;inset:0; background:linear-gradient(to top,rgba(10,9,8,.72),rgba(10,9,8,.05) 55%); } .roomband__cap{ position:absolute;left:0;right:0;bottom:28px;z-index:2;margin:0; text-align:center;color:var(--cream); font-family:var(--serif);font-size:clamp(20px,5.5vw,30px);font-weight:300; } /* ============ HOW ============ */ .steps{list-style:none;padding:0;margin:0 auto;display:grid;gap:34px;max-width:560px} .step{position:relative;padding-left:56px} .step__n{ position:absolute;left:0;top:-4px;width:40px;height:40px; border:1px solid var(--ink);border-radius:50%; display:grid;place-content:center;font-family:var(--serif);font-size:16px; } .step h4{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin-bottom:8px} .step p{color:var(--mute);font-size:14.5px;margin:0} /* ============ CUSTOM ============ */ .sec--custom{background:var(--ink);color:var(--cream);text-align:center} .custom{max-width:520px;margin:0 auto} .custom h2{font-family:var(--serif);font-size:clamp(28px,8vw,42px);font-weight:300;margin-bottom:18px} .custom p{color:rgba(244,239,231,.68);margin-bottom:28px} .custom__fine{font-size:12px;color:rgba(244,239,231,.4);margin:20px 0 0} /* ============ TIPS ============ */ .tips{display:grid;gap:30px;max-width:620px;margin:0 auto} .tip{border-top:1px solid var(--line);padding-top:18px} .tip__n{display:block;font-family:var(--serif);font-size:13px;color:var(--tan);letter-spacing:.14em;margin-bottom:10px} .tip h4{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin-bottom:8px} .tip p{color:var(--mute);font-size:14.5px;margin:0} /* ============ FAQ ============ */ .faq{max-width:600px;margin:0 auto;border-top:1px solid var(--line)} .faq__item{border-bottom:1px solid var(--line)} .faq__item summary{list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;font-size:15.5px;line-height:1.4} .faq__item summary::-webkit-details-marker{display:none} .faq__item summary::after{ content:'';position:absolute;right:4px;top:50%;width:11px;height:11px;margin-top:-6px; border-right:1px solid var(--ink);border-bottom:1px solid var(--ink); transform:rotate(45deg);transition:transform .3s var(--ease); } .faq__item[open] summary::after{transform:rotate(-135deg)} .faq__item div{padding:0 0 20px} .faq__item div p{color:var(--mute);font-size:14.5px;margin:0;max-width:52ch} /* ============ BAND ============ */ .band{background:var(--tan);color:#fff;padding:70px var(--pad);text-align:center} .band .eyebrow{color:rgba(255,255,255,.7)} .band h2{font-family:var(--serif);font-size:clamp(28px,8vw,42px);font-weight:300;margin-bottom:26px} /* ============ HEADER ============ */ .hdr{ position:fixed;top:0;left:0;right:0;z-index:60; display:flex;align-items:center;justify-content:space-between; padding:14px var(--pad);transition:background .4s var(--ease),box-shadow .4s var(--ease); } .hdr.stuck{ background:rgba(244,239,231,.94); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); } /* A backdrop-filter turns .hdr into the containing block for its position:fixed children, which collapsed the .nav overlay to the header's own 72px box. Drop the filter while the menu is open so .nav{inset:0} resolves against the viewport again. */ .hdr.menu-open{ backdrop-filter:none;-webkit-backdrop-filter:none; background:var(--cream); } /* .nav is a DESCENDANT of .hdr, so its z-index:55 paints above the header's own content. Lift the brand and the toggle above it or they disappear behind the open overlay. */ .hdr__brand,.hdr__menu{position:relative;z-index:56} .hdr__brand{display:flex;align-items:center;gap:10px} .hdr__mark{width:34px;height:34px;object-fit:cover;border-radius:50%} .hdr__name{font-size:13px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--cream);transition:color .4s var(--ease)} .hdr.stuck .hdr__name{color:var(--ink)} .hdr__menu{ width:44px;height:44px; /* 44px = minimum comfortable tap target */ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; background:none;border:0;padding:0;cursor:pointer; } .hdr__menu span{ display:block;width:24px;height:2px;border-radius:2px; background:var(--cream);transition:transform .35s var(--ease),opacity .2s linear,background .4s var(--ease); } .hdr.stuck .hdr__menu span{background:var(--ink)} .hdr__menu[aria-expanded="true"] span{background:var(--ink)} .hdr__menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hdr__menu[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)} .hdr__menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav{ position:fixed;inset:0;width:100vw;height:100svh;background:var(--cream); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; opacity:0;pointer-events:none;transform:translateY(-8px);transition:.4s var(--ease);z-index:-1; } .nav.open{opacity:1;pointer-events:auto;transform:none;z-index:55} .nav a{font-family:var(--serif);font-size:30px;font-weight:300;padding:12px 0;color:var(--ink)} .nav__legal{ font-family:var(--sans) !important;font-size:12px !important; letter-spacing:.2em;text-transform:uppercase;color:var(--mute) !important;margin-top:18px; } /* ============ LEGAL PAGES ============ */ .legal{padding:128px var(--pad) 80px;max-width:720px;margin:0 auto} .legal h1{font-family:var(--serif);font-size:clamp(32px,9vw,48px);font-weight:300;margin-bottom:10px} .legal__meta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan);margin-bottom:40px} .legal h2{ font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500; margin:40px 0 12px;padding-top:20px;border-top:1px solid var(--line); } .legal p,.legal li{color:var(--ink-soft);font-size:15px} .legal ul{padding-left:20px;margin:0 0 1em} .legal li{margin-bottom:8px} .legal a{border-bottom:1px solid var(--tan)} .legal__note{ background:var(--warm);padding:20px;margin:36px 0 0; font-size:13.5px;color:var(--ink-soft); } .legal__back{display:inline-block;margin-top:40px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--tan)} /* ============ FOOTER ============ */ .ftr{background:var(--ink);color:var(--cream);padding:60px var(--pad) 34px} .ftr__grid{display:grid;gap:38px;margin-bottom:40px} .ftr__mark{width:132px;height:auto;object-fit:contain;margin-bottom:18px;mix-blend-mode:screen} .ftr__tag{font-family:var(--serif);font-size:20px;font-weight:300;margin:0 0 6px} .ftr__loc{font-size:13px;color:rgba(244,239,231,.5);margin:0} .ftr__col h5{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tan);font-weight:500;margin-bottom:14px} .ftr__col a{display:block;padding:7px 0;font-size:14.5px;color:rgba(244,239,231,.78)} @media(hover:hover){.ftr__col a:hover{color:#fff}} .ftr__base{ border-top:1px solid rgba(244,239,231,.14);padding-top:24px; display:flex;flex-direction:column;gap:6px;font-size:12px;color:rgba(244,239,231,.42); } .ftr__base p{margin:0} .ftr__by a{border-bottom:1px solid rgba(244,239,231,.3)} /* ============ STICKY BAR ============ */ .sticky{ position:fixed;left:0;right:0;bottom:0;z-index:70;height:var(--bar); display:flex;align-items:center;gap:12px; padding:0 14px calc(env(safe-area-inset-bottom)); background:rgba(244,239,231,.96); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); } .sticky__price{display:flex;flex-direction:column;line-height:1.1;padding-left:6px} .sticky__price b{font-family:var(--serif);font-size:20px;font-weight:400} .sticky__price span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .sticky__btn{ flex:1;display:flex;align-items:center;justify-content:center;height:48px; background:#25D366;color:#fff;border-radius:var(--rad); font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500; } .sticky__btn:active{transform:scale(.99)} /* ============================================================ REDUCED MOTION — everything lands, nothing moves ============================================================ */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .marquee__track{animation:none} .hero__hint span{animation:none} .hero,.fan{height:auto} .hero__stage,.fan__stage{position:static;height:auto;min-height:0;padding-top:120px} .pnl,.tilt img,.roomband img{transform:none !important} .sec__head,.story,.custom,.band__inner,.spec,.step,.tip,.shop__note,.prod{opacity:1;transform:none} } /* ============================================================ TABLET / DESKTOP ============================================================ */ @media(min-width:720px){ :root{--pad:48px;--bar:0px} body{padding-bottom:0} .sticky{display:none} .hdr__menu{display:none} .nav{ position:static;inset:auto;background:none;flex-direction:row;gap:30px; opacity:1;pointer-events:auto;transform:none;z-index:auto; } .nav a{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:0;color:var(--cream);transition:color .3s var(--ease)} .nav__legal{display:none} .hdr.stuck .nav a{color:var(--ink)} @media(hover:hover){.nav a:hover{color:var(--tan)}} .sec{padding:110px var(--pad)} .hero{height:220vh} .hero__space{height:min(40vh,320px)} .hero__space .pnl{--pw:clamp(130px,14vw,200px)} .hero__cta{flex-direction:row;justify-content:center} .fan{height:205vh} .roomband{height:72vh;max-height:640px} .roomband img{object-position:center 46%} .fan__space{height:min(38vh,300px)} .fan__space .pnl{--pw:clamp(120px,13vw,186px)} .prod{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .prod__body{padding-top:0;max-width:440px} .prod__buy{flex-direction:row;align-items:center;justify-content:space-between} .specs{padding:96px var(--pad)} .specs__grid{grid-template-columns:repeat(3,1fr);gap:48px;max-width:1080px;margin:0 auto} .steps{grid-template-columns:repeat(3,1fr);gap:40px;max-width:1000px} .step{padding-left:0;padding-top:58px} .step__n{top:0} .tips{grid-template-columns:repeat(4,1fr);gap:32px;max-width:1100px} .ftr{padding:80px var(--pad) 40px} .ftr__grid{grid-template-columns:2fr 1fr 1fr;gap:56px;max-width:1080px;margin:0 auto 48px} .ftr__base{flex-direction:row;justify-content:space-between;max-width:1080px;margin:0 auto} } @media(min-width:1100px){ .sec--shop,.sec--how,.sec--faq,.sec--style{max-width:1200px;margin:0 auto} } /* ============================================================ LEGAL PAGES — the header sits on cream from the very top, so it must not depend on the .stuck class that JS toggles at scrollY>40. Placed last so it wins over the desktop nav colours above. ============================================================ */ .page-legal{padding-bottom:var(--bar)} .page-legal .hdr{ background:rgba(244,239,231,.94); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); } .page-legal .hdr.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--cream)} .page-legal .hdr__name, .page-legal .nav a{color:var(--ink)} .page-legal .hdr__menu span{background:var(--ink)} @media(hover:hover){.page-legal .nav a:hover{color:var(--tan)}}