* {
box-sizing: border-box;
}
/* The canvas colour has to be on html, not just body. Until the parser
reaches there is no body background to propagate, so the first
paint of a navigation would be white before turning dark. */
html {
background-color: var(--desk);
}
body {
background-color: var(--desk);
color: var(--ink);
font-family: var(--sans);
margin: 0;
padding: 4vw;
display: flex;
justify-content: center;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page {
background-color: var(--paper);
width: 100%;
max-width: 1024px;
box-shadow:
0 40px 80px rgba(0,0,0,0.8),
0 0 0 1px rgba(255,255,255,0.08);
position: relative;
display: flex;
flex-direction: column;
}
a {
color: inherit;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
}
/* Target trick anchor: the hidden jump target the drawers close to.
Lives here rather than inline because two pages need it. */
.closed-target {
position: absolute;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ── the dashed link, for prose on any page ─────────────────────────
One class, two optional extras, no script:
Jonathan
.dashed-link quiet at rest — the text keeps its colour under a light
grey dashed rule — and the brand red under the pointer.
.new-tab the finished-case cards' diagonal arrow after the word,
drawn by CSS, small and raised, nudging on hover.
data-tip a tooltip above the word, the app's tooltip look:
dark, light text, rounded, in fast. */
.dashed-link {
position: relative;
color: inherit;
/* a text decoration, not a border: it runs under the words and stops
there — the arrow is never underlined */
text-decoration: underline dashed var(--line);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.dashed-link:hover,
.dashed-link:focus-visible { text-decoration-color: var(--accent); }
.dashed-link.new-tab::after {
content: "";
display: inline-block;
width: 9px;
height: 9px;
margin-left: 2px;
vertical-align: 5px;
background: var(--graphite);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transition: transform 170ms ease;
}
.dashed-link.new-tab:hover::after,
.dashed-link.new-tab:focus-visible::after { transform: translate(2px, -2px); }
.dashed-link[data-tip]::before {
content: attr(data-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 6px);
transform: translate(-50%, 0) scale(.95);
transform-origin: bottom center;
padding: 6px 12px;
border-radius: 6px;
background: var(--ink);
color: var(--paper);
font: 500 12.5px/1.3 var(--sans);
font-style: normal;
letter-spacing: 0;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
pointer-events: none;
opacity: 0;
transition: opacity 120ms ease, transform 120ms ease;
z-index: 5;
}
.dashed-link[data-tip]:hover::before,
.dashed-link[data-tip]:focus-visible::before {
opacity: 1;
transform: translate(-50%, 0) scale(1);
/* a short pause before it opens, as the app's tooltip waits; it closes at once */
transition-delay: 200ms;
}
@media (prefers-reduced-motion: reduce) {
.dashed-link.new-tab::after,
.dashed-link[data-tip]::before { transition: none; }
}