/* ============================================================================
JAPANDI — web theme
----------------------------------------------------------------------------
SWAP TARGET. This file is the reconstructed web-ported Japandi theme. If you
have the canonical copy in ikigai-www/theme, replace THIS FILE wholesale and
the rest of the site inherits it — nothing else hardcodes a colour or a font.
The :root token block below is recovered verbatim from the ikigai-rs
coming-soon port and should be treated as authoritative. Everything after
the token blocks is reconstruction: base typography and small primitives,
written only against the tokens.
Japanese + Scandinavian restraint and negative space (ma):
Ground shoji-paper greige Ink warm sumi near-black
Accent aizome indigo (functional — links, UI, never decorative)
Warm shu vermilion — the SINGLE warm gesture (the hanko seal)
Maintainer notes carried forward from the original:
· --seal is the seal BLOCK fill; --warm is vermilion used as text/marker.
They share a hue, but --warm lightens in dark mode so vermilion text
keeps WCAG-AA contrast on the sumi ground (true vermilion on sumi is
only ~3:1). The seal block keeps its true colour in both themes.
· --muted and --accent are tuned for >= 4.5:1 body-text contrast in both.
· --faint is DECORATIVE ONLY. Never set text in it.
· --seal at #b8472f is ~4.4:1 on paper: large text and graphics only.
· Fonts are loaded in the page .
============================================================================ */
:root {
--bg: #f3f1ec; /* shoji greige */
--fg: #2a2723; /* sumi ink */
--muted: #6f695e; /* accessible muted (~4.9:1 on paper) — text */
--faint: #cfcabf; /* decorative-only, never text */
--accent: #46586b; /* aizome indigo — functional (links, UI) */
--seal: #b8472f; /* shu vermilion — seal block fill */
--warm: #b8472f; /* vermilion as text/marker (lightens in dark) */
--rule: #e2ded4; /* hairline dividers / quiet borders */
--seal-ink: #f6f4ef; /* seal glyphs stay paper-toned in any theme */
--paper: #f3f1ec; /* shoji greige, HELD in both themes (brand bar) */
--font-display: "Zen Kaku Gothic New", "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, sans-serif;
--font-mono: "IBM Plex Mono", "JetBrains Mono", Menlo, monospace;
/* ma — the spacing scale. Deliberately few steps; restraint is the point. */
--space-2xs: 0.375rem;
--space-xs: 0.75rem;
--space-s: 1.25rem;
--space-m: 2rem;
--space-l: 3.25rem;
--space-xl: 5.25rem;
--space-2xl: 8.5rem;
--measure: 34rem; /* body copy line length */
--page: 72rem; /* outer page maximum */
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #26241f; /* sumi ground */
--fg: #f1efe8;
--muted: #a39c8f; /* ~5.7:1 on sumi */
--faint: #46433a;
--accent: #99a3ae; /* lightened aizome (~6.1:1) */
--warm: #d77a5f; /* lightened vermilion (~5.0:1) */
--rule: #403d34;
/* --seal and --seal-ink intentionally unchanged: the warm stamp reads
identically in both themes. */
}
}
/* ---------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; } /* honour user font-size for rem scaling */
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-body);
color: var(--fg);
background: var(--bg);
font-size: 1.0625rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100svh;
}
/* faint shoji-paper grain, well below the noise threshold */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
opacity: 0.4;
background-image: url("data:image/svg+xml;utf8,\
");
}
/* ----------------------------------------------------------- typography --- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 500;
line-height: 1.22;
letter-spacing: -0.012em;
margin: 0;
text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 500; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
h3 { font-size: 1.1875rem; font-weight: 500; }
h4 { font-size: 1rem; font-weight: 500; }
p { margin: 0 0 var(--space-s); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
transition: border-color 140ms ease, color 140ms ease;
}
a:hover { border-bottom-color: var(--accent); }
strong { font-weight: 600; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
hr {
border: 0;
border-top: 1px solid var(--rule);
margin: var(--space-l) 0;
}
::selection { background: color-mix(in srgb, var(--seal) 22%, transparent); }
/* ------------------------------------------------------------- eyebrow --- */
/* The utility face doing utility work: a small mono label above a heading.
Structural, not decorative — it always names a category the reader can
also find in the navigation. */
.eyebrow {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 var(--space-xs);
display: block;
}
/* ---------------------------------------------------------------- seal --- */
/* The single warm gesture. Vermilion hanko carved 菩薩 (bosatsu), stacked
vertically as a two-character seal is traditionally cut. Everything else on
the page stays quiet so this can be the one thing you remember. */
.seal {
display: inline-grid;
place-content: center;
inline-size: 3.25rem;
block-size: 3.25rem;
background: var(--seal);
border-radius: 3px;
color: var(--seal-ink);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
line-height: 1.02;
letter-spacing: 0.02em;
writing-mode: vertical-rl; /* 菩 above 薩, read top-down */
user-select: none;
flex: none;
}
.seal--sm { inline-size: 2rem; block-size: 2rem; font-size: 0.6875rem; border-radius: 2px; }
/* the press: a stamp settling onto paper, once, on load */
@keyframes seal-press {
from { transform: scale(1.06); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.seal--press { animation: seal-press 520ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
/* ------------------------------------------------------------ primitives - */
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.measure { max-width: var(--measure); }
/* focus: visible, calm, and never removed */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
/* After an hx-boost navigation, site.js moves focus to the page's
so
keyboard / AT users land on the new content. That heading is not itself
interactive, so its programmatic focus should not paint a ring — Safari
draws one (a light-grey rounded box), Chrome does not. Suppress it while
keeping the focus move. Real interactive elements still use :focus-visible. */
[tabindex="-1"]:focus { outline: none; }
.skip-link {
position: absolute;
left: var(--space-s);
top: -4rem;
z-index: 100;
background: var(--bg);
color: var(--fg);
border: 1px solid var(--rule);
padding: var(--space-2xs) var(--space-xs);
transition: top 140ms ease;
}
.skip-link:focus { top: var(--space-s); }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}