/* ========================================================= JUPITER BLUE — BRAND Site-wide theme system. Sets the colour palette + design tokens for both customer (light) and trade (dark) themes. Theme is set on server-side in PHP (see theme_helper.php). ========================================================= */ /* ========================================================= THEME: customer (light) — default for everyone not logged in as trade-tier. Used by 95%+ of visitors. ========================================================= */ body[data-theme="customer"] { /* Brand */ --jb-blue: #3aa3ce; --jb-blue-deep: #2a8aae; --jb-blue-soft: #eaf3f8; /* Orange — action accent */ --jb-accent: #faa329; --jb-accent-deep: #e08820; /* Brand navy — the deep blue from the wordmark and the three-band device. --night is #1a1a1a (near-black) and was standing in for this, which is why the Request Quote button read as black rather than as brand. */ --jb-navy: #0e2233; --jb-navy-deep: #091a27; /* Brochure navy — for hover backgrounds where needed */ --jb-navy-hover: #f0f0f0; /* Ink */ --ink: #1a1a1a; --ink-2: #4b4b4b; --ink-3: #6e6e6e; --ink-4: #a8a8a8; /* Surfaces */ --paper: #fafafa; --paper-2: #f0f0f0; --night: #1a1a1a; --line: #e3e3e3; --warm-neutral: #f0f0f0; /* Spec value colours (for spec tables on product/matrix pages) */ --spec-fire-text: #c83e30; --spec-acoustic-text: #4a6f8e; --spec-leak-text: #2d8642; --spec-thermal-text: #b8841f; /* Radii */ --radius-page: 6px; --radius-data: 4px; --radius-btn: 6px; } /* ========================================================= THEME: trade (dark) — logged-in trade-tier users only. Secure Hub aesthetic. Display typography. Restrained cyan. ========================================================= */ body[data-theme="trade"] { /* Brand */ --jb-blue: #3aa3ce; --jb-blue-deep: #2a8aae; --jb-blue-soft: rgba(58, 163, 206, 0.08); /* Orange */ --jb-accent: #faa329; --jb-accent-deep: #e08820; /* Brand navy — the deep blue from the wordmark and the three-band device. --night is #1a1a1a (near-black) and was standing in for this, which is why the Request Quote button read as black rather than as brand. */ --jb-navy: #0e2233; --jb-navy-deep: #091a27; /* Brochure-deep navy — button hover bg on dark */ --jb-navy-hover: #102438; /* Ink (white-on-dark) */ --ink: #f4f4f4; --ink-2: #a8a8a8; --ink-3: #6e6e6e; --ink-4: #3d3d3d; /* Surfaces (warm near-black) */ --paper: #1a1a1a; --paper-2: #232323; --night: #0e0e0e; --line: #2c2c2c; --warm-neutral: #242424; /* Spec colours — brighter on dark */ --spec-fire-text: #ff7a6e; --spec-acoustic-text: #8fb4d4; --spec-leak-text: #87cd8e; --spec-thermal-text: #f0b85c; /* Sharper corners on trade */ --radius-page: 4px; --radius-data: 0px; --radius-btn: 6px; } /* ========================================================= SHARED TOKENS — constant across themes ========================================================= */ :root { --tracking-tight: -0.02em; --tracking-tighter: -0.04em; --tracking-wide: 0.06em; --tracking-wider: 0.16em; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 480ms; --container: 1400px; } /* ========================================================= GLOBAL BODY DEFAULTS (apply in both themes) ========================================================= */ body { background: var(--paper); color: var(--ink); transition: background-color 320ms ease, color 320ms ease; font-feature-settings: "ss01", "tnum"; } /* sr-only utility — used in multiple places */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }