/* ============================================================ ACI DESIGN SYSTEM — SITE CHROME (header + footer) Self-contained: this file needs no other stylesheet. It declares its own tokens, resets and component styles, all scoped under .aci-design-system-header / .aci-design-system-footer, so it can drop into a WordPress theme without colliding with, or leaking into, existing styles. Pairs with js/aci-design-system-global.js. Host page must do exactly two things: 1. put .aci-design-system-header-offset on whatever follows the header (the header is position: fixed) 2. load Poppins + Font Awesome 6 (see homepage.html's ) Every value below is duplicated from css/aci-design-system.css on purpose — the two are independent by design, so a change to the design system does not silently restyle the chrome. ============================================================ */ /* ---------- Tokens ---------- */ /* Declared on both roots rather than :root, so a host theme's variables can neither override these nor be overridden by them. Every custom property used anywhere in this file is declared here. */ .aci-design-system-header, .aci-design-system-footer { --color-primary: #0a91b4; --color-primary-dark: #008cb1; --color-text: #1e1e1e; --color-black: #000000; --color-border: #c8cdd8; --color-bg: #ffffff; --color-tint: rgba(81, 247, 247, 0.05); --font-heading: 'Poppins', sans-serif; --font-body: 'Poppins', sans-serif; --container-max: 72rem; --page-padding: clamp(1.25rem, 5vw, 9rem); --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 3rem; --space-xl: 6rem; font-family: var(--font-body); color: var(--color-text); } @media (max-width: 900px) { .aci-design-system-header, .aci-design-system-footer { --page-padding: 1.5rem; --space-lg: 2rem; --space-xl: 2rem; } } /* ---------- Reset (scoped) ---------- */ .aci-design-system-header, .aci-design-system-footer, .aci-design-system-header *, .aci-design-system-footer *, .aci-design-system-header *::before, .aci-design-system-footer *::before, .aci-design-system-header *::after, .aci-design-system-footer *::after { box-sizing: border-box; } .page-template-aci-design-system .entry-content{ margin-top: 0 !important; } /* Element resets are wrapped in :where() so they add no specificity of their own. Without it each rule scores one class + one element, which beats a single-class component rule — `button { font: inherit }` would override the nav triggers' type, `a { color: inherit }` the buttons' color, `ul { padding: 0 }` the dropdown panels' padding, and `h2 { margin: 0 }` the footer heading's. At :where() they score one class, which still beats a host theme's bare `button`/`a`/`ul` rules but loses to every component rule below. */ .aci-design-system-header :where(img), .aci-design-system-footer :where(img) { max-width: 100%; display: block; } .aci-design-system-header :where(button), .aci-design-system-footer :where(button) { font: inherit; border: none; background: none; cursor: pointer; } .aci-design-system-header :where(a), .aci-design-system-footer :where(a) { text-decoration: none; color: inherit; } .aci-design-system-header :where(a[href^="tel:"]), .aci-design-system-footer :where(a[href^="tel:"]) { white-space: nowrap; } .aci-design-system-header :where(ul, ol), .aci-design-system-footer :where(ul, ol) { margin: 0; padding: 0; list-style: none; } .aci-design-system-header :where(p, h1, h2, h3, h4), .aci-design-system-footer :where(p, h1, h2, h3, h4) { margin: 0; } /* ---------- Screen-reader-only text ---------- */ /* Deliberately NOT scoped to a wrapper: this has to work wherever it lands, including markup a host theme renders outside the design system's container. The !important flags are the exception that proves the rule — a theme's own h1/legend/span styles (padding, border, margin, position) would otherwise paint a visible box around a 1x1 element, which is how this leaks on screen. clip is kept alongside clip-path for older browsers; clip only applies while the element is absolutely positioned, so position is pinned too. */ .aci-design-system-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } /* ---------- Centered content column ---------- */ /* The header's own inner row carries these too — see its rule below. */ .aci-design-system-footer__container { max-width: calc(var(--container-max) + 2 * var(--page-padding)); margin: 0 auto; padding-left: var(--page-padding); padding-right: var(--page-padding); } /* ---------- Buttons ---------- */ /* One class replacing .btn + .btn-outline-teal: the gradient border is a masked ::before so it can sit on a transparent background. */ .aci-design-system-header__btn, .aci-design-system-footer__btn { position: relative; display: inline-flex; align-items: center; gap: 0; padding: 0.75rem 1.5rem; border-radius: 3rem; background: transparent; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; letter-spacing: -0.01875rem; color: var(--color-primary); white-space: nowrap; transition: border-color 0.2s ease; } .aci-design-system-header__btn::before, .aci-design-system-footer__btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0.125rem; background: linear-gradient(90deg, #44c7f5 0%, #908cbb 50%, #e492a8 75%, #ffd99a 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; } .aci-design-system-header__btn:hover, .aci-design-system-footer__btn:hover { opacity: 0.85; } /* Arrow collapsed at rest, expanding on hover. */ .aci-design-system-header__btn i, .aci-design-system-footer__btn i { display: inline-block; width: 0; margin-left: 0; opacity: 0; overflow: hidden; transform: translateX(-0.25rem); transition: width 0.25s ease, margin-left 0.25s ease, opacity 0.2s ease, transform 0.25s ease; } .aci-design-system-header__btn:hover i, .aci-design-system-footer__btn:hover i { width: 1em; margin-left: 0.5rem; opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .aci-design-system-header, .aci-design-system-header__btn, .aci-design-system-header__btn i, .aci-design-system-footer__btn, .aci-design-system-footer__btn i { transition: none; } } /* ---------- Footer typography + layout primitives ---------- */ .aci-design-system-footer__eyebrow { display: block; margin-bottom: var(--space-sm); font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1rem; text-transform: uppercase; background: linear-gradient(270deg, #008daf 0.01%, rgba(0, 198, 209, 0.9) 50%, #008daf 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .aci-design-system-footer__heading { margin-bottom: var(--space-sm); font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; letter-spacing: -0.025rem; color: var(--color-text); text-transform: none; } .aci-design-system-footer__body { display: block; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.9; letter-spacing: -0.0175rem; color: var(--color-text); } .aci-design-system-footer__body a { text-decoration: underline; } .aci-design-system-footer__body + .aci-design-system-footer__actions { margin-top: var(--space-md); } .aci-design-system-footer__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); } /* Image + copy split; collapses to one column on mobile. */ .aci-design-system-footer__split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } @media (max-width: 900px) { .aci-design-system-footer__split { grid-template-columns: 1fr; } .aci-design-system-footer__actions { flex-direction: column; } .aci-design-system-footer__actions .aci-design-system-footer__btn { width: 100%; justify-content: center; } } /* ---------- Start Your Own Brain Health Journey ---------- */ /* Large decorative corner (white fill, single accent border, big radius) — same technique already used for #faq's top-left corner and the locations sidebar's bottom-right corner, but as a ::before rather than applied directly to the section: the design's shape stops short of the true viewport edge (98% width), so the section itself stays plain and this pseudo-element carries the fill/border/radius, sized independently. */ .aci-design-system-footer { position: relative; z-index: 0; /* establishes a stacking context so ::before's z-index:-1 stays scoped to this section instead of sinking behind every other normal-flow section on the page */ background: #f2f9fa; /* Carried here when this became a