/* ========================================================================== SHOTPOP — DESIGN TOKENS -------------------------------------------------------------------------- Single source of truth for colour, type, space, radius, shadow, motion, layout and z-index across every page of shotpop.app. Ported 1:1 from the iOS app's design system: Shotpop/Theme/Theme.swift → colour / spacing / radius / shadow Shotpop/Theme/Typography.swift → type ramp + tracking + line-height Shotpop/Theme/MeshGradients.swift→ mesh preset palettes HOUSE RULES (same spirit as the app's `Theme.*` namespace rule): · Never write a raw hex in base.css / page CSS / inline styles. Add a token here and reference it with var(--…). · Never write a raw cubic-bezier or duration. Use --ease-* / --dur-*. · Never write a raw px radius. Use --r-*. COLOUR SCHEME: dark only, on purpose. The app forces `.preferredColorScheme(.dark)` for v1 and the brand *is* the dark mesh. A half-built light mode is worse than none, so we declare `color-scheme: dark` and do not ship a prefers-color-scheme override. Form controls, scrollbars and UA surfaces therefore render dark natively. ========================================================================== */ :root { color-scheme: dark; /* ------------------------------------------------------------------ 1. SURFACES (Theme.Color — Surfaces) ------------------------------------------------------------------ */ --c-bg: #0a0a0a; /* page ground */ --c-bg-deep: #05060b; /* blue-tinted near-black; chrome/vignette */ --c-bg-elevated: #141414; /* cards, header fill */ --c-bg-inset: #1c1c1e; /* wells, inputs, code blocks */ --c-bg-raised: #202022; /* hover state for elevated surfaces */ --c-border: #262626; /* default hairline */ --c-border-strong: #3a3a3a; /* emphasised hairline / hover */ --c-divider: #1f1f1f; /* low-contrast separators */ /* Translucent surfaces for glass over mesh. Use sparingly — the app's rule is "mesh as hero": scrims, not stacked glass cards. */ --c-glass: rgb(255 255 255 / 0.04); --c-glass-strong: rgb(255 255 255 / 0.07); --c-hairline: rgb(255 255 255 / 0.09); --c-hairline-strong: rgb(255 255 255 / 0.16); /* ------------------------------------------------------------------ 2. TEXT (Theme.Color — Text) All body-size values below clear WCAG 2.2 AA (≥4.5:1) on --c-bg. ------------------------------------------------------------------ */ --c-text: #fafafa; /* 19.4:1 — headings + body */ --c-text-secondary: #a0a0a0; /* 7.6:1 — sub-heads, long-form body */ --c-text-tertiary: #8a8a8a; /* 5.7:1 — captions, meta, labels NOTE: the app's #666666 is 3.4:1 and fails AA on the web, so the web ramp lightens it. #666 survives below as --c-text-quiet for NON-TEXT use only. */ --c-text-quiet: #666666; /* decorative rules/glyphs — never text */ --c-text-inverse: #0a0a0a; /* on light or accent fills */ --c-text-on-mesh: rgb(255 255 255 / 0.78); /* secondary copy over mesh */ /* ------------------------------------------------------------------ 3. BRAND (Theme.Color — Brand: refined slate-violet) ------------------------------------------------------------------ */ --c-accent: #6b5be5; /* fills. White text on it = 4.9:1 (AA) */ --c-accent-deep: #4a3dc4; /* pressed / gradient tail */ --c-accent-soft: #241b5a; /* tinted well behind accent content */ --c-accent-text: #8f7dff; /* 6.2:1 on --c-bg — accent as TEXT/links (#6b5be5 is only 4.0:1 and fails) */ --c-accent-bright: #a99bff; /* hover for accent text */ --c-accent-wash: rgb(107 91 229 / 0.14); --c-accent-line: rgb(107 91 229 / 0.38); /* Extended brand accents (Theme.Color — sky / coral) */ --c-sky: #4c8dff; --c-coral: #ff6f91; /* ------------------------------------------------------------------ 4. SEMANTIC (Theme.Color — Semantic) ------------------------------------------------------------------ */ --c-success: #34d399; --c-danger: #f87171; --c-warning: #fbbf24; /* ------------------------------------------------------------------ 5. MESH PALETTES (MeshGradients.swift) Real stop colours from the shipping presets, so the site's gradients are the product's gradients rather than a lookalike. ------------------------------------------------------------------ */ /* Hero mesh — a Twilight/Cosmic/Indigo blend, the brand's own register. */ --mesh-hero-1: #4c1d95; --mesh-hero-2: #6b5be5; --mesh-hero-3: #312e81; --mesh-hero-4: #7c3aed; --mesh-hero-5: #b83a8f; --mesh-hero-6: #1e1b4b; --mesh-hero-ground: #05060b; /* Ready-to-use `background-image` values, one per shipping preset, built from that preset's real corner/centre stops. Apply with `background-image: var(--mesh-aurora)` — no hexes in page CSS. */ --mesh-violet-dream: radial-gradient(115% 115% at 10% 6%, #6366f1 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #a78bfa 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #ec4899 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #e879f9 0%, transparent 64%), linear-gradient(145deg, #6366f1, #f472b6); --mesh-sunset: radial-gradient(115% 115% at 10% 6%, #f97316 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #fdba74 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #be185d 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #fb7185 0%, transparent 64%), linear-gradient(145deg, #f97316, #be185d); --mesh-ocean: radial-gradient(115% 115% at 10% 6%, #22d3ee 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #0284c7 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #0e7490 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #0891b2 0%, transparent 64%), linear-gradient(145deg, #0ea5e9, #0369a1); --mesh-mint-breeze: radial-gradient(115% 115% at 10% 6%, #6ee7b7 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #a7f3d0 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #5eead4 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #67e8f9 0%, transparent 64%), linear-gradient(145deg, #86efac, #5eead4); --mesh-aurora: radial-gradient(115% 115% at 10% 6%, #34d399 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #22d3ee 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #38bdf8 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #a78bfa 0%, transparent 64%), linear-gradient(145deg, #4ade80, #f472b6); --mesh-cyberpunk: radial-gradient(115% 115% at 10% 6%, #f472b6 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #be185d 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #0284c7 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #a855f7 0%, transparent 64%), linear-gradient(145deg, #ec4899, #06b6d4); --mesh-midnight: radial-gradient(115% 115% at 10% 6%, #1e293b 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #020617 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #1e1b4b 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #4c1d95 0%, transparent 64%), linear-gradient(145deg, #312e81, #020617); --mesh-golden-hour: radial-gradient(115% 115% at 10% 6%, #fcd34d 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #f59e0b 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #f472b6 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #fb923c 0%, transparent 64%), linear-gradient(145deg, #fbbf24, #f9a8d4); --mesh-lavender-field: radial-gradient(115% 115% at 10% 6%, #ede9fe 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #c4b5fd 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #8b5cf6 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #a78bfa 0%, transparent 64%), linear-gradient(145deg, #ddd6fe, #8b5cf6); --mesh-emerald: radial-gradient(115% 115% at 10% 6%, #4ade80 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #059669 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #15803d 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #22c55e 0%, transparent 64%), linear-gradient(145deg, #10b981, #047857); --mesh-twilight: radial-gradient(115% 115% at 10% 6%, #6b21a8 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #8b5cf6 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #a855f7 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #ec4899 0%, transparent 64%), linear-gradient(145deg, #581c87, #7c3aed); --mesh-cosmic: radial-gradient(115% 115% at 10% 6%, #312e81 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #4c1d95 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #1e293b 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #7c3aed 0%, transparent 64%), linear-gradient(145deg, #1e1b4b, #6b21a8); --mesh-glacier: radial-gradient(115% 115% at 10% 6%, #ecfeff 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #bfdbfe 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #22d3ee 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #7dd3fc 0%, transparent 64%), linear-gradient(145deg, #cffafe, #67e8f9); --mesh-copper: radial-gradient(115% 115% at 10% 6%, #d97706 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #92400e 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #b45309 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #ea580c 0%, transparent 64%), linear-gradient(145deg, #b45309, #78350f); --mesh-plum: radial-gradient(115% 115% at 10% 6%, #86198f 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #a21caf 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #6b21a8 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #ec4899 0%, transparent 64%), linear-gradient(145deg, #7c2d5e, #9d174d); --mesh-jade: radial-gradient(115% 115% at 10% 6%, #2dd4bf 0%, transparent 62%), radial-gradient(110% 110% at 92% 14%, #0d9488 0%, transparent 60%), radial-gradient(120% 120% at 84% 96%, #86efac 0%, transparent 62%), radial-gradient(125% 125% at 8% 92%, #5eead4 0%, transparent 64%), linear-gradient(145deg, #10b981, #67e8f9); /* ------------------------------------------------------------------ 6. TYPE System stacks only — no webfonts, no network. The app pairs a heavy geometric sans with New York serif italic accents; on the web that is -apple-system (SF) at 800 for the sans and ui-serif (New York) italic for the accent word. ------------------------------------------------------------------ */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-serif: ui-serif, "New York", Iowan Old Style, Palatino, Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Fluid ramp. Every step is clamp(min, fluid, max) so nothing overflows at 320px and nothing balloons past 2560px. */ --fs-display: clamp(2.5rem, 1.35rem + 5.7vw, 6.25rem); --fs-h1: clamp(2.25rem, 1.5rem + 3.6vw, 4rem); --fs-h2: clamp(1.875rem, 1.35rem + 2.4vw, 3rem); --fs-h3: clamp(1.3rem, 1.15rem + 0.75vw, 1.75rem); --fs-h4: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --fs-lede: clamp(1.0625rem, 0.98rem + 0.5vw, 1.3125rem); --fs-body: 1.0625rem; /* 17px — the app's Theme.Font.body */ --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-micro: 0.6875rem; /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Tracking — mirrors Typography.swift (fraction of size, applied in em) */ --tr-display: -0.035em; --tr-title: -0.02em; --tr-heading: -0.01em; --tr-body: 0em; --tr-caption: 0.01em; --tr-eyebrow: 0.14em; /* Line heights */ --lh-display: 0.98; --lh-title: 1.14; --lh-heading: 1.25; --lh-body: 1.6; --lh-tight: 1.35; /* ------------------------------------------------------------------ 7. SPACING (Theme.Spacing 2→48, extended for web rhythm) ------------------------------------------------------------------ */ --sp-3xs: 0.125rem; /* 2 */ --sp-2xs: 0.25rem; /* 4 */ --sp-xs: 0.5rem; /* 8 */ --sp-sm: 0.75rem; /* 12 */ --sp-md: 1rem; /* 16 */ --sp-lg: 1.5rem; /* 24 */ --sp-xl: 2rem; /* 32 */ --sp-2xl: 3rem; /* 48 */ --sp-3xl: 4rem; /* 64 */ --sp-4xl: 6rem; /* 96 */ --sp-5xl: 8rem; /* 128 */ /* Vertical rhythm for
*/ --section-y: clamp(3.5rem, 2rem + 7vw, 8rem); --gutter: clamp(1.125rem, 0.75rem + 1.6vw, 2.5rem); /* ------------------------------------------------------------------ 8. RADIUS (Theme.Radius) ------------------------------------------------------------------ */ --r-xs: 6px; --r-sm: 10px; /* Theme.Radius.sm / .chip */ --r-md: 16px; /* Theme.Radius.card */ --r-lg: 24px; /* Theme.Radius.sheet */ --r-xl: 28px; /* Theme.Radius.canvas */ --r-2xl: 36px; --r-pill: 999px; /* Theme.Radius.pill/.full */ /* ------------------------------------------------------------------ 9. SHADOW (Theme.Shadow — same four steps, web-tuned spreads) ------------------------------------------------------------------ */ --sh-sm: 0 2px 8px rgb(0 0 0 / 0.28); --sh-md: 0 4px 16px rgb(0 0 0 / 0.36); --sh-lg: 0 12px 32px rgb(0 0 0 / 0.48); --sh-xl: 0 32px 80px rgb(0 0 0 / 0.6); --sh-glow: 0 8px 24px rgb(107 91 229 / 0.35); --sh-inset-hairline: inset 0 1px 0 rgb(255 255 255 / 0.06); /* ------------------------------------------------------------------ 10. MOTION Every animated property must be transform or opacity. ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* snappy settle */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* Theme.Spring.bouncy */ --ease-linear: linear; --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 480ms; --dur-reveal: 720ms; /* Set to 0 by the reduced-motion block below; long ambient loops read this so they stop rather than merely slow down. */ --motion: 1; /* ------------------------------------------------------------------ 11. LAYOUT ------------------------------------------------------------------ */ --w-prose: 68ch; /* legal / support long-form measure */ --w-narrow: 44rem; /* centred section intros */ --w-content: 72rem; /* default page container (1152px) */ --w-wide: 84rem; /* showcase rows (1344px) */ --w-max: 100rem; /* hard ceiling so 2560px doesn't stretch */ --header-h: 60px; /* ------------------------------------------------------------------ 12. Z-INDEX LADDER — never invent a raw z-index. ------------------------------------------------------------------ */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-nav-panel: 300; --z-overlay: 400; --z-toast: 500; --z-skip-link: 600; } /* ========================================================================== REDUCED MOTION Kills every non-essential animation site-wide. Individual components may still opt out of a specific effect, but nothing should need to re-enable motion here. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --motion: 0; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; } }