/* ============================================================ Smoke Signal Solutions Classroom — Theme System "Field protocol, modernized" — signage-style display type, clinical neutrals, per-level accent palettes, dark/light. To re-theme for a different classroom, swap the accent block. ============================================================ */ /* ============================================================ ACCENT PALETTES — one per EMS level Default is EMT. Applied dynamically via data-level attribute on or via user preference. ============================================================ */ /* EMT (Red) — default */ :root, [data-level="emt"] { --accent: #C9302C; --accent-light: #F09595; --accent-subtle: #FCEBEB; --accent-dark: #A32D2D; --accent-text: #791F1F; --accent-focus: rgba(201, 48, 44, 0.25); --accent-tint: rgba(201, 48, 44, 0.1); --accent-tint-light: rgba(201, 48, 44, 0.05); --dark-deepest: #1a0a0a; --dark-mid: #2d1414; --dark-light: #3d1f1f; --color-bg-card-rgb: 45, 20, 20; --color-bg-input-dark: #140808; } /* EMR (Teal) */ [data-level="emr"] { --accent: #0694A2; --accent-light: #5EEAD4; --accent-subtle: #D5F5F6; --accent-dark: #036672; --accent-text: #014751; --accent-focus: rgba(6, 148, 162, 0.25); --accent-tint: rgba(6, 148, 162, 0.1); --accent-tint-light: rgba(6, 148, 162, 0.05); --dark-deepest: #0a1a1a; --dark-mid: #142d2d; --dark-light: #1f3d3d; --color-bg-card-rgb: 20, 45, 45; --color-bg-input-dark: #081414; } /* AEMT (Green) */ [data-level="aemt"] { --accent: #2E7D32; --accent-light: #97C459; --accent-subtle: #EAF3DE; --accent-dark: #3B6D11; --accent-text: #27500A; --accent-focus: rgba(46, 125, 50, 0.25); --accent-tint: rgba(46, 125, 50, 0.1); --accent-tint-light: rgba(46, 125, 50, 0.05); --dark-deepest: #0a1a0a; --dark-mid: #142d14; --dark-light: #1f3d1f; --color-bg-card-rgb: 20, 45, 20; --color-bg-input-dark: #080f08; } /* Paramedic (Blue) */ [data-level="paramedic"] { --accent: #185FA5; --accent-light: #85B7EB; --accent-subtle: #E6F1FB; --accent-dark: #0C447C; --accent-text: #042C53; --accent-focus: rgba(24, 95, 165, 0.25); --accent-tint: rgba(24, 95, 165, 0.1); --accent-tint-light: rgba(24, 95, 165, 0.05); --dark-deepest: #0a0e1a; --dark-mid: #14202d; --dark-light: #1f2f3d; --color-bg-card-rgb: 20, 32, 45; --color-bg-input-dark: #080b14; } /* Critical Care (Gold) */ [data-level="critical_care"] { --accent: #BA7517; --accent-light: #EF9F27; --accent-subtle: #FAEEDA; --accent-dark: #854F0B; --accent-text: #633806; --accent-focus: rgba(186, 117, 23, 0.25); --accent-tint: rgba(186, 117, 23, 0.1); --accent-tint-light: rgba(186, 117, 23, 0.05); --dark-deepest: #1a140a; --dark-mid: #2d2214; --dark-light: #3d301f; --color-bg-card-rgb: 45, 34, 20; --color-bg-input-dark: #140e08; } /* --- Dark Theme (default) — backgrounds derived from active accent palette --- */ :root { --color-success-green: #10b981; --color-warning-yellow: #FFC107; --color-danger-red: #ef4444; --color-info-blue: #3b82f6; --color-text-primary: #f4f7fa; --color-text-secondary: #d3dae1; --color-text-muted: rgba(255,255,255,0.6); --color-text-dark: #1f2937; --color-bg-body: var(--dark-deepest); --color-bg-card: rgba(var(--color-bg-card-rgb), 0.85); --color-bg-card-header: var(--dark-light); --color-bg-input: var(--color-bg-input-dark); --color-border: rgba(255, 255, 255, 0.12); --gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); --gradient-dark: linear-gradient(135deg, var(--dark-mid) 0%, var(--dark-light) 100%); --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 2px 4px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35); --shadow-lg: 0 4px 8px rgba(0,0,0,0.35), 0 16px 40px rgba(0,0,0,0.4); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; /* Type system: signage display / standards-document body / equipment mono */ --font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif; --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; /* Bridge into Bootstrap 5.3 */ --bs-body-font-family: var(--font-body); --bs-border-radius: var(--radius-sm); --bs-border-radius-lg: var(--radius-md); } /* --- Reading preferences (student-chosen, see /settings/) --- Set as data-font / data-textsize on by the inline script in base.html. No attribute = the default type system above, so non-adopters see no change. --font-mono is deliberately never overridden: stat tiles, module codes and the test timer depend on its tabular figures lining up. */ [data-font="system"] { --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } [data-font="serif"] { --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif; --font-body: Georgia, "Iowan Old Style", "Times New Roman", serif; } [data-font="hyper"] { --font-display: "Atkinson Hyperlegible", "Public Sans", sans-serif; --font-body: "Atkinson Hyperlegible", "Public Sans", sans-serif; } /* Every font-size in this app is rem-based, so scaling the root scales the whole layout with it. */ [data-textsize="large"] { font-size: 112.5%; } [data-textsize="larger"] { font-size: 125%; } /* --- Light Theme Overrides --- */ [data-theme="light"] { --navy-dark: #eef1f4; --navy-mid: #ffffff; --navy-light: #e3e8ee; /* #FFC107 is legible on dark but washes out as text on white — darken the amber for light mode (dots/fills below re-lighten where it's a background). */ --color-warning-yellow: #b45309; --color-success-green: #067a55; --color-text-primary: #16232e; --color-text-secondary: #46586a; --color-text-muted: rgba(22, 35, 46, 0.55); --color-text-dark: #16232e; --color-bg-body: #eef1f4; --color-bg-card: #ffffff; --color-bg-card-header: var(--accent-subtle); --color-bg-input: #ffffff; --color-border: rgba(22, 35, 46, 0.12); --gradient-navy: linear-gradient(135deg, #eef1f4 0%, #e3e8ee 100%); --shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.06); --shadow-md: 0 2px 4px rgba(16, 24, 32, 0.05), 0 8px 24px rgba(16, 24, 32, 0.08); --shadow-lg: 0 4px 8px rgba(16, 24, 32, 0.06), 0 16px 40px rgba(16, 24, 32, 0.1); } /* ============================================================ BASE ELEMENTS ============================================================ */ body { background: var(--color-bg-body); color: var(--color-text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; min-height: 100vh; transition: background var(--transition-normal), color var(--transition-normal); } a { color: var(--accent-light); } a:hover { color: #ffffff; } [data-theme="light"] a { color: var(--accent-dark); } [data-theme="light"] a:hover { color: var(--accent-text); } h1, h2, h3, h4, h5, h6 { color: var(--color-text-primary); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; } hr { border-color: var(--color-border); } /* Big stat numbers read as signage */ .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; } .text-accent { color: var(--accent) !important; } .text-secondary { color: var(--color-text-secondary) !important; } /* Bootstrap's semantic text colors are tuned for dark backgrounds; on the light theme they drop below readable contrast. Re-point them at the themed vars. */ [data-theme="light"] .text-warning { color: var(--color-warning-yellow) !important; } [data-theme="light"] .text-success { color: var(--color-success-green) !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ============================================================ NAVBAR — flat accent bar, translucent chip links ============================================================ */ .slim-navbar { background: var(--accent) !important; border-bottom: 1px solid var(--accent-dark); padding: 0.35rem 0; box-shadow: var(--shadow-sm); transition: background var(--transition-normal); z-index: 1030; } [data-theme="light"] .slim-navbar { background: var(--accent) !important; border-bottom: 1px solid var(--accent-dark); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .slim-navbar .navbar-brand { background: none; padding: 0.2rem 0.5rem; } /* Logo: white in dark mode, white in light mode (navbar is bright accent in both) */ .logo-dark { display: inline; } .logo-light { display: none; } [data-theme="light"] .logo-dark { display: inline; } [data-theme="light"] .logo-light { display: none; } .slim-navbar .nav-link { color: #ffffff !important; background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: 999px !important; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.3rem 1rem !important; transition: background var(--transition-fast), border-color var(--transition-fast); box-shadow: none; margin-right: 0.3rem; } .slim-navbar .nav-link:hover { background: rgba(255,255,255,0.24) !important; border-color: rgba(255,255,255,0.45) !important; } .slim-navbar .nav-link:active { background: rgba(255,255,255,0.32) !important; } .slim-navbar .navbar-text { color: rgba(255,255,255,0.85) !important; font-size: 0.85rem; } [data-theme="light"] .slim-navbar .navbar-text { color: rgba(255,255,255,0.85) !important; } /* Logout button: same chip language as nav links */ .slim-navbar .nav-logout-btn { color: #ffffff !important; background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.35) !important; border-radius: 999px !important; padding: 0.3rem 1rem !important; font-weight: 600; letter-spacing: 0.01em; transition: background var(--transition-fast), border-color var(--transition-fast); box-shadow: none; } .slim-navbar .nav-logout-btn:hover { background: rgba(255,255,255,0.24) !important; border-color: rgba(255,255,255,0.55) !important; color: #ffffff !important; } .slim-navbar .nav-logout-btn:active { background: rgba(255,255,255,0.32) !important; } /* Solid primary buttons invert on the accent bar (accent-on-accent is invisible) */ .slim-navbar .btn-primary, [data-theme="light"] .slim-navbar .btn-primary { background: #ffffff !important; border-color: #ffffff !important; color: var(--accent) !important; border-radius: 999px; } .slim-navbar .btn-primary:hover, [data-theme="light"] .slim-navbar .btn-primary:hover { background: rgba(255,255,255,0.88) !important; border-color: #ffffff !important; color: var(--accent-dark) !important; } /* Outline-light buttons (Log In) must stay legible on accent bar */ .slim-navbar .btn-outline-light { color: #ffffff; border-color: rgba(255,255,255,0.6); border-radius: 999px; } .slim-navbar .btn-outline-light:hover { background: rgba(255,255,255,0.18); border-color: #ffffff; color: #ffffff; } /* Hamburger: always white on accent navbar */ .slim-navbar .navbar-toggler { border-color: rgba(255,255,255,0.3); } [data-theme="light"] .slim-navbar .navbar-toggler { border-color: rgba(255,255,255,0.3); } [data-theme="light"] .slim-navbar .navbar-toggler-icon { filter: none; } /* Level select: styled for accent navbar */ .slim-navbar .form-select { background-color: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.3) !important; color: #fff !important; } .slim-navbar .form-select:focus { box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.2) !important; } .slim-navbar .form-select option { background: #1f2937; color: #fff; } /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ #themeToggle { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 0.2rem 0.5rem; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; font-size: 0.9rem; line-height: 1; } #themeToggle:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); } [data-theme="light"] #themeToggle { border: 1px solid rgba(255, 255, 255, 0.3); color: white; } [data-theme="light"] #themeToggle:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); } /* ============================================================ CARDS ============================================================ */ .card { background: var(--color-bg-card); border: 1px solid var(--color-border); color: var(--color-text-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: background var(--transition-normal), border-color var(--transition-normal); } .card.border-accent { border: 2px solid var(--accent); } .card-header { background: var(--color-bg-card-header); border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); border-top-left-radius: var(--radius-md) !important; border-top-right-radius: var(--radius-md) !important; } .card-body { color: var(--color-text-primary); } .card-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; } /* Module cards lift on hover */ .module-card-wrap .card { transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .module-card-wrap .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent-light); } [data-theme="light"] .card { background: #ffffff; border: 1px solid var(--color-border); color: #16232e; box-shadow: var(--shadow-sm); } [data-theme="light"] .card-header { background: var(--accent-subtle); border-bottom: 1px solid rgba(0, 0, 0, 0.08); color: #16232e; } [data-theme="light"] .card-body { color: #16232e; } /* ============================================================ SECTION HEADERS — protocol-book index tabs ============================================================ */ .module-section h4 { display: flex; align-items: center; gap: 0.35rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); border-left: 3px solid var(--accent); padding-left: 0.75rem; } .module-section h4::after { content: ""; flex: 1; height: 1px; background: var(--color-border); margin-left: 0.75rem; } /* ============================================================ BUTTONS ============================================================ */ .btn { font-weight: 600; letter-spacing: 0.01em; border-radius: 8px; } .btn-primary, [data-theme="light"] .btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } .btn-primary:hover, [data-theme="light"] .btn-primary:hover { background: var(--accent-dark) !important; border-color: var(--accent-dark) !important; color: #fff !important; } .btn-outline-primary, [data-theme="light"] .btn-outline-primary { color: var(--accent); border-color: var(--accent); background: transparent; } .btn-outline-primary:hover, [data-theme="light"] .btn-outline-primary:hover { background: var(--accent); color: #fff; } .btn-outline-secondary { border-color: var(--color-border); color: var(--color-text-secondary); } .btn-outline-secondary:hover { background: rgba(255,255,255,0.05); color: var(--color-text-primary); border-color: rgba(255,255,255,0.3); } [data-theme="light"] .btn-outline-secondary { border-color: rgba(0, 0, 0, 0.2); color: #46586a; } [data-theme="light"] .btn-outline-secondary:hover { background: rgba(0, 0, 0, 0.05); color: #16232e; border-color: rgba(0, 0, 0, 0.3); } /* Toggle buttons (btn-check) — read as physically pushed in when active */ .btn-toggle { border-radius: 999px; transition: all var(--transition-fast); } .btn-check:checked + .btn-toggle { background: var(--accent-tint) !important; border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35); transform: translateY(1px); } [data-theme="light"] .btn-check:checked + .btn-toggle { background: var(--accent-subtle) !important; color: var(--accent-dark) !important; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15); } .btn-check:focus-visible + .btn-toggle { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================ FORMS & INPUTS ============================================================ */ .form-control, .form-select { background: var(--color-bg-input); border: 1px solid var(--color-border); color: var(--color-text-primary); border-radius: 8px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-control:focus, .form-select:focus { background: var(--color-bg-input); border-color: var(--accent); color: var(--color-text-primary); box-shadow: 0 0 0 0.2rem var(--accent-focus); } .form-control::placeholder { color: var(--color-text-muted); } [data-theme="light"] .form-control, [data-theme="light"] .form-select { background: #ffffff; border: 1px solid rgba(22, 35, 46, 0.15); color: #16232e; } [data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus { background: #ffffff; border-color: var(--accent); color: #16232e; box-shadow: 0 0 0 0.2rem var(--accent-focus); } [data-theme="light"] .form-control::placeholder { color: rgba(22, 35, 46, 0.4); } /* ============================================================ LIST GROUPS ============================================================ */ .list-group-item { background: var(--color-bg-card); border-color: var(--color-border); color: var(--color-text-primary); } .list-group-item:hover { background: var(--dark-mid); } [data-theme="light"] .list-group-item { background: #ffffff; border-color: rgba(22, 35, 46, 0.08); color: #16232e; } [data-theme="light"] .list-group-item:hover { background: var(--accent-tint-light); } /* ============================================================ BADGES ============================================================ */ .badge { font-weight: 600; letter-spacing: 0.02em; border-radius: 6px; } .badge.bg-secondary { background: var(--dark-light) !important; } [data-theme="light"] .badge.bg-secondary { background: #e3e8ee !important; color: #46586a !important; } /* ============================================================ BREADCRUMBS ============================================================ */ .breadcrumb-item.active { color: var(--color-text-muted); } .breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); } [data-theme="light"] .breadcrumb-item.active { color: rgba(22, 35, 46, 0.5); } /* ============================================================ PROGRESS BAR ============================================================ */ .progress { background: var(--dark-mid); border-radius: 999px; } [data-theme="light"] .progress { background: #e3e8ee; } .progress-bar { background: linear-gradient(90deg, var(--accent-dark), var(--accent)) !important; border-radius: 999px; box-shadow: 0 0 8px var(--accent-focus); transition: width 0.3s; } .progress-bar.bg-success { background: linear-gradient(90deg, #0d9668, var(--color-success-green)) !important; box-shadow: 0 0 8px rgba(16, 185, 129, 0.35); } /* ============================================================ APP FEEL — view transitions, press feedback, toasts ============================================================ */ /* Cross-fade between page loads (MPA View Transitions; no-op where unsupported) */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.75s; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* Buttons + nav chips compress on press */ .btn, .slim-navbar .nav-link { transition: transform 0.08s ease, background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .btn:active, .slim-navbar .nav-link:active { transform: scale(0.96); } /* Toasts — app-style notifications, bottom right */ .app-toast { background: var(--color-bg-card); color: var(--color-text-primary); border: 1px solid var(--color-border); border-left: 3px solid var(--color-info-blue); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); } .app-toast .toast-body { font-weight: 500; } .app-toast .bi { color: var(--color-info-blue); } .app-toast-success { border-left-color: var(--color-success-green); } .app-toast-success .bi { color: var(--color-success-green); } .app-toast-warning { border-left-color: var(--color-warning-yellow); } .app-toast-warning .bi { color: var(--color-warning-yellow); } .app-toast-error, .app-toast-danger { border-left-color: var(--color-danger-red); } .app-toast-error .bi, .app-toast-danger .bi { color: var(--color-danger-red); } [data-theme="light"] .app-toast { background: #ffffff; } /* Navbar avatar chip */ .nav-avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: #fff; display: inline-grid; place-items: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; user-select: none; } /* Mobile bottom tab bar */ .mobile-tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; display: flex; background: var(--color-bg-card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--color-border); } [data-theme="light"] .mobile-tabbar { background: rgba(255,255,255,0.92); } .mobile-tabbar .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom)); color: var(--color-text-muted); font-size: 0.65rem; font-weight: 600; text-decoration: none; } .mobile-tabbar .tab-item .bi { font-size: 1.25rem; line-height: 1; } .mobile-tabbar .tab-item.active, .mobile-tabbar .tab-item:hover { color: var(--accent); } [data-theme="light"] .mobile-tabbar .tab-item.active { color: var(--accent-dark); } @media (max-width: 767.98px) { /* rem, not px: the tabbar's own height is rem-based, so a fixed value here lets the bar cover content once a student picks a larger text size. */ body { padding-bottom: 4.5rem; } } /* Command palette */ .cmdk-overlay { position: fixed; inset: 0; z-index: 1090; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding-top: 14vh; } .cmdk-panel { width: min(560px, 92vw); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } [data-theme="light"] .cmdk-panel { background: #ffffff; } .cmdk-input { width: 100%; border: none; outline: none; background: transparent; color: var(--color-text-primary); font-family: var(--font-body); font-size: 1rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--color-border); } .cmdk-input::placeholder { color: var(--color-text-muted); } .cmdk-list { max-height: 46vh; overflow-y: auto; padding: 0.4rem; } .cmdk-item { padding: 0.55rem 0.8rem; border-radius: 8px; cursor: pointer; font-size: 0.92rem; color: var(--color-text-secondary); } .cmdk-item.active { background: var(--accent-tint); color: var(--color-text-primary); } .cmdk-list:empty::after { content: "No matches"; display: block; padding: 0.8rem; color: var(--color-text-muted); font-size: 0.85rem; } /* Skeleton shimmer placeholders */ .skeleton { position: relative; overflow: hidden; background: rgba(128,128,128,0.15); border-radius: 8px; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); animation: shimmer 1.2s infinite; } [data-theme="light"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* Streak pill */ .streak-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--color-bg-card); border: 1px solid var(--color-border); } [data-theme="light"] .streak-pill { background: #ffffff; } .streak-pill .bi-fire { color: #ff9f1c; animation: flicker 1.6s ease-in-out infinite; } .streak-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--color-warning-yellow); } /* As a filled shape (not text) the bright amber still reads well on white. */ [data-theme="light"] .streak-dot { background: #f0a202; } .streak-label { font-size: 0.8rem; color: var(--color-text-secondary); margin-left: 0.25rem; } @keyframes flicker { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.8; } } /* Locked module cards: frosted content, lock overlay, footer stays usable */ .card-locked { position: relative; overflow: hidden; } .card-locked .card-body { filter: blur(3px); opacity: 0.6; pointer-events: none; } .lock-overlay { position: absolute; inset: 0 0 3rem 0; display: grid; place-items: center; z-index: 2; font-size: 1.5rem; color: var(--color-text-secondary); pointer-events: none; } /* Completion bar slices pop in left-to-right */ @keyframes sliceIn { from { transform: scaleY(0); opacity: 0; } } /* Completion bar celebration pulse */ .bar-celebrate { animation: goldPulse 1.2s ease-in-out 3; } @keyframes goldPulse { 0%, 100% { box-shadow: 0 0 0 2px #ffd24a, 0 0 12px rgba(255,210,74,0.6); } 50% { box-shadow: 0 0 0 3px #ffd24a, 0 0 26px rgba(255,210,74,0.95); } } /* ============================================================ AMBIENT — faint accent glow at top of every page ============================================================ */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 420px; background: radial-gradient(60% 100% at 50% 0%, var(--accent-tint), transparent 70%); pointer-events: none; z-index: -1; } /* ============================================================ GLASSY NAVBAR — content scrolls under a blurred accent bar ============================================================ */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .slim-navbar, [data-theme="light"] .slim-navbar { background: color-mix(in srgb, var(--accent) 82%, transparent) !important; -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); } } /* ============================================================ CARD ENTRANCE — subtle staggered rise on load (prefers-reduced-motion rule above collapses this to instant) ============================================================ */ @keyframes cardRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } #grade-dashboard .card, .module-card-wrap .card { animation: cardRise 0.4s ease backwards; } .module-card-wrap:nth-child(1) .card { animation-delay: 0.04s; } .module-card-wrap:nth-child(2) .card { animation-delay: 0.08s; } .module-card-wrap:nth-child(3) .card { animation-delay: 0.12s; } .module-card-wrap:nth-child(4) .card { animation-delay: 0.16s; } .module-card-wrap:nth-child(5) .card { animation-delay: 0.20s; } .module-card-wrap:nth-child(6) .card { animation-delay: 0.24s; } /* ============================================================ STAT BAND — bento dashboard header ============================================================ */ .stat-label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); margin-bottom: 0.25rem; } .stat-hero-value { font-family: var(--font-display); font-weight: 700; font-size: 3.75rem; line-height: 1; letter-spacing: -0.02em; } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; } @media (min-width: 992px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } } .stat-value { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; } .stat-cell.stat-soon { opacity: 0.5; } .stat-link { display: block; font-size: 0.78rem; font-weight: 600; margin-top: 0.4rem; text-decoration: none; } /* Mute zero-state hero number until data exists */ .stat-hero-value.text-secondary { opacity: 0.45; } /* ============================================================ ACTIVITY ICON TILES — glyphs sit in tinted rounded squares ============================================================ */ .activity-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--accent-tint); border: 1px solid var(--accent-focus); } .activity-icon .bi { font-size: 1.25rem; color: var(--accent); line-height: 1; } [data-theme="light"] .activity-icon { background: var(--accent-subtle); border-color: var(--accent-focus); } [data-theme="light"] .activity-icon .bi { color: var(--accent-dark); } /* Completed activity: tile goes success-green */ .activity-icon-done { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.4); } .activity-icon-done .bi, [data-theme="light"] .activity-icon-done .bi { color: var(--color-success-green); } [data-theme="light"] .activity-icon-done { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.35); } /* ============================================================ MODULE CARDS v2 — mono code chip + completion ring ============================================================ */ .module-code { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-focus); border-radius: 5px; padding: 0.15rem 0.45rem; white-space: nowrap; } .progress-ring { --p: 0; width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--dark-mid) 0); display: grid; place-items: center; flex: 0 0 auto; } .progress-ring::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--dark-mid); } [data-theme="light"] .progress-ring { background: conic-gradient(var(--accent) calc(var(--p) * 1%), #e3e8ee 0); } [data-theme="light"] .progress-ring::before { background: #ffffff; } /* Section header pass-count sits after the rule line */ .module-section h4::after { order: 1; } .module-section h4 .section-count { order: 2; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; color: var(--color-text-muted); text-transform: none; } /* ============================================================ LANDING HERO — signage headline + EKG trace signature ============================================================ */ .hero { max-width: 860px; padding: 3rem 0 0; } .hero-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 0.75rem; } [data-theme="light"] .hero-eyebrow { color: var(--accent-dark); } .hero-title { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 0.75rem; } .hero-lead { font-size: 1.05rem; max-width: 560px; } .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; } .hero-ekg { display: block; width: 100%; height: 80px; margin-top: 2rem; overflow: visible; } .hero-ekg path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ekgDraw 2.2s ease-out 0.3s forwards; filter: drop-shadow(0 0 6px var(--accent-focus)); } @keyframes ekgDraw { to { stroke-dashoffset: 0; } } /* ============================================================ SHARED PAGE FURNITURE — applies app-wide without markup changes ============================================================ */ /* Breadcrumbs read as a quiet trail, not a link list */ .breadcrumb { font-size: 0.8rem; letter-spacing: 0.01em; margin-bottom: 0.75rem; } .breadcrumb a { text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* Page header block: title + optional actions on the right */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--color-border); } .page-head h1, .page-head h2, .page-head h3, .page-head h4 { margin-bottom: 0.15rem; } .page-head .page-sub { color: var(--color-text-secondary); font-size: 0.9rem; margin: 0; } .page-eyebrow { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); display: block; margin-bottom: 0.2rem; } /* Tables — quiet grid, sticky header, hover row (gradebooks, rosters, results) */ .table { --bs-table-bg: transparent; color: var(--color-text-primary); border-color: var(--color-border); } .table > thead th { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); background: transparent; white-space: nowrap; } .table > tbody > tr { border-color: var(--color-border); } .table > tbody > tr:hover > * { background: var(--accent-tint-light); } .table td, .table th { border-color: var(--color-border); } .table-sticky thead th { position: sticky; top: 56px; /* clears the fixed navbar when the PAGE is the scroller */ z-index: 2; background: var(--color-bg-body); } /* Inside a scroll box the sticky viewport is that box, not the page, so the navbar offset would shove the header down onto the first row instead. */ .table-responsive .table-sticky thead th, .tbl-scroll .table-sticky thead th { top: 0; } /* Wide tables scroll inside their own box instead of the page */ .table-responsive { border-radius: var(--radius-md); } /* Readable prose column — long-form readings, study guides, policies */ .prose { max-width: 68ch; font-size: 1.02rem; line-height: 1.7; } .prose h2, .prose h3, .prose h4 { margin-top: 2rem; margin-bottom: 0.6rem; letter-spacing: -0.005em; } .prose h4 { font-size: 1.15rem; } .prose p { margin-bottom: 1.1rem; } .prose ul, .prose ol { margin-bottom: 1.1rem; } .prose li { margin-bottom: 0.35rem; } .prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .prose strong { color: var(--color-text-primary); } /* Empty states — an invitation to act, not a shrug */ .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--color-text-secondary); } /* Direct child only — icons inside a CTA button here must stay inline-sized. */ .empty-state > .bi { font-size: 2.25rem; color: var(--accent); opacity: 0.55; display: block; margin-bottom: 0.75rem; } .empty-state h5 { margin-bottom: 0.35rem; } .empty-state p { font-size: 0.9rem; margin-bottom: 1rem; } /* Settings / form sections */ .form-section { margin-bottom: 2rem; } .form-section > h5, .form-section > h6 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: var(--color-text-secondary); border-left: 3px solid var(--accent); padding-left: 0.7rem; margin-bottom: 0.9rem; } .form-label { font-weight: 600; font-size: 0.9rem; } .form-text { color: var(--color-text-muted); } /* Nav tabs — underline style instead of folder tabs */ .nav-tabs { border-bottom: 1px solid var(--color-border); gap: 0.25rem; } .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--color-text-secondary); font-weight: 600; padding: 0.5rem 0.9rem; } .nav-tabs .nav-link:hover { border-bottom-color: var(--accent-light); color: var(--color-text-primary); } .nav-tabs .nav-link.active { background: transparent; color: var(--accent); border-bottom-color: var(--accent); } [data-theme="light"] .nav-tabs .nav-link.active { color: var(--accent-dark); } /* Alerts — flat, accent-edged instead of pastel blocks */ .alert { border: 1px solid var(--color-border); border-left-width: 3px; border-radius: var(--radius-md); background: var(--color-bg-card); color: var(--color-text-primary); } [data-theme="light"] .alert { background: #ffffff; } .alert-success { border-left-color: var(--color-success-green); } .alert-warning { border-left-color: var(--color-warning-yellow); } .alert-danger, .alert-error { border-left-color: var(--color-danger-red); } .alert-info, .alert-primary { border-left-color: var(--color-info-blue); } .alert-secondary { border-left-color: var(--color-text-muted); } /* Modals + dropdowns inherit the card language */ .modal-content { background: var(--color-bg-card); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } [data-theme="light"] .modal-content { background: #ffffff; } .modal-header, .modal-footer { border-color: var(--color-border); } .dropdown-menu { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } [data-theme="light"] .dropdown-menu { background: #ffffff; } .dropdown-item { color: var(--color-text-primary); } .dropdown-item:hover { background: var(--accent-tint); color: var(--color-text-primary); } .dropdown-item.active { background: var(--accent); color: #fff; } /* ============================================================ ACTIVITY-SPECIFIC STYLES ============================================================ */ /* Reading */ .reading-section { border-left: 3px solid var(--accent); padding-left: 1.5rem; margin-bottom: 2rem; } .prompt-box { background: var(--dark-mid); border-radius: var(--radius-md); padding: 1.25rem; margin-top: 1rem; } [data-theme="light"] .prompt-box { background: #f0f2f5; } .model-answer-box { background: rgba(16, 185, 129, 0.1); border: 1px solid var(--color-success-green); border-radius: var(--radius-sm); padding: 1rem; margin-top: 0.75rem; } /* Matching game */ .match-card { cursor: pointer; transition: all 0.2s; user-select: none; } .match-card:hover { border-color: var(--accent) !important; } .match-card.selected { border-color: var(--accent) !important; background: var(--accent-tint); } .match-card.correct { border-color: var(--color-success-green) !important; background: rgba(16, 185, 129, 0.15); } .match-card.wrong { border-color: var(--color-danger-red) !important; animation: shake 0.3s; } @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } /* Flashcards */ .flashcard { min-height: 220px; cursor: pointer; transition: transform 0.15s; } .flashcard:hover { transform: scale(1.01); } .flashcard .card-body { display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .flashcard-front { font-size: 1.2rem; font-weight: 600; } .flashcard-back { font-size: 1.1rem; } /* Labeling game */ .hotspot-item.correct input { border-color: var(--color-success-green) !important; background: rgba(16, 185, 129, 0.15) !important; } .hotspot-item.wrong input { border-color: var(--color-danger-red) !important; background: rgba(239, 68, 68, 0.15) !important; } /* Short answer */ .sa-question { border-left: 3px solid var(--accent); padding-left: 1.5rem; margin-bottom: 2rem; } /* Quiz buttons */ .quiz-option { border-color: var(--color-border); color: var(--color-text-primary); text-align: left; } .quiz-option:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-tint); color: var(--color-text-primary); } [data-theme="light"] .quiz-option { border-color: rgba(22, 35, 46, 0.15); color: #16232e; } [data-theme="light"] .quiz-option:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-tint-light); color: #16232e; }