/* ============================================================ La Gran Poya — Design Tokens colors_and_type.css Mundial 2026 prediction-pool app · Colombia Stadium-night dark theme + Poya-yellow CTA accent. ============================================================ */ /* Webfonts: Bricolage Grotesque (display) + Inter (body) ⚠️ SUBSTITUTION — these are Google Fonts approximations of the live site's typography. Replace with real .woff2 in fonts/ if/when ground-truth fonts are available. */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ─── Color · Surfaces ─────────────────────────────────── */ --bg: #0B0F1A; /* page background — stadium night */ --bg-elev-1: #141A2B; /* card surface */ --bg-elev-2: #1C2438; /* hover / nested card */ --bg-overlay: rgba(11, 15, 26, 0.80); /* sticky nav, modal scrim */ /* ─── Color · Foreground ───────────────────────────────── */ --fg-1: #F5F7FA; /* primary text — headlines, body */ --fg-2: #B8C0D0; /* secondary text — sub-copy, descriptions */ --fg-3: #6E7790; /* tertiary — captions, metadata, footer */ --fg-inv: #0B0F1A; /* on-yellow / on-green text */ /* ─── Color · Brand ────────────────────────────────────── */ --poya-yellow: #FFD23F; /* primary CTA */ --poya-yellow-press: #E6B800; /* CTA pressed */ --poya-yellow-soft: rgba(255, 210, 63, 0.12); /* tinted bg */ /* ─── Color · Semantic ─────────────────────────────────── */ --success: #00C566; /* "✓ Disponible", paid, correct */ --success-soft: rgba(0, 197, 102, 0.14); --warning: #FFA94D; /* "⚡ Próximamente" */ --warning-soft: rgba(255, 169, 77, 0.14); --info: #3FA9FF; /* links, "🔭 En roadmap" */ --info-soft: rgba(63, 169, 255, 0.14); --danger: #FF4757; /* destructive, errors */ --danger-soft: rgba(255, 71, 87, 0.14); /* ─── Color · Tournament accents (used sparingly) ──────── */ --mundial-magenta: #E91E63; --mundial-cyan: #00D4FF; /* ─── Color · Borders & dividers ───────────────────────── */ --border: #232B40; --border-strong: #3A4660; /* hover state */ /* ─── Color · Shadows ──────────────────────────────────── */ --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --shadow-cta: 0 8px 24px -8px rgba(255, 210, 63, 0.5); --shadow-cta-hover: 0 12px 32px -8px rgba(255, 210, 63, 0.65); --shadow-hero-image: 0 32px 80px -24px rgba(0, 0, 0, 0.8), 0 0 80px -20px rgba(255, 210, 63, 0.25); /* ─── Type · Families ──────────────────────────────────── */ --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; /* ─── Type · Scale (rem) ───────────────────────────────── */ --fs-xs: 0.75rem; /* 12 — eyebrows, captions */ --fs-sm: 0.875rem; /* 14 — small body, metadata */ --fs-md: 1rem; /* 16 — body */ --fs-lg: 1.125rem; /* 18 — lead paragraph */ --fs-xl: 1.375rem; /* 22 — card titles */ --fs-2xl: 1.75rem; /* 28 — H3 */ --fs-3xl: 2.5rem; /* 40 — H2 */ --fs-4xl: 3.5rem; /* 56 — hero H1 */ --fs-5xl: 5rem; /* 80 — display number */ --fs-6xl: 7rem; /* 112 — hero stat */ /* ─── Type · Weights ───────────────────────────────────── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-display: 700; --fw-display-heavy: 800; /* ─── Type · Line height ───────────────────────────────── */ --lh-tight: 1.05; /* display numbers, hero */ --lh-snug: 1.15; /* H1 / H2 */ --lh-normal: 1.4; /* H3 / lead */ --lh-relaxed: 1.6; /* body */ /* ─── Type · Tracking ──────────────────────────────────── */ --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-eyebrow: 0.12em; /* uppercase labels */ /* ─── Spacing scale (4 px base) ────────────────────────── */ --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; --space-10: 128px; /* ─── Radii ────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; /* default button */ --radius-lg: 16px; /* default card */ --radius-xl: 24px; --radius-pill: 999px; /* ─── Layout ───────────────────────────────────────────── */ --container-max: 1120px; --gutter: 24px; --gutter-desktop: 48px; --section-y: 96px; --section-y-mobile: 64px; --nav-h: 64px; /* ─── Motion ───────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 80ms; --dur-quick: 160ms; --dur-base: 240ms; --dur-slow: 400ms; } /* ============================================================ SEMANTIC TYPE STYLES ============================================================ */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); line-height: 1; } .h1, h1 { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: var(--fw-display); line-height: var(--lh-snug); letter-spacing: var(--tracking-display); color: var(--fg-1); text-wrap: balance; } .h1 em, h1 em { font-style: italic; font-weight: var(--fw-display); } .h2, h2 { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-display); line-height: var(--lh-snug); letter-spacing: var(--tracking-display); color: var(--fg-1); text-wrap: balance; } .h3, h3 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-normal); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .h4, h4 { font-family: var(--font-body); font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--fg-1); } .lead { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; } .body, p { font-family: var(--font-body); font-size: var(--fs-md); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; } .caption { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg-3); } .meta { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.3; color: var(--fg-3); } .stat { font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: var(--fw-display-heavy); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--fg-1); font-feature-settings: "tnum" 1; } .stat-label { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-3); text-transform: lowercase; } code, .code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-elev-2); border: 1px solid var(--border); padding: 2px 6px; border-radius: var(--radius-xs); color: var(--fg-1); } .emoji { font-family: var(--font-emoji); font-style: normal; -webkit-font-feature-settings: normal; font-feature-settings: normal; } a { color: var(--info); text-decoration: none; transition: color var(--dur-quick) var(--ease-out); } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ GLOBAL RESET-ish ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg-1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }