/* Site chrome: typefaces, logo and nav. Loaded by the static pages under public/ and imported into the Next app via app/globals.css, so both surfaces render from one source rather than two that drift. Values transcribed from the Figma nav design. */ /* ------------------------------------------------------------- typefaces */ /* Switzer, ITF Free Font Licence, self-hosted from Fontshare. */ @font-face { font-family: "Switzer"; src: url("/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Switzer"; src: url("/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { --font-sans: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } /* -------------------------------------------------------------- the canvas */ /* Two separate causes of the white flash at the top and bottom of a scroll. The colour on paints the canvas, which is what rubber-banding exposes past either end of the document, and it has to live on the root because the body's own background is not propagated once the root has one. Turning off overscroll then stops the bounce itself, so there is nothing to expose. */ html { background: #191919; overscroll-behavior-y: none; } /* ------------------------------------------------------------------ logo */ .site-logo { display: inline-flex; align-items: center; justify-content: center; /* The mark is drawn 41x32. On a phone it is the only branding on screen, so it is scaled up from there; one number here changes both dimensions and the link box that holds them. The 640px block above resets it to 1. */ --logo-scale: 1.44; height: calc(32px * var(--logo-scale, 1)); padding: 0 4px; text-decoration: none; flex: none; } .site-logo:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; } .site-logo-mark { position: relative; display: block; width: calc(41px * var(--logo-scale, 1)); height: calc(32px * var(--logo-scale, 1)); transition: opacity 120ms ease; } .site-logo:hover .site-logo-mark { opacity: 0.75; } .site-logo-mark img { position: absolute; inset: 0; width: 100%; height: 100%; } /* ------------------------------------------------------------------- nav */ .site-nav { position: fixed; bottom: 0; left: 0; width: 100%; padding: 16px 0; z-index: 20; pointer-events: none; font-family: var(--font-sans); } .site-nav-inner { display: flex; flex-direction: column; gap: 16px; padding: 0 16px; } .site-nav-inner > * { pointer-events: auto; } /* Sized to its content so the open panels below inherit exactly the width of the button row, whatever the labels measure. */ .site-nav-left { display: flex; flex-direction: column; align-items: stretch; width: fit-content; } .site-nav-row { display: flex; gap: 4px; align-items: center; } /* Every control in the nav shares this treatment: the two toggles, the panel links beneath them, and the panel links on every page. Only the size and the padding for the +/- sign differ. Figma draws the fill as rgba(0,0,0,0.5), which reads over the hero video but composites to about #0c0c0c on the #191919 document pages and disappears. The nav is fixed and crosses both grounds in one scroll, so the fill has to survive each. A near-opaque mid grey does that without needing a border. Semi-transparent, so the hero video reads through it. It survives the dark pages because the grey is lighter than #191919 rather than darker, which is what black at 50% could not do. */ .nav-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 8px 12px; border: 0; border-radius: 0; background: rgba(48, 48, 48, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #f9fafb; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 20px; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .nav-btn:hover { background: rgba(64, 64, 64, 0.78); } /* Background only, deliberately doubled. Tailwind's preflight resets [type="button"] to a transparent background at the same (0,1,0) specificity and lands later in the bundle, so a single .nav-btn loses the tie and the toggles render see-through on the React pages. Kept to the one property so it cannot outrank layout rules such as .nav-btn-wide's left alignment. */ .nav-btn.nav-btn { background: rgba(48, 48, 48, 0.6); } .nav-btn.nav-btn:hover { background: rgba(64, 64, 64, 0.78); } .nav-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; } /* Get a Quote is the conversion, so it is the one solid white control. */ .nav-btn-primary, .nav-btn.nav-btn-primary { background: #fff; color: #000; } .nav-btn-primary:hover, .nav-btn.nav-btn-primary:hover { background: rgba(255, 255, 255, 0.86); color: #000; } .nav-btn-toggle { padding-right: 4px; } .nav-sign { display: inline-flex; justify-content: center; width: 20px; text-align: center; } .nav-group { display: flex; flex-direction: column; gap: 4px; width: 100%; padding-top: 4px; } .nav-group[hidden] { display: none; } .nav-btn-wide { width: 100%; height: 36px; /* space-between so a label and a trailing date sit at opposite edges. With a single child it behaves exactly as flex-start did, so the panels without dates are unaffected. */ justify-content: space-between; gap: 12px; } /* When the work was finished, dimmed so it reads as metadata rather than as part of the title. Tabular figures keep the dates in a straight column. */ .nav-date { color: rgba(255, 255, 255, 0.42); font-variant-numeric: tabular-nums; flex: none; } /* aria-current is still set on the link for the page you are on, because it is the correct semantic and screen readers use it. It carries no styling: the titles stay bright white and left-aligned, and the date is the only thing on the right. */ /* --------------------------------------------------------- meta and socials */ /* Right-packed, so when the strip is too narrow to hold socials and conditions on one line, both wrapped lines stay flush to the same right edge as the nav's own 24px gutter rather than ragging left. */ .site-nav-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; font-size: 14px; line-height: 20px; color: #fff; text-align: right; white-space: nowrap; } .site-nav-socials { display: inline-flex; align-items: center; gap: 8px; } /* Dimmed rather than underlined, so the line reads as one quiet strip. */ .site-nav-socials a { color: #fff; opacity: 0.6; text-decoration: none; transition: opacity 120ms ease; } .site-nav-socials a:hover { opacity: 1; } .site-nav-socials a:focus-visible { opacity: 1; outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; } /* Separators: an em-dash rule after the socials, a pipe between place and time, and nothing at all before the temperature. */ .site-nav-sep { letter-spacing: -2px; } .site-nav-sep-muted { opacity: 0.6; } /* ---------------------------------------------------------------- masthead */ .site-masthead { position: absolute; top: 0; left: 0; z-index: 20; display: flex; /* Three quarters of the distance the mark sits from the left edge, so the copy tucks in closer to the logo than the logo does to the screen. The figure is measured against the mark itself, not its link box, which carries 4px of padding of its own: 20px inset, 15px visual gap, so 11px here. The 640px block below restores the original 24px. */ gap: 11px; align-items: flex-start; width: 100%; padding: 24px 16px; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: #fff; pointer-events: none; } .site-masthead > * { pointer-events: auto; } /* The tagline runs as one paragraph on a phone and breaks into the two lines of the design from 640px, rather than forcing a break mid-sentence. */ .site-masthead-text span { display: inline; } /* Keeps the copy off the right edge on a phone, where it otherwise runs the full width and wraps awkwardly. Sits on the text rather than the masthead so the document pages, which carry the logo and nothing else, are untouched. */ .site-masthead-text { padding-right: 16px; } /* On the document pages the logo is the only route back to the homepage, so it stays put rather than scrolling away up a 5,000-word article. It sits in the left margin beside the 708px column on anything desktop-width. */ .site-masthead-fixed { position: fixed; width: auto; } /* ------------------------------------------------------------------ mobile */ @media (min-width: 640px) { .site-nav-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 0 24px; } .site-masthead { padding: 24px; gap: 24px; } .site-logo { --logo-scale: 1; } .site-masthead-text { padding-right: 0; } .site-masthead-text span { display: block; } } /* The em dash separates the socials from the conditions, so it has nothing left to separate once the two sit on their own lines. The strip wraps at 909px, so dropping the dash a little above that keeps the socials flush to the same right gutter as the line below. It also buys the one-line layout the 32px the dash and its gap were taking, which pushes the wrap down to about 877px. */ @media (max-width: 920px) { .site-nav-sep-muted { display: none; } } /* Under 640px the whole right-hand strip comes off, because the conditions line has no room. The socials go with it: they are one tap away on the contact page, and a fourth control on a phone row was the thing making this cramped. That fourth control was why the chrome had to tighten here, down to 8px of side padding and a 16px sign. With three the row fits at full size, so the tightening is gone and only the sign stays trimmed, which keeps the plus and minus from sitting too far from their label. The row has to stay on one line for .site-nav-left's fit-content width to resolve to the whole row, which is what the panels below are 100% of. */ @media (max-width: 639px) { .site-nav-right { display: none; } .nav-sign { width: 18px; } } /* Below 360px even that overruns. The last of the padding goes, along with half the gap and some of the page gutter, which holds one line down to 320px. */ @media (max-width: 359px) { .site-nav-inner { padding: 0 12px; } .site-nav-row { gap: 2px; } .nav-btn { padding-left: 6px; padding-right: 6px; } .nav-btn-toggle { padding-right: 2px; } .nav-sign { width: 14px; } }