/* ══════════════════════════════════════════════════════════════════════════ marketing.css — shared visual system for the front page (/) and keynote page (/reach). CODE_INSTRUCTION §2, §6. RULES ENFORCED HERE (see §6 + §10 tests): • Nunito for ALL text — self-hosted woff2 (public/fonts/), font-display: swap. No Fraunces, no Plus Jakarta Sans, no Georgia on these two pages. • Cream #FDFAF4 ground, ink #1A1410 text. The four energy colours appear ONLY together inside the animation SVG, the icon row, and the ball photo — NEVER as a background, wash, rule, or button. (The energy tokens below exist for the icon row only.) • One ink CTA. Everything else is a text link. ══════════════════════════════════════════════════════════════════════════ */ /* Self-hosted Nunito. Google now ships Nunito latin as one variable woff2 reused across weights, so all four weights point at the same file (smaller, one preload). Preload it in the page . */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); } :root { --cream: #FDFAF4; --ink: #1A1410; --ink-70: rgba(26, 20, 16, 0.70); --ink-60: rgba(26, 20, 16, 0.60); --ink-50: rgba(26, 20, 16, 0.50); --ink-12: rgba(26, 20, 16, 0.12); /* Energy colours — used ONLY together, in the icon row / animation / ball. Never as a background, border, rule, or button fill (§2, enforced by test). */ --spark: #D92010; --glow: #F5D000; --glow-text: #C8960C; /* Glow on light — the amber that reads on cream */ --pulse: #1A8C4E; --flow: #1755B8; --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Fluid tokens — text caps ~1440px; the Living Profile visual keeps growing. */ --im-gap: clamp(16px, 3vw, 28px); --im-hero-visual: clamp(300px, 42vw, 620px); --section-py: clamp(64px, 9vw, 128px); /* 96–128 desktop / 64–80 mobile */ --content-max: 34em; --page-max: 1160px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font); font-weight: 400; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ─── Type scale (§6) ─────────────────────────────────────────────────────── */ h1, h2, h3 { text-wrap: balance; margin: 0; } .h1 { font-weight: 900; font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.02em; } .h2 { font-weight: 900; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.015em; } .eyebrow { font-weight: 700; font-size: 14px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-60); margin: 0 0 12px; } .body { font-weight: 400; font-size: clamp(17px, 1.4vw, 18px); line-height: 1.6; max-width: var(--content-max); } /* Editorial passage — §4.6 three Welsh words: lighter, larger, generous leading. */ .editorial { font-weight: 300; font-size: clamp(22px, 2.4vw, 24px); line-height: 1.6; max-width: 28em; } .micro { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--ink-70); } .proof { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--ink-60); } a { color: var(--ink); } /* ─── Layout scaffolding ──────────────────────────────────────────────────── */ /* §A (03 Sept amend) — one gutter rule site-wide. Desktop/tablet 32px; below 768px clamp(20px, 6vw, 24px). Nothing textual sits within 20px of either edge at 375px (6vw of 375 = 22.5px). Header + footer follow the same gutter. */ .page { max-width: var(--page-max); margin: 0 auto; padding: 0 32px; } @media (max-width: 767px) { .page, .site-header, .site-footer { padding-left: clamp(20px, 6vw, 24px); padding-right: clamp(20px, 6vw, 24px); } } /* Every section on the same alignment (§1: no zigzag). Desktop: text left, visual right; mobile: single column, text then visual. */ /* Vertical only (longhand) — the `padding` shorthand here used to clobber the horizontal gutter that `.page` sets on the same `class="page section"` element (both single-class, .section declared later, so its `0` won). §A fix. */ .section { padding-top: var(--section-py); padding-bottom: var(--section-py); } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 6vw, 72px); align-items: center; } .split > .col-text { max-width: 38em; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split > .col-visual { order: 2; } .split > .col-text { order: 1; } } /* ─── The one CTA (§2) ────────────────────────────────────────────────────── */ .cta-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 clamp(24px, 4vw, 40px); border-radius: 12px; background: var(--ink); color: #FFFFFF; font-family: var(--font); font-weight: 700; font-size: 17px; line-height: 1; text-decoration: none; border: none; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .cta-primary:hover { box-shadow: 0 6px 20px rgba(26, 20, 16, 0.18); } .cta-primary:active { transform: translateY(1px); } .cta-primary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* Text links (every non-CTA action) */ .text-link { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--ink-12); padding-bottom: 1px; font-weight: 700; min-height: 48px; /* tap target */ display: inline-flex; align-items: center; } .text-link:hover { border-bottom-color: var(--ink); } .text-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* ─── Header / footer ─────────────────────────────────────────────────────── */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(16px, 3vw, 24px) 32px; max-width: var(--page-max); margin: 0 auto; } .wordmark { font-weight: 900; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; } .header-actions .text-link, .pill-outline { white-space: nowrap; } @media (max-width: 480px) { .site-header { flex-wrap: wrap; row-gap: 10px; } .header-actions { gap: 14px; font-size: 14px; } .pill-outline { padding: 0 14px; } } .wordmark sup { font-size: 0.5em; font-weight: 700; top: -0.7em; } .header-actions { display: flex; align-items: center; gap: clamp(12px, 3vw, 24px); } .pill-outline { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ink-12); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; } .pill-outline:hover { border-color: var(--ink); } .pill-outline:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .site-footer { padding: clamp(40px, 6vw, 72px) 32px; border-top: 1px solid var(--ink-12); color: var(--ink-60); font-size: 14px; max-width: var(--page-max); margin: 0 auto; } .footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; } .footer-nav a { color: var(--ink-60); text-decoration: none; } .footer-nav a:hover { color: var(--ink); } .footer-contact { margin-bottom: 8px; } .footer-contact a { color: var(--ink-60); text-decoration: none; } .footer-contact a:hover { color: var(--ink); } /* ─── Hero (§4.2 / §5) ──────────────────────────────────────────────────── Desktop: text top-left, proof bottom-left, visual spans the right column. Mobile: H1 → sub → button → micro (text), then the visual, then the proof — so the button is always above the fold and the proof reads last. */ .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "text visual" "proof visual"; gap: clamp(28px, 6vw, 72px) clamp(28px, 6vw, 72px); align-items: center; } .hero-text { grid-area: text; max-width: 38em; } .hero-visual { grid-area: visual; } .hero-proof { grid-area: proof; align-self: start; } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; grid-template-areas: "text" "visual" "proof"; gap: 28px; } .hero-visual { width: 88vw; max-width: 88vw; margin: 0 auto; } } /* ─── The Living Profile visual ───────────────────────────────────────────── */ .lp-visual { width: 100%; max-width: var(--im-hero-visual); margin: 0 auto; } .lp-hero { max-width: clamp(300px, 46vw, 640px); } /* ─── Energy icon row (§4.4) — the only place energy colours sit as fills ──── */ .energy-row { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 48px); flex-wrap: wrap; } .energy-item { display: flex; flex-direction: column; align-items: center; gap: 8px; } .energy-item .name { font-weight: 700; font-size: 15px; } /* ─── Founder photograph (§B, 03 Sept amend) ──────────────────────────────── */ /* 4:5 portrait, full colour, no border, no filter. 320px desktop (max 400 wide), ~72vw on mobile. Gaze points toward the text column (viewer's left). */ .founder-photo { display: block; width: clamp(280px, 34vw, 400px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; margin: 0 auto; } @media (max-width: 860px) { .founder-photo { width: 72vw; max-width: 360px; } } /* /reach founder — a proper 200px 4:5 element beneath the button, photo right of the credentials on desktop, stacked on mobile. */ .reach-proof { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; max-width: 40em; } .reach-proof .reach-credit { flex: 1 1 220px; margin: 0; } .reach-proof .reach-founder-photo { width: 160px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; flex: 0 0 auto; } @media (max-width: 560px) { .reach-proof { flex-direction: column; align-items: flex-start; } .reach-proof .reach-founder-photo { width: 200px; } } /* ─── Motion discipline (§6): the animation is the only moving element. ────── */ @media (prefers-reduced-motion: reduce) { .cta-primary { transition: none; } }