/**
* HouseBro Component CSS
*
* Covers only what Elementor's own widget/Style controls can't cleanly
* achieve — sticky/behavioral patterns, native-HTML accordion styling,
* and accessibility states. Everything here reads its values from
* global-tokens.css custom properties, never a hardcoded hex/px value
* that duplicates DESIGN_SYSTEM.md.
*/
/* Typography — DESIGN_SYSTEM.md Section 3. Generic tag selectors so every
heading/paragraph gets the locked scale by default, whether it comes
from an Elementor Heading widget's own markup or raw shortcode HTML —
a widget-specific style set via Elementor's own controls still wins
(later in the cascade, higher specificity), this only fills the gap
where none was set. */
body {
font-family: var(--hb-font-family);
font-size: var(--hb-font-size-body);
line-height: var(--hb-line-height-body);
color: var(--hb-color-ink);
}
/* Premium consistency pass (2026-07-13) — same reset.css-override pattern
as the heading fix below: the parent theme's default paragraph margin
is only 0.9rem (~14px) bottom, 0 top. Homepage sections read as
premium/breathing because their shortcode wrappers each carry their own
48-96px padding-block; pillar/city pages mix plain intro text
directly into post_content with no such wrapper, so it looked visibly
cramped next to the Homepage by comparison. One paragraph rhythm
sitewide instead of two different ones by accident of which template
a page happens to use. */
body p {
margin-block: 0 var(--hb-space-24);
}
/* Batch 8 fix (2026-07-12): the parent Hello Elementor theme's own
reset.css sets h1-h4 font-size/weight/line-height/margin too (a fixed
2.5rem/2rem/1.75rem/1.5rem, non-responsive, weight 500) and loads AFTER
this stylesheet — at equal specificity (bare tag selectors on both
sides), source order wins, so reset.css was silently overriding this
entire type scale everywhere on the site. Adding "body" to each
selector here is the minimal specificity bump needed to reliably win
regardless of load order, without resorting to !important. */
body h1, body h2, body h3, body h4 {
font-family: var(--hb-font-family);
color: var(--hb-color-ink);
margin: 0;
}
body h1 {
font-size: var(--hb-font-size-h1);
font-weight: 700;
line-height: var(--hb-line-height-h1);
}
body h2 {
font-size: var(--hb-font-size-h2);
font-weight: 700;
line-height: var(--hb-line-height-h2);
}
body h3 {
font-size: var(--hb-font-size-h3);
font-weight: 600;
line-height: var(--hb-line-height-h3);
}
body h4 {
font-size: var(--hb-font-size-h4);
font-weight: 600;
line-height: var(--hb-line-height-h4);
}
/* Design System Lock (Batch 14, 2026-07-12) — Hello Elementor's default
page template gives .entry-title (the page's own
, e.g. "About")
a fixed 600px width with auto margins, centering it while every other
heading and all body content on the same page is left-aligned. One
heading alignment sitewide — matches how [hb_hero]'s and every
.hb-main h2 already behave. */
.hb-main .page-header .entry-title {
width: auto;
max-width: none;
margin-inline: 0;
}
/* Premium Brand Consistency Pass (2026-07-13) — static pages (About,
Contact, Gallery, FAQ, Delhi NCR) had zero padding around the page
title, so it sat flush at the very top of the content area with no
breathing room — the single biggest "default WordPress page" tell
compared to the Homepage/pillar pages' full Hero card. Doesn't add a
Hero (no new section/markup), just gives the existing title the same
generous vertical rhythm every other section on the site already has. */
.hb-main .page-header {
padding-block: var(--hb-space-32) var(--hb-space-48);
}
@media (min-width: 1024px) {
.hb-main .page-header {
padding-block: var(--hb-space-48) var(--hb-space-64);
}
}
/* Section headings (Elementor Heading widgets placed before each shortcode
section) get consistent spacing/hierarchy regardless of which Elementor
style was picked per-widget — the missing "section hierarchy" rhythm. */
.hb-main h2 {
margin-block: var(--hb-space-64) var(--hb-space-32);
position: relative;
padding-block-end: var(--hb-space-16);
}
.hb-main h2::after {
content: '';
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
width: 48px;
height: 3px;
background: var(--hb-color-brass);
border-radius: var(--hb-radius-pill);
}
/* Premium Brand Consistency Pass (2026-07-13) — removed a zero-margin
override that read as ".hb-main > *:first-child h2" (intended to mean
"an h2 that is itself the first thing on the page") but CSS's
descendant combinator actually matched "any h2 anywhere inside
whatever .hb-main's first child happens to be" — and every page
template (WP's default page.php, Elementor's canvas output) wraps its
entire content in exactly one direct child of .hb-main, so this
silently zeroed the 64px top margin on literally every page's first
h2, sitewide. Invisible on Homepage/pillar pages (a full Hero card
already provides enough visual separation regardless), but on
About/Contact/Gallery/FAQ/Delhi NCR — whose plain WP page title has no
such card — it made the first section heading look glued directly to
the page title. ".hb-main h1 + h2" never matched anything in practice
(verified: no h1 on the site has an h2 as its literal next DOM
sibling), so removing both restores the intended 64px rhythm
everywhere with no loss of a real behavior. */
/* Layout */
.hb-section {
padding-block: var(--hb-space-48);
}
@media (min-width: 1024px) {
.hb-section {
padding-block: var(--hb-space-96);
}
}
.hb-container {
max-width: 1280px;
margin-inline: auto;
padding-inline: var(--hb-space-16);
}
@media (min-width: 1024px) {
.hb-container {
padding-inline: var(--hb-space-48);
}
}
/* Card */
.hb-card {
background: var(--hb-color-marble-white);
border: 1px solid var(--hb-color-divider);
border-radius: var(--hb-radius-card-lg);
box-shadow: var(--hb-shadow-premium-resting);
transition: box-shadow var(--hb-transition-duration) var(--hb-transition-easing),
transform var(--hb-transition-duration) var(--hb-transition-easing),
border-color var(--hb-transition-duration) var(--hb-transition-easing);
}
.hb-card:hover {
box-shadow: var(--hb-shadow-premium-hover);
transform: translateY(-4px);
border-color: var(--hb-color-brass);
}
/* Buttons */
.hb-btn {
border-radius: var(--hb-radius-button);
/* Premium Brand Consistency Pass (2026-07-13) — bumped from 44px (the
bare accessibility minimum) to 48px, Material Design's recommended
touch target size, since Call/WhatsApp are the single most-clicked
elements on the site and should feel unmistakably tappable, not
just technically compliant. */
min-height: 48px;
padding-inline: var(--hb-space-24);
font-size: var(--hb-font-size-button);
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--hb-space-8);
transition: filter var(--hb-transition-duration) var(--hb-transition-easing),
transform var(--hb-transition-duration) var(--hb-transition-easing);
text-decoration: none;
}
/* Icon System (Brand Asset Phase, 2026-07-14) — Call/WhatsApp icons,
sized to sit comfortably inside the 48px button without dominating the
label text. */
.hb-btn .hb-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Design System Lock (Batch 14, 2026-07-12) — Hello Elementor's default
page template underlines links inside its own content area (a higher-
specificity ".page-content a" / ".site-main a" rule than the bare
".hb-btn" above), so Call/WhatsApp buttons dropped into plain page
content (About, Contact, etc. — anywhere outside Elementor-rendered
sections) rendered as underlined text instead of a button. Confirmed
via computed style: the same button showed text-decoration:none in the
header but underline inside .page-content on the same page. */
.hb-main .hb-btn {
text-decoration: none;
}
/* Premium Brand Consistency Pass (2026-07-13) — the same Hello Elementor
default (".page-content a { color: #c36 }") that used to hit
.hb-pillar-link/.hb-sibling-service/.hb-before-after-link also hit the
tel:/mailto: links on the Contact page, which carry no class of their
own (they're plain prose links, not a styled component).
Rescoped from a ".page-content a" catch-all to this exact selector (UI
Polish Pass, 2026-07-14) — the broad version, even after excluding
.hb-btn/.hb-card by name, kept silently overriding other classless-
anchor components nested in .page-content (.hb-areas-we-serve-item a,
.hb-service-areas a — both already set their own ink/no-underline pill
styling, but with lower specificity than a ".page-content a" rule, so
they lost that fight without any visible error, sitewide, since Batch
4). A catch-all with a growing exclusion list has no natural end —
every future component nested in .page-content is a new potential
victim. Scoping directly to where the real bug actually lives (the
Contact card's phone/email rows) fixes it permanently: nothing else
inside .page-content is affected by this rule ever again. */
.hb-contact-card-row a {
color: var(--hb-color-brass);
text-decoration: underline;
}
.hb-contact-card-row a:hover {
text-decoration: none;
}
/* Bare CTA pairs (About/Gallery/FAQ/Delhi NCR end with a plain
…
…
,
no wrapping band) — styled to match .hb-final-cta-band's premium
card treatment used everywhere else, targeting the exact existing
markup rather than changing any content. */
.page-content p:has(> a.hb-btn-call) {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--hb-space-16);
padding: var(--hb-space-32) var(--hb-space-24);
margin-block: var(--hb-space-48) 0;
background: linear-gradient(135deg, var(--hb-color-marble-white) 0%, #fff 100%);
border-radius: var(--hb-radius-card);
box-shadow: var(--hb-shadow-resting);
}
@media (min-width: 1024px) {
.page-content p:has(> a.hb-btn-call) {
padding: var(--hb-space-64) var(--hb-space-48);
}
}
.page-content p:has(> a.hb-btn-call) br {
display: none;
}
.page-content p:has(> a.hb-btn-call) .hb-btn {
flex: 1 1 160px;
max-width: 280px;
min-height: 52px;
box-shadow: var(--hb-shadow-resting);
}
.hb-btn:active {
transform: translateY(1px);
}
.hb-btn-call {
background: var(--hb-color-brass);
/* Ink text, not white: white-on-brass measures ~4:1 contrast (fails
WCAG AA's 4.5:1 for normal-weight button text) — ink-on-brass
measures ~4.3:1. Same locked palette, just the correct pairing. */
color: var(--hb-color-ink);
}
.hb-btn-whatsapp {
background: var(--hb-color-whatsapp-green);
/* White-on-WhatsApp-green measures ~2:1 — badly fails legibility for
what is likely the single most-clicked element on the site.
Ink-on-green measures ~8.6:1. */
color: var(--hb-color-ink);
}
.hb-btn:hover {
filter: brightness(0.92);
}
.hb-btn:focus-visible {
outline: 2px solid var(--hb-color-ink);
outline-offset: 2px;
}
/* Badge */
.hb-badge-pill {
border-radius: var(--hb-radius-pill);
padding: var(--hb-space-4) var(--hb-space-16);
font-size: var(--hb-font-size-small);
font-weight: 600;
display: inline-block;
}
/* Trust Badge (COMPONENT_LIBRARY.md #13) — extends .hb-badge-pill above.
Icon (optional) + label sit inline; icon never carries meaning alone. */
.hb-trust-badge {
display: inline-flex;
align-items: center;
gap: var(--hb-space-8);
background: #fff;
color: var(--hb-color-ink);
border: 1px solid var(--hb-color-divider);
box-shadow: var(--hb-shadow-premium-resting);
}
.hb-trust-badge-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Accessibility utility */
.hb-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Front page's temporary fallback