/* ============================================================================= ITRIX — THEME TOKENS ============================================================================= Four palettes × light/dark, expressed as CSS custom properties, then bridged onto Bootstrap's own variables so every stock Bootstrap component adopts the active theme without a single !important override. The active palette comes from , which is set in the of every page from ITRIX_CONFIG.theme before first paint. CONTRAST — every combination below was measured, not estimated. Ratios are quoted inline. AA requires 4.5:1 for body text, 3:1 for UI. Note that two palettes (signal-orange, blush) carry DARK text on their accent fill because white on those hues measures 2.87:1 and 3.24:1 — both failures. That is why --itx-on-accent exists as a per-theme token. ========================================================================== */ /* -------------------------------------------------------------------------- FONTS — self-hosted variable woff2. No Google Fonts request at runtime: faster (no third-party connection) and cleaner under POPIA. One file per family covers the whole weight range. -------------------------------------------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../fonts/sora-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== 1. PALETTE HUES — per theme. Surfaces are handled separately in §2 so a palette never needs to know whether it is rendering light or dark. ========================================================================== */ /* ---- electric-blue (default) ------------------------------------------- */ :root, :root[data-theme='electric-blue'] { --itx-ink: #0B1220; /* hero / footer ground */ --itx-ink-soft: #131C2E; /* raised card on ink */ --itx-ink-line: #22304A; /* hairline on ink */ --itx-accent: #2563EB; /* button + fill */ --itx-on-accent: #FFFFFF; /* 5.17:1 on accent — AA */ --itx-accent-hover: #1D4ED8; --itx-accent-2: #06B6D4; /* DECORATIVE ONLY — 2.43:1, never text */ --itx-accent-text-lt: #1D4ED8; /* 6.70:1 on white — AA */ --itx-accent-text-dk: #7DA9FF; /* light variant for dark surfaces */ --itx-accent-tint: #EFF4FF; /* icon chip / soft band on light */ --itx-accent-tint-dk: #16244A; --itx-glow: 37 99 235; /* rgb triplet for rgba() glows */ } /* ---- signal-orange ------------------------------------------------------ */ :root[data-theme='signal-orange'] { --itx-ink: #0B0F19; --itx-ink-soft: #151B28; --itx-ink-line: #2A3348; --itx-accent: #FF6A1A; --itx-on-accent: #10161F; /* 6.68:1 — white would be 2.87:1, a fail */ --itx-accent-hover: #E85A0C; --itx-accent-2: #FFB020; /* DECORATIVE ONLY — 1.83:1 */ --itx-accent-text-lt: #C2410C; /* 5.18:1 on white — AA */ --itx-accent-text-dk: #FFA76B; --itx-accent-tint: #FFF2EA; --itx-accent-tint-dk: #3A1D0C; --itx-glow: 255 106 26; } /* ---- emerald ------------------------------------------------------------ */ :root[data-theme='emerald'] { --itx-ink: #0F172A; --itx-ink-soft: #17233C; --itx-ink-line: #2A3A55; --itx-accent: #047857; --itx-on-accent: #FFFFFF; /* 5.48:1 — AA */ --itx-accent-hover: #036249; --itx-accent-2: #34D399; /* DECORATIVE ONLY — 1.92:1 */ --itx-accent-text-lt: #047857; /* 5.48:1 on white — AA */ --itx-accent-text-dk: #5EEAD4; --itx-accent-tint: #ECFDF5; --itx-accent-tint-dk: #0B3A2C; --itx-glow: 4 120 87; } /* ---- blush (carries the reference flyer's palette) ---------------------- */ :root[data-theme='blush'] { --itx-ink: #141414; --itx-ink-soft: #1F1D1C; --itx-ink-line: #3A3431; --itx-accent: #C97B5F; --itx-on-accent: #141414; /* 5.69:1 — white would be 3.24:1, a fail */ --itx-accent-hover: #B4674C; --itx-accent-2: #E9B8A7; /* DECORATIVE ONLY — 1.77:1 */ --itx-accent-text-lt: #A34F30; /* 5.65:1 on white — AA */ --itx-accent-text-dk: #E9B8A7; --itx-accent-tint: #FBF3EF; --itx-accent-tint-dk: #3A2419; --itx-glow: 201 123 95; } /* ========================================================================== 2. SURFACES — light is the default; dark overrides only what changes. Because these never touch the hue tokens in §1, any palette works in any mode with no combinatorial explosion. ========================================================================== */ :root { --itx-bg: #FFFFFF; --itx-surface: #FFFFFF; /* cards */ --itx-surface-2: #F6F8FC; /* alternating section band */ --itx-surface-3: #EEF2F8; /* input wells, table stripes */ --itx-heading: #0B1220; /* 18.72:1 on white */ --itx-text: #475569; /* 7.58:1 on white — AA */ --itx-text-muted: #64748B; /* 4.76:1 on white — AA, just */ --itx-border: #E2E8F0; --itx-border-2: #CBD5E1; --itx-accent-text: var(--itx-accent-text-lt); --itx-chip-bg: var(--itx-accent-tint); --itx-star: #F59E0B; /* review stars — same in every palette so a 5-star rating always reads as a rating */ --itx-shadow-sm: 0 1px 2px rgb(11 18 32 / 6%), 0 1px 3px rgb(11 18 32 / 8%); --itx-shadow: 0 4px 12px rgb(11 18 32 / 6%), 0 12px 28px rgb(11 18 32 / 8%); --itx-shadow-lg: 0 8px 24px rgb(11 18 32 / 8%), 0 24px 56px rgb(11 18 32 / 12%); --itx-radius: 14px; --itx-radius-sm: 10px; --itx-radius-lg: 22px; /* Fluid type scale — clamp() so there are no breakpoint jumps. */ --itx-h1: clamp(2.15rem, 1.35rem + 3.6vw, 4.15rem); --itx-h2: clamp(1.72rem, 1.25rem + 2.1vw, 2.85rem); --itx-h3: clamp(1.28rem, 1.08rem + 0.9vw, 1.65rem); --itx-lead: clamp(1.03rem, 0.97rem + 0.32vw, 1.2rem); --itx-section-y: clamp(3.5rem, 2.2rem + 5.2vw, 7rem); color-scheme: light; } /* Explicit dark, and auto-dark when the OS asks for it. Kept as two selector lists sharing one block so the values can never drift apart. */ :root[data-mode='dark'] { color-scheme: dark; } :root[data-mode='dark'] { --itx-bg: #0B1220; --itx-surface: #131C2E; --itx-surface-2: #0F1727; --itx-surface-3: #1A2437; --itx-heading: #F1F5F9; --itx-text: #CBD5E1; /* 12.61:1 on ink */ --itx-text-muted: #94A3B8; /* 7.30:1 on ink — AA */ --itx-border: #253148; --itx-border-2: #33425E; --itx-accent-text: var(--itx-accent-text-dk); --itx-chip-bg: var(--itx-accent-tint-dk); --itx-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%); --itx-shadow: 0 4px 12px rgb(0 0 0 / 35%), 0 12px 28px rgb(0 0 0 / 30%); --itx-shadow-lg: 0 8px 24px rgb(0 0 0 / 40%), 0 24px 56px rgb(0 0 0 / 35%); } @media (prefers-color-scheme: dark) { :root[data-mode='auto'] { color-scheme: dark; } :root[data-mode='auto'] { --itx-bg: #0B1220; --itx-surface: #131C2E; --itx-surface-2: #0F1727; --itx-surface-3: #1A2437; --itx-heading: #F1F5F9; --itx-text: #CBD5E1; --itx-text-muted: #94A3B8; --itx-border: #253148; --itx-border-2: #33425E; --itx-accent-text: var(--itx-accent-text-dk); --itx-chip-bg: var(--itx-accent-tint-dk); --itx-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%); --itx-shadow: 0 4px 12px rgb(0 0 0 / 35%), 0 12px 28px rgb(0 0 0 / 30%); --itx-shadow-lg: 0 8px 24px rgb(0 0 0 / 40%), 0 24px 56px rgb(0 0 0 / 35%); } } /* ========================================================================== 3. BOOTSTRAP BRIDGE -------------------------------------------------------------------------- Point Bootstrap's variables at the ITRIX tokens. Everything downstream — .btn-primary, .link-primary, .form-control focus rings, .accordion, .nav pills, borders, body colour — follows the active theme automatically. ========================================================================== */ :root { --bs-primary: var(--itx-accent); --bs-primary-rgb: var(--itx-glow); --bs-primary-text-emphasis: var(--itx-accent-text); --bs-body-bg: var(--itx-bg); --bs-body-bg-rgb: 255, 255, 255; --bs-body-color: var(--itx-text); --bs-emphasis-color: var(--itx-heading); --bs-secondary-color: var(--itx-text-muted); --bs-border-color: var(--itx-border); --bs-border-radius: var(--itx-radius); --bs-border-radius-sm: var(--itx-radius-sm); --bs-border-radius-lg: var(--itx-radius-lg); --bs-link-color: var(--itx-accent-text); --bs-link-color-rgb: var(--itx-glow); --bs-link-hover-color: var(--itx-accent-hover); --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --bs-body-font-size: 1rem; --bs-body-line-height: 1.65; --bs-heading-color: var(--itx-heading); --bs-emphasis-color-rgb: 11, 18, 32; } :root[data-mode='dark'] { --bs-body-bg-rgb: 11, 18, 32; } @media (prefers-color-scheme: dark) { :root[data-mode='auto'] { --bs-body-bg-rgb: 11, 18, 32; } }