/* * Jiǎoluò Shūwū · 角落書屋 — style.css * Shared stylesheet for all character and topic entries. * Link from every page: * Google Fonts must also be linked in each page . */ /* ── TOKENS ─────────────────────────────────────────────── */ :root { --papyrus: #f2e8d5; --papyrus-2: #ebe0c8; --papyrus-3: #e0d4b8; --papyrus-4: #d4c9a8; --papyrus-5: #c8bda0; --ink: #14110a; --ink-2: #221808; --ink-3: #2c1f10; --ink-4: #3d2e18; --ink-5: #5a4428; --red: #8b1a1a; --red-2: #a82020; --red-tint: rgba(139,26,26,0.07); --ochre: #a06428; --ochre-2: #c07830; --sienna: #7a3a18; --teal-ink: #1a5050; --teal-2: #2a7070; --violet-ink: #4a2878; --rule: rgba(60,40,20,0.18); --rule-2: rgba(60,40,20,0.10); --shadow: rgba(30,20,10,0.12); --font-body: 'Cormorant Garamond', 'Noto Serif SC', 'PingFang SC', 'Songti SC', 'Hiragino Sans GB', 'Microsoft YaHei', Georgia, serif; --font-cn: 'Noto Serif SC', 'PingFang SC', 'Songti SC', 'Hiragino Sans GB', 'Microsoft YaHei', serif; --font-mono: 'Noto Sans Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Noto Sans CJK SC', sans-serif; --sidebar-w: 220px; --radius: 5px; --radius-lg: 8px; --nav-h: 46px; --focus-ring: 0 0 0 2px rgba(160,100,40,0.35); /* Per-category accent palette */ /* Category palette — two families. Language: warm ink/pigment tones (红 cinnabar → 褐 umber). These four sit together visually so the entry type reads at a glance. Civilisation: cooler, varied pigments for each cultural domain. */ --cat-characters: #8b1a1a; /* cinnabar */ --cat-vocab: #a06428; /* ochre */ --cat-grammar: #5c3821; /* walnut ink */ --cat-chengyu: #6b1a2a; /* wine */ --cat-religion: #5c3d7a; /* violet */ --cat-philosophy: #3a5c3a; /* forest */ --cat-history: #6b4420; /* sepia */ --cat-geography: #2a5c6b; /* slate */ --cat-culture: #8e4a6e; /* plum */ --cat-culinary: #a85820; /* terracotta */ --cat-arts: #4a2878; /* indigo */ --cat-science: #1a4a5c; /* steel teal */ --cat-daily: #7a6024; /* mustard */ /* Seal colour — overridden per category below. Drives the chop marks on .scholar boxes, the tab under each .section-head, and the centre chop on the page footer. */ --seal-color: var(--cat-characters); } ::selection { background: rgba(139,26,26,0.18); color: var(--ink); } /* Skip link for keyboard users */ .skip-link { position: absolute; left: 0.5rem; top: 0.5rem; background: var(--ink); color: var(--papyrus); padding: 0.5rem 0.9rem; border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transform: translateY(-200%); transition: transform 0.15s; z-index: 300; border: 1px solid var(--ochre-2); } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--ochre-2); outline-offset: 2px; } /* Reading progress bar — sits directly under the topnav */ .reading-progress { position: sticky; top: var(--nav-h); height: 2px; z-index: 199; background: transparent; pointer-events: none; } .reading-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--red), var(--ochre-2)); transition: width 0.1s linear; pointer-events: none; } /* ── RESET ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ── ROOT TYPOGRAPHY ────────────────────────────────────── */ html { hanging-punctuation: first allow-end last; text-rendering: optimizeLegibility; } /* ── BODY & PAPER TEXTURE ────────────────────────────────── */ body { background-color: var(--papyrus); font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1; font-variant-numeric: oldstyle-nums; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)' opacity='0.06'/%3E%3C/svg%3E"), repeating-linear-gradient( 0deg, transparent, transparent 28px, rgba(60,40,20,0.025) 28px, rgba(60,40,20,0.025) 29px ), radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,26,26,0.04) 0%, transparent 70%); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.7; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* ── TOP NAV ─────────────────────────────────────────────── */ .topnav { background: linear-gradient(180deg, #14110a 0%, #1c1208 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 1.75rem; position: sticky; top: 0; z-index: 200; border-bottom: 1px solid rgba(139,26,26,0.6); box-shadow: 0 2px 0 rgba(139,26,26,0.4), 0 1px 8px rgba(0,0,0,0.15); height: var(--nav-h); } .topnav-brand { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--papyrus-2); text-decoration: none; transition: color 0.15s, background 0.15s; display: inline-flex; align-items: center; gap: 0.35rem; height: 100%; padding: 0 0.9rem 0 0.25rem; margin-left: -0.25rem; min-height: 44px; border-radius: 3px; position: relative; cursor: pointer; } .topnav-brand-cn { font-family: var(--font-cn); font-size: 1.1rem; color: var(--ochre-2); letter-spacing: 0.05em; line-height: 1; transition: color 0.15s; } .topnav-brand-sep { color: rgba(160,100,40,0.5); font-size: 0.8rem; letter-spacing: 0; } .topnav-brand-en { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--papyrus-3); transition: color 0.15s; } .topnav-brand:hover .topnav-brand-cn { color: var(--red-2); } .topnav-brand:hover .topnav-brand-en { color: var(--papyrus); } .topnav-back { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--papyrus-5); text-decoration: none; transition: color 0.15s, transform 0.15s; display: inline-flex; align-items: center; gap: 0.3rem; } .topnav-back:hover { color: var(--ochre-2); transform: translateX(-2px); } .topnav-right { display: flex; align-items: center; gap: 1.6rem; } .topnav-random { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--papyrus-5); text-decoration: none; transition: color 0.15s; display: inline-flex; align-items: center; gap: 0.35rem; } .topnav-random span { font-family: var(--font-mono); font-size: 0.95rem; color: var(--ochre-2); transition: transform 0.3s; display: inline-block; line-height: 1; } .topnav-random:hover { color: var(--papyrus); } .topnav-random:hover span { transform: rotate(15deg); } .topnav-random:focus-visible { outline: 2px solid var(--ochre-2); outline-offset: 3px; border-radius: 2px; } .topnav-random.loading { opacity: 0.6; pointer-events: none; } .topnav-random.loading span { animation: spin 0.9s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Auto-link tooltip */ .al-tooltip { position: absolute; z-index: 250; max-width: 280px; background: var(--ink); color: var(--papyrus); border: 1px solid var(--ochre-2); border-radius: var(--radius); padding: 0.55rem 0.75rem; font-family: var(--font-body); font-size: 0.82rem; line-height: 1.45; opacity: 0; transform: translateY(-2px); transition: opacity 0.15s, transform 0.15s; pointer-events: none; display: none; box-shadow: 0 4px 12px rgba(28,18,8,0.35); } .al-tooltip.visible { opacity: 1; transform: translateY(0); display: block; } .al-tt-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; } .al-tt-cn { font-family: var(--font-cn); font-weight: 700; color: var(--papyrus); font-size: 1rem; } .al-tt-py { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ochre-2); letter-spacing: 0.05em; } .al-tt-hsk { font-family: var(--font-mono); font-size: 0.65rem; color: var(--papyrus-3); background: rgba(255,255,255,0.07); border-radius: 3px; padding: 0.1em 0.35em; margin-left: auto; } .al-tt-desc { font-style: italic; color: var(--papyrus-3); font-size: 0.78rem; } .topnav-brand:focus-visible, .topnav-back:focus-visible { outline: 2px solid var(--ochre-2); outline-offset: 3px; border-radius: 2px; } /* ── MOBILE TOC TOGGLE ───────────────────────────────────── */ .toc-toggle { display: none; background: var(--papyrus-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.45rem 0.85rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--ink-3); cursor: pointer; margin: 1rem 1.25rem 0; text-transform: uppercase; transition: background 0.15s, color 0.15s, border-color 0.15s; min-height: 40px; } .toc-toggle:hover { background: var(--papyrus-3); color: var(--ink); border-color: var(--ochre); } .toc-toggle:active { transform: scale(0.98); } .toc-toggle[aria-expanded="true"] { background: var(--red); color: var(--papyrus); border-color: var(--red); } .toc-toggle:focus-visible { outline: none; border-color: var(--ochre); box-shadow: 0 0 0 2px rgba(160,100,40,0.3); } /* Backdrop behind the mobile sidebar sheet */ .sidebar-backdrop { position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(20,17,10,0.35); z-index: 170; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .sidebar-backdrop.visible { opacity: 1; pointer-events: auto; } @media (min-width: 769px) { .sidebar-backdrop { display: none; } } /* ── LAYOUT SHELL ────────────────────────────────────────── */ .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; max-width: 1060px; margin: 0 auto; min-height: calc(100vh - var(--nav-h)); } /* ── SIDEBAR ─────────────────────────────────────────────── */ .sidebar { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; border-right: 1px solid var(--rule); padding: 2rem 0 3rem; background: var(--papyrus-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E"); } .sidebar::-webkit-scrollbar { width: 3px; } .sidebar::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; } /* sidebar character hero (char entries) */ .toc-glyph { font-family: var(--font-cn); font-size: 3.5rem; font-weight: 700; color: var(--red); text-align: center; line-height: 1; display: block; margin-bottom: 0.2rem; text-shadow: 2px 2px 0 rgba(139,26,26,0.15); } .toc-pinyin { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ochre); text-align: center; letter-spacing: 0.1em; display: block; margin-bottom: 1.5rem; } /* sidebar topic hero (topic entries) */ .toc-topic { font-family: var(--font-cn); font-size: 1rem; font-weight: 700; color: var(--red); text-align: center; line-height: 1.3; display: block; padding: 0 1rem; margin-bottom: 0.3rem; } .toc-topic-en { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ochre); text-align: center; letter-spacing: 0.1em; display: block; margin-bottom: 1.5rem; font-style: italic; } .toc-divider { height: 1px; background: var(--rule); margin: 0 1.2rem 1.2rem; } .toc-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-5); padding: 0 1.4rem; margin-bottom: 0.4rem; display: block; } .toc-list { list-style: none; } .toc-list li { display: block; } .toc-list a { display: block; padding: 0.35rem 1.4rem; font-size: 0.83rem; color: var(--ink-3); text-decoration: none; line-height: 1.35; border-left: 2px solid transparent; transition: all 0.15s; } .toc-list a:hover { color: var(--red); border-left-color: var(--red); background: var(--red-tint); } .toc-list a.active { color: var(--red); border-left-color: var(--red); background: var(--red-tint); font-weight: 600; } .toc-list a:focus-visible { outline: none; color: var(--red); border-left-color: var(--ochre); background: var(--red-tint); box-shadow: inset 0 0 0 1px rgba(160,100,40,0.3); } .toc-cn { font-family: var(--font-cn); font-weight: 600; color: var(--ink-2); margin-right: 0.3rem; } .toc-sub { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-5); display: block; margin-top: 0.05rem; } /* ── MAIN CONTENT ────────────────────────────────────────── */ .main { padding: 3rem 3rem 6rem 3.5rem; max-width: 780px; } .main > section, .main > div.scholar, .main > div.pattern { margin-bottom: 1.6rem; } /* ── HERO: CHARACTER ENTRY ───────────────────────────────── */ .hero { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); position: relative; animation: fadeUp 0.7s ease both; } .hero::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 80px; height: 3px; background: var(--red); border-radius: 0 0 2px 2px; } .hero-inner { display: flex; align-items: flex-start; gap: 2.5rem; } .hero-glyph-col { flex-shrink: 0; text-align: center; } /* Simp / trad pair */ .hero-script-pair { display: flex; align-items: flex-start; gap: 0; } .hero-script { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0 1.1rem; } .hero-script:first-child { padding-left: 0; } .hero-script-divider { width: 1px; background: var(--rule); align-self: stretch; margin: 0.5rem 0; flex-shrink: 0; } .hero-glyph { font-family: var(--font-cn); font-size: 7.5rem; font-weight: 700; color: var(--red); line-height: 1; display: block; text-shadow: 3px 3px 0 rgba(139,26,26,0.2), 1px 1px 0 rgba(139,26,26,0.3); letter-spacing: -0.02em; } .hero-script--trad .hero-glyph { color: var(--sienna); text-shadow: 2px 2px 0 rgba(120,60,20,0.15); opacity: 0.85; } .hero-script-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--ink-5); white-space: nowrap; } .hero-script--simp .hero-script-label { color: var(--ink-4); } .hero-meta { padding-top: 0.75rem; } .hero-pinyin { font-family: var(--font-mono); font-size: 1.8rem; color: var(--ochre); letter-spacing: 0.08em; line-height: 1; margin-bottom: 0.5rem; } .hero-en { font-size: 1.1rem; font-style: italic; color: var(--ink-3); line-height: 1.5; margin-bottom: 0.9rem; } .hero-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* ── HERO: TOPIC ENTRY ───────────────────────────────────── */ .topic-hero { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); position: relative; animation: fadeUp 0.7s ease both; } .topic-hero::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 80px; height: 3px; background: var(--red); border-radius: 0 0 2px 2px; } .topic-hero-eyebrow { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ochre); display: block; margin-bottom: 0.6rem; font-weight: 500; } .topic-hero-title { font-family: var(--font-cn); font-size: 2.8rem; font-weight: 700; color: var(--red); line-height: 1.1; margin-bottom: 0.35rem; letter-spacing: -0.005em; text-shadow: 2px 2px 0 rgba(139,26,26,0.12); text-wrap: balance; } .topic-hero-desc { text-wrap: pretty; } h1, h2, h3, .section-head { text-wrap: balance; } .card-def, .note { text-wrap: pretty; } .topic-hero-title-py { font-family: var(--font-mono); font-size: 1.05rem; color: var(--ochre); letter-spacing: 0.07em; display: block; margin-bottom: 0.85rem; } .topic-hero-desc { font-size: 1.08rem; font-style: italic; color: var(--ink-3); line-height: 1.6; margin-bottom: 1rem; text-wrap: pretty; max-width: 60ch; } /* ── CHIPS ───────────────────────────────────────────────── */ .chip { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 20px; border: 1px solid var(--rule); color: var(--ink-4); background: var(--papyrus-3); } .chip-hsk { border-color: rgba(139,26,26,0.25); color: var(--red); background: var(--red-tint); } .chip-topic { border-color: rgba(26,80,80,0.25); color: var(--teal-ink); background: rgba(26,80,80,0.06); } /* ── SECTION ANCHORS ─────────────────────────────────────── */ .section-anchor { display: block; position: relative; top: calc(-1 * (var(--nav-h) + 24px)); visibility: hidden; } /* ── SECTION HEADS ─────────────────────────────────────────── Two forms share this class: (1) Topic / vocab / grammar pages — a single h2 with plain text (e.g. "The Great Migration · 春运 chūnyùn"). (2) Character pages — a div wrapping .sh-cn / .sh-py / .sh-en spans. Form (1) falls through to the base rules; form (2) is promoted into a two-row layout via :has(), with the English title as the primary heading and the Chinese + pinyin as a small eyebrow above it. */ .section-head { font-family: var(--font-body); font-size: 1.55rem; font-weight: 600; color: var(--ink); line-height: 1.2; letter-spacing: -0.005em; margin: 3rem 0 1.3rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); text-wrap: balance; position: relative; } /* Small coloured tab under each section head — echoes the red bar under the hero so every section reads as a labelled tag. Colour follows the active category via --seal-color. */ .section-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 2.2rem; height: 2px; background: var(--seal-color); border-radius: 0 0 1.5px 1.5px; } /* Two-row section head: small CJK + pinyin sit inline on row 1, the English heading takes row 2 by itself. The previous grid version used `auto auto` columns and a row-spanning English heading, which forced the cn / py columns to stretch when the English title was long, leaving a wide gap between e.g. "阴阳" and "yīnyáng". Block flow with inline spans for the meta row keeps everything tight regardless of the en title's length. */ .section-head:has(.sh-cn) { display: block; font-size: inherit; font-weight: inherit; } .sh-cn { font-family: var(--font-cn); font-size: 0.92rem; font-weight: 700; color: var(--red); letter-spacing: 0.02em; } .sh-py { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ochre); letter-spacing: 0.16em; text-transform: uppercase; } /* Inside a section-head only: cn + py sit inline, en takes its own line. Spaced via margin so we don't force display: block on .sh-en globally (which would break the flex .cat-head on the homepage). */ .section-head .sh-cn { margin-right: 0.45rem; vertical-align: baseline; } .section-head .sh-py { vertical-align: 0.12em; } .section-head .sh-en { display: block; margin-top: 0.2rem; font-family: var(--font-body); font-size: 1.55rem; font-weight: 600; color: var(--ink); font-style: normal; line-height: 1.2; letter-spacing: -0.005em; text-wrap: balance; } .sh-rule { display: none; } /* ── SCHOLAR BOX ─────────────────────────────────────────── */ .scholar { background: var(--papyrus-2); border: 1px solid var(--rule); border-left: 3px solid var(--seal-color); border-radius: var(--radius); padding: 1.4rem 1.6rem 3rem; margin-bottom: 1.5rem; position: relative; overflow: hidden; } .scholar + .scholar { margin-top: -0.5rem; } .scholar p + p { margin-top: 0.9rem; } /* Pressed chop mark (印章) — replaces the old bleeding watermark. The character carved into the seal is whichever data-glyph the entry sets; the fill tracks the category colour. Uneven radial gradients fake the ink-pooling you see on a real hand-pressed seal. */ .scholar::after { content: attr(data-glyph); position: absolute; right: 1rem; bottom: 0.9rem; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-cn); font-size: 1.35rem; font-weight: 700; color: var(--papyrus); background: radial-gradient(circle at 28% 32%, rgba(255,255,255,0.12), transparent 55%), radial-gradient(circle at 78% 78%, rgba(0,0,0,0.14), transparent 60%), var(--seal-color); border-radius: 3px; transform: rotate(-2.5deg); box-shadow: 0 1px 2px rgba(28,18,8,0.18); opacity: 0.92; line-height: 1; pointer-events: none; user-select: none; } .scholar-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sienna); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; } .scholar-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); } .scholar p { font-size: 0.93rem; color: var(--ink-3); line-height: 1.8; text-wrap: pretty; } .scholar strong { color: var(--ink); font-weight: 700; } .scholar em { font-style: italic; color: var(--ink-2); } /* ── PATTERN BOX ─────────────────────────────────────────── */ .pattern { background: rgba(26,80,80,0.05); border: 1px solid rgba(26,80,80,0.2); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin-bottom: 1.5rem; font-size: 0.88rem; line-height: 1.85; color: var(--ink-3); } .pattern .label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-ink); display: block; margin-bottom: 0.4rem; } .pattern strong { color: var(--ink); } .pattern code { font-family: var(--font-mono); font-size: 0.83rem; background: var(--papyrus-3); border: 1px solid var(--rule); padding: 0.05rem 0.35rem; border-radius: 3px; color: var(--red); } /* ── PROSE SECTION (topic entries) ──────────────────────── */ .prose { font-size: 0.95rem; color: var(--ink-3); line-height: 1.85; margin-bottom: 1.5rem; } .prose p { margin-bottom: 0.9rem; text-wrap: pretty; } .prose p:last-child { margin-bottom: 0; } .prose strong { color: var(--ink); font-weight: 700; } .prose em { color: var(--ink-2); } /* ── CARDS ───────────────────────────────────────────────── */ .cards { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 0.5rem; } .card { background: var(--papyrus); padding: 1.35rem 1.5rem 1.35rem 1.7rem; position: relative; transition: background 0.15s, padding-left 0.15s; } .card:hover { background: var(--papyrus-2); padding-left: 1.85rem; } .card:focus-visible { outline: none; background: var(--papyrus-2); box-shadow: inset 0 0 0 2px rgba(160,100,40,0.35); } .card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; transition: width 0.15s; } .card:hover::before { width: 5px; } /* Semantic card colours — left border matches POS tag inside */ .c-v::before { background: var(--red); } .c-n::before { background: var(--teal-ink); } .c-vn::before { background: var(--violet-ink); } .c-adj::before { background: var(--ochre); } .c-conj::before { background: var(--sienna); } .c-neutral::before { background: var(--papyrus-5); } /* Legacy aliases — preserved so old content renders without a rebuild */ .c-red::before { background: var(--red); } .c-ochre::before { background: var(--ochre); } .c-teal::before { background: var(--teal-ink); } .c-violet::before { background: var(--violet-ink); } .c-sienna::before { background: var(--sienna); } .card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.8rem; margin-bottom: 0.6rem; } .card-cn { font-family: var(--font-cn); font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1; } .card-py { font-family: var(--font-mono); font-size: 0.88rem; color: var(--ochre); letter-spacing: 0.04em; } .card-en { font-size: 0.85rem; color: var(--ink-4); font-style: italic; } /* ── POS TAGS ────────────────────────────────────────────── */ .tags { margin-bottom: 0.65rem; display: flex; gap: 0.3rem; flex-wrap: wrap; } .tag { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 20px; border: 1px solid; } .tag-v { color: var(--red); border-color: rgba(139,26,26,0.3); background: var(--red-tint); } .tag-n { color: var(--teal-ink); border-color: rgba(26,80,80,0.25); background: rgba(26,80,80,0.05); } .tag-vn { color: var(--violet-ink); border-color: rgba(74,40,120,0.25); background: rgba(74,40,120,0.05); } .tag-adj { color: var(--ochre); border-color: rgba(160,100,40,0.3); background: rgba(160,100,40,0.06); } .tag-conj { color: var(--sienna); border-color: rgba(122,58,24,0.3); background: rgba(122,58,24,0.06); } /* ── CARD BODY ───────────────────────────────────────────── */ .card-def { font-size: 0.92rem; color: var(--ink-3); line-height: 1.78; margin-bottom: 0.85rem; } .card-def strong { color: var(--ink); font-weight: 700; } .card-def em { color: var(--ink-2); font-style: italic; } .examples { display: flex; flex-direction: column; gap: 0.45rem; } .example { background: var(--papyrus-3); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 0.65rem 1rem; } .ex-cn { font-family: var(--font-cn); font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1.5; } .ex-py { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ochre); margin: 0.1rem 0; line-height: 1.4; } .ex-en { font-size: 0.8rem; color: var(--ink-5); font-style: italic; } .note { margin-top: 0.85rem; border-left: 2px solid var(--papyrus-5); padding-left: 0.85rem; font-size: 0.83rem; color: var(--ink-4); line-height: 1.72; } .note-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-2); display: block; margin-bottom: 0.2rem; } .note strong { color: var(--ink-2); } .note em { color: var(--ink-2); font-style: italic; } .note code { font-family: var(--font-mono); font-size: 0.8rem; background: var(--papyrus-3); border: 1px solid var(--rule-2); padding: 0.05rem 0.35rem; border-radius: 3px; color: var(--red); } /* ── TABLE ───────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); margin-bottom: 0.5rem; container-type: inline-size; container-name: tbl; } table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } thead th { background: var(--papyrus-3); padding: 0.6rem 1rem; text-align: left; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-ink); border-bottom: 1px solid var(--rule); white-space: nowrap; } tbody td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--rule-2); vertical-align: top; line-height: 1.55; color: var(--ink-3); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--papyrus-2); } .td-cn { font-family: var(--font-cn); font-size: 1.15rem; font-weight: 700; color: var(--red); white-space: nowrap; } .td-py { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ochre); white-space: nowrap; } /* Stack table rows vertically when the table's actual container is too narrow for four columns. Using @container instead of @media catches the case where a desktop viewport still has a sidebar narrowing the content area (e.g. ~580px content at 820px viewport). The visual styling on .td-cn / .td-py keeps each cell legible without the thead. */ @container tbl (max-width: 620px) { .table-wrap { overflow-x: visible; } table, thead, tbody, tr, th, td { display: block; width: auto; } thead { display: none; } tbody tr { padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule-2); } tbody tr:last-child { border-bottom: none; } tbody td { padding: 0.1rem 0; border: none; line-height: 1.55; white-space: normal; } .td-cn { font-size: 1.2rem; padding-bottom: 0.05rem; white-space: normal; } .td-py { font-size: 0.78rem; padding-bottom: 0.25rem; white-space: normal; } } .td-small { font-size: 0.76rem; color: var(--ink-5); display: block; margin-top: 0.2rem; } .td-py-sm { font-family: var(--font-mono); color: var(--ochre); font-size: 0.7rem; } /* ── CHENGYU ─────────────────────────────────────────────── */ .chengyu-grid { display: flex; flex-direction: column; gap: 0.7rem; } /* Vertical stack at every viewport: idiom → pinyin → gloss → note. The old `auto 1fr` grid kept the idiom on the left and stacked the rest in a narrow right column, which squashed long pinyin like "fàngxià túdāo, lìdì chéng fó" any time the content area was tight (mobile, but also desktop with the sidebar in play). Stacking always gives each row the full card width. */ .cy { background: var(--papyrus-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.95rem 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; } .cy-cn { font-family: var(--font-cn); font-size: 1.3rem; font-weight: 700; color: var(--red); letter-spacing: 0.08em; line-height: 1.2; margin-bottom: 0.15rem; } .cy-py { font-family: var(--font-mono); font-size: 0.73rem; color: var(--ochre); line-height: 1.3; } .cy-en { font-size: 0.88rem; color: var(--ink-2); font-style: italic; } .cy-note { font-size: 0.78rem; color: var(--ink-4); line-height: 1.55; margin-top: 0.25rem; } /* ── SOURCES BLOCK ───────────────────────────────────────── */ .sources { margin-top: 2.5rem; padding: 1rem 1.3rem; background: transparent; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .sources-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-5); display: block; margin-bottom: 0.45rem; } .sources-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; } .sources-list li { font-family: var(--font-body); font-size: 0.82rem; font-style: italic; color: var(--ink-4); padding-left: 1rem; position: relative; text-wrap: pretty; } .sources-list li::before { content: '·'; position: absolute; left: 0.3rem; color: var(--ochre); font-style: normal; } /* ── RELATED ENTRIES (cross-linking) ─────────────────────── */ .related { margin-top: 2.5rem; padding: 1.2rem 1.4rem; background: var(--papyrus-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .related-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-5); display: block; margin-bottom: 0.7rem; } .related-list { display: flex; flex-wrap: wrap; gap: 0.45rem; } .related-link { display: inline-flex; align-items: baseline; gap: 0.4rem; background: var(--papyrus); border: 1px solid var(--rule-2); border-radius: 20px; padding: 0.3rem 0.85rem; text-decoration: none; color: var(--ink-3); font-size: 0.82rem; transition: border-color 0.15s, background 0.15s, color 0.15s; } .related-link:hover { border-color: var(--red); background: var(--papyrus-3); color: var(--ink); } .related-link .rl-cn { font-family: var(--font-cn); font-weight: 700; color: var(--red); font-size: 0.95rem; letter-spacing: 0.02em; } .related-link.rl-multi .rl-cn { font-size: 0.85rem; letter-spacing: 0.03em; } .related-link .rl-py { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ochre); } .related-link .rl-en { font-style: italic; color: var(--ink-4); font-size: 0.78rem; } .related-link:hover .rl-en { color: var(--ink-2); } /* ── PREV / NEXT (within category) ───────────────────────── */ .prev-next { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .pn-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; background: var(--papyrus-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink-3); transition: border-color 0.15s, background 0.15s, transform 0.15s; min-height: 44px; } .pn-link:hover { border-color: var(--red); background: var(--papyrus-3); } .pn-prev:hover { transform: translateX(-2px); } .pn-next:hover { transform: translateX(2px); } .pn-link:focus-visible { outline: none; border-color: var(--ochre); box-shadow: 0 0 0 2px rgba(160,100,40,0.25); } .pn-next { justify-content: flex-end; text-align: right; } .pn-arrow { font-family: var(--font-mono); font-size: 1.1rem; color: var(--ochre); flex-shrink: 0; } .pn-next .pn-arrow { order: 2; } .pn-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .pn-label { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-5); } .pn-title { font-size: 0.92rem; color: var(--ink-2); line-height: 1.3; } .pn-cn { font-family: var(--font-cn); font-weight: 700; color: var(--red); } .pn-py { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ochre); } .pn-empty { display: block; } @media (max-width: 600px) { .prev-next { grid-template-columns: 1fr; } .pn-next { justify-content: flex-start; text-align: left; } .pn-next .pn-arrow { order: 0; } } /* ── ADJACENT VOCAB CHIPS ────────────────────────────────── */ .adj-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; } .adj { background: var(--papyrus-2); border: 1px solid var(--rule); border-radius: 20px; padding: 0.28rem 0.8rem; font-size: 0.82rem; line-height: 1.5; cursor: default; transition: border-color 0.15s, background 0.15s; } a.adj { cursor: pointer; text-decoration: none; } .adj:hover { border-color: var(--ochre); background: var(--papyrus-3); } a.adj:hover { border-color: var(--red); background: var(--papyrus-3); } a.adj:focus-visible { outline: none; border-color: var(--ochre); box-shadow: 0 0 0 2px rgba(160,100,40,0.25); } .a-cn { font-family: var(--font-cn); font-weight: 600; color: var(--ink); } .a-py { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ochre); margin: 0 0.2rem; } .a-en { font-style: italic; color: var(--ink-5); font-size: 0.78rem; } /* ── PAGE FOOTER ─────────────────────────────────────────── */ .page-footer { margin-top: 4rem; padding: 1.5rem 0 0; border-top: 1px solid var(--rule); } .page-footer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.4rem; } .page-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; } .page-footer-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .pf-link { color: var(--ink-3); text-decoration: none; font-family: var(--font-body); font-size: 0.92rem; line-height: 1.2; padding: 0.35rem 0; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; } .pf-link:hover { color: var(--red); border-bottom-color: var(--red); } .pf-link:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; border-radius: 2px; color: var(--red); } /* pf-btn: shared look for the footer donate + share buttons. Mirrors the homepage hero CTAs so the button system reads the same top-to-bottom: pf-btn-donate == hero-cta-primary (red fill); pf-btn-share == hero-cta-secondary (transparent + border). Selectors are element-qualified (a.pf-btn / button.pf-btn) so the rules outrank any generic anchor styling that lands later in the cascade. */ a.pf-btn, button.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.65rem 1.3rem; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.005em; text-transform: none; text-decoration: none; color: inherit; cursor: pointer; border: 1px solid transparent; border-radius: 6px; line-height: 1.2; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; min-height: 42px; appearance: none; -webkit-appearance: none; } a.pf-btn-donate, button.pf-btn-donate { background: var(--red); color: var(--papyrus); border-color: var(--red); } a.pf-btn-donate:hover, button.pf-btn-donate:hover { background: var(--red-2); border-color: var(--red-2); color: var(--papyrus); } a.pf-btn-donate:focus-visible, button.pf-btn-donate:focus-visible { outline: 2px solid var(--ochre-2); outline-offset: 3px; } .pf-btn-donate .pf-btn-cn-inline { font-family: var(--font-cn); font-weight: 600; margin: 0 0.1rem; color: var(--papyrus); } a.pf-btn-share, button.pf-btn-share { background: transparent; color: var(--ink-3); border-color: var(--rule); } a.pf-btn-share:hover, button.pf-btn-share:hover { background: var(--papyrus-2); color: var(--ink); border-color: var(--ochre); } a.pf-btn-share.copied, button.pf-btn-share.copied { color: var(--red); border-color: var(--red); background: transparent; } a.pf-btn-share:focus-visible, button.pf-btn-share:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; } .pf-btn-icon { flex-shrink: 0; opacity: 0.75; color: currentColor; } .pf-btn-share:hover .pf-btn-icon, .pf-btn-share.copied .pf-btn-icon { opacity: 1; } .page-footer-row { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--rule-2); gap: 0.75rem; position: relative; } /* Brand chop pressed on the divider line — a small 屋 seal that acts as the colophon between the CTA row and the page ID row. Ties back to the site name (書屋) and the scholar-box seals above. */ .page-footer-row::before { content: "屋"; position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-cn); font-size: 0.9rem; font-weight: 700; color: var(--papyrus); background: radial-gradient(circle at 30% 32%, rgba(255,255,255,0.1), transparent 55%), var(--seal-color); border-radius: 2.5px; box-shadow: 0 1px 1.5px rgba(28,18,8,0.2); line-height: 1; } .footer-id { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--ink-5); text-transform: uppercase; } .footer-id span { color: var(--ochre); } .footer-back { font-family: var(--font-body); font-size: 0.88rem; color: var(--ink-4); text-decoration: none; transition: color 0.15s; display: inline-flex; align-items: center; gap: 0.3rem; } .footer-back:hover { color: var(--red); } .footer-back:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; border-radius: 2px; color: var(--red); } @media (max-width: 620px) { .page-footer-actions { gap: 1rem; flex-direction: column; align-items: stretch; } .page-footer-buttons { width: 100%; } .pf-btn { flex: 1; justify-content: center; } .page-footer-row { flex-direction: column; gap: 0.55rem; align-items: flex-start; } } /* ── ANIMATIONS ──────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Animate only the first three blocks; the rest just appear so long pages don't feel staged */ .main > *:nth-child(-n+3) { animation: fadeUp 0.5s ease both; } .main > *:nth-child(1) { animation-delay: 0.04s; } .main > *:nth-child(2) { animation-delay: 0.09s; } .main > *:nth-child(3) { animation-delay: 0.14s; } /* ── STROKE ORDER PANEL ──────────────────────────────────── */ .stroke-order { margin: 0 0 2.5rem; padding: 1.2rem 1.4rem; background: var(--papyrus-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; } .so-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .so-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sienna); } .so-controls { display: flex; gap: 0.4rem; } .so-btn { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; padding: 0.35rem 0.75rem; border-radius: var(--radius); background: var(--papyrus); border: 1px solid var(--rule); color: var(--ink-3); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; min-height: 32px; } .so-btn:hover { background: var(--papyrus-3); border-color: var(--red); color: var(--ink); } .so-btn:focus-visible { outline: none; border-color: var(--ochre); box-shadow: 0 0 0 2px rgba(160,100,40,0.3); } .so-stage { grid-column: 1 / -1; width: 220px; height: 220px; margin: 0 auto; background: var(--papyrus); border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; color: var(--ink-5); font-family: var(--font-mono); font-size: 0.7rem; } .so-stage.loading::after { content: 'loading…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-5); } .so-stage.error { color: var(--ink-5); } .so-hint { grid-column: 1 / -1; font-size: 0.78rem; color: var(--ink-5); font-style: italic; text-align: center; margin: 0; } /* ── AUDIO BUTTON (pinyin pronunciation) ─────────────────── */ .audio-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--rule-2); border-radius: 50%; width: 1.7rem; height: 1.7rem; margin-left: 0.5rem; cursor: pointer; font-size: 0.75rem; color: var(--ink-5); vertical-align: middle; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; line-height: 1; padding: 0; -webkit-font-smoothing: antialiased; } .audio-btn:hover { background: var(--red); color: var(--papyrus); border-color: var(--red); transform: scale(1.05); } .audio-btn:focus-visible { outline: none; border-color: var(--ochre); box-shadow: 0 0 0 2px rgba(160,100,40,0.3); } .audio-btn.playing { background: var(--ochre); color: var(--papyrus); border-color: var(--ochre); } /* ── AUTO-LINKED INLINE TERMS ────────────────────────────── */ .auto-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ochre); transition: color 0.15s, border-color 0.15s, background 0.15s; padding: 0 1px; } .auto-link:hover { color: var(--red); border-bottom-color: var(--red); background: rgba(139,26,26,0.06); } .auto-link:focus-visible { outline: none; color: var(--red); border-bottom-color: var(--red); background: rgba(160,100,40,0.12); border-radius: 2px; } /* ── BACK TO TOP ─────────────────────────────────────────── */ .back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ink); color: var(--papyrus); border: 1px solid var(--red); font-size: 1.1rem; font-family: var(--font-mono); cursor: pointer; opacity: 0; transform: translateY(0.5rem); transition: opacity 0.2s, transform 0.2s, background 0.15s; z-index: 150; pointer-events: none; box-shadow: 0 2px 8px rgba(28,18,8,0.2); } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { background: var(--red); } .back-to-top:focus-visible { outline: 2px solid var(--ochre-2); outline-offset: 3px; } /* ── STUB / COMING-SOON STATE ────────────────────────────── */ .entry-card.stub, .entry-card.planned { opacity: 0.5; pointer-events: none; border-style: dashed; background: var(--papyrus); } .stub-chip { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 20px; border: 1px dashed var(--rule); color: var(--ink-5); background: transparent; } /* ── RESPONSIVE ──────────────────────────────────────────── */ /* Tablet: sidebar still visible but narrower; hero glyph smaller */ @media (max-width: 1024px) { :root { --sidebar-w: 180px; } .hero-glyph { font-size: 5.5rem; } .main { padding: 2rem 2rem 5rem 2.5rem; } } /* Mobile: sidebar becomes an overlay sheet; single-column layout */ @media (max-width: 768px) { .shell { grid-template-columns: 1fr; display: block; } .sidebar { position: fixed; top: var(--nav-h); left: 0; right: 0; max-height: calc(100vh - var(--nav-h)); height: auto; overflow-y: auto; border-right: none; border-bottom: 1px solid var(--rule); border-top: 1px solid var(--red); padding: 1.2rem 0 1.5rem; display: none; background: var(--papyrus); box-shadow: 0 8px 20px rgba(28,18,8,0.18); z-index: 180; animation: slideDown 0.18s ease both; } .sidebar.open { display: block; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Sidebar hero collapses on mobile — glyph/title shown, not huge */ .sidebar .toc-glyph { font-size: 2rem; margin-bottom: 0.1rem; } .sidebar .toc-topic { font-size: 0.95rem; } .sidebar .toc-pinyin, .sidebar .toc-topic-en { margin-bottom: 0.8rem; } .toc-toggle { display: inline-block; margin: 0.75rem 1rem 0; } .main { padding: 1.5rem 1.25rem 4rem; max-width: none; } .topic-hero-title { font-size: 2.1rem; } .hero-inner { flex-direction: column; gap: 1rem; } .hero-glyph { font-size: 3.5rem; } .hero-script { padding: 0 0.65rem; } .hero-script-label { font-size: 0.58rem; } .card { padding: 1.1rem 1.1rem 1.1rem 1.3rem; } .card:hover { padding-left: 1.4rem; } .card-en { margin-left: 0; } .scholar { padding: 1.1rem 1.2rem 2.7rem; } .scholar::after { width: 2.1rem; height: 2.1rem; font-size: 1.2rem; right: 0.8rem; bottom: 0.7rem; } .topnav { padding: 0.25rem 0.75rem; } /* Topnav on mobile: brand shortened visually + tighter right-side gap */ .topnav-right { gap: 0.7rem; } .topnav-random { font-size: 0.6rem; letter-spacing: 0.12em; } .topnav-back { font-size: 0.6rem; letter-spacing: 0.12em; } .topnav-brand-sep, .topnav-brand-en { display: none; } /* Larger tap target on mobile — ensures home link is easy to hit with a thumb */ .topnav-brand { padding: 0.5rem 0.9rem 0.5rem 0.5rem; margin-left: -0.35rem; min-height: 44px; min-width: 44px; } .topnav-brand-cn { font-size: 1.25rem; } } /* Small mobile: tighter everything */ @media (max-width: 480px) { .pattern { padding: 0.8rem 1rem; font-size: 0.82rem; } table { font-size: 0.78rem; } thead th { font-size: 0.55rem; padding: 0.5rem 0.7rem; } tbody td { padding: 0.5rem 0.7rem; } .td-cn { font-size: 1rem; } .page-footer { grid-template-columns: 1fr; gap: 0.4rem; text-align: center; } .page-footer .footer-id, .page-footer .footer-back { grid-column: 1; justify-self: center; } .hero-meta { padding-top: 0.5rem; } .hero-pinyin { font-size: 1.4rem; } } /* Accessibility: respect reduced-motion preference */ @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; } .main > *, .hero, .cat-group, .topic-hero { opacity: 1; transform: none; } .back-to-top.visible { opacity: 1; transform: none; } .pn-prev:hover, .pn-next:hover, .start-here-item:hover { transform: none; } .card:hover { padding-left: 1.7rem; } } /* Accessibility: respect prefers-contrast */ @media (prefers-contrast: more) { :root { --rule: rgba(60,40,20,0.45); --rule-2: rgba(60,40,20,0.30); --ink-3: #2a1a0a; --ink-4: #3e2810; --ink-5: #4a3820; } .topnav-back, .topnav-brand { color: var(--papyrus); } .scholar::after { opacity: 1; } .reading-progress-bar { background: var(--red); } .card::before { width: 4px; } } /* Forced colours (Windows High Contrast) */ @media (forced-colors: active) { .scholar::after, .reading-progress-bar { display: none; } .topnav { border-bottom: 2px solid; } } /* ── PRINT ───────────────────────────────────────────────── */ @media print { :root { --papyrus: #fff; --papyrus-2: #fff; --papyrus-3: #fff; } body { background: #fff !important; color: #000 !important; font-size: 11pt; line-height: 1.55; } /* Hide chrome */ .topnav, .reading-progress, .toc-toggle, .sidebar, .back-to-top, .audio-btn, .stroke-order, .prev-next, .related, .footer-back, .skip-link, .filter-bar, .hsk-chips, .filter-suggest, .no-results, .start-here-section, .recent-section, .legend-section, .colophon, .hero-ctas, .index-stats { display: none !important; } /* Single column flow */ .shell { display: block; } .main { padding: 0; max-width: none; } /* Show URLs after links so a printed page stays useful */ a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #666; word-wrap: break-word; } a[href^="#"]::after, a.auto-link::after, .topnav-brand::after { content: ""; } /* Avoid page breaks inside cards / scholar boxes */ .card, .scholar, .pattern, .cy, .example { page-break-inside: avoid; break-inside: avoid; background: #fff !important; border: 1px solid #999 !important; box-shadow: none !important; } .scholar::after { display: none !important; } .section-head { page-break-after: avoid; break-after: avoid; } h1, h2, h3 { page-break-after: avoid; break-after: avoid; color: #000; } /* Hero glyphs print smaller */ .hero-glyph { font-size: 4rem; text-shadow: none; color: #000; } .topic-hero-title { font-size: 2rem; text-shadow: none; color: #000; } /* Remove animations */ *, *::before, *::after { animation: none !important; transition: none !important; } } /* ── PER-CATEGORY THEMING ────────────────────────────────── */ /* * body[data-category] is set at parse time by the inline script in _layout.html. * Each category gets its own accent color applied to: hero bar, topic-hero title, * sidebar TOC active state, section-head .sh-cn, and reading progress bar. */ /* Per-category seal colour — feeds the chop marks, section tabs, and footer chop. Set as a custom property so every descendant picks it up without needing a selector for each surface. */ body[data-category="characters"] { --seal-color: var(--cat-characters); } body[data-category="vocab"] { --seal-color: var(--cat-vocab); } body[data-category="grammar"] { --seal-color: var(--cat-grammar); } body[data-category="religion"] { --seal-color: var(--cat-religion); } body[data-category="philosophy"] { --seal-color: var(--cat-philosophy); } body[data-category="history"] { --seal-color: var(--cat-history); } body[data-category="geography"] { --seal-color: var(--cat-geography); } body[data-category="culture"] { --seal-color: var(--cat-culture); } body[data-category="culinary"] { --seal-color: var(--cat-culinary); } body[data-category="arts"] { --seal-color: var(--cat-arts); } body[data-category="science"] { --seal-color: var(--cat-science); } body[data-category="daily"] { --seal-color: var(--cat-daily); } body[data-category="chengyu"] { --seal-color: var(--cat-chengyu); } /* Characters — deep red (unchanged from base) */ body[data-category="characters"] .hero::after, body[data-category="characters"] .topic-hero::after { background: var(--cat-characters); } body[data-category="characters"] .topic-hero-title { color: var(--cat-characters); } body[data-category="characters"] .toc-list a.active, body[data-category="characters"] .toc-list a:hover { color: var(--cat-characters); border-left-color: var(--cat-characters); background: rgba(139,26,26,0.06); } body[data-category="characters"] .sh-cn { color: var(--cat-characters); } body[data-category="characters"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-characters), #c07830); } body[data-category="characters"] .hero-glyph { color: var(--cat-characters); } /* Vocab — ochre */ body[data-category="vocab"] .hero::after, body[data-category="vocab"] .topic-hero::after { background: var(--cat-vocab); } body[data-category="vocab"] .topic-hero-title { color: var(--cat-vocab); } body[data-category="vocab"] .toc-list a.active, body[data-category="vocab"] .toc-list a:hover { color: var(--cat-vocab); border-left-color: var(--cat-vocab); background: rgba(160,100,40,0.06); } body[data-category="vocab"] .sh-cn { color: var(--cat-vocab); } body[data-category="vocab"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-vocab), #c07830); } /* Grammar — teal */ body[data-category="grammar"] .hero::after, body[data-category="grammar"] .topic-hero::after { background: var(--cat-grammar); } body[data-category="grammar"] .topic-hero-title { color: var(--cat-grammar); } body[data-category="grammar"] .toc-list a.active, body[data-category="grammar"] .toc-list a:hover { color: var(--cat-grammar); border-left-color: var(--cat-grammar); background: rgba(92,56,33,0.07); } body[data-category="grammar"] .sh-cn { color: var(--cat-grammar); } body[data-category="grammar"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-grammar), #8c5832); } /* Religion — indigo-violet */ body[data-category="religion"] .hero::after, body[data-category="religion"] .topic-hero::after { background: var(--cat-religion); } body[data-category="religion"] .topic-hero-title { color: var(--cat-religion); } body[data-category="religion"] .toc-list a.active, body[data-category="religion"] .toc-list a:hover { color: var(--cat-religion); border-left-color: var(--cat-religion); background: rgba(92,61,122,0.07); } body[data-category="religion"] .sh-cn { color: var(--cat-religion); } body[data-category="religion"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-religion), #7a5a9a); } /* Philosophy — forest green */ body[data-category="philosophy"] .hero::after, body[data-category="philosophy"] .topic-hero::after { background: var(--cat-philosophy); } body[data-category="philosophy"] .topic-hero-title { color: var(--cat-philosophy); } body[data-category="philosophy"] .toc-list a.active, body[data-category="philosophy"] .toc-list a:hover { color: var(--cat-philosophy); border-left-color: var(--cat-philosophy); background: rgba(58,92,58,0.07); } body[data-category="philosophy"] .sh-cn { color: var(--cat-philosophy); } body[data-category="philosophy"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-philosophy), #5a8a5a); } /* History — amber-brown */ body[data-category="history"] .hero::after, body[data-category="history"] .topic-hero::after { background: var(--cat-history); } body[data-category="history"] .topic-hero-title { color: var(--cat-history); } body[data-category="history"] .toc-list a.active, body[data-category="history"] .toc-list a:hover { color: var(--cat-history); border-left-color: var(--cat-history); background: rgba(107,68,32,0.07); } body[data-category="history"] .sh-cn { color: var(--cat-history); } body[data-category="history"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-history), #a06428); } /* Geography — slate teal */ body[data-category="geography"] .hero::after, body[data-category="geography"] .topic-hero::after { background: var(--cat-geography); } body[data-category="geography"] .topic-hero-title { color: var(--cat-geography); } body[data-category="geography"] .toc-list a.active, body[data-category="geography"] .toc-list a:hover { color: var(--cat-geography); border-left-color: var(--cat-geography); background: rgba(42,92,107,0.07); } body[data-category="geography"] .sh-cn { color: var(--cat-geography); } body[data-category="geography"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-geography), #1a7a8a); } /* Culture — terracotta */ body[data-category="culture"] .hero::after, body[data-category="culture"] .topic-hero::after { background: var(--cat-culture); } body[data-category="culture"] .topic-hero-title { color: var(--cat-culture); } body[data-category="culture"] .toc-list a.active, body[data-category="culture"] .toc-list a:hover { color: var(--cat-culture); border-left-color: var(--cat-culture); background: rgba(142,74,110,0.07); } body[data-category="culture"] .sh-cn { color: var(--cat-culture); } body[data-category="culture"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-culture), #b67090); } /* Culinary — warm spice brown */ body[data-category="culinary"] .hero::after, body[data-category="culinary"] .topic-hero::after { background: var(--cat-culinary); } body[data-category="culinary"] .topic-hero-title { color: var(--cat-culinary); } body[data-category="culinary"] .toc-list a.active, body[data-category="culinary"] .toc-list a:hover { color: var(--cat-culinary); border-left-color: var(--cat-culinary); background: rgba(122,74,16,0.07); } body[data-category="culinary"] .sh-cn { color: var(--cat-culinary); } body[data-category="culinary"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-culinary), #c07820); } /* Arts — violet */ body[data-category="arts"] .hero::after, body[data-category="arts"] .topic-hero::after { background: var(--cat-arts); } body[data-category="arts"] .topic-hero-title { color: var(--cat-arts); } body[data-category="arts"] .toc-list a.active, body[data-category="arts"] .toc-list a:hover { color: var(--cat-arts); border-left-color: var(--cat-arts); background: rgba(74,40,120,0.07); } body[data-category="arts"] .sh-cn { color: var(--cat-arts); } body[data-category="arts"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-arts), #7a50b0); } /* Science — deep blue-teal */ body[data-category="science"] .hero::after, body[data-category="science"] .topic-hero::after { background: var(--cat-science); } body[data-category="science"] .topic-hero-title { color: var(--cat-science); } body[data-category="science"] .toc-list a.active, body[data-category="science"] .toc-list a:hover { color: var(--cat-science); border-left-color: var(--cat-science); background: rgba(26,74,92,0.07); } body[data-category="science"] .sh-cn { color: var(--cat-science); } body[data-category="science"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-science), #2a7090); } /* Daily — dark gold */ body[data-category="daily"] .hero::after, body[data-category="daily"] .topic-hero::after { background: var(--cat-daily); } body[data-category="daily"] .topic-hero-title { color: var(--cat-daily); } body[data-category="daily"] .toc-list a.active, body[data-category="daily"] .toc-list a:hover { color: var(--cat-daily); border-left-color: var(--cat-daily); background: rgba(92,74,26,0.07); } body[data-category="daily"] .sh-cn { color: var(--cat-daily); } body[data-category="daily"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-daily), #9a8020); } /* Chengyu — dark crimson */ body[data-category="chengyu"] .hero::after, body[data-category="chengyu"] .topic-hero::after { background: var(--cat-chengyu); } body[data-category="chengyu"] .topic-hero-title { color: var(--cat-chengyu); } body[data-category="chengyu"] .toc-list a.active, body[data-category="chengyu"] .toc-list a:hover { color: var(--cat-chengyu); border-left-color: var(--cat-chengyu); background: rgba(107,26,42,0.07); } body[data-category="chengyu"] .sh-cn { color: var(--cat-chengyu); } body[data-category="chengyu"] .reading-progress-bar { background: linear-gradient(90deg, var(--cat-chengyu), #a03050); } /* ── VIEW TRANSITIONS (progressive enhancement) ─────────── */ @view-transition { navigation: auto; }