/* =========================================================================== SURFACE (U-57) — what things are MADE OF. Shape, depth, material, space, type. One file, all seven pages. motion.css says how things move. This says what they are. Colour stays in theme.css until U-69, deliberately: taking the colour away is the last step, and it needs to still be reversible while the rest is being rebuilt. WHAT THIS REPLACED, measured before it was written: · 40 distinct box-shadows across 74 declarations · 66 hand-written border-radius values in pixels · 31 raw font-sizes in the child app alone · and `--r` meaning 22px in kids.html and 12px in theme.css — the SAME token name carrying two different values. That one line is the whole argument for this file. THE HARD CONSTRAINT, from the ticket: these tokens serve a nine-year-old's photo grid AND a grown-up's settings list. In Apple's world those are the same system — Fotos and Systemeinstellungen share their materials, spacing and type, and only differ in how much of each they use. Anything added here has to be judged against both ends at once, or it will be wrong for both. ======================================================================== */ /* =========================================================================== DIE SCHRIFTEN (U-88) — und warum sie hier stehen und nicht in theme.css. Bis hierher standen die @font-face-Regeln in theme.css. Das ging gut, solange es nur Geist gab und nur die Erwachsenenseiten eine Schrift brauchten: die Kinder-App lud theme.css nie und lief auf `system-ui`. Mit dem neuen Entwurf hat sie eine eigene Schrift, und die Regel haette dann in einer Datei gestanden, die diese Seite gar nicht laedt. Typografie gehoert laut Schichtentabelle in diese Datei, und jede Seite laedt sie (surface.test.ts erzwingt das). Also stehen jetzt ALLE vier hier — eine Quelle, so wie bei Farbe und Bewegung auch. Zwei Orte fuer @font-face waeren dieselbe Drift wie `--r`, das einmal 22px und 12px gleichzeitig bedeutete. SELBST AUSGELIEFERT, NICHT VON GOOGLE. Der Entwurf holt Fredoka und Nunito per @import von fonts.googleapis.com. Das ist ein Aufruf aus dem Browser eines KINDES an einen Server in den USA, bei jedem Seitenaufruf, mit IP und User-Agent. datenschutz.html sagt, dass genau zwei Dinge den Server verlassen, und privacy.test.ts bindet diesen Satz an den Code — der Test haette das zu Recht abgeraeumt. Beide Schriften stehen unter der SIL Open Font License und duerfen mitgeliefert werden; sie liegen als lateinischer Schnitt in /fonts (Fredoka 29,0 kB, Nunito 38,2 kB, beide variabel). OFFEN, UND ZWAR EHRLICH: `→ ← ✓ ✗` liegen ausserhalb des lateinischen Subsets und fallen auf system-ui zurueck. Fuer die Haken und Kreuze der Ja/Nein-Knoepfe ist das geprueft und geloest — sie kommen aus icons.js, weil sie fuer ein rotgruenblindes Kind den eigentlichen Unterschied tragen und nicht von einer Schriftruecknahme abhaengen duerfen. Wer spaeter einen Pfeil als Textzeichen einsetzt, bekommt ihn mitten im Wort in einer anderen Schrift. Deutsche Anfuehrungszeichen, Halbgeviertstrich und Auslassungspunkte sind geprueft und abgedeckt. (Sie waren fuer ein Ticket lang weg. Zwischendurch galt die oeffentliche Seite als Vorlage, die auf `system-ui` laeuft; das war ein Missverstaendnis, massgeblich ist design/stimmt-das-app-v2.jsx. Der Ausflug hat einen Wert hinterlassen: die Typoskala unten ist aus SFs Zeichnung abgeleitet und passt zu Fredoka nur ungefaehr — siehe die Notiz bei --text-huge.) */ @font-face{font-family:"GeistMono";src:url("/fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-display:swap;} /* U-163: Roboto fuer die GANZE App (Damians Wunsch, wie die Schrift der Vorbild-App). Variable Schrift 100–900, lateinischer Umfang mit Umlauten und den deutschen Anfuehrungszeichen, selbst ausgeliefert wie die anderen — 43 KB. */ /* U-191: FIGTREE in der ganzen App. Damian wollte „exakt die Schrift von Spotify" — die heisst Spotify Mix (davor Circular von Lineto), beide sind Hausschriften und nicht lizenzierbar. Figtree (Erik Kennedy, OFL) ist die freie Schrift, die Circular am naechsten kommt: runde geometrische Grotesk, kraeftige Fetten, kein spitzes Futura-Gefuehl. Selbst ausgeliefert, Latin, variabel 300–900. U-299: Fredoka, Nunito, Roboto und Geist (sans) sind samt Dateien weg — vier Jahre Deklarationen ohne eine Regel, die sie rief; nur GeistMono bleibt (.mk, .eyebrow, label der eingefrorenen Seiten). */ @font-face{font-family:"Figtree";src:url("/fonts/figtree.woff2") format("woff2");font-weight:300 900;font-display:swap;} :root{ /* --- SHAPE ------------------------------------------------------------ Apple's corners are CONTINUOUS: the curvature eases in rather than starting abruptly at a tangent, which is why an iOS icon looks softer than a rounded rectangle of the same radius. `corner-shape` does it properly (below); the radii here are the scale either way. */ /* U-193: eine Stufe flacher ueberall — die Karten eines Musikdienstes sind 6–8 px, seine Blaetter 16. Die alten Werte (14/20/28/36) machten aus jeder Karte ein Kissen. Pillen und Kreise (--r-full) bleiben rund. */ --r-xs: 6px; /* badges, the smallest chips */ --r-sm: 8px; /* list rows, small controls, covers */ --r-md: 10px; /* buttons, fields, tiles */ --r-lg: 14px; /* cards */ --r-xl: 18px; /* large cards, the picture in a viewer */ --r-2xl: 24px; /* sheets */ --r-full: 999px; /* pills and circles */ /* --- DEPTH ------------------------------------------------------------ Two shadows, never one. A tight KEY shadow says the edge is lifted; a wide soft AMBIENT one says by how much. A single blur reads as a sticker. The colour is the app's ink, not black — a neutral-black shadow over a warm ground looks like dirt. */ --shadow-hue: 27, 42, 74; --e-0: none; --e-1: 0 1px 1.5px rgba(var(--shadow-hue), .05), 0 1px 4px -1px rgba(var(--shadow-hue), .06); --e-2: 0 1px 2px rgba(var(--shadow-hue), .05), 0 4px 12px -3px rgba(var(--shadow-hue), .10); --e-3: 0 2px 4px rgba(var(--shadow-hue), .05), 0 12px 28px -8px rgba(var(--shadow-hue), .16); --e-4: 0 4px 8px rgba(var(--shadow-hue), .06), 0 28px 60px -18px rgba(var(--shadow-hue), .28); /* Focus. One ring for the whole application, and it must never be removed without putting something else in its place. */ --ring: 0 0 0 3px rgba(var(--shadow-hue), .16); /* --- SPACE ------------------------------------------------------------ A 4px grid. Not because 4 is magic, but because everything landing on one grid is what stops a layout from looking assembled by hand. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px; /* --- TYPE ------------------------------------------------------------- SF's own text styles, by their real names and sizes. `system-ui` resolves to actual SF Pro on an iPad — legally, with no download — so these are the sizes the typeface was drawn for rather than an invented scale laid on top of it. Tracking tightens as the size grows: that is how SF is designed, and ignoring it is the single most common way a web page fails to look like an Apple app even with the right font. */ --text-caption2: 11px; --lh-caption2: 13px; --tr-caption2: .01em; --text-caption: 12px; --lh-caption: 16px; --tr-caption: .005em; --text-footnote: 13px; --lh-footnote: 18px; --tr-footnote: 0; --text-subhead: 15px; --lh-subhead: 20px; --tr-subhead: -.005em; --text-callout: 16px; --lh-callout: 21px; --tr-callout: -.01em; --text-body: 17px; --lh-body: 22px; --tr-body: -.014em; --text-title3: 20px; --lh-title3: 25px; --tr-title3: -.018em; --text-title2: 22px; --lh-title2: 28px; --tr-title2: -.022em; --text-title1: 28px; --lh-title1: 34px; --tr-title1: -.026em; --text-large: 34px; --lh-large: 41px; --tr-large: -.03em; /* The child app shouts a little louder than a settings screen ever should. Same scale, one step further — not a second scale. */ /* Three responsive steps, because a childs screen shouts and a settings screen does not, and both are the same system. They keep the sizes the child app already had rather than inventing new ones — this was a rename, not a redesign. */ /* KEINE ZWEITE LAUFWEITE FUER FREDOKA (U-88), und das ist eine Entscheidung, keine Auslassung. Die Werte oben sind aus SFs Zeichnung abgeleitet; die Kinder-App laeuft seit U-88 auf Fredoka, also stimmt die Herleitung fuer sie streng genommen nicht mehr. Trotzdem kein `.warm`-Satz eigener --tr-Werte. Um den zu rechtfertigen, muesste man Fredoka bei jeder Groesse ANSEHEN, und das geht auf einem Geraet und nicht in einem Skript — hier laesst sich Laufweite nicht messen, nur schaetzen. Ein geschaetzter zweiter Satz waere genau die spekulative Arbeit, die dieses Projekt sonst benennt: er saehe nach Sorgfalt aus und waere geraten. (`.ux-field` stand vier Tickets lang so herum.) Die Richtung stimmt jedenfalls: Fredoka ist eine runde, eher weit laufende Anzeigeschrift, und negative Laufweite bei grossen Graden tut ihr eher gut als weh. OFFEN bleibt, ob -.035em bei 36px zu eng ist — das braucht Damians Augen auf einem Tablet, nicht noch eine Zahl. */ --text-huge: clamp(27px, 7vw, 36px); --lh-huge: 1.12; --tr-huge: -.035em; --text-loud: clamp(22px, 5.2vw, 30px); --lh-loud: 1.3; --tr-loud: -.02em; --text-say: clamp(21px, 4.6vw, 26px); --lh-say: 1.42; --tr-say: -.02em; /* --- DIE KANTE --------------------------------------------------------- Der Entwurf zeichnet Tiefe anders als der Rest der Anwendung: statt eines weichen Schattens ein harter Versatz ohne Weichzeichnung, `0 4px 0 rgba(62,42,22,.18)`. Das sieht aus wie ein dickes Papierkaertchen oder eine Taste mit sichtbarer Flanke — richtig fuer ein Kind, das die Tuer ANFASSEN soll, und falsch fuer eine Einstellungsliste. Das ist deshalb KEINE Ueberschreibung von --e-1…4, obwohl das der kuerzeste Weg gewesen waere. Zwei Gruende, und der zweite ist der wichtigere: · surface.test.ts verlangt, dass jede Stufe von --e ZWEI Schatten hat („ein einzelner Weichzeichner liest sich als Aufkleber"). Das stimmt weiterhin — fuer Schatten. Ein Versatz ohne Weichzeichnung ist aber gar kein geworfener Schatten. · Und genau das ist der Punkt: --e ist HOEHE (wie weit schwebt etwas ueber dem Grund), --lip ist MATERIAL (wie dick ist das Ding selbst). Beides in einen Token zu zwingen ist der --card-Fehler aus U-70 in Neuauflage: ein Name, zwei Bedeutungen, die sich zufaellig einmal vertragen. Blatt, Karte, Taste. Mehr Stufen braucht niemand — und Sheets, Menues und Fokus bleiben auf --e, weil die tatsaechlich schweben. */ --lip-1: 0 3px 0 rgba(var(--shadow-hue), .10); --lip-2: 0 4px 0 rgba(var(--shadow-hue), .12); --lip-3: 0 4px 0 rgba(var(--shadow-hue), .18); /* Wie weit eine Taste einsinkt, wenn ein Finger darauf liegt. Der Weg ist genau die Kantenhoehe: die Taste faehrt bis auf den Grund und die Flanke verschwindet, statt dass etwas kleiner skaliert wird. Ein Kind, das eine Taste drueckt, erwartet, dass sie runtergeht — nicht, dass sie schrumpft. */ --lip-press: 3px; /* --- MATERIAL --------------------------------------------------------- Translucency plus blur plus a saturation lift. The saturation is the part everyone forgets: without it, blurred colour goes grey behind glass and the material looks like fog instead of frosted glass. */ --blur-thin: saturate(180%) blur(20px); --blur-regular: saturate(180%) blur(30px); --blur-thick: saturate(180%) blur(44px); } /* True continuous corners where the browser has them, the ordinary arc where it does not. Scoped to `.sq` so it is a decision per element rather than a global surprise — a squircle on a 6px badge is invisible and costs paint. */ @supports (corner-shape: squircle){ .sq{ corner-shape: squircle; } } /* ---------------------------------------------------------------- MATERIALS */ /* A material is a background AND a filter AND a fallback, so it is a class, not a token. The fallback matters: without backdrop-filter these must stay opaque, or the text on them becomes unreadable rather than merely flat. */ .mat-thin,.mat-regular,.mat-thick{ background: rgba(255,255,255,.92); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){ .mat-thin{ background: rgba(255,255,255,.72); -webkit-backdrop-filter: var(--blur-thin); backdrop-filter: var(--blur-thin); } .mat-regular{ background: rgba(255,255,255,.78); -webkit-backdrop-filter: var(--blur-regular); backdrop-filter: var(--blur-regular); } .mat-thick{ background: rgba(255,255,255,.86); -webkit-backdrop-filter: var(--blur-thick); backdrop-filter: var(--blur-thick); } /* Over a picture or a dark stage, the same material inverted. */ .mat-dark{ background: rgba(16,22,38,.62); -webkit-backdrop-filter: var(--blur-regular); backdrop-filter: var(--blur-regular); } } .mat-dark{ background: rgba(16,22,38,.92); color: #fff; } /* ================================================================ PRIMITIVES The shared vocabulary — and an honest note about how much of it is shared yet, because a file that claims more than it has is worse than a short one. These were written in U-57 BEFORE they had callers, which is the mistake this project otherwise keeps naming: speculative work that looks like progress. Two of them have since earned their place — .ux-sheet the child app opens every sheet through it (U-66) .ux-menu every long press produces one (U-60, via gestures.js) .ux-btn the viewer's share button — and three do NOT have a caller yet: .ux-group / .ux-row Settings already had its own grouped list from U-18 (U-72 gave them the parent page; U-264 retired them: every list there is a .sec surface with .krow rows now) .ux-seg the child app's tabs are its own .ux-field every page still styles its own inputs They are kept rather than deleted because the structural half of U-64…U-68 is what will use them, and churn is not a virtue. But the list above is the truth, and surfaces.test.ts asserts it only ever gets SHORTER. All of them carry shape, depth and spacing only; colour arrives from the page until U-69 decides what colour there is. ========================================================================= */ /* --- the sheet ------------------------------------------------------------- Slides up from the bottom, with the grabber every sheet on the device has. The grabber is not decoration: it is the only thing that says "this can be dragged away" before anybody tries. */ .ux-sheet{ position: fixed; inset: 0; z-index: 40; display: none; place-items: end center; background: rgba(var(--shadow-hue), .32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* Open by attribute OR by class: a page that opens everything else with .show should not have one component that insists on an attribute. */ .ux-sheet[data-open],.ux-sheet.show{ display: grid; animation: ux-fade var(--drop-t) var(--drop); } .ux-sheet > .box{ width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: var(--s3) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom)); box-shadow: var(--e-4); animation: ux-rise var(--glide-t) var(--glide); } .ux-sheet > .box::before{ content: ""; display: block; width: 38px; height: 5px; border-radius: var(--r-full); background: rgba(var(--shadow-hue), .18); margin: 0 auto var(--s4); } @keyframes ux-rise{ from{ transform: translateY(18px); } to{ transform: none; } } @keyframes ux-fade{ from{ opacity: 0; } to{ opacity: 1; } } /* --- the grouped list ------------------------------------------------------ What iOS Settings IS. Rows in a rounded group, hairlines between but not at the ends, the whole row tappable, a chevron when it leads somewhere. This is the primitive that decides whether the adult surfaces work. */ /* U-264: .ux-group / .ux-row sind in Rente. Sie trugen seit U-72 die Einstellungs-Liste und die Kinderzeilen der Elternseite; seit U-259…U-264 ist dort jede Liste eine .sec-Fläche mit .krow-Zeilen (in kids-eltern.html), und ein Baustein ohne Abnehmer ist ein Katalog, kein System (surface.test „kein Baustein ohne Abnehmer"). */ /* --- the state chip (U-81) ------------------------------------------------- NEW kinderleicht puts three small badges on every list row. Borrowing that verbatim was on the list and would have been wrong: THEIR rows are catalogue items with orthogonal attributes (age, kind, duration), so three badges compress three facts. OUR row is a PERSON with a status, already carrying an avatar, a name, a last-seen line, a figure and a chevron. Three more badges would add clutter and compress nothing. So: not three decorations, ONE chip, and only when there is something to say. Zero chips is the normal state of a row. A chip that is always there has stopped being a signal. It is text, not just a colour — which is what makes it readable for someone who cannot tell the wash from the surface by hue. */ .ux-chip{ display: inline-flex; align-items: center; gap: var(--s1); padding: 2px var(--s2); border-radius: var(--r-xs); font-size: var(--text-caption2); letter-spacing: var(--tr-caption2); font-weight: 650; background: var(--wash-flat); color: var(--muted); white-space: nowrap; } .ux-chip.warn{ background: var(--wash-warn); color: var(--wash-warn-ink); } .ux-chip.good{ background: var(--wash-good); color: var(--wash-good-ink); } /* --- the segmented control ------------------------------------------------- Already the right idea in the child app; here it is once, for everybody. */ .ux-seg{ display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-full); background: rgba(var(--shadow-hue), .07); } .ux-seg > button{ padding: var(--s2) var(--s5); border-radius: var(--r-full); font-size: var(--text-subhead); line-height: var(--lh-subhead); font-weight: 600; letter-spacing: var(--tr-subhead); transition: background var(--snap-t) var(--snap), box-shadow var(--snap-t) var(--snap); } /* Was hardcoded #fff, which in dark is a white blob carrying white text. */ .ux-seg > button[aria-selected="true"]{ background: var(--surface); box-shadow: var(--e-1); } /* --- buttons --------------------------------------------------------------- Three tiers and no more. A screen with four kinds of button has no primary action, and a child cannot find the one that matters. */ .ux-btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: var(--s3) var(--s5); border-radius: var(--r-full); font-size: var(--text-callout); font-weight: 650; letter-spacing: var(--tr-callout); transition: transform var(--snap-t) var(--snap), opacity var(--snap-t) var(--snap); } .ux-btn:active{ transform: scale(.96); } .ux-btn[disabled]{ opacity: .45; transform: none; } .ux-btn.big{ width: 100%; padding: var(--s4) var(--s6); font-size: var(--text-body); } .ux-btn.quiet{ background: transparent; } /* --- the context menu ------------------------------------------------------ What a long press produces. It lives here rather than on the screen that needed it first, so a second caller cannot end up with a differently shaped menu by accident. Behaviour is gestures.js; this is only how it looks. */ .ux-menu{ position: fixed; inset: 0; z-index: 56; display: grid; place-items: center; animation: ux-fade var(--snap-t) var(--snap); } .ux-menucard{ min-width: 230px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e-4); animation: ux-menuin var(--pop-t) var(--pop); } @keyframes ux-menuin{ from{ transform: scale(.86); opacity: 0; } to{ transform: none; opacity: 1; } } .ux-menucard button{ display: flex; align-items: center; justify-content: space-between; gap: var(--s4); width: 100%; min-height: 44px; padding: var(--s3) var(--s4); font-size: var(--text-callout); letter-spacing: var(--tr-callout); font-weight: 550; text-align: left; transition: background var(--snap-t) var(--snap); } .ux-menucard button + button{ box-shadow: inset 0 1px 0 rgba(var(--shadow-hue), .1); } .ux-menucard button:active{ background: rgba(var(--shadow-hue), .06); } .ux-menucard button svg{ width: 18px; height: 18px; opacity: .55; flex: none; } /* --- fields ------------------------------------------------------------------ `.ux-field` STOOD HIER UND IST MIT U-82 GELÖSCHT. Es wurde in U-57 geschrieben, bevor irgendetwas es brauchte, und hat in vier Tickets keinen einzigen Abnehmer gefunden. Der Grund war nicht Vergesslichkeit: theme.css gestaltet `input, textarea, select` global, erwischt damit jedes Feld der Anwendung, und ein Primitiv, das man zusätzlich vergeben müsste, hatte nie eine Aufgabe. Das ist die spekulative Arbeit, die dieses Projekt sonst benennt — hier hat sie sich vier Tickets lang als „offene Schuld" in der ROADMAP gehalten, als wäre noch etwas zu tun. Zu tun war: löschen. Die eine Feldregel steht in theme.css und trägt seit U-82 dasselbe 44px-Mindestmaß, das hier stand. (Zurückholen ist ein `git revert` dieses Commits — dieselbe Regel wie bei U-69s Palette und U-79s Dunkelmodus.) */ /* ===================== HOW IT BEHAVES ON A REAL PHONE ==================== Four things a web page gets wrong on iOS by default. None of them is visible in a screenshot, all of them are the difference between "a website on a phone" and "an app". ======================================================================== */ /* iOS draws a grey box over anything you tap, on top of whatever feedback the design already gives. Every :active state in this app is more precise than that box, so the box is only noise. */ html{ -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } /* Double-tapping a control zooms the page instead of pressing it twice, and the browser waits 300ms on every tap to find out which you meant. Declaring that these are for manipulating, not reading, removes both. */ button, a, input, select, textarea, [role="button"], summary{ touch-action: manipulation; } /* Scrolling to the end of an overlay must not start scrolling the page behind it — that is how a sheet ends up dragging the whole app with it. */ .ux-sheet, .ux-menu, .ux-sheet > .box{ overscroll-behavior: contain; } /* The home indicator and the notch. Any page that puts something against the bottom or top edge asks for the inset; without `viewport-fit=cover` in the page's viewport meta these all resolve to zero, which is how they were silently doing nothing before U-64. */ body{ padding-bottom: env(safe-area-inset-bottom); } @supports (padding: max(0px)){ body{ padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } } /* Focus, everywhere, once. Removing this without a replacement makes the app unusable by keyboard — which includes anybody using a switch or a scanner. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible{ outline: none; box-shadow: var(--ring); }