/* ============================================================================ * Suunta.ai Landing v2 — Design Tokens * ---------------------------------------------------------------------------- * Northern Lights -paletti yhteensopiva sovelluksen kanssa (beta.suunta.ai). * Käytetään SAMOJA token-nimiä missä mahdollista — landingin ja sovelluksen * tyylit pysyvät synkronissa kun kävijä siirtyy landingilta sovellukseen. * * Eroavaisuus sovellus-tokeneihin: * - Karsittu lista (landingilla ei tarvita hero-themat, ops-tokeneita, * 128 alpha-tinttiä, jne.) * - Ops styleguiden minimalismi-periaatteet sisäänrakennettuna * * Periaatteet (Ops styleguide): * 1. One accent — emerald. Reserved for primary CTA, active, focus. * 2. Hairlines, not glow. Cards lean on 1px borders. * 3. Type does the work. Hierarchy = size + weight + tracking. * 4. Still surfaces. Motion only for state change. * 5. Tabular numerals everywhere. * * Theme system: * → light koko sivulla (oletus) *
→ dark vain tässä osiossa * ============================================================================ */ :root { /* ════════════════════════════════════════════════════════════════════════ * BRAND COLORS — "Northern Sky" * Suora kopio sovelluksesta. Yhteensopivuus → konsistenssi. * ════════════════════════════════════════════════════════════════════════ */ --brand-blue-100: rgba(82, 88, 102, 1); /* #525866 — lightest */ --brand-blue-200: rgba(62, 68, 82, 1); --brand-blue-300: rgba(48, 53, 66, 1); --brand-blue-400: rgba(38, 42, 54, 1); --brand-blue-500: rgba(28, 32, 42, 1); /* #1c202a — primary dark bg */ --brand-blue-550: rgba(26, 31, 46, 1); --brand-blue-600: rgba(24, 27, 36, 1); --brand-blue-700: rgba(18, 20, 28, 1); /* #12141c — deepest, button text */ /* ════════════════════════════════════════════════════════════════════════ * NEUTRALS * ════════════════════════════════════════════════════════════════════════ */ --white: rgba(255, 255, 255, 1); --grey-100: rgba(248, 250, 252, 1); /* #f8fafc */ --grey-200: rgba(241, 245, 249, 1); /* #f1f5f9 */ --grey-300: rgba(229, 233, 240, 1); --grey-500: rgba(226, 232, 240, 1); /* #e2e8f0 */ --grey-600: rgba(209, 213, 219, 1); --grey-700: rgba(184, 189, 198, 1); /* Slate (text + neutral UI) */ --slate-400: rgba(148, 163, 184, 1); --slate-500: rgba(100, 116, 139, 1); --slate-600: rgba(71, 85, 105, 1); --slate-700: rgba(51, 65, 85, 1); --slate-900: rgba(15, 23, 42, 1); /* #0f172a — text on light */ /* ════════════════════════════════════════════════════════════════════════ * AURORA EMERALD — primary accent (sama sovelluksessa) * ════════════════════════════════════════════════════════════════════════ */ --emerald-300: rgba(110, 231, 183, 1); /* #6ee7b7 */ --emerald-400: rgba(52, 211, 153, 1); /* #34d399 */ --emerald-500: rgba(16, 185, 129, 1); /* #10b981 — primary */ --emerald-600: rgba(5, 150, 105, 1); /* #059669 — hover */ --emerald-700: rgba(4, 120, 87, 1); /* #047857 — accent text on light */ --emerald-soft: rgba(16, 185, 129, 0.08); /* hover bg, soft chip */ /* ════════════════════════════════════════════════════════════════════════ * ARCTIC GOLD — secondary accent (harkittu, ei monessa paikassa) * ════════════════════════════════════════════════════════════════════════ */ --gold-400: rgba(251, 191, 36, 1); --gold-500: rgba(245, 158, 11, 1); --gold-600: rgba(217, 119, 6, 1); --gold-700: rgba(180, 83, 9, 1); /* ════════════════════════════════════════════════════════════════════════ * FUNCTIONAL — error, info, warning, success * ════════════════════════════════════════════════════════════════════════ */ --red-500: rgba(239, 68, 68, 1); --red-600: rgba(185, 28, 28, 1); --blue-500: rgba(59, 130, 246, 1); --blue-600: rgba(37, 99, 235, 1); /* ════════════════════════════════════════════════════════════════════════ * SPACING — 4px grid, ei half-steppejä * ════════════════════════════════════════════════════════════════════════ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ /* ════════════════════════════════════════════════════════════════════════ * RADIUS — pyöreyttä, mutta hillityt * ════════════════════════════════════════════════════════════════════════ */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.625rem; /* 10px */ --radius-lg: 0.875rem; /* 14px */ --radius-xl: 1.125rem; /* 18px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* ════════════════════════════════════════════════════════════════════════ * TYPOGRAPHY — Inter Variable (sama kuin sovellus) * Inter glyph variants (cv02 cv03 cv04 cv11 ss01) suositellaan Ops styleguidesta. * ════════════════════════════════════════════════════════════════════════ */ --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace; /* Type scale — pieni-keskikoot static, isot clamp() responsiiviseen kasvuun */ --text-2xs: 0.625rem; /* 10px — micro */ --text-eyebrow: 0.6875rem; /* 11px — UPPERCASE eyebrow */ --text-xs: 0.75rem; /* 12px — caption */ --text-sm: 0.875rem; /* 14px — secondary, button-sm */ --text-body: 0.9375rem; /* 15px — narrative body */ --text-base: 1rem; /* 16px — baseline */ --text-lg: 1.125rem; /* 18px — large body / card title */ --text-xl: 1.25rem; /* 20px — section subtitle */ /* Display (fluid) — landing hero on iso (paksuus tulee koosta, ei painosta). Kasvatettu v0:sta — kevyt 400-paino vaatii enemmän kokoa erottuakseen. */ --text-2xl: clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem); /* 24→30 */ --text-3xl: clamp(1.875rem, 1.7rem + 0.875vw, 2.5rem); /* 30→40 */ --text-4xl: clamp(2.5rem, 2.2rem + 1.5vw, 3.75rem); /* 40→60 */ --text-5xl: clamp(2.25rem, 1.65rem + 3vw, 4rem); /* 36→64 — hero h1, 64px @ 1280px */ /* Weights — Premium-minimalismi: kevyt + ilmava. Apple/Linear-tyyli. * Paksuus tulee koosta, ei painosta. Inter Variable mahdollistaa * portaattomat painot (myös half-steps kuten 450 jos halutaan). */ --weight-regular: 400; /* body */ --weight-medium: 500; /* h1–h4, eyebrow, buttons */ --weight-display: 500; /* hero h1 — medium, paksuus koosta ja painosta sopusoinnussa */ --weight-heading: 500; /* h2–h4 — solid mutta ei raskas */ --weight-semibold: 600; /* harvoissa paikoissa: korostettu vahvuus */ /* Line heights — tighter for elegance */ --leading-display: 1.02; /* hero — almost touching */ --leading-heading: 1.12; /* h2/h3 — tighter than v1 */ --leading-snug: 1.3; --leading-body: 1.6; --leading-loose: 1.75; /* Letter spacing — kevyet painot vaativat tighter trackingin näyttääkseen elegantilta. Klassinen Apple-typografia: -0.04 isoilla, -0.02 keskikoissa. */ --tracking-tightest: -0.04em; /* 48px+ display — hero h1 */ --tracking-tighter: -0.025em; /* 24–36px headings */ --tracking-tight: -0.015em; /* 18–20px subheads, button text */ --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-widest: 0.08em; /* UPPERCASE eyebrow */ /* ════════════════════════════════════════════════════════════════════════ * SHADOWS — hairlines first, shadows for hover / lift only * ════════════════════════════════════════════════════════════════════════ */ --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03); --shadow-2: 0 4px 6px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-3: 0 10px 20px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.04); --shadow-4: 0 25px 50px rgba(15, 23, 42, 0.12), 0 10px 20px rgba(15, 23, 42, 0.05); /* Focus ring — 3px emerald @ 18% alpha (Ops style) */ --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.18); /* ════════════════════════════════════════════════════════════════════════ * TRANSITIONS — yksi standardi (Ops styleguide: 180ms cubic-bezier) * V2.4 polish: lisätty hover-ease (spring-tyylinen) ja --transition-fast * ════════════════════════════════════════════════════════════════════════ */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); /* gentle ease-out spring */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */ --transition-fast: 120ms var(--ease); --transition: 180ms var(--ease); --transition-slow: 280ms var(--ease); /* drawer/modal mount + theme swap */ --transition-hover: 220ms var(--ease-out-soft); /* hover state polish */ /* ════════════════════════════════════════════════════════════════════════ * LAYOUT * ════════════════════════════════════════════════════════════════════════ */ --container-narrow: 720px; --container-default: 1120px; --container-wide: 1280px; /* Section padding (vertical) */ --section-y-mobile: var(--space-16); /* 64px */ --section-y-tablet: var(--space-20); /* 80px */ --section-y-desktop: var(--space-32); /* 128px */ /* Anchor sections (hero, final-cta, footer) — taller */ --section-y-anchor-mobile: var(--space-20); /* 80px */ --section-y-anchor-tablet: var(--space-32); /* 128px */ --section-y-anchor-desktop: var(--space-48); /* 192px */ /* Z-index */ --z-nav: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; /* ════════════════════════════════════════════════════════════════════════ * BUTTON TEXT ON ACCENT — KRIITTINEN: AINA TUMMA * Golden rule: emerald-painike käyttää AINA tummaa tekstiä, EI valkoista, * sekä light- että dark-themessä. Tämä on Suunta.ai-brändin signal — ja * kohtuullisemmin luettava emerald-paossa kuin valkoinen. * ════════════════════════════════════════════════════════════════════════ */ --text-on-accent: var(--brand-blue-700); /* #12141c — ALWAYS dark */ } /* ============================================================================ * THEME: LIGHT (default) * Lähde: sovelluksen [data-theme="light"] override + landing-tarpeet. * ============================================================================ */ /* HUOM symmetria dark-teeman kanssa: dark on bare `[data-theme='dark']` (toimii myös nestattuna elementissä), joten light tarvitsee saman bare `[data-theme='light']`-selektorin → light-saareke tumman osion sisällä (esim. modaali-lomake dark-sectionissa) saa oikeat vaaleat tokenit. Ilman tätä nestattu data-theme="light" peri dark-tokenit (valkoinen teksti). */ :root, :root[data-theme='light'], [data-theme='light'] { /* Surfaces */ --bg-page: #f6f8fb; /* page bg */ --bg-card: var(--white); /* cards */ --bg-elevated: var(--white); /* modals, popovers */ --bg-subtle: #f1f5fa; /* zone bg (e.g. toolbar) */ --bg-sunken: #f1f5fa; /* inputs, wells */ /* Text — slate-900 with alpha steps (Ops styleguide pattern). Hieman cleaner kuin v0: secondary 0.64 → 0.60 (kevyempi), tertiary 0.46 → 0.42 (vähemmän painokas). Primary 0.92 pysyy. */ --text-primary: rgba(15, 23, 42, 0.92); --text-secondary: rgba(15, 23, 42, 0.60); --text-tertiary: rgba(15, 23, 42, 0.42); --text-muted: rgba(15, 23, 42, 0.28); /* Borders — kolme hiusviivapainoa, kaikki hieman subtler kuin v0. Premium = hairlines etäisempi ja ohuempi. */ --border-subtle: rgba(15, 23, 42, 0.05); /* default hairline — tuskin näkyy */ --border-default: rgba(15, 23, 42, 0.08); /* hover, secondary button rest */ --border-strong: rgba(15, 23, 42, 0.14); /* active, focused, selected */ /* Accent — emerald-500 on white = WCAG AA */ --accent: var(--emerald-500); --accent-hover: var(--emerald-600); --accent-soft: var(--emerald-soft); --accent-text: var(--emerald-700); /* #047857 — emerald text on white = AA */ color-scheme: light; } /* ============================================================================ * THEME: DARK (anchor sections only) * Hero, product showcase, final CTA, footer. * ============================================================================ */ [data-theme='dark'] { /* Surfaces */ --bg-page: var(--brand-blue-500); /* #1c202a */ --bg-card: var(--brand-blue-600); --bg-elevated: var(--brand-blue-550); --bg-subtle: var(--brand-blue-600); --bg-sunken: var(--brand-blue-700); /* Text — white with alpha steps. Cleaner kuin v0: secondary 0.78 → 0.72, premium-tunteen vuoksi. */ --text-primary: rgba(255, 255, 255, 0.95); --text-secondary: rgba(226, 232, 240, 0.72); --text-tertiary: rgba(255, 255, 255, 0.46); --text-muted: rgba(148, 163, 184, 0.5); /* Borders — subtler white overlay */ --border-subtle: rgba(255, 255, 255, 0.05); --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); /* Accent */ --accent: var(--emerald-500); --accent-hover: var(--emerald-400); /* hover lightens in dark mode */ --accent-soft: rgba(16, 185, 129, 0.10); --accent-text: var(--emerald-400); /* #34d399 — emerald text on dark = AA */ color-scheme: dark; } /* ============================================================================ * REDUCED MOTION * ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; --transition-slow: 0ms; } }