/* Theme pass: a True Black option, and a refinement of every light theme. Loaded last so it settles the palettes defined inline in index.html. */ /* ============================================================================ TRUE BLACK Deliberately not #000 everywhere — surfaces step up from black so panels, inputs and dividers stay readable. The accent is a warm off-white rather than a saturated hue, so color is carried almost entirely by text. ========================================================================== */ /* !important throughout: the theme bootstrap sets some of these as inline custom properties on , which a plain stylesheet rule cannot beat. */ html body.true-black{ --bg:#000000!important; --panel:#0a0a0c!important; --panel2:#101013!important; --surface-main:#0a0a0c!important; --surface-raised:#131317!important; --surface-input:#050506!important; --text:#f4f5f7!important; --muted:#8d929a!important; --line:#26262d!important; --edge:#30303a!important; --edge-strong:#3a3a45!important; --accent:#c8ccd2!important; --accent2:#ffffff!important; --accent-soft:#1a1a20!important; --good:#4ade80; --warn:#fbbf24; --bad:#f87171; --danger:#f87171; --shadow:0 18px 45px rgba(0,0,0,.85); background:#000000!important; } /* Flatten the accent gradients — on black they read as grey smears. */ body.true-black .card, body.true-black .btn, body.true-black .priceEstimateTile, body.true-black .inventoryMetric, body.true-black .planCompareCard, body.true-black .profileTypeCard{ background-image:none!important; } body.true-black .card, body.true-black .priceEstimateTile, body.true-black .inventoryMetric{ background-color:var(--panel)!important; border-color:var(--line)!important; box-shadow:0 10px 30px rgba(0,0,0,.6)!important; } body.true-black .btn{ background-color:var(--surface-raised)!important; border:1px solid var(--edge)!important; color:var(--text)!important; } body.true-black .btn:not(.secondary):not(.iconBtn){ background-color:#1c1c22!important; border-color:var(--edge-strong)!important; } /* The base theme paints primary buttons with dark text for a light accent. On black that is unreadable, so text color is forced for every button variant. */ html body.true-black .btn, html body.true-black button.btn, html body.true-black .btn *, html body.true-black .showcaseSignIn, html body.true-black .projectViewAllButton, html body.true-black .legalLinkButton{ color:var(--text)!important; -webkit-text-fill-color:var(--text)!important; } html body.true-black .themedSelectButton, html body.true-black .themedSelectButton span, html body.true-black .themedSelectOption, html body.true-black .inventoryLocationPickerButton, html body.true-black .inventoryLocationOption{ color:var(--text)!important; -webkit-text-fill-color:var(--text)!important; } html body.true-black .themedSelectButton svg, html body.true-black .inventoryLocationPickerButton .locationGlyph svg{ stroke:var(--accent2)!important; } html body.true-black .btn:not(.secondary):not(.iconBtn):not(.danger):not(.googleSignInBtn){ background-color:#24242c!important; border-color:#45454f!important; color:#f4f5f7!important; } html body.true-black .btn:not(.secondary):not(.iconBtn):not(.danger):not(.googleSignInBtn) *{ color:#f4f5f7!important; -webkit-text-fill-color:#f4f5f7!important; } html body.true-black .btn.danger, html body.true-black .btn.danger *{color:var(--danger)!important;-webkit-text-fill-color:var(--danger)!important} body.true-black .btn:hover{border-color:var(--accent)!important} /* The suggested-price tile is the one place color is welcome. */ body.true-black .priceEstimateTile.suggested{ background-color:#131317!important; border-color:#3d3d48!important; } body.true-black .tabs .tab.active{background-color:#1e1e25!important;color:#fff!important} body.true-black input,body.true-black select,body.true-black textarea{ background-color:var(--surface-input)!important; border-color:var(--edge)!important; color:var(--text)!important; } /* ============================================================================ LIGHT THEMES The complaint was that every surface carried the same accent gradient, which flattened the hierarchy and read as generic. These rules replace the washes with solid surfaces, and let borders and spacing carry the structure instead. ========================================================================== */ body.theme-light .card, body.arctic .card{ background-image:none!important; background-color:var(--panel)!important; border:1px solid var(--line)!important; box-shadow:0 8px 22px rgba(15,23,42,.07)!important; } body.theme-light .priceEstimateTile, body.arctic .priceEstimateTile{ background-image:none!important; background-color:var(--panel)!important; box-shadow:0 6px 16px rgba(15,23,42,.06)!important; } /* Keep exactly one accented surface per screen so it actually stands out. */ body.theme-light .priceEstimateTile.suggested, body.arctic .priceEstimateTile.suggested{ background-image:none!important; background-color:color-mix(in srgb,var(--accent) 10%,var(--panel))!important; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line))!important; } body.theme-light .btn, body.arctic .btn{ background-image:none!important; background-color:var(--panel)!important; border:1px solid var(--edge-strong,var(--line))!important; color:var(--text)!important; box-shadow:0 1px 2px rgba(15,23,42,.06)!important; } body.theme-light .btn:not(.secondary):not(.iconBtn):not(.helpLink), body.arctic .btn:not(.secondary):not(.iconBtn):not(.helpLink){ background-color:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important; box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 30%,transparent)!important; } body.theme-light .btn:hover, body.arctic .btn:hover{border-color:var(--accent)!important} body.theme-light .tabs .tab.active, body.arctic .tabs .tab.active{ background-image:none!important; background-color:var(--accent)!important; color:#fff!important; } body.theme-light input,body.theme-light select,body.theme-light textarea, body.arctic input,body.arctic select,body.arctic textarea{ background-color:#fff!important; border-color:var(--line)!important; } body.theme-light .inventoryMetric, body.arctic .inventoryMetric{ background-image:none!important; background-color:var(--panel)!important; } /* Distinct grounds per light theme — tinted off-whites and greys rather than a single flat white, so the themes are actually distinguishable from each other. */ body.graphite-light{--bg:#eef1f4!important;background:#eef1f4!important} body.midnight-light{--bg:#eaeef6!important;background:#eaeef6!important} body.forest-light {--bg:#ecf2ec!important;background:#ecf2ec!important} body.royal-light {--bg:#efecf8!important;background:#efecf8!important} body.rose-light {--bg:#f8eef2!important;background:#f8eef2!important} body.crimson-light{--bg:#f7edec!important;background:#f7edec!important} body.sunrise-light{--bg:#fdf1e7!important;background:#fdf1e7!important} body.copper-light {--bg:#f8efe8!important;background:#f8efe8!important} body.ocean-light {--bg:#e9f2f6!important;background:#e9f2f6!important} body.orange-light {--bg:#fdf0e6!important;background:#fdf0e6!important} body.arctic {--bg:#eef4f8!important;background:#eef4f8!important} /* Panels stay near-white so cards lift cleanly off those tinted grounds. */ body.theme-light,body.arctic{--panel2:color-mix(in srgb,var(--bg) 55%,#fff)!important} body.theme-light .card,body.arctic .card{--panel:#ffffff} /* Muted text was too pale against the tinted grounds to read comfortably. */ body.theme-light{--muted:#5a6572!important} body.arctic{--muted:#54626e!important}