/* ============================================================ ORKEN AI — Dark Theme override Apply by setting and loading after orken.css ============================================================ */ [data-theme="dark"] { --o-bg: #0A0B14; --o-bg-alt: #11132A; --o-bg-dark: #05060D; --o-bg-dark-alt: #11132A; --o-ink: #F4F5FA; --o-ink-2: #D6D9E6; --o-ink-3: #9094B0; --o-ink-4: #6B6F88; --o-line: #1E2143; --o-line-2: #2A2E55; --o-grad-soft: linear-gradient(135deg, rgba(124,58,237,.14) 0%, rgba(79,70,229,.14) 100%); --o-shadow-sm: 0 2px 8px rgba(0,0,0,.4); --o-shadow: 0 8px 28px rgba(0,0,0,.5); --o-shadow-lg: 0 24px 60px rgba(0,0,0,.6); } [data-theme="dark"] body, [data-theme="dark"] { background: var(--o-bg); color: var(--o-ink); } [data-theme="dark"] body { background: var(--o-bg); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5 { color: var(--o-ink); } [data-theme="dark"] p { color: var(--o-ink-3); } /* Nav */ [data-theme="dark"] .o-nav { background: rgba(10,11,20,.78); border-bottom: 1px solid var(--o-line); } [data-theme="dark"] .o-logo { color: var(--o-ink) !important; } [data-theme="dark"] .o-nav-links > li > a, [data-theme="dark"] .o-nav-links > li > button { color: var(--o-ink-2) !important; } [data-theme="dark"] .o-nav-links > li > a:hover, [data-theme="dark"] .o-nav-links > li > button:hover, [data-theme="dark"] .o-nav-links > li.active > a { background: var(--o-bg-alt); color: white !important; } /* Mobile hamburger (dark) */ [data-theme="dark"] .o-nav-toggle span { background: var(--o-ink); } [data-theme="dark"] .o-nav-links { background: var(--o-bg); border-color: var(--o-line); } /* Mega menu */ [data-theme="dark"] .o-mega { background: var(--o-bg-alt); border-color: var(--o-line); } [data-theme="dark"] .o-mega-col h5 { border-bottom-color: var(--o-line); color: var(--o-ink); } [data-theme="dark"] .o-mega-col li a { color: var(--o-ink-2) !important; } [data-theme="dark"] .o-mega-col li a:hover { color: var(--o-accent) !important; } /* Sections */ [data-theme="dark"] .o-hero, [data-theme="dark"] .o-page-header { background: var(--o-bg-alt); } [data-theme="dark"] .o-hero::before, [data-theme="dark"] .o-page-header::before { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0); } [data-theme="dark"] .o-section-alt { background: var(--o-bg-alt); } /* Cards: any white card → dark surface */ [data-theme="dark"] .o-card { background: var(--o-bg-alt); border-color: var(--o-line); color: var(--o-ink-2); } [data-theme="dark"] [style*="background:white"]:not(.o-btn), [data-theme="dark"] [style*="background: white"]:not(.o-btn), [data-theme="dark"] [style*="background:#fff"]:not(.o-btn), [data-theme="dark"] [style*="background: #fff"]:not(.o-btn), [data-theme="dark"] [style*="background:#FFFFFF"]:not(.o-btn), [data-theme="dark"] [style*="background: #FFFFFF"]:not(.o-btn) { background: var(--o-bg-alt) !important; } [data-theme="dark"] .o-card:hover { border-color: rgba(124,58,237,.5); } /* Card icon — soft chip needs more punch on dark */ [data-theme="dark"] .o-card-icon { background: rgba(124,58,237,.18); color: #A78BFA; } [data-theme="dark"] .o-card-icon-grad { background: var(--o-grad); color: white; } /* Buttons */ [data-theme="dark"] .o-btn-ghost { background: var(--o-bg-alt); color: var(--o-ink) !important; border-color: var(--o-line); } [data-theme="dark"] .o-btn-ghost:hover { border-color: var(--o-accent); color: var(--o-accent) !important; } [data-theme="dark"] .o-btn-dark { background: #0dcaf0; color: var(--o-ink) !important; } [data-theme="dark"] .o-btn-dark:hover { background: var(--o-accent); color: white !important; } /* Stats */ [data-theme="dark"] .o-stats { background: var(--o-bg-alt); border-color: var(--o-line); } [data-theme="dark"] .o-stat { border-right-color: var(--o-line); } [data-theme="dark"] .o-stat-label { color: var(--o-ink-3); } /* Code chip */ [data-theme="dark"] .o-code-chip { background: rgba(255,255,255,.05); border-color: var(--o-line); color: var(--o-ink-2); } /* Tag */ [data-theme="dark"] .o-tag { background: rgba(124,58,237,.14); color: #A78BFA; border-color: rgba(124,58,237,.3); } /* Form */ [data-theme="dark"] .o-input, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: rgba(255,255,255,.04); border-color: var(--o-line); color: var(--o-ink); } [data-theme="dark"] .o-input::placeholder { color: var(--o-ink-4); } [data-theme="dark"] .o-input:focus, [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: rgba(255,255,255,.06); border-color: var(--o-primary); } /* Logo image — invert on dark for visibility */ [data-theme="dark"] .o-logo img { filter: brightness(0) invert(1); } /* Footer (already dark — make even deeper to differentiate) */ [data-theme="dark"] .o-footer { background: #05060D; border-top: 1px solid var(--o-line); } /* Accordion (FAQ on AI Agents) */ [data-theme="dark"] .accordion-button { color: var(--o-ink) !important; background: transparent !important; } [data-theme="dark"] .accordion-button::after { filter: invert(1); } [data-theme="dark"] .accordion-body { color: var(--o-ink-3) !important; } /* Featured / case study cards keep their gradient blocks but card body is dark */ [data-theme="dark"] .o-card[style*="padding:0"] > div:last-child { background: var(--o-bg-alt); } /* Blog post body */ [data-theme="dark"] .post-body { color: var(--o-ink-2); } [data-theme="dark"] .post-body p { color: var(--o-ink-2); } [data-theme="dark"] .post-body code { background: rgba(255,255,255,.06); color: #A78BFA; } [data-theme="dark"] .post-body blockquote { background: rgba(124,58,237,.08); color: var(--o-ink); } [data-theme="dark"] .toc ul { border-left-color: var(--o-line); } [data-theme="dark"] .author-bar { border-color: var(--o-line); } /* The CTA "primary gradient" cards already pop on dark — keep */ /* Misc text overrides */ [data-theme="dark"] .o-breadcrumb, [data-theme="dark"] .o-breadcrumb a { color: var(--o-ink-3); } /* Stack tile small labels (industry / service category) */ [data-theme="dark"] .o-card[style*="text-align:center"] [style*="color:var(--o-ink-3)"], [data-theme="dark"] [style*="color:var(--o-ink-3)"] { color: var(--o-ink-3) !important; }