/* 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). */ /* Base font for every shared-CSS page (legal, blog). Without this, anything not explicitly styled (card text, h3, etc.) falls back to the browser default serif. The brand font is set only where wanted (h1/wordmark); .lang-ja overrides to CJK. */ html, body { background: #F4F4F3; color: #1B1A17; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* 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: 1.9rem; line-height: 1.25; margin: 0 0 0.2rem; overflow-wrap: break-word; } .doc h2 { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.25rem; margin: 1.8rem 0 0.4rem; } .doc h3 { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.02rem; margin: 1.2rem 0 0.3rem; } .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; } } /* --- Blog --- */ .crumbs { font-family: system-ui, -apple-system, sans-serif; font-size: 0.85rem; margin: 0 0 0.4rem; } .crumbs a { color: #8a8a82; } .doc article h1 { margin-bottom: 0.1rem; } .doc blockquote { border-left: 3px solid #d9d9d2; margin: 1rem 0; padding: 0.2rem 0 0.2rem 1rem; color: #4A4A45; } .cta { margin: 2.6rem 0 0; padding: 1.1rem 1.2rem; border: 1px solid #d9d9d2; border-radius: 12px; background: #efefec; } .cta p { margin: 0 0 0.6rem; } .cta p:last-child { margin: 0; } .cta-link { display: inline-block; font-family: system-ui, sans-serif; font-weight: 600; text-decoration: none; background: #1B1A17; color: #fff !important; padding: 10px 16px; border-radius: 10px; } .post-list { display: flex; flex-direction: column; gap: 14px; margin-top: 1.6rem; } .post-card { display: flex; gap: 14px; align-items: center; text-decoration: none; border: 1px solid #e0e0da; border-radius: 12px; padding: 14px 16px; } .post-card:hover { border-color: #c4c4bc; } .post-card-glyph { font-family: var(--brand-font); font-size: 2rem; line-height: 1; color: #3B6D2E; } .post-card-text { display: flex; flex-direction: column; gap: 3px; } .post-card-title { font-weight: 600; color: #1B1A17; } .post-card-desc { font-size: 0.92rem; color: #4A4A45; line-height: 1.5; } .post-card-date { font-size: 0.8rem; color: #8a8a82; } @media (prefers-color-scheme: dark) { .crumbs a, .post-card-date { color: #7c7c76 !important; } .doc blockquote { border-left-color: #3a3a34; color: #B8B8B2 !important; } .cta { background: #26241f; border-color: #3a3a34; } .cta-link { background: #F2F1EC; color: #1B1A17 !important; } .post-card { border-color: #3a3a34; } .post-card:hover { border-color: #55554c; } .post-card-title { color: #F2F1EC !important; } .post-card-desc { color: #B8B8B2 !important; } .post-card-glyph { color: #8FBF6B; } }