/* css/style.css */ /* ============================================================ Deutsch für Tanya THEMES. Five palettes; the picker in the header sets data-theme on and js/theme.js remembers the choice. To add one, copy a block below, change the name in the selector, and add that name to THEMES in js/theme.js. Every theme must set the whole list — a missing var falls back to Sand and the result looks broken, not merely off. ============================================================ */ :root{ --sand:#FCD0A1; --sand-rgb:252 208 161; --sand-deep:#F7BE83; --sand-wash:#FAEFE3; --flame:#F15025; --flame-rgb:241 80 37; --flame-dark:#C63C17; --flame-pale:#FFB59C; --on-flame:#2B1B17; --mauve:#A690A4; --mauve-rgb:166 144 164; --liver:#5E4B56; --liver-rgb:94 75 86; --liver-deep:#4A3A44; --mint:#BAFFDF; /* Right and wrong are not theme accents. --mint is a decorative colour and lands on orange or cyan in some themes, which meant 'Correct!' could appear in whatever hue the palette happened to use. Green means right and red means wrong in every theme, no exceptions — that reading is universal and a theme should not be able to override it. Two shades of each: the bright one for text and borders on the dark cards, the deep one for text on paper. */ /* Approved inks, by the surface they sit on. See the table above the surfaces block. Each points at a token every theme redefines, so one declaration here is correct in all nine. ink-* the darkest, for anything that must be read soft-* secondary lines, still above the floor accent-* emphasis. NOT --flame or --flame-dark; both fail. */ --ink-on-light: var(--ink); /* 11.79 worst */ --soft-on-light: var(--ink-soft); /* 5.42 worst */ --accent-on-light: var(--ink); /* flame-dark is 2.95 — banned */ --ink-on-dark: var(--on-dark); /* 8.09 worst */ --soft-on-dark: var(--sand); /* 6.19 worst */ --accent-on-dark: var(--flame-pale); /* 5.46 worst; flame is 3.33 */ --ink-on-accent: var(--on-flame); /* 4.65 worst */ --ink-on-sand: var(--liver-deep); /* 7.41 worst — --sand is a light chip in every theme, including the dark ones where it doubles as the soft ink, so --ink is wrong on it (1.54 in ember) */ /* Grammatical gender, colour-coded. Tokens rather than literals so the dark themes can lift them; a fixed mid-tone cannot serve both. */ --gen-m:#285F90; --gen-f:#97385B; --gen-n:#43592B; /* MEASURED, NOT PICKED BY EYE. Contrast against the off-white strip (#FAF7F2), WCAG AA for text needs 4.5: blue #2B6CB0 5.07 Grok's value, and it passes orange #A85A0B 4.76 Grok's #DD6B20 was 3.17 and FAILED green #2F855A 4.25 FAILED -> #2E7D4F 4.72 Orange on a light background is the hard one: both the value Grok proposed and my first attempt (#C0700F, 3.53) were unreadable by the standard. #A85A0B is a deeper amber that clears it and still reads unmistakably orange — and being browner than --flame (#F15025) is a bonus, since flame is the app accent in 133 rules. */ --role-subj:#2B6CB0; --role-verb:#A85A0B; --role-obj:#2E7D4F; --role-adj:#7A4BA8; --role-adv:#0F7C82; --mark-neg:#B3243C; --mark-agree:#2E7D4F; --role-subj-rgb:43 108 176; --role-verb-rgb:168 90 11; --role-obj-rgb:46 125 79; --role-adj-rgb:122 75 168; --role-adv-rgb:15 124 130; --mark-neg-rgb:179 36 60; --mark-agree-rgb:46 125 79; --strip-bg:#FAF7F2; --strip-ink:#2B2228; --strip-edge:#E3DAD0; /* --shade-rgb does two different jobs and they disagree in a dark theme. As an inset tint it must lighten a dark panel, so it flips to white. As the scrim behind a modal, or as a shadow, it must stay black — or opening 'How to play' at night floodlights the page. This is the second job, and it never flips. */ --scrim-rgb:0 0 0; --yes:#6FE39B; --yes-rgb:111 227 155; --yes-deep:#1D7A45; --on-yes:#0E2E1B; --no:#FF8B7B; --no-rgb:255 139 123; --no-deep:#B32A16; --on-no:#3A0F09; --page:#D5C8BA; --paper:#FFF5E8; --paper-rgb:255 245 232; --ink:#3C2F36; --ink-rgb:60 47 54; --ink-soft:#6B5860; --on-dark:#F9EDDF; --shade-rgb:0 0 0; --r-sm:8px; --r-md:14px; --r-lg:22px; --shadow-card:0 2px 0 var(--sand-deep), 0 12px 28px -18px rgb(var(--ink-rgb) / .55); --shadow-lift:0 3px 0 var(--sand-deep), 0 18px 34px -18px rgb(var(--ink-rgb) / .5); --ff-display:'Lora', Georgia, 'Times New Roman', serif; --ff-ui:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* --- themes ------------------------------------------------ */ html[data-theme="mint"]{ --sand:#BAFFDF; --sand-rgb:186 255 223; --sand-deep:#86DDB6; --sand-wash:#E3FAED; --flame:#F15025; --flame-rgb:241 80 37; --flame-dark:#C63C17; --flame-pale:#FFB59C; --on-flame:#2B1B17; --mauve:#8CA79B; --mauve-rgb:140 167 155; --liver:#4A5952; --liver-rgb:74 89 82; --liver-deep:#37433D; --mint:#FCD0A1; --page:#BFD7C9; --paper:#E8FFF4; --paper-rgb:232 255 244; --ink:#27332D; --ink-rgb:39 51 45; --ink-soft:#52645B; --on-dark:#D9FFEA; --shade-rgb:0 0 0; } html[data-theme="plum"]{ --sand:#DCC9D8; --sand-rgb:220 201 216; --sand-deep:#C0A5BB; --sand-wash:#FAE3F5; --flame:#F15025; --flame-rgb:241 80 37; --flame-dark:#C63C17; --flame-pale:#FFB59C; --on-flame:#2B1B17; --mauve:#8B7288; --mauve-rgb:139 114 136; --liver:#54404E; --liver-rgb:84 64 78; --liver-deep:#3D2E39; --mint:#BAFFDF; --page:#C6B4C2; --paper:#FFE8F6; --paper-rgb:255 232 246; --ink:#2E2330; --ink-rgb:46 35 48; --ink-soft:#665268; --on-dark:#F4E4EF; --shade-rgb:0 0 0; } html[data-theme="orchid"]{ --sand:#FF9FE5; --sand-rgb:255 159 229; --sand-deep:#FF58D2; --sand-wash:#FAE3F8; --flame:#FF858D; --flame-rgb:255 133 141; --flame-dark:#FF434F; --flame-pale:#FFB8BC; --on-flame:#2B1719; --mauve:#42769A; --mauve-rgb:66 118 154; --liver:#3C2F3B; --liver-rgb:60 47 59; --liver-deep:#251D25; --mint:#D2EAB8; --page:#D2BCD0; --paper:#FFE8FD; --paper-rgb:255 232 253; --ink:#2C1C2A; --ink-rgb:44 28 42; --ink-soft:#6C5169; --on-dark:#F2E6EF; --shade-rgb:0 0 0; } html[data-theme="moss"]{ --sand:#FF9FE5; --sand-rgb:255 159 229; --sand-deep:#FF58D2; --sand-wash:#EEFAE3; --flame:#FF858D; --flame-rgb:255 133 141; --flame-dark:#FF434F; --flame-pale:#FFB8BC; --on-flame:#2B1719; --mauve:#42769A; --mauve-rgb:66 118 154; --liver:#364823; --liver-rgb:54 72 35; --liver-deep:#212D16; --mint:#D2EAB8; --page:#C7D2BC; --paper:#F4FFE8; --paper-rgb:244 255 232; --ink:#242C1C; --ink-rgb:36 44 28; --ink-soft:#5F6C51; --on-dark:#F2E6EF; --shade-rgb:0 0 0; } html[data-theme="lagoon"]{ --sand:#E1D89F; --sand-rgb:225 216 159; --sand-deep:#D0C269; --sand-wash:#E3F8FA; --flame:#FF858D; --flame-rgb:255 133 141; --flame-dark:#FF434F; --flame-pale:#FFB8BC; --on-flame:#2B1719; --mauve:#397D85; --mauve-rgb:57 125 133; --liver:#234548; --liver-rgb:35 69 72; --liver-deep:#162B2D; --mint:#B8E6EA; --page:#BCD0D2; --paper:#E8FDFF; --paper-rgb:232 253 255; --ink:#1C2A2C; --ink-rgb:28 42 44; --ink-soft:#51696C; --on-dark:#F2F0E6; --shade-rgb:0 0 0; } html[data-theme="tobacco"]{ --sand:#E1D89F; --sand-rgb:225 216 159; --sand-deep:#D0C269; --sand-wash:#FAF7E3; --flame:#FF858D; --flame-rgb:255 133 141; --flame-dark:#FF434F; --flame-pale:#FFB8BC; --on-flame:#2B1719; --mauve:#856F39; --mauve-rgb:133 111 57; --liver:#483E23; --liver-rgb:72 62 35; --liver-deep:#2D2616; --mint:#B8E6EA; --page:#D2CFBC; --paper:#FFFCE8; --paper-rgb:255 252 232; --ink:#2C271C; --ink-rgb:44 39 28; --ink-soft:#6C6451; --on-dark:#F2F0E6; --shade-rgb:0 0 0; } html[data-theme="citrus"]{ --sand:#D4CB92; --sand-rgb:212 203 146; --sand-deep:#C0B35F; --sand-wash:#FAECE3; --flame:#51CB20; --flame-rgb:81 203 32; --flame-dark:#3A9217; --flame-pale:#8EE76A; --on-flame:#1D2B17; --mauve:#397D85; --mauve-rgb:57 125 133; --liver:#483323; --liver-rgb:72 51 35; --liver-deep:#2D2016; --mint:#C6EAB8; --page:#D2C5BC; --paper:#FFF1E8; --paper-rgb:255 241 232; --ink:#2C221C; --ink-rgb:44 34 28; --ink-soft:#6C5C51; --on-dark:#F2F0E6; --shade-rgb:0 0 0; } html[data-theme="grove"]{ --sand:#D4CB92; --sand-rgb:212 203 146; --sand-deep:#C0B35F; --sand-wash:#E9FAE3; --flame:#F96900; --flame-rgb:249 105 0; --flame-dark:#B74D00; --flame-pale:#FFA360; --on-flame:#2B2017; --mauve:#856F39; --mauve-rgb:133 111 57; --liver:#2E4823; --liver-rgb:46 72 35; --liver-deep:#1C2D16; --mint:#C6EAB8; --page:#C2D2BC; --paper:#EEFFE8; --paper-rgb:238 255 232; --ink:#202C1C; --ink-rgb:32 44 28; --ink-soft:#596C51; --on-dark:#F2F0E6; --shade-rgb:0 0 0; } /* ------------------------------------------------------------------ DARK THEMES The nine above are light-page. These three invert it: a dark page, a darker panel, and light ink. Nothing in the stylesheet needed changing for them, which is the point of the alias block in :root — every approved pair names a token that a theme redefines, so --ink-on-light is 'the ink that goes on --paper' rather than literally a dark colour. In a dark theme --paper is a deep tone and --ink is nearly white, and the pair still clears the floor. --shade-rgb flips to white here: the tints that darken a light card have to lighten a dark one, or every inset panel disappears into it. ------------------------------------------------------------------ */ html[data-theme="midnight"]{ --gen-m:#8FB6E8; --gen-f:#F09CBC; --gen-n:#9FD8A6; --role-subj:#8FC4F0; --role-verb:#E8A64B; --role-obj:#7FD3A3; --role-adj:#C9A6E8; --role-adv:#6FD3D8; --mark-neg:#FF9AA8; --mark-agree:#7FD3A3; --role-subj-rgb:143 196 240; --role-verb-rgb:232 166 75; --role-obj-rgb:127 211 163; --role-adj-rgb:201 166 232; --role-adv-rgb:111 211 216; --mark-neg-rgb:255 154 168; --mark-agree-rgb:127 211 163; --strip-bg:#221C21; --strip-ink:#F2EBE6; --strip-edge:#3A3138; --sand:#9FB4D8; --sand-rgb:159 180 216; --sand-deep:#6E86AE; --sand-wash:#1B2233; --flame:#FF7A59; --flame-rgb:255 122 89; --flame-dark:#C9502F; --flame-pale:#FFB49E; --on-flame:#231009; --mauve:#7B7FA8; --mauve-rgb:123 127 168; --liver:#141A28; --liver-rgb:20 26 40; --liver-deep:#0E121C; --mint:#9FE6C8; --page:#0B0E16; --paper:#161C2A; --paper-rgb:22 28 42; --ink:#EAEFF8; --ink-rgb:234 239 248; --ink-soft:#A9B6CC; --on-dark:#EAEFF8; --shade-rgb:255 255 255; } html[data-theme="ember"]{ --gen-m:#93BEE8; --gen-f:#F5A3B8; --gen-n:#A9D6A2; --role-subj:#8FC4F0; --role-verb:#E8A64B; --role-obj:#7FD3A3; --role-adj:#C9A6E8; --role-adv:#6FD3D8; --mark-neg:#FF9AA8; --mark-agree:#7FD3A3; --role-subj-rgb:143 196 240; --role-verb-rgb:232 166 75; --role-obj-rgb:127 211 163; --role-adj-rgb:201 166 232; --role-adv-rgb:111 211 216; --mark-neg-rgb:255 154 168; --mark-agree-rgb:127 211 163; --strip-bg:#221C21; --strip-ink:#F2EBE6; --strip-edge:#3A3138; --sand:#E5B98F; --sand-rgb:229 185 143; --sand-deep:#B98A5E; --sand-wash:#2A1F1A; --flame:#FF8A4C; --flame-rgb:255 138 76; --flame-dark:#C25C25; --flame-pale:#FFC09B; --on-flame:#261206; --mauve:#9C7F72; --mauve-rgb:156 127 114; --liver:#1F1712; --liver-rgb:31 23 18; --liver-deep:#150F0B; --mint:#B8E6C6; --page:#120C09; --paper:#241A14; --paper-rgb:36 26 20; --ink:#F7EBE0; --ink-rgb:247 235 224; --ink-soft:#C3AB99; --on-dark:#F7EBE0; --shade-rgb:255 255 255; } html[data-theme="pine"]{ --gen-m:#93C4EE; --gen-f:#F2A2BC; --gen-n:#A8DEB2; --role-subj:#8FC4F0; --role-verb:#E8A64B; --role-obj:#7FD3A3; --role-adj:#C9A6E8; --role-adv:#6FD3D8; --mark-neg:#FF9AA8; --mark-agree:#7FD3A3; --role-subj-rgb:143 196 240; --role-verb-rgb:232 166 75; --role-obj-rgb:127 211 163; --role-adj-rgb:201 166 232; --role-adv-rgb:111 211 216; --mark-neg-rgb:255 154 168; --mark-agree-rgb:127 211 163; --strip-bg:#221C21; --strip-ink:#F2EBE6; --strip-edge:#3A3138; --sand:#A9C8A6; --sand-rgb:169 200 166; --sand-deep:#7CA178; --sand-wash:#18261C; --flame:#FFA24C; --flame-rgb:255 162 76; --flame-dark:#C2702A; --flame-pale:#FFCB99; --on-flame:#221405; --mauve:#7E9481; --mauve-rgb:126 148 129; --liver:#101B14; --liver-rgb:16 27 20; --liver-deep:#0A120D; --mint:#BCEBCB; --page:#080F0A; --paper:#142117; --paper-rgb:20 33 23; --ink:#E9F4EB; --ink-rgb:233 244 235; --ink-soft:#A7BFAC; --on-dark:#E9F4EB; --shade-rgb:255 255 255; } /* ============================================================ TYPE TABLE AND CONTEXTUAL INK ============================================================ Two problems this fixes, both caused by the same thing: a component deciding for itself. 1. INVISIBLE TEXT. The surface table below the themes was right, and 156 declarations went around it and named --ink, --on-dark or --sand at the point of use. A token chosen for a light card is wrong on a dark one, so the same declaration produced dark-on-plum in one place and cream-on-beige in another. Fixed by making the ink CONTEXTUAL. Every surface sets --fg, --fg-soft and --fg-accent for what is inside it. A component writes color:var(--fg) and is correct on any surface, in any theme, without knowing which it is on. The old --ink-on-light family still resolves and is kept so nothing breaks, but it is no longer the thing to reach for. --fg is. 2. FONT DRIFT. 221 font shorthands and 97 font-family declarations, each an independent choice. That is why "Section 1 · Sentences" is serif and "Unit 1 · 10 comics" is sans — same role, two answers, decided months apart. Fixed by a table of ROLES. A component picks a role, not a font. Eight roles, and every screen's text is one of them. RULE FROM HERE: no component may name a colour or a font family. It names a role and a surface. If something does not fit a role, add a role here and measure it, do not invent one inline. ------------------------------------------------------------ */ :root{ /* --- the eight roles ------------------------------------- Values are the shorthand: weight, size / line-height, family. Tracking is separate because the font shorthand cannot hold it. t-title the one big heading on a screen t-section a band heading inside a screen t-card a card or list-row title t-sub the line under a title. NOT a caption size. t-eyebrow the uppercase label above a block t-body everything else that is read t-de German being taught. Its own role, deliberately: it must be the most legible thing on the screen and it must never shrink to fit a layout. t-btn anything you press -------------------------------------------------------- */ --t-title: 700 clamp(1.7rem,6vw,2.4rem)/1.15 var(--ff-display); --t-title-ls:-.01em; --t-section: 700 clamp(1.15rem,4vw,1.4rem)/1.25 var(--ff-display); --t-section-ls:0; --t-card: 600 1.08rem/1.3 var(--ff-ui); --t-card-ls: 0; --t-sub: 400 1rem/1.45 var(--ff-ui); --t-sub-ls: 0; --t-eyebrow: 700 .82rem/1.2 var(--ff-ui); --t-eyebrow-ls:.11em; --t-body: 400 1rem/1.55 var(--ff-ui); --t-body-ls: 0; --t-de: 500 clamp(1.45rem,5.2vw,2.1rem)/1.4 var(--ff-display); --t-de-ls: 0; --t-btn: 700 1rem/1 var(--ff-ui); --t-btn-ls: .01em; } /* --- type variants ------------------------------------------ Set data-type on , the way data-theme is set. Four variants x twelve palettes = forty-eight combinations, and none of them can produce a contrast failure, because the ink is contextual and the variant only moves family and scale. These work on the WHOLE stylesheet, not just the role classes below. They redefine --ff-display, --ff-ui and the root font size, which every one of the 318 existing type declarations already reads. So a variant changes every screen without a single per-component edit, and without moving any size relative to any other. editorial the default. Lora headings, Manrope for everything else. plain no serif anywhere. For small screens, and for anyone who finds a serif harder at 15px. large editorial at 110%. Every rem scales together, so nothing reflows unevenly. loud plain at 112%, with the soft ink lifted to full ink so secondary text stops being secondary. For low light, or across a room. ----------------------------------------------------------- */ html[data-type="plain"]{ --ff-display:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; } html[data-type="large"]{ font-size:110%; } html[data-type="loud"]{ --ff-display:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:112%; } /* The role table, restated per variant where the role itself should change shape rather than just scale. */ html[data-type="plain"], html[data-type="loud"]{ --t-title: 800 clamp(1.65rem,5.6vw,2.25rem)/1.2 var(--ff-ui); --t-title-ls:-.02em; --t-section: 700 clamp(1.1rem,3.8vw,1.32rem)/1.3 var(--ff-ui); --t-section-ls:-.01em; --t-body: 450 1rem/1.6 var(--ff-ui); /* the German stays serif in every variant. It is the material, not the furniture, and should not look like the app. */ --t-de: 500 clamp(1.45rem,5.2vw,2.1rem)/1.4 'Lora', Georgia, serif; } /* --- role classes ------------------------------------------- For markup to use directly. Colour comes from the surface, never from these. ----------------------------------------------------------- */ .t-title { font:var(--t-title); letter-spacing:var(--t-title-ls) } .t-section{ font:var(--t-section); letter-spacing:var(--t-section-ls) } .t-card { font:var(--t-card); letter-spacing:var(--t-card-ls) } .t-sub { font:var(--t-sub); letter-spacing:var(--t-sub-ls) } .t-eyebrow{ font:var(--t-eyebrow); letter-spacing:var(--t-eyebrow-ls); text-transform:uppercase } .t-body { font:var(--t-body); letter-spacing:var(--t-body-ls) } .t-de { font:var(--t-de); letter-spacing:var(--t-de-ls) } .t-btn { font:var(--t-btn); letter-spacing:var(--t-btn-ls) } /* --- contextual ink ----------------------------------------- The page itself. --ink flips light in the three dark themes, so this single pairing is correct in all twelve. ----------------------------------------------------------- */ :root{ --fg: var(--ink); --fg-soft: var(--ink-soft); --fg-accent:var(--ink); } /* Light surfaces. Same pairing as the page, restated so a nested surface cannot inherit a dark one by accident. */ .surf-paper, .surf-wash{ --fg: var(--ink); --fg-soft: var(--ink-soft); --fg-accent:var(--ink); } /* Dark surfaces. --flame is banned as text at 3.33; the pale is 5.46 worst case and is the only accent allowed here. */ .surf-deep, .card, .pg-recent, .lp-clock-bar, button.ref-group.open{ --fg: var(--on-dark); --fg-soft: var(--sand); --fg-accent:var(--flame-pale); } /* The accent fill. Its own ink, and no soft tier — a muted tone on flame does not clear the floor in any theme, so secondary text simply may not go here. */ .surf-accent{ --fg: var(--on-flame); --fg-soft: var(--on-flame); --fg-accent:var(--on-flame); } /* .card was a dark gradient panel that never declared an ink, so everything inside it inherited the page's dark text and vanished. It is in the dark list above now. This is the fix for the hub hero and the comic reader panel. */ .card{ color:var(--fg) } .surf-deep{ color:var(--fg) } /* The loud variant lifts secondary text to primary. Per surface, so the dark ones lift to their own ink and not the page's. */ html[data-type="loud"]{ --fg-soft:var(--ink) } html[data-type="loud"] .surf-paper, html[data-type="loud"] .surf-wash{ --fg-soft:var(--ink) } html[data-type="loud"] .surf-deep, html[data-type="loud"] .card, html[data-type="loud"] .pg-recent, html[data-type="loud"] .lp-clock-bar, html[data-type="loud"] button.ref-group.open{ --fg-soft:var(--on-dark) } /* --- the type-variant picker in the header ------------------- */ .typeswitch{ display:flex; gap:2px; padding:3px; border-radius:999px; background:rgb(var(--shade-rgb) / .18) } .typeswitch button{ border:0; background:transparent; color:var(--fg-soft); font:700 .8rem/1 var(--ff-ui); letter-spacing:.04em; padding:7px 10px; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent; } .typeswitch button[aria-pressed="true"]{ background:var(--sand); color:var(--ink-on-sand); } /* THE BACK-ARROW ROW. Third axis of the same decision, so it is built exactly like `.typeswitch` rather than inventing a look — see the note in js/back.js. The glyphs run larger than the `Aa` marks because an arrow at .8rem is a hairline, and because the swatch here IS the thing being chosen: she is judging the mark itself, not a label for it. */ .backswitch{ display:flex; gap:2px; padding:3px; border-radius:999px; background:rgb(var(--shade-rgb) / .18) } .backswitch button{ border:0; background:transparent; color:var(--fg-soft); font:700 1.05rem/1 var(--ff-ui); padding:7px 10px; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent; } .backswitch button[aria-pressed="true"]{ background:var(--sand); color:var(--ink-on-sand); } .backswitch button svg{ width:20px; height:20px; display:block } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ min-height:100%; /* The tour highlight (.bt-lit) has a wide glow (box-shadow spread ~22px) that, on a target near the right or bottom edge, can extend the scrollable area and add a stray scrollbar / black gutter. Steven, 11 Sep: "put a boundary around the glow so it CANNOT extend past the edges of the screen." Clipping horizontal overflow at the root stops the sideways bleed without affecting vertical scrolling of real content. */ overflow-x:clip; background: radial-gradient(1100px 520px at 82% -12%, rgb(var(--sand-rgb) / .30), transparent 70%), radial-gradient(760px 460px at 4% 104%, rgb(var(--mauve-rgb) / .20), transparent 68%), var(--page); color:var(--fg); font-family:var(--ff-ui); font-size:17px; line-height:1.5; -webkit-text-size-adjust:100%; } button{font-family:inherit;font-size:inherit;cursor:pointer} :focus-visible{ outline:3px solid var(--flame); outline-offset:3px; } /* ---------- top bar ---------- */ .topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; /* 18px top and bottom was 36px of nothing above a screen whose first real thing already sat two thirds of the way down. */ padding:10px clamp(16px,4vw,40px); max-width:900px; margin:0 auto; } /* ROOM FOR THE BACK BUTTON, WHICH FLOATS OVER THIS HEADER. Steven, 09 Sep: "The back button is still over the DE orange thing — need to shift it over so the back button does not overlap." `.backlink` is `position:fixed` at `top:8px` and `left:clamp(16px,4vw, 40px)` — pinned to the VIEWPORT, and at the top of the page that band is the topbar. So on every screen with a back button it lands squarely on `.brand-mark`, the 38px orange DE tile. UNCONDITIONAL, AND THAT IS DELIBERATE. `body:has(.backlink)` would shift it only where a button exists, and the note further down this file records why that was rejected once already: `:has()` is missing from Safari before 15.4 and Firefox before 121, and the fallback is the collision it was meant to fix. A layout that depends on a recent selector is broken on someone's phone. So the brand sits 52px in on every screen, hub included. The cost is a little air to the left of the logo where no button is; the alternative is the logo hidden behind an arrow on all forty sub-screens. 52px is the measured clearance: the button is 45px wide (17px font, 19px icon at 1.1em, 13px padding each side) and starts at the same `clamp()` the topbar's own padding uses, so its left edge and the brand's are already aligned. */ .brand{display:flex;align-items:center;gap:10px;min-width:0;padding-left:52px} @media (min-width:980px){ /* From here `main` and the topbar are centred at 900px, so the viewport-anchored button sits outside them and the gap is for nothing. Same breakpoint as `.practice-title`. */ .brand{ padding-left:0 } } /* THE LANGUAGE SWITCH, which used to be a static logo tile. See the note by `paintLang` in app.js. Two stacked lines now: the language she is LEARNING on top, her own underneath. 42x42, back near the original 38. `langShort` is capped at three characters in every language now, so the widest stacked pair is three over three and the badge no longer has to be wide enough for "Engl." over "Russ." — see the note by `langShort_de` in i18n.js. It is a