/* Big Brave Life: tokens and base styles (Visual System v1, sections 4, 5, 8, 9, 15, 16). */
:root {
--bbl-navy: #163B5C; /* headings / logo */
--bbl-ink: #20313A; /* body text */
--bbl-cream: #FFF8EE; /* page background */
--bbl-yellow: #F7BE34; /* primary CTA */
--bbl-coral: #F46F5D; /* accent */
--bbl-teal: #2B7A70; /* secondary CTA */
--bbl-sky: #C8E1EE; /* journal theme */
--bbl-sage: #E1ECD8; /* flexibility theme */
--bbl-rose: #F9DAD2; /* screen-time theme */
--bbl-border: #E7DED4;
--bbl-forest: #355F4B;
--bbl-muted: #667178; /* secondary text, only on cream/white */
--bbl-white: #FFFFFF;
--radius-card: 18px;
--radius-pill: 999px;
--container: 1240px;
--gutter-desktop: 36px;
--gutter-mobile: 20px;
--gutter: var(--gutter-mobile);
--section-y: clamp(56px, 7vw, 96px);
--font-display: 'Bricolage Grotesque', system-ui, sans-serif;
--font-body: 'Nunito Sans', system-ui, sans-serif;
--font-accent: 'Kalam', cursive;
/* Theme slots: a theme changes only the section background and the accent. */
--theme-bg: var(--bbl-cream);
--theme-accent: var(--bbl-coral);
}
@media (min-width: 768px) { :root { --gutter: var(--gutter-desktop); } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bbl-cream);
color: var(--bbl-ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
img { max-width: 100%; height: auto; }
a { color: var(--bbl-navy); }
/* Themes (sales pages): base and accent only; text stays navy/ink. */
.theme-rose { --theme-bg: var(--bbl-rose); --theme-accent: var(--bbl-coral); }
.theme-sky { --theme-bg: var(--bbl-sky); --theme-accent: var(--bbl-yellow); }
.theme-sage { --theme-bg: var(--bbl-sage); --theme-accent: var(--bbl-forest); }
.theme-rose, .theme-sky, .theme-sage { background: var(--theme-bg); }
.bbl-section { padding-block: var(--section-y); }
.bbl-section.theme-rose, .bbl-section.theme-sky, .bbl-section.theme-sage { background: var(--theme-bg); }
/* Accent is a fill/border colour only: coral and yellow fail 4.5:1 as text on cream. */
.bbl-accent { background: var(--theme-accent); }
.bbl-accent-border { border-color: var(--theme-accent); }
/* Layout */
.bbl-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* Type scale (mobile first, desktop from 768px) */
h1, h2, h3 { font-family: var(--font-display); color: var(--bbl-navy); margin: 0 0 .5em; }
h1 { font-size: 40px; line-height: 1.08; font-weight: 800; }
h2 { font-size: 32px; line-height: 1.15; font-weight: 800; }
h3 { font-size: 24px; line-height: 1.25; font-weight: 700; }
.body-large { font-size: 18px; line-height: 28px; }
.label { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .02em; }
p { margin: 0 0 1em; }
@media (min-width: 768px) {
h1 { font-size: 56px; line-height: 60px; }
h2 { font-size: 40px; line-height: 46px; }
h3 { font-size: 28px; line-height: 34px; }
}
/* Handwriting accent: notes and micro-callouts only, never body copy, prices or CTAs. */
.hand { font-family: var(--font-accent); font-weight: 500; }
/* Buttons */
.btn-primary, .btn-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: .5em;
min-height: 48px; padding: 14px 28px;
border: 0; border-radius: var(--radius-pill);
font-family: var(--font-body); font-size: 16px; line-height: 20px; font-weight: 800;
text-decoration: none; text-align: center; cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
@media (min-width: 768px) { .btn-primary, .btn-secondary { min-height: 52px; } }
.btn-primary { background: var(--bbl-yellow); color: var(--bbl-navy); }
.btn-secondary { background: var(--bbl-teal); color: var(--bbl-white); }
.btn-primary:hover { background: #E9AE1F; box-shadow: 0 6px 16px rgba(22, 59, 92, .18); transform: translateY(-1px); }
.btn-secondary:hover { background: #246A61; box-shadow: 0 6px 16px rgba(22, 59, 92, .18); transform: translateY(-1px); }
.btn-primary:active, .btn-secondary:active { transform: translateY(0); box-shadow: none; }
.btn-primary:disabled, .btn-secondary:disabled, .btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"] {
background: #EDE6DA; color: #5C6770; cursor: not-allowed; box-shadow: none; transform: none;
}
.btn-block { display: flex; width: 100%; }
@media (min-width: 768px) { .btn-block { display: inline-flex; width: auto; } }
/* Focus */
:focus-visible { outline: 3px solid var(--bbl-navy); outline-offset: 3px; border-radius: 4px; }
.btn-primary:focus-visible, .btn-secondary:focus-visible { outline: 3px solid var(--bbl-navy); outline-offset: 3px; border-radius: var(--radius-pill); }
/* Cards */
.bbl-card { background: var(--bbl-white); border: 1px solid var(--bbl-border); border-radius: var(--radius-card); padding: 20px; }
/* Screen-reader only and skip link */
.bbl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bbl-skip { position: absolute; left: 8px; top: -60px; background: var(--bbl-navy); color: var(--bbl-white); padding: 12px 16px; border-radius: 8px; z-index: 100; }
.bbl-skip:focus { top: 8px; }
/* Header */
.bbl-header { background: var(--bbl-cream); border-bottom: 1px solid var(--bbl-border); }
.bbl-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 8px; }
.bbl-logo { display: block; width: auto; height: 44px; max-width: 70vw; }
.bbl-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.bbl-header-sales .bbl-header-row { justify-content: flex-start; }
/* Brand navigation: links are in the DOM without JavaScript; the toggle only appears once
bbl.js has set the `js` class on , and only below 1024px, where the links open as a
full-width panel under the header. The current page is marked by shape, not colour alone. */
.bbl-brand .bbl-header { position: relative; z-index: 30; border-bottom: 0; box-shadow: 0 1px 0 var(--bbl-line, rgba(22, 59, 92, .14)); }
.bbl-brand .bbl-header-row { gap: 20px; min-height: 68px; padding-block: 10px; justify-content: flex-start; }
.bbl-brand .bbl-logo { height: 36px; }
.bbl-nav { margin-left: auto; }
.bbl-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.bbl-nav-list a {
position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
color: var(--bbl-navy); font-weight: 700; font-size: 16px; letter-spacing: .005em; text-decoration: none;
}
.bbl-nav-list a::after {
content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2.5px; border-radius: 2px; background: var(--bbl-coral);
transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.bbl-nav-list a:hover::after { transform: scaleX(1); }
.bbl-nav-list a[aria-current="page"]::after { transform: scaleX(1); background: var(--bbl-navy); height: 3px; }
.bbl-header-cta { flex: 0 0 auto; }
.bbl-brand .bbl-header .bbl-header-cta { min-height: 44px; padding: 10px 20px; font-size: 15px; line-height: 20px; box-shadow: none; }
.bbl-nav-toggle {
display: none; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
background: #F4EEE6; border: 0; border-radius: 50%; cursor: pointer; color: var(--bbl-navy);
}
.bbl-nav-toggle:hover { background: #EDE4D8; }
.bbl-nav-toggle-bars, .bbl-nav-toggle-bars::before, .bbl-nav-toggle-bars::after { display: block; width: 20px; height: 2.5px; background: var(--bbl-navy); border-radius: 2px; content: ""; transition: transform .2s ease, background-color .2s ease; }
.bbl-nav-toggle-bars { position: relative; }
.bbl-nav-toggle-bars::before { position: absolute; top: -6.5px; }
.bbl-nav-toggle-bars::after { position: absolute; top: 6.5px; }
.bbl-nav-toggle[aria-expanded="true"] .bbl-nav-toggle-bars { background: transparent; }
.bbl-nav-toggle[aria-expanded="true"] .bbl-nav-toggle-bars::before { transform: translateY(6.5px) rotate(45deg); }
.bbl-nav-toggle[aria-expanded="true"] .bbl-nav-toggle-bars::after { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 1023px) {
.bbl-header-cta { display: none; }
.js .bbl-nav { position: static; }
.js .bbl-nav-toggle { display: inline-flex; }
.js .bbl-nav-list {
display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 50; flex-direction: column; flex-wrap: nowrap; gap: 0;
background: var(--bbl-cream); padding: 8px var(--gutter) 24px; box-shadow: 0 1px 0 var(--bbl-line, rgba(22, 59, 92, .14)), 0 24px 40px -20px rgba(22, 59, 92, .35);
}
.js .bbl-nav-toggle[aria-expanded="true"] ~ .bbl-nav-list { display: flex; }
.js .bbl-nav-list li + li { border-top: 1px solid var(--bbl-line, rgba(22, 59, 92, .14)); }
.js .bbl-nav-list a { display: flex; min-height: 60px; padding: 0 2px; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.015em; }
.js .bbl-nav-list a::after { left: 2px; right: auto; width: 28px; bottom: 12px; }
/* No JavaScript: the links wrap under the logo. */
html:not(.js) .bbl-header-row { flex-wrap: wrap; }
html:not(.js) .bbl-nav { margin-left: 0; width: 100%; }
}
@media (min-width: 1024px) {
.bbl-brand .bbl-header-row { min-height: 84px; gap: 28px; }
.bbl-brand .bbl-logo { height: 40px; }
}
/* Footer */
/* Quiet by design: cream like the page, a hairline on top, small type. Muted text is
#667178 on #FFF8EE (4.74:1); links are ink (12.75:1). Company details are not here. */
.bbl-footer { background: var(--bbl-cream); color: var(--bbl-muted); border-top: 1px solid var(--bbl-border); padding-block: 28px 32px; font-size: 14px; line-height: 20px; }
.bbl-footer a { color: var(--bbl-ink); text-decoration: none; text-underline-offset: 3px; }
.bbl-footer a:hover { text-decoration: underline; }
.bbl-footer p { margin: 0; }
.bbl-footer-legal { font-size: 13px; line-height: 20px; color: var(--bbl-muted); }
/* Sales: one centred row of legal links, then the legal line. */
.bbl-footer-sales { text-align: center; }
.bbl-footer-links { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 20px; }
.bbl-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Phones: the four links do not fit one row, so two even rows instead of 3 + 1. */
@media (max-width: 479px) {
.bbl-footer-links { display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; }
}
/* Below 768px the sticky bar stays fixed at the bottom: keep the footer clear of it. */
@media (max-width: 767px) {
.bbl-footer-sales { padding-bottom: calc(32px + 80px + env(safe-area-inset-bottom)); }
}
/* Brand: logo and tagline, two link columns; on phones the logo block sits above them. */
.bbl-footer-grid { display: grid; gap: 24px; padding-bottom: 20px; }
.bbl-footer-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.bbl-footer-logo { display: block; width: auto; height: 28px; }
.bbl-footer-tagline { margin-top: 4px; }
.bbl-footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bbl-footer-heading { margin: 0 0 4px; font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--bbl-muted); }
.bbl-footer-list { list-style: none; margin: 0; padding: 0; }
.bbl-footer-list a { display: inline-flex; align-items: center; min-height: 44px; }
.bbl-footer-brand .bbl-footer-legal { padding-top: 20px; border-top: 1px solid var(--bbl-border); }
@media (min-width: 768px) {
.bbl-footer-brand { padding-block: 48px 32px; }
.bbl-footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-bottom: 32px; }
.bbl-footer-nav { grid-column: 2 / span 2; gap: 32px; }
.bbl-footer-list a { min-height: 36px; }
}
/* Reveal on scroll (bbl.js): only once the script has set .bbl-motion on , so content is
never hidden without JavaScript; reduced motion never gets the class. */
.bbl-motion .bbl-reveal:not(.is-in) { opacity: 0; transform: translateY(12px); }
.bbl-motion .bbl-reveal { transition: opacity .4s ease-out, transform .4s ease-out; }
/* Motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.btn-primary:hover, .btn-secondary:hover { transform: none; }
}
/* ======================================================================================
Sales components (Visual System section 9): Hero, OfferBox, FAQ,
StickyCTA, evidence, adult/child split, team note.
====================================================================================== */
/* Hero: copy first on mobile, product visible without a slider; 40/60 from tablet up. */
.bbl-hero-grid { display: grid; gap: 28px; align-items: center; }
.bbl-hero-media img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.bbl-eyebrow { color: var(--bbl-navy); text-transform: uppercase; margin: 0 0 8px; }
.bbl-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; }
.bbl-cta-row .btn-primary { flex: 1 1 100%; }
@media (min-width: 768px) {
.bbl-hero-grid { grid-template-columns: 2fr 3fr; gap: 48px; }
.bbl-cta-row .btn-primary { flex: 0 0 auto; }
}
.bbl-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--bbl-white); border: 1px solid var(--bbl-navy); color: var(--bbl-navy); font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
/* OfferBox */
.bbl-offer-format { font-weight: 700; color: var(--bbl-navy); }
.bbl-offer-message { background: var(--bbl-white); border: 2px solid var(--bbl-navy); border-radius: 12px; padding: 12px 16px; font-weight: 700; }
.bbl-editions { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; display: grid; gap: 14px; }
.bbl-offer-legend { padding: 0; margin-bottom: 12px; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--bbl-navy); }
.bbl-edition { display: grid; gap: 10px; }
.bbl-edition-label { display: block; position: relative; cursor: pointer; }
.bbl-edition-input { position: absolute; top: 22px; left: 20px; width: 24px; height: 24px; margin: 0; accent-color: var(--bbl-navy); cursor: pointer; }
.bbl-edition-body { display: block; background: var(--bbl-white); border: 2px solid var(--bbl-border); border-radius: var(--radius-card); padding: 20px 20px 20px 56px; min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease; }
.bbl-edition-label:hover .bbl-edition-body { border-color: var(--bbl-navy); }
.bbl-edition-body > span { display: block; }
.bbl-edition-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 26px; color: var(--bbl-navy); }
.bbl-edition-meta { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--bbl-muted); }
.bbl-edition-price { margin-top: 8px; font-size: 18px; }
.bbl-edition-price strong { font-size: 22px; color: var(--bbl-navy); }
.bbl-price-ref { color: var(--bbl-muted); margin-right: 4px; }
.bbl-currency { font-size: 13px; font-weight: 700; color: var(--bbl-muted); }
.bbl-edition-note { margin-top: 6px; font-weight: 700; }
.bbl-includes { margin: 12px 0 0; padding-left: 20px; font-size: 15px; line-height: 22px; }
/* Selected state: thick navy border, tinted fill and a check mark, so it never relies on colour alone. */
.bbl-edition-input:checked + .bbl-edition-body { border-color: var(--bbl-navy); border-width: 3px; padding: 19px 19px 19px 55px; background: #FFF3D1; box-shadow: 0 6px 16px rgba(22, 59, 92, .14); }
.bbl-edition-input:checked + .bbl-edition-body::after { content: "\2713 Selected"; display: block; margin-top: 10px; font-weight: 800; font-size: 14px; color: var(--bbl-navy); }
.bbl-edition-input:focus-visible + .bbl-edition-body { outline: 3px solid var(--bbl-navy); outline-offset: 3px; }
.bbl-edition-input:disabled + .bbl-edition-body { opacity: .65; cursor: not-allowed; }
/* Per-edition checkout links are the no-JavaScript path; bbl.js replaces them with the buy button. */
.bbl-edition-link { width: 100%; }
.js .bbl-edition-link { display: none; }
html:not(.js) .bbl-buy, html:not(.js) .bbl-summary { display: none; }
.bbl-summary { background: var(--bbl-white); border: 1px solid var(--bbl-border); border-radius: var(--radius-card); padding: 16px 20px; margin-bottom: 16px; }
.bbl-summary-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.bbl-summary-list dt { font-weight: 700; color: var(--bbl-muted); }
.bbl-summary-list dd { margin: 0; color: var(--bbl-navy); font-weight: 700; }
.bbl-summary-empty { margin: 0; color: var(--bbl-muted); }
/* Offer that cannot be ordered yet: a plain statement up front and in place of the buy button. */
.bbl-offer-unavailable { background: var(--bbl-white); border: 2px solid var(--bbl-navy); border-left-width: 8px; border-radius: 12px; padding: 14px 18px; font-weight: 700; color: var(--bbl-navy); }
.bbl-not-orderable { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 12px 24px; border-radius: var(--radius-pill); background: #EDE6DA; color: #4A5560; font-weight: 800; text-align: center; }
@media (min-width: 768px) { .bbl-not-orderable { display: inline-flex; } }
/* Sticky bar once a not-orderable edition is chosen: an anchor without href, styled as a state. */
.bbl-sticky-cta:not([href]) { background: #EDE6DA; color: #4A5560; cursor: default; box-shadow: none; transform: none; flex: 0 1 auto; max-width: 55%; padding-inline: 16px; }
@media (min-width: 768px) {
.bbl-editions { grid-template-columns: repeat(3, 1fr); align-items: start; }
.bbl-offer-legend { grid-column: 1 / -1; }
}
/* FAQ: native details/summary, keyboard friendly. */
.bbl-faq-item { background: var(--bbl-white); border: 1px solid var(--bbl-border); border-radius: var(--radius-card); margin-bottom: 12px; padding: 0 20px; }
.bbl-faq-item summary { display: flex; align-items: center; min-height: 48px; padding-block: 10px; font-weight: 800; color: var(--bbl-navy); cursor: pointer; }
.bbl-faq-item[open] summary { border-bottom: 1px solid var(--bbl-border); margin-bottom: 12px; }
.bbl-faq-item p { margin: 0 0 16px; }
/* StickyCTA: revealed by bbl.js (it removes the `hidden` attribute); mobile only, inside the device safe area. */
.bbl-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--bbl-white); border-top: 1px solid var(--bbl-border); box-shadow: 0 -6px 18px rgba(22, 59, 92, .12); padding: 10px 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.bbl-sticky[hidden] { display: none; }
.bbl-sticky-row { display: flex; align-items: center; gap: 12px; }
.bbl-sticky-info { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; font-weight: 700; color: var(--bbl-navy); font-size: 14px; line-height: 18px; }
.bbl-sticky-cta { flex: 0 0 auto; }
@media (min-width: 768px) { .bbl-sticky { display: none; } }
/* Evidence (renders only with approved records) */
.bbl-evidence-list { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 768px) { .bbl-evidence-list { grid-template-columns: repeat(2, 1fr); } }
.bbl-quote { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.bbl-sample-banner { display: inline-block; margin: 12px 0 0; padding: 6px 12px; border: 1px dashed var(--bbl-coral); border-radius: var(--radius-pill); font-weight: 800; color: var(--bbl-navy); background: var(--bbl-white); }
.bbl-sample-badge { display: inline-block; margin: 0 0 10px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--bbl-navy); color: var(--bbl-white); font-size: 13px; line-height: 20px; font-weight: 800; }
.bbl-stars { display: block; margin: 0 0 8px; color: var(--bbl-navy); font-size: 18px; line-height: 24px; letter-spacing: 2px; }
/* Clamp only when JS can offer "Read more"; without JS the full text stays readable. */
.js .bbl-clamped:not(.bbl-expanded) { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.bbl-readmore { display: none; min-height: 44px; margin: 0 0 8px; padding: 0 4px; border: 0; background: none; font: inherit; font-weight: 800; color: var(--bbl-navy); text-decoration: underline; cursor: pointer; }
.js .bbl-readmore { display: inline-block; }
.bbl-quote blockquote { margin: 0 0 12px; font-size: 18px; line-height: 28px; }
.bbl-quote figcaption { font-weight: 800; color: var(--bbl-navy); }
.bbl-quote-note { margin: 8px 0 0; font-size: 14px; color: var(--bbl-muted); }
/* Adult / child split: stacked on mobile, two coordinated cards from tablet up. */
.bbl-split-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .bbl-split-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.bbl-split-card { border-width: 2px; }
.bbl-split-adult { border-color: var(--bbl-forest); }
.bbl-split-child { border-color: var(--bbl-coral); }
.bbl-split-card ul { margin: 0; padding-left: 20px; }
/* Team note */
.bbl-team-title { font-size: 28px; line-height: 34px; }
.bbl-team p { max-width: 62ch; }
/* Shared by the brand site: section headings and card text, the approved trust line. */
.bbl-section h2 { max-width: 24ch; overflow-wrap: break-word; }
.bbl-section .bbl-card h3 { font-size: 20px; line-height: 26px; }
.bbl-section .bbl-card p:last-child, .bbl-section .bbl-card ul:last-child { margin-bottom: 0; }
.bbl-trust-line { margin: 16px 0 0; font-size: 15px; line-height: 22px; color: var(--bbl-ink); max-width: 40ch; }
/* ======================================================================================
Image slots (lib/images.js). A real image: rounded, no layout shift (width and height
attributes, or an aspect-ratio crop). No image yet: a designed fallback block, tinted with
the page theme, with a fine paper grain, a quiet illustration of generic printed pages and a
small label. Fallbacks are provisional by definition (data-provisional): never live.
====================================================================================== */
.bbl-img { display: block; width: 100%; height: auto; border-radius: var(--radius-img, 24px); }
.bbl-img-crop { object-fit: cover; }
.bbl-picture { display: block; }
.bbl-img-fallback {
position: relative; overflow: hidden; isolation: isolate;
background-color: var(--theme-bg);
background-image:
radial-gradient(110% 85% at 16% 10%, rgba(255, 255, 255, .78) 0, rgba(255, 255, 255, 0) 58%),
linear-gradient(158deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 48%, rgba(22, 59, 92, .07) 100%);
}
/* Paper grain: fractal noise, multiplied very lightly over the tint. */
.bbl-img-fallback::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
.bbl-img-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bbl-img-fallback { container-type: inline-size; }
@container (max-width: 240px) { .bbl-img-fallback .bbl-img-label { display: none; } }
.bbl-img-label {
position: absolute; z-index: 2; left: 12px; top: 12px; max-width: calc(100% - 24px);
display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: var(--radius-pill);
background: rgba(255, 255, 255, .86); color: var(--bbl-ink);
font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bbl-img-label::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-accent); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
/* Illustration parts: colours follow the page theme. */
.bbl-fb-paper { fill: #FFFFFF; }
.bbl-fb-paper-soft { fill: rgba(255, 255, 255, .82); }
.bbl-fb-shadow { fill: rgba(22, 59, 92, .10); }
.bbl-fb-shadow2 { fill: rgba(22, 59, 92, .055); }
.bbl-fb-line { stroke: rgba(22, 59, 92, .15); stroke-linecap: round; fill: none; }
.bbl-fb-accent { fill: var(--theme-accent); }
.bbl-fb-ring { fill: none; stroke: rgba(22, 59, 92, .22); }
.bbl-fb-box { fill: none; stroke: rgba(22, 59, 92, .16); stroke-dasharray: 14 12; }
.bbl-fb-tick { fill: var(--theme-accent); stroke: var(--theme-accent); }
.bbl-fb-check { fill: none; stroke: rgba(22, 59, 92, .24); }
.bbl-fb-tint { fill: var(--theme-bg); }
.bbl-fb-doodle { fill: none; stroke: var(--theme-accent); stroke-linecap: round; stroke-linejoin: round; }
.bbl-fb-yellow { fill: var(--bbl-yellow); }
.bbl-fb-coral { fill: var(--bbl-coral); }
.bbl-fb-wood { fill: #F2D7AE; }
.bbl-fb-ink { fill: var(--bbl-navy); }
.bbl-fb-cover { fill: var(--bbl-navy); }
.bbl-fb-cover-alt { fill: var(--bbl-teal); }
.bbl-fb-spine { fill: rgba(0, 0, 0, .16); }
.bbl-fb-hill { fill: var(--theme-bg); }
.bbl-fb-gutter { fill: rgba(22, 59, 92, .07); }
.bbl-fb-fold { stroke: rgba(22, 59, 92, .12); stroke-width: 3; }
/* ======================================================================================
Sales pages, redesign v2 (art direction v2, section 4; Visual System 4-9, 11-15).
Seven blocks, mobile first (360 / 390 / 430 / 768 / 1440). Scoped to body.bbl-sales so the
brand site keeps its own styles until its own redesign; the tokens are shared.
Rhythm of the bands: hero (theme) · tiles (cream) · inside (theme, soft) · steps (white) ·
editions (cream) · approach (theme) · FAQ (cream) · close (navy). Yellow is for action only.
Contrast (measured): navy #163B5C on rose 8.81, on sky 8.52, on sage 9.48, on the soft
tints >= 10.1, on yellow 6.82, on white 11.58; ink #20313A on the themes >= 9.9; muted
#4F5B64 on rose 5.31, sky 5.13, sage 5.71 (and > 6 on white/cream); cream #FFF8EE on navy
10.98; white on teal 5.10; teal on white 5.10; ink on the marker chip #FFF3D6 12.19.
====================================================================================== */
:root {
--bbl-muted-2: #4F5B64;
--bbl-line: rgba(22, 59, 92, .14);
--radius-img: 24px;
--shadow-1: 0 1px 2px rgba(22, 59, 92, .06), 0 12px 28px -14px rgba(22, 59, 92, .22);
--shadow-2: 0 2px 6px rgba(22, 59, 92, .06), 0 28px 56px -26px rgba(22, 59, 92, .38);
--shadow-cta: 0 1px 0 rgba(22, 59, 92, .08), 0 12px 24px -12px rgba(201, 135, 0, .55);
--sy: clamp(64px, 44px + 5.4vw, 128px);
--mark-rose: url("data:image/svg+xml;utf8,");
--mark-sky: url("data:image/svg+xml;utf8,");
--mark-sage: url("data:image/svg+xml;utf8,");
}
.bbl-page-rose, .bbl-theme-rose { --theme-bg: var(--bbl-rose); --theme-accent: var(--bbl-coral); --theme-soft: #FCEEEB; --mark: var(--mark-rose); }
.bbl-page-sky, .bbl-theme-sky { --theme-bg: var(--bbl-sky); --theme-accent: var(--bbl-yellow); --theme-soft: #E6F2F7; --mark: var(--mark-sky); }
.bbl-page-sage, .bbl-theme-sage { --theme-bg: var(--bbl-sage); --theme-accent: var(--bbl-forest); --theme-soft: #F2F6ED; --mark: var(--mark-sage); }
/* ---------------------------------------------------------------- base type and rhythm */
:is(.bbl-sales, .bbl-brand) { font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:is(.bbl-sales, .bbl-brand) :is(h1, h2, h3) { font-family: var(--font-display); color: var(--bbl-navy); text-wrap: balance; }
:is(.bbl-sales, .bbl-brand) h1 { font-size: clamp(38px, 25px + 3.4vw, 76px); line-height: 1.02; letter-spacing: -.028em; font-weight: 800; margin: 0; }
:is(.bbl-sales, .bbl-brand) h2 { font-size: clamp(30px, 22px + 2.4vw, 56px); line-height: 1.06; letter-spacing: -.022em; font-weight: 800; margin: 0 0 .45em; max-width: 20ch; }
:is(.bbl-sales, .bbl-brand) h3 { font-size: 21px; line-height: 1.22; letter-spacing: -.01em; font-weight: 700; margin: 0 0 .35em; }
/* Low specificity (:where) so every block can set its own paragraph spacing. */
:where(.bbl-sales, .bbl-brand) p { margin: 0 0 1em; }
:is(.bbl-sales, .bbl-brand) .bbl-section { padding-block: var(--sy); }
:is(.bbl-sales, .bbl-brand) .bbl-section-intro { font-size: 18px; line-height: 1.6; color: var(--bbl-ink); max-width: 52ch; margin: 0; }
:is(.bbl-sales, .bbl-brand) .bbl-eyebrow {
display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
font-family: var(--font-body); font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bbl-navy);
}
:is(.bbl-sales, .bbl-brand) .bbl-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: currentColor; opacity: .9; }
@media (min-width: 768px) {
:is(.bbl-sales, .bbl-brand) { font-size: 18px; }
:is(.bbl-sales, .bbl-brand) h3 { font-size: 24px; }
}
:is(.bbl-sales, .bbl-brand) :focus-visible { outline: 3px solid var(--bbl-navy); outline-offset: 3px; }
/* The hand-drawn underline (Visual System 6.3): one phrase of the H1, nothing else. */
.bbl-mark {
background-image: var(--mark); background-repeat: no-repeat; background-position: 0 96%; background-size: 100% .26em;
padding-bottom: .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* A [DA CONFERMARE] marker: review mode only, small, never mistaken for copy. */
.bbl-tbc {
display: inline-block; vertical-align: .15em; margin: 0 2px; padding: 1px 7px; max-width: 100%;
border: 1px dashed var(--bbl-coral); border-radius: 6px; background: #FFF3D6; color: var(--bbl-ink);
font-family: var(--font-body); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .01em; text-transform: none;
white-space: normal; overflow-wrap: anywhere;
}
.bbl-tbc-row { margin: 14px 0 0; }
/* ---------------------------------------------------------------- buttons */
:is(.bbl-sales, .bbl-brand) :is(.btn-primary, .btn-secondary) {
min-height: 56px; padding: 16px 28px; gap: 10px; font-size: 17px; line-height: 22px; letter-spacing: .005em;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
:is(.bbl-sales, .bbl-brand) .btn-primary { box-shadow: var(--shadow-cta); }
:is(.bbl-sales, .bbl-brand) .btn-primary:hover { background: #F0B31F; box-shadow: 0 1px 0 rgba(22, 59, 92, .08), 0 16px 30px -12px rgba(201, 135, 0, .65); }
:is(.bbl-sales, .bbl-brand) :is(.btn-primary, .btn-secondary, .btn-ghost) .bbl-icon { transition: transform .18s ease; }
:is(.bbl-sales, .bbl-brand) :is(.btn-primary, .btn-secondary, .btn-ghost):hover .bbl-icon { transform: translateX(3px); }
.bbl-sales .btn-primary:disabled { box-shadow: none; }
:is(.bbl-sales, .bbl-brand) .btn-secondary { box-shadow: 0 10px 22px -14px rgba(43, 122, 112, .8); }
/* ---------------------------------------------------------------- header */
.bbl-sales .bbl-header { background: var(--theme-bg, var(--bbl-cream)); border-bottom: 0; }
.bbl-sales .bbl-header-row { min-height: 60px; padding-block: 10px; }
.bbl-sales .bbl-logo { height: 34px; }
@media (min-width: 1024px) { .bbl-sales .bbl-header-row { min-height: 76px; } .bbl-sales .bbl-logo { height: 40px; } }
/* ---------------------------------------------------------------- 1 hero */
.bbl-sales .bbl-hero { background: var(--theme-bg); padding-block: 4px 48px; }
.bbl-sales .bbl-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.bbl-sales .bbl-hero-eyebrow { margin-bottom: 10px; flex-wrap: wrap; row-gap: 4px; }
.bbl-sales .bbl-hero-eyebrow .bbl-tbc { white-space: nowrap; }
/* Phones: product, price and button inside the first screen of an in-app browser (~700px).
The product image is cropped wider, the format line moves under the button. */
@media (max-width: 767px) {
.bbl-hero-media .bbl-img { aspect-ratio: 16 / 9 !important; object-fit: cover; }
.bbl-sales .bbl-hero-grid { gap: 12px; }
.bbl-hero-side .bbl-badges { order: 3; }
.bbl-hero-side .bbl-quick { order: 2; }
.bbl-hero-side .bbl-trust-line { order: 4; }
}
@media (max-width: 479px) { .bbl-hero-media .bbl-img { aspect-ratio: 2 / 1 !important; } }
.bbl-sales .bbl-hero h1 { max-width: 17ch; }
.bbl-hero-media { position: relative; }
.bbl-hero-media .bbl-img { box-shadow: var(--shadow-2); }
.bbl-hero-peek {
position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
min-height: 44px; padding: 10px 16px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .94); color: var(--bbl-navy);
font-size: 14px; line-height: 18px; font-weight: 800; text-decoration: none; box-shadow: var(--shadow-1);
}
.bbl-hero-peek:hover { background: #FFF; }
.bbl-hero-side { display: grid; gap: 14px; }
.bbl-hero-lede { margin: 0; font-size: 18px; line-height: 1.5; color: var(--bbl-ink); max-width: 36ch; }
.bbl-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bbl-sales .bbl-badges .bbl-badge {
display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 12px 4px 10px; border: 0; border-radius: var(--radius-pill);
background: rgba(255, 255, 255, .62); color: var(--bbl-navy); font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: .01em; text-transform: none;
}
.bbl-sales .bbl-hero .bbl-trust-line { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--bbl-ink); max-width: 44ch; }
.bbl-sales .bbl-hero .bbl-trust-line::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--bbl-teal); }
@media (min-width: 768px) {
.bbl-sales .bbl-hero { padding-block: 16px 88px; }
/* Tablets: two even columns, so the offer keeps its button on one line; 7/5 from 1024. */
.bbl-sales .bbl-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "media side"; column-gap: clamp(28px, 4vw, 64px); row-gap: clamp(24px, 3vw, 44px); }
.bbl-hero-head { grid-area: head; }
.bbl-hero-media { grid-area: media; }
.bbl-hero-side { grid-area: side; align-self: center; gap: 18px; }
.bbl-sales .bbl-hero h1 { max-width: 19ch; }
.bbl-hero-lede { font-size: 20px; }
}
@media (min-width: 1024px) { .bbl-sales .bbl-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* Hero offer: segmented edition toggle, price, one action. */
.bbl-quick { background: #FFF; border-radius: var(--radius-img); padding: 14px; box-shadow: var(--shadow-2); display: grid; gap: 14px; }
.bbl-seg { border: 0; margin: 0; padding: 4px; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: #F4EEE6; border-radius: 18px; }
.bbl-seg-opt { position: relative; display: block; cursor: pointer; }
.bbl-seg-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bbl-seg-body {
display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 6px 4px; border-radius: 14px;
text-align: center; transition: background-color .18s ease, box-shadow .18s ease, color .18s ease; border: 2px solid transparent;
}
.bbl-seg-name { font-family: var(--font-display); font-size: 17px; line-height: 20px; font-weight: 800; color: var(--bbl-navy); }
.bbl-seg-sub { margin-top: 1px; font-size: 12px; line-height: 15px; font-weight: 700; color: var(--bbl-muted-2); white-space: nowrap; }
.bbl-seg-price { margin-top: 3px; font-size: 15px; line-height: 18px; font-weight: 800; color: var(--bbl-navy); letter-spacing: -.005em; }
.bbl-quick-price:empty { display: none; }
.bbl-seg-opt:hover .bbl-seg-body { background: rgba(255, 255, 255, .7); }
.bbl-seg-input:checked + .bbl-seg-body { background: #FFF; border-color: var(--bbl-navy); box-shadow: 0 6px 14px -8px rgba(22, 59, 92, .45); }
.bbl-seg-input:focus-visible + .bbl-seg-body { outline: 3px solid var(--bbl-navy); outline-offset: 2px; }
.bbl-seg.is-nudged { animation: bbl-nudge .6s ease-in-out; box-shadow: 0 0 0 3px var(--bbl-yellow); }
@keyframes bbl-nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.bbl-quick-row { display: grid; gap: 12px; align-items: center; }
.bbl-quick-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding-inline: 4px; color: var(--bbl-navy); }
.bbl-quick-price strong { font-family: var(--font-display); font-size: 24px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.bbl-quick-price .bbl-price-ref { font-size: 17px; color: var(--bbl-muted-2); margin: 0; }
.bbl-quick-from { font-size: 14px; font-weight: 700; color: var(--bbl-muted-2); }
.bbl-quick-price .bbl-currency { font-size: 13px; font-weight: 800; color: var(--bbl-muted-2); letter-spacing: .04em; }
.bbl-quick .bbl-buy { width: 100%; display: flex; white-space: nowrap; padding-inline: 20px; }
.bbl-quick .bbl-quick-state { margin: 0; min-height: 52px; width: 100%; border-radius: 16px; background: #F4EEE6; color: var(--bbl-navy); font-weight: 800; }
.bbl-nojs-cta { width: 100%; }
.js .bbl-nojs-cta { display: none; }
html:not(.js) .bbl-quick .bbl-buy { display: none; }
@media (min-width: 420px) {
.bbl-quick { padding: 16px; }
}
@media (min-width: 1100px) {
.bbl-quick { padding: 18px; gap: 16px; }
}
/* ---------------------------------------------------------------- 2 what you get */
.bbl-sales .bbl-features { background: var(--bbl-cream); }
.bbl-feature-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.bbl-feature {
display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: start;
background: #FFF; border-radius: var(--radius-img); padding: 20px; box-shadow: var(--shadow-1);
}
.bbl-feature-icon { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--theme-bg); color: var(--bbl-navy); }
.bbl-feature h3 { margin: 2px 0 4px; font-size: 20px; }
.bbl-feature p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--bbl-ink); }
@media (min-width: 768px) {
.bbl-feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.bbl-feature { grid-template-columns: 1fr; padding: 32px 28px 30px; }
.bbl-feature-icon { grid-row: auto; width: 64px; height: 64px; border-radius: 20px; margin-bottom: 22px; }
.bbl-feature h3 { font-size: 23px; margin-bottom: 8px; }
.bbl-feature p { font-size: 17px; }
}
/* ---------------------------------------------------------------- 3 inside */
.bbl-sales .bbl-inside { background: var(--theme-soft); }
.bbl-inside-head { margin-bottom: 28px; }
.bbl-inside-figure { margin: 0; }
.bbl-inside-media { position: relative; }
.bbl-inside-media > .bbl-img, .bbl-inside-media > .bbl-picture > .bbl-img { border-radius: 0; }
@media (min-width: 768px) {
.bbl-inside-head { margin-bottom: 40px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
.bbl-inside-head h2 { margin: 0; }
.bbl-inside-media { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; }
.bbl-inside-media > .bbl-img, .bbl-inside-media > .bbl-picture > .bbl-img { border-radius: 28px; box-shadow: var(--shadow-2); }
}
/* Numbered guides: a navy dot ringed by a hand-drawn circle (the signature of the pages). */
.bbl-hotspot {
position: absolute; z-index: 3; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; background: transparent;
font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--bbl-cream);
}
.bbl-hotspot::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--bbl-navy); box-shadow: 0 6px 16px -6px rgba(22, 59, 92, .7); transition: transform .18s ease; z-index: -1; }
.bbl-hotspot::after {
content: ""; position: absolute; inset: -1px; border: 2.5px solid var(--theme-accent);
border-radius: 46% 54% 51% 49% / 55% 45% 55% 45%; transform: rotate(-12deg); transition: transform .25s ease;
}
.bbl-hotspot:hover::before, .bbl-hotspot.is-open::before, .bbl-hotspot:focus-visible::before { transform: scale(1.1); }
.bbl-hotspot:hover::after, .bbl-hotspot.is-open::after { transform: rotate(18deg) scale(1.06); }
.bbl-hotspot:focus-visible { outline: 3px solid #FFF; outline-offset: 2px; }
.bbl-hotspot-tip {
position: absolute; z-index: 4; left: var(--x); top: var(--y); width: max-content; max-width: min(250px, 72vw);
transform: translate(-50%, calc(-100% - 30px)); padding: 12px 14px; border-radius: 14px; background: #FFF; color: var(--bbl-ink);
font-size: 14.5px; line-height: 1.45; box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .18s ease, visibility .18s;
}
.bbl-hotspot-tip strong { display: block; font-family: var(--font-display); font-size: 16px; line-height: 1.25; color: var(--bbl-navy); margin-bottom: 2px; }
.bbl-hotspot-tip.is-left { transform: translate(-22px, calc(-100% - 30px)); }
.bbl-hotspot-tip.is-right { transform: translate(calc(-100% + 22px), calc(-100% - 30px)); }
.bbl-hotspot-tip.is-below { transform: translate(-50%, 30px); }
.bbl-hotspot-tip.is-left.is-below { transform: translate(-22px, 30px); }
.bbl-hotspot-tip.is-right.is-below { transform: translate(calc(-100% + 22px), 30px); }
.bbl-hotspot:hover + .bbl-hotspot-tip, .bbl-hotspot:focus-visible + .bbl-hotspot-tip, .bbl-hotspot-tip.is-open { opacity: 1; visibility: visible; }
.bbl-zoom-open {
position: absolute; z-index: 3; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px;
min-height: 44px; padding: 10px 16px; border: 0; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .94); color: var(--bbl-navy);
font: 800 14px/18px var(--font-body); cursor: pointer; box-shadow: var(--shadow-1);
}
.bbl-zoom-open:hover { background: #FFF; }
@media (max-width: 479px) { .bbl-zoom-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bbl-zoom-open { padding: 10px 12px; } }
/* The same captions as a numbered list, readable without hovering or JavaScript. */
.bbl-inside-figure figcaption { padding-top: 24px; }
.bbl-hotspot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.bbl-hotspot-list li {
display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 16px;
font-size: 16px; line-height: 1.45; color: var(--bbl-ink); transition: background-color .2s ease, box-shadow .2s ease;
}
.bbl-hotspot-list li.is-active { background: #FFF; box-shadow: var(--shadow-1); }
.bbl-hotspot-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bbl-navy); color: var(--bbl-cream); font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.bbl-hotspot-copy strong { display: block; font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--bbl-navy); }
@media (min-width: 768px) {
.bbl-inside-figure figcaption { padding-top: 32px; }
.bbl-hotspot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
}
@media (min-width: 1100px) { .bbl-hotspot-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Full screen: the same image, as large as the screen allows. */
.bbl-zoom { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 31, 49, .96); color: var(--bbl-cream); }
.bbl-zoom::backdrop { background: rgba(12, 31, 49, .7); }
.bbl-zoom[open] { display: flex; align-items: center; justify-content: center; }
.bbl-zoom-stage { width: min(96vw, calc(84vh * 1.5)); }
.bbl-zoom-stage .bbl-img { border-radius: 16px; }
.bbl-zoom-close {
position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
border: 0; border-radius: var(--radius-pill); background: #FFF; color: var(--bbl-navy); font: 800 15px/18px var(--font-body); cursor: pointer;
}
.bbl-zoom-close:focus-visible { outline: 3px solid var(--bbl-yellow); outline-offset: 3px; }
/* ---------------------------------------------------------------- 4 how it works */
.bbl-sales .bbl-how { background: #FFF; }
.bbl-sales .bbl-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: none; }
.bbl-step { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
.bbl-step-media .bbl-img { border-radius: 20px; }
.bbl-step-copy { position: relative; }
.bbl-step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%; background: var(--theme-bg); color: var(--bbl-navy); font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.bbl-step h3 { margin-bottom: 4px; font-size: 20px; }
.bbl-step p { margin: 0; font-size: 16.5px; line-height: 1.5; }
@media (min-width: 768px) {
.bbl-sales .bbl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 44px; }
.bbl-step { grid-template-columns: 1fr; gap: 20px; align-items: start; }
.bbl-step-media .bbl-img { border-radius: var(--radius-img); box-shadow: var(--shadow-1); }
.bbl-step-num { width: 36px; height: 36px; font-size: 17px; margin-bottom: 12px; }
.bbl-step h3 { font-size: 24px; }
.bbl-step p { font-size: 17px; }
}
/* Optional details (first week, technical sheet, everything included): a quiet disclosure. */
.bbl-week, .bbl-specs { margin-top: 32px; max-width: 760px; border-radius: 20px; background: var(--bbl-cream); }
.bbl-week > summary, .bbl-specs > summary, .bbl-faq-more > summary, .bbl-includes-more > summary {
display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 20px;
font-weight: 800; color: var(--bbl-navy); cursor: pointer; list-style: none;
}
.bbl-week > summary::-webkit-details-marker, .bbl-specs > summary::-webkit-details-marker, .bbl-faq-more > summary::-webkit-details-marker,
.bbl-includes-more > summary::-webkit-details-marker, :is(.bbl-sales, .bbl-brand) .bbl-faq-item > summary::-webkit-details-marker { display: none; }
.bbl-week > summary::after, .bbl-specs > summary::after, .bbl-faq-more > summary::after, .bbl-includes-more > summary::after {
content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.bbl-week[open] > summary::after, .bbl-specs[open] > summary::after, .bbl-faq-more[open] > summary::after, .bbl-includes-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.bbl-sales .bbl-week-list { list-style: none; margin: 0; padding: 0 20px 8px; }
.bbl-sales .bbl-week-list li { padding: 10px 0 10px 16px; border-left: 3px solid var(--theme-accent); margin-bottom: 6px; font-size: 16px; line-height: 1.5; }
.bbl-sales .bbl-week-note { margin: 4px 20px 0; padding-bottom: 18px; font-size: 15.5px; color: var(--bbl-ink); }
/* ---------------------------------------------------------------- 5 choose your edition */
.bbl-sales .bbl-offer { background: var(--bbl-cream); scroll-margin-top: 8px; }
.bbl-offer-head h2 { margin-bottom: 8px; }
.bbl-sales .bbl-offer-format { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15.5px; font-weight: 700; color: var(--bbl-navy); }
.bbl-sales .bbl-offer-unavailable, .bbl-sales .bbl-offer-message {
margin: 20px 0 0; max-width: 760px; padding: 16px 20px; border: 0; border-left: 6px solid var(--theme-accent); border-radius: 14px;
background: #FFF; box-shadow: var(--shadow-1); color: var(--bbl-navy); font-weight: 700; font-size: 16px; line-height: 1.5;
}
.bbl-sales .bbl-editions { border: 0; margin: 28px 0 0; padding: 0; min-width: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.bbl-sales .bbl-edition {
position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; row-gap: 14px; align-content: start;
background: #FFF; border-radius: var(--radius-img); padding: 16px; box-shadow: var(--shadow-1); transition: box-shadow .2s ease;
}
.bbl-sales .bbl-edition:has(.bbl-edition-input:checked) { box-shadow: 0 0 0 3px var(--bbl-navy), var(--shadow-2); }
.bbl-edition-media { grid-column: 1; grid-row: 1; align-self: start; }
.bbl-edition-media .bbl-img { border-radius: 16px; }
.bbl-edition-media-pair { position: relative; }
.bbl-edition-media-pair .bbl-pair-b { position: absolute; width: 74%; right: -6px; bottom: -10px; border: 3px solid #FFF; box-shadow: var(--shadow-1); }
.bbl-edition-media-pair .bbl-pair-a { width: 80%; }
.bbl-sales .bbl-edition-label { grid-column: 2; grid-row: 1; display: block; position: relative; cursor: pointer; }
.bbl-sales .bbl-edition-input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.bbl-sales .bbl-edition-body { display: block; background: transparent; border: 0; border-radius: 0; padding: 0 34px 0 0; min-height: 44px; }
.bbl-sales .bbl-edition-input:checked + .bbl-edition-body { border: 0; padding: 0 34px 0 0; background: transparent; box-shadow: none; }
.bbl-sales .bbl-edition-input:checked + .bbl-edition-body::after { content: none; }
.bbl-sales .bbl-edition-input:focus-visible + .bbl-edition-body { outline: 3px solid var(--bbl-navy); outline-offset: 6px; border-radius: 8px; }
.bbl-sales .bbl-edition-name { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.1; font-weight: 800; letter-spacing: -.015em; color: var(--bbl-navy); }
.bbl-sales .bbl-edition-meta { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.4; font-weight: 700; color: var(--bbl-muted-2); }
.bbl-sales .bbl-edition-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 10px; font-size: 15px; color: var(--bbl-navy); }
@media (min-width: 640px) { .bbl-sales .bbl-edition-price { gap: 2px 8px; font-size: 16px; } .bbl-sales .bbl-edition-price strong { font-size: 30px; } }
.bbl-sales .bbl-edition-price strong { font-family: var(--font-display); font-size: 25px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--bbl-navy); }
.bbl-sales .bbl-price-ref { color: var(--bbl-muted-2); margin-right: 0; font-size: 14px; }
.bbl-sales .bbl-currency { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--bbl-muted-2); }
.bbl-edition-note-hand { display: block; margin-top: 6px; font-family: var(--font-accent); font-size: 18px; line-height: 1.2; font-weight: 700; color: var(--bbl-navy); transform: rotate(-2deg); transform-origin: left; }
.bbl-edition-pick { position: absolute; top: 0; right: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #C9BFB3; background: #FFF; transition: background-color .15s ease, border-color .15s ease; }
.bbl-sales .bbl-edition-input:checked + .bbl-edition-body .bbl-edition-pick { background: var(--bbl-navy); border-color: var(--bbl-navy); }
.bbl-sales .bbl-edition-input:checked + .bbl-edition-body .bbl-edition-pick::after { content: ""; position: absolute; left: 8px; top: 4px; width: 7px; height: 12px; border-right: 2.5px solid #FFF; border-bottom: 2.5px solid #FFF; transform: rotate(45deg); }
.bbl-edition-label:hover .bbl-edition-pick { border-color: var(--bbl-navy); }
.bbl-edition-flag {
position: absolute; z-index: 2; top: -12px; left: 20px; display: inline-flex; align-items: center; min-height: 26px; padding: 3px 12px; border-radius: var(--radius-pill);
background: var(--bbl-yellow); color: var(--bbl-navy); font-size: 12.5px; line-height: 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.bbl-sales .bbl-edition > .bbl-includes, .bbl-sales .bbl-edition > .bbl-includes-more, .bbl-sales .bbl-edition > .bbl-tbc-row,
.bbl-sales .bbl-edition > .bbl-card-cta, .bbl-sales .bbl-edition > .bbl-not-orderable { grid-column: 1 / -1; }
.bbl-sales .bbl-includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; font-size: 15.5px; line-height: 1.4; }
.bbl-sales .bbl-includes li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.bbl-sales .bbl-includes li .bbl-icon { margin-top: 2px; color: var(--bbl-teal); }
.bbl-sales .bbl-includes li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bbl-sales .bbl-includes-all li span { display: block; -webkit-line-clamp: none; }
.bbl-includes-more { margin: -4px 0 0; border-radius: 14px; background: var(--bbl-cream); }
.bbl-includes-more > summary { min-height: 44px; padding: 10px 14px; font-size: 14.5px; }
.bbl-includes-more .bbl-includes { padding: 2px 14px 14px; }
.bbl-sales .bbl-edition .bbl-tbc-row { margin: -6px 0 0; }
.bbl-sales .bbl-card-cta { width: 100%; display: flex; align-self: end; }
.bbl-sales .bbl-edition .bbl-not-orderable { display: flex; width: 100%; margin: 0; }
.bbl-sales .bbl-edition-bundle { background: linear-gradient(180deg, var(--theme-soft) 0%, #FFF 60%); }
.bbl-sales .bbl-notice { margin: 28px auto 0; max-width: 72ch; padding: 0; border: 0; background: none; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--bbl-muted-2); }
.bbl-sales .bbl-specs { margin: 24px auto 0; background: #FFF; box-shadow: var(--shadow-1); }
.bbl-sales .bbl-specs > p { margin: 0 20px 12px; font-size: 16px; }
.bbl-sales .bbl-specs-list { margin: 0; padding: 0 20px 14px; display: grid; gap: 0 32px; }
.bbl-sales .bbl-specs-row { display: grid; grid-template-columns: minmax(88px, 30%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bbl-line); font-size: 15.5px; }
.bbl-sales .bbl-specs-row:last-child { border-bottom: 0; }
.bbl-sales .bbl-specs-row dt { font-weight: 800; color: var(--bbl-navy); }
.bbl-sales .bbl-specs-row dd { margin: 0; overflow-wrap: break-word; min-width: 0; }
@media (min-width: 640px) {
.bbl-sales .bbl-edition { grid-template-columns: 132px minmax(0, 1fr); padding: 20px; column-gap: 20px; }
}
@media (min-width: 1024px) {
.bbl-offer-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.bbl-offer-head h2 { margin: 0; }
.bbl-sales .bbl-editions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; align-items: stretch; }
.bbl-sales .bbl-edition { display: flex; flex-direction: column; gap: 18px; padding: 0 24px 24px; }
.bbl-sales .bbl-edition > .bbl-card-cta, .bbl-sales .bbl-edition > .bbl-not-orderable { margin-top: auto; }
.bbl-edition-media { margin: 0 -24px; align-self: stretch; }
/* The slot is square; on wide cards it is cropped wider (!important beats the inline ratio). */
.bbl-edition-media .bbl-img { border-radius: var(--radius-img) var(--radius-img) 0 0; aspect-ratio: 4 / 3 !important; object-fit: cover; }
/* Bundle: the two editions side by side, slightly fanned, on the theme tint. */
.bbl-edition-media-pair { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-img) var(--radius-img) 0 0; overflow: hidden; background: var(--theme-bg); }
.bbl-edition-media-pair .bbl-img, .bbl-edition-media-pair .bbl-pair-a, .bbl-edition-media-pair .bbl-pair-b {
position: absolute; top: 15%; width: 54%; border: 4px solid #FFF; border-radius: 18px; box-shadow: var(--shadow-1); aspect-ratio: 1 / 1 !important; object-fit: cover;
}
.bbl-edition-media-pair .bbl-pair-a { left: 6%; transform: rotate(-5deg); }
.bbl-edition-media-pair .bbl-pair-b { right: 6%; bottom: auto; top: 19%; transform: rotate(5deg); }
.bbl-sales .bbl-edition-label { grid-column: 1; grid-row: auto; }
.bbl-sales .bbl-edition-bundle { transform: translateY(-12px); box-shadow: var(--shadow-2); }
.bbl-edition-flag { z-index: 3; }
.bbl-sales .bbl-edition-bundle:has(.bbl-edition-input:checked) { box-shadow: 0 0 0 3px var(--bbl-navy), var(--shadow-2); }
.bbl-edition-flag { top: 16px; left: 16px; }
}
/* ---------------------------------------------------------------- 6 approach (approved module) */
.bbl-sales .bbl-approach { background: var(--theme-bg); }
.bbl-approach-grid { display: grid; gap: 28px; }
.bbl-approach-lead h2 { max-width: 16ch; }
.bbl-approach-lead p:not(.bbl-eyebrow) { max-width: 46ch; color: var(--bbl-ink); }
.bbl-approach-cards { list-style: none; margin: 0; padding: 0; display: grid; }
.bbl-approach-cards li { padding: 14px 0; border-top: 1.5px solid rgba(22, 59, 92, .18); }
.bbl-sales .bbl-approach-lead p:not(.bbl-eyebrow) { font-size: 16.5px; line-height: 1.6; }
.bbl-approach-cards li:last-child { border-bottom: 1.5px solid rgba(22, 59, 92, .18); }
.bbl-approach-cards h3 { font-size: 19px; margin-bottom: 4px; }
.bbl-approach-cards p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--bbl-ink); }
.bbl-approach-cta { margin: 24px 0 0; }
.bbl-approach-cta .btn-secondary { width: 100%; }
@media (min-width: 900px) {
.bbl-approach-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.bbl-approach-cards li { padding: 22px 0; }
.bbl-approach-cards h3 { font-size: 22px; }
.bbl-approach-cards p { font-size: 16.5px; }
.bbl-sales .bbl-approach-lead p:not(.bbl-eyebrow) { font-size: 18px; }
.bbl-approach-cta .btn-secondary { width: auto; }
}
/* ---------------------------------------------------------------- 7 FAQ, samples, close */
.bbl-sales .bbl-faq { background: var(--bbl-cream); }
.bbl-faq-grid { display: grid; gap: 28px; grid-template-areas: "head" "list" "team"; }
.bbl-faq-aside { display: contents; }
.bbl-faq-aside > h2 { grid-area: head; margin-bottom: 0; }
.bbl-faq-aside > .bbl-team-aside { grid-area: team; margin-top: 0; }
.bbl-faq-list { grid-area: list; }
.bbl-faq-aside h2 { max-width: 12ch; }
.bbl-team-aside { margin-top: 20px; padding: 20px 22px; border-radius: 20px; background: #FFF; box-shadow: var(--shadow-1); max-width: 420px; }
.bbl-team-aside .bbl-team-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--bbl-navy); }
.bbl-team-aside p:last-child { margin: 0; font-size: 15.5px; line-height: 1.55; }
:is(.bbl-sales, .bbl-brand) .bbl-faq-item { background: none; border: 0; border-top: 1.5px solid var(--bbl-line); border-radius: 0; margin: 0; padding: 0; }
:is(.bbl-sales, .bbl-brand) .bbl-faq-list > .bbl-faq-item:last-of-type { border-bottom: 1.5px solid var(--bbl-line); }
:is(.bbl-sales, .bbl-brand) .bbl-faq-item > summary {
display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 2px; list-style: none;
font-family: var(--font-display); font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--bbl-navy); cursor: pointer; border: 0; margin: 0;
}
:is(.bbl-sales, .bbl-brand) .bbl-faq-item[open] > summary { border: 0; margin: 0; }
:is(.bbl-sales, .bbl-brand) .bbl-faq-item > summary::after {
content: ""; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
background: var(--theme-bg) url("data:image/svg+xml;utf8,") center / 16px no-repeat;
transition: transform .2s ease;
}
:is(.bbl-sales, .bbl-brand) .bbl-faq-item[open] > summary::after { transform: rotate(45deg); }
:is(.bbl-sales, .bbl-brand) .bbl-faq-item p { margin: 0 0 20px; max-width: 62ch; font-size: 16.5px; line-height: 1.6; color: var(--bbl-ink); }
.bbl-faq-more { margin-top: 12px; border-radius: 16px; }
.bbl-faq-more > summary { padding-inline: 2px; justify-content: flex-start; gap: 12px; }
.bbl-faq-more-list .bbl-faq-item:last-child { border-bottom: 1.5px solid var(--bbl-line); }
@media (min-width: 1024px) {
.bbl-faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "aside list"; column-gap: 80px; align-items: start; }
.bbl-faq-aside { display: block; grid-area: aside; position: sticky; top: 32px; }
.bbl-faq-aside > .bbl-team-aside { margin-top: 24px; }
}
/* Sample reviews (preview and review only): a slim strip, clearly labelled. */
.bbl-sales .bbl-evidence { background: #F6EEE3; padding-block: 48px; }
.bbl-sales .bbl-evidence h2 { font-size: 24px; margin: 0 0 8px; }
.bbl-sales .bbl-evidence-list { display: grid; gap: 14px; margin-top: 20px; }
.bbl-sales .bbl-evidence .bbl-quote { background: #FFF; border: 0; border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow-1); }
.bbl-sales .bbl-quote blockquote { font-size: 16px; line-height: 1.55; }
@media (min-width: 900px) { .bbl-sales .bbl-evidence-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Close: navy band, the summary of the offer, the one CTA back to the editions. */
.bbl-sales .bbl-close { background: var(--bbl-navy); color: var(--bbl-cream); text-align: center; }
.bbl-sales .bbl-close h2 { color: var(--bbl-cream); margin-inline: auto; max-width: 18ch; }
.bbl-close-sub { margin: 0 auto 28px; max-width: 46ch; color: #D9E3EC; font-size: 18px; }
.bbl-sales .bbl-close-summary { list-style: none; margin: 0 auto 14px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; background: none; border: 0; max-width: none; }
.bbl-sales .bbl-close-summary li { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border: 0; border-radius: var(--radius-pill); background: rgba(255, 248, 238, .1); font-size: 15px; font-weight: 700; color: var(--bbl-cream); }
.bbl-sales .bbl-close-summary strong { color: var(--bbl-cream); font-family: var(--font-display); font-size: 19px; }
.bbl-sales .bbl-close .bbl-offer-format { color: #D9E3EC; font-weight: 600; font-size: 14.5px; display: block; margin: 0 0 28px; }
.bbl-close-cta { margin: 0; }
.bbl-sales .bbl-close .btn-primary { min-width: min(100%, 320px); }
.bbl-sales .bbl-close :focus-visible { outline-color: var(--bbl-yellow); }
.bbl-sales .bbl-close .bbl-tbc { background: rgba(255, 243, 214, .95); }
/* ---------------------------------------------------------------- sticky bar */
.bbl-sales .bbl-sticky { background: #FFF; border-top: 0; box-shadow: 0 -10px 30px -12px rgba(22, 59, 92, .3); padding: 10px 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.bbl-sales .bbl-sticky-info { font-size: 13.5px; line-height: 1.3; }
.bbl-sales .bbl-sticky-cta { min-height: 48px; padding: 12px 18px; font-size: 15.5px; }
/* ======================================================================================
Brand site, redesign v2 (art direction v2, section 5): home, catalogue, approach, about,
help, contact and legal pages. Same vocabulary as the sales pages (type scale, buttons,
image slots, numbered guides, reveal), scoped to body.bbl-brand. One idea per band:
home = hero (cream) · tools (white, one theme card per line) · inside (sky tint) ·
where to start (cream) · beliefs (navy) · experience (cream).
Signature: the products hang as paper tags under the hero composition.
====================================================================================== */
.bbl-brand { --mark: var(--mark-rose); --theme-soft: #F6EEE3; }
.bbl-brand .bbl-section h2 { max-width: 20ch; }
.bbl-brand .bbl-section-head { margin-bottom: clamp(28px, 4vw, 52px); }
.bbl-brand .bbl-section-head h2 { margin-bottom: 0; }
.bbl-brand .bbl-section-head .bbl-section-intro { margin-top: 14px; }
@media (min-width: 900px) {
.bbl-brand .bbl-section-head:has(.bbl-section-intro) { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: end; }
.bbl-brand .bbl-section-head:has(.bbl-section-intro) .bbl-section-intro { margin-top: 0; }
.bbl-brand .bbl-section-head:has(.bbl-section-intro) .bbl-eyebrow { grid-column: 1 / -1; }
}
.btn-ghost {
display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 26px;
border: 2px solid var(--bbl-navy); border-radius: var(--radius-pill); background: transparent; color: var(--bbl-navy);
font: 800 17px/22px var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease;
}
.btn-ghost:hover { background: var(--bbl-navy); color: var(--bbl-cream); }
.btn-ghost:focus-visible { outline: 3px solid var(--bbl-navy); outline-offset: 3px; }
/* ---------------------------------------------------------------- home hero */
/* Phone: eyebrow and H1, the composition, the promise and the two ways in (all in the first
screen), the approved trust line, then the three products as a quiet list. */
.bbl-home-hero { background: var(--bbl-cream); }
.bbl-brand .bbl-home-hero { padding-block: 10px 56px; }
.bbl-home-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.bbl-brand .bbl-home-hero .bbl-eyebrow { margin-bottom: 12px; }
.bbl-brand .bbl-home-hero h1 { font-size: clamp(44px, 24px + 4.6vw, 92px); line-height: .97; letter-spacing: -.038em; max-width: none; }
.bbl-h1-line, .bbl-h-line { display: block; }
@media (max-width: 479px) { .bbl-brand .bbl-home-hero .bbl-eyebrow { font-size: 12px; letter-spacing: .1em; } }
.bbl-home-hero-sub { margin: 0; font-size: 18.5px; line-height: 1.5; color: var(--bbl-ink); max-width: 36ch; }
.bbl-home-hero-media { position: relative; --theme-bg: #F0E3D1; --theme-accent: var(--bbl-coral); }
.bbl-home-hero-media .bbl-img { border-radius: 24px; box-shadow: var(--shadow-2); }
.bbl-home-hero-side { display: grid; gap: 16px; align-content: start; }
.bbl-cta-pair { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.bbl-cta-pair > a { width: 100%; }
.bbl-brand .bbl-home-hero .bbl-trust-line { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.45; max-width: 40ch; }
.bbl-brand .bbl-home-hero .bbl-trust-line::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--bbl-teal); }
/* Tags (phone): one quiet list of the three products. */
.bbl-tags { list-style: none; margin: 10px 0 0; padding: 4px 0; background: #FFF; border-radius: 24px; box-shadow: var(--shadow-1); }
.bbl-tag + .bbl-tag { border-top: 1px solid var(--bbl-line); }
.bbl-tag-link {
display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 20px; align-items: center; gap: 14px; min-height: 72px; padding: 12px 18px;
color: var(--bbl-navy); text-decoration: none;
}
.bbl-tag-eyelet { width: 14px; height: 14px; border-radius: 50%; background: var(--theme-bg); box-shadow: inset 0 0 0 2px var(--theme-accent); }
.bbl-tag-text { display: grid; gap: 1px; min-width: 0; }
.bbl-tag-format { font-size: 11.5px; line-height: 1.3; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bbl-muted-2); }
.bbl-tag-name { font-family: var(--font-display); font-size: 18px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.bbl-tag-meta { font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--bbl-muted-2); }
.bbl-tag-price { font-family: var(--font-display); font-size: 17px; font-weight: 800; white-space: nowrap; }
.bbl-tag-from { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--bbl-muted-2); }
.bbl-tag-go { display: inline-flex; color: var(--bbl-navy); transition: transform .18s ease; }
.bbl-tag-link:hover .bbl-tag-go { transform: translateX(3px); }
.bbl-tag-link:focus-visible { outline: 3px solid var(--bbl-navy); outline-offset: -3px; border-radius: 18px; }
@media (min-width: 480px) {
.bbl-cta-pair { flex-direction: row; flex-wrap: wrap; }
.bbl-cta-pair > a { width: auto; }
}
/* Tablet and up: the products hang as paper tags across the bottom edge of the composition. */
@media (min-width: 768px) {
.bbl-brand .bbl-home-hero { padding-block: 20px 88px; }
.bbl-home-hero-grid { row-gap: 0; }
.bbl-home-hero-head { order: 1; }
.bbl-home-hero-side { order: 2; margin-top: 28px; }
.bbl-home-hero-media { order: 3; margin-top: 44px; }
.bbl-tags { order: 4; }
.bbl-home-hero-media .bbl-img { aspect-ratio: 16 / 9 !important; object-fit: cover; }
.bbl-home-hero-media .bbl-img { border-radius: 32px; }
.bbl-tags {
position: relative; z-index: 2; margin: -72px 0 0; padding: 0 20px; background: none; box-shadow: none; border-radius: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start;
}
.bbl-tag + .bbl-tag { border-top: 0; }
.bbl-tag { filter: drop-shadow(0 14px 18px rgba(22, 59, 92, .16)) drop-shadow(0 2px 3px rgba(22, 59, 92, .08)); transform: rotate(var(--tilt, -1.6deg)); transition: transform .25s ease; }
.bbl-tag:nth-child(2) { --tilt: 1.3deg; margin-top: 16px; }
.bbl-tag:nth-child(3) { --tilt: -.7deg; margin-top: 6px; }
.bbl-tag:hover, .bbl-tag:focus-within { transform: rotate(0deg) translateY(-4px); }
.bbl-tag-link {
position: relative; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text text" "price go"; row-gap: 16px; column-gap: 10px;
min-height: 0; padding: 36px 18px 16px; background: var(--theme-bg); border-radius: 4px 4px 16px 16px;
clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px);
}
.bbl-tag-eyelet { position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: var(--bbl-cream); box-shadow: inset 0 0 0 2px rgba(22, 59, 92, .3); }
.bbl-tag-text { grid-area: text; gap: 4px; }
.bbl-tag-name { font-size: 21px; line-height: 1.08; letter-spacing: -.02em; }
.bbl-tag-meta { color: var(--bbl-ink); font-size: 13.5px; }
.bbl-tag-price { grid-area: price; align-self: center; font-size: 23px; letter-spacing: -.02em; }
.bbl-tag-go { grid-area: go; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .72); }
.bbl-tag-link:focus-visible { outline-offset: 2px; border-radius: 4px 4px 16px 16px; }
}
/* Desktop: the H1 and the promise side by side, then the composition across the page with
the tags hanging from its bottom edge. */
@media (min-width: 1024px) {
.bbl-brand .bbl-home-hero { padding-block: 40px 120px; }
.bbl-home-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "head side" "media media"; column-gap: clamp(40px, 5vw, 88px); }
.bbl-home-hero-head { grid-area: head; align-self: end; }
.bbl-home-hero-side { grid-area: side; align-self: end; margin: 0; gap: 20px; padding-bottom: 6px; }
.bbl-home-hero-media { grid-area: media; margin-top: 48px; }
.bbl-home-hero-media .bbl-img { aspect-ratio: 12 / 5 !important; border-radius: 36px; }
.bbl-tags { grid-area: media; align-self: end; justify-self: center; width: min(100%, 860px); margin: 0; padding: 0; transform: translateY(42%); gap: 22px; }
.bbl-home-hero-sub { font-size: 20px; }
.bbl-home-hero .bbl-cta-pair { flex-wrap: nowrap; gap: 12px; }
.bbl-home-hero .bbl-cta-pair > a { padding-inline: 22px; font-size: 16px; white-space: nowrap; }
}
/* ---------------------------------------------------------------- product rows */
.bbl-brand .bbl-products { background: #FFF; }
.bbl-product-rows { display: grid; gap: clamp(18px, 2.4vw, 32px); }
.bbl-product-row { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--theme-bg); border-radius: 28px; overflow: hidden; }
.bbl-product-media { padding: 14px 14px 0; }
.bbl-product-media .bbl-img { border-radius: 20px; --theme-bg: var(--theme-soft); }
@media (max-width: 899px) { .bbl-product-media .bbl-img { aspect-ratio: 4 / 3 !important; object-fit: cover; } }
.bbl-product-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 22px 26px; }
.bbl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.bbl-chip {
display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 12px 4px 10px; border-radius: var(--radius-pill);
background: rgba(255, 255, 255, .66); color: var(--bbl-navy); font-size: 13px; line-height: 18px; font-weight: 800;
}
.bbl-chip-state { background: #FFF; box-shadow: inset 0 0 0 1.5px var(--bbl-navy); padding-left: 12px; }
.bbl-brand .bbl-product-name { margin: 0 0 10px; font-size: clamp(32px, 22px + 2.6vw, 56px); line-height: 1; letter-spacing: -.03em; font-weight: 800; }
.bbl-product-name .bbl-tbc { vertical-align: middle; letter-spacing: 0; }
.bbl-product-benefit { margin: 0 0 14px; font-size: 18px; line-height: 1.5; color: var(--bbl-ink); max-width: 32ch; }
.bbl-product-ages { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 800; color: var(--bbl-navy); }
.bbl-product-foot { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; margin-top: 22px; }
.bbl-from { margin: 0; display: flex; align-items: baseline; gap: 6px; color: var(--bbl-navy); }
.bbl-from strong { font-family: var(--font-display); font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.bbl-from-label { font-size: 15px; font-weight: 700; color: var(--bbl-muted-2); }
.bbl-brand .bbl-from .bbl-currency { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--bbl-muted-2); }
.bbl-product-cta { width: 100%; }
/* Catalogue: every edition with its age and price. */
.bbl-ed-list { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; max-width: 440px; border-radius: 18px; background: rgba(255, 255, 255, .6); }
.bbl-ed { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "age price"; column-gap: 12px; padding: 12px 16px; }
.bbl-ed + .bbl-ed { border-top: 1px solid var(--bbl-line); }
.bbl-ed-name { grid-area: name; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--bbl-navy); }
.bbl-ed-age { grid-area: age; font-size: 14px; font-weight: 600; color: var(--bbl-muted-2); }
.bbl-ed-price { grid-area: price; align-self: center; font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--bbl-navy); }
@media (min-width: 480px) {
.bbl-product-foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.bbl-product-cta { width: auto; }
}
@media (min-width: 900px) {
.bbl-product-row { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); grid-template-areas: "media copy"; align-items: center; border-radius: 36px; }
.bbl-product-row.is-reverse { grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); grid-template-areas: "copy media"; }
.bbl-product-media { grid-area: media; padding: 22px; }
.bbl-product-media .bbl-img { border-radius: 26px; aspect-ratio: 5 / 4 !important; object-fit: cover; }
.bbl-product-copy { grid-area: copy; padding: 40px clamp(28px, 4vw, 64px); }
.bbl-product-row.is-reverse .bbl-product-copy { padding-left: clamp(36px, 5vw, 80px); }
.bbl-product-benefit { font-size: 20px; }
.bbl-product-foot { margin-top: 30px; justify-content: flex-start; column-gap: 28px; }
}
/* ---------------------------------------------------------------- look inside (home) */
.bbl-home .bbl-inside { --theme-bg: var(--bbl-sky); --theme-soft: #EAF3F8; --theme-accent: var(--bbl-coral); background: var(--theme-soft); }
/* ---------------------------------------------------------------- where to start */
.bbl-brand .bbl-start { background: var(--bbl-cream); scroll-margin-top: 8px; }
.bbl-start-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bbl-start-tile {
display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 14px 10px 10px;
background: #FFF; border-radius: 22px; box-shadow: var(--shadow-1); color: var(--bbl-navy); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease;
}
.bbl-start-media .bbl-img { border-radius: 16px; transition: transform .35s ease; }
.bbl-start-media { display: block; overflow: hidden; border-radius: 16px; }
.bbl-start-copy { display: grid; gap: 8px; }
.bbl-start-situation { font-family: var(--font-display); font-size: 19px; line-height: 1.22; font-weight: 700; letter-spacing: -.01em; }
.bbl-start-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: var(--bbl-navy); }
.bbl-start-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--theme-bg); box-shadow: inset 0 0 0 2px var(--theme-accent); }
.bbl-start-pick .bbl-icon { transition: transform .18s ease; }
.bbl-start-tile:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.bbl-start-tile:hover .bbl-start-pick .bbl-icon { transform: translateX(3px); }
.bbl-start-tile:hover .bbl-start-media .bbl-img { transform: scale(1.03); }
.bbl-start-tile:focus-visible { outline: 3px solid var(--bbl-navy); outline-offset: 3px; }
@media (min-width: 768px) {
.bbl-start-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.bbl-start-tile { grid-template-columns: 1fr; align-content: start; height: 100%; padding: 12px 12px 24px; border-radius: 28px; gap: 20px; }
.bbl-start-media, .bbl-start-media .bbl-img { border-radius: 20px; }
.bbl-start-copy { padding: 0 10px; gap: 14px; }
.bbl-start-situation { font-size: clamp(21px, 14px + 1vw, 26px); }
.bbl-start-pick { font-size: 15.5px; }
}
/* ---------------------------------------------------------------- beliefs (HOME-03) */
.bbl-brand .bbl-beliefs { background: var(--bbl-navy); color: var(--bbl-cream); }
.bbl-brand .bbl-beliefs h2 { color: var(--bbl-cream); }
.bbl-beliefs-head { margin-bottom: clamp(32px, 5vw, 64px); }
.bbl-brand .bbl-beliefs .bbl-section-intro { margin-top: 14px; color: #D9E3EC; max-width: 44ch; }
.bbl-belief-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bbl-belief { padding: 24px 0 26px; border-top: 1px solid rgba(255, 248, 238, .2); }
.bbl-belief-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 50%; background: rgba(247, 190, 52, .14); color: var(--bbl-yellow); }
.bbl-brand .bbl-belief h3 { color: var(--bbl-cream); font-size: 22px; margin-bottom: 8px; }
.bbl-belief p { margin: 0; color: #D9E3EC; font-size: 16.5px; line-height: 1.6; max-width: 40ch; }
.bbl-beliefs :focus-visible { outline-color: var(--bbl-yellow); }
@media (max-width: 639px) {
.bbl-belief { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.bbl-belief-icon { margin: 0; }
.bbl-brand .bbl-belief h3 { margin: 0; }
.bbl-belief p { grid-column: 1 / -1; margin-top: 12px; }
}
@media (min-width: 640px) { .bbl-belief-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 900px) {
.bbl-beliefs-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: end; }
.bbl-brand .bbl-beliefs-head h2 { margin: 0; }
.bbl-brand .bbl-beliefs .bbl-section-intro { margin: 0; font-size: 19px; }
}
@media (min-width: 1100px) {
.bbl-belief-list { column-gap: 72px; }
.bbl-belief { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 22px; padding: 34px 0 40px; }
.bbl-belief-icon { grid-row: span 2; width: 52px; height: 52px; margin: 0; }
.bbl-brand .bbl-belief h3 { font-size: 27px; margin-top: 8px; }
.bbl-belief p { font-size: 17.5px; }
}
/* ---------------------------------------------------------------- experience / team note */
.bbl-brand .bbl-team-block { background: var(--bbl-cream); }
.bbl-team-grid { display: grid; gap: 28px; align-items: center; }
.bbl-team-media { margin: 0; --theme-bg: #EFE5D6; --theme-accent: var(--bbl-coral); }
.bbl-team-media .bbl-img { border-radius: 26px; box-shadow: var(--shadow-1); }
.bbl-team-media figcaption { margin-top: 10px; }
.bbl-team-copy > p:not(.bbl-eyebrow):not(.bbl-team-signature):not(.bbl-team-cta) { max-width: 46ch; font-size: 17.5px; line-height: 1.65; color: var(--bbl-ink); }
.bbl-brand .bbl-team-copy h2 { font-size: clamp(30px, 20px + 2vw, 46px); max-width: 22ch; }
.bbl-team-signature { margin: 8px 0 0; font-family: var(--font-accent); font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--bbl-navy); transform: rotate(-1.5deg); transform-origin: left; }
.bbl-team-cta { margin: 28px 0 0; }
@media (min-width: 900px) {
.bbl-team-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); }
.bbl-team-block.is-reverse .bbl-team-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.bbl-team-block.is-reverse .bbl-team-media { order: 2; }
}
/* ---------------------------------------------------------------- inner page hero */
.bbl-page-hero { background: var(--bbl-cream); }
.bbl-brand .bbl-page-hero { padding-block: 24px 56px; }
.bbl-brand .bbl-page-hero h1 { font-size: clamp(40px, 24px + 4.2vw, 84px); line-height: .98; letter-spacing: -.035em; max-width: 14ch; }
.bbl-page-lede { margin: 20px 0 0; font-size: 19px; line-height: 1.55; color: var(--bbl-ink); max-width: 46ch; }
.bbl-page-hero-cta { margin: 28px 0 0; }
.bbl-page-hero-media { margin-top: 36px; --theme-bg: #EFE5D6; --theme-accent: var(--bbl-coral); }
.bbl-page-hero-media .bbl-img { border-radius: 26px; box-shadow: var(--shadow-2); }
@media (max-width: 767px) { .bbl-page-hero-media .bbl-img { aspect-ratio: 3 / 2 !important; } }
@media (min-width: 900px) {
.bbl-brand .bbl-page-hero { padding-block: 48px 96px; }
.bbl-page-hero-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: end; }
.bbl-page-hero-copy .bbl-eyebrow { grid-column: 1 / -1; }
.bbl-page-hero-copy h1 { grid-column: 1; }
.bbl-page-lede { grid-column: 2; margin: 0 0 8px; font-size: 21px; }
.bbl-page-hero-cta { grid-column: 2; margin-top: 20px; }
.bbl-page-hero-media { margin-top: 56px; }
.bbl-page-hero-media .bbl-img { border-radius: 36px; }
}
/* ---------------------------------------------------------------- editorial blocks */
.bbl-brand .bbl-text { background: var(--bbl-cream); }
.bbl-brand .bbl-tone-white { background: #FFF; }
.bbl-prose { max-width: 66ch; }
.bbl-prose p { font-size: 18px; line-height: 1.7; color: var(--bbl-ink); margin: 0 0 1.1em; }
.bbl-prose p:last-child { margin-bottom: 0; }
.bbl-text.has-lede .bbl-prose p:first-child { font-family: var(--font-display); font-size: clamp(21px, 16px + .8vw, 26px); line-height: 1.35; font-weight: 700; letter-spacing: -.012em; color: var(--bbl-navy); margin-bottom: 1em; }
@media (min-width: 900px) {
.bbl-text .bbl-container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; }
.bbl-text .bbl-section-head { grid-column: 1; }
.bbl-text .bbl-prose { grid-column: 2; }
}
.bbl-brand .bbl-principles { background: #FFF; }
.bbl-principle-list { list-style: none; margin: 0; padding: 0; display: grid; }
.bbl-principle { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; padding: 26px 0; border-top: 1.5px solid var(--bbl-line); }
.bbl-principle:last-child { border-bottom: 1.5px solid var(--bbl-line); }
.bbl-principle-icon { grid-row: span 2; display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 16px; background: #F6EEE3; color: var(--bbl-navy); }
.bbl-brand .bbl-principle h3 { margin: 4px 0 6px; font-size: clamp(21px, 16px + .9vw, 27px); }
.bbl-principle p { margin: 0; font-size: 17px; line-height: 1.6; max-width: 46ch; }
@media (min-width: 900px) {
.bbl-principle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.bbl-principle { padding: 34px 0; }
.bbl-principle:nth-last-child(2) { border-bottom: 1.5px solid var(--bbl-line); }
}
.bbl-brand .bbl-howto { background: #F6EEE3; }
.bbl-howto-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bbl-howto-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; align-content: start; padding: 22px; background: #FFF; border-radius: 24px; box-shadow: var(--shadow-1); }
.bbl-howto-num {
position: relative; display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; margin: 2px;
font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--bbl-cream); z-index: 0;
}
.bbl-howto-num::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--bbl-navy); z-index: -1; }
.bbl-howto-num::after { content: ""; position: absolute; inset: -1px; border: 2.5px solid var(--bbl-coral); border-radius: 46% 54% 51% 49% / 55% 45% 55% 45%; transform: rotate(-12deg); }
.bbl-brand .bbl-howto-step h3 { margin: 8px 0 6px; font-size: 21px; }
.bbl-howto-step p { margin: 0; font-size: 16.5px; line-height: 1.55; }
@media (min-width: 900px) {
.bbl-howto-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bbl-howto-step { grid-template-columns: 1fr; padding: 30px 28px 32px; border-radius: 28px; }
.bbl-brand .bbl-howto-step h3 { margin-top: 12px; font-size: 24px; }
}
.bbl-brand .bbl-compare { background: var(--bbl-cream); }
.bbl-brand .bbl-compare .bbl-compare-col { background: #EAF1E3; }
.bbl-brand .bbl-compare .bbl-compare-col.is-not { background: #FBE7E2; }
.bbl-compare-grid { display: grid; gap: 14px; }
.bbl-compare-col { padding: 24px 22px; border-radius: 24px; background: #F2F6ED; }
.bbl-compare-col.is-not { background: #FCEEEB; }
.bbl-brand .bbl-compare-col h3 { font-size: 22px; margin-bottom: 14px; }
.bbl-compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bbl-compare-col li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 17px; line-height: 1.5; }
.bbl-compare-col li .bbl-icon { margin-top: 3px; color: var(--bbl-forest); }
.bbl-compare-col.is-not li .bbl-icon { color: #B5402F; }
.bbl-compare-note { margin-top: 28px; max-width: 66ch; padding: 4px 0 4px 20px; border-left: 4px solid var(--bbl-teal); }
.bbl-compare-note p { margin: 0 0 .6em; font-size: 18px; line-height: 1.6; }
.bbl-compare-note p:last-child { margin: 0; }
@media (min-width: 768px) {
.bbl-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bbl-compare-col { padding: 34px 32px; border-radius: 28px; }
}
/* ---------------------------------------------------------------- closing band */
.bbl-brand .bbl-closing { background: var(--bbl-navy); color: var(--bbl-cream); text-align: center; }
.bbl-brand .bbl-closing h2 { color: var(--bbl-cream); margin-inline: auto; max-width: 18ch; }
.bbl-closing-body { margin: 0 auto; max-width: 46ch; color: #D9E3EC; font-size: 18px; line-height: 1.6; }
.bbl-closing-actions { margin: 32px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; }
.bbl-close-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--bbl-cream); font-weight: 800; text-underline-offset: 5px; }
.bbl-closing :focus-visible { outline-color: var(--bbl-yellow); }
/* ---------------------------------------------------------------- help */
.bbl-brand .bbl-help { background: #FFF; }
.bbl-help-grid { display: grid; gap: 28px; }
.bbl-help-nav-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bbl-muted-2); }
.bbl-help-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bbl-help-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); background: #F6EEE3; color: var(--bbl-navy); font-weight: 800; font-size: 15px; text-decoration: none; }
.bbl-help-nav a:hover { background: #EFE3D2; }
.bbl-help-groups { display: grid; gap: clamp(40px, 6vw, 72px); }
.bbl-faq-group { scroll-margin-top: 16px; }
.bbl-brand .bbl-faq-group h2 { font-size: clamp(26px, 18px + 1.6vw, 38px); margin-bottom: 8px; }
.bbl-faq-group-intro { margin: 0 0 16px; color: var(--bbl-muted-2); }
.bbl-brand .bbl-faq-item > summary::after { background-color: #F6EEE3; }
.bbl-faq-answer { padding-bottom: 6px; }
.bbl-brand .bbl-faq-answer p { margin: 0 0 14px; }
@media (min-width: 1024px) {
.bbl-help-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: 80px; align-items: start; }
.bbl-help-nav { position: sticky; top: 24px; }
.bbl-help-nav ul { flex-direction: column; gap: 2px; }
.bbl-help-nav a { background: none; padding: 0 12px; margin-left: -12px; font-size: 16px; }
.bbl-help-nav a:hover { background: #F6EEE3; }
}
.bbl-brand .bbl-contact-card { background: var(--bbl-cream); }
.bbl-contact-inner { max-width: 820px; padding: 28px 22px; border-radius: 28px; background: #FFF; box-shadow: var(--shadow-1); }
.bbl-contact-inner .bbl-section-head { margin-bottom: 12px; }
.bbl-contact-inner > p { font-size: 17.5px; line-height: 1.6; max-width: 54ch; }
.bbl-contact-mail { margin: 20px 0 0; }
.bbl-contact-mail .btn-secondary { gap: 10px; }
@media (min-width: 768px) { .bbl-contact-inner { padding: 44px 48px; border-radius: 36px; } }
.bbl-company { margin: 28px 0 0; display: grid; gap: 0; max-width: 620px; }
.bbl-company-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-top: 1px solid var(--bbl-line); }
.bbl-company-row:last-child { border-bottom: 1px solid var(--bbl-line); }
.bbl-company dt { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bbl-muted-2); }
.bbl-company dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--bbl-ink); overflow-wrap: anywhere; }
@media (min-width: 640px) { .bbl-company-row { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: baseline; } }
/* ---------------------------------------------------------------- legal documents */
.bbl-brand .bbl-legal { background: var(--bbl-cream); padding-top: clamp(28px, 4vw, 56px); }
.bbl-legal-head { max-width: 72ch; margin-bottom: clamp(28px, 4vw, 56px); }
.bbl-brand .bbl-legal-head h1 { font-size: clamp(38px, 26px + 3vw, 68px); }
.bbl-draft-note {
display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 8px 16px; border: 1.5px dashed var(--bbl-coral); border-radius: var(--radius-pill);
background: #FFF3D6; font-size: 14px; line-height: 1.4; font-weight: 800; color: var(--bbl-navy);
}
.bbl-legal-updated { margin: 14px 0 0; font-size: 15px; color: var(--bbl-muted-2); }
.bbl-legal-intro { margin-top: 20px; }
.bbl-legal-intro p { font-size: 19px; line-height: 1.6; color: var(--bbl-ink); }
.bbl-legal-grid { display: grid; gap: 28px; }
.bbl-legal-toc { padding: 18px 20px; border-radius: 20px; background: #FFF; box-shadow: var(--shadow-1); }
.bbl-legal-toc-title { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bbl-muted-2); }
.bbl-legal-toc ol { margin: 0; padding-left: 28px; display: grid; gap: 2px; font-size: 15px; line-height: 1.4; }
.bbl-legal-toc li::marker { color: var(--bbl-muted-2); font-weight: 700; }
.bbl-legal-toc a { display: inline-flex; align-items: center; min-height: 36px; color: var(--bbl-navy); font-weight: 700; text-decoration: none; }
.bbl-legal-toc a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bbl-legal-body { max-width: 70ch; }
.bbl-legal-section { padding: 28px 0; border-top: 1px solid var(--bbl-line); scroll-margin-top: 16px; }
.bbl-legal-section:first-child { border-top: 0; padding-top: 0; }
.bbl-brand .bbl-legal-section h2 { font-size: clamp(22px, 17px + 1vw, 28px); max-width: none; margin-bottom: 12px; }
.bbl-legal-section p, .bbl-legal-section li { font-size: 17px; line-height: 1.7; color: var(--bbl-ink); }
.bbl-legal-section ul { margin: 0 0 1em; padding-left: 22px; }
.bbl-legal-section li { margin-bottom: 6px; }
.bbl-legal-note { margin: 14px 0 0; }
.bbl-legal-section .bbl-company { margin-top: 12px; }
@media (min-width: 1024px) {
.bbl-legal-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: 72px; align-items: start; }
.bbl-legal-toc { position: sticky; top: 24px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.bbl-legal-toc ol { font-size: 14.5px; }
}
/* ---------------------------------------------------------------- brand footer */
.bbl-brand .bbl-footer-brand { padding-block: 48px 32px; }
@media (min-width: 768px) { .bbl-brand .bbl-footer-brand { padding-block: 72px 40px; } }
.bbl-brand .bbl-footer-logo { height: 32px; }
.bbl-brand .bbl-footer-tagline { margin-top: 10px; font-family: var(--font-display); font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--bbl-navy); max-width: 22ch; }
.bbl-brand .bbl-footer-heading { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--bbl-muted-2); margin-bottom: 6px; }
.bbl-brand .bbl-footer-list a { font-size: 15.5px; font-weight: 700; color: var(--bbl-navy); }
/* Pass 2: spacing between bands of the same colour, the page hero without an image, the team
note on About, the contact card and the e-mail action of the legal pages. */
.bbl-brand .bbl-page-hero:not(.has-media) { padding-bottom: clamp(36px, 4vw, 64px); }
.bbl-brand .bbl-page-hero + .bbl-text { padding-top: 0; }
.bbl-about .bbl-team-block { background: #FFF; }
.bbl-legal-mail { margin: 4px 0 0; }
.bbl-legal-mail .btn-secondary { gap: 10px; }
@media (min-width: 900px) {
.bbl-contact-inner { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
.bbl-contact-inner > :not(.bbl-contact-mail):not(.bbl-company) { grid-column: 1; }
.bbl-contact-inner > .bbl-contact-mail { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
}
@media (min-width: 900px) {
/* A hero without a lede: the title takes the whole row. */
.bbl-page-hero-copy:not(:has(.bbl-page-lede)) h1 { grid-column: 1 / -1; max-width: 20ch; }
}
.bbl-brand .bbl-products.bbl-tone-cream { background: var(--bbl-cream); }