/* core's own stylesheet: the frame, not the content. * * `core` templates write the page shell — the skip link, the site * navigation and its wordmark, the masthead every page opens on, the * footer, the article index, and the enquiry panel a form page renders. Some * of that markup could not live in a block library at all: the menus read * site settings and the request path, the masthead reads page-model fields * and calls the image tag. * * This file introduces no token of its own. Every value it paints comes from * the `--uilib-*` contract `static/css/theme.css` defines, and every `var()` * carries a fallback: a structural fallback is an ordinary length, a colour * fallback is `currentColor`, `transparent` or `inherit`, never a literal * colour. That is what makes the theme swap reach this layer too. * * It styles no class `uilib.css` already styles. `core` composes uilib's * blocks and reuses `.eyebrow` and `.btn` in its own markup, but restyling * one here would be the shell silently overriding the section library from * outside it. The one exception is `.btn--lg`, a size modifier on a control * `uilib` renders no markup for — see the enquiry panel below. */ /* -------------------------------------------------------------------------- * The reset, and the page ground * ----------------------------------------------------------------------- */ /* Scoped to `.page`, the class `core` writes on ``, rather than to a * bare `body`: the Wagtail admin is not this site's page shell. Unlike the * shipped reset this replaces, the UA's default 8px body margin goes — this * design is built on full-bleed bands that must reach the viewport edge, and * an 8px gutter of unpainted canvas down both sides of every one of them is * the single most template-looking thing a page can do. */ .page { margin: 0; background-color: var(--uilib-paper, transparent); color: var(--uilib-ink, inherit); /* Body copy is set in a serif at a size chosen to be read, not skimmed. * `text-size-adjust` stops iOS inflating it inside the narrow columns the * grids below collapse to. */ font-family: var(--uilib-font-body, serif); font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem); line-height: 1.65; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Nothing on this site scrolls sideways. A long word in a heading breaks * rather than pushing the viewport wider than itself. */ .page__main { overflow-x: clip; } /* -------------------------------------------------------------------------- * Skip link * ----------------------------------------------------------------------- */ /* Off-screen until focused, then an ordinary control in the top-left. Moved * with `top`, not `display: none`, because a hidden element is not * focusable and a skip link that cannot be focused is decoration. */ .skip-link { position: absolute; top: -4rem; left: var(--uilib-gutter, 1rem); z-index: 20; padding: 0.625rem 1rem; font-family: var(--uilib-font-display, sans-serif); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; background-color: var(--uilib-accent, transparent); color: var(--uilib-accent-ink, inherit); border-radius: var(--uilib-radius, 2px); transition: top 0.15s ease; } .skip-link:focus-visible { top: 0.75rem; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* `
` takes `tabindex="-1"` so the skip link can land on it; that makes * it focusable by script, and browsers would otherwise ring it. The ring * belongs on things a visitor tabbed to, not on the thing they tabbed * *into*. */ .page__main:focus { outline: none; } /* -------------------------------------------------------------------------- * Site navigation * ----------------------------------------------------------------------- */ /* Sticky, and painted on the darkest of the three grounds. The whole site * has one conversion — reach the form — and the control that goes there * rides along in this bar, so it must not scroll away. */ .site-nav { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem var(--uilib-gutter, 1rem); padding: 0.875rem var(--uilib-gutter, 1rem); background-color: var(--uilib-shade, transparent); color: var(--uilib-shade-ink, inherit); border-block-end: 1px solid var(--uilib-border, currentColor); } /* The wordmark. A typographic treatment, not a logo: the display face in * caps, tracked out hard, with the paired hairline beneath that is this * site's one piece of ornament — two parallel rules, the accent over the * border tone, the mark the whole design takes its cue from. It repeats at * the foot of the page and nowhere else. */ /* The oryx mark, wherever it appears. Two paths, painted from the two * tokens the artwork was drawn in: the linework in the action colour, the * stroke under the eye in the label colour. Read, never defined — the * fallbacks are the token contract's, not a second opinion about the brand. * * Sized by its container in `em`, so one declaration follows the wordmark * beside it up and down its fluid clamp. It is 1:2 portrait, and the hollow * linework closes into a smudge much below ~48px: the nav floor is set with * that in mind and is the reason the header row is taller than the wordmark * alone needed. */ .logo-mark { display: block; flex: none; width: auto; } .logo-mark__line { fill: var(--uilib-accent, currentColor); } .logo-mark__eye { fill: var(--uilib-highlight, currentColor); } /* The lockup is the anchor; the wordmark inside it carries the type and the * paired rule, which stops under the name rather than running on under the * mark. */ .site-nav__brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--uilib-shade-ink, inherit); } /* 56px at full width, 44px at the narrow end. The floor is not taste: the * mark is 1:2 portrait and finely drawn, and below roughly this its hollow * linework closes up and it stops reading as an animal — a cropped head * survives small sizes far better, which is what `static/brand/favicon.svg` * is, but the crop only reads as deliberate inside the frame an icon has. * On the open ground of the nav the horns have to finish. The header is * taller than the wordmark alone needed as a result. */ .site-nav__brand .logo-mark { height: clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem); } .site-nav__brand-name { font-family: var(--uilib-font-display, sans-serif); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding-block-end: 0.3rem; border-block-end: 2px solid var(--uilib-accent, currentColor); box-shadow: 0 4px 0 -1px var(--uilib-border, transparent); } .site-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; list-style: none; margin: 0; padding: 0; } .site-nav__item { display: flex; } /* Nav labels take the display face in caps: this is the utility role that * would otherwise need a third family. The current page is distinguished by * a rule beneath it rather than by colour alone. */ .site-nav__link { font-family: var(--uilib-font-display, sans-serif); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding-block: 0.35rem; border-block-end: 2px solid transparent; color: var(--uilib-shade-ink, inherit); transition: color 0.15s ease, border-color 0.15s ease; } .site-nav__link:hover { color: var(--uilib-accent, currentColor); } .site-nav__link[aria-current="page"] { border-block-end-color: var(--uilib-accent, currentColor); } /* The one control in the bar: the site's form page, rendered as a button * rather than as another word in the row. */ .site-nav__link--cta { padding: 0.55rem 1.15rem; border: 1px solid var(--uilib-accent, currentColor); border-radius: var(--uilib-radius, 2px); background-color: var(--uilib-accent, transparent); color: var(--uilib-accent-ink, inherit); transition: background-color 0.15s ease, color 0.15s ease; } .site-nav__link--cta:hover { background-color: transparent; color: var(--uilib-accent, currentColor); } .site-nav__link--cta[aria-current="page"] { background-color: transparent; color: var(--uilib-accent, currentColor); } @media (prefers-reduced-motion: reduce) { .site-nav__link, .site-nav__link--cta { transition: none; } } /* -------------------------------------------------------------------------- * The masthead * ----------------------------------------------------------------------- */ /* Every page opens on the same plate: the darkest ground, the page's one * `

`, and whatever hero copy the page carries under it. Framing the page * dark at both ends is what makes the sections between them read as lit. * * The texture is the horn ridge — a stack of hairlines at a few percent * opacity, mixed from the accent so it stays on the token seam and follows * a theme swap. `color-mix` degrades to `transparent` where it is not * understood, which leaves a flat plate: the design without its grain, not a * broken one. */ .masthead { padding-block: clamp(3.5rem, 11vw, 8rem) clamp(3rem, 8vw, 5.5rem); padding-inline: var(--uilib-gutter, 1rem); background-color: var(--uilib-shade, transparent); color: var(--uilib-shade-ink, inherit); background-image: repeating-linear-gradient( to bottom, color-mix(in srgb, var(--uilib-accent, transparent) 5%, transparent) 0 1px, transparent 1px 10px ); border-block-end: 1px solid var(--uilib-border, currentColor); } .masthead__measure { max-width: 68rem; margin-inline: auto; } /* The headline. The display face at the largest size on the site, set tight * and left-aligned — a centred hero headline is the reflex, and it is what * makes every landing page look like every other one. `text-wrap: balance` * keeps the last line from stranding a single word. */ .page__heading { margin: 0; max-width: 20ch; font-family: var(--uilib-font-display, sans-serif); font-size: clamp(2.5rem, 1.5rem + 5.2vw, 5rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.02; text-wrap: balance; color: var(--uilib-shade-ink, inherit); } /* -------------------------------------------------------------------------- * Hero * ----------------------------------------------------------------------- */ /* The hero paints nothing: it is content inside the masthead plate, not a * band of its own. It supplies the rhythm between the headline above it and * whatever the page's first section is. */ .hero { margin-block-start: 1.75rem; } /* The `--tall` modifier still has to differ visibly from the base, and does * it with space rather than with a `min-height` that would strand the * headline in the middle of an empty screen. */ .hero--tall { margin-block-start: 2.75rem; padding-block-end: clamp(1rem, 4vw, 3rem); } .hero__image { display: block; max-width: 100%; height: auto; margin-block-end: 1.75rem; border-radius: var(--uilib-radius, 2px); } /* A deck, when a page wants one: a second line under the headline, in the * display face at a fraction of its size, not another headline. */ .hero__heading { margin: 0 0 1rem; max-width: 32ch; font-family: var(--uilib-font-display, sans-serif); font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem); font-weight: 500; letter-spacing: 0.005em; line-height: 1.3; color: var(--uilib-accent, currentColor); } .hero__intro { margin: 0; max-width: 52ch; font-size: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem); line-height: 1.6; color: var(--uilib-muted, currentColor); } /* -------------------------------------------------------------------------- * Footer * ----------------------------------------------------------------------- */ /* The surface pair, not the deepest plate. The footer follows the * call-to-action band immediately, and when both were painted on `--uilib-shade` * the two merged into a single dark region a third of the page tall — the * call to action lost its moment, and the page stopped closing on anything. * Lighter than the band above it, the footer reads as the quiet after the * statement rather than more of the same. */ .site-footer { padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 5vw, 3rem); padding-inline: var(--uilib-gutter, 1rem); background-color: var(--uilib-surface, transparent); color: var(--uilib-surface-ink, inherit); border-block-start: 1px solid var(--uilib-border, currentColor); } .site-footer__measure { max-width: 68rem; margin-inline: auto; } /* The wordmark at the size the nav's cannot be. The page closes on the name * it opened under. */ .site-footer__brand { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); margin: 0; font-family: var(--uilib-font-display, sans-serif); font-size: clamp(2rem, 1rem + 5.5vw, 4.5rem); font-weight: 700; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; color: var(--uilib-surface-ink, inherit); } /* `em` against the clamp above: the mark ends up a little over twice the * cap height at every width, which is the proportion the lockup was drawn * at, without a second clamp to keep in step with the first. */ .site-footer__brand .logo-mark { height: 2.1em; } .site-footer__tagline { margin: 1.25rem 0 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.6; color: var(--uilib-muted, currentColor); } /* The paired rule again, this time as the divider between the wordmark and * the small print under it. */ .site-footer__rows { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem var(--uilib-gutter, 1rem); margin-block-start: clamp(2rem, 5vw, 3rem); padding-block-start: 1.25rem; border-block-start: 2px solid var(--uilib-accent, currentColor); box-shadow: inset 0 4px 0 -1px var(--uilib-border, transparent); } .footer-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; } .footer-nav__item { display: flex; } .footer-nav__link { font-family: var(--uilib-font-display, sans-serif); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--uilib-muted, currentColor); } .footer-nav__link:hover, .footer-nav__link[aria-current="page"] { color: var(--uilib-accent, currentColor); } /* -------------------------------------------------------------------------- * The enquiry panel * ----------------------------------------------------------------------- */ /* The form page's one job, on the site's largest spec plate: a ruled, * chamfered surface with the accent along its top edge. `.section` gives it * the same vertical rhythm every uilib section has, so the panel sits in the * page's rhythm rather than inventing one. */ .enquiry-panel { max-width: 54rem; margin-inline: auto; padding: clamp(1.5rem, 5vw, 3rem); background-color: var(--uilib-surface, transparent); color: var(--uilib-surface-ink, inherit); border: 1px solid var(--uilib-border, currentColor); border-block-start: 3px solid var(--uilib-accent, currentColor); /* The chamfer: one cut corner, the design's only ornament besides the * paired rule. A cut, not a curve. */ clip-path: polygon( 0 0, calc(100% - var(--uilib-chamfer, 0px)) 0, 100% var(--uilib-chamfer, 0px), 100% 100%, 0 100% ); } .enquiry__errors { margin-block-end: 1.5rem; padding: 0.875rem 1rem; border-inline-start: 3px solid var(--uilib-accent, currentColor); background-color: color-mix( in srgb, var(--uilib-accent, transparent) 12%, transparent ); } .enquiry__errors ul { margin: 0; padding-inline-start: 1.25rem; } /* Short answers pair up on a wide viewport; anything with a textarea in it * takes the full width. `auto-fit` is what makes this one declaration cover * every viewport — there is no breakpoint here to keep in step with the * field list, which is editor-defined and changes without a deploy. */ .enquiry__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.75rem 2rem; } .enquiry__fields .field:has(textarea), .enquiry__fields .field--check { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; } .field__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; margin-block-end: 0.5rem; } /* A field label is a spec-plate label, and takes the label colour rather * than the action colour for the same reason every other label on the site * does — nothing here is a control. */ .field__head label { font-family: var(--uilib-font-display, sans-serif); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--uilib-highlight, currentColor); } .field__optional { font-family: var(--uilib-font-display, sans-serif); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--uilib-muted, currentColor); } .field__help { margin: -0.125rem 0 0.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--uilib-muted, currentColor); } /* The controls. Styled by element rather than by class because the widgets * are Django's own and carry no class of this site's: a form page's fields * are rows an editor adds in the CMS, so nothing here may depend on knowing * what they are. Scoped inside `.enquiry` so this reaches no other form. */ .enquiry input[type="text"], .enquiry input[type="email"], .enquiry input[type="url"], .enquiry input[type="tel"], .enquiry input[type="number"], .enquiry input[type="date"], .enquiry select, .enquiry textarea { display: block; width: 100%; box-sizing: border-box; /* `auto`, inside `.field`'s flex column: it settles the control at the * foot of its grid cell, so two fields side by side line their inputs up * whether or not one of them carried help text or wrapped its label. The * gap above it comes from the label and help text's own margins. */ margin-block-start: auto; padding: 0.75rem 0.875rem; font-family: var(--uilib-font-body, serif); font-size: 1.0625rem; line-height: 1.5; color: var(--uilib-surface-ink, inherit); background-color: color-mix( in srgb, var(--uilib-shade, transparent) 55%, transparent ); border: 1px solid var(--uilib-border, currentColor); border-radius: var(--uilib-radius, 2px); transition: border-color 0.15s ease; } .enquiry textarea { min-height: 9rem; resize: vertical; } .enquiry select { /* The UA arrow is drawn in the UA's colours and disappears on a dark * ground in several browsers; this draws it in ink instead. */ appearance: none; padding-inline-end: 2.5rem; background-image: linear-gradient( 45deg, transparent 50%, var(--uilib-accent, currentColor) 50% ), linear-gradient(135deg, var(--uilib-accent, currentColor) 50%, transparent 50%); background-position: right 1.15rem top 55%, right 0.85rem top 55%; background-size: 0.36rem 0.36rem, 0.36rem 0.36rem; background-repeat: no-repeat; } .enquiry input:hover, .enquiry select:hover, .enquiry textarea:hover { border-color: var(--uilib-accent, currentColor); } /* uilib rings `a` and `button` on `:focus-visible`; form controls are this * layer's markup, so the same floor is restated for them here rather than * left to the UA. */ .enquiry input:focus-visible, .enquiry select:focus-visible, .enquiry textarea:focus-visible { outline: 2px solid var(--uilib-focus, currentColor); outline-offset: 2px; border-color: var(--uilib-focus, currentColor); } /* A field the server rejected. Marked by a rule down its inside edge as well * as by colour, so it is not colour alone that carries the meaning. */ .field--invalid { padding-inline-start: 0.875rem; border-inline-start: 3px solid var(--uilib-accent, currentColor); } .field__errors ul, .enquiry__errors ul { list-style: none; margin: 0; padding: 0; } .field__errors { margin-block-start: 0.5rem; font-size: 0.9375rem; color: var(--uilib-ink, inherit); } /* A checkbox is the one control that must not stretch to the column width. */ .field--check input[type="checkbox"], .field--check input[type="radio"] { margin-inline-end: 0.5rem; } .enquiry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: 2rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--uilib-border, currentColor); } /* A size modifier on uilib's own control. uilib renders no markup carrying * it — the submit button is this layer's — so this adds to the library * rather than overriding it. */ .btn--lg { font-size: 0.9375rem; padding: 0.9rem 2rem; } /* -------------------------------------------------------------------------- * The confirmation * ----------------------------------------------------------------------- */ /* Where a visitor lands after submitting — and, on the scripted path, what * htmx swaps in where the form was. This rule is what makes the two paths * look alike as well as read alike. * * `.form-success` is the region only. An editor's `landing_body` renders * inside it as a section stream, and a section is full-bleed by contract, so * nothing here may cap its width or pad it inward. */ .form-success { margin-block: 0; } .form-success__message { margin: 0; font-family: var(--uilib-font-display, sans-serif); font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; color: var(--uilib-surface-ink, inherit); } /* -------------------------------------------------------------------------- * Article index * ----------------------------------------------------------------------- */ .article-index__list { display: flex; flex-direction: column; list-style: none; max-width: 68rem; margin-block: var(--uilib-rhythm, 4rem); margin-inline: auto; padding: 0; padding-inline: var(--uilib-gutter, 1rem); } .article-index__entry { padding-block: 1.5rem; border-block-end: 1px solid var(--uilib-border, currentColor); } .article-index__entry:first-child { border-block-start: 1px solid var(--uilib-border, currentColor); } .article-index__title { margin: 0; font-family: var(--uilib-font-display, sans-serif); font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } .article-index__title a { text-decoration: none; color: var(--uilib-ink, inherit); } .article-index__title a:hover { color: var(--uilib-accent, currentColor); } .article-index__empty { max-width: var(--uilib-measure, 60ch); margin-block: var(--uilib-rhythm, 4rem); margin-inline: auto; padding-inline: var(--uilib-gutter, 1rem); color: var(--uilib-muted, inherit); } /* Focus visibility — the rules above take the underline off four link * classes and leave them reading as plain text. Removing the affordance is * what makes restating uilib's ring here necessary: the commitment stays * beside the rule that created the need for it. Scoped to the selectors * `core` actually restyles. */ .site-nav__brand:focus-visible, .site-nav__link:focus-visible, .footer-nav__link:focus-visible, .article-index__title a:focus-visible { outline: 2px solid var(--uilib-focus, currentColor); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .enquiry input, .enquiry select, .enquiry textarea { transition: none; } }