/*
Theme Name: SundaraHomes
Theme URI: https://bluebonnetresidences.com
Author: Ragunanthanan P A
Description: A pixel-faithful custom WordPress theme for the Sundara Centenarian Ecosystem — a luxury residential community whose flagship property is Bluebonnet. Built from the Claude Design handoff prototype. Home and Property page content is managed through Secure Custom Fields (SCF).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sundarahomes
*/
/* ==========================================================================
1. Reset & tokens
========================================================================== */
/* Skins (Appearance → Theme Settings → Design) override these on .
Semantics matter for the dark skins to work:
--bb-ink body text, and the colour of "ink-coloured" type
--bb-cream the default page surface
--bb-white the alternate ("white") section surface, and card surfaces
--bb-dark a surface that is dark in EVERY skin (footer, solid buttons,
amenity hover). Text on it is always literal #FFFFFF, which
is why those rules don't use --bb-ink.
--bb-on-accent text placed on top of --bb-gold
--bb-radius corner rounding, 0 in the default square-cornered skin */
:root {
--bb-ink: #111111;
--bb-cream: #F8F7F4;
--bb-white: #FFFFFF;
--bb-dark: #111111;
--bb-gold: #C8B273;
/* --bb-gold is ~2.1:1 on cream/white — fine for buttons/borders but fails
WCAG AA (4.5:1) as body-size text. This darker shade is for gold TEXT
sitting directly on a light section background only. */
--bb-gold-text: #8A6D2F;
--bb-on-accent: #111111;
--bb-muted: #666666;
--bb-dim: #999999;
--bb-line: #E8E5DF;
--bb-radius: 0px;
--bb-font-serif: 'Cormorant Garamond', Georgia, serif;
--bb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; }
/* A grid item defaults to min-width:auto, so it refuses to shrink below the
min-content width of what it holds — one wide table or an unbroken URL and
the whole track, and the row beside it, grows past the viewport. Letting
items shrink is what allows their own overflow handling to take effect. */
.bb-two-col > *, .bb-chapter > *, .bb-cards > *, .bb-team > *,
.bb-featured-grid > *, .bb-split > *, .bb-location-grid > *,
.bb-floorplan-panels > *, .bb-floorplan-panel > *,
.bb-stats-grid > *, .bb-amenities-grid > *, .bb-footer-grid > * { min-width: 0; }
html { scroll-behavior: smooth; }
/* Nothing in this design is meant to scroll sideways. Without this a single
over-wide child (a hero video, a wide image) drags the whole layout wider
than the device and every centred section shifts off-screen on mobile. */
html, body { overflow-x: hidden; max-width: 100%; }
body {
margin: 0;
background: var(--bb-cream);
color: var(--bb-ink);
font-family: var(--bb-font-sans);
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--bb-gold); color: var(--bb-ink); }
@keyframes bbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bbFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bbSlideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.bb-container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.bb-container--narrow { max-width: 1300px; }
.bb-container--form { max-width: 1400px; margin: 0 auto; }
/* ==========================================================================
2. Header
========================================================================== */
.bb-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: transparent;
box-shadow: none;
padding: 32px 0;
transition: background 0.5s ease, box-shadow 0.5s ease, padding 0.5s ease;
}
.bb-header.is-scrolled {
background: var(--bb-white);
box-shadow: 0 2px 24px rgba(0,0,0,0.06);
padding: 18px 0;
}
.bb-header.is-scrolled .bb-header-text,
.bb-header.is-scrolled .bb-logo,
.bb-header.is-scrolled .bb-nav a,
.bb-header.is-scrolled .bb-search-icon,
.bb-header.is-scrolled .bb-burger span { color: var(--bb-ink); }
.bb-header.is-scrolled .bb-burger span,
.bb-header.is-scrolled .bb-hamburger-line { background: var(--bb-ink); }
.bb-header.is-scrolled .bb-enquire-btn { border-color: var(--bb-ink); color: var(--bb-ink); }
.bb-header-inner-grid {
max-width: 1500px; margin: 0 auto;
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
padding: 0 clamp(20px, 4vw, 48px); gap: 16px;
}
.bb-header-inner-flex {
max-width: 1400px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 0 clamp(20px, 4vw, 48px);
}
.bb-logo {
font-family: var(--bb-font-serif); font-size: clamp(22px, 3vw, 28px);
letter-spacing: 3px; font-weight: 500; color: #FFFFFF;
text-decoration: none; transition: color 0.5s ease; justify-self: center;
}
.bb-menu-toggle {
display: flex; align-items: center; gap: 12px; background: none; border: none;
cursor: pointer; padding: 4px 0; color: #FFFFFF; transition: opacity 0.3s ease;
}
.bb-menu-toggle:hover { opacity: 0.65; }
.bb-menu-toggle .bb-hamburger-line { display: block; width: 22px; height: 1px; background: #FFFFFF; margin-bottom: 5px; }
.bb-menu-toggle .bb-hamburger-line:last-child { margin-bottom: 0; }
.bb-menu-label { font-size: 13px; letter-spacing: 1px; color: #FFFFFF; }
.bb-header-left { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); justify-self: start; }
.bb-header-right { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 32px); justify-self: end; }
.bb-lang { font-size: 13px; letter-spacing: 0.5px; color: #FFFFFF; border-bottom: 1px solid #FFFFFF; padding-bottom: 2px; }
.bb-search-icon { opacity: 0.9; color: #FFFFFF; }
/* Logo image ------------------------------------------------------------- */
/* The header sits transparent over the dark hero, then flips to a solid white
bar on scroll. A dark logo only reads against the solid state, so the dark
and light versions are stacked and cross-faded with the header itself. */
.bb-logo.has-image { position: relative; display: inline-block; line-height: 0; }
.bb-logo-img {
display: block; width: auto; height: var(--bb-logo-h, 52px);
transition: height 0.5s ease, opacity 0.5s ease;
}
.bb-logo-img--light { position: absolute; top: 0; left: 0; }
/* Fallback when no dedicated light asset was uploaded. */
.bb-logo-img--light.is-filtered { filter: brightness(0) invert(1); }
/* Transparent header (over hero): show the light logo. */
.bb-logo-img--dark { opacity: 0; }
.bb-logo-img--light { opacity: 1; }
/* Solid header (scrolled): show the dark logo, slightly smaller. */
.bb-header.is-scrolled .bb-logo-img--dark { opacity: 1; }
.bb-header.is-scrolled .bb-logo-img--light { opacity: 0; }
.bb-header.is-scrolled .bb-logo-img { height: calc(var(--bb-logo-h, 52px) * 0.78); }
@media (max-width: 760px) {
.bb-logo-img { height: calc(var(--bb-logo-h, 52px) * 0.72); }
.bb-header.is-scrolled .bb-logo-img { height: calc(var(--bb-logo-h, 52px) * 0.6); }
}
/* Fluid gap: the nav carries six items and only appears above 1080px, where a
fixed 44px gap leaves it flush against the logo on one side and the enquiry
button on the other. */
.bb-nav { display: flex; gap: clamp(22px, 3.2vw, 44px); }
.bb-nav a { text-decoration: none; font-size: 13px; letter-spacing: 1.5px; color: #FFFFFF; }
.bb-nav a:hover { opacity: 0.6; }
/* Strip default list markers/indent from wp_nav_menu items. */
.bb-nav ul, .bb-nav li { list-style: none; margin: 0; padding: 0; }
/* wp_nav_menu() always wraps its items in a (valid list markup for
screen readers); display:contents makes that wrapper invisible to layout so
the - s become direct children of whichever flex container it sits in —
nav, mobile menu, or footer links/legal — matching the old plain- markup. */
.bb-menu-list { display: contents; }
.bb-btn {
display: inline-block; background: var(--bb-dark); color: #FFFFFF !important;
padding: 13px 28px; font-size: 12px; letter-spacing: 1.5px; text-decoration: none;
border: none; cursor: pointer; transition: background 0.3s ease; font-family: var(--bb-font-sans);
border-radius: var(--bb-radius);
}
.bb-btn:hover { background: var(--bb-gold); color: var(--bb-on-accent) !important; }
.bb-btn--gold { background: var(--bb-gold); color: var(--bb-on-accent) !important; padding: 18px 42px; font-size: 12px; border-radius: var(--bb-radius); }
.bb-btn--gold:hover { background: #FFFFFF; color: #111111 !important; }
.bb-btn--outline {
display: inline-block; border: 1px solid rgba(255,255,255,0.6); color: #FFFFFF !important;
padding: 17px 42px; text-decoration: none; font-size: 12px; letter-spacing: 2px; font-weight: 500;
transition: all 0.3s ease; background: transparent;
}
.bb-btn--outline:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.1); }
.bb-btn--outline-dark {
display: inline-block; border: 1px solid var(--bb-ink); color: var(--bb-ink) !important;
padding: 12px 30px; font-size: 12px; letter-spacing: 1.5px; text-decoration: none; transition: all 0.3s ease;
}
.bb-btn--outline-dark:hover { background: var(--bb-gold); border-color: var(--bb-gold); color: var(--bb-ink) !important; }
.bb-enquire-btn { color: #FFFFFF; border-color: #FFFFFF; }
.bb-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.bb-burger span { display: block; width: 26px; height: 1px; background: #FFFFFF; }
/* Six nav items, a logo and the enquiry button stop fitting comfortably on one
row a little above the old 1080px cut-off — they were ending up flush
against each other. Hand over to the burger slightly earlier instead. */
@media (max-width: 1180px) {
.bb-nav, .bb-enquire-btn { display: none !important; }
.bb-burger { display: flex !important; }
}
@media (max-width: 780px) {
.bb-menu-label, .bb-lang { display: none !important; }
}
/* The front-page header is a 1fr auto 1fr grid, so the logo lockup and the
enquiry button compete for the same row on a phone. Tighten both rather
than dropping the call to action. */
@media (max-width: 600px) {
/* 1fr auto 1fr forces the two side columns to match, so the wide enquiry
button reserves the same space again on the left and crushes the logo.
Flex lets all three take their natural width instead. */
.bb-header-inner-grid {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 0 16px;
}
.bb-header-inner-grid .bb-btn {
padding: 10px 14px; font-size: 10px; letter-spacing: 1px; white-space: nowrap;
}
.bb-search-icon { display: none; }
.bb-logo-img { height: 38px; }
.bb-header.is-scrolled .bb-logo-img { height: 32px; }
}
/* Mobile menu: dim backdrop behind a drawer panel anchored to the left edge. */
.bb-mobile-menu {
position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200;
display: none;
animation: bbFadeIn 0.25s ease;
}
.bb-mobile-menu.is-open { display: block; }
.bb-mobile-menu-panel {
position: absolute; top: 0; left: 0; bottom: 0; width: min(320px, 82vw);
background: var(--bb-ink); box-shadow: 8px 0 40px rgba(0,0,0,0.35);
display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 32px;
padding: 96px 40px 40px; overflow-y: auto;
animation: bbSlideInLeft 0.35s ease;
}
.bb-mobile-menu a { color: var(--bb-cream); text-decoration: none; font-family: var(--bb-font-serif); font-size: 32px; }
.bb-mobile-menu a.is-accent { color: var(--bb-gold); }
/* Strip default list markers/indent from wp_nav_menu
- items. */
.bb-mobile-menu ul, .bb-mobile-menu li { list-style: none; margin: 0; padding: 0; }
.bb-mobile-close {
position: absolute; top: 32px; right: 32px; background: none; border: none;
color: var(--bb-cream); font-size: 28px; cursor: pointer; line-height: 1;
}
/* ==========================================================================
3. Hero (home)
========================================================================== */
.bb-hero {
position: relative; height: 100vh; min-height: 560px; width: 100%; max-width: 100%; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
/* On phones the address bar makes 100vh taller than what's actually visible,
so the hero jumps as it hides/shows. svh is the stable "small viewport"
height; browsers without support keep the 100vh above. */
@supports (height: 100svh) {
.bb-hero { height: 100svh; }
}
.bb-hero video, .bb-hero-video {
/* Fill the hero exactly and let object-fit do the cropping. The older
min-width/min-height + width:auto approach sizes the element from the
video's intrinsic ratio, which on a narrow portrait screen blows it up to
well over the viewport width and drags the layout wider than the device. */
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
z-index: 0;
background: var(--bb-ink);
}
/* The property page's hero video is shot 16:9 for a desktop-width frame and
carries baked-in title copy centred in that frame. `cover` scales a 16:9
clip up until it fills a tall portrait viewport too, which crops away all
but a thin vertical sliver of the width — the burned-in text blows up into
a few giant, half-visible words. Below a portrait-ish aspect ratio, show
the whole frame instead; the hero's dark overlay sits on top either way,
so the letterboxed bars just read as more of that same darkening rather
than as empty space.
Scoped to the property template only: the Home/Experiences hero video is a
plain b-roll clip with no baked-in text, so it's left on `cover` for the
more immersive full-bleed crop it doesn't have a legibility problem to
trade away. */
@media (max-aspect-ratio: 3/4) {
.page-template-template-property-php .bb-hero video,
.page-template-template-property-php .bb-hero-video { object-fit: contain; }
}
.bb-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 1; }
.bb-hero-content {
position: relative; z-index: 2; text-align: center; color: #FFFFFF; padding: 0 24px;
max-width: 900px; margin: 0 auto; animation: bbFadeUp 1.4s ease;
}
.bb-hero-kicker { font-size: clamp(11px, 1.2vw, 13px); letter-spacing: 5px; margin-bottom: clamp(14px, 2.5vh, 28px); opacity: 0.85; }
.bb-hero-title { font-family: var(--bb-font-serif); font-size: clamp(40px, 6.5vw, 76px); font-weight: 400; line-height: 1.15; margin: 0 0 clamp(14px, 2.5vh, 28px) 0; letter-spacing: 0.5px; }
.bb-hero-sub { font-size: clamp(14px, 1.5vw, 17px); font-weight: 300; line-height: 1.8; max-width: 560px; margin: 0 auto clamp(20px, 3.5vh, 44px) auto; opacity: 0.9; }
.bb-hero-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; row-gap: 16px; }
.bb-scroll-cue {
position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: 8px; color: #FFFFFF; opacity: 0.75;
}
.bb-scroll-cue span { font-size: 10px; letter-spacing: 3px; }
.bb-scroll-cue i { width: 1px; height: 28px; background: linear-gradient(to bottom, rgba(255,255,255,0.9), transparent); }
/* Property hero variant (bottom aligned) */
.bb-hero--property { align-items: flex-end; justify-content: flex-start; }
.bb-hero--property .bb-hero-overlay { background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.15)); }
.bb-hero--property .bb-hero-content {
text-align: left; max-width: 1400px; width: 100%;
padding: 0 clamp(24px, 5vw, 48px) clamp(60px, 10vw, 120px) clamp(24px, 5vw, 48px);
}
.bb-hero--property .bb-hero-kicker { letter-spacing: 5px; margin-bottom: 24px; }
.bb-hero--property .bb-hero-title { font-size: clamp(48px, 10vw, 96px); margin: 0 0 32px 0; line-height: 1.05; }
/* ==========================================================================
4. Generic section / two-col layout
========================================================================== */
.bb-section { padding: clamp(56px, 8vw, 110px) clamp(24px, 5vw, 48px); }
/* Home page — tighter vertical rhythm (less whitespace between sections). */
.home .bb-section { padding-top: clamp(28px, 4.5vw, 60px); padding-bottom: clamp(28px, 4.5vw, 60px); }
.home .bb-section-head { margin-bottom: 28px; }
.home .bb-cta { padding-top: clamp(36px, 6vw, 72px); padding-bottom: clamp(36px, 6vw, 72px); }
/* "Living Communities" (#communities) + the pillars cards (#pillars) read as one
continuous white section. The cards stay cream so they still show on the white. */
#communities { padding-bottom: 0; max-width: none; }
#pillars { background: var(--bb-white); padding-top: clamp(20px, 3vw, 40px); }
#pillars .bb-card { background: var(--bb-cream); }
.bb-section--tight-top { padding-top: clamp(48px, 6vw, 80px); }
.bb-section--white { background: var(--bb-white); }
.bb-section-head { text-align: center; margin-bottom: 52px; }
.bb-kicker { font-size: 16px; letter-spacing: 4px; color: var(--bb-gold-text); margin-bottom: 20px; text-transform: capitalize; }
.bb-h2 { font-family: var(--bb-font-serif); font-size: 52px; font-weight: 400; margin: 0; }
.bb-h2--lg { font-size: clamp(32px, 5vw, 52px); line-height: 1.25; }
.bb-h2--xl { font-size: clamp(32px, 5.5vw, 54px); line-height: 1.25; max-width: 900px; margin: 0 auto 40px auto; }
.bb-body { font-size: 16px; line-height: 2; color: var(--bb-muted); font-weight: 300; }
.bb-body--lg { font-size: 17px; }
.bb-two-col {
max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px); align-items: center;
}
/* Media heights scale with the viewport rather than sitting at a fixed pixel
value. A 560px photo is right beside a column of copy on a desktop; stacked
on a 390px phone it is most of a screenful of scrolling before the copy even
starts. The clamp keeps the desktop size and shrinks from there. */
.bb-two-col .bb-media { height: clamp(240px, 42vw, 560px); background-size: cover; background-position: center; }
.bb-two-col.bb-two-col--tall .bb-media { height: clamp(280px, 46vw, 620px); }
@media (max-width: 1080px) { .bb-two-col { grid-template-columns: 1fr; } }
/* Hover video — the background image is the resting state; the video fades
in over it on hover/focus and is paused (not just hidden) the rest of the
time so it never competes with the image for attention or bandwidth. */
.bb-media--hover-video { position: relative; overflow: hidden; }
.bb-media-video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.bb-media--hover-video:hover .bb-media-video { opacity: 1; }
/* ==========================================================================
5. Featured property card
========================================================================== */
.bb-featured-grid {
display: grid; grid-template-columns: 1.3fr 1fr; border: 1px solid var(--bb-line);
max-width: 1400px; margin: 0 auto;
}
@media (max-width: 1080px) { .bb-featured-grid { grid-template-columns: 1fr; } }
.bb-featured-media { overflow: hidden; height: clamp(230px, 38vw, 520px); }
.bb-featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.bb-featured-media:hover img { transform: scale(1.06); }
.bb-featured-body { padding: clamp(32px, 6vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.bb-featured-body h3 { font-family: var(--bb-font-serif); font-size: clamp(26px, 3.5vw, 36px); font-weight: 400; margin: 0 0 20px 0; }
.bb-featured-body p { font-size: 15px; line-height: 1.9; color: var(--bb-muted); font-weight: 300; margin: 0 0 24px 0; }
.bb-featured-location { font-size: 13px; letter-spacing: 1.5px; color: var(--bb-ink); margin-bottom: 40px; }
.bb-featured-body .bb-btn { align-self: flex-start; padding: 16px 38px; }
/* ==========================================================================
6. Amenities grid
========================================================================== */
.bb-amenities-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--bb-line); border: 1px solid var(--bb-line); max-width: 1400px; margin: 0 auto;
}
.bb-amenity {
position: relative; overflow: hidden;
background: var(--bb-cream); padding: 56px 32px; text-align: center; transition: all 0.4s ease;
}
.bb-amenity:hover { background: var(--bb-dark); color: #FFFFFF; }
.bb-amenity svg { width: 30px; height: 30px; }
.bb-amenity-icon, .bb-amenity-label { position: relative; z-index: 2; }
.bb-amenity-label { margin-top: 24px; font-size: 13px; letter-spacing: 1.5px; }
/* Background image: the tile's resting-state photo — also used as the video's
poster, so hovering crossfades photo -> video instead of flashing blank. */
.bb-amenity-image {
position: absolute; inset: 0; width: 100%; height: 100%;
background-size: cover; background-position: center; z-index: 0;
transition: transform 0.6s ease;
}
.bb-amenity--has-image { color: #FFFFFF; }
.bb-amenity--has-image:hover .bb-amenity-image { transform: scale(1.06); }
/* Photo/video tiles: no icon, label pinned to the bottom, hidden on hover
so the image reads clean. */
.bb-amenity--has-image,
.bb-amenity--has-video {
display: flex; flex-direction: column; justify-content: flex-end;
height: 186px; padding-bottom: 20px;
}
.bb-amenity--has-image .bb-amenity-icon,
.bb-amenity--has-video .bb-amenity-icon {
display: none;
}
.bb-amenity--has-image .bb-amenity-label,
.bb-amenity--has-video .bb-amenity-label {
margin-top: 0; transition: opacity 0.3s ease;
}
.bb-amenity--has-image:hover .bb-amenity-label,
.bb-amenity--has-video:hover .bb-amenity-label {
opacity: 0;
}
/* Hover video: sits behind the icon/label, fades in on hover so the tile still
reads at rest; a scrim keeps the text legible once the clip is playing (or,
for a plain photo tile with no video, legible over the photo at all times). */
.bb-amenity-video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0; transition: opacity 0.5s ease; z-index: 0; pointer-events: none;
}
.bb-amenity--has-video::before,
.bb-amenity--has-image::before {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: rgba(17,17,17,0); transition: background 0.4s ease;
}
.bb-amenity--has-image::before { background: rgba(17,17,17,0.35); }
.bb-amenity--has-video:hover::before,
.bb-amenity--has-image:hover::before { background: rgba(17,17,17,0.5); }
.bb-amenity--has-video:hover .bb-amenity-video { opacity: 1; }
.bb-amenity--has-video:hover { color: #FFFFFF; }
/* ==========================================================================
7. Gallery + lightbox
========================================================================== */
.bb-gallery-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
grid-auto-rows: clamp(170px, 19vw, 260px); gap: clamp(10px, 1.4vw, 20px);
max-width: 1400px; margin: 0 auto;
}
.bb-gallery-tile { overflow: hidden; cursor: pointer; }
.bb-gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.bb-gallery-tile:hover img { transform: scale(1.08); }
.bb-gallery-tile.is-large { grid-column: span 2; grid-row: span 2; }
.bb-gallery-tile.is-wide { grid-column: span 2; }
@media (max-width: 640px) {
.bb-gallery-tile.is-large, .bb-gallery-tile.is-wide { grid-column: span 1; grid-row: span 1; }
}
.bb-lightbox {
position: fixed; inset: 0; background: rgba(17,17,17,0.95); z-index: 300;
display: none; align-items: center; justify-content: center; padding: clamp(16px, 5vw, 60px);
animation: bbFadeIn 0.3s ease; cursor: zoom-out;
}
.bb-lightbox.is-open { display: flex; }
.bb-lightbox img { max-width: 100%; max-height: 85vh; object-fit: contain; cursor: default; }
.bb-lightbox-close {
position: absolute; top: clamp(12px, 3vw, 32px); right: clamp(14px, 3vw, 40px);
background: none; border: none; color: #FFFFFF; font-size: 32px; cursor: pointer; line-height: 1;
}
/* ==========================================================================
8. Testimonials
========================================================================== */
.bb-testimonials { max-width: 800px; margin: 0 auto; text-align: center; }
.bb-testimonial-photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin: 0 auto 32px auto; background: var(--bb-line); }
.bb-testimonial-quote { font-family: var(--bb-font-serif); font-size: clamp(21px, 3.4vw, 30px); font-weight: 400; line-height: 1.5; font-style: italic; margin: 0 0 28px 0; }
.bb-testimonial-name { font-size: 13px; letter-spacing: 1.5px; margin-bottom: 6px; }
.bb-testimonial-location { font-size: 13px; color: var(--bb-muted); }
.bb-testimonial-nav { display: flex; justify-content: center; gap: 24px; margin-top: 48px; }
.bb-testimonial-nav button {
background: none; border: 1px solid var(--bb-line); width: 48px; height: 48px; border-radius: 50%;
cursor: pointer; font-size: 16px; transition: all 0.3s ease;
}
.bb-testimonial-nav button:hover { border-color: var(--bb-gold); background: var(--bb-gold); }
/* ==========================================================================
9. CTA band
========================================================================== */
.bb-cta { position: relative; padding: clamp(56px, 9vw, 120px) clamp(24px, 5vw, 48px); text-align: center; overflow: hidden; }
.bb-cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.bb-cta-overlay { position: absolute; inset: 0; background: rgba(17,17,17,0.6); z-index: 1; }
.bb-cta-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; color: #FFFFFF; }
.bb-cta-inner h2 { font-family: var(--bb-font-serif); font-size: clamp(32px, 5vw, 52px); font-weight: 400; margin: 0 0 44px 0; }
.bb-cta-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
/* ==========================================================================
10. Footer
========================================================================== */
.bb-footer { background: var(--bb-dark); color: #FFFFFF; padding: clamp(60px, 10vw, 100px) clamp(24px, 5vw, 48px) 40px clamp(24px, 5vw, 48px); }
.bb-footer-grid {
max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: 48px; padding-bottom: 70px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.bb-footer-brand { font-family: var(--bb-font-serif); font-size: 26px; letter-spacing: 3px; margin-bottom: 20px; }
.bb-footer-logo-img { display: block; height: 40px; width: auto; }
.bb-footer-tagline { font-size: 14px; line-height: 1.9; color: rgba(255,255,255,0.55); font-weight: 300; max-width: 280px; }
.bb-footer-heading { font-size: 12px; letter-spacing: 2px; color: var(--bb-gold); margin-bottom: 24px; }
.bb-footer-links { display: flex; flex-direction: column; gap: 14px; }
.bb-footer-links a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 14px; font-weight: 300; }
.bb-footer-links a:hover { color: #FFFFFF; }
/* Strip default list markers/indent from wp_nav_menu
- items. */
.bb-footer-links ul, .bb-footer-links li { list-style: none; margin: 0; padding: 0; }
.bb-footer-contact { display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: rgba(255,255,255,0.65); font-weight: 300; }
.bb-newsletter-row { display: flex; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 12px; }
.bb-newsletter-row input {
background: none; border: none; color: #FFFFFF; font-size: 14px; flex: 1; outline: none; font-family: var(--bb-font-sans);
}
.bb-newsletter-row input::placeholder { color: rgba(255,255,255,0.5); }
.bb-newsletter-row button { background: none; border: none; color: var(--bb-gold); cursor: pointer; font-size: 13px; letter-spacing: 1px; }
.bb-footer-social { display: flex; gap: 18px; margin-top: 32px; }
.bb-footer-social a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 12px; letter-spacing: 1px; }
.bb-footer-bottom { max-width: 1400px; margin: 0 auto; padding-top: 32px; font-size: 12px; color: rgba(255,255,255,0.55); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.bb-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.bb-footer-legal a { color: rgba(255,255,255,0.55); text-decoration: none; }
.bb-footer-legal a:hover { color: #FFFFFF; }
.bb-footer-legal ul, .bb-footer-legal li { list-style: none; margin: 0; padding: 0; }
@media (max-width: 600px) { .bb-footer-bottom { justify-content: center; text-align: center; } .bb-footer-legal { justify-content: center; width: 100%; } }
.bb-newsletter-msg { font-size: 13px; color: var(--bb-gold); margin-top: 12px; display: none; }
.bb-newsletter-msg.is-visible { display: block; }
/* ==========================================================================
11. Property: highlights / stats grid
========================================================================== */
.bb-stats-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 1px;
background: var(--bb-line); border: 1px solid var(--bb-line); max-width: 1400px; margin: 0 auto;
}
.bb-stat { background: var(--bb-cream); padding: 48px 28px; text-align: center; }
.bb-stat-value { font-family: var(--bb-font-serif); font-size: 34px; margin-bottom: 10px; }
.bb-stat-label { font-size: 12px; letter-spacing: 1.5px; color: var(--bb-muted); }
/* ==========================================================================
12. Architecture chapters
========================================================================== */
.bb-chapters { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(48px, 7vw, 100px); }
.bb-chapter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(28px, 6vw, 100px); align-items: start; }
.bb-chapter-media { height: clamp(230px, 40vw, 560px); background-size: cover; background-position: center; }
.bb-chapter.is-reversed .bb-chapter-media { order: 2; }
.bb-chapter.is-reversed .bb-chapter-body { order: 1; }
.bb-chapter-body h3 { font-family: var(--bb-font-serif); font-size: clamp(28px, 4vw, 42px); font-weight: 400; line-height: 1.3; margin: 0 0 28px 0; }
/* Once the columns collapse to one, always read as text then image —
regardless of which side the image sits on at desktop width. */
@media (max-width: 680px) {
.bb-chapter-body { order: 1; }
.bb-chapter-media { order: 2; }
}
/* ==========================================================================
13. Master plan
========================================================================== */
.bb-masterplan { position: relative; height: clamp(260px, 46vw, 640px); background-size: cover; background-position: center; max-width: 1400px; margin: 0 auto; }
.bb-hotspot {
position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--bb-gold);
border: 3px solid #FFFFFF; box-shadow: 0 0 0 6px rgba(200,178,115,0.3); transform: translate(-50%, -50%);
cursor: pointer;
}
.bb-hotspot-label {
position: absolute; bottom: 100%; left: 50%; margin-bottom: 10px;
transform: translate(-50%, 4px); white-space: nowrap;
background: rgba(17,17,17,0.9); color: #FFFFFF; font-size: 12px; letter-spacing: 0.5px;
padding: 7px 14px; border-radius: 4px;
opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.bb-hotspot-label::after {
content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 5px solid transparent; border-top-color: rgba(17,17,17,0.9);
}
.bb-hotspot:hover .bb-hotspot-label,
.bb-hotspot:focus-visible .bb-hotspot-label {
opacity: 1; transform: translate(-50%, 0);
}
.bb-masterplan-caption {
position: absolute; bottom: 24px; right: 24px; background: rgba(17,17,17,0.75); color: #FFFFFF;
font-size: 12px; letter-spacing: 1px; padding: 12px 18px;
}
/* ==========================================================================
14. Floor plans
========================================================================== */
.bb-floorplans { max-width: 1200px; margin: 0 auto; }
.bb-floorplan-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: clamp(32px, 4vw, 60px); border-bottom: 1px solid var(--bb-line); flex-wrap: wrap; }
.bb-floorplan-tab {
background: none; border: none; padding: clamp(13px, 1.6vw, 18px) clamp(18px, 3vw, 40px);
font-size: 13px; letter-spacing: 1.5px; cursor: pointer;
color: var(--bb-dim); border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--bb-font-sans);
}
.bb-floorplan-tab.is-active { color: var(--bb-ink); border-bottom-color: var(--bb-gold); }
.bb-floorplan-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(28px, 4.5vw, 60px); align-items: center; }
.bb-floorplan-image { height: clamp(260px, 33vw, 460px); background: var(--bb-cream); border: 1px solid var(--bb-line); display: flex; align-items: center; justify-content: center; }
.bb-floorplan-image img { max-width: 90%; max-height: 90%; object-fit: contain; opacity: 0.9; }
.bb-floorplan-facts { display: flex; flex-direction: column; gap: 16px; font-size: 15px; color: var(--bb-muted); font-weight: 300; }
.bb-floorplan-panel { display: none; }
.bb-floorplan-panel.is-active { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(28px, 4.5vw, 60px); align-items: center; }
/* ==========================================================================
15. Location
========================================================================== */
.bb-location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(32px, 4.5vw, 60px); max-width: 1400px; margin: 0 auto; }
.bb-map-placeholder {
height: clamp(260px, 34vw, 480px); background: var(--bb-cream); border: 1px solid var(--bb-line);
display: flex; align-items: center; justify-content: center; color: var(--bb-dim); font-size: 13px; letter-spacing: 1.5px;
overflow: hidden;
}
.bb-map-placeholder iframe, .bb-map-placeholder img { width: 100%; height: 100%; object-fit: cover; border: 0; }
.bb-commute-list { display: flex; flex-direction: column; gap: 28px; }
.bb-commute-item { display: flex; justify-content: space-between; border-bottom: 1px solid var(--bb-line); padding-bottom: 20px; }
.bb-commute-item:last-child { border-bottom: none; padding-bottom: 0; }
.bb-commute-item span:first-child { font-size: 15px; }
.bb-commute-item span:last-child { font-size: 14px; color: var(--bb-muted); }
/* ==========================================================================
16. Enquiry form
========================================================================== */
.bb-enquiry-section {
position: relative; overflow: hidden;
padding: clamp(56px, 8vw, 100px) clamp(24px, 5vw, 48px) clamp(32px, 5vw, 56px);
}
.bb-enquiry-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bb-enquiry-overlay { position: absolute; inset: 0; background: rgba(17,17,17,0.55); }
.bb-enquiry-card {
position: relative; z-index: 2; max-width: 560px; width: 100%; margin: 0 auto; background: var(--bb-white);
padding: clamp(26px, 4vw, 40px) clamp(24px, 4vw, 40px); box-sizing: border-box;
border-radius: var(--bb-radius);
}
.bb-enquiry-head { text-align: center; margin-bottom: 20px; }
.bb-enquiry-embed { min-height: 480px; }
.bb-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* ==========================================================================
Page Sections (editor-built pages)
========================================================================== */
.bb-main { display: block; }
/* Rich text coming from a WYSIWYG field. .bb-body sets the inherited type;
these rules only supply the block rhythm the editor's own
/
need. */
.bb-richtext > *:first-child { margin-top: 0; }
.bb-richtext > *:last-child { margin-bottom: 0; }
.bb-richtext p { margin: 0 0 20px 0; }
.bb-richtext ul, .bb-richtext ol { margin: 0 0 20px 0; padding-left: 22px; }
.bb-richtext li { margin-bottom: 8px; }
.bb-richtext a { color: var(--bb-ink); text-decoration: underline; text-underline-offset: 3px; }
.bb-richtext a:hover { color: var(--bb-gold); }
.bb-richtext strong { font-weight: 500; color: var(--bb-ink); }
/* Hero with a still image instead of a video. */
.bb-hero-still { background-size: cover; background-position: center; }
/* Centred-text + wide-image section (was inline styles on the property page). */
.bb-section--centered { max-width: 1300px; margin: 0 auto; text-align: center; }
.bb-section-lede { max-width: 760px; margin: 0 auto 80px auto; }
/* No image below it — drop the gap that was there to separate the two. */
.bb-section-lede.is-last { margin-bottom: 0; }
/* Second heading line, carried in the accent colour. */
.bb-h2-accent { color: var(--bb-gold-text); }
.bb-media--wide { height: clamp(230px, 46vw, 640px); background-size: cover; background-position: center; }
.bb-floorplan-title {
font-family: var(--bb-font-serif); font-size: clamp(26px, 3.5vw, 36px);
font-weight: 400; margin: 0 0 24px 0;
}
.bb-h2--form { font-size: clamp(24px, 3vw, 34px); }
/* Custom / Free Section */
.bb-custom-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.bb-custom--image_full .bb-custom-inner { max-width: 1300px; }
.bb-custom--image_full .bb-media--wide { margin-bottom: clamp(40px, 5vw, 72px); }
.bb-custom-actions { margin: 36px 0 0 0; }
.bb-custom--image_left .bb-custom-inner,
.bb-custom--image_right .bb-custom-inner { text-align: left; }
.bb-custom--image_bg { position: relative; overflow: hidden; color: var(--bb-white); }
.bb-custom--image_bg .bb-custom-bg {
position: absolute; inset: 0; background-size: cover; background-position: center;
}
.bb-custom--image_bg .bb-custom-bg-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.bb-custom--image_bg .bb-custom-inner { position: relative; z-index: 2; }
.bb-custom--image_bg .bb-h2,
.bb-custom--image_bg .bb-kicker,
.bb-custom--image_bg .bb-body,
.bb-custom--image_bg .bb-richtext strong,
.bb-custom--image_bg .bb-richtext a { color: var(--bb-white); }
/* Section Builder template, before any sections are added. */
.bb-section--page { padding-top: clamp(120px, 14vw, 180px); }
.bb-section--page .bb-container { max-width: 900px; margin: 0 auto; }
.bb-page-title { margin-bottom: 32px; }
.bb-section--page .bb-richtext { font-size: 17px; }
/* ==========================================================================
Additional section types
========================================================================== */
/* --- FAQ / accordion (native , no JS) --- */
.bb-faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--bb-line); }
.bb-faq-item { border-bottom: 1px solid var(--bb-line); }
.bb-faq-q {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 26px 4px; cursor: pointer; list-style: none;
font-family: var(--bb-font-serif); font-size: clamp(19px, 2.2vw, 23px); font-weight: 400;
color: var(--bb-ink); transition: color 0.3s ease;
}
.bb-faq-q::-webkit-details-marker { display: none; }
.bb-faq-q:hover { color: var(--bb-gold); }
.bb-faq-mark { position: relative; flex: 0 0 14px; height: 14px; }
.bb-faq-mark::before, .bb-faq-mark::after {
content: ''; position: absolute; background: var(--bb-gold); transition: transform 0.3s ease;
}
.bb-faq-mark::before { top: 6px; left: 0; width: 14px; height: 1px; }
.bb-faq-mark::after { top: 0; left: 6px; width: 1px; height: 14px; }
.bb-faq-item[open] .bb-faq-mark::after { transform: scaleY(0); }
.bb-faq-a { padding: 0 4px 30px 4px; max-width: 70ch; }
/* --- Cards grid (also used by Team and the generic fallback) --- */
.bb-cards { max-width: 1400px; margin: 0 auto; display: grid; gap: clamp(24px, 3vw, 40px); }
.bb-cards--2 { grid-template-columns: repeat(2, 1fr); }
.bb-cards--3 { grid-template-columns: repeat(3, 1fr); }
.bb-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .bb-cards--3, .bb-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .bb-cards--2, .bb-cards--3, .bb-cards--4 { grid-template-columns: 1fr; } }
.bb-card { background: var(--bb-cream); border-radius: var(--bb-radius); overflow: hidden; display: flex; flex-direction: column; }
.bb-section--white .bb-card { background: var(--bb-cream); }
/* Elevated: a white card lifted off the page. Uses its own radius rather than
--bb-radius so the style still reads as "card" in the square-cornered skins. */
.bb-cards--elevated .bb-card {
background: var(--bb-white); border-radius: 10px;
box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px rgba(17,17,17,0.06);
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.bb-cards--elevated .bb-card:hover {
box-shadow: 0 2px 4px rgba(17,17,17,0.05), 0 16px 40px rgba(17,17,17,0.10);
transform: translateY(-3px);
}
.bb-cards--elevated .bb-card-body { padding: clamp(28px, 3.2vw, 40px); }
.bb-card-icon { padding: clamp(28px, 3.2vw, 40px) clamp(28px, 3.2vw, 40px) 0; color: var(--bb-gold); line-height: 0; }
.bb-card-icon svg { display: block; }
.bb-card-icon + .bb-card-body { padding-top: 20px; }
.bb-card-media { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.bb-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.bb-card:hover .bb-card-media img { transform: scale(1.04); }
/* Hover video — same treatment as the amenity tiles and the Text + Image
hover video: the photo is the resting state, the clip fades in over it on
hover/focus and is paused (not just hidden) the rest of the time. */
.bb-card-video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
}
.bb-card-media--has-video:hover .bb-card-video,
.bb-card:hover .bb-card-media--has-video .bb-card-video { opacity: 1; }
.bb-card-body { padding: clamp(24px, 3vw, 34px); flex: 1; display: flex; flex-direction: column; }
.bb-card-title { font-family: var(--bb-font-serif); font-size: 26px; font-weight: 500; margin: 0 0 14px 0; color: var(--bb-ink); }
.bb-card-text { font-size: 15px; line-height: 1.9; color: var(--bb-muted); font-weight: 300; margin: 0 0 20px 0; }
.bb-card-link {
margin-top: auto; align-self: flex-start; font-size: 12px; letter-spacing: 1.5px;
text-decoration: none; color: var(--bb-ink); border-bottom: 1px solid var(--bb-gold); padding-bottom: 4px;
}
.bb-card-link:hover { color: var(--bb-gold); }
/* --- Video --- */
.bb-video { max-width: 1200px; margin: 0 auto; background: var(--bb-ink); overflow: hidden; border-radius: var(--bb-radius); }
.bb-video--16-9 { aspect-ratio: 16 / 9; }
.bb-video--21-9 { aspect-ratio: 21 / 9; }
.bb-video--4-3 { aspect-ratio: 4 / 3; }
.bb-video iframe, .bb-video video, .bb-video img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
/* --- Logo strip --- */
.bb-logos {
max-width: 1300px; margin: 0 auto; display: flex; flex-wrap: wrap;
align-items: center; justify-content: center; gap: clamp(32px, 5vw, 72px);
}
.bb-logo-item img { display: block; max-height: 46px; width: auto; max-width: 170px; }
.bb-logos.is-greyscale img { filter: grayscale(1); opacity: 0.55; transition: filter 0.4s ease, opacity 0.4s ease; }
.bb-logos.is-greyscale img:hover { filter: grayscale(0); opacity: 1; }
/* --- Text + Image Slider (Text + Image, with a swipeable photo strip) --- */
.bb-media--slider { position: relative; overflow: hidden; padding: 0; }
.bb-slider-track {
display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.bb-slider-track::-webkit-scrollbar { display: none; }
.bb-media-slide { flex: 0 0 100%; height: 100%; background-size: cover; background-position: center; scroll-snap-align: start; }
.bb-slider-nav {
position: absolute; bottom: 20px; width: 44px; height: 44px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.7); background: rgba(17,17,17,0.35); color: #FFFFFF;
cursor: pointer; font-size: 16px; line-height: 1; transition: all 0.3s ease;
}
.bb-slider-nav:hover { background: var(--bb-gold); border-color: var(--bb-gold); color: #111111; }
.bb-slider-prev { left: 20px; }
.bb-slider-next { right: 20px; }
/* --- Team --- */
/* Flex rather than grid: a group holding fewer people than there are columns
(Operations = 2 under a 3-column setting) centres its row instead of hugging
the left edge, which is what you want when one section carries several
groups of different sizes. */
.bb-team {
--bb-team-gap: clamp(28px, 3.5vw, 48px);
--bb-team-cols: 3;
max-width: 1400px; margin: 0 auto;
display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
gap: var(--bb-team-gap);
}
.bb-team.bb-cards--2 { --bb-team-cols: 2; }
.bb-team.bb-cards--3 { --bb-team-cols: 3; }
.bb-team.bb-cards--4 { --bb-team-cols: 4; }
.bb-person {
text-align: center; min-width: 0;
flex: 0 1 calc((100% - (var(--bb-team-cols) - 1) * var(--bb-team-gap)) / var(--bb-team-cols));
}
@media (max-width: 1080px) {
.bb-team.bb-cards--3, .bb-team.bb-cards--4 { --bb-team-cols: 2; }
}
@media (max-width: 680px) {
.bb-team.bb-cards--2, .bb-team.bb-cards--3, .bb-team.bb-cards--4 { --bb-team-cols: 1; }
}
.bb-person-photo { aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 24px; border-radius: var(--bb-radius); }
.bb-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-person-name { font-family: var(--bb-font-serif); font-size: 22px; font-weight: 400; margin: 0 0 6px 0; color: var(--bb-ink); }
.bb-person-role { font-size: 12px; letter-spacing: 2px; color: var(--bb-gold); margin-bottom: 16px; }
.bb-person-bio { font-size: 14px; line-height: 1.9; color: var(--bb-muted); font-weight: 300; margin: 0 0 16px 0; }
.bb-person-links { display: flex; gap: 18px; justify-content: center; }
.bb-person-links a { font-size: 12px; letter-spacing: 1px; color: var(--bb-ink); text-decoration: none; border-bottom: 1px solid var(--bb-line); padding-bottom: 3px; }
.bb-person-links a:hover { color: var(--bb-gold); border-bottom-color: var(--bb-gold); }
/* Group headings — "Founders", "Operations" — inside one Team section. */
.bb-team-group {
font-family: var(--bb-font-serif); font-size: clamp(26px, 3vw, 34px); font-weight: 400;
text-align: center; color: var(--bb-ink); margin: 0 0 clamp(20px, 2.4vw, 30px) 0;
}
.bb-team + .bb-team-group { margin-top: clamp(32px, 4vw, 52px); }
.bb-section--head-left .bb-team-group { text-align: left; }
/* Elevated people: for biographies that run to a paragraph rather than a line. */
.bb-team--elevated .bb-person {
background: var(--bb-white); border-radius: 10px; text-align: left;
padding: 18px 18px 30px;
box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px rgba(17,17,17,0.06);
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.bb-team--elevated .bb-person:hover {
box-shadow: 0 2px 4px rgba(17,17,17,0.05), 0 16px 40px rgba(17,17,17,0.10);
transform: translateY(-3px);
}
.bb-team--elevated .bb-person-photo { aspect-ratio: 4 / 3; margin-bottom: 22px; }
.bb-team--elevated .bb-person-body { padding: 0 10px; }
.bb-team--elevated .bb-person-name {
font-family: var(--bb-font-sans); font-size: 16px; font-weight: 500;
color: var(--bb-gold); margin-bottom: 4px;
}
.bb-team--elevated .bb-person-role { font-size: 12px; letter-spacing: 0.5px; color: var(--bb-muted); margin-bottom: 18px; }
.bb-team--elevated .bb-person-links { justify-content: flex-start; }
/* --- Timeline --- */
.bb-timeline {
max-width: 860px; margin: 0 auto; padding: 0 0 0 40px; list-style: none;
border-left: 1px solid var(--bb-line);
}
.bb-timeline-item { position: relative; padding-bottom: clamp(40px, 5vw, 64px); }
.bb-timeline-item:last-child { padding-bottom: 0; }
.bb-timeline-dot {
position: absolute; left: -46px; top: 6px; width: 11px; height: 11px; border-radius: 50%;
background: var(--bb-cream); border: 1px solid var(--bb-gold);
}
.bb-timeline-item.is-complete .bb-timeline-dot { background: var(--bb-gold); }
.bb-timeline-marker { font-size: 12px; letter-spacing: 2px; color: var(--bb-gold); margin-bottom: 10px; }
.bb-timeline-heading { font-family: var(--bb-font-serif); font-size: clamp(21px, 2.4vw, 26px); font-weight: 400; margin: 0 0 12px 0; color: var(--bb-ink); }
.bb-timeline-text { margin: 0; max-width: 62ch; }
@media (max-width: 600px) { .bb-timeline { padding-left: 28px; } .bb-timeline-dot { left: -34px; } }
/* --- Split CTA --- */
.bb-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.bb-split.is-reversed .bb-split-media { order: 2; }
.bb-split-media { min-height: clamp(240px, 34vw, 480px); background-size: cover; background-position: center; }
.bb-split-body { display: flex; align-items: center; padding: clamp(48px, 7vw, 100px) clamp(28px, 5vw, 80px); background: var(--bb-cream); }
.bb-split-inner { max-width: 520px; }
.bb-split-actions { margin: 32px 0 0 0; }
.bb-split--dark .bb-split-body { background: var(--bb-dark); }
.bb-split--dark .bb-split-body .bb-h2,
.bb-split--dark .bb-split-body h1,
.bb-split--dark .bb-split-body .bb-body,
.bb-split--dark .bb-split-body .bb-richtext strong,
.bb-split--dark .bb-split-body .bb-richtext a { color: #FFFFFF; }
@media (max-width: 900px) {
.bb-split { grid-template-columns: 1fr; }
.bb-split.is-reversed .bb-split-media { order: 0; }
.bb-split-media { min-height: clamp(200px, 34vw, 320px); }
}
/* --- Generic fallback section --- */
.bb-generic-actions { margin: 40px 0 0 0; text-align: center; }
.bb-generic .bb-media--wide { margin-bottom: clamp(32px, 4vw, 56px); }
/* ==========================================================================
Shared section refinements
========================================================================== */
/* Left-aligned heading block (the "Heading Alignment" setting). The content
under it keeps whatever layout its own section defines. */
.bb-section--head-left .bb-section-head { text-align: left; }
.bb-section--head-left .bb-custom-inner { text-align: left; }
.bb-section--head-left.bb-section--centered { text-align: left; }
.bb-section--head-left .bb-h2--xl,
.bb-section--head-left .bb-section-lede { margin-left: 0; }
/* .bb-h2--xl carries its own bottom margin for the standalone Centred Text
section; inside a heading block that block already provides the gap. */
.bb-section-head .bb-h2--xl { margin-bottom: 0; }
/* Optional lines above and below a section's main content. */
.bb-section-intro { max-width: 760px; margin: 0 auto clamp(26px, 3vw, 38px) auto; text-align: center; }
.bb-section-head + .bb-section-intro { margin-top: -30px; }
.bb-section-footnote { max-width: 820px; margin: clamp(26px, 3vw, 38px) auto 0 auto; text-align: center; font-size: 15px; }
.bb-section--head-left .bb-section-intro,
.bb-section--head-left .bb-section-footnote { text-align: left; margin-left: 0; }
/* Text + Image: an optional button, and a logo/graphic shown whole. */
.bb-two-col-actions { margin: 28px 0 0 0; }
.bb-two-col .bb-media--contain {
background-size: contain; background-repeat: no-repeat; background-position: center;
background-color: transparent; height: clamp(150px, 22vw, 300px);
}
.bb-two-col.bb-two-col--tall .bb-media--contain { height: clamp(170px, 25vw, 340px); }
/* Cards: a small sub-label under the title, optionally centred with it. */
.bb-card-subtitle { font-size: 12px; letter-spacing: 2px; color: var(--bb-dim); margin: -6px 0 18px 0; }
.bb-cards--centre-titles .bb-card-title,
.bb-cards--centre-titles .bb-card-subtitle { text-align: center; }
/* Stats: the detailed variant, for labels that run to a sentence. */
.bb-stats-grid--detailed {
grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); max-width: 1100px;
}
.bb-stats-grid--detailed .bb-stat { text-align: left; padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px); }
.bb-stats-grid--detailed .bb-stat-value {
font-size: clamp(36px, 4vw, 48px); line-height: 1; color: var(--bb-gold); margin-bottom: 16px;
}
.bb-stats-grid--detailed .bb-stat-label {
font-size: 14px; letter-spacing: 0; line-height: 1.75; font-weight: 300;
}
/* Amenities: the tile variant, for longer labels (memberships, accreditations)
that the joined grid's uppercase tracking would break across too many lines. */
.bb-amenities-grid--tiles {
background: none; border: 0; max-width: 1200px;
gap: clamp(16px, 2vw, 24px);
grid-template-columns: repeat(4, 1fr);
}
.bb-amenities-grid--tiles .bb-amenity {
background: var(--bb-cream); border-radius: 10px;
padding: clamp(26px, 3vw, 36px) 22px;
display: flex; flex-direction: column; align-items: center; gap: 20px;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.bb-section:not(.bb-section--white) .bb-amenities-grid--tiles .bb-amenity { background: var(--bb-white); }
.bb-amenities-grid--tiles .bb-amenity:hover {
background: var(--bb-cream); color: inherit;
transform: translateY(-3px); box-shadow: 0 8px 24px rgba(17,17,17,0.07);
}
.bb-section:not(.bb-section--white) .bb-amenities-grid--tiles .bb-amenity:hover { background: var(--bb-white); }
.bb-amenities-grid--tiles .bb-amenity-icon {
display: grid; place-items: center; width: 62px; height: 62px;
border-radius: 50%; background: var(--bb-line); color: var(--bb-gold);
}
.bb-amenities-grid--tiles .bb-amenity-label { margin-top: 0; letter-spacing: 0.3px; line-height: 1.6; }
/* Video/image tiles keep their own scrim for contrast, so they stay white
text regardless of the plain tile's hover-to-cream/ink treatment above. */
.bb-amenities-grid--tiles .bb-amenity--has-video:hover,
.bb-amenities-grid--tiles .bb-amenity--has-image,
.bb-amenities-grid--tiles .bb-amenity--has-image:hover { color: #FFFFFF; }
/* --- Numbered principles --- */
.bb-principles {
max-width: 700px; margin: 0 auto; padding: 0; list-style: none;
border-top: 1px solid var(--bb-line); text-align: center;
}
.bb-principle {
padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--bb-line);
}
.bb-principle-number {
display: flex; align-items: center; justify-content: center;
width: 56px; height: 56px; margin: 0 auto 16px;
border: 1px solid var(--bb-gold); border-radius: 50%;
font-family: var(--bb-font-serif); font-size: 18px;
line-height: 1; color: var(--bb-gold);
}
.bb-principle-heading {
font-family: var(--bb-font-serif); font-size: clamp(21px, 2.4vw, 27px);
font-weight: 400; margin: 0 0 14px 0; color: var(--bb-ink);
}
.bb-principle-text { margin: 0 auto; max-width: 68ch; }
/* --- Pages that don't open with a hero --- */
/* The header is transparent with white type because it normally sits over the
dark hero video. A page starting with an ordinary section has nothing for it
to sit on, so it starts solid instead and the first section clears it. */
body.bb-no-hero .bb-header {
background: var(--bb-white); box-shadow: 0 2px 24px rgba(0,0,0,0.06); padding: 18px 0;
}
body.bb-no-hero .bb-header .bb-logo,
body.bb-no-hero .bb-header .bb-nav a,
body.bb-no-hero .bb-header .bb-menu-label,
body.bb-no-hero .bb-header .bb-lang,
body.bb-no-hero .bb-header .bb-search-icon { color: var(--bb-ink); }
body.bb-no-hero .bb-header .bb-lang { border-bottom-color: var(--bb-ink); }
body.bb-no-hero .bb-header .bb-hamburger-line,
body.bb-no-hero .bb-header .bb-burger span { background: var(--bb-ink); }
body.bb-no-hero .bb-header .bb-enquire-btn { border-color: var(--bb-ink); color: var(--bb-ink); }
body.bb-no-hero .bb-header .bb-logo-img--dark { opacity: 1; }
body.bb-no-hero .bb-header .bb-logo-img--light { opacity: 0; }
body.bb-no-hero .bb-header .bb-logo-img { height: calc(var(--bb-logo-h, 52px) * 0.78); }
body.bb-no-hero .bb-main > *:first-child { padding-top: clamp(110px, 12vw, 165px); }
/* Corner rounding, applied only when a skin sets a non-zero radius. */
.bb-media, .bb-gallery-tile, .bb-featured-media, .bb-chapter-media,
.bb-masterplan, .bb-floorplan-image, .bb-map-placeholder, .bb-amenity {
border-radius: var(--bb-radius);
}
.bb-gallery-tile, .bb-featured-media { overflow: hidden; }
/* ==========================================================================
Property page — tighter vertical rhythm
Scoped to the "Bluebonnet — Property Page" template via the body class
WordPress derives from template-property.php, so only that page's sections
sit closer together. Every other page keeps the roomier default spacing.
The hero uses .bb-hero (not .bb-section), so it is untouched.
========================================================================== */
.page-template-template-property-php .bb-section {
padding-top: clamp(32px, 4.5vw, 60px);
padding-bottom: clamp(32px, 4.5vw, 60px);
}
.page-template-template-property-php .bb-section--tight-top {
padding-top: clamp(24px, 3vw, 44px);
}
.page-template-template-property-php .bb-section-head { margin-bottom: 32px; }
.page-template-template-property-php .bb-section-lede { margin-bottom: 44px; }
/* ==========================================================================
About page — tighter vertical rhythm
Same treatment as the property page: it is a long read rather than a
showcase, so the roomy default banding pushes the content too far apart.
========================================================================== */
.page-template-template-about-php .bb-section {
padding-top: clamp(34px, 4.5vw, 64px);
padding-bottom: clamp(34px, 4.5vw, 64px);
}
.page-template-template-about-php .bb-section--tight-top {
padding-top: clamp(24px, 3vw, 44px);
}
.page-template-template-about-php .bb-section-head { margin-bottom: 32px; }
.page-template-template-about-php .bb-enquiry-section {
padding-top: clamp(40px, 5vw, 64px);
padding-bottom: clamp(28px, 4vw, 44px);
}
/* The two-column opener holds four paragraphs, so a fixed-height image sits
centred against a much taller text column with dead space above and below
it. Let the photo fill the row instead. Logos keep their own height — a
contained mark stretched down a tall box would just float in more space. */
.page-template-template-about-php .bb-two-col { align-items: stretch; }
.page-template-template-about-php .bb-two-col .bb-media:not(.bb-media--contain) {
height: auto; min-height: clamp(220px, 30vw, 380px);
}
.page-template-template-about-php .bb-two-col .bb-media--contain { align-self: center; }
/* Stacked, the photo has no text column to match, so cap it back to a band. */
@media (max-width: 1080px) {
.page-template-template-about-php .bb-two-col .bb-media:not(.bb-media--contain) {
height: clamp(220px, 34vw, 380px); min-height: 0;
}
}
/* ==========================================================================
Contact Us page — tighter vertical rhythm
Scoped to this one page (page-id-144) rather than the whole "Section
Builder" template, since that template is also used as a blank canvas for
other one-off pages that may want the roomier default spacing. Contact
stacks ten sections back to back (intro, form, location, seven FAQ
groups), so the default banding leaves huge gaps between them.
========================================================================== */
.page-id-144 .bb-section {
padding-top: clamp(28px, 4vw, 48px);
padding-bottom: clamp(28px, 4vw, 48px);
}
.page-id-144 .bb-section-head { margin-bottom: 24px; }
.page-id-144 .bb-enquiry-section {
padding-top: clamp(32px, 4.5vw, 56px);
padding-bottom: clamp(32px, 4.5vw, 56px);
}
.page-id-144 .bb-faq-a { padding-bottom: 20px; }
/* ==========================================================================
Tables in rich text
Editors paste specification and comparison tables into WYSIWYG fields. A
table sizes itself to its content, so a wide one is the one thing on the
page that can out-measure the viewport. main.js wraps each in
.bb-table-scroll so it scrolls inside its own block; the styles below still
apply if that script never runs.
========================================================================== */
.bb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 20px 0; max-width: 100%; }
.bb-table-scroll > table { margin-bottom: 0; }
.bb-richtext table {
width: 100%; border-collapse: collapse; margin: 0 0 20px 0;
font-size: 15px; line-height: 1.7;
}
.bb-richtext th, .bb-richtext td {
border: 1px solid var(--bb-line); padding: 12px 16px; text-align: left; vertical-align: top;
}
.bb-richtext th { font-weight: 500; color: var(--bb-ink); background: var(--bb-cream); }
.bb-section--white .bb-richtext th { background: var(--bb-cream); }
.bb-richtext caption { caption-side: bottom; padding-top: 10px; font-size: 13px; color: var(--bb-dim); text-align: left; }
@media (max-width: 680px) {
.bb-richtext table { font-size: 14px; }
.bb-richtext th, .bb-richtext td { padding: 9px 12px; white-space: nowrap; }
}
/* ==========================================================================
Responsive — tablet and phone
Most of the layout is fluid already: two-column blocks stack at 1080px and
the nav collapses to the burger. These rules handle what fluid widths can't
— type and spacing tuned for a desktop reading distance, which on a phone
turns a page into far more scrolling than it needs.
========================================================================== */
/* --- Tablet --- */
@media (max-width: 1024px) {
.bb-section-head { margin-bottom: 40px; }
.bb-section-lede { margin-bottom: clamp(40px, 6vw, 60px); }
.bb-testimonials { max-width: 640px; }
.bb-amenities-grid, .bb-amenities-grid--tiles { grid-template-columns: repeat(2, 1fr); }
}
/* --- Phone --- */
@media (max-width: 680px) {
/* Line-height 2 is generous at a desktop measure; over a 40-character phone
line it reads as a gap between every line and doubles the section height. */
.bb-body, .bb-richtext p, .bb-card-text, .bb-person-bio, .bb-principle-text { line-height: 1.8; }
.bb-section-head { margin-bottom: 30px; }
.bb-section-lede { margin-bottom: 36px; }
.bb-section-intro { margin-bottom: 26px; }
.bb-section-head + .bb-section-intro { margin-top: -18px; }
.bb-kicker { letter-spacing: 3px; margin-bottom: 14px; }
/* .bb-h2 is a fixed 52px for desktop; that's too large once the viewport
itself is narrower than the heading's old fluid-clamp minimum. */
.bb-h2 { font-size: 32px; }
/* Grids that auto-fit to two narrow columns on a phone: one is easier to read
than two 150px ones with a wrapped label in each. Tiles drop to a single
column since its longer labels (memberships, certifications) wrap badly at 2-up. */
.bb-amenities-grid--joined { grid-template-columns: repeat(2, 1fr); }
.bb-amenities-grid--tiles { grid-template-columns: 1fr; }
.bb-amenity { padding: 34px 16px; }
.bb-amenity-label { margin-top: 16px; }
.bb-stats-grid { grid-template-columns: repeat(2, 1fr); }
.bb-stats-grid--detailed { grid-template-columns: 1fr; }
.bb-stat { padding: 30px 20px; }
.bb-featured-body .bb-btn { align-self: stretch; text-align: center; }
.bb-featured-location { margin-bottom: 28px; }
.bb-floorplan-facts { gap: 12px; }
.bb-commute-list { gap: 20px; }
.bb-commute-item { padding-bottom: 14px; }
.bb-testimonial-photo { width: 62px; height: 62px; margin-bottom: 24px; }
.bb-testimonial-nav { margin-top: 32px; gap: 16px; }
.bb-testimonial-nav button { width: 42px; height: 42px; }
.bb-footer-grid { gap: 32px; padding-bottom: 44px; }
.bb-footer-tagline { max-width: none; }
.bb-footer-social { margin-top: 24px; }
.bb-principle-number { margin-bottom: 4px; }
.bb-team--elevated .bb-person { padding: 14px 14px 24px; }
.bb-team--elevated .bb-person-body { padding: 0 6px; }
.bb-enquiry-card { padding: 32px 24px; }
.bb-hotspot { width: 11px; height: 11px; border-width: 2px; }
.bb-masterplan-caption { bottom: 12px; right: 12px; font-size: 11px; padding: 9px 12px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}