/* ================================================================ E17 THEME SYSTEM — v1.0 Design tokens + Bootstrap 5 remap + component overrides Load order: Bootstrap 5 → app.css → theme.css This file wins on all conflicts. Never edit app.css colors again; override here instead. ================================================================ */ /* ================================================================ SECTION 1 — TOKEN DEFINITIONS ================================================================ */ :root { /* === SWAPPABLE BY TENANT ======================================= --primary and its derivatives are the only values that change between tenant instances. Everything else below is locked E17. In a future multi-tenant deployment, override --primary via a server-injected {% endif %} For now, --primary defaults to E17 navy (#142332). ============================================================= */ --primary: #142332; --primary-hover: #1e3347; --primary-dark: #0a1820; --primary-light: rgba(20, 35, 50, .10); --primary-contrast: #ffffff; /* === LOCKED (E17) — never change per tenant =================== These define E17's visual identity across all instances. ============================================================= */ /* Brand colors */ --accent: #EAB43E; /* gold — premium highlight, use sparingly */ --accent-dark: #8E6C28; --accent-glow: rgba(234, 180, 62, .14); --secondary: #405926; /* olive — growth, positivity */ --secondary-soft: rgba(64, 89, 38, .12); /* Neutrals */ --ink: #111827; --surface-alt: #f4f7fb; --muted: #667085; /* Semantic */ --success: #059669; --success-soft: rgba(16, 185, 129, .12); --danger: #dc3545; --danger-soft: rgba(239, 68, 68, .12); --warning: #d97706; --warning-soft: rgba(245, 158, 11, .16); --info: #0ea5e9; /* Shape */ --radius: 22px; --radius-lg: 28px; --radius-sm: 14px; /* Elevation */ --shadow: 0 8px 24px rgba(15, 23, 42, .06); --shadow-md: 0 18px 50px rgba(15, 23, 42, .09); --shadow-lg: 0 28px 80px rgba(15, 23, 42, .12); /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Typography */ --font-head: 'Manrope', system-ui, sans-serif; --font-body: 'Manrope', system-ui, -apple-system, sans-serif; /* === Bootstrap 5 variable remap ================================ Wires Bootstrap's CSS-var system to our tokens so Bootstrap components inherit E17 colors automatically. ============================================================= */ --bs-primary: var(--primary); --bs-primary-rgb: 20, 35, 50; --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-hover); --bs-border-radius: var(--radius-sm); --bs-border-radius-lg: var(--radius); --bs-border-radius-xl: var(--radius-lg); --bs-body-font-family: var(--font-body); --bs-body-color: var(--ink); /* === Backward-compat aliases ==================================== app.css uses --accent / --accent-soft / --accent-strong for primary action colors (the old blue). We remap them to navy so all existing component rules inherit the new brand color without touching app.css. NOTE: --accent-soft here is intentionally set to primary-light (navy tint), NOT the gold glow. Use var(--accent-glow) explicitly whenever you want the gold decorative tint. ============================================================= */ --accent-strong: var(--primary-hover); --accent-soft: var(--primary-light); --bg: #f4f7fb; --bg-elevated: #ffffff; --bg-soft: rgba(20, 35, 50, .06); --surface: rgba(255, 255, 255, .78); --surface-2: #f8faff; --text: var(--ink); --border: rgba(17, 24, 39, .09); --border-strong: rgba(17, 24, 39, .16); --shadow-xs: var(--shadow); --shadow-sm: var(--shadow-md); --radius-md: 18px; } /* ================================================================ DARK MODE OVERRIDES ================================================================ */ html[data-bs-theme="dark"] { --bg: #08111f; --bg-elevated: #0f1b31; --bg-soft: rgba(20, 35, 50, .22); --surface: rgba(15, 27, 49, .82); --surface-2: #0d172b; --text: #ecf2ff; --ink: #ecf2ff; --muted: #9fb0cb; --border: rgba(236, 242, 255, .10); --border-strong: rgba(236, 242, 255, .18); --shadow: 0 12px 28px rgba(0, 0, 0, .22); --shadow-xs: 0 12px 28px rgba(0, 0, 0, .22); --shadow-md: 0 24px 54px rgba(0, 0, 0, .32); --shadow-sm: 0 24px 54px rgba(0, 0, 0, .32); --shadow-lg: 0 34px 90px rgba(0, 0, 0, .38); --primary-light: rgba(20, 35, 50, .28); --accent-soft: rgba(20, 35, 50, .28); } /* ================================================================ SECTION 2 — TYPOGRAPHY ================================================================ */ body { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6, .display-title, .page-title, .section-title, .brand-title, .kpi-value, .auth-display, .auth-title, .topbar-title, .stack-item-title, .project-card-title, .empty-title { font-family: var(--font-head); } /* ================================================================ SECTION 3 — COMPONENT OVERRIDES Replaces all hardcoded rgba(59,91,255,...) blue values from app.css with the E17 token system. ================================================================ */ /* --- Page background -------------------------------------------*/ body.app-body { background: radial-gradient(900px 600px at 0% 0%, rgba(20,35,50,.12), transparent 58%), radial-gradient(900px 640px at 100% 0%, rgba(234,180,62,.05), transparent 55%), radial-gradient(900px 640px at 50% 100%,rgba(64,89,38,.05), transparent 55%), var(--bg); } html[data-bs-theme="dark"] body.app-body { background: radial-gradient(900px 600px at 0% 0%, rgba(20,35,50,.32), transparent 58%), radial-gradient(900px 640px at 100% 0%, rgba(234,180,62,.04), transparent 55%), radial-gradient(900px 640px at 50% 100%,rgba(64,89,38,.04), transparent 55%), var(--bg); } /* --- Brand logo container ---*/ .brand-logo { background: var(--primary); } /* Brand mark fallback (when no image, text initials) */ .brand-mark:not(.brand-logo) { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); box-shadow: 0 18px 38px rgba(20,35,50,.28); } /* --- Sidebar nav ---*/ .snav a:hover, .snav a.active { background: var(--primary-light); border-color: rgba(20,35,50,.18); } /* --- Buttons ---*/ .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important; border-color: transparent !important; box-shadow: 0 12px 32px rgba(20,35,50,.22); color: var(--primary-contrast) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: linear-gradient(135deg, var(--primary-hover), var(--primary-dark)) !important; box-shadow: 0 16px 38px rgba(20,35,50,.30); } .btn-outline-secondary:hover, .btn-outline-dark:hover { background: var(--primary-light) !important; border-color: rgba(20,35,50,.24) !important; color: var(--text) !important; } /* --- Focus rings ---*/ .form-control:focus, .form-select:focus, .accordion-button:focus { border-color: rgba(20,35,50,.42) !important; box-shadow: 0 0 0 .25rem rgba(20,35,50,.10) !important; } /* --- Checkbox / Radio ---*/ .form-check-input:checked { background-color: var(--primary) !important; border-color: var(--primary) !important; } /* --- Badge soft / meta chip ---*/ .badge-soft, .meta-chip { background: var(--primary-light); color: var(--primary-dark); border-color: rgba(20,35,50,.14); } html[data-bs-theme="dark"] .badge-soft, html[data-bs-theme="dark"] .meta-chip { color: #adc4d8; } /* --- Empty state icon ---*/ .empty-icon { background: var(--primary-light); color: var(--primary); } /* --- Hero panel ---*/ .hero-panel { background: linear-gradient(135deg, rgba(20,35,50,.10), rgba(234,180,62,.06), rgba(255,255,255,.84)); } html[data-bs-theme="dark"] .hero-panel { background: linear-gradient(135deg, rgba(20,35,50,.52), rgba(234,180,62,.04), rgba(15,27,49,.94)); } .hero-panel.premium-hero { border-radius: var(--radius-lg); background: radial-gradient(520px 220px at 100% 0%, rgba(234,180,62,.20), transparent 60%), linear-gradient(135deg, rgba(20,35,50,.16), rgba(255,255,255,.94)); } html[data-bs-theme="dark"] .hero-panel.premium-hero { background: radial-gradient(520px 220px at 100% 0%, rgba(234,180,62,.07), transparent 60%), linear-gradient(135deg, rgba(20,35,50,.42), rgba(15,27,49,.97)); } /* --- Table row hover ---*/ .table-hover tbody tr:hover { background: var(--primary-light) !important; } /* --- Stack item / attendance card hover ---*/ .stack-item:hover { border-color: rgba(20,35,50,.22) !important; background: var(--primary-light); } .attendance-card:hover { border-color: rgba(20,35,50,.24) !important; background: var(--primary-light); } /* --- Progress bar ---*/ .progress.progress-saas .progress-bar { background: linear-gradient(90deg, var(--primary), var(--secondary)); } /* --- Scrollbar (gold is memorable and on-brand) ---*/ @media (pointer: fine) { ::-webkit-scrollbar-thumb { background: rgba(20,35,50,.28); } } /* --- Public shell background ---*/ .public-shell { background: radial-gradient(820px 520px at 10% 0%, rgba(20,35,50,.16), transparent 58%), radial-gradient(820px 520px at 100% 0%, rgba(234,180,62,.07), transparent 55%), var(--bg); } /* --- Auth copy panel ---*/ .auth-copy { background: linear-gradient(135deg, rgba(20,35,50,.12), rgba(234,180,62,.06), rgba(255,255,255,.72)) !important; } html[data-bs-theme="dark"] .auth-copy { background: linear-gradient(135deg, rgba(20,35,50,.48), rgba(234,180,62,.04), rgba(15,27,49,.97)) !important; } /* --- Profile cover fallback ---*/ .profile-cover-fallback { background: linear-gradient(135deg, rgba(20,35,50,.24), rgba(234,180,62,.14), rgba(64,89,38,.12)); } html[data-bs-theme="dark"] .profile-cover-fallback { background: linear-gradient(135deg, rgba(20,35,50,.64), rgba(234,180,62,.08), rgba(15,27,49,.94)); } /* --- Info section left accent bar (gold is the right call here) ---*/ .info-section-card::before { background: linear-gradient(180deg, var(--accent), rgba(234,180,62,.18)); } /* --- Info overview accent card ---*/ .info-overview-card-accent { background: linear-gradient(135deg, rgba(20,35,50,.10), rgba(234,180,62,.08)) !important; } /* --- Info overview card decorative circle ---*/ .info-overview-card::after { background: rgba(20,35,50,.06); } /* --- Info accordion expanded header ---*/ .info-accordion-button:not(.collapsed) { background: linear-gradient(135deg, rgba(20,35,50,.07), transparent) !important; } /* --- Info icons and manage icon ---*/ .info-overview-icon, .info-section-icon { background: var(--primary-light); color: var(--primary); } .info-manage-icon { background: var(--primary-light); color: var(--primary); } /* --- Info tips icon (gold highlight — this is the right decorative use) ---*/ .info-tip-item i { color: var(--accent); } /* --- Notification item hover ---*/ .notification-item:hover { background: var(--primary-light); border-color: rgba(20,35,50,.14); color: var(--text); } /* --- Quick anchor chip hover ---*/ .quick-anchor-chip:hover { background: var(--primary-light); border-color: rgba(20,35,50,.20); color: var(--text); } /* --- Leaflet map popup link ---*/ .leaflet-popup-content a { color: var(--primary); } /* --- Bootstrap semantic badge remap ---*/ .text-bg-primary-subtle { background: var(--primary-light) !important; color: var(--primary-dark) !important; } /* --- Premium hover lift border ---*/ .premium-hover-lift:hover { border-color: rgba(20,35,50,.16) !important; } /* --- General card hover border ---*/ .social-card:hover, .project-card:hover, .user-mini-card:hover, .report-project-card:hover { border-color: rgba(20,35,50,.16); }