/* BIDO XP — dark navy + cyan/teal aesthetic — design tokens. * * Hand-written vanilla CSS, no build step. The former single application.css * is split into layered files, loaded in cascade order by stylesheet_link_tag * in app/views/layouts/application.html.erb: * * concerns/ tokens + base resets (load first) * utilities/ the small hand-written utility layer (type, spacing, grids) * components/ reusable UI: buttons, pills, cards, forms, shell, nav, … * products/ product-concept blocks: catalog, listing, wheels, checkout, … * * This file is the token layer and must load first. Each component/product * file owns its own responsive (@media) rules at its foot — there is no * separate trailing responsive layer. * * Theming: every surface is scoped under .bx; .bx-dark redeclares the semantic * tokens. Components must read tokens (var(--bx-*)) and never hardcode colors, * so they render correctly on both surfaces. Traveler-specific classes are * prefixed .bido-traveler-* / .bido-trip-* / .bido-wheels-* / .bido-booking-*. */ /* Breakpoint scale — the canonical viewport widths for @media rules. * CSS variables cannot be used inside @media, so this is a documented scale, * not a token: every component/product file keys its co-located @media rules * to one of these four widths. Expressed in rem so they track font size. * * sm 40rem phone * md 48rem small tablet / large phone * lg 64rem tablet — the side-rail / two-pane stack point * xl 80rem wide desktop * * Do not invent a fifth width; pick the nearest of these four. */ :root { /* Type families */ --bx-font-display: 'Nunito', system-ui, sans-serif; --bx-font-sans: 'Nunito Sans', system-ui, sans-serif; --bx-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* Type scale — components read these; no by-eye literal font sizes. The clamp() display headings (base.css) and decorative "ghost" numerals are a separate concern and are not part of this UI text scale. */ --bx-text-3xs: 10px; /* scale floor — 9px was illegible on phones */ --bx-text-2xs: 10px; --bx-text-xs: 11px; --bx-text-sm: 12px; --bx-text-md: 13px; --bx-text: 14px; --bx-text-lg: 16px; --bx-text-xl: 20px; --bx-text-2xl: 26px; --bx-text-3xl: 30px; --bx-text-4xl: 34px; /* Brand */ --bido-cyan: #00A9FF; --bido-blue: #099AFF; --bido-teal: #38C5B5; --bido-coral: #EA2C59; --bido-amber: #F4A11C; --bido-navy: #0A1628; --bido-dark: #0E1B2E; --bido-charcoal: #1A2332; --bido-slate: #2A3444; --bido-muted: #6B7280; --bido-light: #F0F4F8; --bido-cream: #FAFBFD; /* Brand channels — the raw RGB triplets behind the brand hexes. Components compose their own alphas with rgba(var(--bx-*-rgb), 0.x) instead of hardcoding rgba() literals, so a brand change happens in one place. */ --bx-accent-rgb: 0,169,255; /* cyan */ --bx-teal-rgb: 56,197,181; --bx-coral-rgb: 234,44,89; --bx-amber-rgb: 244,161,28; --bx-pros-rgb: 139,124,255; --bx-white-rgb: 255,255,255; --bx-navy-rgb: 10,22,40; --bx-black-rgb: 0,0,0; /* true black — backdrop dimming + deep shadows */ /* Semantic — light surfaces (default for browsing) */ --bx-paper: var(--bido-cream); --bx-paper-2: #F0F4F8; --bx-paper-3: #E2E8F0; --bx-line: #DCE3EC; --bx-line-2: #C5D0DD; --bx-ink: var(--bido-navy); --bx-ink-2: #2A3444; --bx-ink-3: #6B7280; --bx-ink-4: #94A2B5; --bx-accent: var(--bido-cyan); --bx-accent-2: var(--bido-blue); --bx-accent-ink: #0078B5; --bx-accent-tint:#E0F4FF; /* Accent / fill alphas — theme-aware so feature components never hardcode rgba(). Each is redeclared for the dark surface in .bx-dark below. */ --bx-accent-soft: rgba(var(--bx-accent-rgb), 0.08); --bx-accent-line: rgba(var(--bx-accent-rgb), 0.24); --bx-accent-strong: rgba(var(--bx-accent-rgb), 0.30); --bx-fill: rgba(var(--bx-navy-rgb), 0.035); --bx-fill-2: rgba(var(--bx-navy-rgb), 0.06); --bx-warn-soft: rgba(var(--bx-amber-rgb), 0.12); --bx-good-soft: rgba(var(--bx-teal-rgb), 0.10); /* Pillar colors — restated in brand */ --bx-stays: var(--bido-cyan); --bx-wheels: var(--bido-teal); --bx-vibes: var(--bido-amber); --bx-pros: #8B7CFF; --bx-good: var(--bido-teal); --bx-warn: var(--bido-amber); --bx-bad: var(--bido-coral); /* Pillar / status ink — readable text shades for tinted pills, chips and glyphs. Theme-aware: the dark-surface shades are redeclared in .bx-dark, so a component reads one token instead of carrying a light + dark hex. */ --bx-stays-ink: var(--bido-cyan); --bx-wheels-ink: #18A595; --bx-vibes-ink: #B47306; --bx-pros-ink: #6452E6; --bx-good-ink: #18A595; --bx-warn-ink: #B47306; --bx-bad-ink: #C8264D; /* Page chrome — the surface behind the .bx app shell. */ --bx-page-bg: #f0eee9; --bx-r-sm: 6px; --bx-r: 10px; --bx-r-lg: 14px; --bx-r-xl: 22px; --bx-r-pill: 999px; --bx-density: 1; --bx-pad: calc(14px * var(--bx-density)); --bx-gap: calc(12px * var(--bx-density)); /* Control sizing — one source of truth for the height of interactive controls (buttons, inputs, selects, calendar nav). Density-aware so the compact / roomy modes scale every aligned control together. Change the base value here and every button + input tracks it. */ --bx-control-h: calc(38px * var(--bx-density)); --bx-control-h-sm: calc(32px * var(--bx-density)); --bx-control-h-lg: calc(44px * var(--bx-density)); --bx-control-pad-x: calc(12px * var(--bx-density)); /* Button token contract — .btn reads these; variants only swap the vars (see components/buttons.css) rather than re-declaring background/color. */ --btn-bg: var(--bx-ink); --btn-color: #fff; --btn-border: transparent; --bx-shadow-soft: 0 1px 2px rgba(var(--bx-navy-rgb),.04), 0 4px 12px rgba(var(--bx-navy-rgb),.06); --bx-grad-brand: linear-gradient(135deg, var(--bido-cyan) 0%, var(--bido-teal) 100%); } [data-density="compact"] { --bx-density: 0.78; } [data-density="roomy"] { --bx-density: 1.18; } /* Dark surface variant — for the marketing/browse pages, the admin + vendor portals, and the dark shells of the checkout + builder funnel pages (whose dense forms sit on a nested .bx-light-surface island). */ .bx-dark { --bx-paper: var(--bido-navy); --bx-paper-2: var(--bido-dark); --bx-paper-3: var(--bido-charcoal); --bx-line: rgba(var(--bx-white-rgb),0.08); --bx-line-2: rgba(var(--bx-white-rgb),0.14); --bx-ink: #ECF1F8; --bx-ink-2: #C8D2E0; --bx-ink-3: #8B97AB; --bx-ink-4: #5C6B82; --bx-shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35); --bx-accent-soft: rgba(var(--bx-accent-rgb),0.14); --bx-accent-line: rgba(var(--bx-accent-rgb),0.36); --bx-accent-strong: rgba(var(--bx-accent-rgb),0.45); --bx-fill: rgba(var(--bx-white-rgb),0.04); --bx-fill-2: rgba(var(--bx-white-rgb),0.07); --bx-warn-soft: rgba(var(--bx-amber-rgb),0.18); --bx-good-soft: rgba(var(--bx-teal-rgb),0.14); --bx-accent-ink: #6FCFFF; --bx-stays-ink: #6FCFFF; --bx-wheels-ink: #6BDCCF; --bx-vibes-ink: #FFC061; --bx-pros-ink: #B5A8FF; --bx-good-ink: #6BDCCF; --bx-warn-ink: #FFC061; --bx-bad-ink: #FF7895; } /* Light-surface island — re-declares the light semantic tokens so a light panel (calendar popover, home search card, marketing band, light top nav) renders correctly when nested inside a .bx-dark page. These values mirror the :root defaults; this class is the single place they live. It is the sibling of .bx-dark above, so both theme variants stay in the token layer. */ .bx-light-surface { --bx-paper: var(--bido-cream); --bx-paper-2: #F0F4F8; --bx-paper-3: #E2E8F0; --bx-line: #DCE3EC; --bx-line-2: #C5D0DD; --bx-ink: var(--bido-navy); --bx-ink-2: #2A3444; --bx-ink-3: #6B7280; --bx-ink-4: #94A2B5; --bx-shadow-soft: 0 1px 2px rgba(var(--bx-navy-rgb),.04), 0 4px 12px rgba(var(--bx-navy-rgb),.06); --bx-accent-soft: rgba(var(--bx-accent-rgb),0.08); --bx-accent-line: rgba(var(--bx-accent-rgb),0.24); --bx-accent-strong: rgba(var(--bx-accent-rgb),0.30); --bx-accent-ink: #0078B5; --bx-fill: rgba(var(--bx-navy-rgb),0.035); --bx-fill-2: rgba(var(--bx-navy-rgb),0.06); --bx-warn-soft: rgba(var(--bx-amber-rgb),0.12); --bx-good-soft: rgba(var(--bx-teal-rgb),0.10); --bx-stays-ink: var(--bido-cyan); --bx-wheels-ink: #18A595; --bx-vibes-ink: #B47306; --bx-pros-ink: #6452E6; --bx-good-ink: #18A595; --bx-warn-ink: #B47306; --bx-bad-ink: #C8264D; }