/* pico-theme.css — thepico.in's design layer, aligned to the hkborah.com contract. * * Generated. Safe to re-apply after a rebuild: re-run the generator and reload * this one file. Nothing here mutates assets/styles-BkY_AgdN.css. * * Loaded LAST in , so these equal-specificity rules win, and being * unlayered they also beat anything Tailwind emitted inside @layer utilities. * * Three things this file exists to fix, none of which the token layer alone * could touch: * 1. the four Google-Fonts weights, replaced by self-hosted subsets * 2. eight declarations that hardcode Inter / Space Grotesk / ui-monospace * instead of reading the token, so changing the token changed nothing * 3. the accent, which is one value where hkborah now needs two roles */ /* 1. Self-hosted, subsetted faces. The character set is the union of this site * and hkborah.com, so a copy edit on either cannot silently fall back to a * system font. hkborah's own subsets lack 24 characters this site uses. */ @font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/public-sans-400.woff2') format('woff2');unicode-range:U+20-7e, U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+2191, U+2193, U+221e, U+25aa, U+25ad-25af, U+25b3, U+25b6, U+25b8, U+25cf, U+2691, U+26a0, U+2713, U+2715} @font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/public-sans-500.woff2') format('woff2');unicode-range:U+20-7e, U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+2191, U+2193, U+221e, U+25aa, U+25ad-25af, U+25b3, U+25b6, U+25b8, U+25cf, U+2691, U+26a0, U+2713, U+2715} @font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/public-sans-600.woff2') format('woff2');unicode-range:U+20-7e, U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+2191, U+2193, U+221e, U+25aa, U+25ad-25af, U+25b3, U+25b6, U+25b8, U+25cf, U+2691, U+26a0, U+2713, U+2715} @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/archivo-500.woff2') format('woff2');unicode-range:U+20-7e, U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+2191, U+2193, U+221e, U+25aa, U+25ad-25af, U+25b3, U+25b6, U+25b8, U+25cf, U+2691, U+26a0, U+2713, U+2715} @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/archivo-600.woff2') format('woff2');unicode-range:U+20-7e, U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+2191, U+2193, U+221e, U+25aa, U+25ad-25af, U+25b3, U+25b6, U+25b8, U+25cf, U+2691, U+26a0, U+2713, U+2715} @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/archivo-700.woff2') format('woff2');unicode-range:U+20-7e, U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+2191, U+2193, U+221e, U+25aa, U+25ad-25af, U+25b3, U+25b6, U+25b8, U+25cf, U+2691, U+26a0, U+2713, U+2715} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');unicode-range:U+20-7e, U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+2191, U+2193, U+221e, U+25aa, U+25ad-25af, U+25b3, U+25b6, U+25b8, U+25cf, U+2691, U+26a0, U+2713, U+2715} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2');unicode-range:U+20-7e, U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+2191, U+2193, U+221e, U+25aa, U+25ad-25af, U+25b3, U+25b6, U+25b8, U+25cf, U+2691, U+26a0, U+2713, U+2715} /* 2. The contract: one hue in two roles, hkborah's type stack, its primitives. * Surfaces, hairlines and motion already matched and are left alone. */ :root { --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Archivo', 'Public Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; /* As text or a mark on the dark surfaces it must clear 4.5:1 against the lightest surface it lands on; as a fill under white text it must clear 4.5:1 the other way. The single original value managed neither. */ --accent: oklch(65.5% 0.163 21.5); --accent-deep: oklch(57% 0.195 21.5); --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent); --accent-line: color-mix(in oklab, var(--accent) 55%, transparent); /* Fills carry white text; rings and error states are the lighter role. */ --primary: var(--accent-deep); --ring: var(--accent); --destructive: var(--accent); --chart-1: var(--accent); --sidebar-primary: var(--accent-deep); --sidebar-ring: var(--accent); /* Named status roles, so failing and succeeding states stop borrowing the accent by hand. One hue, so the names point at the colours that exist. */ --status-error: var(--accent); --status-ok: var(--foreground); /* Secondary tone, matched to hkborah's --titanium-dim (was oklch(75%)). */ --titanium-dim: oklch(60% 0 0); --muted-foreground: oklch(60% 0 0); /* Spacing scale: 4px base, which names the 12px and 20px middle steps. */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --measure: 64ch; /* Native widgets follow the theme instead of the platform's light default. */ color-scheme: dark; } /* 3. Declarations that hardcoded a family instead of reading the token. */ :root,:host{font-family:var(--font-sans)} code,kbd,samp,pre{font-family:var(--font-mono)} .mono-label{font-family:var(--font-mono)} .font-display{font-family:var(--font-display)} .note-prose code{font-family:var(--font-mono)} /* 4. Legibility floor. hkborah's smallest text is 11px; these nine rules sat * between 6.4px and 10.9px. Nothing below 11px may render. */ .mono-label{font-size:.6875rem} .note-prose th,.text-\[0\.45rem\],.text-\[0\.4rem\],.text-\[0\.55rem\],.text-\[0\.5rem\],.text-\[0\.62rem\],.text-\[0\.65rem\],.text-\[0\.6rem\]{font-size:.6875rem} /* 5. The old accent literal, now driven by the role token — the SVG fills and * strokes, the marker and underline colours, and the quote rule. */ .fill-\[oklch\(0\.601_0\.201_21\.5\)\]{fill:var(--accent)} .stroke-\[oklch\(0\.601_0\.201_21\.5\)\]{stroke:var(--accent)} .accent-\[oklch\(0\.601_0\.201_21\.5\)\]{accent-color:var(--accent)} .note-prose a{-webkit-text-decoration:underline var(--accent);text-decoration:underline var(--accent)} .note-prose a:hover{color:var(--accent)} .note-prose ul>li::marker{color:var(--accent)} .note-prose blockquote{border-left:2px solid var(--accent)} /* 6. --primary is shadcn's *fill* token: the background of a solid button. * The markup also reaches for text-primary, stroke-primary and border-primary, * where the deep fill colour only manages 3.8:1 on --panel. hkborah separates * the two roles, so here the role is decided per utility: text and marks take * the lighter token, backgrounds keep the deep one. The token is substituted * inside the original value so a colour-mix opacity survives intact. */ .border-primary{border-color:var(--accent)} .border-primary\/30{border-color:var(--accent)} .border-primary\/30{border-color:color-mix(in oklab, var(--accent) 30%, transparent)} .border-primary\/40{border-color:var(--accent)} .border-primary\/40{border-color:color-mix(in oklab, var(--accent) 40%, transparent)} .border-primary\/50{border-color:var(--accent)} .border-primary\/50{border-color:color-mix(in oklab, var(--accent) 50%, transparent)} .fill-primary{fill:var(--accent)} .stroke-primary{stroke:var(--accent)} .text-primary{color:var(--accent)} .text-primary\/40{color:var(--accent)} .text-primary\/40{color:color-mix(in oklab, var(--accent) 40%, transparent)} .outline-primary{outline-color:var(--accent)} .group-hover\:text-primary:is(:where(.group):hover *){color:var(--accent)} .hover\:border-primary:hover{border-color:var(--accent)} .hover\:text-primary:hover{color:var(--accent)} .focus\:border-primary:focus{border-color:var(--accent)} .focus-visible\:outline-primary:focus-visible{outline-color:var(--accent)} .xl\:border-primary{border-color:var(--accent)} .node-hover:hover{stroke:var(--accent)} /* 7. Exhibit captions are justified, as hkborah's are * (`.exhibit__caption { text-align: justify; hyphens: auto }` there). Without * hyphens a justified line can open rivers, so the two travel together. */ figure figcaption { text-align: justify; hyphens: auto; } /* 8. Headline above exhibit 01. React owns the DOM order of the hero block, and * it re-renders from the route chunk, so a markup reorder is reverted on * hydration. CSS order is not React's to overwrite, so the reorder lives * here: the credential strip, then the headline, then the exhibit. */ /* Scoped with :has(> h1) to the hero block. Unscoped, the order values below also hit any other .reveal.space-y-10 block -- and a sibling left at the default order 0 then sorts ahead of a first child pinned to order 1, which silently flipped the VEGA head above its own content. */ .reveal.space-y-10:has(> h1) { display: flex; flex-direction: column; } .reveal.space-y-10:has(> h1) > .scroll-mt-24 { order: 3; } /* h1 and h2 share an order on purpose: equal order falls back to DOM order, so the h2 lands directly under the h1. Left unset it would default to 0 and sort above everything, since the other children are 1, 2 and 3. */ .reveal.space-y-10:has(> h1) > h1, .reveal.space-y-10:has(> h1) > h2 { order: 2; } .reveal.space-y-10:has(> h1) > :first-child { order: 1; } /* 9. Section heads, matched to hkborah's .section-head / .section-head--center: * a block constrained to 48rem, centred, with the lead centred beneath it. * thepico's section H2s were left-aligned and mostly full container width * (1200px), where hkborah's are centred at 768px. * * Two deliberate exclusions: * - the manifesto article keeps its left alignment; it carries a 2px left * accent border, so centring it would fight its own design. * - the footer column headings are h2s too, but they live in