/* ═══════════════════════════════════════════════════════════════════ ACE AVIONICS TRAINING — Shared Design System ace-theme.css v1.0 Imports: Google Fonts (Inter + JetBrains Mono) must be in Usage: (adjust relative path from each page's location) ═══════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────────── DESIGN TOKENS — Warm Dark Navy + Gold (Dark theme default) ──────────────────────────────────────────────────────────────── */ :root { /* Backgrounds */ --bg: #080C1A; /* deep space — page background */ --surface: #0F1428; /* midnight — card / panel surface */ --surface-2: #161C35; /* slightly lighter — nested surfaces */ --surface-3: #1E2545; /* hover backgrounds, inputs */ --surface-hover: #232B50; /* interactive hover state */ /* Brand accents */ --gold: #D4A853; /* warm gold — primary accent */ --gold-soft: rgba(212,168,83,0.12); /* gold tint fill */ --gold-glow: rgba(212,168,83,0.25); /* gold glow on hover */ --blue: #4B8BF5; /* interactive — links, focus rings */ --blue-soft: rgba(75,139,245,0.10); /* blue tint fill */ /* Text */ --text-primary: #F0F0F5; /* primary content */ --text-secondary: #8891A8; /* supporting content */ --text-muted: #4B5270; /* labels, hints, placeholders */ /* Semantic colors */ --success: #34D399; --success-soft: rgba(52,211,153,0.12); --warning: #FBBF24; --warning-soft: rgba(251,191,36,0.12); --danger: #F87171; --danger-soft: rgba(248,113,113,0.12); /* Borders */ --border: #1E2545; /* subtle dividers */ --border-hover: #D4A853; /* gold on hover — signature interaction */ /* Border radius scale */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; /* Shadows */ --shadow-card: 0 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(212,168,83,0.05); --shadow-hover: 0 8px 24px rgba(0,0,0,0.4), 0 0 1px rgba(212,168,83,0.12); --shadow-modal: 0 24px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,168,83,0.08); /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* Motion */ --transition: 0.15s ease; --transition-med: 0.25s ease; --transition-slow: 0.4s ease; /* Layout */ --topbar-h: 56px; --max-width: 1120px; --activity-bar-h: 48px; } /* ──────────────────────────────────────────────────────────────── LIGHT THEME OVERRIDES ──────────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #F5F5F0; --surface: #FFFFFF; --surface-2: #F0EDE6; --surface-3: #E8E4DB; --surface-hover: #EDE9E0; --gold: #B8892D; --gold-soft: rgba(184,137,45,0.08); --gold-glow: rgba(184,137,45,0.15); --blue: #2563EB; --blue-soft: rgba(37,99,235,0.06); --text-primary: #1A1D2B; --text-secondary: #5C6070; --text-muted: #9499A8; --success: #059669; --success-soft: rgba(5,150,105,0.08); --warning: #D97706; --warning-soft: rgba(217,119,6,0.08); --danger: #DC2626; --danger-soft: rgba(220,38,38,0.08); --border: #E0DDD4; --border-hover: #B8892D; --shadow-card: 0 1px 4px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08); --shadow-hover: 0 4px 16px rgba(0,0,0,0.10), 0 0 1px rgba(184,137,45,0.15); --shadow-modal: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06); } /* ──────────────────────────────────────────────────────────────── RESET & BASE ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text-secondary); min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; } img { display: block; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--surface-3); } /* ──────────────────────────────────────────────────────────────── REDUCED MOTION ──────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ════════════════════════════════════════════════════════════════ SHARED COMPONENTS ════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────────── TOPBAR (dashboard + hub pages) ──────────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 100; height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .topbar-logo { display: flex; align-items: center; gap: 0; flex-shrink: 0; text-decoration: none; } .topbar-logo .logo-img { height: 48px; /* Increased from 30px to make it prominent */ width: auto; display: block; flex-shrink: 0; } .topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Premium XP widget */ .xp-widget { display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); transition: all var(--transition); } .xp-widget:hover { border-color: var(--gold); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 0 12px rgba(212,168,83,0.15); } .lvl-badge { background: linear-gradient(135deg, var(--gold), #C49540); color: #080C1A; padding: 6px 12px; border-radius: var(--radius-full); font-family: var(--font-sans); font-size: 13px; font-weight: 800; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(212,168,83,0.3); } .xp-bar-wrap { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 120px; } .xp-bar-track { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); } .xp-bar-fill { height: 100%; background: linear-gradient(90deg, #4B8BF5, #34D399); /* Premium blue-green gradient */ border-radius: 3px; transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 0 8px rgba(52,211,153,0.5); } .xp-bar-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-secondary); text-align: right; line-height: 1; letter-spacing: 0.5px; } /* Topbar button (Progress link etc) */ .topbar-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--transition); text-decoration: none; } .topbar-btn:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--gold-soft); } .topbar-btn svg { width: 16px; height: 16px; } /* Theme toggle */ .theme-toggle { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); font-size: 16px; } .theme-toggle:hover { border-color: var(--border-hover); color: var(--gold); } /* ──────────────────────────────────────────────────────────────── ACTIVITY TOPBAR (practice, flashcards, jeopardy, final, etc.) ──────────────────────────────────────────────────────────────── */ .activity-bar { position: sticky; top: 0; z-index: 100; height: var(--activity-bar-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 12px; backdrop-filter: blur(12px); } .activity-bar-exit { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all var(--transition); flex-shrink: 0; } .activity-bar-exit:hover { border-color: var(--border-hover); color: var(--text-primary); } .activity-bar-exit svg { width: 14px; height: 14px; } .activity-bar-center { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; } .activity-bar-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); flex-shrink: 0; } .activity-bar-sep { color: var(--text-muted); font-size: 12px; flex-shrink: 0; } .activity-bar-name { font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Progress bar in activity bar */ .activity-bar-progress { flex: 1; max-width: 180px; height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; flex-shrink: 0; } .activity-bar-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), #C49540); border-radius: 2px; transition: width 0.4s ease; } .activity-bar-q-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); flex-shrink: 0; } .activity-bar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .activity-bar-timer { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-secondary); } /* ──────────────────────────────────────────────────────────────── SECTION HEADER (label + rule line) ──────────────────────────────────────────────────────────────── */ .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .section-header h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); white-space: nowrap; } .section-header::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ──────────────────────────────────────────────────────────────── CARD — Generic ──────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: all var(--transition-med) ease; } .card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-hover); } /* Gold top accent */ .card-accent-gold { border-top: 3px solid var(--gold); } .card-accent-blue { border-top: 3px solid var(--blue); } /* ──────────────────────────────────────────────────────────────── BUTTONS ──────────────────────────────────────────────────────────────── */ /* Primary — gold gradient */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, var(--gold), #C49540); border: none; border-radius: var(--radius-md); color: #080C1A; font-family: var(--font-sans); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 200ms ease; text-decoration: none; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,168,83,0.35); } .btn-primary:active { transform: scale(0.98); } /* Secondary — ghost */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--transition); text-decoration: none; } .btn-secondary:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--gold-soft); } /* Soft gold — outlined gold */ .btn-gold-soft { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; background: var(--gold-soft); border: 1px solid rgba(212,168,83,0.25); border-radius: var(--radius-md); color: var(--gold); font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--transition); text-decoration: none; } .btn-gold-soft:hover { background: var(--gold-glow); border-color: var(--gold); } /* Icon only */ .btn-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: all var(--transition); } .btn-icon:hover { border-color: var(--border-hover); color: var(--gold); } .btn-icon svg { width: 16px; height: 16px; } /* ──────────────────────────────────────────────────────────────── BADGES / STATUS CHIPS ──────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .badge-gold { background: rgba(212,168,83,0.15); color: var(--gold); } .badge-blue { background: var(--blue-soft); color: var(--blue); } .badge-success { background: var(--success-soft); color: var(--success); } .badge-warning { background: var(--warning-soft); color: var(--warning); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-muted { background: var(--surface-3); color: var(--text-muted); } /* ──────────────────────────────────────────────────────────────── PROGRESS BAR ──────────────────────────────────────────────────────────────── */ .progress-track { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), #C49540); border-radius: 3px; transition: width 0.6s ease; } .progress-fill.fill-success { background: var(--success); } .progress-fill.fill-danger { background: var(--danger); } .progress-track.sm { height: 4px; } .progress-track.lg { height: 8px; } /* ──────────────────────────────────────────────────────────────── RADIO OPTIONS (modal selectors) ──────────────────────────────────────────────────────────────── */ .radio-option { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; margin-bottom: 8px; transition: border-color var(--transition), background var(--transition); } .radio-option:hover { border-color: var(--gold); background: var(--gold-soft); } .radio-option.selected { border-color: var(--gold); background: var(--gold-soft); } .radio-dot { width: 16px; height: 16px; border: 2px solid var(--border); border-radius: 50%; margin-top: 2px; flex-shrink: 0; transition: border-color var(--transition); position: relative; } .radio-option.selected .radio-dot { border-color: var(--gold); } .radio-option.selected .radio-dot::after { content: ''; position: absolute; inset: 3px; background: var(--gold); border-radius: 50%; } .radio-label { font-size: 14px; font-weight: 600; color: var(--text-primary); } .radio-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* ──────────────────────────────────────────────────────────────── MODAL — Generic ──────────────────────────────────────────────────────────────── */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-backdrop.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-modal); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; margin-bottom: 20px; } .modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .modal-close { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); width: 28px; height: 28px; font-size: 16px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all var(--transition); } .modal-close:hover { border-color: var(--danger); color: var(--danger); } .modal-body { padding: 0 24px 24px; } /* Step indicator */ .step-indicator { display: flex; gap: 6px; margin-bottom: 20px; } .step-dot { height: 3px; border-radius: 2px; background: var(--border); transition: background var(--transition), flex var(--transition); flex: 1; } .step-dot.active { background: var(--gold); } /* Modal nav row */ .modal-nav { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } /* ──────────────────────────────────────────────────────────────── STAT CARD (e.g. results page metrics) ──────────────────────────────────────────────────────────────── */ .stat-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; text-align: center; } .stat-card-value { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .stat-card-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; } /* ──────────────────────────────────────────────────────────────── READINESS RING (SVG donut) ──────────────────────────────────────────────────────────────── */ .readiness-ring { position: relative; width: 42px; height: 42px; flex-shrink: 0; } .readiness-ring svg { width: 42px; height: 42px; transform: rotate(-90deg); } .readiness-ring .ring-track { fill: none; stroke: var(--surface-3); stroke-width: 4; } .readiness-ring .ring-fill { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113; transition: stroke-dashoffset 600ms ease; } .readiness-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--gold); } /* ──────────────────────────────────────────────────────────────── ACTIVITY ROW (hub page activity list) ──────────────────────────────────────────────────────────────── */ .activity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--transition); text-decoration: none; color: inherit; } .activity-row:last-child { border-bottom: none; } .activity-row:hover { background: var(--surface-hover); } .activity-row-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .activity-row-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); } .activity-row-icon svg { width: 18px; height: 18px; } .activity-row-name { font-size: 14px; font-weight: 600; color: var(--text-primary); } .activity-row-desc { font-size: 12px; color: var(--text-muted); margin-top: 1px; } .activity-row-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Status labels within activity rows */ .status-done { color: var(--success); font-size: 12px; font-weight: 600; } .status-mid { color: var(--warning); font-size: 12px; font-weight: 600; } .status-new { color: var(--text-muted); font-size: 12px; font-weight: 600; } .status-lock { color: var(--text-muted); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; } .status-lock svg { width: 12px; height: 12px; color: var(--warning); } /* ──────────────────────────────────────────────────────────────── LAYOUT UTILITIES ──────────────────────────────────────────────────────────────── */ .page-container { max-width: var(--max-width); margin: 0 auto; padding: 32px 24px 64px; } .page-footer { max-width: var(--max-width); margin: 0 auto; padding: 24px; text-align: center; color: var(--text-muted); font-size: 12px; border-top: 1px solid var(--border); } .page-footer a { color: var(--gold); } /* Flex utilities */ .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } /* Responsive helpers */ @media (max-width: 700px) { .xp-widget { display: none; } .topbar-btn { display: none; } } @media (max-width: 480px) { .page-container { padding: 16px 16px 48px; } }