/* ============================================================
Pairent — Cookbook redesign
Type: Comfortaa (display) + Manrope (body)
(free placeholders for the licensed pair below)
Palette: see :root tokens further down
============================================================ */
/* ---------- Fonts ----------
ACTIVE: Comfortaa + Manrope, both free on Google Fonts (OFL).
Loaded via the tag in index.html /
thanks.html / illustrations-preview.html. No @font-face block
needed here — Google Fonts serves the @font-face declarations.
PAID PAIR (commented out below): ITC Ronda + Sofia Pro. These
are the design-intent fonts. Both are desktop-licensed only on
this machine — see LICENSING-TODO.md. The @font-face block is
kept here so it can be reactivated in one step once the web
licenses are purchased.
── How to switch back to ITC Ronda + Sofia Pro ──
1. Buy webfont licenses (see LICENSING-TODO.md for vendors)
2. Drop the .woff2 files into assets/fonts/
3. Uncomment the @font-face block below
4. In the tags in index.html / thanks.html /
illustrations-preview.html, remove the Google Fonts
5. Update --font-display and --font-body in :root below to:
--font-display: "ITC Ronda", "Comfortaa", "Cooper Black",
Georgia, serif;
--font-body: "Sofia Pro", "Manrope", -apple-system,
BlinkMacSystemFont, "Helvetica Neue",
sans-serif;
── How to switch to a different free pair ──
Pick fonts on Google Fonts, copy their snippet into the
three HTML files (replacing the Comfortaa+Manrope ),
then update --font-display / --font-body below to match the
new family names. No CSS @font-face changes needed.
── Source of truth for font choices ──
The active typography is documented in
../design/brand.md at the project root, alongside the palette.
Update both this file and brand.md when changing fonts so the
web and the app stay aligned.
────────────────────────────────────────────────── */
/*
@font-face {
font-family: "ITC Ronda";
src: url("assets/fonts/itc-ronda-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Sofia Pro";
src: url("assets/fonts/sofia-pro-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Sofia Pro";
src: url("assets/fonts/sofia-pro-regular-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Sofia Pro";
src: url("assets/fonts/sofia-pro-medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Sofia Pro";
src: url("assets/fonts/sofia-pro-semibold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Sofia Pro";
src: url("assets/fonts/sofia-pro-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
*/
/* ============================================================
DESIGN TOKENS
============================================================
Two-layer system:
1. PALETTE (--p-*) — raw colors. Edit these (or add a new
[data-palette="..."] block below) to
recolor the entire site.
2. ROLES — semantic aliases the layout uses
(--bg, --text, --accent, etc.). These
should rarely change.
To swap palettes at runtime:
→ Cookbook Cream
→ Pale Sky (default)
→ Bears Peach
============================================================ */
:root,
[data-palette="sky"] {
/* Pale Sky + Sea Green + Amber/Orange (default) */
--p-bg: #bbdef0; /* Pale Sky — page background */
--p-surface: #ffffff; /* white — cards */
--p-surface-alt: #d8eaf3; /* derived — alternating sections */
--p-text: #0e2430; /* derived navy — body text */
--p-text-soft: #4a6475; /* derived — secondary text */
--p-accent: #00a6a6; /* Light Sea Green — secondary chapter accent */
--p-accent-hover: #007f7f;
--p-highlight: #efca08; /* Bright Amber — kicker / hero wash */
--p-cta: #f49f0a; /* Golden Orange — primary CTA / links */
--p-cta-hover: #d05a5a; /* Burnt Rose — CTA hover / mark-3 */
--p-dark-bg: #0e2430; /* dark section background (privacy) */
--p-dark-text: #bbdef0; /* text color on dark sections */
}
[data-palette="cream"] {
/* Cookbook Cream — original cookbook-inspired warmth */
--p-bg: #fbf6ee;
--p-surface: #ffffff;
--p-surface-alt: #f2e9d8;
--p-text: #2d1f17;
--p-text-soft: #6b5448;
--p-accent: #94a87e; /* sage */
--p-accent-hover: #6f8458;
--p-highlight: #e8b547; /* mustard */
--p-cta: #c9603f; /* terracotta */
--p-cta-hover: #a64d30;
--p-dark-bg: #2d1f17;
--p-dark-text: #fbf6ee;
}
[data-palette="bears"] {
/* Bears Peach — softer pastel direction */
--p-bg: #fff9f5;
--p-surface: #ffffff;
--p-surface-alt: #feede5;
--p-text: #3d2820;
--p-text-soft: #7d6358;
--p-accent: #b5c89f; /* soft sage */
--p-accent-hover: #92a87a;
--p-highlight: #f4c57a; /* butter */
--p-cta: #e89b7e; /* coral */
--p-cta-hover: #d27a59;
--p-dark-bg: #3d2820;
--p-dark-text: #fff9f5;
}
/* ----- Semantic role aliases -----------------------------------------
The layout below references these, never the raw --p-* tokens.
Swap a palette and every section retints automatically. */
:root {
--bg: var(--p-bg);
--surface: var(--p-surface);
--surface-alt: var(--p-surface-alt);
--text: var(--p-text);
--text-soft: var(--p-text-soft);
--accent: var(--p-accent);
--accent-hover: var(--p-accent-hover);
--highlight: var(--p-highlight);
--cta: var(--p-cta);
--cta-hover: var(--p-cta-hover);
--dark-bg: var(--p-dark-bg);
--dark-text: var(--p-dark-text);
/* Trio colors — used to give the three how-it-works steps and the three
why-pairent chapters matching per-item accents. Each card in a section
uses its corresponding mark via a --mark local variable set below. */
--mark-1: var(--cta); /* step 01 / chapter 01 — warm golden */
--mark-2: var(--accent); /* step 02 / chapter 02 — cool teal */
--mark-3: var(--cta-hover); /* step 03 / chapter 03 — saturated tiger */
/* Derived overlays — color-mix tracks palette changes automatically */
--focus-ring: color-mix(in srgb, var(--cta) 24%, transparent);
--hero-wash: color-mix(in srgb, var(--highlight) 18%, transparent);
--hairline: color-mix(in srgb, var(--text) 10%, transparent);
--dark-text-soft: color-mix(in srgb, var(--dark-text) 78%, transparent);
/* Type families. ITC Ronda + Sofia Pro are listed first as preferred
fallbacks, so the page upgrades automatically once the @font-face
blocks above are uncommented (i.e. once the licensed fonts are
dropped into assets/fonts/). Until then the browser skips them and
falls through to Comfortaa + Manrope from Google Fonts. */
--font-display: "ITC Ronda", "Comfortaa", "Cooper Black", Georgia, serif;
--font-body: "Sofia Pro", "Manrope", -apple-system, BlinkMacSystemFont,
"Helvetica Neue", sans-serif;
/* Spacing scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
--space-10: 8rem;
/* Radii */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-pill: 999px;
}
/* ---------- Reset ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
svg {
max-width: 100%;
display: block;
}
a {
color: var(--cta);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color 0.15s ease;
}
a:hover {
color: var(--cta-hover);
}
button {
font-family: inherit;
}
.hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
/* ---------- Layout primitives ---------- */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--space-5);
}
.container--narrow {
max-width: 720px;
}
section {
padding: var(--space-9) 0;
}
/* ---------- Type primitives ---------- */
.display {
font-family: var(--font-display);
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.01em;
color: var(--text);
}
.kicker {
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--cta);
}
.lead {
font-size: 1.25rem;
line-height: 1.55;
color: var(--text-soft);
max-width: 36ch;
}
/* ---------- Hero ---------- */
.hero {
min-height: 70vh; /* gives the flexbox room to center vertically */
display: flex;
align-items: center; /* vertical centering of the copy */
justify-content: center;
padding-top: var(--space-8);
padding-bottom: var(--space-8);
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
/* a soft warm wash behind the hero — tracks palette via --hero-wash */
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 50% 0%,
var(--hero-wash) 0%,
transparent 60%
);
pointer-events: none;
}
.hero > .container {
position: relative;
}
.wordmark {
width: clamp(280px, 44vw, 480px);
height: auto;
margin: 0 auto var(--space-7);
color: var(--text);
}
.hero-headline {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.375rem, 4vw, 3rem);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--text);
max-width: 22ch;
margin: 0 auto var(--space-5);
text-wrap: balance;
hyphens: none;
overflow-wrap: break-word;
}
.hero-subhead {
font-size: clamp(1rem, 1.2vw + 0.75rem, 1.1875rem);
line-height: 1.55;
color: var(--text-soft);
max-width: 34ch;
margin: 0 auto var(--space-7);
text-wrap: pretty;
}
/* Liquid-glass panel holding the hero copy, floating over the shader. */
.hero-glass {
max-width: 640px;
margin: 0 auto;
padding: var(--space-7);
border-radius: 28px;
background: rgba(255, 255, 255, 0.22);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 10px 40px rgba(14, 36, 48, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* symmetric panel: drop the trailing margin on the last line of copy */
.hero-glass > :last-child {
margin-bottom: 0;
}
/* keep hyphenated phrases (e.g. "value-aligned") from breaking across lines */
.nowrap {
white-space: nowrap;
}
/* ---------- Email form ---------- */
.email-form {
display: flex;
gap: var(--space-3);
justify-content: center;
flex-wrap: wrap;
max-width: 480px;
margin: 0 auto;
}
.email-form input[type="email"] {
flex: 1;
min-width: 240px;
padding: 16px 22px;
border: 2px solid var(--surface-alt);
border-radius: var(--radius-pill);
font-size: 1rem;
font-family: inherit;
background: var(--surface);
color: var(--text);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.email-form input[type="email"]::placeholder {
color: var(--text-soft);
opacity: 0.7;
}
.email-form input[type="email"]:focus {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.email-form button {
padding: 16px 28px;
background: var(--cta);
color: var(--surface);
border: 2px solid var(--cta);
border-radius: var(--radius-pill);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.email-form button:hover {
background: var(--cta-hover);
border-color: var(--cta-hover);
}
.email-form button:active {
transform: translateY(1px);
}
.form-note {
font-size: 0.9375rem;
color: var(--text-soft);
margin-top: var(--space-4);
}
/* ---------- What Pairent is ---------- */
.what {
background: var(--surface);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.what-header {
text-align: center;
margin-bottom: var(--space-6);
}
.what-header .kicker {
display: block;
}
.what-body {
max-width: 60ch;
margin: 0 auto;
}
.what-body p {
font-size: 1.125rem;
line-height: 1.6;
color: var(--text);
margin-bottom: var(--space-4);
}
.what-body p:last-child {
margin-bottom: 0;
}
/* ---------- How it works ---------- */
.how {
background: var(--surface-alt);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.how-header {
text-align: center;
margin-bottom: var(--space-8);
}
.how-header .kicker {
display: block;
margin-bottom: var(--space-3);
}
.how-header h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.625rem, 3.5vw, 2.75rem);
line-height: 1.05;
color: var(--text);
max-width: 24ch;
margin: 0 auto;
text-wrap: balance;
}
.how-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-7);
max-width: 960px;
margin: 0 auto;
}
.step {
text-align: center;
}
/* Each step gets its own --mark color, inherited by both the numeral
and the spot illustration. */
.step:nth-child(1) { --mark: var(--mark-1); }
.step:nth-child(2) { --mark: var(--mark-2); }
.step:nth-child(3) { --mark: var(--mark-3); }
.step-num {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(4rem, 9vw, 6.5rem);
line-height: 1;
color: var(--mark, var(--cta));
margin-bottom: var(--space-4);
display: block;
}
.step h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.625rem;
line-height: 1;
color: var(--text);
margin-bottom: var(--space-3);
}
.step p {
font-size: 1rem;
color: var(--text-soft);
max-width: 26ch;
margin: 0 auto;
}
/* ---------- Why Pairent (chapters) ---------- */
.why-header {
text-align: center;
margin-bottom: var(--space-8);
}
.why-header .kicker {
display: block;
margin-bottom: var(--space-3);
}
.why-header h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.75rem, 4vw, 3.25rem);
line-height: 1.05;
color: var(--text);
max-width: 22ch;
margin: 0 auto;
text-wrap: balance;
}
.chapters {
display: grid;
gap: var(--space-7);
max-width: 920px;
margin: 0 auto;
}
.chapter {
display: grid;
grid-template-columns: 140px 1fr;
gap: var(--space-6);
align-items: start;
padding: var(--space-6);
background: var(--surface);
border-radius: var(--radius-lg);
border: 1px solid var(--surface-alt);
}
.chapter:nth-child(even) {
background: var(--surface-alt);
border-color: transparent;
}
/* Each chapter gets its own --mark color, mirroring the how-it-works step
at the same index so the two sections read as paired. */
.chapter:nth-child(1) { --mark: var(--mark-1); }
.chapter:nth-child(2) { --mark: var(--mark-2); }
.chapter:nth-child(3) { --mark: var(--mark-3); }
.chapter-marker {
align-self: center;
display: flex;
justify-content: center;
}
.chapter-body h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.05;
color: var(--text);
margin-bottom: var(--space-3);
text-wrap: balance;
}
.chapter-body p {
font-size: 1.0625rem;
color: var(--text-soft);
max-width: 50ch;
}
/* ---------- Privacy note ---------- */
.privacy {
background: var(--dark-bg);
color: var(--dark-text);
}
.privacy .container {
max-width: 760px;
text-align: center;
}
.privacy .kicker {
color: var(--highlight);
display: block;
margin-bottom: var(--space-4);
}
.privacy h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 3.5vw, 2.75rem);
line-height: 1.1;
color: var(--dark-text);
margin-bottom: var(--space-5);
text-wrap: balance;
}
.privacy p {
font-size: 1.125rem;
line-height: 1.6;
color: var(--dark-text-soft);
max-width: 50ch;
margin: 0 auto;
}
/* ---------- FAQ ---------- */
.faq .container {
max-width: 760px;
}
.faq-header {
text-align: center;
margin-bottom: var(--space-8);
}
.faq-header .kicker {
display: block;
margin-bottom: var(--space-3);
}
.faq-header h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.75rem, 4vw, 3.25rem);
line-height: 1.05;
color: var(--text);
}
.faq-list {
display: grid;
gap: var(--space-2);
}
.faq-item {
background: var(--surface);
border: 1px solid var(--surface-alt);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
transition: border-color 0.15s ease;
}
.faq-item:hover {
border-color: var(--cta);
}
.faq-question {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.375rem;
line-height: 1.15;
color: var(--text);
margin-bottom: var(--space-3);
}
.faq-answer {
font-size: 1rem;
color: var(--text-soft);
line-height: 1.6;
}
/* ---------- Final CTA ---------- */
.cta {
background: var(--surface-alt);
text-align: center;
border-top: 1px solid var(--hairline);
padding-top: var(--space-4); /* tight — minimal space above "Start small." */
padding-bottom: var(--space-6); /* hug the note; no big gap before the footer */
}
.cta h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.25rem, 8vw, 4.5rem);
line-height: 1;
color: var(--text);
margin-top: 0;
margin-bottom: var(--space-4); /* tight gap down to the email field */
}
.cta-note {
font-size: 1.125rem;
color: var(--text-soft);
margin-top: 0; /* sits under the heading (its margin sets the gap) */
margin-bottom: var(--space-5); /* gap down to the email field */
max-width: none; /* single line on desktop (wraps naturally on small screens) */
margin-left: auto;
margin-right: auto;
text-wrap: balance;
}
/* ---------- Footer ---------- */
footer {
padding: var(--space-7) 0;
background: var(--bg);
border-top: 1px solid var(--surface-alt);
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-5);
}
.footer-brand {
display: flex;
align-items: center;
gap: var(--space-3);
}
.footer-mark {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.5rem;
color: var(--text);
}
.footer-links {
display: flex;
gap: var(--space-7);
}
.footer-links a {
color: var(--text);
text-decoration: none;
font-size: 0.9375rem;
text-underline-offset: 5px;
text-decoration-thickness: 2px;
}
.footer-links a:hover {
color: var(--text);
text-decoration: underline;
}
.footer-copy {
color: var(--text-soft);
font-size: 0.875rem;
}
/* ---------- Spot illustrations ----------
Hand-drawn PNGs rendered via CSS mask-image so they retint with the
active palette. The PNG provides only the alpha channel (it's
black-on-transparent line art); the on-page color comes from
`background: currentColor`. To replace an illustration with new
artwork, drop a new file at the same path — no HTML/CSS changes needed.
The footer flourish is still an ![]()
element with stroke="currentColor"
on the SVG, not part of this system. */
.spot {
display: block;
background: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Step + chapter base sizes set the height; per-image classes set width
to match each PNG's natural aspect ratio, so the artwork fills its box
without distortion. Update width/height when swapping artwork. */
.spot--hero {
width: 140px;
height: 76px;
margin: 0 auto var(--space-5);
color: var(--cta);
-webkit-mask-image: url("assets/images/illustrations/hero.png");
mask-image: url("assets/images/illustrations/hero.png");
}
.spot--step {
/* All three step illustrations live in identically sized boxes so the
numerals beneath them line up across the row. Per-step variants only
change the mask-image and the mask-size (which controls how much of
the box the artwork fills — used to scale individual icons up/down
for visual balance without breaking the alignment grid).
mask-position: center bottom keeps each illustration flush with the
bottom of the box, so the gap to the numeral below is identical. */
width: 152px;
height: 96px;
margin: 0 auto var(--space-3);
color: var(--mark, var(--cta));
-webkit-mask-position: center bottom;
mask-position: center bottom;
}
.spot--capture {
-webkit-mask-image: url("assets/images/illustrations/step-01-capture.png");
mask-image: url("assets/images/illustrations/step-01-capture.png");
-webkit-mask-size: 75px 72px;
mask-size: 75px 72px;
}
.spot--reflect {
-webkit-mask-image: url("assets/images/illustrations/step-02-reflect.png");
mask-image: url("assets/images/illustrations/step-02-reflect.png");
-webkit-mask-size: 91px 58px;
mask-size: 91px 58px;
}
.spot--grow {
-webkit-mask-image: url("assets/images/illustrations/step-03-grow.png");
mask-image: url("assets/images/illustrations/step-03-grow.png");
-webkit-mask-size: 56px 96px;
mask-size: 56px 96px;
}
.spot--chapter {
/* Chapter marker column is 140px wide on desktop. Each per-image class
below sets a width that fits inside that with some padding, and
derives a height from the natural aspect ratio. Color comes from the
--mark variable set by .chapter:nth-child(n). */
color: var(--mark, var(--cta));
}
.spot--chapter-01 {
/* 480x470 -> 1.02:1 (~square) */
width: 96px;
height: 94px;
-webkit-mask-image: url("assets/images/illustrations/chapter-01.png");
mask-image: url("assets/images/illustrations/chapter-01.png");
}
.spot--chapter-02 {
/* 493x599 -> 0.82:1 (tall) */
width: 78px;
height: 95px;
-webkit-mask-image: url("assets/images/illustrations/chapter-02.png");
mask-image: url("assets/images/illustrations/chapter-02.png");
}
.spot--chapter-03 {
/* 721x355 -> 2.03:1 (wide) */
width: 120px;
height: 59px;
-webkit-mask-image: url("assets/images/illustrations/chapter-03.png");
mask-image: url("assets/images/illustrations/chapter-03.png");
}
.spot--footer {
/* The footer flourish is still a real ![]()
tag with an inline SVG
(not a mask-image span like the other spots), so we need to cancel
out the `background: currentColor` inherited from the .spot base
rule — otherwise the background tints the ![]()
's transparent areas. */
width: 40px;
height: 24px;
color: var(--accent);
background: transparent;
}
/* ---------- Responsive ---------- */
@media (max-width: 760px) {
section {
padding: var(--space-8) 0;
}
.how-steps {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.chapter {
grid-template-columns: 1fr;
gap: var(--space-3);
text-align: center;
padding: var(--space-6) var(--space-5);
}
.chapter-body p {
margin: 0 auto;
}
.email-form {
flex-direction: column;
}
.email-form input[type="email"] {
min-width: 100%;
}
.email-form button {
width: 100%;
}
.footer-content {
flex-direction: column;
text-align: center;
}
.footer-links {
flex-wrap: wrap;
justify-content: center;
gap: var(--space-5);
}
}
@media (max-width: 560px) {
.container {
padding: 0 var(--space-4);
}
.wordmark {
width: min(260px, 72vw);
margin-bottom: var(--space-6);
}
.hero {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.hero-glass {
padding: var(--space-6) var(--space-5);
}
.hero-headline {
max-width: 100%;
text-wrap: pretty;
}
.hero-subhead {
max-width: 100%;
}
.how-header h2,
.why-header h2,
.faq-header h2 {
max-width: 100%;
}
}
/* ---------- Thanks page ---------- */
.thanks {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-9) 0;
}
.thanks .wordmark {
margin-bottom: var(--space-7);
}
.thanks h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.25rem, 6vw, 4rem);
line-height: 1;
color: var(--text);
margin-bottom: var(--space-5);
max-width: 18ch;
margin-left: auto;
margin-right: auto;
text-wrap: balance;
}
.thanks p {
font-size: 1.1875rem;
color: var(--text-soft);
max-width: 36ch;
margin: 0 auto var(--space-6);
}
/* ---------- Legal pages (privacy, terms) ---------- */
.legal {
padding: var(--space-8) 0 var(--space-9);
}
.legal-home {
display: block;
text-decoration: none;
margin-bottom: var(--space-7);
}
.legal-wordmark {
width: clamp(160px, 28vw, 240px);
height: auto;
}
.legal h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.75rem, 4vw, 2.75rem);
line-height: 1.05;
color: var(--text);
margin-bottom: var(--space-3);
}
.legal-updated {
font-size: 0.875rem;
color: var(--text-soft);
margin-bottom: var(--space-7);
}
.legal h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
line-height: 1.1;
color: var(--text);
margin-top: var(--space-6);
margin-bottom: var(--space-3);
}
.legal p {
font-size: 1rem;
line-height: 1.65;
color: var(--text-soft);
margin-bottom: var(--space-4);
}
.legal a {
color: var(--cta);
}
.legal a:hover {
color: var(--cta-hover);
}
.legal-back {
margin-top: var(--space-7);
}
.legal-back a {
font-weight: 500;
}
/* ---------- Research page (extends .legal) ---------- */
.research .kicker {
margin-bottom: var(--space-2);
}
.research h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2rem, 1.4rem + 2.6vw, 2.875rem);
line-height: 1.05;
margin-bottom: var(--space-4);
}
.research .lead {
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
line-height: 1.55;
color: var(--text-soft);
max-width: none;
margin-bottom: var(--space-7);
}
.research h2 {
margin-top: var(--space-7);
}
.research h2#references {
margin-top: var(--space-8);
padding-top: var(--space-5);
border-top: 1px solid var(--hairline);
}
.research .ref {
font-size: 0.875rem;
line-height: 1.55;
color: var(--text-soft);
margin-bottom: var(--space-3);
scroll-margin-top: var(--space-5);
}
.research .ref a {
word-break: break-all;
}
/* Inline citation with hover popover */
.cite {
position: relative;
display: inline;
}
.cite > a {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
color: var(--cta);
cursor: help;
}
.cite > a:hover,
.cite > a:focus {
color: var(--cta-hover);
}
.cite-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: min(340px, 88vw);
background: var(--text);
color: var(--surface);
padding: 0.625rem 0.875rem;
border-radius: 6px;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 400;
font-style: normal;
line-height: 1.5;
text-align: left;
white-space: normal;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
pointer-events: none;
z-index: 10;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.cite-tooltip em {
font-style: italic;
}
.cite-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--text);
}
.cite:hover .cite-tooltip,
.cite:focus-within .cite-tooltip {
opacity: 1;
visibility: visible;
}
/* ---------- About page (extends .legal) ---------- */
.about .kicker {
margin-bottom: var(--space-2);
}
.about h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.25rem, 1.6rem + 3vw, 3.25rem);
line-height: 1.05;
margin-bottom: var(--space-4);
}
.about .lead {
font-size: clamp(1.125rem, 1rem + 0.4vw, 1.35rem);
line-height: 1.5;
color: var(--text);
margin-bottom: var(--space-5);
}
.about-photo {
margin: var(--space-5) auto var(--space-7);
max-width: 52.5%;
}
.about-photo img {
width: 100%;
height: auto;
border-radius: var(--radius-md);
display: block;
}
.about-photo figcaption {
margin-top: var(--space-2);
font-size: 0.9rem;
color: var(--text-soft);
text-align: center;
}
.about-sign {
margin-top: var(--space-6);
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--text);
}
.privacy-founder-link {
display: inline-block;
margin-top: var(--space-4);
font-weight: 500;
color: var(--dark-text);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.privacy-founder-link:hover {
opacity: 0.8;
}
/* ---------- Credo page (extends .legal) ---------- */
.philosophy .kicker {
margin-bottom: var(--space-2);
}
.philosophy h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2rem, 1.4rem + 2.6vw, 2.875rem);
line-height: 1.05;
margin-bottom: var(--space-4);
}
.philosophy .lead {
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
line-height: 1.55;
color: var(--text-soft);
max-width: none;
margin-bottom: var(--space-6);
}
/* The two parts ("What we believe" / "How we build") render from CREDO.md
as h2s inside .philosophy-body; give them a top rule so they read as distinct
movements. Each belief/principle is an h3. */
.philosophy-body h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.1;
color: var(--text);
margin-top: var(--space-8);
margin-bottom: var(--space-2);
padding-top: var(--space-5);
border-top: 1px solid var(--hairline);
}
.philosophy-body h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.25rem, 2.4vw, 1.6rem);
line-height: 1.15;
color: var(--text);
margin-top: var(--space-6);
margin-bottom: var(--space-3);
text-wrap: balance;
}
.philosophy-body p {
font-size: 1.0625rem;
line-height: 1.65;
color: var(--text-soft);
margin-bottom: var(--space-4);
}
.philosophy-body hr {
border: none;
border-top: 1px solid var(--hairline);
margin: var(--space-7) 0 var(--space-5);
}
.philosophy-body > p:last-child {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--text);
}
/* ---------- Blog index (extends .legal) ---------- */
.blog-index .kicker {
margin-bottom: var(--space-2);
}
.blog-index h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2rem, 1.4rem + 2.6vw, 2.875rem);
line-height: 1.05;
margin-bottom: var(--space-3);
}
.blog-index .lead {
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
line-height: 1.55;
color: var(--text-soft);
max-width: none;
margin-bottom: var(--space-7);
}
.post-list {
list-style: none;
display: grid;
gap: var(--space-2);
}
.post-list-item {
background: var(--surface);
border: 1px solid var(--surface-alt);
border-radius: var(--radius-md);
transition: border-color 0.15s ease;
}
.post-list-item:hover {
border-color: var(--cta);
}
.post-list-link {
display: block;
padding: var(--space-5) var(--space-6);
text-decoration: none;
color: inherit;
}
.post-list-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.5rem;
line-height: 1.15;
color: var(--text);
margin-bottom: var(--space-2);
display: flex;
align-items: baseline;
gap: var(--space-3);
flex-wrap: wrap;
}
.post-list-date {
font-size: 0.875rem;
color: var(--text-soft);
margin-bottom: var(--space-2);
}
.post-list-desc {
font-size: 1rem;
line-height: 1.55;
color: var(--text-soft);
}
.post-badge,
.post-draft {
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--surface);
background: var(--cta-hover);
padding: 2px 8px;
border-radius: var(--radius-pill);
}
.post-draft {
display: inline-block;
margin-bottom: var(--space-4);
}
/* ---------- Blog post (extends .legal) ---------- */
.post .kicker {
margin-bottom: var(--space-2);
}
.post h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
line-height: 1.05;
margin-bottom: var(--space-3);
text-wrap: balance;
}
.post-meta {
font-size: 0.9375rem;
color: var(--text-soft);
margin-bottom: var(--space-7);
}
.post-meta-sep {
margin: 0 var(--space-2);
}
.post-body h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.375rem, 2.6vw, 1.875rem);
line-height: 1.1;
color: var(--text);
margin-top: var(--space-7);
margin-bottom: var(--space-3);
text-wrap: balance;
}
.post-body h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.125rem, 2vw, 1.5rem);
line-height: 1.15;
color: var(--text);
margin-top: var(--space-6);
margin-bottom: var(--space-3);
}
.post-body p {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--text);
margin-bottom: var(--space-5);
}
.post-body ul,
.post-body ol {
margin: 0 0 var(--space-5) var(--space-6);
color: var(--text);
}
.post-body li {
margin-bottom: var(--space-2);
line-height: 1.65;
}
.post-body blockquote {
margin: var(--space-6) 0;
padding: var(--space-2) 0 var(--space-2) var(--space-5);
border-left: 3px solid var(--cta);
color: var(--text-soft);
font-style: italic;
}
.post-body blockquote p {
color: var(--text-soft);
}
.post-body a {
color: var(--cta);
}
.post-body a:hover {
color: var(--cta-hover);
}
.post-body hr {
border: none;
border-top: 1px solid var(--hairline);
margin: var(--space-7) 0;
}
.post-body code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.9em;
background: var(--surface-alt);
padding: 0.1em 0.35em;
border-radius: 4px;
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid var(--hairline);
}
.post-tag {
font-size: 0.8125rem;
color: var(--text-soft);
background: var(--surface-alt);
padding: 4px 12px;
border-radius: var(--radius-pill);
}
/* ---------- Global site header ---------- */
/* Floating monogram: fixed to the viewport top-left so it stays in the same
place on scroll (always visible). It sits over the nav bar initially, then
floats over the page as you scroll. */
/* Brand wordmark / monogram (fixed, top-left). Base (all pages, mobile,
reduced-motion, no-JS) = the small "p" mark. On the home page (desktop) JS
expands it: the "p" renders at full wordmark size straddling the nav bar,
"airent" is placed in document flow (scrolls away with the page) while the
fixed "p" stays, then the "p" shrinks in place. Knobs: --wm-rest / --wm-mark. */
:root {
--wm-rest: clamp(70px, 11vw, 120px); /* full wordmark size on the home hero */
--wm-mark: 78px; /* small / collapsed mark size */
}
.site-wordmark {
position: fixed;
top: var(--space-3);
left: var(--space-5);
z-index: 100;
display: inline-flex;
line-height: 0.82;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--wm-mark);
color: var(--text); /* filled fallback if text-stroke is unsupported */
text-decoration: none;
-webkit-text-stroke: 1.4px var(--text);
-webkit-text-fill-color: transparent;
transition: color 0.25s ease, -webkit-text-stroke-color 0.25s ease;
}
/* Over a dark section (marked data-nav-dark) the fixed monogram flips to the
pale ink so it stays visible. Toggled by the header script on scroll. */
.site-wordmark.on-dark {
color: var(--dark-text);
-webkit-text-stroke-color: var(--dark-text);
}
.wm-p {
display: inline-block;
transform-origin: left center; /* shrink in place, centered on the seam */
will-change: transform;
}
/* "airent": a separate element JS places in document flow on the home hero
(desktop) so it scrolls away with the page. Hidden by default. */
.wm-tail {
display: none;
z-index: 99;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--wm-rest);
line-height: 0.82;
color: var(--text);
white-space: nowrap;
-webkit-text-stroke: 1.4px var(--text);
-webkit-text-fill-color: transparent;
}
.site-wordmark--home.is-expanded {
font-size: var(--wm-rest);
}
/* Nav bar: does NOT float; scrolls with the page. Distinct background from
the pale-sky page (swap `--surface` below for another token to recolor). */
.site-header {
padding: var(--space-4) 0;
background: var(--highlight); /* palette Bright Amber — swap token to retint */
border-bottom: 1px solid var(--hairline);
}
.site-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-6);
min-height: 44px;
}
/* Navy links on the yellow bar; underline appears on hover / current page. */
.site-nav-link {
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 500;
color: var(--text);
text-decoration: none;
text-underline-offset: 5px;
text-decoration-thickness: 2px;
}
.site-nav-link:hover,
.site-nav-link[aria-current="page"] {
color: var(--text);
text-decoration: underline;
}
/* ---------- Global footer (extends the base `footer` rules) ---------- */
.footer-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-5);
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-6);
justify-content: flex-end;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid var(--hairline);
}
.footer-social {
display: flex;
gap: var(--space-4);
}
.footer-social a {
color: var(--text-soft);
line-height: 0;
transition: color 0.15s ease;
}
.footer-social a:hover {
color: var(--cta);
}
.footer-social svg {
width: 20px;
height: 20px;
fill: currentColor;
display: block;
}
@media (max-width: 560px) {
.site-nav {
justify-content: center;
gap: var(--space-4);
}
.site-nav-link {
font-size: 0.875rem;
}
.footer-top,
.footer-bottom {
flex-direction: column;
text-align: center;
}
.footer-links {
justify-content: center;
}
}
/* ---------- Hero animated shader background ---------- */
/* Fallback / no-JS / no-WebGL: a soft brand gradient sits behind the canvas,
so the hero is always branded even if the shader never runs. */
.hero {
background: linear-gradient(
150deg,
var(--bg) 0%,
var(--surface-alt) 58%,
color-mix(in srgb, var(--highlight) 26%, var(--surface-alt)) 100%
);
}
/* The shader replaces the old radial hero wash. */
.hero::before {
content: none;
}
.hero-shader {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
border: 0;
z-index: 0;
}
.hero > .container {
z-index: 1;
}
/* ---------- Waitlist strip ---------- */
/* Its own navy band between the hero and "What Pairent is". Marked
`data-nav-dark` in the markup so the fixed monogram flips to pale ink here. */
.waitlist-strip {
background: var(--dark-bg);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
padding: var(--space-7) 0;
text-align: center;
}
/* teal button that warms to orange on hover (waitlist strip + final CTA) */
.waitlist-strip .email-form button,
.cta .email-form button {
background: var(--accent);
border-color: var(--accent);
}
.waitlist-strip .email-form button:hover,
.cta .email-form button:hover {
background: var(--cta);
border-color: var(--cta);
}
/* input + note adapted to read on the dark band */
.waitlist-strip .email-form input[type="email"] {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(187, 222, 240, 0.4);
color: var(--dark-text);
}
.waitlist-strip .email-form input[type="email"]::placeholder {
color: var(--dark-text);
opacity: 0.6;
}
.waitlist-strip .email-form input[type="email"]:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.waitlist-strip .form-note {
color: var(--dark-text-soft);
}
/* ---------- App preview (staggered two-screen stack) ---------- */
.showcase {
background: linear-gradient(
160deg,
var(--surface-alt),
color-mix(in srgb, var(--accent) 12%, var(--surface-alt))
);
padding: var(--space-9) 0;
text-align: center;
overflow: hidden;
}
.showcase-header {
margin-bottom: var(--space-8);
}
.showcase-header h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2.25rem);
margin: var(--space-2) 0 0;
}
.phone-stack {
position: relative;
width: min(520px, 92vw);
height: min(600px, 122vw);
margin: 0 auto;
}
.phone-card {
position: absolute;
width: min(250px, 46%);
border-radius: 26px;
overflow: hidden;
background: #fff;
box-shadow: 0 30px 60px -22px rgba(14, 36, 48, 0.42),
0 8px 20px rgba(14, 36, 48, 0.12);
}
.phone-card img {
display: block;
width: 100%;
height: auto;
}
.phone-card--back {
top: 28px;
left: 50%;
transform: translateX(-104%) rotate(-6deg);
z-index: 1;
}
.phone-card--front {
top: 0;
left: 50%;
transform: translateX(4%) rotate(6deg);
z-index: 2;
}
/* ---------- FAQ accordion ---------- */
.faq-item {
padding: 0;
overflow: hidden;
}
.faq-q {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
width: 100%;
padding: var(--space-5) var(--space-6);
background: none;
border: 0;
text-align: left;
cursor: pointer;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.375rem;
line-height: 1.2;
color: var(--text);
}
.faq-icon {
flex-shrink: 0;
width: 10px;
height: 10px;
margin-right: 4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.3s ease;
}
.faq-item.is-open .faq-icon {
transform: rotate(-135deg);
}
.faq-a {
display: grid;
grid-template-rows: 1fr; /* open by default so no-JS shows every answer */
}
.faq-a-inner {
overflow: hidden;
}
.faq-a-text {
margin: 0;
padding: 0 var(--space-6) var(--space-5);
font-size: 1rem;
line-height: 1.6;
color: var(--text-soft);
}
/* Interactive (JS) mode: collapse all but the open item, animated. */
.faq-list.js-accordion .faq-a {
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s ease;
}
.faq-list.js-accordion .faq-item.is-open .faq-a {
grid-template-rows: 1fr;
}
.faq-list:not(.js-accordion) .faq-icon {
display: none;
}