/** * ALF Dark Mode — alf-dark-mode.css * ==================================== * Professional dark theme for all site components. * Activated by adding .alf-dark class to * * To REVERT: Remove this file and the tag in header.php */ /* ── Global Transition ───────────────────────────────── */ body, body * { transition-property: background-color, color, border-color, box-shadow; transition-duration: 0.3s; transition-timing-function: ease; } /* ── Dark Mode Toggle Button ─────────────────────────── */ #alf-dm-toggle { position: fixed; bottom: 32px; right: 32px; z-index: 10000; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: #1a254b; box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 0 rgba(31,82,184,0.4); transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; outline: none; } #alf-dm-toggle:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 0 0 6px rgba(31,82,184,0.15); } #alf-dm-toggle svg { width: 20px; height: 20px; transition: opacity 0.25s ease, transform 0.4s ease; } #alf-dm-toggle .icon-moon { color: #fff; } #alf-dm-toggle .icon-sun { color: #fbbf24; display: none; } /* When dark mode is ON */ body.alf-dark #alf-dm-toggle { background: #2a2a3a; box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 0 rgba(251,191,36,0.3); } body.alf-dark #alf-dm-toggle:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 6px rgba(251,191,36,0.12); } body.alf-dark #alf-dm-toggle .icon-moon { display: none; } body.alf-dark #alf-dm-toggle .icon-sun { display: block; } /* ── Global Base ─────────────────────────────────────── */ body.alf-dark { background: #0c0f1a !important; color: #c8cfe0 !important; } /* ── Navbar ──────────────────────────────────────────── */ body.alf-dark .main-nav, body.alf-dark .main-nav.is-sticky { background: rgba(10, 13, 26, 0.97) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; backdrop-filter: blur(16px); } body.alf-dark .main-nav .nav-link { color: rgba(200,207,224,0.85) !important; } body.alf-dark .main-nav .nav-link:hover, body.alf-dark .main-nav .nav-link.active { color: #fff !important; } body.alf-dark .dropdown-menu { background: #13182b !important; border: 1px solid rgba(255,255,255,0.08) !important; } body.alf-dark .dropdown-menu .nav-link { color: rgba(200,207,224,0.8) !important; } /* ── Hero Section ────────────────────────────────────── */ body.alf-dark .hp-hero { filter: brightness(0.85); } /* ── Section Backgrounds & Text ─────────────────────── */ body.alf-dark .hp-about, body.alf-dark .hp-practices, body.alf-dark .hp-team, body.alf-dark .hp-news, body.alf-dark .hp-track-record { background: #0e1221 !important; } body.alf-dark .hp-cases { background: #0b0f1c !important; } /* Section headings */ body.alf-dark .hp-section-title { color: #f0f4ff !important; } body.alf-dark .hp-section-sub { color: rgba(200,207,224,0.7) !important; } body.alf-dark .hp-badge { background: rgba(31,82,184,0.2) !important; color: #7aa4f0 !important; border-color: rgba(31,82,184,0.3) !important; } /* ── About Section ───────────────────────────────────── */ body.alf-dark .hp-about__text p, body.alf-dark .hp-about__text li { color: rgba(200,207,224,0.75) !important; } body.alf-dark .hp-about__stat-label { color: rgba(200,207,224,0.6) !important; } /* ── Practice Area Cards ─────────────────────────────── */ body.alf-dark .hp-practice-card { background: #161b2e !important; border-color: rgba(255,255,255,0.06) !important; } body.alf-dark .hp-practice-card:hover { background: #1c2340 !important; } body.alf-dark .hp-practice-card__title { color: #e8eeff !important; } body.alf-dark .hp-practice-card__desc { color: rgba(200,207,224,0.65) !important; } /* ── Case Study Cards ────────────────────────────────── */ body.alf-dark .hp-case-card { background: #13182b !important; border-color: rgba(255,255,255,0.05) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important; } body.alf-dark .hp-case-card__body { background: #13182b !important; } body.alf-dark .hp-case-card__title { color: #e0e8ff !important; } body.alf-dark .hp-case-card__desc { color: rgba(200,207,224,0.65) !important; } /* ── Team Cards ──────────────────────────────────────── */ body.alf-dark .hp-team-card { background: #13182b !important; box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important; } body.alf-dark .hp-team-card__name { color: #e0e8ff !important; } body.alf-dark .hp-team-card__role, body.alf-dark .hp-team-card__dept { color: rgba(200,207,224,0.6) !important; } /* ── News Cards ──────────────────────────────────────── */ body.alf-dark .hp-news-card { background: #13182b !important; border-color: rgba(255,255,255,0.05) !important; } body.alf-dark .hp-news-card__body { background: #13182b !important; } body.alf-dark .hp-news-card__title { color: #e0e8ff !important; } body.alf-dark .hp-news-card__excerpt { color: rgba(200,207,224,0.65) !important; } body.alf-dark .hp-news-card__meta { color: rgba(200,207,224,0.5) !important; } /* ── Stats / Track Record ────────────────────────────── */ body.alf-dark .hp-track-record [style*="background:#fff"] { background: #161b2e !important; border-color: rgba(255,255,255,0.07) !important; } body.alf-dark .hp-track-record h3[style*="color:#1a254b"] { color: #e0e8ff !important; } body.alf-dark .hp-track-record strong[style*="color:#333"] { color: rgba(200,207,224,0.85) !important; } body.alf-dark .hp-track-record span[style*="color:#999"] { color: rgba(200,207,224,0.45) !important; } /* Achievement section (old hp-achieve) */ body.alf-dark .hp-achieve { background: #0e1221 !important; } body.alf-dark .hp-achieve__card { background: #161b2e !important; border-color: rgba(255,255,255,0.06) !important; } body.alf-dark .hp-achieve__num { color: #7aa4f0 !important; } body.alf-dark .hp-achieve__label { color: #e0e8ff !important; } body.alf-dark .hp-achieve__sub { color: rgba(200,207,224,0.5) !important; } /* ── Inner Pages (alf-inner-hero, alf-article) ───────── */ body.alf-dark .alf-inner-content-wrap { background: #0e1221 !important; } body.alf-dark .alf-article-summary { background: #161b2e !important; border-left-color: #1F52B8 !important; } body.alf-dark .alf-article-summary p, body.alf-dark .alf-article-body p { color: rgba(200,207,224,0.75) !important; } /* ── Footer ──────────────────────────────────────────── */ body.alf-dark .alf-footer-v2 { background: linear-gradient(135deg, #04060f 0%, #0a1530 50%, #060a1a 100%) !important; } /* ── Clients Bar ─────────────────────────────────────── */ body.alf-dark .hp-clients { background: #0b0f1c !important; } /* ── Generic Override ────────────────────────────────── */ body.alf-dark .card, body.alf-dark .box, body.alf-dark [class*="-card"], body.alf-dark [class*="-box"] { border-color: rgba(255,255,255,0.06) !important; } body.alf-dark p:not([style*="color:#"]):not([style*="rgba"]) { color: rgba(200,207,224,0.75) !important; } body.alf-dark h1:not([style*="color"]), body.alf-dark h2:not([style*="color"]), body.alf-dark h3:not([style*="color"]), body.alf-dark h4:not([style*="color"]), body.alf-dark h5:not([style*="color"]) { color: #f0f4ff !important; }