/* Qaroxe — 16px bitmap accent face from wepfont.com (via dafont). Used by
.fc-accent (every *asterisk* span produced by fc_format()) and by
.fc-hero-year-outline (the blue title year in the hero). Drop the file at
assets/fonts/Qaroxe.ttf — the URL below is relative to this stylesheet.
font-display: swap so paint isn't blocked while the .ttf loads. */
@font-face {
font-family: "Qaroxe";
src: url("./fonts/Qaroxe.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* `scroll-behavior` is `auto` until the page has finished loading; the
`.fc-scroll-smooth` class is added by assets/section-nav.js after the load
event. Reason: with smooth set during load, the browser's scroll-restoration
(or a hash-jump like `#hero` left in the URL by section-nav.js's
`history.replaceState`) animates over the user's own scroll input, which
feels like being pulled back up to home if you scroll down quickly. After
load it switches to smooth so anchor-link clicks animate as before. */
html.fc-scroll-smooth {
scroll-behavior: smooth;
}
/* Body must be TRANSPARENT so the global wave-canvas (assets/wave-bg.js,
appended to body with z-index: -1) is visible. In CSS painting order
the root html background paints first → negative-z descendants (our
canvas) paint second → body's own background paints third (covering the
canvas if non-transparent). The paper colour stays on (set in
assets/dist/fc.css) so transparent sections still read as "on paper". */
html body { background-color: transparent; }
/* Hero background: faint dotted grid that drifts diagonally down-right.
Pure CSS — no canvas, no JS. The pseudo-element is oversized by one tile
on the top + left so a translate(tile, tile) lands seamlessly back on the
pattern's original phase, giving a continuous loop. transform animation
so the browser composites it on the GPU instead of repainting every frame.
Cost is independent of viewport size.
Note: this class is applied alongside Tailwind's `absolute inset-0` on the
hero mount, so we don't set our own position — the element already has a
positioned containing block from `absolute`, which is what the ::before
needs. We only own `overflow` and the pseudo-element. */
.fc-hero-dots {
overflow: hidden;
}
.fc-hero-dots::before {
content: "";
position: absolute;
/* Extend one tile past the top + left so a translate(tile, tile) loop
always covers the parent (the trailing edge fills as the leading edge
exits). */
top: -32px;
right: 0;
bottom: 0;
left: -32px;
background-image: radial-gradient(circle, var(--color-ink-faint, #C9C7BF) 2.5px, transparent 2.5px);
background-size: 32px 32px;
/* Constant pixel-space speed (32px / 5s ≈ 6.4 px/s) so motion looks the
same at every viewport width — the animation operates on CSS pixels,
not viewport-relative units. */
animation: fc-hero-dots-drift 5s linear infinite;
will-change: transform;
}
@keyframes fc-hero-dots-drift {
from { transform: translate(0, 0); }
to { transform: translate(32px, 32px); }
}
@media (prefers-reduced-motion: reduce) {
.fc-hero-dots::before { animation: none; }
}
/* ── Shared CTA text underline ──────────────────────────────────────────────
Used by fc_cta_link() and the hero CTA renderer. The link wraps its
visible text in … and lets the trailing
arrow live outside that wrapper, so the underline sizes to the text only
and the arrow trails after a clean gap. Matches the hero hero CTA style. */
.fc-cta-text {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
text-decoration-skip-ink: auto;
}
/* ── Section "show the global wave background through me" marker ────────────
* The dot pattern is no longer painted in CSS — it has been replaced by an
* animated dot-wave canvas (assets/wave-bg.js), a single fixed full-viewport
*