/* Global reset + shared shell (card/nav/topbar/footer) layout. Rebuilt to match design_handoff_cbm_marketplace/pages/CBM Homepage.dc.html exactly — read line-by-line, not summarized, after the first pass drifted from it (wrong nav/topbar order and colors, an invented "skyscraper" element the actual source doesn't have, wrong max-width). Breakpoints: desktop (default, primary design reference) → tablet ≤1024px → mobile ≤640px. Every rule has a mobile behaviour defined; nothing is desktop-only unless explicitly a documented desktop-only affordance (the wallpaper panels). */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--cbm-font-body); font-size: 14px; line-height: 1.5; color: var(--cbm-near-black-alt); background: #fff; } a { color: var(--cbm-red); text-decoration: none; } a:hover { color: var(--cbm-red-hover); } img { max-width: 100%; display: block; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; padding: 10px 16px; clip: auto; background: var(--cbm-near-black); color: #fff; border-radius: var(--cbm-radius); } /* Page background + centered "card" — a homepage-only wrapper (the grey surround + boxed white card + shadow is CBM Homepage.dc.html's own frame-with-wallpaper effect). Every real interior-page source (New Vehicles/Rent Vehicles/Used Vehicles/Depot/Services etc.) is a plain full-bleed white page with no boxing at all, so .cbm-card only takes its 1152px width/shadow on the homepage; elsewhere it's a transparent, unconstrained wrapper and .cbm-container's own --cbm-max-width governs content width directly against the real page margins. Previously this 1152px width applied to every page unconditionally, which silently squeezed every interior page ~10% narrower than its own layout math assumed — most visible on pages with precise flex-basis sponsor-row math (e.g. Used Vehicles' TBF banner coming out narrower than "half the page"). --cbm-max-width was itself later matched to --cbm-homepage-card-width (both 1174px, 2026-08-26 — see style.css) after interior-page content was found overhanging the now-standardised top section (see .cbm-sticky-header below) by ~53px each side at the old 1280px value; the two stay separate variables (one theoretically could diverge from the other again) but are currently numerically identical on purpose. */ .cbm-page-bg { min-height: 100vh; position: relative; } body.cbm-homepage .cbm-page-bg { background: #EDEDED; } .cbm-card { background: #fff; margin: 0 auto; position: relative; z-index: 1; } /* MHP2 sandbox page needs the same card width cap as the real homepage — without it, .cbm-card fills the full viewport (no max-width by default, see the base rule above), and the sandbox's topbar would visibly float centered inside a wider card instead of genuinely filling it. */ body.cbm-homepage .cbm-card, body.page-template-template-mhp2-sandbox .cbm-card { max-width: var(--cbm-homepage-card-width); box-shadow: 0 0 40px rgba(0,0,0,0.08); } /* The top gap above the card exists only to leave room for the wallpaper skin ad's top strip (see --cbm-wallpaper-top-height) — a homepage-only advertiser placement, not a general layout convention, so interior pages sit flush with zero gap. Also extended to the MHP2 sandbox page (see .cbm-card's own max-width fix above, and the whole .cbm-wallpaper block below) — Jonathan wants this page to display exactly like the real homepage, wallpaper/advertiser-takeover skin included, not just the card width. (2026-09-29: briefly removed from the homepage then put straight back the same session - Jonathan decided he likes the word-cloud and wants Gemma/sales' view before touching it, see the file's own history.) */ body.cbm-homepage .cbm-card, body.page-template-template-mhp2-sandbox .cbm-card { margin-top: var(--cbm-wallpaper-top-height); } @media (max-width: 640px) { body.cbm-homepage .cbm-card, body.page-template-template-mhp2-sandbox .cbm-card { box-shadow: none; margin-top: 0; } } /* Decorative wallpaper word-cloud skin ad — homepage-only by default ("premium sponsor takeover placement" per CBM Design Brief.md), desktop/wide-viewport only, also extended to the MHP2 sandbox page (see comment above). Sized from --cbm-homepage-card-width / --cbm-wallpaper-top-height in style.css so a new advertiser's space requirements are a one-line change there rather than several calc()s to keep in sync by hand. */ .cbm-wallpaper { display: none; } @media (min-width: 1401px) { body.cbm-homepage .cbm-wallpaper, body.page-template-template-mhp2-sandbox .cbm-wallpaper { display: block; position: fixed; inset: 0; z-index: 0; } /* `position:fixed` positions against the true viewport, ignoring the `html{margin-top:32px}` WP core adds to push normal-flow content below the admin toolbar — .cbm-card (normal flow) already shifts down with it automatically, but this fixed wallpaper doesn't, so its top strip (and the dashed line marking its bottom edge) end up 32px higher than where the card now actually starts: a blank gap between the dashed line and the nav bar, visible only while logged in with the toolbar showing (invisible to a logged-out visitor). Shifting the wallpaper down by the toolbar's own height re-aligns the two. */ body.cbm-homepage.admin-bar .cbm-wallpaper, body.page-template-template-mhp2-sandbox.admin-bar .cbm-wallpaper { top: 32px; } body.cbm-homepage .cbm-wallpaper__left, body.cbm-homepage .cbm-wallpaper__right, body.page-template-template-mhp2-sandbox .cbm-wallpaper__left, body.page-template-template-mhp2-sandbox .cbm-wallpaper__right { position: absolute; top: 0; bottom: 0; width: calc(50% - (var(--cbm-homepage-card-width) / 2)); background: #F2F2F2; overflow: hidden; } /* Notional dashed boundary lines removed 2026-09-29 (Jonathan, experimenting: "so names move freely behind the mhp") - purely the border declarations; the panels/positions/background are untouched. */ body.cbm-homepage .cbm-wallpaper__left, body.page-template-template-mhp2-sandbox .cbm-wallpaper__left { left: 0; } body.cbm-homepage .cbm-wallpaper__right, body.page-template-template-mhp2-sandbox .cbm-wallpaper__right { right: 0; } body.cbm-homepage .cbm-wallpaper__top, body.page-template-template-mhp2-sandbox .cbm-wallpaper__top { position: absolute; top: 0; left: calc(50% - (var(--cbm-homepage-card-width) / 2)); right: calc(50% - (var(--cbm-homepage-card-width) / 2)); height: var(--cbm-wallpaper-top-height); background: #F2F2F2; overflow: hidden; } /* Wander animation (2026-09-29 mock-up, Jonathan: "let them wander... and reappear the other side or diagonally"). Each word travels its own diagonal line, set per-word from PHP (--cbm-wallpaper-dx/dy) so they don't all move the same way - passes through its start position at the midpoint, exits toward one diagonal, and (since the loop restarts instantly) re-enters from the opposite diagonal, clipped by the panel's own overflow:hidden at the extremes. A true crossing from the left panel to the right one isn't possible in CSS alone - the card sits opaque between them as a separate element, not a window - so this is "wanders and reappears within its own side," the closest honest match to the ask. Staggered per-word via animation-delay so they don't all move in sync. Off entirely for anyone who's asked for reduced motion. */ .cbm-wallpaper-word { position: absolute; font-family: var(--cbm-font-mono); font-weight: 600; color: #585A5A; white-space: nowrap; transform: rotate(var(--cbm-wallpaper-rot, 0deg)); animation: cbm-wallpaper-drift 26s ease-in-out infinite; } /* 2026-10-01: large Premium names - bolder and a shade darker so a Premium customer (e.g. ADL) is easy to spot in the cloud. */ .cbm-wallpaper-word--premium { font-weight: 700; color: #3E4040; white-space: normal; max-width: 94%; line-height: 1.05; /* only as wide as the name; wraps by word in a narrow side panel */ } body.cbm-homepage .cbm-wallpaper__left, body.cbm-homepage .cbm-wallpaper__right, body.cbm-homepage .cbm-wallpaper__top, body.page-template-template-mhp2-sandbox .cbm-wallpaper__left, body.page-template-template-mhp2-sandbox .cbm-wallpaper__right, body.page-template-template-mhp2-sandbox .cbm-wallpaper__top { container-type: inline-size; } /* lets large names size to the panel (cqi units) */ @media (prefers-reduced-motion: reduce) { .cbm-wallpaper-word { animation: none; opacity: 0.5; } } } /* 2026-09-29: "some of them appear with a jump, should fade in not jump in" - the position reset at the loop's end WAS visible. Opacity now travels with the same keyframes, at zero at both 0% and 100% (the exact moment the instant reset happens) so the jump itself is always invisible - what the eye sees instead is a fade out approaching each end, then a fade back in as the next cycle starts moving away from it again. */ @keyframes cbm-wallpaper-drift { 0% { transform: rotate(var(--cbm-wallpaper-rot, 0deg)) translate(calc(var(--cbm-wallpaper-dx, 40px) * -1), calc(var(--cbm-wallpaper-dy, 60px) * -1)); opacity: 0; } /* 2026-10-01: fades lengthened from 12% to 25% of the cycle each end (~3s -> ~6.5s), Jonathan: "fade in and out more slowly and smoothly". */ 25% { opacity: 0.5; } 50% { transform: rotate(var(--cbm-wallpaper-rot, 0deg)) translate(0, 0); opacity: 0.5; } 75% { opacity: 0.5; } 100% { transform: rotate(var(--cbm-wallpaper-rot, 0deg)) translate(var(--cbm-wallpaper-dx, 40px), var(--cbm-wallpaper-dy, 60px)); opacity: 0; } } /* Buttons (shared across interior-page templates) */ .cbm-btn { display: inline-block; font-family: var(--cbm-font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; padding: 12px 22px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; } .cbm-btn--primary { background: var(--cbm-red); color: #fff; } .cbm-btn--primary:hover { background: var(--cbm-red-hover); color: #fff; } .cbm-btn--go { background: var(--cbm-green); color: #fff; } .cbm-btn--dark { background: var(--cbm-near-black); color: #fff; } .cbm-btn--ghost-on-red { background: #fff; color: var(--cbm-red); border-color: #fff; } .cbm-btn--ghost-on-red:hover { background: transparent; color: #fff; } /* Interior-page content container (NOT the homepage, which uses .cbm-card directly at 1152px) */ .cbm-container { max-width: var(--cbm-max-width); margin-inline: auto; padding-inline: var(--cbm-side-padding); } /* Nav (tabs) + top bar (logo/leaderboard/search) stay visible together while the page scrolls, as one sticky unit rather than each stacking themselves at a hand-computed pixel offset (nav's height isn't fixed — it wraps and changes padding at narrower widths — so two independently-sticky elements would need to know each other's rendered height; wrapping them keeps that entirely in normal document flow). top:0 assumes no WP admin toolbar; when logged in, the toolbar is itself fixed at the viewport top (32px tall, 46px under its own 782px breakpoint), so the offset has to match it or this would slide underneath it. */ /* background + will-change/transform force this onto its own compositing layer — without them, some browsers don't repaint a sticky element cleanly on scroll, letting whatever content was underneath it before scrolling "ghost" through any gaps in the bar instead of being properly redrawn. Purely a rendering-correctness fix — no visual change intended. */ .cbm-sticky-header { position: sticky; top: 0; z-index: 50; background: #fff; will-change: transform; transform: translateZ(0); } body.admin-bar .cbm-sticky-header { top: 32px; } /* Top section (nav + topbar + CBW News ticker) standardised sitewide — same width everywhere, not just the homepage. Before this, only .cbm-card's own homepage-only max-width constrained this band, so on interior pages — where .cbm-card is deliberately left UNCONSTRAINED, to stop interior page CONTENT being squeezed narrower than its own layout math assumes; do not "fix" that, it was itself a deliberate prior bugfix — the header/ad/ ticker stretched to the full viewport instead of matching the tuned homepage layout. Per the user (2026-08-26): "let's standardise the whole top section as we now have it... then it's same across all pages" (confirmed "top section" means everything down to and including the CBW News bar). Also future-proofs for the sales team's open possibility of selling the wallpaper "fireplace" ad sitewide rather than homepage-only, per the user the same day — if/when that happens, every page's top section already matches the width the fireplace frame is built around, rather than needing this same fix done twice. Scoped via .cbm-card's direct child, not a bare .cbm-ticker-wrap selector, because other ticker instances elsewhere on a page (e.g. the MHP2 sandbox's own two-column ticker — see .cbm-mhp2-col-left__ticker .cbm-ticker-wrap) sit nested inside their own layout, not as a direct child of .cbm-card, and must keep their own width behaviour untouched. */ .cbm-sticky-header, .cbm-card > .cbm-ticker-wrap { max-width: var(--cbm-homepage-card-width); margin-inline: auto; } @media (max-width: 782px) { body.admin-bar .cbm-sticky-header { top: 46px; } } /* NAV: red bar, socials + tabs + auth links — comes BEFORE the top bar */ .cbm-nav { background: var(--cbm-red); padding-inline: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cbm-nav__socials { display: flex; align-items: center; gap: 10px; padding-block: 2.4px; flex-shrink: 0; } .cbm-nav__socials a { color: #fff; font-size: 15px; line-height: 1; } /* Added 2026-09-17 (Jonathan): CBM, CBW Magazine, and Coach and Bus Jobs all now have live social links here. Multiple Facebook icons side by side with no label read as a duplicate/mistake - each brand's icons are grouped with a small text label so it's clear at a glance whose link is whose, without needing to hover for the title tooltip. */ .cbm-nav__socials-group { display: flex; align-items: center; gap: 6px; } .cbm-nav__socials-brand { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); } .cbm-nav__socials-divider { color: rgba(255,255,255,0.35); font-size: 12px; } .cbm-nav__tabs { display: flex; overflow-x: auto; flex: 1; justify-content: flex-start; align-items: stretch; scrollbar-width: none; } .cbm-nav__tabs::-webkit-scrollbar { display: none; } /* 2026-09-06: grew from 8 tabs to 12 (see cbm_default_nav_items() in inc/template-tags.php — now mirrors the MHP's "Find Everything Else" grid exactly). Rather than shrink every label onto one ever-tighter line, each tab now wraps its own label onto up to two lines at a slightly smaller size — so a given tab needs less width than a single-line label of the same length would, and the row itself grows a little deeper (driven naturally by the taller padding/line-height below, not a fixed height) to fit two lines instead of one. */ .cbm-nav__tabs a { display: flex; align-items: center; justify-content: center; text-align: center; flex: 1 1 0; min-width: 54px; padding: 5px 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.25; text-transform: uppercase; color: #f8d0d6; white-space: normal; border-bottom: 2px solid transparent; transition: background 0.15s, color 0.15s; } .cbm-nav__tabs a:hover { background: rgba(255,255,255,0.18); color: #fff; } .cbm-nav__tabs a.is-active { color: #fff; border-bottom-color: #fff; } /* Home tab stands out (2026-10-14): white text + house icon, so the way back to the MHP is obvious. */ .cbm-nav__tabs a.cbm-nav__home { color: #fff; font-size: 11px; gap: 4px; } /* 2026-10-14 (Jonathan): "stronger white" - heavier and a touch larger than the other tabs. */ .cbm-nav__tabs a.cbm-nav__home { font-size: 12px; font-weight: 900; letter-spacing: 0.03em; } .cbm-nav__home-icon { font-size: 15px; line-height: 1; } /* Sell Vehicles tab in the same green as the MHP Sell panel (2026-10-14). */ .cbm-nav__tabs a.cbm-nav__sell { background: var(--cbm-green); color: #fff; } .cbm-nav__tabs a.cbm-nav__sell:hover { background: var(--cbm-green); filter: brightness(0.92); } .cbm-nav__auth { display: flex; gap: 16px; align-items: center; flex-shrink: 0; } .cbm-nav__auth a { color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; } /* Territory toggle — see inc/territory-toggle.php. Per-territory colour, not one fixed colour: the default state (nothing selected, or "UK") matches the nav bar's own red — it reads as part of the bar, not a separate control, until a specific territory earns its own colour. "roi" gets Irish green (#169B62) as its specific override. Each future territory just needs its own --cbm-territory-toggle-- rule added here (falling back to the default red otherwise), not a restructure — the class is set dynamically in header.php from the selected slug. */ .cbm-territory-toggle { flex-shrink: 0; } .cbm-territory-toggle select { background-color: var(--cbm-red); color: #fff; border: none; border-radius: 3px; font-weight: 700; font-size: 12px; letter-spacing: 0.02em; padding: 4px 8px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 9px; padding-right: 22px; } .cbm-territory-toggle select:hover { background-color: var(--cbm-red-hover); } .cbm-territory-toggle--roi select { background-color: #169B62; } .cbm-territory-toggle--roi select:hover { background-color: #128052; } @media (max-width: 640px) { .cbm-nav { padding-block: 4px; } .cbm-nav__socials { display: none; } /* 2026-09-12: .cbm-nav__auth (territory select + My Dashboard/Log Out, or Login/Register) has flex-shrink:0 and was rendering its full ~300px desktop width even at phone widths — crushing .cbm-nav__tabs (the only genuinely flexible child) down to an unusable ~24px sliver, so the whole site nav effectively disappeared on a real phone (found live on the homepage, but this is the shared header — every page had it). Icon-only at this width: the label stays in the DOM (same .screen-reader-text clip technique, not display:none) so the accessible name is unchanged, just visually hidden. */ .cbm-nav__auth { gap: 10px; } .cbm-nav__auth a { font-size: 17px; line-height: 1; } .cbm-nav__auth-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .cbm-territory-toggle select { font-size: 11px; padding: 3px 20px 3px 6px; background-position: right 5px center; } /* On a real phone width there are more nav tabs than fit — the strip already scrolls horizontally (overflow-x:auto above), but nothing signals that to a visitor, so it reads as "the rest of the menu is just missing" rather than "swipe for more". A fade at the scrollable edge is the standard hint for this pattern. Scoped to mobile only — at desktop widths every tab already fits, so there's nothing to fade. */ .cbm-nav__tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%); } } /* 2026-10-13: tablets / small laptops - the full-width "My Dashboard / Log Out" (or Login/Register) labels left the menu tabs too little room and the last tab (CONTACT) was cut off. Same icon-only treatment as phones above. */ @media (min-width: 641px) and (max-width: 900px) { .cbm-nav__auth { gap: 10px; } .cbm-nav__auth a { font-size: 17px; line-height: 1; } .cbm-nav__auth-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } } /* TOP BAR: white, logo (left) + ad card (centred, half-width) + search (ranged right) — a 3-column grid, not a flex row with the ad absolutely centered. Absolute-centering the ad on the row's midpoint broke down because the logo (~175px) and search box (~275px) aren't the same width: centering on the *whole* row pushes the ad into whichever side has the wider neighbour (search), causing a visible overlap. Equal-width outer grid columns (1fr / auto / 1fr) keep the middle column — and the ad inside it — genuinely centered regardless of how wide the logo or search box are individually. */ /* This bar lives inside .cbm-card (header.php) - NOT broken out to the true viewport edges, after a same-day attempt at that broke the homepage's "fireplace" wallpaper ad frame (see header.php's own comment on .cbm-sticky-header for the full story). On the homepage specifically, .cbm-card's own 1152px cap is the real available width this bar has to work with. Columns 1 and 3 (logo, Awards box) are `auto` with a `minmax()` floor - sized to their own exact content, never more, never less. Column 2 (the ad) stays the one flexible `minmax(0, 1fr)` track so the logo can stay pinned to the true left padding and the box to the true right padding with whatever's left in between going to the ad's own column - BUT the ad's rendered SIZE no longer comes from that track width at all (see .cbm-topbar__ad below: a flat `width: 728px`, not `min(728px, 100%)`). That distinction is what actually fixes the bug: an earlier version sized the ad as 100% of this same flexible track, so narrowing the Awards box's own padding (to line up with the ticker bar underneath) silently pulled the ad 16px wider along with it - confirmed live, 2026-08-26. Per the user: "leaderboard is 728x90 centred, not fixed to the position of the poll box" / "ad should not keep resizing". A flat 728px, centered (justify-self:center) within whichever leftover-space track it lands in, means the ad's own size never reacts to anything else in the row again - only its centered *position* shifts by a few px if the leftover space itself changes, which is the correct, expected trade-off, not the bug this replaces. */ .cbm-topbar { background: #fff; padding-block: 10px; padding-left: var(--cbm-side-padding); padding-right: 16px; display: grid; grid-template-columns: minmax(160px, auto) minmax(0, 1fr) minmax(200px, auto); align-items: center; gap: 16px; } /* Explicit grid-column on every child — without it, auto-placement assigns cells in DOM order, and .cbm-topbar__ad going display:none below 1024px (see its own media query) removes it from the grid's item list entirely, sliding the search box into the middle track instead of the third one and breaking its justify-self:end alignment against the container's right edge exactly at that breakpoint. */ .cbm-topbar__logo { grid-column: 1; flex-shrink: 0; justify-self: start; } /* width:auto is load-bearing — same fix as .cbm-topbar__ad-logo img below: a global responsive img reset (max-width:100%; height:auto) fights this fixed height on narrow viewports, squashing the wide logo into a thin vertical strip. Explicit width:auto restores correct aspect-ratio scaling from the height alone. */ .cbm-topbar__logo img { height: 85px; width: auto; } /* Shell: sizing/background/grid-placement, shared by both a single ad (applied directly to its ) and a multi-ad carousel (applied to the wrapping , with each rotating ad positioned absolutely inside it — see .cbm-ad-carousel__item and ad-rendering.php's cbm_render_ad_space()). */ .cbm-topbar__ad { grid-column: 2; position: relative; justify-self: center; /* 700px, not the IAB standard 728px — deliberately non-standard, per the user (2026-08-26): CBM's own leaderboard slot is a composed unit (logo image + headline + subheading + CTA button laid out by this page's own CSS, not a fixed-pixel uploaded creative — see ad-rendering.php's cbm_render_single_ad()), so there's no advertiser-facing resize cost; the narrower width gives back margin to the homepage's wallpaper "fireplace" ad frame (--cbm-homepage-card-width in style.css, shaved by the same 28px this ad lost, to keep the same tuned spacing here). */ width: 700px; height: 90px; background: #1B2E20; border-radius: 2px; text-decoration: none; overflow: hidden; } /* Inner: the actual logo/copy/photo/cta layout — same on the directly (single ad) or on each carousel item stacked inside the shell above. */ .cbm-topbar__ad-inner { display: flex; align-items: center; gap: 8px; padding-inline: 12px; height: 100%; } .cbm-topbar__ad-logo { background: #fff; border-radius: 2px; padding: 6px 8px; flex-shrink: 0; display: flex; } /* width:auto is load-bearing here, not decorative — WordPress's srcset/ sizes attributes on the otherwise force it to render at the `sizes` value (150px, the thumbnail crop width) regardless of this height constraint, squashing a square logo into a thin strip. Explicit CSS width takes precedence back over that and restores normal aspect-ratio scaling from the height alone. */ .cbm-topbar__ad-logo img, .cbm-topbar__ad-logo video { height: 38px; width: auto; } .cbm-topbar__ad-divider { width: 1px; height: 38px; background: rgba(255,255,255,0.3); flex-shrink: 0; } .cbm-topbar__ad-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cbm-topbar__ad-title { font-weight: 700; font-size: 12px; color: #fff; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cbm-topbar__ad-sub { font-size: 10px; color: #c8d6c9; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cbm-topbar__ad-photo { width: 70px; height: 56px; flex-shrink: 0; border-radius: 2px; overflow: hidden; } .cbm-topbar__ad-photo img, .cbm-topbar__ad-photo video { width: 100%; height: 100%; object-fit: cover; } .cbm-topbar__ad-cta { flex-shrink: 0; background: #fff; color: #1B2E20; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; padding: 9px 16px; border-radius: 2px; white-space: nowrap; } .cbm-topbar__search { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; background: var(--cbm-fill-light); border: 1px solid var(--cbm-hairline); border-radius: 3px; padding: 6px 6px 6px 14px; height: 90px; } .cbm-topbar__search input { background: transparent; border: none; outline: none; color: #333; font-size: 14px; width: 150px; min-width: 0; flex-shrink: 1; } .cbm-topbar__search button { background: var(--cbm-red); color: #fff; border: none; border-radius: 2px; font-weight: 700; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; padding: 14px 20px; cursor: pointer; flex-shrink: 0; } /* Below 1024px the 3-column grid (see .cbm-topbar) no longer has room for a 576px-ish ad, a real logo and a full-width search box all sharing one row — squeezing whichever one the browser decides to shortchange (was the ad entirely; turned out to also be the logo at some in-between tablet widths, once the ad stopped being hidden). Rather than patch each column's squeeze point individually, the whole row switches to the same already-proven single-column stack used on phones — logo, ad, search each get the full row width in turn, with no three-way competition left to lose. The ad itself gets a dedicated compact layout here too — full-width, logo + headline only — since even with the whole row to itself, its desktop 70px-photo-plus-CTA layout doesn't read well this narrow. */ @media (max-width: 1024px) { .cbm-topbar { grid-template-columns: 1fr; justify-items: center; text-align: center; } /* The desktop rule above gives each child an explicit grid-column (1/2/3) so .cbm-topbar__ad going display:none doesn't misalign the search box (see that comment). Left in place here, those leftover placements force the grid to generate extra implicit columns even though only one explicit 1fr column is declared above — collapsing the (hidden) ad's column to 0 but also squeezing the logo's real column down to a sliver, since the browser still has to fit the search box's un-shrinkable content into the layout somewhere. Resetting all three back to column 1 is what actually makes them stack in one full-width column. */ /* .cbm-awards-box--topbar (MHP2 sandbox's poll-box replacement for .cbm-topbar__search) needs the same reset as the other three, below — missed originally since it was added after this rule already existed, which is exactly the bug this comment warns about, just on a new element instead of the search box it replaces. */ .cbm-topbar__logo, .cbm-topbar__ad, .cbm-topbar__search, .cbm-awards-box--topbar { grid-column: 1; justify-self: center; } .cbm-topbar__search { height: auto; padding: 8px; } /* .cbm-awards-box--topbar's mobile override lives in components.css, not here — that file's base rule for this class loads AFTER layout.css (see functions.php's enqueue order/dependency), so a media-query override placed here loses the cascade to that later-loaded base rule at equal specificity. Keeping the override next to the rule it's overriding, in the file that actually wins, avoids that trap. */ /* Compact ad: the photo and CTA button are the two elements that don't survive a phone-width row (70px photo + a padded button leave almost nothing for the headline) — dropped here, not resized, since a legible headline earns more of an advertiser's exposure than a thumbnail-sized photo or an unreadable CTA would. Logo/divider/copy shrink to match the shorter bar rather than staying at desktop size. */ .cbm-topbar__ad { width: 100%; max-width: 100%; height: 56px; } .cbm-topbar__ad-inner { padding-inline: 10px; gap: 8px; } .cbm-topbar__ad-photo, .cbm-topbar__ad-cta { display: none; } .cbm-topbar__ad-logo img, .cbm-topbar__ad-logo video { height: 26px; } .cbm-topbar__ad-divider { height: 26px; } .cbm-topbar__ad-copy { text-align: left; } } /* Gate modal (real WP auth, replaces the mockup's localStorage flag) */ .cbm-gate-modal { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,20,0.6); display: flex; justify-content: center; padding: 0 16px; overflow-y: auto; } .cbm-gate-modal[hidden] { display: none; } .cbm-gate-modal__panel { width: 100%; max-width: 480px; margin: 80px auto 20px; height: fit-content; background: #fff; border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,0.3); padding: 32px 32px 28px; position: relative; } .cbm-gate-modal__title { font-weight: 700; font-size: 22px; margin: 0 0 6px; color: #333; text-align: center; } .cbm-gate-modal__body { font-size: 13px; color: var(--cbm-body-grey); margin: 0 0 10px; text-align: center; } .cbm-gate-modal__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; } .cbm-gate-modal__list li { font-size: 13px; color: var(--cbm-body-grey); text-align: center; } .cbm-gate-modal__list strong { color: #333; } .cbm-gate-modal__deal-heading { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; color: #333; text-align: center; margin: 4px 0 6px; } .cbm-gate-modal__deal-buttons { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; } .cbm-gate-modal__deal-btn { display: block; text-align: center; background: #D91E25; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; padding: 12px; border-radius: 4px; text-decoration: none; } .cbm-gate-modal__deal-btn:hover { filter: brightness(1.1); } .cbm-gate-modal__tabs { display: flex; border-bottom: 1px solid var(--cbm-hairline); margin-bottom: 12px; } .cbm-gate-modal__tabs button { flex: 1; text-align: center; padding: 0 0 12px; background: none; border: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; color: var(--cbm-body-grey); border-bottom: 2px solid transparent; } .cbm-gate-modal__tabs button.is-active { color: var(--cbm-red); border-bottom-color: var(--cbm-red); } .cbm-gate-modal__pane[hidden] { display: none; } .cbm-gate-modal__pane form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; } .cbm-gate-modal__pane input { padding: 12px 14px; border: 1px solid var(--cbm-hairline); border-radius: 4px; font-size: 14px; } .cbm-gate-modal__submit { display: block; text-align: center; background: var(--cbm-red); color: #fff; font-weight: 700; font-size: 15px; padding: 14px; border-radius: 4px; cursor: pointer; border: none; width: 100%; } .cbm-gate-modal__submit:hover { background: var(--cbm-red-hover); color: #fff; } .cbm-gate-modal__switch { font-size: 12px; color: var(--cbm-body-grey); text-align: center; margin-top: 7px; } /* Footer */ .cbm-footer-links { background: var(--cbm-red); padding-inline: 16px; display: flex; align-items: center; } .cbm-footer-links a { padding: 14px 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; } .cbm-footer-links a:hover { color: #f3cdd3; } .cbm-footer-about { background: #262626; color: #c9cbd0; padding: 40px 32px 24px; } .cbm-footer-about__grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; } .cbm-footer-about__heading { font-family: var(--cbm-font-body); font-weight: 700; font-size: 20px; color: var(--cbm-fill-light); margin-bottom: 6px; } .cbm-footer-about__grid p { font-size: 13px; max-width: 420px; margin: 0; } .cbm-footer-about__logo { background: #fff; padding: 8px 16px; border-radius: 2px; } /* width:auto load-bearing — same fix as .cbm-topbar__logo img, found while investigating that one: this is a second, previously-unprotected place the same logo file renders, vulnerable to the identical squash-on-narrow- viewports bug even though nobody had reported it here yet. */ .cbm-footer-about__logo img { height: 38px; width: auto; } .cbm-footer-socials { display: flex; flex-wrap: wrap; gap: 8px 28px; border-top: 1px solid rgb(58,58,58); margin-top: 20px; padding-top: 16px; } .cbm-footer-socials__group { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } .cbm-footer-socials__brand { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cbm-fill-light); } .cbm-footer-socials__group a { font-size: 12px; color: rgb(201,203,208); } .cbm-footer-socials__group a:hover { color: #fff; text-decoration: underline; } .cbm-footer-about__copyright { border-top: 1px solid #3a3a3a; margin-top: 14px; padding-top: 8px; text-align: center; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } @media (max-width: 640px) { .cbm-footer-about__grid { grid-template-columns: 1fr; } .cbm-footer-about__logo { justify-self: start; } } /* TOPBAR-AD-SHRINK: the 700px banner must shrink into its grid column between 1025px and about 1300px wide instead of running over the logo and stats box */ @media (min-width: 1025px) { .cbm-topbar__ad { max-width: 100%; min-width: 0; } } @media (min-width: 1025px) and (max-width: 1240px) { .cbm-topbar__ad-photo { display: none; } } /* LATEST-TECH-DEPTH: the homepage Latest Tech ticker was too thin to read; same depth as the CBW News ticker (45px). */ .cbm-mhp2-col-left__ticker .cbm-ticker { min-height: 45px; } /* MOBILE-HOME-FIXES (2026-09-21): phone-width fixes for the homepage. */ @media (max-width: 768px) { /* The whole logo/ad/stats block used to stay stuck to the top of the screen as you scrolled. */ .cbm-sticky-header { position: static; will-change: auto; transform: none; } } @media (max-width: 640px) { /* News ticker + search: search drops to its own line under the ticker instead of squashing it. */ .cbm-ticker { flex-wrap: wrap; } .cbm-ticker__track-wrap { min-width: 120px; } .cbm-ticker__search { flex: 1 1 100%; } .cbm-ticker__search .cbm-search-box { width: calc(100% - 8px); margin: 4px; } .cbm-ticker__search .cbm-search-box input { min-width: 0; } } @media (max-width: 480px) { /* Long words such as "Government" no longer overflow their tile. */ .cbm-mhp2-else-grid .cbm-mhp2-choice { font-size: 19px; overflow-wrap: anywhere; } /* Find All Operators text sat on top of the bus photo. */ .cbm-mhp2-operators__intro { background: rgba(255,255,255,0.9); padding: 6px 8px; border-radius: 4px; } } /* MOBILE-TOPBAR-AD-TEXT (2026-09-21): on a phone the top banner ad showed its text cut off with "...". Let the words wrap and the box grow to fit. */ @media (max-width: 640px) { .cbm-topbar__ad { height: auto; min-height: 56px; } .cbm-topbar__ad-inner { height: auto; padding-block: 6px; } .cbm-topbar__ad-title, .cbm-topbar__ad-sub { white-space: normal; overflow: visible; text-overflow: clip; } .cbm-topbar__ad-title { font-size: 13px; } .cbm-topbar__ad-sub { font-size: 11px; } } /* MOBILE-TOPBAR-AD-FULL (2026-09-21): the top banner ad lost its photo and its call-to-action button on a phone. Show them on a second row under the logo and text. */ @media (max-width: 640px) { .cbm-topbar__ad-inner { flex-wrap: wrap; row-gap: 6px; } .cbm-topbar__ad-copy { flex: 1 1 55%; } .cbm-topbar__ad-photo { display: block; flex: 0 0 auto; } .cbm-topbar__ad-photo img { height: 44px; width: auto; display: block; } .cbm-topbar__ad-cta { display: block; flex: 1 1 auto; text-align: center; } }