/* ============================================================
TRACK ATTACKER — GLOBAL STYLESHEET
styles.css
HOW TO CHANGE THE THEME:
Edit the variables in the :root block below.
Changes here apply to ALL pages instantly.
============================================================ */
/* ============================================================
SECTION: Theme Variables ← EDIT THESE FOR THEME CHANGES
============================================================ */
:root {
/* Core palette — from roadmap design system */
--black: #0a0a0a;
--carbon: #111214;
--panel: #161819;
--border: #252729;
--muted: #3a3d42;
/* Text scale */
--text-dim: #6b7280;
--text: #c8cdd4;
--text-bright: #eef0f3;
--text-white: #ffffff;
/* Brand accent — red primary, amber secondary */
--red: #e8341a;
--red-dark: #c42c15;
--red-glow: rgba(232, 52, 26, 0.15);
--red-border: rgba(232, 52, 26, 0.3);
--amber: #f59e0b;
--amber-glow: rgba(245, 158, 11, 0.12);
--green: #22c55e;
--green-glow: rgba(34, 197, 94, 0.12);
--blue: #3b82f6;
--blue-glow: rgba(59, 130, 246, 0.12);
/* Semantic aliases — used throughout component CSS below */
--color-primary: var(--red);
--color-primary-dark: var(--red-dark);
--color-primary-light: #f04a2e;
--color-accent: var(--amber);
--color-accent-dark: #d97706;
--color-page-bg: var(--black);
--color-garage-bg: var(--black);
--color-surface: var(--panel);
--color-surface-muted: var(--carbon);
--color-surface-tinted: #1a1c1f;
--color-border: var(--border);
--color-border-light: #1e2022;
--color-text: var(--text);
--color-text-muted: var(--text-dim);
--color-text-faint: #4b5563;
--color-text-white: var(--text-bright);
--gradient-primary: linear-gradient(135deg, var(--red) 0%, #c42c15 100%);
--gradient-brand: linear-gradient(135deg, var(--red) 0%, var(--amber) 100%);
/* Typography — roadmap stack */
--font-heading: 'Bebas Neue', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-display: 'DM Mono', monospace;
/* Spacing */
--space-xs: 8px; --space-sm: 12px;
--space-md: 20px; --space-lg: 30px; --space-xl: 40px;
/* Shape — tighter, sharper to match roadmap aesthetic */
--radius-sm: 2px; --radius-md: 4px;
--radius-lg: 6px; --radius-full: 50%;
/* Shadows — deeper/darker for dark theme */
--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
--shadow-md: 0 4px 20px rgba(0,0,0,0.5);
--shadow-lg: 0 20px 60px rgba(0,0,0,0.7);
--shadow-primary: 0 6px 16px rgba(232,52,26,0.35);
--shadow-accent: 0 6px 16px rgba(245,158,11,0.25);
--transition-fast: all 0.15s ease;
--transition-std: all 0.25s ease;
--max-width: 1400px;
}
/* ============================================================
SECTION: Google Fonts import
Add this to your HTML alongside styles.css:
============================================================ */
/* ============================================================
SECTION: Reset & Base
============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-body);
color: var(--color-text);
background: var(--black);
font-size: 14px;
line-height: 1.6;
min-height: 100vh;
}
/* Subtle noise texture overlay — from roadmap */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
opacity: 0.4;
}
body.page-index { background: var(--black); padding: 20px; }
body.page-garage { background: var(--black); }
.container { max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 1; }
body.page-index .container {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
body.page-garage .container { padding: var(--space-md); }
/* ============================================================
SECTION: Header
============================================================ */
header, .header {
background: var(--carbon);
border-bottom: 1px solid var(--border);
color: var(--color-text-white);
padding: var(--space-xl);
text-align: center;
}
body.page-garage .header {
background: var(--panel);
border: 1px solid var(--border);
color: var(--color-text);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
margin-bottom: var(--space-lg);
padding: var(--space-lg);
}
/* Logo row */
.logo-container, .logo {
display: flex; align-items: center;
justify-content: center; gap: 15px; margin-bottom: 15px;
}
.logo-badge {
width: 60px; height: 60px;
background: var(--gradient-brand);
border-radius: var(--radius-full);
display: flex; align-items: center; justify-content: center;
color: var(--text-bright);
font-family: var(--font-heading); font-size: 24px; font-weight: 700;
box-shadow: var(--shadow-primary);
}
body.page-index .logo {
width: 80px; height: 80px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-full);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
position: relative; overflow: hidden;
}
body.page-index .logo::before {
content: ''; position: absolute; width: 100%; height: 100%;
background: var(--gradient-brand);
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 65%);
}
.logo-text {
position: relative; z-index: 1;
font-family: var(--font-heading); font-size: 32px; font-weight: 700;
color: var(--red);
}
header h1, .header h1 {
font-family: var(--font-heading);
font-size: clamp(2.5em, 6vw, 4.5em);
font-weight: 400; /* Bebas Neue is display weight by default */
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-bright);
text-shadow: none;
margin-bottom: 5px;
}
header h1 span, .header h1 span { color: var(--red); }
body.page-garage .header h1 {
color: var(--text-bright);
font-size: 2.5em; letter-spacing: 0.04em;
}
header p, .subtitle {
font-family: var(--font-display);
font-size: 0.75em;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-dim);
opacity: 1;
font-weight: 400;
}
body.page-garage .subtitle {
color: var(--text-dim); opacity: 1;
letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75em; margin-top: 10px;
}
.nav-link {
display: inline-block; margin-top: var(--space-md);
padding: var(--space-sm) var(--space-lg);
background: var(--red); color: var(--text-bright);
text-decoration: none; border-radius: var(--radius-md);
font-family: var(--font-display); font-size: 0.75em;
letter-spacing: 0.15em; text-transform: uppercase;
font-weight: 500; transition: var(--transition-fast);
border: 1px solid transparent;
}
.nav-link:hover {
background: transparent;
border-color: var(--red);
color: var(--red);
transform: translateY(-1px);
}
/* ============================================================
SECTION: Content Layout
============================================================ */
.content { padding: var(--space-xl); }
.section {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-xl); margin-bottom: var(--space-lg);
box-shadow: var(--shadow-md);
}
.section-title {
font-family: var(--font-heading); font-size: 2.2em; font-weight: 400;
letter-spacing: 0.04em; text-transform: uppercase;
color: var(--text-bright); margin-bottom: 10px; text-align: center;
}
.section-subtitle {
text-align: center; color: var(--text-dim);
font-family: var(--font-display); font-size: 0.75em;
letter-spacing: 0.12em; text-transform: uppercase;
margin-bottom: var(--space-lg);
}
/* ============================================================
SECTION: Toggle Buttons
============================================================ */
.sport-toggle {
display: flex; gap: var(--space-md); justify-content: center;
margin-bottom: 35px; padding-bottom: 35px;
border-bottom: 1px solid var(--border);
}
.sport-btn {
display: flex; align-items: center; gap: 12px;
padding: 16px 36px;
background: var(--carbon);
border: 1px solid var(--border); border-radius: var(--radius-md);
cursor: pointer; transition: var(--transition-fast);
font-family: var(--font-heading); font-size: 1.3em;
font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
text-decoration: none; color: var(--text-dim);
}
.sport-btn:hover { border-color: var(--red); color: var(--text-bright); }
.sport-btn.active {
background: var(--red-glow);
color: var(--text-bright);
border-color: var(--red-border);
box-shadow: var(--shadow-primary);
}
.sport-icon { font-size: 1.3em; }
.sport-label { font-weight: 400; }
.leaderboard-toggle {
display: flex; gap: 12px; justify-content: center;
margin-bottom: var(--space-xl); padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--border);
}
.toggle-btn {
display: flex; align-items: center; gap: 8px;
padding: 10px 24px;
background: var(--carbon); border: 1px solid var(--border); border-radius: var(--radius-md);
cursor: pointer; transition: var(--transition-fast);
font-family: var(--font-display); font-size: 0.75em;
letter-spacing: 0.12em; text-transform: uppercase;
font-weight: 500; color: var(--text-dim);
}
.toggle-btn:hover { border-color: var(--amber); color: var(--text-bright); }
.toggle-btn.active {
background: var(--amber-glow);
color: var(--amber);
border-color: rgba(245,158,11,0.4);
}
.toggle-icon { font-size: 1.2em; }
.toggle-label { letter-spacing: 0.12em; text-transform: uppercase; }
/* ============================================================
SECTION: Search Controls
============================================================ */
.search-section { margin-bottom: var(--space-xl); }
.search-section h2 {
font-family: var(--font-heading); color: var(--text-bright);
margin-bottom: var(--space-md); font-size: 2em; font-weight: 400; letter-spacing: 0.04em;
}
.search-box { display: flex; gap: 12px; margin-bottom: var(--space-md); }
.search-controls {
display: grid; grid-template-columns: 2fr 1fr 1fr;
gap: 12px; margin-bottom: var(--space-lg);
}
.search-box input, .search-box select,
.search-controls input, .search-controls select {
flex: 1; padding: 10px 14px;
background: var(--carbon);
border: 1px solid var(--border); border-radius: var(--radius-md);
font-family: var(--font-body); font-size: 0.95em;
color: var(--text); transition: var(--transition-fast);
}
.search-box input::placeholder, .search-controls input::placeholder { color: var(--text-dim); }
.search-box input:focus, .search-box select:focus,
.search-controls input:focus, .search-controls select:focus {
outline: none; border-color: var(--red); color: var(--text-bright);
}
.search-controls select option { background: var(--carbon); }
/* ============================================================
SECTION: Leaderboard Table
============================================================ */
.table-container {
overflow-x: auto; margin-bottom: 50px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
table { width: 100%; border-collapse: collapse; background: var(--panel); }
thead { background: var(--carbon); border-bottom: 1px solid var(--border); }
th {
padding: 12px 20px; text-align: left;
font-family: var(--font-display); font-weight: 500;
font-size: 0.7em; letter-spacing: 0.15em; text-transform: uppercase;
color: var(--text-dim);
}
td { padding: 13px 20px; border-bottom: 1px solid var(--color-border-light); color: var(--text); font-size: 0.95em; }
tbody tr { transition: background-color 0.15s; }
tbody tr:hover { background-color: var(--carbon); }
tbody tr:nth-child(even) { background-color: rgba(0,0,0,0.15); }
tbody tr:nth-child(even):hover { background-color: var(--carbon); }
tbody tr:last-child td { border-bottom: none; }
.best-time {
font-weight: 600; color: var(--red);
font-size: 1em; font-family: var(--font-display);
}
.no-results {
text-align: center; padding: 60px 20px;
color: var(--text-dim); font-family: var(--font-display);
font-size: 0.85em; letter-spacing: 0.1em; text-transform: uppercase;
}
/* ============================================================
SECTION: Vote / Flag Buttons
============================================================ */
.vote-buttons { display: flex; gap: 8px; align-items: center; }
.vote-btn, .flag-btn {
background: none; border: none; cursor: pointer;
padding: 3px 7px; border-radius: var(--radius-sm);
transition: background-color 0.15s;
display: flex; align-items: center; gap: 4px; font-size: 1em;
color: var(--text-dim);
}
.vote-btn:hover { background-color: var(--green-glow); color: var(--green); }
.vote-btn:disabled, .vote-btn.voted { opacity: 0.4; cursor: not-allowed; background: none; }
.vote-btn:disabled:hover, .vote-btn.voted:hover { background: none; }
.flag-btn:hover { background-color: var(--red-glow); color: var(--red); }
.flag-btn:disabled, .flag-btn.flagged { opacity: 0.4; cursor: not-allowed; background: none; }
.flag-btn:disabled:hover, .flag-btn.flagged:hover { background: none; }
.vote-count { font-weight: 600; color: var(--green); font-family: var(--font-display); font-size: 0.85em; }
.flag-count { font-weight: 600; color: var(--red); font-family: var(--font-display); font-size: 0.85em; }
/* ============================================================
SECTION: Row Action Buttons
============================================================ */
.action-buttons { display: flex; gap: 6px; flex-wrap: wrap; position: relative; }
.edit-btn, .history-btn, .settings-btn {
background: var(--carbon);
border: 1px solid var(--border);
color: var(--text-dim);
padding: 5px 10px; border-radius: var(--radius-sm);
cursor: pointer; font-size: 0.8em; font-weight: 500;
font-family: var(--font-display); letter-spacing: 0.08em;
text-transform: uppercase; transition: var(--transition-fast);
}
.edit-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-glow); }
.history-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-glow); }
.settings-btn { font-size: 0.95em; padding: 5px 8px; }
.settings-btn:hover { border-color: var(--text-dim); color: var(--text-bright); }
.edit-info { font-size: 0.72em; color: var(--text-dim); font-style: italic; margin-top: 4px; font-family: var(--font-display); }
/* ============================================================
SECTION: Submission Form
============================================================ */
.submission-section {
background: var(--carbon);
border: 1px solid var(--border);
padding: var(--space-xl); border-radius: var(--radius-md); margin-top: var(--space-xl);
}
.submission-section h2 {
font-family: var(--font-heading); color: var(--text-bright);
margin-bottom: var(--space-lg); font-size: 2em; font-weight: 400; letter-spacing: 0.04em;
}
.form-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-md); margin-bottom: 24px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
font-weight: 500; color: var(--text-dim);
font-family: var(--font-display); font-size: 0.72em;
letter-spacing: 0.15em; text-transform: uppercase;
}
.form-group small { font-size: 0.8em; color: var(--text-dim); font-family: var(--font-display); }
.form-group input, .form-group select, .form-group textarea {
padding: 10px 14px;
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: 0.95em;
color: var(--text); transition: var(--transition-fast);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-dim); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline: none; border-color: var(--red); color: var(--text-bright);
}
.form-group select option { background: var(--panel); }
.checkbox-container {
display: flex; align-items: flex-start; gap: 12px;
margin: 20px 0; padding: var(--space-md);
background: var(--panel); border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.checkbox-container input[type="checkbox"] { margin-top: 3px; cursor: pointer; accent-color: var(--red); }
.checkbox-container label { font-size: 0.85em; line-height: 1.6; color: var(--text-dim); cursor: pointer; }
.submit-btn {
width: 100%; padding: 14px;
background: var(--red); color: var(--text-bright);
border: none; border-radius: var(--radius-md);
font-family: var(--font-heading); font-size: 1.4em;
font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
cursor: pointer; transition: var(--transition-fast);
}
.submit-btn:hover:not(:disabled) {
background: var(--red-dark);
box-shadow: var(--shadow-primary);
}
.submit-btn:disabled {
background: var(--muted); color: var(--text-dim); cursor: not-allowed; opacity: 0.5;
}
/* ============================================================
SECTION: Garage Grid & Cards
============================================================ */
.garage-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-xl);
}
.garage-card, .card {
background: var(--panel);
border: none; /* border handled by grid gap trick */
padding: var(--space-md);
position: relative; transition: background 0.15s ease; cursor: pointer;
overflow: hidden;
}
.garage-card::before, .card::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: var(--red); opacity: 0; transition: opacity 0.2s;
}
.garage-card:hover, .card:hover { background: var(--carbon); }
.garage-card:hover::before, .card:hover::before { opacity: 1; }
/* When cards are displayed outside the grid (standalone) */
.section .garage-card, .section .card {
border: 1px solid var(--border); border-radius: var(--radius-md);
}
.card-header, .garage-card-header { padding-right: 70px; margin-bottom: 15px; }
.card-brand, .garage-card-brand {
font-family: var(--font-display); font-size: 0.7em;
color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 5px;
}
.card-model, .garage-card-model {
font-family: var(--font-heading); font-size: 1.6em;
font-weight: 400; color: var(--text-bright); line-height: 1.1; letter-spacing: 0.02em;
}
.card-specs, .garage-card-specs {
display: flex; flex-direction: column; gap: var(--space-xs);
padding: 12px 0;
border-top: 1px solid var(--color-border-light);
border-bottom: 1px solid var(--color-border-light);
margin-bottom: 12px;
}
.card-spec, .garage-card-spec { display: flex; justify-content: space-between; font-size: 0.88em; }
.spec-label, .garage-card-spec-label { color: var(--text-dim); font-family: var(--font-display); font-size: 0.9em; letter-spacing: 0.05em; }
.spec-value, .garage-card-spec-value { font-weight: 500; color: var(--text); }
.card-owner, .garage-card-owner {
text-align: center; padding: 8px 10px;
background: var(--carbon); border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-family: var(--font-display); font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase;
}
.card-actions, .garage-card-actions { display: flex; gap: 6px; margin-top: 12px; }
.card-actions button, .garage-card-actions button {
flex: 1; padding: 9px; border: 1px solid var(--border); border-radius: var(--radius-sm);
cursor: pointer; font-weight: 500; font-size: 0.8em;
font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
transition: var(--transition-fast); background: var(--carbon); color: var(--text-dim);
}
.view-btn, .view-details-btn {
background: var(--red); color: var(--text-bright); border-color: transparent;
}
.view-btn:hover, .view-details-btn:hover { background: var(--red-dark); }
.delete-car-btn { flex: 0 0 40px; }
.delete-car-btn:hover { border-color: #d32f2f; color: #d32f2f; background: rgba(211,47,47,0.1); }
.card-actions .settings-btn, .garage-card-actions .settings-btn {
flex: 0 0 auto; padding: 8px 10px; font-size: 1em;
}
/* ============================================================
SECTION: PI Badges
============================================================ */
.pi-badge {
position: absolute; top: 15px; right: 15px;
width: 60px; height: 60px; border-radius: var(--radius-full);
display: flex; flex-direction: column; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.pi-badge-class { font-size: 1.6em; line-height: 1; font-weight: 700; }
.pi-badge-number { font-size: 0.65em; opacity: 0.85; }
/* Forza-style PI class colours — edit here to change badge colours */
.pi-D { background: #6ee7b7; color: #064e3b; }
.pi-C { background: #60a5fa; color: #1e3a8a; }
.pi-B { background: #f59e0b; color: #78350f; }
.pi-A { background: #f97316; color: #7c2d12; }
.pi-S1 { background: #ef4444; color: #7f1d1d; }
.pi-S2 { background: #c026d3; color: #4a044e; }
.pi-X { background: #facc15; color: #713f12; }
.pi-new-badge {
background: var(--red); color: var(--text-bright);
font-family: var(--font-display); font-size: 0.65em; font-weight: 500;
padding: 2px 7px; border-radius: var(--radius-sm); margin-left: 8px;
text-transform: uppercase; letter-spacing: 0.1em;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* ============================================================
SECTION: Pagination
============================================================ */
.pagination {
display: flex; justify-content: center; align-items: center;
gap: var(--space-md); margin: var(--space-lg) 0; padding-bottom: var(--space-xl);
}
.pagination button {
padding: 8px 20px;
background: var(--carbon); border: 1px solid var(--border); color: var(--text-dim);
border-radius: var(--radius-md);
font-family: var(--font-display); font-size: 0.75em; letter-spacing: 0.1em;
text-transform: uppercase; font-weight: 500;
cursor: pointer; transition: var(--transition-fast);
}
.pagination button:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.pagination button:disabled { opacity: 0.25; cursor: not-allowed; }
.pagination span, .pagination-info {
font-family: var(--font-display); font-size: 0.75em;
letter-spacing: 0.1em; color: var(--text-dim);
}
/* ============================================================
SECTION: Modals
============================================================ */
.modal {
display: none; position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.8); z-index: 1000;
align-items: center; justify-content: center; padding: var(--space-md);
backdrop-filter: blur(4px);
}
.modal.active { display: flex; }
.modal-content {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-lg); max-width: 700px; width: 100%;
max-height: 90vh; overflow-y: auto;
box-shadow: var(--shadow-lg);
}
.modal-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: var(--space-md); padding-bottom: 15px;
border-bottom: 1px solid var(--border);
}
.modal-header h2, .modal-title {
font-family: var(--font-heading); color: var(--text-bright);
font-size: 1.8em; font-weight: 400; letter-spacing: 0.04em; margin: 0;
}
.close-btn {
background: none; border: none; font-size: 1.6em;
cursor: pointer; color: var(--text-dim);
line-height: 1; padding: 0; width: 30px; height: 30px;
transition: var(--transition-fast);
}
.close-btn:hover { color: var(--red); }
.modal-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 25px; }
.modal-btn {
flex: 1; padding: 10px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm);
cursor: pointer; font-family: var(--font-display);
font-size: 0.75em; letter-spacing: 0.12em; text-transform: uppercase;
font-weight: 500; transition: var(--transition-fast);
background: var(--carbon); color: var(--text-dim);
}
.modal-btn-primary { background: var(--red); color: var(--text-bright); border-color: transparent; }
.modal-btn-primary:hover { background: var(--red-dark); }
.modal-btn-secondary:hover { border-color: var(--text-dim); color: var(--text-bright); }
.modal-btn-danger { background: rgba(211,47,47,0.15); color: #f87171; border-color: rgba(211,47,47,0.3); }
.modal-btn-danger:hover { background: #d32f2f; color: var(--text-bright); border-color: transparent; }
.edit-form-group { margin-bottom: var(--space-md); }
.edit-form-group label {
display: block; margin-bottom: 8px;
font-family: var(--font-display); font-size: 0.72em;
letter-spacing: 0.15em; text-transform: uppercase;
font-weight: 500; color: var(--text-dim);
}
.edit-form-group input {
width: 100%; padding: 10px 14px;
background: var(--carbon); border: 1px solid var(--border);
border-radius: var(--radius-sm); font-size: 0.95em; color: var(--text);
}
.edit-form-group input:focus { outline: none; border-color: var(--red); color: var(--text-bright); }
.confirm-dialog {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-lg); max-width: 500px; text-align: center;
box-shadow: var(--shadow-lg);
}
.confirm-dialog h3 {
font-family: var(--font-heading); font-size: 2em; font-weight: 400;
color: #f87171; margin-bottom: 15px; letter-spacing: 0.04em;
}
.confirm-dialog p { color: var(--text-dim); margin-bottom: var(--space-md); line-height: 1.6; font-size: 0.95em; }
.confirm-buttons { display: flex; gap: 12px; margin-top: var(--space-md); }
/* ============================================================
SECTION: Settings / Context Menu
============================================================ */
.settings-menu {
display: none; position: absolute;
background: var(--panel);
border: 1px solid var(--border); border-radius: var(--radius-md);
box-shadow: var(--shadow-lg); z-index: 100; min-width: 150px; overflow: hidden;
}
.settings-menu.active { display: block; }
.settings-menu-item {
width: 100%; padding: 10px 16px; background: none; border: none;
text-align: left; cursor: pointer;
font-family: var(--font-display); font-size: 0.75em;
letter-spacing: 0.08em; text-transform: uppercase;
font-weight: 500; transition: var(--transition-fast);
color: var(--text-dim);
border-bottom: 1px solid var(--border);
}
.settings-menu-item:last-child { border-bottom: none; }
.settings-menu-item:hover { background: var(--red-glow); color: var(--red); }
/* ============================================================
SECTION: History Modal
============================================================ */
.history-list { list-style: none; padding: 0; }
.history-item {
padding: 14px 16px; border-left: 2px solid var(--red);
background: var(--carbon); border-right: 1px solid var(--border);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
margin-bottom: 8px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.history-time {
font-family: var(--font-display); font-size: 0.72em;
letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase;
}
.history-change { font-family: var(--font-heading); font-size: 1.3em; color: var(--text-bright); font-weight: 400; }
.time-old { text-decoration: line-through; color: var(--text-dim); }
.time-new { color: var(--green); font-weight: 600; }
/* ============================================================
SECTION: PI Calculator
============================================================ */
.pi-calculator {
background: var(--carbon); padding: var(--space-lg);
border-radius: var(--radius-lg); margin-bottom: var(--space-lg);
border: 1px solid var(--border);
}
.pi-calc-title {
font-family: var(--font-heading); font-size: 1.6em; font-weight: 400;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-bright); margin-bottom: var(--space-md); text-align: center;
}
.pi-display {
display: flex; align-items: center; justify-content: center;
gap: 30px; margin: var(--space-lg) 0; flex-wrap: wrap;
}
.pi-number-wrap { text-align: center; }
.pi-number { font-family: var(--font-display); font-size: 4em; font-weight: 700; color: var(--red); }
.pi-label {
font-family: var(--font-display); font-size: 0.72em; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 10px;
}
.pi-class-badge { text-align: center; }
.class-letter { font-family: var(--font-display); font-size: 4em; font-weight: 700; }
.class-name { font-family: var(--font-display); font-size: 0.72em; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.15em; margin-top: 5px; }
.pi-bar-wrap {
height: 8px; background: var(--border); border-radius: 99px;
overflow: hidden; margin: var(--space-md) 0;
}
.pi-bar-fill, .pi-bar {
height: 100%; border-radius: 99px;
transition: width 0.5s ease, background 0.4s ease; position: relative;
}
.pi-bar-fill::after {
content: ''; position: absolute; right: 0; top: 0; bottom: 0;
width: 3px; background: rgba(255,255,255,0.4); border-radius: 2px;
}
.class-markers {
display: flex; justify-content: space-between;
margin-top: 6px; font-family: var(--font-display);
font-size: 0.7em; color: var(--text-dim); font-weight: 500; letter-spacing: 0.1em;
}
.calc-section {
background: var(--panel); border: 1px solid var(--border);
padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-md);
}
.calc-section-title {
font-family: var(--font-heading); font-size: 1.2em; font-weight: 400;
letter-spacing: 0.04em; color: var(--text-bright); margin-bottom: 12px;
}
.toggle-group { display: flex; gap: 6px; margin-top: 8px; }
.toggle-group .toggle-btn {
flex: 1; padding: 7px 10px;
background: var(--carbon); border: 1px solid var(--border);
color: var(--text-dim); font-size: 0.72em; font-weight: 500;
font-family: var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
cursor: pointer; border-radius: var(--radius-sm); transition: var(--transition-fast);
}
.toggle-group .toggle-btn:hover { border-color: var(--red); color: var(--text-bright); }
.toggle-group .toggle-btn.active { background: var(--red-glow); color: var(--red); border-color: var(--red-border); }
/* ============================================================
SECTION: PI Breakdown Bars
============================================================ */
.breakdown { display: flex; flex-direction: column; margin-top: var(--space-md); }
.breakdown-row {
display: grid; grid-template-columns: 150px 1fr 60px;
gap: 12px; align-items: center;
padding: 8px 0; border-bottom: 1px solid var(--color-border-light);
}
.breakdown-label {
font-family: var(--font-display); font-weight: 500; font-size: 0.82em;
letter-spacing: 0.05em; color: var(--text);
}
.breakdown-bar-wrap { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; }
.breakdown-bar { height: 100%; background: var(--red); border-radius: 99px; transition: width 0.5s ease; }
.breakdown-value {
font-family: var(--font-display); font-weight: 700; color: var(--red);
text-align: right; font-size: 0.85em;
}
.est-tag {
font-family: var(--font-display); font-size: 0.65em;
background: var(--amber-glow); color: var(--amber);
border: 1px solid rgba(245,158,11,0.3);
padding: 1px 5px; border-radius: var(--radius-sm); margin-left: 4px; vertical-align: middle;
letter-spacing: 0.05em;
}
/* ============================================================
SECTION: Car Detail Sections (inside modal)
============================================================ */
.detail-section {
margin: var(--space-md) 0; padding: var(--space-md);
background: var(--carbon); border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.detail-section h4 {
font-family: var(--font-heading); font-size: 1.2em; font-weight: 400;
letter-spacing: 0.04em; color: var(--text-bright); margin-bottom: 12px;
}
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.detail-item { font-size: 0.9em; color: var(--text); }
.detail-item strong {
color: var(--text-dim); display: block; margin-bottom: 3px;
font-family: var(--font-display); font-size: 0.75em;
letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
}
/* ============================================================
SECTION: Rank Badges
============================================================ */
.rank-1 { color: #FFD700; font-weight: 700; font-family: var(--font-display); }
.rank-2 { color: #C0C0C0; font-weight: 700; font-family: var(--font-display); }
.rank-3 { color: #CD7F32; font-weight: 700; font-family: var(--font-display); }
/* ============================================================
SECTION: Coming Soon
============================================================ */
.coming-soon { text-align: center; padding: 80px var(--space-xl); max-width: 800px; margin: 0 auto; }
.coming-soon-icon {
font-size: 4em; width: 100px; height: 100px; margin: 0 auto var(--space-lg);
background: var(--red-glow); color: var(--red);
border: 1px solid var(--red-border);
border-radius: var(--radius-full); display: flex; align-items: center;
justify-content: center;
}
.coming-soon h2 {
font-family: var(--font-heading); font-size: 3em; font-weight: 400;
color: var(--text-bright); margin-bottom: var(--space-md); letter-spacing: 0.04em;
}
.coming-soon-description { font-size: 1.05em; color: var(--text-dim); line-height: 1.8; margin-bottom: var(--space-xl); }
.coming-soon-details {
background: var(--carbon); border: 1px solid var(--border);
padding: var(--space-lg); border-radius: var(--radius-lg); text-align: left;
}
.coming-soon-details h3 {
font-family: var(--font-heading); font-size: 1.8em; font-weight: 400;
color: var(--text-bright); margin-bottom: var(--space-md); letter-spacing: 0.04em;
}
.coming-soon-details ul { list-style: none; padding: 0; }
.coming-soon-details li {
padding: 14px 0; border-bottom: 1px solid var(--border);
font-size: 0.95em; line-height: 1.6; color: var(--text);
}
.coming-soon-details li:last-child { border-bottom: none; }
.coming-soon-details li strong { color: var(--red); }
/* ============================================================
SECTION: Responsive
============================================================ */
@media (max-width: 768px) {
header h1, .header h1 { font-size: 2.5em; }
.content { padding: var(--space-md); }
.sport-toggle { flex-direction: column; align-items: center; }
.sport-btn { width: 100%; justify-content: center; }
.leaderboard-toggle { flex-wrap: wrap; }
.search-controls { grid-template-columns: 1fr; }
.search-box { flex-direction: column; }
.detail-grid { grid-template-columns: 1fr; }
.garage-grid { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.action-buttons { flex-direction: column; }
.modal-content { padding: var(--space-md); }
.breakdown-row { grid-template-columns: 120px 1fr 50px; }
}