/* ========================================================================== Apex — design tokens, reset, typography, layout primitives, buttons. ========================================================================== */ :root { /* Brand (sampled from client_logo/logo.jpeg) */ --color-navy: #01204F; --color-navy-dark: #011536; --color-navy-light: #0B2F63; --color-red: #D23120; --color-red-dark: #AC271A; --color-white: #FCFCFD; /* Neutrals */ --color-text: #1A1F2B; --color-text-muted: #5B6472; --color-bg: #F6F7F9; --color-bg-alt: #FFFFFF; --color-border: #E4E7EC; --color-success: #1B8A4A; --color-warning: #C77700; /* Type */ --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Spacing (8px grid) */ --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 was used by four rules (FAQ group spacing, FAQ CTA padding, PDP column gap, PDP below-fold padding) before it was ever defined. An undefined custom property makes the WHOLE declaration invalid at computed-value time, so those rules silently resolved to 0 — which is why the FAQ's blue CTA box looked like it had no padding at all. */ --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Radius / shadow */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(1, 32, 79, .06), 0 4px 12px rgba(1, 32, 79, .06); --shadow-card-hover: 0 2px 4px rgba(1, 32, 79, .08), 0 12px 24px rgba(1, 32, 79, .12); /* Layout */ --container-max: 1320px; --header-height: 0px; /* set dynamically by JS for sticky offset use */ } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The full-bleed sections (.apex-hero, .apex-full-bleed) break out of Storefront's .col-full with `width:100vw`. `100vw` INCLUDES the vertical scrollbar while the page content box does not, so on every page that scrolls those sections end up ~15px wider than the available width — which produced a stray horizontal scrollbar (shifting the page up) and left the footer bars, which are only 100% wide, short of the right edge. `clip` removes that overflow without creating a scroll container, so the sticky header keeps sticking (plain `overflow-x:hidden` would force overflow-y to `auto` and break it). */ overflow-x: clip; } body { font-family: var(--font-base); color: var(--color-text); background: var(--color-bg); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Storefront ships `body { overflow-x: hidden }`. The CSS spec says a `hidden` value on one axis coerces the OTHER axis from `visible` to `auto` — so that one declaration silently turned into its own scroll container, alongside the one on . The page still scrolled, but the scrollbar belonged to an inner box rather than the viewport, so on some pages no scrollbar track was drawn at all. `clip` does not trigger that coercion, so this keeps the horizontal clipping Storefront wanted while leaving scrolling to the viewport — the same reason uses `clip` rather than `hidden` above. */ overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-navy); text-decoration: none; } a:hover { color: var(--color-red); } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.25; color: var(--color-navy); margin: 0 0 var(--space-4); } h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); } h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2.125rem); } h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem); font-weight: 600; } p { margin: 0 0 var(--space-4); } ul, ol { margin: 0; padding: 0; list-style: none; } button, input, select, textarea { font-family: inherit; font-size: 1rem; } button { cursor: pointer; } /* Focus rings. * * Storefront's Customizer prints inline CSS setting * `button:focus, input:focus, … { outline-color: #7f54b3 }` — WooCommerce * purple. Combined with the browser's default focus outline that produced a * purple ring around anything CLICKED with a mouse, all over the site and * completely off-brand. * * The fix is not to remove focus rings — keyboard users need them. It is to * show them only for keyboard focus: `:focus:not(:focus-visible)` is * specificity 0,2,0, which beats Storefront's 0,1,1, so mouse clicks get no * ring while Tab still does. */ :focus:not(:focus-visible) { outline: none; box-shadow: none; } :focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; outline-color: var(--color-red); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Layout primitives */ .apex-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 768px) { .apex-container { padding-inline: var(--space-8); } } /* Release Storefront's ~1064px `.col-full` cap on the pages that render through our own templates (see apex_wide_content_body_class()). Those templates centre their own content with .apex-container, so without this the content column sat noticeably narrower than the header and footer, which both already override .col-full. Scoped to the body class so the WooCommerce pages, which set their own .col-full width, are untouched. */ body.apex-wide-content #content > .col-full { max-width: none; width: 100%; margin-inline: 0; padding-inline: 0; } .apex-section { padding-block: var(--space-12); } .apex-section--tight { padding-block: var(--space-8); } /* Buttons */ .apex-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.85em 1.6em; font-weight: 600; font-size: 0.95rem; border-radius: var(--radius-sm); border: 2px solid transparent; min-height: 44px; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; white-space: nowrap; } .apex-btn:active { transform: translateY(1px); } .apex-btn--primary { background: var(--color-red); color: var(--color-white); } .apex-btn--primary:hover { background: var(--color-red-dark); color: var(--color-white); } .apex-btn--secondary { background: var(--color-navy); color: var(--color-white); } .apex-btn--secondary:hover { background: var(--color-navy-dark); color: var(--color-white); } .apex-btn--outline { background: transparent; border-color: var(--color-navy); color: var(--color-navy); } .apex-btn--outline:hover { background: var(--color-navy); color: var(--color-white); } /* Outline variant for use ON a navy/dark surface, where --outline's navy border and navy text would be invisible. */ .apex-btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .45); color: var(--color-white); } .apex-btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: var(--color-white); color: var(--color-white); } .apex-btn--block { width: 100%; } .apex-btn--sm { padding: 0.55em 1.1em; min-height: 36px; font-size: 0.85rem; } /* Badges */ .apex-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-red); color: var(--color-white); font-size: 0.7rem; font-weight: 700; line-height: 1; } /* Icons */ .apex-icon svg { width: 1.25em; height: 1.25em; display: block; } /* Skip link (Storefront provides one; keep it visually consistent) */ .skip-link { background: var(--color-navy) !important; color: var(--color-white) !important; }