/* Refuelia — core-pages.css (RF-CORE-PAGES, 2 September 2026) One component system for the three core content pages: /how-to-use (onboarding), /guides (discover) and /about (brand & trust). Every colour, radius and shadow is a site.css token; nothing here redefines the theme. Prefix: cp-. Components: cp-hero (EditorialHero) · cp-sh (SectionHeader) · cp-feature (FeatureCard) · cp-legend (StatusLegend) · cp-guide / cp-featured / cp-topic (GuideCard family) · cp-trust (TrustCard) · cp-cta (CTASection) · cp-pipeline · cp-metric · cp-compare · cp-flow · cp-tabs · cp-chipwrap · cp-topicgrid · cp-reveal. */ /* ============================================================================ RF-ATLAS (8 September 2026) — the design system these three pages are built from. "Premium Road Atlas / Driver Editorial". WHY. Alex, from production: the pages "still feel too much like generic AI landing pages". Measured before touching anything, on the live site at 375px: /how-to-use 20 distinct font-size+weight pairs 7 radii 6 sections, 6 of them opening with the identical dot-eyebrow + H2 block /guides 20 pairs 5 radii 76 boxes /about 25 pairs 6 radii 9 eyebrows Twenty type styles is not a typographic system, it is twenty decisions taken one at a time; and a page whose every section opens with the same green pulsing dot over the same uppercase mono label reads as generated, because that IS the template. So the fix is not a new coat of paint. It is a small number of decisions, made once, that everything else refers to. THE SYSTEM, in full: TYPE seven steps, --t-display … --t-meta. Nothing on these pages sets a font-size that is not one of them. SPACE one ramp of eight, --sp-1 (4px) … --sp-8 (72px), and margins come from it. RADIUS three plus the pill: 10 / 14 / 20 / 999. Seven values became four. SURFACE one card. A hairline, a flat ground, and a lift that is a SHADOW, not a coloured halo. No green glow on any content surface — the glow is now what a focused input does, and nothing else, so it means "you are here" rather than "this box is important". ARROWS → open or continue. ↓ scroll to a section on this page. ↑ back to top. ← back. An arrow that points at nothing is deleted; see RF-ARROWS-MEAN-ONE-THING below. THE MOTIF is a road atlas, and it earns its place three times, never as decoration: the centre-line rule that marks a section (a road dash, not a pulsing dot), the distance-marker plate that numbers a step the way a kilometre post numbers a road, and the contour paper under an alternating section. Everything else is type and space. ========================================================================= */ /* RF-ATLAS-IS-THE-SITE (8 September 2026). The tokens above used to be declared HERE, and that was the whole problem Alex reported: this sheet loads on three pages, so the design system existed on three pages. Everywhere else — the map, 142 city pages, 30 country pages — kept the pre-ATLAS type and cards, and the site read as two products stapled together. The system now lives in site.css, which every page loads. What stays in this sheet is the page LAYOUT (.cp-*), which genuinely is specific to these three. The split is: site.css owns the vocabulary, core-pages.css owns the sentences. The atlas-* tokens are also no longer separate colours. They are aliases: --atlas-line -> --line --atlas-line-2 -> --line-2 --atlas-paper -> --surface-2 --atlas-lift -> --shadow They had hand-picked values close to, but not equal to, the ones site.css was already using for the same job — a hairline here was .20 alpha and a hairline on the map was .40, which is exactly the kind of near-miss that makes two screens feel like two sites. As aliases they cannot drift again, and they follow the theme for free: site.css redefines --line and --surface-2 under html[data-theme="light"], so the atlas tokens change with them without this sheet needing a light branch at all. That branch is gone for the same reason the forced theme is gone — see head-top.tpl. */ /* RF-A-SERIF-FOR-THE-VOICE (8 September 2026). One extra family, used for one thing: the sentences the page is making an argument with — the H1, the section H2s, the lead card's title, the closing statement. Fraunces is a variable optical-size serif, so a 54px headline and a 23px heading are drawn with the contrast each size wants rather than one shape scaled twice. Inter keeps everything a reader has to USE — buttons, chips, meta, card bodies, lists — because a serif in a 13px mono-ish label is costume, not typography. One extra family is the whole photography-and-print budget: no icon font, no second display face, and the fallback stack is real. Declared in site.css now, not here, and wired to --display so that EVERY h1 and h2 on the site takes it rather than only the ones on these three pages — site.css already had `h1,h2,h3,h4{font-family:var(--display)}` and --display was a second copy of Inter, so the serif reaches the map, the city pages and the country pages through a token that already existed. --font-display is kept as an alias of --display because the .cp-* rules below name it, and because it says what the rule means at the point of use. */ /* ---- rhythm ---------------------------------------------------------------- */ .cp-section{padding:clamp(var(--sp-6),5.4vw,var(--sp-8)) 0} .cp-section.tight{padding-top:clamp(var(--sp-5),3vw,var(--sp-6))} /* RF-CONTOUR-PAPER: an alternating section is a different sheet of the atlas, not a different colour of box. A flat tint plus a hairline top and bottom, and contour lines at 3% — enough to feel like paper, too faint to read as an image. One inline SVG, ~500 bytes, no request, no layout cost. */ .cp-section.alt{ background-color:color-mix(in srgb,var(--bg-2) 66%,transparent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='320' viewBox='0 0 560 320'%3E%3Cg fill='none' stroke='%2392afd7' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M-20 96C80 62 168 118 248 96S420 34 580 74'/%3E%3Cpath d='M-20 130C84 96 172 152 252 130S424 68 580 108'/%3E%3Cpath d='M-20 168C88 134 176 190 256 168S428 106 580 146'/%3E%3Cpath d='M-20 214C94 180 182 236 262 214S434 152 580 192'/%3E%3Cpath d='M-20 268C100 234 188 290 268 268S440 206 580 246'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat; background-size:560px 320px; border-top:1px solid var(--atlas-line); border-bottom:1px solid var(--atlas-line); } /* the contour stroke is a light blue-grey, which vanishes on paper; on the light theme it is the same lines drawn in ink instead */ html[data-theme="light"] .cp-section.alt{ background-color:#EEF2F8; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='320' viewBox='0 0 560 320'%3E%3Cg fill='none' stroke='%231b3557' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M-20 96C80 62 168 118 248 96S420 34 580 74'/%3E%3Cpath d='M-20 130C84 96 172 152 252 130S424 68 580 108'/%3E%3Cpath d='M-20 168C88 134 176 190 256 168S428 106 580 146'/%3E%3Cpath d='M-20 214C94 180 182 236 262 214S434 152 580 192'/%3E%3Cpath d='M-20 268C100 234 188 290 268 268S440 206 580 246'/%3E%3C/g%3E%3C/svg%3E"); } /* ============================================================================ RF-PHOTOGRAPHY (8 September 2026) — one photograph, used twice per page. Alex sent a comp built around real road photography and asked whether the product could look like it. The honest answer was: the layout already could; what the comp had and Refuelia did not was a picture of a road. So there are two now — a coastal road at late light and a forest road at dawn — and the rules they live under are the ones the rest of this sheet lives under. WHAT A PHOTO IS ALLOWED TO DO HERE: * be a road, or a place a road goes. No people, no branded forecourt, no vehicle a reader could mistake for a claim about a real place. * carry type, which means it carries a scrim; a headline that needs the reader to squint is a decoration with words on it. * cost what a photo costs and no more: WebP, three widths, srcset with real `sizes`, width/height on the element so nothing shifts, and `fetchpriority=high` on the one above the fold, `loading=lazy` on the one that is not. Measured: 15 / 30 / 61 KB for the hero set. WHAT IT MAY NOT DO: it may not be the only thing that says something. Every headline on a photo is also in the document as text, and the pages still read with images off — the scrim keeps its own background colour. ========================================================================= */ .cp-photo{position:relative;border-radius:var(--ra-3);overflow:hidden;background:#0E1726;isolation:isolate} .cp-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0} /* RF-A-SCRIM-IS-MEASURED (8 September 2026). The first scrim was one 100deg gradient, and it failed where the photograph is brightest: on /about the lede crossed the misty centre of the forest road at 2.74:1, and the hero lede on /how-to-use reached 3.63:1 — under AA, and visibly washed out in a screenshot. The gradients below were not chosen by eye. Each candidate was composited over the real WebP (object-fit: cover, at 1136, 760 and 375px container widths) and the contrast ratio computed for every pixel under the text box. RE-MEASURED FOR THE STATION PHOTOGRAPHS (8 September 2026), and the shape of the scrim changed, not just its strength. The first station build reused the scrim written for a forest road, which was heaviest along the bottom — and the subject of a forecourt photograph IS the bottom: the lit canopy sits at roughly x 55-95%, y 55-85% of the frame. A screenshot showed a black rectangle with a headline on it. The photograph had been paid for and then painted over. So the frame was measured before the gradient was: mean and peak luminance in twenty columns, at the hero crop. fuel columns 0-9 (x 0-50%): mean .022-.059, PEAK .30 — genuinely dark columns 10+ : peak .99 — the canopy EV columns 0-11 (x 0-60%): mean .010-.083, peak .43 columns 12+ : peak .99 The left half of both pictures is already dark enough to hold white type with a light touch. The scrim ramps down to zero before the canopy and never touches it, and the text column is capped so the words stay in that half. WORST PIXEL over the WHOLE text column — every pixel the column can cover, at full box height, not the bounding box of one rendered headline. Measured in Pillow against the deployed WebP files, reproducing object-fit:cover geometry and compositing the gradients below in source order: hero, desktop fuel white 9.85 mint 7.28 lede 7.80 EV white 12.65 mint 9.34 lede 9.79 hero, 320-430 fuel white 6.43 mint 4.75 lede 5.27 EV white 6.56 mint 4.85 lede 5.37 band, desktop EV white 8.37 mint 6.18 body 6.71 band, 320-430 EV white 6.36 mint 4.70 body 5.22 The floor is 4.70 (mint on the phone band). Mint is only ever the inside an H1 — large text, so AA wants 3:1 — and every white and body number clears AAA's 7:1 on desktop and AA's 4.5:1 everywhere. The desktop hero costs 49% of the frame's luminance, the band 21%, against 65% for the scrim they replace. THE PHONE NEEDS ITS OWN SCRIM. The desktop gradients are shaped for a text column in the left half: dark left, picture right. On a phone the text is full-bleed and the crop is a narrow centre slice that includes the canopy, so below 640px the horizontal pass flattens and the vertical pass carries it. Re-measure if either photograph is replaced. */ .cp-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(6,12,22,.72) 0%,rgba(6,12,22,.64) 36%,rgba(6,12,22,.26) 54%,rgba(6,12,22,.05) 70%,rgba(6,12,22,0) 100%)} /* RF-A-SCRIM-RIGHT-EDGE (8 September 2026). The first version of this ramp fell from .54 at 34% to .24 at 52% to .05 at 68%, which was measured against the MEAN of the dark half and never against its right edge. On station-fuel the sunset band runs the full width of the frame and the forecourt lights start glowing around 55% — and the text column reached 632px (56%) at a 1920 vp, where the old ramp was down to .21. Worst pixel under the headline: 2.07:1. It measured 6.82:1 the first time because that pass sampled the rendered text box, which happened to miss the band by a few pixels on the width it was run at. A number that only holds on one viewport is not a number. So: hold the scrim through 50% instead of decaying from 34%, and cap the text column at 480px so its right edge (480 + 72 max padding = 552px, 48.6%) stops inside the held part on every desktop width. Re-measured over the WHOLE column, all 520px of height, both photographs — see the table above. */ .cp-hero-photo::after{ background: linear-gradient(180deg,rgba(6,12,22,.08) 0%,rgba(6,12,22,.14) 40%,rgba(6,12,22,.30) 100%), linear-gradient(90deg,rgba(6,12,22,.58) 0%,rgba(6,12,22,.52) 32%,rgba(6,12,22,.46) 50%,rgba(6,12,22,.16) 66%,rgba(6,12,22,0) 88%)} @media (max-width:640px){ .cp-hero-photo::after{ background: linear-gradient(180deg,rgba(6,12,22,.38) 0%,rgba(6,12,22,.46) 40%,rgba(6,12,22,.70) 100%), linear-gradient(90deg,rgba(6,12,22,.48) 0%,rgba(6,12,22,.40) 100%)} .cp-band::after{ background: linear-gradient(180deg,rgba(6,12,22,.36) 0%,rgba(6,12,22,.52) 100%), linear-gradient(90deg,rgba(6,12,22,.50) 0%,rgba(6,12,22,.42) 100%)} } .cp-photo>.cp-photo-in{position:relative;z-index:2;padding:clamp(var(--sp-5),4.5vw,var(--sp-8))} /* The colours the photograph needs are NOT here. They live in RF-WHITE-ON-A- PICTURE, below the EditorialHero block, because they have to be written after it — see the note there. This block is geometry only. */ /* hero band: full-width inside the wrap, one aspect on a phone and another on a desktop, so a 21:9 road does not become a 40px letterbox at 375px */ .cp-hero-photo{min-height:clamp(360px,52vw,520px);display:flex;align-items:flex-end} /* 480px + the padding is 552px of a 1136px hero, 48.6% — inside the part of the ramp that is held flat, on every desktop width. It was 560px, which reached 56% at 1920 where the ramp had already decayed; see RF-A-SCRIM-RIGHT-EDGE. This cap is what lets the scrim stay light. Widen it and the headline walks into the forecourt lights and the numbers above stop holding. */ .cp-hero-photo>.cp-photo-in{width:100%;max-width:480px} @media (max-width:640px){.cp-hero-photo{min-height:400px}} /* the closing banner: shorter, and its words sit on the picture the same way */ .cp-band{min-height:clamp(260px,30vw,340px);display:flex;align-items:center} .cp-band>.cp-photo-in{width:100%;max-width:520px} .cp-band h2{font-family:var(--rf-display);font-weight:600;font-size:var(--t-h2);line-height:1.1;letter-spacing:-.015em;margin:var(--sp-3) 0 0} .cp-band p{font-size:var(--t-lede);line-height:1.55;margin:var(--sp-3) 0 0;max-width:46ch} @media (prefers-reduced-motion:no-preference){ .cp-photo>img{transition:none} } .cp-sh{max-width:62ch;margin:0 0 clamp(var(--sp-4),3vw,var(--sp-6))} .cp-sh h2{font-family:var(--rf-display);font-weight:600;font-size:var(--t-h2);line-height:1.14;letter-spacing:-.012em;margin:var(--sp-3) 0 0} .cp-sh p{color:var(--ink-2);font-size:var(--t-lede);line-height:1.55;margin:var(--sp-3) 0 0;max-width:56ch} .cp-sh.center{margin-left:auto;margin-right:auto;text-align:center} .cp-sh.center p{margin-left:auto;margin-right:auto} /* RF-CENTRE-LINE: the section marker. A road centre line — three dashes of the brand, drawn in one gradient — instead of the pulsing dot every AI landing page opens with. It does not animate, because a marker that moves asks to be looked at and this one only has to be read past. */ .cp-eyebrow{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--rf-mono);font-weight:600;font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0} .cp-eyebrow::before{ content:"";flex:0 0 auto;width:26px;height:2px;border-radius:1px; background:repeating-linear-gradient(90deg,var(--brand) 0 7px,transparent 7px 12px); } .cp-sh.center .cp-eyebrow{justify-content:center} .cp-grid{display:grid;gap:14px} .cp-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .cp-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))} .cp-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:980px){.cp-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.cp-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.cp-grid.c2,.cp-grid.c3,.cp-grid.c4{grid-template-columns:1fr}} /* RF-ONE-BUTTON-PAIR (8 September 2026). Two buttons and no third. The primary is solid brand with a 1px ring; the secondary is a hairline on the paper. What changes here is the primary's HALO — site.css gives it var(--glow), a 36px green bloom, and measured on the live /how-to-use it is the brightest object on a phone screen, brighter than the headline. On an app screen a bloom that size reads as "the button"; on a page of prose it reads as neon. So on these three pages, and only here, the bloom comes off and the ring stays: the button is still unmistakably the green one, and nothing on the page glows. The rest of the site keeps its button as it is — that is a decision for Alex, not something to change from inside a content-page redesign. */ .cp-hero .btn.primary,.cp-actions .btn.primary,.cp-cta .btn.primary{ box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 55%,transparent); } .cp-hero .btn.primary:hover,.cp-actions .btn.primary:hover,.cp-cta .btn.primary:hover{ box-shadow:0 0 0 1px var(--brand),0 6px 18px -10px rgba(2,6,16,.9); } .cp-actions .btn.ghost,.cp-hero .btn.ghost{ background:transparent;border:1px solid var(--atlas-line-2);color:var(--ink);box-shadow:none; } .cp-actions .btn.ghost:hover,.cp-hero .btn.ghost:hover{border-color:var(--brand);color:var(--brand)} .cp-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:var(--sp-5)} .cp-actions .cp-more{color:var(--ink-2);font-weight:600;font-size:var(--t-body);text-decoration:none} .cp-actions .cp-more:hover{color:var(--brand)} .cp-muted{color:var(--ink-3);font-size:var(--t-small);line-height:1.5} /* ============================================================================ RF-ARROWS-MEAN-ONE-THING (8 September 2026). Four glyphs were in use across these three pages and only two of them said anything: → appeared 4, 8 and 5 times as "open this", as "and also this", and twice as pure ornament — a → welded to the end of every trust-card heading by CSS (.cp-trust h3::after) and a → floated between the four pipeline cards on /about, pointing at a gap. An arrow that decorates teaches the reader to stop reading arrows, and then the ones that mean something stop working. One rule, four directions: → opens or continues: a link that leads somewhere. .cp-link ↓ moves down THIS page to a section on it. .cp-more[href^="#"] ↑ back to top. Site chrome only; nothing here uses it. ← back or previous. Nothing here uses it either. The arrow is drawn by the class, never typed into the markup, so it cannot drift; and the two decorative ones are deleted rather than restyled. ========================================================================= */ .cp-link{color:var(--brand-2);font-weight:600;font-size:var(--t-small);text-decoration:none;display:inline-flex;align-items:baseline;gap:var(--sp-2)} .cp-link::after{content:"\2192";font-weight:600;transition:transform .18s var(--ease)} .cp-link:hover{text-decoration:underline;text-underline-offset:3px} .cp-link:hover::after{transform:translateX(3px)} @media (prefers-reduced-motion:reduce){.cp-link::after,.cp-link:hover::after{transition:none;transform:none}} /* RF-A-THUMB-NEEDS-ROOM (9 September 2026). Measured on the live page at 320, 375, 390 and 430: .cp-link is 20-21px tall and .cp-more is 20px. Both are the only child of their own

— they are standalone affordances ("What a good report looks like →", "See the five steps ↓"), not links inside a sentence, so the inline-link exemption in WCAG 2.5.8 does not cover them and 20px is under even the 24px minimum. The fix cannot be padding: these sit in prose and padding would move the text around them. So the hit area is a transparent ::before — ::after is already the arrow — centred on the link and 40px tall. Nothing moves, nothing is drawn, and the thumb gets twice the room. Only on a coarse pointer: a mouse hits a 20px target without help, and an invisible 40px box under a cursor is how you steal a click from the line above. */ @media (pointer:coarse){ .cp-link,.cp-more{position:relative} .cp-link::before,.cp-more::before{content:"";position:absolute;left:0;right:0; top:50%;height:40px;transform:translateY(-50%);pointer-events:auto} } /* a "see below" link points down, and only when it really is below */ .cp-more[href^="#"]::after{content:"\2193";margin-left:var(--sp-2);display:inline-block} /* ---- surfaces --------------------------------------------------------------- */ /* RF-ONE-CARD (8 September 2026). One card, one hairline, one ground, no glow. The old card was a two-stop gradient with a green box-shadow on three variants (.cp-feature, .cp-compare .pro, and every .link on hover), which is the "endless glowing boxes" Alex named. Depth is a shadow now — cheap, dark, and the same one everywhere — and the brand appears on a card only where the card is genuinely the recommended one. */ .cp-card{background:var(--atlas-paper);border:1px solid var(--atlas-line);border-radius:var(--ra-2);padding:clamp(var(--sp-4),2.2vw,var(--sp-5));min-width:0} .cp-card h3{margin:0 0 var(--sp-2);font-size:var(--t-h3);line-height:1.3;letter-spacing:-.01em} .cp-card p{margin:0;color:var(--ink-2);font-size:var(--t-small);line-height:1.55} .cp-card.link{display:block;color:var(--ink);text-decoration:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)} .cp-card.link:hover{border-color:var(--atlas-line-2);box-shadow:var(--atlas-lift);background:color-mix(in srgb,var(--surface) 62%,transparent)} .cp-card.link:focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* RF-ONE-ICON: one stroke, one size, one plate. 20px glyph, 1.75 stroke, 38px plate — and the plate is the hairline the cards use, not a green wash, so a row of icons reads as a row of things rather than a row of highlights. */ .cp-ico{width:38px;height:38px;border-radius:var(--ra-1);display:grid;place-items:center;background:color-mix(in srgb,var(--surface-2) 70%,transparent);border:1px solid var(--atlas-line);color:var(--brand);margin-bottom:var(--sp-3)} .cp-ico svg{width:20px;height:20px;stroke-width:1.75} .cp-ico.blue{color:var(--blue)} .cp-ico.amber{color:var(--amber)} .cp-ico.violet{color:var(--violet)} /* RF-DISTANCE-MARKER: a step number is a distance post, not a mono caption — a small plate with the figure on it, the way a road counts kilometres. */ /* align-self matters: .cp-feature is a flex COLUMN, so an inline-flex child stretches to the full width of the card unless it is told not to — measured at 1280, the marker was a 320px empty pill with "01" floating in the middle of it, which is the opposite of a distance post. */ .cp-num{display:inline-flex;align-self:flex-start;align-items:center;justify-content:center;min-width:34px;height:24px;padding:0 var(--sp-2); font-family:var(--rf-mono);font-weight:600;font-size:var(--t-meta);letter-spacing:.08em; color:var(--brand);background:color-mix(in srgb,var(--surface-2) 80%,transparent); border:1px solid var(--atlas-line-2);border-radius:var(--ra-1);margin-bottom:var(--sp-3)} /* ---- EditorialHero ---------------------------------------------------------- */ .cp-hero{padding:clamp(var(--sp-7),7vw,var(--sp-8)) 0 clamp(var(--sp-5),4vw,var(--sp-7));position:relative} .cp-hero h1{font-family:var(--rf-display);font-weight:600;font-size:var(--t-display);line-height:1.06;letter-spacing:-.018em;margin:var(--sp-3) 0 0;max-width:15ch} .cp-hero h1 em{font-style:normal;color:var(--brand)} .cp-hero .cp-lede{color:var(--ink-2);font-size:var(--t-lede);line-height:1.55;margin:var(--sp-5) 0 0;max-width:46ch;text-wrap:pretty} /* RF-A-HIDDEN-BREAK-EATS-THE-SPACE (8 September 2026). Measured on the live /how-to-use at 375px, the first sentence of the page read: "…EV chargers nearby,check what is actually known,and update…" The lede was typed as three lines separated by
, and this sheet hid the
below 700px. display:none removes the break AND the whitespace either side of it, so the comma landed against the next word on every phone. The break is a desktop typesetting choice, so it is made where it belongs — in the markup, with a real space around it — and the phone simply wraps. Nothing is hidden any more: there is no
in these ledes to hide, and tests/atlas-design-system.test.js refuses one coming back. */ .cp-hero-visual{min-width:0} @media (max-width:1000px){.cp-hero{padding-top:38px}.cp-hero h1{max-width:none}} /* RF-HERO-FITS-THE-PHONE (6 September 2026). clamp(34px,5.4vw,62px) never left its floor on a phone - 5.4vw is 20px at 375px wide - so every core page opened with a 34px headline over three or four lines and pushed everything else off the first screen. The floor drops and the middle term takes over, so the headline scales with the device the way the rest of the page does. The emphasis ('I don't know', 'In seconds.') is untouched: same words, same colour, same line - it simply stops owning the whole screen. */ @media (max-width:640px){ .cp-hero{padding:var(--sp-6) 0 var(--sp-4)} .cp-hero h1{font-size:clamp(26px,7.6vw,34px);line-height:1.08;text-wrap:balance} .cp-hero .cp-lede{font-size:var(--t-body);margin-top:var(--sp-3)} } /* RF-DEAD-COMPONENTS-ARE-DELETED (8 September 2026). Three whole components were still in this sheet and on no page: .cp-phone (a phone bezel with a fake map inside it, built from six stacked gradients), .cp-world (a "world map" were the decorative-mockup register Alex asked me to leave behind, and two of them drew a MAP OUT OF GRADIENTS on a site whose whole argument is that its map is real. They are removed rather than restyled: 3394 bytes of rules that nothing could ever show. The pin symbol used by the legend and the guide cards stays — that one is drawn on the page. */ .cp-pin{position:absolute;width:26px;height:31px;transform:translate(-50%,-100%);filter:drop-shadow(0 2px 3px rgba(2,6,16,.5))} .cp-pin.pulse::after{content:"";position:absolute;left:50%;top:38%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--brand);opacity:0;animation:cpRing 2.2s ease-out infinite} @keyframes cpRing{0%{transform:scale(.5);opacity:.75}100%{transform:scale(2.4);opacity:0}} /* ---- StatusLegend (pins are the map's own, see how-to-use) ---------------- */ .cp-legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} /* RF-MIN-WIDTH-ZERO: same rule, everywhere a grid holds text or a scroller. */ .cp-grid>*,.cp-legend>*,.cp-panel.is-on>*,.cp-tabs>*{min-width:0} @media (max-width:980px){.cp-legend{grid-template-columns:repeat(3,minmax(0,1fr))}} /* RF-ONE-CARD-PER-ROW (6 September 2026). This was a swipe carousel at 66% of the width, so a phone showed one whole card and a second one sliced down the middle by the right edge - which reads as a broken grid, not as an invitation to swipe. Five pin states is a list, and a list on a phone is one per row. The rules themselves moved to RF-MOBILE-LAYER at the foot of this file: the version that stood here was overridden by the base `.cp-legend>li` rule written thirty lines BELOW it, which is how the description ended up in a second flex column outside the card. Same specificity, later wins, media query irrelevant. */ .cp-legend>li{list-style:none;margin:0;background:var(--atlas-paper);border:1px solid var(--atlas-line);border-radius:var(--ra-2);padding:var(--sp-4) var(--sp-4) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2)} .cp-legend .cp-tag{font-family:var(--rf-mono);font-weight:600;font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .cp-legend .cp-tag.g{color:var(--green)}.cp-legend .cp-tag.y{color:var(--amber)}.cp-legend .cp-tag.r{color:var(--red)} .cp-legend .rf-key3-txt b{display:block;color:var(--ink);font-weight:600;font-size:var(--t-body);line-height:1.3} .cp-legend .rf-key3-txt{font-size:var(--t-small);line-height:1.45;color:var(--ink-2)} /* ---- FeatureCard / steps ------------------------------------------------------ */ /* The green box-shadow that made these the "glowing cards" is gone; a step is distinguished by its distance marker and its example, not by a halo. */ .cp-feature{display:flex;flex-direction:column;gap:var(--sp-3)} .cp-feature .cp-visual{margin-top:auto;border-radius:var(--ra-1);border:1px solid var(--atlas-line);background:color-mix(in srgb,var(--bg) 62%,transparent);padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);min-height:96px} .cp-vrow{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--t-small);color:var(--ink-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--ra-1);background:color-mix(in srgb,var(--surface-2) 62%,transparent);border:1px solid var(--atlas-line)} .cp-vrow b,.cp-vrow strong{color:var(--ink);font-weight:600} .cp-vrow .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto} .cp-vrow .dot.y{background:var(--amber)}.cp-vrow .dot.grey{background:var(--unknown)} .cp-vrow .k{margin-left:auto;font-family:var(--rf-mono);font-size:var(--t-meta);color:var(--ink-3)} .cp-vrow.cta{justify-content:center;background:rgba(255,201,40,.12);border-color:rgba(255,201,40,.35);color:var(--brand);font-weight:600} /* ---- tabs (job picker) ------------------------------------------------------- */ .cp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px} /* RF-FOUR-JOBS-FIT (6 September 2026). Four pill buttons in a nowrap row came to about 470px of chips inside a 335px phone: the fourth job (Route) was off the screen with nothing saying so. They are four equal things, so they get a 2x2 grid - every job visible at once, each a 46px target, no gesture to discover. Under 360px the labels get one column rather than two half-words. */ @media (max-width:640px){.cp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin:0 0 var(--sp-4)}.cp-tabs .htu-tab{justify-content:center;min-height:46px;padding:var(--sp-2);font-size:var(--t-small);white-space:normal;text-align:center}}@media (max-width:359px){.cp-tabs{grid-template-columns:1fr}} .htu-tab{appearance:none;border:1px solid var(--atlas-line);background:var(--atlas-paper);color:var(--ink-2);border-radius:var(--ra-pill);padding:var(--sp-3) var(--sp-4);font:inherit;font-weight:600;font-size:var(--t-small);cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;transition:border-color .16s,color .16s,background .16s} .htu-tab:hover{border-color:var(--atlas-line-2);color:var(--ink)} .htu-tab.is-on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600} .htu-tab.is-on .htu-ico{color:var(--brand-ink)} .htu-tab .htu-ico{width:1em;height:1em;vertical-align:-.12em;margin-right:.5em;color:var(--brand,#FFC928);flex:0 0 auto} .cp-panel{display:none} .cp-panel.is-on{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;align-items:center} @media (max-width:860px){.cp-panel.is-on{grid-template-columns:1fr}} .cp-panel ol{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:s} .cp-panel ol li{counter-increment:s;display:flex;gap:var(--sp-3);align-items:flex-start;color:var(--ink-2);font-size:var(--t-body);line-height:1.5} .cp-panel ol li::before{content:counter(s);flex:0 0 26px;height:24px;border-radius:var(--ra-1);display:grid;place-items:center;background:color-mix(in srgb,var(--surface-2) 80%,transparent);border:1px solid var(--atlas-line-2);color:var(--brand);font-family:var(--rf-mono);font-weight:600;font-size:var(--t-meta)} .cp-panel ol li b{color:var(--ink)} /* RF-STEPS-STACK (6 September 2026, corrected 8 September 2026): on a phone the step title takes its own line, so "Sort by nearest or cheapest, where a price is known" breaks after the instruction rather than mid-phrase beside a 28px number. The first version did this with `display:block` on the , and it did the opposite of what it says. The

  • is a flex container, so a block-level child is not a new line — it is a second flex item, and (with `min-width:0` from the mobile layer below) flex items shrink below their content. Measured at 320-430px: Sort wanted 28px and was given 16-25, so the one word the rule exists to protect was the one word squeezed. Setting the back to `display:inline` does not help either: a flex item is blockified whatever you write. So the phone stops using flex here. The number is lifted out of the flow and pinned in the indent, the way a list marker is, and the
  • becomes an ordinary block of prose again — one text flow, wrapping normally, with a real newline after the bold. Measured after: 0 clipped elements at every width from 320 to 1920. */ @media (max-width:640px){ .cp-panel ol li{display:block;position:relative;padding-left:34px;font-size:var(--t-small)} .cp-panel ol li::before{position:absolute;left:0;top:0;width:26px} .cp-panel ol li b::after{content:"\A";white-space:pre} } /* ---- contribution flow --------------------------------------------------------- */ .cp-flow{display:grid;gap:var(--sp-2)} .cp-q{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-radius:var(--ra-2);background:var(--atlas-paper);border:1px solid var(--atlas-line)} .cp-q .ql{font-weight:600;font-size:var(--t-small);min-width:9ch} .cp-q .qa{font-size:var(--t-small);font-weight:600;padding:var(--sp-2) var(--sp-3);border-radius:var(--ra-pill);border:1px solid var(--atlas-line);color:var(--ink-2)} .cp-q .qa.on{background:rgba(255,201,40,.14);border-color:var(--brand);color:var(--brand)} .cp-q .qa.r{border-color:rgba(248,113,113,.5);color:var(--red)} .cp-q .qa.opt{color:var(--ink-3);border-style:dashed} .cp-q.send{justify-content:center;background:var(--brand);border-color:transparent;color:var(--brand-ink);font-weight:600;letter-spacing:.02em} /* ---- compare (account) --------------------------------------------------------- */ .cp-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} @media (max-width:640px){.cp-compare{grid-template-columns:1fr}} .cp-compare ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px} .cp-compare li{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--t-small);color:var(--ink-2);line-height:1.45} .cp-compare li::before{content:"\2713";flex:0 0 auto;color:var(--brand);font-weight:600} .cp-compare .plan{font-family:var(--rf-mono);font-weight:600;font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} /* the "free account" card is still the marked one — by a solid brand hairline, which is a statement, rather than by a doubled green ring, which was a glow */ .cp-compare .cp-card.pro{border-color:color-mix(in srgb,var(--brand) 45%,var(--atlas-line))} .cp-compare .cp-card.pro .plan{color:var(--brand)} /* ---- pipeline (about) ------------------------------------------------------------ */ .cp-pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative} @media (max-width:980px){.cp-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.cp-pipeline{grid-template-columns:1fr}} .cp-node{position:relative} .cp-node .plan{font-family:var(--rf-mono);font-weight:600;font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:8px} .cp-node.out{border-color:var(--atlas-line-2);background:color-mix(in srgb,var(--surface-2) 62%,transparent)} /* The floating → between the four pipeline cards is gone (RF-ARROWS-MEAN-ONE- THING): it sat in the 12px gutter, pointed at the gap rather than at the next card, and vanished the moment the grid wrapped to two columns, where it would have pointed off the row. The order of the cards is the order of the pipeline; the picture below them draws the flow properly. */ /* ---- metrics / statement / world --------------------------------------------------- */ /* RF-A-WORD-IS-NOT-A-NUMBER (8 September 2026). These four cards were styled as the stat cards every landing page opens with — a big mono figure over a heading — except the figure was the word WORLDWIDE, then LIVE, TRANSPARENT, OPEN. Adjectives wearing the costume of measurements, which is the shape of the fake "350K+ drivers" panel Alex told me never to invent, minus only the dishonesty of a number. So the costume goes: the word becomes the label it always was, quiet and small, and the heading carries the weight. */ .cp-metric .big{font-family:var(--rf-mono);font-weight:600;font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:var(--sp-2)} .cp-metric h3{font-size:var(--t-h3)} .cp-statement{text-align:center;padding:clamp(var(--sp-6),5vw,var(--sp-8)) clamp(var(--sp-4),4vw,var(--sp-7));border-radius:var(--ra-3);border:1px solid var(--atlas-line-2);background:var(--atlas-paper)} .cp-statement h2{font-family:var(--rf-display);font-weight:600;font-size:var(--t-h2);line-height:1.08;letter-spacing:-.015em;margin:0} .cp-statement ul{list-style:none;margin:var(--sp-5) auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2) var(--sp-3);max-width:60ch} .cp-statement li{font-size:var(--t-small);font-weight:600;padding:var(--sp-2) var(--sp-3);border-radius:var(--ra-pill);border:1px solid var(--atlas-line);color:var(--ink-2)} /* ---- TrustCard / CTASection ------------------------------------------------------------- */ .cp-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} @media (max-width:860px){.cp-trust{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:480px){.cp-trust{grid-template-columns:1fr}} .cp-trust .cp-card{padding:var(--sp-4) var(--sp-5)} .cp-trust .cp-card h3{font-size:var(--t-body);margin:0 0 var(--sp-1)} /* the → that used to be welded here by CSS is gone: see RF-ARROWS-MEAN-ONE-THING. Six cards in a grid, each with an arrow pointing into its own right margin, were six ornaments. The whole card is the link and says so by being one. */ .cp-trust .cp-card p{font-size:var(--t-small)} /* RF-CTA-IS-A-SIGN: the closing panel was a green radial glow inside a green border — the single most AI-looking element on the three pages. It is a road sign now: flat ground, one hairline, the words doing the work, and the only colour on it is the button that actually goes somewhere. */ .cp-cta{text-align:center;padding:clamp(var(--sp-6),5vw,var(--sp-8)) clamp(var(--sp-4),4vw,var(--sp-7));border-radius:var(--ra-3);border:1px solid var(--atlas-line-2);background:var(--atlas-paper)} .cp-cta h2{font-family:var(--rf-display);font-weight:600;font-size:var(--t-h2);letter-spacing:-.015em;margin:0;line-height:1.08} .cp-cta p{color:var(--ink-2);font-size:var(--t-lede);margin:var(--sp-3) auto 0;max-width:46ch} .cp-cta .cp-actions{justify-content:center} /* ========================================================================= RF-WHITE-ON-A-PICTURE (8 September 2026) Every rule below is a colour, and every one of them must be written AFTER the EditorialHero block above. They were written before it for one build, and the browser did exactly what the cascade says: `.cp-photo .cp-lede` and `.cp-hero .cp-lede` weigh the same (0,2,0), `.cp-photo .btn.ghost` and `.cp-actions .btn.ghost` weigh the same (0,3,0), and when two rules weigh the same the last one written wins. So the hero lede rendered in --ink-2 (#3E5570) and the secondary button's edge in --atlas-line-2 — dark navy on a dark photograph, measured at 1.4:1 and 1.2:1. The words were there; on a screenshot they were not. Nothing here is a "!important" and nothing is a doubled class: the rules simply live where the cascade can honour them. If this block is ever moved above .cp-actions again, the hero goes dark. ========================================================================= */ .cp-photo .cp-eyebrow{color:rgba(255,255,255,.72)} .cp-photo .cp-eyebrow::before{background:repeating-linear-gradient(90deg,#FFE08A 0 7px,transparent 7px 12px)} .cp-photo h1,.cp-photo h2{color:#fff} /* the brand green measures 3.07:1 against the scrim — legal for display type and no more; the lighter mint measures 7.68:1. inline-block keeps the emphasised phrase whole instead of orphaning "No" at the end of the line above ("Real map data. No / guessing.", measured on /about at 1280px). */ .cp-photo h1 em{color:#FFE08A;display:inline-block} .cp-photo p,.cp-photo .cp-lede{color:rgba(255,255,255,.86)} .cp-photo .breadcrumb,.cp-photo .breadcrumb a{color:rgba(255,255,255,.66)} .cp-photo .breadcrumb a:hover{color:#fff} /* a control's own edge needs 3:1 against what is behind it, and .42 white over the scrim measured 2.5:1 — the button read as a rumour of a button */ .cp-photo .btn.ghost{border-color:rgba(255,255,255,.62);color:#fff;background:rgba(255,255,255,.08)} .cp-photo .btn.ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.14)} .cp-photo .cp-more{color:rgba(255,255,255,.86)} .cp-photo .cp-more:hover{color:#fff} /* The closing banner is a .cp-cta AND a .cp-photo, and .cp-cta was written for a panel of paper: centred text, its own padding, a hairline border and a white ground. On a photograph all four are wrong — the ground is the picture, the padding is .cp-photo-in's, the hairline draws a box around a photo, and centred text wanders out of the darkest part of the scrim, which is where the contrast was measured. Compound selectors here, not source order, because .cp-cta rules may legitimately be written after this block. */ .cp-cta.cp-photo{text-align:left;padding:0;border-color:transparent;background:#0E1726} .cp-cta.cp-photo .cp-actions{justify-content:flex-start} .cp-cta.cp-photo h2{color:#fff} .cp-cta.cp-photo p{color:rgba(255,255,255,.86);margin-left:0;margin-right:0} /* ---- guides hub ----------------------------------------------------------------------- */ .cp-search{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-5) 0 0;max-width:560px;background:var(--atlas-paper);border:1px solid var(--atlas-line);border-radius:var(--ra-2);padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4)} /* the one glow left on these pages, and it earns it: focus is the single state where a halo is information ("you are typing here") and not decoration */ .cp-search:focus-within{border-color:color-mix(in srgb,var(--brand) 55%,var(--atlas-line));box-shadow:var(--glow)} .cp-search svg{width:18px;height:18px;color:var(--ink-3);flex:0 0 auto} .cp-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;font:inherit;font-size:var(--t-body);color:var(--ink);padding:var(--sp-3) var(--sp-1)} .cp-search input::placeholder{color:var(--ink-3)} .cp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} /* RF-RAIL (6 September 2026). The category row scrolled sideways on a phone and said nothing about it: "Road trips" was sliced by the right edge and Safety was simply gone. A row that scrolls has to LOOK like one. Three signals, none of them decorative: the chips snap so a swipe lands on a whole chip, a fade sits over each edge that still has content behind it, and a chevron button appears on that side for anyone with a mouse or a keyboard. All three are driven by one measurement in main.js, so they cannot disagree with each other or with the actual scroll position. */ .cp-chips{min-width:0} .cp-rail{position:relative;margin-top:14px;display:flex;align-items:center;min-width:0} .cp-rail>.cp-chips{margin-top:0;flex:1 1 auto;min-width:0} .cp-rail-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:34px;height:44px;display:none;align-items:center;justify-content:center; border:0;background:none;color:var(--ink-2);cursor:pointer;font-size:22px;line-height:1;padding:0} .cp-rail-btn:hover{color:var(--brand)} .cp-rail-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--ra-1)} .cp-rail[data-more~="left"] .cp-rail-btn.prev, .cp-rail[data-more~="right"] .cp-rail-btn.next{display:flex} .cp-rail-btn.prev{left:-6px} .cp-rail-btn.next{right:-6px} .cp-rail::before,.cp-rail::after{content:"";position:absolute;top:0;bottom:0;width:42px;pointer-events:none;z-index:1;opacity:0;transition:opacity .15s ease} .cp-rail::before{left:0;background:linear-gradient(90deg,var(--bg,#0b1220),transparent)} .cp-rail::after{right:0;background:linear-gradient(270deg,var(--bg,#0b1220),transparent)} .cp-rail[data-more~="left"]::before{opacity:1} .cp-rail[data-more~="right"]::after{opacity:1} /* The phone rules for the rail live in RF-MOBILE-LAYER at the foot of this file, with every other phone rule. The version here hid the chevrons on a phone and left only a 26px fade, which the 6 September screenshots showed was not enough: "Road trips" was cut by the right edge and nothing said why. */ @media (prefers-reduced-motion:reduce){.cp-chips{scroll-behavior:auto}} .gd-chip{appearance:none;font:inherit;font-weight:600;font-size:var(--t-small);padding:var(--sp-2) var(--sp-4);border-radius:var(--ra-pill);border:1px solid var(--atlas-line);background:var(--atlas-paper);color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:border-color .16s,color .16s} .gd-chip:hover{border-color:var(--atlas-line-2);color:var(--ink)} .gd-chip.is-on{border-color:var(--brand);color:var(--brand-ink);background:var(--brand);font-weight:600} .cp-guide[hidden]{display:none} /* RF-GUIDE-CARDS-HAVE-A-RANK (8 September 2026). Sixty-two identical cards is a database dump with rounded corners. There are three ranks now and they look like three things: the lead (a picture, a big title, three lines of summary), the ordinary card (title, two lines, category and reading time), and the compact row in a topic group (title and one line). Same tokens, different weight — hierarchy, not decoration. */ .cp-guide{display:flex;flex-direction:column;gap:var(--sp-2);color:var(--ink);text-decoration:none;padding:var(--sp-4) var(--sp-5)} /* RF-A-TITLE-IS-NOT-A-WORD-IN-A-SENTENCE (8 September 2026). .gd-row-h and .gd-row-p are s, and every rule for them was scoped to .cp-guide. The "Four things worth knowing before your first stop" cards on /guides are .cp-start, not .cp-guide, so both spans stayed inline and the page read: "Your first fuel stop: a calm walkthroughWhich side is the filler on…" — four times, in production HTML, at every width. The block behaviour and the type belong to the class, not to one of the three places it is used; only the line clamp stays scoped, because a contents-page row is not clamped. */ .gd-row-h{display:block;font-weight:600;font-size:var(--t-body);line-height:1.32;letter-spacing:-.01em} .gd-row-p{display:block;color:var(--ink-2);font-size:var(--t-small);line-height:1.5} .cp-guide .gd-row-p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);font-family:var(--rf-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .cp-meta .cat{color:var(--brand)} .cp-guide .cp-meta.foot{margin-top:auto;padding-top:var(--sp-2)} .cp-featured{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-3)} @media (max-width:860px){.cp-featured{grid-template-columns:1fr}} .cp-featured .cp-side{display:grid;gap:var(--sp-3)} .cp-lead{padding:0;overflow:hidden;display:flex;flex-direction:column} /* RF-ATLAS-PLATE: the lead card's picture was two coloured blurs behind a grid — the stock "AI gradient". It is a piece of map now: contour lines, a road, and the three pins that are the article's own subject. Drawn in CSS + the page's existing pin symbols, so it costs one gradient and no request. */ .cp-lead .art{height:200px;position:relative;overflow:hidden;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='200' viewBox='0 0 420 200'%3E%3Cg fill='none' stroke='%2392afd7' stroke-opacity='.20'%3E%3Cpath d='M-10 54C60 30 130 78 196 58S330 8 430 34'/%3E%3Cpath d='M-10 92C64 68 134 116 200 96S334 46 430 72'/%3E%3Cpath d='M-10 138C70 114 140 162 206 142S340 92 430 118'/%3E%3C/g%3E%3Cpath d='M-10 190C70 150 120 128 190 120S300 96 430 20' fill='none' stroke='%2392afd7' stroke-opacity='.30' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M-10 190C70 150 120 128 190 120S300 96 430 20' fill='none' stroke='%232EE6A8' stroke-opacity='.55' stroke-width='2' stroke-dasharray='9 11' stroke-linecap='round'/%3E%3C/svg%3E") center/cover no-repeat, color-mix(in srgb,var(--bg-2) 92%,transparent)} .cp-lead .art .cp-pin{width:32px;height:38px} .cp-lead .body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1} .cp-lead .gd-row-h{font-family:var(--rf-display);font-weight:600;font-size:clamp(20px,2.4vw,26px);line-height:1.2;letter-spacing:-.012em} .cp-lead .gd-row-p{font-size:var(--t-body);-webkit-line-clamp:3} .cp-topic{display:flex;flex-direction:column;gap:var(--sp-1);color:var(--ink);text-decoration:none} .cp-topic h3{font-size:var(--t-body);margin:0} .cp-topic p{font-size:var(--t-small)} .cp-topic .cnt{font-family:var(--rf-mono);font-size:var(--t-meta);color:var(--ink-3);letter-spacing:.08em;margin-top:var(--sp-1)} /* the topic card is a link in its own right; it does not need a second "View guides →" line inside it saying so (RF-ARROWS-MEAN-ONE-THING). */ .cp-topic .cp-link{display:none} .cp-start{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4)} .cp-start .cp-num{margin:0;flex:0 0 auto} .cp-start .gd-row-h{font-size:var(--t-body)} .cp-start .gd-row-p{font-size:var(--t-small);margin-top:var(--sp-1)} .gd-group{margin:var(--sp-6) 0 0} .gd-group[hidden]{display:none} /* RF-GROUP-IS-A-SHEET-HEADING: a topic group is a rule across the page with its name sitting on it, the way an atlas names the sheet you have turned to. */ .cp-group-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin:0 0 var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--atlas-line)} .cp-group-h h2{font-family:var(--rf-display);font-weight:600;font-size:var(--t-h3);margin:0;letter-spacing:-.005em} .cp-group-h .gd-count{font-family:var(--rf-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} @media(max-width:900px){.gd-group{margin-top:var(--sp-5);padding-top:0;padding-bottom:0}} .gd-empty{margin:var(--sp-4) 0 0;padding:var(--sp-4);border:1px dashed var(--atlas-line-2);border-radius:var(--ra-2);color:var(--ink-2);font-size:var(--t-body)} .gd-empty[hidden]{display:none} .linklike{appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--brand-2);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px} /* ---- motion (viewport entry), reduced-motion aware -------------------------------------- */ .cp-js .cp-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .cp-js .cp-reveal.in{opacity:1;transform:none} /* RF-MOBILE-MOTION (9 September 2026). On a phone this reveal is the thing Alex was describing. Fourteen blocks on /how-to-use start at opacity 0 and each runs a 550ms opacity+transform when it crosses the fold — and a phone viewport is short enough that they arrive one at a time, all the way down, for the whole length of the page. Desktop shows three or four at once and then a long settled stretch; mobile is a strobe. It is also the only motion on these pages that gates CONTENT rather than decoration, which the brief rules out for mobile outright. So below 768px the blocks are simply there. This is not "animation off" — the hero sequence, the route line, the pin and the press feedback all still run. It is the one effect that trades reading for polish, removed on the one device where that trade is worst. Desktop keeps it (see the media query width: this rule does not exist above 767px). */ @media (max-width:767px){ .cp-js .cp-reveal{opacity:1;transform:none;transition:none} } @media (prefers-reduced-motion:reduce){.cp-js .cp-reveal{opacity:1;transform:none;transition:none}.cp-eyebrow::before,.cp-pin.pulse::after{animation:none}.cp-card.link{transition:none}} /* RF-WORLD-MAP: the coverage map on /about (drawn by assets/js/coverage-map.js) */ .cp-worldmap{border-radius:var(--r-lg);border:1px solid var(--line);padding:14px;background:color-mix(in srgb,var(--surface) 55%,transparent)} .rf-world-map{position:relative;width:100%;aspect-ratio:1000/470;border-radius:var(--ra-1);overflow:hidden;background:color-mix(in srgb,var(--bg-2) 70%,transparent)} .rf-world-map svg{display:block;width:100%;height:100%} .rf-world[data-rf-world-state="failed"] .rf-world-map{display:none} /* RF-THE-SENTENCE-KEEPS-ITS-SEAT (8 September 2026). This line is written by coverage-map.js when /api/coverage-map answers, and it was `:empty{display: none}` until then — so /about grew 53px the moment the fetch landed and everything below the map jumped. The paragraph now holds its own height from the first paint: three lines beside the map at desktop, four in the narrow card on a phone. Empty it is invisible inside the panel; filled it moves nothing. Measured after the change: page height identical before and after the fetch, at every tested width. */ .rf-world-stat{margin:var(--sp-2) 0 0;font-size:var(--t-small);line-height:1.5;color:var(--ink-2); min-height:calc(var(--t-small) * 1.5 * 3)} .rf-world-legend{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);font-size:var(--t-meta);color:var(--ink-2)} .rf-world-legend li{display:inline-flex;align-items:center;gap:7px} .rf-wl{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid rgba(146,175,215,.35)} .rf-wl-city{background:var(--rf-wc-city,rgba(255,201,40,.86))} .rf-wl-tiles{background:var(--rf-wc-tiles,rgba(255,201,40,.62))} .rf-wl-nat{background:var(--rf-wc-national,rgba(146,175,215,.34))} .rf-wl-none{background:var(--rf-wc-none,rgba(128,140,160,.22))} .cp-worldmap .note{margin:var(--sp-2) 0 0;font-size:var(--t-meta);color:var(--ink-3)} /* RF-WORLD-CARD-FITS (6 September 2026). On a phone this card ran the height of the screen: a full-width map, a stat, a three-row legend and a note, each with desktop spacing. Nothing is removed - every word is still in the HTML and on the page - it is composed for the width instead: map, the one-line summary that says what the colours are counting, then the key as a single wrapped row. The map keeps its true aspect ratio, so no country is stretched to fill space. */ @media (max-width:640px){ .cp-worldmap{padding:var(--sp-2) var(--sp-2) var(--sp-3);border-radius:var(--ra-2)} .cp-worldmap .rf-world-stat{margin-top:var(--sp-2);line-height:1.4;min-height:calc(var(--t-small) * 1.4 * 4)} .cp-worldmap .rf-world-legend{margin-top:var(--sp-2);gap:var(--sp-1) var(--sp-3)} .cp-worldmap .rf-world-legend .rf-wl{width:10px;height:10px} .cp-worldmap .note{margin-top:var(--sp-2);line-height:1.4} } /* RF-NOT-GENERATED: the owner — "лучше везде чёрный": counted countries are graphite on every page, as on the homepage; yellow is the hover (selection). */ html[data-theme="light"] .rf-world-map{--rf-wc-none:rgba(22,24,29,.08);--rf-wc-line:rgba(255,255,255,.75);--rf-wc-national:rgba(22,24,29,.34);--rf-wc-tiles:#FFC928;--rf-wc-city:#16181D;--rf-wc-hover:var(--rf-mark,#FFC928)} /* RF-CITY-STATIONS moved to site.css on 8 September 2026, and the reason is worth leaving behind: these rules styled the station lists on 142 city pages and the city lists on 30 country pages — pages that load site.css and NOT this sheet. They were dead here. Measured on the live /city/berlin before the move: list-style decimal, padding-left 40px, and the station name run into its own description because the flex row never applied. */ /* ---- topic grid (guides) ----------------------------------------------------- */ /* RF-TOPICS-ARE-A-GRID (8 September 2026). The topic row was a horizontal scroller on a phone, which is the pattern Alex called broken: the last topics sat off-screen behind an edge fade. Seven topics are a grid — two columns on a phone, four on a desktop — so every one of them is visible at once and there is no gesture to discover. */ /* RF-SEVEN-INTO-FOUR (21 September 2026). Seven topics in a fixed four-track grid is 4 + 3, and the fourth cell of the second row is a hole the size of a card — photographed and circled by the owner. A fixed track count only ever looks right when the item count divides by it, and this one cannot: the topics are the topics. auto-fit was the obvious fix and it is the WRONG one — measured at the owner's own 2560px: repeat(auto-fit,minmax(215px,1fr)) produced FIVE tracks, so seven items became 5 + 2 and the hole grew from one cell to three. Flex wrap with a 25% basis is what actually closes it: the first row takes four, the last row's three grow to share the full width, and the row ends flush with the grid's right edge. Measured after the change: last row right edge 1842, container right edge 1842, hole 0px. */ .cp-topicgrid{display:flex;flex-wrap:wrap;gap:var(--sp-3)} /* min-width has to come after the old `>*{min-width:0}` below, or that wins and the basis collapses. Both are stated here so the pair cannot drift apart. */ .cp-topicgrid>*{flex:1 1 calc(25% - var(--sp-3));min-width:200px} @media (max-width:980px){.cp-topicgrid>*{flex-basis:calc(33.333% - var(--sp-3))}} @media (max-width:760px){.cp-topicgrid>*{flex-basis:calc(50% - var(--sp-3));min-width:0}} .cp-topicgrid .cp-card{padding:var(--sp-4)} /* ---- the route that runs through the steps ----------------------------------- */ /* RF-ROUTE-CONNECTS-THE-STEPS: the one place a line is allowed on these pages, because it says something — these three cards are a sequence, and the road runs through them in the order you drive it. Behind the cards, one hairline dash, no animation, gone the moment the cards stop being a row. */ .cp-steps{position:relative} @media (min-width:861px){ .cp-steps::before{ /* 36px is the measured centre of the distance marker inside a step card at 1280 (card padding 24 + half the 24px plate), so the road meets the posts rather than passing above them. */ content:"";position:absolute;left:8%;right:8%;top:36px;height:2px;z-index:0; background:repeating-linear-gradient(90deg,var(--atlas-line-2) 0 10px,transparent 10px 20px); } .cp-steps>*{position:relative;z-index:1} } /* ============================================================================ RF-MOBILE-LAYER (6 September 2026) — the LAST word on phones. WHY THIS BLOCK EXISTS, and why it is at the end of the file. Three of the bugs in today's iPhone screenshots had the same cause, and it was not the pixel values. A media query does not raise specificity: a @media (max-width:640px) rule loses to an equally specific rule written LATER in the file, whatever the viewport. That is exactly what happened to the pin cards - the mobile rule said flex-direction:row, thirty lines below it the base rule said column, and the base rule won on every phone. The card then wrapped its description into a second flex COLUMN, which is why the text sat outside the card and past the right edge of the screen. So every phone override now lives here, after every base rule, in one place a person can read end to end. Adding a component means adding its mobile rules HERE, not next to its desktop ones. That is the rule this file exists to make impossible to get wrong. The second shared cause was inherited desktop sizing that nothing ever reset: the pin-card list is a
      , and its 40px browser list-padding survived every restyle, so the whole row started 40px in and ran 40px past its gutter. Lists used as layout are reset here for good. ========================================================================= */ /* -- lists used as layout carry no list padding, at any width --------------- */ .cp-legend,.cp-chips,.cp-start,.gd-start,.rf-world-legend{padding-left:0;padding-right:0;list-style:none} /* RF-CHIPS-THAT-WRAP (8 September 2026). The topic filter used the .cp-rail scroller: eight chips on one nowrap line, 511px of them inside a 375px phone, with a fade and a chevron to explain that the rest were off-screen. A row that has to explain itself is the wrong row. Eight short words wrap into three lines and every one of them is readable without a gesture, so they wrap. .cp-rail stays in this sheet for anything that genuinely cannot wrap; the guides hub no longer needs it. */ .cp-chipwrap{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4);min-width:0} @media (max-width:767px){ /* the wrapping chip row keeps wrapping — it must not inherit the rail */ .cp-chipwrap{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0} .cp-chipwrap>*{white-space:nowrap;flex:0 0 auto} /* a distance marker keeps its plate but not its desktop breathing room */ .cp-num{margin-bottom:var(--sp-2)} /* the section marker sits tight to its heading on a phone */ .cp-eyebrow{gap:var(--sp-2)} .cp-eyebrow::before{width:20px} /* Anything that holds text may be narrower than the text's longest word; the text wraps. This is the counterpart of RF-MIN-WIDTH-ZERO for flex. */ .cp-legend>li>*,.cp-card>*,.cp-panel ol li>*{min-width:0;max-width:100%} /* ---- pin status cards: label, icon, title, description; one card per row */ .cp-legend{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-left:0;margin-right:0} .cp-legend>li{ display:grid; grid-template-columns:auto minmax(0,1fr); /* icon, then everything else */ grid-template-areas:"tag tag" "pin txt"; align-items:start;column-gap:12px;row-gap:6px; flex-direction:row;flex-wrap:nowrap; /* beats the base column rule */ padding:13px 14px 14px;width:auto;max-width:100%; } .cp-legend>li .cp-tag{grid-area:tag} .cp-legend>li .rf-key3-pin{grid-area:pin;margin-top:1px} .cp-legend>li .rf-key3-txt{grid-area:txt;min-width:0;overflow-wrap:anywhere} .cp-legend>li .rf-key3-txt b{display:block;margin-bottom:2px} /* ---- descriptive text never refuses to wrap ---------------------------- */ .cp-legend .rf-key3-txt,.cp-card p,.cp-panel ol li,.cp-worldmap .note,.cp-lede{white-space:normal} /* ---- the category rail: a scroller that says it is one ------------------ */ .cp-chips{ overflow-x:auto;overflow-y:hidden; /* -y hidden: no stray vertical scroll */ -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scroll-padding-inline:22px; flex-wrap:nowrap;min-width:0; /* The bleed follows the page gutter, so at 16px (under 360px) the rail ends at the screen edge rather than 6px past it - measured at 320. */ margin-left:calc(-1 * var(--rf-gutter,22px));margin-right:calc(-1 * var(--rf-gutter,22px)); padding:2px var(--rf-gutter,22px) 6px;scrollbar-width:none; } .cp-chips::-webkit-scrollbar{display:none} .cp-chips>*{scroll-snap-align:start;flex:0 0 auto} /* pills never shrink their text */ .cp-chips>*{white-space:nowrap} /* The chevron is shown on a phone too — a fade alone is a hint, a chevron is a statement. It sits over the fade at the true edge of the rail, is 44px tall, and disappears the moment there is nothing more that way. */ .cp-rail{margin-left:0;margin-right:0} .cp-rail-btn{display:none;width:30px;height:44px;font-size:20px; background:linear-gradient(90deg,transparent,var(--bg,#0b1220) 45%);color:var(--ink-2)} .cp-rail-btn.prev{left:0;background:linear-gradient(270deg,transparent,var(--bg,#0b1220) 45%)} .cp-rail-btn.next{right:0} .cp-rail[data-more~="left"] .cp-rail-btn.prev, .cp-rail[data-more~="right"] .cp-rail-btn.next{display:flex} .cp-rail::before,.cp-rail::after{width:34px} /* ---- one pill standard (RF-ONE-PILL) ----------------------------------- */ /* The topic chips and the job tabs are the same control in two places, so they are the same size: 44px, 14px, 999px, 8px gap, from the tokens. */ .gd-chip,.cp-tabs .htu-tab{ min-height:var(--rf-pill-h,44px); padding:0 var(--rf-pill-pad-x,16px); border-radius:var(--rf-pill-radius,999px); font-size:var(--rf-pill-fs,14px); } .cp-chips,.cp-tabs{gap:var(--rf-pill-gap,8px)} /* ---- the search field is fluid, and stays fluid ------------------------ */ .cp-search{width:100%;max-width:100%;min-width:0;box-sizing:border-box} .cp-search input{min-width:0;width:100%} /* ---- one gutter for the whole page ------------------------------------- */ .wrap{padding-left:var(--rf-gutter,22px);padding-right:var(--rf-gutter,22px)} /* ---- room at the foot of the page for the floating controls ------------ */ .site-footer{padding-bottom:var(--rf-content-bottom,96px)} } @media (max-width:359px){ :root{--rf-gutter:16px} .cp-legend>li{grid-template-columns:auto minmax(0,1fr);column-gap:10px;padding:12px} } /* =========================================================================== RF-DIRECTORY-IS-NOT-A-GALLERY (20 September 2026) — /guides, "Everything, by topic". MEASURED on production at 1440x900, before touching anything: /guides 9,307px 10.3 screens "All guides by topic" 5,092px ← 55% of the page, one section cards on the page 76 The cause was not the number of guides. It was that the DIRECTORY used the same component as the SHOWCASE. `.gd-rows` had no CSS of its own, so each of the 53 entries fell back to a full-width `.cp-card.cp-guide`: card chrome, 20px of padding, a title, a two-line description and a date — the treatment that is correct for the three Featured guides and wrong fifty-three times in a row. A directory answers "which one do I want", and for that a person needs the title, the topic and the length. The abstract is what they came to the guide FOR; repeating it 53 times is what turned a list into a wall. So the showcase keeps its cards and this section becomes a list: multi-column where there is room, one line of meta, the description clamped to a single line. Nothing is deleted — the text stays in the DOM and in the accessibility tree, clamped rather than display:none, because a crawler and a screen reader should still find it (GUIDELINES: never hide content from the page that the page is claiming to have). Scoped to `.gd-group` on purpose: Featured, Start here and Latest are untouched, which is the point — the page needs the contrast between a few guides shown properly and fifty listed briefly. */ .gd-rows{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); column-gap:var(--sp-5); } .gd-group .gd-rows .cp-guide{ background:none; border:0; box-shadow:none; border-radius:0; padding:11px 0; gap:2px; border-bottom:1px solid var(--atlas-line); } .gd-group .gd-rows .cp-guide:hover{background:none} .gd-group .gd-rows .gd-row-h{font-size:var(--t-small); font-weight:650; line-height:1.34} .gd-group .gd-rows .gd-row-p{-webkit-line-clamp:1; font-size:var(--t-meta); color:var(--ink-3)} /* The date was pushed to the bottom of a tall card by margin-top:auto. In a row there is no bottom to push it to, and it belongs next to the rest of the meta rather than on a line of its own. */ .gd-group .gd-rows .cp-meta.foot{margin-top:0; padding-top:0; font-size:var(--t-meta)} @media (max-width:640px){ .gd-rows{grid-template-columns:1fr} .gd-group .gd-rows .cp-guide{padding:10px 0} }