/* ==================================================================== LIQUID SKIN — bridge legacy .bf-* + Tailwind patterns to Liquid Mid · Onest. Loads AFTER kit-base.css + liquid-base.css + liquid-mid-onest.css so it can target legacy class names (`.bf-hero`, `.bf-card`, `.bf-section`, `.bf-btn-*`, `.bf-mode-card`, `.bf-feature`, `.bf-tier`, `.bf-lane`, etc.) and re-skin them with kit tokens — glass surfaces, Onest typography, breathing CTA, atmospheric color blobs, theme-driven accent. Pages keep their existing markup. This stylesheet ensures they LOOK like Liquid Mid · Onest without per-page rewrites. Page-specific layout (grids, custom illustrations, mode-specific visuals) is untouched. Reference: marketing/gallery/liquid-mid-onest/ ==================================================================== */ /* ---- Onest as the global body font (overrides Tailwind defaults). ---- */ html body { font-family: 'Onest', 'Inter', system-ui, sans-serif !important; font-size: 16.5px; line-height: 1.6; letter-spacing: 0; } html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .font-display, html body .bf-h1, html body .bf-h2, html body .bf-section-title, html body .bf-wordmark, html body .bf-lane-title, html body .bf-mode-name, html body .bf-feature-title, html body .bf-stat-num, html body .bf-tier-title { font-family: 'Onest', 'Inter', system-ui, sans-serif !important; } html body .bf-h1, html body .bf-section-title { letter-spacing: -0.028em; font-weight: 700; } html body h2, html body .bf-h2 { letter-spacing: -0.018em; font-weight: 600; } html body h3, html body h4 { letter-spacing: -0.012em; font-weight: 600; } /* ---- Override Tailwind's hard body background so the kit atmosphere reads. The .kit-page background gradient + .liq::before atmosphere blob live BEHIND content, but Tailwind's bg-surface-900 on paints over them. Replace with the kit's deeper gradient. ---- */ html body.bg-surface-900, html body.kit-page { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--k-accent-rgb), 0.16) 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 90% 80%, rgba(var(--k-accent-rgb), 0.08) 0%, transparent 60%), var(--k-bg) !important; } /* Light themes get the bright paper background. */ html[data-theme="arctic"] body, html[data-theme="ivory"] body, html[data-theme="rose"] body, html[data-theme="sage"] body { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--k-accent-rgb), 0.10) 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 90% 80%, rgba(var(--k-accent-rgb), 0.06) 0%, transparent 60%), var(--k-bg) !important; color: var(--k-ink); } /* ---- Atmosphere blob behind content — same recipe as .liq::before but attached directly to body so it works on pages where .liq class on body isn't enough due to Tailwind's stacking. ---- */ body.liq::before { z-index: 0; } /* ---- Hero — re-skin the homepage / landing-page hero. ---- */ .bf-hero { position: relative; z-index: 1; } .bf-hero::before { /* Replace the legacy three-color radial with a softer Liquid drift. */ background: radial-gradient(ellipse 48% 32% at 14% 8%, rgba(var(--k-accent-rgb), 0.36) 0%, transparent 60%), radial-gradient(ellipse 50% 32% at 86% 88%, rgba(120, 220, 255, 0.22) 0%, transparent 60%), radial-gradient(ellipse 35% 24% at 80% 12%, rgba(255, 180, 220, 0.16) 0%, transparent 60%) !important; filter: blur(46px); animation: liq-drift 18s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .bf-hero::before { animation: none; } } .bf-h1 .lit, .bf-h1 .accent, .bf-section-title .lit, .bf-stat-num, .bf-wordmark .accent, .brand-name .accent, .earnings-title-accent, .hero-title-accent, .result-title-accent, .result-archetype-accent, .quiz-h1 .lit, .quiz-h1 .accent, /* Headings on subpages frequently use hard-coded Tailwind colors (text-electric-pink, text-electric-cyan, text-electric-yellow, text-glow-pink, text-glow-cyan) to highlight the second half of a title — e.g. "Find your people. Tuesday at 7." or "The friends are the point." Retarget those highlights to the same theme-driven gradient text the homepage uses, so every page reads the same accent regardless of theme. */ h1 .text-electric-pink, h1 .text-electric-cyan, h1 .text-electric-yellow, h1 .text-electric-green, h1 .text-brand-400, h1 .text-brand-500, h1 .text-glow-pink, h1 .text-glow-cyan, h2 .text-electric-pink, h2 .text-electric-cyan, h2 .text-electric-yellow, h2 .text-electric-green, h2 .text-brand-400, h2 .text-brand-500, h2 .text-glow-pink, h2 .text-glow-cyan, h3 .text-electric-pink, h3 .text-electric-cyan, h3 .text-electric-yellow, h3 .text-electric-green, h3 .text-brand-400, h3 .text-brand-500 { /* Theme-accent driven gradient text: light-accent → accent → accent-pink mix. Static (no panning). Uses background-image longhand instead of background shorthand — the shorthand resets background-clip to border-box, which would paint the gradient as a solid rectangle instead of clipping it to the text glyphs. */ background-image: linear-gradient(90deg, color-mix(in srgb, var(--k-accent) 65%, #fff) 0%, var(--k-accent) 50%, color-mix(in srgb, var(--k-accent) 60%, #f472b6) 100%) !important; background-color: transparent !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } /* ---- Buttons — glassy, breathing, 14px radius. ---- */ .bf-btn, .bf-btn-primary, .bf-btn-ghost, .btn-shimmer, .cta-primary, a.nav-cta-primary, a.nav-cta-secondary, button.btn-primary, .btn-primary { font-family: 'Onest', 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -0.002em !important; border-radius: 14px !important; text-transform: none !important; } .bf-btn-primary, .btn-shimmer, .cta-primary, a.nav-cta-primary, button.btn-primary, .btn-primary, .earnings-hero-cta-btn, .hero-cta-btn, .quiz-cta, a.quiz-cta, button.quiz-cta { /* Liquid Mid · Onest primary CTA — accent-tinted glass with white top-highlight curve, breathing outer glow. Theme-driven (each of the 14 themes flips the accent color). No panning gradient — only the breathing glow animates. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 100%), rgba(var(--k-accent-rgb), 0.55) !important; background-blend-mode: overlay, normal !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; color: #fff !important; padding: 0.78rem 1.5rem !important; font-size: 0.98rem !important; box-shadow: 0 12px 28px -8px rgba(var(--k-accent-rgb), 0.55), inset 0 1.5px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important; position: relative; overflow: hidden; animation: liq-breathe 4.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .bf-btn-primary, .btn-shimmer, .cta-primary, a.nav-cta-primary, button.btn-primary, .btn-primary, .earnings-hero-cta-btn, .hero-cta-btn, .quiz-cta, a.quiz-cta, button.quiz-cta { animation: none; } } .bf-btn-primary:hover, .btn-shimmer:hover, .cta-primary:hover, a.nav-cta-primary:hover, button.btn-primary:hover { transform: translateY(-2px); } .bf-btn-ghost, a.nav-cta-secondary, .btn-ghost { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; color: var(--k-ink) !important; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.32), inset 0 1.5px 0 rgba(255, 255, 255, 0.18) !important; } [data-theme="arctic"] .bf-btn-ghost, [data-theme="ivory"] .bf-btn-ghost, [data-theme="rose"] .bf-btn-ghost, [data-theme="sage"] .bf-btn-ghost, [data-theme="arctic"] a.nav-cta-secondary, [data-theme="ivory"] a.nav-cta-secondary, [data-theme="rose"] a.nav-cta-secondary, [data-theme="sage"] a.nav-cta-secondary { background: rgba(255, 255, 255, 0.6) !important; color: var(--k-ink) !important; } @media (prefers-reduced-motion: reduce) { .bf-btn-primary, .btn-shimmer, .cta-primary, a.nav-cta-primary, button.btn-primary, .btn-primary { animation: none; } } /* ---- Cards / glass surfaces — turn every legacy card into a Liquid card. Important: do NOT blanket-apply `position: relative` or `overflow: hidden` on the generic `.glass`/`.card` selectors because some pages use `position: sticky` on those cards (earnings result-card) or rely on content overflowing the card (tooltips, popovers). Only the bespoke `.bf-lane`/`.bf-tier`/`.bf-card`/`.bf-mode-card`/`.bf-feature` recipes — where this stylesheet adds its own `::after` inner highlight — set positioning context. ---- */ .bf-lane, .bf-mode-card, .bf-feature, .bf-tier, .bf-card, .bf-stats-band, .bf-trust-pill, .glass, .glass-card, .card, .feature-card { background: var(--k-card-bg) !important; border: 1px solid var(--k-border) !important; backdrop-filter: var(--k-card-blur) !important; -webkit-backdrop-filter: var(--k-card-blur) !important; box-shadow: var(--k-shadow-sm) !important; } .bf-lane, .bf-mode-card, .bf-feature, .bf-tier, .bf-card { position: relative; overflow: hidden; } .bf-lane, .bf-tier, .bf-stats-band, .bf-card { border-radius: var(--k-r-md) !important; } .bf-mode-card, .bf-feature { border-radius: var(--k-r-sm) !important; } .bf-trust-pill { border-radius: var(--k-r-pill) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } /* Inset top highlight on cards — the liquid signature. */ .bf-lane::after, .bf-tier::after, .bf-card::after, .bf-mode-card::after, .bf-feature::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 28%); z-index: 0; } .bf-lane > *, .bf-tier > *, .bf-card > *, .bf-mode-card > *, .bf-feature > * { position: relative; z-index: 1; } .bf-lane:hover, .bf-mode-card:hover, .bf-feature:hover, .bf-tier:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -16px rgba(var(--k-accent-rgb), 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.22) !important; border-color: rgba(var(--k-accent-rgb), 0.4) !important; } /* ---- Tailwind glass patterns used across the site. ---- */ html body .bg-white\/5, html body .bg-white\/10, html body .bg-surface-800\/80, html body .bg-surface-700\/50, html body .bg-surface-600\/50 { background: var(--k-card-bg) !important; backdrop-filter: var(--k-card-blur) !important; -webkit-backdrop-filter: var(--k-card-blur) !important; } html body .border-white\/5, html body .border-white\/10 { border-color: var(--k-border) !important; } html body .rounded-2xl { border-radius: var(--k-r-md) !important; } html body .rounded-xl { border-radius: var(--k-r-sm) !important; } html body .rounded-3xl { border-radius: var(--k-r-lg) !important; } html body .backdrop-blur-xl, html body .backdrop-filter { backdrop-filter: var(--k-card-blur) !important; -webkit-backdrop-filter: var(--k-card-blur) !important; } /* ---- Gradient brand text — re-tint to use the theme accent so all 14 themes produce a coherent gradient (not a hard-coded purple→pink one). ---- */ html body .bg-clip-text.text-transparent, html body .from-electric-pink, html body .from-brand-500, html body .from-brand-400 { background-image: linear-gradient(90deg, color-mix(in srgb, var(--k-accent) 70%, #fff) 0%, var(--k-accent) 50%, color-mix(in srgb, var(--k-accent) 60%, #f472b6) 100%) !important; } /* ---- Form inputs — glassy with focus accent ring. ---- */ html body input[type="text"], html body input[type="email"], html body input[type="search"], html body input[type="tel"], html body input[type="url"], html body input[type="password"], html body select, html body textarea { font-family: 'Onest', 'Inter', system-ui, sans-serif; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--k-border-2); border-radius: var(--k-r-sm); color: var(--k-ink); padding: 0.85rem 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } [data-theme="arctic"] html body input, [data-theme="ivory"] html body input, [data-theme="rose"] html body input, [data-theme="sage"] html body input, [data-theme="arctic"] html body select, [data-theme="ivory"] html body select, [data-theme="rose"] html body select, [data-theme="sage"] html body select, [data-theme="arctic"] html body textarea, [data-theme="ivory"] html body textarea, [data-theme="rose"] html body textarea, [data-theme="sage"] html body textarea { background: rgba(255, 255, 255, 0.58); color: var(--k-ink); } html body input:focus, html body select:focus, html body textarea:focus { outline: 0; border-color: var(--k-accent); box-shadow: 0 0 0 3px rgba(var(--k-accent-rgb), 0.22); } /* ---- Pill / badge legacy classes. ---- */ .bf-eyebrow, .bf-mode-pill { font-family: 'Onest', 'Inter', system-ui, sans-serif !important; } .bf-mode-pill, .tag, .pill { background: rgba(var(--k-accent-rgb), 0.12) !important; color: var(--k-accent) !important; border: 1px solid rgba(var(--k-accent-rgb), 0.3) !important; border-radius: 999px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } /* ---- Sections — let kit padding rhythm take over. ---- */ .bf-section { position: relative; z-index: 1; } .bf-section-title { font-weight: 700; } /* ---- Trust pill row — give each pill the glass treatment. ---- */ .bf-trust-pill { background: var(--k-card-bg) !important; border: 1px solid var(--k-border-2) !important; } /* ---- Accent dots / mode-card emoji halos — keep but soften. ---- */ .bf-trust-pill .dot { background: var(--k-accent) !important; box-shadow: 0 0 8px var(--k-glow) !important; } /* ---- Library + blog body copy — Onest at the kit reading size. ---- */ .library-article p, .library-article li, .blog-post p, .blog-post li, .legal-page p, .legal-page li { font-family: 'Onest', 'Inter', system-ui, sans-serif; font-size: 16.5px; line-height: 1.7; color: var(--k-ink-2); } .library-article h2, .blog-post h2, .legal-page h2 { letter-spacing: -0.018em; } /* ---- Floating theme picker — give the panel + button the full glass treatment. ---- */ .theme-float-btn { background: var(--k-card-bg) !important; border: 1px solid var(--k-border) !important; backdrop-filter: var(--k-card-blur) !important; -webkit-backdrop-filter: var(--k-card-blur) !important; box-shadow: var(--k-shadow-sm) !important; color: var(--k-ink-2) !important; } .theme-float-btn:hover { color: var(--k-ink) !important; border-color: var(--k-accent) !important; } .theme-float-panel { background: var(--k-card-bg) !important; border: 1px solid var(--k-border-2) !important; border-radius: var(--k-r-md) !important; backdrop-filter: var(--k-card-blur) !important; -webkit-backdrop-filter: var(--k-card-blur) !important; box-shadow: var(--k-shadow-sm) !important; padding: 0.7rem 0.85rem !important; } .theme-float-swatch.active { border-color: var(--k-accent) !important; box-shadow: 0 0 0 2px rgba(var(--k-accent-rgb), 0.35), 0 6px 14px -4px rgba(var(--k-accent-rgb), 0.45) !important; } /* First-visit theme-hint bubble — glass-up. */ .theme-float-hint { background: var(--k-card-bg) !important; border: 1px solid var(--k-border-2) !important; border-radius: var(--k-r-sm) !important; backdrop-filter: var(--k-card-blur) !important; -webkit-backdrop-filter: var(--k-card-blur) !important; box-shadow: var(--k-shadow-sm) !important; color: var(--k-ink) !important; } /* ---- Cookie consent banner — same kit treatment, kit-btn buttons. ---- */ #bf-cookie-banner { background: var(--k-card-bg) !important; border: 1px solid var(--k-border-2) !important; border-radius: var(--k-r-md) !important; backdrop-filter: var(--k-card-blur) !important; -webkit-backdrop-filter: var(--k-card-blur) !important; box-shadow: var(--k-shadow-md) !important; color: var(--k-ink) !important; } #bf-cookie-banner .bf-consent-btn-accept { background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 100%), rgba(var(--k-accent-rgb), 0.55) !important; background-blend-mode: overlay, normal !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; color: #fff !important; border-radius: 14px !important; font-family: 'Onest', 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; box-shadow: 0 12px 28px -8px rgba(var(--k-accent-rgb), 0.55), inset 0 1.5px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important; } #bf-cookie-banner .bf-consent-btn-reject { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 14px !important; color: var(--k-ink) !important; font-family: 'Onest', 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; } [data-theme="arctic"] #bf-cookie-banner .bf-consent-btn-reject, [data-theme="ivory"] #bf-cookie-banner .bf-consent-btn-reject, [data-theme="rose"] #bf-cookie-banner .bf-consent-btn-reject, [data-theme="sage"] #bf-cookie-banner .bf-consent-btn-reject { background: rgba(255, 255, 255, 0.6) !important; } /* ---- Site nav — bump glass blur on the navbar to match kit. ---- */ .site-navbar { backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); } .nav-blur { backdrop-filter: blur(32px) saturate(170%); -webkit-backdrop-filter: blur(32px) saturate(170%); } /* Nav dropdown panels — soften corners + glass. */ .nav-dropdown-panel, .mega-dropdown, .mega-panel { background: var(--k-card-bg) !important; border: 1px solid var(--k-border-2) !important; border-radius: var(--k-r-md) !important; backdrop-filter: var(--k-card-blur) !important; -webkit-backdrop-filter: var(--k-card-blur) !important; box-shadow: var(--k-shadow-md) !important; } /* Mobile drawer aside. */ #mobile-menu, .mobile-menu { background: var(--k-bg) !important; border-left: 1px solid var(--k-border-2) !important; backdrop-filter: var(--k-card-blur); -webkit-backdrop-filter: var(--k-card-blur); } /* ---- Hard-coded color highlights that aren't inside headings — neutralize the pink-only text-shadow on `.text-glow-pink` (used outside h-tags too) so it follows the theme accent instead of the original hard-coded pink. ---- */ .text-glow-pink { text-shadow: 0 0 30px rgba(var(--k-accent-rgb), 0.5) !important; } .text-glow-cyan { text-shadow: 0 0 30px rgba(var(--secondary-rgb, 34, 211, 238), 0.5) !important; } /* ---- Hero rotating taglines — players page, hosts page, etc. use a `.hero-tagline` element animated with `tagline-shine`. Replace the hard-coded yellow/pink/cyan/purple multi-color shine with the same soft theme-accent gradient the homepage `.lit` highlight uses. Drop the keyframe shine animation — only static gradient + the existing crossfade between rotator entries remains. ---- */ .hero-tagline { background: none !important; background-image: linear-gradient(90deg, color-mix(in srgb, var(--k-accent) 65%, #fff) 0%, var(--k-accent) 50%, color-mix(in srgb, var(--k-accent) 60%, #f472b6) 100%) !important; background-size: 100% 100% !important; background-position: 0% 50% !important; background-color: transparent !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; animation: none !important; } /* ---- Section breathing room — many venue/mode pages declare only `pb-16` / `pb-20` on their
elements, leaving zero top padding. Result: each section's

sits flush against the previous section's bottom edge (the "Four modes for the rotation" / "A month of programming" squashing reported on /venues/pubs/). Use `:where()` so the rule has zero specificity — any explicit Tailwind `pt-*` class (specificity 0,1,0) on a section still wins, so the hero with `pt-12 md:pt-20` is untouched. ---- */ :where(body.liq > section) { padding-top: 3rem; } @media (min-width: 768px) { :where(body.liq > section) { padding-top: 4rem; } } /* ---- Numbered timeline lists (used on most venue/mode pages — the "A typical Tuesday, host's view" / "How a game night goes" pattern). The original `
    ` with `w-9 h-9` (36px) number badges reads as squashed at desktop sizes. Bump badge size + add vertical breathing between items via `:where()` so a page can still opt in to tighter spacing by adding its own `space-y-*` class. ---- */ :where(body.liq ol.space-y-4, body.liq ol.space-y-5) > li + li { margin-top: 1.5rem; } @media (min-width: 768px) { :where(body.liq ol.space-y-4, body.liq ol.space-y-5) > li + li { margin-top: 1.75rem; } } /* Bump the small 36px number circle (.w-9.h-9) up to 44px when it's used inside a flex row with `flex-shrink-0` — that's the timeline badge pattern. Doesn't affect 36px circles used elsewhere (icon badges, compact chips). */ :where(body.liq li.flex) > .flex-shrink-0.w-9.h-9 { width: 2.75rem; height: 2.75rem; font-size: 1rem; } /* ---- Quiz answer buttons (used by /quiz, /personality, /trivia-archetype). Re-skin to glass cards with accent focus + selected state. ---- */ button.answer-btn, .answer-btn { font-family: 'Onest', 'Inter', system-ui, sans-serif !important; background: var(--k-card-bg) !important; border: 1px solid var(--k-border-2) !important; border-radius: var(--k-r-sm) !important; backdrop-filter: var(--k-card-blur) !important; -webkit-backdrop-filter: var(--k-card-blur) !important; color: var(--k-ink) !important; box-shadow: var(--k-shadow-sm) !important; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important; position: relative; overflow: hidden; } button.answer-btn:hover, .answer-btn:hover { border-color: var(--k-accent) !important; transform: translateY(-2px) !important; box-shadow: 0 22px 50px -16px rgba(var(--k-accent-rgb), 0.32), inset 0 1.5px 0 rgba(255, 255, 255, 0.22) !important; } button.answer-btn.selected, .answer-btn.selected, .answer-btn[aria-selected="true"] { border-color: var(--k-accent) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(var(--k-accent-rgb), 0.18) !important; box-shadow: 0 12px 30px -10px rgba(var(--k-accent-rgb), 0.45), inset 0 1.5px 0 rgba(255, 255, 255, 0.28) !important; } .answer-letter, .answer-text { font-family: 'Onest', 'Inter', system-ui, sans-serif !important; } /* Personality / trivia-archetype quiz result chips. */ .trait-pill, .trait-pills > * { font-family: 'Onest', 'Inter', system-ui, sans-serif !important; background: rgba(var(--k-accent-rgb), 0.12) !important; color: var(--k-accent) !important; border: 1px solid rgba(var(--k-accent-rgb), 0.3) !important; border-radius: 999px !important; padding: 0.32rem 0.85rem !important; font-weight: 600 !important; } /* Quiz panels — keep flow but inherit kit body type. */ .quiz-panel, section.panel { font-family: 'Onest', 'Inter', system-ui, sans-serif; } /* ---- Reduced motion guard — single source of truth. The kit's own reduced-motion guards cover .liq classes; this covers our re-skinned legacy classes too. ---- */ @media (prefers-reduced-motion: reduce) { .bf-lane, .bf-mode-card, .bf-feature, .bf-tier { transition: none; } .bf-lane:hover, .bf-mode-card:hover, .bf-feature:hover, .bf-tier:hover { transform: none; } }