/* ============================================================================ CYCLE BC · THE BRAND, SHARED (the booker in the site's clothes, slice A; docs/sessions/booker-skin-spec-extract-2026-10-15.md R1). One stylesheet of the tokens and the materials both the website's theme and the suite's public pages wear, served by the suite at /brand/brand.css and loaded by both: the colours and their lights and deeps (brand law — a segment is one colour), the ink ramp, the two faces and the script, the grounds (paper · topo · triangles · tint · ink), the pill, the card, and the public shell (the site's bar and footer as the suite's customer pages draw them). DESIGN.md is the record this file states; the theme's SCSS variables alias onto these as they migrate. Light only: customers always get the light look. ============================================================================ */ /* The faces load once: the theme enqueues the Google Fonts link (app/custom.php) and the suite's cyclebc-design.css imports the same URL — this file names them and imports nothing, so its rules apply the moment it arrives. */ :root { /* the three colours, as law */ --cbc-moto: #528e9d; --cbc-moto-2: #75a5b1; --cbc-moto-deep: #38616b; --cbc-scoot: #9a3227; --cbc-scoot-2: #b86f67; --cbc-scoot-deep: #7a2a21; --cbc-bike: #2e985a; --cbc-bike-2: #70ad7b; --cbc-bike-deep: #1f6b40; /* the ink ramp and the greys */ --cbc-ink: #212529; --cbc-head: #2b3440; --cbc-muted: #5c6670; --cbc-faint: #66707a; --cbc-tar: #231f20; --cbc-grey: #6d6e70; --cbc-grey-2: #bfbfbf; --cbc-line: #dee2e6; --cbc-line-soft: #e3e7ea; /* the surfaces */ --cbc-white: #fff; --cbc-sheet: #fff; --cbc-sheet-2: #f6f7f8; --cbc-paper: #f4f3f1; --cbc-desk: #e9e7e3; --cbc-amber: #c77c00; --cbc-amber-wash: #fdf4e3; --cbc-amber-ink: #7d611a; --cbc-ok: #28a745; --cbc-ok-wash: #e9f7ee; --cbc-ok-ink: #1e6b43; --cbc-red-wash: #fdf1f0; --cbc-red-ink: #c62828; /* the faces */ --cbc-font-alt: 'Lato', 'Helvetica Neue', sans-serif; --cbc-font-base: 'Roboto Slab', Georgia, serif; --cbc-font-script: 'Damion', cursive; /* the materials */ --cbc-radius-card: 13px; --cbc-radius-ctl: 9px; --cbc-radius-pill: 50px; --cbc-shadow-card: 0 12px 40px rgba(30, 25, 20, 0.13); --cbc-topo: url('/brand/pattern-topo.png'); --cbc-triangles: url('/brand/pattern-triangle.png'); /* the segment in play — a page or a block sets --cbc-seg family from the three above */ --cbc-seg: var(--cbc-moto); --cbc-seg-2: var(--cbc-moto-2); --cbc-seg-deep: var(--cbc-moto-deep); --cbc-seg-tint: #eef4f6; } .cbc-seg--motorcycle { --cbc-seg: var(--cbc-moto); --cbc-seg-2: var(--cbc-moto-2); --cbc-seg-deep: var(--cbc-moto-deep); --cbc-seg-tint: #eef4f6; } .cbc-seg--scooter { --cbc-seg: var(--cbc-scoot); --cbc-seg-2: var(--cbc-scoot-2); --cbc-seg-deep: var(--cbc-scoot-deep); --cbc-seg-tint: #faf0ee; } .cbc-seg--bicycle, .cbc-seg--ebike { --cbc-seg: var(--cbc-bike); --cbc-seg-2: var(--cbc-bike-2); --cbc-seg-deep: var(--cbc-bike-deep); --cbc-seg-tint: #eaf5ee; } /* ---- the grounds (decision 69): paper · topo paper · triangles · tint · ink ---- */ .cbc-ground-paper { background: var(--cbc-paper); } .cbc-ground-topo { background: var(--cbc-paper) var(--cbc-topo) 50% 0 repeat; background-size: 1001px 578px; } .cbc-ground-triangles { background: var(--cbc-white) var(--cbc-triangles) repeat; background-size: 1701px 1085px; } .cbc-ground-tint { background: var(--cbc-seg-tint); } .cbc-ground-ink { background: var(--cbc-tar); color: var(--cbc-white); } /* ---- the pill: the kit's button, in the segment's colour ---- */ .cbc-pill { display: inline-block; position: relative; border: 0; cursor: pointer; text-decoration: none; text-align: center; font: 700 0.85rem/1.1 var(--cbc-font-alt); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cbc-white); background: var(--cbc-seg); border-radius: var(--cbc-radius-pill); padding: 14px 22px; } .cbc-pill::before { content: ''; position: absolute; inset: 4px; border: 2px solid var(--cbc-white); border-radius: var(--cbc-radius-pill); pointer-events: none; } .cbc-pill:hover, .cbc-pill:focus-visible { background: var(--cbc-seg-deep); color: var(--cbc-white); outline: 0; } .cbc-pill:disabled { opacity: 0.4; cursor: not-allowed; } .cbc-day__pill--ghost { background: var(--cbc-white); color: var(--cbc-ink); box-shadow: inset 0 0 0 1.5px var(--cbc-line); } .cbc-day__pill--ghost::before { border-color: transparent; } .cbc-day__pill--ghost:hover { background: var(--cbc-sheet-2); color: var(--cbc-ink); } /* ---- the card: a white sheet on the paper ---- */ .cbc-card { background: var(--cbc-sheet); border: 1.5px solid var(--cbc-line); border-radius: var(--cbc-radius-card); } .cbc-card--raised { border: 0; box-shadow: var(--cbc-shadow-card); } /* ---- the type roles ---- */ .cbc-h { font-family: var(--cbc-font-alt); font-weight: 900; letter-spacing: 0.2px; color: var(--cbc-ink); } .cbc-prose { font-family: var(--cbc-font-base); color: var(--cbc-muted); line-height: 1.6; } .cbc-label { font: 900 0.68rem/1.2 var(--cbc-font-alt); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cbc-head); } .cbc-script { font-family: var(--cbc-font-script); font-weight: 400; } /* ============================================================================ THE PUBLIC SHELL — the site's bar and footer around a suite customer page (R2). Links only: no segment panels, no search; the customer is mid-purchase and the bar is the way home. Measures from the theme's _shell.scss: the bar 72px (the pinned height), Lato for the chrome, the segment colour under the current segment, every tap target 44px on a phone. ============================================================================ */ .cbc-public { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--cbc-font-alt); color: var(--cbc-ink); text-align: left; } .cbc-public > main { flex: 1 0 auto; } /* the notice bar (suite decision 140 F2), the theme's .shell-notice in the suite's own customer pages */ .cbc-notice { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 14px; line-height: 1.4; } .cbc-notice--news { background: var(--cbc-head); color: var(--cbc-white); } .cbc-notice--alert { background: #f2c14e; color: #2b2100; } .cbc-notice__words { flex: 1; margin: 0; text-align: center; } .cbc-notice__link { color: inherit; font-weight: 700; text-decoration: underline; margin-left: 6px; white-space: nowrap; } .cbc-notice__close { background: none; border: 0; color: inherit; font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; min-width: 44px; min-height: 36px; } .cbc-bar { background: var(--cbc-white); border-bottom: 1px solid var(--cbc-line-soft); position: relative; z-index: 20; } .cbc-bar__in { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 72px; display: flex; align-items: center; gap: 22px; } .cbc-bar__logo { display: inline-flex; align-items: center; flex: none; } .cbc-bar__logo img, .cbc-bar__logo svg { width: 60px; height: 60px; display: block; } .cbc-bar__nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; } .cbc-bar__nav a, .cbc-bar__plain a { display: inline-flex; align-items: center; height: 44px; padding: 0 13px; font-weight: 700; font-size: 17px; color: var(--cbc-ink); text-decoration: none; border-bottom: 3px solid transparent; border-top: 3px solid transparent; } .cbc-bar__nav a:hover, .cbc-bar__plain a:hover { color: var(--cbc-seg-deep); } .cbc-bar__nav a.is-current { border-bottom-color: var(--cbc-seg); } .cbc-bar__nav a.cbc-seg--motorcycle.is-current { color: var(--cbc-moto); border-bottom-color: var(--cbc-moto); } .cbc-bar__nav a.cbc-seg--scooter.is-current { color: var(--cbc-scoot); border-bottom-color: var(--cbc-scoot); } .cbc-bar__nav a.cbc-seg--bicycle.is-current { color: var(--cbc-bike); border-bottom-color: var(--cbc-bike); } .cbc-bar__nav a.cbc-seg--motorcycle:hover { color: var(--cbc-moto); } .cbc-bar__nav a.cbc-seg--scooter:hover { color: var(--cbc-scoot); } .cbc-bar__nav a.cbc-seg--bicycle:hover { color: var(--cbc-bike); } .cbc-bar__spacer { flex: 1; } .cbc-bar__actions { display: flex; align-items: center; gap: 14px; } .cbc-bar__contact { font-weight: 700; font-size: 17px; color: var(--cbc-ink); text-decoration: none; display: inline-flex; align-items: center; height: 44px; } .cbc-bar__contact:hover { color: var(--cbc-seg-deep); } .cbc-bar__book { padding: 11px 18px; font-size: 0.72rem; } .cbc-bar__burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--cbc-ink); align-items: center; justify-content: center; } .cbc-bar__city { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cbc-muted); } /* the band under the bar (decision 33, as every inner page wears it): the segment's colour, the pin and the city, the way back on the right where the site has its section links; on a phone it scrolls sideways */ /* THE BAND IS THE ONE STICKY ROW (the site's _shell.scss; Mike, 2026-10-15: "should the nav stay sticky so you always know where you are?"): on the desk the band pins to the top and the bar scrolls away, so the steps and the way back are always in view; on a phone it sits in the page as the site's does (decision 33). The words are the site's pixel sizes, never rem — this sheet is shared and the two roots differ */ .cbc-band { background: var(--cbc-seg); color: var(--cbc-white); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); position: relative; z-index: 19; } @media (min-width: 740px) { .cbc-band { position: sticky; top: 0; } } /* NO SEGMENT, NO SEGMENT COLOUR (Mike, 2026-10-16: "main booking door nav band should be the footer black until a category is chosen"): a shell page about no one segment — the gateway — wears the footer's ink on its band, never the motorcycle teal the default would give it */ .cbc-public:not([class*="cbc-seg--"]) .cbc-band { background: var(--cbc-tar); --cbc-seg-deep: var(--cbc-tar); } .cbc-band__in { max-width: 1200px; margin: 0 auto; padding: 0 20px; min-height: 60px; display: flex; align-items: center; gap: 26px; } .cbc-band__spacer { flex: 1; } .cbc-band__switch { position: relative; } .cbc-band__switch > summary { list-style: none; cursor: pointer; } .cbc-band__switch > summary::-webkit-details-marker { display: none; } .cbc-band__where { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cbc-white); font: 900 14px/1 var(--cbc-font-alt); letter-spacing: 0.2em; text-transform: uppercase; } .cbc-band__pin { flex: none; } .cbc-band__caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; opacity: 0.9; } .cbc-band__menu { position: absolute; left: 0; top: 100%; min-width: 200px; background: var(--cbc-white); color: var(--cbc-ink); border-radius: 0 0 var(--cbc-radius-ctl) var(--cbc-radius-ctl); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16); padding: 6px 0; z-index: 30; } .cbc-band__menu a { display: block; padding: 10px 16px; font: 700 0.9rem/1.2 var(--cbc-font-alt); color: var(--cbc-ink); text-decoration: none; } .cbc-band__menu a:hover { background: var(--cbc-sheet-2); } .cbc-band__menu a.is-current { color: var(--cbc-seg-deep); } .cbc-band__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: rgba(255, 255, 255, 0.88); text-decoration: none; font: 900 14px/1 var(--cbc-font-alt); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .cbc-band__back:hover { color: var(--cbc-white); } /* the crumb is the one thing in the band that gives way (2026-10-21: a five-level site path pushed the steps off the edge): it shrinks to an ellipsis at every width, the steps and the tools keep their size */ .cbc-band__back { flex: 0 1 auto; min-width: 0; } .cbc-band__backlbl { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cbc-band__steps { flex: 0 0 auto; } .cbc-band__chev { font-size: 1.3rem; line-height: 1; margin-top: -2px; } /* the steps as the site's section links: white, the current one lit with the site's small triangle beneath */ .cbc-band__steps { display: flex; align-items: stretch; gap: 4px; margin-left: 12px; } /* the phone's step picker and the progress line (the phone pass, round two) — hidden on a desk, where the steps stand in a row. A FLOW'S BAND PINS AT EVERY WIDTH (Mike, 2026-10-27: "make the progress bar sticky so the customer knows where they are when scrolling"): the steps are where-am-I, so on a phone too the band stays at the top; a plain page's band keeps decision 33. A bare `.cbc-band { position: relative }` here had undone the desk's sticky above — the progress line needs only a positioned parent, and sticky is one. */ .cbc-band--steps { position: sticky; top: 0; } .cbc-band__stepnow { display: none; position: relative; } .cbc-band__stepnow > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--cbc-white); font: 900 13px/1 var(--cbc-font-alt); letter-spacing: 0.04em; cursor: pointer; white-space: nowrap; } .cbc-band__stepnow > summary::-webkit-details-marker { display: none; } .cbc-band__stepnow > summary b { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--cbc-white); color: var(--cbc-seg-deep); font-size: 11.5px; letter-spacing: 0; } .cbc-band__stepname { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; } .cbc-band__stepmenu { min-width: 240px; padding: 6px 0; } .cbc-band__stepmenu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; color: var(--cbc-ink); text-decoration: none; font: 700 0.9rem/1.2 var(--cbc-font-alt); } .cbc-band__stepmenu a.is-cur { color: var(--cbc-seg-deep); background: var(--cbc-sheet-2); } .cbc-band__stepmenu a.is-todo { opacity: 0.55; pointer-events: none; } .cbc-band__stepmenu a .cbc-band__stepn { background: var(--cbc-seg); color: var(--cbc-white); } .cbc-band__stepmenu a.is-todo .cbc-band__stepn { background: var(--cbc-line); color: var(--cbc-ink); } .cbc-band__progress { display: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--cbc-white); opacity: 0.9; transform-origin: left center; transition: transform 0.2s; } .cbc-band__step { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 60px; padding: 0 12px; color: rgba(255, 255, 255, 0.78); text-decoration: none; font: 700 14px/1.2 var(--cbc-font-alt); white-space: nowrap; cursor: default; } .cbc-band__step.is-done { cursor: pointer; color: rgba(255, 255, 255, 0.92); } .cbc-band__step.is-done:hover { color: var(--cbc-white); } .cbc-band__step.is-cur { color: var(--cbc-white); font-weight: 900; } .cbc-band__step.is-cur::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 0; margin-left: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid var(--cbc-paper); } .cbc-band__step.is-todo { opacity: 0.7; } .cbc-band__stepn { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 900 11px/1 var(--cbc-font-alt); background: rgba(255, 255, 255, 0.22); color: var(--cbc-white); } .cbc-band__step.is-done .cbc-band__stepn { background: var(--cbc-white); color: var(--cbc-seg-deep); } .cbc-band__step.is-cur .cbc-band__stepn { background: var(--cbc-white); color: var(--cbc-seg-deep); } /* the band's tools (127v): the booker's currency pick at the right end, in the band's own voice */ .cbc-band__tools { display: flex; align-items: center; gap: 8px; margin-left: 10px; } .cbc-band__tools label { font: 900 11px/1 var(--cbc-font-alt); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .cbc-band__tools select { appearance: none; -webkit-appearance: none; font: 900 12px/1 var(--cbc-font-alt); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cbc-white); background: rgba(255, 255, 255, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 8px 28px 8px 12px; min-height: 36px; cursor: pointer; } .cbc-band__tools select:focus { outline: 2px solid var(--cbc-white); outline-offset: 2px; } .cbc-band__tools select option { color: var(--cbc-ink); } /* the currency pick as the band's own menu (Mike: 'stylize the drop down and add their current symbol'): a pill with the symbol and the code, a menu of rows with the symbol, the code and the name */ .cbc-band__fx { position: relative; } .cbc-band__fxpill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 14px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: var(--cbc-white); font: 900 12px/1 var(--cbc-font-alt); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; list-style: none; } .cbc-band__fxpill::-webkit-details-marker { display: none; } .cbc-band__fxpill:hover { background: rgba(255, 255, 255, 0.22); } .cbc-band__fxpill b { font-size: 14px; letter-spacing: 0; } .cbc-band__fxmenu { left: auto; right: 0; min-width: 260px; padding: 6px 0; } .cbc-band__fxmenu button { display: grid; grid-template-columns: 40px 48px 1fr; align-items: center; gap: 8px; width: 100%; border: 0; background: none; text-align: left; padding: 10px 16px; font: 700 14px/1.2 var(--cbc-font-alt); color: var(--cbc-ink); cursor: pointer; } .cbc-band__fxmenu button:hover { background: var(--cbc-sheet-2); } .cbc-band__fxmenu button.is-current { color: var(--cbc-seg-deep); } .cbc-band__fxmenu button b { font-size: 15px; } .cbc-band__fxcode { letter-spacing: 0.06em; } .cbc-band__fxname { font-weight: 400; color: var(--cbc-muted); font-size: 13px; } .cbc-band__fxmenu button.is-current .cbc-band__fxname { color: var(--cbc-seg-deep); } /* the strip under the band: the currency disclaimer, once (127v) */ .cbc-band__note { background: var(--cbc-sheet-2, #f4f3f1); border-bottom: 1px solid var(--cbc-line-soft); color: var(--cbc-ink); } .cbc-band__note-in { max-width: 1200px; margin: 0 auto; padding: 9px 20px; display: flex; align-items: center; gap: 14px; font: 400 13px/1.45 var(--cbc-font-base); } .cbc-band__note-in span { flex: 1; } .cbc-band__note-in button { flex: none; border: 0; background: none; font: 700 14px/1 var(--cbc-font-alt); color: var(--cbc-muted); cursor: pointer; width: 36px; height: 36px; border-radius: 50%; } .cbc-band__note-in button:hover { background: rgba(0, 0, 0, 0.06); color: var(--cbc-ink); } .cbc-band__crumb { font: 700 14px/1.2 var(--cbc-font-alt); color: rgba(255, 255, 255, 0.82); white-space: nowrap; } .cbc-band__crumb a { color: rgba(255, 255, 255, 0.82); text-decoration: none; } .cbc-band__crumb a:hover { color: var(--cbc-white); } .cbc-band__crumb b { color: var(--cbc-white); font-weight: 900; } .cbc-band__sep { margin: 0 8px; opacity: 0.6; } /* the crumb under the bar (unused once the band stands; kept for a page without a band) */ .cbc-crumb { width: 100%; box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 16px 20px 0; font: 400 0.78rem/1.4 var(--cbc-font-base); color: var(--cbc-muted); } .cbc-crumb a { color: var(--cbc-seg-deep); text-decoration: none; } .cbc-crumb a:hover { text-decoration: underline; } .cbc-crumb b { color: var(--cbc-ink); font-weight: 700; } /* the phone drawer */ .cbc-drawer { display: none; } @media (max-width: 739px) { .cbc-bar__in { height: 60px; gap: 10px; padding: 0 12px; } .cbc-bar__logo img, .cbc-bar__logo svg { width: 46px; height: 46px; } .cbc-bar__nav, .cbc-bar__plain, .cbc-bar__contact, .cbc-bar__city { display: none; } .cbc-bar__burger { display: inline-flex; } .cbc-drawer { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--cbc-white); border-bottom: 1px solid var(--cbc-line); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; } .cbc-drawer.is-open { opacity: 1; transform: none; pointer-events: auto; } .cbc-drawer a { display: flex; align-items: center; min-height: 48px; padding: 0 20px; border-top: 1px solid var(--cbc-line-soft); font-weight: 700; color: var(--cbc-ink); text-decoration: none; } .cbc-drawer a.is-current { color: var(--cbc-seg-deep); box-shadow: inset 4px 0 0 var(--cbc-seg); } .cbc-drawer .cbc-drawer__city { padding: 10px 20px 4px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cbc-muted); border-top: 1px solid var(--cbc-line-soft); } .cbc-crumb { padding: 8px 12px 0; } .cbc-band__in { min-height: 48px; padding: 0 12px; gap: 14px; } /* on a step screen the STEPS scroll sideways on their own — Back stays on the left and the currency pill on the right (the phone pass, 2026-10-16: the whole band scrolled and the pill sat 40px past the edge) */ .cbc-band__steps { overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; } .cbc-band__steps::-webkit-scrollbar { display: none; } .cbc-band__in:has(.cbc-band__steps) .cbc-band__spacer { display: none; } .cbc-band__crumb { font-size: 13px; } /* the phone band: the city, the page and the currency — the site link in the crumb is the desk's, the where tightens its tracking, the pill keeps the symbol and the code */ .cbc-band__crumb > a:first-child, .cbc-band__crumb > span:first-of-type .cbc-band__sep { display: none; } .cbc-band__where { letter-spacing: 0.12em; gap: 8px; } .cbc-band__fxpill { padding: 0 10px 0 12px; gap: 6px; } .cbc-band__tools { margin-left: 6px; } .cbc-band__fxmenu { min-width: 220px; } /* the phone pass, round two (slice B's acceptance, 2026-10-21): the crumb shrinks so the currency pill never leaves the screen (the partner band's long title pushed it 60px past the edge); every band and footer target is 44px */ .cbc-band__crumb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cbc-band__tools { flex: none; } .cbc-band__crumb a { display: inline-flex; align-items: center; min-height: 44px; } .cbc-band__menu a { min-height: 44px; display: flex; align-items: center; } .cbc-band__fxmenu button { min-height: 44px; } .cbc-pill { min-height: 44px; } .cbc-foot a { display: inline-flex; align-items: center; min-height: 44px; } .cbc-foot__social a { width: 44px; height: 44px; } .cbc-band__note-in { padding: 8px 12px; font-size: 12.5px; } .cbc-band__steps { margin-left: 4px; gap: 0; overflow: visible; flex: 0 0 auto; } .cbc-band__step { display: none; } .cbc-band__stepnow { display: block; } .cbc-band__progress { display: block; } .cbc-band__back { flex: 1 1 auto; font-size: 12px; letter-spacing: 0.12em; } } /* ============================================================================ THE PAGE KIT — the vocabulary every customer face shares (the surface pass, docs/sessions/faces-surface-pass-spec-extract-2026-10-16.md §2): the site's 1200px container, a head band with eyebrow · title · lede · media on the segment's tint, the two-column body with a rail, the status pill. A face keeps its own cards; it loses its own page frame, head and ground. ============================================================================ */ .cbc-wrap { width: 100%; box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .cbc-wrap--narrow { max-width: 720px; } .cbc-wrap--reading { max-width: 800px; } .cbc-wrap--body { padding-top: 28px; padding-bottom: 64px; } .cbc-hero { padding: 36px 0 30px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .cbc-hero__in { display: grid; gap: 22px; align-items: center; } .cbc-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 900 12px/1.2 var(--cbc-font-alt); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cbc-seg-deep); margin: 0 0 10px; } .cbc-hero__script { font: 400 40px/1 var(--cbc-font-script); color: var(--cbc-seg-deep); margin: 0 0 2px; } /* qualified under the band: a page's own '.x h1' rule (class + element) would outrank a lone class */ .cbc-hero .cbc-hero__title { font: 900 2rem/1.1 var(--cbc-font-alt); letter-spacing: 0.2px; color: var(--cbc-ink); margin: 0; text-wrap: balance; } .cbc-hero .cbc-hero__lede { font: 400 1rem/1.6 var(--cbc-font-base); color: var(--cbc-muted); max-width: 62ch; margin: 12px 0 0; } .cbc-hero__lede b { color: var(--cbc-ink); font-weight: 700; } .cbc-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .cbc-hero__media { margin: 0; border-radius: var(--cbc-radius-card); overflow: hidden; background: var(--cbc-white); box-shadow: var(--cbc-shadow-card); aspect-ratio: 4 / 3; max-width: 420px; } .cbc-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cbc-hero__media--contain img { object-fit: contain; padding: 14px; box-sizing: border-box; } .cbc-hero--centered .cbc-hero__in { text-align: center; justify-items: center; } .cbc-hero--centered .cbc-hero__eyebrow { justify-content: center; } .cbc-hero--centered .cbc-hero__lede { margin-left: auto; margin-right: auto; } .cbc-tag { display: inline-flex; align-items: center; font: 900 11px/1 var(--cbc-font-alt); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--cbc-sheet-2); color: var(--cbc-head); } .cbc-tag--ok { background: var(--cbc-ok-wash); color: var(--cbc-ok-ink); } .cbc-tag--warn { background: var(--cbc-amber-wash); color: var(--cbc-amber-ink); } .cbc-tag--seg { background: var(--cbc-white); color: var(--cbc-seg-deep); box-shadow: inset 0 0 0 1.5px var(--cbc-seg-2); } /* the photographic band (the hub mockup's hub-hero; the grounds rule 69): a photo under a dark wash, white words */ .cbc-hero--photo { position: relative; background-size: cover; background-position: center; color: var(--cbc-white); border-bottom: 0; padding-bottom: 64px; } .cbc-hero--photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 36, 0.35), rgba(10, 30, 36, 0.74)); } .cbc-hero--photo > * { position: relative; } .cbc-hero--photo .cbc-hero__eyebrow { color: rgba(255, 255, 255, 0.9); } .cbc-hero--photo .cbc-hero__title { color: var(--cbc-white); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } .cbc-hero--photo .cbc-hero__lede { color: rgba(255, 255, 255, 0.92); } .cbc-hero--photo .cbc-hero__lede b { color: var(--cbc-white); } .cbc-hero .cbc-hero__title--script { font: 400 3rem/1.05 var(--cbc-font-script); letter-spacing: 0; } .cbc-hero__dot { opacity: 0.6; } .cbc-tag--glass { background: rgba(255, 255, 255, 0.18); color: var(--cbc-white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); } /* the doors over the band's foot (the mockup's stiles): three cards, a jump each */ .cbc-tiles { display: grid; gap: 10px; margin-top: -40px; position: relative; z-index: 2; } .cbc-tile { display: block; background: var(--cbc-white); border-radius: 12px; box-shadow: 0 6px 22px rgba(20, 45, 52, 0.14); border-top: 4px solid var(--cbc-seg); padding: 12px 14px; text-decoration: none; color: var(--cbc-ink); transition: transform 0.15s; } .cbc-tile:hover { transform: translateY(-3px); color: var(--cbc-ink); } .cbc-tile__k { font: 900 11px/1.2 var(--cbc-font-alt); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cbc-seg-deep); } .cbc-tile__v { font: 900 17px/1.2 var(--cbc-font-alt); margin-top: 3px; } .cbc-tile__s { font: 400 12.5px/1.45 var(--cbc-font-base); color: var(--cbc-muted); margin-top: 3px; } .cbc-sec { padding: 32px 0 40px; } .cbc-sec__title { font: 900 1.25rem/1.2 var(--cbc-font-alt); color: var(--cbc-ink); margin: 0 0 14px; } .cbc-cols { display: grid; gap: 22px; align-items: start; } .cbc-cols > * { min-width: 0; } /* a rail with nothing in it folds away and the content takes the width (the hub's rail holds only what applies) */ .cbc-cols__rail:empty { display: none; } .cbc-cols:has(.cbc-cols__rail:empty) { grid-template-columns: minmax(0, 1fr); } /* on a phone the head band keeps its first screen for the words: the photo is a 16:9 strip, not a 4:3 card */ @media (max-width: 739px) { .cbc-hero__media { aspect-ratio: 16 / 9; max-width: none; } .cbc-hero__media--contain img { padding: 8px; } .cbc-hero__in--media { gap: 16px; } } @media (min-width: 740px) { .cbc-hero { padding: 48px 0 40px; } .cbc-hero .cbc-hero__title { font-size: 2.6rem; } .cbc-hero--photo { padding: 56px 0 76px; } .cbc-hero .cbc-hero__title--script { font-size: 3.6rem; } .cbc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } } @media (min-width: 900px) { .cbc-hero__in--media { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; } .cbc-cols { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; } } /* the footer: a column per city, the main links, the fine print — the site's footer as the suite draws it */ .cbc-foot { background: var(--cbc-tar); color: #cfcac6; margin-top: 40px; font-family: var(--cbc-font-alt); } .cbc-foot__in { max-width: 1200px; margin: 0 auto; padding: 36px 20px 20px; } .cbc-foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; } .cbc-foot h5 { font: 900 0.78rem/1.2 var(--cbc-font-alt); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cbc-white); margin: 0 0 10px; } .cbc-foot h5 a { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 0.8rem; color: #cfcac6; margin-left: 8px; } .cbc-foot p, .cbc-foot li { font: 400 0.82rem/1.6 var(--cbc-font-base); margin: 0; } .cbc-foot ul { list-style: none; margin: 0; padding: 0; } .cbc-foot a { color: #e9e5e1; text-decoration: none; } .cbc-foot a:hover { color: var(--cbc-white); text-decoration: underline; } .cbc-foot__today { color: var(--cbc-white); font-weight: 700; font-family: var(--cbc-font-alt); font-size: 0.8rem; } .cbc-foot__fine { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 26px; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 0.72rem; } .cbc-foot__fine a { margin-right: 12px; } .cbc-foot__social { margin-left: auto; display: flex; gap: 14px; } .cbc-foot__social a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); } .cbc-foot__social svg { width: 16px; height: 16px; fill: #e9e5e1; } /* on paper the page is the page: the owner prints a service record, a signer a document — the bar, the band and the footer stay on screen (slice B) */ @media print { .cbc-bar, .cbc-band, .cbc-band__note, .cbc-foot { display: none !important; } .cbc-public { background: none !important; } } /* THE DAY CARD (2026-10-30) — one card for the site's Day by Day and the booker's Route & Dates: the spine with its typed dots (riding · rest · ferry · an added night), the town photograph, the day eyebrow with its pills, the title, the km and time pills, the words (clamped with a Read more where they run long, so the cards stay one height), and the night line. The theme and the booker render the same DOM; the booker's own states (the add-a-night door, the dashed extra night) live in its stylesheet. Every rule sits under .cbc-days on purpose: both pages carry a reset (.cbk * and the theme's .page .main img) that outranks a bare class, which is how the booker's cards lost their margins on 2026-10-30. A page or a block sets the --cbc-seg family; the tours wear the brand teal. */ .cbc-days { position: relative; padding: 0 0 0 26px; list-style: none; margin: 0; } .cbc-days::before { content: ''; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; background: var(--cbc-line); } .cbc-days .cbc-day { position: relative; display: flex; border: 1.5px solid var(--cbc-line); border-radius: var(--cbc-radius-card); background: var(--cbc-white); margin: 0 0 10px; padding: 0; } .cbc-days .cbc-day::before { content: ''; position: absolute; left: -24px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--cbc-seg); border: 2px solid var(--cbc-white); box-shadow: 0 0 0 1.5px var(--cbc-seg); } .cbc-days .cbc-day--rest::before { background: var(--cbc-amber); box-shadow: 0 0 0 1.5px var(--cbc-amber); } .cbc-days .cbc-day--ferry::before { background: #1e88e5; box-shadow: 0 0 0 1.5px #1e88e5; } .cbc-days .cbc-day--added::before { background: var(--cbc-white); box-shadow: 0 0 0 1.5px var(--cbc-ok); } .cbc-days .cbc-day__photo { width: 200px; flex: none; background: var(--cbc-paper); position: relative; min-height: 140px; border-radius: 11.5px 0 0 11.5px; overflow: hidden; } .cbc-days .cbc-day .cbc-day__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; border-radius: 0; } .cbc-days .cbc-day__copy { padding: 12px 15px 13px; flex: 1; min-width: 0; } .cbc-days .cbc-day__eyebrow { font: 900 10px/1.4 var(--cbc-font-alt); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cbc-seg-deep); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0; } .cbc-days .cbc-day__title { font: 900 15px/1.25 var(--cbc-font-alt); color: var(--cbc-ink); margin: 3px 0 4px; } .cbc-days .cbc-day__facts { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 2px; } .cbc-days .cbc-day__pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 900 11.5px/1.5 var(--cbc-font-alt); letter-spacing: 0.02em; text-transform: none; } .cbc-days .cbc-day__pill--km { background: #e6f0f2; color: #39636e; } .cbc-days .cbc-day__pill--time { background: rgba(0, 0, 0, 0.07); color: var(--cbc-ink); } .cbc-days .cbc-day__pill--rest { background: var(--cbc-amber-wash); color: var(--cbc-amber-ink); } .cbc-days .cbc-day__pill--ferry { background: #e7f1fb; color: #1e5f9e; } .cbc-days .cbc-day__pill--bike { background: #e6f0f2; color: #39636e; } .cbc-days .cbc-day__eyebrow .cbc-day__pill { font-size: 9.5px; padding: 1px 7px; letter-spacing: 0.05em; text-transform: uppercase; } .cbc-days .cbc-day__text { font: 400 12.5px/1.55 var(--cbc-font-base); color: var(--cbc-muted); margin: 5px 0 0; } .cbc-days .cbc-day__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* the Read more is a