/* ===== English vocabulary words — helium3words.com ===== */ /* ===== The palette ===== Dark is the default and stays the default. Nothing here reads prefers-color-scheme: a device set to light does not turn the app light on its own, because the colours are part of what the app looks like and not a setting the browser gets to make for it. Light is something the visitor asks for on the settings screen, and the answer is written onto as data-theme (see applyDisplay in app.js). Every colour on a screen is a token declared here, and the light block below redefines the tokens and nothing else. That is the whole discipline of it: a rule that spells a colour out where it is used is a rule the light theme cannot reach, and it would sit there as a dark patch on a light page. A new colour is named here first and given a light value in the same edit. legal.html and maintenance.html load this file too. Their small local theme.js reads the saved display preference and applies the same attributes before paint; when no preference exists, they keep this default dark palette. */ :root { color-scheme: dark; --bg: #0C0F12; --card: #15191E; --border: #252B32; /* Decorative dividers may stay quiet, but the edge that identifies an input or button has to remain visible without relying on its label. This clears 3:1 against both --bg (3.78:1) and --card (3.47:1). */ --control-border: #62707C; --text: #F2F5F3; --muted: #98A2A9; --primary: #7EE787; --on-primary: #0B1F10; --success: #4ADE80; --success-bg: #10331F; --error: #FF5C5C; --error-bg: #3A1616; /* The delete buttons. Their label is the one place the red must not also be the ink: a red word on a red tint is the weakest text on the screen, and it says "delete everything". White on this fill clears 14.9:1. */ --danger-btn-bg: #3A1616; --danger-btn-ink: #FFFFFF; /* The badge colours: the level numbers on the home screen, the tile icons and the matching icons on the help screen. Each is a pair — a fill and the ink on it — and the two are always used together. */ --badge-green-bg: #12351C; --badge-green: #7EE787; --badge-amber-bg: #3A2E10; --badge-amber: #FFC94A; --badge-blue-bg: #16283C; --badge-blue: #6CB4FF; --badge-purple-bg: #2E1B3C; --badge-purple: #D9A1FF; --badge-orange-bg: #3A2412; --badge-orange: #FFB870; /* A starred word, and the empty groove behind a chart bar or a progress bar */ --star: #FFC94A; --track: #2A313A; --overlay: rgba(4, 6, 8, 0.72); --radius: 20px; --radius-btn: 16px; --shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55); /* Soft halo on the Advanced Learning panel that is being read aloud. The colour is the accent at a low alpha, so light theme can darken the same token without a separate rule at the call site. */ --learn-glow: rgba(126, 231, 135, 0.22); /* The step a real pointer gets on a bordered button. One shade away from --card in each theme, so a hovered button parts from the page without its ink moving. */ --btn-hover-bg: #1D242B; /* ===== Text weight ===== Four tokens covering every weight the app uses, so that "Bold text" on the settings screen is one switch and not a hunt through the file. No rule states a weight in figures any more: --weight-normal is ordinary running text, --weight-medium the slightly heavier answer buttons and chips, --weight-bold the headings and labels, --weight-heavy the scores, the level numbers and the word being practised. All four have to move together, and that is the lesson of the first attempt at this: it lifted the two lightest tokens only, on the reasoning that what was already 700 was bold enough. But most of what is on a screen here is already 700 or 800 — every heading, every tile name, every chip — so the switch moved almost nothing that the eye was actually resting on, and read as broken rather than subtle. The steps below keep the four ranks distinct at both settings; the page gets heavier all through, and its hierarchy survives. There is no font licence to breach in doing this. The app bundles no font and loads none: it asks for system-ui, which is the font the device already uses for its own interface, and drawing it heavier is what the operating system itself does when its own bold-text accessibility setting is switched on. NOTICE.md records that there is no third-party font here to have terms. A device whose system font has no face at a given weight is not a problem either — the browser picks the nearest one it has. */ --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; --weight-heavy: 800; /* The last step of all, for the rank that has run out of font. See the rule below .heavy-rank; zero here means the ordinary page draws no stroke at all. */ --heavy-stroke: 0; } /* ===== Light ===== Not an inversion — a light page needs ink of its own. The greens and reds that carry on a near-black background disappear on a near-white one, so --primary, --success and --error are darkened here until they clear 4.5:1 against both --bg and --card, and the badge pairs are turned round: a pale fill with dark ink on it rather than the reverse. --on-primary goes to white, because what it names is whatever sits on top of --primary, and that is now a deep green. */ :root[data-theme="light"] { color-scheme: light; --bg: #F5F7F6; --card: #FFFFFF; --border: #DBE2DF; /* The light-theme control edge clears 3:1 against --bg (3.64:1) and --card (3.91:1); --border remains the quieter token for decorative cards and rules. */ --control-border: #79837F; --text: #12171A; --muted: #5A656C; --primary: #1B7A32; --on-primary: #FFFFFF; --success: #0F7A38; --success-bg: #E3F6E8; --error: #C42B2B; --error-bg: #FDE7E7; /* White ink cannot sit on the pale tint, so here the delete button is filled with the red itself: white on #C42B2B clears 5.4:1. */ --danger-btn-bg: #C42B2B; --danger-btn-ink: #FFFFFF; --badge-green-bg: #DDF3E1; --badge-green: #14672A; --badge-amber-bg: #FBEBC8; --badge-amber: #7A5300; --badge-blue-bg: #DCEBFB; --badge-blue: #14528F; --badge-purple-bg: #EEE2F8; --badge-purple: #6B2E9E; --badge-orange-bg: #FCE7D4; --badge-orange: #8A4A12; --star: #9A6B00; --track: #DDE3E1; --overlay: rgba(16, 22, 26, 0.45); --shadow: 0 8px 24px rgba(16, 24, 20, 0.10); --shadow-modal: 0 16px 48px rgba(16, 24, 20, 0.22); --learn-glow: rgba(27, 122, 50, 0.16); --btn-hover-bg: #EDF2EF; } /* ===== Bold text ===== Set on the settings screen and written onto beside data-theme. Every weight on the page moves, and each one has to be aimed at a face the font actually has — the figures are not a scale, they are a lookup into four faces (see the measurements under .heavy-rank below). The steps are two faces each wherever there is room for two, because one face is not enough to notice on a phone. That is not a guess: --weight-medium first went 500 -> 700, which reads as a jump of two hundred and is nothing of the kind — 500 already resolves to the Semibold face, so the answers in a round were half-bold to begin with and moved a single step to Bold. Side by side at 2.5x they were barely distinguishable, and at ordinary size they were not distinguishable at all. 800 lands them on Black instead. */ :root[data-bold="on"] { --weight-normal: 700; /* Regular -> Bold */ --weight-medium: 800; /* Semibold -> Black */ --weight-bold: 900; /* Bold -> Black */ --weight-heavy: 900; /* Black -> Black, so the stroke below does the work */ --heavy-stroke: 0.021em; } /* ===== The rank that has no heavier face ===== The step from --weight-heavy 800 to 900 draws nothing new, and it was worth measuring rather than assuming: rendered at 64px, system-ui on Windows gives 454.91px at weight 400, 457.84 at 500 and 600, 483.69 at 700, and 499.56 at both 800 and 900. Four faces, not nine. So the three lower ranks each move to a face they did not have before, and the top one asks for a face the font does not contain and is handed the one it was already using. Every heading, score and level number sat still — and so did the word being practised, which is the largest thing on the screen and the first thing anyone would look at to see whether the switch had done anything. It had not. A hairline stroke in the text's own colour supplies the step the font cannot. It is measured in em, so it holds its proportion on a 0.72rem badge and on the 3.2rem score alike, and it is worth nothing at all unless bold text is switched on. The list is written out because CSS cannot select "everything using that token". Every rule that sets font-weight: var(--weight-heavy) belongs here; a new one has to be added in the same edit, or it will be the one element on the screen that does not move. ::marker is deliberately absent — it takes font properties and not this one. */ :root[data-bold="on"] .home-titles h1, :root[data-bold="on"] .level-num, :root[data-bold="on"] .level-name, :root[data-bold="on"] .tile-icon-help, :root[data-bold="on"] .notice-group-icon, :root[data-bold="on"] .quiz-word, :root[data-bold="on"] .learn-word, :root[data-bold="on"] .score-big, :root[data-bold="on"] .page-title, :root[data-bold="on"] .stat-num, :root[data-bold="on"] .game-score, :root[data-bold="on"] .help-hero-icon, :root[data-bold="on"] .help-icon-warn, :root[data-bold="on"] .modal-title, :root[data-bold="on"] .legal-title, :root[data-bold="on"] .legal-section h2, :root[data-bold="on"] .maint-title { -webkit-text-stroke: var(--heavy-stroke) currentColor; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Amharic beside English. Ethiopic has no glyphs in Segoe UI, so Windows hands it to Ebrima, which draws its letters about a sixth taller than Segoe UI's capitals at the same font-size: "አማርኛ → English" then reads as two sizes on one line, the Amharic looming over the Latin rather than sitting with it, and the taller line box pushes the button it sits in taller than the row beside it. Nothing is out of place — the letters are simply bigger — so the fix is to ask for the same font one notch smaller, not to move anything. size-adjust does that at the font rather than in the cascade, so it composes with every font-size rule in this file and cannot compound where one language-marked element sits inside another, as the consent notice's do. unicode-range holds it to the Ethiopic blocks: every other character is still drawn by system-ui, and where Ebrima is not installed the face has no source at all and Ethiopic falls back exactly as it did before. The bold face is named as well — Ebrima Bold is what the buttons and headings ask for, and without it the browser would smear the regular one instead. */ @font-face { font-family: "Ethiopic UI"; src: local("Ebrima"); font-weight: 400; size-adjust: 90%; unicode-range: U+1200-139F, U+2D80-2DDF, U+AB00-AB2F; } @font-face { font-family: "Ethiopic UI"; src: local("Ebrima Bold"), local("Ebrima"); font-weight: 700; size-adjust: 90%; unicode-range: U+1200-139F, U+2D80-2DDF, U+AB00-AB2F; } html, body { background: var(--bg); color: var(--text); font-family: "Ethiopic UI", system-ui, sans-serif; font-weight: var(--weight-normal); min-height: 100%; } button { font-family: inherit; /* Inherited rather than left to the browser, so that "Bold text" reaches the buttons too — a form control does not take the page's font weight on its own. */ font-weight: inherit; color: inherit; background: none; border: none; cursor: pointer; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hidden { display: none !important; } .muted { color: var(--muted); } /* The consent banner sits fixed at the bottom of the screen and covers the end of the page — including the footer links to the terms and the policy that the banner itself points at. app.js measures its height and feeds it in here, so it is possible to scroll below it. */ body.consent-banner-open { padding-bottom: var(--consent-banner-h, 0px); } /* A phrase that must not break across two lines */ .nobreak { white-space: nowrap; } /* ===== Accessibility ===== */ /* A visible focus ring for keyboard navigation (WCAG 2.4.7) */ :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; } h1:focus, .page-title:focus, .quiz-word:focus { outline: none; } h1:focus-visible, .page-title:focus-visible, .quiz-word:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; } /* Skip link to the content (WCAG 2.4.1). The skip target carries tabindex="-1" so that focus really does move to it, but it is not a control that can be activated and is therefore not marked with a focus ring — a frame around the whole app would confuse rather than inform. */ #main:focus { outline: none; } .skip-link { position: absolute; top: -60px; left: 16px; background: var(--primary); color: var(--on-primary); font-weight: var(--weight-bold); padding: 12px 20px; border-radius: 0 0 12px 12px; text-decoration: none; z-index: 200; transition: top 0.2s; } .skip-link:focus { top: 0; } /* Honouring the reduced-motion preference (WCAG 2.3.3) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .app { max-width: 520px; margin: 0 auto; padding: 20px 16px 40px; } /* #app-footer used to be the last child of .app and took its width, its side padding and the 40px beneath it from that box. It is outside

now, so that