/* ============================================================ SWS Endurance Timer — Main Theme & Layout CityKart Racing / SJR Motorsport Theme system: data-theme attribute on - (default/none) = Dark — professional motorsport dark - "light" — indoor race control - "outdoor" — high-contrast pit lane / sunlight ============================================================ */ /* ------------------------------------------------------------ 1. DESIGN TOKENS — Dark Theme (Default) ------------------------------------------------------------ */ :root { /* Surfaces */ --bg: #0a0a0a; --surface: #111111; --surface2: #1a1a1a; --surface3: #222222; /* Borders */ --border: #2a2a2a; --border-light: #333333; --border-width: 1px; /* Typography */ --text: #d0d0d0; --text-bright: #ffffff; --dim: #666666; --dim-light: #888888; /* Brand — CityKart */ --ckr-red: #FF2800; --accent: #FF2800; --accent-hover: #ff4422; --accent-subtle: rgba(255, 40, 0, 0.08); /* Brand — SJR */ --sjr-orange: #EF8733; --sjr-dark: #1E201F; /* Driver colours */ --pink-drv: #FF69B4; --aqua-drv: #00BCD4; --yellow-drv: #FFD600; --green-drv: #00E676; /* Semantic */ --warn: #ff9100; --danger: #ff1744; --ok: #00e676; /* Backgrounds */ --gradient-bg: radial-gradient(ellipse at 50% -10%, #2a0003 0%, #0a0a0a 60%); --modal-overlay: rgba(0, 0, 0, 0.78); /* Scrollbar */ --scrollbar-thumb: #333333; --scrollbar-thumb-hover: #555555; --scrollbar-track: transparent; /* Typography stacks */ --sans: 'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif; --mono: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace; /* Radii */ --radius: 8px; --radius-sm: 5px; --radius-lg: 12px; /* Layout */ --header-h: 48px; /* Base font */ --base-font-size: 16px; } /* ------------------------------------------------------------ 2. LIGHT THEME — Indoor Race Control ------------------------------------------------------------ */ [data-theme="light"] { /* Surfaces */ --bg: #f5f5f5; --surface: #ffffff; --surface2: #f0f0f0; --surface3: #e8e8e8; /* Borders */ --border: #dddddd; --border-light: #cccccc; /* Typography */ --text: #1a1a1a; --text-bright: #000000; --dim: #777777; --dim-light: #999999; /* Accent adjustments for legibility on light */ --accent: #d42200; --accent-hover: #b81e00; --accent-subtle: rgba(212, 34, 0, 0.06); /* Semantic — slightly deeper for light backgrounds */ --warn: #e67e00; --danger: #d50032; --ok: #00a656; /* Backgrounds */ --gradient-bg: radial-gradient(ellipse at 50% -10%, #ffeaea 0%, #f5f5f5 60%); --modal-overlay: rgba(0, 0, 0, 0.45); /* Scrollbar */ --scrollbar-thumb: #c0c0c0; --scrollbar-thumb-hover: #a0a0a0; --scrollbar-track: #f0f0f0; } /* ------------------------------------------------------------ 3. OUTDOOR THEME — Pit Lane / Sunlight ------------------------------------------------------------ */ [data-theme="outdoor"] { /* Surfaces — deeper blacks for contrast */ --bg: #050505; --surface: #0d0d0d; --surface2: #151515; --surface3: #1e1e1e; /* Borders — bolder */ --border: #3a3a3a; --border-light: #484848; --border-width: 2px; /* Typography — brighter for sunlight */ --text: #e8e8e8; --text-bright: #ffffff; --dim: #8a8a8a; --dim-light: #aaaaaa; /* Accent — slightly brighter */ --accent: #ff3311; --accent-hover: #ff5533; --accent-subtle: rgba(255, 51, 17, 0.12); /* Semantic — boosted brightness */ --warn: #ffa726; --danger: #ff2950; --ok: #2eff8c; /* Driver colours — boosted for sunlight */ --pink-drv: #ff7ec3; --aqua-drv: #26d6ea; --yellow-drv: #ffe033; --green-drv: #33ff8e; /* Backgrounds */ --gradient-bg: radial-gradient(ellipse at 50% -10%, #3a0005 0%, #050505 55%); --modal-overlay: rgba(0, 0, 0, 0.85); /* Scrollbar */ --scrollbar-thumb: #444444; --scrollbar-thumb-hover: #666666; /* Larger base font for outdoor readability */ --base-font-size: 18px; } /* ------------------------------------------------------------ 4. RESET & BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--base-font-size); min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease, color 0.3s ease; } .hidden { display: none !important; } /* ------------------------------------------------------------ 5. SCROLLBAR ------------------------------------------------------------ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } /* ------------------------------------------------------------ 6. TOAST NOTIFICATIONS ------------------------------------------------------------ */ #toast-container { position: fixed; top: 70px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--surface2); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px; font-size: 0.82rem; color: var(--text); animation: toastIn 0.3s ease-out; pointer-events: auto; max-width: 340px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .toast.error { border-color: var(--danger); color: var(--danger); } .toast.success { border-color: var(--ok); color: var(--ok); } .toast.warn { border-color: var(--warn); color: var(--warn); } @keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------ 7. MODAL ------------------------------------------------------------ */ .modal-overlay { position: fixed; inset: 0; background: var(--modal-overlay); z-index: 300; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-overlay.hidden { display: none; } .modal-dialog { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; max-width: 400px; width: 90%; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); } .modal-title { font-size: 1rem; font-weight: 700; color: var(--text-bright); margin-bottom: 0.5rem; } .modal-body { color: var(--dim); font-size: 0.85rem; line-height: 1.5; margin-bottom: 1.2rem; } .modal-actions { display: flex; gap: 0.65rem; justify-content: flex-end; } /* ------------------------------------------------------------ 8. BUTTONS ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; padding: 0.5rem 1rem; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(255, 40, 0, 0.2); } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 14px rgba(255, 40, 0, 0.3); } .btn-secondary { background: transparent; border: var(--border-width) solid var(--border); color: var(--dim); } .btn-secondary:hover { border-color: var(--text); color: var(--text); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { filter: brightness(1.15); } .btn-sm { font-size: 0.72rem; padding: 0.35rem 0.7rem; } .btn-lg { font-size: 0.95rem; padding: 0.85rem 1.5rem; letter-spacing: 0.12em; width: 100%; } .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ------------------------------------------------------------ 9. FORM ELEMENTS ------------------------------------------------------------ */ .form-input, .form-select { background: var(--surface2); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); color: var(--text-bright); font-family: var(--sans); font-size: 0.88rem; padding: 0.5rem 0.75rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 100%; } .form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-subtle); } .form-input::placeholder { color: var(--dim); opacity: 0.7; } .form-select { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-select option { background: var(--surface2); color: var(--text-bright); } .form-label { display: block; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); font-weight: 600; margin-bottom: 0.3rem; } .form-field { display: flex; flex-direction: column; gap: 0.3rem; } .form-note { font-size: 0.65rem; color: var(--dim); font-family: var(--mono); } /* ------------------------------------------------------------ 10. SECTION LABEL ------------------------------------------------------------ */ .sec-label { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 0.65rem; } /* ------------------------------------------------------------ 11. CARD ------------------------------------------------------------ */ .card { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; transition: background-color 0.3s ease, border-color 0.3s ease; } /* ------------------------------------------------------------ 12. DIVIDER ------------------------------------------------------------ */ .divider { border: none; border-top: var(--border-width) solid var(--border); margin: 1.1rem 0; } /* ------------------------------------------------------------ 13. CONNECTION STATUS INDICATOR ------------------------------------------------------------ */ .conn-status { display: none; align-items: center; gap: 4px; font-size: 0.6rem; color: var(--warn); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; } .conn-status.disconnected { display: flex; } .conn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); animation: pulse 1.5s infinite; flex-shrink: 0; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ------------------------------------------------------------ 14. THEME TOGGLE ------------------------------------------------------------ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; background: var(--surface2); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); color: var(--dim); cursor: pointer; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4rem 0.65rem; gap: 0.35em; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; white-space: nowrap; line-height: 1; } .theme-toggle:hover { background: var(--surface3); border-color: var(--border-light); color: var(--text); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle .theme-icon { font-size: 0.85rem; line-height: 1; } /* ------------------------------------------------------------ 15. FOOTER ------------------------------------------------------------ */ .app-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; border-top: var(--border-width) solid var(--border); font-size: 0.6rem; color: var(--dim); letter-spacing: 0.05em; transition: border-color 0.3s ease; } .app-footer img { height: 22px; opacity: 0.5; transition: opacity 0.2s ease; } .app-footer img:hover { opacity: 0.8; } .app-footer a { color: var(--dim); text-decoration: none; transition: color 0.15s ease; } .app-footer a:hover { color: var(--text); } /* ------------------------------------------------------------ 16. UTILITY — MONOSPACE TEXT ------------------------------------------------------------ */ .mono, .font-mono { font-family: var(--mono); } /* ------------------------------------------------------------ 17. LIGHT THEME — Form Select Fix (Ensures dropdown arrows are visible on light backgrounds) ------------------------------------------------------------ */ [data-theme="light"] .form-select option { background: var(--surface); color: var(--text); } [data-theme="light"] .btn-primary { box-shadow: 0 2px 8px rgba(212, 34, 0, 0.15); } [data-theme="light"] .btn-primary:hover { box-shadow: 0 4px 14px rgba(212, 34, 0, 0.22); } [data-theme="light"] .toast { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } [data-theme="light"] .modal-dialog { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); } [data-theme="light"] .app-footer img { opacity: 0.6; } /* ------------------------------------------------------------ 18. OUTDOOR THEME — Enhanced Readability ------------------------------------------------------------ */ [data-theme="outdoor"] .toast { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); font-size: 0.88rem; } [data-theme="outdoor"] .btn { font-size: 0.88rem; padding: 0.55rem 1.1rem; } [data-theme="outdoor"] .btn-sm { font-size: 0.78rem; padding: 0.4rem 0.8rem; } [data-theme="outdoor"] .btn-lg { font-size: 1rem; padding: 0.9rem 1.6rem; } [data-theme="outdoor"] .form-input, [data-theme="outdoor"] .form-select { font-size: 0.95rem; padding: 0.6rem 0.85rem; } [data-theme="outdoor"] .form-label { font-size: 0.72rem; } [data-theme="outdoor"] .conn-status { font-size: 0.68rem; } [data-theme="outdoor"] .modal-dialog { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); }