/* ============================================================================
Gloss Theme
Interlinear code — as if translated line-by-line.
Anchored in LokaScript's identity: grammar-aware, multilingual, role-conscious.
Presents code the way a linguistics journal presents a multilingual text —
warm vellum paper, deep ink type, doubled hairline rules, and a restrained
manuscript-pigment palette where colour means semantic role, not decoration.
- Signature motif: interlinear gloss. Code blocks with data-gloss="..."
render a muted target-language line beneath the source, separated by a
dotted hairline — the Leipzig glossing convention in CSS.
- Five manuscript pigments map 1:1 to LokaScript semantic roles:
action → madder red (rubric, the verb)
patient → lapis blue (object of action)
destination → verdigris (where things go)
source → ochre (where things come from)
event → mulberry (the triggering moment)
These pigments are the *only* chroma in the theme — no decorative colour.
============================================================================ */
/* Contrast Audit (WCAG 2.1)
Light mode (vellum):
--color-fg (#1F2330) on --color-bg (#F5F1E8): ~14:1 → AAA ✓
--color-muted (#5B6273) on --color-bg (#F5F1E8): ~5.5:1 → AA ✓
--color-accent (#2F4A7C) on --color-bg (#F5F1E8): ~7.1:1 → AAA ✓
--role-action (#A13A2C) on --color-bg (#F5F1E8): ~5.9:1 → AA ✓
--role-patient (#2F4A7C) on --color-bg (#F5F1E8): ~7.1:1 → AAA ✓
Dark mode (candlelit):
--color-fg (#E8DCC8) on --color-bg (#161925): ~12:1 → AAA ✓
--color-muted (#A59B85) on --color-bg (#161925): ~7:1 → AAA ✓
--color-accent (#8FA8D4) on --color-bg (#161925): ~7.8:1 → AAA ✓
Role pigments lifted 15–20 L* for dark-mode AAA.
Verified: 2026-04-22 */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap");
/* color-scheme on :root only — the theme class is applied to both html and body,
and a body-level color-scheme would break light-dark() inheritance from . */
html.gloss-theme { color-scheme: light dark; }
/* ============================================
Theme Activation
============================================ */
.gloss-theme {
/* Vellum / ink palette */
--color-bg: light-dark(#F5F1E8, #161925);
--color-fg: light-dark(#1F2330, #E8DCC8);
--color-muted: light-dark(#5B6273, #A59B85);
--color-faded: light-dark(#8A8D98, #6F6A5A);
--color-surface: light-dark(#FBF8F1, #1F2332);
--color-surface-hover: light-dark(#F0EBDE, #272B3C);
--color-border: light-dark(#D4CBB8, #2C3142);
--color-rule: light-dark(#C8BEA8, #353B4D);
/* Accent = lapis (also the patient role — links = "the thing being pointed at") */
--color-accent: light-dark(#2F4A7C, #8FA8D4);
--color-accent-hover: light-dark(#1E3460, #B0C2E0);
--color-accent-light: light-dark(#E4EAF4, #252B3F);
/* Semantic-role pigments — the signature colour language of the theme.
Drawn from traditional manuscript inks (madder, lapis, verdigris, ochre,
mulberry). Mapped 1:1 to LokaScript semantic roles. */
--role-action: light-dark(#A13A2C, #D67A6A); /* madder — the verb */
--role-patient: light-dark(#2F4A7C, #8FA8D4); /* lapis — object of action */
--role-destination: light-dark(#3F6B5C, #7FB09A); /* verdigris — where */
--role-source: light-dark(#A8782A, #D6AE6A); /* ochre — from where */
--role-event: light-dark(#6B3A5C, #B880A0); /* mulberry — the moment */
/* Code colours */
--code-bg: light-dark(#FBF8F1, #1F2332);
--code-fg: light-dark(#1F2330, #E8DCC8);
--code-border: light-dark(#D4CBB8, #2C3142);
--code-gloss-fg: light-dark(#7A7367, #897E6A);
/* Typography
Source Serif 4 — body + display (variable, optical-sized). Chosen for its
Latin + Cyrillic + Greek + Vietnamese coverage — it can render LokaScript's
24 languages side-by-side without falling back.
Instrument Sans — chrome (nav, buttons, chips, badges). Editorial character
without being another Inter clone.
JetBrains Mono — code, wide Unicode, ligatures off. */
--font-display: "Source Serif 4", "Source Serif Pro", "Noto Serif", Georgia, serif;
--font-body: "Source Serif 4", "Source Serif Pro", "Noto Serif", Georgia, serif;
--font-ui: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: "JetBrains Mono", "IBM Plex Mono", "Source Code Pro", monospace;
/* Editorial rhythm — wider than Clarity, ranged text */
--text-base: 1.0625rem;
--gloss-leading: 1.75;
--density: 1;
/* Component tokens */
--nav-bg: var(--color-bg);
--nav-border: var(--color-rule);
--card-bg: var(--color-surface);
--card-border: var(--color-border);
--card-radius: 2px;
--btn-bg: transparent;
--btn-fg: var(--color-fg);
--btn-radius: 2px;
--input-bg: var(--color-surface);
--input-border: var(--color-border);
--input-focus-ring: var(--color-accent-light);
/* Override missing.css font variables */
--main-font: var(--font-body);
--secondary-font: var(--font-ui);
--heading-font: var(--font-display);
--mono-font: var(--font-mono);
/* Align navbar inner container with .container width */
--nav-max: 64rem;
/* Base */
background-color: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--gloss-leading);
font-optical-sizing: auto;
font-feature-settings: "kern", "liga", "onum";
transition: var(--theme-transition);
}
/* OKLCH progressive enhancement — warm, low-chroma tuning */
@supports (color: oklch(0% 0 0)) {
.gloss-theme {
--color-bg: light-dark(oklch(95% 0.015 85), oklch(18% 0.015 265));
--color-fg: light-dark(oklch(23% 0.02 260), oklch(90% 0.015 85));
--color-surface: light-dark(oklch(98% 0.012 85), oklch(22% 0.015 265));
--color-border: light-dark(oklch(82% 0.02 85), oklch(28% 0.015 265));
--color-rule: light-dark(oklch(78% 0.02 85), oklch(32% 0.015 265));
--color-accent: light-dark(oklch(38% 0.08 260), oklch(72% 0.08 260));
}
}
/* ============================================
Paper grain overlay (light mode only)
Dark mode uses flat ink — grain reads as noise on dark.
============================================ */
html.gloss-theme body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
/* z-index: -1 puts the overlay behind content without touching any body
child's z-index. Earlier `body > * { z-index: 1 }` clobbered navbar's
sticky z-index: 1000 and broke mobile drawer clicks past the first item. */
z-index: -1;
opacity: 0.035;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
html.-dark-mode.gloss-theme body::before,
html.gloss-theme.-dark-mode body::before {
display: none;
}
@media (prefers-reduced-motion: reduce) {
html.gloss-theme body::before { display: none; }
}
/* ============================================
Layout
============================================ */
.gloss-theme .container {
max-inline-size: 64rem;
margin-inline: auto;
padding-inline: var(--space-6, 1.5rem);
}
@media (max-width: 768px) {
.gloss-theme .container {
padding-inline: var(--space-4, 1rem);
}
}
/* ============================================
Typography
============================================ */
.gloss-theme h1,
.gloss-theme h2,
.gloss-theme h3,
.gloss-theme h4,
.gloss-theme h5,
.gloss-theme h6 {
font-family: var(--font-display);
color: var(--color-fg);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
}
.gloss-theme h1 {
font-size: 2.75rem;
font-weight: 700;
margin-block: calc(var(--space-8, 2rem) * var(--density)) var(--space-5, 1.25rem);
letter-spacing: -0.02em;
}
.gloss-theme h2 {
font-size: 1.875rem;
margin-block: var(--space-8, 2rem) var(--space-3, 0.75rem);
/* Doubled hairline — scholarly chapter-break motif */
padding-block-start: var(--space-4, 1rem);
border-block-start: 1px solid var(--color-rule);
box-shadow: 0 -3px 0 -2px var(--color-rule);
}
.gloss-theme h3 {
font-size: 1.375rem;
margin-block: var(--space-6, 1.5rem) var(--space-3, 0.75rem);
}
.gloss-theme h4 {
font-family: var(--font-ui);
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-muted);
}
.gloss-theme p {
line-height: var(--gloss-leading);
margin-block: var(--space-4, 1rem);
max-inline-size: 68ch;
}
.gloss-theme em,
.gloss-theme i {
font-style: italic;
font-family: var(--font-display);
}
.gloss-theme strong,
.gloss-theme b {
font-weight: 600;
}
/* Drop-cap for first paragraph of hero (opt-in via .lede class) */
.gloss-theme .lede::first-letter {
font-family: var(--font-display);
font-size: 3.5em;
font-weight: 700;
float: inline-start;
line-height: 0.85;
margin-inline-end: 0.08em;
margin-block-start: 0.1em;
color: var(--role-action);
}
/* ============================================
Links — hairline underline in lapis
============================================ */
.gloss-theme a {
color: var(--color-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-thickness 0.12s ease;
}
.gloss-theme a:hover {
color: var(--color-accent-hover);
text-decoration-thickness: 2px;
}
.gloss-theme a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
text-decoration: none;
background: var(--color-accent-light);
}
/* ============================================
Blockquotes — scholarly, left rule, italic
============================================ */
.gloss-theme blockquote {
margin: var(--space-6, 1.5rem) 0;
padding: var(--space-2, 0.5rem) var(--space-6, 1.5rem);
border-inline-start: 1px solid var(--color-rule);
font-style: italic;
color: var(--color-muted);
font-size: 1.05em;
}
.gloss-theme blockquote cite {
display: block;
margin-block-start: var(--space-3, 0.75rem);
font-family: var(--font-ui);
font-style: normal;
font-size: 0.85em;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: end;
color: var(--color-faded);
}
/* ============================================
Code — the heart of the theme
============================================ */
.gloss-theme pre,
.gloss-theme pre[class*="language-"] {
background: var(--code-bg);
color: var(--code-fg);
border: 1px solid var(--code-border);
border-radius: var(--card-radius);
padding: var(--space-5, 1.25rem);
overflow-x: auto;
font-family: var(--font-mono);
font-size: 0.9375rem;
line-height: 1.65;
position: relative;
box-shadow: none;
}
.gloss-theme code,
.gloss-theme code[class*="language-"] {
font-family: var(--font-mono);
color: var(--code-fg);
}
/* Override prism-htmx.css's hardcoded #fdfdfd code background and its
decorative striped gradient — both leak through in dark mode. */
.gloss-theme pre[class*="language-"] > code,
.gloss-theme pre[class*="language-"] > code[class*="language-"] {
background: var(--code-bg);
background-image: none;
box-shadow: none;
}
.gloss-theme :not(pre) > code {
background: var(--color-accent-light);
padding: 0.15em 0.4em;
border-radius: 2px;
color: var(--color-fg);
font-size: 0.9em;
border: 1px solid transparent;
}
/* Language + grammar-type badge in the top-right corner.
Authored via data-lang="JA · SOV" on the
element.
Overrides required: prism-htmx.css (upstream Prism Coy theme) sets
pre[class*=language-]::before with left, width, height, transform, bottom
for a decorative paper-stack shadow — all of which bleed into and warp
this label. Explicit resets below pin it to top-right at content size. */
.gloss-theme pre[data-lang]::before {
content: attr(data-lang);
position: absolute;
top: var(--space-2, 0.5rem);
right: var(--space-3, 0.75rem);
bottom: auto;
left: auto;
width: auto;
height: auto;
transform: none;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--color-faded);
background: var(--code-bg);
padding: 0.1em 0.5em;
border: 1px solid var(--color-border);
border-radius: 2px;
text-transform: uppercase;
}
/* Reserve vertical space at the top of the code block so the badge sits
in its own band instead of overlapping the first line. */
.gloss-theme pre[data-lang],
.gloss-theme pre[data-lang][class*="language-"] {
padding-top: calc(var(--space-5, 1.25rem) + 1rem);
}
/* Hide prism-htmx's decorative ::after paper-stack layer — it renders as
a rotated navy slab below the code content on data-lang blocks. */
.gloss-theme pre[data-lang][class*="language-"]::after {
display: none;
}
/* ============================================
Interlinear gloss — signature motif
============================================
Usage (authored, simplest form):
もし ボタン を クリック したらif button PTCL click when
The `.gl` line renders below the source in a muted type, separated by a
dotted hairline — the Leipzig glossing convention. Pure CSS; no JS. */
.gloss-theme .gloss-line {
display: block;
padding-block-end: 0.4em;
margin-block-end: 0.4em;
border-block-end: 1px dotted var(--color-rule);
}
.gloss-theme .gloss-line:last-child {
border-block-end: none;
}
.gloss-theme .gloss-line .src {
display: block;
color: var(--code-fg);
}
.gloss-theme .gloss-line .gl {
display: block;
color: var(--code-gloss-fg);
font-style: italic;
font-size: 0.9em;
font-family: var(--font-body);
letter-spacing: 0.01em;
margin-block-start: 0.2em;
}
/* ============================================
Language-badge strip (row of chips above code blocks)
Usage: