/*
* Component classes — ported incrementally from the preview lab.
* Must stay first so postcss-import can inline before @tailwind.
* See assets/src/css/components/_index.css for the porting workflow.
*//**
* Component styles ported from the static preview lab.
*
* Source: themes/bss_design/preview/src/input.css (@layer components)
*
* Porting workflow:
* 1. Copy a logical block from preview input.css into a file here.
* 2. Keep each file wrapped in @layer components { ... }.
* 3. Register the file below (order matters when selectors overlap).
* 4. Run `npm run build` in themes/bss.
* 5. Leave preview input.css unchanged — it stays the HTML lab source.
*
* Incremental port — not all preview components live here yet.
*//**
* Global navigation — mega-menu + mobile off-canvas accordion.
* Preview source: input.css (mega-panel, mobile-menu, m-acc).
*/
/**
* Breadcrumb bar — red strip under the global nav.
* Preview: blog.html, program pages, etc.
*
* Live site bar is 34px tall (devtools reports about 33.98px) with 15px type.
* py-3.5 (14px top and bottom) plus 16px text-chrome made staging about 50px.
* Keep vertical padding off this bar so the strip stays at the live height.
*
* The row is a fixed 34px flex box and the type uses line-height 1.
* An 18px line box centered the box, not the letters, so the words sat high
* and left a larger gap along the bottom edge.
*/
/**
* Location Search CTA banner — copy left, search pill right.
* Preview source: input.css (loc-search-cta__*).
*/
/**
* Reusable section layouts — photo grids, icon cards, benefit cards.
* Preview source: input.css (text-photo-grid, icon-feature-cards, barracuda-benefits).
*/
/**
* Water Safety page — hero, facts, tips, resource cards.
* Preview source: themes/bss_design/preview/src/water-safety.html + input.css.
*/
/**
* Franchise homepage hero — preview: locations.html COMPONENT Franchise homepage hero.
*/
/**
* Blue wave join + carousel chrome — preview input.css (.section-wave, .blue-wave-section, .carousel-*).
*/
/**
* Global footer wave join — preview input.css (.section-wave--footer).
*
* The SVG fill is the navy wave; troughs above the crest are transparent.
* --bss-footer-join-bg is painted from the last page section (see site-footer.php)
* so those troughs match that section instead of showing the white page background.
*/
/**
* Location finder — preview locations.html layout + [bss_locator] skin.
*
* Architecture:
* - Preview HTML/CSS (`loc-finder__*`) = design source of truth.
* - Theme (`bss-location-finder`) = tokens + layout + visual styles.
* - Plugin (`bss-integration`, locator.js) = map/search behavior; markup uses
* preview layout classes plus `plp-*` hooks required by locator.js.
* - Legacy `plugins/bss-integration/assets/locator/locator.css` is disabled via
* `bss_integration_locator_enqueue_style` filter.
*/
/**
* Program cards — tabbed grid + Programs Hub 3-col grid.
* Preview: input.css (.prog-tab, .prog-card-grid, .prog-wave).
*/
/**
* FAQ list — preview input.css (.faq-section, .faq-item). Always-open rows.
*/
/**
* Contact form — preview locations.html + Gravity Forms skin.
*
* Preview: pill inputs (.form-field), 2-col grid (866px), centered CTA.
* GF keeps its markup/classes; theme resets GF Theme Framework chrome and
* applies our tokens inside .bss-contact-form only.
*/
/**
* Program detail header (Single Program hero).
* Preview source: programs-tadpole.html / programs-swimboree.html — .program-detail-header*
*/
/**
* Stats counter bar — Corporate Global Options stats_items.
* Preview source: programs-tadpole.html — .stats-counter-bar*
*/
/**
* Scroll-triggered reveals — opt-in via data-anim.
*
* Types: fade | fade-up | zoom-fade
* Optional: data-anim-delay="80" (ms)
* Repeat / fade-out later: add data-anim-repeat (toggles .is-in on leave).
*
* Hidden styles apply only when html.bss-js is set, so no-JS and the
* block editor keep the content visible.
*/
/**
* Discover Difference — feature cards 6-up grid / mobile carousel.
* Preview source: index.html — .feature-photo-card + .feature-6up__track
*/
/**
* Pool / location detail hero.
* Preview source: pool-detail.html — .pool-detail-hero-band / .pool-detail-hero*
*
* Full-bleed tinted band; inner row caps at the 1440 canvas so wide screens
* show gutters instead of stretching the photo out of aspect.
*/
/**
* Pool Detail dynamic sections.
*
* The markup follows pool-detail.html. Data is resolved in
* functions/single-store.php and the partials only render their DTOs.
*/
/**
* Accordion section — title + description, then navy accordions (Accordion Section block).
* Accordion look reuses .pool-pricing-acc* (pool-detail-components.css).
* Preview source: themes/bss_design/preview/src/pool-detail.html ("View More Pricing Details").
*/
/**
* Pool Detail enrollment and schedule selector.
*
* The schedule rows are rendered from the JackRabbit DTO. Colours are
* supplied by the program configuration and applied through two safe custom
* properties on each card.
*/
/**
* Local SEO pages — page-intro hero variants + swim-lessons-near sections.
* Preview source: input.css (page-intro-hero*, swim-lessons-near-*, feature-photo-*).
*/
/**
* Find-a-Lesson wizard (week10) — ported from preview input.css.
* Preview: themes/bss_design/preview/src/find-a-lesson.html
*
* Chrome (hero + card + title) is theme-owned. Quiz markup comes from
* Gravity Forms inside .find-a-lesson-wizard__form — style GF to match
* the preview radio/option look as closely as the form structure allows.
*/
/**
* Blog listing + post detail — preview input.css (blog-grid / blog-card / blog-detail).
*/
/**
* Thank You confirmation (theme).
* Ported from preview input.css. Live /greater-virginia-beach/thank-you — no Figma.
* Pale tint band, left-aligned title + copy, centered red pill.
*/
/**
* Download Our App hero (theme).
* Ported from preview input.css. Live /download-our-app/ — no Figma.
* Light tint band, copy + checks left, phone mockup right, official store
* badges under the list. Phone image is portrait with a device frame — contain, never crop.
*/
/**
* Swim Lessons hub (theme).
* Ported from preview input.css. Live /alamitosbay-loscerritos/swim-lessons — no Figma.
* Light page-intro hero + 2-col town cards.
*/
/**
* Lifeguard Certifications — certification section + accordion + CTA.
* Preview source: input.css (.lifeguard-cert*, .lifeguard-prereq-list*, .faq-icon).
*/
/**
* Summer Sessions — enroll band, session dates, Millbrae gradient cards.
* Ported from preview input.css. Keep in sync with preview tokens.
*/
/**
* Rate table (block) — optional heading + 2–4 column table in the Session Dates
* style: rounded navy-bordered card, navy header row, alternating white / light
* blue rows. Reference: .summer-session-dates* in summer-sessions.css.
* Used inside the Text Section block, which supplies the section frame.
*/
/**
* Text Section (block) — section frame + theme typography for the Gutenberg
* blocks inside it (headings, paragraphs, lists, Rate Tables).
* Scoped to .bss-text-section__content so core blocks elsewhere are untouched;
* the same rules apply in the editor canvas (editor.css).
*/
/**
* Private Lessons · register by location — ported from the preview lab.
* Preview source: themes/bss_design/preview/src/input.css (.private-lessons-locations*),
* markup: private-lessons.html. Used by the Register by Location block.
*/
/**
* Specialty program layouts — Aqua Active, Barracuda, etc.
* Preview source: themes/bss_design/preview/src/input.css
*/
/**
* Adult (custom) program single — overview cards, how it works, schedule panel.
* Hero reuses .page-intro-hero. FAQ, testimonials, and contact stay shared.
*/
/**
* Female Only page — modifiers on shared components.
* Hero reuses .page-intro-hero--light; What to Expect reuses .water-safety-tips--navy.
* Preview source: input.css (.female-only-hero*, .female-only-expect*).
*/
/**
* Promotions page — Offer Card + Current Promotions.
* Preview source: input.css (.promotions-offer-card*, .promotions-current*).
*/
/**
* Cancellation page — intro, policy + photo, break options.
* Policy reuses the shared .cancellation-policy layout (local-seo-pages.css);
* .cancellation-policy--page restores the preview typography for rich text.
* Preview source: input.css (.cancellation-intro*, .cancellation-policy*, .cancellation-break*).
*/
/**
* Referral program — tagline, info cards, Ready to Refer, closing line.
*
* Preview source: themes/bss_design/preview/src/input.css
* (block “Referral program — simple layout”).
* The hero, buddy split, refer band, FAQ, and contact form use shared styles.
*/
/**
* Pricing page — swim plan banner, special programs cards, details stack,
* free trial band and Who We Teach.
*
* Source: themes/bss_design/preview/src/input.css + pricing.html.
* Dark hero lives in shared-sections.css; plan cards in pool-detail-components.css.
*/
/**
* Birthday Parties page sections.
* Preview: themes/bss_design/preview/src/birthday-parties.html
*/
/**
* About Us — "Our Story" image + text (bss/media-text) and hero video embed
* (bss/page-intro-video). Layout reuses page-intro-hero + cancellation-policy.
* Preview source: input.css (about-us-story, about-us-hero__video).
*/
/**
* Pool Partnerships — 5-up icon cards, centered intro with links, button,
* and the partner testimonial carousel (one full review per slide).
* Preview source: input.css (icon-feature-cards__inner--5col,
* pool-partnership-benefits__*, testimonial-card--partner).
*/
/**
* Peppa Pig Partnership.
* Preview: themes/bss_design/preview/src/peppa-pig-partnership.html
*
* Speech bubbles, waves, and characters are the supplied SVGs.
* Their fills are partnership artwork (#5FD0DF / #00ABC8).
* Type, buttons, and ink use BSS tokens.
* Bubble artwork URLs are set on .bss-peppa as --peppa-box and --peppa-box-tall.
*/
/**
* 404 — page not found (theme). Main site and franchise subsites.
* Pale tint band, centered copy, red pill + navy outline pill.
*/
/**
* Default page (theme) — pages with plain editor content and no BSS blocks
* or page template (Privacy Policy, Terms, legal copy).
* Base typography comes from .bss-text-section__content; this file adds the
* frame and the elements legal copy uses that the Text Section block doesn't.
*/
/**
* Palette colour overrides for blocks with background / typography options
* (acf/support/block-styles.php). `.bss-block-style` doubles specificity so
* these win over component title / copy rules regardless of import order.
* `.bss-accent` elements (eyebrows, sky taglines, text inside cards) keep their own colour.
*/
/**
* Meet the Team — staff photo carousel.
* Preview: themes/bss_design/preview/src/meet-the-team.html
* Cards are 1 / 2 / 4-up. Widths use the carousel viewport (cqw).
*/
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: Poppins, ui-sans-serif, system-ui, sans-serif; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-feature-settings: normal; /* 2 */
font-variation-settings: normal; /* 3 */
font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
:root {
--bss-primary: #132eab;
--bss-cta: #dc001f;
--bss-sky: #009ddb;
--bss-star: #ffdc27;
--bss-program-blue: #2863a2;
--bss-program-teal: #19a2a8;
--bss-program-purple: #902e8e;
--bss-body: #444444;
--bss-section-tint: #f1f8fc;
--bss-light-bg: #eef3fa;
--bss-panel-bg: #dfeaf5;
--bss-field-border: #637fbf;
--bss-search-border: #9aa9b8;
--bss-border: #d8e4f0;
/*
* Summer Sessions · Millbrae Meadows program-card gradients.
* Sampled from live Elementor (bayarea/summer-sessions-millbrae-meadows).
* Mirror of preview input.css :root — keep in sync.
*/
--bss-summer-mm-orange: #f37921;
--bss-summer-mm-yellow: #fab917;
--bss-summer-mm-red: #e02a34;
--bss-summer-mm-blue: #0299ce;
--bss-summer-mm-lime: #bad745;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
/* Page body / paragraphs — 18px (text-copy token). */
/* Poppins is self-hosted in the parent theme (assets/fonts + theme.json). */
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.mega-panel {
pointer-events: none;
visibility: hidden;
--tw-translate-y: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
opacity: 0;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.has-mega:hover .mega-panel,
.has-mega:focus-within .mega-panel,
.has-mega.is-open .mega-panel {
pointer-events: auto;
visibility: visible;
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
opacity: 1;
}
/* Mega-menu chevron — Figma #12A9DE (nav label stays primary). */
.mega-chevron {
color: #12a9de;
}
/* Chevron flips when its menu is open. */
.has-mega:hover .mega-chevron,
.has-mega:focus-within .mega-chevron,
.has-mega.is-open .mega-chevron {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/*
* Swim Programs mega menu — column titles stay on one line so the
* program cards align across all four columns (corporate + location nav).
*/
.mega-programs-grid > div {
display: flex;
min-width: 0px;
flex-direction: column;
}
/* Column label (a , not a heading: the nav precedes the page H1). */
.mega-programs-grid__label {
min-width: 0px;
}
@media (min-width: 1024px) {
.mega-programs-grid__label {
min-height: 2.25rem;
white-space: nowrap;
font-size: 13px;
line-height: 1.375;
letter-spacing: 0em;
}
}
.mega-programs-grid > div > .mt-4 {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
/*
* Short labels stay 96px. A longer title grows the card instead of being
* clipped (Private & Semi-Private, FAQ - Customer Service).
* Height is plain CSS: @apply h-* would copy this selector into nav utilities.
*/
.mega-program-card {
box-sizing: border-box;
width: 100%;
flex-shrink: 0;
flex-direction: column;
justify-content: center;
gap: 0.125rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
height: auto;
min-height: 96px;
}
/* Named classes — :first/:last-child both match the title when subtitle is absent. */
.mega-program-card__title {
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
.mega-program-card__subtitle {
font-size: 12px;
line-height: 1.375;
}
/*
* More is a grid, so every card in a row matches the tallest one.
* Side padding stays tighter so "Download App" can stay on one line.
*/
.mega-more-grid .mega-program-card {
height: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
/* Mobile off-canvas menu, toggled by the hamburger (.nav-open on the header). */
.mobile-menu {
pointer-events: none;
position: fixed;
inset: 0px;
z-index: 60;
opacity: 0;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
@media (min-width: 1024px) {
.mobile-menu.enroll-form__error {
display: none;
}
.mobile-menu {
display: none;
}
}
.nav-open .mobile-menu {
pointer-events: auto;
opacity: 1;
}
.mobile-menu__panel {
position: absolute;
right: 0px;
top: 0px;
display: flex;
height: 100%;
width: 100%;
--tw-translate-x: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
flex-direction: column;
overflow-y: auto;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.nav-open .mobile-menu__panel {
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* Accordion sections inside the mobile menu (one open at a time). */
.m-acc__head {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
border-radius: 16px;
background-color: var(--bss-light-bg);
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 16px;
line-height: 1.5;
font-weight: 600;
color: var(--bss-primary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.blue-wave-section > .m-acc.is-open .m-acc__head {
margin-top: -2px;
}
footer > .m-acc.is-open .m-acc__head {
margin-top: -2px;
}
.m-acc.is-open .m-acc__head {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.m-acc.is-open .m-acc__head .m-chevron {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.m-acc__body {
display: grid;
grid-template-rows: 0fr;
transition-property: grid-template-rows;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.m-acc__body > div {
overflow: hidden;
}
.m-acc.is-open .m-acc__body {
grid-template-rows: 1fr;
}
.bss-breadcrumbs {
display: flex;
align-items: center;
height: 34px;
}
.bss-breadcrumbs__inner {
display: flex;
align-items: center;
height: 100%;
}
.bss-breadcrumbs__list {
margin: 0;
padding: 0;
font-size: 15px;
line-height: 1;
font-weight: 500;
/*
* Poppins draws the letters low in this 34px row.
* Measured on the staging crop: the cap-height block sat about 4px
* below the bar's midpoint, so shift the whole line up.
*/
transform: translateY(-4px);
}
.bss-breadcrumbs__list svg {
display: block;
}
.loc-search-cta__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 64px;
padding-bottom: 64px;
text-align: center;
}
@media (min-width: 768px) {
.loc-search-cta__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.loc-search-cta__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 4rem;
padding: 80px;
text-align: left;
}
}
.loc-search-cta__copy {
width: 100%;
}
@media (min-width: 1024px) {
.loc-search-cta__copy {
max-width: 36rem;
flex: 1 1 0%;
}
}
.loc-search-cta__search {
/* Stack form + geo link; keep geo centred under the pill at every size. */
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
}
@media (min-width: 1024px) {
.loc-search-cta__search {
max-width: 36rem;
flex: 1 1 0%;
}
}
.loc-search-cta__form {
width: 100%;
}
.loc-search-cta__field {
/* Figma form frame: 16px 16px 16px 24px, space-between, stretch. */
display: flex;
align-items: center;
justify-content: space-between;
align-self: stretch;
border-radius: 40px;
border-width: 1px;
border-color: var(--bss-search-border);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding: 16px 16px 16px 24px;
}
.loc-search-cta__field input {
/* No extra vertical padding — row height comes from the frame inset only. */
min-width: 0px;
flex: 1 1 0%;
background-color: transparent;
padding-top: 0px;
padding-bottom: 0px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.loc-search-cta__field input::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(154 163 178 / var(--tw-text-opacity, 1));
}
.loc-search-cta__field input::placeholder {
--tw-text-opacity: 1;
color: rgb(154 163 178 / var(--tw-text-opacity, 1));
}
.loc-search-cta__field input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.loc-search-cta__field button {
/* Compact pill nested inside the 16px frame — avoid double-stacking py-4 + py-3. */
flex-shrink: 0;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.loc-search-cta__field button:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.mega-programs-grid > div > .loc-search-cta__geo {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.loc-search-cta__geo {
margin-top: 1rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 15px;
font-weight: 500;
color: var(--bss-primary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.loc-search-cta__geo:hover {
color: var(--bss-cta);
}
/*
* Barracuda · Benefits photo cards — live site uses 696×240 images and
* text padding that matches the structure cards above (px-10 py-8).
* Only the text panel gets rounded bottom corners; photo stays rectangular.
*/
.barracuda-benefits__card {
display: flex;
flex-direction: column;
}
.barracuda-benefits__card-image {
aspect-ratio: 696/240;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.barracuda-benefits__card-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
align-self: stretch;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
background-color: var(--bss-section-tint);
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
/*
* Feature cards with photo — static 2×2 grid (four items).
* Same card markup as the 6-up carousel; no JS on this variant.
*/
.feature-photo-grid {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 22px;
}
@media (min-width: 640px) {
.feature-photo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Text + photo grid, squiggly divider, icon cards — shared across pages. */
.text-photo-grid-section__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
.text-photo-grid-section__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.text-photo-grid-section__inner {
flex-direction: row;
gap: 100px;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 80px;
padding-bottom: 2rem;
}
}
.wave-line-separator-wrap {
background-color: var(--bss-section-tint);
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
@media (min-width: 768px) {
.wave-line-separator-wrap {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.wave-line-separator-wrap {
padding-left: 80px;
padding-right: 80px;
}
}
.loc-finder-section--corporate > .wave-line-separator {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .wave-line-separator {
padding-bottom: 8rem;
}
}
.wave-line-separator {
margin-left: auto;
margin-right: auto;
display: block;
height: 11px;
width: 100%;
max-width: 1280px;
}
.icon-feature-cards__inner {
margin-left: auto;
margin-right: auto;
display: grid;
max-width: 1440px;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1.5rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.icon-feature-cards__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.icon-feature-cards__inner {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 2rem;
padding-bottom: 80px;
}
}
/* Icon feature cards — 4-up variant (Water Safety Tips, etc.). */
@media (min-width: 640px) {
.icon-feature-cards__inner--4col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.icon-feature-cards__inner--4col {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/*
* Dark Hero — Text Only (week7).
* 1440 canvas, 80px padding, column, centred, 16px gap, primary navy band.
*/
.blue-wave-section > .dark-hero-text {
margin-top: -2px;
}
footer > .dark-hero-text {
margin-top: -2px;
}
.dark-hero-text {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark-hero-text__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
text-align: center;
}
@media (min-width: 768px) {
.dark-hero-text__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
}
@media (min-width: 1024px) {
.dark-hero-text__inner {
padding: 80px;
}
}
.dark-hero-text__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
.dark-hero-text__title {
font-size: 40px;
}
}
@media (min-width: 1024px) {
.dark-hero-text__title {
font-size: 56px;
line-height: 1.1;
font-weight: 700;
}
}
.dark-hero-text__body {
max-width: 640px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/*
* Water Safety · page hero — text + photo grid (water-safety.html).
* Reuses text-photo-grid-section__inner layout; typography lives here.
*/
.water-safety-hero__content {
width: 100%;
text-align: left;
}
@media (min-width: 1024px) {
.water-safety-hero__content {
flex: 1 1 0%;
}
}
.water-safety-hero__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.water-safety-hero__title {
font-size: 56px;
line-height: 1.1;
font-weight: 700;
}
}
.water-safety-hero__subtitle {
margin-top: 0.5rem;
font-size: 30px;
line-height: 1.3;
font-weight: 600;
color: var(--bss-sky);
}
.mega-programs-grid > div > .water-safety-hero__intro {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.water-safety-hero__intro {
margin-top: 1rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/*
* Water Safety · “Why is it important?” — intro + stacked white fact cards
* on section-tint (matches live britishswimschool.com/water-safety layout).
*/
.water-safety-facts__inner {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1440px;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 4rem;
padding-top: 1.5rem;
}
@media (min-width: 768px) {
.water-safety-facts__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.water-safety-facts__inner {
gap: 2rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-bottom: 80px;
padding-top: 2rem;
}
}
.water-safety-facts__title {
width: 100%;
text-align: left;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.water-safety-facts__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.water-safety-facts__intro {
width: 100%;
text-align: left;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.water-safety-facts__list {
display: flex;
width: 100%;
list-style-type: none;
flex-direction: column;
gap: 1rem;
}
.water-safety-facts__card {
display: flex;
align-items: center;
gap: 1rem;
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 768px) {
.water-safety-facts__card {
gap: 1.25rem;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
}
.water-safety-facts__icon {
height: 18px;
width: 18px;
flex-shrink: 0;
}
.water-safety-facts__text {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-primary);
}
/*
* Water Safety page — prose sections (tips) and resource card links.
* Resource cards reuse barracuda-benefits markup; excerpt is clamped to 2 lines
* with a persistent “Read More” label for detail posts (built later).
*/
.water-safety-prose__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.water-safety-prose__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.water-safety-prose__inner {
gap: 2rem;
padding: 80px;
}
}
.water-safety-prose__title {
width: 100%;
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.water-safety-prose__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.water-safety-prose__content {
width: 100%;
max-width: 960px;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .water-safety-prose__content {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .water-safety-prose__content {
padding-bottom: 8rem;
}
}
.water-safety-prose__content {
max-width: 1280px;
}
}
.water-safety-resource-card {
color: inherit;
text-decoration-line: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.water-safety-resource-card:hover {
--tw-brightness: brightness(0.98);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.water-safety-resource-card__excerpt {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/*
* Resource card type — match Discover Difference cards:
* 24px titles, 16px body (text-chrome). Overrides text-subhead-lg / text-copy.
*/
.photo-cards-grid .barracuda-benefits__card-body h3 {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--bss-sky) !important;
}
.photo-cards-grid .water-safety-resource-card__excerpt {
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
color: var(--bss-body) !important;
}
.water-safety-resource-card__read-more {
margin-top: 0.25rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-sky);
}
/*
* Water Safety · Tips — section header above the 4-col icon card grid.
*/
.water-safety-tips__header {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1440px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
}
@media (min-width: 768px) {
.water-safety-tips__header {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.water-safety-tips__header {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 80px;
}
}
.water-safety-tips__title {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.water-safety-tips__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.mega-programs-grid > div > .water-safety-tips__intro {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.loc-finder-section--corporate > .water-safety-tips__intro {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .water-safety-tips__intro {
padding-bottom: 8rem;
}
}
.water-safety-tips__intro {
margin-top: 1rem;
max-width: 1280px;
text-align: left;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.water-safety-tips .icon-feature-cards__inner {
padding-top: 2rem;
}
/* Photo cards grid block — current preview card (rounded, equal height). */
.photo-cards-grid .barracuda-benefits__card {
height: 100%;
overflow: hidden;
border-radius: 16px;
background-color: var(--bss-section-tint);
}
.photo-cards-grid .barracuda-benefits__card-image {
flex-shrink: 0;
}
.photo-cards-grid .barracuda-benefits__card-body {
flex: 1 1 0%;
border-radius: 0px;
}
/* Flat tint shows while the photo loads, and anywhere the photo does not cover. */
.hero__bg {
background-color: #d2eeef;
}
/*
* One photo for every width. Below lg it is a band at the bottom of the hero.
* From lg up it covers the whole section, same crop as the 1440 and 1920 layout.
* Copy stays inside the 1440 canvas, so wider monitors only show more pool water
* on the sides. Do not swap this for a right-column photo: that left the rest
* of the header white.
*/
.hero__photo {
pointer-events: none;
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 0;
height: 360px;
}
@media (min-width: 640px) {
.hero__photo {
height: 460px;
}
}
@media (min-width: 1024px) {
.hero__photo {
inset: 0px;
height: auto;
}
}
.hero__photo img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: right;
object-position: right;
}
@media (min-width: 1024px) {
.hero__photo img {
-o-object-position: center;
object-position: center;
}
}
/* Softens the top of the mobile photo band into the tint. Hidden on desktop. */
.hero__photo-fade {
background-image: linear-gradient(to bottom, #d2eeef 0%, rgba(210, 238, 239, 0) 100%);
}
.hero__veil {
position: absolute;
inset: 0px;
background-color: rgba(255, 255, 255, 0.7);
}
@media (min-width: 1024px) {
.hero__veil {
left: -100vw;
right: 40%;
}
}
/* Holds the desktop row open while the photo is position:absolute behind it. */
.enroll-form__error.hero__photo-spacer {
display: none;
}
.hero__photo-spacer {
display: none;
}
@media (min-width: 1024px) {
.hero__photo-spacer {
display: block;
min-height: 600px;
}
}
/*
* Partner logos pull the navy wave up with negative margin (.blue-wave-section).
* The hero copy wrapper is z-10, so the veil would otherwise sit on top of the
* wave on the left and look washed out. Stack the next section above the hero.
*/
.hero__bg + .blue-wave-section {
position: relative;
z-index: 20;
}
/*
* Address autocomplete (main.js): Google Places suggestions under the hero
* search pill. Above the hero photo and the wave section (z-20).
*/
.address-suggest {
position: absolute;
left: 0px;
right: 0px;
top: 100%;
z-index: 30;
margin-top: 0.5rem;
overflow: hidden;
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
text-align: left;
--tw-shadow: 0 8px 24px rgba(19,46,171,0.16);
--tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.address-suggest__list {
max-height: 18rem;
overflow-y: auto;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.address-suggest__item {
cursor: pointer;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.address-suggest__item:hover,
.address-suggest__item[aria-selected="true"] {
background-color: var(--bss-section-tint);
color: var(--bss-primary);
}
/* Google requires attribution when Places suggestions show without a map. */
.address-suggest__attribution {
border-top-width: 1px;
border-color: rgb(0 0 0 / 0.05);
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: right;
font-size: 12px;
--tw-text-opacity: 1;
color: rgb(95 99 104 / var(--tw-text-opacity, 1));
}
.carousel-dot {
height: 0.625rem;
width: 0.625rem;
border-radius: 9999px;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background-color: rgba(255, 255, 255, 0.4);
}
.carousel-dot.is-active {
width: 1.5rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.section-wave {
height: 12px;
margin-bottom: -1px;
line-height: 0;
}
@media (min-width: 1024px) {
.section-wave {
height: 18px;
}
}
.section-wave__svg {
display: block;
width: 100%;
height: 100%;
}
.sw-rect--lg {
display: none;
}
@media (min-width: 1024px) {
.sw-rect--sm {
display: none;
}
.sw-rect--lg {
display: block;
}
}
.blue-wave-section {
position: relative;
margin-top: -0.75rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.blue-wave-section {
margin-top: -18px;
}
}
.blue-wave-section .section-wave {
position: relative;
margin-bottom: -3px;
}
.blue-wave-section .section-wave::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background-color: var(--bss-primary);
pointer-events: none;
}
.blue-wave-section > .bg-primary {
margin-top: -2px;
}
/*
* After the location finder the wave should not pull up over the map.
* Used on Locations List and the corporate locations page.
*/
.blue-wave-section--after-finder,
.bss-locations-list .blue-wave-section {
margin-top: 0;
}
.carousel-section {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 64px;
padding-bottom: 64px;
}
@media (min-width: 768px) {
.carousel-section {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.carousel-section {
padding: 80px;
}
}
.carousel-shell {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.carousel-row {
position: relative;
display: flex;
width: 100%;
align-items: center;
}
@media (min-width: 1024px) {
.carousel-row {
max-width: 1280px;
}
}
/* Arrows sit in the 80px section gutter so the 3 cards keep the full 1280. */
@media (min-width: 768px) {
.carousel-nav {
position: absolute;
top: 50%;
z-index: 10;
transform: translateY(-50%);
}
.carousel-nav--prev {
left: -3.25rem;
}
.carousel-nav--next {
right: -3.25rem;
}
}
.carousel-viewport {
container-type: inline-size;
width: 100%;
min-width: 0px;
overflow: hidden;
}
.carousel-track {
display: flex;
width: 100%;
align-items: stretch;
gap: 1rem;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.testimonial-card {
display: flex;
flex-shrink: 0;
flex-grow: 0;
flex-basis: 100%;
flex-direction: column;
align-items: center;
gap: 0.75rem;
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
text-align: center;
}
@media (min-width: 640px) {
.testimonial-card {
flex-basis: calc((100% - 1rem) / 2);
}
}
@media (min-width: 1024px) {
.testimonial-card {
overflow: hidden;
flex: 0 0 calc((100cqw - 2rem) / 3);
width: calc((100cqw - 2rem) / 3);
}
}
.testimonial-card h3 {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
color: var(--bss-sky);
}
/* 16px / 24px. Slightly tighter tracking so a one-word overflow stays on line 4. */
.testimonial-card__quote {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
font-size: 16px;
line-height: 1.5;
font-weight: 500;
line-height: 1.5rem;
color: var(--bss-body);
letter-spacing: -0.015em;
text-wrap: pretty;
}
.testimonial-card.is-expanded {
overflow: visible;
}
.testimonial-card.is-expanded .testimonial-card__quote {
overflow: visible;
display: block;
-webkit-box-orient: horizontal;
-webkit-line-clamp: none;
}
.testimonial-card__more {
font-size: 14px;
font-weight: 700;
line-height: 1.375;
color: var(--bss-sky);
text-decoration-line: underline;
text-underline-offset: 2px;
}
.testimonial-card__author {
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-wave--footer {
position: relative;
margin-bottom: -3px;
background-color: var(--bss-footer-join-bg, transparent);
}
.section-wave--footer::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background-color: var(--bss-primary);
pointer-events: none;
}
.section-wave--footer .section-wave__svg {
display: block;
width: 100%;
height: 100%;
}
/* Double overlap so the wave→footer join never shows white. */
footer > .bg-primary {
margin-top: -2px;
}
.sw-footer-rect--lg {
display: none;
}
@media (min-width: 1024px) {
.sw-footer-rect--sm {
display: none;
}
.sw-footer-rect--lg {
display: block;
}
}
/*
* Fallback when the last section has no opaque background-color
* (photo / gradient). Pull the wave over that section so its paint
* shows through the SVG troughs — same overlap as .blue-wave-section.
*/
footer.footer--join-overlap {
position: relative;
z-index: 2;
margin-top: -12px;
}
@media (min-width: 1024px) {
footer.footer--join-overlap {
margin-top: -18px;
}
}
/* Corporate locations page — extra space before partner carousel. */
.loc-finder-section--corporate > .max-w-container {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .max-w-container {
padding-bottom: 8rem;
}
}
/* Locations List — room under the map before Trusted By Industry Leaders. */
.bss-locations-list .bss-location-finder {
padding-bottom: 4rem;
}
@media (min-width: 1024px) {
.bss-locations-list .bss-location-finder {
padding-bottom: 6rem;
}
}
/* Distance select — custom chevron (shared with contact forms). */
/* Hide the native arrow so only this SVG shows. */
.loc-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23132eab' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.25rem center;
background-size: 0.85rem;
padding-right: 3rem;
}
.loc-select::-ms-expand {
display: none;
}
.loc-finder__intro {
margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
.loc-finder__intro {
margin-bottom: 2rem;
}
}
.loc-finder__intro--panel {
margin-bottom: 0px;
}
/* Rich text under the title (Location finder — local block). */
.loc-finder__body {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-primary);
}
.loc-finder__body > * + * {
margin-top: 0.75rem;
}
.loc-finder__body ul {
list-style-type: disc;
}
.loc-finder__body ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.loc-finder__body ul {
padding-left: 1.25rem;
}
.loc-finder__body ol {
list-style-type: decimal;
}
.loc-finder__body ol > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.loc-finder__body ol {
padding-left: 1.25rem;
}
.loc-finder__body :is(strong, b) {
font-weight: 700;
}
.loc-finder__body a {
font-weight: 700;
color: var(--bss-cta);
text-underline-offset: 2px;
}
.loc-finder__body a:hover {
text-decoration-line: underline;
}
/* Optional region columns under the map (Franchise Site Options → Global). */
.loc-finder-regions {
margin-top: 2.5rem;
}
@media (min-width: 1024px) {
.loc-finder-regions {
margin-top: 3rem;
}
}
.loc-finder-regions__grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 2rem;
}
@media (min-width: 640px) {
.loc-finder-regions__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.loc-finder-regions__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2.5rem;
}
}
.loc-finder-regions__col {
min-width: 0px;
}
.loc-finder-regions__heading {
margin: 0px;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 600;
color: var(--bss-primary);
}
.loc-finder-regions__list {
margin-top: 0.75rem;
list-style-type: disc;
}
.loc-finder-regions__list > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.loc-finder-regions__list {
padding-left: 1.25rem;
color: var(--bss-cta);
}
.loc-finder-regions__link {
font-size: 16px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-cta);
text-underline-offset: 2px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.loc-finder-regions__link:hover {
text-decoration-line: underline;
}
.loc-finder-regions__link {
overflow-wrap: anywhere;
}
.loc-finder__grid {
/* minmax(0, …) stops the suggestion list's min-content from widening the left column under the map. */
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 2rem;
}
@media (min-width: 1024px) {
.loc-finder__grid {
grid-template-columns: minmax(0,1fr) minmax(0,600px);
align-items: flex-start;
}
}
.loc-finder__panel {
position: relative;
display: flex;
min-width: 0px;
flex-direction: column;
overflow: visible;
}
@media (min-width: 1024px) {
.loc-finder__panel {
height: 884px;
}
}
.loc-finder__search {
/* Above the result list so suggestions can drop over the cards, still inside this column. */
position: relative;
z-index: 5;
display: grid;
min-width: 0px;
flex-shrink: 0;
gap: 1rem;
overflow: visible;
border-radius: 24px;
background-color: var(--bss-panel-bg);
padding: 1.25rem;
}
.loc-finder__map {
position: relative;
margin-top: 2rem;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 24px;
}
@media (min-width: 1024px) {
.loc-finder__map {
margin-top: 0px;
height: 884px;
}
}
.loc-scroll {
margin-top: 1.5rem;
display: flex;
min-height: 0px;
flex: 1 1 0%;
flex-direction: column;
gap: 1.25rem;
overflow-y: auto;
padding-right: 0.75rem;
scrollbar-width: thin;
scrollbar-color: var(--bss-border) transparent;
}
.loc-scroll::-webkit-scrollbar {
width: 6px;
}
.loc-scroll::-webkit-scrollbar-track {
background: transparent;
}
.loc-scroll::-webkit-scrollbar-thumb {
border-radius: 9999px;
background-color: var(--bss-border);
}
/* ------------------------------------------------------------------ */
/* [bss_locator] integration skin — scoped to theme wrapper. */
/* ------------------------------------------------------------------ */
.bss-location-finder .bss-integration-locator.plp-shell {
position: relative;
max-width: none;
padding: 0px;
min-height: 0;
}
/* Hide map UI until locator.js finishes init (replaces legacy .plp-locator rule). */
.bss-location-finder .plp-shell.is-initializing .loc-finder__grid {
opacity: 0;
visibility: hidden;
}
/* Hide dev/status line (location count, org filter, etc.). */
.bss-location-finder .plp-shell > .description,
.bss-location-finder .plp-shell > .bss-locator-crawl-list {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.blue-wave-section > .bss-location-finder #plp-use-geolocation.plp-btn-secondary {
margin-top: -2px;
}
footer > .bss-location-finder #plp-use-geolocation.plp-btn-secondary {
margin-top: -2px;
}
.bss-location-finder #plp-use-geolocation.plp-btn-secondary {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-primary);
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.bss-location-finder #plp-use-geolocation.plp-btn-secondary:hover {
--tw-brightness: brightness(1.1);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.bss-location-finder #plp-use-geolocation.plp-btn-secondary::before {
display: none;
}
.blue-wave-section > .bss-location-finder #plp-use-geolocation.plp-btn-secondary.is-active {
margin-top: -2px;
}
footer > .bss-location-finder #plp-use-geolocation.plp-btn-secondary.is-active {
margin-top: -2px;
}
.bss-location-finder #plp-use-geolocation.plp-btn-secondary.is-active {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Address pill — preview: input flex-1 left, CTA shrink-0 right. */
.bss-location-finder .loc-finder__address-row {
/* Positioning context for the Places list so it matches the pill, not the map. */
position: relative;
z-index: 2;
display: flex;
min-width: 0px;
max-width: 100%;
align-items: center;
gap: 0.375rem;
overflow: visible;
border-radius: 40px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding: 0.25rem;
padding-left: 0.875rem;
}
@media (min-width: 640px) {
.bss-location-finder .loc-finder__address-row {
gap: 0.5rem;
padding: 0.375rem;
padding-left: 1.25rem;
}
}
.bss-location-finder .loc-finder__autocomplete {
/* inline-size: a wide open list cannot stretch this flex item and push Find Location off the card. */
contain: inline-size;
min-width: 0px;
max-width: 100%;
flex: 1 1 0%;
overflow: visible;
}
.bss-location-finder #plp-autocomplete {
overflow: visible;
}
.bss-location-finder #plp-autocomplete,
.bss-location-finder .loc-finder__autocomplete {
min-width: 0px;
max-width: 100%;
flex: 1 1 0%;
}
.bss-location-finder #plp-autocomplete gmp-place-autocomplete,
.bss-location-finder .loc-finder__autocomplete gmp-place-autocomplete {
display: block;
width: 100%;
min-width: 0;
max-width: 100%;
/* static: the open list anchors to the address pill instead of growing this element. */
position: static;
align-self: center;
border: none;
box-shadow: none;
background: transparent;
padding: 0;
color-scheme: light;
}
.bss-location-finder #plp-autocomplete gmp-place-autocomplete::part(input),
.bss-location-finder .loc-finder__autocomplete gmp-place-autocomplete::part(input) {
width: 100%;
min-width: 0px;
border-width: 0px;
background-color: transparent;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px;
}
@media (min-width: 640px) {
.bss-location-finder #plp-autocomplete gmp-place-autocomplete::part(input),
.bss-location-finder .loc-finder__autocomplete gmp-place-autocomplete::part(input) {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
}
.bss-location-finder #plp-autocomplete gmp-place-autocomplete::part(focus-ring),
.bss-location-finder .loc-finder__autocomplete gmp-place-autocomplete::part(focus-ring) {
display: none;
}
/* Fallback plain input when PlaceAutocompleteElement is unavailable. */
.bss-location-finder #bss_locator_address_field,
.bss-location-finder #plp-autocomplete .plp-input[type='text'] {
width: 100%;
min-width: 0px;
border-width: 0px;
background-color: transparent;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px;
}
@media (min-width: 640px) {
.bss-location-finder #bss_locator_address_field,
.bss-location-finder #plp-autocomplete .plp-input[type='text'] {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
}
.bss-location-finder #bss_locator_address_field,
.bss-location-finder #plp-autocomplete .plp-input[type='text'] {
height: auto;
border-radius: 0;
}
.bss-location-finder #plp-autocomplete gmp-place-autocomplete::part(input)::-moz-placeholder, .bss-location-finder .loc-finder__autocomplete gmp-place-autocomplete::part(input)::-moz-placeholder {
color: #9aa3b2;
}
.bss-location-finder #plp-autocomplete gmp-place-autocomplete::part(input)::placeholder,
.bss-location-finder .loc-finder__autocomplete gmp-place-autocomplete::part(input)::placeholder {
color: #9aa3b2;
}
.bss-location-finder #plp-autocomplete gmp-place-autocomplete::part(icon),
.bss-location-finder #plp-autocomplete gmp-place-autocomplete::part(clear-button),
.bss-location-finder .loc-finder__autocomplete gmp-place-autocomplete::part(icon),
.bss-location-finder .loc-finder__autocomplete gmp-place-autocomplete::part(clear-button) {
display: none;
}
.bss-location-finder #plp-search-address.plp-magnifier,
.bss-location-finder .loc-finder__search-btn {
flex-shrink: 0;
white-space: nowrap;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 11px;
font-weight: 700;
line-height: 1.25;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.bss-location-finder #plp-search-address.plp-magnifier:hover,
.bss-location-finder .loc-finder__search-btn:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@media (min-width: 640px) {
.bss-location-finder #plp-search-address.plp-magnifier,
.bss-location-finder .loc-finder__search-btn {
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 13px;
}
}
@media (min-width: 1024px) {
.bss-location-finder #plp-search-address.plp-magnifier,
.bss-location-finder .loc-finder__search-btn {
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
}
}
.bss-location-finder #plp-search-address.plp-magnifier,
.bss-location-finder .loc-finder__search-btn {
position: static;
width: auto;
height: auto;
background-color: var(--bss-cta);
color: #fff;
}
/* Narrow viewports — stack search CTA so placeholder text is not clipped. */
@media (max-width: 479px) {
.bss-location-finder .loc-finder__address-row {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
border-radius: 24px;
padding: 0.5rem;
padding-left: 0.875rem;
}
.bss-location-finder #plp-search-address.plp-magnifier,
.bss-location-finder .loc-finder__search-btn {
width: 100%;
justify-content: center;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
}
}
.mega-programs-grid > div > .bss-location-finder #plp-distance-limit-wrap {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.bss-location-finder #plp-distance-limit-wrap {
position: relative;
z-index: 1;
margin-top: 1rem;
}
.bss-location-finder #plp-distance-limit-wrap .plp-label {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.bss-location-finder #plp-distance-limit.plp-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23132eab' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.25rem center;
background-size: 0.85rem;
padding-right: 3rem;
}
.bss-location-finder #plp-distance-limit.plp-input::-ms-expand {
display: none;
}
.enroll-form .bss-location-finder #plp-distance-limit.plp-input {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
color: var(--bss-primary);
}
.bss-location-finder #plp-distance-limit.plp-input {
margin-top: 0px;
width: 100%;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 40px;
border-width: 0px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px;
}
.bss-location-finder #plp-distance-limit.plp-input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.bss-location-finder #plp-distance-limit.plp-input {
color: #9aa3b2;
pointer-events: auto;
}
.bss-location-finder #plp-distance-limit.plp-input:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.bss-location-finder .plp-origin {
font-size: 16px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-primary);
}
/* plp-results wraps loc-scroll; JS requires #plp-results + data-fakescroll. */
.bss-location-finder .plp-results {
/* Below the search card so the open suggestion list paints over the pool rows. */
position: relative;
z-index: 1;
display: flex;
min-height: 0px;
flex: 1 1 0%;
flex-direction: column;
overflow: hidden;
max-height: none;
}
.bss-location-finder .plp-fakebar {
display: none !important;
}
/* Result cards — match preview locations.html pool rows. */
.bss-location-finder .plp-item {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0.5rem;
border-radius: 24px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding: 1.25rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@media (min-width: 640px) {
.bss-location-finder .plp-item {
grid-template-columns: 1fr auto;
align-items: center;
gap: 1rem;
}
}
.bss-location-finder .plp-item:hover,
.bss-location-finder .plp-item.is-highlighted {
transform: none;
box-shadow: none;
background-color: #fff;
}
.bss-location-finder .plp-item__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.bss-location-finder .plp-item__title {
display: flex;
min-width: 0px;
flex: 1 1 0%;
align-items: flex-start;
gap: 0.5rem;
}
/* Brand pin — URL injected via assets.php (--bss-location-pin-icon). */
.bss-location-finder .plp-item__pin {
margin-top: 0.25rem;
display: block;
height: 18px;
width: 17px;
flex-shrink: 0;
background: var(--bss-location-pin-icon) no-repeat center / contain;
}
.bss-location-finder .plp-item__pin::after {
display: none;
}
.bss-location-finder .plp-item__name {
margin: 0px;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1.375;
color: var(--bss-primary);
}
.bss-location-finder .plp-item__distance {
flex-shrink: 0;
align-self: flex-start;
text-align: right;
}
/* Shown only after user sets a location (plugin toggles .plp-show-distances). */
.bss-location-finder .plp-results-scroll .plp-distance {
display: none;
}
.bss-location-finder .plp-results-scroll.plp-show-distances .plp-distance {
margin: 0px;
display: block;
white-space: nowrap;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-body);
}
.bss-location-finder .plp-item__divider {
display: none;
}
.bss-location-finder .plp-item__address {
margin: 0px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.bss-location-finder .plp-item__badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bss-location-finder .plp-item__badge--closed {
margin: 0px;
background-color: transparent;
padding: 0px;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-cta);
}
.bss-location-finder .plp-item__badge--hoa {
margin: 0px;
border-radius: 0.5rem;
background-color: var(--bss-section-tint);
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-primary);
}
.bss-location-finder .plp-item__cta {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
text-decoration-line: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.bss-location-finder .plp-item__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@media (min-width: 640px) {
.bss-location-finder .plp-item__cta {
grid-column-start: 2;
grid-row: span 4 / span 4;
grid-row-start: 1;
align-self: center;
}
}
.bss-location-finder .plp-item__cta:hover {
text-decoration: none;
}
.bss-location-finder .plp-map {
height: 100%;
min-height: 420px;
width: 100%;
flex: 1 1 0%;
border-width: 0px;
background-color: var(--bss-light-bg);
}
@media (min-width: 1024px) {
.bss-location-finder .plp-map {
min-height: 0px;
}
}
.bss-location-finder .plp-map {
border-radius: 0;
}
/* Map markers — brand pin (plugin renders .plp-map-pin > .plp-icon-marker). */
.bss-location-finder .plp-map-pin {
filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.18));
transition: transform 0.2s ease;
}
.bss-location-finder .plp-map-pin .plp-icon-marker {
display: block;
height: 32px;
width: 26px;
background: var(--bss-location-pin-icon) no-repeat center / contain;
-webkit-mask: none;
mask: none;
}
.bss-location-finder .plp-map-pin:hover {
transform: scale(1.08);
}
/* Google Maps InfoWindow chrome — match list-card typography and brand colors. */
.bss-location-finder .gm-style-iw-c {
padding: 0 !important;
border-radius: 0.75rem !important;
box-shadow: 0 8px 24px rgb(19 46 171 / 0.12) !important;
}
.bss-location-finder .gm-style-iw-d {
overflow: hidden !important;
max-height: none !important;
}
.bss-location-finder .gm-style-iw-chr {
display: none !important;
}
.bss-location-finder .plp-info-window {
min-width: 200px;
max-width: 325px;
padding: 1rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.bss-location-finder .plp-info-window__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding-right: 1.5rem;
}
.bss-location-finder .plp-info-window__title {
display: flex;
min-width: 0px;
flex: 1 1 0%;
align-items: flex-start;
gap: 0.5rem;
}
.bss-location-finder .plp-info-window .plp-icon-marker {
margin-top: 0.125rem;
display: block;
height: 18px;
width: 17px;
flex-shrink: 0;
background: var(--bss-location-pin-icon) no-repeat center / contain;
-webkit-mask: none;
mask: none;
}
.bss-location-finder .plp-info-window .plp-icon-marker::after {
display: none;
}
.bss-location-finder .plp-info-window__name {
margin: 0px;
min-width: 0px;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1.375;
color: var(--bss-primary);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
overflow-wrap: anywhere;
}
.bss-location-finder .plp-info-window__distance {
flex-shrink: 0;
align-self: flex-start;
white-space: nowrap;
text-align: right;
}
.bss-location-finder .plp-info-window__distance .plp-distance {
margin: 0px;
font-size: 16px;
line-height: 1.4;
font-weight: 600;
color: var(--bss-body);
}
.bss-location-finder .plp-info-window__divider {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
height: 1px;
background-color: var(--bss-border);
}
.bss-location-finder .plp-info-window__address {
margin: 0px;
font-size: 18px;
font-weight: 500;
line-height: 1.375;
color: var(--bss-body);
word-break: break-word;
overflow-wrap: anywhere;
}
.bss-location-finder .plp-info-window .plp-item__badges {
margin-top: 0.5rem;
}
.bss-location-finder .plp-info-window__cta {
margin-top: 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
text-decoration-line: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.bss-location-finder .plp-info-window__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
text-decoration: none;
color: #fff;
}
/*
* Places suggestion list (PlaceAutocompleteElement).
* Google sizes this to the longest address, which overflows the left column
* and slides under the map. Keep it in the address pill and let long lines wrap.
*/
.bss-location-finder #plp-autocomplete gmp-place-autocomplete::part(prediction-list),
.bss-location-finder .loc-finder__autocomplete gmp-place-autocomplete::part(prediction-list) {
position: absolute !important;
top: calc(100% + 0.5rem) !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
z-index: 30 !important;
margin: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
.bss-location-finder #plp-autocomplete gmp-place-autocomplete::part(prediction-item),
.bss-location-finder .loc-finder__autocomplete gmp-place-autocomplete::part(prediction-item) {
white-space: normal;
overflow-wrap: anywhere;
height: auto;
}
/* Legacy Places Autocomplete dropdown (fallback input path). */
.pac-container {
margin-top: 0.25rem;
overflow: hidden;
border-radius: 24px;
border-width: 0px;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
box-shadow: 0 8px 24px rgb(19 46 171 / 0.12);
box-sizing: border-box;
z-index: 10000 !important;
}
.pac-container::after {
display: none !important;
}
.pac-item {
cursor: pointer;
border-top-width: 1px;
border-color: var(--bss-border);
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.pac-item:first-child {
border-top: 0;
}
.pac-item:hover,
.pac-item-selected {
background-color: var(--bss-section-tint);
}
.pac-item-query {
font-weight: 600;
color: var(--bss-body);
color: var(--bss-primary);
}
.pac-matched {
font-weight: 700;
color: var(--bss-primary);
}
.enroll-form__error.bss-location-finder .plp-search-area-btn {
display: none;
}
.bss-location-finder .plp-search-area-btn {
position: absolute;
bottom: 1.25rem;
left: 50%;
z-index: 10;
display: none;
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.bss-location-finder .plp-search-area-btn:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.bss-location-finder .plp-search-area-btn.is-visible {
display: block;
}
.bss-location-finder .plp-search-area-btn:hover {
background-color: var(--bss-cta);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.bss-location-finder .plp-loading {
position: absolute;
inset: 0px;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
border-radius: 24px;
background-color: rgb(255 255 255 / 0.7);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.bss-location-finder .plp-loading.is-active {
opacity: 1;
pointer-events: auto;
}
.bss-location-finder .plp-spinner,
.bss-location-finder .plp-shell.is-initializing::after {
border-color: rgb(19 46 171 / 0.2);
border-top-color: var(--bss-primary);
}
.bss-location-finder .bss-locator-fallback-list {
margin-top: 1.5rem;
display: grid;
list-style-type: none;
gap: 1.25rem;
padding: 0px;
}
.bss-location-finder .bss-locator-fallback-list li {
border-radius: 24px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding: 1.25rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.bss-location-finder .bss-locator-badge--closed {
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-cta);
}
.bss-location-finder .bss-locator-badge--hoa {
border-radius: 0.5rem;
background-color: var(--bss-section-tint);
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-primary);
}
@media (max-width: 1023px) {
.bss-location-finder .loc-finder__panel {
height: auto;
}
.bss-location-finder .loc-scroll {
max-height: none;
overflow: visible;
padding-right: 0;
}
}
.prog-tab {
white-space: nowrap;
border-radius: 40px;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 15px;
font-weight: 600;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
color: #8a97d4;
}
.prog-tab:hover {
color: var(--bss-primary);
}
.prog-tab.is-active {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
color: var(--bss-primary);
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.prog-card__icon {
pointer-events: none;
position: absolute;
left: 50%;
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-o-object-fit: contain;
object-fit: contain;
-o-object-position: bottom;
object-position: bottom;
}
.prog-card__icon--lg {
top: -5rem;
height: 9rem;
width: 9rem;
}
.prog-card__icon--md {
top: -3.5rem;
height: 7rem;
width: 7rem;
}
.prog-card-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
@media (min-width: 640px) {
.prog-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.prog-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.prog-card-grid--lg {
margin-top: 8rem;
row-gap: 9rem;
}
.prog-card-grid--center {
display: flex;
flex-wrap: wrap;
justify-content: center;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.prog-card-grid--center > article {
width: 100%;
}
@media (min-width: 640px) {
.prog-card-grid--center > article {
width: calc(50% - 12px);
}
}
@media (min-width: 1024px) {
.prog-card-grid--center > article {
width: calc(33.333% - 16px);
}
}
.prog-wave {
/* shrink-0: empty flex item would otherwise collapse when card copy is long (e.g. ES). */
flex-shrink: 0;
height: 10px;
width: 7rem;
background: center / contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 10' fill='none'%3E%3Cpath d='M2 5q7-6 14 0t14 0t14 0t14 0t14 0t14 0t14 0' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq-section__inner {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 64px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.faq-section__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.faq-section__inner {
padding: 80px;
}
}
/* Heading plus optional one-line intro. No intro: the title stays the same centered block. */
.faq-section__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.faq-section__intro {
max-width: 760px;
text-align: center;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.faq-list {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1216px;
flex-direction: column;
gap: 1rem;
}
.faq-item {
box-sizing: border-box;
display: flex;
min-height: 96px;
width: 100%;
max-width: 1216px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0.75rem;
border-radius: 16px;
background-color: var(--bss-light-bg);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.faq-item ul {
margin-top: 0.25rem;
list-style-type: disc;
}
.faq-item ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.faq-item ul {
padding-left: 1.25rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.faq-item__question {
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-primary);
}
.faq-item__answer {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/* Bold links stay brand red. Strong inside the link inherits that color. */
.faq-item__answer a,
.faq-item__answer a :is(strong, b),
.faq-item__answer :is(strong, b) a {
font-weight: 700;
color: var(--bss-cta);
text-underline-offset: 2px;
}
.faq-item__answer a:hover,
.faq-item__answer a :is(strong, b):hover,
.faq-item__answer :is(strong, b) a:hover {
text-decoration-line: underline;
}
/*
* Custom FAQ pages store more than one paragraph in a single answer.
* Plain margin, not @apply mt-4: a nav rule targets .mt-4, and @apply
* would copy this selector into that rule.
*/
.faq-item__answer > * + * {
margin-top: 1rem;
}
/*
* Custom FAQ pages put a short title band directly above this list.
* Each section's own padding would leave a large empty band between them.
* Plain padding, not @apply: a nav rule targets .mt-4 / spacing utilities.
*/
.bss-custom-faq .bss-text-section__inner {
padding-bottom: 1.5rem;
}
.bss-custom-faq .faq-section__inner {
padding-top: 0;
}
.form-field {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 40px;
border-width: 1px;
border-color: var(--bss-field-border);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-primary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.form-field::-moz-placeholder {
color: var(--bss-primary);
}
.form-field::placeholder {
color: var(--bss-primary);
}
.form-field:focus {
border-color: var(--bss-primary);
outline: 2px solid transparent;
outline-offset: 2px;
}
/* ------------------------------------------------------------------ */
/* Gravity Forms reset + layout inside contact section. */
/* ------------------------------------------------------------------ */
.bss-contact-form .gform_wrapper,
.bss-contact-form .gform_wrapper form,
.bss-contact-form .gform_body,
.bss-contact-form .gform_fields,
.bss-contact-form .gfield,
.bss-contact-form .ginput_container {
width: 100%;
max-width: 100%;
}
.bss-contact-form .gform_wrapper {
margin: 0 !important;
padding: 0 !important;
}
.bss-contact-form .gform_heading,
.bss-contact-form .gform_required_legend,
.bss-contact-form .gfield_label,
.bss-contact-form .gform-field-label,
.bss-contact-form legend.gfield_label,
.bss-contact-form .gfield_required,
.bss-contact-form .gfield_description:not(.validation_message):not(.gfield_consent_description) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Consent keeps its checkbox label visible; hide only the field heading. */
.bss-contact-form .gfield--type-consent > .gfield_label,
.bss-contact-form .gfield--type-consent > .gform-field-label,
.bss-contact-form .gfield--type-checkbox > .gfield_label,
.bss-contact-form .gfield--type-checkbox > .gform-field-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Name sub-labels (First / Last) — preview uses placeholders only. */
.bss-contact-form .gfield--type-name .gform-field-label--type-sub,
.bss-contact-form .gfield--type-name .name_first > label,
.bss-contact-form .gfield--type-name .name_last > label,
.bss-contact-form .gfield--type-name .gform-grid-col__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/*
* Layout: flexbox (not grid) so GF Orbital 12-col spans / display:contents
* on .gfield--type-name cannot create a 3rd column.
* Preview: 2 equal columns on sm+, consent + name row full width.
*/
.bss-contact-form .gform-theme--framework,
.bss-contact-form .gform_wrapper {
--gf-form-gap-x: 2rem;
--gf-form-gap-y: 1.5rem;
}
.bss-contact-form .gform_fields {
display: flex !important;
flex-flow: row wrap !important;
gap: 1.5rem !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
list-style: none !important;
grid-template-columns: none !important;
}
@media (min-width: 640px) {
.bss-contact-form .gform_fields {
-moz-column-gap: 2rem !important;
column-gap: 2rem !important;
}
}
.bss-contact-form .gform_fields > .gfield:not(.gfield--type-honeypot):not(.gfield--type-hidden):not(.gfield_visibility_hidden):not(.gform_validation_container):not(.gform_hidden) {
display: block !important;
flex: 1 1 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
width: 100% !important;
grid-column: unset !important;
grid-row: unset !important;
}
@media (min-width: 640px) {
.bss-contact-form .gform_fields > .gfield:not(.gfield--type-name):not(.gfield--type-consent):not(.gfield--type-checkbox):not(.gfield--type-textarea):not(.gfield--type-html):not(.gfield--type-honeypot):not(.gfield--type-hidden):not(.gfield_visibility_hidden):not(.gform_validation_container):not(.gform_hidden) {
flex: 1 1 calc(50% - 1rem) !important;
max-width: calc(50% - 1rem) !important;
}
}
/* Full-width rows — name (internal 2-col), consent, etc. */
.bss-contact-form .gform_fields > .gfield--type-name,
.bss-contact-form .gform_fields > .gfield--type-consent,
.bss-contact-form .gform_fields > .gfield--type-checkbox,
.bss-contact-form .gform_fields > .gfield--type-textarea,
.bss-contact-form .gform_fields > .gfield--type-html,
.bss-contact-form .gform_fields > .gfield--width-full {
flex: 1 1 100% !important;
max-width: 100% !important;
}
/* GF "Name" = one field — first + last side by side inside (preview row 1). */
.bss-contact-form .gfield--type-name .ginput_container_name,
.bss-contact-form .gfield--type-name .ginput_complex,
.bss-contact-form .gfield--type-name .gform-grid-row {
display: flex !important;
flex-flow: row wrap !important;
gap: 1.5rem !important;
width: 100% !important;
}
@media (min-width: 640px) {
.bss-contact-form .gfield--type-name .ginput_container_name,
.bss-contact-form .gfield--type-name .ginput_complex,
.bss-contact-form .gfield--type-name .gform-grid-row {
flex-wrap: nowrap !important;
-moz-column-gap: 2rem !important;
column-gap: 2rem !important;
}
}
.bss-contact-form .gfield--type-name .name_first,
.bss-contact-form .gfield--type-name .name_last,
.bss-contact-form .gfield--type-name .gform-grid-col {
flex: 1 1 100% !important;
min-width: 0 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
@media (min-width: 640px) {
.bss-contact-form .gfield--type-name .name_first,
.bss-contact-form .gfield--type-name .name_last,
.bss-contact-form .gfield--type-name .gform-grid-col {
flex: 1 1 calc(50% - 1rem) !important;
max-width: calc(50% - 1rem) !important;
}
}
.bss-contact-form .ginput_container,
.bss-contact-form .ginput_complex,
.bss-contact-form .ginput_container_text,
.bss-contact-form .ginput_container_email,
.bss-contact-form .ginput_container_phone,
.bss-contact-form .ginput_container_select,
.bss-contact-form .ginput_container_textarea {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Pill inputs — match preview .form-field. */
.bss-contact-form .gform_wrapper input[type='text'],
.bss-contact-form .gform_wrapper input[type='email'],
.bss-contact-form .gform_wrapper input[type='tel'],
.bss-contact-form .gform_wrapper input[type='number'],
.bss-contact-form .gform_wrapper input[type='url'],
.bss-contact-form .gform_wrapper input[type='password'],
.bss-contact-form .gform_wrapper select,
.bss-contact-form .gform_wrapper textarea {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 40px;
border-width: 1px;
border-color: var(--bss-field-border);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-primary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.bss-contact-form .gform_wrapper input[type='text']::-moz-placeholder, .bss-contact-form .gform_wrapper input[type='email']::-moz-placeholder, .bss-contact-form .gform_wrapper input[type='tel']::-moz-placeholder, .bss-contact-form .gform_wrapper input[type='number']::-moz-placeholder, .bss-contact-form .gform_wrapper input[type='url']::-moz-placeholder, .bss-contact-form .gform_wrapper input[type='password']::-moz-placeholder, .bss-contact-form .gform_wrapper select::-moz-placeholder, .bss-contact-form .gform_wrapper textarea::-moz-placeholder {
color: var(--bss-primary);
}
.bss-contact-form .gform_wrapper input[type='text']::placeholder,
.bss-contact-form .gform_wrapper input[type='email']::placeholder,
.bss-contact-form .gform_wrapper input[type='tel']::placeholder,
.bss-contact-form .gform_wrapper input[type='number']::placeholder,
.bss-contact-form .gform_wrapper input[type='url']::placeholder,
.bss-contact-form .gform_wrapper input[type='password']::placeholder,
.bss-contact-form .gform_wrapper select::placeholder,
.bss-contact-form .gform_wrapper textarea::placeholder {
color: var(--bss-primary);
}
.bss-contact-form .gform_wrapper input[type='text']:focus,
.bss-contact-form .gform_wrapper input[type='email']:focus,
.bss-contact-form .gform_wrapper input[type='tel']:focus,
.bss-contact-form .gform_wrapper input[type='number']:focus,
.bss-contact-form .gform_wrapper input[type='url']:focus,
.bss-contact-form .gform_wrapper input[type='password']:focus,
.bss-contact-form .gform_wrapper select:focus,
.bss-contact-form .gform_wrapper textarea:focus {
border-color: var(--bss-primary);
outline: 2px solid transparent;
outline-offset: 2px;
}
.enroll-form .bss-contact-form .gform_wrapper input[type='text'],.enroll-form
.bss-contact-form .gform_wrapper input[type='email'],.enroll-form
.bss-contact-form .gform_wrapper input[type='tel'],.enroll-form
.bss-contact-form .gform_wrapper input[type='number'],.enroll-form
.bss-contact-form .gform_wrapper input[type='url'],.enroll-form
.bss-contact-form .gform_wrapper input[type='password'],.enroll-form
.bss-contact-form .gform_wrapper select,.enroll-form
.bss-contact-form .gform_wrapper textarea {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
color: var(--bss-primary);
}
.bss-contact-form .gform_wrapper input[type='text'],
.bss-contact-form .gform_wrapper input[type='email'],
.bss-contact-form .gform_wrapper input[type='tel'],
.bss-contact-form .gform_wrapper input[type='number'],
.bss-contact-form .gform_wrapper input[type='url'],
.bss-contact-form .gform_wrapper input[type='password'],
.bss-contact-form .gform_wrapper select,
.bss-contact-form .gform_wrapper textarea {
box-shadow: none !important;
min-height: 0 !important;
}
.bss-contact-form .gform_wrapper select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23132eab' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.25rem center;
background-size: 0.85rem;
padding-right: 3rem;
}
.bss-contact-form .gform_wrapper select::-ms-expand {
display: none;
}
.enroll-form .bss-contact-form .gform_wrapper select {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
color: var(--bss-primary);
}
.bss-contact-form .gform_wrapper select {
cursor: pointer;
/* Force-hide the UA/GF chevron. Custom SVG is the only arrow. */
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
padding-right: 3rem !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23132eab' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 1.25rem center !important;
background-size: 0.85rem !important;
}
.bss-contact-form .gform_wrapper select::-ms-expand {
display: none;
}
/* Hide GF Orbital / Theme Framework duplicate select chevrons. */
.bss-contact-form .gfield--type-select .gform-theme-icon,
.bss-contact-form .gfield_select .gform-theme-icon,
.bss-contact-form .ginput_container_select .gform-theme-icon,
.bss-contact-form .gfield--type-select svg {
display: none !important;
}
.bss-contact-form .ginput_container_select::before,
.bss-contact-form .ginput_container_select::after,
.bss-contact-form .gfield--type-select .ginput_container::before,
.bss-contact-form .gfield--type-select .ginput_container::after {
content: none !important;
display: none !important;
background: none !important;
}
.bss-contact-form .gform_wrapper textarea {
min-height: 120px;
border-radius: 24px;
}
/* GF Theme Framework button reset — centered CTA like preview. */
.bss-contact-form .gform_footer,
.bss-contact-form .gform_page_footer {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
margin: 2.5rem 0 0 !important;
padding: 0 !important;
border: 0 !important;
float: none !important;
clear: both !important;
text-align: center !important;
}
.bss-contact-form .gform_page_footer::before,
.bss-contact-form .gform_page_footer::after,
.bss-contact-form .gform_footer::before,
.bss-contact-form .gform_footer::after {
content: none !important;
display: none !important;
}
.bss-contact-form .gform_wrapper .gform_button,
.bss-contact-form .gform_wrapper input[type='submit'].gform_button,
.bss-contact-form .gform_wrapper button.gform_button,
.bss-contact-form .gform_wrapper .gform-theme-button--primary,
.bss-contact-form .gform_wrapper .gform-theme-button.gform_button {
display: inline-flex;
cursor: pointer;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.bss-contact-form .gform_wrapper .gform_button:hover,
.bss-contact-form .gform_wrapper input[type='submit'].gform_button:hover,
.bss-contact-form .gform_wrapper button.gform_button:hover,
.bss-contact-form .gform_wrapper .gform-theme-button--primary:hover,
.bss-contact-form .gform_wrapper .gform-theme-button.gform_button:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.bss-contact-form .gform_wrapper .gform_button,
.bss-contact-form .gform_wrapper input[type='submit'].gform_button,
.bss-contact-form .gform_wrapper button.gform_button,
.bss-contact-form .gform_wrapper .gform-theme-button--primary,
.bss-contact-form .gform_wrapper .gform-theme-button.gform_button {
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
background-color: var(--bss-cta) !important;
background-image: none !important;
text-shadow: none !important;
}
/* Marketing / consent checkbox — preview opt-in row. */
.bss-contact-form .gfield--type-consent .ginput_container_consent,
.bss-contact-form .gfield--type-checkbox .ginput_container_checkbox {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.bss-contact-form .gfield--type-consent input[type='checkbox'],
.bss-contact-form .gfield--type-checkbox input[type='checkbox'] {
margin-top: 0.25rem;
flex-shrink: 0;
border-width: 1px;
border-color: var(--bss-field-border);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
accent-color: var(--bss-cta);
width: 1rem !important;
height: 1rem !important;
padding: 0 !important;
border-radius: 3px !important;
}
.bss-contact-form .gfield_consent_label,
.bss-contact-form .gfield--type-checkbox label,
.bss-contact-form .gfield--type-consent label {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
overflow: visible !important;
padding: 0 !important;
clip: auto !important;
clip-path: none !important;
white-space: normal !important;
font-size: 18px;
font-weight: 500;
line-height: 1.625;
color: var(--bss-primary);
}
.bss-contact-form .gfield_consent_label a,
.bss-contact-form .gfield--type-consent label a {
text-decoration-line: underline;
text-underline-offset: 2px;
}
.bss-contact-form .gfield_consent_label a:hover,
.bss-contact-form .gfield--type-consent label a:hover {
text-decoration-line: none;
}
/* Validation — keep visible, on-brand. */
.bss-contact-form .gfield_error input[type='text'],
.bss-contact-form .gfield_error input[type='email'],
.bss-contact-form .gfield_error input[type='tel'],
.bss-contact-form .gfield_error input[type='number'],
.bss-contact-form .gfield_error select,
.bss-contact-form .gfield_error textarea {
border-color: var(--bss-cta);
}
.bss-contact-form .gfield_validation_message,
.bss-contact-form .validation_message {
margin-top: 0.5rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-cta);
}
.bss-contact-form .gform_confirmation_message {
text-align: center;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-primary);
}
/*
* Hide GF honeypot, anti-spam, and hidden parameter fields.
* Corporate program forms prepend many gfield--type-hidden rows; if left
* in the flex layout they still consume row-gap and look like extra space
* under the "Get in Touch" heading.
*/
.bss-contact-form .gform_fields > .gfield--type-honeypot,
.bss-contact-form .gform_fields > .gfield--type-hidden,
.bss-contact-form .gform_fields > .gform_hidden,
.bss-contact-form .gform_fields > .gform_validation_container,
.bss-contact-form .gform_fields > .gfield_visibility_hidden {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 0 !important;
}
.program-detail-header__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
}
@media (min-width: 768px) {
.program-detail-header__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.program-detail-header__inner {
flex-direction: row;
align-items: flex-start;
gap: 2rem;
padding-left: 80px;
padding-right: 80px;
padding-top: 3rem;
padding-bottom: 3rem;
}
}
.program-detail-header__content {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
overflow: visible;
}
@media (min-width: 1024px) {
.program-detail-header__content {
max-width: 640px;
flex: 1 1 0%;
}
}
.program-detail-header__badge-wrap {
position: relative;
z-index: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
display: flex;
min-height: 80px;
width: -moz-fit-content;
width: fit-content;
align-items: center;
align-self: center;
padding-left: 5rem;
}
@media (min-width: 1024px) {
.program-detail-header__badge-wrap {
margin-left: 3rem;
margin-right: 0px;
margin-top: 0px;
align-self: flex-start;
padding-left: 0px;
}
}
/* Badge grows for long program names; 333px is the Figma minimum width. */
.program-detail-header__badge {
position: relative;
z-index: 1;
display: flex;
min-height: 44px;
width: auto;
min-width: 333px;
max-width: 100%;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-radius: 16px;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
@media (min-width: 640px) {
.program-detail-header__badge {
padding-left: 3rem;
padding-right: 3rem;
}
}
@media (min-width: 1024px) {
.program-detail-header__badge {
display: inline-flex;
}
}
/* Clear the overlapping icon so program name/meta are never covered. */
.program-detail-header__badge-wrap:has(.program-detail-header__badge-icon) .program-detail-header__badge {
padding-left: 4.75rem;
}
@media (min-width: 640px) {
.program-detail-header__badge-wrap:has(.program-detail-header__badge-icon) .program-detail-header__badge {
padding-left: 6rem;
}
}
@media (min-width: 1024px) {
.program-detail-header__badge-wrap:has(.program-detail-header__badge-icon) .program-detail-header__badge {
padding-left: 5.5rem;
}
}
/* Program icon — larger than legacy 148×94; overlaps the badge card per Figma. */
.program-detail-header__badge-icon {
position: absolute;
left: -56px;
top: -32px;
z-index: 2;
width: 176px;
height: 112px;
-o-object-fit: contain;
object-fit: contain;
pointer-events: none;
}
@media (min-width: 1024px) {
.program-detail-header__badge-icon {
left: -96px;
top: -36px;
}
}
.program-detail-header__badge-name {
min-width: 0px;
flex-shrink: 1;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
line-height: 1.25;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.program-detail-header__badge-meta {
margin-left: 0.5rem;
flex-shrink: 0;
text-align: right;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
line-height: 1.25;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Descriptor only — program name is shown in the badge (preview parity). */
.program-detail-header__headline {
overflow-wrap: break-word;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 1.25;
color: var(--bss-sky);
}
@media (min-width: 640px) {
.program-detail-header__headline {
font-size: 32px;
}
}
.program-detail-header__body,
.program-detail-header__local {
width: 100%;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.program-detail-header__body :where(p),
.program-detail-header__local :where(p) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.program-detail-header__body :where(p strong, p b),
.program-detail-header__local :where(p strong, p b) {
font-weight: 700;
color: var(--bss-body);
}
/* After the strong rule so a bold email/phone stays red, not body gray. */
.program-detail-header__local a,
.program-detail-header__local a :is(strong, b),
.program-detail-header__local :is(strong, b) a {
font-weight: 700;
color: var(--bss-cta);
text-underline-offset: 2px;
}
.program-detail-header__local a:hover,
.program-detail-header__local a :is(strong, b):hover,
.program-detail-header__local :is(strong, b) a:hover {
text-decoration-line: underline;
}
.program-detail-header__body :where(h1, h2, h3, h4),
.program-detail-header__local :where(h1, h2, h3, h4) {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
color: var(--bss-primary);
}
.program-detail-header__body :where(h2, h3, h4),
.program-detail-header__local :where(h2, h3, h4) {
font-size: 24px;
line-height: 1.3;
font-weight: 600;
}
.program-detail-header__body :where(ol),
.program-detail-header__local :where(ol) {
margin-top: 0.75rem;
list-style-type: decimal;
padding-left: 1.25rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.program-detail-header__body :where(ul),
.program-detail-header__local :where(ul) {
margin-top: 0.75rem;
list-style-type: disc;
}
.program-detail-header__body :where(ul) > :not([hidden]) ~ :not([hidden]),
.program-detail-header__local :where(ul) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.program-detail-header__body :where(ul),
.program-detail-header__local :where(ul) {
padding-left: 1.25rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/* Goals stay in the left column — same width as intro copy above. */
.program-detail-header__goals-row {
width: 100%;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.program-detail-header__goals-row :where(h2, h3, h4) {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
/*
* Goals list. WP splits 4+ items into two
s (.goals-cols)
* so column 1 is always 1–3 and wrapping text cannot open a gap
* between items (shared grid rows caused that on Tadpole).
*/
.program-detail-header__goals,
.program-detail-header__goals-row :where(ol) {
margin-top: 0.5rem;
list-style-type: decimal;
padding-left: 1.25rem;
font-size: 16px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.program-detail-header__goals > li,
.program-detail-header__goals-row :where(ol > li) {
margin-bottom: 0.25rem;
}
.program-detail-header__goals-cols {
display: grid;
grid-template-columns: 1fr;
gap: 0 2rem;
margin-top: 0.5rem;
}
.program-detail-header__goals-cols ol {
margin-top: 0;
}
@media (min-width: 1024px) {
.program-detail-header__goals-cols {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
.mega-programs-grid > div > .program-detail-header__body :where(p + p, p + ol, p + ul, ol + p, ul + p),.mega-programs-grid > div >
.program-detail-header__local :where(p + p, p + ol, p + ul, ol + p, ul + p) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.program-detail-header__body :where(p + p, p + ol, p + ul, ol + p, ul + p),
.program-detail-header__local :where(p + p, p + ol, p + ul, ol + p, ul + p) {
margin-top: 1rem;
}
/* Extra space before goals / program structure headings from editor content. */
.program-detail-header__body :where(p + h2, p + h3, p + h4),
.program-detail-header__local :where(p + h2, p + h3, p + h4) {
margin-top: 1.5rem;
}
.program-detail-header__body :where(h2 + ol, h3 + ol, h4 + ol, h2 + ul, h3 + ul, h4 + ul),
.program-detail-header__local :where(h2 + ol, h3 + ol, h4 + ol, h2 + ul, h3 + ul, h4 + ul) {
margin-top: 0.75rem;
}
/* 16:9 hero image/video — top-aligned with copy on desktop (preview default). */
.program-detail-header__media {
position: relative;
width: 100%;
flex-shrink: 0;
}
@media (min-width: 1024px) {
.program-detail-header__media {
max-width: 560px;
flex: 1 1 0%;
}
}
.program-detail-header__media > img {
aspect-ratio: 16 / 9;
width: 100%;
border-radius: 24px;
-o-object-fit: cover;
object-fit: cover;
}
/* Hero video — poster + play overlay; iframe loads on click (lazy embed). */
.blue-wave-section > .program-detail-header__video {
margin-top: -2px;
}
footer > .program-detail-header__video {
margin-top: -2px;
}
.program-detail-header__video {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
overflow: hidden;
border-radius: 24px;
background-color: var(--bss-primary);
--tw-shadow: 0 4px 24px rgba(19,46,171,0.12);
--tw-shadow-colored: 0 4px 24px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.program-detail-header__video-poster {
aspect-ratio: 16 / 9;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.program-detail-header__video-iframe {
pointer-events: none;
position: absolute;
inset: 0px;
height: 100%;
width: 100%;
border-width: 0px;
opacity: 0;
}
.enroll-form__error.program-detail-header__video.is-playing .program-detail-header__video-poster,.enroll-form__error
.program-detail-header__video.is-playing .program-detail-header__play {
display: none;
}
.program-detail-header__video.is-playing .program-detail-header__video-poster,
.program-detail-header__video.is-playing .program-detail-header__play {
display: none;
}
.program-detail-header__video.is-playing .program-detail-header__video-iframe {
pointer-events: auto;
opacity: 1;
}
.program-detail-header__play {
position: absolute;
left: 50%;
top: 50%;
z-index: 10;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.program-detail-header__play:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.program-detail-header__play img {
display: block;
height: 3.5rem;
width: 3.5rem;
max-width: none;
}
.program-detail-header__cta {
flex-shrink: 0;
}
.blue-wave-section > .stats-counter-bar {
margin-top: -2px;
}
footer > .stats-counter-bar {
margin-top: -2px;
}
.stats-counter-bar {
background-color: var(--bss-primary);
}
.stats-counter-bar__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
}
@media (min-width: 768px) {
.stats-counter-bar__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.stats-counter-bar__inner {
flex-direction: row;
align-items: flex-start;
gap: 5rem;
padding-left: 80px;
padding-right: 80px;
}
}
.stats-counter-bar__stat {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 0.25rem;
text-align: center;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.stats-counter-bar__stat {
flex: 1 1 0%;
}
}
.stats-counter-bar__value {
display: inline-grid;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 40px;
font-weight: 700;
line-height: 1;
}
@media (min-width: 640px) {
.stats-counter-bar__value {
font-size: 56px;
line-height: 1.1;
font-weight: 700;
}
}
.stats-counter-bar__value {
grid-template: 1fr / 1fr;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
.stats-counter-bar__value::before {
content: attr(data-final);
grid-area: 1 / 1;
visibility: hidden;
white-space: nowrap;
pointer-events: none;
}
.stats-counter-bar__value-inner {
display: flex;
width: 100%;
align-items: baseline;
justify-content: center;
grid-area: 1 / 1;
white-space: nowrap;
}
.stats-counter-bar__number,
.stats-counter-bar__stat-text {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
.stats-counter-bar__suffix {
flex-shrink: 0;
}
/* No-JS and the block editor: show the reserved final value, not "0+". */
html:not(.bss-js) .stats-counter-bar__value:not(.stats-counter-bar__value--static)::before {
visibility: visible;
}
html:not(.bss-js) .stats-counter-bar__value:not(.stats-counter-bar__value--static) .stats-counter-bar__value-inner {
visibility: hidden;
}
.stats-counter-bar__label {
font-size: 18px;
font-weight: 500;
line-height: 1.375;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
html.bss-js [data-anim] {
opacity: 0;
transition-property: opacity, transform;
transition-duration: 400ms;
transition-timing-function: ease;
transition-delay: var(--bss-anim-delay, 0ms);
}
html.bss-js [data-anim='fade-up'] {
transform: translate3d(0, 16px, 0);
}
/*
* Live Elementor gallery (london homepage): scale 0.5 + fade.
* Slightly slower than the live 350ms so the pop reads more clearly.
* Transform only — does not change layout size.
*/
html.bss-js [data-anim='zoom-fade'] {
transform: scale(0.5);
transition-duration: 650ms;
}
html.bss-js [data-anim].is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html.bss-js [data-anim] {
opacity: 1;
transform: none;
transition: none;
}
}
/* Section + card typography — 24px card titles, 16px card body (text-chrome). */
.bss-discover-difference__heading {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
.bss-discover-difference h3 {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--bss-sky) !important;
}
.bss-discover-difference .feature-photo-card__body p,
.bss-discover-difference article p {
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
color: var(--bss-body) !important;
}
/* Match preview: equal-height cards in each grid row. */
.bss-discover-difference .feature-photo-card {
display: flex;
height: 100%;
flex-direction: column;
overflow: hidden;
border-radius: 16px;
background-color: var(--bss-section-tint);
}
.bss-discover-difference .feature-photo-card__image {
aspect-ratio: 412/232;
width: 100%;
flex-shrink: 0;
-o-object-fit: cover;
object-fit: cover;
}
.bss-discover-difference .feature-photo-card__body {
display: flex;
flex: 1 1 0%;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
align-self: stretch;
background-color: var(--bss-section-tint);
padding-left: 18px;
padding-right: 18px;
padding-bottom: 18px;
padding-top: 1rem;
}
.bss-discover-difference .feature-6up__track > .feature-photo-card {
width: 100%;
min-width: 0px;
flex-shrink: 0;
flex-grow: 0;
flex-basis: 100%;
}
@media (min-width: 1024px) {
.bss-discover-difference .feature-6up__track {
transform: none !important;
align-items: stretch;
}
.bss-discover-difference .feature-6up__track > .feature-photo-card {
width: auto;
flex-basis: auto;
}
}
.pool-detail-hero-band {
width: 100%;
background-color: var(--bss-light-bg);
}
.pool-detail-hero {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1440px;
flex-direction: column-reverse;
}
.pool-detail-hero__panel {
display: flex;
flex-shrink: 0;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
}
/* Matches preview H1 utilities so they compile via @apply. */
.pool-detail-hero__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.12;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.pool-detail-hero__title {
font-size: 40px;
}
}
@media (min-width: 1024px) {
.pool-detail-hero__title {
font-size: 56px;
font-weight: 700;
line-height: 1.1;
}
}
.pool-detail-hero__pin-row {
display: flex;
width: 100%;
max-width: 400px;
align-items: flex-start;
gap: 0.75rem;
}
.pool-detail-hero__pin {
margin-top: 0.125rem;
height: 1.25rem;
width: auto;
flex-shrink: 0;
}
.pool-detail-hero__address-col {
display: flex;
min-width: 0px;
flex: 1 1 0%;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.pool-detail-hero__address {
width: 100%;
max-width: 400px;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
font-style: normal;
color: #1b2a34;
}
.pool-detail-hero__address span {
display: block;
}
.pool-detail-hero__directions {
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-cta);
text-underline-offset: 2px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.pool-detail-hero__directions:hover {
text-decoration-line: underline;
}
.pool-detail-hero__cta {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.pool-detail-hero__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.pool-detail-hero__photo {
aspect-ratio: 692/400;
width: 100%;
flex-shrink: 0;
overflow: hidden;
}
.pool-detail-hero__photo img {
display: block;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
}
@media (min-width: 1024px) {
.pool-detail-hero {
flex-direction: row;
}
.pool-detail-hero__panel {
width: 52%; /* 749 / 1441 */
min-height: 584px; /* matches the live site's hero band */
padding: 48px 64px 48px 80px;
}
/* No explicit height: both children stretch to the row, so the panel's
min-height drives it and a long pool name grows the band instead of
overflowing a fixed 400px box. */
.pool-detail-hero__photo {
aspect-ratio: auto;
width: 48%; /* 692 / 1441 */
}
}
/* Feature icon carousel — week6 preview component. */
.feature-icon-carousel {
gap: 2.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
.feature-icon-carousel__heading {
width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media (min-width: 768px) {
.feature-icon-carousel__heading {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.feature-icon-carousel__heading {
padding-left: 80px;
padding-right: 80px;
}
}
.feature-icon-carousel__row {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1400px;
align-items: center;
gap: 1.25rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media (min-width: 768px) {
.feature-icon-carousel__row {
padding-left: 0px;
padding-right: 0px;
}
}
.feature-icon-carousel__viewport {
min-width: 0px;
flex: 1 1 0%;
overflow: hidden;
}
.feature-icon-card {
display: flex;
flex-shrink: 0;
flex-grow: 0;
flex-basis: 100%;
align-items: center;
gap: 0.75rem;
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding: 18px;
}
@media (min-width: 640px) {
.feature-icon-card {
flex-basis: calc((100% - 1.5rem) / 2);
}
}
.feature-icon-card img {
height: 3rem;
width: 3rem;
flex-shrink: 0;
-o-object-fit: contain;
object-fit: contain;
}
.feature-icon-card p {
text-align: left;
font-size: 14px;
font-weight: 700;
line-height: 1.375;
color: var(--bss-primary);
}
.feature-icon-carousel [data-carousel-track] {
gap: 1.5rem;
}
@media (min-width: 1024px) {
.feature-icon-carousel__viewport {
max-width: 1280px;
flex: 1 1 0%;
}
/* Four cards + three 24px gaps always fit inside the viewport. */
.feature-icon-card {
flex: 0 0 calc((100% - 4.5rem) / 4);
width: calc((100% - 4.5rem) / 4);
max-width: 302px;
}
}
/* Pool pricing — Option C grid (new-pricing.html) + details accordion. */
.pool-pricing__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.pool-pricing__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.pool-pricing__inner {
gap: 3rem;
padding-left: 80px;
padding-right: 80px;
padding-top: 80px;
padding-bottom: 80px;
}
}
/*
* Stacked Pricing table blocks with the same background drop the second
* section's top padding instead of doubling the gap. Different backgrounds
* keep full padding so each band stays balanced.
* Editor selectors: each block sits in its own .wp-block wrapper, so :has()
* reads the background of the previous block.
* Uses the --tint / --white modifiers, not bg-* utilities: a utility class in
* a component selector makes Tailwind copy this rule into every @apply of it.
*/
.pool-pricing--tint + .pool-pricing--tint .pool-pricing__inner,
.pool-pricing--white + .pool-pricing--white .pool-pricing__inner,
.wp-block[data-type="bss/pricing-table"]:has(.pool-pricing--tint) + .wp-block[data-type="bss/pricing-table"] .pool-pricing--tint .pool-pricing__inner,
.wp-block[data-type="bss/pricing-table"]:has(.pool-pricing--white) + .wp-block[data-type="bss/pricing-table"] .pool-pricing--white .pool-pricing__inner {
padding-top: 0px;
}
@media (min-width: 1024px) {
.pool-pricing--tint + .pool-pricing--tint .pool-pricing__inner,
.pool-pricing--white + .pool-pricing--white .pool-pricing__inner,
.wp-block[data-type="bss/pricing-table"]:has(.pool-pricing--tint) + .wp-block[data-type="bss/pricing-table"] .pool-pricing--tint .pool-pricing__inner,
.wp-block[data-type="bss/pricing-table"]:has(.pool-pricing--white) + .wp-block[data-type="bss/pricing-table"] .pool-pricing--white .pool-pricing__inner {
padding-top: 0px;
}
}
.pool-pricing__header {
display: flex;
max-width: 760px;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
}
.pool-pricing__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 30px;
font-weight: 700;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.pool-pricing__title {
font-size: 40px;
}
}
@media (min-width: 1024px) {
.pool-pricing__title {
font-size: 56px;
line-height: 1.1;
font-weight: 700;
}
}
.pool-pricing__subtitle {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.pool-pricing__desc {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.pool-pricing__desc :is(p) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.pool-pricing__desc :is(p + p) {
margin-top: 0.75rem;
}
/* Migrated headings (e.g. “Save More as You Swim More!”) read as a subtitle, not body copy. */
.pool-pricing__desc :is(h2, h3, h4),
.pool-pricing-acc__richtext :is(h2, h3, h4) {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.375;
color: var(--bss-primary);
}
.pool-pricing__desc :is(p + :is(h2, h3, h4), :is(h2, h3, h4) + p),
.pool-pricing-acc__richtext :is(p + :is(h2, h3, h4), :is(h2, h3, h4) + p) {
margin-top: 0.75rem;
}
.pool-pricing__desc :is(strong, b) {
font-weight: 700;
color: var(--bss-primary);
}
/* Links inside migrated / editor rich text (card lines, intro, accordion).
Long addresses such as an email wrap instead of running into the card edge. */
.pool-pricing :is(.price-card__body, .pool-pricing__desc, .pool-pricing-acc__body) a {
color: var(--bss-cta);
text-underline-offset: 2px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.pool-pricing :is(.price-card__body, .pool-pricing__desc, .pool-pricing-acc__body) a:hover {
text-decoration-line: underline;
}
.pool-pricing :is(.price-card__body, .pool-pricing__desc, .pool-pricing-acc__body) a {
overflow-wrap: anywhere;
}
.price-card__body li > span {
min-width: 0;
overflow-wrap: anywhere;
}
/* Legacy price copy: color, size, and weight set in the editor beat the card default. */
.pool-pricing :is(.price-card__price-note, .pool-pricing__card-price-note, .pool-pricing__card-price) a {
color: inherit;
font-size: inherit;
font-weight: inherit;
}
/* Legacy migrated pricing — centred single card (pool-detail.html). */
.pool-pricing__cards {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.pool-pricing__cards--single {
justify-content: center;
}
/* Four legacy cards: two 411px columns, spread with space around each card. */
.pool-pricing__cards.pool-pricing__cards--pairs {
margin-left: auto;
margin-right: auto;
display: grid;
width: 100%;
justify-content: space-around;
gap: 5rem;
grid-template-columns: minmax(0, 411px);
}
@media (min-width: 1024px) {
.pool-pricing__cards.pool-pricing__cards--pairs {
grid-template-columns: repeat(2, minmax(0, 411px));
}
}
.pool-pricing__cards.pool-pricing__cards--pairs > .pool-pricing__card {
width: 100%;
min-width: 0px;
max-width: 411px;
}
.pool-pricing__card {
display: flex;
width: 100%;
max-width: 411px;
flex-direction: column;
align-items: center;
border-radius: 24px;
border-width: 2px;
border-color: var(--bss-primary);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
text-align: center;
box-shadow: 0 4px 24px rgba(19, 46, 171, 0.07);
}
/* Option C — one or two cards centred. Three or more stay on the full grid. */
.pool-pricing__grid.pool-pricing__grid--single,
.pool-pricing__grid.pool-pricing__grid--centered {
display: flex !important;
width: 100%;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
/* Four cards: two 411px columns. Extra space sits around the pair, not inside the cards. */
.pool-pricing__grid.pool-pricing__grid--pairs {
margin-left: auto;
margin-right: auto;
display: grid !important;
width: 100%;
justify-content: space-around;
gap: 5rem;
grid-template-columns: minmax(0, 411px);
}
@media (min-width: 1024px) {
.pool-pricing__grid.pool-pricing__grid--pairs {
grid-template-columns: repeat(2, minmax(0, 411px));
}
}
.pool-pricing__grid.pool-pricing__grid--single > .price-card,
.pool-pricing__grid.pool-pricing__grid--centered > .price-card {
width: min(100%, 411px);
flex-shrink: 0;
}
.pool-pricing__grid.pool-pricing__grid--pairs > .price-card {
width: 100%;
min-width: 0px;
max-width: 411px;
}
.pool-pricing__card-label {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.mega-programs-grid > div > .pool-pricing__card-price {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.pool-pricing__card-price {
margin-top: 1rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 40px;
font-weight: 700;
line-height: 1;
color: var(--bss-cta);
}
/* Legacy single rate holding copy (tiers, notes) instead of one amount. */
.pool-pricing__card-price-note,
.price-card__price-note {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.375;
color: var(--bss-cta);
}
.mega-programs-grid > div > .pool-pricing__card-price-note {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.pool-pricing__card-price-note {
margin-top: 1rem;
}
/* Legacy price HTML that brings its own layout.
Stretch across the card so the centered column does not shrink the flex row.
margin-top is plain CSS: @apply mt-4 would copy the mega-menu column rule onto this box. */
.pool-pricing__card-rich {
margin-top: 1rem;
width: 100%;
align-self: stretch;
color: var(--bss-cta);
}
/* Column labels stay the body color. Only the price that sets color:red is red. */
.pool-pricing__card-rich:has(.price_card_unit) {
color: inherit;
}
/* Migrated markup: two pace columns side by side. */
.price_card_unit {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
gap: 60px;
width: 100%;
text-align: center;
}
.price_card_unit > div {
flex: 1 1 0;
min-width: 0;
}
.pool-pricing__card-freq {
margin-top: 0.75rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--bss-primary);
}
.pool-pricing__card-cadence {
margin-top: 0.5rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(138 151 184 / var(--tw-text-opacity, 1));
}
.price-card {
position: relative;
display: flex;
flex-direction: column;
overflow: visible;
border-radius: 24px;
border-width: 1.5px;
border-color: transparent;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1.75rem;
padding-bottom: 1.75rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
box-shadow: 0 4px 24px rgba(19, 46, 171, 0.07);
}
.price-card--recommended {
border-color: transparent;
}
.price-card__badge {
position: absolute;
left: 50%;
top: 0px;
z-index: 10;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
border-radius: 40px;
background-color: var(--bss-star);
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 13px;
font-weight: 700;
color: var(--bss-primary);
}
.price-card:has(.price-card__input:checked) {
border-color: var(--bss-primary);
box-shadow: none;
}
.price-card:has(.price-card__input:focus-visible) {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: var(--bss-sky);
}
.price-card__body {
display: flex;
flex: 1 1 0%;
cursor: pointer;
flex-direction: column;
}
.price-card__cta {
margin-top: 1.5rem;
flex-shrink: 0;
}
.price-card--has-media {
padding-top: 0px;
}
.price-card__media {
margin-left: -2rem;
margin-right: -2rem;
margin-bottom: 1.5rem;
height: 180px;
flex-shrink: 0;
overflow: hidden;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}
.price-card__media img {
display: block;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.price-card__pace {
margin-top: 0.75rem;
align-self: flex-start;
border-radius: 40px;
background-color: var(--bss-panel-bg);
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 13px;
font-weight: 700;
color: var(--bss-primary);
}
.price-card__discounts {
margin-top: 1.5rem;
border-top-width: 1px;
border-color: var(--bss-border);
padding-top: 1.25rem;
}
.price-card__discounts-list > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.price-card__discounts-item {
font-size: 18px;
font-weight: 500;
line-height: 1.375;
--tw-text-opacity: 1;
color: rgb(138 151 184 / var(--tw-text-opacity, 1));
}
.pricing-pace-filter {
display: flex;
width: 100%;
justify-content: center;
}
.pricing-pace-filter__track {
display: inline-flex;
max-width: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.25rem;
border-radius: 40px;
background-color: var(--bss-panel-bg);
padding: 0.375rem;
}
.pricing-pace-filter__tab {
display: inline-flex;
align-items: center;
gap: 0.375rem;
white-space: nowrap;
border-radius: 40px;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 14px;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(138 151 212 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.pricing-pace-filter__tab:hover {
color: var(--bss-primary);
}
@media (min-width: 640px) {
.pricing-pace-filter__tab {
padding-left: 1.25rem;
padding-right: 1.25rem;
font-size: 15px;
}
}
.pricing-pace-filter__tab.is-active {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
color: var(--bss-primary);
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pricing-pace-filter__hint {
border-radius: 40px;
background-color: var(--bss-star);
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
font-size: 10px;
font-weight: 700;
line-height: 1;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.pricing-pace-filter__hint {
font-size: 11px;
}
}
.price-card--pace-unavailable {
opacity: 0.55;
}
.price-card--pace-unavailable .price-card__cta {
pointer-events: none;
opacity: 0.6;
}
.pool-pricing-acc {
width: 100%;
}
.blue-wave-section > .pool-pricing-acc > summary {
margin-top: -2px;
}
footer > .pool-pricing-acc > summary {
margin-top: -2px;
}
.pool-pricing-acc > summary {
display: flex;
cursor: pointer;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-radius: 16px;
background-color: var(--bss-primary);
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
list-style: none;
}
.pool-pricing-acc > summary::-webkit-details-marker {
display: none;
}
.pool-pricing-acc > summary:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: var(--bss-primary);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: var(--bss-section-tint);
}
.pool-pricing-acc[open] > summary {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.pool-pricing-acc__toggle {
position: relative;
display: block;
height: 2.5rem;
width: 2.5rem;
flex-shrink: 0;
border-radius: 9999px;
background-color: var(--bss-cta);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pool-pricing-acc__toggle::before,
.pool-pricing-acc__toggle::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
background-color: currentColor;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
.pool-pricing-acc__toggle::before {
height: 0.125rem;
width: 1.25rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.pool-pricing-acc__toggle::after {
height: 1.25rem;
width: 0.125rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.pool-pricing-acc[open] .pool-pricing-acc__toggle::after {
--tw-scale-y: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.pool-pricing-acc__body {
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
.pool-pricing-acc__body {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
}
.pool-pricing-acc__grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 1024px) {
.pool-pricing-acc__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
row-gap: 1rem;
}
}
.pool-pricing-acc__list {
list-style-type: disc;
}
.pool-pricing-acc__list > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.pool-pricing-acc__list {
padding-left: 1.25rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.pool-pricing-acc__richtext {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.pool-pricing-acc__richtext ul {
list-style-type: disc;
}
.pool-pricing-acc__richtext ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.pool-pricing-acc__richtext ul {
padding-left: 1.25rem;
}
.pool-pricing-acc__richtext ol {
list-style-type: decimal;
}
.pool-pricing-acc__richtext ol > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.pool-pricing-acc__richtext ol {
padding-left: 1.25rem;
}
.pool-pricing-acc__richtext p + p {
margin-top: 0.75rem;
}
.pool-pricing__cta {
margin-left: auto;
margin-right: auto;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.pool-pricing__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
/* Location details — native details accordions for WSL hours. */
.location-details__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 4rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.location-details__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.location-details__inner {
padding: 80px;
}
}
/* Stretch to the section width. A max-width here made long location copy stack too tall. */
.location-details__header {
width: 100%;
text-align: center;
}
.location-details__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 30px;
font-weight: 700;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.location-details__title {
font-size: 40px;
}
}
@media (min-width: 1024px) {
.location-details__title {
font-size: 56px;
line-height: 1.1;
font-weight: 700;
}
}
.mega-programs-grid > div > .location-details__name {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.location-details__name {
margin-top: 1rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-primary);
}
.location-details__address {
margin-top: 0.5rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.location-details__directions {
margin-top: 0.75rem;
display: inline-block;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-cta);
text-underline-offset: 2px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.location-details__directions:hover {
text-decoration-line: underline;
}
.mega-programs-grid > div > .location-details__copy {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.location-details__copy {
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
width: 100%;
text-align: left;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.location-details__copy :is(p + p) {
margin-top: 0.75rem;
}
.location-details__hours {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.hours-acc {
width: 100%;
max-width: 600px;
border-radius: 16px;
background-color: var(--bss-light-bg);
}
.hours-acc > summary {
display: flex;
cursor: pointer;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
list-style: none;
}
.hours-acc > summary::-webkit-details-marker {
display: none;
}
.hours-plus {
position: relative;
display: block;
height: 0.75rem;
width: 0.75rem;
}
.hours-plus::before,
.hours-plus::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
.hours-plus::before {
height: 0.125rem;
width: 0.75rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hours-plus::after {
height: 0.75rem;
width: 0.125rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hours-acc[open] .hours-plus::after {
--tw-scale-y: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hours-acc__body {
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1rem;
}
.hours-acc__row {
display: flex;
align-items: center;
justify-content: space-between;
border-top-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
}
.hours-acc__row:first-child {
border-top-width: 0px;
}
.hours-acc__day {
color: var(--bss-body);
}
.hours-acc__value {
text-align: right;
font-weight: 600;
color: var(--bss-primary);
}
.hours-acc__value--closed {
color: #8a97b8;
}
/* Same frame as the pool pricing section. */
.bss-accordion-section__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.bss-accordion-section__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.bss-accordion-section__inner {
gap: 3rem;
padding-left: 80px;
padding-right: 80px;
padding-top: 80px;
padding-bottom: 80px;
}
}
.bss-accordion-section__header {
display: flex;
max-width: 760px;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
}
.bss-accordion-section__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 30px;
font-weight: 700;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.bss-accordion-section__title {
font-size: 40px;
}
}
@media (min-width: 1024px) {
.bss-accordion-section__title {
font-size: 56px;
line-height: 1.1;
font-weight: 700;
}
}
.bss-accordion-section__desc {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.bss-accordion-section__desc > * + * {
margin-top: 0.75rem;
}
.bss-accordion-section__items {
display: flex;
width: 100%;
flex-direction: column;
gap: 1rem;
}
/*
* Two columns: one editor, content flows across columns on desktop.
* Lists may continue into the next column; single items and paragraphs stay whole.
*/
@media (min-width: 1024px) {
.bss-accordion-section__content--two {
-moz-columns: 2;
columns: 2;
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
}
}
.bss-accordion-section__content--two :is(li, p, h2, h3, h4) {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.bss-accordion-section__content--two > :first-child {
margin-top: 0px;
}
/*
* Light style — white section, light blue (#EEF3FA) accordions with navy text
* (Location details hours rows). Dark style keeps the .pool-pricing-acc look.
*/
.bss-accordion-section--light .pool-pricing-acc > summary {
background-color: var(--bss-light-bg);
color: var(--bss-primary);
}
.bss-accordion-section--light .pool-pricing-acc > summary:focus-visible {
--tw-ring-offset-color: #fff;
}
.bss-accordion-section--light .pool-pricing-acc__body {
border-top-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
background-color: var(--bss-light-bg);
}
.bss-accordion-section :is(.bss-accordion-section__desc, .pool-pricing-acc__body) a {
color: var(--bss-cta);
text-underline-offset: 2px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.bss-accordion-section :is(.bss-accordion-section__desc, .pool-pricing-acc__body) a:hover {
text-decoration-line: underline;
}
.bss-accordion-section :is(.bss-accordion-section__desc, .pool-pricing-acc__body) a {
overflow-wrap: anywhere;
}
.bss-accordion-section :is(.bss-accordion-section__desc, .pool-pricing-acc__body) :is(strong, b) {
font-weight: 700;
color: var(--bss-primary);
}
/* Clear the sticky nav so the Enroll / Pricing titles stay in view. */
#enroll,
#pricing {
scroll-margin-top: 10rem;
}
/* Header links stacked under the pool name. */
.enroll-header-links {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.enroll-header-links a {
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-cta);
text-underline-offset: 2px;
}
.enroll-header-links a:hover {
text-decoration-line: underline;
}
.enroll-acc > summary {
display: flex;
cursor: pointer;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-radius: 16px;
border-width: 2px;
border-color: var(--bss-primary);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
color: var(--bss-primary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
list-style: none;
}
.enroll-acc > summary::-webkit-details-marker {
display: none;
}
.blue-wave-section > .enroll-acc > summary:hover,.blue-wave-section >
.enroll-acc[open] > summary {
margin-top: -2px;
}
footer > .enroll-acc > summary:hover,footer >
.enroll-acc[open] > summary {
margin-top: -2px;
}
.enroll-acc > summary:hover,
.enroll-acc[open] > summary {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.enroll-acc > summary:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: var(--bss-primary);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
}
@media (min-width: 1024px) {
.enroll-acc > summary {
padding-left: 70px;
padding-right: 70px;
}
}
.enroll-toggle {
position: relative;
display: block;
height: 2.5rem;
width: 2.5rem;
flex-shrink: 0;
border-radius: 9999px;
background-color: var(--bss-cta);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.enroll-toggle::before,
.enroll-toggle::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
background-color: currentColor;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
.enroll-toggle::before {
height: 0.125rem;
width: 1.25rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.enroll-toggle::after {
height: 1.25rem;
width: 0.125rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.enroll-acc[open] .enroll-toggle::after {
--tw-scale-y: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.enroll-card {
display: flex;
flex-direction: column;
border-radius: 20px;
border-width: 3px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding: 1.25rem;
border-color: var(--pc, #132eab);
box-shadow: 0 4px 16px rgba(19, 46, 171, 0.08);
}
.enroll-card__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 28px;
font-weight: 800;
line-height: 1.25;
}
@media (min-width: 1024px) {
.enroll-card__title {
font-size: 32px;
}
}
.enroll-card__title {
color: var(--pc-ink, #132eab);
}
.enroll-card__age {
display: inline-block;
border-radius: 40px;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px;
font-weight: 700;
color: var(--pc-ink, #132eab);
background-color: #f1f8fc;
background-color: color-mix(in srgb, var(--pc, #132eab) 15%, #fff);
}
.enroll-card__desc {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--pc-ink, #132eab);
}
.enroll-card__icon {
height: 5rem;
width: 5rem;
flex-shrink: 0;
-o-object-fit: contain;
object-fit: contain;
}
.enroll-card__divider {
margin-top: auto;
border-top-width: 2px;
padding-top: 1rem;
border-top-color: #d8e4f0;
border-top-color: color-mix(in srgb, var(--pc, #132eab) 25%, #fff);
}
.enroll-cta,
.enroll-time__cta {
display: block;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: center;
font-size: 18px;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.enroll-cta:hover,
.enroll-time__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.enroll-cta {
width: 100%;
}
/* Site Options custom cards (Adult Lane, etc.): same chrome, outbound CTA. */
.enroll-card--link {
gap: 1.25rem;
}
@media (min-width: 640px) {
.enroll-card--link {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
}
.enroll-card--link .enroll-card__heading {
display: flex;
flex-wrap: wrap;
align-items: center;
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
row-gap: 0.5rem;
}
.enroll-card--link .enroll-card__link-cta {
width: 100%;
flex-shrink: 0;
}
@media (min-width: 640px) {
.enroll-card--link .enroll-card__link-cta {
width: auto;
min-width: 220px;
white-space: nowrap;
}
}
.enroll-notice {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* No JackRabbit classes. Full message sits in one primary-bordered box. */
.enroll-empty {
margin-left: auto;
margin-right: auto;
margin-top: 2.5rem;
max-width: 720px;
border-radius: 24px;
border-width: 2px;
border-color: var(--bss-primary);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
text-align: center;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.enroll-empty {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}
.enroll-empty__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 28px;
font-weight: 800;
line-height: 1.25;
}
@media (min-width: 1024px) {
.enroll-empty__title {
font-size: 32px;
}
}
.enroll-empty__body {
margin-top: 0.75rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-primary);
}
.enroll-empty__link {
font-weight: 600;
color: var(--bss-cta);
text-decoration-line: underline;
text-underline-offset: 2px;
}
.enroll-empty__link:hover {
text-decoration-line: none;
}
.enroll-modal {
position: fixed;
inset: 0px;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.enroll-modal[hidden] {
display: none;
}
.enroll-modal__overlay {
position: absolute;
inset: 0px;
background-color: rgba(9,18,48,0.6);
}
.enroll-modal__dialog {
position: relative;
display: flex;
max-height: 88vh;
width: 100%;
max-width: 680px;
flex-direction: column;
overflow: hidden;
border-radius: 20px;
border-width: 3px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
border-color: var(--pc, #132eab);
box-shadow: 0 24px 60px rgba(9, 18, 48, 0.35);
}
.enroll-modal__head {
position: relative;
flex-shrink: 0;
border-bottom-width: 2px;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1rem;
padding-top: 1.25rem;
}
@media (min-width: 768px) {
.enroll-modal__head {
padding-left: 2rem;
padding-right: 2rem;
}
}
.enroll-modal__head {
border-bottom-color: #d8e4f0;
border-bottom-color: color-mix(in srgb, var(--pc, #132eab) 20%, #fff);
}
.enroll-modal__icon {
height: 4rem;
width: 4rem;
flex-shrink: 0;
-o-object-fit: contain;
object-fit: contain;
}
@media (min-width: 768px) {
.enroll-modal__icon {
height: 5rem;
width: 5rem;
}
}
.enroll-modal__control {
display: flex;
height: 2.25rem;
width: 2.25rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 9999px;
font-size: 24px;
line-height: 1;
color: var(--bss-primary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.enroll-modal__control:hover {
background-color: var(--bss-section-tint);
}
.enroll-modal__body {
min-height: 0px;
flex: 1 1 0%;
overflow-y: auto;
}
.enroll-time {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.enroll-time {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
@media (min-width: 768px) {
.enroll-time {
padding-left: 2rem;
padding-right: 2rem;
}
}
.enroll-time:nth-of-type(odd) {
background-color: var(--bss-section-tint);
}
.enroll-time[hidden] {
display: none;
}
.enroll-time__cta {
width: 100%;
flex-shrink: 0;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 15px;
}
@media (min-width: 640px) {
.enroll-time__cta {
width: auto;
}
}
.enroll-time__status {
font-size: 13px;
font-weight: 600;
color: var(--bss-sky);
}
.enroll-time__cta--disabled {
cursor: not-allowed;
--tw-bg-opacity: 1;
background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.enroll-time__cta--disabled:hover {
--tw-brightness: brightness(1);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.enroll-time__cta--waitlist {
border-width: 2px;
border-color: var(--bss-primary);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
color: var(--bss-primary);
}
.enroll-time__cta--waitlist:hover {
background-color: var(--bss-section-tint);
--tw-brightness: brightness(1);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.enroll-waitlist {
margin-top: 0.5rem;
}
.enroll-waitlist__label {
margin-left: 1.25rem;
margin-right: 1.25rem;
border-top-width: 1px;
border-style: dashed;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0.5rem;
padding-top: 1.25rem;
text-align: center;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--bss-primary);
}
@media (min-width: 768px) {
.enroll-waitlist__label {
margin-left: 2rem;
margin-right: 2rem;
}
}
.enroll-waitlist__label {
border-color: rgba(19, 46, 171, 0.4);
}
/* Production parity: italic waitlist explainer above the lead form. */
.enroll-waitlist-intro {
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1.25rem;
text-align: center;
font-size: 15px;
font-style: italic;
line-height: 1.625;
color: var(--bss-primary);
}
@media (min-width: 768px) {
.enroll-waitlist-intro {
padding-left: 2rem;
padding-right: 2rem;
}
}
.enroll-waitlist-intro[hidden] {
display: none;
}
.enroll-sisters {
border-top-width: 1px;
border-color: var(--bss-border);
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
.enroll-sisters {
padding-left: 2rem;
padding-right: 2rem;
}
}
.enroll-sisters[hidden] {
display: none;
}
.enroll-sisters__intro {
text-align: center;
font-size: 16px;
font-weight: 600;
line-height: 1.625;
color: var(--bss-primary);
}
.enroll-sisters__list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.enroll-sisters__list.is-scrollable {
max-height: 154px;
overflow-y: auto;
}
.enroll-sisters__item {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
@media (min-width: 640px) {
.enroll-sisters__item {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
}
.enroll-sisters__item[hidden] {
display: none;
}
.enroll-sisters__title {
font-size: 16px;
font-weight: 700;
color: var(--bss-primary);
}
.enroll-sisters__address {
margin-top: 0.25rem;
font-size: 14px;
color: var(--bss-body);
}
.enroll-sisters__address[hidden] {
display: none;
}
.enroll-sisters__link {
flex-shrink: 0;
font-size: 15px;
font-weight: 600;
color: var(--bss-cta);
text-decoration-line: underline;
text-underline-offset: 2px;
}
.enroll-sisters__link:hover {
text-decoration-line: none;
}
.enroll-sisters [data-enroll-sisters-more-wrap][hidden] {
display: none;
}
.blue-wave-section > .enroll-form {
margin-top: -2px;
}
footer > .enroll-form {
margin-top: -2px;
}
.enroll-form {
background-color: var(--bss-primary);
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
@media (min-width: 768px) {
.enroll-form {
padding-left: 2rem;
padding-right: 2rem;
}
}
.enroll-form .form-field,
.enroll-form .loc-select {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
color: var(--bss-primary);
}
.enroll-form__error.hidden {
display: none;
}
/*
* Page intro hero — 2-col with optional red-check list + CTA.
*/
.loc-finder-section--corporate > .page-intro-hero__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .page-intro-hero__inner {
padding-bottom: 8rem;
}
}
.page-intro-hero__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1280px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 5rem;
text-align: center;
}
@media (min-width: 768px) {
.page-intro-hero__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.page-intro-hero__inner {
flex-direction: row;
align-items: center;
gap: 3rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 5rem;
padding-bottom: 5rem;
text-align: left;
}
}
.page-intro-hero__content {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 1rem;
}
@media (min-width: 1024px) {
.page-intro-hero__content {
flex: 1 1 0%;
align-items: flex-start;
}
}
.page-intro-hero__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.page-intro-hero__title {
font-size: 40px;
}
}
@media (min-width: 1024px) {
.page-intro-hero__title {
font-size: 56px;
font-weight: 700;
line-height: 1.1;
}
}
.page-intro-hero__subtitle {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/* Italic lead under the H1. Used by the infant swim hero. */
.page-intro-hero__kicker {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 22px;
font-weight: 600;
font-style: italic;
line-height: 1.375;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.page-intro-hero__kicker {
font-size: 24px;
line-height: 1.3;
font-weight: 600;
}
}
.page-intro-hero__intro {
width: 100%;
text-align: left;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.page-intro-hero__intro :is(p) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.page-intro-hero:not(.page-intro-hero--dark) .page-intro-hero__intro :is(strong, b) {
font-weight: 700;
color: var(--bss-primary);
}
.page-intro-hero:not(.page-intro-hero--dark) .page-intro-hero__intro a {
color: var(--bss-cta);
text-underline-offset: 2px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.page-intro-hero:not(.page-intro-hero--dark) .page-intro-hero__intro a:hover {
text-decoration-line: underline;
}
.page-intro-hero__intro :is(p + p) {
margin-top: 0.75rem;
}
.mega-programs-grid > div > .page-intro-hero__intro :is(ul, ol) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.page-intro-hero__intro :is(ul, ol) {
margin-top: 1rem;
display: flex;
width: 100%;
list-style-type: none;
flex-direction: column;
gap: 0.75rem;
padding: 0px;
}
.page-intro-hero__intro :is(ul > li, ol > li) {
position: relative;
padding-left: 1.75rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.page-intro-hero__intro :is(ul > li)::before {
content: '';
position: absolute;
left: 0;
top: 0.125rem;
height: 18px;
width: 18px;
background-image: var(--bss-hero-check-icon);
background-repeat: no-repeat;
background-size: contain;
}
.page-intro-hero__intro :is(ul > li strong, ol > li strong) {
font-weight: 700;
color: var(--bss-primary);
}
/* Single row of red-check bullets — Programs / FAQ / Blog / Communities. */
.page-intro-hero__checks {
margin-top: 1.5rem;
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
@media (min-width: 1024px) {
.page-intro-hero__checks {
justify-content: flex-start;
gap: 1.5rem;
}
}
.page-intro-hero__checks li {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 0.5rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-primary);
}
.page-intro-hero__checks li span {
white-space: nowrap;
}
.page-intro-hero__check-icon {
margin-top: 0px;
height: 18px;
width: 18px;
flex-shrink: 0;
}
/*
* Page intro hero — checks block: the one-row list is wider than a phone
* (3 checks ≈ 457px at 375px), so checks wrap below lg; one row on desktop.
*/
.page-intro-checks .page-intro-hero__checks {
flex-wrap: wrap;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 0.5rem;
}
@media (min-width: 1024px) {
.page-intro-checks .page-intro-hero__checks {
flex-wrap: nowrap;
gap: 1.5rem;
}
}
.page-intro-hero__media {
width: 100%;
}
@media (min-width: 1024px) {
.page-intro-hero__media {
flex: 1 1 0%;
}
}
.page-intro-hero__image {
aspect-ratio: 4/3;
width: 100%;
border-radius: 24px;
-o-object-fit: cover;
object-fit: cover;
}
.page-intro-hero__btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.page-intro-hero__btn:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
/*
* current_location_icon.svg is a red stroke. Invert it to white on the
* red CTA so the pin stays visible. Outline/light variants keep the source.
*/
.page-intro-hero__btn:not(.page-intro-hero__btn--outline):not(.page-intro-hero__btn--light) img {
filter: brightness(0) invert(1);
}
.page-intro-hero--light {
background-color: var(--bss-section-tint);
}
/*
* White hero — opt-in. Aqua Active stays on --dark (blue) unless the
* location turns on “White hero background”. Base title/body colors
* stay dark; do not combine this class with --dark.
*/
.page-intro-hero--white {
background-color: #fff;
}
/*
* Page intro hero — dark navy variant (lifeguard, barracuda, referral, etc.).
*/
.blue-wave-section > .page-intro-hero--dark {
margin-top: -2px;
}
footer > .page-intro-hero--dark {
margin-top: -2px;
}
.page-intro-hero--dark {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--dark .page-intro-hero__title {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--dark .page-intro-hero__subtitle {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--dark .page-intro-hero__kicker {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--dark .page-intro-hero__subtitle :is(p) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--dark .page-intro-hero__subtitle :is(p + p) {
margin-top: 0.75rem;
}
.page-intro-hero--dark .page-intro-hero__intro {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--dark .page-intro-hero__intro :is(p) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--dark .page-intro-hero__intro :is(ul > li, ol > li) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--dark .page-intro-hero__intro :is(ul > li strong, ol > li strong) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--dark .page-intro-hero__checks li {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/*
* Split photo variant — full-bleed tint; copy left, photo right.
*/
.page-intro-hero--split-photo .page-intro-hero__inner {
max-width: 1440px;
flex-direction: column;
gap: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
@media (min-width: 1024px) {
.page-intro-hero--split-photo .page-intro-hero__inner {
flex-direction: row;
align-items: stretch;
}
}
.page-intro-hero--split-photo .page-intro-hero__content {
align-items: flex-start;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
text-align: left;
}
@media (min-width: 768px) {
.page-intro-hero--split-photo .page-intro-hero__content {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.page-intro-hero--split-photo .page-intro-hero__content {
width: 52%;
flex-shrink: 0;
justify-content: center;
padding-top: 4rem;
padding-bottom: 4rem;
padding-left: 2.5rem;
padding-right: 2rem;
}
}
@media (min-width: 1280px) {
.page-intro-hero--split-photo .page-intro-hero__content {
padding-left: 5rem;
}
}
.page-intro-hero--split-photo .page-intro-hero__media {
width: 100%;
}
@media (min-width: 1024px) {
.page-intro-hero--split-photo .page-intro-hero__media {
width: 48%;
flex-shrink: 0;
overflow: hidden;
}
}
.page-intro-hero--split-photo .page-intro-hero__image {
display: block;
width: 100%;
border-radius: 0px;
}
@media (min-width: 1024px) {
.page-intro-hero--split-photo .page-intro-hero__image {
height: 100%;
min-height: 400px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
}
}
/*
* Region landing hero (greater-salt-lake-utah-county.html).
* Copy stays in the centered 1440 canvas. From lg the photo starts at the
* screen midpoint and runs to the screen edge. On a 1920 screen that fills
* the tint strip a 1440-wide photo would leave on the right.
*/
.page-intro-hero--region {
/* isolate keeps the photo inside this section so it cannot cover the band below. */
position: relative;
isolation: isolate;
overflow: hidden;
}
/* The partner wave pulls up over the hero. It must paint above the photo. */
.page-intro-hero--region + .blue-wave-section {
position: relative;
z-index: 20;
}
.page-intro-hero--region.page-intro-hero--split-photo .page-intro-hero__inner {
/* pointer-events-none lets the quote card (under this canvas) be selected. */
pointer-events: none;
position: relative;
z-index: 10;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1440px;
}
@media (min-width: 1024px) {
.page-intro-hero--region.page-intro-hero--split-photo .page-intro-hero__inner {
min-height: 560px;
}
}
.page-intro-hero--region .page-intro-hero__content {
pointer-events: auto;
}
.page-intro-hero--region.page-intro-hero--split-photo .page-intro-hero__content {
/*
* flex-none stops the base lg:flex-1 rule. The photo is position:absolute,
* so a flex-grow column would expand under it and the 560px min-height
* would clip the title and checks.
* Extra right padding on lg+ keeps long translations (ES) off the photo edge.
*/
width: 100%;
min-width: 0px;
align-items: flex-start;
gap: 0px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
text-align: left;
}
@media (min-width: 768px) {
.page-intro-hero--region.page-intro-hero--split-photo .page-intro-hero__content {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.page-intro-hero--region.page-intro-hero--split-photo .page-intro-hero__content {
width: 50%;
max-width: 50%;
flex: none;
flex-shrink: 0;
justify-content: center;
padding-left: 2.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
padding-right: 3.5rem;
}
}
@media (min-width: 1280px) {
.page-intro-hero--region.page-intro-hero--split-photo .page-intro-hero__content {
padding-left: 4rem;
padding-right: 4rem;
}
}
@media (min-width: 1536px) {
.page-intro-hero--region.page-intro-hero--split-photo .page-intro-hero__content {
padding-right: 5rem;
}
}
/*
* Infant and adult heroes reuse this photo bleed and keep space between
* the title, the intro, and the button. The region page uses its own margins.
*/
.page-intro-hero--region .page-intro-hero__content:has(.page-intro-hero__intro) {
gap: 1rem;
}
.page-intro-hero--region .page-intro-hero__subtitle {
/* Plain margin: @apply mt-4 would copy the mega-menu .mt-4 rule. */
margin-top: 1rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1.375;
color: var(--bss-sky);
}
@media (min-width: 640px) {
.page-intro-hero--region .page-intro-hero__subtitle {
font-size: 32px;
line-height: 1.3;
font-weight: 600;
}
}
/* Dark band still needs light type. The region rules above would otherwise win. */
.page-intro-hero--region.page-intro-hero--dark .page-intro-hero__subtitle,
.page-intro-hero--region.page-intro-hero--dark .page-intro-hero__checks li {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--region .page-intro-hero__media {
width: 100%;
max-width: none;
}
@media (min-width: 1024px) {
/*
* left: 50% meets the copy at the screen midpoint.
* The negative right pulls the photo out of the centered 1440 canvas
* to the real screen edge. At 1440 the offset is 0, so that size
* stays a flush 50/50 split.
*/
.page-intro-hero--region .page-intro-hero__media {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: calc((100% - 100vw) / 2);
z-index: 0;
width: auto;
max-width: none;
overflow: hidden;
}
.page-intro-hero--region .page-intro-hero__media .page-intro-hero__image {
height: 100%;
width: 100%;
max-width: none;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
}
/*
* Checks stay one column until xl. Column flow puts items 1–2 on the left
* and 3–4 on the right, matching the live region page.
*/
.page-intro-hero--region .page-intro-hero__checks--2col {
margin-top: 2rem;
display: grid;
width: 100%;
min-width: 0px;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-rows: none;
-moz-column-gap: 2rem;
column-gap: 2rem;
row-gap: 1rem;
grid-auto-flow: row;
}
@media (min-width: 1280px) {
.page-intro-hero--region .page-intro-hero__checks--2col {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-auto-flow: column;
}
}
.page-intro-hero--region .page-intro-hero__checks li {
min-width: 0px;
align-items: flex-start;
font-size: 16px;
line-height: 1.5;
font-weight: 500;
}
/* Base .page-intro-hero__checks li span uses nowrap — allow wrap on region heroes (WPML). */
.page-intro-hero--region .page-intro-hero__checks li span {
white-space: normal;
line-height: 1.375;
text-wrap: pretty;
}
.page-intro-hero--region .page-intro-hero__check-icon {
margin-top: 0px;
}
/* Quote card sits on the top-right of the photo. */
.page-intro-hero__media--quote {
position: relative;
}
.page-intro-hero__quote {
position: relative;
z-index: 10;
margin-left: 1.5rem;
margin-right: 1.5rem;
margin-top: -4.5rem;
border-radius: 16px;
background-color: rgb(255 255 255 / 0.95);
padding: 1.25rem;
text-align: left;
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--tw-backdrop-blur: blur(4px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
@media (min-width: 768px) {
.page-intro-hero__quote {
margin-left: 2.5rem;
margin-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.page-intro-hero__quote {
position: absolute;
bottom: 2.5rem;
left: 2rem;
right: 2rem;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding: 1.5rem;
}
.page-intro-hero--region .page-intro-hero__quote {
bottom: auto;
left: auto;
top: 2rem;
width: min(26rem, calc(100% - 4rem));
}
/* Keep the card on the 1440 frame while the photo bleeds to the viewport edge. */
.page-intro-hero--region .page-intro-hero__quote {
right: max(2rem, calc((100vw - 1440px) / 2 + 2rem));
}
}
/* Hairline above the Find A Pool button. */
.page-intro-hero__rule {
margin-top: 2rem;
margin-bottom: 1.5rem;
width: 100%;
border-width: 0px;
border-top-width: 1px;
border-color: var(--bss-border);
}
/* Feature photo cards — image + tint body. */
.feature-photo-card {
display: flex;
height: 100%;
flex-direction: column;
overflow: hidden;
border-radius: 16px;
background-color: var(--bss-section-tint);
}
.feature-photo-card__image {
aspect-ratio: 412/232;
width: 100%;
flex-shrink: 0;
-o-object-fit: cover;
object-fit: cover;
}
.feature-photo-card__body {
display: flex;
flex: 1 1 0%;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
align-self: stretch;
background-color: var(--bss-section-tint);
padding-left: 18px;
padding-right: 18px;
padding-bottom: 18px;
padding-top: 1rem;
}
.feature-photo-card__title {
font-size: 30px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-sky);
}
/*
* Swim Lessons for Every Age cards — match Discover Difference:
* 24px titles, 16px body (text-chrome). Overrides text-subhead-lg / text-copy.
*/
.bss-swim-lessons-age h3 {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--bss-sky) !important;
}
.bss-swim-lessons-age .feature-photo-card__body p,
.bss-swim-lessons-age article p {
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
color: var(--bss-body) !important;
}
@media (min-width: 1024px) {
.feature-6up__track--5up {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.feature-6up__track--5up > .feature-photo-card {
grid-column: span 2;
}
.feature-6up__track--5up > .feature-photo-card:nth-child(4) {
grid-column: 2 / span 2;
}
.feature-6up__track--5up > .feature-photo-card:nth-child(5) {
grid-column: 4 / span 2;
}
}
/*
* Feature 6-up / 5-up: one-card slider below lg (matches preview).
* Cards must be full track width so the shared [data-carousel] JS steps correctly.
*/
.feature-6up__track > .feature-photo-card {
width: 100%;
min-width: 0px;
flex-shrink: 0;
flex-grow: 0;
flex-basis: 100%;
}
@media (min-width: 1024px) {
.feature-6up__track > .feature-photo-card {
width: auto;
flex-basis: auto;
}
}
/* Dots on light surfaces (white sections). Preview dots are white-for-navy. */
.carousel-dots--light .carousel-dot {
background-color: rgb(19 46 171 / 0.3);
}
.blue-wave-section > .carousel-dots--light .carousel-dot.is-active {
margin-top: -2px;
}
footer > .carousel-dots--light .carousel-dot.is-active {
margin-top: -2px;
}
.carousel-dots--light .carousel-dot.is-active {
background-color: var(--bss-primary);
}
.feature-photo-grid--5up {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: 640px) {
.feature-photo-grid--5up {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.feature-photo-grid--5up {
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 18px;
}
}
.feature-photo-grid--5up > .feature-photo-card {
height: 100%;
border-radius: 24px;
}
.feature-photo-grid--5up .feature-photo-card__image {
aspect-ratio: 4/3;
}
.feature-photo-grid--5up .feature-photo-card__body {
align-items: center;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 1rem;
padding-top: 0.75rem;
text-align: center;
}
.feature-photo-grid--5up .feature-photo-card__title {
font-size: 18px;
font-weight: 700;
line-height: 1.375;
color: var(--bss-primary);
}
/* Local safety intro — photo left, navy copy right. */
.swim-lessons-near-local__inner {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1024px) {
.swim-lessons-near-local__inner {
grid-template-columns: 42fr 58fr;
align-items: stretch;
}
}
.swim-lessons-near-local__media {
position: relative;
width: 100%;
overflow: hidden;
}
.swim-lessons-near-local__image {
display: block;
width: 100%;
}
@media (min-width: 1024px) {
.swim-lessons-near-local__image {
height: 100%;
min-height: 520px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
}
.swim-lessons-near-local__content {
display: flex;
flex-direction: column;
gap: 1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
.swim-lessons-near-local__content {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.swim-lessons-near-local__content {
justify-content: center;
padding-top: 4rem;
padding-bottom: 4rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1280px) {
.swim-lessons-near-local__content {
padding-left: 3.5rem;
padding-right: 5rem;
}
}
.swim-lessons-near-local__content :is(h1, h2, h3) {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.swim-lessons-near-local__content :is(h1, h2, h3) {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.swim-lessons-near-local__title {
margin-bottom: 1rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.swim-lessons-near-local__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.swim-lessons-near-local__content :is(p, li) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: rgb(255 255 255 / 0.9);
}
.swim-lessons-near-local__content a {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
text-decoration-line: underline;
}
/* Approach copy. */
.swim-lessons-near-approach__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
text-align: center;
}
@media (min-width: 768px) {
.swim-lessons-near-approach__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.swim-lessons-near-approach__inner {
gap: 1.25rem;
padding: 80px;
}
}
.swim-lessons-near-approach__eyebrow {
font-size: 30px;
line-height: 1.3;
font-weight: 600;
color: var(--bss-sky);
}
.swim-lessons-near-approach__title {
max-width: 900px;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.swim-lessons-near-approach__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.swim-lessons-near-approach__body {
max-width: 760px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.swim-lessons-near-approach__body :is(p) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.mega-programs-grid > div > .swim-lessons-near-approach__body :is(p + p) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.swim-lessons-near-approach__body :is(p + p) {
margin-top: 1rem;
}
.swim-lessons-near-approach__tagline {
max-width: 760px;
font-size: 18px;
line-height: 1.5;
font-weight: 700;
color: var(--bss-primary);
}
/* Unlock the Benefits expanded layout (long template). */
.swim-lessons-near-safer__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.swim-lessons-near-safer__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.swim-lessons-near-safer__inner {
gap: 3rem;
padding: 80px;
}
}
.swim-lessons-near-safer__header {
width: 100%;
}
.swim-lessons-near-safer__title {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.swim-lessons-near-safer__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.mega-programs-grid > div > .swim-lessons-near-safer__intro {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.swim-lessons-near-safer__intro {
margin-top: 1rem;
text-align: left;
}
.swim-lessons-near-safer__intro :is(p, li) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.swim-lessons-near-safer__intro :is(h2, h3, h4) {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 22px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
/* Heading + next paragraph need their own gap. Tailwind preflight zeros
* h2–h4 and p margins, so “How Our Swim Lessons Work” sat on the body. */
.swim-lessons-near-safer__intro :is(p + p, :is(h2, h3, h4) + p, h2, h3, h4) {
margin-top: 0.75rem;
}
.swim-lessons-near-safer__benefit-row {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
align-items: center;
gap: 2.5rem;
}
@media (min-width: 1024px) {
.swim-lessons-near-safer__benefit-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4rem;
}
}
.swim-lessons-near-safer__benefit-copy :is(h2, h3, h4) {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 22px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.swim-lessons-near-safer__benefit-copy :is(p, li) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.swim-lessons-near-safer__benefit-copy :is(p + p, :is(h2, h3, h4) + p, h2, h3, h4) {
margin-top: 0.75rem;
}
.mega-programs-grid > div > .swim-lessons-near-safer__benefit-copy ul {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.swim-lessons-near-safer__benefit-copy ul {
margin-top: 1rem;
display: flex;
list-style-type: none;
flex-direction: column;
gap: 0.75rem;
}
.swim-lessons-near-safer__benefit-copy ul > li {
position: relative;
padding-left: 1.75rem;
}
.swim-lessons-near-safer__benefit-copy ul > li::before {
content: '';
position: absolute;
left: 0;
top: 0.375rem;
height: 18px;
width: 18px;
background-image: var(--bss-hero-check-icon, none);
background-repeat: no-repeat;
background-size: contain;
}
.swim-lessons-near-safer__image {
width: 100%;
border-radius: 24px;
-o-object-fit: cover;
object-fit: cover;
}
.swim-lessons-near-safer__footer {
width: 100%;
text-align: left;
}
.swim-lessons-near-safer__footer :is(h2, h3, h4) {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 22px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.swim-lessons-near-safer__footer :is(p, li) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.swim-lessons-near-safer__footer :is(p + p, :is(h2, h3, h4) + p, h2, h3, h4) {
margin-top: 0.75rem;
}
/* Communities served. */
.swim-lessons-near-communities__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.swim-lessons-near-communities__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.swim-lessons-near-communities__inner {
padding: 80px;
}
}
.swim-lessons-near-communities__title {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
/*
* Wrap into even rows once there are more than ~4 pills.
* The old centred flex + 12px gap let 7 pills fill the canvas
* and left a single leftover floating in the middle.
*/
.swim-lessons-near-communities__list {
margin-left: auto;
margin-right: auto;
display: grid;
width: 100%;
max-width: 64rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-items: stretch;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
row-gap: 1rem;
}
@media (min-width: 640px) {
.swim-lessons-near-communities__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.swim-lessons-near-communities__list {
grid-template-columns: repeat(4, minmax(0, 1fr));
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.25rem;
}
}
.swim-lessons-near-communities__list > li {
margin: 0px;
display: flex;
padding: 0px;
}
.swim-lessons-near-communities__pill {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 40px;
border-width: 1px;
border-color: var(--bss-primary);
background-color: transparent;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
text-align: center;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-primary);
}
a.swim-lessons-near-communities__pill {
text-decoration-line: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.blue-wave-section > a.swim-lessons-near-communities__pill:hover {
margin-top: -2px;
}
footer > a.swim-lessons-near-communities__pill:hover {
margin-top: -2px;
}
a.swim-lessons-near-communities__pill:hover {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Unlock the Benefits — reuse cancellation-policy layout. */
.loc-finder-section--corporate > .cancellation-policy__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .cancellation-policy__inner {
padding-bottom: 8rem;
}
}
.cancellation-policy__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1280px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.cancellation-policy__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.cancellation-policy__inner {
flex-direction: row;
align-items: flex-start;
gap: 3rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 5rem;
padding-bottom: 5rem;
}
}
.cancellation-policy__content {
display: flex;
width: 100%;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 1024px) {
.cancellation-policy__content {
flex: 1 1 0%;
}
}
.cancellation-policy__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.cancellation-policy__content :is(h2, h3) {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.cancellation-policy__content :is(h2, h3) {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.cancellation-policy__content :is(p, li) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.cancellation-policy__lead {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.cancellation-policy__media {
width: 100%;
}
@media (min-width: 1024px) {
.cancellation-policy__media {
width: 480px;
flex-shrink: 0;
}
}
.cancellation-policy__image {
aspect-ratio: 4/3;
width: 100%;
border-radius: 24px;
-o-object-fit: cover;
object-fit: cover;
}
/*
* Local SEO Unlock the Benefits — match the live page box:
* photo 575×667, copy 750px. Same HTML, CSS only.
*/
@media (min-width: 1024px) {
.cancellation-policy--unlock .cancellation-policy__inner {
max-width: 1365px;
gap: 2.5rem;
}
.cancellation-policy--unlock .cancellation-policy__media {
width: 575px;
}
}
.cancellation-policy--unlock .cancellation-policy__image {
aspect-ratio: 575/667;
}
@media (min-width: 1024px) {
.cancellation-policy--unlock .cancellation-policy__image {
height: 667px;
width: 575px;
max-width: none;
aspect-ratio: auto;
}
.cancellation-policy--unlock .cancellation-policy__content {
width: 750px;
max-width: 750px;
flex: none;
}
}
/* Loc search CTA typography (banner CSS shell already in loc-search-cta.css). */
.loc-search-cta__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.loc-search-cta__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.loc-search-cta__desc {
margin-top: 0.75rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/*
* Infant program cards — navy band, three white cards with a bullet list.
* icon-cards-grid stays centered and icon-only for Water Safety.
*/
.infant-programs__inner {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1440px;
flex-direction: column;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.infant-programs__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.infant-programs__inner {
padding: 80px;
}
}
.infant-programs__header {
display: flex;
flex-direction: column;
gap: 1rem;
text-align: center;
}
@media (min-width: 1024px) {
.infant-programs__header {
text-align: left;
}
}
.infant-programs__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.infant-programs__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.infant-programs__intro {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.infant-programs__grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 1024px) {
.infant-programs__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Adult lessons: five full-width cards instead of the three-column grid. */
@media (min-width: 1024px) {
.infant-programs--rows .infant-programs__grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
/* Light band: dark heading, and a border so white cards stay visible. */
.infant-programs--light .infant-programs__title {
color: var(--bss-primary);
}
.infant-programs--light .infant-programs__intro {
color: var(--bss-body);
}
.infant-programs--light .infant-programs__card {
border-width: 1px;
border-color: var(--bss-border);
}
.infant-programs__card {
display: flex;
flex-direction: column;
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
text-align: left;
}
.infant-programs__card-title {
border-bottom-width: 1px;
border-color: var(--bss-border);
padding-bottom: 1rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.mega-programs-grid > div > .infant-programs__body {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.infant-programs__body {
margin-top: 1rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.mega-programs-grid > div > .infant-programs__body :is(p + p, p + ul, ul + p) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.infant-programs__body :is(p + p, p + ul, ul + p) {
margin-top: 1rem;
}
.infant-programs__body ul {
list-style-type: disc;
}
.infant-programs__body ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.infant-programs__body ul {
padding-left: 1.25rem;
}
.infant-programs__body li strong {
font-weight: 700;
color: var(--bss-primary);
}
/*
* Find a Lesson page — pool photo as a fixed viewport layer (this template only).
* Do NOT put background-size:cover on body itself: as the page grows, cover
* scales the image to the full document height and it looks zoomed in.
* A fixed ::before is viewport-sized; footer wave valleys still show the photo.
* --bss-fal-bg is set in wp_head (bss_find_a_lesson_body_background_css).
*/
body.page-template-find-a-lesson,
body.page-template-find-a-lesson-php {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: var(--bss-primary, #132eab);
position: relative;
}
body.page-template-find-a-lesson::before,
body.page-template-find-a-lesson-php::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-color: var(--bss-primary, #132eab);
background-image: var(--bss-fal-bg, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/*
* Keep footer wave troughs clear so the fixed photo shows through.
* More specific than .section-wave--footer's --bss-footer-join-bg paint,
* which would otherwise sample the white wizard card.
*/
body.page-template-find-a-lesson .section-wave--footer,
body.page-template-find-a-lesson-php .section-wave--footer {
background-color: transparent;
}
/* Main stays transparent so the fixed photo shows through. */
.bss-find-a-lesson {
position: relative;
display: flex;
flex: 1 1 0%;
flex-direction: column;
background-color: transparent;
}
.find-a-lesson-wizard {
position: relative;
display: flex;
flex: 1 1 0%;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
min-height: 520px;
}
.find-a-lesson-wizard__card {
position: relative;
display: flex;
width: 100%;
max-width: 520px;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
border-radius: 24px;
background-color: rgb(255 255 255 / 0.9);
padding: 2rem;
}
.find-a-lesson-wizard__title {
width: 100%;
max-width: 100%;
overflow-wrap: break-word;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.15;
}
@media (min-width: 640px) {
.find-a-lesson-wizard__title {
font-size: 32px;
}
}
.find-a-lesson-wizard__body {
/*
* Height tween is JS-driven. Keep overflow visible by default so a
* stuck inline height cannot clip 3+ radio options / Next buttons.
* .is-animating adds overflow:hidden only for the short tween.
*/
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
overflow: visible;
transition: height 0.28s ease;
}
.find-a-lesson-wizard__body.is-animating {
overflow: hidden;
}
/* Result screen — matches preview .find-a-lesson-wizard__eyebrow / __result*. */
.find-a-lesson-wizard__eyebrow {
width: 100%;
text-align: center;
font-size: 20px;
line-height: 1.3;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--bss-sky);
}
.find-a-lesson-wizard__result {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
}
.find-a-lesson-wizard__result-icon {
/* Explicit size — SVG ![]()
ignores broken attrs like height:200px. */
display: block;
width: 6rem; /* 96px — matches preview h-24 */
height: 6rem;
max-width: 100%;
margin-left: auto;
margin-right: auto;
-o-object-fit: contain;
object-fit: contain;
}
.find-a-lesson-wizard__result-name {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 40px;
line-height: 1.2;
font-weight: 700;
color: var(--bss-primary);
}
.find-a-lesson-wizard__result-desc {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.find-a-lesson-wizard__result-cta {
margin-top: 0.5rem;
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-top: 0.875rem;
padding-bottom: 0.875rem;
text-align: center;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
text-decoration-line: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.find-a-lesson-wizard__result-cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.find-a-lesson-wizard__restart {
margin-top: 0.25rem;
cursor: pointer;
border-width: 0px;
background-color: transparent;
padding: 0px;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-primary);
text-underline-offset: 2px;
}
.find-a-lesson-wizard__restart:hover {
text-decoration-line: underline;
}
/*
* Legacy GF HTML markup (.result-box) — map onto the preview result look
* until every result page uses [bss_assessment_result].
*/
.find-a-lesson-wizard__form .result-box,
.find-a-lesson-wizard__form .result-card {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
}
.find-a-lesson-wizard__form .result-box h4 {
margin: 0px;
width: 100%;
text-align: center;
font-size: 20px;
line-height: 1.3;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--bss-sky);
}
.find-a-lesson-wizard__form .result-card h3 {
margin: 0px;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 40px;
line-height: 1.2;
font-weight: 700;
color: var(--bss-primary);
}
.find-a-lesson-wizard__form .result-box img,
.find-a-lesson-wizard__form .result-card img {
display: block;
width: 6rem;
height: 6rem;
max-width: 100%;
margin-left: auto;
margin-right: auto;
-o-object-fit: contain;
object-fit: contain;
}
.find-a-lesson-wizard__form .result-card a {
margin-top: 0.5rem;
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-top: 0.875rem;
padding-bottom: 0.875rem;
text-align: center;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
text-decoration-line: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.find-a-lesson-wizard__form .result-card a:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.find-a-lesson-wizard__form .result-card a p {
margin: 0px;
}
/*
* Hide GF Previous/Next only when JS marks the card as a result screen
* (.is-result). Do NOT use :has(.result-box) — multipage GF often keeps
* later-page HTML in the DOM (display:none), which would hide buttons on
* every step. Do NOT hide .gform_wrapper — [bss_assessment_result] lives inside it.
*/
.find-a-lesson-wizard__card.is-result .gform_footer,
.find-a-lesson-wizard__card.is-result .gform_page_footer {
display: none !important;
}
/* --- Gravity Forms quiz chrome inside the card --- */
.find-a-lesson-wizard__form .gform_wrapper,
.find-a-lesson-wizard__form .gform_wrapper form,
.find-a-lesson-wizard__form .gform_body,
.find-a-lesson-wizard__form .gform_page,
.find-a-lesson-wizard__form .gform_page .gform_fields,
.find-a-lesson-wizard__form .gfield,
.find-a-lesson-wizard__form .ginput_container {
width: 100%;
max-width: 100%;
}
.enroll-form__error.find-a-lesson-wizard__form .gform_heading,.enroll-form__error
.find-a-lesson-wizard__form .gform_required_legend {
display: none;
}
.find-a-lesson-wizard__form .gform_heading,
.find-a-lesson-wizard__form .gform_required_legend {
display: none;
}
/* Franchise ID, Pool ID, honeypot — hidden in GF but still in the DOM for submit. */
.find-a-lesson-wizard__form .gfield--type-honeypot,
.find-a-lesson-wizard__form .gform_validation_container,
.find-a-lesson-wizard__form .gfield_visibility_hidden,
.find-a-lesson-wizard__form .gfield--type-hidden,
.find-a-lesson-wizard__form .gfield--visibility-hidden,
.find-a-lesson-wizard__form .gf_invisible,
.find-a-lesson-wizard__form .admin-hidden-markup {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.find-a-lesson-wizard__form .gform_fields {
margin: 0px;
width: 100%;
flex-direction: column;
gap: 1rem;
border-width: 0px;
padding: 0px;
display: flex !important;
grid-template-columns: none !important;
}
.find-a-lesson-wizard__form .gfield_label {
margin-bottom: 1rem;
display: block;
font-size: 24px;
line-height: 1.3;
font-weight: 600;
color: var(--bss-primary);
}
.enroll-form__error.find-a-lesson-wizard__form .gfield_description,.enroll-form__error
.find-a-lesson-wizard__form .gfield_required {
display: none;
}
.find-a-lesson-wizard__form .gfield_description,
.find-a-lesson-wizard__form .gfield_required {
display: none;
}
/*
* Force a single column for answers.
* GF Choice Layout / Ready Classes (gf_list_2col, CSS columns, grid) can
* split radios into 2 cols — override all of those inside this card.
*/
.find-a-lesson-wizard__form .gfield_radio,
.find-a-lesson-wizard__form .gfield_checkbox,
.find-a-lesson-wizard__form .ginput_container_radio,
.find-a-lesson-wizard__form .ginput_container_checkbox,
.find-a-lesson-wizard__form .ginput_container_consent,
.find-a-lesson-wizard__form ul.gfield_radio,
.find-a-lesson-wizard__form ul.gfield_checkbox,
.find-a-lesson-wizard__form [class*='gf_list_'] {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 1rem !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
float: none !important;
-moz-columns: 1 !important;
columns: 1 !important;
-moz-column-count: 1 !important;
column-count: 1 !important;
grid-template-columns: minmax(0, 1fr) !important;
}
.find-a-lesson-wizard__form .gfield_radio .gchoice,
.find-a-lesson-wizard__form .gfield_checkbox .gchoice,
.find-a-lesson-wizard__form .gfield_radio li,
.find-a-lesson-wizard__form .gfield_checkbox li,
.find-a-lesson-wizard__form [class*='gf_list_'] .gchoice,
.find-a-lesson-wizard__form [class*='gf_list_'] li {
position: relative;
margin: 0px;
box-sizing: border-box;
cursor: pointer;
align-items: center;
gap: 0.75rem;
border-radius: 16px;
border-width: 2px;
border-color: var(--bss-border);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 1rem;
padding-bottom: 1rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
display: flex !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
clear: both !important;
grid-column: 1 / -1 !important;
}
.find-a-lesson-wizard__form .gfield_radio .gchoice:has(input:checked),
.find-a-lesson-wizard__form .gfield_checkbox .gchoice:has(input:checked),
.find-a-lesson-wizard__form .gfield_radio li:has(input:checked),
.find-a-lesson-wizard__form .gfield_checkbox li:has(input:checked) {
border-color: var(--bss-cta);
}
.find-a-lesson-wizard__form .gfield_radio input[type='radio'],
.find-a-lesson-wizard__form .gfield_checkbox input[type='checkbox'] {
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
position: absolute !important;
}
.find-a-lesson-wizard__form .gfield_radio .gchoice label,
.find-a-lesson-wizard__form .gfield_checkbox .gchoice label,
.find-a-lesson-wizard__form .gfield_radio li label,
.find-a-lesson-wizard__form .gfield_checkbox li label {
display: flex;
cursor: pointer;
align-items: center;
gap: 0.75rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-primary);
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* Custom radio — empty circle; filled CTA dot when selected. */
.find-a-lesson-wizard__form .gfield_radio .gchoice label::before,
.find-a-lesson-wizard__form .gfield_radio li label::before {
content: '';
position: relative;
display: block;
height: 1.25rem;
width: 1.25rem;
flex-shrink: 0;
border-radius: 9999px;
border-width: 2px;
border-color: var(--bss-border);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.find-a-lesson-wizard__form .gfield_radio .gchoice:has(input:checked) label::before,
.find-a-lesson-wizard__form .gfield_radio li:has(input:checked) label::before {
border-color: var(--bss-cta);
box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px #dc001f;
}
/* Next / Previous — match preview .find-a-lesson-wizard__next / __back */
.find-a-lesson-wizard__form .gform_footer,
.find-a-lesson-wizard__form .gform_page_footer {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0.75rem !important;
width: 100% !important;
max-width: 100% !important;
margin: 1rem 0 0 !important;
padding: 0 !important;
border: 0 !important;
float: none !important;
clear: both !important;
text-align: left !important;
}
.find-a-lesson-wizard__form .gform_page_footer::before,
.find-a-lesson-wizard__form .gform_page_footer::after,
.find-a-lesson-wizard__form .gform_footer::before,
.find-a-lesson-wizard__form .gform_footer::after {
content: none !important;
display: none !important;
}
.find-a-lesson-wizard__form .gform_previous_button,
.find-a-lesson-wizard__form .gform_page_footer .gform_previous_button,
.find-a-lesson-wizard__form .gform_footer .gform_previous_button {
order: 1;
flex: 0 0 auto !important;
float: none !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
cursor: pointer;
border-radius: 9999px !important;
border: 2px solid var(--bss-primary) !important;
background: transparent !important;
background-color: transparent !important;
padding: 0.75rem 1.5rem !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: var(--bss-primary) !important;
box-shadow: none !important;
text-shadow: none !important;
}
.find-a-lesson-wizard__form .gform_previous_button:hover,
.find-a-lesson-wizard__form .gform_previous_button:focus {
background: var(--bss-primary) !important;
background-color: var(--bss-primary) !important;
color: #fff !important;
}
.find-a-lesson-wizard__form .gform_next_button,
.find-a-lesson-wizard__form .gform_button,
.find-a-lesson-wizard__form .gform_page_footer .gform_next_button,
.find-a-lesson-wizard__form .gform_page_footer .gform_button,
.find-a-lesson-wizard__form .gform_footer .gform_next_button,
.find-a-lesson-wizard__form .gform_footer .gform_button,
.find-a-lesson-wizard__form input[type='submit'].gform_button,
.find-a-lesson-wizard__form button.gform_button,
.find-a-lesson-wizard__form .gform-theme-button--primary,
.find-a-lesson-wizard__form .gform-theme-button.gform_next_button,
.find-a-lesson-wizard__form .gform-theme-button.gform_button {
order: 2;
flex: 1 1 auto !important;
float: none !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
cursor: pointer;
border-radius: 9999px !important;
border: 0 !important;
background: var(--bss-primary) !important;
background-color: var(--bss-primary) !important;
padding: 0.875rem 1.5rem !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #fff !important;
box-shadow: none !important;
text-shadow: none !important;
}
.find-a-lesson-wizard__form .gform_next_button:hover,
.find-a-lesson-wizard__form .gform_button:hover,
.find-a-lesson-wizard__form .gform_next_button:focus,
.find-a-lesson-wizard__form .gform_button:focus {
filter: brightness(0.95);
}
/*
* Always show Next on quiz steps (GF hides it until a choice is made).
* JS disables the button until an answer is selected.
*/
.find-a-lesson-wizard__card:not(.is-result) .gform_page_footer .gform_next_button,
.find-a-lesson-wizard__card:not(.is-result) .gform_footer .gform_next_button,
.find-a-lesson-wizard__card:not(.is-result) .gform_page_footer .gform_button,
.find-a-lesson-wizard__card:not(.is-result) .gform_footer .gform_button,
.find-a-lesson-wizard__card:not(.is-result) .gform_page_footer input[type='submit'].gform_button,
.find-a-lesson-wizard__card:not(.is-result) .gform_footer input[type='submit'].gform_button {
display: block !important;
visibility: visible !important;
opacity: 1;
}
.find-a-lesson-wizard__card:not(.is-result) .gform_page_footer .gform_next_button:disabled,
.find-a-lesson-wizard__card:not(.is-result) .gform_footer .gform_next_button:disabled,
.find-a-lesson-wizard__card:not(.is-result) .gform_page_footer .gform_button:disabled,
.find-a-lesson-wizard__card:not(.is-result) .gform_footer .gform_button:disabled,
.find-a-lesson-wizard__card:not(.is-result) .gform_page_footer input[type='submit'].gform_button:disabled,
.find-a-lesson-wizard__card:not(.is-result) .gform_footer input[type='submit'].gform_button:disabled {
opacity: 0.45 !important;
cursor: not-allowed !important;
filter: none !important;
pointer-events: none;
}
/* Wait cursor + slim top bar — feedback only, never covers nav buttons. */
.find-a-lesson-wizard__card.is-waiting,
.find-a-lesson-wizard__card.is-waiting * {
cursor: wait !important;
}
.enroll-form__error.find-a-lesson-wizard__spinner {
display: none;
}
.find-a-lesson-wizard__spinner {
pointer-events: none;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
z-index: 10;
display: none;
height: 0.25rem;
overflow: hidden;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
background: rgba(19, 46, 171, 0.12);
}
.find-a-lesson-wizard__card.is-waiting .find-a-lesson-wizard__spinner {
display: block;
}
.find-a-lesson-wizard__spinner-bar {
display: block;
height: 100%;
width: 35%;
border-radius: 9999px;
background: var(--bss-primary, #132eab);
animation: bss-fal-indeterminate 0.85s ease-in-out infinite;
}
@keyframes bss-fal-indeterminate {
0% {
transform: translateX(-120%);
}
100% {
transform: translateX(320%);
}
}
/*
* Hide Gravity Forms' built-in ajax spinner (legacy img + 2.9 gform-loader).
* Adult / longer paths make that default spin ring very noticeable next to
* Next — we use the top progress bar instead on every step.
*/
.find-a-lesson-wizard__form .gform_ajax_spinner,
.find-a-lesson-wizard__form img.gform_ajax_spinner,
.find-a-lesson-wizard__form .gform-loader,
.find-a-lesson-wizard__form .gform_wrapper .gform-loader {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
/* Confirmation / result message area (pre-JS rewrite fallback). */
.find-a-lesson-wizard__form .gform_confirmation_message {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.find-a-lesson-wizard__form .gform_confirmation_message a {
margin-top: 0.5rem;
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-top: 0.875rem;
padding-bottom: 0.875rem;
text-align: center;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
text-decoration-line: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.find-a-lesson-wizard__form .gform_confirmation_message a:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blog-grid__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.blog-grid__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.blog-grid__inner {
gap: 64px;
padding: 80px;
}
}
.blog-related__heading {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.blog-related__heading {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.blog-grid__cards {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 640px) {
.blog-grid__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.blog-grid__cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.blog-card {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
border-radius: 12px;
background-color: var(--bss-section-tint);
}
.blog-card__media {
display: block;
width: 100%;
overflow: hidden;
}
.blog-card__image {
aspect-ratio: 411/272;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.blog-card__body {
display: flex;
width: 100%;
flex: 1 1 0%;
flex-direction: column;
gap: 1rem;
align-self: stretch;
padding: 1.25rem;
}
.blog-card__title {
width: 100%;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.375;
color: var(--bss-primary);
}
.blog-card__title-link {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.blog-card__title-link:hover {
color: var(--bss-sky);
}
.blog-card__footer {
margin-top: auto;
display: grid;
width: 100%;
grid-template-columns: minmax(0,1fr) auto;
align-items: center;
-moz-column-gap: 1rem;
column-gap: 1rem;
}
.blog-card__date {
min-width: 0px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.blog-card__read-more {
flex-shrink: 0;
justify-self: end;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--bss-cta);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.blog-card__read-more:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blog-pagination {
display: flex;
width: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
@media (min-width: 640px) {
.blog-pagination {
gap: 1rem;
}
}
.blog-pagination__pages {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.blog-pagination__btn,
.blog-pagination__page {
display: inline-flex;
min-height: 40px;
min-width: 40px;
align-items: center;
justify-content: center;
border-radius: 40px;
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 18px;
line-height: 1.5;
font-weight: 600;
color: var(--bss-primary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.blog-pagination__btn--nav {
border-width: 1px;
border-color: var(--bss-border);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1rem;
padding-right: 1rem;
}
.blog-pagination__btn--nav:hover {
border-color: var(--bss-primary);
}
.blog-pagination__btn:disabled,
.blog-pagination__page:disabled,
.blog-pagination__btn[aria-disabled="true"] {
pointer-events: none;
cursor: not-allowed;
opacity: 0.45;
}
.blog-pagination__btn:disabled:hover,
.blog-pagination__page:disabled:hover,
.blog-pagination__btn[aria-disabled="true"]:hover {
border-color: var(--bss-border);
}
.blog-pagination__page {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
color: var(--bss-primary);
}
.blog-pagination__page:hover {
background-color: var(--bss-light-bg);
}
.blue-wave-section > .blog-pagination__page.is-active {
margin-top: -2px;
}
footer > .blog-pagination__page.is-active {
margin-top: -2px;
}
.blog-pagination__page.is-active {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.blue-wave-section > .blog-pagination__page.is-active:hover {
margin-top: -2px;
}
footer > .blog-pagination__page.is-active:hover {
margin-top: -2px;
}
.blog-pagination__page.is-active:hover {
background-color: var(--bss-primary);
}
.blog-detail__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.blog-detail__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.blog-detail__inner {
padding: 80px;
}
}
.blog-detail__article {
display: flex;
width: 100%;
max-width: 760px;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.blog-detail__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.blog-detail__title {
font-size: 40px;
}
}
@media (min-width: 1024px) {
.blog-detail__title {
font-size: 56px;
font-weight: 700;
line-height: 1.1;
}
}
.blog-detail__date {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.blog-detail__share {
margin-bottom: 0.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.blog-detail__share-label {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
color: var(--bss-primary);
}
.blog-detail__share-list {
margin: 0px;
display: flex;
list-style-type: none;
align-items: center;
gap: 0.75rem;
padding: 0px;
}
.blog-detail__share-link {
display: inline-flex;
color: var(--bss-primary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.blog-detail__share-link:hover {
opacity: 0.8;
}
.blog-detail__share-icon {
display: block;
height: 1rem;
width: 1rem;
}
.blog-detail__hero {
width: 100%;
border-radius: 16px;
-o-object-fit: cover;
object-fit: cover;
}
.blog-detail__content {
display: flex;
width: 100%;
flex-direction: column;
gap: 1rem;
}
.blog-detail__content h2 {
padding-top: 0.5rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.blog-detail__content p {
font-size: 18px;
font-weight: 500;
line-height: 1.625;
color: var(--bss-body);
}
.blog-detail__content a {
font-weight: 700;
color: var(--bss-sky);
text-decoration-line: underline;
text-underline-offset: 2px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.blog-detail__content a:hover {
color: var(--bss-primary);
}
.blog-detail__content img {
height: auto;
width: 100%;
border-radius: 16px;
}
.blog-detail__content ul,
.blog-detail__content ol {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-left: 1.5rem;
font-size: 18px;
font-weight: 500;
line-height: 1.625;
color: var(--bss-body);
}
.blog-detail__content ul {
list-style-type: disc;
}
.blog-detail__content ol {
list-style-type: decimal;
}
.blog-detail__content li {
padding-left: 0.25rem;
}
.thank-you {
background-color: var(--bss-section-tint);
}
/* Full-frame band: 1440 canvas + 80px desktop padding. */
.thank-you__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.thank-you__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.thank-you__inner {
padding: 80px;
}
}
/* Page title — 32px on mobile, 40px h2 on sm+. Live used 48px Cooper. */
.thank-you__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.thank-you__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
/* Bold lead under the title. Live is 16px/700 navy; we use subhead 20px. */
.mega-programs-grid > div > .thank-you__lead {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.thank-you__lead {
margin-top: 1rem;
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.thank-you__body {
margin-top: 1.5rem;
max-width: 52rem;
}
.thank-you__body > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.thank-you__body {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.thank-you__body :is(p, ul, ol) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.thank-you__body strong,
.thank-you__body b {
font-weight: 700;
color: var(--bss-primary);
}
/* [phone] and any other links in the body. CTA red so they read as links. */
.thank-you__body a,
.thank-you__phone,
.bss-phone {
font-weight: 500;
color: var(--bss-cta);
text-underline-offset: 2px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.thank-you__body a:hover,
.thank-you__phone:hover,
.bss-phone:hover {
text-decoration-line: underline;
}
/* Live button is centered in the content row. */
.thank-you__actions {
margin-top: 2.5rem;
display: flex;
justify-content: center;
}
/* Full-width pill on mobile (live justify), auto width from sm up. */
.thank-you__cta {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.thank-you__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@media (min-width: 640px) {
.thank-you__cta {
width: auto;
}
}
.download-app-hero {
background-color: var(--bss-section-tint);
}
.download-app-hero--white {
background-color: #fff;
}
/* Full-frame band: 1440 canvas + 80px desktop padding. */
.download-app-hero__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.download-app-hero__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.download-app-hero__inner {
flex-direction: row;
align-items: center;
gap: 100px;
padding: 80px;
}
}
@media (min-width: 1280px) {
.download-app-hero__inner {
gap: 1.5rem;
}
}
.download-app-hero__content {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
@media (min-width: 1024px) {
.download-app-hero__content {
flex: 1 1 0%;
}
}
.download-app-hero__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.download-app-hero__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.mega-programs-grid > div > .download-app-hero__lead {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.download-app-hero__lead {
margin-top: 1rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.download-app-hero__checks {
margin-top: 1.5rem;
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.download-app-hero__checks li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.download-app-hero__check-icon {
margin-top: 0.125rem;
height: 18px;
width: 18px;
flex-shrink: 0;
}
.download-app-hero__stores {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.download-app-hero__store img {
height: 2.5rem;
width: auto;
}
@media (min-width: 640px) {
.download-app-hero__store img {
height: 3rem;
}
}
.download-app-hero__media {
display: flex;
width: 100%;
justify-content: center;
}
@media (min-width: 1024px) {
.download-app-hero__media {
width: 36%;
flex-shrink: 0;
}
}
@media (min-width: 1280px) {
.download-app-hero__media {
width: auto;
max-width: 48%;
}
}
/*
* Keep the full frame (object-contain). Widths follow the bitmap, not the handset.
* The first mockup filled a 503×1024 file, so 300px was the phone. The current
* upload is 1545×1999 with the device at ~756×1528 inside a transparent margin
* (~49% of the width): a 300px box draws a ~147px phone.
* Up to 1279px the image fills the existing 36% column. From 1280px the canvas
* is 540px (~264px of phone) and the row gap drops to 24px — the file's own
* left margin already separates the device from the copy.
*/
.download-app-hero__image {
height: auto;
width: 100%;
max-width: 340px;
-o-object-fit: contain;
object-fit: contain;
}
@media (min-width: 640px) {
.download-app-hero__image {
max-width: 420px;
}
}
@media (min-width: 1024px) {
.download-app-hero__image {
width: 100%;
max-width: none;
}
}
@media (min-width: 1280px) {
.download-app-hero__image {
width: 540px;
max-width: 100%;
}
}
/*
* Nearby towns — 2-col horizontal cards.
* Soft rounded corners (card radius, not full pill); thumbnail left.
*/
.swim-lessons-near__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.swim-lessons-near__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.swim-lessons-near__inner {
gap: 3rem;
padding: 80px;
}
}
.swim-lessons-near__title {
width: 100%;
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.swim-lessons-near__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.swim-lessons-near__grid {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: 640px) {
.swim-lessons-near__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.swim-lessons-near__grid {
gap: 1.25rem;
}
}
.swim-lessons-near__card {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
border-radius: 24px;
background-color: var(--bss-section-tint);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.swim-lessons-near__card:hover {
--tw-bg-opacity: 1;
background-color: rgb(227 242 250 / var(--tw-bg-opacity, 1));
}
.swim-lessons-near__card-image {
height: 88px;
width: 100px;
flex-shrink: 0;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 640px) {
.swim-lessons-near__card-image {
height: 92px;
width: 108px;
}
}
.swim-lessons-near__card-body {
display: flex;
min-width: 0px;
flex: 1 1 0%;
align-items: center;
gap: 0.625rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
@media (min-width: 640px) {
.swim-lessons-near__card-body {
gap: 0.75rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
.swim-lessons-near__card-icon {
height: 20px;
width: 16px;
flex-shrink: 0;
}
.swim-lessons-near__card-title {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.swim-lessons-near__card-title {
font-size: 20px;
}
}
@media (min-width: 1024px) {
.swim-lessons-near__card-title {
font-size: 22px;
}
}
.lifeguard-cert__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.lifeguard-cert__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.lifeguard-cert__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 6rem;
padding-bottom: 5rem;
}
}
/* Tighter gap when two cert blocks stack — matches preview. */
.lifeguard-cert:has(+ .lifeguard-cert) .lifeguard-cert__inner {
padding-bottom: 3rem;
}
@media (min-width: 1024px) {
.lifeguard-cert:has(+ .lifeguard-cert) .lifeguard-cert__inner {
padding-bottom: 3rem;
}
}
.lifeguard-cert + .lifeguard-cert .lifeguard-cert__inner {
padding-top: 3rem;
}
@media (min-width: 1024px) {
.lifeguard-cert + .lifeguard-cert .lifeguard-cert__inner {
padding-top: 3rem;
}
}
.lifeguard-cert__header {
display: flex;
width: 100%;
max-width: 960px;
flex-direction: column;
align-items: center;
gap: 1.5rem;
text-align: center;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .lifeguard-cert__header {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .lifeguard-cert__header {
padding-bottom: 8rem;
}
}
.lifeguard-cert__header {
max-width: 1280px;
}
}
.lifeguard-cert__content {
display: flex;
width: 100%;
max-width: 960px;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .lifeguard-cert__content {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .lifeguard-cert__content {
padding-bottom: 8rem;
}
}
.lifeguard-cert__content {
max-width: 1280px;
}
}
.lifeguard-cert__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.lifeguard-cert__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
/*
* Certification details from WYSIWYG — paragraphs, quotes, and check lists.
* List bullets match preview .lifeguard-check-list / shared hero intro checks.
*/
.lifeguard-cert__details {
width: 100%;
text-align: left;
font-size: 18px;
font-weight: 500;
line-height: 1.625;
color: var(--bss-body);
}
.mega-programs-grid > div > .lifeguard-cert__details :is(p + p) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.lifeguard-cert__details :is(p + p) {
margin-top: 1rem;
}
.lifeguard-cert__details :is(blockquote) {
margin: 0px;
border-width: 0px;
padding: 0px;
text-align: left;
font-size: 18px;
font-weight: 500;
font-style: normal;
line-height: 1.625;
color: var(--bss-body);
}
.mega-programs-grid > div > .lifeguard-cert__details :is(ul, ol) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.lifeguard-cert__details :is(ul, ol) {
margin-top: 1rem;
display: flex;
width: 100%;
list-style-type: none;
flex-direction: column;
gap: 0.75rem;
padding: 0px;
}
.lifeguard-cert__details :is(ul > li, ol > li) {
position: relative;
padding-left: 1.75rem;
text-align: left;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.lifeguard-cert__details :is(ul > li)::before {
content: '';
position: absolute;
left: 0;
top: 0.125rem;
height: 18px;
width: 18px;
background-image: var(--bss-hero-check-icon);
background-repeat: no-repeat;
background-size: contain;
}
.lifeguard-cert__details :is(ul > li strong, ol > li strong) {
font-weight: 700;
color: var(--bss-primary);
}
.lifeguard-cert__details :is(ul ul, ol ol, ul ol, ol ul) {
margin-top: 0.75rem;
gap: 0.75rem;
padding-left: 26px;
}
.lifeguard-cert__fee {
text-align: left;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.lifeguard-cert__accordions {
display: flex;
width: 100%;
flex-direction: column;
gap: 1rem;
}
.lifeguard-cert__accordions .lifeguard-acc {
background-color: transparent;
}
.lifeguard-cert__accordions .lifeguard-acc__summary {
display: flex;
cursor: pointer;
list-style-type: none;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-radius: 16px;
background-color: var(--bss-light-bg);
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
@media (min-width: 768px) {
.lifeguard-cert__accordions .lifeguard-acc__summary {
padding-left: 2rem;
padding-right: 2rem;
}
}
.lifeguard-cert__accordions .lifeguard-acc__summary::-webkit-details-marker {
display: none;
}
.lifeguard-cert__accordions .lifeguard-acc[open] .lifeguard-acc__summary {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.lifeguard-cert__accordions .lifeguard-acc__panel {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 1.25rem;
padding-top: 1rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
@media (min-width: 768px) {
.lifeguard-cert__accordions .lifeguard-acc__panel {
padding-left: 2rem;
padding-right: 2rem;
}
}
/* Disc bullets for prerequisite WYSIWYG lists (and nested lists). */
.lifeguard-cert__accordions .lifeguard-acc__panel :is(ul, ol) {
margin-top: 0.5rem;
list-style-type: disc;
}
.lifeguard-cert__accordions .lifeguard-acc__panel :is(ul, ol) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.lifeguard-cert__accordions .lifeguard-acc__panel :is(ul, ol) {
padding-left: 1.25rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.lifeguard-cert__accordions .lifeguard-acc__panel :is(ul, ol) *::marker {
color: var(--bss-body);
}
.lifeguard-cert__accordions .lifeguard-acc__panel :is(ul, ol)::marker {
color: var(--bss-body);
}
.lifeguard-cert__accordions .lifeguard-acc__panel :is(ul ul, ol ol, ul ol, ol ul) {
margin-top: 0.5rem;
}
.lifeguard-cert__accordions .lifeguard-acc__panel :is(ul ul, ol ol, ul ol, ol ul) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.lifeguard-cert__accordions .lifeguard-acc__panel :is(ul ul, ol ol, ul ol, ol ul) {
padding-left: 1.25rem;
}
.lifeguard-cert__accordions .lifeguard-acc__panel :is(p + p) {
margin-top: 0.75rem;
}
.lifeguard-cert__cta {
display: inline-flex;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
align-items: center;
justify-content: center;
align-self: flex-start;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 1.375;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.lifeguard-cert__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
/* +/- accordion icon for lifeguard prerequisite rows. */
.faq-icon {
position: relative;
display: block;
height: 1rem;
width: 1rem;
flex-shrink: 0;
color: var(--bss-primary);
}
.faq-icon::before,
.faq-icon::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
background-color: currentColor;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
.faq-icon::before {
height: 0.125rem;
width: 1rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.faq-icon::after {
height: 1rem;
width: 0.125rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.faq[open] .faq-icon::after {
--tw-scale-y: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.faq summary {
list-style: none;
}
.faq summary::-webkit-details-marker {
display: none;
}
/*
* Vertical 180deg stops — orange→yellow, yellow→red, blue→lime.
* Used on the Millbrae Meadows summer program cards (preview class names).
*/
.bg-summer-mm-starfish-minnow {
background-image: linear-gradient(180deg, var(--bss-summer-mm-orange) 0%, var(--bss-summer-mm-yellow) 100%);
}
.bg-summer-mm-minnow-turtle {
background-image: linear-gradient(180deg, var(--bss-summer-mm-yellow) 0%, var(--bss-summer-mm-red) 100%);
}
.bg-summer-mm-turtle-sharks {
background-image: linear-gradient(180deg, var(--bss-summer-mm-blue) 0%, var(--bss-summer-mm-lime) 100%);
}
/*
* Summer Sessions · location enroll band — stacked CTA buttons (one per pool).
*/
.loc-finder-section--corporate > .summer-enroll__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .summer-enroll__inner {
padding-bottom: 8rem;
}
}
.summer-enroll__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1280px;
flex-direction: column;
align-items: center;
gap: 2rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.summer-enroll__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.summer-enroll__inner {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
.summer-enroll__title {
max-width: 960px;
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.summer-enroll__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.summer-enroll__actions {
display: flex;
width: 100%;
max-width: 720px;
flex-direction: column;
gap: 1rem;
}
.summer-enroll__btn {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 1.375;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.summer-enroll__btn:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.summer-enroll__btn-icon {
height: 18px;
width: auto;
flex-shrink: 0;
}
/*
* Summer Sessions · session dates table.
* Cards: primary border; header bar + zebra-striped date rows.
*/
.summer-session-dates__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 80px;
padding-bottom: 80px;
}
@media (min-width: 768px) {
.summer-session-dates__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.summer-session-dates__inner {
gap: 2rem;
padding-left: 80px;
padding-right: 80px;
}
}
.summer-session-dates__title {
width: 100%;
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.summer-session-dates__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.summer-session-dates__intro {
max-width: 720px;
text-align: center;
font-size: 18px;
font-weight: 500;
line-height: 1.375;
color: var(--bss-primary);
}
.summer-session-dates__grid {
display: flex;
width: 100%;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 1024px) {
.summer-session-dates__grid {
flex-direction: row;
align-items: stretch;
gap: 2rem;
}
}
.summer-session-dates__card {
display: flex;
min-height: 270px;
width: 100%;
max-width: 400px;
flex-direction: column;
border-radius: 16px;
border-width: 2px;
border-color: var(--bss-primary);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.blue-wave-section > .summer-session-dates__card-header {
margin-top: -2px;
}
footer > .summer-session-dates__card-header {
margin-top: -2px;
}
.summer-session-dates__card-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: flex-start;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
background-color: var(--bss-primary);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: left;
font-size: 18px;
font-weight: 700;
line-height: 1.375;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.summer-session-dates__list {
display: flex;
flex: 1 1 0%;
list-style-type: none;
flex-direction: column;
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
padding-bottom: 0.75rem;
}
.summer-session-dates__row {
display: flex;
flex-shrink: 0;
align-items: center;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 18px;
font-weight: 500;
line-height: 1.5;
color: var(--bss-primary);
}
.summer-session-dates__row:nth-child(odd) {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.summer-session-dates__row:nth-child(even) {
background-color: var(--bss-light-bg);
}
/* Optional dual CTAs under dark hero copy (pool Summer Sessions, referral). */
.page-intro-hero__actions {
margin-top: 0.5rem;
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 640px) {
.page-intro-hero__actions {
flex-direction: row;
flex-wrap: wrap;
}
}
.page-intro-hero--dark .page-intro-hero__btn--outline {
border-width: 2px;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--dark .page-intro-hero__btn--outline:hover {
background-color: rgb(255 255 255 / 0.1);
}
.page-intro-hero--dark .page-intro-hero__btn--light {
gap: 0.5rem;
border-width: 2px;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
color: var(--bss-primary);
}
.page-intro-hero--dark .page-intro-hero__btn--light:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
/*
* White / light blue bands (Page intro hero — checks block): the dark-band
* variants are white-on-white here, so use navy outlines instead.
*/
:is(.page-intro-hero--white, .page-intro-hero--light) .page-intro-hero__btn--outline {
border-width: 2px;
border-color: var(--bss-primary);
background-color: transparent;
color: var(--bss-primary);
}
:is(.page-intro-hero--white, .page-intro-hero--light) .page-intro-hero__btn--outline:hover {
background-color: var(--bss-light-bg);
}
:is(.page-intro-hero--white, .page-intro-hero--light) .page-intro-hero__btn--light {
gap: 0.5rem;
border-width: 2px;
border-color: var(--bss-primary);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
color: var(--bss-primary);
}
:is(.page-intro-hero--white, .page-intro-hero--light) .page-intro-hero__btn--light:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.page-intro-hero__btn-icon {
height: 1rem;
width: 1rem;
flex-shrink: 0;
}
.page-intro-hero__note {
font-size: 18px;
line-height: 1.5;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-intro-hero--dark .page-intro-hero__address {
font-style: italic;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Plain CTA button for page-questions-cta (non-phone). */
.page-questions-cta__btn {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.page-questions-cta__btn:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.page-questions-cta--dark .page-questions-cta__btn {
background-color: var(--bss-cta);
}
.page-questions-cta__body-html {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.page-questions-cta--dark .page-questions-cta__body-html {
color: rgb(255 255 255 / 0.9);
}
.rate-table {
display: flex;
width: 100%;
flex-direction: column;
gap: 1rem;
}
.rate-table__heading {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
/* Text under the heading; typography comes from the Text Section. */
.rate-table__desc {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/* The flex gap already spaces the text from the heading. */
.rate-table__desc > :first-child {
margin-top: 0px;
}
/* Same frame as .summer-session-dates__card; overflow keeps the rounded corners on the table. */
.rate-table__card {
width: 100%;
overflow: hidden;
border-radius: 16px;
border-width: 2px;
border-color: var(--bss-primary);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.rate-table__table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
}
.blue-wave-section > .rate-table__table th {
margin-top: -2px;
}
footer > .rate-table__table th {
margin-top: -2px;
}
.rate-table__table th {
background-color: var(--bss-primary);
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: center;
font-weight: 700;
line-height: 1.375;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
.rate-table__table th {
padding-left: 2rem;
padding-right: 2rem;
}
}
.rate-table__table td {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: center;
line-height: 1.5;
color: var(--bss-primary);
}
@media (min-width: 768px) {
.rate-table__table td {
padding-left: 2rem;
padding-right: 2rem;
}
}
/* Column divider: white line between columns. */
.rate-table__table :is(th, td) + :is(th, td) {
border-left-width: 2px;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.rate-table__table tbody tr:nth-child(odd) {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.rate-table__table tbody tr:nth-child(even) {
background-color: var(--bss-light-bg);
}
/* Divider stays visible on white rows. */
.rate-table__table tbody tr:nth-child(odd) td + td {
border-color: var(--bss-light-bg);
}
/*
* 3–4 columns: smaller text and tighter cells on mobile so the table fits a
* phone width; widths follow the content so words are not split mid-word.
*/
.rate-table__table--cols-3,
.rate-table__table--cols-4 {
table-layout: auto;
font-size: 14px;
}
@media (min-width: 768px) {
.rate-table__table--cols-3,
.rate-table__table--cols-4 {
table-layout: fixed;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
}
}
.rate-table__table--cols-3 :is(th, td),
.rate-table__table--cols-4 :is(th, td) {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
@media (min-width: 768px) {
.rate-table__table--cols-3 :is(th, td),
.rate-table__table--cols-4 :is(th, td) {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.bss-text-section__inner {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1440px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.bss-text-section__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.bss-text-section__inner {
padding-left: 80px;
padding-right: 80px;
padding-top: 80px;
padding-bottom: 80px;
}
}
.bss-text-section__content {
width: 100%;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/*
* Headings — H1 page title (plain pages: Privacy Policy, Terms), H2 section
* titles, H3 card/sub titles, H4 bold lead-ins.
*/
.bss-text-section__content h1 {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.bss-text-section__content h1 {
font-size: 40px;
}
}
@media (min-width: 1024px) {
.bss-text-section__content h1 {
font-size: 56px;
font-weight: 700;
line-height: 1.1;
}
}
.bss-text-section__content h2 {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.bss-text-section__content h2 {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.bss-text-section__content h3 {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.bss-text-section__content h4 {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 18px;
line-height: 1.5;
font-weight: 700;
color: var(--bss-primary);
}
.bss-text-section__content p {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.bss-text-section__content ul {
list-style-type: disc;
}
.bss-text-section__content ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.bss-text-section__content ul {
padding-left: 1.5rem;
}
.bss-text-section__content ol {
list-style-type: decimal;
}
.bss-text-section__content ol > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.bss-text-section__content ol {
padding-left: 1.5rem;
}
.bss-text-section__content li > :is(ul, ol) {
margin-top: 0.5rem;
}
.bss-text-section__content :is(strong, b) {
font-weight: 700;
color: var(--bss-primary);
}
.bss-text-section__content a {
font-weight: 700;
color: var(--bss-cta);
text-underline-offset: 2px;
}
.bss-text-section__content a:hover {
text-decoration-line: underline;
}
/* Vertical rhythm: headings open a new group, text follows closely. */
.mega-programs-grid > div > .bss-text-section__content :is(p, ul, ol) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.bss-text-section__content :is(p, ul, ol) {
margin-top: 1rem;
}
.bss-text-section__content :is(h1, h2, h3, h4) {
margin-top: 2.5rem;
}
.bss-text-section__content :is(h1, h2, h3, h4) + :is(p, ul, ol) {
margin-top: 0.75rem;
}
.bss-text-section__content h1 + :is(p, ul, ol) {
margin-top: 1.5rem;
}
.bss-text-section__content .rate-table {
margin-top: 2rem;
}
/*
* Separator (core/separator) — full-width 1px divider line. Element +
* :not() keep it above core's `.wp-block-separator:not(.is-style-wide)`
* 100px default width. Dots style keeps core's rendering.
*/
.bss-text-section__content hr.wp-block-separator:not(.is-style-dots),
.bss-text-section__content hr:not(.wp-block-separator) {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
width: 100%;
max-width: none;
border-width: 0px;
border-top-width: 1px;
border-style: solid;
border-color: var(--bss-border);
background-color: transparent;
opacity: 1;
}
.bss-text-section__content hr.wp-block-separator.is-style-dots {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
color: var(--bss-primary);
}
/*
* Buttons (core/buttons) — red pill as in the templates (.page-intro-hero__btn).
* Overrides core's dark default; the Outline style is the navy outline pill.
* Padding is 2px less than the template button to make room for the border.
*/
.bss-text-section__content .wp-block-buttons {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.bss-text-section__content .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 40px;
border-width: 2px;
border-color: var(--bss-cta);
background-color: var(--bss-cta);
padding-left: 22px;
padding-right: 22px;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
text-align: center;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
text-decoration-line: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.bss-text-section__content .wp-block-button__link:hover {
text-decoration-line: none;
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.bss-text-section__content .is-style-outline .wp-block-button__link {
border-color: var(--bss-primary);
background-color: transparent;
color: var(--bss-primary);
}
.blue-wave-section > .bss-text-section__content .is-style-outline .wp-block-button__link:hover {
margin-top: -2px;
}
footer > .bss-text-section__content .is-style-outline .wp-block-button__link:hover {
margin-top: -2px;
}
.bss-text-section__content .is-style-outline .wp-block-button__link:hover {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
--tw-brightness: brightness(1);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.bss-text-section__content :is(h1, h2, h3, h4, p, ul, ol, .rate-table, .wp-block-buttons):first-child {
margin-top: 0px;
}
.bss-text-section__content :is(hr.wp-block-separator, hr):first-child {
margin-top: 0px;
}
.bss-text-section__content :is(hr.wp-block-separator, hr):last-child {
margin-bottom: 0px;
}
/*
* Private Lessons · register by location (theme).
* Unifies the East Bay “Register by Location” cards: 3-up venue tiles
* with two enrollment CTAs (Private / Semi-Private). No Figma — mapped
* from the live eastbay-north page. Pool name, city, and both URLs are
* dynamic per franchise in WP (repeater).
*/
.private-lessons-locations__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.private-lessons-locations__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.private-lessons-locations__inner {
padding: 80px;
}
}
.private-lessons-locations__title {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.private-lessons-locations__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.private-lessons-locations__intro {
margin-left: auto;
margin-right: auto;
max-width: 760px;
text-align: center;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/* 3-up at desktop; 2-up at sm; stack on mobile. 24px card gap. */
.private-lessons-locations__grid {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 640px) {
.private-lessons-locations__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.private-lessons-locations__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.private-lessons-locations__card {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
gap: 0.75rem;
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
text-align: center;
}
.private-lessons-locations__name {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.private-lessons-locations__city {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/* Two equal pills — stack on narrow cards, sit in a row from sm up. */
.mega-programs-grid > div > .private-lessons-locations__actions {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.private-lessons-locations__actions {
margin-top: 1rem;
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 640px) {
.private-lessons-locations__actions {
flex-direction: row;
}
}
.private-lessons-locations__btn {
display: inline-flex;
flex: 1 1 0%;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.private-lessons-locations__btn:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.private-lessons-locations__btn--outline {
border-width: 2px;
border-color: var(--bss-primary);
background-color: transparent;
color: var(--bss-primary);
}
.blue-wave-section > .private-lessons-locations__btn--outline:hover {
margin-top: -2px;
}
footer > .private-lessons-locations__btn--outline:hover {
margin-top: -2px;
}
.private-lessons-locations__btn--outline:hover {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Theme addition — white band option: cards switch to the tint so they stay visible. */
.private-lessons-locations--white .private-lessons-locations__card {
background-color: var(--bss-section-tint);
}
/*
* Shared red pill CTA — content-width phone button on specialty pages.
*/
.bss-cta-pill {
display: inline-flex;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
flex-shrink: 0;
align-items: center;
justify-content: center;
gap: 0.5rem;
white-space: nowrap;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.bss-cta-pill:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.bss-cta-pill__icon {
height: 1.25rem;
width: 1.25rem;
flex-shrink: 0;
fill: currentColor;
}
/*
* Program structure — centred header + 3-col icon cards.
*/
.barracuda-structure__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.barracuda-structure__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.barracuda-structure__inner {
gap: 3rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 6rem;
padding-bottom: 5rem;
}
}
.loc-finder-section--corporate > .barracuda-structure__header {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .barracuda-structure__header {
padding-bottom: 8rem;
}
}
.barracuda-structure__header {
display: flex;
max-width: 1280px;
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}
.barracuda-structure__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.barracuda-structure__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.barracuda-structure__lead {
max-width: 960px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.barracuda-structure__grid {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 1024px) {
.barracuda-structure__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Two local cards fill the row. One card stays a centred column. */
@media (min-width: 1024px) {
.barracuda-structure__grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.barracuda-structure__grid--one {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 36rem;
}
@media (min-width: 1024px) {
.barracuda-structure__grid--one {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
/* Four cards in one row. Two columns until there is room for all four. */
@media (min-width: 640px) {
.barracuda-structure__grid--four {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.barracuda-structure__grid--four {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.barracuda-structure__cta {
display: flex;
width: 100%;
justify-content: center;
padding-top: 0.5rem;
}
/*
* Optional local pricing copy under the corporate structure cards.
* Absent when the location leaves the pricing field empty.
*/
.barracuda-structure__pricing {
width: 100%;
max-width: 1280px;
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
text-align: left;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.barracuda-structure__pricing :is(h2, h3, h4) {
margin-bottom: 0.75rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.barracuda-structure__pricing :is(h2, h3, h4) + :is(h2, h3, h4) {
margin-top: 1.5rem;
}
.barracuda-structure__pricing :is(ul, ol) {
margin-top: 0.5rem;
list-style-type: disc;
}
.barracuda-structure__pricing :is(ul, ol) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.barracuda-structure__pricing :is(ul, ol) {
padding-left: 1.25rem;
}
.barracuda-structure__pricing p {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/*
* Optional pricing cards under Program Structure.
* Same tint as the structure band so the two read as one block.
* Top padding stays small because the structure section already
* ends with its own bottom padding.
*/
.barracuda-pricing-cards__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 4rem;
padding-top: 0.5rem;
}
@media (min-width: 768px) {
.barracuda-pricing-cards__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.barracuda-pricing-cards__inner {
gap: 2.5rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-bottom: 5rem;
}
}
.barracuda-pricing-cards__title {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.barracuda-pricing-cards__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.barracuda-pricing-cards__panels {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
align-items: stretch;
gap: 1.5rem;
}
@media (min-width: 1024px) {
.barracuda-pricing-cards__panels {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.barracuda-pricing-cards__panels--single {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.barracuda-pricing-cards__panel {
overflow: hidden;
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.barracuda-pricing-cards__bar {
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.375;
}
@media (min-width: 1024px) {
.barracuda-pricing-cards__bar {
font-size: 20px;
}
}
.barracuda-pricing-cards__bar {
background-color: var(--bss-primary);
color: #fff;
}
.barracuda-pricing-cards__details {
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
text-align: center;
color: var(--bss-primary);
}
.barracuda-pricing-cards__details :is(p, li) {
margin: 0px;
font-size: 18px;
font-weight: 500;
line-height: 1.375;
color: var(--bss-primary);
}
.barracuda-pricing-cards__details p + p {
margin-top: 0.35rem;
}
.barracuda-pricing-cards__details :is(h2, h3, h4) {
margin: 0px;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1;
color: var(--bss-primary);
}
.barracuda-pricing-cards__details :is(h2, h3, h4) + p {
margin-top: 0.75rem;
}
/* Two prices side by side, authored as HTML inside Pricing details. */
.barracuda-pricing-cards__cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
gap: 1.5rem;
text-align: center;
}
/*
* Optional hero location picker. Replaces the single phone pill
* only when the location filled at least one enroll row.
* A light white card. Location pills stay small and wrap.
* Enroll Now is a smaller red pill so it does not overpower them.
*/
/*
* Long location names must not set the hero column's minimum width.
* Otherwise the photo column is squeezed (Arlington). Short names
* still hug the card (East Bay).
*/
.page-intro-hero__content:has(.barracuda-hero-enroll) {
min-width: 0;
}
.barracuda-hero-enroll {
margin-top: 1.5rem;
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
text-align: center;
width: -moz-fit-content;
width: fit-content;
max-width: 90%;
min-width: 0;
margin-left: 0;
margin-right: auto;
padding: 1.5rem;
}
.barracuda-hero-enroll__prompt {
font-size: 14px;
font-weight: 700;
line-height: 1.375;
color: var(--bss-primary);
margin-bottom: 1.25rem;
}
.barracuda-hero-enroll__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
max-width: 100%;
min-width: 0;
}
.barracuda-hero-enroll__item {
display: contents;
}
.barracuda-hero-enroll__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.barracuda-hero-enroll__tab {
order: 1;
display: inline-flex;
width: auto;
max-width: 100%;
flex: 0 1 auto;
align-items: center;
justify-content: center;
gap: 0.35rem;
border-radius: 40px;
border: 0;
background-color: var(--bss-section-tint);
padding: 0.35rem 0.75rem;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
color: var(--bss-primary);
cursor: pointer;
}
.barracuda-hero-enroll__pin {
width: 12px;
height: 15px;
flex-shrink: 0;
}
/* Selected pill text is white. Keep the pin red until that pill is chosen. */
.barracuda-hero-enroll__item:has(.barracuda-hero-enroll__input:checked) .barracuda-hero-enroll__pin {
filter: brightness(0) invert(1);
}
.barracuda-hero-enroll__tab:hover {
background-color: #e3f1f8;
}
.barracuda-hero-enroll__input:focus-visible + .barracuda-hero-enroll__tab {
outline: 2px solid var(--bss-primary);
outline-offset: 2px;
}
.barracuda-hero-enroll__item:has(.barracuda-hero-enroll__input:checked) .barracuda-hero-enroll__tab,
.barracuda-hero-enroll__item:has(.barracuda-hero-enroll__input:checked) .barracuda-hero-enroll__tab:hover {
background-color: var(--bss-primary);
color: #fff;
}
.barracuda-hero-enroll__panel {
display: none;
order: 2;
flex: 1 0 100%;
width: 100%;
justify-content: center;
margin-top: 0;
}
.barracuda-hero-enroll__cta {
padding: 0.4rem 1.35rem;
font-size: 14px;
line-height: 1.3;
}
.barracuda-hero-enroll__item:has(.barracuda-hero-enroll__input:checked) .barracuda-hero-enroll__panel {
display: flex;
}
/*
* Pricing — optional local section on a tinted band.
* Intro (title + body) is full width and centered.
* Cards stack in the left column; the map sits beside them.
* Title + body with no cards and no map is the text-only variant.
*/
.specialty-pricing {
background-color: var(--bss-section-tint);
}
.loc-finder-section--corporate > .specialty-pricing__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .specialty-pricing__inner {
padding-bottom: 8rem;
}
}
.specialty-pricing__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1280px;
flex-direction: column;
align-items: center;
gap: 2rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
text-align: center;
}
@media (min-width: 768px) {
.specialty-pricing__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.specialty-pricing__inner {
gap: 2.5rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
}
.specialty-pricing__intro {
display: flex;
width: 100%;
max-width: 960px;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.specialty-pricing__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.specialty-pricing__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.specialty-pricing__body {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-primary);
}
.specialty-pricing__body > p + p {
margin-top: 1rem;
}
.specialty-pricing__row {
display: flex;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 2rem;
}
@media (min-width: 1024px) {
.specialty-pricing__row {
flex-direction: row;
}
}
.specialty-pricing__cards {
display: flex;
width: 100%;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1024px) {
.specialty-pricing__cards {
flex: 1 1 0%;
}
}
.specialty-pricing__card {
overflow: hidden;
border-radius: 16px;
text-align: center;
}
.specialty-pricing__card-title {
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 0.75rem;
padding-top: 2rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
/* Raw color, not @apply bg-primary — that class is also a wave/footer hook. */
background-color: var(--bss-primary);
color: #fff;
}
.specialty-pricing__card-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
background-color: #fff;
}
.specialty-pricing__price {
margin: 0px;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1;
color: var(--bss-primary);
}
.specialty-pricing__frequency {
margin: 0px;
font-size: 20px;
font-weight: 500;
line-height: 1.375;
color: var(--bss-primary);
}
.specialty-pricing__note {
margin: 0px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-primary);
}
.specialty-pricing__map {
width: 100%;
overflow: hidden;
border-radius: 16px;
}
@media (min-width: 1024px) {
.specialty-pricing__map {
flex: 1 1 0%;
}
}
.specialty-pricing__map iframe {
height: 100%;
min-height: 280px;
width: 100%;
border-width: 0px;
}
/*
* Fit section modifiers — photo left, vertically centred copy at lg.
*/
@media (min-width: 1024px) {
.cancellation-policy--media-left .cancellation-policy__inner {
flex-direction: row;
}
.cancellation-policy--media-left .cancellation-policy__media {
order: -9999;
}
.cancellation-policy--v-center .cancellation-policy__inner {
align-items: center;
}
}
/* WYSIWYG checklist inside fit section — check inline so wrapped lines
* continue under the icon (no hanging indent). */
.mega-programs-grid > div > .cancellation-policy__content :is(ul, ol) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.cancellation-policy__content :is(ul, ol) {
margin-top: 1rem;
list-style-type: none;
}
.cancellation-policy__content :is(ul, ol) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.cancellation-policy__content :is(ul, ol) {
padding: 0px;
}
.cancellation-policy__content :is(ul > li, ol > li) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
padding-left: 0;
}
.cancellation-policy__content :is(ul > li)::before {
content: '';
display: inline-block;
vertical-align: top;
margin-right: 0.5rem;
margin-top: 0.125rem;
height: 18px;
width: 18px;
background-image: var(--bss-hero-check-icon);
background-repeat: no-repeat;
background-size: contain;
}
/*
* Have Questions / Ready to Enroll CTA band.
*/
.loc-finder-section--corporate > .page-questions-cta__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .page-questions-cta__inner {
padding-bottom: 8rem;
}
}
.page-questions-cta__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1280px;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
}
@media (min-width: 768px) {
.page-questions-cta__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.page-questions-cta__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2.5rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
}
.page-questions-cta__content {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 1024px) {
.page-questions-cta__content {
max-width: 720px;
flex: 1 1 0%;
}
}
.page-questions-cta__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.page-questions-cta__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.page-questions-cta__body {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.blue-wave-section > .page-questions-cta--dark {
margin-top: -2px;
}
footer > .page-questions-cta--dark {
margin-top: -2px;
}
.page-questions-cta--dark {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-questions-cta--dark .page-questions-cta__title {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.page-questions-cta--dark .page-questions-cta__body {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/*
* Barracuda · Session Locations & Times — optional local accordion.
* max-w-container matches Ready to Enroll horizontal alignment.
*/
.loc-finder-section--corporate > .barracuda-session-locations__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .barracuda-session-locations__inner {
padding-bottom: 8rem;
}
}
.barracuda-session-locations__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1280px;
flex-direction: column;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 80px;
padding-bottom: 80px;
}
@media (min-width: 768px) {
.barracuda-session-locations__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.barracuda-session-locations__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
.barracuda-session-locations__acc {
width: 100%;
}
.barracuda-session-locations__acc > summary {
display: flex;
cursor: pointer;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-radius: 16px;
border-width: 2px;
border-color: var(--bss-primary);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
color: var(--bss-primary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
list-style: none;
}
.barracuda-session-locations__acc > summary::-webkit-details-marker {
display: none;
}
.blue-wave-section > .barracuda-session-locations__acc > summary:hover,.blue-wave-section >
.barracuda-session-locations__acc[open] > summary {
margin-top: -2px;
}
footer > .barracuda-session-locations__acc > summary:hover,footer >
.barracuda-session-locations__acc[open] > summary {
margin-top: -2px;
}
.barracuda-session-locations__acc > summary:hover,
.barracuda-session-locations__acc[open] > summary {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.barracuda-session-locations__acc > summary:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: var(--bss-primary);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: var(--bss-section-tint);
}
/* Same +/- disc as .enroll-acc: vertical bar hides while the panel is open. */
.barracuda-session-locations__acc[open] .enroll-toggle::after {
--tw-scale-y: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.barracuda-session-locations__summary-title {
flex: 1 1 0%;
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: inherit;
}
.barracuda-session-locations__panel {
padding-top: 2rem;
}
.barracuda-session-locations__grid {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 640px) {
.barracuda-session-locations__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.barracuda-session-locations__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
}
.barracuda-session-locations__card {
display: flex;
width: 100%;
flex-direction: column;
border-radius: 16px;
border-width: 2px;
border-color: var(--bss-primary);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.barracuda-session-locations__card-body {
display: flex;
flex-direction: column;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.barracuda-session-locations__name {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.375;
color: var(--bss-primary);
}
.barracuda-session-locations__address {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0px;
font-size: 18px;
font-weight: 500;
font-style: normal;
line-height: 1.5;
color: var(--bss-body);
}
.mega-programs-grid > div > .barracuda-session-locations__schedule {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.barracuda-session-locations__schedule {
margin-top: 1rem;
}
.barracuda-session-locations__schedule > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.barracuda-session-locations__schedule {
font-size: 18px;
font-weight: 500;
line-height: 1.5;
color: var(--bss-primary);
}
.barracuda-session-locations__body {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/*
* Simple Barracuda template — mission hero, split copy, enroll buttons.
* Used only when the franchise program has local simple-template fields.
*/
.barracuda-simple-band__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
text-align: center;
}
@media (min-width: 768px) {
.barracuda-simple-band__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.barracuda-simple-band__inner {
flex-direction: row;
align-items: center;
gap: 100px;
padding: 80px;
text-align: left;
}
}
.barracuda-simple-band__content {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 1rem;
}
@media (min-width: 1024px) {
.barracuda-simple-band__content {
flex: 1 1 0%;
align-items: flex-start;
}
}
.barracuda-simple-band__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.barracuda-simple-band__title {
font-size: 40px;
}
}
@media (min-width: 1024px) {
.barracuda-simple-band__title {
font-size: 56px;
font-weight: 700;
line-height: 1.1;
}
}
.barracuda-simple-band__heading {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.barracuda-simple-band__heading {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.barracuda-simple-band__mission {
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-sky);
}
.barracuda-simple-band__body {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.barracuda-simple-band__body p {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.barracuda-simple-band__mascot {
height: auto;
width: 240px;
}
@media (min-width: 640px) {
.barracuda-simple-band__mascot {
width: 300px;
}
}
@media (min-width: 1024px) {
.barracuda-simple-band__mascot {
width: 377px;
}
}
.barracuda-simple-band__media {
width: 100%;
}
@media (min-width: 1024px) {
.barracuda-simple-band__media {
width: 520px;
flex-shrink: 0;
}
}
.barracuda-simple-band__image {
aspect-ratio: 3/2;
width: 100%;
border-radius: 24px;
-o-object-fit: cover;
object-fit: cover;
}
.barracuda-simple-band__actions {
display: flex;
width: 100%;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 640px) {
.barracuda-simple-band__actions {
width: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
}
@media (min-width: 1024px) {
.barracuda-simple-band__actions {
justify-content: flex-start;
}
}
.barracuda-simple-pricing__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
text-align: center;
}
@media (min-width: 768px) {
.barracuda-simple-pricing__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.barracuda-simple-pricing__inner {
gap: 2.5rem;
padding: 80px;
}
}
.barracuda-simple-pricing__intro {
display: flex;
max-width: 900px;
flex-direction: column;
gap: 1rem;
}
.barracuda-simple-pricing__card {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 432px;
text-align: center;
}
/* Brand blue band. Shared --dark paints the title and body white. */
.adult-custom-hero.page-intro-hero--dark .page-intro-hero__intro :is(a, strong, b) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.adult-custom-hero.page-intro-hero--dark .page-intro-hero__intro a {
text-decoration-line: underline;
text-underline-offset: 2px;
}
/*
* Desktop: the photo cannot grow past the copy column.
* height: 0 + flex-grow fills that column and ignores the file's own ratio.
*/
@media (min-width: 1024px) {
.adult-custom-hero .page-intro-hero__inner {
align-items: stretch;
}
.adult-custom-hero .page-intro-hero__media {
display: flex;
flex-direction: column;
min-height: 0;
align-self: stretch;
}
.adult-custom-hero .page-intro-hero__image {
height: 0;
min-height: 0;
flex: 1 1 auto;
width: 100%;
aspect-ratio: auto;
-o-object-fit: cover;
object-fit: cover;
}
}
.adult-custom-overview__inner {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.adult-custom-overview__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.adult-custom-overview__inner {
gap: 4rem;
padding: 80px;
}
}
.adult-custom-overview__header {
display: flex;
width: 100%;
max-width: 960px;
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}
.adult-custom-overview__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.adult-custom-overview__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.adult-custom-overview__lead {
width: 100%;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.adult-custom-overview__lead :is(p) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.adult-custom-overview__lead :is(p + p) {
margin-top: 0.75rem;
}
/*
* Icon cards share the left half. The wide card fills the right half.
* Without a wide card, icon cards use the full row.
*/
.adult-custom-overview__cards {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 1024px) {
.adult-custom-overview__cards--split {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
}
.adult-custom-overview__icons {
display: grid;
min-width: 0px;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 1024px) {
.adult-custom-overview__icons {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.adult-custom-overview__wides {
display: flex;
min-width: 0px;
flex-direction: column;
gap: 1.5rem;
}
.adult-custom-overview__card {
min-width: 0px;
border-radius: 16px;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
background-color: #fff;
}
.adult-custom-overview__card--icon {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.adult-custom-overview__card--wide {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
text-align: left;
}
.adult-custom-overview__card--wide .adult-custom-overview__card-title {
width: 100%;
text-align: center;
}
.adult-custom-overview__icon {
margin-left: auto;
margin-right: auto;
height: 3rem;
width: auto;
}
.adult-custom-overview__card-title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.adult-custom-overview__icon + .adult-custom-overview__card-title {
margin-top: 1.25rem;
}
.adult-custom-overview__card-body,
.adult-custom-overview__details {
width: 100%;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.adult-custom-overview__card-title + .adult-custom-overview__card-body,
.adult-custom-overview__card-title + .adult-custom-overview__details,
.adult-custom-overview__icon + .adult-custom-overview__card-body {
/* Plain margin: @apply mt-4 would copy the mega-menu .mt-4 rule. */
margin-top: 1rem;
}
.adult-custom-overview__card-body :is(p),
.adult-custom-overview__details :is(p) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.adult-custom-overview__card-body :is(p + p),
.adult-custom-overview__details :is(p + p) {
margin-top: 0.75rem;
}
.adult-custom-overview__details :is(ul, ol) {
margin-top: 0.75rem;
list-style-type: disc;
}
.adult-custom-overview__details :is(ul, ol) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.adult-custom-overview__details :is(ul, ol) {
padding-left: 1.25rem;
text-align: left;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.adult-custom-overview__details :is(h3, h4) {
margin-bottom: 0.5rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
margin-top: 1rem;
}
/* Bold copy inside the wide card. The card heading stays navy. */
.adult-custom-overview__details :is(strong, b),
.adult-custom-overview__details :is(strong, b) a,
.adult-custom-overview__details a :is(strong, b) {
font-weight: 700;
color: var(--bss-cta);
}
.adult-custom-works {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
align-items: center;
gap: 2.5rem;
text-align: center;
}
@media (min-width: 1024px) {
.adult-custom-works {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4rem;
text-align: left;
}
}
.adult-custom-works__content {
display: flex;
min-width: 0px;
flex-direction: column;
align-items: center;
gap: 1rem;
}
@media (min-width: 1024px) {
.adult-custom-works__content {
align-items: flex-start;
}
}
.adult-custom-works__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.adult-custom-works__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.adult-custom-works__price {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.25;
color: var(--bss-sky);
}
@media (min-width: 1024px) {
.adult-custom-works__price {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.adult-custom-works__details {
width: 100%;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.adult-custom-works__details :is(p) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.adult-custom-works__details :is(p + p) {
margin-top: 0.75rem;
}
.adult-custom-works__details :is(ul, ol) {
list-style-type: disc;
}
.adult-custom-works__details :is(ul, ol) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.adult-custom-works__details :is(ul, ol) {
padding-left: 1.25rem;
text-align: left;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
margin-top: 1rem;
}
.adult-custom-works__media {
width: 100%;
min-width: 0px;
}
.adult-custom-works__image {
aspect-ratio: 4/3;
width: 100%;
border-radius: 24px;
-o-object-fit: cover;
object-fit: cover;
}
.adult-custom-schedule {
scroll-margin-top: 10rem;
}
.adult-custom-schedule__inner {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1440px;
}
@media (min-width: 1024px) {
.adult-custom-schedule__inner--split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
}
.adult-custom-schedule__media {
position: relative;
width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
}
@media (min-width: 768px) {
.adult-custom-schedule__media {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
.adult-custom-schedule__image {
aspect-ratio: 4/3;
width: 100%;
border-radius: 24px;
-o-object-fit: cover;
object-fit: cover;
}
/*
* Desktop: the row height is the copy plus the enroll card.
* The photo fills that height (its own ratio cannot stop it) and
* column-gap keeps it clear of the text. Vertical padding matches
* the copy so the frame lines up with the heading and the card.
*/
@media (min-width: 1024px) {
.adult-custom-schedule__inner--split {
-moz-column-gap: 4rem;
column-gap: 4rem;
}
.adult-custom-schedule__media {
display: flex;
flex-direction: column;
align-self: stretch;
min-height: 0;
padding: 4rem 0 4rem 2.5rem;
}
.adult-custom-schedule__image {
height: 0;
min-height: 0;
flex: 1 1 auto;
width: 100%;
aspect-ratio: auto;
}
.adult-custom-schedule__body {
padding-left: 0;
padding-right: 2.5rem;
}
}
@media (min-width: 1280px) {
.adult-custom-schedule__inner--split {
-moz-column-gap: 6.25rem;
column-gap: 6.25rem;
}
.adult-custom-schedule__media {
padding-left: 5rem;
}
.adult-custom-schedule__body {
padding-right: 5rem;
}
}
.adult-custom-schedule__content :is(strong, b),
.adult-custom-schedule__content :is(strong, b) a,
.adult-custom-schedule__content a :is(strong, b) {
font-weight: 700;
color: var(--bss-cta);
}
.adult-custom-schedule__body {
display: flex;
min-width: 0px;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
text-align: left;
}
@media (min-width: 768px) {
.adult-custom-schedule__body {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.adult-custom-schedule__body {
justify-content: center;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
}
@media (min-width: 1280px) {
.adult-custom-schedule__body {
padding-left: 5rem;
padding-right: 5rem;
}
}
.adult-custom-schedule__copy {
display: flex;
width: 100%;
flex-direction: column;
gap: 1rem;
}
.adult-custom-schedule__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.adult-custom-schedule__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.adult-custom-schedule__content,
.adult-custom-schedule__card-content {
width: 100%;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.adult-custom-schedule__content :is(p) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.adult-custom-schedule__content :is(p + p),
.adult-custom-schedule__card-content :is(p + p) {
margin-top: 0.75rem;
}
/*
* Location pin from --bss-location-pin-icon (assets.php).
* Direct children only, so a nested list does not double the marker.
*/
.adult-custom-schedule__content ul,
.adult-custom-schedule__card-content ul {
margin: 0px;
display: flex;
list-style-type: none;
flex-direction: column;
gap: 0.75rem;
padding: 0px;
margin-top: 1rem;
}
.adult-custom-schedule__content ul > li,
.adult-custom-schedule__card-content ul > li {
position: relative;
padding-left: 1.75rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.adult-custom-schedule__content ul > li::before,
.adult-custom-schedule__card-content ul > li::before {
content: '';
position: absolute;
left: 0;
top: 0.15rem;
width: 16px;
height: 20px;
background: var(--bss-location-pin-icon) no-repeat center / contain;
}
.adult-custom-schedule__card {
/* Plain background: @apply bg-primary copies the wave and footer overlap rules. */
width: 100%;
border-radius: 16px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
text-align: center;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
.adult-custom-schedule__card {
padding-left: 2rem;
padding-right: 2rem;
}
}
.adult-custom-schedule__card {
background-color: var(--bss-primary);
}
.adult-custom-schedule__card-title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.375;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.adult-custom-schedule__card-title {
font-size: 24px;
line-height: 1.3;
font-weight: 600;
}
}
.adult-custom-schedule__card-content {
text-align: center;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
margin-top: 1rem;
}
.adult-custom-schedule__card-content :is(p) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.adult-custom-schedule__card-content ul {
align-items: center;
}
.adult-custom-schedule__card-content ul > li {
width: -moz-fit-content;
width: fit-content;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.adult-custom-schedule__actions {
margin-top: 1.5rem;
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
@media (min-width: 640px) {
.adult-custom-schedule__actions {
flex-direction: row;
flex-wrap: wrap;
}
}
.adult-custom-schedule__btn--outline {
display: inline-flex;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
flex-shrink: 0;
align-items: center;
justify-content: center;
white-space: nowrap;
border-radius: 40px;
border-width: 2px;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
background-color: transparent;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.adult-custom-schedule__btn--outline:hover {
background-color: rgb(255 255 255 / 0.1);
}
/*
* Hero — lead subtitle, centred copy on mobile, plain schedule lines.
*/
.female-only-hero .page-intro-hero__subtitle {
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.female-only-hero .page-intro-hero__intro {
text-align: center;
}
@media (min-width: 1024px) {
.female-only-hero .page-intro-hero__intro {
text-align: left;
}
}
.mega-programs-grid > div > .female-only-hero .page-intro-hero__intro :is(p + p) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.female-only-hero .page-intro-hero__intro :is(p + p) {
margin-top: 1rem;
}
.mega-programs-grid > div > .female-only-hero .page-intro-hero__intro :is(ul, ol) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.female-only-hero .page-intro-hero__intro :is(ul, ol) {
margin-top: 1rem;
gap: 0.25rem;
}
.female-only-hero .page-intro-hero__intro :is(ul > li, ol > li) {
padding-left: 0px;
}
.female-only-hero .page-intro-hero__intro :is(ul > li)::before {
content: none;
}
.female-only-hero .page-intro-hero__intro :is(ul > li strong, ol > li strong) {
color: var(--bss-cta);
}
/*
* Icon cards on the navy wave band (What to Expect).
*/
.loc-finder-section--corporate > .water-safety-tips--navy .water-safety-tips__title {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .water-safety-tips--navy .water-safety-tips__title {
padding-bottom: 8rem;
}
}
.water-safety-tips--navy .water-safety-tips__title {
margin-left: auto;
margin-right: auto;
max-width: 1280px;
font-size: 24px;
line-height: 1.25;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.water-safety-tips--navy .water-safety-tips__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.water-safety-tips--navy .water-safety-tips__intro {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.water-safety-tips--navy .icon-feature-cards__inner {
padding-top: 2.5rem;
}
@media (min-width: 1024px) {
.water-safety-tips--navy .icon-feature-cards__inner {
padding-top: 3rem;
}
}
/*
* Offer Card (week7).
* Outer frame: 1440 canvas, 80px padding, column, centred (letterboxes at 1920+).
* Blue card: 1280 content, 32px padding, 32px gap, 24px radius, #132EAB.
* Row layout only at xl+ — needs 642px copy + 32px gap + 542px image inside 1280.
*/
.promotions-offer-card {
overflow-x: hidden;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.promotions-offer-card__inner {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1440px;
flex-direction: column;
align-items: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 0px;
}
@media (min-width: 768px) {
.promotions-offer-card__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 4rem;
}
}
@media (min-width: 1024px) {
.promotions-offer-card__inner {
padding-left: 80px;
padding-right: 80px;
padding-top: 80px;
padding-bottom: 0px;
}
}
.blue-wave-section > .promotions-offer-card__card {
margin-top: -2px;
}
footer > .promotions-offer-card__card {
margin-top: -2px;
}
.loc-finder-section--corporate > .promotions-offer-card__card {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .promotions-offer-card__card {
padding-bottom: 8rem;
}
}
.promotions-offer-card__card {
display: flex;
width: 100%;
max-width: 1280px;
flex-direction: column;
align-items: stretch;
gap: 2rem;
border-radius: 24px;
background-color: var(--bss-primary);
padding: 1.25rem;
}
@media (min-width: 640px) {
.promotions-offer-card__card {
padding: 1.5rem;
}
}
@media (min-width: 1280px) {
.promotions-offer-card__card {
flex-direction: row;
align-items: center;
padding: 2rem;
}
}
/* Promo copy column — below image on mobile; left column at xl+. */
.promotions-offer-card__content {
order: 2;
display: flex;
width: 100%;
min-width: 0px;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
@media (min-width: 1280px) {
.promotions-offer-card__content {
order: 1;
max-width: 642px;
flex: 1 1 0%;
}
}
/* Editorial titles vary in length, so no xl nowrap as in the static demo. */
.promotions-offer-card__headline {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
.promotions-offer-card__headline {
font-size: 24px;
}
}
/* WYSIWYG details — paragraphs, bold sub-headings ("How It Works:"), bullet steps. */
.promotions-offer-card__body {
width: 100%;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.promotions-offer-card__body > * + * {
margin-top: 1.25rem;
}
.promotions-offer-card__body > p + :is(ul, ol) {
margin-top: 0.5rem;
}
.promotions-offer-card__body :is(strong, b) {
font-weight: 600;
}
.promotions-offer-card__body ul {
list-style-type: disc;
}
.promotions-offer-card__body ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.promotions-offer-card__body ul {
padding-left: 1.25rem;
}
.promotions-offer-card__body ol {
list-style-type: decimal;
}
.promotions-offer-card__body ol > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.promotions-offer-card__body ol {
padding-left: 1.25rem;
}
.promotions-offer-card__body a {
text-decoration-line: underline;
text-underline-offset: 2px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.promotions-offer-card__body a:hover {
text-decoration-line: none;
}
.promotions-offer-card__cta {
display: inline-flex;
max-width: 100%;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
text-align: center;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.promotions-offer-card__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@media (min-width: 640px) {
.promotions-offer-card__cta {
white-space: nowrap;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 14px;
}
}
/* Image first on mobile; right column at xl+. */
.promotions-offer-card__media {
order: 1;
width: 100%;
flex-shrink: 0;
}
@media (min-width: 1280px) {
.promotions-offer-card__media {
order: 2;
width: 542px;
}
}
.promotions-offer-card__media img {
aspect-ratio: 542/277;
width: 100%;
border-radius: 24px;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 1280px) {
.promotions-offer-card__media img {
height: 277px;
width: 542px;
}
}
/*
* Current Promotions (Promotions · Other block) — centred title, promotion cards,
* disclaimer. Title top padding matches section rhythm (80px).
*/
.promotions-current {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.promotions-current__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.promotions-current__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.promotions-current__inner {
padding-left: 80px;
padding-right: 80px;
padding-bottom: 80px;
}
}
.promotions-current__title {
width: 100%;
padding-top: 4rem;
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.promotions-current__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
@media (min-width: 1024px) {
.promotions-current__title {
padding-top: 80px;
}
}
/* Disclaimer only (no live promotions): the title normally carries the top padding. */
.promotions-current--plain .promotions-current__inner {
padding-top: 4rem;
}
@media (min-width: 1024px) {
.promotions-current--plain .promotions-current__inner {
padding-top: 80px;
}
}
/*
* Promotions · Other directly after Promotions · Featured (both white): drop
* the second section's top padding so the gap is one section rhythm, not two.
* Editor selectors: each block sits in its own .wp-block wrapper.
*/
.promotions-featured + .promotions-current .promotions-current__title,
.promotions-featured + .promotions-current--plain .promotions-current__inner,
.wp-block[data-type="bss/promotions-featured"] + .wp-block[data-type="bss/promotions-other"] .promotions-current__title,
.wp-block[data-type="bss/promotions-featured"] + .wp-block[data-type="bss/promotions-other"] .promotions-current--plain .promotions-current__inner {
padding-top: 0px;
}
@media (min-width: 1024px) {
.promotions-featured + .promotions-current .promotions-current__title,
.promotions-featured + .promotions-current--plain .promotions-current__inner,
.wp-block[data-type="bss/promotions-featured"] + .wp-block[data-type="bss/promotions-other"] .promotions-current__title,
.wp-block[data-type="bss/promotions-featured"] + .wp-block[data-type="bss/promotions-other"] .promotions-current--plain .promotions-current__inner {
padding-top: 0px;
}
}
/* Promotions · Other — light blue cards, one centred or two per row. */
.loc-finder-section--corporate > .promotions-current__list {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .promotions-current__list {
padding-bottom: 8rem;
}
}
.promotions-current__list {
display: flex;
width: 100%;
max-width: 1280px;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
padding-top: 1rem;
}
.promotions-current__item {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
border-radius: 24px;
background-color: var(--bss-light-bg);
padding: 1.5rem;
text-align: left;
}
@media (min-width: 768px) {
.promotions-current__item {
width: calc(50% - 12px);
padding: 2rem;
}
}
.promotions-current__item-title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.promotions-current__item-body {
width: 100%;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.promotions-current__item-body > * + * {
margin-top: 0.75rem;
}
.promotions-current__item-body ul {
list-style-type: disc;
}
.promotions-current__item-body ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.promotions-current__item-body ul {
padding-left: 1.25rem;
}
.promotions-current__item-body ol {
list-style-type: decimal;
}
.promotions-current__item-body ol > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.promotions-current__item-body ol {
padding-left: 1.25rem;
}
.promotions-current__item-body :is(strong, b) {
font-weight: 700;
color: var(--bss-primary);
}
.promotions-current__item-body a {
font-weight: 700;
color: var(--bss-cta);
text-underline-offset: 2px;
}
.promotions-current__item-body a:hover {
text-decoration-line: underline;
}
/* "No promotions" text (Site Options) — centred copy above the section button. */
.promotions-current__empty {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 760px;
text-align: center;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.promotions-current__empty > * + * {
margin-top: 0.75rem;
}
.promotions-current__empty :is(strong, b) {
font-weight: 700;
color: var(--bss-primary);
}
.promotions-current__empty a {
font-weight: 700;
color: var(--bss-cta);
text-underline-offset: 2px;
}
.promotions-current__empty a:hover {
text-decoration-line: underline;
}
/* Buttons line up at the bottom of each card. */
.promotions-current__item-cta {
margin-top: auto;
}
.promotions-current__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.promotions-current__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.promotions-current__disclaimer {
margin-left: auto;
margin-right: auto;
max-width: 900px;
text-align: center;
font-size: 13px;
font-weight: 500;
line-height: 1.625;
color: var(--bss-sky);
}
/*
* Featured Promotions (block) — header + one or two navy promo cards.
* Card copy reuses .promotions-offer-card__* text classes.
* One promo with a photo: wide card, photo beside the copy at xl+ (same as the Offer Card).
* Two promos: side by side from lg, photo above the copy, buttons aligned at the bottom.
*/
.promotions-featured__inner {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
}
@media (min-width: 768px) {
.promotions-featured__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
}
@media (min-width: 1024px) {
.promotions-featured__inner {
gap: 3rem;
padding: 80px;
}
}
.promotions-featured__header {
display: flex;
max-width: 760px;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
}
.promotions-featured__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.promotions-featured__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.promotions-featured__subtitle {
font-size: 30px;
line-height: 1.3;
font-weight: 600;
color: var(--bss-sky);
}
.loc-finder-section--corporate > .promotions-featured__grid {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .promotions-featured__grid {
padding-bottom: 8rem;
}
}
.promotions-featured__grid {
display: grid;
width: 100%;
max-width: 1280px;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 1024px) {
.promotions-featured__grid--pair {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.blue-wave-section > .promotions-featured__card {
margin-top: -2px;
}
footer > .promotions-featured__card {
margin-top: -2px;
}
.promotions-featured__card {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 2rem;
border-radius: 24px;
background-color: var(--bss-primary);
padding: 1.25rem;
}
@media (min-width: 640px) {
.promotions-featured__card {
padding: 1.5rem;
}
}
@media (min-width: 1280px) {
.promotions-featured__card {
padding: 2rem;
}
.promotions-featured__card--wide {
flex-direction: row;
align-items: center;
}
}
.promotions-featured__content {
order: 2;
display: flex;
width: 100%;
min-width: 0px;
flex: 1 1 0%;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
@media (min-width: 1280px) {
.promotions-featured__card--wide .promotions-featured__content {
order: 1;
max-width: 642px;
}
}
/* Pairs: button sits at the bottom so both cards line up. */
.promotions-featured__cta {
margin-top: auto;
}
.promotions-featured__media {
order: 1;
width: 100%;
flex-shrink: 0;
}
@media (min-width: 1280px) {
.promotions-featured__card--wide .promotions-featured__media {
order: 2;
width: 542px;
}
}
.promotions-featured__media img {
aspect-ratio: 542/277;
width: 100%;
border-radius: 24px;
-o-object-fit: cover;
object-fit: cover;
}
/*
* Ready to Cancel? — WYSIWYG body. H2–H4 inside the copy render as the
* preview's blue emphasis line; bold paragraphs as the confirmation note.
*/
.loc-finder-section--corporate > .cancellation-intro__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .cancellation-intro__inner {
padding-bottom: 8rem;
}
}
.cancellation-intro__inner {
margin-left: auto;
margin-right: auto;
max-width: 1280px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.cancellation-intro__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.cancellation-intro__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 5rem;
padding-bottom: 5rem;
}
}
.cancellation-intro__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.cancellation-intro__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.mega-programs-grid > div > .cancellation-intro__body {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.cancellation-intro__body {
margin-top: 1rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.mega-programs-grid > div > .cancellation-intro__body > * + * {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.cancellation-intro__body > * + * {
margin-top: 1rem;
}
.cancellation-intro__body > * + :is(h2, h3, h4) {
margin-top: 2rem;
}
.cancellation-intro__body :is(h2, h3, h4) {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.5;
color: var(--bss-primary);
}
.cancellation-intro__body :is(strong, b) {
font-weight: 700;
}
.cancellation-intro__body ul {
list-style-type: disc;
}
.cancellation-intro__body ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.cancellation-intro__body ul {
padding-left: 1.25rem;
}
.cancellation-intro__body ol {
list-style-type: decimal;
}
.cancellation-intro__body ol > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.cancellation-intro__body ol {
padding-left: 1.25rem;
}
.cancellation-intro__body a,
.cancellation-policy--page .cancellation-policy__body a {
font-weight: 700;
color: var(--bss-sky);
text-decoration-line: underline;
text-underline-offset: 2px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.cancellation-intro__body a:hover,
.cancellation-policy--page .cancellation-policy__body a:hover {
color: var(--bss-primary);
}
/*
* Cancellation Policy — 24px titles and plain list rows (no check icon),
* overriding the Local SEO / specialty rich-text defaults.
*/
.cancellation-policy--page .cancellation-policy__content :is(h2, h3) {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.cancellation-policy--page .cancellation-policy__body > * + * {
margin-top: 1.5rem;
}
.cancellation-policy--page .cancellation-policy__body > h3 + * {
margin-top: 0.75rem;
}
.cancellation-policy--page .cancellation-policy__body :is(p, li) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.cancellation-policy--page .cancellation-policy__body :is(ul, ol) {
list-style-type: none;
}
.cancellation-policy--page .cancellation-policy__body :is(ul, ol) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.cancellation-policy--page .cancellation-policy__body :is(ul, ol) {
padding: 0px;
}
.cancellation-policy--page .cancellation-policy__body li::before {
content: none;
}
/*
* Taking a Break — lead + 2-up white cards on the tint band.
*/
.loc-finder-section--corporate > .cancellation-break__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .cancellation-break__inner {
padding-bottom: 8rem;
}
}
.cancellation-break__inner {
margin-left: auto;
margin-right: auto;
max-width: 1280px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.cancellation-break__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.cancellation-break__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 5rem;
padding-bottom: 5rem;
}
}
.cancellation-break__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.cancellation-break__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.mega-programs-grid > div > .cancellation-break__lead {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.cancellation-break__lead {
margin-top: 1rem;
max-width: 900px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.cancellation-break__grid {
margin-top: 2.5rem;
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 1024px) {
.cancellation-break__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.cancellation-break__card {
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
@media (min-width: 768px) {
.cancellation-break__card {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}
.cancellation-break__card-title {
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.mega-programs-grid > div > .cancellation-break__card-body {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.cancellation-break__card-body {
margin-top: 1rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/* Space between buddy paragraphs when this band is not the Cancellation page. */
.cancellation-policy:not(.cancellation-policy--page) .cancellation-policy__body > * + * {
margin-top: 1.5rem;
}
.loc-finder-section--corporate > .referral-tagline__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .referral-tagline__inner {
padding-bottom: 8rem;
}
}
.referral-tagline__inner {
margin-left: auto;
margin-right: auto;
max-width: 1280px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
text-align: center;
}
@media (min-width: 768px) {
.referral-tagline__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.referral-tagline__inner {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
.referral-tagline__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.2;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.referral-tagline__title {
font-size: 32px;
}
}
@media (min-width: 1024px) {
.referral-tagline__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.loc-finder-section--corporate > .referral-info-cards__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .referral-info-cards__inner {
padding-bottom: 8rem;
}
}
.referral-info-cards__inner {
margin-left: auto;
margin-right: auto;
display: grid;
max-width: 1280px;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.referral-info-cards__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.referral-info-cards__inner {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
padding-bottom: 80px;
}
}
.referral-info-card {
display: flex;
height: 100%;
flex-direction: column;
border-radius: 24px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding: 2rem;
box-shadow: 0 4px 24px rgba(19, 46, 171, 0.07);
}
/* Red rule under the title, matching the live referral cards. */
.referral-info-card__title {
padding-bottom: 1rem;
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
border-bottom: 2px solid var(--bss-cta);
}
.referral-info-card__subtitle {
margin-top: 1.5rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--bss-sky);
}
.referral-info-card__list {
margin-top: 0.75rem;
}
.referral-info-card__list > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.referral-info-card__item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.referral-info-card__check {
margin-top: 0.125rem;
height: 18px;
width: 18px;
flex-shrink: 0;
}
.mega-programs-grid > div > .referral-info-card__body {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.referral-info-card__body {
margin-top: 1rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.loc-finder-section--corporate > .referral-ready__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .referral-ready__inner {
padding-bottom: 8rem;
}
}
.referral-ready__inner {
margin-left: auto;
margin-right: auto;
max-width: 1280px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.referral-ready__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.referral-ready__inner {
padding-top: 80px;
padding-bottom: 80px;
}
}
.referral-ready__header {
margin-left: auto;
margin-right: auto;
max-width: 760px;
text-align: center;
}
.referral-ready__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.referral-ready__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.mega-programs-grid > div > .referral-ready__intro {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.referral-ready__intro {
margin-top: 1rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.referral-ready__grid {
margin-top: 3rem;
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
align-items: flex-start;
gap: 3rem;
}
@media (min-width: 1024px) {
.referral-ready__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4rem;
}
}
.referral-ready__panel {
display: flex;
flex-direction: column;
align-items: center;
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
}
.referral-ready__panel-title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
/* Compact accordion — icon + small link label; expands in place. */
.referral-ready-acc {
margin-top: 1.5rem;
width: 100%;
max-width: 420px;
}
.referral-ready-acc > summary {
display: flex;
cursor: pointer;
list-style-type: none;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--bss-sky);
}
.referral-ready-acc > summary::-webkit-details-marker {
display: none;
}
.referral-ready-acc > summary:focus-visible {
border-radius: 0.25rem;
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: var(--bss-primary);
--tw-ring-offset-width: 2px;
}
.blue-wave-section > .referral-ready-acc__toggle {
margin-top: -2px;
}
footer > .referral-ready-acc__toggle {
margin-top: -2px;
}
.referral-ready-acc__toggle {
position: relative;
display: block;
height: 1.75rem;
width: 1.75rem;
flex-shrink: 0;
border-radius: 9999px;
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.referral-ready-acc__toggle::before,
.referral-ready-acc__toggle::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
background-color: currentColor;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
.referral-ready-acc__toggle::before {
height: 0.125rem;
width: 0.75rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.referral-ready-acc__toggle::after {
height: 0.75rem;
width: 0.125rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.referral-ready-acc[open] .referral-ready-acc__toggle::after {
--tw-scale-y: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.referral-ready-acc__label {
font-size: 14px;
font-weight: 500;
line-height: 1.375;
color: var(--bss-sky);
}
@media (min-width: 1024px) {
.referral-ready-acc__label {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
}
}
.referral-ready-acc__body {
margin-top: 1.5rem;
}
.referral-ready-acc__body > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.referral-ready-acc__body {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.referral-ready-acc__body strong {
font-weight: 700;
}
.referral-ready__link {
font-weight: 700;
color: var(--bss-cta);
text-underline-offset: 2px;
}
.referral-ready__link:hover {
text-decoration-line: underline;
}
.referral-ready__btn {
margin-top: 2rem;
display: inline-flex;
width: 100%;
max-width: 320px;
align-items: center;
justify-content: center;
border-radius: 40px;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.referral-ready__btn:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@media (min-width: 640px) {
.referral-ready__btn {
width: auto;
}
}
.referral-ready__btn--cta {
background-color: var(--bss-cta);
}
.blue-wave-section > .referral-ready__btn--primary {
margin-top: -2px;
}
footer > .referral-ready__btn--primary {
margin-top: -2px;
}
.referral-ready__btn--primary {
background-color: var(--bss-primary);
}
.loc-finder-section--corporate > .referral-closing__inner {
padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.loc-finder-section--corporate > .referral-closing__inner {
padding-bottom: 8rem;
}
}
.referral-closing__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1280px;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
text-align: center;
}
@media (min-width: 768px) {
.referral-closing__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.referral-closing__inner {
padding-top: 80px;
padding-bottom: 80px;
}
}
.referral-closing .page-questions-cta__content {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 760px;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
}
.referral-closing .page-questions-cta__title,
.referral-closing .page-questions-cta__body {
width: 100%;
text-align: center;
}
/*
* Pricing · Swim Plan Banner.
* 1440 canvas, 80px padding, centred H2 + wide rounded photo (1024×272).
*/
.pricing-swim-plan-banner__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.pricing-swim-plan-banner__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.pricing-swim-plan-banner__inner {
gap: 2rem;
padding: 80px;
}
}
.pricing-swim-plan-banner__title {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.pricing-swim-plan-banner__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.pricing-swim-plan-banner__media {
width: 100%;
}
.pricing-swim-plan-banner__image {
aspect-ratio: 1024/272;
width: 100%;
border-radius: 24px;
-o-object-fit: cover;
object-fit: cover;
}
/*
* Pricing · Special programs — same card shell as the plan cards, with one
* or more location prices in tinted tiles.
*/
.pricing-special__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 4rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.pricing-special__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.pricing-special__inner {
padding: 80px;
}
}
.pricing-special__header {
text-align: center;
}
.pricing-special__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.pricing-special__title {
font-size: 28px;
}
}
.pricing-special__body {
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
max-width: 760px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.pricing-special__grid {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 640px) {
.pricing-special__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.pricing-special__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pricing-special__card {
min-height: 300px;
}
}
.pricing-special__card-title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
color: var(--bss-primary);
}
.pricing-special__prices {
margin-top: 1.5rem;
display: grid;
flex: 1 1 0%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.pricing-special__prices--single {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.pricing-special__price {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 1rem;
background-color: var(--bss-panel-bg);
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
text-align: center;
}
.pricing-special__amount {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 34px;
font-weight: 700;
line-height: 1;
color: var(--bss-cta);
}
.pricing-special__cadence {
margin-top: 0.375rem;
font-size: 13px;
--tw-text-opacity: 1;
color: rgb(138 151 184 / var(--tw-text-opacity, 1));
}
.pricing-special__location {
margin-top: 0.5rem;
font-size: 13px;
font-weight: 700;
color: var(--bss-primary);
}
.pricing-special__cta {
margin-top: 1.5rem;
display: block;
border-radius: 40px;
background-color: var(--bss-cta);
padding-top: 0.875rem;
padding-bottom: 0.875rem;
text-align: center;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.pricing-special__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
/*
* Pricing · Details stack — single column on #F1F8FC: H2, then white cards.
* Box content is editor rich text, so list styles target the WYSIWYG markup.
*/
.pricing-details__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
gap: 4rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.pricing-details__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.pricing-details__inner {
padding: 80px;
}
}
.pricing-details__block {
display: flex;
width: 100%;
flex-direction: column;
gap: 1.5rem;
}
.pricing-details__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.pricing-details__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.pricing-details__cards {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pricing-details__card {
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
.pricing-details__card {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
}
.pricing-details__card-title {
font-size: 30px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-sky);
}
.mega-programs-grid > div > .pricing-details__card-title + .pricing-details__content {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.pricing-details__card-title + .pricing-details__content {
margin-top: 1rem;
}
.pricing-details__content {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.pricing-details__content > * + * {
margin-top: 0.75rem;
}
.pricing-details__content ul {
list-style-type: disc;
}
.pricing-details__content ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.pricing-details__content ul {
padding-left: 1.25rem;
}
.pricing-details__content ol {
list-style-type: decimal;
}
.pricing-details__content ol > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.pricing-details__content ol {
padding-left: 1.25rem;
}
.pricing-details__content li > :is(ul, ol) {
margin-top: 0.5rem;
}
.pricing-details__content li > :is(ul, ol) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.pricing-details__content :is(strong, b) {
font-weight: 700;
color: var(--bss-primary);
}
.pricing-details__content a {
font-weight: 700;
color: var(--bss-cta);
text-underline-offset: 2px;
}
.pricing-details__content a:hover {
text-decoration-line: underline;
}
/*
* Pricing · Free Trial CTA — full-width primary navy band.
*/
.pricing-free-trial__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
text-align: center;
}
@media (min-width: 768px) {
.pricing-free-trial__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.pricing-free-trial__inner {
padding: 80px;
}
}
.pricing-free-trial__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
.pricing-free-trial__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.pricing-free-trial__body {
max-width: 640px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pricing-free-trial__cta {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.pricing-free-trial__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
/*
* Pricing · Who We Teach — navy audience cards on white.
* Top row: 4 equal cards. Following cards span 2 columns at lg+.
*/
.pricing-who-we-teach__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.pricing-who-we-teach__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.pricing-who-we-teach__inner {
gap: 4rem;
padding: 80px;
}
}
.pricing-who-we-teach__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.pricing-who-we-teach__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.pricing-who-we-teach__grid {
display: grid;
width: 100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 640px) {
.pricing-who-we-teach__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.pricing-who-we-teach__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.blue-wave-section > .pricing-who-we-teach__card {
margin-top: -2px;
}
footer > .pricing-who-we-teach__card {
margin-top: -2px;
}
.pricing-who-we-teach__card {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 16px;
background-color: var(--bss-primary);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
text-align: center;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.pricing-who-we-teach__card--wide {
grid-column: span 2 / span 2;
}
}
.pricing-who-we-teach__card-title {
font-size: 24px;
line-height: 1.3;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pricing-who-we-teach__card-text {
margin-top: 0.75rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pricing-who-we-teach__card-text > * + * {
margin-top: 0.5rem;
}
/* White + underline on navy cards — red-on-blue fails contrast (ADA). */
.pricing-who-we-teach__card-text a {
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
text-decoration-line: underline;
text-underline-offset: 2px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.pricing-who-we-teach__card-text a:hover {
color: rgb(255 255 255 / 0.9);
}
/* —— Hero —— */
/* No hero image: copy spans the page column on the blue band. */
.birthday-hero--no-media .program-detail-header__content {
max-width: none;
}
@media (min-width: 1024px) {
.birthday-hero--no-media .program-detail-header__content {
max-width: none;
}
}
.birthday-hero--no-media :is(.birthday-hero__title, .birthday-hero__subtitle, .birthday-hero__intro, .birthday-hero__intro :is(p, li, a, strong, em)) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.birthday-hero--no-media .birthday-hero__intro :is(a) {
text-decoration-line: underline;
}
.birthday-hero__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.birthday-hero__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.birthday-hero__subtitle {
font-size: 18px;
line-height: 1.5;
font-weight: 600;
color: var(--bss-sky);
}
.mega-programs-grid > div > .birthday-hero__intro :is(ul, ol) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.birthday-hero__intro :is(ul, ol) {
margin-top: 1rem;
list-style-type: none;
}
.birthday-hero__intro :is(ul, ol) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.birthday-hero__intro :is(ul, ol) {
padding: 0px;
}
.birthday-hero__intro :is(ul > li, ol > li) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
padding-left: 0;
}
.birthday-hero__intro :is(ul > li)::before {
content: '';
display: inline-block;
vertical-align: top;
margin-right: 0.5rem;
margin-top: 0.125rem;
height: 18px;
width: 18px;
background-image: var(--bss-hero-check-icon);
background-repeat: no-repeat;
background-size: contain;
}
.birthday-hero__carousel {
width: 100%;
}
.birthday-hero__slide {
position: relative;
flex-shrink: 0;
flex-grow: 0;
flex-basis: 100%;
}
.birthday-hero__slide img,
.birthday-hero__static img {
aspect-ratio: 16 / 9;
width: 100%;
border-radius: 24px;
-o-object-fit: cover;
object-fit: cover;
}
.mega-programs-grid > div > .birthday-hero__dots {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.birthday-hero__dots {
margin-top: 1rem;
display: flex;
justify-content: center;
gap: 0.625rem;
}
.birthday-hero__dots .carousel-dot {
height: 0.625rem;
width: 0.625rem;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(184 201 222 / var(--tw-bg-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.blue-wave-section > .birthday-hero__dots .carousel-dot.is-active {
margin-top: -2px;
}
footer > .birthday-hero__dots .carousel-dot.is-active {
margin-top: -2px;
}
.birthday-hero__dots .carousel-dot.is-active {
width: 0.625rem;
background-color: var(--bss-primary);
}
/* —— Centered tint bands (party here / reservation) —— */
.birthday-band__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
text-align: center;
}
@media (min-width: 768px) {
.birthday-band__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.birthday-band__inner {
gap: 2rem;
padding: 80px;
}
}
.birthday-band__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.birthday-band__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.birthday-band__content {
margin-left: auto;
margin-right: auto;
max-width: 760px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.mega-programs-grid > div > .birthday-band__content :is(p + p) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.birthday-band__content :is(p + p) {
margin-top: 1rem;
}
/* Blue band — original Birthday Bonus (white type on brand blue). */
.birthday-band--blue {
background-color: var(--bss-primary);
}
.birthday-band--blue :is(.birthday-band__title, .birthday-band__content, .birthday-band__content :is(p, li, a, strong, em)) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.birthday-band--blue .birthday-band__content :is(a) {
text-decoration-line: underline;
}
/* —— Available locations —— */
.birthday-locations__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.birthday-locations__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.birthday-locations__inner {
padding: 80px;
}
}
.birthday-locations__grid {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1120px;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 1024px) {
.birthday-locations__grid {
gap: 2rem;
}
}
.birthday-locations__card {
display: flex;
width: 100%;
max-width: 340px;
flex-direction: column;
overflow: hidden;
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
@media (min-width: 640px) {
.birthday-locations__card {
max-width: 360px;
}
}
.birthday-locations__card img {
aspect-ratio: 4/3;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.birthday-locations__card-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.5rem;
}
.birthday-locations__card-name {
font-size: 24px;
line-height: 1.3;
font-weight: 700;
color: var(--bss-primary);
}
.birthday-locations__card-address {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
/* WYSIWYG wraps each block in . Keep the address stacked tightly. */
.birthday-locations__card-address :is(p) {
margin: 0px;
}
.birthday-locations__card-address :is(p + p) {
margin-top: 0.25rem;
}
.birthday-locations__card-address :is(a) {
color: var(--bss-primary);
text-decoration-line: underline;
}
/* —— Award / guide badge —— */
.birthday-guide__inner {
margin-left: auto;
margin-right: auto;
max-width: 1440px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
text-align: center;
}
@media (min-width: 768px) {
.birthday-guide__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.birthday-guide__inner {
padding: 80px;
}
}
.birthday-guide__title {
margin-left: auto;
margin-right: auto;
max-width: 900px;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.2;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.birthday-guide__title {
font-size: 32px;
}
}
@media (min-width: 1024px) {
.birthday-guide__title {
line-height: 1.1;
}
}
.birthday-guide__logo {
margin-left: auto;
margin-right: auto;
margin-top: 2.5rem;
width: 290px;
max-width: 100%;
-o-object-fit: contain;
object-fit: contain;
}
/* Birthday packages are not selectable. Lift on hover instead of the blue selected border. */
.price-card-grid .price-card {
transition: transform 200ms ease, box-shadow 200ms ease;
}
.price-card-grid .price-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 36px rgba(19, 46, 171, 0.14);
}
.price-card-grid .price-card__body {
cursor: default;
}
/* —— Pricing card extras (party packages) —— */
.price-card__desc {
margin-top: 0.5rem;
font-size: 16px;
font-weight: 500;
line-height: 1.375;
--tw-text-opacity: 1;
color: rgb(138 151 184 / var(--tw-text-opacity, 1));
}
.price-card-grid .price-card__pace {
margin-top: 0 !important;
}
.mega-programs-grid > div > .price-card__amount {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.price-card__amount {
margin-top: 1rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 40px;
font-weight: 700;
line-height: 1;
color: var(--bss-cta);
}
.price-card__cadence {
margin-top: 0.5rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(138 151 184 / var(--tw-text-opacity, 1));
}
.price-card__features :is(ul, ol) {
margin-top: 0.75rem;
list-style-type: none;
}
.price-card__features :is(ul, ol) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.price-card__features :is(ul, ol) {
padding: 0px;
}
.price-card__features :is(p, ul > li, ol > li) {
font-size: 16px;
font-weight: 500;
line-height: 1.375;
}
.price-card__features :is(ul > li, ol > li) {
color: var(--bss-body);
padding-left: 0;
}
.price-card__features :is(li > p) {
margin: 0px;
}
/* Check sits in column 1. A nested sub-list spans the full row beneath the label. */
.price-card__features ul > li {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
align-items: start;
}
.price-card__features ol > li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.price-card__features :is(ul > li)::before {
content: '';
display: block;
grid-column: 1;
grid-row: 1;
margin-top: 0.125rem;
height: 16px;
width: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6' stroke='%23009DDB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/*
* Sub-item list: indent under the parent check item.
* Editors create this by indenting bullets in the Description list field.
* Example: "Your choice of themed party experiences" then All-Star Sports, Dino Adventure, …
*/
.price-card__features :is(ul ul, ol ol, ul ol, ol ul) {
grid-column: 1 / -1;
margin-bottom: 0px;
margin-top: 0.5rem;
list-style-type: disc;
}
.price-card__features :is(ul ul, ol ol, ul ol, ol ul) > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.price-card__features :is(ul ul, ol ol, ul ol, ol ul) {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 2.5rem;
padding-right: 0px;
}
.price-card__features :is(ul ul, ol ol, ul ol, ol ul) *::marker {
color: var(--bss-body);
}
.price-card__features :is(ul ul, ol ol, ul ol, ol ul)::marker {
color: var(--bss-body);
}
.price-card__features :is(ol ol, ul ol) {
list-style-type: decimal;
}
.price-card__features :is(ul ul > li, ol ol > li, ul ol > li, ol ul > li) {
display: list-item;
grid-template-columns: none;
padding-left: 0.15rem;
}
.price-card__features :is(ul ul > li, ol ol > li, ul ol > li, ol ul > li)::before {
content: none;
display: none;
background-image: none;
}
/* Indented group with no label of its own: do not paint the parent check. */
.price-card__features li.has-only-sublist {
display: block;
}
.price-card__features li.has-only-sublist::before {
content: none;
display: none;
background-image: none;
}
.price-card__features li.has-only-sublist > :is(ul, ol) {
margin-top: 0px;
}
/*
* A
between two groups in this field was a full blank line.
* Hide that break and use a short margin instead.
*/
.price-card__features :is(p) {
margin: 0px;
}
.price-card__features br {
display: none;
}
.price-card__features p:empty,
.price-card__features p:has(> br:only-child) {
display: none;
}
/* Label sits close to the list under it. */
.price-card__features :is(p + ul, p + ol) {
margin-top: 0.25rem;
}
/* Short gap before the next group label, with or without a
between them. */
.price-card__features :is(ul + p, ol + p, ul + br + p, ol + br + p, ul + p + p, ol + p + p) {
margin-top: 0.75rem;
}
.price-card__features > :is(ul, ol):has(+ br) {
margin-bottom: 0.75rem;
}
/* One package: wide enough that a long list does not become a tall column. */
.price-card-grid--single > .price-card {
width: 100%;
max-width: 880px;
flex-shrink: 0;
}
@media (min-width: 640px) {
.price-card-grid {
align-items: flex-start;
}
.price-card-grid .price-card__desc {
min-height: 5.5rem;
}
}
/* —— Why families love —— */
.birthday-party-benefits__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.birthday-party-benefits__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.birthday-party-benefits__inner {
padding: 80px;
}
}
.birthday-party-benefits__title {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.birthday-party-benefits__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.birthday-party-benefits__content {
width: 100%;
max-width: 720px;
}
.birthday-party-benefits__content :is(ul, ol) {
display: flex;
list-style-type: none;
flex-direction: column;
gap: 1rem;
padding: 0px;
}
.birthday-party-benefits__content :is(ul > li, ol > li) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
padding-left: 0;
}
.birthday-party-benefits__content :is(ul > li)::before {
content: '';
display: inline-block;
vertical-align: top;
margin-right: 0.75rem;
margin-top: 0.125rem;
height: 18px;
width: 18px;
background-image: var(--bss-hero-check-icon);
background-repeat: no-repeat;
background-size: contain;
}
.birthday-party-benefits__content p {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* —— Ready to Make a Splash —— */
.birthday-booking-cta__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.birthday-booking-cta__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.birthday-booking-cta__inner {
gap: 2.5rem;
padding: 80px;
}
}
.birthday-booking-cta__title {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.birthday-booking-cta__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.birthday-booking-cta__content {
display: flex;
width: 100%;
max-width: 720px;
flex-direction: column;
gap: 1rem;
}
.birthday-booking-cta__content p {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.birthday-booking-cta__content :is(ul, ol) {
margin-top: 0.5rem;
display: flex;
list-style-type: none;
flex-direction: column;
gap: 0.75rem;
padding: 0px;
}
.birthday-booking-cta__content :is(ul > li, ol > li) {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
padding-left: 0;
}
.birthday-booking-cta__content :is(ul > li)::before {
content: '';
display: inline-block;
vertical-align: top;
margin-right: 0.75rem;
margin-top: 0.375rem;
height: 18px;
width: 18px;
background-image: var(--bss-birthday-circle-icon);
background-repeat: no-repeat;
background-size: contain;
}
/* —— Events calendar —— */
.birthday-events-calendar__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.birthday-events-calendar__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.birthday-events-calendar__inner {
padding: 80px;
}
}
.birthday-events-calendar__title {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.birthday-events-calendar__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
}
.birthday-events-calendar__embed {
width: 100%;
max-width: 800px;
overflow: hidden;
border-radius: 24px;
border-width: 1px;
border-color: var(--bss-border);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
--tw-shadow: 0 4px 24px rgba(19,46,171,0.08);
--tw-shadow-colored: 0 4px 24px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.birthday-events-calendar__embed iframe {
display: block;
width: 100%;
border-width: 0px;
min-height: 700px;
height: 700px;
}
/* —— Reviews videos (under shared testimonials carousel) —— */
.birthday-video-gallery-block {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.birthday-video-gallery-block {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.birthday-video-gallery-block {
padding-left: 80px;
padding-right: 80px;
}
}
.birthday-video-gallery__title {
text-align: center;
font-size: 20px;
line-height: 1.3;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.birthday-video-gallery {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 1024px) {
.birthday-video-gallery {
gap: 2rem;
}
}
.blue-wave-section > .birthday-video-gallery__embed {
margin-top: -2px;
}
footer > .birthday-video-gallery__embed {
margin-top: -2px;
}
.birthday-video-gallery__embed {
position: relative;
aspect-ratio: 9/16;
width: 270px;
max-width: 100%;
flex-shrink: 0;
overflow: hidden;
border-radius: 24px;
background-color: var(--bss-primary);
--tw-shadow: 0 4px 24px rgba(19,46,171,0.12);
--tw-shadow-colored: 0 4px 24px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.birthday-video-gallery__embed iframe {
position: absolute;
inset: 0px;
height: 100%;
width: 100%;
border-width: 0px;
}
/*
* Short review rows (1–2 cards): center in the viewport. On lg the shared
* carousel sizes cards at 1/3 width, so two cards otherwise sit left-aligned.
*/
.birthday-reviews-carousel .carousel-track:has(> :nth-child(1):nth-last-child(-n+2)) {
justify-content: center;
}
.about-us-story .cancellation-policy__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.about-us-story .cancellation-policy__title {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
.about-us-story .cancellation-policy__media {
width: auto;
flex: 1 1 0%;
}
}
.about-us-story .cancellation-policy__lead,
.about-us-story .cancellation-policy__content :is(p, li) {
font-size: 18px;
font-weight: 500;
line-height: 1.5;
color: var(--bss-body);
}
@media (min-width: 1024px) {
.about-us-story--media-right .cancellation-policy__media {
order: 9999;
}
}
.blue-wave-section > .about-us-hero__video {
margin-top: -2px;
}
footer > .about-us-hero__video {
margin-top: -2px;
}
.about-us-hero__video {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
overflow: hidden;
border-radius: 24px;
background-color: var(--bss-primary);
--tw-shadow: 0 4px 24px rgba(19,46,171,0.12);
--tw-shadow-colored: 0 4px 24px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.about-us-hero__video iframe {
position: absolute;
inset: 0px;
height: 100%;
width: 100%;
border-width: 0px;
}
@media (min-width: 640px) {
.icon-feature-cards__inner--5col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.icon-feature-cards__inner--5col {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.icon-feature-cards__inner--5col {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
/* 5 cards in a 3-col (lg) grid: span 2 of 6 cols each; last row pair centered. */
@media (min-width: 1024px) {
.icon-feature-cards__inner--5col > article {
grid-column: span 2;
}
.icon-feature-cards__inner--5col > article:nth-child(4) {
grid-column: 2 / span 2;
}
.icon-feature-cards__inner--5col > article:nth-child(5) {
grid-column: 4 / span 2;
}
}
@media (min-width: 1280px) {
.icon-feature-cards__inner--5col > article,
.icon-feature-cards__inner--5col > article:nth-child(4),
.icon-feature-cards__inner--5col > article:nth-child(5) {
grid-column: span 1;
}
}
.water-safety-tips__intro--center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Rich text intro: spacing between paragraphs, lists and headings. */
.water-safety-tips__intro > * + * {
margin-top: 0.75rem;
}
.water-safety-tips__intro ul {
list-style-type: disc;
}
.water-safety-tips__intro ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.water-safety-tips__intro ul {
padding-left: 1.5rem;
}
.water-safety-tips__intro ol {
list-style-type: decimal;
}
.water-safety-tips__intro ol > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.water-safety-tips__intro ol {
padding-left: 1.5rem;
}
.water-safety-tips__intro li > :is(ul, ol) {
margin-top: 0.5rem;
}
/* Centred intro: the list block is centred, its items stay left-aligned. */
.water-safety-tips__intro--center :is(ul, ol) {
margin-left: auto;
margin-right: auto;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
text-align: left;
}
.water-safety-tips__intro :is(strong, b) {
font-weight: 700;
}
.water-safety-tips__intro a {
color: var(--bss-cta);
text-underline-offset: 2px;
}
.water-safety-tips__intro a:hover {
text-decoration-line: underline;
}
/* No cards: the header closes the section (or sits above the button). */
.water-safety-tips__header--last {
padding-bottom: 4rem;
}
@media (min-width: 1024px) {
.water-safety-tips__header--last {
padding-bottom: 80px;
}
}
.water-safety-tips__header--above-cta {
padding-bottom: 2rem;
}
.pool-partnership-benefits__cta {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1440px;
justify-content: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.pool-partnership-benefits__cta {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.pool-partnership-benefits__cta {
padding-bottom: 80px;
}
}
.pool-partnership-benefits__btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.pool-partnership-benefits__btn:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.testimonial-card.testimonial-card--partner {
flex-basis: 100%;
align-items: center;
gap: 1rem;
padding: 1.5rem;
text-align: center;
}
@media (min-width: 640px) {
.testimonial-card.testimonial-card--partner {
flex-basis: 100%;
}
}
@media (min-width: 1024px) {
.testimonial-card.testimonial-card--partner {
min-height: 0px;
overflow: visible;
flex: 0 0 100%;
width: 100%;
}
}
.testimonial-card--partner .testimonial-card__partner-quote {
max-width: 960px;
font-size: 18px;
font-weight: 500;
line-height: 1.625;
color: var(--bss-body);
}
.testimonial-card--partner .testimonial-card__brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.testimonial-card--partner .testimonial-card__logo {
height: 4rem;
width: 4rem;
-o-object-fit: contain;
object-fit: contain;
}
.mega-programs-grid > div > .testimonial-card--partner .testimonial-card__author {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.testimonial-card--partner .testimonial-card__author {
margin-top: 1rem;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.testimonial-card--partner .testimonial-card__name-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.testimonial-card--partner .testimonial-card__name {
font-weight: 700;
color: var(--bss-primary);
}
.testimonial-card--partner .testimonial-card__company,
.testimonial-card--partner .testimonial-card__location {
font-size: 13px;
font-weight: 600;
line-height: 1.375;
color: var(--bss-body);
}
.peppa-hero {
background: #5fd0df;
}
.peppa-hero__stage {
position: relative;
}
.peppa-hero__wave {
display: block;
width: 100%;
height: auto;
}
.peppa-hero__logo {
position: absolute;
left: 0;
right: 0;
top: 6%;
bottom: 24%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.peppa-hero__logo img {
width: min(300px, 78vw);
height: auto;
}
.peppa-hero__copy {
margin-left: auto;
margin-right: auto;
max-width: 980px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 4rem;
padding-top: 0.5rem;
text-align: center;
}
@media (min-width: 768px) {
.peppa-hero__copy {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.peppa-hero__copy {
padding-bottom: 5rem;
}
}
.peppa-hero__title {
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.peppa-hero__title {
font-size: 56px;
line-height: 1.1;
font-weight: 700;
}
}
.peppa-hero__lead {
margin-left: auto;
margin-right: auto;
margin-top: 1.25rem;
max-width: 920px;
font-size: 20px;
font-weight: 600;
line-height: 1.375;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.peppa-hero__lead {
font-size: 32px;
line-height: 1.3;
font-weight: 600;
}
}
.peppa-divider {
line-height: 0;
}
.peppa-divider img {
display: block;
width: 100%;
height: auto;
}
.peppa-divider--to-mid {
background: #5fd0df;
}
.peppa-divider--to-light {
background: #00abc8;
}
.peppa-band {
position: relative;
overflow: hidden;
}
.peppa-band--mid {
background: #00abc8;
}
.peppa-band--light {
background: #5fd0df;
}
.peppa-band__inner {
position: relative;
z-index: 10;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1440px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 3rem;
padding-bottom: 3rem;
}
@media (min-width: 768px) {
.peppa-band__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.peppa-band__inner {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
.peppa-band__title {
margin-left: auto;
margin-right: auto;
max-width: 680px;
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 1.2;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.peppa-band__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.mega-programs-grid > div > .peppa-band__lead {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.peppa-band__lead {
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
max-width: 760px;
text-align: center;
font-size: 22px;
font-weight: 600;
line-height: 1.375;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.peppa-band__lead {
font-size: 32px;
line-height: 1.3;
font-weight: 600;
}
}
.peppa-bubble {
position: absolute;
z-index: 0;
width: 110px;
height: auto;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.peppa-bubble--1 { top: 24px; left: 12px; }
.peppa-bubble--2 { top: 42%; right: 8px; width: 96px; }
.peppa-bubble--3 { bottom: 36px; left: 18%; width: 80px; }
.peppa-quotes {
margin-left: auto;
margin-right: auto;
margin-top: 2.5rem;
display: flex;
width: 100%;
max-width: 860px;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1024px) {
.peppa-quotes {
margin-top: 3.5rem;
gap: 3rem;
}
}
.peppa-quote-grid {
margin-left: auto;
margin-right: auto;
margin-top: 2.5rem;
display: grid;
width: 100%;
max-width: 980px;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 2rem;
}
@media (min-width: 1024px) {
.peppa-quote-grid {
margin-top: 3.5rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
row-gap: 3rem;
}
}
.peppa-quote {
position: relative;
}
.peppa-quote__bubble {
display: flex;
min-height: 220px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: var(--peppa-box) center / 100% 100% no-repeat;
padding: 36px 28px 32px;
text-align: center;
}
.peppa-quote--tall .peppa-quote__bubble {
min-height: 280px;
background-image: var(--peppa-box-tall);
}
.peppa-quote__character {
position: relative;
z-index: 1;
display: block;
width: 110px;
height: auto;
margin: 0 auto -24px;
}
.peppa-quote__title {
text-align: center;
color: var(--bss-cta);
font-size: 28px;
font-weight: 700;
line-height: 1.15;
}
.peppa-quote--compact .peppa-quote__title {
font-size: 22px;
line-height: 1.25;
}
.peppa-quote__text {
text-align: center;
color: var(--bss-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.45;
}
.peppa-quote__name {
text-align: center;
color: var(--bss-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
}
.peppa-band__cta {
margin-top: 2.5rem;
display: flex;
justify-content: center;
}
@media (min-width: 1024px) {
.peppa-band__cta {
margin-top: 3.5rem;
}
}
/* Parent reviews: one speech bubble at a time. Shared [data-carousel] steps by card width. */
.peppa-reviews {
position: relative;
z-index: 10;
margin-left: auto;
margin-right: auto;
margin-top: 2.5rem;
width: 100%;
max-width: 980px;
}
@media (min-width: 1024px) {
.peppa-reviews {
margin-top: 3.5rem;
}
}
.peppa-reviews__row {
position: relative;
}
.peppa-reviews__viewport {
width: 100%;
min-width: 0;
overflow: hidden;
}
.peppa-reviews__track {
display: flex;
align-items: stretch;
width: 100%;
min-width: 0;
transition: transform 300ms ease-out;
}
.peppa-reviews__card {
display: flex;
flex: 0 0 100%;
width: 100%;
min-width: 0;
}
.peppa-reviews__card .peppa-quote__bubble {
width: 100%;
height: 100%;
}
.peppa-reviews__nav {
display: none;
}
.peppa-reviews__dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1.5rem;
}
.peppa-reviews__nav:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.peppa-cta {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 40px;
background-color: var(--bss-cta);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.peppa-cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.peppa-faq-list {
margin-left: auto;
margin-right: auto;
margin-top: 2.5rem;
display: flex;
width: 100%;
max-width: 980px;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 1024px) {
.peppa-faq-list {
margin-top: 3rem;
}
}
.peppa-faq {
border-radius: 40px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.peppa-faq summary {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 28px;
cursor: pointer;
list-style: none;
font-size: 18px;
line-height: 1.5;
font-weight: 600;
color: var(--bss-primary);
}
.peppa-faq summary::-webkit-details-marker {
display: none;
}
.peppa-faq summary:focus-visible {
outline: 2px solid var(--bss-primary);
outline-offset: 3px;
border-radius: 40px;
}
.peppa-faq__mark {
position: relative;
width: 18px;
height: 18px;
flex: none;
color: var(--bss-primary);
}
.peppa-faq__mark::before,
.peppa-faq__mark::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
background: currentColor;
transform: translate(-50%, -50%);
}
.peppa-faq__mark::before {
width: 16px;
height: 2px;
}
.peppa-faq__mark::after {
width: 2px;
height: 16px;
}
.peppa-faq[open] .peppa-faq__mark::after {
transform: translate(-50%, -50%) scaleY(0);
}
.peppa-faq__answer {
padding-left: 1.75rem;
padding-right: 1.75rem;
padding-bottom: 1.25rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
padding-left: 60px;
}
/*
* Closing search. Same pill as loc-search-cta, stacked and centered
* on the mid Peppa band (legacy Find Swim Lessons block).
*/
.peppa-search {
position: relative;
overflow: hidden;
background: #00abc8;
}
.peppa-search .loc-search-cta__inner {
position: relative;
z-index: 1;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 2rem;
}
.peppa-search .loc-search-cta__copy,
.peppa-search .loc-search-cta__search {
width: 100%;
max-width: 720px;
flex: none;
}
.peppa-search .loc-search-cta__title,
.peppa-search .loc-search-cta__desc,
.peppa-search .loc-search-cta__geo {
color: #fff;
}
.peppa-search .loc-search-cta__geo:hover {
color: #fff;
opacity: 0.85;
}
@media (min-width: 1024px) {
.peppa-hero__logo img {
width: min(790px, 58vw);
}
.peppa-bubble {
display: block;
}
.peppa-quote__bubble {
min-height: 240px;
padding: 48px 128px 40px;
}
.peppa-quote--tall .peppa-quote__bubble {
min-height: 320px;
padding: 56px 128px 48px;
}
.peppa-quote--compact .peppa-quote__bubble {
min-height: 260px;
padding: 56px 108px 72px;
}
.peppa-quote--plain .peppa-quote__bubble,
.peppa-quote--plain.peppa-quote--tall .peppa-quote__bubble {
padding-right: 48px;
padding-left: 48px;
}
.peppa-quote__character {
position: absolute;
top: 50%;
width: 150px;
margin: 0;
transform: translateY(-46%);
}
.peppa-quote--compact .peppa-quote__character {
width: 96px;
}
.peppa-quote--start .peppa-quote__character {
left: -70px;
}
.peppa-quote--end .peppa-quote__character {
right: -70px;
}
.peppa-quote--compact.peppa-quote--start .peppa-quote__character {
left: -22px;
}
.peppa-quote--compact.peppa-quote--end .peppa-quote__character {
right: -22px;
}
.peppa-quote__title {
font-size: 32px;
}
.peppa-quote--compact .peppa-quote__title {
font-size: 24px;
}
.peppa-quote__text {
font-size: 20px;
line-height: 1.4;
}
.peppa-reviews__row {
padding-right: 3.25rem;
padding-left: 3.25rem;
}
.peppa-reviews__nav {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
height: 2.5rem;
width: 2.5rem;
align-items: center;
justify-content: center;
transform: translateY(-50%);
border-radius: 9999px;
background: rgba(255, 255, 255, 0.16);
color: #fff;
transition: background-color 150ms ease;
}
.peppa-reviews__nav:hover {
background: rgba(255, 255, 255, 0.32);
}
.peppa-reviews__nav--prev {
left: 0;
}
.peppa-reviews__nav--next {
right: 0;
}
}
@media (max-width: 1023px) {
.peppa-bubble {
display: none;
}
.peppa-quote__character {
margin: 0 auto -62px;
}
.peppa-quote__bubble,
.peppa-quote--tall .peppa-quote__bubble,
.peppa-quote--compact .peppa-quote__bubble {
padding-top: 78px;
}
.peppa-quote--plain .peppa-quote__bubble,
.peppa-quote--plain.peppa-quote--tall .peppa-quote__bubble {
padding-top: 40px;
}
}
.not-found {
background-color: var(--bss-section-tint);
}
/* Full-frame band: 1440 canvas + 80px desktop padding. */
.not-found__inner {
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1440px;
flex-direction: column;
align-items: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
text-align: center;
}
@media (min-width: 768px) {
.not-found__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.not-found__inner {
padding: 80px;
}
}
.not-found__code {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 96px;
font-weight: 700;
line-height: 1;
color: var(--bss-sky);
}
@media (min-width: 1024px) {
.not-found__code {
font-size: 160px;
}
}
.not-found__title {
margin-top: 1.5rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.not-found__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.not-found__body {
margin-top: 1.5rem;
max-width: 40rem;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.not-found__actions {
margin-top: 2.5rem;
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
@media (min-width: 640px) {
.not-found__actions {
width: auto;
flex-direction: row;
}
}
/* Full-width pill on mobile, auto width from sm up. */
.not-found__cta {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 40px;
border-width: 2px;
border-color: var(--bss-cta);
background-color: var(--bss-cta);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.not-found__cta:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@media (min-width: 640px) {
.not-found__cta {
width: auto;
}
}
.not-found__cta--outline {
border-color: var(--bss-primary);
background-color: transparent;
color: var(--bss-primary);
}
.blue-wave-section > .not-found__cta--outline:hover {
margin-top: -2px;
}
footer > .not-found__cta--outline:hover {
margin-top: -2px;
}
.not-found__cta--outline:hover {
background-color: var(--bss-primary);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
--tw-brightness: brightness(1);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
/* Full-frame band: 1440 canvas + 80px desktop padding. */
.default-page__inner {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1440px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.default-page__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.default-page__inner {
padding: 80px;
}
}
.default-page__article {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 880px;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1024px) {
.default-page__article {
gap: 2.5rem;
}
}
.default-page__title {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 640px) {
.default-page__title {
font-size: 40px;
}
}
@media (min-width: 1024px) {
.default-page__title {
font-size: 56px;
font-weight: 700;
line-height: 1.1;
}
}
.default-page__content :is(h5, h6) {
margin-top: 2rem;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 18px;
line-height: 1.5;
font-weight: 700;
color: var(--bss-primary);
}
.default-page__content :is(h5, h6) + :is(p, ul, ol) {
margin-top: 0.75rem;
}
.default-page__content :is(blockquote, table, figure, pre, .wp-block-table, .wp-block-image, .wp-block-group, .wp-block-columns) {
margin-top: 2rem;
}
.default-page__content :is(h5, h6, blockquote, table, figure, pre, .wp-block-table, .wp-block-image, .wp-block-group, .wp-block-columns):first-child {
margin-top: 0px;
}
.default-page__content img {
height: auto;
max-width: 100%;
border-radius: 16px;
}
.default-page__content figcaption {
margin-top: 0.5rem;
text-align: center;
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--bss-body);
}
.default-page__content blockquote {
border-left-width: 4px;
border-color: var(--bss-sky);
padding-left: 1.5rem;
font-style: italic;
}
.default-page__content table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 1rem;
line-height: 1.5rem;
}
.default-page__content :is(th, td) {
border-width: 1px;
border-color: var(--bss-border);
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
vertical-align: top;
}
.default-page__content th {
background-color: var(--bss-light-bg);
font-weight: 700;
color: var(--bss-primary);
}
.default-page__content .wp-block-table {
overflow-x: auto;
}
.default-page__content :is(code, pre) {
border-radius: 12px;
background-color: var(--bss-light-bg);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 1rem;
line-height: 1.5rem;
}
.default-page__content code {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.default-page__content pre {
overflow-x: auto;
padding: 1rem;
}
.default-page__content .aligncenter {
margin-left: auto;
margin-right: auto;
}
.default-page__content .alignleft {
margin-bottom: 1rem;
margin-right: 1.5rem;
}
@media (min-width: 768px) {
.default-page__content .alignleft {
float: left;
}
}
.default-page__content .alignright {
margin-bottom: 1rem;
margin-left: 1.5rem;
}
@media (min-width: 768px) {
.default-page__content .alignright {
float: right;
}
}
.default-page__content::after {
content: '';
clear: both;
display: table;
}
.bss-block-style.bss-heading--primary :is(h1, h2, h3, h4):not(.bss-accent) {
color: var(--bss-primary);
}
.bss-block-style.bss-heading--sky :is(h1, h2, h3, h4):not(.bss-accent) {
color: var(--bss-sky);
}
.bss-block-style.bss-heading--white :is(h1, h2, h3, h4):not(.bss-accent) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.bss-block-style.bss-text--body :is(p, li, .loc-search-cta__geo):not(.bss-accent) {
color: var(--bss-body);
}
.bss-block-style.bss-text--primary :is(p, li, .loc-search-cta__geo):not(.bss-accent) {
color: var(--bss-primary);
}
.bss-block-style.bss-text--white :is(p, li, .loc-search-cta__geo):not(.bss-accent) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.bss-block-style.bss-text--white .loc-search-cta__geo:hover {
opacity: 0.8;
}
.bss-block-style.bss-text--white .loc-search-cta__geo img {
filter: brightness(0) invert(1);
}
.bss-block-style.bss-text--white :is(p, li) a {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
text-decoration-line: underline;
}
/* Body copy follows the hero alignment: centered on mobile, left on desktop. */
.mega-programs-grid > div > .meet-team-hero__body :is(p + p) {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.meet-team-hero__body :is(p + p) {
margin-top: 1rem;
}
.team-carousel__inner {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1440px;
flex-direction: column;
align-items: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.team-carousel__inner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (min-width: 1024px) {
.team-carousel__inner {
padding: 80px;
}
}
.team-carousel__title {
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
color: var(--bss-primary);
}
@media (min-width: 1024px) {
.team-carousel__title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
}
.mega-programs-grid > div > .team-carousel__kicker {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.team-carousel__kicker {
margin-top: 1rem;
max-width: 960px;
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.375;
color: var(--bss-cta);
}
@media (min-width: 1024px) {
.team-carousel__kicker {
font-size: 24px;
line-height: 1.3;
font-weight: 600;
}
}
.mega-programs-grid > div > .team-carousel__intro {
display: flex;
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.team-carousel__intro {
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
max-width: 960px;
text-align: center;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
color: var(--bss-body);
}
.team-carousel__stage {
position: relative;
margin-top: 2.5rem;
width: 100%;
}
/* Dots sit on the tint band. The shared dots are white, for navy sections. */
.team-carousel .carousel-dot {
height: 0.625rem;
width: 0.625rem;
--tw-bg-opacity: 1;
background-color: rgb(197 212 232 / var(--tw-bg-opacity, 1));
}
.blue-wave-section > .team-carousel .carousel-dot.is-active {
margin-top: -2px;
}
footer > .team-carousel .carousel-dot.is-active {
margin-top: -2px;
}
.team-carousel .carousel-dot.is-active {
width: 0.625rem;
background-color: var(--bss-primary);
}
.team-card {
flex: 0 0 100cqw;
width: 100cqw;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 16px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
@media (min-width: 640px) {
.team-card {
flex: 0 0 calc((100cqw - 1rem) / 2);
width: calc((100cqw - 1rem) / 2);
}
}
@media (min-width: 1024px) {
.team-card {
flex: 0 0 calc((100cqw - 3rem) / 4);
width: calc((100cqw - 3rem) / 4);
}
}
.team-card__photo {
aspect-ratio: 4/5;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.team-card__name {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
color: var(--bss-primary);
}
.blue-wave-section > .team-card__role {
margin-top: -2px;
}
footer > .team-card__role {
margin-top: -2px;
}
.team-card__role {
margin-top: auto;
display: flex;
min-height: 52px;
align-items: center;
justify-content: center;
background-color: var(--bss-primary);
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 1.375;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Stand-out cards use a 54px icon, matching the location homepage. */
.meet-team-stands-out .icon-feature-cards__inner article img {
height: 54px;
width: auto;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events-auto {
pointer-events: auto;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.collapse {
visibility: collapse;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.-top-14 {
top: -3.5rem;
}
.-top-20 {
top: -5rem;
}
.bottom-0 {
bottom: 0px;
}
.bottom-5 {
bottom: 1.25rem;
}
.left-0 {
left: 0px;
}
.left-1\/2 {
left: 50%;
}
.left-6 {
left: 1.5rem;
}
.right-0 {
right: 0px;
}
.top-0 {
top: 0px;
}
.top-1\/2 {
top: 50%;
}
.top-\[38\%\] {
top: 38%;
}
.top-\[40px\] {
top: 40px;
}
.top-full {
top: 100%;
}
.isolate {
isolation: isolate;
}
.z-0 {
z-index: 0;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-50 {
z-index: 50;
}
.z-\[1\] {
z-index: 1;
}
.z-\[2\] {
z-index: 2;
}
.z-\[5\] {
z-index: 5;
}
.z-\[60\] {
z-index: 60;
}
.z-\[70\] {
z-index: 70;
}
.z-\[90\] {
z-index: 90;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.clear-both {
clear: both;
}
.m-0 {
margin: 0px;
}
.-mx-8 {
margin-left: -2rem;
margin-right: -2rem;
}
.mx-12 {
margin-left: 3rem;
margin-right: 3rem;
}
.mx-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.\!mt-0 {
margin-top: 0px !important;
}
.-mt-3 {
margin-top: -0.75rem;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.mr-6 {
margin-right: 1.5rem;
}
.mt-0 {
margin-top: 0px;
}
.mt-0\.5 {
margin-top: 0.125rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-1\.5 {
margin-top: 0.375rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-32 {
margin-top: 8rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-\[-4\.5rem\] {
margin-top: -4.5rem;
}
.mt-auto {
margin-top: auto;
}
.box-border {
box-sizing: border-box;
}
.line-clamp-4 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.\!flex {
display: flex !important;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.\!grid {
display: grid !important;
}
.grid {
display: grid;
}
.inline-grid {
display: inline-grid;
}
.contents {
display: contents;
}
.hidden {
display: none;
}
.aspect-\[1024\/272\] {
aspect-ratio: 1024/272;
}
.aspect-\[16\/9\] {
aspect-ratio: 16/9;
}
.aspect-\[170\/181\] {
aspect-ratio: 170/181;
}
.aspect-\[21\/10\] {
aspect-ratio: 21/10;
}
.aspect-\[3\/2\] {
aspect-ratio: 3/2;
}
.aspect-\[4\/3\] {
aspect-ratio: 4/3;
}
.aspect-\[4\/5\] {
aspect-ratio: 4/5;
}
.aspect-\[411\/272\] {
aspect-ratio: 411/272;
}
.aspect-\[412\/232\] {
aspect-ratio: 412/232;
}
.aspect-\[542\/277\] {
aspect-ratio: 542/277;
}
.aspect-\[575\/667\] {
aspect-ratio: 575/667;
}
.aspect-\[692\/400\] {
aspect-ratio: 692/400;
}
.aspect-\[696\/240\] {
aspect-ratio: 696/240;
}
.aspect-\[9\/16\] {
aspect-ratio: 9/16;
}
.aspect-video {
aspect-ratio: 16 / 9;
}
.h-0\.5 {
height: 0.125rem;
}
.h-1 {
height: 0.25rem;
}
.h-10 {
height: 2.5rem;
}
.h-12 {
height: 3rem;
}
.h-14 {
height: 3.5rem;
}
.h-16 {
height: 4rem;
}
.h-2\.5 {
height: 0.625rem;
}
.h-20 {
height: 5rem;
}
.h-24 {
height: 6rem;
}
.h-28 {
height: 7rem;
}
.h-3 {
height: 0.75rem;
}
.h-3\.5 {
height: 0.875rem;
}
.h-36 {
height: 9rem;
}
.h-4 {
height: 1rem;
}
.h-5 {
height: 1.25rem;
}
.h-6 {
height: 1.5rem;
}
.h-7 {
height: 1.75rem;
}
.h-8 {
height: 2rem;
}
.h-9 {
height: 2.25rem;
}
.h-\[108px\] {
height: 108px;
}
.h-\[11px\] {
height: 11px;
}
.h-\[120px\] {
height: 120px;
}
.h-\[180px\] {
height: 180px;
}
.h-\[181px\] {
height: 181px;
}
.h-\[18px\] {
height: 18px;
}
.h-\[20px\] {
height: 20px;
}
.h-\[32px\] {
height: 32px;
}
.h-\[360px\] {
height: 360px;
}
.h-\[48px\] {
height: 48px;
}
.h-\[54px\] {
height: 54px;
}
.h-\[667px\] {
height: 667px;
}
.h-\[88px\] {
height: 88px;
}
.h-auto {
height: auto;
}
.h-full {
height: 100%;
}
.h-px {
height: 1px;
}
.max-h-72 {
max-height: 18rem;
}
.max-h-\[320px\] {
max-height: 320px;
}
.max-h-\[88px\] {
max-height: 88px;
}
.max-h-\[88vh\] {
max-height: 88vh;
}
.min-h-0 {
min-height: 0px;
}
.min-h-\[120px\] {
min-height: 120px;
}
.min-h-\[270px\] {
min-height: 270px;
}
.min-h-\[280px\] {
min-height: 280px;
}
.min-h-\[400px\] {
min-height: 400px;
}
.min-h-\[40px\] {
min-height: 40px;
}
.min-h-\[420px\] {
min-height: 420px;
}
.min-h-\[44px\] {
min-height: 44px;
}
.min-h-\[490px\] {
min-height: 490px;
}
.min-h-\[520px\] {
min-height: 520px;
}
.min-h-\[52px\] {
min-height: 52px;
}
.min-h-\[76px\] {
min-height: 76px;
}
.min-h-\[80px\] {
min-height: 80px;
}
.min-h-\[96px\] {
min-height: 96px;
}
.w-0\.5 {
width: 0.125rem;
}
.w-10 {
width: 2.5rem;
}
.w-12 {
width: 3rem;
}
.w-14 {
width: 3.5rem;
}
.w-16 {
width: 4rem;
}
.w-2\.5 {
width: 0.625rem;
}
.w-20 {
width: 5rem;
}
.w-3 {
width: 0.75rem;
}
.w-3\.5 {
width: 0.875rem;
}
.w-4 {
width: 1rem;
}
.w-5 {
width: 1.25rem;
}
.w-6 {
width: 1.5rem;
}
.w-7 {
width: 1.75rem;
}
.w-8 {
width: 2rem;
}
.w-9 {
width: 2.25rem;
}
.w-\[100px\] {
width: 100px;
}
.w-\[150px\] {
width: 150px;
}
.w-\[15px\] {
width: 15px;
}
.w-\[16px\] {
width: 16px;
}
.w-\[17px\] {
width: 17px;
}
.w-\[180px\] {
width: 180px;
}
.w-\[18px\] {
width: 18px;
}
.w-\[240px\] {
width: 240px;
}
.w-\[241px\] {
width: 241px;
}
.w-\[260px\] {
width: 260px;
}
.w-\[26px\] {
width: 26px;
}
.w-\[270px\] {
width: 270px;
}
.w-\[290px\] {
width: 290px;
}
.w-\[328px\] {
width: 328px;
}
.w-\[575px\] {
width: 575px;
}
.w-auto {
width: auto;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full {
width: 100%;
}
.min-w-0 {
min-width: 0px;
}
.min-w-\[10rem\] {
min-width: 10rem;
}
.min-w-\[200px\] {
min-width: 200px;
}
.min-w-\[333px\] {
min-width: 333px;
}
.min-w-\[40px\] {
min-width: 40px;
}
.max-w-5xl {
max-width: 64rem;
}
.max-w-\[1120px\] {
max-width: 1120px;
}
.max-w-\[1216px\] {
max-width: 1216px;
}
.max-w-\[1280px\] {
max-width: 1280px;
}
.max-w-\[1400px\] {
max-width: 1400px;
}
.max-w-\[320px\] {
max-width: 320px;
}
.max-w-\[325px\] {
max-width: 325px;
}
.max-w-\[340px\] {
max-width: 340px;
}
.max-w-\[400px\] {
max-width: 400px;
}
.max-w-\[40rem\] {
max-width: 40rem;
}
.max-w-\[411px\] {
max-width: 411px;
}
.max-w-\[420px\] {
max-width: 420px;
}
.max-w-\[432px\] {
max-width: 432px;
}
.max-w-\[520px\] {
max-width: 520px;
}
.max-w-\[52rem\] {
max-width: 52rem;
}
.max-w-\[600px\] {
max-width: 600px;
}
.max-w-\[640px\] {
max-width: 640px;
}
.max-w-\[680px\] {
max-width: 680px;
}
.max-w-\[720px\] {
max-width: 720px;
}
.max-w-\[740px\] {
max-width: 740px;
}
.max-w-\[760px\] {
max-width: 760px;
}
.max-w-\[800px\] {
max-width: 800px;
}
.max-w-\[860px\] {
max-width: 860px;
}
.max-w-\[866px\] {
max-width: 866px;
}
.max-w-\[880px\] {
max-width: 880px;
}
.max-w-\[900px\] {
max-width: 900px;
}
.max-w-\[920px\] {
max-width: 920px;
}
.max-w-\[960px\] {
max-width: 960px;
}
.max-w-\[980px\] {
max-width: 980px;
}
.max-w-canvas {
max-width: 1440px;
}
.max-w-container {
max-width: 1280px;
}
.max-w-full {
max-width: 100%;
}
.max-w-none {
max-width: none;
}
.max-w-xl {
max-width: 36rem;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-none {
flex: none;
}
.flex-shrink {
flex-shrink: 1;
}
.shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.grow-0 {
flex-grow: 0;
}
.basis-full {
flex-basis: 100%;
}
.table-auto {
table-layout: auto;
}
.table-fixed {
table-layout: fixed;
}
.border-collapse {
border-collapse: collapse;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full {
--tw-translate-x: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1 {
--tw-translate-y: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default {
cursor: default;
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.list-decimal {
list-style-type: decimal;
}
.list-disc {
list-style-type: disc;
}
.list-none {
list-style-type: none;
}
.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
grid-template-columns: minmax(0,1fr) auto;
}
.grid-rows-\[0fr\] {
grid-template-rows: 0fr;
}
.grid-rows-\[1fr\] {
grid-template-rows: 1fr;
}
.grid-rows-none {
grid-template-rows: none;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-items-stretch {
justify-items: stretch;
}
.gap-0 {
gap: 0px;
}
.gap-0\.5 {
gap: 0.125rem;
}
.gap-1 {
gap: 0.25rem;
}
.gap-1\.5 {
gap: 0.375rem;
}
.gap-10 {
gap: 2.5rem;
}
.gap-12 {
gap: 3rem;
}
.gap-16 {
gap: 4rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-2\.5 {
gap: 0.625rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-\[22px\] {
gap: 22px;
}
.gap-section-gap {
gap: 64px;
}
.gap-x-10 {
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
}
.gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.gap-x-4 {
-moz-column-gap: 1rem;
column-gap: 1rem;
}
.gap-x-5 {
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
}
.gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.gap-x-8 {
-moz-column-gap: 2rem;
column-gap: 2rem;
}
.gap-y-1 {
row-gap: 0.25rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.gap-y-24 {
row-gap: 6rem;
}
.gap-y-4 {
row-gap: 1rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.self-start {
align-self: flex-start;
}
.self-center {
align-self: center;
}
.self-stretch {
align-self: stretch;
}
.justify-self-end {
justify-self: end;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.whitespace-normal {
white-space: normal;
}
.whitespace-nowrap {
white-space: nowrap;
}
.text-wrap {
text-wrap: wrap;
}
.break-words {
overflow-wrap: break-word;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-\[20px\] {
border-radius: 20px;
}
.rounded-\[3px\] {
border-radius: 3px;
}
.rounded-card {
border-radius: 24px;
}
.rounded-card-sm {
border-radius: 12px;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-pill {
border-radius: 40px;
}
.rounded-tile {
border-radius: 16px;
}
.rounded-b-\[14px\] {
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
}
.rounded-b-tile {
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
}
.rounded-t-\[14px\] {
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.border {
border-width: 1px;
}
.border-0 {
border-width: 0px;
}
.border-2 {
border-width: 2px;
}
.border-\[1\.5px\] {
border-width: 1.5px;
}
.border-\[3px\] {
border-width: 3px;
}
.border-b {
border-bottom-width: 1px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-b-\[8px\] {
border-bottom-width: 8px;
}
.border-l-2 {
border-left-width: 2px;
}
.border-l-4 {
border-left-width: 4px;
}
.border-t {
border-top-width: 1px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-t-4 {
border-top-width: 4px;
}
.border-solid {
border-style: solid;
}
.border-dashed {
border-style: dashed;
}
.border-black\/5 {
border-color: rgb(0 0 0 / 0.05);
}
.border-border {
border-color: var(--bss-border);
}
.border-cta {
border-color: var(--bss-cta);
}
.border-field-border {
border-color: var(--bss-field-border);
}
.border-primary {
border-color: var(--bss-primary);
}
.border-search-border {
border-color: var(--bss-search-border);
}
.border-sky {
border-color: var(--bss-sky);
}
.border-transparent {
border-color: transparent;
}
.border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/15 {
border-color: rgb(255 255 255 / 0.15);
}
.bg-\[\#C5D4E8\] {
--tw-bg-opacity: 1;
background-color: rgb(197 212 232 / var(--tw-bg-opacity, 1));
}
.bg-\[\#b8c9de\] {
--tw-bg-opacity: 1;
background-color: rgb(184 201 222 / var(--tw-bg-opacity, 1));
}
.bg-\[\#dfeaf5\] {
--tw-bg-opacity: 1;
background-color: rgb(223 234 245 / var(--tw-bg-opacity, 1));
}
.bg-\[rgba\(19\2c 46\2c 171\2c 0\.4\)\] {
background-color: rgba(19,46,171,0.4);
}
.bg-\[rgba\(9\2c 18\2c 48\2c 0\.6\)\] {
background-color: rgba(9,18,48,0.6);
}
.bg-cta {
background-color: var(--bss-cta);
}
.bg-current {
background-color: currentColor;
}
.bg-light-bg {
background-color: var(--bss-light-bg);
}
.bg-more-blue {
background-color: var(--bss-primary);
}
.bg-more-orange {
--tw-bg-opacity: 1;
background-color: rgb(243 121 33 / var(--tw-bg-opacity, 1));
}
.bg-more-purple {
--tw-bg-opacity: 1;
background-color: rgb(144 42 141 / var(--tw-bg-opacity, 1));
}
.bg-more-teal {
--tw-bg-opacity: 1;
background-color: rgb(0 180 188 / var(--tw-bg-opacity, 1));
}
.bg-more-yellow {
--tw-bg-opacity: 1;
background-color: rgb(250 185 23 / var(--tw-bg-opacity, 1));
}
.bg-panel-bg {
background-color: var(--bss-panel-bg);
}
.bg-primary {
background-color: var(--bss-primary);
}
.bg-section-tint {
background-color: var(--bss-section-tint);
}
.bg-sky {
background-color: var(--bss-sky);
}
.bg-slate-300 {
--tw-bg-opacity: 1;
background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-star {
background-color: var(--bss-star);
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/90 {
background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95 {
background-color: rgb(255 255 255 / 0.95);
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.object-right {
-o-object-position: right;
object-position: right;
}
.p-0 {
padding: 0px;
}
.p-1 {
padding: 0.25rem;
}
.p-1\.5 {
padding: 0.375rem;
}
.p-2 {
padding: 0.5rem;
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-6 {
padding: 1.5rem;
}
.p-\[18px\] {
padding: 18px;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.px-1\.5 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-7 {
padding-left: 1.75rem;
padding-right: 1.75rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-\[10px\] {
padding-left: 10px;
padding-right: 10px;
}
.px-\[18px\] {
padding-left: 18px;
padding-right: 18px;
}
.px-\[22px\] {
padding-left: 22px;
padding-right: 22px;
}
.px-\[70px\] {
padding-left: 70px;
padding-right: 70px;
}
.py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-3\.5 {
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-7 {
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-\[3px\] {
padding-top: 3px;
padding-bottom: 3px;
}
.py-section {
padding-top: 80px;
padding-bottom: 80px;
}
.py-section-gap {
padding-top: 64px;
padding-bottom: 64px;
}
.pb-0 {
padding-bottom: 0px;
}
.pb-10 {
padding-bottom: 2.5rem;
}
.pb-12 {
padding-bottom: 3rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-20 {
padding-bottom: 5rem;
}
.pb-24 {
padding-bottom: 6rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-5 {
padding-bottom: 1.25rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pb-\[18px\] {
padding-bottom: 18px;
}
.pb-\[300px\] {
padding-bottom: 300px;
}
.pl-10 {
padding-left: 2.5rem;
}
.pl-20 {
padding-left: 5rem;
}
.pl-3 {
padding-left: 0.75rem;
}
.pl-3\.5 {
padding-left: 0.875rem;
}
.pl-5 {
padding-left: 1.25rem;
}
.pl-6 {
padding-left: 1.5rem;
}
.pl-7 {
padding-left: 1.75rem;
}
.pl-\[26px\] {
padding-left: 26px;
}
.pl-\[4\.75rem\] {
padding-left: 4.75rem;
}
.pr-0 {
padding-right: 0px;
}
.pt-0 {
padding-top: 0px;
}
.pt-10 {
padding-top: 2.5rem;
}
.pt-12 {
padding-top: 3rem;
}
.pt-14 {
padding-top: 3.5rem;
}
.pt-16 {
padding-top: 4rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-24 {
padding-top: 6rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pt-8 {
padding-top: 2rem;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
}
.\!text-\[24px\] {
font-size: 24px !important;
}
.\!text-chrome {
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
}
.text-\[10px\] {
font-size: 10px;
}
.text-\[11px\] {
font-size: 11px;
}
.text-\[12px\] {
font-size: 12px;
}
.text-\[13px\] {
font-size: 13px;
}
.text-\[14px\] {
font-size: 14px;
}
.text-\[15px\] {
font-size: 15px;
}
.text-\[16px\] {
font-size: 16px;
}
.text-\[18px\] {
font-size: 18px;
}
.text-\[20px\] {
font-size: 20px;
}
.text-\[22px\] {
font-size: 22px;
}
.text-\[24px\] {
font-size: 24px;
}
.text-\[26px\] {
font-size: 26px;
}
.text-\[28px\] {
font-size: 28px;
}
.text-\[30px\] {
font-size: 30px;
}
.text-\[32px\] {
font-size: 32px;
}
.text-\[34px\] {
font-size: 34px;
}
.text-\[36px\] {
font-size: 36px;
}
.text-\[40px\] {
font-size: 40px;
}
.text-\[96px\] {
font-size: 96px;
}
.text-chrome {
font-size: 16px;
line-height: 1.5;
font-weight: 500;
}
.text-copy {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
}
.text-h2 {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
.text-h3 {
font-size: 24px;
line-height: 1.3;
font-weight: 600;
}
.text-h4 {
font-size: 22px;
line-height: 1.3;
font-weight: 700;
}
.text-label {
font-size: 16px;
line-height: 1.4;
font-weight: 700;
}
.text-lead {
font-size: 32px;
line-height: 1.3;
font-weight: 600;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-subhead {
font-size: 20px;
line-height: 1.3;
font-weight: 600;
}
.text-subhead-lg {
font-size: 30px;
line-height: 1.3;
font-weight: 600;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.\!font-bold {
font-weight: 700 !important;
}
.font-bold {
font-weight: 700;
}
.font-extrabold {
font-weight: 800;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.not-italic {
font-style: normal;
}
.\!leading-\[1\.3\] {
line-height: 1.3 !important;
}
.leading-6 {
line-height: 1.5rem;
}
.leading-\[1\.12\] {
line-height: 1.12;
}
.leading-\[1\.15\] {
line-height: 1.15;
}
.leading-\[1\.25\] {
line-height: 1.25;
}
.leading-\[1\.2\] {
line-height: 1.2;
}
.leading-\[1\.3\] {
line-height: 1.3;
}
.leading-\[1\.5\] {
line-height: 1.5;
}
.leading-none {
line-height: 1;
}
.leading-normal {
line-height: 1.5;
}
.leading-relaxed {
line-height: 1.625;
}
.leading-snug {
line-height: 1.375;
}
.leading-tight {
line-height: 1.25;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.text-\[\#5f6368\] {
--tw-text-opacity: 1;
color: rgb(95 99 104 / var(--tw-text-opacity, 1));
}
.text-\[\#8a97b8\] {
--tw-text-opacity: 1;
color: rgb(138 151 184 / var(--tw-text-opacity, 1));
}
.text-\[\#8a97d4\] {
--tw-text-opacity: 1;
color: rgb(138 151 212 / var(--tw-text-opacity, 1));
}
.text-\[\#FFDC27\] {
--tw-text-opacity: 1;
color: rgb(255 220 39 / var(--tw-text-opacity, 1));
}
.text-body {
color: var(--bss-body);
}
.text-cta {
color: var(--bss-cta);
}
.text-inherit {
color: inherit;
}
.text-primary {
color: var(--bss-primary);
}
.text-sky {
color: var(--bss-sky);
}
.text-slate-600 {
--tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/40 {
color: rgb(255 255 255 / 0.4);
}
.text-white\/60 {
color: rgb(255 255 255 / 0.6);
}
.text-white\/80 {
color: rgb(255 255 255 / 0.8);
}
.text-white\/85 {
color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
color: rgb(255 255 255 / 0.9);
}
.underline {
text-decoration-line: underline;
}
.no-underline {
text-decoration-line: none;
}
.underline-offset-2 {
text-underline-offset: 2px;
}
.underline-offset-4 {
text-underline-offset: 4px;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.accent-cta {
accent-color: var(--bss-cta);
}
.opacity-0 {
opacity: 0;
}
.opacity-45 {
opacity: 0.45;
}
.opacity-80 {
opacity: 0.8;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_2px_14px_rgba\(19\2c 46\2c 171\2c 0\.10\)\] {
--tw-shadow: 0 2px 14px rgba(19,46,171,0.10);
--tw-shadow-colored: 0 2px 14px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_24px_rgba\(19\2c 46\2c 171\2c 0\.08\)\] {
--tw-shadow: 0 4px 24px rgba(19,46,171,0.08);
--tw-shadow-colored: 0 4px 24px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_24px_rgba\(19\2c 46\2c 171\2c 0\.12\)\] {
--tw-shadow: 0 4px 24px rgba(19,46,171,0.12);
--tw-shadow-colored: 0 4px 24px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_24px_rgba\(19\2c 46\2c 171\2c 0\.16\)\] {
--tw-shadow: 0 8px 24px rgba(19,46,171,0.16);
--tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline {
outline-style: solid;
}
.outline-2 {
outline-width: 2px;
}
.outline-offset-2 {
outline-offset: 2px;
}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-primary {
--tw-ring-color: var(--bss-primary);
}
.ring-offset-2 {
--tw-ring-offset-width: 2px;
}
.drop-shadow {
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
--tw-invert: invert(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[grid-template-rows\] {
transition-property: grid-template-rows;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-150 {
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.duration-300 {
transition-duration: 300ms;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Screen-reader helper used by PoC page template. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/**
* Design tokens — aligned with the static frontend preview
* (themes/bss_design/preview/src/input.css :root).
*/
/*
* Legacy two-column price. Kept outside @layer so a utility cannot turn the
* row into a stack. Translations often drop the class; the inline style on
* the same element is set in bss_pool_pricing_restore_unit_class().
*/
.price_card_unit {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
gap: 60px;
width: 100%;
text-align: center;
}
.price_card_unit > div {
flex: 1 1 0;
min-width: 0;
}
.blue-wave-section > .hover\:bg-primary:hover {
margin-top: -2px;
}
footer > .hover\:bg-primary:hover {
margin-top: -2px;
}
@media (min-width: 1024px) {
.lg\:hidden.enroll-form__error {
display: none;
}
}
.placeholder\:text-\[\#9aa3b2\]::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(154 163 178 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#9aa3b2\]::placeholder {
--tw-text-opacity: 1;
color: rgb(154 163 178 / var(--tw-text-opacity, 1));
}
.placeholder\:text-primary::-moz-placeholder {
color: var(--bss-primary);
}
.placeholder\:text-primary::placeholder {
color: var(--bss-primary);
}
.hover\:border-primary:hover {
border-color: var(--bss-primary);
}
.hover\:bg-\[\#e3f2fa\]:hover {
--tw-bg-opacity: 1;
background-color: rgb(227 242 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-light-bg:hover {
background-color: var(--bss-light-bg);
}
.hover\:bg-primary:hover {
background-color: var(--bss-primary);
}
.hover\:bg-section-tint:hover {
background-color: var(--bss-section-tint);
}
.hover\:bg-white\/25:hover {
background-color: rgb(255 255 255 / 0.25);
}
.hover\:text-cta:hover {
color: var(--bss-cta);
}
.hover\:text-primary:hover {
color: var(--bss-primary);
}
.hover\:text-sky:hover {
color: var(--bss-sky);
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-white\/80:hover {
color: rgb(255 255 255 / 0.8);
}
.hover\:underline:hover {
text-decoration-line: underline;
}
.hover\:no-underline:hover {
text-decoration-line: none;
}
.hover\:opacity-80:hover {
opacity: 0.8;
}
.hover\:brightness-105:hover {
--tw-brightness: brightness(1.05);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:brightness-95:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:brightness-\[0\.98\]:hover {
--tw-brightness: brightness(0.98);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.focus\:border-primary:focus {
border-color: var(--bss-primary);
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
@media (min-width: 640px) {
.sm\:col-span-2 {
grid-column: span 2 / span 2;
}
.sm\:col-start-2 {
grid-column-start: 2;
}
.sm\:row-span-4 {
grid-row: span 4 / span 4;
}
.sm\:row-start-1 {
grid-row-start: 1;
}
.sm\:mx-14 {
margin-left: 3.5rem;
margin-right: 3.5rem;
}
.sm\:inline {
display: inline;
}
.sm\:h-\[460px\] {
height: 460px;
}
.sm\:h-\[92px\] {
height: 92px;
}
.sm\:w-\[108px\] {
width: 108px;
}
.sm\:w-\[300px\] {
width: 300px;
}
.sm\:w-\[360px\] {
width: 360px;
}
.sm\:w-\[calc\(50\%-12px\)\] {
width: calc(50% - 12px);
}
.sm\:w-auto {
width: auto;
}
.sm\:min-w-\[220px\] {
min-width: 220px;
}
.sm\:max-w-\[360px\] {
max-width: 360px;
}
.sm\:max-w-\[420px\] {
max-width: 420px;
}
.sm\:basis-\[calc\(\(100\%_-_1\.5rem\)\/2\)\] {
flex-basis: calc((100% - 1.5rem) / 2);
}
.sm\:basis-\[calc\(\(100\%_-_1rem\)\/2\)\] {
flex-basis: calc((100% - 1rem) / 2);
}
.sm\:basis-full {
flex-basis: 100%;
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sm\:grid-cols-\[1fr_auto\] {
grid-template-columns: 1fr auto;
}
.sm\:flex-row {
flex-direction: row;
}
.sm\:flex-wrap {
flex-wrap: wrap;
}
.sm\:items-start {
align-items: flex-start;
}
.sm\:items-center {
align-items: center;
}
.sm\:justify-center {
justify-content: center;
}
.sm\:justify-between {
justify-content: space-between;
}
.sm\:gap-2 {
gap: 0.5rem;
}
.sm\:gap-3 {
gap: 0.75rem;
}
.sm\:gap-6 {
gap: 1.5rem;
}
.sm\:whitespace-nowrap {
white-space: nowrap;
}
.sm\:p-1\.5 {
padding: 0.375rem;
}
.sm\:p-6 {
padding: 1.5rem;
}
.sm\:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.sm\:px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.sm\:px-7 {
padding-left: 1.75rem;
padding-right: 1.75rem;
}
.sm\:py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.sm\:py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.sm\:py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.sm\:pb-\[380px\] {
padding-bottom: 380px;
}
.sm\:pl-24 {
padding-left: 6rem;
}
.sm\:pl-6 {
padding-left: 1.5rem;
}
.sm\:text-\[11px\] {
font-size: 11px;
}
.sm\:text-\[13px\] {
font-size: 13px;
}
.sm\:text-\[14px\] {
font-size: 14px;
}
.sm\:text-\[15px\] {
font-size: 15px;
}
.sm\:text-\[20px\] {
font-size: 20px;
}
.sm\:text-\[24px\] {
font-size: 24px;
}
.sm\:text-\[26px\] {
font-size: 26px;
}
.sm\:text-\[28px\] {
font-size: 28px;
}
.sm\:text-\[32px\] {
font-size: 32px;
}
.sm\:text-\[40px\] {
font-size: 40px;
}
.sm\:text-\[44px\] {
font-size: 44px;
}
.sm\:text-h2 {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
.sm\:text-label {
font-size: 16px;
line-height: 1.4;
font-weight: 700;
}
}
@media (min-width: 768px) {
.md\:mx-10 {
margin-left: 2.5rem;
margin-right: 2.5rem;
}
.md\:flex {
display: flex;
}
.md\:h-20 {
height: 5rem;
}
.md\:w-\[calc\(50\%-12px\)\] {
width: calc(50% - 12px);
}
.md\:basis-\[calc\(\(100\%_-_3rem\)\/3\)\] {
flex-basis: calc((100% - 3rem) / 3);
}
.md\:table-fixed {
table-layout: fixed;
}
.md\:gap-5 {
gap: 1.25rem;
}
.md\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.md\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.md\:py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.md\:pt-16 {
padding-top: 4rem;
}
}
@media (min-width: 1024px) {
.lg\:absolute {
position: absolute;
}
.lg\:inset-0 {
inset: 0px;
}
.lg\:-left-2 {
left: -0.5rem;
}
.lg\:-right-2 {
right: -0.5rem;
}
.lg\:bottom-10 {
bottom: 2.5rem;
}
.lg\:bottom-12 {
bottom: 3rem;
}
.lg\:bottom-auto {
bottom: auto;
}
.lg\:left-10 {
left: 2.5rem;
}
.lg\:left-8 {
left: 2rem;
}
.lg\:left-auto {
left: auto;
}
.lg\:right-12 {
right: 3rem;
}
.lg\:right-8 {
right: 2rem;
}
.lg\:top-1\/2 {
top: 50%;
}
.lg\:top-8 {
top: 2rem;
}
.lg\:col-span-3 {
grid-column: span 3 / span 3;
}
.lg\:col-span-4 {
grid-column: span 4 / span 4;
}
.lg\:col-span-9 {
grid-column: span 9 / span 9;
}
.lg\:mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.lg\:-mt-\[18px\] {
margin-top: -18px;
}
.lg\:ml-12 {
margin-left: 3rem;
}
.lg\:mr-0 {
margin-right: 0px;
}
.lg\:mt-0 {
margin-top: 0px;
}
.lg\:mt-10 {
margin-top: 2.5rem;
}
.lg\:mt-14 {
margin-top: 3.5rem;
}
.lg\:mt-\[5\.5rem\] {
margin-top: 5.5rem;
}
.lg\:block {
display: block;
}
.lg\:flex {
display: flex;
}
.lg\:grid {
display: grid;
}
.lg\:hidden {
display: none;
}
.lg\:h-\[114px\] {
height: 114px;
}
.lg\:h-\[34px\] {
height: 34px;
}
.lg\:h-\[38px\] {
height: 38px;
}
.lg\:h-\[884px\] {
height: 884px;
}
.lg\:min-h-0 {
min-height: 0px;
}
.lg\:min-h-\[2\.25rem\] {
min-height: 2.25rem;
}
.lg\:min-h-\[300px\] {
min-height: 300px;
}
.lg\:min-h-\[429px\] {
min-height: 429px;
}
.lg\:min-h-\[460px\] {
min-height: 460px;
}
.lg\:min-h-\[560px\] {
min-height: 560px;
}
.lg\:min-h-\[600px\] {
min-height: 600px;
}
.lg\:w-1\/2 {
width: 50%;
}
.lg\:w-\[170px\] {
width: 170px;
}
.lg\:w-\[36\%\] {
width: 36%;
}
.lg\:w-\[377px\] {
width: 377px;
}
.lg\:w-\[449px\] {
width: 449px;
}
.lg\:w-\[48\%\] {
width: 48%;
}
.lg\:w-\[480px\] {
width: 480px;
}
.lg\:w-\[52\%\] {
width: 52%;
}
.lg\:w-\[520px\] {
width: 520px;
}
.lg\:w-\[542px\] {
width: 542px;
}
.lg\:w-\[575px\] {
width: 575px;
}
.lg\:w-\[750px\] {
width: 750px;
}
.lg\:w-\[calc\(33\.333\%-16px\)\] {
width: calc(33.333% - 16px);
}
.lg\:w-\[min\(26rem\2c calc\(100\%-4rem\)\)\] {
width: min(26rem, calc(100% - 4rem));
}
.lg\:w-auto {
width: auto;
}
.lg\:w-full {
width: 100%;
}
.lg\:max-w-\[1280px\] {
max-width: 1280px;
}
.lg\:max-w-\[1365px\] {
max-width: 1365px;
}
.lg\:max-w-\[50\%\] {
max-width: 50%;
}
.lg\:max-w-\[560px\] {
max-width: 560px;
}
.lg\:max-w-\[640px\] {
max-width: 640px;
}
.lg\:max-w-\[720px\] {
max-width: 720px;
}
.lg\:max-w-\[750px\] {
max-width: 750px;
}
.lg\:max-w-none {
max-width: none;
}
.lg\:max-w-xl {
max-width: 36rem;
}
.lg\:flex-1 {
flex: 1 1 0%;
}
.lg\:flex-none {
flex: none;
}
.lg\:shrink-0 {
flex-shrink: 0;
}
.lg\:basis-\[calc\(\(100\%_-_4\.5rem\)\/4\)\] {
flex-basis: calc((100% - 4.5rem) / 4);
}
.lg\:basis-auto {
flex-basis: auto;
}
.lg\:-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.lg\:columns-2 {
-moz-columns: 2;
columns: 2;
}
.lg\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lg\:grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.lg\:grid-cols-\[3fr_2fr\] {
grid-template-columns: 3fr 2fr;
}
.lg\:grid-cols-\[42fr_58fr\] {
grid-template-columns: 42fr 58fr;
}
.lg\:grid-cols-\[max-content_max-content_max-content\] {
grid-template-columns: max-content max-content max-content;
}
.lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 600px\)\] {
grid-template-columns: minmax(0,1fr) minmax(0,600px);
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:flex-nowrap {
flex-wrap: nowrap;
}
.lg\:items-start {
align-items: flex-start;
}
.lg\:items-center {
align-items: center;
}
.lg\:items-stretch {
align-items: stretch;
}
.lg\:justify-start {
justify-content: flex-start;
}
.lg\:justify-end {
justify-content: flex-end;
}
.lg\:justify-center {
justify-content: center;
}
.lg\:justify-between {
justify-content: space-between;
}
.lg\:gap-10 {
gap: 2.5rem;
}
.lg\:gap-12 {
gap: 3rem;
}
.lg\:gap-16 {
gap: 4rem;
}
.lg\:gap-20 {
gap: 5rem;
}
.lg\:gap-3 {
gap: 0.75rem;
}
.lg\:gap-5 {
gap: 1.25rem;
}
.lg\:gap-6 {
gap: 1.5rem;
}
.lg\:gap-8 {
gap: 2rem;
}
.lg\:gap-\[100px\] {
gap: 100px;
}
.lg\:gap-\[18px\] {
gap: 18px;
}
.lg\:gap-section-gap {
gap: 64px;
}
.lg\:gap-x-10 {
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
}
.lg\:gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.lg\:gap-x-\[100px\] {
-moz-column-gap: 100px;
column-gap: 100px;
}
.lg\:self-start {
align-self: flex-start;
}
.lg\:overflow-visible {
overflow: visible;
}
.lg\:whitespace-nowrap {
white-space: nowrap;
}
.lg\:p-6 {
padding: 1.5rem;
}
.lg\:p-section {
padding: 80px;
}
.lg\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.lg\:px-section {
padding-left: 80px;
padding-right: 80px;
}
.lg\:py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.lg\:py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.lg\:py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.lg\:py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.lg\:pb-0 {
padding-bottom: 0px;
}
.lg\:pb-20 {
padding-bottom: 5rem;
}
.lg\:pb-section {
padding-bottom: 80px;
}
.lg\:pl-10 {
padding-left: 2.5rem;
}
.lg\:pl-\[5\.5rem\] {
padding-left: 5.5rem;
}
.lg\:pr-10 {
padding-right: 2.5rem;
}
.lg\:pr-14 {
padding-right: 3.5rem;
}
.lg\:pr-8 {
padding-right: 2rem;
}
.lg\:pt-20 {
padding-top: 5rem;
}
.lg\:pt-24 {
padding-top: 6rem;
}
.lg\:pt-8 {
padding-top: 2rem;
}
.lg\:pt-section {
padding-top: 80px;
}
.lg\:text-left {
text-align: left;
}
.lg\:text-\[13px\] {
font-size: 13px;
}
.lg\:text-\[160px\] {
font-size: 160px;
}
.lg\:text-\[20px\] {
font-size: 20px;
}
.lg\:text-\[22px\] {
font-size: 22px;
}
.lg\:text-\[30px\] {
font-size: 30px;
}
.lg\:text-\[32px\] {
font-size: 32px;
}
.lg\:text-h1 {
font-size: 56px;
line-height: 1.1;
font-weight: 700;
}
.lg\:text-h2 {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
.lg\:text-h3 {
font-size: 24px;
line-height: 1.3;
font-weight: 600;
}
.lg\:leading-\[1\.1\] {
line-height: 1.1;
}
.lg\:leading-snug {
line-height: 1.375;
}
}
@media (min-width: 1280px) {
.xl\:order-1 {
order: 1;
}
.xl\:order-2 {
order: 2;
}
.xl\:h-\[277px\] {
height: 277px;
}
.xl\:w-\[540px\] {
width: 540px;
}
.xl\:w-\[542px\] {
width: 542px;
}
.xl\:w-auto {
width: auto;
}
.xl\:max-w-\[48\%\] {
max-width: 48%;
}
.xl\:max-w-\[642px\] {
max-width: 642px;
}
.xl\:flex-row {
flex-direction: row;
}
.xl\:items-center {
align-items: center;
}
.xl\:pl-14 {
padding-left: 3.5rem;
}
.xl\:pl-16 {
padding-left: 4rem;
}
.xl\:pr-16 {
padding-right: 4rem;
}
}