/* =====================================================================
* MIBERA CODEX — global stylesheet
* Parchment + ink. Imperial for headings. Switzer for body.
* Loaded by vocs via link injection (see vocs.config.ts).
* ===================================================================== */
/* ---------- Fonts ---------------------------------------------------- */
@font-face {
font-family: "Imperial BT";
src: url("/fonts/ImperialBTRoman.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Switzer";
src: url("/fonts/Switzer.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Clash Display";
src: url("/fonts/ClashDisplay.ttf") format("truetype");
font-weight: 200 700;
font-style: normal;
font-display: swap;
}
/* ---------- Tokens (Nier / Mibera mode) ------------------------------ */
:root {
/* Palette */
--nier-bg-primary: oklch(0.838 0.026 75.2);
--nier-bg-panel: oklch(0.788 0.026 75.2);
--nier-bg-panel-dark: oklch(0.737 0.026 75.2);
--nier-text-primary: oklch(0.203 0.01 67.2);
--nier-text-secondary: oklch(0.336 0.009 67.5);
--nier-text-muted: oklch(0.456 0.008 67.6);
--nier-border-dark: oklch(0.272 0.009 67.4);
--nier-border-medium: oklch(0.397 0.009 67.6);
--nier-border-light: oklch(0.518 0.016 53.1);
/* MiDi rule tokens — ink at low opacity, the way mibera-dimensions
* draws hairlines. Three registers:
* - subtle (6%): whisper, between-rows in lists, logo divider
* - soft (10%): structural separation that stacks (shelves, frames)
* - medium (20%): the MiDi canonical — `border-nier-text/20` per
* mibera-dimensions/grimoires/taste.md. Use for any
* rule a reader expects to register as a line. */
--nier-rule-subtle: color-mix(in oklch, var(--nier-text-primary) 6%, transparent);
--nier-rule-soft: color-mix(in oklch, var(--nier-text-primary) 10%, transparent);
--nier-rule-medium: color-mix(in oklch, var(--nier-text-primary) 20%, transparent);
--nier-accent: oklch(0.203 0.01 67.2);
--nier-header-bg: oklch(0.203 0.01 67.2);
--nier-header-text: oklch(0.838 0.026 75.2);
/* Motion — artisan pack physics */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
--ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
--spring-gentle: cubic-bezier(0.34, 1.56, 0.64, 1);
--spring-snappy: cubic-bezier(0.22, 0.61, 0.36, 1);
--spring-bouncy: cubic-bezier(0.68, -0.55, 0.27, 1.55);
--duration-instant: 100ms;
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
--duration-slower: 600ms;
}
/* ---------- Vocs override layer -------------------------------------- *
* Vocs's vanilla-extract theme writes tokens to :root and :root.dark.
* Our /global.css is rendered BEFORE the vite bundle in ,
* so source order would lose. We use `html:root` (specificity 0,0,2 vs
* vocs's 0,0,1) to win cleanly — no !important, no layer juggling.
* Both light and dark scopes are pinned to parchment; Mibera mode
* is the only mode and any toggle still reads correctly.
* ===================================================================== */
html:root,
html:root.dark {
/* Backgrounds */
--vocs-color_background: var(--nier-bg-primary);
--vocs-color_background2: var(--nier-bg-panel);
--vocs-color_background3: var(--nier-bg-panel);
--vocs-color_background4: var(--nier-bg-panel-dark);
--vocs-color_background5: var(--nier-bg-panel-dark);
--vocs-color_backgroundDark: var(--nier-bg-panel);
--vocs-color_backgroundDarkTint: var(--nier-bg-panel-dark);
--vocs-color_backgroundAccent: var(--nier-text-primary);
--vocs-color_backgroundAccentHover:var(--nier-text-secondary);
--vocs-color_backgroundAccentText: var(--nier-bg-primary);
/* Borders */
--vocs-color_border: var(--nier-border-medium);
--vocs-color_border2: var(--nier-border-medium);
--vocs-color_borderAccent: var(--nier-border-dark);
/* Text */
--vocs-color_text: var(--nier-text-primary);
--vocs-color_text2: var(--nier-text-secondary);
--vocs-color_text3: var(--nier-text-muted);
--vocs-color_text4: var(--nier-text-muted);
--vocs-color_textHover: var(--nier-text-primary);
--vocs-color_textAccent: var(--nier-text-primary);
--vocs-color_textAccentHover: var(--nier-text-secondary);
--vocs-color_heading: var(--nier-text-primary);
--vocs-color_title: var(--nier-text-primary);
/* Code blocks read as a deeper page panel rather than dark chrome */
--vocs-color_codeCharacterHighlightBackground: var(--nier-bg-panel-dark);
--vocs-color_codeCharacterHighlightBorder: var(--nier-border-medium);
--vocs-color_codeHighlightBackground: var(--nier-bg-panel-dark);
--vocs-color_codeHighlightBorder: var(--nier-border-medium);
}
/* ---------- Typography ---------------------------------------------- */
:root {
--font-imperial: "Imperial BT", "Iowan Old Style", "Palatino", Georgia, serif;
--font-switzer: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-clash: "Clash Display", "Switzer", system-ui, sans-serif;
}
html,
body {
font-family: var(--font-switzer);
font-feature-settings: "ss01", "ss02", "cv01", "cv11";
background: var(--nier-bg-primary);
color: var(--nier-text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* No body wallpaper — the brand mark in the sidebar carries the
* books-row mark; bleeding it into the page bottom was distracting
* behind the outline rail. */
/* Imperial for HEADINGS ONLY — body stays Switzer for sustained reading. */
h1, h2, h3, h4, h5, h6,
.vocs_H1, .vocs_H2, .vocs_H3, .vocs_H4, .vocs_H5, .vocs_H6 {
font-family: var(--font-imperial);
font-weight: 400;
letter-spacing: -0.005em;
color: var(--nier-text-primary);
}
h1, .vocs_H1 { letter-spacing: -0.015em; }
/* Code stays mono — vocs ships its own; we only color it. */
code, pre, .vocs_Code, .vocs_CodeBlock {
color: var(--nier-text-primary);
}
/* Links: ink, not blue. Underlined on hover only — Imperial typeface +
reading flow already mark them. */
a, .vocs_Link {
color: var(--nier-text-primary);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--duration-fast) var(--spring-snappy);
}
a:hover, .vocs_Link:hover {
color: var(--nier-text-primary);
border-bottom-color: var(--nier-border-medium);
}
/* ---------- Top nav (chrome) ---------------------------------------- *
* Same panel-dim as the sidebar — together they frame the content
* area. The hairline below the bar separates chrome from content
* without needing color contrast to do the work.
* ===================================================================== */
[class*="vocs_TopNav"] {
background: var(--nier-bg-panel);
color: var(--nier-text-primary);
border-bottom: 1px solid var(--nier-rule-medium);
}
[class*="vocs_TopNav"] a,
[class*="vocs_TopNav"] button,
[class*="vocs_TopNav"] [role="button"] {
color: var(--nier-text-primary);
}
[class*="vocs_TopNav"] a:hover {
color: var(--nier-text-primary);
opacity: 0.7;
border-bottom-color: transparent;
}
/* Make the title (Imperial) breathe in the bar */
[class*="vocs_TopNav"] [class*="title"],
[class*="vocs_Logo"] {
font-family: var(--font-imperial);
letter-spacing: -0.005em;
}
/* ---------- Sidebar -------------------------------------------------- *
* No hard right rule — that 1px border read as a shadow. The page
* separates from the chrome via the wallpaper gradient + spacing alone.
* ===================================================================== */
[class*="vocs_Sidebar"] {
background: var(--nier-bg-panel);
border-right: none;
box-shadow: none;
}
/* Sidebar links don't use the global hover underline — the brand mark,
* sidebar items, and footer socials each have their own affordances
* (icon slide, padding shift, ribbon notch). Defense-in-depth: kill
* border-bottom AND text-decoration on every link inside the sidebar
* AND the Socials button (which lives in the footer with class
* .vocs_Socials_button — NOT a vocs_Sidebar_* class itself). */
[class*="vocs_Sidebar"] a,
[class*="vocs_Sidebar"] a:hover,
.vocs_Socials_button,
.vocs_Socials_button:hover {
border-bottom: none !important;
text-decoration: none !important;
}
/* Chrome (sidebar + left gutter + footer) sits at panel shade — a
* subtle dim that frames the content reading area in primary.
* Together: dimmer chrome wraps lighter content. */
.vocs_DocsLayout_gutterLeft {
background-color: var(--nier-bg-panel) !important;
}
.vocs_Sidebar_footer {
background-color: var(--nier-bg-panel) !important;
}
.vocs_Sidebar_footerCurtain {
background: linear-gradient(transparent, var(--nier-bg-panel) 80%) !important;
}
/* Section titles: Imperial uppercase, tracked, with a closing hairline
* rule underneath. No ornament — the type weight + tracking + rule do
* the chapter-break work. The `html` prefix bumps specificity to
* (0,0,1,1) so we beat vocs's layered @layer base rule. */
html .vocs_Sidebar_sectionTitle {
font-family: var(--font-imperial) !important;
font-size: 0.85rem !important;
font-weight: 400 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--nier-text-primary) !important;
padding: 1.5rem 0 0.65rem 0 !important;
margin-bottom: 0.5rem !important;
border-bottom: 1px solid var(--nier-rule-medium) !important;
}
/* Search button — vocs renders it with class .vocs_DesktopSearch_search
* (the button itself, NOT _searchButton). Mibera register: parchment
* panel, ink text, soft rule, sharp corners. */
.vocs_DesktopSearch_search,
.vocs_MobileSearch_searchButton,
[class*="vocs_DesktopSearch_search"]:not([class*="vocs_DesktopSearch_searchCommand"]),
button[class*="searchButton"] {
background: var(--nier-bg-panel) !important;
color: var(--nier-text-secondary) !important;
border: 1px solid var(--nier-rule-soft) !important;
border-radius: 0 !important;
font-family: var(--font-switzer) !important;
box-shadow: none !important;
transition: border-color var(--duration-fast) var(--spring-snappy),
color var(--duration-fast) var(--spring-snappy);
}
.vocs_DesktopSearch_search:hover,
.vocs_MobileSearch_searchButton:hover {
border-color: var(--nier-rule-medium) !important;
color: var(--nier-text-primary) !important;
background: var(--nier-bg-panel) !important;
}
.vocs_DesktopSearch_searchCommand,
[class*="vocs_DesktopSearch"] kbd {
background: var(--nier-bg-panel-dark) !important;
color: var(--nier-text-muted) !important;
border: 1px solid var(--nier-rule-subtle) !important;
border-radius: 0 !important;
font-family: var(--font-switzer) !important;
}
/* Group spacing: each section is a distinct entry in the codex's TOC.
* Suppress vocs's default 1px between-section border — typographic
* hierarchy + generous breath does the work. */
.vocs_Sidebar_navigation > .vocs_Sidebar_group > .vocs_Sidebar_section + .vocs_Sidebar_section {
border-top: none !important;
margin-top: 0.65rem;
}
/* Sidebar gets horizontal padding; the active-notch lives in the gutter
* between the sidebar's left edge and the row text — like a marginalia
* mark in a printed grimoire. */
.vocs_Sidebar_navigation {
padding: 0.5rem 0.75rem 1rem 1rem !important;
}
.vocs_Sidebar_items {
padding: 0 !important;
}
.vocs_Sidebar {
padding: 0 !important;
}
/* Items: switzer body, full ink, comfortable rhythm. Hover slides the
* row right by 0.4rem; active gets an ink notch in the marginalia
* gutter — matches the outline rail so the two rails read as peers.
* `html` prefix for defensive specificity against vocs @layer base. */
html .vocs_Sidebar_item.vocs_Link {
font-family: var(--font-switzer) !important;
font-size: 0.92rem !important;
font-weight: 400 !important;
color: var(--nier-text-primary) !important;
border-bottom: none !important;
padding: 0.32rem 0 !important;
position: relative;
transition: color var(--duration-fast) var(--spring-snappy),
padding-left var(--duration-fast) var(--spring-snappy);
}
html .vocs_Sidebar_item.vocs_Link:hover {
color: var(--nier-text-primary) !important;
background: transparent !important;
padding-left: 0.4rem !important;
}
html .vocs_Sidebar_item.vocs_Link[data-active="true"] {
font-weight: 500 !important;
color: var(--nier-text-primary) !important;
/* faint panel-tint on the active row — like an open page */
background: color-mix(in oklch, var(--nier-text-primary) 4%, transparent) !important;
margin: 0 -0.5rem !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
/* Active-state ribbon: 3px solid mark in the marginalia gutter,
* extending slightly above + below the text baseline. Reads as a
* bookmark or finger-against-the-page, not a typographic notch. */
html .vocs_Sidebar_item.vocs_Link[data-active="true"]::before {
content: "";
position: absolute;
left: -0.5rem;
top: 0;
bottom: 0;
width: 3px;
background: var(--nier-text-primary);
}
/* Vol II's parent row is a