/* ============================================================ Cyber Armor Systems – Brand CSS assets.cyberarmorsystems.com/css/cas-brand.css ------------------------------------------------------------ Contrast ratios in the comments below are MEASURED and are enforced by scripts/check-contrast.js in CI. If you change a colour, run `npm run check:contrast` — the numbers here are assertions, not decoration. ============================================================ */ :root { /* Primary palette */ --cas-navy: #002f54; --cas-gold: #f59b00; --cas-mid-blue: #324a6e; --cas-teal: #0c7b93; /* Derived / utility */ --cas-navy-dark: #001e36; --cas-navy-light: #1a4a70; --cas-gold-light: #fdb94b; --cas-gold-dark: #c07800; --cas-white: #ffffff; --cas-off-white: #f5f8fc; --cas-text-muted: #aec6e8; /* Semantic tokens */ --cas-color-primary: var(--cas-navy); --cas-color-accent: var(--cas-gold); --cas-color-secondary: var(--cas-mid-blue); --cas-color-info: var(--cas-teal); /* Typography --cas-font-body requires cas-fonts.css to be linked BEFORE this file: Without it Inter never loads and the stack falls through to system-ui. */ --cas-font-heading: 'Arial Black', Arial, sans-serif; --cas-font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; --cas-font-mono: 'Courier New', Courier, monospace; /* Type scale */ --cas-text-display: 64px; --cas-text-h1: 48px; --cas-text-h2: 36px; --cas-text-h3: 28px; --cas-text-h4: 22px; --cas-text-h5: 18px; --cas-text-lead: 20px; --cas-text-body-lg: 18px; /* preferred body default */ --cas-text-body: 16px; /* body minimum */ --cas-text-caption: 14px; /* Inter at 14px: weight 500+ only */ --cas-text-label: 12px; /* heading font only — never Inter */ /* Line height / measure */ --cas-lh-tight: 1.1; --cas-lh-heading: 1.3; --cas-lh-body: 1.75; /* never below 1.6 */ --cas-measure: 65ch; /* Spacing scale — 8px grid, named by value. Never use arbitrary px. */ --cas-space-4: 4px; --cas-space-8: 8px; --cas-space-12: 12px; --cas-space-16: 16px; --cas-space-24: 24px; --cas-space-32: 32px; --cas-space-48: 48px; --cas-space-64: 64px; --cas-space-96: 96px; /* Deprecated spacing aliases — retained so existing consumers keep working. Prefer the value-named tokens above. */ --cas-space-xs: var(--cas-space-4); --cas-space-sm: var(--cas-space-8); --cas-space-md: var(--cas-space-16); --cas-space-lg: var(--cas-space-32); --cas-space-xl: var(--cas-space-64); /* Border radius */ --cas-radius-sm: 4px; --cas-radius-md: 8px; --cas-radius-lg: 16px; /* Shadows */ --cas-shadow-sm: 0 1px 3px rgba(0,47,84,0.2); --cas-shadow-md: 0 4px 16px rgba(0,47,84,0.25); --cas-shadow-lg: 0 8px 32px rgba(0,47,84,0.35); } /* ── Light-mode theme tokens (default) ──────────────────────── */ /* Scheme B "Navy Authority": the page is off-white and CARDS ARE */ /* WHITE, so surfaces lift toward the reader. Gold is spent only */ /* on the CTA fill and the focus ring — never on body text. */ /* Ratios are measured against --cas-theme-bg (off-white). */ :root, [data-theme="light"] { --cas-theme-bg: var(--cas-off-white); /* #f5f8fc — page */ --cas-theme-surface: var(--cas-white); /* #ffffff — raised card */ --cas-theme-text: var(--cas-navy); /* #002f54 — 12.85:1 AAA */ --cas-theme-text-body: var(--cas-mid-blue); /* #324a6e — 8.42:1 AAA */ --cas-theme-text-muted: rgba(0, 47, 84, 0.66); /* -> #53738d — 4.67:1 AA */ --cas-theme-accent: var(--cas-gold); /* #f59b00 — CTA FILL only, never a ring */ --cas-theme-accent-alt: var(--cas-gold-dark); /* #c07800 — 3.54:1 on white: large text only */ /* Focus ring is gold-DARK here, not gold: outline-offset puts page/card colour on both sides of the ring, and gold is only 2.06:1 on the page — below the 3:1 floor for focus indicators. Gold-dark clears page (3.33) and card (3.54). */ --cas-theme-focus: var(--cas-gold-dark); /* The white-on-off-white surface step is only 1.07:1, so the border — not the fill — is what makes a card read as raised. Do not thin it. */ --cas-theme-border: rgba(0, 47, 84, 0.22); /* -> #c7d1d9 — 1.55:1 vs card */ } /* ── Dark-mode theme tokens ─────────────────────────────────── */ /* Scheme B "Navy Authority": the page drops one tier to navy-dark, */ /* which frees navy for cards and buys real headroom — headings go */ /* WHITE rather than gold-light, so gold reads as an event, not a */ /* texture. Ratios measured against --cas-theme-bg (navy-dark). */ [data-theme="dark"] { --cas-theme-bg: var(--cas-navy-dark); /* #001e36 — page */ --cas-theme-surface: var(--cas-navy); /* #002f54 — raised card */ --cas-theme-text: var(--cas-white); /* #ffffff — 16.95:1 AAA */ --cas-theme-text-body: var(--cas-text-muted); /* #aec6e8 — 9.72:1 AAA */ --cas-theme-text-muted: rgba(174, 198, 232, 0.72); /* -> #7d9cbf — 5.63:1 AA */ --cas-theme-accent: var(--cas-gold-light); /* #fdb94b — 9.86:1 AAA */ --cas-theme-accent-alt: var(--cas-gold); /* #f59b00 — 7.72:1 AAA */ /* Dark has room to spare: gold-light rings clear page (9.86) and card (7.96). */ --cas-theme-focus: var(--cas-gold-light); /* navy-on-navy-dark is a 1.24:1 step — the border carries the card. */ --cas-theme-border: rgba(174, 198, 232, 0.22); /* -> #265075 — 1.62:1 vs card */ } /* Mirror of [data-theme="dark"] for users with no explicit choice. ANY change above must be repeated here or system-dark users silently diverge from explicit-dark users. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cas-theme-bg: var(--cas-navy-dark); --cas-theme-surface: var(--cas-navy); --cas-theme-text: var(--cas-white); --cas-theme-text-body: var(--cas-text-muted); --cas-theme-text-muted: rgba(174, 198, 232, 0.72); --cas-theme-accent: var(--cas-gold-light); --cas-theme-accent-alt: var(--cas-gold); --cas-theme-focus: var(--cas-gold-light); --cas-theme-border: rgba(174, 198, 232, 0.22); } } /* Utility classes */ .cas-bg-navy { background-color: var(--cas-navy); } .cas-bg-gold { background-color: var(--cas-gold); } .cas-bg-mid-blue { background-color: var(--cas-mid-blue); } .cas-bg-teal { background-color: var(--cas-teal); } .cas-text-navy { color: var(--cas-navy); } .cas-text-gold { color: var(--cas-gold); } .cas-text-white { color: var(--cas-white); } .cas-text-muted { color: var(--cas-text-muted); } .cas-btn { display: inline-flex; align-items: center; gap: var(--cas-space-8); padding: var(--cas-space-8) var(--cas-space-32); font-family: var(--cas-font-heading); font-weight: 900; font-size: var(--cas-text-caption); letter-spacing: 1px; text-transform: uppercase; border-radius: var(--cas-radius-sm); border: 2px solid transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .cas-btn:hover { transform: translateY(-1px); } .cas-btn:active { transform: translateY(0); } /* The 2px offset means the ring is surrounded by page/card colour, never by the button — so it must out-contrast the GROUND, not the control. --cas-theme-focus (gold-dark light / gold-light dark) is the only gold that does. Alongside the CTA fill this is the only place gold appears. */ .cas-btn:focus-visible { outline: 3px solid var(--cas-theme-focus); outline-offset: 2px; } /* HOVER LIGHTENS GOLD — IT NEVER DARKENS IT. The intuitive gold -> gold-dark measures 3.86:1 against navy text and fails AA; gold -> gold-light is 7.96:1 AAA. This is a measured constraint, not a stylistic preference. */ .cas-btn-primary { background: var(--cas-gold); color: var(--cas-navy); /* 6.24:1 AA */ } .cas-btn-primary:hover { background: var(--cas-gold-light); } /* 7.96:1 AAA */ /* Navy fill + white text in both themes. On the dark page the navy fill is only a 1.24:1 step, so the white label and the border carry identification; hover steps up to navy-light, making the shape MORE prominent in both. */ .cas-btn-secondary { background: var(--cas-navy); color: var(--cas-white); /* 13.68:1 AAA */ border-color: var(--cas-theme-border); } .cas-btn-secondary:hover { background: var(--cas-navy-light); } /* white 9.30:1 AAA */ /* Theme-aware: a navy outline is invisible on a navy-dark page. */ .cas-btn-outline { background: transparent; color: var(--cas-theme-text); /* navy 12.85:1 / white 16.95:1 — both AAA */ border-color: var(--cas-theme-text); } .cas-btn-outline:hover { background: var(--cas-theme-surface); } /* Gold outline is for NAVY/DARK surfaces only: gold on white is 2.19:1 and fails WCAG at any size. On light surfaces use .cas-btn-outline instead. */ .cas-btn-outline-gold { background: transparent; color: var(--cas-gold); /* 7.72:1 AAA on navy-dark */ border-color: var(--cas-gold); } .cas-btn-outline-gold:hover { background: rgba(245, 155, 0, 0.12); } /* Theme-aware: mid-blue is unreadable on a navy-dark page. */ .cas-btn-ghost { background: transparent; color: var(--cas-theme-text-body); /* mid-blue 8.42:1 / #aec6e8 9.72:1 — both AAA */ text-decoration: underline; text-underline-offset: 3px; } .cas-btn-ghost:hover { color: var(--cas-theme-text); } .cas-badge { display: inline-block; padding: var(--cas-space-4) var(--cas-space-8); font-family: var(--cas-font-heading); font-size: var(--cas-text-label); font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; border-radius: var(--cas-radius-sm); } .cas-badge-gold { background: #fff3cd; color: #7a5500; } /* 6.06:1 AA */ .cas-badge-navy { background: var(--cas-navy); color: var(--cas-gold-light); } /* 7.96:1 AAA */ .cas-badge-green { background: #d4edda; color: #1a5c2a; } /* 6.49:1 AA */ .cas-badge-red { background: #fde8e8; color: #8b1a1a; } /* 7.91:1 AAA */ .cas-badge-blue { background: #e2eaf8; color: var(--cas-navy); } /* 11.31:1 AAA */ /* Undocumented in brand_style — retained for existing consumers. */ .cas-badge-teal { background: var(--cas-teal); color: var(--cas-white); } /* 4.92:1 AA */ /* Theme-aware utility classes */ .cas-theme-bg { background-color: var(--cas-theme-bg); } .cas-theme-surface { background-color: var(--cas-theme-surface); } .cas-theme-text { color: var(--cas-theme-text); } .cas-theme-text-body { color: var(--cas-theme-text-body); } .cas-theme-text-muted { color: var(--cas-theme-text-muted); } .cas-theme-accent { color: var(--cas-theme-accent); } .cas-theme-border { border-color: var(--cas-theme-border); }