/* ================================================================ PASS 1 — PLAYROOM (Direction B) Approved Playroom tokens applied to the skeleton. Structure, content, and data unchanged. Page background Warm white #FFF9F0 Primary Teal #0E7C7B — headings and links Accent / CTA Coral #F26430 Highlight Sunshine #F2B134 — highlights + hard shadows Rounded system sans throughout; pill shapes throughout (cards 20px radius, pill buttons and chips). Header wordmark is the Sticker Pill: coral pill, tilted, hard sunshine shadow, green-filled receipt with white lines in a white dot, sunshine ampersand. ================================================================ */ :root { color-scheme: light; --bg: #FFF9F0; --surface: #FFFFFF; --surface-warm: #FFF3E0; --ink: #22333B; --muted: #5f737c; --line: #EFDFC6; --line-strong: #E0C08A; --teal: #0E7C7B; --teal-deep: #0A5E5D; --on-teal: #FFFFFF; --coral: #F26430; --coral-deep: #C74E22; --on-coral: #FFFFFF; --sunshine: #F2B134; --sunshine-soft: #FDEBC0; --slot-bg: #F8ECD4; --strip-bg: #0E7C7B; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; } ::selection { background: var(--sunshine); color: #22333B; } .wrap { max-width: 1060px; margin: 0 auto; padding: 0 16px 64px; } /* ---------- Site frame ---------- */ .site-frame { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; margin-top: 18px; padding: clamp(18px, 4vw, 40px); box-shadow: 10px 10px 0 rgba(242, 177, 52, .25); } .site-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; padding: 10px 0 14px; border-bottom: 2px solid var(--line); background: var(--surface); } /* Sticker Pill wordmark — coral pill, tilted, hard sunshine shadow, green-filled receipt with white lines in a white dot, sunshine ampersand */ .wordmark { appearance: none; border: 0; cursor: pointer; font: inherit; text-align: left; display: inline-flex; align-items: center; gap: 12px; background: var(--coral); color: #fff; text-decoration: none; border-radius: 999px; padding: 9px 22px 9px 10px; transform: rotate(-2deg); box-shadow: 6px 6px 0 var(--sunshine); max-width: 100%; flex: 0 1 auto; } .wordmark:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; } /* The wordmark is a link on generated pages (the template's button is rewritten to an anchor); without this the global link hover color would win over the pill's white text. */ a.wordmark:hover { color: #fff; } .wm-dot { flex: 0 0 auto; width: 46px; height: 46px; background: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .wm-dot svg { width: 24px; height: 30px; display: block; } .wm-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .wm-name { font-size: 21px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; } .wm-amp { color: var(--sunshine); } .wm-tag { font-size: 12.5px; font-weight: 600; color: #FFE4D6; } .site-nav { position: relative; flex: 0 0 auto; } .nav-row { display: flex; flex-wrap: nowrap; gap: 2px; align-items: center; justify-content: flex-end; } .site-nav button, .site-nav .nav-link, .site-nav a { appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; background: transparent; color: var(--ink); border: 1px solid transparent; border-radius: 999px; padding: 8px 11px; min-height: 40px; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; } .site-nav button:hover, .site-nav .nav-link:hover, .site-nav a:hover { border-color: var(--teal); color: var(--teal-deep); } .site-nav button[aria-current="page"], .site-nav .nav-link[aria-current="page"], .site-nav a[aria-current="page"] { background: var(--teal); color: var(--on-teal); border-color: var(--teal); } .site-nav button:focus-visible, a:focus-visible, .card-link:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; } .menu-toggle { display: none !important; width: 42px; justify-content: center; padding: 8px !important; } .menu-toggle svg { width: 22px; height: 22px; display: block; } .mobile-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 120; width: min(370px, calc(100vw - 32px)); max-height: min(72vh, 640px); overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; padding: 16px; box-shadow: 0 16px 34px rgba(46, 42, 38, .20); } .mobile-menu .search-form { width: 100%; margin-bottom: 14px; } .mobile-menu .search-form input { flex: 1 1 auto; width: auto; } .mobile-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .mobile-groups section { min-width: 0; } .mobile-groups h3 { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; } .mobile-groups button, .mobile-groups a { display: flex; width: 100%; justify-content: flex-start; text-align: left; padding: 6px 8px; min-height: 34px; font-size: 13.5px; white-space: normal; line-height: 1.3; } /* ---------- Search (header form) + filter bars (Pass 2) ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .search-form { display: inline-flex; align-items: center; gap: 6px; } .search-form input { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface-warm); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; min-height: 40px; width: 148px; max-width: 100%; } .search-form input::placeholder { color: var(--muted); } .search-form input:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; } .search-form .icon-btn { appearance: none; cursor: pointer; background: var(--teal); color: var(--on-teal); border: 1.5px solid var(--teal); border-radius: 999px; padding: 0; width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; } .search-form .icon-btn svg { width: 19px; height: 19px; display: block; } .search-form .icon-btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--on-teal); } /* Compact filter bar: muted pills secondary to the results, secondary filters behind "More filters", active filters as removable chips, and a collapsible sheet on mobile. */ .filter-bar { margin: 14px 0 4px; } .filter-toggle { display: none; appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; background: var(--surface-warm); color: var(--teal-deep); border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; min-height: 40px; align-items: center; gap: 8px; } .filter-toggle svg { width: 17px; height: 17px; } .filter-toggle-count { background: var(--coral); color: var(--on-coral); border-radius: 999px; font-size: 12px; line-height: 1; padding: 4px 7px; } .filter-sheet { background: var(--surface-warm); border: 1px solid var(--line); border-radius: 18px; padding: 10px; } .filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .filter-field { display: flex; flex-direction: row; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 6px 3px 11px; min-height: 38px; } .filter-field.filter-search { flex: 1 1 210px; } .filter-field label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .filter-field select, .filter-field input { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: transparent; border: 0; border-radius: 999px; padding: 5px 4px; min-height: 30px; width: auto; max-width: 190px; } .filter-field input { flex: 1 1 auto; width: 100%; max-width: none; } .filter-field select:focus-visible, .filter-field input:focus-visible { outline: 3px solid var(--coral); outline-offset: 1px; } .more-filters { flex: 0 1 auto; } .more-filters summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--teal-deep); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 13px; min-height: 38px; } .more-filters summary::-webkit-details-marker { display: none; } .more-filters summary:hover { border-color: var(--teal); } .more-filters[open] { flex: 1 1 100%; } .more-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .more-filters:not([open]) .more-fields { display: none; } .filter-reset { appearance: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 999px; padding: 7px 11px; min-height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .filter-reset svg { width: 15px; height: 15px; } .filter-reset:hover { color: var(--teal-deep); border-color: var(--line-strong); background: var(--surface); } .active-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .active-chips:empty { display: none; } .chip { appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; background: var(--sunshine-soft); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 7px 4px 11px; display: inline-flex; align-items: center; gap: 6px; } .chip:hover { border-color: var(--coral); } .chip .chip-x { font-size: 15px; line-height: 1; color: var(--coral-deep); } .filter-count { font-size: 13.5px; color: var(--muted); margin: 4px 0 12px; } .empty-note { grid-column: 1 / -1; border: 1.5px solid var(--line-strong); background: var(--surface-warm); border-radius: 20px; padding: 22px 18px; text-align: center; color: var(--muted); font-size: 15px; } /* ---------- Per-product notes: guide comments attached to the card ---------- The note is no longer a floating character + speech bubble beside the card: the guide's avatar sits inside the note header, and the note hangs directly off the card (zero gap, same warm surface) so it reads as part of the listing. The speech-bubble tail is gone; the note text itself carries the font variant (italic) instead. */ .card-wrap { display: flex; flex-direction: column; } .product-notes { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .card-wrap .product-notes { margin-top: 0; } /* Skeuomorphic tilt: guide notes below a product card tilt at +2deg. Note the sign: in screen coordinates +2deg drops the RIGHT side, opposite the wordmark's -2deg. That is deliberate — Chris liked the "wrong way" better and asked to keep it. The product card sits above the note (z-index), and with zero gap the rotated top right corner tucks a few pixels behind it. */ .card-wrap a.product-card { z-index: 1; } .card-wrap .bubble { transform: rotate(2deg); } .pop-note { position: relative; } .bubble { position: relative; min-width: 0; background: var(--surface-warm); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; font-size: 14px; line-height: 1.5; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; } .note-body { min-width: 0; } .note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .note-avatar { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; flex: 0 0 auto; } span.note-avatar { cursor: default; } .note-avatar img { display: block; width: 40px; height: auto; } .note-head .char-info { margin: 0 0 0 auto; } .bubble .note-who { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-deep); } .bubble .note-text { font-style: italic; } .bubble .note-text.clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bubble .note-toggle { appearance: none; background: none; border: none; padding: 4px 0 0; font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; color: var(--teal); } .voice-key { font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line-strong); padding-top: 12px; margin-top: 28px; } .added-line { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; } .cite-tag { font-size: 11.5px; font-weight: 400; color: var(--muted); font-style: italic; white-space: nowrap; } .receipt .row .rval { text-align: left; } .receipt .row .rval a { font-weight: 400; } .receipt .row span.cite-tag { font-weight: 400; text-align: left; } .receipt .row .rval .cite-tag a { font-weight: 400; } /* ---------- Type scale ---------- */ h1 { font-size: clamp(30px, 5.5vw, 42px); line-height: 1.12; margin: 0 0 8px; font-weight: 800; color: var(--teal); } h2 { font-size: 23px; line-height: 1.25; margin: 36px 0 10px; font-weight: 700; color: var(--teal); } h3 { font-size: 17px; line-height: 1.3; margin: 0 0 5px; font-weight: 700; color: var(--teal); } h4 { font-size: 15.5px; margin: 0 0 6px; font-weight: 700; } p { font-size: 16px; margin: 0 0 10px; } p.small, .small { font-size: 14px; } .muted { color: var(--muted); } .sub { font-size: 19px; color: var(--coral-deep); font-weight: 600; margin: 0 0 12px; } a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--teal-deep); } .crumbs { font-size: 13.5px; color: var(--muted); margin: 18px 0 10px; } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; } .crumbs li + li::before { content: "/"; margin: 0 7px; color: var(--muted); } .slot-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); border: 1.5px solid var(--teal); border-radius: 999px; background: var(--surface-warm); padding: 3px 11px; margin-bottom: 12px; } /* ---------- Warm placeholder boxes (illustration / image slots) ---------- */ .gray-box { background: var(--slot-bg); border: 1.5px solid var(--line-strong); border-radius: 20px; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 28px 16px; width: 100%; } .gray-box .gb-title { font-weight: 700; font-size: 14.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); } .gray-box .gb-note { font-size: 13px; max-width: 52ch; } .gray-box.hero { min-height: 320px; } .gray-box.tall { min-height: 260px; } .gray-box.thumb { min-height: 150px; padding: 18px 12px; } .gray-box.has-photo { padding: 0; border-style: solid; background: #fff; overflow: hidden; } .gray-box.has-photo img { width: 100%; height: auto; display: block; } /* Safety net for the product hero photo: it must never render at natural size even if the has-photo class is ever lost again. */ #p-img-box img { max-width: 100%; height: auto; display: block; } figcaption, .gb-cap { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.45; } figure { margin: 0; } /* ---------- Age hub hero (hero-sample structure) ---------- Header treatment aligned to the hero-sample mockup: the age title set like the wordmark — rounded display face, heaviest weight, poster scale, ink-colored with a coral dash and "months" on its own line; the stage line in teal beneath. */ .age-hero-head { text-align: center; margin-top: 10px; } .age-hero-head h1 { font-size: clamp(58px, 12.5vw, 118px); line-height: .98; letter-spacing: -0.015em; color: var(--ink); margin: 0; } .age-hero-head h1 .dash { color: var(--coral); } .age-hero-head h1 .months { display: block; } .age-hero-head .sub { font-size: clamp(21px, 3.6vw, 28px); font-weight: 700; color: var(--teal); margin: 12px 0 0; } .age-hero { margin: clamp(6px, 1.5vw, 14px) 0 0; } /* The hero scenes sit directly on the page: transparent background, full content width, no border, no frame — each scene lands complete, nothing clipped. */ .age-hero img { display: block; width: 100%; height: auto; background: transparent; border: none; border-radius: 0; } .age-hero figcaption { text-align: center; max-width: 62ch; margin-left: auto; margin-right: auto; } .age-hero-intro { margin-top: clamp(18px, 3vw, 28px); } .age-hero-intro p { font-size: 19px; line-height: 1.6; } /* 3–6 hero only: the v3 scene carries generous transparent padding around the subject, so the on-page crop is tightened here (the artwork itself is untouched) — the frame shows the subject's alpha bounds plus a small breathing margin. */ .crop-tight { overflow: hidden; aspect-ratio: 1284 / 696; } .crop-tight > img, .age-hero .crop-tight > img { width: 149.53%; max-width: none; height: auto; margin-left: -23.36%; margin-top: -24.92%; } /* ---------- Home top: text-led (no poster hero) ---------- */ .home-hero { max-width: 730px; margin-top: 26px; } .home-idea { font-size: clamp(19px, 2.6vw, 23px); line-height: 1.5; font-weight: 600; margin: 0; } .home-tiers { margin-top: 26px; } .home-tiers h2 { margin-top: 0; } .home-tiers .card { position: relative; padding-bottom: 44px; } .home-actions { justify-content: center; margin-top: 22px; } /* ---------- Meet the guides (homepage) + About introductions ---------- */ .meet-guides { margin-top: 36px; } .meet-guides h2 { margin-top: 0; } /* Guide boxes sit on white so the full-body art lands cleanly. Homepage guide art is a round CSS portrait frame (1:1) cropped from the full-body render: the image is absolutely positioned and scaled per character, face center at frame center. Zooms are backed off from the matched-span baseline (Chris -40% to 187%, Hiro -57.5% to 101%, Lukas -62.5% to 116% with his frame shifted 5% lower), so the spans differ by design. Playroom frame treatment: teal ring + hard sunshine offset shadow, matching the Sticker Pill wordmark. About boxes show the same full-body render uncropped (see .guide-intro). */ .guide-card { background: var(--surface); } /* Whole guide card is the link (same pattern as product cards): no text anchor, orange chevron at the bottom-right. */ a.guide-card { position: relative; text-decoration: none; color: inherit; padding-bottom: 44px; } a.guide-card:hover { color: inherit; } .guide-card .guide-art { position: relative; width: 100%; max-width: 170px; aspect-ratio: 1 / 1; overflow: hidden; margin: 2px auto 10px; border-radius: 50%; background: var(--surface); border: 3px solid var(--teal); box-shadow: 5px 5px 0 var(--sunshine); } .guide-card .guide-art img { position: absolute; height: auto; display: block; } .guide-card .guide-art--chris img { width: 187%; left: -42.9%; top: -11.8%; } .guide-card .guide-art--hiro img { width: 101%; left: -0.3%; top: -11.2%; } .guide-card .guide-art--lukas img { width: 116%; left: -8.6%; top: -10.1%; } .guide-standin { display: block; width: 100%; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--teal); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 10px 12px; margin: 2px 0 12px; } .guide-card h3 { font-size: 19px; } .card.product-card h3, .card.age-card h3, .card.guide-card h3, .card.resource-card h3 { font-size: 23px; line-height: 1.2; color: var(--ink); } .guide-card .guide-role { font-size: 14.5px; margin-bottom: 6px; } /* Small info affordance on each character pop-out — an icon button, not a text link, leading to the About introductions */ .char-info { appearance: none; cursor: pointer; padding: 0; margin: 6px auto 0; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: var(--teal); border: 1.5px solid var(--teal); display: flex; align-items: center; justify-content: center; } .char-info svg { width: 15px; height: 15px; display: block; } .char-info:hover { background: var(--teal); color: var(--on-teal); } .char-info:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; } .pop .char-info { display: inline-flex; margin: 0 0 0 6px; vertical-align: 4px; } /* About introductions — one section per character */ .guide-intros { display: grid; gap: 14px; margin-top: 6px; } .guide-intro { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; } .guide-intro img { display: block; width: 112px; height: auto; margin: 2px auto 0; } .guide-intro h3 { font-size: 19px; } .guide-intro p { font-size: 15px; } .guide-intro p:last-child { margin-bottom: 0; } /* Lukas's stand-in label sits above his heading at natural width, beside his orange-tee art column */ .guide-intro .guide-standin { display: inline-block; width: auto; margin: 0 0 10px; } /* Age cards: each card shows its own age's hero scene, on a white card background (age cards only) */ .age-card { background: var(--surface); } /* Age hub cards: centered header/subtitle/summary, chevron (not a text link) at the bottom-right like product cards. */ .card.age-card { position: relative; padding-bottom: 44px; text-align: center; } .age-card-art { padding: 2px 0 10px; } .age-card-art img { display: block; width: 100%; height: auto; max-width: 100%; } .age-card-art.crop-tight { aspect-ratio: 1284 / 696; overflow: hidden; } /* 3–6 age card only: .age-card-art img (later in this file, same specificity) was overriding the .crop-tight > img zoom, leaving the -23%/-25% margins applied to an unzoomed image — the card showed the scene shifted up-left ~25% with no zoom. This higher-specificity rule restores the crop sizing in the age-card context only; the hub hero is unaffected. */ .age-card-art.crop-tight > img { width: 149.53%; max-width: none; height: auto; margin-left: -23.36%; margin-top: -24.92%; } @media (max-width: 720px) { .guide-intro { grid-template-columns: 84px 1fr; gap: 12px; } .guide-intro img { width: 72px; } } /* ---------- Layout primitives ---------- */ .hero-split { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; margin-top: 20px; } .hero-split > * { min-width: 0; } .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cards.three { grid-template-columns: repeat(3, 1fr); } /* Product card masonry: grids that hold product cards (card wraps) flow as columns instead of rows, so a short card no longer leaves a gap below it while its row-mates are tall. The card wrap (product card + its guide notes) is one unbroken unit, so notes flow with their product card. Trade-off, inherent to masonry: reading order becomes column-major (down the left column, then down the right), not row-major. Other card grids (age, brand, resource, guide comments) stay as rows. */ .cards:has(> .card-wrap) { display: block; columns: 2; column-gap: 14px; } .cards.three:has(> .card-wrap) { columns: 3; } .cards:has(> .card-wrap) > .card-wrap { break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid-column; margin-bottom: 14px; } /* Safari multicol + tilt fix: a rotated bubble's bottom-right corner drops ~8px below its unrotated box. Firefox paints that overflow visibly, but Safari fragments it: the corner is clipped at the column bottom and reappears at the top of the next column. Padding (not margin) is part of the item's box, so 12px of bottom padding on noted wraps contains the rotated corner inside the item, and the margin is cut by the same 12px so the visual gap between cards stays 14px. The bubble itself also gets the legacy -webkit break-inside rule. */ .cards:has(> .card-wrap) > .card-wrap:has(.bubble) { padding-bottom: 12px; margin-bottom: 2px; } .card-wrap .bubble { -webkit-column-break-inside: avoid; } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .center { text-align: center; } .lead-c { text-align: center; max-width: 640px; margin: 14px auto 0; } .key { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; } .card { background: var(--surface-warm); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; } /* White cards: the guide boxes and the age cards only — this rule must follow .card (and out-specify it) to win. */ .card.guide-card, .card.age-card { background: var(--surface); } .card .brandline { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; } .card p { font-size: 15px; color: var(--muted); } .card .buy { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: auto; padding-top: 8px; } /* Product-card photo: the same verified product photo as the product page, contained (never cropped) in a 4:3 frame so teaser listings show the photo too. */ .product-thumb { margin: 10px 0 12px; border-radius: 14px; overflow: hidden; background: var(--surface); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; } /* Definite sizing (not max- percentages): the frame's height comes from aspect-ratio, and percentage max- sizes against it resolve inconsistently across browsers — the photo must fill the frame deterministically, contained and never cropped. */ .product-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; } .card-link { cursor: pointer; } .card-link:hover { border-color: var(--teal); box-shadow: 5px 5px 0 var(--sunshine); } .card .go { font-size: 13.5px; font-weight: 700; margin-top: 10px; color: var(--coral-deep); } /* Homepage resource cards: left-aligned titles with an inline icon, chevron (not a text link) at the bottom-right like product cards. */ .card.resource-card { position: relative; padding-bottom: 44px; } .card.resource-card h3 { text-align: left; display: flex; align-items: center; gap: 8px; } .resource-icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--teal); } .resource-icon svg { width: 100%; height: 100%; display: block; } /* Whole-card links: age and tier cards are anchors on generated pages (the template's divs are rewritten to links), like the product and guide cards that already carry their own rule. */ a.card-link { text-decoration: none; color: inherit; } a.card-link:hover { color: inherit; } /* Product cards: the whole card is the link; a small chevron at the bottom-right is the click affordance (no repeated text link) */ a.product-card { position: relative; text-decoration: none; color: inherit; padding-bottom: 44px; background: var(--surface); } a.product-card:hover { color: inherit; } .card-chevron { position: absolute; right: 14px; bottom: 12px; width: 27px; height: 27px; border-radius: 50%; background: var(--teal); border: 1px solid var(--teal); color: var(--on-teal); transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--sunshine); display: flex; align-items: center; justify-content: center; } .card-chevron svg { width: 15px; height: 15px; display: block; } .panel { background: var(--surface-warm); border: 1px solid var(--line); border-radius: 20px; padding: 18px; } .rejected-list .panel { margin-top: 16px; } .panel p:last-child { margin-bottom: 0; } .callout { border: 1.5px solid var(--sunshine); background: var(--sunshine-soft); border-radius: 20px; padding: 18px; margin-top: 16px; } .callout p:last-child { margin-bottom: 0; } /* Tier badge — pill chip in Playroom tokens; the receipt lines on the chip grow with documentation depth (names/meaning unchanged) */ .badge { display: inline-flex; align-items: center; gap: 8px; background: var(--sunshine-soft); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 14px 4px 8px; font-size: 12.5px; font-weight: 700; margin-bottom: 10px; align-self: flex-start; } /* Squared tier chip (token, B Playroom): solid depth color, white text, no border. Colors from brand-variants.html (repo root): stated #8aa8a5 (soft gray-teal), program #e8873a (warm amber), documented var(--teal). Receipt icon (.rcpt) unchanged. */ .badge-stated { background: #8aa8a5; color: #fff; border: none; } .badge-program { background: #e8873a; color: #fff; border: none; } .badge-documented { background: var(--teal); color: #fff; border: none; } .rcpt { display: inline-block; width: 18px; background: #FFF9F0; border: 1.5px solid var(--teal); border-bottom: none; border-radius: 3px 3px 0 0; padding: 3px 3px 2px; flex: 0 0 auto; } .rcpt i { display: block; height: 2px; margin: 0 1px 3px; background: var(--teal); } .rcpt i:last-child { margin-bottom: 1px; } /* Receipt panel */ .receipt { background: var(--surface); border: 1.5px solid var(--teal); border-radius: 20px; padding: 16px 18px; font-size: 14.5px; } .receipt .rhead { text-align: center; font-size: 12px; letter-spacing: .16em; color: var(--teal); margin-bottom: 10px; text-transform: uppercase; font-weight: 700; } .receipt .row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; border-bottom: 1px dashed var(--line-strong); padding: 5px 0; } .receipt .row:last-child { border-bottom: none; } .receipt .row span:first-child { font-weight: 600; } .receipt .row span:last-child { text-align: left; font-weight: 400; } /* Fact rows (product template) */ .facts { border: 1px solid var(--line); background: var(--bg); border-radius: 20px; overflow: hidden; } .facts .frow { display: flex; justify-content: space-between; gap: 16px; padding: 5px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; } .facts .frow:last-child { border-bottom: none; } .facts .frow span:first-child { color: var(--muted); } .facts .frow span:last-child { font-weight: 700; text-align: right; } /* Product page layout: confirm strip under the photo, Why plus receipt note in two columns, Details plus Retire in two columns. */ .p-confirm { font-size: 13.5px; color: var(--muted); margin-top: 10px; line-height: 1.45; } .p-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-top: 32px; } /* Like .hero-split above: grid items default to min-width auto, so one unbreakable token (a full URL in the receipt note) forces the column past the viewport on narrow screens. */ .p-cols > * { min-width: 0; overflow-wrap: break-word; } .p-facts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; margin-top: 32px; } .retire-box { background: var(--surface-warm); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; font-size: 15px; } .p-tier-meaning { font-size: 15px; } .p-missing { font-size: 15px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); } .btn { display: inline-flex; align-items: center; gap: 8px; background: var(--coral); color: var(--on-coral); border: 1.5px solid var(--coral); border-radius: 999px; box-shadow: 4px 4px 0 var(--sunshine); font-weight: 700; font-size: 15px; padding: 11px 22px; text-decoration: none; cursor: pointer; } .btn:hover { background: var(--coral-deep); border-color: var(--coral-deep); color: var(--on-coral); } .btn.teal { background: var(--teal); border-color: var(--teal); color: var(--on-teal); } .btn.teal:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--on-teal); } .btn.ghost { background: transparent; color: var(--teal); border-color: var(--teal); box-shadow: none; } .btn.ghost:hover { background: var(--teal); border-color: var(--teal); color: var(--on-teal); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: var(--coral-deep); flex: 0 0 auto; } .btn-icon svg { width: 14px; height: 14px; display: block; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } #p-buy-links { margin-top: 14px; } #p-buy-links:empty { display: none; } .buy-list { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .buy-list-label { font-weight: 700; margin-right: 2px; } /* Journey / age chips — clickable links to the six age hubs */ .journey { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 18px 0 4px; font-size: 13px; font-weight: 600; } .journey b { background: var(--teal); color: var(--on-teal); border-radius: 999px; padding: 5px 12px; } .journey a { background: var(--surface-warm); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 12px; text-decoration: none; } .journey a:hover { border-color: var(--teal); color: var(--teal-deep); } .journey a:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; } /* Notes (author blocks) */ .notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; } .note { border: 1px solid var(--line); background: var(--surface-warm); border-radius: 20px; padding: 16px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; } .note .avatar { width: 64px; height: 64px; background: var(--slot-bg); border: 1.5px solid var(--line-strong); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; } .note p { font-size: 14px; margin: 0; } /* Hiro pop-out panel slot (brand template) */ .pop { border: 1px solid var(--line); background: var(--surface-warm); border-radius: 20px; padding: 20px; margin-top: 36px; display: grid; grid-template-columns: 1fr 220px; gap: 20px; align-items: start; } .pop h2 { margin-top: 0; } .pop blockquote { font-size: 18px; line-height: 1.5; margin: 0 0 10px; } .pop .cap { font-size: 13px; color: var(--muted); } /* Guide comments — cards like the caveats (2 columns desktop, 1 column mobile via the .cards rule), one character per card, so more characters can join later. Each card is a link to its guide (no info icon). Inside a card: text and title on the left, the character cutout right-aligned on the right. Illustrations are cutouts, no border, no frame, max 170px like the homepage guide art, with the caption attached to the image base. On mobile the card stacks, image first. */ .guide-comments { margin-top: 0; } a.guide-comment { text-decoration: none; color: inherit; } a.guide-comment:hover { color: inherit; } .guide-comment:has(figure) { display: grid; grid-template-columns: 1fr minmax(0, min(37%, 170px)); gap: 20px; align-items: start; } .guide-comment figure { grid-column: 2; grid-row: 1; margin: 0; max-width: 170px; width: 100%; } .guide-comment .guide-text { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: break-word; } .guide-comment figure img { width: 100%; height: auto; display: block; border: none; background: none; } .guide-comment figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.45; } .guide-comment h3 { margin-top: 0; } .guide-comment blockquote { font-size: 18px; line-height: 1.5; margin: 0; } .guide-comment .cap { font-size: 13px; color: var(--muted); margin-top: 10px; } /* Steps & checklists — styled list items, not form controls */ ol.steps, ul.checklist { margin: 0; padding: 0; list-style: none; counter-reset: step; } ol.steps li, ul.checklist li { counter-increment: step; position: relative; padding: 10px 0 10px 44px; border-bottom: 1px dashed var(--line-strong); font-size: 15px; line-height: 1.6; } ol.steps li:last-child, ul.checklist li:last-child { border-bottom: none; } ol.steps li::before, ul.checklist li::before { content: counter(step); position: absolute; left: 0; top: 8px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--coral); color: var(--on-coral); font-weight: 700; font-size: 14px; } ul.plain { margin: 0 0 10px; padding-left: 20px; } ul.plain li { font-size: 15px; line-height: 1.6; margin-bottom: 6px; } footer.page-end { margin-top: 36px; font-size: 12.5px; line-height: 1.55; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; } /* ---------- Shared footer: full open sitemap ---------- */ .site-footer { margin-top: 44px; border-top: 2px solid var(--line); padding-top: 22px; } .sitemap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .sitemap h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .sitemap ul { list-style: none; margin: 0; padding: 0; } .sitemap li { margin: 0 0 3px; font-size: 13.5px; line-height: 1.45; } .sitemap button, .sitemap a { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; color: var(--teal); text-align: left; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; } .sitemap button:hover, .sitemap a:hover { color: var(--teal-deep); } .sitemap button:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; } .sitemap .plain-item { color: var(--muted); padding: 2px 0; display: inline-block; } .site-footer-note { margin-top: 20px; font-size: 12.5px; line-height: 1.55; color: var(--muted); text-align: center; } @media (max-width: 720px) { .hero-split, .cards, .cards.three, .notes, .cols, .pop, .p-cols, .p-facts-row { grid-template-columns: 1fr; } .cards:has(> .card-wrap) { columns: 1; } /* The three-column masonry rule outranks the plain rule above (one more class), so without this the Newly added teaser grid kept 3 tiny columns on phones. */ .cards.three:has(> .card-wrap) { columns: 1; } /* Guide comment cards keep their internal 2-column layout on mobile too (text left, illustration right); only the outer cards grid stacks. */ .sitemap { grid-template-columns: 1fr 1fr; } .site-head { flex-direction: row; align-items: center; gap: 8px; position: relative; } /* The mobile menu is absolutely positioned inside the statically-positioned nav, so the header must be its positioned ancestor: without this, top:100% resolves against the viewport and the menu lands below it (the reported "scroll down to find it" bug). */ .wordmark { align-self: center; padding: 7px 15px 7px 8px; gap: 8px; } .wm-dot { width: 38px; height: 38px; } .wm-dot svg { width: 20px; height: 25px; } .wm-name { font-size: 17.5px; } .wm-tag { font-size: 11px; } .gray-box.hero { min-height: 220px; } /* Compact mobile header: wordmark + hamburger; the grouped menu carries search at the top */ .nav-row .desktop-entry, .nav-row .search-form { display: none; } .menu-toggle { display: inline-flex !important; } /* Menu hangs from the header itself (full header width, below the wordmark row) rather than covering it */ .site-nav { position: static; } .mobile-menu { top: calc(100% + 8px); right: 0; left: 0; width: auto; } /* Filter sheet: collapsed behind the Filters toggle */ .filter-toggle { display: inline-flex; } .filter-sheet { display: none; margin-top: 8px; } .filter-bar.open .filter-sheet { display: block; } .filter-field { flex: 1 1 100%; } .filter-field select { flex: 1 1 auto; max-width: none; } .filter-reset { margin-left: 0; } /* Per-product notes: stack full width below the card, never side by side */ .product-notes { width: 100%; } .bubble { width: 100%; } } /* Fact pills on product cards (token meta-pills). */ .meta-pills { display: flex; gap: 8px; flex-wrap: wrap; } .meta-pill { font-size: 12.5px; font-weight: 600; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 11px; color: var(--ink); } /* Product-card design alignment (token, B Playroom teaser): brandline weight/leading/margins, description margin, meta spacing, buyline leading, card border width. Product cards only; chip, photo frame, card padding/chevron spacing, and palette are unchanged here. */ a.product-card { border-width: 1.5px; } a.product-card h3 { margin: 0 0 6px; } .card .brandline { font-weight: 600; margin: -2px 0 10px; line-height: 1.35; } a.product-card p { margin: 0 0 14px; } .meta-pills { margin-bottom: 16px; } .card .buy { line-height: 1.45; padding-top: 0; } /* ---------- Contact + suggestion forms (2026-10-25) ---------- Playroom form tokens: white fields on the warm page, ink labels, line-strong borders (visible on white, unlike the pale line), 12px field radius, 16px text (no iOS auto-zoom), coral focus matching the site's other inputs, teal pill submit (coral stays purchase-only per the button guideline). */ .rr-form { max-width: 640px; } .form-field { margin-bottom: 16px; } .form-field label { display: block; font-weight: 700; margin-bottom: 6px; } .form-optional { font-weight: 400; color: var(--muted); } .form-req { color: var(--coral-deep); } .form-field input[type="text"], .form-field input[type="email"], .form-field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; margin: 0; } .form-field textarea { min-height: 120px; resize: vertical; } .form-field input:focus-visible, .form-field textarea:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; } .form-hint { font-size: 14px; color: var(--muted); margin: 6px 0 0; } .form-honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .form-status { border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; font-weight: 700; } .form-status.form-ok { color: var(--teal-deep); border: 1.5px solid var(--teal); background: var(--surface); } .form-status.form-err { color: var(--coral-deep); border: 1.5px solid var(--coral-deep); background: var(--surface); } .form-note { font-size: 14px; color: var(--muted); margin: 12px 0 0; } /* ---------- Token form system (2026-10-25) ---------- Playroom form tokens from the brand-variants token page ("Form design — all form pieces"), applied to the site's forms, search, and filters. Token is the source. Documented deviations: field font stays 16px (iOS no-zoom; the token sample is 15.5px); the header search keeps its compact pill geometry; the More filters disclosure and the mobile filter toggle are site scaffolding, kept, with every piece inside them a token piece. */ :root { --field-bg: #FFFDF7; --field-border: #DEC794; --focus-ring-soft: rgba(14,124,123,.20); --form-error: #C2410C; --form-error-ring: rgba(242,100,48,.16); } .form-field input[type="text"], .form-field input[type="email"], .form-field textarea { background: var(--field-bg); border: 2px solid var(--field-border); border-radius: 16px; padding: 12px 16px; } .form-field label { font-size: 14px; } .form-req { color: var(--form-error); } .form-field input:focus-visible, .form-field textarea:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--focus-ring-soft); } .form-hint { font-size: 13px; } .form-status { border-radius: 16px; padding: 12px 15px; font-size: 14px; font-weight: 600; } .form-status.form-ok { color: var(--ink); border-color: var(--teal); } .form-status.form-err { color: var(--form-error); border-color: var(--form-error); } .rr-form .btn.teal { box-shadow: 4px 4px 0 var(--sunshine); } /* Header search: token field colors + focus, compact pill kept. */ .search-form input { background: var(--field-bg); border: 2px solid var(--field-border); } .search-form input:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--focus-ring-soft); } /* Filter pills (token .fpill). */ .filter-group { margin: 0 0 4px; } .filter-group-label { display: block; font-weight: 700; font-size: 13.5px; color: var(--ink); margin: 0 0 7px; } .fpills { display: flex; gap: 8px; flex-wrap: wrap; } .fpill { appearance: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink); background: transparent; border: 2px solid var(--field-border); border-radius: 999px; padding: 7px 14px; min-height: 38px; } .fpill:hover { border-color: var(--teal); } .fpill:focus-visible { outline: 3px solid var(--focus-ring-soft); outline-offset: 1px; } .fpill[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; } /* Filter search: token search field with inset icon + clear. */ .filter-field.filter-search { background: transparent; border: 0; border-radius: 0; padding: 0; position: relative; flex: 1 1 210px; } .filter-field.filter-search input { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--field-bg); border: 2px solid var(--field-border); border-radius: 16px; padding: 12px 44px 12px 42px; min-height: 44px; } .filter-field.filter-search input::-webkit-search-cancel-button { display: none; } .filter-field.filter-search input:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--focus-ring-soft); } .filter-search .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; pointer-events: none; } .filter-search .search-icon svg { width: 18px; height: 18px; display: block; } .filter-search .search-clear { appearance: none; cursor: pointer; font: inherit; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; min-height: 32px; border: none; border-radius: 999px; background: transparent; color: var(--muted); font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center; } .filter-search .search-clear:hover { color: var(--ink); background: var(--bg); } .filter-search .search-clear[hidden] { display: none; } .filter-search .search-clear:focus-visible { outline: 3px solid var(--focus-ring-soft); outline-offset: 1px; } /* Active filter chips: token removable chips. */ .active-chips:not(:empty) { background: var(--bg); border: 1.5px solid var(--line); border-radius: 16px; padding: 11px 14px; } .chip { background: var(--teal); border-color: var(--teal); color: #fff; border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; font-weight: 700; } .chip:hover { border-color: var(--teal); } .chip .chip-x { color: #fff; background: rgba(255,255,255,.22); width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin-left: 4px; } /* Filter reset: token text-only (ghost) treatment, icon kept. */ .filter-reset { background: transparent; border: none; padding: 6px 4px; min-height: 32px; font-size: 13.5px; font-weight: 700; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; } .filter-reset:hover { color: var(--teal-deep); border-color: transparent; background: transparent; } .filter-reset:focus-visible { outline: 3px solid var(--focus-ring-soft); outline-offset: 1px; } /* ---------- Brand/Type dropdowns (2026-10-25) ---------- Chris: Brand and Type filters go back to dropdowns — too many options for pills (28 brands and counting). Token field styling (2px #DEC794, 16px radius, #FFFDF7, teal focus ring); bar-context 14px type to sit with the pills. */ .filter-select { appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--field-bg); border: 2px solid var(--field-border); border-radius: 16px; padding: 11px 36px 11px 14px; min-height: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f737c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .filter-select:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--focus-ring-soft); } /* ---------- Receipt mobile overflow fix (2026-10-25) ---------- Melissa & Doug brand page scrolled horizontally on phones: .cite-tag is nowrap site-wide, and flex rows refuse to shrink below content width (min-width auto), so a long cite-tag forced the receipt row wider than the viewport. Scoped to receipts: cite-tags wrap there, row children may shrink, and long tokens break instead of overflowing. Prose citations elsewhere keep nowrap. */ .receipt .row > * { min-width: 0; } .receipt .row { overflow-wrap: break-word; } .receipt .cite-tag { white-space: normal; } /* ---------- Receipt value lists as real lists (2026-10-25) ---------- Chris: lists should look like lists. Multi-value receipt rows are real