/* ========================================================================== Xpresion design tokens -------------------------------------------------------------------------- Block 1 is the APPROVED Xpresion Brand Theme (supplied 12 Oct 2026), copied exactly. Nothing else in the codebase may contain a raw colour: components read the semantic tokens in blocks 2–3. Block 2 holds a few shades DERIVED from brand tokens (mixes of two brand tokens, or a brand token with black/white) only where a brand token used as-is would fail WCAG 2.2 AA for text. Each says what it is for. ========================================================================== */ :root { /* ---- 1. Brand Theme (approved, exact) -------------------------------- */ --xp-navy: #25476A; --xp-navy-deep: #1F3B57; --xp-navy-darkest: #14273C; --xp-primary: #556EE6; --xp-primary-hover: #485EC4; --xp-accent: #6F86FF; --xp-bg: #F8F8FB; --xp-surface: #FFFFFF; --xp-text: #74788D; --xp-text-strong: #495057; --xp-text-dark: #212529; --xp-grey-light: #EFF2F7; --xp-border: #CED4DA; --xp-success: #34C38F; --xp-warning: #F1B44C; --xp-danger: #F46A6A; --xp-info: #50A5F1; --xp-on-dark: #FFFFFF; --xp-on-dark-muted: rgba(255, 255, 255, 0.62); --xp-on-dark-border: rgba(255, 255, 255, 0.16); --xp-hero-gradient: radial-gradient(120% 80% at 100% 0%, rgba(111, 134, 255, 0.22), transparent 55%), linear-gradient(160deg, #25476A, #1F3B57); --xp-cta-gradient: linear-gradient(90deg, #556EE6, #6F86FF); --xp-card-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03); --xp-glass-bg: rgba(255, 255, 255, 0.05); --xp-glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); --xp-radius-card: 16px; --xp-radius-cta: 10px; /* ---- 2. Derived for accessible contrast -------------------------------- */ /* --xp-text (#74788D) is 4.36:1 on white, under the 4.5:1 AA minimum for body-size text. Muted text uses this 80/20 mix of --xp-text and --xp-text-dark instead (5.6:1 on white, 5.0:1 on --xp-grey-light). --xp-text itself is kept for large text, placeholders and disabled UI. */ --xp-text-muted-aa: #636779; /* Status colours as text: the brand status tokens are 1.9–2.9:1 on white, so text uses each mixed with black; backgrounds use each at 12% on white. */ --xp-danger-text: #924040; --xp-danger-bg: #FEEDED; --xp-success-text: #1F7556; --xp-success-bg: #E7F8F2; --xp-warning-text: #785A26; --xp-warning-bg: #FDF6EA; --xp-info-text: #306391; --xp-info-bg: #EAF4FD; /* --xp-accent on navy is 2.98:1; small accent text on dark uses this 50% tint (5.6:1). */ --xp-accent-on-dark: #B7C2FF; /* Light primary tint for icon badges, chips and selection (primary at 8% / 12% on white). */ --xp-primary-tint: #F1F3FD; --xp-primary-tint-strong: #EBEEFC; --xp-primary-ring: rgba(85, 110, 230, 0.25); /* Deeper end of the hover scale for pressed primary buttons. */ --xp-primary-active: #3D52B8; /* ---- 1b. Website brief, 3 Nov 2026 (neutrals and accent, exact) ------- The brief leaves --primary as "[Xpresion logo color]" for BusiSoft to confirm, so the approved Brand Theme primary (block 1) stays in place. */ --xb-ink: #0F172A; /* headings and body */ --xb-muted: #64748B; /* secondary text: 4.8:1 on white, 4.6:1 on surface-alt */ --xb-surface-alt: #F6F8FC; /* alternate sections */ --xb-border: #E2E8F0; /* cards, tables */ --xb-success: #16A34A; /* checkmarks (icons only: 3.3:1) */ --xb-accent: #FF8A3D; /* "Most Popular" badge, small highlights only (ink text on it: 7.6:1) */ /* ---- 3. Semantic colour (components read only these) ----------------- */ --color-bg: var(--xp-surface); --color-bg-subtle: var(--xb-surface-alt); --color-bg-tint: var(--xp-primary-tint); --color-bg-inverse: var(--xp-navy-deep); --color-surface: var(--xp-surface); --color-surface-raised: var(--xp-surface); --color-text: var(--xb-ink); --color-text-strong: var(--xb-ink); --color-text-muted: var(--xb-muted); --color-text-subtle: var(--xb-muted); --color-text-disabled: var(--xp-text); --color-placeholder: var(--xp-text); --color-heading: var(--xb-ink); --color-text-inverse: var(--xp-on-dark); --color-text-inverse-muted: var(--xp-on-dark-muted); --color-text-inverse-accent: var(--xp-accent-on-dark); --color-primary: var(--xp-primary-hover); /* text, icons and outlines on light backgrounds (5.7:1) */ --color-primary-fill: var(--xp-primary); --color-primary-hover: var(--xp-primary-hover); --color-primary-active: var(--xp-primary-active); --color-on-primary: var(--xp-surface); --color-accent: var(--xp-accent); --color-link: var(--xp-primary-hover); --color-link-hover: var(--xp-primary-active); --color-cta-bg: var(--xp-cta-gradient); --color-cta-bg-hover: var(--xp-primary-hover); --color-cta-fg: var(--xp-surface); --color-border: var(--xb-border); --color-border-strong: var(--xp-border); --color-border-inverse: var(--xp-on-dark-border); --color-focus: var(--xp-primary-hover); --color-focus-inverse: var(--xp-on-dark); --color-success: var(--xp-success-text); --color-success-bg: var(--xp-success-bg); --color-success-border: var(--xp-success); --color-warning: var(--xp-warning-text); --color-warning-bg: var(--xp-warning-bg); --color-warning-border: var(--xp-warning); --color-danger: var(--xp-danger-text); --color-danger-bg: var(--xp-danger-bg); --color-danger-border: var(--xp-danger); --color-info: var(--xp-info-text); --color-info-bg: var(--xp-info-bg); --hero-bg: var(--xp-hero-gradient); --glass-bg: var(--xp-glass-bg); --glass-border: 1px solid var(--xp-on-dark-border); --glass-shadow: var(--xp-glass-shadow); --frame-bar: var(--xp-grey-light); --frame-dot: var(--xp-border); --device-bezel: var(--xp-text-dark); --glass-bg-hover: rgba(255, 255, 255, 0.1); /* glass at 10%: hover on dark */ --header-bg: rgba(255, 255, 255, 0.92); /* --xp-surface, translucent under blur */ --decor-line: rgba(255, 255, 255, 0.08); /* speed-line motif on navy */ --decor-line-accent: rgba(111, 134, 255, 0.55); /* --xp-accent at 55% */ --decor-grid: rgba(255, 255, 255, 0.035); --decor-glow: rgba(111, 134, 255, 0.22); /* same glow as the hero gradient */ --media-shadow-dark: var(--xp-glass-shadow); /* ---- Control Room (v2 design, opted in with body.cr) ------------------ Every value is a brand token, a brand token at reduced opacity, or a mix of two brand tokens; nothing new is added to the palette. */ --cr-ink: var(--xp-navy-darkest); --cr-ink-2: var(--xp-navy-deep); --cr-panel: rgba(255, 255, 255, 0.04); /* glass panel on navy */ --cr-panel-strong: rgba(255, 255, 255, 0.07); --cr-line: rgba(255, 255, 255, 0.10); /* hairlines on navy */ --cr-line-strong: rgba(255, 255, 255, 0.18); --cr-grid-dot: rgba(183, 194, 255, 0.16); /* --xp-accent-on-dark at 16% */ --cr-route: rgba(111, 134, 255, 0.38); /* --xp-accent at 38% */ --cr-route-active: var(--xp-accent); --cr-glow: rgba(111, 134, 255, 0.45); --cr-glow-soft: rgba(85, 110, 230, 0.16); /* --xp-primary at 16% */ --cr-success-glow: rgba(52, 195, 143, 0.35); /* --xp-success at 35% */ --cr-warn-glow: rgba(241, 180, 76, 0.35); /* --xp-warning at 35% */ --cr-hub: var(--xp-accent-on-dark); --cr-ok: var(--xp-success); /* status fills only, never text */ --cr-warn: var(--xp-warning); --cr-bad: var(--xp-danger); --cr-info: var(--xp-info); --cr-before-bg: #F3F3F6; /* 60% --xp-bg + 40% --xp-grey-light: muted "before" panel */ --cr-on-dark-soft: rgba(255, 255, 255, 0.78); /* secondary text on navy: 9.6:1 on --xp-navy-deep */ --cr-btn-sheen: 0 1px 0 rgba(255, 255, 255, 0.25) inset; /* top highlight on gradient buttons */ --cr-btn-shine: rgba(255, 255, 255, 0.22); /* hover light sweep on gradient buttons */ --cr-window-shadow: 0 40px 80px -24px rgba(8, 20, 34, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); --cr-card-shadow: 0 1px 2px rgba(18, 38, 63, 0.05), 0 10px 28px -12px rgba(18, 38, 63, 0.14); --cr-card-shadow-hover: 0 2px 4px rgba(18, 38, 63, 0.06), 0 28px 56px -20px rgba(18, 38, 63, 0.26); --cr-hero-bg: radial-gradient(55% 60% at 88% 18%, rgba(85, 110, 230, 0.32), transparent 70%), radial-gradient(45% 55% at 0% 100%, rgba(111, 134, 255, 0.14), transparent 70%), linear-gradient(180deg, var(--xp-navy-darkest) 0%, var(--xp-navy-deep) 100%); --cr-hero-light-bg: radial-gradient(42% 55% at 86% 18%, rgba(85, 110, 230, 0.22), transparent 70%), radial-gradient(36% 48% at 8% 92%, rgba(111, 134, 255, 0.16), transparent 70%), radial-gradient(30% 40% at 50% 0%, rgba(255, 138, 61, 0.08), transparent 70%), var(--xp-surface); --cr-page-hero-bg: linear-gradient(180deg, var(--xb-surface-alt) 0%, var(--xp-surface) 100%); --cr-section-dark: radial-gradient(50% 60% at 100% 0%, rgba(85, 110, 230, 0.22), transparent 70%), linear-gradient(180deg, var(--xp-navy-deep) 0%, var(--xp-navy-darkest) 100%); --cr-text-gradient: linear-gradient(95deg, var(--xp-on-dark) 10%, var(--xp-accent-on-dark) 90%); --cr-text-gradient-flow: linear-gradient(95deg, var(--xp-on-dark) 0%, var(--xp-accent-on-dark) 25%, var(--xp-on-dark) 50%, var(--xp-accent-on-dark) 100%); --cr-step-display: clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem); /* H1: 36px mobile, 56px desktop (brief) */ --cr-step-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem); /* H2: 28px mobile, 40px desktop (brief) */ --cr-step-h3: 1.5rem; /* H3: 24px (brief) */ /* CTA: primary-hover → primary-active, white text 5.7–6.7:1 (AA at any size) */ --cr-cta-bg: linear-gradient(135deg, var(--xp-primary-hover) 0%, var(--xp-primary-active) 100%); --cr-cta-bg-hover: var(--xp-primary-active); --cr-header-bg: rgba(255, 255, 255, 0.82); /* --xp-surface, translucent under blur */ --cr-shadow-ink: rgba(18, 38, 63, 0.18); /* brand card-shadow colour */ --cr-shadow-ink-soft: rgba(18, 38, 63, 0.05); --cr-glass-light: rgba(255, 255, 255, 0.72); /* light glass: ink text 15:1 over white */ --cr-glass-border: rgba(255, 255, 255, 0.9); --cr-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23485EC4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --cr-popular-col: rgba(85, 110, 230, 0.05); /* Standard column tint in the comparison table */ --cr-wa-bg: #075E54; /* WhatsApp dark teal: white text 7.6:1 */ --cr-grid-gap: var(--space-5); /* card grids and split headers share it */ /* ---- Typography ------------------------------------------------------- */ --font-sans: "Lato", Roboto, "Lato Fallback", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Headings on "Control Room" pages (body.cr). Body text stays Lato. */ --font-display: "Plus Jakarta Sans", "Lato", "Lato Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Brand weights 400/600/700. Lato has no 600 master, so browsers render 600 with the 700 file; buttons declare 700 so rendering and contrast checks agree (see --btn-font-size). */ --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; --weight-black: 700; /* legacy alias: headings are 700 under the brand theme */ /* Fluid scale, ~1.2 at 320px → ~1.25 at 1280px */ --step--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem); --step--1: clamp(0.84rem, 0.82rem + 0.10vw, 0.90rem); --step-0: 1.0625rem; /* body 17px (brief) */ --step-1: clamp(1.18rem, 1.12rem + 0.30vw, 1.38rem); --step-2: clamp(1.40rem, 1.29rem + 0.55vw, 1.72rem); --step-3: clamp(1.66rem, 1.47rem + 0.95vw, 2.20rem); --step-4: clamp(1.96rem, 1.66rem + 1.50vw, 2.85rem); --step-5: clamp(2.30rem, 1.84rem + 2.30vw, 3.60rem); --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; --tracking-tight: -0.015em; --tracking-wide: 0.08em; --measure: 68ch; /* ---- Spacing (4px base) ---------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --section-space: clamp(4rem, 3rem + 3.2vw, 6rem); /* 64px mobile, 96px desktop (brief) */ --gutter: clamp(1rem, 0.6rem + 2vw, 2rem); /* ---- Layout ----------------------------------------------------------- */ --container: 75rem; /* 1200px */ --container-narrow: 48rem; --header-height: 4.25rem; /* Buttons: 19px bold makes white-on-gradient "large text" under WCAG (the gradient's light end, #6F86FF, is 3.2:1 with white; large text needs 3:1). */ --btn-font-size: 1.1875rem; --btn-min-height: 46px; /* ---- Shape & depth ---------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: var(--xp-radius-card); --radius-xl: var(--xp-radius-card); --radius-pill: 999px; --shadow-sm: var(--xp-card-shadow); --shadow-card: var(--xp-card-shadow); /* Hover/raised and overlay depth use the brand card shadow colour (18,38,63) at higher strength */ --shadow-md: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.08); --shadow-lg: 0 1.25rem 2.5rem rgba(18, 38, 63, 0.12); /* ---- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 600ms; /* ---- Layers ----------------------------------------------------------- */ --z-header: 100; --z-menu: 110; --z-skip: 1000; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } } /* ---- Light hero scope --------------------------------------------------- The home and inner-page heroes are light (brief: minimalism, no dark-only themes). Components inside them were written for navy, so the hero redefines the "on dark" tokens they read instead of every component carrying a light variant. */ .cr-hero, .cr-page-hero { --color-text-inverse: var(--xb-ink); --color-text-inverse-muted: var(--xb-muted); --color-text-inverse-accent: var(--xp-primary-hover); --color-focus-inverse: var(--xp-primary-hover); --cr-on-dark-soft: var(--xb-muted); --cr-line: var(--xb-border); --cr-line-strong: var(--xp-border); --cr-panel: rgba(255, 255, 255, 0.72); /* light glass */ --cr-panel-strong: var(--xp-surface); --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-hover: var(--xp-primary-tint); --cr-grid-dot: rgba(15, 23, 42, 0.07); --cr-window-shadow: 0 30px 60px -24px rgba(18, 38, 63, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.06); --cr-text-gradient-flow: linear-gradient(95deg, var(--xp-primary-active) 0%, var(--xp-accent) 25%, var(--xp-primary-active) 50%, var(--xp-primary) 100%); } /* Dark panels inside a light hero keep their on-dark values */ .cr-hero .cr-map, .cr-page-hero .cr-fx-flow__node--core, .cr-page-hero .cr-quote__total, .cr-page-hero .cr-chain__node--top { --color-text-inverse: var(--xp-on-dark); --color-text-inverse-accent: var(--xp-accent-on-dark); --cr-on-dark-soft: rgba(255, 255, 255, 0.78); --cr-grid-dot: rgba(183, 194, 255, 0.16); --cr-line: rgba(255, 255, 255, 0.10); }