/* ============================================================
SIMCENTER THEME v3 — VOLLSTÄNDIGES STYLESHEET
Alle CSS-Variablen sind inline — keine @import-Abhängigkeit.
Dark/Light-Mode per .dark-theme Klasse auf body.
============================================================ */
/* ── Light Mode (default) ───────────────────────────────── */
:root,
.theme-light {
/* Brand */
--color-primary: #2c3140;
--color-primary-hover: #1e2230;
--color-primary-rgb: 44, 49, 64;
--color-secondary: #c60000;
--color-secondary-hover: #a00000;
--color-secondary-rgb: 198, 0, 0;
--color-accent: #c60000;
/* Surfaces */
--color-bg: #ffffff;
--color-bg-subtle: #f4f5f7;
--color-bg-muted: #e9ecef;
--color-surface: #ffffff;
--color-surface-raised: #f8f9fa;
--color-overlay: rgba(0, 0, 0, 0.5);
/* Text */
--color-text: #1a1d24;
--color-text-muted: #6c757d;
--color-text-inverse: #ffffff;
--color-text-on-primary: #ffffff;
--color-text-on-secondary: #ffffff;
--color-link: #2c3140;
--color-link-hover: #c60000;
/* Borders */
--color-border: #dee2e6;
--color-border-strong: #adb5bd;
--color-border-focus: #9698a0;
/* Navigation */
--nav-bg: #ffffff;
--nav-border: #dee2e6;
--nav-text: #2c3140;
--nav-text-hover: #c60000;
--nav-text-active: #c60000;
--nav-active-border: #c60000;
--nav-toggler-color: #2c3140;
/* Footer */
--footer-bg: #2c3140;
--footer-text: #ffffff;
--footer-border: rgba(255,255,255,0.1);
--footer-link: rgba(255,255,255,0.8);
--footer-link-hover: #ffffff;
/* Banner */
--banner-bg: #2c3140;
--banner-text: #ffffff;
--banner-overlay: rgba(0, 0, 0, 0.45);
/* Cards */
--card-bg: #ffffff;
--card-border: #dee2e6;
--card-shadow: 0 2px 8px rgba(0,0,0,0.08);
--card-shadow-hover: 0 8px 24px rgba(0,0,0,0.14);
/* Tables */
--table-bg: #ffffff;
--table-border: #dee2e6;
--table-header-bg: #2c3140;
--table-header-text: #ffffff;
--table-row-odd: #f8f9fa;
--table-row-even: #ffffff;
--table-row-hover: rgba(44, 49, 64, 0.06);
--table-row-me: rgba(198, 0, 0, 0.08);
/* Buttons */
--btn-primary-bg: #2c3140;
--btn-primary-text: #ffffff;
--btn-primary-border: #2c3140;
--btn-primary-hover-bg: #1e2230;
--btn-secondary-bg: #c60000;
--btn-secondary-text: #ffffff;
--btn-secondary-border: #c60000;
--btn-secondary-hover-bg: #a00000;
--btn-outline-color: #2c3140;
--btn-outline-hover-bg: #2c3140;
--btn-outline-hover-text: #ffffff;
/* Forms */
--input-bg: #ffffff;
--input-border: #ced4da;
--input-border-focus: #9698a0;
--input-text: #212529;
--input-placeholder: #6c757d;
--input-shadow-focus: 0 0 0 0.25rem rgba(44, 49, 64, 0.25);
--input-disabled-bg: #e9ecef;
--select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
/* Leaderboard / Grind list */
--rank-bg: #2c3140;
--rank-text: #ffffff;
--rank-border: #c60000;
--rank-border-hover: #c60000;
--rank-hover-bg: #3d4357;
/* Badges / Categories */
--badge-primary-bg: #2c3140;
--badge-primary-text: #ffffff;
--badge-secondary-bg: #c60000;
--badge-secondary-text: #ffffff;
/* Alerts */
--alert-danger-bg: #f4cccc;
--alert-danger-border: #eeb3b3;
--alert-danger-text: #770000;
--alert-success-bg: #d1e7dd;
--alert-success-border: #badbcc;
--alert-success-text: #0f5132;
/* Calendar */
--cal-day-bg: #198754;
--cal-day-text: #ffffff;
--cal-day-hover-bg: #146c43;
--cal-past-bg: #dee2e6;
--cal-past-text: #6c757d;
--cal-closed-bg: #dee2e6;
--cal-current-bg: #c60000;
/* Offcanvas / Sidebar */
--offcanvas-bg: #ffffff;
--offcanvas-text: #212529;
--offcanvas-border: rgba(0, 0, 0, 0.15);
/* Scrollbar */
--scrollbar-track: #f1f1f1;
--scrollbar-thumb: #adb5bd;
--scrollbar-thumb-hover: #6c757d;
/* Misc */
--radius-sm: 0.25rem;
--radius: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 1rem;
--radius-pill: 50rem;
--transition-fast: 0.15s ease-in-out;
--transition: 0.25s ease-in-out;
--transition-slow: 0.4s ease-in-out;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow: 0 2px 8px rgba(0,0,0,0.12);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.16);
}
/* ── Dark Mode ───────────────────────────────────────────── */
.theme-dark {
/* Brand stays the same */
--color-primary: #4a5369;
--color-primary-hover: #5a6480;
--color-primary-rgb: 74, 83, 105;
--color-secondary: #e03030;
--color-secondary-hover: #c61010;
--color-secondary-rgb: 224, 48, 48;
--color-accent: #e03030;
/* Surfaces */
--color-bg: #0f1117;
--color-bg-subtle: #1a1e2a;
--color-bg-muted: #252b3a;
--color-surface: #1a1e2a;
--color-surface-raised: #252b3a;
--color-overlay: rgba(0, 0, 0, 0.7);
/* Text */
--color-text: #e8eaf0;
--color-text-muted: #9ba3b5;
--color-text-inverse: #0f1117;
--color-text-on-primary: #ffffff;
--color-text-on-secondary: #ffffff;
--color-link: #93a8f0;
--color-link-hover: #e03030;
/* Borders */
--color-border: #2e3448;
--color-border-strong: #4a5369;
--color-border-focus: #6b7da8;
/* Navigation */
--nav-bg: #1a1e2a;
--nav-border: #2e3448;
--nav-text: #c8cfdf;
--nav-text-hover: #e03030;
--nav-text-active: #e03030;
--nav-active-border: #e03030;
--nav-toggler-color: #c8cfdf;
/* Footer */
--footer-bg: #0f1117;
--footer-text: #c8cfdf;
--footer-border: rgba(255,255,255,0.06);
--footer-link: rgba(200,207,223,0.8);
--footer-link-hover: #ffffff;
/* Banner */
--banner-bg: #0f1117;
--banner-text: #ffffff;
--banner-overlay: rgba(0, 0, 0, 0.6);
/* Cards */
--card-bg: #1a1e2a;
--card-border: #2e3448;
--card-shadow: 0 2px 8px rgba(0,0,0,0.3);
--card-shadow-hover: 0 8px 24px rgba(0,0,0,0.5);
/* Tables */
--table-bg: #1a1e2a;
--table-border: #2e3448;
--table-header-bg: #0f1117;
--table-header-text: #c8cfdf;
--table-row-odd: #1f2436;
--table-row-even: #1a1e2a;
--table-row-hover: rgba(147, 168, 240, 0.08);
--table-row-me: rgba(224, 48, 48, 0.12);
/* Buttons */
--btn-primary-bg: #4a5369;
--btn-primary-text: #ffffff;
--btn-primary-border: #4a5369;
--btn-primary-hover-bg: #3a4258;
--btn-secondary-bg: #e03030;
--btn-secondary-text: #ffffff;
--btn-secondary-border: #e03030;
--btn-secondary-hover-bg: #c61010;
--btn-outline-color: #93a8f0;
--btn-outline-hover-bg: #4a5369;
--btn-outline-hover-text: #ffffff;
/* Forms */
--input-bg: #252b3a;
--input-border: #3a4258;
--input-border-focus: #6b7da8;
--input-text: #e8eaf0;
--input-placeholder: #6b7da8;
--input-shadow-focus: 0 0 0 0.25rem rgba(74, 83, 105, 0.4);
--input-disabled-bg: #1a1e2a;
--select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ba3b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
/* Leaderboard / Grind list */
--rank-bg: #252b3a;
--rank-text: #e8eaf0;
--rank-border: #e03030;
--rank-border-hover: #e03030;
--rank-hover-bg: #2e3448;
/* Badges */
--badge-primary-bg: #4a5369;
--badge-primary-text: #ffffff;
--badge-secondary-bg: #e03030;
--badge-secondary-text: #ffffff;
/* Alerts */
--alert-danger-bg: rgba(198, 0, 0, 0.2);
--alert-danger-border: rgba(198, 0, 0, 0.4);
--alert-danger-text: #f08080;
--alert-success-bg: rgba(25, 135, 84, 0.2);
--alert-success-border: rgba(25, 135, 84, 0.4);
--alert-success-text: #6fcf97;
/* Calendar */
--cal-day-bg: #198754;
--cal-day-text: #ffffff;
--cal-day-hover-bg: #146c43;
--cal-past-bg: #2e3448;
--cal-past-text: #6b7da8;
--cal-closed-bg: #2e3448;
--cal-current-bg: #e03030;
/* Offcanvas */
--offcanvas-bg: #1a1e2a;
--offcanvas-text: #e8eaf0;
--offcanvas-border: rgba(255, 255, 255, 0.08);
/* Scrollbar */
--scrollbar-track: #1a1e2a;
--scrollbar-thumb: #3a4258;
--scrollbar-thumb-hover: #4a5369;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--shadow: 0 2px 8px rgba(0,0,0,0.4);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
}
/* ── System preference auto-detection (opt-in via .theme-auto) ── */
@media (prefers-color-scheme: dark) {
.theme-auto {
/* inherits all .theme-dark values */
--color-primary: #4a5369;
--color-primary-hover: #5a6480;
--color-primary-rgb: 74, 83, 105;
--color-secondary: #e03030;
--color-secondary-hover: #c61010;
--color-secondary-rgb: 224, 48, 48;
--color-accent: #e03030;
--color-bg: #0f1117;
--color-bg-subtle: #1a1e2a;
--color-bg-muted: #252b3a;
--color-surface: #1a1e2a;
--color-surface-raised: #252b3a;
--color-overlay: rgba(0, 0, 0, 0.7);
--color-text: #e8eaf0;
--color-text-muted: #9ba3b5;
--color-text-inverse: #0f1117;
--color-link: #93a8f0;
--color-link-hover: #e03030;
--color-border: #2e3448;
--color-border-strong: #4a5369;
--color-border-focus: #6b7da8;
--nav-bg: #1a1e2a;
--nav-border: #2e3448;
--nav-text: #c8cfdf;
--nav-text-hover: #e03030;
--nav-text-active: #e03030;
--nav-active-border: #e03030;
--nav-toggler-color: #c8cfdf;
--footer-bg: #0f1117;
--footer-text: #c8cfdf;
--footer-border: rgba(255,255,255,0.06);
--footer-link: rgba(200,207,223,0.8);
--footer-link-hover: #ffffff;
--card-bg: #1a1e2a;
--card-border: #2e3448;
--card-shadow: 0 2px 8px rgba(0,0,0,0.3);
--card-shadow-hover: 0 8px 24px rgba(0,0,0,0.5);
--table-bg: #1a1e2a;
--table-border: #2e3448;
--table-header-bg: #0f1117;
--table-header-text: #c8cfdf;
--table-row-odd: #1f2436;
--table-row-even: #1a1e2a;
--table-row-hover: rgba(147, 168, 240, 0.08);
--table-row-me: rgba(224, 48, 48, 0.12);
--btn-primary-bg: #4a5369;
--btn-primary-text: #ffffff;
--btn-primary-border: #4a5369;
--btn-primary-hover-bg: #3a4258;
--btn-secondary-bg: #e03030;
--btn-secondary-text: #ffffff;
--btn-secondary-border: #e03030;
--btn-secondary-hover-bg: #c61010;
--input-bg: #252b3a;
--input-border: #3a4258;
--input-border-focus: #6b7da8;
--input-text: #e8eaf0;
--input-placeholder: #6b7da8;
--input-shadow-focus: 0 0 0 0.25rem rgba(74, 83, 105, 0.4);
--input-disabled-bg: #1a1e2a;
--select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ba3b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
--rank-bg: #252b3a;
--rank-text: #e8eaf0;
--rank-border: #e03030;
--rank-hover-bg: #2e3448;
--offcanvas-bg: #1a1e2a;
--offcanvas-text: #e8eaf0;
--offcanvas-border: rgba(255, 255, 255, 0.08);
--scrollbar-track: #1a1e2a;
--scrollbar-thumb: #3a4258;
--scrollbar-thumb-hover: #4a5369;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--shadow: 0 2px 8px rgba(0,0,0,0.4);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
--cal-past-bg: #2e3448;
--cal-past-text: #6b7da8;
--cal-closed-bg: #2e3448;
--cal-current-bg: #e03030;
}
}
/* ============================================================
KOMPONENTEN-STILE
============================================================ */
/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');
/* ── Base Reset ─────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: 'Outfit', system-ui, -apple-system, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-bg);
transition: background-color var(--transition), color var(--transition);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: 'Outfit', sans-serif;
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
margin-top: 0;
margin-bottom: 0.5rem;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p { margin-top: 0; margin-bottom: 1rem; }
a {
color: var(--color-link);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }
img, svg { vertical-align: middle; max-width: 100%; }
/* ── Bootstrap Variable Overrides ──────────────────────────── */
/* Re-map Bootstrap 5 tokens to our CSS variables */
:root {
--bs-primary: var(--color-primary);
--bs-secondary: var(--color-secondary);
--bs-primary-rgb: var(--color-primary-rgb);
--bs-secondary-rgb: var(--color-secondary-rgb);
--bs-body-color: var(--color-text);
--bs-body-bg: var(--color-bg);
--bs-border-color: var(--color-border);
--bs-link-color: var(--color-link);
--bs-link-hover-color: var(--color-link-hover);
--bs-font-sans-serif: 'Outfit', system-ui, -apple-system, sans-serif;
--bs-font-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, monospace;
}
/* ── Layout Containers ─────────────────────────────────────── */
#page {
min-height: calc(100vh - 64px - 60px);
padding-bottom: 3rem;
}
/* ── NAVIGATION ─────────────────────────────────────────────── */
.navbar {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background-color: var(--nav-bg) !important;
border-bottom: 1px solid var(--nav-border);
padding: 0.75rem 0;
position: sticky;
top: 0;
z-index: 1030;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background-color var(--transition), border-color var(--transition);
}
@media (min-width: 992px) {
.navbar-expand-lg {
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-lg .navbar-collapse {
display: flex !important;
flex-basis: auto;
align-items: center;
}
.navbar-expand-lg .navbar-toggler {
display: none;
}
}
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
}
.navbar-collapse.collapse:not(.show) {
display: none !important;
}
@media (min-width: 992px) {
.navbar-collapse.collapse:not(.show) {
display: flex !important;
}
}
.navbar-brand img {
height: 48px;
width: auto;
transition: opacity var(--transition-fast);
}
.navbar-brand:hover img { opacity: 0.85; }
.navbar-nav { gap: 4px; }
.navbar-nav .nav-item .nav-link {
font-weight: 600;
font-size: 0.9rem;
color: var(--nav-text) !important;
padding: 0.5rem 0.875rem;
border-radius: var(--radius);
transition: color var(--transition-fast), background-color var(--transition-fast);
letter-spacing: 0.01em;
}
.navbar-nav .nav-item .nav-link:hover {
color: var(--nav-text-hover) !important;
background-color: rgba(var(--color-primary-rgb), 0.08);
}
.navbar-nav .nav-item .nav-link.active,
.navbar-nav .nav-item.selected .nav-link {
color: var(--nav-text-active) !important;
}
.navbar-nav .nav-item .nav-link span {
padding-bottom: 2px;
}
.navbar-nav .nav-item .nav-link:hover span,
.navbar-nav .nav-item.selected .nav-link span {
border-bottom: 2px solid var(--nav-active-border);
}
/* Mobile toggler */
.navbar-toggler {
border-color: rgba(var(--color-primary-rgb), 0.2);
color: var(--nav-toggler-color);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
filter: var(--toggler-icon-filter, none);
}
.theme-dark .navbar-toggler-icon {
--toggler-icon-filter: invert(1);
}
/* ── OFFCANVAS (mobile menu) ─────────────────────────────── */
.offcanvas {
background-color: var(--offcanvas-bg) !important;
color: var(--offcanvas-text);
border-color: var(--offcanvas-border) !important;
}
.offcanvas-header { border-bottom: 1px solid var(--offcanvas-border); }
.offcanvas-body { justify-content: flex-end; }
.offcanvas .btn-close { filter: var(--close-btn-filter, none); }
.theme-dark .offcanvas .btn-close { --close-btn-filter: invert(1); }
/* ── BANNER ──────────────────────────────────────────────── */
.banner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: var(--banner-bg);
color: var(--banner-text);
height: 200px;
}
@media (min-width: 768px) { .banner { height: 280px; } }
@media (min-width: 992px) { .banner { height: 340px; } }
.banner::after {
content: '';
position: absolute;
inset: 0;
background: var(--banner-overlay);
z-index: 1;
}
.banner-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-content {
position: relative;
z-index: 2;
text-align: center;
padding: 1.5rem;
color: #ffffff;
max-width: 800px;
}
.banner-content h1 {
color: #ffffff;
text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
/* ── BREADCRUMBS ─────────────────────────────────────────── */
.breadcrumb {
background: transparent;
padding: 0.75rem 0;
margin-bottom: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--color-text-muted);
}
.breadcrumb-item a {
color: var(--color-link);
text-decoration: none;
}
.breadcrumb-item.active {
color: var(--color-text-muted);
}
/* ── FOOTER ──────────────────────────────────────────────── */
.footer {
background-color: var(--footer-bg);
color: var(--footer-text);
padding: 2rem 0;
font-size: 0.9rem;
margin-top: auto;
transition: background-color var(--transition);
}
.footer a {
color: var(--footer-link);
text-decoration: none;
transition: color var(--transition-fast);
}
.footer a:hover { color: var(--footer-link-hover); }
.footer-navigation {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-bottom: 1rem;
}
@media (min-width: 992px) {
.footer-navigation {
justify-content: flex-start;
margin-bottom: 0;
}
}
.footer-copyright {
display: flex;
justify-content: center;
color: var(--footer-link);
font-size: 0.8rem;
}
@media (min-width: 992px) {
.footer-copyright { justify-content: flex-end; }
}
/* ── BUTTONS ─────────────────────────────────────────────── */
.btn,
.registration-form .action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 0.9rem;
padding: 0.5rem 1.25rem;
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
letter-spacing: 0.01em;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary,
.registration-form .action {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
border-color: var(--btn-primary-border);
}
.btn-primary:hover,
.registration-form .action:hover {
background-color: var(--btn-primary-hover-bg);
color: var(--btn-primary-text);
border-color: var(--btn-primary-hover-bg);
}
.btn-secondary {
background-color: var(--btn-secondary-bg);
color: var(--btn-secondary-text);
border-color: var(--btn-secondary-border);
}
.btn-secondary:hover {
background-color: var(--btn-secondary-hover-bg);
color: var(--btn-secondary-text);
}
.btn-outline-primary {
background-color: transparent;
color: var(--btn-outline-color);
border-color: var(--btn-outline-color);
}
.btn-outline-primary:hover {
background-color: var(--btn-outline-hover-bg);
color: var(--btn-outline-hover-text);
border-color: var(--btn-outline-hover-bg);
}
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.8rem; }
.btn-lg { padding: 0.75rem 1.75rem; font-size: 1rem; }
/* ── FORMS ───────────────────────────────────────────────── */
.form-control,
.form-select,
.fieldholder-small input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
display: block;
width: 100%;
padding: 0.5rem 0.875rem;
font-family: 'Outfit', sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--input-text);
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--radius);
appearance: none;
-webkit-appearance: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
background-color var(--transition);
}
.form-control:focus,
.form-select:focus,
.fieldholder-small input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--input-border-focus);
box-shadow: var(--input-shadow-focus);
background-color: var(--input-bg);
color: var(--input-text);
}
.form-control::placeholder,
.fieldholder-small input::placeholder { color: var(--input-placeholder); }
.form-control:disabled,
.form-control[readonly] { background-color: var(--input-disabled-bg); opacity: 1; }
.form-select {
background-image: var(--select-arrow);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
padding-right: 2.5rem;
}
.form-label,
label {
font-weight: 600;
font-size: 0.875rem;
color: var(--color-text);
margin-bottom: 0.375rem;
display: inline-block;
}
.form-check-input {
background-color: var(--input-bg);
border-color: var(--input-border);
}
.form-check-input:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.input-group-text {
background-color: var(--color-bg-muted);
border-color: var(--input-border);
color: var(--color-text);
}
.fieldholder-small { margin-bottom: 1rem; }
/* ── CARDS ───────────────────────────────────────────────── */
.card {
background-color: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
transition: box-shadow var(--transition), border-color var(--transition),
background-color var(--transition);
overflow: hidden;
}
.card:hover { box-shadow: var(--card-shadow-hover); }
.card-header {
background-color: var(--color-bg-subtle);
border-bottom: 1px solid var(--card-border);
font-weight: 600;
}
.card-footer {
background-color: var(--color-bg-subtle);
border-top: 1px solid var(--card-border);
}
/* ── TABLES ──────────────────────────────────────────────── */
.table {
width: 100%;
color: var(--color-text);
border-color: var(--table-border);
margin-bottom: 1rem;
}
.table thead th {
background-color: var(--table-header-bg);
color: var(--table-header-text);
border-color: var(--table-border);
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.75rem 1rem;
white-space: nowrap;
}
.table tbody td,
.table tbody th {
background-color: var(--table-row-even);
border-color: var(--table-border);
padding: 0.625rem 1rem;
vertical-align: middle;
transition: background-color var(--transition-fast);
}
.table tbody tr:nth-child(odd) td,
.table tbody tr:nth-child(odd) th,
.table-striped > tbody > tr:nth-child(odd) > * {
background-color: var(--table-row-odd);
}
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
background-color: var(--table-row-hover);
}
.table tbody tr.me td,
.table tbody tr.me th {
background-color: var(--table-row-me) !important;
font-weight: 600;
}
.table-dark,
.theme-dark .table {
--bs-table-color: var(--color-text);
--bs-table-bg: var(--table-bg);
--bs-table-border-color: var(--table-border);
}
/* Responsive tables */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Lap time table */
.table-times tbody tr { vertical-align: middle; }
.table-times tbody tr:first-child td.time { color: #7c4dff; }
.theme-dark .table-times tbody tr:first-child td.time { color: #b388ff; }
.table-times tbody tr.invalid th,
.table-times tbody tr.invalid td { color: var(--color-secondary) !important; }
/* ── BADGES ──────────────────────────────────────────────── */
.badge {
display: inline-block;
padding: 0.3em 0.65em;
font-size: 0.75em;
font-weight: 700;
border-radius: var(--radius);
line-height: 1;
}
.car-category {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.3em 0.9em;
font-size: 0.7em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
background-color: var(--badge-secondary-bg);
color: var(--badge-secondary-text);
border-radius: var(--radius-pill);
min-width: 5em;
vertical-align: middle;
}
/* ── ALERTS ──────────────────────────────────────────────── */
.alert {
padding: 1rem;
border-radius: var(--radius);
border: 1px solid transparent;
margin-bottom: 1rem;
}
.alert-danger {
background-color: var(--alert-danger-bg);
border-color: var(--alert-danger-border);
color: var(--alert-danger-text);
}
.alert-success {
background-color: var(--alert-success-bg);
border-color: var(--alert-success-border);
color: var(--alert-success-text);
}
/* ── NAVBAR LOGO ─────────────────────────────────────────── */
#logo {
height: 48px;
width: auto;
transition: height var(--transition-fast);
}
/* ── GRIND LIST (ranking blocks) ─────────────────────────── */
.grind-list {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--card-shadow);
}
.grind-list .my-rank {
background-color: var(--rank-bg);
border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.15);
overflow: hidden;
transition: background-color var(--transition-fast);
}
.grind-list .my-rank:last-child { border-bottom: none; }
.grind-list .my-rank a,
.grind-list .my-rank > span {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--rank-text);
font-size: 1rem;
padding: 1rem 1.25rem;
text-decoration: none;
min-width: 70px;
transition: background-color var(--transition-fast), padding var(--transition-fast);
}
@media (min-width: 992px) {
.grind-list .my-rank a,
.grind-list .my-rank > span { padding: 1.25rem 1.5rem; }
}
.grind-list .my-rank a {
border-left: 4px solid var(--rank-border);
}
.grind-list .my-rank a:hover {
background-color: var(--rank-hover-bg);
border-left-width: 8px;
}
.grind-list .my-rank .my-rank-icon {
display: flex;
align-items: center;
}
.grind-list .my-rank .my-rank-icon i {
display: block;
font-size: 1.75rem;
margin-right: 0.75rem;
}
.grind-list .my-rank .title { font-size: 1.1rem; font-weight: 600; }
.grind-list .my-rank .value {
display: block;
color: var(--rank-text);
font-size: 2rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
/* Medal colors */
.grind-list .my-rank.gold i { color: #f5c842; }
.grind-list .my-rank.silver i { color: #c0c0c0; }
.grind-list .my-rank.bronze i { color: #cd7f32; }
/* ── ALTERNATING LIST ────────────────────────────────────── */
.alternating-list {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 2rem 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.alternating-list li .header {
display: flex;
flex-direction: row;
align-items: flex-end;
padding: 0.625rem 1rem;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
background-color: var(--table-header-bg);
color: var(--table-header-text);
border-bottom: 2px solid var(--color-secondary);
}
.alternating-list li a {
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--color-surface);
color: var(--color-text);
text-decoration: none;
padding: 0.75rem 1rem;
min-height: 72px;
font-size: 0.9rem;
border-bottom: 1px solid var(--color-border);
transition: background-color var(--transition-fast);
}
.alternating-list li:last-child a { border-bottom: none; }
.alternating-list li.odd a { background-color: var(--color-bg-subtle); }
.alternating-list li a:hover { background-color: var(--table-row-hover); }
.alternating-list.small li a { min-height: 48px; }
@media (min-width: 992px) {
.alternating-list li .header,
.alternating-list li a { padding: 0.875rem 1.5rem; }
}
.alternating-list li .rank {
display: flex;
align-items: center;
justify-content: flex-end;
width: 60px;
font-size: 1.1rem;
font-weight: 700;
}
.alternating-list li .title,
.alternating-list li .car,
.alternating-list li .car-title,
.alternating-list li .created,
.alternating-list li .laptime,
.alternating-list li .competition-title,
.alternating-list li .track-title { flex: 1 1 150px; }
.alternating-list li .track-map { width: 64px; margin-right: 1rem; }
.alternating-list li .icon-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 60px;
}
@media (min-width: 992px) {
.alternating-list li .icon-info { flex-direction: row; width: 90px; }
.alternating-list li .icon-info i { margin-right: 4px; }
}
.alternating-list li .value {
font-weight: 700;
color: var(--color-primary);
margin-right: 6px;
}
.theme-dark .alternating-list li .value { color: var(--color-link); }
/* ── CALENDAR ─────────────────────────────────────────────── */
.calendar {
width: 100%;
border-collapse: separate;
border-spacing: 3px;
}
.calendar th {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
padding: 0.5rem 0;
color: var(--color-text-muted);
}
.calendar tbody tr { background: transparent; }
.calendar tbody tr td { border: none; }
.calendar tbody tr td.day {
background-color: var(--cal-day-bg);
border-radius: var(--radius-sm);
width: 36px;
height: 36px;
}
.calendar tbody tr td.day a,
.calendar tbody tr td.day span {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
font-weight: 700;
text-decoration: none;
color: var(--cal-day-text);
border-radius: var(--radius-sm);
}
.calendar tbody tr td.day a { transition: background-color var(--transition-fast); }
.calendar tbody tr td.day a:hover { background-color: var(--cal-day-hover-bg); }
.calendar tbody tr td.past,
.calendar tbody tr td.closed {
background-color: var(--cal-past-bg);
color: var(--cal-past-text);
border-radius: var(--radius-sm);
}
.calendar .day.current { background-color: var(--cal-current-bg) !important; }
/* Calendar blocker overlay */
.calendar-blocker {
position: fixed;
inset: 0;
background: var(--color-overlay);
z-index: 1050;
}
.calendar-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
z-index: 1055;
}
/* ── BOOKING TABLE ───────────────────────────────────────── */
#booking-table thead th .form-check-wrapper {
display: flex;
justify-content: center;
}
#booking-table td, #booking-table th { padding: 0; }
#booking-table td {
border-left: 1px solid var(--table-border);
text-align: center;
}
#booking-table td.free { background-color: #a3cfbb; }
#booking-table td.booked { background-color: var(--color-secondary); font-weight: bold; }
#booking-table td.booked.free { background-color: var(--color-secondary-hover); }
#booking-table td.booked small { color: #fff; }
#booking-table td.requested { background-color: #198754; }
#booking-table td.requested.booked { background-color: var(--color-secondary); }
#booking-table td.closed { background-color: var(--color-bg-muted); }
#booking-table td small { font-size: 0.7rem; }
@media (min-width: 992px) { #booking-table td small { font-size: 0.875rem; } }
/* ── BOOKING OVERVIEW ────────────────────────────────────── */
@media (min-width: 992px) {
.booking-overview {
display: grid;
grid-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
}
.booking-overview--month { margin: 0; }
}
.booking-overview--month { margin-top: 1.5rem; }
/* Rent calendar accordion */
.rent-calendar {
height: 0;
opacity: 0;
overflow: hidden;
transition: height 0.2s linear, opacity 0.2s linear;
}
.rent-calendar.show { height: 100%; opacity: 1; }
/* ── BANNER HERO ─────────────────────────────────────────── */
.title-banner {
position: relative;
height: 300px;
overflow: hidden;
color: #fff;
display: flex;
align-items: center;
}
.title-banner h1 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.banner-image-abs {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.banner-image-abs img { width: 100%; height: 100%; object-fit: cover; }
/* ── PRICE LIST ──────────────────────────────────────────── */
.price-list span { display: flex; justify-content: space-between; }
.price-list .price-row {
display: flex;
flex-wrap: wrap;
position: relative;
margin-top: 0.375rem;
}
.price-list .price-row::after {
content: '';
display: block;
position: absolute;
bottom: 6px;
left: 1rem;
right: 1rem;
border-bottom: 1px dotted var(--color-border);
z-index: 1;
}
.price-list .price-row .offer,
.price-list .price-row .price {
flex: 0 0 auto;
z-index: 2;
}
.price-list .price-row .offer { flex: 1 1 auto; }
.price-list .price-row .offer span {
background-color: var(--color-surface);
display: inline;
padding-right: 0.625rem;
}
.price-list .price-row .price {
display: flex;
justify-content: flex-end;
font-weight: 700;
}
.price-list .price-row .price span {
background-color: var(--color-surface);
padding-left: 0.625rem;
}
/* ── BOARD HEADLINE ──────────────────────────────────────── */
.board-headline {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
.board-headline h2 { margin: 0; }
.board-form { display: flex; gap: 0.5rem; }
/* ── BOARD CONTENT ───────────────────────────────────────── */
.board-content { margin-top: 1.25rem; }
/* ── TOOLBAR ─────────────────────────────────────────────── */
.btn-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.25rem;
}
/* ── PROFILE QR CODE ─────────────────────────────────────── */
.profile-qrcode {
display: grid;
justify-content: center;
}
.profile-qrcode img { max-height: 320px; width: auto; }
.profile-qrcode-text { text-align: center; margin-top: 0.5rem; }
/* ── REGISTRATION FORM ───────────────────────────────────── */
.registration-form .middleColumn {
display: grid;
grid-gap: 1rem 1.5rem;
grid-template-columns: 1fr 1fr;
}
/* ── BLOG / NEWS LIST ────────────────────────────────────── */
.blog-list {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
margin: 2rem 0;
}
@media (min-width: 576px) { .blog-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .blog-list { grid-template-columns: 1fr 1fr 1fr; } }
.blog-item {
background-color: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--card-shadow);
transition: box-shadow var(--transition), transform var(--transition);
}
.blog-item:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-2px);
}
.blog-image {
overflow: hidden;
max-height: 220px;
display: flex;
justify-content: center;
border-bottom: 2px solid var(--card-border);
}
.blog-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-headline-wrapper { padding: 1.25rem 1.25rem 0.5rem; }
.blog-headline { color: var(--color-primary); margin: 0 0 0.25rem; }
.blog-date { color: var(--color-text-muted); font-size: 0.85rem; }
.blog-content { padding: 0 1.25rem 1.25rem; color: var(--color-text); }
.blog-action { margin-top: 0.75rem; }
/* ── POP (hover zoom) ────────────────────────────────────── */
.pop {
cursor: pointer;
position: relative;
overflow: hidden;
}
.pop::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,0.25);
opacity: 0;
transition: opacity var(--transition-fast);
z-index: 1;
}
.pop:hover::before { opacity: 1; }
/* ── SELECT PACKAGE ──────────────────────────────────────── */
.select-package {
margin: 2rem 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
gap: 1.25rem;
}
.select-package .package {
flex: 1 0 280px;
padding: 1.5rem;
cursor: pointer;
background-color: var(--card-bg);
border: 2px solid var(--card-border);
border-radius: var(--radius-lg);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.select-package .package:hover {
border-color: var(--color-primary);
box-shadow: var(--card-shadow-hover);
}
.select-package .package input { display: none; }
.select-package .package:has(input:checked) {
border-color: var(--color-secondary);
outline: 2px solid var(--color-secondary);
}
/* ── SELECT DATE ─────────────────────────────────────────── */
.select-date .date-and-time {
display: flex;
gap: 2rem;
align-items: flex-start;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
.select-date .date-and-time .carousel { flex: 0 0 40%; min-width: 280px; }
.select-date .date-and-time .select-time-slot {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.select-date .date-and-time .select-time-slot .time-slot {
display: flex;
width: 64px;
height: 64px;
background-color: var(--color-bg-muted);
color: var(--color-text);
border-radius: var(--radius);
text-align: center;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 0.8rem;
font-weight: 600;
transition: background-color var(--transition-fast);
}
.select-date .date-and-time .select-time-slot .time-slot.current {
background-color: var(--color-secondary);
color: #fff;
}
.select-date .date-and-time .select-time-slot .time-slot:hover {
background-color: var(--cal-day-bg);
color: #fff;
}
.select-date .date-and-time .select-time-slot .time-slot.no-booking {
background-color: var(--color-bg-subtle);
color: var(--color-text-muted);
cursor: default;
pointer-events: none;
}
.confirm-date { margin-top: 1rem; }
/* ── TRACK MAP ───────────────────────────────────────────── */
.track-map svg { width: 64px; height: 64px; }
/* ── GROUPED TRACKS ──────────────────────────────────────── */
.grouped-tracks {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-left: 2rem;
}
/* ── TABLE ROW STATES ────────────────────────────────────── */
tr.past td { opacity: 0.6; }
tr.new td { background-color: var(--alert-success-bg) !important; }
tr.invalid td { color: var(--color-secondary) !important; }
/* ── TYPOGRAPHY (content area) ───────────────────────────── */
.typography {
color: var(--color-text);
line-height: 1.7;
}
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
margin-bottom: 0.75rem;
margin-top: 1.5rem;
color: var(--color-text);
}
.typography p { margin-bottom: 1rem; }
.typography a {
color: var(--color-link);
text-decoration: underline;
}
.typography a:hover { color: var(--color-link-hover); }
.typography ul,
.typography ol { margin-left: 1.5rem; margin-bottom: 1rem; }
.typography li { margin-bottom: 0.375rem; }
.typography table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
}
.typography table td,
.typography table th {
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
}
.typography table th {
background-color: var(--color-bg-subtle);
font-weight: 700;
}
.typography blockquote {
border-left: 4px solid var(--color-primary);
margin: 1.5rem 0;
padding: 0.75rem 1.25rem;
background-color: var(--color-bg-subtle);
color: var(--color-text-muted);
font-style: italic;
border-radius: 0 var(--radius) var(--radius) 0;
}
/* ── HIGHLIGHT ROW ───────────────────────────────────────── */
.highlight_row { background-color: var(--table-row-me) !important; }
/* ── SELECT GROUP SIZE ───────────────────────────────────── */
.select-group-size .card-body {
display: flex;
align-items: center;
justify-content: center;
}
.select-group-size .el {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
}
.select-group-size .el input {
border: none;
text-align: center;
width: 48px;
font-size: 1.75rem;
outline: none;
pointer-events: none;
background: transparent;
color: var(--color-text);
}
.select-group-size .el a {
display: flex;
border: 1px solid var(--color-border);
border-radius: 50%;
width: 36px;
height: 36px;
font-size: 1.25rem;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: bold;
background: var(--color-bg-subtle);
color: var(--color-text);
transition: background-color var(--transition-fast);
}
.select-group-size .el a:hover { background-color: var(--color-bg-muted); }
/* ── BOOKING INFO ────────────────────────────────────────── */
.booking-info {
display: flex;
justify-content: center;
align-items: center;
flex: 1 1 100%;
}
/* ── LEADERBOARD HEADER ──────────────────────────────────── */
.leaderboard-header { margin-top: 1.5rem; }
.leaderboard-header .headline {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.leaderboard-header .headline h2 { margin: 0; }
.leaderboard-header .track-map {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-subtle);
padding: 0.5rem;
border-radius: var(--radius);
border: 1px solid var(--color-border);
}
@media (min-width: 992px) {
.leaderboard-header {
display: grid;
grid-template-columns: 1fr 180px;
gap: 1.5rem;
align-items: start;
}
}
/* ── PAGE CONTENT ─────────────────────────────────────────── */
.page-content { margin-bottom: 2.5rem; }
/* ── DARK MODE DETECTION HELPER CLASS ───────────────────── */
/* Applied via JS when user toggles mode */
/* Toggle button example:
document.body.classList.toggle('theme-dark');
document.body.classList.toggle('theme-light');
*/
/* ── DARK-THEME legacy class (for backward compatibility) ── */
/* The old theme used .dark-theme — we support both patterns */
.dark-theme {
/* forward to new variables */
background-color: var(--color-bg);
color: var(--color-text);
}
/* ── PAGINATION ──────────────────────────────────────────── */
.pagination {
display: flex;
gap: 0.25rem;
list-style: none;
padding: 0;
}
.page-link {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-link);
border-radius: var(--radius);
text-decoration: none;
font-weight: 500;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.page-link:hover {
background-color: var(--color-bg-subtle);
color: var(--color-link-hover);
}
.page-item.active .page-link {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.page-item.disabled .page-link {
opacity: 0.5;
pointer-events: none;
}
/* ── MODALS ──────────────────────────────────────────────── */
.modal-content {
background-color: var(--card-bg);
border-color: var(--card-border);
color: var(--color-text);
}
.modal-header {
border-bottom-color: var(--color-border);
background-color: var(--color-bg-subtle);
}
.modal-footer {
border-top-color: var(--color-border);
background-color: var(--color-bg-subtle);
}
/* ── DROPDOWNS ───────────────────────────────────────────── */
.dropdown-menu {
background-color: var(--color-surface);
border-color: var(--color-border);
box-shadow: var(--shadow-lg);
}
.dropdown-item {
color: var(--color-text);
transition: background-color var(--transition-fast);
}
.dropdown-item:hover {
background-color: var(--color-bg-subtle);
color: var(--color-text);
}
.dropdown-item.active {
background-color: var(--color-primary);
color: #fff;
}
.dropdown-divider { border-color: var(--color-border); }
/* ── TOOLTIPS ────────────────────────────────────────────── */
.tooltip-inner {
background-color: var(--color-text);
color: var(--color-bg);
border-radius: var(--radius-sm);
font-size: 0.8rem;
}
/* ── PROGRESS ─────────────────────────────────────────────── */
.progress {
background-color: var(--color-bg-muted);
border-radius: var(--radius-pill);
height: 0.625rem;
}
.progress-bar { background-color: var(--color-primary); }
/* ── ACCORDION ───────────────────────────────────────────── */
.accordion-item {
background-color: var(--card-bg);
border-color: var(--color-border);
color: var(--color-text);
}
.accordion-button {
background-color: var(--color-bg-subtle);
color: var(--color-text);
}
.accordion-button:not(.collapsed) {
background-color: var(--color-bg-muted);
color: var(--color-text);
box-shadow: none;
}
.accordion-button::after {
filter: var(--accordion-arrow-filter, none);
}
.theme-dark .accordion-button::after {
--accordion-arrow-filter: invert(1);
}
/* ── VISUALLY HIDDEN ─────────────────────────────────────── */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ── UTILITY: Colors ─────────────────────────────────────── */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-danger { color: var(--color-secondary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
/* ── THEME TOGGLE BUTTON ─────────────────────────────────── */
.theme-toggle-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background-color: transparent;
color: var(--color-text-muted);
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
transition: all var(--transition-fast);
}
.theme-toggle-btn:hover {
background-color: var(--color-bg-subtle);
color: var(--color-text);
}
/* ── RESPONSIVE UTILITY ──────────────────────────────────── */
@media (max-width: 575.98px) { .no-mobile { display: none !important; } }
@media (max-width: 800px) {
.select-date .date-and-time { flex-direction: column; }
.select-date .date-and-time .carousel { flex: 1 1 100%; width: 100%; }
}
/* ── PRINT ───────────────────────────────────────────────── */
@media print {
.navbar, .footer, .offcanvas, .modal { display: none !important; }
body { background: #fff !important; color: #000 !important; }
a { color: #000 !important; }
}
/* ── DARK MODE: specific overrides for legacy .dark-theme class ── */
/* Support the Silverstripe CMS $Center.Theme == 'dark' output */
body.dark-theme {
background-color: var(--color-bg);
color: var(--color-text);
}
/* Apply dark tokens when body has .dark-theme (legacy SilverStripe pattern) */
body.dark-theme {
--color-primary: #4a5369;
--color-primary-hover: #5a6480;
--color-primary-rgb: 74, 83, 105;
--color-secondary: #e03030;
--color-secondary-hover: #c61010;
--color-secondary-rgb: 224, 48, 48;
--color-accent: #e03030;
--color-bg: #0f1117;
--color-bg-subtle: #1a1e2a;
--color-bg-muted: #252b3a;
--color-surface: #1a1e2a;
--color-surface-raised: #252b3a;
--color-overlay: rgba(0, 0, 0, 0.7);
--color-text: #e8eaf0;
--color-text-muted: #9ba3b5;
--color-text-inverse: #0f1117;
--color-link: #93a8f0;
--color-link-hover: #e03030;
--color-border: #2e3448;
--color-border-strong: #4a5369;
--color-border-focus: #6b7da8;
--nav-bg: #1a1e2a;
--nav-border: #2e3448;
--nav-text: #c8cfdf;
--nav-text-hover: #e03030;
--nav-text-active: #e03030;
--nav-active-border: #e03030;
--nav-toggler-color: #c8cfdf;
--footer-bg: #0f1117;
--footer-text: #c8cfdf;
--footer-border: rgba(255,255,255,0.06);
--footer-link: rgba(200,207,223,0.8);
--footer-link-hover: #ffffff;
--card-bg: #1a1e2a;
--card-border: #2e3448;
--card-shadow: 0 2px 8px rgba(0,0,0,0.3);
--card-shadow-hover: 0 8px 24px rgba(0,0,0,0.5);
--table-bg: #1a1e2a;
--table-border: #2e3448;
--table-header-bg: #0f1117;
--table-header-text: #c8cfdf;
--table-row-odd: #1f2436;
--table-row-even: #1a1e2a;
--table-row-hover: rgba(147, 168, 240, 0.08);
--table-row-me: rgba(224, 48, 48, 0.12);
--btn-primary-bg: #4a5369;
--btn-primary-text: #ffffff;
--btn-primary-border: #4a5369;
--btn-primary-hover-bg: #3a4258;
--btn-secondary-bg: #e03030;
--btn-secondary-text: #ffffff;
--btn-secondary-border: #e03030;
--btn-secondary-hover-bg: #c61010;
--btn-outline-color: #93a8f0;
--btn-outline-hover-bg: #4a5369;
--btn-outline-hover-text: #ffffff;
--input-bg: #252b3a;
--input-border: #3a4258;
--input-border-focus: #6b7da8;
--input-text: #e8eaf0;
--input-placeholder: #6b7da8;
--input-shadow-focus: 0 0 0 0.25rem rgba(74, 83, 105, 0.4);
--input-disabled-bg: #1a1e2a;
--select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ba3b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
--rank-bg: #252b3a;
--rank-text: #e8eaf0;
--rank-border: #e03030;
--rank-hover-bg: #2e3448;
--offcanvas-bg: #1a1e2a;
--offcanvas-text: #e8eaf0;
--offcanvas-border: rgba(255, 255, 255, 0.08);
--scrollbar-track: #1a1e2a;
--scrollbar-thumb: #3a4258;
--scrollbar-thumb-hover: #4a5369;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--shadow: 0 2px 8px rgba(0,0,0,0.4);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
--cal-past-bg: #2e3448;
--cal-past-text: #6b7da8;
--cal-closed-bg: #2e3448;
--cal-current-bg: #e03030;
--alert-danger-bg: rgba(198, 0, 0, 0.2);
--alert-danger-border: rgba(198, 0, 0, 0.4);
--alert-danger-text: #f08080;
--alert-success-bg: rgba(25, 135, 84, 0.2);
--alert-success-border: rgba(25, 135, 84, 0.4);
--alert-success-text: #6fcf97;
--badge-primary-bg: #4a5369;
--badge-secondary-bg: #e03030;
}
/* ── NAVBAR LAYOUT FIX ─────────────────────────────────────── */
.navbar {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-collapse {
display: flex !important;
flex-basis: auto;
align-items: center;
flex-grow: 1;
}
.navbar-expand-lg .navbar-toggler { display: none !important; }
.navbar-expand-lg .navbar-nav {
flex-direction: row !important;
align-items: center;
}
}
.navbar-collapse.collapse:not(.show) {
display: none;
}
@media (min-width: 992px) {
.navbar-collapse.collapse:not(.show) {
display: flex !important;
}
}
/* ── NAVBAR-NAV als horizontale Leiste ─────────────────────── */
.navbar-nav {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
list-style: none !important;
}
@media (min-width: 992px) {
.navbar-nav {
flex-direction: row !important;
gap: 4px;
}
}
/* ── Sprach-Liste ausblenden oder inline ───────────────────── */
ul.lang {
display: flex;
flex-direction: row;
list-style: none !important;
padding: 0;
margin: 0 0 0 1rem;
gap: 0.5rem;
align-items: center;
}
ul.lang a { font-size: 0.8rem; color: var(--color-text-muted); }
ul.lang a:hover, ul.lang a.current { color: var(--color-link-hover); }
align-items: center;
}
.navbar-nav {
flex-direction: row !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
gap: 0.25rem;
align-items: center;
}
ul.lang {
flex-direction: row !important;
list-style: none !important;
padding: 0 !important;
margin: 0 0 0 0.75rem !important;
gap: 0.5rem;
display: flex !important;
align-items: center;
}
.navbar-toggler { display: none !important; }
.d-lg-none { display: none !important; }
/* ── CONTENT PADDING ───────────────────────────────────────── */
#content {
max-width: 1320px;
margin: 0 auto;
padding: 2rem 1.5rem !important;
}
@media (max-width: 768px) {
#content { padding: 1rem !important; }
.navbar-toggler { display: flex !important; }
.d-lg-none { display: flex !important; }
#mainNavbar { display: none !important; }
#mainNavbar.show { display: flex !important; flex-direction: column; }
.navbar-nav { flex-direction: column !important; }
}
/* ============================================================
MODERN LEADERBOARD — Podium + Table Layout
Used on BoardsPage (per-track/class) and CompetitionPage
============================================================ */
/* ── PAGE WRAPPER ──────────────────────────────────────────── */
.lb-page {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* ── BACK LINK ─────────────────────────────────────────────── */
.lb-back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-fast);
width: fit-content;
}
.lb-back-link:hover {
color: var(--color-link-hover);
}
.lb-back-link i {
font-size: 0.75rem;
}
/* ── HEADER ────────────────────────────────────────────────── */
.lb-header-modern {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.lb-header-main {
flex: 1 1 auto;
min-width: 0;
}
.lb-header-class {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: 0.25rem;
}
.lb-header-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
margin: 0 0 0.5rem;
color: var(--color-text);
}
.lb-header-meta {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.lb-header-meta i {
font-size: 0.8125rem;
}
/* ── PODIUM ────────────────────────────────────────────────── */
.lb-podium {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.lb-podium .order-md-1 { order: 1; }
.lb-podium .order-md-2 { order: 2; }
.lb-podium .order-md-3 { order: 3; }
@media (min-width: 576px) {
.lb-podium {
display: flex;
flex-direction: row;
}
.lb-podium > .lb-podium-card { flex: 1 1 0; min-width: 0; }
}
.lb-podium-card {
background-color: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: calc(var(--radius) * 1.25);
padding: 1.25rem 1rem;
text-align: center;
transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.lb-podium-card:hover {
transform: translateY(-2px);
}
.lb-podium-gold {
border-color: var(--color-secondary);
background-color: rgba(var(--color-secondary-rgb), 0.06);
box-shadow: 0 0 0 1px var(--color-secondary) inset;
color: #e8b341;
}
.lb-podium-silver {
color: #9ba7b3;
}
.lb-podium-bronze {
color: #c08760;
}
.lb-medal {
display: flex;
justify-content: center;
margin-bottom: 0.5rem;
}
.lb-medal svg {
width: 2.5rem;
height: 2.5rem;
}
.lb-podium-gold .lb-medal svg {
width: 2.75rem;
height: 2.75rem;
}
.lb-podium-name {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lb-podium-time {
font-size: 0.9375rem;
color: var(--color-secondary);
font-weight: 600;
margin-bottom: 0.125rem;
}
.lb-podium-car {
font-size: 0.75rem;
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.lb-podium {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.lb-podium .order-md-1,
.lb-podium .order-md-2,
.lb-podium .order-md-3 { order: 0; }
.lb-podium .lb-podium-gold { order: -1; }
}
/* ── TABLE ─────────────────────────────────────────────────── */
.lb-table-wrapper {
background-color: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: calc(var(--radius) * 1.25);
overflow: hidden;
}
.lb-table {
width: 100%;
border-collapse: collapse;
margin: 0;
font-size: 0.875rem;
}
.lb-table thead th {
padding: 0.75rem 1rem;
text-align: left;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
background-color: transparent;
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.lb-table tbody td {
padding: 0.875rem 1rem;
vertical-align: middle;
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
}
.lb-table tbody tr:last-child td {
border-bottom: none;
}
.lb-table tbody tr:hover td {
background-color: var(--table-row-hover);
}
/* Column widths */
.lb-table .lb-col-pos { width: 3.5rem; font-weight: 600; }
.lb-table .lb-col-driver { min-width: 10rem; }
.lb-table .lb-col-car { min-width: 10rem; color: var(--color-text-muted); }
.lb-table .lb-col-laps { width: 6rem; color: var(--color-text-muted); }
.lb-table .lb-col-time { width: 6rem; font-weight: 600; }
.lb-table .lb-col-sector { width: 5rem; color: var(--color-text-muted); text-align: left; }
.lb-table .lb-col-gap { width: 6rem; color: var(--color-text-muted); }
.lb-table .lb-col-toggle { width: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
.lb-table .lb-col-center { min-width: 8rem; color: var(--color-text-muted); }
/* Top-3 highlighting in the table */
.lb-table tbody tr.lb-row-pos-1 td.lb-col-pos,
.lb-table tbody tr.lb-row-pos-1 td.lb-col-time,
.lb-table tbody tr.lb-row-pos-3 td.lb-col-pos {
color: var(--color-secondary);
}
.lb-table tbody tr.lb-row-pos-1 {
background-color: rgba(var(--color-secondary-rgb), 0.04);
}
.lb-table tbody tr.lb-row-pos-1:hover td {
background-color: rgba(var(--color-secondary-rgb), 0.08);
}
/* Collapse row on mobile */
.lb-table .lb-row-collapse td {
background-color: var(--color-bg-subtle);
}
/* ── MOBILE TOGGLE BUTTON ──────────────────────────────────── */
.lb-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
background-color: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius);
color: var(--color-text-muted);
cursor: pointer;
transition: all var(--transition-fast);
}
.lb-toggle-btn:hover {
background-color: var(--color-bg-muted);
color: var(--color-text);
border-color: var(--color-border-strong);
}
.lb-toggle-btn i {
font-size: 0.6875rem;
line-height: 1;
}
/* Plus/Minus icon toggle - only one is ever visible */
.lb-toggle-btn .lb-toggle-plus { display: inline-block; }
.lb-toggle-btn .lb-toggle-minus { display: none; }
.lb-toggle-btn:not(.collapsed) .lb-toggle-plus { display: none; }
.lb-toggle-btn:not(.collapsed) .lb-toggle-minus { display: inline-block; }
/* Responsive adjustments */
@media (max-width: 991.98px) {
.lb-table thead th,
.lb-table tbody td {
padding: 0.625rem 0.75rem;
font-size: 0.8125rem;
}
.lb-header-modern {
flex-direction: column;
align-items: stretch;
}
}
@media (max-width: 575.98px) {
.lb-table .lb-col-gap { display: none; }
.lb-table .lb-col-laps small { display: none; }
}
/* ============================================================
CARD + TABLE TEXT COLOR FIX
Bootstrap 5 sets --bs-table-color / --bs-table-bg on .table,
which overrides our color inheritance in dark mode.
Force text colors to use our theme variables.
============================================================ */
.card,
.card-header,
.card-body,
.card-footer {
color: var(--color-text);
}
.card-header {
background-color: var(--color-bg-subtle);
color: var(--color-text);
}
.card-body {
background-color: var(--card-bg);
}
.table,
.table > :not(caption) > * > * {
--bs-table-color: var(--color-text);
--bs-table-bg: transparent;
--bs-table-striped-color: var(--color-text);
--bs-table-striped-bg: var(--table-row-odd);
--bs-table-hover-color: var(--color-text);
--bs-table-hover-bg: var(--table-row-hover);
color: var(--color-text);
}
.table thead th {
color: var(--table-header-text);
}
.table tbody td,
.table tbody th {
color: var(--color-text);
}
/* Inputs inside tables (e.g. register-driver-names) should match the theme */
.table input.form-control {
background-color: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
/* ============================================================
BOARDS OVERVIEW — Track Card Grid
============================================================ */
.boards-page {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.boards-hero {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1.5rem;
flex-wrap: wrap;
}
.boards-hero-main {
flex: 1 1 auto;
min-width: 0;
}
.boards-hero-kicker {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: 0.25rem;
}
.boards-hero-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
margin: 0;
color: var(--color-text);
}
/* ── SEARCH ────────────────────────────────────────────────── */
.boards-search {
position: relative;
flex: 0 1 320px;
min-width: 240px;
}
.boards-search input.boards-search-input {
width: 100%;
height: 2.5rem;
padding: 0 2.5rem 0 2.5rem;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
color: var(--color-text);
font-size: 0.875rem;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.boards-search-input::placeholder {
color: var(--color-text-muted);
}
.boards-search-input:focus {
outline: none;
border-color: var(--color-border-focus);
box-shadow: 0 0 0 3px rgba(var(--color-secondary-rgb), 0.15);
}
.boards-search-icon {
position: absolute;
left: 0.875rem;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
font-size: 0.8125rem;
pointer-events: none;
}
.boards-search-clear {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
width: 1.75rem;
height: 1.75rem;
padding: 0;
background: transparent;
border: none;
border-radius: var(--radius);
color: var(--color-text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.boards-search-clear:hover {
background-color: var(--color-bg-muted);
color: var(--color-text);
}
.boards-search-clear[hidden] {
display: none;
}
/* ── GRID + CARDS ──────────────────────────────────────────── */
.boards-content {
min-height: 200px;
}
.boards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.875rem;
position: relative;
}
@media (max-width: 1199.98px) {
.boards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
.boards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479.98px) {
.boards-grid { grid-template-columns: 1fr; }
}
.boards-card {
display: flex;
flex-direction: column;
background-color: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: calc(var(--radius) * 1.25);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.boards-card:hover {
transform: translateY(-2px);
border-color: var(--color-secondary);
box-shadow: var(--card-shadow-hover);
color: inherit;
text-decoration: none;
}
.boards-card-map {
position: relative;
aspect-ratio: 16 / 10;
background-color: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border-bottom: 1px solid var(--color-border);
}
.boards-card-map svg {
max-width: 100%;
max-height: 100%;
width: auto;
height: 100%;
stroke: var(--color-secondary);
fill: none;
}
.boards-card-map svg path,
.boards-card-map svg polyline,
.boards-card-map svg polygon {
stroke: var(--color-secondary);
fill: none;
}
.boards-card-badge {
position: absolute;
top: 0.625rem;
right: 0.625rem;
padding: 0.1875rem 0.5rem;
background-color: rgba(var(--color-primary-rgb), 0.85);
color: #ffffff;
border: 1px solid var(--color-border);
border-radius: 4px;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.boards-card-body {
padding: 0.875rem 1rem 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1 1 auto;
}
.boards-card-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.boards-card-meta {
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--color-text-muted);
margin-top: auto;
}
.boards-card-meta-item {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.boards-card-meta-item i {
font-size: 0.75rem;
opacity: 0.8;
}
/* ── LOADING & EMPTY STATES ─────────────────────────────────── */
.boards-grid.is-loading {
min-height: 200px;
}
.boards-spinner {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem 0;
color: var(--color-text-muted);
font-size: 1.5rem;
opacity: 0.6;
}
.boards-empty {
grid-column: 1 / -1;
padding: 3rem 1rem;
text-align: center;
color: var(--color-text-muted);
font-size: 0.9375rem;
background-color: var(--color-surface-raised);
border: 1px dashed var(--color-border);
border-radius: calc(var(--radius) * 1.25);
}
/* ╔══════════════════════════════════════════════════════════════╗
║ MY RANKINGS PAGE — modern redesign ║
╚══════════════════════════════════════════════════════════════╝ */
/* ── HERO ──────────────────────────────────────────────────── */
.myranks-page .myranks-hero {
margin-bottom: 1.75rem;
}
.myranks-hero-kicker {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: 0.25rem;
}
.myranks-hero-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
margin: 0;
color: var(--color-text);
}
/* ── STATS GRID ────────────────────────────────────────────── */
.myranks-stats {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin-bottom: 2.5rem;
}
@media (min-width: 992px) {
.myranks-stats {
grid-template-columns: 1.4fr 1fr;
gap: 1.5rem;
}
}
.myranks-stat-group {
display: flex;
flex-direction: column;
}
.myranks-stat-group-head {
margin-bottom: 0.875rem;
}
.myranks-stat-group-title {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--color-text);
/* margin-bottom/padding-bottom/border-bottom come from global article h2 rule */
}
.myranks-stat-list {
display: flex;
flex-direction: column;
background-color: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: calc(var(--radius) * 1.25);
overflow: hidden;
box-shadow: var(--card-shadow);
}
.myranks-stat-item {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 1rem 1.25rem;
text-decoration: none;
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
border-left: 3px solid transparent;
transition:
background-color var(--transition-fast),
border-left-color var(--transition-fast),
border-left-width var(--transition-fast),
padding-left var(--transition-fast);
}
.myranks-stat-item:last-child {
border-bottom: none;
}
a.myranks-stat-item:hover {
background-color: var(--table-row-hover);
color: var(--color-text);
}
.myranks-stat-icon {
flex: 0 0 auto;
width: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.375rem;
color: var(--color-text-muted);
}
.myranks-stat-label {
flex: 1 1 auto;
min-width: 0;
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.myranks-stat-value {
flex: 0 0 auto;
font-size: 1.75rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--color-text);
line-height: 1;
}
/* Medal accent colors */
.myranks-stat-gold {
border-left-color: #f5c842;
}
.myranks-stat-gold .myranks-stat-icon {
color: #f5c842;
}
.myranks-stat-silver {
border-left-color: #c0c0c0;
}
.myranks-stat-silver .myranks-stat-icon {
color: #c0c0c0;
}
.myranks-stat-bronze {
border-left-color: #cd7f32;
}
.myranks-stat-bronze .myranks-stat-icon {
color: #cd7f32;
}
.myranks-stat-neutral {
border-left-color: var(--color-secondary);
}
.myranks-stat-neutral .myranks-stat-icon {
color: var(--color-secondary);
}
a.myranks-stat-item:hover {
border-left-width: 6px;
padding-left: calc(1.25rem - 3px);
}
/* ── PLACEMENTS SECTION ────────────────────────────────────── */
.myranks-section-head {
margin-bottom: 1.25rem;
}
.myranks-section-title {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--color-text);
/* margin-bottom/padding-bottom/border-bottom come from global article h2 rule */
}
.myranks-placement-group {
margin-bottom: 1.75rem;
}
.myranks-placement-group:last-child {
margin-bottom: 0;
}
.myranks-placement-group-title {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: 0.02em;
margin: 0 0 0.75rem;
color: var(--color-text);
}
.myranks-placement-list {
display: flex;
flex-direction: column;
background-color: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: calc(var(--radius) * 1.25);
overflow: hidden;
box-shadow: var(--card-shadow);
}
.myranks-placement {
display: grid;
grid-template-columns: 56px 1fr auto auto;
align-items: center;
gap: 1rem;
padding: 0.875rem 1.25rem;
text-decoration: none;
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
border-left: 3px solid transparent;
transition:
background-color var(--transition-fast),
border-left-color var(--transition-fast),
border-left-width var(--transition-fast),
padding-left var(--transition-fast);
}
.myranks-placement:last-child {
border-bottom: none;
}
.myranks-placement:hover {
background-color: var(--table-row-hover);
color: var(--color-text);
border-left-color: var(--color-secondary);
border-left-width: 6px;
padding-left: calc(1.25rem - 3px);
}
/* Map thumbnail */
.myranks-placement-map {
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-subtle);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
color: var(--color-text-muted);
font-size: 1.25rem;
}
.myranks-placement-map img,
.myranks-placement-map svg {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
}
/* Hide the legacy #868e96 PlaceholderTrack rect; show icon instead */
.myranks-placement-map svg.bd-placeholder-img {
display: none;
}
.myranks-placement-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.myranks-placement-badge {
/* uses existing .car-category */
flex: 0 0 auto;
}
.myranks-placement-rank {
display: inline-flex;
align-items: baseline;
gap: 0.125rem;
font-variant-numeric: tabular-nums;
font-weight: 700;
min-width: 4rem;
justify-content: flex-end;
}
.myranks-placement-rank-pos {
font-size: 1.25rem;
color: var(--color-text-muted);
}
.myranks-placement-rank-sep {
color: var(--color-text-muted);
opacity: 0.6;
margin: 0 0.125rem;
}
.myranks-placement-rank-max {
font-size: 1rem;
color: var(--color-text);
}
/* Podium highlights */
.myranks-placement.is-pos-1 {
border-left-color: #f5c842;
}
.myranks-placement.is-pos-1 .myranks-placement-rank-pos {
color: #f5c842;
}
.myranks-placement.is-pos-2 {
border-left-color: #c0c0c0;
}
.myranks-placement.is-pos-2 .myranks-placement-rank-pos {
color: #c0c0c0;
}
.myranks-placement.is-pos-3 {
border-left-color: #cd7f32;
}
.myranks-placement.is-pos-3 .myranks-placement-rank-pos {
color: #cd7f32;
}
/* Responsive */
@media (max-width: 575.98px) {
.myranks-placement {
grid-template-columns: 48px 1fr auto;
grid-template-areas:
"map title rank"
"map badge rank";
gap: 0.5rem 0.75rem;
padding: 0.75rem 1rem;
}
.myranks-placement-map {
grid-area: map;
width: 48px;
height: 48px;
}
.myranks-placement-title {
grid-area: title;
}
.myranks-placement-badge {
grid-area: badge;
justify-self: start;
}
.myranks-placement-rank {
grid-area: rank;
}
.myranks-stat-item {
padding: 0.875rem 1rem;
}
.myranks-stat-value {
font-size: 1.5rem;
}
}
/* ╔══════════════════════════════════════════════════════════════╗
║ EMBED MODE — hide chrome when page is framed or ?embed=1 ║
╚══════════════════════════════════════════════════════════════╝ */
html.is-embedded body > header,
html.is-embedded body > footer,
html.is-embedded #Banner,
html.is-embedded .breadcrumbs,
html.is-embedded .banner,
html.is-embedded .page-banner {
display: none !important;
}
html.is-embedded body {
background: transparent !important;
}
html.is-embedded #page {
margin: 0 !important;
padding: 0 !important;
}
html.is-embedded #content.container {
max-width: 100% !important;
padding: 0.5rem 1rem !important;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ DRIVER LAPS PAGE — modern redesign ║
╚══════════════════════════════════════════════════════════════╝ */
/* ── HERO ──────────────────────────────────────────────────── */
.driver-laps-page .driver-laps-hero {
margin-bottom: 1.75rem;
}
.driver-laps-hero-kicker {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: 0.25rem;
}
.driver-laps-hero-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.1;
margin: 0;
color: var(--color-text);
}
.driver-laps-hero-title .driver-laps-hero-name {
color: var(--color-secondary);
}
/* ── DAY GROUP ─────────────────────────────────────────────── */
.driver-laps-day {
margin-bottom: 1.5rem;
}
.driver-laps-day:last-child {
margin-bottom: 0;
}
.driver-laps-day-title {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: 0 0 0.5rem;
padding-left: 0.25rem;
}
.driver-laps-list {
display: flex;
flex-direction: column;
background-color: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: calc(var(--radius) * 1.25);
overflow: hidden;
box-shadow: var(--card-shadow);
}
/* ── ROW ───────────────────────────────────────────────────── */
.driver-laps-row {
border-bottom: 1px solid var(--color-border);
}
.driver-laps-row:last-child {
border-bottom: none;
}
.driver-laps-row-main {
display: grid;
grid-template-columns: 56px 1.2fr 1.1fr auto auto auto auto;
align-items: center;
gap: 1rem;
padding: 0.875rem 1.25rem;
text-decoration: none;
color: var(--color-text);
border-left: 3px solid transparent;
transition:
background-color var(--transition-fast),
border-left-color var(--transition-fast),
border-left-width var(--transition-fast),
padding-left var(--transition-fast);
}
.driver-laps-row-main:hover {
background-color: var(--table-row-hover);
color: var(--color-text);
border-left-color: var(--color-secondary);
border-left-width: 6px;
padding-left: calc(1.25rem - 3px);
}
.driver-laps-map {
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-subtle);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
color: var(--color-text-muted);
font-size: 1.25rem;
}
.driver-laps-map svg,
.driver-laps-map img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
}
.driver-laps-map svg.bd-placeholder-img {
display: none;
}
.driver-laps-track {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.driver-laps-car {
font-size: 0.875rem;
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.driver-laps-time {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 1.125rem;
font-weight: 700;
color: var(--color-text);
font-variant-numeric: tabular-nums;
min-width: 5rem;
text-align: right;
}
.driver-laps-date {
font-size: 0.8125rem;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
min-width: 5rem;
text-align: right;
}
/* ── TELEMETRY BUTTON ──────────────────────────────────────── */
.driver-laps-tele-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
background-color: rgba(var(--color-secondary-rgb), 0.12);
border: 1px solid rgba(var(--color-secondary-rgb), 0.3);
border-radius: var(--radius);
color: var(--color-secondary);
cursor: pointer;
font-size: 0.9375rem;
transition:
background-color var(--transition-fast),
transform var(--transition-fast),
border-color var(--transition-fast);
}
.driver-laps-tele-btn:hover {
background-color: rgba(var(--color-secondary-rgb), 0.2);
border-color: var(--color-secondary);
color: var(--color-secondary);
}
.driver-laps-tele-btn[aria-expanded="true"] {
background-color: var(--color-secondary);
color: var(--color-text-on-secondary);
border-color: var(--color-secondary);
}
.driver-laps-tele-btn .fa-chart-area {
transition: transform var(--transition-fast);
}
.driver-laps-tele-btn[aria-expanded="true"] .fa-chart-area {
transform: rotate(0deg);
}
.driver-laps-tele-placeholder {
/* keeps column width consistent when no telemetry */
display: inline-block;
width: 2.5rem;
height: 2.5rem;
}
/* ── TELEMETRY EMBED PANEL ─────────────────────────────────── */
.driver-laps-tele-panel {
display: none;
background-color: var(--color-bg);
border-top: 1px solid var(--color-border);
overflow: hidden;
}
.driver-laps-tele-panel.is-open {
display: block;
}
.driver-laps-tele-iframe {
display: block;
width: 100%;
height: 1400px;
border: 0;
background-color: transparent;
}
.driver-laps-tele-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
color: var(--color-text-muted);
font-size: 0.9375rem;
gap: 0.5rem;
}
/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.driver-laps-row-main {
grid-template-columns: 48px 1fr auto auto;
grid-template-areas:
"map track time tele"
"map car date tele";
gap: 0.25rem 0.75rem;
padding: 0.75rem 1rem;
}
.driver-laps-map {
grid-area: map;
width: 48px;
height: 48px;
}
.driver-laps-track { grid-area: track; }
.driver-laps-car { grid-area: car; }
.driver-laps-time { grid-area: time; min-width: auto; }
.driver-laps-date { grid-area: date; min-width: auto; }
.driver-laps-tele-btn,
.driver-laps-tele-placeholder,
.driver-laps-vs-best-btn {
grid-area: tele;
align-self: center;
}
/* Stack the two buttons vertically within the shared area so they
don't fight for horizontal space on narrow screens. */
.driver-laps-tele-btn {
align-self: start;
margin-top: 0.125rem;
}
.driver-laps-vs-best-btn {
align-self: end;
margin-top: 0;
margin-bottom: 0.125rem;
}
.driver-laps-tele-iframe {
height: 1800px;
}
}
/* ╔══════════════════════════════════════════════════════════════╗
║ MY BEST LAPS — fetched driver-laps inline on MyRankings ║
╚══════════════════════════════════════════════════════════════╝ */
.myranks-best-laps {
margin-top: 2.5rem;
}
.myranks-best-laps-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
}
.myranks-best-laps-tools {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 0 0 auto;
margin-left: auto;
flex-wrap: wrap;
}
.myranks-best-laps-filter {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--color-text);
}
.myranks-best-laps-filter-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.myranks-best-laps-filter-select {
padding: 0.45rem 2rem 0.45rem 0.75rem;
background-color: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: var(--radius);
color: var(--color-text);
font-size: 0.875rem;
line-height: 1.25;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.65rem center;
background-size: 0.7rem;
cursor: pointer;
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.myranks-best-laps-filter-select:focus {
border-color: var(--color-secondary);
box-shadow: 0 0 0 2px rgba(var(--color-secondary-rgb), 0.25);
}
.myranks-best-laps-body {
margin-top: 0.25rem;
}
.myranks-best-laps-track {
margin-bottom: 1.75rem;
}
.myranks-best-laps-track:last-child {
margin-bottom: 0;
}
.myranks-best-laps-track-title {
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--color-text);
margin: 0 0 0.75rem;
padding-left: 0.25rem;
}
.myranks-best-laps-car-sub {
margin-bottom: 0.875rem;
}
.myranks-best-laps-car-sub:last-child {
margin-bottom: 0;
}
.myranks-best-laps-car-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: 0 0 0.375rem;
padding-left: 0.25rem;
}
.myranks-best-laps-loading,
.myranks-best-laps-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 3rem 1rem;
color: var(--color-text-muted);
font-size: 0.9375rem;
background-color: var(--color-surface-raised);
border: 1px dashed var(--color-border);
border-radius: calc(var(--radius) * 1.25);
}
@media (max-width: 575.98px) {
.myranks-best-laps-head {
flex-direction: column;
align-items: stretch;
}
.myranks-best-laps-tools {
margin-left: 0;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.myranks-best-laps-filter {
justify-content: space-between;
}
.myranks-best-laps-filter-select {
flex: 1 1 auto;
min-width: 0;
}
}
/* ╔══════════════════════════════════════════════════════════════╗
║ SITE LOGO — theme-aware swap (dark/light) ║
╚══════════════════════════════════════════════════════════════╝ */
.site-logo {
display: inline-flex;
align-items: center;
line-height: 0;
}
.site-logo-img {
display: block;
height: 56px;
width: auto;
max-width: 100%;
/* Prevent aggressive browser cache quirks from flashing the wrong variant */
}
/* Default (light mode): show the colored logo */
.site-logo-img--dark {
display: none;
}
/* Dark mode: show the red/white logo, hide colored */
html.dark-theme .site-logo-img--light {
display: none;
}
html.dark-theme .site-logo-img--dark {
display: block;
}
/* Responsive sizing */
@media (max-width: 575.98px) {
.site-logo-img {
height: 44px;
}
}
/* ╔══════════════════════════════════════════════════════════════╗
║ MY RANKINGS — section separation ║
╚══════════════════════════════════════════════════════════════╝ */
/* Adds clearer visual breaks between the three main sections:
Stats grid → My Leaderboard placements → My Best Laps.
The h2 red underline alone wasn't providing enough separation. */
article.myranks-page .myranks-placements,
article.myranks-page .myranks-best-laps {
margin-top: 4rem;
padding-top: 2.5rem;
border-top: 1px solid var(--color-border);
}
@media (max-width: 575.98px) {
article.myranks-page .myranks-placements,
article.myranks-page .myranks-best-laps {
margin-top: 3rem;
padding-top: 2rem;
}
}
/* ╔══════════════════════════════════════════════════════════════╗
║ TELEMETRY — fix hardcoded black text in dark mode ║
╚══════════════════════════════════════════════════════════════╝ */
/* The telemetry page body output (`$Canvas.RAW` from the backend)
contains a for the lap subtitle
line ("Peter Speed - Ferrari F138: 0:35.805"). This is hardcoded
and unreadable on dark backgrounds. Override it when embedded in
dark mode. */
html.dark-theme .telemetry-body span[style*="color: #000000"],
html.dark-theme .telemetry-body span[style*="color:#000000"],
html.dark-theme .telemetry-body span[style*="color: #000"],
html.dark-theme .telemetry-body span[style*="color:#000"],
html.dark-theme .telemetry-body span[style*="color: black"] {
color: var(--color-text) !important;
}
/* The chart plots themselves render on fixed white canvas backgrounds
(Flot library, not theme-controlled) — we leave those alone since
the chart data colors are tuned for white. */
/* ╔══════════════════════════════════════════════════════════════╗
║ COMPARE FEATURE — checkboxes, floating bar, modal, charts ║
╚══════════════════════════════════════════════════════════════╝ */
/* ── Row-level checkbox ─────────────────────────────────────── */
/* Changes .driver-laps-row to flex so the checkbox sits next to
the existing row-link. Only inside .myranks-best-laps to avoid
affecting the driver page itself. */
.myranks-best-laps .driver-laps-row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.myranks-best-laps .driver-laps-row-main {
flex: 1 1 auto;
min-width: 0;
}
/* The telemetry panel is a child of .driver-laps-row. With the row now
being a flex container (so the checkbox sits next to the row-link),
the panel would default to a flex column next to the link. Force it
onto its own line and full width. */
.myranks-best-laps .driver-laps-tele-panel {
flex: 0 0 100%;
width: 100%;
min-width: 0;
order: 99;
}
.driver-laps-compare-check,
.driver-laps-compare-placeholder {
flex: 0 0 auto;
/* !important needed to beat `label { display: block !important; margin-bottom: 0.375rem !important; }`
in fixes.css which applies globally to all labels (originally for form styling). */
display: flex !important;
align-items: center;
justify-content: center;
width: 3rem;
margin-bottom: 0 !important;
padding: 0;
cursor: pointer;
user-select: none;
}
.driver-laps-compare-placeholder {
cursor: default;
}
.driver-laps-compare-check input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.driver-laps-compare-check > span {
display: block;
margin: 0;
width: 1.25rem;
height: 1.25rem;
border: 2px solid rgba(255, 255, 255, 0.35);
background-color: rgba(255, 255, 255, 0.05);
border-radius: 4px;
position: relative;
transition:
border-color var(--transition-fast),
background-color var(--transition-fast);
}
/* In light mode, the alpha-white borders/bg are invisible on light
surfaces — use a darker fallback so the empty box stays visible. */
html:not(.dark-theme) .driver-laps-compare-check > span {
border-color: rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, 0.03);
}
.driver-laps-compare-check:hover > span {
border-color: var(--color-secondary);
background-color: rgba(var(--color-secondary-rgb), 0.15);
}
.driver-laps-compare-check input:checked + span {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
}
.driver-laps-compare-check input:checked + span::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 6px;
height: 11px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.driver-laps-compare-check.is-locked {
opacity: 0.35;
cursor: not-allowed;
}
.driver-laps-compare-check.is-locked > span {
border-color: var(--color-border);
}
/* ── Floating selection bar ─────────────────────────────────── */
.cmp-bar {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
width: 28rem;
max-width: calc(100vw - 3rem);
background-color: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: calc(var(--radius) * 1.5);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
padding: 0.75rem 1rem;
display: flex;
align-items: stretch;
gap: 0.875rem;
z-index: 1040;
transform: translateY(calc(100% + 2rem));
transition: transform 0.25s ease, opacity 0.25s ease;
opacity: 0;
pointer-events: none;
}
/* Make the compare bar more prominent */
.cmp-bar {
box-shadow:
0 0 0 1px rgba(var(--color-secondary-rgb), 0.4),
0 12px 40px rgba(0, 0, 0, 0.55),
0 0 32px rgba(var(--color-secondary-rgb), 0.25);
border-left: 4px solid var(--color-secondary);
background-color: #1f2230;
}
.cmp-bar::before {
content: "Compare telemetry";
position: absolute;
top: -0.625rem;
left: 1rem;
padding: 0.125rem 0.5rem;
background-color: var(--color-secondary);
color: white;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.cmp-bar.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.cmp-bar-slots {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 0.375rem;
min-width: 0;
}
.cmp-bar-slot {
flex: 1 1 0;
min-width: 0;
padding: 0.5rem 0.75rem;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: 0.8125rem;
line-height: 1.3;
}
.cmp-bar-slot-empty {
color: var(--color-text-muted);
font-style: italic;
}
.cmp-bar-slot-line1 {
font-weight: 600;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cmp-bar-slot-line2 {
display: flex;
gap: 0.5rem;
align-items: baseline;
color: var(--color-text-muted);
font-size: 0.75rem;
}
.cmp-bar-slot-car {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
min-width: 0;
}
.cmp-bar-slot-time {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
font-weight: 600;
color: var(--color-text);
flex: 0 0 auto;
}
.cmp-bar-vs {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-text-muted);
flex: 0 0 auto;
align-self: center;
}
.cmp-bar-actions {
display: flex;
flex-direction: column;
gap: 0.375rem;
flex: 0 0 auto;
align-self: center;
padding-left: 0.875rem;
border-left: 1px solid var(--color-border);
}
.cmp-bar-clear,
.cmp-bar-compare {
padding: 0.5rem 1rem;
border-radius: var(--radius);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--color-border);
transition:
background-color var(--transition-fast),
border-color var(--transition-fast);
}
.cmp-bar-clear {
background-color: transparent;
color: var(--color-text);
}
.cmp-bar-clear:hover {
background-color: var(--table-row-hover);
}
.cmp-bar-compare {
background-color: var(--color-secondary);
color: white;
border-color: var(--color-secondary);
}
.cmp-bar-compare:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.cmp-bar-compare:not(:disabled):hover {
filter: brightness(1.1);
}
/* ── Compare modal ──────────────────────────────────────────── */
.cmp-modal {
position: fixed;
inset: 0;
z-index: 1050;
display: none;
}
.cmp-modal.is-open {
display: block;
}
body.cmp-modal-open {
overflow: hidden;
}
.cmp-modal-backdrop {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.65);
}
.cmp-modal-dialog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(1200px, calc(100vw - 2rem));
max-height: calc(100vh - 2rem);
background-color: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: calc(var(--radius) * 1.5);
display: flex;
flex-direction: column;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.cmp-modal-header-bar {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.25rem 1.5rem 0.75rem;
border-bottom: 1px solid var(--color-border);
}
.cmp-modal-head {
flex: 1 1 auto;
min-width: 0;
}
.cmp-modal-title {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--color-text);
margin-bottom: 0.5rem;
}
.cmp-modal-lapinfo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.cmp-modal-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 999px;
font-size: 0.8125rem;
}
.cmp-modal-chip-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex: 0 0 auto;
}
.cmp-modal-chip-a .cmp-modal-chip-dot { background-color: #e03030; }
.cmp-modal-chip-b .cmp-modal-chip-dot { background-color: #3a9cff; }
.cmp-modal-chip-car {
color: var(--color-text);
font-weight: 500;
}
.cmp-modal-chip-time {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
font-weight: 700;
color: var(--color-text);
}
.cmp-modal-vs {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-text-muted);
}
.cmp-modal-close {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: transparent;
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-text);
font-size: 1.25rem;
cursor: pointer;
padding: 0;
line-height: 1;
}
.cmp-modal-close:hover {
background-color: var(--table-row-hover);
}
.cmp-modal-warn {
display: flex;
align-items: center;
gap: 0.625rem;
margin: 0.75rem 1.5rem 0;
padding: 0.75rem 1rem;
background-color: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.4);
border-radius: var(--radius);
color: #f5a623;
font-size: 0.875rem;
}
.cmp-modal-warn i {
flex: 0 0 auto;
font-size: 1rem;
}
.cmp-modal-toggles {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
padding: 0.75rem 1.5rem;
border-bottom: 1px solid var(--color-border);
}
.cmp-modal-toggle {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: var(--color-text);
cursor: pointer;
user-select: none;
}
.cmp-modal-toggle input[type="checkbox"] {
cursor: pointer;
accent-color: var(--color-secondary);
}
.cmp-modal-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 1rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.cmp-modal-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 4rem 1rem;
color: var(--color-text-muted);
}
/* ── Metric charts ──────────────────────────────────────────── */
.cmp-metric-wrap {
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 0.5rem 0.75rem;
}
.cmp-metric-chart {
display: block;
width: 100%;
height: auto;
}
.cmp-chart-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
fill: var(--color-text-muted);
}
.cmp-chart-gridline {
stroke: var(--color-border);
stroke-width: 1;
stroke-dasharray: 2 3;
opacity: 0.5;
}
.cmp-chart-ylabel,
.cmp-chart-xlabel {
font-size: 10px;
fill: var(--color-text-muted);
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
}
.cmp-chart-line {
fill: none;
stroke-width: 1.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.cmp-chart-line-a {
stroke: #e03030;
}
.cmp-chart-line-b {
stroke: #3a9cff;
}
/* ── Mobile adjustments ─────────────────────────────────────── */
@media (max-width: 767.98px) {
.cmp-bar {
right: 0.5rem;
left: 0.5rem;
bottom: 0.5rem;
width: auto;
max-width: none;
transform: translateY(calc(100% + 1rem));
}
.cmp-bar.is-visible {
transform: translateY(0);
}
.cmp-bar-actions {
flex-direction: row;
}
.cmp-modal-header-bar {
padding: 1rem 1rem 0.5rem;
}
.cmp-modal-toggles {
padding: 0.5rem 1rem;
}
.cmp-modal-body {
padding: 0.75rem 1rem 1rem;
}
.driver-laps-compare-check,
.driver-laps-compare-placeholder {
width: 2.5rem;
padding: 0;
}
}
/* ╔══════════════════════════════════════════════════════════════╗
║ MY BEST LAPS — compare hint banner ║
╚══════════════════════════════════════════════════════════════╝ */
.myranks-best-laps-hint {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 1rem;
padding: 0.625rem 0.875rem;
background-color: rgba(var(--color-secondary-rgb), 0.08);
border-left: 3px solid var(--color-secondary);
border-radius: var(--radius);
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.4;
}
.myranks-best-laps-hint i {
color: var(--color-secondary);
flex: 0 0 auto;
}
.myranks-best-laps-hint strong {
color: var(--color-text);
font-weight: 600;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ SINGLE TELEMETRY PANEL — inline, consistent with compare ║
╚══════════════════════════════════════════════════════════════╝ */
/* Replaces the old iframe-based .driver-laps-tele-iframe approach.
Shares the SVG chart rendering with the compare modal so the
visual language is consistent across single and compare views. */
.tele-single {
padding: 1rem 1.25rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.tele-single-head {
display: flex;
align-items: center;
gap: 0.75rem;
}
.tele-single-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 999px;
font-size: 0.8125rem;
}
.tele-single-chip-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #e03030;
flex: 0 0 auto;
}
.tele-single-chip-car {
color: var(--color-text);
font-weight: 500;
}
.tele-single-chip-time {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
font-weight: 700;
color: var(--color-text);
}
/* "Track map & full view" link — opens the original server-rendered
telemetry page in a new tab, where the track map is included. */
.tele-single-open {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background-color: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius);
color: var(--color-text);
font-size: 0.8125rem;
text-decoration: none;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast);
}
.tele-single-open:hover {
background-color: var(--table-row-hover);
border-color: var(--color-secondary);
color: var(--color-text);
text-decoration: none;
}
.tele-single-open i {
color: var(--color-text-muted);
font-size: 0.75rem;
}
.tele-single-toggles {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
padding: 0.5rem 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.tele-single-toggle {
display: inline-flex !important;
align-items: center;
gap: 0.375rem;
margin-bottom: 0 !important;
font-size: 0.8125rem;
color: var(--color-text);
cursor: pointer;
user-select: none;
}
.tele-single-toggle input[type="checkbox"] {
cursor: pointer;
accent-color: var(--color-secondary);
}
.tele-single-body {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* Ensure the old iframe style doesn't accidentally apply (legacy CSS is kept
in place for backwards compat in case anyone else uses the class). */
.driver-laps-tele-panel.is-open .tele-single {
/* no-op — just scoping */
}
/* ═══════════════════════════════════════════════════════════════
PATCH 37 — "VS LEADERBOARD BEST" BUTTON + TOAST + DRIVER CHIP
─────────────────────────────────────────────────────────────── */
/* Trophy button next to the telemetry button. Uses a warm amber
accent to read as an achievement-adjacent action, distinct from
the red "show telemetry" button while staying in the same family. */
.driver-laps-vs-best-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.625rem;
margin-left: 0.375rem;
background-color: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.35);
border-radius: var(--radius);
color: #f59e0b;
cursor: pointer;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast),
opacity var(--transition-fast);
}
/* Collapse padding when the time span is empty (initial / unresolved). */
.driver-laps-vs-best-btn:has(.driver-laps-vs-best-time:empty) {
padding: 0;
width: 2.5rem;
}
.driver-laps-vs-best-time {
font-weight: 600;
letter-spacing: 0.01em;
}
.driver-laps-vs-best-btn:hover:not(.is-loading):not(.is-disabled) {
background-color: rgba(245, 158, 11, 0.22);
border-color: #f59e0b;
}
.driver-laps-vs-best-btn.is-loading {
cursor: default;
opacity: 0.75;
}
.driver-laps-vs-best-btn.is-disabled {
cursor: not-allowed;
opacity: 0.5;
/* keep colors so the trophy is still recognizable */
}
/* Self-top-1: slightly brighter trophy to read as "yours" rather than "unavailable". */
.driver-laps-vs-best-btn.is-self {
background-color: rgba(245, 158, 11, 0.18);
border-color: rgba(245, 158, 11, 0.5);
opacity: 0.85;
}
.driver-laps-vs-best-btn.is-self .fa-trophy {
color: #fbbf24;
}
/* Tighter gap on narrow screens so row doesn't wrap awkwardly. */
@media (max-width: 600px) {
.driver-laps-vs-best-btn {
margin-left: 0.25rem;
min-width: 2.25rem;
height: 2.25rem;
padding: 0 0.5rem;
font-size: 0.8125rem;
}
.driver-laps-vs-best-btn:has(.driver-laps-vs-best-time:empty) {
width: 2.25rem;
padding: 0;
}
}
/* Toast notification — bottom center, auto-dismiss. Used by the
vs-best feature for soft errors ("no one else has driven this car"
etc.) without interrupting the page. */
.myranks-toast {
position: fixed;
left: 50%;
bottom: 5rem;
transform: translateX(-50%) translateY(1rem);
background: var(--color-surface, #1a1e2a);
color: var(--color-text, #e8eaf0);
border: 1px solid var(--color-border, rgba(255,255,255,0.12));
border-radius: var(--radius);
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 10000;
max-width: calc(100vw - 2rem);
text-align: center;
}
.myranks-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Driver name on the compare-chip (shown when comparing with a
leaderboard lap — your own lap's chip omits the driver field). */
.cmp-modal-chip-driver {
font-weight: 600;
margin-right: 0.25rem;
}
.cmp-modal-chip-driver::after {
content: "·";
margin-left: 0.375rem;
opacity: 0.5;
}