/* Ekonbee Dark Mode Activated via [data-theme="dark"] on . The chrome.js theme manager handles persistence + the toggle button. Honors prefers-color-scheme: dark when no preference is saved. Strategy: pages.css/styles.css/refine.css were authored light-first with many hardcoded #fff / #faf7f4 / #3b3330 values. We override those by selector here. */ /* ============================================================ Token overrides — dark palette ============================================================ */ html[data-theme="dark"] { --bg: #0e0c0b; --bg-section: #14110f; --bg-subtle: #1a1614; --bg-dark: #050404; --paper: #14110f; --surface: #18130f; --surface-dark: #0a0807; --surface-alt: #1c1815; --fg: #d6cfc8; --fg-heading: #f5efe8; --fg-muted: #9d928a; --fg-on-dark: #ffffff; --contrast: #ffffff; --ink: #f5efe8; --ink-2: #c4bbb3; --ink-3: #9d928a; --border: rgba(245, 239, 232, 0.10); --border-strong: rgba(245, 239, 232, 0.20); --rule: 1px solid rgba(245, 239, 232, 0.10); --nav-fg: #e8e2dc; --nav-dropdown-bg: #18130f; --nav-dropdown-fg: #e8e2dc; --link: #f0b6ff; --link-hover: var(--ekb-orange); --shadow-sm: 0 2px 15px rgba(0, 0, 0, 0.55); --shadow-md: 0 0 18px rgba(0, 0, 0, 0.6); --shadow-lg: 0 0 25px rgba(0, 0, 0, 0.65); --shadow-xl: 0 0 30px rgba(0, 0, 0, 0.75); color-scheme: dark; } html[data-theme="dark"] body { background: var(--bg); color: var(--fg); } /* ============================================================ Headings — every framework declares its own colors. Force. ============================================================ */ 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, 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"] .display, html[data-theme="dark"] .section-title { color: var(--fg-heading); } html[data-theme="dark"] .lead, html[data-theme="dark"] .p, html[data-theme="dark"] p { color: var(--fg); } /* ============================================================ Section backgrounds — pages.css overrides ============================================================ */ html[data-theme="dark"] .detail, html[data-theme="dark"] .contact, html[data-theme="dark"] .insights-list, html[data-theme="dark"] .svc-index, html[data-theme="dark"] .case-list, html[data-theme="dark"] .about-story, html[data-theme="dark"] .about-team { background: var(--bg) !important; } html[data-theme="dark"] .about-values, html[data-theme="dark"] .not-found { background: var(--bg-section) !important; } /* Branded about section + photo (light cream → dark warm) */ html[data-theme="dark"] .about-story--branded { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-section) 100%) !important; } html[data-theme="dark"] .about-story__bg { opacity: .35; } html[data-theme="dark"] .about-story__photo { box-shadow: 0 20px 50px rgba(238,144,2,.18), 0 4px 12px rgba(0,0,0,.4); } html[data-theme="dark"] .about-story__photo::after { background: linear-gradient(135deg, rgba(253,184,19,.18) 0%, transparent 35%, transparent 65%, rgba(193,38,140,.18) 100%); } /* About hive hero — dim lattice + cells contrast */ html[data-theme="dark"] .pgh-art--about .ab-cell use[fill*="ab-comb"] { fill: #2a2018 !important; } html[data-theme="dark"] .pgh-art--about .ab-cell text { fill: #f5efe8 !important; } html[data-theme="dark"] .pgh-art--about .ab-cell text:nth-child(3) { fill: #ffd08a !important; } html[data-theme="dark"] .pgh-art--about .ab-lattice use { stroke: #ffd08a !important; opacity: .25 !important; } /* Team member cards in dark */ html[data-theme="dark"] .member { background: var(--surface) !important; border: 1px solid var(--border) !important; } html[data-theme="dark"] .member h4 { color: var(--fg-heading) !important; } html[data-theme="dark"] .member p { color: var(--fg-muted) !important; } html[data-theme="dark"] .detail__aside, html[data-theme="dark"] .contact__card, html[data-theme="dark"] .chip, html[data-theme="dark"] .member, html[data-theme="dark"] .ind-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--fg) !important; } html[data-theme="dark"] .value { background: var(--surface) !important; border-color: var(--border) !important; } html[data-theme="dark"] .prose blockquote { background: var(--surface) !important; color: var(--fg-heading) !important; } html[data-theme="dark"] .prose p, html[data-theme="dark"] .prose ul li, html[data-theme="dark"] .prose ol li, html[data-theme="dark"] .svc-row__desc, html[data-theme="dark"] .page-hero__lede, html[data-theme="dark"] .hero__lede { color: var(--fg) !important; } html[data-theme="dark"] .prose h2, html[data-theme="dark"] .prose h3, html[data-theme="dark"] .prose h4 { color: var(--fg-heading) !important; } html[data-theme="dark"] .page-hero { background: radial-gradient(900px 400px at 10% 120%, rgba(238,144,2,.10), transparent 60%), radial-gradient(900px 400px at 90% 0%, rgba(193,38,140,.14), transparent 60%), #0e0c0b !important; border-bottom-color: var(--border) !important; } html[data-theme="dark"] .page-hero h1 { color: var(--fg-heading) !important; } html[data-theme="dark"] .page-hero__crumbs, html[data-theme="dark"] .page-hero__crumbs .sep { color: var(--fg-muted) !important; } html[data-theme="dark"] .page-hero__crumbs a { color: var(--fg-muted) !important; } html[data-theme="dark"] .page-hero__crumbs a:hover { color: #f0b6ff !important; } html[data-theme="dark"] .svc-row { border-color: var(--border) !important; } html[data-theme="dark"] .svc-row:last-child { border-color: var(--border) !important; } html[data-theme="dark"] .svc-row:hover { background: var(--surface) !important; } html[data-theme="dark"] .svc-row__title p { color: var(--fg-muted) !important; } /* Insight chips */ html[data-theme="dark"] .chip { background: var(--surface-alt) !important; border-color: var(--border-strong) !important; color: var(--fg-heading) !important; } html[data-theme="dark"] .chip.is-active, html[data-theme="dark"] .chip:hover { background: rgba(231, 163, 255, .12) !important; border-color: #e7a3ff !important; color: #f0c8ff !important; } /* ============================================================ Header / nav ============================================================ */ html[data-theme="dark"] .hdr { background: rgba(14, 12, 11, 0.92) !important; border-bottom-color: var(--border) !important; backdrop-filter: saturate(1.2) blur(10px); } html[data-theme="dark"] .hdr__logo .wordmark { color: var(--fg-heading) !important; } /* Logo swap — show the dark-bg lockup PNG; hide light lockup + CSS wordmark */ html[data-theme="dark"] .hdr__logo-img--light { display: none !important; } html[data-theme="dark"] .hdr__logo-img--dark { display: block !important; height: 38px; width: auto; max-width: 200px; object-fit: contain; } html[data-theme="dark"] .hdr__logo-word { display: none !important; font-family: var(--font-heading); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; color: var(--fg-heading) !important; } html[data-theme="dark"] .hdr__nav a { color: var(--fg) !important; } html[data-theme="dark"] .hdr__nav a:hover, html[data-theme="dark"] .hdr__nav a.is-active, html[data-theme="dark"] .hdr__item--mega.is-open > a { color: #f0b6ff !important; background: rgba(231, 163, 255, .08) !important; } /* Mega panel */ html[data-theme="dark"] .mega-panel, html[data-theme="dark"] .mega-panel__inner, html[data-theme="dark"] [class*="mega"] .panel, html[data-theme="dark"] .nav-dropdown { background: var(--surface) !important; border-color: var(--border) !important; color: var(--fg) !important; } html[data-theme="dark"] .mega-panel__card { background: transparent !important; border-color: var(--border) !important; } html[data-theme="dark"] .mega-panel__card:hover { background: var(--surface-alt) !important; box-shadow: 0 8px 20px -14px rgba(0,0,0,.6) !important; } html[data-theme="dark"] .mega-panel__card h4, html[data-theme="dark"] .mega-panel__card .ttl { color: var(--fg-heading) !important; } html[data-theme="dark"] .mega-panel__card p, html[data-theme="dark"] .mega-panel__card .desc { color: var(--fg-muted) !important; } html[data-theme="dark"] .mega-backdrop { background: rgba(0,0,0,.6) !important; } /* Utility bar — already dark, leave as-is */ /* ============================================================ Buttons ============================================================ */ html[data-theme="dark"] .btn--accent { background: #f5efe8 !important; color: #0e0c0b !important; border-color: #f5efe8 !important; } html[data-theme="dark"] .btn--accent:hover { background: #fff !important; color: #0e0c0b !important; } html[data-theme="dark"] .btn--outline { background: transparent !important; border-color: var(--border-strong) !important; color: var(--fg-heading) !important; } html[data-theme="dark"] .btn--outline:hover { background: var(--surface) !important; border-color: var(--ekb-orange) !important; color: var(--fg-heading) !important; } /* ============================================================ Forms ============================================================ */ html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: var(--surface-alt) !important; color: var(--fg-heading) !important; border-color: var(--border-strong) !important; } html[data-theme="dark"] .field input::placeholder, html[data-theme="dark"] .field textarea::placeholder { color: var(--fg-muted) !important; } html[data-theme="dark"] .field label { color: var(--fg) !important; } /* ============================================================ Cards / borders / dividers ============================================================ */ html[data-theme="dark"] [style*="border:"][style*="rgba(0,0,0"], html[data-theme="dark"] .card, html[data-theme="dark"] .insight-card, html[data-theme="dark"] .case-card, html[data-theme="dark"] .insights-list__item { border-color: var(--border) !important; } /* ============================================================ Hero ============================================================ */ html[data-theme="dark"] .hero { background: radial-gradient(1100px 600px at 80% 10%, rgba(193,38,140,.18), transparent 65%), radial-gradient(900px 500px at 10% 90%, rgba(238,144,2,.12), transparent 65%), #060504 !important; } html[data-theme="dark"] .hero__card { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--fg-heading) !important; } /* ============================================================ Logo strip & experience strip ============================================================ */ html[data-theme="dark"] .logos, html[data-theme="dark"] .logos--experience { background: radial-gradient(700px 240px at 20% 50%, rgba(238,144,2,.10), transparent 70%), radial-gradient(700px 240px at 80% 50%, rgba(170,59,170,.12), transparent 70%), var(--bg) !important; border-color: var(--border) !important; border-top-color: var(--border) !important; border-bottom-color: var(--border) !important; position: relative; overflow: hidden; } /* Ambient honey grid behind the strip — woven from repeating hex outlines */ html[data-theme="dark"] .logos--experience::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 50% 50%, rgba(255,208,138,.08) 0, rgba(255,208,138,.08) 1px, transparent 2px); background-size: 38px 38px; opacity: .5; mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); } html[data-theme="dark"] .logos--experience > * { position: relative; z-index: 1; } html[data-theme="dark"] .logos__label { color: var(--fg-muted) !important; } html[data-theme="dark"] .logos__row, html[data-theme="dark"] .exp-row { opacity: 1 !important; } html[data-theme="dark"] .logos__row svg, html[data-theme="dark"] .logos__row img, html[data-theme="dark"] .exp-row svg, html[data-theme="dark"] .exp-row img { filter: invert(1) brightness(.92) hue-rotate(180deg) saturate(.5); opacity: .85; } /* ============================================================ Stats ============================================================ */ html[data-theme="dark"] .stats { background: var(--paper) !important; border-color: var(--border) !important; } html[data-theme="dark"] .stats__grid { border-color: var(--border) !important; } html[data-theme="dark"] .stat { background: var(--paper) !important; border-color: var(--border) !important; border-right-color: var(--border) !important; border-bottom-color: var(--border) !important; } html[data-theme="dark"] .stat__num { color: var(--fg-heading) !important; } html[data-theme="dark"] .stat__label { color: var(--fg-muted) !important; } /* ============================================================ Services grid ============================================================ */ html[data-theme="dark"] .services { background: var(--bg) !important; } html[data-theme="dark"] .services__grid { background: var(--border) !important; border-color: var(--border) !important; } html[data-theme="dark"] .svc { background: var(--paper) !important; border-color: var(--border) !important; } html[data-theme="dark"] .svc:hover { background: var(--surface) !important; } html[data-theme="dark"] .svc h3 { color: var(--fg-heading) !important; } html[data-theme="dark"] .svc p { color: var(--fg) !important; } html[data-theme="dark"] .svc__icon { background: rgba(245,239,232,.06) !important; color: var(--fg-heading) !important; } html[data-theme="dark"] .svc__tags span { background: transparent !important; border-color: var(--border-strong) !important; color: var(--fg-muted) !important; } html[data-theme="dark"] .svc__link { color: var(--fg-heading) !important; } html[data-theme="dark"] .svc__link:hover { color: var(--ekb-orange) !important; } /* ============================================================ Capability (already dark) — bump bullet contrast ============================================================ */ html[data-theme="dark"] .capability { background: #050404 !important; } html[data-theme="dark"] .capability__bullets li i { background: rgba(255,255,255,.08) !important; color: #ffd08a !important; } /* ============================================================ Migrations / .mig cards ============================================================ */ html[data-theme="dark"] .migrations { background: var(--paper) !important; border-color: var(--border) !important; border-top-color: var(--border) !important; border-bottom-color: var(--border) !important; } html[data-theme="dark"] .migrations__grid { background: var(--border) !important; border-color: var(--border) !important; } html[data-theme="dark"] .mig { background: var(--paper) !important; border-color: var(--border) !important; } html[data-theme="dark"] .mig:hover { background: var(--surface) !important; } html[data-theme="dark"] .mig__num { color: var(--fg-muted) !important; } html[data-theme="dark"] .mig h3 { color: var(--fg-heading) !important; } html[data-theme="dark"] .mig p { color: var(--fg) !important; } html[data-theme="dark"] .mig__badge { background: transparent !important; border-color: var(--border-strong) !important; color: var(--fg-heading) !important; } html[data-theme="dark"] .mig__badge--alt { background: var(--fg-heading) !important; border-color: var(--fg-heading) !important; color: #0e0c0b !important; } html[data-theme="dark"] .mig__meta { border-top-color: var(--border) !important; } html[data-theme="dark"] .mig__meta li { color: var(--fg) !important; } html[data-theme="dark"] .mig__meta li::before { background: var(--fg-heading) !important; } /* ============================================================ Method timeline ============================================================ */ html[data-theme="dark"] .method { background: var(--bg) !important; } html[data-theme="dark"] .step__num { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--fg-heading) !important; } html[data-theme="dark"] .step h3 { color: var(--fg-heading) !important; } html[data-theme="dark"] .step p { color: var(--fg) !important; } /* ============================================================ Industries ============================================================ */ html[data-theme="dark"] .industries { background: var(--bg-section) !important; } html[data-theme="dark"] .ind { background: var(--paper) !important; border-color: var(--border) !important; } html[data-theme="dark"] .ind h4 { color: var(--fg-heading) !important; } html[data-theme="dark"] .ind p { color: var(--fg) !important; } /* ============================================================ Case study ============================================================ */ html[data-theme="dark"] .case { background: var(--paper) !important; border-color: var(--border) !important; border-top-color: var(--border) !important; border-bottom-color: var(--border) !important; } html[data-theme="dark"] .case__card { background: #050404 !important; } /* ============================================================ Testimonials ============================================================ */ html[data-theme="dark"] .testi { background: var(--bg) !important; } html[data-theme="dark"] .testi__grid { border-color: var(--border) !important; } html[data-theme="dark"] .testi__card { background: var(--paper) !important; border-color: var(--border) !important; border-right-color: var(--border) !important; } html[data-theme="dark"] .testi__card p, html[data-theme="dark"] .testi__quote { color: var(--fg) !important; } html[data-theme="dark"] .testi__name, html[data-theme="dark"] .testi__author { color: var(--fg-heading) !important; } html[data-theme="dark"] .testi__role, html[data-theme="dark"] .testi__company { color: var(--fg-muted) !important; } /* ============================================================ Insights / posts ============================================================ */ html[data-theme="dark"] .insights { background: var(--bg) !important; } html[data-theme="dark"] .insights article, html[data-theme="dark"] .post { background: var(--paper) !important; border-color: var(--border) !important; color: var(--fg) !important; } html[data-theme="dark"] .post h3, html[data-theme="dark"] .insights article h3 { color: var(--fg-heading) !important; } html[data-theme="dark"] .post__meta, html[data-theme="dark"] .post .meta { color: var(--fg-muted) !important; } /* ============================================================ CTA ============================================================ */ html[data-theme="dark"] .cta { background: var(--bg) !important; } html[data-theme="dark"] .cta__card { background: #050404 !important; border: 1px solid var(--border) !important; } /* ============================================================ Footprint (already dark, deepen) ============================================================ */ html[data-theme="dark"] .footprint { background: #050404 !important; } /* ============================================================ Footer — already dark, just deepen + ensure ============================================================ */ html[data-theme="dark"] .ftr { background: #050404 !important; border-top: 1px solid var(--border); color: var(--fg); } html[data-theme="dark"] .ftr a, html[data-theme="dark"] .ftr ul a { color: rgba(245,239,232,.7) !important; } html[data-theme="dark"] .ftr a:hover, html[data-theme="dark"] .ftr ul a:hover { color: var(--ekb-orange) !important; } /* ============================================================ Chat widget — dark mode skin ============================================================ */ html[data-theme="dark"] .ekb-chat { background: var(--surface); border-color: var(--border); color: var(--fg); box-shadow: 0 32px 80px -20px rgba(0, 0, 0, .8), 0 12px 32px -10px rgba(0, 0, 0, .5), 0 0 0 1px var(--border) inset; } html[data-theme="dark"] .ekb-chat__body { background: #0c0a09; } html[data-theme="dark"] .ekb-chat__welcome-msg { color: var(--fg-muted); } html[data-theme="dark"] .ekb-chat__chip { background: var(--surface-alt); border-color: var(--border-strong); color: var(--fg-heading); } html[data-theme="dark"] .ekb-chat__chip:hover { border-color: #e7a3ff; color: #f0c8ff; } html[data-theme="dark"] .ekb-chat__msg--assistant .ekb-chat__bubble { background: var(--surface-alt); border-color: var(--border); color: var(--fg); } html[data-theme="dark"] .ekb-chat__msg--user .ekb-chat__bubble { background: linear-gradient(135deg, #2a211e 0%, #3a2d28 100%); color: #fff; } html[data-theme="dark"] .ekb-chat__form { background: var(--surface); border-top-color: var(--border); } html[data-theme="dark"] .ekb-chat__input { background: var(--surface-alt); border-color: var(--border-strong); color: var(--fg-heading); } html[data-theme="dark"] .ekb-chat__input::placeholder { color: var(--fg-muted); } html[data-theme="dark"] .ekb-chat__foot { background: var(--surface); border-top-color: var(--border); color: var(--fg-muted); } /* ============================================================ Theme toggle button ============================================================ */ .theme-toggle { background: transparent; border: 1px solid rgba(0,0,0,.12); color: var(--fg-heading); width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s, transform .2s, color .2s; } .theme-toggle:hover { background: rgba(170, 59, 170, .08); border-color: var(--ekb-purple); color: var(--ekb-purple); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle { border-color: var(--border-strong); color: var(--fg-heading); } html[data-theme="dark"] .theme-toggle:hover { background: rgba(231, 163, 255, .12); border-color: #e7a3ff; color: #f0c8ff; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Smooth theme transition */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html.theme-transition, html.theme-transition * { transition: none !important; } }