/* --- AINNA Day / Night theme parity -------------------------------------- */ /* The shared AINNA theme engine writes data-theme on and . */ html[data-theme="dark"] { --bg: #101318; --bg-soft: #181d25; --bg-elev: #1b212b; --ink: #f4f7fb; --ink-2: #d7dee8; --ink-soft: #b6c0cd; --ink-faint: #96a3b2; --line: #3a4655; --line-soft: #2b3542; --neon: #ff9a52; --neon-2: #ffb77e; --neon-deep: #ffb074; --neon-glow: rgba(255, 154, 82, 0.28); --dark: #080b10; --dark-2: #151b24; --shadow-s: 0 1px 2px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.28); --shadow: 0 8px 28px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.22); --shadow-l: 0 24px 60px rgba(0,0,0,.42); } html[data-theme="dark"] body, html[data-theme="dark"] .nav, html[data-theme="dark"] .nav nav, html[data-theme="dark"] .menu, html[data-theme="dark"] .pill, html[data-theme="dark"] .btn.ghost, html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color: var(--ink); background-color: var(--bg); border-color: var(--line); } html[data-theme="dark"] body::before { background: linear-gradient(90deg, #101318 0%, rgba(16,19,24,.96) 38%, rgba(16,19,24,.68) 100%), linear-gradient(155deg, transparent 48%, rgba(255,154,82,.16) 100%), url("../../storage/sources/maypreen/616-factory-bottles-white-web.jpg") right center / min(920px, 72vw) auto no-repeat; opacity: .3; filter: saturate(.6) contrast(1.04) brightness(.68); } html[data-theme="dark"] body::after { background-image: linear-gradient(rgba(222,232,244,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(222,232,244,.06) 1px, transparent 1px); opacity: .34; } html[data-theme="dark"] .nav { background: rgba(16,19,24,.84); border-bottom-color: var(--line-soft); } html[data-theme="dark"] .nav nav { background: rgba(16,19,24,.97); border-bottom-color: var(--line-soft); } html[data-theme="dark"] .nav nav a, html[data-theme="dark"] .trust span, html[data-theme="dark"] .catalogue-stamp span, html[data-theme="dark"] .filters > a, html[data-theme="dark"] .shop-meta { color: var(--ink-2); } html[data-theme="dark"] .brand, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] em, html[data-theme="dark"] strong, html[data-theme="dark"] b, html[data-theme="dark"] .product h3, html[data-theme="dark"] .metric b { color: var(--ink); } html[data-theme="dark"] p, html[data-theme="dark"] .hero p, html[data-theme="dark"] .page-hero p, html[data-theme="dark"] .node-card p, html[data-theme="dark"] .timeline p, html[data-theme="dark"] .fact-grid span, html[data-theme="dark"] .product p, html[data-theme="dark"] footer a, html[data-theme="dark"] footer span, html[data-theme="dark"] footer p { color: var(--ink-soft); } html[data-theme="dark"] .trust, html[data-theme="dark"] .fact-grid div, html[data-theme="dark"] .node-card.tech, html[data-theme="dark"] .icon, html[data-theme="dark"] .media-card, html[data-theme="dark"] .product, html[data-theme="dark"] .catalogue-card, html[data-theme="dark"] .timeline > div, html[data-theme="dark"] .metric, html[data-theme="dark"] .admin-panel, html[data-theme="dark"] .source-document-grid > a, html[data-theme="dark"] .source-media-grid figure { background-color: var(--bg-elev); border-color: var(--line-soft); } html[data-theme="dark"] .product-img, html[data-theme="dark"] .catalogue-image, html[data-theme="dark"] .archive-counts span { background-color: var(--bg-soft); border-color: var(--line-soft); } html[data-theme="dark"] .product-img span, html[data-theme="dark"] .catalogue-image small { background: rgba(16,19,24,.88); color: var(--ink-2); border-color: var(--line); } html[data-theme="dark"] .btn.light { background: var(--ink); color: #101318; border-color: var(--ink); } html[data-theme="dark"] .btn.light:hover { background: var(--neon); color: #101318; border-color: var(--neon); } html[data-theme="dark"] .flash { background: #2b2119; border-bottom-color: #69452d; color: #ffc18f; } html[data-theme="dark"] footer { border-top-color: var(--line-soft); } html[data-theme="dark"] .footer-note { color: var(--ink-faint); border-top-color: var(--line-soft); } html[data-theme="dark"] .ainna-demo-action-card, html[data-theme="dark"] .ainna-action-card { background: var(--bg-elev); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .ainna-section, html[data-theme="dark"] .ainna-section-heading { border-color: var(--line-soft); } html[data-theme="dark"] .ainna-section h2 em, html[data-theme="dark"] .ainna-console h2 em { color: var(--ink); } .maypreen-theme-toggle { margin-left: 0; } .maypreen-theme-toggle button.ainna-theme-switch.theme-toggle { font-family: var(--font); } @media (max-width: 1100px) { .nav .maypreen-theme-toggle { margin-left: 0; } .nav .maypreen-theme-toggle .ainna-theme-switch-label { display: none; } .nav .maypreen-theme-toggle .ainna-theme-switch { padding-left: 6px; } } /* --- Night-mode contrast repairs (audited 2026-09-23) --------------------- */ /* site.css hardcodes light surfaces (#fff) and uses --ink as a BACKGROUND. In night mode --ink flips to a light colour, so those surfaces and their text collapse to ~1:1. These rules restore them on dark only. */ /* Top strip: background uses --ink (now light) with fixed light text. */ html[data-theme="dark"] .topline { background: var(--bg-elev); color: var(--ink-2); } /* Base button: background uses --ink (now light) with fixed #fff text. */ html[data-theme="dark"] .btn { background: var(--neon); border-color: var(--neon); color: #101318; } html[data-theme="dark"] .btn:hover { background: var(--neon-2); border-color: var(--neon-2); color: #101318; } html[data-theme="dark"] .btn.accent { background: var(--neon); border-color: var(--neon); color: #101318; } html[data-theme="dark"] .btn.light { background: var(--bg-elev); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .btn.light:hover { background: var(--neon); border-color: var(--neon); color: #101318; } /* White motion surfaces: keep the dark card, not a white panel. */ html[data-theme="dark"] .section.dark, html[data-theme="dark"] .future { background: var(--bg-elev); color: var(--ink); border-color: var(--line-soft); } html[data-theme="dark"] .future h2, html[data-theme="dark"] .future h3 { color: var(--neon-2); } html[data-theme="dark"] .future h2 em { color: var(--ink); } html[data-theme="dark"] .future p { color: var(--ink-soft); } html[data-theme="dark"] .future .eyebrow { color: var(--neon-2); } html[data-theme="dark"] .future .core { background: var(--bg-soft); border-color: rgba(255, 154, 82, 0.5); color: var(--neon-2); } html[data-theme="dark"] .future .brain-mini { background: radial-gradient(circle, rgba(255,154,82,.10) 0 18%, var(--bg-soft) 58%); } /* Product imagery: mix-blend-mode: multiply composites against the tile, so on a dark tile the photo multiplies to near-black. Keep the tile light (as in day mode) so the blend stays correct and the product stays legible. */ html[data-theme="dark"] .product-img, html[data-theme="dark"] .catalogue-image, html[data-theme="dark"] .gallery-stage > img { background: #fff; border-color: var(--line-soft); } html[data-theme="dark"] .product-img span, html[data-theme="dark"] .catalogue-image small { background: rgba(16, 19, 24, 0.88); border-color: var(--line); color: var(--ink-2); } /* --- Contrast repairs, day + night (audited 2026-09-23, second pass) ------ */ /* Two token problems measured across 7 pages (1211 text elements): 1. --neon (#ff6a00) as TEXT on white = 2.87:1 — fails AA for small text. It is fine as a BACKGROUND, so darker text tokens are used here instead. 2. --ink-faint (#86868b) on white = 3.62:1 / on --bg-soft = 3.33:1 — fails AA. 3. In night mode several surfaces stay hardcoded white while their text flips light, colliding at ~1.07:1. */ /* Text-only orange. On light tiles it must darken to pass AA; on dark surfaces the bright brand tint already passes and reads as the brand. */ :root, html[data-theme="light"] { --neon-ink: #bd4a00; } html[data-theme="dark"] { --neon-ink: var(--neon-2); } /* Small grey copy must pass AA on both white and --bg-soft. */ :root, html[data-theme="light"] { --ink-faint: #6e6e73; } /* --- Day + night: orange used as TEXT on light surfaces --- */ h1, h2, .eyebrow, .text-link, .brand small, .section-head > a, .node-card b, .node-card small, .timeline b, .metric small, .catalogue-stamp b, .catalogue-intro span, .catalogue-number, .catalogue-copy strong, .product strong, .price, .shop-badge b, .article-card small, .article-card span, .arch-col small, .archive-counts b, .source-document-grid small, .source-document-grid span, .source-media-grid b, .gallery-status b, .metric-orb, .checkout-step > span, .choice-card strong, footer a:hover, .future h2, .future h3, .future .eyebrow { color: var(--neon-ink); } /* The neural hero is a fixed dark section in BOTH themes, so its eyebrow keeps the bright tint instead of the light-surface token. */ .neural-copy .eyebrow { color: var(--neon-2); } /* White text on an orange fill: use the dark ink instead of white. */ .btn.accent, .btn.light:hover, .neural-copy .btn.light, .admin-logout:hover { color: #101318; } /* The AINNA crawl label sits on page background: blue-on-white in day mode, light blue-on-dark in night mode. */ .cyber-network-crawl-label { color: #0369a1; } html[data-theme="dark"] .cyber-network-crawl-label { color: #7dd3fc; } /* `.dark` chips ship a near-white fill; they only work on a dark panel, which day mode overrides to white — so they vanish. Give them a light-mode fill. */ html[data-theme="light"] .data-stack span, html[data-theme="light"] .factory-grid span, html[data-theme="light"] .step-stack span { background: var(--bg-soft); border-color: var(--line-soft); color: var(--ink-2); } html[data-theme="light"] .core { background: rgba(255, 106, 0, 0.08); color: var(--neon-ink); } /* --- Night only: white surfaces whose text flips light --- */ /* Filter pills / tabs whose active state fills with --ink (light in night). */ html[data-theme="dark"] .filters > a.active, html[data-theme="dark"] .filters > a:hover, html[data-theme="dark"] .category-rail a.active, html[data-theme="dark"] .category-rail a:hover, html[data-theme="dark"] .archive-toolbar a.active { background: var(--neon); border-color: var(--neon); color: #101318; } html[data-theme="dark"] .archive-toolbar a { background: var(--bg-elev); border-color: var(--line-soft); color: var(--ink-2); } /* Caption / status chips that stay white while their text turns light. */ html[data-theme="dark"] .production-gallery figcaption, html[data-theme="dark"] .gallery-status { background: rgba(16, 19, 24, 0.9); border-color: var(--line); color: var(--ink-2); } html[data-theme="dark"] .gallery-status b { color: var(--neon-2); } /* Night keeps a white product tile (required by mix-blend-mode: multiply), so orange text sitting on that tile needs the darker token in BOTH themes. */ html[data-theme="dark"] .catalogue-number { color: #c94c00; } /* Breadcrumb links inside the media/document grids. */ html[data-theme="dark"] .archive-counts span, html[data-theme="dark"] .source-document-grid small, html[data-theme="dark"] .source-media-grid b { color: var(--neon-2); }