/* iroiro reader — shared site styles for the EN/JA language toggle + legal pages. Linked from every content page. Pairs with /lang.js. */ /* Brand font: ONE place to swap the wordmark / header face for EVERY page (the homepage h1 and all subpage headers use var(--brand-font)). Replace this single declaration once a real brand font is chosen. */ :root { --brand-font: 'Zen Antique Soft', serif; } /* Shared base palette so the homepage and the subpages match (less-yellow off-white). */ html, body { background: #F4F4F3; color: #1B1A17; } /* Show ONLY the inactive language; shown elements keep their natural display. 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; } html:not(.lang-en):not(.lang-ja) .lang-ja { display: none !important; } /* Top-right language toggle: borderless "en jp", active underlined. */ .lang-toggle { position: fixed; top: 12px; right: 16px; z-index: 1000; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 0.85rem; line-height: 1; user-select: none; } .lang-toggle button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; margin: 0; padding: 2px 3px; cursor: pointer; color: #8a8a82; font-family: inherit; font-size: inherit; line-height: 1; text-transform: lowercase; } .lang-toggle button + button { margin-left: 7px; } .lang-toggle button:hover { color: #1B1A17; } .lang-toggle button.active { color: #1B1A17; text-decoration: underline; text-underline-offset: 3px; } /* Japanese text needs a CJK-capable font (the Latin page fonts don't cover JA). */ .lang-ja, .lang-ja * { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, system-ui, sans-serif !important; } /* Keep the brand wordmark in the brand font even in JA mode. */ .lang-ja h1 { font-family: var(--brand-font) !important; } /* Legal/content pages: readable column. */ .doc { max-width: 680px; margin: 6vh auto; padding: 0 24px; } .doc h1 { font-family: var(--brand-font); font-size: 2rem; margin: 0 0 0.2rem; } .doc h2 { font-family: system-ui, sans-serif; font-size: 1.15rem; margin: 1.8rem 0 0.4rem; } .doc p, .doc li { font-family: system-ui, -apple-system, sans-serif; font-size: 1rem; line-height: 1.7; color: #4A4A45; } .doc a { color: #1B1A17; } .doc .updated { font-family: system-ui, sans-serif; font-size: 0.85rem; color: #8a8a82; margin: 0 0 1.5rem; } .doc footer { margin-top: 3rem; } .doc footer p { font-family: system-ui, sans-serif; font-size: 0.85rem; color: #8a8a82; } .ja-subtitle { font-size: 0.9rem; color: #8a8a82; font-weight: 400; margin: 0.2rem 0 0.3rem; line-height: 1.45; } footer .here { color: #b3b3ac; } /* Shared dark mode (!important so it overrides each page's inline light colors). */ @media (prefers-color-scheme: dark) { html, body { background: #1B1A17 !important; color: #F2F1EC !important; } h1, h2 { color: #F2F1EC !important; } .doc p, .doc li { color: #B8B8B2 !important; } .updated, .ja-subtitle, footer p { color: #7c7c76 !important; } a, .doc a { color: #F2F1EC !important; } .lang-toggle button { color: #9a9a92; } .lang-toggle button:hover, .lang-toggle button.active { color: #F2F1EC; } footer .here { color: #5a5a55 !important; } }