/* theme.css v2.0 | bun/public/css/theme.css v2.0: autofilled login field text color (dark only). v1.9: login card, focused code/email field: the dark theme has the same blue border all around as the light one (was line-colored on the field). v1.8: .alert-info / .alert-light dark rules removed from 3c; every page CSS that shows alerts reads --theme-info-* / --theme-note-* itself. v1.7: index, pricing and the public components (footer, liveRaces, authToggle, section-news, logo, brand); dark-only rules in 3e. v1.6: bot-entry page (title gradient). v1.5: tags page, selection bar, reader and contact modals. v1.4: races page (races.css, readers.css, modal-sch, sch-memo). v1.3: export and certificate panels (they follow data-bs-theme now); Bootstrap and script dark overrides moved here from common.css. v1.2: results and selection pages, view-bar, tooltip-lap, contextMenu. v1.1: start page tokens (start, start-header, start-connection, simple-tooltip). v1.0: account pages (profile, entry). */ /* Site theme. Loaded on every page right after Bootstrap (header.ejs), before common.css. Two layers: 1. Palette (--palette-*) - raw light-theme colors. Used ONLY in this file. 2. Semantic (--theme-*) - what a color is for. Page CSS uses only these, never a hex value. Dark theme = the same --theme-* names with other values under [data-bs-theme="dark"] on (set by partials/theme-init.ejs). Dark values are the approved night palette; the --cg-* variables in common.css are now aliases of these tokens. The prefix is --theme-*, not --color-*: several page files declare their own --color-* with different values, and this file is global. Rules: - a new color need -> add a token here, never a hex in a page file; - rgba() in a page file: rgba(var(--theme-shadow-rgb), 0.1); - migrated files: account-styles, profile, entry, empty-states, modal-qrcode, start, start-header, start-connection, simple-tooltip, view-bar, tooltip-lap, contextMenu, results, results-tables, modal-results, selection. - "initial" as a light value makes the token undefined, so the rule's fallback applies: var(--theme-note-text, inherit). Check: grep -c "#[0-9a-fA-F]\{3,6\}" -> 0. */ /* ========================================================================== 1. PALETTE (raw values, this file only) ========================================================================== */ :root { --palette-white: #ffffff; /* Neutrals */ --palette-gray-75: #f8f9fa; --palette-gray-100: #e9ecef; --palette-gray-150: #e5e7eb; --palette-gray-500: #6c757d; --palette-gray-600: #495057; --palette-gray-700: #374151; /* Slate (cards, borders, neutral race states) */ --palette-slate-50: #f1f5f9; --palette-slate-60: #f1f5f8; --palette-slate-80: #ebf1f5; --palette-slate-300: #cbd5e1; --palette-slate-400: #94a3b8; --palette-slate-500: #64748b; --palette-slate-600: #475569; --palette-slate-700: #334155; /* Steel (secondary buttons, spinner, QR close button) */ --palette-steel-400: #8ca4b5; --palette-steel-500: #7c97ab; --palette-steel-600: #6c8ba0; --palette-steel-700: #516377; --palette-steel-800: #3e4c5b; /* Brand blue */ --palette-blue-100: #dbeafe; --palette-blue-500: #3498db; --palette-blue-600: #2980b9; --palette-blue-700: #2471a3; --palette-blue-800: #1e6091; --palette-blue-850: #1f618d; /* Info alert */ --palette-info-50: #e3f2fd; --palette-info-100: #bbdefb; --palette-info-800: #1565c0; /* Bootstrap blue (glowing memo icon), with alpha variants */ --palette-bs-blue: #0d6efd; --palette-bs-blue-a67: #0d6efdaa; --palette-bs-blue-light: #66b2ff; --palette-bs-blue-light-a40: #66b2ff66; /* Badge blues */ --palette-sky-600: #0284c7; --palette-sky-800: #075985; --palette-royal-700: #1d4ed8; --palette-royal-900: #1e3a8a; /* Indigo / purple (empty states) */ --palette-indigo-25: #f8f9ff; --palette-indigo-50: #eef2ff; --palette-indigo-150: #c8d4e8; --palette-indigo-500: #6366f1; --palette-purple-500: #a855f7; /* Violet (subscribe / notify) */ --palette-violet-50: #eeedfe; --palette-violet-100: #e4e2fd; --palette-violet-300: #a097ff; --palette-violet-500: #7f74ff; --palette-violet-600: #665be3; --palette-violet-700: #5a52a5; --palette-violet-800: #4a4190; /* Teal (primary action buttons) */ --palette-teal-600: #2c8d9e; --palette-teal-700: #247a8a; --palette-teal-800: #1d6775; /* Aqua (no-chip card, cyan race state) */ --palette-aqua-50: #f0fdfa; --palette-aqua-400: #2dd4bf; --palette-aqua-600: #0d9488; --palette-aqua-700: #0f766e; --palette-aqua-800: #115e59; /* Green */ --palette-green-60: #e8f5e8; --palette-green-100: #d1e7dd; --palette-green-200: #c3e6c3; --palette-green-550: #28a745; --palette-green-600: #198754; --palette-green-900: #155724; --palette-jade-600: #0f8a6f; --palette-emerald-700: #047857; /* Yellow / amber */ --palette-yellow-100: #fff9c4; --palette-yellow-200: #fff59d; --palette-yellow-700: #fbc02d; --palette-amber-400: #fbbf24; --palette-amber-500: #f59e0b; /* Orange */ --palette-orange-50: #fff7ed; --palette-orange-300: #fdba74; --palette-orange-400: #fe913a; --palette-orange-500: #fd7e14; --palette-orange-600: #e36f10; /* Red / rose */ --palette-red-50: #fef2f2; --palette-red-60: #feecec; --palette-red-550: #e61e1e; --palette-rose-200: #fecdd3; --palette-rose-400: #fb7185; --palette-rose-600: #e11d48; --palette-rose-700: #be123c; /* ---- v1.1: start page ---- */ /* Neutrals */ --palette-gray-200: #dee2e6; --palette-gray-560: #555555; --palette-gray-650: #4b5563; --palette-gray-900: #212529; --palette-slate-25: #f8fafc; --palette-slate-200: #e2e8f0; --palette-slate-250: #cdd5e0; /* Blues */ --palette-blue-50: #eaf4f9; --palette-blue-950: #0d47a1; --palette-bs4-blue: #007bff; --palette-bs-focus: #86b7fe; /* Bootstrap focus border of form controls */ --palette-azure-50: #ebf8ff; --palette-azure-300: #90cdf4; --palette-azure-700: #2b6cb0; /* Reds */ --palette-red-100: #f8d7da; --palette-red-150: #f5a3a3; --palette-red-560: #e74c3c; --palette-red-700: #c0392b; --palette-red-900: #721c24; --palette-bs-red: #dc3545; /* Yellows */ --palette-yellow-50: #ffffd0; --palette-yellow-400: #ffdb4d; --palette-amber-100: #fff3cd; --palette-amber-450: #ffb300; --palette-amber-900: #856404; --palette-bs-yellow: #ffc107; /* Greens */ --palette-green-40: #f0fff4; --palette-green-250: #a3e4b8; --palette-green-300: #9ae6b4; --palette-green-580: #1f9d57; --palette-green-800: #276749; /* Orange (map / GPS) */ --palette-orange-700: #ea580c; /* Climate badges (same values as climateStatus.js) */ --palette-scarlet-50: #fff1f0; --palette-scarlet-300: #ffa39e; --palette-scarlet-700: #cf1322; --palette-cobalt-50: #f0f5ff; --palette-cobalt-300: #adc6ff; --palette-cobalt-700: #1d39c4; --palette-teal-50: #e6fffb; --palette-teal-300: #87e8de; --palette-teal-650: #08979c; /* ---- v1.2: results, selection, shared start files ---- */ --palette-slate-800: #1e293b; --palette-red-750: #d32f2f; --palette-cyan-600: #0891b2; --palette-amber-700: #b45309; --palette-amber-600: #d97706; --palette-amber-300: #fcd34d; --palette-gray-800: #1f2937; --palette-gray-300: #d1d5db; --palette-gray-50: #f3f4f6; --palette-red-850: #991b1b; --palette-amber-40: #fffbeb; --palette-amber-800: #92400e; --palette-green-45: #f0fdf4; --palette-green-850: #166534; --palette-gray-120: #e6e9ee; --palette-gray-130: #dfe3ea; --palette-slate-350: #9aa5b3; --palette-gray-60: #f1f3f7; --palette-gray-350: #ced4da; --palette-gray-140: #d4dae3; --palette-gray-65: #eef1f5; --palette-green-70: #e6f5ee; --palette-green-880: #136e3e; --palette-gray-400: #9ca3af; --palette-blue-650: #2563eb; --palette-blue-300: #93c5fd; --palette-green-650: #16a34a; --palette-purple-450: #8b5cf6; --palette-purple-600: #7c3aed; --palette-google-500: #4285f4; --palette-google-600: #1a73e8; --palette-red-500: #ef4444; --palette-red-800: #b91c1c; --palette-gray-450: #949ba1; --palette-sky-25: #f0f9ff; --palette-cyan-100: #d1ecf1; --palette-cyan-900: #0c5460; --palette-sky-100: #e0f2fe; --palette-sky-200: #bae6fd; --palette-sky-500: #0ea5e9; --palette-ice-25: #f8fcfd; --palette-bs-blue-a53: #0d6efd88; --palette-bs-blue-light-a67: #66b2ffaa; --palette-cyan-500: #17a2b8; --palette-green-120: #d4edda; --palette-slate-850: #2c3e50; --palette-gold-400: #ffd700; --palette-gold-300: #ffed4e; --palette-steel-550: #6a8494; --palette-steel-450: #7d96a6; --palette-gray-470: #95a5a6; --palette-bluegray-600: #546e7a; --palette-bluegray-700: #455a64; --palette-bluegray-100: #cfd8dc; --palette-bluegray-500: #607d8b; --palette-bluegray-800: #37474f; --palette-bluegray-900: #263238; --palette-amber-350: #ffca28; --palette-green-560: #27ae60; --palette-orange-800: #d35400; --palette-orange-450: #e67e22; --palette-purple-700: #8e44ad; --palette-brown-500: #795548; --palette-slate-750: #34495e; --palette-green-610: #16a085; --palette-gray-520: #7f8c8d; /* ---- v1.3: export and certificate panels ---- */ --palette-blue-450: #3b82f6; --palette-blue-70: #e2efff; --palette-blue-40: #eff6ff; --palette-slate-900: #0f172a; --palette-sky-400: #38bdf8; --palette-cream-100: #fef3c7; --palette-brown-900: #78350f; --palette-silver-300: #cccccc; --palette-ink-700: #333333; --palette-silver-400: #bbbbbb; --palette-steel-100: #d1d9e4; --palette-ink-900: #1a1a1a; --palette-cyan-bs: #0dcaf0; --palette-gray-410: #adb5bd; --palette-black-pure: #000000; --palette-gray-40: #f5f5f5; --palette-red-780: #a93226; --palette-gray-555: #6b7280; --palette-green-620: #2d8b57; --palette-red-620: #dc2626; --palette-orange-650: #f57c00; --palette-pink-600: #d81b60; --palette-gray-260: #e0e0e0; --palette-gray-666: #666666; --palette-green-700b: #1e824c; --palette-green-800b: #1a7043; --palette-green-900b: #155c37; --palette-orange-500b: #f39c12; --palette-gray-50b: #f9fafb; --palette-mint-150: #c3e1d1; --palette-amber-200b: #ffe8a1; --palette-teal-900b: #185766; --palette-mint-250: #a3cfbb; --palette-mint-350: #75b798; --palette-sky-70: #e6f3ff; --palette-gray-420: #adadad; --palette-red-pure: #ff0000; --palette-gray-480b: #a0a5aa; --palette-mint-25: #f2fff4; --palette-amber-50b: #fff8e1; --palette-gray-320b: #d3d3d3; --palette-gray-45b: #f1f3f5; --palette-blue-45: #eaf2f8; /* ---- v1.7: index, pricing and public components ---- */ --palette-ice-50: #f5f7fb; --palette-ice-100: #eaf0f8; --palette-ice-75: #f1f4f9; --palette-ink-950: #0d1624; --palette-ink-500: #475467; --palette-ink-300: #7b8798; --palette-azure-600: #1a6fd6; --palette-azure-400: #3aa0ff; --palette-flame-500: #ff7a1a; --palette-flame-300: #ffb020; --palette-emerald-600: #12b76a; --palette-navy-900: #082754; --palette-navy-600: #0f4fa8; --palette-azure-200: #9fd6ff; --palette-flame-600: #ff5a2a; --palette-emerald-300: #6ce9a6; --palette-azure-720: #1257ad; --palette-sky-300: #5cc3ff; --palette-emerald-400: #32d583; --palette-violet-400: #a78bfa; --palette-lime-500: #4cd964; --palette-ice-200: #e8ecf0; --palette-navy-700: #1e3a5f; --palette-amber-300b: #ffc76a; --palette-amber-450b: #ffa21a; } /* ========================================================================== 2. SEMANTIC TOKENS - LIGHT (default) Tokens not repeated in section 3 keep the same value in the dark theme. ========================================================================== */ :root { /* Surfaces */ --theme-page: var(--palette-white); /* page background (--cg-bg) */ --theme-surface: var(--palette-white); /* panels, modal footers, QR fields (--cg-surface) */ --theme-surface-muted: var(--palette-slate-50); /* hovered consent label (--cg-bg-alt) */ --theme-surface-raised: var(--palette-gray-75); /* consent-given side cells (--cg-surface-2) */ --theme-surface-inset: var(--palette-slate-60); /* QR modal body */ --theme-surface-hover: var(--palette-gray-100); /* QR modal buttons on hover */ --theme-card: var(--palette-slate-60); /* athlete and race cards */ --theme-card-hover: var(--palette-slate-80); --theme-card-shadow-hover: 0 0.5rem 1rem rgba(124, 151, 171, 0.25); --theme-field: var(--palette-white); /* inputs inside cards */ --theme-overlay: rgba(255, 255, 255, 0.9); /* race card loader */ --theme-header: linear-gradient(135deg, var(--palette-blue-600), var(--palette-blue-800)); /* --cg-header */ /* Text */ --theme-text: var(--palette-gray-700); --theme-text-emphasis: var(--palette-gray-600); /* empty-state title, chip code fields */ --theme-text-muted: var(--palette-gray-500); /* empty-state subtitle (--cg-text-2) */ --theme-text-faint: var(--palette-gray-500); /* --cg-text-3 */ --theme-text-control: var(--palette-gray-500); /* QR modal buttons */ --theme-icon-muted: var(--palette-gray-500); /* race date icons */ --theme-on-accent: var(--palette-white); /* text and icons on colored backgrounds */ --theme-on-accent-rgb: 255, 255, 255; /* Lines and borders */ --theme-line: var(--palette-slate-300); /* QR fields (--cg-line) */ --theme-line-header: var(--palette-gray-150); /* QR modal header bottom */ --theme-border: var(--palette-slate-300); /* cards, fields, checkboxes */ --theme-border-soft: var(--palette-blue-100); /* gender cards, consent label */ --theme-border-hover: var(--palette-steel-600); /* hovered cards */ --theme-border-dashed: var(--palette-indigo-150); /* empty state */ /* Brand */ --theme-brand: var(--palette-blue-600); /* icons, links, selected gender, QR header */ --theme-brand-hover: var(--palette-blue-700); --theme-brand-bright: var(--palette-blue-600); /* --cg-brand */ --theme-brand-light: var(--palette-blue-600); /* QR button hover (--cg-brand-2) */ --theme-focus-rgb: 41, 128, 185; /* focus rings and brand tints, same in both themes */ --theme-field-focus-border: rgba(var(--theme-focus-rgb), 0.5); /* QR field */ /* Primary action (teal) */ --theme-action: var(--palette-teal-600); --theme-action-rgb: 44, 141, 158; --theme-action-border: var(--palette-teal-700); --theme-action-hover: var(--palette-teal-700); --theme-action-active: var(--palette-teal-800); /* Secondary buttons */ --theme-secondary: var(--palette-steel-500); --theme-secondary-border: var(--palette-steel-600); --theme-secondary-hover: var(--palette-steel-400); --theme-secondary-active: var(--palette-steel-600); --theme-slate: var(--palette-steel-700); /* QR close button */ --theme-slate-hover: var(--palette-steel-800); --theme-slate-rgb: 81, 99, 119; /* Status and validation */ --theme-success: var(--palette-jade-600); --theme-success-ring: rgba(22, 160, 133, 0.25); --theme-danger: var(--palette-red-550); --theme-danger-ring: rgba(230, 30, 30, 0.25); --theme-danger-bg: var(--palette-red-60); /* invalid checkbox */ /* Alerts (memo partials, chip swap modal) */ --theme-info-bg: linear-gradient(135deg, var(--palette-info-50), var(--palette-info-100)); --theme-info-text: var(--palette-info-800); --theme-note-bg: linear-gradient(135deg, var(--palette-yellow-100), var(--palette-yellow-200)); --theme-note-accent: var(--palette-yellow-700); /* Glowing memo icon */ --theme-glow-from: var(--palette-bs-blue); --theme-glow-from-shadow: var(--palette-bs-blue-a67); --theme-glow-to: var(--palette-bs-blue-light); --theme-glow-to-shadow: var(--palette-bs-blue-light-a40); /* Native date picker icon */ --theme-picker-filter: none; /* Shadows: rgba(var(--theme-shadow-rgb), alpha) */ --theme-shadow-rgb: 0, 0, 0; /* Race card states (entry.css) */ --theme-race-success-bg: var(--palette-green-100); --theme-race-success-border: var(--palette-green-600); --theme-race-success-shadow-hover: none; --theme-race-orange-bg: var(--palette-orange-50); --theme-race-orange-border: var(--palette-orange-300); --theme-race-rose-bg: var(--palette-red-50); --theme-race-rose-border: var(--palette-rose-200); --theme-race-slate-bg: var(--palette-slate-50); --theme-race-slate-border: var(--palette-slate-400); --theme-race-cyan-bg: var(--palette-aqua-50); --theme-race-cyan-border: var(--palette-aqua-400); --theme-race-cyan-shadow: 0 4px 6px -1px rgba(45, 212, 191, 0.15); --theme-race-cyan-shadow-hover: var(--theme-race-cyan-shadow); --theme-race-pending-bg: var(--palette-violet-50); --theme-race-pending-border: var(--palette-violet-300); --theme-race-pending-bg-hover: var(--palette-violet-100); --theme-race-pending-border-hover: var(--palette-violet-500); --theme-race-pending-shadow-hover: rgba(127, 116, 255, 0.2); /* Outline badges on race cards; *-deep = on slate cards */ --theme-badge-distance: var(--palette-emerald-700); --theme-badge-sport: var(--palette-royal-700); --theme-badge-primary: var(--palette-sky-600); --theme-badge-secondary: var(--palette-slate-500); --theme-badge-sport-deep: var(--palette-royal-900); --theme-badge-primary-deep: var(--palette-sky-800); --theme-badge-secondary-deep: var(--palette-slate-700); /* Race status message cards (same in both themes) */ --theme-conflict-from: var(--palette-orange-400); --theme-conflict-to: var(--palette-orange-500); --theme-conflict-border: var(--palette-orange-600); --theme-timezone-from: var(--palette-slate-400); --theme-timezone-to: var(--palette-slate-500); --theme-timezone-border: var(--palette-slate-600); --theme-ineligible-from: var(--palette-rose-400); --theme-ineligible-to: var(--palette-rose-600); --theme-ineligible-border: var(--palette-rose-700); --theme-nochip-from: var(--palette-aqua-600); --theme-nochip-to: var(--palette-aqua-700); --theme-nochip-border: var(--palette-aqua-800); --theme-nochip-shadow-hover: rgba(13, 148, 136, 0.3); /* Loader, number mosaic, notify button (same in both themes) */ --theme-spinner: var(--palette-steel-500); --theme-spinner-track: rgba(124, 151, 171, 0.15); --theme-mosaic: var(--palette-green-600); --theme-notify: var(--palette-violet-500); --theme-notify-hover: var(--palette-violet-600); --theme-notify-active: var(--palette-violet-700); --theme-notify-active-hover: var(--palette-violet-800); /* Empty states */ --theme-empty-bg: linear-gradient(135deg, var(--palette-indigo-25) 0%, var(--palette-indigo-50) 100%); --theme-empty-grad-yellow: linear-gradient(135deg, var(--palette-amber-400) 0%, var(--palette-amber-500) 100%); --theme-empty-grad-purple: linear-gradient(135deg, var(--palette-indigo-500) 0%, var(--palette-purple-500) 100%); --theme-empty-grad-primary: linear-gradient(135deg, var(--palette-blue-500) 0%, var(--palette-blue-850) 100%); --theme-empty-badge-bg: var(--palette-green-60); --theme-empty-badge-text: var(--palette-green-900); --theme-empty-badge-border: var(--palette-green-200); --theme-empty-btn: var(--palette-indigo-500); --theme-empty-btn-shadow: rgba(99, 102, 241, 0.3); --theme-empty-dot: var(--palette-green-550); /* QR code: always dark-on-white so it scans in both themes */ --theme-qr-bg: var(--palette-white); --theme-qr-frame: var(--palette-slate-300); /* ---- v1.1: start page ---- */ /* Text */ --theme-heading: var(--palette-gray-900); /* race name, connection titles (--text-dark) */ --theme-meta-text: var(--palette-gray-560); /* race meta row, toggle icon (--text-muted) */ /* Start page blue: keeps its light value in the dark theme, unlike --theme-brand */ --theme-accent: var(--palette-blue-600); /* checkboxes, start toggle, view-bar track */ --theme-accent-hover: var(--palette-blue-500); --theme-accent-tint: var(--palette-blue-50); /* highlighted row, active chips */ --theme-accent-text: var(--palette-blue-950); /* text on --theme-accent-tint */ --theme-idle: var(--palette-steel-500); /* RSSI dot, "not started" */ --theme-stop: var(--palette-red-700); /* stop side of the start toggle */ --theme-stop-hover: var(--palette-red-560); --theme-mark: var(--palette-amber-450); /* bar on the highlighted row */ --theme-finish: var(--palette-green-580); /* "finished" chip dot */ /* Participant checkboxes (unchecked; checked uses --theme-accent) */ --theme-check-bg: var(--palette-white); --theme-check-border: var(--palette-gray-200); --theme-check-border-focus: var(--palette-bs-focus); /* Start / stop toggle */ --theme-toggle-track: linear-gradient(145deg, var(--palette-slate-200), var(--palette-slate-250)); --theme-toggle-track-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2), inset 0 -2px 4px rgba(255, 255, 255, 0.7); --theme-toggle-text: var(--palette-slate-500); --theme-toggle-text-hover: var(--palette-slate-700); /* DSQ / DNF rows: -row paints the , -bg and -text paint the cells */ --theme-row-danger-row: var(--palette-red-100); --theme-row-danger-bg: var(--palette-red-100); --theme-row-danger-text: var(--palette-red-900); --theme-row-warning-row: var(--palette-amber-100); --theme-row-warning-bg: var(--palette-amber-100); --theme-row-warning-text: var(--palette-amber-900); --theme-row-flash: var(--palette-yellow-50); /* updated row (tableRenderer.js) */ /* Bootstrap tooltips on the start / stop buttons */ --theme-tooltip-primary: var(--palette-bs4-blue); --theme-tooltip-danger: var(--palette-bs-red); /* simple-tooltip.css arrow fallbacks; tooltips that set their own --background / --border (tooltip-lap.css) handle the dark theme */ --theme-tooltip-bg: var(--palette-white); --theme-tooltip-border: var(--palette-slate-200); /* Race header card and neutral chips */ --theme-outline-faint: rgba(0, 0, 0, 0.06); /* race header card */ --theme-chip-text: var(--palette-slate-600); /* race badges, reader count, PRO badge */ --theme-chip-border: var(--palette-slate-300); --theme-chip-bg: var(--palette-slate-50); /* PRO badge */ --theme-map-accent: var(--palette-orange-700); /* map icon, GPS button hover */ --theme-map-accent-rgb: 234, 88, 12; /* Connection panel */ --theme-status-online: var(--palette-green-550); --theme-status-online-rgb: 40, 167, 69; --theme-status-online-soft: var(--palette-green-250); /* heartbeat bar bottom */ --theme-status-offline: var(--palette-bs-red); --theme-status-offline-rgb: 220, 53, 69; --theme-status-offline-soft: var(--palette-red-150); --theme-status-connecting: var(--palette-bs-yellow); --theme-status-connecting-rgb: 255, 193, 7; --theme-status-connecting-glow: var(--palette-yellow-400); --theme-outline: rgba(0, 0, 0, 0.1); /* indicators, popover border and divider */ --theme-popover-bg: rgba(255, 255, 255, 0.98); --theme-popover-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); --theme-scrollbar: var(--palette-slate-300); --theme-item-bg: var(--palette-white); /* reader item */ --theme-item-border: rgba(0, 0, 0, 0.08); --theme-item-border-hover: var(--palette-blue-500); --theme-divider-soft: var(--palette-slate-50); /* reader header, climate row */ --theme-bar-empty: var(--palette-gray-100); /* heartbeat placeholder */ --theme-channel-wifi-text: var(--palette-azure-700); --theme-channel-wifi-bg: var(--palette-azure-50); --theme-channel-wifi-border: var(--palette-azure-300); --theme-channel-lte-text: var(--palette-green-800); --theme-channel-lte-bg: var(--palette-green-40); --theme-channel-lte-border: var(--palette-green-300); --theme-channel-other-text: var(--palette-gray-650); --theme-channel-other-bg: var(--palette-slate-25); --theme-channel-other-border: var(--palette-slate-300); --theme-gps-bg: var(--palette-orange-50); --theme-gps-text: var(--palette-orange-700); --theme-gps-border: var(--palette-orange-300); /* Climate badges: light values repeat climateStatus.js */ --theme-climate-halo: 0 0 2px rgba(255, 255, 255, 0.9); --theme-climate-temp-bg: var(--palette-scarlet-50); --theme-climate-temp-text: var(--palette-scarlet-700); --theme-climate-temp-border: var(--palette-scarlet-300); --theme-climate-cold-bg: var(--palette-cobalt-50); --theme-climate-cold-text: var(--palette-cobalt-700); --theme-climate-cold-border: var(--palette-cobalt-300); --theme-climate-hum-bg: var(--palette-teal-50); --theme-climate-hum-text: var(--palette-teal-650); --theme-climate-hum-border: var(--palette-teal-300); /* ---- v1.2: results, selection, shared start files ---- */ /* Popups: tooltips, lap tooltip, context menu */ --theme-popup-bg: var(--palette-white); /* lap / note / edit-reason tooltips, context menu */ --theme-popup-border: var(--palette-slate-200); --theme-popup-rule: var(--palette-slate-200); /* edit-reason header line */ --theme-title: var(--palette-slate-800); /* tooltip text, results names, time inputs */ --theme-label: var(--palette-slate-500); /* lap labels, athlete subtitle */ --theme-tip-muted: var(--palette-slate-400); /* note labels, scrollbar hover, disabled interpolate */ --theme-tip-surface: var(--palette-slate-25); /* lap tooltip footer, scrollbar track */ --theme-tip-hover: var(--palette-slate-50); /* lap row hover */ --theme-tip-divider: var(--palette-slate-50); /* lap footer line, note separator */ --theme-tip-accent: var(--palette-blue-600); /* note tooltip title */ --theme-tip-total: var(--palette-red-750); /* total time in the lap tooltip */ --theme-lap-auto: var(--palette-cyan-600); /* auto-recovered lap icon */ --theme-lap-halo: var(--palette-white); /* halo of the lap circle digits */ --theme-lap-badge-text: var(--palette-amber-700); --theme-lap-manual-text: var(--palette-royal-700); --theme-lap-manual-rgb: 59, 130, 246; --theme-gold: var(--palette-amber-500); /* best lap, trophy icon, certificate button, DNF */ --theme-gold-rgb: 245, 158, 11; --theme-gold-light-rgb: 251, 191, 36; --theme-gold-deep: var(--palette-amber-600); --theme-gold-soft: var(--palette-amber-300); --theme-menu-text: var(--palette-gray-800); --theme-menu-border: var(--palette-gray-300); --theme-menu-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --theme-menu-shadow-mobile: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --theme-menu-hover: var(--palette-gray-50); --theme-menu-active: var(--palette-gray-150); --theme-menu-divider: var(--palette-gray-150); --theme-menu-danger-bg: var(--palette-red-50); --theme-menu-danger-text: var(--palette-red-850); --theme-menu-warning-bg: var(--palette-amber-40); --theme-menu-warning-text: var(--palette-amber-800); --theme-menu-success-bg: var(--palette-green-45); --theme-menu-success-text: var(--palette-green-850); /* View bar (start page) */ --theme-vb-bg: rgba(255, 255, 255, 0.85); --theme-vb-border: var(--palette-gray-120); --theme-vb-field-bg: var(--palette-white); /* segments, chips, search, suggestions */ --theme-vb-chip-border: var(--palette-gray-130); --theme-vb-chip-text: var(--palette-gray-560); --theme-vb-hover-border: var(--palette-steel-500); /* segment hover, reset button (no hover change in dark, as before) */ --theme-vb-focus-border: var(--palette-blue-600); /* focused search, reset hover (as before) */ --theme-vb-reset-hover-text: var(--palette-blue-600); --theme-vb-count: var(--palette-slate-350); /* counters, search icon, "shown" */ --theme-vb-count-bg: var(--palette-gray-60); --theme-vb-quiet-border: currentColor; /* counter and clear button (no visible border) */ --theme-vb-age-bg: var(--palette-gray-75); --theme-vb-age-border: var(--palette-gray-350); --theme-vb-input-border: var(--palette-gray-140); --theme-vb-soft-bg: var(--palette-gray-65); /* clear button, idle chip */ --theme-vb-divider: var(--palette-gray-60); --theme-vb-menu-text: initial; /* suggestions: inherited in light (initial = use the fallback) */ --theme-vb-finish-bg: var(--palette-green-70); --theme-vb-finish-text: var(--palette-green-880); --theme-vb-out-bg: var(--palette-red-100); --theme-vb-out-text: var(--palette-red-900); /* Results page */ --theme-accent-active: var(--palette-blue-850); /* pressed filter / edit buttons */ --theme-panel-border: var(--palette-gray-200); /* header info cards */ --theme-panel-bg: var(--palette-gray-75); /* modal footer, finish labels, info box, table head */ --theme-panel-rule: var(--palette-gray-100); --theme-res-date-text: var(--palette-gray-650); --theme-res-date-border: var(--palette-gray-400); --theme-res-sport-text: var(--palette-blue-650); /* sport badge, athlete icon */ --theme-res-sport-border: var(--palette-blue-650); --theme-res-athlete-border: var(--palette-blue-300); --theme-res-distance: var(--palette-green-650); --theme-teal: var(--palette-aqua-400); /* group-by-age button, its tooltip */ --theme-teal-deep: var(--palette-aqua-600); --theme-teal-rgb: 45, 212, 191; --theme-violet: var(--palette-purple-450); /* group-by-age pressed */ --theme-violet-deep: var(--palette-purple-600); --theme-violet-rgb: 139, 92, 246; --theme-map-blue: var(--palette-google-500); /* track map button */ --theme-map-blue-deep: var(--palette-google-600); --theme-map-blue-rgb: 66, 133, 244; --theme-alarm-gradient: linear-gradient(135deg, var(--palette-red-500) 0%, var(--palette-red-800) 100%); /* complete-race button, error header, count box */ --theme-alarm-rgb: 239, 68, 68; --theme-disabled: var(--palette-gray-500); /* disabled certificate button, cancel button */ --theme-disabled-hover: var(--palette-gray-450); --theme-row-hover: var(--palette-sky-25); --theme-row-selected-bg: var(--palette-cyan-100); --theme-row-selected-text: var(--palette-cyan-900); --theme-row-mark: var(--palette-bs-yellow); /* bar on the selected row */ --theme-row-own-bg: var(--palette-sky-100); /* the signed-in athlete row */ --theme-row-own-border: var(--palette-sky-100); --theme-row-own-hover-bg: var(--palette-sky-200); --theme-row-own-hover-border: var(--palette-sky-200); --theme-row-own-mark: var(--palette-sky-500); --theme-place-gold: rgba(255, 215, 0, 0.2); --theme-place-silver: rgba(192, 192, 192, 0.25); --theme-place-bronze: rgba(205, 127, 50, 0.2); --theme-icon-soft: var(--palette-slate-400); /* edit button icon */ --theme-sticky-head: var(--palette-gray-75); /* races list header (light = Bootstrap .table-light) */ --theme-modal-header: linear-gradient(135deg, var(--palette-blue-600) 0%, var(--palette-blue-850) 100%); --theme-inset-border: var(--palette-slate-200); /* status selector, interpolate button */ --theme-inset-text: initial; /* status selector: inherited in light */ --theme-interp-text: var(--palette-blue-600); --theme-interp-disabled-bg: var(--palette-gray-75); --theme-interp-disabled-border: var(--palette-gray-100); --theme-result-ok: var(--palette-green-600); --theme-modal-field-border: var(--palette-gray-350); /* start time, note (unchanged in dark, as before) */ --theme-modal-field-text: var(--palette-slate-800); /* start time, note (unchanged in dark, as before) */ --theme-modal-select-bg: var(--palette-white); --theme-select-focus-border: var(--palette-blue-600); --theme-fin-bg: var(--palette-ice-25); /* finish time inputs */ --theme-fin-border: var(--palette-gray-350); --theme-fin-border-focus: var(--palette-gray-350); /* labels of the focused row (unchanged in dark, as before) */ --theme-fin-split: var(--palette-gray-100); --theme-fin-label: var(--palette-steel-500); --theme-fin-flash-end: var(--palette-ice-25); /* end of the interpolation flash (same in dark, as before) */ --theme-save-disabled: var(--palette-slate-300); --theme-on-warning: var(--palette-gray-900); /* text on the yellow complete-race header */ --theme-note-text: initial; /* warning / tips boxes: inherited in light */ --theme-glow-from-shadow-2: var(--palette-bs-blue-a53); --theme-glow-to-shadow-2: var(--palette-bs-blue-light-a67); /* Race selection page */ --theme-sel-pending-bg: linear-gradient(135deg, var(--palette-amber-100) 0, var(--palette-white) 100%); --theme-sel-pending-border: var(--palette-bs-yellow); --theme-sel-completed-bg: linear-gradient(135deg, var(--palette-cyan-100) 0, var(--palette-white) 100%); --theme-sel-completed-border: var(--palette-cyan-500); --theme-sel-cancelled-bg: linear-gradient(135deg, var(--palette-red-100) 0, var(--palette-white) 100%); --theme-sel-cancelled-border: var(--palette-bs-red); --theme-sel-active-bg: linear-gradient(135deg, var(--palette-green-120) 0, var(--palette-white) 100%); --theme-sel-active-border: var(--palette-green-550); --theme-sel-pending-badge-bg: var(--palette-amber-100); --theme-sel-pending-badge-text: var(--palette-amber-900); --theme-sel-completed-badge-bg: var(--palette-cyan-100); --theme-sel-completed-badge-text: var(--palette-cyan-900); --theme-sel-cancelled-badge-bg: var(--palette-red-100); --theme-sel-cancelled-badge-text: var(--palette-red-900); --theme-sel-active-badge-bg: var(--palette-green-120); --theme-sel-active-badge-text: var(--palette-green-900); --theme-sel-creator: var(--palette-slate-850); --theme-owner-from: var(--palette-gold-400); --theme-owner-to: var(--palette-gold-300); --theme-owner-text: var(--palette-amber-900); --theme-sel-btn: var(--palette-steel-550); /* select button, confirm "secondary" */ --theme-sel-btn-hover: var(--palette-steel-450); --theme-sel-btn-disabled: var(--palette-gray-470); --theme-sel-secondary: var(--palette-steel-550); --theme-sel-secondary-rgb: 106, 132, 148; --theme-sel-wait: var(--palette-bluegray-600); --theme-sel-wait-border: var(--palette-bluegray-700); --theme-sel-wait-icon: var(--palette-bluegray-100); --theme-sel-wait-hover: var(--palette-bluegray-500); --theme-sel-timer: var(--palette-bluegray-800); --theme-sel-timer-border: var(--palette-bluegray-900); --theme-sel-timer-icon: var(--palette-amber-350); --theme-sel-active-calendar-event: var(--palette-green-560); --theme-sel-active-calendar-check: var(--palette-blue-800); --theme-sel-active-geo-alt: var(--palette-orange-800); --theme-sel-active-people: var(--palette-blue-600); --theme-sel-active-person-badge: var(--palette-green-560); --theme-sel-pending-calendar-event: var(--palette-orange-450); --theme-sel-pending-calendar-check: var(--palette-purple-700); --theme-sel-pending-geo-alt: var(--palette-brown-500); --theme-sel-pending-people: var(--palette-bluegray-600); --theme-sel-pending-person-badge: var(--palette-orange-450); --theme-sel-completed-calendar-event: var(--palette-slate-750); --theme-sel-completed-calendar-check: var(--palette-green-610); --theme-sel-completed-geo-alt: var(--palette-slate-850); --theme-sel-completed-people: var(--palette-gray-520); --theme-sel-completed-person-badge: var(--palette-slate-750); --theme-sel-cancelled-icon: var(--palette-red-900); --theme-sel-cancelled-badge-icon: var(--palette-red-900); /* ---- v1.3: export and certificate panels ---- */ /* Export and certificate panels */ --theme-ex-primary: var(--palette-blue-450); /* panel accent: icons, buttons, progress */ --theme-ex-primary-dark: var(--palette-blue-650); /* active step, checked card title, hover */ --theme-ex-primary-light: var(--palette-blue-70); /* section icon background */ --theme-ex-primary-lighter: var(--palette-blue-40); /* stepper track, selected card, hover backgrounds */ --theme-ex-blue-rgb: 59, 130, 246; /* button and stepper shadows, same in both themes */ --theme-ex-brand-grad: linear-gradient(135deg, var(--palette-blue-450) 0%, var(--palette-purple-450) 100%); /* progress bar; the old dark theme kept the light gradient too */ --theme-ex-card: var(--palette-white); /* cards, stepper indicator */ --theme-ex-content: var(--palette-white); /* dialog body */ --theme-ex-bar: var(--palette-slate-25); /* header, footer */ --theme-ex-input: var(--palette-white); /* fields, toggle cards */ --theme-ex-text: var(--palette-slate-800); --theme-ex-text-2: var(--palette-slate-500); --theme-ex-placeholder: var(--palette-slate-400); --theme-ex-line: var(--palette-slate-200); --theme-ex-line-strong: var(--palette-slate-300); /* hover borders and field borders */ --theme-ex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --theme-ex-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); --theme-ex-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01); --theme-ex-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.3); /* focus ring of certificate fields (dark) */ --theme-ex-card-grad: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 250, 251, 0.8) 100%); --theme-ex-busy-bg: var(--palette-slate-50); /* primary button while disabled (waiting) */ --theme-ex-busy-border: var(--palette-slate-300); --theme-ex-busy-text: var(--palette-slate-700); --theme-ex-toggle-bg: var(--palette-white); /* certificate toggle rows */ --theme-ex-toggle-line: var(--palette-slate-200); --theme-ex-preview-bg: var(--palette-slate-25); /* certificate preview frame */ --theme-ex-doc-bg: var(--palette-white); /* certificate preview paper */ --theme-ex-preview-title: var(--palette-blue-650); --theme-ex-trophy: var(--palette-amber-600); /* trophy icon in the certificate cards */ --theme-ex-trophy-bg: rgba(217, 119, 6, 0.1); --theme-ex-file-hover: var(--palette-gray-500); /* clear button of the file fields on hover */ /* Certificate designs (print previews: fixed colors, only the dark frame changes) */ --theme-cert-paper: var(--palette-white); --theme-cert-classic-line: var(--palette-slate-400); /* small design chip */ --theme-cert-classic-inner: var(--palette-slate-300); /* double border of the large preview */ --theme-cert-classic-bg: var(--palette-white); /* large preview paper */ --theme-cert-classic-border: var(--palette-slate-400); --theme-cert-fut-bg: linear-gradient(135deg, var(--palette-slate-900), var(--palette-slate-800)); /* large preview paper */ --theme-cert-fut-border: currentColor; /* none-style border, only the color differs */ --theme-cert-fut-title: var(--palette-sky-400); --theme-cert-fut-glow: rgba(56, 189, 248, 0.5); --theme-cert-fut-chip: linear-gradient(90deg, var(--palette-slate-900), var(--palette-blue-450)); --theme-cert-vintage-bg: var(--palette-cream-100); /* large preview paper */ --theme-cert-vintage-bg-chip: var(--palette-cream-100); /* small design chip */ --theme-cert-vintage-ink: var(--palette-brown-900); /* title and small chip border */ --theme-cert-vintage-border: var(--palette-brown-900); /* large preview border */ /* Navigation menu (menu.css) */ --theme-nav-bg: var(--palette-gray-75); --theme-nav-hover: var(--palette-gray-100); --theme-nav-line: var(--palette-gray-200); --theme-nav-divider: var(--palette-silver-300); --theme-nav-text: var(--palette-ink-700); --theme-nav-scrollbar: var(--palette-silver-400); --theme-nav-active-bg: var(--palette-slate-200); --theme-nav-active-fade: rgba(219, 234, 254, 0.5); --theme-nav-active-mobile-bg: var(--palette-steel-100); --theme-nav-active-text: var(--palette-gray-700); /* Language switcher (on the blue / night header, same in both themes) */ --theme-steel-rgb: 124, 151, 171; --theme-lang-outline: var(--palette-gray-75); --theme-lang-active-text: var(--palette-ink-900); /* Loader */ --theme-loader-bg: var(--palette-gray-75); --theme-bs-blue-rgb: 13, 110, 253; --theme-loader-icon: var(--palette-bs-blue); --theme-loader-line-blue: var(--palette-blue-450); --theme-loader-line-cyan: var(--palette-cyan-bs); --theme-loader-line-grey: var(--palette-slate-300); --theme-loader-label: var(--palette-gray-410); /* Map modal */ --theme-mapmodal-bg: var(--palette-white); --theme-mapmodal-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); --theme-mapmodal-btn-bg: var(--palette-white); --theme-mapmodal-btn-text: var(--palette-black-pure); --theme-mapmodal-mtc-hover: var(--palette-gray-40); /* Google Maps type selector hover */ /* Legal documents modal (modal-doc.css) */ --theme-doc-shadow: 0 25px 50px rgba(41, 128, 185, 0.25); --theme-doc-bg: var(--palette-white); --theme-doc-border: none; /* whole border shorthand */ --theme-doc-header: linear-gradient(135deg, var(--palette-blue-500), var(--palette-blue-600)); --theme-doc-header-line: none; /* whole border-bottom shorthand */ --theme-doc-title-icon: inherit; --theme-doc-close-bg: rgba(255, 255, 255, 0.2); --theme-doc-close-border: rgba(255, 255, 255, 0.3); --theme-doc-text: var(--palette-gray-700); --theme-doc-strong: inherit; --theme-doc-heading: var(--palette-blue-800); --theme-doc-tab: var(--palette-gray-520); --theme-doc-tab-hover: var(--palette-blue-600); --theme-doc-tab-active: var(--palette-blue-800); --theme-doc-tab-active-bg: var(--palette-white); --theme-doc-tab-active-line: var(--palette-blue-600); --theme-doc-note-bg: var(--palette-slate-50); /* highlight box */ --theme-doc-note-line: var(--palette-blue-600); --theme-doc-btn: linear-gradient(135deg, var(--palette-blue-500), var(--palette-blue-600)); --theme-doc-btn-text: var(--palette-white); --theme-doc-decline: linear-gradient(135deg, var(--palette-red-560), var(--palette-red-700)); --theme-doc-decline-hover: linear-gradient(135deg, var(--palette-red-700), var(--palette-red-780)); /* Cookie banner (styles in partials/cookie-banner.ejs) */ --theme-cookie-bg: rgba(255, 255, 255, 0.96); --theme-cookie-border: rgba(41, 128, 185, 0.15); --theme-cookie-shadow: 0 20px 60px rgba(41, 128, 185, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08); --theme-cookie-text: var(--palette-gray-555); --theme-cookie-link: var(--palette-blue-500); --theme-cookie-link-line: rgba(41, 128, 185, 0.4); --theme-cookie-link-hover: var(--palette-blue-600); /* the dark link color also wins on hover, as before */ --theme-cookie-hover-rgb: 30, 96, 145; --theme-cookie-link-hover-line: rgba(30, 96, 145, 0.6); --theme-cookie-focus: var(--palette-blue-500); --theme-cookie-grad: linear-gradient(135deg, var(--palette-blue-500) 0%, var(--palette-blue-600) 100%); /* icon and button */ /* Races page (races.css, readers.css) */ --theme-races-primary: var(--palette-blue-600); /* deeper blue in the dark theme: white labels stay readable on primary buttons */ --theme-races-primary-hover: var(--palette-blue-500); --theme-races-primary-active: var(--palette-blue-700); --theme-races-secondary: var(--palette-steel-500); --theme-races-secondary-hover: var(--palette-steel-400); --theme-races-secondary-active: var(--palette-steel-600); --theme-races-success: var(--palette-green-620); --theme-races-success-rgb: 45, 139, 87; --theme-races-danger: var(--palette-red-620); --theme-races-busy: var(--palette-orange-650); --theme-races-female: var(--palette-pink-600); --theme-races-female-rgb: 216, 27, 96; --theme-races-text-2: var(--palette-gray-555); /* secondary text, table head */ --theme-races-border: var(--palette-gray-200); --theme-races-track-off: var(--palette-gray-260); /* disabled distance slider */ --theme-races-thumb-off: var(--palette-gray-40); /* disabled slider thumb (dark theme only, see races.css) */ --theme-races-thead: var(--palette-white); /* sticky head of the races list */ --theme-races-row-hover: var(--palette-slate-50); /* races list row on hover */ --theme-races-row-active: rgba(41, 128, 185, 0.05); /* selected row of the races list */ --theme-races-check-bg: var(--palette-white); /* checkmark badge of the template card */ --theme-races-label-bg: var(--palette-white); /* reader and laps labels on the slider (white in both themes, as before) */ --theme-races-slider-track: var(--palette-gray-100); /* laps slider track */ --theme-races-lap-edge: var(--palette-gray-600); /* START / FINISH labels */ --theme-races-lap-label: var(--palette-gray-666); /* lap numbers under the slider */ --theme-races-race-info: var(--palette-amber-600); /* race line on a reader card */ --theme-races-race-info-rgb: 217, 119, 6; /* Tags page (tags.css, tags-tables.css) */ --theme-tags-success: var(--palette-green-700b); --theme-tags-success-hover-bg: var(--palette-green-800b); --theme-tags-success-active-bg: var(--palette-green-900b); --theme-tags-warning: var(--palette-orange-500b); --theme-tags-danger: var(--palette-red-700); --theme-tags-danger-hover: var(--palette-red-560); --theme-tags-secondary: var(--palette-slate-850); --theme-tags-secondary-hover: var(--palette-slate-750); --theme-tags-border: var(--palette-gray-150); --theme-tags-text-2: var(--palette-gray-555); --theme-tags-bg: var(--palette-gray-50b); --theme-tags-paper: var(--palette-white); /* white backgrounds that stay white in the dark theme, as before */ --theme-tags-divider: var(--palette-gray-300); --theme-tags-chip-owned: var(--palette-green-100); --theme-tags-chip-owned-hover: var(--palette-mint-150); --theme-tags-chip-unowned: var(--palette-amber-100); --theme-tags-chip-unowned-hover: var(--palette-amber-200b); --theme-tags-action-active-border: var(--palette-teal-900b); --theme-tags-owned-line: var(--palette-mint-250); --theme-tags-owned-focus: var(--palette-mint-350); /* the dark rule wins over :focus, as before */ --theme-tags-owned-ring: rgba(25, 135, 84, 0.25); --theme-tags-unowned-focus: var(--palette-amber-450); --theme-tags-unowned-ring: rgba(255, 193, 7, 0.25); --theme-tags-muted-icon: var(--palette-gray-500); --theme-tags-qr-hover-bg: var(--palette-gray-75); --theme-tags-qr-hover-text: var(--theme-accent); --theme-tags-focus-line: var(--palette-silver-400); --theme-tags-check-bg: var(--palette-white); /* unchecked checkbox and radio */ --theme-tags-check-line: var(--palette-gray-150); --theme-tags-panel-head: var(--palette-gray-100); --theme-tags-panel-head-line: var(--palette-gray-150); --theme-tags-panel-head-active: var(--theme-accent); /* active header: the dark rule wins, as before */ --theme-tags-panel-head-active-line: var(--theme-accent); --theme-tags-item-selected: linear-gradient(135deg, var(--palette-indigo-25) 0%, var(--palette-sky-70) 100%); --theme-tags-tabs-bg: var(--palette-gray-75); --theme-tags-tabs-line: var(--palette-gray-200); --theme-tags-tab-text: var(--palette-gray-420); --theme-tags-tab-hover-line: var(--palette-gray-410); /* the dark rule wins over :hover, as before */ --theme-tags-tab-hover-bg: var(--palette-gray-100); --theme-tags-tab-hover-text: var(--palette-gray-600); --theme-tags-tab-active-text: var(--palette-gray-600); --theme-tags-radio-free-hover: var(--palette-green-560); /* the dark rule wins over :hover, as before */ --theme-tags-radio-user-hover: var(--palette-orange-500b); /* the dark rule wins over :hover, as before */ --theme-tags-tab-active-bg: var(--palette-white); --theme-tags-tab-active-bottom: transparent; /* in the dark theme the line stays under the active tab, as before */ --theme-tags-tab-shadow: 0 -1px 3px rgba(0, 0, 0, 0.08); --theme-tags-page-hover-bg: var(--theme-accent); /* the dark rule wins over :hover, as before */ --theme-tags-page-disabled: var(--palette-gray-410); --theme-tags-timer: var(--palette-red-pure); --theme-tags-owner-line: var(--palette-gray-350); --theme-tags-owner-hover-line: var(--palette-gray-480b); /* the dark rule wins over :hover, as before */ --theme-tags-owner-focus-line: var(--theme-accent); /* the dark rule wins over :focus, as before */ --theme-tags-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"); /* the chevron of the owner filter, whole url() */ --theme-tags-thead: var(--palette-gray-100); --theme-tags-thead-hover: var(--palette-gray-260); --theme-tags-row-success: var(--palette-mint-25); /* light paints the ; in the dark theme the cells carry the tint */ --theme-tags-row-warning: var(--palette-amber-50b); --theme-tags-row-assigned: var(--palette-info-50); --theme-tags-assigned-bg: rgba(75, 157, 255, 0.12); /* dark-only --bs-table-bg of the "chip assigned" rows, see theme.css 3e */ --theme-tags-activity-idle: var(--palette-gray-320b); --theme-tags-tip-bg: rgba(107, 114, 128, 0.85); /* Selection bar and changes bar (selection-bar.css) */ --theme-sbar-bg: var(--palette-white); --theme-sbar-border: var(--palette-gray-150); --theme-sbar-shadow: 0 6px 18px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06); --theme-sbar-pointer-shadow: none; /* the dark theme shadows the pointer too, as before */ --theme-sbar-changes-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08); --theme-sbar-slots-bg: var(--palette-gray-75); --theme-sbar-slots-line: var(--palette-gray-410); --theme-sbar-complete-bg: var(--palette-mint-25); --theme-sbar-complete-line: var(--palette-mint-250); --theme-sbar-text: var(--palette-gray-700); --theme-sbar-icon: var(--palette-gray-555); --theme-sbar-plus: var(--palette-gray-410); --theme-sbar-remove-hover: var(--palette-red-700); /* the dark rule wins over :hover, as before */ --theme-sbar-remove-hover-rgb: 192, 57, 43; --theme-sbar-close-hover-bg: var(--palette-gray-45b); --theme-sbar-close-hover-text: var(--palette-gray-700); --theme-sbar-assign: var(--palette-green-700b); /* Assign button, outlined state */ --theme-sbar-assign-rgb: 30, 130, 76; --theme-sbar-assign-hover-alpha: 0.08; --theme-sbar-assign-bg: var(--palette-white); --theme-sbar-focus: var(--palette-blue-600); /* Reader modal (modal-reader.css) */ --theme-rdr-on-text: var(--theme-action); /* the dark rule wins over .is-on, as before */ --theme-rdr-header-line: var(--palette-gray-150); --theme-rdr-addon: var(--palette-gray-75); --theme-rdr-switch-line: var(--palette-slate-300); --theme-rdr-switch-bg: var(--palette-gray-150); /* Contact modal (modal-email.css) */ --theme-mail-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --theme-mail-border: none; /* whole border shorthand */ --theme-mail-header-line: var(--palette-gray-150); --theme-mail-icon: var(--palette-blue-600); --theme-mail-field-line: var(--palette-slate-300); --theme-mail-focus-line: rgba(41, 128, 185, 0.5); --theme-mail-focus-ring: rgba(41, 128, 185, 0.1); --theme-mail-scrollbar: var(--palette-slate-300); --theme-mail-scrollbar-hover: var(--palette-slate-400); --theme-mail-option-line: var(--palette-slate-25); --theme-mail-option-hover-bg: var(--palette-blue-45); --theme-mail-option-hover-text: var(--palette-blue-600); --theme-mail-footer-bg: var(--palette-white); --theme-mail-primary-hover: var(--palette-blue-800); --theme-mail-menu-bg: var(--palette-white); --theme-mail-menu-line: var(--palette-gray-200); --theme-mail-placeholder: initial; /* Bot entry page (bot-entry.css) */ --theme-brand-title-bg: none; /* metallic gradient of the title in the dark theme */ --theme-brand-title-fill: var(--theme-text-emphasis); /* title text color; transparent lets the dark gradient show through */ /* ---- v1.7: index page (index.css); dark values = the night palette ---- */ --theme-index-bg: var(--palette-ice-50); --theme-index-bg-alt: var(--palette-ice-100); --theme-index-surface: var(--palette-white); --theme-index-surface-2: var(--palette-ice-75); --theme-index-text: var(--palette-ink-950); --theme-index-text-2: var(--palette-ink-500); --theme-index-text-3: var(--palette-ink-300); --theme-index-line: rgba(13, 22, 36, 0.09); --theme-index-brand: var(--palette-azure-600); --theme-index-brand-2: var(--palette-azure-400); --theme-index-accent: var(--palette-flame-500); --theme-index-accent-2: var(--palette-flame-300); --theme-index-live: var(--palette-emerald-600); --theme-index-hero-bg-1: var(--palette-navy-900); --theme-index-hero-bg-2: var(--palette-navy-600); --theme-index-hero-bg-3: var(--palette-azure-600); --theme-index-hero-text: var(--theme-on-accent); --theme-index-hero-text-2: rgba(255, 255, 255, 0.78); --theme-index-hero-glass: rgba(4, 16, 40, 0.38); --theme-index-hero-glass-line: rgba(255, 255, 255, 0.16); --theme-index-streak: rgba(255, 255, 255, 0.55); --theme-index-marquee-bg: var(--palette-ink-950); --theme-index-marquee-fg: var(--palette-ice-50); --theme-index-card-shadow: 0 1px 2px rgba(13, 22, 36, 0.04), 0 8px 24px rgba(13, 22, 36, 0.06); --theme-index-card-shadow-hover: 0 2px 4px rgba(13, 22, 36, 0.05), 0 22px 44px rgba(13, 22, 36, 0.12); --theme-index-title-mid: var(--palette-azure-200); --theme-index-cta-end: var(--palette-flame-600); --theme-index-cta-shadow: rgba(255, 106, 26, 0.35); --theme-index-cta-shadow-hover: rgba(255, 106, 26, 0.45); --theme-index-console-live-bg: rgba(18, 183, 106, 0.16); --theme-index-console-live-text: var(--palette-emerald-300); --theme-index-ghost-bg: rgba(255, 255, 255, 0.07); --theme-index-ghost-border: var(--theme-index-hero-glass-line); --theme-index-ghost-bg-hover: rgba(255, 255, 255, 0.15); --theme-index-ghost-border-hover: var(--theme-index-hero-glass-line); --theme-index-lane-icon-bg: linear-gradient(135deg, var(--theme-index-brand-2), var(--theme-index-brand)); --theme-index-lane-icon-shadow: 0 10px 22px color-mix(in srgb, var(--theme-index-brand) 35%, transparent); --theme-index-grid-mask: var(--palette-black-pure); /* ---- v1.7: public pages, shared components (liveRaces, authToggle, footer, section-news) ---- */ --theme-public-primary: var(--theme-index-brand); --theme-public-primary-light: var(--theme-index-brand-2); --theme-public-primary-dark: var(--palette-azure-720); --theme-public-primary-shadow: rgba(26, 111, 214, 0.35); --theme-public-gradient-primary: linear-gradient(135deg, var(--theme-index-brand-2), var(--theme-index-brand)); --theme-public-accent: var(--palette-orange-500b); --theme-public-accent-dark: var(--palette-orange-800); --theme-public-accent-shadow: rgba(211, 84, 0, 0.35); --theme-public-danger: var(--palette-red-700); --theme-public-danger-dark: var(--palette-red-560); --theme-public-danger-shadow: rgba(231, 76, 60, 0.35); --theme-public-text: var(--theme-index-text); --theme-public-text-secondary: var(--theme-index-text-2); --theme-public-bg-card: var(--theme-index-surface); --theme-public-border: var(--theme-index-line); --theme-public-gradient-icon: linear-gradient(135deg, var(--palette-amber-400) 0%, var(--palette-amber-500) 100%); --theme-public-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --theme-public-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --theme-public-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15); --theme-public-shadow-float: 0 10px 30px rgba(26, 111, 214, 0.2); --theme-accent-glow: rgba(243, 156, 18, 0.4); /* ---- v1.7: public footer (footer.css); the footer is dark in both themes ---- */ --theme-footer-bg-1: rgb(22, 34, 46); --theme-footer-bg-2: rgb(18, 28, 40); --theme-footer-bg-3: rgb(15, 25, 35); --theme-footer-text: rgb(240, 240, 240); --theme-footer-border: rgba(80, 130, 180, 0.25); --theme-footer-glow-a: rgba(58, 120, 180, 0.15); --theme-footer-glow-b: rgba(230, 150, 40, 0.12); --theme-footer-scan: rgba(50, 120, 180, 0.05); --theme-footer-tone-blue: var(--palette-sky-300); --theme-footer-tone-green: var(--palette-emerald-400); --theme-footer-tone-violet: var(--palette-violet-400); --theme-footer-metric-a: rgba(52, 152, 219, 0.15); --theme-footer-metric-b: rgba(45, 139, 87, 0.15); --theme-footer-metric-c: rgba(45, 139, 87, 0.05); --theme-footer-telegram-bg: initial; /* ---- v1.7: news section (section-news.css, section-news.ejs badges) ---- */ --theme-news-card-bg: var(--palette-white); --theme-news-image-bg: var(--palette-gray-75); --theme-news-ad-1: var(--palette-blue-800); --theme-news-ad-2: var(--palette-blue-600); --theme-news-ad-3: var(--palette-blue-500); --theme-news-ad-shadow: rgba(41, 128, 185, 0.25); --theme-news-ad-shadow-hover: rgba(41, 128, 185, 0.35); --theme-news-gold-1: var(--palette-amber-400); --theme-news-gold-2: var(--palette-amber-500); --theme-news-gold-glow: rgba(251, 191, 36, 0.3); --theme-news-gold-glow-hover: rgba(251, 191, 36, 0.4); --theme-badge-orange: var(--palette-orange-450); --theme-badge-green: var(--palette-green-560); /* ---- v1.7: login card and tabs (authToggle.css, authForm.ejs) ---- */ --theme-auth-muted: var(--palette-gray-500); --theme-auth-card-bg: rgba(255, 255, 255, 0.95); --theme-auth-card-border: rgba(255, 255, 255, 0.2); --theme-auth-ok-bg: rgba(76, 217, 100, 0.2); --theme-auth-ok-text: var(--palette-lime-500); --theme-auth-ok-border: rgba(76, 217, 100, 0.3); --theme-auth-gradient: var(--theme-public-gradient-primary); --theme-auth-primary-shadow: var(--theme-public-primary-shadow); --theme-auth-addon-bg: linear-gradient(135deg, var(--palette-gray-75), var(--palette-gray-100)); --theme-auth-addon-border: var(--palette-gray-100); --theme-auth-addon-text: var(--theme-auth-muted); --theme-auth-field-bg: var(--palette-white); --theme-auth-field-border: var(--palette-gray-100); --theme-auth-focus-border: rgba(13, 110, 253, 0.4); --theme-auth-focus-border-left: transparent; --theme-auth-addon-focus-border: rgba(13, 110, 253, 0.4); --theme-auth-tab-nav-bg: var(--palette-gray-75); /* ---- v1.7: live race cards (liveRaces.css) ---- */ --theme-race-run-rgb: 225, 29, 72; --theme-race-swim-rgb: 8, 145, 178; --theme-race-ski-rgb: 124, 58, 237; --theme-race-tri-rgb: 217, 119, 6; --theme-race-default-rgb: 75, 85, 99; --theme-race-live-rgb: 16, 185, 129; --theme-race-meta-icon: var(--palette-gray-400); --theme-race-dot: var(--palette-slate-500); --theme-race-view-hover: var(--theme-public-primary-light); --theme-race-map-btn-bg: var(--palette-white); --theme-race-map-btn-bg-hover: var(--palette-slate-25); --theme-race-placeholder-bg: var(--palette-white); /* ---- v1.7: pricing page (pricing.css) ---- */ --theme-pricing-primary: var(--palette-blue-600); --theme-pricing-primary-dark: var(--palette-blue-800); --theme-pricing-primary-light: var(--palette-blue-500); --theme-pricing-primary-shadow: rgba(41, 128, 185, 0.35); --theme-pricing-bg-card: var(--palette-white); --theme-pricing-bg-light: var(--palette-slate-50); --theme-pricing-border: var(--palette-gray-200); --theme-pricing-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --theme-pricing-stage-bg: linear-gradient(135deg, var(--theme-pricing-primary-dark) 0%, var(--theme-pricing-primary) 100%); --theme-pricing-cta-shadow: 0 10px 30px rgba(41, 128, 185, 0.35); --theme-pricing-hero-title: var(--palette-ice-200); --theme-pricing-subtitle: var(--palette-gray-300); --theme-pricing-facts-shadow: 0 4px 12px rgba(41, 128, 185, 0.06); --theme-pricing-fact-bg: var(--palette-slate-50); --theme-pricing-btn-text: var(--theme-on-accent); --theme-pricing-card-hover-border: rgba(41, 128, 185, 0.3); --theme-pricing-card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.07); --theme-pricing-feature-hover-shadow: 0 4px 12px rgba(41, 128, 185, 0.1); --theme-pricing-free-bg: linear-gradient(135deg, rgba(41, 128, 185, 0.07), rgba(52, 152, 219, 0.04)); --theme-pricing-free-border: rgba(41, 128, 185, 0.2); --theme-pricing-tag-orange: linear-gradient(135deg, var(--palette-orange-500b), var(--palette-orange-450)); --theme-pricing-tag-green: linear-gradient(135deg, var(--palette-green-560), var(--palette-green-620)); --theme-pricing-saving-bg: rgba(39, 174, 96, 0.1); --theme-pricing-saving-text: var(--palette-green-560); --theme-pricing-note-bg: rgba(243, 156, 18, 0.07); --theme-pricing-note-border: rgba(243, 156, 18, 0.25); --theme-pricing-charged-bg: rgba(231, 76, 60, 0.06); --theme-pricing-charged-border: rgba(231, 76, 60, 0.15); --theme-pricing-free-scenario-bg: rgba(39, 174, 96, 0.06); --theme-pricing-free-scenario-border: rgba(39, 174, 96, 0.15); --theme-pricing-text-dark: var(--palette-navy-700); --theme-pricing-text-success: rgb(var(--bs-success-rgb)); /* ---- v1.7: logo.css and brand.css ---- */ --theme-logo-text-bg: linear-gradient(180deg, var(--palette-amber-300b), var(--palette-amber-450b)); --theme-brand-h1-bg: linear-gradient(135deg, var(--palette-white), var(--palette-gray-75) 30%, var(--palette-info-50) 60%, var(--palette-white)); --theme-brand-underline-accent: var(--palette-orange-500b); --theme-brand-underline-primary: var(--palette-blue-500); } /* ========================================================================== 3. SEMANTIC TOKENS - DARK Activated by (partials/theme-init.ejs). Only tokens that differ from the light theme are listed. ========================================================================== */ [data-bs-theme="dark"] { /* Surfaces: page < muted < surface < raised */ --theme-page: #070b13; --theme-surface: #111a28; --theme-surface-muted: #0b111c; --theme-surface-raised: #172233; --theme-surface-inset: var(--theme-surface-muted); --theme-surface-hover: var(--theme-surface-raised); --theme-card: var(--theme-surface); --theme-card-hover: #142033; --theme-card-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); --theme-field: var(--theme-surface-muted); --theme-overlay: rgba(17, 26, 40, 0.9); --theme-header: linear-gradient(135deg, #1a3a66, #12294a); /* Text */ --theme-text: #e8eef7; --theme-text-emphasis: var(--theme-text); --theme-text-muted: #a3afc2; --theme-text-faint: #6f7c90; --theme-text-control: var(--theme-text); /* Lines and borders */ --theme-line: rgba(255, 255, 255, 0.08); --theme-line-header: var(--theme-line); --theme-border: rgba(255, 255, 255, 0.12); --theme-border-soft: var(--theme-border); --theme-border-hover: #3b5577; --theme-border-dashed: rgba(255, 255, 255, 0.14); /* Brand */ --theme-brand: #3b8ff0; --theme-brand-hover: #2f7fe0; --theme-brand-bright: #4b9dff; --theme-brand-light: #5cc3ff; --theme-field-focus-border: var(--theme-line); /* Secondary buttons */ --theme-secondary: #3d5266; --theme-secondary-border: #4b6275; --theme-secondary-hover: #4b6275; --theme-secondary-active: #34475a; /* Status and alerts */ --theme-danger-bg: rgba(240, 68, 56, 0.12); --theme-info-bg: rgba(75, 157, 255, 0.1); --theme-info-text: #9ccaff; --theme-note-bg: rgba(251, 192, 45, 0.1); /* Light icon for the native date picker on dark fields */ --theme-picker-filter: invert(0.85); /* Race card states: translucent tints over the dark card */ --theme-race-success-bg: rgba(25, 135, 84, 0.14); --theme-race-success-border: #2f9e6a; --theme-race-success-shadow-hover: var(--theme-card-shadow-hover); --theme-race-orange-bg: rgba(253, 186, 116, 0.08); --theme-race-orange-border: rgba(253, 186, 116, 0.45); --theme-race-rose-bg: rgba(244, 63, 94, 0.08); --theme-race-rose-border: rgba(251, 113, 133, 0.45); --theme-race-slate-bg: var(--theme-surface-raised); --theme-race-slate-border: var(--palette-slate-600); --theme-race-cyan-bg: rgba(45, 212, 191, 0.08); --theme-race-cyan-shadow-hover: var(--theme-card-shadow-hover); --theme-race-pending-bg: rgba(127, 116, 255, 0.12); --theme-race-pending-border: var(--palette-violet-500); --theme-race-pending-bg-hover: rgba(127, 116, 255, 0.18); /* Outline badges: lighter tints to stay readable on dark cards */ --theme-badge-distance: #34d399; --theme-badge-sport: #8fb4ff; --theme-badge-primary: #38bdf8; --theme-badge-secondary: var(--palette-slate-400); --theme-badge-sport-deep: var(--theme-badge-sport); --theme-badge-primary-deep: var(--theme-badge-primary); --theme-badge-secondary-deep: var(--theme-badge-secondary); /* Empty states */ --theme-empty-bg: var(--theme-surface); --theme-empty-badge-bg: rgba(50, 213, 131, 0.12); --theme-empty-badge-text: #6ce9a6; --theme-empty-badge-border: rgba(50, 213, 131, 0.3); /* QR code keeps its white background; the frame disappears */ --theme-qr-frame: transparent; /* ---- v1.1: start page ---- */ --theme-heading: var(--theme-text); --theme-meta-text: var(--theme-text-muted); --theme-accent-tint: rgba(75, 157, 255, 0.12); --theme-accent-text: #8fb4ff; --theme-check-bg: var(--theme-surface-raised); --theme-check-border: rgba(255, 255, 255, 0.22); --theme-check-border-focus: var(--theme-check-border); --theme-toggle-track: linear-gradient(145deg, #1b2638, #121a27); --theme-toggle-track-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.45), inset 0 -1px 2px rgba(255, 255, 255, 0.06); --theme-toggle-text-hover: var(--theme-text); /* DSQ / DNF: tint on the cells only, the row itself stays transparent */ --theme-row-danger-row: transparent; --theme-row-danger-bg: rgba(220, 53, 69, 0.14); --theme-row-danger-text: #ff8a93; --theme-row-warning-row: transparent; --theme-row-warning-bg: rgba(255, 193, 7, 0.12); --theme-row-warning-text: #ffd666; --theme-row-flash: rgba(255, 214, 102, 0.18); --theme-outline-faint: var(--theme-line); --theme-chip-text: var(--theme-text-muted); --theme-chip-border: rgba(255, 255, 255, 0.18); --theme-chip-bg: var(--theme-surface); --theme-outline: var(--theme-line); --theme-popover-bg: rgba(17, 26, 40, 0.98); --theme-popover-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); --theme-scrollbar: var(--palette-slate-700); --theme-item-bg: var(--theme-surface-raised); --theme-item-border: var(--theme-line); --theme-item-border-hover: var(--theme-line); /* no hover highlight in the dark theme, as before */ --theme-divider-soft: var(--theme-line); --theme-bar-empty: #243044; --theme-channel-wifi-text: #8fc2ff; --theme-channel-wifi-bg: rgba(75, 157, 255, 0.12); --theme-channel-wifi-border: rgba(75, 157, 255, 0.4); --theme-channel-lte-text: #6ce9a6; --theme-channel-lte-bg: rgba(50, 213, 131, 0.12); --theme-channel-lte-border: rgba(50, 213, 131, 0.4); --theme-channel-other-text: var(--theme-text); --theme-channel-other-bg: rgba(163, 175, 194, 0.1); --theme-channel-other-border: rgba(203, 213, 225, 0.4); --theme-gps-bg: rgba(234, 88, 12, 0.12); --theme-gps-text: #fb923c; --theme-gps-border: rgba(251, 146, 60, 0.45); --theme-climate-halo: none; --theme-climate-temp-bg: rgba(207, 19, 34, 0.12); --theme-climate-temp-text: #ff8a80; --theme-climate-temp-border: rgba(255, 120, 117, 0.4); --theme-climate-cold-bg: rgba(29, 57, 196, 0.16); --theme-climate-cold-text: #8fb4ff; --theme-climate-cold-border: rgba(133, 165, 255, 0.45); --theme-climate-hum-bg: rgba(8, 151, 156, 0.14); --theme-climate-hum-text: #5cdbd3; --theme-climate-hum-border: rgba(92, 219, 211, 0.4); /* ---- v1.2: results, selection, shared start files ---- */ /* Popups: tooltips, lap tooltip, context menu */ --theme-popup-bg: var(--theme-surface-raised); --theme-popup-border: rgba(255, 255, 255, 0.1); --theme-popup-rule: var(--theme-line); --theme-title: var(--theme-text); --theme-label: var(--theme-text-muted); --theme-tip-muted: var(--theme-text-faint); --theme-tip-surface: var(--theme-surface); --theme-tip-hover: #1d2a3d; --theme-tip-divider: var(--theme-line); --theme-tip-accent: var(--theme-brand-light); --theme-tip-total: #ff8a80; --theme-lap-halo: var(--theme-page); --theme-lap-badge-text: var(--palette-amber-400); --theme-lap-manual-text: #8fb4ff; --theme-menu-text: var(--theme-text); --theme-menu-border: var(--theme-line); --theme-menu-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); --theme-menu-shadow-mobile: 0 12px 30px rgba(0, 0, 0, 0.5); --theme-menu-hover: rgba(255, 255, 255, 0.06); --theme-menu-active: rgba(255, 255, 255, 0.1); --theme-menu-divider: var(--theme-line); --theme-menu-danger-bg: rgba(240, 68, 56, 0.12); --theme-menu-danger-text: #ff8a80; --theme-menu-warning-bg: rgba(255, 176, 32, 0.12); --theme-menu-warning-text: #ffc766; --theme-menu-success-bg: rgba(50, 213, 131, 0.12); --theme-menu-success-text: #6ce9a6; /* View bar (start page) */ --theme-vb-bg: rgba(17, 26, 40, 0.85); --theme-vb-border: var(--theme-line); --theme-vb-field-bg: var(--theme-surface); --theme-vb-chip-border: rgba(255, 255, 255, 0.12); --theme-vb-chip-text: var(--theme-text); --theme-vb-hover-border: rgba(255, 255, 255, 0.12); --theme-vb-focus-border: rgba(255, 255, 255, 0.12); --theme-vb-reset-hover-text: var(--theme-text); --theme-vb-count-bg: var(--theme-surface-raised); --theme-vb-quiet-border: rgba(255, 255, 255, 0.12); --theme-vb-age-bg: var(--theme-surface-raised); --theme-vb-age-border: rgba(255, 255, 255, 0.12); --theme-vb-input-border: rgba(255, 255, 255, 0.12); --theme-vb-soft-bg: var(--theme-surface-raised); --theme-vb-divider: var(--theme-line); --theme-vb-menu-text: var(--theme-text); --theme-vb-finish-bg: rgba(31, 157, 87, 0.16); --theme-vb-finish-text: #6ce9a6; --theme-vb-out-bg: rgba(220, 53, 69, 0.16); --theme-vb-out-text: #ff8a93; /* Results page */ --theme-panel-border: var(--theme-line); --theme-panel-bg: var(--theme-surface-muted); --theme-panel-rule: var(--theme-line); --theme-res-date-text: var(--theme-text-muted); --theme-res-date-border: rgba(255, 255, 255, 0.2); --theme-res-sport-text: #8fb4ff; --theme-res-sport-border: rgba(143, 180, 255, 0.5); --theme-res-athlete-border: rgba(143, 180, 255, 0.5); --theme-res-distance: #4ade80; --theme-row-hover: rgba(75, 157, 255, 0.08); --theme-row-selected-bg: rgba(23, 162, 184, 0.18); --theme-row-selected-text: #8be3f0; --theme-row-own-bg: rgba(14, 165, 233, 0.14); --theme-row-own-border: var(--theme-line); --theme-row-own-hover-bg: rgba(14, 165, 233, 0.22); --theme-row-own-hover-border: var(--theme-line); --theme-place-gold: rgba(255, 215, 0, 0.1); --theme-place-silver: rgba(192, 192, 192, 0.1); --theme-place-bronze: rgba(205, 127, 50, 0.12); --theme-sticky-head: #16243a; --theme-modal-header: var(--theme-header); --theme-inset-border: rgba(255, 255, 255, 0.12); --theme-inset-text: var(--theme-text-muted); --theme-interp-text: var(--theme-text-muted); --theme-interp-disabled-bg: var(--theme-surface-muted); --theme-interp-disabled-border: var(--theme-line); --theme-modal-select-bg: var(--theme-surface-muted); --theme-select-focus-border: rgba(255, 255, 255, 0.12); --theme-fin-bg: var(--theme-surface-muted); --theme-fin-border: rgba(255, 255, 255, 0.12); --theme-fin-split: rgba(255, 255, 255, 0.12); --theme-fin-label: var(--theme-text-muted); --theme-save-disabled: var(--palette-slate-700); --theme-note-text: #ffd87a; /* Race selection page */ --theme-sel-pending-bg: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0, var(--theme-surface) 100%); --theme-sel-completed-bg: linear-gradient(135deg, rgba(23, 162, 184, 0.14) 0, var(--theme-surface) 100%); --theme-sel-cancelled-bg: linear-gradient(135deg, rgba(220, 53, 69, 0.14) 0, var(--theme-surface) 100%); --theme-sel-active-bg: linear-gradient(135deg, rgba(40, 167, 69, 0.14) 0, var(--theme-surface) 100%); --theme-sel-pending-badge-bg: rgba(255, 193, 7, 0.15); --theme-sel-pending-badge-text: #ffd666; --theme-sel-completed-badge-bg: rgba(23, 162, 184, 0.16); --theme-sel-completed-badge-text: #67d4e6; --theme-sel-cancelled-badge-bg: rgba(220, 53, 69, 0.16); --theme-sel-cancelled-badge-text: #ff8a93; --theme-sel-active-badge-bg: rgba(40, 167, 69, 0.16); --theme-sel-active-badge-text: #6ce99a; --theme-sel-creator: var(--theme-text); --theme-sel-active-calendar-check: var(--theme-brand-bright); --theme-sel-active-people: var(--theme-brand-bright); --theme-sel-pending-calendar-check: #b78af0; --theme-sel-pending-geo-alt: #c9a38f; --theme-sel-pending-people: var(--theme-text-muted); --theme-sel-completed-calendar-event: var(--theme-text-muted); --theme-sel-completed-geo-alt: var(--theme-text-muted); --theme-sel-completed-people: var(--theme-text-muted); --theme-sel-completed-person-badge: var(--theme-text-muted); --theme-sel-cancelled-badge-icon: #ff8a93; /* ---- v1.3: export and certificate panels ---- */ /* Export and certificate panels */ --theme-ex-primary: #60a5fa; --theme-ex-primary-dark: #3b82f6; --theme-ex-primary-light: #1e40af; --theme-ex-primary-lighter: #172554; --theme-ex-card: #1e293b; --theme-ex-content: #0f172a; --theme-ex-bar: #0f172a; --theme-ex-input: #2d3748; --theme-ex-text: #f1f5f9; --theme-ex-text-2: #cbd5e1; --theme-ex-line: #334155; --theme-ex-line-strong: #475569; --theme-ex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --theme-ex-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3); --theme-ex-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1); --theme-ex-card-grad: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(30, 41, 59, 0.8) 100%); --theme-ex-busy-bg: #334155; --theme-ex-busy-border: #475569; --theme-ex-busy-text: #94a3b8; --theme-ex-toggle-bg: #2d3748; --theme-ex-toggle-line: #475569; --theme-ex-preview-bg: #1e293b; --theme-ex-doc-bg: #2d3748; --theme-ex-preview-title: #60a5fa; --theme-ex-trophy: #fbbf24; --theme-ex-trophy-bg: rgba(251, 191, 36, 0.1); /* Certificate designs (print previews: fixed colors, only the dark frame changes) */ --theme-cert-classic-bg: #2d3748; --theme-cert-classic-border: #475569; --theme-cert-fut-bg: #2d3748; --theme-cert-fut-border: #475569; --theme-cert-vintage-bg: #2d3748; --theme-cert-vintage-border: #475569; /* Navigation menu (menu.css) */ --theme-nav-bg: var(--theme-surface); --theme-nav-hover: var(--theme-surface-raised); --theme-nav-line: var(--theme-line); --theme-nav-divider: var(--theme-line); --theme-nav-text: var(--theme-text-muted); --theme-nav-scrollbar: #334155; --theme-nav-active-bg: #1b2a42; --theme-nav-active-fade: rgba(75, 157, 255, 0.08); --theme-nav-active-mobile-bg: #1b2a42; --theme-nav-active-text: var(--theme-text); /* Loader */ --theme-loader-bg: var(--theme-surface-muted); /* Map modal */ --theme-mapmodal-bg: var(--theme-surface); --theme-mapmodal-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); /* Legal documents modal (modal-doc.css) */ --theme-doc-shadow: 0 25px 60px rgba(0, 0, 0, 0.6); --theme-doc-bg: var(--theme-surface); --theme-doc-border: 1px solid var(--theme-line); --theme-doc-header: var(--theme-header); --theme-doc-header-line: 1px solid var(--theme-line); --theme-doc-title-icon: var(--theme-brand-light); --theme-doc-close-bg: rgba(255, 255, 255, 0.08); --theme-doc-close-border: rgba(255, 255, 255, 0.14); --theme-doc-text: var(--theme-text-muted); --theme-doc-strong: var(--theme-text); --theme-doc-heading: var(--theme-brand-light); --theme-doc-tab: var(--theme-text-faint); --theme-doc-tab-hover: var(--theme-text); --theme-doc-tab-active: var(--theme-text); --theme-doc-tab-active-bg: var(--theme-surface); --theme-doc-tab-active-line: var(--theme-brand-bright); --theme-doc-note-bg: var(--theme-surface-raised); --theme-doc-note-line: var(--theme-brand-bright); --theme-doc-btn: linear-gradient(135deg, var(--theme-brand-light), var(--theme-brand-bright)); --theme-doc-btn-text: #06101f; /* Cookie banner (styles in partials/cookie-banner.ejs) */ --theme-cookie-bg: rgba(17, 26, 40, 0.96); --theme-cookie-border: var(--theme-line); --theme-cookie-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); --theme-cookie-text: var(--theme-text-muted); --theme-cookie-link: var(--theme-brand-light); --theme-cookie-link-line: rgba(92, 195, 255, 0.4); --theme-cookie-link-hover: var(--theme-brand-light); --theme-cookie-link-hover-line: rgba(92, 195, 255, 0.4); /* Races page (races.css, readers.css) */ --theme-races-primary: #1f6fd6; --theme-races-primary-hover: #2f86f0; --theme-races-primary-active: #1553b8; --theme-races-secondary: #4b6275; --theme-races-secondary-hover: #5a7387; --theme-races-secondary-active: #3d5266; --theme-races-text-2: var(--theme-text-muted); --theme-races-border: rgba(255, 255, 255, 0.12); --theme-races-track-off: #243044; --theme-races-thumb-off: var(--theme-surface-raised); --theme-races-thead: #16243a; --theme-races-row-hover: var(--theme-surface-raised); --theme-races-row-active: rgba(75, 157, 255, 0.1); --theme-races-check-bg: var(--theme-surface); --theme-races-slider-track: #243044; --theme-races-lap-edge: var(--theme-text-muted); --theme-races-lap-label: var(--theme-text-faint); /* Tags page (tags.css, tags-tables.css) */ --theme-tags-border: rgba(255, 255, 255, 0.12); --theme-tags-text-2: var(--theme-text-muted); --theme-tags-bg: var(--theme-surface-muted); --theme-tags-divider: rgba(255, 255, 255, 0.1); --theme-tags-chip-owned: rgba(25, 135, 84, 0.16); --theme-tags-chip-owned-hover: rgba(25, 135, 84, 0.24); --theme-tags-chip-unowned: rgba(255, 193, 7, 0.12); --theme-tags-chip-unowned-hover: rgba(255, 193, 7, 0.2); --theme-tags-owned-line: rgba(117, 183, 152, 0.5); --theme-tags-owned-focus: rgba(117, 183, 152, 0.5); --theme-tags-qr-hover-bg: var(--theme-surface-raised); --theme-tags-qr-hover-text: var(--theme-text); --theme-tags-check-bg: var(--theme-surface-raised); --theme-tags-check-line: rgba(255, 255, 255, 0.22); --theme-tags-panel-head: var(--theme-surface-muted); --theme-tags-panel-head-line: var(--theme-line); --theme-tags-panel-head-active: var(--theme-surface-muted); --theme-tags-panel-head-active-line: var(--theme-line); --theme-tags-item-selected: rgba(75, 157, 255, 0.1); --theme-tags-tabs-bg: var(--theme-surface-muted); --theme-tags-tabs-line: var(--theme-line); --theme-tags-tab-hover-line: var(--theme-line); --theme-tags-tab-hover-bg: var(--theme-surface-raised); --theme-tags-tab-hover-text: var(--theme-text); --theme-tags-tab-active-text: var(--theme-text); --theme-tags-radio-free-hover: rgba(255, 255, 255, 0.22); --theme-tags-radio-user-hover: rgba(255, 255, 255, 0.22); --theme-tags-tab-active-bg: var(--theme-surface); --theme-tags-tab-active-bottom: var(--theme-line); --theme-tags-page-hover-bg: var(--theme-surface); --theme-tags-page-disabled: var(--theme-text-faint); --theme-tags-owner-line: rgba(255, 255, 255, 0.12); --theme-tags-owner-hover-line: rgba(255, 255, 255, 0.12); --theme-tags-owner-focus-line: rgba(255, 255, 255, 0.12); --theme-tags-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='%23a3afc2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --theme-tags-thead: #16243a; --theme-tags-thead-hover: #1d2e48; --theme-tags-row-success: transparent; --theme-tags-row-warning: transparent; --theme-tags-row-assigned: transparent; /* Selection bar and changes bar (selection-bar.css) */ --theme-sbar-bg: var(--theme-surface-raised); --theme-sbar-border: rgba(255, 255, 255, 0.12); --theme-sbar-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); --theme-sbar-pointer-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); --theme-sbar-changes-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); --theme-sbar-slots-bg: var(--theme-surface-muted); --theme-sbar-slots-line: rgba(255, 255, 255, 0.2); --theme-sbar-complete-bg: rgba(25, 135, 84, 0.12); --theme-sbar-complete-line: rgba(117, 183, 152, 0.5); --theme-sbar-text: var(--theme-text); --theme-sbar-icon: var(--theme-text-muted); --theme-sbar-remove-hover: var(--theme-text-muted); --theme-sbar-close-hover-bg: rgba(255, 255, 255, 0.08); --theme-sbar-close-hover-text: var(--theme-text); --theme-sbar-assign: #4ade80; --theme-sbar-assign-rgb: 74, 222, 128; --theme-sbar-assign-hover-alpha: 0.1; --theme-sbar-assign-bg: var(--theme-surface); /* Reader modal (modal-reader.css) */ --theme-rdr-on-text: var(--theme-text); --theme-rdr-header-line: var(--theme-line); --theme-rdr-addon: var(--theme-surface-raised); --theme-rdr-switch-line: rgba(255, 255, 255, 0.2); --theme-rdr-switch-bg: var(--theme-surface-raised); /* Contact modal (modal-email.css) */ --theme-mail-shadow: 0 25px 60px rgba(0, 0, 0, 0.6); --theme-mail-border: 1px solid var(--theme-line); --theme-mail-icon: var(--theme-brand-light); --theme-mail-field-line: rgba(255, 255, 255, 0.12); --theme-mail-focus-line: rgba(92, 195, 255, 0.5); --theme-mail-focus-ring: rgba(92, 195, 255, 0.12); --theme-mail-scrollbar: #334155; --theme-mail-option-line: rgba(255, 255, 255, 0.05); --theme-mail-option-hover-bg: rgba(92, 195, 255, 0.12); --theme-mail-option-hover-text: var(--theme-brand-light); --theme-mail-footer-bg: var(--theme-surface); --theme-mail-menu-bg: var(--theme-surface-raised); --theme-mail-menu-line: rgba(255, 255, 255, 0.1); --theme-mail-placeholder: var(--theme-text-faint); /* Bot entry page (bot-entry.css) */ --theme-brand-title-bg: linear-gradient(135deg, var(--theme-text), var(--theme-text-muted) 30%, var(--theme-text) 60%); --theme-brand-title-fill: transparent; /* Bootstrap base variables follow the theme */ --bs-body-bg: var(--theme-page); --bs-body-color: var(--theme-text-muted); --bs-emphasis-color: var(--theme-text); --bs-heading-color: var(--theme-text); --bs-secondary-color: var(--theme-text-muted); --bs-secondary-bg: var(--theme-surface-raised); --bs-tertiary-bg: var(--theme-surface-muted); --bs-border-color: var(--theme-line); /* Used only by the dark-only rules of section 3c */ --theme-table-primary: #16243a; --theme-table-muted: rgba(163, 175, 194, 0.12); --theme-table-success: rgba(25, 135, 84, 0.16); --theme-table-info: rgba(13, 202, 240, 0.12); --theme-table-warning: rgba(255, 193, 7, 0.12); --theme-table-danger: rgba(220, 53, 69, 0.14); --theme-table-striped: rgba(255, 255, 255, 0.03); --theme-table-active: rgba(255, 255, 255, 0.06); --theme-table-hover: rgba(255, 255, 255, 0.05); --theme-toast-bg: rgba(17, 26, 40, 0.94); --theme-msg-info-bg: rgba(75, 157, 255, 0.12); --theme-msg-success-bg: rgba(50, 213, 131, 0.12); --theme-msg-success-text: #6ce9a6; --theme-msg-warning-bg: rgba(255, 176, 32, 0.12); --theme-msg-warning-text: #ffc766; --theme-msg-danger-bg: rgba(240, 68, 56, 0.12); --theme-msg-danger-text: #ff8a80; --theme-msg-question-bg: rgba(163, 175, 194, 0.1); /* ---- v1.7: index page (index.css); dark values = the night palette ---- */ --theme-index-bg: var(--theme-page); --theme-index-bg-alt: var(--theme-surface-muted); --theme-index-surface: var(--theme-surface); --theme-index-surface-2: var(--theme-surface-raised); --theme-index-text: var(--theme-text); --theme-index-text-2: var(--theme-text-muted); --theme-index-text-3: var(--theme-text-faint); --theme-index-line: var(--theme-line); --theme-index-brand: var(--theme-brand-bright); --theme-index-brand-2: var(--theme-brand-light); --theme-index-accent: #ff8a3d; --theme-index-accent-2: #ffc043; --theme-index-live: #32d583; --theme-index-hero-bg-1: #03060c; --theme-index-hero-bg-2: #07101f; --theme-index-hero-bg-3: #0c1b33; --theme-index-hero-text-2: rgba(232, 238, 247, 0.72); --theme-index-hero-glass: rgba(15, 26, 44, 0.55); --theme-index-hero-glass-line: rgba(255, 255, 255, 0.1); --theme-index-streak: rgba(92, 195, 255, 0.5); --theme-index-marquee-bg: #0f1826; --theme-index-marquee-fg: #e8eef7; --theme-index-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25); --theme-index-card-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 22px 44px rgba(0, 0, 0, 0.45); --theme-index-ghost-bg: rgba(255, 255, 255, 0.06); --theme-index-ghost-border: rgba(255, 255, 255, 0.32); --theme-index-ghost-bg-hover: rgba(255, 255, 255, 0.12); --theme-index-ghost-border-hover: rgba(255, 255, 255, 0.55); --theme-index-lane-icon-bg: linear-gradient(135deg, #0151b4, #1553b8); --theme-index-lane-icon-shadow: 0 10px 22px rgba(21, 83, 184, 0.45); /* ---- v1.7: public pages, shared components (liveRaces, authToggle, footer, section-news) ---- */ --theme-public-primary-dark: #2f7fe0; --theme-public-primary-shadow: rgba(75, 157, 255, 0.35); --theme-public-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --theme-public-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.45); --theme-public-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45); /* ---- v1.7: public footer (footer.css); the footer is dark in both themes ---- */ --theme-footer-telegram-bg: linear-gradient(135deg, #0151b4, #1553b8); /* ---- v1.7: login card and tabs (authToggle.css, authForm.ejs) ---- */ --theme-auth-card-bg: rgba(17, 26, 40, 0.96); --theme-auth-card-border: var(--theme-line); --theme-auth-gradient: linear-gradient(135deg, #0151b4, #1553b8); --theme-auth-primary-shadow: rgba(21, 83, 184, 0.45); --theme-auth-addon-bg: var(--theme-surface-raised); --theme-auth-addon-border: var(--theme-line); --theme-auth-addon-text: var(--theme-text-muted); --theme-auth-field-bg: var(--theme-surface-muted); --theme-auth-field-border: var(--theme-line); --theme-auth-tab-nav-bg: var(--theme-surface-raised); /* ---- v1.7: live race cards (liveRaces.css) ---- */ --theme-race-view-hover: #1f6fd6; --theme-race-map-btn-bg: var(--theme-index-surface); --theme-race-map-btn-bg-hover: var(--theme-index-surface-2); --theme-race-placeholder-bg: var(--theme-index-surface); /* ---- v1.7: pricing page (pricing.css) ---- */ --theme-pricing-primary: var(--theme-brand-bright); --theme-pricing-primary-dark: var(--theme-brand-hover); --theme-pricing-primary-light: var(--theme-brand-light); --theme-pricing-primary-shadow: rgba(0, 0, 0, 0.45); --theme-pricing-bg-card: var(--theme-surface); --theme-pricing-bg-light: var(--theme-surface); --theme-pricing-border: var(--theme-line); --theme-pricing-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --theme-pricing-stage-bg: radial-gradient(120% 140% at 100% 0%, #0c1b33 0%, transparent 60%), linear-gradient(160deg, #03060c 0%, #07101f 100%); --theme-pricing-cta-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); --theme-pricing-fact-bg: var(--theme-surface-raised); --theme-pricing-btn-text: #06101f; --theme-pricing-card-hover-border: rgba(92, 195, 255, 0.35); --theme-pricing-card-hover-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); --theme-pricing-feature-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); --theme-pricing-free-bg: linear-gradient(135deg, rgba(75, 157, 255, 0.1), rgba(92, 195, 255, 0.04)); --theme-pricing-free-border: rgba(75, 157, 255, 0.25); --theme-pricing-saving-bg: rgba(50, 213, 131, 0.14); --theme-pricing-saving-text: #32d583; --theme-pricing-note-bg: rgba(255, 176, 32, 0.08); --theme-pricing-note-border: rgba(255, 176, 32, 0.25); --theme-pricing-charged-bg: rgba(240, 68, 56, 0.08); --theme-pricing-charged-border: rgba(240, 68, 56, 0.22); --theme-pricing-free-scenario-bg: rgba(50, 213, 131, 0.08); --theme-pricing-free-scenario-border: rgba(50, 213, 131, 0.22); --theme-pricing-text-success: #32d583; --theme-auth-field-text: var(--theme-text); /* autofilled login field; light: currentColor fallback */ } /* ========================================================================== 3b. EXPORT AND CERTIFICATE PANELS - DARK ONLY Bootstrap form controls inside the panels. In the light theme the panels keep Bootstrap's own look, and these rules need !important to beat it, so a token rule (which would apply in both themes) would also break the validation colors of the light theme. They stay dark-only on purpose. The panels are matched by their containers; :where() keeps the specificity of the former [data-theme="dark"] rules. ========================================================================== */ [data-bs-theme="dark"] :where(.export-container, .certificate-container, #buttonsOffcanvas) .form-control { color: var(--theme-ex-text) !important; background-color: var(--theme-ex-input) !important; border-color: var(--theme-ex-line-strong) !important; } [data-bs-theme="dark"] :where(.export-container, .certificate-container, #buttonsOffcanvas) .form-control::placeholder { color: var(--theme-ex-placeholder) !important; opacity: 1; } [data-bs-theme="dark"] :where(.export-container, .certificate-container, #buttonsOffcanvas) input[type="file"]::file-selector-button, [data-bs-theme="dark"] :where(.export-container, .certificate-container, #buttonsOffcanvas) input[type="file"]::-webkit-file-upload-button { background-color: var(--theme-ex-input) !important; color: var(--theme-ex-text) !important; border-right: 1px solid var(--theme-ex-line-strong) !important; } [data-bs-theme="dark"] :where(.export-container, .certificate-container, #buttonsOffcanvas) .form-control[type="file"] { background-color: var(--theme-ex-input) !important; border-color: var(--theme-ex-line-strong) !important; color: var(--theme-ex-text-2) !important; } [data-bs-theme="dark"] :where(.export-container, .certificate-container, #buttonsOffcanvas) .form-control[type="file"]::-webkit-file-upload-button { background: var(--theme-ex-input) !important; color: var(--theme-ex-text) !important; border-right: 1px solid var(--theme-ex-line-strong) !important; } [data-bs-theme="dark"] :where(.export-container, .certificate-container, #buttonsOffcanvas) .form-control[type="file"]::-webkit-file-upload-button:hover { background: var(--theme-ex-bar) !important; } /* Certificate settings cards: Bootstrap's .bg-light is !important */ [data-bs-theme="dark"] .certificate-content .card.bg-light { background: var(--theme-ex-card) !important; border: 1px solid var(--theme-ex-line); color: var(--theme-ex-text); } [data-bs-theme="dark"] .certificate-content .card.bg-light h5, [data-bs-theme="dark"] .certificate-content .card.bg-light h5 i { color: var(--theme-ex-text); } [data-bs-theme="dark"] .certificate-content .card.bg-light .form-label { color: var(--theme-ex-text-2); } [data-bs-theme="dark"] .certificate-content .card.bg-light .form-control { background-color: var(--theme-ex-input); color: var(--theme-ex-text); border-color: var(--theme-ex-line-strong); } [data-bs-theme="dark"] .certificate-content .card.bg-light .form-control:focus { border-color: var(--theme-ex-primary); box-shadow: var(--theme-ex-shadow-focus); } /* ========================================================================== 3c. BOOTSTRAP AND SCRIPT COMPONENTS - DARK ONLY Moved here from common.css. These rules exist only in the dark theme: Bootstrap keeps some utilities light in its dark mode, and the toast / message scripts inject their light colors into . Their light values stay with Bootstrap and the scripts, so a token cannot express them. ========================================================================== */ [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .modal, [data-bs-theme="dark"] .dropdown-menu { --bs-card-bg: var(--theme-surface); --bs-modal-bg: var(--theme-surface); --bs-dropdown-bg: var(--theme-surface-raised); } /* Utilities Bootstrap keeps light in dark mode */ [data-bs-theme="dark"] .bg-white { background-color: var(--theme-surface) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--theme-surface-muted) !important; } [data-bs-theme="dark"] .text-dark { color: var(--theme-text) !important; } [data-bs-theme="dark"] .text-secondary { color: var(--theme-text-muted) !important; } [data-bs-theme="dark"] .text-muted { color: var(--theme-text-faint) !important; } /* Bootstrap contextual table rows/heads (.table-success etc.) keep light backgrounds and black text in dark mode: retint them site-wide */ [data-bs-theme="dark"] .table-primary, [data-bs-theme="dark"] .table-secondary, [data-bs-theme="dark"] .table-success, [data-bs-theme="dark"] .table-info, [data-bs-theme="dark"] .table-warning, [data-bs-theme="dark"] .table-danger, [data-bs-theme="dark"] .table-light { --bs-table-color: var(--theme-text); --bs-table-border-color: var(--theme-line); --bs-table-striped-color: var(--theme-text); --bs-table-active-color: var(--theme-text); --bs-table-hover-color: var(--theme-text); --bs-table-striped-bg: var(--theme-table-striped); --bs-table-active-bg: var(--theme-table-active); --bs-table-hover-bg: var(--theme-table-hover); } [data-bs-theme="dark"] .table-primary { --bs-table-bg: var(--theme-table-primary); } [data-bs-theme="dark"] .table-secondary, [data-bs-theme="dark"] .table-light { --bs-table-bg: var(--theme-table-muted); } [data-bs-theme="dark"] .table-success { --bs-table-bg: var(--theme-table-success); } [data-bs-theme="dark"] .table-info { --bs-table-bg: var(--theme-table-info); } [data-bs-theme="dark"] .table-warning { --bs-table-bg: var(--theme-table-warning); } [data-bs-theme="dark"] .table-danger { --bs-table-bg: var(--theme-table-danger); } /* Page header (the gradient itself is --theme-header in common.css) */ [data-bs-theme="dark"] .card-header { border-bottom: 1px solid var(--theme-line); } /* Colored modal headers (.modal-header.text-white) use the night header */ [data-bs-theme="dark"] .modal-header.text-white { background: var(--theme-header) !important; border-bottom: 1px solid var(--theme-line); } /* Toasts (js/modules/toast.js): type is kept by the colored left border; #toast-container outranks the .toast. rules toast.js injects later */ [data-bs-theme="dark"] #toast-container .toast { background-color: var(--theme-toast-bg) !important; border-color: var(--theme-line); box-shadow: 0 10px 30px rgba(var(--theme-shadow-rgb), 0.45); } [data-bs-theme="dark"] #toast-container .toast-message { color: var(--theme-text) !important; } [data-bs-theme="dark"] #toast-container .toast-close { color: var(--theme-text-muted); } /* Inline messages (js/modules/message.js) */ [data-bs-theme="dark"] .message { box-shadow: none; } [data-bs-theme="dark"] .message-info { background: var(--theme-msg-info-bg); color: var(--theme-info-text); } [data-bs-theme="dark"] .message-success { background: var(--theme-msg-success-bg); color: var(--theme-msg-success-text); } [data-bs-theme="dark"] .message-warning { background: var(--theme-msg-warning-bg); color: var(--theme-msg-warning-text); } [data-bs-theme="dark"] .message-danger { background: var(--theme-msg-danger-bg); color: var(--theme-msg-danger-text); } [data-bs-theme="dark"] .message-question { background: var(--theme-msg-question-bg); color: var(--theme-text-muted); } /* ========================================================================== 3d. LEGAL DOCUMENTS MODAL - DARK ONLY Link color inside the modal. In the light theme the links keep Bootstrap's link colors (default and hover), which a token would have to copy; in the dark theme the brand color wins over Bootstrap's hover color too. ========================================================================== */ [data-bs-theme="dark"] .legal-modal .modal-body a { color: var(--theme-brand-bright); } /* ========================================================================== 3e. PUBLIC PAGES (index, pricing) - DARK ONLY Properties that exist only in the dark theme (the light theme leaves them to Bootstrap or to the browser), so a token has no light value to hold. Each selector is scoped by a class of its own page/component. ========================================================================== */ /* pricing: hero and CTA block get an outline on the night gradient */ [data-bs-theme="dark"] .pricing-hero, [data-bs-theme="dark"] .pricing-cta-block { border: 1px solid var(--theme-line); } [data-bs-theme="dark"] .pricing-hero { border-width: 0 0 1px; } /* pricing: the facts bar swaps its shadow for a divider line */ [data-bs-theme="dark"] .facts-bar { border-bottom: 1px solid var(--theme-line); box-shadow: none !important; } [data-bs-theme="dark"] .pricing-text-dark { color: var(--theme-text) !important; } /* login card (authToggle.css): field text and placeholder, tab strip text */ [data-bs-theme="dark"] .auth-card .form-control, [data-bs-theme="dark"] .auth-card .input-group:focus-within .form-control { color: var(--theme-text); } [data-bs-theme="dark"] .auth-card .form-control::placeholder { color: var(--theme-text-faint); } [data-bs-theme="dark"] .tab-nav { border-color: var(--theme-line); color: var(--theme-text-muted); }