/* ==================================================================
BC REAL ESTATE — CORE STYLES (mobile-first)
------------------------------------------------------------------
00 Tokens (fallbacks — real values come from Theme Options)
01 Base & typography
02 Layout helpers
03 Buttons, eyebrows, display type
04 Top bar
05 Header & navigation (mobile panel → desktop bar @1024)
06 Breadcrumb
07 Artistic section dividers
08 Forms (inquiry form) & contact card
09 Footer CTA band
10 Footer
11 Floating WhatsApp
12 Reveal animations
13 Elementor / Hello integration
Breakpoints: 600 (sm) · 768 (md) · 1024 (lg) · 1280 (xl)
================================================================== */
/* ==================================================================
00 TOKENS
================================================================== */
:root {
--bcre-accent: #E8642C;
--bcre-teal: #3DB8A4;
--bcre-bg: #111414;
--bcre-surface: #191E1E;
--bcre-surface-2: #1F2626;
--bcre-border: #1E3833;
--bcre-heading: #F4F3EF;
--bcre-text: #B9C6C2;
--bcre-muted: #7F928D;
--bcre-font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--bcre-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--bcre-base: 16px;
--bcre-container: 1200px;
--bcre-radius: 4px;
--bcre-divider-opacity: .7;
/* derived */
--bcre-gutter: clamp(16px, 4.5vw, 40px);
--bcre-sec-y: clamp(56px, 9vw, 112px);
--bcre-accent-soft: color-mix(in srgb, var(--bcre-accent) 14%, transparent);
--bcre-teal-soft: color-mix(in srgb, var(--bcre-teal) 12%, transparent);
--bcre-line: color-mix(in srgb, var(--bcre-border) 100%, transparent);
--bcre-ease: cubic-bezier(.22, .61, .36, 1);
--bcre-header-h: 68px;
}
/* ==================================================================
01 BASE & TYPOGRAPHY
================================================================== */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.bcre {
margin: 0;
background: var(--bcre-bg);
color: var(--bcre-text);
font-family: var(--bcre-font-body);
font-size: var(--bcre-base);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
.bcre h1, .bcre h2, .bcre h3, .bcre h4, .bcre h5, .bcre h6 {
font-family: var(--bcre-font-head);
color: var(--bcre-heading);
font-weight: 500;
line-height: 1.12;
letter-spacing: -.005em;
margin: 0 0 .5em;
}
.bcre p { margin: 0 0 1em; }
.bcre a { color: var(--bcre-teal); text-decoration: none; transition: color .2s; }
.bcre a:hover { color: var(--bcre-accent); }
.bcre img { max-width: 100%; height: auto; display: block; }
.bcre ::selection { background: var(--bcre-accent); color: #fff; }
.bcre :focus-visible { outline: 2px solid var(--bcre-accent); outline-offset: 3px; border-radius: 2px; }
.screen-reader-text {
border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
clip: auto; clip-path: none; height: auto; width: auto; z-index: 100000;
top: 8px; left: 8px; padding: 12px 18px; background: var(--bcre-accent); color: #fff;
}
/* ==================================================================
02 LAYOUT HELPERS
================================================================== */
.bcre-container {
width: 100%;
max-width: calc(var(--bcre-container) + (var(--bcre-gutter) * 2));
margin-inline: auto;
padding-inline: var(--bcre-gutter);
box-sizing: border-box;
}
.bcre *, .bcre *::before, .bcre *::after { box-sizing: border-box; }
@media (max-width: 599px) { .bcre-hide-sm { display: none !important; } }
@media (max-width: 767px) { .bcre-hide-md { display: none !important; } }
/* ==================================================================
03 BUTTONS · EYEBROWS · DISPLAY TYPE
================================================================== */
.bcre-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .6em;
padding: 15px 28px;
background: var(--bcre-accent);
color: #fff !important;
font-family: var(--bcre-font-body);
font-size: .95rem; font-weight: 500; letter-spacing: .02em;
border: 1px solid var(--bcre-accent);
border-radius: var(--bcre-radius);
cursor: pointer;
position: relative; overflow: hidden; isolation: isolate;
transition: transform .25s var(--bcre-ease), box-shadow .25s var(--bcre-ease), background .25s;
}
.bcre-btn::after { /* sheen */
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
transform: translateX(-120%); transition: transform .7s var(--bcre-ease);
}
.bcre-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--bcre-accent) 70%, transparent); }
.bcre-btn:hover::after { transform: translateX(120%); }
.bcre-btn .bcre-ico { transition: transform .25s var(--bcre-ease); }
.bcre-btn:hover .bcre-ico--arrow { transform: translateX(4px); }
.bcre-btn--ghost { background: transparent; color: var(--bcre-heading) !important; border-color: color-mix(in srgb, var(--bcre-teal) 45%, transparent); }
.bcre-btn--ghost:hover { border-color: var(--bcre-teal); box-shadow: none; }
.bcre-btn--sm { padding: 10px 18px; font-size: .85rem; }
.bcre-btn--block { width: 100%; }
.bcre-eyebrow,
.bcre .bcre-eyebrow { /* .bcre prefix beats ".card p" / ".bcre h3" rules */
display: inline-block;
font-family: var(--bcre-font-body);
font-size: .72rem; font-weight: 500;
letter-spacing: .24em; text-transform: uppercase;
color: var(--bcre-teal);
margin: 0 0 .9em;
}
.bcre-display {
font-size: clamp(2.3rem, 7vw, 4.4rem);
font-weight: 400 !important;
line-height: 1.04 !important;
}
.bcre-display em, .bcre h1 em, .bcre h2 em { font-style: italic; color: var(--bcre-accent); }
.bcre-lead { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--bcre-text); max-width: 38em; }
.bcre-ico { flex: none; display: inline-block; vertical-align: middle; }
/* ==================================================================
04 TOP BAR
================================================================== */
.bcre-topbar {
background: color-mix(in srgb, var(--bcre-bg) 70%, #000);
border-bottom: 1px solid var(--bcre-line);
font-size: .78rem; color: var(--bcre-muted);
}
.bcre-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.bcre-topbar__contact { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.bcre-topbar__contact li, .bcre-topbar__contact a { display: inline-flex; align-items: center; gap: 7px; color: var(--bcre-muted); }
.bcre-topbar__contact a:hover { color: var(--bcre-heading); }
.bcre-topbar__contact .bcre-ico { color: var(--bcre-teal); }
/* ==================================================================
05 HEADER & NAVIGATION
================================================================== */
.bcre-header {
position: relative; z-index: 900;
border-bottom: 1px solid transparent;
transition: border-color .3s, box-shadow .3s;
}
/* Blur lives on a pseudo-element: backdrop-filter on the header itself
would trap the fixed mobile panel inside the header box. */
.bcre-header::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: color-mix(in srgb, var(--bcre-bg) 88%, transparent);
-webkit-backdrop-filter: saturate(140%) blur(14px);
backdrop-filter: saturate(140%) blur(14px);
}
.bcre-sticky .bcre-header { position: sticky; top: 0; }
.admin-bar.bcre-sticky .bcre-header { top: 46px; }
@media (min-width: 783px) { .admin-bar.bcre-sticky .bcre-header { top: 32px; } }
.bcre-scrolled .bcre-header { border-bottom-color: var(--bcre-line); box-shadow: 0 10px 30px -18px rgba(0,0,0,.8); }
.bcre-header__inner { display: flex; align-items: center; gap: 16px; min-height: var(--bcre-header-h); }
/* glow line under header — appears on scroll */
.bcre-header__glow {
position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
background: linear-gradient(90deg, transparent, var(--bcre-teal) 30%, var(--bcre-accent) 50%, var(--bcre-teal) 70%, transparent);
opacity: 0; transition: opacity .4s;
}
.bcre-scrolled .bcre-header__glow { opacity: .55; }
/* ---- Logo lock-up: BC | REAL ESTATE / tagline ---- */
.bcre-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--bcre-heading) !important; margin-right: auto; line-height: 1; }
.bcre-logo__mark {
font-family: var(--bcre-font-head); font-weight: 600;
font-size: 2.1rem; color: var(--bcre-accent); letter-spacing: -.02em;
}
.bcre-logo__rule { width: 2px; align-self: stretch; margin: 6px 0; background: var(--bcre-accent); }
.bcre-logo__text { display: flex; flex-direction: column; gap: 5px; }
.bcre-logo__word { font-size: .92rem; letter-spacing: .14em; color: var(--bcre-heading); font-weight: 400; }
.bcre-logo__tag { font-size: .54rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bcre-teal); }
.bcre-logo__img { max-height: 52px; width: auto; }
@media (max-width: 380px) { .bcre-logo__tag { display: none; } }
.bcre-header__cta { display: none; }
/* ---- Burger ---- */
.bcre-burger {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; padding: 0; margin-right: -8px;
background: none; border: 0; cursor: pointer; color: var(--bcre-heading);
position: relative; z-index: 1001;
}
.bcre-burger__bars { position: relative; width: 24px; height: 16px; }
.bcre-burger__bars i {
position: absolute; left: 0; height: 1.5px; background: currentColor; border-radius: 2px;
transition: transform .35s var(--bcre-ease), opacity .2s, width .3s, top .35s var(--bcre-ease);
}
.bcre-burger__bars i:nth-child(1) { top: 0; width: 100%; }
.bcre-burger__bars i:nth-child(2) { top: 7px; width: 70%; }
.bcre-burger__bars i:nth-child(3) { top: 14px; width: 45%; background: var(--bcre-accent); }
.bcre-burger:hover .bcre-burger__bars i { width: 100%; }
.bcre-nav-open .bcre-burger__bars i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.bcre-nav-open .bcre-burger__bars i:nth-child(2) { opacity: 0; }
.bcre-nav-open .bcre-burger__bars i:nth-child(3) { top: 7px; width: 100%; transform: rotate(-45deg); }
/* ---- Mobile panel (default) ---- */
.bcre-nav {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000;
width: min(88vw, 380px);
padding: calc(var(--bcre-header-h) + 24px) 28px 32px;
background: var(--bcre-surface);
border-left: 1px solid var(--bcre-line);
display: flex; flex-direction: column; gap: 28px;
overflow-y: auto; overscroll-behavior: contain;
transform: translateX(105%); visibility: hidden;
transition: transform .45s var(--bcre-ease), visibility 0s linear .45s;
}
.bcre-nav::before { /* contour art inside the panel */
content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; pointer-events: none;
background: repeating-radial-gradient(circle, transparent 0 22px, color-mix(in srgb, var(--bcre-teal) 18%, transparent) 23px 24px);
-webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
}
.bcre-nav-open .bcre-nav { transform: none; visibility: visible; transition-delay: 0s; }
.admin-bar .bcre-nav { top: 46px; }
.bcre-nav-scrim {
position: fixed; inset: 0; z-index: 899; background: rgba(0,0,0,.55);
opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s;
}
.bcre-nav-open .bcre-nav-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
.bcre-nav-open { overflow: hidden; }
.bcre-nav__menu, .bcre-nav__menu ul { list-style: none; margin: 0; padding: 0; }
.bcre-nav__menu > li { border-bottom: 1px solid var(--bcre-line); position: relative; }
.bcre-nav__menu a {
display: block; padding: 15px 0;
font-family: var(--bcre-font-head); font-size: 1.5rem; color: var(--bcre-heading);
}
.bcre-nav__menu .current-menu-item > a, .bcre-nav__menu a:hover { color: var(--bcre-accent); }
.bcre-nav__menu .sub-menu { display: none; padding: 0 0 12px 14px; border-left: 1px solid var(--bcre-accent); }
.bcre-nav__menu .sub-menu a { font-family: var(--bcre-font-body); font-size: .95rem; padding: 8px 0; color: var(--bcre-text); }
.bcre-nav__menu .is-open > .sub-menu { display: block; }
.bcre-sub-toggle {
position: absolute; right: 0; top: 10px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; color: var(--bcre-teal);
}
.bcre-sub-toggle::before { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); transition: transform .3s; }
.is-open > .bcre-sub-toggle::before { transform: rotate(-135deg); }
.bcre-nav__extra { display: flex; flex-direction: column; gap: 18px; margin-top: auto; position: relative; }
.bcre-nav__phone { display: inline-flex; align-items: center; gap: 10px; color: var(--bcre-heading) !important; }
/* ---- Desktop bar ---- */
@media (min-width: 1024px) {
:root { --bcre-header-h: 84px; }
.bcre-burger, .bcre-nav-scrim, .bcre-nav__extra { display: none !important; }
.bcre-header__cta { display: inline-flex; }
.bcre-nav {
position: static; width: auto; padding: 0; background: none; border: 0;
transform: none; visibility: visible; overflow: visible; flex-direction: row;
}
.bcre-nav::before { display: none; }
.bcre-nav__menu { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.bcre-nav__menu > li { border: 0; }
.bcre-nav__menu > li > a {
font-family: var(--bcre-font-body); font-size: .86rem; letter-spacing: .06em;
padding: 30px 0; color: var(--bcre-text); position: relative;
}
.bcre-nav__menu > li > a::after { /* underline that grows from centre */
content: ""; position: absolute; left: 50%; right: 50%; bottom: 22px; height: 1px; background: var(--bcre-accent);
transition: left .3s var(--bcre-ease), right .3s var(--bcre-ease);
}
.bcre-nav__menu > li > a:hover::after,
.bcre-nav__menu > .current-menu-item > a::after,
.bcre-nav__menu > .current-menu-ancestor > a::after { left: 0; right: 0; }
.bcre-nav__menu > .current-menu-item > a, .bcre-nav__menu > li > a:hover { color: var(--bcre-heading); }
.bcre-sub-toggle { display: none; }
.bcre-nav__menu .sub-menu {
display: block; position: absolute; top: 100%; left: -18px; min-width: 230px;
padding: 10px 0; background: var(--bcre-surface); border: 1px solid var(--bcre-line); border-top: 2px solid var(--bcre-accent);
opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s var(--bcre-ease);
}
.bcre-nav__menu li:hover > .sub-menu, .bcre-nav__menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.bcre-nav__menu .sub-menu a { padding: 9px 18px; font-size: .88rem; }
.bcre-nav__menu .sub-menu a:hover { background: var(--bcre-surface-2); }
.bcre-logo__mark { font-size: 2.5rem; }
}
/* ==================================================================
06 BREADCRUMB
================================================================== */
.bcre-bc {
border-bottom: 1px solid var(--bcre-line);
background: color-mix(in srgb, var(--bcre-surface) 55%, transparent);
font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
}
.bcre-bc ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; list-style: none; margin: 0; padding: 13px 0; }
.bcre-bc li { display: inline-flex; align-items: center; min-width: 0; }
.bcre-bc a { color: var(--bcre-muted); }
.bcre-bc a:hover { color: var(--bcre-accent); }
.bcre-bc [aria-current] { color: var(--bcre-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.bcre-bc__sep { color: var(--bcre-accent); opacity: .8; }
/* ==================================================================
07 ARTISTIC SECTION DIVIDERS
------------------------------------------------------------------
Usage in any HTML:
Force a style: add bcre-divider--contour | --skyline | --horizon | --wave
Default style comes from Theme Options › Section Dividers (body class).
Colour = brand gradient (teal → orange → teal) fading at both ends,
so the line always follows the Brand Colours you set.
================================================================== */
.bcre-divider {
--div-h: 64px;
--div-mask: none;
--div-mask-size: 100% 100%;
--div-mask-pos: center;
position: relative;
height: var(--div-h);
width: 100%;
max-width: calc(var(--bcre-container) + (var(--bcre-gutter) * 2));
margin: 0 auto;
pointer-events: none;
}
.bcre-divider::before { /* the line art */
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--bcre-teal) 70%, transparent) 18%,
var(--bcre-teal) 34%,
var(--bcre-accent) 50%,
var(--bcre-teal) 66%,
color-mix(in srgb, var(--bcre-teal) 70%, transparent) 82%,
transparent 100%);
opacity: var(--bcre-divider-opacity);
-webkit-mask: var(--div-mask); -webkit-mask-size: var(--div-mask-size); -webkit-mask-position: var(--div-mask-pos); -webkit-mask-repeat: no-repeat;
mask: var(--div-mask); mask-size: var(--div-mask-size); mask-position: var(--div-mask-pos); mask-repeat: no-repeat;
transition: clip-path 1.6s var(--bcre-ease);
}
.bcre-divider::after { /* soft ember glow at the centre */
content: ""; position: absolute; left: 50%; top: 50%; width: min(420px, 70%); height: 120%;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, color-mix(in srgb, var(--bcre-accent) 22%, transparent), transparent);
opacity: calc(var(--bcre-divider-opacity) * .7); filter: blur(10px);
}
/* --- CONTOUR: topographic land lines (default) --- */
body.bcre-div-contour .bcre-divider,
body .bcre-divider.bcre-divider--contour {
--div-h: 72px;
--div-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 72' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 36 C150 36 220 18 340 22 S520 52 600 40 S780 14 880 24 S1060 40 1200 36'/%3E%3Cpath vector-effect='non-scaling-stroke' opacity='.55' d='M0 44 C160 44 230 28 345 31 S525 60 600 49 S785 24 885 33 S1065 48 1200 44'/%3E%3Cpath vector-effect='non-scaling-stroke' opacity='.3' d='M0 52 C170 52 240 38 350 40 S530 68 600 58 S790 34 890 42 S1070 56 1200 52'/%3E%3Cpath vector-effect='non-scaling-stroke' opacity='.55' d='M0 28 C140 28 215 9 335 13 S515 44 600 31 S775 5 875 15 S1055 32 1200 28'/%3E%3Cpath vector-effect='non-scaling-stroke' opacity='.3' d='M120 20 C200 20 250 2 330 5 S500 34 600 22 S760 0 860 8'/%3E%3C/g%3E%3C/svg%3E");
}
/* --- SKYLINE: fine line with a Nairobi-esque silhouette at centre --- */
body.bcre-div-skyline .bcre-divider,
body .bcre-divider.bcre-divider--skyline {
--div-h: 70px;
--div-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 70'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round' d='M0 64 H40 V52 H52 V44 H60 V52 H72 V36 H84 V58 H96 V30 L104 22 L112 30 V48 H124 V12 H128 V4 H132 V12 H136 V64 H148 V40 H160 V26 H172 V40 H178 V56 H190 V18 L200 10 L210 18 V60 H222 V44 H236 V34 H246 V50 H258 V64 H300'/%3E%3Cg fill='%23000'%3E%3Crect x='127' y='20' width='2' height='2'/%3E%3Crect x='131' y='28' width='2' height='2'/%3E%3Crect x='127' y='36' width='2' height='2'/%3E%3Crect x='199' y='26' width='2' height='2'/%3E%3Crect x='203' y='36' width='2' height='2'/%3E%3Crect x='163' y='34' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(#000, #000);
--div-mask-size: 300px 70px, 100% 1px;
--div-mask-pos: center bottom, center calc(100% - 6px);
}
/* --- HORIZON: fading line, compass diamond & dots --- */
body.bcre-div-horizon .bcre-divider,
body .bcre-divider.bcre-divider--horizon {
--div-h: 48px;
--div-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M60 6 L78 24 L60 42 L42 24 Z'/%3E%3Cpath d='M60 14 L70 24 L60 34 L50 24 Z'/%3E%3C/g%3E%3Ccircle cx='60' cy='24' r='2.4'/%3E%3Ccircle cx='24' cy='24' r='1.6'/%3E%3Ccircle cx='96' cy='24' r='1.6'/%3E%3Ccircle cx='10' cy='24' r='1'/%3E%3Ccircle cx='110' cy='24' r='1'/%3E%3C/svg%3E"),
linear-gradient(90deg, #000 calc(50% - 80px), transparent calc(50% - 80px), transparent calc(50% + 80px), #000 calc(50% + 80px));
--div-mask-size: 120px 48px, 100% 1px;
--div-mask-pos: center, center;
}
/* --- WAVE: soft double wave --- */
body.bcre-div-wave .bcre-divider,
body .bcre-divider.bcre-divider--wave {
--div-h: 56px;
--div-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.2' d='M0 30 Q75 10 150 30 T300 30 T450 30 T600 30 T750 30 T900 30 T1050 30 T1200 30'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1' opacity='.45' d='M0 36 Q75 18 150 36 T300 36 T450 36 T600 36 T750 36 T900 36 T1050 36 T1200 36'/%3E%3C/g%3E%3C/svg%3E");
}
/* --- NONE: hide default dividers (forced ones still show) --- */
body.bcre-div-none .bcre-divider:not([class*="bcre-divider--"]) { display: none; }
/* Draw-in animation: grows outward from the centre */
.bcre-div-animate.bcre-js-reveal .bcre-divider::before { clip-path: inset(0 50% 0 50%); }
.bcre-div-animate.bcre-js-reveal .bcre-divider.is-in::before { clip-path: inset(0 0 0 0); }
.bcre-div-animate.bcre-js-reveal .bcre-divider::after { opacity: 0; transition: opacity 1.2s .5s; }
.bcre-div-animate.bcre-js-reveal .bcre-divider.is-in::after { opacity: calc(var(--bcre-divider-opacity) * .7); }
@media (max-width: 599px) {
body .bcre-divider { --div-h: 52px; }
body.bcre-div-skyline .bcre-divider, body .bcre-divider.bcre-divider--skyline { --div-mask-size: 220px 52px, 100% 1px; }
}
/* ==================================================================
08 FORMS & CONTACT CARD
================================================================== */
.bcre-form { display: grid; gap: 16px; }
.bcre-form__row { display: grid; gap: 16px; }
@media (min-width: 600px) { .bcre-form__row--2 { grid-template-columns: 1fr 1fr; } }
.bcre-field { margin: 0; display: grid; gap: 7px; }
.bcre-field label {
font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bcre-teal);
}
.bcre-form input[type="text"], .bcre-form input[type="email"], .bcre-form input[type="tel"],
.bcre-form select, .bcre-form textarea {
width: 100%; padding: 13px 14px;
background: var(--bcre-surface-2); color: var(--bcre-heading);
border: 1px solid var(--bcre-line); border-radius: var(--bcre-radius);
font: inherit; font-size: 16px; /* 16px stops iOS zoom */
transition: border-color .2s, box-shadow .2s, background .2s;
-webkit-appearance: none; appearance: none;
}
.bcre-form select {
background-image: linear-gradient(45deg, transparent 50%, var(--bcre-teal) 50%), linear-gradient(135deg, var(--bcre-teal) 50%, transparent 50%);
background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px;
}
.bcre-form textarea { resize: vertical; min-height: 120px; }
.bcre-form ::placeholder { color: var(--bcre-muted); opacity: .7; }
.bcre-form input:focus, .bcre-form select:focus, .bcre-form textarea:focus {
outline: 0; border-color: var(--bcre-teal); background: color-mix(in srgb, var(--bcre-surface-2) 80%, var(--bcre-teal));
box-shadow: 0 0 0 3px var(--bcre-teal-soft);
}
.bcre-form .bcre-btn { margin-top: 6px; justify-content: space-between; padding: 17px 22px; }
.bcre-form__fine { font-size: .78rem; color: var(--bcre-muted); margin: 0; }
.bcre-form__notice { padding: 14px 16px; border-radius: var(--bcre-radius); font-size: .92rem; border-left: 3px solid; }
.bcre-form__notice--ok { background: var(--bcre-teal-soft); border-color: var(--bcre-teal); color: var(--bcre-heading); }
.bcre-form__notice--err { background: var(--bcre-accent-soft); border-color: var(--bcre-accent); color: var(--bcre-heading); }
.bcre-form__about {
display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--bcre-line); border-left: 3px solid var(--bcre-accent);
background: var(--bcre-accent-soft); border-radius: var(--bcre-radius);
}
.bcre-form__about .bcre-eyebrow { margin: 0; font-size: .64rem; }
.bcre-form__about a { font-family: var(--bcre-font-head); font-size: 1.3rem; color: var(--bcre-heading); }
.bcre-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.bcre-contact-card__title { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin-bottom: 1.1em !important; }
.bcre-contact-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 22px; }
.bcre-contact-list li { display: flex; gap: 16px; align-items: flex-start; color: var(--bcre-heading); line-height: 1.6; }
.bcre-contact-list .bcre-eyebrow { display: block; margin-bottom: 4px; font-size: .64rem; }
.bcre-contact-list a { color: var(--bcre-heading); }
.bcre-contact-list a:hover { color: var(--bcre-accent); }
.bcre-contact-list__ico {
flex: none; width: 44px; height: 44px; display: grid; place-items: center;
border: 1px solid var(--bcre-line); background: var(--bcre-surface-2); color: var(--bcre-accent); border-radius: var(--bcre-radius);
}
/* ==================================================================
09 FOOTER CTA BAND
================================================================== */
.bcre-cta-band {
position: relative; overflow: hidden; text-align: center;
background: color-mix(in srgb, var(--bcre-bg) 60%, #000);
padding-bottom: var(--bcre-sec-y);
}
.bcre-cta-band::before { /* concentric "legacy rings" */
content: ""; position: absolute; left: 50%; top: 55%; width: 900px; height: 900px; transform: translate(-50%, -50%); pointer-events: none;
background: repeating-radial-gradient(circle, transparent 0 58px, color-mix(in srgb, var(--bcre-teal) 14%, transparent) 59px 60px);
-webkit-mask: radial-gradient(circle, #000 15%, transparent 62%); mask: radial-gradient(circle, #000 15%, transparent 62%);
}
.bcre-cta-band__inner { position: relative; padding-top: clamp(40px, 7vw, 80px); max-width: 860px; }
.bcre-cta-band .bcre-display { font-size: clamp(2.1rem, 6vw, 3.8rem); margin-bottom: .45em; }
.bcre-cta-band .bcre-lead { margin: 0 auto 2em; color: var(--bcre-muted); }
/* ==================================================================
10 FOOTER
================================================================== */
.bcre-footer {
background: color-mix(in srgb, var(--bcre-bg) 60%, #000);
border-top: 1px solid var(--bcre-line);
padding-top: clamp(48px, 7vw, 80px);
font-size: .92rem;
}
.bcre-footer__grid { display: grid; gap: 36px 24px; grid-template-columns: 1fr 1fr; }
.bcre-footer__brand { grid-column: 1 / -1; max-width: 360px; }
.bcre-footer__brand p { color: var(--bcre-muted); margin: 18px 0 20px; font-size: .9rem; }
.bcre-footer .bcre-logo__mark { font-size: 1.8rem; }
.bcre-footer .bcre-eyebrow { font-size: .66rem; margin-bottom: 1.3em; font-family: var(--bcre-font-body); }
.bcre-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.bcre-footer__menu a, .bcre-footer__menu li { color: var(--bcre-muted); }
.bcre-footer__menu a { position: relative; transition: color .2s, padding .25s var(--bcre-ease); }
.bcre-footer__menu a:hover { color: var(--bcre-heading); padding-left: 10px; }
.bcre-footer__menu a::before {
content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--bcre-accent); transition: width .25s var(--bcre-ease);
}
.bcre-footer__menu a:hover::before { width: 6px; }
.bcre-footer__contact { grid-column: 1 / -1; }
.bcre-footer__contact .bcre-footer__menu { word-break: break-word; }
@media (min-width: 768px) {
.bcre-footer__grid { grid-template-columns: repeat(3, 1fr); }
.bcre-footer__contact { grid-column: auto; }
}
@media (min-width: 1024px) {
.bcre-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; }
.bcre-footer__brand { grid-column: auto; }
}
.bcre-footer__bottom {
display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
margin-top: clamp(40px, 6vw, 72px); padding: 24px 0 calc(24px + env(safe-area-inset-bottom));
border-top: 1px solid var(--bcre-line);
font-size: .8rem; color: var(--bcre-muted);
}
.bcre-footer__bottom p { margin: 0; }
.bcre-footer__tagline { font-style: italic; letter-spacing: .2em; text-transform: uppercase; color: var(--bcre-teal); font-size: .68rem; }
@media (min-width: 768px) { .bcre-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
/* Social icons (shared) */
.bcre-socials { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.bcre-socials a {
display: grid; place-items: center; width: 38px; height: 38px;
border: 1px solid var(--bcre-line); border-radius: 50%; color: var(--bcre-text);
transition: color .2s, border-color .2s, background .2s, transform .25s var(--bcre-ease);
}
.bcre-socials a:hover { color: #fff; background: var(--bcre-accent); border-color: var(--bcre-accent); transform: translateY(-2px); }
.bcre-socials--topbar a { width: 28px; height: 28px; border: 0; color: var(--bcre-muted); }
.bcre-socials--topbar .bcre-ico { width: 15px; height: 15px; }
.bcre-socials--topbar a:hover { background: none; color: var(--bcre-accent); transform: none; }
/* ==================================================================
11 FLOATING WHATSAPP
================================================================== */
.bcre-wa-float {
position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 800;
width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%;
background: #25D366; color: #fff !important;
box-shadow: 0 10px 30px -8px rgba(0,0,0,.6);
transition: transform .3s var(--bcre-ease);
}
.bcre-wa-float::before { /* gentle pulse ring */
content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366;
animation: bcre-pulse 2.6s var(--bcre-ease) infinite;
}
.bcre-wa-float:hover { transform: scale(1.06); }
@keyframes bcre-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@media (min-width: 1024px) { .bcre-wa-float { right: 28px; bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .bcre-wa-float::before { animation: none; } }
/* ==================================================================
12 REVEAL ANIMATIONS (only when JS is running)
================================================================== */
.bcre-js-reveal .bcre-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--bcre-ease), transform .9s var(--bcre-ease); }
.bcre-js-reveal .bcre-reveal.is-in { opacity: 1; transform: none; }
.bcre-js-reveal .bcre-reveal[data-delay="1"] { transition-delay: .1s; }
.bcre-js-reveal .bcre-reveal[data-delay="2"] { transition-delay: .2s; }
.bcre-js-reveal .bcre-reveal[data-delay="3"] { transition-delay: .3s; }
/* ==================================================================
13 ELEMENTOR / HELLO INTEGRATION
------------------------------------------------------------------
Any Elementor container holding a BC snippet loses its padding so
sections run edge-to-edge (the snippet brings its own container).
================================================================== */
.e-con:has(.bcre-page),
.e-con:has(.bcre-page) > .e-con-inner {
--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
--content-width: 100%; --width: 100%; --gap: 0px;
max-width: 100%;
}
.elementor-widget-html:has(.bcre-page),
.elementor-widget-shortcode:has(.bcre-page) { width: 100%; }
.elementor-widget-html:has(.bcre-page) .elementor-widget-container { margin: 0; padding: 0; }
.bcre .site-main:not(.elementor-page) > .page-content { /* non-Elementor pages */
max-width: calc(var(--bcre-container) + (var(--bcre-gutter) * 2)); margin-inline: auto; padding: var(--bcre-sec-y) var(--bcre-gutter);
}
.bcre .page-header .entry-title { color: var(--bcre-heading); }
/* Page shortcode used in the plain WordPress editor (no Elementor):
lift Hello's 1140px box and padding so sections run edge-to-edge. */
.bcre .site-main:has(.bcre-page) { max-width: none !important; width: 100%; padding-inline: 0 !important; margin-inline: 0 !important; }
.bcre .site-main:has(.bcre-page) > .page-content { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.bcre .site-main:has(.bcre-page) > .page-content > p:empty { display: none; } /* stray from the editor */