/* --------------------------------------------------------------------------- Sticky guard. The journey's scroll animation depends on .stage being position:sticky, and ANY ancestor with overflow:hidden — including the overflow-x:hidden that Hello Elementor and most Elementor installs set to suppress horizontal scroll — silently becomes a scroll container and kills it. The visible symptom is a blank green band where the sachet should be, while the step list still lights up. overflow:clip clips exactly the same but does not create a scroll container. auriva-home.js walks the real ancestor chain at runtime; these rules cover the usual wrappers before JS has run, so the page is not broken on first paint. Scoped to .auriva-home-page, so no other page on the site is affected. --------------------------------------------------------------------------- */ .auriva-home-page, .auriva-home-page body, .auriva-home-page #page, .auriva-home-page #content, .auriva-home-page .site, .auriva-home-page .site-main, .auriva-home-page main, .auriva-home-page .elementor, .auriva-home-page .ast-container, .auriva-home-page .entry-content{overflow-x:clip;overflow-y:visible} /* ========================================================= AURIVA ONE — homepage Type: Libre Baskerville (display) + DM Sans (everything else) ========================================================= */ #auriva-home{ --forest:#142E25; --forest-deep:#0A1A14; --forest-mid:#1B3E32; --line-gold:rgba(232,201,126,.20); --honey:#D6A63C; --gold:#C9A24B; --gold-soft:#E8C97E; --cream:#FBF6E4; --sand:#F2E9D0; --paper:#FFFDF3; --ink:#0E241D; --ink-60:rgba(14,36,29,.62); --ink-35:rgba(14,36,29,.35); --rule:rgba(20,46,37,.13); --display:"Libre Baskerville",Georgia,serif; --sans:"DM Sans",system-ui,-apple-system,sans-serif; --wrap:1560px; --gutter:clamp(20px,4vw,60px); --sect:clamp(80px,10vw,150px); } #auriva-home *, #auriva-home *::before, #auriva-home *::after{box-sizing:border-box} /* overflow-x here is CLIP, not HIDDEN, and that difference is load-bearing. This rule started life as body{...overflow-x:hidden}. Scoping moved it onto the wrapper, which turned the wrapper into a scroll container and killed position:sticky on .stage inside it — the sachet vanished while the step list kept lighting up. clip suppresses the same sideways scroll without creating a scroll container. Do not change it back to hidden. */ #auriva-home{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans); font-weight:300;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased; overflow-x:clip;overflow-y:visible} #auriva-home img{max-width:100%;display:block} #auriva-home a{color:inherit;text-decoration:none} #auriva-home button{font:inherit;cursor:pointer;background:none;border:0;color:inherit} #auriva-home :focus-visible{outline:2px solid var(--honey);outline-offset:3px} #auriva-home ::selection{background:var(--honey);color:#12281F} #auriva-home .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} #auriva-home .sect{padding-block:var(--sect);position:relative} /* ---------- type ---------- */ #auriva-home h1, #auriva-home h2, #auriva-home h3, #auriva-home h4{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.08} #auriva-home .h1{font-size:clamp(2.7rem,6vw,5rem);line-height:1.02} #auriva-home .h2{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.08} #auriva-home .h3{font-size:clamp(1.35rem,2vw,1.9rem)} #auriva-home .h4{font-size:clamp(1.05rem,1.3vw,1.22rem);line-height:1.3} #auriva-home em, #auriva-home .it{font-style:italic} #auriva-home p{margin:0 0 1em} #auriva-home .lede{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.7;color:var(--ink-60);max-width:52ch} #auriva-home .small{font-size:.85rem;line-height:1.6;color:var(--ink-60)} #auriva-home .label{font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold); display:inline-flex;align-items:center;gap:.75em} #auriva-home .label::before{content:"";width:24px;height:1px;background:currentColor;opacity:.6} #auriva-home .mid .label::before, #auriva-home .mid .label::after{content:"";width:24px;height:1px;background:currentColor;opacity:.6} #auriva-home .mid{text-align:center} #auriva-home .mid .lede{margin-inline:auto} #auriva-home .on-dark{color:rgba(242,233,208,.72)} #auriva-home .dark{background:var(--forest);color:rgba(242,233,208,.72)} #auriva-home .dark h1, #auriva-home .dark h2, #auriva-home .dark h3, #auriva-home .dark h4{color:var(--paper)} #auriva-home .dark .lede{color:rgba(242,233,208,.66)} #auriva-home .dark .label{color:var(--gold-soft)} /* ---------- buttons ---------- */ #auriva-home .btn{display:inline-flex;align-items:center;gap:.65em;font-size:.78rem;font-weight:500; letter-spacing:.15em;text-transform:uppercase;padding:1.05em 2.1em;border:1px solid transparent; transition:background .35s,color .35s,border-color .35s,transform .35s} #auriva-home .btn-gold{background:var(--honey);color:#12281F} #auriva-home .btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px)} #auriva-home .btn-ghost{border-color:rgba(232,201,126,.4);color:var(--gold-soft)} #auriva-home .btn-ghost:hover{border-color:var(--gold-soft);background:rgba(232,201,126,.08)} #auriva-home .btn-dark{border-color:rgba(20,46,37,.25)} #auriva-home .btn-dark:hover{border-color:var(--ink);background:rgba(20,46,37,.05)} #auriva-home .btn svg{transition:transform .35s} #auriva-home .btn:hover svg{transform:translateX(4px)} /* ---------- text reveal ---------- */ #auriva-home .rt .w{display:inline-block;overflow:hidden;vertical-align:bottom} #auriva-home .rt .w i{display:inline-block;font-style:inherit;transform:translateY(105%)} #auriva-home.no-motion .rt .w i{transform:none!important} #auriva-home .up{opacity:0;transform:translateY(24px)} #auriva-home.no-motion .up{opacity:1!important;transform:none!important} @media (prefers-reduced-motion:reduce){#auriva-home .rt .w i, #auriva-home .up{transform:none!important;opacity:1!important} #auriva-home *{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* ---------- ridge divider ---------- */ #auriva-home .ridge{position:absolute;left:0;width:100%;height:clamp(60px,7vw,110px);display:block;pointer-events:none} #auriva-home .ridge-b{bottom:-1px} #auriva-home .ridge-t{top:-1px;transform:scaleY(-1)} #auriva-home .rg-fill{fill:currentColor;opacity:.12} #auriva-home .rg-line{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke;stroke-linejoin:round} #auriva-home .c-gold{color:var(--gold)} #auriva-home .c-cream{color:var(--cream)} #auriva-home .c-forest{color:var(--forest)} /* ============================ HEADER ============================ */ #auriva-home .announce{background:var(--forest-deep);color:var(--gold-soft);font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;text-align:center;padding:.65rem 1rem} #auriva-home .announce b{color:var(--paper);font-weight:500} #auriva-home .hdr{position:sticky;top:0;z-index:90;padding-block:1.1rem;transition:background .4s,padding .4s,box-shadow .4s} #auriva-home .hdr.solid{background:rgba(10,26,20,.94);backdrop-filter:blur(14px);padding-block:.7rem; box-shadow:0 1px 0 rgba(232,201,126,.14)} #auriva-home .hdr-in{display:flex;align-items:center;gap:2rem} #auriva-home .brand{width:128px;height:25px;flex:none;display:block} #auriva-home .brand img{width:100%;height:100%;object-fit:contain;object-position:left center;display:block} #auriva-home .nav{display:flex;gap:2.2rem;margin-left:auto} #auriva-home .nav a{font-size:.95rem;color:rgba(242,233,208,.86);position:relative;padding-block:.3rem} #auriva-home .nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold-soft);transition:width .3s} #auriva-home .nav a:hover::after{width:100%} #auriva-home .hdr-cta{margin-left:1.5rem} #auriva-home .hdr .btn{padding:.8em 1.5em;font-size:.7rem} #auriva-home .burger{display:none;margin-left:auto;color:var(--sand)} /* ============================ HERO ============================ */ #auriva-home .hero{position:relative;background:var(--forest);overflow:hidden; margin-top:calc(-1 * var(--hdrh,70px));padding-top:var(--hdrh,70px);min-height:86vh;display:flex;flex-direction:column} #auriva-home .hero-bg{position:absolute;inset:0;background: radial-gradient(110% 80% at 76% 20%,rgba(214,166,60,.20),transparent 58%), linear-gradient(165deg,#18382B,#142E25 48%,#0C2118)} #auriva-home .hero-in{position:relative;flex:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,70px); align-items:center;padding-block:clamp(30px,5vw,70px)} #auriva-home .hero h1{color:var(--paper)} #auriva-home .hero h1 em{color:var(--gold-soft)} #auriva-home .hero-sub{max-width:44ch;margin:1.6rem 0 2.4rem;color:rgba(242,233,208,.72);font-size:1.05rem} #auriva-home .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem} #auriva-home .hero-stage{position:relative;aspect-ratio:1/1;width:min(100%,520px);margin-left:auto;display:grid;place-items:center} #auriva-home .hero-glow{position:absolute;width:76%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(232,201,126,.28),rgba(232,201,126,.04) 56%,transparent 72%)} #auriva-home .hero-ring{position:absolute;width:70%;aspect-ratio:1;border:1px solid rgba(232,201,126,.24);border-radius:50%} #auriva-home .hero-ring.b{width:88%;border-color:rgba(232,201,126,.11)} #auriva-home .hero-shadow{position:absolute;bottom:8%;width:46%;height:26px;border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);filter:blur(6px)} #auriva-home .hero-box{position:relative;width:74%;aspect-ratio:616/697; background:url(../media/box.webp) no-repeat center/contain;filter:drop-shadow(0 40px 55px rgba(0,0,0,.5))} /* spec line — hairlines, not boxes */ #auriva-home .specline{position:relative;border-top:1px solid var(--line-gold);display:grid;grid-template-columns:repeat(3,1fr)} #auriva-home .specline>div{padding:1.5rem clamp(14px,2vw,30px) 1.7rem;border-left:1px solid var(--line-gold);display:flex;gap:1rem;align-items:baseline} #auriva-home .specline>div:first-child{border-left:0;padding-left:0} #auriva-home .specline b{font-family:var(--display);font-size:clamp(1.2rem,1.7vw,1.6rem);color:var(--gold-soft);font-weight:400;white-space:nowrap} #auriva-home .specline span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,233,208,.55);line-height:1.4} /* ============================ STATEMENT ============================ */ #auriva-home .statement{text-align:center;padding-block:clamp(110px,15vw,210px);position:relative} #auriva-home .statement h2{font-size:clamp(2.3rem,4.6vw,4.1rem);line-height:1.18;max-width:19ch;margin-inline:auto} #auriva-home .statement .mark{width:44px;height:44px;color:var(--gold);margin:0 auto 2.6rem} #auriva-home .statement .foot{margin-top:3rem;font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-60)} #auriva-home .statement .foot::before, #auriva-home .statement .foot::after{content:"";display:inline-block;width:34px;height:1px;background:var(--gold);vertical-align:middle;margin:0 1.1rem;opacity:.7} /* ============================ JOURNEY ============================ */ #auriva-home .journey{position:relative;background:var(--forest);color:rgba(242,233,208,.72)} #auriva-home .journey-bg{position:absolute;inset:0;background: radial-gradient(80% 50% at 20% 12%,rgba(214,166,60,.10),transparent 60%), radial-gradient(70% 50% at 82% 78%,rgba(214,166,60,.09),transparent 60%)} #auriva-home .stage{position:sticky;top:0;height:100vh;z-index:2;pointer-events:none} #auriva-home .stage-in{position:relative;width:100%;height:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} #auriva-home .sachet-rider{position:absolute;top:50%;left:50%;width:min(460px,32vw);aspect-ratio:1572/294;will-change:transform} #auriva-home .sachet-body, #auriva-home .sachet-cap{position:absolute;inset:0;background:url(../media/sachet.webp) no-repeat center/100% 100%; filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))} #auriva-home .sachet-body{clip-path:polygon(0 0,100% 0,100% 14%,100% 30%,100% 46%,100% 62%,100% 80%,100% 100%,0 100%)} #auriva-home .sachet-cap{clip-path:polygon(89.4% 0,100% 0,100% 100%,90.2% 100%,91.4% 80%,89.8% 62%,91.6% 46%,90% 30%,91.2% 14%); transform-origin:20% 50%} #auriva-home .rider-hint{position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);font-size:.66rem; letter-spacing:.22em;text-transform:uppercase;color:rgba(242,233,208,.4)} /* annotation callouts */ #auriva-home .anno{position:absolute;opacity:0;width:210px} #auriva-home .anno h4{color:var(--paper);font-size:1.15rem;margin-bottom:.3rem} #auriva-home .anno b{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.5rem;font-weight:500} #auriva-home .anno p{font-size:.82rem;line-height:1.5;color:rgba(242,233,208,.6);margin:0} #auriva-home .anno-a{left:1%;top:46%;text-align:right} #auriva-home .anno-b{left:50%;margin-left:-125px;bottom:9%;text-align:center;width:250px} #auriva-home .anno-c{right:1%;top:46%} #auriva-home .leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible} #auriva-home .leaders path{fill:none;stroke:var(--gold);stroke-width:1;opacity:.6} #auriva-home .leaders circle{fill:var(--gold);opacity:.9} #auriva-home .leaders circle{fill:var(--gold)} /* pour scene — the glass is ours (vector), the liquid is filmed. Four layers, stacked so the honey reads as being INSIDE the glass rather than in front of it: 1 #glassBack back wall + the water the glass already holds + the honey tint 2 #bloomVid the filmed dispersion, clipped to the glass interior 3 #glassFront rim, wall highlights, outline — drawn OVER the liquid 4 #streamVid the falling stream, clipped to a narrow column Layers 2 and 4 are the same clip (pour-liquid.webm — glass keyed out, liquid only) scrubbed off one shared currentTime, so they can never drift apart. All geometry comes from place(), anchored to the sachet's real torn tip. */ #auriva-home .pour-scene{position:absolute;inset:0;opacity:0} #auriva-home .pour-svg{position:absolute;overflow:visible} /* object-fit MUST be fill. A