/* ============================================================ Smoke Signal Solutions Classroom — Theme System Generic accent palette with dark/light toggle. 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; } /* AEMT (Green) */ [data-level="advanced"] { --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"] { --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: #ffffff; --color-text-secondary: #e5e7eb; --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 2px 4px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 4px 8px rgba(0,0,0,0.15); --radius-sm: 5px; --radius-md: 10px; --radius-lg: 15px; --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; } /* --- Light Theme Overrides --- */ [data-theme="light"] { --navy-dark: #f5f5f5; --navy-mid: #ffffff; --navy-light: #e8ecf1; --color-text-primary: #1f2937; --color-text-secondary: #4b5563; --color-text-muted: rgba(0, 0, 0, 0.5); --color-text-dark: #1f2937; --color-bg-body: #f5f5f5; --color-bg-card: rgba(255, 255, 255, 0.95); --color-bg-card-header: var(--accent-subtle); --color-bg-input: #ffffff; --color-border: rgba(0, 0, 0, 0.12); --gradient-navy: linear-gradient(135deg, #f5f5f5 0%, #e8ecf1 100%); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1); } /* ============================================================ BASE ELEMENTS ============================================================ */ body { background: var(--color-bg-body); color: var(--color-text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 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); } hr { border-color: var(--color-border); } .text-accent { color: var(--accent) !important; } .text-secondary { color: var(--color-text-secondary) !important; } /* ============================================================ NAVBAR ============================================================ */ .slim-navbar { background: var(--accent) !important; border-bottom: 1px solid var(--accent-dark); padding: 0.35rem 0; box-shadow: var(--shadow-md); 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: var(--accent) !important; background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%) !important; border: 1px solid rgba(0,0,0,0.1) !important; border-bottom: 3px solid rgba(0,0,0,0.15) !important; border-radius: 20px !important; font-size: 0.88rem; font-weight: 600; padding: 0.3rem 1rem !important; transition: all 0.15s; box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.8); margin-right: 0.3rem; } .slim-navbar .nav-link:hover { background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8); } .slim-navbar .nav-link:active { transform: translateY(1px); border-bottom-width: 1px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.1); } .slim-navbar .navbar-text { color: var(--color-text-secondary) !important; font-size: 0.85rem; } [data-theme="light"] .slim-navbar .navbar-text { color: rgba(255,255,255,0.85) !important; } /* Logout button: 3D pill on accent navbar */ .slim-navbar .nav-logout-btn { color: var(--accent) !important; background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%) !important; border: 1px solid rgba(0,0,0,0.1) !important; border-bottom: 3px solid rgba(0,0,0,0.15) !important; border-radius: 20px !important; padding: 0.3rem 1rem !important; font-weight: 600; letter-spacing: 0.3px; transition: all 0.15s; box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.8); } .slim-navbar .nav-logout-btn:hover { background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8); } .slim-navbar .nav-logout-btn:active { transform: translateY(1px); border-bottom-width: 1px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.1); } /* 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: 6px; 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); } .card-body { color: var(--color-text-primary); } [data-theme="light"] .card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); color: #1f2937; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } [data-theme="light"] .card-header { background: var(--accent-subtle); border-bottom: 1px solid rgba(0, 0, 0, 0.08); color: #1f2937; } [data-theme="light"] .card-body { color: #1f2937; } /* ============================================================ BUTTONS ============================================================ */ .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: #4b5563; } [data-theme="light"] .btn-outline-secondary:hover { background: rgba(0, 0, 0, 0.05); color: #1f2937; border-color: rgba(0, 0, 0, 0.3); } /* ============================================================ FORMS & INPUTS ============================================================ */ .form-control, .form-select { background: var(--color-bg-input); border: 1px solid var(--color-border); color: var(--color-text-primary); 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(0, 0, 0, 0.15); color: #1f2937; } [data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus { background: #ffffff; border-color: var(--accent); color: #1f2937; box-shadow: 0 0 0 0.2rem var(--accent-focus); } [data-theme="light"] .form-control::placeholder { color: rgba(0, 0, 0, 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(0, 0, 0, 0.08); color: #1f2937; } [data-theme="light"] .list-group-item:hover { background: var(--accent-tint-light); } /* ============================================================ BADGES ============================================================ */ .badge.bg-secondary { background: var(--dark-light) !important; } [data-theme="light"] .badge.bg-secondary { background: #e8ecf1 !important; color: #4b5563 !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(0,0,0,0.5); } /* ============================================================ PROGRESS BAR ============================================================ */ .progress { background: var(--dark-mid); } [data-theme="light"] .progress { background: #e5e7eb; } .progress-bar { background: var(--accent) !important; transition: width 0.3s; } /* ============================================================ 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(0,0,0,0.15); color: #1f2937; } [data-theme="light"] .quiz-option:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-tint-light); color: #1f2937; }