/* ========================================================= SportIntelliLab — Shared Design Tokens Single source of truth. Loaded first in every page . ========================================================= */ :root { /* Backgrounds */ --bg: #0f1117; --bg2: #0a0d14; /* Cards */ --card: #1a1d26; --card2: #12151f; /* Borders */ --border: #252a3a; --border2: #1e2230; /* Brand */ --accent: #00ffc8; --accent2: #7b2fff; /* Semantic colours */ --danger: #ff6b6b; --warning: #ff9f43; --success: #2ed573; /* Risk aliases */ --risk-low: var(--success); --risk-medium: var(--warning); --risk-high: var(--danger); /* Typography — 5.5:1 contrast on --card, passes WCAG AA */ --text: #dde1ed; --muted: #9099b5; /* Layout */ --nav-h: 68px; /* Type scale */ --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-base: 0.92rem; --fs-md: 1.05rem; --fs-lg: 1.35rem; --fs-xl: 1.6rem; } /* Global reset (prevents double-declaration across pages) */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .hidden { display: none !important; } /* ---- Password strength bar (index.html + reset-password.html) ---- */ .pw-strength { height: 3px; border-radius: 2px; background: var(--border); margin-top: 6px; overflow: hidden; } .pw-strength-fill { height: 100%; width: 0%; border-radius: 2px; transition: width 0.3s, background-color 0.3s; } .pw-strength-fill.weak { width: 33%; background: var(--danger); } .pw-strength-fill.medium { width: 67%; background: var(--warning); } .pw-strength-fill.strong { width: 100%; background: var(--success); } /* ---- Risk badges (shared across all pages) ---- */ .risk-badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 20px; text-transform: capitalize; } .risk-badge.low { background: rgba(46,213,115,0.14); color: var(--risk-low); border: 1px solid rgba(46,213,115,0.3); } .risk-badge.medium { background: rgba(255,159,67,0.14); color: var(--risk-medium); border: 1px solid rgba(255,159,67,0.3); } .risk-badge.high { background: rgba(255,107,107,0.14); color: var(--risk-high); border: 1px solid rgba(255,107,107,0.3); } .risk-badge.none { background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid var(--border); } /* ---- Risk text colours (patient dashboard score card) ---- */ .risk-low { color: var(--risk-low); } .risk-medium { color: var(--risk-medium); } .risk-high { color: var(--risk-high); } /* ---- Score colouring (doctor + patient dashboards) ---- */ .score-high { color: var(--success); font-weight: 700; } .score-mid { color: var(--warning); font-weight: 700; } .score-low { color: var(--danger); font-weight: 700; } .score-none { color: var(--muted); } /* ---- Brand logo icon (used alongside wordmark on every page) ---- */ @keyframes logo-glow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(0, 255, 200, 0.6)); } 50% { filter: drop-shadow(0 0 8px rgba(0, 255, 200, 0.9)) drop-shadow(0 0 18px rgba(0, 255, 200, 0.35)); } } .nav-logo-icon { width: 22px; height: 22px; flex-shrink: 0; animation: logo-glow 2.5s ease-in-out infinite; } /* ---- Skeleton shimmer (doctor + patient loading states) ---- */ @keyframes skel-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skel { background: linear-gradient( 90deg, var(--card2) 25%, rgba(255,255,255,0.04) 50%, var(--card2) 75% ); background-size: 800px 100%; animation: skel-shimmer 1.4s ease-in-out infinite; border-radius: 4px; } /* ---- Language toggle (every patient-facing page) ---- */ .lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex-shrink: 0; } .lang-btn { background: none; border: none; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; padding: 0.28rem 0.6rem; cursor: pointer; transition: background 0.15s, color 0.15s; line-height: 1; } .lang-btn[aria-pressed="true"] { background: var(--accent); color: var(--bg); } .lang-btn:hover:not([aria-pressed="true"]) { color: var(--text); }