/* ============================================================================ Vocalify — Landing (Aurora Glass) Self-contained premium stylesheet. Dual theme via [data-theme] on . ========================================================================== */ /* ---- Tokens ------------------------------------------------------------- */ :root, [data-theme='light'] { --bg: 228 28% 95%; --bg-subtle: 228 24% 92%; --surface: 0 0% 100%; --surface-2: 228 24% 97%; --border: 228 18% 84%; --border-strong: 228 18% 72%; --fg: 228 32% 12%; --fg-muted: 226 14% 38%; --fg-subtle: 226 12% 56%; --brand: 162 78% 38%; --brand-2: 176 74% 36%; --brand-strong: 164 84% 32%; --brand-fg: 0 0% 100%; --accent: 34 92% 46%; --accent-fg: 0 0% 100%; --pitch-intune: 152 70% 42%; --pitch-near: 84 70% 44%; --pitch-off: 35 92% 52%; --pitch-far: 2 80% 58%; --glass: rgba(255, 255, 255, 0.66); --glass-2: rgba(255, 255, 255, 0.86); --glass-brd: rgba(20, 24, 45, 0.09); --glass-brd-strong: rgba(20, 24, 45, 0.16); --shadow-sm: 0 1px 2px rgba(40, 45, 80, 0.08); --shadow-md: 0 16px 34px -18px rgba(40, 45, 80, 0.22); --shadow-lg: 0 30px 60px -28px rgba(40, 45, 80, 0.30); --glow-brand: 0 0 0 1px hsl(var(--brand) / 0.45), 0 18px 50px -18px hsl(var(--brand) / 0.35); --mesh: radial-gradient(58% 48% at 12% 0%, hsl(160 80% 50% / 0.16), transparent 60%), radial-gradient(50% 46% at 100% 6%, hsl(176 74% 50% / 0.14), transparent 56%), radial-gradient(64% 60% at 50% 118%, hsl(190 70% 50% / 0.08), transparent 62%); --grid-line: rgba(20, 24, 45, 0.045); color-scheme: light; } [data-theme='dark'] { --bg: 228 24% 6%; --bg-subtle: 228 22% 9%; --surface: 228 20% 13%; --surface-2: 228 18% 17%; --border: 228 16% 30%; --border-strong: 228 16% 42%; --fg: 222 24% 96%; --fg-muted: 222 12% 68%; --fg-subtle: 224 10% 48%; --brand: 158 84% 52%; --brand-2: 174 76% 50%; --brand-strong: 168 84% 58%; --brand-fg: 165 60% 8%; --accent: 38 96% 60%; --accent-fg: 30 45% 10%; --pitch-intune: 152 70% 48%; --pitch-near: 84 70% 48%; --pitch-off: 35 92% 56%; --pitch-far: 2 80% 62%; --glass: rgba(255, 255, 255, 0.045); --glass-2: rgba(255, 255, 255, 0.075); --glass-brd: rgba(255, 255, 255, 0.09); --glass-brd-strong: rgba(255, 255, 255, 0.17); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 16px 34px -16px rgba(0, 0, 0, 0.6); --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.7); --glow-brand: 0 0 0 1px hsl(var(--brand) / 0.4), 0 18px 60px -18px hsl(var(--brand) / 0.45); --mesh: radial-gradient(58% 48% at 14% 0%, hsl(158 84% 56% / 0.20), transparent 60%), radial-gradient(50% 46% at 100% 8%, hsl(174 76% 56% / 0.16), transparent 56%), radial-gradient(64% 60% at 50% 118%, hsl(190 80% 55% / 0.09), transparent 62%); --grid-line: rgba(210, 220, 255, 0.05); color-scheme: dark; } /* ---- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; line-height: 1.6; color: hsl(var(--fg)); background: hsl(var(--bg)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; line-height: 1.1; letter-spacing: -0.02em; margin: 0; font-weight: 600; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg { display: block; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } :focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: hsl(var(--brand)); color: hsl(var(--brand-fg)); padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 600; } .skip-link:focus { left: 0; } /* ---- Ambient background ------------------------------------------------- */ .bg-mesh { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: hsl(var(--bg)); background-image: var(--mesh); } .bg-grid { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); } .bg-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Layout ------------------------------------------------------------ */ .wrap { width: min(1120px, 92vw); margin: 0 auto; } .section { padding: clamp(64px, 9vw, 130px) 0; position: relative; } .section--alt { background: hsl(var(--bg-subtle) / 0.5); } /* ---- Nav --------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; transition: background var(--dur, 220ms), border-color var(--dur, 220ms), backdrop-filter var(--dur, 220ms); border-bottom: 1px solid transparent; } .nav.scrolled { background: hsl(var(--bg) / 0.7); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--glass-brd); } .nav__inner { width: min(1120px, 92vw); margin: 0 auto; height: 68px; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; letter-spacing: -0.02em; } .brand__mark { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; display: block; box-shadow: 0 6px 20px -8px hsl(var(--brand) / 0.5); } .brand__mark svg { width: 100%; height: 100%; display: block; } .nav__links { display: flex; gap: 28px; margin-left: 16px; } .nav__links a { font-size: 0.92rem; color: hsl(var(--fg-muted)); font-weight: 500; transition: color 160ms; } .nav__links a:hover { color: hsl(var(--fg)); } .nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .theme-toggle { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: hsl(var(--fg-muted)); border: 1px solid var(--glass-brd); background: var(--glass); transition: color 160ms, border-color 160ms, transform 160ms; } .theme-toggle:hover { color: hsl(var(--fg)); border-color: var(--glass-brd-strong); transform: translateY(-1px); } .theme-toggle .i-moon { display: none; } [data-theme='dark'] .theme-toggle .i-sun { display: none; } [data-theme='dark'] .theme-toggle .i-moon { display: block; } .nav__burger { display: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--glass-brd); background: var(--glass); flex-direction: column; gap: 4px; align-items: center; justify-content: center; } .nav__burger span { width: 16px; height: 2px; background: hsl(var(--fg)); border-radius: 2px; transition: transform 200ms, opacity 200ms; } .nav__drawer { display: none; flex-direction: column; gap: 18px; padding: 20px 24px 28px; border-top: 1px solid var(--glass-brd); background: hsl(var(--bg) / 0.92); backdrop-filter: blur(18px); } .nav__drawer.open { display: flex; } .nav__drawer a { color: hsl(var(--fg-muted)); font-weight: 500; } /* ---- Buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; border: 1px solid transparent; transition: transform 160ms, box-shadow 220ms, background 160ms, border-color 160ms; white-space: nowrap; } .btn--lg { height: 52px; padding: 0 24px; font-size: 1rem; border-radius: 14px; } .btn--sm { height: 38px; padding: 0 16px; font-size: 0.86rem; border-radius: 10px; } .btn--primary { color: hsl(var(--brand-fg)); background: linear-gradient(135deg, hsl(var(--brand)), hsl(var(--brand-2))); box-shadow: var(--glow-brand); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px hsl(var(--brand) / 0.5), 0 22px 50px -18px hsl(var(--brand) / 0.55); } .btn--ghost { color: hsl(var(--fg)); background: var(--glass); border-color: var(--glass-brd); backdrop-filter: blur(12px); } .btn--ghost:hover { border-color: var(--glass-brd-strong); transform: translateY(-2px); background: var(--glass-2); } /* ---- Card -------------------------------------------------------------- */ .card { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 20px; backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--shadow-md); transition: transform 260ms cubic-bezier(0.2,0,0,1), border-color 260ms, box-shadow 260ms; } .card:hover { transform: translateY(-4px); border-color: var(--glass-brd-strong); box-shadow: var(--shadow-lg); } /* ---- Pills / eyebrows -------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 500; color: hsl(var(--fg-muted)); background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(10px); } .pill__dot { width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--brand)); box-shadow: 0 0 0 4px hsl(var(--brand) / 0.25); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--brand)); margin-bottom: 14px; } .section__head { max-width: 660px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; } .section__title { font-size: clamp(1.9rem, 4vw, 2.8rem); } .section__lead { color: hsl(var(--fg-muted)); margin-top: 16px; font-size: 1.05rem; } .grad-text { background: linear-gradient(120deg, hsl(var(--brand)), hsl(var(--brand-2) / 0.95) 40%, hsl(var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- HERO -------------------------------------------------------------- */ .hero { width: min(1120px, 92vw); margin: 0 auto; padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 110px); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero__title { font-size: clamp(2.4rem, 5.6vw, 4.2rem); } .hero__sub { margin-top: 22px; font-size: 1.12rem; color: hsl(var(--fg-muted)); max-width: 42ch; } .hero__cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; } .hero__meta { margin-top: 36px; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; } .hero__meta li { font-size: 0.88rem; color: hsl(var(--fg-muted)); } .hero__meta strong { color: hsl(var(--fg)); font-weight: 600; } /* Hero visual — live piano-roll preview (theme-aware inline SVG) */ .hero__viz { position: relative; } .viz__shadow { position: absolute; inset: -2px; z-index: -1; border-radius: 24px; filter: blur(40px); opacity: 0.5; background: linear-gradient(120deg, hsl(var(--brand)), hsl(var(--brand-2))); } .demo { padding: 16px; position: relative; z-index: 1; } .demo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .roll-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; color: hsl(var(--fg-muted)); } .roll-score { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 0.85rem; color: hsl(var(--pitch-intune)); background: hsl(var(--pitch-intune) / 0.12); padding: 4px 10px; border-radius: 999px; } .demo-graph-static { border-radius: 14px; overflow: hidden; } .hero-roll { display: block; width: 100%; height: auto; border-radius: 14px; } .demo-hint { margin-top: 12px; font-size: 0.8rem; color: hsl(var(--fg-muted)); text-align: center; } /* ---- Marquee ----------------------------------------------------------- */ .marquee { overflow: hidden; border-block: 1px solid var(--glass-brd); background: hsl(var(--bg-subtle) / 0.4); padding: 18px 0; } .marquee__track { display: flex; width: max-content; white-space: nowrap; animation: scroll 40s linear infinite; } /* Two identical groups; translateX(-50%) lands on the boundary → seamless loop. Each group is wide enough to span the viewport, so no edge ever shows a gap. */ .marquee__group { display: flex; gap: 28px; align-items: center; padding-right: 28px; flex-shrink: 0; } .marquee__group span { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; color: hsl(var(--fg-muted)); letter-spacing: -0.01em; } .marquee__group .dot { color: hsl(var(--brand)); } @keyframes scroll { to { transform: translateX(-50%); } } /* ---- Features ---------------------------------------------------------- */ .features { width: min(1120px, 92vw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feature { padding: 28px; } .feature__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: hsl(var(--brand)); margin-bottom: 18px; background: linear-gradient(135deg, hsl(var(--brand) / 0.18), hsl(var(--brand-2) / 0.08)); border: 1px solid hsl(var(--brand) / 0.22); } .feature h3 { font-size: 1.18rem; margin-bottom: 8px; } .feature p { color: hsl(var(--fg-muted)); font-size: 0.95rem; } /* ---- Steps ------------------------------------------------------------- */ .steps { width: min(1120px, 92vw); margin: 0 auto; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; } .step { padding: 30px; position: relative; } .step__num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.9rem; color: hsl(var(--brand)); letter-spacing: 0.1em; } .step h3 { font-size: 1.2rem; margin: 14px 0 8px; } .step p { color: hsl(var(--fg-muted)); font-size: 0.95rem; } /* ---- Development pillars (range / intonation / ear) -------------------- */ .pillars { width: min(1120px, 92vw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .pillar { padding: 32px 28px; } .pillar__icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: hsl(var(--brand)); margin-bottom: 20px; background: linear-gradient(135deg, hsl(var(--brand) / 0.18), hsl(var(--brand-2) / 0.08)); border: 1px solid hsl(var(--brand) / 0.22); } .pillar h3 { font-size: 1.24rem; margin-bottom: 10px; } .pillar > p { color: hsl(var(--fg-muted)); font-size: 0.95rem; margin-bottom: 18px; } .pillar ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; } .pillar li { position: relative; padding-left: 24px; color: hsl(var(--fg-muted)); font-size: 0.92rem; } .pillar li::before { content: ''; position: absolute; left: 5px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--brand)); box-shadow: 0 0 0 3px hsl(var(--brand) / 0.18); } /* ---- Quote ------------------------------------------------------------- */ .quote { width: min(820px, 92vw); margin: 0 auto; padding: clamp(36px, 5vw, 56px); text-align: center; } .quote p { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.3; letter-spacing: -0.02em; } .quote footer { margin-top: 18px; color: hsl(var(--fg-subtle)); font-size: 0.9rem; } /* ---- FAQ --------------------------------------------------------------- */ .faq { width: min(760px, 92vw); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq__item { padding: 0; } .faq__item summary { list-style: none; cursor: pointer; padding: 22px 26px; font-weight: 600; font-family: 'Space Grotesk', sans-serif; font-size: 1.08rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: '+'; font-size: 1.4rem; color: hsl(var(--brand)); transition: transform 200ms; flex-shrink: 0; } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item p { padding: 0 26px 24px; color: hsl(var(--fg-muted)); } /* ---- CTA --------------------------------------------------------------- */ .cta { padding: clamp(48px, 7vw, 90px) 0 clamp(64px, 8vw, 110px); } .cta__card { width: min(960px, 92vw); margin: 0 auto; padding: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; background: radial-gradient(60% 80% at 50% 0%, hsl(var(--brand) / 0.16), transparent 60%), var(--glass); border: 1px solid var(--glass-brd-strong); } .cta__card h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); } .cta__card p { margin: 14px auto 28px; color: hsl(var(--fg-muted)); max-width: 40ch; } /* ---- Footer ------------------------------------------------------------ */ .footer { border-top: 1px solid var(--glass-brd); background: hsl(var(--bg-subtle) / 0.5); padding: 48px 0 40px; } .footer__inner { width: min(1120px, 92vw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; } .footer__brand p { color: hsl(var(--fg-subtle)); font-size: 0.88rem; margin-top: 8px; } .footer__links { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; } .footer__links a, .footer__links button { color: hsl(var(--fg-muted)); font-size: 0.9rem; } .footer__links a:hover, .footer__links button:hover { color: hsl(var(--fg)); } .footer__copy { color: hsl(var(--fg-subtle)); font-size: 0.85rem; } /* ---- Legal pages (privacy) --------------------------------------------- */ .legal { padding: clamp(40px, 7vw, 90px) 0 clamp(64px, 9vw, 120px); } .legal-inner { width: min(820px, 92vw); margin: 0 auto; } .legal-inner h1 { font-size: clamp(2rem, 4vw, 2.8rem); } .legal-meta { color: hsl(var(--fg-subtle)); font-size: 0.9rem; margin: 8px 0 28px; } .legal-inner h2 { font-size: 1.4rem; margin: 38px 0 12px; } .legal-inner h3 { font-size: 1.08rem; margin: 24px 0 8px; } .legal-inner p { color: hsl(var(--fg-muted)); margin-bottom: 14px; } .legal-inner ul { color: hsl(var(--fg-muted)); margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .legal-inner a { color: hsl(var(--brand)); text-decoration: underline; text-underline-offset: 2px; } .legal-inner a:hover { color: hsl(var(--brand-strong)); } .legal-inner strong { color: hsl(var(--fg)); } .legal-inner em { color: hsl(var(--fg)); font-style: italic; } .legal-inner code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.88em; background: hsl(var(--fg) / 0.07); padding: 1px 6px; border-radius: 6px; } .legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 0.92rem; } .legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border: 1px solid var(--glass-brd); color: hsl(var(--fg-muted)); } .legal-table th { color: hsl(var(--fg)); font-weight: 600; background: hsl(var(--bg-subtle) / 0.5); } /* ---- Cookie consent ---------------------------------------------------- */ .cookie-notice { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 16px); z-index: 200; width: min(680px, 92vw); display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-brd-strong); backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 240ms, transform 240ms; } /* `display:flex` above outranks the UA [hidden]{display:none}, so hide it explicitly — otherwise a dismissed banner stays laid out (invisible) and keeps intercepting clicks over the footer. */ .cookie-notice[hidden] { display: none; } .cookie-notice.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .cookie-text { font-size: 0.86rem; color: hsl(var(--fg-muted)); } .cookie-more { display: inline-block; margin-top: 4px; font-size: 0.82rem; color: hsl(var(--brand)); } .cookie-actions { display: flex; gap: 10px; } /* ---- Reveal animation -------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms cubic-bezier(0.2,0,0,1), transform 700ms cubic-bezier(0.2,0,0,1); transition-delay: var(--d, 0ms); } .reveal.in { opacity: 1; transform: none; } /* ---- Responsive -------------------------------------------------------- */ @media (max-width: 920px) { .hero { grid-template-columns: 1fr; } .hero__viz { order: -1; max-width: 560px; margin-inline: auto; } .features { grid-template-columns: repeat(2, 1fr); } .pillars { grid-template-columns: 1fr; max-width: 520px; } .steps { grid-template-columns: 1fr; } } @media (max-width: 680px) { .nav__links { display: none; } /* Drawer carries the CTA on phones — keep the bar from crowding/overflowing. */ .nav__actions .btn { display: none; } .nav__burger { display: flex; } .features { grid-template-columns: 1fr; } .footer__inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .nav__inner { height: 60px; gap: 12px; } .brand { font-size: 1rem; } .hero { padding-top: 32px; } .hero__sub { font-size: 1.04rem; } .hero__cta { flex-direction: column; align-items: stretch; } .hero__cta .btn { width: 100%; justify-content: center; } .hero__meta { gap: 8px 18px; } .feature, .step { padding: 24px 22px; } .pillar { padding: 26px 22px; } .quote { padding: 32px 24px; } .faq__item summary { padding: 18px 20px; font-size: 1rem; } .faq__item p { padding: 0 20px 20px; } .cta__card { padding: 36px 24px; } /* Narrow screens: footer links wrap into a 2-col grid instead of one unshrinkable row that forces horizontal page scroll. */ .footer__links { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 28px; justify-content: start; align-items: start; } .cookie-notice { flex-direction: column; align-items: stretch; bottom: 10px; gap: 12px; } .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; justify-content: center; } /* Wide privacy tables scroll instead of forcing horizontal page overflow. */ .legal-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .marquee__track { animation: none; } }