inline so the badge sits on the same line, and drop its default margins (so the alert's own alignment applies). */ .pb-alert-inline > p { display: inline; margin: 0; } /* CKEditor content ends with the browser/Bootstrap bottom margin on its last
/, which shows up as a gap between a rich-text block and whatever
block follows it. The block's own padding controls that spacing, so drop the
trailing margin (and the leading one, for the same reason at the top).
Scoped to the rich-text/raw-HTML blocks: the Alert block also carries
.ck-content but lays its badge and message out inline, and a blanket
first/last-child rule there would fight its own alignment. */
.pb-richtext > *:last-child,
.pb-html > *:last-child { margin-bottom: 0; }
.pb-richtext > *:first-child,
.pb-html > *:first-child { margin-top: 0; }
/* ---- Shared _style wrapper (padding scale) ---- */
.pb-pad-top-0 { padding-top: 0 !important; }
.pb-pad-top-sm { padding-top: 1rem; }
.pb-pad-top-md { padding-top: 2rem; }
.pb-pad-top-lg { padding-top: 3.5rem; }
.pb-pad-top-xl { padding-top: 5rem; }
.pb-pad-bottom-0 { padding-bottom: 0 !important; }
.pb-pad-bottom-sm { padding-bottom: 1rem; }
.pb-pad-bottom-md { padding-bottom: 2rem; }
.pb-pad-bottom-lg { padding-bottom: 3.5rem; }
.pb-pad-bottom-xl { padding-bottom: 5rem; }
.pb-width-narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
/* Between narrow and wide: holds a section in from the container edges without
squeezing it to reading width. */
.pb-width-medium { max-width: 1020px; margin-left: auto; margin-right: auto; }
/* Must stay WIDER than the page container (main-layout.css), which now steps up
to 1560px on a large screen — at a flat 1320px "Wide" would end up narrower
than default there, inverting what the control means. */
.pb-width-wide { max-width: 1320px; margin-left: auto; margin-right: auto; }
@media (min-width: 1700px) {
.pb-width-wide { max-width: 1680px; }
}
/* Brand gradient background (for banded titles / sections via _style.bg). */
.pb-bg-gradient {
background: linear-gradient(135deg, var(--bs-primary, #0d6efd), #6610f2);
}
/* Hover effects (via _style.hover). Matches the LocationProfile card lift. */
.pb-hover-lift,
.pb-hover-scale,
.pb-hover-shadow,
.pb-hover-lift-shadow,
.pb-hover-lift-shadow-border {
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pb-hover-lift:hover { transform: translateY(-4px); }
.pb-hover-scale:hover { transform: scale(1.03); }
.pb-hover-shadow:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.pb-hover-lift-shadow:hover {
transform: translateY(-4px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
/* Combined: lift + shadow + border on hover. A transparent 1px border by default
keeps layout stable so the card doesn't shift when the border appears. Color
comes from the author-chosen --pb-hover-border-color (falls back to brand red).
!important so the red wins even when the cell also has Bootstrap's `.border`. */
.pb-hover-lift-shadow-border {
border: 1px solid transparent;
}
.pb-hover-lift-shadow-border:hover {
transform: translateY(-4px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
border-color: var(--pb-hover-border-color, var(--bs-danger, #dc3545)) !important;
}
/* ---- Stats ---- */
.pb-stat { text-align: center; padding: 1rem; }
.pb-stat-value {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.1;
/* Inline-block so it keeps its line-height in the grid layout (where it sits
alone in a div) and can take a shape's padding in the inline layout. */
display: inline-block;
/* Fixed-width digits: stops the number jittering as it counts up. */
font-variant-numeric: tabular-nums;
}
.pb-stat-icon { font-size: 1.75rem; margin-bottom: 0.5rem; opacity: 0.85; }
.pb-stat-label { font-size: 0.95rem; opacity: 0.8; }
/* Side layout: icon left of the number/label, left-aligned. */
.pb-stat--side {
display: flex;
align-items: center;
text-align: left;
gap: 0.75rem;
}
.pb-stat--side .pb-stat-icon { margin-bottom: 0; flex-shrink: 0; }
/* Number shapes are Bootstrap utilities (rounded-pill / rounded-3 / d-inline-flex)
plus padding; only the circle needs CSS Bootstrap has no utility for — it must
stay square whatever the number's length. */
.pb-stat-shape { padding: 0.15em 0.6em; }
.pb-stat-shape--circle { aspect-ratio: 1; padding: 0.5em; }
/* The counter's numbers sit inline in a sentence, so they need to align with
the words around them and leave room for the shape when a line wraps. */
.pb-counter { line-height: 1.9; }
.pb-counter .pb-stat-value { vertical-align: middle; }
/* ---- Testimonials ---- */
.pb-testimonial {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0.75rem;
padding: 1.5rem;
height: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.pb-testimonial-quote { font-style: italic; margin-bottom: 1rem; }
.pb-testimonial-stars { color: #f5a623; letter-spacing: 1px; margin-bottom: 0.5rem; }
.pb-testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.pb-testimonial-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
/* ---- Team ---- */
.pb-team-card { text-align: center; }
.pb-team-photo {
width: 100%; aspect-ratio: 1/1; object-fit: cover;
border-radius: 0.5rem; margin-bottom: 0.75rem;
}
.pb-team-name { font-weight: 600; margin-bottom: 0.15rem; }
.pb-team-role { color: #6c757d; font-size: 0.9rem; }
/* ---- Gallery ---- */
.pb-gallery-item { position: relative; overflow: hidden; border-radius: 0.5rem; }
.pb-gallery-item img {
width: 100%; aspect-ratio: 4/3; object-fit: cover;
transition: transform 0.3s ease;
}
.pb-gallery-item:hover img { transform: scale(1.04); }
.pb-gallery-caption { font-size: 0.85rem; color: #6c757d; margin-top: 0.35rem; }
/* Featured mosaic: first image spans 2×2 (big), the rest auto-flow into a dense
grid. `dense` fills gaps so any image count (3, 4, 5, 6, …) stays balanced —
no per-count logic needed. Column count set via --pb-mosaic-cols (default 3). */
.pb-gallery-mosaic {
display: grid;
grid-template-columns: repeat(var(--pb-mosaic-cols, 3), 1fr);
grid-auto-flow: dense;
gap: 0.75rem;
}
.pb-gallery-mosaic > .pb-gallery-item:first-child {
grid-column: span 2;
grid-row: span 2;
}
.pb-gallery-mosaic > .pb-gallery-item,
.pb-gallery-mosaic > .pb-gallery-item img {
height: 100%;
}
.pb-gallery-mosaic > .pb-gallery-item img {
aspect-ratio: auto;
}
@media (max-width: 575.98px) {
.pb-gallery-mosaic {
grid-template-columns: repeat(2, 1fr);
}
.pb-gallery-mosaic > .pb-gallery-item:first-child {
grid-column: 1 / -1;
grid-row: auto;
}
}
/* ---- Feature grid (layout via Bootstrap utilities in FeatureGrid.js) ---- */
.pb-feature-icon { font-size: 2rem; margin-bottom: 1.25rem; color: var(--bs-primary, #0d6efd); }
/* Card title / body defaults: a real heading-to-subtitle step so a card reads
correctly with no author setup. Overridable per block (title_size /
title_weight / text_size). */
.pb-feature-title { font-size: 1.125rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.75rem; }
.pb-feature-text { font-size: 0.9375rem; line-height: 1.6; }
/* Image card: rounded, clipped, zoom on hover. */
.pb-feature-img { overflow: hidden; border-radius: 0.5rem; }
.pb-feature-img img {
width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
transition: transform 0.35s ease;
}
.pb-feature-img:hover img { transform: scale(1.06); }
/* Percent ring sits where the icon would, with the same spacing below it. */
.pb-feature-ring { display: block; margin-bottom: 0.75rem; }
.pb-feature.flex-row .pb-feature-ring { margin-bottom: 0; }
/* Every block icon renders in the SAME square box, badged or not, so a plain
glyph and one inside a circle read at the same size. react-icons emits
width/height="1em" attributes; CSS overrides those. The box is square, so a
tall glyph ($) and a wide one (bill) both fit it rather than one scaling to
the row height. Per-item override: --pb-icon-size. */
.pb-feature-icon > svg,
.pb-stat-icon > svg {
width: var(--pb-icon-size, 44px);
height: var(--pb-icon-size, 44px);
}
/* Boxed/circle icon badges shouldn't keep the plain icon's bottom margin. */
.pb-feature-icon.border { margin-bottom: 0.75rem; font-size: 1.5rem; }
/* Side-icon layout only (icon LEFT of the text): the icon sits beside the text,
so it needs no gap under it. Scoped to .flex-row because a top-icon card with
a CTA is ALSO a flex card — a column — and there the margin is the only thing
separating the icon from the title. */
.pb-feature.flex-row .pb-feature-icon { margin-bottom: 0; flex-shrink: 0; }
/* `pb-feature-link` marks a card that IS a link (reset color/underline) and
powers the CTA's hover states. The lift is opt-in via the block's "Card hover"
setting (pb-hover-*), so a card set to None stays still — it used to lift
regardless, overriding that choice. */
.pb-feature-link { transition: transform .15s ease, box-shadow .15s ease; }
/* Card CTA ("Read About X →" / a filled button). Both are s, because the
card itself is already the — see CardCta in FeatureGrid.js.
Values match the home page's .icon-link (home.css) so a builder-made
conditions grid and the hand-built one animate identically. */
.pb-feature-cta {
font-size: small;
color: hsl(0, 100%, 40%);
}
.pb-feature-cta .arrow-right { transition: transform 0.3s ease; }
.pb-feature-link:hover .pb-feature-cta .arrow-right { transform: translateX(5px); }
/* Spacing above the CTA is a pt-4 on its wrapper (see CardCta) — mt-auto pins
it to the card's bottom, so a margin here would be overridden by it. */
/* The button carries the author's color as an inline background, so a :hover
background here would lose to it. Darkening with a brightness filter keeps
ONE rule working for every color instead of a shade per card. */
.pb-feature-cta-btn {
padding: 0.5rem 1.25rem;
font-weight: 600;
transition: filter .15s ease, box-shadow .15s ease;
}
.pb-feature-link:hover .pb-feature-cta-btn,
.pb-feature-cta-btn:hover {
filter: brightness(0.9);
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15);
}
/* ---- Button icon hover effects (Button / Button Group "Icon hover effect")
The effect class sits on the .btn and the icon carries .pb-btn-ico, so the
movement is driven by hovering the BUTTON, not the icon itself (a 14px glyph
is too small to hover deliberately). A button with no effect chosen gets no
class at all, so it keeps a static icon. ---- */
.pb-btn-ico { transition: transform .25s ease; }
/* Icon follows the text's direction of travel. */
.pb-btn-ico-slide:hover .pb-btn-ico { transform: translateX(4px); }
.pb-btn-ico-slide-left:hover .pb-btn-ico { transform: translateX(-4px); }
.pb-btn-ico-grow:hover .pb-btn-ico { transform: scale(1.25); }
.pb-btn-ico-rotate:hover .pb-btn-ico { transform: rotate(45deg); }
/* Bounce needs keyframes — a single transform can't go out and come back. */
.pb-btn-ico-bounce:hover .pb-btn-ico { animation: pb-btn-ico-bounce .6s ease infinite; }
@keyframes pb-btn-ico-bounce {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
/* Respect the OS "reduce motion" setting: keep the icon still rather than
looping an animation for someone who asked for less movement. */
@media (prefers-reduced-motion: reduce) {
.pb-btn-ico { transition: none; }
.pb-btn-ico-bounce:hover .pb-btn-ico { animation: none; }
}
/* Symptom links: dark by default, brand red on hover. */
.pb-symptom-link { color: #212529; transition: color .15s ease; }
.pb-symptom-link:hover { color: var(--bs-danger, #dc3545); }
/* ---- Steps (padding/border via Bootstrap utilities in Steps.js) ---- */
.pb-step-number {
width: 36px; height: 36px; border-radius: 50%;
background: #212529; color: #fff; /* default dark; overridable per-block */
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
}
.pb-step-meta { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
/* ---- CTA banner ---- */
.pb-cta {
padding: 3rem 1.5rem; border-radius: 0.75rem;
}
.pb-cta-gradient {
background: linear-gradient(135deg, var(--bs-primary, #0d6efd), #6610f2);
color: #fff;
}
.pb-cta h2 { margin-bottom: 0.5rem; }
/* ---- Custom-colored button ---- */
/* Colors are set inline from the block's bg_color/text_color; inline styles
can't do :hover, so darken slightly on hover with a brightness filter. */
.pb-btn-custom { transition: filter 0.15s ease; }
.pb-btn-custom:hover,
.pb-btn-custom:focus { filter: brightness(0.9); }
/* ---- FAQ (react-bootstrap Accordion; transition handled by Bootstrap) ---- */
.pb-faq .accordion-button { font-weight: 600; }
/* ---- Accordion / tabs (static, native details) ---- */
.pb-accordion details {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 0.5rem;
}
.pb-accordion summary { font-weight: 600; cursor: pointer; }
/* ---- Care Relief (household picker → income bands) ---- */
.pb-cr-picker { max-width: 320px; }
.pb-cr-dot { width: 18px; height: 18px; }
.pb-cr-seg { height: 14px; }
/* Rounded ends on the outer segments so the bar reads as one pill. */
.pb-cr-bar .pb-cr-seg:first-child { border-radius: 7px 0 0 7px; }
.pb-cr-bar .pb-cr-seg:last-child { border-radius: 0 7px 7px 0; }