/* Copyright (c) 2026 ADS Solutions. See LICENSE.txt for dual-license terms. */ /* PartnerSidebar — left rail for the authenticated partner portal. * * Mirrors the Phase U AdminSidebar visual language (cream surface, Fraunces * brand, Inter nav items, primary-tinted active state) using the same * --bu-* token family. Scoped under .cb-partner-portal-body so it doesn't * leak into themes. */ .cb-partner-portal-body .cb-partner-sidebar { width: 220px; flex-shrink: 0; background: var(--cbp-card); border-right: 1px solid var(--bu-line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; font-family: var(--bu-body); color: var(--bu-ink-2); } /* ── Brand block ───────────────────────────────────────────────────────── */ .cb-partner-portal-body .cb-partner-sidebar__brand { padding: 20px 18px; border-bottom: 1px solid var(--bu-line); } .cb-partner-portal-body .cb-partner-sidebar__brand-link { display: block; text-decoration: none; color: var(--cbp-text); } .cb-partner-portal-body .cb-partner-sidebar__logo { max-height: 36px; max-width: 180px; display: block; } .cb-partner-portal-body .cb-partner-sidebar__brand-text { font-family: var(--bu-display); font-size: var(--bu-fs-xl); font-weight: 600; color: var(--cbp-text); letter-spacing: -0.01em; } .cb-partner-portal-body .cb-partner-sidebar__brand-sub { margin-top: 6px; font-size: var(--bu-fs-xs); color: var(--cbp-muted); letter-spacing: 0.02em; } /* ── Nav list ──────────────────────────────────────────────────────────── */ .cb-partner-portal-body .cb-partner-sidebar__nav { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 2px; } .cb-partner-portal-body .cb-partner-sidebar__nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--bu-radius-sm); background: transparent; color: var(--bu-ink-2); font-size: var(--bu-fs-sm); font-weight: 500; text-decoration: none; transition: background var(--cb-duration-fast, 100ms) ease, color var(--cb-duration-fast, 100ms) ease; justify-content: space-between; } /* Phase 1.0c PP-2 — pending-request count badge next to "My requests" */ .cb-partner-portal-body .cb-partner-sidebar__nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--cbp-primary, #0ea5e9); color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; } .cb-partner-portal-body .cb-partner-sidebar__nav-item:hover { background: var(--bu-bg-sunk); color: var(--cbp-text); } .cb-partner-portal-body .cb-partner-sidebar__nav-item.is-active { background: color-mix(in oklab, var(--cbp-primary) 12%, transparent); color: var(--cbp-primary); font-weight: 600; } /* ── Footer (partner meta + logout) ────────────────────────────────────── */ .cb-partner-portal-body .cb-partner-sidebar__footer { padding: 16px; margin: 12px; background: var(--bu-bg-sunk); border-radius: var(--bu-radius-md); } .cb-partner-portal-body .cb-partner-sidebar__partner-label { font-size: var(--bu-fs-xs); color: var(--cbp-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 4px; } .cb-partner-portal-body .cb-partner-sidebar__partner-name { font-size: var(--bu-fs-sm); font-weight: 600; color: var(--cbp-text); margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-partner-portal-body .cb-partner-sidebar__logout { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bu-fs-sm); color: var(--cbp-muted); text-decoration: none; font-weight: 500; } .cb-partner-portal-body .cb-partner-sidebar__logout:hover { color: var(--bu-danger); } /* ── Phase 1.6 — Mobile drawer ──────────────────────────────────────────── */ /* Shell-level helper: lock body scroll when the drawer is open so the * underlying content can't scroll behind the panel. */ .cb-partner-portal-body .cb-partner-shell--drawer-open { overflow: hidden; } @media (max-width: 768px) { .cb-partner-portal-body .cb-partner-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; transform: translateX(-100%); transition: transform 200ms ease; box-shadow: var(--bu-shadow-2); } .cb-partner-portal-body .cb-partner-sidebar.is-open { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .cb-partner-portal-body .cb-partner-sidebar { transition: none; } } } /* Mobile-only backdrop sibling (rendered by PortalShell when drawer open). */ .cb-partner-portal-body .cb-partner-shell__backdrop { display: none; } @media (max-width: 768px) { .cb-partner-portal-body .cb-partner-shell__backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.45); border: 0; padding: 0; cursor: pointer; } } /* Copyright (c) 2026 ADS Solutions. See LICENSE.txt for dual-license terms. */ /* PartnerTopbar — sticky header above the partner content column. * * Mirrors AdminTopbar visually (eyebrow + Fraunces title + right-aligned * action), styled with the directionless --bu-* tokens. */ .cb-partner-portal-body .cb-partner-topbar { position: sticky; top: 0; z-index: 5; background: var(--cbp-card); border-bottom: 1px solid var(--bu-line); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--bu-body); } .cb-partner-portal-body .cb-partner-topbar__title-wrap { min-width: 0; } .cb-partner-portal-body .cb-partner-topbar__breadcrumb { font-size: var(--bu-fs-xs); color: var(--cbp-muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-partner-portal-body .cb-partner-topbar__title { font-family: var(--bu-display); font-size: var(--bu-fs-xl); font-weight: 600; margin: 0; color: var(--cbp-text); letter-spacing: -0.01em; line-height: 1.15; } .cb-partner-portal-body .cb-partner-topbar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .cb-partner-portal-body .cb-partner-topbar__primary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--bu-radius-sm); background: var(--cbp-primary); color: var(--bu-primary-ink); border: 0; font-family: var(--bu-body); font-size: var(--bu-fs-sm); font-weight: 600; cursor: pointer; transition: background var(--cb-duration-fast, 100ms) ease; } .cb-partner-portal-body .cb-partner-topbar__primary:hover { background: color-mix(in oklab, var(--cbp-primary) 85%, black); } .cb-partner-portal-body .cb-partner-topbar__primary:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--cbp-primary) 25%, transparent); } /* ── Phase 1.6 — Mobile hamburger toggle ────────────────────────────────── */ /* Hidden on desktop; toggled to inline-flex on mobile via the breakpoint * below. The button is always rendered into the DOM so screen readers can * announce its expanded state regardless of viewport width. */ .cb-partner-portal-body .cb-partner-topbar__menu-toggle { display: none; } @media (max-width: 768px) { .cb-partner-portal-body .cb-partner-topbar { padding: 12px 16px; } .cb-partner-portal-body .cb-partner-topbar__menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--bu-radius-sm); background: transparent; color: var(--cbp-text); border: 1px solid var(--bu-line); font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; margin-right: 4px; } .cb-partner-portal-body .cb-partner-topbar__menu-toggle:hover { background: var(--bu-bg-sunk); } .cb-partner-portal-body .cb-partner-topbar__menu-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--cbp-primary) 25%, transparent); } } /* Copyright (c) 2026 ADS Solutions. See LICENSE.txt for dual-license terms. */ /* ──────────────────────────────────────────────────────────────────────── * DatePicker — Airbnb-style calendar * * Visual language adopted from airbnb.gr's date picker: * - Soft rounded card with a layered shadow * - Circular nav arrows in the top corners with a thin border * - 16px, weight 500 month label * - Single-letter weekday headers (mixed case, muted) * - Day cells are 40px circles * - Hover renders a thin circle outline around the day number * - Selected day is a solid filled circle with inverted text * - Today (when unselected) gets the circle outline + bolder weight * - Range midline is a light gray bar that extends behind the days, * meeting the endpoint circles flush via half-gradient bookends * * Typography + colours come from the theme tokens — the wizard's * Harbor / Helm direction restyles the calendar automatically via the * [data-cb-direction] blocks in tokens.css. No hex codes in the * component CSS, only var() references with practical fallbacks for * admin-context rendering where no direction is active. * * Responsive: below 640px viewport the two-month layout stacks * vertically and the popover clamps to viewport width. * ──────────────────────────────────────────────────────────────────────── */ /* ── Wrapper + text input (the field above the popover) ────────────────── */ .cb-datepicker { position: relative; display: inline-block; width: 100%; max-width: 18rem; font-family: var( --cb-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif ); } .cb-datepicker__input-wrap { position: relative; display: flex; align-items: center; } .cb-datepicker__input { width: 100%; height: 3rem; padding: 0 2.75rem 0 1rem; border: 1px solid var( --cb-border, #dddddd ); border-radius: 12px; background: var( --cb-card, #ffffff ); color: var( --cb-text, #222222 ); font-family: inherit; font-size: 0.9375rem; line-height: 1.2; transition: border-color 120ms ease, box-shadow 120ms ease; } .cb-datepicker__input::-moz-placeholder { color: var( --cb-muted, #717171 ); opacity: 1; } .cb-datepicker__input::placeholder { color: var( --cb-muted, #717171 ); opacity: 1; } .cb-datepicker__input:hover:not(:disabled) { border-color: var( --cb-text, #222222 ); } .cb-datepicker__input:focus { outline: none; border-color: var( --cb-text, #222222 ); box-shadow: 0 0 0 1px var( --cb-text, #222222 ); } .cb-datepicker__input:disabled { background: var( --cb-surface-2, #f7f7f7 ); color: var( --cb-muted, #717171 ); cursor: not-allowed; } .cb-datepicker__trigger { position: absolute; right: 0.5rem; top: 50%; transform: translateY( -50% ); width: 2rem; height: 2rem; border: 0; background: transparent; color: var( --cb-muted, #717171 ); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease; } .cb-datepicker__trigger:hover:not(:disabled) { background: var( --cb-surface-2, #f2f2f2 ); color: var( --cb-text, #222222 ); } .cb-datepicker__trigger:disabled { cursor: not-allowed; opacity: 0.4; } /* ── Popover chrome ────────────────────────────────────────────────────── */ .cb-datepicker__popover { position: absolute; z-index: 50; top: calc( 100% + 0.5rem ); left: 0; background: var( --cb-card, #ffffff ); border: 1px solid var( --cb-border, rgba( 0, 0, 0, 0.04 ) ); /* Generous 16px radius to echo Airbnb's card-like popover */ border-radius: 16px; box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.14 ), 0 2px 4px rgba( 0, 0, 0, 0.08 ); padding: 1.5rem 1.25rem 1.25rem; min-width: 18rem; font-family: var( --cb-font-family, inherit ); color: var( --cb-text, #222222 ); } /* Phase 2 — when the trigger sits near the viewport's right edge (admin * topbar, day plan), DatePicker.jsx measures the popover on open and adds * this modifier to flip it to right-anchored so it doesn't clip off-screen. */ .cb-datepicker__popover--align-right { left: auto; right: 0; } /* ── react-day-picker v9 structural reset ──────────────────────────────── */ /* Library ships .rdp-day with default padding, border, and hover bg — we * flatten all of that so our selectors below are the single source of truth. */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-root, :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-root * { box-sizing: border-box; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-root { --rdp-accent-color: var( --cb-primary, #222222 ); --rdp-accent-background-color: var( --cb-surface-2, #f2f2f2 ); --rdp-day-height: 2.75rem; --rdp-day-width: 2.75rem; --rdp-day_button-width: 2.5rem; --rdp-day_button-height: 2.5rem; --rdp-day_button-border-radius: 999px; --rdp-today-color: inherit; --rdp-range_middle-background-color: var( --cb-surface-2, #f0f0f0 ); --rdp-range_middle-color: var( --cb-text, #222222 ); --rdp-selected-border: 0; font-family: var( --cb-font-family, inherit ); color: var( --cb-text, #222222 ); margin: 0; } /* Kill the library's default day padding + borders */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day { padding: 0; border: 0; vertical-align: middle; text-align: center; } /* ── Month caption row — label centered, nav buttons absolute ──────────── */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-month { margin: 0; } /* Caption row = [prev] [label] [next] in a single flex row, with the * nav wrapper flattened via `display: contents` so its children * participate directly in the parent flexbox. This keeps the arrows * vertically centered on the month label (the old absolute-positioning * approach dropped them onto the weekday row below). */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-month_caption { display: flex; justify-content: space-between; align-items: center; padding: 0 0 1rem; gap: 0.5rem; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-caption_label { flex: 1; font-family: var( --cb-display-font, var( --cb-font-family, inherit ) ); font-size: 1rem; font-weight: 500; color: var( --cb-text, #222222 ); letter-spacing: normal; text-transform: none; padding: 0; margin: 0; border: 0; background: none; line-height: 1.4; text-align: center; } /* ── Nav arrows — chromeless round icon buttons ────────────────────────── */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-nav { display: contents; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_previous, :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_next { flex-shrink: 0; width: 2rem; height: 2rem; padding: 0; border: 1px solid var( --cb-border, #dddddd ); background: var( --cb-card, #ffffff ); color: var( --cb-text, #222222 ); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, border-color 120ms ease; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_previous { order: -1; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_next { order: 1; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_previous:hover:not([disabled]), :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_next:hover:not([disabled]) { background: var( --cb-surface-2, #f7f7f7 ); border-color: var( --cb-text, #222222 ); } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_previous[disabled], :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_next[disabled] { opacity: 0.3; cursor: default; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-chevron { width: 14px; height: 14px; fill: currentColor; } /* ── Weekday headers ───────────────────────────────────────────────────── */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-weekdays { border-bottom: 0; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-weekday { font-family: var( --cb-font-family, inherit ); font-size: 0.75rem; font-weight: 400; color: var( --cb-muted, #717171 ); text-transform: none; letter-spacing: normal; text-align: center; padding: 0.25rem 0; width: 2.75rem; } /* ── Day cells ─────────────────────────────────────────────────────────── */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day_button { width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; border: 1px solid transparent; background: transparent; color: var( --cb-text, #222222 ); font-family: inherit; font-size: 0.875rem; font-weight: 400; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } /* Hover — thin circle outline around the day number (Airbnb's signature) */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day_button:hover:not([disabled]) { border-color: var( --cb-text, #222222 ); background: transparent; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day_button:focus-visible { outline: none; border-color: var( --cb-text, #222222 ); box-shadow: 0 0 0 2px var( --cb-card, #ffffff ), 0 0 0 3px var( --cb-text, #222222 ); } /* Today (when not selected) — bolder weight + outlined ring so it stands * out against neighbours without stealing the selected style */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-today:not(.rdp-selected):not(.rdp-range_start):not(.rdp-range_end) .rdp-day_button { font-weight: 600; border-color: var( --cb-text, #222222 ); } /* Selected — solid fill with inverted text. Drives the primary * brand colour (so each preset's selection picks up the theme). */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day.rdp-selected .rdp-day_button, :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day.rdp-range_start .rdp-day_button, :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day.rdp-range_end .rdp-day_button { background: var( --cb-primary, #222222 ); color: var( --cb-on-primary, var( --cb-card, #ffffff ) ); border-color: var( --cb-primary, #222222 ); font-weight: 500; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day.rdp-selected .rdp-day_button:hover, :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day.rdp-range_start .rdp-day_button:hover, :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day.rdp-range_end .rdp-day_button:hover { background: var( --cb-primary-dark, var( --cb-primary, #222222 ) ); border-color: var( --cb-primary-dark, var( --cb-primary, #222222 ) ); } /* Disabled / outside-month */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-disabled .rdp-day_button, :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-outside .rdp-day_button { color: var( --cb-muted, #dddddd ); opacity: 0.4; cursor: default; } /* G3 (v2.4.1) — 135° hatching pattern for blocked / past dates per the B3 * punch list row P-3. Applied only to actually-disabled days (past, beyond * window, blocked-dates), NOT outside-month padding cells which already * have the muted-grey treatment above. The pattern reads at every viewport * — including 360px mobile where text-decoration-only failed before — and * the color-mix keeps it token-driven so Harbor / Helm direction restyles. */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-disabled:not(.rdp-outside) .rdp-day_button { background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 4px, color-mix( in oklab, var( --cb-text, #16243a ) 18%, transparent ) 4px, color-mix( in oklab, var( --cb-text, #16243a ) 18%, transparent ) 5px ); } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-disabled .rdp-day_button:hover, :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-outside .rdp-day_button:hover { border-color: transparent; /* `background-color` (not the `background` shorthand) so the G3 hatching * pattern applied on `.rdp-disabled:not(.rdp-outside)` is preserved when * the cursor passes over a disabled day. */ background-color: transparent; } /* Hidden cells (month-padding spacers) */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-hidden { visibility: hidden; } /* ── Range-bar bookends — endpoints meet the midline flush ─────────────── */ /* The .rdp-day gets the gray bar; the inner day_button stays * transparent so its text reads through. */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-range_middle { background: var( --cb-surface-2, #f0f0f0 ); } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-range_middle .rdp-day_button { background: transparent; color: var( --cb-text, #222222 ); border-color: transparent; font-weight: 400; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-range_middle .rdp-day_button:hover { border-color: var( --cb-text, #222222 ); } /* Half-gradient bookends on the range endpoints so the grey bar meets * the circle flush on one side only. */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-range_start { background: linear-gradient( to right, transparent 50%, var( --cb-surface-2, #f0f0f0 ) 50% ); } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-range_end { background: linear-gradient( to right, var( --cb-surface-2, #f0f0f0 ) 50%, transparent 50% ); } /* Single-day "range" (start === end) gets no bar */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-range_start.rdp-range_end { background: transparent; } [dir="rtl"] :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-range_start { background: linear-gradient( to left, transparent 50%, var( --cb-surface-2, #f0f0f0 ) 50% ); } [dir="rtl"] :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-range_end { background: linear-gradient( to left, var( --cb-surface-2, #f0f0f0 ) 50%, transparent 50% ); } /* ── Two-month layout for range picker ─────────────────────────────────── */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-months { display: flex; /* Library default is `flex-wrap: wrap` — combined with our `display: * contents` on `.rdp-nav`, that wrapped the prev/next buttons onto * separate rows whenever the popover container was narrower than * [prev]+[month]+[next] (e.g. inside a constrained admin layout). * `nowrap` keeps them in one row and lets the popover grow to natural * content width. */ flex-wrap: nowrap; gap: 2.5rem; justify-content: center; align-items: flex-start; } /* ── Responsive: stack on mobile ───────────────────────────────────────── */ @media ( max-width: 640px ) { .cb-datepicker__popover { min-width: auto; max-width: calc( 100vw - 1.5rem ); padding: 1.25rem 0.75rem 1rem; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-months { flex-direction: column; gap: 1.5rem; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-root { --rdp-day-height: 2.5rem; --rdp-day-width: 2.5rem; --rdp-day_button-width: 2.25rem; --rdp-day_button-height: 2.25rem; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day_button { width: 2.25rem; height: 2.25rem; font-size: 0.85rem; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-weekday { width: 2.5rem; font-size: 0.7rem; } } /* ── v2.6.0 — Mobile bottom-sheet (B2 picker spec) ───────────────────────── * At <640px the popover is suppressed and the calendar renders as a * fixed-bottom sheet that slides up from the viewport edge. Backdrop dims * the page; the sheet itself has the iOS-style grab handle, a Cancel / * Title / Done bar, and the calendar below it. Day cells go up to 42px * for thumb-friendly hit targets per the design. * ──────────────────────────────────────────────────────────────────────── */ .cb-datepicker__backdrop { position: fixed; inset: 0; background: rgba(22, 36, 58, 0.42); z-index: 60; -webkit-tap-highlight-color: transparent; } .cb-datepicker__sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var( --bu-bg-elev, #fff ); border-top-left-radius: var( --bu-radius-lg, 18px ); border-top-right-radius: var( --bu-radius-lg, 18px ); box-shadow: 0 -16px 40px -8px rgba(0, 0, 0, 0.18); padding: 14px 16px 18px; max-height: 90vh; overflow-y: auto; animation: cb-datepicker-sheet-rise 0.22s ease-out; } @keyframes cb-datepicker-sheet-rise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .cb-datepicker__sheet-handle { width: 36px; height: 4px; border-radius: 999px; background: var( --bu-line, rgba(22, 36, 58, 0.10) ); margin: 0 auto 12px; } .cb-datepicker__sheet-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; } .cb-datepicker__sheet-title { font-family: var( --bu-font-display, var( --cb-display-font, serif ) ); font-weight: 600; font-size: var( --bu-fs-base, 15px ); color: var( --bu-ink, #16243a ); } .cb-datepicker__sheet-action { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: var( --bu-fs-sm, 13px ); padding: 8px 14px; border-radius: var( --bu-radius, 10px ); cursor: pointer; font-weight: 500; white-space: nowrap; } .cb-datepicker__sheet-action--ghost { color: var( --bu-ink-2, #3d4a60 ); border-color: var( --bu-line ); } .cb-datepicker__sheet-action--primary { background: var( --bu-primary, #16243a ); color: #fff; font-weight: 600; } /* Mobile bottom-sheet — bump day-cell touch targets so they're thumb-friendly. * The popover styles above already apply (see :is() unifying them in v2.10.1); * these are sheet-only tweaks on top. * * v2.10.2 — operator phone walk surfaced two layout issues with the * bottom-sheet calendar: * 1) The forward (next-month) arrow was rendering BELOW the grid instead * of next to the back arrow. React-day-picker v9 emits .rdp-nav as a * sibling of .rdp-month_caption (not a child), so the v2.6.0 * `display: contents` + flex `order` trick didn't reposition it. * 2) The grid was content-sized + centered, leaving wasted side padding. * * v2.13.1 — the v2.10.2 fix put the grid on .rdp-month, but the prev/next * buttons live in .rdp-nav which is a *sibling* of .rdp-month, not a * descendant — both are children of .rdp-months. The buttons' grid-area * declarations had no grid context to bind to, so they fell back to the * parent's flex layout: prev wrapped to the row above the calendar, next * wrapped to the row below. Operator-reported on iOS (390x844) on demo. * * Fix: hoist the grid to .rdp-months and make BOTH .rdp-nav and .rdp-month * `display: contents` so their direct descendants (prev, next, caption, * grid) all become grid items of .rdp-months. The grid-template-areas * registration is unchanged. */ .cb-datepicker__sheet .rdp { margin: 0; } .cb-datepicker__sheet .rdp-months { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "prev caption next" "grid grid grid"; -moz-column-gap: 0.5rem; column-gap: 0.5rem; row-gap: 0.75rem; width: 100%; align-items: center; } .cb-datepicker__sheet .rdp-month_caption { grid-area: caption; padding: 0; justify-content: center; /* dropdowns / label centred between the arrows */ } .cb-datepicker__sheet .rdp-month_grid { grid-area: grid; width: 100%; table-layout: fixed; } /* Both .rdp-nav and .rdp-month collapse to `display: contents` so their * direct children (prev, next, caption, grid) become the grid items of * .rdp-months. */ .cb-datepicker__sheet .rdp-nav, .cb-datepicker__sheet .rdp-month { display: contents; } .cb-datepicker__sheet .rdp-button_previous { grid-area: prev; } .cb-datepicker__sheet .rdp-button_next { grid-area: next; } .cb-datepicker__sheet .rdp-root { --rdp-day-height: 3rem; --rdp-day-width: 100%; --rdp-day_button-width: 2.75rem; --rdp-day_button-height: 2.75rem; } .cb-datepicker__sheet .rdp-weekdays { width: 100%; } .cb-datepicker__sheet .rdp-weekday { width: auto; font-size: 0.7rem; } /* table-layout:fixed + width:100% on the grid distributes the 7 columns * evenly. Days now fill the sheet's content area edge-to-edge. */ .cb-datepicker__sheet .rdp-day { width: auto; } /* ── v2.10.1 — DOB picker (captionLayout="dropdown") fixes ────────────── * When react-day-picker renders both the dropdowns AND the rdp-caption_label * text, "May 2026" appears twice. Hide the redundant label visually but keep * it for screen readers. :has() is supported in Chrome 105+, Safari 15.4+, * Firefox 121+ — ample for our admin + customer-flow targets. */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-month_caption:has(.rdp-dropdowns) .rdp-caption_label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Style the native dropdowns so they don't render as bare browser controls. */ :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-dropdowns { display: flex; gap: 0.5rem; flex: 1; justify-content: center; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-dropdown_root { position: relative; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-dropdown { -moz-appearance: none; appearance: none; -webkit-appearance: none; background: var( --cb-card, #ffffff ); border: 1px solid var( --cb-border, #dddddd ); border-radius: 8px; padding: 0.4rem 1.5rem 0.4rem 0.7rem; font-family: var( --cb-display-font, var( --cb-font-family, inherit ) ); font-size: 0.9rem; font-weight: 500; color: var( --cb-text, #222222 ); cursor: pointer; min-width: 5.5rem; } :is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-dropdown:focus { outline: 2px solid var( --cb-primary, #222222 ); outline-offset: 2px; } /* When dropdowns are present (DOB context), the heavy 135° hatching that * reads as "blocked / booked" on the wizard's date pickers is the wrong * affordance — out-of-range future dates aren't blocked, they're just outside * the valid window. Replace with a soft grayed-out treatment. */ :is(.cb-datepicker__popover, .cb-datepicker__sheet):has(.rdp-dropdowns) .rdp-disabled:not(.rdp-outside) .rdp-day_button { background-image: none; color: var( --cb-muted, #9ba3b3 ); opacity: 0.55; } /* Copyright (c) 2026 ADS Solutions. See LICENSE.txt for dual-license terms. */ /* ──────────────────────────────────────────────────────────────────────── * DateRangePicker — Airbnb-style range calendar * * Complements DatePicker.css with range-specific layout and states. * The range midline bar + half-gradient bookend treatment lives in * DatePicker.css under .cb-datepicker__popover; this file adds the * inline-mode styling + the two-input field layout above the popover. * * Airbnb's range picker specifics we mirror here: * - Two months side-by-side on desktop, stacked below 640px * - Inline calendar (no popover) renders inside a card with the * same shadow + radius as the popover — used by the rental step * - "N nights selected" footer is a subdued line above the card's * bottom edge, not an accented pill * ──────────────────────────────────────────────────────────────────────── */ .cb-daterange { /* Anchor for the absolute-positioned popover below; without `relative` * the popover finds the next positioned ancestor (often ) and * renders at the bottom of the page instead of below the inputs. */ position: relative; font-family: var( --cb-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif ); width: 100%; color: var( --cb-text, #222222 ); } /* ── Two-input field (Start / End) above the popover ───────────────────── */ .cb-daterange__inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items: end; } .cb-daterange__arrow { padding-bottom: 0.875rem; color: var( --cb-muted, #717171 ); font-size: 1.125rem; line-height: 1; } .cb-daterange__label { display: block; font-family: var( --cb-font-family, inherit ); font-size: 0.75rem; font-weight: 500; text-transform: none; letter-spacing: normal; color: var( --cb-muted, #717171 ); margin-bottom: 0.375rem; } /* ── Popover override — wider for the two-month view ──────────────────── */ .cb-daterange__popover { /* Inherits rounded card + shadow from .cb-datepicker__popover in * DatePicker.css. We just widen it so both months fit side-by-side. */ left: 0; right: auto; min-width: 640px; max-width: calc( 100vw - 1.5rem ); } /* Nav buttons inherit the flex-caption layout from DatePicker.css — no * per-popover override needed. With numberOfMonths=2 the library places * prev on the first caption row and next on the last, both participating * in their caption's flex row. */ /* ── Inline mode — embedded calendar card (used by RentalDateRangeStep) ── */ .cb-daterange__calendar--inline { /* Same card chrome as the popover — so inline + popover feel like one * visual system. No absolute positioning; sits in the form flow. */ background: var( --cb-card, #ffffff ); border: 1px solid var( --cb-border, rgba( 0, 0, 0, 0.04 ) ); border-radius: 16px; box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.08 ), 0 2px 4px rgba( 0, 0, 0, 0.04 ); padding: 1.5rem 1.25rem 1.25rem; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 720px; margin: 0 auto; color: var( --cb-text, #222222 ); position: relative; } /* Reuse every .rdp-* override from DatePicker.css by matching its selector * chain with .cb-daterange__calendar--inline as an alternate ancestor. */ .cb-daterange__calendar--inline .rdp-root, .cb-daterange__calendar--inline .rdp-root * { box-sizing: border-box; } .cb-daterange__calendar--inline .rdp-root { --rdp-accent-color: var( --cb-primary, #222222 ); --rdp-accent-background-color: var( --cb-surface-2, #f2f2f2 ); --rdp-day-height: 2.75rem; --rdp-day-width: 2.75rem; --rdp-day_button-width: 2.5rem; --rdp-day_button-height: 2.5rem; --rdp-day_button-border-radius: 999px; --rdp-today-color: inherit; --rdp-range_middle-background-color: var( --cb-surface-2, #f0f0f0 ); --rdp-range_middle-color: var( --cb-text, #222222 ); --rdp-selected-border: 0; font-family: var( --cb-font-family, inherit ); color: var( --cb-text, #222222 ); margin: 0; } .cb-daterange__calendar--inline .rdp-day { padding: 0; border: 0; vertical-align: middle; text-align: center; } .cb-daterange__calendar--inline .rdp-month { margin: 0; } /* Same [prev] [label] [next] flex caption as DatePicker — see * DatePicker.css for the rationale behind display:contents. */ .cb-daterange__calendar--inline .rdp-month_caption { display: flex; justify-content: space-between; align-items: center; padding: 0 0 1rem; gap: 0.5rem; } .cb-daterange__calendar--inline .rdp-caption_label { flex: 1; font-family: var( --cb-display-font, var( --cb-font-family, inherit ) ); font-size: 1rem; font-weight: 500; color: var( --cb-text, #222222 ); letter-spacing: normal; text-transform: none; padding: 0; margin: 0; border: 0; background: none; line-height: 1.4; text-align: center; } .cb-daterange__calendar--inline .rdp-nav { display: contents; } .cb-daterange__calendar--inline .rdp-button_previous, .cb-daterange__calendar--inline .rdp-button_next { flex-shrink: 0; width: 2rem; height: 2rem; padding: 0; border: 1px solid var( --cb-border, #dddddd ); background: var( --cb-card, #ffffff ); color: var( --cb-text, #222222 ); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, border-color 120ms ease; } .cb-daterange__calendar--inline .rdp-button_previous { order: -1; } .cb-daterange__calendar--inline .rdp-button_next { order: 1; } .cb-daterange__calendar--inline .rdp-button_previous:hover:not([disabled]), .cb-daterange__calendar--inline .rdp-button_next:hover:not([disabled]) { background: var( --cb-surface-2, #f7f7f7 ); border-color: var( --cb-text, #222222 ); } .cb-daterange__calendar--inline .rdp-button_previous[disabled], .cb-daterange__calendar--inline .rdp-button_next[disabled] { opacity: 0.3; cursor: default; } .cb-daterange__calendar--inline .rdp-chevron { width: 14px; height: 14px; fill: currentColor; } .cb-daterange__calendar--inline .rdp-weekdays { border-bottom: 0; } .cb-daterange__calendar--inline .rdp-weekday { font-family: var( --cb-font-family, inherit ); font-size: 0.75rem; font-weight: 400; color: var( --cb-muted, #717171 ); text-transform: none; letter-spacing: normal; text-align: center; padding: 0.25rem 0; width: 2.75rem; } .cb-daterange__calendar--inline .rdp-day_button { width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; border: 1px solid transparent; background: transparent; color: var( --cb-text, #222222 ); font-family: inherit; font-size: 0.875rem; font-weight: 400; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .cb-daterange__calendar--inline .rdp-day_button:hover:not([disabled]) { border-color: var( --cb-text, #222222 ); background: transparent; } .cb-daterange__calendar--inline .rdp-day_button:focus-visible { outline: none; border-color: var( --cb-text, #222222 ); box-shadow: 0 0 0 2px var( --cb-card, #ffffff ), 0 0 0 3px var( --cb-text, #222222 ); } .cb-daterange__calendar--inline .rdp-today:not(.rdp-selected):not(.rdp-range_start):not(.rdp-range_end) .rdp-day_button { font-weight: 600; border-color: var( --cb-text, #222222 ); } .cb-daterange__calendar--inline .rdp-day.rdp-selected .rdp-day_button, .cb-daterange__calendar--inline .rdp-day.rdp-range_start .rdp-day_button, .cb-daterange__calendar--inline .rdp-day.rdp-range_end .rdp-day_button { background: var( --cb-primary, #222222 ); color: var( --cb-on-primary, var( --cb-card, #ffffff ) ); border-color: var( --cb-primary, #222222 ); font-weight: 500; } .cb-daterange__calendar--inline .rdp-day.rdp-selected .rdp-day_button:hover, .cb-daterange__calendar--inline .rdp-day.rdp-range_start .rdp-day_button:hover, .cb-daterange__calendar--inline .rdp-day.rdp-range_end .rdp-day_button:hover { background: var( --cb-primary-dark, var( --cb-primary, #222222 ) ); border-color: var( --cb-primary-dark, var( --cb-primary, #222222 ) ); } .cb-daterange__calendar--inline .rdp-disabled .rdp-day_button, .cb-daterange__calendar--inline .rdp-outside .rdp-day_button { color: var( --cb-muted, #dddddd ); opacity: 0.4; cursor: default; } /* G3 (v2.4.1) — 135° hatching pattern replaces the v1.36-era line-through * per the B3 punch list row P-3 ("Line-through only — not visible on * mobile"). The hatch reads at every viewport (including 360px) and the * color-mix keeps it token-driven so Harbor / Helm direction restyles * automatically. The `:not(.rdp-outside)` guard keeps next/prev-month * padding days at the muted-opacity treatment they already have above. * * Note: the legend label below the calendar reads "Booked" — this rule * is what the customer maps to that visual key. */ .cb-daterange__calendar--inline .rdp-disabled:not(.rdp-outside) .rdp-day_button { background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 4px, color-mix( in oklab, var( --cb-text, #16243a ) 18%, transparent ) 4px, color-mix( in oklab, var( --cb-text, #16243a ) 18%, transparent ) 5px ); } .cb-daterange__calendar--inline .rdp-disabled .rdp-day_button:hover, .cb-daterange__calendar--inline .rdp-outside .rdp-day_button:hover { border-color: transparent; /* `background-color` (not the `background` shorthand) so the hatching * pattern from the rule above is preserved when the cursor passes over. */ background-color: transparent; } .cb-daterange__calendar--inline .rdp-hidden { visibility: hidden; } /* Range midline — td background so text reads through the button */ .cb-daterange__calendar--inline .rdp-range_middle { background: var( --cb-surface-2, #f0f0f0 ); } .cb-daterange__calendar--inline .rdp-range_middle .rdp-day_button { background: transparent; color: var( --cb-text, #222222 ); border-color: transparent; font-weight: 400; } .cb-daterange__calendar--inline .rdp-range_middle .rdp-day_button:hover { border-color: var( --cb-text, #222222 ); } /* Half-gradient bookends */ .cb-daterange__calendar--inline .rdp-range_start { background: linear-gradient( to right, transparent 50%, var( --cb-surface-2, #f0f0f0 ) 50% ); } .cb-daterange__calendar--inline .rdp-range_end { background: linear-gradient( to right, var( --cb-surface-2, #f0f0f0 ) 50%, transparent 50% ); } .cb-daterange__calendar--inline .rdp-range_start.rdp-range_end { background: transparent; } [dir="rtl"] .cb-daterange__calendar--inline .rdp-range_start { background: linear-gradient( to left, transparent 50%, var( --cb-surface-2, #f0f0f0 ) 50% ); } [dir="rtl"] .cb-daterange__calendar--inline .rdp-range_end { background: linear-gradient( to left, var( --cb-surface-2, #f0f0f0 ) 50%, transparent 50% ); } .cb-daterange__calendar--inline .rdp-months, .cb-daterange__popover .rdp-months { display: flex; /* Match DatePicker.css — see same comment there. `nowrap` prevents the * `display: contents` nav children from being pushed onto separate rows * when the container is narrower than [prev]+months+[next]. */ flex-wrap: nowrap; gap: 2.5rem; justify-content: center; align-items: flex-start; } /* ── "N days selected" footer — quiet, not a pill ──────────────────────── */ .cb-daterange__footer { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var( --cb-border, #ebebeb ); color: var( --cb-text, #222222 ); font-size: 0.875rem; text-align: center; width: 100%; } .cb-daterange__footer strong { font-weight: 600; } /* ── Responsive: stack on mobile ───────────────────────────────────────── */ @media ( max-width: 640px ) { .cb-daterange__inputs { grid-template-columns: 1fr; gap: 0.5rem; } .cb-daterange__arrow { display: none; } .cb-daterange__popover { min-width: auto; max-width: calc( 100vw - 1.5rem ); } .cb-daterange__calendar--inline { padding: 1.25rem 0.75rem 1rem; border-radius: 12px; } .cb-daterange__calendar--inline .rdp-months, .cb-daterange__popover .rdp-months { flex-direction: column; gap: 1.5rem; } .cb-daterange__calendar--inline .rdp-root { --rdp-day-height: 2.5rem; --rdp-day-width: 2.5rem; --rdp-day_button-width: 2.25rem; --rdp-day_button-height: 2.25rem; } .cb-daterange__calendar--inline .rdp-day_button { width: 2.25rem; height: 2.25rem; font-size: 0.85rem; } .cb-daterange__calendar--inline .rdp-weekday { width: 2.5rem; font-size: 0.7rem; } } /* ── v2.6.0 — B2 spec footer price chip + mobile sheet stacking ───────── */ .cb-daterange__price-chip { margin-left: 8px; color: var( --bu-accent, #c1683a ); font-weight: 600; } /* On the mobile bottom-sheet variant the two months stack vertically since side-by-side won't fit on a phone. The .cb-datepicker__sheet base styles (in DatePicker.css) handle the chrome; this overrides the months layout to a column when present inside .cb-daterange__sheet. */ .cb-daterange__sheet .rdp-months { flex-direction: column; gap: 0.5rem; } .cb-daterange__sheet .rdp-day_button { width: 2.4rem; height: 2.4rem; font-size: 0.9rem; } .cb-daterange__sheet .rdp-weekday { width: 2.4rem; font-size: 0.7rem; } .cb-daterange__sheet .cb-datepicker__sheet-action--primary[disabled] { opacity: 0.5; cursor: not-allowed; } /* Copyright (c) 2026 ADS Solutions. See LICENSE.txt for dual-license terms. */ /* ──────────────────────────────────────────────────────────────────────── * TimePicker — popover with a scrollable grid of time slots * * Visual system mirrors DatePicker.css so a form that has both a date * and a time picker feels like ONE thing: * - Same rounded card + layered shadow on the popover * - Same theme-token-driven typography * - Slots use the DatePicker's hover/selected conventions — thin * outline on hover, solid-fill on selected * - Grid is 3-up on desktop, 2-up on mobile * - Popover is scrollable (max-height) so 96 slots at 15-min * intervals don't blow out the card * * Uses theme tokens exclusively; no literal colors. * ──────────────────────────────────────────────────────────────────────── */ /* ── Wrapper + text input ──────────────────────────────────────────────── */ .cb-timepicker { position: relative; display: inline-block; width: 100%; max-width: 10rem; font-family: var( --cb-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif ); } .cb-timepicker__input-wrap { position: relative; display: flex; align-items: center; } .cb-timepicker__input { width: 100%; height: 3rem; padding: 0 2.75rem 0 1rem; border: 1px solid var( --cb-border, #dddddd ); border-radius: 12px; background: var( --cb-card, #ffffff ); color: var( --cb-text, #222222 ); font-family: inherit; font-size: 0.9375rem; font-variant-numeric: tabular-nums; line-height: 1.2; transition: border-color 120ms ease, box-shadow 120ms ease; } .cb-timepicker__input::-moz-placeholder { color: var( --cb-muted, #717171 ); opacity: 1; } .cb-timepicker__input::placeholder { color: var( --cb-muted, #717171 ); opacity: 1; } .cb-timepicker__input:hover:not(:disabled) { border-color: var( --cb-text, #222222 ); } .cb-timepicker__input:focus { outline: none; border-color: var( --cb-text, #222222 ); box-shadow: 0 0 0 1px var( --cb-text, #222222 ); } .cb-timepicker__input:disabled { background: var( --cb-surface-2, #f7f7f7 ); color: var( --cb-muted, #717171 ); cursor: not-allowed; } .cb-timepicker__trigger { position: absolute; right: 0.5rem; top: 50%; transform: translateY( -50% ); width: 2rem; height: 2rem; border: 0; background: transparent; color: var( --cb-muted, #717171 ); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease; } .cb-timepicker__trigger:hover:not(:disabled) { background: var( --cb-surface-2, #f2f2f2 ); color: var( --cb-text, #222222 ); } .cb-timepicker__trigger:disabled { cursor: not-allowed; opacity: 0.4; } /* ── Popover ───────────────────────────────────────────────────────────── */ .cb-timepicker__popover { position: absolute; z-index: 50; top: calc( 100% + 0.5rem ); left: 0; background: var( --cb-card, #ffffff ); border: 1px solid var( --cb-border, rgba( 0, 0, 0, 0.04 ) ); border-radius: 16px; box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.14 ), 0 2px 4px rgba( 0, 0, 0, 0.08 ); padding: 0.75rem; /* Wide enough that 3 columns of "HH:MM" (5 tabular chars) never wrap. * Previously 14rem → "00:00" was breaking across two lines. */ min-width: 17rem; max-height: 18rem; overflow-y: auto; font-family: var( --cb-font-family, inherit ); color: var( --cb-text, #222222 ); } .cb-timepicker__grid { display: grid; /* min of 3.5rem per column prevents shrinking below "HH:MM" content. */ grid-template-columns: repeat( 3, minmax( 3.5rem, 1fr ) ); gap: 0.25rem; } .cb-timepicker__slot { padding: 0.5rem 0.5rem; border: 1px solid transparent; background: transparent; color: var( --cb-text, #222222 ); font-family: inherit; font-size: 0.9rem; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; /* never wrap "HH:MM" across lines */ border-radius: 999px; cursor: pointer; text-align: center; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .cb-timepicker__slot:hover:not(:disabled) { border-color: var( --cb-text, #222222 ); background: transparent; } .cb-timepicker__slot:focus-visible { outline: none; border-color: var( --cb-text, #222222 ); box-shadow: 0 0 0 2px var( --cb-card, #ffffff ), 0 0 0 3px var( --cb-text, #222222 ); } .cb-timepicker__slot--selected { background: var( --cb-primary, #222222 ); color: var( --cb-on-primary, var( --cb-card, #ffffff ) ); border-color: var( --cb-primary, #222222 ); font-weight: 500; } .cb-timepicker__slot--selected:hover { background: var( --cb-primary-dark, var( --cb-primary, #222222 ) ); border-color: var( --cb-primary-dark, var( --cb-primary, #222222 ) ); } /* v2.25.0 — slot is in a disabled range (booked + buffer cooldown) for the * current date. Still rendered (operators want customers to see what was * taken) but unclickable + visually struck-through. */ .cb-timepicker__slot--disabled, .cb-timepicker__slot:disabled { color: var( --cb-text-muted, #94a3b8 ); background: var( --cb-surface-subtle, #f8fafc ); text-decoration: line-through; cursor: not-allowed; opacity: 0.55; } .cb-timepicker__slot--disabled:hover, .cb-timepicker__slot:disabled:hover { border-color: var( --cb-border, #e2e8f0 ); color: var( --cb-text-muted, #94a3b8 ); } .cb-timepicker__empty { padding: 1rem; text-align: center; color: var( --cb-muted, #717171 ); font-size: 0.875rem; } /* ── Responsive: tighter grid on mobile ────────────────────────────────── */ @media ( max-width: 640px ) { .cb-timepicker__popover { padding: 0.5rem; min-width: 13rem; max-width: calc( 100vw - 1.5rem ); } .cb-timepicker__grid { grid-template-columns: repeat( 2, minmax( 3.5rem, 1fr ) ); } .cb-timepicker__slot { padding: 0.5rem 0.5rem; font-size: 0.875rem; } } /* ── v2.6.0 — B2 spec mobile bottom-sheet w/ two-wheel iOS-style picker ── */ .cb-timepicker__backdrop { position: fixed; inset: 0; background: rgba(22, 36, 58, 0.42); z-index: 60; } .cb-timepicker__sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var( --bu-bg-elev, #fff ); border-top-left-radius: var( --bu-radius-lg, 18px ); border-top-right-radius: var( --bu-radius-lg, 18px ); box-shadow: 0 -16px 40px -8px rgba(0, 0, 0, 0.18); padding: 14px 16px 18px; max-height: 90vh; overflow: hidden; animation: cb-datepicker-sheet-rise 0.22s ease-out; } .cb-timepicker__sheet-handle { width: 36px; height: 4px; border-radius: 999px; background: var( --bu-line, rgba(22, 36, 58, 0.10) ); margin: 0 auto 12px; } .cb-timepicker__sheet-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; } .cb-timepicker__sheet-title { font-family: var( --bu-font-display, var( --cb-display-font, serif ) ); font-weight: 600; font-size: var( --bu-fs-base, 15px ); color: var( --bu-ink, #16243a ); } .cb-timepicker__sheet-action { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: var( --bu-fs-sm, 13px ); padding: 8px 14px; border-radius: var( --bu-radius, 10px ); cursor: pointer; font-weight: 500; white-space: nowrap; } .cb-timepicker__sheet-action--ghost { color: var( --bu-ink-2, #3d4a60 ); border-color: var( --bu-line ); } .cb-timepicker__sheet-action--primary { background: var( --bu-primary, #16243a ); color: #fff; font-weight: 600; } /* Two-wheel layout */ .cb-timepicker__wheels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: 240px; /* v2.14.1 — exposed as a CSS variable so the wheel-track padding can * compute its centring offset off the wheels' actual height. The * previous `calc(50% - 22px)` resolved 50% against the track's * WIDTH (CSS spec for padding %), not its height — on a ~175px-wide * wheel that gave ~65px of padding instead of the 98px needed to * centre the selection over the highlight band. Operator-reported * on Android / 390x844: selected hour appeared at the top of the * wheel, band sat below it. */ --cb-timepicker-wheel-h: 240px; --cb-timepicker-item-h: 44px; } .cb-timepicker__wheel { position: relative; overflow: hidden; border-radius: var( --bu-radius, 10px ); background: var( --bu-bg-sunk, #f0ebe1 ); } .cb-timepicker__wheel-label { position: absolute; top: 8px; left: 12px; font-size: 11px; color: var( --bu-ink-3 ); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; z-index: 1; pointer-events: none; } .cb-timepicker__wheel-band { position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-22px); height: 44px; border-radius: 8px; background: color-mix(in oklab, var( --bu-primary ) 12%, transparent); pointer-events: none; } .cb-timepicker__wheel-track { position: relative; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; /* v2.14.1 — height-based centring: half the wheel minus half the item. * Was `calc(50% - 22px)` — but padding-% resolves against the parent's * WIDTH, not its height, which broke alignment on phones. */ padding: calc((var(--cb-timepicker-wheel-h, 240px) - var(--cb-timepicker-item-h, 44px)) / 2) 0; } .cb-timepicker__wheel-track::-webkit-scrollbar { display: none; } .cb-timepicker__wheel-item { scroll-snap-align: center; text-align: center; font-size: var( --bu-fs-lg, 17px ); font-variant-numeric: tabular-nums; color: var( --bu-ink-2 ); font-weight: 500; transition: color 0.12s, font-weight 0.12s; } .cb-timepicker__wheel-item.is-selected { color: var( --bu-primary ); font-weight: 700; } /* BoatUP — design tokens (Phase R) * * Single source of truth for the visual layer across all 3 surfaces: * - Admin UI (#cb-root scope) * - Customer wizard (.cb-booking-widget scope, with operator-overridable colors) * - Partner portal (.cb-partner-portal-body scope, with operator-overridable colors) * * Design direction: modern minimal (Stripe / Vercel / Linear). * * Tokens are layered: * 1. Raw scale — `--cb-color-blue-500`, `--cb-space-4`, `--cb-text-base` * 2. Semantic — `--cb-text-primary`, `--cb-surface`, `--cb-border` * * Components ALWAYS read the semantic tokens. Surface-level customisation * (operator branding, theme presets, dark mode in the future) only needs to * remap the semantic tokens to different raw-scale values. */ /* ── BoatUP admin tokens (Phase 2 / Phase U) ──────────────────────────────── * * The admin SPA uses --bu-* tokens (the handoff naming) rather than --cb-* * (the wizard naming) so the handoff JSX in BoatUP-handoff/boatup/project/ * admin.jsx can be ported almost line-for-line. Most --bu-* aliases map to * existing --cb-* tokens; a few admin-only tokens (--bu-bg-elev, --bu-bg-sunk, * --bu-line, the soft/strong success/danger pairs, fs-3xl) don't have --cb-* * equivalents and live here as the source of truth for the admin chrome. * * The admin is direction-agnostic — always Harbor (cream + serif). No * [data-cb-direction] block is needed here; admin chrome reads --bu-* * directly. Values are sampled from BoatUP-handoff/boatup/project/tokens.css. */ :root { /* Ink scale — primary / secondary / tertiary text */ --bu-ink-1: #16243a; --bu-ink-2: #3d4a60; --bu-ink-3: #6b7689; --bu-ink-4: #9ba3b3; /* Surfaces */ --bu-bg: #f8f5ef; /* page background (Harbor cream) */ --bu-bg-elev: #ffffff; /* card / panel background */ --bu-bg-sunk: #f0ebe1; /* hover / track / inset */ --bu-line: rgba(22, 36, 58, 0.10); --bu-line-2: rgba(22, 36, 58, 0.06); /* Brand */ --bu-primary: #16243a; --bu-primary-rgb: 22, 36, 58; --bu-primary-ink: #ffffff; --bu-primary-soft: rgba(22, 36, 58, 0.08); --bu-accent: #c1683a; /* terracotta */ --bu-accent-soft: #f3e3d6; /* Status — strong + soft pairs for KPI deltas, schedule bars, etc. */ --bu-success: #2e7a55; --bu-success-soft: #d8ead9; --bu-warn: #b87a14; --bu-warn-soft: #f4e6c5; --bu-danger: #a52a2a; --bu-danger-soft: #f1d9d4; /* Type families */ --bu-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --bu-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bu-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', monospace; /* Type scale (admin uses fixed sizes, no scale multiplier) */ --bu-fs-xs: 11px; --bu-fs-sm: 13px; --bu-fs-md: 15px; --bu-fs-lg: 17px; --bu-fs-xl: 24px; --bu-fs-2xl: 28px; --bu-fs-3xl: 34px; --bu-fs-4xl: 64px; /* Radii */ --bu-radius-sm: 6px; --bu-radius-md: 10px; --bu-radius-lg: 18px; --bu-radius-pill: 999px; /* Shadows */ --bu-shadow-1: 0 1px 2px rgba(22, 36, 58, 0.06), 0 0 0 1px rgba(22, 36, 58, 0.04); --bu-shadow-2: 0 2px 6px rgba(22, 36, 58, 0.06), 0 8px 24px rgba(22, 36, 58, 0.08); /* ── Color: raw scale ──────────────────────────────────────────────────── */ /* Slate (neutral) */ --cb-color-slate-50: #f8fafc; --cb-color-slate-100: #f1f5f9; --cb-color-slate-200: #e2e8f0; --cb-color-slate-300: #cbd5e1; --cb-color-slate-400: #94a3b8; --cb-color-slate-500: #64748b; --cb-color-slate-600: #475569; --cb-color-slate-700: #334155; --cb-color-slate-800: #1e293b; --cb-color-slate-900: #0f172a; /* Blue (primary brand) */ --cb-color-blue-50: #eff6ff; --cb-color-blue-100: #dbeafe; --cb-color-blue-200: #bfdbfe; --cb-color-blue-300: #93c5fd; --cb-color-blue-400: #60a5fa; --cb-color-blue-500: #3b82f6; --cb-color-blue-600: #2563eb; --cb-color-blue-700: #1d4ed8; --cb-color-blue-800: #1e40af; --cb-color-blue-900: #1e3a8a; /* Green (success) */ --cb-color-green-50: #f0fdf4; --cb-color-green-100: #dcfce7; --cb-color-green-500: #22c55e; --cb-color-green-600: #16a34a; --cb-color-green-700: #15803d; /* Amber (warning) */ --cb-color-amber-50: #fffbeb; --cb-color-amber-100: #fef3c7; --cb-color-amber-500: #f59e0b; --cb-color-amber-600: #d97706; --cb-color-amber-700: #b45309; /* Red (danger / error) */ --cb-color-red-50: #fef2f2; --cb-color-red-100: #fee2e2; --cb-color-red-500: #ef4444; --cb-color-red-600: #dc2626; --cb-color-red-700: #b91c1c; /* Pure */ --cb-color-white: #ffffff; --cb-color-black: #000000; /* ── Color: semantic ───────────────────────────────────────────────────── */ /* Surfaces */ --cb-bg: var( --cb-color-slate-50 ); /* page background */ --cb-surface: var( --cb-color-white ); /* cards, panels */ --cb-surface-raised: var( --cb-color-white ); /* modals, popovers */ --cb-surface-subtle: var( --cb-color-slate-100 ); /* striped rows, hover bg */ /* Text */ --cb-text-primary: var( --cb-color-slate-900 ); --cb-text-secondary: var( --cb-color-slate-700 ); --cb-text-muted: var( --cb-color-slate-500 ); --cb-text-inverse: var( --cb-color-white ); /* Borders / dividers */ --cb-border: var( --cb-color-slate-200 ); --cb-border-strong: var( --cb-color-slate-300 ); --cb-border-subtle: var( --cb-color-slate-100 ); /* Brand (operator-overridable on wizard / partner — semantic stays the same) */ --cb-brand: var( --cb-color-blue-600 ); --cb-brand-hover: var( --cb-color-blue-700 ); --cb-brand-subtle: var( --cb-color-blue-50 ); --cb-brand-text: var( --cb-color-blue-700 ); --cb-on-brand: var( --cb-color-white ); /* Status */ --cb-success: var( --cb-color-green-600 ); --cb-success-subtle: var( --cb-color-green-50 ); --cb-success-text: var( --cb-color-green-700 ); --cb-warning: var( --cb-color-amber-600 ); --cb-warning-subtle: var( --cb-color-amber-50 ); --cb-warning-text: var( --cb-color-amber-700 ); --cb-danger: var( --cb-color-red-600 ); --cb-danger-hover: var( --cb-color-red-700 ); --cb-danger-subtle: var( --cb-color-red-50 ); --cb-danger-text: var( --cb-color-red-700 ); /* ── Spacing: 4px grid ─────────────────────────────────────────────────── */ --cb-space-0: 0; --cb-space-1: 0.25rem; /* 4px */ --cb-space-2: 0.5rem; /* 8px */ --cb-space-3: 0.75rem; /* 12px */ --cb-space-4: 1rem; /* 16px */ --cb-space-5: 1.25rem; /* 20px */ --cb-space-6: 1.5rem; /* 24px */ --cb-space-8: 2rem; /* 32px */ --cb-space-10: 2.5rem; /* 40px */ --cb-space-12: 3rem; /* 48px */ --cb-space-16: 4rem; /* 64px */ --cb-space-20: 5rem; /* 80px */ /* ── Border radius ─────────────────────────────────────────────────────── */ --cb-radius-none: 0; --cb-radius-sm: 0.25rem; /* 4px */ --cb-radius-md: 0.375rem; /* 6px — default for buttons + inputs */ --cb-radius-lg: 0.5rem; /* 8px — default for cards */ --cb-radius-xl: 0.75rem; /* 12px */ --cb-radius-2xl: 1rem; /* 16px */ --cb-radius-full: 9999px; /* pills, avatars */ /* ── Shadows ───────────────────────────────────────────────────────────── */ /* Shadow scale tuned for light backgrounds + minimal-modern feel. * `focus` is the focus-visible ring; never use box-shadow for non-focus rings. */ --cb-shadow-none: none; --cb-shadow-sm: 0 1px 2px 0 rgba( 15, 23, 42, 0.04 ); --cb-shadow-md: 0 1px 3px 0 rgba( 15, 23, 42, 0.06 ), 0 1px 2px -1px rgba( 15, 23, 42, 0.04 ); --cb-shadow-lg: 0 4px 6px -1px rgba( 15, 23, 42, 0.08 ), 0 2px 4px -2px rgba( 15, 23, 42, 0.04 ); --cb-shadow-xl: 0 10px 15px -3px rgba( 15, 23, 42, 0.10 ), 0 4px 6px -4px rgba( 15, 23, 42, 0.06 ); --cb-shadow-focus: 0 0 0 3px rgba( 59, 130, 246, 0.35 ); /* blue-500 @ 35% */ /* ── Typography ────────────────────────────────────────────────────────── */ /* Font stack — Inter takes priority when locally installed (some operators have * it as a system font). Falls back to native system fonts so the plugin works * out of the box without shipping woff2 binaries. Operators who want guaranteed * Inter rendering can drop the woff2 files into assets/branding/fonts/ later. */ --cb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; --cb-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Type scale (tight, info-dense, but readable) */ --cb-text-xs: 0.75rem; /* 12px — meta text */ --cb-text-sm: 0.8125rem; /* 13px — body small */ --cb-text-base: 0.875rem; /* 14px — body default */ --cb-text-lg: 1rem; /* 16px — large body */ --cb-text-xl: 1.125rem; /* 18px — section heading */ --cb-text-2xl: 1.5rem; /* 24px — page heading */ --cb-text-3xl: 1.875rem; /* 30px — display */ /* Weight + line-height + letter spacing */ --cb-font-weight-regular: 400; --cb-font-weight-medium: 500; --cb-font-weight-semibold: 600; --cb-font-weight-bold: 700; --cb-line-height-tight: 1.2; --cb-line-height-snug: 1.4; --cb-line-height-normal: 1.5; --cb-line-height-relaxed: 1.6; --cb-letter-spacing-tight: -0.01em; /* headings */ --cb-letter-spacing-wide: 0.025em; /* small caps, labels */ /* ── Motion ────────────────────────────────────────────────────────────── */ --cb-duration-fast: 100ms; --cb-duration-base: 150ms; --cb-duration-medium: 200ms; --cb-duration-slow: 300ms; --cb-ease-standard: cubic-bezier( 0.4, 0, 0.2, 1 ); --cb-ease-in: cubic-bezier( 0.4, 0, 1, 1 ); --cb-ease-out: cubic-bezier( 0, 0, 0.2, 1 ); /* ── Z-index ───────────────────────────────────────────────────────────── */ --cb-z-base: 0; --cb-z-dropdown: 1000; --cb-z-sticky: 1020; --cb-z-overlay: 1040; --cb-z-modal: 1050; --cb-z-toast: 1080; } /* ───────────────────────────────────────────────────────────── * Phase T — Customer wizard directions (BoatUP design system) * * Two directions replace the four Phase-S presets (ocean / sunset / * minimal / classic). Each direction re-declares every token the * wizard reads, scoped under [data-cb-direction] so the swap is a * single attribute on the wizard root with no residual state. * * Harbor — warm editorial: Fraunces serif display + Inter body, * terracotta accent on a cream/navy palette. * Helm — cool dense: Inter throughout, deep teal primary on a * cool gray palette. * * Operators on the four old presets are migrated by * `class-settings.php::migrate_theme_preset_to_direction()` on * plugin load: * ocean | sunset | classic | custom → harbor * minimal → helm * * Live operator tweaks layer on top via [data-cb-density], * [data-cb-radius], [data-cb-btn], and an inline `--cb-scale` font * multiplier. See sections further down. * ───────────────────────────────────────────────────────────── */ /* Token consumers — the wizard reads these names today (build_wizard_css * and inline JSX), so direction blocks meet consumers where they live: * * --cb-background page bg --cb-primary brand * --cb-card card / popover bg --cb-primary-rgb "r, g, b" * --cb-border divider / input --cb-primary-dark hover * --cb-text body text --cb-primary-light subtle fill * --cb-muted muted text colour --cb-accent secondary brand * --cb-surface-2 second surface tint --cb-accent-soft subtle accent fill * --cb-display-font headings --cb-font-family body font * --cb-btn-radius button + input --cb-card-radius larger card corners * --cb-density padding multiplier --cb-scale font-size multiplier * * Admin UI keeps its own --cb-text-muted etc. in :root — there is * intentionally a two-namespace split between admin and wizard. */ /* Harbor — DEFAULT direction. Tokens emitted both with no attribute * (so existing wizards without the attr render as Harbor) and under * the explicit [data-cb-direction="harbor"] selector for clarity. */ .cb-booking-widget, [data-cb-direction="harbor"] { --cb-background: #f8f5ef; --cb-card: #ffffff; --cb-surface-2: #f0ebe1; --cb-border: rgba(22, 36, 58, 0.10); --cb-text: #16243a; --cb-muted: #6b7689; --cb-primary: #16243a; --cb-primary-rgb: 22, 36, 58; --cb-primary-dark: #0c1525; --cb-primary-light: rgba(22, 36, 58, 0.08); --cb-accent: #c1683a; --cb-accent-rgb: 193, 104, 58; --cb-accent-soft: #f3e3d6; --cb-display-font: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --cb-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cb-btn-radius: 14px; --cb-card-radius: 22px; } [data-cb-direction="helm"] { --cb-background: #f6f7f8; --cb-card: #ffffff; --cb-surface-2: #eef0f2; --cb-border: rgba(13, 27, 34, 0.10); --cb-text: #0d1b22; --cb-muted: #5b6873; --cb-primary: #0a6f6a; --cb-primary-rgb: 10, 111, 106; --cb-primary-dark: #075752; --cb-primary-light: rgba(10, 111, 106, 0.08); --cb-accent: #d3791d; --cb-accent-rgb: 211, 121, 29; --cb-accent-soft: #faecd7; --cb-display-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cb-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cb-btn-radius: 14px; --cb-card-radius: 22px; } /* ── Live operator tweaks ───────────────────────────────────── * * These three attribute blocks override radius across the wizard, * which is the most user-visible tweak. Density is a multiplier * applied as a CSS variable that consumers (button heights, card * paddings, gaps) read via calc(). Font-scale is set inline on the * wizard root from JS (operator setting) — there's no preset block * for it, just the variable definition below. * ───────────────────────────────────────────────────────────── */ /* Density multiplier — defaults below; overrides via attribute */ .cb-booking-widget, [data-cb-direction="harbor"], [data-cb-direction="helm"] { --cb-density: 1; --cb-scale: 1; } [data-cb-density="compact"] { --cb-density: 0.78; } [data-cb-density="cozy"] { --cb-density: 0.9; } [data-cb-density="comfortable"] { --cb-density: 1.1; } /* Radius tweak — overrides direction's btn + card radius */ [data-cb-radius="sharp"] { --cb-btn-radius: 4px; --cb-card-radius: 6px; } [data-cb-radius="rounded"] { --cb-btn-radius: 14px; --cb-card-radius: 22px; } [data-cb-radius="pill"] { --cb-btn-radius: 999px; --cb-card-radius: 28px; } /* Button-style tweak — soft and outline variants apply at the * component layer (booking.css reads --cb-btn-bg / --cb-btn-fg * accordingly). Filled is the default. */ [data-cb-btn="filled"] { --cb-btn-bg: var(--cb-primary); --cb-btn-fg: var(--cb-on-brand, #ffffff); --cb-btn-border: transparent; } [data-cb-btn="outline"] { --cb-btn-bg: transparent; --cb-btn-fg: var(--cb-primary); --cb-btn-border: var(--cb-primary); } [data-cb-btn="soft"] { --cb-btn-bg: rgba(var(--cb-primary-rgb), 0.12); --cb-btn-fg: var(--cb-primary); --cb-btn-border: transparent; } /* ───────────────────────────────────────────────────────────────────── * Inherit modes — opt the wizard out of its own colour or typography * tokens so the host theme bleeds through. Layout + spacing + radius * always come from the base tokens so the wizard doesn't break * structurally regardless of which (or both) inherit toggles are on. * * v2.18.0 — split into two independent attributes (was single * [data-cb-inherit="true"] block). The legacy attribute is kept as * a one-release alias that maps to "inherit both" so any external * CSS that depended on it doesn't break. * ───────────────────────────────────────────────────────────────────── */ /* Inherit fonts: typography only — colour palette stays branded. */ [data-cb-inherit-fonts="true"] { --cb-font-family: inherit; --cb-display-font: inherit; } /* Inherit colours: bg/text/muted dissolve into the host theme. The * --cb-primary stays currentColor so links / CTAs still show contrast * even when the operator hasn't set a wizard_color_primary. Operator * colour overrides via build_wizard_css are NOT emitted in this mode * (build_wizard_css gates on wizard_inherit_theme_colors), so this * block is the source of truth for the inherited surfaces. */ [data-cb-inherit-colors="true"] { --cb-background: transparent; --cb-card: transparent; --cb-surface: transparent; --cb-text: inherit; --cb-muted: inherit; --cb-primary: currentColor; --cb-primary-rgb: 0, 0, 0; --cb-primary-dark: currentColor; --cb-primary-light:currentColor; } /* Legacy single-toggle alias — pre-v2.18.0 installs that wrote * data-cb-inherit="true" directly continue to inherit both. */ [data-cb-inherit="true"] { --cb-background: transparent; --cb-card: transparent; --cb-surface: transparent; --cb-text: inherit; --cb-muted: inherit; --cb-primary: currentColor; --cb-primary-rgb: 0, 0, 0; --cb-primary-dark: currentColor; --cb-primary-light:currentColor; --cb-display-font: inherit; --cb-font-family: inherit; } /* ───────────────────────────────────────────────────────────────────── * G1 (v2.4.0) — Wizard chrome aliases. * * The Phase 7 handoff (Claude Design Batch G1) ships components that * reference a slightly different set of token names than the Phase T * `--bu-*` system that already lives above. Rather than rewrite every * `var(--bu-*)` reference inside the handoff CSS (and risk drifting from * Claude Design's source-of-truth files in `cruise-booking/docs/phase-7/g1-handoff/`), * we publish a thin alias bridge here. Five aliases + three net-new vars. * * If/when a future batch renames the existing `--bu-*` tokens to match * the handoff convention everywhere, this block can disappear. * ───────────────────────────────────────────────────────────────────── */ :root { /* Aliases — handoff name → existing canonical name */ --bu-ink: var(--bu-ink-1); /* primary text colour */ --bu-fs-base: var(--bu-fs-md); /* body font size */ --bu-radius: var(--bu-radius-md); /* default corner radius */ --bu-font-display: var(--bu-display); /* display / heading font */ --bu-font-body: var(--bu-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif); --bu-font-mono: var(--bu-mono); /* Net-new — values lifted from the G1 handoff tokens.css */ --bu-step: 8px; /* spacing unit (multiplied in calc()) */ --bu-pad-card: calc(28px * var(--bu-density, 1)); --bu-shadow-3: 0 24px 60px -20px rgba(22, 36, 58, .25); } /*