/* /learn-japanese/: the Japanese learning-target page. Reuses site.css + narrative.css chapters and adds only what Japanese needs: Japanese glyph shapes, ruby, the register and conjugation type cards, the learning-language switch and the pre-capture frames. */ /* Japanese text gets Japanese glyph shapes, never the Chinese Noto Sans SC forms. System fonts only. */ :lang(ja) { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", "YuGothic", Meiryo, var(--font-sans); font-feature-settings: "palt" 0; } ruby { ruby-position: over; } rt { font-size: .5em; font-weight: 500; color: var(--mutedtext); letter-spacing: .02em; } /* Pre-capture frame. Replaced by the iOS recording; never shipped (DD-275). */ .demo-todo { display: grid !important; place-items: center; height: 100%; padding: 12%; text-align: center; background: #2a2a28; color: #d9d2c8; font: 500 .85rem/1.45 var(--font-sans); } .demo-todo b { display: block; margin-bottom: .5rem; color: var(--golden); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; } /* Type cards: real Japanese examples set as type, not as a fake interface. */ .ja-card { width: min(100%, 29rem); padding: 28px 28px 24px; background: var(--surface); border-radius: 28px; box-shadow: 0 2px 0 rgba(28, 27, 25, .06), 0 18px 40px rgba(28, 27, 25, .08); } /* Politeness switch: one sentence, three listeners. Radios + :has work without JavaScript. */ .register { width: min(100%, 30rem); min-width: 0; container-type: inline-size; margin: 0; padding: 26px 26px 22px; background: var(--white); border-radius: 30px; box-shadow: 0 5px 0 var(--hairline), 0 22px 44px -22px rgb(96 58 30 / .35); } .register-cue { margin: 0 0 18px; color: var(--mutedtext); font: 500 1rem/1.4 var(--font-sans); } .register-switch { display: flex; gap: 4px; margin: 0 0 22px; padding: 4px; border: 0; border-radius: 999px; background: var(--cream); } .register-switch input { position: absolute; opacity: 0; pointer-events: none; } .register-switch label { flex: 1; min-height: 40px; display: grid; place-items: center; border-radius: 999px; color: var(--mutedtext); font: 600 .9rem/1 var(--font-sans); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; } .register-switch label:hover { color: var(--ink); } .register-switch input:checked + label { background: var(--white); color: var(--ink); box-shadow: 0 2px 0 var(--hairline), 0 6px 14px -8px rgb(96 58 30 / .45); } .register-switch input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; } .register-lines { display: grid; min-width: 0; min-height: 4.4rem; align-items: end; } .register-line { grid-area: 1 / 1; margin: 0; font-size: min(1.8rem, 6.3cqi); line-height: 2; color: var(--ink); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; } .register-line rt { font-size: .42em; } .register-note { margin: 6px 0 0; color: var(--mutedtext); font: 500 .9rem/1.4 var(--font-sans); } .register-note span { display: none; } .register:has(#reg-friend:checked) [data-for="friend"], .register:has(#reg-coworker:checked) [data-for="coworker"], .register:has(#reg-client:checked) [data-for="client"] { opacity: 1; transform: none; display: inline; } .register:has(#reg-friend:checked) .register-line[data-for="friend"], .register:has(#reg-coworker:checked) .register-line[data-for="coworker"], .register:has(#reg-client:checked) .register-line[data-for="client"] { display: block; } @media (prefers-reduced-motion: reduce) { .register-line, .register-switch label { transition: none; } } .chain { margin: 0; padding: 0; list-style: none; } .chain-surface { margin: 0 0 18px; font-size: 2.1rem; line-height: 1.8; color: var(--ink); } .chain li { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; align-items: baseline; padding: 10px 0 10px 18px; border-left: 2px solid var(--hairline); } .chain li::before { content: ""; position: absolute; left: -6px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); } .chain li:first-child::before { background: var(--golden); } .chain-form { font-size: 1.15rem; color: var(--ink); } .chain-step { color: var(--mutedtext); font: 400 .95rem/1.4 var(--font-sans); } .chain-step strong { color: var(--ink); font-weight: 600; } .chain-result { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--butter); font: 500 1rem/1.4 var(--font-sans); color: var(--ink); } /* Three Japanese specifics. */ .ja-specifics { padding-block: 24px 72px; } .ja-specifics h2 { margin: 0 0 28px; font: 600 clamp(2.2rem, 4vw, 3.2rem)/1.1 var(--font-display); letter-spacing: -.02em; } .ja-specifics ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .ja-specifics li { padding: 28px; border-radius: 28px; background: var(--surface); } .ja-specifics h3 { margin: 0 0 10px; font: 600 1.25rem/1.25 var(--font-sans); } .ja-specifics p { margin: 0; color: var(--mutedtext); font: 400 1.0625rem/1.55 var(--font-sans); } .ja-glyph { display: block; margin-bottom: 14px; font-size: 1.9rem; line-height: 1.7; color: var(--ink); } .ja-levels { font-family: var(--font-sans); letter-spacing: .01em; } .ja-arrow { display: inline-block; margin-inline: .3em; color: var(--coral); font-size: .8em; vertical-align: .08em; } .pitch { position: relative; display: inline-block; } .pitch svg { position: absolute; left: 0; top: .02em; width: 100%; height: .3em; overflow: visible; } @media (max-width: 52rem) { .ja-specifics ul { grid-template-columns: 1fr; } .ja-card { padding: 22px 20px 20px; } .register { padding: 20px 16px 18px; } .register-switch label { font-size: .85rem; } .register-lines { min-height: 3.6rem; } .chain li { grid-template-columns: 4.5rem 1fr; } .chain-surface { font-size: 1.75rem; } } /* Peach marker for the changing ending: the site swipe in the peach family, softer than the coral headline mark. */ .mark.mark-peach { background-image: url("data:image/svg+xml,"); }