/* ========================================================================== Bootstrap theme bridge Bootstrap ships its own blue (#0d6efd) and nothing was overriding it, so ~280 uses of btn-primary / text-primary / bg-primary / btn-outline-primary across the templates rendered Bootstrap blue while the hand-written CSS rendered brand indigo. The site was quietly two-toned. Everything here resolves to the brand tokens in base.css, so changing the brand is a one-token edit rather than a search-and-replace. Two mechanisms are needed, because Bootstrap 5.3 uses two: - utilities (.text-primary, .bg-primary, .border-primary) read `rgba(var(--bs-primary-rgb), …)`, so the :root override reaches them; - .btn-primary and .btn-outline-primary set their own --bs-btn-* values at the component level, which a :root override cannot touch. Loaded immediately after Bootstrap in base.html. Custom properties resolve at use time, so referencing base.css tokens defined later is fine. ========================================================================== */ :root, [data-bs-theme="light"] { --bs-primary: var(--primary-color); --bs-primary-rgb: var(--primary-rgb); --bs-primary-text-emphasis: var(--primary-emphasis); --bs-primary-bg-subtle: var(--primary-subtle); --bs-primary-border-subtle: var(--primary-border-subtle); /* Links pick up the brand too - they were Bootstrap blue everywhere. */ --bs-link-color: var(--primary-color); --bs-link-color-rgb: var(--primary-rgb); --bs-link-hover-color: var(--primary-dark); --bs-link-hover-color-rgb: var(--primary-dark-rgb); /* Keyboard focus ring, which was also blue. */ --bs-focus-ring-color: rgba(var(--primary-rgb), 0.25); } /* Solid primary button */ .btn-primary { --bs-btn-bg: var(--primary-color); --bs-btn-border-color: var(--primary-color); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-active-bg: var(--primary-darker); --bs-btn-active-border-color: var(--primary-darker); --bs-btn-disabled-bg: var(--primary-color); --bs-btn-disabled-border-color: var(--primary-color); --bs-btn-focus-shadow-rgb: var(--primary-rgb); } /* Outline primary button */ .btn-outline-primary { --bs-btn-color: var(--primary-color); --bs-btn-border-color: var(--primary-color); --bs-btn-hover-bg: var(--primary-color); --bs-btn-hover-border-color: var(--primary-color); --bs-btn-active-bg: var(--primary-dark); --bs-btn-active-border-color: var(--primary-dark); --bs-btn-disabled-color: var(--primary-color); --bs-btn-disabled-border-color: var(--primary-color); --bs-btn-focus-shadow-rgb: var(--primary-rgb); } /* Bootstrap's .link-primary and .btn-link both key off the link variables above, so they follow automatically. */ /* ========================================================================== Button geometry — the "Soft" system Five sanctioned roles, expressed in Bootstrap's own classes so the sweep is about reducing to a canonical set rather than renaming every button: Primary action .btn .btn-primary Secondary action .btn .btn-outline-secondary Quiet / tertiary .btn .btn-link Destructive .btn .btn-outline-danger Small variant add .btn-sm to any of the above Full width add .w-100 Anything else - .btn-secondary (solid grey), .btn-outline-light, solid .btn-success / .btn-warning / .btn-danger, ad-hoc .rounded-pill - is an outlier to be swept. See CLAUDE.md. Geometry is set through Bootstrap's per-component variables so padding and radius stay consistent across every variant without !important. ========================================================================== */ .btn { --bs-btn-border-radius: var(--radius-control); --bs-btn-padding-x: 1.15rem; --bs-btn-padding-y: 0.5rem; --bs-btn-font-weight: 500; } .btn-sm { --bs-btn-border-radius: var(--radius-control-sm); --bs-btn-padding-x: 0.7rem; --bs-btn-padding-y: 0.3rem; } .btn-lg { --bs-btn-border-radius: var(--radius-control); --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: 0.7rem; } /* Badges and pills: one shape, tinted rather than saturated. */ .badge { --bs-badge-border-radius: var(--radius-pill); border-radius: var(--radius-pill); font-weight: 600; } /* Form controls share the button radius so a field and the button beside it agree - they did not before. */ .form-control, .form-select, .input-group-text { border-radius: var(--radius-control); } .form-control-sm, .form-select-sm { border-radius: var(--radius-control-sm); } /* ========================================================================== Bootstrap's own .card — the biggest single cause of the "pieced together" look. `.card` is used 160 times across 53 templates and was styled nowhere, while 67 bespoke *-card classes were fully styled. That gave the site two card populations: the bespoke ones looking like Reflekt, the plain ones looking like stock Bootstrap. Pages built from the second kind (wellness/intimacy, the cycle pages) read as if they came from a different site, because visually they did. One rule conforms all 160. ========================================================================== */ .card { --bs-card-border-radius: var(--radius-card); --bs-card-inner-border-radius: calc(var(--radius-card) - 1px); --bs-card-spacer-y: var(--pad-card); --bs-card-spacer-x: var(--pad-card); --bs-card-cap-padding-y: 1rem; --bs-card-cap-padding-x: var(--pad-card); --bs-card-border-color: transparent; --bs-card-box-shadow: var(--shadow-card); box-shadow: var(--shadow-card); } /* The shadow utilities resolve to the same tokens, so `card shadow-sm` (54 uses) and a bare `.card` land on identical depth instead of stacking two different shadows. `.shadow-sm` sets box-shadow with !important, so this is the only way to reach it without another !important. */ :root, [data-bs-theme="light"] { --bs-box-shadow-sm: var(--shadow-card); --bs-box-shadow: var(--shadow-card-hover); } /* ========================================================================== Two more sanctioned roles, found during the dashboard audit. The first five roles assumed every button sits on a light surface. They do not: .quick-actions-card and the gradient/capture card headers are brand gradients with white text, where an outline-secondary button is invisible. And every single .btn-warning on the site is the "Upgrade to Premium" CTA - one consistent purpose, not drift. Sanctioning both is better than rewriting 28 buttons that were already saying the right thing. ========================================================================== */ /* On a brand / gradient surface */ .btn-light { --bs-btn-color: var(--primary-dark); --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-color: var(--primary-darker); --bs-btn-hover-bg: #f1f4f8; --bs-btn-hover-border-color: #f1f4f8; } .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.55); --bs-btn-hover-color: var(--primary-dark); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; } /* Upgrade / premium. Amber against slate reads as a genuine accent; raw Bootstrap yellow did not sit with the palette. */ .btn-warning { --bs-btn-color: var(--accent-premium-ink); --bs-btn-bg: var(--accent-premium); --bs-btn-border-color: var(--accent-premium); --bs-btn-hover-color: var(--accent-premium-ink); --bs-btn-hover-bg: var(--accent-premium-hover); --bs-btn-hover-border-color: var(--accent-premium-hover); --bs-btn-focus-shadow-rgb: 232, 184, 75; } /* ========================================================================== Segmented selectors (.btn-check radio groups) Seven of these exist - star ratings, workout intensity, people sentiment, media type, feedback. They look like buttons because Bootstrap puts .btn on the