/* ParkMotion design tokens — extracted from the HTML design reference. Drop into assets/styles/ and import first; every value below is used in the design. */ :root { /* Brand (from the ParkMotion brand guideline) */ --pm-primary: #3E1FC3; /* brand violet-blue — primary action, pillar 01/03 accents, stats band */ --pm-primary-hover: #2E1596; --pm-primary-tint: #EFEBFC; /* chip fill */ --pm-primary-ink: #2E1596; /* text on --pm-primary-tint */ --pm-navy: #104275; /* dark sections: integration hub, closing CTA */ --pm-navy-deep: #0C3159; /* footer */ --pm-cyan: #1CCAD8; /* accent: pillar 02, hardware icons, dark-section links */ --pm-cyan-ink: #0E8C97; /* cyan at paragraph size on light ground */ --pm-cyan-tint: #DBF6F8; --pm-cyan-deep: #0A6B74; /* text on --pm-cyan-tint */ --pm-sand: #F4D06F; /* sparingly: one stat figure, barrier icon, CTA button hover */ /* Ink */ --pm-ink: #14121F; /* headings */ --pm-body: #5B5870; /* body copy */ --pm-muted: #6E6B82; /* step copy */ --pm-muted-2: #77748C; /* pillar explanation copy */ --pm-faint: #8E8AA6; /* eyebrow / label on light */ --pm-placeholder: #A6A2B8; /* Surfaces + lines */ --pm-nav-bg: rgba(255,255,255,0.86); /* translucent header ground */ --pm-nav-link: #4a4760; --pm-ink-2: #2e2b3e; /* checklist items — a shade off --pm-ink */ --pm-chrome-dot: #dedaee; /* browser-chrome dots on the screenshot frames */ --pm-frame-label-bg: rgba(255,255,255,0.9); --pm-chip-arrow: #7a66db; --pm-chip-arrow-cyan:#38a9b2; --pm-glow-violet: rgba(62, 31, 195, 0.16); --pm-glow-cyan: rgba(28, 202, 216, 0.18); --pm-stripe-violet: rgba(62, 31, 195, 0.055); --pm-stripe-cyan: rgba(28, 202, 216, 0.1); --pm-surface: #ffffff; --pm-surface-2: #FBFAFE; /* screenshot placeholder ground */ --pm-surface-3: #FAF9FE; /* browser-chrome bar */ --pm-tint-band: #F6F4FD; /* pillar 02 full-bleed band */ --pm-btn-ghost-hover:#F7F5FE; --pm-line: #EDEBF6; /* hairline rules, logo-strip cells */ --pm-line-card: #E4E1F0; /* card border */ --pm-line-btn: #DFDCEC; /* secondary button border */ --pm-line-soft: #EEECF7; --pm-line-soft-2: #E7E4F2; /* On dark (navy) sections */ --pm-on-dark: #ffffff; --pm-on-dark-ink: #14121F; /* text on a white chip/button inside a navy band — deliberately does NOT follow the theme, because the band it sits on is navy in light and dark alike */ --pm-on-dark-body: rgba(255,255,255,0.66); --pm-on-dark-body-2: rgba(255,255,255,0.72); --pm-on-dark-label: rgba(255,255,255,0.5); --pm-on-dark-meta: rgba(255,255,255,0.4); --pm-on-dark-footer: rgba(255,255,255,0.55); --pm-on-dark-link: rgba(255,255,255,0.72); --pm-on-dark-border: rgba(255,255,255,0.14); --pm-on-dark-border-2: rgba(255,255,255,0.12); --pm-on-dark-fill: rgba(16,66,117,0.9); /* hub row fill (opaque so curves pass behind) */ --pm-on-dark-fill-hover: rgba(255,255,255,0.09); /* Type */ --pm-font: 'Plus Jakarta Sans', system-ui, sans-serif; /* weights 400 500 600 700 800 */ --pm-h1: clamp(29px, 3.9vw, 52px); /* lh 1.02 ls -0.035em w800 */ --pm-h2-cta: clamp(27px, 3.6vw, 48px); /* lh 1.06 ls -0.035em w800 */ --pm-h2: clamp(25px, 3.1vw, 42px); /* lh 1.08 ls -0.03em w800 */ --pm-h2-proof:clamp(25px, 3vw, 40px); /* lh 1.08 ls -0.03em w800 */ --pm-h3: clamp(23px, 2.5vw, 34px); /* lh 1.1 ls -0.03em w800 */ --pm-stat: clamp(44px, 5vw, 64px); /* lh 1 ls -0.04em w800 */ --pm-lead: 17px; /* lh 1.6 */ --pm-base: 16px; /* lh 1.6 */ --pm-sm: 15px; /* list items, buttons, hub rows */ --pm-xs: 14px; /* nav, footer links */ --pm-xxs: 13px; /* chips, step body (lh 1.55), footer meta */ --pm-eyebrow: 12px; /* w600 ls 0.14em uppercase */ --pm-label: 11px; /* w600 ls 0.14em uppercase — on dark */ /* Layout */ --pm-max: 1200px; --pm-gutter: clamp(20px, 5vw, 32px); --pm-section: clamp(80px, 9vw, 128px); --pm-section-sm: clamp(64px, 7vw, 96px); --pm-col-gap: clamp(32px, 5vw, 72px); --pm-header-h: 72px; /* min-height, not fixed — the nav wraps on narrow screens */ /* Radius */ --pm-r-tile: 6px; /* logo tiles */ --pm-r-cell: 8px; /* trust-strip cells */ --pm-r-row: 10px; /* hub rows */ --pm-r-card: 14px; /* screenshot frames */ --pm-r-hub: 16px; /* hub centre card */ --pm-r-pill: 999px; /* buttons, chips, lang switch */ /* Elevation */ --pm-shadow-hero: 0 30px 70px -30px rgba(16,66,117,0.28), 0 2px 6px rgba(20,18,31,0.04); --pm-shadow-card: 0 24px 60px -28px rgba(16,66,117,0.24); --pm-shadow-hub: 0 24px 60px -24px rgba(62,31,195,0.6); /* Motion */ --pm-ease: cubic-bezier(.16,.8,.28,1); --pm-reveal: 620ms; /* opacity 0->1, translateY(14px)->0 */ --pm-hover: 160ms; /* ease */ --pm-flow-cycle: 1.9s; /* linear infinite, 0.22s stagger per line */ } /* ---------------------------------------------------------------- dark -- */ /* The redesign is authored light-first and reads its colour entirely through the tokens above, so the dark theme is a palette swap rather than a second stylesheet. Only the surface/ink/line families and the accents that need more luminance on a dark ground are redefined here. Deliberately unchanged: --pm-navy / --pm-navy-deep. Those bands (hub, closing CTA, footer, ecosystem statement) are darker than the light page but *lighter* than the dark one, so they keep reading as distinct panels in both themes, and every rule inside them is already written for white-on-navy. Qualified with :root so the block outranks a bare `:root {}` rather than merely tying with it — app.css is linked twice (once by head-css, once by the importmap entry), and the later copy would otherwise win on order and pull tokens back to their light values. */ :root[data-bs-theme="dark"] { /* Accents — lifted for contrast against a dark ground. */ --pm-primary: #8468F2; --pm-primary-hover: #9A83F6; --pm-primary-tint: rgba(132, 104, 242, 0.18); --pm-primary-ink: #C9BAFB; --pm-cyan-ink: #4FDCE8; --pm-cyan-tint: rgba(28, 202, 216, 0.16); --pm-cyan-deep: #86EBF3; /* Ink */ --pm-ink: #F3F2F8; --pm-ink-2: #E2E0EC; --pm-body: #A9A6BA; --pm-muted: #9C98AF; --pm-muted-2: #9490A8; --pm-faint: #817D97; --pm-placeholder: #6C6884; /* Surfaces + lines */ --pm-surface: #0C0B15; --pm-surface-2: #13111E; --pm-surface-3: #171522; --pm-tint-band: #131120; --pm-btn-ghost-hover:#1B1928; --pm-line: #25232F; --pm-line-card: #2E2B3A; --pm-line-btn: #35323F; --pm-line-soft: #221F2D; --pm-line-soft-2: #2B2836; /* Header + frame chrome */ --pm-nav-bg: rgba(12, 11, 21, 0.86); --pm-nav-link: #B7B3C6; --pm-chrome-dot: #302D3D; --pm-frame-label-bg: rgba(12, 11, 21, 0.9); --pm-chip-arrow: #A692FA; --pm-chip-arrow-cyan:#5FD8E2; /* The hero glows and placeholder stripes need more presence on a dark page. */ --pm-glow-violet: rgba(112, 84, 235, 0.30); --pm-glow-cyan: rgba(28, 202, 216, 0.24); --pm-stripe-violet: rgba(132, 104, 242, 0.10); --pm-stripe-cyan: rgba(28, 202, 216, 0.14); /* Elevation reads as depth, not drop shadow, on a dark ground. */ --pm-shadow-hero: 0 30px 70px -30px rgba(0,0,0,0.8), 0 2px 6px rgba(0,0,0,0.5); --pm-shadow-card: 0 24px 60px -28px rgba(0,0,0,0.75); --pm-shadow-hub: 0 24px 60px -24px rgba(62,31,195,0.55); } /* The one animation the design needs: dashes travelling along the hub connectors. */ @keyframes pmflow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -40; } } /* applied as: stroke-dasharray: 4 16; animation: pmflow var(--pm-flow-cycle) linear infinite; */ @media (prefers-reduced-motion: reduce) { /* The scroll reveal is suppressed — its translateY is the part that actually triggers motion sensitivity. Content renders visible instead of sliding in. */ [data-reveal] { opacity: 1 !important; transform: none !important; } /* The hub connector dashes deliberately keep running: they are small, looping and carry meaning (which way data flows), so they stay on for everyone. */ }