/** * ╔══════════════════════════════════════════════════════════════╗ * ║ PERFECT APTITUDE — ROLE-SPECIFIC THEMES v1.0 ║ * ║ Institution | Teacher | Student Dashboard Identities ║ * ║ ║ * ║ REQUIRES: eap-unified-design-system.css loaded first ║ * ║ ║ * ║ USAGE: ║ * ║ Add to or dashboard wrapper: ║ * ║ - body.eap-role-institution ║ * ║ - body.eap-role-teacher ║ * ║ - body.eap-role-student ║ * ║ ║ * ║ Each role provides: ║ * ║ ✓ Unique header/topbar gradient ║ * ║ ✓ Unique sidebar colour ║ * ║ ✓ Unique primary button colour ║ * ║ ✓ Unique accent colour for highlights ║ * ║ ✓ Unique card left-border colour ║ * ║ ✓ Role-specific icon tones ║ * ║ ✓ Role-specific empty state styling ║ * ║ ✓ Dark mode variants ║ * ╚══════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════ INSTITUTION THEME — Professional Command Center Indigo • Navy • Gold | Cool • Authoritative • Data-Driven ═══════════════════════════════════════════════════════════════ */ body.eap-role-institution, .eap-role-institution { /* ── Palette ── */ --role-primary: #4f46e5; /* Indigo 700 */ --role-primary-dk: #4338ca; /* Indigo 900 */ --role-accent: #fbbf24; /* Amber 400 (gold) */ --role-accent-dk: #d97706; /* Amber 600 */ --role-secondary: #0ea5e9; /* Cyan 500 */ --role-success: #10b981; /* Emerald */ --role-warning: #f59e0b; /* Amber */ --role-danger: #ef4444; /* Red */ /* ── Derived variables ── */ --eap-primary: var(--role-primary); --eap-primary-dark: var(--role-primary-dk); --eap-accent: var(--role-accent); --eap-blue: #4338ca; --eap-emerald: #10b981; /* ── Header accent stripe ── */ --role-header-accent: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%); /* ── Card default accent (left border) ── */ --role-card-accent: #4338ca; } body.eap-role-institution .eap-btn--primary, body.eap-role-institution .pa-button-primary, .eap-role-institution .eap-btn--primary, .eap-role-institution .pa-button-primary { background: linear-gradient(135deg, #4338ca, #3730a3) !important; box-shadow: 0 8px 24px rgba(67, 56, 202, 0.35) !important; } body.eap-role-institution .eap-btn--primary:hover, body.eap-role-institution .pa-button-primary:hover, .eap-role-institution .eap-btn--primary:hover, .eap-role-institution .pa-button-primary:hover { filter: brightness(1.15) !important; box-shadow: 0 12px 32px rgba(67, 56, 202, 0.45) !important; } body.eap-role-institution .eap-card--border-blue, .eap-role-institution .eap-card--border-blue { border-left-color: #4338ca !important; } /* KPI cards with indigo accent */ body.eap-role-institution .eap-kpi-card, .eap-role-institution .eap-kpi-card { border-color: rgba(67, 56, 202, 0.20) !important; } body.eap-role-institution .eap-kpi-card:hover, .eap-role-institution .eap-kpi-card:hover { border-color: rgba(67, 56, 202, 0.40) !important; box-shadow: 0 12px 32px rgba(67, 56, 202, 0.12) !important; } /* Status pills — indigo theme */ body.eap-role-institution .eap-status-pill.blue, .eap-role-institution .eap-status-pill.blue { background: rgba(67, 56, 202, 0.12) !important; color: #312e81 !important; border-color: rgba(67, 56, 202, 0.35) !important; } /* Accent highlights — use gold */ body.eap-role-institution .eap-badge-accent, body.eap-role-institution .eap-accent-mark, .eap-role-institution .eap-badge-accent, .eap-role-institution .eap-accent-mark { background: #fbbf24; color: #78350f !important; } /* Empty state — professional desk/analytics */ body.eap-role-institution .eap-empty-state, .eap-role-institution .eap-empty-state { background: linear-gradient(135deg, rgba(67, 56, 202, 0.03), rgba(251, 191, 36, 0.02)); border-radius: var(--r-md); padding: 60px 40px; } body.eap-role-institution .eap-empty-state::before, .eap-role-institution .eap-empty-state::before { content: '📊'; display: block; font-size: 64px; margin-bottom: 20px; } /* Dark mode — institution */ [data-eap-theme="dark"] body.eap-role-institution, [data-eap-theme="dark"] .eap-role-institution { } [data-eap-theme="dark"] /* ═══════════════════════════════════════════════════════════════ TEACHER THEME — Classroom Control Center Emerald • Teal • Cyan | Warm • Collaborative • Student-Focused ═══════════════════════════════════════════════════════════════ */ body.eap-role-teacher, .eap-role-teacher { /* ── Palette ── */ --role-primary: #4f46e5; /* Emerald 500 */ --role-primary-dk: #4338ca; /* Emerald 800 */ --role-accent: #06b6d4; /* Cyan 500 */ --role-accent-dk: #0891b2; /* Cyan 700 */ --role-secondary: #0d9488; /* Teal 600 */ --role-success: #10b981; /* Emerald */ --role-warning: #f59e0b; /* Amber */ --role-danger: #ef4444; /* Red */ /* ── Derived variables ── */ --eap-primary: var(--role-primary); --eap-primary-dark: var(--role-primary-dk); --eap-accent: var(--role-accent); --eap-blue: #06b6d4; --eap-emerald: #10b981; /* ── Header accent stripe ── */ --role-header-accent: linear-gradient(90deg, #06b6d4 0%, #0891b2 100%); /* ── Card default accent ── */ --role-card-accent: #10b981; } body.eap-role-teacher .eap-btn--primary, body.eap-role-teacher .pa-button-primary, .eap-role-teacher .eap-btn--primary, .eap-role-teacher .pa-button-primary { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35) !important; } body.eap-role-teacher .eap-btn--primary:hover, body.eap-role-teacher .pa-button-primary:hover, .eap-role-teacher .eap-btn--primary:hover, .eap-role-teacher .pa-button-primary:hover { filter: brightness(1.12) !important; box-shadow: 0 12px 32px rgba(16, 185, 129, 0.45) !important; } body.eap-role-teacher .eap-card--border-blue, .eap-role-teacher .eap-card--border-blue { border-left-color: #10b981 !important; } /* KPI cards with emerald accent */ body.eap-role-teacher .eap-kpi-card, .eap-role-teacher .eap-kpi-card { border-color: rgba(16, 185, 129, 0.20) !important; } body.eap-role-teacher .eap-kpi-card:hover, .eap-role-teacher .eap-kpi-card:hover { border-color: rgba(16, 185, 129, 0.40) !important; box-shadow: 0 12px 32px rgba(16, 185, 129, 0.12) !important; } /* Status pills — emerald theme */ body.eap-role-teacher .eap-status-pill.blue, .eap-role-teacher .eap-status-pill.blue { background: rgba(16, 185, 129, 0.12) !important; color: #047857 !important; border-color: rgba(16, 185, 129, 0.35) !important; } /* Accent highlights — use cyan */ body.eap-role-teacher .eap-badge-accent, body.eap-role-teacher .eap-accent-mark, .eap-role-teacher .eap-badge-accent, .eap-role-teacher .eap-accent-mark { background: #06b6d4; color: #0e4a4d !important; } /* Empty state — classroom/learning */ body.eap-role-teacher .eap-empty-state, .eap-role-teacher .eap-empty-state { background: linear-gradient(135deg, rgba(16, 185, 129, 0.03), rgba(6, 182, 212, 0.02)); border-radius: var(--r-md); padding: 60px 40px; } body.eap-role-teacher .eap-empty-state::before, .eap-role-teacher .eap-empty-state::before { content: '🎓'; display: block; font-size: 64px; margin-bottom: 20px; } /* Dark mode — teacher */ [data-eap-theme="dark"] body.eap-role-teacher, [data-eap-theme="dark"] .eap-role-teacher { } [data-eap-theme="dark"] /* ═══════════════════════════════════════════════════════════════ STUDENT THEME — Learning Dashboard Violet • Blue • Orange | Energetic • Engaging • Achievement-Focused ═══════════════════════════════════════════════════════════════ */ body.eap-role-student, .eap-role-student { /* ── Palette ── */ --role-primary: #4f46e5; /* Violet 500 */ --role-primary-dk: #4338ca; /* Violet 600 */ --role-accent: #f97316; /* Orange 500 (achievement) */ --role-accent-dk: #ea580c; /* Orange 600 */ --role-secondary: #3b82f6; /* Blue 500 */ --role-success: #10b981; /* Emerald */ --role-warning: #f59e0b; /* Amber */ --role-danger: #ef4444; /* Red */ /* ── Derived variables ── */ --eap-primary: var(--role-primary); --eap-primary-dark: var(--role-primary-dk); --eap-accent: var(--role-accent); --eap-blue: #3b82f6; --eap-emerald: #10b981; /* ── Header accent stripe ── */ --role-header-accent: linear-gradient(90deg, #f97316 0%, #ea580c 100%); /* ── Card default accent ── */ --role-card-accent: #8b5cf6; } body.eap-role-student .eap-btn--primary, body.eap-role-student .pa-button-primary, .eap-role-student .eap-btn--primary, .eap-role-student .pa-button-primary { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35) !important; } body.eap-role-student .eap-btn--primary:hover, body.eap-role-student .pa-button-primary:hover, .eap-role-student .eap-btn--primary:hover, .eap-role-student .pa-button-primary:hover { filter: brightness(1.12) !important; box-shadow: 0 12px 32px rgba(139, 92, 246, 0.45) !important; } body.eap-role-student .eap-card--border-blue, .eap-role-student .eap-card--border-blue { border-left-color: #8b5cf6 !important; } /* KPI cards with violet accent */ body.eap-role-student .eap-kpi-card, .eap-role-student .eap-kpi-card { border-color: rgba(139, 92, 246, 0.20) !important; } body.eap-role-student .eap-kpi-card:hover, .eap-role-student .eap-kpi-card:hover { border-color: rgba(139, 92, 246, 0.40) !important; box-shadow: 0 12px 32px rgba(139, 92, 246, 0.12) !important; } /* Status pills — violet theme */ body.eap-role-student .eap-status-pill.blue, .eap-role-student .eap-status-pill.blue { background: rgba(139, 92, 246, 0.12) !important; color: #581c87 !important; border-color: rgba(139, 92, 246, 0.35) !important; } /* Accent highlights — use orange (achievement) */ body.eap-role-student .eap-badge-accent, body.eap-role-student .eap-accent-mark, .eap-role-student .eap-badge-accent, .eap-role-student .eap-accent-mark { background: #f97316; color: #fff !important; } /* Progress bar — orange for student */ body.eap-role-student .eap-progress-bar, .eap-role-student .eap-progress-bar { background: linear-gradient(90deg, #f97316, #ea580c) !important; } /* Empty state — achievement/learning */ body.eap-role-student .eap-empty-state, .eap-role-student .eap-empty-state { background: linear-gradient(135deg, rgba(139, 92, 246, 0.04), rgba(249, 115, 22, 0.02)); border-radius: var(--r-md); padding: 60px 40px; } body.eap-role-student .eap-empty-state::before, .eap-role-student .eap-empty-state::before { content: '🎯'; display: block; font-size: 64px; margin-bottom: 20px; } /* Dark mode — student */ [data-eap-theme="dark"] body.eap-role-student, [data-eap-theme="dark"] .eap-role-student { } [data-eap-theme="dark"] /* ═══════════════════════════════════════════════════════════════ SHARED ROLE THEME ENHANCEMENTS Applied to all three roles for consistency ═══════════════════════════════════════════════════════════════ */ /* Role sidebar text — always bright */ /* Role nav link hover — use role accent */ body.eap-role-institution .eap-nav-link:hover, body.eap-role-teacher .eap-nav-link:hover, body.eap-role-student .eap-nav-link:hover, .eap-role-institution .eap-nav-link:hover, .eap-role-teacher .eap-nav-link:hover, .eap-role-student .eap-nav-link:hover { background: rgba(255, 255, 255, 0.15) !important; } /* Role card — subtle shadow boost */ body.eap-role-institution .eap-card, body.eap-role-teacher .eap-card, body.eap-role-student .eap-card, .eap-role-institution .eap-card, .eap-role-teacher .eap-card, .eap-role-student .eap-card { border-left: 4px solid var(--role-card-accent) !important; } /* Role KPI — colorful top border variant */ body.eap-role-institution .eap-kpi-card--blue, body.eap-role-teacher .eap-kpi-card--emerald, body.eap-role-student .eap-kpi-card--violet, .eap-role-institution .eap-kpi-card--blue, .eap-role-teacher .eap-kpi-card--emerald, .eap-role-student .eap-kpi-card--violet { background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-top: 3px solid var(--role-card-accent); border-left: 4px solid var(--role-card-accent); } /* Role section header accent underline */ body.eap-role-institution .eap-section-title, body.eap-role-teacher .eap-section-title, body.eap-role-student .eap-section-title, .eap-role-institution .eap-section-title, .eap-role-teacher .eap-section-title, .eap-role-student .eap-section-title { position: relative; padding-bottom: 12px; } body.eap-role-institution .eap-section-title::after, body.eap-role-teacher .eap-section-title::after, body.eap-role-student .eap-section-title::after, .eap-role-institution .eap-section-title::after, .eap-role-teacher .eap-section-title::after, .eap-role-student .eap-section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 3px; background: var(--role-primary); border-radius: var(--r-full); } /* ═══════════════════════════════════════════════════════════════ ROLE-SPECIFIC ICONS & VISUAL INDICATORS ═══════════════════════════════════════════════════════════════ */ /* Institution — briefcase/analytics icon */ body.eap-role-institution .role-icon::before, .eap-role-institution .role-icon::before { content: '💼'; margin-right: 8px; } /* Teacher — chalkboard/lesson icon */ body.eap-role-teacher .role-icon::before, .eap-role-teacher .role-icon::before { content: '🎓'; margin-right: 8px; } /* Student — graduation/achievement icon */ body.eap-role-student .role-icon::before, .eap-role-student .role-icon::before { content: '⭐'; margin-right: 8px; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — Role themes on mobile ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body.eap-role-institution .eap-empty-state, body.eap-role-teacher .eap-empty-state, body.eap-role-student .eap-empty-state, .eap-role-institution .eap-empty-state, .eap-role-teacher .eap-empty-state, .eap-role-student .eap-empty-state { padding: 40px 20px !important; } body.eap-role-institution .eap-empty-state::before, body.eap-role-teacher .eap-empty-state::before, body.eap-role-student .eap-empty-state::before, .eap-role-institution .eap-empty-state::before, .eap-role-teacher .eap-empty-state::before, .eap-role-student .eap-empty-state::before { font-size: 48px; margin-bottom: 16px; } } /* ═══════════════════════════════════════════════════════════════ UTILITY — Role detection badges (for dev/debugging) ═══════════════════════════════════════════════════════════════ */ body.eap-role-institution::before, body.eap-role-teacher::before, body.eap-role-student::before { content: attr(data-role-badge); position: fixed; bottom: 20px; right: 20px; padding: 8px 12px; font-size: 11px; font-weight: 700; border-radius: var(--r-full); z-index: 99998; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(0,0,0,0.6); color: #fff; display: none; /* Enable by adding data-role-badge attribute to body */ } /* ═══════════════════════════════════════════════════════════════ HIGH-CONTRAST TYPOGRAPHY & VISIBILITY OVERRIDES Guarantees that all role-specific sidebar and topbar elements remain completely legible and beautiful, overriding enqueued themes. ═══════════════════════════════════════════════════════════════ */ /* --- SIDEBAR LINK CONTRAST --- */ /* Active Link Styles */ /* Hover Link Styles */ /* --- TOPBAR TYPOGRAPHY CONTRAST --- */ /* Topbar User Chip Contrast */ /* ═══════════════════════════════════════════════════════════════ SUMMARY: Color Reference ═══════════════════════════════════════════════════════════════ INSTITUTION (Indigo / Navy / Gold) ├─ Primary: #4338ca (Indigo 700) ├─ Dark: #312e81 (Indigo 900) ├─ Accent: #fbbf24 (Amber/Gold 400) ├─ Secondary: #0ea5e9 (Cyan 500) └─ Sidebar: #2c1e51 → #1e1b4b (Deep purple-navy gradient) TEACHER (Emerald / Teal / Cyan) ├─ Primary: #10b981 (Emerald 500) ├─ Dark: #047857 (Emerald 800) ├─ Accent: #06b6d4 (Cyan 500) ├─ Secondary: #0d9488 (Teal 600) └─ Sidebar: #0d4d40 → #0f766e (Deep teal gradient) STUDENT (Violet / Blue / Orange) ├─ Primary: #8b5cf6 (Violet 500) ├─ Dark: #7c3aed (Violet 600) ├─ Accent: #f97316 (Orange 500) ├─ Secondary: #3b82f6 (Blue 500) └─ Sidebar: #581c87 → #6d28d9 (Purple-violet gradient) ═════════════════════════════════════════════════════════════════ */