/* ===================================================================== Study Hiragana — shared site stylesheet (evolved "Tegami" system) --------------------------------------------------------------------- Visual tokens live in :root so every page inherits one palette, and the embedded KanaCanvas / KanaNav modules (which read --accent, --red, --bg, etc. via getComputedStyle + var() fallbacks) theme correctly. Dark mode = "inkstone": warm charcoal + a brighter vermillion. Toggle by adding `.dark` to . ===================================================================== */ :root{ --page:#f1e9da; --card:#fbf7ef; --inset:#ffffff; --ink:#221c19; --muted:#5c4a43; --faint:#8d756d; --line:#e6dcca; --line-2:#d8c9ad; --guide:rgba(33,28,26,0.07); --accent:#b1322a; --accent-bg:rgba(177,50,42,0.07); --accent-line:rgba(177,50,42,0.20); --accent-hover:rgba(177,50,42,0.12); /* Aliases consumed by the embedded canvas modules */ --bg:var(--card); --bg-outer:var(--page); --text:var(--ink); --text-muted:var(--muted); --text-faint:var(--faint); --subtle-border:var(--line); --container-border:var(--line-2); --accent-border:var(--accent-line); --green:#2f8f5b; --orange:#bd7a14; --red:#b1322a; /* Swipe / Fall / Rain game tokens — match css/theme.css so the per-round timer fill, urgent state, and subtle backgrounds render visibly. The timer-fill is the prominent countdown bar drained over each Swipe round; without these vars the bar paints transparent. */ --subtle-bg:rgba(179,42,42,0.03); --timer-bg:rgba(179,42,42,0.08); --timer-fill:rgba(179,42,42,0.55); --timer-urgent:rgba(179,42,42,0.85); --shadow-card:0 18px 50px rgba(60,30,20,0.07),0 1px 0 rgba(255,255,255,0.5) inset; --font-ui:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,sans-serif; --font-display:'Newsreader',Georgia,serif; --font-kana:'Noto Serif JP',serif; --font-kana-sans:'Noto Sans JP',sans-serif; } html.dark{ --page:#161210; --card:#221c17; --inset:#2a241e; --ink:#ece3d4; --muted:#b6a692; --faint:#8c7d6c; --line:#3a3128; --line-2:#4a3e30; --guide:rgba(236,227,212,0.10); --accent:#e07a60; --accent-bg:rgba(224,122,96,0.12); --accent-line:rgba(224,122,96,0.30); --accent-hover:rgba(224,122,96,0.16); --green:#5cc187; --orange:#e0a64a; --red:#e07a60; --subtle-bg:rgba(255,255,255,0.03); --timer-bg:rgba(255,255,255,0.06); --timer-fill:rgba(224,122,96,0.55); --timer-urgent:rgba(255,107,138,0.85); --shadow-card:0 18px 50px rgba(0,0,0,0.40),0 1px 0 rgba(255,255,255,0.04) inset; } *{box-sizing:border-box} html,body{margin:0} body{ background:var(--page); color:var(--ink); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; line-height:1.6; } a{color:inherit} img{max-width:100%} /* ── Layout ──────────────────────────────────────────────────────── */ .wrap{max-width:1000px;margin:0 auto;padding:0 28px} .page{min-height:100vh;background:var(--page);padding-bottom:64px} /* ── Header ──────────────────────────────────────────────────────── */ .site-header{ position:sticky;top:0;z-index:30; backdrop-filter:saturate(1.1) blur(8px); background:color-mix(in srgb, var(--page) 86%, transparent); border-bottom:1px solid var(--line); } .site-header__inner{ max-width:1000px;margin:0 auto;padding:14px 24px; display:flex;align-items:center;gap:12px;flex-wrap:nowrap; } .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto} .brand__mark{ width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff; display:flex;align-items:center;justify-content:center; font-family:var(--font-kana);font-size:21px;line-height:1; box-shadow:0 2px 8px rgba(177,50,42,0.28); } .brand__name{font-size:17px;font-weight:700;letter-spacing:-0.01em;color:var(--ink)} .brand__tld{font-weight:500;color:var(--faint)} /* nav shrinks (and wraps its own items if a verbose language ever needs it) so the util block never gets pushed to a second line — see .util below. */ .nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-left:6px;flex:1 1 auto;min-width:0} .nav a{ text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:600; padding:7px 10px;border-radius:8px;transition:color .2s,background .2s;white-space:nowrap; } .nav a:hover{color:var(--accent);background:var(--accent-bg)} .nav a.is-active{color:var(--accent);background:var(--accent-bg)} .util{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto} .lang{color:var(--faint);font-size:13.5px;font-weight:700;border:1px solid var(--line);background:var(--inset);padding:0 12px;height:38px;display:inline-flex;align-items:center;border-radius:10px} .theme-toggle{ width:38px;height:38px;border-radius:10px;border:1px solid var(--line); background:var(--inset);color:var(--ink);cursor:pointer;font-size:16px; display:flex;align-items:center;justify-content:center;transition:background .2s; } .theme-toggle:hover{background:var(--accent-bg)} /* Mobile nav — hamburger (☰) that collapses .nav into a dropdown panel. Hidden on wide screens; shown below 880px. The panel anchors to the sticky .site-header, so it drops full-width beneath the bar. */ .nav-toggle{ display:none; width:34px;height:34px;border-radius:9px;border:1px solid var(--line); background:transparent;color:var(--muted);cursor:pointer;font-size:17px; align-items:center;justify-content:center;transition:background .2s,color .2s; } .nav-toggle:hover{background:var(--accent-bg);color:var(--accent)} @media(max-width:880px){ .site-header .nav{display:none} .site-header .nav-toggle{display:flex} .site-header.nav-open .nav{ display:flex;flex-direction:column;gap:2px; position:absolute;top:100%;left:0;right:0; background:var(--card);border-bottom:1px solid var(--line); box-shadow:var(--shadow-card);padding:12px 24px 16px;margin:0; } .site-header.nav-open .nav a{padding:10px 12px;font-size:15px} } /* ── Card / article ──────────────────────────────────────────────── */ .card{ background:var(--card);border:1px solid var(--line-2);border-radius:20px; padding:52px 56px;margin-top:12px;box-shadow:var(--shadow-card); } /* ── Section header rhythm ───────────────────────────────────────── */ .section{margin-top:44px} .section__head{ display:flex;align-items:baseline;gap:13px;margin-bottom:18px; padding-bottom:13px;border-bottom:1px solid var(--line); } .section__num{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent)} .h2{margin:0;font-family:var(--font-display);font-weight:500;font-size:27px;color:var(--ink)} .prose p{margin:0 0 14px;color:var(--ink);font-size:16px;line-height:1.75;max-width:62ch} .prose p:last-child{margin-bottom:0} .prose p.soft{color:var(--muted)} .p-note{margin:0 0 16px;color:var(--muted);font-size:16px;line-height:1.7;max-width:62ch} .p-note--tight{margin-bottom:14px} /* ── Hero (character page) ───────────────────────────────────────── */ .hero{ display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center; padding-bottom:38px;border-bottom:1px solid var(--line); } .hero__tile{ width:240px;height:240px;border-radius:18px;border:1px solid var(--line); background: linear-gradient(var(--guide),var(--guide)) center/100% 1px no-repeat, linear-gradient(var(--guide),var(--guide)) center/1px 100% no-repeat, var(--inset); display:flex;align-items:center;justify-content:center; } .hero__glyph{font-family:var(--font-kana);font-size:168px;line-height:1;color:var(--accent)} .eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} .title-xl{ margin:8px 0 6px;font-family:var(--font-display);font-weight:500;font-size:58px; line-height:1;color:var(--ink);letter-spacing:-0.01em; } .title-xl .romaji-kana{color:var(--faint);font-weight:400;font-size:30px} .lead{margin:0;color:var(--muted);font-size:17px;line-height:1.6;max-width:46ch;text-wrap:pretty} .chips{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 18px} .chip{ font-size:12.5px;font-weight:600;color:var(--muted);background:transparent; border:1px solid var(--line);border-radius:999px;padding:4px 12px; } .chip--accent{color:var(--accent);background:var(--accent-bg);border-color:var(--accent-line)} /* ── Pronunciation block ─────────────────────────────────────────── */ .pron{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start} .pron__badge{ text-align:center;background:var(--inset);border:1px solid var(--line); border-radius:14px;padding:22px 28px;min-width:150px; } .pron__say{font-family:var(--font-display);font-size:44px;color:var(--accent);line-height:1} .pron__like{font-size:13px;color:var(--faint);margin-top:6px} /* ── Animated stroke-order reference ─────────────────────────────── */ .stroke-anim{ margin:24px auto 0; padding:18px 18px 14px; background:var(--inset); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; align-items:center; gap:10px; width:fit-content; max-width:100%; } .stroke-anim img{ width:180px; height:180px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:8px; } .stroke-anim figcaption{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:600; } /* ── Stroke steps ────────────────────────────────────────────────── */ .steps{display:grid;gap:12px;margin-top:30px} .step{display:flex;gap:16px;align-items:flex-start} .step__num{ flex-shrink:0;width:30px;height:30px;border-radius:8px;background:var(--accent-bg); border:1px solid var(--accent-line);color:var(--accent);font-weight:700;font-size:14px; display:flex;align-items:center;justify-content:center; } .step p{margin:0;color:var(--ink);font-size:15.5px;line-height:1.65} /* ── Canvas host + reset ─────────────────────────────────────────── */ .canvas-host{margin:22px auto 10px} .canvas-actions{text-align:center} .btn-reset{ background:transparent;border:1px solid var(--accent-line);color:var(--accent); padding:7px 16px;border-radius:8px;cursor:pointer;font-family:inherit; font-size:13px;font-weight:600; } .btn-reset:hover{background:var(--accent-bg)} /* ── Origin ──────────────────────────────────────────────────────── */ .origin{ display:flex;gap:28px;align-items:center;background:var(--inset); border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:12px;padding:24px 28px;flex-wrap:wrap; } .origin__glyphs{display:flex;align-items:center;gap:16px} .origin__from{font-family:var(--font-kana);font-size:60px;color:var(--muted);line-height:1} .origin__to{font-family:var(--font-kana);font-size:60px;color:var(--accent);line-height:1} .origin__arrow{color:var(--faint);font-size:26px} .origin p{flex:1;min-width:260px;margin:0;color:var(--ink);font-size:15.5px;line-height:1.7} /* ── Vocabulary grid ─────────────────────────────────────────────── */ .vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px} .vocab--tight{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px} .vocab__card{background:var(--inset);border:1px solid var(--line);border-radius:11px;padding:13px 15px} .vocab--tight .vocab__card{border-radius:10px;padding:11px 14px} .vocab__jp{display:block;font-family:var(--font-kana-sans);font-size:21px;font-weight:500;color:var(--ink)} .vocab--tight .vocab__jp{font-size:19px;font-weight:400} .vocab__romaji{display:block;color:var(--faint);font-size:12px;margin:2px 0 3px} .vocab__meaning{display:block;color:var(--muted);font-size:13.5px} .vocab--tight .vocab__meaning{margin-top:2px} /* ── CTA band ────────────────────────────────────────────────────── */ .cta{ margin-top:40px;background:var(--accent-bg);border:1px solid var(--accent-line); border-radius:16px;padding:30px;text-align:center; } .cta__title{margin:0 0 8px;font-family:var(--font-display);font-weight:500;font-size:24px;color:var(--accent)} .cta p{margin:0 auto 20px;color:var(--muted);font-size:15.5px;max-width:48ch} .cta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .btn{ display:inline-block;text-decoration:none;cursor:pointer;font-family:inherit; font-weight:600;font-size:15px;border-radius:9px;padding:12px 22px; border:1.5px solid transparent;transition:background .2s,transform .2s; } .btn:hover{transform:translateY(-1px)} .btn--primary{background:var(--accent);color:#fff} .btn--ghost{background:transparent;color:var(--accent);border-color:var(--accent)} .btn--ghost:hover{background:var(--accent-bg)} .btn--ghost-soft{background:transparent;color:var(--accent);border-color:var(--accent-line);padding:10px 20px;font-size:14.5px} .btn--sm{padding:11px 20px;font-size:14.5px} /* ── Vowel-row strip (compact nav band, top of single-char pages) ── */ .vrow-strip{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; margin-top:22px;padding:14px 18px; background:var(--inset);border:1px solid var(--line);border-radius:14px; } .vrow-strip__label{ font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--faint);font-weight:700;flex-shrink:0; } .vrow-strip__tiles{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:200px} .vrow-strip__more{ margin-left:auto;background:transparent;border:none;text-decoration:none; color:var(--accent);font-weight:600;font-size:14px;cursor:pointer; font-family:inherit;padding:0;white-space:nowrap; } .vrow-strip__more:hover{text-decoration:underline} @media(max-width:560px){ .vrow-strip__more{margin-left:0} } /* ── Vowel row (footer-style, used inside aiueo.html) ────────────── */ .vrow{display:flex;gap:9px;flex-wrap:wrap} .vrow__tile{ display:flex;flex-direction:column;align-items:center;gap:3px; padding:12px 18px;min-width:64px;border-radius:11px; background:var(--inset);border:1px solid var(--line);cursor:pointer; font-family:inherit;text-decoration:none;transition:border-color .2s,transform .2s; } .vrow__tile:hover{border-color:var(--accent);transform:translateY(-2px)} .vrow__tile-kana{font-family:var(--font-kana);font-size:28px;line-height:1;color:var(--ink)} .vrow__tile-romaji{font-size:12px;color:var(--faint)} .vrow__tile--active{background:var(--accent);border-color:var(--accent);cursor:default} .vrow__tile--active:hover{transform:none} .vrow__tile--active .vrow__tile-kana{color:#fff} .vrow__tile--active .vrow__tile-romaji{color:rgba(255,255,255,0.85)} .vrow__more{ display:inline-block;margin-top:18px;background:transparent;border:none; color:var(--accent);font-weight:600;font-size:15px;cursor:pointer; font-family:inherit;padding:0;text-decoration:none; } .vrow__more:hover{text-decoration:underline} /* ── Vowel-row page header ───────────────────────────────────────── */ .page-head{text-align:center;padding-bottom:38px;border-bottom:1px solid var(--line)} .page-head__kana{font-family:var(--font-kana);font-size:84px;line-height:1;color:var(--accent);letter-spacing:8px} .page-head__title{margin:18px 0 8px;font-family:var(--font-display);font-weight:500;font-size:40px;color:var(--ink)} .page-head__sub{margin:0 auto;color:var(--muted);font-size:17px;max-width:60ch;line-height:1.6} /* ── Tip box ─────────────────────────────────────────────────────── */ .tip{ background:var(--inset);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:10px;padding:15px 19px;margin-top:8px; } .tip strong{color:var(--accent)} .tip span{color:var(--ink);font-size:15.5px} /* ── Pronunciation table ─────────────────────────────────────────── */ .table-wrap{border:1px solid var(--line);border-radius:13px;overflow:hidden} .ptable{width:100%;border-collapse:collapse} .ptable th{ text-align:left;padding:12px 16px;font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--accent);font-weight:700;background:var(--accent-bg); } .ptable tbody tr{border-top:1px solid var(--line)} .ptable td{padding:11px 16px;color:var(--muted);font-size:14.5px} .ptable td.k{font-family:var(--font-kana);font-size:26px;color:var(--accent)} /* Each row links to /hiragana/ — anchor wraps the kana cell so the most prominent visual is the click target. Color inherits so the kana stays accent-tinted; a small chevron hints at the link. */ .ptable td.k a{ color:inherit;text-decoration:none; display:inline-flex;align-items:center;gap:6px; } .ptable td.k a:hover{text-decoration:underline;text-underline-offset:4px} .ptable-arrow{ font-size:18px;color:var(--muted);opacity:.55; transition:opacity .15s, transform .15s; } .ptable td.k a:hover .ptable-arrow{opacity:1;transform:translateX(2px)} /* Inline accent link inside p-note + similar prose contexts. */ .inline-link{ color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap; } .inline-link:hover{text-decoration:underline;text-underline-offset:3px} /* ── Editorial language picker (replaces the static "EN ▾" span) ─── */ .editorial-lang-picker{position:relative;display:inline-block} .editorial-lang-btn{ display:inline-flex;align-items:center;gap:4px; background:transparent;border:1px solid var(--line); color:var(--muted);font-family:inherit;font-size:13px;font-weight:600; padding:3px 9px;border-radius:8px;cursor:pointer; letter-spacing:.04em; } .editorial-lang-btn:hover{border-color:var(--accent);color:var(--accent)} .editorial-lang-btn__caret{font-size:10px;opacity:.7} .editorial-lang-menu{ display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:200; margin:0;padding:6px;list-style:none; background:var(--bg);border:1px solid var(--container-border); border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:160px; } .editorial-lang-picker.open .editorial-lang-menu{display:block} .editorial-lang-menu__item{ display:block;width:100%;text-align:left; background:transparent;border:none;cursor:pointer; padding:7px 10px;border-radius:6px; font-family:inherit;font-size:13.5px;color:var(--ink); } .editorial-lang-menu__item:hover{background:var(--inset)} .editorial-lang-menu__item.is-active{ color:var(--accent);font-weight:600; background:var(--accent-bg); } .ptable td.r{font-weight:600;color:var(--ink)} .ptable td.n{color:var(--faint);font-size:14px} /* ── Vowel reference cards ───────────────────────────────────────── */ .vcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:13px} .vcard{ display:flex;flex-direction:column;align-items:center;background:var(--inset); border:1px solid var(--line);border-radius:14px;padding:20px 16px;cursor:pointer; font-family:inherit;color:inherit;text-decoration:none;transition:border-color .2s,transform .2s; } .vcard:hover{border-color:var(--accent);transform:translateY(-3px)} .vcard__glyph{font-family:var(--font-kana);font-size:60px;color:var(--accent);line-height:1;margin-bottom:6px} .vcard__romaji{font-size:17px;font-weight:700;color:var(--ink)} .vcard__like{font-size:13px;color:var(--muted);margin:4px 0} .vcard__strokes{font-size:12px;color:var(--faint);margin-bottom:10px} .vcard__img{width:78px;height:78px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:7px} /* ── Practice band (vowel page) ──────────────────────────────────── */ .practice{ margin-top:44px;background:var(--accent-bg);border:1px solid var(--accent-line); border-radius:16px;padding:32px 28px;text-align:center; } .practice__title{margin:0 0 10px;font-family:var(--font-display);font-weight:500;font-size:24px;color:var(--accent)} .practice p{margin:0 auto 18px;color:var(--muted);font-size:15.5px;max-width:52ch} .practice__note{margin:16px auto 0 !important;color:var(--faint);font-size:13px;font-style:italic;max-width:48ch} /* Slim lesson heading — sits at the top of the article card on the editorial / recall pages. Two lines: an uppercase eyebrow ("Hiragana · Vowel row") and the lesson title, with an optional inline subtitle. Designed to take ≤56px on mobile so the writing canvas is reachable above the fold. */ .lesson-head{ display:flex;flex-direction:column;gap:2px; margin:0 0 14px;text-align:center; } .lesson-head__eyebrow{ font-size:11px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--accent); } .lesson-head__title{ margin:0;font-family:var(--font-display);font-weight:500; font-size:22px;line-height:1.2;color:var(--ink); display:flex;align-items:baseline;justify-content:center; gap:10px;flex-wrap:wrap; } .lesson-head__sub{ font-family:var(--font-ui);font-weight:500;font-size:13px; color:var(--muted);letter-spacing:.02em; } @media (max-width:720px){ .lesson-head{margin-bottom:10px} .lesson-head__title{font-size:19px;gap:8px} .lesson-head__sub{font-size:12px} } /* `.practice--lead` — practice band at the top of the vowel-row page. No visible header — the live canvas + the tile row below ARE the page identity. The h1 inside is .sr-only for SEO + screen readers. The pink accent fill + border are stripped so the canvas (which has its own outline) sits cleanly on the article card without nested frames. */ .practice--lead{ margin-top:22px;padding:24px 16px 20px; background:transparent;border:none; } /* Screen-reader-only utility — kept off-screen for sighted users but read by assistive tech and indexed by search engines. */ .sr-only{ position:absolute !important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ===================================================================== Recall mode UI (imported from css/main.css to support the embedded RecallMode integration on the vowel-row page). Includes: - .study-hint-overlay : romaji + tip + draggable advance bar - .advance-bar* : the SRS progress slider - .stroke-feedback / .trace-score : completion chips - body.study-active : whole-page state for Recall ===================================================================== */ .study-hint-overlay{ display:flex;position:absolute;inset:0; flex-direction:column;align-items:center;justify-content:center; gap:6px;pointer-events:none;color:var(--text-faint,#8d756d); text-align:center;padding:0 12px;opacity:0; transition:opacity .4s ease;z-index:6; } /* Overlay is present whenever Recall is active — its children manage their own visibility (center prompt fades on first pen-down; the advance bar at the bottom stays visible throughout the attempt). */ body.study-active .study-hint-overlay{opacity:1} /* Recall mode hides the kana glyph in the character-nav carousel so the user writes from memory instead of copying the tile. The romaji takes the glyph's place as a position label, and the SRS dots stay visible. !important beats the per-tile inline styles set in js/kana-nav.js. */ body.study-active .kana-nav-row .kn-glyph{display:none !important} body.study-active .kana-nav-row .kn-romaji{ font-size:18px !important;color:var(--text,#1f1a1a) !important;margin-top:0 !important; } .study-hint-romaji{ font-size:2.4rem;font-weight:700;color:var(--accent); letter-spacing:.04em;line-height:1;opacity:.85; transition:opacity .25s ease; } .study-hint-prompt{ font-size:.9rem;font-style:italic;opacity:.85; transition:opacity .25s ease; } /* Hide the pre-attempt romaji + tip the moment the user starts drawing, and keep them hidden for the rest of the character (study-touched). Doesn't touch .study-hint-attempts — the advance bar stays visible. */ body.study-drawing .study-hint-ready, body.study-touched .study-hint-ready{ opacity:0;pointer-events:none; transform:translateY(-4px) scale(.96); } /* "Tap to start" button — wraps romaji + tip. Clicking arms Recall drawing for the new character (kana-practice-canvas reads body.study-touched on pointerdown). Center stack with breathing room so the click target is comfortable on touch screens. */ .study-hint-ready{ display:inline-flex;flex-direction:column;align-items:center;gap:4px; /* pointer-events stays off by default — only the armable state below turns it on. Without that, an invisible (opacity:0) button in Trace mode would still swallow canvas taps. */ pointer-events:none;cursor:pointer; background:var(--card,#fbf7ef); border:1.5px dashed var(--accent-border,rgba(177,50,42,0.28)); border-radius:14px; padding:14px 22px 12px; font-family:inherit;color:var(--text-faint,#8d756d); text-align:center; transition:opacity .25s ease, transform .25s ease, border-color .15s ease, background .15s ease; } /* Recall-active AND not yet armed — the only state in which the button is supposed to receive clicks. */ body.study-active:not(.study-touched):not(.study-drawing) .study-hint-ready{ pointer-events:auto; } .study-hint-ready:hover{ border-color:var(--accent,#b1322a); background:var(--inset,#fff); } .study-hint-ready:active{transform:translateY(1px) scale(.99)} .study-hint-cta{ font-size:.72rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--accent,#b1322a); margin-top:2px; } /* Summoned briefly on character start / completion, then minimizes so it doesn't distract mid-write (JS: recall-mode.js attempts-bar controller toggles .is-revealed). Hidden + slightly sunk/shrunk at rest. */ .study-hint-attempts{ position:absolute;left:50%;bottom:14px; transform:translateX(-50%) translateY(6px) scale(.94); min-height:22px;padding:4px 14px 6px;background:var(--bg,#fbf7ef); border:1.5px dashed rgba(33,28,26,.30);border-radius:10px; display:flex;align-items:center;justify-content:center; pointer-events:none; opacity:0; transition:opacity .3s ease, transform .3s ease; } .study-hint-attempts.is-revealed{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); } .advance-bar{position:relative;width:200px;height:14px} .advance-bar-track{ position:absolute;left:0;right:0;top:50%;transform:translateY(-50%); height:2px;background:var(--ink,#221c19);opacity:.55;border-radius:1px; pointer-events:none; } .advance-bar-tick{ position:absolute;top:50%;width:14px;height:14px; background:var(--bg,#fbf7ef);border:2px solid var(--red,#b1322a); border-radius:50%;transform:translate(-50%,-50%); transition:left .45s cubic-bezier(.2,.9,.3,1.1);box-sizing:border-box; } body.study-active:not(.study-drawing) .study-hint-overlay .advance-bar-tick{ pointer-events:auto;cursor:grab;touch-action:none; } body.study-active:not(.study-drawing) .study-hint-overlay .advance-bar-tick.dragging{ cursor:grabbing; } .advance-bar-tick::before{content:'';position:absolute;inset:-8px -12px} .advance-bar-tick.dragging{transition:none} .advance-bar-label{ font-size:.7rem;line-height:1;color:var(--muted,#5c4a43); opacity:.8;white-space:nowrap;pointer-events:none; } .study-hint-attempts > .advance-bar-label-left{margin-right:10px} .study-hint-attempts > .advance-bar-label-right{margin-left:10px} .stroke-feedback{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); font-size:1.1rem;font-weight:700;letter-spacing:.05em; pointer-events:none;opacity:0;transition:opacity .3s; z-index:10;text-shadow:0 1px 4px rgba(0,0,0,.15); } body.study-active .stroke-feedback{display:none} .trace-score{ position:absolute;top:8px;right:12px; font-size:.85rem;font-weight:700;letter-spacing:.03em; pointer-events:none;opacity:0;transition:opacity .3s; z-index:10;text-shadow:0 1px 3px rgba(0,0,0,.15); } /* Recall progress pill (top-left of canvas). The main app keeps the element for backward compat but hides it under v2 SRS. */ .recall-progress{display:none} /* Fail jolt — KanaCanvas adds this to the canvas wrapper for ~500ms when recallFail fires, so the user feels the penalty as a physical shake. */ @keyframes kc-shake-wrong{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} } .shake-wrong{animation:kc-shake-wrong .5s ease-in-out} /* Glow-warn — gentler visual cue for mediocre (40-60%) Recall scores. Adds a soft orange ring around the canvas wrapper for ~800ms. */ @keyframes kc-glow-warn{ 0%,100%{box-shadow:0 0 0 0 rgba(192,122,16,0)} 50% {box-shadow:0 0 0 6px rgba(192,122,16,.35)} } .glow-warn{animation:kc-glow-warn .8s ease-in-out} /* Card area + game stage scaffolding (mirrors css/main.css). Required because ExerciseHost adds `.hidden` to `.card-area` to slide its `.card-area-body` out of view during Swipe/Fall transitions, while the swipe-game partial mounts inside `#game-stage` as a sibling. */ /* The "exercise stage" — outer frame that hosts the writing canvas AND the Swipe/Fall overlays. Under Direction B the visual chrome (gradient + border) lives on the parent `.practice--lead` panel, so this element stays unstyled and lets the Swipe/Fall overlays fill the panel width naturally. */ .card-area-stage{ position:relative;width:100%;margin:0 auto; } .card-area{ display:flex;flex-direction:column;align-items:center;width:100%; position:relative;user-select:none;-webkit-user-select:none; } .card-area-body{ display:flex;flex-direction:column;align-items:center;width:100%; gap:10px;transition:opacity .4s ease, transform .4s ease; } .card-area.hidden .card-area-body{ opacity:0;transform:translateX(-40px);pointer-events:none; } .card-area.hidden{z-index:0} .game-stage{ position:relative;width:100%;display:flex;justify-content:center; min-height:0; } /* When Swipe / Fall are mounted, the overlay needs more vertical room than the resting card-area provides (canvas + toolbar + nav). Without this min-height the per-round timer + session progress bar at the bottom of swipe-game overflow below the visible area. */ body.exercise-active .card-area-stage{min-height:560px} @media (max-width:759px){ body.exercise-active .card-area-stage{min-height:470px} } /* Page-level Recall toolbar — Trace / Recall / Hint buttons that replace the canvas-mounted Trace/Recall tabs. Sit just under the canvas, above the kana-nav row. */ .recall-toolbar{ display:flex;justify-content:center;gap:8px; margin:14px auto 8px;flex-wrap:wrap; } .recall-toolbar__btn{ border:1px solid var(--line);background:var(--inset); color:var(--muted);padding:8px 18px;border-radius:8px; font-family:inherit;font-size:13px;font-weight:600; cursor:pointer;transition:all .2s; } .recall-toolbar__btn:hover{border-color:var(--accent);color:var(--accent)} .recall-toolbar__btn.is-active{ background:var(--accent);border-color:var(--accent);color:#fff; } body.study-active .recall-toolbar__btn--hint{display:inline-block} .recall-toolbar__btn--hint{display:none} /* Play (stroke-order animation) + Hide (outline toggle) are Trace-only tools — in Recall mode the user shouldn't be able to peek at the stroke animation or re-show the faded watermark, since both would short-circuit the "write from memory" exercise. */ body.study-active .recall-toolbar__btn--play, body.study-active .recall-toolbar__btn--eye{display:none} /* ── Button rows / links list ────────────────────────────────────── */ .btn-row{display:flex;gap:10px;flex-wrap:wrap} /* ── Footer ──────────────────────────────────────────────────────── */ .site-footer{text-align:center;color:var(--faint);font-size:13px;margin-top:30px} .site-footer a{color:var(--muted)} /* ── Dark-mode reconciliation for embedded KanaNav buttons ─────────── The module hardcodes #fff on idle char buttons inline; re-theme the idle state so the practice row sits on paper in inkstone mode. The active state (data-active="1") keeps its accent-bg highlight. */ html.dark .kana-nav-row button[data-active="0"]{background:var(--inset) !important} /* ── Responsive ──────────────────────────────────────────────────── */ @media(max-width:720px){ /* Equal top and side padding so the canvas-wrap inside sits the same distance from every card edge. 22 + 22 (practice--lead is padding:0 on top) = 22px breathing room above the canvas. */ .card{padding:22px} .hero{grid-template-columns:1fr;gap:24px} .hero__tile{width:100%;max-width:240px;margin:0 auto} .pron{grid-template-columns:1fr;gap:18px} .title-xl{font-size:46px} .page-head__kana{font-size:56px;letter-spacing:4px} .wrap,.site-header__inner{padding-left:18px;padding-right:18px} /* The lead practice block stacks tight on mobile — the canvas wrap already has its own border + side padding from the parent card, so the practice section's own padding is redundant. */ .practice--lead{padding:0 0 8px;margin-top:0} /* Recall toolbar: shrink per-button padding + gap so all 5 buttons (Trace / Recall / Play / Hide / Gear) fit on a single row on narrow phones. The Hint button stays hidden in Trace mode. */ .recall-toolbar{gap:5px !important;margin:10px auto 6px !important} .recall-toolbar__btn{padding:7px 10px !important;font-size:12.5px !important} /* KanaNav: keep all cards on one row on phones. The nav row is rendered with inline styles in js/kana-nav.js, so the overrides here need !important. Tactic: hide the prev/next arrows (cards are tappable directly), force nowrap, and let the cards flex to share the row width evenly (flex:1 + min-width:0) so 5 always fit — down to ~320px — instead of a fixed width that wraps. max-width keeps 3-card rows from stretching. */ .kana-nav-row{gap:6px !important;padding:8px 10px !important;flex-wrap:nowrap !important} .kana-nav-row > button:not([data-romaji]){display:none !important} .kana-nav-row > button[data-romaji]{width:auto !important;flex:1 1 0;min-width:0;max-width:64px} } /* ===================================================================== REDESIGN B (Ai) — overrides above rules via cascade so the new palette, panel pattern, and chip system apply site-wide. ===================================================================== */ :root{ --page:#ede7da; --card:#faf6ee; --inset:#fcfaf5; --ink:#232026; --muted:#5d5852; --faint:#938b80; --soft:#a79f93; --line:#e3dac8; --line-2:#d7cdb6; --guide:rgba(35,32,38,0.06); --accent:#20507e; --accent-light:#2f6c9e; --accent-bg:rgba(32,80,126,0.08); --accent-line:rgba(32,80,126,0.24); --accent-hover:rgba(32,80,126,0.12); --accent-border:rgba(32,80,126,0.20); /* Recall-mode signal colour — deliberately off-palette (magenta) so Recall reads as a distinct state vs the blue Trace/accent everywhere else. -bg/-line are the faint "this is the Recall button" tint used at rest. */ --recall-accent:#d01b83; --recall-accent-glow:rgba(208,27,131,0.22); --recall-accent-bg:rgba(208,27,131,0.045); --recall-accent-line:rgba(208,27,131,0.30); --canvas-border:#d7e0ea; --canvas-grid:rgba(32,80,126,0.18); --bg:var(--card); --bg-outer:var(--page); --text:var(--ink); --text-muted:var(--muted); --text-faint:var(--faint); --subtle-border:var(--line); --container-border:var(--line-2); --green:#2f8f5b; --orange:#bd7a14; --red:#b1322a; --subtle-bg:rgba(32,80,126,0.03); --timer-bg:rgba(32,80,126,0.08); --timer-fill:rgba(32,80,126,0.55); --timer-urgent:rgba(47,108,158,0.85); --shadow-card:0 8px 30px rgba(40,50,70,0.06),0 1px 0 rgba(255,255,255,0.5) inset; --shadow-hero:0 18px 50px rgba(32,80,126,0.06); } html.dark{ --page:#171821; --card:#1f2230; --inset:#262a3a; --ink:#e8eaf2; --muted:#a8b0c0; --faint:#7c8499; --soft:#6c7388; --line:#2b2f3e; --line-2:#3a3f52; --guide:rgba(232,234,242,0.08); --accent:#6ea7d8; --accent-light:#8cbde6; --accent-bg:rgba(110,167,216,0.10); --accent-line:rgba(110,167,216,0.28); --accent-hover:rgba(110,167,216,0.16); --accent-border:rgba(110,167,216,0.22); /* Brighter magenta for the dark canvas so the Recall cue still reads. */ --recall-accent:#ef56ab; --recall-accent-glow:rgba(239,86,171,0.26); --recall-accent-bg:rgba(239,86,171,0.08); --recall-accent-line:rgba(239,86,171,0.34); --canvas-border:#3a4150; --canvas-grid:rgba(110,167,216,0.18); --green:#5cc187; --orange:#e0a64a; --red:#e07a60; --shadow-card:0 8px 30px rgba(0,0,0,0.40),0 1px 0 rgba(255,255,255,0.04) inset; --shadow-hero:0 18px 50px rgba(0,0,0,0.40); } /* Layout — canvas width matches the homepage (1180px) so header + content line up across the whole site. */ .wrap{max-width:1180px} .site-header__inner{max-width:1180px} /* Brand — squared, no rotation */ .brand__mark{ width:38px;height:38px;border-radius:11px;background:var(--accent); font-family:var(--font-kana-sans);font-weight:500;font-size:21px; box-shadow:0 3px 10px rgba(32,80,126,0.30); } html.dark .brand__mark{box-shadow:0 3px 10px rgba(0,0,0,0.45)} .brand__name{letter-spacing:-0.02em} /* Card frame */ .card{ /* No horizontal padding — the content column's side gutter comes entirely from .wrap (28px), so content pages align to the same 1180 − 2×28 = 1124px column the homepage uses. Keep the vertical padding. */ padding:12px 0 36px;border-radius:20px; background:transparent;border:0;box-shadow:none; } /* Hero — gradient panel with canvas + content */ .hero{ display:grid;grid-template-columns:auto 1fr;gap:42px;align-items:center; background:linear-gradient(135deg,var(--accent-bg),rgba(47,108,158,0.04)); border:1px solid rgba(32,80,126,0.16); border-radius:20px;padding:34px 38px; } .hero__tile{ width:280px;height:280px;border-radius:18px; border:1px solid var(--canvas-border);background:var(--inset); box-shadow:var(--shadow-hero);overflow:hidden;flex:none; } .eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--accent-light);text-transform:uppercase} .title-xl{ margin:12px 0 10px;font-family:var(--font-ui);font-weight:800; font-size:64px;line-height:.95;letter-spacing:-.03em;color:var(--ink); } .title-xl .romaji-kana{color:var(--faint);font-weight:500;font-size:30px;letter-spacing:0} .lead{margin:0;color:var(--muted);font-size:17px;line-height:1.6;max-width:46ch} /* Hero chips — sit below the lead */ .hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .hero__chip{ display:inline-flex;align-items:center;gap:6px; font-family:var(--font-ui);font-weight:600;font-size:12.5px;line-height:1; padding:8px 14px;border-radius:8px; } .hero__chip--primary{color:#fff;background:var(--accent)} .hero__chip--accent{color:var(--accent);background:var(--accent-bg);border:1px solid var(--accent-border)} .hero__chip--ghost{color:var(--muted);background:var(--inset);border:1px solid var(--line);padding:8px 12px} /* When the hero already contains the legacy `.hero__toolbar` (options- dropdown), let it sit alongside the chips without extra spacing. */ .hero__toolbar{margin-top:18px} /* ── Simple centered hero ───────────────────────────────────── Utility index pages (Kanji Library, Word Library, Decks) have no canvas tile, so they opt out of the 2-column grid with .hero--simple: a compact, fully-centered banner. Crucially this re-centers the .lead blocks, which are otherwise left-aligned (max-width + margin:0) and end up hugging the left edge of a centered container. */ .hero--simple{ display:block; text-align:center; padding:26px 34px 28px; } .hero--simple .title-xl{ font-size:46px; margin:6px 0 0; letter-spacing:-.02em; } .hero--simple .lead{ margin:12px auto 0; max-width:56ch; } .hero--simple .lead--sub{ font-size:.92em; opacity:.85; margin-top:8px; } /* Mobile: the simple hero is a pure decorative header (eyebrow + title + lead, no functional content), so its gradient panel + big padding just pushed the actual page content down half a screen. Collapse it to a flat, tight, left-aligned header — no box, small type — at the site's 720px mobile breakpoint. */ @media(max-width:720px){ .hero--simple{ padding:2px 0 0; margin-bottom:2px; background:none; border:0; border-radius:0; text-align:left; } .hero--simple .eyebrow{ font-size:10.5px; letter-spacing:.13em; } .hero--simple .title-xl{ font-size:25px; line-height:1.14; margin:3px 0 0; } .hero--simple .lead{ font-size:13.5px; line-height:1.45; margin:6px 0 0; max-width:none; text-align:left; } .hero--simple .lead--sub{margin-top:4px} } /* Row navigation strip — sit just below the hero */ .vrow-strip{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; margin-top:18px;padding:14px 18px; background:var(--inset);border:1px solid var(--line);border-radius:14px; } .vrow-strip__label{font-size:11px;font-weight:700;letter-spacing:.10em;color:var(--faint);text-transform:uppercase} .vrow-strip__tiles{display:flex;gap:8px;flex:1;flex-wrap:wrap;min-width:0} .vrow__tile,.vrow__tile--active{ display:flex;flex-direction:column;align-items:center;gap:2px; padding:9px 16px;border-radius:10px;text-decoration:none; } .vrow__tile{background:var(--inset);border:1px solid var(--line);color:var(--ink)} .vrow__tile--active{background:var(--accent);color:#fff;border:1px solid var(--accent)} .vrow__tile-kana{font-family:var(--font-kana-sans);font-size:23px;line-height:1} .vrow__tile-romaji{font-size:11px;color:var(--faint)} .vrow__tile--active .vrow__tile-romaji{color:rgba(255,255,255,.85)} .vrow-strip__more{color:var(--accent);font-weight:700;font-size:14px;text-decoration:none} /* Two-column body grid: editorial column + sticky right rail. The rail collapses below the editorial column on narrow screens. */ .layout-with-rail{ display:grid;grid-template-columns:1fr 300px;gap:40px; margin-top:18px;align-items:start; } .layout-with-rail__main{display:flex;flex-direction:column;gap:18px} .layout-with-rail__rail{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px} @media (max-width:900px){ .layout-with-rail{grid-template-columns:1fr} .layout-with-rail__rail{position:static} /* Single-column now: let both items shrink to the card so fixed-width children (the 300px ad, section min-widths) can't force the column wider than the viewport. Only safe once it's NOT the 1fr+300px desktop grid — on desktop min-width:0 would let the 1fr main collapse to 0. */ .layout-with-rail__main,.layout-with-rail__rail{min-width:0} } /* Section panel — every section is now a self-contained cream card with a pill-tag numeral header. The old `margin-top:44px` rhythm gives way to the parent gap. */ .section{ margin:0; background:var(--card);border:1px solid var(--line);border-radius:16px; padding:26px 28px; } /* A section sitting OUTSIDE the flex-gap column (e.g. the kanji page's "Keep going", a direct child of .card) has no parent gap to space it, so restore the same 18px rhythm the in-column sections get. */ .section--standalone{margin-top:18px} .section__head{ display:flex;align-items:center;gap:9px;margin-bottom:16px; padding-bottom:0;border-bottom:0; } .section__num{ font-family:var(--font-ui);font-weight:800;font-size:11px;letter-spacing:0; line-height:1;color:#fff;background:var(--accent); border-radius:6px;padding:5px 9px; } .h2{ margin:0;font-family:var(--font-ui);font-weight:700;font-size:22px; line-height:1.1;letter-spacing:-.02em;color:var(--ink); } /* Pronunciation badge — bigger sans "say it" text */ .pron{grid-template-columns:auto 1fr;gap:24px} .pron__badge{ text-align:center;background:var(--inset);border:1px solid var(--line); border-radius:14px;padding:18px 24px;min-width:130px; } .pron__say{ font-family:var(--font-ui);font-weight:800;font-size:38px; line-height:1;letter-spacing:-.02em;color:var(--accent); } .pron__like{font-size:13px;color:var(--faint);margin-top:6px} /* Steps — number badge is filled indigo */ .step__num{ background:var(--accent);color:#fff;border:0; } /* Origin block — flex layout with accent border */ .origin{ display:flex;gap:24px;align-items:center;flex-wrap:wrap; } .origin__glyphs{display:flex;align-items:center;gap:16px} .origin__from,.origin__to{font-family:var(--font-kana-sans);font-size:56px;line-height:1} .origin__from{color:var(--muted)} .origin__to{color:var(--accent)} .origin__arrow{color:var(--soft);font-size:24px} .origin p{flex:1;min-width:240px;margin:0;font-size:15px;line-height:1.7;color:var(--ink)} /* Tip pull-quote (family pages) — uses accent border-left */ .tip{ background:var(--inset);border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px;padding:13px 17px;color:var(--ink); } /* Vocab cards */ .vocab{grid-template-columns:repeat(3,1fr);gap:10px} .vocab--tight{grid-template-columns:repeat(4,1fr);gap:9px} .vocab__card{ background:var(--inset);border:1px solid var(--line);border-radius:11px; padding:13px 15px; } .vocab__jp{font-family:var(--font-kana-sans);font-size:21px;color:var(--ink)} .vocab__romaji{color:var(--soft);font-size:12px;margin:2px 0 3px;display:block} .vocab__meaning{color:var(--muted);font-size:13.5px;display:block} .vocab--tight .vocab__jp{font-size:19px} .vocab--tight .vocab__romaji{font-size:11.5px} .vocab--tight .vocab__meaning{font-size:13px} /* Pronunciation table — boxed with tinted header */ .ptable{border:1px solid var(--line);border-radius:13px;overflow:hidden;width:100%;border-collapse:collapse;background:var(--inset)} .ptable thead th{ background:var(--accent-bg);color:var(--accent); font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase; padding:11px 16px;text-align:left; } .ptable tbody tr{border-top:1px solid var(--line)} .ptable td{padding:9px 16px} .ptable td.k{font-family:var(--font-kana-sans);font-size:23px;color:var(--accent)} .ptable td.k a{color:var(--accent);text-decoration:none} .ptable td.r{font-weight:600;color:var(--ink)} /* CTA — solid indigo panel with white text */ .cta{ background:var(--accent);color:#fff;border:0;border-radius:16px; padding:32px;text-align:center;margin-top:18px; } .cta__title{ margin:0 0 8px;font-family:var(--font-ui);font-weight:700;font-size:24px; letter-spacing:-.02em;color:#fff; } .cta p{margin:0 auto 20px;color:rgba(255,255,255,0.82);font-size:15.5px;max-width:48ch} .cta .btn--primary{background:#fff;color:var(--accent);border-color:#fff} .cta .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.5)} .cta .btn--ghost:hover{background:rgba(255,255,255,0.08)} /* Buttons */ .btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)} .btn--primary:hover{background:var(--accent-light)} .btn--ghost,.btn--ghost-soft{border-color:rgba(32,80,126,0.4);color:var(--accent)} /* Family page lesson-head — centered with primary eyebrow */ .lesson-head{text-align:center;margin-bottom:18px} .lesson-head__eyebrow{ font-size:12px;font-weight:700;letter-spacing:.16em; color:var(--accent-light);text-transform:uppercase; } .lesson-head__title{ margin:10px 0 0;font-family:var(--font-ui);font-weight:800;font-size:40px; letter-spacing:-.02em;line-height:1; display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap; } .lesson-head__title > :first-child{font-family:var(--font-kana-sans);font-weight:500;letter-spacing:.04em} .lesson-head__sub{font-family:var(--font-ui);font-weight:600;font-size:16px;color:var(--muted);letter-spacing:0} /* Family page title reuses the numbered-section heading pattern for consistency: a filled-blue badge (the row label — "Vowel", "K", "S"…) sits left of the row name ("The K Row"), exactly like "01 Why the K row?" below. Left-aligned to match the section heads; the kana ride along as .sr-only text inside the h1 so SEO / screen readers still see あいうえお. */ .lesson-head--rowhead{text-align:left;margin-bottom:18px} .lesson-head--rowhead .section__head{margin-bottom:0} .lesson-head__h1{margin:0} /* Family page canvas/practice panel — matches the editorial section panels (cream card + warm-beige border) so the practice area sits visually consistent with "Why the row?" / "At a glance" / etc. */ .practice--lead{ background:var(--card); border:1px solid var(--line); border-radius:16px;padding:28px 26px 24px; margin:0; } /* Writing canvas wrap — match the parent panel's cream background, add a visible warm-beige border to differentiate the writing area from the panel, and paint a soft dashed crosshair (center vertical + horizontal) as a background guide. The canvas itself is transparent so these guides show through where no strokes are drawn. */ #canvas-wrap{ box-shadow:0 8px 24px rgba(32,80,126,0.08); border:1px solid var(--line-2) !important; background-color:var(--card) !important; background-image: linear-gradient(to bottom, var(--line-2) 50%, transparent 50%), linear-gradient(to right, var(--line-2) 50%, transparent 50%) !important; background-size: 1px 10px, 10px 1px !important; background-repeat: repeat-y, repeat-x !important; background-position: 50% 0, 0 50% !important; } .recall-toolbar{justify-content:center} .recall-toolbar__btn{ background:var(--inset);border:1px solid var(--line);color:var(--muted); padding:8px 18px;border-radius:8px;font-weight:600;font-size:13px;line-height:1; } .recall-toolbar__btn.is-active{background:var(--accent);color:#fff;border-color:var(--accent)} /* ── Recall button: at-rest tint ─────────────────────────────────────── Even in Trace mode, the Recall button carries a faint magenta face so its purpose is legible before it's engaged — a hue, not a glow. */ #study-btn:not(.is-active){ background:var(--recall-accent-bg); border-color:var(--recall-accent-line); color:var(--recall-accent); } #study-btn:not(.is-active):hover{ border-color:var(--recall-accent); color:var(--recall-accent); } /* ── Recall-mode "you are here" highlight ────────────────────────────── Make Recall unmistakable vs Trace at a glance: while body.study-active, the Recall button fills magenta and the canvas edges pick up a soft magenta ring. body.study-active is set only during Recall (every recall surface: family rows, /kanji-recall, review), so it's the right hook. */ body.study-active #study-btn.is-active{ background:var(--recall-accent); border-color:var(--recall-accent); color:#fff; } body.study-active #canvas-wrap{ border-color:var(--recall-accent) !important; box-shadow:0 0 0 1.5px var(--recall-accent), 0 0 8px var(--recall-accent-glow); } /* Right-rail components — sticky ad slot + small "Keep going" card */ .ad-slot{display:flex;flex-direction:column;align-items:center;gap:7px} .ad-slot__label{ font-family:var(--font-ui);font-weight:600;font-size:10px;letter-spacing:.16em; color:var(--soft);text-transform:uppercase;text-align:center; } .ad-slot__placeholder{ border:1px dashed var(--line-2);border-radius:8px; background:repeating-linear-gradient(45deg, color-mix(in srgb,var(--page) 92%,var(--accent-bg)), color-mix(in srgb,var(--page) 92%,var(--accent-bg)) 8px, color-mix(in srgb,var(--page) 88%,var(--accent-bg)) 8px, color-mix(in srgb,var(--page) 88%,var(--accent-bg)) 16px); display:flex;align-items:center;justify-content:center;flex-direction:column; gap:5px;color:var(--faint);font:700 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; } .ad-slot--rect .ad-slot__placeholder{width:300px;height:250px;max-width:100%} .ad-slot--leader .ad-slot__placeholder{width:728px;height:90px;max-width:100%} .ad-slot__size{font-size:15px} .ad-slot__caption{font-size:10px;opacity:.7;font-weight:500} /* In-house store promo — rendered into the ad slots when the shop is open (lib/page_sections/ad_slot.py). Rotates through active products. */ .store-promo{display:flex;flex-direction:column;align-items:center;gap:7px} .store-promo__label{ font-family:var(--font-ui);font-weight:600;font-size:10px;letter-spacing:.16em; color:var(--soft);text-transform:uppercase;text-align:center; } .store-promo__frame{ position:relative;overflow:hidden;border-radius:12px; border:1px solid var(--line-2);background:var(--card);max-width:100%; } .store-promo--rect .store-promo__frame{width:300px;height:250px} .store-promo--leader .store-promo__frame{width:728px;height:90px} .store-promo__item{ position:absolute;inset:0;display:flex;text-decoration:none;color:inherit; opacity:0;visibility:hidden;transition:opacity .5s ease; } .store-promo__item.is-active{opacity:1;visibility:visible} .store-promo__img{overflow:hidden;background:var(--inset);flex:none} /* contain, never cover: mixed product shapes (posters, mugs, cases) always show whole, never cropped. Gelato mockups are square so this fills cleanly. */ .store-promo__img img{width:100%;height:100%;object-fit:contain;display:block} .store-promo__body{ flex:1;min-width:0;display:flex;flex-direction:column; gap:3px;padding:11px 13px; } .store-promo__eyebrow{ font-family:var(--font-ui);font-weight:700;font-size:9px;letter-spacing:.14em; text-transform:uppercase;color:var(--accent); } .store-promo__name{ font-family:var(--font-ui);font-weight:700;font-size:14.5px;line-height:1.25; color:var(--ink);overflow:hidden;text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; } .store-promo__price{font-size:13px;font-weight:600;color:var(--muted)} .store-promo__price b{color:var(--ink);font-weight:700} .store-promo__cta{ align-self:flex-start;font-family:var(--font-ui);font-weight:700;font-size:12px; color:#fff;background:var(--accent);padding:6px 12px;border-radius:8px; white-space:nowrap; } .store-promo__item:hover .store-promo__cta{background:var(--accent-light)} .store-promo__item:hover .store-promo__name{color:var(--accent)} /* rect (300×250): centered square product thumbnail with text below — whole product always visible, no awkward crop. */ .store-promo--rect .store-promo__item{ flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:9px;padding:14px 14px 16px; } .store-promo--rect .store-promo__img{ width:118px;height:118px;border-radius:10px;border:1px solid var(--line-2); } .store-promo--rect .store-promo__body{flex:none;align-items:center;gap:3px;padding:0} .store-promo--rect .store-promo__eyebrow{display:none} .store-promo--rect .store-promo__cta{align-self:center;margin-top:5px} /* leader (728×90): square thumb left, text middle, CTA pushed right */ .store-promo--leader .store-promo__item{flex-direction:row;align-items:center} .store-promo--leader .store-promo__img{width:90px;height:90px} .store-promo--leader .store-promo__body{ flex-direction:row;align-items:center;gap:14px;padding:0 16px 0 15px; } .store-promo--leader .store-promo__eyebrow{display:none} .store-promo--leader .store-promo__name{-webkit-line-clamp:2;font-size:15px;flex:1} .store-promo--leader .store-promo__price{white-space:nowrap} .store-promo--leader .store-promo__cta{align-self:center} /* Collapse the rail/leaderboard wrappers when the shop is closed and the slot rendered nothing. Keyed on the presence of an actual .store-promo (the wrapper divs are always emitted, so :empty / wrapper-presence won't do — we test for real promo content inside them). */ .layout-with-rail:not(:has(.store-promo)){grid-template-columns:1fr} .layout-with-rail__rail:not(:has(.store-promo)){display:none} .vocab-library:not(:has(.store-promo)){grid-template-columns:minmax(240px,320px) 1fr} .vocab-adrail:not(:has(.store-promo)){display:none} .kanji-library:not(:has(.store-promo)){grid-template-columns:minmax(240px,320px) 1fr} .kanji-adrail:not(:has(.store-promo)){display:none} .promo-leaderboard{margin-top:22px} .promo-leaderboard:not(:has(.store-promo)){display:none;margin:0} .rail-card{ background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px; } .rail-card__title{ font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.10em; color:var(--faint);text-transform:uppercase;margin-bottom:10px; } .rail-card__list{display:flex;flex-direction:column;gap:9px} .rail-card__item{ display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink); text-decoration:none; } .rail-card__item-glyph{font-family:var(--font-kana-sans);font-size:20px;color:var(--accent)} /* Redesign B mobile overrides — re-asserted after the redesign block because the original `@media(max-width:720px)` rules sit above it and lose the cascade. Mirrors the legacy mobile behaviour for the layouts the redesign replaced (.hero, .pron, .vocab grids) and tightens the oversized typography for narrow viewports. */ @media(max-width:720px){ /* Reclaim the top gap on phones. The effective .card (above) carries margin-top:22px + padding-top:26px ≈ 48px of empty space before the first panel — fine on desktop, wasteful on mobile. Tighten both; sides/bottom padding are left as-is. */ .card{margin-top:6px;padding-top:8px} .hero{grid-template-columns:1fr;gap:24px;padding:22px 18px} .hero__tile{width:100%;height:auto;aspect-ratio:1/1;max-width:280px;margin:0 auto} .title-xl{font-size:46px} .pron{grid-template-columns:1fr;gap:18px} .pron__badge{min-width:0} .vocab{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))} .vocab--tight{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .lesson-head__title{font-size:28px;gap:10px} .cta{padding:26px 22px} .cta__title{font-size:22px} /* Row-nav strip: stack the three parts, and let the character tiles shrink to share the row width evenly instead of overflowing the card (was fixed-width + horizontal scroll). flex:1 1 0 + min-width:0 makes them scale down to fit any phone; max-width keeps 3-tile rows from stretching too wide. */ .vrow-strip{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px} .vrow-strip__tiles{justify-content:center;flex-wrap:nowrap;gap:6px} .vrow-strip__tiles>.vrow__tile{flex:1 1 0;min-width:0;max-width:92px;padding:9px 4px} .vrow-strip__more{text-align:right} /* Origin block: stack on mobile — the 安→あ comparison sits ABOVE the etymology text (full width) instead of squeezing the prose into a thin column beside it. */ .origin{flex-direction:column;align-items:flex-start;gap:16px} .origin p{min-width:0} /* Pronunciation table: tighten column padding + header so all three columns fit the narrowest phones instead of the pronunciation column being clipped by .table-wrap's overflow:hidden. On the very smallest phones (~320px) the wrapper scrolls instead of clipping. */ .table-wrap{overflow-x:auto;overflow-y:hidden} .ptable thead th{padding:10px 10px;font-size:10px;letter-spacing:.02em} .ptable td{padding:9px 10px} .ptable td.k{font-size:21px} /* Homepage directory: collapse 4 columns → 2 on phones, tighter card. */ .home-card{padding:22px 18px} .dir__grid{grid-template-columns:repeat(2,1fr);gap:22px} .dir__tagline{font-size:13.5px} } @media(max-width:480px){ .dir__grid{grid-template-columns:1fr} } /* ===================================================================== Homepage — fresh landing surface introduced after the Direction B redesign. Lives at the bottom of site.css so its overrides win the cascade, same as the redesign block above. ===================================================================== */ /* Homepage — Craigslist-style directory. Dense, link-heavy, minimal chrome. Tagline up top, then a 4-column grid of section lists. */ .home-card{padding:28px 32px 36px} .dir__tagline{ margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.55; max-width:72ch; } .dir__tagline a{color:var(--accent);font-weight:600;text-decoration:none} .dir__tagline a:hover{text-decoration:underline} .dir__grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px; border-top:1px solid var(--line);padding-top:18px; } .dir__col{min-width:0} .dir__h2{ margin:0 0 8px;font-family:var(--font-ui);font-weight:800; font-size:13px;text-transform:uppercase;letter-spacing:.10em; color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:5px; } .dir__h3{ margin:18px 0 6px;font-family:var(--font-ui);font-weight:700; font-size:11px;text-transform:uppercase;letter-spacing:.08em; color:var(--faint); } .dir__rows,.dir__list{ margin:0;padding:0;list-style:none; font-size:13px;line-height:1.55; } .dir__rows li,.dir__list li{margin:0;padding:1px 0} .dir__list--muted li{color:var(--faint)} .dir__col a{color:var(--accent);text-decoration:none} .dir__col a:hover{text-decoration:underline} .dir__col a:visited{color:var(--accent-light)} .dir__row-label{ display:inline-block;min-width:64px;font-weight:600; } .dir__row-kana{ font-family:var(--font-kana-sans);font-size:15px;color:var(--ink); letter-spacing:.04em; } .dir__row-kana a{color:var(--ink)} .dir__row-kana a:hover{color:var(--accent)} .dir__inline{ font-size:12.5px;line-height:1.7; word-spacing:4px; } .dir__inline a{margin-right:2px} /* ===================================================================== Grammar lesson pages — uses the same cream/indigo palette as the hiragana editorial pages but with a tighter rhythm (rules are short). ===================================================================== */ .grammar-card{padding:38px 0 42px} /* Lesson head */ .grammar-head{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)} .grammar-head__eyebrow{ font-size:12px;font-weight:700;letter-spacing:.16em; color:var(--accent-light);text-transform:uppercase; } .grammar-head__title{ margin:10px 0 6px;font-family:var(--font-ui);font-weight:800; font-size:38px;line-height:1.1;letter-spacing:-.025em;color:var(--ink); } .grammar-head__sub{ margin:0 0 14px;font-family:var(--font-kana-sans);font-weight:500; font-size:22px;letter-spacing:.04em;color:var(--accent); } .grammar-head__summary{ margin:0;color:var(--muted);font-size:16px;line-height:1.65; max-width:60ch; } /* Rule cards */ .grammar-rule{ margin-top:18px;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:22px 24px; } .grammar-rule__head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px} .grammar-rule__num{ font-family:var(--font-ui);font-weight:800;font-size:12px;letter-spacing:.04em; background:var(--accent);color:#fff;border-radius:6px;padding:4px 8px;line-height:1; } .grammar-rule__title{ margin:0;font-family:var(--font-ui);font-weight:700;font-size:20px; letter-spacing:-.015em;color:var(--ink); } .grammar-rule__body{ margin:0;font-size:15.5px;line-height:1.7;color:var(--ink); } .grammar-ex{ font-family:var(--font-kana-sans);font-weight:500; color:var(--accent);font-size:16.5px;letter-spacing:.02em; } /* Vocabulary block */ /* On lesson pages the ad rail's main column uses block flow so the rules' own margin-top owns the rhythm (the rail's default flex `gap` would double up with those margins). */ .grammar-card .layout-with-rail__main{display:block} .grammar-vocab{margin-top:32px} .grammar-vocab__head{margin-bottom:14px} .grammar-vocab__title{ margin:0;font-family:var(--font-ui);font-weight:700;font-size:18px; letter-spacing:-.01em;color:var(--ink); } .grammar-vocab__group{margin-top:16px} .grammar-vocab__cat{ font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.10em; color:var(--faint);text-transform:uppercase;margin-bottom:7px; } .grammar-vocab__grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px; } .grammar-vocab__card{ display:flex;flex-direction:column;gap:2px; background:var(--inset);border:1px solid var(--line);border-radius:10px; padding:10px 12px; } .grammar-vocab__jp{ font-family:var(--font-kana-sans);font-weight:500;font-size:18px; color:var(--ink);line-height:1.2; } .grammar-vocab__kanji{ font-size:12px;color:var(--faint);margin-left:4px;font-family:var(--font-kana-sans); } .grammar-vocab__gloss{ font-size:13px;color:var(--muted); } /* Kanji introduced — grid of plain glyph tiles. Mirrors the legacy grammar lesson's at-a-glance kanji preview. Metadata (reading, on/kun, notes) stays in the JSON for the kanji-memory exercise. */ .grammar-kanji{margin-top:32px} .grammar-kanji__label{ font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.10em; color:var(--faint);text-transform:uppercase;margin-bottom:10px; } .grammar-kanji__grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:7px; } .grammar-kanji__tile{ aspect-ratio:1/1;display:flex;align-items:center;justify-content:center; background:var(--inset);border:1px solid var(--line);border-radius:8px; font-family:var(--font-kana-sans);font-weight:500;font-size:26px; color:var(--ink);text-decoration:none; transition:background-color .12s, border-color .12s, color .12s; } .grammar-kanji__tile:hover{ background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent); } /* ===================================================================== Kanji pages — Direction B parity. Most selectors are shared with the hiragana pages and already inherit the redesign. These rules fill the gaps for kanji-only elements (readings table cells, example- sentence cards) so they sit in the cream/indigo palette correctly. ===================================================================== */ .r-label{ font-family:var(--font-ui);font-weight:700;font-size:13px; color:var(--accent);white-space:nowrap; } .r-vals{ font-family:var(--font-kana-sans);font-size:18px;color:var(--ink); letter-spacing:.04em; } .r-note{font-size:13.5px;color:var(--muted);line-height:1.5} .sentences{display:flex;flex-direction:column;gap:12px;margin-top:8px} .sentence{ background:var(--inset);border:1px solid var(--line);border-radius:12px; padding:14px 16px; } .sentence__jp{ margin:0;font-family:var(--font-kana-sans);font-weight:500; font-size:19px;line-height:1.5;color:var(--ink); } .sentence__rd{ margin:6px 0 0;font-family:var(--font-kana-sans);font-size:14px; color:var(--accent);letter-spacing:.02em; } .sentence__tr{margin:8px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55} /* ===================================================================== Grammar exercise pages — per-lesson, per-type drill surfaces. Static preview for now; interactive widgets layered later. ===================================================================== */ /* "Exercises" block inside a lesson page → links to its drill pages */ .grammar-exidx{margin-top:32px} .grammar-exidx__label{ font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.10em; color:var(--faint);text-transform:uppercase;margin-bottom:10px; } .grammar-exidx__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px} .ex-link{ display:flex;flex-direction:column;gap:3px; background:var(--inset);border:1px solid var(--line);border-radius:10px; padding:11px 14px;text-decoration:none;color:var(--ink); transition:border-color .12s, background-color .12s; } .ex-link:hover{background:var(--accent-bg);border-color:var(--accent-border)} .ex-link__label{font-family:var(--font-ui);font-weight:700;font-size:14px;color:var(--ink)} .ex-link__count{font-size:12px;color:var(--faint)} /* Per-rule practice strip — compact drill chips under each rule's body (and on the vocabulary / kanji sections for their lesson-wide games) */ .grammar-rule__practice{ display:flex;align-items:center;flex-wrap:wrap;gap:8px; margin-top:14px; } .grammar-rule__practice-label{ font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.10em; color:var(--faint);text-transform:uppercase; } .rule-drill{ display:inline-flex;align-items:baseline;gap:7px; background:var(--inset);border:1px solid var(--line);border-radius:999px; padding:6px 14px;text-decoration:none; font-family:var(--font-ui);font-weight:700;font-size:13px;color:var(--ink); transition:border-color .12s, background-color .12s; } .rule-drill:hover{background:var(--accent-bg);border-color:var(--accent-border)} .rule-drill__count{font-weight:400;font-size:11.5px;color:var(--faint)} .grammar-rule__practice--section{margin-top:16px} /* Exercise page chrome */ .grammar-ex-card{padding:32px 0 40px} .ex-crumbs{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-size:12.5px;color:var(--muted);margin-bottom:18px; } .ex-crumbs a{color:var(--accent);text-decoration:none} .ex-crumbs a:hover{text-decoration:underline} .ex-crumbs__sep{color:var(--soft)} .ex-crumbs__current{color:var(--ink);font-weight:600} .ex-head{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px} .ex-head__eyebrow{ font-size:12px;font-weight:700;letter-spacing:.16em; color:var(--accent-light);text-transform:uppercase; } .ex-head__title{ margin:8px 0 0;font-family:var(--font-ui);font-weight:800; font-size:32px;line-height:1.1;letter-spacing:-.02em;color:var(--ink); } .ex-body{display:flex;flex-direction:column;gap:14px} .ex-body__head{ background:var(--inset);border:1px solid var(--line);border-radius:12px; padding:14px 18px; } .ex-body__count{ font-family:var(--font-ui);font-weight:700;font-size:12px;letter-spacing:.06em; color:var(--accent);text-transform:uppercase;margin-bottom:4px; } .ex-body__note{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55} /* Exercise cards (generic) */ .ex-card{ background:var(--card);border:1px solid var(--line);border-radius:12px; padding:14px 18px; } .ex-card__prompt{ font-family:var(--font-kana-sans);font-weight:500;font-size:17px; color:var(--ink);line-height:1.5; } .ex-card__label{ font-family:var(--font-ui);font-weight:700;font-size:10.5px;letter-spacing:.10em; color:var(--faint);text-transform:uppercase;margin:10px 0 6px; } .ex-card__answer{ margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.55; } .ex-card__answer strong{color:var(--accent);font-weight:700} .ex-tokens{display:flex;flex-wrap:wrap;gap:6px} .ex-token{ font-family:var(--font-kana-sans);font-weight:500;font-size:14.5px; padding:5px 11px;border-radius:7px;line-height:1; } .ex-token--answer{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border)} .ex-token--distractor{background:var(--inset);color:var(--muted);border:1px solid var(--line)} .ex-options{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px} .ex-option{ padding:7px 12px;border-radius:8px; background:var(--inset);border:1px solid var(--line); font-family:var(--font-kana-sans);font-size:15px;color:var(--ink); } .ex-option--correct{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent);font-weight:600} .ex-blank{ display:inline-block;min-width:32px;padding:0 8px; border-bottom:2px solid var(--accent);color:var(--accent);font-weight:700; } .ex-tag{ font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.06em; color:#fff;background:var(--accent);padding:3px 7px;border-radius:5px; text-transform:uppercase;vertical-align:middle;margin-left:6px; } .ex-pairs{ width:100%;border-collapse:collapse; background:var(--card);border:1px solid var(--line);border-radius:12px; overflow:hidden; } .ex-pairs thead th{ background:var(--accent-bg);color:var(--accent); font-family:var(--font-ui);font-weight:700;font-size:11px; letter-spacing:.06em;text-transform:uppercase; padding:10px 14px;text-align:left; } .ex-pairs tbody tr{border-top:1px solid var(--line)} .ex-pairs td{padding:9px 14px} .ex-pairs td:first-child{font-family:var(--font-kana-sans);font-size:16px;color:var(--ink)} .ex-pairs td:last-child{color:var(--muted);font-size:14px} .ex-raw{ background:var(--inset);border:1px solid var(--line);border-radius:8px; padding:10px 12px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink);white-space:pre-wrap;overflow-x:auto; } @media(max-width:720px){ .grammar-ex-card{padding:22px 0 30px} .ex-head__title{font-size:26px} .grammar-exidx__list{grid-template-columns:1fr} } /* Lesson navigation */ .grammar-nav{ display:grid;grid-template-columns:1fr auto 1fr;gap:14px; margin-top:36px;padding-top:24px;border-top:1px solid var(--line); } .grammar-nav__slot{ display:flex;flex-direction:column;gap:4px; text-decoration:none;color:var(--ink);font-size:14px;line-height:1.3; padding:10px 14px;border-radius:10px;border:1px solid var(--line); background:var(--card);min-width:0; } .grammar-nav__slot--empty{border-style:dashed;border-color:var(--line);background:transparent;visibility:hidden} .grammar-nav__slot--next{text-align:right} .grammar-nav__slot--index{text-align:center;border-color:var(--accent-border)} .grammar-nav__slot:hover{border-color:var(--accent-border)} .grammar-nav__direction{ font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.10em; color:var(--faint);text-transform:uppercase; } .grammar-nav__lesson{font-weight:600;color:var(--ink)} .grammar-nav__arrow{color:var(--accent)} /* Grammar index page */ .grammar-idx-card{padding:12px 0 42px} .grammar-idx__intro{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)} .grammar-idx__title{ margin:0 0 6px;font-family:var(--font-ui);font-weight:800;font-size:34px; letter-spacing:-.025em;color:var(--ink); } .grammar-idx__lead{ margin:0;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:60ch; } .grammar-idx__section{margin-top:18px} /* Inside the ad rail the flex column's gap handles spacing, so drop the per-section top margin to avoid a doubled gap. */ .grammar-idx-card .layout-with-rail__main .grammar-idx__section{margin-top:0} .grammar-idx__section-title{ margin:0 0 12px;font-family:var(--font-ui);font-weight:700;font-size:13px; letter-spacing:.10em;color:var(--accent-light);text-transform:uppercase; } .grammar-idx__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px} .grammar-idx__item{list-style:none} /* The whole card is the link — clear target + obvious "go here" affordance, rather than a title users must discover is clickable. */ .grammar-idx__link{ display:flex;align-items:center;gap:16px; background:var(--card);border:1px solid var(--line);border-radius:12px; padding:14px 18px; text-decoration:none;color:inherit;cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s,transform .1s; } .grammar-idx__link:hover{ border-color:var(--accent); background:var(--accent-bg,var(--card)); box-shadow:0 4px 14px rgba(0,0,0,.06); } .grammar-idx__link:active{transform:translateY(1px)} .grammar-idx__body{flex:1 1 auto;min-width:0} .grammar-idx__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px} .grammar-idx__name{ font-family:var(--font-ui);font-weight:700;font-size:17px;color:var(--ink); } .grammar-idx__link:hover .grammar-idx__name{color:var(--accent)} .grammar-idx__sub{ font-family:var(--font-kana-sans);font-weight:500;color:var(--accent); font-size:14px; } .grammar-idx__summary{ display:block;margin:6px 0 0;font-size:14px;color:var(--muted);line-height:1.55; } /* "Start →" cue — persistent so the card reads as an action, and the arrow nudges right on hover. */ .grammar-idx__go{ flex:0 0 auto;display:inline-flex;align-items:center;gap:6px; font-family:var(--font-ui);font-weight:700;font-size:13px; letter-spacing:.03em;text-transform:uppercase;color:var(--accent); white-space:nowrap; } .grammar-idx__arrow{font-size:16px;transition:transform .15s;will-change:transform} .grammar-idx__link:hover .grammar-idx__arrow{transform:translateX(4px)} @media(max-width:720px){ .grammar-card{padding:24px 0 30px} .grammar-head__title{font-size:30px} .grammar-head__sub{font-size:18px} .grammar-rule{padding:18px 18px} .grammar-nav{grid-template-columns:1fr;text-align:left} .grammar-nav__slot--next{text-align:left} /* Match the tightened top gap the plain .card gets on mobile (this later, same-specificity rule would otherwise re-inflate padding-top). */ .grammar-idx-card{padding:8px 0 30px} } /* === SEO content (home + section pages' injected About block) =========== Ported from the legacy css/shared.css so the new homepage can render the per-language SEO block injected by main._inject_home_seo. --heading mapped to the new palette's --ink. */ .seo-content{width:100%;margin:1.5rem auto 1rem;padding:1rem 0 0;color:var(--text-muted);font-size:0.9rem;line-height:1.7} .seo-content h2{color:var(--ink);font-size:1.3rem;margin-bottom:0.8rem} .seo-content h3{color:var(--text);font-size:1rem;margin-top:1.5rem;margin-bottom:0.5rem} .seo-content p{margin-bottom:0.8rem} .seo-content a{color:var(--accent);text-decoration:none} .seo-content ol{padding-left:1.2rem;margin-bottom:0.8rem} .seo-content li{margin-bottom:0.4rem} .seo-content details{margin-bottom:0.5rem;border:1px solid var(--subtle-border);border-radius:8px;padding:0.6rem 0.8rem} .seo-content summary{cursor:pointer;color:var(--text);font-weight:600;font-size:0.9rem} .seo-content details[open] summary{margin-bottom:0.4rem} .seo-content details p{margin-bottom:0} body.dark .seo-content{color:var(--text)} body.dark .seo-content a{color:#f5f5f5;text-decoration:underline} /* === Language switcher (route-based main-i18n dropdown) ================= Built at runtime by i18n.buildLangSwitcher into #lang-switcher on pages with lang_slot='switcher'. Ported from the legacy header (js/header.js); all tokens already exist in the palette above. */ .lang-switcher{position:relative} .lang-current{display:inline-flex;align-items:center;gap:5px;height:38px;color:var(--ink);padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--inset);font-size:13.5px;font-weight:700;cursor:pointer;transition:all 0.2s} .lang-current:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)} .lang-dropdown{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--bg);border:1px solid var(--subtle-border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.12);min-width:120px;z-index:100;overflow:hidden} .lang-switcher.open .lang-dropdown{display:block} .lang-option{display:block;padding:8px 14px;color:var(--text);text-decoration:none;font-size:0.82rem;transition:background 0.15s} .lang-option:hover{background:var(--accent-bg);color:var(--accent)} .lang-option.active{color:var(--accent);font-weight:600;cursor:default;pointer-events:none}