:root { --paper: #f6ecd5; --paper-2: #fbf5e6; --paper-edge: #ead9b2; --paper-shadow: rgba(100,72,30,0.10); --ink: #3a2818; --ink-2: #6b5740; --ink-3: #9a8869; --ink-4: #c2b294; --gold: #b48a4a; --gold-dark: #8d6630; --gold-soft: #d9c191; --sage: #7a8f6e; --sage-soft: #b9c4a6; --rose: #c08a8a; --accent: var(--gold); --accent-soft: var(--gold-soft); /* The hinomaru vermilion (the logo's sun). 18 declarations referenced this token before it was ever defined — they silently fell back to #c34b30 fallbacks or currentColor. Defined here so they finally resolve as designed. */ --accent-vermilion: #c34b30; --serif-jp: 'Shippori Mincho', 'Noto Serif JP', 'Hiragino Mincho Pro', serif; /* Role-based JP font tokens — let each typography slot be themed independently. Defaults are deliberate: brush for titles (calligraphic page headers), mincho for menus + body (legible at small sizes), Garamond italic for English menu sub-labels. */ --font-title: 'Yuji Syuku', 'Kaisei Decol', 'Hina Mincho', 'Shippori Mincho', serif; --font-menu-ja: var(--serif-jp); --font-menu-en: 'EB Garamond', Georgia, serif; --font-body: var(--serif-jp); } /* Body font theme — switches `--serif-jp` (the body / "rest of the site" stack) based on user choice. */ html[data-font-body="gothic"] { --serif-jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif; } html[data-font-body="kyokasho"] { --serif-jp: 'Klee One', 'Shippori Mincho', 'Hiragino Mincho Pro', serif; } html[data-font-body="brush"] { --serif-jp: 'Yuji Syuku', 'Kaisei Decol', 'Hina Mincho', 'Shippori Mincho', serif; } html[data-font-body="mincho"] { --serif-jp: 'Shippori Mincho', 'Noto Serif JP', 'Hiragino Mincho Pro', serif; } html[data-font-body="noto"] { --serif-jp: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif; } /* Per-role font themes — title / menu-ja / menu-en each have their own attribute. menu-en falls back to Latin font choices since it sets English label typography. */ html[data-font-title="mincho"] { --font-title: 'Shippori Mincho', 'Noto Serif JP', serif; } html[data-font-title="gothic"] { --font-title: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif; } html[data-font-title="kyokasho"] { --font-title: 'Klee One', 'Shippori Mincho', serif; } html[data-font-title="brush"] { --font-title: 'Yuji Syuku', 'Kaisei Decol', 'Hina Mincho', 'Shippori Mincho', serif; } html[data-font-title="noto"] { --font-title: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif; } html[data-font-menu-ja="mincho"] { --font-menu-ja: 'Shippori Mincho', 'Noto Serif JP', serif; } html[data-font-menu-ja="gothic"] { --font-menu-ja: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif; } html[data-font-menu-ja="kyokasho"] { --font-menu-ja: 'Klee One', 'Shippori Mincho', serif; } html[data-font-menu-ja="brush"] { --font-menu-ja: 'Yuji Syuku', 'Kaisei Decol', 'Hina Mincho', serif; } html[data-font-menu-ja="noto"] { --font-menu-ja: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif; } html[data-font-menu-en="garamond"] { --font-menu-en: 'EB Garamond', Georgia, serif; } html[data-font-menu-en="sans"] { --font-menu-en: 'Inter', 'Helvetica Neue', system-ui, sans-serif; } html[data-font-menu-en="caveat"] { --font-menu-en: 'Caveat', cursive; } html[data-font-menu-en="mincho"] { --font-menu-en: 'Shippori Mincho', 'Noto Serif JP', serif; } html[data-font-menu-en="noto"] { --font-menu-en: 'Noto Sans', 'Helvetica Neue', system-ui, sans-serif; } /* Backward-compat alias: legacy `data-font` attribute (used by the older single-knob settings) still themes the body stack. */ html[data-font="gothic"] { --serif-jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif; } html[data-font="kyokasho"] { --serif-jp: 'Klee One', 'Shippori Mincho', 'Hiragino Mincho Pro', serif; } html[data-font="brush"] { --serif-jp: 'Yuji Syuku', 'Kaisei Decol', 'Hina Mincho', 'Shippori Mincho', serif; } html[data-font="noto"] { --serif-jp: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif; } :root { --sans-jp: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif; --serif: 'EB Garamond', Georgia, serif; --hand: 'Caveat', cursive; --pad-page: 56px; --content-max: 980px; } *, *::before, *::after { box-sizing: border-box; } /* ─── Global scrollbar — paper/parchment book style ────────────────── The same thin gold-on-cream scrollbar that ships on the in-card panels is the site-wide default — applies to every scrollable element, on every page, by default. Individual components can still override the width or color if they need a custom feel. Covers both Firefox (scrollbar-*) and Chromium/Safari (::-webkit-scrollbar). */ * { scrollbar-width: thin; scrollbar-color: var(--paper-edge) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--paper-edge); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); } ::-webkit-scrollbar-corner { background: transparent; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 16px; line-height: 1.5; background-image: radial-gradient(circle at 20% 20%, rgba(180,138,74,0.06), transparent 60%), radial-gradient(circle at 80% 80%, rgba(122,143,110,0.05), transparent 60%); background-attachment: fixed; } body { background-image: radial-gradient(circle at 20% 20%, rgba(180,138,74,0.06), transparent 60%), radial-gradient(circle at 80% 80%, rgba(122,143,110,0.05), transparent 60%); } img { display: block; max-width: 100%; } /* ─── layout shell ──────────────────────────────────────────────────── */ .app { display: grid; grid-template-columns: 188px 1fr; min-height: 100vh; position: relative; z-index: 1; } .main { padding: var(--pad-page); min-width: 0; overflow-x: hidden; position: relative; /* anchor the ::before context-bg layer below */ } /* Context background — when a section (e.g. vocab/eating-out) has its own bg folder, JS sets --ctx-bg-url on .main with the picked image. The ::before paints it as a soft atmospheric layer at the back of the main content, multiply-blended into the paper so only the illustration's pigments register (white field dissolves). 70% opacity tones it down further so the cards above stay primary. When --ctx-bg-url is unset (most pages), the ::before stays transparent and contributes nothing. The element box (::before) still fills .main so the bg is CLIPPED to the content column (sidebar stays clean). But the bg IMAGE is sized + anchored to the viewport via `background-attachment: fixed`, so long scrollable pages don't stretch the image vertically — it stays at viewport size with proper aspect ratio, parked behind the content while it scrolls past. The illustration is always visible at its intended size, never cropped to a thin band by tall content. */ .main::before { content: ""; position: absolute; inset: 0; background-image: var(--ctx-bg-url, none); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; mix-blend-mode: multiply; opacity: 0.55; pointer-events: none; z-index: 0; transition: opacity .4s ease; } .main > * { position: relative; z-index: 1; } .main-inner { max-width: var(--content-max); margin: 0 auto; } /* Stepper host — sits as a sibling of .main-inner, INSIDE .main, as a regular block (no max-width, no flex container). The inner .stepper paints its own paper backdrop and uses position: sticky to keep the nav visible while content below scrolls. Only used on vocab pages; :empty collapses the space for every other section. */ .main-stepper:empty { display: none; } /* Vocab: drop the .main top padding so the stepper hugs the viewport top. .main-inner still does its own block-level centering (max-width + margin: 0 auto), so the content below stays in its 980px lane while the stepper above takes the full chrome width. EXCEPTION: when the current vocab page has NO stepper (multi-chain hubs like yatai, isFoodGallery books, isExperience launchers), the #main-stepper is empty and would otherwise leave the content flush against the viewport top. The :has(:empty) selector restores normal top padding for those pages. */ .app.show-vocab-sidebar .main { padding-top: 0; } .app.show-vocab-sidebar .main:has(#main-stepper:empty) { padding-top: var(--pad-page); } @media (max-width: 760px) { .app { grid-template-columns: 1fr; } .sidebar { position: sticky; top: 0; width: 100%; min-height: 0; padding: 12px; z-index: 20; } .sidebar-inner { flex-direction: row !important; align-items: center; gap: 8px !important; } .brand { display: none; } .nav-list { display: flex !important; flex-direction: row !important; gap: 6px !important; flex: 1; overflow-x: auto; } .nav-list .bookmark { min-width: 96px; flex: 0 0 auto; } .sidebar-foot { display: none; } :root { --pad-page: 24px; } } /* ─── sidebar ───────────────────────────────────────────────────────── */ .sidebar { /* Paper gradient stays as the base color. We paint bg-side.png as a separate ::after layer below so we can control its opacity independently from the background-blend-mode chain (which only gives 0/100% per-image visibility, not intermediate values). The layer sits BEHIND the sidebar-inner content (z-index 0 vs the content's z-index 1) but ABOVE the gradient. */ background: linear-gradient(180deg, var(--paper-edge) 0%, color-mix(in srgb, var(--paper-edge) 80%, var(--paper) 20%) 100%); border-right: 1px solid rgba(141,102,48,0.22); box-shadow: inset -10px 0 24px -16px rgba(100,72,30,0.18); padding: 24px 14px 24px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; /* keep the bg layer clipped to the column */ isolation: isolate; /* contain the blend mode inside the sidebar */ } /* Sidebar bg layer — full sidebar height (so the gradient fade has room to breathe), bottom-anchored illustration scaled to the column width. The mask-image alpha gradient fades the layer from fully opaque at the BOTTOM (image fully visible) to fully transparent at the TOP (no bg interference behind the menu items). `darken` blend keeps the DARKER pixel between the image and the paper at each point: cream backgrounds in the png dissolve into the paper gradient (they're lighter, so paper wins), and only the inked strokes (river, blossoms, moon outline) register on top. */ .sidebar::after { content: ""; position: absolute; inset: 0; background: url('images/bg/sidebar/bg-side.webp') center bottom / 100% auto no-repeat; mix-blend-mode: darken; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, transparent 100%); pointer-events: none; z-index: 0; } .sidebar-inner { position: relative; z-index: 1; } .sidebar-inner { display: flex; flex-direction: column; height: 100%; gap: 24px; } .brand { display: flex; align-items: center; justify-content: flex-start; padding: 0 6px 14px; border-bottom: 1px dashed rgba(141,102,48,0.3); } .brand-logo { /* Full-bleed inside the brand block — the K-and-sun mark fills the narrow sidebar column. Width caps at the column itself so the mark never overflows. Multiply blend so the cream around the logo dissolves into the sidebar's paper gradient instead of painting a hard rectangle. */ width: 100%; max-width: 140px; height: auto; display: block; mix-blend-mode: multiply; cursor: help; /* signals there's something to discover on hover */ } /* ─── Brand tooltip ───────────────────────────────────────────────── Reveals after a deliberate 1.5s hover delay so it doesn't pop on casual mouseover — only for the curious lingerer. Hides immediately on mouse-leave (no exit delay) so it gets out of the way fast. Floats to the RIGHT of the sidebar (the brand sits at the very top- left of the viewport; tooltip below would crowd the menu, tooltip above would clip the window edge). Uses position: fixed so it ESCAPES the sidebar's overflow:hidden clip (which is needed there for the bg layer). Fixed coords are stable because the sidebar is position: sticky pinned at top:0. */ .brand { position: relative; cursor: help; } .brand-tooltip { position: fixed; /* Default: only the primary 188px sidebar is on-screen, so the tooltip floats just past it with the arrow notch pointing back at the logo. */ left: 202px; top: 28px; /* matches the brand block's natural top */ width: 320px; padding: 16px 18px; background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 8px; box-shadow: 0 10px 30px rgba(60,40,10,0.16); color: var(--ink-2); text-align: left; /* Above every sidebar (.sidebar z-index 20, .vocab-books-sidebar 5, and every grid-item stacking context). 200 is well clear. */ z-index: 200; opacity: 0; visibility: hidden; transform: translateX(-6px); pointer-events: none; /* informational only — don't catch clicks */ /* On hover-OUT: fade opacity quickly, then snap visibility off so focus returns to the page. On hover-IN: long 1.5s delay before anything starts. */ transition: opacity .25s ease, visibility 0s linear .25s, transform .25s ease; } /* Reveal — 1.5s delay before the fade-in starts. Both :hover and :focus-within fire so keyboard users get the tooltip too. */ .brand:hover .brand-tooltip, .brand:focus-within .brand-tooltip { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity .3s ease 1.5s, visibility 0s linear 1.5s, transform .3s ease 1.5s; } /* When any secondary sidebar is open (flashcards, vocab, writing, particles), it lives between the primary sidebar and the main content — the default left:202px would place the tooltip directly behind it. Slide the tooltip past every known secondary sidebar so the content stays readable. The widest secondary is 160px (flash-sidebar), so 188+160+14 = 362px is the floor. */ .app.show-flash-sidebar .brand-tooltip, .app.show-vocab-sidebar .brand-tooltip, .app.show-vocab-books-sidebar .brand-tooltip, .app.show-writing-sidebar .brand-tooltip, .app.show-library-sidebar .brand-tooltip, .app.show-particles-sidebar .brand-tooltip { left: 362px; } /* Arrow pointing at the logo, paper-2 fill so the tooltip reads as a soft paper bubble notched into the sidebar edge. Hidden when the tooltip has been pushed past a secondary sidebar — the arrow would otherwise float in dead space far from the logo it pretends to point at. */ .brand-tooltip::before { content: ''; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; background: var(--paper-2); border-left: 1px solid var(--paper-edge); border-bottom: 1px solid var(--paper-edge); transform: rotate(45deg); } .app.show-flash-sidebar .brand-tooltip::before, .app.show-vocab-sidebar .brand-tooltip::before, .app.show-vocab-books-sidebar .brand-tooltip::before, .app.show-writing-sidebar .brand-tooltip::before, .app.show-library-sidebar .brand-tooltip::before, .app.show-particles-sidebar .brand-tooltip::before { display: none; } .brand-tooltip-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed rgba(141,102,48,0.20); margin-bottom: 12px; } .brand-tooltip-glyph { font-family: var(--font-title); font-size: 44px; font-weight: 600; line-height: 1; color: var(--ink); } .brand-tooltip-meaning { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .brand-tooltip-meaning .kw { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink); line-height: 1.3; } .brand-tooltip-meaning .reading { font-family: var(--serif-jp); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; } /* Composition row: 日 + 月 → 明, with the sun radical in red */ .brand-tooltip-compose { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0 12px; font-family: var(--font-title); font-size: 22px; color: var(--ink-2); } .brand-tooltip-radical { font-weight: 600; color: var(--ink); } .brand-tooltip-radical-sun { color: #c43a4a; } /* vermilion — same hue as the logo's brushed sun */ .brand-tooltip-plus, .brand-tooltip-arrow { font-family: var(--serif); font-size: 14px; color: var(--ink-4); } .brand-tooltip-result { font-weight: 600; color: var(--ink); } .brand-tooltip p { margin: 0 0 8px; font-family: var(--serif); font-size: 13px; line-height: 1.5; color: var(--ink-2); } .brand-tooltip p:last-child { margin-bottom: 0; } .brand-tooltip strong { font-family: var(--font-title); font-weight: 600; color: var(--ink); } .brand-tooltip em { font-style: italic; color: var(--ink); } /* On narrow viewports the sidebar collapses to a top strip — the tooltip would float into nowhere, so just disable it there. */ @media (max-width: 760px) { .brand-tooltip { display: none; } } /* Legacy brand-mark/-name still defined for any consumer that didn't migrate to the image yet. Hidden by default; the new .brand-logo replaces them. */ .brand-mark { font-family: var(--font-menu-ja); font-weight: 800; font-size: 38px; color: var(--gold-dark); letter-spacing: -0.02em; line-height: 1; } .brand-name { font-family: var(--font-menu-en); font-style: italic; font-size: 18px; color: var(--ink-2); } .brand-sub { font-family: var(--hand); font-size: 15px; color: var(--ink-3); margin-top: 2px; } .nav-list { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; margin: 0; } .nav-section-label { font-family: var(--font-menu-en); font-style: italic; font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: lowercase; padding: 6px 8px 4px; } .bookmark { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border: none; background: transparent; cursor: pointer; color: var(--ink-2); width: 100%; text-align: left; font-family: var(--serif); font-size: 15px; line-height: 1.1; border-radius: 0 8px 8px 0; transition: background .15s, color .15s, transform .15s; } .bookmark .glyph { font-family: var(--font-menu-ja); font-weight: 600; font-size: 18px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--gold-dark); background: var(--paper-2); border-radius: 4px; border: 1px solid rgba(141,102,48,0.22); flex: 0 0 auto; } .bookmark .label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .bookmark .label .ja { font-family: var(--font-menu-ja); font-size: 14px; color: var(--ink-2); line-height: 1.1; } .bookmark .label .en { font-family: var(--font-menu-en); font-size: 13px; color: var(--ink-3); font-style: italic; } .bookmark { position: relative; } /* anchor for the active brush */ .bookmark:hover { background: rgba(180,138,74,0.10); color: var(--ink); } /* Active state — subtle paper tint only, no gold left stroke, no hairline halo. The brush brush (.active-brush below) is the visual anchor that signals "you're here." */ .bookmark.active { background: rgba(180,138,74,0.10); color: var(--ink); } .bookmark.active .label .en { color: var(--ink-2); font-style: normal; } /* ─── Active-item brush brush ─────────────────────────────────────── A hand-painted brush mark anchored to the RIGHT side of the active bookmark/cat-item, vertically centered. Allowed to overflow the row (and slightly the column) — gives the calligraphy a physical feel instead of a clean cell border. One of four brushes is picked at random on each render: two are LINE shapes (horizontal/vertical brushstrokes, reveal animates right→left), two are CIRCLE shapes (ensos, reveal animates counter-clockwise via conic-gradient mask). mix-blend-mode: multiply lets the brush's white halo dissolve into the sidebar paper, so only the ink registers. */ .active-brush { position: absolute; right: -10px; /* slight horizontal spill, organic feel */ top: 50%; transform: translateY(-50%); width: 64px; height: 64px; object-fit: contain; pointer-events: none; z-index: 2; /* above the row's bg tint */ mix-blend-mode: multiply; opacity: 0.85; } /* Slightly larger brush in the secondary sidebars (cat-item rows are a touch shorter, so the brush can run taller to compensate). */ .cat-item .active-brush { width: 70px; height: 70px; right: -12px; } /* Tier-3 brushes (deeper sub-sidebars) center on the sidebar's right edge — half inside the row, half spilling into the content area beyond. The brushstroke marks the selection clearly without ever blocking the row label. position: fixed escapes the sub-sidebar's overflow:hidden so the right half is actually visible (the ancestor sidebars have overflow-y:auto which forces overflow-x to clip too; only fixed positioning escapes). JS — see repositionTier3Brushes — sets left/top to track the active row. */ .cat-item .active-brush.tier-3 { position: fixed; right: auto; top: auto; transform: none; /* Initial off-screen position so a non-yet-positioned brush doesn't flash at (0,0). JS overrides as soon as it can measure. */ left: -9999px; } /* ─── Brush-bg-behind-text variant ───────────────────────────────── A different tier-3 treatment: instead of the small brushmark parked on the row's right edge, a wide brush stroke is painted behind the text AND breaks out of the column entirely, trailing rightward into the content area. The text crossfades from ink → white as the brush wipes in left-to-right. Both layers share the same bezier and the same animation-delay (passed via the --bg-brush-delay custom property on the parent button), so they animate in perfect lock. STACKING ─ the brush needs to paint over .main where it overflows the sidebar column. .main is in normal flow and .particles-sidebar comes BEFORE .main in the DOM, so without explicit z-index .main would paint over the sidebar. Lifting particles-sidebar to z:5 (below .main's :before bg layer if any, above its content) fixes this. The lift is on the WHOLE sidebar (not just the active row) so the sub-sidebar always paints above .main — visually identical to today for non-brush states, since the sub-sidebar has its own opaque bg-color and doesn't compete with .main visually. The .has-bg-brush class on the parent button: - kills the gold-tint active background (the brush IS the tint) - lifts the text into a positive z-index above the brush - creates a local stacking context so the fixed brush descendant and the text spans stack predictably (text z:2 above brush z:1) */ .particles-sidebar, .vocab-books-sidebar { z-index: 5; } .cat-item.has-bg-brush { background: transparent; position: relative; /* NO isolation: isolate, NO z-index here. The previous version isolated the cat-item's stacking context which meant the brush's mix-blend-mode: multiply only had the cat-item's own (transparent) background to multiply against — white halos from the brush PNG had nothing to dissolve into and stayed visible. Removing the isolation lets the multiply reach the sub-sidebar's paper backdrop, which is exactly what we want — white pixels go transparent against the cream paper, only the dark sumi ink registers. Stacking is still well-defined: brush at z:1 inside the cat-item, text spans at z:2, both painted inside the sub-sidebar's own z:5 stacking context which sits above .main. */ } /* Within the particles-sidebar variant, the cat-item carries its own overflow:hidden (to clip the colored accent stripe ::before). The fixed-positioned brush escapes that clip naturally because fixed descendants ignore ancestor overflow when no transformed ancestor intervenes, so no override is needed here. */ .cat-item.has-bg-brush .cat-glyph, .cat-item.has-bg-brush .cat-ja, .cat-item.has-bg-brush .cat-en { position: relative; z-index: 2; /* Sumi-e bezier — see the .active-brush-bg rule below for the reasoning. Duration is var()-driven so JS can pass a slightly drifted value per stroke and the text crossfade tracks the brush wipe exactly. */ animation: brush-bg-text-fade var(--bg-brush-dur, 0.42s) cubic-bezier(0.92, 0, 0.18, 0.95) both; animation-delay: var(--bg-brush-delay, 0s); } @keyframes brush-bg-text-fade { to { color: #fff; } } /* The brush image — position:fixed so it escapes every overflow ancestor (the sub-sidebar's overflow-y:auto would otherwise clip the spilling stroke). SIZING ─ width, height, left, and top are ALL set by JS each frame from the host sub-sidebar's actual rendered width — see repositionBgBrushes. The formula: brushWidth = sidebar.width × 1.20 (sidebar + 10% each side) brushHeight = brushWidth / image.aspect (preserves native aspect) left = sidebar.left − sidebar.width × 0.10 (10% spill) top = row.top + (row.height − brushHeight) / 2 This adapts automatically when the brush image changes (new aspect → new height) or when the menu width changes (responsive grid → re-measured on resize). The CSS values below are just sensible initial fallbacks before JS measures. object-fit:contain preserves the artist's brush shape regardless of how the JS-computed box happens to compare to the image's native aspect — no horizontal stretching ever. mix-blend-mode multiply dissolves the paper halo so only the sumi pigments register on the sidebar paper. */ .active-brush-bg { position: fixed; width: 200px; height: 100px; object-fit: contain; object-position: left center; pointer-events: none; z-index: 1; mix-blend-mode: multiply; /* Off-screen until JS measures the parent row and positions the brush. Without this the brush would flash at (0,0) on the first frame before reposition runs. */ left: -9999px; top: -9999px; /* Sumi-e bezier — calibrated to match the physics of a real brushstroke gesture: (0.92, 0) very slow press-in (brush touching paper, ink starts flowing; the first ~15% of time produces only ~2% of the visible stroke) (0.18, 0.95) fast sweep through the middle, with a soft deceleration at the end (the brush lifts gently off the paper rather than stopping dead) This curve is informed by ease-in-out-quart and quint and tuned further for the "dextrous, fast, accurate" sumi-e gesture. Pairs with a short base duration (~420ms) — sumi strokes are quick. Duration is var()-driven so JS can apply small per-instance drift (±~8%) and every stroke feels its own gesture rather than a mechanical loop. The text crossfade uses the SAME var, so brush and text stay in perfect lockstep regardless of which instance picked which duration. */ animation: brush-bg-wipe var(--bg-brush-dur, 0.42s) cubic-bezier(0.92, 0, 0.18, 0.95) both; } @keyframes brush-bg-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* ─── Particle-brush variant ───────────────────────────────────────── A smaller cousin of the bg-brush, scoped to the individual particle list items in the particles sub-sidebar (は が を に etc.). The brush overlaps the colored glyph on the left of the row but does NOT cover the romaji + EN labels on the right, so the labels stay readable in their default color while only the glyph fades to white during the wipe. Same stacking strategy as has-bg-brush (z:50 + isolate + transparent bg). Same sumi-e bezier, same lockstep duration via --bg-brush-dur. The two differences are which texts animate and the brush sizing (the JS measures sub-sidebar.width × 0.5 instead of × 1.2). */ .cat-item.has-particle-brush { background: transparent; position: relative; /* See .has-bg-brush above — same reasoning. No isolation, no z-index here, so the brush's multiply blend can reach the sub-sidebar's paper backdrop and dissolve any remaining white halos in the brush PNG. */ } .cat-item.has-particle-brush .cat-glyph { position: relative; z-index: 2; transform-origin: center center; /* Two parallel animations on the glyph, declared via LONGHAND so the comma-separated lists pair element-by-element with no ambiguity: [0] brush-bg-text-fade — color goes ink/particle → white, same bezier + duration as the brush wipe so the glyph whitens in lockstep with the stroke painting behind it. [1] particle-glyph-emerge — the glyph grows ~22%, tilts 3deg counter-clockwise, drifts 2px to the left. Slower than the brush (0.6s vs ~0.42s) with a heavy ease-out so the motion lingers and settles JUST barely after the brush finishes — the glyph "lands" into its new pose right as the stroke completes painting. Both animations share the cascade delay (from the parent button's inline --bg-brush-delay) so they start together; only their end times differ. Using longhand instead of the shorthand because Chrome/Firefox parse `animation-delay: ` AFTER a multi- animation shorthand inconsistently — explicit per-animation longhand sidesteps that. */ animation-name: brush-bg-text-fade, particle-glyph-emerge; animation-duration: var(--bg-brush-dur, 0.42s), 0.6s; animation-timing-function: cubic-bezier(0.92, 0, 0.18, 0.95), cubic-bezier(0.16, 1, 0.3, 1); animation-delay: var(--bg-brush-delay, 0s), var(--bg-brush-delay, 0s); animation-fill-mode: both, both; } @keyframes particle-glyph-emerge { from { transform: translate(0, 0) rotate(0deg) scale(1); } to { transform: translate(-2px, 0) rotate(-3deg) scale(1.22); } } /* Labels stay BROWN/INK — explicit color override with !important to block any cascading rule (from .has-bg-brush or other shared selectors) that might reach them. animation: none also explicit so no keyframe sneaks color: #fff in. The romaji label uses ink (inherited from .cat-item.active default), the EN gloss uses ink-2 (its .active state color). */ .cat-item.has-particle-brush .cat-ja { position: relative; z-index: 2; animation: none !important; color: var(--ink) !important; } .cat-item.has-particle-brush .cat-en { position: relative; z-index: 2; animation: none !important; color: var(--ink-2) !important; } /* The particle brush image — same fixed-positioning + wipe-animation strategy as .active-brush-bg, but JS sizes it to half the sidebar width instead of 1.2× full width. */ .active-brush-particle { position: fixed; width: 80px; height: 80px; object-fit: contain; object-position: center; pointer-events: none; z-index: 1; mix-blend-mode: multiply; left: -9999px; top: -9999px; animation: brush-bg-wipe var(--bg-brush-dur, 0.42s) cubic-bezier(0.92, 0, 0.18, 0.95) both; } /* @property registration lets us animate the conic-gradient stop — CSS only interpolates registered custom properties. Without this, the circle brush would snap from invisible to fully visible. */ @property --brush-conic { syntax: ''; inherits: false; initial-value: 360deg; } /* LINE reveal — clip-path animates from "fully clipped from bottom" (only the top edge of the box is visible — 0px high) to "no clip" (full image visible). The top edge of the brush stays anchored while the visible region grows DOWNWARD — that's the top-to-bottom sweep, the way a real sumi-e kanji stroke is drawn vertically down the paper. The brush assets are already tall (35×65, 40×72, etc.) so this reads as the natural drawing direction without rotation gymnastics. */ .active-brush.is-line { /* `both` = forwards + backwards: holds the "from" keyframe during any animation-delay (so the brush stays invisible until its turn in the cascade), and the "to" keyframe after the animation finishes (so the brush stays visible). Bezier curve = sumi-e gesture, same family as the bg-brush curve (0.92, 0, 0.18, 0.95): (0.92, 0) — very slow press-in. The brush touches paper, ink starts flowing; the first ~15% of time produces only ~2% of the visible stroke. (0.18, 0.95) — fast sweep through the middle with a soft deceleration at the end (the brush lifts gently off the paper rather than stopping dead). This curve replaces the old ease-out-quart, which felt like a quick flick — the new curve reads as a deliberate gesture from a confident hand. Pairs with a slightly longer duration (.85s, up from .55s) so the slow press-in has room to breathe. Duration .85s must match BRUSH_LINE_DUR in JS — the cascade math uses it to decide when tier-3 starts. */ animation: brush-line-sweep .85s cubic-bezier(0.92, 0, 0.18, 0.95) both; } @keyframes brush-line-sweep { /* TOP-TO-BOTTOM reveal in the brush's local coordinate frame. inset( ) — starting with 100% inset from the BOTTOM means the visible region is 0 height at the TOP edge. As the animation progresses, the bottom inset decreases from 100% to 0, so the visible region grows DOWNWARD from the top edge. Combined with the natively tall brush PNGs (35×65, 40×72, etc.) this reads as a sumi-e stroke being painted top-to-bottom, the way a vertical kanji stroke is drawn. */ from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } /* CIRCLE reveal — a conic-gradient mask whose visible arc starts at 12 o'clock and grows COUNTER-CLOCKWISE (toward 9 o'clock first, then 6, then 3, closing back at 12). Replicates the way an enso is painted in one continuous counter-clockwise sweep. */ .active-brush.is-circle { --brush-conic: 0deg; /* `from 60deg` rotates the conic origin 60° clockwise from 12 o'clock, so the brush starts/ends in the upper-right (~2 o'clock) — that's where a traditional sumi-e enso's opening sits, the gap left by the brush as it enters and exits the loop. The visible arc still grows counter-clockwise from that anchor through the rest of the circle. */ -webkit-mask-image: conic-gradient( from 60deg, transparent 0deg, transparent calc(360deg - var(--brush-conic)), #000 calc(360deg - var(--brush-conic)), #000 360deg ); mask-image: conic-gradient( from 60deg, transparent 0deg, transparent calc(360deg - var(--brush-conic)), #000 calc(360deg - var(--brush-conic)), #000 360deg ); /* Bezier = ease-in-out-cubic (cubic-bezier(0.65, 0, 0.35, 1)) — sustained arc motion. The brush winds up slightly, sweeps through the middle of the enso at speed, decelerates to close the loop. Feels weightier and more deliberate than the line sweep, matching how an enso is actually painted (one continuous breath, not a flick). Duration 1.1s — the sidebar's enso is the ceremonial anchor of the cascade, the brushmark that names the whole section. It still takes its time relative to the other strokes, but 1.4s felt sluggish; 1.1s is a confident slow gesture without wandering. Paired with the tier-1 pre-roll in the JS cascade (180ms of wait before the stroke begins), the enso feels deliberate rather than rushed — the brush lingers, then the sub-sidebar lines paint AFTER it completes. Duration 1.1s must match BRUSH_CIRCLE_DUR in JS — the cascade math uses it to decide when tier-2 starts. */ animation: brush-circle-sweep 1.1s cubic-bezier(0.65, 0, 0.35, 1) both; } @keyframes brush-circle-sweep { from { --brush-conic: 0deg; } to { --brush-conic: 360deg; } } /* Respect reduced-motion preference — drop the animation, snap to the final state immediately. Both line + circle keep the same visible mark at rest. */ @media (prefers-reduced-motion: reduce) { .active-brush.is-line, .active-brush.is-circle { animation: none; clip-path: none; -webkit-mask-image: none; mask-image: none; } } .sidebar-foot { margin-top: auto; padding: 12px 10px; border-top: 1px dashed rgba(141,102,48,0.3); font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-3); } .streak { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .streak-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(180,138,74,0.20); } /* ─── shared page chrome ────────────────────────────────────────────── */ .page-head { margin-bottom: 28px; } .page-eyebrow { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-3); letter-spacing: 0.04em; } .page-title-jp { font-family: var(--font-title); font-weight: 600; font-size: clamp(28px, 4vw, 40px); color: var(--ink); letter-spacing: 0.02em; margin: 4px 0 6px; line-height: 1.1; word-break: keep-all; overflow-wrap: break-word; line-break: strict; } /* Furigana inside a page title (e.g. the Pitch page's 抑揚) — small and faded so the kanji stays the anchor. Only ruby-bearing titles use it. */ .page-title-jp rt { font-size: 0.36em; color: var(--ink-faint); font-weight: 400; } /* Inline connector inside a title — e.g. "ひらがな と カタカナ". The と sits smaller and faded so the two anchoring scripts read as the main subject. */ .page-title-jp .title-conj { font-size: 0.55em; color: var(--ink-3); font-weight: 400; margin: 0 0.3em; vertical-align: 0.12em; letter-spacing: 0.05em; } /* Legacy stacked variant — retained for any title that still uses it. */ .page-title-jp.page-title-jp-stacked > span { display: block; } .page-title-jp.page-title-jp-stacked > span + span { margin-top: 2px; } .page-title-en { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-2); } .rule { height: 0; margin: 16px 0 24px; border-top: 1px solid var(--paper-edge); position: relative; } .rule::after { content: ""; position: absolute; left: 0; top: -1px; width: 36px; border-top: 2px solid var(--gold); } /* ─── small ui ──────────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid rgba(141,102,48,0.25); font-family: var(--serif); font-size: 12px; color: var(--ink-2); cursor: pointer; transition: all .15s; } .pill:hover { background: var(--gold-soft); color: var(--ink); } .pill.active { background: var(--gold); color: white; border-color: var(--gold-dark); } .pill .ja { font-family: var(--serif-jp); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; background: var(--paper-2); color: var(--ink); border: 1px solid rgba(141,102,48,0.25); font-family: var(--serif); font-size: 14px; cursor: pointer; transition: all .15s; } .btn:hover { background: var(--gold-soft); border-color: var(--gold); } .btn.primary { background: var(--gold); color: white; border-color: var(--gold-dark); } .btn.primary:hover { background: var(--gold-dark); } .btn.ghost { background: transparent; border-style: dashed; color: var(--ink-2); } .icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--paper-2); border: 1px solid rgba(141,102,48,0.25); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; } .icon-btn:hover { background: var(--gold-soft); color: var(--ink); } .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; } /* ─── card / panel ──────────────────────────────────────────────────── */ .panel { background: var(--paper-2); border: 1px solid rgba(141,102,48,0.22); border-radius: 12px; padding: 24px; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 4px 14px var(--paper-shadow); } /* ─── book / cheatsheet frame ───────────────────────────────────────── */ .book-frame { background: var(--paper-2); border: 2px solid var(--gold-soft); box-shadow: 0 0 0 6px var(--paper-2), 0 0 0 7px var(--gold-soft), 0 8px 24px rgba(100,72,30,0.18); border-radius: 4px; padding: 36px clamp(20px, 4vw, 56px) 40px; position: relative; } .book-frame::before, .book-frame::after, .book-frame > .corner-tl, .book-frame > .corner-tr { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold); background: var(--paper-2); border-radius: 50%; } .book-frame::before { top: -8px; left: -8px; } .book-frame::after { bottom: -8px; right: -8px; } .book-frame > .corner-tl { top: -8px; right: -8px; } .book-frame > .corner-tr { bottom: -8px; left: -8px; } .book-title { text-align: center; font-family: var(--serif-jp); font-weight: 700; font-size: clamp(22px, 3vw, 32px); color: var(--ink); letter-spacing: 0.06em; padding-bottom: 18px; border-bottom: 1px solid var(--gold-soft); margin-bottom: 24px; position: relative; word-break: keep-all; overflow-wrap: break-word; line-break: strict; } .book-title .particle { color: var(--ink-3); font-weight: 400; font-size: 0.8em; margin: 0 6px; } .sheet-image { width: 100%; margin: 0 auto 24px; border-radius: 4px; border: 1px solid var(--paper-edge); background: var(--paper-2); position: relative; overflow: hidden; } image-slot { border-radius: 4px; } .vocab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; } @media (max-width: 640px) { .vocab-grid { grid-template-columns: 1fr; } } .vocab-row { display: grid; grid-template-columns: 28px 1fr; align-items: baseline; gap: 4px 10px; padding: 8px 4px; border-bottom: 1px dashed rgba(141,102,48,0.18); cursor: pointer; border-radius: 4px; transition: background .12s; } .vocab-row .body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; } .vocab-row:hover { background: rgba(180,138,74,0.10); } .vocab-row .num { font-family: var(--serif); font-size: 14px; color: var(--ink-3); font-weight: 600; } .vocab-row .kanji { font-family: var(--serif-jp); font-size: 18px; color: var(--ink); font-weight: 500; } .vocab-row .kana { font-family: var(--serif-jp); font-size: 13px; color: var(--ink-2); /* Treat the parenthesized hiragana as one atomic unit. Without this the browser may break mid-（kana）— "ベッド（べっ\nど）" — which looks broken. With nowrap the entire span either fits on the kanji line or flex-wraps to its own line as a whole. */ white-space: nowrap; } .vocab-row .en { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-3); width: 100%; margin-top: -2px; } body.no-english .vocab-row .en { visibility: hidden; } body.no-english .flash-en { visibility: hidden; } body.no-english .sentence .en { visibility: hidden; } body.no-english .reveal-en::after { content: "(tap to reveal)"; visibility: visible !important; opacity: .5; font-family: var(--serif); font-size: 11px; } /* ─── stepper / book navigation ────────────────────────────────────── Full-width horizontal step indicator. Each step is its own clickable column with a numbered marker + JP/EN title. Connector lines link consecutive markers; they color gold for the steps you've reached (left of and including the active step), muted gray for upcoming. Replaced the small-dot pager — titled steps tell you what each destination is before you click it. */ .stepper { /* Transparent: no paper backdrop, no bottom rule. Lets the section background (e.g. eating-out's painterly bg) breathe through and the stepper just floats as markers + labels over whatever is behind it. Sticky positioning dropped — without a backdrop, the stepper would otherwise overlap scrolled content unreadably. It scrolls away naturally with the page, which is fine for a 3-step nav the user only consults once. */ margin: 0 0 22px; display: grid; grid-template-columns: repeat(var(--steps, 1), minmax(0, 1fr)); gap: 0; padding: 12px 10px 14px; background: transparent; border-bottom: none; } .step { position: relative; background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 0 6px; font: inherit; color: var(--ink-4); transition: color .15s; min-width: 0; } .step:hover { color: var(--ink-2); } .step:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; } .step.is-done { color: var(--ink-3); } .step.is-active { color: var(--ink); } /* Numbered marker (the circle) */ .step-marker { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); border: 1.5px solid var(--paper-edge); font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--ink-3); margin-bottom: 8px; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; position: relative; z-index: 2; flex-shrink: 0; } .step:hover .step-marker { border-color: var(--gold); color: var(--ink-2); } .step.is-done .step-marker { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-dark); } .step.is-active .step-marker { background: var(--gold); border-color: var(--gold-dark); color: var(--paper); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-soft) 60%, transparent); } /* Connector line — lives behind the marker, spans from the previous marker's center to this marker's center. Hidden on the first step. */ .step:not(:first-child)::before { content: ''; position: absolute; top: 14px; /* center of the 30px marker */ right: 50%; width: 100%; height: 2px; background: var(--paper-edge); z-index: 0; transform: translateY(-1px); transition: background .15s; } /* The connector to a done/active step is gold (progress visualization). */ .step.is-done:not(:first-child)::before, .step.is-active:not(:first-child)::before { background: var(--gold); } /* Title block under the marker — JP on top, EN italic underneath. */ .step-label { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; line-height: 1.2; min-width: 0; width: 100%; } .step-ja { font-family: var(--serif-jp); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .step-en { font-family: var(--serif); font-style: italic; font-size: 10px; color: var(--ink-4); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .step.is-active .step-ja { font-weight: 600; } .step.is-active .step-en { color: var(--ink-3); } /* Narrow screens — hide EN sub-label, shrink fonts. */ @media (max-width: 560px) { .stepper { padding: 10px 6px 12px; } .step { padding: 0 4px; } .step-marker { width: 26px; height: 26px; font-size: 12px; } .step:not(:first-child)::before { top: 12px; } .step-ja { font-size: 11px; } .step-en { display: none; } } /* ─── usage list ────────────────────────────────────────────────────── */ .usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .usage-card { background: var(--paper-2); border: 1px solid rgba(141,102,48,0.22); border-radius: 8px; padding: 14px 16px; transition: all .15s; cursor: pointer; } .usage-card:hover { border-color: var(--gold); background: var(--paper); transform: translateY(-1px); } .usage-card .ja { font-family: var(--serif-jp); font-size: 19px; color: var(--ink); font-weight: 500; } .usage-card .kana { font-family: var(--serif-jp); font-size: 12px; color: var(--ink-3); margin-top: 2px; } .usage-card .en { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(141,102,48,0.18); } /* ─── sentences ─────────────────────────────────────────────────────── */ .sentence { padding: 18px 0; border-bottom: 1px solid var(--paper-edge); display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; } .sentence:last-child { border-bottom: none; } .sentence .level-tag { font-family: var(--serif); font-size: 11px; color: var(--gold-dark); background: var(--gold-soft); padding: 2px 8px; border-radius: 4px; letter-spacing: 0.04em; white-space: nowrap; } .sentence .body { min-width: 0; } .sentence .ja { font-family: var(--serif-jp); font-size: 20px; color: var(--ink); line-height: 1.6; font-weight: 400; } .sentence .en { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-3); margin-top: 6px; line-height: 1.4; } .sentence .audio { color: var(--ink-3); } /* ─── Jougo explainer page ─────────────────────────────────────────── */ .explainer-body { font-family: var(--serif); font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 780px; margin-top: 18px; } .explainer-body .jougo-section { margin-bottom: 8px; padding-bottom: 22px; border-bottom: 1px dashed var(--paper-edge); /* flow-root establishes a block formatting context so floated figures inside the section (.jougo-noma-figure) are contained and can't bleed into the next section. */ display: flow-root; } .explainer-body .jougo-section:last-child { border-bottom: none; } .explainer-body h3 { font-family: var(--serif-jp); font-size: 22px; color: var(--ink); font-weight: 600; margin: 30px 0 12px; letter-spacing: 0.02em; } .explainer-body h4 { font-family: var(--serif-jp); font-size: 16px; color: var(--ink-2); font-weight: 600; margin: 20px 0 8px; } .explainer-body p { margin: 0 0 12px; } .explainer-body ul { margin: 0 0 14px; padding-left: 22px; } .explainer-body li { margin-bottom: 6px; } .explainer-body strong { color: var(--ink); } .explainer-body em { font-style: italic; color: var(--ink-2); } .explainer-body .ja { font-family: var(--serif-jp); color: var(--ink); } .explainer-body code, .explainer-body .glyph-inline { font-family: var(--serif-jp); color: var(--gold-dark); font-weight: 600; font-size: 1.08em; background: transparent; padding: 0; } .explainer-body a { color: var(--gold-dark); text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 2px; transition: text-decoration-color .15s; } .explainer-body a:hover { text-decoration-color: var(--gold); } /* Editorial cover figure — sits inline in the explainer body to break up long prose with a visual rest. Soft paper-2 fill + gold-soft halo + drop shadow matches the flashcard chrome so it reads as a framed plate from the same family of editorial cards. The width respects the body's reading column so the figure doesn't blow out wider than the surrounding paragraphs. */ .explainer-body .jougo-cover { margin: 18px auto 22px; padding: 0; max-width: 560px; background: var(--paper-2); border-radius: 8px; box-shadow: 0 0 0 1px var(--paper-edge), 0 0 0 5px var(--paper-2), 0 0 0 6px var(--gold-soft), 0 16px 36px rgba(60, 40, 10, 0.14); overflow: hidden; } .explainer-body .jougo-cover img { display: block; width: 100%; height: auto; border-radius: 8px; } /* Smaller inline figure — used to illustrate a single concept inside a section's prose (e.g. the 々 hand-to-ear "say it again" image at the start of section B). Floats right on wider viewports so the paragraph wraps around it; stacks centered on narrow viewports. */ .explainer-body .jougo-noma-figure { float: right; width: clamp(160px, 26vw, 240px); margin: 4px 0 14px 22px; padding: 0; background: var(--paper-2); border-radius: 8px; box-shadow: 0 0 0 1px var(--paper-edge), 0 0 0 4px var(--paper-2), 0 0 0 5px var(--gold-soft), 0 10px 24px rgba(60, 40, 10, 0.12); overflow: hidden; } .explainer-body .jougo-noma-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .explainer-body .jougo-noma-figure figcaption { font-family: var(--serif); font-size: 11px; font-style: italic; color: var(--ink-3); line-height: 1.45; padding: 8px 12px 10px; text-align: left; } .explainer-body .jougo-noma-figure figcaption em { color: var(--ink-2); } @media (max-width: 600px) { .explainer-body .jougo-noma-figure { float: none; width: 100%; max-width: 280px; margin: 6px auto 16px; } } /* Tile grids inside the explainer (group examples). */ .jougo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 14px 0 18px; } .jougo-tile { background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 6px; padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: border-color .15s, transform .15s; } .jougo-tile:hover { border-color: var(--gold); transform: translateY(-2px); } /* Illustrated variant — first child is an that sits flush against the top edge of the tile. The tile's TOP corners are squared off so the image touches the card with a clean horizontal seam (no rounded-vs-square mismatch). The image carries no border and no rounding of its own. Bottom corners of the tile stay rounded for visual continuity with the rest of the grid. The tile's top padding drops to zero since the image takes that space; the kanji glyph gets a margin-top so it still breathes. */ .jougo-tile.jougo-tile-illus { padding-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; overflow: hidden; /* clip image to the tile's bottom corners */ } .jougo-tile-img { display: block; width: calc(100% + 22px); /* escape the tile's L/R padding (10px each + 1px border) */ margin: 0 -11px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border: none; /* no stroke per spec */ border-radius: 0; /* square so it meets the squared-off tile top */ } .jougo-tile.jougo-tile-illus .jougo-tile-glyph { margin-top: 12px; /* breathing room between image and glyph */ } /* Illustrated tiles act as buttons — open a modal with the larger illustration + an example sentence on click. Cursor + subtle lift on hover signal the affordance; keyboard users get a focus ring. */ .jougo-tile[data-jougo-modal] { cursor: pointer; } .jougo-tile[data-jougo-modal]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ─── Jougo example modal ───────────────────────────────────────── A native opened from the illustrated jōgo tiles. Shows the illustration enlarged on top, then the glyph + reading + gloss stack, then one strong example sentence (JP big serif, EN italic underneath). Paper texture + gold-soft halo match the editorial flashcard family so the modal reads as part of the same world. */ dialog.jougo-modal { border: none; padding: 0; background: transparent; max-width: 640px; width: calc(100% - 32px); max-height: 90vh; overflow: visible; color: var(--ink); } dialog.jougo-modal::backdrop { background: rgba(60, 40, 10, 0.42); backdrop-filter: blur(2px); } .jougo-modal-card { background: var(--paper-2); border-radius: 10px; box-shadow: 0 0 0 1px var(--paper-edge), 0 0 0 5px var(--paper-2), 0 0 0 6px var(--gold-soft), 0 18px 48px rgba(60, 40, 10, 0.28); overflow: hidden; position: relative; max-height: 90vh; display: flex; flex-direction: column; } .jougo-modal-image-wrap { width: 100%; aspect-ratio: 16 / 9; background: var(--paper); overflow: hidden; flex: 0 0 auto; } .jougo-modal-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .jougo-modal-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 10px; overflow: auto; } .jougo-modal-glyph { font-family: var(--font-title); font-weight: 700; font-size: clamp(36px, 5vw, 52px); line-height: 1; color: var(--ink); letter-spacing: 0.02em; } .jougo-modal-reading { font-family: var(--serif-jp); font-size: 18px; color: var(--ink-2); margin-top: -2px; } .jougo-modal-en { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-3); margin-bottom: 6px; } .jougo-modal-example { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--paper-edge); display: flex; flex-direction: column; gap: 6px; } .jougo-modal-example-eyebrow { font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; } /* JP sentence + TTS speaker side-by-side. Speaker is right-aligned and locked to the top so multi-line sentences keep their start aligned with the icon, instead of the icon drifting to mid-text. */ .jougo-modal-example-jp-row { display: flex; align-items: flex-start; gap: 10px; } .jougo-modal-example .jp { flex: 1 1 auto; font-family: var(--serif-jp); font-size: 18px; color: var(--ink); line-height: 1.55; margin: 0; } .jougo-modal-tts { flex: 0 0 auto; margin-top: 2px; /* nudge down so the icon aligns with the JP cap-height */ } .jougo-modal-example .en { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-3); line-height: 1.5; margin: 0; } .jougo-modal-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(252, 248, 240, 0.92); border: 1px solid var(--paper-edge); color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(60, 40, 10, 0.16); transition: background .15s, color .15s, transform .12s; z-index: 1; } .jougo-modal-close:hover { background: var(--paper); color: var(--ink); transform: scale(1.06); } @media (max-width: 480px) { .jougo-modal-image-wrap { aspect-ratio: 4 / 3; } .jougo-modal-body { padding: 18px 18px 22px; } } .jougo-tile-glyph { font-family: var(--serif-jp); font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1.1; } .jougo-tile-reading { font-family: var(--serif-jp); font-size: 12px; color: var(--ink-3); } .jougo-tile-en { font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--ink-3); line-height: 1.3; } /* ─── Jougo overview page — three editorial zones ────────────────── */ /* Used by vocab/jougo/onomatopoeia + vocab/jougo/common-jougo. Same .explainer-body chrome inherited from the intro page (typography, dashed section dividers, max-width body lane). Each of the three zones (gallery / daily / sentences) overrides one or two rules to get its distinct rhythm. Zone headings carry an italic EN sub-label so the JP chapter numbering ("A · 形") still scans for English readers without drifting into the body. */ .zone-label-en { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 14px; color: var(--ink-3); letter-spacing: 0; margin-left: 4px; } /* Zone A · gallery — uses the existing .jougo-tile-illus from the intro page, no extra rules. The tile chrome ALREADY handles the squared top corners + image-flush-to-top + click-to-modal. The no-image fallback variant is .jougo-tile-placeholder: paper-2 fill, centered giant glyph instead of a 4:3 image, same overall card height so the grid stays uniform. */ .jougo-tile.jougo-tile-placeholder { /* Match the illustrated variant's structural moves (square top, overflow:hidden, no top padding) so placeholder + illustrated tiles share the same outer box and the grid alignment holds. */ padding-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; overflow: hidden; cursor: pointer; } .jougo-tile-glyph-large { /* Replaces the image-region on placeholder tiles. Same 4:3 footprint so the gallery grid stays uniform. Paper background is a touch deeper than the card body so the glyph still reads as "the illustration" rather than as a duplicated label. */ display: flex; align-items: center; justify-content: center; width: calc(100% + 22px); margin: 0 -11px; aspect-ratio: 4 / 3; background: var(--paper); color: var(--ink); font-family: var(--font-title); font-weight: 600; font-size: clamp(28px, 6vw, 44px); letter-spacing: 0.02em; line-height: 1.05; text-align: center; border-top: none; } .jougo-tile.jougo-tile-placeholder .jougo-tile-glyph { margin-top: 12px; } /* Zone B · daily-use collocations — text-only cards in a tight grid. No images on purpose; the rhythm change is what tells the reader "you're in a new section." Each card is a self-contained letterpress stack: small kanji eyebrow → JP phrase → kana → EN gloss. Cards read top-to-bottom; the grid is roughly square so the eye flows left-to-right, top-to-bottom across the rows. */ .jougo-daily-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 16px 0 6px; } .jougo-daily-card { background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 6px; padding: 14px 16px 14px 16px; display: flex; flex-direction: column; /* Gold-soft left-rule echoes the "this card is anchored to its word" idea without competing with the eyebrow glyph above it. Subtle enough to read as a typographic ornament, not a chrome element. */ border-left: 2px solid var(--gold-soft); transition: border-left-color .15s, background .15s; } .jougo-daily-card:hover { border-left-color: var(--gold); background: var(--paper); } .jougo-daily-eyebrow { font-family: var(--serif-jp); font-weight: 600; font-size: 13px; color: var(--gold-dark); letter-spacing: 0.04em; line-height: 1.1; margin-bottom: 6px; } .jougo-daily-phrase { font-family: var(--serif-jp); font-weight: 600; font-size: 18px; color: var(--ink); line-height: 1.4; margin: 0; } .jougo-daily-kana { font-family: var(--serif-jp); font-size: 12px; color: var(--ink-4); letter-spacing: 0.02em; line-height: 1.3; margin: 4px 0 0; } .jougo-daily-en { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-3); line-height: 1.45; margin: 8px 0 0; } /* Zone C · sentences — wide letterpressed stripes. One sentence per row, full body width, generous line-height. Different rhythm from Zone B's tight cards: stripes flow long-format like newspaper paragraphs, cards flow as compact tiles. The eye reads each zone differently because each zone's geometry IS different. */ .jougo-sentences-list { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 6px; } .jougo-sentence-stripe { background: var(--paper); border-radius: 6px; padding: 12px 16px 14px; border-left: 2px solid var(--gold-soft); /* Subtle pressed-into-paper shadow — keeps the stripe distinct from the page background without competing with the gallery tiles' gold halo. */ box-shadow: 0 1px 0 var(--paper-edge); } .jougo-sentence-jp-row { display: flex; align-items: flex-start; gap: 12px; } .jougo-sentence-stripe .jp { flex: 1 1 auto; font-family: var(--serif-jp); font-size: 16px; color: var(--ink); line-height: 1.65; margin: 0; } .jougo-sentence-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-top: 2px; } .jougo-sentence-level { font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--ink-4); letter-spacing: 0.06em; padding: 2px 8px; background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 999px; } .jougo-sentence-tts { flex-shrink: 0; } .jougo-sentence-stripe .en { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-3); line-height: 1.5; margin: 6px 0 0; } /* Mobile: tighten everything, drop the level chip's flex-grab so it wraps under the sentence on narrow viewports rather than stealing width from the JP. */ @media (max-width: 520px) { .jougo-daily-grid { grid-template-columns: 1fr; } .jougo-sentence-meta { flex-direction: row-reverse; } .jougo-sentence-level { display: none; } } /* ─── Jougo flashcards aggregator grid ─────────────────────────────── */ .jougo-flashcards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 18px; } .jougo-fc { background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 8px; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: all .15s; text-align: center; font-family: inherit; color: inherit; } .jougo-fc:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(141,102,48,0.10); } /* Each tile's image well — 1:1 square so the grid stays uniform regardless of which words have art on disk. Same paper-2 placeholder pattern as the editorial flashcard's image-slot: filled shows the illustration, empty shows a flat-color block at the same height. */ .jougo-fc-image { width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: transparent; display: flex; align-items: center; justify-content: center; } .jougo-fc-image image-slot { display: block; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; } .jougo-fc-image:has(image-slot[readonly]:not([data-filled])) { background: var(--paper); } .jougo-fc-glyph { font-family: var(--serif-jp); font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1.05; } .jougo-fc-reading { font-family: var(--serif-jp); font-size: 13px; color: var(--ink-3); } .jougo-fc-en { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-3); line-height: 1.3; } /* ─── Test cards (new editorial flashcard design) ───────────────────── Two-column layout with a vertical hairline divider. The left column holds a square illustration + the brush-style glyph + small readings. The right column is a typographic info pane: meaning, examples (kanji compound · ROMAJI ········ gloss), Heisig + strokes meta, and related-kanji chips. */ .testcard-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--paper-edge); } .testcard-tab { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 6px; cursor: pointer; transition: background .12s, border-color .12s, transform .15s; } .testcard-tab:hover { border-color: var(--gold-soft); transform: translateY(-1px); } .testcard-tab.is-active { background: var(--paper); border-color: var(--gold-dark); box-shadow: 0 0 0 1px var(--gold-dark); } .testcard-tab-kanji { font-family: var(--font-title); font-weight: 600; font-size: 22px; line-height: 1; color: var(--ink); } .testcard-tab-kun { font-family: var(--serif-jp); font-size: 12px; color: var(--ink-3); line-height: 1; } /* Editorial layout — viewport-perfect proportional structure: main-inner = 100vh - page padding ├── class-strip (natural height) ├── view-toggle (natural height — view + font dropdowns) └── flash-layout (flex: 1 — fills the remainder) ├── flash-rail-left ( 絵 · 漢字 · よみかた — vertical) ├── flash-center (card, centered) ├── flash-rail-inner (単語札 caption + vertical progress) └── flash-rail-right (英 / — translations + colorize) The 4-column grid keeps every chrome element in its OWN column so nothing stacks above or below the card vertically. The card hogs all the vertical space; rails are narrow and centered alongside. */ /* Tighten the .main page padding when the single-card editorial layout is showing. The standard --pad-page (56px) is the right margin for a scrolling content surface, but the editorial flashcard is a single focus surface — it benefits from a tighter frame so the vertical title rail hugs the flash-sidebar (aesthetically close, not pressed against), and the card claims an extra ~64px of vertical room that would otherwise be wasted on top/bottom padding. We shadow --pad-page locally so the .main-inner height calc below stays correct without a duplicate constant. */ .main:has(.flash-layout-editorial) { /* --pad-page-v is used by the .main-inner height calc; we set it to the vertical padding only (top + bottom = 16+16 = 32) so the inner fills the viewport exactly. Horizontal padding is asymmetric: tight on the left so the vertical title rail sits a finger's-width from the sidebar, slightly looser on the right. */ --pad-page: 16px; padding: 16px 20px 16px 12px; } .main-inner:has(.flash-layout-editorial) { height: calc(100vh - var(--pad-page) * 2); display: flex; flex-direction: column; overflow: hidden; /* Override the global .main-inner max-width + margin: 0 auto. The editorial flash layout has its own internal rail-grid that handles spacing — letting the inner fill .main's full content width pulls the vertical title rail close to the flash-sidebar (just past the tightened 20px page-padding) and hands the card more horizontal breathing room. */ max-width: none; margin: 0; } .flash-layout.flash-layout-editorial { /* Inherit the 4-column rail grid from .flash-layout. Only the sizing behavior changes — editorial flexes to fill what's left of the viewport below the class-strip and view-toggle row. */ align-items: stretch; flex: 1; /* fills remaining vertical space */ min-height: 0; /* allow shrinking when card grows */ } .flash-layout.flash-layout-editorial .flash-nav { display: none; } .flash-layout.flash-layout-editorial .flash-center { gap: 0; justify-content: center; align-items: center; height: 100%; min-height: 0; } .flash-layout.flash-layout-editorial .flash-deck-editorial { max-width: 1080px; width: 100%; } /* Inner rail in editorial mode — 単語札 caption stacked above the vertical progress bar. Both are centered in the column so the caption sits roughly mid-card-height with the progress just below. */ .flash-layout.flash-layout-editorial .flash-rail-inner { gap: 14px; } .flash-layout.flash-layout-editorial .flash-progress-vert { width: 2px; height: clamp(140px, 30vh, 260px); } /* In editorial mode, compress the above-card chrome aggressively so the card claims every spare pixel of vertical real estate. The view toggle, font pickers, and bg picker still need to exist (the user reaches for them often) but their row shouldn't weigh as much as the card it sits above. Smaller buttons, tighter padding, tighter gap. */ .main:has(.flash-layout-editorial) .flash-top-row { margin: 0 auto 6px; gap: 10px; } .main:has(.flash-layout-editorial) .flash-view-btn { padding: 4px 10px; font-size: 12px; } .main:has(.flash-layout-editorial) .flash-view-btn svg { width: 12px; height: 12px; } .main:has(.flash-layout-editorial) .flash-top-fontpicker-label { font-size: 10px; } .main:has(.flash-layout-editorial) .flash-bg-select { font-size: 11px; padding: 3px 20px 3px 8px; } /* Wrapping frame — sits inside .flash-card so the editorial layout inherits the same framed-card chrome (paper-2 bg, gold-soft halo, drop shadow) as the classic flashcard. Tightened padding so the content gets more room. The --testcard-text-font variable scopes a per-card JP font override (set inline from APP.flashTextFont). */ .flash-card.testcard-frame { --testcard-text-font: var(--serif-jp); padding: 22px 32px 18px; display: flex; flex-direction: column; gap: 12px; } /* Body grid — both columns stretch to the same height so the divider (drawn as the right column\'s left border) extends from top of the card body to just above the footer hairline. */ .testcard { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 44px; align-items: stretch; position: relative; } .testcard::before { content: ""; position: absolute; left: calc(minmax(280px, 420px) + 28px); /* fallback; the right-col rule below paints it */ top: 0; bottom: 0; } .testcard-left { display: flex; flex-direction: column; align-items: center; justify-content: center; /* vertically center image + glyph + readings */ gap: 16px; } /* The image well reserves a fixed square slot. Wide images (e.g. the "roof / crown / cap" triptych) get vertically centered inside that square so they sit at the optical center of the column — the kanji glyph below stays anchored, and short/tall images don\'t shove the glyph up or down. A soft paper-2 background makes the 4px rounded corners visible even when the image doesn\'t fill the slot (e.g. wide images with letterbox space above/below). */ .testcard-image { width: 100%; aspect-ratio: 1 / 1; background: transparent; border: none; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .testcard-image image-slot { display: block; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; } /* No-image flashcards — when the slot is read-only AND no image has been uploaded, the inner image-slot hides itself (display:none in its shadow DOM), but the outer .testcard-image keeps its 1:1 aspect-ratio square. We paint it the same paper-2 color as the surrounding card frame so it reads as "card surface continues here" rather than a missing-illustration placeholder. Result: every editorial flashcard reserves the same vertical space whether or not it carries an image — the deck reads as a uniform grid, and the kanji glyph + readings sit at the same y-position card to card. */ .testcard-image:has(image-slot[readonly]:not([data-filled])) { background: var(--paper-2); } /* The image-slot\'s inner doesn\'t inherit the host\'s border-radius through the shadow root — we use ::part if exposed, otherwise the host\'s overflow:hidden + radius clips it. */ .testcard-image image-slot::part(img), .testcard-image image-slot::part(frame) { border-radius: 8px; } /* Roman-numeral "image" for numbers 1–10. The 1:1 square frame is reused — same dimensions as any kanji's photo — but instead of probing an asset, the card carries a `digit` field (I, II, … X) that we paint as a large serif numeral on the paper-2 background. Reinforces the numeric meaning visually and pairs more cleanly than a missing-illustration placeholder would. */ .testcard-image-digit { background: var(--paper-2); } .testcard-digit { font-family: var(--serif); font-weight: 400; font-size: clamp(72px, 9vw, 124px); line-height: 1; color: var(--ink); letter-spacing: 0.02em; user-select: none; /* Slight optical lift — Roman numerals look better when not perfectly centered on the baseline. */ transform: translateY(-0.02em); } /* Long digits (4+ chars — currently only 1000 for 千) need to shrink so they don't overflow the 1:1 image frame. Tabular figures and a tighter tracking keep the four numerals from feeling cramped. */ .testcard-digit[data-digit-long="1"] { font-size: clamp(44px, 5.5vw, 78px); letter-spacing: -0.01em; font-feature-settings: 'tnum' 1; } .testcard-glyph { /* font-family is set inline per-card from APP.flashGlyphFont so the user can flip between mincho / gothic / kyokasho / brush without affecting the rest of the page. Sized down 15% with the image reduction so the column stays proportional. */ font-family: var(--font-title); font-weight: 600; font-size: clamp(64px, 7vw, 100px); line-height: 1; color: var(--ink); margin-top: 2px; letter-spacing: 0.02em; } .testcard-readings { display: flex; align-items: baseline; gap: 6px; margin-top: -8px; color: var(--ink-3); } .testcard-reading-label { font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--ink-4); letter-spacing: 0.02em; } .testcard-reading-val { font-family: var(--testcard-text-font); font-size: 14px; color: var(--ink-2); } /* Hover-to-play readings — adds a quiet speaker icon next to any reading or example word. The icon space is RESERVED at zero opacity so revealing it on hover does not shift the layout (multiple readings sit inline, an unreserved expansion would jitter the row). Reused for kun, on, and each example kanji compound. Triggers TTS via the existing global [data-speak] click delegate. */ .read-tts { position: relative; cursor: pointer; border-bottom: 1px dotted transparent; transition: border-color .15s, color .15s; } .read-tts:hover { border-bottom-color: rgba(141,102,48,0.35); } .read-tts:hover { color: var(--ink); } .read-tts-icon { display: inline-flex; align-items: center; margin-left: 5px; opacity: 0; color: var(--ink-3); vertical-align: middle; transition: opacity .2s, color .15s; pointer-events: none; /* parent owns the click */ } .read-tts:hover .read-tts-icon { opacity: 1; } .read-tts:hover .read-tts-icon { color: var(--gold-dark); } .read-tts-icon svg { width: 11px; height: 11px; } /* When TTS plays, briefly pulse the icon — gives the learner a visible confirmation that the sound actually fired. Pure CSS, JS toggles the class on click via the existing TTS handler. */ .read-tts.is-speaking .read-tts-icon { opacity: 1; color: var(--gold-dark); } /* Example kanji compound — same affordance, sized to its row's baseline. The icon sits at the END of the compound so the kanji itself stays the primary read. */ .testcard-ex-kanji.read-tts .read-tts-icon svg { width: 12px; height: 12px; } .testcard-reading-dot { color: var(--ink-4); font-size: 11px; margin: 0 4px; } /* Right column — the info pane. The left border draws the visual divider between the two columns. */ .testcard-right { padding-left: 40px; border-left: 1px solid var(--paper-edge); display: flex; flex-direction: column; justify-content: center; /* vertically center the info pane */ gap: 0; min-height: 0; } /* (Font pickers moved out of the card into the top control row. See .flash-top-fontpickers above.) */ .testcard-section { padding: 10px 0; } .testcard-eyebrow { font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; } .testcard-meaning { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink); letter-spacing: 0.01em; } .testcard-rule { height: 0; border-top: 1px dashed var(--paper-edge); margin: 6px 0; } /* Examples list — each row uses a dotted leader between the romaji and the English gloss, like a table-of-contents in a printed book. */ .testcard-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .testcard-ex { display: grid; grid-template-columns: minmax(72px, auto) auto 1fr auto; align-items: baseline; gap: 14px; line-height: 1.2; } .testcard-ex-kanji { font-family: var(--testcard-text-font); font-weight: 500; font-size: 18px; color: var(--ink); letter-spacing: 0.02em; } .testcard-ex-romaji { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); letter-spacing: 0.08em; } /* The dotted leader is drawn with a repeating background — a row of small dots vertically centered on the row baseline. */ .testcard-ex-leader { display: block; min-height: 1em; border-bottom: 1px dotted var(--ink-4); transform: translateY(-3px); opacity: 0.7; } .testcard-ex-en { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); text-align: right; white-space: nowrap; } /* Meta row — Heisig chip + strokes count, sitting in a quiet row. */ .testcard-meta { display: flex; align-items: center; gap: 10px; padding: 6px 0 14px; } .testcard-strokes { margin-left: auto; padding: 3px 12px; background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 999px; font-family: var(--serif-jp); font-size: 12px; color: var(--ink-3); } /* Related-kanji block — sits below a hairline (visual separator from the meta row above). Two columns: ALSO READS + SEE ALSO. */ .testcard-related { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 6px; padding-top: 18px; } .testcard-related-block { display: flex; flex-direction: column; gap: 8px; } .testcard-related .testcard-eyebrow { margin-bottom: 4px; } .testcard-chips { display: flex; flex-wrap: wrap; gap: 6px; } .testcard-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 12px; background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 4px; cursor: pointer; transition: background .12s, border-color .12s, transform .15s; /* Long glosses like "character / letter" stay on one line — the chip grows horizontally, doesn\'t wrap. */ white-space: nowrap; } .testcard-chip:hover { border-color: var(--gold-soft); transform: translateY(-1px); } .testcard-chip-kanji { font-family: var(--testcard-text-font); font-weight: 500; font-size: 18px; color: var(--ink); line-height: 1; } .testcard-chip-en { font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--ink-3); white-space: nowrap; } /* Footer row — sits at the bottom of the card, full-width, separated from the 2-col body by a hairline. Heisig + strokes on the left, prev/next navigation on the right. Two ends of a single horizontal beam — same vertical alignment, same breathing room. */ .testcard-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--paper-edge); margin-top: 6px; } /* In the editorial card the heisig chip sits at the bottom-left of the footer. Its default tooltip centers above the chip via translateX(-50%), which means the tooltip\'s left half extends past the card\'s left edge — and gets clipped by .main-inner\'s overflow: hidden (set to keep the editorial layout viewport-bounded). Anchor the tooltip to the chip\'s LEFT edge here so it extends rightward into the card body where there\'s plenty of room. */ .testcard-footer-meta .heisig-chip .heisig-tip { left: 0; transform: none; } .testcard-footer-meta .heisig-chip .heisig-tip::after { left: 16px; transform: none; } /* Radical-card variant — the radical card has its own padding scheme so we add a small extra gap above the footer for visual balance. */ .testcard-footer.radical-footer { margin-top: 18px; } .testcard-footer-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Both chips sit on the same horizontal axis in the footer. The heisig chip has a legacy `margin-top: 6px` for older contexts — zero it out here so the chip aligns with the strokes pill beside it. */ .testcard-footer-meta .heisig-chip { margin-top: 0; padding: 4px 10px 4px 6px; /* match strokes chip vertical height */ border-radius: 999px; /* same pill silhouette as 3画 */ } .testcard-footer-meta .heisig-chip .h-icon { /* Force baseline-neutral alignment inside the chip — the h-icon sits centered, never sticking above or below the kw text. */ align-self: center; line-height: 1; } .testcard-footer-meta .testcard-strokes { margin-left: 0; padding: 4px 12px; line-height: 1; } /* Prev / next nav buttons — outlined "prev" + filled gold "next." Above each button sits a small furigana label (まえ / つぎ) so the learner sees the reading of 前 / 次 while pressing them. */ .testcard-footer-nav { display: flex; align-items: flex-end; gap: 10px; } .testcard-nav-btn { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; padding: 0; background: transparent; border: none; cursor: pointer; transition: transform .15s; } .testcard-nav-btn:hover { transform: translateY(-1px); } .testcard-nav-btn:active { transform: translateY(0); } .testcard-nav-furi { font-family: var(--serif-jp); font-size: 11px; color: var(--ink-3); text-align: center; margin-bottom: 4px; letter-spacing: 0.06em; line-height: 1; user-select: none; } .testcard-nav-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 80px; padding: 9px 16px; background: var(--paper); border: 1.5px solid var(--gold-dark); border-radius: 6px; color: var(--gold-dark); font-family: var(--font-title); font-weight: 600; font-size: 18px; line-height: 1; transition: background .12s, color .12s, border-color .12s; } .testcard-nav-btn.is-primary .testcard-nav-label { background: var(--gold-dark); color: var(--paper); border-color: var(--gold-dark); } .testcard-nav-btn:hover .testcard-nav-label { background: color-mix(in srgb, var(--gold-soft) 30%, var(--paper) 70%); } .testcard-nav-btn.is-primary:hover .testcard-nav-label { background: var(--ink-2); border-color: var(--ink-2); } .testcard-nav-arrow { font-size: 16px; line-height: 1; } /* ─── Review mode (FSRS) chrome ────────────────────────────────────── The card template is untouched; review wraps it with a meta line, the reveal / rating bar (reusing the testcard-nav-btn grammar — furigana mini-label over the label), and a quiet session close. Deliberately NOT drill-app styled: rating chips are ink-uniform, the interval preview is the information, and また carries a single vermilion underline (the card returns to you, marked in the logo's red). */ .flash-review { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 8px; } .flash-review .flash-deck { width: 100%; } .flash-review-meta { width: 100%; max-width: 920px; display: flex; align-items: baseline; gap: 16px; padding: 0 4px; } .review-pos, .review-deck { font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: .06em; color: var(--ink-3); } .review-deck { flex: 1; } .review-exit { appearance: none; background: none; border: 0; padding: 4px 6px; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-3); cursor: pointer; border-bottom: 1px dotted var(--ink-4); } .review-exit:hover { color: var(--ink); } .review-exit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .review-bar { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .review-bar .testcard-nav-btn { min-width: 104px; } .review-bar .testcard-nav-furi { min-height: 14px; } .review-rate-again .testcard-nav-label { box-shadow: inset 0 -2px 0 var(--accent-vermilion); } .review-kbd-hint { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-4); letter-spacing: .04em; } /* The review card is its own lean template (reviewCardHTML) — a bare prompt and a spare confirmation, NOT the full browse spread. Front is the kanji alone; back adds the image, meaning, and kun/on readings. */ .review-card { width: 100%; max-width: 920px; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 48px 32px; background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 6px; box-shadow: 0 2px 14px var(--paper-shadow); } .review-card-glyph { font-size: clamp(96px, 18vw, 168px); line-height: 1.1; color: var(--ink); letter-spacing: .02em; text-align: center; overflow-wrap: anywhere; } .review-card.is-back .review-card-glyph { font-size: clamp(72px, 12vw, 120px); } .review-card-pair { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; } .review-card-image { width: 190px; height: 190px; } .review-card-image image-slot { width: 100%; height: 100%; display: block; } /* No image on file → a readonly image-slot hides itself (its own :host([readonly]:not([data-filled])) rule); collapse the 190px box too so imageless cards don't carry a hollow square. data-filled lives on the host (light DOM), so :has() can see it. */ .review-card-image:has(image-slot:not([data-filled])) { display: none; } .review-card-meaning { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-2); text-align: center; } .review-card-readings { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; justify-content: center; } .review-reading { display: inline-flex; align-items: baseline; gap: 8px; } .review-reading-label { font-family: var(--serif); font-style: italic; font-size: 12px; letter-spacing: .08em; color: var(--ink-4); } .review-reading-value { font-family: var(--serif-jp); font-size: 18px; color: var(--ink-2); } .review-reading-dot { color: var(--ink-4); } .review-done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 96px 24px 48px; text-align: center; } .review-done-ja { font-family: var(--serif-jp); font-size: 30px; font-weight: 500; color: var(--ink); letter-spacing: .08em; } .review-done-en { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-3); } .review-done-rule { width: 72px; margin: 10px 0 6px; } .review-learn { margin-top: 4px; } @media (max-width: 760px) { .review-bar { gap: 8px; } .review-bar .testcard-nav-btn { min-width: 0; flex: 1 1 40%; } .flash-review-meta { flex-wrap: wrap; } } /* ─── Flip card (front ↔ back) ──────────────────────────────────────── The editorial card flips on its Y-axis to reveal a back face that carries the stroke-order GIF, the constituent radicals, and writing notes. The footer (heisig + flip btn + prev/next) lives OUTSIDE the flip so it stays accessible from either side. Front is in normal flow (drives the height); back is absolute-positioned over the same box. `transform-style: preserve-3d` on the inner wrapper lets both faces share a 3D context so backface-visibility correctly hides the face that's currently rotated away from the viewer. */ .testcard-flip-wrap { position: relative; perspective: 1600px; flex: 1; min-height: 0; } .testcard-flip-inner { position: relative; width: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.34,1.16,.64,1); } .testcard-flip-wrap[data-flipped="true"] .testcard-flip-inner { transform: rotateY(180deg); } .testcard-flip-front, .testcard-flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Front drives the height — it's in normal flow. */ .testcard-flip-front { position: relative; } /* Back overlays the same box; pre-rotated so it faces the viewer once the inner wrapper has been rotated 180°. Allows internal scrolling if the back's content (gif + composition + notes + credit) is taller than the front-driven height — better than clipping. */ .testcard-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; gap: 14px; padding: 4px 0 0; overflow-y: auto; } /* Reduced-motion: skip the 3D rotation and cross-fade instead. Same state model, just a different transition. The user opted into less motion site-wide so the flip respects that. */ @media (prefers-reduced-motion: reduce) { .testcard-flip-inner { transition: opacity .25s ease; transform: none !important; } .testcard-flip-wrap[data-flipped="true"] .testcard-flip-front { opacity: 0; pointer-events: none; } .testcard-flip-wrap[data-flipped="true"] .testcard-flip-back { opacity: 1; } .testcard-flip-back { opacity: 0; transition: opacity .25s ease; } .testcard-flip-front, .testcard-flip-back { backface-visibility: visible; -webkit-backface-visibility: visible; } .testcard-flip-back { transform: none; } } /* ─── Back face content ────────────────────────────────────────────── A vertically-stacked layout: eyebrow strip (kanji + meaning so the learner doesn't lose context), stroke-order GIF (mix-blend: multiply so the white field of the gif dissolves into the paper texture and only the ink reads), composition chips, optional writing note, credit footer. Generous padding mirrors the front face's frame. */ .testcard-back-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--paper-edge); } .testcard-back-glyph { font-family: var(--font-title); font-weight: 600; font-size: 34px; color: var(--ink); line-height: 1; } .testcard-back-readings { font-family: var(--serif-jp); font-size: 13px; color: var(--ink-3); letter-spacing: 0.04em; } .testcard-back-meaning { margin-left: auto; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-2); } .testcard-back-body { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 36px; align-items: start; flex: 1; min-height: 0; } .testcard-back-stroke { position: relative; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 4px; aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; } .testcard-stroke-gif { width: 100%; height: 100%; object-fit: contain; /* Multiply blends the gif's white field into the paper texture so only the brush strokes register — feels like ink on the same paper stock as the card. */ mix-blend-mode: multiply; background: transparent; } .testcard-stroke-gif.is-missing { display: none; } .testcard-stroke-missing { display: none; padding: 20px 24px; text-align: center; color: var(--ink-3); font-family: var(--serif); font-style: italic; font-size: 13px; line-height: 1.5; } .testcard-stroke-gif.is-missing + .testcard-stroke-missing { display: block; } .testcard-stroke-missing a { color: var(--gold-dark); text-decoration: underline dotted; } /* Multi-kanji back face — when a compound card (元気, 御飯, 烏賊) is showing, the stroke-order area splits into N equal panels side by side, one per kanji. A small label under each panel re-states the kanji so the learner knows which stroke order belongs to which half of the compound. Single-kanji cards (the majority) use the default flow above — no flex container needed. Spec §4.4. */ .testcard-back-stroke.is-multi { display: flex; gap: 14px; align-items: stretch; } .testcard-back-stroke.is-multi .testcard-back-stroke-panel { flex: 1; display: flex; flex-direction: column; gap: 4px; } .testcard-back-stroke.is-multi .testcard-stroke-gif { width: 100%; height: auto; display: block; } .testcard-back-stroke-label { font-family: var(--serif-jp); font-size: 16px; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1; } .testcard-back-info { display: flex; flex-direction: column; gap: 18px; } /* Composition radicals — chips arranged in a flowing row, sorted by Kangxi order (stroke count, then within-stroke index). Each chip shows the radical glyph + a short English gloss; chips that correspond to cards in our own deck become clickable to jump to that radical's card. */ .testcard-compose-chips { display: flex; flex-wrap: wrap; gap: 8px; } .testcard-compose-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 999px; font-family: var(--serif-jp); color: var(--ink-2); transition: background .12s, border-color .12s, color .12s; } .testcard-compose-chip.is-linkable { cursor: pointer; border-color: rgba(141,102,48,0.35); } .testcard-compose-chip.is-linkable:hover { background: var(--paper-2); border-color: var(--gold); color: var(--ink); } .testcard-compose-glyph { font-size: 18px; line-height: 1; font-weight: 600; color: var(--ink); } .testcard-compose-gloss { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-3); } .testcard-compose-empty { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-4); } .testcard-back-note p { margin: 0; font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink-2); } .testcard-back-credit { margin-top: auto; padding-top: 10px; border-top: 1px dashed rgba(141,102,48,0.18); font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; text-align: right; } .testcard-back-credit a { color: inherit; text-decoration: underline dotted; } /* ─── 3-block footer (meta · flip · nav) ──────────────────────────── Replaces the old 2-block space-between layout. Grid keeps the flip button centered regardless of how wide the meta or nav blocks grow. The flip button has its own button style — outlined paper-2 chip with the kanji + furigana stack, distinct from the nav buttons (which carry the primary navigational accent). */ .testcard-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; } .testcard-footer-meta { justify-self: start; } .testcard-footer-flip { justify-self: center; } .testcard-footer-nav { justify-self: end; } .testcard-flip-btn { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; padding: 0; background: transparent; border: none; cursor: pointer; transition: transform .15s; } .testcard-flip-btn:hover { transform: translateY(-1px); } .testcard-flip-btn:active { transform: translateY(0); } .testcard-flip-btn .testcard-nav-furi { /* Reuse furi label style from the nav buttons so the visual rhythm across the 3 blocks reads as a single horizontal beam. */ font-family: var(--serif-jp); font-size: 11px; color: var(--ink-3); text-align: center; margin-bottom: 4px; letter-spacing: 0.06em; line-height: 1; user-select: none; } .testcard-flip-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 64px; padding: 9px 14px; background: var(--paper-2); border: 1.5px solid rgba(141,102,48,0.35); border-radius: 6px; color: var(--ink-2); font-family: var(--font-title); font-weight: 600; font-size: 18px; line-height: 1; transition: background .12s, color .12s, border-color .12s; } .testcard-flip-btn:hover .testcard-flip-label { background: var(--paper); border-color: var(--gold); color: var(--ink); } .testcard-flip-btn[data-flipped="true"] .testcard-flip-label { background: var(--paper); border-color: var(--gold-dark); color: var(--gold-dark); } /* Heisig "no-English" mini-chip — pill-shaped same as the full chip but without the keyword and without the hover tooltip. The H badge + frame number remain so the learner can still anchor to the Heisig entry without seeing the meaning. */ .heisig-chip-noen .heisig-tip { display: none !important; } .heisig-chip-noen { cursor: default; } /* Example row with English hidden — the leader line + gloss collapse out, so the row reads as a tidy [kanji · romaji] pair without an awkward trailing void where the meaning used to sit. */ .testcard-ex-noen .testcard-ex-leader, .testcard-ex-noen .testcard-ex-en { display: none; } @media (max-width: 900px) { .testcard { grid-template-columns: 1fr; gap: 24px; } .testcard-right { padding-left: 0; padding-top: 24px; border-left: none; border-top: 1px solid var(--paper-edge); } .testcard-related { grid-template-columns: 1fr; } .flash-card.testcard-frame { padding: 20px 22px; } .testcard-footer { flex-direction: column; align-items: stretch; gap: 12px; } .testcard-footer-nav { justify-content: space-between; } } /* ─── View toggle (card / list) ────────────────────────────────────── A small segmented control above the deck. Two buttons, no fuss — identifies the current view at a glance and swaps with one click. */ /* Top control row — sits above the card. Three groups laid out in a centered flex row: 1. view toggle (old / new / list) 2. font dropdowns (glyph + text) — appears only in NEW view 3. English toggle (英 / —) The whole row centers horizontally above the card. */ .flash-top-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0 auto 10px; } .flash-view-toggle { display: flex; width: max-content; margin: 0; padding: 2px; background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 8px; gap: 2px; } /* Glyph + Text font dropdowns inside the top row. Each carries a tiny italic label above (or beside) its dropdown trigger. */ .flash-top-fontpickers { display: flex; align-items: center; gap: 10px; } .flash-top-fontpicker { display: inline-flex; align-items: center; gap: 6px; } .flash-top-fontpicker-label { font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; } /* Native