/** * Design tokens + base styles. * * Colors are defined once as custom properties. The dark palette is applied * either by the OS preference or by an explicit `data-theme` on , * which the inline script in layout.tsx sets before first paint. */ :root { /* Brand */ --primary: #1a4d25; --primary-hover: #143c1d; --on-primary: #ffffff; --primary-soft: #e7f0e9; /* Surfaces */ --bg: #f3f5f7; --surface: #ffffff; --surface-2: #eceff2; --border: #dde2e7; --border-strong: #c3ccd4; /* Text */ --text: #15191e; --text-muted: #5b6570; /* Status */ --status-ok: #1f7a37; --status-late: #c62828; --status-early: #0277bd; --status-warn: #a75a06; --status-idle: #6b7280; /* Elevation */ --shadow-1: 0 1px 2px rgb(0 0 0 / 0.05), 0 1px 3px rgb(0 0 0 / 0.07); --shadow-2: 0 2px 4px rgb(0 0 0 / 0.05), 0 6px 16px rgb(0 0 0 / 0.08); --shadow-3: 0 4px 10px rgb(0 0 0 / 0.1), 0 12px 32px rgb(0 0 0 / 0.14); /* Shape */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --primary: #48c162; --primary-hover: #63d17b; --on-primary: #0b1a0f; --primary-soft: #1b2c20; --bg: #0f1216; --surface: #191d23; --surface-2: #232931; --border: #2c333c; --border-strong: #3d454f; --text: #e9edf1; --text-muted: #9aa4af; --status-ok: #58c878; --status-late: #ef5f5f; --status-early: #57c4f5; --status-warn: #eaa649; --status-idle: #8b949e; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 6px 16px rgb(0 0 0 / 0.45); --shadow-3: 0 4px 10px rgb(0 0 0 / 0.45), 0 12px 32px rgb(0 0 0 / 0.6); color-scheme: dark; } } /* Explicit user choice wins over the OS preference in both directions. */ :root[data-theme="light"] { --primary: #1a4d25; --primary-hover: #143c1d; --on-primary: #ffffff; --primary-soft: #e7f0e9; --bg: #f3f5f7; --surface: #ffffff; --surface-2: #eceff2; --border: #dde2e7; --border-strong: #c3ccd4; --text: #15191e; --text-muted: #5b6570; --status-ok: #1f7a37; --status-late: #c62828; --status-early: #0277bd; --status-warn: #a75a06; --status-idle: #6b7280; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.05), 0 1px 3px rgb(0 0 0 / 0.07); --shadow-2: 0 2px 4px rgb(0 0 0 / 0.05), 0 6px 16px rgb(0 0 0 / 0.08); --shadow-3: 0 4px 10px rgb(0 0 0 / 0.1), 0 12px 32px rgb(0 0 0 / 0.14); color-scheme: light; } :root[data-theme="dark"] { --primary: #48c162; --primary-hover: #63d17b; --on-primary: #0b1a0f; --primary-soft: #1b2c20; --bg: #0f1216; --surface: #191d23; --surface-2: #232931; --border: #2c333c; --border-strong: #3d454f; --text: #e9edf1; --text-muted: #9aa4af; --status-ok: #58c878; --status-late: #ef5f5f; --status-early: #57c4f5; --status-warn: #eaa649; --status-idle: #8b949e; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 6px 16px rgb(0 0 0 / 0.45); --shadow-3: 0 4px 10px rgb(0 0 0 / 0.45), 0 12px 32px rgb(0 0 0 / 0.6); color-scheme: dark; } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { max-width: 100vw; overflow-x: hidden; } body { background-color: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } svg { display: block; fill: currentColor; } /* A single consistent focus treatment for every interactive element. */ :where(a, button, input, summary, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); } /* Typography */ h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.125rem; } h5, h6 { font-size: 1rem; } /* Layout primitives */ .container { width: 100%; margin-inline: auto; padding: 2rem 1rem; } .container-sm { max-width: 640px; } .container-md { max-width: 900px; } .surface { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .muted { color: var(--text-muted); } .link { color: var(--primary); text-decoration: none; } .link:hover { text-decoration: underline; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border: 1px solid transparent; border-radius: var(--r-pill); background: none; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn-primary { background-color: var(--primary); color: var(--on-primary); } .btn-primary:hover { background-color: var(--primary-hover); } .btn-outline { border-color: var(--border-strong); color: var(--text); } .btn-outline:hover { background-color: var(--surface-2); border-color: var(--text-muted); } .btn-text { color: var(--primary); padding-inline: 0.75rem; } .btn-text:hover { background-color: var(--surface-2); } /* A square, borderless button that holds a single icon. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: none; border: none; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .icon-btn:hover { background-color: var(--surface-2); color: var(--text); } /* * Route pill * * Route colours come from the feed, so the three colours are set inline by * whatever renders the pill — see public/js/colors.js for the rules. */ .pill { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; padding: 0.25rem 0.75rem; border: 1px solid transparent; border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.01em; white-space: nowrap; } /* * Nav menu * * Rendered from `site/_includes/nav.njk` on every page, with its behaviour in * `public/js/nav.js`. */ .nav { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: 0.625rem; /* * Only the buttons themselves catch a finger; the column around them does * not exist as far as touches are concerned. * * The collapsed actions are `visibility: hidden`, which hides them but keeps * their boxes, so this container stands roughly 142x250px tall in the corner * whether the menu is open or shut. Over a page that scrolls, an invisible * box costs nothing. Over the map it swallowed every pan and pinch that * started in the bottom-right quadrant, while the same gesture a few * centimetres up and left worked perfectly — the map never saw the touch. * * MapLibre does exactly this with its own control corners, for the same * reason. */ pointer-events: none; } .nav-action, .nav-fab { pointer-events: auto; } .nav-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; } .nav-action { display: flex; align-items: center; gap: 0.625rem; padding: 0; border: none; background: none; cursor: pointer; opacity: 0; transform: translateY(0.5rem) scale(0.9); visibility: hidden; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; } .nav[data-open="true"] .nav-action { opacity: 1; transform: none; visibility: visible; } /* Fan the actions out from the button rather than all at once. */ .nav[data-open="true"] .nav-action:nth-child(1) { transition-delay: 0.06s; } .nav[data-open="true"] .nav-action:nth-child(2) { transition-delay: 0.04s; } .nav[data-open="true"] .nav-action:nth-child(3) { transition-delay: 0.02s; } .nav-action-label { padding: 0.25rem 0.625rem; border-radius: var(--r-sm); background-color: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; color: var(--text); } .nav-action-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); color: var(--text); transition: background-color 0.15s ease, color 0.15s ease; } .nav-action:hover .nav-action-icon { background-color: var(--primary); border-color: var(--primary); color: var(--on-primary); } .nav-action[aria-current="page"] .nav-action-icon { color: var(--primary); border-color: var(--primary); } .nav-action[aria-current="page"]:hover .nav-action-icon { color: var(--on-primary); } .nav-fab { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border: none; border-radius: 50%; background-color: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-3); cursor: pointer; transition: background-color 0.15s ease; } .nav-fab:hover { background-color: var(--primary-hover); } .nav-fab-icon { display: flex; transition: transform 0.2s ease; } .nav[data-open="true"] .nav-fab-icon { transform: rotate(90deg); } /* * Theme-conditional labels and icons. * * Doing this in CSS instead of JavaScript means the server-rendered markup is * correct for every user, so there is no hydration mismatch and no flash of * the wrong icon. */ .when-light { display: contents; } .when-dark { display: none; } @media (prefers-color-scheme: dark) { .when-light { display: none; } .when-dark { display: contents; } } /* An explicit choice overrides the OS preference, in both directions. */ :root[data-theme="light"] .when-light { display: contents; } :root[data-theme="light"] .when-dark { display: none; } :root[data-theme="dark"] .when-light { display: none; } :root[data-theme="dark"] .when-dark { display: contents; } /* * Footer * * On every page but the map, from _includes/footer.njk. */ .footer { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; /* Room for the floating menu button so it never covers the logo */ padding: 3rem 1rem 5rem; text-align: center; color: var(--text-muted); font-size: 0.75rem; line-height: 1.6; } .footer-credit { max-width: 32rem; } .footer-social { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--primary); } .footer-social:hover { text-decoration: underline; } .footer-logo { width: 32px; height: auto; margin-top: 0.25rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }