/** * Nova Academy — global design tokens (siswa + admin + marketing) * * Default: dark premium (midnight + royal blue + champagne accent), aligned with Nova Academy brand. * Optional light workspace: remove class `dark-mode` from (toggle) → html:not(.dark-mode) restores light palette. * * Role map: (1) primary (2) hover (3) active (4) secondary brand (5) canvas (6) section bg * (7) surface (8) elevated (9–10) borders (11–13) text (14) accent (15–18) semantic (19) focus (20) shadow/glow */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap"); /* ------------------------------------------------------------------------- */ /* Default theme — Nova Academy dark premium */ /* ------------------------------------------------------------------------- */ :root { --ed-font-display: "Plus Jakarta Sans", system-ui, sans-serif; --ed-font-ui: "Inter", system-ui, sans-serif; --ed-canvas: #050608; --ed-canvas-warm: #070a10; --ed-bg-section: #0a0e16; --ed-bg-deep: #06080c; --ed-surface: #0f141d; --ed-surface-elevated: #151b27; --ed-elevated: #1a2230; --ed-table-header: #1e2738; --ed-border: rgba(255, 255, 255, 0.055); --ed-border-strong: rgba(255, 255, 255, 0.11); --ed-text: #eceef3; --ed-text-secondary: #a8b0c2; --ed-text-muted: #6e7789; /* Elegant royal blue — not default Bootstrap blue */ --ed-primary: #6478d9; --ed-primary-hover: #7d8fe8; --ed-primary-active: #5366c9; --ed-primary-rgb: 100, 120, 217; --ed-primary-soft: rgba(var(--ed-primary-rgb), 0.14); --ed-secondary-brand: #c5ccd9; --ed-accent-student: #d4bc7a; --ed-accent-sky: #8aa6f0; --ed-accent-highlight: #e8d5b5; --ed-champagne: rgba(232, 213, 181, 0.14); --ed-glow-warm: 0 0 56px rgba(232, 213, 181, 0.06); --ed-glow-brand: 0 8px 32px rgba(var(--ed-primary-rgb), 0.2); --ed-success: #4ad29a; --ed-success-bg: rgba(74, 210, 154, 0.12); --ed-warning: #e8c066; --ed-warning-bg: rgba(232, 192, 102, 0.12); --ed-danger: #f08888; --ed-danger-bg: rgba(240, 136, 136, 0.1); --ed-info: #8cb4ff; --ed-info-bg: rgba(140, 180, 255, 0.1); --ed-radius-sm: 8px; --ed-radius-md: 12px; --ed-radius-lg: 16px; --ed-radius-xl: 20px; --ed-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --ed-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.38); --ed-shadow-card: 0 4px 28px rgba(0, 0, 0, 0.42); --ed-shadow-elevated: 0 24px 60px rgba(0, 0, 0, 0.52); --ed-space-1: 4px; --ed-space-2: 8px; --ed-space-3: 12px; --ed-space-4: 16px; --ed-space-5: 24px; --ed-space-6: 32px; --ed-sidebar-w: 260px; --ed-sidebar-collapsed: 72px; --ed-topbar-h: 56px; --ed-focus-ring: 0 0 0 3px rgba(var(--ed-primary-rgb), 0.4); --ed-focus-ring-inset: inset 0 0 0 2px rgba(var(--ed-primary-rgb), 0.5); --ed-on-accent-bg: #050608; --ed-link: #9eb0ff; --ed-link-hover: #d0d8ff; --bs-primary: var(--ed-primary); --bs-primary-rgb: var(--ed-primary-rgb); --bs-link-color: var(--ed-link); --bs-link-hover-color: var(--ed-link-hover); --bs-body-bg: var(--ed-canvas); --bs-body-color: var(--ed-text); --bs-border-color: var(--ed-border-strong); } html { color-scheme: dark; } /* ------------------------------------------------------------------------- */ /* Light workspace (toggle off) — conversion-friendly, same structure */ /* ------------------------------------------------------------------------- */ html:not(.dark-mode) { color-scheme: light; --ed-canvas: #f3f2ef; --ed-canvas-warm: #ebe8e1; --ed-bg-section: #e8e5de; --ed-bg-deep: #f0eeea; --ed-surface: #ffffff; --ed-surface-elevated: #ffffff; --ed-elevated: #f7f6f3; --ed-table-header: #e8e4dc; --ed-border: rgba(8, 12, 22, 0.08); --ed-border-strong: rgba(8, 12, 22, 0.14); --ed-text: #080b14; --ed-text-secondary: #3a4152; --ed-text-muted: #5c6470; --ed-primary: #3d52a8; --ed-primary-hover: #344891; --ed-primary-active: #2d3d7a; --ed-primary-rgb: 61, 82, 168; --ed-primary-soft: rgba(var(--ed-primary-rgb), 0.1); --ed-secondary-brand: #121826; --ed-accent-student: #b8953c; --ed-accent-sky: #3d5a8c; --ed-accent-highlight: #c9a962; --ed-champagne: #f5f0e6; --ed-glow-warm: 0 0 60px rgba(201, 169, 98, 0.1); --ed-glow-brand: 0 8px 32px rgba(var(--ed-primary-rgb), 0.18); --ed-success: #0b6e56; --ed-success-bg: #e8f7f2; --ed-warning: #a65f0c; --ed-warning-bg: #fff8eb; --ed-danger: #b42318; --ed-danger-bg: #fef2f0; --ed-info: #2a4f8f; --ed-info-bg: #eef3fb; --ed-shadow-sm: 0 1px 2px rgba(8, 12, 22, 0.04); --ed-shadow-md: 0 6px 20px rgba(8, 12, 22, 0.07); --ed-shadow-card: 0 1px 0 rgba(8, 12, 22, 0.04), 0 10px 28px rgba(8, 12, 22, 0.08); --ed-shadow-elevated: 0 20px 50px rgba(8, 12, 22, 0.12); --ed-focus-ring: 0 0 0 3px rgba(var(--ed-primary-rgb), 0.28); --ed-focus-ring-inset: inset 0 0 0 2px rgba(var(--ed-primary-rgb), 0.4); --ed-link: var(--ed-primary); --ed-link-hover: var(--ed-primary-hover); --bs-primary: var(--ed-primary); --bs-primary-rgb: var(--ed-primary-rgb); --bs-link-color: var(--ed-primary); --bs-link-hover-color: var(--ed-primary-hover); --bs-body-bg: var(--ed-canvas); --bs-body-color: var(--ed-text); --bs-border-color: var(--ed-border-strong); } /* Class retained for hundreds of layout/component overrides in inc/css.php */ html.dark-mode { color-scheme: dark; } body { font-family: var(--ed-font-ui); font-size: 16px; color: var(--ed-text); background-color: var(--ed-canvas) !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ed-font-display); font-weight: 600; color: var(--ed-text); } .btn-primary { --bs-btn-bg: var(--ed-primary); --bs-btn-border-color: var(--ed-primary); --bs-btn-hover-bg: var(--ed-primary-hover); --bs-btn-hover-border-color: var(--ed-primary-hover); --bs-btn-active-bg: var(--ed-primary-active); --bs-btn-active-border-color: var(--ed-primary-active); --bs-btn-disabled-bg: var(--ed-primary); --bs-btn-disabled-border-color: var(--ed-primary); --bs-btn-color: #f8f9fc; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; font-weight: 600; } .btn-outline-primary { --bs-btn-color: var(--ed-link); --bs-btn-border-color: rgba(var(--ed-primary-rgb), 0.45); --bs-btn-hover-bg: rgba(var(--ed-primary-rgb), 0.22); --bs-btn-hover-border-color: var(--ed-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: rgba(var(--ed-primary-rgb), 0.28); --bs-btn-active-border-color: var(--ed-primary); --bs-btn-active-color: #fff; } html:not(.dark-mode) .btn-outline-primary { --bs-btn-color: var(--ed-primary); --bs-btn-border-color: var(--ed-primary); --bs-btn-hover-bg: var(--ed-primary-soft); --bs-btn-hover-border-color: var(--ed-primary); --bs-btn-hover-color: var(--ed-primary); --bs-btn-active-bg: var(--ed-primary-soft); --bs-btn-active-border-color: var(--ed-primary); --bs-btn-active-color: var(--ed-primary); } .btn-outline-secondary { --bs-btn-color: var(--ed-text-secondary); --bs-btn-border-color: var(--ed-border-strong); --bs-btn-hover-bg: var(--ed-primary-soft); --bs-btn-hover-border-color: var(--ed-border-strong); --bs-btn-hover-color: var(--ed-link); } html:not(.dark-mode) .btn-outline-secondary { --bs-btn-hover-color: var(--ed-primary); } .btn-secondary { --bs-btn-bg: var(--ed-elevated); --bs-btn-border-color: var(--ed-border-strong); --bs-btn-hover-bg: var(--ed-surface-elevated); --bs-btn-hover-border-color: var(--ed-border-strong); --bs-btn-color: var(--ed-text); } html:not(.dark-mode) .btn-secondary { --bs-btn-bg: #4a5568; --bs-btn-border-color: #4a5568; --bs-btn-hover-bg: #3d4654; --bs-btn-hover-border-color: #3d4654; --bs-btn-color: #fff; } .form-control, .form-select { background-color: var(--ed-elevated); border-color: var(--ed-border-strong); color: var(--ed-text); } html:not(.dark-mode) .form-control, html:not(.dark-mode) .form-select { background-color: var(--ed-surface); } .form-control:focus, .form-select:focus { border-color: var(--ed-primary); box-shadow: var(--ed-focus-ring); background-color: var(--ed-elevated); } html:not(.dark-mode) .form-control:focus, html:not(.dark-mode) .form-select:focus { background-color: var(--ed-surface); } .form-control::placeholder { color: var(--ed-text-muted); } .text-muted { color: var(--ed-text-muted) !important; } .progress { background-color: var(--ed-primary-soft); } .progress-bar { background-color: var(--ed-primary); } .badge.bg-primary { background-color: var(--ed-primary) !important; } .alert-success { background-color: var(--ed-success-bg); color: var(--ed-success); border-color: rgba(74, 210, 154, 0.28); } .alert-warning { background-color: var(--ed-warning-bg); color: var(--ed-warning); border-color: rgba(232, 192, 102, 0.28); } .alert-danger { background-color: var(--ed-danger-bg); color: var(--ed-danger); border-color: rgba(240, 136, 136, 0.28); } .alert-info { background-color: var(--ed-info-bg); color: var(--ed-info); border-color: rgba(140, 180, 255, 0.28); } html:not(.dark-mode) .alert-success { border-color: rgba(11, 110, 86, 0.25); } html:not(.dark-mode) .alert-warning { border-color: rgba(166, 95, 12, 0.25); } html:not(.dark-mode) .alert-danger { border-color: rgba(180, 35, 24, 0.25); } html:not(.dark-mode) .alert-info { border-color: rgba(42, 79, 143, 0.25); }