/* ============================================================================ race.css — Light & Clean design system for race.com.py ============================================================================ Single source of truth for visual identity. Loaded AFTER bootstrap.min.css, main.css, and modern.css so it overrides where needed. STRATEGY (transition phase): - Token system + new race-prefixed components are 100% additive, zero risk - Global overrides (typography, buttons, links) intentionally minimal so existing pages still render - Page-by-page rework will replace template/Bootstrap classes with race-* classes; main.css + modern.css can be removed once every page migrates Aesthetic ref: Nike Run Club / Strava / Garmin — white space, bold red accents, clean data tables, athletic energy. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap'); /* ============================================================================ 1. TOKENS ============================================================================ */ :root { /* Brand */ --race-red: #E63946; --race-red-hover: #C72A37; --race-red-soft: #FFE5E8; /* Surfaces (light theme) */ --race-white: #FFFFFF; --race-gray-50: #F9FAFB; --race-gray-100: #F3F4F6; --race-gray-200: #E5E7EB; --race-gray-300: #D1D5DB; --race-gray-400: #9CA3AF; --race-gray-500: #6B7280; --race-gray-700: #374151; --race-gray-900: #111827; /* Semantic */ --race-text: var(--race-gray-900); --race-text-body: var(--race-gray-700); --race-text-muted: var(--race-gray-500); --race-text-faint: var(--race-gray-400); --race-bg: var(--race-white); --race-bg-alt: var(--race-gray-50); --race-bg-cool: var(--race-gray-100); --race-border: var(--race-gray-200); --race-border-strong: var(--race-gray-300); /* Accents */ --race-amber: #F59E0B; --race-amber-soft: #FEF3C7; --race-success: #10B981; --race-success-soft: #ECFDF5; --race-info: #3B82F6; --race-warning: #F59E0B; --race-danger: #EF4444; /* Typography */ --race-font-heading: 'Barlow Condensed', 'Helvetica Neue', sans-serif; --race-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --race-font-mono: 'Inter', ui-monospace, SFMono-Regular, monospace; --race-tabular: tabular-nums; /* Spacing scale (4px base) */ --race-space-1: 4px; --race-space-2: 8px; --race-space-3: 12px; --race-space-4: 16px; --race-space-5: 20px; --race-space-6: 24px; --race-space-8: 32px; --race-space-10: 40px; --race-space-12: 48px; --race-space-16: 64px; --race-space-20: 80px; /* Radius */ --race-radius-sm: 4px; --race-radius-md: 6px; --race-radius-lg: 8px; --race-radius-xl: 12px; --race-radius-pill: 999px; /* Shadows — subtle elevation */ --race-shadow-xs: 0 1px 2px rgba(17,24,39,0.05); --race-shadow-sm: 0 1px 3px rgba(17,24,39,0.08), 0 1px 2px rgba(17,24,39,0.04); --race-shadow-md: 0 4px 12px rgba(17,24,39,0.08); --race-shadow-lg: 0 8px 24px rgba(17,24,39,0.12); --race-shadow-focus: 0 0 0 3px rgba(230,57,70,0.18); /* Motion */ --race-ease: cubic-bezier(0.4, 0, 0.2, 1); --race-dur-fast: 150ms; --race-dur: 200ms; --race-dur-slow: 300ms; /* Breakpoints (for reference; use directly in @media) */ --race-bp-sm: 640px; --race-bp-md: 768px; --race-bp-lg: 1024px; --race-bp-xl: 1280px; } /* ============================================================================ 2. SCOPED GLOBAL OVERRIDES — opt-in per page via ============================================================================ Pages keep main.css + modern.css visuals UNTIL they add `class="race-app"` on their tag. Tokens above are always available; rules below are not. ============================================================================ */ body.race-app { font-family: var(--race-font-body); color: var(--race-text-body); background: var(--race-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.race-app h1, body.race-app h2, body.race-app h3, body.race-app h4, body.race-app h5, body.race-app h6, body.race-app .h1, body.race-app .h2, body.race-app .h3, body.race-app .h4, body.race-app .h5, body.race-app .h6 { font-family: var(--race-font-heading); color: var(--race-text); font-weight: 900; /* Mood B: bolder weight */ text-transform: uppercase; letter-spacing: -0.01em; /* Mood B: tighter */ line-height: 1.05; } body.race-app a { color: var(--race-red); transition: color var(--race-dur-fast) var(--race-ease); } body.race-app a:hover, body.race-app a:focus { color: var(--race-red-hover); text-decoration: none; } /* Tabular-num for race-prefixed numeric contexts. Doesn't affect existing classes outside .race-app body. */ body.race-app .race-num, body.race-app table.race-table td { font-variant-numeric: var(--race-tabular); } /* ============================================================================ 3. CONTAINER & SECTION ============================================================================ */ body.race-app .race-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--race-space-5); } body.race-app .race-container-narrow { max-width: 800px; } body.race-app .race-container-wide { max-width: 1440px; } body.race-app .race-section { padding: var(--race-space-16) 0; background: var(--race-bg); } body.race-app .race-section-alt { background: var(--race-bg-alt); } body.race-app .race-section-cool { background: var(--race-bg-cool); } body.race-app .race-section-dark { background: var(--race-gray-900); color: var(--race-white); } body.race-app .race-section-dark h1, body.race-app .race-section-dark h2, body.race-app .race-section-dark h3, body.race-app .race-section-dark h4, body.race-app .race-section-dark h5, body.race-app .race-section-dark h6 { color: var(--race-white); } body.race-app .race-section-tight { padding: var(--race-space-10) 0; } body.race-app .race-section-loose { padding: var(--race-space-20) 0; } @media (max-width: 768px) { body.race-app .race-section { padding: var(--race-space-12) 0; } body.race-app .race-section-loose { padding: var(--race-space-16) 0; } } /* ============================================================================ 4. SECTION HEADERS ============================================================================ */ body.race-app .race-eyebrow { font-family: var(--race-font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--race-red); margin-bottom: var(--race-space-3); } body.race-app .race-section-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.05; margin: 0 0 var(--race-space-4) 0; } body.race-app .race-section-subtitle { font-family: var(--race-font-body); font-size: 16px; font-weight: 400; color: var(--race-text-muted); line-height: 1.55; text-transform: none; letter-spacing: 0; max-width: 640px; } /* ============================================================================ 5. BUTTONS — pill-shaped, athletic ============================================================================ */ body.race-app .race-btn { /* Combo 3: Square corners w/ subtle radius, modern + technical */ display: inline-flex; align-items: center; justify-content: center; gap: var(--race-space-2); padding: 11px 22px; border-radius: var(--race-radius-md); font-family: var(--race-font-body); font-size: 12px; font-weight: 800; line-height: 1; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background var(--race-dur) var(--race-ease), color var(--race-dur) var(--race-ease), border-color var(--race-dur) var(--race-ease), transform var(--race-dur-fast) var(--race-ease); white-space: nowrap; letter-spacing: 0.06em; text-transform: uppercase; } body.race-app .race-btn:active { transform: translateY(1px); } body.race-app .race-btn:focus-visible { outline: none; box-shadow: var(--race-shadow-focus); } body.race-app .race-btn-primary { background: var(--race-red); color: var(--race-white); border-color: var(--race-red); } body.race-app .race-btn-primary:hover { background: var(--race-red-hover); border-color: var(--race-red-hover); color: var(--race-white); } body.race-app .race-btn-dark { background: var(--race-gray-900); color: var(--race-white); border-color: var(--race-gray-900); } body.race-app .race-btn-dark:hover { background: var(--race-gray-700); border-color: var(--race-gray-700); color: var(--race-white); } body.race-app .race-btn-outline { background: transparent; color: var(--race-gray-900); border-color: var(--race-gray-900); padding: 9px 22px; /* compensate for visible border */ } body.race-app .race-btn-outline:hover { background: var(--race-gray-900); color: var(--race-white); } body.race-app .race-btn-ghost { background: transparent; color: var(--race-text); border-color: transparent; padding: 9px 22px; } body.race-app .race-btn-ghost:hover { color: var(--race-red); background: var(--race-bg-cool); } body.race-app .race-btn-success { background: var(--race-success); color: var(--race-white); border-color: var(--race-success); } body.race-app .race-btn-success:hover { background: #059669; border-color: #059669; color: var(--race-white); } body.race-app .race-btn-sm { padding: 7px 16px; font-size: 11px; letter-spacing: 0.05em; } body.race-app .race-btn-sm.race-btn-outline, body.race-app .race-btn-sm.race-btn-ghost { padding: 5px 16px; } body.race-app .race-btn-lg { padding: 14px 28px; font-size: 13px; } body.race-app .race-btn-lg.race-btn-outline, body.race-app .race-btn-lg.race-btn-ghost { padding: 12px 28px; } body.race-app .race-btn-block { display: flex; width: 100%; } /* ============================================================================ 6. CARDS ============================================================================ */ body.race-app .race-card { background: var(--race-white); border: 1px solid var(--race-border); border-radius: var(--race-radius-lg); padding: var(--race-space-6); box-shadow: var(--race-shadow-xs); transition: box-shadow var(--race-dur) var(--race-ease), transform var(--race-dur) var(--race-ease), border-color var(--race-dur) var(--race-ease); } body.race-app .race-card:hover { box-shadow: var(--race-shadow-md); border-color: var(--race-border-strong); } body.race-app .race-card-link:hover { transform: translateY(-2px); box-shadow: var(--race-shadow-lg); } body.race-app .race-card-tight { padding: var(--race-space-4); } body.race-app .race-card-flat { box-shadow: none; } body.race-app .race-card-flat:hover { box-shadow: var(--race-shadow-sm); } body.race-app .race-card-img { margin: calc(-1 * var(--race-space-6)) calc(-1 * var(--race-space-6)) var(--race-space-4); border-radius: var(--race-radius-lg) var(--race-radius-lg) 0 0; overflow: hidden; aspect-ratio: 16/9; background: var(--race-bg-cool); } body.race-app .race-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================================ 6b. EVENT CARD (Editorial) — used on homepage calendar + events listing ============================================================================ */ body.race-app .race-event-card { background: var(--race-white); border-radius: var(--race-radius-lg); overflow: hidden; box-shadow: var(--race-shadow-md); display: flex; flex-direction: column; transition: transform var(--race-dur) var(--race-ease), box-shadow var(--race-dur) var(--race-ease); } body.race-app .race-event-card:hover { transform: translateY(-3px); box-shadow: var(--race-shadow-lg); } body.race-app .race-event-card-img { aspect-ratio: 21 / 9; background: var(--race-bg-cool); background-size: cover; background-position: center; position: relative; } body.race-app .race-event-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } body.race-app .race-event-card-ribbon { position: absolute; bottom: 0; left: 0; background: var(--race-red); color: var(--race-white); padding: 6px 14px; font-family: var(--race-font-body); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } body.race-app .race-event-card-body { padding: var(--race-space-5); display: flex; flex-direction: column; flex: 1; } body.race-app .race-event-card-meta { display: flex; flex-wrap: wrap; gap: var(--race-space-3); font-size: 11px; color: var(--race-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: var(--race-space-3); } body.race-app .race-event-card-meta span { display: inline-flex; align-items: center; gap: 4px; } body.race-app .race-event-card-meta .accent { color: var(--race-red); } body.race-app .race-event-card-title { font-family: var(--race-font-heading); font-size: 24px; font-weight: 900; text-transform: uppercase; line-height: 1.05; color: var(--race-text); margin: 0 0 var(--race-space-3); letter-spacing: -0.005em; } body.race-app .race-event-card-desc { font-size: 13px; color: var(--race-text-body); line-height: 1.55; margin-bottom: var(--race-space-4); flex: 1; } body.race-app .race-event-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--race-space-3); padding-top: var(--race-space-4); border-top: 1px solid var(--race-bg-cool); } body.race-app .race-event-card-pricing { display: flex; align-items: baseline; gap: 6px; } body.race-app .race-event-card-price { font-family: var(--race-font-heading); font-size: 22px; font-weight: 900; color: var(--race-text); } body.race-app .race-event-card-price-label { font-size: 11px; color: var(--race-text-muted); } body.race-app .race-event-card-actions { display: flex; gap: var(--race-space-2); } @media (max-width: 600px) { body.race-app .race-event-card-title { font-size: 20px; } body.race-app .race-event-card-img { aspect-ratio: 16/9; } body.race-app .race-event-card-footer { flex-direction: column; align-items: stretch; } body.race-app .race-event-card-actions { width: 100%; } body.race-app .race-event-card-actions .race-btn { flex: 1; } } body.race-app .race-card-title { font-family: var(--race-font-heading); font-weight: 700; text-transform: uppercase; font-size: 20px; color: var(--race-text); margin: 0 0 var(--race-space-2) 0; line-height: 1.15; } body.race-app .race-card-meta { font-size: 12px; color: var(--race-text-muted); margin-bottom: var(--race-space-3); } body.race-app .race-card-body { color: var(--race-text-body); font-size: 14px; line-height: 1.6; } body.race-app .race-card-footer { margin-top: var(--race-space-5); padding-top: var(--race-space-4); border-top: 1px solid var(--race-border); display: flex; align-items: center; justify-content: space-between; gap: var(--race-space-3); } /* ============================================================================ 7. BADGES & TAGS ============================================================================ */ body.race-app .race-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--race-radius-pill); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; background: var(--race-bg-cool); color: var(--race-text); border: 1px solid var(--race-border); } body.race-app .race-badge-red { background: var(--race-red-soft); color: var(--race-red); border-color: transparent; } body.race-app .race-badge-amber { background: var(--race-amber-soft); color: #92400E; border-color: transparent; } body.race-app .race-badge-success { background: var(--race-success-soft); color: #065F46; border-color: transparent; } body.race-app .race-badge-dark { background: var(--race-text); color: var(--race-white); border-color: transparent; } body.race-app .race-badge-info { background: #DBEAFE; color: #1E3A8A; border-color: transparent; } /* Discipline tags */ body.race-app .race-tag-mtb { background: #ECFDF5; color: #065F46; } body.race-app .race-tag-road { background: #DBEAFE; color: #1E3A8A; } body.race-app .race-tag-trail { background: #FEF3C7; color: #92400E; } body.race-app .race-tag-xco { background: var(--race-red-soft); color: var(--race-red); } body.race-app .race-tag-xcc { background: #F3E8FF; color: #5B21B6; } body.race-app .race-tag-xce { background: #FFE4E1; color: #BE123C; } body.race-app .race-tag-xcr { background: #E0F2FE; color: #0C4A6E; } /* Date pill — Combo 3: white + 2px black border + red top stripe */ body.race-app .race-date-pill { display: inline-flex; flex-direction: column; align-items: center; background: var(--race-white); border: 2px solid var(--race-gray-900); border-radius: var(--race-radius-md); padding: 6px 10px; line-height: 1; position: relative; min-width: 50px; overflow: hidden; } body.race-app .race-date-pill::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--race-red); } body.race-app .race-date-pill .day { font-family: var(--race-font-heading); font-size: 22px; font-weight: 900; color: var(--race-gray-900); margin-top: 4px; } body.race-app .race-date-pill .month { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--race-gray-900); margin-top: 2px; font-weight: 700; } /* ============================================================================ 8. FORMS ============================================================================ */ body.race-app .race-form-group { margin-bottom: var(--race-space-4); } body.race-app .race-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--race-text); margin-bottom: 6px; letter-spacing: 0.02em; } body.race-app .race-form-input, body.race-app .race-form-select, body.race-app .race-form-textarea { width: 100%; padding: 10px 14px; background: var(--race-white); border: 1.5px solid var(--race-border); border-radius: var(--race-radius-md); font-family: var(--race-font-body); font-size: 14px; color: var(--race-text); transition: border-color var(--race-dur-fast) var(--race-ease), box-shadow var(--race-dur-fast) var(--race-ease); } body.race-app .race-form-input:focus, body.race-app .race-form-select:focus, body.race-app .race-form-textarea:focus { outline: none; border-color: var(--race-red); box-shadow: 0 0 0 3px rgba(230,57,70,0.10); } body.race-app .race-form-input::placeholder { color: var(--race-text-faint); } body.race-app .race-form-input[disabled], body.race-app .race-form-select[disabled] { background: var(--race-bg-cool); color: var(--race-text-muted); cursor: not-allowed; } body.race-app .race-form-help { font-size: 12px; color: var(--race-text-muted); margin-top: 4px; } body.race-app .race-form-error { font-size: 12px; color: var(--race-danger); margin-top: 4px; font-weight: 500; } body.race-app .race-form-input.is-invalid { border-color: var(--race-danger); } body.race-app .race-form-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.10); } /* ============================================================================ 9. TABLES ============================================================================ */ body.race-app .race-table-wrap { overflow-x: auto; border: 1px solid var(--race-border); border-radius: var(--race-radius-lg); background: var(--race-white); } body.race-app .race-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: var(--race-tabular); } body.race-app .race-table thead th { text-align: left; padding: 14px 12px; background: var(--race-white); color: var(--race-text-muted); font-family: var(--race-font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid var(--race-border); } body.race-app .race-table thead th.right { text-align: right; } body.race-app .race-table tbody td { padding: 16px 12px; color: var(--race-text); border-bottom: 1px solid var(--race-bg-cool); vertical-align: middle; } body.race-app .race-table tbody tr { transition: background var(--race-dur-fast) var(--race-ease); } body.race-app .race-table tbody tr:nth-child(even) td { background: var(--race-bg-alt); } body.race-app .race-table tbody tr:hover td { background: var(--race-red-soft); } body.race-app .race-table tbody tr:last-child td { border-bottom: none; } body.race-app .race-table .num, body.race-app .race-table .race-num { text-align: right; } body.race-app .race-table .name { font-weight: 600; color: var(--race-text); font-size: 14px; } body.race-app .race-table .name .club { display: block; font-size: 11px; color: var(--race-text-muted); font-weight: 400; margin-top: 2px; } body.race-app .race-table .pos { font-family: var(--race-font-heading); font-weight: 900; color: var(--race-text); text-align: center; width: 64px; font-size: 24px; line-height: 1; } body.race-app .race-table .pos.p1, body.race-app .race-table .pos-1 { color: var(--race-red); font-size: 32px; } body.race-app .race-table .time { font-family: var(--race-font-heading); font-size: 18px; font-weight: 700; color: var(--race-text); text-align: right; } body.race-app .race-table .gap { font-size: 12px; color: var(--race-text-muted); text-align: right; } body.race-app .race-table .badge { display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; border-radius: var(--race-radius-sm); letter-spacing: 0.04em; } body.race-app .race-table .badge.dnf, body.race-app .race-table .badge.dsq { background: #FEE2E2; color: #991B1B; } body.race-app .race-table .badge.dns { background: var(--race-bg-cool); color: var(--race-text-muted); } body.race-app .race-table .badge.lapped { background: var(--race-amber-soft); color: #92400E; } @media (max-width: 600px) { body.race-app .race-table thead th { padding: 10px 8px; font-size: 10px; } body.race-app .race-table tbody td { padding: 12px 8px; font-size: 13px; } body.race-app .race-table .pos { font-size: 20px; width: 44px; } body.race-app .race-table .pos.p1 { font-size: 26px; } body.race-app .race-table .time { font-size: 15px; } } /* ============================================================================ 10. HERO ============================================================================ */ /* Cinematic hero — image dominant, bottom-aligned content overlay */ body.race-app .race-hero { position: relative; width: 100%; aspect-ratio: 21/9; min-height: 380px; overflow: hidden; color: var(--race-white); display: flex; flex-direction: column; justify-content: flex-end; background: var(--race-gray-900); } body.race-app .race-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; } body.race-app .race-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } body.race-app .race-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%); } body.race-app .race-hero-content { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--race-space-8) var(--race-space-6); } body.race-app .race-hero-eyebrow { font-family: var(--race-font-body); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--race-red); font-weight: 800; margin-bottom: var(--race-space-2); } body.race-app .race-hero-title { font-family: var(--race-font-heading); font-weight: 900; font-size: clamp(32px, 5.5vw, 56px); line-height: 0.92; color: var(--race-white); margin: 0 0 var(--race-space-3); text-transform: uppercase; letter-spacing: -0.01em; } body.race-app .race-hero-meta { font-size: 14px; opacity: 0.95; margin-bottom: var(--race-space-5); color: rgba(255,255,255,0.95); } body.race-app .race-hero-actions { display: flex; gap: var(--race-space-2); flex-wrap: wrap; } /* Glass secondary button for use ON the hero only */ body.race-app .race-hero .race-btn-glass { background: rgba(255,255,255,0.12); color: var(--race-white); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.30); } body.race-app .race-hero .race-btn-glass:hover { background: rgba(255,255,255,0.22); color: var(--race-white); border-color: rgba(255,255,255,0.50); } /* Live state badge — top-right of hero during race days */ body.race-app .race-hero-live-badge { position: absolute; top: var(--race-space-5); right: var(--race-space-5); z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: var(--race-red); color: var(--race-white); padding: 5px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; border-radius: var(--race-radius-sm); } body.race-app .race-hero-live-dot { width: 8px; height: 8px; background: var(--race-white); border-radius: 50%; animation: race-pulse 1.4s infinite; } @keyframes race-pulse { 0%,100% { opacity:1;} 50% { opacity:.4;} } @media (max-width: 700px) { body.race-app .race-hero { aspect-ratio: 4/3; min-height: 320px; } body.race-app .race-hero-content { padding: var(--race-space-5) var(--race-space-4); } body.race-app .race-hero-title { font-size: clamp(26px, 8vw, 36px); } body.race-app .race-hero-meta { font-size: 13px; } } /* ============================================================================ 10b. NAVIGATION HEADER — dark brand, red underline accent ============================================================================ */ body.race-app .race-nav { /* Visual-only; inherits position from Bootstrap .fixed-top on the same element. */ display: flex; align-items: center; justify-content: space-between; gap: var(--race-space-5); padding: 12px var(--race-space-6); background: var(--race-gray-900); color: var(--race-white); border-bottom: 3px solid var(--race-red); margin: 0; } body.race-app .race-nav-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--race-font-heading); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: -0.005em; color: var(--race-white); text-decoration: none; flex-shrink: 0; } body.race-app .race-nav-logo:hover { color: var(--race-white); } body.race-app .race-nav-logo .dot { width: 8px; height: 8px; background: var(--race-red); border-radius: 50%; flex-shrink: 0; } body.race-app .race-nav-links { display: flex; align-items: center; gap: var(--race-space-6); list-style: none; margin: 0; padding: 0; } body.race-app .race-nav-links a { font-family: var(--race-font-body); font-size: 12px; font-weight: 700; color: var(--race-gray-400); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 0; transition: color var(--race-dur-fast) var(--race-ease); } body.race-app .race-nav-links a:hover { color: var(--race-white); } body.race-app .race-nav-links a.active { color: var(--race-white); } body.race-app .race-nav-right { display: flex; align-items: center; gap: var(--race-space-3); flex-shrink: 0; } body.race-app .race-nav-lang { font-size: 11px; color: var(--race-gray-400); font-weight: 600; padding: 5px 8px; border: 1px solid var(--race-gray-700); border-radius: var(--race-radius-sm); background: transparent; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; } body.race-app .race-nav-lang:hover { color: var(--race-white); border-color: var(--race-gray-400); } /* CTA button on dark nav — primary red */ body.race-app .race-nav .race-btn { padding: 9px 18px; font-size: 11px; } /* Mobile burger */ body.race-app .race-nav-burger { display: none; background: transparent; border: none; color: var(--race-white); padding: 8px; cursor: pointer; } @media (max-width: 900px) { body.race-app .race-nav { padding: 14px var(--race-space-4); } body.race-app .race-nav-burger { display: inline-flex; } body.race-app .race-nav-links { position: absolute; top: 100%; left: 0; right: 0; background: var(--race-gray-900); flex-direction: column; align-items: stretch; gap: 0; padding: var(--race-space-3) 0; border-bottom: 3px solid var(--race-red); display: none; } body.race-app .race-nav-links.open { display: flex; } body.race-app .race-nav-links a { padding: 12px var(--race-space-5); border-bottom: 1px solid var(--race-gray-700); } body.race-app .race-nav-links a:last-child { border-bottom: none; } body.race-app .race-nav-right .race-nav-lang { display: none; } } /* ============================================================================ 10c. FOOTER — 4-column dark, red top accent ============================================================================ */ body.race-app .race-footer { background: var(--race-gray-900); color: var(--race-gray-400); border-top: 3px solid var(--race-red); } body.race-app .race-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--race-space-8); padding: var(--race-space-10) var(--race-space-6); max-width: 1200px; margin: 0 auto; } body.race-app .race-footer-col h4 { font-family: var(--race-font-heading); font-size: 14px; font-weight: 800; text-transform: uppercase; color: var(--race-white); margin: 0 0 var(--race-space-3) 0; letter-spacing: 0.04em; } body.race-app .race-footer-col p { font-size: 12px; line-height: 1.55; margin: var(--race-space-2) 0; color: var(--race-gray-400); } body.race-app .race-footer-col a { color: var(--race-gray-400); text-decoration: none; font-size: 12px; display: block; margin: 6px 0; transition: color var(--race-dur-fast) var(--race-ease); } body.race-app .race-footer-col a:hover { color: var(--race-white); } body.race-app .race-footer-brand .race-nav-logo { color: var(--race-white); margin-bottom: var(--race-space-3); } body.race-app .race-footer-info { display: flex; gap: var(--race-space-2); align-items: flex-start; margin: 6px 0; font-size: 12px; } body.race-app .race-footer-info .icon { color: var(--race-red); width: 14px; flex-shrink: 0; margin-top: 2px; } body.race-app .race-footer-social { display: flex; gap: var(--race-space-2); margin-top: var(--race-space-3); } body.race-app .race-footer-social a { width: 34px; height: 34px; border-radius: 50%; background: #1E293B; color: var(--race-white); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin: 0; transition: background var(--race-dur-fast) var(--race-ease); } body.race-app .race-footer-social a:hover { background: var(--race-red); color: var(--race-white); } body.race-app .race-footer-newsletter { display: flex; gap: 0; margin-top: var(--race-space-2); } body.race-app .race-footer-newsletter input { flex: 1; padding: 9px 12px; background: #1E293B; border: none; color: var(--race-white); font-family: var(--race-font-body); font-size: 12px; border-radius: var(--race-radius-md) 0 0 var(--race-radius-md); outline: none; } body.race-app .race-footer-newsletter input::placeholder { color: var(--race-gray-500); } body.race-app .race-footer-newsletter button { background: var(--race-red); color: var(--race-white); border: none; padding: 9px 16px; font-family: var(--race-font-body); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 0 var(--race-radius-md) var(--race-radius-md) 0; cursor: pointer; transition: background var(--race-dur-fast) var(--race-ease); } body.race-app .race-footer-newsletter button:hover { background: var(--race-red-hover); } body.race-app .race-footer-bottom { padding: var(--race-space-3) var(--race-space-6); border-top: 1px solid #1E293B; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--race-space-2); font-size: 11px; color: var(--race-gray-500); max-width: 1200px; margin: 0 auto; } body.race-app .race-footer-legal { display: flex; gap: var(--race-space-3); } body.race-app .race-footer-legal a { color: var(--race-gray-500); text-decoration: none; font-size: 11px; margin: 0; display: inline; } body.race-app .race-footer-legal a:hover { color: var(--race-gray-400); } @media (max-width: 900px) { body.race-app .race-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--race-space-6); padding: var(--race-space-8) var(--race-space-4); } } @media (max-width: 600px) { body.race-app .race-footer-grid { grid-template-columns: 1fr; } body.race-app .race-footer-bottom { flex-direction: column; text-align: center; } } /* ============================================================================ 11. UTILITIES ============================================================================ */ body.race-app .race-stack > * + * { margin-top: var(--race-space-4); } body.race-app .race-stack-sm > * + * { margin-top: var(--race-space-2); } body.race-app .race-stack-lg > * + * { margin-top: var(--race-space-6); } body.race-app .race-row { display: flex; gap: var(--race-space-4); flex-wrap: wrap; } body.race-app .race-row-tight { gap: var(--race-space-2); } body.race-app .race-row-loose { gap: var(--race-space-6); } body.race-app .race-grid { display: grid; gap: var(--race-space-4); } body.race-app .race-grid-2 { grid-template-columns: repeat(2, 1fr); } body.race-app .race-grid-3 { grid-template-columns: repeat(3, 1fr); } body.race-app .race-grid-4 { grid-template-columns: repeat(4, 1fr); } body.race-app .race-grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } @media (max-width: 768px) { body.race-app .race-grid-2, body.race-app .race-grid-3, body.race-app .race-grid-4 { grid-template-columns: 1fr; } } body.race-app .race-text-muted { color: var(--race-text-muted); } body.race-app .race-text-red { color: var(--race-red); } body.race-app .race-text-success { color: var(--race-success); } body.race-app .race-text-center { text-align: center; } body.race-app .race-text-right { text-align: right; } body.race-app .race-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.race-app .race-divider { border: none; border-top: 1px solid var(--race-border); margin: var(--race-space-6) 0; } body.race-app .race-spacer-2 { height: var(--race-space-2); } body.race-app .race-spacer-4 { height: var(--race-space-4); } body.race-app .race-spacer-8 { height: var(--race-space-8); } body.race-app .race-spacer-12 { height: var(--race-space-12); } body.race-app .race-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================================ 12. FOCUS RING — accessibility default (scoped to opted-in pages) ============================================================================ */ body.race-app :focus-visible { outline: 2px solid var(--race-red); outline-offset: 2px; } body.race-app .race-btn:focus-visible { outline: none; box-shadow: var(--race-shadow-focus); } /* ============================================================================ 13. PRINT ============================================================================ */ @media print { body.race-app .race-hero, body.race-app .race-hero-bg { background: none !important; color: var(--race-text) !important; min-height: 0; } body.race-app .race-section-dark { background: none !important; color: var(--race-text) !important; } body.race-app .race-btn { display: none; } body.race-app .race-card { box-shadow: none; border-color: var(--race-border); } } /* ============================================================================ LIVE event banner — overlay INSIDE the homepage hero (positioned below the fixed-top nav so it isn't covered). Also a consistent pulse keyframe used by this banner, the nav LIVE pill, event.php LIVE badge, and the events.php card LIVE badge. Defining it once here to avoid duplicates. ============================================================================ */ @keyframes race-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .live-event-banner { position: absolute; top: 70px; /* sits below the fixed-top nav (~65-70px tall) */ left: 0; right: 0; z-index: 20; /* above slider overlay, below nav z-index 1030 */ background: linear-gradient(135deg, rgba(6,8,13,0.92) 0%, rgba(19,34,56,0.88) 55%, rgba(230,57,70,0.85) 160%); color: #fff; padding: 12px 20px; border-bottom: 3px solid var(--race-red); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .live-event-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .live-event-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; } .live-event-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--race-red); padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } .live-event-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: race-pulse 1.4s infinite; } .live-event-name { font-family: var(--race-font-heading); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: -0.005em; color: #fff; } .live-event-sub { color: rgba(255,255,255,0.75); font-size: 13px; } .live-event-cta { display: flex; gap: 8px; flex-wrap: wrap; } .live-event-btn { padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; transition: transform 0.15s ease, background 0.15s ease; } .live-event-btn:active { transform: translateY(1px); } .live-event-btn-primary { background: var(--race-red); color: #fff; } .live-event-btn-primary:hover { background: var(--race-red-hover); color: #fff; } .live-event-btn-secondary { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.30); backdrop-filter: blur(8px); } .live-event-btn-secondary:hover { background: rgba(255,255,255,0.22); color: #fff; } @media (max-width: 768px) { .live-event-banner { top: 60px; padding: 10px 14px; } .live-event-name { font-size: 15px; } .live-event-sub { display: none; } } @media (max-width: 480px) { .live-event-inner { gap: 8px; } .live-event-meta { gap: 8px; } .live-event-btn { padding: 7px 12px; font-size: 11px; } } /* Event detail page LIVE badge (reuses unified race-pulse keyframe above) */ .event-live-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--race-red); color: #fff; padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; } .event-live-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; animation: race-pulse 1.4s infinite; }