, hidden by default but still a sibling for :nth-child purposes) - so the first .form-group (gender) lands on :nth-child(2), not (1). Gender/height/weight, in that DOM order. */ #screen-calculator.active #sizeForm > .form-group:nth-child(2) { animation: riseIn .6s var(--ease) both; animation-delay: .27s; } #screen-calculator.active #sizeForm > .form-group:nth-child(3) { animation: riseIn .6s var(--ease) both; animation-delay: .34s; } #screen-calculator.active #sizeForm > .form-group:nth-child(4) { animation: riseIn .6s var(--ease) both; animation-delay: .41s; } /* editorial copy fades up in sequence */ #screen-calculator.active .calc-editorial__kicker { animation: riseIn .7s var(--ease) both; animation-delay: .10s; } #screen-calculator.active .calc-editorial__headline { animation: riseIn .7s var(--ease) both; animation-delay: .20s; } #screen-calculator.active .calc-editorial__lead { animation: riseIn .7s var(--ease) both; animation-delay: .30s; } #screen-calculator.active .calc-editorial__list { animation: riseIn .7s var(--ease) both; animation-delay: .40s; } #screen-calculator.active .calc-editorial__meta { animation: riseIn .7s var(--ease) both; animation-delay: .50s; } /* specular sheen sweeps across primary glass buttons on hover */ /* BUTTON CORNER-CLIP FIX: overflow:hidden alone doesn't reliably antialias a border-radius:9999px capsule once a transformed child (the ::after sweep below) and backdrop-filter both force their own GPU compositing layer - Chromium was rendering the left corners visibly jagged/uneven vs. the right. clip-path uses a proper compositing mask instead of a scissor clip, so the pill stays crisp on all four corners regardless of what's compositing inside it. overflow:hidden stays as a fallback for browsers without clip-path support. */ .btn-primary, .btn-capture, .btn-watch { position: relative; overflow: hidden; -webkit-clip-path: inset(0 round 9999px); clip-path: inset(0 round 9999px); } .btn-primary::after, .btn-capture::after, .btn-watch::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-18deg); } .btn-primary:hover:not(:disabled)::after, .btn-capture:hover:not(:disabled)::after, .btn-watch:hover::after { animation: btnShine .9s var(--ease); } @keyframes btnShine { from { left: -130%; } to { left: 140%; } } /* progress bar - a travelling light sheen rides the fill */ .step-progress-fill { position: relative; overflow: hidden; } .step-progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: progShine 2.4s var(--ease) infinite; } @keyframes progShine { from { transform: translateX(-100%); } to { transform: translateX(240%); } } /* ── short viewports: keep the whole size card on one screen ────────────── */ @media (max-height: 760px) { .step-progress { padding-top: 16px; } .calc-main .step-progress { padding-top: 6px; } #screen-calculator .container { margin: 8px auto; padding: clamp(16px, 3vw, 26px); } .container h2 { font-size: 1.34rem; } .subtitle { margin-bottom: 12px; } #sizeForm { gap: 10px; } .form-group input { padding: 11px 15px; } .btn-primary { margin-top: 16px; padding: 13px 24px; } .result-box { padding: 14px 18px; } } /* ── accessibility: respect reduced-motion ─────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } body::before, body::after { animation: none; } } /* ════════════════════════════════════════════════════════════════════════ ✦ MOBILE EXPERIENCE LAYER - app-like phone UI + orchestrated motion ───────────────────────────────────────────────────────────────────────── Additive only. Extends the Monochrome Liquid-Glass identity for touch: an immersive camera stage, a sticky/shrinking header, a swipeable catalog, and a layer of tactile motion (scroll-reveal, ripple, spring presses, live aura). Every existing id/class/state hook is preserved - JS logic untouched. ════════════════════════════════════════════════════════════════════════ */ :root { --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --spring: cubic-bezier(.34, 1.56, .64, 1); /* tactile overshoot */ } /* ════════════════════════════════════════════════════════════════════════ ✦ TOP-CORNER CONTROL GEOMETRY - the single source of truth ───────────────────────────────────────────────────────────────────────── OVERLAP ROOT CAUSE (fixed here): .lang-switch (physical top-LEFT) and .profile-btn (physical top-RIGHT) are position:fixed VIEWPORT chrome that lives outside .app-header in the DOM - .lang-switch is a direct child of
(it must survive screen 1, which has no header at all), .profile-btn sits just before the header inside #screen-fitting. The header meanwhile lays its OWN controls out with justify-content:space-between, so its two end clusters run straight into those same two corners. Two independent layout systems both claiming the same pixels = guaranteed collision, and because the fixed pair carries z-index:100 against the header's 40, they won the stack and swallowed the taps: on every phone width the language switch sat directly on top of #cartBtn and ate its clicks outright. Neither control can simply be moved into the header's flex row (the header does not exist on screen 1, and .lang-switch has to be reachable there), so the fix is to make the header RESERVE the exact width those corners occupy and lay its own row out inside what's left - real flex placement, no geometric guesswork, no overlap possible at any width. Every number the reservation depends on is a token here, and the fixed controls consume the SAME tokens for their size/offset (see .lang-switch / .profile-btn below), so the gutter and the thing it clears can never drift apart the way two hand-tuned magic numbers eventually do. ════════════════════════════════════════════════════════════════════════ */ :root { /* ── ONE HEIGHT, ONE TOP EDGE, FOR EVERY HEADER CONTROL ────────────────── THE REPORTED PROBLEM: the top-bar controls sat at visibly different heights and did not share a baseline. Measured, they were five different boxes with five different vertical centres: control height top edge centre .lang-switch 38px 16px 35px .fs-switch 36px 24px 42px .btn-edit-measurements 27px 24px ~37px .cart-btn 42px 24px 45px .profile-btn 40px 16px 36px Two independent causes, and both had to be fixed or the row would still be ragged. (1) Every control sized itself from its own content - padding plus a label, or a hand-set 42px square - so no two agreed. (2) .lang-switch and .profile-btn are position:absolute corner controls, NOT flex children of .app-header, so they took their vertical origin from --corner-inset (16px) while the row took its own from the header's padding-top (24px on desktop, 8px on phones - where the same pair then sat 8px BELOW the row instead of above it, the same bug with the sign flipped). So the fix is two tokens rather than a set of nudges. Every control now resolves its height from --hdr-control-h, and everything that establishes a top edge - the header's own padding and both absolute corner controls - resolves it from --hdr-pad-t. Equal heights plus equal top edges is equal centres, by construction, at every breakpoint, with no per-control tuning to drift. WHY A HEIGHT TOKEN AND NOT align-items:center: the row already had align-items:center, and it was doing its job - centring five boxes of five different heights, which is exactly what it is asked to do and is still a ragged row. Alignment cannot fix a height disagreement. --corner-inset stays, unchanged, as the HORIZONTAL inset: it is what --hdr-gutter-l/r reserve against, and that reservation is a different measurement from where the controls' top edge sits. Splitting them is what lets the vertical origin move without touching the collision math. */ --hdr-control-h: 40px; /* shared height of EVERY header control */ --hdr-pad-t: 24px; /* shared top edge: header padding AND both corner controls */ /* ── THE ROW HEIGHT HAD TO BECOME A NUMBER TOO ─────────────────────────── Equal control heights and equal top edges were necessary and not sufficient, because the ROW is not as tall as the controls in it. The brand lockup is the tallest zone and its height comes from type metrics: .app-header__brand 1.4rem, line-height 1 = 22.40px .app-header__titles gap = 3.00px .app-header__sub .84rem, line-height 1.2 = 16.13px ------ 41.53px (> the 38px logo) So the row resolved to 41.53px. Its flex children centre on THAT - at padding-top + 20.76 - while the two absolute corner controls, anchored to the padding edge with a height of 40, centre at padding-top + 20. A 0.76px disagreement: small, visible against a circle's edge, and impossible to nudge away permanently because the number is a font measurement. It moves with every type change and differs at each breakpoint (the wordmark is 1.4rem here, 1.2rem when the phone header compacts). --hdr-row-h fixes the row at a round number the lockup fits inside, so the centreline stops being derived from font metrics at all. The corner pair then anchors to that CENTRE - (row - control) / 2 below the padding edge - rather than to the padding edge itself. min-height, not height, on the zones: at the nominal type size the lockup (41.53px) is comfortably inside 44px so the row IS exactly 44, while a shopper who zooms text still gets a row that grows instead of clipping. Under that growth the corner pair drifts again by half the overflow - the correct trade, since a clipped wordmark is worse than a 1px offset at 200% zoom. */ --hdr-row-h: 44px; /* deterministic row height - NOT the type's 41.53px */ --corner-inset: 16px; /* physical HORIZONTAL inset of both fixed corner controls */ --corner-clear: 10px; /* deliberate breathing gap before header content */ --profile-size: var(--hdr-control-h); /* .profile-btn circle - was a separate 40px */ --lang-seg-w: 42px; /* .lang-switch__seg / __thumb - MIRRORED in i18n.js */ --fs-seg-w: 34px; /* .fs-switch__seg / __thumb - MIRRORED in app.js */ --switch-pad: 4px; /* segmented-switch track padding */ /* Overall track width of a 2-segment glass switch: both segments + the track's own padding + its 1px specular border on each side. */ --lang-switch-w: calc(2 * var(--lang-seg-w) + 2 * var(--switch-pad) + 2px); /* What the header must keep clear on each PHYSICAL edge. Physical, not logical: the fixed pair is pinned with left/right and never mirrors with dir, so these must not mirror either. */ --hdr-gutter-l: calc(var(--safe-l) + var(--corner-inset) + var(--lang-switch-w) + var(--corner-clear)); --hdr-gutter-r: calc(var(--safe-r) + var(--corner-inset) + var(--profile-size) + var(--corner-clear)); } /* ── scroll-reveal (mobile-ux.js adds .reveal-up, then .in-view) ────────── The hidden state only exists once JS has tagged the element, so a no-JS or reduced-motion visit renders every block fully visible. */ .reveal-up { opacity: 0; transform: translateY(26px) scale(.99); transition: opacity .7s var(--ease), transform .8s var(--ease); will-change: opacity, transform; } .reveal-up.in-view { opacity: 1; transform: none; } /* ── tap ripple (mobile-ux.js spawns .pear-ripple inside the pressed control) ── */ .btn-capture, .btn-primary, .btn-watch, .btn-download, .pip-retake, .plb-btn, .pear-compare-bar { position: relative; overflow: hidden; } .btn-capture > *, .btn-primary > *, .btn-watch > *, .btn-download > *, .pip-retake > *, .plb-btn > *, .pear-compare-bar > * { position: relative; z-index: 1; } .pear-ripple { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(141,182,0,.55) 0%, rgba(255,255,255,.38) 42%, transparent 70%); transform: scale(0); opacity: .85; mix-blend-mode: screen; animation: pearRipple .62s var(--ease) forwards; } @keyframes pearRipple { to { transform: scale(2.5); opacity: 0; } } /* sticky header animates its compaction on every viewport */ .app-header { transition: padding .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } /* ════════════════════════════════════════════════════════════════════════ PHONE (≤ 768px) ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* sticky, frosted app chrome that compacts as you scroll into the stage. DEAD-SPACE FIX: top/bottom padding trimmed (was 14px/14px, scrolled 8px/8px) - the row's own content height was already carrying the visual weight; this was pure extra air above/below it. */ /* The shared top edge is tighter on phones. Declared on :root rather than on .app-header, because the two absolute corner controls are NOT descendants of the header and would not see it there - which is exactly how they came to sit 8px BELOW the row here while sitting 8px above it on desktop. */ :root { --hdr-pad-t: 8px; } .app-header { position: sticky; top: 0; z-index: 40; max-width: none; margin: 0; --hdr-pad-x: clamp(16px, 5vw, 22px); padding: calc(var(--hdr-pad-t) + var(--safe-t)) var(--hdr-pad-x) var(--hdr-pad-t); /* Full-bleed here (max-width:none), so the box edge IS the viewport edge - the centred-box term in the base rule collapses to zero and the corner gutters apply at full value. Stated directly rather than left to the base rule's max(), so the reservation is obvious at the breakpoint that actually needs it. */ padding-left: var(--hdr-gutter-l); padding-right: var(--hdr-gutter-r); gap: 8px; /* was the base rule's 12px - tighter, more compact on phones */ background: linear-gradient(180deg, rgba(247,247,246,.88), rgba(247,247,246,.30)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid transparent; } /* Compaction stays scoped to the header and does NOT move --hdr-pad-t: by the time this class exists the two corner controls have scrolled off the top of the viewport (they are position:absolute, not fixed - see body.corners-cleared), so there is nothing left to keep aligned and re-anchoring them would only animate two off-screen boxes. */ .app-header.is-scrolled { padding-top: calc(5px + var(--safe-t)); padding-bottom: 5px; border-bottom-color: var(--glass-border); box-shadow: 0 6px 20px rgba(0, 0, 0, .06); } /* REVERSED: .focus-bar is no longer sticky (see its own rule), so there is nothing left for the header to cede its slot to - .app-header now stays sticky unconditionally, focus mode or not, matching every other screen. */ /* PROMINENCE FIX: was 1.26rem/1.1rem (scrolled) - scaled up so the wordmark reads as the header's visual anchor instead of getting lost in the trimmed padding. */ .app-header__brand { font-size: 1.4rem; transition: font-size .45s var(--ease); } .app-header.is-scrolled .app-header__brand { font-size: 1.2rem; } .app-header__sub { font-size: .78rem; } /* roomier, thumb-first body; keep the live control clear of the home indicator */ .fitting-container { padding: 18px clamp(14px, 4.5vw, 22px) calc(36px + var(--safe-b)); } .personal-title { font-size: 1.5rem; line-height: 1.18; margin: 6px 0 20px; } /* ── immersive camera stage - near-full-bleed, deeper, alive ── */ .camera-card { max-width: 100%; border-radius: 30px; box-shadow: 0 20px 54px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .08); } /* a soft pear breath while idle (before the camera opens) so the stage never feels dead */ .camera-card:not(.live):not(.show-live):not(.show-result) { animation: stageIdle 5.5s var(--ease) infinite; } @keyframes stageIdle { 0%, 100% { box-shadow: 0 20px 54px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.08); } 50% { box-shadow: 0 24px 64px rgba(0,0,0,.20), 0 0 30px rgba(141,182,0,.16), inset 0 0 0 1px rgba(141,182,0,.20); } } .camera-card__placeholder p { font-size: .96rem; } .camera-card__icon { font-size: 3rem; } /* ── big, tactile primary control ── */ .cam-controls { margin-top: 18px; gap: 12px; } .btn-capture { padding: 18px 24px; border-radius: 26px; min-height: 64px; /* clip-path kept in sync with the border-radius override above (see the corner-clip fix note near .btn-primary/.btn-capture/.btn-watch) */ -webkit-clip-path: inset(0 round 26px); clip-path: inset(0 round 26px); transition: transform .35s var(--spring), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .btn-capture__icon { font-size: 1.35rem; } .btn-capture__label { font-size: 1.16rem; } .btn-capture:active:not(:disabled) { transform: scale(.945); } /* a clearer "ready" invite pulse on the phone */ .btn-capture:not(:disabled):not(.is-live) { animation: capInvite 2.4s ease-in-out infinite; } @keyframes capInvite { 0%, 100% { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.55); } 50% { box-shadow: 0 14px 34px rgba(141,182,0,.30), 0 0 0 5px rgba(141,182,0,.10), inset 0 1px 0 rgba(255,255,255,.6); } } /* ── catalog → swipeable snap carousel (peek the next card) ── */ .catalog-panel { margin-top: 32px; } .catalog-grid { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; scroll-padding-inline: 2px; } .catalog-grid::-webkit-scrollbar { width: 0; height: 0; display: none; } .cat-item { flex: 0 0 44vw; max-width: 172px; scroll-snap-align: start; } .cat-item:active { transform: scale(.95); } /* spacing rhythm for the remaining sections */ .complete-look { margin-top: 34px; } .active-garment { padding: 13px; border-radius: var(--radius); margin-bottom: 18px; } .pear-interaction-pod { margin-top: 32px; border-radius: 26px; } /* lift the toast above the home indicator */ .toast { bottom: calc(24px + var(--safe-b)); } } /* ════════════════════════════════════════════════════════════════════════ SMALL PHONE (≤ 480px) - declutter + tune ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .personal-title { font-size: 1.34rem; } .app-header__sub { display: none; } /* brand + engine dot is enough */ .camera-card { border-radius: 26px; } .btn-capture { min-height: 60px; } .cat-item { flex-basis: 52vw; } .live-countdown { width: 58px; height: 58px; } .live-countdown__num { font-size: 1.34rem; } } /* ════════════════════════════════════════════════════════════════════════ ✦ LUXURY MICRO-INTERACTION LAYER (iOS / macOS-grade polish) ───────────────────────────────────────────────────────────────────────── Paired with lux-interactions.js. Add-to-Cart fly · Bitten-Pear transition · ambient side rails · magnetic buttons · floating labels · spring cart toast · metallic skeleton. Pear-green accent, Monochrome Liquid-Glass language. ════════════════════════════════════════════════════════════════════════ */ :root { --power: cubic-bezier(0.25, 1, 0.5, 1); } /* Apple signature power-ease */ /* ── 1 · Header cart icon ──────────────────────────────────────────────── */ .cart-btn { position: relative; align-self: center; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; /* Was a hand-set 42px square - the tallest control in the row, and the one every other control was visually measured against. Now the shared height, which also makes it exactly the same circle as .profile-btn opposite it. */ width: var(--hdr-control-h); height: var(--hdr-control-h); border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .5s var(--power), box-shadow .5s var(--power), background .35s var(--ease); } .cart-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.85); box-shadow: var(--shadow); } .cart-btn:active { transform: scale(.92); } /* iOS-style jiggle when an item lands */ .cart-btn.is-bounce { animation: cartJiggle .68s var(--power); } @keyframes cartJiggle { 0% { transform: scale(1) rotate(0); } 22% { transform: scale(1.22) rotate(-8deg); } 44% { transform: scale(.92) rotate(6deg); } 64% { transform: scale(1.08) rotate(-4deg); } 82% { transform: scale(.98) rotate(2deg); } 100% { transform: scale(1) rotate(0); } } .cart-btn__count { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pear), var(--pear-deep)); color: #fff; font-family: var(--font-ui); font-weight: 900; font-size: .68rem; line-height: 1; border: 1.5px solid rgba(255,255,255,.9); box-shadow: 0 3px 10px rgba(141,182,0,.4); transition: transform .5s var(--spring), opacity .35s var(--ease); } .cart-btn__count.is-empty { transform: scale(0); opacity: 0; } /* ── Cart dropdown - mirrors the HOST store's real cart (Full Bi-directional Cart Sync: app.js <-> pear-widget.js). Anchored to .app-header__actions (position:relative, set where that zone is defined further down) rather than fixed like .profile-dropdown - #cartBtn sits in normal document flow, not a fixed viewport corner, so a hardcoded fixed offset would drift out from under it the moment the header's own layout/scroll state changes. ── */ .cart-dropdown { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 9999; /* BUG FIX: was a hardcoded `direction: rtl`, which left the popover right-to-left (text alignment, and the remove button's side) even in English. Inherited from , which i18n.js already keeps current, so the popover follows the active language like the rest of the UI. */ direction: inherit; /* OVERFLOW FIX: was a flat 280px with max-width:calc(100vw - 32px), which measures the VIEWPORT but ignores where this popover is actually anchored - inset-inline-end:0 on .app-header__actions, i.e. offset from the viewport edge by whatever gutter the header reserves for the fixed corner controls. At 320px that put 48px of the panel off-screen. The cap now subtracts the LARGER of the two gutters so it holds in both directions (RTL anchors the panel at the physical-left gutter, LTR at the physical-right one), and is a no-op at every width where 280px already fits. */ width: min(280px, calc(100vw - max(var(--hdr-gutter-l), var(--hdr-gutter-r)) - 12px)); max-height: 60vh; overflow-y: auto; padding: 14px; border: 1px solid var(--glass-border); border-radius: 16px; /* Explicitly opaque enough that NOTHING behind it (the page h1/h2, the camera stage) can read through - backdrop-filter alone is not a guarantee, since a browser that ignores/degrades it would otherwise leave this popover translucent over live content. */ background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08); animation: fade .25s var(--ease) both; } .cart-dropdown[hidden] { display: none; } /* BUG FIX (popover rendering UNDER page chrome): on phones .app-header is `position: sticky; z-index: 40`, which makes it a stacking context - so the popover's own z-index could only ever compete INSIDE it, and fixed siblings later in the document (.lang-switch / .profile-btn at 100, the help widget at 150) painted straight over it no matter how high that z-index went. Raising the header's own context while the popover is open is what actually lifts it clear. 190 is deliberate: above ordinary page chrome (help widget 150) but BELOW every real overlay - lightbox 200, compare 220, toast 300, garment-detect 400 - so an open popover can never float over a modal. Toggled from setupCartButton() in app.js, only for as long as it's open. */ .app-header.has-cart-open { position: relative; z-index: 190; } .cart-dropdown__head { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-ui); font-size: .95rem; color: var(--ink); padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--glass-line); } /* the heading itself may shrink/ellipsize; the count chip never does */ .cart-dropdown__head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-dropdown__count { flex: none; margin-inline-start: auto; font-family: var(--font-ui); font-size: .76rem; font-weight: 700; color: var(--muted); } .cart-dropdown__count:empty { display: none; } .cart-dropdown__empty { margin: 6px 0 2px; text-align: center; font-size: .84rem; color: var(--muted); line-height: 1.45; } .cart-dropdown__empty[hidden] { display: none; } .cart-dropdown__list { display: flex; flex-direction: column; gap: 10px; } .cart-line { position: relative; display: flex; align-items: center; gap: 10px; padding-inline-end: 30px; /* room for the absolutely-positioned remove button */ } .cart-line__media { width: 46px; height: 46px; flex: none; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, .05); border: 1px solid var(--glass-line); } .cart-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-line__meta { min-width: 0; flex: 1 1 auto; } .cart-line__title { display: block; font-size: .84rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-line__variant { display: block; font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-line__qty { font-size: .74rem; color: var(--muted); } .cart-line__remove { position: absolute; top: 0; inset-inline-end: 0; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .05); color: var(--muted); font-size: .78rem; line-height: 1; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); } .cart-line__remove:hover { background: rgba(220, 60, 60, .16); color: #b23a3a; } .cart-line.is-removing { opacity: .4; pointer-events: none; } /* optimistic remove, pending host confirmation */ /* ── Profile button (Feature 3) - fixed top-right corner, always visible in the fitting room once a user is known. Same frosted-circle language as .cart-btn, pear-green accented. z-index sits above the camera stage (highest in-camera z-index is 9, see .camera-card__* rules) but below any modal/overlay (garment-detect / lightbox / compare start at 200+). ── */ .profile-btn { /* ABSOLUTE, matching .lang-switch: both top-corner controls belong to the TOP OF THE PAGE and scroll away with it, while .app-header keeps sticking. This was already the OBSERVED behaviour, but only by accident, and only in some browsers: it is declared inside #screen-fitting, whose .screen.active `fade` animation ends on `transform: none` under animation-fill-mode:both. Chrome resolves that filled value to an identity matrix, which is enough to make the screen a containing block and quietly demote this `fixed` to absolute - which is why the avatar scrolls off. A browser that resolves the same keyframe to a genuine `none` creates no containing block, leaving the avatar truly viewport-fixed and pinned on screen while everything else scrolls. Declaring `absolute` outright makes the intended behaviour the same everywhere instead of depending on how a keyframe happens to compute. body is position:relative with margin:0, so the resolved position is identical to what the trapped-fixed version produced. */ /* --safe-t for the same reason as .lang-switch above (viewport-fit=cover). It also removes a jump this button used to make on notched phones: the base offset had no --safe-t while the body.is-scrolled override below does, so crossing the 12px scroll threshold shifted it down by the whole inset - ~45px on an iPhone. Both ends now include it, leaving the intended 2px of compaction. */ position: absolute; top: calc(var(--safe-t) + var(--hdr-pad-t) + (var(--hdr-row-h) - var(--hdr-control-h)) / 2); z-index: 100; /* --hdr-pad-t, NOT --corner-inset: this control is absolutely positioned and is therefore the one thing in the header that cannot inherit the row's top edge. Sharing the token is what keeps it on the row's baseline at every breakpoint - it used to sit 8px above the row on desktop and 8px below it on phones. --corner-inset still owns the horizontal inset below. */ /* Physical right + the landscape safe-area inset, matching --hdr-gutter-r exactly (see the TOP-CORNER CONTROL GEOMETRY block). */ right: calc(var(--safe-r) + var(--corner-inset)); display: inline-flex; align-items: center; justify-content: center; width: var(--profile-size); height: var(--profile-size); border-radius: 50%; padding: 0; border: 1px solid rgba(255, 255, 255, .16); background: var(--glass-dark); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: #fff; cursor: pointer; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.1); transition: box-shadow .3s var(--ease), background .3s var(--ease), top .3s var(--ease), width .3s var(--ease), height .3s var(--ease), /* Asymmetric like the focus-bar padding above: a springy pop OUT of view, a calmer ease back IN - set on the base rule so it's the "returning to visible" direction's timing; the disappear rule below overrides both with its own pop. */ transform .35s var(--ease), opacity .35s var(--ease); } .profile-btn:hover { transform: translateY(-2px); background: rgba(16, 16, 18, .8); box-shadow: var(--shadow); } .profile-btn:active { transform: scale(.92); } .profile-btn[hidden] { display: none; } /* ── Language segmented switch - fixed top-left corner (mirrors .profile-btn's top-right). Apple Liquid Glass drag physics - the SAME component architecture as .fs-switch (the fullscreen toggle): a translucent sliding thumb behind two segments, driven by setupLangToggle() in i18n.js (pointerdown/move/up for a plain click OR a real press-and-drag, both resolving through the same code path). direction:ltr locks this control's OWN internal layout to a fixed physical order (EN always left, עב always right) regardless of which language is currently active - see the comment on setupLangToggle() in i18n.js for why that's the right call here. */ .lang-switch { /* ABSOLUTE, not fixed - by request: this control belongs to the TOP OF THE PAGE, not to the viewport. It sits in the header row at rest and then scrolls away with the document, while everything else in .app-header keeps sticking. body is position:relative with no transform/filter, so this resolves against the document origin and simply scrolls off the top. z-index stays above .app-header (40) so it passes cleanly OVER the frosted bar on its way out instead of dissolving through the blur. Once it has fully cleared the viewport, mobile-ux.js flags body.lang-cleared and the header reclaims the gutter reserved for it - see the .lang-switch reservation notes on .app-header. */ /* --safe-t, like .app-header's own padding-top: the document sets viewport-fit=cover, so without it this sits UNDER the notch / status bar on every notched phone. */ position: absolute; top: calc(var(--safe-t) + var(--hdr-pad-t) + (var(--hdr-row-h) - var(--hdr-control-h)) / 2); z-index: 100; /* --hdr-pad-t, NOT --corner-inset: this control is absolutely positioned and is therefore the one thing in the header that cannot inherit the row's top edge. Sharing the token is what keeps it on the row's baseline at every breakpoint - it used to sit 8px above the row on desktop and 8px below it on phones. --corner-inset still owns the horizontal inset below. */ /* Physical left + the landscape safe-area inset, matching --hdr-gutter-l exactly (see the TOP-CORNER CONTROL GEOMETRY block). */ left: calc(var(--safe-l) + var(--corner-inset)); direction: ltr; display: inline-flex; align-items: center; padding: var(--switch-pad); margin: 0; border: 0; appearance: none; -webkit-appearance: none; border-radius: var(--pill); background: var(--glass-soft); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, .4); /* specular border, per the Liquid Glass spec */ box-shadow: var(--shadow-soft); cursor: pointer; touch-action: none; /* pointer drag owns touch gestures here, not page scroll */ } .lang-switch:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .12); } .lang-switch:active { cursor: grabbing; } .lang-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pear-ring), var(--shadow-soft); } /* The translucent pill indicator - slides between the EN/עב slots via --thumb-x (set inline by i18n.js, live during drag; snapped to the exact segment width on release/click). Ambient soft drop-shadow + specular border, both per the Liquid Glass spec. */ .lang-switch__thumb { position: absolute; top: var(--switch-pad); left: var(--switch-pad); z-index: 0; /* Width is authored to EQUAL one segment - i18n.js measures this node to get the live segment width, so the drag/snap math follows any responsive resize automatically instead of trusting a hardcoded constant. */ width: var(--lang-seg-w); height: calc(100% - 2 * var(--switch-pad)); border-radius: var(--pill); background: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .4); box-shadow: 0 3px 10px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .6); transform: translateX(var(--thumb-x, 0px)); transition: transform .5s var(--spring); /* the release "snap" */ pointer-events: none; /* the track (.lang-switch itself) owns all pointer handling */ } /* live-drag: no transition lag while the thumb is tracking the pointer 1:1 - the spring above only plays on the SNAP once the pointer is released. */ .lang-switch.is-dragging .lang-switch__thumb { transition: none; } .lang-switch__seg { position: relative; z-index: 1; /* above the absolutely-positioned thumb */ display: inline-flex; align-items: center; justify-content: center; width: var(--lang-seg-w); height: 28px; font-size: .74rem; font-weight: 700; color: var(--muted); transition: color .3s var(--ease); } .lang-switch__seg.is-active { color: var(--ink); } @media (prefers-reduced-motion: reduce) { .lang-switch__thumb { transition: none; } } /* ── Floating help widget (help-widget.js) - fixed bottom corner, Liquid Glass ─ `inset-inline-start` (not left/right) is the whole RTL/LTR trick: it resolves to the LEFT in LTR (English) and the RIGHT in RTL (Hebrew) purely from , which i18n.js already keeps current - no [dir="rtl"] override needed here, matching the inset-inline-* convention used elsewhere in this file. Visual language: warm-frosted glass (blur+saturate, a cream-white tint, a faint white refraction border) matching #screen-calculator .container / .kicker rather than the flat dark .glass-dark chip the button used to be - and the same olive-green ink (#3d4825) the brand already uses as a true fill elsewhere (.pg-swatch.is-active) for the icon, title, list markers and the button's own "open" state, instead of generic grayscale UI chrome. --help-accent is scoped to this component only - it does not touch the site-wide --pear-deep token (near-black by design everywhere else) or any of the many components that rely on it staying that way. */ /* SOLID BY DESIGN: this button used to fade out and drop pointer-events whenever a primary control (capture / add-to-cart / any .btn-primary) scrolled underneath its fixed corner - a guard against the button stealing a tap meant for that control. In practice those full-bleed rows pass through this exact corner constantly during ordinary scrolling, so the button was fading in and out on nearly every scroll gesture - reported as "popping on and off, on and off." That trade was the wrong one: a help affordance that visibly flickers reads as broken far more than the rare, narrow sliver of tap overlap it was preventing. The guard is gone; this button is now always visible, always in the same corner, always interactive - full stop. What still guards against stealing a real tap is `clip-path` below, which trims the button's hit area down to its actual visible circle - the transparent corners of its square bounding box (the only part that could ever land on a control it isn't visually covering) no longer intercept anything. */ .pear-help-widget { position: fixed; bottom: calc(20px + var(--safe-b)); inset-inline-start: 20px; z-index: 150; --help-accent: #3d4825; } .pear-help-widget__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; padding: 0; /* Hit-test the VISIBLE circle only, not its square bounding box - see the SOLID BY DESIGN note on .pear-help-widget. A round border-radius:50% button still has a full square box of pointer-events by default; without this, the box's four transparent corners could each land on whatever sits beneath them even though nothing is visually there to tap. */ clip-path: circle(50%); border: 1px solid rgba(255, 255, 255, .4); background: linear-gradient(135deg, rgba(255, 253, 246, .92) 0%, rgba(250, 247, 235, .78) 100%); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); color: var(--help-accent); font-family: "Urbanist", sans-serif; font-weight: 800; font-size: 1.15rem; cursor: pointer; box-shadow: 0 8px 32px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .6); transition: box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease); } .pear-help-widget__btn:hover { transform: translateY(-2px); background: linear-gradient(135deg, rgba(255, 253, 246, .98) 0%, rgba(250, 247, 235, .90) 100%); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .7); } .pear-help-widget__btn:active { transform: scale(.92); } .pear-help-widget__btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--pear-ring), 0 8px 32px rgba(0, 0, 0, .06); } /* "open" state - the same olive tint used for an active swatch/tab elsewhere, so the button visibly reads as engaged rather than relying on the popover alone to communicate it. */ .pear-help-widget__btn[aria-expanded="true"] { background: linear-gradient(135deg, rgba(141, 182, 0, .26) 0%, rgba(141, 182, 0, .14) 100%); border-color: rgba(141, 182, 0, .4); } .pear-help-widget[hidden] { display: none; } .pear-help-widget__popover { position: absolute; bottom: calc(100% + 12px); inset-inline-start: 0; width: min(320px, calc(100vw - 40px)); /* never grow past the viewport on a short screen - scroll inside instead (same guard as .cart-dropdown / .profile-dropdown) */ max-height: calc(100vh - 120px); overflow-y: auto; padding: 18px; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255, 253, 246, .96) 0%, rgba(250, 247, 235, .93) 100%); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 8px 32px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .6); } .pear-help-widget__popover[hidden] { display: none; } .pear-help-widget__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--glass-line); } .pear-help-widget__title { margin: 0; font-family: var(--font-ui); font-weight: 800; font-size: 1rem; color: var(--help-accent); } .pear-help-widget__close { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); } .pear-help-widget__close:hover { background: var(--pear-soft); color: var(--help-accent); } .pear-help-widget__steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-ui); font-size: .86rem; line-height: 1.45; color: var(--text); } .pear-help-widget__steps li { padding-inline-start: 2px; } .pear-help-widget__steps li::marker { color: var(--help-accent); font-weight: 700; } @media (max-width: 480px) { .pear-help-widget { bottom: calc(14px + var(--safe-b)); inset-inline-start: 14px; } .pear-help-widget__btn { width: 38px; height: 38px; font-size: 1.02rem; } .pear-help-widget__popover { width: min(300px, calc(100vw - 28px)); padding: 14px; } } /* STICKING/OVERLAP FIX: .profile-btn is position:fixed at a CONSTANT top offset, independent of .app-header's own scroll-triggered compaction (padding shrinks, see .app-header.is-scrolled) - so as the header shrank on scroll, the button stayed rigidly where it started, drifting out of sync with (and at some scroll positions, overlapping) header/focus-bar content that had since moved up under it. body.is-scrolled is set by the SAME scroll listener that drives .app-header.is-scrolled (see mobile-ux.js) - .profile-btn can't use a sibling selector off .app-header directly (it comes BEFORE it in the DOM; combinators only select forward), so this shared flag on is what lets it react. */ @media (max-width: 768px) { body.is-scrolled .profile-btn { top: calc(8px + var(--safe-t)); width: 34px; height: 34px; } body.is-scrolled .profile-dropdown { top: calc(46px + var(--safe-t)); } } /* Vertically center the avatar on the focus-bar's own content row while they're both visible together (focus mode, unscrolled - once scrolled the avatar is faded out, see below, so no alignment to worry about there). .focus-bar is now 22px vertical padding (bumped from 15px - the bar sat too close to the viewport's top edge) + a ~24.6px content row (the badge is the tallest child: 5px+5px padding + a ~14.6px line) = ~68.6px tall, centered at ~34px from the top. The avatar's own base top:16px + half its 40px height = a 36px center, so this only needs a small nudge now (previously a bigger 9px gap when the bar's padding was 15px). Only scoped >480px: below that the avatar is a smaller 32px circle (see the ≤480px "Profile icon" rule) with a different, already-close offset. */ @media (min-width: 481px) { body.focus-mode:not(.is-scrolled) .profile-btn { top: calc(var(--safe-t) + 14px); } } /* Focus mode + scrolled: the focus-bar's item-name/dot needs the WHOLE right edge (flush, zero gutter - see .focus-bar.is-scrolled below). Tried relocating the avatar to the opposite corner instead - it crowded the size badge sitting there and read as cramped. Simplest clean fix: fade the avatar out while scrolled; it's still one tap away (fades back in the instant the user scrolls back up, off the same class toggle). Applies at ANY width, not just mobile - desktop needs the same flush edge. Scale, not just opacity, so it reads as a deliberate "tuck away" rather than a flat dissolve - and its own transition (a quick, snappy --spring) so vanishing is brisk while the reappear (base rule above, --ease, no overshoot) is a calmer grow-in. */ body.focus-mode.is-scrolled .profile-btn { opacity: 0; transform: scale(.5); pointer-events: none; transition: transform .3s var(--spring), opacity .25s var(--ease); } .profile-btn__initial { font-family: var(--font-ui); font-weight: 800; font-size: .92rem; line-height: 1; } .profile-dropdown { /* Absolute for the same reason as .profile-btn above - the panel has to travel with the button it hangs from, so both must resolve against the same box. Leaving this `fixed` while the button scrolls away would tear the panel off its anchor and strand it mid-viewport. */ position: absolute; top: 60px; right: 16px; z-index: 100; /* BUG FIX: was a hardcoded `direction: rtl` - the same bug just fixed on .cart-dropdown, which left this panel right-to-left even in English. `right:16px` above is deliberately NOT switched to a logical property: it pins to #profileBtn, which is itself `position:fixed; right:16px` in both directions, so the two must stay on the same physical edge. */ direction: inherit; width: 220px; max-width: calc(100vw - 32px); padding: 16px; /* never run off a short viewport (landscape phone) - scroll inside instead */ max-height: calc(100vh - 76px); overflow-y: auto; border: 1px solid var(--glass-border); border-radius: 12px; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: var(--blur-lg); backdrop-filter: var(--blur-lg); box-shadow: 0 4px 20px rgba(0, 0, 0, .15); } .profile-dropdown[hidden] { display: none; } /* ── identity section - centred: big initials circle, full name, email ── */ .profile-dropdown__identity { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding-bottom: 12px; } .profile-dropdown__avatar { width: 48px; height: 48px; margin-bottom: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--glass-dark); color: #fff; font-family: var(--font-ui); font-weight: 800; font-size: 1.05rem; } .profile-dropdown__name { font-family: var(--font-ui); font-weight: 800; font-size: .96rem; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-dropdown__email { font-family: var(--font-ui); font-size: .78rem; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-dropdown__divider { height: 1px; margin: 4px 0 8px; background: var(--glass-line); } /* ── measurements section - right-aligned rows ── */ /* `start`, not `right` - follows the inherited direction now that the panel no longer forces RTL on itself (see .profile-dropdown above). */ .profile-dropdown__measurements { text-align: start; } .profile-dropdown__row { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; font-family: var(--font-ui); font-size: .82rem; } .profile-dropdown__label { color: var(--muted); flex: none; } .profile-dropdown__value { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-dropdown__logout { width: 100%; margin-top: 10px; padding: 9px 12px; border: 0; border-radius: var(--pill); background: rgba(220, 60, 60, .12); color: #b23a3a; font-family: "Inter", sans-serif; font-size: .84rem; font-weight: 700; cursor: pointer; transition: background .25s var(--ease); } .profile-dropdown__logout:hover { background: rgba(220, 60, 60, .2); } /* ── 1 · "Add to Cart" morphing button ─────────────────────────────────── */ .add-cart-row { max-width: 470px; margin: 14px auto 0; } .btn-add-cart { position: relative; overflow: hidden; width: 100%; min-height: 56px; padding: 16px 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(141,182,0,.4); border-radius: var(--pill); background: linear-gradient(135deg, rgba(141,182,0,.22), rgba(141,182,0,.10)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--pear-deep); cursor: pointer; font-family: "Urbanist", sans-serif; font-weight: 800; font-size: 1.04rem; letter-spacing: .01em; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.55); transition: transform .45s var(--power), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), color .3s var(--ease); } .btn-add-cart:hover { transform: translateY(-2px); background: linear-gradient(135deg, rgba(141,182,0,.30), rgba(141,182,0,.14)); border-color: rgba(141,182,0,.6); box-shadow: 0 14px 34px rgba(141,182,0,.24), inset 0 1px 0 rgba(255,255,255,.6); } .btn-add-cart:active { transform: scale(.96); } .btn-add-cart:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--pear-ring), var(--shadow); } .bac__en { font-weight: 600; font-size: .76rem; opacity: .68; letter-spacing: .04em; } .bac__icon { font-weight: 700; margin-inline-end: 2px; } .bac__label { display: inline-flex; align-items: center; gap: 7px; transition: opacity .3s var(--ease), transform .4s var(--power); } /* spinner + check are centred overlays so the button width never jumps */ .bac__spinner, .bac__check { position: absolute; top: 50%; left: 50%; opacity: 0; pointer-events: none; } .bac__spinner { width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2.5px solid rgba(141,182,0,.28); border-top-color: var(--pear-deep); border-radius: 50%; transform: scale(.5); } .bac__check { margin: -0.62em 0 0 -0.42em; font-size: 1.3rem; font-weight: 900; color: var(--pear-deep); transform: scale(.4); } /* loading: label glides out, spinner fades in + spins, control "scales down" */ .btn-add-cart.is-loading { transform: scale(.965); pointer-events: none; } .btn-add-cart.is-loading .bac__label { opacity: 0; transform: scale(.9); } .btn-add-cart.is-loading .bac__spinner { opacity: 1; transform: scale(1); animation: bacSpin .8s linear infinite; } @keyframes bacSpin { to { transform: scale(1) rotate(360deg); } } /* done: checkmark pops with an elastic overshoot */ .btn-add-cart.is-done { background: linear-gradient(135deg, var(--pear), var(--pear-deep)); border-color: transparent; color: #fff; box-shadow: var(--shadow-pear); } .btn-add-cart.is-done .bac__label { opacity: 0; transform: scale(.9); } .btn-add-cart.is-done .bac__spinner { opacity: 0; animation: none; } .btn-add-cart.is-done .bac__check { opacity: 1; color: #fff; animation: bacCheck .55s var(--spring) both; } @keyframes bacCheck { 0% { opacity: 0; transform: scale(.2) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.25) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } /* the mini garment clone that flies into the cart */ .cart-fly { position: fixed; z-index: 9998; width: 64px; height: 80px; pointer-events: none; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-border); background: var(--glass-strong); box-shadow: var(--shadow-lift); transform: translate(-50%, -50%); will-change: transform, opacity; } .cart-fly img { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-fly--dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #9cca00, var(--pear) 55%, var(--pear-deep)); box-shadow: 0 6px 18px var(--pear-glow), inset 0 1px 2px rgba(255,255,255,.5); } /* ── 4 · Top-center spring "cart" toast (glassmorphism) ────────────────── */ .lux-cart-toast { position: fixed; top: calc(18px + var(--safe-t, 0px)); left: 50%; z-index: 300; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: var(--pill); background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.32)); -webkit-backdrop-filter: blur(24px) saturate(200%); backdrop-filter: blur(24px) saturate(200%); border: 1px solid var(--glass-border); color: var(--ink); font-family: var(--font-ui); font-weight: 800; font-size: .92rem; box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.6); opacity: 0; pointer-events: none; transform: translate(-50%, -130%); transition: opacity .35s var(--ease), transform .55s var(--spring); max-width: 90vw; } .lux-cart-toast.show { opacity: 1; transform: translate(-50%, 0); } .lux-cart-toast__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--pear), var(--pear-deep)); color: #fff; font-size: .8rem; font-weight: 900; box-shadow: 0 3px 10px rgba(141,182,0,.4); } /* ── 2 · "LIQUID BRAND APERTURE" transition - GPU-ONLY (transform + opacity) ── Hardware-acceleration protocol: NOTHING that triggers layout/paint is animated (no width/height/clip-path/border-radius/SVG-r). Three composited layers: · __bg - heavy glass backdrop (opacity only) · __shape - the brand logo (transform scale + opacity) · __flood - pear-green aperture (transform scale + opacity) The flood is ONE viewport-sized ellipse promoted to its own GPU layer; it scales up to mask the screen, then scales out + fades like a camera aperture. NO secondary "bite" shape exists any more - it was deleted entirely. */ .pear-transition { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; pointer-events: none; transform: translate3d(0, 0, 0); /* promote the overlay to a layer */ transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, opacity; } .pear-transition[hidden] { display: none; } .pear-transition__bg { position: absolute; inset: 0; opacity: 0; background: radial-gradient(60% 50% at 50% 42%, rgba(120,104,72,.14), transparent 70%), linear-gradient(180deg, rgba(244,238,225,.98), rgba(236,228,210,.98)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); will-change: opacity; } .pear-transition__shape { position: relative; width: clamp(190px, 30vmin, 320px); height: auto; transform-origin: 50% 52%; transform: translate3d(0, 0, 0) scale(.15); opacity: 0; filter: drop-shadow(0 24px 60px rgba(141,182,0,.4)); will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* The pear-green flood/aperture: a single viewport-sized ellipse (cheap layer) scaled from the centre. transform + opacity only. */ .pear-transition__flood { position: fixed; inset: 0; border-radius: 50%; /* static - never animated */ background: radial-gradient(circle at 50% 42%, #a4d000 0%, var(--pear) 52%, var(--pear-deep) 100%); transform-origin: 50% 50%; transform: translate3d(0, 0, 0) scale(0); opacity: 1; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ── Cinematic 1200ms sequence - Intro → Flood → (swap) → Aperture reveal ──── Phase 1 INTRO (0–400ms): logo scales up + fades in over the glass bg. Phase 2 FLOOD (400–700ms): the pear-green ellipse scales up to fully mask the viewport; the logo + bg fade out underneath, hidden by the flood. Phase 3 SWAP (≈700ms): app.js swaps screens while 100% covered (rAF). Phase 4 APERTURE (700–1200ms): the flood scales to ×3.5 and fades out on the Apple curve - a luxury aperture opening onto the try-on room. */ .pear-transition.is-playing .pear-transition__bg { animation: apBg 1.2s linear both; } .pear-transition.is-playing .pear-transition__shape { animation: apLogoIn .4s var(--power) both, apLogoOut .2s linear .42s forwards; /* fades just before the flood seals */ } .pear-transition.is-playing .pear-transition__flood { animation: apFloodIn .3s var(--power) .4s both, apFloodOut .5s var(--ease) .7s forwards; /* --ease = cubic-bezier(.16,1,.3,1) */ } @keyframes apBg { 0% { opacity: 0; } 12% { opacity: 1; } /* glass backdrop in by ~145ms */ 56% { opacity: 1; } /* hold until the flood has sealed the viewport (~675ms) */ 58% { opacity: 0; } /* then drop instantly, hidden behind the opaque flood */ 100% { opacity: 0; } } @keyframes apLogoIn { 0% { transform: translate3d(0,0,0) scale(.4) rotate(-4deg); opacity: 0; } 60% { transform: translate3d(0,0,0) scale(1.04) rotate(1deg); opacity: 1; } 100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); opacity: 1; } } @keyframes apLogoOut { to { opacity: 0; } } /* covered by the flood as it fades */ @keyframes apFloodIn { /* liquid flood - seals the viewport from the centre */ 0% { transform: translate3d(0,0,0) scale(0); opacity: 1; } 100% { transform: translate3d(0,0,0) scale(1.7); opacity: 1; } /* >diagonal → full cover */ } @keyframes apFloodOut { /* cinematic aperture - scale out + fade, Apple curve */ 0% { transform: translate3d(0,0,0) scale(1.7); opacity: 1; } 100% { transform: translate3d(0,0,0) scale(3.5); opacity: 0; } } /* ── 4 · Floating-label fields ─── base only; the magnetic micro-inertia behaviour (label glides toward the cursor) is defined in the palette section below so it can use the --lblx/--lbly custom properties set by JS. ───────── */ .lux-field { position: relative; } /* ── 4 · Metallic skeleton shimmer ─────────────────────────────────────── */ .lux-skeleton { position: relative; overflow: hidden; } .lux-skeleton::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(110deg, rgba(230,230,232,.55) 0%, rgba(248,248,250,.9) 18%, rgba(255,255,255,.95) 30%, rgba(248,248,250,.9) 42%, rgba(230,230,232,.55) 60%); background-size: 220% 100%; animation: luxShimmer 1.5s var(--ease) infinite; } @keyframes luxShimmer { from { background-position: 180% 0; } to { background-position: -60% 0; } } /* ── 4 · Magnetic buttons - animate the inner content drift smoothly ───── */ .lux-magnetic > * { transition: transform .45s var(--power); } .lux-magnetic:active > * { transition-duration: .12s; } /* ── accessibility: collapse the heavier theatre under reduced-motion ──── */ @media (prefers-reduced-motion: reduce) { .pear-transition { display: none !important; } .cart-btn.is-bounce, .btn-add-cart.is-done .bac__check, .lux-skeleton::after { animation: none; } } /* ════════════════════════════════════════════════════════════════════════ ✦ BRAND PALETTE - logo-matched ivory + crisp black + PEAR-GREEN accent ───────────────────────────────────────────────────────────────────────── Strictly three colours, derived from the brand assets: • Canvas - warm luxury IVORY (the logo's cream ground). • Type / lines- crisp luxury BLACK (the logo's line-art ink). • Accent - vibrant PEAR GREEN (#8DB600), reserved for interactive, active and highlight moments only (buttons, focus, live, active tiles, results, progress). NO other accent colours. This block lives LAST so it is the single source of truth for the palette. ════════════════════════════════════════════════════════════════════════ */ :root { /* warm ivory canvas */ --bg: #efe8d8; --bg-soft: rgba(255, 252, 244, .5); /* crisp luxury black ink scale (slightly warm, from the logo) */ --ink: #0a0a0b; --text: #161512; --muted: #6c665b; --muted-2:#a89f8d; /* PEAR-GREEN accent family - the one sanctioned accent */ --pear: #8DB600; --pear-deep: #5f7d00; --pear-soft: rgba(141, 182, 0, .10); --pear-tint: rgba(141, 182, 0, .14); --pear-ring: rgba(141, 182, 0, .22); --pear-glow: rgba(141, 182, 0, .50); --shadow-pear: 0 12px 36px rgba(141, 182, 0, .26); /* warm frosted ivory "Liquid Glass" (blur + saturation already in --blur) */ --glass: rgba(255, 252, 244, .55); --glass-strong: rgba(255, 252, 244, .72); --glass-soft: rgba(255, 252, 244, .40); --glass-border: rgba(255, 255, 255, .60); --glass-line: rgba(22, 19, 12, .13); } /* ivory canvas + soft warm light with a faint pear-green brand wash */ body { background: radial-gradient(1100px 760px at 84% -10%, rgba(141, 182, 0, .10), transparent 60%), radial-gradient(900px 700px at -8% 14%, rgba(22, 19, 12, .05), transparent 58%), radial-gradient(900px 900px at 50% 118%, rgba(141, 182, 0, .06), transparent 60%), linear-gradient(180deg, #f4eee1 0%, #ece4d2 52%, #f1ebdd 100%); background-attachment: fixed; } /* ambient orbs: one warm sand, one faint pear-green - subtle, never an accent */ body::before { background: radial-gradient(circle at 30% 30%, rgba(141, 182, 0, .26), transparent 65%); } body::after { background: radial-gradient(circle at 60% 40%, rgba(150, 132, 92, .22), transparent 65%); } /* the brand mark stays crisp black line-art, exactly like the logo */ .brand-mark { width: 30px; height: auto; flex-shrink: 0; align-self: center; color: var(--ink); margin-inline-end: 4px; } /* ── ADD-TO-CART CTA - pear-green physical-glass feedback ────────────────── */ .btn-add-cart { border-color: rgba(141, 182, 0, .40); background: linear-gradient(135deg, rgba(141, 182, 0, .20), rgba(141, 182, 0, .08)); color: var(--pear-deep); } .btn-add-cart:hover { background: linear-gradient(135deg, rgba(141, 182, 0, .30), rgba(141, 182, 0, .13)); border-color: rgba(141, 182, 0, .60); box-shadow: 0 14px 34px rgba(141, 182, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .6); } .btn-add-cart:focus-visible { box-shadow: 0 0 0 4px var(--pear-ring), var(--shadow); } .bac__spinner { border-color: rgba(141, 182, 0, .28); border-top-color: var(--pear-deep); } .bac__check { color: var(--pear-deep); } .btn-add-cart.is-done { /* satisfying success fill */ background: linear-gradient(135deg, var(--pear), var(--pear-deep)); border-color: transparent; color: #fff; box-shadow: var(--shadow-pear); } .btn-add-cart.is-done .bac__check { color: #fff; } .cart-btn__count { /* LEGIBILITY FIX: the lighter end of the old pear→pear-deep gradient put white text at ~2.4:1 contrast - well under the 4.5:1 AA minimum. A flat --pear-deep keeps the same brand color family at a safe ~4.75:1. */ background: var(--pear-deep); box-shadow: 0 3px 10px rgba(141, 182, 0, .45); } .cart-fly--dot { background: radial-gradient(circle at 34% 30%, #b6e000, var(--pear) 55%, var(--pear-deep)); box-shadow: 0 6px 18px var(--pear-glow), inset 0 1px 2px rgba(255, 255, 255, .5); } .lux-cart-toast__icon { background: linear-gradient(135deg, var(--pear), var(--pear-deep)); box-shadow: 0 3px 10px rgba(141, 182, 0, .40); } /* ════════════════════════════════════════════════════════════════════════ ✦ OVERFLOW ISOLATION - content can never collide with the ambient rails ───────────────────────────────────────────────────────────────────────── The rails are fixed at the viewport edges (z-index 0, strictly behind the content). The only at-risk element is the full-bleed sticky focus bar, whose long RTL string used to run under the side tracks (see edited-image.png). We (a) reserve a safe gutter wider than the rails on large screens and (b) let the focused-item line truncate cleanly instead of crossing them. ════════════════════════════════════════════════════════════════════════ */ .focus-bar { gap: 12px; } .focus-bar__text { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .focus-bar__badge { flex-shrink: 0; } /* once the rails appear (≥1340px) keep every full-width bar inside the gutter. Split left/right instead of the symmetric padding-inline shorthand: the right side only ever needs to clear the fixed avatar (40px + 16px inset = 56px), which the wide rail clamp badly over-reserved - dot+text ended up with a big dead gap before the avatar instead of sitting close to it. Left keeps the full rail clamp (still guards the badge side). */ @media (min-width: 1340px) { .focus-bar { /* BUG FIX: floor raised 84px -> 136px - the old floor was sized only for the ambient rail, not for .lang-switch (fixed top:16px;left:16px, ~136px clearance needed - see the ≤1339px rule above for the exact arithmetic), so .focus-bar__badge still rendered under the language toggle for 1340-~1885px wide viewports (where 7vw < 136px). The cap (150px) and the growth curve above the new floor are unchanged. */ padding-left: clamp(136px, 7vw, 150px); padding-right: 72px; /* 56px avatar clearance + a deliberate ~16px breathing gap */ } } /* ── Real-logo loaders (/pear-logo.png) - replace the emoji pear ──────────── */ img.pear-loader__fruit { width: 46px; height: auto; object-fit: contain; } /* the loader sits on the DARK scan overlay → render the black logo as white */ .scan-overlay img.pear-loader__fruit { filter: brightness(0) invert(1) drop-shadow(0 8px 12px rgba(0, 0, 0, .30)); } /* ════════════════════════════════════════════════════════════════════════ ✦ LIQUID-GLASS DYNAMIC BACKGROUND - mouse/tilt-reactive ambient mesh A single GPU layer (transform/opacity only) of blurred light blobs. JS gives it an inertial translate3d so it reads like light moving under liquid glass. ════════════════════════════════════════════════════════════════════════ */ .liquid-mesh { position: fixed; inset: -14%; z-index: 0; pointer-events: none; background: radial-gradient(38% 38% at 22% 26%, rgba(141, 182, 0, .16), transparent 70%), radial-gradient(42% 42% at 82% 20%, rgba(150, 132, 92, .18), transparent 72%), radial-gradient(48% 48% at 70% 84%, rgba(141, 182, 0, .10), transparent 72%), radial-gradient(40% 40% at 14% 80%, rgba(22, 19, 12, .06), transparent 72%); /* Was blur(64px) with `will-change: transform`. This element is fixed at inset:-14% (≈128% of the viewport on both axes, ~3.4Mpx at 1080p), so a large-radius blur here is one of the most expensive things on the page - and `will-change` kept it permanently promoted to its own GPU layer for the whole session, on every screen, blur buffers included. translate3d(0,0,0) below already promotes the layer for the duration of the parallax drift (lux-interactions.js writes translate3d on this element), which is what the animation actually needs; `will-change` on top of that only pinned the memory earlier and for longer. Dropping the blur to 48px cuts the intermediate buffer work noticeably - the mesh is a diffuse 4-gradient wash, so the visual difference is imperceptible while saturate(160%) keeps the colour identical. */ filter: blur(48px) saturate(160%); transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } @media (prefers-reduced-motion: reduce) { .liquid-mesh { transform: none !important; } } /* ── Tactile Add-to-Cart: soft pear-green "fluid glow" pulse while working ── */ .btn-add-cart.is-loading { animation: bacGlow 1.5s var(--ease) infinite; } @keyframes bacGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(141, 182, 0, 0), var(--shadow); } 50% { box-shadow: 0 0 0 6px rgba(141, 182, 0, .12), 0 10px 30px rgba(141, 182, 0, .30); } } /* ── Micro-inertia floating label - glides magnetically toward the cursor ── */ .lux-field > label { transform-origin: center; transform: translate3d(var(--lblx, 0px), var(--lbly, 0px), 0); transition: transform .2s var(--ease), color .3s var(--ease), letter-spacing .3s var(--ease); will-change: transform; } .lux-field.is-focus > label, .lux-field.is-filled > label { transform: translate3d(var(--lblx, 0px), calc(var(--lbly, 0px) - 3px), 0) scale(.92); color: var(--pear-deep); letter-spacing: .01em; } .lux-field.is-focus > label { color: var(--pear); } /* ════════════════════════════════════════════════════════════════════════ "UPLOAD YOUR OWN GARMENT" - upload card · detection overlay · boxes ──────────────────────────────────────────────────────────────────────── Its own Luxury white / royal-blue accent (scoped --royal* tokens), kept distinct from the app's pear-green so the upload flow reads as a special, premium action while the rest of the room is untouched. ════════════════════════════════════════════════════════════════════════ */ :root { --royal: #0b3c95; /* MERIDIAN royal blue - borders / text */ --royal-lift: #2b6bff; /* brighter royal - glow / active state */ --royal-soft: rgba(43, 107, 255, .14); --royal-ring: rgba(43, 107, 255, .30); --royal-glow: rgba(43, 107, 255, .55); } /* ── Upload card (first tile in the catalog grid) ─────────────────────────── */ .cat-item--upload { border: 1.5px dashed var(--royal); background: linear-gradient(155deg, rgba(43,107,255,.10), rgba(255,255,255,.5)); } .cat-item--upload:hover { border-color: var(--royal-lift); box-shadow: 0 0 0 2px var(--royal-ring), 0 18px 44px rgba(11,60,149,.22); } .cat-item--upload.is-active { animation: none; } .cat-upload__media { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 50% 15%, rgba(43,107,255,.16), transparent 62%); } .cat-upload__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--royal); background: rgba(255,255,255,.7); box-shadow: 0 6px 18px rgba(11,60,149,.18), inset 0 0 0 1px rgba(43,107,255,.25); transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .3s var(--ease); } .cat-item--upload:hover .cat-upload__icon { transform: translateY(-3px) scale(1.06); color: var(--royal-lift); box-shadow: 0 10px 26px rgba(11,60,149,.28), inset 0 0 0 1px rgba(43,107,255,.4); } .cat-item--upload .cat-item__name { color: var(--royal); } .cat-upload__en { color: var(--royal-lift) !important; font-weight: 600; } /* ── Detection overlay ───────────────────────────────────────────────────── Fade in/out is driven entirely by the .show class + CSS transitions (no JS timers). The initial `hidden` attribute is removed on first open; thereafter .show alone governs visibility, so the close animation plays with zero hardcoded teardown timing. */ .gd-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 4vw, 40px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s var(--ease), visibility .28s var(--ease); } .gd-overlay[hidden] { display: none; } .gd-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; } .gd-overlay__backdrop { position: absolute; inset: 0; background: rgba(6,14,32,.58); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); } .gd-overlay__panel { position: relative; z-index: 1; width: min(720px, 96vw); max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: clamp(16px, 3vw, 24px); background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(244,248,255,.86)); border: 1px solid rgba(43,107,255,.22); border-radius: 26px; box-shadow: 0 30px 80px rgba(6,14,32,.42), inset 0 1px 0 rgba(255,255,255,.7); } .gd-overlay.show .gd-overlay__panel { animation: gdPanelIn .5s cubic-bezier(.22,1,.3,1) both; } @keyframes gdPanelIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } } /* heading settles a beat after .gd-overlay__panel itself, echoing the same card-then-heading ordering used on screen swap above */ .gd-head { display: flex; align-items: flex-start; gap: 12px; animation: fade .4s var(--ease) both .06s; } .gd-eyebrow { display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--royal-lift); } .gd-title { margin: 4px 0 2px; font-size: 1.16rem; font-weight: 800; color: var(--royal); } .gd-title span:not([data-i18n]) { color: var(--muted); font-weight: 700; font-size: .82rem; } .gd-sub { margin: 0; font-size: .82rem; color: var(--muted); } .gd-close { margin-inline-start: auto; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(43,107,255,.28); background: #fff; color: var(--royal); font-size: 1.05rem; line-height: 1; cursor: pointer; transition: transform .5s var(--ease), background .3s var(--ease); } .gd-close:hover { transform: scale(1.08) rotate(90deg); background: var(--royal-soft); } .gd-close:active { transform: scale(.94); } /* ── TOP / BOTTOM segmented toggle (outfit mode) - luxury pill control ──────── */ .gd-tabs { position: relative; align-self: center; display: grid; grid-template-columns: 1fr 1fr; width: min(300px, 100%); padding: 4px; border-radius: var(--pill); background: var(--royal-soft); border: 1px solid rgba(43,107,255,.2); box-shadow: inset 0 1px 3px rgba(6,14,32,.08); } .gd-tabs[hidden] { display: none; } .gd-tab { position: relative; z-index: 1; padding: 6px 10px; border-radius: var(--pill); display: flex; flex-direction: column; align-items: center; line-height: 1.05; font-size: .82rem; font-weight: 800; color: var(--royal); background: transparent; border: none; cursor: pointer; transition: color .25s var(--ease); } .gd-tab small { font-size: .56rem; font-weight: 700; opacity: .6; letter-spacing: .1em; text-transform: uppercase; } .gd-tab.is-active { color: #fff; } .gd-tab.is-active small { opacity: .85; } .gd-tabs__ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: var(--pill); background: var(--royal-lift); box-shadow: 0 6px 16px rgba(11,60,149,.35); transition: transform .32s var(--ease); } /* RTL-aware: the pill slides toward the "Bottom" tab (second column). */ .gd-tabs[data-active="bottom"] .gd-tabs__ind { transform: translateX(100%); } [dir="rtl"] .gd-tabs[data-active="bottom"] .gd-tabs__ind { transform: translateX(-100%); } /* stage + tightly-wrapped image frame (boxes overlay the image exactly) */ .gd-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 160px; } .gd-frame { position: relative; display: inline-block; line-height: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-soft); } .gd-frame__img { display: block; max-width: 100%; max-height: min(64vh, 560px); width: auto; height: auto; } /* ── focus scrim - subtle dark tint over the whole image (viewfinder mode) ──── */ .gd-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(6,14,32,.44); transition: background .3s var(--ease); } /* Deepen the tint on the rest of the image while any bracket is hovered. */ .gd-frame:has(.gd-box:hover) .gd-scrim, .gd-frame:has(.gd-box:focus-visible) .gd-scrim { background: rgba(6,14,32,.6); } .gd-boxes { position: absolute; inset: 0; z-index: 2; } /* ── viewfinder bracket - no harsh border; rounded corner crosshairs + glow ── */ .gd-box { position: absolute; margin: 0; padding: 0; cursor: pointer; background: transparent; border: none; border-radius: 16px; transition: transform .25s var(--ease), -webkit-backdrop-filter .3s var(--ease), backdrop-filter .3s var(--ease), left .38s var(--ease), top .38s var(--ease), width .38s var(--ease), height .38s var(--ease); animation: gdBoxIn .4s var(--ease) both; animation-delay: calc(var(--i, 0) * .06s); } @keyframes gdBoxIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } } /* soft pulsating glow ring behind the corners */ .gd-box::before { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 14px rgba(43,107,255,.22); animation: gdGlow 2.6s ease-in-out infinite; } @keyframes gdGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 12px rgba(43,107,255,.22); } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 0 26px rgba(43,107,255,.5); } } /* Hover / focus: clear this zone's dark tint (spotlight) + intensify the brackets. */ .gd-box:hover, .gd-box:focus-visible { outline: none; z-index: 3; transform: scale(1.012); -webkit-backdrop-filter: brightness(1.5) saturate(1.12); backdrop-filter: brightness(1.5) saturate(1.12); } .gd-box:active { transform: scale(.99); } /* rounded corner crosshairs (white brackets w/ royal glow) */ .gd-corner { position: absolute; width: 26px; height: 26px; pointer-events: none; border: 3px solid #fff; opacity: .88; filter: drop-shadow(0 0 6px rgba(43,107,255,.65)); transition: width .25s var(--ease), height .25s var(--ease), opacity .25s var(--ease), border-color .25s var(--ease); } .gd-corner--tl { top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: 13px; } .gd-corner--tr { top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: 13px; } .gd-corner--bl { bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: 13px; } .gd-corner--br { bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: 13px; } .gd-box:hover .gd-corner, .gd-box:focus-visible .gd-corner { width: 34px; height: 34px; opacity: 1; filter: drop-shadow(0 0 10px rgba(43,107,255,.9)); } /* label badge ("עליון · Top" / "תחתון · Bottom" / "מלא · Full-body") - always shown so overlapping garments are unambiguous; lights up on hover. */ .gd-box__label { position: absolute; top: 8px; inset-inline-start: 8px; display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 11px; border-radius: var(--pill); font-size: .7rem; color: #0b1b3a; background: rgba(255,255,255,.94); box-shadow: 0 4px 14px rgba(6,14,32,.4); backdrop-filter: blur(4px); transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .gd-box__label b { font-weight: 800; letter-spacing: .01em; } .gd-box__label span { font-size: .6rem; font-weight: 700; opacity: .6; text-transform: uppercase; letter-spacing: .06em; } .gd-box:hover .gd-box__label, .gd-box:focus-visible .gd-box__label { background: var(--royal-lift); color: #fff; transform: scale(1.05); } .gd-box:hover .gd-box__label span, .gd-box:focus-visible .gd-box__label span { opacity: .85; } /* crisp click-confirmation flash before the modal closes */ .gd-box.is-picked { animation: gdPick .28s ease both; } .gd-box.is-picked .gd-corner { border-color: var(--royal-lift); filter: drop-shadow(0 0 14px rgba(43,107,255,1)); } @keyframes gdPick { 0% { transform: scale(1.012); } 45% { transform: scale(.955); -webkit-backdrop-filter: brightness(1.85); backdrop-filter: brightness(1.85); } 100% { transform: scale(1.02); -webkit-backdrop-filter: brightness(1.5); backdrop-filter: brightness(1.5); } } @media (prefers-reduced-motion: reduce) { .gd-box::before, .gd-box.is-picked { animation: none; } } /* detecting spinner */ .gd-loading { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: var(--royal); font-weight: 700; font-size: .86rem; } .gd-loading[hidden] { display: none; } .gd-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(43,107,255,.22); border-top-color: var(--royal-lift); animation: gdSpin .8s linear infinite; } @keyframes gdSpin { to { transform: rotate(360deg); } } /* empty state */ .gd-empty { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; background: rgba(248,250,255,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 16px; } .gd-empty[hidden] { display: none; } .gd-empty__icon { font-size: 2rem; } .gd-empty__text { margin: 0; font-size: .92rem; font-weight: 700; color: var(--ink); } .gd-empty__text span { color: var(--muted); font-weight: 600; font-size: .82rem; } .gd-empty__retry { margin-top: 6px; } .gd-hint { margin: 0; text-align: center; font-size: .8rem; color: var(--muted); } body.gd-open { overflow: hidden; } @media (max-width: 640px) { .gd-overlay__panel { width: 100%; max-height: 94vh; } .gd-frame__img { max-height: 56vh; } /* touch: no hover → keep the brackets crisp and lift the tint a touch so items read */ .gd-corner { opacity: 1; } .gd-scrim { background: rgba(6,14,32,.32); } } /* ════════════════════════════════════════════════════════════════════════ ✦ PEAR BRAND PASS - Didot wordmark · raster logo · camera stage · guide ════════════════════════════════════════════════════════════════════════ */ /* Didot serif on literal PEAR/pear brand text ONLY (never MERIDIAN). */ .pear-wordmark, .app-header__brand, .kicker, .calc-editorial__kicker, .gd-eyebrow { font-family: var(--pear-wordmark); } /* Header layout - three GENUINE flex siblings on one row: nav (right in RTL) · brand-lockup (centre) · actions (left in RTL). This replaces an earlier design where the lockup was pulled out of flex flow via position:absolute and centred across the full header width - that made overlap with nav/ actions a geometry problem (nothing pushed it aside when they grew), which is exactly what caused the edit-measurements button to render on top of the subtitle text. With all three as real flex items again, ordinary justify-content:space-between + min-width:0 makes overlap structurally impossible: the browser lays them out side by side and shrinks them (via the existing ellipsis truncation below) instead of ever letting one grow into another's space. flex:1 1 0 on the two side zones keeps them equal, so the lockup is genuinely centred whenever nav/actions are reasonably balanced, and gracefully shrinks itself (min-width:0) if space runs out. */ .app-header__nav, .app-header__actions { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 0; min-height: var(--hdr-row-h); /* all three zones agree on the row - see --hdr-row-h */ } /* Every direct child of the header, whatever it is, on the same centreline and with no margin of its own to shift it off. Stated once here rather than per control, so a control added later inherits the rhythm instead of having to remember it. NOTE margin, not padding: a blanket `padding: 0` would collapse the pill shapes these controls are built from (.btn-edit-measurements' 0 13px, the switches' --switch-pad track inset), so horizontal padding is deliberately left to each control and only stray MARGIN is normalised away. */ /* ── THE BLACK DOT, and why a blanket child rule caused it ───────────────── REPORTED: a black bullet between the language switch and the cart. It is not a list bullet and not a pseudo-element - it is #engineBadge, a real , whose text content is a literal U+25CF BLACK CIRCLE glyph. It has been hidden by `.app-header__engine{display:none}` since it was retired, and it stayed hidden until the blanket normalisation rule below was added: `.app-header__actions > *` has the SAME specificity (0,1,0) as `.app-header__engine` and is declared ~2700 lines later, so it won on source order and set the badge back to inline-flex. A rule written to make the row tidy un-hid a retired element. Two guards, because either alone would let it back: · the selector excludes anything that is deliberately not a row item, so the rule cannot change the display of something meant to be hidden; · the display:none is re-asserted immediately AFTER it, so source order is working for us rather than against us the next time something sweeps these children. The real lesson is narrower than the fix: a blanket `> *` rule that sets `display` will resurrect anything hidden that way. Prefer excluding, and re-assert. */ .app-header__nav > *:not(.app-header__engine), .app-header__actions > *:not(.cart-dropdown):not(.app-header__engine) { display: inline-flex; align-items: center; justify-content: center; margin: 0; } /* Retired status dot - re-asserted here, after the sweep above, deliberately. */ .app-header__engine { display: none !important; } /* The cart dropdown is an absolutely-anchored popover, not a row item - it must not be forced inline-flex by the rule above or it lays out as a flex row. */ .app-header__actions > .cart-dropdown { display: block; } .app-header__actions > .cart-dropdown[hidden] { display: none; } /* List hygiene for the header. Nothing in it is a- /
- today - the dot
above was a glyph, not a marker - so this changes nothing now. It is here
because a marker is the OTHER way a stray dot appears in a flex row, and a
future control added as a list would inherit the browser default silently. */
.app-header ul, .app-header ol, .app-header li {
list-style: none; list-style-type: none; margin: 0; padding: 0;
}
.app-header li::marker { content: none; }
.app-header__actions { justify-content: flex-end; position: relative; } /* anchors .cart-dropdown */
.app-header__actions .cart-btn { margin: 0; } /* zone handles placement now */
/* BUG FIX: the nav pills ("עריכת מידות", the fullscreen switch) used to be the
shrink-and-ellipsize safety valve (see .btn-edit-measurements span below) -
at ordinary desktop/laptop widths that meant their OWN label text quietly
truncated to "עריכת..." well before the row was actually out of room. The
brand lockup already has its own graceful shrink-and-ellipsize fallback
(.app-header__brand/__sub, see the LAYOUT FIX comment below) and is purely
decorative, so it - not an actionable button's label - should be the thing
that gives way first. flex-shrink:0 here means these pills always render
at their natural content width; only the lockup compresses under pressure. */
.app-header__nav > * { flex-shrink: 0; }
/* Brand lockup: logo + title/subtitle as one row. Logo is FIRST in DOM order,
so in this RTL document it renders at the lockup's visual RIGHT edge - i.e.
to the right of "PEAR" / the subtitle, vertically centred via
align-items:center. flex:0 1 auto + min-width:0 lets the whole lockup
shrink (and its title text ellipsize, see .app-header__brand/__sub) rather
than force nav/actions to make room for it. */
.app-header__brand-lockup {
display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0;
min-height: var(--hdr-row-h); /* the zone that used to SET the row now conforms to it */
}
.app-header__titles {
display: flex; flex-direction: column; align-items: flex-start;
gap: 3px; min-width: 0;
}
/* Header mark is a raster