/* ============================================================ STICKR LAB — dark mode Activated by data-theme="dark" on (set in main.js). ============================================================ */ [data-theme="dark"] { --paper: #0b0e14; --paper-2: #121722; --card: #171e2c; /* Subtle per-section surface tones. */ --surf-a: #0b0e14; --surf-b: #0f141f; --surf-c: #141a28; --surf-d: #181d2c; --ink: #f0f4fa; --ink-soft: #cbd5e6; --muted: #9aa8bc; --line: rgba(240, 244, 250, 0.12); --line-strong: rgba(240, 244, 250, 0.65); --acid: #9ebee5; --acid-deep: #6b90c2; --violet: #e28a76; --violet-ink: #fdf5f3; --shadow-hard: 3px 3px 0 rgba(0, 0, 0, 0.85); --shadow-soft: 0 20px 44px -24px rgba(0, 0, 0, 0.90); color-scheme: dark; } /* 1. Global Text & Media Overrides --------------------------- */ [data-theme="dark"] body { color: var(--ink); background-color: var(--paper); } [data-theme="dark"] svg { color: currentColor; } /* 2. Header, Dropdowns & Breadcrumbs ------------------------- */ [data-theme="dark"] .ticker { background: #07090e; color: #f0f4fa; border-bottom-color: rgba(240, 244, 250, 0.1); } [data-theme="dark"] .nav__link:hover { background: rgba(158, 190, 229, 0.18); color: var(--acid); } [data-theme="dark"] .nav__link[aria-current="page"] { background: var(--acid); color: #0b0e14; } [data-theme="dark"] .dropdown { background: #121722; border-color: var(--line); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6); } [data-theme="dark"] .dropdown a { color: #f0f4fa; } [data-theme="dark"] .dropdown a:hover { background: rgba(158, 190, 229, 0.18); color: var(--acid); } [data-theme="dark"] .dropdown a small { color: #9aa8bc; } [data-theme="dark"] .crumbs { background: #07090e; border-bottom-color: var(--line); } [data-theme="dark"] .crumbs__path { color: #9aa8bc; } [data-theme="dark"] .crumbs__path a { color: #cbd5e6; } [data-theme="dark"] .crumbs__path a:hover { color: var(--acid); } /* 3. Buttons & Interactive Controls ------------------------- */ [data-theme="dark"] .btn { background: var(--card); color: var(--ink); border-color: var(--line-strong); } [data-theme="dark"] .btn--solid { background: var(--acid); color: #0b0e14; border-color: var(--acid); } [data-theme="dark"] .btn--solid:hover { background: var(--violet); color: #ffffff; border-color: var(--violet); } [data-theme="dark"] .btn--acid { background: var(--acid); color: #0b0e14; border-color: var(--acid); } [data-theme="dark"] .btn--acid:hover { background: #ffffff; color: #0b0e14; border-color: #ffffff; } [data-theme="dark"] .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } [data-theme="dark"] .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } [data-theme="dark"] .icon-btn { border-color: var(--line); color: var(--ink); } [data-theme="dark"] .icon-btn:hover { background: var(--acid); color: #0b0e14; border-color: var(--acid); } [data-theme="dark"] .icon-btn .icon-sun { display: block; } [data-theme="dark"] .icon-btn .icon-moon { display: none; } [data-theme="dark"] .strip { background: var(--acid); color: #0b0e14; border-color: rgba(240, 244, 250, 0.12); } [data-theme="dark"] .strip__track { color: #0b0e14; } /* 4. Form Inputs, Selects, Autofill & Placeholders ----------- */ [data-theme="dark"] ::placeholder, [data-theme="dark"] :-ms-input-placeholder, [data-theme="dark"] ::-ms-input-placeholder { color: #9aa8bc !important; opacity: 1 !important; } [data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea { background: #0b0e14; color: var(--ink); border-color: var(--line); } [data-theme="dark"] select option { background-color: #121722; color: #f0f4fa; } [data-theme="dark"] input:-webkit-autofill, [data-theme="dark"] textarea:-webkit-autofill, [data-theme="dark"] select:-webkit-autofill { -webkit-text-fill-color: #f0f4fa !important; -webkit-box-shadow: 0 0 0px 1000px #0b0e14 inset !important; transition: background-color 5000s ease-in-out 0s; } [data-theme="dark"] .form-note { color: #9aa8bc; } [data-theme="dark"] .pulse-note { color: #9aa8bc; } [data-theme="dark"] .pulse-note::before { background: var(--acid); } [data-theme="dark"] .field span { color: #cbd5e6; } /* 5. Bento Cards & Grid Overrides --------------------------- */ [data-theme="dark"] .bento-card--labels { background: linear-gradient(155deg, #161e2c 0%, #1c2637 55%, #253349 100%); color: var(--ink); border-color: var(--line); } [data-theme="dark"] .bento-card--labels .bento-card__body h3 { color: #ffffff; } [data-theme="dark"] .bento-card--labels .bento-card__body p { color: #cbd5e6; } [data-theme="dark"] .stat-card { background: var(--card); border-color: var(--line); } [data-theme="dark"] .stat-card__label { color: #9aa8bc; } [data-theme="dark"] .stat-card__value { color: #ffffff; } [data-theme="dark"] .stat-card__note { color: #9aa8bc; } [data-theme="dark"] .stat-card__pin { background: rgba(158, 190, 229, 0.18); color: var(--acid); } [data-theme="dark"] .sticker, [data-theme="dark"] .wall-item, [data-theme="dark"] .sticker__round { border-color: rgba(240, 244, 250, 0.18); } [data-theme="dark"] .sticker--d { background: #202738; color: var(--ink); } [data-theme="dark"] .sticker--b { background: var(--acid); color: #0b0e14; } [data-theme="dark"] .wall-item--1 { background: #202738; color: var(--ink); } [data-theme="dark"] .wall-item--4 { color: #ffffff; } [data-theme="dark"] .spec-panel { background: #07090e; border: 1px solid var(--line); } /* before */ [data-theme="dark"] .spec-panel { background: #07090e; border: 1px solid var(--line); } /* after */ [data-theme="dark"] .spec-panel { background: #07090e; border: 1px solid var(--line); color: #eef2f8; } [data-theme="dark"] .price-card--featured { color: var(--ink); background: var(--card); border-color: var(--acid); } [data-theme="dark"] .price-card--featured .price-card__unit, [data-theme="dark"] .price-card--featured ul { color: var(--ink-soft); } [data-theme="dark"] .price-card--featured .btn { background: var(--acid); color: #0b0e14; border-color: var(--acid); } [data-theme="dark"] .use-card__icon { color: #ffffff; } [data-theme="dark"] .avatar { background: var(--acid); color: #0b0e14; border-color: var(--ink); } [data-theme="dark"] .guide-item code { background: #07090e; color: var(--acid); } [data-theme="dark"] .cut-preview { background: repeating-conic-gradient(#1f2636 0 25%, #131824 0 50%) 0 0 / 20px 20px; } [data-theme="dark"] .hero__title mark, [data-theme="dark"] .cta__title mark { color: #ffffff; background: var(--violet); } [data-theme="dark"] .modal { background: rgba(7, 9, 14, 0.80); } [data-theme="dark"] .to-top { background: var(--acid); color: #0b0e14; border-color: var(--acid); } [data-theme="dark"] .to-top:hover { background: #ffffff; color: #0b0e14; } [data-theme="dark"] .site-footer { background: #07090e; border-top-color: var(--line); } /* 6. FAQ Accordion & Modals --------------------------------- */ [data-theme="dark"] details.faq-item { background: var(--card); border-color: var(--line); color: var(--ink); } [data-theme="dark"] details.faq-item summary { color: #ffffff; } [data-theme="dark"] details.faq-item summary::after { color: var(--acid); } [data-theme="dark"] details.faq-item p { color: #cbd5e6; } /* 7. Contact & File Guide Cards ----------------------------- */ [data-theme="dark"] .ct-promise-card, [data-theme="dark"] .ct-proto-card, [data-theme="dark"] .ct-connect-card, [data-theme="dark"] .ct-pick-card, [data-theme="dark"] .ct-box, [data-theme="dark"] .ct-quote-card { background: var(--card); border-color: var(--line); color: var(--ink); } [data-theme="dark"] .ct-promise__title, [data-theme="dark"] .ct-proto__title, [data-theme="dark"] .ct-connect__title { color: #ffffff; } [data-theme="dark"] .ct-proto__num, [data-theme="dark"] .ct-step__meta { color: #9aa8bc; } [data-theme="dark"] .fg-check-card, [data-theme="dark"] .fg-verdict-card, [data-theme="dark"] .fg-cut-card, [data-theme="dark"] .fg-facts-card, [data-theme="dark"] .fg-dpi-card, [data-theme="dark"] .fg-def-card { background: var(--card); border-color: var(--line); color: var(--ink); } [data-theme="dark"] .fg-check__num, [data-theme="dark"] .fg-facts__label { color: #9aa8bc; } /* 8. Auth Portal & Showcase --------------------------------- */ [data-theme="dark"] .auth-card { background: var(--card); border-color: var(--line); } [data-theme="dark"] .auth-tabs { background: #0b0e14; border-color: var(--line); } [data-theme="dark"] .auth-tabs__btn { color: #9aa8bc; } [data-theme="dark"] .auth-tabs__btn.is-active { color: #0b0e14; background: var(--acid); } [data-theme="dark"] .auth-showcase { background: #07090e; color: #f0f4fa; } [data-theme="dark"] .auth-showcase p { color: #cbd5e6; } [data-theme="dark"] .auth-foot { color: #9aa8bc; } [data-theme="dark"] .auth-link { color: var(--acid); } /* 9. Section Surface Variation ------------------------------ */ [data-theme="dark"] main > section { transition: background 0.2s ease; } [data-theme="dark"] main > section:not(.hero):not(.page-head):not(.audience):not(.wall):not(.cta) { box-shadow: inset 0 1px 0 var(--line); } [data-theme="dark"] main > section:nth-of-type(4n+2):not(.hero):not(.page-head):not(.audience):not(.wall):not(.cta) { background: var(--surf-b); } [data-theme="dark"] main > section:nth-of-type(4n+3):not(.hero):not(.page-head):not(.audience):not(.wall):not(.cta) { background: var(--surf-c); } [data-theme="dark"] main > section:nth-of-type(4n):not(.hero):not(.page-head):not(.audience):not(.wall):not(.cta) { background: var(--surf-d); } [data-theme="dark"] main > section:nth-of-type(4n+1):not(.hero):not(.page-head):not(.audience):not(.wall):not(.cta) { background: var(--surf-a); } /* 10. Tags, Chips, Pills & Tables --------------------------- */ [data-theme="dark"] .kicker { color: var(--acid); } [data-theme="dark"] .badge-line { background: rgba(158, 190, 229, 0.15); color: var(--acid); border-color: rgba(158, 190, 229, 0.3); } [data-theme="dark"] .chip[aria-pressed="true"] { color: #0b0e14; background: var(--acid); border-color: var(--acid); } [data-theme="dark"] .option input:checked::after { border-color: #0b0e14; } [data-theme="dark"] .product-card__price, [data-theme="dark"] .wide-card__flag, [data-theme="dark"] .pill { color: #0b0e14; background: var(--acid); } [data-theme="dark"] .badge-pass { color: var(--acid); background: rgba(158, 190, 229, 0.18); } [data-theme="dark"] .badge-fail { color: #fff; background: rgba(226, 138, 118, 0.25); } [data-theme="dark"] .scan-stage { background: #0c1018; } [data-theme="dark"] .barcode i { background: var(--acid); } [data-theme="dark"] .page-head__title mark, [data-theme="dark"] .title-mark mark, [data-theme="dark"] .specimen h2 mark { color: #0b0e14; background: var(--acid); } [data-theme="dark"] .page-head__title u { color: var(--violet); border-color: var(--violet); } [data-theme="dark"] .cell-link { color: var(--acid); } [data-theme="dark"] table.matrix thead th { background: #121722; color: #f0f4fa; } [data-theme="dark"] table.matrix tbody tr.is-current { background: rgba(158, 190, 229, 0.2); } [data-theme="dark"] .meter__track { background: rgba(255, 255, 255, 0.14); } [data-theme="dark"] .specimen { background: #07090e; border: 1px solid var(--line); } [data-theme="dark"] .order-card { background: #161c29; } [data-theme="dark"] .outro { background: #07090e; } [data-theme="dark"] .outro__title mark { color: #0b0e14; background: var(--acid); } [data-theme="dark"] .b2b-card--featured { background: #07090e; } [data-theme="dark"] .b2b-card--featured .btn--acid { background: var(--acid); color: #0b0e14; } [data-theme="dark"] .code-panel { background: #07090e; } [data-theme="dark"] .preflight-panel { background: #07090e; border-color: var(--line); } [data-theme="dark"] .vault-card__art--flat { background: repeating-conic-gradient(#1f2636 0 25%, #131824 0 50%) 0 0 / 16px 16px; } [data-theme="dark"] .vault-card__download { border-color: var(--line); } [data-theme="dark"] .vault-card__download:hover { background: var(--acid); color: #0b0e14; border-color: var(--acid); } [data-theme="dark"] .estimator-range input[type="range"] { background: #07090e; } [data-theme="dark"] .material-select-card__art--vinyl { background: linear-gradient(155deg, #1f2636, #0b0e14); } [data-theme="dark"] .material-select-card__art--clear { background: linear-gradient(155deg, #273045, #121722); } [data-theme="dark"] .dropzone--light { background: #07090e; border-color: var(--line-strong); } [data-theme="dark"] .dropzone--light svg { color: var(--acid); } /* Home 2 - Finish Library */ [data-theme="dark"] .h2-finishes { color: #f0f4fa; } [data-theme="dark"] .h2-finishes h2 { color: #f0f4fa; } [data-theme="dark"] .h2-finishes h2 mark { color: #0b0e14; background: var(--acid); } [data-theme="dark"] .h2-finishes__head p:last-child { color: #cbd5e6; } /* HOME 2 — Finish Library dark mode fixes */ [data-theme="dark"] .h2-finishes { background: #171e2c; color: #f0f4fa; } [data-theme="dark"] .h2-finishes .kicker { color: #9ebee5; } [data-theme="dark"] .h2-finishes h2 { color: #f0f4fa; } [data-theme="dark"] .h2-finishes h2 mark { background: #9ebee5; color: #0b0e14; } [data-theme="dark"] .h2-finishes__head > p:last-child { color: #cbd5e6; } [data-theme="dark"] .h2-finish { background: #121722; color: #f0f4fa; border-color: rgba(240, 244, 250, 0.18); } [data-theme="dark"] .h2-finish:hover { border-color: #9ebee5; } [data-theme="dark"] .h2-finish > div:last-child span { color: #9aa8bc; } [data-theme="dark"] .h2-finish h3 { color: #ffffff; } [data-theme="dark"] .h2-finish p { color: #cbd5e6; }