/* Eudai · theme-dark.css — dark mode override layer. Loaded LAST. Activated by [data-theme="dark"] on . Strategy: re-map the design tokens, then override the surfaces that hardcode #fff / navy / mist so contrast holds. Navy feature panels (problem, stats, network, footer) are left as elevated dark panels. */ /* ---- Theme toggle button (visible in both modes) ---- */ .eu-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid var(--border-base); background: transparent; color: var(--fg-2); cursor: pointer; flex: none; transition: color 140ms, border-color 140ms, background 140ms; } .eu-theme-toggle:hover { color: var(--fg-1); border-color: var(--fg-1); } .eu-theme-toggle svg { width: 18px; height: 18px; display: block; } html[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg-page: #111729; /* elevated sections / cards-on-base */ --bg-canvas: #1a2238; /* raised cards */ --bg-raised: #1a2238; --bg-sunken: #0b1020; --bg-accent-soft: #2a1d14; /* Foreground */ --fg-1: #f4f6fb; --fg-2: #c2c8d8; --fg-3: #8b93a8; --fg-4: #646d85; /* Borders */ --border-subtle: rgba(255,255,255,0.09); --border-base: rgba(255,255,255,0.16); --border-strong: rgba(255,255,255,0.26); /* Mist (used as a light surface in a few spots) → dark card */ --eudai-mist: #1a2238; } /* ---- Base ---- */ html[data-theme="dark"] body { background: #0b1020; } /* ---- Header ---- */ html[data-theme="dark"] .eu-header { background: rgba(11,16,32,0.85); } /* ---- Full-bleed white sections → deep base ---- */ html[data-theme="dark"] .eu-hero, html[data-theme="dark"] .eu-profile, html[data-theme="dark"] .eu-services, html[data-theme="dark"] .eu-personas, html[data-theme="dark"] .eu-blog, html[data-theme="dark"] .eu-cta, html[data-theme="dark"] .eu-page-hero, html[data-theme="dark"] .eu-work-featured, html[data-theme="dark"] .eu-svc-detail, html[data-theme="dark"] .eu-awards, html[data-theme="dark"] .eu-writing-featured, html[data-theme="dark"] .eu-writing-filter, html[data-theme="dark"] .eu-writing-grid-section, html[data-theme="dark"] .eu-about-hero, html[data-theme="dark"] .eu-about-story, html[data-theme="dark"] .eu-reader { background: #0b1020; } /* ---- White cards → raised surface ---- */ html[data-theme="dark"] .eu-project, html[data-theme="dark"] .eu-testimonial, html[data-theme="dark"] .eu-post, html[data-theme="dark"] .eu-award, html[data-theme="dark"] .eu-value, html[data-theme="dark"] .eu-engagement-card, html[data-theme="dark"] .eu-work-featured-card, html[data-theme="dark"] .eu-work-card, html[data-theme="dark"] .eu-contact-form-wrap, html[data-theme="dark"] .eu-contact-card, html[data-theme="dark"] .eu-writing-feature-card, html[data-theme="dark"] .eu-persona-proof { background: var(--bg-canvas) !important; } /* CTA form pill goes dark instead of white */ html[data-theme="dark"] .eu-cta-form { background: var(--bg-canvas); border-color: var(--border-base); box-shadow: none; } html[data-theme="dark"] .eu-cta-form input { background: transparent; } html[data-theme="dark"] .eu-persona-panel { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-canvas)) 0%, var(--bg-canvas) 60%); } /* ---- Form controls + pills ---- */ html[data-theme="dark"] .eu-field input, html[data-theme="dark"] .eu-field select, html[data-theme="dark"] .eu-field textarea, html[data-theme="dark"] .eu-cta-form input { background: var(--bg-canvas); color: var(--fg-1); } html[data-theme="dark"] .eu-writing-pill { background: var(--bg-canvas); } /* ---- Buttons ---- */ html[data-theme="dark"] .eu-btn-primary { background: #f4f6fb; color: #0b1020; } html[data-theme="dark"] .eu-btn-primary:hover { background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,0.4); } html[data-theme="dark"] .eu-btn-ghost { background: transparent; color: var(--fg-1); border-color: var(--border-base); } html[data-theme="dark"] .eu-btn-ghost:hover { border-color: var(--fg-1); } /* ---- Links that hardcode navy ---- */ html[data-theme="dark"] .eu-link { color: #f4f6fb; } html[data-theme="dark"] .eu-link:hover { color: var(--eudai-orange); } /* ---- Hero highlighter: white text over an orange underline band ---- */ html[data-theme="dark"] .eu-hero-title .eu-hl { color: #f4f6fb; background: linear-gradient(180deg, transparent 58%, rgba(255,79,0,0.45) 58%); } /* ---- Trusted logos: knock to white so dark marks stay visible ---- */ html[data-theme="dark"] .eu-trusted-logo img { filter: brightness(0) invert(1); opacity: 0.78; } /* ---- Reader hover that used mist ---- */ html[data-theme="dark"] .eu-cs-next:hover { background: rgba(255,255,255,0.04); } /* ---- Burger lines visible on dark ---- */ html[data-theme="dark"] .eu-burger span { background: #f4f6fb; } html[data-theme="dark"] .eu-mobile-nav { background: #0b1020; } /* ============================================================ Service-card mock vignettes — all hardcode white "paper" surfaces + navy accents. Remap to an elevated dark panel so the token-based foreground text stays legible. ============================================================ */ html[data-theme="dark"] .eu-mock-doc-row, html[data-theme="dark"] .eu-mock-frame, html[data-theme="dark"] .eu-mock-slide, html[data-theme="dark"] .eu-mock-pr .eu-mock-press, html[data-theme="dark"] .eu-mock-cal, html[data-theme="dark"] .eu-mock-rsvp, html[data-theme="dark"] .eu-mock-cmo .eu-mock-org { background: #212d4d; /* raised panel on the #1a2238 card */ border-color: var(--border-base); } html[data-theme="dark"] .eu-mock-brand .eu-mock-tab { background: #1a2440; border-color: var(--border-base); } /* keep the highlighted "after" row's orange border */ html[data-theme="dark"] .eu-mock-after { border-color: var(--eudai-orange); } /* mock container panel — sunken well so inner #212d4d panels read as raised */ html[data-theme="dark"] .eu-service-mock { background: #0e1426; border-color: var(--border-subtle); } /* white avatar rings → match the panel they sit on */ html[data-theme="dark"] .eu-mock-av { border-color: #212d4d; } html[data-theme="dark"] .eu-mock-av-more { background: rgba(255,255,255,0.12); color: #f4f6fb; } /* navy bars/buttons disappear on dark → knock to light */ html[data-theme="dark"] .eu-mock-frame-h { background: #f4f6fb; } html[data-theme="dark"] .eu-mock-frame-h2 { background: rgba(255,255,255,0.18); } html[data-theme="dark"] .eu-mock-frame-btn { background: #f4f6fb; color: #0b1020; } html[data-theme="dark"] .eu-mock-slide-lines span { background: rgba(255,255,255,0.16); } html[data-theme="dark"] .eu-mock-press { border-left-color: var(--eudai-orange); } html[data-theme="dark"] .eu-mock-press-src { color: #f4f6fb; } /* purple funnel chips: remap the white-mix onto the dark panel */ html[data-theme="dark"] .eu-mock-funnel-row { background: color-mix(in srgb, #9747ff 26%, #141b30); border-color: color-mix(in srgb, #9747ff 42%, transparent); } html[data-theme="dark"] .eu-mock-funnel-lbl { color: #c4a8ff; } /* ============================================================ Careers (CMO Apprentice) page ============================================================ */ /* Full-bleed white sections → deep base */ html[data-theme="dark"] .eu-car-hero, html[data-theme="dark"] .eu-car-develop, html[data-theme="dark"] .eu-car-apply { background: #0b1020; } /* White cards → raised surface */ html[data-theme="dark"] .eu-car-dev-card { background: var(--bg-canvas); } /* Facts + apply-form wells: lift off the deep base */ html[data-theme="dark"] .eu-car-facts, html[data-theme="dark"] .eu-car-apply-form-wrap { background: var(--bg-canvas); } /* Navy panels stay as elevated panels but lift slightly off the dark base */ html[data-theme="dark"] .eu-car-noneg { background: #212d4d; } /* "What you bring" icon tiles: warm wash already remaps via --bg-accent-soft */ html[data-theme="dark"] .eu-car-bring-icon { background: var(--bg-accent-soft); }