@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap'); :root { --f1-red: #e10600; --f1-red-dark: #b30500; --f1-red-light: #ff1a14; --f1-accent-challenges: #2472e8; --f1-accent-challenges-dark: #1a54ad; --f1-accent-challenges-light: #5b9bff; --font-display: 'Kalam', cursive; --font-body: 'Kalam', cursive; --font-accent: 'Kalam', cursive; --font-mono: 'Courier Prime', ui-monospace, monospace; --display: var(--font-display); --body: var(--font-body); --accent: var(--font-accent); --mono: var(--font-mono); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; } a { text-decoration: none; color: inherit; } /* Dark Theme */ body.dark { --bg-primary: #131316; --bg-secondary: #1c1c20; --bg-card: #232328; --bg-hover: #2d2d33; --text-primary: #f5f5f7; --text-secondary:#b8b8be; --text-muted: #8e8e95; --border-color: #34343a; background-color: var(--bg-primary); color: var(--text-primary); } /* Light Theme */ body.light { --bg-primary: #e3e3e7; --bg-secondary: #d6d6db; --bg-card: #ececf0; --bg-hover: #cacace; --text-primary: #18181b; --text-secondary:#454549; --text-muted: #66666b; --border-color: #b3b3b8; background-color: var(--bg-primary); color: var(--text-primary); } /* ============================================================ Clubhouse palette (opt-in) or ============================================================ */ body.clubhouse { --c-cream: #f3ecdc; --c-cream-deep: #e8dfc8; --c-paper: #fbf6ea; --c-paddock: #1f1a14; --c-paddock-2: #2a241b; --c-paddock-3: #36302a; --c-oxblood: #8a1f1a; --c-oxblood-light:#a8302a; --c-oxblood-dark: #6a1612; --c-racing-green: #1d3a2a; --c-brass: #b8893f; --c-brass-deep: #8e6829; --c-ink: #2a2520; --c-ink-2: #5a4f44; --f1-red: var(--c-oxblood); --f1-red-light: var(--c-oxblood-light); --f1-red-dark: var(--c-oxblood-dark); } body.clubhouse.dark { --bg-primary: var(--c-paddock); --bg-secondary: var(--c-paddock-2); --bg-card: var(--c-paddock-2); --bg-hover: var(--c-paddock-3); --text-primary: var(--c-cream); --text-secondary:#c8bba0; --text-muted: #b8a987; --border-color: #4a423a; } body.clubhouse.light { --bg-primary: var(--c-cream); --bg-secondary: var(--c-cream-deep); --bg-card: var(--c-paper); --bg-hover: #e1d6b8; --text-primary: var(--c-ink); --text-secondary:#4a4036; --text-muted: #666057; --border-color: #d4c6a8; } /* Retint hard-coded red rgba() shadows for clubhouse mode */ body.clubhouse .card:hover { box-shadow: 0 8px 24px rgba(138, 31, 26, 0.18); } body.clubhouse .btn-primary:hover { box-shadow: 0 4px 12px rgba(138, 31, 26, 0.32); } body.clubhouse .form-select:focus, body.clubhouse input:focus, body.clubhouse textarea:focus { box-shadow: 0 0 0 3px rgba(138, 31, 26, 0.22); } body.clubhouse .bet-item.my-bet { background: linear-gradient(90deg, rgba(138, 31, 26, 0.18), var(--bg-secondary)); } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } /* Header */ .header { position: sticky; top: 0; z-index: 100; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); padding: 1rem 0; } .header-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .logo { display: flex; align-items: center; gap: 0.75rem; } .logo-icon { width: 40px; height: 40px; background: var(--f1-red); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; } .logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; } .logo-year { color: var(--text-muted); font-size: 0.875rem; margin-left: 0.5rem; } /* Navigation */ .nav { display: flex; align-items: center; gap: 1.5rem; } .nav-link { color: var(--text-secondary); font-weight: 500; padding: 0.5rem 0; position: relative; transition: color 0.2s; } .nav-link:hover, .nav-link.active { color: var(--text-primary); } .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--f1-red); border-radius: 1px; } /* Controls */ .controls { display: flex; align-items: center; gap: 0.5rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 8px; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; border: none; font-family: var(--font-display); } .btn-primary { background: var(--f1-red); color: white; } .btn-primary:hover { background: var(--f1-red-light); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(225, 6, 0, 0.3); } .btn-primary.btn-accent-challenges { background: var(--f1-accent-challenges); } .btn-primary.btn-accent-challenges:hover { background: var(--f1-accent-challenges-light); box-shadow: 0 4px 12px rgba(36, 114, 232, 0.3); } .hf-arena-base .hf-tab-btn:hover { border-color: var(--f1-red); } .hf-arena-base .hf-tab-btn.active { background: var(--f1-red); border-color: var(--f1-red); } .hf-arena-base .hf-pref-btn.active { background: var(--f1-red); } /* ---- Paddock Challenges "arena" shell (challenges.php, challenges-rules.php, challenges-profile.php) ---- */ @keyframes pp-fade { from { opacity:0; } to { opacity:1; } } @keyframes pp-pop { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } } @keyframes pp-drop { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } } .hf-arena-base { background-color: var(--bg-primary); animation: pp-fade .25s ease; } /* Rules page (challenges-rules.php) — blue challenges accent instead of red */ .hf-arena-base .hf-rule-num { color: var(--f1-accent-challenges); } .hf-arena-base .hf-toc a.active::before { background: var(--f1-accent-challenges); } .hf-arena-base .hf-toc a.active .n { background: var(--f1-accent-challenges); } .hf-arena-header { background: var(--bg-secondary); padding: 16px; border-bottom: 1px solid var(--border-color); } .hf-ch-tabs { display: flex; gap: 8px; background: var(--bg-card); padding: 6px; border-radius: 8px; margin: 16px 0; } .hf-ch-tabs a { flex: 1; padding: 8px 12px; background: transparent; border: none; color: var(--text-primary); cursor: pointer; border-radius: 6px; font-size: 14px; font-weight: 500; transition: all 0.2s; text-decoration: none; text-align: center; } .hf-ch-tabs a.active { background: var(--bg-hover); color: var(--f1-accent-challenges); } .hf-scoreboard { background: var(--bg-card); border-radius: 12px; padding: 20px; margin: 16px 0; box-shadow: 0 0 34px rgba(225, 6, 0, .16); animation: pp-pop .28s ease; } /* ---- Hero, modeled on .hf-hero / the Challenges-hero variant on index.php ---- */ .hf-ch-hero { position: relative; border-radius: 12px; padding: 22px 20px; margin: 16px 0; overflow: hidden; background: radial-gradient(circle at 88% -10%, rgba(36, 114, 232, .35), transparent 55%), radial-gradient(circle at 4% 120%, rgba(251, 191, 36, .12), transparent 50%), var(--bg-card); border: 1px solid var(--border-color); animation: pp-pop .28s ease; } .hf-ch-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(36, 114, 232, .14); border: 1px solid rgba(36, 114, 232, .4); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--f1-accent-challenges-light, #5b9bff); } .hf-ch-hero-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: hf-ch-pulse 1.6s ease-in-out infinite; } @keyframes hf-ch-pulse { 50% { opacity: .45; transform: scale(.8); } } @media (prefers-reduced-motion: reduce) { .hf-ch-hero-eyebrow::before { animation: none; } } .hf-ch-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 12px; } .hf-ch-hero-num { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; color: var(--text-primary); text-shadow: 0 0 24px rgba(251, 191, 36, .35); } .hf-ch-hero-title { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1.05; color: var(--text-primary); } .hf-ch-hero-sub { font-size: 13px; color: var(--text-secondary); margin-top: 8px; line-height: 1.4; max-width: 42ch; } .hf-ch-rank-pill { flex-shrink: 0; font-size: 12px; font-weight: 700; background: var(--bg-hover); border: 1px solid var(--border-color); padding: 5px 10px; border-radius: 999px; color: var(--text-primary); white-space: nowrap; margin-top: 2px; } .hf-ch-back { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 8px 14px; border-radius: 999px; background: var(--bg-hover); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 13px; font-weight: 700; text-decoration: none; transition: background .15s, border-color .15s; } .hf-ch-back:hover { background: var(--bg-card); border-color: var(--f1-red); } .hf-ch-back i { font-size: 11px; } .hf-ch-hero-stats { display: flex; gap: 22px; margin-top: 18px; flex-wrap: wrap; } /* ---- Games Live Now (Overview) ---- */ .hf-ch-games-kicker { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-secondary); margin: 22px 2px 10px; } .hf-ch-game-row { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px; margin-bottom: 10px; text-decoration: none; color: inherit; } .hf-ch-game-row.pending { border-color: rgba(251, 191, 36, .5); box-shadow: 0 0 0 1px rgba(251, 191, 36, .15) inset; } .hf-ch-game-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; } .hf-ch-game-icon.rumors { background: rgba(225, 6, 0, .16); color: #ff6b66; } .hf-ch-game-icon.trivia { background: rgba(36, 114, 232, .18); color: #5b9bff; } .hf-ch-game-icon.duels { background: rgba(251, 191, 36, .18); color: #fbbf24; } .hf-ch-game-body { flex: 1; min-width: 0; } .hf-ch-game-name { font-weight: 700; font-size: 14.5px; color: var(--text-primary); } .hf-ch-game-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; } .hf-ch-game-progress { height: 4px; border-radius: 2px; background: var(--bg-hover); margin-top: 9px; overflow: hidden; } .hf-ch-game-progress > span { display: block; height: 100%; border-radius: 2px; background: var(--f1-accent-challenges); } .hf-ch-game-right { font-size: 12.5px; color: var(--text-secondary); flex-shrink: 0; font-variant-numeric: tabular-nums; } .hf-ch-game-right.cta { background: var(--gold, #fbbf24); color: #1a1206; font-weight: 700; padding: 6px 12px; border-radius: 999px; font-size: 12px; white-space: nowrap; } /* ---- Board (Challenge Leaderboard) ---- */ .hf-ch-board-kicker { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-secondary); margin: 22px 2px 10px; } .hf-ch-board-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 8px; color: var(--text-primary); } .hf-ch-board-row.self { border-color: rgba(36, 114, 232, .5); box-shadow: 0 0 0 1px rgba(36, 114, 232, .15) inset; } .hf-ch-board-rank { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; } .hf-ch-board-rank.r1 { background: #ffd700; color: #1a1a1a; } .hf-ch-board-rank.r2 { background: #c8c8d0; color: #1a1a1a; } .hf-ch-board-rank.r3 { background: #cd7f32; color: #1a1a1a; } .hf-ch-board-rank.other { background: var(--bg-hover); color: var(--text-primary); } .hf-ch-board-name { font-weight: 600; font-size: 14.5px; } .hf-ch-board-you { font-family: monospace; font-size: 10.5px; color: var(--f1-accent-challenges-light, #5b9bff); margin-left: 6px; font-weight: 700; } .hf-ch-board-cp { text-align: right; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(251, 191, 36, .35); } .btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { background: var(--bg-hover); } .btn-success { background: var(--status-success); color: #fff; border: 1px solid transparent; } .btn-success:hover { background: #059669; } .btn-ghost { background: transparent; color: var(--text-secondary); padding: 0.5rem; } .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); } .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; } .btn-danger { background: #dc2626; color: white; } .btn-danger:hover { background: #b91c1c; } /* Cards */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: all 0.2s; } .card:hover { border-color: var(--f1-red); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(225, 6, 0, 0.15); } /* Admin Core-area data rows stay flat — no hover-lift (per Admin area redesign README) */ .admin-tab-content .card:hover { transform: none; box-shadow: none; } /* Uniform 34x34 icon-only action button, used across Core admin row actions */ .admin-icon-btn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); } /* Settings page: sticky dirty/save bar — collapsed to a quiet status line until the user edits something, then expands into the full bordered bar with Save/Discard actions. */ .admin-savebar { position: sticky; top: 72px; z-index: 20; margin: 0 0 20px; background: var(--bg-card); border: 1px solid transparent; border-radius: var(--radius-lg); padding: 8px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; transition: border-color 0.15s, box-shadow 0.15s, padding 0.15s; } .admin-savebar-status { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-primary); font-weight: 600; } .admin-savebar-status .fa-circle-check { color: var(--status-success); } .admin-savebar-status .fa-circle { color: var(--f1-red); font-size: 8px; } .admin-savebar-dirty-only { display: none; align-items: center; gap: 8px; } .admin-savebar .admin-savebar-actions { display: none; } .admin-savebar.dirty { border-color: var(--f1-red); padding: 12px 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } .admin-savebar.dirty .admin-savebar-saved-only { display: none; } .admin-savebar.dirty .admin-savebar-dirty-only { display: flex; } .admin-savebar.dirty .admin-savebar-actions { display: flex; } /* Settings page: collapsible section cards */ .admin-section-toggle { width: 100%; background: none; border: none; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--text-primary); } .admin-section-toggle .admin-section-chevron { color: var(--text-muted); } .admin-section-body { padding: 0 24px 20px; } .admin-section-body.hidden { display: none; } .admin-section-static-header { padding: 20px 24px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 15px; } .admin-section-static-body { padding: 12px 24px 20px; } /* Settings page: on/off row inside a static section card (Features/Ranking maintenance/ Email delivery) — status text left, one uniformly-styled button right, per the design handoff (all three use the same plain bordered button, never color-coded by state). */ .admin-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); } .admin-toggle-row-title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .admin-toggle-row-desc { font-size: 13px; color: var(--text-muted); margin-top: 2px; max-width: 56ch; } .admin-toggle-btn { cursor: pointer; position: relative; } .admin-toggle-btn .admin-toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .card-header { padding: 1.25rem; border-bottom: 1px solid var(--border-color); } .card-body { padding: 1.25rem; } .card-title { font-size: 1.25rem; margin-bottom: 0.5rem; } /* Hero Section */ .hero { text-align: center; padding: 3rem 1.5rem; background: var(--bg-card); border-radius: 16px; margin: 2rem 0; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--f1-red); } .hero h1 { font-family: var(--accent); font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; } .hero p { color: var(--text-secondary); font-size: 1.125rem; max-width: 600px; margin: 0 auto 1.5rem; } /* Status Badges */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .status-pool-won { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a1d; } .status-open { background: linear-gradient(135deg, #059669, #047857); color: white; } .status-closed { background: linear-gradient(135deg, #dc2626, #b91c1c); color: white; } .status-pending { background: linear-gradient(135deg, #d97706, #b45309); color: white; } .status-completed { background: #6b7280; color: white; } /* Semantic badge modifiers — Core admin rows (role/registered/expired/locked/scope badges) */ .badge-accent { background: var(--f1-red); color: white; } .badge-success { background: var(--status-success); color: white; } .badge-danger { background: var(--status-danger); color: white; } .badge-warning { background: var(--status-warning); color: white; } .badge-neutral { background: var(--bg-secondary); color: var(--text-primary); } /* Position Badges */ .position-badge { font-family: var(--font-display); font-weight: 800; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 0.875rem; } .position-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a1d; } .position-2 { background: linear-gradient(135deg, #9ca3af, #6b7280); color: #1a1a1d; } .position-3 { background: linear-gradient(135deg, #cd7c2f, #a15c1d); color: white; } /* Stars */ .star { color: #fbbf24; animation: star-pulse 2s ease-in-out infinite; } @keyframes star-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* Perfect Bet Glow */ .perfect-bet { box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); border-color: #fbbf24 !important; } /* Forms */ .form-group { margin-bottom: 1rem; } .form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-secondary); } .form-input, .form-select { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; } .form-input[disabled] { overflow: hidden; text-overflow: ellipsis; } /* Label + input on one row, narrow input (e.g. admin settings number fields) */ .form-group-inline { display: flex; align-items: center; gap: 0.5rem; } .form-group-inline .form-label { margin-bottom: 0; } .form-group-inline .form-input { width: 70px; flex: 0 0 auto; } .form-input:focus, .form-select:focus { outline: none; border-color: var(--f1-red); box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.2); } /* Grid */ .grid { display: grid; gap: 1.5rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* Homepage grid layout */ .homepage-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; } .homepage-grid .races-section { order: 1; } .homepage-grid .leaderboard-section { order: 2; } .leaderboard-entry { display: flex; align-items: center; justify-content: space-between; } /* Collapsible leaderboard header for mobile */ .leaderboard-collapse-header { display: none; } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .homepage-grid { grid-template-columns: 1fr; gap: 1.5rem; } /* Leaderboard first on mobile */ .homepage-grid .leaderboard-section { order: 1; } .homepage-grid .races-section { order: 2; } /* Hide rows after top 3 on mobile */ .homepage-grid .desktop-only-row { display: none; } /* Collapsible leaderboard on mobile */ .leaderboard-collapse-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 0; } .leaderboard-collapse-header h2 { margin: 0; font-size: 1.1rem; } .leaderboard-collapse-header .toggle-icon { transition: transform 0.3s ease; } .leaderboard-collapse-header.expanded .toggle-icon { transform: rotate(180deg); } .leaderboard-section .desktop-header { display: none; } .leaderboard-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .leaderboard-content.expanded { max-height: 500px; } .leaderboard-content .card { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; } } /* Race Card */ .race-card { padding: 1.5rem; } .race-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .race-title { font-size: 1.25rem; margin-bottom: 0.5rem; } .race-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--text-secondary); font-size: 0.875rem; } .race-meta span { display: flex; align-items: center; gap: 0.375rem; } /* Quali/Results Row */ .quali-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; } .quali-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; background: var(--bg-secondary); border-radius: 6px; font-size: 0.875rem; } /* Bets Section */ .bets-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); } .bets-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .bet-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 0.5rem; } .bet-user { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; } .bet-avatar { width: 32px; height: 32px; background: var(--f1-red); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; } .bet-predictions { display: flex; gap: 0.5rem; margin-left: 0.75rem; } .bet-pred { padding: 0.25rem 0.5rem; background: var(--bg-card); border-radius: 4px; font-size: 0.8rem; } /* Leaderboard */ .leaderboard-table { width: 100%; border-collapse: collapse; } .leaderboard-table th, .leaderboard-table td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } .leaderboard-table th { background: var(--bg-secondary); font-weight: 600; color: var(--text-muted); font-size: 0.875rem; text-transform: uppercase; } .leaderboard-table tr:hover { background: var(--bg-hover); } .leaderboard-table tr.top-3 { background: linear-gradient(90deg, rgba(225, 6, 0, 0.1), transparent); } /* User Avatar */ .user-avatar { width: 40px; height: 40px; background: var(--f1-red); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; } /* Tabs */ .tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1.5rem; } .tab { padding: 0.75rem 1.25rem; color: var(--text-secondary); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; } .tab:hover { color: var(--text-primary); } .tab.active { color: var(--f1-red); border-bottom-color: var(--f1-red); } /* Alerts */ .alert { padding: 1rem; border-radius: 8px; margin-bottom: 1rem; } .alert-success { background: rgba(5, 150, 105, 0.2); border: 1px solid #059669; color: #10b981; } .alert-error { background: rgba(220, 38, 38, 0.2); border: 1px solid #dc2626; color: #ef4444; } .alert-warning { background: rgba(217, 119, 6, 0.2); border: 1px solid #d97706; color: #f59e0b; } /* Footer */ .footer { border-top: 1px solid var(--border-color); background: var(--bg-secondary); padding: 1.5rem 0; margin-top: 3rem; text-align: center; color: var(--text-muted); } /* Utility Classes */ .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--text-muted); } .text-accent { color: var(--f1-red); } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .hidden { display: none; } .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; } @media (max-width: 768px) { .hero h1 { font-size: 1.75rem; } .bet-item { flex-direction: column; align-items: flex-start; gap: 0.75rem; } } /* Dark mode date/time inputs */ body.dark input[type="date"], body.dark input[type="time"] { color-scheme: dark; } input[type="date"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e10600' d='M19 4h-1V2h-2v2H8V2H6v2H5C3.89 4 3 4.9 3 6v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E"); background-size: 16px 16px; background-repeat: no-repeat; background-position: center; background-color: transparent; width: 20px; height: 20px; cursor: pointer; opacity: 1; } input[type="time"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e10600' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E"); background-size: 16px 16px; background-repeat: no-repeat; background-position: center; background-color: transparent; width: 20px; height: 20px; cursor: pointer; opacity: 1; } /* User's own bet highlight in all bets */ .bet-item.my-bet { background: linear-gradient(90deg, rgba(225, 6, 0, 0.15), var(--bg-secondary)); border-color: var(--f1-red); border-width: 2px; } .bet-item.my-bet .bet-avatar { box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.3); } /* Collapsible forms */ .collapsible-form { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out; } .collapsible-form.expanded { max-height: 1000px; } .collapsible-form .card-body { padding-top: 0; padding-bottom: 0; } .collapsible-form.expanded .card-body { padding-top: 1rem; padding-bottom: 1rem; } .collapsible-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .collapsible-header:hover { background: var(--bg-hover); } .collapsible-header .toggle-icon { transition: transform 0.3s ease; } .collapsible-header.expanded .toggle-icon { transform: rotate(180deg); } /* Edit form highlight */ .edit-form-active { border: 2px solid var(--f1-red); animation: pulse-border 2s infinite; } @keyframes pulse-border { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(225, 6, 0, 0); } } /* Scroll margin for anchors - increased for sticky header */ [id^="race-"], [id^="driver-"], [id^="edit-"] { scroll-margin-top: 200px; } /* Admin section title always visible */ .card.edit-form-active { scroll-margin-top: 220px; } /* Tab count badge */ .tab-count { font-size: 0.75rem; opacity: 0.7; margin-left: 4px; } /* CET timezone label */ .timezone-label { font-size: 0.7rem; color: var(--text-muted); margin-left: 4px; } /* Countdown timer */ .countdown-timer { display: flex; gap: 0.5rem; align-items: center; font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.5rem; white-space: nowrap; flex-wrap: nowrap; } .countdown-timer .countdown-value { font-weight: 600; color: var(--f1-red); white-space: nowrap; } .countdown-timer.betting-open .countdown-value { color: #10b981; } /*Pool size highlight*/ .bettingpool_size { color: #b98f10; } /* Logo image fix */ .logo-img { height: 40px; width: auto; object-fit: contain; } /* Theme-specific logo visibility - hide by default */ .logo-dark, .logo-light { display: none; } /* Show correct logo for each theme */ body.dark .logo-dark { display: block; } body.light .logo-light { display: block; } /* Betting Modal */ .bet-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .bet-modal-overlay.active { opacity: 1; visibility: visible; } .bet-modal { background: var(--bg-card); border-radius: 16px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; transform: scale(0.9); transition: transform 0.3s ease; border: 1px solid var(--border-color); } .bet-modal-overlay.active .bet-modal { transform: scale(1); } .bet-modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: flex-start; } .bet-modal-header h3 { margin: 0; font-size: 1.25rem; } .bet-modal-close { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1; } .bet-modal-close:hover { color: var(--text-primary); } .bet-modal-body { padding: 1.5rem; } .bet-modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); display: flex; gap: 0.5rem; } .bet-modal-footer .btn { flex: 1; } /* Rules page styles */ .rules-container { max-width: 800px; margin: 0 auto; } .rules-table { width: 100%; border-collapse: collapse; } .rules-table th, .rules-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } .rules-table th { background: var(--bg-hover); font-weight: 600; } .rules-table tr:last-child td { border-bottom: none; } .rules-table td:first-child { width: 40%; white-space: nowrap; } .example-box { background: var(--bg-hover); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--f1-red); } .example-scenario { background: var(--bg-secondary); padding: 1rem; border-radius: 8px; margin-top: 1rem; } .example-scenario h4 { margin: 0 0 0.5rem 0; font-size: 1rem; } .example-calc { list-style: none; padding: 0; margin: 0.5rem 0 0 0; } .example-calc li { padding: 0.25rem 0; } .example-calc li.total { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border-color); font-size: 1.1rem; } /* Mobile breakpoint */ @media (max-width: 768px) { /* Hero section */ .hero { padding: 2rem 0 !important; } .hero h1 { font-size: 1.75rem !important; } .hero p { font-size: 0.9rem; } /* Cards */ .card { margin-left: -0.5rem; margin-right: -0.5rem; border-radius: 0; } .card-header, .card-body { padding: 1rem; } /* Grid layouts */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 0.75rem; } /* Race cards */ .race-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .race-header .badge { align-self: flex-start; } .race-meta { flex-direction: column; gap: 0.25rem; } /* Race card actions - make bet buttons more prominent on mobile */ .race-card > .flex.items-center.justify-between { flex-direction: column; align-items: stretch; gap: 0.75rem; } .race-card > .flex.items-center.justify-between > .flex.gap-1 { display: flex; flex-wrap: wrap; justify-content: stretch; gap: 0.5rem; } .race-card > .flex.items-center.justify-between > .flex.gap-1 > .btn { flex: 1; min-width: 45%; text-align: center; justify-content: center; } .race-card > .flex.items-center.justify-between > .flex.gap-1 > .btn-primary { flex: 1 1 100%; padding: 0.75rem 1rem; font-size: 0.9rem; } /* Bet predictions */ .bet-predictions { flex-wrap: wrap; } /* Buttons */ .btn { padding: 0.5rem 1rem; font-size: 0.8rem; } .btn-sm { padding: 0.4rem 0.75rem; font-size: 0.75rem; } /* User bet section */ .user-bet-section { padding: 0.75rem !important; } .user-bet-section .flex { flex-direction: column; align-items: flex-start !important; gap: 0.75rem; } /* Tables */ .rules-table td:first-child { width: auto; white-space: normal; } .rules-table th, .rules-table td { padding: 0.5rem; font-size: 0.875rem; } /* Hide podium on mobile */ .podium-section { display: none !important; } /* Leaderboard */ .leaderboard-table th, .leaderboard-table td { padding: 0.5rem; font-size: 0.875rem; } .leaderboard-table .user-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Forms */ .form-group { margin-bottom: 1rem; } .form-input, .form-select { font-size: 16px; /* Prevents zoom on iOS */ } /* Collapsible forms in admin */ .collapsible-header { padding: 1rem; } /* Betting modal */ .bet-modal { margin: 0.5rem; max-height: calc(100vh - 1rem); } .bet-modal-header, .bet-modal-body, .bet-modal-footer { padding: 1rem; } /* Page headers */ .page-header h1 { font-size: 1.5rem; } /* Footer */ .footer { padding: 1rem 0; font-size: 0.75rem; } /* Countdown timer */ .countdown-timer { font-size: 0.8rem; } /* All bets toggle */ .all-bets { padding: 0.75rem; } .bet-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .bet-item > .flex { width: 100%; justify-content: space-between; } /* Hide user name in controls on small screens */ .user-name { display: none; } } /* Extra small screens */ @media (max-width: 480px) { .container { padding: 0 0.75rem; } .logo-text { font-size: 0.9rem; } .logo-img { height: 32px; } .hero h1 { font-size: 1.5rem !important; } .position-badge { width: 28px; height: 28px; font-size: 0.7rem; } .btn { padding: 0.5rem 0.75rem; } } /* ============================================================ Admin nav — tabs on desktop (>=720px of the shell's own width), native

dropdown on mobile. One shared pattern for both nav levels (area switcher across admin.php/admin-challenges.php/admin-dashboards.php, and each page's own per-tab row) via renderAdminTabRow() in admin-area-nav.php — see epics/Admin area redesign/plan.md decisions 1/2. Container query (not a viewport media query) because the shell's real available width depends on where it's embedded, not the viewport. ============================================================ */ .admin-shell { container-type: inline-size; container-name: admin-vp; margin-bottom: 16px; } .admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); padding-bottom: 14px; } .admin-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--text-secondary); font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; text-decoration: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; background: none; transition: color 0.15s, border-color 0.15s; } .admin-tab:hover { color: var(--text-primary); } .admin-tab.active { color: var(--f1-red); border-bottom-color: var(--f1-red); } .admin-tab .tab-count { background: var(--bg-hover); color: var(--text-muted); padding: 0 6px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; font-family: var(--font-mono); } .admin-tab.active .tab-count { background: var(--f1-red); color: #fff; } .admin-dropdown { display: none; } .admin-dropdown summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; font-family: var(--font-display); font-weight: 700; color: var(--text-primary); } .admin-dropdown summary::-webkit-details-marker { display: none; } .admin-dropdown summary .label { display: flex; align-items: center; gap: 0.6rem; } .admin-dropdown summary .chev { transition: transform 0.2s; color: var(--text-muted); } .admin-dropdown[open] summary .chev { transform: rotate(180deg); } .admin-dropdown .menu { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; margin-top: 8px; display: flex; flex-direction: column; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .admin-dropdown .menu a { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.85rem; color: var(--text-secondary); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; border-radius: 6px; } .admin-dropdown .menu a .l { display: flex; align-items: center; gap: 0.65rem; } .admin-dropdown .menu a:hover { background: var(--bg-hover); color: var(--text-primary); } .admin-dropdown .menu a.active { background: var(--bg-hover); color: var(--f1-red); } .admin-dropdown .menu a .tab-count { background: var(--bg-card); color: var(--text-muted); padding: 1px 7px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; font-family: var(--font-mono); } .admin-dropdown .menu a.active .tab-count { background: var(--f1-red); color: #fff; } @container admin-vp (max-width: 720px) { .admin-tabs { display: none; } .admin-dropdown { display: block; } } /* Logs sub-tab pills (App/Mail/Cron) — a distinct third-level in-page switcher, not part of the admin-shell/renderAdminTabRow() framework above; kept as its own small pill style until Phase 3 of the admin redesign reaches logs.php. */ .admin-nav { display: flex; flex-wrap: wrap; gap: 6px; } .admin-nav-tab { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; white-space: nowrap; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-color); transition: background 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0; } .admin-nav-tab:hover { color: var(--text-primary); background: var(--bg-hover); } .admin-nav-tab.active { color: var(--f1-red); background: var(--bg-hover); border-color: var(--f1-red); } .admin-user-card-body { display: flex; flex-direction: column; gap: 10px; } .admin-user-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } @media (min-width: 600px) { .admin-user-card-body { flex-direction: row; align-items: center; justify-content: space-between; } } /* ============================================================ Hi-fi design tokens · broadcast palette (dark + light) Light theme switches via body.light .hifi-frame {…} below. ============================================================ */ :root { --f1-red: #e10600; --f1-red-light: #ff1a14; --f1-red-dark: #b30500; --gold: #fbbf24; --silver: #C0C0C8; --bronze: #CD7F32; --bg-primary: #131316; --bg-secondary: #1c1c20; --bg-card: #232328; --bg-hover: #2d2d33; --text-primary: #f5f5f7; --text-secondary: #b8b8be; --text-muted: #8e8e95; --border-color: #34343a; --border-soft: #2a2a2e; --status-success: #10b981; --status-warning: #f59e0b; --status-danger: #ef4444; /* "-light" aliases — the readable-on-dark-card shade already IS --status-success/warning/ danger above; several call sites already assumed this via a hardcoded fallback (var(--status-success-light, #10b981)) before these existed as real tokens. */ --status-success-light: var(--status-success); --status-warning-light: var(--status-warning); --status-danger-light: var(--status-danger); --status-neutral: #6b7280; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-pill: 9999px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; } /* Each .hifi-frame is an artboard root — clip + cover its declared width so the content lays out as if it were the viewport. */ .hifi-frame { background: var(--bg-primary); color: var(--text-primary); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow: hidden; border-radius: 20px; border: 1px solid var(--border-soft); box-shadow: 0 12px 32px rgba(0,0,0,0.35); position: relative; display: flex; flex-direction: column; } .hifi-frame * { box-sizing: border-box; } .hifi-frame h1, .hifi-frame h2, .hifi-frame h3, .hifi-frame h4 { font-family: var(--display); margin: 0; line-height: 1.1; } .hifi-frame a, .hifi-frame button { font-family: inherit; } /* Focus ring — visible only on keyboard nav */ .hifi-frame *:focus { outline: none; } .hifi-frame *:focus-visible { outline: 2px solid var(--f1-red); outline-offset: 2px; border-radius: 6px; } /* ============================================================ LIGHT THEME — overrides for body.light ============================================================ */ body.light .hifi-frame { --bg-primary: #f0f0f2; --bg-secondary: #e5e5e8; --bg-card: #f8f8fa; --bg-hover: #dcdce0; --text-primary: #1a1a1d; --text-secondary: #454549; --text-muted: #66666b; --border-color: #b3b3b8; --border-soft: #c8c8cc; } body.light .hf-top, body.light .hf-bottom { background: rgba(245, 245, 247, 0.92); } body.light .hf-cd-cell { background: rgba(0, 0, 0, 0.03); } body.light .hf-hero::before { background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 80px, rgba(225,6,0,0.06) 80px, rgba(225,6,0,0.06) 82px ); } body.light .hf-drawer { box-shadow: 0 24px 64px rgba(0,0,0,0.18); } body.light .hf-row.self { background: linear-gradient(90deg, rgba(225,6,0,0.07), var(--bg-card) 60%); } body.light .hf-cta-primary { box-shadow: 0 4px 14px rgba(225,6,0,0.22); } body.light .hf-cta-primary.hf-cta-primary--challenges { box-shadow: 0 4px 14px rgba(36,114,232,0.22); } body.light .hf-recap-arrow { background: rgba(255,255,255,0.7); border-color: var(--border-color); color: var(--text-primary); } body.light .hf-recap-arrow:hover { background: rgba(255,255,255,0.9); } body.light .hf-recap-dot { background: var(--border-color); } body.light .hf-recap-dot.active { background: var(--f1-red); } body.light .hf-toc a.active::before { background: var(--f1-red); } body.light .hf-arena-base .hf-toc a.active::before { background: var(--f1-accent-challenges); } body.light [data-testid="duel-queued-msg"] { color: #000; } /* ============================================================ Top bar — logo + hamburger ============================================================ */ .hf-top { height: 56px; padding: 0 16px; background: rgba(28, 28, 32, 0.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; position: sticky; top: 0; z-index: 20; } .hf-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; } .hf-logo-img { height: 32px; width: auto; display: block; flex-shrink: 0; } .hf-logo-text { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .hf-logo-text .yr { color: var(--text-muted); font-weight: 500; margin-left: 6px; font-size: 12px; } .hf-top-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; } .hf-rules-btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, transform 0.1s; } .hf-rules-btn:hover { background: var(--bg-hover); } .hf-rules-btn:active { transform: scale(0.94); } .hf-rules-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .hf-rules-btn--core { color: var(--f1-red); } .hf-rules-btn--ch { color: var(--f1-accent-challenges); } .hf-hamburger { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s, transform 0.1s, border-color 0.15s; } .hf-hamburger:hover { background: var(--bg-hover); border-color: var(--text-muted); } .hf-hamburger:active { transform: scale(0.96); } .hf-hamburger .bars { width: 16px; height: 12px; display: flex; flex-direction: column; justify-content: space-between; } .hf-hamburger .bars span { height: 2px; background: currentColor; border-radius: 1px; } @media (max-width: 480px) { .hf-top { padding: 0 12px; } .hf-logo { gap: 8px; } .hf-logo-img { height: 18px; } } /* ============================================================ CP chip — no longer shown in the top bar (product decision), but several e2e specs (40/44/47) assert on data-testid="cp-chip" as their DOM signal for "participant session is active" (session isolation, cookie rotation, sign-out, expired tokens, CP totals) — kept present-but-invisible instead of removed so that coverage doesn't need rewriting. Sized 1x1 (not display:none) so Playwright's toBeVisible()/toContainText() still pass. ============================================================ */ .hf-cp-chip { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ============================================================ Bottom bar — persistent at every width ============================================================ */ .hf-bottom { height: 64px; padding: 8px 16px; background: rgba(28, 28, 32, 0.95); backdrop-filter: blur(14px); border-top: 1px solid var(--border-soft); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; flex-shrink: 0; position: sticky; bottom: 0; z-index: 20; } .hf-bb-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-muted); background: transparent; border: none; padding: 4px 0; cursor: pointer; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; transition: color 0.15s, transform 0.1s; } .hf-bb-item:hover { color: var(--text-primary); } .hf-bb-item:active { transform: scale(0.95); } .hf-bb-item.active { color: var(--f1-red); } .hf-bb-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .hf-bb-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-card); border: 1.5px solid var(--f1-red); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 12px; color: var(--text-primary); } /* ============================================================ Drawer (visual reference for hi-fi only — opens from top bar) ============================================================ */ .hf-drawer { position: fixed; top: 56px; right: 12px; width: min(340px, calc(100% - 24px)); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.55); display: flex; flex-direction: column; z-index: 30; animation: hf-drop 200ms cubic-bezier(.2,.7,.3,1.1); } @keyframes hf-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .hf-drawer-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; color: var(--text-secondary); text-decoration: none; font-family: var(--display); font-size: 14px; font-weight: 600; position: relative; } .hf-drawer-row:hover { background: var(--bg-hover); color: var(--text-primary); } .hf-drawer-row.active { color: var(--text-primary); background: var(--bg-hover); } .hf-drawer-row.active::after { content: ""; position: absolute; right: 12px; top: 12px; bottom: 12px; width: 3px; background: var(--f1-red); border-radius: 2px; } .hf-drawer-row i { width: 18px; text-align: center; color: var(--text-muted); font-size: 14px; } .hf-drawer-row.active i { color: var(--f1-red); } /* ============================================================ Page body wrapper ============================================================ */ .hf-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .hf-container { width: 100%; margin: 0 auto; padding-left: 16px; padding-right: 16px; } @media (min-width: 768px) { .hf-container { padding-left: 24px; padding-right: 24px; max-width: 760px; } } @media (min-width: 1024px) { .hf-container { padding-left: 32px; padding-right: 32px; max-width: 1080px; } } @media (min-width: 1280px) { .hf-container { padding-left: 48px; padding-right: 48px; max-width: 1280px; } } /* ============================================================ Hero — full-bleed next-race ============================================================ */ .hf-hero { position: relative; padding: 32px 16px 28px; background: radial-gradient(circle at 80% 0%, rgba(225,6,0,0.18), transparent 60%), radial-gradient(circle at 10% 100%, rgba(225,6,0,0.10), transparent 50%), var(--bg-secondary); border-bottom: 1px solid var(--border-soft); overflow: hidden; } .hf-hero::before { /* Subtle racing-stripe diagonal — pure CSS, no image */ content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 80px, rgba(225,6,0,0.04) 80px, rgba(225,6,0,0.04) 82px ); pointer-events: none; } .hf-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(225,6,0,0.12); border: 1px solid rgba(225,6,0,0.4); font-family: var(--display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--f1-red-light); white-space: nowrap; max-width: 100%; } .hf-hero-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--f1-red-light); box-shadow: 0 0 8px var(--f1-red-light); animation: hf-pulse 1.5s ease-in-out infinite; } @keyframes hf-pulse { 50% { opacity: 0.5; transform: scale(0.85); } } .hf-hero-title { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; margin-top: 12px; } .hf-hero-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; color: var(--text-secondary); font-size: 14px; flex-wrap: wrap; } .hf-hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); } /* Recap carousel (home hero fallback) — horizontal padding on the carousel (not the arrows) reserves room so slide text never sits under the arrow circles, whatever the content height happens to be (arrows stay vertically centered on the whole carousel, not on any one text line). */ .hf-recap-carousel { position: relative; padding: 0 44px; } .hf-recap-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; } .hf-recap-arrow:hover { background: rgba(0, 0, 0, 0.5); } .hf-recap-arrow-prev { left: 0; } .hf-recap-arrow-next { right: 0; } .hf-recap-dots { display: flex; gap: 7px; margin-top: 22px; } .hf-recap-dot { width: 7px; height: 7px; border-radius: 50%; padding: 0; border: none; background: var(--border-color); cursor: pointer; transition: background 0.15s, transform 0.15s; } .hf-recap-dot.active { background: var(--f1-red-light); transform: scale(1.3); } /* Recap slide insight — the prominent element, between the winner headline and the podium chips. Podium chips shrink to compact secondary detail underneath (scoped to .hf-recap-slide only — .quali-row/.position-badge are shared classes used at full size elsewhere, e.g. race.php's own qualifying/race result rows). */ .hf-recap-insight { margin-top: 16px; padding-left: 16px; border-left: 3px solid var(--f1-accent-challenges-light); } .hf-recap-insight-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--f1-accent-challenges-light); margin-bottom: 4px; } .hf-recap-insight-text { font-size: 19px; line-height: 1.4; color: var(--text-primary); font-weight: 600; max-width: 56ch; } .hf-recap-slide .hf-recap-podium { gap: 14px; margin-top: 10px; } .hf-recap-slide .hf-recap-podium .position-badge { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; } .hf-recap-slide .hf-recap-podium .quali-item { font-size: 12.5px; color: var(--text-secondary); } @media (max-width: 768px) { .hf-recap-carousel { padding: 0 34px; } .hf-recap-arrow { width: 26px; height: 26px; font-size: 10px; } .hf-recap-insight-text { font-size: 16.5px; } } /* Countdown */ .hf-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 24px; max-width: 480px; } .hf-cd-cell { background: rgba(255,255,255,0.04); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 8px 10px; text-align: center; backdrop-filter: blur(8px); } .hf-cd-num { font-family: var(--display); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; color: var(--text-primary); } .hf-cd-label { font-family: var(--display); font-size: 10px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; font-weight: 600; } .hf-cta-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 10px; border: none; background: var(--f1-red); color: white; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.005em; cursor: pointer; margin-top: 22px; transition: background 0.15s, transform 0.1s; box-shadow: 0 4px 14px rgba(225,6,0,0.35); } .hf-cta-primary:hover { background: var(--f1-red-light); } .hf-cta-primary:active { transform: translateY(1px); } .hf-cta-primary .arrow { font-size: 17px; } .hf-cta-primary.hf-cta-primary--challenges { background: var(--f1-accent-challenges); box-shadow: 0 4px 14px rgba(36,114,232,0.35); } .hf-cta-primary.hf-cta-primary--challenges:hover { background: var(--f1-accent-challenges-light); } /* ============================================================ Generic page section ============================================================ */ .hf-section { padding: 28px 0 12px; } .hf-section-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .hf-section-h h2 { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.005em; } .hf-section-h a { color: var(--text-muted); font-family: var(--display); font-size: 13px; font-weight: 600; text-decoration: none; } .hf-section-h a:hover { color: var(--text-primary); } /* ============================================================ Leaderboard row ============================================================ */ .hf-row { display: grid; grid-template-columns: 36px 32px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; margin-bottom: 8px; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; cursor: pointer; } .hf-row:hover { border-color: var(--border-color); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .hf-row.self { background: linear-gradient(90deg, rgba(225,6,0,0.10), var(--bg-card) 50%); border-color: rgba(225,6,0,0.35); } .hf-rank { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 14px; background: var(--bg-hover); color: var(--text-secondary); } .hf-rank.r1 { background: linear-gradient(135deg, #fbbf24, #d97706); color: #1a1a1d; } .hf-rank.r2 { background: linear-gradient(135deg, #9ca3af, #6b7280); color: #1a1a1d; } .hf-rank.r3 { background: linear-gradient(135deg, #cd7c2f, #a15c1d); color: white; } .hf-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-hover); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 13px; flex-shrink: 0; } .hf-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hf-who-name { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hf-who-sub { font-size: 11px; color: var(--text-muted); } .hf-stars { color: var(--gold); font-family: var(--display); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 2px; } .hf-pts { font-family: var(--display); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text-primary); min-width: 48px; text-align: right; } /* ============================================================ Race card (smaller — for "recent" lists) ============================================================ */ .hf-racecard { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; margin-bottom: 8px; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; cursor: pointer; } .hf-racecard:hover { border-color: var(--border-color); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .hf-racecard--static { cursor: default; } .hf-racecard--static:hover { transform: none; box-shadow: none; border-color: var(--border-soft); } .hf-racenum { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border-color); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--text-secondary); flex-shrink: 0; } .hf-racename { font-family: var(--display); font-weight: 700; font-size: 14px; } .hf-racemeta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .pool-break::before { content: '\00a0·\00a0'; } @media (max-width: 768px) { .pool-break { display: block; } .pool-break::before { display: none; } } .hf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .hf-badge.open { background: rgba(16,185,129,0.12); color: var(--status-success); border: 1px solid rgba(16,185,129,0.3); } .hf-badge.soon { background: rgba(245,158,11,0.12); color: var(--status-warning); border: 1px solid rgba(245,158,11,0.3); } .hf-badge.done { background: rgba(139,139,150,0.10); color: var(--text-muted); border: 1px solid var(--border-color); } .hf-badge.live { background: rgba(225,6,0,0.18); color: var(--f1-red-light); border: 1px solid rgba(225,6,0,0.45); } .hf-badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--status-success-light, #10b981); vertical-align: middle; } /* ============================================================ Stat tile (used on profile + leaderboard summary) ============================================================ */ .hf-stat { padding: 16px 14px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; } .hf-stat-n { font-family: var(--display); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em; } .hf-stat-l { font-family: var(--display); font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* ============================================================ Profile header + stripe ============================================================ */ .hf-profile-head { display: flex; align-items: center; gap: 16px; padding: 24px 0 20px; } .hf-profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--bg-hover), var(--bg-secondary)); border: 2px solid var(--f1-red); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-size: 26px; color: var(--text-primary); } .hf-profile-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hf-profile-name { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; } .hf-profile-sub { color: var(--text-muted); font-size: 13px; } .hf-profile-sub .star { color: var(--gold); font-weight: 700; } /* ============================================================ Rules — numbered editorial sections ============================================================ */ .hf-rule { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 24px 0; border-bottom: 1px solid var(--border-soft); } .hf-rule:last-child { border-bottom: none; } .hf-rule-num { font-family: var(--display); font-weight: 900; font-size: 36px; line-height: 0.9; color: var(--f1-red); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .hf-rule h3 { font-family: var(--display); font-weight: 800; font-size: 18px; margin-bottom: 8px; } .hf-rule p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 0; max-width: 60ch; } .hf-rule p + p { margin-top: 10px; } .hf-rule code { font-family: var(--font-mono); background: var(--bg-secondary); padding: 1px 6px; border-radius: 4px; font-size: 13px; color: var(--text-primary); } .hf-rule .kbd { display: inline-block; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 6px; font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); line-height: 1.4; } /* ============================================================ TOC sidebar (rules at LG+) ============================================================ */ .hf-toc { border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px; background: var(--bg-card); position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; } .hf-toc-title { font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; padding: 0 8px; } .hf-toc a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--text-secondary); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 13px; } .hf-toc a:hover { background: var(--bg-hover); color: var(--text-primary); } .hf-toc a.active { background: var(--bg-hover); color: var(--text-primary); } .hf-toc a.active::before { content: ""; width: 3px; height: 14px; background: var(--f1-red); border-radius: 2px; margin-right: -3px; } .hf-toc .n { width: 22px; height: 22px; border-radius: 5px; background: var(--bg-secondary); color: var(--text-muted); font-family: var(--display); font-weight: 800; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .hf-toc a.active .n { background: var(--f1-red); color: white; } /* ============================================================ Page header (titles for non-hero pages) ============================================================ */ .hf-pageh { padding: 28px 0 10px; } .hf-pageh .crumb { color: var(--text-muted); font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; } .hf-pageh h1 { font-family: var(--display); font-weight: 900; letter-spacing: -0.02em; } .hf-pageh .lede { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin-top: 8px; max-width: 60ch; } /* ============================================================ Segmented control (filters) ============================================================ */ .hf-seg { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; padding: 3px; gap: 2px; } .hf-seg button { border: none; background: transparent; color: var(--text-muted); padding: 8px 14px; border-radius: 7px; font-family: var(--display); font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.15s, color 0.15s; } .hf-seg button:hover { color: var(--text-primary); } .hf-seg button.active { background: var(--bg-hover); color: var(--text-primary); } .hf-seg a { color: var(--text-muted); } .hf-seg a:hover { color: var(--text-primary); } .hf-seg a.active { color: var(--f1-red); font-weight: 700; } .hf-seg a.active i { color: var(--f1-red); } /* ============================================================ Tabs (used on profile) ============================================================ */ .hf-tabs { display: flex; border-bottom: 1px solid var(--border-soft); margin-bottom: 14px; } .hf-tabs button:not(.btn) { background: none; border: none; padding: 10px 14px; color: var(--text-muted); font-family: var(--display); font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .hf-tabs button:not(.btn):hover { color: var(--text-primary); } .hf-tabs button:not(.btn).active { color: var(--text-primary); border-bottom-color: var(--f1-red); } /* ============================================================ Empty / muted variants ============================================================ */ .hf-mute { color: var(--text-muted); } /* ============================================================ Page footer — versioned, sits above the sticky bottom bar ============================================================ */ .hf-footer { padding: 28px 0 20px; margin-top: auto; border-top: 1px solid var(--border-soft); text-align: center; color: var(--text-muted); font-family: var(--display); font-size: 11px; letter-spacing: 0.04em; line-height: 1.5; } .hf-footer .name { font-weight: 700; color: var(--text-secondary); } .hf-divider { height: 1px; background: var(--border-soft); margin: 4px 0; } /* ============================================================ States reference — forced classes that mirror :hover / :active so the user can see interactive states statically in the canvas (pointer events go through the canvas, making :hover hard to test) ============================================================ */ .is-hover.hf-row, .is-hover.hf-racecard { border-color: var(--border-color); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .is-hover.hf-hamburger { background: var(--bg-hover); border-color: var(--text-muted); } .is-active.hf-hamburger, .is-active.hf-bb-item { transform: scale(0.96); } .is-hover.hf-bb-item { color: var(--text-primary); } .is-focus { outline: 2px solid var(--f1-red); outline-offset: 2px; border-radius: 6px; } .is-hover.hf-cta-primary { background: var(--f1-red-light); } .is-disabled { opacity: 0.4; pointer-events: none; } .state-row { display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px dashed var(--border-soft); } .state-row:last-child { border-bottom: none; } .state-row .label { font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; } .state-row .sample { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .state-sample-frame { background: var(--bg-primary); color: var(--text-primary); padding: 28px 24px; border-radius: 16px; border: 1px solid var(--border-soft); font-family: var(--body); display: flex; flex-direction: column; gap: 4px; } .state-sample-frame h3 { font-family: var(--display); font-weight: 800; font-size: 18px; margin: 0 0 8px; color: var(--text-primary); } /* ============================================================ Per-breakpoint type ramp (frame-level multiplier) The artboard has a .hf-frame-{xs|sm|md|lg|xl} class set by JS. ============================================================ */ .hf-frame-xs .hf-hero-title { font-size: 36px; } .hf-frame-sm .hf-hero-title { font-size: 44px; } .hf-frame-md .hf-hero-title { font-size: 56px; } .hf-frame-lg .hf-hero-title { font-size: 72px; } .hf-frame-xl .hf-hero-title { font-size: 84px; } .hf-frame-xs .hf-cd-num { font-size: 28px; } .hf-frame-sm .hf-cd-num { font-size: 34px; } .hf-frame-md .hf-cd-num { font-size: 40px; } .hf-frame-lg .hf-cd-num { font-size: 48px; } .hf-frame-xl .hf-cd-num { font-size: 56px; } .hf-frame-xs .hf-pageh h1 { font-size: 28px; } .hf-frame-sm .hf-pageh h1 { font-size: 34px; } .hf-frame-md .hf-pageh h1 { font-size: 42px; } .hf-frame-lg .hf-pageh h1 { font-size: 52px; } .hf-frame-xl .hf-pageh h1 { font-size: 60px; } .hf-frame-xs .hf-stat-n { font-size: 30px; } .hf-frame-sm .hf-stat-n { font-size: 36px; } .hf-frame-md .hf-stat-n { font-size: 44px; } .hf-frame-lg .hf-stat-n { font-size: 52px; } .hf-frame-xl .hf-stat-n { font-size: 60px; } .hf-frame-md .hf-section { padding: 36px 0 12px; } .hf-frame-lg .hf-section { padding: 44px 0 16px; } .hf-frame-xl .hf-section { padding: 52px 0 18px; } .hf-frame-md .hf-hero { padding: 44px 24px 36px; } .hf-frame-lg .hf-hero { padding: 64px 32px 56px; } .hf-frame-xl .hf-hero { padding: 80px 48px 72px; } /* ── Phase D: Login layout ────────────────────────────────── */ .hf-login-grid { display: flex; flex-direction: column; padding: 32px 0 24px; } .hf-login-intro { display: none; } .hf-login-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 24px 64px rgba(0,0,0,0.4); max-width: 460px; margin: 0 auto; width: 100%; } @media (min-width: 1024px) { .hf-login-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; min-height: calc(100vh - 56px - 64px); padding: 0; } .hf-login-intro { display: block; } .hf-login-card { max-width: 440px; justify-self: end; margin: 0; } } /* ── Phase D: MFA challenge — list→detail (v3.0.0). Additive only. ───────── */ .more-toggle { display:inline-flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; color:var(--text-secondary); font:600 13px/1 var(--font-display); } .more-toggle .chev { transition:transform .18s; } .more-toggle.open .chev { transform:rotate(180deg); } .method { display:flex; align-items:center; gap:13px; width:100%; padding:13px 14px; border-radius:12px; cursor:pointer; text-align:left; background:var(--bg-secondary); border:1px solid var(--border-color); color:var(--text-primary); } .method:hover { background:var(--bg-hover); border-color:var(--f1-red); } .method .ic { width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--f1-red-light); background:var(--bg-card); border:1px solid var(--border-soft); } .otp { display:flex; gap:9px; justify-content:space-between; } .otp input { width:100%; min-width:0; aspect-ratio:1/1.1; min-height:44px; text-align:center; border-radius:10px; background:var(--bg-secondary); border:1px solid var(--border-color); color:var(--text-primary); font:700 22px/1 var(--font-mono); outline:none; } .otp input:focus { border-color:var(--f1-red); box-shadow:0 0 0 4px rgba(225,6,0,.14); } .code-sent { display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:10px; background:rgba(30,138,91,.12); border:1px solid rgba(30,138,91,.4); color:var(--text-secondary); font-size:12.5px; } .code-sent i { color:#2fb37f; } /* ── Phase D: Leaderboard layout ───────────────────────────── */ /* Podium strip — mobile first */ /* Podium strip — full width above the list */ .hf-podium-strip { display: flex; align-items: flex-end; gap: 8px; width: 100%; } .hf-podium-block { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--border-soft); text-align: center; overflow: hidden; } .hf-podium-block.p1 { order: 2; height: 150px; background: linear-gradient(160deg, rgba(251,191,36,0.18), var(--bg-card) 70%); border-color: rgba(251,191,36,0.4); } .hf-podium-block.p2 { order: 1; height: 130px; background: linear-gradient(160deg, rgba(156,163,175,0.14), var(--bg-card) 70%); border-color: rgba(156,163,175,0.3); } .hf-podium-block.p3 { order: 3; height: 110px; background: linear-gradient(160deg, rgba(205,127,50,0.14), var(--bg-card) 70%); border-color: rgba(205,127,50,0.3); } .hf-podium-icon { font-size: 18px; line-height: 1; margin-bottom: 4px; } .hf-podium-pts { font-family: var(--display); font-weight: 900; font-size: 17px; line-height: 1; color: var(--text-primary); } .hf-podium-name { font-family: var(--display); font-weight: 700; font-size: 11px; line-height: 1; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 3px; } .hf-podium-name .full-name { display: none; } .hf-podium-name .first-name { display: inline; } @media (min-width: 400px) { .hf-podium-name .full-name { display: inline; } .hf-podium-name .first-name { display: none; } } @media (min-width: 600px) { .hf-podium-block.p1 { height: 185px; } .hf-podium-block.p2 { height: 155px; } .hf-podium-block.p3 { height: 130px; } .hf-podium-icon { font-size: 24px; } .hf-podium-pts { font-size: 22px; } .hf-podium-name { font-size: 13px; } } /* List + self card body */ .hf-lb-body { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } .hf-lb-list { flex: 1; min-width: 0; padding-bottom: 32px; } @media (min-width: 1024px) { .hf-lb-body { flex-direction: row; align-items: flex-start; gap: 24px; } .hf-lb-body .hf-self-card { flex: 0 0 280px; position: sticky; top: 72px; } } /* Self card */ .hf-self-card { background: linear-gradient(135deg, rgba(225,6,0,0.12), var(--bg-card) 70%); border: 1px solid rgba(225,6,0,0.3); border-radius: 12px; padding: 20px 24px; } .hf-self-label { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--f1-red); margin-bottom: 10px; } .hf-self-rank { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; } .hf-self-rank-n { font-family: var(--font-display); font-size: 64px; font-weight: 900; color: var(--text-primary); line-height: 1; } .hf-self-rank-of { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-muted); } .hf-self-delta { font-family: var(--font-display); font-size: 13px; color: var(--text-muted); margin-bottom: 20px; } .hf-self-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--border-soft); padding-top: 16px; } .hf-self-stat-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 4px; } .hf-self-stat-val { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text-primary); } /* ── Phase D: Rules layout ──────────────────────────────────── */ .hf-rules-layout { display: block; padding-bottom: 32px; } .hf-rules-layout .hf-toc { display: none; } .hf-rules-chips { display: none; } @media (min-width: 768px) { .hf-rules-chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 24px 0 8px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-card); } } @media (min-width: 1024px) { .hf-rules-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; } .hf-rules-layout .hf-toc { display: flex; } .hf-rules-chips { display: none; } } /* Phase B: drawer is hidden until JS adds .open */ .hf-drawer { display: none; } .hf-drawer.open { display: flex; flex-direction: column; } /* ── Phase D: Home (index) layout ───────────────────────────── */ .hf-hero-inner { display: flex; flex-direction: column; gap: 0; } .hf-hero-left { flex: 1; } .hf-hero-right { display: none; } /* hidden mobile */ .hf-hero-cd-inline { display: grid; } /* countdown shown inline mobile */ .hf-home-stats { display: none; } /* Home DIN POSITION card — horizontal layout */ .hf-self-card-home { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; } .hf-self-card-home .hf-self-stats { border-top: 1px solid var(--border-soft); padding-top: 16px; grid-template-columns: repeat(4, 1fr); } @media (min-width: 640px) { .hf-self-card-home { flex-direction: row; align-items: center; gap: 32px; } .hf-self-card-home .hf-self-rank-n { font-size: 48px; } .hf-self-card-home-left { flex-shrink: 0; } .hf-self-card-home-right { flex: 1; border-top: none; padding-top: 0; border-left: 1px solid var(--border-soft); padding-left: 32px; } } .hf-home-grid { display: grid; grid-template-columns: 1fr; gap: 0; padding-bottom: 48px; } @media (min-width: 768px) { .hf-home-grid { grid-template-columns: 280px 1fr; gap: 32px; align-items: start; } .hf-home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px 0 4px; } } @media (min-width: 1024px) { .hf-hero-inner { flex-direction: row; align-items: center; gap: 48px; } .hf-hero-right { display: flex; flex: 0 0 auto; } .hf-hero-cd-inline { display: none; } /* hide inline, show right-col instead */ .hf-home-grid { grid-template-columns: 300px 1fr; gap: 40px; } } /* ── Phase D: Races full-page card ─────────────────────────── */ .hf-racefull { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; margin-bottom: 10px; transition: border-color 0.15s; } .hf-racefull:hover { border-color: var(--border-color); } .hf-racefull-hd { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; } .hf-racefull-info { flex: 1; min-width: 0; } .hf-racefull-body { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border-soft); } /* ── Phase D: Races page layout ─────────────────────────────── */ .hf-races-seg-wrap { margin: 8px 0 16px; } .hf-races-grid { display: block; padding-bottom: 48px; } .hf-races-col.hidden { display: none; } @media (min-width: 1024px) { .hf-races-seg-wrap { display: none; } .hf-races-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .hf-races-col.hidden { display: block; } } /* ── Home page: races/results seg (mobile only) ────────────── */ .hf-home-seg-wrap { margin: 8px 0 16px; } .hf-home-sec.hidden { display: none; } @media (min-width: 768px) { .hf-home-seg-wrap { display: none; } .hf-home-sec.hidden { display: block; } } /* ── Phase D: Profile layout ────────────────────────────────── */ /* Single, full-width column — the tabs (incl. Betting History) span the page. */ .hf-profile-grid { display: block; padding-bottom: 48px; } .hf-profile-forms { display: flex; flex-direction: column; gap: 16px; } /* Betting-history cards flow into a responsive grid across the full width. */ .hf-history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } /* ── Phase D: Bet page ──────────────────────────────────────── */ .hf-bet-wrap { max-width: 640px; margin: 0 auto; } .hf-auth-wrap { max-width: 440px; margin: 0 auto; } /* ============================================================ v1.3.2 — Bet modal (full re-spec) ============================================================ */ .hf-modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 32px 16px; animation: hf-overlay-in 180ms ease-out; } .hf-modal-overlay[hidden] { display: none; } .hf-modal-card { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: calc(100vh - 64px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; animation: hf-modal-in 220ms cubic-bezier(.2,.7,.3,1.1); } @keyframes hf-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes hf-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } @media (max-width: 767px) { .hf-modal-overlay { padding: 0; background: var(--bg-primary); backdrop-filter: none; } .hf-modal-card { max-width: none; max-height: none; min-height: 100vh; gap: 16px; padding-top: 24px; } } /* Card 1 — race info */ .hf-bet-header { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 12px 16px 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 14px; } .hf-bet-meta { flex: 1; min-width: 0; } .hf-bet-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--text-primary); margin: 0; } .hf-bet-test { color: var(--text-muted); font-weight: 500; } .hf-bet-submeta { color: var(--text-muted); font-size: 13px; margin-top: 2px; } .hf-bet-countdown { margin-top: 6px; color: var(--text-muted); font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hf-bet-countdown i { font-size: 12px; } .hf-bet-countdown-val { color: var(--status-success); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; } .hf-bet-badge { align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } .hf-bet-badge.open { background: rgba(16,185,129,0.15); color: var(--status-success); border: 1px solid rgba(16,185,129,0.35); } .hf-bet-badge.closed { background: rgba(225,6,0,0.12); color: var(--f1-red-light); border: 1px solid rgba(225,6,0,0.40); } .hf-all-bets-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; } .hf-all-bets-toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; text-align: left; } .hf-all-bets-toggle:hover { color: var(--text-primary); } .hf-all-bets-toggle:focus { outline: none; } .hf-all-bets-toggle i:last-child { margin-left: auto; } .hf-all-bets-body { border-top: 1px solid var(--border-color); padding: 8px 0; } .hf-bet-toprow { flex: 0 0 100%; order: -1; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; } .hf-bet-close { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; text-decoration: none; } .hf-bet-rules { width: 32px; height: 32px; } .hf-bet-close:focus { outline: none; } .hf-bet-close:hover { background: var(--bg-hover); color: var(--text-primary); } /* Card 2 — betting controls */ .hf-bet-controls { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 16px; } /* Position badges (reused in dropdown rows) */ .hf-slot-badge { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 12px; color: white; flex-shrink: 0; } .hf-slot-badge.pos-1 { background: var(--gold, #FBBF24); color: #1c1c1c; } .hf-slot-badge.pos-2 { background: var(--silver, #C0C0C8); color: #1c1c1c; } .hf-slot-badge.pos-3 { background: var(--bronze, #CD7F32); color: #ffffff; } .hf-slot-pts { color: var(--text-muted); font-size: 13px; font-weight: 500; flex-shrink: 0; } /* Dropdown select rows */ .hf-bet-selects { display: flex; flex-direction: column; gap: 16px; } .hf-bet-select-row { display: flex; align-items: center; gap: 12px; } .hf-bet-select { flex: 1; } /* Footer actions */ .hf-bet-actions { display: flex; gap: 12px; padding-top: 4px; } .hf-btn-ghost { flex: 1; height: 48px; border-radius: 10px; background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); font-family: var(--font-display); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .hf-btn-ghost:hover { background: var(--bg-hover); } .hf-btn-primary { flex: 2; height: 48px; border-radius: 10px; background: var(--f1-red); border: none; color: white; font-family: var(--font-display); font-weight: 700; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 14px rgba(225,6,0,0.35); transition: background 0.15s, transform 0.1s; } .hf-btn-primary:hover { background: var(--f1-red-light); } .hf-btn-primary:active { transform: translateY(1px); } .hf-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* ── Phase F: Rank delta ─────────────────────────────────────── */ .hf-rank-delta { font-family: var(--font-display); font-size: 11px; font-weight: 700; min-width: 32px; text-align: right; flex-shrink: 0; grid-column: 5; grid-row: 2; } .hf-rank-delta .up { color: var(--status-success); } .hf-rank-delta .dn { color: var(--f1-red); } .hf-rank-delta .nc { color: var(--text-muted); } .hf-last-picks { grid-column: 1 / 5; grid-row: 2; display: flex; align-items: center; gap: 5px; } .hf-last-bet-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .hf-last-bet-pts { font-family: var(--font-display); font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; } .hf-last-bet-pts.has-pts { background: rgba(16,185,129,0.12); color: var(--status-success); } .hf-last-bet-pts.zero-pts { background: var(--bg-hover); color: var(--text-muted); } /* ── Font toggle Stack B — zero Google Fonts (AC-FONT-01) ────── */ body.font-system { --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-accent: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Short aliases must be overridden here too — overriding only the canonical token is not enough */ --display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --accent: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ── Font utility classes ─────────────────────────────────────── */ .label-badge { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.02em; } .label-position { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .label-lede { font-family: var(--font-accent); font-weight: 400; font-size: 1.125rem; line-height: 1.45; color: var(--text-secondary); } .label-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.01em; } .label-version { font-family: var(--font-mono); font-weight: 700; font-size: 0.625rem; padding: 1px 6px; border-radius: 4px; background: var(--bg-secondary); color: var(--text-secondary); letter-spacing: 0.02em; } /* ── Profile stats strip ─────────────────────────────────── */ .hf-profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; } /* ── Profile tabs ────────────────────────────────────────── */ .hf-tabs { display: flex; flex-direction: column; } .hf-tab-nav { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); } .hf-tab-btn { flex: 1 1 140px; text-align: center; padding: 9px 20px; border-radius: 6px; border: 1px solid var(--text-secondary); background: var(--bg-card); color: var(--text-primary); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; letter-spacing: 0.01em; } .hf-tab-btn:hover { background: var(--bg-hover); border-color: var(--f1-red); } .hf-tab-btn.active { background: var(--f1-red); color: #fff; border-color: var(--f1-red); } /* ── Preference segmented toggles ───────────────────────── */ .hf-pref-toggle { display: flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-color); width: 100%; } .hf-pref-btn { flex: 1; padding: 8px 12px; border: none; border-right: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; text-align: center; } .hf-pref-btn:last-child { border-right: none; } .hf-pref-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .hf-pref-btn.active { background: var(--f1-red); color: #fff; } /* ── Display name character counter ─────────────────────── */ .hf-char-counter { display: block; text-align: right; font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; } .hf-char-counter.warn { color: var(--status-warning); } /* ── Password match indicator ───────────────────────────── */ .hf-pw-match { display: block; font-size: 0.8rem; margin-top: 4px; min-height: 1.2em; } .hf-pw-match.ok { color: var(--status-success); } .hf-pw-match.err { color: var(--f1-red-light); } /* ============================================================ v2.2.0 — Profile stats (points hero + 2 status chips) ============================================================ */ .hf-stats { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 20px; } .hf-stats-hero { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; display: flex; align-items: baseline; gap: 14px; } .hf-stats-hero-num { font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 4px; } .hf-stats-hero-unit { font-family: var(--font-display); color: var(--text-muted); font-size: 14px; font-weight: 600; } .hf-stats-hero-stars { font-weight: 700; font-size: 18px; color: var(--gold); letter-spacing: 0.5px; } .hf-stats-hero-stars.empty { color: var(--gold); font-size: 14px; font-weight: 700; opacity: 0.85; } .hf-stats-hero-eyebrow { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .hf-stats-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hf-stats-chip { background: transparent; border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; min-height: 44px; } .hf-stats-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; } .hf-stats-chip .meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .hf-stats-chip .k { font-family: var(--font-display); font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .hf-stats-chip .v { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hf-stats-chip.role-admin .dot { background: var(--f1-red-light); } .hf-stats-chip.role-user .dot { background: var(--text-secondary); } .hf-stats-chip.in .dot { background: var(--status-success-light, #10b981); } .hf-stats-chip.out .dot { background: var(--text-muted); } .hf-stats-chip.out .v { color: var(--text-secondary); font-weight: 600; } .hf-stats-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .hf-stats-metric { background: transparent; border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hf-stats-metric .k { font-family: var(--font-display); font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .hf-stats-metric .v { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .hf-stats-metric .v .of { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 3px; } .hf-stats-delta { font-size: 12px; color: var(--text-muted); padding: 0 2px; margin-top: -2px; } @media (min-width: 768px) { .hf-stats { gap: 10px; margin: 24px 0 28px; } .hf-stats-hero { padding: 18px 20px; gap: 18px; } .hf-stats-hero-num { font-size: 44px; } .hf-stats-hero-unit { font-size: 16px; } .hf-stats-hero-stars { font-size: 22px; } .hf-stats-chip { padding: 10px 14px; min-height: 52px; } .hf-stats-chip .v { font-size: 14px; } .hf-stats-metric { padding: 10px 14px; } .hf-stats-metric .v { font-size: 26px; } } /* v2.3.0 — Single-race page additions (race.php). Additive only. */ .race-schedule { margin-top:1rem; padding:0.875rem 1rem; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:12px; display:flex; flex-direction:column; gap:0.75rem; } .race-schedule .countdown-timer { display:grid; grid-template-columns:18px 1fr auto; align-items:baseline; gap:0.375rem 0.625rem; margin:0; } .race-schedule .countdown-timer .countdown-value { text-align:right; white-space:nowrap; } .countdown-timer.done .countdown-value { color:var(--text-muted); } .result-pending { display:flex; align-items:center; gap:0.625rem; margin-top:0.5rem; padding:0.75rem 0.875rem; border:1px dashed var(--border-color); border-radius:8px; color:var(--text-muted); font-size:0.875rem; } .race-login-cta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.875rem; margin-top:1.125rem; padding:1rem 1.125rem; border-radius:12px; background:linear-gradient(90deg,rgba(225,6,0,0.12),rgba(225,6,0,0.03)); border:1px solid rgba(225,6,0,0.35); } .race-login-mini { align-self:flex-end; display:inline-flex; align-items:center; gap:0.4375rem; padding:0.4375rem 0.8125rem; border-radius:8px; background:rgba(225,6,0,0.10); border:1px solid rgba(225,6,0,0.45); color:var(--f1-red-light); font-weight:700; font-size:0.78rem; text-decoration:none; white-space:nowrap; } .race-login-mini:hover { background:var(--f1-red); border-color:var(--f1-red); color:#fff; } .bets-empty { padding:1.25rem; text-align:center; border:1px dashed var(--border-color); border-radius:12px; color:var(--text-muted); } /* v2.4.0 — race.php fidelity (Race Page.html). Additive + namespaced; inherits theme tokens. */ /* Pool-size number in the schedule box: gold, matching the $ icon (beats .countdown-value red). */ .race-schedule .countdown-value.bettingpool_size { color:#b98f10; } /* Whole race box is clickable (index.php / races.php). */ .clickable-card { cursor:pointer; } /* "YOU" tag on own bet */ .race-you-tag { display:inline-flex; align-items:center; background:var(--f1-red); color:#fff; font-family:var(--display); font-weight:800; font-size:10px; line-height:1; padding:3px 7px; border-radius:9999px; letter-spacing:0.04em; text-transform:uppercase; } /* "— pts" placeholder for unscored bets */ .race-pts-pending { color:var(--text-muted); font-family:var(--mono); font-weight:700; font-size:0.8rem; white-space:nowrap; } /* Qualifying + race results: stacked by default, two-up at >=1024px */ .race-results-two { display:grid; gap:1rem; } @media (min-width:1024px) { .race-results-two { grid-template-columns:1fr 1fr; align-items:start; } } /* Responsive title scaling on the focus page */ .race-title { font-size:1.5rem; } @media (min-width:768px) { .race-title { font-size:1.9rem; } } @media (min-width:1024px) { .race-title { font-size:2.4rem; } } /* ============================================================ v2.4.1 — Test-environment banner. Additive only. Fixed hazard colours on purpose — must stay loud on every theme. Sticky at top:56px = .hf-top height (same constant .hf-drawer uses); z-index 20 keeps it level with the header and *below* the drawer (30). ============================================================ */ .test-banner { position: sticky; top: 56px; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 16px; color: #1a1a00; font-family: var(--font-mono, ui-monospace, monospace); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-align: center; border-top: 2px solid rgba(0,0,0,.55); border-bottom: 3px solid rgba(0,0,0,.55); /* hazard stripes */ background-color: #ffcf00; background-image: repeating-linear-gradient(45deg, #1a1a00 0 14px, transparent 14px 28px); } /* Solid plate keeps the message readable over the stripes */ .test-banner .test-banner-plate { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; background: #ffcf00; padding: 3px 16px; border-radius: 4px; box-shadow: 0 0 0 2px #1a1a00; } .test-banner i { font-size: 15px; } @media (max-width: 480px) { .test-banner { font-size: 11.5px; padding: 7px 10px; } .test-banner .test-banner-plate { padding: 3px 10px; gap: 7px; } } @media print { .test-banner { display: none; } } /* ============================================================ GitHub Actions Dashboard (public/admin-actions.php) ============================================================ */ /* Width/padding come from the site's shared .hf-container (max 1280px) — the schedule matrix's own horizontal scroll (min-width: 720px, see .gha-matrix-inner) absorbs the narrower-than-the-original-1360px-design width instead of a page-specific wide container. */ .gha-page { margin-top: 4px; } /* ============================================================ Dashboards layout primitives — one canonical card/header set shared by all five Dashboards tabs (was .gha-stat-card/.dash-status-card/ .gha-detail-card/.gha-runs-card, four near-duplicate wrapper classes with the same chrome). See epics/Admin area redesign/plan.md decision 4. ============================================================ */ .admin-page-header { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 16px; } .admin-page-header i { color: var(--f1-red); } .stat-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px 18px; } .stat-card-label { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12.5px; font-weight: 600; margin-bottom: 8px; } .stat-card-value { font-family: var(--font-display); font-weight: 800; font-size: 30px; } .stat-card-value.success { color: var(--status-success-light); } .stat-card-value.danger { color: var(--status-danger-light); } .section-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 18px; } .gha-error-banner { display: flex; align-items: center; gap: 10px; background: rgba(239,68,68,0.08); border: 1px solid var(--status-danger); border-radius: var(--radius-md); padding: 11px 16px; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); } .gha-error-banner i { color: var(--status-danger-light); } .gha-token-hint { display: flex; align-items: center; gap: 9px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 9px 14px; margin-bottom: 16px; font-size: 12px; color: var(--text-muted); } .gha-panel-toggle { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.15s; } .gha-panel-toggle.collapsed { border-bottom-color: transparent; } .gha-panel-toggle:hover { background: var(--bg-hover); } .gha-panel-toggle-title { display: flex; align-items: center; gap: 9px; } .gha-panel-toggle-title h3 { font-family: var(--font-display); font-weight: 800; font-size: 15px; } .gha-panel-toggle-right { display: flex; align-items: center; gap: 12px; } .gha-pill { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--text-muted); background: var(--bg-secondary); border-radius: var(--radius-pill); padding: 2px 9px; } .gha-colheader { display: grid; gap: 0; padding: 9px 20px; border-bottom: 1px solid var(--border-color); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .gha-colheader.gha-cols-12h { grid-template-columns: 1fr 140px 210px 190px 90px; } .gha-colheader.gha-cols-runs { grid-template-columns: 150px 78px 1fr 130px 92px 30px; padding-right: 20px; } .gha-col-right { text-align: right; } .gha-scroll { overflow-y: auto; } .gha-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .gha-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 8px; } .gha-scroll::-webkit-scrollbar-track { background: transparent; } .gha-run-row-12h { display: grid; grid-template-columns: 1fr 140px 210px 190px 90px; gap: 0; align-items: center; padding: 11px 20px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.15s; } .gha-run-row-12h:hover { background: var(--bg-hover); } .gha-run-wf { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; min-width: 0; } .gha-run-wf i { color: var(--f1-red); font-size: 13px; width: 15px; text-align: center; } .gha-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gha-status-cell { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; } .gha-trigger-cell { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); min-width: 0; } .gha-trigger-cell i { color: var(--text-muted); font-size: 12px; width: 14px; } .gha-started-cell { display: flex; flex-direction: column; line-height: 1.25; } .gha-started-full { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); } .gha-started-ago { font-size: 10.5px; color: var(--text-muted); } .gha-duration-cell { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); text-align: right; } .gha-master-detail { display: grid; grid-template-columns: 326px 1fr; gap: 18px; align-items: start; } .gha-rail { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 82px; } .gha-rail-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--border-color); } .gha-rail-header span:first-child { font-family: var(--font-display); font-weight: 800; font-size: 15px; } .gha-filter-wrap { position: relative; padding: 12px 12px 6px; } .gha-filter-icon { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; pointer-events: none; } .gha-input { width: 100%; box-sizing: border-box; padding: 9px 12px 9px 32px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-body); font-size: 13.5px; } .gha-input:focus { outline: none; border-color: var(--f1-red); box-shadow: 0 0 0 3px rgba(225,6,0,0.20); } .gha-wf-list { max-height: calc(100vh - 240px); overflow-y: auto; padding: 6px 8px 10px; } .gha-wf-row { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: var(--radius-md); cursor: pointer; background: transparent; border-left: 3px solid transparent; transition: background 0.15s; } .gha-wf-row:hover { background: var(--bg-hover); } .gha-wf-row.active { background: var(--bg-hover); border-left-color: var(--f1-red); } .gha-wf-row-icon { font-size: 15px; width: 16px; text-align: center; flex-shrink: 0; } .gha-wf-row-name { font-weight: 600; font-size: 13.5px; color: var(--text-secondary); } .gha-wf-row.active .gha-wf-row-name { color: var(--text-primary); } .gha-wf-row-last { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: 1px; } .gha-wf-row-last i { font-size: 10px; } .gha-wf-row-ago { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .gha-detail-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .gha-detail-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; color: var(--f1-red); } .gha-detail-title { flex: 1; min-width: 0; } .gha-detail-title h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.2; } .gha-detail-status-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--text-secondary); } .gha-detail-file-chip { font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 6px 11px; white-space: nowrap; } .gha-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gha-info-panel { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 16px; } .gha-info-label { display: flex; align-items: center; gap: 7px; color: var(--f1-red); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 7px; } .gha-info-panel p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; } .gha-meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .gha-meta-chip { display: flex; align-items: center; gap: 9px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 9px 13px; } .gha-meta-chip i { color: var(--text-muted); font-size: 13px; } .gha-meta-chip.next { border-color: var(--f1-red); } .gha-meta-chip.next i { color: var(--f1-red); } .gha-meta-chip.next .gha-meta-label { color: var(--f1-red); } .gha-meta-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; } .gha-meta-value { font-size: 13px; font-weight: 600; } .gha-meta-value.label-mono { font-family: var(--font-mono); } .gha-meta-value .gha-meta-sub { color: var(--text-muted); font-weight: 400; } .gha-runs-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border-color); } .gha-runs-head h3 { font-family: var(--font-display); font-weight: 800; font-size: 15px; } .gha-runs-hint { font-size: 12px; color: var(--text-muted); } .gha-run-row { display: grid; grid-template-columns: 150px 78px 1fr 130px 92px 30px; gap: 0; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.15s; } .gha-run-row:hover, .gha-run-row.open { background: var(--bg-hover); } .gha-run-status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .gha-run-no { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); } .gha-run-ago { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); } .gha-run-duration { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); text-align: right; } .gha-run-chevron { text-align: right; color: var(--text-muted); } .gha-run-log { padding: 14px 20px 18px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); display: none; } .gha-run-log.open { display: block; } .gha-run-log-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 11px; font-size: 12px; color: var(--text-muted); } .gha-run-log-meta i { margin-right: 6px; } .gha-run-log-meta .label-mono { font-family: var(--font-mono); } .gha-console { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.75; overflow-x: auto; } .gha-console-line { white-space: pre; } .gha-console-ts { color: var(--text-muted); user-select: none; } .gha-console-loading { color: var(--text-muted); font-size: 12px; padding: 4px 0; } .gha-matrix-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--border-color); } .gha-matrix-title { display: flex; align-items: center; gap: 9px; } .gha-matrix-title h3 { font-family: var(--font-display); font-weight: 800; font-size: 15px; } .gha-heat-legend { display: flex; align-items: center; gap: 14px; font-size: 10.5px; color: var(--text-muted); flex-wrap: wrap; } .gha-heat-swatch { display: flex; align-items: center; gap: 5px; } .gha-heat-swatch span.gha-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .gha-heat-divider { width: 1px; height: 14px; background: var(--border-color); } .gha-collide-key { display: flex; align-items: center; gap: 5px; } .gha-collide-key i { color: var(--f1-red); font-size: 10px; } .gha-matrix-scroll { padding: 12px 20px 18px; overflow-x: auto; } .gha-matrix-inner { min-width: 720px; } .gha-matrix-head-row { display: grid; grid-template-columns: 196px 84px 1fr; gap: 10px; align-items: end; margin-bottom: 6px; } .gha-matrix-head-time { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } .gha-matrix-daygrid { display: grid; gap: 2px; } .gha-matrix-daycell { text-align: center; font-family: var(--font-mono); font-weight: 700; line-height: 1.25; border-radius: 4px; padding: 2px 0; } .gha-matrix-daycell .wd { font-size: 10px; font-weight: 800; } .gha-matrix-daycell .dn { font-size: 10px; } .gha-collision-row { display: grid; grid-template-columns: 196px 84px 1fr; gap: 10px; align-items: center; margin-bottom: 5px; } .gha-collision-label { display: flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } .gha-collision-label i { color: var(--f1-red); font-size: 11px; } .gha-collision-cellgrid { display: grid; gap: 2px; } .gha-collision-cell { height: 16px; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; } .gha-collision-cell:hover { outline: 1px solid var(--f1-red); } .gha-matrix-row { display: grid; grid-template-columns: 196px 84px 1fr; gap: 10px; align-items: center; padding: 4px 6px; margin: 0 -6px; border-top: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s; } .gha-matrix-row:hover, .gha-matrix-row.active { background: var(--bg-hover); } .gha-matrix-row-name { display: flex; align-items: center; gap: 9px; min-width: 0; } .gha-matrix-row-name i { font-size: 12px; color: var(--f1-red); width: 15px; text-align: center; } .gha-matrix-row-label { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); } .gha-matrix-row.active .gha-matrix-row-label { color: var(--text-primary); } .gha-matrix-row-cadence { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--text-muted); } .gha-matrix-row-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); } .gha-matrix-cellgrid { display: grid; gap: 2px; } .gha-matrix-cell { height: 19px; border-radius: 3px; border: 1px solid var(--border-color); } .gha-matrix-cell:hover { outline: 1px solid var(--f1-red); } .gha-matrix-note { font-size: 11px; color: var(--text-muted); margin-top: 12px; } .gha-matrix-note i { margin-right: 6px; } .gha-matrix-cell[data-cell-kind], .gha-collision-cell[data-cell-kind] { cursor: pointer; } .gha-matrix-cell[data-cell-kind]:focus-visible, .gha-collision-cell[data-cell-kind]:focus-visible { outline: 2px solid var(--f1-red); outline-offset: 1px; } /* Kørselsplan cell detail modal — same overlay/content/buttons template as #delete-modal (app.js) */ #gha-cell-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; } #gha-cell-modal[hidden] { display: none; } #gha-cell-modal .modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); } #gha-cell-modal .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-card); padding: 1.75rem; border-radius: 12px; min-width: 300px; max-width: 440px; border: 1px solid var(--border-color); } #gha-cell-modal h3 { margin: 0 0 4px 0; font-family: var(--font-display); } #gha-cell-modal .gha-cell-modal-meta { margin: 0 0 14px 0; font-size: 0.8rem; color: var(--text-secondary); } #gha-cell-modal .gha-cell-modal-meta .count-badge { display: inline-block; margin-left: 2px; background: rgba(225, 6, 0, 0.16); color: var(--f1-red); font-weight: 700; font-size: 0.7rem; padding: 1px 7px; border-radius: 999px; } #gha-cell-modal .gha-cell-modal-list { margin: 0 0 18px; padding: 0; list-style: none; max-height: 280px; overflow-y: auto; } #gha-cell-modal .gha-cell-modal-list--chips { display: flex; flex-wrap: wrap; gap: 5px; } #gha-cell-modal .gha-cell-modal-list--chips li { font-family: var(--font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 4px 6px; border-radius: 5px; } #gha-cell-modal .gha-cell-modal-list--rows li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: 0.8rem; } #gha-cell-modal .gha-cell-modal-list--rows li:last-child { border-bottom: none; } #gha-cell-modal .gha-cell-modal-row-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); flex-shrink: 0; } #gha-cell-modal .gha-cell-modal-row-names { color: var(--text-secondary); text-align: right; } #gha-cell-modal .modal-buttons { display: flex; gap: 0.5rem; justify-content: flex-end; } .gha-empty { padding: 22px; text-align: center; color: var(--text-muted); font-size: 13px; } /* ============================================================ Dashboards area — shared primitives for the newer tabs (PaddockKB, Nøgler & Rotation, Challenges usage, Oversigt). Reuses .stat-card-grid/.stat-card/.section-card/.gha-empty/.gha-pill etc. directly (see epics/Admin area redesign/plan.md decision 4) — only genuinely new primitives (progress bars, KPI tiles) live here. ============================================================ */ .dash-progress-track { height: 8px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; } .dash-progress-fill { height: 100%; border-radius: 4px; } .dash-cat-row { display: grid; grid-template-columns: 130px 1fr 90px; gap: 12px; align-items: center; margin-bottom: 11px; } .dash-cat-row:last-child { margin-bottom: 0; } .dash-cat-name { font-size: 13px; font-weight: 700; } .dash-cat-meta { display: flex; align-items: center; gap: 7px; justify-self: end; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); } .dash-fresh-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dash-status-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; } .dash-status-value { font-family: var(--font-mono); font-size: 20px; color: var(--text-primary); margin-top: 6px; } .dash-status-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; } .dash-health-ring { width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .dash-health-ring-inner { width: 76px; height: 76px; border-radius: 50%; background: var(--bg-card); display: flex; flex-direction: column; align-items: center; justify-content: center; } .dash-health-score { font-family: var(--font-mono); font-size: 23px; color: var(--text-primary); } .dash-health-label { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; } .dash-action-queue { border-radius: 11px; padding: 14px 16px; margin-bottom: 18px; } .dash-action-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; } .dash-details summary { cursor: pointer; list-style: none; } .dash-details summary::-webkit-details-marker { display: none; } /* Token/secret rows: named grid-areas (not extra wrapper elements — Playwright specs locate the action form/details as a direct child of [data-item-key], e.g. `row.locator('> form')`, so the DOM depth must stay flat). Desktop keeps the original single-row grid; mobile (below) remaps the same items into icon+name / progress bar / badge+action lines instead of squeezing 5 fixed columns into one unreadable sliver — see "Admin Settings (standalone).html" in epics/Admin area redesign for the mobile reference. */ .dash-token-row { display: grid; grid-template-columns: 30px 1fr auto; grid-template-areas: "icon name meta"; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); } .dash-token-row > i { grid-area: icon; } .dash-token-name { grid-area: name; min-width: 0; } .dash-token-meta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; } .dash-secret-row { display: grid; grid-template-columns: 24px 1.4fr 1fr auto auto; grid-template-areas: "icon name progress badge action"; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gold); } .dash-secret-row > i { grid-area: icon; } .dash-secret-name { grid-area: name; min-width: 0; } .dash-secret-progress { grid-area: progress; } .dash-secret-row > .label-badge { grid-area: badge; justify-self: end; } .dash-secret-row > form, .dash-secret-row > details { grid-area: action; } /* Health ring + KPI stat-cards: desktop keeps the ring in its own fixed column next to the auto-fit .stat-card-grid. Mobile (below) flattens .stat-card-grid via display:contents and explicitly places all 7 boxes into a 2-column, 3-then-4-row layout instead of one long single-column scroll. */ .dash-kpi-row { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; margin-bottom: 20px; } .dash-kpi-ringwrap { display: flex; justify-content: center; } .dash-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .dash-tile { cursor: pointer; border: 1px solid var(--border-color); border-radius: 13px; background: var(--bg-card); padding: 18px; display: flex; flex-direction: column; gap: 13px; transition: all 0.2s; } .dash-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(225,6,0,0.15); border-color: var(--f1-red); } .dash-tile-head { display: flex; align-items: center; justify-content: space-between; } .dash-tile-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--bg-hover); display: inline-flex; align-items: center; justify-content: center; } .dash-tile-flag { font-family: var(--font-mono); font-size: 11px; background: var(--f1-red); color: #fff; padding: 1px 9px; border-radius: 999px; } .dash-tile-stat { font-family: var(--font-mono); font-size: 26px; color: var(--text-primary); } .dash-tile-foot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; } @media (max-width: 768px) { .dash-tile-grid { grid-template-columns: 1fr; } .dash-token-row { grid-template-columns: auto 1fr; grid-template-areas: "icon name" "meta meta"; row-gap: 10px; } .dash-token-meta { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; } .dash-secret-row { grid-template-columns: auto 1fr; grid-template-areas: "icon name" "progress progress" "badge action"; row-gap: 10px; } .dash-secret-row > .label-badge { justify-self: start; } .dash-secret-row > form, .dash-secret-row > details { justify-self: end; } .dash-kpi-row { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); row-gap: 14px; } .dash-kpi-row .stat-card-grid { display: contents; } .dash-kpi-ringwrap { grid-column: 1; grid-row: 1; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; } .dash-kpi-row .stat-card-grid > .stat-card:nth-child(1) { grid-column: 1; grid-row: 2; } .dash-kpi-row .stat-card-grid > .stat-card:nth-child(2) { grid-column: 1; grid-row: 3; } .dash-kpi-row .stat-card-grid > .stat-card:nth-child(3) { grid-column: 2; grid-row: 1; } .dash-kpi-row .stat-card-grid > .stat-card:nth-child(4) { grid-column: 2; grid-row: 2; } .dash-kpi-row .stat-card-grid > .stat-card:nth-child(5) { grid-column: 2; grid-row: 3; } .dash-kpi-row .stat-card-grid > .stat-card:nth-child(6) { grid-column: 2; grid-row: 4; } } @media (max-width: 768px) { .gha-master-detail { grid-template-columns: 1fr; } .gha-rail { position: static; } .gha-colheader.gha-cols-12h, .gha-run-row-12h { grid-template-columns: 1fr 90px 90px; } .gha-colheader.gha-cols-12h span:nth-child(3), .gha-run-row-12h .gha-trigger-cell { display: none; } .gha-colheader.gha-cols-runs, .gha-run-row { grid-template-columns: 90px 1fr 70px 24px; } .gha-colheader.gha-cols-runs span:nth-child(2), .gha-run-row .gha-run-no, .gha-colheader.gha-cols-runs span:nth-child(4), .gha-run-row .gha-run-ago { display: none; } .gha-detail-head { flex-wrap: wrap; } .gha-detail-file-chip { white-space: normal; word-break: break-all; } }