/* ───────────────────────────────────────────────────────────────────────────── /tog — the section shell. One palette, one file, every page in the section links it. The values are lifted verbatim from tog/selfie/index.html, which was the only page already wearing them; the lime-on-green --tg-* palette the other three /tog pages carry is on its way out (ADR 0022) and its last copy dies with the last green page. This file owns three things and deliberately nothing else: 1. the tokens, the base type and the focus ring, 2. the shell every page repeats — skip link, sticky status strip, the wrapping content/rail row, footer, 3. the primitives the section's pages are built out of (card, pill, eyebrow, figure, the two auto-fill grids) and the loading/empty/stale states. Page-specific rules stay with their page. Everything here is `tog-` prefixed for that reason: the pages carry their own .card/.meta/.date and must not collide with the shell. Contrast: the gate for this section is WCAG AA, AAA where it comes free — /tog/selfie's posture, not the AAA the green pages held. Every pair is declared in test/contrast.test.js; the narrative is docs/tilgjenge.md. ───────────────────────────────────────────────────────────────────────────── */ :root { --bg: #0f1622; /* page */ --bg-2: #131d2c; /* secondary surface, inner panels, map background */ --panel: #182437; /* cards */ --ink: #eef4ff; /* body text */ --muted: #9db0c9; /* secondary text */ --line: #2b3a52; /* borders, hairlines, the timeline spine */ --lamp: #ffce6b; /* warm carriage lamp */ --rail: #6fb7ff; /* cool rail steel */ --well: #0c131e; /* behind an image before it loads */ /* The warm/cool split is SEMANTIC, not decorative. --lamp is what Markus wrote or photographed, and every figure; --rail is what the machine derived — the trip inferred from a timestamp, the realtime badge, dates, the "sanntid frå Entur" marker. Do not decorate with them. */ --scrim: linear-gradient(180deg, rgba(8, 12, 20, 0) 0%, rgba(8, 12, 20, 0.78) 48%, rgba(8, 12, 20, 0.96) 100%); --hero-scrim: linear-gradient(180deg, rgba(15, 22, 34, 0.15) 0%, rgba(15, 22, 34, 0.7) 58%, #0f1622 100%); --shadow: rgba(0, 0, 0, 0.45); --shadow-card: 0 14px 30px -22px rgba(0, 0, 0, 0.9); --shadow-live: 0 18px 40px -24px rgba(0, 0, 0, 0.95); --page: min(1100px, 100%); --gutter: 16px; --font-disp: Fraunces, Georgia, serif; --font-ui: Inter, system-ui, sans-serif; --font-lab: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif; } /* The gallery pages run a wider column than the rest of the section — the wall wants the extra photos per row, the reading pages do not. */ body.tog-vid { --page: min(1180px, 100%); } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { color: var(--ink); background: radial-gradient(120% 60% at 50% -10%, rgba(111, 183, 255, 0.10) 0%, rgba(111, 183, 255, 0) 55%), linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); background-attachment: fixed; font: 15px/1.55 var(--font-ui); font-variant-numeric: tabular-nums; } a { color: var(--lamp); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--rail); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip-to-content (WCAG 2.4.1). First element in on every page in the section; test/a11y.test.js asserts that and that its target exists. */ .skip-link { position: fixed; top: -100%; left: 0.75rem; z-index: 1000; padding: 0.65rem 1.1rem; border-radius: 0.5rem; background: var(--panel); color: var(--ink); border: 2px solid var(--lamp); font: 600 1rem var(--font-ui); text-decoration: none; } .skip-link:focus { top: 0.75rem; } /* ── The sticky status strip ───────────────────────────────────────────────── Every page in the section carries it, at every screen size: where the train is, or when the next one leaves. Filled by togStatuslinje() in tog/felles.js from the same payloads the pages read, so it cannot disagree with them. Fixed rather than merely sticky would take the hero photo's top 40px with it; sticky at top:0 keeps the strip out of the way until the page scrolls under it. The rail's `top: 64px` below is measured against this. */ .tog-strip { position: sticky; top: 0; z-index: 30; background: rgba(15, 22, 34, 0.93); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .tog-strip-in { width: var(--page); margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 9px var(--gutter); } .tog-strip-back { flex: none; font-size: 1.05rem; color: var(--rail); text-decoration: none; line-height: 1; } /* The three data-driven parts sit in one flex row of their own so felles.js can replace all of them at once without disturbing the back link. */ .tog-strip-state { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; } .tog-pill { flex: none; font: 700 0.62rem/1 var(--font-lab); letter-spacing: 0.16em; text-transform: uppercase; border-radius: 999px; padding: 4px 8px; border: 1px solid var(--line); color: var(--muted); } /* On board is warm, because he is on it; everything else is a machine's guess at a timetable, and cool. */ .tog-pill--ombord { color: var(--lamp); border-color: rgba(255, 206, 107, 0.5); } .tog-pill--neste { color: var(--rail); border-color: rgba(111, 183, 255, 0.45); } .tog-strip-rute { min-width: 0; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tog-strip-tid { margin-left: auto; flex: none; font: 600 0.82rem var(--font-lab); color: var(--muted); } /* ── Layout ────────────────────────────────────────────────────────────────── Mobile-first and without a single media query: the content column and the side rail are one wrapping flex row, so the rail drops under the content when there is no room for both. That degrades better than a breakpoint — it wraps at the width the CONTENT runs out at, not at a number someone guessed. The rail is page-specific content (the call list, the filters, the records), never a second navigation. */ .tog-wrap { width: var(--page); margin: 0 auto; padding: 0 var(--gutter); } .tog-cols { width: var(--page); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; padding: 18px var(--gutter) 0; } .tog-main { flex: 1 1 420px; min-width: 0; } .tog-rail { flex: 1 1 260px; max-width: 340px; min-width: 0; position: sticky; top: 64px; align-self: flex-start; display: grid; gap: 14px; } /* The live page's rail is the whole stop-for-stop list, and wants the width. */ .tog-rail--brei { flex-basis: 280px; max-width: 360px; } /* ── Primitives ──────────────────────────────────────────────────────────── */ .tog-kort { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-card); } /* The live card floats over the map that runs behind it. */ .tog-kort--live { border-radius: 18px; padding: 17px; box-shadow: var(--shadow-live); } /* A panel that holds a list to its edges: the header hairline and the rows want the corners, so the padding lives on the children. */ .tog-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .tog-panel-hovud { display: flex; align-items: baseline; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); } /* Eyebrow / label / small-caps heading. Barlow Condensed is loaded by every page in the section — it was declared but never actually fetched on the green pages, which is a bug this port does not inherit. */ .tog-auga { margin: 0; font: 700 0.7rem var(--font-lab); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .tog-auga--lamp { color: var(--lamp); letter-spacing: 0.2em; font-size: 0.66rem; } .tog-auga--rail { color: var(--rail); } /* The dot the two live badges lead with. */ .tog-auga .prikk { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 0.1em; } /* Every figure is warm, everywhere in the section. */ .tog-tal { font-family: var(--font-disp); font-weight: 700; line-height: 1; color: var(--lamp); } .tog-tal--stor { font-size: clamp(2rem, 4.5vw, 2.6rem); } h1.tog-h1 { margin: 0; font-family: var(--font-disp); font-weight: 700; font-size: clamp(2.1rem, 6vw, 3.2rem); line-height: 1.02; letter-spacing: -0.015em; text-wrap: pretty; } .tog-h2 { margin: 0; font-family: var(--font-disp); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1.08; letter-spacing: -0.015em; } .tog-lede { color: var(--muted); margin: 0; max-width: 52ch; } /* Cards that are links: the nav row on the hub, a journey, a country. */ .tog-rutenett { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Photos: auto-fill, never auto-fit — a wall of two selfies should stay two tiles wide rather than stretching each across half the screen. */ .tog-rutenett--foto { gap: 3px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* Controls. 44px is the floor for anything you press — this section is used on a train, one-handed. */ .tog-knapp { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: transparent; color: var(--muted); border: 1px solid var(--line); font: 600 0.86rem var(--font-ui); } .tog-knapp:hover { color: var(--ink); border-color: var(--rail); } /* The display above would otherwise beat the UA stylesheet's [hidden] rule. */ .tog-knapp[hidden] { display: none; } .tog-knapp--fyll { background: var(--lamp); color: var(--bg); border-color: var(--lamp); font-weight: 700; } .tog-knapp--fyll:hover { background: #ffdb94; color: var(--bg); } /* Tabs. role="tablist" in the markup; this is only the paint. */ .tog-faner { display: inline-flex; gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; } .tog-faner button { appearance: none; border: 0; cursor: pointer; background: transparent; color: var(--muted); font: 600 0.9rem var(--font-ui); padding: 7px 15px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; gap: 0.45em; transition: background 0.15s ease, color 0.15s ease; } .tog-faner button:hover { color: var(--ink); } .tog-faner button[aria-selected="true"] { background: rgba(111, 183, 255, 0.16); color: var(--ink); } /* The display above would otherwise beat the UA stylesheet's [hidden] rule. */ .tog-faner button[hidden] { display: none; } /* ── Provenance markers ────────────────────────────────────────────────────── Two rules the whole site keeps, and this section states in CSS: ADR 0010 — anything COMPUTED rather than measured says so, in --rail, with a left rule. Never disguised as a measurement. ADR 0015 — anything UNCERTAIN stays uncertain: the hatch is the visual form of "this is a bound, not a figure", and it is why a predicted progress bar is hatched rather than solid. */ .tog-rekna { border-left: 3px solid var(--rail); padding: 2px 0 2px 11px; color: var(--muted); font-size: 0.83rem; line-height: 1.55; } .tog-rekna b { color: var(--rail); font-weight: 600; } /* Stale: an inline note on the affected card ONLY, never a page-wide banner. The reader is told what fell back to what, where the number they are looking at actually is. */ .tog-gamal { margin: 13px 0 0; border-left: 3px solid var(--lamp); padding: 2px 0 2px 11px; color: var(--muted); font-size: 0.83rem; line-height: 1.55; } .tog-gamal b { color: var(--lamp); font-weight: 600; } /* Progress. Solid --lamp when the railway measured it; hatched when we computed it off the timetable, which cannot know about a delay. */ .tog-framdrift { position: relative; height: 0.75rem; border-radius: 999px; background: var(--bg); overflow: hidden; } .tog-framdrift > span { display: block; height: 100%; border-radius: 999px; background: var(--lamp); transition: width 0.4s ease; } .tog-framdrift--rekna > span { background: repeating-linear-gradient(135deg, var(--lamp) 0 8px, rgba(255, 206, 107, 0.4) 8px 16px); } /* ── Loading / empty ───────────────────────────────────────────────────────── Skeletons shaped like the content they stand in for, not the word "Lastar…". A block that is the size and place of the thing arriving is a promise the page keeps; a centred spinner is a page admitting it has no idea. */ @keyframes tog-sk { 0%, 100% { opacity: 0.5 } 50% { opacity: 0.85 } } .tog-sk { background: var(--panel); border-radius: 8px; animation: tog-sk 1.6s ease-in-out infinite; } .tog-sk--linje { height: 0.9rem; } .tog-sk--tittel { height: 1.9rem; border-radius: 10px; } .tog-sk--kort { height: 120px; border-radius: 14px; } .tog-sk--foto { aspect-ratio: 1; border-radius: 0; } .tog-tomt { border: 1px dashed var(--line); border-radius: 16px; padding: 34px 20px; text-align: center; } .tog-tomt .glyf { margin: 0 0 8px; font-size: 2rem; line-height: 1; } .tog-tomt .tittel { margin: 0 0 6px; font-family: var(--font-disp); font-weight: 600; font-size: 1.15rem; } .tog-tomt p.tekst { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.6; } .tog-tomt .tog-knapp { margin-top: 14px; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .tog-foot { width: var(--page); margin: 0 auto; padding: 26px var(--gutter) 34px; color: var(--muted); font-size: 0.84rem; } .tog-foot p { margin: 0 0 8px; max-width: 70ch; line-height: 1.6; } .tog-foot p:last-child { margin-bottom: 0; } .tog-foot a { color: var(--rail); text-decoration: none; } .tog-foot a:hover { text-decoration: underline; } /* ── Leaflet, in the dark ──────────────────────────────────────────────────── Two pages mount a map (the live route and the selfie wall), so the chrome lives here rather than twice. The vendored copy at /vendor/ is the only Leaflet on the site; only the OSM raster tiles are fetched at runtime. isolation:isolate keeps Leaflet's internal z-indexes (markers 600, popups 700) inside the map's own stacking context — without it those panes out-rank the fixed lightbox overlay and paint on top of the open photo. */ /* The background is stated twice on purpose. Leaflet's own stylesheet carries `.leaflet-container { background: #ddd }` at the same specificity as ours, so whichever loads last wins — and a page that loads them the other way round gets a WHITE rectangle where the tiles have not arrived yet. Every page in this section links /vendor/leaflet.css first for that reason; the compound selector below is the belt to that pair of braces. */ .tog-map { width: 100%; background: var(--bg-2); isolation: isolate; } .tog-map.leaflet-container { background: var(--bg-2); } .leaflet-container { background: var(--bg-2); font-family: var(--font-ui); } /* Tone the light OSM raster toward the night palette. The tile pane only, so photo pins and tooltips keep their true colours. */ .tog-map .leaflet-tile-pane { filter: brightness(0.65) invert(1) contrast(1.05) hue-rotate(200deg) saturate(0.55) brightness(1.05); } .leaflet-bar a, .leaflet-bar a:hover { background: var(--panel); color: var(--ink); border-bottom-color: var(--line); } .leaflet-bar a:hover { background: var(--bg-2); } .leaflet-control-attribution { background: rgba(15, 22, 34, 0.82) !important; color: var(--muted); } .leaflet-control-attribution a { color: var(--rail); } /* ── Reduced motion ───────────────────────────────────────────────────────── The skeleton pulse, the progress transition and smooth scrolling are all motion someone did not ask for. */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .tog-sk { animation: none; } .tog-framdrift > span { transition: none; } .tog-faner button { transition: none; } }