/* The site's own styles, layered over Pico. Linked last, so it wins.
Prefer Pico's --pico-* custom properties over overriding its rules. */
/* Inter, falling back to Pico's own system stack while it loads or if it
cannot. Optical sizing lets Inter adjust its letterforms for headings. */
:root {
--pico-font-family-sans-serif: InterVariable, system-ui, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
var(--pico-font-family-emoji);
font-optical-sizing: auto;
}
/* Layout
------
Everything sits in one centred column, left-aligned within it. The
measure is 36rem: 720px of text at the 20px Pico uses on a laptop, about
75 characters of Inter per line, at the long end of the comfortable range
for reading — the same column as Ghost's Casper theme. Being in rem, it narrows with Pico's smaller type on smaller
screens, so the line length holds steady rather than the column.
The gutter is at least 1.25rem (20px on a phone in portrait) and grows a
little with the viewport, but the measure never includes it: the text
column is the same width whatever the padding around it.
Pico's .container would instead grow in steps to 1450px, which on a wide
screen is twice as long a line as anyone can comfortably read. */
:root {
--site-measure: 36rem;
--site-gutter: max(4vmin, 1.25rem);
}
body > :is(header, main, footer).container {
max-width: calc(var(--site-measure) + 2 * var(--site-gutter));
padding-inline: var(--site-gutter);
}
/* Nothing breaks out of the column — a deliberate choice, unlike Casper's
wide images. Pico already keeps ![]()
within it (max-width: 100%,
height: auto); this does the same for video and embeds. */
main :is(video, iframe, embed, object) {
max-width: 100%;
}
main video {
height: auto;
}
/* A table is as wide as its longest word, so on a phone one long name
pushes it, and the page, past the edge. Hyphenating (the page is en-GB)
keeps it in the column. Not `overflow-wrap: anywhere`, which does too,
but lets the browser squeeze narrow columns to a few letters a line. Not
on wider screens, where the table fits and hyphens would only be noise. */
@media (max-width: 575px) {
main :is(th, td) {
hyphens: auto;
}
}
/* The footer is centred: the copyright line, and beneath it the privacy
and terms links at a fixed 14px, smaller than the copyright at every
width. */
body > footer {
text-align: center;
}
footer .footer-legal {
font-size: 14px;
}
/* Colour
------
Monochrome: black on white, and white on black. Only Pico's colour
variables are set, so every component it styles follows along.
The selectors are Pico's own, so they match exactly when Pico's do and,
coming later, win. With no data-theme on the OS decides; theme.js
sets data-theme="light" or "dark" when the visitor chooses one. The dark
values appear twice — once for an OS preference, once for a choice —
because CSS cannot make one rule answer to both. Keep the two in step. */
:root:not([data-theme=dark]),
[data-theme=light] {
--pico-background-color: #fff;
--pico-color: #000;
--pico-h1-color: #000;
--pico-h2-color: #000;
--pico-h3-color: #000;
--pico-h4-color: #000;
--pico-h5-color: #000;
--pico-h6-color: #000;
--pico-muted-color: #595959;
--pico-muted-border-color: #e6e6e6;
--pico-text-selection-color: rgba(0, 0, 0, 0.15);
--pico-primary: #000;
--pico-primary-background: #000;
--pico-primary-underline: rgba(0, 0, 0, 0.35);
--pico-primary-hover: #404040;
--pico-primary-hover-background: #333;
--pico-primary-focus: rgba(0, 0, 0, 0.25);
--pico-primary-inverse: #fff;
--pico-form-element-background-color: #fff;
--pico-form-element-border-color: #bfbfbf;
--pico-card-background-color: #fff;
--pico-card-sectioning-background-color: #fafafa;
--pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #e6e6e6;
--pico-dropdown-hover-background-color: #f2f2f2;
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--pico-background-color: #000;
--pico-color: #fff;
--pico-h1-color: #fff;
--pico-h2-color: #fff;
--pico-h3-color: #fff;
--pico-h4-color: #fff;
--pico-h5-color: #fff;
--pico-h6-color: #fff;
--pico-muted-color: #a6a6a6;
--pico-muted-border-color: #1f1f1f;
--pico-text-selection-color: rgba(255, 255, 255, 0.25);
--pico-primary: #fff;
--pico-primary-background: #fff;
--pico-primary-underline: rgba(255, 255, 255, 0.4);
--pico-primary-hover: #bfbfbf;
--pico-primary-hover-background: #ccc;
--pico-primary-focus: rgba(255, 255, 255, 0.3);
--pico-primary-inverse: #000;
--pico-form-element-background-color: #000;
--pico-form-element-border-color: #4d4d4d;
--pico-card-background-color: #000;
--pico-card-sectioning-background-color: #0d0d0d;
--pico-dropdown-background-color: #000;
--pico-dropdown-border-color: #333;
--pico-dropdown-hover-background-color: #1a1a1a;
}
}
[data-theme=dark] {
--pico-background-color: #000;
--pico-color: #fff;
--pico-h1-color: #fff;
--pico-h2-color: #fff;
--pico-h3-color: #fff;
--pico-h4-color: #fff;
--pico-h5-color: #fff;
--pico-h6-color: #fff;
--pico-muted-color: #a6a6a6;
--pico-muted-border-color: #1f1f1f;
--pico-text-selection-color: rgba(255, 255, 255, 0.25);
--pico-primary: #fff;
--pico-primary-background: #fff;
--pico-primary-underline: rgba(255, 255, 255, 0.4);
--pico-primary-hover: #bfbfbf;
--pico-primary-hover-background: #ccc;
--pico-primary-focus: rgba(255, 255, 255, 0.3);
--pico-primary-inverse: #000;
--pico-form-element-background-color: #000;
--pico-form-element-border-color: #4d4d4d;
--pico-card-background-color: #000;
--pico-card-sectioning-background-color: #0d0d0d;
--pico-dropdown-background-color: #000;
--pico-dropdown-border-color: #333;
--pico-dropdown-hover-background-color: #1a1a1a;
}
/* Rules between sections. Pico draws them in the muted border colour,
which in monochrome all but disappears, on black especially. They take
the text colour instead, so they follow both themes. The variable itself
is left alone: table borders use it too. They are a little narrower than
the column and centred in it; only the side margins are set, so Pico's
vertical spacing stays. */
hr {
width: 85%;
margin-inline: auto;
border-top-color: var(--pico-color);
}
/* The logo in the nav. It draws in currentColor, so it is exactly the text
colour in either theme. Sized by height alone: its viewBox supplies the
width.
The logo, the menu and the gaps between them must fit in the reading
column on one row. Everything is in rem, so whether they fit does not
depend on the screen width — it is the same sum everywhere. With Pico's
default 0.5rem spacing it came to about 38.5rem against a 36rem column;
a 1rem logo and 0.375rem spacing bring it to about 35rem. Adding a menu
item means checking that sum again. */
.site-logo {
display: block;
height: 1rem;
width: auto;
fill: currentColor;
}
header nav {
--pico-nav-element-spacing-horizontal: 0.375rem;
}
/* A two-word link, or the Menu button's label and arrow, breaking onto two
lines is never what is wanted. */
header nav :is(a, summary) {
white-space: nowrap;
}
/* The narrowest phones (320px) cannot fit the logo, the Menu button and the
theme switch at full size. */
@media (max-width: 359.98px) {
.site-logo {
height: 0.875rem;
}
}
/* The home page's hero: the full logo, tagline and all, across the reading
column. It is the page's , so it keeps the heading's place in the
outline; currentColor makes it follow the theme like the nav logo.
On phones the tagline would be 5-6px tall, so below Pico's 576px
breakpoint the hero drops it and shows the logo alone. Both drawings are
hidden from screen readers; the heading's hidden text, tagline included,
is what they read at every width. */
.hero {
margin-block: calc(var(--pico-spacing) * 2) calc(var(--pico-spacing) * 3);
}
.hero-logo {
display: block;
width: 100%;
height: auto;
fill: currentColor;
}
.hero-logo-short {
display: none;
}
@media (max-width: 575.98px) {
.hero-logo-full {
display: none;
}
.hero-logo-short {
display: block;
}
}
/* Read by screen readers, not shown. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* The current page in the nav. In monochrome, Pico's slightly greyer link
is too faint to read as "you are here", so it is underlined too. */
nav a[aria-current=page] {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.35em;
}
/* The theme switcher: an icon button in the nav. It is drawn hidden and
theme.js reveals it, so without script there is no button that does
nothing — the OS setting still applies. */
.theme-switch {
display: inline-flex;
align-items: center;
padding: 0.25rem;
border: none;
background: none;
/* Not var(--pico-color): Pico redefines that on buttons as the inverse
colour, which here would be black on black. */
color: inherit;
box-shadow: none;
}
.theme-switch:is(:hover, :focus) {
background: none;
color: var(--pico-primary-hover);
}
.theme-switch:focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}
.theme-switch svg {
display: none;
}
.theme-switch[data-choice=auto] .theme-icon-auto,
.theme-switch[data-choice=light] .theme-icon-light,
.theme-switch[data-choice=dark] .theme-icon-dark {
display: block;
}
/* The contact form's decoy field. Moved off-screen rather than hidden,
because display: none is what a form-filling bot knows to skip. */
.contact-extra {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Focus moves to the acknowledgement so screen readers announce it; it is
not something to interact with, so it needs no focus ring. */
#contact-sent:focus {
outline: none;
}
/* The nav menu is drawn twice; show the row of links where it fits and the
dropdown where it does not. 768px is Pico's own md breakpoint. */
.nav-narrow {
display: none;
}
@media (max-width: 767.98px) {
.nav-wide {
display: none;
}
.nav-narrow {
display: flex;
}
}