. */
.bp-searchbar {
position: relative;
z-index: 3;
width: 100%;
max-width: 1060px;
margin-inline: auto;
padding: 11px;
border: 1px solid var(--bp-line-strong);
border-radius: var(--bp-radius-lg);
background: rgba(255, 255, 255, .95);
box-shadow: 0 30px 80px rgba(18, 43, 99, .19);
}
.bp-searchbar .search-container {
grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) 146px;
gap: 10px;
font-family: var(--bp-font);
}
.bp-searchbar .field-group {
min-width: 0;
padding: 0 14px;
border-right: 1px solid var(--bp-line);
text-align: left;
}
.bp-searchbar .field-group+.field-group {
border-right: 0;
}
.bp-searchbar .input-wrapper {
min-height: 50px;
grid-template-columns: 24px minmax(0, 1fr) auto;
gap: 11px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
/* The component removes its own focus ring; put one back on the whole field. */
.bp-searchbar .input-wrapper:focus-within {
border: 0;
border-radius: var(--bp-radius-xs);
box-shadow: var(--bp-focus-ring);
}
.bp-searchbar .absolute-label {
position: static;
max-width: none;
padding: 0;
transform: none;
background: transparent;
color: #35445b;
font-family: var(--bp-font);
font-size: var(--bp-text-xs);
font-weight: var(--bp-weight-strong);
line-height: var(--bp-leading-snug);
}
.bp-searchbar .search-input {
width: 100%;
height: 24px;
padding: 0;
border: 0;
background: transparent;
color: var(--bp-ink);
font-family: var(--bp-font);
font-size: var(--bp-text-base);
}
.bp-searchbar .search-input::placeholder {
color: var(--bp-muted);
}
.bp-searchbar .search-button {
min-width: 146px;
min-height: 46px;
padding: 0 20px;
border-radius: var(--bp-radius-sm);
background: var(--bp-blue);
box-shadow: var(--bp-shadow-accent);
font-family: var(--bp-font);
font-size: 15px;
font-weight: var(--bp-weight-black);
letter-spacing: .02em;
}
.bp-searchbar .search-button:hover {
background: var(--bp-blue-hover);
}
.bp-searchbar .suggestions-container {
left: 0;
z-index: var(--bp-z-dropdown);
border-color: var(--bp-line);
border-radius: var(--bp-radius-sm);
box-shadow: 0 18px 44px rgba(18, 43, 99, .16);
text-align: left;
}
/* ==========================================================================
7. SURFACES
========================================================================== */
/* The white box a section's content sits in. */
.bp-panel {
padding: 28px;
border: 1px solid var(--bp-line);
border-radius: var(--bp-radius-xl);
background: var(--bp-white);
box-shadow: var(--bp-shadow-md);
}
.bp-panel--wide {
padding: 34px;
}
/* The large two-column band: copy on one side, a visual on the other. */
.bp-feature {
padding: 46px;
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
gap: var(--bp-space-xl);
align-items: center;
border: 1px solid #d5e2f5;
border-radius: var(--bp-radius-2xl);
background: rgba(255, 255, 255, .9);
box-shadow: var(--bp-shadow-xl);
}
.bp-feature h2 {
margin-bottom: var(--bp-space-sm);
font-size: var(--bp-display-2);
line-height: var(--bp-leading-tight);
}
.bp-feature p {
margin: 0 0 15px;
color: var(--bp-muted);
font-size: var(--bp-text-md);
}
/* Full-bleed closing call to action. */
.bp-cta {
padding-block: 72px;
color: var(--bp-white);
background:
radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .14), transparent 22rem),
var(--bp-gradient-brand);
}
.bp-cta__inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 50px;
align-items: center;
}
.bp-cta h2 {
max-width: 760px;
margin-bottom: 14px;
color: var(--bp-white);
font-size: clamp(36px, 4vw, 54px);
line-height: 1.06;
}
/* rgba(255,255,255,.8) drops to 4.38:1 on the blue end once the band stacks on
phones; a solid tint holds above 5:1 across the whole gradient. */
.bp-cta p {
max-width: 760px;
margin: 0;
color: #dbe4f7;
font-size: var(--bp-text-md);
}
.bp-cta .bp-eyebrow {
color: var(--bp-white);
}
.bp-cta__actions {
display: flex;
flex-direction: column;
gap: var(--bp-space-xs);
}
.bp-cta__actions .bp-btn {
min-width: 190px;
}
/* Row of reassurance statements under a hero. */
.bp-trustbar {
position: relative;
z-index: 2;
border-block: 1px solid rgba(201, 214, 234, .8);
background: rgba(255, 255, 255, .88);
}
.bp-trustbar__grid {
min-height: 92px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
align-items: center;
}
.bp-trustbar__item {
display: flex;
align-items: center;
gap: 13px;
color: #40506a;
font-size: var(--bp-text-sm);
font-weight: var(--bp-weight-bold);
}
/* ==========================================================================
8. ICON TILES
Inline SVG only: 24x24 viewBox, fill="none", stroke="currentColor",
stroke-width="2". Never a raster icon, never an icon font.
========================================================================== */
.bp-icon-tile {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: grid;
place-items: center;
border-radius: var(--bp-radius-sm);
color: var(--bp-blue);
background: var(--bp-blue-100);
}
.bp-icon-tile svg {
width: 20px;
}
.bp-icon-tile--md {
width: 44px;
height: 44px;
flex-basis: 44px;
border-radius: 14px;
}
.bp-icon-tile--md svg {
width: 23px;
}
.bp-icon-tile--lg {
width: 54px;
height: 54px;
flex-basis: 54px;
border-radius: var(--bp-radius-md);
}
.bp-icon-tile--lg svg {
width: 28px;
}
.bp-icon-tile--solid {
color: var(--bp-white);
background: linear-gradient(145deg, var(--bp-blue), var(--bp-navy));
}
/* ==========================================================================
9. CARDS
A row of cards is as tall as its tallest card, so every block that can wrap
gets a fixed line budget. That way the cards come out the same height on
their own and every footer lands on one baseline.
========================================================================== */
.bp-card {
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--bp-line);
border-radius: var(--bp-radius-lg);
background: var(--bp-white);
box-shadow: var(--bp-shadow-md);
transition: .18s;
}
.bp-card:hover {
transform: translateY(-4px);
border-color: #b9cae1;
box-shadow: var(--bp-shadow-lg);
}
.bp-card__media {
height: 150px;
flex: 0 0 150px;
overflow: hidden;
background: var(--bp-gradient-media);
}
.bp-card__media a {
display: block;
width: 100%;
height: 100%;
}
.bp-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bp-card__body {
padding: 18px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.bp-card__title {
margin: 0;
display: -webkit-box;
min-height: 2.6em;
overflow: hidden;
color: var(--bp-navy);
font-size: var(--bp-text-lg);
font-weight: var(--bp-weight-black);
line-height: var(--bp-leading-snug);
letter-spacing: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.bp-card__title a,
.bp-card__title a:link,
.bp-card__title a:visited {
color: inherit;
text-decoration: none;
}
.bp-card__title a:hover,
.bp-card__title a:focus {
color: var(--bp-blue);
}
/* One line, ellipsis. */
.bp-card__meta {
margin: 3px 0 0;
overflow: hidden;
color: var(--bp-muted);
font-size: var(--bp-text-xs);
line-height: 1.45;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Two lines, always occupies two so the cards stay aligned. */
.bp-card__meta--2line {
display: -webkit-box;
min-height: 2.9em;
white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.bp-card__excerpt {
margin: var(--bp-space-xs) 0 0;
display: -webkit-box;
min-height: 4.65em;
overflow: hidden;
color: #4b5a70;
font-size: var(--bp-text-sm);
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* Whatever slack a stretched card still has collects above the divider, so the
footer keeps its own gap and stays flush with the card bottom. */
.bp-card__body>*:nth-last-child(2) {
margin-bottom: auto;
}
.bp-card__footer {
margin-top: var(--bp-space-sm);
padding-top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bp-space-xs);
border-top: 1px solid var(--bp-line);
}
.bp-card__action,
.bp-card__action:link,
.bp-card__action:visited,
.bp-card__action:hover,
.bp-card__action:focus,
.bp-card__action:active {
color: var(--bp-blue);
font-size: var(--bp-text-sm);
font-weight: var(--bp-weight-black);
text-decoration: none;
}
.bp-card__aside,
.bp-card__aside:link,
.bp-card__aside:visited {
color: var(--bp-muted);
font-size: var(--bp-text-xs);
font-weight: var(--bp-weight-bold);
text-decoration: none;
white-space: nowrap;
}
.bp-card__aside:hover,
.bp-card__aside:focus {
color: var(--bp-blue);
}
/* Compact horizontal tile: thumbnail + title, used for stories and related
links. */
.bp-tile {
padding: var(--bp-space-xs);
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: var(--bp-space-xs);
align-items: center;
min-height: 118px;
border: 1px solid var(--bp-line);
border-radius: 14px;
background: var(--bp-white);
}
.bp-tile__thumb {
height: 74px;
overflow: hidden;
border-radius: var(--bp-radius-xs);
background: var(--bp-gradient-media);
}
.bp-tile__thumb a,
.bp-tile__thumb img {
display: block;
width: 100%;
height: 100%;
}
.bp-tile__thumb img {
object-fit: cover;
}
.bp-tile h3 {
margin: 0 0 6px;
display: -webkit-box;
overflow: hidden;
font-size: var(--bp-text-base);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.bp-tile h3 a,
.bp-tile h3 a:link,
.bp-tile h3 a:visited {
color: inherit;
text-decoration: none;
}
.bp-tile h3 a:hover,
.bp-tile h3 a:focus {
color: var(--bp-blue);
}
.bp-tile__link,
.bp-tile__link:link,
.bp-tile__link:visited,
.bp-tile__link:hover,
.bp-tile__link:focus {
color: var(--bp-blue);
font-size: var(--bp-text-xs);
font-weight: var(--bp-weight-black);
text-decoration: none;
}
/* Bordered tile with a centred icon over a label. */
.bp-info-tile {
min-height: 150px;
padding: 18px 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid var(--bp-line);
border-radius: var(--bp-radius-md);
background: var(--bp-white);
}
.bp-info-tile .bp-icon-tile {
margin-bottom: var(--bp-space-xs);
}
.bp-info-tile h3 {
margin: 0 0 5px;
font-size: var(--bp-text-base);
}
.bp-info-tile p {
margin: 0;
color: var(--bp-muted);
font-size: var(--bp-text-2xs);
}
/* Wide callout: icon, heading, one line of explanation. */
.bp-callout {
padding: 22px;
display: grid;
grid-template-columns: 54px 1fr;
gap: var(--bp-space-sm);
align-items: center;
border: 1px solid #b9cae4;
border-radius: var(--bp-radius-lg);
background: var(--bp-white);
box-shadow: 0 10px 24px rgba(26, 48, 89, .08);
}
.bp-callout h3 {
margin: 0 0 var(--bp-space-3xs);
font-size: var(--bp-text-xl);
}
.bp-callout p {
margin: 0;
color: var(--bp-muted);
font-size: var(--bp-text-sm);
}
/* ==========================================================================
10. RATING
The stars are decoration. The rating value is text, always, so the amber
glyphs (2.15:1) never carry the meaning on their own.
4.9
★★★★★
(82)
========================================================================== */
.bp-rating {
margin-top: var(--bp-space-xs);
display: flex;
align-items: center;
gap: 7px;
color: #526078;
font-size: var(--bp-text-xs);
font-weight: var(--bp-weight-bold);
}
.bp-stars {
color: var(--bp-amber);
letter-spacing: 2px;
}
.bp-rating__value {
color: var(--bp-navy);
font-weight: var(--bp-weight-strong);
}
.bp-rating__count {
color: var(--bp-muted);
}
/* ==========================================================================
11. REVIEW CARD
========================================================================== */
.bp-review {
min-width: 0;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 100%;
border: 1px solid var(--bp-line);
border-radius: var(--bp-radius-md);
background: var(--bp-white);
box-shadow: var(--bp-shadow-sm);
}
.bp-review .bp-rating {
margin: 0 0 9px;
}
.bp-review blockquote {
margin: 0;
display: -webkit-box;
overflow: hidden;
color: var(--bp-body);
font-size: var(--bp-text-base);
line-height: 1.62;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
.bp-review__business {
margin-top: auto;
padding-top: 14px;
display: grid;
gap: var(--bp-space-3xs);
}
.bp-review__business strong {
color: var(--bp-navy);
font-size: var(--bp-text-sm);
}
.bp-review__business strong a,
.bp-review__business strong a:link,
.bp-review__business strong a:visited {
color: inherit;
text-decoration: none;
}
.bp-review__business strong a:hover,
.bp-review__business strong a:focus {
color: var(--bp-blue);
}
.bp-review__business address {
margin: 0;
color: var(--bp-muted);
font-size: var(--bp-text-2xs);
font-style: normal;
line-height: 1.45;
}
/* Direct child only: the phone link. The business-name link sits inside the
above and keeps that element's navy, so an unscoped descendant
selector would flatten the name to phone-link styling. */
.bp-review__business>a,
.bp-review__business>a:link,
.bp-review__business>a:visited,
.bp-review__business>a:hover,
.bp-review__business>a:focus {
width: max-content;
color: var(--bp-blue);
font-size: var(--bp-text-2xs);
font-weight: var(--bp-weight-strong);
text-decoration: none;
}
/* ==========================================================================
12. SLIDER
Scroll-snap track driven by two arrows; the scrollbar is hidden but the
track still scrolls with a wheel, a trackpad or a keyboard.
========================================================================== */
.bp-slider {
--bp-per: 4;
--bp-slider-gap: 18px;
position: relative;
}
.bp-slider__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - var(--bp-slider-gap) * (var(--bp-per) - 1)) / var(--bp-per));
gap: var(--bp-slider-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 6px 0 var(--bp-space-sm);
scrollbar-width: none;
-ms-overflow-style: none;
}
.bp-slider__track::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.bp-slider__track>* {
min-width: 0;
scroll-snap-align: start;
}
.bp-slider__nav {
display: flex;
align-items: center;
gap: var(--bp-space-2xs);
flex: 0 0 auto;
}
.bp-slider--3 {
--bp-per: 3;
--bp-slider-gap: 16px;
}
.bp-slider--2 {
--bp-per: 2;
}
/* ==========================================================================
13. DIRECTORY
Link-dense listing (states -> cities, categories -> subcategories) where each
group keeps one visible row and a chevron reveals the rest.
========================================================================== */
.bp-directory__group+.bp-directory__group {
margin-top: 36px;
padding-top: 34px;
border-top: 1px solid var(--bp-line);
}
.bp-directory__heading {
margin: 0 0 22px;
color: var(--bp-navy);
font-size: var(--bp-text-3xl);
letter-spacing: -.03em;
}
.bp-directory__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px 30px;
}
.bp-region {
padding-bottom: 13px;
border-bottom: 1px solid #edf1f7;
}
.bp-region__head {
min-height: 22px;
margin-bottom: 7px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bp-space-2xs);
}
.bp-region__name {
margin: 0;
color: var(--bp-ink);
font-size: var(--bp-text-sm);
font-weight: var(--bp-weight-black);
letter-spacing: -.01em;
}
.bp-region__name a,
.bp-region__name a:link,
.bp-region__name a:visited {
color: inherit;
text-decoration: none;
}
.bp-region__name a:hover,
.bp-region__name a:focus {
color: var(--bp-blue);
}
.bp-region__toggle {
display: none;
}
.bp-region.is-collapsible .bp-region__toggle {
display: grid;
}
.bp-region__toggle svg {
transition: transform var(--bp-transition);
}
.bp-region.is-open .bp-region__toggle svg {
transform: rotate(180deg);
}
.bp-region__links {
display: flex;
flex-wrap: wrap;
gap: 5px 11px;
}
/* Collapsed: one row. `visibility` matters — clipping with overflow alone
leaves the hidden links in the tab order while the toggle still reports
aria-expanded="false". */
.bp-region.is-collapsible .bp-region__links {
max-height: 18px;
overflow: hidden;
}
.bp-region.is-collapsible .bp-region__links>*:not(:first-child) {
visibility: hidden;
}
.bp-region.is-collapsible.is-open .bp-region__links {
max-height: none;
overflow: visible;
}
.bp-region.is-collapsible.is-open .bp-region__links>* {
visibility: visible;
}
.bp-region__links a,
.bp-region__links a:link,
.bp-region__links a:visited {
color: var(--bp-blue);
font-size: var(--bp-text-xs);
font-weight: var(--bp-weight-bold);
line-height: 1.45;
text-decoration: none;
/* keeps a city on one line so the collapsed row height is predictable */
white-space: nowrap;
}
.bp-region__links a:hover,
.bp-region__links a:focus {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ==========================================================================
14. BADGES, PILLS, ALERTS
========================================================================== */
.bp-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--bp-radius-pill);
color: var(--bp-navy);
background: var(--bp-blue-100);
font-size: var(--bp-text-2xs);
font-weight: var(--bp-weight-strong);
letter-spacing: .02em;
line-height: 1.4;
white-space: nowrap;
}
.bp-badge svg {
width: 13px;
flex: 0 0 13px;
}
.bp-badge--success {
color: var(--bp-success);
background: var(--bp-success-bg);
}
.bp-badge--warning {
color: var(--bp-warning);
background: var(--bp-warning-bg);
}
.bp-badge--danger {
color: var(--bp-danger);
background: var(--bp-danger-bg);
}
.bp-badge--neutral {
color: var(--bp-body);
background: var(--bp-surface);
}
/* Award / verified badge: the one place amber is allowed to carry a label,
and it does so as --bp-amber-ink on a pale tint, never white on amber. */
.bp-badge--award {
color: var(--bp-amber-ink);
background: var(--bp-warning-bg);
}
/* Selectable filter chip. */
.bp-pill,
.bp-pill:link,
.bp-pill:visited {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
padding: 0 14px;
border: 1px solid var(--bp-line-control);
border-radius: var(--bp-radius-pill);
color: var(--bp-body);
background: var(--bp-white);
font-size: var(--bp-text-sm);
font-weight: var(--bp-weight-bold);
text-decoration: none;
cursor: pointer;
transition: var(--bp-transition);
}
.bp-pill:hover,
.bp-pill:focus {
color: var(--bp-navy);
background: var(--bp-blue-50);
text-decoration: none;
}
.bp-pill[aria-pressed="true"],
.bp-pill.is-active {
color: var(--bp-white);
border-color: var(--bp-blue);
background: var(--bp-blue);
}
.bp-alert {
display: flex;
align-items: flex-start;
gap: var(--bp-space-xs);
padding: 14px 16px;
border: 1px solid var(--bp-line);
border-radius: var(--bp-radius-sm);
color: var(--bp-body);
background: var(--bp-surface);
font-size: var(--bp-text-base);
}
.bp-alert svg {
width: 20px;
flex: 0 0 20px;
margin-top: 1px;
}
.bp-alert--info {
color: var(--bp-navy);
border-color: #bcd2f7;
background: var(--bp-info-bg);
}
.bp-alert--success {
color: var(--bp-success);
border-color: #a7e0c4;
background: var(--bp-success-bg);
}
.bp-alert--warning {
color: var(--bp-warning);
border-color: #f3d9a3;
background: var(--bp-warning-bg);
}
.bp-alert--danger {
color: var(--bp-danger);
border-color: #f2b8b3;
background: var(--bp-danger-bg);
}
/* ==========================================================================
15. NAVIGATION PATTERNS
========================================================================== */
.bp-breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 0 var(--bp-space-sm);
padding: 0;
list-style: none;
color: var(--bp-muted);
font-size: var(--bp-text-xs);
}
.bp-breadcrumbs li {
display: flex;
align-items: center;
gap: 6px;
}
.bp-breadcrumbs li+li::before {
content: "/";
color: var(--bp-line-control);
}
.bp-breadcrumbs a,
.bp-breadcrumbs a:link,
.bp-breadcrumbs a:visited {
color: var(--bp-blue);
font-weight: var(--bp-weight-bold);
text-decoration: none;
}
.bp-breadcrumbs a:hover,
.bp-breadcrumbs a:focus {
text-decoration: underline;
text-underline-offset: 3px;
}
.bp-breadcrumbs [aria-current="page"] {
color: var(--bp-muted);
}
.bp-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: var(--bp-space-md) 0 0;
padding: 0;
list-style: none;
}
.bp-pagination a,
.bp-pagination a:link,
.bp-pagination a:visited,
.bp-pagination span {
min-width: 42px;
min-height: 42px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--bp-line-control);
border-radius: var(--bp-radius-xs);
color: var(--bp-navy);
background: var(--bp-white);
font-size: var(--bp-text-sm);
font-weight: var(--bp-weight-bold);
text-decoration: none;
transition: var(--bp-transition);
}
.bp-pagination a:hover,
.bp-pagination a:focus {
color: var(--bp-white);
border-color: var(--bp-blue);
background: var(--bp-blue);
}
.bp-pagination [aria-current="page"] {
color: var(--bp-white);
border-color: var(--bp-blue);
background: var(--bp-blue);
}
.bp-pagination .bp-pagination__gap {
min-width: auto;
border: 0;
background: transparent;
color: var(--bp-muted);
}
.bp-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--bp-space-md);
margin-bottom: var(--bp-space-md);
border-bottom: 1px solid var(--bp-line);
}
.bp-tabs button,
.bp-tabs a {
padding: 0 2px 12px;
border: 0;
border-bottom: 2px solid transparent;
color: var(--bp-muted);
background: none;
font-size: var(--bp-text-base);
font-weight: var(--bp-weight-strong);
text-decoration: none;
cursor: pointer;
transition: var(--bp-transition);
}
.bp-tabs button:hover,
.bp-tabs a:hover {
color: var(--bp-navy);
}
.bp-tabs [aria-selected="true"],
.bp-tabs [aria-current="page"] {
color: var(--bp-navy);
border-bottom-color: var(--bp-blue);
}
/* Disclosure. The panel is toggled with the `hidden` attribute rather than a
height animation, so collapsed content leaves the tab order with it. */
.bp-accordion__item {
border-bottom: 1px solid var(--bp-line);
}
.bp-accordion__trigger {
width: 100%;
padding: 17px 2px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bp-space-xs);
border: 0;
color: var(--bp-navy);
background: none;
font-size: var(--bp-text-md);
font-weight: var(--bp-weight-strong);
text-align: left;
cursor: pointer;
}
.bp-accordion__trigger svg {
width: 18px;
flex: 0 0 18px;
transition: transform var(--bp-transition);
}
.bp-accordion__trigger[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.bp-accordion__panel {
padding: 0 2px 18px;
color: var(--bp-body);
font-size: var(--bp-text-base);
}
.bp-accordion__panel[hidden] {
display: none;
}
/* ==========================================================================
16. TABLE
========================================================================== */
.bp-table-wrap {
overflow-x: auto;
border: 1px solid var(--bp-line);
border-radius: var(--bp-radius-md);
}
.bp-table {
width: 100%;
border-collapse: collapse;
font-size: var(--bp-text-base);
}
.bp-table th,
.bp-table td {
padding: 13px 16px;
text-align: left;
border-bottom: 1px solid var(--bp-line);
}
.bp-table th {
color: var(--bp-navy);
background: var(--bp-surface);
font-size: var(--bp-text-xs);
font-weight: var(--bp-weight-strong);
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
.bp-table td {
color: var(--bp-body);
}
.bp-table tbody tr:last-child td {
border-bottom: 0;
}
.bp-table tbody tr:hover td {
background: var(--bp-blue-50);
}
/* ==========================================================================
17. PRICING
========================================================================== */
.bp-price {
position: relative;
padding: 28px;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--bp-line);
border-radius: var(--bp-radius-xl);
background: var(--bp-white);
box-shadow: var(--bp-shadow-md);
}
/* Exactly one plan per page may be featured. */
.bp-price--featured {
border-color: var(--bp-blue);
box-shadow: var(--bp-shadow-lg);
}
.bp-price__name {
margin: 0 0 var(--bp-space-3xs);
color: var(--bp-navy);
font-size: var(--bp-text-xl);
font-weight: var(--bp-weight-black);
}
.bp-price__amount {
display: flex;
align-items: baseline;
gap: 6px;
margin: var(--bp-space-2xs) 0 var(--bp-space-sm);
color: var(--bp-navy);
font-size: 44px;
font-weight: var(--bp-weight-black);
letter-spacing: var(--bp-tracking-tight);
line-height: 1;
}
.bp-price__period {
color: var(--bp-muted);
font-size: var(--bp-text-base);
font-weight: var(--bp-weight-bold);
letter-spacing: normal;
}
.bp-price__features {
margin: 0 0 var(--bp-space-md);
padding: 0;
list-style: none;
display: grid;
gap: var(--bp-space-2xs);
color: var(--bp-body);
font-size: var(--bp-text-base);
}
.bp-price__features li {
display: flex;
align-items: flex-start;
gap: var(--bp-space-2xs);
}
.bp-price__features svg {
width: 18px;
flex: 0 0 18px;
margin-top: 2px;
color: var(--bp-success);
}
.bp-price .bp-btn {
margin-top: auto;
}
/* ==========================================================================
18. STATES
========================================================================== */
.bp-empty {
padding: 48px 24px;
display: grid;
justify-items: center;
gap: var(--bp-space-xs);
text-align: center;
border: 1px dashed var(--bp-line-strong);
border-radius: var(--bp-radius-lg);
background: var(--bp-surface-tint);
}
.bp-empty h3 {
margin: 0;
font-size: var(--bp-text-xl);
}
.bp-empty p {
margin: 0;
max-width: 46ch;
color: var(--bp-muted);
font-size: var(--bp-text-base);
}
.bp-skeleton {
border-radius: var(--bp-radius-xs);
background: linear-gradient(90deg, #eef2f8 25%, #f7f9fc 37%, #eef2f8 63%);
background-size: 400% 100%;
animation: bp-skeleton 1.4s ease infinite;
}
@keyframes bp-skeleton {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
.bp-skeleton--text {
height: 12px;
margin-bottom: var(--bp-space-2xs);
}
.bp-skeleton--title {
height: 20px;
width: 60%;
margin-bottom: var(--bp-space-xs);
}
.bp-skeleton--media {
height: 150px;
border-radius: var(--bp-radius-lg) var(--bp-radius-lg) 0 0;
}
/* ==========================================================================
19. DIALOG
Built for the native