/* Kanji Phonetics — styles specific to phonetics.html. "Light jade" theme: this page's own scoped color palette, entirely separate from the shared style.css :root tokens (same pattern as game.css's .game-main "digital hanafuda" theme). A pale jade/celadon paper ground — the color of aged bronze seen as glaze rather than as patina on dark metal — paired with the same warm copper accent (the un-oxidized metal), so this still reads distinctly from Word Match's burgundy/gold page without doubling up on a red accent. Scoped to .phonetics-main (this page's whole content area) AND #phonetics-info-modal (the explainer modal). The modal is a DOM sibling of .phonetics-main, not a descendant — it lives at the .container level in phonetics.html, same as every page's modal-overlay — so it needs the palette named on it explicitly too. Its position:fixed layout doesn't care where it sits in the DOM, so this is purely about which element the CSS custom properties are declared on; custom properties cascade to descendants of whichever selector defines them, not by DOM proximity to .phonetics-main. body:has(.phonetics-main) additionally repaints the page's own (shared style.css rule: `body { background: var(--bg-page); }`) so the theme is full-bleed instead of a boxed column on a differently-colored body outside .container's 1200px width — :has() here only ever matches on this page, since .phonetics-main only exists in phonetics.html. The shared header/footer keep their own separate --header-* masthead tokens (untouched). The JLPT level tokens (--jlpt-n5..--jlpt-n1) and the rank-intensity mechanism are untouched too — see their own comments further down this file. This file was originally authored as a DARK theme, so going light was not just a token swap. Everything that assumed a dark ground had to be re-checked and, where it failed, changed — each such spot is commented inline below with the measured contrast ratio. The recurring pattern (same as the earlier reading.css light-flip) is light-on-dark accent text: --accent-light reads fine as text on a dark panel but lands around 2.2-2.6:1 on this page's pale surfaces, so text that used it is now --accent-dark (5.2-6.7:1). */ body:has(.phonetics-main), .phonetics-main, #phonetics-info-modal { --bg-page: #eaf1ec; --bg-surface: #f7fbf8; --bg-surface-alt: #dde9e0; --border: #c6d8cb; --border-strong: #a8c0af; --text-primary: #1c2f25; --text-secondary: #566b5d; --text-muted: #6a7f72; --accent: #b35f2f; --accent-light: #d1834f; --accent-dark: #8c4620; --accent-tint: rgba(179, 95, 47, 0.12); /* Deliberately NOT the usual (--accent-light -> --accent) pair used on the other pages. .auth-btn (style.css, shared sitewide, not editable here) hardcodes a white label on var(--accent-gradient); white on --accent-light is only 2.97:1, so the canonical pair would fail at the gradient's light end. Shifting the ramp one notch darker (--accent -> --accent-dark) keeps white at 4.57:1 -> 6.97:1 across the whole fill, which is a cleaner fix than overriding the button's label color per-page. */ --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-dark)); --accent-gradient-hover: linear-gradient(135deg, var(--accent-dark), #6f3618); --shadow-sm: 0 2px 10px rgba(28, 47, 37, 0.08); --shadow-md: 0 14px 32px rgba(28, 47, 37, 0.16); } body:has(.phonetics-main) { background: var(--bg-page); } /* .nav-current now lives in style.css (shared header styling). */ /* --------------------------------------------------------------------- Page shell --------------------------------------------------------------------- */ /* Top padding = the fixed masthead's rendered height + the ~25px of visual clearance the page has always had. The masthead is now one 64px row instead of two rows totalling 115px, so this drops from 140px. */ .phonetics-main { padding: 89px 40px 100px; min-height: 100vh; /* The top wash was a dark olive (#2c3327) that only made sense against the old near-black ground — on the pale jade it would read as a dirty smear. Same gesture, rebuilt as a faint warm copper haze off the page's own accent. */ background: radial-gradient(ellipse 90% 50% at 50% -8%, rgba(179, 95, 47, 0.10) 0%, transparent 60%), var(--bg-page); color: var(--text-primary); } .phonetics-title { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; margin: 0 0 12px; } .phonetics-subtitle { color: var(--text-secondary); max-width: 720px; line-height: 1.6; margin: 0 0 8px; } /* (.phonetics-credit is gone — the Kanjium / Tatoeba / kanji-frequency attributions it held are now in the sitewide footer, since Word Match ships the same Tatoeba sentences and the CC BY / CC BY-SA credit is a license obligation on every page, not just this one.) */ .phonetics-section.hidden { display: none; } /* --------------------------------------------------------------------- Content-pane transitions (family-list <-> family-tree) 0.28s / ease matches the site's existing 0.2s-0.3s ease transition convention (see .level-nav-item, .family-item, .modal-card usage in this file/style.css). `.hidden` still does the final display:none (kept for a11y / no layout cost when off-screen); these classes drive the opacity/transform tween that happens before `.hidden` is (re)applied. --------------------------------------------------------------------- */ .phonetics-section { transition: opacity 0.28s ease, transform 0.28s ease; opacity: 1; transform: translateY(0) scale(1); } .phonetics-section.phonetics-section-enter { opacity: 0; transform: translateY(14px) scale(0.98); } .phonetics-section.phonetics-section-leave { opacity: 0; transform: translateY(-10px) scale(0.98); } @media (prefers-reduced-motion: reduce) { .phonetics-section, .tree-chip, .tree-popover, .morph-stage { transition: none !important; animation: none !important; } } /* --------------------------------------------------------------------- Clickable page title -> explainer modal trigger --------------------------------------------------------------------- */ .phonetics-title-trigger { background: none; border: none; padding: 8px 0; margin: -8px 0 4px; display: inline-flex; align-items: baseline; gap: 10px; cursor: pointer; font-family: inherit; color: inherit; text-align: left; } .phonetics-title-trigger .phonetics-title { margin: 0; transition: color 0.2s ease; } /* Light-flip: --accent-light on the page ground is 2.59:1. --accent-dark is 6.07:1. */ .phonetics-title-trigger:hover .phonetics-title { color: var(--accent-dark); } .phonetics-title-info { font-size: 1.3rem; color: var(--text-muted); transition: color 0.2s ease; } .phonetics-title-trigger:hover .phonetics-title-info { color: var(--accent-dark); } .phonetics-info-btn { margin: 4px 0 20px; display: inline-block; } /* Light-flip: --border against the page ground is only 1.30:1, so a 1px --border outline left this button with no perceptible edge at all. --text-muted gives 3.74:1, which is the 3:1 floor for a control boundary while still reading as a quiet "ghost" outline. */ .ghost-btn { background: none; border: 1px solid var(--text-muted); color: var(--text-primary); padding: 8px 16px; font-family: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; } /* Light-flip: this is the textbook failure — --accent-light text on an --accent-tint chip is fine on a dark ground but 2.23:1 here. --accent-dark on the same chip is 5.24:1. */ .ghost-btn:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-tint); } /* --------------------------------------------------------------------- Two-column layout: a persistent sidebar (intro + JLPT level nav) and a content pane (family list or family tree) to its right. The sidebar stays mounted for the page's whole life — only the content pane swaps between the list/tree sections — so a level can be picked from either view without a separate "back to levels" step. --------------------------------------------------------------------- */ .phonetics-layout { display: flex; align-items: flex-start; gap: 40px; } .phonetics-sidebar { flex: 0 0 216px; width: 216px; position: sticky; /* Clears the fixed masthead, which is now one 64px row rather than two totalling 115px. */ top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; display: flex; flex-direction: column; } .phonetics-sidebar .phonetics-title { font-size: 1.5rem; } .phonetics-sidebar .phonetics-subtitle { font-size: 0.82rem; } .phonetics-content { flex: 1 1 auto; min-width: 0; } /* --------------------------------------------------------------------- Level nav (sidebar) — simple vertical rows rather than cards, since they now live in a narrow rail instead of a full-width grid. The active row gets the site's own accent tint (matching how the shared header marks .nav-current) plus a per-level JLPT-hue left border, so the N5..N1 color spectrum used everywhere else on the site also reads here. JLPT colors come from the shared style.css [data-level] tokens (--jlpt-n5..--jlpt-n1, untouched). --------------------------------------------------------------------- */ .level-nav { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 24px; } .level-nav-item { display: flex; align-items: baseline; gap: 8px; text-align: left; background: none; border: none; border-left: 3px solid var(--border); padding: 10px 12px; cursor: pointer; font-family: inherit; color: var(--text-secondary); transition: all 0.2s var(--ease-out); } .level-nav-item:hover { background: var(--accent-tint); color: var(--text-primary); } .level-nav-item.active { background: var(--accent-tint); color: var(--text-primary); border-left-width: 4px; } .level-nav-code { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); } .level-nav-label { font-size: 0.78rem; color: var(--text-muted); } /* Inactive rows carry a muted version of their level's hue. On the old dark theme "muted" meant mixing 45% of the hue into the dark --border, which landed around 2.7:1. Doing the same thing now that --border is a pale jade LIGHTENS the hue instead, dropping N5 to 2.00:1 and N4 (a mid gold) to 1.82:1 — five near-identical pastels. On a light ground the equivalent of "muted" is desaturating toward the ink, so the mix base is --text-secondary and the hue's share goes up: that restores 2.7-6.9:1 and keeps five separable hues (green / gold / orange / rust / plum). Active rows still use the pure --jlpt-* token. */ .level-nav-item[data-level="N5"] { border-left-color: color-mix(in srgb, var(--jlpt-n5) 70%, var(--text-secondary)); } .level-nav-item[data-level="N4"] { border-left-color: color-mix(in srgb, var(--jlpt-n4) 70%, var(--text-secondary)); } .level-nav-item[data-level="N3"] { border-left-color: color-mix(in srgb, var(--jlpt-n3) 70%, var(--text-secondary)); } .level-nav-item[data-level="N2"] { border-left-color: color-mix(in srgb, var(--jlpt-n2) 70%, var(--text-secondary)); } .level-nav-item[data-level="N1"] { border-left-color: color-mix(in srgb, var(--jlpt-n1) 70%, var(--text-secondary)); } .level-nav-item.active[data-level="N5"] { border-left-color: var(--jlpt-n5); } .level-nav-item.active[data-level="N4"] { border-left-color: var(--jlpt-n4); } .level-nav-item.active[data-level="N3"] { border-left-color: var(--jlpt-n3); } .level-nav-item.active[data-level="N2"] { border-left-color: var(--jlpt-n2); } .level-nav-item.active[data-level="N1"] { border-left-color: var(--jlpt-n1); } /* --------------------------------------------------------------------- Family list (ranked phonetic families within a level) --------------------------------------------------------------------- */ .family-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; max-width: 640px; } /* Rank gradation: a single-hue sequential ramp (the site accent, at decreasing opacity) rather than five arbitrary colors — rank is a continuous "how far down the list" quantity, not a category, so it gets one hue that fades rather than distinct hues. --rank-intensity is set per item in phonetics.js (1.0 at #1, fading to a 0.12 floor by ~18th place so a 300+ item list doesn't stretch to invisible). */ .family-item { position: relative; display: flex; align-items: center; gap: 18px; text-align: left; background: linear-gradient(160deg, var(--bg-surface-alt), var(--bg-surface) 55%); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 14px 20px 14px 24px; cursor: pointer; font-family: inherit; color: var(--text-primary); transition: all 0.2s ease; overflow: hidden; } .family-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); opacity: var(--rank-intensity, 1); } .family-item:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); } .family-rank { flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); min-width: 28px; } .family-phonetic { flex: 0 0 auto; font-size: 1.8rem; font-weight: 700; min-width: 48px; text-align: center; } .family-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Light-flip: --accent-light on the card's own pale fill is 2.38:1; --accent-dark is 5.58:1. */ .family-reading { font-weight: 600; color: var(--accent-dark); font-size: 0.95rem; } .family-count { font-size: 0.82rem; color: var(--text-secondary); } /* --------------------------------------------------------------------- Family tree --------------------------------------------------------------------- */ .tree-header { margin-top: 16px; } .tree-title { display: flex; align-items: baseline; gap: 14px; } /* Light-flip: --accent-light on the page ground is 2.59:1; --accent-dark is 6.07:1. */ .tree-title-reading { font-size: 1.2rem; font-weight: 600; color: var(--accent-dark); } /* Radial diagram: root phonetic in the center, member kanji as chips arranged in a circle (or two concentric rings for large families) around it, joined to the center by straight SVG spoke lines. Positions are computed in JS (phonetics.js: layoutRadialTree) via trigonometry off the canvas's own measured size, then applied as --tx/--ty custom properties consumed here. */ .tree-canvas { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 36px auto 0; --chip-size: 64px; --root-size: 96px; } .tree-canvas[data-tier="cozy"] { --chip-size: 54px; --root-size: 86px; } .tree-canvas[data-tier="dense"] { --chip-size: 44px; --root-size: 74px; } .tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; } /* Light-flip: the spokes were --border-strong, which read at 2.58:1 against the old dark ground but collapses to 1.69:1 on the pale one — the radial diagram lost its connecting lines entirely. --text-muted puts them back at 3.74:1. */ .tree-line { fill: none; stroke: var(--text-muted); stroke-width: 1.5; } .tree-root-node { position: absolute; top: 50%; left: 50%; width: var(--root-size); height: var(--root-size); transform: translate(-50%, -50%); border-radius: 50%; /* Reads like a stamped seal face: a warm copper fill under a carved rim, with an inset highlight/shadow pair standing in for a bevel cut into stone rather than a flat disc. Light-flip: the fill ramp moved one notch darker (was --accent-light -> --accent). On a pale page a light copper disc barely separates from the ground, and the cream glyph on it only made 4.38:1; against this ramp the glyph is 6.68:1 and the disc reads as a solid stamp pressed onto the paper. */ background: radial-gradient(circle at 34% 28%, var(--accent), var(--accent-dark) 70%); border: 3px solid var(--accent-dark); box-shadow: var(--shadow-md), inset 0 2px 3px rgba(255, 255, 255, 0.18), inset 0 -4px 8px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 4px; z-index: 3; } /* Cream-on-copper, like the negative-space characters cut into a hanko seal face, rather than a same-hue dark-on-copper pairing that would fight the seal disc's own fill. Light-flip: this used to be var(--text-primary), which WAS the cream on the dark theme — after the flip that token is near-black ink, which would have turned the seal inside out (and only reached 3.10:1 on the copper). --bg-surface is this theme's near-white, so the intent survives the flip literally instead of by accident. */ .tree-root-kanji { font-size: 1.7rem; font-weight: 700; color: var(--bg-surface); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); line-height: 1.1; } .tree-root-reading { font-size: 0.64rem; font-weight: 600; color: var(--bg-surface); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); letter-spacing: 0.02em; } .tree-chip { position: absolute; top: 50%; left: 50%; width: var(--chip-size); height: var(--chip-size); transform: translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px)); border-radius: 50%; background: linear-gradient(160deg, var(--bg-surface-alt), var(--bg-surface) 60%); border: 2px solid var(--border-strong); /* Light-flip: the inset bevel was tuned for a dark chip — a 30%-black inner shade under a 5%-white highlight. On a near-white chip that black wash just reads as grime, so the shade drops to a 10% wash of the page's own ink and the highlight comes up to be visible at all. */ box-shadow: var(--shadow-sm), inset 0 1px 2px rgba(255, 255, 255, 0.7), inset 0 -3px 6px rgba(28, 47, 37, 0.10); display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease; z-index: 2; padding: 0; } .tree-canvas[data-tier="dense"] .tree-chip { font-size: 1rem; } .tree-chip:hover { border-color: var(--accent); box-shadow: var(--shadow-md); } /* Light-flip: accent text on an accent-tint chip again — --accent-light was 2.2:1 here. */ .tree-chip.active { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 4px var(--accent-tint), var(--shadow-md); color: var(--accent-dark); transform: translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px)) scale(1.15); } /* Light-flip: --accent-light as a rim is 2.84:1 against the chip fill, under the 3:1 floor for a non-text indicator. --accent-dark is 6.68:1 and still reads as a different state from the plain --accent rim used on hover/active (which it also outranks in weight, at 3px vs 2px). */ .tree-chip-current-level { border-width: 3px; border-color: var(--accent-dark); } .tree-chip-dot { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg-surface); background: var(--text-muted); } .tree-chip-dot[data-level="N5"] { background: var(--jlpt-n5); } .tree-chip-dot[data-level="N4"] { background: var(--jlpt-n4); } .tree-chip-dot[data-level="N3"] { background: var(--jlpt-n3); } .tree-chip-dot[data-level="N2"] { background: var(--jlpt-n2); } .tree-chip-dot[data-level="N1"] { background: var(--jlpt-n1); } /* --------------------------------------------------------------------- Member popover — opens in place at the clicked chip's own position on the circle (phonetics.js: positionPopoverAt), instead of a separate panel elsewhere on the page. Positioned via left/top in JS, pushed outward along the chip's own angle from the root, and clamped to the viewport so chips near the edge of the circle never clip off-screen. Left/top are included in the transition so switching directly from one open chip to another slides smoothly to the new spot. --------------------------------------------------------------------- */ .tree-popover { position: absolute; top: 0; left: 0; width: 280px; max-width: min(300px, 86vw); background: var(--bg-surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); box-shadow: var(--shadow-md); padding: 18px 20px; z-index: 5; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.4); transform-origin: var(--pop-origin-x, 50%) var(--pop-origin-y, 50%); transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), left 0.24s ease, top 0.24s ease; } .tree-popover.open { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); } .tree-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .tree-detail-kanji { font-size: 2.1rem; font-weight: 700; line-height: 1.1; } .tree-detail-level { flex: 0 0 auto; background: var(--accent); color: #ffffff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; padding: 3px 8px; } .tree-detail-level[data-level="N5"] { background: var(--jlpt-n5); } .tree-detail-level[data-level="N4"] { background: var(--jlpt-n4); } .tree-detail-level[data-level="N3"] { background: var(--jlpt-n3); } .tree-detail-level[data-level="N2"] { background: var(--jlpt-n2); } .tree-detail-level[data-level="N1"] { background: var(--jlpt-n1); } .tree-detail-readings { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 0.86rem; } .tree-reading-on { color: var(--text-primary); font-weight: 600; } .tree-reading-kun { color: var(--text-secondary); } .tree-detail-meaning { margin: 10px 0 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.4; } .tree-example { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; } .tree-example-jp { margin: 0 0 3px; font-size: 0.92rem; line-height: 2.2; } .tree-example-jp rt { font-size: 0.55em; font-weight: 400; color: var(--text-muted); user-select: none; } .tree-example-en { margin: 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; } .tree-example-none { border-top: 1px solid var(--border); margin: 12px 0 0; padding-top: 10px; font-size: 0.8rem; color: var(--text-muted); font-style: italic; } /* --------------------------------------------------------------------- Explainer modal: component -> phonetic -> kanji -> combination morph --------------------------------------------------------------------- */ .phonetics-info-card { max-width: 460px; } .morph-demo { margin: 4px 0 18px; } .morph-stages { position: relative; height: 170px; } .morph-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0; transform: scale(0.9); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .morph-stage.active { opacity: 1; transform: scale(1); pointer-events: auto; } .morph-glyph { font-size: 3.1rem; font-weight: 700; color: var(--text-primary); line-height: 1; } /* Light-flip: 0.35 alpha of the old cream ink on the dark card gave ~2.8:1 for this deliberately-faint "before" glyph. The same alpha of dark ink on a near-white card is only 2.0:1 — too faint to register at all. 0.5 restores ~3.0:1, i.e. the original impression. */ .morph-glyph-component { opacity: 0.5; font-weight: 400; } /* Light-flip: --accent-light is 2.84:1 on the modal card, below even the 3:1 large-text floor; --accent is 4.38:1, which this 2.5rem display glyph clears comfortably. */ .morph-glyph-word { font-size: 2.5rem; color: var(--accent); } .morph-glyph-row { display: flex; align-items: baseline; gap: 10px; } /* Light-flip: 1.1rem body-weight text needs the full 4.5:1, so --accent-dark (6.68:1) rather than --accent-light (2.84:1) or even --accent (4.38:1). */ .morph-reading { font-size: 1.1rem; font-weight: 600; color: var(--accent-dark); } .morph-sub { margin: 0; font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.02em; } .morph-caption { margin: 4px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); } .morph-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; } .morph-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: background 0.2s ease, transform 0.2s ease; } .morph-dot.active { background: var(--accent); transform: scale(1.35); } .phonetics-info-text { margin: 4px 0 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } /* --------------------------------------------------------------------- Responsive --------------------------------------------------------------------- */ /* Below ~860px a fixed 216px sidebar starts squeezing the content pane too hard, so it collapses into a horizontal bar above the content instead: the intro copy stays put (already narrow enough to read full-width) but the level nav itself becomes a scrollable row of pill-like tabs, echoing the same left-border-as-active-indicator language but rotated to a bottom-border since rows are now side-by-side instead of stacked. */ @media (max-width: 860px) { .phonetics-layout { flex-direction: column; gap: 8px; } .phonetics-sidebar { position: static; width: 100%; flex: none; max-height: none; overflow-y: visible; } .level-nav { flex-direction: row; overflow-x: auto; gap: 8px; margin: 16px 0 20px; padding-bottom: 4px; } .level-nav-item { flex: 0 0 auto; border-left: none; border-bottom: 3px solid var(--border); white-space: nowrap; } .level-nav-item.active { border-left: none; border-bottom-width: 4px; } .level-nav-item[data-level="N5"] { border-left-color: initial; border-bottom-color: color-mix(in srgb, var(--jlpt-n5) 70%, var(--text-secondary)); } .level-nav-item[data-level="N4"] { border-left-color: initial; border-bottom-color: color-mix(in srgb, var(--jlpt-n4) 70%, var(--text-secondary)); } .level-nav-item[data-level="N3"] { border-left-color: initial; border-bottom-color: color-mix(in srgb, var(--jlpt-n3) 70%, var(--text-secondary)); } .level-nav-item[data-level="N2"] { border-left-color: initial; border-bottom-color: color-mix(in srgb, var(--jlpt-n2) 70%, var(--text-secondary)); } .level-nav-item[data-level="N1"] { border-left-color: initial; border-bottom-color: color-mix(in srgb, var(--jlpt-n1) 70%, var(--text-secondary)); } .level-nav-item.active[data-level="N5"] { border-bottom-color: var(--jlpt-n5); } .level-nav-item.active[data-level="N4"] { border-bottom-color: var(--jlpt-n4); } .level-nav-item.active[data-level="N3"] { border-bottom-color: var(--jlpt-n3); } .level-nav-item.active[data-level="N2"] { border-bottom-color: var(--jlpt-n2); } .level-nav-item.active[data-level="N1"] { border-bottom-color: var(--jlpt-n1); } } @media (max-width: 968px) { .phonetics-main { /* 56px mobile masthead + the same ~25px clearance (was 130px for the 105px bar). */ padding: 81px 20px 80px; } .family-item { gap: 12px; padding: 12px 14px; } .tree-canvas { max-width: 360px; --chip-size: 52px; --root-size: 80px; } .tree-canvas[data-tier="cozy"] { --chip-size: 44px; --root-size: 72px; } .tree-canvas[data-tier="dense"] { --chip-size: 36px; --root-size: 62px; } .tree-popover { width: 240px; padding: 16px; } }