/* ============================================================ nihongo theme layer — "Sumi & Shu" (墨と朱) Layered ON TOP of /styles/tokens.css (loaded first). Keeps the nuez base tokens (--bg/--surface/--text/--border/--accent) so the app stays portable into nuez.no/lab/nihongo, and adds a Japanese- modern semantic palette + a small component layer used across pages. Light + dark both driven by body.dark-mode (toggle in the nav). ============================================================ */ :root { /* Semantic Japanese palette */ --jp-shu: #d6452c; /* 朱 vermillion — primary accent, CTAs, "Learn" */ --jp-shu-soft: #e07a64; --jp-shu-tint: #fbeae5; /* wash behind shu surfaces */ --jp-ai: #2c5072; /* 藍 indigo — "Cheatsheets" / links */ --jp-ai-soft: #5a7fa0; --jp-ai-tint: #e8eef4; --jp-matcha: #5f7d44; /* 抹茶 — "Culture" / correct */ --jp-matcha-soft:#86a063; --jp-matcha-tint:#eef2e6; --jp-murasaki: #5b3c8c; /* 紫 plum — "Places" / shops & sights */ --jp-murasaki-soft: #8163b0; --jp-murasaki-tint: #efe9f6; --jp-gold: var(--accent); /* nuez tan, used as tertiary */ --jp-gold-tint: #f6efe3; --jp-sumi: var(--text); /* Section identity — pages set --sect to one of these */ --sect: var(--jp-shu); --sect-tint: var(--jp-shu-tint); /* Elevation */ --shadow-sm: 0 1px 2px rgba(28,22,16,.05), 0 1px 3px rgba(28,22,16,.05); --shadow-md: 0 6px 18px rgba(28,22,16,.07), 0 2px 6px rgba(28,22,16,.05); --shadow-lg: 0 18px 44px rgba(28,22,16,.11), 0 6px 14px rgba(28,22,16,.06); /* Radii */ --r-sm: 9px; --r: 14px; --r-lg: 22px; --r-xl: 30px; /* Type */ --font-display: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", Georgia, "Times New Roman", serif; --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Yu Gothic", "Noto Sans JP", sans-serif; --font-jp-serif: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "Noto Serif JP", "Songti SC", serif; --maxw: 64rem; --maxw-narrow: 46rem; } body.dark-mode { --jp-shu: #f0795e; --jp-shu-soft: #c8543c; --jp-shu-tint: #2c1a14; --jp-ai: #74a6d6; --jp-ai-soft: #4f7396; --jp-ai-tint: #15212e; --jp-matcha: #9cbd74; --jp-matcha-soft:#74935180; --jp-matcha-tint:#1a2214; --jp-murasaki: #b69ae0; --jp-murasaki-soft: #8a6fbf; --jp-murasaki-tint: #1d1630; --jp-gold-tint: #221d14; --sect-tint: var(--jp-shu-tint); --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 18px 48px rgba(0,0,0,.55); } /* WCAG AA contrast for muted/faint text (used on romaji, blurbs, captions, register tags) — the nuez tokens fail in both themes. Overridden in the app layer only, leaving the portable tokens.css bridge untouched. */ body:not(.dark-mode) { --text-muted: #5f5f5f; --text-faint: #6f6f6f; } body.dark-mode { --text-muted: #a9a9a9; --text-faint: #9a9a9a; } /* Keyboard focus ring lives in src/styles/global.css (single source of truth, bundled last so it deterministically wins). Kept out of here to avoid a dead duplicate rule with a conflicting colour. */ /* Comfortable touch targets on dense tap grids — expand the hit area without changing layout (WCAG 2.5.8). */ @media (any-pointer: coarse) { .ex-opt, .wb-tile, .kana-cell, .match-tile, .nh-icon-btn, .nh-profile { position: relative; } .ex-opt::after, .wb-tile::after, .kana-cell::after, .match-tile::after, .nh-icon-btn::after, .nh-profile::after { content: ""; position: absolute; inset: -6px; z-index: 0; } /* Inline text links in the readiness sentence — grow the tap box without disturbing the line flow. */ .rdy-link, .hero-next-link { position: relative; } .rdy-link::after, .hero-next-link::after { content: ""; position: absolute; inset: -10px -6px; z-index: 0; } } /* ---------- Section theming helpers ------------------------------ */ .sect-learn { --sect: var(--jp-shu); --sect-tint: var(--jp-shu-tint); } .sect-sheets { --sect: var(--jp-ai); --sect-tint: var(--jp-ai-tint); } .sect-culture { --sect: var(--jp-matcha); --sect-tint: var(--jp-matcha-tint); } .sect-places { --sect: var(--jp-murasaki); --sect-tint: var(--jp-murasaki-tint); } .sect-gold { --sect: var(--jp-gold); --sect-tint: var(--jp-gold-tint); } /* ---------- Layout container ------------------------------------- */ .nh-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; } .nh-narrow { max-width: var(--maxw-narrow); margin-inline: auto; padding-inline: 1.25rem; } /* ---------- Kicker / labels -------------------------------------- */ .kicker { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .kicker-accent { color: var(--sect); } /* ---------- Display type ----------------------------------------- */ .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; } .balance { text-wrap: balance; } /* ---------- Cards ------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); } .card-pad { padding: 1.35rem 1.5rem; } a.card-link, .card-link { display: block; text-decoration: none; color: inherit; transition: transform var(--dur-base, .3s) var(--ease-out, ease), box-shadow var(--dur-base, .3s) var(--ease-out, ease), border-color var(--dur-fast, .2s) ease; } a.card-link:hover, .card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--sect) 45%, var(--border)); } .card-accent { position: relative; overflow: hidden; } .card-accent::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--sect); opacity: .9; } /* ---------- Buttons ---------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-weight: 600; font-size: .95rem; padding: .62rem 1.15rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; line-height: 1; transition: transform var(--dur-fast,.2s) ease, box-shadow var(--dur-fast,.2s) ease, background var(--dur-fast,.2s) ease, border-color var(--dur-fast,.2s) ease, opacity .2s; } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--sect); border-color: transparent; color: #fff; } body.dark-mode .btn-primary { color: #160e0b; } .btn-primary:hover { box-shadow: var(--shadow-md); filter: saturate(1.05); } .btn-ghost { background: transparent; } .btn-ghost:hover { background: var(--sect-tint); border-color: color-mix(in srgb, var(--sect) 35%, var(--border)); } .btn-sm { padding: .4rem .8rem; font-size: .82rem; } .btn-lg { padding: .82rem 1.6rem; font-size: 1.04rem; } /* ---------- Chips / pills / tags --------------------------------- */ .chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; padding: .32rem .72rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; transition: all var(--dur-fast,.2s) ease; } .chip:hover { border-color: color-mix(in srgb, var(--sect) 40%, var(--border)); } .chip-active { background: var(--text); color: var(--bg); border-color: var(--text); } .chip-count { font-size: .72rem; font-weight: 700; color: var(--text-muted); } .chip-active .chip-count { color: inherit; opacity: .8; } .tag { display: inline-block; font-size: .68rem; letter-spacing: .03em; padding: .14rem .5rem; border-radius: 999px; background: var(--sect-tint); color: var(--sect); font-weight: 600; } /* Light-mode: the section colour on its own tint can dip below AA — darken just the foreground (dark mode already passes). */ body:not(.dark-mode) .tag { color: color-mix(in srgb, var(--sect) 70%, #000); } /* ---------- Hairline --------------------------------------------- */ .hairline { height: 1px; background: var(--border); border: 0; } /* ---------- Japanese text ---------------------------------------- */ .jp { font-family: var(--font-jp); font-feature-settings: "palt"; } .jp-serif { font-family: var(--font-jp-serif); } .jp-xl { font-family: var(--font-jp); font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1.1; } /* furigana / ruby */ ruby { ruby-position: over; } rt { font-size: .55em; color: var(--text-muted); font-weight: 400; letter-spacing: .02em; } /* ---------- Speak (audio) button --------------------------------- */ .speak { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); flex: none; transition: all var(--dur-fast,.2s) ease; } .speak:hover { color: var(--sect); border-color: color-mix(in srgb, var(--sect) 40%, var(--border)); transform: scale(1.06); } .speak.is-playing { color: var(--sect); border-color: var(--sect); animation: pulse 1s var(--ease-smooth, ease) infinite; } /* 🐢 slow-replay button (pairs with the speak button); inherits .speak shape. */ .ex-play-row { display: inline-flex; gap: .6rem; align-items: center; justify-content: center; } .speak-slow { font-size: 1rem; } /* In-country home hero: one-tap survival chips (dynamically created in home.ts). */ .hero-survival { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .hero-survival-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; min-height: 2.4rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: .85rem; } .hero-survival-chip:hover { border-color: var(--jp-shu); } /* ---------- Phrase row ------------------------------------------- */ .phrase { display: flex; align-items: flex-start; gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--border-subtle, var(--border)); } .phrase:first-child { border-top: 0; } .phrase-jp { font-family: var(--font-jp); font-size: 1.28rem; line-height: 1.35; font-feature-settings: "palt"; } .phrase-romaji { font-size: .8rem; font-style: italic; color: var(--text-muted); margin-top: .1rem; } .phrase-en { font-size: .92rem; color: var(--text); margin-top: .15rem; } .phrase-note { font-size: .76rem; color: var(--text-muted); margin-top: .25rem; } /* ---------- Kana grid -------------------------------------------- */ .kana-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: all var(--dur-fast,.16s) var(--ease-out, ease); user-select: none; } .kana-cell:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow-md); border-color: var(--sect); z-index: 1; } .kana-cell.is-empty { background: transparent; border-color: transparent; cursor: default; } .kana-cell.is-empty:hover { transform: none; box-shadow: none; } .kana-char { font-family: var(--font-jp); font-size: clamp(1.3rem, 4.5vw, 1.9rem); line-height: 1; } .kana-romaji { font-size: .66rem; color: var(--text-muted); letter-spacing: .02em; } .kana-cell.flash { animation: kana-pop .4s var(--ease-spring, ease); } /* ---------- Prose (articles) ------------------------------------- */ .prose { font-size: 1.02rem; line-height: 1.72; color: var(--text); } .prose p { margin: 0 0 1rem; } .prose strong { font-weight: 650; } .prose .jp { font-weight: 500; } /* ---------- Do / Don't lists ------------------------------------- */ .dodont { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .5rem; } .dodont li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; } .dodont li::before { flex: none; font-weight: 700; margin-top: .05rem; } .do li::before { content: "✓"; color: var(--jp-matcha); } .dont li::before { content: "✕"; color: var(--jp-shu); } .tips li::before { content: "›"; color: var(--sect); font-weight: 800; } /* ---------- Quick facts ------------------------------------------ */ .qfact { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--sect-tint); } .qfact-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 600; } .qfact-value { font-size: .95rem; font-weight: 600; } /* ---------- Animations ------------------------------------------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sect) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } } @keyframes kana-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } .reveal { animation: fadeUp .5s var(--ease-out, ease) both; } .reveal-2 { animation: fadeUp .5s var(--ease-out, ease) .06s both; } .reveal-3 { animation: fadeUp .5s var(--ease-out, ease) .12s both; } /* ---------- Lesson exercises (rendered dynamically) -------------- */ .ex { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; } .ex-instruction { font-size: .95rem; font-weight: 600; color: var(--text-muted); margin: 0 0 1.3rem; } .ex-body { width: 100%; display: flex; flex-direction: column; align-items: center; } .ex-bigjp { font-family: var(--font-jp); font-feature-settings: "palt"; font-size: clamp(2.4rem, 10vw, 4rem); line-height: 1.1; font-weight: 500; } .ex-body .speak { margin-top: 1rem; } .ex-bigplay { width: 3.4rem !important; height: 3.4rem !important; } .ex-bigplay svg { width: 22px; height: 22px; } .ex-meaning { margin-top: 1.1rem; } .ex-romaji { font-size: 1rem; font-style: italic; color: var(--text-muted); } .ex-reading { margin-top: .5rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; } .ex-prompt-romaji { font-size: 1.05rem; font-style: italic; color: var(--text-muted); margin-top: .5rem; } .ex-reading .ex-prompt-romaji { margin-top: 0; } /* English-phonetic "say it like this" line — the pronunciation crutch */ .ex-phon { font-size: 1rem; font-weight: 600; color: var(--jp-ai); letter-spacing: .01em; } .ex-back { font-size: 1.3rem; font-weight: 600; margin-top: .2rem; } .ex-saynote { font-size: .85rem; color: var(--text-muted); margin-top: 1rem; max-width: 22rem; line-height: 1.5; } .ex-mnemonic { width: 100%; margin-top: 1.3rem; padding: .85rem 1.05rem; border-radius: var(--r-sm); background: var(--jp-ai-tint); text-align: left; } .ex-mnemonic-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--jp-ai); } .ex-mnemonic-text { font-size: .92rem; line-height: 1.5; margin: .3rem 0 0; color: var(--text); } .ex-options { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: 100%; margin-top: 1.6rem; } /* Uniform row floor + true centering so a wrapping option no longer towers over its single-line neighbour, and text never floats to the top of a tall cell. */ .ex-opt { font: inherit; font-size: 1.05rem; font-weight: 500; padding: 1rem .8rem; min-height: 3.4rem; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; overflow-wrap: anywhere; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: all .15s ease; } /* Odd count → the lone trailing option spans the full width, no half-width orphan. */ .ex-options .ex-opt:last-child:nth-child(odd) { grid-column: 1 / -1; } .ex-opt:hover:not(:disabled) { border-color: var(--jp-shu); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .ex-opt:disabled:not(.correct):not(.wrong) { opacity: .5; cursor: default; } .ex-opt.correct { border-color: var(--jp-matcha); background: var(--jp-matcha-tint); } .ex-opt.wrong { border-color: var(--jp-shu); background: var(--jp-shu-tint); } /* Phone-first: long English meanings get the full width instead of a ~150px half-column that wraps to 3-4 cramped lines. */ @media (max-width: 420px) { .ex-options { grid-template-columns: 1fr; } } .ex-feedback { width: 100%; margin-top: 1.2rem; padding: .85rem 1rem; border-radius: var(--r-sm); font-size: .95rem; line-height: 1.5; text-align: left; } .ex-feedback.ok { background: var(--jp-matcha-tint); border: 1px solid color-mix(in srgb, var(--jp-matcha) 35%, transparent); } .ex-feedback.no { background: var(--jp-shu-tint); border: 1px solid color-mix(in srgb, var(--jp-shu) 35%, transparent); } .ex-fb-mark { font-weight: 700; } .ex-feedback.ok .ex-fb-mark { color: var(--jp-matcha); } .ex-feedback.no .ex-fb-mark { color: var(--jp-shu); } /* Calm enter for each exercise card (was a hard content-pop on every render). */ .ex-enter { animation: fadeUp .22s var(--ease-out, ease) both; } .ex-foot { width: 100%; margin-top: 1.2rem; } .ex-continue { width: 100%; padding: .85rem; } /* word bank */ .wb-prompt { margin-bottom: 1.1rem; } .wb-en { font-size: 1.2rem; font-weight: 600; } .wb-answer { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; min-height: 3rem; width: 100%; padding: .6rem; border-bottom: 2px dashed var(--border); margin-bottom: 1.2rem; } .wb-bank { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; width: 100%; margin-bottom: 1.3rem; } .wb-tile { font: inherit; font-size: 1.05rem; padding: .55rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); transition: all .12s ease; } .wb-tile:hover:not(:disabled) { border-color: var(--jp-shu); } .wb-tile.used { opacity: 0; pointer-events: none; } .wb-tile.correct { border-color: var(--jp-matcha); background: var(--jp-matcha-tint); } .wb-tile.wrong { border-color: var(--jp-shu); background: var(--jp-shu-tint); } .wb-check { width: 100%; padding: .8rem; } /* type */ .type-input { font: inherit; font-size: 1.3rem; text-align: center; padding: .7rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); width: 100%; max-width: 22rem; margin: 1.4rem 0 1rem; } .type-input:focus { border-color: var(--jp-shu); } .type-input.correct { border-color: var(--jp-matcha); background: var(--jp-matcha-tint); } .type-input.wrong { border-color: var(--jp-shu); background: var(--jp-shu-tint); } /* match pairs */ .match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; width: 100%; margin-top: .5rem; } .match-col { display: flex; flex-direction: column; gap: .55rem; } .match-tile { font: inherit; font-size: 1.1rem; padding: .9rem .6rem; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: all .14s ease; min-height: 3rem; } .match-tile.jp { font-family: var(--font-jp); font-size: 1.3rem; } .match-tile:hover:not(:disabled) { border-color: var(--jp-shu); } .match-tile.sel { border-color: var(--jp-ai); background: var(--jp-ai-tint); } .match-tile.correct, .match-tile.done { border-color: var(--jp-matcha); background: var(--jp-matcha-tint); opacity: .85; } .match-tile.wrong { border-color: var(--jp-shu); background: var(--jp-shu-tint); animation: shake .35s; } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ---------- Lesson / session completion screen (shared) ---------- */ .lesson-done { text-align: center; padding: 1.5rem 0; animation: fadeUp .5s var(--ease-out, ease) both; } .lesson-done-emoji, .today-done-emoji { font-size: 3rem; } .hanko { display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; margin: 0 auto .4rem; border: 4px solid var(--jp-shu); color: var(--jp-shu); font-weight: 700; font-size: 1.5rem; letter-spacing: .05em; transform: rotate(-12deg) scale(2.4); opacity: 0; animation: hanko-thunk .45s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) .15s forwards; } @keyframes hanko-thunk { to { transform: rotate(-12deg) scale(1); opacity: .92; } } .lesson-done-title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 650; margin: .5rem 0 .3rem; } .lesson-done-goal { color: var(--jp-matcha); font-weight: 600; margin: 0 0 1.4rem; } .lesson-done-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.6rem; } .lesson-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem .8rem; text-align: center; box-shadow: var(--shadow-sm); } .lesson-stat-n { font-size: 1.8rem; font-weight: 700; font-family: var(--font-display); color: var(--jp-shu); } .lesson-stat-l { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); } .lesson-done-actions { display: flex; flex-direction: column; gap: .6rem; max-width: 20rem; margin: 0 auto; } /* daily-session readiness meter + pace verdict on the close screen */ .today-ready { max-width: 22rem; margin: 0 auto 1.2rem; text-align: left; } .today-ready-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; font-weight: 600; margin-bottom: .4rem; } .today-ready-label { color: var(--text-muted); } .today-ready-val { font-family: var(--font-display); font-size: 1.1rem; } .today-ready-delta { color: var(--jp-matcha); font-weight: 700; font-size: .85rem; } .today-ready-bar { height: 9px; border-radius: 999px; background: var(--border); overflow: hidden; } .today-ready-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--jp-shu), var(--jp-gold)); transition: width .6s var(--ease-out, ease); } .today-verdict { font-size: .9rem; color: var(--text-muted); max-width: 24rem; margin: 0 auto 1.4rem; line-height: 1.55; } /* ---------- Capability checklist ("what you can handle") ---------- */ .cap-count { font-size: .8rem; font-weight: 400; color: var(--text-muted); } .cap-list { display: grid; gap: 0; margin-top: .4rem; } .cap-row { display: flex; align-items: flex-start; gap: .9rem; padding: .7rem 0; border-top: 1px solid var(--border); } .cap-row:first-child { border-top: 0; } .cap-glyph { font-family: var(--font-jp); font-size: 1.5rem; line-height: 1; color: var(--text-muted); flex: none; width: 1.7rem; text-align: center; margin-top: -.1rem; } .cap-row.is-ready .cap-glyph { color: var(--jp-matcha); } .cap-body { flex: 1; min-width: 0; } .cap-label { font-size: .95rem; font-weight: 600; margin-bottom: .3rem; } .cap-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; } .cap-fill { height: 100%; border-radius: 999px; background: var(--jp-shu); transition: width .5s var(--ease-out, ease); } .cap-row.is-ready .cap-fill { background: var(--jp-matcha); } .cap-mark { flex: none; font-size: .8rem; font-weight: 700; color: var(--text-muted); min-width: 2.2rem; text-align: right; margin-top: .15rem; } .cap-row.is-ready .cap-mark { color: var(--jp-matcha); font-size: 1rem; } .party-note { font-size: .85rem; color: var(--text-muted); line-height: 1.55; margin: .3rem 0 0; } /* ---------- "What staff say" (/heard — the two-way reply surface) -- */ .heard { display: grid; gap: 1.6rem; } .heard-head { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; margin: 0 0 .3rem; } .heard-glyph { font-family: var(--font-jp); font-size: 1.4rem; color: var(--sect); line-height: 1; } .heard-intro { font-size: .88rem; color: var(--text-muted); margin: 0 0 .7rem; line-height: 1.5; } .heard-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; margin-bottom: .7rem; } .heard-q, .heard-reply, .heard-chip { display: flex; align-items: center; gap: .65rem; text-align: left; cursor: pointer; color: var(--text); font: inherit; transition: border-color var(--dur-fast,.18s) ease, background var(--dur-fast,.18s) ease; } .heard-q { width: 100%; background: var(--sect-tint); border: 1px solid transparent; border-radius: var(--r-sm); padding: .7rem .8rem; } .heard-q:hover { border-color: color-mix(in srgb, var(--sect) 40%, var(--border)); } .heard-q .heard-jp { font-size: 1.3rem; font-weight: 500; } .heard-reply, .heard-chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .5rem .75rem; } .heard-reply:hover, .heard-chip:hover { border-color: color-mix(in srgb, var(--sect) 45%, var(--border)); background: var(--sect-tint); } .heard-reply:active, .heard-chip:active, .heard-q:active { transform: scale(.98); transition-duration: .06s; } .heard-reply .heard-jp, .heard-chip .heard-jp { font-size: 1.1rem; } .heard-ico { display: inline-flex; flex: none; width: 1.9rem; height: 1.9rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); } .heard-q .heard-ico { color: var(--sect); border-color: color-mix(in srgb, var(--sect) 35%, var(--border)); } .heard-body { min-width: 0; } .heard-jp { font-family: var(--font-jp); font-feature-settings: "palt"; display: block; line-height: 1.3; } .heard-romaji { font-size: .74rem; font-style: italic; color: var(--text-muted); } .heard-en { font-size: .82rem; color: var(--text-muted); margin-top: .08rem; } .heard-replylabel { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--text-muted); margin: .85rem 0 .45rem; } .heard-replies, .heard-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .heard-note { font-size: .86rem; color: var(--text-muted); line-height: 1.55; margin: .7rem 0 0; padding-left: .2rem; } /* ---------- Survival card (/card — offline print/screenshot backup) -------- */ .card-actions { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.2rem; flex-wrap: wrap; } .card-hint { font-size: .82rem; color: var(--text-muted); } /* Always white "paper" — legible regardless of theme, for screenshot + print. */ .survival-card { background: #fff; color: #14110e; border-radius: var(--r); border: 1px solid #e3ddd2; box-shadow: var(--shadow-md); padding: 1.4rem 1.5rem; } .survival-card .sc-sect { margin-bottom: 1.2rem; } .survival-card .sc-sect:last-of-type { margin-bottom: .2rem; } .survival-card .sc-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: #b03a22; margin: 0 0 .55rem; border-bottom: 1px solid #eee4d6; padding-bottom: .3rem; } .survival-card .sc-list { display: grid; gap: .55rem; } .survival-card .sc-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: baseline; } .survival-card .sc-jp { font-family: var(--font-jp); font-feature-settings: "palt"; font-size: 1.2rem; font-weight: 600; color: #14110e; line-height: 1.3; } .survival-card .sc-meta { display: flex; flex-direction: column; } .survival-card .sc-romaji { font-size: .78rem; font-style: italic; color: #6a6258; } .survival-card .sc-en { font-size: .86rem; color: #36302a; line-height: 1.35; } .survival-card .sc-foot { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid #eee4d6; font-size: .72rem; color: #8a8276; text-align: center; } .survival-card .sc-foot-jp { font-family: var(--font-jp); } @media (max-width: 460px) { .survival-card .sc-row { grid-template-columns: 1fr; gap: .15rem; } } @media print { .nh-header, .nh-footer, .no-print, #menu-toggle, .nh-mobile-menu { display: none !important; } body, body.dark-mode { background: #fff !important; color: #14110e !important; } main.nh-main, main { padding-top: .4rem !important; } .survival-card { box-shadow: none !important; border: 0 !important; padding: 0 !important; } .survival-card .sc-row, .survival-card .sc-sect { break-inside: avoid; } } /* ---------- Home: small affordances ------------------------------ */ .rdy-note { font-size: .8rem; font-weight: 400; color: var(--text-muted); } .rdy-link { text-decoration: none; } .rdy-link:hover { color: var(--jp-shu); } .track-chip { display: inline-block; margin-left: .6rem; font-size: .78rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--border); } .track-chip:hover { color: var(--jp-shu); border-bottom-color: var(--jp-shu); } .pod-action { display: inline-block; margin-top: .8rem; font-size: .85rem; font-weight: 600; color: var(--jp-shu); text-decoration: none; } .pod-action:hover { text-decoration: underline; } /* Daruma readiness — the right eye fills with trip-readiness (home #readiness) */ /* Lay the readiness line out as a wrapping flex row so the daruma centres on the text instead of stretching the line-box, and the capability note wraps cleanly. */ #readiness.hero-ready { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .daruma { flex: none; width: 1.5rem; height: auto; } .daruma .dr-body { fill: var(--jp-shu); } .daruma .dr-face { fill: #f4e6da; } body.dark-mode .daruma .dr-face { fill: #e7d3c4; } .daruma .dr-eye-l, .daruma .dr-ink { fill: #20140f; } .daruma .dr-eye-r { fill: #fff; stroke: #20140f; stroke-width: 1; } /* Next-win line — the nearest capability about to flip ready (home) */ .hero-next { margin: .45rem 0 0; font-size: .86rem; } .hero-next-link { text-decoration: none; color: var(--text-muted); } .hero-next-link:hover { color: var(--jp-shu); } .hero-next-glyph { color: var(--jp-shu); font-weight: 600; font-family: var(--font-jp); margin-right: .1rem; } /* ===================== Home: companion hub =========================== */ /* All global (the hero count + survival chips are built in home.ts, so scoped Astro styles would never reach them). Browse tiles carry their destination's section accent per-element (.sect-places etc.), so the home reads as a colour map of the app. */ /* Hero — countdown + companion line */ .home-hero { padding: .25rem 0 1.6rem; } .hero-greet { font-size: 1rem; color: var(--text-muted); margin: 0 0 .9rem; min-height: 1.2rem; } .hero-greet .jp { color: var(--text); font-weight: 600; } .hero-greet-en { font-size: .82rem; } .hero-count { font-size: clamp(2.3rem, 6.5vw, 4.2rem); margin: 0; line-height: 1.03; min-height: 2.4rem; } .hero-num { color: var(--jp-shu); } .hero-unit { display: block; font-size: clamp(1rem, 2.4vw, 1.5rem); font-weight: 500; color: var(--text); margin-top: .3rem; font-family: var(--font-display); } .hero-unit em { color: var(--text-muted); font-style: normal; font-weight: 400; } .hero-sub { color: var(--text-muted); font-size: 1.02rem; line-height: 1.55; margin: 1rem 0 0; max-width: 36rem; min-height: 1rem; } .trip-edit { margin: .8rem 0 0; } .trip-edit button { font: inherit; font-size: .78rem; background: none; border: 0; color: var(--text-muted); cursor: pointer; text-decoration: underline; padding: 0; } .trip-edit button:hover { color: var(--jp-shu); } .trip-input { font: inherit; font-size: .85rem; margin-left: .5rem; padding: .2rem .4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); } /* Sections */ .home-section { margin: 0 0 2rem; } .home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; } .home-section-more { font-size: .82rem; color: var(--text-muted); text-decoration: none; white-space: nowrap; } .home-section-more:hover { color: var(--jp-murasaki); } /* Browse tiles (shared card-grid styles, also used by /learn) */ .home-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .ex-glyph { font-family: var(--font-jp); font-size: 1.9rem; line-height: 1; color: var(--sect); font-weight: 500; } .ex-title { font-size: 1.2rem; font-weight: 650; margin: .55rem 0 .35rem; font-family: var(--font-display); } .ex-desc { font-size: .9rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 .9rem; } .ex-go { font-size: .85rem; font-weight: 600; color: var(--sect); } /* Places by city */ .city-chips { display: flex; flex-wrap: wrap; gap: .55rem; } .city-chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; transition: color .18s, border-color .18s, transform .12s; } .city-chip:hover { color: var(--jp-murasaki); border-color: color-mix(in srgb, var(--jp-murasaki) 45%, var(--border)); transform: translateY(-1px); } .city-chip:active { transform: translateY(0) scale(.98); } .city-chip-name { font-weight: 600; font-size: .92rem; } .city-chip-count { font-size: .72rem; font-weight: 700; color: var(--text-muted); } /* In-the-moment tools */ .home-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; } .home-tool { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; } a.home-tool[hidden] { display: none; } /* card-link sets display:block, overriding [hidden] */ .home-tool-glyph { font-family: var(--font-jp); font-size: 1.5rem; line-height: 1; color: var(--text-muted); flex: none; width: 1.9rem; text-align: center; } .home-tool-body { display: flex; flex-direction: column; min-width: 0; } .home-tool-name { font-weight: 650; font-size: .95rem; } .home-tool-sub { font-size: .78rem; color: var(--text-muted); line-height: 1.4; } .home-tool:hover { border-color: color-mix(in srgb, var(--text) 24%, var(--border)); } .home-tool-sos .home-tool-glyph { color: var(--jp-shu); } .home-tool-sos:hover { border-color: color-mix(in srgb, var(--jp-shu) 45%, var(--border)); } /* Phrase of the day */ .pod { margin-bottom: 2rem; } .pod-label { margin-bottom: .7rem; } .pod-row { display: flex; gap: .9rem; align-items: flex-start; } .pod-jp { font-family: var(--font-jp); font-size: 1.7rem; line-height: 1.3; font-feature-settings: "palt"; } .pod-romaji { font-size: .82rem; font-style: italic; color: var(--text-muted); margin-top: .15rem; } .pod-en { font-size: .95rem; margin-top: .25rem; } /* Practice strip — demoted language gateway */ .practice-strip { display: flex; align-items: center; gap: 1rem; } .practice-strip-glyph { font-family: var(--font-jp); font-size: 2rem; line-height: 1; color: var(--jp-shu); flex: none; } .practice-strip-body { display: flex; flex-direction: column; flex: 1; min-width: 0; } .practice-strip-title { font-weight: 650; font-size: 1.02rem; } .practice-strip-sub { font-size: .82rem; color: var(--text-muted); margin-top: .12rem; } .practice-strip-cta { flex: none; } @media (max-width: 760px) { .home-tiles { grid-template-columns: 1fr; } .home-tools { grid-template-columns: 1fr; } } /* ---------- Path: optional (writing-system) sections -------------- */ .path-optional-head { text-align: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--text-muted); margin: 2rem 0 .4rem; padding-top: 1.4rem; border-top: 1px dashed var(--border); } .path-optional { opacity: .72; } .path-optional:hover { opacity: 1; } /* ---------- First-run onboarding ---------------------------------- */ .ob-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(3px); padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); overflow-y: auto; } .ob-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1.8rem 1.6rem; max-width: 27rem; width: 100%; text-align: center; } .ob-seal { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: var(--jp-shu); color: #fff; font-size: 1.5rem; font-weight: 700; margin-bottom: .7rem; } .ob-title { font-size: 1.5rem; margin: 0 0 .5rem; } .ob-lead { font-size: .95rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 1.4rem; } .ob-field { display: block; text-align: left; margin-bottom: 1.3rem; } .ob-q { display: block; font-weight: 650; font-size: 1rem; } .ob-hint { display: block; font-size: .8rem; color: var(--text-muted); margin: .15rem 0 .5rem; line-height: 1.4; } .ob-date { font: inherit; font-size: 1rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--text); width: 100%; } .ob-choices { display: grid; gap: .55rem; } .ob-choice { text-align: left; display: flex; flex-direction: column; gap: .15rem; padding: .75rem .85rem; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: all .15s ease; } .ob-choice:hover { border-color: color-mix(in srgb, var(--jp-shu) 40%, var(--border)); } .ob-choice.on { border-color: var(--jp-shu); background: var(--jp-shu-tint); } .ob-choice-t { font-weight: 650; font-size: .95rem; } .ob-choice.on .ob-choice-t { color: var(--jp-shu); } .ob-choice-d { font-size: .8rem; color: var(--text-muted); line-height: 1.4; } .ob-start { width: 100%; margin-top: .4rem; } .ob-skip { display: block; margin: .8rem auto 0; background: none; border: 0; color: var(--text-muted); font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; } .ob-skip:hover { color: var(--jp-shu); } /* milestone toast (calm one-off celebration, no confetti) */ .nh-toast { position: fixed; left: 50%; bottom: max(1.4rem, env(safe-area-inset-bottom)); z-index: 80; transform: translate(-50%, 1.5rem); max-width: min(92vw, 27rem); padding: .8rem 1.2rem; border-radius: 999px; background: var(--jp-matcha); color: #fff; font-weight: 600; font-size: .92rem; text-align: center; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease-out, ease), transform .4s var(--ease-out, ease); } body.dark-mode .nh-toast { color: #11160e; } .nh-toast.show { opacity: 1; transform: translate(-50%, 0); } /* confetti (peak-end celebration) */ .confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; } .confetti i { position: absolute; top: -12px; width: 9px; height: 9px; border-radius: 2px; animation: confetti-fall linear forwards; } @keyframes confetti-fall { to { transform: translateY(105vh) rotate(720deg); opacity: .9; } } @media (any-pointer: coarse) { .speak { position: relative; } .speak::before { content: ""; position: absolute; inset: -8px; } } /* Press feedback for the thumb — this is a phone-first app where hover barely exists, so the tap-down is the real interaction. Restrained, fast, consistent. */ .card-link:active { transform: translateY(-1px) scale(.992); transition-duration: .06s; } .btn:active, .chip:active { transform: translateY(0) scale(.97); } .ex-opt:active:not(:disabled), .wb-tile:active:not(:disabled), .match-tile:active:not(:disabled), .kana-cell:active { transform: scale(.96); transition-duration: .06s; } .speak:active { transform: scale(.92); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ===================== Places domain ================================== */ /* Headings use the refined SANS body stack (NOT the serif --font-display). */ .sect-places .ph-title, .sect-places .pl-detail-title { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", system-ui, sans-serif; letter-spacing: -.02em; font-weight: 720; } /* Keyboard focus ring picks up the section accent (the global ring is shu). */ .sect-places :focus-visible { outline-color: var(--jp-murasaki); } /* Filter chip rows scroll within their own track (no page horizontal scroll). */ .pl-filters { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.3rem; } .pl-chiprow { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pl-chiprow::-webkit-scrollbar { display: none; } .pl-chip { flex: none; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 550; min-height: 2.1rem; padding: .35rem .85rem; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); transition: color .18s, background .18s, border-color .18s; } .pl-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--sect) 40%, var(--border)); } .pl-chip[aria-pressed="true"] { color: #fff; background: var(--sect); border-color: transparent; } body.dark-mode .pl-chip[aria-pressed="true"] { color: #160e0b; } .pl-chiprow.cat .pl-chip[aria-pressed="true"] { background: transparent; color: var(--sect); border-color: var(--sect); } .pl-disclaimer { font-size: .76rem; color: var(--text-muted); margin: -.3rem 0 1.3rem; } /* Favorites strip */ .pl-favstrip { margin-bottom: 1.5rem; } .pl-favstrip[hidden] { display: none; } .pl-favstrip-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .55rem; } /* Featured hero (Atelier "Utvalgt") */ .pl-featured { margin-bottom: 1.4rem; } .pl-featured[hidden] { display: none; } .pl-featured-rule { display: flex; align-items: center; gap: .7rem; margin: 0 .1rem .7rem; } .pl-featured-rule .nm { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; } .pl-featured-rule .ln { flex: 1; height: 1px; background: var(--border); } .pl-hero { position: relative; display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); } .pl-hero .pl-card-media { aspect-ratio: 16 / 10; max-height: 46vh; } .pl-hero-wm { position: absolute; top: .1rem; left: .7rem; z-index: 2; font-family: var(--font-jp); line-height: 1; font-size: clamp(3rem, 13vw, 4.6rem); color: rgba(255,255,255,.13); pointer-events: none; } .pl-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.6rem 1.1rem 1rem; background: linear-gradient(transparent, rgba(8,7,6,.86) 60%); } .pl-hero-kicker { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--jp-murasaki); font-weight: 700; } .pl-hero-title { font-size: clamp(1.2rem, 4.6vw, 1.5rem); font-weight: 720; letter-spacing: -.015em; margin: .15rem 0 .25rem; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", system-ui, sans-serif; } .pl-hero-lead { font-size: .82rem; color: #d8d0c7; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Grid + cards */ .pl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (max-width: 600px) { .pl-grid { grid-template-columns: 1fr; } } .pl-card { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: box-shadow .18s; } .pl-card[hidden] { display: none; } .pl-card:hover { box-shadow: var(--shadow-md); } /* Whole-card link WITHOUT nesting a