/* M4 Traffic — responsive, mobile-first stylesheet (2026 rebuild) Replaces: styles/main.css, mainslider, clock.css, cookiecuttr.css cruft. Single responsive column. No framework, no jQuery. */ :root{ --brand:#0058a8; /* UK motorway-sign blue */ --brand-dark:#003f7d; --accent:#ffd200; /* sign yellow */ --ink:#1a1a1a; --muted:#5b6670; --line:#e2e6e9; --bg:#ffffff; --bg-soft:#f5f7f8; --maxw:1000px; /* 17/08/2026 (JC), copied from TNE 21/08/2026: ONE VALUE controls the CAL-RTN news column width. M1 never had it - which is why M1's filter bar, green count band and pager sat hard LEFT while the cards sat centred. */ --newsw:100%; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:17px; line-height:1.6; color:var(--ink); background:var(--bg-soft); } img{max-width:100%;height:auto} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px} /* ---------- Header ---------- */ .site-header{background:var(--bg);border-bottom:1px solid var(--line)} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px} .site-header img.logo{height:44px;width:auto} /* TOP MESSAGE AS TEXT, not an image (JC, 21/08/2026). Anchor text on every page pointing home, no layout shift while an image loads, crisp at any zoom. THE IDENTIFYING WORD IS BOLD - the estate rule, taken from TNE. Sized to TNE. */ .site-header .logo-text{color:var(--ink);text-decoration:none;font-size:1.15rem; line-height:1.2;white-space:nowrap} .site-header .logo-text b{color:var(--brand);font-weight:800} .site-header .logo-text span{color:var(--muted);font-weight:600} .site-header .logo-text:hover{text-decoration:none} .site-header .logo-text:hover b{text-decoration:underline} .tagline{color:var(--muted);font-size:.9rem;margin:0} @media (max-width:520px){.tagline{display:none}} /* ---------- Nav (sticky top menu) ---------- */ .site-nav{background:var(--brand);position:sticky;top:0;z-index:200;box-shadow:0 2px 6px rgba(0,0,0,.14)} .site-nav ul{max-width:var(--maxw);margin:0 auto;padding:0 8px;list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end} .site-nav li{margin:0} .site-nav a{display:block;color:#fff;padding:13px 18px;font-weight:600;font-size:1rem;text-decoration:none} .site-nav a:hover,.site-nav a[aria-current="page"]{background:var(--brand-dark);text-decoration:none} .nav-short{display:none} @media (max-width:560px){ /* one line, short labels, evenly spread (fits 5 items) */ .nav-full{display:none} .nav-short{display:inline} .site-nav ul{padding:0;flex-wrap:nowrap;justify-content:space-between} .site-nav a{padding:11px 6px;font-size:.8rem;white-space:nowrap} } @media (max-width:360px){ .site-nav a{padding:10px 4px;font-size:.72rem} } /* ---------- Hero ---------- */ .hero{position:relative;background:#00305c} .hero picture{display:block} /* Brand crop box, copied from TNE 21/08/2026. Centre-anchored - nothing is baked into the photo any more, so there is no plate to protect at the bottom. */ .hero img{display:block;width:100%;aspect-ratio:16/5;height:auto; max-height:min(300px,42vh);object-fit:cover;object-position:center center} @media (max-width:520px){.hero img{aspect-ratio:16/7}} .hero .hero-cap{position:absolute;left:0;bottom:0;right:0;padding:14px 16px; background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));color:#fff} .hero .hero-cap h1{margin:0;font-size:1.5rem;text-shadow:0 1px 3px rgba(0,0,0,.5)} @media (max-width:520px){.hero .hero-cap h1{font-size:1.15rem}} /* ---------- Main ---------- */ main{background:var(--bg)} main .wrap{padding-top:22px;padding-bottom:32px} main h1{font-size:1.7rem;line-height:1.25;margin:.2em 0 .5em} main h2{font-size:1.3rem;margin:1.4em 0 .4em} main h3{font-size:1.12rem;margin:1.2em 0 .3em} main h4{font-size:1rem;margin:1.1em 0 .2em} main p{margin:0 0 1em} main ul{margin:0 0 1em;padding-left:1.3em} main li{margin:.2em 0} /* body images: give them breathing room so text/headings never touch them */ main img{margin:0 14px 12px 0;vertical-align:middle} main h1 img,main h2 img,main h3 img{vertical-align:middle} /* neutralise old float/inline layout hacks carried in legacy content. ⭐ IDENTICAL TO M1. A per-site float rule was added earlier today for the UKTrafficNews screenshot; JC then had that image removed, so the divergence went with it. The episode is recorded in the bundle, not left in a live stylesheet. LEAVE NO PER-SITE REMNANTS. */ main img[style*="float"]{float:none !important;display:block;margin:0 0 14px} main iframe{max-width:100%} .m1-sign{width:70px;height:35px} /* Related box (folded-in former sidebar) */ .related{margin-top:28px;padding:16px 18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px} .related h3:first-child{margin-top:0} /* ---------- Ad slots (TEST placeholders — fixed, tidy, never dominate) ---------- */ .ad-slot{margin:18px auto;height:90px;max-width:728px; display:flex;align-items:center;justify-content:center; background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f2f2f2 10px,#f2f2f2 20px); border:1px dashed #cfd6da;border-radius:8px} .ad-slot__label{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#9aa4ac} /* when real AdSense goes live: collapse any unfilled unit so no empty gap */ ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important} /* ---------- News (RTN engine injects between markers) ---------- */ #column_l_trafficnews{margin:14px 0} #column_l_trafficnews > div > *{margin-left:auto !important;margin-right:auto !important} .warnbar{display:block;max-width:100%;height:auto;margin:8px auto} /* ---------- Footer ---------- */ .site-footer{background:var(--brand-dark);color:#cfe0f2;font-size:.92rem} .site-footer .wrap{padding-top:24px;padding-bottom:28px;text-align:center} .site-footer a{color:#fff} .site-footer nav{margin-bottom:12px;line-height:2} .site-footer .social img{height:36px;width:auto;margin-right:6px;vertical-align:middle} .site-footer .fine{color:#9db8d6;font-size:.85rem;margin-top:10px} /* ---------- Vertical M1 junction map ---------- */ .m1map{max-width:620px;margin:20px auto;font-size:.98rem} .m1map__end{text-align:center;font-weight:600;margin:0;padding:12px;border-radius:8px; background:var(--brand);color:#fff} .m1map__end--bottom{margin-top:0} .m1map__dir{display:inline-block;font-weight:800;letter-spacing:.06em;margin-right:8px} .m1map__list{list-style:none;margin:0;padding:0 0 0 4px;position:relative} /* the motorway line */ .m1map__list::before{content:"";position:absolute;left:31px;top:0;bottom:0;width:6px; background:var(--brand);border-radius:3px} .m1map__jn{position:relative;display:flex;align-items:center;gap:12px; padding:9px 0 9px 0;min-height:44px} .m1map__badge{position:relative;z-index:1;flex:0 0 auto;width:46px;height:32px; display:flex;align-items:center;justify-content:center; background:var(--brand);color:#fff;font-weight:700;font-size:.82rem; border:2px solid #fff;border-radius:6px;box-shadow:0 0 0 2px var(--brand)} .m1map__info{display:flex;flex-direction:column;line-height:1.3} .m1map__road{font-weight:700;color:var(--brand-dark)} .m1map__place{color:var(--muted);font-size:.9rem} .m1map__note{margin:14px 0 0;font-size:.85rem;color:var(--muted);text-align:center} /* ---------- Scrolling news ticker (blue band under hero) ---------- */ .ticker{background:var(--brand);color:#fff;overflow:hidden;white-space:nowrap; border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)} .ticker__track{display:inline-flex;will-change:transform; animation:ticker 28s linear infinite} .ticker__item{padding:10px 45px;font-weight:600;font-size:.98rem;line-height:1.3} .ticker:hover .ticker__track{animation-play-state:paused} @keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* page-title M1 sign (sits inline next to the h1) */ .pagesign{height:40px;width:auto;vertical-align:middle;margin:0 12px 4px 0 !important;float:none !important;display:inline !important} /* footer FREE line */ .site-footer .freeline{font-weight:700;color:#fff;margin:0 0 8px} /* ############################################################################ TRANSPLANTED FROM TNE, 21/08/2026 - BRAND LAYOUT, NOT PER-SITE DESIGN. Copied from CAL-TNE-SITE-SRC/tne-2026-08-19/assets/site.css with TNE's own comments intact. Line ranges are recorded above each block. ############################################################################ */ /* --- from TNE site.css lines 258-316 --- */ /* ---------- Live status strip (written by CAL-RTN into the marker) ---------- */ .cs{background:var(--brand);border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)} .cs__inner{max-width:var(--maxw);margin:0 auto;padding:0 8px;display:flex;align-items:stretch;gap:1px} .cs__item{flex:1 1 0;display:flex;align-items:center;gap:12px;padding:11px 14px;min-width:0; color:#fff;text-decoration:none} .cs__item+.cs__item{box-shadow:inset 1px 0 0 rgba(255,255,255,.22)} .cs__item:hover{background:rgba(0,0,0,.18);text-decoration:none} .cs__num{font-size:2.1rem;line-height:1;font-weight:800;flex:none;letter-spacing:-.02em} .cs__lab{display:block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; opacity:.9;line-height:1.3} .cs__sub{display:block;font-size:.88rem;line-height:1.3;opacity:.95} .cs--bad .cs__num{color:#ff8f8f} .cs--warn .cs__num{color:var(--accent)} .cs--ok .cs__num,.cs--ok .cs__tick{color:#7ee2a8} .cs__tick{font-size:1.9rem;line-height:1;flex:none} .cs__time{max-width:var(--maxw);margin:0 auto;padding:0 22px 8px;font-size:.72rem; color:rgba(255,255,255,.75);text-align:center} @media (max-width:760px){ .cs__inner{flex-direction:column;gap:0;padding:0} .cs__item{padding:9px 14px} .cs__item+.cs__item{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} .cs__num{font-size:1.8rem} .cs__time{padding:2px 14px 8px} } /* Interchange rows read "M6 MOTORWAY" — bigger, greener, harder to miss. They break the junction rail up visually AND give a stronger, more descriptive anchor for the cross-site links. */ .jmap__jn--connect .jmap__road{font-size:1.12rem;font-weight:800;letter-spacing:.02em;color:#00703c} .jmap__jn--connect .jmap__road a{color:#00703c;text-decoration:underline;text-underline-offset:3px} .jmap__jn--connect .jmap__road a:hover{color:#00512b} .jmap__jn--connect{background:#f2f9f4;border-radius:6px} /* Count-free state: shown until CAL-RTN can supply real counts. Same three doorways, same look, no numbers — because a placeholder number would be a fabricated number. A chevron replaces the count so the panel still has a visual anchor on the left. */ .cs--none{gap:10px} .cs--none .cs__wrap{min-width:0} .cs--none:before{content:"\203A";font-size:1.9rem;line-height:1;font-weight:800; color:var(--accent);flex:none;opacity:.9} .cs--none .cs__lab{font-size:.72rem} .cs--none .cs__sub{font-size:.92rem} /* ---------- Quick-links variant of the status band ---------- Used until CAL-RTN can write real counts into the RTNSTATUSSTRIP marker. Deliberately reads as NAVIGATION, not as a status readout: icons, fuller labels, a descriptive second line. An empty-looking status bar reads as broken; a quick-links bar is useful whether or not there is news today. When the engine supplies counts, .cs--links is dropped and the count-led version (large number + label) takes over with no other change. */ .cs--links .cs__item{gap:13px;padding:12px 16px;align-items:center} .cs--links .cs__ico{width:26px;height:26px;flex:none;fill:var(--accent);opacity:.95} .cs--links .cs__lab{font-size:.82rem;letter-spacing:.05em;margin-bottom:1px} .cs--links .cs__sub{font-size:.9rem;opacity:.92} .cs--links .cs__item:hover{background:rgba(0,0,0,.2)} .cs--links .cs__item:hover .cs__ico{opacity:1} @media (max-width:760px){ .cs--links .cs__item{padding:11px 14px} .cs--links .cs__ico{width:22px;height:22px} } /* --- from TNE site.css lines 461-556 --- */ /* ============================================================================ LIVE NEWS TICKER (.nt) — ABOVE THE MENU (15/08/2026, JC spec) A scrolling headline strip between the site header and the main nav: three latest incidents, three active roadworks, three planned. Darker blue than the nav so it reads as a separate live band rather than part of the menu. ⚠ Every entry carries its REPORTED TIME IN FRONT. An undated headline implies "now", which we cannot know. ⚠ Renders nothing at all when there is no news — see NewsTicker.cs. ============================================================================ */ .nt{ background:#00305c; /* a shade darker than --brand (#0058a8) */ color:#fff; overflow:hidden; white-space:nowrap; border-bottom:2px solid var(--accent); } .nt__track{display:inline-flex;will-change:transform;animation:ntscroll 70s linear infinite} .nt:hover .nt__track, .nt:focus-within .nt__track{animation-play-state:paused} @keyframes ntscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .nt__item{display:inline-flex;align-items:baseline;gap:.5rem; padding:8px 26px;font-size:.9rem;line-height:1.35; border-right:1px solid rgba(255,255,255,.18)} /* ⭐ 17/08/2026 (JC): TWO PILLS, THEN THE WORDS, THEN THE TIME. The strip is narrow. One long tag ("LIVE Roadworks") ate the width the summary needs, so LIVE and the CATEGORY are now separate pills: [ LIVE ] [ Incident ] summary text … 14:32 LIVE is one fixed red so the eye locks onto it without reading; the category pill carries its own colour, matching the cards and section headers. ⚠ Two different reds sitting side by side would read as one blob, so the INCIDENT pill is inverted (white pill, red text) against the solid red LIVE. */ .nt__live{flex:0 0 auto;font-size:.7rem;font-weight:800;letter-spacing:.08em; text-transform:uppercase;padding:2px 7px;border-radius:3px; background:#d62828;color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.35) inset} /* Category pill: colour carries the state, exactly as on the map template. */ .nt__tag{flex:0 0 auto;font-size:.7rem;font-weight:700;letter-spacing:.04em; text-transform:uppercase;padding:2px 7px;border-radius:3px;color:#fff} .nt__item--inc .nt__tag{background:#fff;color:#a51f1f} /* incident — inverted red */ .nt__item--act .nt__tag{background:#f0a500;color:#241a05} /* roadworks — amber */ .nt__item--pln .nt__tag{background:#2d6ca8;color:#fff} /* planned — blue */ /* The reported time — now the LAST thing in every entry. It is what proves the headline is current, so it stays prominent, but it no longer delays the words. */ .nt__time{font-weight:700;font-variant-numeric:tabular-nums;color:#ffd54a;flex:0 0 auto} .nt__time::before{content:"·";color:rgba(255,255,255,.45);margin-right:.5rem} .nt__txt{color:#fff;font-weight:500} .nt__item--all{border-right:0} .nt__item--all a{color:#ffd54a;font-weight:700;text-decoration:underline} /* Mobile: mobile is ~77% of revenue, so the strip must not shout. Slightly smaller, tighter, and it still scrolls. */ @media (max-width:560px){ .nt__item{padding:7px 16px;font-size:.82rem;gap:.4rem} .nt__tag,.nt__live{font-size:.62rem;padding:1px 5px} } /* Anyone who has asked for less motion gets a static, readable strip instead of a moving one — the headlines still show, they simply do not scroll. */ /* ⭐ CHANGED 17/08/2026 (JC): THE NEWS TICKER NOW SCROLLS ON EVERY DEVICE AND BROWSER. It used to sit inside @media (prefers-reduced-motion:reduce) with animation:none. 🛑 WHY THAT WAS WRONG - not the accessibility intent, the INCONSISTENCY: the FOOTER marketing strip (.ticker__track) was never gated, so on any machine with Windows "Animation effects" off, the UNIMPORTANT strip slid and the LIVE NEWS strip froze. Exactly backwards, and it made the page look broken while telling drivers it was live. JC spotted it by asking why one moved and not the other. Measured 17/08: no-preference -> translateX -63 to -292 in 4s; reduce -> animation-name:none, no movement at all. ⚠ SAME SETTING, SAME SITE, EARLIER LESSON: see the .cone note above - that setting is common on Windows and had already made the footer cones vanish. ☐ OPEN, JC's call: content that auto-moves for more than 5 seconds should have a way to stop it. It pauses on HOVER, which does nothing on a phone - and mobile is ~77% of revenue. A visible pause control would make this more accessible than the old gate ever was, because the gate only helped people who had set the flag and left everyone else with motion they could not stop. NOT built - flagged once. */ @media (prefers-reduced-motion:reduce){ /* .nt__track deliberately NOT listed here any more - see the note above. */ .ticker__track,.nt__track{animation-duration:120s} /* gentler, not stopped */ } /* Ticker now sits between the hero and the status band (JC, 15/08). It no longer butts against the nav, so the top border returns and the bottom one goes — the status band immediately below supplies its own top rule. */ .nt{border-top:2px solid var(--accent);border-bottom:0} /* Site-news strip — RELOCATED 15/08/2026 (JC) to sit between the body and the footer, and recoloured to match the live news ticker. Two scrolling strips in one eyeful competed; separated, each has its own job: · .nt (under the hero) = LIVE traffic headlines · .ticker (above footer) = OUR site messages Same darker blue as .nt, keeping the yellow rules top and bottom. */ .ticker{background:#00305c; border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)} /* --- from TNE site.css lines 558-584 --- */ /* ============================================================================ NEWS COLUMN — FILTER BAR / COUNT / PAGER ALIGNMENT (17/08/2026, JC) ---------------------------------------------------------------------------- ⚠ WHY THIS OVERRIDE EXISTS, AND WHY IT NEEDS `body` IN FRONT. CalNews writes its own stylesheet INTO the page, scoped `#calnews .cn-…`. Two consequences, both measured on the live page on 17/08/2026: 1. An ID selector beats a plain class, so the rules above in this file never applied to these three boxes at all. 2. That inline block sets `margin:14px 0`, which resets left/right margin to ZERO — killing the `margin:auto` centring outright. Result: filter bar, green count band and pager all sat hard LEFT at x=156 while the news cards sat centred at x=228 — the misalignment JC spotted. `body #calnews …` outranks it cleanly without touching the generator. ⭐ max-width is in rem, NOT ch: `ch` resolves against each element's OWN font-size, and .cn-count is set at .95rem — which is exactly why it was 17px narrower than everything else even before the margin bug. ⭐ VERIFIED by rendering the real page: desktop 1280px → all four edges land at x=228 / right=964 (cards 228.3 / 963.7). Phone 390px → x=16, w=358, all four identical. Mobile was ALREADY correct; this only changes desktop. ☐ PROPER FIX belongs in FilterAssets.cs at the next app version; this override then becomes redundant and should be deleted, not left to rot. ============================================================================ */ body #calnews .cn-filters, body #calnews .cn-count, body #calnews .cn-pager, body #calnews .cn-nomatch{margin-left:auto;margin-right:auto;max-width:var(--newsw)} /* --- from TNE site.css lines 617-666 --- */ /* ============================================================================ MAIN FOOTER — CAL BRAND FOOTER (approved 17/08/2026, JC) ---------------------------------------------------------------------------- Category links in VERTICAL COLUMNS, a road cone each side, the network statement and an auto-updating copyright year. ⭐ WHY A GRID WITH auto-fit: TNE is a HUB heading for hundreds of pages. Adding a fifth section later needs NO CSS CHANGE - it just becomes another column, and collapses to one-per-row on a phone. ⭐ align-items:start so unequal-length columns line up on their HEADINGS rather than floating to their middles. ⚠ This is BRAND design, not per-site design (durable rule, 15/08). When it rolls to M5/M6/M60 and then the earners, only the link lists change. ============================================================================ */ .ft{background:#00305c;color:#cfe0f2;position:relative;overflow:hidden; border-top:3px solid var(--accent)} .ft__wrap{max-width:var(--maxw);margin:0 auto;padding:26px 20px 22px;position:relative;z-index:2} .ft__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:22px 26px;text-align:left;align-items:start} .ft__h{font-size:.72rem;font-weight:800;letter-spacing:.10em;text-transform:uppercase; color:#ffd54a;margin:0 0 9px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.22)} .ft__cols ul{list-style:none;margin:0;padding:0} .ft__cols li{margin:0 0 6px;line-height:1.45} .ft__cols a{color:#fff;text-decoration:none;font-size:.9rem; display:inline-block;padding:2px 0;border-bottom:1px solid transparent} .ft__cols a:hover,.ft__cols a:focus{border-bottom-color:#ffd54a;text-decoration:none} /* STATEMENT + COPYRIGHT - centred, and deliberately NOT LINKS. ⭐ JC's rule of 15/08: "statement in the site-wide footer (editorial, not linking); the LIST OF SITES on ONE page only." An identical cross-domain link in the footer of all 31 pages reads as a link scheme. The hub is linked from About Us instead. */ .ft__rule{border:0;border-top:1px solid rgba(255,255,255,.22);margin:20px 0 14px} .ft__free{text-align:center;margin:0 0 2px;font-size:.85rem;color:#9db8d6} .ft__stmt{text-align:center;margin:0 0 6px;font-size:.95rem;color:#fff;font-weight:600} .ft__copy{text-align:center;margin:0;font-size:.85rem;color:#9db8d6} .ft__nh{text-align:center;margin:8px 0 0;font-size:.8rem;color:#9db8d6} .ft a{color:#fff} /* CONES - bottom corners. Hidden under 700px so they never crowd the links. ⚠ Do NOT gate these on prefers-reduced-motion: the SVG already handles it correctly by rendering the beacon PERMANENTLY LIT rather than hiding it. */ .ft .cone{position:absolute;bottom:8px;z-index:1;pointer-events:none;display:block; height:104px;width:auto} .ft .cone--l{left:16px} .ft .cone--r{right:16px} @media (max-width:1080px){.ft .cone{height:78px}} @media (max-width:820px){.ft__wrap{padding-left:16px;padding-right:16px}} @media (max-width:700px){.ft .cone{display:none}} /* ############################################################################ HERO FIX B - the brand plate overlaid in CSS, never baked into the photo. 22%/200px, NOT TNE's 30%/290px: M1's plate is 3.3:1 where TNE's is 5.5:1. No ::before - M1 carries no regions map (JC, 21/08/2026). ############################################################################ */ .hero::after{ content:""; position:absolute; z-index:2; pointer-events:none; background-repeat:no-repeat; background-size:contain; top:10px; right:14px; width:min(30%,260px); aspect-ratio:640/116; /* M4 plate is 640x116 */ background-image:url(/images/m4-plate.webp); background-position:right top; } .hero .hero-cap{z-index:3} @media (max-width:520px){.hero::after{width:min(46%,190px); top:7px; right:8px}} @media (max-width:360px){.hero::after{width:min(52%,160px)}} /* Sister-site links in the site-message strip (JC, 21/08/2026). */ .ticker__item a{color:#ffd54a;font-weight:700;text-decoration:underline} .ticker__item a:hover{color:#fff} /* ============================================================================ ROAD BADGE — the blue motorway-sign block that sits in front of a page heading. JC, 23/08/2026: "the blue rectangle is a quick visual motorway-sign type image ... immediately tunes to the visitor's brain 'yes it looks like this is a motorway site' - and hence reduces bounce rate." Same argument as the hero: DENSITY CARRIES SCOPE. Judged on what it signals in one second, not on legibility. ⭐ TEXT, NOT AN IMAGE. It renders identically at any size, needs no file, costs no request, and the road number comes from the markup - so one rule serves every site in the estate and there is no per-road GIF to forget to make. ⚠ RECONSTRUCTED FROM A SCREENSHOT OF M5, not copied from M5's stylesheet. The blue is sampled exactly (#0058a8, which is already --brand). If M5's own CSS is to hand, diff it against this and take M5's numbers - matching the estate matters more than my reconstruction being close. ============================================================================ */ .roadbadge{ /* 19/09/2026 (JC): brand style - red bar left, navy field. Exact icon palette, so the badge and the favicon are the same colours, not approximately. STILL TEXT and STILL OUTSIDE THE HEADING - the 23/08/2026 crawler fix stands. */ display:inline-block; vertical-align:middle; background:#1D4F7F; color:#F5F1F0; font-weight:800; font-size:.95em; line-height:1; letter-spacing:0; padding:.34em .55em .34em .34em; margin:0 .55em .12em 0; border:0; border-left:.34em solid #CB3420; border-radius:3px; box-shadow:none; } h1 .roadbadge,h2 .roadbadge{font-size:.8em} /* ⭐ THE BADGE SITS BESIDE THE HEADING, NOT INSIDE IT (23/08/2026). Measured, not assumed - this is what a crawler reads as the heading text: GIF inside the heading -> "M4 motorway sign M4 Roadworks" (alt text pollutes it) badge inside the heading -> "M4 M4 Roadworks" (road number twice) badge OUTSIDE it -> "M4 Roadworks" (clean) Identical to the eye, and the heading says exactly what it means. The badge is decoration and now sits in the markup as decoration. */ .pagehead{display:flex;align-items:center;gap:.55em;flex-wrap:nowrap} .pagehead h2{margin:.2em 0 .5em} .pagehead .roadbadge{margin:0;flex:none;font-size:1rem} @media (max-width:400px){.pagehead .roadbadge{font-size:.85rem}} /* ---------- ROAD FACT BOXES (shared with M25, 23/08/2026) ---------- */ /* ============================================================================ "THE ROAD IN NUMBERS" — replaces the four self-descriptive benefit boxes. JC, 23/08/2026: that space should put the home page in context about the M25, "not about it being a responsive website". Statistical, factual, quotable, sourced to DfT. ⭐ It also sits exactly where a reader has finished the news and is deciding whether to come back. Give them something about their road, not about us. ============================================================================ */ .roadfacts{margin:34px 0 10px;padding:26px 20px;background:var(--bg-soft); border:1px solid var(--line);border-radius:10px} .roadfacts h3{margin:0 0 .3em;font-size:1.35rem} .roadfacts__lede{margin:0 0 20px;color:var(--muted)} .roadfacts__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media (max-width:900px){.roadfacts__grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.roadfacts__grid{grid-template-columns:1fr;gap:14px}} .fact{background:var(--bg);border:1px solid var(--line);border-top:4px solid var(--brand); border-radius:8px;padding:14px 15px 16px} .fact__n{margin:0;font-size:2rem;line-height:1;font-weight:800;color:var(--brand);letter-spacing:-.02em} .fact__l{margin:.3em 0 .6em;font-size:.74rem;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--muted)} .fact__s{margin:0;font-size:.93rem;line-height:1.45} .roadfacts__why{margin:22px 0 0;padding:14px 16px;background:var(--bg); border-left:4px solid var(--accent);border-radius:0 6px 6px 0} .roadfacts__src{margin:14px 0 0;font-size:.82rem;color:var(--muted)} /* ⭐ The licence link is an ATTRIBUTION, not a recommendation. OGL v3.0 asks for a link to the licence "where possible", so it stays - but it is styled as a footnote rather than a call to action, and carries rel="license nofollow" so it does not pass authority off the biggest earner on all 24 pages. */ .roadfacts__src a{color:var(--muted);text-decoration:underline;text-underline-offset:2px} .roadfacts__src a:hover{color:var(--brand)} /* The "one thing worth knowing" explainer above the news feed on /dartford-crossing/. ⭐ It exists so the CalNews zero-state can say "the M25" without misleading anyone: the reader has already been told this stretch is the A282 and that this page shows those reports. JC's solution, 23/08 - explain it in the CONTENT rather than change the app tonight. */ .notebox{background:#eef4fb;border:1px solid #cfe0f2;border-left:5px solid var(--brand); border-radius:0 8px 8px 0;padding:15px 17px;margin:20px 0 26px} .notebox p{margin:0 0 .7em} .notebox p:last-child{margin:0} .notebox__k{font-size:.95rem;color:#33465c} /* Top-of-home lead-in (JC, 23/08). Its job is to earn the scroll: say who we are in one line, then hand the reader straight to the road's own numbers further down. */ .lead25{border-left:5px solid var(--accent);background:var(--bg-soft);border-radius:0 8px 8px 0; padding:14px 18px;margin:0 0 22px} .lead25__big{margin:0 0 .45em;font-size:1.12rem;line-height:1.4} .lead25__s{margin:0;color:#33465c;font-size:.97rem} /* v2.3.4 (11/09/2026): ported VERBATIM from m5traffic.co.uk/assets/site.css */ /* ---------- NAV FIT (29/08/2026) ---------- The mobile bar was authored for 5 items ("fits 5 items"). It now carries 6. Two changes, both additive: 1. 1px less horizontal padding buys 12px - the bar was 7px over at 390px. 2. overflow-x on the UL means the NAV may scroll, but the PAGE never does, however many items are added later. Measured, not assumed. */ @media (max-width:560px){ .site-nav ul{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .site-nav ul::-webkit-scrollbar{display:none} .site-nav a{padding:11px 5px} } /* ---------- NAV SPACING (v2.3.4, 10/09/2026) ---------- JC: "The top menus can be moved a bit closer together but enough gap to see they are separate". On phones the items are spread EVENLY (the dropdown block's justify-content:center put all the spare space at the two ends, and clipped both end items when the bar was full), with a little less padding, so the space shows BETWEEN items. Measured on all eight sites at 360/375/390/412: every item visible, page never wider than the screen. Appended LAST so it wins over the earlier phone rules. */ @media (max-width:420px){ .site-nav ul{justify-content:space-between} .site-nav a{padding:11px 3px;font-size:.76rem} } @media (max-width:370px){ .site-nav a{padding:11px 2px;font-size:.72rem} } /* v2.5.0 hand-placed ad zones. Heights reserved so an ad cannot shift the page (CLS). */ .adzone{margin:20px 0;text-align:center;overflow:hidden} .adzone--1{min-height:110px}.adzone--2{min-height:110px}.adzone--3{min-height:110px} @media (min-width:768px){.adzone--1,.adzone--2,.adzone--3{min-height:100px}} /* ============================================================ v2.5.0 FIX, 14/09/2026 - NAV DROPDOWN CSS WAS MISSING ON THIS SITE. The Signs sub-menu shipped on 13/09 with the markup but no rules to hide it, so it rendered as extra rows under the bar. The two regions below are PORTED VERBATIM from m3traffic.co.uk/assets/site.css. ============================================================ */ /* ---------- Dropdown sub-navigation ---------- PORTED VERBATIM FROM m25traffic.co.uk/assets/site.css, 29/08/2026. Includes JC's 15/08 phone rule: submenus are NOT rendered on phones, so the nav stays one line and the hero is not pushed down. */ .site-nav li.has-sub{position:relative} .site-nav li.has-sub>a::after{content:"";display:inline-block;margin-left:7px; border:5px solid transparent;border-top-color:currentColor;vertical-align:2px} .site-nav .subnav{position:absolute;top:100%;left:0;min-width:230px;margin:0;padding:6px 0; list-style:none;display:none;flex-direction:column;background:var(--brand-dark); box-shadow:0 6px 16px rgba(0,0,0,.28);border-radius:0 0 6px 6px;z-index:250} .site-nav li.has-sub:hover>.subnav, .site-nav li.has-sub:focus-within>.subnav{display:flex} .site-nav .subnav a{padding:11px 18px;font-weight:500;white-space:nowrap} .site-nav .subnav a:hover,.site-nav .subnav a:focus{background:#00305c;text-decoration:none} /* MOBILE: no hover, no floating panel. The group expands in flow so it is tappable and scannable - NOT one long endless dropdown. */ @media (max-width:760px){ .site-nav ul{justify-content:center} .site-nav li.has-sub{position:static} .site-nav .subnav{position:static;min-width:0;display:flex;flex-direction:row; flex-wrap:wrap;justify-content:center;background:var(--brand-dark); box-shadow:none;border-radius:0;width:100%;padding:2px 0} .site-nav .subnav a{padding:10px 12px;font-size:.92rem} .site-nav li.has-sub>a::after{display:none} } /* ============================================================================ MOBILE NAV - RECLAIM THE FIRST SCREEN (15/08/2026, JC: "menu on mobile takes up too much space") ROOT CAUSE: the <=760px block above sets .subnav{display:flex} with NO hover/focus condition, so on a phone every sub-link is PERMANENTLY EXPANDED inside the nav - a large share of the first screen, above the hero, before the visitor sees a word of traffic news. FIX: on phones the submenu is not rendered at all. "Services" and "Maps" stay normal links to their hub pages, which list everything - and the footer lists them too. Nothing becomes unreachable; the nav stops shouting. ⭐ This is the 10-second window: on mobile (~77% of revenue) the nav was spending it on itself. ============================================================================ */ @media (max-width:760px){ .site-nav .subnav{display:none !important} .site-nav li.has-sub:hover>.subnav, .site-nav li.has-sub:focus-within>.subnav{display:none !important} /* the caret implied a dropdown that no longer opens here */ .site-nav li.has-sub>a::after{display:none} /* tighter bar: less chrome, same tap target (>=44px high) */ .site-nav a{padding:12px 10px} } /* ---------- v2.5.0 FIX, 14/09/2026 ---------- JC: "on most sites if there is a large top menu the far right menu gets push of the page (some of the sub-menus)." The panel is absolutely positioned at left:0 of its parent, so the RIGHT-MOST parent opens off the right edge of the viewport. Anchor the last one to its own right edge. Desktop only: below 761px the panel is not rendered at all, so the rule would have nothing to act on. */ @media (min-width:761px){ .site-nav li.has-sub:last-child>.subnav{left:auto;right:0} /* AND THE SECOND HALF OF THE SAME COMPLAINT: "it does not sit neatly on one line". MEASURED on M6 at 1280px - seven items totalling 1,004px inside a 1,000px bar. FOUR PIXELS, and the whole "Traffic Statistics" item drops to a second row for it. Trimming 3px a side off the top-level links returns 42px across seven items, which clears it with room to spare and leaves every other site's bar looking the same. ⚠ Top-level only (>ul>li>a): the sub-menu panel keeps its 11px/18px, and the phone bar below 761px is untouched - tap targets stay >=44px. */ .site-nav>ul>li>a{padding-left:15px;padding-right:15px} /* ⭐ ONE ALIGNMENT ACROSS THE ESTATE (JC, 14/09/2026): "its our brand and consistency show attention to detail... it is better and easier to align the top menu centre same as mobile... as the items in the top menu is growing so central aligned might be better anyway." The bar was right-aligned on desktop and centred on phones - two rules for one thing, and a reader moving between our sites saw the menu move. CENTRE, everywhere, at every width. */ .site-nav>ul{justify-content:center} } /* ---------- v2.5.0 FIX2b, 14/09/2026 — THE MIDDLE WIDTHS ---------- JC, 02:45: "the M6 website, the main menu, it now goes on to two lines." MEASURED, not guessed. Item widths against the bar, all eight sites: M6 877px (wrapped below 895) · M25 893 (911) · M60 891 (907) TNE 846 (726) · M5 765 (679) · M1/M4 731 (671) · M3 904 (362) Three sites wrapped in the 761–911px band — a window that is not maximised, or a 1280 screen at 150% Windows scaling (= 853 CSS px). Shortening one label moves the cliff; it does not remove it, and the next label we add puts it back. So the bar gets a size down in that band instead. ⚠ Top-level only. The dropdown panel and the phone bar below 761px are untouched, so tap targets stay >= 44px. */ @media (min-width:900px) and (max-width:1023px){ .site-nav>ul>li>a{padding-left:10px;padding-right:10px;font-size:.94rem} } @media (min-width:761px) and (max-width:899px){ .site-nav>ul>li>a{padding-left:7px;padding-right:7px;font-size:.88rem;letter-spacing:-.01em} } /* ---------- 16/09/2026 NIGHT: M4 SERVICES, JUNCTIONS, MENU AND MAP ---------- */ .nav-tiny{display:none} @media (max-width:760px){ .site-nav a{padding:12px 3px} } @media (min-width:561px) and (max-width:760px){ .nav-full{display:none} .nav-short{display:inline} } @media (max-width:560px){ .site-nav a{padding:11px 3px} } @media (max-width:420px){ .site-nav a{padding:11px 2px} } @media (max-width:401px){ .nav-j .nav-short{display:none} .nav-j .nav-tiny{display:inline} } @media (max-width:352px){ .site-nav a{padding:10px 1px} } /* map: centre the route image and the junction list; service rows */ .m4route{display:block;max-width:100%;height:auto;margin:14px auto} .m1map__list{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto} .m1map__svc .m1map__badge{background:#f47738;box-shadow:0 0 0 2px #f47738} .m1map__svc .m1map__road{color:#b8500f} .m1map__svc .m1map__road a{color:#b8500f} .m1map__jn--connect .m1map__road a{color:#00703c;text-decoration:underline;text-underline-offset:3px} /* 19/09/2026 - brand tile in front of the body H1 (JC, option 2) */ h1 img.h1ico{height:40px;width:auto;vertical-align:middle;margin:0 12px 4px 0} @media (max-width:520px){h1 img.h1ico{height:32px;margin-right:9px}} /* ============ 19/09/2026 additions ============ */ /* ===== 19/09/2026 - BOOKMARK / ADD TO HOME SCREEN, header far right (JC) ===== */ .a2hs{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:3px 2px; color:var(--ink);text-align:right;font-family:inherit;flex:none} .a2hs img{width:38px;height:38px;border-radius:25%;display:block;flex:none; box-shadow:0 1px 3px rgba(0,0,0,.28)} .a2hs .t{display:block;line-height:1.15} .a2hs .t b{display:block;font-weight:800;font-size:.9rem;white-space:nowrap} .a2hs .t i{display:block;font-style:normal;font-weight:600;font-size:.71rem;color:var(--muted)} /* logo stepped down so "Bookmark M4" never wraps */ .site-header .logo-text{font-size:1.05rem} @media (max-width:520px){ .site-header .logo-text{font-size:.95rem} .a2hs img{width:34px;height:34px} .a2hs{gap:7px} .a2hs .t b{font-size:.82rem} .a2hs .t i{font-size:.65rem} } @media (max-width:380px){ .site-header .logo-text{font-size:.88rem} .a2hs .t i{max-width:8.4em;margin-left:auto} .a2hs img{width:32px;height:32px} } /* 19/09/2026 - photo that text wraps around. Float on desktop, full width on a phone. */ figure.wrapimg{margin:4px 0 16px 0;padding:0;max-width:100%} figure.wrapimg img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--line)} figure.wrapimg figcaption{margin:7px 2px 0;font-size:.83rem;line-height:1.45;color:var(--muted)} @media (min-width:761px){ figure.wrapimg{float:right;width:46%;max-width:460px;margin:4px 0 16px 26px} figure.wrapimg.left{float:left;margin:4px 26px 16px 0} } main h2,main h3{clear:both} /* 19/09/2026 FIX: .fuelbox and .knowbox are blocks that follow a floated figure.wrapimg. Clearing the heading INSIDE the box does not move the box - it must clear itself. Measured fault: the petrol-station photo overlapped the fuel box by 197px at 1280px and 192px at 820px. Below 761px the float goes full width, so it never showed on a phone. */ .fuelbox,.knowbox{clear:both} .fuelbox{background:#fff;border:1px solid var(--line);border-left:7px solid #CB3420;border-radius:7px; padding:18px 20px 16px;margin:26px 0} .fuelbox__h{margin:0 0 8px;font-size:1.18rem;line-height:1.25;color:var(--brand-dark)} .fuelbox__p{margin:0 0 10px;font-size:1rem;line-height:1.55} .fuelbox__steps{margin:0 0 12px;padding-left:22px;font-size:.97rem;line-height:1.6} .fuelbox__steps li{margin:0 0 3px} .fuelbox__cta{margin:14px 0 10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .fuelbox__btn{display:inline-block;background:#CB3420;color:#fff;font-weight:700;font-size:1.02rem; text-decoration:none;padding:12px 20px;border-radius:5px;line-height:1.2} .fuelbox__btn:hover{background:#a82a1a;text-decoration:none} .fuelbox__new{font-size:.82rem;color:var(--muted)} .fuelbox__note{margin:0;font-size:.8rem;line-height:1.45;color:var(--muted)} @media (max-width:520px){.fuelbox{padding:15px 15px 13px}.fuelbox__h{font-size:1.06rem} .fuelbox__btn{display:block;text-align:center}} /* what-we-know box: our own conclusion, distinct from the feed */ .knowbox{background:#fffdf5;border:1px solid #e8dfb8;border-left:7px solid #ffd200;border-radius:7px; padding:15px 17px;margin:22px 0;font-size:.98rem;line-height:1.55} .knowbox h2{margin:0 0 7px;font-size:1.08rem;color:var(--brand-dark)} .knowbox p{margin:0 0 8px}.knowbox p:last-child{margin:0} /* 19/09/2026 - two-up phone screenshots (UKPP how-to + result). Tall portrait shots, so they are capped and sit side by side on desktop, stacked below 560px. clear:both because they follow the floated figure.wrapimg. */ /* JC, 19/09/2026: ALWAYS stacked one above the other and centred, at every width. Side by side made a 450px-wide phone screenshot render at 250px - too small to read. */ .shots{clear:both;margin:18px 0 6px} .shots figure{margin:0 auto 22px;max-width:360px;text-align:center} .shots figure:last-child{margin-bottom:6px} .shots img{display:block;width:100%;height:auto;margin:0 auto; border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.16)} .shots figcaption{margin:.55rem auto 0;font-size:.84rem;line-height:1.5;color:var(--muted);text-align:left} /* ========================================================================== CAL SITE TEMPLATE — BLACK THEME · added 19/09/2026 for uktrafficnews.co.uk -------------------------------------------------------------------------- THIS BLOCK IS THE ONLY DIFFERENCE BETWEEN THIS FILE AND M4's site.css. A diff of the two files should return this block and NOTHING ELSE. Anything else in the diff is drift and should be investigated. THE RULE (JC, 19/09/2026): BLUE IS FOR MOTORWAY SIGNS. A site about one motorway is blue. A site that is not road-specific is black. 🛑 WHAT THIS BLOCK MUST NEVER TOUCH — the CalNews-served regions. Their colours are the same on every site in the estate and the app serves ONE colour set. Theming them would force the app to serve per-site colours. .nt, .nt__* live news ticker above the menu .calntc, .calntc__* notice + incident bars (styles ship inline) .cs--bad, .cs--warn status-band STATE colours anything written between markers No selector below names any of them. That is deliberate and load-bearing. ========================================================================== */ :root[data-theme="black"]{ --brand:#101418; /* near-black — bars and surfaces */ --brand-dark:#000000; /* true black — footer and hero */ --link:#cb3420; /* CAL brand red — the BSG constant */ --accent:#ffd200; /* sign yellow, unchanged */ } /* Links need their own colour: with --brand black they would read as body text. */ [data-theme="black"] a{color:var(--link)} [data-theme="black"] .site-header .logo-text b{color:var(--link)} /* Header / nav / hero / footer — the chrome, and the whole of the change. */ [data-theme="black"] .hero{background:#000} [data-theme="black"] .site-nav .subnav a:hover, [data-theme="black"] .site-nav .subnav a:focus{background:#2a2f36} [data-theme="black"] .site-footer{background:#000;color:#cfcfcf} [data-theme="black"] .site-footer .fine{color:#9a9a9a} [data-theme="black"] .ft{background:#000;color:#cfcfcf} [data-theme="black"] .ft__free, [data-theme="black"] .ft__copy, [data-theme="black"] .ft__nh{color:#9a9a9a} [data-theme="black"] .ft a{color:#fff} [data-theme="black"] .site-nav a{color:#fff} /* Note boxes and lead text — chrome, not news state. */ [data-theme="black"] .notebox{background:#f4f4f5;border-color:#dcdcde;border-left-color:var(--link)} [data-theme="black"] .notebox__k{color:#3a3a3d} [data-theme="black"] .lead25__s{color:#3a3a3d} /* ========================================================================== IMAGE PLACEMENT · JC's rule, 19/09/2026 — a STANDING instruction: "All images should be aligned left on the page, or right on the page, or in the centre of the page. Text wraps around either way. It doesn't need to wrap around something in the middle of the page... I don't see how you can really wrap text around a centred image, especially on a mobile phone." THREE PLACEMENTS AND NO OTHERS: .imgwrap--l float left -> text wraps round the RIGHT .imgwrap--r float right -> text wraps round the LEFT .imgwrap--c centred -> NO WRAP. Text above and below. BELOW 600px EVERY IMAGE BECOMES CENTRED AND STOPS WRAPPING. Mobile is 77-79% of revenue and a phone has no room for a side image. ========================================================================== */ .imgwrap{margin:6px 0 18px;max-width:100%} /* width:auto + max-width: a SMALL image keeps its natural size instead of being stretched and blurred; a large one still caps to the column. */ .imgwrap img{display:block;width:auto;max-width:100%;height:auto;border-radius:6px} .imgwrap figcaption{font-size:.85rem;color:var(--muted);padding-top:6px;line-height:1.4} .imgwrap--l{float:left;max-width:38%;margin-right:26px;margin-bottom:14px;clear:left} .imgwrap--r{float:right;max-width:38%;margin-left:26px;margin-bottom:14px;clear:right} .imgwrap--c{float:none;clear:both;margin-left:auto;margin-right:auto;text-align:center} .imgwrap--c img{margin-left:auto;margin-right:auto} .imgwrap--sm{max-width:26%} .imgwrap--lg{max-width:50%} /* A float must not escape its section. */ .imgwrap-host::after{content:"";display:table;clear:both} @media (max-width:600px){ .imgwrap,.imgwrap--l,.imgwrap--r,.imgwrap--sm,.imgwrap--lg{ float:none;clear:both;max-width:100%; margin-left:auto;margin-right:auto;margin-bottom:18px;text-align:center} .imgwrap img{margin-left:auto;margin-right:auto} } /* ========================================================================== TWO-COLUMN LAYOUT · UKTN, JC 19/09/2026. Main content first in the SOURCE, so on a phone it stacks above the side column - the reading order is the important order, not the visual one. ========================================================================== */ .cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start} .col-main{min-width:0} .col-side{min-width:0} .sidebox{background:#f4f4f5;border:1px solid var(--line);border-left:4px solid #cb3420; border-radius:6px;padding:14px 16px;margin:0 0 18px} .sidebox h3{margin:0 0 8px;font-size:1rem} .sidebox p{margin:0 0 8px;font-size:.92rem;line-height:1.5} .sidebox ul{margin:0;padding-left:18px;font-size:.92rem} .sidebox li{margin:0 0 4px} .sidebox--free{background:#fffdf5;border-left-color:var(--accent)} @media (max-width:860px){ .cols{grid-template-columns:1fr;gap:0} .col-side{margin-top:8px} } /* --- UKTN-specific chrome added with the black theme, 19/09/2026 --------- */ /* Hero without a photograph: a black plate carrying the H1. PLACEHOLDER by design - JC is designing a multi-box hero. This is honest (no stale 2015 masthead) and drops out the moment the artwork arrives. */ .hero--plate{background:#000;min-height:190px;display:flex;align-items:center} .hero--plate .hero-cap{position:static;background:none;display:flex;align-items:center; gap:16px;max-width:var(--maxw);margin:0 auto;padding:0 16px;width:100%} .hero--plate .hero-cap h1{color:#fff;margin:0} @media (max-width:600px){.hero--plate{min-height:130px}} /* The brand mark: red bar constant, black field (not blue - this is not a motorway site), word-mark "UK" because the word travels. BSG, 17/09. */ .roadbadge--uk{display:inline-flex;align-items:center;justify-content:center; background:#101418;color:#fff;font-weight:800;letter-spacing:.02em; border-left:9px solid #cb3420;border-radius:4px; min-width:56px;height:44px;font-size:1.15rem;flex:0 0 auto} .hero--plate .roadbadge--uk{height:52px;min-width:66px;font-size:1.3rem} /* ========================================================================== IMAGES INSIDE BOXES · JC's rule, 19/09/2026: "In any boxes like the motorway number sign images, centre the image in the box with the text underneath - it looks more considered and polished and less lazy, i.e. symmetrical." So: image centred in its box, caption/label centred underneath it, and the ROWS themselves centred so a short last row is not left ragged. ========================================================================== */ .roadgrid{list-style:none;margin:14px 0 22px;padding:0; display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .roadgrid li{margin:0;flex:0 0 112px} .roadgrid a{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px;padding:12px 6px;border:1px solid var(--line);border-radius:8px; background:#fff;text-decoration:none;color:var(--ink);font-weight:700; text-align:center;height:100%} .roadgrid a:hover{border-color:#cb3420;text-decoration:none} .roadgrid img{width:100px;height:50px;margin:0 auto;display:block} /* The same rule for any image dropped into a side box or note box. */ .sidebox img,.notebox img{display:block;margin:0 auto 8px;max-width:100%;height:auto} .sidebox figcaption,.notebox figcaption{text-align:center} /* Image GRID - four or more images in a row is a gallery, not illustration. JC's placement rule governs images inside text; a gallery of road signs laid out one per row makes a page a mile long. Added 19/09/2026 after looking at the built road-signs page rather than at the checks. */ .imggrid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:14px 0 20px} .imggrid img{display:block;max-width:104px;height:auto} @media (max-width:600px){.imggrid{gap:10px}.imggrid img{max-width:78px}}