/* A New Page, AGE PALETTES (/css/anp-age.css, beauty pass Batch 3, Part 9 B1 to B4, 2026-10-19). Pairs with /js/anp-age.js, which sets before first paint. Colours get richer with age. Every page takes the palette of the age it is for; no child picked = parent. Load it LAST (after design/pass-dark.css), so it re-points the tokens the app already uses: --anp-paper-lamp (page) --anp-card-warm (cards) --anp-parchment (wells, bands) --anp-ink / --anp-ink-soft (text) and the marketing tokens --anp-cream --anp-paper --anp-milk --anp-text --anp-text-muted. Only is read (never body[data-age], which the public pages use for younger/older art). Light palettes (Littles, 5 to 10) apply on screen in day mode only: the night mode keeps its own measured pairs. Teens: the night look is the teen palette (anp-age.js turns it on unless a grown-up chose Day); this file deepens it to midnight #131C34 with navy cards. Printing stays black on white (screen only). Every text pair (measured, Part 9 B1): Littles ink #2B2350 on milk #FFF6E6 13.4, on sky #DDF0FF 12.3, on petal #FFE6EF 12.2; soft #5B4E7A on milk 6.95 5 to 10 ink #13294B on #FFFBF2 14.1, on parchment #F3E6C8 11.7, on mint #E6F6E8 12.6; soft #4B5674 7.05; teal #0B6E6E 5.86 Teen #FFF8EC on midnight #131C34 15.9, on navy #1F2E55 12.9; muted #D9D2C4 on navy 9.6; sea-glass #7FD8C8 10.1 Gold buttons keep navy text (#1F2E55 on #F2B544 7.3). Nothing here animates except one 300ms colour cross-fade when the age changes on the page (the reading check), and none at all under reduced motion. */ :root[data-age="littles"]{--age-bg:#FFF6E6;--age-bg-2:#DDF0FF;--age-bg-3:#FFE6EF;--age-ink:#2B2350;--age-ink-soft:#5B4E7A;--age-accent:#2F6B3A;--age-btn:#FFC857;--age-btn-ink:#1F2E55;--age-edge:#E8A93A;--age-radius:28px;--age-card:#FFFFFF} :root[data-age="kids"]{--age-bg:#FFFBF2;--age-bg-2:#F3E6C8;--age-bg-3:#E6F6E8;--age-ink:#13294B;--age-ink-soft:#4B5674;--age-accent:#0B6E6E;--age-coral:#C4442F;--age-btn:#FFC53D;--age-btn-ink:#1F2E55;--age-edge:#D9951A;--age-radius:22px;--age-card:#FFFFFF} :root[data-age="teen"]{--age-bg:#131C34;--age-bg-2:#1F2E55;--age-bg-3:#5A1A2B;--age-bg-4:#173A2C;--age-ink:#FFF8EC;--age-ink-soft:#D9D2C4;--age-accent:#7FD8C8;--age-rose:#F2A7B5;--age-btn:#F4ECDC;--age-btn-ink:#131C34;--age-edge:#C9A24A;--age-radius:14px;--age-card:#1F2E55} :root,:root[data-age="parent"]{--age-shadow-card:0 1px 2px rgba(19,28,52,.06),0 12px 32px rgba(19,28,52,.10)} :root[data-age="teen"]{--age-shadow-card:inset 0 1px 0 rgba(255,255,255,.06),0 16px 40px rgba(0,0,0,.45)} /* ---- the day palettes (Littles, 5 to 10): the app's own tokens re-pointed ---- */ @media screen and (prefers-color-scheme: light){ :root[data-age="littles"]:not([data-theme="dark"]),:root[data-age="kids"]:not([data-theme="dark"]){ --anp-paper-lamp:var(--age-bg);--anp-cream:var(--age-bg);--anp-parchment:var(--age-bg-2);--anp-paper:var(--age-bg-2); --anp-card-warm:var(--age-card);--anp-milk:var(--age-card); --anp-ink:var(--age-ink);--anp-ink-soft:var(--age-ink-soft);--anp-text:var(--age-ink);--anp-text-muted:var(--age-ink-soft); --anp-littles-milk:var(--age-bg)} } @media screen{ :root[data-age="littles"][data-theme="light"],:root[data-age="kids"][data-theme="light"]{ --anp-paper-lamp:var(--age-bg);--anp-cream:var(--age-bg);--anp-parchment:var(--age-bg-2);--anp-paper:var(--age-bg-2); --anp-card-warm:var(--age-card);--anp-milk:var(--age-card); --anp-ink:var(--age-ink);--anp-ink-soft:var(--age-ink-soft);--anp-text:var(--age-ink);--anp-text-muted:var(--age-ink-soft); --anp-littles-milk:var(--age-bg)} } /* ---- teen: the night look, deepened to midnight with navy cards ---- */ @media screen and (prefers-color-scheme: dark){ :root[data-anp-app][data-age="teen"]:not([data-theme="light"]){--anp-paper-lamp:#131C34;--anp-cream:#131C34;--anp-card-warm:#1F2E55;--anp-milk:#1F2E55} } @media screen{ :root[data-anp-app][data-age="teen"][data-theme="dark"]{--anp-paper-lamp:#131C34;--anp-cream:#131C34;--anp-card-warm:#1F2E55;--anp-milk:#1F2E55} } /* ---- soft textures (B4): static, behind everything, never over words. Paper grain 4% on Littles and 5 to 10, a very faint still star field on teen midnight. pointer-events:none, so nothing is ever covered for a tap. ---- */ @media screen{ :root[data-age="littles"]:not([data-theme="dark"]) body::after,:root[data-age="kids"]:not([data-theme="dark"]) body::after, :root[data-anp-app][data-age="teen"][data-theme="dark"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none} /* the body is its own layer, so the texture sits just above the page colour and under every word and picture */ :root[data-age="littles"]:not([data-theme="dark"]) body,:root[data-age="kids"]:not([data-theme="dark"]) body,:root[data-anp-app][data-age="teen"][data-theme="dark"] body{isolation:isolate} :root[data-age="littles"]:not([data-theme="dark"]) body::after,:root[data-age="kids"]:not([data-theme="dark"]) body::after{opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} :root[data-anp-app][data-age="teen"][data-theme="dark"] body::after{opacity:.5; background-image:radial-gradient(1px 1px at 12% 18%,rgba(255,248,236,.22) 50%,transparent 51%),radial-gradient(1px 1px at 68% 9%,rgba(255,248,236,.18) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 84% 42%,rgba(127,216,200,.16) 50%,transparent 51%),radial-gradient(1px 1px at 33% 61%,rgba(255,248,236,.14) 50%,transparent 51%),radial-gradient(1px 1px at 52% 83%,rgba(255,248,236,.16) 50%,transparent 51%),radial-gradient(1px 1px at 91% 77%,rgba(255,248,236,.12) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 6% 92%,rgba(242,167,181,.12) 50%,transparent 51%); background-size:420px 420px} } /* ---- the one colour cross-fade (the reading check turns to the age as it is typed); still under reduced motion ---- */ @media screen and (prefers-reduced-motion: no-preference){ :root[data-age] body,:root[data-age] #app > .card,:root[data-age] .anp-appbar,:root[data-age] nav{transition:background-color 300ms ease,color 300ms ease} } @media (prefers-reduced-motion: reduce){ :root[data-age] body,:root[data-age] #app > .card,:root[data-age] .anp-appbar,:root[data-age] nav{transition:none!important} } @media print{:root[data-age] body::after{content:none!important;display:none!important}} /* teen midnight under the world band too (the world surface mixes the night cream; midnight is the teen page) */ @media screen{:root[data-anp-app][data-age="teen"][data-theme="dark"] body{background-color:#131C34!important}} /* 5 to 10 and Littles: the page is the age colour, not a grey wash of the world (the world lives in its band) */ @media screen and (prefers-color-scheme: light){:root[data-age="kids"]:not([data-theme="dark"]) body.w-surface[data-world][data-lane],:root[data-age="littles"]:not([data-theme="dark"]) body.w-surface[data-world][data-lane]{background-color:var(--age-bg)!important}} @media screen{:root[data-age="kids"][data-theme="light"] body.w-surface[data-world][data-lane],:root[data-age="littles"][data-theme="light"] body.w-surface[data-world][data-lane]{background-color:var(--age-bg)!important}} /* ---- READER COMFORT (Beauty Pass Oct 24, item 9): a page tint and a line space a grown-up picks in Settings ---- /js/anp-age.js reads anp_comfort_v1 and sets before first paint. No saved choice = nothing here applies, so every page stays exactly as it was. Tints are day mode only (the night look keeps its own measured pairs). Reading text (ink #13294B / #1F2E55 / #2B2350) on page, card and well, measured: cream bg #FAF0D7 card #FFFAEC well #F3E4BC 11.7+ to 13.9 sage bg #E4EFE2 card #F4FAF2 well #D5E6D2 10.2+ to 13.7 blue bg #E2EEF8 card #F3F9FD well #D2E4F3 10.2+ to 13.7 gray bg #EBEBEB card #F6F6F6 well #DCDCDC 9.7+ to 13.4 Quiet text (ink-soft) is 5.3 or better on every one. A tint changes colour only: no layout, no motion, no lesson content. */ @media screen and (prefers-color-scheme: light){ :root[data-tint="cream"]:not([data-theme="dark"]){--anp-paper-lamp:#FAF0D7;--anp-cream:#FAF0D7;--anp-parchment:#F3E4BC;--anp-paper:#F3E4BC;--anp-card-warm:#FFFAEC;--anp-milk:#FFFAEC;--anp-littles-milk:#FAF0D7} :root[data-tint="sage"]:not([data-theme="dark"]){--anp-paper-lamp:#E4EFE2;--anp-cream:#E4EFE2;--anp-parchment:#D5E6D2;--anp-paper:#D5E6D2;--anp-card-warm:#F4FAF2;--anp-milk:#F4FAF2;--anp-littles-milk:#E4EFE2} :root[data-tint="blue"]:not([data-theme="dark"]){--anp-paper-lamp:#E2EEF8;--anp-cream:#E2EEF8;--anp-parchment:#D2E4F3;--anp-paper:#D2E4F3;--anp-card-warm:#F3F9FD;--anp-milk:#F3F9FD;--anp-littles-milk:#E2EEF8} :root[data-tint="gray"]:not([data-theme="dark"]){--anp-paper-lamp:#EBEBEB;--anp-cream:#EBEBEB;--anp-parchment:#DCDCDC;--anp-paper:#DCDCDC;--anp-card-warm:#F6F6F6;--anp-milk:#F6F6F6;--anp-littles-milk:#EBEBEB} } @media screen{ :root[data-tint="cream"][data-theme="light"]{--anp-paper-lamp:#FAF0D7;--anp-cream:#FAF0D7;--anp-parchment:#F3E4BC;--anp-paper:#F3E4BC;--anp-card-warm:#FFFAEC;--anp-milk:#FFFAEC;--anp-littles-milk:#FAF0D7} :root[data-tint="sage"][data-theme="light"]{--anp-paper-lamp:#E4EFE2;--anp-cream:#E4EFE2;--anp-parchment:#D5E6D2;--anp-paper:#D5E6D2;--anp-card-warm:#F4FAF2;--anp-milk:#F4FAF2;--anp-littles-milk:#E4EFE2} :root[data-tint="blue"][data-theme="light"]{--anp-paper-lamp:#E2EEF8;--anp-cream:#E2EEF8;--anp-parchment:#D2E4F3;--anp-paper:#D2E4F3;--anp-card-warm:#F3F9FD;--anp-milk:#F3F9FD;--anp-littles-milk:#E2EEF8} :root[data-tint="gray"][data-theme="light"]{--anp-paper-lamp:#EBEBEB;--anp-cream:#EBEBEB;--anp-parchment:#DCDCDC;--anp-paper:#DCDCDC;--anp-card-warm:#F6F6F6;--anp-milk:#F6F6F6;--anp-littles-milk:#EBEBEB} } /* the page itself: some pages paint their body with their own colour, so the tint is set on the body too (the repeated [data-tint] only raises the rule's weight above the world-surface and age rules) */ @media screen and (prefers-color-scheme: light){ html:root[data-tint="cream"][data-tint][data-tint][data-tint][data-tint]:not([data-theme="dark"]) body{background:#FAF0D7 !important} html:root[data-tint="sage"][data-tint][data-tint][data-tint][data-tint]:not([data-theme="dark"]) body{background:#E4EFE2 !important} html:root[data-tint="blue"][data-tint][data-tint][data-tint][data-tint]:not([data-theme="dark"]) body{background:#E2EEF8 !important} html:root[data-tint="gray"][data-tint][data-tint][data-tint][data-tint]:not([data-theme="dark"]) body{background:#EBEBEB !important} } @media screen{ html:root[data-tint="cream"][data-tint][data-tint][data-tint][data-tint][data-theme="light"] body{background:#FAF0D7 !important} html:root[data-tint="sage"][data-tint][data-tint][data-tint][data-tint][data-theme="light"] body{background:#E4EFE2 !important} html:root[data-tint="blue"][data-tint][data-tint][data-tint][data-tint][data-theme="light"] body{background:#E2EEF8 !important} html:root[data-tint="gray"][data-tint][data-tint][data-tint][data-tint][data-theme="light"] body{background:#EBEBEB !important} } /* line space: the reading lines already use --anp-lineheight (design/anp.css); this only moves that one number. Letter and word space stay with the per-reader "Space it out" aid. */ :root[data-line="roomy"]{--anp-lineheight:1.9} :root[data-line="extra"]{--anp-lineheight:2.15} /* ---- CALM READING SCREEN (Beauty Pass Oct 24, item 5): see /reading-program/anp-focus.js ---- While body.anp-reading is on, the top bar shows only a small Exit and the footer steps away. The bar keeps its own height, so no line moves when it turns on. Screen only. */ @media screen{ body.anp-reading > nav .brand,body.anp-reading > nav .menu,body.anp-reading > nav .sp{display:none !important} body.anp-reading > .anp-night-foot,body.anp-reading > footer{display:none !important} body:not(.anp-reading) > nav .anp-exit{display:none} body.anp-reading > nav .anp-exit{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-weight:600;font-size:.95rem;color:var(--anp-ink,#1F2E55);text-decoration:none;border:1.5px solid rgba(42,39,34,.28);background:var(--anp-card-warm,#FFFDF8)} body.anp-reading > nav .anp-exit:focus-visible{outline:3px solid var(--anp-brand,#1F2E55);outline-offset:3px} }