/* ====================================================================== לוּמה · LUMA — Pilates Studio Warm, editorial, minimalist. RTL Hebrew. Vanilla CSS. Token names mirror the hovalot example so shared component classes work. ====================================================================== */ :root { /* ── Color — clean white / blush / soft coral · glowing pink palette ── */ --paper: #FFFFFF; /* clean white — maximal airy base */ --surface: #FFFFFF; --mist: #FCEFF4; /* pale pink wash */ --mist-deep: #F7DCE7; /* soft blush */ --ink: #2B2230; /* deep plum-charcoal — text + dark surfaces */ --ink-muted: #6E6470; --ink-soft: #9A8E9A; --hairline: rgba(43, 34, 48, 0.10); --hairline-strong: rgba(43, 34, 48, 0.16); --brand-700: #E26A8D; /* deep soft coral — primary */ --brand-600: #F08CA9; /* coral */ --brand-500: #F7A8C0; /* bubblegum */ --brand-100: #FCDDE8; /* soft blush */ --brand-50: #FDEFF4; /* pale pink */ --brand-deep: #C9547A; /* deep coral — hover floor */ --sand: #F7D6E2; --olive: #C9547A; --success: #5E7C5B; /* semantic — confirmation states */ --danger: #B4524B; /* semantic — form errors */ --wa: #25D366; /* WhatsApp brand */ --wa-dark: #1FAD55; /* Location accent hues — three pink intensities (schedule + map tags) */ --loc-tlv: #A63D67; --loc-tlv-bg: #F6D7E2; --loc-hrz: #D75E94; --loc-hrz-bg: #FBE0EE; --loc-hfa: #E86A8B; --loc-hfa-bg: #FDE6EC; /* ── Spacing ── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; /* ── Radius ── */ --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 40px; --r-full: 9999px; --r-btn: 14px; /* soft-rounded buttons / nav links (not full pills) */ --r-nav: 20px; /* floating nav bar */ /* ── Shadows ── */ --shadow-rest: 0 1px 2px rgba(42,37,33,0.04), 0 12px 32px -12px rgba(42,37,33,0.10); --shadow-float: 0 2px 4px rgba(42,37,33,0.05), 0 24px 64px -20px rgba(42,37,33,0.14); --shadow-cta: 0 8px 24px -8px rgba(226,106,141,0.42), inset 0 1px 0 rgba(255,255,255,0.30); --inner-hi: inset 0 1px 0 rgba(255,255,255,0.85); /* ── Motion ── */ --t-micro: 180ms cubic-bezier(0.32, 0.72, 0, 1); --t-default: 420ms cubic-bezier(0.22, 1, 0.36, 1); --t-macro: 700ms cubic-bezier(0.16, 1, 0.3, 1); /* ── Layout ── */ --max-w: 1280px; --max-w-narrow: 820px; --nav-h: 72px; --font-display: 'Heebo', system-ui, sans-serif; --font-body: 'Assistant', 'Heebo', -apple-system, sans-serif; --font-wordmark: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; } /* ──────────────────────────── Reset / base ──────────────────────────── */ * { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* clip, not hidden: hidden coerces overflow-y to auto, making a scroll container and breaking ScrollTrigger's position math. hidden = old-browser fallback. */ overflow-x: hidden; overflow-x: clip; } img, svg, iframe { display: block; max-width: 100%; } a { color: var(--brand-700); text-decoration: none; transition: color var(--t-micro); } a:hover { color: var(--brand-deep); } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; } /* Focus rings — accessibility critical */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; border-radius: 8px; } /* Skip to main content */ .sr-skip { position: fixed; inset-block-start: -100px; inset-inline-start: 50%; transform: translateX(50%); z-index: 200; background: var(--ink); color: #fff; padding: 12px 22px; border-radius: var(--r-sm); font-weight: 600; transition: inset-block-start var(--t-default); } .sr-skip:focus { inset-block-start: var(--s-4); color: #fff; } /* ──────────────────────────── Layout primitives ──────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-5); } .container-narrow { max-width: var(--max-w-narrow); } .section { padding: var(--s-10) 0; position: relative; } .section-mist { background: linear-gradient(180deg, var(--paper) 0%, var(--mist) 38%, var(--mist) 62%, var(--paper) 100%); } @media (max-width: 768px) { .section { padding: var(--s-8) 0; } } .section-head { max-width: 760px; margin: 0 0 var(--s-8); } .section-head.center { text-align: center; margin-inline: auto; } .section-head .lead { color: var(--ink-muted); font-size: 19px; margin: var(--s-4) 0 0; max-width: 60ch; } .section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-8); } .section-head-row .section-head { margin-bottom: 0; } /* ──────────────────────────── Typography ──────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brand-700); } .eyebrow::before { content: ""; inline-size: 26px; /* logical: RTL-safe */ block-size: 2px; background: var(--brand-600); border-radius: 2px; /* tiny cap on the rule; not the label box */ } .hero-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -0.03em; margin: 0; color: var(--ink); /* now on a white card, not over a photo */ text-align: start; text-wrap: balance; } /* Solid coral accent — no background-clip → no italic glyph clipping */ .h1-em { font-weight: 700; font-style: normal; color: var(--brand-600); -webkit-text-fill-color: currentColor; background: none; } .h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -0.03em; margin: var(--s-4) 0 0; color: var(--ink); } .h2-em { font-weight: 400; background: linear-gradient(120deg, var(--brand-700) 0%, var(--brand-500) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.22; letter-spacing: -0.015em; margin: 0; color: var(--ink); } .h3-light { color: #fff; } .lead { color: var(--ink-muted); font-size: 19px; } /* ──────────────────────────── Bezel (framed card) ──────────────────────────── */ .bezel { background: var(--mist); padding: 6px; border-radius: var(--r-2xl); box-shadow: 0 0 0 1px var(--hairline); position: relative; } .bezel-inner { background: var(--surface); border-radius: calc(var(--r-2xl) - 6px); box-shadow: var(--shadow-rest), var(--inner-hi); padding: var(--s-6); position: relative; overflow: hidden; } /* ──────────────────────────── Buttons ──────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 16px; padding: 14px 22px; border-radius: var(--r-btn); transition: transform var(--t-micro), box-shadow var(--t-default), background var(--t-micro), color var(--t-micro); white-space: nowrap; text-decoration: none; position: relative; } .btn:active { transform: scale(0.985); } .btn-arrow { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); background: rgba(255,255,255,0.18); transition: transform var(--t-default), background var(--t-micro); } .btn-arrow svg { width: 15px; height: 15px; } .btn-primary { background: linear-gradient(180deg, var(--brand-600), var(--brand-700)); color: #fff; box-shadow: var(--shadow-cta); padding-inline-end: 8px; } .btn-primary:hover { background: linear-gradient(180deg, var(--brand-700), var(--brand-deep)); color: #fff; } .btn-primary:hover .btn-arrow { background: rgba(255,255,255,0.28); transform: translateX(2px) scale(1.05); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); font-weight: 600; } .btn-ghost:hover { background: var(--mist); color: var(--ink); } .btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,0.4); } .btn-ghost.on-dark:hover { background: rgba(255,255,255,0.12); color: #fff; } .btn-wa { background: var(--wa); color: #fff; font-weight: 700; } .btn-wa svg { width: 22px; height: 22px; } .btn-wa:hover { background: var(--wa-dark); color: #fff; } .btn-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; display: inline-block; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ──────────────────────────── Navigation ──────────────────────────── */ .nav-wrap { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50; padding: 0 var(--s-5); background: rgba(255,253,250,0.82); backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px); border-block-end: 1px solid var(--hairline); } .nav { position: relative; /* RTL mirror of the reference: wordmark at inline-start (right), pill centre, CTA at inline-end (left) */ width: 100%; max-width: var(--max-w); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); padding: 10px 0; min-height: 0; transition: min-height var(--t-default), padding var(--t-default); } .nav-logo { justify-self: start; } .nav-links { justify-self: center; } .nav-cta { justify-self: end; } /* Wordmark — single serif word + coral period, no icon bubble */ .nav-logo { display: inline-flex; align-items: center; color: var(--ink); padding: 6px 2px; } .nav-logo:hover { color: var(--ink); } .nav-word { font-family: var(--font-wordmark); font-weight: 600; font-size: 28px; letter-spacing: 0.07em; line-height: 1; display: inline-flex; align-items: baseline; direction: ltr; /* Latin wordmark: keep the coral period after the word */ } .nav-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--brand-700); display: inline-block; margin-left: 5px; transition: transform var(--t-default); } .nav-logo:hover .nav-dot { transform: scale(1.35); } .nav-links { /* reference: links sit inside a floating white pill */ display: flex; gap: 2px; align-items: center; background: rgba(255,255,255,0.94); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); padding: 7px; border-radius: var(--r-full); border: 1px solid rgba(43,34,48,0.05); box-shadow: 0 1px 2px rgba(42,37,33,0.05), 0 16px 44px -20px rgba(42,37,33,0.32); } .nav-links a { color: var(--ink); font-weight: 500; padding: 9px 17px; border-radius: var(--r-full); font-size: 14.5px; letter-spacing: 0.01em; line-height: 1.4; transition: background var(--t-micro), color var(--t-micro); } .nav-links a:hover { background: var(--brand-50); color: var(--brand-deep); } /* brand blush hover */ .nav-cta { display: flex; align-items: center; gap: 8px; } .nav-btn { /* reference: white "Get Started" pill; inverts to ink on hover */ display: inline-flex; align-items: center; padding: 12px 24px; font-size: 14.5px; font-weight: 600; line-height: 1.4; background: #fff; color: var(--ink); border-radius: var(--r-full); border: 1px solid rgba(43,34,48,0.05); box-shadow: 0 1px 2px rgba(42,37,33,0.06), 0 16px 44px -20px rgba(42,37,33,0.32); transition: background var(--t-micro), color var(--t-micro), transform var(--t-micro), box-shadow var(--t-default); } .nav-btn:hover { background: var(--brand-700); border-color: transparent; color: #fff; transform: translateY(-1px); } .nav-btn:active { transform: scale(0.98); } .menu-toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-btn); background: var(--mist); position: relative; } .menu-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t-default), top var(--t-default), bottom var(--t-default); } .menu-toggle span:nth-child(1) { top: 17px; } .menu-toggle span:nth-child(2) { bottom: 17px; } .menu-toggle.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); } .menu-toggle.is-open span:nth-child(2) { bottom: 21px; transform: rotate(-45deg); } /* Keep the full FLEXORA pill nav down to the mobile takeover (900px). Hiding the links any higher leaves a gap where the over-hero rules also hide the hamburger — and reflows the dark CTA to the centre. Below 900px the floating menu button / overlay takes over. */ @media (max-width: 900px) { .nav-links { display: none; } .menu-toggle { display: block; } /* keep the menu reachable whenever links are hidden */ } @media (max-width: 720px) { .nav-cta .nav-btn { display: none; } .nav-cta .nav-phone { display: none; } .menu-toggle { display: block; } .nav { padding: 8px; gap: var(--s-3); } } /* ──────────── Collapsed nav over the hero — only a floating menu button ──────────── IntersectionObserver toggles body.nav-over-hero while the hero is in view; once the hero scrolls away the class drops and the full glass bar slides back in. */ .nav-wrap { transition: background var(--t-default), border-color var(--t-default), backdrop-filter var(--t-default); } .nav-logo, .nav-links, .nav-phone, .nav-btn { transition: opacity var(--t-default), transform var(--t-default); } body.nav-over-hero .nav-wrap { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-block-end-color: transparent; } body.nav-over-hero .nav-logo, body.nav-over-hero .nav-links, body.nav-over-hero .nav-phone, body.nav-over-hero .nav-btn { opacity: 0; transform: translateY(-8px); pointer-events: none; } body.nav-over-hero .menu-toggle { /* floating round button, pinned to the container corner */ display: block; position: absolute; inset-block-start: 6px; inset-inline-end: 0; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,253,250,0.86); backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px); box-shadow: var(--shadow-float); border: 1px solid var(--hairline); } @media (prefers-reduced-motion: reduce) { body.nav-over-hero .nav-logo, body.nav-over-hero .nav-links, body.nav-over-hero .nav-phone, body.nav-over-hero .nav-btn { transform: none; } } /* Desktop, over the hero: the bar is transparent and the FLEXORA elements float on the photo's light top — dark logo + white pill of links + dark CTA. The photo's upper area is white studio wall, so everything stays legible. Hide-over-hero still applies on mobile. */ @media (min-width: 901px) { body.nav-over-hero .nav-wrap { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-block-end-color: transparent; padding-block: 0; } /* Center the bar inside the 90px notch band (card starts 10px below the viewport top) */ body.nav-over-hero .nav { padding-block: 10px 0; min-height: 100px; } body.nav-over-hero .nav-logo, body.nav-over-hero .nav-links, body.nav-over-hero .nav-phone, body.nav-over-hero .nav-btn { opacity: 1; transform: none; pointer-events: auto; } /* Links sit directly on the white notch — no pill chrome (it returns in the scrolled glass bar) */ body.nav-over-hero .nav-links { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.nav-over-hero .menu-toggle { display: none; } } /* Mobile menu overlay */ .mobile-menu { position: fixed; inset: 0; z-index: 49; background: rgba(255,250,252,0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--t-default); } .mobile-menu.is-open { opacity: 1; pointer-events: auto; } .mobile-menu ul { display: flex; flex-direction: column; gap: var(--s-3); text-align: center; padding: 0 var(--s-5); } .mobile-menu ul li { opacity: 0; transform: translateY(20px); transition: opacity var(--t-default), transform var(--t-macro); } .mobile-menu.is-open ul li { opacity: 1; transform: none; transition-delay: var(--d); } .mobile-menu ul a { font-family: var(--font-display); font-size: 30px; font-weight: 300; color: var(--ink); padding: 8px 20px; display: block; } .mobile-menu ul .m-cta { color: var(--brand-700); font-weight: 500; } .mobile-menu ul .m-phone { font-size: 22px; color: var(--ink-muted); } /* ──────────────────────────── Hero — full-bleed photo card + notched nav (reference style) ──────────────────────────── */ .hero { position: relative; isolation: isolate; background: var(--paper); padding: 10px 10px var(--s-8); } .hero-wrap { width: 100%; } /* — The card: full-viewport rounded photo — */ .hero-banner { position: relative; border-radius: var(--r-2xl); overflow: hidden; isolation: isolate; background: var(--mist-deep); min-height: 560px; height: calc(100svh - 20px); max-height: 880px; box-shadow: var(--shadow-rest); } /* Mirrored for RTL: the subject moves to the left, the empty wall to the right — the Hebrew copy then sits flush against the right margin exactly like the reference's flush-left English. Flip lives on the wrapper so GSAP can own the img transform (parallax / intro scale) without fighting it. */ .hero-banner-photo { position: absolute; inset: -6% 0; z-index: 0; transform: scaleX(-1); } /* overscan for parallax */ .hero-banner-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 40%; } /* ── The notch — page background biting into the card's top edge, centered (≥901px) ── A band of the exact page white dips down from the card's top edge, centered around the menu pill — the photo's top line continues on BOTH sides of it (reference style). Two concave fillets turn the junctions into iPhone-screen S-curves: (a) at the band's left end, on the card's top edge; (b) at the band's right end, on the card's top edge. Each fillet is a 40px square whose white lives OUTSIDE a quarter-circle (radial-gradient), so the photo's edge curves INTO the notch. The band is wide enough to hold the centered menu, but never reaches the wordmark or the trial-lesson pill floating on the photo at the corners. */ .hero-notch { --notch-r: 40px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; width: min(660px, calc(100% - 340px)); height: 90px; background: var(--paper); border-bottom-left-radius: var(--notch-r); border-bottom-right-radius: var(--notch-r); pointer-events: none; /* Soft cast onto the photo so the S-curves read even over the bright wall */ filter: drop-shadow(0 2px 5px rgba(43,34,48,0.07)) drop-shadow(0 14px 30px rgba(43,34,48,0.10)); } .hero-notch::before, .hero-notch::after { content: ""; position: absolute; width: var(--notch-r); height: var(--notch-r); } .hero-notch::before { /* (a) card top edge, left of the band */ top: 0; right: 100%; background: radial-gradient(circle at left bottom, rgba(255,255,255,0) calc(var(--notch-r) - 1px), var(--paper) var(--notch-r)); } .hero-notch::after { /* (b) card top edge, right of the band */ top: 0; left: 100%; background: radial-gradient(circle at right bottom, rgba(255,255,255,0) calc(var(--notch-r) - 1px), var(--paper) var(--notch-r)); } /* Soft bottom scrim so the white stats stay legible over the floor/window (reference style) */ .hero-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(20,14,20,0.34) 0%, rgba(20,14,20,0.10) 20%, transparent 42%); } /* — Content layer — */ .hero-card-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: clamp(96px, 14vh, 138px) clamp(24px, 3.8vw, 60px) clamp(22px, 4.5vh, 40px); } /* Copy hugs the card's RIGHT edge over the empty studio wall (photo is mirrored, subject on the left) — a native-RTL mirror of the reference. align-self:flex-start maps to the right in this RTL column; the text reads flush-right, ragged-left, as Hebrew should. */ .hero-copy { max-width: 640px; align-self: flex-start; text-align: start; } .hero .hero-h1 { margin: 0; font-family: var(--font-display); /* brand display font (Heebo), like every heading below */ font-size: clamp(44px, 5.4vw, 82px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); } /* Brand two-tone: second line in the deep coral, same pattern as the h2-em below */ .hero .h1-em { color: var(--brand-700); font-weight: inherit; } .hero-desc { margin: 26px 0 0; font-size: clamp(15.5px, 1.35vw, 18.5px); line-height: 1.65; color: var(--ink-muted); max-width: 44ch; } .hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 40px; flex-wrap: wrap; } /* — Hero pill buttons (dark + white, reference style) — */ .btn-hero { display: inline-flex; align-items: center; gap: 14px; height: 54px; border-radius: var(--r-full); font-family: var(--font-display); font-size: 16px; font-weight: 500; text-decoration: none; transition: transform var(--t-micro), background var(--t-micro), box-shadow var(--t-micro); } .btn-hero-primary { background: linear-gradient(180deg, var(--brand-600), var(--brand-700)); color: #fff; padding-block: 6px; padding-inline: 26px 7px; box-shadow: var(--shadow-cta); } .btn-hero-primary:hover { background: linear-gradient(180deg, var(--brand-700), var(--brand-deep)); transform: translateY(-1px); } .btn-hero-primary .btn-chip { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--brand-700); display: grid; place-items: center; } .btn-hero-primary .btn-chip svg { width: 17px; height: 17px; } .btn-hero-ghost { background: #fff; color: var(--ink); padding: 0 30px; box-shadow: 0 1px 2px rgba(42,37,33,0.10); } .btn-hero-ghost:hover { transform: translateY(-1px); color: var(--brand-deep); box-shadow: var(--shadow-float); } /* — Stats, bottom-left over the mat (white — RTL mirror of the reference) — */ .hero-stats { margin: auto 0 0; padding: 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-end; gap: clamp(30px, 4.8vw, 76px); direction: ltr; text-align: left; color: #fff; } .hero-stats li { display: flex; flex-direction: column; gap: 6px; } .hero-stats b { font-family: var(--font-display); font-size: clamp(40px, 4.8vw, 66px); font-weight: 600; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 28px rgba(0,0,0,0.35); } .hero-stats span { font-size: 13.5px; font-weight: 400; opacity: 0.95; text-shadow: 0 1px 14px rgba(0,0,0,0.45); } /* When GSAP drives the intro, silence the CSS reveal transition so they don't fight */ .hero.hero-js .reveal { transition: none !important; } @media (max-width: 900px) { .hero { padding: 8px 8px var(--s-7); } .hero-notch { display: none; } /* mobile: fully rounded card, floating menu button */ .hero-banner { min-height: 0; height: auto; max-height: none; } .hero-card-inner { position: relative; padding: clamp(88px, 14vh, 120px) 20px 24px; min-height: 640px; } .hero-banner-photo img { object-position: 72% 46%; } /* zoom toward the figure on narrow screens */ .hero-copy { max-width: 100%; } /* Narrow full-bleed card has no empty wall behind the copy, so soften the top of the photo to a light haze — the dark headline + grey subtext stay legible; the figure below is untouched. */ .hero-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(250,248,249,0.97) 4%, rgba(250,248,249,0.88) 30%, rgba(250,248,249,0.56) 48%, rgba(250,248,249,0) 68%); } .hero-stats { gap: 24px; flex-wrap: wrap; justify-content: flex-start; } .hero-stats b { font-size: 38px; } } @media (max-width: 560px) { .hero-card-inner { min-height: 590px; padding-top: 96px; } .hero .hero-h1 { font-size: clamp(34px, 9vw, 42px); } .btn-hero { height: 50px; } .hero-stats span { font-size: 12.5px; } } /* ──────────────────────────── Philosophy / About ──────────────────────────── */ .about { text-align: center; } .about .about-statement { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.24; letter-spacing: -0.025em; max-width: 22ch; margin: var(--s-5) auto var(--s-6); color: var(--ink); } .about .about-statement em { font-style: italic; color: var(--brand-700); } .about .lead { max-width: 60ch; margin-inline: auto; } /* ──────────────────────────── Gallery rail (class types) ──────────────────────────── */ .gallery-shell { position: relative; } .gallery-rail { display: flex; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x proximity; padding: var(--s-2) var(--s-1) var(--s-5); margin: 0 calc(-1 * var(--s-1)); scrollbar-width: none; } .gallery-rail::-webkit-scrollbar { display: none; } .cls-card { scroll-snap-align: start; flex: 0 0 min(78vw, 340px); display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-rest); border: 1px solid var(--hairline); transition: transform var(--t-default), box-shadow var(--t-default); } .cls-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); } .cls-card .cls-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; } .cls-card .cls-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-macro); } .cls-card:hover .cls-photo img { transform: scale(1.05); } .cls-card .cls-level { position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; padding: 5px 12px; border-radius: var(--r-sm); background: rgba(255,253,250,0.9); color: var(--ink); backdrop-filter: blur(6px); } .cls-card .cls-body { padding: var(--s-5); } .cls-card .cls-body p { margin: var(--s-2) 0 0; color: var(--ink-muted); font-size: 15px; } .gallery-nav { display: flex; gap: var(--s-2); } .gallery-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-micro), transform var(--t-micro), color var(--t-micro); } .gallery-arrow svg { width: 20px; height: 20px; } .gallery-arrow:hover { background: var(--brand-700); color: #fff; border-color: var(--brand-700); } .gallery-arrow:active { transform: scale(0.94); } /* ──────────────────────────── Values — flowing movement line ──────────────────────────── */ /* Size-proof: values are a real responsive grid; the connecting curve is computed in JS from the blocks' actual rendered centers (see initValuesDraw). Static state (no JS / reduced motion) is a clean aligned row — the curve + zigzag are .is-enhanced only. */ .flowline { position: relative; } .flowline-curve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; } .fl-track { fill: none; stroke: var(--hairline); stroke-width: 1.5; } .fl-draw { fill: none; stroke: var(--brand-600); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; /* default = fully drawn */ } /* Node accent-dots are hidden: the SVG circles render stacked at the flowline's top-left corner (transform-box/GSAP scale quirk) instead of on the curve, showing as a stray dot. The drawn curve + icons carry the design, so the dots are removed rather than repositioned. */ .fl-node { display: none; } .flowline-values { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); align-items: start; } .fl-value { position: static; text-align: center; } .fl-num { display: block; line-height: 0; } /* tight icon wrapper → height == icon height for the curve anchor */ .fl-num img { width: clamp(56px, 6vw, 84px); height: auto; display: block; margin-inline: auto; /* block → wrapper height == icon height (tight curve anchor); centered */ } .fl-word { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 6px 0 10px; } .fl-copy { color: var(--ink-muted); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.5; margin: 0 auto; max-width: 26ch; } .fl-value.is-accent .fl-word { color: var(--brand-700); } /* Enhancement hook: JS adds .is-enhanced only when GSAP runs (motion allowed). The zigzag (→ a flowing wave once the curve threads it) and hide-then-reveal live here, so no-JS / reduced-motion keeps a clean, fully-visible aligned row. */ .flowline.is-enhanced .fl-value:nth-child(even) { margin-block-start: clamp(56px, 11vh, 120px); } .flowline.is-enhanced .fl-word { clip-path: inset(0 0 110% 0); } .flowline.is-enhanced .fl-num, .flowline.is-enhanced .fl-copy { opacity: 0; transform: translateY(18px); } .flowline.is-enhanced .fl-node { transform: scale(0); } /* ≤980px: vertical CSS spine, blocks stacked (no SVG curve) */ @media (max-width: 980px) { .flowline-curve { display: none; } .flowline-values { display: grid; grid-template-columns: 1fr; gap: var(--s-8); padding-inline-start: var(--s-6); border-inline-start: 2px solid var(--hairline); } .flowline.is-enhanced .fl-value:nth-child(even) { margin-block-start: 0; } /* no zigzag on the spine */ .fl-value { text-align: start; } .fl-num img { margin-inline-start: 0; margin-inline-end: auto; } /* align icon to start edge, matching the labels */ .fl-copy { margin-inline: 0; } .fl-value::before { content: ''; position: absolute; inset-inline-start: calc(var(--s-6) * -1 - 7px); margin-block-start: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand-600); } .fl-value { position: relative; } .fl-value.is-accent::before { background: var(--brand-600); border-color: var(--brand-deep); } } @media (max-width: 540px) { .flowline-values { gap: var(--s-7); } .fl-num img { width: clamp(56px, 14vw, 72px); } } .h2-draw { position: relative; } .h2-underline { position: absolute; inset-inline-start: -2%; inset-block-end: -0.2em; width: 104%; height: 0.32em; overflow: visible; pointer-events: none; } .h2-underline path { fill: none; stroke: var(--brand-600); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; } /* ──────────────────────────── Membership / Featured ──────────────────────────── */ .feature-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .feature-img img { width: 100%; height: 100%; object-fit: cover; } .feature-cap { position: absolute; inset-block-end: var(--s-6); inset-inline-start: var(--s-6); color: #fff; max-width: 30ch; text-shadow: 0 2px 16px rgba(0,0,0,0.4); } .feature-cap .h3 { color: #fff; } .feature-cap p { margin: var(--s-2) 0 0; color: rgba(255,255,255,0.9); font-size: 15px; } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-7); } .plan { padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: var(--s-3); transition: transform var(--t-default), box-shadow var(--t-default); } .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); } .plan.is-featured { border-color: var(--brand-500); box-shadow: var(--shadow-rest); } .plan .plan-name { font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); font-size: 14px; } .plan .plan-price { font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1; color: var(--ink); } .plan .plan-price span { font-size: 16px; color: var(--ink-soft); } .plan ul { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0; } .plan ul li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-muted); font-size: 15px; } .plan ul li svg { width: 18px; height: 18px; color: var(--brand-700); flex: none; margin-top: 3px; } .plan .plan-badge { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 4px 12px; border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-deep); border: 1px solid var(--brand-100); } .plan .btn { justify-content: center; } @media (max-width: 880px) { .plans { grid-template-columns: 1fr; } } /* ──────────────────────────── Weekly schedule ──────────────────────────── */ .sched-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-7); } .sched-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-muted); } .sched-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; } #schedule-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); } .sched-col { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s-3); display: flex; flex-direction: column; } .sched-day { font-family: var(--font-display); font-weight: 500; font-size: 16px; text-align: center; color: var(--ink); padding-bottom: var(--s-3); margin-bottom: var(--s-3); border-block-end: 1px solid var(--hairline); } .sched-cells { display: flex; flex-direction: column; gap: var(--s-3); flex: 1; } .sched-empty { color: var(--ink-soft); font-size: 13px; text-align: center; padding: var(--s-4) 0; } .cls { position: relative; padding: var(--s-3); border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--hairline); transition: transform var(--t-micro), box-shadow var(--t-micro), border-color var(--t-micro); } .cls:hover, .cls:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-rest); border-color: var(--brand-100); } .cls-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--brand-700); } .cls-name { font-family: var(--font-display); font-weight: 500; font-size: 16px; margin: 2px 0; color: var(--ink); } .cls-meta { font-size: 12px; color: var(--ink-muted); margin: 0 0 var(--s-2); } .loc-tag { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-sm); display: inline-block; } .loc-tag--tlv { background: var(--loc-tlv-bg); color: var(--loc-tlv); } .loc-tag--hrz { background: var(--loc-hrz-bg); color: var(--loc-hrz); } .loc-tag--hfa { background: var(--loc-hfa-bg); color: var(--loc-hfa); } .cls-book { display: inline-block; margin-top: var(--s-2); font-size: 12px; font-weight: 600; color: var(--ink-muted); } .cls-book:hover { color: var(--brand-700); } @media (max-width: 860px) { #schedule-grid { grid-template-columns: 1fr; } .sched-col { background: transparent; border: none; border-block-end: 1px solid var(--hairline); border-radius: 0; padding: var(--s-4) 0; } .sched-day { text-align: start; } .sched-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); } } /* ──────────────────────────── Locations + map ──────────────────────────── */ .loc-layout { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: var(--s-5); align-items: stretch; } .loc-list { display: flex; flex-direction: column; gap: var(--s-3); } .loc-card { text-align: start; width: 100%; display: grid; gap: 4px; padding: var(--s-5); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hairline); transition: border-color var(--t-micro), box-shadow var(--t-micro), transform var(--t-micro), background var(--t-micro); } .loc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-rest); } .loc-card.is-active { border-color: var(--brand-500); background: var(--brand-50); box-shadow: var(--shadow-rest); } .loc-card .loc-name { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--ink); display: flex; align-items: center; gap: 8px; } .loc-card .loc-name::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-500); } .loc-card .loc-addr { color: var(--ink-muted); font-size: 15px; } .loc-card .loc-hours { color: var(--ink-soft); font-size: 13px; } .loc-card .loc-phone { font-size: 14px; font-weight: 600; color: var(--brand-700); margin-top: 4px; justify-self: start; } .loc-map-wrap { min-height: 460px; } .loc-map-wrap .bezel-inner { height: 100%; padding: 0; } #loc-map { width: 100%; height: 100%; min-height: 446px; border: 0; } @media (max-width: 880px) { .loc-layout { grid-template-columns: 1fr; } .loc-map-wrap { min-height: 360px; } #loc-map { min-height: 360px; } } /* ──────────────────────────── Booking CTA ──────────────────────────── */ .cta-band { padding: var(--s-10) 0; position: relative; } .cta-card { max-width: 920px; margin: 0 auto; } .cta-inner { padding: clamp(var(--s-6), 5vw, var(--s-8)); } .cta-inner > p { color: var(--ink-muted); margin: var(--s-3) 0 var(--s-6); max-width: 52ch; } .cta-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } .cta-field { display: flex; flex-direction: column; gap: 6px; } .cta-field span { font-size: 13px; font-weight: 600; color: var(--ink-muted); } .cta-field input, .cta-field select { padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--hairline-strong); background: var(--surface); transition: border-color var(--t-micro), box-shadow var(--t-micro); } .cta-field input:focus, .cta-field select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-50); outline: none; } .cta-field input.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180,82,75,0.12); } .cta-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); } .cta-actions .btn { justify-content: center; } .cta-micro { grid-column: 1 / -1; font-size: 13px; color: var(--ink-soft); margin: var(--s-2) 0 0; } @media (max-width: 620px) { .cta-form { grid-template-columns: 1fr; } } .cta-success { text-align: center; padding: var(--s-6) var(--s-2); } .cta-success-mark { color: var(--success); width: 64px; height: 64px; margin: 0 auto var(--s-4); } .cta-success h3 { font-family: var(--font-display); font-weight: 400; font-size: 30px; } .cta-success p { color: var(--ink-muted); margin: var(--s-2) 0 var(--s-5); } .cta-success-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; } /* ──────────────────────────── FAQ ──────────────────────────── */ .faq { border-block-start: 1px solid var(--hairline); } .faq-item { border-block-end: 1px solid var(--hairline); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%; text-align: start; padding: var(--s-5) var(--s-2); font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 2vw, 21px); color: var(--ink); } .faq-chev { font-size: 26px; font-weight: 300; color: var(--brand-700); transition: transform var(--t-default); line-height: 1; } .faq-item.is-open .faq-chev { transform: rotate(45deg); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-default); } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .faq-a > p { overflow: hidden; margin: 0; padding: 0 var(--s-2); color: var(--ink-muted); } .faq-item.is-open .faq-a > p { padding-block-end: var(--s-5); } /* ──────────────────────────── Footer ──────────────────────────── */ .footer { position: relative; overflow: hidden; background: var(--ink); color: rgba(255,255,255,0.78); padding: var(--s-9) 0 var(--s-7); } .footer a { color: rgba(255,255,255,0.78); } .footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-7); position: relative; z-index: 2; } .footer-brand p { max-width: 36ch; font-size: 15px; } .footer-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-wordmark); font-weight: 500; font-size: 26px; letter-spacing: 0.06em; margin-bottom: var(--s-3); } .footer-contact { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s-4); } .footer-contact-row { display: flex; align-items: center; gap: 10px; font-size: 14px; } .footer-contact-row svg { width: 16px; height: 16px; color: var(--brand-500); flex: none; } .footer h4 { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: 0.08em; margin-bottom: var(--s-4); } .footer-grid ul { display: flex; flex-direction: column; gap: 10px; } .footer-grid ul a, .footer-static { font-size: 14px; } .footer-static { color: rgba(255,255,255,0.5); } .footer-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,0.12); } .footer-bottom small { color: rgba(255,255,255,0.5); font-size: 13px; } .footer-social { display: flex; gap: var(--s-3); } .footer-social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.08); } .footer-social a:hover { background: var(--brand-700); } .footer-social svg { width: 18px; height: 18px; } .footer-wordmark { position: absolute; inset-block-end: -3.5vw; inset-inline: 0; z-index: 0; text-align: center; pointer-events: none; font-family: var(--font-wordmark); font-weight: 300; font-size: clamp(110px, 26vw, 420px); line-height: 0.8; letter-spacing: 0.02em; color: rgba(255,255,255,0.06); user-select: none; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } /* ──────────────────────────── Sticky stack ──────────────────────────── */ .sticky-stack { position: fixed; inset-block-end: var(--s-5); inset-inline-end: var(--s-5); z-index: 45; display: flex; flex-direction: column; gap: var(--s-3); opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none; transition: opacity var(--t-default), transform var(--t-default); } .sticky-stack.is-on { opacity: 1; transform: none; pointer-events: auto; } .sticky-btn { position: relative; width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-float); } .sticky-btn svg { width: 26px; height: 26px; } .sticky-wa { background: var(--wa); color: #fff; } .sticky-phone { background: var(--brand-700); color: #fff; } .sticky-tip { position: absolute; inset-inline-start: calc(100% + 12px); white-space: nowrap; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity var(--t-micro), transform var(--t-micro); } .sticky-btn:hover .sticky-tip { opacity: 1; transform: none; } .pulse-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,0.5); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 100% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } } @media (max-width: 720px) { .sticky-btn { width: 48px; height: 48px; } } /* ──────────────────────────── Reveal animation ──────────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--t-macro) var(--rd, 0ms), transform var(--t-macro) var(--rd, 0ms); } .reveal.is-in { opacity: 1; transform: none; } /* ──────────────────────────── Accessibility widget (IS 5568) ──────────────────────────── */ /* Bottom-right corner (inline-start in RTL) — the hero stats own the bottom-left */ .a11y-toggle { position: fixed; inset-block-end: var(--s-5); inset-inline-start: var(--s-5); z-index: 60; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-float); } .a11y-toggle svg { width: 26px; height: 26px; } .a11y-panel { position: fixed; inset-block-end: calc(var(--s-5) + 64px); inset-inline-start: var(--s-5); z-index: 60; width: min(320px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-float); padding: var(--s-5); } .a11y-panel h2 { font-family: var(--font-display); font-weight: 500; font-size: 18px; margin-bottom: var(--s-4); } .a11y-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); } .a11y-btns { display: flex; gap: 6px; } .a11y-btns button { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--mist); font-weight: 700; } .a11y-btns button:hover { background: var(--mist-deep); } .a11y-tog { display: block; width: 100%; text-align: start; padding: 11px 14px; margin-bottom: 8px; border-radius: var(--r-sm); background: var(--mist); font-weight: 500; } .a11y-tog[aria-pressed="true"] { background: var(--brand-700); color: #fff; } .a11y-reset { display: block; width: 100%; text-align: center; padding: 11px; margin-top: var(--s-2); border-radius: var(--r-sm); border: 1px solid var(--hairline-strong); font-weight: 600; } .a11y-reset:hover { background: var(--mist); } .a11y-foot { font-size: 12px; color: var(--ink-soft); margin: var(--s-4) 0 0; } /* A11y body overrides */ body.a11y-contrast { --paper: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --ink-muted: #1a1a1a; --ink-soft: #333; --hairline: rgba(0,0,0,0.5); --hairline-strong: rgba(0,0,0,0.7); } body.a11y-contrast .hero { background: #FFFFFF; } body.a11y-contrast .hero::before, body.a11y-contrast .hero-arc { display: none; } body.a11y-contrast .hero-frame { box-shadow: none; border: 2px solid #000; } body.a11y-contrast .hero-chip { background: #FFFFFF; border: 1.5px solid #000; } body.a11y-contrast .h1-em { -webkit-text-fill-color: currentColor; color: var(--brand-deep); background: none; } body.a11y-links a { text-decoration: underline; text-underline-offset: 3px; } body.a11y-readable, body.a11y-readable * { font-family: Arial, 'Assistant', sans-serif !important; letter-spacing: 0.01em; } body.a11y-motion *, body.a11y-motion *::before, body.a11y-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } body.a11y-motion .reveal { opacity: 1 !important; transform: none !important; } body.a11y-motion .pop-preview img { transition: none !important; } body.a11y-motion .fl-draw, body.a11y-motion .h2-underline path { stroke-dashoffset: 0 !important; } body.a11y-motion .flowline .fl-word { clip-path: none !important; } body.a11y-motion .flowline .fl-num, body.a11y-motion .flowline .fl-copy { opacity: 1 !important; transform: none !important; } body.a11y-motion .flowline .fl-node { transform: none !important; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .pulse-ring { animation: none; } .fl-draw, .h2-underline path { stroke-dashoffset: 0 !important; } .flowline .fl-word { clip-path: none !important; } .flowline .fl-num, .flowline .fl-copy { opacity: 1 !important; transform: none !important; } .flowline .fl-node { transform: none !important; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }