/* Familyful — familyful.world One stylesheet. Locked palette, two faces, no framework. */ /* ---------- fonts ---------- */ @font-face { font-family: "Familyful"; src: url("/assets/fonts/familyful-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ---------- tokens ---------- */ :root { --ink: #1C2320; --sage: #4F6B4A; --sage-deep: #3C5238; --sage-light: #8FA888; --sage-wash: #E9EFE7; --marigold: #E0A32E; --clay: #AF5439; --cream: #FAF6EF; --white: #FFFDF9; --stone: #756E62; --stone-light: #E3DDD1; /* Familyful has no glyph for & — – " " … % # * +, so those fall through. Figtree sits next in the stack to keep the fallback on-brand rather than dropping to whatever system-ui happens to be. */ --display: "Familyful", "Figtree", system-ui, sans-serif; --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --wrap: 68rem; --measure: 34rem; --r: 18px; --pad: clamp(1.15rem, 4vw, 2rem); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: clamp(1rem, .96rem + .22vw, 1.11rem); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } /* ---------- type ---------- */ /* Display type = Familyful, always all-caps (the ffcaps filter applies the double-L rule). Card and sub-headings stay in Figtree — long strings of the hand font get heavy and hurt scanning. */ h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.14; letter-spacing: .005em; margin: 0 0 .5em; } h1 { font-size: clamp(1.85rem, 1.15rem + 2.9vw, 3.15rem); max-width: 18ch; } h2 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.2rem); max-width: 22ch; } h3 { font-family: var(--body); font-weight: 700; font-size: 1.06rem; line-height: 1.35; letter-spacing: -.005em; margin: 0 0 .55em; } .prose h2, .prose h3 { max-width: none; } .prose h3 { font-size: 1.12rem; } p { margin: 0 0 1.15em; max-width: var(--measure); } a { color: var(--sage-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { color: var(--clay); } strong { font-weight: 700; } em { font-style: italic; } .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); margin: 0 0 .8rem; } .lede { font-size: clamp(1.08rem, 1rem + .5vw, 1.35rem); color: var(--stone); max-width: 38rem; } .tiny { font-size: .82rem; color: var(--stone); } /* ---------- layout ---------- */ .wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; } .narrow { max-width: 44rem; } section { padding-block: clamp(3rem, 8vw, 5.5rem); } section + section { border-top: 1px solid var(--stone-light); } section.tint { background: var(--sage-wash); border-top: none; } section.ink { background: var(--ink); color: var(--cream); border-top: none; } section.ink h1, section.ink h2, section.ink h3 { color: var(--cream); } section.ink p { color: var(--stone-light); } section.ink a { color: var(--marigold); } .grid { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); } @media (min-width: 46rem) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); } } .card { background: var(--white); border: 1px solid var(--stone-light); border-radius: var(--r); padding: clamp(1.3rem, 3vw, 1.9rem); } .card p:last-child { margin-bottom: 0; } /* ---------- skip link ---------- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--ink); color: var(--cream); padding: .7rem 1.1rem; border-radius: 0 0 10px 0; } .skip:focus { left: 0; } :where(a, button, input, summary):focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; border-radius: 4px; } /* ---------- header ---------- */ header.site { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--stone-light); } header.site .bar { display: flex; align-items: center; gap: 1rem; padding-block: .7rem; justify-content: space-between; } header.site .brand { display: inline-flex; align-items: center; } header.site .brand img { width: clamp(130px, 22vw, 175px); } nav.main ul { display: flex; gap: clamp(.9rem, 2.4vw, 1.7rem); list-style: none; margin: 0; padding: 0; align-items: center; } nav.main a { font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; } nav.main a:hover, nav.main a[aria-current="page"] { color: var(--sage); text-decoration: underline; text-underline-offset: 5px; } .btn { display: inline-block; font-weight: 700; font-size: .95rem; background: var(--sage); color: var(--cream); border: 2px solid var(--sage); padding: .62em 1.15em; border-radius: 999px; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; } .btn:hover { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--cream); } .btn.ghost { background: transparent; color: var(--sage-deep); } .btn.ghost:hover { background: var(--sage-wash); color: var(--sage-deep); } .btn.lg { font-size: 1.02rem; padding: .78em 1.5em; } .btn.on-ink { background: var(--marigold); border-color: var(--marigold); color: var(--ink); } .btn.on-ink:hover { background: #C98F27; border-color: #C98F27; color: var(--ink); } .actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.6rem 0 1rem; } /* mobile nav */ .menu-btn { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; } .menu-btn svg { width: 26px; height: 26px; stroke: var(--ink); } @media (max-width: 52rem) { .menu-btn { display: block; order: 3; } nav.main { display: none; width: 100%; order: 4; } nav.main.open { display: block; padding-bottom: .9rem; } nav.main ul { flex-direction: column; align-items: flex-start; gap: .85rem; } header.site .bar { flex-wrap: wrap; gap: .55rem; } header.site .bar > .btn { order: 2; font-size: .82rem; padding: .5em .85em; } header.site .brand img { width: 118px; } } @media (max-width: 25rem) { header.site .bar > .btn { font-size: .76rem; padding: .45em .7em; } } /* ---------- hero ---------- */ .hero { padding-block: clamp(3rem, 9vw, 6rem) clamp(2.4rem, 6vw, 4rem); } .hero h1 { max-width: 17ch; } .promise { font-size: .92rem; color: var(--stone); font-style: italic; margin-top: .4rem; } /* ---------- email capture ---------- */ .capture { background: var(--sage-wash); border-radius: var(--r); padding: clamp(1.4rem, 4vw, 2.4rem); } section.ink .capture { background: #26302B; } .capture h2 { margin-bottom: .35em; } form.signup { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; max-width: 30rem; } form.signup input[type="email"] { flex: 1 1 15rem; font: inherit; font-size: 1rem; padding: .68em .9em; border: 2px solid var(--stone-light); border-radius: 999px; background: var(--white); color: var(--ink); } form.signup input[type="email"]::placeholder { color: var(--stone); } form.signup input[type="email"]:focus { border-color: var(--sage); outline: none; } .hp { position: absolute; left: -9999px; } /* ---------- lists ---------- */ ul.plain { list-style: none; padding: 0; margin: 0; } ul.ticks { list-style: none; padding: 0; margin: 0 0 1.2em; max-width: var(--measure); } ul.ticks li { position: relative; padding-left: 1.6em; margin-bottom: .55em; } ul.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: .7em; height: .7em; border-radius: 50%; background: var(--marigold); } .stack > * + * { margin-top: 1.1rem; } /* ---------- steps ---------- */ ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; } ol.steps li { counter-increment: s; position: relative; padding-left: 3rem; margin-bottom: 1.5rem; } ol.steps li::before { content: counter(s); position: absolute; left: 0; top: -.1em; font-family: var(--display); font-size: 1.5rem; color: var(--sage); } /* ---------- prose (legal, blog) ---------- */ .prose { max-width: 42rem; } .prose h2 { margin-top: 2.2em; } .prose h3 { margin-top: 1.8em; } .prose table { border-collapse: collapse; width: 100%; font-size: .93rem; margin: 1.2em 0; } .prose th, .prose td { text-align: left; padding: .6em .7em; border-bottom: 1px solid var(--stone-light); vertical-align: top; } .prose th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--stone); } .prose code { background: var(--sage-wash); padding: .1em .4em; border-radius: 5px; font-size: .9em; } .prose blockquote { margin: 1.4em 0; padding: .1em 0 .1em 1.2em; border-left: 3px solid var(--marigold); color: var(--stone); } /* ---------- footer ---------- */ footer.site { background: var(--ink); color: var(--stone-light); padding-block: clamp(2.6rem, 6vw, 4rem); } footer.site a { color: var(--cream); text-decoration: none; } footer.site a:hover { color: var(--marigold); text-decoration: underline; } footer.site img.mark { width: 172px; margin-bottom: .9rem; } footer.site .cols { display: grid; gap: 2rem; } @media (min-width: 46rem) { footer.site .cols { grid-template-columns: 1.3fr 1fr 1fr; } } footer.site h3 { font-family: var(--body); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-light); margin-bottom: .8rem; } footer.site ul { list-style: none; padding: 0; margin: 0; } footer.site li { margin-bottom: .45rem; } /* 2026-09-13: the bare familyful.world wordmark line under the tagline, every page. Body face, not the display face - the display face is UPPERCASE and a shouted domain reads as an advert. */ footer.site .domain { font-family: var(--body); font-size: .9rem; letter-spacing: .06em; color: var(--cream); margin: -.4rem 0 1rem; } footer.site .legal { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid #2E3833; font-size: .82rem; } footer.site .legal p { max-width: none; margin-bottom: .35em; } .tagline { font-family: var(--display); font-size: 1.15rem; color: var(--marigold); margin-bottom: 1rem; } /* Stick figures (2026-09-04). Hand-drawn black-ink PNGs, transparent background. Decorative only - every one is alt="" and aria-hidden, because they repeat what the copy beside them already says. On the ink section they are inverted so the black line reads as cream. */ /* RULE 1 (2026-09-04 parent-tester PT-003/004): a figure inherits the alignment of the text it belongs to. Left by default, because nearly all body copy is left aligned; centred ONLY inside a .section-centered block or the header row. Before this, every figure was margin:0 auto and floated centred over left-aligned headings - which is what read as 'the alignment is off'. */ .ffig{display:block;height:auto;margin:0} .section-centered .ffig,.ffig-header .ffig{margin-inline:auto} .ffig.sm{max-width:120px} .ffig.md{max-width:190px} .ffig.lg{max-width:260px} .ffig-row{display:flex;gap:2rem;align-items:flex-end;justify-content:center;flex-wrap:wrap;margin:2rem 0 0} .ink .ffig{filter:invert(1)} @media (prefers-reduced-motion:no-preference){.ffig{transition:transform .3s ease}} /* --- Stick-figure layout system (2026-09-04, Renee's spec) ------------------- The rules, so subpages can follow them without re-deciding: 1. HEADER ROW - the same four figures the app's Home header uses, in the same order (cartwheel, high-five, wave-family, cape), centred at the top. 2. HERO - one BIG figure to the RIGHT of the headline. Stacks under it on phones. 3. SECTION FIGURE - sits ABOVE the text it belongs to, never below. 4. CARD GRIDS - one figure above each card, and the section title is CENTRED. 5. A section of pure promises/copy takes a centred title and NO figure. Figures are decorative: alt="" and aria-hidden, because the copy beside them already says it. -------------------------------------------------------- */ .ffig-header{display:flex;gap:1.1rem;align-items:flex-end;justify-content:center;flex-wrap:wrap;margin:0 0 1.6rem} .ffig-header .ffig{max-width:88px} .hero-split{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center} .hero-split .ffig{max-width:250px} .section-centered{text-align:center} .section-centered .ffig{margin-bottom:1.2rem} .card .ffig{margin:0 0 1rem} .card .ffig{max-width:110px} @media (min-width:46rem){ .hero-split{grid-template-columns:1.1fr .9fr;gap:2rem} .hero-split .ffig{max-width:400px} .ffig-header .ffig{max-width:110px} } /* PT-006: the capture heading was the only section title still left-aligned while its siblings were centred. It is a self-contained call-to-action card, so it centres as a unit - heading, body, form and the fine print together. */ .capture{text-align:center} .capture form.signup{margin-inline:auto;justify-content:center} /* --- 2026-09-06 revisions (Renee's list, BRIEF_Website_Revisions; #926 HERO-FIGURE-ONLY) ---- The four-figure header row is RETIRED (rule 1). A hero carries ONE figure to the RIGHT of the headline (.hero-split), stacking underneath on phones. A section can also put its figure to the LEFT of the text (.split-fig-left, "It asks first"). A card grid can centre the inside of every card (.card.center). Pure-copy pages can centre as a block (.page-center). */ .hero-split .ffig{justify-self:center} @media (min-width:46rem){.hero-split .ffig{justify-self:center}} .split-fig-left{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center} .split-fig-left .ffig{max-width:220px;justify-self:center} @media (min-width:46rem){.split-fig-left{grid-template-columns:.7fr 1.3fr;gap:2.5rem}.split-fig-left .ffig{justify-self:start;max-width:260px}} .card.center{text-align:center} .card.center .ffig{margin-inline:auto} .card .ffig.tall{max-width:135px} .page-center{text-align:center} .page-center .prose{margin-inline:auto} .page-center .prose table{margin-inline:auto} .page-center .prose ul,.page-center .prose ol{display:inline-block;text-align:left} /* 2026-09-06 W-2 (Renee): a centred copy page centres every block AS A BOX, not just its text - h1/h2/h3/p carry their own max-width, so without margin-inline:auto they sat left with centred text inside them (the privacy page). The prose column narrows to the paragraph measure so the headings, rules and paragraphs share one column. */ .page-center .prose{max-width:var(--measure)} .page-center h1,.page-center h2,.page-center h3,.page-center p,.page-center .eyebrow,.page-center .lede{margin-inline:auto} .hero.tight{padding-block:clamp(1.6rem,4vw,2.4rem) clamp(1rem,2vw,1.4rem)} .series-photo{display:block;width:100%;height:auto;border-radius:var(--r);margin:0 0 1rem} .headshot-split{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start} .headshot{display:block;width:100%;max-width:260px;height:auto;border-radius:var(--r);justify-self:center} @media (min-width:46rem){.headshot-split{grid-template-columns:1.3fr .7fr;gap:2.5rem}.headshot{justify-self:end}} .video{position:relative;aspect-ratio:16/9;width:100%;max-width:52rem;margin:1.2rem auto} .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--r)} .ml-choice{border:0;padding:0;margin:1.1rem auto 0;max-width:34rem;text-align:left} .ml-choice legend{font-weight:600;margin-bottom:.5rem;text-align:center;width:100%} .ml-choice label{display:block;padding:.55rem .8rem;border:2px solid var(--stone-light);border-radius:14px;margin-bottom:.5rem;background:var(--white);cursor:pointer} .ml-choice label:has(input:checked){border-color:var(--sage)} .ml-choice input{margin-right:.5rem} .ml-form{margin-top:.8rem} /* 2026-09-06 (Renee, afternoon): the hero figure sits CENTRED in its column and larger (400px), not pinned to the right edge. Series pages carry their series photo in the hero-split slot. */ .hero-photo{max-width:420px;justify-self:center;margin:0} /* 2026-09-06 afternoon pass (Renee's desktop read + parent-tester): - the stick figures were 140-320px source files, so no cap could make a hero figure bigger; the site's copies are now 3x, and a hero figure fills a 360x400 box, centred in its column. - a two-column hero headline wraps at 24ch, not 17ch (the amended rule 3 tower). - a centred section's title and lede centre AS BOXES (h2 has max-width 22ch; text-align alone left the box on the left edge, which is what read as 'the title is not above its text'). - card figures and series photos share one fixed-height box so the three titles sit level. */ .hero-split .ffig{width:100%;max-width:240px;max-height:280px;object-fit:contain;object-position:center} @media (min-width:46rem){.hero-split .ffig{max-width:360px;max-height:400px}} .hero-split h1{max-width:24ch} .section-centered h1,.section-centered h2,.section-centered p,.section-centered .lede,h2.section-centered{margin-inline:auto} .card .ffig{width:100%;max-width:200px;height:150px;object-fit:contain;object-position:center bottom} .card .ffig.tall{max-width:200px} .card .series-photo{aspect-ratio:4/3;object-fit:contain;object-position:center} .ffig.xl{max-width:380px} /* 2026-09-06 (Renee, 14:55): the capture block's heading and body centre AS BOXES over the form - 'Tell me when registration opens', 'Be one of the first families in', 'One email a month'. */ .capture h2,.capture p,.capture .lede{margin-inline:auto} /* 2026-09-08 (Renee): the header's "Get the free printables" pill was NOT centred on the page. The bar was flex space-between, so the pill sat halfway between the wordmark (175px) and the nav (294px) - measured centre 623px in a 1366 viewport (page centre 683); on a 390 phone 235 vs 195. The bar is now a 3-column grid (1fr auto 1fr): wordmark starts col 1, pill is centred in col 2, nav / menu button ends col 3, so the pill's centre IS the page centre. Pass 3: on phones the pill takes its own centred second row (wordmark left + menu button right on row 1, nav on row 3), so the wordmark keeps its 118px instead of shrinking to 94px at 390 / 79px at 360 to make room beside the pill. */ header.site .bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;justify-content:normal} header.site .brand{grid-column:1;grid-row:1;justify-self:start} header.site .bar > .btn{grid-column:2;grid-row:1;justify-self:center;white-space:nowrap} nav.main{grid-column:3;grid-row:1;justify-self:end} @media (max-width:52rem){ header.site .bar{grid-template-columns:1fr auto} header.site .brand{grid-column:1;grid-row:1} .menu-btn{grid-column:2;grid-row:1;justify-self:end;order:0} header.site .bar > .btn{grid-column:1 / -1;grid-row:2;justify-self:center;order:0} nav.main{grid-column:1 / -1;grid-row:3;justify-self:stretch;order:0} header.site .brand img{width:118px} } /* 2026-09-08 (Renee): Create, Connect & Celebrate - the series picture, bigger. This hero splits 1:1 (.even) and the photo fills its column (.big, 560px cap). The site's copy of the picture was regenerated at 1400px wide from her 2142px source, so it is honest pixels at this size. */ .hero-split.even{grid-template-columns:1fr} @media (min-width:46rem){.hero-split.even{grid-template-columns:1fr 1fr}} .hero-photo.big{max-width:560px} .beta-blurb{text-align:left;max-width:34rem;margin:0 auto .8rem} /* --- 2026-09-13 site wave (WEB-3 beta page, WIP-2 in-the-works page) --------------------- BETA-3 ASK-AT-SIGNUP: the capture form can carry a required metro dropdown (#922). It sits on its own row under the email input and matches the email field's shape, so the two read as one control rather than a form that grew a stranger. */ form.signup select{ flex: 1 1 100%; font: inherit; font-size: 1rem; padding: .68em .9em; border: 2px solid var(--stone-light); border-radius: 999px; background: var(--white); color: var(--ink); appearance: none; text-align: center; text-align-last: center; } form.signup select:focus{border-color: var(--sage); outline: none;} form.signup .field-label{position:absolute;left:-9999px} /* WIP-2: the unlisted in-the-works page. One screen per section, each picture in a phone-shaped frame beside its words. Phone screenshots are 1080x2400; the site copies are 540 wide, so the 270px frame is honest pixels. */ .wip-shot{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:start;margin-top:1.4rem} @media (min-width:46rem){.wip-shot{grid-template-columns:270px 1fr;gap:2.4rem}} .wip-shot figure{margin:0} .wip-shot img{width:100%;max-width:270px;height:auto;display:block;border-radius:18px;border:1px solid var(--stone-light);background:var(--white)} .wip-shot figcaption{font-size:.82rem;color:var(--stone);margin-top:.5rem;max-width:270px} .wip-note{border-left:3px solid var(--marigold);padding-left:1rem;margin:1.2rem 0} /* 2026-09-14 v10 VIDEO ROLLS on the unlisted in-the-works page. A roll sits in the same 270px column as the still, so a section can carry both stacked. The