/* Babygest homepage — "The Atlas" concept, scoped under .babygest-home */ /* The theme wraps page content in .site-content > .ast-container (max-width:1240px, display:flex). On the front page only, drop that constraint so .babygest-home's sections go edge-to-edge — each section keeps its text readable-width via its own inner .wrap div instead. Scoped to .site-content: the header and footer use .ast-container too, and stripping their max-width breaks their layout. display:block matters: Astra's desktop flex-row container sizes children by content width, which left a white gap at the right edge. */ body.home .site-content .ast-container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; display: block; } body.home .babygest-home { width: 100%; } @font-face { font-family: 'Babygest Fraunces'; font-weight: 300 700; font-style: normal; font-display: swap; src: url('fonts/fraunces.woff2') format('woff2'); } @font-face { font-family: 'Babygest Public Sans'; font-weight: 300 800; font-style: normal; font-display: swap; src: url('fonts/publicsans.woff2') format('woff2'); } @font-face { font-family: 'Babygest Mono'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('fonts/jetbrainsmono.woff2') format('woff2'); } .babygest-home { --bh-paper: #faf9f6; --bh-paper-raised: #ffffff; --bh-ink: #2a1728; --bh-ink-soft: #6b5568; --bh-ink-faint: #9c8a97; --bh-accent: #c64392; --bh-accent-deep: #631d59; --bh-accent-wash: #fdf1f8; --bh-wayfinding: #0072cb; --bh-line: #e8dce4; --bh-line-strong: #d7c3cf; /* Buttons get their own tokens: --bh-accent-deep flips to a light pink in dark mode (right for headings on a dark ground, wrong as a button fill under near-white text), so button bg/fg must be paired per theme. */ --bh-btn-bg: #631d59; --bh-btn-fg: #fff8fc; --bh-btn-bg-hover: #c64392; background: var(--bh-paper); color: var(--bh-ink); font-family: 'Babygest Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.6; } @media (prefers-color-scheme: dark) { .babygest-home { --bh-paper: #1a0f18; --bh-paper-raised: #241620; --bh-ink: #f6ecf3; --bh-ink-soft: #c2a9bb; --bh-ink-faint: #8a7286; --bh-accent: #e878b8; --bh-accent-deep: #f5b8dd; --bh-accent-wash: #33172a; --bh-wayfinding: #6bb4ee; --bh-line: #3a2534; --bh-line-strong: #4d3242; --bh-btn-bg: #e878b8; --bh-btn-fg: #2a0f27; --bh-btn-bg-hover: #f5b8dd; } } .babygest-home * { box-sizing: border-box; } .babygest-home img { max-width: 100%; display: block; } .babygest-home a { color: inherit; } .babygest-home h1, .babygest-home h2, .babygest-home h3 { font-family: 'Babygest Fraunces', Georgia, serif; font-optical-sizing: auto; text-wrap: balance; margin: 0; color: var(--bh-ink); } .babygest-home .mono { font-family: 'Babygest Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; } .babygest-home .eyebrow { font-family: 'Babygest Mono', ui-monospace, monospace; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bh-accent); } .babygest-home .wrap { max-width: 78rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); } .babygest-home section { position: relative; } .babygest-home a:focus-visible, .babygest-home button:focus-visible { outline: 2px solid var(--bh-wayfinding); outline-offset: 3px; border-radius: 2px; } /* ---------- Reveal-on-scroll ---------- */ /* Progressive enhancement: content is visible by default. The hide-then- reveal treatment only switches on once script.js confirms it's running and sets .bh-js-ready on — so a slow/blocked/never-fired script, or a full-page screenshot tool that never dispatches real scroll/ intersection events, can't leave sections permanently invisible. */ html.bh-js-ready .babygest-home .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } html.bh-js-ready .babygest-home .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { /* Must out-rank the html.bh-js-ready hiding rule above — media queries add no specificity, so the selector has to repeat it. */ html.bh-js-ready .babygest-home .reveal, .babygest-home .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Hero ---------- */ .babygest-home .bh-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 6rem; padding-bottom: 4rem; overflow: hidden; border-bottom: 1px solid var(--bh-line); } .babygest-home .bh-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; pointer-events: none; } .babygest-home .bh-hero-inner { position: relative; z-index: 1; } .babygest-home .bh-hero-eyebrow { margin-bottom: 1.4rem; } .babygest-home .bh-hero h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight: 340; line-height: 1.04; letter-spacing: -0.01em; } .babygest-home .bh-hero h1 span { display: block; overflow: hidden; } .babygest-home .bh-hero h1 span em { font-style: normal; color: var(--bh-accent-deep); } .babygest-home .bh-hero h1 span b { display: inline-block; font-weight: 340; opacity: 0; transform: translateY(100%); animation: bh-line-rise .9s cubic-bezier(.2,.8,.2,1) forwards; } .babygest-home .bh-hero h1 span:nth-child(1) b { animation-delay: .15s; } .babygest-home .bh-hero h1 span:nth-child(2) b { animation-delay: .32s; } .babygest-home .bh-hero h1 span:nth-child(3) b { animation-delay: .49s; } @keyframes bh-line-rise { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .babygest-home .bh-hero h1 span b { opacity: 1; transform: none; animation: none; } } .babygest-home .bh-hero p.lede { max-width: 38rem; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--bh-ink-soft); margin-top: 1.6rem; } .babygest-home .bh-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; } .babygest-home .btn { display: inline-flex; align-items: center; gap: .5em; font-family: 'Babygest Public Sans', sans-serif; font-weight: 600; font-size: 0.95rem; padding: 0.85em 1.5em; border-radius: 3px; text-decoration: none; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; border: 1px solid transparent; } .babygest-home .btn-primary { background: var(--bh-btn-bg); color: var(--bh-btn-fg); } .babygest-home .btn-primary:hover { background: var(--bh-btn-bg-hover); transform: translateY(-1px); } .babygest-home .btn-secondary { background: transparent; border-color: var(--bh-line-strong); color: var(--bh-ink); } .babygest-home .btn-secondary:hover { border-color: var(--bh-accent); color: var(--bh-accent-deep); transform: translateY(-1px); } .babygest-home .bh-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--bh-line); border: 1px solid var(--bh-line); margin-top: 3.6rem; max-width: 44rem; } .babygest-home .bh-hero-stat { background: var(--bh-paper); padding: 1rem 1.1rem; } .babygest-home .bh-hero-stat .num { font-size: 1.5rem; font-weight: 600; color: var(--bh-accent-deep); display: block; } .babygest-home .bh-hero-stat .label { font-size: 0.72rem; color: var(--bh-ink-soft); letter-spacing: 0.02em; } /* ---------- Section headers ---------- */ .babygest-home .bh-section { padding: clamp(4rem, 9vw, 7rem) 0; border-bottom: 1px solid var(--bh-line); } .babygest-home .bh-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3rem; } .babygest-home .bh-section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 380; margin-top: 0.5rem; max-width: 30rem; } .babygest-home .bh-section-head p { max-width: 22rem; color: var(--bh-ink-soft); font-size: 0.95rem; margin: 0; } /* ---------- Topic atlas ---------- */ .babygest-home .bh-topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--bh-line); border-left: 1px solid var(--bh-line); } .babygest-home .bh-topic-card { border-right: 1px solid var(--bh-line); border-bottom: 1px solid var(--bh-line); padding: 1.6rem 1.4rem; text-decoration: none; position: relative; min-height: 9.5rem; display: flex; flex-direction: column; justify-content: space-between; transition: background-color .25s ease; } .babygest-home .bh-topic-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--bh-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); } .babygest-home .bh-topic-card:hover { background: var(--bh-accent-wash); } .babygest-home .bh-topic-card:hover::before { transform: scaleX(1); } .babygest-home .bh-topic-card .count { font-size: 0.78rem; color: var(--bh-wayfinding); } .babygest-home .bh-topic-card h3 { font-family: 'Babygest Public Sans', sans-serif; font-weight: 600; font-size: 1.02rem; line-height: 1.3; margin-top: 1rem; color: var(--bh-ink); transition: color .2s ease; } .babygest-home .bh-topic-card:hover h3 { color: var(--bh-accent-deep); } .babygest-home .bh-topic-card .arrow { font-size: 0.85rem; color: var(--bh-ink-faint); transition: transform .2s ease, color .2s ease; } .babygest-home .bh-topic-card:hover .arrow { color: var(--bh-accent); transform: translateX(3px); } /* ---------- Field notes ---------- */ .babygest-home .bh-notes-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.6rem; } .babygest-home .bh-note-card { text-decoration: none; display: block; } .babygest-home .bh-note-media { aspect-ratio: 16/10; overflow: hidden; border-radius: 4px; background: var(--bh-line); position: relative; } .babygest-home .bh-note-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .babygest-home .bh-note-card:hover .bh-note-media img { transform: scale(1.07); } .babygest-home .bh-note-tag { display: inline-block; margin-top: 1rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bh-wayfinding); } .babygest-home .bh-note-card h3 { font-family: 'Babygest Public Sans', sans-serif; font-weight: 600; font-size: 1.02rem; line-height: 1.35; margin-top: 0.5rem; color: var(--bh-ink); transition: color .2s ease; } .babygest-home .bh-note-card:hover h3 { color: var(--bh-accent-deep); } /* ---------- Coverage ---------- */ .babygest-home .bh-coverage-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--bh-line); border: 1px solid var(--bh-line); margin-bottom: 3.2rem; } .babygest-home .bh-coverage-stat { background: var(--bh-paper-raised); padding: 2rem 1.5rem; } .babygest-home .bh-coverage-stat .num { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; color: var(--bh-accent-deep); display: block; } .babygest-home .bh-coverage-stat .label { color: var(--bh-ink-soft); font-size: 0.85rem; margin-top: 0.3rem; } .babygest-home .bh-lang-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; } .babygest-home .bh-lang-chip { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; background: var(--bh-paper-raised); border: 1px solid var(--bh-line); border-radius: 4px; text-decoration: none; transition: border-color .2s ease, transform .2s ease; } .babygest-home .bh-lang-chip:hover { border-color: var(--bh-accent); transform: translateY(-2px); } .babygest-home .bh-lang-chip.is-current { border-color: var(--bh-accent-deep); background: var(--bh-accent-wash); } .babygest-home .bh-lang-chip .name { font-weight: 600; color: var(--bh-ink); } .babygest-home .bh-lang-chip .code { font-size: 0.68rem; color: var(--bh-ink-faint); letter-spacing: 0.06em; } .babygest-home .bh-lang-chip .count { color: var(--bh-wayfinding); font-size: 0.85rem; } /* ---------- Closing CTA ---------- */ /* The closing band is pinned to the brand plum in BOTH themes: its text colors are fixed light values, so the background can't ride on --bh-accent-deep (that token flips to light pink in dark mode, which made this entire block's text unreadable). */ .babygest-home .bh-closing { background: #631d59; color: #fbeef6; padding: clamp(4.5rem, 10vw, 8rem) 0; border-bottom: none; position: relative; overflow: hidden; } .babygest-home .bh-closing .eyebrow { color: #f0aed4; } .babygest-home .bh-closing h2 { color: #fff9fc; font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 340; max-width: 34rem; } .babygest-home .bh-closing p { color: #ecc7de; max-width: 30rem; margin-top: 1.2rem; font-size: 1.02rem; } .babygest-home .bh-closing .btn-primary { background: #fff9fc; color: #631d59; margin-top: 2.2rem; } .babygest-home .bh-closing .btn-primary:hover { background: #f7d6ea; color: #631d59; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .babygest-home .bh-topic-grid, .babygest-home .bh-notes-grid, .babygest-home .bh-coverage-stats, .babygest-home .bh-lang-row, .babygest-home .bh-hero-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .babygest-home .bh-topic-grid, .babygest-home .bh-notes-grid, .babygest-home .bh-coverage-stats, .babygest-home .bh-lang-row, .babygest-home .bh-hero-stats { grid-template-columns: 1fr; } .babygest-home .bh-section-head { flex-direction: column; align-items: flex-start; } }