/* Shared stylesheet for the static child pages (/help/, /privacy/, /support/). * * These pages live in public/ so Vite copies them into dist/ verbatim — they * are never part of the app bundle and deliberately share nothing with * src/style.css beyond the LINE Seed JP webfont link each page's also * carries (see docs/i18n-pages.md for the translation scheme these pages are * prepared for). * * Visual language: calm, not neon. Colour is almost absent — hierarchy comes * from weight/size/spacing. Cyan is reserved for two things only: the short * rule under an

and a link's underline on hover/focus (plus the inline * SVG diagrams' own functional colours, which are a separate vocabulary further * down this file and are intentionally untouched by this palette). Mobile-first, * single column, no JavaScript. */ :root { --bg: #0b0d10; --panel: #14171c; --line: #232830; --cyan: #00f0ff; --ink: #e6e8eb; --ink-lo: #9aa3ad; --heading: #f2f4f6; --warn: #ffb020; } * { box-sizing: border-box; } html { background: var(--bg); -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); /* Only weights 400/700 exist for LINE Seed JP on Google Fonts — never reference 500/600 anywhere or the browser will synthesise a fake bold. */ font-family: "LINE Seed JP", system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: 16px; line-height: 1.9; letter-spacing: 0.01em; word-break: auto-phrase; line-break: strict; } /* Cap body-copy measure for readability; figures/tables opt out via their own width rules further down, so this only touches running text. */ p, li, dd { max-width: 34em; } .wrap { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1.15rem 4rem; } /* --- masthead ---------------------------------------------------------- */ .masthead { border-bottom: 1px solid var(--line); padding-bottom: 0.9rem; margin-bottom: 1.75rem; } /* The back-to-app link is one of the two places cyan is allowed to appear as an accent (the other is the short rule under an

, below) — everywhere else, hover/focus only ever goes to white. */ .masthead a.brand { display: inline-block; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: lowercase; color: var(--ink-lo); text-decoration: none; } .masthead a.brand:hover, .masthead a.brand:focus-visible { color: #fff; text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 0.18em; } h1 { font-size: 1.5rem; line-height: 1.4; margin: 0.75rem 0 0.35rem; color: var(--heading); font-weight: 700; letter-spacing: -0.01em; } .lede { color: var(--ink-lo); margin: 0 0 0.6rem; font-size: 0.95rem; } .lede:last-of-type { margin-bottom: 0; } .updated { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--ink-lo); letter-spacing: 0.06em; } /* --- sections ---------------------------------------------------------- */ h2 { font-size: 1.08rem; margin: 2.4rem 0 0.7rem; padding-top: 0.9rem; border-top: 1px solid var(--line); color: var(--heading); font-weight: 700; letter-spacing: -0.01em; } /* The one other place cyan is allowed: a short (not full-width) rule under the heading text, instead of colouring the text itself. */ h2::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 0.55rem; background: var(--cyan); } /* The masthead already draws a rule; don't double it up when a section heading is the first thing in
. */ main > h2:first-child { border-top: none; padding-top: 0; margin-top: 1.2rem; } h3 { font-size: 0.98rem; margin: 1.5rem 0 0.4rem; color: var(--heading); font-weight: 700; } p, ul, ol, dl { margin: 0.6rem 0; } ul, ol { padding-left: 1.3rem; } li { margin: 0.3rem 0; } li > ul { margin: 0.2rem 0; } strong { color: var(--heading); font-weight: 600; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 0.05em 0.35em; color: var(--ink); word-break: break-word; } /* Body colour, not accent colour — the underline itself carries the "this is a link" signal at rest (~40% of currentColor), and only goes cyan (plus the text going white) on hover/focus. */ a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(230, 232, 235, 0.4); text-underline-offset: 0.18em; } a:hover, a:focus-visible { color: #fff; text-decoration-color: var(--cyan); } a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 2px; } /* --- schematic figures (help) ------------------------------------------ * Inline SVG only — no screenshots (they rot) and no external files. Every * label inside a diagram is a real element, so translating a diagram * later is a text edit, never a redraw. Diagrams are authored at roughly * 360 user units wide so they sit near 1:1 on a 375px phone and scale UP on * desktop; that keeps the in-diagram type legible at the small end. */ figure.dia { margin: 1.4rem 0; border: 1px solid var(--line); background: var(--panel); padding: 0.9rem 0.75rem 0.7rem; } figure.dia svg { display: block; width: 100%; max-width: 33rem; height: auto; margin: 0 auto; } figure.dia figcaption { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.7; color: var(--ink-lo); text-align: center; } /* Diagram vocabulary, kept in CSS so the palette lives in one place. */ .dia .d-face { fill: #0f1720; } .dia .d-line { stroke: #38495c; stroke-width: 1; fill: none; } .dia .d-edge { stroke: #6d8398; stroke-width: 1.5; fill: none; } .dia .d-cyan { fill: var(--cyan); } .dia .d-cyan-s { stroke: var(--cyan); stroke-width: 1.5; fill: none; } .dia .d-mag { fill: #ff2fb9; } .dia .d-mag-s { stroke: #ff2fb9; stroke-width: 1.5; fill: none; } .dia .d-red { fill: #ff4d4d; } .dia .d-green { fill: #4ce07a; } .dia .d-blue { fill: #4d9bff; } .dia .d-seed { fill: #37485a; } .dia .d-amber { fill: var(--warn); } .dia text { font-family: "LINE Seed JP", system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: 12px; fill: var(--ink); } .dia text.t-key { font-size: 12.5px; fill: var(--cyan); letter-spacing: 0.06em; } .dia text.t-sub { font-size: 10.5px; fill: var(--ink-lo); } /* Screenshot-based figure (画面の見かた): a real with numbered callouts drawn on top. The badge is always a dark translucent disc so the number reads against both the dark map and the light deck underneath it — no separate light/dark variant needed. Leader lines/dots share the cyan accent already used elsewhere in these diagrams. */ .dia .cal-badge { fill: rgba(8, 12, 17, 0.85); stroke: var(--cyan); stroke-width: 1.5; } .dia text.cal-num { font-size: 15px; font-weight: 700; fill: #fff; text-anchor: middle; } .dia .cal-line { stroke: rgba(0, 240, 255, 0.85); stroke-width: 1.5; fill: none; } .dia .cal-dot { fill: var(--cyan); } /* --- FAQ accordions ---------------------------------------------------- *
/: keyboard- and screen-reader-accessible with no JS, * and compact enough that a long FAQ stays scannable at 375px. */ .faq { margin: 1rem 0 0; } .faq details { border: 1px solid var(--line); background: var(--panel); margin: 0.5rem 0; } .faq summary { cursor: pointer; padding: 0.7rem 0.9rem; font-size: 0.95rem; line-height: 1.6; color: var(--ink); list-style: none; display: flex; gap: 0.6rem; align-items: baseline; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before { content: "+"; color: var(--ink-lo); font-weight: 700; flex-shrink: 0; } .faq details[open] summary::before { content: "\2212"; /* minus */ } .faq summary:hover { color: #fff; } .faq summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; } .faq .faq-a { padding: 0 0.9rem 0.85rem 2rem; font-size: 0.93rem; color: var(--ink-lo); } .faq .faq-a > :first-child { margin-top: 0; } .faq .faq-a > :last-child { margin-bottom: 0; } /* --- callout ----------------------------------------------------------- */ .note { border: 1px solid var(--line); background: var(--panel); padding: 0.85rem 1rem; margin: 1.2rem 0; font-size: 0.94rem; } /* The only two-tone note: warnings get a left accent in amber (a functional colour, not decorative — it's the same hue the app itself uses for warnings), everything else stays flat panel/line. */ .note.warn { border-left: 3px solid var(--warn); } /* A second, stronger tier for privacy-sensitive risks (e.g. a journey's GPS * track is about to be shared) — red instead of amber, with a faint red * tint on the raised surface so it reads as more serious without ever * putting red text on a dark background (contrast stays on --ink/--heading, * only the border/tint carries the colour). Kept separate from .warn so * existing amber warnings elsewhere are unaffected; /privacy/ can adopt this * same class later for its matching journey-share warning. */ .note.danger { background: #1c1113; border-color: #3a1c1c; border-left: 3px solid #ff4d4d; } .note > :first-child { margin-top: 0; } .note > :last-child { margin-bottom: 0; } /* --- machine-translation disclaimer ------------------------------------- * Sits once, right after

/.lede, on every non-ja translation of these * pages (see docs/i18n-pages.md). Deliberately calm — a bordered note on the * raised surface in secondary ink, not an alarm banner. Absent entirely on * the Japanese pages (ja is the original, not a translation). */ .mt-notice { border: 1px solid var(--line); background: var(--panel); padding: 0.75rem 1rem; margin: 1.1rem 0 0; font-size: 0.88rem; line-height: 1.7; color: var(--ink-lo); } .mt-notice > :first-child { margin-top: 0; } .mt-notice > :last-child { margin-bottom: 0; } /* --- term list (help: element/key/menu glossaries) ---------------------- * A
for any "用語 — 説明" list: the term always gets its own line * (never runs into the description), with a bigger gap *between* entries * than the gap *inside* one, so the eye can scan terms first and drop into * a description only on demand. Used for the anatomy list and every other * term/definition list on this page (transport keys, EDIT MENU items, * SETUP rows, map buttons, troubleshooting symptoms, …). */ .terms { margin: 0.9rem 0; } .terms dt { color: var(--heading); font-weight: 700; margin-top: 1.15rem; line-height: 1.4; } .terms dt:first-child { margin-top: 0; } .terms dd { margin: 0.3rem 0 0; padding-left: 0.9rem; color: var(--ink-lo); line-height: 1.6; } .terms dd > :first-child { margin-top: 0; } /* Nested glossary (e.g. the three movement-FX rows inside SETUP's own ムーブメントFX entry): same shape, tightened and indented one notch further so it reads as a sub-list rather than a new top-level term. */ .terms .terms-sub { margin: 0.6rem 0 0.2rem; } .terms .terms-sub dt { font-size: 0.95em; margin-top: 0.7rem; padding-left: 0.9rem; } .terms .terms-sub dd { padding-left: 1.8rem; } /* --- data list (privacy: what is sent) --------------------------------- */ .facts { margin: 0.8rem 0; } .facts dt { color: var(--heading); font-weight: 600; margin-top: 0.9rem; font-size: 0.95rem; } .facts dd { margin: 0.1rem 0 0; padding-left: 0; color: var(--ink); font-size: 0.94rem; } /* --- support: organisation list ---------------------------------------- */ .orgs { list-style: none; padding: 0; margin: 0.8rem 0 0; } .orgs li { max-width: none; /* card, not prose — opt out of the body measure cap */ border: 1px solid var(--line); background: var(--panel); padding: 0.85rem 1rem; margin: 0.7rem 0; } .orgs .org-name { display: block; font-size: 1rem; margin-bottom: 0.15rem; } .orgs .org-meta { display: block; font-size: 0.82rem; color: var(--ink-lo); line-height: 1.7; word-break: break-word; } /* --- footer / cross-links ---------------------------------------------- */ .pagenav { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.9rem; } .pagenav ul { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; } .pagenav li { max-width: none; margin: 0; } .pagenav .contact { margin-top: 0.9rem; color: var(--ink-lo); } @media (min-width: 40rem) { body { font-size: 17px; } .wrap { padding: 2.5rem 2rem 5rem; } h1 { font-size: 1.8rem; } } /* Company mark in the footer. The SVG carries a baked fill (an can't inherit currentColor). Rendered at full strength — white on the page's transparent dark ground, as supplied. */ .brandmark { display: inline-block; margin-top: 1.2rem; text-decoration: none; opacity: 0.9; transition: opacity 0.15s ease-out; } .brandmark:hover, .brandmark:focus-visible { opacity: 1; } .brandmark img { display: block; width: 150px; height: auto; }