/* lastping.dev components. Loaded on every page after tokens.css; it uses
the tokens there and carries no colour of its own (no raw hex, rgb, hsl
or named colour). It is the only component sheet: there is no other
stylesheet underneath it.
TWO SCOPES.
1. The reset, nav, menus, drawer, footer, skip link and the theme
utilities are NOT scoped; they set every property they rely on.
2. Everything else is scoped under body.v2.
LAYOUT CONTRACT for page bodies:
COMPONENT
.hero and .cta-band are sections themselves (they carry their own
padding) and hold an .lp-wrap.
CONTRAST RULES (measured):
- Body and secondary text is --fg or --fg-muted, never --fg-subtle.
--fg-subtle is held to --bg in the console and falls under 4.5:1 on
--bg-panel in light, so it is used here only for non-text marks
(breadcrumb separators).
- --border and --border-strong are hairlines (decoration). A boundary that
is the only sign of a control uses --border-control.
MOTION: transitions and keyframes live only in the
prefers-reduced-motion: no-preference block at the end. No scroll reveal.
One exception: the home hero's heartbeat board (.hb) runs by default and
its own reduce block stops it on a still frame. */
/* Reset (unscoped) */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
/* break-word, not anywhere: anywhere collapses a chip's min-content width
inside flex and grid and splits a token mid-word with room to spare. */
code { overflow-wrap: break-word; }
/* Brand motion: the line writes LP, a beat runs along it, the last ping
lights and sends one ring. It plays once on load on marks generated with
`animate` (.lp-anim; the home nav), only without reduced motion (the
keyframes are in the motion block at the end); otherwise the still mark. */
.lp-anim .lp-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.lp-anim .lp-beat { stroke-dasharray: .12 1; stroke-dashoffset: 1.12; opacity: 0; }
/* Shared container and utilities (unscoped) */
.lp-wrap {
width: min(1200px, 100% - 48px);
margin-inline: auto;
}
@media (max-width: 479px) {
.lp-wrap { width: calc(100% - 32px); }
}
/* Show one of a pair (a light and a dark screenshot, the toggle's two
icons) by the active theme. Use on img, picture, span or svg. */
.lp-dark-only { display: none !important; }
[data-theme="dark"] .lp-light-only { display: none !important; }
[data-theme="dark"] .lp-dark-only { display: revert !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .lp-light-only { display: none !important; }
:root:not([data-theme]) .lp-dark-only { display: revert !important; }
}
.lp-sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lp-skip {
position: absolute;
left: 16px;
top: -100px;
z-index: 100;
padding: 13px 16px;
border-radius: 8px;
background: var(--accent);
color: var(--accent-fg);
font: 600 15px/1.2 var(--font-sans);
text-decoration: none;
}
.lp-skip:focus { top: 12px; }
/* One focus ring for every interactive element in the shared chrome. */
.lp-skip:focus-visible,
.lp-nav :focus-visible,
.lp-drawer :focus-visible,
.lp-footer :focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Nav (unscoped) */
/*