/* * The main site's structural stylesheet — milestone 5.1. * * Structure only. Every colour, every family and every type size is a custom * property from public/assets/generated/palette.css and layout.css, which the * Admin writes and this file is always loaded before (app/Render/SiteAssets * links it first, so the owner's Custom CSS can beat it — docs/08's fixed * link order). There is no literal hex here, per docs/10-conventions.md's CSS * rule, and no value that expresses a decision the Layout screen owns. * * ONE FLUID BUILD. There is one DOM, from ~360px to ~1600px+ * (docs/02-mainsite-spec.md §2). The Admin's Desktop and Mobile tabs are two * configurations of it, and everything that differs between them lives inside * the compiler's own split at 860px: * * - visibility -> .ha-section--hide-wide / .ha-section--hide-narrow * - order -> .ha-section--n1 … --n12 (--n13 is the overflow bucket), * scoped to the narrow query * * Section content arrived with milestone 5.2 and the header and footer with * 5.3. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* * docs/02 §7: `html { scroll-behavior: smooth }` — "respect * prefers-reduced-motion in production", which the query at the foot of this * file does. The padding is docs/04's own figure for the same thing: "anchor * scrolling is smooth with an 80px offset for the sticky header", expressed * once here rather than per anchor. */ scroll-behavior: smooth; scroll-padding-top: 80px; } .ha-site { margin: 0; min-height: 100vh; /* Header, column, footer — so the footer sits at the bottom of a short page. */ display: flex; flex-direction: column; background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: var(--type-base-size); /* CLAUDE.md: never render UI text at weight 400. */ font-weight: var(--weight-body); line-height: 1.7; } /* * CLAUDE.md: "Give every interactive element a visible focus ring — * outline: 2px solid var(--teal), 2px offset." Declared once, on everything, * so a control added later cannot be born without one. */ :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* * The page column. 1240px is the design's own max width * (design/MainSite.dc.html; docs/02-mainsite-spec.md §3.2) — HTML wins for * values, per CLAUDE.md's precedence rule. */ .ha-main { display: flex; flex-direction: column; /* Grows into whatever the header and footer leave. */ flex: 1 0 auto; width: 100%; /* * 44px between bands is the design's own rhythm (`margin: 0 0 44px` on * every one of them in design/MainSite.dc.html). It is structure, not a * decision the Layout screen owns — no field expresses the distance * BETWEEN two sections, only the padding inside each. */ gap: 44px; max-width: 1240px; margin: 0 auto; padding: 32px; } .ha-section { /* A flex child will not shrink below its content without this. */ min-width: 0; } /* * A band with nothing to show (a Banner with no picture chosen, a cleared * Quote, a Featured band with no article) is still shipped as an empty * wrapper — and an empty flex item would still cost the 44px gap above. * page.php writes the wrapper with nothing between its tags, so :empty * holds exactly when the renderer returned nothing. */ .ha-section:empty { display: none; } /* Hidden on the wide configuration only. */ @media (min-width: 861px) { .ha-section--hide-wide { display: none; } } @media (max-width: 860px) { .ha-main { padding: 0 20px; } /* Hidden on the narrow configuration only. */ .ha-section--hide-narrow { display: none; } /* * The narrow configuration's section order. DOM order is the wide * configuration's, so only this half needs stating — ADR-0004 rule 1: the * two configurations never inherit from each other, and neither is a * base for the other. * * --n13 is the OVERFLOW bucket, not a thirteenth position: a section past * the twelfth shares it (HA\Render\ThemeEngine::MAX_ORDERED_SECTIONS), so * it sorts after everything ordered and keeps DOM order among its * fellows. Without a class it would land at order 0 — before all of them. */ .ha-section--n1 { order: 1; } .ha-section--n2 { order: 2; } .ha-section--n3 { order: 3; } .ha-section--n4 { order: 4; } .ha-section--n5 { order: 5; } .ha-section--n6 { order: 6; } .ha-section--n7 { order: 7; } .ha-section--n8 { order: 8; } .ha-section--n9 { order: 9; } .ha-section--n10 { order: 10; } .ha-section--n11 { order: 11; } .ha-section--n12 { order: 12; } .ha-section--n13 { order: 13; } } /* ═════════════════════════════════════════════════════════════════════════ * MILESTONE 5.2 — the six section renderers * * Everything below draws structure with values it does not choose: * * - `--featured-title-size`, `--quote-section-pad`, `--latest-card-bg` and * the ~60 others are `public/assets/generated/layout.css`'s, written by * the Admin from the layout cascade, desktop at `:root` and mobile inside * its own `@media (max-width: 860px)`. Nothing here restates one. * - `--ink`, `--teal`, `--tint-massage` and the rest are `palette.css`'s. * There is no hex in this file and no `rgba()` literal either: a * translucency is `color-mix(in srgb, var(--token) N%, transparent)`, so * a palette change carries it along — docs/04-design-system.md's own * instruction for the category hover tints, applied everywhere. * - `--ha-cat-color` / `--ha-cat-tint` are the **per-instance** pair: a * card's own category accent and soft tint, set by the class * HA\Render\TokenClasses emits, because the site's CSP drops the inline * `style` attribute docs/08 and docs/10 prescribe * (docs/12-open-questions.md#q22). * * Layout SELECT fields arrive as two classes, one per device configuration * (HA\Render\LayoutFields): `ha-o--…` is resolved above 860px, `ha-on--…` at * 860px and below. Only values that differ from this file's own base need a * rule — the default costs nothing, which is why each family below lists * fewer rules than the field has options. * ═════════════════════════════════════════════════════════════════════════ */ /* * The shared surfaces. Named once so a band, a card and a row cannot drift * apart, and so the border SELECT has one thing to change per block. */ .ha-site { --ha-hairline-color: color-mix(in srgb, var(--white) 65%, transparent); --ha-hairline: 1px solid var(--ha-hairline-color); --ha-glass: color-mix(in srgb, var(--white) 50%, transparent); --ha-soft-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 12%, transparent); /* * The arch. `180px 28px 28px 28px` is the design's own top-left arch * (design/MainSite.dc.html) and the three small corners are the Admin's * `featured.image.radius`; only the big one is structural, so only it is * here — the same standing as `.ha-main`'s 1240px above. */ --ha-arch: 180px; /* A pill, in the one sense every pill in the design agrees on. */ --ha-pill: 999px; /* CLAUDE.md and docs/02 §7: 44px minimum touch target. */ --ha-touch: 44px; } /* Screen-reader-only, for a real