96b87b3e81
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously an unversioned directory inside ~/src/blockninja-themes/scifi-clean. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
120 lines
3.6 KiB
Go
120 lines
3.6 KiB
Go
package main
|
|
|
|
// scifiCleanInputCSS is appended to the host Tailwind input.css via CSSManifest.
|
|
//
|
|
// Contents:
|
|
// 1. CSS-variable fallback stacks for --font-heading / --font-body / --font-mono.
|
|
// Per docs/FONTS.md (wave-1 policy), the theme bundles no fonts and consumes
|
|
// fonts exclusively via these variables. The fallback stacks intentionally
|
|
// already approximate Sci-Fi Clean's aesthetic so the theme looks right
|
|
// before the admin picks any Google Fonts.
|
|
// 2. .hairline utility — exactly border: 1px solid hsl(var(--border)).
|
|
// UAT §13.5 mandates 1px width; do not raise.
|
|
// 3. .bg-grid utility — translucent blueprint grid as a CSS gradient.
|
|
// Uses currentColor + opacity to track --foreground.
|
|
// 4. .tabular-nums / .mono-numerals helpers — UAT §13.7 wants
|
|
// font-variant-numeric: tabular-nums on every mission_stat value.
|
|
// 5. .scrim utility — required scrim layer for full-bleed hero text (UAT §6).
|
|
//
|
|
// The literal substrings 'Space Grotesk', 'JetBrains Mono', '.hairline', '.bg-grid'
|
|
// must appear here verbatim (UAT §13.4).
|
|
const scifiCleanInputCSS = `
|
|
/* === Sci-Fi Clean: font-family fallback variables ===
|
|
* The site admin assigns real fonts via the typography settings; until then,
|
|
* the variables fall through to the stacks below. 'Space Grotesk', 'Inter',
|
|
* and 'JetBrains Mono' are spec §5 recommendations, available in the Google
|
|
* Fonts picker.
|
|
*/
|
|
:root {
|
|
--font-heading: "Space Grotesk", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
--font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
/* === Sci-Fi Clean: utilities ===
|
|
* Hairline rules and a translucent blueprint grid are the two utility classes
|
|
* the theme uses heavily. Tailwind's defaults cover everything else.
|
|
*/
|
|
.hairline {
|
|
border: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.hairline-t {
|
|
border-top: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.hairline-b {
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.bg-grid {
|
|
background-color: hsl(var(--background));
|
|
background-image:
|
|
linear-gradient(to right, hsl(var(--border) / 0.6) 1px, transparent 1px),
|
|
linear-gradient(to bottom, hsl(var(--border) / 0.6) 1px, transparent 1px);
|
|
background-size: 32px 32px;
|
|
}
|
|
|
|
.mono-numerals {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.tabular-nums {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.scrim {
|
|
position: relative;
|
|
}
|
|
|
|
.scrim::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-color: hsl(var(--background) / 0.65);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.scrim > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* === Sci-Fi Clean: focus rings ===
|
|
* Use the --ring token (a precise technical blue) for all focus states so
|
|
* the keyboard cursor is visible against either preset.
|
|
*/
|
|
.scifi-focus:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* === Sci-Fi Clean: chevron ===
|
|
* Right-arrow chevron used in ScifiButtonBlock; encoded as Unicode so it
|
|
* never breaks across renderers (UAT §13.14).
|
|
*/
|
|
.scifi-chevron::after {
|
|
content: " \2192";
|
|
font-family: var(--font-mono);
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* === Sci-Fi Clean: heading family ===
|
|
* The host shadcn layer doesn't apply --font-heading by default; wire it
|
|
* up here for the four heading levels we render.
|
|
*/
|
|
.scifi-h1, .scifi-h2, .scifi-h3, .scifi-h4 {
|
|
font-family: var(--font-heading);
|
|
font-feature-settings: "ss01" on;
|
|
}
|
|
|
|
.scifi-body {
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.scifi-mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
`
|