/** * BSB Platform storefront theme -- CSS custom properties layered on * Bootstrap 5.3, not a framework replacement. Colors sampled from the * real logo file. Loaded after the Bootstrap CDN stylesheet on every * public storefront page, so load order in matters. * * Two layers: * 1. Bootstrap's OWN root variables, remapped -- Bootstrap 5.3's * utility classes (.text-primary, .bg-primary, .text-bg-primary, * default link color) read var(--bs-primary-rgb) etc. at runtime, * so remapping these re-themes every existing usage of those * classes across every page automatically. * 2. Explicit component overrides for the handful of Bootstrap * components that DON'T read those variables -- verified against * the real compiled CSS: .btn-primary and .form-control:focus * hardcode Bootstrap's blue into their own component-scoped * custom properties at compile time, so remapping --bs-primary * alone does not reach them. */ :root { /* --- Brand tokens (BSB-prefixed, ours to keep meaning stable). Reconciled 2026-07-31 against the real Claude Design export at `Design System/tokens/*.css` -- every value below either matches that file exactly, or is a new token added to close a gap found during reconciliation (see the comment on each new line). --- */ --bsb-primary: #44771E; --bsb-primary-rgb: 68, 119, 30; --bsb-primary-hover: #386318; /* accessible hover state */ --bsb-primary-dark: #4A5A2E; --bsb-accent-bg: #E8F3E0; --bsb-accent-text: #44771E; --bsb-bg: #FBFAF7; --bsb-surface: #FFFFFF; --bsb-text: #2D2D2D; --bsb-text-muted: #66665E; --bsb-text-strike: #66665E; /* 5.1:1 contrast on #FBFAF7 for WCAG AA compliance */ --bsb-success: #44771E; --bsb-warning: #E8A33D; --bsb-warning-text: #4A340F; --bsb-amber-dark: #C4832A; /* NEW: design's --amber-dark -- not yet used anywhere, kept available */ --bsb-border: #E4E1D8; /* was #E5E1D8 -- matches design's --border-subtle exactly now */ --bsb-border-hover: #C9C4B4; /* NEW: design's --border-hover -- token only, not yet wired into any hover state (that's a component-level change, deferred) */ --bsb-border-w: 0.5px; /* NEW: design's --border-w -- was hardcoded 1px on every bordered surface */ --bsb-font-heading: 'Lora', Georgia, serif; --bsb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --bsb-radius-sm: 6px; --bsb-radius-md: 8px; /* was 10px -- matches design's --radius-md exactly now */ --bsb-radius-lg: 12px; /* was 16px -- matches design's --radius-lg exactly now */ --bsb-radius-pill: 999px; /* NEW: design's --radius-pill -- chips/badges previously used --bsb-radius-sm (a rounded rect, not a pill) */ --bsb-shadow-card: 0 1px 2px rgba(45, 45, 45, 0.05); /* was single-layer 0 2px 8px/0.08 -- matches design's --shadow-card-rest exactly now */ --bsb-shadow-card-hover: 0 10px 24px -10px rgba(45, 45, 45, 0.16), 0 2px 6px -2px rgba(45, 45, 45, 0.07); /* was single-layer 0 8px 24px/0.14 -- matches design's --shadow-card-hover exactly now */ --bsb-shadow-elevated: 0 20px 48px -18px rgba(30, 25, 10, 0.22), 0 4px 14px -4px rgba(30, 25, 10, 0.1); /* NEW: design's --shadow-elevated -- not yet used anywhere, kept available */ --bsb-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); /* NEW: design's --ease-smooth */ --bsb-surface-tonal-warm: #F5F1E6; /* NEW: design's --surface-tonal-warm -- not yet used anywhere, kept available */ --bsb-surface-tonal-green: #EFF4E8; /* NEW: design's --surface-tonal-green -- not yet used anywhere, kept available */ /* --- Bootstrap variable remapping (drives .text-primary, .bg-primary, .text-bg-primary, default link color, .link-primary everywhere) --- */ --bs-primary: var(--bsb-primary); --bs-primary-rgb: var(--bsb-primary-rgb); --bs-success: var(--bsb-success); --bs-body-bg: var(--bsb-bg); --bs-body-color: var(--bsb-text); --bs-body-font-family: var(--bsb-font-body); --bs-link-color: var(--bsb-primary); --bs-link-color-rgb: var(--bsb-primary-rgb); --bs-link-hover-color: var(--bsb-primary-dark); --bs-border-color: var(--bsb-border); } body { background-color: var(--bsb-bg); color: var(--bsb-text); font-family: var(--bsb-font-body); } h1, h2, h3, h4, h5, h6, .bsb-heading-font { font-family: var(--bsb-font-heading); font-weight: 600; color: var(--bsb-text); } a { transition: color 0.15s ease; } /* --- Buttons: Bootstrap hardcodes blue at compile time here, so this needs explicit overrides, not just the --bs-primary remap above --- */ .btn-primary { --bs-btn-bg: var(--bsb-primary); --bs-btn-border-color: var(--bsb-primary); --bs-btn-hover-bg: var(--bsb-primary-hover); --bs-btn-hover-border-color: var(--bsb-primary-hover); --bs-btn-active-bg: var(--bsb-primary-dark); --bs-btn-active-border-color: var(--bsb-primary-dark); --bs-btn-disabled-bg: var(--bsb-primary); --bs-btn-disabled-border-color: var(--bsb-primary); --bs-btn-focus-shadow-rgb: var(--bsb-primary-rgb); border-radius: var(--bsb-radius-sm); } .btn-outline-primary { --bs-btn-color: var(--bsb-primary); --bs-btn-border-color: var(--bsb-primary); --bs-btn-hover-bg: var(--bsb-primary); --bs-btn-hover-border-color: var(--bsb-primary); --bs-btn-active-bg: var(--bsb-primary-dark); --bs-btn-active-border-color: var(--bsb-primary-dark); border-radius: var(--bsb-radius-sm); } .form-control:focus, .form-select:focus { border-color: var(--bsb-primary); box-shadow: 0 0 0 0.2rem rgba(var(--bsb-primary-rgb), 0.2); } /* --- Navbar: sticky top surface, primary-dark background, light text, serif brand. z-index 1030 matches Bootstrap's .sticky-top — sits above dropdowns (z-1000) but below modals (z-1055 Bootstrap default). --- */ .bsb-navbar { background-color: var(--bsb-primary-dark); position: sticky; top: 0; z-index: 1030; margin-bottom: 0 !important; /* overrides mb-4 class; catbar provides the visual separation */ flex-wrap: wrap !important; /* .navbar-expand-lg sets flex-wrap:nowrap at the lg+ breakpoint (fine for inline nav-links, but it also applies to .bsb-nav-catbar, our own direct-child sibling of .container) -- under nowrap, catbar can never be pushed to its own row no matter what flex-basis/min-width it's given; it just shrinks to share the row instead, starving the search form. */ } .bsb-navbar .navbar-brand { font-family: var(--bsb-font-heading); font-weight: 700; font-size: 1.4rem; color: #FBFAF7; } .bsb-brand-icon { object-fit: contain; } /* Short brand punchline next to the wordmark -- only shown at xl+ (1200px) so it never competes for space with the search form at narrower desktop/laptop widths where the navbar row is already tight. */ .bsb-brand-logo { height: 42px; max-height: 42px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) brightness(1.08); } .bsb-footer-logo { height: 52px; max-height: 52px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) brightness(1.08); } .bsb-navbar .nav-link { color: rgba(251, 250, 247, 0.85); } .bsb-navbar .nav-link:hover, .bsb-navbar .nav-link:focus { color: #FBFAF7; } /* --- Category bar: always-visible single-row horizontal-scroll strip beneath the main header row. Outside Bootstrap's collapse div so it renders on mobile and desktop alike — no wrap, tabs off-screen are reachable via swipe/scroll. --- */ .bsb-nav-search-form { max-width: 380px; width: 100%; } .bsb-nav-catbar { background-color: var(--bsb-primary-dark); border-top: 0.5px solid rgba(251, 250, 247, 0.14); min-width: 0; flex-basis: 100%; } .bsb-nav-catbar-inner { display: flex; align-items: center; justify-content: space-between; height: 46px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .bsb-mega-trigger { background: none; border: none; cursor: pointer; } .bsb-mega-overlay { position: absolute; top: 100%; left: 0; width: 100%; z-index: 1040; display: none; margin-top: 4px; } .bsb-mega-overlay--open { display: block; } .bsb-mega-content { background-color: var(--bsb-primary-dark); border: 1px solid rgba(251, 250, 247, 0.2); } .bsb-mega-link { background: rgba(251, 250, 247, 0.08); transition: background 180ms ease, transform 180ms ease; } .bsb-mega-link:hover, .bsb-mega-link:focus { background: rgba(251, 250, 247, 0.22); color: #fff; } /* --- Site-wide Page Content Top Spacing: consistent 28px breathing room below the sticky navigation bar across all non-hero page containers --- */ div.container.pb-5 { margin-top: 1.75rem; } .bsb-nav-catbar-inner::-webkit-scrollbar { display: none; /* Chrome/Safari */ } .bsb-nav-catbar-link { display: inline-flex; align-items: center; flex-shrink: 0; height: 100%; padding: 0 17px; color: rgba(251, 250, 247, 0.88); font-family: var(--bsb-font-body); font-size: 0.845rem; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 220ms var(--bsb-ease-smooth), border-color 220ms var(--bsb-ease-smooth); } .bsb-nav-catbar-link:hover, .bsb-nav-catbar-link:focus { color: #FBFAF7; border-bottom-color: rgba(251, 250, 247, 0.5); text-decoration: none; } .bsb-nav-catbar-link--active { color: #FBFAF7; border-bottom-color: var(--bsb-primary); } .bsb-nav-catbar-link--active:hover, .bsb-nav-catbar-link--active:focus { border-bottom-color: var(--bsb-primary); } /* --- Cart link: icon + label, white, with a pill badge showing the server-confirmed item count. Badge is hidden (visually-hidden Bootstrap class) when JS has not yet updated it or when count is 0. --- */ .bsb-nav-cart { color: #FBFAF7; font-family: var(--bsb-font-body); font-size: 0.9rem; font-weight: 600; text-decoration: none; min-height: 44px; flex-shrink: 0; transition: opacity 180ms ease; } .bsb-nav-cart:hover, .bsb-nav-cart:focus { color: #FBFAF7; opacity: 0.82; text-decoration: none; } .bsb-nav-cart-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--bsb-radius-pill); background-color: var(--bsb-primary); color: #fff; font-family: var(--bsb-font-body); font-size: 0.72rem; font-weight: 700; line-height: 1; } /* Remove Bootstrap's visually-hidden when the badge has been populated by quick-add.js — JS adds .bsb-nav-cart-badge--visible to swap it. */ .bsb-nav-cart-badge--visible { position: static !important; width: auto !important; height: auto !important; padding: 0 5px !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: nowrap !important; } /* --- Track Order: quiet desktop-only text link, muted white. Hidden at