/* * Homepage — TZ §5.1, Vercel palette only * #e5e5e5 · #1a1a1a · #3F2780 · #FFD141 (CTA accent only) * No AI gradients. Photo placeholder: hero only. */ .g22-henna--clean { /* Color/type/spacing primitives come from tokens.css (:root) by natural inheritance — this rule used to re-declare --g22-purple/--g22-yellow/ --g22-ink/etc. with hardcoded, off-brand values (#ffd141, #5235a0…), which silently shadowed the canon tokens for the entire homepage. Only the names below that have NO canon equivalent stay local, and now resolve to canon tokens instead of one-off hex. */ --g22-purple-hover: var(--g22-purple-hot); --g22-bg: var(--g22-canvas); --g22-bg-alt: var(--g22-paper); --g22-shell: min(var(--g22-container), calc(100% - 2 * var(--g22-gutter))); background: var(--g22-bg); color: var(--g22-ink); /* clip keeps horizontal bleed guard; hidden breaks position:sticky */ overflow-x: clip; overflow-y: visible; } /* * Brand motion identity — one scale, one curve family. * * The page used to carry 20+ ad-hoc durations (560/520/480/420/380/360…) and * two unrelated curves, so every block entered on its own timing and nothing * read as one system. Everything now resolves to these tokens. * * Curves: enter is an expo-out (fast commit, long settle) — the move is over * before the eye tracks it and the tail does the elegance. Hovers are quick and * near-linear-out; motion that answers a pointer must not linger. * * These live on , NOT on .g22-henna--clean: the reviews section (#reviews) * is rendered OUTSIDE that root, so a token defined on the root never reached it * — `transition: opacity var(--g22-dur-std) …` resolved to an invalid var, the * whole declaration was dropped, and the review cards popped in with no * transition at all. Defining them on the common ancestor is what makes the * whole page one motion system. */ body:has(.g22-henna--clean) { --g22-ease: cubic-bezier(0.33, 1, 0.68, 1); --g22-ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --g22-ease-exit: cubic-bezier(0.4, 0, 1, 1); --g22-dur-quick: 160ms; --g22-dur-std: 380ms; --g22-dur-slow: 620ms; --g22-dur-hero: 820ms; /* Child stagger: one step per rank. 70ms reads as choreography; 160ms reads as lag. */ --g22-stagger: 70ms; --g22-rise: 18px; } body.home:has(.g22-henna--clean) { background: var(--g22-bg); } /* Keep the sitewide floating pill nav — do not flatten into a bar. * Visual chrome lives in nav-taste.css; this only guards against * later skins resetting radius / glass. Mobile dropdown ul must stay * square (nav-taste sets 0) — a 999px radius on the tall link list * peeks past the 24px panel and reads as a “double edge”. */ body.home:has(.g22-henna--clean) .g22-header, body.home:has(.g22-henna--clean) .g22-header--condensed { border-radius: 999px; } body.home:has(.g22-henna--clean) .g22-header__nav a { border-radius: 999px; } body.home:has(.g22-henna--clean) .g22-header__cta { border-radius: 999px; } @media (min-width: 961px) { body.home:has(.g22-henna--clean) .g22-header__nav ul { border-radius: 999px; } } body.home:has(.g22-henna--clean) .g22-main { padding-top: 0; } /* Kill leftover henna chrome */ .g22-henna--clean .g22-henna__progress, .g22-henna--clean .g22-henna__marquee, .g22-henna--clean .g22-be-rail, .g22-henna--clean .g22-be-signature, .g22-henna--clean .g22-be-scroll, .g22-henna--clean .g22-henna__hero-plate, .g22-henna--clean .g22-henna__hero-strip, .g22-henna--clean .g22-henna__hero-corner, .g22-henna--clean .g22-henna__stat-strip--hero, .g22-henna--clean .g22-henna__hero-avatars, .g22-henna--clean .g22-henna__hero-panel, .g22-henna--clean .g22-henna__hero-stage, .g22-henna--clean .g22-henna__hero-media, .g22-henna--clean .g22-henna__cta-star, .g22-henna--clean .g22-henna__heading-arc, .g22-henna--clean .g22-henna__marker-svg { display: none !important; } /* ---------- Shell / type ---------- */ .g22-henna--clean .g22-clean__shell { width: var(--g22-shell); margin-inline: auto; } .g22-henna--clean .g22-clean__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 40rem; } .g22-henna--clean .g22-clean__stack--narrow { max-width: 36rem; margin-bottom: 28px; } .g22-henna--clean .g22-clean__eyebrow, .g22-henna--clean .g22-clean__label { margin: 0; font-family: var(--g22-font-label); font-size: var(--g22-fs-label); font-weight: 500; letter-spacing: var(--g22-tracking-label); text-transform: uppercase; color: var(--g22-ink-mute); } .g22-henna--clean .g22-clean__label::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 10px; vertical-align: middle; background: var(--g22-yellow); } .g22-henna--clean .g22-clean__label--on-dark { color: rgba(255, 255, 255, 0.62); } .g22-henna--clean .g22-clean__label--on-dark::before { background: var(--g22-yellow); } .g22-henna--clean .g22-clean__brand { display: block; max-width: 100%; font-size: clamp(2.4rem, 4.8vw, 4.4rem); line-height: 0.92; letter-spacing: -0.05em; font-weight: 700; color: var(--g22-ink); } .g22-henna--clean .g22-clean__h1 { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; text-align: left; } .g22-henna--clean .g22-clean__h1-line { display: block; max-width: 22ch; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; color: var(--g22-purple); } /* Design audit phase 2, item 2: one shared clamp for every section-intro H2 (About / Learning / Why / Voices / News / Reviews) — desktop settles ~44px, mobile ~28px. Hero's H1 and the CTA closing statement (.g22-cta__display) are excluded on purpose: both are oversized "hero-like" display statements, not a plain section title, the same category the brief itself carves H1 out of. */ .g22-henna--clean .g22-clean__h2 { margin: 0; font-size: var(--g22-fs-h2); line-height: var(--g22-lh-head); letter-spacing: -0.03em; font-weight: 700; color: var(--g22-ink); max-width: 18ch; } .g22-henna--clean .g22-clean__h2--on-dark { color: var(--g22-on-dark); max-width: 16ch; margin-bottom: 32px; } .g22-henna--clean .g22-clean__lede, .g22-henna--clean .g22-clean__text { margin: 0; max-width: var(--g22-measure); font-size: var(--g22-fs-lede); line-height: 1.65; color: var(--g22-ink-soft); } /* Design audit phase 2, item 5: primary pill — sentence case Manrope, not the uppercase mono-flavored treatment. The button text in front-page.php was already sentence case ("Познайомитися зі школою") — text-transform was doing all the shouting; removing it is a style change, not a content change. Sized/tracked to match .g22-about__cta, the other primary pill on the page, so both read as the same button. */ .g22-henna--clean .g22-clean__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; /* Sitewide pill-button normalization (2026-07-22): 48px height / 24px horizontal padding / 700 weight / +0.02em tracking, matching the canonical spec now shared with .g22-about__cta, .g22-cta__submit and the pages/*.css primary CTAs (inner-henna.css .g22-form button). */ min-height: 48px; padding: 0 24px; border-radius: var(--g22-r-pill); border: 2px solid var(--g22-purple); background: var(--g22-purple); color: #fff; font-family: inherit; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; cursor: pointer; will-change: transform; transition: background-color var(--g22-dur-quick) var(--g22-ease), border-color var(--g22-dur-quick) var(--g22-ease), color var(--g22-dur-quick) var(--g22-ease), box-shadow var(--g22-dur-quick) var(--g22-ease), transform var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); box-shadow: var(--g22-shadow-sm); } .g22-henna--clean .g22-clean__btn:hover, .g22-henna--clean .g22-clean__btn:focus-visible { background: var(--g22-purple-hot); border-color: var(--g22-purple-hot); color: #fff; outline: 2px solid var(--g22-purple); outline-offset: 3px; box-shadow: var(--g22-shadow-md); transform: translateY(-1px); } .g22-henna--clean .g22-clean__btn:active, .g22-henna--clean .g22-clean__btn.is-press { box-shadow: var(--g22-shadow-sm); transform: translateY(0) scale(0.98); } /* Hero CTA arrow — micro-interaction */ .g22-henna--clean .g22-hero-cine__cta-arrow { display: block; width: 14px; height: 2px; background: currentColor; position: relative; flex-shrink: 0; transform: translateX(0); transition: transform var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); } .g22-henna--clean .g22-hero-cine__cta-arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); } .g22-henna--clean .g22-hero__cta:hover .g22-hero-cine__cta-arrow, .g22-henna--clean .g22-hero__cta:focus-visible .g22-hero-cine__cta-arrow { transform: translateX(3px); } .g22-henna--clean .g22-clean__btn--light { border-color: var(--g22-purple); background: var(--g22-purple); color: #fff; list-style: none; } .g22-henna--clean .g22-clean__btn--light::-webkit-details-marker { display: none; } .g22-henna--clean .g22-clean__btn--light:hover, .g22-henna--clean .g22-clean__btn--light:focus-visible { background: var(--g22-purple-hot); border-color: var(--g22-purple-hot); color: #fff; outline: 2px solid var(--g22-purple); outline-offset: 3px; } .g22-henna--clean .g22-clean__text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 600; color: var(--g22-purple); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; } .g22-henna--clean .g22-clean__text-link:hover, .g22-henna--clean .g22-clean__text-link:focus-visible { color: var(--g22-purple-hover); } /* ---------- Hero — editorial welcome screen ---------- Real photography, full-bleed. No letterbox bars, no fake timecode: the photograph of the school IS the visual. Copy sits on the left in an editorial column; the shot bleeds off the right edge of the viewport and scrubs slowly on scroll. Two optional accent photos deal in underneath. ------------------------------------------------------------------------ */ .g22-henna--clean .g22-clean__hero.g22-hero { position: relative; display: flex; align-items: stretch; min-height: min(100svh, 900px); padding-block: clamp(88px, 10vh, 112px) clamp(40px, 6vh, 72px); overflow: clip; isolation: isolate; /* Continuous studio paper — matches reference wall/floor plate. */ background: #f3f3f4; } /* * Photo on the RIGHT — soft left dissolve into paper. * Floor stays natural (no multiply / brightness blowout). */ .g22-henna--clean .g22-hero__frame { /* Long soft left dissolve — opaque plate stays on the right with the pair. */ --g22-hero-fade: linear-gradient( 90deg, transparent 0%, rgba(0, 0, 0, 0.14) 10%, rgba(0, 0, 0, 0.45) 26%, #000 44%, #000 100% ); position: absolute; inset: 0 0 0 auto; width: clamp(56%, 60vw, 66%); z-index: 0; overflow: hidden; opacity: 0; transform: translate3d(1.5%, 0, 0); transform-origin: 82% 50%; transition: opacity calc(var(--g22-dur-hero, 900ms) * 0.85) var(--g22-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--g22-dur-hero, 900ms) var(--g22-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)); -webkit-mask-image: var(--g22-hero-fade); mask-image: var(--g22-hero-fade); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .g22-henna--clean .g22-hero.is-live .g22-hero__frame { opacity: 1; transform: none; } .g22-henna--clean .g22-hero__frame::before { content: none; display: none; } .g22-henna--clean .g22-hero__shot, .g22-henna--clean .g22-hero__scrim { -webkit-clip-path: none; clip-path: none; -webkit-mask-image: none; mask-image: none; } .g22-henna--clean .g22-hero__shot { position: absolute; inset: 0; z-index: 1; margin: 0; overflow: hidden; } .g22-henna--clean .g22-hero__shot img, .g22-henna--clean .g22-hero__shot picture, .g22-henna--clean .g22-hero__shot .g22-ph { width: 100%; height: 100%; object-fit: cover; /* Wide plate has the pair in the right third — keep them in-frame on tall crops. */ object-position: 72% 48%; display: block; transform: scale(calc(1.02 - 0.01 * var(--g22-scrub, 0))); transform-origin: 78% 50%; filter: none; will-change: transform; } .g22-henna--clean .g22-hero__cut-line, .g22-henna--clean .g22-hero__orbit { display: none !important; } /* Quiet left edge only — never wash the floor. */ .g22-henna--clean .g22-hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 90deg, rgba(243, 243, 244, 0.72) 0%, rgba(243, 243, 244, 0.28) 18%, rgba(243, 243, 244, 0.06) 36%, rgba(243, 243, 244, 0) 52% ); pointer-events: none; } /* Ghost “22” — contained in the photo wall, below the floating nav. */ .g22-henna--clean .g22-hero__frame { isolation: isolate; } .g22-henna--clean .g22-hero__mark-22 { position: absolute; z-index: 2; pointer-events: none; user-select: none; /* Past the left fade mask; clear of the nav pill. */ left: 22%; top: max(72px, 11%); margin: 0; padding: 0; width: auto; max-width: 46%; height: auto; font-family: "Manrope", system-ui, sans-serif; font-size: clamp(4.5rem, 9vw, 7.5rem); font-weight: 800; letter-spacing: -0.11em; line-height: 0.82; color: rgba(67, 41, 128, 0.28); opacity: 1; mix-blend-mode: multiply; transform: none; white-space: nowrap; } /* Dot grid retired — one signature mark is enough. */ .g22-henna--clean .g22-hero__dots { display: none !important; } /* Soft lavender pool bottom-left — reference ambient, not a floor wash. */ .g22-henna--clean .g22-clean__hero.g22-hero::after { content: ""; position: absolute; left: -6%; bottom: -18%; width: min(48vw, 560px); height: min(42vh, 400px); z-index: 1; pointer-events: none; background: radial-gradient( ellipse at 30% 70%, rgba(63, 39, 128, 0.14) 0%, rgba(63, 39, 128, 0.06) 38%, transparent 70% ); } .g22-henna--clean .g22-hero__shell { position: relative; z-index: 3; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; /* Explicit shell — align-self:stretch was blowing width to 100vw. */ width: var(--g22-shell); max-width: var(--g22-shell); margin-inline: auto; min-height: 0; flex: 1 1 auto; gap: 0; align-self: center; box-sizing: border-box; } .g22-henna--clean .g22-hero__copy { max-width: min(28rem, 34vw); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(14px, 1.8vh, 22px); padding-block: 0; margin-top: 0; } /* Enter — mask wipe + rise, one stagger step per rank. Latched on .is-live. * Design audit phase 3, item 1: .g22-hero__title used to be part of this * shared fade+rise group (rank 1, right after nothing). It's pulled out * below into its own clip-path line-reveal instead — running both would be * two competing entrances on the same element. Eyebrow and lede now wait * for the title's reveal to be most of the way done (explicit ms delays, * not the shared --g22-i formula, since "after a ~700ms clip animation" * doesn't fit the small fixed stagger steps used everywhere else). */ /* Fix 2026-07-27: transitions triggered from a JS class toggle inside a * rAF/observer callback can stall before the browser has committed the * pre-change style, so the transition never advances off its start value * (the reveal was proven stuck at opacity:0 on load). Keyframe animations * don't have this failure mode — they run unconditionally once the rule * matches — so the reveal below is now a `.is-live`-gated animation * instead of a transition. `animation-fill-mode: both` guarantees the * post-animation state (opacity:1, transform:none) sticks even if the * animation is interrupted or the tab was backgrounded mid-run. */ @keyframes g22-hero-rise { from { opacity: 0; transform: translate3d(0, var(--g22-rise), 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Fix 2026-07-27 (round 2): the .is-live-gated version above still stalled * for THIS group specifically — it animates opacity+transform, which the * compositor runs off-thread, and toggling the class inside the load-time * rAF committed the animation before the first composite, freezing it on * the `from` frame (opacity:0) forever. The headline's clip-path reveal * survived only because clip-path animates on the main thread. The hero is * above the fold, so there is no reason to gate its entrance on JS at all: * declare the animation statically so it plays as part of the initial * render (no class toggle = no commit race). `both` fill provides the * hidden pre-reveal start via backwards fill, so no separate opacity:0 * base rule is needed, and the resting/reduced-motion state stays visible. */ .g22-henna--clean .g22-hero__eyebrow, .g22-henna--clean .g22-hero__lede, .g22-henna--clean .g22-hero__actions, .g22-henna--clean .g22-hero__accent, .g22-henna--clean .g22-hero__scroll { animation: g22-hero-rise var(--g22-dur-std) var(--g22-ease-enter) both; } .g22-henna--clean .g22-hero__eyebrow { animation-delay: 620ms; } .g22-henna--clean .g22-hero__lede { animation-delay: 700ms; } .g22-henna--clean .g22-hero__actions { animation-delay: 780ms; } .g22-henna--clean .g22-hero__scroll { animation-delay: 850ms; } /* Title — line-by-line mask reveal. True per-VISUAL-line splitting would * need either JS to measure where the browser actually soft-wraps * .g22-hero__line (width/font-dependent, unknown at build time) or forcing * every fragment onto its own block (which would break the responsive * wrap this paragraph already relies on). Cheaper, safe alternative: the * three semantic chunks already in the markup (brand, dash, line) each get * their own clip-path + translateY mask, brand+dash together (they're * already meant to never separate — see the PHP comment above this markup) * and .g22-hero__line as its own group 100ms behind. clip-path (not a fixed- * height overflow:hidden mask) is what makes this safe if .g22-hero__line * happens to wrap across two lines at a given viewport width — it clips * relative to the element's own box instead of a guessed pixel height. */ /* Fix 2026-07-27: same transition-stall issue as the eyebrow/lede group * above — converted to a `.is-live`-gated keyframe animation so the clip * open + rise is guaranteed to complete instead of risking getting stuck * at clip-path:inset(0 0 100% 0) (fully clipped / invisible). */ @keyframes g22-hero-clip { from { clip-path: inset(0 0 100% 0); transform: translate3d(0, 100%, 0); } to { clip-path: inset(0 0 0% 0); transform: translate3d(0, 0, 0); } } .g22-henna--clean .g22-hero__brand, .g22-henna--clean .g22-hero__dash { display: inline-block; clip-path: inset(0 0 100% 0); transform: translate3d(0, 100%, 0); } .g22-henna--clean .g22-hero.is-live .g22-hero__brand, .g22-henna--clean .g22-hero.is-live .g22-hero__dash { animation: g22-hero-clip var(--g22-dur-slow) var(--g22-ease-enter) both; } /* .g22-hero__line got the same clip-path + translateY(100%) mask as brand/ dash, but this line wraps to several rows once the accent phrase is inside it — a transform+clip-path on a multi-line inline-block doesn't repaint reliably in Chromium (rows past the element's pre-transform bounds silently fail to paint even once the "to" keyframe, fully open, has been reached). brand/dash stay single-line, so they're unaffected; .g22-hero__line uses the same safe opacity+rise treatment as the eyebrow/lede group instead — declared statically (no .is-live gate, see the comment above that group) so it can never get stuck either. */ .g22-henna--clean .g22-hero__line { display: inline-block; animation: g22-hero-rise var(--g22-dur-std) var(--g22-ease-enter) both; animation-delay: 220ms; } .g22-henna--clean .g22-hero__eyebrow { margin: 0; font-family: var(--g22-font-label); font-size: var(--g22-fs-label); letter-spacing: var(--g22-tracking-label); text-transform: uppercase; /* Match --g22-ink-mute ≥0.72 (token); explicit so cascade wins legacy soft. */ color: rgba(26, 26, 26, 0.72); } .g22-henna--clean .g22-hero__title { margin: 0; font-size: clamp(2.35rem, 4.2vw, 3.35rem); max-width: 16ch; line-height: 1.1; letter-spacing: -0.04em; font-weight: 700; color: var(--g22-ink); text-wrap: balance; } .g22-henna--clean .g22-hero__title-in { display: block; } /* «Generation 22» is the name — it never breaks across lines. display: inline-block (not inline) since design audit phase 3, item 1 — the mask-reveal below needs transform/clip-path to actually apply, which non-replaced inline elements ignore per spec. inline-block still participates in the surrounding line-breaking the same as inline would. */ .g22-henna--clean .g22-hero__brand { display: inline-block; white-space: nowrap; } .g22-henna--clean .g22-hero__dash { display: inline-block; color: var(--g22-ink-mute); } /* Ink headline, one accented clause. A fully purple sentence is a colour wash; the accent has to carry the single idea the parent should leave with. */ .g22-henna--clean .g22-hero__line { display: inline-block; color: var(--g22-ink); } /* Accent phrase stays ink — no yellow underline chips. */ .g22-henna--clean .g22-hero__accent-word { color: var(--g22-ink); font-weight: 800; background: none; padding: 0; border-radius: 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .g22-henna--clean .g22-hero__lede { margin: 0; max-width: 38ch; font-size: clamp(1.02rem, 1.2vw, 1.14rem); line-height: 1.65; font-weight: 500; color: var(--g22-ink-soft); } .g22-henna--clean .g22-hero__actions { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-top: 2px; } /* Hero CTA: soft lavender pill — same family as about/learn secondary CTAs. */ .g22-henna--clean .g22-hero__cta.g22-hero__cta--link, .g22-henna--clean a.g22-hero__cta.g22-hero__cta--link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 0; min-height: 48px; padding: 0 22px !important; border: 0 !important; border-radius: var(--g22-r-pill, 999px) !important; background: rgba(67, 41, 128, 0.09) !important; box-shadow: none !important; color: var(--g22-purple, #432980) !important; font-family: "Manrope", system-ui, sans-serif; font-size: 0.98rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; text-decoration: none !important; cursor: pointer; transform: none !important; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; } .g22-henna--clean .g22-hero__cta.g22-hero__cta--link:hover, .g22-henna--clean .g22-hero__cta.g22-hero__cta--link:focus-visible { color: #fff !important; background: var(--g22-purple, #432980) !important; box-shadow: 0 10px 24px rgba(67, 41, 128, 0.2) !important; transform: none !important; } .g22-henna--clean .g22-hero__cta.g22-hero__cta--link:focus-visible { outline: 3px solid var(--g22-yellow, #fcc708); outline-offset: 3px; } .g22-henna--clean .g22-hero__cta--link::before { content: none !important; display: none !important; } .g22-henna--clean .g22-hero__cta-label { position: relative; display: inline-block; padding-bottom: 0; } .g22-henna--clean .g22-hero__cta-label::after { content: none; } .g22-henna--clean .g22-hero__cta-arrow { font-size: 1.1em; line-height: 1; transform: translateY(0.5px); transition: transform 200ms ease; } .g22-henna--clean .g22-hero__cta--link:hover .g22-hero__cta-arrow, .g22-henna--clean .g22-hero__cta--link:focus-visible .g22-hero__cta-arrow { transform: translateX(3px) translateY(0.5px); } .g22-henna--clean .g22-hero__more { display: none; } /* Bottom-left foot: logo mark + trial note over lavender pool. */ .g22-henna--clean .g22-hero__foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: clamp(20px, 4vh, 40px); max-width: min(30rem, 40vw); position: relative; z-index: 2; } .g22-henna--clean .g22-hero__foot-mark { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; filter: drop-shadow(0 8px 20px rgba(63, 39, 128, 0.22)); } .g22-henna--clean .g22-hero__foot-mark svg { display: block; width: 36px; height: 36px; } .g22-henna--clean .g22-hero__note { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-family: "Manrope", system-ui, sans-serif; font-size: 0.92rem; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: rgba(26, 26, 26, 0.62); } /* Reference drops the 3-proof strip from the first viewport. */ .g22-henna--clean .g22-hero__proofs { display: none; } @media (min-width: 761px) { .g22-henna--clean .g22-hero__scroll { display: none; } } .g22-henna--clean .g22-hero__proof { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .g22-henna--clean .g22-hero__proof-icon { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; color: var(--g22-purple); } .g22-henna--clean .g22-hero__proof-icon svg { display: block; width: 100%; height: 100%; } .g22-henna--clean .g22-hero__proof-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .g22-henna--clean .g22-hero__proof-title { font-size: 0.84rem; line-height: 1.25; font-weight: 650; color: var(--g22-ink); } .g22-henna--clean .g22-hero__proof-text { font-size: 0.78rem; line-height: 1.3; font-weight: 500; color: var(--g22-ink-soft); } /* Accent photos — real frames, dealt in after the copy lands. */ .g22-henna--clean .g22-hero__accents { display: none; } .g22-henna--clean .g22-hero__accent { --g22-i: 4; width: clamp(96px, 11vw, 148px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--g22-r-lg); background: var(--g22-bg-alt); transition: opacity var(--g22-dur-slow) var(--g22-ease-enter), transform var(--g22-dur-slow) var(--g22-ease-enter); transition-delay: calc((4 + var(--g22-i, 0)) * var(--g22-stagger) * 0.5); } .g22-henna--clean .g22-hero__accent img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--g22-dur-slow) var(--g22-ease); } .g22-henna--clean .g22-hero__accent:hover img { transform: scale(1.04); } /* Scroll cue — quiet, not a second caption competing with proofs. */ .g22-henna--clean .g22-hero__scroll { display: none; } .g22-henna--clean .g22-hero__scroll-rail { display: block; width: 64px; height: 1px; background: currentColor; transform-origin: left center; animation: g22-hero-rail 2.4s var(--g22-ease) infinite; } .g22-henna--clean .g22-hero__scroll:hover { color: var(--g22-ink); } @keyframes g22-hero-rail { 0%, 100% { transform: scaleX(0.35); opacity: 0.5; } 50% { transform: scaleX(1); opacity: 1; } } @media (max-width: 1024px) { .g22-henna--clean .g22-hero__frame { width: 58%; } .g22-henna--clean .g22-hero__copy, .g22-henna--clean .g22-hero__foot { max-width: min(24rem, 46vw); } .g22-henna--clean .g22-hero__scrim { background: linear-gradient( 90deg, rgba(243, 243, 244, 0.7) 0%, rgba(243, 243, 244, 0.2) 22%, rgba(243, 243, 244, 0) 42% ); } } /* * Mobile hero — one composition (mirrors desktop thesis, not a brochure stack). * Full-bleed photo plane + paper dock rising from the bottom (vertical dissolve, * same language as the desktop left-paper / right-photo fade). Brand → line → * lede → yellow CTA. No dead gray void, no display:contents reorder. */ @media (max-width: 760px) { /* Sticky nav leaves a paper gap above the hero — fix it so photo goes edge-to-edge. */ body.home:has(.g22-henna--clean) .g22-header.g22-header--taste, body.home:has(.g22-henna--clean) .g22-header.g22-header--taste.g22-header--condensed { position: fixed; left: 0; right: 0; margin-inline: auto; } .g22-henna--clean .g22-clean__hero.g22-hero { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; min-height: 100svh; min-height: 100dvh; padding: 0; overflow: hidden; box-sizing: border-box; } .g22-henna--clean .g22-clean__hero.g22-hero::after { display: none !important; } /* Photo = the whole first viewport. */ .g22-henna--clean .g22-hero__frame { --g22-hero-fade: none; position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; margin: 0; border-radius: 0; opacity: 0; transform: scale(1.04); transform-origin: 68% 42%; -webkit-mask-image: none; mask-image: none; } .g22-henna--clean .g22-hero.is-live .g22-hero__frame { opacity: 1; transform: none; } .g22-henna--clean .g22-hero__frame::after { content: none; } .g22-henna--clean .g22-hero__shot img, .g22-henna--clean .g22-hero__shot picture { /* Faces live in the clear upper half; dock owns the bottom. */ object-position: 68% 28%; transform: none !important; filter: none !important; width: 100%; max-width: none; height: 100%; } /* * Scrim: photo stays clear under the nav; hard paper floor under copy. * Text must never sit on faces (contrast + cognitive clarity). */ .g22-henna--clean .g22-hero__scrim { background: linear-gradient( 180deg, rgba(243, 243, 244, 0.28) 0%, rgba(243, 243, 244, 0) 16%, rgba(243, 243, 244, 0) 46%, rgba(243, 243, 244, 0.72) 62%, #f3f3f4 74%, #f3f3f4 100% ); } .g22-henna--clean .g22-hero__mark-22 { left: 4%; top: max(72px, 11%); width: auto !important; max-width: 38% !important; font-size: clamp(3.5rem, 18vw, 4.75rem); color: rgba(67, 41, 128, 0.18); opacity: 1; transform: none; margin-inline: 0 !important; mix-blend-mode: multiply; } .g22-henna--clean .g22-hero__dots { display: none !important; } /* Copy dock — compact hero budget on solid paper. */ .g22-henna--clean .g22-hero__shell { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; width: 100%; max-width: none; margin: 0; padding: 28px 16px max(18px, env(safe-area-inset-bottom, 0px)); min-height: 0; flex: 0 0 auto; box-sizing: border-box; background: linear-gradient( 180deg, rgba(243, 243, 244, 0) 0%, #f3f3f4 22px, #f3f3f4 100% ); } .g22-henna--clean .g22-hero__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; width: 100%; max-width: none; margin: 0; padding: 0; } .g22-henna--clean .g22-hero__eyebrow { width: 100%; max-width: none; margin: 0; font-size: 0.75rem; /* ≥12px — readable caption */ line-height: 1.35; letter-spacing: 0.1em; color: rgba(26, 26, 26, 0.62); } .g22-henna--clean .g22-hero__title { width: 100%; max-width: 16ch; margin: 0; font-size: clamp(1.65rem, 6.4vw, 2rem); line-height: 1.08; letter-spacing: -0.035em; color: var(--g22-ink, #1a1a1a); } /* Brand on its own line — hero-level signal, not inline with body. */ .g22-henna--clean .g22-hero__brand { display: block; margin-bottom: 4px; font-size: clamp(2rem, 7.6vw, 2.4rem); line-height: 0.95; letter-spacing: -0.045em; color: var(--g22-purple, #432980); } .g22-henna--clean .g22-hero__dash { display: none; } /* * Hero budget: eyebrow + brand/headline + CTA (+ note). * Lede repeats the eyebrow — drop it on mobile to cut cognitive load. */ .g22-henna--clean .g22-hero__lede { display: none; } .g22-henna--clean .g22-hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; margin-top: 2px; } /* Primary punch — same yellow family as nav «Записатися». */ .g22-henna--clean .g22-hero__cta.g22-hero__cta--link, .g22-henna--clean a.g22-hero__cta.g22-hero__cta--link, .g22-henna--clean .g22-hero__cta { display: inline-flex; align-items: center; justify-content: center; width: fit-content !important; max-width: 100% !important; min-height: 50px; margin: 0 !important; padding: 0 22px !important; align-self: flex-start; background: var(--g22-yellow, #fcc708) !important; color: var(--g22-ink, #1a1a1a) !important; box-shadow: none !important; } .g22-henna--clean .g22-hero__cta.g22-hero__cta--link:hover, .g22-henna--clean .g22-hero__cta.g22-hero__cta--link:focus-visible, .g22-henna--clean a.g22-hero__cta.g22-hero__cta--link:hover, .g22-henna--clean a.g22-hero__cta.g22-hero__cta--link:focus-visible { background: var(--g22-yellow-hot, #ffd141) !important; color: var(--g22-ink, #1a1a1a) !important; box-shadow: 0 10px 24px rgba(252, 199, 8, 0.28) !important; } .g22-henna--clean .g22-hero__foot { display: flex; align-items: center; gap: 0; width: 100%; max-width: none; margin: 8px 0 0; padding: 0; } .g22-henna--clean .g22-hero__foot-mark { display: none !important; } .g22-henna--clean .g22-hero__note { width: 100%; max-width: none; margin: 0; font-size: 0.84rem; line-height: 1.35; color: rgba(26, 26, 26, 0.68); } /* Short screens: drop the note so CTA clears the fold cleanly. */ @media (max-height: 700px) { .g22-henna--clean .g22-hero__note { display: none; } } .g22-henna--clean .g22-hero__proofs, .g22-henna--clean .g22-hero__accents, .g22-henna--clean .g22-hero__orbit, .g22-henna--clean .g22-hero__scroll { display: none !important; } } @media (prefers-reduced-motion: reduce) { .g22-henna--clean .g22-hero__eyebrow, .g22-henna--clean .g22-hero__title, .g22-henna--clean .g22-hero__brand, .g22-henna--clean .g22-hero__dash, .g22-henna--clean .g22-hero__line, .g22-henna--clean .g22-hero__lede, .g22-henna--clean .g22-hero__actions, .g22-henna--clean .g22-hero__accent, .g22-henna--clean .g22-hero__scroll, .g22-henna--clean .g22-hero__frame { opacity: 1 !important; transform: none !important; transition: none !important; /* Fix 2026-07-27: reveal mechanism is now `.is-live`-gated keyframe * animations (g22-hero-rise / g22-hero-clip). Forcing the final * state above doesn't stop an animation from running/re-running its * own keyframes, so explicitly kill the animation too. */ animation: none !important; } .g22-henna--clean .g22-hero__frame::before { opacity: 0.88 !important; transition: none !important; } .g22-henna--clean .g22-hero__orbit { opacity: 0.72 !important; transform: none !important; } .g22-henna--clean .g22-hero__scroll-rail { animation: none; } .g22-henna--clean .g22-hero__shot img { transform: none !important; } } /* ========================================================================== */ /* Client deck — consolidated visual polish */ /* ========================================================================== */ /* About: replace the empty grey pause with a compact editorial photo proof. */ /* Fix 2026-07-27 (Task 3): warm beige/cream gradient stops swapped for * neutral-cool equivalents (#f1f1f2 / #e7e7e8), same lightness, warmth * removed from the old beige tones. */ .g22-henna--clean .g22-about { min-height: 0; /* Ira 2026-07-29: drop yellow radial «точка» at 8%/18% under title. */ background: linear-gradient(135deg, #f1f1f2 0%, #e7e7e8 100%); } .g22-henna--clean .g22-about__shell { grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); grid-template-rows: auto auto auto auto; column-gap: clamp(34px, 5vw, 72px); row-gap: clamp(18px, 2.4vw, 30px); } .g22-henna--clean .g22-about__mast, .g22-henna--clean .g22-about__lead { grid-column: 1; } .g22-henna--clean .g22-about__media { position: relative; grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(118px, .38fr); gap: 10px; min-height: clamp(300px, 34vw, 440px); } .g22-henna--clean .g22-about__media figure { margin: 0; overflow: hidden; border-radius: var(--g22-r-lg); /* Fix 2026-07-27 (Task 3): beige swapped for neutral-cool placeholder (warmth removed). */ background: var(--g22-line); } .g22-henna--clean .g22-about__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--g22-ease-enter); } .g22-henna--clean .g22-about__media-main img { object-position: center; } .g22-henna--clean .g22-about__media-side img { object-position: 52% center; } .g22-henna--clean .g22-about__media:hover img { transform: scale(1.025); } .g22-henna--clean .g22-about__media-note { position: absolute; right: 18px; top: 18px; padding: 8px 12px; border-radius: var(--g22-r-pill); background: var(--g22-yellow); color: var(--g22-on-yellow); font-family: var(--g22-font-label); font-size: var(--g22-fs-label); font-weight: 500; letter-spacing: var(--g22-tracking-label); text-transform: uppercase; } .g22-henna--clean .g22-about__pillars, .g22-henna--clean .g22-about__cta { grid-column: 1 / -1; } .g22-henna--clean .g22-about__pillars { min-height: 0; } /* Learning: media + one restrained orbital graphic remove the grey void. */ .g22-henna--clean .g22-learn { position: relative; min-height: 0; /* Fix 2026-07-27 (Task 3): beige cream background swapped for neutral-cool #f4f4f5 (warmth removed). */ background: #f4f4f5; text-align: left; } /* CSS-only learn ring removed — SVG orbit (svg-orbit.php) replaces it. */ .g22-henna--clean .g22-learn::before { content: none; display: none; } .g22-henna--clean .g22-learn__shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.15fr); align-items: center; justify-items: stretch; column-gap: clamp(36px, 5vw, 72px); row-gap: 32px; } .g22-henna--clean .g22-learn__copy { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2.4vw, 28px); max-width: 34rem; } .g22-henna--clean .g22-learn__display, .g22-henna--clean .g22-learn__lede, .g22-henna--clean .g22-learn__btn { grid-column: auto; } .g22-henna--clean .g22-learn__display, .g22-henna--clean .g22-learn__lede { text-align: left; margin: 0; } /* Signature: pupil-at-center constellation (mock). */ .g22-henna--clean .g22-learn__focus { position: relative; grid-column: 2; isolation: isolate; aspect-ratio: 1 / 1; width: 100%; max-width: 560px; margin-inline: auto; border-radius: clamp(28px, 4vw, 44px); background: radial-gradient(circle at 50% 48%, rgba(67, 41, 128, 0.07), transparent 42%), linear-gradient(160deg, #f1eef8 0%, #e8e4f2 48%, #efeef5 100%); overflow: hidden; } .g22-henna--clean .g22-learn__focus-map { position: absolute; inset: 4% 4% 6% 4%; width: auto; height: auto; pointer-events: none; z-index: 0; } .g22-henna--clean .g22-learn__focus-core { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: clamp(112px, 22%, 148px); aspect-ratio: 1; margin: 0; border-radius: 50%; background: #432980; color: #fff; box-shadow: 0 0 0 10px rgba(67, 41, 128, 0.08), 0 18px 40px rgba(67, 41, 128, 0.28); transform: translate(-50%, -50%); text-align: center; } .g22-henna--clean .g22-learn__focus-core span { font-family: var(--g22-font, "Manrope", sans-serif); font-size: clamp(0.92rem, 1.7vw, 1.12rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .g22-henna--clean .g22-learn__focus-cards { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; } .g22-henna--clean .g22-learn__focus-card { position: absolute; box-sizing: border-box; width: min(46%, 196px); padding: 14px 14px 12px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(67, 41, 128, 0.06), 0 14px 32px rgba(67, 41, 128, 0.12); transition: transform 220ms var(--g22-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 220ms ease; } .g22-henna--clean .g22-learn__focus-card--program { top: 9%; left: 5%; } .g22-henna--clean .g22-learn__focus-card--progress { top: 9%; right: 5%; left: auto; } .g22-henna--clean .g22-learn__focus-card--support { bottom: 9%; left: 5%; } .g22-henna--clean .g22-learn__focus-card--skills { bottom: 9%; right: 5%; left: auto; } @media (hover: hover) and (pointer: fine) { .g22-henna--clean .g22-learn__focus-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(67, 41, 128, 0.08), 0 18px 36px rgba(67, 41, 128, 0.16); } } .g22-henna--clean .g22-learn__focus-icon { display: inline-flex; color: #432980; margin-bottom: 8px; } .g22-henna--clean .g22-learn__focus-title { display: block; margin: 0 0 6px; color: #432980; font-family: var(--g22-font, "Manrope", sans-serif); font-size: 0.92rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .g22-henna--clean .g22-learn__focus-text { position: relative; margin: 0; padding-bottom: 10px; color: rgba(26, 26, 26, 0.62); font-size: 0.78rem; line-height: 1.4; } .g22-henna--clean .g22-learn__focus-text::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: #ffd141; } /* Legacy photo media — unused after constellation, keep harmless. */ .g22-henna--clean .g22-learn__media { display: none; } /* The approach link now reads as an intentional interactive control. */ .g22-henna--clean .g22-why__head-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: rgba(67, 41, 128, .08); transition: color 160ms var(--g22-ease), background-color 160ms var(--g22-ease), transform 160ms var(--g22-ease-enter); } .g22-henna--clean .g22-why__head-link::after { content: "↗"; margin-left: 9px; transition: transform 160ms var(--g22-ease-enter); } .g22-henna--clean .g22-why__head-link:hover, .g22-henna--clean .g22-why__head-link:focus-visible { background: var(--g22-yellow); color: var(--g22-purple); transform: translateY(-2px); } .g22-henna--clean .g22-why__head-link:hover::after, .g22-henna--clean .g22-why__head-link:focus-visible::after { transform: translate(3px, -3px); } /* Pricing — one editorial price board (no hollow 2-col). */ .g22-henna--clean .g22-pricing { position: relative; isolation: isolate; border-top: 0; padding-block: clamp(56px, 7vw, 96px); background: #e5e5e5; scroll-margin-top: 96px; } .g22-henna--clean .g22-pricing__shell { position: relative; z-index: 1; display: block; } .g22-henna--clean .g22-pricing__sheet { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; max-width: none; box-sizing: border-box; padding: clamp(28px, 3.4vw, 44px); border: 1px solid rgba(26, 26, 26, 0.08); border-radius: 24px; background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 50px -34px rgba(67, 41, 128, 0.28); } .g22-henna--clean .g22-pricing__head { max-width: none; margin: 0 0 22px; padding: 0; } .g22-henna--clean .g22-pricing__kicker { color: var(--g22-purple, #432980); } .g22-henna--clean .g22-pricing__kicker::before { background: var(--g22-purple, #432980); } .g22-henna--clean .g22-pricing__head .g22-clean__h2 { margin: 10px 0 0; max-width: 12ch; } .g22-henna--clean .g22-pricing__eyebrow { margin: 0 0 14px; font-family: var(--g22-font-label, "IBM Plex Mono", monospace); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g22-ink-soft, rgba(26, 26, 26, 0.62)); } .g22-henna--clean .g22-pricing__value { display: grid; grid-template-columns: auto minmax(72px, 1fr); align-items: end; column-gap: clamp(12px, 1.6vw, 20px); margin: 0; width: 100%; } .g22-henna--clean .g22-pricing__amount { font-family: var(--g22-font-display, "Manrope", sans-serif); font-size: clamp(3.8rem, 9vw, 6rem); font-weight: 800; line-height: 0.82; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--g22-purple, #432980); } .g22-henna--clean .g22-pricing__unit { max-width: 9ch; padding-bottom: 0.45em; font-family: var(--g22-font-label, "IBM Plex Mono", monospace); font-size: clamp(0.7rem, 0.95vw, 0.82rem); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; color: var(--g22-ink-soft, rgba(26, 26, 26, 0.58)); } .g22-henna--clean .g22-pricing__proof { margin: 16px 0 0; max-width: 34ch; font-size: clamp(0.98rem, 1.2vw, 1.08rem); line-height: 1.5; font-weight: 500; color: var(--g22-ink-soft, rgba(26, 26, 26, 0.72)); } .g22-henna--clean .g22-pricing__rule { width: 100%; margin: 24px 0; border: 0; border-top: 1px solid var(--g22-line, #d8d8d8); } .g22-henna--clean .g22-pricing__fee { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; width: 100%; } .g22-henna--clean .g22-pricing__fee-label { font-family: var(--g22-font-label, "IBM Plex Mono", monospace); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g22-ink-soft, rgba(26, 26, 26, 0.62)); } .g22-henna--clean .g22-pricing__fee-value { font-family: var(--g22-font-display, "Manrope", sans-serif); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 750; letter-spacing: -0.03em; color: var(--g22-ink, #1a1a1a); } .g22-henna--clean .g22-pricing__actions { margin: 28px 0 0; } .g22-henna--clean .g22-pricing__cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--g22-r-pill, 999px); background: var(--g22-purple, #432980); color: #fff; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px rgba(67, 41, 128, 0.2); transition: background-color 200ms ease, box-shadow 200ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1); } .g22-henna--clean .g22-pricing__cta-arrow { display: block; width: 16px; height: 2px; background: currentColor; position: relative; flex-shrink: 0; transition: transform 200ms ease; } .g22-henna--clean .g22-pricing__cta-arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); } .g22-henna--clean .g22-pricing__cta:hover, .g22-henna--clean .g22-pricing__cta:focus-visible { background: var(--g22-purple-hot, #533599); color: #fff; box-shadow: 0 14px 32px rgba(67, 41, 128, 0.28); transform: translateY(-1px); } .g22-henna--clean .g22-pricing__cta:hover .g22-pricing__cta-arrow, .g22-henna--clean .g22-pricing__cta:focus-visible .g22-pricing__cta-arrow { transform: translateX(3px); } .g22-henna--clean .g22-pricing__cta:active { transform: translateY(0) scale(0.98); box-shadow: 0 6px 16px rgba(67, 41, 128, 0.18); } .g22-henna--clean .g22-pricing__cta:focus-visible { outline: 3px solid var(--g22-yellow, #fcc708); outline-offset: 3px; } @media (min-width: 900px) { .g22-henna--clean .g22-pricing__sheet { display: grid; grid-template-columns: minmax(14rem, 0.9fr) minmax(0, 1.2fr); grid-template-areas: "head eyebrow" "head value" "head proof" "fee fee" "actions actions"; column-gap: clamp(32px, 5vw, 64px); row-gap: 0; align-items: start; } .g22-henna--clean .g22-pricing__head { grid-area: head; margin: 0; align-self: center; padding-right: clamp(12px, 2vw, 28px); border-right: 1px solid var(--g22-line, #d8d8d8); } .g22-henna--clean .g22-pricing__head .g22-clean__h2 { max-width: 11ch; } .g22-henna--clean .g22-pricing__eyebrow { grid-area: eyebrow; margin: 0 0 10px; } .g22-henna--clean .g22-pricing__value { grid-area: value; margin: 0; } .g22-henna--clean .g22-pricing__proof { grid-area: proof; margin-top: 14px; max-width: 40ch; } .g22-henna--clean .g22-pricing__rule { display: none; } .g22-henna--clean .g22-pricing__fee { grid-area: fee; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--g22-line, #d8d8d8); } .g22-henna--clean .g22-pricing__actions { grid-area: actions; margin-top: 24px; } } @media (max-width: 480px) { .g22-henna--clean .g22-pricing { padding-block: clamp(40px, 10vw, 56px); } .g22-henna--clean .g22-pricing__sheet { width: 100%; padding: 22px 18px; border-radius: 18px; } .g22-henna--clean .g22-pricing__amount { font-size: clamp(3.2rem, 16vw, 4.4rem); } .g22-henna--clean .g22-pricing__cta { width: 100%; } } @media (prefers-reduced-motion: reduce) { .g22-henna--clean .g22-pricing__cta, .g22-henna--clean .g22-pricing__cta-arrow { transition: none !important; } .g22-henna--clean .g22-pricing__cta:hover, .g22-henna--clean .g22-pricing__cta:focus-visible, .g22-henna--clean .g22-pricing__cta:active { transform: none !important; } } /* News: equal cards and stable dark-on-light fallback hover copy. */ .g22-henna--clean .g22-news__grid { align-items: stretch; grid-auto-rows: 1fr; } .g22-henna--clean .g22-news__item { align-self: stretch; display: flex; } /* Fix 2026-07-27 (Task 2): dropped `.g22-news__card--fallback` from this * shared rule — the dedicated fallback rule further down the file gives * it content-height sizing instead of the tall 3:4.2 portrait slab, which * was leaving a large empty void under the short caption. */ .g22-henna--clean .g22-news__card { width: 100%; height: 100%; min-height: 420px; aspect-ratio: 3 / 4.2; } /* Fix 2026-07-27 (round 2): `.g22-news__card` is declared twice (here and * ~line 2098), both forcing min-height:420px + aspect-ratio:3/4.2, and the * fallback card carries that base class too — so a fallback rule that only * set width never won the height. Photoless cards should size to their * caption (the media/"22" mark is an absolute full-bleed layer that adds no * flow height), so out-specify the base with `a.` and clear both the tall * min-height and the portrait aspect-ratio. This removes the empty void * under the short caption. Cards WITH a photo keep the 3:4.2 portrait. */ .g22-henna--clean a.g22-news__card--fallback { width: 100%; /* !important: `.g22-news__card` is declared twice with min-height:420px + * aspect-ratio:3/4.2, and even a more-specific selector still loses the * visible battle because the grid row is sized by `grid-auto-rows:1fr` * off the tallest card's aspect-ratio — so every photoless card must * drop the portrait constraint together, and the grid row must be free * to shrink to content. */ height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; } /* When a news grid holds any photoless card, let its rows size to content * instead of the 1fr portrait slab, so the shortened fallback cards don't * get re-stretched back to ~507px by their siblings. */ .g22-henna--clean .g22-news__grid:has(.g22-news__card--fallback) { grid-auto-rows: auto; } .g22-henna--clean a.g22-news__card--fallback:hover .g22-news__card-title, .g22-henna--clean a.g22-news__card--fallback:focus-visible .g22-news__card-title { color: #1a1a1a; } .g22-henna--clean a.g22-news__card--fallback:hover .g22-news__excerpt, .g22-henna--clean a.g22-news__card--fallback:focus-visible .g22-news__excerpt { color: rgba(26, 26, 26, .72); } /* CTA accordion: larger offer copy, a wider rail and a non-overlapping plus. */ .g22-henna--clean .g22-cta__slices { grid-template-columns: minmax(0, 1fr) clamp(140px, 10vw, 164px); } .g22-henna--clean .g22-cta__slices[data-active="tour"] { grid-template-columns: clamp(140px, 10vw, 164px) minmax(0, 1fr); } .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide { font-size: clamp(2.2rem, 4.2vw, 3.6rem); max-width: 9ch; } .g22-henna--clean .g22-cta__slice-text { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit { padding: 24px 18px 82px; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit::after { bottom: 22px; width: 40px; height: 40px; background: rgba(255, 255, 255, .12); } .g22-henna--clean .g22-cta__slice--tour.is-collapsed .g22-cta__slice-hit::after { background: rgba(67, 41, 128, .08); } @media (max-width: 900px) { .g22-henna--clean .g22-about__shell, .g22-henna--clean .g22-learn__shell { grid-template-columns: 1fr; } .g22-henna--clean .g22-about__mast, .g22-henna--clean .g22-about__lead, .g22-henna--clean .g22-about__media, .g22-henna--clean .g22-about__pillars, .g22-henna--clean .g22-about__cta, .g22-henna--clean .g22-learn__copy, .g22-henna--clean .g22-learn__focus { grid-column: 1; grid-row: auto; } .g22-henna--clean .g22-about__media { min-height: 320px; } .g22-henna--clean .g22-about__media { grid-template-columns: minmax(0, 1fr) minmax(94px, .34fr); } .g22-henna--clean .g22-news__item { max-width: none; } /* Fix 2026-07-27 (Task 2): scope the mobile 16:11 box to real-thumbnail * cards only, matching the desktop rule above. */ .g22-henna--clean .g22-news__card { min-height: 320px; aspect-ratio: 16 / 11; } .g22-henna--clean .g22-news__card--fallback { aspect-ratio: auto; } .g22-henna--clean .g22-cta__slices, .g22-henna--clean .g22-cta__slices[data-active="tour"] { grid-template-columns: 1fr; /* Ira 2026-07-29: stacked accordion must not keep the desktop side-by-side min-height — it forced a tall empty void under the expanded title when the form was closed. */ min-height: 0; } /* Ira 2026-07-29: collapsed sibling kept writing-mode:vertical-rl even in the stacked layout → sideways title + empty bar. Use a compact horizontal row instead. */ .g22-henna--clean .g22-cta__slice.is-collapsed { grid-template-rows: auto 0fr; min-height: 0; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit { justify-content: flex-start; align-items: center; min-height: 56px; padding: 14px 18px; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-name { place-items: start; width: auto; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-label--rail { opacity: 0; pointer-events: none; writing-mode: horizontal-tb; transform: none; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-label--wide { position: static; opacity: 1; pointer-events: auto; max-width: none; font-size: 1.05rem; line-height: 1.2; white-space: normal; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit::after { left: auto; right: 18px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-90deg); } .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-panel { justify-content: flex-start; gap: 18px; padding: 8px 20px 20px; } .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide { font-size: clamp(1.55rem, 6vw, 2rem); max-width: 14ch; } } @media (max-width: 640px) { .g22-henna--clean .g22-about__media { grid-template-columns: 1fr; min-height: 0; } .g22-henna--clean .g22-about__media figure { min-height: 240px; } .g22-henna--clean .g22-about__media-side { display: none; } } /* * Focus constellation → stacked layout whenever the learn shell is 1-col. * Was max-width: 640px — left 641–900px (iPad mini / large phones / Max * landscape-adjacent widths) on the desktop absolute map, so the purple * «Учень у фокусі» disc overlapped the top cards. Pair with shell breakpoint. */ @media (max-width: 900px) { .g22-henna--clean .g22-learn__focus { aspect-ratio: auto; min-height: 0; max-width: 520px; padding: 20px 16px 24px; overflow: visible; } .g22-henna--clean .g22-learn__focus-map { display: none; } .g22-henna--clean .g22-learn__focus-core { position: relative; left: auto; top: auto; transform: none; width: 120px; margin: 0 auto 20px; } .g22-henna--clean .g22-learn__focus-cards { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; inset: auto; } .g22-henna--clean .g22-learn__focus-card { position: relative; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto; } } /* Orbit motion — transform/opacity only; gated on reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .g22-henna--clean .g22-hero.is-live .g22-hero__orbit-spin { animation: g22-hero-orbit-spin 48s linear infinite; transform-origin: 0 0; } .g22-henna--clean .g22-hero.is-live .g22-hero__orbit-sat circle { animation: g22-hero-sat-pulse 2.8s var(--g22-ease, cubic-bezier(0.16, 1, 0.3, 1)) infinite; transform-origin: center; transform-box: fill-box; } .g22-henna--clean .g22-hero.is-live .g22-hero__orbit-sat--b circle { animation-delay: 0.5s; } .g22-henna--clean .g22-hero.is-live .g22-hero__orbit-sat--c circle { animation-delay: 1s; } .g22-henna--clean .g22-hero.is-live .g22-hero__orbit-sat--d circle { animation-delay: 1.5s; } } @keyframes g22-hero-orbit-spin { to { transform: rotate(360deg); } } @keyframes g22-hero-sat-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.72; } } @media (prefers-reduced-motion: reduce) { .g22-henna--clean .g22-hero__orbit { opacity: 1; transform: none; transition: none; } .g22-henna--clean .g22-hero__orbit-spin, .g22-henna--clean .g22-hero__orbit-sat circle { animation: none !important; } } /* ---------- Sections ---------- */ .g22-henna--clean .g22-clean__section { padding-block: clamp(36px, 4.5vw, 58px); border-top: 1px solid var(--g22-line); } .g22-henna--clean .g22-clean__section--alt { background: var(--g22-bg-alt); } /* ---------- Learning — Premium rise (title always in DOM) ---------- */ .g22-henna--clean .g22-learn { display: flex; align-items: center; justify-content: center; min-height: clamp(420px, 62vh, 640px); padding-block: clamp(88px, 12vw, 140px); background: #e5e5e5; border-top: 1px solid var(--g22-line); overflow: clip; scroll-margin-top: 96px; font-family: Manrope, sans-serif; text-align: center; } .g22-henna--clean .g22-learn__shell { width: var(--g22-shell); max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 3vh, 32px); } .g22-henna--clean .g22-learn__display { margin: 0; width: 100%; max-width: min(18ch, 100%); font-size: var(--g22-fs-h1); line-height: var(--g22-lh-tight); letter-spacing: -0.03em; font-weight: 700; color: var(--g22-ink); text-wrap: balance; opacity: 0; transform: translateY(var(--g22-rise)); transition: opacity var(--g22-dur-slow) var(--g22-ease-enter), transform var(--g22-dur-slow) var(--g22-ease-enter); } .g22-henna--clean .g22-learn.is-in .g22-learn__display { opacity: 1; transform: translateY(0); } .g22-henna--clean .g22-learn__lede { margin: 0; max-width: var(--g22-measure); font-size: var(--g22-fs-lede); line-height: 1.6; font-weight: 500; color: var(--g22-ink-soft); opacity: 0; transform: translateY(var(--g22-rise)); transition: opacity var(--g22-dur-std) var(--g22-ease-enter) 80ms, transform var(--g22-dur-std) var(--g22-ease-enter) 80ms; } .g22-henna--clean .g22-learn.is-in .g22-learn__lede, .g22-henna--clean .g22-learn.is-in .g22-learn__btn { opacity: 1; transform: translateY(0); } /* Secondary outline button — the "breathing" section stays quiet, no solid-fill pill competing with the hero/CTA primaries. */ .g22-henna--clean .g22-learn__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 24px; border-radius: var(--g22-r-pill); border: 2px solid var(--g22-purple); background: transparent; color: var(--g22-purple); font-size: 0.98rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; opacity: 0; transform: translateY(var(--g22-rise)); will-change: transform; transition: opacity var(--g22-dur-std) var(--g22-ease-enter) 140ms, transform var(--g22-dur-std) var(--g22-ease-enter) 140ms, background-color var(--g22-dur-quick) var(--g22-ease), color var(--g22-dur-quick) var(--g22-ease), box-shadow var(--g22-dur-quick) var(--g22-ease); box-shadow: none; } .g22-henna--clean .g22-learn__btn-arrow { display: block; width: 14px; height: 2px; background: currentColor; position: relative; flex-shrink: 0; transform: translateX(0); transition: transform 240ms var(--g22-ease-enter); } .g22-henna--clean .g22-learn__btn-arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); } .g22-henna--clean .g22-learn__btn:hover, .g22-henna--clean .g22-learn__btn:focus-visible { background: var(--g22-purple); color: var(--g22-on-purple); box-shadow: 0 12px 28px rgba(67, 41, 128, 0.22); } .g22-henna--clean .g22-learn__btn:hover .g22-learn__btn-arrow, .g22-henna--clean .g22-learn__btn:focus-visible .g22-learn__btn-arrow { transform: translateX(5px); } .g22-henna--clean .g22-learn__btn:focus-visible { outline: 3px solid var(--g22-yellow); outline-offset: 3px; } .g22-henna--clean .g22-learn__btn:active, .g22-henna--clean .g22-learn__btn.is-press { box-shadow: 0 8px 18px rgba(67, 41, 128, 0.24); } @media (max-width: 900px) { .g22-henna--clean .g22-learn { min-height: 0; padding-block: clamp(72px, 12vw, 100px); } .g22-henna--clean .g22-learn__display { max-width: 14ch; /* font-size: the shared H2 clamp already settles at its 28px floor under ~875px — no steeper mobile override needed anymore. */ } } @media (prefers-reduced-motion: reduce) { .g22-henna--clean .g22-learn__display, .g22-henna--clean .g22-learn__lede, .g22-henna--clean .g22-learn__btn { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- About — one-viewport Premium scene ---------- */ .g22-henna--clean .g22-about { display: flex; align-items: center; min-height: calc(100svh - 72px); padding-block: clamp(40px, 5vh, 64px); border-top: 1px solid rgba(26, 26, 26, 0.12); background: #e5e5e5; font-family: Manrope, sans-serif; overflow: clip; scroll-margin-top: 96px; } .g22-henna--clean .g22-about__shell { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; align-content: center; row-gap: clamp(18px, 2.8vh, 28px); width: var(--g22-shell); max-width: 100%; min-height: 0; } .g22-henna--clean .g22-about__mast { display: grid; gap: 14px; justify-items: start; } .g22-henna--clean .g22-about__title { margin: 0; width: 100%; max-width: 16ch; font-size: var(--g22-fs-h1); line-height: var(--g22-lh-head); letter-spacing: -0.03em; font-weight: 700; color: var(--g22-ink); text-wrap: balance; } .g22-henna--clean .g22-about__brand { color: var(--g22-ink); } .g22-henna--clean .g22-about__claim { /* ≥0.72 alpha ≈ 4.5:1+ large text on #e5e5e5 — ink-mute (0.45) was ~2.7:1 */ color: rgba(26, 26, 26, 0.72); font-weight: 600; } .g22-henna--clean .g22-about__title-inner { display: block; } /* Ira 2026-07-29: yellow rule under H2 read as «точка-шпион» next to «століття» — kill paint even if markup returns. */ .g22-henna--clean .g22-about__rule { display: none !important; } .g22-henna--clean .g22-about__lead { margin: 0; max-width: var(--g22-measure); font-size: var(--g22-fs-lede); line-height: 1.5; font-weight: 500; letter-spacing: -0.015em; color: var(--g22-ink-soft); } .g22-henna--clean .g22-about__pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* Client fix (equal-size blocks): explicit stretch — the three pillars sit in one implicit grid row, so without this the row height is set by the tallest card's content but shorter-copy siblings could still render short. Stretch guarantees every card fills that same row height regardless of how much title/body text it carries. */ align-items: stretch; gap: 0; align-self: stretch; min-height: clamp(180px, 28vh, 260px); border-top: 1px solid var(--g22-line); border-bottom: 1px solid var(--g22-line); } .g22-henna--clean .g22-about__pillar { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; align-content: start; min-width: 0; padding: clamp(18px, 2.4vh, 26px) clamp(16px, 2vw, 28px); border-right: 1px solid var(--g22-line); background: transparent; cursor: pointer; outline: none; overflow: hidden; opacity: 0; transform: translateY(22px); transition: opacity 520ms var(--g22-ease-enter), transform 520ms var(--g22-ease-enter), background-color 200ms var(--g22-ease), box-shadow 200ms var(--g22-ease); transition-delay: calc(220ms + (var(--g22-about-i, 0) * 70ms)); } .g22-henna--clean .g22-about__pillar:last-child { border-right: 0; } .g22-henna--clean .g22-about.is-in .g22-about__pillar { opacity: 1; transform: translateY(0); } .g22-henna--clean .g22-about__pillar-num { font-family: var(--g22-font-label); font-size: var(--g22-fs-label); font-weight: 500; letter-spacing: var(--g22-tracking-label); color: var(--g22-ink-mute); transition: color var(--g22-dur-quick) var(--g22-ease); } .g22-henna--clean .g22-about__pillar-title { font-size: var(--g22-fs-h3); font-weight: 700; letter-spacing: -0.02em; line-height: var(--g22-lh-head); color: var(--g22-ink); transition: color var(--g22-dur-quick) var(--g22-ease); } .g22-henna--clean .g22-about__pillar-text { margin: 0; font-size: 0.95rem; line-height: 1.45; font-weight: 500; color: var(--g22-ink-soft); max-width: 28ch; /* Raised from 0.4 to 0.72: WCAG 1.4.3 pass on #e5e5e5 bg */ opacity: 0.72; transform: translateY(4px); transition: opacity 280ms var(--g22-ease-enter), transform 280ms var(--g22-ease-enter), color var(--g22-dur-quick) var(--g22-ease); } /* Active pillar: 2px purple left border + paper ground — not a filled/ washed block, and not the old yellow rail (yellow stays a fill/bg accent only per the locked palette, never a state indicator here). */ .g22-henna--clean .g22-about__pillar-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--g22-purple); transform: scaleY(0); transform-origin: top center; transition: transform 360ms var(--g22-ease-enter); } .g22-henna--clean .g22-about__pillar.is-active, .g22-henna--clean .g22-about__pillar:hover, .g22-henna--clean .g22-about__pillar:focus-visible { background: var(--g22-paper); box-shadow: none; } .g22-henna--clean .g22-about__pillar.is-active .g22-about__pillar-num, .g22-henna--clean .g22-about__pillar:hover .g22-about__pillar-num, .g22-henna--clean .g22-about__pillar:focus-visible .g22-about__pillar-num { color: var(--g22-purple); } .g22-henna--clean .g22-about__pillar.is-active .g22-about__pillar-title, .g22-henna--clean .g22-about__pillar:hover .g22-about__pillar-title, .g22-henna--clean .g22-about__pillar:focus-visible .g22-about__pillar-title { color: var(--g22-purple); } .g22-henna--clean .g22-about__pillar.is-active .g22-about__pillar-text, .g22-henna--clean .g22-about__pillar:hover .g22-about__pillar-text, .g22-henna--clean .g22-about__pillar:focus-visible .g22-about__pillar-text { opacity: 1; transform: translateY(0); color: var(--g22-ink-soft); } .g22-henna--clean .g22-about__pillar.is-active .g22-about__pillar-rail, .g22-henna--clean .g22-about__pillar:hover .g22-about__pillar-rail, .g22-henna--clean .g22-about__pillar:focus-visible .g22-about__pillar-rail { transform: scaleY(1); } /* Inactive pillars: softer press feedback without stealing focus */ .g22-henna--clean .g22-about__pillar:active:not(.is-active) { background: var(--g22-purple-08); } .g22-henna--clean .g22-about__pillar:focus-visible { outline: 2px solid var(--g22-purple); outline-offset: -2px; } .g22-henna--clean .g22-about__cta { display: inline-flex; align-items: center; gap: 12px; justify-self: start; width: fit-content; min-height: 48px; /* Sitewide pill-button normalization (2026-07-22): 24px horizontal padding + +0.02em tracking, matching .g22-clean__btn. */ padding: 0 24px; border: 1.5px solid var(--g22-purple); border-radius: var(--g22-r-pill); background: transparent; color: var(--g22-purple); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; will-change: transform; box-shadow: none; transition: background-color var(--g22-dur-quick) var(--g22-ease), border-color var(--g22-dur-quick) var(--g22-ease), color var(--g22-dur-quick) var(--g22-ease), box-shadow var(--g22-dur-quick) var(--g22-ease), transform var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); } .g22-henna--clean .g22-about__cta-arrow { display: block; width: 16px; height: 2px; background: currentColor; position: relative; transform: translateX(0); transition: transform var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); } .g22-henna--clean .g22-about__cta-arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); } .g22-henna--clean .g22-about__cta:hover, .g22-henna--clean .g22-about__cta:focus-visible { background: var(--g22-purple); border-color: var(--g22-purple); color: #fff; /* Magnetic JS owns transform on pointer hover; this lift only paints when the JS never bound (reduced motion / no fine pointer) or on keyboard focus, which pointermove never touches. */ transform: translateY(-1px); box-shadow: var(--g22-shadow-md); } .g22-henna--clean .g22-about__cta:hover .g22-about__cta-arrow, .g22-henna--clean .g22-about__cta:focus-visible .g22-about__cta-arrow { transform: translateX(3px); } .g22-henna--clean .g22-about__cta:active, .g22-henna--clean .g22-about__cta.is-press { /* Magnetic JS owns transform; press class tightens shadow only. The scale(0.98) tap feedback still applies via CSS when JS isn't bound. */ box-shadow: var(--g22-shadow-sm); transform: translateY(0) scale(0.98); } .g22-henna--clean .g22-about__cta:focus-visible { outline: 3px solid var(--g22-yellow); outline-offset: 3px; } .g22-henna--clean .g22-about [data-g22-about-reveal] { opacity: 0; transform: translateY(20px); /* Client audit 2026-07-29 (task 7): 560ms + a late trigger read as a 1-2s grey slab before the photo appeared. Shortened to <=400ms; the trigger itself moved earlier via home-why-scroll.js rootMargin. */ transition: opacity 380ms var(--g22-ease-enter), transform 380ms var(--g22-ease-enter); } .g22-henna--clean .g22-about.is-in [data-g22-about-reveal] { opacity: 1; transform: translateY(0); } .g22-henna--clean .g22-about.is-in .g22-about__mast { transition-delay: 40ms; } .g22-henna--clean .g22-about.is-in .g22-about__lead { transition-delay: 120ms; } .g22-henna--clean .g22-about.is-in .g22-about__pillars { transition-delay: 160ms; } .g22-henna--clean .g22-about.is-in .g22-about__cta { transition-delay: 380ms; } @media (max-width: 900px) { .g22-henna--clean .g22-about { min-height: 0; align-items: stretch; padding-block: clamp(56px, 10vw, 80px); } .g22-henna--clean .g22-about__shell { width: min(100% - 32px, 680px); grid-template-rows: auto; row-gap: 22px; } .g22-henna--clean .g22-about__title { max-width: 12ch; /* font-size: shared H2 clamp already floors at 28px under ~875px. */ } .g22-henna--clean .g22-about__pillars { grid-template-columns: 1fr; min-height: 0; } .g22-henna--clean .g22-about__pillar { border-right: 0; border-bottom: 1px solid rgba(26, 26, 26, 0.1); padding: 16px 0 16px 14px; } .g22-henna--clean .g22-about__pillar:last-child { border-bottom: 0; } .g22-henna--clean .g22-about__pillar-text { opacity: 1; transform: none; max-width: none; } } @media (prefers-reduced-motion: reduce) { .g22-henna--clean .g22-about [data-g22-about-reveal], .g22-henna--clean .g22-about__pillar, .g22-henna--clean .g22-about__pillar-text, .g22-henna--clean .g22-about__pillar-rail, .g22-henna--clean .g22-about__cta, .g22-henna--clean .g22-about__cta-arrow { opacity: 1 !important; transform: none !important; transition: none !important; } .g22-henna--clean .g22-about__pillar.is-active .g22-about__pillar-rail { transform: scaleY(1) !important; } } /* ---------- Why — airy scenographic stage ---------- */ /* ---------- Why — sticky brief + compact scroll steps ---------- */ .g22-henna--clean .g22-why { padding-block: clamp(46px, 6vw, 74px); --g22-why-ease: cubic-bezier(0.05, 0.7, 0.1, 1); --g22-why-move: cubic-bezier(0.4, 0, 0.2, 1); scroll-margin-top: 96px; } .g22-henna--clean .g22-why__shell { max-width: none; width: var(--g22-shell); } .g22-henna--clean .g22-why__stage { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); column-gap: clamp(40px, 6vw, 80px); align-items: start; } .g22-henna--clean .g22-why__head { position: sticky; /* Client audit 2026-07-29 (task 3): aligned with the pro-shkolu sticky brief (top: 120px) -- sticky itself was already safe from ancestor overflow (see the overflow-x: clip fix at the top of this file). */ top: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 8px; max-width: 26rem; } .g22-henna--clean .g22-why__head .g22-clean__h2 { max-width: 12ch; margin: 0; } .g22-henna--clean .g22-why__note { margin: 0; max-width: 34ch; font-size: 1rem; line-height: 1.6; } .g22-henna--clean .g22-why__head-link { margin-top: 4px; } .g22-henna--clean .g22-why__track { position: relative; display: grid; grid-template-columns: 2px minmax(0, 1fr); gap: 0 clamp(22px, 3vw, 36px); padding-left: 2px; min-height: 0; } .g22-henna--clean .g22-why__rail { position: relative; width: 2px; margin-block: 8px; background: var(--g22-line); border-radius: var(--g22-r-pill); overflow: hidden; align-self: stretch; } .g22-henna--clean .g22-why__rail-fill { position: absolute; inset: 0; background: var(--g22-purple); transform: scaleY(0); transform-origin: top center; will-change: transform; transition: transform 80ms linear; } .g22-henna--clean .g22-why__list { list-style: none; margin: 0; padding: 0 0 clamp(60px, 9vh, 108px); display: flex; flex-direction: column; gap: 0; } .g22-henna--clean .g22-why__step { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: clamp(12px, 2vw, 24px); align-items: start; min-height: 8.75rem; padding: 28px 0 34px; border-bottom: 1px solid var(--g22-line); opacity: 1; transform: translateY(14px); transition: transform 220ms var(--g22-why-ease); } .g22-henna--clean .g22-why__step:last-child { border-bottom: 0; padding-bottom: 34px; } .g22-henna--clean .g22-why__step.is-in { transform: translateY(6px); } .g22-henna--clean .g22-why__step.is-active { opacity: 1; transform: translateY(0); } .g22-henna--clean .g22-why__num { font-family: var(--g22-font-label); font-size: clamp(2.4rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: -0.06em; line-height: 1; padding-top: 2px; color: var(--g22-purple-14); transition: color 320ms var(--g22-why-move); user-select: none; } .g22-henna--clean .g22-why__step.is-active .g22-why__num { color: var(--g22-purple); } .g22-henna--clean .g22-why__body { display: flex; flex-direction: column; gap: 8px; max-width: 30rem; padding-top: 2px; } .g22-henna--clean .g22-why__body strong { position: relative; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.25; letter-spacing: -0.03em; font-weight: 700; color: var(--g22-ink); } .g22-henna--clean .g22-why__body strong::before { content: ""; position: absolute; left: -18px; top: 0.4em; width: 7px; height: 7px; border-radius: 50%; background: var(--g22-yellow); opacity: 0; transform: scale(0.9); transition: opacity 160ms var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)), transform 180ms var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); } .g22-henna--clean .g22-why__step.is-active .g22-why__body strong::before { opacity: 1; transform: scale(1); } .g22-henna--clean .g22-why__body span { font-size: 0.98rem; line-height: 1.55; color: var(--g22-ink-soft); max-width: 40ch; } @media (prefers-reduced-motion: reduce) { .g22-henna--clean .g22-why__step { opacity: 1; transform: none; transition: none; } .g22-henna--clean .g22-why__rail-fill { transform: scaleY(1); transition: none; } .g22-henna--clean .g22-why__head { position: static; } .g22-henna--clean .g22-why__step.is-active .g22-why__body strong::before { transform: scale(1); } } @media (max-width: 960px) { .g22-henna--clean .g22-why__stage { grid-template-columns: 1fr; gap: 28px; } .g22-henna--clean .g22-why__head { position: static; max-width: 36rem; } .g22-henna--clean .g22-why__step { grid-template-columns: 3.25rem minmax(0, 1fr); padding: 18px 0 20px; } .g22-henna--clean .g22-why__num { font-size: 2.1rem; } .g22-henna--clean .g22-why__step.is-active .g22-why__body strong::before { left: -12px; width: 6px; height: 6px; } } /* ---------- Videos ---------- */ .g22-henna--clean .g22-clean__videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .g22-henna--clean .g22-clean__video { display: flex; flex-direction: column; gap: 8px; } .g22-henna--clean .g22-clean__video-frame, .g22-henna--clean .g22-clean__video video { aspect-ratio: 9 / 16; width: 100%; border: 0; border-radius: 12px; background: #d4d4d4; overflow: hidden; } .g22-henna--clean .g22-clean__video-frame iframe { width: 100%; height: 100%; border: 0; } .g22-henna--clean .g22-clean__video p { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--g22-ink); } .g22-henna--clean .g22-clean__note { margin: 0; padding: 14px 16px; border: 1px dashed var(--g22-line); border-radius: 10px; font-size: 0.95rem; line-height: 1.5; color: var(--g22-ink-soft); } /* ---------- News (text list) ---------- */ .g22-henna--clean .g22-clean__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 4px; } .g22-henna--clean .g22-clean__row .g22-clean__stack--narrow { margin-bottom: 0; } /* ---------- News — school photo cards + premium motion ---------- */ .g22-henna--clean .g22-news { --g22-news-ease: cubic-bezier(0.05, 0.7, 0.1, 1); padding-block: clamp(62px, 8vw, 100px); background: #e5e5e5; font-family: Manrope, sans-serif; scroll-margin-top: 96px; } .g22-henna--clean .g22-news__shell { width: var(--g22-shell); max-width: none; display: flex; flex-direction: column; gap: clamp(32px, 4.5vw, 44px); } .g22-henna--clean .g22-news__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--g22-ease), transform 520ms var(--g22-ease); } /* Eyebrow spans the full row — title + button share the row below */ .g22-henna--clean .g22-news__eyebrow { flex: 0 0 100%; margin: 0; } .g22-henna--clean .g22-news.is-in .g22-news__head { opacity: 1; transform: translateY(0); } .g22-henna--clean .g22-news__title { margin: 0; max-width: 14ch; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; color: #1a1a1a; } .g22-henna--clean .g22-news__all { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; align-self: flex-end; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--g22-purple); background: transparent; color: var(--g22-purple); font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; will-change: transform; transition: background-color var(--g22-dur-quick) var(--g22-ease), border-color var(--g22-dur-quick) var(--g22-ease), color var(--g22-dur-quick) var(--g22-ease), box-shadow var(--g22-dur-quick) var(--g22-ease), transform var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); } .g22-henna--clean .g22-news__all:hover, .g22-henna--clean .g22-news__all:focus-visible { background: var(--g22-purple); border-color: var(--g22-purple); color: #fff; box-shadow: var(--g22-shadow-md); /* Magnetic JS owns transform on pointer hover (see about__cta note). */ transform: translateY(-1px); } .g22-henna--clean .g22-news__all:active { transform: translateY(0) scale(0.98); } .g22-henna--clean .g22-news__all:focus-visible { outline: 3px solid var(--g22-yellow); outline-offset: 3px; } .g22-henna--clean .g22-news__all-arrow { display: inline-block; width: 16px; height: 2px; background: currentColor; position: relative; transition: transform var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); } .g22-henna--clean .g22-news__all-arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); } .g22-henna--clean .g22-news__all:hover .g22-news__all-arrow { transform: translateX(3px); } .g22-henna--clean .g22-news__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); justify-content: start; grid-auto-flow: dense; gap: 16px; } .g22-henna--clean .g22-news__item { min-width: 0; max-width: 363px; perspective: 1000px; /* Photo cards fill the row; empty/fallback cards size to content. */ align-self: stretch; opacity: 0; transform: translateY(28px) scale(0.985); /* Client audit 2026-07-29 (task 7): 560ms read as a slow grey-card reveal; shortened to <=400ms (trigger moved earlier via home-why-scroll.js rootMargin). */ transition: opacity 380ms var(--g22-ease), transform 380ms var(--g22-ease); transition-delay: calc(100ms + (var(--g22-news-i, 0) * 85ms)); } .g22-henna--clean .g22-news__item:has(.g22-news__card--fallback) { align-self: start; } .g22-henna--clean .g22-news.is-in .g22-news__item { opacity: 1; transform: translateY(0) scale(1); } /* Senior card language: white surface + resting/hover shadow ladder, photo on top and a real (non-overlaid) caption panel below it — not a dark full-bleed poster with text stacked on a scrim. */ .g22-henna--clean .g22-news__card { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 420px; overflow: hidden; border-radius: var(--g22-r-lg); background: var(--g22-card); text-decoration: none; color: var(--g22-ink); isolation: isolate; box-shadow: var(--g22-shadow-sm); transition: box-shadow var(--g22-dur-std) var(--g22-ease), transform var(--g22-dur-std) var(--g22-ease); will-change: transform; } .g22-henna--clean .g22-news__card--empty { cursor: default; } .g22-henna--clean .g22-news__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; flex: none; } .g22-henna--clean .g22-news__media picture { position: absolute; inset: 0; } .g22-henna--clean .g22-news__media picture, .g22-henna--clean .g22-news__media img { display: block; width: 100%; height: 100%; } .g22-henna--clean .g22-news__media img { object-fit: cover; /* Same continuous scrub language as Why / Hero */ transform: scale(calc(1.06 - 0.06 * var(--g22-scrub, 0))); transform-origin: 50% 42%; will-change: transform; filter: contrast(1.06) saturate(0.9); } /* Photo cards: framed photo + white plaque — see NEWS CARD REDESIGN * cascade block at the end of this sheet (overrides the tall poster). */ /* Light tonal placeholders until real covers exist — the backdrop stays a full-bleed absolute layer (inherited from .g22-news__media above) so it never adds document-flow height; only .g22-news__cap below determines how tall a fallback card actually is (design audit phase 2, item 4). */ .g22-henna--clean .g22-news__media--ph { display: block; background: #f0f0f0; } /* Design audit phase 2, item 3: the ghost "22" is now a deliberate corner watermark — one fixed position across every fallback card (bottom-right, cropped by the card's own overflow: hidden), large, faint, sitting behind the caption stack instead of centered mid-card competing with it. */ .g22-henna--clean .g22-news__media-mark { position: absolute; right: -0.06em; bottom: -0.12em; z-index: 0; font-size: clamp(120px, 16vw, 160px); font-weight: 800; letter-spacing: -0.08em; line-height: 0.85; color: var(--g22-line-soft); user-select: none; pointer-events: none; } .g22-henna--clean .g22-news__card--fallback { background: var(--g22-paper); color: var(--g22-ink); border: 1px solid var(--g22-line-soft); box-shadow: none; /* Item 4: drop the tall photo-poster footprint — the card is exactly as tall as its caption content now, not a fixed 3:4.2 slab with a mostly empty top half. */ height: auto; min-height: 0; aspect-ratio: auto; display: flex; flex-direction: column; } .g22-henna--clean .g22-news__card--fallback .g22-news__veil { display: none; } .g22-henna--clean .g22-news__card--fallback .g22-news__meta { color: var(--g22-ink-mute); } .g22-henna--clean .g22-news__card--fallback .g22-news__cat { color: var(--g22-purple); } .g22-henna--clean .g22-news__card--fallback .g22-news__dot { background: var(--g22-ink-mute); } .g22-henna--clean .g22-news__card--fallback .g22-news__card-title { color: var(--g22-ink); } .g22-henna--clean .g22-news__card--fallback .g22-news__excerpt { color: var(--g22-ink-soft); } /* Item 4: on real-photo cards .g22-news__cap is pinned to the bottom of a tall poster on purpose (caption over image). On a fallback card there is no poster to pin against — let it sit in normal flow with compact vertical rhythm (category/date -> title -> excerpt) so the card's height is just "however tall that stack is", padded on all sides instead of only at the foot of a mostly-empty slab. */ .g22-henna--clean .g22-news__card--fallback .g22-news__cap { /* relative, not static: still exits absolute positioning (so it contributes to flow height, the point of this override), but z-index only ever applies to positioned elements — static would silently drop the stacking order and let the absolutely-positioned ghost mark behind it paint on top of the caption text. */ position: relative; padding: clamp(22px, 3vw, 28px); gap: 8px; } .g22-henna--clean a.g22-news__card--fallback:hover, .g22-henna--clean a.g22-news__card--fallback:focus-visible { box-shadow: var(--g22-shadow-md); } .g22-henna--clean a.g22-news__card--fallback:hover .g22-news__excerpt, .g22-henna--clean a.g22-news__card--fallback:focus-visible .g22-news__excerpt { color: var(--g22-ink-soft); } .g22-henna--clean .g22-news__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(26, 26, 26, 0.05) 20%, rgba(67, 41, 128, 0.28) 52%, rgba(26, 26, 26, 0.88) 100% ); opacity: 1; pointer-events: none; transition: opacity 380ms var(--g22-ease); } .g22-henna--clean .g22-news__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 22px 26px; transform: translateY(6px); transition: transform 420ms var(--g22-ease); } .g22-henna--clean .g22-news.is-in .g22-news__cap { transform: translateY(0); transition-delay: calc(220ms + (var(--g22-news-i, 0) * 85ms)); } .g22-henna--clean .g22-news__meta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .g22-henna--clean .g22-news__cat { color: var(--g22-yellow); } .g22-henna--clean .g22-news__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); } .g22-henna--clean .g22-news__card-title { display: -webkit-box; max-width: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--g22-fs-h3); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; color: var(--g22-ink); transition: transform 380ms var(--g22-ease); } .g22-henna--clean .g22-news__excerpt { display: block; max-width: none; font-size: 0.9rem; line-height: 1.45; font-weight: 500; color: var(--g22-ink-soft); opacity: 1; transition: opacity 320ms var(--g22-ease), transform 380ms var(--g22-ease); } .g22-henna--clean .g22-news__more { display: block; width: 2.4rem; margin-top: 4px; } .g22-henna--clean .g22-news__more-line { display: block; width: 100%; height: 2px; background: var(--g22-purple); transform: scaleX(0.35); transform-origin: left center; transition: transform 420ms var(--g22-ease); } .g22-henna--clean a.g22-news__card:hover, .g22-henna--clean a.g22-news__card:focus-visible { box-shadow: 0 20px 44px rgba(26, 26, 26, 0.2); transform: translateY(-4px); } .g22-henna--clean a.g22-news__card:hover .g22-news__media img, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__media img { transform: scale(calc(1.03 - 0.02 * var(--g22-scrub, 0))); } .g22-henna--clean a.g22-news__card:hover .g22-news__veil, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__veil { opacity: 0.92; background: linear-gradient( 180deg, rgba(26, 26, 26, 0.12) 12%, rgba(67, 41, 128, 0.42) 48%, rgba(26, 26, 26, 0.92) 100% ); } .g22-henna--clean a.g22-news__card:hover .g22-news__cap, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__cap { transform: translateY(-2px); } .g22-henna--clean a.g22-news__card:hover .g22-news__card-title, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__card-title { transform: translateY(-2px); } .g22-henna--clean a.g22-news__card:hover .g22-news__excerpt, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__excerpt { opacity: 1; color: rgba(255, 255, 255, 0.82); } .g22-henna--clean a.g22-news__card:hover .g22-news__more-line, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__more-line { transform: scaleX(1); } .g22-henna--clean a.g22-news__card:focus-visible { outline: 3px solid var(--g22-yellow); outline-offset: 3px; } .g22-henna--clean a.g22-news__card:active { transform: translateY(-1px) scale(0.995); } @media (max-width: 900px) { .g22-henna--clean .g22-news__shell { width: calc(100% - 32px); gap: 24px; } .g22-henna--clean .g22-news__head { flex-direction: column; align-items: flex-start; gap: 16px; } .g22-henna--clean .g22-news__title { max-width: 12ch; /* font-size: shared H2 clamp already floors at 28px under ~875px. */ } .g22-henna--clean .g22-news__all { align-self: flex-start; } .g22-henna--clean .g22-news__grid { grid-template-columns: 1fr; gap: 14px; } .g22-henna--clean .g22-news__card { min-height: 0; aspect-ratio: 16 / 11; border-radius: 22px; } /* Same-specificity tie with the rule above (both one class, applied to the same element) — without this, the mobile 16:11 box would win by cascade order and silently undo the item-4 compact-fallback fix at narrow widths. */ .g22-henna--clean .g22-news__card--fallback { aspect-ratio: auto; } .g22-henna--clean .g22-news__card-title, .g22-henna--clean .g22-news__excerpt { max-width: none; } } @media (prefers-reduced-motion: reduce) { .g22-henna--clean .g22-news__head, .g22-henna--clean .g22-news__item, .g22-henna--clean .g22-news__media img, .g22-henna--clean .g22-news__cap, .g22-henna--clean .g22-news__card, .g22-henna--clean .g22-news__more-line, .g22-henna--clean .g22-news__all, .g22-henna--clean .g22-news__all-arrow { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- CTA — award horizontal accordion ---------- */ .g22-henna--clean .g22-cta { --g22-cta-ease: cubic-bezier(0.05, 0.7, 0.1, 1); --g22-cta-move: cubic-bezier(0.4, 0, 0.2, 1); --g22-cta-swap: 220ms; position: relative; display: flex; align-items: center; min-height: calc(78svh - 64px); padding-block: clamp(42px, 6vh, 80px); background: radial-gradient(70% 55% at 88% 18%, rgba(67, 41, 128, 0.1), transparent 60%), #e5e5e5; color: var(--g22-ink); border-top: 1px solid var(--g22-line); overflow: clip; scroll-margin-top: 96px; } /* * Design audit phase 3, item 2: "light zone grows into purple" as the * reader reaches the CTA. A literal scroll-linked background-color (or a * growing gradient reaching under the card text) was the brief's first * idea, but it means interpolating text color against two different * backgrounds mid-scroll to stay readable — a real contrast-failure risk * for very little payoff on a card whose own background is already solid * purple. Went with the brief's own pre-approved simplified fallback * instead: a static purple halo sitting behind the card (no motion, so no * contrast risk at all) + the card itself scaling 0.96 -> 1 as it centers * in the viewport (scroll-linked, see .g22-cta__slices below). Cheaper, * nothing fragile, same "grows into the accent" read. */ .g22-henna--clean .g22-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(46rem 30rem at 68% 55%, rgba(67, 41, 128, 0.16), transparent 68%); pointer-events: none; } .g22-henna--clean .g22-cta__shell { position: relative; z-index: 1; width: var(--g22-shell); max-width: 100%; display: grid; gap: clamp(40px, 6vh, 64px); overflow: clip; } .g22-henna--clean .g22-cta__mast { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.55fr); gap: clamp(20px, 3vw, 48px); align-items: end; } .g22-henna--clean .g22-cta__display, .g22-henna--clean .g22-cta__lede, .g22-henna--clean .g22-cta__slices { opacity: 0; transform: translateY(18px); transition: opacity 480ms var(--g22-cta-ease), transform 480ms var(--g22-cta-ease); } .g22-henna--clean .g22-cta__lede { transition-delay: 60ms; } .g22-henna--clean .g22-cta__slices { transition-delay: 120ms; } .g22-henna--clean .g22-cta.is-in .g22-cta__display, .g22-henna--clean .g22-cta.is-in .g22-cta__lede, .g22-henna--clean .g22-cta.is-in .g22-cta__slices { opacity: 1; transform: translateY(0); } .g22-henna--clean .g22-cta__display { margin: 0; max-width: none; width: 100%; font-size: var(--g22-fs-display); line-height: var(--g22-lh-tight); letter-spacing: -0.03em; font-weight: 700; color: var(--g22-ink); } /* "наживо" reads via the yellow mark-draw underline (home-senior.css .g22-cta__em::after) — never a color change mid-sentence. */ .g22-henna--clean .g22-cta__em { color: inherit; font-weight: 800; } .g22-henna--clean .g22-cta__lede { margin: 0; max-width: 28ch; font-size: 1.05rem; line-height: 1.55; font-weight: 500; color: var(--g22-ink-soft); padding-bottom: 6px; } .g22-henna--clean .g22-cta__slices { display: grid; grid-template-columns: minmax(0, 1fr) clamp(104px, 8vw, 124px); gap: 10px; width: 100%; /* Ira 2026-07-29: tall min-height + space-between made an empty oval under the expanded title. Size to content instead. */ min-height: 0; transition: grid-template-columns var(--g22-cta-swap) var(--g22-cta-ease), opacity 480ms var(--g22-cta-ease), transform 480ms var(--g22-cta-ease); transition-delay: 0ms, 120ms, 120ms; } .g22-henna--clean .g22-cta.is-in .g22-cta__slices { transition-delay: 0ms, 120ms, 120ms; } .g22-henna--clean .g22-cta__slices[data-active="tour"] { grid-template-columns: clamp(104px, 8vw, 124px) minmax(0, 1fr); } /* Keyboard-triggered switches are intentionally instant. */ .g22-henna--clean .g22-cta__slices.is-instant, .g22-henna--clean .g22-cta__slices.is-instant .g22-cta__slice, .g22-henna--clean .g22-cta__slices.is-instant .g22-cta__slice-hit, .g22-henna--clean .g22-cta__slices.is-instant .g22-cta__slice-body, .g22-henna--clean .g22-cta__slices.is-instant .g22-cta__slice-label { transition: none !important; } .g22-henna--clean .g22-cta__slice { position: relative; display: grid; /* Expanded: title + body. Collapsed: body track → 0fr (no height:auto snap). */ grid-template-rows: auto 1fr; align-content: stretch; gap: 0; min-width: 0; width: 100%; border-radius: var(--g22-r-lg); overflow: hidden; isolation: isolate; transform: scale(1); transition: grid-template-rows 220ms var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--g22-t-med, 200ms) var(--g22-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); } .g22-henna--clean .g22-cta__slice.is-collapsed { grid-template-rows: minmax(0, 1fr) 0fr; } /* Collapsed slice = clickable affordance, not a dead white slab: cursor, hover lift and a "+" cue so it reads as expandable before anyone hovers. */ .g22-henna--clean .g22-cta__slice.is-collapsed { cursor: pointer; } @media (hover: hover) and (pointer: fine) { .g22-henna--clean .g22-cta__slice.is-collapsed:hover { transform: scale(1.01); } .g22-henna--clean .g22-cta__slice--tour.is-collapsed:hover .g22-cta__slice-hit { background: rgba(26, 26, 26, 0.04); } .g22-henna--clean .g22-cta__slice--trial.is-collapsed:hover .g22-cta__slice-hit { background: rgba(255, 255, 255, 0.08); } } .g22-henna--clean .g22-cta__slice--trial { background: var(--g22-purple); color: var(--g22-on-purple); } .g22-henna--clean .g22-cta__slice--tour { background: var(--g22-paper); color: var(--g22-ink); border: 1px solid var(--g22-line); } .g22-henna--clean .g22-cta__slice-hit { appearance: none; display: flex; align-items: flex-start; width: 100%; min-width: 0; min-height: 0; margin: 0; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 12px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: background-color 160ms var(--g22-cta-move); } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit { height: 100%; align-items: center; justify-content: center; /* Bottom padding reduced now that circle badge is gone */ padding: 28px 10px 36px; transition: background-color 160ms var(--g22-cta-move); } .g22-henna--clean .g22-cta__slice-hit:focus-visible { outline: 3px solid var(--g22-yellow); outline-offset: -6px; } /* Collapsed slice affordance: hairline bracket-arrow, no skeuomorphic circle. Two 1px lines form a ">" chevron — reads as "expand" without any chrome. */ .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit::after { content: ""; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 16px; height: 16px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; rotate: 135deg; opacity: 0.45; pointer-events: none; transition: opacity var(--g22-t-med, 200ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--g22-t-med, 200ms) var(--g22-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit:focus-visible::after { opacity: 0.9; transform: translateX(-50%) translateY(-2px); } @media (hover: hover) and (pointer: fine) { .g22-henna--clean .g22-cta__slice.is-collapsed:hover .g22-cta__slice-hit::after { opacity: 0.9; transform: translateX(-50%) translateY(-2px); } } .g22-henna--clean .g22-cta__slice-name { position: relative; display: grid; place-items: start; max-width: 11ch; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-name { max-width: none; place-items: center; /* Client fix (item 5, "+" overlaps text on hover): the vertical rail label was only centered inside the hit's flex box, with nothing constraining its own height — a long label ("Екскурсія та знайомство" in vertical-rl reads as a very tall run of glyphs) could grow taller than the available box and bleed symmetrically past its centered position into the bottom padding, i.e. exactly where the "+" badge sits (::after on the parent .g22-cta__slice-hit, 22px off the bottom). Stretching this element to the hit's own content box (which already excludes that reserved padding) and clipping overflow here confines any oversized label to its own safe zone instead of crossing into the badge's territory. */ align-self: stretch; overflow: hidden; } /* Dual labels — crossfade; writing-mode never tweens (no upside-down mid-frame) */ .g22-henna--clean .g22-cta__slice-label { grid-area: 1 / 1; font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.08; letter-spacing: -0.04em; font-weight: 700; transition: opacity 200ms var(--g22-cta-move); } .g22-henna--clean .g22-cta__slice-label--wide { opacity: 1; max-width: 11ch; } .g22-henna--clean .g22-cta__slice-label--rail { opacity: 0; pointer-events: none; writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(1.2rem, 1.8vw, 1.55rem); white-space: nowrap; line-height: 1; max-width: none; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-label--wide { opacity: 0; pointer-events: none; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-label--rail { opacity: 1; } /* Client fix (2026-07, "бокові кнопки відцентрувати"): the collapsed rail label sat pinned to the RIGHT of the slice, not centered. Cause: the two labels share grid cell 1/1, and the hidden --wide label (max 11ch) inflated the cell to nearly the full rail width; a writing-mode: vertical-rl single line then hugs the right edge of that oversized cell. Pulling the hidden wide label out of layout flow when collapsed lets the cell shrink to the rail label's own (narrow) width, so place-items:center on the slice-name centers it in the rail column. Rail stays in normal flow (no clipping). */ .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-label--wide { position: absolute; } .g22-henna--clean .g22-cta__slice-body { display: grid; grid-template-rows: 1fr; min-height: 0; overflow: hidden; opacity: 1; transition: opacity 240ms var(--g22-cta-move); } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-body { opacity: 0; pointer-events: none; } .g22-henna--clean .g22-cta__slice-panel { min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 8px clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px); } /* Desktop: the expanded slice is a real two-column composition rather than a wide card with all copy trapped in a narrow strip on the left. The collapsed sibling stays a compact rail; mobile keeps the stacked layout. */ @media (min-width: 901px) { .g22-henna--clean .g22-cta__slice:not(.is-collapsed) { grid-template-columns: minmax(210px, 0.72fr) minmax(320px, 1.28fr); grid-template-rows: minmax(0, 1fr); } .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-hit { grid-column: 1; grid-row: 1; height: 100%; align-items: center; padding: clamp(32px, 3.4vw, 48px); } .g22-henna--clean .g22-cta__slice--trial:not(.is-collapsed) .g22-cta__slice-hit { border-right: 1px solid rgba(255, 255, 255, 0.14); } .g22-henna--clean .g22-cta__slice--tour:not(.is-collapsed) .g22-cta__slice-hit { border-right: 1px solid rgba(26, 26, 26, 0.1); } .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-name, .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide { max-width: 8ch; } .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide { font-size: clamp(2rem, 3vw, 3rem); line-height: 0.98; } .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-body { grid-column: 2; grid-row: 1; } /* Ira 2026-07-29: space-between left a large empty oval under the title when the form

was closed. Pack copy + CTA from the top. Do NOT use margin-top:auto on details — that reopens the oval. */ .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-panel { justify-content: flex-start; gap: clamp(16px, 2vw, 24px); padding: clamp(28px, 3vw, 40px); } .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-text { max-width: 38ch; } .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__details { max-width: 380px; margin-top: 0; } /* Ira 2026-07-29: vertical rail label hard to read — keep the compact rail, but set the title horizontally (short wrap) instead of writing-mode: vertical-rl. */ .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit { justify-content: center; align-items: center; padding: 28px 14px 56px; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-label--rail { writing-mode: horizontal-tb; transform: none; font-size: clamp(0.95rem, 1.1vw, 1.15rem); line-height: 1.15; max-width: 9ch; text-align: center; white-space: normal; } } /* Ira 2026-07-29 — stacked CTA (≤900px): must win over the base rail rules above (opacity:1 / vertical-rl). Keep one horizontal title. */ @media (max-width: 900px) { .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-label--rail { opacity: 0 !important; pointer-events: none; writing-mode: horizontal-tb; transform: none; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-label--wide { position: static !important; opacity: 1 !important; pointer-events: auto; max-width: none; font-size: 1.05rem; line-height: 1.2; white-space: normal; } } .g22-henna--clean .g22-cta__slice-text { margin: 0; max-width: 34ch; font-size: 1.08rem; line-height: 1.55; font-weight: 500; } .g22-henna--clean .g22-cta__slice--trial .g22-cta__slice-text { color: rgba(255, 255, 255, 0.72); } .g22-henna--clean .g22-cta__slice--tour .g22-cta__slice-text { color: rgba(26, 26, 26, 0.58); } .g22-henna--clean .g22-cta__details { width: 100%; max-width: 300px; /* Ira 2026-07-29: was margin-top:auto → empty oval under title. */ margin-top: 0; } .g22-henna--clean .g22-cta__details summary { list-style: none; cursor: pointer; } .g22-henna--clean .g22-cta__details summary::-webkit-details-marker { display: none; } .g22-henna--clean .g22-cta__submit { display: inline-flex; align-items: center; justify-content: center; /* Sitewide pill-button normalization (2026-07-22): 48px height / 24px horizontal padding / +0.02em tracking, matching .g22-clean__btn and .g22-about__cta above. */ min-height: 48px; width: 100%; padding: 0 24px; border: 0; border-radius: 999px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background-color var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)), color var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); } .g22-henna--clean .g22-cta__submit--yell { background: var(--g22-purple); color: #fff; box-shadow: var(--g22-shadow-sm); } /* Secondary summary toggle: ink outline, transparent fill — not a solid purple button (that role belongs to the primary purple slice only). */ .g22-henna--clean .g22-cta__submit--ink { background: transparent; color: var(--g22-ink); box-shadow: inset 0 0 0 2px var(--g22-ink); } @media (hover: hover) and (pointer: fine) { .g22-henna--clean .g22-cta__submit--yell:hover { background: var(--g22-purple-hot); transform: translateY(-1px); box-shadow: var(--g22-shadow-md); } .g22-henna--clean .g22-cta__submit--ink:hover { background: var(--g22-ink); color: var(--g22-card); transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--g22-ink); } } .g22-henna--clean .g22-cta__submit:active { transform: translateY(0) scale(0.98); } .g22-henna--clean .g22-cta__submit:focus-visible { outline: 3px solid var(--g22-purple); outline-offset: 3px; } /* Form enter/exit — 0fr ↔ 1fr; .is-revealed latched after open via rAF */ .g22-henna--clean .g22-cta__form-clip { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(8px); transition: grid-template-rows 220ms var(--g22-cta-ease), opacity 180ms var(--g22-cta-move), transform 220ms var(--g22-cta-ease); } .g22-henna--clean .g22-cta__form-clip.is-revealed { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); } .g22-henna--clean .g22-cta__form { overflow: hidden; min-height: 0; margin-top: 14px; padding: 16px; border-radius: var(--g22-r-lg); background: var(--g22-card); color: var(--g22-ink); } .g22-henna--clean .g22-cta__form label { font-family: var(--g22-font-label); font-size: var(--g22-fs-label); letter-spacing: var(--g22-tracking-label); text-transform: uppercase; color: var(--g22-ink-mute); } .g22-henna--clean .g22-cta__form input, .g22-henna--clean .g22-cta__form textarea, .g22-henna--clean .g22-cta__form select { background: var(--g22-card); color: var(--g22-ink); border: 1px solid var(--g22-line); border-radius: var(--g22-r-md); } .g22-henna--clean .g22-cta__form input:focus-visible, .g22-henna--clean .g22-cta__form textarea:focus-visible, .g22-henna--clean .g22-cta__form select:focus-visible { outline: 0; border-color: var(--g22-purple); box-shadow: 0 0 0 3px var(--g22-purple-14); } .g22-henna--clean .g22-cta__form .g22-form__notice--error, .g22-henna--clean .g22-cta__form .g22-form__field-error { color: var(--g22-error); } /* Real submit button inside the slice form: purple primary action. */ .g22-henna--clean .g22-cta__form button { min-height: 48px; border: 0; border-radius: var(--g22-r-pill); background: var(--g22-purple); color: #fff; padding: 0 24px; font-family: var(--g22-font-body); font-size: 0.95rem; font-weight: 700; transition: background-color var(--g22-dur-quick) var(--g22-ease-out); } .g22-henna--clean .g22-cta__form button:hover { background: var(--g22-purple-hot); } .g22-henna--clean .g22-cta__form button:focus-visible { outline: 3px solid var(--g22-purple); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .g22-henna--clean .g22-cta__display, .g22-henna--clean .g22-cta__lede, .g22-henna--clean .g22-cta__slices, .g22-henna--clean .g22-cta__slice, .g22-henna--clean .g22-cta__slice-body, .g22-henna--clean .g22-cta__slice-label, .g22-henna--clean .g22-cta__submit, .g22-henna--clean .g22-cta__form-clip { opacity: 1 !important; transform: none !important; transition: none !important; } } @media (max-width: 900px) { .g22-henna--clean .g22-cta { min-height: 0; align-items: stretch; padding-block: clamp(56px, 9vh, 80px); background: #e5e5e5; } .g22-henna--clean .g22-cta__mast { grid-template-columns: 1fr; gap: 16px; } .g22-henna--clean .g22-cta__display { font-size: clamp(2.3rem, 9vw, 3.2rem); max-width: 14ch; } .g22-henna--clean .g22-cta__slices, .g22-henna--clean .g22-cta__slices[data-active="tour"] { grid-template-columns: 1fr; min-height: 0; gap: 12px; } .g22-henna--clean .g22-cta__slice, .g22-henna--clean .g22-cta__slice:not(.is-collapsed) { grid-template-rows: auto 1fr; } .g22-henna--clean .g22-cta__slice.is-collapsed { grid-template-rows: auto 0fr; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit { height: auto; align-items: center; justify-content: flex-start; padding: 24px 76px 24px 24px; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit::after { content: "+"; left: auto; right: 24px; top: 50%; bottom: auto; transform: translateY(-50%) scale(1); } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit:focus-visible::after { opacity: 1; transform: translateY(-50%) scale(1.1) rotate(90deg); } .g22-henna--clean .g22-cta__slice-label--rail { display: none; } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-label--wide { opacity: 1; pointer-events: auto; max-width: 12ch; font-size: clamp(1.4rem, 6vw, 1.8rem); } .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-body { opacity: 0; pointer-events: none; } .g22-henna--clean .g22-cta__details { max-width: none; } } @media (max-width: 900px) and (hover: hover) and (pointer: fine) { .g22-henna--clean .g22-cta__slice.is-collapsed:hover .g22-cta__slice-hit::after { opacity: 1; transform: translateY(-50%) scale(1.1) rotate(90deg); } } /* ---------- Google reviews — quiet studio, matches homepage ---------- */ body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan { --g22-rev-ease: cubic-bezier(0.05, 0.7, 0.1, 1); --g22-rev-move: cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: clip; padding-top: clamp(62px, 8vw, 92px) !important; padding-bottom: clamp(48px, 5vw, 64px) !important; padding-inline: 0 !important; background: #e5e5e5 !important; color: #1a1a1a; border-top: 1px solid rgba(26, 26, 26, 0.12); font-family: Manrope, sans-serif; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__mosaic-shell, body:has(.g22-henna--clean) .g22-google-reviews--mosaic .g22-google-reviews__mosaic-shell { width: min(1120px, calc(100% - 64px)); max-width: none; margin-inline: auto; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__ribbon, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__portrait, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__loop, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__phone, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-henna__marker-svg, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-henna__label-dot { display: none !important; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 56px); align-items: end; max-width: none; margin: 0 0 clamp(36px, 5vw, 56px); text-align: left; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__label { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-start; margin: 0 0 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26, 26, 26, 0.48); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__label::before { content: ""; width: 22px; height: 2px; background: var(--g22-yellow); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__label::after { content: none; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__heading { margin: 0; max-width: 12ch; width: 100%; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; color: #1a1a1a; overflow-wrap: normal; word-break: normal; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head-copy .g22-henna__lead, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__lead { margin: 16px 0 0; max-width: 42ch; font-size: 1.05rem; line-height: 1.6; font-weight: 500; color: rgba(26, 26, 26, 0.62); } /* Rating pill alone on the right of the header row — not stacked under lead. */ body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head-aside { display: flex; justify-content: flex-end; align-items: flex-end; padding-bottom: 2px; } /* Google-branded review badge (progresivo-style): white pill with the multicolor "G", rating and gold stars — no review-count text. */ /* Reusable star-rating component (template-parts/svg-stars.php) — replaces the old "★★★★★" glyph text everywhere it appeared on the reviews block. */ .g22-stars { display: inline-flex; align-items: center; gap: 2px; } .g22-stars__star { width: 0.95em; height: 0.95em; fill: var(--g22-yellow); flex: none; } .g22-stars__star.is-empty { fill: var(--g22-line); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__summary { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; margin: 0; padding: 10px 16px; border-radius: var(--g22-r-pill); border: 1px solid var(--g22-line-soft); background: var(--g22-card); box-shadow: var(--g22-shadow-sm); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__glogo { display: inline-flex; flex: none; width: 20px; height: 20px; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__glogo svg { display: block; width: 100%; height: 100%; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__summary strong { font-size: 1.4rem; letter-spacing: -0.02em; font-weight: 700; color: var(--g22-ink); line-height: 1; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__stars { font-size: 1.05rem; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__gsource { flex-basis: auto; font-size: 0.8rem; font-weight: 500; color: var(--g22-ink-mute); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__stage { display: block !important; position: relative !important; min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100% !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; position: static !important; overflow: visible !important; transform: none !important; border: 0 !important; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:first-child, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:nth-child(2) { position: static !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; display: flex; flex-direction: column; width: auto !important; min-width: 0; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: clamp(22px, 2.4vw, 28px); border: 0; border-radius: var(--g22-r-lg); /* Item 6 (redesign pass): card bg (#f0f0f0) sat almost flush against the section bg (#e5e5e5) — a ~2% grey delta with no shadow, so cards visually merged into the section. White + a soft shadow gives them real separation without waiting for :hover. */ background: var(--g22-card); box-shadow: var(--g22-shadow-sm) !important; color: var(--g22-ink); transition: background-color var(--g22-dur-quick) var(--g22-ease), border-color var(--g22-dur-quick) var(--g22-ease), opacity var(--g22-dur-std) var(--g22-ease-enter), transform var(--g22-dur-std) var(--g22-ease-enter), box-shadow var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); cursor: default; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:hover, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:focus-within { background: var(--g22-card); border-color: transparent; box-shadow: var(--g22-shadow-md) !important; transform: translateY(-2px); transition: background-color var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)), border-color var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--g22-t-fast, 100ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__quote-mark, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-tag { display: none !important; } /* Google-style card: avatar + name/date, gold stars, plain review text. */ body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-author { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; } /* Author avatar: purple-08 wash + purple mono initials — a tint, not a solid fill, so it stays a quiet identity mark rather than a button. */ body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card .g22-google-reviews__mark, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:nth-child(2) .g22-google-reviews__mark, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:nth-child(even) .g22-google-reviews__mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--g22-r-pill); background: var(--g22-purple-08); color: var(--g22-purple); font-family: var(--g22-font-label); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-who { display: grid; gap: 2px; min-width: 0; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-who b { font-size: 0.95rem; font-weight: 700; line-height: 1.25; color: var(--g22-ink); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-date { font-family: var(--g22-font-label); font-size: var(--g22-fs-label); letter-spacing: var(--g22-tracking-label); text-transform: uppercase; line-height: 1.3; color: var(--g22-ink-mute); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-stars { margin: 0 0 12px; font-size: 1rem; line-height: 1; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-quote, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:first-child .g22-google-reviews__fan-quote { display: block; flex: 1; margin: 0; font-size: 1.02rem; line-height: 1.55; font-weight: 500; color: var(--g22-ink-soft); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card footer { display: none; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__foot { display: flex; justify-content: flex-start; margin-top: clamp(28px, 4vw, 40px); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__all-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.02em; color: var(--g22-purple); text-decoration: none; border-bottom: 1px solid rgba(67, 41, 128, 0.35); padding-bottom: 2px; transition: color var(--g22-dur-quick) var(--g22-ease), border-color var(--g22-dur-quick) var(--g22-ease); cursor: pointer; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__all-link:hover, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__all-link:focus-visible { color: var(--g22-ink); border-color: var(--g22-ink-mute); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__all-link:focus-visible { outline: 3px solid var(--g22-yellow); outline-offset: 4px; } @media (max-width: 860px) { body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__mosaic-shell { width: min(100% - 32px, 680px); } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan { grid-template-columns: 1fr; gap: 20px; } /* * Mobile UX spec: narrow screens should use a horizontal swipeable row of * upright review cards (overflow-x + scroll-snap). This studio variant * was switching the fan back to grid/stacking, contradicting the copy. * Re-enable the intended horizontal carousel behavior here. */ body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan { display: flex !important; flex-direction: row; justify-content: flex-start; overflow-x: auto !important; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 24px 12px; margin: 0 -24px; -webkit-overflow-scrolling: touch; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card { flex: 0 0 78%; scroll-snap-align: center; transform: none !important; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head-aside { justify-content: flex-start; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__heading { max-width: 11ch; /* font-size: shared H2 clamp already floors at 28px under ~875px. */ } } @media (prefers-reduced-motion: reduce) { body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__all-link { transition: none !important; } } body:has(.g22-henna--clean) .g22-footer { /* The footer sits outside the page skin that owns the typography tokens. Keep its Manrope family local so inherited tokens can never fall back to the browser default or introduce a second, technical-looking face. */ --g22-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --g22-font-label: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; border-top: 0; position: relative; z-index: 101; overflow: hidden; margin-top: clamp(40px, 4vw, 56px); font-family: var(--g22-font-body); font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; } /* Quiet utility footer — signature lives in the hero orbit, not here. */ body:has(.g22-henna--clean) .g22-footer__wordmark, .g22-orbit--footer, .g22-frame-mark--footer { display: none !important; } body:has(.g22-henna--clean) .g22-footer > .g22-footer__inner { max-width: min(1120px, calc(100% - 48px)); padding: clamp(48px, 6vw, 72px) 0 clamp(28px, 3vw, 40px); } body:has(.g22-henna--clean) .g22-footer__top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 28px 40px; padding-bottom: clamp(28px, 3.5vw, 40px); } body:has(.g22-henna--clean) .g22-footer__brand { display: grid; gap: 12px; max-width: 36ch; } body:has(.g22-henna--clean) .g22-footer__brand-link { display: inline-flex; width: fit-content; } body:has(.g22-henna--clean) .g22-footer__logo-image { max-height: 40px; width: auto; } body:has(.g22-henna--clean) .g22-footer__tagline { margin: 0; max-width: 34ch; font-family: var(--g22h-font, "Manrope", sans-serif); font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.72); } body:has(.g22-henna--clean) .g22-footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } body:has(.g22-henna--clean) .g22-footer__content { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 3.5vw, 40px) 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } body:has(.g22-henna--clean) .g22-footer__label { margin: 0 0 14px; color: var(--g22-yellow, #ffd141); font-family: var(--g22-font-body); font-size: 0.75rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; opacity: 1; } body:has(.g22-henna--clean) .g22-footer__label::before { width: 5px; height: 5px; flex: 0 0 5px; background: var(--g22-yellow, #ffd141); opacity: 0.85; } body:has(.g22-henna--clean) .g22-footer__sitemap ul { column-gap: 24px; row-gap: 0; } body:has(.g22-henna--clean) .g22-footer__sitemap a { align-items: center; width: fit-content; min-height: 44px; font-size: 0.95rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72); } body:has(.g22-henna--clean) .g22-footer__sitemap a:hover, body:has(.g22-henna--clean) .g22-footer__sitemap a:focus-visible { color: #fff; } body:has(.g22-henna--clean) .g22-footer__contacts { gap: 14px; } body:has(.g22-henna--clean) .g22-footer__contacts > div > span { margin-bottom: 4px; font-family: var(--g22-font-body); font-size: 0.75rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.68); } body:has(.g22-henna--clean) .g22-footer__contacts p { font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); } /* Map: quiet text link, not a second pill CTA. Beat g22-buttons.css shared box + !important radius. */ body:has(.g22-henna--clean) .g22-footer__map { display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 6px; width: fit-content; min-height: 44px; margin-top: 2px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.78) !important; text-decoration: underline; text-decoration-color: rgba(255, 209, 65, 0.45); text-underline-offset: 3px; transform: none !important; } body:has(.g22-henna--clean) .g22-footer__map:hover, body:has(.g22-henna--clean) .g22-footer__map:focus-visible { color: #fff !important; text-decoration-color: var(--g22-yellow, #ffd141); background: transparent !important; border-color: transparent !important; box-shadow: none !important; transform: none !important; } /* Socials: compact wrap, no heavy rule stack */ body:has(.g22-henna--clean) .g22-footer__social-list { display: flex; flex-wrap: wrap; gap: 8px 18px; } body:has(.g22-henna--clean) .g22-footer__social { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); } body:has(.g22-henna--clean) .g22-footer__social:hover, body:has(.g22-henna--clean) .g22-footer__social:focus-visible { color: #fff; } body:has(.g22-henna--clean) .g22-footer__bottom { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); } body:has(.g22-henna--clean) .g22-footer__bottom p, body:has(.g22-henna--clean) .g22-footer__legal a { font-family: var(--g22-font-body); font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.68); } body:has(.g22-henna--clean) .g22-footer a:focus-visible, body:has(.g22-henna--clean) .g22-footer button:focus-visible { outline: 3px solid var(--g22-yellow, #ffd141); outline-offset: 4px; } body:has(.g22-henna--clean) .g22-footer__legal a:hover, body:has(.g22-henna--clean) .g22-footer__legal a:focus-visible { color: rgba(255, 255, 255, 0.78); } /* Reviews accent word — ink only, no yellow underline on homepage. */ body:has(.g22-henna--clean) .g22-henna__marker--quiet { position: relative; display: inline; background: none; box-shadow: none; } body:has(.g22-henna--clean) .g22-henna__marker--quiet::after { content: none; display: none; } body:has(.g22-henna--clean) .g22-henna__marker--quiet .g22-henna__marker-svg { display: none; } @media (max-width: 860px) { body:has(.g22-henna--clean) .g22-footer > .g22-footer__inner { max-width: min(100% - 32px, 680px); } body:has(.g22-henna--clean) .g22-footer__top { align-items: flex-start; flex-direction: column; } body:has(.g22-henna--clean) .g22-footer__actions { width: 100%; } body:has(.g22-henna--clean) .g22-footer__cta, body:has(.g22-henna--clean) .g22-footer__consult { flex: 1 1 auto; font-size: 1rem; } body:has(.g22-henna--clean) .g22-footer__content { grid-template-columns: 1fr; gap: 24px; } body:has(.g22-henna--clean) .g22-footer__sitemap ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } body:has(.g22-henna--clean) .g22-footer__sitemap a, body:has(.g22-henna--clean) .g22-footer__contacts p, body:has(.g22-henna--clean) .g22-footer__map, body:has(.g22-henna--clean) .g22-footer__social { font-size: 1rem; } } /* ---------- Mobile ---------- */ @media (max-width: 860px) { .g22-henna--clean { --g22-shell: min(100% - 32px, 680px); } /* The hero owns its own mobile stack (see the hero block above). */ .g22-henna--clean .g22-ph--hero, .g22-henna--clean .g22-clean__photo { aspect-ratio: 5 / 4; max-height: none; } .g22-henna--clean .g22-clean__brand { font-size: clamp(2.4rem, 11vw, 3.1rem); } .g22-henna--clean .g22-clean__h1-line { max-width: none; } .g22-henna--clean .g22-clean__row { flex-direction: column; align-items: flex-start; } .g22-henna--clean .g22-clean__btn { width: 100%; } } /* ---------- Reviews — Premium rise (same gate as other sections) ---------- */ body:has(.g22-henna--clean) #reviews .g22-google-reviews__head, body:has(.g22-henna--clean) #reviews .g22-google-reviews__fan-card, body:has(.g22-henna--clean) #reviews .g22-google-reviews__all-link { opacity: 0; transform: translateY(var(--g22-rise)); transition: opacity var(--g22-dur-std) var(--g22-ease-enter), transform var(--g22-dur-std) var(--g22-ease-enter), background-color var(--g22-dur-quick) var(--g22-ease), border-color var(--g22-dur-quick) var(--g22-ease); } /* * The .is-in reveal for reviews lives in the motion layer below (one system, * one stagger token). The per-nth-child delays that used to sit here were a * second, older choreography with the same specificity — the two tied and the * cascade order decided the timing, which is how the fan ended up entering on * 40/100/160/220/280ms while every other block ran on the stagger token. * .is-in only ever exists when the engine is alive, so nothing needs it here. */ /* * Insurance: every reveal-gated block on the homepage (below) depends * entirely on the IntersectionObserver in home-why-scroll.js reaching its * section and adding .is-in — #reviews, .g22-learn, .g22-about, .g22-why, * .g22-news, .g22-cta all start at opacity: 0 and wait on that one class. A * tall/short section, a fast scroll past the trigger point, or any device * quirk that keeps the ratio under threshold leaves that content stuck * invisible forever with no scroll-independent way out (confirmed live on * #why on a fast scroll). Hero is excluded — it lands on .is-live from load, * not from scroll, so it is never at risk the same way. * * This single animation is not gated by scroll at all: it fires from paint * and guarantees full visibility a few seconds after load no matter what the * observer does. If .is-in lands first, this only confirms the same end * state (opacity: 1) — no visible change. One shared keyframe, applied to * every at-risk selector, so there is one thing to reason about, not one * per section. */ @keyframes g22-reveal-fallback-in { to { opacity: 1; } } body:has(.g22-henna--clean) #reviews .g22-google-reviews__head, body:has(.g22-henna--clean) #reviews .g22-google-reviews__fan-card, body:has(.g22-henna--clean) #reviews .g22-google-reviews__all-link, .g22-henna--clean .g22-learn__display, .g22-henna--clean .g22-learn__lede, .g22-henna--clean .g22-learn__btn, .g22-henna--clean .g22-about [data-g22-about-reveal], .g22-henna--clean .g22-about [data-g22-about-magnetic], .g22-henna--clean .g22-about__pillar, .g22-henna--clean .g22-why__head, .g22-henna--clean .g22-news__head, .g22-henna--clean .g22-news__item, .g22-henna--clean .g22-news__item .g22-news__card, .g22-henna--clean .g22-cta__display, .g22-henna--clean .g22-cta__lede, .g22-henna--clean .g22-cta__slices { animation: g22-reveal-fallback-in 1ms linear 2.4s forwards; } @media (prefers-reduced-motion: reduce) { body:has(.g22-henna--clean) #reviews .g22-google-reviews__head, body:has(.g22-henna--clean) #reviews .g22-google-reviews__fan-card, body:has(.g22-henna--clean) #reviews .g22-google-reviews__all-link, .g22-henna--clean .g22-learn__display, .g22-henna--clean .g22-learn__lede, .g22-henna--clean .g22-learn__btn, .g22-henna--clean .g22-about [data-g22-about-reveal], .g22-henna--clean .g22-about [data-g22-about-magnetic], .g22-henna--clean .g22-about__pillar, .g22-henna--clean .g22-why__head, .g22-henna--clean .g22-news__head, .g22-henna--clean .g22-news__item, .g22-henna--clean .g22-news__item .g22-news__card, .g22-henna--clean .g22-cta__display, .g22-henna--clean .g22-cta__lede, .g22-henna--clean .g22-cta__slices { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } } /* ========================================================================== Motion layer — one writer: --g22-vis / --g22-scrub / --g22-enter / --g22-e* Active when JS boots (.g22-henna--clean[data-g22-motion]). Budget: opacity + transform only. No scroll-linked blur/filter. ========================================================================== */ .g22-henna--clean[data-g22-motion] { --g22-vis: 0; --g22-scrub: 0; --g22-enter: 1; --g22-rise: 18px; } /* -------------------------------------------------------------------------- Enter = one-shot, not a scroll slider. Every block used to bind opacity straight to --g22-vis with transition: none, i.e. the reveal was a linear function of wheel position: no curve, no settle, and the content dimmed again on the way out. That is what reads as cheap. Enters are now latched on .is-in (the engine never takes it off), run on the expo-out token, and stagger by rank. Scrub stays only where the motion is honestly continuous: the hero frame, the progress rails, the pillar cascade. -------------------------------------------------------------------------- */ /* Learn — title → lede → CTA */ .g22-henna--clean[data-g22-motion] .g22-learn__display, .g22-henna--clean[data-g22-motion] .g22-learn__lede, .g22-henna--clean[data-g22-motion] .g22-learn__btn { opacity: 0; transform: translate3d(0, var(--g22-rise), 0); transition: opacity var(--g22-dur-slow) var(--g22-ease-enter), transform var(--g22-dur-slow) var(--g22-ease-enter); transition-delay: calc(var(--g22-i, 0) * var(--g22-stagger)); filter: none; clip-path: none; will-change: opacity, transform; } .g22-henna--clean[data-g22-motion] .g22-learn__lede { --g22-i: 1; } .g22-henna--clean[data-g22-motion] .g22-learn__btn { --g22-i: 2; } .g22-henna--clean[data-g22-motion] .g22-learn.is-in .g22-learn__display, .g22-henna--clean[data-g22-motion] .g22-learn.is-in .g22-learn__lede, .g22-henna--clean[data-g22-motion] .g22-learn.is-in .g22-learn__btn { opacity: 1; transform: translate3d(0, 0, 0); } /* Once landed, drop the compositor hint — a permanent will-change on every revealed node keeps layers alive for the whole session. */ .g22-henna--clean[data-g22-motion] .g22-learn.is-in .g22-learn__display { will-change: auto; } /* About — mast → lead → pillars → CTA */ .g22-henna--clean[data-g22-motion] .g22-about [data-g22-about-reveal]:not([data-g22-about-magnetic]) { opacity: 0; transform: translate3d(0, var(--g22-rise), 0); transition: opacity var(--g22-dur-slow) var(--g22-ease-enter), transform var(--g22-dur-slow) var(--g22-ease-enter); transition-delay: calc(var(--g22-i, 0) * var(--g22-stagger)); will-change: opacity, transform; } .g22-henna--clean[data-g22-motion] .g22-about.is-in [data-g22-about-reveal]:not([data-g22-about-magnetic]) { opacity: 1; transform: translate3d(0, 0, 0); } /* The magnetic CTA keeps transform for its spring — fade it in only. */ .g22-henna--clean[data-g22-motion] .g22-about [data-g22-about-magnetic] { opacity: 0; transition: opacity var(--g22-dur-std) var(--g22-ease-enter); transition-delay: calc(3 * var(--g22-stagger)); will-change: transform, opacity; } .g22-henna--clean[data-g22-motion] .g22-about.is-in [data-g22-about-magnetic] { opacity: 1; } .g22-henna--clean[data-g22-motion] .g22-about__lead { --g22-i: 1; } .g22-henna--clean[data-g22-motion] .g22-about__pillars { opacity: 1; transform: none; } /* * Pillars keep a cascade — but off the section enter, not off wheel position. * Per-property delays: the enter pair waits its turn in the stagger, while * hover feedback (background, shadow) fires instantly. A single shared * transition-delay would make the third pillar's hover lag by ~300ms. */ .g22-henna--clean[data-g22-motion] .g22-about__pillar { opacity: 0; transform: translate3d(0, 16px, 0); transition-property: opacity, transform, background-color, box-shadow; transition-duration: var(--g22-dur-std), var(--g22-dur-std), var(--g22-dur-quick), var(--g22-dur-quick); transition-timing-function: var(--g22-ease-enter), var(--g22-ease-enter), var(--g22-ease), var(--g22-ease); transition-delay: calc(140ms + (var(--g22-about-i, 0) * var(--g22-stagger))), calc(140ms + (var(--g22-about-i, 0) * var(--g22-stagger))), 0ms, 0ms; } .g22-henna--clean[data-g22-motion] .g22-about.is-in .g22-about__pillar { opacity: 1; transform: translate3d(0, 0, 0); } .g22-henna--clean[data-g22-motion] .g22-about__pillar-rail { transform: scaleY(0); transform-origin: top center; transition: transform 320ms var(--g22-ease-enter); animation: none; } .g22-henna--clean[data-g22-motion] .g22-about__pillar.is-active .g22-about__pillar-rail, .g22-henna--clean[data-g22-motion] .g22-about__pillar:hover .g22-about__pillar-rail, .g22-henna--clean[data-g22-motion] .g22-about__pillar:focus-visible .g22-about__pillar-rail { transform: scaleY(1); opacity: 1; animation: none; } /* Hero — the enter is latched on .is-live (see the hero block above); the only thing the engine drives here is the slow scrub on the photograph itself. */ .g22-henna--clean[data-g22-motion] .g22-hero__shot img, .g22-henna--clean[data-g22-motion] .g22-hero__shot picture, .g22-henna--clean[data-g22-motion] .g22-hero__shot .g22-ph { transform: scale(calc(1.02 - 0.01 * var(--g22-scrub, 0))); transform-origin: 78% 50%; filter: none; } /* Design audit phase 3, item 5: layered depth — the photo travels slower * than the page under it as the reader scrolls past the hero. No new JS: * --g22-scrub already exists for the zoom above, same value just also * feeds a translateY here. Desktop + fine pointer only, per the brief — * mobile hero is a short stacked photo block already fighting for space * (phase 2, item 6), an extra moving layer there is the wrong trade. */ @media (hover: hover) and (pointer: fine) and (min-width: 1025px) { .g22-henna--clean[data-g22-motion] .g22-hero__shot img, .g22-henna--clean[data-g22-motion] .g22-hero__shot picture, .g22-henna--clean[data-g22-motion] .g22-hero__shot .g22-ph { transform: scale(calc(1.03 - 0.015 * var(--g22-scrub, 0))) translateY(calc(var(--g22-scrub, 0) * -18px)); transform-origin: 78% 50%; } } /* News — head, then the deck deals card by card */ .g22-henna--clean[data-g22-motion] .g22-news__head { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--g22-dur-slow) var(--g22-ease-enter), transform var(--g22-dur-slow) var(--g22-ease-enter); } .g22-henna--clean[data-g22-motion] .g22-news.is-in .g22-news__head { opacity: 1; transform: translate3d(0, 0, 0); } .g22-henna--clean[data-g22-motion] .g22-news__item .g22-news__card { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.98); transition-property: opacity, transform, box-shadow; transition-duration: var(--g22-dur-slow), var(--g22-dur-slow), var(--g22-dur-quick); transition-timing-function: var(--g22-ease-enter), var(--g22-ease-enter), var(--g22-ease); transition-delay: calc(120ms + (var(--g22-news-i, 0) * var(--g22-stagger))), calc(120ms + (var(--g22-news-i, 0) * var(--g22-stagger))), 0ms; will-change: opacity, transform; } .g22-henna--clean[data-g22-motion] .g22-news.is-in .g22-news__item .g22-news__card { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* CTA — title → lede → accordion. This is the conversion block: it lands and stays landed, it never dims back out while the visitor reads it. */ .g22-henna--clean[data-g22-motion] .g22-cta__display, .g22-henna--clean[data-g22-motion] .g22-cta__lede, .g22-henna--clean[data-g22-motion] .g22-cta__slices { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--g22-dur-slow) var(--g22-ease-enter), transform var(--g22-dur-slow) var(--g22-ease-enter); transition-delay: calc(var(--g22-i, 0) * var(--g22-stagger)); filter: none; } .g22-henna--clean[data-g22-motion] .g22-cta__lede { --g22-i: 1; } .g22-henna--clean[data-g22-motion] .g22-cta__slices { --g22-i: 2; /* The slice swap keeps its own curve — it is an interaction, not an enter. The delay is restated after the shorthand: `transition:` resets transition-delay to 0s, which would drop this block out of the stagger. */ transition: opacity var(--g22-dur-slow) var(--g22-ease-enter), transform var(--g22-dur-slow) var(--g22-ease-enter), grid-template-columns var(--g22-cta-swap, 220ms) var(--g22-cta-ease, cubic-bezier(0.16, 1, 0.3, 1)); transition-delay: calc(var(--g22-i, 0) * var(--g22-stagger)), calc(var(--g22-i, 0) * var(--g22-stagger)), 0ms; transform: translate3d(0, 16px, 0); } /* * The delay is restated on the landed state on purpose. The pre-motion CTA * rules carry their own `.g22-cta.is-in` delays (0/60/120ms) at a higher * specificity than the motion rules above, so without this the CTA silently * fell back to the old choreography while every other block ran on the token. */ .g22-henna--clean[data-g22-motion] .g22-cta.is-in .g22-cta__display, .g22-henna--clean[data-g22-motion] .g22-cta.is-in .g22-cta__lede, .g22-henna--clean[data-g22-motion] .g22-cta.is-in .g22-cta__slices { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: calc(var(--g22-i, 0) * var(--g22-stagger)); } .g22-henna--clean[data-g22-motion] .g22-cta.is-in .g22-cta__slices { transition-delay: calc(var(--g22-i, 0) * var(--g22-stagger)), calc(var(--g22-i, 0) * var(--g22-stagger)), 0ms; transform: translate3d(0, 0, 0); } /* Why — head enters once; the steps stay scrub-lit, because the rail progress IS the content here (the reader's position in the list is the message). */ .g22-henna--clean[data-g22-motion] .g22-why__head { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity var(--g22-dur-slow) var(--g22-ease-enter), transform var(--g22-dur-slow) var(--g22-ease-enter); } .g22-henna--clean[data-g22-motion] .g22-why.is-in .g22-why__head { opacity: 1; transform: translate3d(0, 0, 0); } .g22-henna--clean[data-g22-motion] .g22-why__step { opacity: 1; transform: translate3d(0, 0, 0); transition: transform var(--g22-t-med, 200ms) var(--g22-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); } /* Touch/coarse pointers don't drive a reliable scroll-spotlight (no hover, inconsistent scroll velocity) — ship the list fully legible at rest there instead of depending on the scrub effect. */ @media (hover: none), (pointer: coarse) { .g22-henna--clean[data-g22-motion] .g22-why__step { opacity: 1; transform: none; } } /* Reviews — head, then the fan deals in */ body:has(.g22-henna--clean[data-g22-motion]) #reviews .g22-google-reviews__head, body:has(.g22-henna--clean[data-g22-motion]) #reviews .g22-google-reviews__fan-card, body:has(.g22-henna--clean[data-g22-motion]) #reviews .g22-google-reviews__all-link { opacity: 0; transform: translate3d(0, var(--g22-rise), 0); filter: none; transition: opacity var(--g22-dur-slow) var(--g22-ease-enter), transform var(--g22-dur-slow) var(--g22-ease-enter); transition-delay: calc(var(--g22-i, 0) * var(--g22-stagger)); } body:has(.g22-henna--clean[data-g22-motion]) #reviews .g22-google-reviews__fan-card:nth-child(1) { --g22-i: 1; } body:has(.g22-henna--clean[data-g22-motion]) #reviews .g22-google-reviews__fan-card:nth-child(2) { --g22-i: 2; } body:has(.g22-henna--clean[data-g22-motion]) #reviews .g22-google-reviews__fan-card:nth-child(3) { --g22-i: 3; } body:has(.g22-henna--clean[data-g22-motion]) #reviews .g22-google-reviews__fan-card:nth-child(4) { --g22-i: 4; } body:has(.g22-henna--clean[data-g22-motion]) #reviews .g22-google-reviews__all-link { --g22-i: 5; } body:has(.g22-henna--clean[data-g22-motion]) #reviews.is-in .g22-google-reviews__head, body:has(.g22-henna--clean[data-g22-motion]) #reviews.is-in .g22-google-reviews__fan-card, body:has(.g22-henna--clean[data-g22-motion]) #reviews.is-in .g22-google-reviews__all-link { opacity: 1; transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { .g22-henna--clean[data-g22-motion] .g22-learn__display, .g22-henna--clean[data-g22-motion] .g22-learn__lede, .g22-henna--clean[data-g22-motion] .g22-learn__btn, .g22-henna--clean[data-g22-motion] .g22-about [data-g22-about-reveal], .g22-henna--clean[data-g22-motion] .g22-about__pillar, .g22-henna--clean[data-g22-motion] .g22-cta__display, .g22-henna--clean[data-g22-motion] .g22-cta__lede, .g22-henna--clean[data-g22-motion] .g22-cta__slices, .g22-henna--clean[data-g22-motion] .g22-news__head, .g22-henna--clean[data-g22-motion] .g22-news__item .g22-news__card, .g22-henna--clean[data-g22-motion] .g22-why__head, .g22-henna--clean[data-g22-motion] .g22-why__step, .g22-henna--clean[data-g22-motion] .g22-hero__title, .g22-henna--clean[data-g22-motion] .g22-hero__brand, .g22-henna--clean[data-g22-motion] .g22-hero__dash, .g22-henna--clean[data-g22-motion] .g22-hero__line, .g22-henna--clean[data-g22-motion] .g22-hero__lede, .g22-henna--clean[data-g22-motion] .g22-hero__actions, body:has(.g22-henna--clean[data-g22-motion]) #reviews .g22-google-reviews__head, body:has(.g22-henna--clean[data-g22-motion]) #reviews .g22-google-reviews__fan-card, body:has(.g22-henna--clean[data-g22-motion]) #reviews .g22-google-reviews__all-link { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; animation: none !important; letter-spacing: inherit !important; } .g22-henna--clean[data-g22-motion] .g22-about__pillar.is-active .g22-about__pillar-rail { animation: none; } } /* ---------- Failsafe: the motion engine never took over ---------- Every enter state above starts at opacity: 0 and is only lifted by home-why-scroll.js. If that script is blocked, 404s or throws, the visitor would meet blank sections. The bootstrap in header.php then flags .g22-motion-off (and

: without JS it still opens, so the clip must open with it — otherwise the lead form is a dead click. */ .g22-henna--clean.g22-motion-off details[open] .g22-cta__form-clip { grid-template-rows: 1fr !important; opacity: 1 !important; transform: none !important; transition: none !important; } /* No slice is active without JS — show every offer instead of the collapsed rail. */ .g22-henna--clean.g22-motion-off .g22-cta__slice-label--rail { display: none; } /* === G22 micro-interactions === * Disney-principles-as-UI pass: hover/tap feedback, overlapping/secondary * action, anticipation-and-settle on state changes. Everything here reads * fast on purpose — nothing runs longer than 300ms, most of it is 100-200ms. * * Tokens live on .g22-henna--clean (the effective "root" of this homepage * variant, not the document :root — the CTA pill, arrows, cards and why-list * below are all its descendants). Where a target selector sits OUTSIDE that * scope (the header/nav bar renders before .g22-henna--clean opens in the * DOM, so it can't inherit these custom properties), the rule ships with an * identical literal fallback inline — see nav-taste.css for those and the * report for why they live there instead of being duplicated here. */ .g22-henna--clean { --g22-t-fast: 100ms; --g22-t-med: 200ms; --g22-ease-snap: cubic-bezier(0.16, 1, 0.3, 1); --g22-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---------- 3. News cards — ghost "22" mark, overlapping action ---------- * .g22-news__card already lifts + shadows on hover (see the rule above, kept * as-is — it predates this pass and already matches the -4px/shadow spec). * The only thing missing is the ghost digit reacting a beat behind the card, * which only exists on the no-thumbnail fallback variant (.g22-news__media--ph). */ .g22-henna--clean .g22-news__media-mark { transition: transform var(--g22-t-med) var(--g22-ease-snap) 40ms, opacity var(--g22-t-med) var(--g22-ease-snap) 40ms; } .g22-henna--clean a.g22-news__card:hover .g22-news__media-mark, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__media-mark { transform: translateY(-6px); opacity: 0.16; } /* ---------- 4. Review cards — lift + secondary avatar scale ---------- * The fan-card hover/focus-within rule above already carries the -2px lift, * shadow and retimed transition. Only the avatar mark needs its own delayed * secondary motion (overlapping action). */ body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card .g22-google-reviews__mark { transition: transform var(--g22-t-fast) var(--g22-ease-snap) 40ms; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:hover .g22-google-reviews__mark, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:focus-within .g22-google-reviews__mark { transform: scale(1.05); } /* ---------- 5. Why — active step accent + dot pulse ---------- * The base [data-g22-motion] rule drives a continuous scroll-linked * translate3d(0, Ypx, 0) via --g22-vis. At is-active, --g22-vis is already 1 * (Y settled at 0), so swapping the transform here for a fixed lateral * accent doesn't fight the scrub — it reads as the step "stepping forward". */ .g22-henna--clean[data-g22-motion] .g22-why__step.is-active { transform: translate3d(4px, 0, 0); transition: transform var(--g22-t-med) var(--g22-spring); } /* ---------- 8. Focus-visible safety net ---------- * Component-level focus-visible rules already exist for most interactive * elements (higher specificity than this, so they keep winning) — this is * the default for anything not already covered: hero/about/news pills, * cta submits, why/reviews links, and anything added later. Purple reads * better on the light #e5e5e5/#fff surfaces used across the page; yellow is * reserved for the few elements that are already purple-on-purple. */ .g22-henna--clean a:focus-visible, .g22-henna--clean button:focus-visible, .g22-henna--clean summary:focus-visible, .g22-henna--clean [tabindex]:focus-visible { outline: 3px solid var(--g22-purple); outline-offset: 3px; transition: outline-offset var(--g22-t-fast) var(--g22-ease-snap); } .g22-henna--clean .g22-cta__slice--trial :focus-visible, .g22-henna--clean .g22-cta__slice--trial.is-collapsed .g22-cta__slice-hit:focus-visible { outline-color: var(--g22-yellow); } /* ---------- 9. Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .g22-henna--clean .g22-news__media-mark { transition: opacity var(--g22-t-med) linear; } .g22-henna--clean a.g22-news__card:hover .g22-news__media-mark, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__media-mark { transform: none; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:hover, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:focus-within { transform: none !important; } body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:hover .g22-google-reviews__mark, body:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:focus-within .g22-google-reviews__mark { transform: none; } .g22-henna--clean[data-g22-motion] .g22-why__step.is-active { transform: none !important; } .g22-henna--clean .g22-clean__btn:hover, .g22-henna--clean .g22-clean__btn:focus-visible, .g22-henna--clean .g22-clean__btn:active, .g22-henna--clean .g22-clean__btn.is-press, .g22-henna--clean .g22-about__cta:hover, .g22-henna--clean .g22-about__cta:focus-visible, .g22-henna--clean .g22-about__cta:active, .g22-henna--clean .g22-about__cta.is-press, .g22-henna--clean .g22-news__all:hover, .g22-henna--clean .g22-news__all:focus-visible, .g22-henna--clean .g22-news__all:active, .g22-henna--clean .g22-cta__submit:hover, .g22-henna--clean .g22-cta__submit:active, .g22-henna--clean .g22-cta__slice.is-collapsed:hover, .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit::after { transform: none !important; } .g22-henna--clean a:focus-visible, .g22-henna--clean button:focus-visible, .g22-henna--clean summary:focus-visible, .g22-henna--clean [tabindex]:focus-visible { transition: none; } } /* Client deck cascade lock: final declarations intentionally sit last. */ /* Fix 2026-07-27 (Task 3): warm gradient stops swapped for the same * neutral-cool equivalents (#f1f1f2 / #e7e7e8) used in the earlier * .g22-about rule above. */ body.home .g22-henna--clean .g22-about { min-height: 0; /* Ira 2026-07-29: no yellow spy-dot radial — gradient only. */ background: linear-gradient(135deg, #f1f1f2, #e7e7e8); } body.home .g22-henna--clean .g22-about__shell { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); grid-template-rows: auto auto auto auto; column-gap: clamp(34px, 5vw, 72px); } body.home .g22-henna--clean .g22-about__mast, body.home .g22-henna--clean .g22-about__lead { grid-column: 1; } body.home .g22-henna--clean .g22-about__media { grid-column: 2; grid-row: 1 / span 2; } body.home .g22-henna--clean .g22-about__pillars, body.home .g22-henna--clean .g22-about__cta { grid-column: 1 / -1; } body.home .g22-henna--clean .g22-about__pillars { min-height: 0; } body.home .g22-henna--clean .g22-learn { position: relative; display: block; min-height: 0; padding-block: clamp(72px, 9vw, 120px); /* Fix 2026-07-27 (Task 3): beige cream background swapped for neutral-cool #f4f4f5 (warmth removed). */ background: #f4f4f5; text-align: left; overflow: visible; } body.home .g22-henna--clean .g22-learn__shell { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.15fr); grid-template-rows: auto; align-items: center; justify-items: stretch; column-gap: clamp(36px, 5vw, 72px); row-gap: 32px; width: var(--g22-shell, min(100% - 48px, 1200px)); } body.home .g22-henna--clean .g22-learn__copy { grid-column: 1; align-items: flex-start; text-align: left; } body.home .g22-henna--clean .g22-learn__display { max-width: 16ch; text-align: left; } body.home .g22-henna--clean .g22-learn__lede { max-width: 38ch; text-align: left; } body.home .g22-henna--clean .g22-learn__focus { grid-column: 2; } body.home .g22-henna--clean .g22-news__grid { align-items: stretch; grid-auto-rows: 1fr; } body.home .g22-henna--clean .g22-news__item { align-self: stretch; display: flex; } /* Fix 2026-07-27 (Task 2): this body.home-scoped rule outranks the * dedicated `.g22-news__card--fallback` sizing fix further up the file * (extra `body.home` selector = higher specificity, so it was silently * winning and reinstating the tall 3:4.2 portrait slab + huge empty * middle on the homepage). Scoped to the real-thumbnail `.g22-news__card` * only now; the fallback keeps its content-height sizing from the * `.g22-news__card--fallback` rule below. */ body.home .g22-henna--clean .g22-news__card { width: 100%; height: 100%; } body.home .g22-henna--clean .g22-news__card--fallback { width: 100%; } body.home .g22-henna--clean a.g22-news__card--fallback:hover .g22-news__card-title, body.home .g22-henna--clean a.g22-news__card--fallback:focus-visible .g22-news__card-title { color: #1a1a1a; } body.home .g22-henna--clean a.g22-news__card--fallback:hover .g22-news__excerpt, body.home .g22-henna--clean a.g22-news__card--fallback:focus-visible .g22-news__excerpt { color: rgba(26, 26, 26, .72); } body.home .g22-henna--clean .g22-cta__slices { grid-template-columns: minmax(0, 1fr) clamp(140px, 10vw, 164px); } body.home .g22-henna--clean .g22-cta__slices[data-active="tour"] { grid-template-columns: clamp(140px, 10vw, 164px) minmax(0, 1fr); } body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide { font-size: clamp(2.2rem, 4.2vw, 3.6rem); } body.home .g22-henna--clean .g22-cta__slice-text { font-size: clamp(1.05rem, 1.5vw, 1.25rem); } body.home .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit { padding-bottom: 82px; } @media (max-width: 900px) { body.home .g22-henna--clean .g22-about__shell, body.home .g22-henna--clean .g22-learn__shell { grid-template-columns: 1fr; } body.home .g22-henna--clean .g22-about__mast, body.home .g22-henna--clean .g22-about__lead, body.home .g22-henna--clean .g22-about__media, body.home .g22-henna--clean .g22-about__pillars, body.home .g22-henna--clean .g22-about__cta, body.home .g22-henna--clean .g22-learn__copy, body.home .g22-henna--clean .g22-learn__focus { grid-column: 1; grid-row: auto; } body.home .g22-henna--clean .g22-news__item { max-width: none; } /* Fix 2026-07-27 (Task 2): same specificity-override problem as the * desktop rule above — scope the mobile 16:11 box to real-thumbnail * cards only so the fallback variant stays content-height. */ body.home .g22-henna--clean .g22-news__card { min-height: 320px; aspect-ratio: 16 / 11; } body.home .g22-henna--clean .g22-news__card--fallback { aspect-ratio: auto; } body.home .g22-henna--clean .g22-cta__slices, body.home .g22-henna--clean .g22-cta__slices[data-active="tour"] { grid-template-columns: 1fr; } /* Match specificity (body.home + 2 classes) to override the portrait rule above */ body.home .g22-henna--clean .g22-news__card { min-height: 0; aspect-ratio: auto; } } /* ================================================================ * NEWS CARD REDESIGN (2026-07): framed photo + white plaque * Switches from "gradient-veil poster / white-text-over-photo" to * a stacked card: photo block on top (framed by card border), * white plate below with dark readable text. * Overrides the earlier portrait-poster rules via cascade order * (same or lower specificity, placed last in the sheet). * ================================================================ */ /* 1 ─ Card: flex column, white background, shadow-only definition (no decorative border — the lift + shadow ladder alone reads as "card"). */ .g22-henna--clean .g22-news__card, .g22-henna--clean .g22-news__card:has(img), .g22-henna--clean .g22-news__card.has-image, .g22-henna--clean .g22-news__card--photo { display: flex; flex-direction: column; height: auto; min-height: 0; aspect-ratio: auto; overflow: hidden; background: var(--g22-card); color: var(--g22-ink); border: 0; box-shadow: var(--g22-shadow-sm); } /* 2 ─ Photo block: in normal flow at top of card, 4:3 ratio */ .g22-henna--clean .g22-news__media { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; flex-shrink: 0; overflow: hidden; } /* picture stays absolute inside the sized media container */ .g22-henna--clean .g22-news__media picture { position: absolute; inset: 0; } /* 3 ─ Veil: hidden — text lives on the white plaque, not over the photo */ .g22-henna--clean .g22-news__veil { display: none; } /* Stock-photo cards (no featured image set) share one consistent subtle purple tint over the photo so the trio reads as a deliberate set rather than three unrelated stock shots. */ .g22-henna--clean .g22-news__card--stock .g22-news__media::after { content: ""; position: absolute; inset: 0; background: var(--g22-purple-14); mix-blend-mode: multiply; pointer-events: none; } /* 4 ─ White plaque: static flow, grows to fill remaining card height */ .g22-henna--clean .g22-news__cap { position: static; flex: 1; background: var(--g22-card); border-top: 1px solid var(--g22-line); padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px) clamp(16px, 2vw, 22px); gap: 8px; transform: none; transition: background 280ms var(--g22-ease); } .g22-henna--clean .g22-news.is-in .g22-news__cap { transform: none; transition-delay: 0ms; } /* "More" arrow line: float to bottom of plaque */ .g22-henna--clean .g22-news__more { margin-top: auto; padding-top: 6px; } /* 5 ─ Text palette: dark-on-white, category/date read as a mono-label row */ .g22-henna--clean .g22-news__meta { font-family: var(--g22-font-label); font-size: var(--g22-fs-label); letter-spacing: var(--g22-tracking-label); color: var(--g22-ink-mute); } .g22-henna--clean .g22-news__cat { color: var(--g22-purple); } .g22-henna--clean .g22-news__dot { background: var(--g22-ink-mute); } .g22-henna--clean .g22-news__card-title { color: var(--g22-ink); transition: color 280ms var(--g22-ease); } .g22-henna--clean .g22-news__excerpt { color: var(--g22-ink-soft); opacity: 1; } /* 6 ─ Hover / focus — lift card, deepen shadow, purple title */ .g22-henna--clean a.g22-news__card:hover, .g22-henna--clean a.g22-news__card:focus-visible { box-shadow: var(--g22-shadow-md); transform: translateY(-4px); } .g22-henna--clean a.g22-news__card:hover .g22-news__media img, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__media img { transform: scale(calc(1.04 - 0.02 * var(--g22-scrub, 0))); } /* veil stays off during hover */ .g22-henna--clean a.g22-news__card:hover .g22-news__veil, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__veil { opacity: 0; background: none; } .g22-henna--clean a.g22-news__card:hover .g22-news__cap, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__cap { transform: none; } .g22-henna--clean a.g22-news__card:hover .g22-news__card-title, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__card-title { color: var(--g22-purple); transform: none; } .g22-henna--clean a.g22-news__card:hover .g22-news__excerpt, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__excerpt { color: var(--g22-ink); opacity: 1; } .g22-henna--clean a.g22-news__card:hover .g22-news__more-line, .g22-henna--clean a.g22-news__card:focus-visible .g22-news__more-line { transform: scaleX(1); } .g22-henna--clean a.g22-news__card:focus-visible { outline-color: var(--g22-purple); } /* 7 ─ Mobile: keep auto sizing (no portrait aspect-ratio at small screens) */ @media (max-width: 900px) { .g22-henna--clean .g22-news__card { min-height: 0; aspect-ratio: auto; } } /* Client review 2026-07-29: keep the expanded accordion title inside its * column at desktop widths. The previous 8ch / 3.6rem combination allowed * the unbreakable word "знайомство" to cross the column divider. */ @media (min-width: 901px) { body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) { grid-template-columns: minmax(280px, 0.84fr) minmax(0, 1.16fr); } body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-hit { min-width: 0; padding: clamp(28px, 3vw, 42px); } body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-name, body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide { width: 100%; max-width: none; } body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide { font-size: clamp(2.05rem, 3.15vw, 3rem); line-height: 1.02; text-wrap: balance; } } @media (min-width: 901px) and (max-width: 1100px) { body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) { grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.1fr); } body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide { font-size: clamp(1.9rem, 3.5vw, 2.35rem); } } /* Client reference 2026-07-29: the desktop composition above is the approved * CTA. On touch widths the vertical rail becomes a compact horizontal tab; * reset the desktop absolute label so its name never collapses to zero width. */ @media (max-width: 900px) { body.home .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit { min-height: 80px; padding: 22px 68px 22px 24px; } body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-name, body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide { width: 100%; max-width: none; } body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide { font-size: clamp(1.9rem, 8vw, 2.2rem); line-height: 1.05; text-wrap: balance; } body.home .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-name { width: 100%; max-width: none; place-items: center start; align-self: center; overflow: visible; } body.home .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-label--wide { position: static; display: block; width: 100%; max-width: none; opacity: 1; font-size: clamp(1.15rem, 5vw, 1.4rem); line-height: 1.2; letter-spacing: -0.02em; white-space: normal; } body.home .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit::after { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; font-size: 1.25rem; font-weight: 500; line-height: 1; rotate: 0deg; } } /* ---- Footer polish: smooth transitions + tactile link micro-interactions ---- */ @media (prefers-reduced-motion: no-preference) { body:has(.g22-henna--clean) .g22-footer__sitemap a, body:has(.g22-henna--clean) .g22-footer__social, body:has(.g22-henna--clean) .g22-footer__map, body:has(.g22-henna--clean) .g22-footer__contacts p a { transition: color 200ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1); } body:has(.g22-henna--clean) .g22-footer__social span:last-child { display: inline-block; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); } } body:has(.g22-henna--clean) .g22-footer__contacts p a { color: rgba(255, 255, 255, 0.82); } body:has(.g22-henna--clean) .g22-footer__contacts p a:hover, body:has(.g22-henna--clean) .g22-footer__contacts p a:focus-visible { color: #fff; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { body:has(.g22-henna--clean) .g22-footer__sitemap a:hover { transform: translateX(3px); } body:has(.g22-henna--clean) .g22-footer__social:hover span:last-child { transform: translate(2px, -2px); } }