/* China 2026 — stylesheet. * * Mobile-first, no external fonts or CDN: everything ships with the files so * the page works offline and behind the firewall. Colours live in custom * properties so the dark theme is a single block of overrides. * * Theme resolution order: * 1. :root -> light defaults * 2. @media (prefers-color-scheme: dark) -> follows the OS * 3. [data-theme="light"|"dark"] on -> manual override, wins */ /* Palette: warm paper, cream cards, coral accent, olive for "done". The dark * theme keeps the same warmth instead of switching to a cold blue-grey. */ :root { color-scheme: light dark; --bg: #f4efe6; --bg-deep: #e9dfd0; --surface: #fffaf2; --text: #292824; --muted: #6f695c; --accent: #c76545; --accent-strong: #9f452c; --accent-soft: #f5e5de; --accent-text: #ffffff; --border: #d8cebf; --ok: #5f6a45; --ok-soft: #e5eadb; --warn: #946a1e; --warn-soft: #f3ead5; --danger: #b3302a; --blue: #6a8a95; --sage: #aeb79b; --note-bg: #edf0e7; --note-text: #50563e; --nav-bg: rgba(43, 42, 37, 0.94); --serif: Georgia, "Times New Roman", "Songti SC", "Noto Serif SC", serif; --radius: 1rem; --radius-lg: 1.4rem; --tap: 44px; --shadow: 0 1px 2px rgba(76, 58, 39, 0.05); --shadow-lg: 0 24px 80px rgba(76, 58, 39, 0.11); } @media (prefers-color-scheme: dark) { :root { --bg: #1c1a17; --bg-deep: #2e2a25; --surface: #262320; --text: #efe8dc; --muted: #a9a192; --accent: #e38a6b; --accent-strong: #f0a488; --accent-soft: #3d2a22; --accent-text: #1c1a17; --border: #3d3831; --ok: #aab88a; --ok-soft: #2d3226; --warn: #dcae62; --warn-soft: #3a3121; --danger: #f27a66; --blue: #8fb0ba; --sage: #7f8a6b; --note-bg: #2a2e24; --note-text: #cdd5bb; --nav-bg: rgba(14, 13, 11, 0.94); --shadow: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45); } } /* Manual override: repeated verbatim so it beats the media query regardless of * the OS setting. */ html[data-theme="light"] { color-scheme: light; --bg: #f4efe6; --bg-deep: #e9dfd0; --surface: #fffaf2; --text: #292824; --muted: #6f695c; --accent: #c76545; --accent-strong: #9f452c; --accent-soft: #f5e5de; --accent-text: #ffffff; --border: #d8cebf; --ok: #5f6a45; --ok-soft: #e5eadb; --warn: #946a1e; --warn-soft: #f3ead5; --danger: #b3302a; --blue: #6a8a95; --sage: #aeb79b; --note-bg: #edf0e7; --note-text: #50563e; --nav-bg: rgba(43, 42, 37, 0.94); --shadow: 0 1px 2px rgba(76, 58, 39, 0.05); --shadow-lg: 0 24px 80px rgba(76, 58, 39, 0.11); } html[data-theme="dark"] { color-scheme: dark; --bg: #1c1a17; --bg-deep: #2e2a25; --surface: #262320; --text: #efe8dc; --muted: #a9a192; --accent: #e38a6b; --accent-strong: #f0a488; --accent-soft: #3d2a22; --accent-text: #1c1a17; --border: #3d3831; --ok: #aab88a; --ok-soft: #2d3226; --warn: #dcae62; --warn-soft: #3a3121; --danger: #f27a66; --blue: #8fb0ba; --sage: #7f8a6b; --note-bg: #2a2e24; --note-text: #cdd5bb; --nav-bg: rgba(14, 13, 11, 0.94); --shadow: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45); } /* ---------- base ---------- */ * { box-sizing: border-box; } html { /* Keeps the manual theme from flashing the wrong colour on the scrollbar. */ background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-size: 16px; line-height: 1.5; /* Long Chinese station names and phrases must never widen the page. */ overflow-wrap: break-word; } h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5rem; } h1 { font-size: 1.25rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 0.75rem; } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- layout ---------- */ .container, .header-bar, .tabs { max-width: 900px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; } .container { padding-top: 1rem; padding-bottom: 3rem; } /* ---------- failure bar ---------- */ /* Sits above the sticky header (z-index 3 against its 2) and stays in view, so * a failure is visible from whichever tab the user is on. */ .failure-bar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.7rem 1rem; background: var(--danger); color: #ffffff; line-height: 1.4; } .failure-bar a { color: #ffffff; text-decoration: underline; min-height: var(--tap); display: inline-flex; align-items: center; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--border); } .header-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: var(--tap); padding-top: 0.5rem; padding-bottom: 0.5rem; } .countdown { max-width: 900px; margin: 0 auto; padding: 0 1rem 0.5rem; color: var(--muted); font-size: 0.9rem; } .countdown:empty { display: none; } /* Colour is the whole point of the clock: it has to be readable as urgency * from across the room, not just as text. */ .countdown.urgent { color: var(--warn); } .countdown.critical { color: var(--danger); } .countdown.done { color: var(--ok); } .countdown-left { white-space: nowrap; } /* ---------- to-do overview (Boekingen) ---------- */ .todo-overview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.75rem 1rem; margin-bottom: 1rem; } .todo-overview h3 { margin-top: 0; } .todo-bucket { margin-top: 0.9rem; } /* The group title carries the urgency colour, so 'Nu' reads as an alarm and * 'Kan later' as reassurance before a single row is read. */ .todo-bucket-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--border); } .todo-bucket-title { margin: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; } .todo-bucket-now .todo-bucket-head { border-color: var(--danger); } .todo-bucket-now .todo-bucket-title { color: var(--danger); } .todo-bucket-soon .todo-bucket-head { border-color: var(--warn); } .todo-bucket-soon .todo-bucket-title { color: var(--warn); } .todo-bucket-later .todo-bucket-title, .todo-bucket-onsite .todo-bucket-title { color: var(--muted); } .todo-list { list-style: none; margin: 0; padding: 0; } /* Each row is a button to its card, styled as a list row rather than a * button: full width, no frame, a hairline between rows. */ .todo-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; width: 100%; min-height: var(--tap); padding: 0.45rem 0; background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; text-align: left; color: var(--text); } .todo-list li:first-child .todo-row { border-top: 0; } .todo-row:hover, .todo-row:focus-visible { border-color: var(--border); color: var(--accent-strong); } .todo-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .todo-left { flex: 0 0 auto; min-width: 9rem; font-weight: 600; white-space: nowrap; } .todo-row.urgent .todo-left { color: var(--warn); } .todo-row.critical .todo-left { color: var(--danger); } .todo-main { flex: 1 1 12rem; display: flex; flex-direction: column; gap: 0.1rem; } /* The card a row jumps to sits under the sticky header; leave room for it, * then blink the edge once so the eye lands on the right card. */ .booking { scroll-margin-top: 5.5rem; } .booking.flash { animation: booking-flash 1.6s ease-out; } @keyframes booking-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: var(--shadow); } } /* On a phone the countdown gets its own line so it never wraps mid-figure. */ @media (max-width: 480px) { .todo-left { flex-basis: 100%; } } /* ---------- navigation ---------- */ .tabs { display: flex; gap: 0.25rem; background: var(--surface); border-bottom: 1px solid var(--border); /* On a phone the six tabs do not fit; scroll them sideways instead of * letting them widen the page. */ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs a { flex: 0 0 auto; display: flex; align-items: center; min-height: var(--tap); padding: 0 0.75rem; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; } .tabs a[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); } /* ---------- controls ---------- */ button, select, input, textarea { font: inherit; color: inherit; } button { min-height: var(--tap); padding: 0 0.9rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; } button:hover { border-color: var(--accent); } button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } button.danger { color: var(--danger); border-color: var(--danger); } input[type="text"], input[type="search"], input[type="number"], select, textarea { width: 100%; min-height: var(--tap); padding: 0.5rem 0.65rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } textarea { min-height: 6rem; resize: vertical; } label { display: block; margin-bottom: 0.35rem; color: var(--muted); font-size: 0.9rem; } /* Checkable rows: the whole row is the tap target, not just the box. */ .check { display: flex; align-items: flex-start; gap: 0.65rem; min-height: var(--tap); padding: 0.4rem 0; cursor: pointer; } .check input[type="checkbox"] { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: 0.35rem; accent-color: var(--accent); } .check.done > .check-label { color: var(--muted); text-decoration: line-through; } /* ---------- cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.9rem 1rem; margin-bottom: 0.75rem; } .card > :last-child { margin-bottom: 0; } .card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .muted { color: var(--muted); } .small { font-size: 0.875rem; } /* Chinese characters need a slightly larger size to stay legible when shown * to a driver or a ticket clerk. */ .zh { font-size: 1.15em; line-height: 1.4; } .badge { display: inline-block; padding: 0.1rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; white-space: nowrap; } .badge.ok { color: var(--ok); border-color: var(--ok); } .badge.warn { color: var(--warn); border-color: var(--warn); } .badge.danger { color: var(--danger); border-color: var(--danger); } .note { border-left: 3px solid var(--accent); padding-left: 0.75rem; color: var(--muted); } .toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; } ul.plain { list-style: none; margin: 0; padding: 0; } /* ---------- schedule ---------- */ /* The city filter, above the day list. Deliberately not sticky: the header is * already sticky and its height changes (the countdown line appears in it), so * a second sticky bar underneath it would need a hard-coded offset that is * wrong the moment the header grows -- and on a phone this row wraps to several * lines, which would eat most of the screen on every scroll. */ .city-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; } /* A dozen secondary controls next to the day cards, so they read smaller than a * normal button -- but they are still buttons you hit with a thumb while * walking, so they get the full --tap height rather than the 36px that looked * right on a desktop and measured too small on the phone. */ .filter-chip { min-height: var(--tap); padding: 0 0.85rem; border-radius: 999px; font-size: 0.875rem; white-space: nowrap; } .filter-chip.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .day { padding: 0; } .day-summary { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; min-height: var(--tap); padding: 0.75rem 1rem; cursor: pointer; list-style: none; } /* Safari draws its own disclosure triangle through a pseudo element; the * arrow below replaces it so both engines look the same. */ .day-summary::-webkit-details-marker { display: none; } /* Absolutely placed rather than flowed: .day-title wraps to a full-width line, * which would otherwise push a margin-left:auto arrow down to the bottom of the * card, far away from the summary line it belongs to. */ .day-summary::after { content: "\25be"; position: absolute; top: 0.75rem; right: 1rem; color: var(--muted); transition: transform 0.15s ease; } .day[open] > .day-summary::after { transform: rotate(180deg); } .day-date { flex: 0 0 auto; min-width: 4.5rem; font-weight: 600; } .day-city { color: var(--accent); font-size: 0.9rem; } /* Sits before .day-title, which wraps to its own line, so the count always * ends up on the first line next to the date. */ .day-count { flex: 0 0 auto; margin-left: auto; /* Clears the disclosure arrow that .day-summary::after puts in this corner. */ margin-right: 1.25rem; padding: 0.05rem 0.45rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; } .day-count-full { border-color: var(--ok); color: var(--ok); } .day-title { flex: 1 1 100%; color: var(--muted); font-size: 0.9rem; } .day-body { padding: 0 1rem 1rem; border-top: 1px solid var(--border); } .day-intro { margin: 0.75rem 0 0.5rem; } /* ---------- schedule items ---------- */ .items { display: flex; flex-direction: column; } .item { display: flex; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--border); } .item:first-child { border-top: 0; } .item-time { flex: 0 0 3.25rem; color: var(--muted); font-variant-numeric: tabular-nums; /* Leaves room for the coloured kind marker without an extra element. */ border-left: 3px solid var(--border); padding-left: 0.5rem; } .item-body { flex: 1 1 auto; min-width: 0; } /* The title is a