/* Rucksack Roamer — the whole design system. * * Read design-brief.md before changing anything here. The five decisions are * pinned: condensed display + typewriter mono, kraft-and-ink palette, ZERO * radius, editorial density with deliberate rhythm variation, and passport * stamps as the recurring motif. * * tests/design.test.js enforces the mechanical subset (banned palette, banned * fonts, radius, stamp count, dark-mode counterparts). It cannot enforce taste. */ /* ---- tokens -------------------------------------------------------------- */ /* Kraft is the default for everyone, on every device. It is the brand — it is * what the artwork, the share card and the icons are drawn against — and it is * not something a device-wide OS preference gets to decide on this site's * behalf. Dark is a real option, reached through the footer toggle. * * ONE mechanism decides the palette: `data-theme` on , always present, * always a concrete "light" or "dark". theme.js resolves the stored preference * (which may be "auto") before it writes the attribute. No colour token is set * by a bare `prefers-color-scheme` block anywhere in this file, and * tests/design.test.js fails the build if one comes back — two mechanisms that * can disagree is precisely how the site shipped near-black to every dark-mode * visitor with the manual override sitting inert beside it. */ :root { color-scheme: light; --kraft: #c9b28c; --kraft-light: #e0d0b4; --paper: #f2e9d8; --ink: #241f1a; --ink-soft: #4a4038; /* 4.7:1 on kraft. #5c5045 measured 3.81:1 and failed AA at 12px. */ --rule: #8a7a63; --stamp-red: #a33b2c; --stamp-blue: #2f4b6e; --stamp-green: #4a6146; --display: Haettenschweiler, "Arial Narrow", "Franklin Gothic Bold", Impact, sans-serif; --mono: "Courier New", Courier, "Nimbus Mono PS", monospace; /* Deliberately not a uniform scale — the brief bans metronomic spacing. */ --gap-hair: 2px; --gap-tight: 6px; --gap: 14px; --gap-wide: 34px; --gap-section: 56px; } /* Dark scheme. Every text/surface token above has a counterpart here — that is * the guard: on the previous project a more-specific selector defeated one * dark-mode override and made text invisible ONLY in dark mode, while every * light render and every string assertion passed. */ :root[data-theme="dark"] { color-scheme: dark; --kraft: #241f1a; --kraft-light: #322b24; --paper: #2b251f; --ink: #ede0c8; --ink-soft: #b3a48c; --rule: #6b5d4a; --stamp-red: #d4705f; --stamp-blue: #7d9dc4; --stamp-green: #8aa583; } :root[data-theme="light"] { color-scheme: light; --kraft: #c9b28c; --kraft-light: #e0d0b4; --paper: #f2e9d8; --ink: #241f1a; --ink-soft: #4a4038; --rule: #8a7a63; --stamp-red: #a33b2c; --stamp-blue: #2f4b6e; --stamp-green: #4a6146; } /* ---- ground -------------------------------------------------------------- */ * { box-sizing: border-box; border-radius: 0; } body { margin: 0; background-color: var(--kraft); /* paper grain, drawn not downloaded */ background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.022) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.016) 0 1px, transparent 1px 4px); color: var(--ink); font-family: var(--mono); font-size: 15px; line-height: 1.55; -webkit-text-size-adjust: 100%; } h1, h2, h3, .display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.92; margin: 0; } h1 { font-size: clamp(2.6rem, 9vw, 4.4rem); } h2 { font-size: clamp(2.05rem, 5.5vw, 2.6rem); text-wrap: balance; } h3 { font-size: 1.45rem; letter-spacing: 0.04em; } /* Brief §4 pins ASYMMETRIC rhythm: a lot above a section head, a little below. * The first version set `margin: 0` and never restored it, so every heading in * the app sat 0px from the thing under it — "CONVERTER" and "AMOUNT" read as * one line. No rhythm is not the same as deliberate rhythm. */ h2 { margin: var(--gap-section) 0 var(--gap-tight); } h3 { margin: var(--gap-wide) 0 var(--gap-hair); } section > h2:first-of-type, .stub__body > h3:first-child, .rail .stub__body > h3 { margin-top: 0; } a { color: var(--stamp-blue); text-underline-offset: 3px; } a:hover { color: var(--stamp-red); } .meta { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); margin: var(--gap-hair) 0 0; } /* `.meta` is uppercase + letterspaced — right for a label, wrong for a sentence. * The honesty copy (price basis, the Schengen caveat, rate staleness) is prose, * and setting prose in caps at 3.8:1 made the text we most need people to read * the least readable thing in the app. */ .basis { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); margin: var(--gap-tight) 0 0; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 90px; } /* ---- masthead: a ticket, torn along the bottom --------------------------- */ .masthead { background: var(--paper); border: 3px solid var(--ink); border-bottom: none; margin-top: 26px; padding: 22px 24px 20px; position: relative; /* asymmetric on purpose — the brief bans all-centred symmetric layout */ display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--gap); } .masthead__perf { height: 14px; background: var(--paper); border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); -webkit-mask-image: radial-gradient(circle at 7px 14px, transparent 7px, #000 7.5px); mask-image: radial-gradient(circle at 7px 14px, transparent 7px, #000 7.5px); -webkit-mask-size: 14px 14px; mask-size: 14px 14px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; } .masthead h1 { letter-spacing: -0.01em; } .masthead__tag { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stamp-red); border-top: 1px solid var(--rule); padding-top: 6px; margin-top: 8px; } .masthead__ref { text-align: right; } /* ---- the rail print (the one illustrated surface) ------------------------ */ /* * `mix-blend-mode: multiply` is doing the real work: the generated print sits on * its own pale paper, and multiplying it against the kraft ground drops that * paper out so only the ink remains. Without it the print reads as a photo * pasted onto the page rather than something printed on the same stock. * * The `scale()` inside an `overflow:hidden` box crops the source's soft rounded * border to a hard edge — the brief pins radius to sharp, and the generator * does not. */ .masthead { grid-template-columns: 1fr 320px; align-items: stretch; } .masthead__art { overflow: hidden; align-self: stretch; min-height: 176px; } .masthead__art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 45%; transform: scale(1.14); mix-blend-mode: multiply; filter: saturate(0.72) contrast(1.04); } :root[data-theme="dark"] .masthead__art img { mix-blend-mode: luminosity; opacity: 0.5; filter: saturate(0) contrast(1.1); } @media (max-width: 820px) { /* Fixed height, not stretch: in a grid row the print grows to ~330px and * swallows the wordmark. No negative margins — they created a horizontal * scroll region on touch. */ .masthead__art { min-height: 0; height: 88px; align-self: start; margin-top: var(--gap); } .masthead__art img { transform: scale(1.1); object-position: 50% 52%; } } /* The empty-state mark. Clipped to the drawing's own circular vignette so it * lands as an ink impression on the kraft, not a picture in a box. */ .empty--art { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--gap-wide); align-items: center; } .empty--art img { width: 132px; height: 132px; display: block; clip-path: circle(45% at 50% 49%); transform: scale(1.16); mix-blend-mode: multiply; filter: saturate(0.55) contrast(1.08); } :root[data-theme="dark"] .empty--art img { mix-blend-mode: screen; opacity: 0.42; filter: invert(1) saturate(0.25); } @media (max-width: 560px) { .empty--art { grid-template-columns: minmax(0, 1fr); gap: var(--gap); justify-items: center; text-align: center; } } /* ---- navigation: luggage tags -------------------------------------------- */ .nav { display: flex; flex-wrap: wrap; gap: 0; margin: 20px 0 var(--gap-wide); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); } .nav button { appearance: none; background: transparent; border: none; border-right: 1px solid var(--rule); color: var(--ink-soft); cursor: pointer; font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.06em; padding: 11px 18px 9px; text-transform: uppercase; } .nav button:hover { color: var(--ink); background: var(--kraft-light); } .nav button[aria-current="page"] { background: var(--ink); color: var(--paper); } /* ---- passport stamp: the signature element (use 1 of 4) ------------------ */ .stamp { display: inline-grid; place-items: center; width: 82px; height: 82px; border: 3px double var(--stamp-red); border-radius: 50%; /* the only curve in the product, and it is deliberate */ color: var(--stamp-red); font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; transform: rotate(-8deg); opacity: 0.9; padding: 6px; line-height: 1.15; } .stamp--blue { border-color: var(--stamp-blue); color: var(--stamp-blue); transform: rotate(6deg); } .stamp--green { border-color: var(--stamp-green); color: var(--stamp-green); transform: rotate(-4deg); } .stamp--pending { border-style: dashed; border-width: 2px; color: var(--ink-soft); border-color: var(--rule); opacity: 0.55; } .stamp--sm { width: 54px; height: 54px; font-size: 0.5rem; border-width: 2px; } /* progress markers (use 2 of 4) */ .progress { display: flex; align-items: center; gap: var(--gap-tight); margin: 0 0 var(--gap-wide); flex-wrap: wrap; } .progress__link { flex: 1 0 12px; height: 1px; background: var(--rule); min-width: 12px; } /* section dividers (use 3 of 4) */ .divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gap); margin: var(--gap-section) 0 var(--gap-wide); } .divider::before, .divider::after { content: ""; height: 3px; background: var(--ink); } .divider .stamp { transform: rotate(-11deg); } /* completion states, slapped on at an angle (use 4 of 4) */ .stamp--slap { position: absolute; top: -14px; right: 12px; background: color-mix(in srgb, var(--paper) 82%, transparent); transform: rotate(-14deg); z-index: 2; } /* ---- ticket stub cards --------------------------------------------------- */ .stub { background: var(--paper); border: 2px solid var(--ink); display: grid; grid-template-columns: 118px 1fr; margin-bottom: var(--gap); position: relative; } .stub__side { border-right: 2px dashed var(--rule); padding: 14px 12px; background: var(--kraft-light); } .stub__body { padding: 16px 18px 18px; min-width: 0; } .stub--plain { grid-template-columns: 1fr; } .stub__num { font-family: var(--display); font-size: 2.1rem; line-height: 0.85; color: var(--stamp-red); } /* ---- editorial layout: content column plus a margin rail ----------------- */ .editorial { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--gap-wide); align-items: start; } .rail > * + * { margin-top: var(--gap-wide); } .rail { position: sticky; top: var(--gap); } @media (max-width: 820px) { .rail { position: static; } } /* In the margin rail a stub is too narrow for a side column — the stub tears * along the top instead, so the perforation survives and the text doesn't end * up one word per line. */ .rail .stub { grid-template-columns: minmax(0, 1fr); } .rail .stub__side { border-right: none; border-bottom: 2px dashed var(--rule); padding: 8px 12px 6px; } .stub__side { min-width: 0; } @media (max-width: 820px) { .editorial { grid-template-columns: minmax(0, 1fr); } /* The stub tears along the TOP on narrow screens. With a fixed 84px side * column, the 2.8rem total painted straight across the perforation and on top * of the cost table — the app's most important number, unreadable on a phone. */ .stub { grid-template-columns: minmax(0, 1fr); } .stub__side { border-right: none; border-bottom: 2px dashed var(--rule); padding: 10px 14px 8px; display: flex; align-items: baseline; gap: var(--gap); flex-wrap: wrap; } .stub__num { font-size: 1.6rem; } .leg { grid-template-columns: minmax(0, 1fr) auto; } .leg__mode { grid-column: 1 / -1; } .masthead { grid-template-columns: minmax(0, 1fr); } .masthead__ref { text-align: left; } } /* ---- forms --------------------------------------------------------------- */ .field { margin-bottom: var(--gap-wide); } .field > label, .field > p.label, .field > span.label { display: block; font-family: var(--display); font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--gap-hair); } .field .hint { font-size: 0.8125rem; color: var(--ink-soft); margin: 0 0 var(--gap-tight); } /* A keeps its disclosure marker — the earlier `.field > .label` rule * matched it and killed display:list-item, so "Optional — pace and comfort" had * no triangle and nobody would ever have found it. */ summary.label { font-family: var(--display); font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; margin-bottom: var(--gap-hair); } summary.label:hover { color: var(--stamp-red); } input[type="text"], input[type="number"], input[type="date"], select { font-family: var(--mono); font-size: 1rem; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); padding: 9px 11px; width: 100%; max-width: 420px; } input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--stamp-blue); outline-offset: 2px; } .row { display: flex; flex-wrap: wrap; gap: var(--gap); } .row > * { flex: 1 1 190px; } /* Buttons size to their content. Five equal flex children stretched "Log it" * to 371px, which reads as a rendering bug because it is one. */ .row > .btn, .row > button { flex: 0 0 auto; } /* interest chips — flat, sharp, ink-stamped when on */ .chips { display: flex; flex-wrap: wrap; gap: var(--gap-tight); } .chip { appearance: none; background: var(--paper); border: 2px solid var(--ink); color: var(--ink); cursor: pointer; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.09em; padding: 7px 13px; text-transform: uppercase; } .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); } /* Destination picker. Three states, and they must be distinguishable without * colour alone — the ✓/✕ prefix carries the meaning for anyone who cannot tell * the two inks apart. */ .picker { display: flex; flex-wrap: wrap; gap: var(--gap-tight); max-height: 260px; overflow-y: auto; padding: var(--gap-tight); border: 1px solid var(--rule); background: var(--paper); } /* Pinned uses the same ink fill as every other "on" chip in the app, on * purpose — a second selected-state colour would be a new thing to learn for no * gain. The ✓ prefix is what distinguishes it, and that survives greyscale. * (An earlier version set this green and it never applied: `.chip[aria-pressed]` * outranks a single class. A rule that cannot win is a lie in the stylesheet.) */ .chip--pinned { border-color: var(--ink); } .chip--excluded { border-style: dashed; color: var(--ink-soft); opacity: 0.6; text-decoration: line-through; } .chip--open:hover { background: var(--kraft-light); } input[type="range"] { width: 100%; max-width: 420px; appearance: none; -webkit-appearance: none; background: transparent; } input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--rule); } input[type="range"]::-moz-range-track { height: 4px; background: var(--rule); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; background: var(--stamp-red); border: 2px solid var(--ink); cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--stamp-red); border: 2px solid var(--ink); cursor: pointer; } /* Left unstyled, the file picker renders as a stock grey rounded pill in a * system font — banned on all three counts, and the loudest thing on the dark * Saved screen. */ input[type="file"] { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); } input[type="file"]::file-selector-button { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 7px 13px; margin-right: 12px; cursor: pointer; } input[type="file"]::file-selector-button:hover { background: var(--ink); color: var(--paper); } .dial-ends { display: flex; justify-content: space-between; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); max-width: 420px; } /* one primary action, never a two-button hero cluster */ .go { appearance: none; background: var(--stamp-red); border: 3px solid var(--ink); color: var(--paper); cursor: pointer; font-family: var(--display); font-size: 1.7rem; letter-spacing: 0.05em; padding: 13px 34px 11px; text-transform: uppercase; } .go:hover { background: var(--ink); } .go[disabled] { background: var(--rule); cursor: not-allowed; } .btn { appearance: none; background: transparent; border: 2px solid var(--ink); color: var(--ink); cursor: pointer; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; padding: 7px 13px; text-transform: uppercase; } .btn:hover { background: var(--ink); color: var(--paper); } /* ---- notices ------------------------------------------------------------- */ .notice { border: 1px solid var(--rule); border-left: 6px solid var(--stamp-blue); background: var(--paper); padding: 11px 14px; margin: var(--gap) 0; font-size: 0.87rem; } .notice--warn { border-left-color: var(--stamp-red); } .notice--good { border-left-color: var(--stamp-green); } .notice strong { letter-spacing: 0.04em; } /* The update bar. Green, not red: a new version being available is good news, * and the red stamp is reserved for things that are actually wrong. It sits * above the view rather than floating over it — nothing in this design covers * content the reader is in the middle of. */ .notice--update { border-left-color: var(--stamp-green); display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; justify-content: space-between; } .go--inline { font-size: 1.05rem; padding: 7px 18px 6px; border-width: 2px; } /* confidence is never decoration — it is the honesty rule made visible */ .confidence { display: inline-block; font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; border: 1px solid currentColor; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; } .confidence--low { color: var(--stamp-red); } .confidence--medium { color: var(--stamp-blue); } .confidence--none { color: var(--ink-soft); } .empty { border: 2px dashed var(--rule); color: var(--ink-soft); padding: 18px; font-size: 0.88rem; } /* Capability rows on the Saved screen. Was a two-column table in a 250px rail: * label and reason ran together into one sentence, and the yes/no floated in the * middle of a six-line cell. */ .capability { border-top: 1px solid var(--rule); padding: var(--gap-tight) 0; } .capability:first-of-type { border-top: none; } .capability__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-tight); margin: 0; } /* ---- data displays ------------------------------------------------------- */ .figure { font-family: var(--display); font-size: 2.8rem; line-height: 0.9; letter-spacing: -0.005em; } .figure--sm { font-size: 1.8rem; } .figure--red { color: var(--stamp-red); } .figure--green { color: var(--stamp-green); } table { border-collapse: collapse; width: 100%; font-size: 0.88rem; } th, td { text-align: left; padding: 7px 10px 6px; border-bottom: 1px solid var(--rule); } th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--ink); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .legs { list-style: none; margin: 0; padding: 0; } .leg { border-bottom: 1px solid var(--rule); padding: 12px 0 11px; display: grid; grid-template-columns: 74px 1fr auto; gap: var(--gap); align-items: baseline; } .leg__mode { font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.07em; color: var(--stamp-blue); } .day { border-top: 1px solid var(--rule); padding: var(--gap) 0; } .day__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap); } .day ol { margin: var(--gap-tight) 0 0; padding-left: 20px; } .day li { margin-bottom: var(--gap-tight); } .day li .note { color: var(--ink-soft); font-size: 0.83rem; display: block; } .checklist { list-style: none; margin: 0; padding: 0; } .checklist li { border-bottom: 1px dotted var(--rule); padding: 7px 0; display: flex; gap: 10px; align-items: flex-start; } .checklist input[type="checkbox"] { width: 18px; height: 18px; flex: none; appearance: none; -webkit-appearance: none; border: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; cursor: pointer; align-self: center; /* baseline floated every box ~4px above its label */ } .checklist input[type="checkbox"]:checked::after { content: "\2715"; color: var(--stamp-green); font-size: 13px; line-height: 1; font-weight: 700; } .checklist .why { display: block; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.45; } .checklist li.is-done label { text-decoration: line-through; color: var(--ink-soft); } .bar { height: 16px; border: 2px solid var(--ink); background: var(--kraft-light); position: relative; } .bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--stamp-green); } .bar__fill--over { background: var(--stamp-red); } /* ---- footer -------------------------------------------------------------- */ .foot { border-top: 3px solid var(--ink); margin-top: var(--gap-section); padding-top: var(--gap); font-size: 0.76rem; color: var(--ink-soft); letter-spacing: 0.05em; } /* The feedback report preview. Monospaced and boxed so it reads as "this is the * literal text", not as prose we have paraphrased for you. */ .report { border: 1px solid var(--rule); border-left: 6px solid var(--stamp-blue); background: var(--paper); color: var(--ink); padding: 11px 14px; margin: var(--gap) 0; font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; white-space: pre-wrap; overflow-x: auto; max-height: 340px; } .report[data-empty="true"] { color: var(--ink-soft); border-left-color: var(--rule); font-style: italic; } .checkline { display: flex; align-items: center; gap: var(--gap-tight); cursor: pointer; } /* Palette switch and app version. Unobtrusive by construction: footer-sized * type, no fill until pressed. The version is here rather than in the masthead * because it is the thing you go looking for when reporting a bug, not the * thing you need while planning a trip. */ .foot__controls { margin-top: var(--gap); } /* The palette switch, in the masthead. Sized to sit under the meta lines * without competing with the wordmark — findable, not shouted. */ .theme-row { display: flex; flex-wrap: wrap; gap: var(--gap-tight) var(--gap); align-items: center; margin-top: var(--gap-tight); } .theme-group { display: flex; gap: var(--gap-hair); } .theme-btn { appearance: none; background: transparent; border: 1px solid var(--rule); color: var(--ink-soft); cursor: pointer; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; padding: 4px 10px; text-transform: uppercase; } .theme-btn:hover { color: var(--ink); border-color: var(--ink); } .theme-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .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; } /* The grain and the perforation are two of the three things carrying the analog * vibe, and both were hardcoded black-on-light. In dark mode the grain was a * no-op and the tear was a 1.2:1 edge — i.e. absent. The dark-counterpart test * guards colour TOKENS, and neither of these is a token, so both slipped it. */ :root[data-theme="dark"] body { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 4px); } .masthead__perf { border-bottom: 1px solid var(--rule); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }