/* ── Brand tokens · oaza-mira.app + warm remembrance rework ── */ :root{ --gold:#E09D00; --gold-light:#E9C36B; --gold-soft:#F2DCA8; --green:#50641B; --green-deep:#3d4d15; --green-ink:#14120c; --green-light:#B6C485; --beige:#B8AE9F; --parch:#F8F1E2; --parch-2:#F2E8D3; --parch-3:#EBDFC4; --card:#FFFDF6; --grey:#79705C; --ink:#3A342A; --radius:16px; --radius-lg:24px; --shadow:0 10px 22px -6px rgba(80,100,27,.10); --shadow-lift:0 22px 34px -8px rgba(80,100,27,.16); --shadow-gold:0 10px 15px -3px rgba(224,157,0,.30); --grad-gold:linear-gradient(135deg,var(--gold),var(--gold-light)); --grad-green:linear-gradient(150deg,#5a7020 0%,var(--green) 40%,#2c380e 100%); --ease:cubic-bezier(.22,.61,.36,1); --font-head:'Maven Pro',sans-serif; --font-accent:'Cormorant Garamond',Georgia,serif; /* ── spacing scale · 4px base ─────────────────────────────────── Every padding, margin and gap on this page resolves to one of these steps. No one-off pixel values. */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px; --s-9:40px; --s-10:48px; --s-11:56px; --s-12:64px; --s-13:80px; --s-14:96px; /* semantic spacing roles — these are what the page authors against */ --topbar-h:70px; /* Wie weit die Kopfleiste vom Fensterrand schwebt. Die Marketing-Seite setzt pt-4 sm:pt-6 -> 16/24px; hier fluid dazwischen. Jede Stelle, die Inhalt unter der Leiste beginnen laesst, muss BEIDE Werte addieren -- die Leiste ist jetzt --topbar-h hoch UND --topbar-gap tief. */ --topbar-gap:clamp(16px,2vw,24px); --gutter:clamp(20px,4vw,32px); /* container side padding, fluid */ --section-y:clamp(40px,5.2vw,60px); /* section vertical rhythm, no breakpoint cliff */ --band-p:clamp(32px,4.6vw,56px); /* interior of the dark bands */ --head-gap:var(--s-9); /* heading block → its content */ --card-p:var(--s-6); /* card interior, one value everywhere */ --grid-gap:var(--s-6); --stack-tight:var(--s-2); --stack:var(--s-4); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} /* The grain is a background layer on , not a fixed overlay element. As `position:fixed; z-index:1` it forced Chromium to promote every section above it into its own FULL-HEIGHT composited layer (#cjenik was 6853px, #dokazi 5160px) — 82 layers and ~477MB of GPU memory, which is what made scrolling stutter once the tall sections came into play. Painted into the body background it costs one tiled raster and promotes nothing. */ body{font-family:var(--font-head);color:var(--ink);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden; /* GROUND: flat #FDFCF9, exactly what the marketing site paints. Everything else already matched — --gold #E09D00, --green #50641B, --beige #B8AE9F, Maven Pro, Cormorant Garamond, all identical hex to oaza-mira.app. The ground was the only thing that ever differed. ⚠️ THE BODY GRAIN IS GONE TOO, AND THAT WAS A SECOND ROUND. The first attempt swapped the parchment gradient for #FDFCF9 but kept `noise-bg.svg` over it, on the argument that a texture is not a colour. On the deployed page it plainly was one: that file is a fractalNoise rect at opacity 0.55, and 55% grey grain across the whole viewport turns near-white into pale grey. The measured body colour was correct and the page still did not match. The marketing site does use grain — at opacity 0.04 to 0.30, with mix-blend-overlay, and only over dark decorative sections. The equivalent here is `noise.svg` on .hero-noise, .vband .noise and .pkg-band .noise, which are exactly those dark bands and are untouched. What is removed is only the full-page layer, which the marketing site has no counterpart to. The performance note below is about WHERE grain was painted, not whether the body had any; the dark-band layers it describes all remain. */ background:#FDFCF9} /* position:relative only — a z-index here would re-create the stacking contexts that caused the per-section layer promotion above. */ main,header,footer,section,.final-wrap{position:relative} img{display:block;max-width:100%} button{font-family:inherit;cursor:pointer;border:none;background:none} a{color:var(--green);transition:color .2s ease} a:hover{color:var(--gold)} .container{max-width:1160px;margin:0 auto;padding:0 var(--gutter)} h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.12;color:var(--green)} /* Section rhythm — one fluid value, no breakpoint cliff. Adjacent sections read as a constant 2×--section-y gap between movements. */ .section{padding:var(--section-y) 0;position:relative;overflow:hidden} /* A section whose content is a self-contained dark band sits flush on top: the band's own --band-p supplies the missing half of the interval. */ .section--flush-top{padding-top:0} /* warm tints that used to be inline style attributes */ .section--tint-a{background:linear-gradient(180deg,rgba(235,223,196,0),rgba(233,195,107,.14) 20%,rgba(182,196,133,.10) 80%,transparent)} .section--tint-b{background:linear-gradient(180deg,transparent,rgba(233,195,107,.12) 30%,rgba(182,196,133,.08) 75%,transparent)} /* Heading block → its content. One value, everywhere. */ .sec-head{margin-bottom:var(--head-gap)} .sec-head>.price-note:last-child{margin-bottom:0} .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s-3)} .eyebrow-light{color:var(--gold-light)} .accent-line{font-family:var(--font-accent);font-style:italic;font-weight:500;font-size:clamp(19px,2.4vw,24px);color:var(--gold);line-height:1.35} .h-rule{width:64px;height:3px;background:var(--grad-gold);border-radius:2px;margin:var(--s-5) 0 0;transform-origin:left center} .center{text-align:center} .center .h-rule{margin-left:auto;margin-right:auto;transform-origin:center} /* ── browser surfaces · theme what we did not draw ── */ :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px} ::selection{background:rgba(224,157,0,.30);color:var(--green-ink)} .hero ::selection,.vband ::selection,.pkg-band ::selection,footer ::selection{background:rgba(233,195,107,.42);color:#14120c} html{scrollbar-color:var(--gold) rgba(80,100,27,.09);scrollbar-width:thin} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:rgba(80,100,27,.09)} ::-webkit-scrollbar-thumb{border-radius:50px;border:3px solid transparent;background:var(--gold);background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:var(--green);background-clip:padding-box} input,textarea,select{caret-color:var(--gold)} a{text-underline-offset:3px;text-decoration-thickness:1.5px} .fact .v,.tier b,.pcard .price,.pkg .p1,.live-price,.odp-d{font-variant-numeric:tabular-nums} /* ── icon system · one drawn set, one stroke weight ── */ .ico{width:15px;height:15px;flex:none;vertical-align:-.18em;stroke-width:1.9} /* Ambient drift blobs — the "alive" background. These used filter:blur(70px). A 70px blur outsets the filter region ~210px per side, so each blob needed a ~900px raster + Gaussian, re-applied as it moved under the section's overflow:hidden clip — 31.7ms mean frames in the FAQ. The element was already a radial-gradient fading to transparent, so the blur bought almost nothing: the same falloff is baked into the stops here, at zero per-frame cost. */ /* No will-change here. A permanently-composited child inside .section{overflow:hidden} forces the SECTION to become a render surface sized to its full height — that is what promoted #cjenik (6853px) and #dokazi (5160px). GSAP promotes these for the duration of the drift tween anyway, and the tween is paused whenever the section is off screen. */ .blob{position:absolute;border-radius:50%;pointer-events:none;opacity:.62} .blob-gold{background:radial-gradient(circle closest-side, rgba(233,195,107,.50) 0%, rgba(233,195,107,.40) 26%, rgba(233,195,107,.24) 46%, rgba(233,195,107,.11) 64%, rgba(233,195,107,.03) 82%, rgba(233,195,107,0) 100%)} .blob-sage{background:radial-gradient(circle closest-side, rgba(182,196,133,.46) 0%, rgba(182,196,133,.37) 26%, rgba(182,196,133,.22) 46%, rgba(182,196,133,.10) 64%, rgba(182,196,133,.03) 82%, rgba(182,196,133,0) 100%)} /* floating candle-light particles */ .particles{position:absolute;inset:0;pointer-events:none;overflow:hidden} .particles i{position:absolute;bottom:-4%;border-radius:50%;background:radial-gradient(circle,rgba(242,220,168,.95),rgba(233,195,107,.35) 60%,transparent);filter:blur(.6px);opacity:0;animation:rise linear infinite} @keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.75}55%{opacity:.5;transform:translateY(-55vh) translateX(14px)}100%{transform:translateY(-108vh) translateX(-10px);opacity:0}} .particles i:nth-child(1){left:6%;width:5px;height:5px;animation-duration:11s;animation-delay:0s} .particles i:nth-child(2){left:16%;width:3px;height:3px;animation-duration:14s;animation-delay:2.2s} .particles i:nth-child(3){left:27%;width:6px;height:6px;animation-duration:12s;animation-delay:4.5s} .particles i:nth-child(4){left:38%;width:3px;height:3px;animation-duration:16s;animation-delay:1.2s} .particles i:nth-child(5){left:47%;width:4px;height:4px;animation-duration:13s;animation-delay:6s} .particles i:nth-child(6){left:58%;width:5px;height:5px;animation-duration:15s;animation-delay:3.4s} .particles i:nth-child(7){left:67%;width:3px;height:3px;animation-duration:11.5s;animation-delay:7.6s} .particles i:nth-child(8){left:76%;width:6px;height:6px;animation-duration:14.5s;animation-delay:.8s} .particles i:nth-child(9){left:85%;width:4px;height:4px;animation-duration:12.8s;animation-delay:5.2s} .particles i:nth-child(10){left:93%;width:3px;height:3px;animation-duration:16.5s;animation-delay:2.9s} .particles i:nth-child(11){left:33%;width:4px;height:4px;animation-duration:13.6s;animation-delay:8.8s} .particles i:nth-child(12){left:71%;width:4px;height:4px;animation-duration:15.4s;animation-delay:10s} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);font-weight:600;font-size:16px;border-radius:50px;padding:var(--s-4) var(--s-9);min-height:52px;text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .btn-gold{background:var(--grad-gold);color:#fff;box-shadow:var(--shadow-gold)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 20px -3px rgba(224,157,0,.40);color:#fff} .btn-ghost{background:rgba(255,255,255,.15);color:#FDFCF9;border:1px solid rgba(255,255,255,.40)} .btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);color:#fff} .btn:active{transform:scale(.97)} .btn-sm{padding:var(--s-3) var(--s-6);min-height:44px;font-size:15px} /* ── topbar ── */ /* Tinted to the new ground for the same reason the body was: a parchment bar floating over near-white content is the seam a visitor reads as "different site". The blur, the gold hairline and the hide-on-scroll stay — those are this site's own manners and the marketing header has nothing that conflicts. */ .topbar{position:fixed;inset:0 0 auto;z-index:200;padding:var(--topbar-gap) var(--gutter) 0;pointer-events:none;transition:transform .45s var(--ease)} .topbar.hidden-up{transform:translateY(-100%)} .topbar-in{display:flex;align-items:center;justify-content:space-between;height:var(--topbar-h);gap:var(--s-3);pointer-events:auto;background:rgba(255,255,255,.90);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.30);border-radius:40px;box-shadow:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.05);transition:background .45s var(--ease),box-shadow .45s var(--ease)} /* Gescrollt: dichter und tiefer, wie die Marketing-Seite bei scrollY>20. */ .topbar.is-scrolled .topbar-in{background:rgba(255,255,255,.95);border-color:rgba(203,213,225,.60);box-shadow:0 10px 40px -10px rgba(0,0,0,.15)} /* ── main navigation, mirrored from the marketing site's Navbar.tsx ────────── Same links, same order, same olive→gold hover. Until now these pages were a dead end: a visitor who arrived from Google on a cemetery page could reach the app or nothing at all. 9,726 pages, no way back into the site they belong to. Hidden below 900px rather than collapsed into a burger. The header already carries a language selector and the order CTA, and on a phone the CTA is the thing that must survive — a third control there would push it off the row. The footer links remain the way back on small screens. */ .topnav{display:none;align-items:center;gap:26px;margin-left:auto;margin-right:var(--s-5)} @media(min-width:900px){.topnav{display:flex}} .topnav a{font-weight:600;font-size:15px;color:var(--green);text-decoration:none;white-space:nowrap;transition:color .2s} .topnav a:hover,.topnav a:focus-visible{color:var(--gold)} .logo{display:flex;align-items:center;gap:var(--s-3);text-decoration:none} /* 56px, exakt wie die Marketing-Seite (h-14). Der Schriftzug daneben ist entfallen: "OAZA MIRA" steht bereits IM Logo, er stand also zweimal da. Die .logo .word-Regeln darunter greifen dadurch nirgends mehr. */ .logo img{width:56px;height:56px;object-fit:contain} .logo .word{font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--green)} .logo .word em{font-style:normal;color:var(--gold)} .topbar-right{display:flex;align-items:center;gap:var(--s-3)} @media(max-width:640px){.topbar .btn-sm{padding:var(--s-3) var(--s-4);font-size:13.5px}.logo .word{display:none}} /* language selector */ .lang{position:relative} .lang-btn{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;font-size:14px;color:var(--green);border:1px solid rgba(80,100,27,.25);border-radius:50px;padding:var(--s-2) var(--s-4);min-height:44px;background:linear-gradient(180deg,rgba(255,253,246,.9),rgba(242,232,211,.9));transition:border-color .2s,box-shadow .2s} .lang-btn:hover{border-color:var(--gold);box-shadow:var(--shadow)} .lang-btn img{width:20px;height:15px;border-radius:2px;object-fit:cover} .lang-btn .car{width:11px;height:11px;color:var(--gold);transition:transform .3s var(--ease)} .lang.open .lang-btn .car{transform:rotate(180deg)} .lang-panel{position:absolute;top:calc(100% + var(--s-3));right:0;width:296px;max-height:400px;display:flex;flex-direction:column;background:linear-gradient(180deg,#FFFDF6,#F6EDDA);border:1px solid rgba(224,157,0,.30);border-radius:var(--radius);box-shadow:0 24px 48px -12px rgba(40,45,15,.28);opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease);overflow:hidden} .lang.open .lang-panel{opacity:1;transform:none;pointer-events:auto} /* On a phone the panel is pinned to the VIEWPORT, not to .lang (#31). Anchored right:0 to .lang - which sits mid-topbar, not at the screen edge - a fixed 296px panel hangs off the left edge, and the narrower the phone the worse it gets because the other topbar items push .lang further left: -31px at 414px, -55px at 390px, -125px at 320px. Invisible on desktop, where there is room to the left. Any width-based patch would only move the breakpoint, because the bug is that the anchor moves. */ @media(max-width:560px){ .lang-panel{position:fixed;top:calc(var(--topbar-h) + var(--topbar-gap) + var(--s-2));left:var(--gutter);right:var(--gutter);width:auto;max-width:none} } .lang-search{margin:var(--s-3) var(--s-3) var(--s-2);position:relative} .lang-search input{width:100%;border:1px solid rgba(80,100,27,.22);border-radius:50px;padding:var(--s-3) var(--s-4) var(--s-3) var(--s-9);font-family:inherit;font-size:14px;color:var(--ink);background:rgba(255,255,255,.75)} .lang-search input:focus{outline:2px solid var(--gold)} .lang-search::before{content:"";position:absolute;left:var(--s-4);top:50%;transform:translateY(-50%);width:14px;height:14px;background:var(--grey);opacity:.75; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4L21 21'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4L21 21'/%3E%3C/svg%3E") center/contain no-repeat} .lang-list{overflow-y:auto;padding:var(--s-1) var(--s-2) var(--s-3);flex:1} .lang-item{display:flex;align-items:center;gap:var(--s-3);width:100%;text-align:left;padding:var(--s-3);border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:background .15s} .lang-item img{width:22px;height:16px;border-radius:2px;object-fit:cover;flex:none} .lang-item:hover{background:rgba(233,195,107,.18);color:var(--green)} .lang-item .soon{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);background:rgba(122,115,102,.12);border-radius:50px;padding:var(--s-1) var(--s-2)} .lang-item[aria-current]{background:rgba(233,195,107,.25)} .lang-item[aria-current]::after{content:"";margin-left:auto;width:14px;height:14px;flex:none;background:var(--gold); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat} .lang-item.dis{opacity:.6;cursor:default} .lang-empty{padding:var(--s-4);text-align:center;font-size:13.5px;color:var(--grey);display:none} /* ── hero · storytelling video loop ── */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;color:#FDFCF9;overflow:hidden;padding:calc(var(--topbar-h) + var(--topbar-gap) + var(--s-13)) 0 var(--s-14)} .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-media video{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;will-change:transform} .hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(16,20,4,.80) 0%,rgba(22,28,7,.42) 46%,rgba(18,16,10,.22) 100%)} .hero-noise{position:absolute;inset:0;z-index:2;background:url('noise.svg');opacity:.3;pointer-events:none} .hero-copy{text-shadow:0 1px 14px rgba(10,12,3,.45)} .hero .particles{z-index:2} .hero-in{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-11);align-items:center} @media(max-width:960px){.hero-in{grid-template-columns:1fr;gap:var(--s-9)}} .crumbs{font-size:13.5px;color:rgba(253,252,249,.62);margin-bottom:var(--s-5)} .crumbs a{color:rgba(253,252,249,.62);text-decoration:none} .crumbs a:hover{color:var(--gold-light)} .crumbs span{margin:0 var(--s-2);opacity:.5} .hero h1{font-size:clamp(34px,5vw,54px);margin:var(--s-4) 0 var(--s-5);background:linear-gradient(135deg,#fff 30%,var(--gold-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fff} .hero .lead{font-size:clamp(16.5px,1.9vw,19px);color:rgba(253,252,249,.88);max-width:58ch;margin-bottom:var(--s-8)} .hero .lead strong{color:var(--gold-light)} .avail{display:inline-flex;align-items:center;gap:var(--s-3);font-size:14.5px;font-weight:600;border-radius:50px;padding:var(--s-2) var(--s-5);margin:var(--s-5) 0 var(--s-1);background:rgba(182,196,133,.14);border:1px solid rgba(182,196,133,.42);color:#DCE8C2} .avail .dot{width:9px;height:9px;border-radius:50%;background:var(--green-light);box-shadow:0 0 0 0 rgba(182,196,133,.55);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(182,196,133,.55)}70%{box-shadow:0 0 0 9px rgba(182,196,133,0)}100%{box-shadow:0 0 0 0 rgba(182,196,133,0)}} .avail--soon{background:rgba(233,195,107,.13);border-color:rgba(233,195,107,.42);color:var(--gold-soft)} .avail--soon .dot{background:var(--gold-light);box-shadow:0 0 0 0 rgba(233,195,107,.5);animation-name:pulse-soon} @keyframes pulse-soon{0%{box-shadow:0 0 0 0 rgba(233,195,107,.5)}70%{box-shadow:0 0 0 9px rgba(233,195,107,0)}100%{box-shadow:0 0 0 0 rgba(233,195,107,0)}} .hero-ctas{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-8)} .hero-chips{display:flex;gap:var(--s-3);flex-wrap:wrap} /* No backdrop-filter on the small chips/tags: each one forced a backdrop readback + blur every frame, and the six flag chips sit directly over a playing video. They already read as glass against the dark veil, so the alpha carries it. (Blur kept where it does real work: the nav and the modal/cart scrims.) */ .chip{display:inline-flex;align-items:center;gap:var(--s-2);font-size:13.5px;font-weight:600;color:#FDFCF9;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:50px;padding:var(--s-2) var(--s-4)} .chip .ico{color:var(--gold-light)} .chip img{width:20px;height:15px;border-radius:2px;object-fit:cover} /* before/after slider */ .ba{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 60px -18px rgba(10,12,3,.55);user-select:none;touch-action:pan-y;background:var(--green-ink)} .ba img{width:100%;height:100%;object-fit:cover;pointer-events:none} .ba .under{position:relative;z-index:1} /* will-change:clip-path here promoted all 7 sliders permanently, which in turn forced .proof-card and #dokazi into full-height render surfaces. clip-path animates fine without it. */ .ba .over{position:absolute;inset:0;z-index:2;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)} .ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);z-index:4;width:0;pointer-events:none} /* Lit wipe seam: a directional falloff either side of a crisp core, not a zero-offset halo. Reads as light spilling from the cut, and stays physical. */ .ba .handle::before{content:"";position:absolute;top:0;bottom:0;left:-15px;width:33px; background:linear-gradient(90deg, transparent 0%, rgba(233,195,107,.26) 40%, var(--gold-light) 45.5%, var(--gold-light) 54.5%, rgba(233,195,107,.26) 60%, transparent 100%)} .ba .knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--grad-gold);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(10,12,3,.45);color:#fff;font-size:15px;font-weight:800;letter-spacing:-1px} .ba .tag{position:absolute;top:var(--s-4);z-index:3;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:var(--s-2) var(--s-3);border-radius:50px} .ba .tag-b{left:var(--s-4);background:rgba(20,18,12,.74);color:#E8E4DA} .ba .tag-a{right:var(--s-4);background:rgba(224,157,0,.88);color:#fff} .ba .tag-illu{position:absolute;right:var(--s-4);bottom:var(--s-3);z-index:3;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(253,252,249,.85);background:rgba(20,18,12,.70);border-radius:50px;padding:var(--s-1) var(--s-3)} .ba input[type=range]{position:absolute;inset:0;z-index:5;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0} .hero-ba .ba{aspect-ratio:4/3.4} .hero-ba figcaption{font-size:13.5px;color:rgba(253,252,249,.78);text-align:center;margin-top:var(--s-4)} .hero-ba figcaption strong{color:var(--gold-light)} @media(max-width:960px){.hero-ba{max-width:520px;margin:0 auto;width:100%}} .scroll-cue{position:absolute;left:50%;bottom:var(--s-6);transform:translateX(-50%);z-index:3;color:rgba(253,252,249,.6);font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:var(--s-2)} .scroll-cue::after{content:"";width:1.5px;height:34px;background:linear-gradient(180deg,var(--gold-light),transparent)} @media(max-width:960px){.scroll-cue{display:none}} /* ── facts ── */ .facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-9);align-items:start} @media(max-width:880px){.facts-grid{grid-template-columns:1fr}} .facts-list{background:linear-gradient(180deg,var(--card),#F8EFDC);border-radius:var(--radius);border:1px solid rgba(224,157,0,.20);box-shadow:var(--shadow);overflow:hidden} .fact{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) var(--card-p);border-bottom:1px solid rgba(80,100,27,.08);font-size:15px} .fact:last-child{border-bottom:none} .fact .k{color:var(--grey);font-weight:500} .fact .v{font-weight:700;color:var(--green);text-align:right} /* tel: and website links in the facts table were 17px tall - the smallest tap targets on the page. Give them a real 44px box. */ .fact a{display:inline-flex;align-items:center;min-height:44px} .about-txt{font-size:15.5px;margin-top:var(--s-5);max-width:66ch} .mapwrap{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(224,157,0,.20);box-shadow:var(--shadow);background:var(--parch-2)} .mapwrap iframe{display:block;width:100%;height:360px;border:0} /* ── pricing ── */ .price-note{font-size:14.5px;color:var(--grey);margin-top:var(--s-4);max-width:70ch} /* first group takes its air from .sec-head; group→group is a wider interval */ .pgroup+.pgroup{margin-top:var(--s-13)} .pgroup h3{font-size:21px;margin-bottom:var(--s-4);display:flex;align-items:center;gap:var(--s-3)} .pgroup h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(224,157,0,.4),transparent)} .pgroup .price-note{margin:0 0 var(--s-6)} .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)} @media(max-width:960px){.price-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}} .pcard{position:relative;background:linear-gradient(180deg,var(--card) 0%,#F7EEDB 100%);border-radius:var(--radius);border:1px solid rgba(224,157,0,.18);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)} .pcard .pimg{position:relative;aspect-ratio:16/10;overflow:hidden} .pcard .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .pcard:hover .pimg img{transform:scale(1.05)} .pcard .pimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(58,52,42,.28))} .pcard .pbody{padding:var(--card-p);display:flex;flex-direction:column;flex:1} .pcard h4{font-size:19px;font-weight:700;color:var(--green);margin-bottom:var(--s-2);letter-spacing:-.01em} .pcard .desc{font-size:14px;color:var(--grey);margin-bottom:var(--s-4)} .tiers{display:grid;gap:var(--s-2);margin-bottom:var(--s-4)} .tier{display:flex;justify-content:space-between;gap:var(--s-3);font-size:13.5px;color:var(--ink);border-bottom:1px dashed rgba(122,115,102,.25);padding-bottom:var(--s-1)} .tier b{color:var(--green);font-weight:700} .pcard .price{font-size:26px;font-weight:800;color:var(--green);letter-spacing:-.02em;margin-top:auto;padding-top:var(--s-4)} .pcard .price small{display:block;font-size:12.5px;font-weight:600;color:var(--grey);letter-spacing:0} .proof-incl{display:inline-flex;align-items:center;gap:var(--s-2);font-size:12.5px;font-weight:700;color:var(--green);margin-top:var(--s-3)} .proof-incl .ico{color:var(--gold)} .pcard .btn{margin-top:var(--s-4);align-self:flex-start} .pcard .flag-top{position:absolute;top:var(--s-4);left:var(--s-4);z-index:3;background:var(--grad-gold);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:50px;padding:var(--s-1) var(--s-3);box-shadow:var(--shadow-gold)} /* product configurator cards */ .cfg-grid{grid-template-columns:repeat(2,1fr)} @media(max-width:960px){.cfg-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}} /* Every product shot is 640x640. The old 16/11 box with object-fit:cover cut roughly 30% off the top and bottom of every bouquet, wreath and arrangement — vases and ribbons were sliced away. A square box shows the whole product, and `contain` guarantees nothing is ever cropped if a non-square shot is added later. The dark bottom scrim is dropped here: it belongs on the photographic service cards, not over a product on a light backdrop. */ .cfg .pimg{aspect-ratio:1/1;background:radial-gradient(120% 110% at 50% 0%,#FFFDF6 0%,var(--gold-soft) 130%)} .cfg .pimg img{object-fit:contain;transition:opacity .3s ease,transform .8s var(--ease)} .cfg .pimg::after{display:none} .cfg:hover .pimg img{transform:scale(1.03)} .cfg .pimg img.swapping{opacity:0} .cfg .pimg .live-price{position:absolute;right:var(--s-4);bottom:var(--s-3);z-index:3;background:rgba(20,18,12,.82);color:var(--gold-light);font-weight:800;font-size:16px;border-radius:50px;padding:var(--s-2) var(--s-4)} .opt-label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin:var(--s-4) 0 var(--s-2)} .opt-row{display:flex;flex-wrap:wrap;gap:var(--s-2)} .optbtn{display:inline-flex;flex-direction:column;justify-content:center;min-height:40px;font-size:13px;font-weight:700;color:var(--green);border:1.5px solid rgba(80,100,27,.28);border-radius:50px;padding:var(--s-2) var(--s-3);background:rgba(255,253,246,.7);transition:all .25s var(--ease)} .optbtn small{display:block;font-size:10.5px;font-weight:600;color:var(--grey);line-height:1.2} .optbtn:hover{border-color:var(--gold)} .optbtn.on{background:var(--grad-gold);color:#fff;border-color:transparent;box-shadow:var(--shadow-gold)} .optbtn.on small{color:rgba(255,255,255,.85)} .cfg .price{margin-top:var(--s-4)} @media(pointer:coarse){.optbtn{min-height:44px;padding-inline:var(--s-4)}} /* memorial packages band */ .pkg-band{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--s-13);padding:var(--band-p);color:#FDFCF9} .pkg-band .bg{position:absolute;inset:0;background:url('hero-story-poster.jpg') center/cover no-repeat} .pkg-band .veil{position:absolute;inset:0;background:linear-gradient(150deg,rgba(30,38,8,.94) 0%,rgba(61,77,21,.88) 55%,rgba(20,18,12,.93) 100%)} .pkg-band .noise{position:absolute;inset:0;background:url('noise.svg');opacity:.4} .pkg-band>.inner{position:relative;z-index:2} .pkg-band h3{color:#fff;font-size:24px;margin-top:var(--s-2)} .pkg-band .accent-line{color:var(--gold-light)} .pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin-top:var(--s-8)} @media(max-width:960px){.pkg-grid{grid-template-columns:1fr}} .pkg{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1px solid rgba(233,195,107,.28);border-radius:var(--radius);padding:var(--s-7) var(--card-p);backdrop-filter:blur(6px);display:flex;flex-direction:column;transition:transform .35s var(--ease),border-color .35s} .pkg:hover{transform:translateY(-4px);border-color:var(--gold-light)} .pkg.mid{border-color:var(--gold);background:linear-gradient(180deg,rgba(233,195,107,.16),rgba(255,255,255,.05))} .pkg .name{font-family:var(--font-accent);font-style:italic;font-size:22px;color:var(--gold-light);margin-bottom:var(--s-2)} .pkg-flag{position:absolute;top:calc(var(--s-3) * -1);right:var(--s-5);background:var(--grad-gold);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:50px;padding:var(--s-1) var(--s-3);box-shadow:var(--shadow-gold)} .pkg-list{list-style:none;margin:0 0 var(--s-4);display:grid;gap:var(--s-2);flex:1} .pkg-list li{font-size:13.5px;color:rgba(253,252,249,.88);padding-left:var(--s-6);position:relative} .pkg-list li::before{content:"";position:absolute;left:0;top:.36em;width:13px;height:13px;background:var(--gold-light); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat} /* the package's one-line promise — was three identical inline style attrs */ .pkg .what{font-family:var(--font-accent);font-style:italic;font-size:15.5px;color:rgba(253,252,249,.80);margin-bottom:var(--s-4);flex:1} .pkg .p1{font-size:26px;font-weight:800;color:#fff} .pkg .p1 small{font-size:13px;font-weight:600;color:rgba(253,252,249,.65)} .pkg .p2{font-size:13px;color:var(--gold-light);font-weight:600;margin-top:var(--s-1)} .pkg .btn{margin-top:var(--s-4);align-self:flex-start} .pkg-note{font-size:13px;color:rgba(253,252,249,.7);margin-top:var(--s-5);max-width:78ch} /* ── steps ── */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)} @media(max-width:840px){.steps{grid-template-columns:1fr}} .step{background:linear-gradient(180deg,var(--card),#F7EEDB);border-radius:var(--radius);border:1px solid rgba(224,157,0,.18);box-shadow:var(--shadow);padding:var(--s-8) var(--card-p);transition:transform .3s ease,box-shadow .3s ease} .step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)} .step .n{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--grad-gold);color:#fff;font-weight:800;font-size:19px;margin-bottom:var(--s-5);box-shadow:var(--shadow-gold)} .step h3{font-size:19px;margin-bottom:var(--s-2)} .step p{font-size:14.5px;color:var(--grey)} /* ── proof gallery ── */ .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)} @media(max-width:960px){.proof-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}} .proof-card{background:linear-gradient(180deg,var(--card),#F7EEDB);border-radius:var(--radius);border:1px solid rgba(224,157,0,.18);box-shadow:var(--shadow);overflow:hidden} .proof-card .ba{border-radius:0;box-shadow:none;aspect-ratio:4/3} .proof-card .cap{padding:var(--s-5) var(--card-p);font-size:13.5px;color:var(--grey)} .proof-src{font-size:14px;color:var(--grey);margin-top:var(--s-4);max-width:72ch} /* ── video band (diaspora / final) ── */ /* No translateZ(0) here. Chrome reported "Has a trivial 3d transform" for the band and its video, and everything overlapping them then promoted too ("Overlaps other composited content") — .veil, .inner, .pkg-band. The video composites on its own as accelerated video; the band does not need to. */ .vband{position:relative;border-radius:var(--radius-lg);overflow:hidden;color:#FDFCF9;padding:var(--band-p)} /* Still frames, not looping video. Each band video pushed 24 texture uploads a second through a rounded clip under a veil + noise + 8 particles: p95 24.8ms and 75ms worst frames at the two band entries, vs 8.5ms / 33ms with a still. The clip sits behind an 82-93% veil, so the motion was barely perceptible. (.pkg-band has always used a still and was never one of the slow spots.) To restore motion, swap the .bg div back for the