/* * Public (logged-out) dark mode for landing.php, about.php, login.php and * complete_profile.php. The preference is stored in localStorage, so it * survives closing the browser but belongs to that browser alone. Root class * `dark-mode` is set on — NOT on , which is what the portals use. * Navy accents are swapped for a lighter blue by redefining --crest-navy. */ html.dark-mode { --crest-navy: #6ea0ff; } /* ── Page backgrounds ── */ html.dark-mode body { background-color: #0f1626 !important; color: #cbd5e1; } html.dark-mode .about-section { background: #0f1626; } html.dark-mode .about-section.alt { background: #131c2e !important; } html.dark-mode .about-hero { background: linear-gradient(135deg, rgba(8,14,26,.96) 0%, rgba(14,26,48,.94) 100%) !important; } html.dark-mode .crest-hero { background: linear-gradient(135deg, rgba(6,11,22,.9) 0%, rgba(10,20,40,.85) 100%), url('../assets/cspc-blue-2-scaled.jpg') center/cover no-repeat !important; } /* ── Navbar ── */ html.dark-mode .crest-navbar { background: #131c2e !important; box-shadow: 0 2px 12px rgba(0,0,0,.4); } html.dark-mode .crest-navbar .brand-text { color: #cbd5e1; } /* ── Surfaces ── */ html.dark-mode .card, html.dark-mode .info-card, html.dark-mode .flow-step, html.dark-mode .all-job-card, html.dark-mode .login-card, html.dark-mode .team-card, html.dark-mode .modal-content { background: #1b2333 !important; border-color: #2a3550 !important; color: #cbd5e1; } html.dark-mode .kpi-card { background: linear-gradient(160deg, #1b2333 0%, #172033 100%) !important; border-color: #2a3550 !important; color: #cbd5e1; } /* ── Headings & text ── */ html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 { color: #e2e8f0; } html.dark-mode .info-card h5, html.dark-mode .flow-step h6, html.dark-mode .team-name, html.dark-mode .all-job-card .card-title { color: #e2e8f0 !important; } html.dark-mode .info-card p, html.dark-mode .flow-step p, html.dark-mode .feature-list li, html.dark-mode .card-summary, html.dark-mode .team-role, html.dark-mode .section-subtitle, html.dark-mode .job-dept, html.dark-mode .card-dept { color: #94a3b8 !important; } html.dark-mode .text-muted { color: #94a3b8 !important; } html.dark-mode .text-gray-800, html.dark-mode .text-gray-700 { color: #cbd5e1 !important; } /* ── Accents / chips / callouts ── */ html.dark-mode .callout { background: #172033 !important; border-color: #2a3550 !important; color: #cbd5e1 !important; } html.dark-mode .role-chip { background: #1e2a44 !important; border-color: #2f3d5e !important; color: #9db8ff !important; } html.dark-mode .bg-light { background-color: #222c40 !important; color: #cbd5e1 !important; } html.dark-mode .team-social a { background: #222c40; color: #9db8ff; } html.dark-mode .all-job-card .meta-value { color: #cbd5e1 !important; } html.dark-mode hr { border-top-color: #2a3550; } /* ── Forms ── */ html.dark-mode .form-control { background: #141c2c !important; border-color: #2a3550 !important; color: #e2e8f0 !important; } html.dark-mode .form-control::placeholder { color: #6b7488 !important; } /* ── Tables ── */ html.dark-mode .table, html.dark-mode table { color: #cbd5e1; } html.dark-mode .table-bordered th, html.dark-mode .table-bordered td { border-color: #2a3550 !important; } /* ── Login Google button ── */ html.dark-mode .btn-google { background: #222c40 !important; border-color: #2a3550 !important; color: #e2e8f0 !important; } html.dark-mode .btn-google:hover { background: #2a3550 !important; color: #fff !important; } /* ── Dark-mode toggle button ── */ .dark-toggle { border-radius: 50% !important; width: 34px; height: 34px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } .dark-toggle-float { position: fixed; top: 1rem; right: 1rem; z-index: 1050; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: #0f2e66; box-shadow: 0 4px 14px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, color .2s; } html.dark-mode .dark-toggle-float { background: #1b2333; color: #f6c23e; } .dark-toggle-icon { font-size: 1rem; } /* The switch animation itself lives in theme-wipe.css / theme-wipe.js, which * these pages share with all four portals. Load both alongside this file. */