/* * The calendar's visual design, made real — design/calendar/ is the source of truth and * palette.py is where every colour below came from (derived in oklch, never picked). * * Two rules from that design worth keeping in mind before editing anything here: * every neutral sits at hue 60 with a trace of chroma, which is the entire reason the * screen reads soft rather than clinical; and there is exactly one accent, used only * where it means *now* or *primary action* (D1). Service colour is a separate dimension * carried by the block tint alone — no bars, no borders (a bar plus a border on a grid * this dense builds a cage). */ /* Self-hosted, not fetched from Google: a page in this app is served to a therapist whose practice is health data, and a font request would hand a third party her IP and the fact that she just opened her calendar. 38 KB of woff2 in the repo is cheaper than that conversation. Varta is SIL OFL — see public/assets/fonts/OFL.txt. **One file, no `unicode-range` split.** Google's own CSS ships Varta as separate `latin` and `latin-ext` subsets, and that is how this started — which quietly broke Czech. Every caron and kroužek (č ř š ž ě ů ď ť ň) lives in latin-ext while á é í ó ú ý sit in latin, so a Czech word is routinely spelled out of *both* files. Two files means two independent races, and under `font-display: optional` each one is decided on its own: on a phone the small latin file would win its window and the latin-ext file miss it, and the page rendered "Přehled" with the P, e, h, l, e, d in Varta and the ř in the system font. Different face, different weight, different width, inside one word. Subsetting both ranges into a single file makes that structurally impossible — the font is either used for the whole page or not at all. It is also *smaller* than the two subsets it replaces (38 KB against 47 KB) and one request instead of two. Rebuild it with (fonttools + brotli, from the upstream variable TTF at github.com/google/fonts/tree/main/ofl/varta): pyftsubset "Varta[wght].ttf" --output-file=public/assets/fonts/varta.woff2 \ --flavor=woff2 --layout-features='*' --no-hinting --desubroutinize \ --unicodes="U+0000-00FF,U+0100-017F,U+0180-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,\ U+02DC,U+0300-0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,\ U+20A0-20C0,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD" `font-display: optional`, not `swap`. Every navigation here is a full page load, and under `swap` the browser painted the fallback first and replaced it a moment later — Segoe UI is metrically much larger than Varta, so the whole page visibly jumped bigger and then snapped smaller, on every single click. `optional` gives the font a short block period and then commits for that page load: it never swaps mid-page, so the reflow is structurally impossible rather than merely rare. The trade is that a cold first load may render in the fallback; the preload in templates/layout.php is what keeps that to the first load only. No `size-adjust` fallback metric override is declared, deliberately: getting one right needs Varta's actual x-height and average advance measured out of the woff2, and an invented number would make the fallback wrong in a new way rather than a smaller way. */ @font-face { font-family: 'Varta'; font-style: normal; font-weight: 300 700; font-display: optional; src: url('fonts/varta.woff2') format('woff2'); } :root { --ink: #241E1A; --ink-2: #68625E; /* Was #9C9793, which measured 2.89:1 on white — a clear AA failure (4.5:1) on the smallest text in the app: field hints, empty states, calendar block times. Darkened along the same hue-60 neutral ramp to 4.84:1 on white and 4.63:1 on the today tint. It still reads as the quietest of the three inks; it is no longer unreadable. */ --ink-3: #767169; --hairline: #E9E5E2; --hairline-soft: #F3EFED; --tint-today: #FDF9F6; /* Three accent values where there were two, because one colour cannot do all three jobs at AA. #AD674E is 4.35:1 on white: fine for a border, a focus ring or the today marker (which need 3:1), and a failure for text and for white-on-accent buttons (which need 4.5:1). Splitting them is cheaper than lightening the whole brand. */ --accent: #AD674E; /* non-text: rings, borders, the today marker */ --accent-text: #A15C43; /* accent-coloured *text* — 5.09:1 on white */ --accent-strong: #9A553C; /* filled buttons, white label on top — 5.62:1 */ --accent-hover: #8E4E36; --accent-soft: #FFE7DE; /* Was #CE9581, which measured 2.55:1 on white — the focus ring, the one affordance a keyboard user has no alternative to, was below the 3:1 floor for a UI element. It was also the least visible thing on the palette against the accent-soft tint it most often appears over. #B37155 is 3.88:1 on white and 3.28:1 on that tint, so it clears the bar on both grounds it can appear on rather than only the easy one. */ --accent-ring: #B37155; /* All six share one lightness and one chroma and differ only in hue, so no service shouts louder than another (F34). */ --svc-modra: #DCEFFF; --svc-tyrkys: #D4F4F4; --svc-zelena: #DEF4E1; --svc-oliva: #F0EFD5; --svc-mauve: #F2E8FF; --svc-ruzova: #FFE4F2; --svc-neutral: #F3EFED; /* Type scale. Before this block every size in the file was a literal, and there were fifteen of them — 10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14, 14.5, 15, 16, 19.5, 20, 22, 23 — which is not a scale, it is an accumulation. Half-pixel sizes also round differently depending on the display's device-pixel-ratio, so the same screen was genuinely crisper on some machines than others. Named by role rather than by t-shirt size, because the roles are what the templates actually mean and a `--text-sm` that is larger than `--text-base` is how these get misused. Every size is a whole pixel. */ --text-micro: 12px; /* calendar block times, badges — the smallest thing we ship */ --text-caption: 13px; /* kickers, day names, meta under a heading */ --text-small: 14px; /* hints, secondary labels, table meta */ --text-meta: 15px; /* subnav, buttons, list meta */ --text-body: 16px; /* body copy and form inputs */ --text-lead: 17px; /* the one step above body, used sparingly */ --text-title: 22px; /* screen titles */ --text-display: 25px; /* the session panel's name, the largest text in the app */ /* Varta is a light-ish humanist face; at 400 on white its secondary text reads thinner than the same weight in Segoe UI, which is most of why this looked washed out. The face is variable (300–700), so 450 is a real instance rather than a synthesised smear — a small, deliberate step, not a bolding. */ --weight-body: 450; --weight-medium: 520; --weight-semibold: 620; --weight-bold: 700; /* D19: 30-minute rows. Raised with the type scale — a 50-minute session used to be 57px around 10.5/13/11.5px text, and the same block at 12/14.5/12.5px needs the room or the service line clips. */ --row-h: 74px; --gutter-w: 76px; --grid-pad-l: 12px; --grid-pad-r: 24px; color-scheme: light; } * { box-sizing: border-box; } /* Form controls do not inherit type from the page — a `