/* ============================================================ Design tokens — Fancy Monkey Studios Values extracted from the legacy stylesheets so the rebuild inherits the site's actual palette rather than inventing one: fancymonkey/Web/FMS.css consumer chrome fancymonkey/Web/FMSScreenStyle.css fancymonkey/Radio/FMS.css station portal Content copy stays textually identical; presentation is modernized. These tokens are the single source of truth for colour, type, spacing and motion across all three PWAs. ============================================================ */ :root { /* ---- Brand ------------------------------------------------ --jungle is the radio portal's signature green (#007f6d). --deep-red is the accent used for callouts in page copy. */ --fms-jungle: #007f6d; --fms-jungle-dark: #005a4e; --fms-jungle-light: #2a9e8c; --fms-deep-red: #990000; --fms-navy: #1a2b4a; /* ---- Jungle Jam series palette ---------------------------- The twelve colours used across the series artwork, supplied by Jake 27 Jul 2026 as a swatch sheet. Transcribed by eye from the image, so these are close rather than exact — replace them if the original swatch file turns up. The sheet is arranged as PAIRS: each square shows a background with a sanctioned partner inside it. Those pairings are noted below and are worth honouring — they are how the series has always combined these. ⚠ These are ILLUSTRATION colours, not text colours. Pale yellow on muted teal is a charming pairing and about 1.8:1 in contrast — nowhere near the 4.5:1 body copy needs. They drive the DECORATIVE layer: chrome, cards, headers, art frames. Body text stays near-black on white, which is the whole reason the site went light in the first place. */ --fms-sage: #7fc79b; /* pairs with navy-bright */ --fms-navy-bright: #0b2fa0; /* pairs with lime */ --fms-lime: #e8f7ae; /* pairs with slate, navy-bright */ --fms-slate: #7fa8bc; /* pairs with lime */ --fms-pink: #fa5c8c; /* pairs with apricot */ --fms-apricot: #f7c07a; /* pairs with pink */ --fms-powder: #cfe2f5; /* pairs with sage, crimson */ --fms-crimson: #ce1256; /* pairs with powder, pale-yellow */ --fms-pale-yellow: #f7f7a0; /* pairs with crimson, teal-muted */ --fms-teal-muted: #8fbdb8; /* pairs with pale-yellow */ --fms-pale-pink: #f7ddee; /* pairs with periwinkle */ --fms-periwinkle: #b6bdf0; /* pairs with pale-pink, crimson */ --fms-salmon: #f5a199; /* pairs with lime */ /* Darkened crimson, for text and hover states on white. The palette crimson is ~5.5:1 on white — fine for chrome, thin for small type — so links use this instead. NOT a palette colour; it is the palette crimson taken down until it passes. */ --fms-crimson-deep: #a00e43; /* ---- Neutrals --------------------------------------------- */ --fms-ink: #3a3a3a; /* legacy body background, now text */ --fms-body: #555555; /* legacy .Copy colour */ --fms-muted: #7a7a7a; --fms-rule: #e6e6e6; --fms-surface: #f1f1f1; /* legacy off-white */ --fms-surface-alt: #fafafa; --fms-white: #ffffff; /* Text and icons sitting ON the accent bar — header, section nav, menu panel, primary buttons, the skip link. Deliberately NOT --fms-white. That token means "a white surface" and is darkened to #2a2a2a in dark mode, which is correct for panels and wrong for type: it turned the site title charcoal-on-teal and very nearly unreadable (found 27 Jul 2026). The accent stays the same colour in both schemes, so anything drawn on it must too. This token is never overridden below. */ --fms-on-accent: #ffffff; /* ---- Semantic --------------------------------------------- */ --fms-bg: var(--fms-surface); --fms-fg: var(--fms-body); --fms-heading: var(--fms-ink); --fms-link: var(--fms-jungle-dark); --fms-link-hover: var(--fms-jungle); --fms-focus: var(--fms-jungle); --fms-danger: #9b1c1c; --fms-success: #1c7c4a; --fms-warning: #9a6700; /* ---- Type ------------------------------------------------- Fonts are SELF-HOSTED as woff2 in /assets/fonts/. The legacy site pulled from fonts.googleapis.com; that is an external dependency and a privacy leak, so we drop it. See docs/ARCHITECTURE.md → Open items. */ --fms-font-body: "Roboto", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; --fms-font-display: "Fredericka the Great", "Bernhard Modern Roman", "Adobe Caslon Pro", Georgia, "Times New Roman", serif; --fms-font-slab: "Josefin Slab", Georgia, "Times New Roman", Times, serif; --fms-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fluid scale — clamp() replaces the legacy percentage sizing, which compounded unpredictably through nested elements. */ --fms-text-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem); --fms-text-sm: clamp(0.84rem, 0.81rem + 0.15vw, 0.94rem); --fms-text-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.12rem); --fms-text-lg: clamp(1.18rem, 1.10rem + 0.40vw, 1.40rem); --fms-text-xl: clamp(1.45rem, 1.30rem + 0.75vw, 1.90rem); --fms-text-2xl: clamp(1.80rem, 1.50rem + 1.50vw, 2.80rem); --fms-text-3xl: clamp(2.20rem, 1.70rem + 2.50vw, 3.90rem); --fms-leading-tight: 1.2; --fms-leading-normal: 1.6; /* legacy .Copy line-height */ --fms-leading-loose: 1.8; /* Legacy copy used generous letter/word spacing (.08em / .15em). Kept, softened slightly, so the text reads as it always has. */ --fms-tracking-body: 0.04em; --fms-tracking-display: 0.03em; --fms-word-spacing: 0.10em; --fms-weight-light: 300; --fms-weight-normal: 400; --fms-weight-medium: 500; --fms-weight-bold: 700; --fms-weight-black: 900; /* ---- Spacing (4px base) ----------------------------------- */ --fms-space-1: 0.25rem; --fms-space-2: 0.5rem; --fms-space-3: 0.75rem; --fms-space-4: 1rem; --fms-space-5: 1.5rem; --fms-space-6: 2rem; --fms-space-7: 3rem; --fms-space-8: 4rem; --fms-space-9: 6rem; /* ---- Layout ----------------------------------------------- Legacy .Container was a fixed 960px. Replaced with a fluid measure so the site works on phones, which is most of the traffic a kids' audio site sees now. */ --fms-measure: 68ch; /* comfortable reading width */ --fms-width-page: min(100% - 2rem, 1100px); --fms-width-narrow: min(100% - 2rem, 720px); /* ---- Shape & depth ---------------------------------------- */ --fms-radius-sm: 4px; --fms-radius: 8px; --fms-radius-lg: 16px; --fms-radius-pill: 999px; --fms-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06); --fms-shadow: 0 2px 8px rgb(0 0 0 / 0.10); --fms-shadow-lg: 0 8px 28px rgb(0 0 0 / 0.14); /* The legacy .TitleText 4px hard text-shadow, kept as an option */ --fms-shadow-title: 3px 3px 4px rgb(0 0 0 / 0.22); /* ---- Motion ----------------------------------------------- The old site had elaborate entrance animations (headlines rotating in from 55deg, characters scaling up). Toned down to something that doesn't fight the reader, and fully disabled under prefers-reduced-motion in base.css. */ --fms-ease: cubic-bezier(0.4, 0, 0.2, 1); --fms-ease-out: cubic-bezier(0, 0, 0.2, 1); --fms-duration-fast: 120ms; --fms-duration: 240ms; --fms-duration-slow: 420ms; /* ---- Z-index ---------------------------------------------- */ --fms-z-base: 0; --fms-z-sticky: 100; --fms-z-nav: 200; --fms-z-overlay: 300; --fms-z-modal: 400; --fms-z-toast: 500; /* ---- Touch ------------------------------------------------- */ --fms-touch-target: 44px; /* minimum tappable size */ } /* ------------------------------------------------------------ Per-app accents. Each PWA sets a data-app attribute on ; only the accent shifts, so the three properties stay visibly related. ------------------------------------------------------------ */ /* The station portal shares the consumer palette (Jake, 27 Jul 2026). Same brand, same artwork, same people looking at it — and one palette rather than two that drift apart. Backstage keeps its own colours. That distinction is worth maintaining; this one wasn't. */ [data-app="radio"] { --fms-accent: var(--fms-navy-bright); --fms-accent-dark: #081f6e; --fms-on-accent: var(--fms-white); --fms-heading: var(--fms-navy-bright); --fms-link: var(--fms-crimson-deep); --fms-link-hover: var(--fms-crimson); --fms-focus: var(--fms-navy-bright); --fms-bg: #fbfbfa; --fms-surface: var(--fms-white); --fms-surface-alt: var(--fms-powder); --fms-fg: #2b2b2b; --fms-body: #2b2b2b; } /* ── Consumer site — the Jungle Jam series palette ────────────── Restyled 27 Jul 2026. Revert point: commit ed72026. Only the CONSUMER app moves. Radio keeps the jungle teal and Backstage keeps its navy, so the three remain tellable apart at a glance — which is a real requirement for Backstage (see below), not just tidiness. Crimson is the chrome rather than the palette's bright navy, because Backstage is already navy and two blue apps would blunt exactly the distinction that block exists to protect. Crimson is also the closest thing the series has to a signature: it is the gift certificate, and it recurs across the covers. To try a different chrome colour, change --fms-accent here and nothing else. Every header, tab, menu panel and primary button follows it. */ [data-app="consumer"] { /* Navy masthead, sage tab row (Jake, 27 Jul 2026) — square one of the swatch sheet, which pairs exactly these two. The masthead is the accent, so the menu panel and primary buttons follow it and the seasonal colours have one clear place to land. White on this navy is about 11:1. The tab row is separate on purpose. It stays sage while the masthead dresses up for Halloween or Earth Day — the site gets decorated rather than repainted. Its ink is navy, because every green in this palette is light: white on sage is about 2:1 and unreadable, navy on sage about 5.5:1. */ --fms-accent: var(--fms-navy-bright); --fms-accent-dark: #081f6e; --fms-on-accent: var(--fms-white); --fms-nav-bg: var(--fms-sage); --fms-nav-ink: var(--fms-navy-bright); /* Headings in the bright navy — 11:1 on white, and the palette's own partner for pale backgrounds. */ --fms-heading: var(--fms-navy-bright); /* Links use the deepened crimson so small type clears 4.5:1. Hover brightens to the true palette colour. */ --fms-link: var(--fms-crimson-deep); --fms-link-hover: var(--fms-crimson); --fms-focus: var(--fms-navy-bright); /* Page stays near-white; the palette does the decorative work. Cards pick up powder blue, which the sheet pairs with both sage and crimson. */ --fms-bg: #fbfbfa; --fms-surface: var(--fms-white); --fms-surface-alt: var(--fms-powder); /* Body copy stays near-black. Deliberately NOT a palette colour: these were chosen for illustration, and none of the mid-tones clears 4.5:1 at body size. */ --fms-fg: #2b2b2b; --fms-body: #2b2b2b; } [data-app="backstage"] { /* Deliberately distinct — an admin should never be unsure whether they are looking at the public site. */ --fms-accent: var(--fms-navy); --fms-accent-dark: #0f1b30; --fms-bg: #eef1f5; } /* ------------------------------------------------------------ Dark mode — REMOVED, 27 Jul 2026 (Jake's call). There was a `prefers-color-scheme: dark` block here that overrode the surface, text and rule tokens. It is gone on purpose, and this note is what stops it being helpfully reinstated. Every piece of artwork this brand owns is drawn for white. The gift certificate is a saturated card with a white margin; the chapter book covers, the scanned press reviews, the watercolour frames and the hand-lettered "Little Dogs on the Prairie" title are all print artefacts on paper. On a dark background the transparent line art very nearly vanished — which is why `.Copy img` still carries a white card in consumer.css. That fix was the design fighting the content, and the content was here first. The dark block also caused a real bug. It set `--fms-white: #2a2a2a` on the reasoning that nothing should sit on hardcoded white in dark mode — correct for panels, wrong for type, because the site title used the same token for white ink on the teal bar and turned charcoal-on-teal. One token, two jobs, and dark mode could only satisfy one of them. See --fms-on-accent above, which exists because of this. And the audience: a children's audio storybook company, bought by parents, reads better bright — closer to the printed books it sells than to a developer tool at midnight. If dark mode is ever wanted, it should be DESIGNED, not derived by inverting this palette, and the artwork needs light-on-dark cuts to go with it. ------------------------------------------------------------ */