/* ============================================================ PLAY THE FUTURE — Design System · Colors & Type A technology studio for sport. Mobile gamification & fan engagement. High velocity. High quality. Brand vibe: futuristic, modern, slick, edgy, competitive. Palette: refined dark + an electric PINK × TEAL duotone. (RIVAL — the studio's flagship product — keeps its own magenta/Bebas identity; see ui_kits/rival-*. These tokens are the STUDIO brand.) ============================================================ */ /* ---------- FONTS ----------------------------------------- */ /* Display: Space Grotesk (wide, techy, geometric). Body: DM Sans (clean, neutral). Mono: Space Mono (eyebrows, labels, code, data). All loaded per-page from Google Fonts: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap */ :root { /* ---------- RAW PALETTE --------------------------------- */ /* Surfaces — cool near-black. Refined, not pure black. */ --ptf-ink: #07090e; /* page background, deepest */ --ptf-ink-2: #0b0e15; /* alt section background */ --ptf-surface: #11151f; /* cards, raised panels */ --ptf-surface-2: #161b27; /* nested surfaces, inputs */ --ptf-line: #1d2433; /* hairline borders, dividers */ --ptf-line-2: #2a3346; /* stronger borders, hovers */ /* Text */ --ptf-text: #eaf0f7; /* primary text (soft white, not #fff) */ --ptf-muted: #97a3b6; /* secondary text, body-on-dark */ --ptf-faint: #5d6981; /* tertiary, captions, disabled */ /* Electric duotone — PINK × TEAL. Used as precise accents. */ --ptf-pink: #ff2e9a; /* electric pink — primary accent */ --ptf-pink-deep: #d8147c; /* pressed / deep pink */ --ptf-pink-soft: #ff7ac1; /* tints, hover text */ --ptf-teal: #15d6e8; /* electric teal — co-accent */ --ptf-teal-deep: #0aaec0; /* pressed / deep teal */ --ptf-teal-soft: #7dedf5; /* tints, hover text */ /* The duotone gradient — the studio's signature. Use sparingly: hero accents, key CTAs, focus rings, the wordmark mark. */ --ptf-duo: linear-gradient(100deg, #ff2e9a 0%, #b53cc9 48%, #15d6e8 100%); --ptf-duo-soft: linear-gradient(100deg, rgba(255,46,154,.16), rgba(21,214,232,.16)); /* Status (kept minimal & on-brand) */ --ptf-live: #15d6e8; /* live / success → teal */ --ptf-warn: #ffb340; /* attention */ --ptf-danger: #ff4d6d; /* error (pink-leaning red) */ /* ---------- SEMANTIC TOKENS ----------------------------- */ --bg: var(--ptf-ink); --bg-alt: var(--ptf-ink-2); --surface: var(--ptf-surface); --surface-nested:var(--ptf-surface-2); --border: var(--ptf-line); --border-strong: var(--ptf-line-2); --fg: var(--ptf-text); --fg-muted: var(--ptf-muted); --fg-faint: var(--ptf-faint); --accent: var(--ptf-pink); --accent-2: var(--ptf-teal); --duo: var(--ptf-duo); /* ---------- TYPE ---------------------------------------- */ --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif; --font-body: "DM Sans", system-ui, -apple-system, sans-serif; --font-mono: "Space Mono", ui-monospace, "SF Mono", monospace; /* Display scale (Space Grotesk — wide, tight tracking) */ --display-1: 700 clamp(2.8rem, 7vw, 5.5rem)/0.98 var(--font-display); --display-2: 700 clamp(2rem, 4.5vw, 3.4rem)/1.02 var(--font-display); --display-3: 600 clamp(1.5rem, 3vw, 2.2rem)/1.05 var(--font-display); --display-4: 600 1.25rem/1.2 var(--font-display); /* Body scale (DM Sans) */ --body-lg: 400 1.125rem/1.6 var(--font-body); --body: 400 1rem/1.6 var(--font-body); --body-sm: 400 0.9rem/1.55 var(--font-body); /* Mono label — the studio's techy eyebrow / data style */ --label: 400 0.72rem/1 var(--font-mono); --track-display: -0.015em; /* display: slightly tight, modern */ --track-label: 0.22em; /* mono label: wide tracking */ /* ---------- RADII --------------------------------------- */ /* Slick + techy → modest rounding, selectively sharp. */ --radius-sm: 6px; --radius: 10px; /* default card / button */ --radius-lg: 16px; /* large panels */ --radius-pill: 999px; /* ---------- SPACING (8pt) ------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- GLOW & SHADOW ------------------------------- */ /* Refined: tight coloured glow on key elements, soft depth elsewhere. */ --glow-pink: 0 0 28px rgba(255, 46, 154, 0.30); --glow-teal: 0 0 28px rgba(21, 214, 232, 0.28); --glow-duo: 0 0 36px rgba(255, 46, 154, 0.20), 0 0 36px rgba(21, 214, 232, 0.16); --shadow-card: 0 10px 34px rgba(0, 0, 0, 0.5); --shadow-pop: 0 22px 60px rgba(0, 0, 0, 0.62); /* Hairline grid texture (futuristic backdrop) */ --grid-line: rgba(255, 255, 255, 0.035); } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .ptf-display-1, h1.ptf { font: var(--display-1); letter-spacing: var(--track-display); color: var(--fg); margin: 0; } .ptf-display-2, h2.ptf { font: var(--display-2); letter-spacing: var(--track-display); color: var(--fg); margin: 0; } .ptf-display-3, h3.ptf { font: var(--display-3); letter-spacing: var(--track-display); color: var(--fg); margin: 0; } .ptf-display-4 { font: var(--display-4); letter-spacing: 0; color: var(--fg); margin: 0; } .ptf-body-lg { font: var(--body-lg); color: var(--fg); } .ptf-body { font: var(--body); color: var(--fg); } .ptf-muted { font: var(--body); color: var(--fg-muted); } .ptf-body-sm { font: var(--body-sm); color: var(--fg-muted); } /* Mono eyebrow / label — uppercase, wide tracking */ .ptf-label { font: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); } .ptf-label--pink { color: var(--ptf-pink); } .ptf-label--teal { color: var(--ptf-teal); } /* Duotone gradient text — for one or two hero words only */ .ptf-duo-text { background: var(--ptf-duo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }