/* ===== BarkanLab — Shared Header & Section Themes ===== */ :root { /* Accents — overridden per section via .theme-XXX */ --bl-accent-1: #60a5fa; --bl-accent-2: #a78bfa; --bl-accent-3: #22d3ee; /* Semantic colors */ --bl-bg-0: #05060f; --bl-bg-1: #0a0f24; --bl-bg-2: #101a3d; --bl-text: #e7ecff; --bl-text-strong: #ffffff; --bl-muted: #9aa7c7; --bl-surface: rgba(255, 255, 255, 0.04); --bl-surface-hover: rgba(255, 255, 255, 0.07); --bl-surface-strong: rgba(15, 22, 48, 0.6); --bl-border: rgba(255, 255, 255, 0.08); --bl-border-strong: rgba(255, 255, 255, 0.12); /* Radii */ --bl-radius-sm: 6px; --bl-radius-md: 10px; --bl-radius-lg: 14px; --bl-radius-xl: 18px; /* Shadows */ --bl-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --bl-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35); --bl-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55); /* Transitions */ --bl-transition-fast: 0.15s ease; --bl-transition-base: 0.25s ease; --bl-transition-slow: 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2); /* Typography */ --bl-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --bl-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Layout */ --bl-header-h: 52px; --bl-stripe-h: 3px; } /* ===== Theme palettes (applied via ) ===== */ .theme-home { --bl-accent-1: #60a5fa; --bl-accent-2: #a78bfa; --bl-accent-3: #22d3ee; } .theme-lab { --bl-accent-1: #22d3ee; --bl-accent-2: #3b82f6; --bl-accent-3: #60a5fa; } .theme-experiments{ --bl-accent-1: #fb923c; --bl-accent-2: #f59e0b; --bl-accent-3: #ef4444; } .theme-periodic { --bl-accent-1: #818cf8; --bl-accent-2: #a78bfa; --bl-accent-3: #c084fc; } .theme-solubility { --bl-accent-1: #2dd4bf; --bl-accent-2: #22c55e; --bl-accent-3: #06b6d4; } .theme-handbook { --bl-accent-1: #6366f1; --bl-accent-2: #8b5cf6; --bl-accent-3: #a78bfa; } .theme-organic { --bl-accent-1: #c084fc; --bl-accent-2: #e879f9; --bl-accent-3: #f472b6; } .theme-mol { --bl-accent-1: #60a5fa; --bl-accent-2: #a78bfa; --bl-accent-3: #22d3ee; } .theme-glassware { --bl-accent-1: #7dd3fc; --bl-accent-2: #38bdf8; --bl-accent-3: #5eead4; } .theme-quiz { --bl-accent-1: #fbbf24; --bl-accent-2: #34d399; --bl-accent-3: #10b981; } .theme-calculator { --bl-accent-1: #22c55e; --bl-accent-2: #10b981; --bl-accent-3: #2dd4bf; } .theme-safety { --bl-accent-1: #ef4444; --bl-accent-2: #f97316; --bl-accent-3: #fb923c; } .theme-glossary { --bl-accent-1: #94a3b8; --bl-accent-2: #60a5fa; --bl-accent-3: #c7d2fe; } /* ===== Unified header ===== */ .bl-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; user-select: none; font-family: 'Inter', system-ui, sans-serif; } .bl-stripe { height: var(--bl-stripe-h); background: linear-gradient(90deg, var(--bl-accent-1), var(--bl-accent-2), var(--bl-accent-3), var(--bl-accent-1)); background-size: 200% 100%; animation: bl-stripe-flow 12s linear infinite; box-shadow: 0 0 18px rgba(96,165,250,0.35); } @keyframes bl-stripe-flow { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } .bl-bar { height: calc(var(--bl-header-h) - var(--bl-stripe-h)); padding: 0 22px; background: linear-gradient(180deg, rgba(5,6,15,0.78), rgba(5,6,15,0.55)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 12px; color: var(--bl-text); } .bl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.3px; padding: 6px 10px; margin-left: -10px; border-radius: 10px; transition: background 0.2s ease, transform 0.2s ease; } .bl-brand:hover { background: rgba(255,255,255,0.05); transform: translateX(-2px); } .bl-dot { width: 11px; height: 11px; border-radius: 50%; background: conic-gradient(from 0deg, var(--bl-accent-1), var(--bl-accent-2), var(--bl-accent-3), var(--bl-accent-1)); box-shadow: 0 0 14px var(--bl-accent-1); animation: bl-spin 6s linear infinite; flex-shrink: 0; } @keyframes bl-spin { to { transform: rotate(360deg); } } .bl-brand-name { background: linear-gradient(135deg, #fff 0%, #c7d2fe 60%, var(--bl-accent-1)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bl-sep { color: var(--bl-muted); font-weight: 400; font-size: 1rem; opacity: 0.6; } .bl-current { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem; color: #fff; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; } .bl-spacer { flex: 1; } .bl-actions { display: flex; align-items: center; gap: 8px; } .bl-help { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #c7d2fe; cursor: pointer; padding: 0; transition: all 0.2s; } .bl-help:hover { background: color-mix(in srgb, var(--bl-accent-1) 20%, transparent); border-color: color-mix(in srgb, var(--bl-accent-1) 50%, transparent); color: #fff; transform: translateY(-1px); } .bl-help svg { width: 18px; height: 18px; } /* Unified language switcher inside the new header */ .bl-header #langSwitcher { display: flex; gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); } .bl-header #langSwitcher button, .bl-header #langSwitcher .lang-btn { padding: 7px 11px; background: transparent; color: #c7d2fe; border: none; border-right: 1px solid rgba(255,255,255,0.08); cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; font-family: inherit; transition: background 0.2s, color 0.2s; } .bl-header #langSwitcher button:last-child, .bl-header #langSwitcher .lang-btn:last-child { border-right: none; } .bl-header #langSwitcher button:hover:not(.active), .bl-header #langSwitcher .lang-btn:hover:not(.active) { background: rgba(255,255,255,0.08); color: #fff; } .bl-header #langSwitcher button.active, .bl-header #langSwitcher .lang-btn.active { background: linear-gradient(135deg, color-mix(in srgb, var(--bl-accent-1) 40%, transparent), color-mix(in srgb, var(--bl-accent-2) 40%, transparent)); color: #fff; box-shadow: 0 0 14px color-mix(in srgb, var(--bl-accent-1) 35%, transparent); } /* Spacer so page content doesn't hide under fixed header */ body.bl-themed { padding-top: var(--bl-header-h); } @media (max-width: 640px) { .bl-bar { padding: 0 14px; gap: 8px; } .bl-brand-name { display: none; } .bl-sep { display: none; } .bl-current { font-size: 0.88rem; max-width: 40vw; } .bl-help { width: 30px; height: 30px; } .bl-help svg { width: 16px; height: 16px; } .bl-header #langSwitcher button, .bl-header #langSwitcher .lang-btn { padding: 6px 8px; font-size: 10px; } } /* ===== Mobile baseline (applied to every page using theme.css) ===== */ @media (max-width: 480px) { /* Prevent horizontal overflow anywhere */ html, body { overflow-x: hidden; max-width: 100%; } img, canvas, svg, video { max-width: 100%; height: auto; } /* Tap targets on shared header controls */ .bl-header button, .bl-header #langSwitcher button, .bl-header #langSwitcher .lang-btn { min-height: 38px; } /* iOS Safari zooms when an input's font-size < 16px. Prevent that. */ input, select, textarea { font-size: 16px !important; } /* Shared layout classes used by experiments/handbook/organic/etc. */ .layout { display: block !important; grid-template-columns: none !important; } .sidebar { position: static !important; width: 100% !important; height: auto !important; max-height: 50vh; overflow-y: auto; border-right: none !important; border-bottom: 1px solid var(--bl-border); } /* Generic content padding shrink */ .content, main.content, .container, .wrap { padding-left: 12px !important; padding-right: 12px !important; } /* Tables: allow horizontal scroll when wider than viewport */ .table-scroll, .scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Modals (periodic-table element modal, help modal, etc.) */ .modal, .modal-card, .help-modal { max-width: 95vw !important; max-height: 90vh !important; overflow-y: auto; } /* Long chemical names should wrap rather than overflow */ body { word-wrap: break-word; overflow-wrap: break-word; } /* Generic multi-column card/feature grids */ .cards, .features, .topics { grid-template-columns: 1fr !important; } } /* ===== Keyboard focus (accessibility) ===== */ :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus { outline: none; } :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--bl-accent-1); outline-offset: 2px; border-radius: 6px; } .bl-brand:focus-visible, .bl-help:focus-visible, .bl-header #langSwitcher button:focus-visible, .bl-header #langSwitcher .lang-btn:focus-visible { outline: 2px solid var(--bl-accent-1); outline-offset: 3px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bl-accent-1) 25%, transparent); } /* ===== Light theme overrides ===== */ html[data-theme="light"] { /* BL tokens */ --bl-bg-0: #ffffff; --bl-bg-1: #f4f6fb; --bl-bg-2: #e0e7ff; --bl-text: #000000; --bl-text-strong: #000000; --bl-muted: #374151; --bl-surface: rgba(15, 23, 42, 0.04); --bl-surface-hover: rgba(15, 23, 42, 0.07); --bl-surface-strong: rgba(255, 255, 255, 0.9); --bl-border: rgba(15, 23, 42, 0.1); --bl-border-strong: rgba(15, 23, 42, 0.16); color-scheme: light; /* Aliases that page-level stylesheets commonly declare at :root. These overrides win because html[data-theme] beats :root in specificity. */ --bg-0: #ffffff; --bg-1: #f4f6fb; --bg-2: #e0e7ff; --text: #000000; --muted: #374151; --card: rgba(15, 23, 42, 0.05); --card-border: rgba(15, 23, 42, 0.1); } html[data-theme="light"] body { background: radial-gradient(1000px 600px at 15% -10%, rgba(99, 102, 241, 0.08), transparent 60%), radial-gradient(900px 500px at 110% 20%, rgba(34, 211, 238, 0.08), transparent 60%), radial-gradient(800px 500px at 50% 120%, rgba(167, 139, 250, 0.1), transparent 60%), linear-gradient(180deg, #f7f9ff, #e0e7ff) !important; color: var(--bl-text); } html[data-theme="light"] .bl-bar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.66)); border-bottom-color: var(--bl-border); color: var(--bl-text); } html[data-theme="light"] .bl-brand-name { background: linear-gradient(135deg, #0f172a 0%, #475569 55%, var(--bl-accent-1)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="light"] .bl-current { color: var(--bl-text-strong); } html[data-theme="light"] .bl-sep { color: var(--bl-muted); } html[data-theme="light"] .bl-help { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.1); color: #475569; } html[data-theme="light"] .bl-help:hover { color: #0f172a; } html[data-theme="light"] .bl-brand:hover { background: rgba(15, 23, 42, 0.05); } html[data-theme="light"] .bl-header #langSwitcher { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.1); } html[data-theme="light"] .bl-header #langSwitcher button, html[data-theme="light"] .bl-header #langSwitcher .lang-btn { color: #475569; border-right-color: rgba(15, 23, 42, 0.08); } html[data-theme="light"] .bl-header #langSwitcher button:hover:not(.active), html[data-theme="light"] .bl-header #langSwitcher .lang-btn:hover:not(.active) { background: rgba(15, 23, 42, 0.06); color: #0f172a; } html[data-theme="light"] .bl-header #langSwitcher button.active, html[data-theme="light"] .bl-header #langSwitcher .lang-btn.active { color: #fff; } html[data-theme="light"] .lab-blob, html[data-theme="light"] .blob { opacity: 0.28; } /* Canvas formulas are drawn in light hsla() — invert + rotate hue flips them to dark tones on a transparent canvas so they stay visible in light mode. */ html[data-theme="light"] :is(#labBg, #bg) { opacity: 0.6; filter: invert(1) hue-rotate(180deg); } /* Card / option icons: page CSS strokes SVGs in light blue (#cfe0ff etc.) which vanishes on white. Repaint them with the section accent. */ html[data-theme="light"] :is(.icon-wrap svg, .icon svg, .ico svg, .topic-btn svg, .card svg) { stroke: var(--bl-accent-1) !important; } html[data-theme="light"] :is(.icon-wrap svg [fill="#cfe0ff"], .icon-wrap svg circle[fill]) { fill: var(--bl-accent-1) !important; } html[data-theme="light"] .icon-wrap { background: linear-gradient(135deg, color-mix(in srgb, var(--bl-accent-1) 18%, transparent), color-mix(in srgb, var(--bl-accent-2) 18%, transparent)) !important; border-color: rgba(15, 23, 42, 0.1) !important; box-shadow: inset 0 0 14px color-mix(in srgb, var(--bl-accent-1) 15%, transparent) !important; } /* ===== Light theme text rescue ===== Pages hardcode light text colours (#e7ecff, #c7d2fe, #93c5fd, etc.) for readability on dark. In light mode blanket-force every readable element to black. Page-specific overrides (lab panels, active switcher button, gradient glow, category tint fills in periodic table) have higher specificity and still win. */ html[data-theme="light"], html[data-theme="light"] body, html[data-theme="light"] body *:not(svg):not(path):not(circle):not(rect):not(line):not(polygon):not(polyline):not(ellipse) { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Muted / secondary copy — keep a slight de-emphasis without losing contrast */ html[data-theme="light"] :is(.muted, .hint, .sub, .desc, .lbl, .foot, .hero p, .stats-bar, .search-wrap small) { color: var(--bl-muted) !important; } /* Headings: gradient text with white/light stops is invisible in light mode. Force solid dark text. Individual pages may re-enable a dark gradient later. */ html[data-theme="light"] :is(h1, h2, h3, h4, h5, h6) { background: none !important; -webkit-text-fill-color: var(--bl-text-strong) !important; color: var(--bl-text-strong) !important; filter: none !important; } /* Gradient badge text in the hero (e.g. "Barkan") keeps its colour */ html[data-theme="light"] .glow { -webkit-text-fill-color: transparent !important; background: linear-gradient(135deg, var(--bl-accent-1), var(--bl-accent-2), var(--bl-accent-3)) !important; -webkit-background-clip: text !important; background-clip: text !important; } /* Surfaces that page CSS fills with dark rgba */ html[data-theme="light"] :is(.card, .card-box, .panel, .stat, .eyebrow, .emergency, .section-box, .ghs-card, .item, .term-card, .result-box, .feedback, .result .summary > div, .topic-btn, .option, .howto, .howto .body, .help-modal, .field input, .field select, .search-box input, .tab) { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(15, 23, 42, 0.12) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] :is(.card:hover, .topic-btn:hover, .option:hover) { background: #ffffff !important; } /* Inputs: make placeholders and icons readable */ html[data-theme="light"] ::placeholder { color: #64748b !important; opacity: 1; } html[data-theme="light"] :is(input, select, textarea) { color: #000 !important; background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(15, 23, 42, 0.18) !important; } /* Native dropdown options — browser renders these outside normal CSS flow. Force white bg + black text so users can read them in light mode. */ html[data-theme="light"] option, html[data-theme="light"] .field select option { background: #ffffff !important; color: #000000 !important; } /* Selected text — keep highlight visible but text still readable */ html[data-theme="light"] ::selection { background: rgba(96, 165, 250, 0.35); color: #000; } html[data-theme="light"] ::-moz-selection { background: rgba(96, 165, 250, 0.35); color: #000; } /* Active tabs & chips — keep dark text in light mode, strengthen the fill so the active state is still obvious. */ html[data-theme="light"] :is(.tab.active, .chip.active, .topic-btn.selected, .vessel-btn.active) { color: #000000 !important; background: linear-gradient(135deg, color-mix(in srgb, var(--bl-accent-1) 35%, #ffffff), color-mix(in srgb, var(--bl-accent-2) 35%, #ffffff)) !important; border-color: color-mix(in srgb, var(--bl-accent-1) 55%, transparent) !important; } /* Mode toggle (lab) stays white-on-accent because panels are dark in both themes */ html[data-theme="light"] body.theme-lab .mode-toggle-btn.active { color: #ffffff !important; } /* Periodic table: force black text on the grid/legend in light mode. The element modal is handled separately (kept dark with white text). */ html[data-theme="light"] body.theme-periodic :is(.pt-cell, .pt-cell *, .pt-title, .pt-group-label, .pt-period-label, .pt-label, .pt-legend-item) { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } html[data-theme="light"] body.theme-periodic .modal-symbol { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); } /* The element modal keeps its dark panel look in light mode, so every bit of text inside (including the numeric values) must stay white. Using .modal-card-scope combined selectors gets high enough specificity to beat the blanket light-mode rules everywhere. */ html[data-theme="light"] body.theme-periodic .modal-overlay .modal-card, html[data-theme="light"] body.theme-periodic .modal-overlay .modal-card *, html[data-theme="light"] body.theme-periodic .modal-overlay .modal-card dt, html[data-theme="light"] body.theme-periodic .modal-overlay .modal-card dd, html[data-theme="light"] body.theme-periodic .modal-overlay .modal-card span, html[data-theme="light"] body.theme-periodic .modal-overlay .modal-card .modal-props dt, html[data-theme="light"] body.theme-periodic .modal-overlay .modal-card .modal-props dd { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[data-theme="light"] body.theme-periodic .modal-overlay .modal-card .modal-name { background: linear-gradient(135deg, #fff, #c7d2fe 55%, #60a5fa) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="light"] body.theme-periodic .modal-overlay .modal-card .modal-close { color: rgba(199,210,254,0.7) !important; -webkit-text-fill-color: rgba(199,210,254,0.7) !important; } /* Solubility table: same deal — force black text on legend, header cells, data cells (S/SS/I/X/D) while keeping their colour fills. */ html[data-theme="light"] body.theme-solubility :is( .st-legend, .st-legend-item, table.sol-table, table.sol-table th, table.sol-table td, table.sol-table thead th, table.sol-table tbody th, .sol-s, .sol-ss, .sol-i, .sol-x, .sol-d ) { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Header row still needs contrast — darker row to highlight it clearly */ html[data-theme="light"] body.theme-solubility :is(table.sol-table thead th, table.sol-table tbody th) { background: linear-gradient(135deg, rgba(37,99,235,0.25), rgba(99,102,241,0.25)) !important; text-shadow: none !important; } /* Dark text doesn't need extra text-shadow halos */ html[data-theme="light"] * { text-shadow: none !important; } /* Safety: white "what to do" / GHS / rules cards in light mode */ html[data-theme="light"] body.theme-safety :is(.aid-card, .ghs-card, .rules-col, .section-box) { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(15, 23, 42, 0.12) !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] body.theme-safety .aid-card .warn { background: rgba(239, 68, 68, 0.12) !important; border-color: rgba(239, 68, 68, 0.4) !important; color: #991b1b !important; } html[data-theme="light"] body.theme-safety .ghs-card .code { background: rgba(239, 68, 68, 0.14) !important; color: #991b1b !important; border-color: rgba(239, 68, 68, 0.4) !important; } html[data-theme="light"] body.theme-safety .emergency { background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(220, 38, 38, 0.08)) !important; } /* Glossary: the sticky search bar has a dark "curtain" gradient that becomes a black strip on a light page. Flip it to white and clear the shadow. */ html[data-theme="light"] body.theme-glossary .search-wrap { background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 80%, transparent 100%) !important; box-shadow: none !important; } html[data-theme="light"] body.theme-glossary .search-box input { background: #ffffff !important; border-color: rgba(15,23,42,0.15) !important; color: #000 !important; box-shadow: none !important; } html[data-theme="light"] body.theme-glossary .search-box input:focus { border-color: var(--bl-accent-1) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bl-accent-1) 20%, transparent) !important; } /* ===== Sidebar (experiments, handbook, organic) ===== */ html[data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.82) !important; border-right-color: rgba(15, 23, 42, 0.08) !important; scrollbar-color: var(--bl-accent-1) rgba(15, 23, 42, 0.06) !important; box-shadow: 1px 0 12px rgba(15, 23, 42, 0.04); } html[data-theme="light"] .sidebar::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb { background: var(--bl-accent-1) !important; } html[data-theme="light"] .sidebar-title { color: var(--bl-accent-1) !important; border-bottom-color: color-mix(in srgb, var(--bl-accent-1) 28%, transparent) !important; } html[data-theme="light"] .nav-item { color: #334155 !important; background: transparent !important; border-left-color: transparent !important; box-shadow: none !important; } html[data-theme="light"] .nav-item:hover { background: color-mix(in srgb, var(--bl-accent-1) 10%, transparent) !important; color: var(--bl-text-strong) !important; border-left-color: color-mix(in srgb, var(--bl-accent-1) 55%, transparent) !important; } html[data-theme="light"] .nav-item.active { background: linear-gradient(135deg, color-mix(in srgb, var(--bl-accent-1) 18%, transparent), color-mix(in srgb, var(--bl-accent-2) 18%, transparent)) !important; color: var(--bl-text-strong) !important; border-left-color: var(--bl-accent-1) !important; box-shadow: inset 0 0 14px color-mix(in srgb, var(--bl-accent-1) 16%, transparent) !important; } html[data-theme="light"] .nav-number { color: var(--bl-accent-1) !important; } /* Lab in light mode: ALL text in the section is white. Lab panels keep their dark backgrounds in both themes, so white text is readable. We blanket-force white on everything under body.theme-lab (including SVG text via `fill`), then re-apply dark text inside the shared header (which has a white backdrop in light mode). */ html[data-theme="light"] body.theme-lab, html[data-theme="light"] body.theme-lab * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* SVG label text inside the lab (bottles/bench etc.) — force fill white too */ html[data-theme="light"] body.theme-lab :is(text, tspan) { fill: #ffffff !important; } /* Specific high-specificity selectors that might be set elsewhere with !important and dark values — explicitly re-whiten. */ html[data-theme="light"] body.theme-lab :is( .bottle-name, .slot, .slot-plus, .result-equation, .result-type, .result-title, .history-item, .history-item .eq, .history-item .type, .shelf-label, .shelf-category, .electrode-label, .electrode-product-label, .info-modal-name, .info-modal-category, .info-modal-desc, .info-prop-label, .info-prop-value, .panel-right, .panel-right *, .panel-left, .panel-left *, .panel-center, .panel-center *, .feedback, .feedback *, .mode-toggle-btn, .controls .btn, .reagent-count, .reagent-name, .btn, .btn-lab-report, .btn-clear-history ) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Shared header has a white background in light mode → keep its text dark. */ html[data-theme="light"] body.theme-lab header.bl-header, html[data-theme="light"] body.theme-lab header.bl-header * { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } /* Active language button in the header keeps white-on-accent */ html[data-theme="light"] body.theme-lab header.bl-header #langSwitcher button.active, html[data-theme="light"] body.theme-lab header.bl-header #langSwitcher .lang-btn.active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Surfaces inside the lab that the generic light-mode sweep would whiten — keep their existing dark fills so white text stays readable. */ html[data-theme="light"] body.theme-lab :is(.result-box, .feedback) { background: rgba(15, 22, 48, 0.55) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: none !important; } /* Sugar for the theme toggle button */ .bl-theme-toggle svg { width: 18px; height: 18px; } /* ===== Shared ambient background pattern ===== */ /* Opt in with