/* ───────────────────────────────────────────────────────────────────────── IR Advantage — shared site chrome (Stage 2B, Sep 2026) Loaded on every page, after /assets/brand/tokens.css (the synced design system v2 variables) and before the page's own stylesheet. It owns: base accessibility, the nav and the footer. Nothing else — each page keeps its own layout CSS. Colours are tokens only (see docs: no hand-written hex in new CSS). ───────────────────────────────────────────────────────────────────────── */ /* ── Base accessibility (was assets/css/a11y.css, Stage 2A) ─────────────── */ /* Keyboard focus: a two-tone ring that stays visible on light surfaces and on navy/charcoal alike. --focus-ring flips to gold inside .on-dark and .on-footer (design system v2), so the companion ring flips the other way. Mouse clicks don't show it. */ :root { --focus-ring-2: var(--gold); } .on-dark, .on-footer { --focus-ring-2: var(--navy); } :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-width) var(--focus-ring-2); } /* Skip link: first element in , visible only when focused. */ .skip-link { position: absolute; left: var(--space-4); top: -200px; z-index: 10000; background: var(--gold); color: var(--navy); font: var(--fw-bold) var(--fs-body-sm)/1 var(--font-body); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xs); text-decoration: none; } .skip-link:focus { top: var(--space-4); } /* Reduced motion: animations finish instantly (so entrance fades end visible), scroll-reveals show immediately. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1 !important; transform: none !important; } } /* ── Nav ────────────────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--bg-inverse); transition: all var(--dur-base) var(--ease-standard); border-bottom: 1px solid rgba(254, 182, 0, 0); } .nav.scrolled { background: var(--bg-inverse); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(254, 182, 0, 0.3); } .nav-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; height: 88px; transition: height var(--dur-base) var(--ease-standard); } .nav.scrolled .nav-inner { height: 64px; } .nav-logo-img { height: 36px; width: auto; } .nav.scrolled .nav-logo-img { height: 30px; } .nav-links { display: flex; align-items: center; gap: var(--space-8); list-style: none; } .nav-links a { font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--fg-on-dark-2); transition: color var(--dur-fast); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px; background: var(--gold); transition: width 0.25s; } .nav-links a:hover { color: var(--fg-on-dark); } .nav-links a:hover::after { width: 100%; } .nav-links a.active, .nav-links a[aria-current="page"] { color: var(--fg-on-dark); } .nav-links a.active::after, .nav-links a[aria-current="page"]::after { width: 100%; } .nav-cta { color: var(--navy) !important; background: var(--gold); padding: 10px 24px; border-radius: var(--radius-xs); transition: all 0.25s !important; font-weight: var(--fw-bold) !important; } .nav-cta:hover { background: var(--white) !important; } .nav-cta::after { display: none !important; } .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: var(--space-2); background: none; border: none; position: relative; width: 40px; height: 36px; justify-content: center; align-items: center; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--fg-on-dark); transition: transform var(--dur-base) var(--ease-standard), opacity 0.25s ease; transform-origin: center; } .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Dropdown (ready for the competency-suite release: one
  • with a nested