/* HydraGlow Mousse — product page Section 1 laid out from the Screenshot_105 sketch: a circle centred off the left edge holding the wind pass and the bottle, effect bubbles on leads, and a buy column on the right. Section 2 from Screenshot_106. */ /* Faces are the constitution pair — Google Sans carries Latin + digits, Heebo variable carries Hebrew. Same files the landing loads, served from the root. */ /* ══════════════════════════════════════════════════════════════════════ BRAND TOKENS — the CANDLELIT DARK constitution (/wp-content/themes/yaara-awwwards/assets/css/yaara.css + CONSTITUTION.md). The old paper block kept its NAMES so the whole sheet below still resolves, but every value now lives in the honeycomb interior: deep warm dark ground, gold as glowing light, photography as light islands. ══════════════════════════════════════════════════════════════════════ */ :root{ --bg:#FAF7F2; --card:#FFFFFF; --dusk:#F3EDE3; --ink:#33291D; /* warm ink on the porcelain ground */ --ink2:#6E5C48; --ink3:#A29076; --charcoal:var(--ink); /* legacy name: the page's base text colour */ --ivory:#FFFFFF; --taupe:#EFE7DA; /* one register per act — LUMINOUS PORCELAIN: near-white papers, warmth in light */ --g1:#FAF7F2; --g1b:#FFFFFF; --g2:#F6F1E8; --g2b:#FBF8F3; --g3:#FAF7F2; --g4:#FAF7F2; --g4b:#F5EFE6; /* GOLD is pigment here — honey on porcelain */ --gold:#B28B52; --gold-hi:#D9BE93; --gold-lo:#8E6B39; --gold-light:#C9A469; --gold-deep:#8E6B39; /* on light, deep gold DARKENS */ --line:rgba(84,64,40,.14); --metal:linear-gradient(96deg,#B99466 0%,#CCA36F 14%,#E9B77C 30%,#EAB67D 50%,#B78D61 70%,#98724C 85%,#926B47 100%); --metal-ink:linear-gradient(104deg,#6E4F16 0%,#9A7126 20%,#C9993C 42%,#8A6420 60%,#B98F35 80%,#7E5B1C 100%); --disp:"Google Sans",Heebo,"Segoe UI",sans-serif; --serif:"Google Sans",Heebo,sans-serif; --hand:"Google Sans",Heebo,sans-serif; --ease:cubic-bezier(.62,0,.18,1); } /* ════════════════════ end shared block ════════════════════ */ :root{ /* page-local names, mapped onto the shared tokens */ --ink-soft:var(--ink2); --ink-faint:var(--ink3); --gold-btn:var(--gold); --gold-btn-ink:#241705; --rose:#B28B52; /* the leads — honey hairlines on the plate */ --paper:var(--g4); --deep:var(--g2); --glass:rgba(255,253,248,.82); --display:var(--disp); --sans:"Google Sans",Heebo,"Segoe UI",system-ui,sans-serif; --pad:clamp(22px,4.03vw,58px); } /* -------------------------------------------------- Hebrew text only --- The document is NOT dir="rtl". Setting it there mirrors every flex/grid row — nav, step rings, formula pillars — which moves the OBJECTS. Only the text runs rtl; the layout keeps the English arrangement exactly. */ .pdp__eyebrow,.pdp__quote,.pdp__note,.pdp__cart, .fx figcaption, .usage__title,.usage__lede,.ring__n,.stepcopy, .formula__eyebrow,.formula__title,.formula__lede, .pillar h3,.pillar p,.orbit__core em,.he{direction:rtl;text-align:right} .fx figcaption,.ring__n,.orbit__core em{text-align:inherit} /* Hebrew has no case, and heavy tracking just breaks words apart */ .pdp__eyebrow,.formula__eyebrow,.ring__n,.orbit__core em{ text-transform:none;letter-spacing:.03em} .pdp__quote{line-height:1.6} .stepcopy .sell{line-height:1.5} .formula__lede,.pillar p,.stepcopy p{line-height:1.62} /* ------------------------------------------------------------ grain ---- a fine tileable noise over everything: kills gradient banding on the big soft washes and stops the flat areas reading as dead colour */ body::after{ content:"";position:fixed;inset:0;z-index:400;pointer-events:none; background:url("assets/grain.png") repeat; background-size:160px 160px; opacity:.05;mix-blend-mode:soft-light; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--charcoal); font-family:var(--sans);-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} /* ------------------------------------------------------------------ nav */ .nav{position:absolute;inset:0 0 auto;z-index:20;display:grid; grid-template-columns:1fr auto 1fr;align-items:center;padding:34px var(--pad) 0} .nav__links{display:flex;gap:clamp(20px,3vw,44px)} .nav__links a,.nav__end a{font-size:clamp(14px,1.25vw,17px);opacity:.88;transition:opacity .25s} .nav__links a:hover,.nav__end a:hover{opacity:1} /* the real lockup: her mandala emblem beside the actual YAARA wordmark */ .nav__mark{display:block;line-height:0} /* +15% on the lockup twice over, per the operator — the original was clamp(20px,1.96vw,28px), so this is 1.32x that */ .nav__mark img{display:block;width:auto;height:clamp(26px,2.59vw,37px)} .nav__end{display:flex;align-items:center;justify-content:flex-end;gap:14px} .nav__cartlink{display:block;line-height:0;color:inherit;opacity:.88;transition:opacity .25s} .nav__cartlink:hover{opacity:1} .nav__bag{width:22px;height:22px;display:block} /* ======================================================== SECTION 1: pdp */ .pdp{ position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,var(--buyw,38%)); align-items:center; overflow:hidden; isolation:isolate; } /* light, not flat fill: a broad soft key from the upper left where the disc and its sun sit, a warm bounce in the opposite corner, and a faint vignette so the panel has falloff instead of one dead value */ .pdp::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(78% 66% at 15% 24%, rgba(201,158,98,.10), rgba(201,158,98,0) 64%), radial-gradient(48% 46% at 97% 86%, rgba(201,158,98,.07), rgba(201,158,98,0) 72%); } .pdp::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; box-shadow:inset 0 0 220px 64px rgba(0,0,0,0.34); /* The other half of the fix that was only ever applied to .formula::after: this vignette's BOTTOM edge lands on the pdp/formula seam at full strength, and the next act's vignette lands there too. Two vignettes meeting nose to nose on the same row is what drew the hard line across the top of the formula act. Faded out before it reaches the seam. */ -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 99%); mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 99%); } .pdp__stage{position:relative;height:100svh;min-height:640px} /* ---- the disc -------------------------------------------------------- */ /* Circle of diameter 118vh whose centre sits off the left edge, so only the right cap of it is on screen. The mask feathers the last few percent of the radius to transparent, which is the "fades cleanly into the background" note on the sketch — a hard-edged circle reads as a cut-out sticker. */ .disc{ /* The sweep on Screenshot_107 is not a circle: it runs near-vertical at ~83% width down to a quarter height, then curves left at an increasing rate to ~32% at the bottom. Fitting a radial-gradient to it left the bottom of the arc far too wide, so the line is traced off the screenshot and emitted as a PRE-BLURRED PNG (build/disc_mask.py). It was an SVG with a feGaussianBlur, but making the compositor re-evaluate a filter while masking a playing full-bleed video is what made the hero stutter. A raster alpha mask is a straight texture lookup. */ position:absolute; inset:0; pointer-events:none; z-index:1; /* above the light wash, below the bottle */ -webkit-mask:url("assets/disc-mask.36c53878.png") center/100% 100% no-repeat; mask:url("assets/disc-mask.36c53878.png") center/100% 100% no-repeat; will-change:transform; /* keep it on its own compositor layer */ } /* Scrim. The .pdp light wash sits UNDER the video, so once the field went full-bleed it stopped lifting anything. This rides on top of the footage (and inherits the same mask) to hold the nav, the bubble captions and the top of the copy column legible over a bright sky. */ .disc::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(250,247,242,0.84), rgba(250,247,242,0.34) 10%, rgba(250,247,242,0) 22%), linear-gradient(0deg, rgba(250,247,242,0.94), rgba(250,247,242,0.42) 11%, rgba(250,247,242,0) 26%), radial-gradient(54% 34% at 6% 4%, rgba(250,247,242,0.66), rgba(250,247,242,0) 72%), radial-gradient(30% 26% at 20% 88%, rgba(250,247,242,0.5), rgba(250,247,242,0) 74%), linear-gradient(96deg, rgba(250,247,242,0) 54%, rgba(250,247,242,0.74) 88%), linear-gradient(rgba(250,247,242,0.16), rgba(250,247,242,0.16)); } .disc__vid{width:100%;height:100%;object-fit:cover;object-position:46% 62%;border:0} @media (prefers-reduced-motion:reduce){ .disc__vid{display:none} .disc{background:url("assets/backdrop.a07c46a1.webp") 52% 50%/cover no-repeat} } /* ---- the bottle ------------------------------------------------------ */ /* rotate is its own property, so the bob/sway transforms still compose */ .pdp__bottle{ position:absolute; left:var(--bx,16vw); top:50%; translate:-50% -50%; height:clamp(320px,56vh,600px); aspect-ratio:413/1600; rotate:var(--tilt,13deg); /* leans top-right, as sketched */ z-index:3; } .pdp__bottle::before{ content:"";position:absolute;z-index:-1;left:50%;bottom:-3%;translate:-50% 0; width:250%;height:11%;border-radius:50%; background:radial-gradient(closest-side,rgba(96,66,32,0.396),rgba(96,66,32,0) 72%); filter:blur(7px); animation:bottleShadow 5.6s ease-in-out infinite; } #bottle{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y; animation:bottleBob 5.6s ease-in-out infinite;will-change:transform} #bottle:active{cursor:grabbing} @keyframes bottleBob{0%,100%{transform:translate3d(0,-1.9%,0)}50%{transform:translate3d(0,1.9%,0)}} @keyframes bottleShadow{0%,100%{opacity:.48;transform:scale(1.14)}50%{opacity:1;transform:scale(.86)}} /* ---- leads + effect bubbles ------------------------------------------ */ /* no width/height here: JS sets the viewBox to the stage box, and a CSS width would override the attribute and squash every path horizontally */ .leads{position:absolute;inset:0;z-index:4;overflow:visible;pointer-events:none} .lead{fill:none;stroke:var(--rose);stroke-width:1.4;stroke-linecap:round; filter:drop-shadow(0 1px 1.5px rgba(96,66,32,0.385)); vector-effect:non-scaling-stroke; stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400); animation:leadDraw 1.1s cubic-bezier(.22,1,.36,1) forwards} .lead:nth-of-type(2){animation-delay:.14s} .lead:nth-of-type(3){animation-delay:.28s} .lead__dot{fill:var(--rose);opacity:0;animation:dotIn .5s ease forwards .6s} @keyframes leadDraw{to{stroke-dashoffset:0}} @keyframes dotIn{to{opacity:.9}} .fx{position:absolute;z-index:5;margin:0;display:flex;flex-direction:column;gap:10px; opacity:0;transform:translateY(10px);animation:fxIn .7s cubic-bezier(.22,1,.36,1) forwards} .fx--1{left:5.5vw; top:10.5%; animation-delay:.65s} .fx--2{left:27.5vw; top:28%; animation-delay:.79s} .fx--3{left:15vw; top:79%; animation-delay:.93s} @keyframes fxIn{to{opacity:1;transform:none}} .fx__disc{ display:block;width:var(--fx,108px);height:var(--fx,108px);border-radius:50%; overflow:hidden; box-shadow:0 0 0 1.5px rgba(84,64,40,0.16), 0 0 30px rgba(201,158,98,.16), 0 18px 36px -18px rgba(96,66,32,0.396); } .fx__disc img{width:100%;height:100%;object-fit:cover; animation:fxDrift 18s ease-in-out infinite alternate} @keyframes fxDrift{from{transform:scale(1.06) translate(-1%,1%)}to{transform:scale(1.16) translate(1.5%,-1.5%)}} .fx figcaption{font-size:clamp(11px,.92vw,13.5px);line-height:1.35;color:var(--ink); max-width:15ch;letter-spacing:.005em; text-shadow:none} .fx--2{align-items:flex-start} .fx--2 figcaption{max-width:17ch} /* ---- buy column ------------------------------------------------------ */ /* justify-self:end pins the copy to the right edge of its track. Without it a 560px block sits at the START of a ~730px track and reads as floating in the middle of the page at anything wider than 1440. */ .pdp__buy{position:relative;z-index:6;justify-self:end;text-align:right; padding:0 var(--pad) 0 clamp(12px,2vw,36px); max-width:560px;width:100%} .pdp__eyebrow{margin:0 0 14px;font-size:13px;letter-spacing:.16em;text-transform:uppercase; color:var(--gold-deep)} .pdp__name{margin:0;font-family:var(--display);font-weight:400;letter-spacing:0;color:var(--ink); font-size:clamp(32px,3.9vw,58px);line-height:1.04;letter-spacing:-.008em} .pdp__quote{ margin:clamp(18px,2.4vw,32px) 0 0; /* the section-heading face rather than the Gveret Levin hand, per the operator. It sets wider, so the measure comes down from 36ch to 34ch to keep the block the same physical width. */ font-family:var(--display);font-weight:300; /* now a short paragraph rather than a one-liner: smaller, looser, wider, and margin-left:auto so its right edge lines up with the rest of the column (a max-width block would otherwise hang off the left) */ font-size:clamp(15px,1.42vw,21px);line-height:1.6; color:var(--ink-soft);max-width:34ch;margin-left:auto; } .pdp__quote .q{color:var(--gold);font-size:1.15em;line-height:0} .pdp__price{margin:clamp(22px,3vw,40px) 0 12px;font-size:clamp(24px,2.3vw,33px); font-weight:600;letter-spacing:-.01em} .pdp__price .cur{font-weight:400;margin-inline-end:2px;opacity:.72} .pdp__cart{ display:flex;align-items:center;justify-content:center; width:min(100%,330px);height:clamp(52px,3.9vw,60px);margin-left:auto; border:0;border-radius:999px;cursor:pointer; background:linear-gradient(168deg,#F0DCB4 0%, var(--gold-btn) 46%, #8A6432 100%); color:var(--gold-btn-ink); font-family:var(--sans);font-size:clamp(15px,1.2vw,17.5px);font-weight:700;letter-spacing:.01em; box-shadow:0 10px 28px -12px rgba(96,66,32,0.44), 0 0 26px rgba(201,164,104,.28), inset 0 1px 0 rgba(255,246,224,.5); transition:transform .3s cubic-bezier(.22,1,.36,1),filter .3s,box-shadow .3s; } .pdp__cart:hover{transform:translateY(-2px);filter:brightness(1.05); box-shadow:0 16px 34px -14px rgba(96,66,32,0.468), 0 0 34px rgba(201,164,104,.4), inset 0 1px 0 rgba(255,246,224,.56)} .pdp__cart:active{transform:translateY(0)} .pdp__note{margin:14px 0 0;font-size:13px;color:var(--ink-faint)} /* ==================================================== SECTION 2: usage */ .usage{ position:relative; display:grid; grid-template-columns:minmax(0,46%) minmax(0,54%); align-items:center; gap:clamp(24px,4vw,72px); padding:clamp(70px,9vw,130px) var(--pad) clamp(80px,10vw,150px) 0; /* now the LAST act (usage and formula traded places), so it takes the deep end of the ramp the formula band used to hold */ background:linear-gradient(180deg,var(--g4b) 0%, var(--deep) 100%); isolation:isolate; overflow:hidden; } /* key light from the plate side, falling off across the panel */ .usage::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(62% 78% at 8% 42%, rgba(201,158,98,.07), rgba(201,158,98,0) 66%), radial-gradient(44% 40% at 88% 12%, rgba(201,158,98,.06), rgba(201,158,98,0) 74%); /* see the note on ::after — this act's atmospherics fade in AFTER the seam, so the join itself is ground meeting ground and nothing else. This layer in particular opens with a warm shadow at the top RIGHT, which is where the step was worst (-7.8 levels) while the left side was already clean. */ -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 24%); mask-image:linear-gradient(to bottom,transparent 0%,#000 24%); } .usage::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; box-shadow:inset 0 0 190px 50px rgba(0,0,0,0.34); /* THE SEAM. This vignette darkens all four edges, and its TOP edge lands exactly on the join with the act above — whose own vignette is faded out before it gets there. So the two grounds arrived at the join 3.4 luminance levels apart in a single row, against a mean row-to-row step of 0.6 across the page, which on a ground this smooth reads as a hairline rule. Faded in after the seam instead. The other three edges are untouched. */ Faded in over the first 24%, and ::before is faded in with it — masking only one of the two just moved the error: the vignette darkens evenly, the wash under it lightens the LEFT, so balancing them at the seam left the right-hand side 7.8 levels out. With both off at the join, the two acts meet on their background gradients alone, which are the same colour. */ -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 24%); mask-image:linear-gradient(to bottom,transparent 0%,#000 24%); } .usage__plate{ position:relative; border-radius:0 44% 44% 0 / 0 50% 50% 0; /* curved right edge, per sketch */ overflow:hidden; box-shadow:0 40px 80px -50px rgba(96,66,32,0.44); opacity:0;transform:translateX(-40px) scale(.97); transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1); will-change:transform,opacity; } .usage__plate img{width:100%;height:clamp(420px,72vh,760px);object-fit:cover; transform:translateY(var(--par,0px)) scale(1.06)} .usage.is-in .usage__plate{opacity:1;transform:none} .usage__panel{position:relative} /* Drugulin on the section heads — the same split yaara.html runs: FiraGO for display and body, Drugulin for the two section titles, Gveret Levin for the hand. Drugulin sets narrower and optically smaller than FiraGO at the same size, hence the size bump. */ /* the home page's own section heading face (FiraGO Light, as "מה מצפה לך"), not the Drugulin serif. It sets ~7% larger at the same px, so the sizes drop by that much to keep the optical size the serif had. */ .usage__title{margin:0;font-family:var(--display);font-weight:300;letter-spacing:0; font-size:clamp(28px,3.05vw,46px);line-height:1.10; opacity:0;transform:translateY(18px); transition:opacity .7s ease .1s,transform .7s cubic-bezier(.22,1,.36,1) .1s} .usage__lede{margin:10px 0 clamp(26px,3.4vw,46px);color:var(--ink-soft); font-size:clamp(14px,1.15vw,17px); opacity:0;transform:translateY(18px); transition:opacity .7s ease .2s,transform .7s cubic-bezier(.22,1,.36,1) .2s} .usage.is-in .usage__title,.usage.is-in .usage__lede{opacity:1;transform:none} /* ---- the three rings ------------------------------------------------- */ .rings{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;justify-content:flex-end; gap:clamp(16px,2.6vw,44px)} .rings[data-order="rtl"]{flex-direction:row-reverse} .ring{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px; opacity:0;transform:translateY(22px) scale(.94); transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)} .usage.is-in .ring{opacity:1;transform:none} .usage.is-in .ring:nth-child(1){transition-delay:.30s} .usage.is-in .ring:nth-child(2){transition-delay:.42s} .usage.is-in .ring:nth-child(3){transition-delay:.54s} .ring__btn{ position:relative;display:block;padding:0;border:0;background:none;cursor:pointer; width:var(--ring,198px);height:var(--ring,198px);border-radius:50%; isolation:isolate; } .ring__media{ position:absolute;inset:0;border-radius:50%;overflow:hidden; box-shadow:0 0 0 2px rgba(201,158,98,.22), 0 18px 40px -22px rgba(96,66,32,0.44); transition:filter .55s ease,opacity .55s ease,box-shadow .55s ease,transform .45s cubic-bezier(.22,1,.36,1); filter:grayscale(.85) brightness(.96) contrast(.95); opacity:.55; } .ring__media video{width:100%;height:100%;object-fit:cover;display:block} .ring__btn:hover .ring__media{transform:scale(1.03);opacity:.8} .ring.is-active .ring__media{ filter:none;opacity:1; box-shadow:0 0 0 3px var(--gold), 0 0 30px rgba(201,158,98,.26), 0 22px 46px -20px rgba(96,66,32,0.468); } /* the pulse says "this is interactive" without moving the video itself */ .ring.is-active .ring__btn::after{ content:"";position:absolute;inset:-6px;border-radius:50%; border:2px solid var(--gold); animation:ringPulse 2.1s cubic-bezier(.4,0,.2,1) infinite; pointer-events:none; } @keyframes ringPulse{ 0% {transform:scale(.97);opacity:.85} 70% {transform:scale(1.13);opacity:0} 100%{transform:scale(1.13);opacity:0} } .ring__n{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint); transition:color .4s} .ring.is-active .ring__n{color:var(--gold-deep)} /* inline-END works in both directions: it always points at the NEXT ring, whichever way the row runs */ .rings .ring:not(:last-child)::before{ content:"";position:absolute;top:calc(var(--ring,198px) / 2); left:calc(100% + 2px); width:clamp(10px,2vw,34px);height:1px; background:linear-gradient(90deg,rgba(201,158,98,.16),var(--gold),rgba(201,158,98,.16)); } /* ---- step copy ------------------------------------------------------- */ .stepcopy{margin-top:clamp(22px,2.8vw,38px);min-height:clamp(96px,11vw,124px);max-width:52ch} .stepcopy__in{opacity:0;transform:translateY(12px); transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)} .stepcopy__in.is-open{opacity:1;transform:none} .stepcopy h3{margin:0 0 8px;font-family:var(--display);font-weight:400; font-size:clamp(17px,1.5vw,22px);letter-spacing:.005em} .stepcopy p{margin:0;color:var(--ink-soft);font-size:clamp(14px,1.12vw,16.5px);line-height:1.5} .stepcopy .sell{display:block;margin-top:8px;font-family:var(--hand); font-size:clamp(17px,1.6vw,23px);color:var(--gold-deep);line-height:1.2} /* ================================================= SECTION 2: formula */ /* Now the middle act rather than the last one, so it carries the middle of the value ramp: it takes the page from the hero's paper down to the deeper ground the usage act now closes on. Swapping the two sections without swapping their grounds would have stepped the page back UP in value at the seam. */ .formula{ position:relative; display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%); align-items:center; gap:clamp(28px,4.5vw,86px); padding:clamp(80px,10vw,150px) var(--pad); background:linear-gradient(180deg,var(--paper) 0%, var(--g4b) 52%, var(--g4b) 100%); overflow:hidden; /* the burst blends against this act's own ground, so the group has to be this section and not whatever stacking context happens to be above it */ isolation:isolate; } .formula::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(58% 52% at 22% 48%, rgba(201,158,98,.08), rgba(201,158,98,0) 70%), radial-gradient(50% 44% at 90% 18%, rgba(201,158,98,.08), rgba(201,158,98,0) 72%); } .formula::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; box-shadow:inset 0 0 210px 62px rgba(0,0,0,0.34); /* the vignette darkens all four edges, and the bottom one lands exactly on the seam with the next act — which has no vignette of its own, so the join stepped 6.7 luminance levels in one row against a mean of 0.6. Faded out before it gets there; the other three edges are unaffected. */ /* The TOP edge lands on the seam with .pdp and was left at full strength, which is half of the line reported across the top of this act. */ -webkit-mask-image:linear-gradient(to bottom,transparent 1%,#000 26%,#000 74%,transparent 99%); mask-image:linear-gradient(to bottom,transparent 1%,#000 26%,#000 74%,transparent 99%); } /* ---- the fruit burst ------------------------------------------------- Scoped to THIS act and nowhere else, at the operator's request — it was briefly the whole document's ground. The five fruits are the formula story and nothing else on the page is about them, so this is where they belong. Absolutely positioned, which is also what keeps it out of the grid: an in-flow third child of a two-column grid would open a whole new row. The section already clips (`overflow:hidden`), so the corner anchor cannot bleed into the acts on either side of it. */ .formula__burst{ position:absolute;top:0;right:0;z-index:0;pointer-events:none; /* The box IS the plate — same aspect, so the mask below always spans exactly the image and can be trusted to reach zero before it runs out. It used to be a fixed 600px tall while the image height scaled with the width, so on a narrower window the plate ended while the mask was still ~18% opaque and you saw its bottom edge as a hard line across the fruit. */ width:min(58vw,900px); aspect-ratio:2400 / 1340; background:none; /* exact fit rather than `cover`, which crops into the plate at ~90% of native and brings the fruit out life-size — a photograph laid on the section rather than its ground */ background-size:100% 100%; /* DARKEN, not normal. The plate is fruit on a flat ivory that was graded to the page's paper — but this section is a GRADIENT, so that ivory only matches at the very top and everywhere below it showed as a faint pale rectangle with a visible edge. Under darken, any pixel lighter than the ground behind it is simply discarded, so the plate's backdrop disappears into the act at every height and only the fruit is left. */ mix-blend-mode:lighten; opacity:.45; /* TWO layers, intersected. The radial does the look — thinning away from the top-right corner. The linear is insurance: it forces the last of the plate to zero well before its own bottom edge, so no viewport width can put a visible cut across the fruit. Alpha is the minimum of the two. */ -webkit-mask-image: radial-gradient(106% 118% at 100% 0%,#000 0%,rgba(0,0,0,.72) 26%,rgba(0,0,0,.2) 52%,transparent 78%), linear-gradient(to bottom,transparent 0%,#000 14%,#000 40%,transparent 86%); -webkit-mask-composite:source-in; mask-image: radial-gradient(106% 118% at 100% 0%,#000 0%,rgba(0,0,0,.72) 26%,rgba(0,0,0,.2) 52%,transparent 78%), linear-gradient(to bottom,transparent 0%,#000 14%,#000 40%,transparent 86%); mask-composite:intersect; } /* ---- the showroom ---------------------------------------------------- What stands here instead of the fruit orbit: the product itself, front-on, in a pool of light, bobbing. Four parts — key light behind it, the bottle, its mirror, and a contact shadow that tightens as the bottle rises. The bottle is assets/bottle_still.webp, which is the same render the WebGL turntable in section 1 falls back to. That is deliberate: it is theta=0 of the very same geometry and the same label texture, so this shot cannot drift from the one spinning at the top of the page — and a second GL context for an object that never turns would be pure cost. The five fruits did not lose their job. They are the page's background now. */ .formula__show{display:grid;place-items:center;position:relative} .show{ /* the footprint the orbit used to hold, so the act keeps its visual weight */ --h:clamp(300px,31vw,470px); position:relative;width:100%;height:calc(var(--h) * 1.62); opacity:0;transform:scale(.94); transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1); } .formula.is-in .show{opacity:1;transform:none} /* the key light, hot side up and to the right — which is where the bottle's own render is lit from. A showroom light that disagreed with the shading already baked into the product shot would read as two different rooms. */ .show__key{ position:absolute;left:50%;top:calc(var(--h) * .46);transform:translate(-50%,-50%); width:min(118%,calc(var(--h) * 1.26));aspect-ratio:1;border-radius:50%; background: radial-gradient(closest-side,rgba(255,248,232,.8),rgba(255,244,218,.34) 48%,rgba(255,240,209,0) 76%), radial-gradient(closest-side at 66% 26%,rgba(255,236,196,.46),rgba(255,236,196,0) 68%); } .show__bottle{ position:absolute;left:50%;top:0;height:var(--h);width:auto; transform:translateX(-50%); filter:drop-shadow(0 26px 30px rgba(120,92,58,.24)); animation:showBob 4.6s ease-in-out infinite alternate; } /* The mirror: the same file, flipped about its own centre so it lands directly under the real one, masked to fade off downward. After scaleY(-1) the mask's local BOTTOM is the screen top, which is why the gradient reads inverted here. It bobs in counter-phase — a reflection that rises together with the object it reflects is not a reflection. */ .show__refl{ position:absolute;left:50%;top:var(--h);height:var(--h);width:auto; transform:translateX(-50%) scaleY(-1); opacity:.19; -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.4) 62%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.4) 62%,#000 100%); animation:showRefl 4.6s ease-in-out infinite alternate; } .show__floor{ position:absolute;left:50%;top:calc(var(--h) - 4px); width:44%;height:22px;border-radius:50%;transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(96,66,32,0.4),rgba(96,66,32,0) 76%); animation:showFloor 4.6s ease-in-out infinite alternate; } @keyframes showBob {from{transform:translate(-50%,7px)} to {transform:translate(-50%,-8px)}} @keyframes showRefl {from{transform:translate(-50%,-7px) scaleY(-1)} to {transform:translate(-50%,8px) scaleY(-1)}} @keyframes showFloor{from{transform:translate(-50%,-50%) scale(1.07);opacity:.95} to {transform:translate(-50%,-50%) scale(.88);opacity:.66}} @media (prefers-reduced-motion:reduce){ .show__bottle,.show__refl,.show__floor{animation:none} } /* ---- copy ------------------------------------------------------------ */ /* isolate: the scrim below sits at z-index -1, and without a stacking context here it would drop behind the section's own background and do nothing */ .formula__body{position:relative;isolation:isolate;max-width:660px} /* The burst and the title want the same corner. A soft wash under the copy only, keyed to the section's ground at that height, so the type is always on paper — the burst stays continuous around it and carries no visible edge. */ .formula__body::before{ content:"";position:absolute;inset:-7% -11% -4% -9%;z-index:-1;pointer-events:none; background:radial-gradient(66% 56% at 60% 30%, rgba(250,247,242,0.94) 0%, rgba(250,247,242,0.62) 48%, rgba(250,247,242,0) 82%); } .formula__eyebrow,.formula__title,.formula__lede,.pillars,.formula__stamp{ opacity:0;transform:translateY(20px); transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.36,1); } .formula.is-in .formula__eyebrow{opacity:1;transform:none;transition-delay:.06s} .formula.is-in .formula__title{opacity:1;transform:none;transition-delay:.14s} .formula.is-in .formula__lede{opacity:1;transform:none;transition-delay:.22s} .formula.is-in .pillars{opacity:1;transform:none;transition-delay:.32s} .formula.is-in .formula__stamp{opacity:1;transform:none;transition-delay:.46s} .formula__eyebrow{margin:0 0 14px;font-size:13px;letter-spacing:.18em; text-transform:uppercase;color:var(--gold-deep)} .formula__title{margin:0;font-family:var(--display);font-weight:300;letter-spacing:0; font-size:clamp(30px,3.6vw,54px);line-height:1.08;letter-spacing:-.004em} .formula__lede{margin:clamp(16px,2vw,26px) 0 0;max-width:46ch; color:var(--ink-soft);font-size:clamp(15px,1.2vw,18px);line-height:1.5} .pillars{list-style:none;margin:clamp(28px,3.4vw,46px) 0 0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,30px)} .pillar__img{display:block;width:clamp(58px,5vw,78px);aspect-ratio:1;border-radius:50%; overflow:hidden;margin-bottom:14px; box-shadow:0 0 0 1.5px rgba(84,64,40,0.16),0 0 22px rgba(201,158,98,.14), 0 12px 26px -14px rgba(96,66,32,0.385)} .pillar__img img{width:100%;height:100%;object-fit:cover} .pillar h3{margin:0 0 6px;font-family:var(--display);font-weight:400; font-size:clamp(15px,1.3vw,19px)} .pillar p{margin:0;font-size:clamp(13px,1.02vw,15px);line-height:1.48;color:var(--ink-soft)} .formula__stamp{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin:clamp(28px,3.4vw,46px) 0 0;padding-top:20px; border-top:1px solid rgba(201,158,98,.3); font-size:clamp(13px,1.05vw,15px);color:var(--charcoal);letter-spacing:.005em; } .formula__stamp svg{width:20px;height:20px;color:var(--gold-deep);flex:none} .formula__stamp .sku{margin-inline-start:auto;color:var(--ink-faint);font-size:12px; letter-spacing:.08em} /* ------------------------------------------------------------- phone */ @media (max-width:1000px){ .nav{padding-top:22px} .nav__links{display:none} .pdp{grid-template-columns:1fr;min-height:auto;padding-bottom:56px} .pdp__stage{height:min(76svh,620px);min-height:460px} .pdp__bottle{--bx:38vw;--tilt:11deg;height:min(50svh,410px)} .fx__disc{--fx:72px} .fx--1{left:1.5vw;top:6%} .fx--2{left:62vw;top:23%} .fx--3{left:8vw;top:74%} .pdp__buy{padding:clamp(20px,6vw,40px) var(--pad) 0;max-width:none} .usage{grid-template-columns:1fr;padding:clamp(56px,9vw,90px) 0 clamp(60px,9vw,110px)} .usage__plate{border-radius:0 0 40% 40% / 0 0 12% 12%} .usage__plate img{height:min(52svh,440px)} .usage__panel{padding:0 var(--pad)} .rings{--ring:clamp(84px,26vw,140px);justify-content:space-between;gap:10px} .usage__title{margin-top:clamp(26px,6vw,44px)} .formula{grid-template-columns:1fr;gap:clamp(30px,7vw,54px); padding:clamp(60px,9vw,110px) var(--pad)} .show{--h:min(58vw,300px)} .pillars{grid-template-columns:1fr;gap:22px} .pillar{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start} .pillar__img{grid-row:span 2;margin-bottom:0;width:clamp(52px,14vw,66px)} .formula__stamp .sku{margin-inline-start:0;width:100%} } @media (max-width:620px){ .leads{display:none} .fx figcaption{max-width:11ch} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} #bottle,.pdp__bottle::before,.fx__disc img,.ring.is-active .ring__btn::after{animation:none} .lead{animation:none;stroke-dashoffset:0} .lead__dot{animation:none;opacity:.9} .fx{animation:none;opacity:1;transform:none} .usage__plate,.usage__title,.usage__lede,.ring{transition:none;opacity:1;transform:none} .show,.formula__eyebrow,.formula__title,.formula__lede,.pillars,.formula__stamp{ transition:none;opacity:1;transform:none} .orbit__ring,.orbit__nodes{animation:none} .pdp__cart{transition:none} } /* ---------------------------------------------------- perf isolation ---- Toggled from the URL by perf.js (?off=grain,aura,blur,video,bottle,anim). A fixed full-screen overlay in mix-blend-mode forces the whole page into one composited group every frame — on many GPUs that alone is the stutter, so it is the first thing to try switching off. */ .off-grain body::after{display:none !important} .off-blur *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important} .off-anim *,.off-anim *::before,.off-anim *::after{ animation:none !important;transition:none !important} .off-video .disc{background:url("assets/backdrop.a07c46a1.webp") center 46%/cover no-repeat} /* ---- fleet override: this product's stage geometry ---- */ .pdp__bottle{ aspect-ratio:440/1634; height:62.0vh; left:18.0vw; top:47.0%; rotate:13deg; } #bottle{width:100%;height:100%;object-fit:contain} /* ---- fleet override: usage photograph as the section ground -------------- */ /* The first version of this scrimmed the photograph at .90-.96 opacity and sat it at 50% across. At that strength the picture is not atmosphere, it is a flat wash you cannot tell is a photograph - and centring it put her head directly behind the copy. So: the scrim now runs ACROSS rather than down, heavy where the text is and nearly clear on the right, and the frame is pushed right so she sits beside the panel rather than under it. */ .usage{ grid-template-columns:minmax(0,1fr); padding-inline:var(--pad); background-image: /* Every stop is the SAME colour as the section's own paper (var(--g4b)); only the alpha varies — a veil in the paper's own colour cannot step at the seam, whatever its opacity. Dark now: the photograph is the light island and the veil is the candlelit room around it, heavy on the text side. */ linear-gradient(to left, rgba(21,15,8,.06) 0%, rgba(21,15,8,.3) 15%, rgba(21,15,8,.74) 34%, rgba(21,15,8,.88) 56%, rgba(21,15,8,.93) 100%), /* vertical: pins the top row to the formula act's closing colour so the photograph never cuts against it, and settles the page's last rows into the deep end instead of ending on a bright plate edge. */ linear-gradient(180deg, #150F08 0%, rgba(21,15,8,0) 18%, rgba(21,15,8,0) 78%, rgba(18,12,6,.82) 100%), linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)), /* the template's own gradient, continued — .formula ends on #150F08 and .usage begins on #150F08, so the join needs no help at all. */ linear-gradient(180deg, #150F08 0%, var(--deep) 100%); /* The plate is pre-composed by `fleet/wide_plate.py` at the section's own aspect, with the subject cropped to a portrait and set into the right 42% and the left filled from her own surroundings. So plain `cover` is correct here and stays correct at other viewport widths - the earlier hand-tuned `auto 118%` at `86%` cropped to a 3x zoom on her forehead. */ background-size:cover, cover, cover, cover; background-position:center, center, right center, center; background-repeat:no-repeat, no-repeat, no-repeat, no-repeat; } .usage__plate{display:none} .usage__panel{max-width:min(760px,100%);margin-inline-start:0;margin-inline-end:auto} /* ---- fleet override: section joins --------------------------------------- */ /* NOTHING here masks or overlaps the sections any more. An earlier version pulled each section up 130px and masked its background in across the overlap. It did melt the joins - measured 10-13 levels down to under 1 - but masking a whole section forces it onto its own compositing layer, and its gradient then re-bands with edges of its own. Toggling it off in the browser dropped the visible vertical edge at the burst's left margin from 1.34 to 0.49, i.e. the "melt" was itself the square border being reported. The joins are continuous through the colours above instead. */ /* ---- key components on the standing bottle (catalog callout grammar) ---- */ .kc2 .show{z-index:1} /* the key light's hot halo reads as product mass under the callouts; pull it in behind the silhouette so the diagram sits on calm ground */ .kc2 .show__key{width:min(100%,calc(var(--h) * 1.12));opacity:.6;filter:hue-rotate(-4deg) saturate(1.15)} /* squat stills (near-square, e.g. the sphere) leave no flank room at full size; the catalog's own proportion is a smaller product with air around it */ .kc2--squat .show{--h:clamp(198px,16vw,250px)} .kc2--squat .kc2__col{height:clamp(198px,16vw,250px)} .kc2--squat .kc2__col--l{padding-block:calc(clamp(198px,16vw,250px) * .06) calc(clamp(198px,16vw,250px) * .10)} .kc2--squat .kc2__col--r{padding-block:calc(clamp(198px,16vw,250px) * .02) calc(clamp(198px,16vw,250px) * .14)} .kc2__leads{position:absolute;inset:0;width:100%;height:100%;z-index:2; pointer-events:none;overflow:visible;opacity:0;transition:opacity .9s ease .55s} .formula.is-in .kc2__leads{opacity:1} .kc2__col{position:absolute;top:0;height:clamp(300px,31vw,470px);margin:0;padding:0; list-style:none;display:flex;flex-direction:column;justify-content:space-between;z-index:3} .kc2__col--l{left:0;align-items:flex-start; padding-block:calc(clamp(300px,31vw,470px) * .10) calc(clamp(300px,31vw,470px) * .16)} .kc2__col--r{right:0;align-items:flex-end; padding-block:calc(clamp(300px,31vw,470px) * .04) calc(clamp(300px,31vw,470px) * .22)} .kc2__item{display:flex;flex-direction:column;gap:4px;max-width:150px; opacity:0;transform:translateY(8px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)} .kc2__col--l .kc2__item{align-items:flex-start;text-align:left} .kc2__col--r .kc2__item{align-items:flex-end;text-align:right} .formula.is-in .kc2__item{opacity:1;transform:none} .formula.is-in .kc2__col--r .kc2__item:nth-child(1){transition-delay:.50s} .formula.is-in .kc2__col--l .kc2__item:nth-child(1){transition-delay:.58s} .formula.is-in .kc2__col--r .kc2__item:nth-child(2){transition-delay:.66s} .formula.is-in .kc2__col--l .kc2__item:nth-child(2){transition-delay:.74s} .formula.is-in .kc2__col--r .kc2__item:nth-child(3){transition-delay:.82s} .formula.is-in .kc2__col--l .kc2__item:nth-child(3){transition-delay:.90s} .formula.is-in .kc2__col--r .kc2__item:nth-child(4){transition-delay:.98s} .formula.is-in .kc2__col--l .kc2__item:nth-child(4){transition-delay:1.06s} .kc2__pill{font:700 10.5px/1.15 "Google Sans",Heebo,sans-serif;letter-spacing:.13em; color:var(--ink);white-space:nowrap} .kc2__desc{font:400 12.5px/1.35 Heebo,sans-serif;color:var(--ink2)} .kc2__leads line{stroke:rgba(142,107,57,.48);stroke-width:1} .kc2__leads circle{fill:#B28B52;stroke:none} @media (max-width:900px){ .kc2__item{max-width:118px} .kc2__pill{font-size:9.5px} .kc2__desc{font-size:11.5px} } @media (max-width:720px){ .kc2__leads{display:none} .kc2{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px} .kc2 .show{grid-column:1/-1} .kc2__col{position:static;height:auto;padding:0;display:contents} .kc2__item,.kc2__col--l .kc2__item,.kc2__col--r .kc2__item{ align-items:center;text-align:center;max-width:none;margin-top:6px} } @media (prefers-reduced-motion:reduce){ .kc2__item{transition:none;opacity:1;transform:none} .kc2__leads{transition:none;opacity:1} } /* ═══════════════ elevate: the landing shell on this page ═══════════════ */ header#hdr{position:fixed;top:0;inset-inline:0;z-index:40;display:flex;align-items:center; justify-content:space-between;padding:20px var(--pad)} header#hdr.inked{background:rgba(253,250,245,.9);backdrop-filter:blur(12px); padding:14px var(--pad);border-bottom:1px solid var(--line)} #hdr .brand{display:flex;align-items:center;gap:12px} #hdr .brand img.em{height:34px;width:auto} #hdr .brand img.wm{height:17px;width:auto} #hdr nav{display:flex;flex-direction:row-reverse;gap:28px} #hdr nav a{font:600 13.5px/1 var(--sans);color:var(--ink);opacity:.85;transition:opacity .3s} #hdr nav a:hover{opacity:1} @media(max-width:640px){#hdr nav{gap:16px} #hdr nav a{font-size:12.5px}} .act{padding-block:clamp(72px,9vw,130px)} .ewrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)} .eh2{font:600 clamp(32px,4vw,58px)/1.1 var(--sans);letter-spacing:-.015em;margin:0; direction:rtl;text-align:right; background:linear-gradient(100deg,var(--ink) 34%,var(--gold) 50%,var(--ink) 66%); background-size:260% 100%;background-position:100% 0; -webkit-background-clip:text;background-clip:text;color:transparent} .elede{font:400 clamp(16.5px,1.32vw,19px)/1.75 var(--sans);color:var(--ink); direction:rtl;text-align:right;max-width:34em;margin:22px 0 0} .elede.dim{color:var(--ink2)} .ecap{font:400 14.5px/1.7 var(--sans);color:var(--ink3);direction:rtl;text-align:right; margin-top:34px} .ecap .scanlink{color:var(--gold-deep);border-bottom:1px solid rgba(142,107,57,.35)} .ecap .scanlink:hover{border-color:var(--gold-deep)} .e-story .ewrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,80px); align-items:center} .e-story__ph{margin:0;border-radius:4px;overflow:hidden;box-shadow:0 14px 44px rgba(178,139,82,.16)} .e-story__ph img{display:block;width:100%;height:auto} @media(max-width:880px){.e-story .ewrap{grid-template-columns:1fr}} .e-usage{background:linear-gradient(180deg,var(--g2b),var(--bg))} .urows{margin-top:44px;border-top:1px solid var(--line);max-width:760px;margin-left:auto} .urow{display:flex;gap:clamp(20px,3vw,42px);align-items:baseline; padding:20px 2px;border-bottom:1px solid var(--line);direction:rtl;text-align:right} .urow b{font:500 15px/1 var(--sans);color:var(--gold-deep);font-variant-numeric:tabular-nums} .urow p{font:400 clamp(16px,1.25vw,18px)/1.7 var(--sans);color:var(--ink);margin:0} .erail{margin-top:10px;flex-direction:row-reverse;justify-content:flex-start} .rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity; padding:48px 4px 10px;scrollbar-width:none} .rail::-webkit-scrollbar{display:none} .pcard{flex:0 0 200px;scroll-snap-align:start;display:block;background:var(--card); box-shadow:0 14px 44px rgba(178,139,82,.13); border:1px solid var(--line);border-radius:4px;padding:12px;color:var(--ink); transition:transform .3s,box-shadow .3s,border-color .3s} .pcard:hover{transform:translateY(-3px);border-color:rgba(178,139,82,.45); box-shadow:0 16px 44px rgba(178,139,82,.22)} .pcard .ph{display:block;position:relative;aspect-ratio:1;overflow:hidden} .pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} .pcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; opacity:0;transition:opacity .3s} .pcard:hover video{opacity:1} .pcard .nm{font:600 12px/1.45 var(--sans);margin-top:10px;color:var(--ink2);direction:rtl;text-align:right; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em} .pcard .pr{font:500 18px/1 var(--sans);color:var(--gold-deep);margin-top:4px;font-variant-numeric:tabular-nums} .fwm{width:min(92%,1100px);margin:0 auto 72px;aspect-ratio:2874/384; background:var(--metal); -webkit-mask:url('/wp-content/themes/yaara-awwwards/assets/brand/wordmark_vec.svg') center/contain no-repeat; mask:url('/wp-content/themes/yaara-awwwards/assets/brand/wordmark_vec.svg') center/contain no-repeat} footer{background:var(--bg);color:var(--ink);padding:76px var(--pad) 40px; border-top:1px solid var(--line)} .f-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px; direction:rtl;text-align:right} @media(max-width:820px){.f-in{grid-template-columns:1fr}} footer p,footer a{color:var(--ink);font-size:14.5px;line-height:2} footer a:hover{color:var(--gold-deep)} footer .small{border-top:1px solid var(--line);max-width:1240px;margin:52px auto 0; padding-top:22px;font-size:12.5px;color:var(--ink); display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;direction:rtl} #cursor{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%; background:var(--gold);z-index:70;pointer-events:none;opacity:0; transform:translate(-50%,-50%); transition:width .3s,height .3s,background .3s,border .3s,opacity .3s} #cursor.on{opacity:.85} #cursor.big{width:34px;height:34px;background:transparent;border:1.5px solid var(--gold)} @media (prefers-reduced-motion:reduce){ .elede,.eh2,.urow,.pcard{opacity:1 !important;transform:none !important} } /* ═══ kc leaders v2: drawn curves, blooming dots, traveling light ═══ */ .kc2__leads{transition:opacity .3s ease} .kc2__item,.formula.is-in .kc2__col--l .kc2__item,.formula.is-in .kc2__col--r .kc2__item{ opacity:1;transform:none;transition:opacity .35s ease} .kc2.kc2--focus .kc2__col--l .kc2__item:not(.is-hot),.kc2.kc2--focus .kc2__col--r .kc2__item:not(.is-hot){opacity:.35} .kc2__item.is-hot .kc2__pill{color:var(--gold-deep)} /* hand-placed rhythm, not template rows */ .kc2__col--l .kc2__item:nth-child(1){transform:translateX(8px)} .kc2__col--l .kc2__item:nth-child(2){transform:translateX(-3px);margin-top:4px} .kc2__col--l .kc2__item:nth-child(3){transform:translateX(12px)} .kc2__col--l .kc2__item:nth-child(4){transform:translateX(2px);margin-top:-4px} .kc2__col--r .kc2__item:nth-child(1){transform:translateX(-8px)} .kc2__col--r .kc2__item:nth-child(2){transform:translateX(3px);margin-top:4px} .kc2__col--r .kc2__item:nth-child(3){transform:translateX(-12px)} .kc2__col--r .kc2__item:nth-child(4){transform:translateX(-2px);margin-top:-4px} .kc2__pill{cursor:default} .kc2__pill b{display:inline-block;font-weight:inherit;opacity:0} .kc2__desc{opacity:0} .kc2__ord{font:600 8.5px/1 "Google Sans",sans-serif;font-style:normal;color:var(--gold-deep); letter-spacing:.08em;margin-inline-end:7px;vertical-align:2px;opacity:0} .kcl{fill:none;stroke:rgba(142,107,57,.42);stroke-width:1; transition:stroke .3s ease} .kcl.hot{stroke:rgba(142,107,57,.85)} .kcl-pulse{fill:none;stroke:#E9B77C;stroke-width:1.5;opacity:0; filter:drop-shadow(0 0 3px rgba(233,183,124,.75))} .kcd{fill:#B28B52} .kcr{fill:none;stroke:rgba(178,139,82,.7);stroke-width:1;opacity:0} @media (prefers-reduced-motion:reduce){ .kc2__pill b,.kc2__desc,.kc2__ord{opacity:1} } @media (max-width:720px){ .kc2__pill b,.kc2__desc,.kc2__ord{opacity:1} .kc2__col--l .kc2__item,.kc2__col--r .kc2__item{transform:none;margin-top:6px} } /* ---- rollout: the usage act carries her own film beside the steps ---- */ /* the document is LTR so a plain grid puts column one on the left; the steps are Hebrew and must start at the right margin, the film takes the flank */ .e-usage .ewrap--film{display:grid;grid-template-columns:1.25fr .75fr; gap:clamp(32px,4vw,72px);align-items:center;direction:rtl} .e-usage .ewrap--film>*{direction:ltr} .ufilm{margin:0;border-radius:4px;overflow:hidden;justify-self:center; width:min(100%,320px);box-shadow:0 18px 48px rgba(178,139,82,.18)} .ufilm video{display:block;width:100%;height:auto} @media(max-width:880px){.e-usage .ewrap--film{grid-template-columns:1fr} .ufilm{margin-top:34px}} /* the only photograph on these pages that is certainly THIS product is its own pack shot, and those come in every proportion from 1:1 to 154x940. A fixed porcelain plate with contain keeps a tall spray from eating a whole screen and keeps a 320px square from being upscaled into mush. */ .e-story__ph{box-sizing:border-box;width:min(100%,420px);aspect-ratio:4/5; justify-self:center;display:flex;padding:clamp(18px,2vw,30px); background:radial-gradient(120% 100% at 50% 26%,#FFFFFF 0%,var(--g2b) 72%)} /* flex, not grid: a centred grid item sizes the row from its own content, so height:100% stays indefinite and a 154x940 spray renders 2270px tall and gets cropped by overflow. Flex items stretch, so the box wins. */ .e-story__ph img{width:100%;height:100%;min-height:0;object-fit:contain} /* ---- rollout: phone header, shell.css rule ported ---- */ /* [phone] the nav amputation lived here; the phone menu replaces it (see § PHONE below) */ /* [phone] the wordmark is never deleted; see § PHONE below */ /* ═══ fixer-1 pass (2026-08-23) ═══ ──────────────────────────────────────────── 1 · CART DRAWER, LTR DOCUMENT. cart.css positions the drawer with inset-inline-end:0 and translateX(102%), but cart.js sets dir="rtl" on the