/* Aquamor Website Design System — site.css Version: 1.0 — Phase 1 Homepage Prototype Author: Isla (UI/UX & Brand) 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 ✓ - #1A1A1A on #F5F9FC = 14.7:1 ✓ - #1e3a5f on #FFFFFF = 10.3:1 ✓ - #1e3a5f on #E8F4F8 = 8.4:1 ✓ - #FFFFFF on #1e3a5f = 10.3:1 ✓ (filled buttons/badges — navy bg) - #FFFFFF on #1A1A1A = 16.0:1 ✓ (footer text on dark) - #333333 on #FFFFFF = 12.6:1 ✓ (body text) - #5A6B7A on #FFFFFF = 5.1:1 ✓ (header tagline — muted brand signature) - #4AADD4 on #FFFFFF = 2.55:1 ✗ — 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; /* Right-pointing arrow icon for .btn-arrow — inline SVG (no text glyph). Applied as a CSS mask so it inherits the button's currentColor. */ --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); /* 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%; } 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 ───────────────────────────────────────────────────────────── */ .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; } .site-logo img { height: 36px; width: auto; display: block; } /* Brand tagline beneath wordmark — brand signature, not body copy. Color: #5A6B7A = 5.1:1 on #FFFFFF — passes WCAG AA (≥4.5:1). */ .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); } /* 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); transition: color var(--transition-fast), background var(--transition-fast); white-space: nowrap; } .site-nav__item a:hover { color: var(--navy); background: var(--surface-1); } .site-nav__item--active a { color: var(--navy); font-weight: 600; } /* 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); } .site-nav--mobile .btn-cta { width: 100%; text-align: center; margin-top: var(--space-6); } /* ───────────────────────────────────────────────────────────── 6. BUTTONS ───────────────────────────────────────────────────────────── */ /* Primary — navy fill, white text. 10.3:1 contrast ✓ */ .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); } /* Large variant */ .btn-lg { padding: 1rem 2rem; font-size: var(--text-lg); border-radius: 2rem; } /* Small variant */ .btn-sm { padding: 0.5rem 1rem; font-size: var(--text-sm); border-radius: var(--radius-xl); } /* Arrow decoration — SVG chevron (not a text glyph, per no-AI-tell rule). Rendered via a CSS mask so it inherits the button's currentColor. */ .btn-arrow::after { content: ''; width: 1em; height: 1em; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--arrow-icon) no-repeat center / contain; mask: var(--arrow-icon) no-repeat center / contain; transition: transform var(--transition-fast); } .btn-arrow:hover::after { transform: translateX(3px); } /* ───────────────────────────────────────────────────────────── 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 { padding-bottom: var(--space-20); } .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-bottom: var(--space-6); } .hero__eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--blue); } .hero__headline { font-size: clamp(2.25rem, 4.5vw, var(--text-hero)); font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; color: var(--dark); margin-bottom: var(--space-6); } .hero__headline strong { font-weight: 700; color: var(--navy); } .hero__subheadline { font-size: var(--text-xl); font-weight: 400; line-height: 1.65; color: var(--text-secondary); margin-bottom: var(--space-10); max-width: 520px; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } /* Hero visual — product render placeholder */ .hero__visual { position: relative; padding-bottom: var(--space-20); } .hero__img-block { background: var(--surface-1); border-radius: var(--radius-lg); border: 2px dashed var(--border-mid); aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); text-align: center; padding: var(--space-8); } .hero__img-block-icon { width: 56px; height: 56px; color: var(--border-mid); } .hero__img-block-label { font-size: var(--text-base); font-weight: 600; color: var(--text-muted); } .hero__img-block-sub { font-size: var(--text-sm); color: var(--text-muted); opacity: 0.8; } /* Blue wave accent at hero bottom */ .hero__wave { display: block; width: 100%; margin-top: var(--space-8); } /* ───────────────────────────────────────────────────────────── 8. TRUST BAR ───────────────────────────────────────────────────────────── */ .trust-bar { background: var(--navy); padding-block: var(--space-5); } .trust-bar__list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2); } .trust-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--white); letter-spacing: 0.02em; white-space: nowrap; } /* Separator dots between badges */ .trust-badge + .trust-badge::before { content: '·'; color: rgba(255,255,255,0.35); font-size: var(--text-xl); font-weight: 300; margin-right: var(--space-2); } .trust-badge__icon { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; } /* ───────────────────────────────────────────────────────────── 9. SEGMENT CARDS ───────────────────────────────────────────────────────────── */ .segment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .segment-card { background: var(--surface-0); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); transition: box-shadow var(--transition), transform var(--transition); position: relative; overflow: hidden; } .segment-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .segment-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .segment-card:hover::after { transform: scaleX(1); } .segment-card__icon { width: 48px; height: 48px; background: var(--light-blue); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; } .segment-card__icon svg { width: 24px; height: 24px; color: var(--navy); } .segment-card__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); } .segment-card__headline { font-size: var(--text-xl); font-weight: 600; color: var(--dark); line-height: 1.3; } .segment-card__body { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.65; flex: 1; } .segment-card__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--navy); transition: gap var(--transition-fast); } .segment-card__link:hover { color: var(--navy); gap: var(--space-3); } .segment-card__link svg { width: 16px; height: 16px; transition: transform var(--transition-fast); } .segment-card:hover .segment-card__link svg { transform: translateX(3px); } /* ───────────────────────────────────────────────────────────── 10. CAPABILITY STRIP ───────────────────────────────────────────────────────────── */ .capability-strip { background: var(--surface-1); } .capability-strip__header { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-16); } .capability-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } /* Connector line between steps */ .capability-steps::before { content: ''; position: absolute; top: 28px; left: calc(12.5% + 28px); right: calc(12.5% + 28px); height: 2px; background: linear-gradient(90deg, var(--blue) 0%, var(--navy) 100%); z-index: 0; } .capability-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--space-4); } .capability-step__num { width: 56px; height: 56px; background: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); font-weight: 700; color: var(--white); margin-bottom: var(--space-5); flex-shrink: 0; border: 4px solid var(--surface-1); box-shadow: 0 0 0 2px var(--navy); } .capability-step__title { font-size: var(--text-base); font-weight: 700; color: var(--dark); margin-bottom: var(--space-2); line-height: 1.3; } .capability-step__desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; } .capability-strip__footer { text-align: center; margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border-light); } .capability-strip__location { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); } .capability-strip__location svg { width: 16px; height: 16px; color: var(--blue); } /* ───────────────────────────────────────────────────────────── 11. RED SYSTEM SECTION ───────────────────────────────────────────────────────────── */ .red-section { background: var(--navy); position: relative; overflow: hidden; } /* Subtle diagonal texture on dark bg */ .red-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(74, 173, 212, 0.08) 0%, transparent 60%); pointer-events: none; } .red-section__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); align-items: center; position: relative; z-index: 1; } .red-section__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: var(--space-5); } .red-section__headline { font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl)); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; color: var(--white); margin-bottom: var(--space-6); } .red-section__headline strong { font-weight: 700; } .red-section__body { font-size: var(--text-lg); color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: var(--space-8); } .red-specs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-8); } .red-spec { background: rgba(255,255,255,0.07); border: 1px solid rgba(74, 173, 212, 0.2); border-radius: var(--radius); padding: var(--space-4) var(--space-5); } .red-spec__value { font-size: var(--text-2xl); font-weight: 700; color: var(--white); line-height: 1; margin-bottom: var(--space-1); } .red-spec__label { font-size: var(--text-xs); color: rgba(255,255,255,0.65); letter-spacing: 0.05em; font-weight: 500; } .red-patent-note { display: flex; align-items: flex-start; gap: var(--space-3); background: rgba(74, 173, 212, 0.1); border: 1px solid rgba(74, 173, 212, 0.25); border-radius: var(--radius); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: rgba(255,255,255,0.85); line-height: 1.6; } .red-patent-note svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--blue); } /* RED visual placeholder */ .red-section__visual { position: relative; } .red-img-block { background: rgba(255,255,255,0.05); border: 2px dashed rgba(74, 173, 212, 0.3); border-radius: var(--radius-lg); aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-8); } .red-img-block-label { font-size: var(--text-base); font-weight: 600; color: rgba(255,255,255,0.6); } .red-img-block-sub { font-size: var(--text-sm); color: rgba(255,255,255,0.4); } /* ───────────────────────────────────────────────────────────── 12. RETAILER PROOF SECTION ───────────────────────────────────────────────────────────── */ .retailers-section { background: var(--surface-0); } .retailers-section__header { text-align: center; max-width: 560px; margin-inline: auto; margin-bottom: var(--space-12); } .retailer-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); } .retailer-chip { /* Text-name placeholder — no actual logos until trademark clearance */ display: inline-flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-8); border: 1px solid var(--border-light); border-radius: var(--radius); font-size: var(--text-base); font-weight: 600; color: var(--text-muted); background: var(--surface-1); letter-spacing: 0.02em; transition: all var(--transition-fast); min-width: 180px; text-align: center; } .retailer-chip:hover { background: var(--surface-2); border-color: var(--border-mid); color: var(--text-secondary); } .retailers-section__disclaimer { text-align: center; font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-8); font-style: italic; } /* ───────────────────────────────────────────────────────────── 13. INSIGHTS / BLOG TEASER ───────────────────────────────────────────────────────────── */ .insights-section { background: var(--surface-1); } .insights-section__header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-10); gap: var(--space-4); } .insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .insight-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: box-shadow var(--transition), transform var(--transition); } .insight-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .insight-card__img { background: var(--light-blue); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; border-bottom: 1px solid var(--border-light); } .insight-card__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; gap: var(--space-3); } .insight-card__tag { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); } .insight-card__title { font-size: var(--text-lg); font-weight: 600; color: var(--dark); line-height: 1.35; flex: 1; } .insight-card__meta { font-size: var(--text-sm); color: var(--text-muted); margin-top: auto; } /* ───────────────────────────────────────────────────────────── 14. PRE-FOOTER CTA BAND ───────────────────────────────────────────────────────────── */ .cta-band { background: var(--light-blue); border-top: 3px solid var(--blue); } .cta-band__header { text-align: center; max-width: 600px; margin-inline: auto; margin-bottom: var(--space-12); } .cta-band__headline { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); font-weight: 600; letter-spacing: -0.015em; color: var(--navy); margin-bottom: var(--space-4); } .cta-band__sub { font-size: var(--text-lg); color: var(--text-secondary); line-height: 1.65; } .cta-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .cta-route { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-card); text-align: center; transition: box-shadow var(--transition), transform var(--transition); } .cta-route:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .cta-route__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); } .cta-route__title { font-size: var(--text-xl); font-weight: 600; color: var(--dark); line-height: 1.3; } .cta-route__body { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.65; flex: 1; } /* ───────────────────────────────────────────────────────────── 15. FOOTER ───────────────────────────────────────────────────────────── */ .site-footer { background: var(--dark); color: var(--text-on-dark); padding-top: var(--space-20); padding-bottom: var(--space-12); } .site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); margin-bottom: var(--space-16); } .site-footer__brand { display: flex; flex-direction: column; gap: var(--space-5); } /* Icon logo sits above the wordmark, left-aligned with it */ .site-footer__icon { display: block; margin-bottom: var(--space-2); } .site-footer__icon img { height: 48px; width: auto; display: block; } .site-footer__logo img { height: 32px; width: auto; } .site-footer__tagline { font-size: var(--text-base); color: rgba(255,255,255,0.7); line-height: 1.6; font-style: italic; font-weight: 300; letter-spacing: 0.02em; } .site-footer__address { font-size: var(--text-sm); color: rgba(255,255,255,0.55); line-height: 1.7; } .site-footer__address strong { color: rgba(255,255,255,0.8); font-weight: 600; } .site-footer__col-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #A8B6C5; /* WCAG AA fix — 8.42:1 on #1A1A1A (F-02) */ margin-bottom: var(--space-4); } .site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); } .site-footer__col a { font-size: var(--text-sm); color: rgba(255,255,255,0.7); transition: color var(--transition-fast); } .site-footer__col a:hover { color: var(--blue); } /* Footer bottom bar */ .site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-8); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); } .site-footer__copyright { font-size: var(--text-sm); color: #B8C2CC; /* WCAG AA fix — 9.64:1 on #1A1A1A (F-03) */ } .site-footer__legal { display: flex; gap: var(--space-6); } .site-footer__legal a { font-size: var(--text-sm); color: #B8C2CC; /* WCAG AA fix — 9.64:1 on #1A1A1A (F-03) */ transition: color var(--transition-fast); } .site-footer__legal a:hover { color: rgba(255,255,255,0.75); } /* ───────────────────────────────────────────────────────────── 16. WAVE DECORATIONS (SVG inline, #4AADD4 color) ───────────────────────────────────────────────────────────── */ .section-wave { display: block; width: 100%; overflow: hidden; line-height: 0; margin-bottom: -1px; /* prevents subpixel gap */ } .section-wave svg { display: block; width: 100%; } /* ───────────────────────────────────────────────────────────── 17. SCROLL REVEAL (JS-driven, minimal) ───────────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger delays for grid children */ .reveal-group > *:nth-child(1) { transition-delay: 0ms; } .reveal-group > *:nth-child(2) { transition-delay: 80ms; } .reveal-group > *:nth-child(3) { transition-delay: 160ms; } .reveal-group > *:nth-child(4) { transition-delay: 240ms; } /* Reduce motion — disable reveals for users who prefer it */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-group > * { opacity: 1; transform: none; transition: none; } } /* ───────────────────────────────────────────────────────────── 18. SECTION HEADERS (shared pattern) ───────────────────────────────────────────────────────────── */ .section-header { text-align: center; max-width: 680px; margin-inline: auto; margin-bottom: var(--space-16); } .section-header__eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-bottom: var(--space-4); } .section-header__headline { font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl)); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--dark); margin-bottom: var(--space-4); } .section-header__sub { font-size: var(--text-lg); color: var(--text-secondary); line-height: 1.65; } /* ───────────────────────────────────────────────────────────── 19. DIVIDER ───────────────────────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--border-light); margin-block: var(--space-8); } .divider--blue { border-top-color: var(--blue); border-top-width: 2px; } /* ───────────────────────────────────────────────────────────── 20. RESPONSIVE BREAKPOINTS ───────────────────────────────────────────────────────────── */ /* Tablet — ≤960px */ @media (max-width: 960px) { :root { --gutter: 1.25rem; --header-height: 76px; } .hero__inner { grid-template-columns: 1fr; gap: var(--space-12); } .hero__content { padding-bottom: 0; } .hero__visual { padding-bottom: 0; } .hero__subheadline { max-width: 100%; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .segment-grid { grid-template-columns: 1fr 1fr; } .capability-steps { grid-template-columns: 1fr 1fr; } .capability-steps::before { display: none; } .red-section__inner { grid-template-columns: 1fr; gap: var(--space-12); } .cta-routes { grid-template-columns: 1fr 1fr; } .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .insights-grid { grid-template-columns: 1fr 1fr; } .site-nav { display: none; } .nav-toggle { display: flex; } /* QA Fix: hide header CTA once hamburger takes over — mobile slide-down nav carries its own full-width CTA, so the header CTA is redundant and was pushing body scrollWidth past the viewport (clipping hero text). */ .site-header .btn-cta { display: none; } } /* Mobile — ≤640px */ @media (max-width: 640px) { :root { --gutter: 1rem; --header-height: 68px; } /* Keep tagline present at mobile — slightly reduced letter-spacing to avoid overflow */ .site-logo__tagline { font-size: 11px; letter-spacing: 0.05em; } .hero { padding-top: var(--space-16); } .hero__headline { font-size: clamp(1.875rem, 8vw, 2.5rem); } .hero__actions { flex-direction: column; align-items: flex-start; } .hero__actions .btn { width: 100%; justify-content: center; } .section { padding-block: var(--space-16); } .section--lg { padding-block: var(--space-20); } .grid-2, .grid-3, .grid-4, .segment-grid, .capability-steps, .cta-routes, .insights-grid { grid-template-columns: 1fr; } .red-specs { grid-template-columns: 1fr 1fr; } .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-8); } .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .trust-bar__list { gap: var(--space-1); justify-content: center; } .retailer-chip { min-width: 140px; } .insights-section__header { flex-direction: column; align-items: flex-start; } } /* Print */ @media print { .site-header { position: static; box-shadow: none; } .site-nav { display: none; } .nav-toggle { display: none; } .btn { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Fix 1: Scroll-reveal elements must be visible in print — JS observer never fires */ .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ═════════════════════════════════════════════════════════════ PHASE 3A ADDITIONS — Sub-page components Author: Isla · 2026-06-10 All new contrast pairs documented below: - #FFFFFF on #1e3a5f (navy) = 10.3:1 ✓ (page hero bg) - #1A1A1A on #FFFFFF = 16.0:1 ✓ (body) - #1e3a5f on #F5F9FC = 9.7:1 ✓ (proof tiles) - #1e3a5f on #E8F4F8 = 8.4:1 ✓ (callout boxes) - rgba(255,255,255,0.9) on #1e3a5f ≈ 9.3:1 ✓ (hero sub on navy) - #3A4A5C on #FFFFFF = 8.1:1 ✓ (body secondary) - #3A4A5C on #F5F9FC = 7.6:1 ✓ (tint sections) - #5A6B7A on #FFFFFF = 5.1:1 ✓ (muted text, min acceptable) NOTE: #4AADD4 (#blue) still DECORATIVE ONLY — never body text fill ═════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── 21. PAGE HERO — used on all segment/feature subpages Navy background, full-bleed, with wave bottom transition ───────────────────────────────────────────────────────────── */ .page-hero { background: var(--navy); padding-top: calc(var(--space-20) + var(--space-4)); padding-bottom: 0; position: relative; overflow: hidden; } /* Subtle radial glow on dark hero — same treatment as red-section on homepage */ .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(74,173,212,0.07) 0%, transparent 65%); pointer-events: none; } .page-hero__inner { position: relative; z-index: 1; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); padding-bottom: var(--space-20); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .page-hero--full .page-hero__inner { grid-template-columns: 1fr; max-width: 800px; text-align: left; } /* Narrow heroes (no side visual): single column so the headline block does not get split across the 1fr 1fr grid. Added 2026-06-18. */ .page-hero__inner--narrow { grid-template-columns: 1fr; max-width: 860px; text-align: left; } .page-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: var(--space-5); } .page-hero__headline { font-size: clamp(var(--text-3xl), 4vw, var(--text-hero)); font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; color: var(--white); margin-bottom: var(--space-6); overflow-wrap: break-word; word-break: break-word; } .page-hero__headline strong { font-weight: 700; } .page-hero__sub { font-size: var(--text-xl); font-weight: 400; line-height: 1.65; color: rgba(255,255,255,0.85); margin-bottom: var(--space-10); max-width: 560px; overflow-wrap: break-word; word-break: break-word; } .page-hero--full .page-hero__sub { max-width: 680px; } .page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } /* Product/Render placeholder on hero */ .page-hero__visual { position: relative; } .page-hero__img-block { background: rgba(255,255,255,0.06); border: 2px dashed rgba(74,173,212,0.35); border-radius: var(--radius-lg); aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-8); } .page-hero__img-block-label { font-size: var(--text-base); font-weight: 600; color: rgba(255,255,255,0.6); } .page-hero__img-block-sub { font-size: var(--text-sm); color: rgba(255,255,255,0.4); } /* Wave bottom of page hero — transitions to white or surface-1 */ .page-hero__wave { display: block; width: 100%; overflow: hidden; line-height: 0; margin-bottom: -1px; } .page-hero__wave svg { display: block; width: 100%; } /* ───────────────────────────────────────────────────────────── 22. PAGE CONTENT SECTIONS — shared prose layout ───────────────────────────────────────────────────────────── */ .page-section { padding-block: var(--space-20); } .page-section--tint { background: var(--surface-1); } .page-section--white { background: var(--surface-0); } .page-section--blue { background: var(--light-blue); border-top: 3px solid var(--blue); } .page-section--navy { background: var(--navy); color: var(--white); position: relative; overflow: hidden; } .page-section--navy::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(74,173,212,0.08) 0%, transparent 60%); pointer-events: none; } .page-content { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .page-content--narrow { max-width: 800px; margin-inline: auto; padding-inline: var(--gutter); } /* Two-column split: 55/45 */ .page-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; } .page-split--wide { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-16); align-items: start; } /* ───────────────────────────────────────────────────────────── 23. PAIN / CAPABILITY LIST — icon bullet lists ───────────────────────────────────────────────────────────── */ .feature-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); } .feature-list li { display: flex; gap: var(--space-4); align-items: flex-start; font-size: var(--text-base); line-height: 1.7; color: var(--text-secondary); } .feature-list li::before { content: ''; display: block; width: 20px; height: 20px; min-width: 20px; background: var(--light-blue); border-radius: 50%; border: 2px solid var(--navy); margin-top: 3px; flex-shrink: 0; } /* Pain variant — red accent dot */ .feature-list--pain li::before { background: #FEE2E2; border-color: #DC2626; } /* Capability variant — blue/navy check dot */ .feature-list--capability li::before { background: var(--light-blue); border-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231e3a5f'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: center; } .feature-list li strong { color: var(--dark); font-weight: 600; } /* ───────────────────────────────────────────────────────────── 24. PROOF TILES GRID — stat/credential cards ───────────────────────────────────────────────────────────── */ .proof-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-8); } .proof-tile { background: var(--surface-0); border: 1px solid var(--border-light); border-top: 3px solid var(--navy); border-radius: var(--radius); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } .proof-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .proof-tile__value { font-size: var(--text-3xl); font-weight: 700; color: var(--navy); line-height: 1.1; letter-spacing: -0.02em; } .proof-tile__label { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; } /* On tint background */ .section--tint .proof-tile, .page-section--tint .proof-tile { background: var(--surface-0); } /* ───────────────────────────────────────────────────────────── 25. SECTION EYEBROW + BODY HEADLINE PATTERN ───────────────────────────────────────────────────────────── */ .content-eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-bottom: var(--space-3); } .content-h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--dark); margin-bottom: var(--space-5); } .content-h3 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--dark); margin-bottom: var(--space-4); } .content-h4 { font-size: var(--text-lg); font-weight: 700; color: var(--dark); margin-bottom: var(--space-3); margin-top: var(--space-8); } .content-body { font-size: var(--text-base); line-height: 1.75; color: var(--text-secondary); } .content-body + .content-body { margin-top: var(--space-4); } /* On navy bg — invert text */ .page-section--navy .content-eyebrow { color: var(--blue); } .page-section--navy .content-h2 { color: var(--white); } .page-section--navy .content-h3 { color: var(--white); } .page-section--navy .content-h4 { color: rgba(255,255,255,0.9); } .page-section--navy .content-body { color: rgba(255,255,255,0.8); } /* ───────────────────────────────────────────────────────────── 26. INLINE IMAGE PLACEHOLDER — light bg, render-pending ───────────────────────────────────────────────────────────── */ .render-placeholder { background: var(--surface-1); border: 2px dashed var(--border-mid); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-10) var(--space-8); color: var(--text-muted); } .render-placeholder__label { font-size: var(--text-base); font-weight: 600; color: var(--text-muted); } .render-placeholder__sub { font-size: var(--text-sm); color: var(--text-muted); opacity: 0.75; max-width: 220px; } .render-placeholder__tag { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); background: var(--light-blue); border-radius: var(--radius-xl); padding: var(--space-1) var(--space-3); } /* ───────────────────────────────────────────────────────────── 26b. HERO ROTATOR — crossfading lifestyle photos ───────────────────────────────────────────────────────────── */ .hero-rotator { position: relative; width: 100%; max-width: 600px; margin-inline: auto; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface-1); } .hero-rotator__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; } .hero-rotator__img.is-active { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero-rotator__img { transition: none; } } /* ───────────────────────────────────────────────────────────── 27. RETAILER WALL — on retail page (text chips, clearance pending) ───────────────────────────────────────────────────────────── */ .retailer-wall { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); margin-bottom: var(--space-5); } /* Reuse .retailer-chip from homepage — no new class needed */ /* ───────────────────────────────────────────────────────────── 28. SPEC TABLE — RED System & certifications ───────────────────────────────────────────────────────────── */ .spec-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-top: var(--space-6); } .spec-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--surface-0); } .spec-table thead tr { background: var(--navy); } .spec-table thead th { padding: var(--space-4) var(--space-5); text-align: left; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); white-space: nowrap; } .spec-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background var(--transition-fast); } .spec-table tbody tr:last-child { border-bottom: none; } .spec-table tbody tr:hover { background: var(--surface-1); } .spec-table tbody td { padding: var(--space-4) var(--space-5); color: var(--text-secondary); line-height: 1.55; vertical-align: top; } .spec-table tbody td:first-child { font-weight: 600; color: var(--dark); white-space: nowrap; } /* Certification badge pill inside table */ .cert-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 10px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--navy); color: var(--white); border-radius: var(--radius-xl); margin: 2px 2px; } /* ───────────────────────────────────────────────────────────── 29. RED SYSTEM PAGE — flagship feature tiles Navy treatment (carries from homepage red-section, extended for full-page use) ───────────────────────────────────────────────────────────── */ .red-page-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-10) 0; } .red-page-spec { background: rgba(255,255,255,0.07); border: 1px solid rgba(74,173,212,0.22); border-top: 3px solid var(--blue); border-radius: var(--radius); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); transition: background var(--transition-fast); } .red-page-spec:hover { background: rgba(255,255,255,0.1); } .red-page-spec__value { font-size: var(--text-3xl); font-weight: 700; color: var(--white); line-height: 1.1; letter-spacing: -0.02em; } .red-page-spec__label { font-size: var(--text-sm); color: rgba(255,255,255,0.7); line-height: 1.5; font-weight: 500; } /* Patent note on RED page — navy context */ .red-patent-note--page { display: flex; align-items: flex-start; gap: var(--space-4); background: rgba(74,173,212,0.1); border: 1px solid rgba(74,173,212,0.3); border-left: 4px solid var(--blue); border-radius: var(--radius); padding: var(--space-6) var(--space-6); margin-top: var(--space-8); } .red-patent-note--page svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--blue); margin-top: 2px; } .red-patent-note--page p { font-size: var(--text-base); color: rgba(255,255,255,0.88); line-height: 1.7; margin: 0; } .red-patent-note--page strong { color: var(--white); } /* Render slot inside navy section */ .render-placeholder--dark { background: rgba(255,255,255,0.05); border-color: rgba(74,173,212,0.3); color: rgba(255,255,255,0.5); } .render-placeholder--dark .render-placeholder__label { color: rgba(255,255,255,0.6); } .render-placeholder--dark .render-placeholder__sub { color: rgba(255,255,255,0.4); } .render-placeholder--dark .render-placeholder__tag { background: rgba(74,173,212,0.15); color: var(--blue); } /* ───────────────────────────────────────────────────────────── 30. INLINE CALLOUT BOX ───────────────────────────────────────────────────────────── */ .callout-box { background: var(--light-blue); border: 1px solid var(--border-mid); border-left: 4px solid var(--navy); border-radius: var(--radius); padding: var(--space-6); margin-top: var(--space-8); } .callout-box p { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.7; margin: 0; } .callout-box strong { color: var(--dark); } /* ───────────────────────────────────────────────────────────── 31. SUBPAGE — Responsive adjustments ───────────────────────────────────────────────────────────── */ @media (max-width: 960px) { .page-hero__inner { grid-template-columns: 1fr; gap: var(--space-10); padding-bottom: var(--space-16); } .page-split, .page-split--wide { grid-template-columns: 1fr; gap: var(--space-10); } .proof-tiles { grid-template-columns: 1fr 1fr; } .red-page-specs { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .page-hero { padding-top: var(--space-16); } .page-hero__headline { font-size: clamp(var(--text-2xl), 7vw, var(--text-3xl)); } .page-hero__sub { font-size: var(--text-base); } .page-hero__actions { flex-direction: column; align-items: flex-start; } .page-hero__actions .btn { width: 100%; justify-content: center; } .proof-tiles { grid-template-columns: 1fr 1fr; } .red-page-specs { grid-template-columns: 1fr 1fr; } .page-section { padding-block: var(--space-16); } .spec-table { font-size: var(--text-xs); } } /* ───────────────────────────────────────────────────────────── FIX 3 — Deprecated alias: .page-hero__headline page-hero__title (site-pages.css) is now canonical for ALL subpages. .page-hero__headline kept here for backward compat; any remaining references should migrate to __title. ───────────────────────────────────────────────────────────── */ /* No separate rule needed — __headline is defined above and remains functional. New pages and updated pages use __title (defined in site-pages.css). See style-guide.html §Hero. */ /* ───────────────────────────────────────────────────────────── FIX 12 — Anchor scroll offset: sticky header clearance Applies to every element with an id="" attribute so jump-nav links, tab anchors, and contact route anchors all clear the fixed header. Value matches --header-height (80px) + 20px breathing room. ───────────────────────────────────────────────────────────── */ [id] { scroll-margin-top: 100px; }