/* Ouch is Fabric — shared site styles for the EN/JA language toggle. Linked from every content page. Pairs with /lang.js. */ /* Base rule: before JS / no-JS, show English and hide Japanese so the first paint is sensible. The head snippet flips the html class to lang-ja when appropriate; lang.js keeps it in sync. */ /* Hide ONLY the inactive language; shown elements keep their natural display (block for divs/p, inline for spans) — no reliance on `display:revert`, which was leaving the JA blocks hidden. The inline snippet sets html.lang-* synchronously before first paint. */ html.lang-en .lang-ja { display: none !important; } html.lang-ja .lang-en { display: none !important; } /* No-JS fallback: neither class set -> show English, hide Japanese. */ html:not(.lang-en):not(.lang-ja) .lang-ja { display: none !important; } /* Top-right language toggle. Unobtrusive, monospace, matches the site ink / off-white palette. */ .lang-toggle { position: fixed; top: 12px; right: 14px; z-index: 1000; font-family: 'Courier Prime', 'Courier New', monospace; font-size: 0.8rem; line-height: 1; background: rgba(250, 250, 247, 0.82); border: 1px solid #d9d9d2; border-radius: 7px; padding: 5px 8px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); user-select: none; } .lang-toggle button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; margin: 0; padding: 1px 3px; cursor: pointer; color: #8a8a82; font-family: inherit; font-size: inherit; line-height: 1; } .lang-toggle button:hover { color: #1F1F1C; } .lang-toggle button.active { color: #1F1F1C; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .lang-toggle .sep { color: #c4c4bc; padding: 0 1px; } @media (prefers-color-scheme: dark) { .lang-toggle { background: rgba(20, 20, 23, 0.82); border-color: #3a3a40; } .lang-toggle button { color: #9a9a92; } .lang-toggle button:hover { color: #F2F2EF; } .lang-toggle button.active { color: #F2F2EF; } .lang-toggle .sep { color: #55555c; } } /* Japanese text needs a CJK-capable font — the page font stacks (UnifrakturMaguntia / Hack / Courier Prime) are Latin-only, so without this JA falls back to an arbitrary system font (or tofu). Applies to every element inside a .lang-ja block. */ .lang-ja, .lang-ja * { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, system-ui, sans-serif !important; } /* --- Refinements 2026-05-31 --- */ /* Keep the brand wordmark + page headers in the brand font even in JA mode (the .lang-ja CJK override above would otherwise swap them). */ .lang-ja h1 { font-family: "UnifrakturMaguntia", serif !important; } /* JA header subtitle: small, semi-grey, sits under the English brand header. */ .ja-subtitle { font-size: 0.9rem; color: #8a8a82; font-weight: 400; margin: 0.2rem 0 0.3rem; line-height: 1.45; } /* Toggle restyle: borderless "en jp", Hack mono, active underlined. */ .lang-toggle { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; top: 12px; right: 16px; font-family: "Hack", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; } .lang-toggle .sep { display: none !important; } .lang-toggle button { text-transform: lowercase; padding: 2px 3px; } .lang-toggle button + button { margin-left: 7px; } .lang-toggle button.active { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; } /* Shared dark mode (!important so it overrides each page's inline light colors, which are declared after site.css). Matches the homepage palette. */ @media (prefers-color-scheme: dark) { html, body { background: #141417 !important; color: #E8E8E6 !important; } h1, h2 { color: #F2F2EF !important; } p, ul, li { color: #B8B8B2 !important; } .updated, .ja-subtitle, footer p { color: #7c7c76 !important; } a { color: #E8E8E6 !important; } } /* Picker font: force Hack on the buttons too (was `inherit`) so the toggle never changes font between EN and JA. */ .lang-toggle button { font-family: "Hack", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; } /* Footer: the current page is shown but not linked — muted + non-interactive. */ footer .here { color: #b3b3ac; } @media (prefers-color-scheme: dark) { footer .here { color: #5a5a55 !important; } }