/** * Backed By The Bolt — front-end design system. * * One stylesheet for every public surface: the registration wizard, the * contractor dashboard, the certification exam, the homeowner locator, the * contractor profile and the archive. * * THE CASCADE ROOT * * Every rule in this file is scoped under `.bbtb-app`, the class carried by * the outermost element of every shortcode render and every template. That * is not decoration: it lifts the baseline weight of a component rule to * 0-2-0, which is what it takes to beat a page-builder theme's descendant * selectors, and it guarantees nothing here can leak onto the rest of the * site. A surface class that can sit on the root element itself gets both * forms — `.bbtb-app.bbtb-quiz` and `.bbtb-app .bbtb-quiz` — because the * same class appears at the root on one page and nested on another. * * Every selector also carries `:not(#bbtb-cascade)` — a never-matching id * inside a `:not()`, which changes nothing about what the rule selects but * lifts its weight above a theme rule written against `#ajax-content-wrap`. * Section 2 explains that, explains how the file deals with a theme that * reaches for `!important`, and carries the only allow-list of properties * permitted to use it. Section 19 carries the per-theme compatibility * layer. * * Every var() carries a literal fallback so the file also works if the head * block that prints the themeable properties never runs. * * THE LANGUAGE * * Read off backedbythebolt.com. The page is a stack of full-bleed horizontal * bands — dark, white, orange, light grey — each holding a centred 1140px * column with generous vertical air. Everything inside is flat: no rounded * cards, no decorative shadow, no gradients. Separation comes from a hairline * rule, a change of band colour, or whitespace. Headlines mix weights on one * line — a light sentence with the key phrase in bold. Small uppercase orange * eyebrows label a section. Buttons are small, square-cornered, uppercase and * widely letterspaced. * * MATERIAL, RENDERED FLAT * * The systematic half of Material is what makes this feel built rather than * drawn: a 4px spacing scale, a three-step elevation ramp reserved for things * that genuinely float, a state layer on every interactive element instead of * ad-hoc colour changes, filled text fields with a rule that thickens on * focus, standard easing and a 150/250/350ms duration scale. None of it * brings rounding, tint or lift to a static surface. * * COLOUR AND CONTRAST * * Brand orange is light (relative luminance .44). It carries near-black text * at any size and white text at none, so it is used for fills, rules, marks * and large display type only. Where the brand shows small orange text on * white — the eyebrow labels — this file substitutes the derived * `--bbtb-accent-dark`, which reads as the same deep orange and clears AA at * 5.1:1. On a dark band the pure accent is used directly: it clears AA at * 8.9:1 there. * * TYPE * * No webfont is loaded and none should be. Plugin containers inherit the * theme's font, which is what makes the plugin look like part of the site. * `--bbtb-font` names the brand stack once, for the two places that cannot * inherit: the lightbox (moved to by script) and the Google Maps * info window (rendered inside the map's own reset). * * Contents * 1. Tokens 11. Dashboard * 2. Defensive reset 12. Certification exam * 3. Typography 13. Locator * 4. Layout — shell & bands 14. Contractor profile * 5. Buttons 15. Archive & contractor cards * 6. Forms 16. Shortcode components * 7. Cards, chips, badges 17. Utilities & focus * 8. Notices & feedback 18. Motion & print * 9. Tables 19. Theme compatibility * 10. Wizard */ /* ===================================================================== * 1. TOKENS * * On :root so a lone badge, chip or count dropped into a widget resolves * them too. The six --bbtb-accent* / --bbtb-badge* properties are * overwritten in the document head by BBTB_Assets::print_custom_ * properties() when the site has chosen its own accent; the values here * are the brand defaults and the literal fallbacks used throughout. * ================================================================== */ :root, .bbtb-app:not(#bbtb-cascade) { /* Brand orange and its working derivatives. */ --bbtb-accent: #F99D25; --bbtb-accent-ink: #0E0E0E; --bbtb-accent-pressed: #E08A17; --bbtb-accent-tint: #FEEBD2; --bbtb-accent-dark: #9A6117; --bbtb-accent-soft: #FEEBD2; --bbtb-badge-accent: #F99D25; --bbtb-badge-ink: #0E0E0E; /* Neutrals. */ --bbtb-black: #000000; --bbtb-ink: #0E0E0E; --bbtb-charcoal: #252525; --bbtb-body: #5A5A5A; /* The lightest grey the palette may set type in. #9A9A9A was used here and reaches only 2.5:1 on the --bbtb-band grey the wizard rail, the checklist and the contact smallprint all sit on; #6E6E6E clears 4.5:1 on both that band and white. */ --bbtb-fine: #6E6E6E; --bbtb-band: #F2F2F2; --bbtb-fill: #F5F5F5; --bbtb-line: #E2E2E2; --bbtb-line-strong: #C9C9C9; --bbtb-surface: #FFFFFF; /* Semantic. Each pairs an AA-safe ink with a tint of itself. */ --bbtb-success: #1B7A43; --bbtb-success-bg: #E7F4EC; --bbtb-warning: #8A5A00; --bbtb-warning-bg: #FCF3E0; --bbtb-error: #B3261E; --bbtb-error-bg: #FBEAE9; --bbtb-info: #1F4E79; --bbtb-info-bg: #E9F0F7; /* Geometry. Square is the brand; 2px is as round as anything gets. */ --bbtb-radius: 2px; --bbtb-shell: 1140px; --bbtb-hairline: 1px; /* 4px spacing scale — the only spacing values used in this file. */ --bbtb-space-1: 4px; --bbtb-space-2: 8px; --bbtb-space-3: 12px; --bbtb-space-4: 16px; --bbtb-space-5: 24px; --bbtb-space-6: 32px; --bbtb-space-7: 48px; --bbtb-space-8: 64px; --bbtb-space-9: 96px; /* Vertical rhythm of a band; stepped up at each breakpoint. */ --bbtb-band-y: 48px; /* Elevation. Only for things that genuinely float. Never on a card. */ --bbtb-elev-1: 0 1px 2px rgba(0, 0, 0, .06); --bbtb-elev-2: 0 2px 8px rgba(0, 0, 0, .08); --bbtb-elev-3: 0 8px 24px rgba(0, 0, 0, .10); /* Motion — Material standard easing and duration scale. */ --bbtb-ease: cubic-bezier(.2, 0, 0, 1); --bbtb-dur-1: 150ms; --bbtb-dur-2: 250ms; --bbtb-dur-3: 350ms; /* State-layer opacities, applied to a per-component overlay colour. */ --bbtb-state-hover: .06; --bbtb-state-focus: .10; --bbtb-state-press: .14; /* Brand stack, for the two contexts that cannot inherit the theme. */ --bbtb-font: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ===================================================================== * 2. DEFENSIVE RESET * * `.bbtb-app` is the plugin's cascade root. Every shortcode render, every * template and the two nodes the scripts move out of their wrapper (the * gallery lightbox and the Google Maps info window) carry it, and every * rule in this file is scoped under it. That does two things: it keeps the * plugin's CSS off the rest of the page, and it lifts the baseline weight * of a component rule from 0-1-0 to 0-2-0, which is enough to beat the * descendant selectors a page-builder theme writes. * * Specificity alone is not enough. Salient — and every other heavyweight * ThemeForest theme — ships hundreds of `!important` declarations on bare * `ul`, `ol`, `li`, `a`, `label`, `p` and heading selectors. An * `!important` declaration can only be beaten by another `!important` * declaration, so this block, and only this block, is allowed to use one. * * --------------------------------------------------------------------- * THE SPECIFICITY FLOOR * * `!important` is settled first by importance, but among two `!important` * declarations the more specific selector still wins — and Salient writes * its rules against `#ajax-content-wrap`. An id outranks any number of * classes, so `.bbtb-app h2 { color: … !important }` (0-1-1) loses to * `#ajax-content-wrap h2 { color: … !important }` (1-0-1) outright. * * Every selector in this file therefore carries `:not(#bbtb-cascade)`. * No element ever has that id, so the `:not()` matches everything and * changes nothing about what a rule selects — but a `:not()` takes the * specificity of its argument, so each one adds a full id's worth of * weight. Component rules carry one, which puts them above a single-id * theme rule; the `!important` rules in this block carry two, which puts * them above a theme rule that stacks two ids as well. * * Because the boost is applied uniformly, the relative weight of every * pair of rules inside this stylesheet is exactly what it was before, and * source order still resolves ties — which is why BBTB_Assets makes this * file load after the theme's. * * --------------------------------------------------------------------- * THE !important ALLOW-LIST * * These properties, on these selectors, are the only `!important` * declarations in the file outside the print block. Each says what theme * behaviour it exists to undo. Nothing else in this stylesheet may use it: * harness check t20 fails the build if a `.bbtb-` rule outside this block * does. * * display [hidden] every panel in this plugin is closed * with the `hidden` attribute; a theme * layout rule would otherwise show it * box-sizing everything themes set content-box on controls, * cells and cleared floats * float, clear everything the plugin floats nothing; themes * float media and first-letters * list-style ul, ol, li Salient: `list-style: disc !important` * margin, padding ul, ol theme list indent and flow * content li::before, theme list counters — the source of * li::after the doubled "1. [1]" numbering * counter-reset ol, li theme list counters * counter-increment ol, li theme list counters * color a, label theme link and label colour — the * source of the orange answer text * text-decoration a theme link underline * color h1–h6, theme heading colour — the source of * legend the grey section headings * text-transform h1–h6 theme uppercases headings * letter-spacing h1–h6 theme heading tracking * line-height root, h1–h6, theme typographic scale * label * font-size root, label theme content font size * max-width img, svg, theme media rules * video, iframe * appearance, the plugin's a theme restores the native control * -webkit-appearance own check and from an id-prefixed selector and * background, radio strips the box in the same rule, so * border, controls the three properties that draw the * border-radius control are pinned with it * appearance, the plugin's a theme restores its whole field style * -webkit-appearance own text from an id-prefixed rule — fill, * background, fields, border, radius, padding, appearance * color, selects and and its own chevron, all !important — * border, textareas and habitually leaves `color` * border-radius, un-flagged. Fill and ink must * padding, therefore be pinned together, at one * font-size, specificity, or the pair can * line-height half-apply: see the block itself * * Where a plugin component legitimately needs a value other than the * reset's, it publishes that value as a custom property which the * `!important` declaration reads: * * --bbtb-list-style list marker, default none * --bbtb-list-flow list margin, default 0 * --bbtb-list-inset list padding, default 0 * --bbtb-link anchor colour, default inherit * --bbtb-link-decoration anchor decoration, default none * --bbtb-label-color label colour, default inherit * --bbtb-label-size label font-size, default inherit * --bbtb-label-leading label line-height, default inherit * --bbtb-heading-color heading colour, default inherit * --bbtb-heading-transform heading text-transform, default none * --bbtb-heading-tracking heading letter-spacing, default -.005em * --bbtb-heading-leading heading line-height, default 1.2 * --bbtb-check-fill check/radio background, default white * --bbtb-check-border check/radio border, default 2px solid body * --bbtb-check-radius check/radio corner, default the brand 2px * --bbtb-control-fill field background, default the surface fill * --bbtb-control-fill-hover field background under hover and focus * --bbtb-control-ink field text colour, default ink * --bbtb-control-rule field underline colour, default body * --bbtb-control-hint field placeholder colour, default body * --bbtb-control-layers background layers painted over the field fill — * the drawn select chevron — default none * --bbtb-control-border field border, default none * --bbtb-control-radius field corner, default the brand 2px on top * --bbtb-control-pad field padding * --bbtb-control-size field font-size, default 1rem * --bbtb-control-leading field line-height, default 1.4 * --bbtb-option-fill select popup row background, default surface * --bbtb-option-ink select popup row text, default ink * --bbtb-root-size root font-size, default 1rem * --bbtb-root-leading root line-height, default 1.6 * * Fill and ink are the pair that must never be separated. A component that * wants light text asks for a dark fill in the same declaration block, and * the reset applies both or neither. No component in this file sets * `background` or `color` on a control directly. * * A component rule therefore never has to fight the reset — it configures * it. That is what keeps `!important` confined to this block. * ================================================================== */ /* Panels open and close with the `hidden` attribute. */ .bbtb-app[hidden]:not(#bbtb-cascade):not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) [hidden] { display: none !important; } /* Geometry. The plugin floats nothing, anywhere. */ .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) *, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) *::before, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) *::after { box-sizing: border-box !important; clear: none !important; float: none !important; } /** * The root establishes type for everything inside it. Only the size and * the leading are pinned — never the face, because inheriting the theme's * font is what makes the plugin look like part of the site. * * `:not(.bbtb-app *)` keeps this to the outermost root, so a partial that * also carries `bbtb-app` (a notice, a badge, a result card) inherits the * page's scale instead of being reset back to 1rem inside it. */ .bbtb-app:not(.bbtb-app *):not(#bbtb-cascade):not(#bbtb-cascade) { font-size: var(--bbtb-root-size, 1rem) !important; line-height: var(--bbtb-root-leading, 1.6) !important; } .bbtb-app:not(#bbtb-cascade) { color: var(--bbtb-ink, #0E0E0E); font-family: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: start; } /* Lists. The marker, the indent and the flow all come back to us. */ .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) ul, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) ol { list-style: var(--bbtb-list-style, none) !important; margin: var(--bbtb-list-flow, 0) !important; padding: var(--bbtb-list-inset, 0) !important; } .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) li { counter-increment: none !important; counter-reset: none !important; list-style: var(--bbtb-list-style, none) !important; } .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) ol { counter-reset: none !important; } /* A nested list must not inherit its parent's flow overrides. */ .bbtb-app:not(#bbtb-cascade) ul ul, .bbtb-app:not(#bbtb-cascade) ul ol, .bbtb-app:not(#bbtb-cascade) ol ul, .bbtb-app:not(#bbtb-cascade) ol ol { --bbtb-list-flow: 0; --bbtb-list-inset: 0; } /** * Generated list markers. This is what draws the theme's "1." over our own * numbered boxes. No plugin component hangs a pseudo-element off a list * item — the exam's answer rows put theirs on the label inside — so this * can be absolute. */ .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) li::before, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) li::after { content: none !important; } .bbtb-app:not(#bbtb-cascade) ::marker { content: ""; } /* Links. Colour and decoration both come from the component, or inherit. */ .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) a { color: var(--bbtb-link, inherit) !important; text-decoration: var(--bbtb-link-decoration, none) !important; } /** * Labels. The exam's answer text is a label and must read as ink; the * floating labels on the locator and the registration wizard are absolutely * positioned chips whose whole layout depends on their own type size, and a * theme that pins `font-size: 14px !important; line-height: 26px !important` * on every label drops them straight through the field they belong to. */ .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) label { color: var(--bbtb-label-color, inherit) !important; font-size: var(--bbtb-label-size, inherit) !important; line-height: var(--bbtb-label-leading, inherit) !important; } /* Headings. Colour, case, tracking and leading are ours; size and weight are not under attack often enough to be worth pinning. The colour default is `inherit`, so a heading inside a dark band still takes the band's colour without needing a rule of its own. */ .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) h1, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) h2, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) h3, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) h4, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) h5, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) h6, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) legend { color: var(--bbtb-heading-color, inherit) !important; letter-spacing: var(--bbtb-heading-tracking, -.005em) !important; line-height: var(--bbtb-heading-leading, 1.2) !important; text-transform: var(--bbtb-heading-transform, none) !important; } /** * The controls the plugin draws itself. * * Themes and page builders restore the native checkbox and radio from an * id-prefixed selector such as `#ajax-content-wrap input[type="radio"]`, and * often strip its box with `border: 0; background: none` in the same rule. * `appearance` and the two properties that draw the box therefore have to be * pinned here. * * Only the plugin's own control classes are named, so a native control the * plugin does not style keeps whatever the theme gives it. State rules * (`:checked`, the radio's round corner) publish --bbtb-check-* rather than * restating background or border, so they still win. */ .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-quiz__answer-input, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-check__input, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-checkgrid__input, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-field--check input[type="checkbox"], .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-field--check input[type="radio"], .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-locator__toggle input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; background: var(--bbtb-check-fill, #FFFFFF) !important; border: var(--bbtb-check-border, 2px solid var(--bbtb-body, #5A5A5A)) !important; border-radius: var(--bbtb-check-radius, var(--bbtb-radius, 2px)) !important; } /** * The text fields, selects and textareas the plugin draws itself. * * This is the other half of the same problem, and the one that shipped * broken. A heavyweight theme restores its whole field style from an * id-prefixed rule — `#ajax-content-wrap select { background-color: #fff * !important; padding: 10px 12px !important; … }` — and leaves `color` * un-flagged, because the theme's text colour is only ever a fallback for * content it does not own. * * A component rule written as * * .bbtb-locator__hero .bbtb-locator__select { * background-color: rgba(255, 255, 255, .08); * color: #FFFFFF; * } * * therefore half-applies against such a theme: the theme wins the fill on * importance, the plugin wins the ink on specificity, and the control is * white text on a white box. Nothing is wrong with either stylesheet on its * own; the defect exists only in the cascade, which is why nothing caught it. * * Fill and ink are pinned together here, in one rule, at one specificity, so * they can only ever apply as a pair. No component rule in this file sets * `background` or `color` on a field — it publishes --bbtb-control-fill and * --bbtb-control-ink, and the two change together or not at all. * * The drawn select chevron rides in the same `background` shorthand as the * fill, as --bbtb-control-layers. A shorthand carrying only a colour would * reset background-size and background-position and blow the chevron up to * the full height of the control — a mistake this stylesheet has made once * already — so the two cannot be separated either. * * The underline is a `box-shadow`, not a `border-bottom`: `border` has to be * pinned as a shorthand to beat the theme's own field border, and a shorthand * cannot say "no border except along the bottom". * * Checkboxes, radios, file and hidden inputs are excluded — the rule above * draws the first two, and the rest keep chrome the plugin does not style. */ .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-field select, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-field textarea, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-field__input, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-field__select, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-field__textarea, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-locator__input, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-locator__select { -webkit-appearance: none !important; appearance: none !important; background: var(--bbtb-control-layers, ) var(--bbtb-control-fill, var(--bbtb-fill, #F5F5F5)) !important; border: var(--bbtb-control-border, 0) !important; border-radius: var(--bbtb-control-radius, var(--bbtb-radius, 2px) var(--bbtb-radius, 2px) 0 0) !important; color: var(--bbtb-control-ink, var(--bbtb-ink, #0E0E0E)) !important; font-size: var(--bbtb-control-size, 1rem) !important; line-height: var(--bbtb-control-leading, 1.4) !important; padding: var(--bbtb-control-pad, var(--bbtb-space-5, 24px) var(--bbtb-space-3, 12px) var(--bbtb-space-2, 8px)) !important; } /** * The popup list is drawn by the OS on its own ground, not on the control's, * so it needs its own pair — and it needs one on every select the plugin * renders, not only the ones on a dark band. A theme that paints `option` in * its own body colour is otherwise free to put grey text on a grey list. */ .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-field select option, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-field__select option, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) .bbtb-locator__select option { background: var(--bbtb-option-fill, var(--bbtb-surface, #FFFFFF)) !important; color: var(--bbtb-option-ink, var(--bbtb-ink, #0E0E0E)) !important; } /* Media never overflows its column. `height` stays free so a badge mark or a logo can keep the size its own rule gives it. */ .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) img, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) svg, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) video, .bbtb-app:not(#bbtb-cascade):not(#bbtb-cascade) iframe { max-width: 100% !important; } .bbtb-app:not(#bbtb-cascade) img { height: auto; } /* Non-important baselines the components then build on. Paragraph flow is deliberately left alone: components set their own margins and a bio in .bbtb-profile__prose should keep the page's rhythm. */ .bbtb-app:not(#bbtb-cascade) fieldset { border: 0; margin: 0; min-width: 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) button, .bbtb-app:not(#bbtb-cascade) input, .bbtb-app:not(#bbtb-cascade) select, .bbtb-app:not(#bbtb-cascade) textarea { font-family: inherit; } .bbtb-app:not(#bbtb-cascade) table { border-collapse: collapse; width: 100%; } /* ===================================================================== * 3. TYPOGRAPHY * * The signature move is the mixed-weight headline: a light sentence with * the key phrase in bold, on one line. Base headings therefore sit at 400 * (300 for display sizes) and `strong` / `.bbtb-em` inside them jumps to * 700. Body copy is small, grey and generously leaded — the page is not * text-heavy. * ================================================================== */ /** * Every heading inside the plugin, not an enumerated list of surfaces: the * cascade root already keeps this off the rest of the page. The three * `--bbtb-heading-*` properties are what the defensive reset reads, so a * heading rule sets them rather than fighting an !important declaration. */ .bbtb-app:not(#bbtb-cascade) h1, .bbtb-app:not(#bbtb-cascade) h2, .bbtb-app:not(#bbtb-cascade) h3, .bbtb-app:not(#bbtb-cascade) h4, .bbtb-app:not(#bbtb-cascade) h5, .bbtb-app:not(#bbtb-cascade) h6, .bbtb-app:not(#bbtb-cascade) .bbtb-section__title, .bbtb-app:not(#bbtb-cascade) .bbtb-headline { font-family: inherit; font-weight: 400; letter-spacing: -.005em; line-height: 1.2; text-wrap: balance; --bbtb-heading-tracking: -.005em; --bbtb-heading-leading: 1.2; } /* The emphasis half of a mixed-weight headline. */ .bbtb-app:not(#bbtb-cascade) h1 strong, .bbtb-app:not(#bbtb-cascade) h2 strong, .bbtb-app:not(#bbtb-cascade) h3 strong, .bbtb-app:not(#bbtb-cascade) h4 strong, .bbtb-app:not(#bbtb-cascade) h5 strong, .bbtb-app:not(#bbtb-cascade) h6 strong, .bbtb-app:not(#bbtb-cascade) .bbtb-headline strong, .bbtb-app:not(#bbtb-cascade) .bbtb-em { font-weight: 700; } /* --- Display type: the hero voice ------------------------------------ */ .bbtb-app:not(#bbtb-cascade) .bbtb-display { display: block; font-size: clamp(1.75rem, 6cqi, 3.25rem); font-weight: 300; letter-spacing: .1em; line-height: 1.08; margin: 0; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-display strong, .bbtb-app:not(#bbtb-cascade) .bbtb-display .bbtb-em { font-weight: 700; letter-spacing: .06em; } .bbtb-app:not(#bbtb-cascade) .bbtb-display--sub { font-size: clamp(.75rem, 2.6cqi, 1.0625rem); font-weight: 300; letter-spacing: .34em; margin-top: var(--bbtb-space-3, 12px); text-transform: uppercase; } /* --- Eyebrow labels -------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-eyebrow { color: var(--bbtb-accent-dark, #9A6117); display: block; font-size: .75rem; font-weight: 600; letter-spacing: .18em; line-height: 1.4; margin: 0 0 var(--bbtb-space-3, 12px); text-transform: uppercase; } /* The variant with a short orange tick bar to its left. */ .bbtb-app:not(#bbtb-cascade) .bbtb-eyebrow--tick { color: var(--bbtb-ink, #0E0E0E); padding-left: var(--bbtb-space-3, 12px); position: relative; } .bbtb-app:not(#bbtb-cascade) .bbtb-eyebrow--tick::before { background: var(--bbtb-accent, #F99D25); content: ""; height: 1.15em; left: 0; position: absolute; top: .05em; width: 4px; } /* On a dark or orange band the pure accent / near-black is legible. */ .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-eyebrow, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero .bbtb-eyebrow, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__hero .bbtb-eyebrow, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__bar .bbtb-eyebrow { color: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--accent .bbtb-eyebrow { color: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-eyebrow--tick { color: #FFFFFF; } /* --- Section titles -------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-section__title { font-size: clamp(1.25rem, 3.2cqi, 1.75rem); margin: 0 0 var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-section__title--small { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; margin-bottom: var(--bbtb-space-4, 16px); text-transform: uppercase; --bbtb-heading-transform: uppercase; --bbtb-heading-tracking: .14em; } /* A centred band heading with its rule of air beneath. */ .bbtb-app:not(#bbtb-cascade) .bbtb-band__title { font-size: clamp(1.5rem, 4cqi, 2.375rem); margin: 0 0 var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-band__lead { color: var(--bbtb-body, #5A5A5A); font-size: .9375rem; line-height: 1.75; margin: 0 auto; max-width: 46rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-band--center { text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-band__lead, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero .bbtb-band__lead { color: rgba(255, 255, 255, .78); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--accent .bbtb-band__lead { color: rgba(14, 14, 14, .82); } /* --- Body copy ------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) p { line-height: 1.7; } .bbtb-app:not(#bbtb-cascade) .bbtb-muted, .bbtb-app:not(#bbtb-cascade) .bbtb-card__meta, .bbtb-app:not(#bbtb-cascade) .bbtb-form__subtitle, .bbtb-app:not(#bbtb-cascade) .bbtb-form__intro, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__lede, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__subtitle, .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__subtitle, .bbtb-app:not(#bbtb-cascade) .bbtb-contact__intro { color: var(--bbtb-body, #5A5A5A); --bbtb-heading-color: var(--bbtb-body, #5A5A5A); } /* Fine print: the palette's lightest grey, used only where the text is incidental rather than something a reader has to work through. */ .bbtb-app:not(#bbtb-cascade) .bbtb-fineprint, .bbtb-app:not(#bbtb-cascade) .bbtb-contact__smallprint, .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__counter, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__caption { color: var(--bbtb-fine, #6E6E6E); font-size: .75rem; line-height: 1.6; } .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-fineprint, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero .bbtb-fineprint { color: rgba(255, 255, 255, .6); } /* --- Links ----------------------------------------------------------- */ /** * Link colour and decoration are published as `--bbtb-link` and * `--bbtb-link-decoration`, which the defensive reset's !important * declarations on `a` read. Setting the custom property rather than * `color` is what lets a component out-rank a theme's `!important` link * rule without any !important of its own. * * The `:where()` wrappers are kept so these rules still weigh 0-1-1 — * the weight of `.bbtb-app a`. Without them `.bbtb-app .bbtb-profile a` * (0-2-1) would out-specify `.bbtb-app .bbtb-btn` (0-2-0) and every * anchor styled as a button would take link colour again. */ .bbtb-app:not(#bbtb-cascade) :where(.bbtb-profile, .bbtb-card, .bbtb-archive, .bbtb-locator, .bbtb-dashboard, .bbtb-quiz, .bbtb-band, .bbtb-registration) a, .bbtb-app:where(.bbtb-profile, .bbtb-card, .bbtb-archive, .bbtb-locator, .bbtb-dashboard, .bbtb-quiz, .bbtb-band, .bbtb-registration):not(#bbtb-cascade) a, .bbtb-app:not(#bbtb-cascade) a:where(.bbtb-profile__link, .bbtb-login__link) { text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); --bbtb-link: var(--bbtb-accent-dark, #9A6117); --bbtb-link-decoration: underline; } .bbtb-app:not(#bbtb-cascade) :where(.bbtb-profile, .bbtb-card, .bbtb-archive, .bbtb-locator, .bbtb-dashboard, .bbtb-band) a:hover, .bbtb-app:where(.bbtb-profile, .bbtb-card, .bbtb-archive, .bbtb-locator, .bbtb-dashboard, .bbtb-band):not(#bbtb-cascade) a:hover { --bbtb-link: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) :where(.bbtb-band--dark, .bbtb-profile__hero, .bbtb-archive__hero, .bbtb-quiz__bar, .bbtb-quiz__hero, .bbtb-quiz__appbar, .bbtb-registration__hero) a { --bbtb-link: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) :where(.bbtb-band--dark, .bbtb-profile__hero, .bbtb-archive__hero, .bbtb-registration__hero) a:hover { --bbtb-link: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) :where(.bbtb-band--accent) a { --bbtb-link: var(--bbtb-ink, #0E0E0E); } /** * Links that carry a button, chip, badge or card never take link chrome. * These weigh 0-2-0 or more, so they beat the 0-1-1 rules above on the * same element. */ .bbtb-app:not(#bbtb-cascade) .bbtb-btn, .bbtb-app:not(#bbtb-cascade) a.bbtb-btn, .bbtb-app:not(#bbtb-cascade) .bbtb-chip a, .bbtb-app.bbtb-badge:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-badge, a.bbtb-app.bbtb-badge:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) a.bbtb-badge, .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__title a, .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__link, .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tab, .bbtb-app:not(#bbtb-cascade) a.bbtb-dashboard__tab, .bbtb-app:not(#bbtb-cascade) .bbtb-pagination a { text-decoration: none; --bbtb-link-decoration: none; } /** * And the colour, which the reset would otherwise leave inheriting. Each * button variant publishes its own ink as --bbtb-btn-ink, so one rule * holds for every variant and every state. */ .bbtb-app:not(#bbtb-cascade) a.bbtb-btn, .bbtb-app:not(#bbtb-cascade) a.bbtb-btn:hover, .bbtb-app:not(#bbtb-cascade) a.bbtb-btn:focus, .bbtb-app:not(#bbtb-cascade) a.bbtb-btn:visited { color: var(--bbtb-btn-ink, var(--bbtb-ink, #0E0E0E)); --bbtb-link: var(--bbtb-btn-ink, var(--bbtb-ink, #0E0E0E)); --bbtb-label-color: var(--bbtb-btn-ink, var(--bbtb-ink, #0E0E0E)); } .bbtb-app:not(#bbtb-cascade) a.bbtb-dashboard__tab, .bbtb-app:not(#bbtb-cascade) a.bbtb-dashboard__tab:hover { color: var(--bbtb-body, #5A5A5A); --bbtb-link: var(--bbtb-body, #5A5A5A); } .bbtb-app:not(#bbtb-cascade) a.bbtb-dashboard__tab.is-active, .bbtb-app:not(#bbtb-cascade) a.bbtb-dashboard__tab.is-active:hover, .bbtb-app:not(#bbtb-cascade) a.bbtb-dashboard__tab[aria-selected="true"] { color: var(--bbtb-ink, #0E0E0E); --bbtb-link: var(--bbtb-ink, #0E0E0E); } /* --- Prose blocks ---------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-profile__prose { color: var(--bbtb-body, #5A5A5A); font-size: 1rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__prose > :first-child { margin-top: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__prose > :last-child { margin-bottom: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__prose strong { color: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-code { background: var(--bbtb-fill, #F5F5F5); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; letter-spacing: .04em; padding: var(--bbtb-space-1, 4px) var(--bbtb-space-2, 8px); } @media (min-width: 900px) { .bbtb-app:not(#bbtb-cascade) .bbtb-profile__prose { font-size: 1.0625rem; } } /* ===================================================================== * 4. LAYOUT — SHELL & BANDS * * The page is a stack of full-bleed horizontal bands that alternate * dark / white / orange / grey. Each holds one centred column. * ================================================================== */ .bbtb-app:not(#bbtb-cascade) .bbtb-shell { box-sizing: border-box; margin-inline: auto; max-width: var(--bbtb-shell, 1140px); padding-inline: var(--bbtb-space-4, 16px); width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-shell--narrow { max-width: 780px; } .bbtb-app:not(#bbtb-cascade) .bbtb-shell--tight { max-width: 620px; } .bbtb-app:not(#bbtb-cascade) .bbtb-band { padding-block: var(--bbtb-band-y, 48px); position: relative; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-band--light { background: var(--bbtb-surface, #FFFFFF); color: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--gray { background: var(--bbtb-band, #F2F2F2); color: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--accent { background: var(--bbtb-accent, #F99D25); color: var(--bbtb-accent-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark { background: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) .bbtb-band--black { background: var(--bbtb-black, #000000); color: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) .bbtb-band--charcoal { background: var(--bbtb-charcoal, #252525); color: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark h1, .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark h2, .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark h3, .bbtb-app:not(#bbtb-cascade) .bbtb-band--black h1, .bbtb-app:not(#bbtb-cascade) .bbtb-band--black h2, .bbtb-app:not(#bbtb-cascade) .bbtb-band--charcoal h2 { color: #FFFFFF; --bbtb-heading-color: #FFFFFF; } /* Tight and flush variants, for bands that butt against each other. */ .bbtb-app:not(#bbtb-cascade) .bbtb-band--tight { padding-block: var(--bbtb-space-6, 32px); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--flush { padding-block: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-band + .bbtb-band { margin-top: 0; } /** * Bands inside a shortcode span whatever column the theme gives them, * which on the plugin's own full-width pages is the content column. * * There is deliberately no viewport-bleed modifier here. The usual trick — * `margin-inline: calc(50% - 50vw)` — measures 100vw, which on desktop * browsers with a classic scrollbar is wider than the visible page. The * band then overhangs by half a scrollbar on each side and the document * scrolls sideways, which this design must never do. A theme that wants * true edge-to-edge bands can give the page a full-width template; the * band fills it either way. * * `--edge` is the safe half-measure: it cancels the shell's own gutter so * a band's colour reaches the edge of the column rather than stopping * short of it. It can never exceed the column. */ .bbtb-app:not(#bbtb-cascade) .bbtb-band--edge { margin-inline: calc(var(--bbtb-space-4, 16px) * -1); padding-inline: var(--bbtb-space-4, 16px); } /* A hairline rule between two same-coloured bands. */ .bbtb-app:not(#bbtb-cascade) .bbtb-band--ruled { border-top: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); } /* --- The surface container ------------------------------------------- */ /** * Every multi-column layout in this file asks its container how wide it is, * not the window. * * A plugin surface is a shortcode inside somebody else's page. On a 1440px * screen the theme's column may be 700px, and a `@media (min-width: 900px)` * rule cheerfully lays out two columns in it — which is how the locator's * search row came to print "Use my location" through its own ZIP label, and * how the profile's contact form came to show fields labelled "EMAIL ADD…". * * `bbtb-surface` is declared on each surface root and on `.bbtb-shell`, the * plugin's own centred column, so the nearest one is always the box the * layout actually has to fit. `bbtb-form` is declared separately because a * form inside a sidebar has far less room than the surface around it. * * A browser with no container query support gets the single-column layout * every one of these blocks builds up from, which is the mobile design and * is complete on its own. */ .bbtb-app.bbtb-profile:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-profile, .bbtb-app.bbtb-dashboard:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard, .bbtb-app.bbtb-registration:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-registration, .bbtb-app.bbtb-shell:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-shell { container-name: bbtb-surface; container-type: inline-size; } .bbtb-app.bbtb-form:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-form { container-name: bbtb-form; container-type: inline-size; } /* --- Grids ----------------------------------------------------------- */ .bbtb-app.bbtb-grid:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-grid { display: grid; gap: var(--bbtb-space-5, 24px); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; } @container bbtb-surface (min-width: 34rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-grid--2, .bbtb-app:not(#bbtb-cascade) .bbtb-grid--3, .bbtb-app:not(#bbtb-cascade) .bbtb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container bbtb-surface (min-width: 52rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-grid--3, .bbtb-app:not(#bbtb-cascade) .bbtb-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bbtb-app.bbtb-grid:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-grid { gap: var(--bbtb-space-6, 32px); } } @container bbtb-surface (min-width: 70rem) { } .bbtb-app:not(#bbtb-cascade) .bbtb-stack > * + * { margin-top: var(--bbtb-space-5, 24px); } /* A thin orange accent mark — the brand's punctuation. */ .bbtb-app:not(#bbtb-cascade) .bbtb-rule { background: var(--bbtb-accent, #F99D25); border: 0; display: block; height: 4px; margin: var(--bbtb-space-5, 24px) 0; width: 48px; } .bbtb-app:not(#bbtb-cascade) .bbtb-rule--center { margin-inline: auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-rule--hair { background: var(--bbtb-line, #E2E2E2); height: 1px; margin-block: var(--bbtb-space-6, 32px); width: 100%; } @media (min-width: 600px) { :root, .bbtb-app:not(#bbtb-cascade) { --bbtb-band-y: 64px; } .bbtb-app:not(#bbtb-cascade) .bbtb-shell { padding-inline: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--edge { margin-inline: calc(var(--bbtb-space-5, 24px) * -1); padding-inline: var(--bbtb-space-5, 24px); } } @media (min-width: 900px) { :root, .bbtb-app:not(#bbtb-cascade) { --bbtb-band-y: 96px; } } @media (min-width: 1200px) { :root, .bbtb-app:not(#bbtb-cascade) { --bbtb-band-y: 120px; } .bbtb-app:not(#bbtb-cascade) .bbtb-shell { padding-inline: var(--bbtb-space-6, 32px); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--edge { margin-inline: calc(var(--bbtb-space-6, 32px) * -1); padding-inline: var(--bbtb-space-6, 32px); } } /* ===================================================================== * 5. BUTTONS * * Small, rectangular, uppercase, widely letterspaced, generously padded * sideways. Orange with near-black text on a light surface; white with * near-black text on an orange or dark one. 48px minimum tap target. * * Every button carries a state layer: a single overlay element whose * colour is set per variant and whose opacity — not colour — changes on * hover, focus and press. No variant redefines its own hover colour. * ================================================================== */ .bbtb-app:not(#bbtb-cascade) .bbtb-btn { -webkit-appearance: none; appearance: none; align-items: center; background: transparent; border: 2px solid transparent; border-radius: var(--bbtb-radius, 2px); color: var(--bbtb-btn-ink, #0E0E0E); cursor: pointer; display: inline-flex; font-family: inherit; font-size: .8125rem; font-weight: 600; gap: var(--bbtb-space-2, 8px); justify-content: center; letter-spacing: .1em; line-height: 1.2; isolation: isolate; min-height: 48px; overflow: hidden; padding: var(--bbtb-space-3, 12px) var(--bbtb-space-6, 32px); position: relative; text-align: center; text-transform: uppercase; transition: background-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), border-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); --bbtb-state: #0E0E0E; --bbtb-btn-ink: var(--bbtb-ink, #0E0E0E); --bbtb-label-size: .8125rem; --bbtb-label-leading: 1.2; --bbtb-label-color: var(--bbtb-btn-ink, #0E0E0E); } /** * The state layer. `isolation: isolate` gives the button its own stacking * context, so a z-index of -1 puts the overlay above the fill and below * the label — no wrapper element and no tinted text. */ .bbtb-app:not(#bbtb-cascade) .bbtb-btn::after { background: var(--bbtb-state, #0E0E0E); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); z-index: -1; } .bbtb-app:not(#bbtb-cascade) .bbtb-btn:hover::after { opacity: var(--bbtb-state-hover, .06); } .bbtb-app:not(#bbtb-cascade) .bbtb-btn:focus-visible::after { opacity: var(--bbtb-state-focus, .10); } .bbtb-app:not(#bbtb-cascade) .bbtb-btn:active::after { opacity: var(--bbtb-state-press, .14); } .bbtb-app:not(#bbtb-cascade) .bbtb-btn--primary { background: var(--bbtb-accent, #F99D25); border-color: var(--bbtb-accent, #F99D25); color: var(--bbtb-btn-ink, #0E0E0E); --bbtb-state: #0E0E0E; --bbtb-btn-ink: var(--bbtb-accent-ink, #0E0E0E); --bbtb-label-color: var(--bbtb-btn-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-btn--secondary { background: var(--bbtb-ink, #0E0E0E); border-color: var(--bbtb-ink, #0E0E0E); color: var(--bbtb-btn-ink, #FFFFFF); --bbtb-state: #FFFFFF; --bbtb-btn-ink: #FFFFFF; --bbtb-label-color: var(--bbtb-btn-ink, #FFFFFF); } .bbtb-app:not(#bbtb-cascade) .bbtb-btn--ghost { background: transparent; border-color: var(--bbtb-line-strong, #C9C9C9); color: var(--bbtb-btn-ink, #0E0E0E); --bbtb-state: #0E0E0E; --bbtb-btn-ink: var(--bbtb-ink, #0E0E0E); --bbtb-label-color: var(--bbtb-btn-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-btn--ghost:hover, .bbtb-app:not(#bbtb-cascade) .bbtb-btn--ghost:focus-visible { border-color: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-btn--danger { background: var(--bbtb-error, #B3261E); border-color: var(--bbtb-error, #B3261E); color: var(--bbtb-btn-ink, #FFFFFF); --bbtb-state: #FFFFFF; --bbtb-btn-ink: #FFFFFF; --bbtb-label-color: var(--bbtb-btn-ink, #FFFFFF); } .bbtb-app:not(#bbtb-cascade) .bbtb-btn--block { display: flex; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-btn--icon { gap: 0; min-width: 48px; padding-inline: var(--bbtb-space-3, 12px); } .bbtb-app:not(#bbtb-cascade) .bbtb-btn--small { font-size: .6875rem; min-height: 40px; padding: var(--bbtb-space-2, 8px) var(--bbtb-space-4, 16px); --bbtb-label-size: .6875rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-btn[disabled], .bbtb-app:not(#bbtb-cascade) .bbtb-btn[aria-disabled="true"], .bbtb-app:not(#bbtb-cascade) .bbtb-btn.is-busy { cursor: not-allowed; opacity: .5; } .bbtb-app:not(#bbtb-cascade) .bbtb-btn[disabled]::after, .bbtb-app:not(#bbtb-cascade) .bbtb-btn.is-busy::after { opacity: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-btn__label { display: inline-block; } /* Toggle group inside the locator bar. */ .bbtb-app:not(#bbtb-cascade) .bbtb-btn.is-active { background: var(--bbtb-ink, #0E0E0E); border-color: var(--bbtb-ink, #0E0E0E); color: var(--bbtb-btn-ink, #FFFFFF); --bbtb-state: #FFFFFF; --bbtb-btn-ink: #FFFFFF; --bbtb-label-color: var(--bbtb-btn-ink, #FFFFFF); } /** * On an orange or dark band the hierarchy inverts: the primary action is * a white block with near-black text, exactly as on the homepage. */ .bbtb-app:not(#bbtb-cascade) .bbtb-band--accent .bbtb-btn--primary, .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-btn--primary, .bbtb-app:not(#bbtb-cascade) .bbtb-band--black .bbtb-btn--primary, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero .bbtb-btn--primary, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__hero .bbtb-btn--primary, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__bar .bbtb-btn--primary { background: #FFFFFF; border-color: #FFFFFF; color: var(--bbtb-btn-ink, #0E0E0E); --bbtb-state: #0E0E0E; --bbtb-btn-ink: var(--bbtb-ink, #0E0E0E); --bbtb-label-color: var(--bbtb-btn-ink, #0E0E0E); } /* * Secondary takes a translucent fill rather than another outline. On the * profile hero three actions sit side by side (call / request an estimate / * visit website); with secondary and ghost both outlined they read as the * same weight and the hierarchy collapses. Filled-white, filled-tint, outline * gives three distinguishable tiers. */ .bbtb-app:not(#bbtb-cascade) .bbtb-band--accent .bbtb-btn--secondary, .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-btn--secondary, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero .bbtb-btn--secondary, .bbtb-app:not(#bbtb-cascade) .bbtb-registration__hero .bbtb-btn--secondary, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__hero .bbtb-btn--secondary { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .85); color: var(--bbtb-btn-ink, #FFFFFF); --bbtb-state: #FFFFFF; --bbtb-btn-ink: #FFFFFF; --bbtb-label-color: var(--bbtb-btn-ink, #FFFFFF); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--accent .bbtb-btn--secondary { background: rgba(14, 14, 14, .12); border-color: rgba(14, 14, 14, .55); color: var(--bbtb-btn-ink, #0E0E0E); --bbtb-state: #0E0E0E; --bbtb-btn-ink: var(--bbtb-ink, #0E0E0E); --bbtb-label-color: var(--bbtb-btn-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-btn--ghost, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero .bbtb-btn--ghost, .bbtb-app:not(#bbtb-cascade) .bbtb-registration__hero .bbtb-btn--ghost, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__hero .bbtb-btn--ghost, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__bar .bbtb-btn--ghost { border-color: rgba(255, 255, 255, .45); color: var(--bbtb-btn-ink, #FFFFFF); --bbtb-state: #FFFFFF; --bbtb-btn-ink: #FFFFFF; --bbtb-label-color: var(--bbtb-btn-ink, #FFFFFF); } .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-btn--ghost:hover, .bbtb-app:not(#bbtb-cascade) .bbtb-registration__hero .bbtb-btn--ghost:hover, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero .bbtb-btn--ghost:hover { border-color: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) .bbtb-band--accent .bbtb-btn--ghost { border-color: rgba(14, 14, 14, .4); color: var(--bbtb-btn-ink, #0E0E0E); --bbtb-state: #0E0E0E; --bbtb-btn-ink: var(--bbtb-ink, #0E0E0E); --bbtb-label-color: var(--bbtb-btn-ink, #0E0E0E); } /* Action rows. */ .bbtb-app:not(#bbtb-cascade) .bbtb-form__actions, .bbtb-app:not(#bbtb-cascade) .bbtb-card__actions, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__actions, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__actions, .bbtb-app:not(#bbtb-cascade) .bbtb-overview__actions, .bbtb-app:not(#bbtb-cascade) .bbtb-login__links, .bbtb-app:not(#bbtb-cascade) .bbtb-certification__actions, .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__actions, .bbtb-app:not(#bbtb-cascade) .bbtb-media__actions, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__controls { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bbtb-space-3, 12px); margin: var(--bbtb-space-5, 24px) 0 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-card__actions:first-child, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__actions:first-child { margin-top: 0; } /* ===================================================================== * 6. FORMS * * Material's filled text field, rendered square: a #F5F5F5 fill, a 1px * bottom rule that thickens to 2px orange on focus, a small permanent * label, persistent helper text and an error state with a red rule, red * helper text and an inline icon. 48px minimum height throughout. * * The label sits at the top of the fill and the control is padded to clear * it — Material's "populated" state, held permanently. It can collide with * neither the value nor the placeholder, both of which are drawn in the row * below it. * * The label deliberately does NOT drop into an empty field. That variant * was tried and removed: the dropped label lands on exactly the row the * placeholder draws in, so every field carrying one — the website box, the * review links, all six social profiles on the wizard and the dashboard, * the archive's ZIP search — rendered its label and its placeholder * overprinted on each other, "Facebook" and "https://" as one illegible * smear. Two fields side by side in the same row also disagreed about * where their labels were, because one had a placeholder and one did not. * A permanently raised label costs one piece of animation and is right in * every state. * ================================================================== */ .bbtb-app:not(#bbtb-cascade) .bbtb-form__row { display: grid; gap: var(--bbtb-space-5, 24px); grid-template-columns: 1fr; margin: 0 0 var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-form__grid { display: grid; gap: var(--bbtb-space-5, 24px); grid-template-columns: 1fr; } .bbtb-app:not(#bbtb-cascade) .bbtb-field { display: block; margin: 0 0 var(--bbtb-space-5, 24px); position: relative; } .bbtb-app:not(#bbtb-cascade) .bbtb-field:last-child { margin-bottom: 0; } /* A row already supplies the gap; the fields inside it must not double it. */ .bbtb-app:not(#bbtb-cascade) .bbtb-form__row > .bbtb-field, .bbtb-app:not(#bbtb-cascade) .bbtb-form__grid > .bbtb-field, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__search .bbtb-field, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__search .bbtb-field { margin-bottom: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-field--action { align-self: end; } /* --- The control ----------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-field input[type="text"], .bbtb-app:not(#bbtb-cascade) .bbtb-field input[type="email"], .bbtb-app:not(#bbtb-cascade) .bbtb-field input[type="tel"], .bbtb-app:not(#bbtb-cascade) .bbtb-field input[type="url"], .bbtb-app:not(#bbtb-cascade) .bbtb-field input[type="number"], .bbtb-app:not(#bbtb-cascade) .bbtb-field input[type="password"], .bbtb-app:not(#bbtb-cascade) .bbtb-field input[type="search"], .bbtb-app:not(#bbtb-cascade) .bbtb-field input[type="date"], .bbtb-app:not(#bbtb-cascade) .bbtb-field select, .bbtb-app:not(#bbtb-cascade) .bbtb-field textarea, .bbtb-app:not(#bbtb-cascade) .bbtb-field__input, .bbtb-app:not(#bbtb-cascade) .bbtb-field__select, .bbtb-app:not(#bbtb-cascade) .bbtb-field__textarea, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__input, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__select { display: block; font: inherit; min-height: 48px; box-shadow: inset 0 -1px 0 0 var(--bbtb-control-rule, var(--bbtb-body, #5A5A5A)); transition: background-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), box-shadow var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); width: 100%; --bbtb-control-fill: var(--bbtb-fill, #F5F5F5); --bbtb-control-ink: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-field textarea, .bbtb-app:not(#bbtb-cascade) .bbtb-field__textarea { min-height: 9rem; resize: vertical; --bbtb-control-leading: 1.65; } /** * Hover is a state layer on the fill, not a border colour change. * * The fill is published as --bbtb-control-fill, never set as `background` or * `background-color`: the reset pins the whole `background` shorthand, so a * state rule that reached for the property directly would lose outright — and * a shorthand that named only a colour would take the drawn chevron with it. */ .bbtb-app:not(#bbtb-cascade) .bbtb-field input:hover, .bbtb-app:not(#bbtb-cascade) .bbtb-field select:hover, .bbtb-app:not(#bbtb-cascade) .bbtb-field textarea:hover, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__input:hover, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__select:hover { --bbtb-control-fill: var(--bbtb-control-fill-hover, #EDEDED); } /* Focus thickens the rule to 2px orange without shifting the box. */ .bbtb-app:not(#bbtb-cascade) .bbtb-field input:focus, .bbtb-app:not(#bbtb-cascade) .bbtb-field select:focus, .bbtb-app:not(#bbtb-cascade) .bbtb-field textarea:focus, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__input:focus, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__select:focus { box-shadow: inset 0 -2px 0 0 var(--bbtb-accent, #F99D25); outline: none; --bbtb-control-fill: var(--bbtb-control-fill-hover, #EDEDED); } .bbtb-app:not(#bbtb-cascade) .bbtb-field input::placeholder, .bbtb-app:not(#bbtb-cascade) .bbtb-field textarea::placeholder, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__input::placeholder { color: var(--bbtb-control-hint, var(--bbtb-body, #5A5A5A)); opacity: 1; } /** * Selects get a drawn chevron; no image request. * * Image, position, size and repeat travel together as one --bbtb-control-layers * value, because the reset paints them through the same `background` shorthand * as the fill. Publishing the layer list is what makes it impossible for a * fill change — ours or a theme's — to leave the chevron behind at the wrong * size, which is a regression this file has already had once. */ .bbtb-app:not(#bbtb-cascade) .bbtb-field select, .bbtb-app:not(#bbtb-cascade) .bbtb-field__select, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__select { --bbtb-control-layers: linear-gradient(45deg, transparent 50%, var(--bbtb-control-ink, var(--bbtb-ink, #0E0E0E)) 50%) calc(100% - 20px) calc(50% + 2px) / 6px 6px no-repeat, linear-gradient(135deg, var(--bbtb-control-ink, var(--bbtb-ink, #0E0E0E)) 50%, transparent 50%) calc(100% - 14px) calc(50% + 2px) / 6px 6px no-repeat; /* * A select clips its value to its content box; an input does not. At * 24px / 8px inside a 48px control that box is 16px tall, and a 16px face * needs about 18 — enough to cut the descenders off "Choose a project * type…" while leaving "50 miles" looking perfectly fine, which is why it * went unnoticed for so long. 22px / 6px gives the value a 20px box around * the same centre line, so it still sits level with the input beside it in * the locator's search row. */ --bbtb-control-pad: 22px var(--bbtb-space-8, 64px) 6px var(--bbtb-space-3, 12px); --bbtb-control-leading: 1.25; } /* Native date/file controls keep their own chrome but match the box. */ .bbtb-app:not(#bbtb-cascade) .bbtb-field__file, .bbtb-app:not(#bbtb-cascade) .bbtb-field input[type="file"] { background: var(--bbtb-fill, #F5F5F5); border: 1px dashed var(--bbtb-line-strong, #C9C9C9); border-radius: var(--bbtb-radius, 2px); display: block; font: inherit; font-size: .875rem; min-height: 48px; padding: var(--bbtb-space-3, 12px); width: 100%; } /* --- The label ------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-field__label, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__label { color: var(--bbtb-body, #5A5A5A); --bbtb-label-color: var(--bbtb-body, #5A5A5A); display: block; font-family: inherit; font-size: .6875rem; font-weight: 600; left: var(--bbtb-space-3, 12px); letter-spacing: .1em; line-height: 1; max-width: calc(100% - var(--bbtb-space-6, 32px)); overflow: hidden; pointer-events: none; position: absolute; text-overflow: ellipsis; text-transform: uppercase; top: var(--bbtb-space-3, 12px); transition: color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); white-space: nowrap; z-index: 1; --bbtb-label-size: .6875rem; --bbtb-label-leading: 1; } /** * The required marker is not an error. In the error red every required * field on a blank form reads as already wrong, which is most of the * registration wizard. It takes the accent's dark step instead, and red is * kept for the state where something has actually gone wrong. */ .bbtb-app:not(#bbtb-cascade) .bbtb-field__required { color: var(--bbtb-accent-dark, #9A6117); margin-left: 2px; } .bbtb-app:not(#bbtb-cascade) .bbtb-required { color: var(--bbtb-accent-dark, #9A6117); } /* * On a dark ground the deep orange goes muddy; use the accent itself. * * Only for a marker that really is on the band. `.bbtb-field__required` is * not: it sits in the floating label, which sits inside the control, and the * controls on a dark band are light boxes — the accent reads at about 2:1 * there, the deep step at about 5:1. */ .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-required { color: var(--bbtb-accent, #F99D25); } /** * The float. Only where :has() resolves, so a browser without it keeps * the always-up label and a perfectly usable field. */ /* The label takes the accent while its field has focus. */ @supports selector(:has(*)) { .bbtb-app:not(#bbtb-cascade) .bbtb-field:has(> input:focus) > .bbtb-field__label, .bbtb-app:not(#bbtb-cascade) .bbtb-field:has(> textarea:focus) > .bbtb-field__label, .bbtb-app:not(#bbtb-cascade) .bbtb-field:has(> select:focus) > .bbtb-field__label, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field:has(> .bbtb-locator__input:focus) > .bbtb-locator__label { color: var(--bbtb-accent-dark, #9A6117); --bbtb-label-color: var(--bbtb-accent-dark, #9A6117); } } /* --- Helper and error text ------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-field__hint, .bbtb-app:not(#bbtb-cascade) .bbtb-field__status { color: var(--bbtb-body, #5A5A5A); display: block; font-size: .75rem; line-height: 1.5; margin: var(--bbtb-space-2, 8px) 0 0; padding-inline: var(--bbtb-space-3, 12px); } .bbtb-app:not(#bbtb-cascade) .bbtb-field__status:empty { display: none; } .bbtb-app:not(#bbtb-cascade) .bbtb-field__status.is-error { color: var(--bbtb-error, #B3261E); } .bbtb-app:not(#bbtb-cascade) .bbtb-field__status.is-ok { color: var(--bbtb-success, #1B7A43); } .bbtb-app:not(#bbtb-cascade) .bbtb-field__error, .bbtb-app:not(#bbtb-cascade) .bbtb-field-error { align-items: flex-start; color: var(--bbtb-error, #B3261E); display: none; font-size: .75rem; font-weight: 600; gap: var(--bbtb-space-2, 8px); line-height: 1.5; margin: var(--bbtb-space-2, 8px) 0 0; padding-inline: var(--bbtb-space-3, 12px); } .bbtb-app:not(#bbtb-cascade) .bbtb-field--error .bbtb-field__error, .bbtb-app:not(#bbtb-cascade) .bbtb-field__error.is-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-field-error.is-visible { display: flex; } /* The inline error icon, drawn rather than fetched. */ .bbtb-app:not(#bbtb-cascade) .bbtb-field__error::before, .bbtb-app:not(#bbtb-cascade) .bbtb-field-error.is-visible::before { align-items: center; background: var(--bbtb-error, #B3261E); border-radius: 50%; color: #FFFFFF; content: "!"; display: inline-flex; flex: 0 0 auto; font-size: .625rem; font-weight: 700; height: 14px; justify-content: center; line-height: 1; margin-top: 1px; width: 14px; } .bbtb-app:not(#bbtb-cascade) .bbtb-field--error input, .bbtb-app:not(#bbtb-cascade) .bbtb-field--error select, .bbtb-app:not(#bbtb-cascade) .bbtb-field--error textarea { box-shadow: inset 0 -2px 0 0 var(--bbtb-error, #B3261E); --bbtb-control-rule: var(--bbtb-error, #B3261E); } .bbtb-app:not(#bbtb-cascade) .bbtb-field--error .bbtb-field__label { color: var(--bbtb-error, #B3261E); --bbtb-label-color: var(--bbtb-error, #B3261E); } /* --- Checkboxes and radios ------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-field--check { position: static; } .bbtb-app:not(#bbtb-cascade) .bbtb-check, .bbtb-app:not(#bbtb-cascade) .bbtb-checkgrid__item, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__toggle { align-items: flex-start; cursor: pointer; display: flex; gap: var(--bbtb-space-3, 12px); line-height: 1.5; min-height: 48px; padding: var(--bbtb-space-3, 12px) 0; --bbtb-label-leading: 1.5; } /** * The box itself is drawn by the pinned rule in the defensive reset, which * reads --bbtb-check-fill / --bbtb-check-border / --bbtb-check-radius. * These rules therefore set those custom properties rather than `background` * and `border`, and everything else — size, cursor, transition — normally. */ .bbtb-app:not(#bbtb-cascade) .bbtb-check__input, .bbtb-app:not(#bbtb-cascade) .bbtb-checkgrid__input, .bbtb-app:not(#bbtb-cascade) .bbtb-field--check input[type="checkbox"], .bbtb-app:not(#bbtb-cascade) .bbtb-field--check input[type="radio"], .bbtb-app:not(#bbtb-cascade) .bbtb-locator__toggle input[type="checkbox"] { cursor: pointer; display: inline-block; flex: 0 0 auto; height: 20px; margin: 2px 0 0; position: relative; transition: background-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), border-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); width: 20px; --bbtb-check-fill: var(--bbtb-surface, #FFFFFF); --bbtb-check-border: 2px solid var(--bbtb-body, #5A5A5A); } .bbtb-app:not(#bbtb-cascade) .bbtb-check__input:checked, .bbtb-app:not(#bbtb-cascade) .bbtb-checkgrid__input:checked, .bbtb-app:not(#bbtb-cascade) .bbtb-field--check input:checked, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__toggle input:checked { --bbtb-check-fill: var(--bbtb-accent, #F99D25); --bbtb-check-border: 2px solid var(--bbtb-accent, #F99D25); } /* Checkmark for checkboxes. Type-qualified so it can never reach a radio. */ .bbtb-app:not(#bbtb-cascade) .bbtb-check__input[type="checkbox"]:checked::after, .bbtb-app:not(#bbtb-cascade) .bbtb-checkgrid__input[type="checkbox"]:checked::after, .bbtb-app:not(#bbtb-cascade) .bbtb-field--check input[type="checkbox"]:checked::after, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__toggle input[type="checkbox"]:checked::after { border: solid var(--bbtb-accent-ink, #0E0E0E); border-width: 0 2px 2px 0; content: ""; height: 10px; left: 5px; position: absolute; top: 1px; transform: rotate(45deg); width: 5px; } /** * Radios are round with an orange dot; checkboxes stay square with a tick. * * On the exam this is load-bearing: single-answer and multi-answer * questions look identical apart from this control, so if both render as a * filled square a candidate cannot tell "pick one" from "pick all that * apply". Never collapse the two treatments back together. */ .bbtb-app:not(#bbtb-cascade) .bbtb-field--check input[type="radio"], .bbtb-app:not(#bbtb-cascade) .bbtb-check__input[type="radio"], .bbtb-app:not(#bbtb-cascade) .bbtb-checkgrid__input[type="radio"] { --bbtb-check-radius: 50%; } .bbtb-app:not(#bbtb-cascade) .bbtb-field--check input[type="radio"]:checked, .bbtb-app:not(#bbtb-cascade) .bbtb-check__input[type="radio"]:checked, .bbtb-app:not(#bbtb-cascade) .bbtb-checkgrid__input[type="radio"]:checked { --bbtb-check-fill: var(--bbtb-surface, #FFFFFF); --bbtb-check-border: 2px solid var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-field--check input[type="radio"]:checked::after, .bbtb-app:not(#bbtb-cascade) .bbtb-check__input[type="radio"]:checked::after, .bbtb-app:not(#bbtb-cascade) .bbtb-checkgrid__input[type="radio"]:checked::after { background: var(--bbtb-accent, #F99D25); border-radius: 50%; content: ""; inset: 3px; position: absolute; } .bbtb-app:not(#bbtb-cascade) .bbtb-check__label, .bbtb-app:not(#bbtb-cascade) .bbtb-checkgrid__label, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__toggle-text { font-size: .9375rem; min-width: 0; --bbtb-label-size: .9375rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-checkgrid { display: grid; gap: 0 var(--bbtb-space-5, 24px); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); list-style: none; margin: 0; padding: 0; } /* --- Fieldsets and form scaffolding ---------------------------------- */ /** * The fieldset carries no border of its own and the rule belongs to the * legend. * * A `border-top` on the fieldset is interrupted by the rendered legend, and * the legend is painted in that border — which put "Services offered" flat * on top of the bottom rule of the field above it on the dashboard's profile * tab. Giving the legend its own bottom rule is the same look with none of * the overlap, and works the same in every engine. */ .bbtb-app:not(#bbtb-cascade) .bbtb-fieldset { border: 0; margin: var(--bbtb-space-7, 48px) 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-fieldset:first-child { margin-top: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-fieldset:last-child { margin-bottom: 0; } /** * A legend is one of the elements the defensive reset pins case and * tracking on, so this rule has to publish --bbtb-heading-transform and * --bbtb-heading-tracking as well as setting the plain properties. * Setting `text-transform` alone loses to the reset's `!important` and the * legend comes out in sentence case with the wrong tracking. */ .bbtb-app:not(#bbtb-cascade) .bbtb-fieldset__legend { border-bottom: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); color: var(--bbtb-ink, #0E0E0E); display: block; font-family: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; margin: 0 0 var(--bbtb-space-5, 24px); padding: 0 0 var(--bbtb-space-3, 12px); text-transform: uppercase; width: 100%; --bbtb-heading-color: var(--bbtb-ink, #0E0E0E); --bbtb-heading-transform: uppercase; --bbtb-heading-tracking: .14em; } .bbtb-app:not(#bbtb-cascade) .bbtb-form__title { font-size: clamp(1.5rem, 3.6cqi, 2rem); margin: 0 0 var(--bbtb-space-3, 12px); } .bbtb-app:not(#bbtb-cascade) .bbtb-form__subtitle, .bbtb-app:not(#bbtb-cascade) .bbtb-form__intro { margin: 0 0 var(--bbtb-space-6, 32px); } .bbtb-app:not(#bbtb-cascade) .bbtb-form__aside { border-left: 3px solid var(--bbtb-accent, #F99D25); color: var(--bbtb-body, #5A5A5A); font-size: .875rem; margin: var(--bbtb-space-4, 16px) 0 0; padding: var(--bbtb-space-1, 4px) 0 var(--bbtb-space-1, 4px) var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-form__status:empty, .bbtb-app:not(#bbtb-cascade) .bbtb-form__message:empty, .bbtb-app:not(#bbtb-cascade) .bbtb-form-status:empty, .bbtb-app:not(#bbtb-cascade) .bbtb-contact__status:empty { display: none; } .bbtb-app:not(#bbtb-cascade) .bbtb-form__status, .bbtb-app:not(#bbtb-cascade) .bbtb-form__message, .bbtb-app:not(#bbtb-cascade) .bbtb-form-status { margin: 0 0 var(--bbtb-space-5, 24px); } /* Honeypots: off-screen rather than display:none, which some bots read. */ .bbtb-app:not(#bbtb-cascade) .bbtb-hp, .bbtb-app:not(#bbtb-cascade) .bbtb-hp-field { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; } /* --- Upload dropzone -------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-upload { background: var(--bbtb-fill, #F5F5F5); border: 2px dashed var(--bbtb-line-strong, #C9C9C9); border-radius: var(--bbtb-radius, 2px); padding: var(--bbtb-space-6, 32px) var(--bbtb-space-4, 16px); position: relative; transition: background-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), border-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); } .bbtb-app:not(#bbtb-cascade) .bbtb-upload.is-dragover { background: var(--bbtb-accent-tint, #FEEBD2); border-color: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-upload .bbtb-field__label { position: static; max-width: none; } .bbtb-app:not(#bbtb-cascade) .bbtb-upload__hint { color: var(--bbtb-body, #5A5A5A); font-size: .75rem; margin: var(--bbtb-space-2, 8px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-upload__preview:empty { display: none; } .bbtb-app:not(#bbtb-cascade) .bbtb-upload__preview { margin-top: var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-upload__thumb { display: block; max-height: 140px; width: auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-upload__filename { color: var(--bbtb-body, #5A5A5A); font-size: .75rem; word-break: break-all; } .bbtb-app:not(#bbtb-cascade) .bbtb-uploads { display: grid; gap: var(--bbtb-space-5, 24px); grid-template-columns: 1fr; } /** * Field rows split on the form's own width, not the window's. * * A two-up row needs about 32rem before the labels start truncating — * "EMAIL ADD…", "PROPERTY …" — and the contact form on a profile page sits * in a sidebar-narrowed column that a viewport query has no way to see. */ @container bbtb-form (min-width: 32rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-form__row--split, .bbtb-app:not(#bbtb-cascade) .bbtb-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bbtb-app:not(#bbtb-cascade) .bbtb-form__row--split .bbtb-field { margin-bottom: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-uploads { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* * A prose field wants the whole measure. Every other control on the * dashboard's profile tab is a single line and reads better two-up than * as a 1000px-wide box. */ .bbtb-app:not(#bbtb-cascade) .bbtb-form__grid > .bbtb-field--textarea { grid-column: 1 / -1; } } @container bbtb-form (min-width: 44rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-form__row--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bbtb-app:not(#bbtb-cascade) .bbtb-form__row--thirds .bbtb-field { margin-bottom: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-form__grid--aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } } /* ===================================================================== * 7. CARDS, CHIPS, BADGES * * A card is a hairline box on white. It has no radius, no shadow and no * tint. Elevation is reserved for the lightbox, the toast and the map * info window. * ================================================================== */ .bbtb-app.bbtb-card:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-card { background: var(--bbtb-surface, #FFFFFF); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); border-radius: var(--bbtb-radius, 2px); padding: var(--bbtb-space-6, 32px) var(--bbtb-space-5, 24px); } .bbtb-app.bbtb-card:not(#bbtb-cascade) + .bbtb-card, .bbtb-app:not(#bbtb-cascade) .bbtb-card + .bbtb-card, .bbtb-app.bbtb-card:not(#bbtb-cascade) + .bbtb-notice, .bbtb-app:not(#bbtb-cascade) .bbtb-card + .bbtb-notice, .bbtb-app.bbtb-notice:not(#bbtb-cascade) + .bbtb-card, .bbtb-app:not(#bbtb-cascade) .bbtb-notice + .bbtb-card { margin-top: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-card__title { font-size: 1.125rem; font-weight: 600; letter-spacing: .01em; margin: 0 0 var(--bbtb-space-3, 12px); --bbtb-heading-tracking: .01em; } .bbtb-app:not(#bbtb-cascade) .bbtb-card__lead { margin: 0 0 var(--bbtb-space-3, 12px); } .bbtb-app:not(#bbtb-cascade) .bbtb-card__lead:last-child { margin-bottom: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-card__meta { font-size: .8125rem; line-height: 1.6; margin: 0 0 var(--bbtb-space-3, 12px); } /* An orange top rule marks the cards that carry programme status. */ .bbtb-app:not(#bbtb-cascade) .bbtb-card--certification, .bbtb-app:not(#bbtb-cascade) .bbtb-card--success { border-top: 4px solid var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-card--success { background: var(--bbtb-surface, #FFFFFF); } .bbtb-app:not(#bbtb-cascade) .bbtb-card--checklist { background: var(--bbtb-band, #F2F2F2); border-color: transparent; } .bbtb-app:not(#bbtb-cascade) .bbtb-card--steps { background: var(--bbtb-band, #F2F2F2); border-color: transparent; border-left: 4px solid var(--bbtb-accent, #F99D25); } /* --- Chips and pills -------------------------------------------------- */ /* * The locator's result card names its service items * .bbtb-result-card__service rather than .bbtb-chip; they get the quiet chip * treatment here so they read the same as the ones on a contractor card * instead of running together as bare words. */ .bbtb-app:not(#bbtb-cascade) .bbtb-chip, .bbtb-app:not(#bbtb-cascade) .bbtb-pill, .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__service { align-items: center; background: transparent; border: var(--bbtb-hairline, 1px) solid var(--bbtb-line-strong, #C9C9C9); border-radius: var(--bbtb-radius, 2px); display: inline-flex; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; line-height: 1.4; padding: var(--bbtb-space-1, 4px) var(--bbtb-space-2, 8px); text-transform: uppercase; white-space: nowrap; } .bbtb-app:not(#bbtb-cascade) .bbtb-chip--quiet, .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__service { border-color: var(--bbtb-line, #E2E2E2); color: var(--bbtb-body, #5A5A5A); font-weight: 400; } .bbtb-app:not(#bbtb-cascade) .bbtb-chip--accent { border-color: var(--bbtb-line, #E2E2E2); border-left: 3px solid var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-chip a { color: inherit; --bbtb-link: inherit; } .bbtb-app:not(#bbtb-cascade) .bbtb-chip a:hover { text-decoration: underline; --bbtb-link-decoration: underline; } .bbtb-app:not(#bbtb-cascade) .bbtb-pill--certified, .bbtb-app:not(#bbtb-cascade) .bbtb-pill--approved { background: var(--bbtb-accent-tint, #FEEBD2); border-color: var(--bbtb-accent, #F99D25); color: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-pill--pending { background: var(--bbtb-warning-bg, #FCF3E0); border-color: var(--bbtb-warning, #8A5A00); color: var(--bbtb-warning, #8A5A00); } .bbtb-app:not(#bbtb-cascade) .bbtb-pill--rejected, .bbtb-app:not(#bbtb-cascade) .bbtb-pill--suspended { background: var(--bbtb-error-bg, #FBEAE9); border-color: var(--bbtb-error, #B3261E); color: var(--bbtb-error, #B3261E); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__chips, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__services, .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__services, .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__services { display: flex; flex-wrap: wrap; gap: var(--bbtb-space-2, 8px); list-style: none; margin: 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-chip, .bbtb-app:not(#bbtb-cascade) .bbtb-registration__hero .bbtb-chip, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero .bbtb-chip { border-color: rgba(255, 255, 255, .35); color: #FFFFFF; } /* --- Certified badge -------------------------------------------------- */ .bbtb-app.bbtb-badge:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-badge { align-items: center; background: var(--bbtb-ink, #0E0E0E); border: 2px solid var(--bbtb-badge-accent, #F99D25); border-radius: var(--bbtb-radius, 2px); color: #FFFFFF; display: inline-flex; gap: var(--bbtb-space-3, 12px); max-width: 100%; padding: var(--bbtb-space-2, 8px) var(--bbtb-space-3, 12px); position: relative; transition: background-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); } a.bbtb-app.bbtb-badge:hover:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) a.bbtb-badge:hover, a.bbtb-app.bbtb-badge:focus-visible:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) a.bbtb-badge:focus-visible { background: var(--bbtb-badge-accent, #F99D25); color: var(--bbtb-badge-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-badge__mark { align-items: center; color: var(--bbtb-badge-accent, #F99D25); display: inline-flex; flex: 0 0 auto; } a.bbtb-app.bbtb-badge:hover:not(#bbtb-cascade) .bbtb-badge__mark, .bbtb-app:not(#bbtb-cascade) a.bbtb-badge:hover .bbtb-badge__mark, a.bbtb-app.bbtb-badge:focus-visible:not(#bbtb-cascade) .bbtb-badge__mark, .bbtb-app:not(#bbtb-cascade) a.bbtb-badge:focus-visible .bbtb-badge__mark { color: var(--bbtb-badge-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-badge__mark svg, .bbtb-app:not(#bbtb-cascade) .bbtb-badge__mark img { display: block; height: 24px; width: auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-badge__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-badge__title { font-size: .75rem; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-badge__strap, .bbtb-app:not(#bbtb-cascade) .bbtb-badge__date { font-size: .625rem; letter-spacing: .06em; line-height: 1.4; opacity: .8; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-badge--small { padding: var(--bbtb-space-1, 4px) var(--bbtb-space-2, 8px); } .bbtb-app:not(#bbtb-cascade) .bbtb-badge--small .bbtb-badge__mark svg, .bbtb-app:not(#bbtb-cascade) .bbtb-badge--small .bbtb-badge__mark img { height: 16px; } .bbtb-app:not(#bbtb-cascade) .bbtb-badge--small .bbtb-badge__title { font-size: .625rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-badge--large { gap: var(--bbtb-space-4, 16px); padding: var(--bbtb-space-4, 16px) var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-badge--large .bbtb-badge__mark svg, .bbtb-app:not(#bbtb-cascade) .bbtb-badge--large .bbtb-badge__mark img { height: 40px; } .bbtb-app:not(#bbtb-cascade) .bbtb-badge--large .bbtb-badge__title { font-size: 1rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-badge--flat { background: var(--bbtb-badge-accent, #F99D25); border-color: var(--bbtb-badge-accent, #F99D25); color: var(--bbtb-badge-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-badge--flat .bbtb-badge__mark { color: inherit; } .bbtb-app:not(#bbtb-cascade) .bbtb-badge--shield { border-radius: var(--bbtb-radius, 2px) var(--bbtb-radius, 2px) 12px 12px; } /* --- Credential block ------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-credential__number { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; overflow-wrap: anywhere; } .bbtb-app:not(#bbtb-cascade) .bbtb-credential__subtitle { color: var(--bbtb-body, #5A5A5A); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; margin: var(--bbtb-space-5, 24px) 0 var(--bbtb-space-2, 8px); text-transform: uppercase; --bbtb-heading-color: var(--bbtb-body, #5A5A5A); --bbtb-heading-transform: uppercase; --bbtb-heading-tracking: .14em; } .bbtb-app:not(#bbtb-cascade) .bbtb-credential__text { color: var(--bbtb-body, #5A5A5A); font-size: .875rem; margin: 0; } /* ===================================================================== * 8. NOTICES & FEEDBACK * ================================================================== */ .bbtb-app.bbtb-notice:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-notice { background: var(--bbtb-info-bg, #E9F0F7); border-left: 4px solid var(--bbtb-info, #1F4E79); border-radius: 0; display: flex; gap: var(--bbtb-space-3, 12px); margin: 0 0 var(--bbtb-space-5, 24px); padding: var(--bbtb-space-4, 16px) var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-notice__icon { background: var(--bbtb-info, #1F4E79); border-radius: 50%; flex: 0 0 auto; height: 10px; margin-top: 7px; width: 10px; } .bbtb-app:not(#bbtb-cascade) .bbtb-notice__content { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-notice__title { font-size: .9375rem; font-weight: 700; letter-spacing: .01em; margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-notice__message, .bbtb-app:not(#bbtb-cascade) .bbtb-notice__text { font-size: .9375rem; margin: var(--bbtb-space-2, 8px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-notice__title + .bbtb-notice__message, .bbtb-app:not(#bbtb-cascade) .bbtb-notice__title + .bbtb-notice__text { margin-top: var(--bbtb-space-1, 4px); } .bbtb-app:not(#bbtb-cascade) .bbtb-notice__list { --bbtb-list-flow: var(--bbtb-space-2, 8px) 0 0; --bbtb-list-inset: 0 0 0 var(--bbtb-space-5, 24px); --bbtb-list-style: disc; } .bbtb-app:not(#bbtb-cascade) .bbtb-notice__note { border-left: 2px solid var(--bbtb-line-strong, #C9C9C9); font-size: .875rem; margin: var(--bbtb-space-3, 12px) 0 0; padding-left: var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-notice__note cite { color: var(--bbtb-body, #5A5A5A); font-size: .75rem; font-style: normal; } .bbtb-app:not(#bbtb-cascade) .bbtb-notice--success { background: var(--bbtb-success-bg, #E7F4EC); border-left-color: var(--bbtb-success, #1B7A43); } .bbtb-app:not(#bbtb-cascade) .bbtb-notice--success .bbtb-notice__icon { background: var(--bbtb-success, #1B7A43); } .bbtb-app:not(#bbtb-cascade) .bbtb-notice--warning { background: var(--bbtb-warning-bg, #FCF3E0); border-left-color: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-notice--warning .bbtb-notice__icon { background: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-notice--error { background: var(--bbtb-error-bg, #FBEAE9); border-left-color: var(--bbtb-error, #B3261E); } .bbtb-app:not(#bbtb-cascade) .bbtb-notice--error .bbtb-notice__icon { background: var(--bbtb-error, #B3261E); } .bbtb-app:not(#bbtb-cascade) .bbtb-notice--info { background: var(--bbtb-info-bg, #E9F0F7); border-left-color: var(--bbtb-info, #1F4E79); } .bbtb-app:not(#bbtb-cascade) .bbtb-notice--info .bbtb-notice__icon { background: var(--bbtb-info, #1F4E79); } .bbtb-app:not(#bbtb-cascade) .bbtb-notice--inline { display: inline-flex; margin: 0; } /* --- Spinner ---------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-spinner, .bbtb-app:not(#bbtb-cascade) .bbtb-btn__spinner { animation: bbtb-spin 700ms linear infinite; border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; display: none; height: 16px; width: 16px; } .bbtb-app:not(#bbtb-cascade) .is-busy .bbtb-spinner, .bbtb-app:not(#bbtb-cascade) .is-busy .bbtb-btn__spinner, .bbtb-app:not(#bbtb-cascade) .bbtb-spinner.is-visible { display: inline-block; } @keyframes bbtb-spin { to { transform: rotate(360deg); } } /* --- Toast: genuinely floating, so it takes elevation ------------------ */ .bbtb-app:not(#bbtb-cascade) .bbtb-toast { background: var(--bbtb-ink, #0E0E0E); border-radius: var(--bbtb-radius, 2px); bottom: var(--bbtb-space-4, 16px); box-shadow: var(--bbtb-elev-3, 0 8px 24px rgba(0, 0, 0, .10)); color: #FFFFFF; font-size: .875rem; left: 50%; max-width: calc(100vw - var(--bbtb-space-6, 32px)); padding: var(--bbtb-space-3, 12px) var(--bbtb-space-5, 24px); position: fixed; transform: translateX(-50%); z-index: 100000; } /** * bbtb-dashboard.js writes `bbtb-toast bbtb-toast-- is-visible`, where * tone is success, error or info. Those are the class names to style; * `.is-error` is kept only so older markup does not render an unmarked * black box. */ .bbtb-app:not(#bbtb-cascade) .bbtb-toast--success { background: var(--bbtb-accent, #F99D25); color: var(--bbtb-accent-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-toast--error, .bbtb-app:not(#bbtb-cascade) .bbtb-toast.is-error { background: var(--bbtb-error, #B3261E); color: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) .bbtb-toast--info { background: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) .bbtb-toast--success, .bbtb-app:not(#bbtb-cascade) .bbtb-toast--error { align-items: center; display: flex; gap: var(--bbtb-space-2, 8px); } /* A glyph as well as a colour, so the tone is not carried by hue alone. */ .bbtb-app:not(#bbtb-cascade) .bbtb-toast--success::before, .bbtb-app:not(#bbtb-cascade) .bbtb-toast--error::before { align-items: center; border: 2px solid currentColor; border-radius: 50%; display: inline-flex; flex: 0 0 auto; font-size: .625rem; font-weight: 700; height: 18px; justify-content: center; line-height: 1; width: 18px; } .bbtb-app:not(#bbtb-cascade) .bbtb-toast--success::before { content: "\2713"; } .bbtb-app:not(#bbtb-cascade) .bbtb-toast--error::before { content: "!"; } /* --- Progress and strength bars --------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-progress, .bbtb-app:not(#bbtb-cascade) .bbtb-progress__track, .bbtb-app:not(#bbtb-cascade) .bbtb-strength__track, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__progress-track, .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__progress-track { background: var(--bbtb-line, #E2E2E2); border-radius: 0; height: 4px; overflow: hidden; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-progress__fill, .bbtb-app:not(#bbtb-cascade) .bbtb-progress-fill, .bbtb-app:not(#bbtb-cascade) .bbtb-strength__fill, .bbtb-app:not(#bbtb-cascade) .bbtb-strength-fill, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__progress-fill, .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__progress-fill, .bbtb-app:not(#bbtb-cascade) .bbtb-upload-fill { background: var(--bbtb-accent, #F99D25); display: block; height: 100%; transition: width var(--bbtb-dur-3, 350ms) var(--bbtb-ease, ease); width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-strength__fill.is-weak, .bbtb-app:not(#bbtb-cascade) .bbtb-strength-fill.is-weak { background: var(--bbtb-error, #B3261E); } .bbtb-app:not(#bbtb-cascade) .bbtb-strength__fill.is-strong, .bbtb-app:not(#bbtb-cascade) .bbtb-strength-fill.is-strong { background: var(--bbtb-success, #1B7A43); } .bbtb-app:not(#bbtb-cascade) .bbtb-progress-label, .bbtb-app:not(#bbtb-cascade) .bbtb-strength__label, .bbtb-app:not(#bbtb-cascade) .bbtb-strength-label, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__progress-label, .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__progress-label { color: var(--bbtb-body, #5A5A5A); display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; margin: 0 0 var(--bbtb-space-2, 8px); text-transform: uppercase; } /* --- Carousel-style dots (the homepage's accent detail) ---------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-dots { display: flex; gap: var(--bbtb-space-2, 8px); justify-content: center; list-style: none; margin: var(--bbtb-space-6, 32px) 0 0; --bbtb-list-flow: var(--bbtb-space-6, 32px) 0 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-dots li { background: var(--bbtb-fine, #6E6E6E); border-radius: 50%; height: 6px; width: 6px; } .bbtb-app:not(#bbtb-cascade) .bbtb-dots li.is-active { background: transparent; border: 2px solid var(--bbtb-ink, #0E0E0E); height: 10px; margin-top: -2px; width: 10px; } /* ===================================================================== * 9. TABLES * ================================================================== */ .bbtb-app:not(#bbtb-cascade) .bbtb-table { border-collapse: collapse; font-size: .9375rem; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-table caption, .bbtb-app:not(#bbtb-cascade) .bbtb-table__caption { caption-side: top; color: var(--bbtb-body, #5A5A5A); font-size: .75rem; letter-spacing: .08em; padding-bottom: var(--bbtb-space-3, 12px); text-align: left; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-table th, .bbtb-app:not(#bbtb-cascade) .bbtb-table td { border-bottom: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); padding: var(--bbtb-space-3, 12px) var(--bbtb-space-2, 8px); text-align: left; vertical-align: top; } .bbtb-app:not(#bbtb-cascade) .bbtb-table th { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-table thead th { border-bottom: 2px solid var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-table tbody tr { transition: background-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); } .bbtb-app:not(#bbtb-cascade) .bbtb-table tbody tr:hover { background: var(--bbtb-fill, #F5F5F5); } .bbtb-app:not(#bbtb-cascade) .bbtb-table__wrap { -webkit-overflow-scrolling: touch; overflow-x: auto; width: 100%; } /** * Attempt-history rows. dashboard/tab-certification.php writes * bbtb-table__row with is-pass or is-fail on every row, so the outcome * reads down the left edge of the table as well as in the result pill. */ .bbtb-app:not(#bbtb-cascade) .bbtb-table__row > :first-child { border-left: 3px solid transparent; padding-left: var(--bbtb-space-3, 12px); } .bbtb-app:not(#bbtb-cascade) .bbtb-table__row.is-pass > :first-child { border-left-color: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-table__row.is-fail > :first-child { border-left-color: var(--bbtb-error, #B3261E); } /* ===================================================================== * 10. REGISTRATION WIZARD * * The programme's front door, built as the same stack of full-bleed bands * as the certification intro: a dark hero, a white band of benefit tiles, * then the form on light grey. * * The step rail is the piece that has to carry the "this is a short, * finite process" message. Each step is a numbered marker plus a label * over a segment of a five-part bar, and the three states are carried by * fill and weight together rather than by colour alone: upcoming is a * hollow marker on a pale segment, complete is a solid ink marker, and * the current step is the accent, the only orange on the rail. * * The numerals are in the markup and no marker hangs off an `li` * pseudo-element, so a theme that injects `ol > li::before` counters has * nothing of ours to draw over. * ================================================================== */ .bbtb-app.bbtb-registration:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-registration { margin: 0 auto; max-width: var(--bbtb-shell, 1140px); } /* --- The bands --------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-registration__hero { background: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; padding: var(--bbtb-space-8, 64px) var(--bbtb-space-4, 16px); text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-registration__section { padding: var(--bbtb-space-8, 64px) var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-registration__section--gray { background: var(--bbtb-band, #F2F2F2); } .bbtb-app:not(#bbtb-cascade) .bbtb-registration__inner { margin: 0 auto; max-width: 52rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-registration__eyebrow { color: var(--bbtb-accent, #F99D25); display: block; font-size: .75rem; font-weight: 600; letter-spacing: .18em; line-height: 1.4; margin: 0 0 var(--bbtb-space-4, 16px); text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-registration__title { color: #FFFFFF; font-size: clamp(1.75rem, 5.4cqi, 2.75rem); font-weight: 300; letter-spacing: -.01em; line-height: 1.12; margin: 0 0 var(--bbtb-space-5, 24px); text-wrap: balance; --bbtb-heading-color: #FFFFFF; --bbtb-heading-tracking: -.01em; --bbtb-heading-leading: 1.12; } .bbtb-app:not(#bbtb-cascade) .bbtb-registration__title strong { font-weight: 700; } .bbtb-app:not(#bbtb-cascade) .bbtb-registration__promise { color: rgba(255, 255, 255, .78); font-size: 1.0625rem; line-height: 1.7; margin: 0 auto; max-width: 42rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-registration__subtitle { font-size: clamp(1.25rem, 3.2cqi, 1.75rem); font-weight: 400; margin: 0 0 var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-registration__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bbtb-space-3, 12px); justify-content: center; margin: var(--bbtb-space-7, 48px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-registration__closing, .bbtb-app:not(#bbtb-cascade) .bbtb-registration__signoff { color: var(--bbtb-body, #5A5A5A); font-size: .9375rem; margin: var(--bbtb-space-5, 24px) 0 0; } /** * Numbered steps. The numeral is a span in the markup, not a CSS counter and * not a list marker: the defensive reset kills both, precisely so a theme's * own `ol > li::before` counter cannot draw a second number beside ours. */ .bbtb-app:not(#bbtb-cascade) .bbtb-steps__item { align-items: flex-start; gap: var(--bbtb-space-4, 16px); padding: var(--bbtb-space-4, 16px) 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-steps__number { align-items: center; border: 2px solid var(--bbtb-accent, #F99D25); border-radius: var(--bbtb-radius, 2px); color: var(--bbtb-ink, #0E0E0E); display: inline-flex; flex: 0 0 auto; font-size: .75rem; font-weight: 700; height: 28px; justify-content: center; line-height: 1; width: 28px; } .bbtb-app:not(#bbtb-cascade) .bbtb-steps__text { margin: 0; min-width: 0; } /* The confirmation screen is a reading surface, not a layout. */ .bbtb-app.bbtb-registration--success:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-registration--success { margin: 0 auto; max-width: 46rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard { margin: 0; max-width: none; } /* --- The progress line ------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__progress { margin: 0 0 var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__progress-label { color: var(--bbtb-body, #5A5A5A); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; margin: 0 0 var(--bbtb-space-3, 12px); text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__progress-track { background: var(--bbtb-line, #E2E2E2); display: block; height: 2px; overflow: hidden; } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__progress-fill { background: var(--bbtb-accent, #F99D25); display: block; height: 100%; width: 0; transition: width var(--bbtb-dur-3, 350ms) var(--bbtb-ease, ease); } /* --- The step rail ----------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav, .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__steps { display: grid; gap: var(--bbtb-space-2, 8px); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; list-style: none; margin: 0 0 var(--bbtb-space-7, 48px); padding: 0; --bbtb-list-flow: 0 0 var(--bbtb-space-7, 48px); } /* * Marker and label never wrap apart from each other — a wrapping label used * to push the numeral onto a line of its own and leave the rail ragged — so * the row is nowrap and the label wraps inside its own column instead. */ .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav-item { align-items: flex-start; border-top: 3px solid var(--bbtb-line, #E2E2E2); color: var(--bbtb-fine, #6E6E6E); display: flex; flex-wrap: nowrap; gap: var(--bbtb-space-2, 8px); min-width: 0; padding: var(--bbtb-space-3, 12px) 0 0; transition: border-color var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease), color var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease); } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav-marker { align-items: center; border: 2px solid var(--bbtb-line-strong, #C9C9C9); border-radius: var(--bbtb-radius, 2px); color: var(--bbtb-fine, #6E6E6E); display: inline-flex; flex: 0 0 auto; font-size: .6875rem; font-weight: 700; height: 24px; justify-content: center; line-height: 1; transition: background-color var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease), border-color var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease), color var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease); width: 24px; } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav-label { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; padding-top: 3px; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav-item.is-active { border-top-color: var(--bbtb-accent, #F99D25); color: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav-item.is-active .bbtb-wizard__nav-marker { background: var(--bbtb-accent, #F99D25); border-color: var(--bbtb-accent, #F99D25); color: var(--bbtb-accent-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav-item.is-complete { border-top-color: var(--bbtb-ink, #0E0E0E); color: var(--bbtb-body, #5A5A5A); } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav-item.is-complete .bbtb-wizard__nav-marker { background: var(--bbtb-ink, #0E0E0E); border-color: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; } /* --- The step panels ---------------------------------------------------- */ /* * The panels are
in the markup, which * is also the legacy rail class, so these rules reset everything the rail * rules above would otherwise apply to a real panel. */ .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__step[data-bbtb-step] { background: var(--bbtb-surface, #FFFFFF); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); color: inherit; display: block; flex: none; font-size: inherit; font-weight: inherit; letter-spacing: normal; padding: var(--bbtb-space-6, 32px) var(--bbtb-space-5, 24px); text-transform: none; } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__step-title { border-bottom: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); font-size: clamp(1.25rem, 3.6cqi, 1.625rem); font-weight: 400; letter-spacing: -.005em; margin: 0 0 var(--bbtb-space-6, 32px); padding-bottom: var(--bbtb-space-4, 16px); text-transform: none; --bbtb-heading-transform: none; --bbtb-heading-tracking: -.005em; } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__actions, .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav--actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bbtb-space-3, 12px); justify-content: space-between; margin-top: var(--bbtb-space-5, 24px); } /* * Continue is the only primary action on the screen, and it sits on the * right where the eye leaves the last field. With only one button visible * — step 1 has no Back — `space-between` would park it on the left, so the * row is right-aligned and Back is pushed away from it instead. */ .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__actions { justify-content: flex-end; } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__actions [data-bbtb-prev] { margin-inline-end: auto; } @container bbtb-surface (max-width: 34rem) { /* Five columns cannot hold a label under 34rem; stack the rail instead. */ .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav { grid-auto-flow: row; } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav-item.is-active ~ .bbtb-wizard__nav-item { display: none; } .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav-item:not(.is-active):not(.is-complete) { display: none; } } @container bbtb-surface (min-width: 46rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__step[data-bbtb-step] { padding: var(--bbtb-space-8, 64px) var(--bbtb-space-7, 48px); } } /* ===================================================================== * 11. CONTRACTOR DASHBOARD * ================================================================== */ .bbtb-app.bbtb-dashboard:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard { margin: 0 auto; max-width: var(--bbtb-shell, 1140px); } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__header { align-items: center; border-bottom: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); display: flex; flex-wrap: wrap; gap: var(--bbtb-space-5, 24px); justify-content: space-between; margin: 0 0 var(--bbtb-space-6, 32px); padding-bottom: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__identity { align-items: center; display: flex; gap: var(--bbtb-space-4, 16px); min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__logo { border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); flex: 0 0 auto; height: 64px; object-fit: contain; padding: var(--bbtb-space-1, 4px); width: 64px; } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__identity-text { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__title { font-size: clamp(1.375rem, 3.8cqi, 1.875rem); margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__subtitle { font-size: .875rem; margin: var(--bbtb-space-1, 4px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__status { display: flex; flex-wrap: wrap; gap: var(--bbtb-space-2, 8px); margin: 0; } /* --- Tabs ------------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tabs { border-bottom: 2px solid var(--bbtb-line, #E2E2E2); display: flex; flex-wrap: nowrap; gap: 0; list-style: none; margin: 0 0 var(--bbtb-space-7, 48px); --bbtb-list-flow: 0 0 var(--bbtb-space-7, 48px); overflow-x: auto; padding: 0; -webkit-overflow-scrolling: touch; } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tab, .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tabs [role="tab"] { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--bbtb-body, #5A5A5A); cursor: pointer; display: inline-flex; align-items: center; font-family: inherit; font-size: .75rem; font-weight: 600; isolation: isolate; letter-spacing: .12em; margin-bottom: -2px; min-height: 48px; overflow: hidden; padding: 0 var(--bbtb-space-4, 16px); position: relative; text-transform: uppercase; transition: border-color var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease), color var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease); white-space: nowrap; --bbtb-state: #0E0E0E; } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tab::after, .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tabs [role="tab"]::after { background: var(--bbtb-state, #0E0E0E); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); z-index: -1; } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tab:hover::after { opacity: var(--bbtb-state-hover, .06); } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tab:active::after { opacity: var(--bbtb-state-press, .14); } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tab.is-active, .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--bbtb-accent, #F99D25); color: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__panels, .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__panel { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__panel { outline: none; } /* --- Stats ------------------------------------------------------------ */ /* * Plain
s in a grid, ruled apart. `auto-fit` rather than a fixed * count so four tiles become two rows of two in a narrow theme column * without a media query of their own. */ .bbtb-app:not(#bbtb-cascade) .bbtb-stats { display: grid; gap: var(--bbtb-hairline, 1px); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); list-style: none; margin: 0; padding: 0; --bbtb-list-flow: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-stat, .bbtb-app:not(#bbtb-cascade) .bbtb-stats__item { background: var(--bbtb-band, #F2F2F2); border-top: 3px solid var(--bbtb-accent, #F99D25); min-width: 0; padding: var(--bbtb-space-5, 24px) var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-stat__value, .bbtb-app:not(#bbtb-cascade) .bbtb-stats__value { display: block; font-size: clamp(1.75rem, 4cqi, 2.25rem); font-weight: 300; letter-spacing: -.02em; line-height: 1; overflow-wrap: anywhere; } .bbtb-app:not(#bbtb-cascade) .bbtb-stat__label, .bbtb-app:not(#bbtb-cascade) .bbtb-stats__label { color: var(--bbtb-body, #5A5A5A); display: block; font-size: .625rem; font-weight: 600; letter-spacing: .14em; margin-top: var(--bbtb-space-2, 8px); text-transform: uppercase; } /* --- Checklist -------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-checklist, .bbtb-app:not(#bbtb-cascade) .bbtb-steps { list-style: none; margin: 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-checklist__item, .bbtb-app:not(#bbtb-cascade) .bbtb-steps__item, .bbtb-app:not(#bbtb-cascade) .bbtb-checklist li { align-items: center; border-bottom: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); display: flex; gap: var(--bbtb-space-3, 12px); padding: var(--bbtb-space-3, 12px) 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-checklist__item:last-child, .bbtb-app:not(#bbtb-cascade) .bbtb-steps__item:last-child { border-bottom: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-checklist__mark { border: 2px solid var(--bbtb-line-strong, #C9C9C9); border-radius: var(--bbtb-radius, 2px); flex: 0 0 auto; height: 18px; position: relative; width: 18px; } .bbtb-app:not(#bbtb-cascade) .bbtb-checklist__item.is-done .bbtb-checklist__mark { background: var(--bbtb-accent, #F99D25); border-color: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-checklist__item.is-done .bbtb-checklist__mark::after { border: solid var(--bbtb-accent-ink, #0E0E0E); border-width: 0 2px 2px 0; content: ""; height: 9px; left: 4px; position: absolute; top: 1px; transform: rotate(45deg); width: 4px; } /** * An outstanding item is a link, but it is not link-coloured: eight orange * underlined lines read as a footer of links rather than as a list of jobs * to do. It takes ink like every other row and publishes `--bbtb-link` * rather than `color`, because the defensive reset pins `color` on `a`. * The chevron and the hover underline carry the affordance instead. */ .bbtb-app:not(#bbtb-cascade) .bbtb-checklist__label { color: var(--bbtb-ink, #0E0E0E); font-size: .9375rem; min-width: 0; --bbtb-label-size: .9375rem; --bbtb-link: var(--bbtb-ink, #0E0E0E); --bbtb-link-decoration: none; } /* * The whole row is the target, not just the words: an anchor around a * 26px line of text is under the 44px minimum on its own. The anchor is * deliberately NOT positioned, so `inset: 0` on its ::after resolves * against `.bbtb-checklist__item` and covers the padded row. */ .bbtb-app:not(#bbtb-cascade) a.bbtb-checklist__label::after { content: ""; inset: 0; position: absolute; } .bbtb-app:not(#bbtb-cascade) a.bbtb-checklist__label:hover { --bbtb-link-decoration: underline; } .bbtb-app:not(#bbtb-cascade) .bbtb-checklist__item.is-done .bbtb-checklist__label { color: var(--bbtb-body, #5A5A5A); } .bbtb-app:not(#bbtb-cascade) .bbtb-checklist__state { color: var(--bbtb-fine, #6E6E6E); font-size: .625rem; font-weight: 600; letter-spacing: .12em; margin-left: auto; padding-left: var(--bbtb-space-3, 12px); text-transform: uppercase; --bbtb-label-size: .625rem; --bbtb-label-color: var(--bbtb-fine, #6E6E6E); } .bbtb-app:not(#bbtb-cascade) .bbtb-checklist__state--todo { color: var(--bbtb-accent-dark, #9A6117); font-size: .875rem; letter-spacing: 0; --bbtb-label-color: var(--bbtb-accent-dark, #9A6117); } .bbtb-app:not(#bbtb-cascade) .bbtb-checklist__item { position: relative; } .bbtb-app:not(#bbtb-cascade) .bbtb-checklist__item:has(a):hover { background: rgba(14, 14, 14, .04); } /* --- Media manager ----------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-media__card, .bbtb-app:not(#bbtb-cascade) .bbtb-media__preview { position: relative; } .bbtb-app:not(#bbtb-cascade) .bbtb-media__image { display: block; height: auto; max-width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-media__empty, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery-empty { background: var(--bbtb-fill, #F5F5F5); color: var(--bbtb-body, #5A5A5A); font-size: .875rem; padding: var(--bbtb-space-6, 32px) var(--bbtb-space-4, 16px); text-align: center; } /** * The overview is four bands of its own — status, numbers, work, footer — * separated by real air rather than by the 24px that made the certification * card and the stat tiles read as one merged block. */ .bbtb-app.bbtb-overview:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-overview { display: block; } .bbtb-app.bbtb-overview:not(#bbtb-cascade) > * + *, .bbtb-app:not(#bbtb-cascade) .bbtb-overview > * + * { margin-top: var(--bbtb-space-7, 48px); } .bbtb-app:not(#bbtb-cascade) .bbtb-overview__work { align-items: stretch; display: grid; gap: var(--bbtb-space-5, 24px); grid-template-columns: 1fr; } /* * The two cards are different lengths by nature — one action against eight * checklist rows — so the shorter one stretches and parks its action at the * bottom rather than leaving a column of empty white beside the list. */ .bbtb-app:not(#bbtb-cascade) .bbtb-overview__work > .bbtb-card { display: flex; flex-direction: column; } .bbtb-app:not(#bbtb-cascade) .bbtb-overview__work > .bbtb-card > .bbtb-card__actions { margin-top: auto; padding-top: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-overview__work > .bbtb-card > .bbtb-checklist { margin-top: var(--bbtb-space-2, 8px); } /* A card inside the work grid is a grid item; the generic adjacency margin between two cards would double the grid gap. */ .bbtb-app:not(#bbtb-cascade) .bbtb-overview__work > .bbtb-card + .bbtb-card { margin-top: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-card__eyebrow { color: var(--bbtb-accent-dark, #9A6117); font-size: .625rem; font-weight: 600; letter-spacing: .16em; margin: 0 0 var(--bbtb-space-2, 8px); text-transform: uppercase; } @container bbtb-surface (min-width: 52rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-overview__work { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } } .bbtb-app.bbtb-login:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-login { margin: 0 auto; max-width: 460px; } .bbtb-app:not(#bbtb-cascade) .bbtb-login__card--join { margin-top: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-login__links { justify-content: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-login__link { font-size: .875rem; } @media (min-width: 900px) { .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__logo { height: 80px; width: 80px; } } /* ===================================================================== * 12. CERTIFICATION EXAM * * Two surfaces share this section. * * THE INTRO is a stack of full-bleed bands inside the plugin column: a * dark hero carrying the eyebrow, a mixed-weight headline, a one-line * standfirst and four stat tiles ruled apart by hairlines; a white band * with the syllabus as a grid of topic cards; a light grey band with the * four sequential steps; and a closing action band. Nothing on it is a * bulleted list, and the stat tiles in particular must never read as one — * that was the single loudest symptom of the cascade failure this section * was rewritten to fix. * * THE EXAM is a sticky dark app bar over one focused question card. The * bar holds the exam name, the counter and the timer chip, with the * progress bar flush along its bottom edge, and parks at * `--bbtb-sticky-offset` so a theme with its own floating header can push * it clear. The card is 760px, centred, white, hairline-bordered; the * answer rows are full-width 56px hit targets with a real custom control; * the question index is a grid of 44px squares behind a disclosure. * * The exam is a credential, so legibility outranks everything: answer text * is ink at 1rem, never accent; every state is carried by border and fill * together rather than colour alone; and every control has a visible * focus ring. * ================================================================== */ .bbtb-app.bbtb-quiz:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-quiz { margin: 0 auto; max-width: 1140px; } /* Results and the blocked notice are reading surfaces, not layouts. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__panel--results, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__panel--blocked { margin: 0 auto; max-width: 860px; } /* --------------------------------------------------------------------- * 12a. Intro — the dark hero band * ------------------------------------------------------------------ */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__hero { background: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; padding: var(--bbtb-space-7, 48px) var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__hero-inner { margin: 0 auto; max-width: 46rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__eyebrow { color: var(--bbtb-accent-dark, #9A6117); display: block; font-size: .75rem; font-weight: 600; letter-spacing: .18em; line-height: 1.4; margin: 0 0 var(--bbtb-space-4, 16px); text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__hero .bbtb-quiz__eyebrow { color: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__title { font-size: clamp(1.625rem, 4.4vw, 2.75rem); font-weight: 300; letter-spacing: -.01em; line-height: 1.12; margin: 0 0 var(--bbtb-space-4, 16px); text-wrap: balance; --bbtb-heading-tracking: -.01em; --bbtb-heading-leading: 1.12; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__title strong { font-weight: 700; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__hero .bbtb-quiz__title { color: #FFFFFF; --bbtb-heading-color: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__lede { font-size: 1.0625rem; line-height: 1.7; margin: 0; max-width: 38rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__hero .bbtb-quiz__lede { color: rgba(255, 255, 255, .78); } /* --- Stat tiles --------------------------------------------------------- * * A CSS grid of plain
s, ruled apart by hairlines. Deliberately not a * list: there is no order to these four numbers and nothing must be able to * put a marker in front of one. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__stats { border-top: var(--bbtb-hairline, 1px) solid rgba(255, 255, 255, .18); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--bbtb-space-7, 48px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__stat { border-bottom: var(--bbtb-hairline, 1px) solid rgba(255, 255, 255, .18); border-left: var(--bbtb-hairline, 1px) solid rgba(255, 255, 255, .18); min-width: 0; padding: var(--bbtb-space-5, 24px) var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__stat:nth-child(2n+1) { border-left: 0; padding-left: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__stat-value { color: #FFFFFF; display: block; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 300; letter-spacing: -.02em; line-height: 1; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__stat-label { color: rgba(255, 255, 255, .68); display: block; font-size: .625rem; font-weight: 600; letter-spacing: .16em; margin-top: var(--bbtb-space-2, 8px); text-transform: uppercase; } @media (min-width: 700px) { .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__stats { border-bottom: var(--bbtb-hairline, 1px) solid rgba(255, 255, 255, .18); grid-template-columns: repeat(4, minmax(0, 1fr)); } /* * The two-column rule above strips the left rule from every odd tile. That * selector carries a pseudo-class, so it outranks a bare .bbtb-quiz__stat * rule here and tile 3 would silently lose its divider at desktop. Restate * it at matching specificity rather than relying on source order. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__stat, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__stat:nth-child(2n+1) { border-bottom: 0; border-left: var(--bbtb-hairline, 1px) solid rgba(255, 255, 255, .18); padding-left: var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__stat:first-child { border-left: 0; padding-left: 0; } } /* --------------------------------------------------------------------- * 12b. Intro — bands, syllabus, steps, action block * ------------------------------------------------------------------ */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__section, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__cta { padding: var(--bbtb-space-7, 48px) var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__section--gray { background: var(--bbtb-band, #F2F2F2); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__section-inner { margin: 0 auto; max-width: 46rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__subtitle { color: var(--bbtb-ink, #0E0E0E); font-size: .75rem; font-weight: 600; letter-spacing: .16em; margin: 0 0 var(--bbtb-space-5, 24px); text-transform: uppercase; --bbtb-heading-transform: uppercase; --bbtb-heading-tracking: .16em; --bbtb-heading-leading: 1.4; --bbtb-heading-color: var(--bbtb-ink, #0E0E0E); } /** * The topic grid. Each card carries its own hairline rather than the grid * drawing rules through a coloured gap: with `auto-fit` the last row is * usually short, and a gap-drawn rule leaves a stripe of naked background * across the empty cells. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__topics { display: grid; gap: var(--bbtb-space-3, 12px); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); list-style: none; margin: 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__topic { align-items: flex-start; background: var(--bbtb-surface, #FFFFFF); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); border-radius: var(--bbtb-radius, 2px); display: flex; flex-direction: column; gap: var(--bbtb-space-3, 12px); min-width: 0; padding: var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__topic-name { color: var(--bbtb-ink, #0E0E0E); font-size: .9375rem; font-weight: 600; line-height: 1.35; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__chip { background: var(--bbtb-fill, #F5F5F5); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); border-radius: var(--bbtb-radius, 2px); color: var(--bbtb-body, #5A5A5A); display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; line-height: 1.6; margin-top: auto; padding: 1px var(--bbtb-space-2, 8px); white-space: nowrap; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__note { color: var(--bbtb-body, #5A5A5A); font-size: .875rem; line-height: 1.7; margin: var(--bbtb-space-5, 24px) 0 0; } /** * The four steps. Numbering is in the markup, not a CSS counter: a theme * that resets or increments its own list counters then has nothing of ours * to collide with, which is exactly the failure this rewrite fixes. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__steps { display: grid; gap: var(--bbtb-space-5, 24px); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__step { display: flex; gap: var(--bbtb-space-4, 16px); min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__step-number { color: var(--bbtb-accent-dark, #9A6117); flex: 0 0 auto; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; min-width: 1.2em; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__step-text { color: var(--bbtb-body, #5A5A5A); font-size: .9375rem; line-height: 1.65; margin: 0; min-width: 0; } @media (min-width: 700px) { .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__steps { gap: var(--bbtb-space-6, 32px) var(--bbtb-space-7, 48px); grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bbtb-space-3, 12px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__actions--results { justify-content: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__fineprint { color: var(--bbtb-body, #5A5A5A); font-size: .8125rem; line-height: 1.6; margin: var(--bbtb-space-4, 16px) 0 0; } /* --------------------------------------------------------------------- * 12c. Exam — the sticky app bar * ------------------------------------------------------------------ */ /** * --bbtb-sticky-offset is the distance from the top of the viewport at * which the bar parks. It is 0 here; the theme compatibility layer in * section 19 sets it for Salient's floating header, and a site can set it * once on `.bbtb-app` for any other theme without touching this file. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__appbar { background: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; position: sticky; top: var(--bbtb-sticky-offset, 0px); z-index: 30; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__appbar-inner { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bbtb-space-3, 12px); justify-content: space-between; margin: 0 auto; max-width: 1140px; padding: var(--bbtb-space-3, 12px) var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__appbar-name { color: rgba(255, 255, 255, .66); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; line-height: 1.5; margin: 0; min-width: 0; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__appbar-meta { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bbtb-space-3, 12px); margin-left: auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__progress-label { color: #FFFFFF; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; margin: 0; white-space: nowrap; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__progress-track { background: rgba(255, 255, 255, .18); display: block; height: 3px; overflow: hidden; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__progress-fill { background: var(--bbtb-accent, #F99D25); display: block; height: 100%; transition: width var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease); } /* The timer reads as a chip sitting on the dark bar. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__timer, .bbtb-app:not(#bbtb-cascade) .bbtb-timer-wrap { align-items: baseline; background: rgba(255, 255, 255, .1); border: var(--bbtb-hairline, 1px) solid rgba(255, 255, 255, .28); border-radius: var(--bbtb-radius, 2px); display: flex; flex: 0 0 auto; gap: var(--bbtb-space-2, 8px); padding: var(--bbtb-space-1, 4px) var(--bbtb-space-3, 12px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__timer-label { color: rgba(255, 255, 255, .72); font-size: .5625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__timer-value, .bbtb-app:not(#bbtb-cascade) .bbtb-timer { font-size: 1.0625rem; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; } /** * The two states bbtb-quiz.js actually writes on the timer wrapper. * `is-warning` goes on inside the last two minutes; `is-expired` when the * clock reaches zero. These class names are the contract — do not rename * them to is-low without changing the script. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__timer.is-warning, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__timer.is-low { background: var(--bbtb-accent, #F99D25); border-color: var(--bbtb-accent, #F99D25); color: var(--bbtb-accent-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__timer.is-warning .bbtb-quiz__timer-label, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__timer.is-low .bbtb-quiz__timer-label { color: rgba(14, 14, 14, .78); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__timer.is-expired { background: var(--bbtb-error, #B3261E); border-color: var(--bbtb-error, #B3261E); color: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__timer.is-expired .bbtb-quiz__timer-label { color: rgba(255, 255, 255, .84); } /* Legacy header block, kept for any theme override still rendering it. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__bar, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__header { align-items: center; background: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; display: flex; flex-wrap: wrap; gap: var(--bbtb-space-4, 16px); justify-content: space-between; padding: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__bar h2, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__bar h3, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__header h2 { color: #FFFFFF; font-size: 1.125rem; font-weight: 400; margin: 0; --bbtb-heading-color: #FFFFFF; } /* --------------------------------------------------------------------- * 12d. Exam — the question card * ------------------------------------------------------------------ */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__stage { margin: 0 auto; max-width: 1140px; padding: var(--bbtb-space-6, 32px) var(--bbtb-space-4, 16px) var(--bbtb-space-8, 64px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__question { background: var(--bbtb-surface, #FFFFFF); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); margin: 0 auto; max-width: 760px; padding: var(--bbtb-space-5, 24px); } /* The card takes focus after every navigation step; it is a container, so the ring goes just outside its own border rather than inside it. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__question:focus { outline: none; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__question:focus-visible { outline: 2px solid var(--bbtb-accent, #F99D25); outline-offset: 3px; } @media (min-width: 700px) { .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__question { padding: var(--bbtb-space-7, 48px); } } /* The category, as a quiet chip rather than a coloured label. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__question-topic { background: var(--bbtb-fill, #F5F5F5); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); border-radius: var(--bbtb-radius, 2px); color: var(--bbtb-body, #5A5A5A); display: inline-block; font-size: .625rem; font-weight: 600; letter-spacing: .16em; margin: 0 0 var(--bbtb-space-4, 16px); padding: 2px var(--bbtb-space-2, 8px); text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__question legend, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__question-text { color: var(--bbtb-ink, #0E0E0E); font-size: clamp(1.125rem, 2.6vw, 1.5rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; margin: 0 0 var(--bbtb-space-5, 24px); padding: 0; text-wrap: pretty; --bbtb-heading-tracking: -.01em; --bbtb-heading-leading: 1.35; --bbtb-heading-color: var(--bbtb-ink, #0E0E0E); } /* --- Answer rows ------------------------------------------------------- * * bbtb-quiz.js builds each answer as * li.bbtb-quiz__answer > label.bbtb-quiz__answer-label > input + span * so the box is the
  • and the clickable row is the
  • carries the border and * the selected fill. Nothing hangs off the
  • 's own ::before/::after — * the defensive reset kills those outright to stop a theme drawing list * markers there. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answers { display: grid; gap: var(--bbtb-space-2, 8px); list-style: none; margin: 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer { background: var(--bbtb-surface, #FFFFFF); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line-strong, #C9C9C9); border-radius: var(--bbtb-radius, 2px); margin: 0; transition: background-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), border-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), box-shadow var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer-label { align-items: center; color: var(--bbtb-ink, #0E0E0E); cursor: pointer; display: flex; gap: var(--bbtb-space-4, 16px); min-height: 56px; padding: var(--bbtb-space-3, 12px) var(--bbtb-space-4, 16px); width: 100%; --bbtb-label-color: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer:hover { background: var(--bbtb-fill, #F5F5F5); border-color: var(--bbtb-body, #5A5A5A); } /** * Selected. Border and fill together, never colour alone, and the wash is * light enough that ink text on it still clears AA at 13:1. The extra * weight is drawn with an inset shadow rather than a thicker border so the * row does not shift by a pixel when it is chosen. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer.is-selected, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer:focus-within { background: var(--bbtb-accent-tint, #FEEBD2); border-color: var(--bbtb-accent, #F99D25); box-shadow: inset 0 0 0 1px var(--bbtb-accent, #F99D25); } /* The answer text is ink. It is never the accent, at any size: this is a credential and the words are the thing being read. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer-text { color: var(--bbtb-ink, #0E0E0E); font-size: 1rem; font-weight: 400; line-height: 1.5; min-width: 0; } /** * The control. A native input with its appearance removed, so it keeps * every keyboard and assistive-technology behaviour it was born with — * arrow keys across a radio group, space on a checkbox, the right role. * * Round for single-answer, square for multi. On the exam this is * load-bearing: two questions look identical apart from this control, so * if both render as a filled square a candidate cannot tell "pick one" * from "pick all that apply". Never collapse the two treatments together. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer .bbtb-quiz__answer-input { box-shadow: none; cursor: pointer; display: block; flex: 0 0 auto; height: 22px; margin: 0; min-width: 0; opacity: 1; padding: 0; position: relative; transition: background-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), border-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); width: 22px; --bbtb-check-fill: var(--bbtb-surface, #FFFFFF); --bbtb-check-border: 2px solid var(--bbtb-body, #5A5A5A); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer .bbtb-quiz__answer-input[type="radio"] { --bbtb-check-radius: 50%; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer .bbtb-quiz__answer-input:checked { --bbtb-check-border: 2px solid var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer .bbtb-quiz__answer-input[type="checkbox"]:checked { --bbtb-check-fill: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer .bbtb-quiz__answer-input[type="checkbox"]:checked::after { border: solid var(--bbtb-accent-ink, #0E0E0E); border-width: 0 2px 2px 0; content: ""; height: 11px; left: 6px; position: absolute; top: 1px; transform: rotate(45deg); width: 5px; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer .bbtb-quiz__answer-input[type="radio"]:checked::after { background: var(--bbtb-accent, #F99D25); border-radius: 50%; content: ""; inset: 3px; position: absolute; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer .bbtb-quiz__answer-input:focus-visible { outline: 2px solid var(--bbtb-accent, #F99D25); outline-offset: 3px; } /* --- Errors and the action row ----------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__error { background: var(--bbtb-error-bg, #FBEAE9); border-left: 4px solid var(--bbtb-error, #B3261E); color: var(--bbtb-error, #B3261E); font-size: .875rem; font-weight: 600; margin: var(--bbtb-space-4, 16px) auto 0; max-width: 760px; padding: var(--bbtb-space-3, 12px) var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__nav { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bbtb-space-3, 12px); justify-content: space-between; margin: var(--bbtb-space-5, 24px) auto 0; max-width: 760px; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__nav-end { display: flex; flex-wrap: wrap; gap: var(--bbtb-space-3, 12px); margin-left: auto; } /** * Submit is quiet until it matters. bbtb-quiz.js reveals it on the last * question or as soon as every question is answered, and adds `is-ready` * only in the second case — so it never sits next to Next as an equal * from question one. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__submit { background: transparent; border: var(--bbtb-hairline, 1px) solid var(--bbtb-line-strong, #C9C9C9); color: var(--bbtb-body, #5A5A5A); --bbtb-btn-ink: var(--bbtb-body, #5A5A5A); --bbtb-state: #0E0E0E; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__submit.is-ready { background: var(--bbtb-accent, #F99D25); border-color: var(--bbtb-accent, #F99D25); color: var(--bbtb-accent-ink, #0E0E0E); --bbtb-btn-ink: var(--bbtb-accent-ink, #0E0E0E); } /* --------------------------------------------------------------------- * 12e. Exam — the question index * ------------------------------------------------------------------ */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index { margin: var(--bbtb-space-6, 32px) auto 0; max-width: 760px; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-toggle { align-items: center; background: var(--bbtb-surface, #FFFFFF); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); border-radius: var(--bbtb-radius, 2px); color: var(--bbtb-ink, #0E0E0E); cursor: pointer; display: flex; font-family: inherit; font-size: 1rem; gap: var(--bbtb-space-3, 12px); min-height: 48px; padding: var(--bbtb-space-2, 8px) var(--bbtb-space-4, 16px); text-align: left; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-toggle:hover { background: var(--bbtb-fill, #F5F5F5); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-toggle-label { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-status { color: var(--bbtb-body, #5A5A5A); font-size: .8125rem; margin: 0 0 0 auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-caret { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; display: block; flex: 0 0 auto; height: 8px; margin-top: -4px; transform: rotate(45deg); transition: transform var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); width: 8px; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-toggle[aria-expanded="true"] .bbtb-quiz__index-caret { margin-top: 4px; transform: rotate(-135deg); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-body { border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); border-top: 0; padding: var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-title { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; margin: 0 0 var(--bbtb-space-3, 12px); text-transform: uppercase; --bbtb-heading-transform: uppercase; --bbtb-heading-tracking: .14em; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-grid, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__grid { display: grid; gap: var(--bbtb-space-2, 8px); grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); list-style: none; margin: 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-item { display: block; margin: 0; min-width: 0; } /** * Three states, each unmistakable without relying on colour alone: * unanswered is an outline, answered is filled dark, current is ringed in * accent. Answered-and-current keeps the dark fill and gains the ring. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-btn, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__grid button { background: var(--bbtb-surface, #FFFFFF); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line-strong, #C9C9C9); border-radius: var(--bbtb-radius, 2px); color: var(--bbtb-ink, #0E0E0E); cursor: pointer; font-family: inherit; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; height: 44px; min-height: 44px; padding: 0; transition: background-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), border-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-btn:hover, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__grid button:hover { background: var(--bbtb-fill, #F5F5F5); border-color: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-btn.is-answered, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__grid button.is-answered { background: var(--bbtb-ink, #0E0E0E); border-color: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-btn.is-current, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__grid button.is-current { border-color: var(--bbtb-accent, #F99D25); box-shadow: inset 0 0 0 2px var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-legend { color: var(--bbtb-body, #5A5A5A); display: flex; flex-wrap: wrap; font-size: .6875rem; gap: var(--bbtb-space-4, 16px); margin: var(--bbtb-space-4, 16px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-key { align-items: center; display: inline-flex; gap: var(--bbtb-space-2, 8px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-key::before { border-radius: var(--bbtb-radius, 2px); content: ""; display: block; flex: 0 0 auto; height: 12px; width: 12px; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-key--todo::before { background: var(--bbtb-surface, #FFFFFF); box-shadow: inset 0 0 0 1px var(--bbtb-line-strong, #C9C9C9); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-key--done::before { background: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-key--now::before { background: var(--bbtb-surface, #FFFFFF); box-shadow: inset 0 0 0 2px var(--bbtb-accent, #F99D25); } /* --------------------------------------------------------------------- * 12f. Result, breakdown, review, blocked * ------------------------------------------------------------------ */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__result-head { padding: var(--bbtb-space-7, 48px) 0; text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-score-ring { align-items: center; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; margin: 0 auto var(--bbtb-space-5, 24px); max-width: 190px; position: relative; width: 100%; } /* The knock-out centre belongs to the conic variant only; an SVG ring draws its own hole and must not be covered. */ .bbtb-app:not(#bbtb-cascade) .bbtb-score-ring--conic::before { background: var(--bbtb-surface, #FFFFFF); border-radius: 50%; content: ""; inset: 12px; position: absolute; } .bbtb-app:not(#bbtb-cascade) .bbtb-score-ring > * { position: relative; } .bbtb-app:not(#bbtb-cascade) .bbtb-score-ring__svg { height: 100%; inset: 0; position: absolute; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-score-ring__track { stroke: var(--bbtb-line, #E2E2E2); } /* stroke-dasharray and stroke-dashoffset are set inline by PHP and JS — never declare them here. */ .bbtb-app:not(#bbtb-cascade) .bbtb-score-ring__arc { stroke: var(--bbtb-accent, #F99D25); transition: stroke-dashoffset var(--bbtb-dur-3, 350ms) var(--bbtb-ease, ease); } /** * A pass is orange. Orange is this brand's success signal; green appears * nowhere else on the front end, and introducing it here for one arc would * make it read as a different system. --bbtb-success stays reserved for the * semantic success notice. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__panel--pass .bbtb-score-ring__arc, .bbtb-app:not(#bbtb-cascade) .bbtb-result--pass .bbtb-score-ring__arc { stroke: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__panel--fail .bbtb-score-ring__arc, .bbtb-app:not(#bbtb-cascade) .bbtb-result--fail .bbtb-score-ring__arc { stroke: var(--bbtb-error, #B3261E); } /** * The value and its caption are the ring's whole centre. Both margins are * zeroed — a UA `p` margin of 1em on a 2.75rem number is 44px, which pushes * the caption down onto the arc stroke at the bottom of the circle. */ .bbtb-app:not(#bbtb-cascade) .bbtb-score-ring__value, .bbtb-app:not(#bbtb-cascade) .bbtb-score-value { font-size: 2.75rem; font-weight: 300; letter-spacing: -.03em; line-height: 1; margin: 0; text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-score-ring__caption, .bbtb-app:not(#bbtb-cascade) .bbtb-score-ring__label { color: var(--bbtb-body, #5A5A5A); font-size: .625rem; font-weight: 600; letter-spacing: .14em; margin: var(--bbtb-space-2, 8px) 0 0; max-width: 62%; text-align: center; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__result-headline, .bbtb-app:not(#bbtb-cascade) .bbtb-result-headline { font-size: clamp(1.5rem, 4vw, 2.25rem); margin: 0 0 var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__result-message, .bbtb-app:not(#bbtb-cascade) .bbtb-result-message { color: var(--bbtb-body, #5A5A5A); margin: 0 auto; max-width: 40rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__result-note, .bbtb-app:not(#bbtb-cascade) .bbtb-result-note { color: var(--bbtb-body, #5A5A5A); font-size: .8125rem; margin: var(--bbtb-space-4, 16px) auto 0; max-width: 40rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-result { border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); border-top: 4px solid var(--bbtb-line-strong, #C9C9C9); padding: var(--bbtb-space-7, 48px) var(--bbtb-space-5, 24px); text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-result--pass { border-top-color: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-result--fail { border-top-color: var(--bbtb-error, #B3261E); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__breakdown, .bbtb-app:not(#bbtb-cascade) .bbtb-breakdown { margin: var(--bbtb-space-7, 48px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__breakdown-list { list-style: none; margin: 0; padding: 0; } /** * One topic row. bbtb-quiz.js builds it as * * li.bbtb-quiz__breakdown-item * div.bbtb-quiz__breakdown-head (label + score) * div.bbtb-quiz__breakdown-track (fill) * * so the CSS owns that wrapper: head is the top line, track is beneath it * at full width. Do not reintroduce a grid that expects label, score and * track as three direct children — they are not. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__breakdown-item { border-bottom: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); display: block; margin: 0; padding: var(--bbtb-space-3, 12px) 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__breakdown-head { align-items: baseline; display: flex; gap: var(--bbtb-space-4, 16px); justify-content: space-between; letter-spacing: normal; margin: 0 0 var(--bbtb-space-2, 8px); text-transform: none; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__breakdown-label { color: var(--bbtb-ink, #0E0E0E); font-size: .9375rem; font-weight: 600; min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__breakdown-score { color: var(--bbtb-body, #5A5A5A); flex: 0 0 auto; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__breakdown-track { background: var(--bbtb-line, #E2E2E2); display: block; height: 4px; overflow: hidden; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__breakdown-fill { background: var(--bbtb-accent, #F99D25); display: block; height: 100%; transition: width var(--bbtb-dur-3, 350ms) var(--bbtb-ease, ease); } /* A topic answered without a miss. The score reads in the accent's dark step. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__breakdown-item.is-perfect .bbtb-quiz__breakdown-score { color: var(--bbtb-accent-dark, #9A6117); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__breakdown-item.is-perfect .bbtb-quiz__breakdown-track { background: var(--bbtb-accent-tint, #FEEBD2); } /* * Two different lists share the word "review": the exam's missed-question * list (.bbtb-quiz__review-list) and the profile sidebar's list of review * platforms (.bbtb-review, which also carries .bbtb-profile__links and * takes that treatment). Only the first wants the coloured left rule. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review { margin: var(--bbtb-space-7, 48px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-list, .bbtb-app:not(#bbtb-cascade) .bbtb-review { list-style: none; margin: 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-list { --bbtb-list-flow: var(--bbtb-space-4, 16px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__result-copy { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-item { border-left: 3px solid var(--bbtb-line-strong, #C9C9C9); margin: 0 0 var(--bbtb-space-4, 16px); padding: var(--bbtb-space-1, 4px) 0 var(--bbtb-space-1, 4px) var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-item.is-wrong { border-left-color: var(--bbtb-error, #B3261E); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-item.is-right { border-left-color: var(--bbtb-success, #1B7A43); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-topic { color: var(--bbtb-body, #5A5A5A); display: block; font-size: .625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-question { font-weight: 600; margin: var(--bbtb-space-2, 8px) 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-key { color: var(--bbtb-body, #5A5A5A); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-value { font-size: .9375rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-given { color: var(--bbtb-error, #B3261E); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-correct { color: var(--bbtb-success, #1B7A43); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-explanation { color: var(--bbtb-body, #5A5A5A); font-size: .875rem; margin: var(--bbtb-space-2, 8px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__review-note { color: var(--bbtb-body, #5A5A5A); font-size: .8125rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz--blocked .bbtb-quiz__panel--blocked { padding: var(--bbtb-space-7, 48px) var(--bbtb-space-4, 16px); text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__blocked-mark { color: var(--bbtb-accent-dark, #9A6117); display: block; margin: 0 auto var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__blocked-mark svg { height: 48px; width: auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__countdown, .bbtb-app:not(#bbtb-cascade) .bbtb-countdown { background: var(--bbtb-band, #F2F2F2); display: inline-flex; flex-direction: column; gap: var(--bbtb-space-1, 4px); margin: var(--bbtb-space-5, 24px) 0; padding: var(--bbtb-space-4, 16px) var(--bbtb-space-6, 32px); text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__countdown-value { font-size: 2rem; font-variant-numeric: tabular-nums; font-weight: 300; line-height: 1; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__countdown-label { color: var(--bbtb-body, #5A5A5A); font-size: .625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__status-line { display: flex; flex-wrap: wrap; gap: var(--bbtb-space-2, 8px); justify-content: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__status-label { color: var(--bbtb-body, #5A5A5A); font-size: .8125rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__status-value { font-size: .8125rem; font-weight: 600; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__cert-item { border-bottom: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); display: flex; flex-wrap: wrap; gap: var(--bbtb-space-3, 12px); justify-content: space-between; margin: 0; padding: var(--bbtb-space-3, 12px) 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__cert-meta { list-style: none; padding: 0; --bbtb-list-flow: var(--bbtb-space-5, 24px) 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-certification__actions { justify-content: flex-start; } /* --- Small screens ------------------------------------------------------ */ @media (max-width: 599px) { .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__appbar-name { flex: 1 1 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__appbar-meta { margin-left: 0; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__nav { flex-direction: column; align-items: stretch; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__nav-end { margin-left: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__nav .bbtb-btn, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__nav-end .bbtb-btn { justify-content: center; width: 100%; } } /* ===================================================================== * 13. LOCATOR * * The search sits on a dark band in the site's hero idiom; results and * map share a two-column layout from 900px. Below that the JS toggles * bbtb-locator--show-map / --show-list on the root. * ================================================================== */ .bbtb-app.bbtb-locator:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-locator { display: block; position: relative; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__search { display: grid; gap: var(--bbtb-space-4, 16px); grid-template-columns: 1fr; margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field { margin: 0; position: relative; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field--term { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field--radius, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field--service { min-width: 8rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field--submit { align-self: end; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field--toggle { align-self: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__input-wrap { position: relative; } /* Leave room for the geolocate button that sits inside the field. Padding is pinned by the reset, so the room is asked for as --bbtb-control-pad. */ .bbtb-app:not(#bbtb-cascade) .bbtb-locator__input-wrap .bbtb-locator__input { --bbtb-control-pad: var(--bbtb-space-5, 24px) var(--bbtb-space-8, 64px) var(--bbtb-space-2, 8px) var(--bbtb-space-3, 12px); } /* "Use my location" sits inside the field, right-aligned. */ /* * "Use my location" runs the full height of the field, which is what makes * it a 46px target. It used to print through the "ZIP code or city" label * whenever the field was narrow enough to bring the two together; that was * the four-up search row being laid out in a 620px theme column, and it is * fixed at the container query rather than here. */ .bbtb-app:not(#bbtb-cascade) .bbtb-locator__geo { align-items: center; background: transparent; border: 0; border-left: var(--bbtb-hairline, 1px) solid var(--bbtb-line-strong, #C9C9C9); bottom: 1px; color: var(--bbtb-accent-dark, #9A6117); cursor: pointer; display: flex; font-family: inherit; font-size: .625rem; font-weight: 600; gap: var(--bbtb-space-1, 4px); letter-spacing: .1em; padding-inline: var(--bbtb-space-3, 12px); position: absolute; right: 0; text-transform: uppercase; top: 1px; transition: color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__geo:hover { color: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__geo-icon { font-size: 1rem; line-height: 1; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__geo-text { display: none; } /* --- The dark search band --------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-locator__hero { background: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; } /** * The controls on the dark band are solid light boxes with near-black text — * the same treatment the homepage gives a form field on a dark hero, and the * same one the band's primary button already takes. * * The band used to invert them instead: a translucent white fill with white * text. That treatment is only ever one declaration away from unreadable, * because it needs a rule the plugin does not own to hold. Against a theme * that pins `background-color: #fff !important` on every field from an * id-prefixed selector, the fill was the theme's and the ink was ours, and * the whole search row went white on white. A solid light control is legible * whichever side of that argument wins. * * Fill, ink, underline, placeholder and hover fill are published together as * custom properties, so the reset applies them as one pinned pair. Nothing * here sets `background` or `color` on a control. * * The chevron needs no rule at all: --bbtb-control-layers is declared once, * in terms of --bbtb-control-ink, so it follows the text colour by * construction and can never be left dark on a dark fill or light on a light * one. * * The floating label sits inside the control's box, not on the band, so it * takes the control's ground too — which is the default, and why there is no * label rule here any more. */ .bbtb-app:not(#bbtb-cascade) .bbtb-locator__hero .bbtb-locator__input, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__hero .bbtb-locator__select, .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-locator__input, .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-locator__select, .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-field input, .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-field select, .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark .bbtb-field textarea, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__hero .bbtb-field input, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__hero .bbtb-field select { --bbtb-control-fill: var(--bbtb-surface, #FFFFFF); --bbtb-control-fill-hover: #EDEDED; --bbtb-control-ink: var(--bbtb-ink, #0E0E0E); --bbtb-control-rule: var(--bbtb-body, #5A5A5A); --bbtb-control-hint: var(--bbtb-body, #5A5A5A); } /* * "Use my location" sits inside the ZIP field, so it is on the control's * ground and keeps the light-surface treatment the base rule gives it. The * band no longer recolours it: the accent it used to take reads at about * 2:1 against a white field. */ .bbtb-app:not(#bbtb-cascade) .bbtb-locator__hero .bbtb-locator__toggle-text { color: rgba(255, 255, 255, .85); --bbtb-label-color: rgba(255, 255, 255, .85); } /* --- Status bar --------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-locator__bar { align-items: center; border-bottom: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); display: flex; flex-wrap: wrap; gap: var(--bbtb-space-4, 16px); justify-content: space-between; margin: 0 0 var(--bbtb-space-6, 32px); padding: var(--bbtb-space-4, 16px) 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__prompt, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__empty, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__empty-text, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__map-notice { color: var(--bbtb-body, #5A5A5A); font-size: .875rem; margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__status { color: var(--bbtb-ink, #0E0E0E); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; margin: 0; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__status:empty { display: none; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__view-toggle { display: flex; gap: var(--bbtb-space-1, 4px); } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__empty { background: var(--bbtb-fill, #F5F5F5); padding: var(--bbtb-space-7, 48px) var(--bbtb-space-5, 24px); text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__prompt { padding: var(--bbtb-space-7, 48px) 0; text-align: center; } /* Loading state dims the results without moving anything. */ .bbtb-app.bbtb-locator.is-loading:not(#bbtb-cascade) .bbtb-locator__results, .bbtb-app:not(#bbtb-cascade) .bbtb-locator.is-loading .bbtb-locator__results { opacity: .45; pointer-events: none; transition: opacity var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease); } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__layout { display: block; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__results { list-style: none; margin: 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__more-wrap { margin-top: var(--bbtb-space-5, 24px); text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__map { background: var(--bbtb-band, #F2F2F2); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); min-height: 320px; position: relative; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__map-notice { background: var(--bbtb-warning-bg, #FCF3E0); border-left: 4px solid var(--bbtb-accent, #F99D25); padding: var(--bbtb-space-5, 24px); } /** * The view modifiers all sit on the locator's own root element, which is * the `.bbtb-app` — `bbtb-app bbtb-locator bbtb-locator--split * bbtb-locator--no-map` — so each one needs the self form * `.bbtb-app.bbtb-locator--x` as well as the descendant form. Written as a * descendant rule alone these never match, which is what left the results * column stranded in half the row with the map column absent, and what * stopped the mobile List / Map toggle doing anything at all. */ /* Mobile map/list toggle. */ .bbtb-app.bbtb-locator--show-map:not(#bbtb-cascade) .bbtb-locator__results-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--show-map .bbtb-locator__results-col { display: none; } .bbtb-app.bbtb-locator--show-list:not(#bbtb-cascade) .bbtb-locator__map-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--show-list .bbtb-locator__map-col { display: none; } /** * The three view modes the shortcode writes on the root: `--split` (the * default, and what [bbtb_locator] emits unless told otherwise), `--map` * and `--list`. In a narrow container every mode is a single column * anyway, so all three behave the same here; the difference is in the * wide-container block near the end of this section. */ .bbtb-app.bbtb-locator--split:not(#bbtb-cascade), .bbtb-app.bbtb-locator--map:not(#bbtb-cascade), .bbtb-app.bbtb-locator--list:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-locator--split, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--map, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--list { display: block; } .bbtb-app.bbtb-locator--list:not(#bbtb-cascade) .bbtb-locator__map-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--list .bbtb-locator__map-col { display: none; } /* --- Result card --------------------------------------------------------- */ /** * The card is a grid, not a stack. * * Three children in source order — media, body, actions — laid out as * `[media] [body]` with the actions under the body in a narrow container, * and as `[media] [body] [actions]` once there is room. Written as a stack * the position chip, the logo, the name and two buttons each took a line of * their own and four results ran to two screens; as a grid the list scans. */ .bbtb-app.bbtb-result-card:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-result-card { background: var(--bbtb-surface, #FFFFFF); border: 0; border-bottom: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); border-left: 3px solid transparent; column-gap: var(--bbtb-space-4, 16px); cursor: pointer; display: grid; font-family: inherit; grid-template-columns: auto minmax(0, 1fr); isolation: isolate; margin: 0; padding: var(--bbtb-space-5, 24px) var(--bbtb-space-4, 16px); position: relative; row-gap: var(--bbtb-space-4, 16px); text-align: left; transition: border-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); width: 100%; --bbtb-state: #0E0E0E; } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__actions { grid-column: 1 / -1; margin: 0; } .bbtb-app.bbtb-result-card:not(#bbtb-cascade)::after, .bbtb-app:not(#bbtb-cascade) .bbtb-result-card::after { background: var(--bbtb-state, #0E0E0E); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); z-index: -1; } .bbtb-app.bbtb-result-card:not(#bbtb-cascade):hover::after, .bbtb-app:not(#bbtb-cascade) .bbtb-result-card:hover::after { opacity: var(--bbtb-state-hover, .06); } .bbtb-app.bbtb-result-card:not(#bbtb-cascade):active::after, .bbtb-app:not(#bbtb-cascade) .bbtb-result-card:active::after { opacity: var(--bbtb-state-press, .14); } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card--active, .bbtb-app.bbtb-result-card.is-active:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-result-card.is-active { background: var(--bbtb-accent-tint, #FEEBD2); border-left-color: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card--certified { border-left-color: var(--bbtb-accent, #F99D25); } /* The position chip sits on the logo's corner, not on a line of its own. */ .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__media { align-self: start; position: relative; } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__index { align-items: center; background: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; display: inline-flex; font-size: .625rem; font-weight: 700; height: 20px; inset-block-start: -6px; inset-inline-start: -6px; justify-content: center; position: absolute; width: 20px; z-index: 1; } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__logo { border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); display: block; height: 56px; object-fit: contain; width: 56px; } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__logo--placeholder { align-items: center; background: var(--bbtb-fill, #F5F5F5); color: var(--bbtb-body, #5A5A5A); display: inline-flex; font-size: 1.25rem; font-weight: 700; justify-content: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__body { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__title { font-size: 1.0625rem; font-weight: 600; margin: 0; } /** * The company name is the card's headline, not a link in link colour. * * It has to publish `--bbtb-link` rather than set `color`: the defensive * reset pins `color` on every `a` with `!important`, so a plain `color` * declaration loses and the title takes the ambient link orange instead. * Every rule in this file that colours an anchor works this way. */ .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__title a, .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__link { color: var(--bbtb-ink, #0E0E0E); --bbtb-link: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__link:hover { --bbtb-link: var(--bbtb-accent-dark, #9A6117); --bbtb-link-decoration: underline; } /** * One meta line: the distance, then the town. * * Separated by a gap and by their own treatment — the distance is orange * uppercase, the town is grey sentence case — rather than by a drawn * divider. Every divider that can be drawn between two flex items, whether * as a pseudo-element or as a leading border, ends up at the start of a * wrapped line and prints a stray rule under the company name, which is * exactly what a 360px column does to this row. */ .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__meta { align-items: baseline; color: var(--bbtb-body, #5A5A5A); display: flex; flex-wrap: wrap; font-size: .8125rem; gap: var(--bbtb-space-1, 4px) var(--bbtb-space-3, 12px); margin: var(--bbtb-space-2, 8px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__location { color: var(--bbtb-body, #5A5A5A); } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__distance { color: var(--bbtb-accent-dark, #9A6117); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } /** * The excerpt is trimmed to three lines so a wordy listing cannot push the * next contractor off the screen. `-webkit-line-clamp` is the only * cross-browser form of this and is supported everywhere the plugin runs. */ .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__excerpt { color: var(--bbtb-body, #5A5A5A); display: -webkit-box; -webkit-box-orient: vertical; font-size: .875rem; -webkit-line-clamp: 3; line-clamp: 3; margin: var(--bbtb-space-3, 12px) 0 0; overflow: hidden; } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__services { --bbtb-list-flow: var(--bbtb-space-3, 12px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__badge { align-items: center; color: var(--bbtb-ink, #0E0E0E); display: flex; font-size: .6875rem; font-weight: 700; gap: var(--bbtb-space-1, 4px); letter-spacing: .08em; margin: var(--bbtb-space-2, 8px) 0 0; text-transform: uppercase; } /* The deep step, not the pure accent: this mark sits on white. */ .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__bolt { color: var(--bbtb-accent-dark, #9A6117); font-size: .875rem; } /* --- Map info window ----------------------------------------------------- */ .bbtb-app.bbtb-infowindow:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-infowindow { font-family: var(--bbtb-font, "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif); font-size: .875rem; line-height: 1.5; max-width: 260px; padding: var(--bbtb-space-1, 4px); } .bbtb-app:not(#bbtb-cascade) .bbtb-infowindow__head { align-items: center; display: flex; gap: var(--bbtb-space-2, 8px); } .bbtb-app:not(#bbtb-cascade) .bbtb-infowindow__logo { height: 32px; object-fit: contain; width: 32px; } .bbtb-app:not(#bbtb-cascade) .bbtb-infowindow__title { font-size: .9375rem; font-weight: 700; margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-infowindow__location { color: #5A5A5A; font-size: .75rem; margin: 2px 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-infowindow__distance { color: #9A6117; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-infowindow__phone, .bbtb-app:not(#bbtb-cascade) .bbtb-infowindow__link { display: block; margin-top: var(--bbtb-space-2, 8px); } .bbtb-app:not(#bbtb-cascade) .bbtb-infowindow__link { background: #F99D25; color: #0E0E0E; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; padding: var(--bbtb-space-2, 8px) var(--bbtb-space-3, 12px); text-align: center; text-decoration: none; text-transform: uppercase; } /** * The locator's breakpoints are container breakpoints, not viewport ones. * * A four-field search row and a two-column results/map split need about * 620px and 820px of *room*, and the amount of room a shortcode gets is * decided by the theme's column, not by the size of the window. On a * 1440px screen whose theme column is 700px wide, a viewport media query * says "wide" and lays out four fields in 650px: the radius select reads * "50 mile", the service select reads "All serv", and "Use my location" * prints straight through the ZIP label. The container query asks the only * question that matters — how wide is this locator — so the same markup is * correct in a full-bleed page and in a narrow blog measure. * * A browser without container query support gets the single-column stack, * which is the mobile layout and is entirely usable. */ .bbtb-app.bbtb-locator:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-locator { container-name: bbtb-locator; container-type: inline-size; } /* Two rows: the ZIP box over the radius, the service and the button. */ @container bbtb-locator (min-width: 34rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-locator__search { align-items: end; grid-template-columns: repeat(2, minmax(0, 1fr)); } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field--term, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field--submit { grid-column: 1 / -1; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field--submit .bbtb-btn { justify-content: center; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__geo-text { display: inline; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__input-wrap .bbtb-locator__input { --bbtb-control-pad: var(--bbtb-space-5, 24px) 10.5rem var(--bbtb-space-2, 8px) var(--bbtb-space-3, 12px); } } /** * One row. 46rem, not 620px: at 620 the radius select showed "50 mile" and * the service select "All serv", because the four tracks were being asked to * share a container the width of a blog measure. The threshold is the width * at which the longest option label — "All services" — still fits its track. */ @container bbtb-locator (min-width: 46rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-locator__search { grid-template-columns: 2fr 1fr auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__search:has(.bbtb-locator__field--service) { grid-template-columns: 2fr 1fr 1fr auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field--term, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field--submit { grid-column: auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__field--submit .bbtb-btn { width: auto; } } /** * The result card has its own container so it reads correctly wherever it * is placed — the locator's list column is narrower than the locator, and a * card dropped into a sidebar by a page builder is narrower still. */ .bbtb-app.bbtb-result-card:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-result-card { container-name: bbtb-result-card; container-type: inline-size; } @container bbtb-result-card (min-width: 30rem) { /* Actions move into a third column and the card becomes one scannable row. */ .bbtb-app.bbtb-result-card:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-result-card { grid-template-columns: auto minmax(0, 1fr) minmax(8.5rem, auto); padding-inline: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__actions { align-content: start; align-items: stretch; flex-direction: column; grid-column: 3; grid-row: 1 / -1; } .bbtb-app:not(#bbtb-cascade) .bbtb-result-card__actions .bbtb-btn { justify-content: center; width: 100%; } } @container bbtb-locator (min-width: 820px) { .bbtb-app:not(#bbtb-cascade) .bbtb-locator__layout { align-items: start; display: grid; gap: var(--bbtb-space-6, 32px); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__results-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__map-col { min-width: 0; } .bbtb-app.bbtb-locator--no-map:not(#bbtb-cascade) .bbtb-locator__results-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--no-map .bbtb-locator__results-col { grid-column: 1 / -1; } /** * The map holds the column while the list scrolls the page past it. * The list itself is deliberately not a scroll box: an inner * `overflow-y` on the results cut the fourth result off below an * invisible fold, and a homeowner has no reason to think there is * anything to scroll inside a page that already scrolls. */ .bbtb-app:not(#bbtb-cascade) .bbtb-locator__map { height: clamp(420px, 62vh, 640px); min-height: 0; position: sticky; top: calc(var(--bbtb-sticky-offset, 0px) + var(--bbtb-space-4, 16px)); } /* The mobile toggle never applies once both columns fit. */ .bbtb-app.bbtb-locator--show-map:not(#bbtb-cascade) .bbtb-locator__results-col, .bbtb-app.bbtb-locator--show-list:not(#bbtb-cascade) .bbtb-locator__map-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--show-map .bbtb-locator__results-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--show-list .bbtb-locator__map-col { display: block; } .bbtb-app:not(#bbtb-cascade) .bbtb-locator__view-toggle { display: none; } /* The shortcode's own view attribute, which does outrank the toggle. */ .bbtb-app.bbtb-locator--split:not(#bbtb-cascade) .bbtb-locator__results-col, .bbtb-app.bbtb-locator--split:not(#bbtb-cascade) .bbtb-locator__map-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--split .bbtb-locator__results-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--split .bbtb-locator__map-col { display: block; } .bbtb-app.bbtb-locator--map:not(#bbtb-cascade) .bbtb-locator__results-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--map .bbtb-locator__results-col { display: none; } .bbtb-app.bbtb-locator--map:not(#bbtb-cascade) .bbtb-locator__map-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--map .bbtb-locator__map-col { grid-column: 1 / -1; } .bbtb-app.bbtb-locator--list:not(#bbtb-cascade) .bbtb-locator__map-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--list .bbtb-locator__map-col { display: none; } .bbtb-app.bbtb-locator--list:not(#bbtb-cascade) .bbtb-locator__results-col, .bbtb-app:not(#bbtb-cascade) .bbtb-locator--list .bbtb-locator__results-col { grid-column: 1 / -1; } } /* ===================================================================== * 14. CONTRACTOR PROFILE * ================================================================== */ .bbtb-app.bbtb-profile:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-profile { background: var(--bbtb-surface, #FFFFFF); display: block; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__preview { padding-top: var(--bbtb-space-5, 24px); } /* --- The hero: a full-bleed dark band in the homepage's idiom ---------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero { background: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; overflow: hidden; padding-block: var(--bbtb-space-8, 64px); position: relative; text-align: center; } /** * The cover photograph. The contractor chose this image; it has to be * visible. Partly desaturated so it still belongs to the monochrome hero, * but carried at high opacity and read through a bottom-weighted scrim * rather than a flat wash. */ .bbtb-app:not(#bbtb-cascade) .bbtb-profile__cover { background-position: center; background-size: cover; filter: grayscale(.6) contrast(.95); inset: 0; opacity: .75; position: absolute; } /** * The scrim. Lightest at the top, where the photograph is doing the work, * and heaviest at the bottom, under the chips and the buttons. The lightest * step is .48, which keeps white type at 5.2:1 against even a blown-out * white photograph — do not lower it without redoing that sum. */ .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero--has-cover::after { background: linear-gradient(180deg, rgba(14, 14, 14, .48) 0%, rgba(14, 14, 14, .58) 45%, rgba(14, 14, 14, .86) 100%); content: ""; inset: 0; position: absolute; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero-inner { position: relative; z-index: 1; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__lockup { align-items: center; display: flex; flex-direction: column; gap: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__logo { background: #FFFFFF; border-radius: var(--bbtb-radius, 2px); max-width: 88px; padding: var(--bbtb-space-2, 8px); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__titles { max-width: 42rem; } /* The company name as large centred white letterspaced display type. */ .bbtb-app:not(#bbtb-cascade) .bbtb-profile__name { color: #FFFFFF; font-size: clamp(1.75rem, 6cqi, 3.25rem); font-weight: 300; letter-spacing: .08em; line-height: 1.1; margin: 0; text-transform: uppercase; --bbtb-heading-color: #FFFFFF; --bbtb-heading-transform: uppercase; --bbtb-heading-tracking: .08em; --bbtb-heading-leading: 1.1; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__location { color: rgba(255, 255, 255, .8); font-size: .875rem; letter-spacing: .06em; margin: var(--bbtb-space-4, 16px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__chips { justify-content: center; --bbtb-list-flow: var(--bbtb-space-5, 24px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__badge { margin-top: var(--bbtb-space-2, 8px); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__actions { justify-content: center; margin-top: var(--bbtb-space-7, 48px); } /* --- Body layout --------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-profile__layout { display: grid; gap: var(--bbtb-space-7, 48px); grid-template-columns: 1fr; padding-block: var(--bbtb-band-y, 48px); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__body { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__section { margin: 0 0 var(--bbtb-space-8, 64px); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__section:last-child { margin-bottom: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__sidebar { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__sidebar > * + * { margin-top: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__panel { padding: var(--bbtb-space-5, 24px); } /** * The credential panel is the thing the contractor is actually buying, so * it is the one panel in the sidebar that is not a plain hairline box: the * near-black ground and the accent rule mark it as issued paperwork rather * than as one more block of contact detail. */ .bbtb-app:not(#bbtb-cascade) .bbtb-credential { background: var(--bbtb-ink, #0E0E0E); border-color: var(--bbtb-ink, #0E0E0E); border-top: 4px solid var(--bbtb-accent, #F99D25); color: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) .bbtb-credential .bbtb-section__title, .bbtb-app:not(#bbtb-cascade) .bbtb-credential .bbtb-credential__subtitle { color: rgba(255, 255, 255, .7); --bbtb-heading-color: rgba(255, 255, 255, .7); } .bbtb-app:not(#bbtb-cascade) .bbtb-credential .bbtb-profile__details dt { color: rgba(255, 255, 255, .55); } .bbtb-app:not(#bbtb-cascade) .bbtb-credential .bbtb-profile__details dd { color: #FFFFFF; } .bbtb-app:not(#bbtb-cascade) .bbtb-credential .bbtb-credential__text { color: rgba(255, 255, 255, .8); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__details { margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__details dt { color: var(--bbtb-body, #5A5A5A); font-size: .625rem; font-weight: 600; letter-spacing: .14em; margin-top: var(--bbtb-space-4, 16px); text-transform: uppercase; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__details dt:first-child { margin-top: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__details dd { line-height: 1.6; margin: var(--bbtb-space-1, 4px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__phone { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bbtb-space-2, 8px); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__phone a { font-size: 1.125rem; font-weight: 600; letter-spacing: .02em; } .bbtb-app:not(#bbtb-cascade) .bbtb-copy { font-size: .625rem; letter-spacing: .1em; min-height: 44px; padding: var(--bbtb-space-1, 4px) var(--bbtb-space-3, 12px); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__links { list-style: none; margin: 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__links li { border-bottom: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); padding: 0; } /* The row is the tap target; a bare line of text is 15px tall. */ .bbtb-app:not(#bbtb-cascade) .bbtb-profile__links li a { align-items: center; display: flex; min-height: 44px; padding: var(--bbtb-space-2, 8px) 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__links li:last-child { border-bottom: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__area-statement { color: var(--bbtb-body, #5A5A5A); font-size: .8125rem; margin: var(--bbtb-space-4, 16px) 0 0; } /* --- Programme panel ------------------------------------------------------ */ .bbtb-app:not(#bbtb-cascade) .bbtb-programme { background: var(--bbtb-band, #F2F2F2); border-left: 4px solid var(--bbtb-accent, #F99D25); padding: var(--bbtb-space-6, 32px); } .bbtb-app:not(#bbtb-cascade) .bbtb-programme__inner { display: flex; gap: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-programme__mark { color: var(--bbtb-accent, #F99D25); flex: 0 0 auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-programme__mark svg { display: block; height: 36px; width: auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-programme__copy { margin: 0; } .bbtb-app.bbtb-promise:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-promise { font-size: 1.0625rem; line-height: 1.75; } blockquote.bbtb-app.bbtb-promise:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) blockquote.bbtb-promise { border-left: 4px solid var(--bbtb-accent, #F99D25); margin: 0; padding-left: var(--bbtb-space-5, 24px); } /* --- Profile map ---------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-profile-map__canvas { align-items: center; background: var(--bbtb-band, #F2F2F2); display: flex; justify-content: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile-map__placeholder { padding: var(--bbtb-space-5, 24px); text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile-map__pin { color: var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile-map__pin svg { height: 32px; width: auto; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile-map__address { font-size: .8125rem; margin: var(--bbtb-space-2, 8px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile-map__directions { margin-top: var(--bbtb-space-3, 12px); } /* --- Gallery -------------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__grid { display: grid; gap: var(--bbtb-space-2, 8px); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__gallery { margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__item { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__button { background: var(--bbtb-band, #F2F2F2); border: 0; cursor: pointer; display: block; overflow: hidden; padding: 0; position: relative; width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__button img, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__image { aspect-ratio: 4 / 3; display: block; object-fit: cover; transition: transform var(--bbtb-dur-3, 350ms) var(--bbtb-ease, ease), filter var(--bbtb-dur-3, 350ms) var(--bbtb-ease, ease); width: 100%; } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__button:hover img, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__button:focus-visible img { transform: scale(1.04); } /* The orange circular zoom mark, borrowed from the homepage's play button. */ .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__zoom { background: var(--bbtb-accent, #F99D25); border-radius: 50%; height: 40px; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%) scale(.85); transition: opacity var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease), transform var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease); width: 40px; } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__zoom::before, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__zoom::after { background: var(--bbtb-accent-ink, #0E0E0E); content: ""; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__zoom::before { height: 2px; width: 14px; } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__zoom::after { height: 14px; width: 2px; } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__button:hover .bbtb-gallery__zoom, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__button:focus-visible .bbtb-gallery__zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__caption { margin: var(--bbtb-space-2, 8px) 0 0; } /* --- Lightbox: floats, so it takes the top elevation step ---------------- */ .bbtb-app.bbtb-lightbox:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox { align-items: center; background: rgba(14, 14, 14, .95); display: flex; flex-direction: column; font-family: var(--bbtb-font, "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif); inset: 0; justify-content: center; padding: var(--bbtb-space-5, 24px); position: fixed; z-index: 100001; } .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__image { box-shadow: var(--bbtb-elev-3, 0 8px 24px rgba(0, 0, 0, .10)); max-height: 78vh; max-width: 100%; object-fit: contain; } .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__caption { color: #FFFFFF; font-size: .875rem; margin: var(--bbtb-space-4, 16px) 0 0; text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__counter { margin: var(--bbtb-space-2, 8px) 0 0; text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__close, .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__prev, .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__next { background: rgba(255, 255, 255, .12); border: 0; border-radius: var(--bbtb-radius, 2px); color: #FFFFFF; cursor: pointer; font-family: inherit; font-size: 1.25rem; font-weight: 600; line-height: 1; min-height: 48px; min-width: 48px; position: absolute; transition: background-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease), color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); } .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__close:hover, .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__prev:hover, .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__next:hover { background: var(--bbtb-accent, #F99D25); color: var(--bbtb-accent-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__close { right: var(--bbtb-space-5, 24px); top: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__prev { left: var(--bbtb-space-4, 16px); top: 50%; transform: translateY(-50%); } .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__next { right: var(--bbtb-space-4, 16px); top: 50%; transform: translateY(-50%); } /* --- Contact form --------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-contact__form { margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-contactdetails { min-width: 0; } .bbtb-app.bbtb-contact:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-contact { background: var(--bbtb-band, #F2F2F2); border-color: transparent; border-top: 4px solid var(--bbtb-accent, #F99D25); padding: var(--bbtb-space-7, 48px) var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-contact__intro { margin: 0 0 var(--bbtb-space-6, 32px); max-width: 40rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-contact__status { margin: 0 0 var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-contact__smallprint { margin: var(--bbtb-space-4, 16px) 0 0; } /* * The filled field needs to lift off the grey band to stay legible. Fill and * ink are published as the pair the reset pins, so the contact form is * correct wherever it is dropped — including a dark band, where the light * control and its near-black text arrive together or not at all. */ .bbtb-app.bbtb-contact:not(#bbtb-cascade) .bbtb-field input, .bbtb-app:not(#bbtb-cascade) .bbtb-contact .bbtb-field input, .bbtb-app.bbtb-contact:not(#bbtb-cascade) .bbtb-field select, .bbtb-app:not(#bbtb-cascade) .bbtb-contact .bbtb-field select, .bbtb-app.bbtb-contact:not(#bbtb-cascade) .bbtb-field textarea, .bbtb-app:not(#bbtb-cascade) .bbtb-contact .bbtb-field textarea { --bbtb-control-fill: var(--bbtb-surface, #FFFFFF); --bbtb-control-fill-hover: #FAFAFA; --bbtb-control-ink: var(--bbtb-ink, #0E0E0E); --bbtb-control-rule: var(--bbtb-body, #5A5A5A); --bbtb-control-hint: var(--bbtb-body, #5A5A5A); } /* --- Profile footer ------------------------------------------------------- */ .bbtb-app:not(#bbtb-cascade) .bbtb-profile__footer { background: var(--bbtb-accent, #F99D25); color: var(--bbtb-accent-ink, #0E0E0E); padding-block: var(--bbtb-band-y, 48px); text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__footer-title { font-size: clamp(1.25rem, 3.6cqi, 1.875rem); font-weight: 400; letter-spacing: .01em; margin: 0 0 var(--bbtb-space-4, 16px); text-transform: uppercase; --bbtb-heading-transform: uppercase; --bbtb-heading-tracking: .01em; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__footer-title strong { font-weight: 700; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__footer-copy { color: rgba(14, 14, 14, .82); font-size: .9375rem; margin: 0 auto var(--bbtb-space-6, 32px); max-width: 44rem; } @container bbtb-surface (min-width: 34rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero { padding-block: var(--bbtb-space-9, 96px); } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__grid--3, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bbtb-app.bbtb-contact:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-contact { padding: var(--bbtb-space-7, 48px) var(--bbtb-space-6, 32px); } } /** * The sidebar splits off only once the body column still has a comfortable * measure left. Below that the panels sit under the body, full width, which * is far better than a 200px column that breaks a certificate number across * two lines. */ @container bbtb-surface (min-width: 56rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-profile__layout { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__sidebar { position: sticky; top: calc(var(--bbtb-sticky-offset, 0px) + var(--bbtb-space-5, 24px)); } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bbtb-app.bbtb-contact:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-contact { padding: var(--bbtb-space-8, 64px) var(--bbtb-space-7, 48px); } } @container bbtb-surface (min-width: 72rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-profile__layout { gap: var(--bbtb-space-9, 96px); } } /* * In the single-column band — a theme column too narrow for a sidebar, but * wide enough for two panels abreast — the sidebar pairs its panels up * instead of running five small boxes down the page. */ @container bbtb-surface (min-width: 34rem) and (max-width: 55.999rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-profile__sidebar { display: grid; gap: var(--bbtb-space-5, 24px); grid-template-columns: repeat(2, minmax(0, 1fr)); } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__sidebar > * + * { margin-top: 0; } } /* ===================================================================== * 15. ARCHIVE & CONTRACTOR CARDS * ================================================================== */ .bbtb-app.bbtb-archive:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-archive { display: block; } .bbtb-app:not(#bbtb-cascade) .bbtb-archive__hero { background: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; padding-block: var(--bbtb-band-y, 48px); } .bbtb-app:not(#bbtb-cascade) .bbtb-archive__title { color: #FFFFFF; font-size: clamp(1.75rem, 6cqi, 3rem); font-weight: 300; letter-spacing: .06em; margin: 0; text-transform: uppercase; --bbtb-heading-color: #FFFFFF; --bbtb-heading-transform: uppercase; --bbtb-heading-tracking: .06em; } .bbtb-app:not(#bbtb-cascade) .bbtb-archive__title strong { font-weight: 700; } .bbtb-app:not(#bbtb-cascade) .bbtb-archive__standfirst { color: rgba(255, 255, 255, .78); margin: var(--bbtb-space-4, 16px) 0 0; max-width: 44rem; } .bbtb-app:not(#bbtb-cascade) .bbtb-archive__search { border-top: var(--bbtb-hairline, 1px) solid rgba(255, 255, 255, .2); display: grid; gap: var(--bbtb-space-4, 16px); grid-template-columns: 1fr; margin: var(--bbtb-space-7, 48px) 0 0; padding-top: var(--bbtb-space-6, 32px); } .bbtb-app:not(#bbtb-cascade) .bbtb-archive__search .bbtb-field { margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-archive__locator-link { font-size: .8125rem; margin: var(--bbtb-space-5, 24px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-archive__body { padding-block: var(--bbtb-band-y, 48px); } /* --- Contractor card ------------------------------------------------------ */ .bbtb-app.bbtb-contractor-grid:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-grid, .bbtb-app:not(#bbtb-cascade) .bbtb-contractors { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card { background: var(--bbtb-surface, #FFFFFF); border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); border-radius: var(--bbtb-radius, 2px); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease), border-color var(--bbtb-dur-2, 250ms) var(--bbtb-ease, ease); } /* Elevation appears only on hover — a card at rest is flat. */ .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card:hover { border-color: var(--bbtb-line-strong, #C9C9C9); box-shadow: var(--bbtb-elev-2, 0 2px 8px rgba(0, 0, 0, .08)); } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card--certified { border-top: 3px solid var(--bbtb-accent, #F99D25); } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__cover { background-color: var(--bbtb-band, #F2F2F2); background-position: center; background-size: cover; filter: grayscale(1); padding-top: 42%; transition: filter var(--bbtb-dur-3, 350ms) var(--bbtb-ease, ease); } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card:hover .bbtb-contractor-card__cover { filter: grayscale(0); } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--bbtb-space-3, 12px); padding: var(--bbtb-space-5, 24px); } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__head { align-items: center; display: flex; gap: var(--bbtb-space-3, 12px); min-width: 0; } /* * The company name and its town stack. Laid out as a flex row they shared * the card's width, which squeezed "Grand Rapids, MI" into a column two * words wide and broke it across three lines beside a wrapping name. */ .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__identity { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__logo { background: #FFFFFF; border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); flex: 0 0 auto; height: 52px; object-fit: contain; padding: var(--bbtb-space-1, 4px); width: 52px; } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__title { font-size: 1.0625rem; font-weight: 600; margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__title a { color: var(--bbtb-ink, #0E0E0E); --bbtb-link: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__title a:hover { --bbtb-link: var(--bbtb-accent-dark, #9A6117); --bbtb-link-decoration: underline; } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__location { color: var(--bbtb-body, #5A5A5A); font-size: .75rem; letter-spacing: .04em; margin: 2px 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__excerpt { color: var(--bbtb-body, #5A5A5A); font-size: .875rem; margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__actions { align-items: stretch; display: flex; flex-wrap: wrap; gap: var(--bbtb-space-2, 8px); margin-top: auto; padding-top: var(--bbtb-space-2, 8px); } .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__actions .bbtb-btn { flex: 1 1 8rem; justify-content: center; } /* * The card body is a stretch column, so an inline-flex badge inside it * would be pulled to the full width of the card and read as a black bar. */ .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__body > .bbtb-badge { align-self: flex-start; max-width: 100%; } .bbtb-app.bbtb-count:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-count { font-weight: 700; } /* --- Pagination ------------------------------------------------------------ */ .bbtb-app:not(#bbtb-cascade) .bbtb-pagination ul { display: flex; flex-wrap: wrap; gap: var(--bbtb-space-1, 4px); justify-content: center; list-style: none; margin: var(--bbtb-space-7, 48px) 0 0; padding: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-pagination a, .bbtb-app:not(#bbtb-cascade) .bbtb-pagination span { align-items: center; border: var(--bbtb-hairline, 1px) solid var(--bbtb-line, #E2E2E2); color: var(--bbtb-ink, #0E0E0E); display: inline-flex; font-size: .8125rem; font-weight: 600; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--bbtb-space-3, 12px); transition: background-color var(--bbtb-dur-1, 150ms) var(--bbtb-ease, ease); --bbtb-link: var(--bbtb-ink, #0E0E0E); } .bbtb-app:not(#bbtb-cascade) .bbtb-pagination a:hover { background: var(--bbtb-fill, #F5F5F5); } .bbtb-app:not(#bbtb-cascade) .bbtb-pagination .current { background: var(--bbtb-ink, #0E0E0E); border-color: var(--bbtb-ink, #0E0E0E); color: #FFFFFF; } @container bbtb-surface (min-width: 34rem) { .bbtb-app:not(#bbtb-cascade) .bbtb-archive__search { align-items: end; grid-template-columns: 2fr 1fr auto; } } /* ===================================================================== * 16. SHORTCODE COMPONENTS * ================================================================== */ .bbtb-app.bbtb-benefits:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-benefits { display: grid; gap: var(--bbtb-space-6, 32px); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; --bbtb-list-flow: 0; text-align: left; } .bbtb-app:not(#bbtb-cascade) .bbtb-benefits__item, .bbtb-app:not(#bbtb-cascade) .bbtb-benefit { border-top: 3px solid var(--bbtb-accent, #F99D25); padding-top: var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-benefits__title, .bbtb-app:not(#bbtb-cascade) .bbtb-benefit__title { font-size: .875rem; font-weight: 700; letter-spacing: .1em; margin: 0 0 var(--bbtb-space-2, 8px); text-transform: uppercase; --bbtb-heading-transform: uppercase; --bbtb-heading-tracking: .1em; } .bbtb-app:not(#bbtb-cascade) .bbtb-benefits__text, .bbtb-app:not(#bbtb-cascade) .bbtb-benefit__text { color: var(--bbtb-body, #5A5A5A); font-size: .875rem; line-height: 1.7; margin: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-benefit__icon { color: var(--bbtb-accent, #F99D25); display: block; margin-bottom: var(--bbtb-space-3, 12px); } .bbtb-app:not(#bbtb-cascade) .bbtb-benefit__icon svg { height: 32px; width: auto; } .bbtb-app.bbtb-certification:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-certification, .bbtb-app:not(#bbtb-cascade) .bbtb-exam { display: block; } .bbtb-app:not(#bbtb-cascade) .bbtb-exam { margin: 0 auto; max-width: 860px; } .bbtb-app:not(#bbtb-cascade) .bbtb-certs, .bbtb-app:not(#bbtb-cascade) .bbtb-description, .bbtb-app:not(#bbtb-cascade) .bbtb-area, .bbtb-app:not(#bbtb-cascade) .bbtb-address, .bbtb-app:not(#bbtb-cascade) .bbtb-about { min-width: 0; } /* Odds and ends the exam, dashboard and profile scripts render into. */ .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__note-quote { border-left: 3px solid var(--bbtb-accent, #F99D25); color: var(--bbtb-body, #5A5A5A); font-size: .875rem; font-style: normal; margin: var(--bbtb-space-4, 16px) 0 0; padding-left: var(--bbtb-space-4, 16px); } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__wait, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__retake-wait { color: var(--bbtb-body, #5A5A5A); font-size: .875rem; margin: var(--bbtb-space-3, 12px) 0 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-item { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-answer-row { display: flex; gap: var(--bbtb-space-3, 12px); } .bbtb-app:not(#bbtb-cascade) .bbtb-answer-row__key { color: var(--bbtb-body, #5A5A5A); font-weight: 600; } .bbtb-app:not(#bbtb-cascade) .bbtb-answer-row__correct { color: var(--bbtb-success, #1B7A43); font-weight: 600; } .bbtb-app:not(#bbtb-cascade) .bbtb-slot, .bbtb-app:not(#bbtb-cascade) .bbtb-slot-preview { min-width: 0; } .bbtb-app:not(#bbtb-cascade) .bbtb-index-status:empty, .bbtb-app:not(#bbtb-cascade) .bbtb-username-status:empty, .bbtb-app:not(#bbtb-cascade) .bbtb-media-status:empty { display: none; } @container bbtb-surface (min-width: 40rem) { .bbtb-app.bbtb-benefits:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ===================================================================== * 17. UTILITIES & FOCUS * ================================================================== */ .bbtb-app:not(#bbtb-cascade) .screen-reader-text, .bbtb-app:not(#bbtb-cascade) .bbtb-sr-only { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } /** * Focus is never removed, only sharpened: 2px orange offset 2px on a light * surface, 2px white on a dark one. `:focus-visible` keeps it off mouse * clicks without ever hiding it from a keyboard. */ .bbtb-app:not(#bbtb-cascade) :focus-visible, .bbtb-app:focus-visible:not(#bbtb-cascade) { outline: 2px solid var(--bbtb-accent, #F99D25); outline-offset: 2px; } .bbtb-app:not(#bbtb-cascade) .bbtb-band--dark :focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-band--black :focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero :focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__hero :focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__bar :focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__hero :focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__appbar :focus-visible, .bbtb-app.bbtb-lightbox:not(#bbtb-cascade) :focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox :focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__hero :focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-registration__hero :focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-credential :focus-visible { outline-color: #FFFFFF; } /* A filled field draws its own focus rule, so the ring would double up. */ .bbtb-app:not(#bbtb-cascade) .bbtb-field input:focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-field select:focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-field textarea:focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__input:focus-visible, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__select:focus-visible { outline: 2px solid var(--bbtb-accent, #F99D25); outline-offset: -2px; } .bbtb-app:not(#bbtb-cascade) .bbtb-hidden { display: none; } .bbtb-app:not(#bbtb-cascade) .bbtb-center { text-align: center; } .bbtb-app:not(#bbtb-cascade) .bbtb-nowrap { white-space: nowrap; } /* ===================================================================== * 18. MOTION & PRINT * * Every transition and animation in this file is opt-in: it runs only * where the visitor has not asked for less motion. * ================================================================== */ @media (prefers-reduced-motion: reduce) { .bbtb-app:not(#bbtb-cascade) .bbtb-btn, .bbtb-app:not(#bbtb-cascade) .bbtb-btn::after, .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card, .bbtb-app:not(#bbtb-cascade) .bbtb-contractor-card__cover, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__button img, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__image, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__zoom, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__answer-input, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-btn, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__index-caret, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__submit, .bbtb-app.bbtb-result-card:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-result-card, .bbtb-app.bbtb-result-card:not(#bbtb-cascade)::after, .bbtb-app:not(#bbtb-cascade) .bbtb-result-card::after, .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tab, .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tab::after, .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav-item, .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__nav-marker, .bbtb-app:not(#bbtb-cascade) .bbtb-field input, .bbtb-app:not(#bbtb-cascade) .bbtb-field select, .bbtb-app:not(#bbtb-cascade) .bbtb-field textarea, .bbtb-app:not(#bbtb-cascade) .bbtb-field__label, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__input, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__select, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__geo, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__results, .bbtb-app.bbtb-badge:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-badge, .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__close, .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__prev, .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox__next, .bbtb-app:not(#bbtb-cascade) .bbtb-pagination a, .bbtb-app:not(#bbtb-cascade) .bbtb-progress__fill, .bbtb-app:not(#bbtb-cascade) .bbtb-progress-fill, .bbtb-app:not(#bbtb-cascade) .bbtb-strength__fill, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__progress-fill, .bbtb-app:not(#bbtb-cascade) .bbtb-wizard__progress-fill, .bbtb-app:not(#bbtb-cascade) .bbtb-quiz__breakdown-fill, .bbtb-app:not(#bbtb-cascade) .bbtb-score-ring__arc, .bbtb-app:not(#bbtb-cascade) .bbtb-table tbody tr, .bbtb-app:not(#bbtb-cascade) .bbtb-upload, .bbtb-app.bbtb-profile:not(#bbtb-cascade) a, .bbtb-app:not(#bbtb-cascade) .bbtb-profile a, .bbtb-app.bbtb-card:not(#bbtb-cascade) a, .bbtb-app:not(#bbtb-cascade) .bbtb-card a { transition-duration: 1ms; } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__button:hover img, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__button:focus-visible img { transform: none; } .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__zoom { transform: translate(-50%, -50%); } .bbtb-app:not(#bbtb-cascade) .bbtb-spinner, .bbtb-app:not(#bbtb-cascade) .bbtb-btn__spinner { animation-duration: 2.4s; } } @media print { .bbtb-app:not(#bbtb-cascade) .bbtb-profile__actions, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__footer, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__section--contact, .bbtb-app:not(#bbtb-cascade) .bbtb-profile-map__directions, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__preview, .bbtb-app:not(#bbtb-cascade) .bbtb-copy, .bbtb-app.bbtb-lightbox:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-lightbox, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__search, .bbtb-app:not(#bbtb-cascade) .bbtb-locator__hero, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__search, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__locator-link, .bbtb-app:not(#bbtb-cascade) .bbtb-pagination, .bbtb-app:not(#bbtb-cascade) .bbtb-gallery__zoom, .bbtb-app:not(#bbtb-cascade) .bbtb-toast, .bbtb-app:not(#bbtb-cascade) .bbtb-dashboard__tabs { display: none !important; } .bbtb-app.bbtb-profile:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-profile, .bbtb-app.bbtb-archive:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-archive { background: none !important; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__hero { background: none !important; color: #000000 !important; padding: 0 0 var(--bbtb-space-5, 24px) !important; text-align: left !important; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__cover, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero--has-cover::after { display: none !important; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__name, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__location, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__title, .bbtb-app:not(#bbtb-cascade) .bbtb-archive__standfirst { color: #000000 !important; --bbtb-heading-color: #000000 !important; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__lockup { align-items: flex-start !important; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__hero .bbtb-chip, .bbtb-app:not(#bbtb-cascade) .bbtb-chip { background: none !important; border-color: #999999 !important; color: #000000 !important; } .bbtb-app.bbtb-badge:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-badge { background: none !important; border: 2px solid #000000 !important; color: #000000 !important; } .bbtb-app:not(#bbtb-cascade) .bbtb-badge__mark { color: #000000 !important; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__layout { display: block !important; padding: 0 !important; } .bbtb-app:not(#bbtb-cascade) .bbtb-profile__sidebar { position: static !important; } .bbtb-app.bbtb-card:not(#bbtb-cascade), .bbtb-app:not(#bbtb-cascade) .bbtb-card, .bbtb-app:not(#bbtb-cascade) .bbtb-profile__section { break-inside: avoid; page-break-inside: avoid; } .bbtb-app:not(#bbtb-cascade) .bbtb-programme { background: none !important; border-left: 2px solid #000000 !important; } .bbtb-app.bbtb-profile:not(#bbtb-cascade) a[href^="http"]::after, .bbtb-app:not(#bbtb-cascade) .bbtb-profile a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; word-break: break-all; } } /* ===================================================================== * 19. THEME COMPATIBILITY * * The defensive reset in section 2 handles what a hostile theme does to * elements *inside* `.bbtb-app`. This section handles the other half: what * the theme's own wrappers do *around* it — the constrained content * column, the floating header the sticky app bar has to clear, and the * `overflow` that silently kills `position: sticky`. * * Everything here is keyed off a theme's own markers, so a site running * any other theme loads a handful of selectors that never match. Nothing * in this section uses `!important`: reaching a theme wrapper by its id or * its own class is already specific enough. * * HOW TO ADD A THEME * * Copy the shape of 19a: one commented block per theme, keyed off that * theme's body class or wrapper id, doing at most three things — * * 1. set `--bbtb-sticky-offset` so the exam app bar clears the header; * 2. release any ancestor `overflow` that breaks `position: sticky`, * guarded with `:has()` so it only fires on pages that use it; * 3. release the theme's content padding where a plugin band is meant * to run edge to edge. * * Anything beyond those three is a sign the component rule is too weak * and should be fixed in its own section instead. * ================================================================== */ /* --------------------------------------------------------------------- * 19a. Salient (ThemeNectar) + WPBakery * * Salient wraps the whole document in #ajax-content-wrap, the page body in * .container-wrap > .main-content, and floats #header-outer over the top. * Its body carries data-header-format / data-header-resize, which is what * the offsets below key off. * ------------------------------------------------------------------ */ /** * The exam app bar has to park below Salient's floating header. Salient's * header is 60px tall on tablets and phones and shrinks to ~90px on * desktop with its resize behaviour on; when the header is set to * "permanent transparent" it does not take the bar's space at all. * * A site with a bespoke header height overrides this once, anywhere: * .bbtb-app { --bbtb-sticky-offset: 112px; } */ /* * Measured from the live site rather than guessed: Salient's own dynamic CSS * reserves calc(100vh - 115px) for a full-height row on desktop and * calc(100vh - 58px) on mobile, which is its header height at each size. Its * header breakpoint is 1000px (body[data-header-breakpoint]). */ body[data-header-format] .bbtb-app, body.salient .bbtb-app, #ajax-content-wrap .bbtb-app { --bbtb-sticky-offset: 58px; } @media (min-width: 1000px) { body[data-header-format] .bbtb-app, body.salient .bbtb-app, #ajax-content-wrap .bbtb-app { --bbtb-sticky-offset: 115px; } } body[data-permanent-transparent="1"] .bbtb-app, body[data-header-format="left-header"] .bbtb-app { --bbtb-sticky-offset: 0px; } /** * `position: sticky` is cancelled by any ancestor with a non-visible * overflow, and Salient sets `overflow-x: hidden` on #ajax-content-wrap * and on .container-wrap to contain its parallax rows. `:has()` keeps the * release to pages that actually render something sticky — the exam's app * bar, or the locator's map column — so a normal page on the site keeps * the theme's horizontal clipping. */ #ajax-content-wrap:has(.bbtb-quiz__appbar), .container-wrap:has(.bbtb-quiz__appbar), .main-content:has(.bbtb-quiz__appbar), #ajax-content-wrap:has(.bbtb-locator__map), .container-wrap:has(.bbtb-locator__map), .main-content:has(.bbtb-locator__map) { overflow: visible; } /** * Salient's .main-content sets its own line-height and colour on the * column that holds a shortcode. The reset already re-establishes both * inside `.bbtb-app`; this only stops the theme's column padding cutting * into a full-bleed band on the plugin's own page template. */ .bbtb-page-fullwidth .container-wrap, .bbtb-page-fullwidth .main-content, .bbtb-page-fullwidth #ajax-content-wrap .container-wrap { margin: 0; max-width: none; padding-left: 0; padding-right: 0; width: 100%; } /** * WPBakery's row and column wrappers add their own gutters. Where one is * the direct parent of a plugin surface on the full-width template, the * gutter is the thing standing between a band and the edge of the screen. */ .bbtb-page-fullwidth .wpb_row, .bbtb-page-fullwidth .vc_row, .bbtb-page-fullwidth .wpb_column > .vc_column-inner { margin: 0; padding-left: 0; padding-right: 0; } /* --------------------------------------------------------------------- * 19b. (next theme) * * Add the next theme here, in the same three-part shape as 19a. Leave this * marker in place so the next person can see where the block goes. * ------------------------------------------------------------------ */