/* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #0d2142; --navy-dark: #091830; --teal: #2aabb3; --teal-dk: #1a8f96; --red: #e63946; --white: #ffffff; /* always white — text/icons on dark surfaces */ --surface: #ffffff; /* card / panel background — flips in dark mode */ --surface-2: #f6f8fa; /* secondary surface — code blocks, alt rows */ --off: #f6f8fa; /* page background — flips in dark mode */ --text: #0d2142; --sub: #637080; --border: #e4eaed; --ok: #1e8b4a; --warn: #a86a00; --danger: #b91c1c; --ok-bg: rgba(44,184,107,.14); --warn-bg: rgba(240,169,70,.18); --danger-bg: rgba(230,57,70,.14); --shadow-card: 0 1px 2px rgba(13,33,66,.04), 0 0 0 1px rgba(13,33,66,.02); --shadow-card-hover: 0 6px 18px rgba(13,33,66,.08), 0 0 0 1px rgba(13,33,66,.04); --border-strong: #c8d2da; --max: 1200px; --font: 'Inter', system-ui, sans-serif; /* Default to light. `color-scheme: light dark` would tell the browser "either is fine" — and it then picks based on OS preference, overriding our explicit theme choice for unstyled form controls (date pickers, selects, textareas without an explicit background). Pin this to the chosen theme via the overrides below so native controls follow. */ color-scheme: light; } :root[data-theme="light"], :root.theme-light { color-scheme: light; } /* ── Dark theme (v3.9, retuned v3.9.1) ───────────────────────── Triggered by either: - prefers-color-scheme: dark (when no manual override is set) - [data-theme="dark"] on (manual user choice) --white stays a true white so any "text on dark" rule (hero h1, button labels on teal, etc.) keeps its contrast. --surface and --off carry the surface palette and flip darker, so card rules that say "background: var(--surface)" automatically work in both modes. Visual stack: --navy (darkest) < --off (page) < --surface (card surface) See BRAND.md §12. */ :root[data-theme="dark"], :root.theme-dark { color-scheme: dark; --navy: #07101f; --navy-dark: #050b18; --teal-dk: #46c5cc; --red: #f4646f; --surface: #182337; --surface-2: #0e1626; --off: #0e1626; --text: #e7edf5; --sub: #a4b1c5; --border: #2a384f; --ok: #4ed18a; --warn: #f0a946; --danger: #f4646f; --ok-bg: rgba(78,209,138,.16); --warn-bg: rgba(240,169,70,.18); --danger-bg: rgba(244,100,111,.16); --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04); --shadow-card-hover: 0 8px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); --border-strong: #3d4d68; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.theme-light) { color-scheme: dark; --navy: #07101f; --navy-dark: #050b18; --teal-dk: #46c5cc; --red: #f4646f; --surface: #182337; --surface-2: #0e1626; --off: #0e1626; --text: #e7edf5; --sub: #a4b1c5; --border: #2a384f; --ok: #4ed18a; --warn: #f0a946; --danger: #f4646f; --ok-bg: rgba(78,209,138,.16); --warn-bg: rgba(240,169,70,.18); --danger-bg: rgba(244,100,111,.16); --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04); --shadow-card-hover: 0 8px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); --border-strong: #3d4d68; } } html { scroll-behavior: smooth; } /* ── Selection ────────────────────────────────────────────── Brand-teal tinted highlight in both themes. Slight extra opacity in dark mode so selection stays visible against the dark surface. */ ::selection { background: rgba(42,171,179,.28); color: var(--text); } :root[data-theme="dark"] ::selection, :root.theme-dark ::selection { background: rgba(70,197,204,.32); color: var(--text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.theme-light) ::selection { background: rgba(70,197,204,.32); color: var(--text); } } /* ── Scrollbars ───────────────────────────────────────────── WebKit/Blink and Firefox draw very different scrollbars; both look out of place on dark navy backgrounds. Use thin tokens so the scrollbar always reads as part of the page chrome. */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--sub); background-clip: padding-box; border: 2px solid transparent; } /* ── Focus rings ──────────────────────────────────────────── A single ring style applied via :focus-visible so it appears for keyboard users but not for mouse clicks. Each interactive surface that already had a per-component focus rule keeps its override; this rule is the floor. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; } /* ── Reduced motion ───────────────────────────────────────── Respect users who've asked for less animation at the OS level. Disables hover-lifts, smooth scroll, and shortens every transition so UI still reflects state changes without visible movement. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--surface); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: var(--teal); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Utilities ──────────────────────────────────────────────── */ .wrap { width: 92%; max-width: var(--max); margin: 0 auto; } .pad { padding: 112px 0; } .bg-off { background: var(--off); } .bg-navy { background: var(--navy); } /* ── Nav ────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.07); transition: box-shadow .3s; } .nav--scrolled { box-shadow: 0 4px 40px rgba(0,0,0,.35); } .nav__inner { display: flex; align-items: center; justify-content: space-between; width: 92%; max-width: var(--max); margin: 0 auto; height: 66px; } .nav__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; } .nav__logo-text { font-size: .95rem; font-weight: 700; color: var(--white); letter-spacing: -.01em; } .nav__logo-text span { color: var(--teal); } .nav__menu { display: flex; align-items: center; gap: 4px; list-style: none; } .nav__menu a { color: rgba(255,255,255,.65); font-size: .875rem; font-weight: 500; padding: 7px 14px; border-radius: 5px; text-decoration: none; transition: color .15s, background .15s; } .nav__menu a:hover, .nav__menu a.active { color: var(--white); background: rgba(255,255,255,.07); } .nav__menu .cta { background: var(--teal); color: var(--white) !important; margin-left: 6px; font-weight: 600; } .nav__menu .cta:hover { background: var(--teal-dk) !important; } .nav__burger { display: none; background: none; border: none; cursor: pointer; padding: 4px; } .nav__burger span { display: block; width: 20px; height: 1.5px; background: var(--white); margin: 5px 0; transition: all .3s; } /* ── Theme switch ──────────────────────────────────────────── Auto / Light / Dark switch that lives on the navy nav bar (so it reads the same in every theme). The icon shows the *selected* mode — monitor for auto, sun for light, moon for dark — driven by data-theme-pref (set by the script before paint), so it's correct before JS runs and never flashes. See BRAND.md §12. */ .nav__theme { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 6px; padding: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; cursor: pointer; color: rgba(255,255,255,.7); transition: color .15s, background .15s, border-color .15s; flex-shrink: 0; } .nav__theme:hover { color: var(--white); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); } .nav__theme:focus-visible { outline: 2px solid rgba(255,255,255,.65); outline-offset: 2px; } .nav__theme-icon { width: 18px; height: 18px; } /* Show exactly one icon, matching the selected mode. No preference stored yet == auto, so auto is the default. */ .nav__theme .nav__theme-icon { display: none; } .nav__theme .icon-auto { display: block; } :root[data-theme-pref="light"] .nav__theme .icon-auto { display: none; } :root[data-theme-pref="light"] .nav__theme .icon-sun { display: block; } :root[data-theme-pref="dark"] .nav__theme .icon-auto { display: none; } :root[data-theme-pref="dark"] .nav__theme .icon-moon { display: block; } /* ── Buttons ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 6px; font-weight: 600; font-size: .9rem; cursor: pointer; border: 1.5px solid transparent; transition: all .15s; text-decoration: none; letter-spacing: -.01em; } .btn-primary { background: var(--teal); color: var(--white); border-color: var(--teal); } .btn-primary:hover { background: var(--teal-dk); border-color: var(--teal-dk); } .btn-outline-w { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); } .btn-outline-w:hover { border-color: var(--white); background: rgba(255,255,255,.07); } .btn-outline { background: transparent; color: var(--text); border-color: var(--border); } .btn-outline:hover { border-color: var(--teal); color: var(--teal); } .btn:hover { text-decoration: none; } /* Focus states for keyboard navigation */ .btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .nav__menu a:focus-visible { outline: 2px solid rgba(255,255,255,.65); outline-offset: 2px; } .anchor-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } /* ── Hero ───────────────────────────────────────────────────── */ .hero { background: var(--navy); padding: 120px 0 100px; color: var(--white); } .hero__wrap { width: 92%; max-width: var(--max); margin: 0 auto; } .hero__kicker { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(42,171,179,.45); border-radius: 20px; padding: 5px 16px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-bottom: 36px; } .hero__h1 { font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 900; line-height: 1.06; letter-spacing: -.04em; max-width: 820px; margin-bottom: 32px; } .hero__h1 em { color: var(--teal); font-style: normal; } .hero__sub { font-size: 1.1rem; line-height: 1.75; color: rgba(255,255,255,.58); max-width: 520px; margin-bottom: 48px; } .hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } /* ── Section label ──────────────────────────────────────────── */ .label { font-size: .72rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .1em; display: block; margin-bottom: 16px; } /* ── Big headline ───────────────────────────────────────────── */ .h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; line-height: 1.1; letter-spacing: -.035em; color: var(--text); } .h2--white { color: var(--white); } .h2--max { max-width: 700px; } .lead { font-size: 1.05rem; color: var(--sub); line-height: 1.75; max-width: 560px; margin-top: 18px; } .lead--white { color: rgba(255,255,255,.55); } /* ── Divider ────────────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--border); } /* ── Pain / risk ────────────────────────────────────────────── */ .risk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; margin-top: 64px; } .risk-item { padding: 40px 36px; border-right: 1px solid rgba(255,255,255,.08); } .risk-item:last-child { border-right: none; } .risk-item__bar { width: 28px; height: 3px; background: var(--red); border-radius: 2px; margin-bottom: 24px; } .risk-item h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 12px; letter-spacing: -.01em; } .risk-item p { font-size: .875rem; color: rgba(255,255,255,.5); line-height: 1.75; } /* ── Services grid ──────────────────────────────────────────── */ .services-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-top: 64px; } .service-item { background: var(--surface); padding: 44px 40px; transition: background .2s; } .service-item:hover { background: var(--off); box-shadow: inset 0 2px 0 0 var(--teal); } .service-item__num { font-size: .75rem; font-weight: 700; color: var(--teal); letter-spacing: .07em; margin-bottom: 20px; } .service-item h3 { font-size: 1.1rem; font-weight: 800; color: var(--text); margin-bottom: 12px; letter-spacing: -.02em; } .service-item p { font-size: .9rem; color: var(--sub); line-height: 1.75; max-width: 380px; } .service-item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; } .service-item__tags span { font-size: .72rem; font-weight: 600; color: var(--teal); background: rgba(42,171,179,.08); padding: 3px 10px; border-radius: 20px; } /* ── Why-list ───────────────────────────────────────────────── */ .why-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: 64px; } .why-row { display: grid; grid-template-columns: 200px 1fr; gap: 48px; padding: 40px 0; border-bottom: 1px solid var(--border); align-items: start; } .why-row__label { font-size: .82rem; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .07em; padding-top: 4px; } .why-row__body h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: -.01em; } .why-row__body p { font-size: .9rem; color: var(--sub); line-height: 1.75; } /* ── Audience ───────────────────────────────────────────────── */ .audience-row { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.08); margin-top: 64px; } .audience-item { padding: 44px 40px 44px 0; border-right: 1px solid rgba(255,255,255,.08); margin-right: 40px; } .audience-item:last-child { border-right: none; margin-right: 0; } .audience-item__role { font-size: .7rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 16px; display: block; } .audience-item h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 12px; letter-spacing: -.01em; line-height: 1.35; } .audience-item p { font-size: .875rem; color: rgba(255,255,255,.5); line-height: 1.75; } /* ── CTA band ───────────────────────────────────────────────── */ .cta-band { background: var(--navy); padding: 112px 0; border-top: 1px solid rgba(255,255,255,.06); } .cta-band .h2 { max-width: 640px; } .cta-band .lead { margin-bottom: 44px; } .cta-band__row { display: flex; gap: 14px; flex-wrap: wrap; } /* ── Anchor tabs ────────────────────────────────────────────── */ .anchor-tabs { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 66px; z-index: 90; } .anchor-tabs__inner { display: flex; overflow-x: auto; scrollbar-width: none; width: 92%; max-width: var(--max); margin: 0 auto; } .anchor-tabs__inner::-webkit-scrollbar { display: none; } .anchor-tab { flex-shrink: 0; padding: 16px 20px; font-size: .83rem; font-weight: 600; color: var(--sub); border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s; } .anchor-tab:hover { color: var(--text); text-decoration: none; } .anchor-tab.active { color: var(--teal); border-bottom-color: var(--teal); } /* ── Service rows (services page) ───────────────────────────── */ .svc-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); } .svc-row { display: grid; grid-template-columns: 280px 1fr; gap: 64px; padding: 64px 0; border-bottom: 1px solid var(--border); align-items: start; scroll-margin-top: 130px; } .svc-row__type { font-size: .7rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 10px; display: block; } .svc-row__title { font-size: 1.35rem; font-weight: 800; color: var(--text); letter-spacing: -.025em; line-height: 1.2; margin-bottom: 16px; } .svc-row__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .svc-row__tags span { font-size: .72rem; font-weight: 600; color: var(--teal); background: rgba(42,171,179,.08); padding: 3px 10px; border-radius: 20px; } .svc-row__body p { font-size: .93rem; color: var(--sub); line-height: 1.8; margin-bottom: 14px; } .svc-row__body p:last-child { margin-bottom: 0; } .alert-strip { display: flex; gap: 12px; align-items: flex-start; background: rgba(230,57,70,.05); border-left: 3px solid var(--red); border-radius: 5px; padding: 14px 18px; margin-bottom: 24px; } .alert-strip p { font-size: .875rem; color: var(--sub); line-height: 1.65; } /* ── Process steps ──────────────────────────────────────────── */ .steps { display: flex; gap: 0; margin: 28px 0; flex-wrap: wrap; position: relative; } .step { flex: 1; min-width: 80px; display: flex; flex-direction: column; align-items: flex-start; padding-right: 16px; position: relative; } .step__num { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: var(--white); font-size: .74rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; flex-shrink: 0; } .step p { font-size: .75rem; color: var(--sub); line-height: 1.45; } .diff-box { background: var(--off); border-radius: 8px; padding: 28px 32px; margin-top: 28px; } .diff-box h4 { font-size: .72rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 14px; } .diff-box ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .diff-box li { font-size: .875rem; color: var(--sub); display: flex; gap: 10px; line-height: 1.6; } .diff-box li::before { content: '✓'; color: var(--teal); font-weight: 700; flex-shrink: 0; } /* ── Vendor note ────────────────────────────────────────────── */ .vendor-note { max-width: 680px; border-left: 3px solid var(--teal); padding: 24px 32px; margin-top: 64px; } .vendor-note p { font-size: .93rem; color: rgba(255,255,255,.55); line-height: 1.8; } .vendor-note strong { color: var(--white); } /* ── Engagement models ──────────────────────────────────────── */ .models-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 64px; } .model-card { border: 1px solid var(--border); border-radius: 8px; padding: 36px 32px; } .model-card__badge { font-size: .7rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 14px; display: block; } .model-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 10px; letter-spacing: -.01em; } .model-card p { font-size: .875rem; color: var(--sub); line-height: 1.75; margin-bottom: 14px; } .model-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .model-card li { font-size: .84rem; color: var(--sub); display: flex; gap: 8px; } .model-card li::before { content: '→'; color: var(--teal); font-weight: 700; flex-shrink: 0; } /* ── About page ─────────────────────────────────────────────── */ .about-split { display: grid; grid-template-columns: 260px 1fr; gap: 80px; align-items: start; } .profile-block { position: sticky; top: 100px; } .profile-block__avatar { width: 120px; height: 120px; border-radius: 10px; overflow: hidden; margin-bottom: 24px; } .profile-block__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .profile-block__name { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 4px; } .profile-block__title { font-size: .84rem; color: var(--sub); margin-bottom: 24px; } .profile-block__links { display: flex; flex-direction: column; gap: 10px; } .profile-block__link { display: flex; gap: 8px; align-items: center; font-size: .84rem; color: var(--sub); text-decoration: none; } .profile-block__link:hover { color: var(--teal); text-decoration: none; } .profile-block__link svg { flex-shrink: 0; } .profile-block__creds { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); } .profile-block__creds h4 { font-size: .7rem; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 12px; } .badge-row { display: flex; flex-wrap: wrap; gap: 6px; } .badge { font-size: .74rem; font-weight: 600; color: var(--teal); background: rgba(42,171,179,.08); padding: 4px 10px; border-radius: 4px; } .about-body .h2 { margin-bottom: 28px; } .about-body p { font-size: .97rem; color: var(--sub); line-height: 1.85; margin-bottom: 20px; max-width: 640px; } /* ── Timeline ───────────────────────────────────────────────── */ .tl { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); margin-top: 16px; } .tl-row { display: grid; grid-template-columns: 180px 1fr; gap: 40px; padding: 36px 0; border-bottom: 1px solid var(--border); } .tl-row__date { font-size: .82rem; font-weight: 600; color: var(--sub); padding-top: 3px; } .tl-row__body h3 { font-size: .97rem; font-weight: 700; color: var(--text); margin-bottom: 10px; letter-spacing: -.01em; } .tl-row__body ul { list-style: none; display: flex; flex-direction: column; gap: 7px; } .tl-row__body li { font-size: .875rem; color: var(--sub); display: flex; gap: 10px; line-height: 1.6; } .tl-row__body li::before { content: '→'; color: var(--teal); font-weight: 700; flex-shrink: 0; } /* ── Committee list ─────────────────────────────────────────── */ .committee-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: 64px; } .committee-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 28px 0; border-bottom: 1px solid var(--border); align-items: baseline; } .committee-row__org { font-size: .97rem; font-weight: 700; color: var(--text); } .committee-row__role { font-size: .875rem; color: var(--sub); } /* ── Contact page ───────────────────────────────────────────── */ .contact-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } .contact-left p { font-size: .95rem; color: var(--sub); line-height: 1.8; margin: 20px 0 36px; max-width: 420px; } .contact-detail { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .contact-detail__row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--border); } .contact-detail__label { font-size: .8rem; font-weight: 700; color: var(--sub); min-width: 72px; padding-top: 2px; } .contact-detail__val { font-size: .9rem; color: var(--text); } .contact-detail__val a { color: var(--teal); } .form-wrap h3 { font-size: 1.1rem; font-weight: 800; color: var(--text); margin-bottom: 6px; letter-spacing: -.02em; } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: .78rem; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: .01em; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px; font-size: .9rem; color: var(--text); background: var(--surface); font-family: inherit; transition: border-color .15s, box-shadow .15s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(42,171,179,.1); } .form-group input.invalid, .form-group select.invalid, .form-group textarea.invalid { border-color: var(--red); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .char-count { font-size: .72rem; color: var(--sub); text-align: right; margin-top: 4px; } .form-note { font-size: .76rem; color: var(--sub); line-height: 1.6; margin-top: 14px; } /* ── Thanks page ────────────────────────────────────────────── */ .thanks { width: 92%; max-width: 600px; margin: 0 auto; padding: 120px 0 80px; } .thanks .h2 { margin-bottom: 16px; } .thanks p { font-size: 1rem; color: var(--sub); line-height: 1.75; margin-bottom: 40px; max-width: 480px; } .thanks__actions { display: flex; gap: 12px; flex-wrap: wrap; } .thanks-next { width: 92%; max-width: var(--max); margin: 0 auto 112px; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .thanks-card { border: 1px solid var(--border); border-radius: 8px; padding: 28px 28px 24px; } .thanks-card__type { font-size: .7rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 10px; display: block; } .thanks-card h3 { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 8px; } .thanks-card p { font-size: .84rem; color: var(--sub); line-height: 1.65; margin-bottom: 18px; } /* ── Page header ────────────────────────────────────────────── */ .page-header { background: var(--navy); padding: 80px 0 72px; } .page-header__wrap { width: 92%; max-width: var(--max); margin: 0 auto; } .page-header h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; color: var(--white); letter-spacing: -.04em; line-height: 1.08; margin: 12px 0 16px; max-width: 720px; } .page-header p { font-size: .97rem; color: rgba(255,255,255,.5); max-width: 500px; line-height: 1.75; } /* ── Footer ─────────────────────────────────────────────────── */ .footer { background: var(--navy-dark); color: rgba(255,255,255,.45); padding: 72px 0 36px; border-top: 1px solid rgba(255,255,255,.06); } .footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; } .footer__brand-name { font-size: .95rem; font-weight: 700; color: var(--white); display: block; margin-bottom: 6px; } .footer__brand-tag { font-size: .78rem; color: rgba(255,255,255,.35); display: block; margin-bottom: 14px; } .footer__brand p { font-size: .82rem; line-height: 1.7; max-width: 240px; } .footer__brand a { display: inline-flex; gap: 6px; align-items: center; color: var(--teal); font-size: .82rem; margin-top: 14px; } .footer__brand a:hover { text-decoration: underline; } .footer__col h4 { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.5); margin-bottom: 16px; } .footer__col ul { list-style: none; } .footer__col li { margin-bottom: 10px; } .footer__col a { font-size: .83rem; color: rgba(255,255,255,.4); text-decoration: none; transition: color .15s; } .footer__col a:hover{ color: var(--white); } .footer__bottom { border-top: 1px solid rgba(255,255,255,.06); padding-top: 28px; font-size: .77rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: rgba(255,255,255,.25); } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 960px) { .risk-grid { grid-template-columns: 1fr; } .risk-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); } .risk-item:last-child { border-bottom: none; } .services-grid { grid-template-columns: 1fr; } .audience-row { grid-template-columns: 1fr; } .audience-item { border-right: none; margin-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding: 36px 0; } .models-grid { grid-template-columns: 1fr; } .about-split { grid-template-columns: 1fr; } .profile-block { position: static; } .svc-row { grid-template-columns: 1fr; gap: 32px; } .contact-split { grid-template-columns: 1fr; gap: 48px; } .footer__top { grid-template-columns: 1fr 1fr; } .thanks-next { grid-template-columns: 1fr; } .committee-row { grid-template-columns: 1fr; gap: 4px; } } /* ── Tablet (768px) ─────────────────────────────────────────── */ @media (max-width: 768px) { .pad { padding: 88px 0; } .hero { padding: 96px 0 80px; } .why-row { gap: 28px; } .svc-row { gap: 40px; } } @media (max-width: 680px) { .nav__menu { display: none; flex-direction: column; position: absolute; top: 66px; left: 0; right: 0; background: var(--navy); padding: 16px 20px; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.08); } .nav__menu.open { display: flex; } .nav__burger { display: block; } .nav__inner { position: relative; } .pad { padding: 72px 0; } .hero { padding: 80px 0 72px; } .hero__h1 { font-size: 2.4rem; } .why-row { grid-template-columns: 1fr; gap: 8px; } .tl-row { grid-template-columns: 1fr; gap: 8px; } .form-row { grid-template-columns: 1fr; } .anchor-tabs { top: 58px; } .anchor-tab { padding: 12px 16px; font-size: .78rem; } .footer__top { grid-template-columns: 1fr; } .thanks { padding: 72px 0 56px; } .thanks-next { margin-bottom: 72px; } .page-header { padding: 60px 0 52px; } } /* ── Resource grid ───────────────────────────────────────────── */ .resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; } .resource-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 16px; } .resource-card__type { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); background: rgba(42,171,179,.08); padding: 4px 10px; border-radius: 4px; align-self: flex-start; } .resource-card__title { font-size: 1.15rem; font-weight: 700; color: var(--text); line-height: 1.3; } .resource-card__desc { font-size: .93rem; color: var(--sub); line-height: 1.65; } .resource-card__details { list-style: none; display: flex; flex-direction: column; gap: 8px; } .resource-card__details li { font-size: .87rem; color: var(--sub); padding-left: 18px; position: relative; } .resource-card__details li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 700; } .resource-card__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } @media (max-width: 600px) { .resource-grid { grid-template-columns: 1fr; } .resource-card__actions { flex-direction: column; } } /* ── v3.6 phase-3 responsive additions (BRAND.md §11) ─────────── */ /* iOS Safari auto-zoom defense: every form input on phones needs 16px+. Targets the public contact form (text/email/tel/select/textarea). */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"], select, textarea { font-size: 16px; } } /* Preemptive table-scroll wrapper. No public page uses a data table today, but if one ever lands (e.g. a comparison grid on services.html), the wrapper keeps it from overflowing the viewport. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Small-phone tightening (≤ 380px). Hero compresses, primary CTAs go full width so they're tap-friendly even on the narrowest devices. */ @media (max-width: 380px) { .wrap { width: 94%; } .hero { padding: 64px 0 56px; } .hero__h1 { font-size: 2rem; } .hero__sub { font-size: 1rem; margin-bottom: 32px; } .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; } .hero__actions .btn { width: 100%; justify-content: center; padding: 14px 22px; } .nav__brand strong { font-size: .95rem; } }