/* ============================================================ Denka Kogyo — Dark mode overrides Strategy: light is default. Dark mode is opt-in via . The site is already built with Tailwind classes, so we override the most-used surface, text and border tokens at the class-selector level. Palette inspired by Siemens iX design system: - No pure black anywhere. Deepest surface is #131820. - Deep slate-blue base instead of warm gray. - Turquoise accent (#00C2C2) borrowed from Siemens brand for hover/focus/secondary accents on otherwise-blue elements. - Denka red logo + red CTA buttons fully preserved — red on deep petrol slate reads as industrial signal indicator. ============================================================ */ :root { --th-bg: #F6F7ED; /* offwhite — page background */ --th-surface: #FFFFFF; /* white — cards */ --th-deep: #001F3F; /* navy — dark sections */ --th-text: #1A202C; /* ink */ --th-heading: #001F3F; /* navy headings */ --th-soft: #4A5568; /* slate body */ --th-border: rgba(0,31,63,0.10); --th-border-soft: rgba(0,31,63,0.05); --th-border-strong: rgba(0,31,63,0.15); } /* Smooth color transition across theme switch */ html, body, header, footer, section, div, nav, a, span, p, h1, h2, h3, h4, h5, h6, button { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; } /* ============================================================ DARK THEME — Siemens-inspired deep slate No pure black. Three-tier surface system: page bg #1A2128 (deep slate-blue, like Siemens iX) card #242C35 (lifted ~10% above page) deep band #131820 (deeper than page, still not black) Turquoise accent for blue-family hover/focus/link states. ============================================================ */ html[data-theme="dark"] { --th-bg: #1A2128; /* deep slate-blue, no pure black */ --th-surface: #242C35; /* card surface, ~10% lifted */ --th-deep: #131820; /* navy band, deeper but still slate */ --th-text: #E6EAEF; /* cool off-white body text */ --th-heading: #F2F5F8; --th-soft: #A8B3BD; /* Siemens-style mid gray for muted */ --th-border: rgba(220,230,240,0.10); --th-border-soft: rgba(220,230,240,0.06); --th-border-strong:rgba(220,230,240,0.15); color-scheme: dark; } /* ---------- Page-level background & body text ---------- */ html[data-theme="dark"] body { background-color: var(--th-bg); color: var(--th-text); } /* ---------- Surface overrides (most common Tailwind classes used) ---------- */ html[data-theme="dark"] .bg-offwhite { background-color: var(--th-bg) !important; } html[data-theme="dark"] .bg-white { background-color: var(--th-surface) !important; } html[data-theme="dark"] .hover\:bg-offwhite:hover { background-color: #2C343E !important; } html[data-theme="dark"] .hover\:bg-white\/10:hover{ background-color: rgba(220,230,240,0.08) !important; } /* Keep .bg-navy sections deeply dark (they already are) */ html[data-theme="dark"] .bg-navy { background-color: var(--th-deep) !important; } /* Brand colour blocks remain — denkared/green/lime stay the same. These already work on dark backgrounds. */ /* ---------- Text colour overrides ---------- */ html[data-theme="dark"] .text-navy { color: var(--th-heading) !important; } html[data-theme="dark"] .text-ink { color: var(--th-text) !important; } html[data-theme="dark"] .text-slate { color: var(--th-soft) !important; } html[data-theme="dark"] .text-navy\/60 { color: rgba(230,234,239,0.60) !important; } html[data-theme="dark"] .text-navy\/40 { color: rgba(230,234,239,0.40) !important; } /* Headings — Tailwind already sets `color: var(--color-navy)` on h1-h6 via the global stylesheet. Override that root behaviour: */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--th-heading); } /* Brand "blue" text uses Siemens turquoise on dark — same family as the petrol-slate base, gives the design a unified accent system */ html[data-theme="dark"] .text-blue { color: #00C2C2 !important; } html[data-theme="dark"] .hover\:text-blue:hover { color: #33D4D4 !important; } html[data-theme="dark"] .hover\:border-blue:hover { border-color: #00C2C2 !important; } html[data-theme="dark"] .hover\:border-blue\/30:hover { border-color: rgba(0,194,194,0.30) !important; } html[data-theme="dark"] .group:hover .group-hover\:text-blue { color: #00C2C2 !important; } /* Brand green stays readable on dark — slightly lift it */ html[data-theme="dark"] .text-green { color: #4FB783 !important; } /* ---------- Border overrides ---------- */ html[data-theme="dark"] .border-navy\/5 { border-color: var(--th-border-soft) !important; } html[data-theme="dark"] .border-navy\/10 { border-color: var(--th-border) !important; } html[data-theme="dark"] .border-navy\/15 { border-color: var(--th-border-strong) !important; } html[data-theme="dark"] .md\:border-navy\/15 { border-color: var(--th-border-strong) !important; } /* ---------- Header (sticky bar) ---------- */ /* Light: bg-offwhite/85 + backdrop-blur. In dark we want a deep translucent bar. */ html[data-theme="dark"] header.bg-offwhite\/85 { background-color: rgba(26, 33, 40, 0.82) !important; border-bottom-color: var(--th-border) !important; } /* Mobile menu drawer uses bg-white */ html[data-theme="dark"] #mobile-menu.bg-white { background-color: var(--th-surface) !important; border-top-color: var(--th-border) !important; } /* Dropdown menus (Industries / Capabilities) — bg-white shadow card */ html[data-theme="dark"] nav .bg-white { background-color: var(--th-surface) !important; border-color: var(--th-border) !important; } /* ---------- Buttons ---------- */ /* .btn-secondary in light: navy border + navy text → on dark looks invisible */ html[data-theme="dark"] .btn-secondary { border-color: rgba(230,234,239,0.45) !important; color: var(--th-text) !important; } html[data-theme="dark"] .btn-secondary:hover { background-color: rgba(0,194,194,0.10) !important; border-color: #00C2C2 !important; color: var(--th-heading) !important; } /* .btn-ghost: navy text → make it light, hover to turquoise */ html[data-theme="dark"] .btn-ghost { color: var(--th-text) !important; } html[data-theme="dark"] .btn-ghost:hover { color: #00C2C2 !important; } /* Mobile toggle icon */ html[data-theme="dark"] #mobile-toggle { color: var(--th-text); } /* ---------- Gradients used on hero/cards ---------- .bg-gradient-to-br from-navy/95 etc are inline opacity overlays on hero images. They already give a dark look; leave them untouched so the hero looks identical in both themes. But the ESG section uses `from-green/5 via-offwhite to-mantis/10` — the via-offwhite stop renders a bright cream band in the middle of an otherwise dark page in dark mode. Neutralise it. */ html[data-theme="dark"] .via-offwhite { --tw-gradient-via-position: ; --tw-gradient-to: rgba(116, 195, 101, 0.08) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } /* Brand-translucent hex tiles in ESG section: lift them a touch on dark so the inline-styled rgba(0,128,76,0.15) doesn't disappear into the slate, and flip text-navy inside hex tiles to light so it's readable. */ html[data-theme="dark"] .hex { filter: brightness(1.5) saturate(1.1); } html[data-theme="dark"] .hex .text-navy { color: #F2F5F8 !important; } /* ---------- Grid background pattern (lines on cards) ---------- */ html[data-theme="dark"] .bg-grid { background-image: linear-gradient(to right, rgba(220,230,240,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(220,230,240,0.06) 1px, transparent 1px) !important; } /* ---------- Selection ---------- */ html[data-theme="dark"] ::selection { background-color: #00C2C2; color: #131820; } /* ---------- KOGYO / THAILAND subtitle in header (inline style="color: #001F3F") ---------- */ /* These have inline styles so we override with attribute selector */ html[data-theme="dark"] header span[style*="#001F3F"] { color: var(--th-heading) !important; } /* ---------- Brand logo: show light variant in light mode, dark in dark ---------- New logo includes "DENKA KOGYO / THAILAND" wordmark. The light file has black text on transparent; the dark file has off-white text on transparent. Only the matching one is visible at a time. Sized explicitly here (not via Tailwind utility classes) because the new logo wasn't in the source when Tailwind generated its stylesheet, so `h-10 lg:h-12 w-auto` rules don't exist for this element. */ .brand-logo { height: 40px; width: auto; object-fit: contain; display: inline-block; } @media (min-width: 1024px) { .brand-logo { height: 52px; } } .brand-logo-dark { display: none !important; } .brand-logo-light { display: inline-block !important; } html[data-theme="dark"] .brand-logo-light { display: none !important; } html[data-theme="dark"] .brand-logo-dark { display: inline-block !important; } /* Footer uses the same .brand-logo class — make it a touch smaller and single-coloured (footer is always dark navy, so always use dark variant). */ footer .brand-logo { height: 44px; } @media (min-width: 1024px) { footer .brand-logo { height: 52px; } } footer .brand-logo-light { display: none !important; } footer .brand-logo-dark { display: inline-block !important; } /* ---------- Logo SVG path is filled with #D72027 (denkared) which is fine on both themes ---------- */ /* ============================================================ THEME TOGGLE BUTTON Lives in the header. Shows a sun in dark mode (click to go light) and a moon in light mode (click to go dark). ============================================================ */ /* :where(...) gives this rule zero specificity for `display`, so Tailwind's `.lg:hidden { display: none }` (inside the 1024px media query) can still override it on desktop for the mobile variant of the toggle. */ :where(.theme-toggle) { display: inline-flex; } .theme-toggle { align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 0.25rem; border: 1px solid rgba(0, 31, 63, 0.15); border-radius: 2px; background: transparent; color: #001F3F; cursor: pointer; transition: all 200ms ease; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background-color: rgba(0, 31, 63, 0.05); border-color: rgba(0, 31, 63, 0.30); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle { border-color: rgba(230,234,239,0.20); color: #DBE64C; } html[data-theme="dark"] .theme-toggle:hover { background-color: rgba(0,194,194,0.10); border-color: #00C2C2; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Mobile: smaller toggle, sits next to the burger */ @media (max-width: 1023px) { .theme-toggle { width: 36px; height: 36px; } } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { html, body, header, footer, section, div, nav, a, span, p, h1, h2, h3, h4, h5, h6, button { transition: none !important; } }