/* kenTel — tenant themes. * * WHY THIS FILE EXISTS: the previous card system used CSS color-mix() at * runtime for every border, glow and button. color-mix() is unsupported on * the Android System WebView and older mobile Chrome that captive-portal * customers actually use — and when it fails, the value is dropped, which * is why cards rendered dark and Buy buttons vanished. Every colour here is * a plain hex or rgba literal. Nothing computed at runtime. * * A "theme" is a full set of custom properties selected by . * Two ship by default and are visually distinct so tenants don't look alike: * * kentel — kenTel Broadband 5G : electric cyan / deep space blue. * drben — Dr-Ben Hotspot Networks : warm amber / oxblood, VenomSaver-warm. * * A tenant's own brand_primary (if set) still overrides --brand via * _brand_vars.html, but the theme gives a complete, coherent look with zero * configuration. */ /* ---- default (kenTel-style) : cyan on deep blue ---- */ :root, [data-theme="kentel"] { --void: #061018; --panel: #0C1B27; --panel-2: #12283A; --line: #1E3A50; --text: #EAF4FF; --text-muted: #9DB6CC; --text-faint: #5E7A92; --brand: #22D3EE; /* electric cyan */ --brand-deep: #0891B2; --brand-ink: #032430; /* text on brand buttons */ /* legacy aliases: every existing rule that used --venom now follows the theme */ --venom: #22D3EE; --venom-deep: #0891B2; --signal: #38BDF8; --ok: #34D399; --warn: #FBBF24; --danger: #FB7185; /* Bundle palette — six solid, hand-picked accents. Each has a matching soft tint (12% on the panel) and a deep shade, ALL pre-mixed against this theme's --panel so no runtime color-mix is needed. */ --p1: #22D3EE; --p1d: #0E7490; --p1s: #0E2A38; --p2: #38BDF8; --p2d: #0369A1; --p2s: #0B2536; --p3: #A78BFA; --p3d: #6D28D9; --p3s: #1B1E3A; --p4: #34D399; --p4d: #059669; --p4s: #0A2A2A; --p5: #FBBF24; --p5d: #D97706; --p5s: #2A2411; --p6: #FB7185; --p6d: #E11D48; --p6s: #2E1522; } /* ---- Dr-Ben : warm amber / oxblood ---- */ [data-theme="drben"] { --void: #140B08; --panel: #1E110B; --panel-2: #2A1810; --line: #422619; --text: #FBF1E8; --text-muted: #D2B4A0; --text-faint: #98735C; --brand: #FF9E2C; /* warm amber */ --brand-deep: #E06A1B; --brand-ink: #2A1403; --venom: #FF9E2C; --venom-deep: #E06A1B; --signal: #FFC24D; --ok: #6FD11E; --warn: #FFC24D; --danger: #FF6B5C; --p1: #FF9E2C; --p1d: #C2610F; --p1s: #33200C; --p2: #FFC24D; --p2d: #D98A16; --p2s: #33280F; --p3: #FF6B5C; --p3d: #C43B2E; --p3s: #331512; --p4: #E0483F; --p4d: #A82820; --p4s: #2E120F; --p5: #F0A868; --p5d: #C47A38; --p5s: #302014; --p6: #C98A5B; --p6d: #9A6035; --p6s: #2A1C11; } /* ---- royal : violet / indigo (for a premium or urban ISP) ---- */ [data-theme="royal"] { --void: #0B0A18; --panel: #14122A; --panel-2: #1F1B3D; --line: #322C5C; --text: #F0EEFF; --text-muted: #B6AEDC; --text-faint: #766C9E; --brand: #A78BFA; --brand-deep: #7C3AED; --brand-ink: #1A0F33; --signal: #C084FC; --ok: #34D399; --warn: #FBBF24; --danger: #FB7185; --p1: #A78BFA; --p1d: #7C3AED; --p1s: #1E1840; --p2: #C084FC; --p2d: #9333EA; --p2s: #221641; --p3: #38BDF8; --p3d: #0369A1; --p3s: #0F2138; --p4: #34D399; --p4d: #059669; --p4s: #0C2A2A; --p5: #FBBF24; --p5d: #D97706; --p5s: #2A2411; --p6: #FB7185; --p6d: #E11D48; --p6s: #2E1526; --venom: #A78BFA; --venom-deep: #7C3AED; } /* ---- emerald : green / teal (for an eco or rural fibre brand) ---- */ [data-theme="emerald"] { --void: #04140E; --panel: #0A2018; --panel-2: #103026; --line: #1D4A3A; --text: #E8FBF2; --text-muted: #9CCBB6; --text-faint: #5E8A75; --brand: #34D399; --brand-deep: #059669; --brand-ink: #02251A; --signal: #2DD4BF; --ok: #4ADE80; --warn: #FBBF24; --danger: #FB7185; --p1: #34D399; --p1d: #059669; --p1s: #0A2A20; --p2: #2DD4BF; --p2d: #0D9488; --p2s: #0A2A28; --p3: #38BDF8; --p3d: #0369A1; --p3s: #0B2434; --p4: #A3E635; --p4d: #65A30D; --p4s: #1A2610; --p5: #FBBF24; --p5d: #D97706; --p5s: #2A2411; --p6: #FB7185; --p6d: #E11D48; --p6s: #2E1522; --venom: #34D399; --venom-deep: #059669; }