/** * assets/styles/platform.css * * The public site on dawkids.com: the front page, the nursery directory, a * nursery's page, a category, and the join form. * * Built on ds/tokens.css -- which must be loaded BEFORE this file. Both * templates that render this site do so (views/platform/layouts/layout.ejs and * views/platform/pages/home.ejs, which carries its own copy of the shell). If * a third entry point is ever added, it loads the tokens or it gets a page with * no colours at all; that has happened once already. * * WHAT CHANGED, AND WHY IT HAD TO * * The sheet this replaces had three faults that no amount of tuning fixes: * * 1. `.searchbar` was `display: flex; flex-wrap: wrap` inside `max-width: 720px` * holding an input at `flex: 1 1 220px`, two selects at `flex: 0 1 160px` * and a button. 220 + 160 + 160 + button does not fit in 720, so the bar * wrapped into four ragged rows at EVERY width, including a desktop. It was * not a small-screen problem; it never laid out correctly at all. It is a * grid now, with an explicit shape at each of three widths. * * 2. Three media queries, for the whole site. * * 3. `letter-spacing: -.02em` on the h1. Arabic is a joined script: negative * tracking pulls the letters of a word into each other. It is not a tight * heading, it is a misspelt one. */ /** * ALIASES ONTO THE DESIGN SYSTEM -- not a second palette. * * These names are referenced throughout this file and were previously declared * here as literals (#14202c ink, #03a9f3 accent). Because this sheet loads * after the tokens and re-used several of the same names, it silently won every * one of those arguments, so the public site kept the purchased theme's stock * blue and had no dark theme at all. * * `--bg` is included because two rules below referenced it and nothing ever * declared it -- those backgrounds have been resolving to nothing since the * sheet was written. */ :root { --muted: var(--ink-muted); --accent-deep: var(--accent-hover); --warm: var(--sun-500); --radius: var(--r-lg); --shadow: var(--e-2); --bg: var(--surface-2); } * { box-sizing: border-box; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-ui); font-size: var(--t-lg); line-height: var(--lh-body); /** * NO `direction` AND NO `text-align: right` HERE. * * Both were hard-coded, and both were wrong for six of the ten languages this * site ships in. The templates already compute `dir` on , correctly, * and this rule then overrode the attribute they had just set: an English or * Turkish visitor got a right-to-left page, one click from the switcher. */ text-align: start; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; letter-spacing: 0; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); } @media (max-width: 575.98px) { .wrap { padding-inline: var(--s-4); } } /* ====================================================================== * * HEADER * ====================================================================== */ .site-head { background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); position: sticky; inset-block-start: 0; z-index: var(--z-sticky); } .site-head .wrap { display: flex; align-items: center; gap: var(--s-4); min-height: var(--topbar-h); padding-block: var(--s-2); } .brand { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-xl); color: var(--ink); flex: 0 0 auto; } .brand:hover { text-decoration: none; } .brand img { height: 32px; width: auto; background: none; } .site-nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; } .site-nav > a { color: var(--ink-2); font-size: var(--t-sm); font-weight: var(--fw-medium); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); min-height: 38px; display: inline-flex; align-items: center; } .site-nav > a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; } /** * The sign-in button, which was dark ink on a dark fill. * * `.site-nav > a` is a class plus an element, so it outranks the bare `.btn` * that was trying to set the label colour, and the nav's own --ink-2 won. The * button was rendered, filled with the brand, and its label almost invisible * on it. Specificity, not colour choice -- the fix is to say it at the same * weight the nav rule is said at. */ .site-nav > a.btn, .site-nav > a.btn:hover { color: var(--ink-on-brand); } .site-nav > a.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* ---- the mobile menu -------------------------------------------------- * * There was none. The nav wrapped, and on a phone the brand, the links and the * sign-in button fought over one row and all of them lost. * * It opens with no JavaScript: a visually hidden checkbox, a