/* Aquamor Website Design System — site.css Version: 1.0 — Phase 1 Homepage Prototype Design principle: Precision-manufacturer web standard. Confident scale, generous whitespace, restrained color. Light theme only — single polished marketing site. Mobile-first. WCAG AA (≥4.5:1 contrast throughout). CONTRAST AUDIT (all pairs ≥4.5:1): - #1A1A1A on #FFFFFF = 16.0:1 OK - #1A1A1A on #F5F9FC = 14.7:1 OK - #1e3a5f on #FFFFFF = 10.3:1 OK - #1e3a5f on #E8F4F8 = 8.4:1 OK - #FFFFFF on #1e3a5f = 10.3:1 OK (filled buttons/badges — navy bg) - #FFFFFF on #1A1A1A = 16.0:1 OK (footer text on dark) - #333333 on #FFFFFF = 12.6:1 OK (body text) - #5A6B7A on #FFFFFF = 5.1:1 OK (header tagline — muted brand signature) - #4AADD4 on #FFFFFF = 2.55:1 NOT OK — NEVER used for body text - #4AADD4 is DECORATIVE ONLY: borders, underlines, icons, wave accents NOTE: White text on #4AADD4 fill = 2.55:1 — NEVER used. All filled interactive elements use #1e3a5f (navy). Review Round 2 (2026-06-10): header tagline added (#5A6B7A, 5.1:1); footer icon logo (.site-footer__icon); header heights updated for tagline clearance. */ /* ------------------------------------------------------------ 1. CSS CUSTOM PROPERTIES (Design Tokens) ------------------------------------------------------------ */ :root { /* Light-mode lock — this site is light-only. Prevents OS dark-mode auto-inversion in Chrome/Safari (file:// and production). Both properties required: the CSS property prevents auto-darkening of rendered colors; the meta tag (in every ) signals the browser before paint. See also: meta[name=color-scheme]. */ color-scheme: only light; /* Brand colors */ --blue: #4AADD4; /* decorative only — wave, borders, icons */ --navy: #1e3a5f; /* filled buttons, badge fills, headings */ --dark: #1A1A1A; /* primary text, logo text */ --light-blue: #E8F4F8; /* tint backgrounds, card backgrounds */ --white: #FFFFFF; /* Surface palette */ --surface-0: #FFFFFF; --surface-1: #F5F9FC; /* warm off-white — alternating sections */ --surface-2: #EBF4F9; /* deeper tint — trust bar, callouts */ --surface-dark: #1A1A1A; /* footer */ /* Text */ --text-primary: #1A1A1A; /* 16:1 on white */ --text-secondary: #3A4A5C; /* 8.1:1 on white — body supporting */ --text-muted: #5A6B7A; /* 5.1:1 on white — captions, meta */ --text-white: #FFFFFF; --text-on-navy: #FFFFFF; /* 10.3:1 on navy */ --text-on-dark: #F0F4F8; /* 13.2:1 on #1A1A1A */ /* Interactive */ --btn-primary-bg: #1e3a5f; --btn-primary-text: #FFFFFF; --btn-primary-hover: #162d4a; --btn-outline-border: #1e3a5f; --btn-outline-text: #1e3a5f; --btn-outline-hover-bg: #1e3a5f; --btn-outline-hover-text: #FFFFFF; /* Borders */ --border-light: #DDE8EF; --border-mid: #C5D8E4; /* Typography scale — premium B2B marketing */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Georgia', 'Times New Roman', serif; /* reserved for pull-quotes */ /* Type scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px — body minimum */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-hero: 3.75rem; /* 60px */ --text-display: 4.5rem; /* 72px */ /* Spacing scale */ --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; --space-32: 8rem; /* Layout */ --container-max: 1200px; --container-wide: 1440px; --container-narrow: 740px; --gutter: 1.5rem; /* Radii */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-xl: 20px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(30, 58, 95, 0.08); --shadow-md: 0 4px 16px rgba(30, 58, 95, 0.12); --shadow-lg: 0 12px 40px rgba(30, 58, 95, 0.16); --shadow-card: 0 2px 12px rgba(30, 58, 95, 0.10); /* Transitions */ --transition-fast: 150ms ease; --transition: 250ms ease; --transition-slow: 400ms ease; /* Header — 84px accommodates logo (36px) + tagline (12px) + padding */ --header-height: 84px; } /* ------------------------------------------------------------ 2. RESET & BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.7; color: var(--text-primary); background: var(--surface-0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } /* ------------------------------------------------------------ Skip to main content link (WCAG 2.4.1 Bypass Blocks) Off-screen until focused; navy-on-white, high contrast. ------------------------------------------------------------ */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 0.75rem 1.25rem; background: #ffffff; color: #1e3a5f; font-weight: 600; font-size: 1rem; border: 2px solid #1e3a5f; border-radius: 0 0 6px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.25); text-decoration: none; } .skip-link:focus { left: 0; outline: 3px solid #4AADD4; outline-offset: 2px; } a { color: var(--navy); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--blue); } ul, ol { list-style: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; } /* Keyboard focus ring — WCAG 2.4.7 Focus Visible. Navy outline (#1e3a5f = 10.3:1 on white) on keyboard nav only; :focus-visible keeps it off mouse clicks. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid #1e3a5f; outline-offset: 3px; border-radius: 2px; } /* ------------------------------------------------------------ 3. TYPOGRAPHY SYSTEM ------------------------------------------------------------ */ /* Display — hero headline */ .type-display { font-size: var(--text-display); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; color: var(--text-primary); } /* Hero H1 */ .type-hero { font-size: var(--text-hero); font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; color: var(--text-primary); } /* Section headline */ .type-h1 { font-size: var(--text-5xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-primary); } /* Card/subpage headline */ .type-h2 { font-size: var(--text-4xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--text-primary); } .type-h3 { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--text-primary); } .type-h4 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-primary); } .type-h5 { font-size: var(--text-xl); font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--text-primary); } /* Label / eyebrow — above headings */ .type-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); /* Navy (#1e3a5f) for AA contrast on light backgrounds. Brand-blue #4AADD4 on white is only 2.55:1 and must stay decorative (borders, icons, waves). */ } .type-label-navy { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); } /* Body large */ .type-lead { font-size: var(--text-xl); font-weight: 400; line-height: 1.65; color: var(--text-secondary); } /* Body */ .type-body { font-size: var(--text-base); font-weight: 400; line-height: 1.7; color: var(--text-secondary); } /* Caption */ .type-caption { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; } /* ------------------------------------------------------------ 4. LAYOUT UTILITIES ------------------------------------------------------------ */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); } /* Section spacing */ .section { padding-block: var(--space-24); } .section--sm { padding-block: var(--space-16); } .section--lg { padding-block: var(--space-32); } /* Alternating section backgrounds */ .section--white { background: var(--surface-0); } .section--tint { background: var(--surface-1); } .section--blue { background: var(--light-blue); } .section--dark { background: var(--surface-dark); } .section--navy { background: var(--navy); } /* Grid */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } /* Flex helpers */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } /* ------------------------------------------------------------ 5. NAVIGATION ------------------------------------------------------------ */ /* Toll-free topbar — added 2026-08-24 (task 86). Sits above the sticky .site-header in normal document flow (NOT sticky, NOT fixed): it scrolls away with the page rather than taking permanent height out of the tuned sticky-header layout, so --header-height and everything keyed off it (dropdown offset, scroll-margin-top, the mobile nav-toggle / btn-cta overflow fix below) are untouched. Navy fill matches the brand's one filled-element color (white text on #1e3a5f = 10.3:1, see contrast audit at the top of this file) — reads as a distinct utility strip, not a second footer. Text-only, no icon: avoids introducing an unverified SVG icon path for a single short line of copy. */ .topbar { background: var(--navy); } .topbar__inner { max-width: var(--container-max); margin-inline: auto; padding: 0.5rem var(--gutter); display: flex; align-items: center; justify-content: center; } .topbar__phone { color: var(--text-on-navy); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; } .topbar__phone:hover, .topbar__phone:focus-visible { color: var(--text-on-navy); text-decoration: underline; } .site-header { position: sticky; top: 0; z-index: 200; height: var(--header-height); background: var(--white); border-bottom: 1px solid var(--border-light); box-shadow: 0 1px 0 var(--border-light), 0 4px 24px rgba(30,58,95,0.06); display: flex; align-items: center; } .site-header__inner { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } /* Logo — flex-column so tagline sits directly below wordmark */ .site-logo { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex-shrink: 0; gap: 2px; text-decoration: none; /* Round-2 QC fix, 2026-09-01: pointer-events:none on .site-logo__tagline alone was NOT enough. This anchor is a column flexbox hugging its two children with no extra padding, so its own hit-box extends exactly as far down as the tagline row does -- at 360/390px with the mobile menu open, document.elementFromPoint() at the Solutions accordion trigger's centre still returned THIS anchor, not the trigger, because the parent box (not just the child span) covers that point. Disabling pointer events on the whole anchor and re-enabling them only on the image below makes every dead area in this box (the tagline row and any gap/padding) click-through, while the logo image stays the home link: a click event that hit-tests to a pointer-events:auto descendant still bubbles up through and triggers this 's own navigation. */ pointer-events: none; } .site-logo img { height: 36px; width: auto; display: block; pointer-events: auto; } /* Round-2 QC fix (continued), 2026-09-01, CORRECTED round-3 same day: the .site-logo pointer-events fix above stops the logo from blocking the mobile Solutions accordion trigger underneath, but elementFromPoint() at the trigger's centre still returned .site-header__inner, not the trigger -- the sticky header (z-index 200) sits geometrically above the fixed mobile-nav drawer (z-index 199) in the band where they overlap, and .site-header__inner itself, a plain flex container with no pointer-events override, still captures hit-testing across its own full box even where none of its visible children do. Disable pointer events on the container and re-enable them explicitly on its one remaining real control at this width, the hamburger toggle (.site-logo img already re-enabled above, unconditionally). The header's own "Request a Quote" CTA is already display:none at this width -- the mobile drawer carries its own full-width copy of it instead (.site-nav--mobile .btn-cta) -- so it needs no pointer-events override; a display:none element is never hit-testable regardless. Everything else in the header's dead space -- gaps, padding, the row .site-nav occupies at wider widths but is display:none here -- becomes click-through to the drawer content beneath it. CORRECTED to <=960px (round-3, 2026-09-01): the round-2 fix scoped this to <=640px on the assumption that a drawer "can only sit under the header" at that width. False -- .nav-toggle switches to display:flex, and .site-nav--mobile becomes the only nav surface, at the SAME <=960px breakpoint that hides .site-nav (see RESPONSIVE BREAKPOINTS, tablet query). QC reproduced the header capturing drawer taps at 768px, a width this rule did not yet cover. 960px is not an arbitrary widening -- it is the exact width where the hamburger/drawer pattern is live, so this rule now matches its own precondition instead of a narrower guess at it. Belt-and-suspenders alongside the JS fix in initMobileNav() (site.js), which now positions the drawer's top edge from the header's real getBoundingClientRect().bottom instead of the static --header-height token -- that JS fix removes the overlap outright at every width; this CSS rule stays as a safety net for the geometry it was originally written to cover. */ /* Round-2 QC FIX 4, 2026-09-01: scoped to .site-header__inner:has(.nav-toggle) instead of the bare .site-header__inner. The blanket selector above (now removed) killed every interactive element in the header on any page that reuses .site-header__inner but does NOT ship the mobile hamburger/drawer pattern -- feedback-board.html is exactly that case (a non-standard internal-tool header, 11 interactive elements, no .nav-toggle, no mobile drawer): its "Preview Hub" link went dead at <=960px with nothing able to re-enable it, because there is no .nav-toggle in that header for the second rule to target. :has(.nav-toggle) makes the whole pointer-events:none / pointer-events:auto pair conditional on the drawer pattern actually being present in this header instance, so a page without it keeps default pointer-events (auto) throughout and nothing regresses. Standard site pages (index.html, oem.html, etc.) all carry .nav-toggle in the header markup, so this is a no-op for them -- same behavior as before, just correctly scoped. */ @media (max-width: 960px) { .site-header__inner:has(.nav-toggle) { pointer-events: none; } .site-header__inner:has(.nav-toggle) .nav-toggle { pointer-events: auto; } } /* Brand tagline beneath wordmark — brand signature, not body copy. Color: #5A6B7A = 5.1:1 on #FFFFFF — passes WCAG AA (≥4.5:1). pointer-events: none (Mike-authorized, round-2 QC 2026-09-01): at 360px and 390px with the mobile menu open, this tagline overlapped the Solutions accordion trigger by 190x12px and absorbed the tap, so a real thumb tap on that strip did nothing. The tagline is decorative text with no interactive purpose at any width, so disabling pointer events on it lets clicks fall through to whatever sits beneath -- safe everywhere, not just mobile. */ .site-logo__tagline { font-size: 12px; line-height: 1; letter-spacing: 0.08em; font-weight: 400; color: #5A6B7A; white-space: nowrap; font-family: var(--font-sans); pointer-events: none; } /* Nav links */ .site-nav { display: flex; align-items: center; gap: 0; } .site-nav__list { display: flex; align-items: center; gap: var(--space-1); } .site-nav__item a { display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-sm); /* Transparent bottom border reserved at all times so toggling the active state (which colors it navy) never changes the element's box geometry. */ border-bottom: 2px solid transparent; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .site-nav__item a:hover { color: var(--navy); background: var(--surface-1); } /* Active nav item — WIDTH-STABLE. Font-weight stays 500 (same as non-active) so the rendered text width never changes when an item becomes active; that was the cause of the layout shift where neighbors got shoved as you moved between pages. The active item is indicated by navy color + a navy underline (the always-present transparent border turns navy). Geometry is identical in both states. */ .site-nav__item--active a { color: var(--navy); font-weight: 500; border-bottom-color: var(--navy); } /* ------------------------------------------------------------ SOLUTIONS DOOR + PRODUCTS DOOR — desktop dropdown (concept build) Click-to-landing-page + hover/tap dropdown. Not a mega-menu: one column, no sub-navigation. Solutions weighting is order + one accent ONLY — never card size, never grayscale/desaturation on the non-featured rows (see IA review round 1/round 2). The eyebrow line that used to sit above the Foodservice row was removed 2026-07-06 (Mike) — it made the four clean single-word rows read lopsided. Products door added 2026-08-21 (IA review fix A) so the dedicated /engineered-systems, /uf-systems, and /manifolds pages are reachable from primary nav — mirrors the Solutions door's markup and behavior exactly. The two doors share every rule below except position, hover/focus-within triggers, and the active-state color; those are combined selectors on one declaration block rather than duplicated blocks. The reusable dropdown parts (.site-nav__dropdown, .site-nav__dropdown-row, -label, .site-nav__caret) need no Products-specific rule at all — both doors render the same classes. ------------------------------------------------------------ */ .site-nav__item--solutions, .site-nav__item--products { position: relative; } /* Specificity note: the base link rule ".site-nav__item a" (0,1,1) is MORE specific than a bare ".site-nav__solutions-trigger" (0,1,0) would be, so it would otherwise win the cascade and force display:block on this trigger — which lets the label text and the caret SVG wrap onto separate lines as two inline items in a block box. Qualifying the selector with the parent "a" type (".site-nav__item a.site-nav__solutions-trigger", specificity 0,1,2) guarantees this rule always wins, and white-space:nowrap is a hard backstop so the label + caret can never wrap even under future CSS edits. Same reasoning applies to the Products trigger, hence the combined selector. */ .site-nav__item a.site-nav__solutions-trigger, .site-nav__item a.site-nav__products-trigger { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; } .site-nav__caret { flex-shrink: 0; transition: transform var(--transition-fast); } .site-nav__item--solutions:hover .site-nav__caret, .site-nav__item--solutions:focus-within .site-nav__caret, .site-nav__item--products:hover .site-nav__caret, .site-nav__item--products:focus-within .site-nav__caret { transform: rotate(180deg); } .site-nav__dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 280px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border, #E5E7EB); padding: var(--space-2); z-index: 210; } .site-nav__item--solutions:hover .site-nav__dropdown, .site-nav__item--solutions:focus-within .site-nav__dropdown, .site-nav__item--products:hover .site-nav__dropdown, .site-nav__item--products:focus-within .site-nav__dropdown { display: block; } .site-nav__dropdown-row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border-left: 3px solid transparent; color: var(--text-primary); text-decoration: none; } .site-nav__dropdown-row:hover { background: var(--surface-1); } .site-nav__dropdown-row--featured { border-left-color: var(--blue); background: var(--surface-1); } /* .site-nav__dropdown-eyebrow removed 2026-07-06 — the eyebrow line made the four-row Solutions dropdown/mobile-menu read lopsided against the other three single-word rows (Mike). Class was scoped to the dropdown/mobile menu only; the solutions.html fan-out CARD eyebrow uses the separate .segment-card__eyebrow class below and is unaffected. The Products door (added 2026-08-21) never had an eyebrow — its three rows read identically with no featured row, so .site-nav__dropdown-row--featured above is not used on any Products row either. */ .site-nav__dropdown-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); } /* Solutions trigger reads "active" when any Solutions child page (oem, foodservice, retail, pro) is current; Products trigger reads "active" when any Products child page (/products, /engineered-systems, /uf-systems, /manifolds) is current — both stamped by build-includes.py. */ .site-nav__item--solutions.site-nav__item--active .site-nav__solutions-trigger, .site-nav__item--products.site-nav__item--active .site-nav__products-trigger { color: var(--navy); font-weight: 500; border-bottom-color: var(--navy); } /* Mobile menu toggle */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); color: var(--text-primary); transition: background var(--transition-fast); } .nav-toggle:hover { background: var(--surface-1); } .nav-toggle svg { width: 22px; height: 22px; } /* Mobile nav drawer */ .site-nav--mobile { display: none; position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; background: var(--white); z-index: 199; padding: var(--space-6) var(--gutter); overflow-y: auto; border-top: 3px solid var(--blue); } .site-nav--mobile.is-open { display: block; } .site-nav--mobile .site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-1); width: 100%; } .site-nav--mobile .site-nav__item { width: 100%; } .site-nav--mobile .site-nav__item a { font-size: var(--text-lg); padding: var(--space-3) var(--space-4); width: 100%; border-radius: var(--radius); /* Drop the desktop underline in the stacked drawer; indicate active with a left accent instead. Reserved transparent border keeps geometry stable. */ border-bottom: none; border-left: 3px solid transparent; } .site-nav--mobile .site-nav__item--active a { border-bottom-color: transparent; border-left-color: var(--navy); background: var(--surface-1); } .site-nav--mobile .btn-cta { width: 100%; text-align: center; margin-top: var(--space-6); } /* ------------------------------------------------------------ SOLUTIONS DOOR + PRODUCTS DOOR — mobile accordion (concept build) Collapsed by default. Must not push Tools/Resources/Company off the first screen of the drawer at 375px viewport width (IA review condition). Products door added 2026-08-21 (IA review fix A) — mirrors the Solutions accordion exactly (combined selectors below, one declaration block each). ------------------------------------------------------------ */ .site-nav__item--solutions-mobile, .site-nav__item--products-mobile { border-bottom: 1px solid var(--surface-1); margin-bottom: var(--space-2); padding-bottom: var(--space-2); } .site-nav__solutions-accordion-trigger, .site-nav__products-accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: var(--text-lg); font-weight: 500; padding: var(--space-3) var(--space-4); background: none; border: none; border-left: 3px solid transparent; border-radius: var(--radius); color: var(--text-primary); cursor: pointer; text-align: left; font-family: inherit; } .site-nav__solutions-accordion-trigger[aria-expanded="true"] .site-nav__caret, .site-nav__products-accordion-trigger[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); } .site-nav__solutions-view-all, .site-nav__products-view-all { display: block; font-size: var(--text-sm); color: #1e3a5f; padding: 0 var(--space-4) var(--space-2); text-decoration: underline; } .site-nav__mobile-accordion-panel { display: none; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-2) var(--space-2); } .site-nav__mobile-accordion-panel.is-open { display: flex; } .site-nav__mobile-solutions-row, .site-nav__mobile-products-row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius); border-left: 3px solid transparent; color: var(--text-primary); text-decoration: none; font-size: var(--text-base, 1rem); } .site-nav__mobile-solutions-row--featured { border-left-color: var(--blue); background: var(--surface-1); } /* ------------------------------------------------------------ 6. BUTTONS ------------------------------------------------------------ */ /* Primary — navy fill, white text. 10.3:1 contrast OK */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.75rem 1.625rem; font-size: var(--text-base); font-weight: 600; line-height: 1; border-radius: var(--radius-xl); transition: all var(--transition-fast); cursor: pointer; white-space: nowrap; text-decoration: none; border: 2px solid transparent; } .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); } .btn-primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); } /* CTA in header — slightly smaller */ .btn-cta { padding: 0.625rem 1.375rem; font-size: var(--text-sm); background: var(--navy); color: var(--white); border-color: var(--navy); border-radius: var(--radius-xl); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; transition: all var(--transition-fast); } .btn-cta:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--white); } /* Outline — navy border, navy text */ .btn-outline { background: transparent; color: var(--btn-outline-text); border-color: var(--btn-outline-border); } .btn-outline:hover { background: var(--btn-outline-hover-bg); color: var(--btn-outline-hover-text); transform: translateY(-1px); box-shadow: var(--shadow-sm); } /* Ghost — on dark/navy backgrounds */ .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); } .btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--white); color: var(--white); } /* On-navy hero CTA treatment (added 2026-07-06). .page-hero has a navy background, so the default .btn-primary (navy fill) renders navy-on-navy and reads as broken text with no visual weight. Give the hero primary a white pill with navy text — the strongest read on navy, matching the header CTA intent — so it clearly out-weighs the ghost/outline secondary. Also fixes the retail hero's .btn-outline, whose navy border+text is invisible on navy, by flipping it to a white outline. */ .page-hero .btn-primary { background: var(--white); color: var(--navy); border-color: var(--white); } .page-hero .btn-primary:hover { background: #eaf4f9; color: var(--navy); border-color: #eaf4f9; transform: translateY(-1px); box-shadow: var(--shadow-md); } .page-hero .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.5); } .page-hero .btn-outline:hover { background: rgba(255,255,255,0.12); color: var(--white); border-color: var(--white); } /* Large variant */ .btn-lg { padding: 1rem 2rem; font-size: var(--text-lg); border-radius: 2rem; } /* Narrow-viewport guard: a long nowrap .btn-lg (e.g. capabilities/oem CTA) can poke a hairline past the viewport inside a heavily-padded container. Below 400px, trim the horizontal padding and allow the label to wrap so the button always fits within its column. */ @media (max-width: 400px) { .btn-lg { padding: 0.875rem 1.25rem; white-space: normal; max-width: 100%; } } /* Small variant */ .btn-sm { padding: 0.5rem 1rem; font-size: var(--text-sm); border-radius: var(--radius-xl); } /* ------------------------------------------------------------ 7. HERO SECTION ------------------------------------------------------------ */ .hero { background: var(--surface-0); padding-top: var(--space-24); padding-bottom: 0; overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } /* .hero__content is now split into --top (eyebrow/hook/H1) and --bottom (subhead/CTAs/links) as of the 2026-07-06 hero revision — see index.html inline hero