, so `.stack > * + *` at (0,1,0) beats a bare `hr` at (0,0,1) and quietly held the gap above the mark at --space-md — 24 above and 24 below, which is not the 2:1 the comment above claims and leaves the mark belonging to neither side. This is the same selector shape at (0,1,1), so it wins on specificity rather than on being further down the file. `* + hr` and not `hr`, so an

that opened a screen would not be pushed away from nothing. */ .stack > * + hr { margin-block-start: var(--space-xl); /* 48px */ } /* THE FOOTER. One link, on every signed-in screen — see the long comment in templates/base.html for why it exists at all, which is the more important half of this. IT IS IN base.css AND NOT components.css ON PURPOSE. This file says at the top of itself that its scope is "a modern reset, page furniture, and the accessibility floor", and that components arrive with the screens that need them. A footer rendered by the skeleton on every single page is the definition of page furniture; it belongs to no screen, so there is no screen for it to arrive with. Putting it in components.css would have worked and would have said the wrong thing about what it is. --surface-footer (navy-dark) exists in tokens.css, is used by nothing, and is deliberately NOT used here. A full-width dark band at the bottom of every page is the marketing site's footer, and it reads as a footer with a column of links in it — six things a family member then hunts through. There is one link. A quiet raised strip with a hairline above it separates it from the content, which is the whole job. --surface-raised carries its own colour, exactly as .card and .band-tint do above and for the same reason: a surface that sets only a background inherits whatever text colour it happens to land in. --text-body on the raised surface is 10.13:1. */ .site-footer { background-color: var(--surface-raised); color: var(--text-body); border-top: 1px solid var(--border-soft); padding-block: var(--space-sm); } /* Bold, the same weight `.back-link` gives the way back, because this is a target rather than a reference — and on a cream strip under a page of body copy the underline alone is easy to walk past. The 44px comes from .tap-link in section 4; nothing here sizes it. */ .site-footer a { font-weight: var(--weight-bold); } /* -------------------------------------------------------------------------- 8. Wider screens -------------------------------------------------------------------------- min-width only. Everything above this point is the 320–390px layout. -------------------------------------------------------------------------- */ @media (min-width: 40em) { /* ~640px */ :root { --container-pad: var(--space-md); } h1 { font-size: var(--size-3xl); } main { padding-block: var(--space-xl); } .card { padding: var(--space-lg); } } @media (min-width: 64em) { /* ~1024px */ :root { --container-max: 48rem; } } /* -------------------------------------------------------------------------- 9. Reduced motion -------------------------------------------------------------------------- Honours the operating-system setting. Durations collapse to near zero rather than to zero, so anything relying on a transitionend event still fires and does not leave the interface stuck mid-state. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } a, button, .button { transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); } } /* -------------------------------------------------------------------------- 10. Forced colours (Windows high contrast) -------------------------------------------------------------------------- */ @media (forced-colors: active) { button, [type="button"], [type="submit"], .button { border: 2px solid ButtonText; } :focus-visible { outline: 3px solid Highlight; } /* The separator above is a background, and forced colours discards a background — which would take the whole mark with it. Same reason and same keyword as office.css §3a's section stub. */ hr { background-color: CanvasText; } } /* -------------------------------------------------------------------------- 11. Print — a family member printing a visit log to take to a relative -------------------------------------------------------------------------- */ @media print { body { /* Paper is white; the cream ground would only waste ink. The text stays the brand ink rather than pure black — no colour is invented here. */ background: white; color: var(--ink); } .skip-link, nav, /* Somebody printing a visit log to take to a relative is printing the visit log. "How I let you know" is an on-screen control that does nothing on paper, and it would be the last line of every printed page. */ .site-footer { display: none; } .card { box-shadow: none; border: 1px solid var(--ink-muted); } /* A printed page loses every href, so put the target back in the text. */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: var(--size-body); word-break: break-all; } }