instead of to a narrow column: headings come down to reading scale, prose gets a measure, and the grid keeps its width. */ /* The narrative homepage wants big air between beats. A page of explanation does not: at clamp(64px, 9vw, 116px) top and bottom, three lines of prose sat in a 340px-tall band of nothing. */ .feature-page .section { padding-block: clamp(52px, 6.5vw, 88px); } .feature-page .page-hero h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.08; } .feature-page .section-heading h2, .feature-page .cta-band h2 { max-width: 30ch; font-size: clamp(1.5rem, 2.9vw, 2.15rem); line-height: 1.14; font-weight: 820; } /* In a two-column section the copy column is already the constraint, so a max-width on top of it only wraps the heading early inside a column that had room. This was the "why is it breaking the line when there is space" bug: 24ch inside a 560px column. */ .feature-page .pane .section-heading h2 { max-width: none; } /* A measure. Prose set to the full 1180px wrap is unreadable however good the type is — the eye loses the line on the way back. */ .feature-page .section-heading .lead, .feature-page .cta-band .lead, .feature-page .section > .wrap > p { max-width: 64ch; } .feature-page .section > .wrap > p { margin-top: 16px; color: var(--muted); font-size: 1rem; line-height: 1.7; } .feature-page .feature-card h3, .feature-page .faq-item h3 { font-size: 1.06rem; line-height: 1.3; font-weight: 820; } .feature-page .check-list { max-width: 64ch; margin-top: 4px; } .feature-page .check-list li { font-size: 1rem; line-height: 1.6; } .feature-page .cta-band { text-align: left; } .feature-page .cta-band .hero-actions { margin-top: 26px; } /* The in-page links that carry the internal linking between these four pages and out to the legal documents. Underlined on purpose: an unstyled coloured link inside grey body copy is easy to miss, and these are the paths between the pages. */ .feature-page .section a:not(.store-button):not(.button) { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .feature-page .section a:not(.store-button):not(.button):hover { color: var(--teal); } /* The fade on the sub-page nav's scrollable edge. Added when the feature pages took the nav from four items to eight: below 1024px the row scrolls, and without this a phone shows "Home Calendar Meals Chores" with no hint that About, Support and Sign in are a swipe away. Stated, never implied: the class is set by site.js only when the row actually overflows, so a nav that fits is not dimmed at one end. */ .site-header .nav.is-scrollable { mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); } /* ========================================================================== FEATURE PAGE VISUALS ========================================================================== The pages shipped as headings, prose and bordered cards in a 1180px wrap, which left the right half of every section empty and made the headings wrap early against nothing. Both complaints are one problem: there was nothing to look at. These mocks are built here rather than lifted from the homepage. The homepage's `.explore-visual-*` blocks are the obvious source and they were the first attempt, but their CSS runs from line 3201 to 8504 of gsap-site.css and is genuinely welded to the scroll narrative — the pin, `.is-swipe`, `.is-unpinned`, `--announce-h`, `--landing-lift`. Pulling that apart to reuse four pictures risks the homepage for no gain, and loading the whole of gsap-site.css on a static page risks it differently. So: a small self-contained kit, every rule scoped under `.feature-page`, using only the tokens at the top of this file. Nothing here can reach the homepage. */ /* --- two-column section ------------------------------------------------ */ .feature-page .pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: center; gap: clamp(32px, 5vw, 68px); } .feature-page .pane.pane-flip .pane-visual { order: -1; } /* Swap the tracks with the order, so the visual keeps the wider column either way round. Without this the 1.04fr always belongs to whatever sits second, which is the copy in a flipped pane and the visual in a plain one — every feature page has one of each, so the two screens on a page came out 4% apart for no reason anyone could point at. */ .feature-page .pane.pane-flip { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); } .feature-page .pane .section-heading { margin-bottom: 22px; } .feature-page .pane-copy > p { margin-top: 14px; max-width: 54ch; color: var(--muted); font-size: 1rem; line-height: 1.7; } .feature-page .pane .check-list { max-width: none; } /* The hero is the same idea, but the copy leads. */ .feature-page .page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr); align-items: center; gap: clamp(32px, 5vw, 64px); } .feature-page .page-hero .lead { max-width: 48ch; } /* --- one column on a phone ---------------------------------------------- */ @media (max-width: 900px) { /* .pane.pane-flip is listed explicitly: it carries its own two-column template (see the swap above) and out-specifies a bare .pane here, which left every flipped pane two-up on a phone with a 162px screen in it. */ .feature-page .pane, .feature-page .pane.pane-flip, .feature-page .page-hero .wrap { grid-template-columns: 1fr; } /* The visual always follows the words it illustrates once they stack — pane-flip is a desktop-only alternation. */ .feature-page .pane.pane-flip .pane-visual { order: 0; } } /* ========================================================================== CHORE METER DEMO — /chores/ Replaces the character illustration beside "Nobody has to be nagged by a person" with the thing the sentence describes: a child's meter, two chores ticking off, the ring closing and the coins going up on their own. Rebuilt from MemberChoresWidget/index.jsx — the 120-viewBox ring at r=48 with a 9px round-capped stroke, the 24px check that fills with the member's colour, the amber coin pill, and the strike-and-fade on a done row. No character art: the widget's own AvatarFallback is the member's initial on their colour, which is what the product renders whenever a profile has no picture. Nothing is invented to avoid the illustration. ========================================================================== */ @property --cm-on { syntax: ""; initial-value: 0; inherits: true; } .mock--narrow { max-width: 358px; } .cm { --cm-member: #48a37b; --cm-cycle: 12s; background: #fff; border-radius: 13px; padding: 14px 13px 13px; font-size: 12px; } .cm-name { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cm-member); margin-bottom: 8px; } .cm-ringwrap { position: relative; width: 116px; height: 116px; margin: 0 auto 2px; } .cm-ringwrap svg { width: 100%; height: 100%; display: block; } .cm-track { fill: none; stroke: #ece6dd; stroke-width: 9; } /* stroke-dasharray is animatable, so the arc is driven directly rather than faked with a rotating mask. Circumference at r=48 is 301.6. */ .cm-arc { fill: none; stroke: var(--cm-member); stroke-width: 9; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; stroke-dasharray: 121 302; animation: cm-arc var(--cm-cycle) infinite; } @keyframes cm-arc { 0%, 21% { stroke-dasharray: 121 302; } 26%, 45% { stroke-dasharray: 181 302; } 50%, 91% { stroke-dasharray: 241 302; } 96%, 100% { stroke-dasharray: 121 302; } } .cm-face { position: absolute; inset: 14px; border-radius: 999px; background: var(--cm-member); box-shadow: 0 0 0 2px #fff; display: grid; place-items: center; font-size: 30px; font-weight: 800; color: #fff; } .cm-pct { position: absolute; right: -2px; bottom: 10px; font-size: 9px; font-weight: 900; color: var(--cm-member); background: #fff; border-radius: 4px; padding: 0 2px; min-width: 22px; height: 12px; } .cm-pct span { position: absolute; inset: 0; opacity: 0; } .cm-chips { display: flex; justify-content: center; gap: 6px; margin: 6px 0 11px; } .cm-chip { display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 800; background: #f3efe8; color: #6c6257; position: relative; } .cm-chip--n { min-width: 46px; justify-content: center; } .cm-chip--n span, .cm-chip--coins span { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; } .cm-chip--coins { min-width: 52px; justify-content: center; color: #b45309; background: linear-gradient(135deg, rgba(251,191,36,0.16), rgba(245,158,11,0.08)); border: 1px solid rgba(245,158,11,0.18); } /* ── a chore row ────────────────────────────────────────────────────────── */ .cm-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; margin-bottom: 6px; border: 2px solid color-mix(in srgb, #ded6ca calc((1 - var(--cm-on)) * 100%), #e9e3da); border-radius: 12px; background: color-mix(in srgb, #f4f1ec calc(var(--cm-on) * 100%), #fff); opacity: calc(1 - 0.45 * var(--cm-on)); } .cm-check { width: 20px; height: 20px; border-radius: 999px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--cm-member) calc(var(--cm-on) * 100%), transparent); border: 2px solid color-mix(in srgb, #d5ccbf calc((1 - var(--cm-on)) * 100%), var(--cm-member)); } .cm-check svg { width: 10px; height: 10px; color: #fff; opacity: var(--cm-on); } .cm-icon { font-size: 14px; line-height: 1; flex: none; } /* Same as the grocery rows: the product's line-through, revealed by animating the decoration colour rather than drawing a rule across the flex spacer. */ .cm-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: #33302c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration-line: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor calc(var(--cm-on) * 100%), transparent); } .cm-coin { display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 900; color: #b45309; background: linear-gradient(135deg, rgba(251,191,36,0.16), rgba(245,158,11,0.08)); border: 1px solid rgba(245,158,11,0.18); } .cm-row--done { --cm-on: 1; } /* ── the loop ───────────────────────────────────────────────────────────── */ /* Linear ramps centred on 22% and 46%, which is where the chip, the coins and the percentage switch — the same discipline the grocery piece needed, for the same reason: a number that disagrees with the boxes reads as a bug. */ @keyframes cm-r1 { 0%, 21% { --cm-on: 0 } 23%, 91% { --cm-on: 1 } 93%, 100% { --cm-on: 0 } } @keyframes cm-r2 { 0%, 45% { --cm-on: 0 } 47%, 91% { --cm-on: 1 } 93%, 100% { --cm-on: 0 } } .cm-row--t1, .cm-row--t2 { animation-duration: var(--cm-cycle); animation-iteration-count: infinite; animation-timing-function: linear; } .cm-row--t1 { animation-name: cm-r1; } .cm-row--t2 { animation-name: cm-r2; } .cm-chip--n span:nth-child(1), .cm-chip--coins span:nth-child(1), .cm-pct span:nth-child(1) { animation: cm-s1 var(--cm-cycle) infinite; } .cm-chip--n span:nth-child(2), .cm-chip--coins span:nth-child(2), .cm-pct span:nth-child(2) { animation: cm-s2 var(--cm-cycle) infinite; } .cm-chip--n span:nth-child(3), .cm-chip--coins span:nth-child(3), .cm-pct span:nth-child(3) { animation: cm-s3 var(--cm-cycle) infinite; } @keyframes cm-s1 { 0%, 21.9% { opacity: 1 } 22%, 91.9% { opacity: 0 } 92%, 100% { opacity: 1 } } @keyframes cm-s2 { 0%, 21.9% { opacity: 0 } 22%, 45.9% { opacity: 1 } 46%, 100% { opacity: 0 } } @keyframes cm-s3 { 0%, 45.9% { opacity: 0 } 46%, 91.9% { opacity: 1 } 92%, 100% { opacity: 0 } } @media (prefers-reduced-motion: reduce) { .cm-row, .cm-arc, .cm-chip--n span, .cm-chip--coins span, .cm-pct span { animation: none !important; } .cm-row--t1 { --cm-on: 1; } .cm-arc { stroke-dasharray: 181 302; } .cm-chip--n span, .cm-chip--coins span, .cm-pct span { opacity: 0; } .cm-chip--n span:nth-child(2), .cm-chip--coins span:nth-child(2), .cm-pct span:nth-child(2) { opacity: 1; } } /* ========================================================================== PROFILES PANEL — /chores/ Replaces the second character illustration beside "Children are profiles, not account holders" with the admin surface that actually says so: the member roster, its Parent/Child labels, and the sign-in status the panel shows per person (MembersPanel.jsx:299,317,322-325) — including its own hint, "Parents sign in with an email and password. Children use the wall only." Deliberately still. The other piece on this page moves because chores ticking off IS the behaviour being described; this pane is about how accounts are structured, and there is nothing here that happens. Animating it would be decoration pretending to be evidence. Addresses are left off rather than invented. ========================================================================== */ .mp { background: #fff; border-radius: 13px; padding: 13px; } .mp-head { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9a8b78; margin-bottom: 9px; } .mp-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #efe9e0; } .mp-row:last-of-type { border-bottom: 0; } .mp-face { width: 30px; height: 30px; border-radius: 999px; flex: none; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; } .mp-who { flex: 1; min-width: 0; } .mp-nm { font-size: 13px; font-weight: 700; color: #33302c; } .mp-st { font-size: 10.5px; font-weight: 600; margin-top: 1px; } .mp-st--ok { color: #2f7d5e; } .mp-st--none { color: #9a8b78; } .mp-role { font-size: 9px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; flex: none; } .mp-role--p { color: #7a5a1e; background: rgba(245,158,11,0.13); border: 1px solid rgba(245,158,11,0.22); } .mp-role--c { color: #4a5b6b; background: #f1f3f5; border: 1px solid #e3e7ea; } .mp-note { margin-top: 10px; padding-top: 9px; border-top: 1px solid #efe9e0; font-size: 10.5px; line-height: 1.45; color: #8a7a68; }