/* ============================================================ MEMTEST INDUSTRIAL — Light Theme Design: Warm paper white with layered elevation Toggle via: ============================================================ */ html[data-theme="light"] { /* ---- Layered elevation system ---- 4 distinct levels create visual hierarchy: void = page canvas (warm gray) base = section background (lighter) raised = cards / interactive surfaces (white, pops forward) panel = recessed areas (slightly darker than base) */ --ink-void: #F2F0EC; --ink-base: #FAF9F6; --ink-raised: #FFFFFF; --ink-panel: #EDEBE6; --ink-line: #DDD9D1; --ink-line-soft: #E8E5DE; /* ---- Text hierarchy ---- Strong contrast tiers for readable layering */ --paper: #1A1815; --paper-dim: #3D3A35; --paper-faint: #6B6760; --paper-ghost: #9A958C; /* ---- Copper accent (slightly deeper for light bg contrast) ---- */ --copper: #A66B3F; --copper-bright: #C2895C; --copper-deep: #7A4E2E; --copper-glow: rgba(166, 107, 63, 0.07); /* ---- Signal colors (tuned for light bg) ---- */ --signal-cyan: #2E7C8C; --signal-warn: #A67A1E; --signal-ok: #4D7E2E; /* ---- Layered shadow system ---- Light theme uses warm-tinted shadows, not pure black */ --shadow-soft: 0 1px 2px rgba(60,50,40,0.04), 0 2px 8px rgba(60,50,40,0.03); --shadow-lift: 0 2px 4px rgba(60,50,40,0.05), 0 8px 24px rgba(60,50,40,0.06); --shadow-glow: 0 0 0 1px rgba(166,107,63,0.08), 0 8px 32px rgba(166,107,63,0.05); /* elevation helpers */ --elev-1: 0 1px 3px rgba(60,50,40,0.05), 0 1px 2px rgba(60,50,40,0.03); --elev-2: 0 4px 12px rgba(60,50,40,0.06), 0 1px 3px rgba(60,50,40,0.04); --elev-3: 0 12px 32px rgba(60,50,40,0.08), 0 4px 12px rgba(60,50,40,0.04); } /* ============================================================ HEADER — Glass white with copper accents ============================================================ */ html[data-theme="light"] .site-header { background: rgba(250, 249, 246, 0.72); backdrop-filter: blur(20px) saturate(1.3); border-bottom-color: rgba(0,0,0,0.05); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset; } html[data-theme="light"] .site-header.is-scrolled { background: rgba(250, 249, 246, 0.97); border-bottom-color: rgba(0,0,0,0.08); box-shadow: var(--elev-1); } html[data-theme="light"] .brand__mark { border-color: var(--copper); } html[data-theme="light"] .brand__name b { color: var(--paper); } html[data-theme="light"] .brand__name span { color: var(--paper-faint); } html[data-theme="light"] .primary-nav a { color: var(--paper-dim); } html[data-theme="light"] .primary-nav a:hover, html[data-theme="light"] .primary-nav a.is-active { color: var(--paper); } html[data-theme="light"] .header-status { color: var(--paper-faint); } html[data-theme="light"] .header-status::before { background: var(--signal-ok); box-shadow: 0 0 6px rgba(77, 126, 46, 0.35); } html[data-theme="light"] .lang-switcher { border-color: rgba(0,0,0,0.07); background: rgba(0,0,0,0.015); } html[data-theme="light"] .lang-switcher__item { color: var(--paper-faint); border-right-color: rgba(0,0,0,0.05); } html[data-theme="light"] .lang-switcher__item:hover { color: var(--paper); background: rgba(0,0,0,0.03); } html[data-theme="light"] .lang-switcher__item.is-active { background: var(--copper); color: #FFFFFF; } html[data-theme="light"] .theme-toggle { border-color: rgba(0,0,0,0.07); background: rgba(0,0,0,0.015); color: var(--paper-dim); } html[data-theme="light"] .theme-toggle:hover { border-color: var(--copper); color: var(--copper); background: rgba(166,107,63,0.05); } html[data-theme="light"] .btn-nav-cta { background: var(--copper); color: #FFFFFF; border-color: var(--copper); box-shadow: var(--elev-1); } html[data-theme="light"] .btn-nav-cta:hover { background: var(--copper-bright); border-color: var(--copper-bright); box-shadow: var(--elev-2); } /* ============================================================ HERO — Airy with warm gradient veil ============================================================ */ html[data-theme="light"] .hero__bg img { filter: brightness(1.05) saturate(0.85) contrast(0.95); opacity: 0.35; } html[data-theme="light"] .hero__bg::after { background: radial-gradient(ellipse 70% 60% at 70% 40%, transparent 0%, var(--ink-base) 78%), linear-gradient(180deg, var(--ink-base) 0%, transparent 30%, transparent 65%, var(--ink-base) 100%); } html[data-theme="light"] .hero__traces { opacity: 0.15; } html[data-theme="light"] .hero__topbar { color: var(--paper-faint); } html[data-theme="light"] .hero__topbar b { color: var(--paper); } html[data-theme="light"] .hero__topbar .text-copper { color: var(--copper); } html[data-theme="light"] .hero__title em { color: var(--copper); } html[data-theme="light"] .hero__title .stroke { -webkit-text-stroke: 1px var(--paper); } html[data-theme="light"] .hero__lead { color: var(--paper); } html[data-theme="light"] .hero__lead em { color: var(--copper); } html[data-theme="light"] .hero__cue { color: var(--paper-faint); } html[data-theme="light"] .hero__cue::after { background: linear-gradient(180deg, var(--copper) 0%, transparent 100%); } /* Hero spec panel — override hardcoded dark bg */ html[data-theme="light"] .hero__spec-panel { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px) saturate(1.2); border-color: rgba(0,0,0,0.06); box-shadow: var(--elev-2); } html[data-theme="light"] .hero__spec-panel h5 { color: var(--copper); } html[data-theme="light"] .hero__spec-panel dt { color: var(--paper-faint); } html[data-theme="light"] .hero__spec-panel dd { color: var(--paper); } /* ============================================================ TICKER — Subtle band ============================================================ */ html[data-theme="light"] .ticker { background: var(--ink-void); border-top-color: var(--ink-line); border-bottom-color: var(--ink-line); } html[data-theme="light"] .ticker__track { color: var(--paper-faint); } html[data-theme="light"] .ticker__track span::before { background: var(--copper); } html[data-theme="light"] .ticker__track b { color: var(--paper-dim); } /* ============================================================ CAPABILITIES GRID — Elevated cells ============================================================ */ html[data-theme="light"] .capabilities { border-bottom-color: var(--ink-line); } html[data-theme="light"] .capabilities__grid { background: var(--ink-line); border-color: var(--ink-line); } html[data-theme="light"] .cap-cell { background: var(--ink-base); transition: background var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); } html[data-theme="light"] .cap-cell:hover { background: var(--ink-raised); box-shadow: var(--elev-2); z-index: 1; } html[data-theme="light"] .cap-cell__icon { color: var(--copper); } html[data-theme="light"] .cap-cell h3 { color: var(--paper); } html[data-theme="light"] .cap-cell p { color: var(--paper-dim); } /* ============================================================ STATS BAND — Clean dividers ============================================================ */ html[data-theme="light"] .stats-band { border-top-color: var(--ink-line); border-bottom-color: var(--ink-line); } html[data-theme="light"] .stats-band__grid > div { border-right-color: var(--ink-line-soft); } /* ============================================================ FEATURED PRODUCTS — Cards with elevation ============================================================ */ html[data-theme="light"] .featured__foot { border-top-color: var(--ink-line); } html[data-theme="light"] .featured__count { color: var(--paper-faint); } html[data-theme="light"] .featured__count b { color: var(--copper); } /* ============================================================ SPOTLIGHT — Recessed panel with raised features ============================================================ */ html[data-theme="light"] .spotlight { background: var(--ink-void); border-top-color: var(--ink-line); border-bottom-color: var(--ink-line); } html[data-theme="light"] .spotlight__media { background: var(--ink-panel); border-color: var(--ink-line); box-shadow: var(--elev-1); } html[data-theme="light"] .spotlight__media .corner-label { color: var(--paper); background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); border-color: rgba(0,0,0,0.06); } html[data-theme="light"] .spotlight__title em { color: var(--copper); } html[data-theme="light"] .spotlight__desc { color: var(--paper-dim); } html[data-theme="light"] .spotlight__feature { background: var(--ink-raised); border-color: var(--ink-line); box-shadow: var(--elev-1); transition: box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out); } html[data-theme="light"] .spotlight__feature:hover { border-color: rgba(166,107,63,0.25); box-shadow: var(--elev-2); } html[data-theme="light"] .spotlight__feature h4 { color: var(--copper); } html[data-theme="light"] .spotlight__feature p { color: var(--paper); } /* ============================================================ VIDEOS PREVIEW — Recessed section ============================================================ */ html[data-theme="light"] .videos-preview { background: var(--ink-void); border-top-color: var(--ink-line); } /* ============================================================ STANDARDS — Grid cells ============================================================ */ html[data-theme="light"] .standards { border-top-color: var(--ink-line); } html[data-theme="light"] .standards__list { background: var(--ink-line); border-color: var(--ink-line); } html[data-theme="light"] .standards__item { background: var(--ink-base); transition: background var(--t-med) var(--ease-out); } html[data-theme="light"] .standards__item:hover { background: var(--ink-raised); } html[data-theme="light"] .standards__item .mono { color: var(--copper); } html[data-theme="light"] .standards__item h4 { color: var(--paper); } html[data-theme="light"] .standards__item p { color: var(--paper-dim); } /* ============================================================ CTA BAND — Warm glow ============================================================ */ html[data-theme="light"] .cta-band::before { background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(166,107,63,0.06) 0%, transparent 70%); } html[data-theme="light"] .cta-band h2 em { color: var(--copper); } html[data-theme="light"] .cta-band p { color: var(--paper-dim); } /* ============================================================ KNOWLEDGE PREVIEW ============================================================ */ html[data-theme="light"] .knowledge-preview__list { border-bottom-color: var(--ink-line); } /* ============================================================ CATALOG TOOLBAR & FILTER PILLS ============================================================ */ html[data-theme="light"] .catalog-toolbar { border-bottom-color: var(--ink-line); background: rgba(250, 249, 246, 0.8); backdrop-filter: blur(16px) saturate(1.2); } html[data-theme="light"] .filter-group__label { color: var(--paper-faint); } html[data-theme="light"] .filter-pill { border-color: rgba(0,0,0,0.07); color: var(--paper-faint); background: var(--ink-raised); } html[data-theme="light"] .filter-pill:hover { color: var(--paper); border-color: rgba(166,107,63,0.25); background: rgba(166,107,63,0.03); } html[data-theme="light"] .filter-pill.is-active { background: var(--copper); color: #FFFFFF; border-color: var(--copper); box-shadow: var(--elev-1); } html[data-theme="light"] .catalog-toolbar__count { color: var(--paper-faint); } html[data-theme="light"] .catalog-toolbar__count b { color: var(--copper); } /* ============================================================ PRODUCT & VIDEO CARDS — Elevated surfaces ============================================================ */ html[data-theme="light"] .product-card, html[data-theme="light"] .video-card { border-color: var(--ink-line); background: var(--ink-raised); box-shadow: var(--elev-1); } html[data-theme="light"] .product-card:hover, html[data-theme="light"] .video-card:hover { border-color: rgba(166,107,63,0.2); box-shadow: var(--elev-3); } /* ============================================================ PAGE HERO (subpages) ============================================================ */ html[data-theme="light"] .page-hero { border-bottom-color: var(--ink-line); } /* ============================================================ SECTION HEADS ============================================================ */ html[data-theme="light"] .section-head__title { color: var(--paper); } html[data-theme="light"] .section-head__title em { color: var(--copper); } html[data-theme="light"] .eyebrow { color: var(--copper); } /* ============================================================ BUTTONS ============================================================ */ html[data-theme="light"] .btn--primary { background: var(--copper); color: #FFFFFF; border-color: var(--copper); box-shadow: var(--elev-1); } html[data-theme="light"] .btn--primary:hover { background: var(--copper-bright); border-color: var(--copper-bright); box-shadow: var(--elev-2); } html[data-theme="light"] .btn--ghost { border-color: var(--ink-line); color: var(--paper); background: transparent; } html[data-theme="light"] .btn--ghost:hover { border-color: var(--copper); color: var(--copper); } /* ============================================================ KNOWLEDGE PAGE — Sidebar & articles ============================================================ */ html[data-theme="light"] .kb-sidebar__group h5 { color: var(--copper); } html[data-theme="light"] .kb-sidebar__group a { color: var(--paper-dim); border-color: var(--ink-line-soft); } html[data-theme="light"] .kb-sidebar__group a:hover, html[data-theme="light"] .kb-sidebar__group a.is-active { color: var(--copper); border-color: var(--copper); } html[data-theme="light"] .kb-search input { border-color: var(--ink-line); background: var(--ink-raised); } html[data-theme="light"] .kb-search input:focus { border-color: var(--copper); } html[data-theme="light"] .kb-feature { border-color: var(--ink-line); } html[data-theme="light"] .kb-feature__tag { color: var(--copper); border-color: rgba(166,107,63,0.2); background: rgba(166,107,63,0.04); } html[data-theme="light"] .kb-article-card { border-color: var(--ink-line); background: var(--ink-raised); box-shadow: var(--elev-1); } html[data-theme="light"] .kb-article-card:hover { border-color: rgba(166,107,63,0.2); box-shadow: var(--elev-2); } html[data-theme="light"] .kb-subscribe { background: var(--ink-void); border-color: var(--ink-line); } html[data-theme="light"] .kb-subscribe__form input { border-color: var(--ink-line); background: var(--ink-raised); } /* ============================================================ PRODUCT DETAIL PAGE ============================================================ */ html[data-theme="light"] .pd-tabs { border-color: var(--ink-line); background: rgba(250, 249, 246, 0.85); backdrop-filter: blur(14px) saturate(1.2); } html[data-theme="light"] .pd-tab { color: var(--paper-faint); border-bottom-color: transparent; } html[data-theme="light"] .pd-tab:hover { color: var(--paper); } html[data-theme="light"] .pd-tab.is-active { color: var(--copper); border-bottom-color: var(--copper); } html[data-theme="light"] .pd-spec-table { border-color: var(--ink-line); } html[data-theme="light"] .pd-spec-table th { color: var(--copper); border-color: var(--ink-line); } html[data-theme="light"] .pd-spec-table td { border-color: var(--ink-line-soft); color: var(--paper); } html[data-theme="light"] .pd-spec-table tr:hover td { background: var(--ink-panel); } html[data-theme="light"] .pd-gallery__thumb { border-color: var(--ink-line); } html[data-theme="light"] .pd-gallery__thumb.is-active { border-color: var(--copper); } html[data-theme="light"] .pd-doc { border-color: var(--ink-line); background: var(--ink-raised); box-shadow: var(--elev-1); } html[data-theme="light"] .pd-doc:hover { border-color: rgba(166,107,63,0.2); box-shadow: var(--elev-2); } html[data-theme="light"] .pd-trust li { border-color: var(--ink-line-soft); color: var(--paper-dim); } html[data-theme="light"] .pd-buy-panel { background: var(--ink-raised); border-color: var(--ink-line); box-shadow: var(--elev-2); } /* ============================================================ VIDEOS PAGE ============================================================ */ html[data-theme="light"] .vh-feature { border-color: var(--ink-line); } html[data-theme="light"] .vh-chapters { border-color: var(--ink-line); } html[data-theme="light"] .vh-chapter { border-color: var(--ink-line-soft); } html[data-theme="light"] .vh-series-card { border-color: var(--ink-line); background: var(--ink-raised); box-shadow: var(--elev-1); } /* ============================================================ FOOTER — Clean white ============================================================ */ html[data-theme="light"] .site-footer { background: var(--ink-base); border-top-color: var(--ink-line); } html[data-theme="light"] .site-footer::before { background: linear-gradient(90deg, transparent 0%, rgba(166,107,63,0.25) 50%, transparent 100%); } html[data-theme="light"] .footer-col h4 { color: var(--copper); } html[data-theme="light"] .footer-col a { color: var(--paper-dim); } html[data-theme="light"] .footer-col a:hover { color: var(--copper); } html[data-theme="light"] .footer-brand p { color: var(--paper-dim); } html[data-theme="light"] .footer-bottom { border-top-color: var(--ink-line); color: var(--paper-faint); } /* ============================================================ FORMS ============================================================ */ html[data-theme="light"] input[type="email"], html[data-theme="light"] input[type="text"] { border-color: var(--ink-line); background: var(--ink-raised); color: var(--paper); } html[data-theme="light"] input[type="email"]:focus, html[data-theme="light"] input[type="text"]:focus { border-color: var(--copper); background: #FFFFFF; box-shadow: 0 0 0 3px rgba(166,107,63,0.08); } /* ============================================================ MODAL ============================================================ */ html[data-theme="light"] .modal-overlay { background: rgba(242, 240, 236, 0.94); backdrop-filter: blur(8px); } html[data-theme="light"] .modal-overlay__close { color: var(--paper-dim); border-color: rgba(0,0,0,0.08); background: rgba(255,255,255,0.8); } html[data-theme="light"] .modal-overlay__close:hover { color: var(--paper); border-color: var(--copper); } /* ============================================================ EMPTY STATES ============================================================ */ html[data-theme="light"] .empty-state { border-color: var(--ink-line); } html[data-theme="light"] .empty-state h3 { color: var(--paper); } html[data-theme="light"] .empty-state p { color: var(--paper-dim); } /* ============================================================ MOBILE NAV ============================================================ */ html[data-theme="light"] .primary-nav.is-open { background: var(--ink-base); } html[data-theme="light"] .nav-toggle { border-color: var(--ink-line); } html[data-theme="light"] .nav-toggle span { background: var(--paper); } /* ============================================================ Smooth transitions — disabled during initial load ============================================================ */ html.no-transition, html.no-transition *, html.no-transition *::before, html.no-transition *::after { transition: none !important; } html[data-theme="light"], html[data-theme="light"] *, html[data-theme="light"] *::before, html[data-theme="light"] *::after { transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), opacity 0.35s var(--ease-out); } html[data-theme="light"] img, html[data-theme="light"] video { transition: none; } /* ============================================================ Override hardcoded dark backgrounds — Overlays & labels These elements use rgba(8,9,10,...) / rgba(13,14,16,...) that don't respond to CSS variable changes ============================================================ */ /* Header sticky bg */ html[data-theme="light"] .site-header { background: rgba(250, 249, 246, 0.72) !important; } html[data-theme="light"] .site-header.is-scrolled { background: rgba(250, 249, 246, 0.97) !important; } /* Chip badges */ html[data-theme="light"] .chip { background: rgba(255, 255, 255, 0.7) !important; border-color: var(--ink-line); } /* Product card corner badge */ html[data-theme="light"] .product-card__badge { color: var(--paper) !important; background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(0,0,0,0.06); } /* Video card play button & duration */ html[data-theme="light"] .video-card__play { background: rgba(255, 255, 255, 0.6) !important; border-color: var(--paper); } html[data-theme="light"] .video-card__play svg { fill: var(--paper); } html[data-theme="light"] .video-card:hover .video-card__play svg { fill: #FFFFFF; } html[data-theme="light"] .video-card__duration { background: rgba(255, 255, 255, 0.85) !important; color: var(--paper); } /* Video page — large play button & duration */ html[data-theme="light"] .play-large { background: rgba(255, 255, 255, 0.6) !important; border-color: var(--paper); } html[data-theme="light"] .play-large svg { fill: var(--paper); } html[data-theme="light"] .vh-feature__player:hover .play-large svg { fill: #FFFFFF; } html[data-theme="light"] .duration-large { background: rgba(255, 255, 255, 0.85) !important; color: var(--paper); } /* Video page — sticky toolbar */ html[data-theme="light"] .vh-toolbar { background: rgba(250, 249, 246, 0.9) !important; backdrop-filter: blur(16px) saturate(1.2); } /* Products page — sticky catalog toolbar */ html[data-theme="light"] .catalog-toolbar { background: rgba(250, 249, 246, 0.9) !important; backdrop-filter: blur(16px) saturate(1.2); } /* Product detail — gallery corner label */ html[data-theme="light"] .pd-gallery__main .corner-label { color: var(--paper); background: rgba(255, 255, 255, 0.85); border-color: rgba(0,0,0,0.06); } /* Product detail — sticky tabs */ html[data-theme="light"] .pd-tabs { background: rgba(250, 249, 246, 0.9) !important; backdrop-filter: blur(14px) saturate(1.2); } /* Knowledge — feature corner label */ html[data-theme="light"] .kb-feature__media .corner-label { color: var(--paper); background: rgba(255, 255, 255, 0.85); border-color: rgba(0,0,0,0.06); } /* Spotlight corner label */ html[data-theme="light"] .spotlight__media .corner-label { color: var(--paper); background: rgba(255, 255, 255, 0.85); border-color: rgba(0,0,0,0.06); } /* Modal overlay */ html[data-theme="light"] .modal-overlay { background: rgba(242, 240, 236, 0.94) !important; } /* Hero spec panel — hardcoded dark bg */ html[data-theme="light"] .hero__spec-panel { background: rgba(255, 255, 255, 0.85) !important; } /* ============================================================ Light Theme — Standards Page ============================================================ */ html[data-theme="light"] .standards-grid { background: var(--ink-line); border-color: var(--ink-line); } html[data-theme="light"] .standards-card { background: var(--ink-base); } html[data-theme="light"] .standards-card:hover { background: var(--ink-raised); } html[data-theme="light"] .cert-request { background: var(--ink-void); border-top-color: var(--ink-line); } /* ============================================================ Light Theme — Contact Page ============================================================ */ html[data-theme="light"] .contact-grid { background: var(--ink-line); border-color: var(--ink-line); } html[data-theme="light"] .contact-card { background: var(--ink-base); } html[data-theme="light"] .contact-card:hover { background: var(--ink-raised); } html[data-theme="light"] .contact-cta { background: var(--ink-void); border-top-color: var(--ink-line); }