/* NIKKISO-AYSHA — DARK THEME Scoped to so it can be switched on page by page. Currently enabled on: index.html (Home) Almost everything flips through the variables below. The rules after them only patch the handful of places style.css hardcodes white. */ /* ======================================= VARIABLE OVERRIDES ======================================= */ body.theme-dark { /* Surfaces — darkest page, then progressively raised bands */ --section-bg: #0B0B11; --section-alt-bg: #12121B; --card-bg: #16161F; --light: #12121B; --light-2: #1A1A24; --light-3: #22222E; --dark: #1E1E2C; /* Text */ --heading: #FFFFFF; --text: #B2B2C2; --text-dark: #FFFFFF; --gray: #9696A8; --gray-light: #7E7E90; --gray-dark: #C6C6D2; /* Borders */ --border: #2A2A38; --border-light: #22222E; --border-purple: #4A431F; /* Yellow reads dimmer on dark — lift the tints slightly */ --primary-light: rgba(252, 227, 0, 0.10); --primary-glow: rgba(252, 227, 0, 0.16); --primary-glow-strong: rgba(252, 227, 0, 0.35); /* Soft black shadows vanish on dark, so deepen them */ --shadow: 0 4px 20px rgba(0, 0, 0, 0.45); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55); --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.6); /* body sets background-color: var(--white) directly */ background-color: var(--section-bg); color: var(--text); color-scheme: dark; } /* ======================================= HEADER ======================================= */ body.theme-dark .header--scrolled { background-color: rgba(11, 11, 17, 0.94); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); border-bottom: 1px solid var(--border-light); } /* ======================================= HARDCODED-WHITE PATCHES ======================================= */ /* Frame around the overlapping About photo — read it as a cut-out */ body.theme-dark .about__img-secondary { border-color: var(--section-bg); } /* Numbered step badge sits on the connecting line */ body.theme-dark .process-card__number { background-color: var(--card-bg); } /* ======================================= CLIENT LOGO STRIP mix-blend-mode: multiply turns these invisible on dark, so drop the blend and give each logo a light chip to sit on. ======================================= */ /* The logo files carry transparent backgrounds, so no chip is needed — dark marks and light ones are both pushed into a single pale tone. Dimming to a near-black before inverting is what keeps a little tonal variation, so filled emblems (KWSP crest, MOF globe) don't flatten into solid blobs. */ body.theme-dark .clients__logo { mix-blend-mode: normal; filter: grayscale(1) brightness(0.28) invert(1); opacity: 0.72; } body.theme-dark .clients__logo:hover { opacity: 1; filter: grayscale(1) brightness(0.12) invert(1); } /* ======================================= GOOGLE MAPS EMBED (contact page) The embed always renders a light roadmap, which reads as a glaring white block here. Inverting and rotating the hue back gives a dark map while keeping road and label colours recognisable. ======================================= */ body.theme-dark .map-container { background-color: var(--card-bg); } body.theme-dark .map-container iframe { filter: invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(0.95); } /* ======================================= MOBILE SLIDE-IN MENU ======================================= */ @media (max-width: 991px) { body.theme-dark .nav__list { background-color: var(--section-alt-bg); box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5); } }