/* ================================================================ BetweenShifts — betweenshift.com A&S Health Handelsbolag · Registered in Sweden ---------------------------------------------------------------- Single shared stylesheet. Author-organized via @layer + sectioned banners. Components reference CSS custom properties; no hex literals inside component rules so dark-mode token swap is total. CRITICAL selectors (also inlined in of /index.html and /sv/index.html, keep in sync): :root tokens, base typography, .skip-link, .site-header*, .section--hero, .hero__*, .btn, .btn--primary, .btn--secondary, .container, prefers-reduced-motion. ================================================================ */ @layer reset, tokens, base, layout, components, utilities, a11y; /* === 01 RESET ================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } a { color: inherit; } } /* === 02 TOKENS ================================================= */ @layer tokens { :root { /* Brand */ --primary: #8851F8; --primary-light: #f4effe; --primary-dark: #6a3fd0; /* Surfaces (light mode default) */ --bg: #FFFBFB; --surface: #F6F6F9; --surface-2: #FFFFFF; --text: #4E475C; --text-strong: #2A2433; --text-muted: #6B6386; --border: rgba(0, 0, 0, 0.08); /* Hero gradient (aliased so dark mode can override) */ --hero-grad-from: #f4effe; --hero-grad-to: #FFFBFB; /* Card hover shadow alpha (overridden in dark) */ --shadow-card: 0 4px 20px rgba(136, 81, 248, 0.08); --shadow-cta: 0 6px 22px rgba(136, 81, 248, 0.28); /* Primary CTA gradient */ --grad-primary: linear-gradient(135deg, #8851F8 0%, #b794f4 100%); /* Semantic */ --success: #10B981; --error: #EF4444; --warning: #F59E0B; --info: #3B82F6; /* Type scale (rem-based, mobile-first). Tweak any single step to resize that role site-wide. Body stays at 1rem (16px) for accessibility. */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 — body */ --fs-md: 1.0625rem; /* 17 */ --fs-lg: 1.1875rem; /* 19 */ --fs-xl: 1.375rem; /* 22 */ --fs-2xl: 1.625rem; /* 26 */ --fs-3xl: 2rem; /* 32 */ /* Line heights */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.65; /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Spacing scale (4px base) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 6rem; /* Radius */ --r-card: 12px; --r-input: 16px; --r-pill: 999px; /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 120ms var(--ease); --t-base: 200ms var(--ease); /* Layout --container-vw : container width as % of viewport from 768px up --container-max : hard cap on container width (px) --read-max : line-length cap for prose blocks (.reading) --hero-vw : hero width as % of viewport from 768px up --hero-max : hard cap on hero width (px) Tweak these to resize content site-wide. Hero is intentionally wider than the body container for visual impact. */ --container-vw: 50vw; --container-max: 760px; --read-max: 480px; --hero-vw: 92vw; --hero-max: 1400px; /* Font stack */ --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } } /* === 03 FONTS ================================================== */ @layer tokens { @font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/PlusJakartaSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/PlusJakartaSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/PlusJakartaSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/PlusJakartaSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } } /* === 04 BASE =================================================== */ @layer base { html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--text); background: var(--bg); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { color: var(--text-strong); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: -0.01em; } h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); } h4 { font-size: var(--fs-md); } p { line-height: var(--lh-body); } a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--primary-dark); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--primary); color: #fff; } @media (min-width: 768px) { h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } } } /* === 05 LAYOUT ================================================= */ @layer layout { .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-4); } @media (min-width: 768px) { .container { width: min(var(--container-vw), var(--container-max)); max-width: var(--container-max); padding-inline: 0; } } .section { padding-block: var(--sp-7); } @media (min-width: 768px) { .section { padding-block: var(--sp-8); } } @media (min-width: 1024px) { .section { padding-block: var(--sp-9); } } .reading { max-width: var(--read-max); margin-inline: auto; } .grid-2 { display: grid; gap: var(--sp-6); } .grid-4 { display: grid; gap: var(--sp-5); } @media (min-width: 768px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } .grid-4 { gap: var(--sp-6); } } .stack > * + * { margin-top: var(--sp-4); } .stack-lg > * + * { margin-top: var(--sp-5); } } /* === 06 COMPONENTS ============================================= */ @layer components { /* --- Skip link (a11y) --- */ .skip-link { position: absolute; top: var(--sp-3); left: var(--sp-3); background: var(--primary); color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); font-weight: var(--fw-semibold); z-index: 100; transform: translateY(-150%); transition: transform var(--t-base); } .skip-link:focus { transform: translateY(0); color: #fff; } /* --- Site header --- */ .site-header > .container { width: 100%; max-width: none; padding-inline: var(--sp-5); } .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); } .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); padding-block: var(--sp-3); transition: padding-block 200ms var(--ease); } .site-header__inner > .site-header__brand { justify-self: start; } .site-header__inner > .site-nav__toggle { justify-self: end; } .site-header__inner .site-nav__list { justify-self: center; } .site-header__inner > .site-nav__right { justify-self: end; } .site-header[data-state="scrolled"] .site-header__inner { padding-block: var(--sp-1); } .site-header__brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-md); } .site-header__brand:hover { color: var(--text-strong); } .site-header__brand img, .site-header__brand picture { display: block; height: 40px; width: auto; } /* --- Site nav (desktop horizontal / mobile sheet) --- */ .site-nav { display: contents; } .site-nav__list { list-style: none; display: flex; align-items: center; gap: var(--sp-5); } .site-nav__link { position: relative; color: var(--text); font-weight: var(--fw-medium); font-size: var(--fs-sm); } .site-nav__link:hover { color: var(--primary); } /* Animated underline on hover/focus for header text links */ .site-nav__link::after, .site-nav__right .lang-switch::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform 200ms var(--ease); } .site-nav__right .lang-switch { position: relative; } .site-nav__link:hover::after, .site-nav__link:focus-visible::after, .site-nav__right .lang-switch:hover::after, .site-nav__right .lang-switch:focus-visible::after { transform: scaleX(1); } .site-nav__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; color: var(--text-strong); } .site-nav__toggle:hover { background: var(--primary-light); color: var(--primary); } .site-nav__toggle .icon-close { display: none; } .site-nav__toggle[aria-expanded="true"] .icon-open { display: none; } .site-nav__toggle[aria-expanded="true"] .icon-close { display: block; } .site-nav__right { display: inline-flex; align-items: center; gap: var(--sp-3); } /* Header lang-switch: text-link, not pill (footer keeps the pill style) */ .site-nav__right .lang-switch { padding: var(--sp-1) var(--sp-2); border: none; background: transparent; color: var(--text-muted); font-size: var(--fs-sm); } .site-nav__right .lang-switch:hover { color: var(--primary); background: transparent; border-color: transparent; } /* Header CTA: matches nav link text size (no bigger than the rest) */ .site-nav__right .btn { padding: var(--sp-1) var(--sp-3); min-height: 32px; font-size: 0.625rem; gap: var(--sp-1); } .site-nav__right .btn svg { width: 10px; height: 10px; } /* Mobile nav: collapsed by default ONLY when JS is ready */ @media (max-width: 767.98px) { .site-header__inner { grid-template-columns: 1fr auto; } .site-nav__toggle { display: inline-flex; } .site-nav { display: none; } [data-js="ready"] .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-2); border-bottom: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); } [data-js="ready"] .site-nav[data-state="open"] { display: block; } [data-js="ready"] .site-nav .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-4); } [data-js="ready"] .site-nav .site-nav__link { display: block; padding: var(--sp-3) var(--sp-2); border-radius: 8px; } [data-js="ready"] .site-nav .site-nav__link:hover { background: var(--primary-light); } /* Without JS, nav lays out below brand row, always visible */ .site-nav.site-nav--inline { display: block; } .site-nav.site-nav--inline .site-nav__list { flex-wrap: wrap; gap: var(--sp-4); } } /* --- Lang switcher --- */ .lang-switch { display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.05em; text-transform: uppercase; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .lang-switch:hover { background: var(--primary-light); color: var(--primary); border-color: transparent; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.875rem 1.5rem; border-radius: var(--r-pill); font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: 1; text-align: center; transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base), color var(--t-base); white-space: nowrap; min-height: 44px; } .btn--primary { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-cta); } .btn--primary:hover { color: #fff; transform: translateY(-1px); } .btn--primary:active { transform: translateY(0); } .btn--secondary { background: transparent; color: var(--text-strong); border: 1px solid var(--border); } .btn--secondary:hover { background: var(--primary-light); color: var(--primary); border-color: transparent; } .btn--ghost { background: transparent; color: var(--primary); padding: 0.5rem 0.75rem; } .btn--ghost:hover { background: var(--primary-light); color: var(--primary); } .btn--block { width: 100%; } /* --- Cards --- */ .card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-5); transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base); } .card--feature { display: flex; flex-direction: column; gap: var(--sp-3); } .card--feature:hover { box-shadow: var(--shadow-card); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); transform: translateY(-2px); } .card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; } .card__icon svg { width: 24px; height: 24px; } .card__title { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-strong); } .card__body { color: var(--text); font-size: var(--fs-sm); } /* --- Sections --- */ .section--hero { padding-top: var(--sp-7); padding-bottom: var(--sp-8); background: linear-gradient(180deg, var(--hero-grad-from) 0%, var(--hero-grad-to) 100%); } .hero__inner { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; /* Override .container — hero spans wider than body content */ width: 100%; max-width: var(--hero-max); padding-inline: var(--sp-4); } @media (min-width: 768px) { .hero__inner { width: min(var(--hero-vw), var(--hero-max)); max-width: var(--hero-max); padding-inline: 0; } } .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--primary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; width: fit-content; } .hero__title { font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--text-strong); margin-top: var(--sp-4); } .hero__lead { font-size: var(--fs-md); color: var(--text); max-width: 36ch; margin-top: var(--sp-4); } .hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); } .hero__note { color: var(--text-muted); font-size: var(--fs-xs); margin-top: var(--sp-3); } /* Phone mockup (decorative) */ .phone { display: none; width: 280px; aspect-ratio: 280 / 580; margin-inline: auto; background: #1c1a23; border-radius: 44px; padding: 12px; box-shadow: 0 30px 60px rgba(136, 81, 248, 0.18), 0 8px 24px rgba(0, 0, 0, 0.18); position: relative; } .phone__screen { width: 100%; height: 100%; border-radius: 32px; background: linear-gradient(160deg, #b794f4 0%, #8851F8 60%, #6a3fd0 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .phone__notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 90px; height: 26px; background: #0d0c11; border-radius: 999px; z-index: 2; } .phone__mascot { width: 78%; height: auto; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.22)); animation: mascot-float 5s ease-in-out infinite; } @keyframes mascot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (min-width: 1024px) { .hero__inner { grid-template-columns: 1fr 1fr; align-items: center; } .phone { display: block; } } /* Why-section */ .section--why { background: var(--bg); } .why__eyebrow { color: var(--primary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; } /* Features */ .section--features { background: var(--surface); } /* Mentor band */ .section--band { background: var(--primary-light); } .band__inner { text-align: center; max-width: 640px; margin-inline: auto; } /* Waitlist */ .section--waitlist { background: var(--grad-primary); color: #fff; text-align: center; } .section--waitlist h2, .section--waitlist p { color: #fff; } .section--waitlist p { opacity: 0.92; } .section--waitlist .reading { max-width: 560px; } .form-waitlist { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); } .form-waitlist__row { display: flex; flex-direction: column; gap: var(--sp-3); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--r-input); padding: var(--sp-2); backdrop-filter: blur(6px); } .form-waitlist__input { flex: 1; border: 0; background: transparent; color: #fff; padding: 0.875rem 1rem; font-size: var(--fs-base); border-radius: var(--r-pill); min-height: 44px; } .form-waitlist__input::placeholder { color: rgba(255, 255, 255, 0.7); } .form-waitlist__input:focus { outline: 0; background: rgba(255, 255, 255, 0.16); } .form-waitlist__submit { background: #fff; color: var(--primary-dark); font-weight: var(--fw-bold); padding: 0.875rem 1.5rem; border-radius: var(--r-pill); transition: transform var(--t-fast), color var(--t-base); min-height: 44px; } .form-waitlist__submit:hover { transform: translateY(-1px); color: var(--primary); } .form-waitlist__submit:disabled { opacity: 0.6; cursor: progress; } .form-waitlist__note { font-size: var(--fs-xs); opacity: 0.85; } .form-waitlist__message { font-size: var(--fs-sm); margin-top: var(--sp-3); padding: 0.625rem 0.875rem; border-radius: var(--r-card); background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.32); } .form-waitlist__message[data-state="error"] { background: rgba(255, 255, 255, 0.92); color: #b42323; border-color: transparent; } @media (min-width: 560px) { .form-waitlist__row { flex-direction: row; align-items: center; } } /* About */ .section--about { background: var(--bg); text-align: center; } /* Contact */ .section--contact { background: var(--surface); } .contact-list { list-style: none; display: grid; gap: var(--sp-3); margin-top: var(--sp-5); } .contact-list strong { display: inline-block; min-width: 7rem; color: var(--text-strong); } /* --- Footer --- */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); padding-block: var(--sp-7) var(--sp-5); color: var(--text-muted); font-size: var(--fs-sm); } .site-footer__brand-row { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); } .site-footer__logo { width: 56px; height: auto; display: block; } .site-footer__tagline { color: var(--text); max-width: 28ch; font-size: var(--fs-md); } .site-footer__cols { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } .site-footer__group h3 { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-2); } .site-footer__list { list-style: none; display: grid; gap: 0; font-size: var(--fs-sm); line-height: 1.5; } .site-footer__list a { display: inline-block; color: var(--text-muted); transform-origin: left center; transition: color 200ms var(--ease), transform 200ms var(--ease); } .site-footer__list a:hover { color: var(--primary); transform: scale(1.12); } .site-footer__list li:has(+ li > a:hover) > a { transform: translateY(-0.18rem); } .site-footer__list li:has(> a:hover) + li > a { transform: translateY(0.18rem); } .site-footer__legal { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-xs); } @media (min-width: 768px) { .site-footer__cols { grid-template-columns: repeat(5, auto); justify-content: space-between; column-gap: var(--sp-4); row-gap: var(--sp-6); } .site-footer__legal { flex-direction: row; justify-content: space-between; align-items: center; } } /* --- Footer reveal overlay (desktop, scroll-driven) --- The footer slides up as a translucent backdrop-blurred overlay while
is counter-translated to stay visually pinned. Driven by CSS scroll-driven animations (animation-timeline + view-timeline) so the transforms run on the compositor thread in lockstep with scroll — no JS-thread lag, no jitter. Browsers without animation-timeline support, mobile widths, and reduced-motion users fall through to the normal static block at end of page. */ .footer-spacer { pointer-events: none; height: 0; } @supports (animation-timeline: scroll()) { @media (min-width: 768px) { [data-js="ready"] body { timeline-scope: --footer-reveal; } [data-js="ready"] .footer-spacer { height: 100vh; view-timeline-name: --footer-reveal; } [data-js="ready"] main { animation-name: main-pin; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --footer-reveal; animation-range: entry 0% entry 100%; } [data-js="ready"] .site-footer { position: fixed; inset: auto 0 0 0; height: 100vh; z-index: 60; background: color-mix(in srgb, var(--surface) 60%, transparent); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); overflow-y: auto; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); display: flex; flex-direction: column; justify-content: flex-end; transform: translateY(100%); animation-name: footer-reveal; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --footer-reveal; animation-range: entry 0% entry 100%; } [data-js="ready"] .site-footer > .container { margin-top: auto; } [data-js="ready"] .site-footer__brand-row { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); margin: 0; align-items: center; gap: var(--sp-3); } [data-js="ready"] .site-footer__logo { width: clamp(64px, 5.5vw, 88px); } [data-js="ready"] .site-footer__tagline { margin: 0; max-width: none; white-space: nowrap; text-align: center; font-size: clamp(1.25rem, 1.8vw, 1.625rem); color: var(--text); } } @media (prefers-reduced-motion: reduce) and (min-width: 768px) { [data-js="ready"] .footer-spacer { height: 0; } [data-js="ready"] main { animation: none; transform: none; } [data-js="ready"] .site-footer { animation: none; position: static; transform: none; height: auto; overflow: visible; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); } } } @keyframes main-pin { from { transform: translateY(0); } to { transform: translateY(100vh); } } @keyframes footer-reveal { from { transform: translateY(100%); } to { transform: translateY(0); } } /* --- Legal page (privacy / terms) --- */ .legal-hero { padding-top: var(--sp-7); padding-bottom: var(--sp-5); background: linear-gradient(180deg, var(--hero-grad-from) 0%, var(--bg) 100%); } .legal-banner { background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-left: 4px solid var(--primary); border-radius: var(--r-card); padding: var(--sp-4) var(--sp-5); color: var(--text); font-size: var(--fs-sm); box-shadow: var(--shadow-card); } .legal-banner strong { color: var(--text-strong); } .legal-content { padding-block: var(--sp-7); } .legal-content h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); } .legal-content h2:first-of-type { margin-top: 0; } .legal-content p, .legal-content ul { margin-top: var(--sp-3); } .legal-content ul { padding-left: 1.25rem; } .legal-content li + li { margin-top: var(--sp-2); } .legal-content a { font-weight: var(--fw-semibold); } } /* === 07 UTILITIES ============================================== */ @layer utilities { .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .nowrap { white-space: nowrap; } .hide-mobile { display: none; } @media (min-width: 768px) { .hide-mobile { display: initial; } } } /* === 08 PREFERENCES (dark mode + reduced motion) =============== */ @layer tokens { @media (prefers-color-scheme: dark) { :root { --bg: #121015; --surface: #1C1A23; --surface-2: #221F2B; --text: #C9C2D9; --text-strong: #F2EEFA; --text-muted: #908AAA; --border: rgba(255, 255, 255, 0.08); --hero-grad-from: rgba(136, 81, 248, 0.18); --hero-grad-to: #121015; --primary-light: rgba(136, 81, 248, 0.14); --shadow-card: 0 8px 28px rgba(136, 81, 248, 0.25); --shadow-cta: 0 8px 28px rgba(136, 81, 248, 0.45); } } } @layer a11y { @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } } /* === 09 REVEAL ================================================= */ @layer a11y { [data-js="ready"] [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); will-change: opacity, transform; } [data-js="ready"] [data-reveal][data-revealed="true"] { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-js="ready"] [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } } /* === 09 UNLAYERED OVERRIDES ==================================== Rules placed outside @layer to beat unlayered inline critical CSS in /index.html and /sv/index.html (which lives in the implicit layer with higher priority than any named layer). */ .section--waitlist h2 { color: #fff; font-weight: 700; } @supports (animation-timeline: scroll()) { @media (min-width: 768px) { [data-js="ready"] .site-footer > .container { width: 75%; max-width: none; margin-inline: auto; padding-inline: 0; } } }