/* ============================================================
HIB.CO.IL — Design System
Platform: Professional Service Directory
Direction: RTL Hebrew
Aesthetic: Simple Authority — clean, trustworthy, conversion-focused
============================================================ */
/* ============================================================
FONT LOADING — Local fonts: Ploni (body/UI), BarLev (headings), Shabtai (design premium)
============================================================ */
/* — Ploni: operational system font — body, UI, forms, nav — */
@font-face {
font-family: "Ploni";
src: url("fonts/Ploni/Ploni-Regular.woff2") format("woff2"),
url("fonts/Ploni/Ploni-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Ploni";
src: url("fonts/Ploni/Ploni-Medium.woff2") format("woff2"),
url("fonts/Ploni/Ploni-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Ploni";
src: url("fonts/Ploni/Ploni-DemiBold.woff2") format("woff2"),
url("fonts/Ploni/Ploni-DemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Ploni";
src: url("fonts/Ploni/Ploni-Bold.woff2") format("woff2"),
url("fonts/Ploni/Ploni-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Ploni";
src: url("fonts/Ploni/Ploni-Light.woff2") format("woff2"),
url("fonts/Ploni/Ploni-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* — BarLev: authority + hierarchy font — headings, Plumbing & Renovation heroes — */
@font-face {
font-family: "BarLev";
src: url("fonts/BarLev/BarLev-Regular.woff2") format("woff2"),
url("fonts/BarLev/BarLev-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "BarLev";
src: url("fonts/BarLev/BarLev-Medium.woff2") format("woff2"),
url("fonts/BarLev/BarLev-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "BarLev";
src: url("fonts/BarLev/BarLev-Bold.woff2") format("woff2"),
url("fonts/BarLev/BarLev-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "BarLev";
src: url("fonts/BarLev/BarLev-UltraBold.woff2") format("woff2"),
url("fonts/BarLev/BarLev-UltraBold.woff") format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* — Shabtai: premium accent font — Architecture & Interior Design domain only — */
@font-face {
font-family: "Shabtai";
src: url("fonts/Shabtai/Shabtai-Regular.woff2") format("woff2"),
url("fonts/Shabtai/Shabtai-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Shabtai";
src: url("fonts/Shabtai/Shabtai-Bold.woff2") format("woff2"),
url("fonts/Shabtai/Shabtai-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* — Danidin: signature display face (shared with amirsaban.co.il brand) —
Single black master; used for hero / display headlines only. — */
@font-face {
font-family: "Danidin";
src: url("fonts/Danidin/danidin-black.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Danidin Stencil";
src: url("fonts/Danidin/danidin-stencil.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* — Almoni: amirsaban brand body alternate (available; body stays Ploni) — */
@font-face {
font-family: "Almoni";
src: url("fonts/Almoni/almoni-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Almoni";
src: url("fonts/Almoni/almoni-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Almoni";
src: url("fonts/Almoni/almoni-black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* IBM Plex Mono — self-hosted editorial NUMERALS only (Latin/digits; contains no
Hebrew glyphs by design, so any Hebrew in a mono-scoped element degrades through
the --hib-font-mono stack to Ploni rather than a spaced system fallback). The
single Regular face covers the 400–500 range the numerals use; this replaces the
former Google-Fonts CDN link (R1 — zero third-party font requests). */
@font-face {
font-family: "IBM Plex Mono";
src: url("fonts/PlexMono/IBMPlexMono-Regular.woff2") format("woff2");
font-weight: 400 500;
font-style: normal;
font-display: swap;
}
/* ============================================================
TOKEN RULES
1. Repeated standalone values become tokens.
2. Intentional dependent values derive from existing tokens.
3. Local or one-off variations do not justify new tokens.
4. Use semantic tokens for reusable roles and keep the system minimal.
============================================================ */
/* ============================================================
1. CSS CUSTOM PROPERTIES (TOKENS)
============================================================ */
:root {
/* — Neutral Palette — */
--hib-neutral-0: #FFFFFF;
--hib-neutral-25: #FCFCFA;
--hib-neutral-50: #F6F7F4;
--hib-neutral-100: #EEF1ED;
--hib-neutral-200: #E1E5E0;
--hib-neutral-300: #CED4CE;
--hib-neutral-400: #A1AAA3;
--hib-neutral-500: #6D7570;
--hib-neutral-600: #58605B;
--hib-neutral-700: #414741;
--hib-neutral-800: #2A2E2B;
--hib-neutral-900: #171A18;
/* — Semantic Colors — (amirsaban brand: cool deep-blue ink + azure-gray surfaces) */
--hib-bg: #F4F7FB;
--hib-surface: #FFFFFF;
--hib-surface-soft: #ECF2F9;
--hib-text: #0E2C54;
--hib-text-strong: #0B2546;
--hib-text-secondary: #3A4D6B;
--hib-text-muted: #51617A;
--hib-border: #CFD8E6;
--hib-rule-soft: #E1E8F2;
--hib-divider: #D8E0EC;
--hib-overlay: rgba(11, 37, 70, 0.55);
/* —for real UI boundaries / states — */
--hib-border-strong: #8294AE;
/* — Feedback — */
--hib-success: #2E7D5A;
--hib-success-soft: #EAF6F0;
--hib-warning: #B8852F;
--hib-warning-soft: #FBF2E2;
--hib-error: #B94B48;
--hib-error-soft: #F9ECEB;
/* Error TEXT reads in a deeper red than the signal colour. `--hib-error`
stays the committed border/tint/icon identity, but at small type it left
almost no contrast margin — 5.04:1 on white and 4.38:1 on its own tint,
the second of which is below AA. Splitting the ink off keeps the error
looking the same while the sentence about it stays legible (P3d2). */
--hib-error-ink: #A33A37;
--hib-info: #2E67C7;
--hib-info-soft: #EAF1FD;
--hib-rating-star: var(--hib-signature); /* review stars are the amber signature accent (R2 §C) */
/* — Brand: deep premium royal + indigo (deepened from amir azure for premium) — */
--hib-primary: #1B4AB3;
--hib-primary-hover: #15398C;
--hib-accent: #16357F;
--hib-accent-hover: #0F2A66;
--hib-domain-soft: #EAF0FA;
--hib-domain-soft-hover: #DDE7F6;
--hib-domain-panel-soft: #EEF3FB;
--hib-domain-surface-soft: #EDF2FA;
--hib-domain-hero-glow: rgba(27,74,179,.07);
--hib-domain-line: #D2DEF0;
--hib-domain-tag-soft: #E4ECF8;
/* — Dark-theme tokens (hero-dark, cta-noir, amir-section, domain-hero-v2) — navy block — */
--hib-gold: #1B4AB3; /* legacy "gold" role → royal; light/dark spots overridden in hib-extra */
--hib-dark-bg: #081E3A;
--hib-dark-text: #EAF1FB;
/* — Semantic dark/on-dark roles (Packages 1A + 1B) —
1A introduced these as byte-identical stand-ins for live literals; 1B is
the approved consolidation pass: editorial hero shells joined the brand
navy (dark-shell now derives from dark-bg), and the on-dark text family
reads through a four-step ladder (default / soft / muted / faint) plus the
translated primary accent. Exactly three dark surfaces remain — dark-bg,
dark-raised, dark-deep — and any new dark value must justify a fourth. */
--hib-dark-shell: var(--hib-dark-bg); /* hero/section shells — folded into brand navy (1B) */
--hib-dark-raised: #0B2546; /* raised dark media/panel tone + gradient stop */
--hib-dark-deep: #071A28; /* footer shell — the deepest surface on the site */
--hib-dark-overlay: rgba(17, 24, 39, .5); /* scrim behind the mobile menu drawer */
--hib-on-dark: #F4F8FF; /* on-dark/default — titles on dark shells */
--hib-on-dark-soft: rgba(225, 234, 250, .82); /* on-dark/soft — ledes, descriptions */
--hib-on-dark-muted: rgba(225, 234, 250, .74); /* on-dark/muted — metadata, secondary lines */
--hib-on-dark-faint: rgba(225, 234, 250, .55); /* on-dark/faint — placeholders, separators */
--hib-primary-on-dark: #A9C6FF; /* the primary accent translated for dark surfaces */
--hib-border-on-dark: rgba(255, 255, 255, .12); /* hairline on dark surfaces */
--hib-border-accent: rgba(29, 84, 196, .12); /* royal-tinted hairline on light surfaces */
/* — Domain shorthand (default = plumbing) — navy hero, royal accents — */
--hib-domain-hero: #081E3A;
--hib-domain-btn: #15398C;
--hib-domain-accent: #1B4AB3;
/* — Signature material & accent (redesign programme Revised 3 · §C/§D1) —
The "חותם אישי" direction adds two things to the committed navy+azure system,
both deliberately restrained: a warm PAPER material for human evidence
(testimony / the founder's word carried on paper; ≤15%, never body/UI cards)
and a single AMBER signature accent (≤5%) reserved for the marks that read as
Amir's own hand — the seal's core, review stars, a quote apostrophe, a
signature line. Azure stays the primary UI accent; amber never competes with
it. The graphic tone is `--hib-signature`; text sits in `--hib-signature-ink`
so a word set in the accent still clears AA (8A5410 ≈ 6.3:1 on white / paper). */
--hib-signature: #B8741A; /* graphic amber — glyphs, stars, rules */
--hib-signature-ink: #8A5410; /* text amber — clears AA on white/paper */
--hib-signature-soft: #F6ECDC; /* faint amber wash for a signature chip */
--hib-paper: #FAF7F0; /* testimony/evidence paper surface */
--hib-paper-line: #E9E2D4; /* the paper's ruled hairline */
--hib-paper-ink: #33302A; /* body ink that reads warm on paper */
/* — Spacing (4px base) — */
--hib-space-1: 4px;
--hib-space-2: 8px;
--hib-space-3: 12px;
--hib-space-4: 16px;
--hib-space-5: 20px;
--hib-space-6: 24px;
--hib-space-7: 32px;
--hib-space-8: 40px;
--hib-space-9: 48px;
--hib-space-10: 56px;
--hib-space-11: 64px;
--hib-space-12: 80px;
--hib-space-13: 96px;
--hib-space-14: 120px;
/* — Radius —
Seven semantic steps, one meaning each. Each step is at least a quarter
larger than the one below it, so every step is legible as a distinct shape.
Nesting rule: an inner element's radius = outer radius − outer padding,
floored at the next token down (hero search shell 12px with 8px padding →
inner submit 5px). `pill` is reserved for genuine badges, status markers,
toggleable/dismissible filter tokens and square-to-circle controls — never
for an ordinary action or a wide static strip. */
--hib-radius-tiny: 3px; /* hairline details: rules, progress bars, indicators */
--hib-radius-xs: 5px; /* controls: every button, nav/menu link, pagination */
--hib-radius-icon: 8px; /* icon tiles and square micro-media, 32–72px */
--hib-radius-s: 8px; /* fields and small panels: inputs, selects, alerts */
--hib-radius-card: var(--hib-radius-m); /* DEPRECATED alias → -m; kept so consumers still resolve */
--hib-radius-m: 10px; /* cards and panels — the one card radius */
--hib-radius-section: var(--hib-radius-xl); /* DEPRECATED alias → -xl */
--hib-radius-l: 12px; /* large surfaces: search shells, media frames, panels */
--hib-radius-xl: 14px; /* section shells: full-bleed CTA bands, hero media */
--hib-radius-pill: 999px; /* genuine pills only — see the note above */
/* — Elevation —
Five resting levels, two tints, and that is the whole system:
e0 border only — a bounded surface with no lift (cat cards, dividers)
e1 --hib-shadow-card resting cards and panels
e2 --hib-shadow-m raised panels: sidebar cards, feature panels, steppers
e3 --hib-shadow-l floating layers: dropdowns, the directory search shell
e4 --hib-shadow-band hero/CTA bands, hero portraits, lightbox — the ceiling
Hover lift is --hib-shadow-card-hover, shared by every card that lifts.
Tints: neutral ink rgba(16,24,40,·) on light surfaces; navy rgba(11,37,70,·)
for dark-context bands (e4). Royal rgba(27,74,179,·) is reserved for the
primary button and the focus ring; pure black only inside the button-invert
recipe on dark bands. A new shadow must join a level, not invent a sixth. */
--hib-shadow-s: 0 4px 12px rgba(16,24,40,.06); /* subtle hover lift for micro-surfaces */
--hib-shadow-m: 0 8px 24px rgba(16,24,40,.08);
--hib-shadow-l: 0 16px 40px rgba(16,24,40,.10);
--hib-shadow-focus: 0 0 0 3px rgba(29,84,196,.22);
--hib-shadow-btn: 0 10px 24px -10px rgba(27, 74, 179, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
--hib-shadow-btn-hover: 0 16px 32px -12px rgba(27, 74, 179, .85), inset 0 1px 0 rgba(255, 255, 255, .2);
--hib-shadow-card: 0 1px 2px rgba(16,24,40,0.04);
--hib-shadow-card-hover: 0 20px 44px -20px rgba(16,24,40,0.22), 0 4px 12px -4px rgba(16,24,40,0.10);
--hib-shadow-band: 0 24px 56px -24px rgba(11, 37, 70, .35);
--hib-shadow-btn-invert: 0 4px 16px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.10);
--hib-shadow-btn-invert-hover: 0 8px 28px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.10);
/* — Typography — */
--hib-font-body: "Ploni", "Almoni", "Arial Hebrew", Arial, sans-serif;
--hib-font-ui: var(--hib-font-body); /* alias — same Ploni stack */
--hib-font-display: "Danidin", "BarLev", "Arial Hebrew Bold", Arial, sans-serif; /* signature display (amirsaban) — now governs all headings */
--hib-font-heading: var(--hib-font-display); /* alias — same Danidin stack */
--hib-font-hero: "Danidin", "BarLev", "Arial Hebrew Bold", Arial, sans-serif; /* signature display (amirsaban) */
--hib-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "Ploni", "Almoni", "Arial Hebrew", monospace; /* editorial NUMERALS only; Hebrew fallback so a stray Hebrew char degrades to Ploni, never spaced system-mono */
--hib-font-display-design: "Shabtai", "Times New Roman", Georgia, serif;
--hib-font: var(--hib-font-body);
/* Latin tracking — the ONLY negative letter-spacing on the site. The document is
lang="he-IL", so this token is reached EXCLUSIVELY through an explicit .hib-latin
class on Latin runs (lockup / watermark); no shared selector applies it, so Hebrew
always renders with letter-spacing: normal (R1 · plan C / D1). */
--hib-ls-latin: -0.02em;
/* — Scale — */
--hib-display-xl-size: clamp(3.25rem, 8.4vw, 6.5rem);
--hib-display-xl-lh: 0.9;
--hib-display-xl-tracking: normal;
--hib-display-l-size: clamp(2.75rem, 6.6vw, 4.85rem);
--hib-display-l-lh: 0.94;
--hib-display-l-tracking: normal;
--hib-h1-size: clamp(2.6rem, 5.5vw, 4.5rem); /* D2 responsive scale */
--hib-h1-lh: 1.05; /* D2 */
--hib-h1-tracking: normal; /* D2 · Hebrew ⇒ ls normal */
--hib-h2-size: clamp(1.9rem, 3vw, 2.6rem); /* D2 responsive scale */
--hib-h2-lh: 1.08;
--hib-h2-tracking: normal; /* D2 · Hebrew ⇒ ls normal */
/* BAND TITLE rung — 22.4 → 32.8px. The title of a band or a panel: the CTA
and closer bands, the contact form column, the profile's specialty and
area panels, the stepper and related-topic titles, plus three derived
variants (×0.9, ×0.68, ×1.18). It carries a SIZE, not a voice — the
Danidin members and the Ploni members both sit on this rung and state
their own family. It was `--hib-h3-size`, which named an HTML level the
token had stopped describing the moment the h3 role moved to the block
title; a name that points at a tag invites the next author to bind a tag
to it. */
--hib-band-title-size: clamp(1.38rem, 2.4vw, 2.05rem);
--hib-band-title-lh: 1.14;
--hib-band-title-tracking: normal;
--hib-policy-hero-title-max: min(680px, 92vw);
/* Shabtai reduced scale */
--hib-design-display-xl-size: clamp(2.55rem, 5.35vw, 3.65rem);
--hib-design-display-xl-lh: 1.16;
--hib-design-display-xl-tracking: normal;
--hib-design-display-l-size: clamp(2.12rem, 4.3vw, 2.95rem);
--hib-design-display-l-lh: 1.18;
--hib-design-display-l-tracking: normal;
--hib-design-h2-size: clamp(1.64rem, 2.95vw, 2.25rem);
--hib-design-h2-lh: 1.20;
--hib-design-h2-tracking: normal;
/* Domain hero title — canonical source of truth for all domain hero pages */
--hib-domain-hero-title-size: var(--hib-display-l-size);
--hib-domain-hero-title-lh: 1.12;
--hib-domain-hero-title-tracking: normal;
/* — BarLev heading weights — */
--hib-heading-weight-display: 700; /* display: hero-level, maximum authority (700) */
--hib-heading-weight-section: 700; /* section: structural page-section openers (700) */
--hib-heading-weight-document: 500; /* document: within-content dividers, profile sections (500) */
--hib-h4-size: 1.1875rem;
/* — 3A heading roles — every interior editorial page opens at one title
scale, and every card in the live family titles at one size/leading.
The home hero (mhero) and the directory finder hero keep their own
scales on purpose: one is the brand statement, the other a dense
utility surface — neither is an "interior editorial page". */
--hib-page-title-size: clamp(1.9rem, 3.2vw, 2.9rem);
--hib-page-title-lh: 1.08;
--hib-card-title-size: var(--hib-h4-size); /* 19px — the one card-title size */
--hib-card-title-lh: 1.2;
/* Block title (H3 role) — the one signature for a heading that opens a block
INSIDE a section: the junction paths, the how-it-works steps, the guides
body headings, the category collection and siblings headings. Before this
token those five rendered at 26/22.4/21.6/20.8px across three different
leadings (1.10/1.15/1.20/1.30) because each component authored its own —
the display face's declared weight range is inert (see the Danidin
@font-face note), so every new level of emphasis had arrived as a new size.
One rung between the band title and the card title, and nothing between. */
--hib-block-title-size: clamp(1.3125rem, 1.05rem + 0.9vw, 1.625rem); /* 21 → 26px */
--hib-block-title-lh: 1.2;
/* Feature/editorial section title (Variant B): the loud voice for a few
genuinely dominant editorial headings — ~20% above the standard section
role at desktop, 52px ceiling on wide screens, near-solid leading.
Subordinate to page/hero titles; never for ordinary sections, legal,
cards, FAQ, forms or archives. Applied by the refinement layer in
hib-extra — a new consumer must justify "dominant editorial" first. */
--hib-title-feature-size: clamp(2.1rem, 3.5vw, 3.25rem);
--hib-title-feature-lh: .96;
--hib-h4-lh: 1.34;
--hib-body-l-size: 1.25rem;
--hib-body-l-lh: 1.62;
--hib-body-m-size: 1rem;
--hib-body-m-lh: 1.65;
--hib-body-s-size: 0.9375rem; /* 15px — small reading text (3B: was 14, the .95/.93/.92rem band folds here) */
--hib-body-lede-size: 1.0625rem; /* 17px — section/interior ledes and reading prose (3B) */
--hib-title-compact-size: 1.0625rem; /* 17px — compact rail/list component titles (dbox, topic index,
methodology steps): same px as the lede, deliberately its own
role token so titles never depend on a body token (audit C1/D6) */
--hib-body-s-lh: 1.62;
/* Extended body tiers — each formalizes an existing hardcoded value */
--hib-body-reading-size: 1rem; /* 16px — SEO/editorial long-form; same px as body-m, dedicated lh */
--hib-body-reading-lh: 1.75; /* more open lh for reading comfort in long-form text */
/* LONG-FORM leading — the one open cadence for text a reader settles into:
profile bios, guide articles, legal documents. It is deliberately looser
than interface body (1.65) and that gap is what makes a legal page feel
calm next to a card grid. Named for the role rather than for the first
component that needed it; --hib-body-profile-lh chains here so the two can
never drift apart. */
--hib-lh-longform: 1.85;
--hib-body-profile-size: 1.0625rem; /* 17px — profile bios, rich editorial descriptions, video guides */
--hib-body-profile-lh: var(--hib-lh-longform);
--hib-body-policy-size: 0.9375rem; /* 15px — dense legal/policy content */
--hib-body-policy-lh: 1.80; /* generous lh compensates for smaller size in dense legal content */
--hib-label-m-size: 0.875rem; /* 14px — D2 UI label (medium weight) */
--hib-label-lh: 1.4;
--hib-label-s-size: 0.8125rem; /* 13px — small UI badges, chips, micro-tags */
--hib-caption-size: var(--hib-label-s-size); /* 13px — caption chains to the one 13px carrier; distinction is weight 400 + muted color */
--hib-caption-lh: 1.6; /* more open than label-s (1.5) for supporting/descriptive text */
--hib-h5-size: 1.0625rem;
--hib-h5-lh: 1.47;
--hib-h6-size: 0.9375rem;
--hib-h6-lh: 1.5;
--hib-micro-label-size: 0.75rem; /* 12px — was 11px; raised to the label floor (QA-24) */
--hib-micro-label-lh: 1;
/* — Accessibility floors (P3b1 foundation) —
--hib-label-min: smallest permitted rendered label/micro-text size (12px at
the default root size, and it scales with the user's browser text size
because it is expressed in rem). No label may render below this.
--hib-tap-min: minimum touch-target extent for standalone controls. */
--hib-label-min: 0.75rem; /* 12px */
--hib-tap-min: 44px;
/* --hib-input-size: the floor for anything a reader types into. 16px is not
an aesthetic choice: mobile WebKit zooms the viewport on focus for any
form control under 16px, which throws the page sideways mid-entry and
leaves it there. The contact inputs measured 15px beside a 16px textarea,
so one form zoomed on some fields and not others. Every control uses this;
a control that wants to look smaller changes its padding, not its type. */
--hib-input-size: 1rem; /* 16px — iOS focus-zoom floor */
/* — Rhythm — */
--hib-hero-home-pt: clamp(64px, 10vw, 120px);
--hib-hero-home-pb: clamp(48px, 7vw, 96px);
--hib-hero-domain-pt: clamp(48px, 7vw, 96px);
--hib-hero-domain-pb: clamp(40px, 5.5vw, 72px);
--hib-section-py: clamp(56px, 7vw, 96px);
--hib-section-compact-py: clamp(40px, 5vw, 64px);
--hib-heading-mb-l: clamp(20px, 2.9vw, 36px);
--hib-heading-mb-m: clamp(14px, 1.95vw, 24px);
--hib-section-header-mb: clamp(44px, 5.8vw, 68px);
--hib-card-body-p: clamp(16px, 2.5vw, 24px);
/* — Motion — */
--hib-ease: cubic-bezier(0.2, 0, 0, 1);
--hib-duration-fast: 120ms;
--hib-duration-base: 180ms;
--hib-duration-slow: 240ms;
/* — Component: pro card — */
--hib-pro-card-media-h: 160px;
/* — Layout — */
--hib-container-narrow: 720px;
--hib-container-default: 1200px;
--hib-container-wide: 1280px;
--hib-page-padding: 24px;
/* Header-only inner width: the shell reads 20px wider per side than the 1200px
content container — a deliberate optical frame for the brand group + CTA
(approved header composition). No other surface may read this token. */
--hib-header-container-max: 1240px;
--hib-header-h: 72px;
/* — Editorial ink palette — */
/* ink / ink-muted: deprecated aliases → resolve to canonical semantic tokens */
--hib-ink: var(--hib-text);
--hib-ink-soft: var(--hib-text-strong); /* deprecated alias */
--hib-ink-muted: var(--hib-text-muted);
/* — Editorial surfaces — */
--hib-surface-editorial: #FAFAF7;
--hib-surface-editorial-2: #F2F3EE;
--hib-surface-cream: #FAFAF5;
--hib-surface-cream-2: #F5F3EC;
--hib-hairline: rgba(29, 84, 196, 0.12);
/* — Premium easing — */
--hib-ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
}
/* — Domain Theme + Rhythm Overrides — */
[data-domain="plumbing"] {
/* color tokens omitted — :root defaults ARE the plumbing values */
/* Tracking removed for Hebrew (R1): every *-tracking is normal; the hero
display line-heights are preserved to keep the Amir hero composition intact. */
--hib-display-xl-tracking:normal;
--hib-display-xl-lh: 1.06;
--hib-h1-tracking: normal;
--hib-h1-lh: 1.05;
--hib-domain-hero-title-lh: 1.10;
--hib-domain-hero-title-tracking:normal;
}
[data-domain="renovation"] {
--hib-primary: #245E66;
--hib-primary-hover: #1D4F56;
--hib-accent: #5A97A0;
--hib-accent-hover: #4A7F87;
--hib-domain-soft: #EAF5F6;
--hib-domain-soft-hover: #DDECEE;
--hib-domain-panel-soft: #EEF8F9;
--hib-domain-surface-soft: #ECF7F8;
--hib-domain-hero-glow: rgba(90,151,160,.07);
--hib-domain-line: #D5E5E7;
--hib-domain-tag-soft: #E3EFF1;
--hib-domain-hero: #071412;
--hib-domain-btn: #0B5C52;
--hib-domain-accent: #F07A28;
--hib-display-xl-tracking: normal;
--hib-h1-tracking: normal;
--hib-h1-lh: 1.18;
--hib-domain-hero-title-lh: 1.14;
--hib-domain-hero-title-tracking: normal;
}
[data-domain="design"] {
--hib-primary: #292826;
--hib-primary-hover: #1F1E1C;
--hib-accent: #7A746E;
--hib-accent-hover: #66615B;
--hib-domain-soft: #F2F1EF;
--hib-domain-soft-hover: #E8E5E1;
--hib-domain-panel-soft: #F4F2F0;
--hib-domain-surface-soft: #F3F1EE;
--hib-domain-hero-glow: rgba(122,116,110,.04);
--hib-domain-line: #E0DDD8;
--hib-domain-tag-soft: #ECE9E5;
--hib-domain-hero: #1A1916;
--hib-domain-btn: #EDE8E0;
--hib-domain-accent: #9B8B78;
--hib-display-xl-tracking: normal;
--hib-display-xl-lh: 1.18;
--hib-display-l-tracking: normal;
--hib-display-l-lh: 1.22;
--hib-h1-lh: 1.26;
--hib-heading-mb-l: clamp(20px, 3vw, 32px);
--hib-heading-mb-m: clamp(14px, 2vw, 24px);
--hib-section-header-mb: clamp(44px, 6vw, 72px);
--hib-display-heading-max-width: 540px;
--hib-domain-hero-title-size: var(--hib-design-display-xl-size);
--hib-domain-hero-title-lh: var(--hib-design-display-xl-lh);
--hib-domain-hero-title-tracking: normal;
}
/* ============================================================
2. RESET & BASE
============================================================ */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
/* 100%, not a fixed 16px: an absolute root size silently discards the reader's
browser text-size preference, and every rem token below is derived from it.
Identical rendering at the default setting; scales when the reader asks. */
font-size: 100%;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--hib-font);
color: var(--hib-text);
background: var(--hib-bg);
direction: rtl;
text-align: right;
font-size: 1.0625rem; /* D2 body — 17px reading size (component tokens set their own) */
line-height: 1.65; /* D2 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Contain decorative full-bleed layers without turning the document into a
scroll container. `overflow-x: hidden` forces the other axis to `auto`, so the
element can become a scroller and clip/detach `position: sticky` descendants;
`clip` suppresses the same horizontal overflow while leaving overflow-y
`visible`, so sticky regions (results filters, profile aside, guide panel)
stay anchored to the viewport. `hidden` stays first as the legacy fallback. */
overflow-x: hidden;
overflow-x: clip;
}
img, svg {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
border: none;
outline: none;
background: none;
}
button {
cursor: pointer;
}
ul, ol {
list-style: none;
}
::selection {
background: var(--hib-accent);
color: white;
}
/* Focus visible */
:focus-visible {
outline: 2px solid var(--hib-accent);
outline-offset: 2px;
}
/* Skip-to-content link */
.hib-skip-link {
position: absolute;
top: -100%;
inset-inline-start: 0;
padding: 0.5rem 1.25rem;
background: var(--hib-primary);
color: #fff;
font-family: var(--hib-font-body);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 var(--hib-radius-s) var(--hib-radius-s);
z-index: 10000;
transition: top 0.15s;
}
.hib-skip-link:focus {
top: 0;
}
/* ============================================================
3. TYPOGRAPHY
============================================================ */
.hib-display-xl {
font-family: var(--hib-font-display);
font-size: var(--hib-display-xl-size);
line-height: var(--hib-display-xl-lh);
font-weight: var(--hib-heading-weight-section);
letter-spacing: normal;
}
.hib-display-l {
font-family: var(--hib-font-display);
font-size: var(--hib-display-l-size);
line-height: var(--hib-display-l-lh);
font-weight: var(--hib-heading-weight-section);
letter-spacing: normal;
}
h1, .hib-h1 {
font-family: var(--hib-font-display);
font-size: var(--hib-h1-size);
line-height: var(--hib-h1-lh);
font-weight: var(--hib-heading-weight-section);
letter-spacing: normal;
}
/* `.page-title` is the parent theme's archive/page heading. Every HIB surface
names its own H1 (`__title`, `__name`), so this class only ever appears where
a route falls through to the GeneratePress fallback — today the `areas`
specialty archive. Left bare it inherited `--hib-h1-size` and opened at 72px,
the loudest H1 on the site, on the one page nobody designed. It joins the
interior page-title role instead. (The fallback itself — an untranslated
"areas:" prefix over raw archive markup — is a missing template, not a
typography defect; it is reported, not patched here.) */
h1.page-title {
font-size: var(--hib-page-title-size);
line-height: var(--hib-page-title-lh);
font-weight: 900;
}
h2, .hib-h2 {
font-family: var(--hib-font-display);
font-size: var(--hib-h2-size);
line-height: var(--hib-h2-lh);
font-weight: var(--hib-heading-weight-section);
letter-spacing: normal;
}
/* The default H3 is the BLOCK-TITLE role. It used to be Ploni at
clamp(1.38rem, 2.4vw, 2.05rem)/600 — a signature no live H3 on the site
actually used, because every one of them overrode it. That made the default a
trap: an H3 added without a component class rendered in the body face at a
size the system had abandoned. It now lands where an unclassified block
heading belongs, and the surfaces that genuinely want the reading voice
(legal clauses, guide prose) say so themselves. */
h3, .hib-h3 {
font-family: var(--hib-font-display);
font-size: var(--hib-block-title-size);
line-height: var(--hib-block-title-lh);
font-weight: 900;
letter-spacing: normal;
}
h4, .hib-h4 {
font-family: var(--hib-font-ui);
font-size: var(--hib-h4-size);
line-height: var(--hib-h4-lh);
font-weight: 600;
}
h5, .hib-h5 {
font-family: var(--hib-font-ui);
font-size: var(--hib-h5-size);
line-height: var(--hib-h5-lh);
font-weight: 600;
}
h6, .hib-h6 {
font-family: var(--hib-font-ui);
font-size: var(--hib-h6-size);
line-height: var(--hib-h6-lh);
font-weight: 600;
}
.hib-card-title {
font-family: var(--hib-font-ui);
font-size: var(--hib-body-m-size);
line-height: 1.45;
font-weight: 600;
}
.hib-body-l {
font-family: var(--hib-font-body);
font-size: var(--hib-body-l-size);
line-height: var(--hib-body-l-lh);
font-weight: 400;
}
.hib-body-m {
font-family: var(--hib-font-body);
font-size: var(--hib-body-m-size);
line-height: var(--hib-body-m-lh);
font-weight: 400;
}
.hib-body-s {
font-family: var(--hib-font-body);
font-size: var(--hib-body-s-size);
line-height: var(--hib-body-s-lh);
font-weight: 400;
}
.hib-label-l {
font-family: var(--hib-font-ui);
font-size: var(--hib-label-m-size);
line-height: var(--hib-label-lh);
font-weight: 600;
}
.hib-label-m {
font-family: var(--hib-font-ui);
font-size: var(--hib-label-m-size);
line-height: var(--hib-label-lh);
font-weight: 500;
}
.hib-label-s {
font-family: var(--hib-font-ui);
font-size: var(--hib-label-s-size);
line-height: 1.5;
font-weight: 500;
}
.hib-caption {
font-family: var(--hib-font-ui);
font-size: var(--hib-caption-size);
line-height: var(--hib-caption-lh);
font-weight: 400;
color: var(--hib-text-muted);
}
.hib-text-secondary { color: var(--hib-text-secondary); }
.hib-text-muted { color: var(--hib-text-muted); }
/* ============================================================
4. LAYOUT
============================================================ */
.hib-container {
width: 100%;
max-width: var(--hib-container-default);
margin: 0 auto;
padding: 0 var(--hib-page-padding);
}
.hib-container--narrow {
max-width: var(--hib-container-narrow);
}
.hib-container--wide {
max-width: var(--hib-container-wide);
}
.hib-section {
padding: var(--hib-section-py) 0;
}
.hib-section--compact {
padding: var(--hib-section-compact-py) 0;
}
@media (max-width: 767px) {
:root {
--hib-page-padding: 20px;
}
/* Fluid tokens already handle mobile reduction — no hard overrides needed */
}
/* ============================================================
5. BUTTONS
============================================================ */
.hib-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--hib-space-2);
font-family: var(--hib-font-ui);
font-weight: 500;
border-radius: var(--hib-radius-xs);
transition:
transform var(--hib-duration-base) var(--hib-ease),
background var(--hib-duration-base) var(--hib-ease),
box-shadow var(--hib-duration-base) var(--hib-ease),
border-color var(--hib-duration-base) var(--hib-ease),
color var(--hib-duration-base) var(--hib-ease);
/* A button is a box around a sentence. `white-space: nowrap` made that
sentence set the box's *minimum* width, so at 200% text zoom a long Hebrew
label pushed the button — and the page with it — wider than the screen:
the review form's submit measured 339.6px inside a 236px column and was
the proven source of the profile's 27px horizontal overflow (P3d3, §12).
`normal` does not force wrapping. An inline-flex button is still sized by
its max-content, so every label that fits stays on exactly one line and
nothing moves at normal text size; it only permits the wrap that `nowrap`
used to resolve as page overflow. Paired with `max-width: 100%`, so a
button can never be wider than the thing that contains it.
The other half of the fix is in `hib-extra.css` (`Button system`), which
releases the fixed `height` below into a floor of the same value — a
wrapped label grows the box instead of being clipped by it. It has to live
there, not here: `min-block-size` and `min-height` are one property, that
stylesheet loads second, and a floor stated here loses the tie. */
white-space: normal;
max-width: 100%;
text-align: center;
cursor: pointer;
position: relative;
}
.hib-btn--s {
height: 44px;
padding: 0 var(--hib-space-4);
font-size: var(--hib-label-m-size); /* D2 button — 14px (min tap height preserved) */
letter-spacing: normal;
}
.hib-btn--m {
height: 44px;
padding: 0 var(--hib-space-5);
font-size: var(--hib-body-s-size);
letter-spacing: normal;
}
.hib-btn--l {
height: 56px;
padding: 0 var(--hib-space-8);
font-size: 1rem; /* D2 button — 16px cap (min tap height preserved) */
font-weight: 600;
letter-spacing: normal;
}
/* Primary */
.hib-btn--primary {
background: var(--hib-primary);
color: white;
box-shadow: var(--hib-shadow-btn);
}
.hib-btn--primary:hover {
background: var(--hib-primary-hover);
box-shadow: var(--hib-shadow-btn-hover);
transform: translateY(-1px);
}
.hib-btn--primary:active {
transform: scale(0.97);
box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
/* Secondary */
.hib-btn--secondary {
background: var(--hib-surface);
color: var(--hib-primary);
border: 1px solid var(--hib-border);
}
.hib-btn--secondary:hover {
border-color: var(--hib-primary);
background: var(--hib-domain-soft);
}
.hib-btn--secondary:active { transform: scale(0.97); }
/* Ghost */
.hib-btn--ghost {
background: transparent;
color: var(--hib-primary);
}
.hib-btn--ghost:hover {
background: var(--hib-domain-soft);
}
.hib-btn--ghost:active { transform: scale(0.97); }
/* Accent */
.hib-btn--accent {
background: var(--hib-accent);
color: white;
}
.hib-btn--accent:hover {
background: var(--hib-accent-hover);
transform: translateY(-1px);
}
.hib-btn--accent:active { transform: scale(0.97); }
/* Full width mobile */
@media (max-width: 767px) {
.hib-btn--mobile-full {
width: 100%;
}
}
/* ============================================================
6. FORM FIELDS
============================================================ */
.hib-field {
display: flex;
flex-direction: column;
gap: var(--hib-space-2);
}
/* FORM ROLES — one set across the hero search, the directory filters, the
contact form, the add-professional flow and the review form. The five were
built at five times and each authored its own label: 12/700, 13/500, 14/700
and a bare 17/400 all named the same kind of thing. Label is the one rung. */
.hib-field__label {
font-family: var(--hib-font-ui);
font-size: var(--hib-label-m-size);
line-height: var(--hib-label-lh);
font-weight: 500;
color: var(--hib-text);
letter-spacing: normal;
margin-bottom: 2px;
}
.hib-field__input {
height: 50px;
padding: 0 var(--hib-space-4);
border: 1px solid var(--hib-border);
border-radius: var(--hib-radius-s);
background: var(--hib-surface);
color: var(--hib-text);
font-family: var(--hib-font-ui);
/* Typed text sits at the input floor. At 15px mobile WebKit zoomed the
viewport the moment the field took focus — and this form's own textarea was
already 16px, so a person filling it in got thrown sideways on some fields
and not others. */
font-size: var(--hib-input-size);
/* An carries an intrinsic width from its default `size` attribute, so
it refuses to shrink below roughly 20 characters of its OWN font size. Once
the type moved to the 16px floor, that intrinsic minimum outgrew the contact
form's column at 200% text zoom and pushed the page 10px sideways — the one
responsive floor this project treats as non-negotiable. Letting the box be
sized by its column instead of by its content is the fix, and it is the same
move the buttons needed when `white-space: nowrap` did this to them. */
inline-size: 100%;
min-inline-size: 0;
box-sizing: border-box;
transition: border-color var(--hib-duration-base) var(--hib-ease),
box-shadow var(--hib-duration-base) var(--hib-ease);
}
.hib-field__input::placeholder {
color: var(--hib-text-muted);
}
.hib-field__input:hover {
border-color: var(--hib-border-strong);
}
.hib-field__input:focus {
border-color: var(--hib-primary);
box-shadow: var(--hib-shadow-focus);
}
.hib-field__input--select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 16px center;
padding-left: 40px;
}
/* ============================================================
7. CARDS
============================================================ */
.hib-card {
background: var(--hib-surface);
border-radius: var(--hib-radius-m);
border: 1px solid var(--hib-rule-soft);
overflow: hidden;
transition: box-shadow var(--hib-duration-base) var(--hib-ease),
transform var(--hib-duration-base) var(--hib-ease);
}
.hib-card:hover {
box-shadow: var(--hib-shadow-m);
transform: translateY(-2px);
}
.hib-card__body {
padding: var(--hib-card-body-p);
}
/* Category Card */
.hib-category-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: linear-gradient(180deg, #FFFFFF 0%, #FDFDFB 100%);
border-radius: var(--hib-radius-m);
border: 1px solid var(--hib-hairline, var(--hib-border-accent));
overflow: hidden;
transition:
transform 360ms var(--hib-ease-out-soft, var(--hib-ease)),
box-shadow 360ms var(--hib-ease-out-soft, var(--hib-ease)),
border-color 360ms var(--hib-ease);
}
.hib-category-card:hover {
transform: translateY(-3px);
border-color: rgba(29, 84, 196,0.22);
box-shadow: var(--hib-shadow-card-hover);
}
.hib-category-card__accent {
height: 2px;
background: linear-gradient(90deg, var(--hib-primary) 0%, var(--hib-domain-accent, var(--hib-primary)) 100%);
opacity: 0.55;
transform-origin: right;
transition: opacity 320ms var(--hib-ease), transform 420ms var(--hib-ease-out-soft, var(--hib-ease));
}
.hib-category-card:hover .hib-category-card__accent {
opacity: 1;
transform: scaleX(1);
}
.hib-category-card__icon {
width: 48px;
height: 48px;
border-radius: var(--hib-radius-s);
background:
linear-gradient(135deg, rgba(29, 84, 196,0.08) 0%, rgba(46,134,193,0.06) 100%);
color: var(--hib-primary);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--hib-space-4);
border: 1px solid var(--hib-border-accent);
transition: background 300ms var(--hib-ease);
}
.hib-category-card:hover .hib-category-card__icon {
background:
linear-gradient(135deg, rgba(29, 84, 196,0.14) 0%, rgba(46,134,193,0.10) 100%);
}
.hib-category-card__icon svg {
width: 24px;
height: 24px;
}
.hib-category-card__title {
font-family: var(--hib-font-ui);
font-size: 1.125rem;
font-weight: 600;
letter-spacing: normal;
line-height: 1.30;
color: var(--hib-ink, #14171A);
margin-bottom: var(--hib-space-2);
}
.hib-category-card__desc {
font-size: var(--hib-body-s-size);
line-height: 1.55;
color: var(--hib-text-strong);
margin-bottom: var(--hib-space-3);
}
.hib-category-card__specs {
display: flex;
flex-direction: column;
gap: var(--hib-space-2);
margin-top: auto;
margin-bottom: var(--hib-space-6);
padding-bottom: var(--hib-space-3);
}
.hib-category-card__spec {
display: flex;
align-items: center;
gap: var(--hib-space-2);
font-size: var(--hib-micro-label-size);
letter-spacing: normal;
text-transform: uppercase;
color: var(--hib-text-muted);
font-weight: 600;
}
.hib-category-card__spec::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--hib-accent);
flex-shrink: 0;
}
.hib-category-card .hib-btn {
margin-top: auto;
}
/* ============================================================
8. BADGES & CHIPS
============================================================ */
.hib-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: var(--hib-radius-pill);
font-size: var(--hib-label-s-size);
font-weight: 500;
line-height: 1;
}
.hib-badge--domain {
background: var(--hib-domain-soft);
color: var(--hib-primary);
}
.hib-badge--doc {
background: var(--hib-domain-soft);
color: var(--hib-primary);
}
.hib-badge--distance {
background: var(--hib-neutral-100);
color: var(--hib-text-secondary);
}
.hib-badge--new {
background: var(--hib-info-soft);
color: var(--hib-info);
}
.hib-chip {
display: inline-flex;
align-items: center;
gap: var(--hib-space-2);
padding: var(--hib-space-2) var(--hib-space-3);
border-radius: var(--hib-radius-pill);
border: 1px solid var(--hib-border);
font-size: var(--hib-label-m-size);
font-weight: 500;
color: var(--hib-text-secondary);
background: var(--hib-surface);
cursor: pointer;
transition:
background var(--hib-duration-base) var(--hib-ease),
border-color var(--hib-duration-base) var(--hib-ease),
color var(--hib-duration-base) var(--hib-ease);
}
.hib-chip:hover,
.hib-chip--active {
background: var(--hib-domain-soft);
border-color: var(--hib-primary);
color: var(--hib-primary);
}
/* ============================================================
9. SEARCH HERO
============================================================ */
.hib-hero {
position: relative;
overflow: hidden;
}
.hib-hero--domain {
padding: var(--hib-hero-domain-pt) 0 var(--hib-hero-domain-pb);
background: linear-gradient(175deg, var(--hib-domain-soft) 0%, var(--hib-bg) 70%);
}
.hib-hero__pattern {
position: absolute;
inset: 0;
opacity: 0.035;
background-image:
radial-gradient(circle at 20% 50%, var(--hib-primary) 1px, transparent 1px),
radial-gradient(circle at 80% 20%, var(--hib-primary) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.hib-hero__content {
position: relative;
z-index: 1;
}
.hib-hero__title {
font-family: var(--hib-font-display);
font-size: var(--hib-display-xl-size);
font-weight: var(--hib-heading-weight-section);
line-height: var(--hib-display-xl-lh);
letter-spacing: normal;
max-width: 640px;
margin-bottom: var(--hib-heading-mb-l);
}
.hib-hero__subtitle {
max-width: 540px;
color: var(--hib-text-secondary);
font-size: var(--hib-body-l-size);
line-height: var(--hib-body-l-lh);
margin-bottom: clamp(var(--hib-space-6), 4.5vw, var(--hib-space-11));
}
/* Search Module */
.hib-search-module {
background: var(--hib-surface);
border-radius: var(--hib-radius-l);
padding: var(--hib-space-6);
box-shadow: var(--hib-shadow-m);
border: 1px solid var(--hib-border);
}
.hib-search-module__fields {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr auto;
gap: var(--hib-space-3);
align-items: end;
}
.hib-search-module__btn {
height: 52px;
min-width: 160px;
}
@media (max-width: 1023px) {
.hib-search-module__fields {
grid-template-columns: 1fr 1fr;
}
.hib-search-module__btn {
grid-column: 1 / -1;
}
}
@media (max-width: 767px) {
.hib-hero--home {
padding: var(--hib-space-12) 0 var(--hib-space-9);
}
.hib-hero--domain {
padding: var(--hib-space-9) 0 var(--hib-space-8);
}
.hib-search-module__fields {
grid-template-columns: 1fr;
}
.hib-search-module {
padding: var(--hib-space-5);
}
}
/* ============================================================
10. TRUST STRIP
============================================================ */
.hib-trust-strip {
display: flex;
flex-wrap: wrap;
gap: var(--hib-space-5) var(--hib-space-7);
justify-content: center;
padding: var(--hib-space-5) 0;
margin-top: var(--hib-space-7);
}
.hib-trust-strip__item {
display: flex;
align-items: center;
gap: var(--hib-space-2);
font-size: var(--hib-label-m-size);
color: var(--hib-text-secondary);
font-weight: 500;
}
.hib-trust-strip__icon {
width: 20px;
height: 20px;
color: var(--hib-accent);
flex-shrink: 0;
}
/* ============================================================
11. HOW IT WORKS (STEPS)
============================================================ */
.hib-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--hib-space-7);
counter-reset: step;
}
.hib-step {
text-align: center;
counter-increment: step;
position: relative;
}
.hib-step__number {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--hib-domain-soft);
color: var(--hib-primary);
font-family: var(--hib-font-display);
font-size: 1.25rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--hib-space-5);
position: relative;
}
.hib-step__title {
font-family: var(--hib-font-ui);
font-size: calc(var(--hib-band-title-size) * 0.9);
font-weight: 600;
line-height: 1.30;
letter-spacing: normal;
margin-bottom: var(--hib-space-2);
}
.hib-step__desc {
font-size: var(--hib-body-s-size);
color: var(--hib-text-secondary);
line-height: 1.6;
max-width: 280px;
margin: 0 auto;
}
/* Connector line between steps */
.hib-step:not(:last-child)::after {
content: "";
position: absolute;
top: 28px;
left: -14%;
width: 28%;
height: 2px;
background: var(--hib-border);
}
@media (max-width: 767px) {
.hib-steps {
grid-template-columns: 1fr;
gap: var(--hib-space-8);
}
.hib-step:not(:last-child)::after {
display: none;
}
}
/* ============================================================
12. BENEFITS GRID
============================================================ */
.hib-benefits {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--hib-space-6);
}
.hib-benefit {
padding: var(--hib-space-6);
border-radius: var(--hib-radius-m);
background: var(--hib-surface);
border: 1px solid var(--hib-border);
transition: box-shadow var(--hib-duration-base) var(--hib-ease);
}
.hib-benefit:hover {
box-shadow: var(--hib-shadow-s);
}
.hib-benefit__icon {
width: 44px;
height: 44px;
border-radius: var(--hib-radius-s);
background: var(--hib-domain-soft);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--hib-space-4);
color: var(--hib-primary);
}
.hib-benefit__title {
font-family: var(--hib-font-ui);
font-size: var(--hib-body-s-size);
font-weight: 600;
margin-bottom: var(--hib-space-2);
}
.hib-benefit__desc {
font-size: var(--hib-label-m-size);
color: var(--hib-text-secondary);
line-height: 1.6;
}
@media (max-width: 1023px) {
.hib-benefits {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.hib-benefits {
grid-template-columns: 1fr;
}
}
/* ============================================================
13. PRO CARDS GRID
============================================================ */
.hib-pros-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--hib-space-5); /* the one card-grid gap (20) */
}
@media (max-width: 1023px) {
.hib-pros-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.hib-pros-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
14. DOMAIN CATEGORIES GRID
============================================================ */
.hib-domains-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--hib-space-6);
}
@media (max-width: 767px) {
.hib-domains-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
15. SECTION HEADERS
============================================================ */
.hib-section-header {
text-align: center;
margin-bottom: clamp(var(--hib-space-8), 5vw, var(--hib-space-11));
}
.hib-section-header__title {
font-family: var(--hib-font-display);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: var(--hib-heading-weight-section);
line-height: 1.12;
letter-spacing: normal;
color: var(--hib-text);
margin-bottom: var(--hib-heading-mb-m);
}
.hib-section-header__desc {
color: var(--hib-text-strong);
font-size: 1rem;
line-height: 1.55;
max-width: 52ch;
margin: var(--hib-space-3) auto 0;
}
.hib-section-header--start { text-align: start; }
.hib-section-header--start .hib-section-header__desc { margin-inline: 0; }
/* ============================================================
16. CTA SECTION
Surface material (gradient, border, radius, shadow, vignette,
texture, button) lives on the shared .hib-cta-surface class in
hib-extra.css; this block owns the guides CTA's composition.
============================================================ */
.hib-cta-section {
text-align: center;
}
.hib-cta-section__title {
font-family: var(--hib-font-display);
font-size: var(--hib-display-l-size);
font-weight: var(--hib-heading-weight-section);
line-height: var(--hib-display-l-lh);
letter-spacing: normal;
margin-bottom: var(--hib-space-4);
}
.hib-cta-section__desc {
font-family: var(--hib-font-body);
opacity: 0.88;
font-size: clamp(1rem, 1.4vw, 1.125rem);
line-height: 1.6;
margin-bottom: var(--hib-space-7);
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
/* Actions wrapper: button + optional trust line */
.hib-cta-section__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--hib-space-4);
}
.hib-cta-section__trust {
font-size: var(--hib-label-s-size);
color: var(--hib-on-dark-muted);
letter-spacing: normal;
}
@media (max-width: 767px) {
.hib-cta-section__title {
font-size: var(--hib-h2-size);
}
.hib-cta-section .hib-btn {
width: 100%;
}
}
/* ============================================================
17. VIDEO CARDS
============================================================ */
.hib-video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--hib-space-6);
}
@media (max-width: 1023px) {
.hib-video-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.hib-video-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
18. HEADER (NAV)
============================================================ */
.hib-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255,255,255,.82);
backdrop-filter: saturate(1.4) blur(14px);
-webkit-backdrop-filter: saturate(1.4) blur(14px);
/* mockup --hair: navy-tint hairline, softer than the solid blue-gray --hib-border */
border-bottom: 1px solid rgba(14,44,84,.10);
}
/* Header-only container: 1240px vs the page's 1200px — inherits the base
.hib-container centring and gutters; only the cap differs. */
.hib-header__container {
max-width: var(--hib-header-container-max);
}
.hib-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--hib-header-h);
}
/* One brand group: the logo anchors the RTL reading edge and the navigation
reads as its extension — not as an object floating at the viewport centre.
The 42px logo↔nav gap must stay visibly larger than the nav's item rhythm. */
.hib-header__brandnav {
display: flex;
align-items: center;
gap: 42px;
min-width: 0;
}
.hib-header__logo {
font-family: var(--hib-font-display);
font-size: 2.8rem;
font-weight: 700;
color: var(--hib-primary);
letter-spacing: normal;
}
.hib-header__logo span {
color: var(--hib-accent);
}
.hib-header__nav {
display: flex;
align-items: center;
gap: var(--hib-space-1);
}
.hib-header__link {
padding: var(--hib-space-2) var(--hib-space-3); /* 12px inline → 28px visible item gap, < the 42px brand gap */
font-size: var(--hib-body-s-size);
font-weight: 700; /* mockup .nav-links a weight 700 */
color: var(--hib-text-secondary); /* = mockup --ink-soft #3A4D6B */
border-radius: var(--hib-radius-xs);
transition:
background var(--hib-duration-base) var(--hib-ease),
color var(--hib-duration-base) var(--hib-ease);
}
/* mockup hover: soft wash + ink (no colour jump); active: azure, no fill */
.hib-header__link:hover {
color: var(--hib-text);
background: var(--hib-surface-soft); /* = mockup --bg-2 #ECF2F9 */
}
.hib-header__link--active {
color: var(--hib-primary);
}
.hib-header__actions {
display: flex;
align-items: center;
gap: var(--hib-space-3);
}
.hib-header__mobile-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
color: var(--hib-text);
}
@media (max-width: 1023px) {
.hib-header__nav {
display: none;
}
.hib-header__mobile-toggle {
display: flex;
}
.hib-header__actions .hib-btn {
display: none;
}
/* RTL: hamburger belongs on the right (inline-start).
Move actions before logo so toggle sits at the natural tap position. */
.hib-header__actions {
order: -1;
}
.hib-header__brandnav {
flex: 1;
justify-content: center; /* the group centres; the logo is its only visible child */
}
}
/* ============================================================
19. FOOTER
============================================================ */
/* Subtle brand watermark — opt-in via .hib-footer--watermarked */
.hib-footer--watermarked {
position: relative;
overflow: hidden;
}
.hib-footer__watermark {
position: absolute;
inset-inline-end: clamp(-18px, -1vw, -8px);
inset-block-end: -0.24em;
font-family: "BarLev", Arial, sans-serif;
font-size: clamp(160px, 22vw, 340px);
font-weight: 800;
line-height: 1;
letter-spacing: normal;
color: transparent;
-webkit-text-stroke: 1px rgba(210, 115, 79, 0.22);
pointer-events: none;
user-select: none;
z-index: 0;
}
.hib-footer--watermarked .hib-container { position: relative; z-index: 1; }
@media (max-width: 767px) {
.hib-footer__watermark {
font-size: clamp(140px, 46vw, 200px);
-webkit-text-stroke-color: rgba(210, 115, 79, 0.26);
}
}
.hib-footer__grid {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: var(--hib-space-8);
margin-bottom: var(--hib-space-11);
}
.hib-footer__brand {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: var(--hib-space-4);
}
.hib-footer__brand span {
color: var(--hib-accent);
}
/* This paragraph ended on a one-word line on every route at every viewport —
the same orphan 54 times over, because its measure and its copy happened to
land that way and nothing was asking the browser to even the lines out. */
.hib-footer__about {
font-size: var(--hib-label-m-size);
line-height: 1.7;
text-wrap: pretty;
color: var(--hib-neutral-400);
max-width: 320px;
}
/* A footer column heading is a label, not a block title — it states its own
leading so it does not follow the base `h3` rule to the display role. */
.hib-footer__heading {
font-size: var(--hib-body-s-size);
font-weight: 600;
line-height: 1.3;
color: white;
margin-bottom: var(--hib-space-5);
}
.hib-footer__links {
display: flex;
flex-direction: column;
gap: var(--hib-space-3);
}
.hib-footer__link {
font-size: var(--hib-label-m-size);
color: var(--hib-neutral-400);
transition: color var(--hib-duration-base) var(--hib-ease);
}
.hib-footer__link:hover {
color: white;
}
.hib-footer__bottom {
border-top: 1px solid var(--hib-neutral-700);
padding-top: var(--hib-space-6);
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--hib-label-s-size);
color: var(--hib-neutral-500);
}
@media (max-width: 1023px) {
.hib-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.hib-footer__grid {
grid-template-columns: 1fr;
gap: var(--hib-space-8);
}
.hib-footer__bottom {
flex-direction: column;
gap: var(--hib-space-3);
text-align: center;
}
}
/* ============================================================
20. SPECIALTIES GRID (Domain page)
============================================================ */
.hib-specialties-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--hib-space-4);
}
.hib-specialty-chip {
display: flex;
align-items: center;
gap: var(--hib-space-3);
padding: var(--hib-space-3) var(--hib-space-5);
background: var(--hib-surface);
border: 1px solid var(--hib-border);
border-radius: var(--hib-radius-s);
font-family: var(--hib-font-ui);
font-size: var(--hib-body-s-size);
font-weight: 500;
color: var(--hib-text);
cursor: pointer;
transition:
background var(--hib-duration-base) var(--hib-ease),
border-color var(--hib-duration-base) var(--hib-ease),
color var(--hib-duration-base) var(--hib-ease);
}
.hib-specialty-chip:hover {
border-color: var(--hib-primary);
background: var(--hib-domain-soft);
color: var(--hib-primary);
}
.hib-specialty-chip__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--hib-accent);
flex-shrink: 0;
}
/* ============================================================
21. FAQ ACCORDION
============================================================ */
.hib-faq-list {
display: flex;
flex-direction: column;
gap: var(--hib-space-3);
max-width: 800px;
margin: 0 auto;
}
.hib-faq {
display: grid;
grid-template-rows: auto 0fr;
border: 1px solid var(--hib-border);
border-radius: var(--hib-radius-s);
overflow: hidden;
background: var(--hib-surface);
transition: border-color 280ms var(--hib-ease),
box-shadow 280ms var(--hib-ease),
grid-template-rows 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.hib-faq:hover {
border-color: rgba(29, 84, 196,0.22);
box-shadow: 0 8px 22px -12px rgba(16,24,40,0.14);
}
.hib-faq.is-open {
grid-template-rows: auto 1fr;
border-color: rgba(29, 84, 196,0.24);
box-shadow: 0 10px 28px -14px rgba(16,24,40,0.16);
}
.hib-faq__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--hib-space-5) var(--hib-space-6);
font-family: var(--hib-font-ui);
font-size: var(--hib-body-s-size);
font-weight: 600;
line-height: 1.5;
color: var(--hib-text);
text-align: right;
cursor: pointer;
transition: background var(--hib-duration-base) var(--hib-ease), color 200ms var(--hib-ease);
}
.hib-faq__trigger:hover {
background: var(--hib-neutral-50);
}
.hib-faq.is-open .hib-faq__trigger { color: var(--hib-primary); }
.hib-faq__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform var(--hib-duration-slow) var(--hib-ease);
color: var(--hib-text-muted);
}
.hib-faq.is-open .hib-faq__icon {
transform: rotate(180deg);
}
.hib-faq__body {
min-height: 0;
overflow: hidden;
opacity: 0;
padding: 0 var(--hib-space-6) var(--hib-space-5);
font-family: var(--hib-font-body);
font-size: var(--hib-body-s-size);
color: var(--hib-text-secondary);
line-height: 1.72;
transition: opacity 200ms ease;
}
.hib-faq.is-open .hib-faq__body {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.hib-faq { transition: border-color 280ms var(--hib-ease), box-shadow 280ms var(--hib-ease); }
.hib-faq__body { transition: none; }
}
/* ============================================================
22. RATING STARS
============================================================ */
.hib-rating {
display: inline-flex;
align-items: center;
gap: 2px;
}
.hib-rating__star {
width: 16px;
height: 16px;
color: var(--hib-rating-star);
}
.hib-rating__star--empty {
color: var(--hib-neutral-200);
}
.hib-rating__count {
margin-right: var(--hib-space-2);
font-size: var(--hib-label-s-size);
color: var(--hib-text-muted);
}
/* ============================================================
23. DOMAIN HERO SPECIFICS
============================================================ */
.hib-domain-hero__breadcrumb {
display: flex;
align-items: center;
gap: var(--hib-space-2);
font-size: var(--hib-label-s-size);
color: var(--hib-text-muted);
margin-bottom: var(--hib-space-5);
}
.hib-domain-hero__breadcrumb a {
color: var(--hib-text-secondary);
transition: color var(--hib-duration-base) var(--hib-ease);
}
.hib-domain-hero__breadcrumb a:hover {
color: var(--hib-primary);
}
.hib-domain-hero__stats {
display: flex;
gap: var(--hib-space-7);
margin-top: var(--hib-space-6);
}
.hib-domain-hero__stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.hib-domain-hero__stat-value {
font-family: var(--hib-font-display);
font-size: calc(var(--hib-band-title-size) * 1.18);
font-weight: var(--hib-heading-weight-section);
line-height: calc(var(--hib-band-title-lh) * 0.9);
letter-spacing: normal;
color: var(--hib-primary);
}
.hib-domain-hero__stat-label {
font-family: var(--hib-font-ui);
font-size: var(--hib-label-s-size);
color: var(--hib-text-muted);
}
/* ============================================================
24. SEO CONTENT
============================================================ */
.hib-seo-content {
max-width: 68ch;
margin: 0 auto;
padding: clamp(var(--hib-space-5), 3vw, var(--hib-space-7));
background: linear-gradient(180deg, #FFFFFF 0%, var(--hib-surface-cream-2, #F5F3EC) 120%);
border: 1px solid var(--hib-hairline, var(--hib-border-accent));
border-radius: var(--hib-radius-section);
position: relative;
}
.hib-seo-content h3 {
font-family: var(--hib-font-heading);
font-size: clamp(1.125rem, 1.8vw, 1.375rem);
letter-spacing: normal;
line-height: 1.25;
color: var(--hib-ink, #14171A);
margin-bottom: var(--hib-space-3);
margin-top: var(--hib-space-2);
}
.hib-seo-content p {
font-size: var(--hib-body-reading-size);
line-height: var(--hib-body-reading-lh);
color: var(--hib-text-strong);
margin-bottom: var(--hib-space-3);
}
.hib-seo-content p:last-child { margin-bottom: 0; }
/* ============================================================
25. ANIMATIONS
============================================================ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.hib-animate {
opacity: 0;
animation: fadeInUp 0.55s var(--hib-ease) forwards;
}
.hib-animate--delay-1 { animation-delay: 0.08s; }
.hib-animate--delay-2 { animation-delay: 0.16s; }
.hib-animate--delay-3 { animation-delay: 0.24s; }
.hib-animate--delay-4 { animation-delay: 0.32s; }
.hib-animate--delay-5 { animation-delay: 0.40s; }
/* Scroll-triggered animation */
.hib-reveal {
opacity: 0;
transform: translateY(12px) scale(0.995);
transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.hib-reveal.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* ============================================================
26. UTILITY CLASSES
============================================================ */
.hib-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.hib-text-center { text-align: center; }
.hib-text-start { text-align: right; }
.hib-mt-auto { margin-top: auto; }
.hib-flex { display: flex; }
.hib-gap-3 { gap: var(--hib-space-3); }
.hib-gap-6 { gap: var(--hib-space-6); }
/* ============================================================
27. PRO CARD V2 — Distance-first, proof-driven (polished)
============================================================ */
.hib-pro-card-v2 {
display: flex;
flex-direction: column;
position: relative;
}
/* ── Distance bar ─────────────────────────────────────────────
Sits above the media region. Primary proximity + status signal. */
.hib-pro-card-v2__distance-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px var(--hib-space-5);
background: var(--hib-domain-soft);
border-bottom: 1px solid var(--hib-border);
font-size: var(--hib-label-s-size);
font-weight: 600;
line-height: 1;
min-height: 36px;
}
.hib-pro-card-v2__distance {
display: flex;
align-items: center;
gap: 5px;
color: var(--hib-primary);
}
.hib-pro-card-v2__distance svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
/* ── Media region ─────────────────────────────────────────────
Full-bleed image block. The primary trust signal.
Sits between distance-bar and identity header.
Clipped cleanly by .hib-card's overflow:hidden + border-radius. */
.hib-pro-card-v2__media {
position: relative;
width: 100%;
height: var(--hib-pro-card-media-h);
overflow: hidden;
background: var(--hib-neutral-100);
flex-shrink: 0;
}
.hib-pro-card-v2__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 15%;
display: block;
transition: transform var(--hib-duration-slow) var(--hib-ease);
}
.hib-pro-card-v2:hover .hib-pro-card-v2__media img {
transform: scale(1.03);
}
/* Fallback: no photo — domain-tinted placeholder centered */
.hib-pro-card-v2__media--empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--hib-domain-soft);
}
.hib-pro-card-v2__media--empty svg.hib-media-placeholder {
width: 44px;
height: 44px;
color: var(--hib-primary);
opacity: 0.2;
}
/* ── Identity header ──────────────────────────────────────────
Name + proof directly below the image.
Face → name proximity is the trust mechanism. */
.hib-pro-card-v2__header {
display: flex;
flex-direction: column;
gap: var(--hib-space-1);
padding: var(--hib-space-4) var(--hib-space-5) 0;
}
.hib-pro-card-v2__name {
font-family: var(--hib-font-ui);
font-size: var(--hib-h5-size);
font-weight: 700;
line-height: 1.26;
letter-spacing: normal;
color: var(--hib-text);
}
/* Proof line — ★ 4.8 · 23 חוות דעת · מאושר */
.hib-pro-card-v2__proof {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--hib-label-s-size);
color: var(--hib-text-muted);
line-height: 1;
}
.hib-pro-card-v2__rating {
display: inline-flex;
align-items: center;
gap: 2px;
font-weight: 600;
color: var(--hib-text);
font-size: var(--hib-label-s-size);
}
.hib-pro-card-v2__rating svg {
width: 12px;
height: 12px;
color: var(--hib-rating-star);
}
.hib-pro-card-v2__dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--hib-neutral-300);
flex-shrink: 0;
}
.hib-pro-card-v2__verified {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--hib-label-s-size);
font-weight: 600;
color: var(--hib-success);
}
.hib-pro-card-v2__verified svg {
width: 11px;
height: 11px;
}
/* ── Body: specialties ────────────────────────────────────────*/
.hib-pro-card-v2__body {
padding: var(--hib-space-3) var(--hib-space-5) var(--hib-space-4);
}
.hib-pro-card-v2__tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.hib-pro-card-v2__tag {
padding: 4px 10px;
border-radius: var(--hib-radius-pill);
border: 1px solid var(--hib-border);
font-size: var(--hib-label-s-size);
font-weight: 500;
color: var(--hib-text-secondary);
background: var(--hib-surface);
line-height: 1;
}
/* ── Footer: CTA ──────────────────────────────────────────────
Primary CTA dominates. Secondary is supportive. */
.hib-pro-card-v2__footer {
display: flex;
gap: var(--hib-space-2);
padding: var(--hib-space-4) var(--hib-space-5) var(--hib-space-5);
margin-top: auto;
border-top: 1px solid var(--hib-divider);
}
.hib-pro-card-v2__footer .hib-btn:first-child {
flex: 1.5;
}
.hib-pro-card-v2__footer .hib-btn:last-child {
flex: 0.6;
font-size: var(--hib-label-s-size);
}
.hib-pro-card-v2__footer .hib-btn {
font-size: var(--hib-label-m-size);
}
/* ── Domain: media fallback colors ───────────────────────────*/
[data-domain="plumbing"] .hib-pro-card-v2__media--empty {
background: var(--hib-domain-soft);
}
[data-domain="renovation"] .hib-pro-card-v2__media--empty {
background: var(--hib-domain-surface-soft);
}
[data-domain="design"] .hib-pro-card-v2__media--empty {
background: var(--hib-domain-line);
}
/* ── Mobile ───────────────────────────────────────────────────*/
@media (max-width: 767px) {
:root {
--hib-pro-card-media-h: 144px;
}
.hib-pro-card-v2__header {
padding: var(--hib-space-3) var(--hib-space-4) 0;
}
.hib-pro-card-v2__body {
padding: var(--hib-space-3) var(--hib-space-4) var(--hib-space-3);
}
.hib-pro-card-v2__footer {
padding: var(--hib-space-3) var(--hib-space-4) var(--hib-space-4);
}
.hib-pro-card-v2__distance-bar {
padding: 8px var(--hib-space-4);
}
.hib-pro-card-v2__proof {
flex-wrap: wrap;
}
}
/* ============================================================
28. HERO V2 — Stronger, iconic presence
============================================================ */
/* Value proposition callout */
.hib-hero__value-prop {
display: inline-flex;
align-items: center;
gap: var(--hib-space-2);
padding: 6px 14px;
background: var(--hib-surface);
border: 1px solid var(--hib-border);
border-radius: var(--hib-radius-pill);
font-size: var(--hib-label-s-size);
font-weight: 500;
color: var(--hib-text-secondary);
margin-bottom: var(--hib-space-5);
box-shadow: var(--hib-shadow-card);
}
.hib-hero__value-prop svg {
width: 16px;
height: 16px;
color: var(--hib-accent);
}
/* Stronger search module */
.hib-search-module__header {
display: flex;
align-items: center;
gap: var(--hib-space-2);
margin-bottom: var(--hib-space-5);
font-family: var(--hib-font-ui);
font-size: var(--hib-label-m-size);
font-weight: 600;
color: var(--hib-primary);
}
.hib-search-module__header svg {
width: 18px;
height: 18px;
}
/* ============================================================
29. DOMAIN PERSONALITY LAYERS
============================================================ */
/* --- Plumbing: service-oriented, functional, urgent-capable --- */
[data-domain="plumbing"] .hib-hero--domain {
background-image:
radial-gradient(
ellipse 70% 50% at 75% 35%,
var(--hib-domain-hero-glow) 0%,
transparent 70%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.28) 0%,
rgba(249, 249, 247, 0.42) 100%
),
url("plumbing-hero.png");
background-position:
center,
center,
center;
background-size:
auto,
auto,
cover;
background-repeat:
no-repeat;
}
[data-domain="plumbing"] .hib-pro-card-v2__distance-bar {
background: var(--hib-domain-panel-soft);
}
/* Plumbing-specific availability signal */
.hib-signal--available {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--hib-label-s-size);
font-weight: 600;
color: var(--hib-success);
}
.hib-signal--available::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--hib-success);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* --- Renovation: clean, project-oriented, transformative --- */
[data-domain="renovation"] .hib-hero--domain {
background:
radial-gradient(ellipse 80% 50% at 30% 50%, var(--hib-domain-hero-glow) 0%, transparent 70%),
linear-gradient(175deg, var(--hib-domain-panel-soft) 0%, var(--hib-bg) 65%);
}
[data-domain="renovation"] .hib-pro-card-v2__distance-bar {
background: var(--hib-domain-panel-soft);
}
/* Project type badge for renovation cards */
.hib-project-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: var(--hib-radius-pill);
font-size: var(--hib-micro-label-size);
font-weight: 600;
text-transform: uppercase;
letter-spacing: normal;
}
.hib-project-badge--apartment {
background: var(--hib-domain-panel-soft);
color: var(--hib-primary);
}
.hib-project-badge--bathroom {
background: var(--hib-domain-tag-soft);
color: var(--hib-primary-hover);
}
/* --- Design: minimal, refined, editorial, premium --- */
[data-domain="design"] .hib-hero--domain {
background:
radial-gradient(ellipse 60% 40% at 80% 30%, var(--hib-domain-hero-glow) 0%, transparent 70%),
linear-gradient(175deg, var(--hib-domain-panel-soft) 0%, var(--hib-bg) 60%);
}
[data-domain="design"] .hib-hero__pattern {
opacity: 0.012;
background-image:
linear-gradient(90deg, var(--hib-primary) 1px, transparent 1px),
linear-gradient(0deg, var(--hib-primary) 1px, transparent 1px);
background-size: 80px 80px;
}
[data-domain="design"] .hib-pro-card-v2__distance-bar {
background: var(--hib-domain-panel-soft);
border-bottom-color: var(--hib-domain-line);
font-weight: 500;
}
[data-domain="design"] .hib-card {
border-color: var(--hib-domain-line);
}
[data-domain="design"] .hib-card:hover {
box-shadow: 0 10px 28px rgba(41,40,38,.06);
transform: translateY(-1px);
}
[data-domain="design"] .hib-pro-card-v2__name {
font-weight: 600;
letter-spacing: normal;
}
[data-domain="design"] .hib-specialty-chip {
border-radius: var(--hib-radius-xs);
letter-spacing: normal;
font-size: var(--hib-label-m-size);
font-weight: 400;
border-color: var(--hib-domain-line);
}
[data-domain="design"] .hib-specialty-chip:hover {
border-color: var(--hib-primary);
background: var(--hib-domain-panel-soft);
}
[data-domain="design"] .hib-pro-card-v2__tag {
border-color: transparent;
background: var(--hib-domain-tag-soft);
font-weight: 400;
letter-spacing: normal;
}
[data-domain="design"] .hib-chip {
border-radius: var(--hib-radius-xs);
font-weight: 400;
}
/* Design: generous spacing */
[data-domain="design"] .hib-section {
padding: clamp(72px, 9vw, 128px) 0;
}
[data-domain="design"] .hib-section--compact {
padding: clamp(52px, 6.5vw, 96px) 0;
}
[data-domain="design"] .hib-section-header {
margin-bottom: var(--hib-section-header-mb);
}
[data-domain="design"] .hib-cta-section {
background: var(--hib-primary);
border-radius: var(--hib-radius-xl);
}
[data-domain="design"] .hib-cta-section__title {
font-family: var(--hib-font-display-design);
font-weight: 400;
font-size: var(--hib-design-display-l-size);
line-height: var(--hib-design-display-l-lh);
letter-spacing: normal;
}
[data-domain="design"] .hib-results-summary {
border-color: var(--hib-domain-line);
box-shadow: none;
}
@media (max-width: 767px) {
[data-domain="design"] .hib-section {
padding: clamp(48px, 7vw, 72px) 0;
}
[data-domain="design"] .hib-section--compact {
padding: clamp(36px, 5vw, 56px) 0;
}
}
/* --- Domain section accent bars --- */
.hib-section--domain-accent {
border-top: 3px solid var(--hib-primary);
}
/* ============================================================
30. RESULTS BAR V2
============================================================ */
.hib-results-summary {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--hib-space-4);
padding: var(--hib-space-5) var(--hib-space-6);
background: var(--hib-surface);
border-radius: var(--hib-radius-m);
border: 1px solid var(--hib-border);
box-shadow: var(--hib-shadow-card);
}
.hib-results-summary__text {
font-family: var(--hib-font-ui);
font-size: var(--hib-body-s-size);
color: var(--hib-text);
}
.hib-results-summary__text strong {
color: var(--hib-primary);
}
.hib-results-summary__address {
display: flex;
align-items: center;
gap: 4px;
font-size: var(--hib-label-s-size);
color: var(--hib-text-muted);
}
.hib-results-summary__address svg {
width: 14px;
height: 14px;
color: var(--hib-accent);
}
.hib-results-summary__sort {
display: flex;
gap: var(--hib-space-2);
}
/* ============================================================
31. MOBILE MENU (was inline, now systemic)
============================================================ */
.hib-mobile-menu {
position: fixed;
inset: 0;
z-index: 200;
background: var(--hib-dark-overlay);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity var(--hib-duration-slow) var(--hib-ease);
}
.hib-mobile-menu.is-open {
opacity: 1;
pointer-events: auto;
}
.hib-mobile-menu__inner {
position: absolute;
top: 0;
right: 0;
width: min(320px, 85vw);
height: 100%;
background: var(--hib-surface);
padding: var(--hib-space-8) var(--hib-space-6);
display: flex;
flex-direction: column;
gap: var(--hib-space-1);
transform: translateX(100%);
transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
overflow-y: auto;
}
.hib-mobile-menu.is-open .hib-mobile-menu__inner {
transform: translateX(0);
}
.hib-mobile-menu__link {
display: block;
padding: var(--hib-space-4) var(--hib-space-3);
font-size: var(--hib-h5-size);
font-weight: 500;
color: var(--hib-text);
border-radius: var(--hib-radius-xs);
transition: background var(--hib-duration-base) var(--hib-ease);
}
.hib-mobile-menu__link:hover {
background: var(--hib-neutral-50);
}
.hib-mobile-menu__link--active {
color: var(--hib-primary);
font-weight: 600;
}
.hib-mobile-menu__close {
align-self: flex-start; /* RTL: anchors to inline-start (right edge of panel) */
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--hib-radius-xs);
background: transparent;
color: var(--hib-text-muted);
cursor: pointer;
flex-shrink: 0;
margin-bottom: var(--hib-space-2);
transition: background var(--hib-duration-base) var(--hib-ease),
color var(--hib-duration-base) var(--hib-ease);
}
.hib-mobile-menu__close:hover {
background: var(--hib-neutral-50);
color: var(--hib-text);
}
/* ============================================================
32. PAGINATION (was inline, now systemic)
============================================================ */
.hib-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--hib-space-2);
margin-top: var(--hib-space-9);
}
.hib-pagination__btn {
display: flex;
align-items: center;
gap: var(--hib-space-1);
padding: var(--hib-space-2) var(--hib-space-4);
font-size: var(--hib-label-m-size);
font-weight: 500;
color: var(--hib-text-secondary);
border-radius: var(--hib-radius-xs);
cursor: pointer;
transition: background var(--hib-duration-base) var(--hib-ease), color var(--hib-duration-base) var(--hib-ease);
}
.hib-pagination__btn:hover:not(:disabled) {
background: var(--hib-neutral-100);
color: var(--hib-text);
}
.hib-pagination__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.hib-pagination__pages {
display: flex;
align-items: center;
gap: var(--hib-space-1);
}
.hib-pagination__page {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--hib-radius-xs);
font-size: var(--hib-label-m-size);
font-weight: 500;
color: var(--hib-text-secondary);
cursor: pointer;
transition: background var(--hib-duration-base) var(--hib-ease), color var(--hib-duration-base) var(--hib-ease);
}
.hib-pagination__page:hover {
background: var(--hib-neutral-100);
}
.hib-pagination__page--active {
background: var(--hib-primary);
color: white;
}
.hib-pagination__dots {
color: var(--hib-text-muted);
font-size: var(--hib-label-m-size);
padding: 0 var(--hib-space-1);
}
/* ============================================================
33. UTILITY CLASSES — kill inline styles
============================================================ */
.hib-card-flex-body {
display: flex;
flex-direction: column;
height: 100%;
}
.hib-w-full { width: 100%; }
.hib-mt-4 { margin-top: var(--hib-space-4); }
.hib-mt-6 { margin-top: var(--hib-space-6); }
.hib-mt-8 { margin-top: var(--hib-space-8); }
.hib-mb-4 { margin-bottom: var(--hib-space-4); }
.hib-bg-soft { background: var(--hib-surface-soft); }
/* Hero centered layout */
.hib-hero--centered .hib-hero__content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hib-hero--centered .hib-hero__title {
max-width: var(--hib-container-narrow);
text-align: center;
}
.hib-hero--centered .hib-hero__subtitle {
max-width: 540px;
text-align: center;
}
/* Section rhythm enhancers */
.hib-section--elevated {
position: relative;
z-index: 1;
}
/* Results summary address line */
.hib-results-summary__info {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Trust language micro-badge */
.hib-trust-micro {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--hib-micro-label-size);
font-weight: 500;
color: var(--hib-text-muted);
letter-spacing: normal;
}
.hib-trust-micro svg {
width: 12px;
height: 12px;
color: var(--hib-success);
}
/* ============================================================
34. PROFESSIONAL PROFILE PAGE
============================================================ */
/* --- Profile Hero --- */
.hib-profile-hero {
padding: clamp(64px, 7vw, 104px) 0 clamp(56px, 6vw, 88px);
background:
radial-gradient(ellipse 70% 90% at 92% 0%, rgba(29, 84, 196,0.09) 0%, transparent 60%),
linear-gradient(180deg, var(--hib-domain-soft) 0%, var(--hib-bg) 70%);
position: relative;
}
.hib-profile-hero__grid {
display: grid;
grid-template-columns: 400px 1fr;
gap: var(--hib-space-8);
align-items: start;
}
.hib-profile-hero__media {
border-radius: var(--hib-radius-l);
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--hib-neutral-200);
position: relative;
}
.hib-profile-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Placeholder when no image */
.hib-profile-hero__media--empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--hib-text-muted);
font-size: 3rem;
font-weight: 700;
background: var(--hib-domain-soft);
}
.hib-profile-hero__summary {
display: flex;
flex-direction: column;
gap: var(--hib-space-5);
}
.hib-profile-hero__name {
font-family: var(--hib-font-display);
font-size: var(--hib-h1-size);
font-weight: var(--hib-heading-weight-section);
line-height: var(--hib-h1-lh);
letter-spacing: normal;
}
.hib-profile-hero__badges {
display: flex;
flex-wrap: wrap;
gap: var(--hib-space-2);
align-items: center;
}
.hib-profile-hero__specs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hib-profile-hero__areas-preview {
display: flex;
align-items: center;
gap: var(--hib-space-2);
font-size: var(--hib-label-m-size);
color: var(--hib-text-secondary);
line-height: 1.5;
}
.hib-profile-hero__areas-preview svg {
width: 16px;
height: 16px;
color: var(--hib-accent);
flex-shrink: 0;
}
.hib-profile-hero__cta {
display: flex;
gap: var(--hib-space-3);
padding-top: var(--hib-space-5);
border-top: 1px solid var(--hib-divider);
margin-top: var(--hib-space-1);
flex-wrap: wrap;
align-items: center;
}
.hib-profile-hero__cta .hib-btn--primary {
min-width: 220px;
font-weight: 700;
box-shadow: 0 3px 12px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08);
}
.hib-profile-hero__cta .hib-btn--primary:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.08);
}
@media (max-width: 1023px) {
.hib-profile-hero__grid {
grid-template-columns: 1fr;
gap: var(--hib-space-6);
}
.hib-profile-hero__media {
max-height: 320px;
}
}
@media (max-width: 767px) {
.hib-profile-hero {
padding: var(--hib-space-6) 0 var(--hib-space-8);
}
.hib-profile-hero__media {
max-height: 260px;
}
.hib-profile-hero__name {
font-size: clamp(1.5rem, 5vw, var(--hib-h1-size));
}
.hib-profile-hero__cta {
flex-direction: column;
padding-top: var(--hib-space-5);
}
.hib-profile-hero__cta .hib-btn {
width: 100%;
}
}
/* --- Profile About --- */
.hib-profile-about {
max-width: 68ch;
}
.hib-profile-about__text {
font-size: var(--hib-body-profile-size);
line-height: var(--hib-body-profile-lh);
color: var(--hib-text-strong);
}
/* --- Profile Specialties --- */
.hib-profile-specialties__title {
font-family: var(--hib-font-ui);
font-size: var(--hib-band-title-size);
font-weight: 600;
line-height: 1.30;
letter-spacing: normal;
margin-bottom: var(--hib-space-5);
}
.hib-profile-specialties__grid {
display: flex;
flex-wrap: wrap;
gap: var(--hib-space-3);
}
.hib-profile-specialties__item {
display: flex;
align-items: center;
gap: var(--hib-space-3);
padding: var(--hib-space-3) var(--hib-space-5);
background: var(--hib-surface);
border: 1px solid var(--hib-border);
border-radius: var(--hib-radius-s);
font-size: var(--hib-body-s-size);
font-weight: 500;
color: var(--hib-text);
}
.hib-profile-specialties__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--hib-accent);
flex-shrink: 0;
}
/* --- Profile Service Areas --- */
.hib-profile-areas__title {
font-family: var(--hib-font-ui);
font-size: var(--hib-band-title-size);
font-weight: 600;
line-height: 1.30;
letter-spacing: normal;
margin-bottom: var(--hib-space-5);
}
.hib-profile-areas__grid {
display: flex;
flex-wrap: wrap;
gap: var(--hib-space-2);
}
.hib-profile-areas__chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: var(--hib-space-2) var(--hib-space-4);
background: var(--hib-domain-soft);
border-radius: var(--hib-radius-s);
font-size: var(--hib-label-m-size);
font-weight: 500;
color: var(--hib-primary);
}
.hib-profile-areas__chip svg {
width: 14px;
height: 14px;
}
.hib-profile-areas__toggle {
margin-top: var(--hib-space-3);
font-size: var(--hib-label-m-size);
font-weight: 500;
color: var(--hib-accent);
cursor: pointer;
background: none;
border: none;
padding: 0;
transition: color var(--hib-duration-base) var(--hib-ease);
}
.hib-profile-areas__toggle:hover {
color: var(--hib-primary);
}
/* --- Profile Gallery --- */
.hib-profile-gallery__item {
border-radius: var(--hib-radius-m);
overflow: hidden;
background: var(--hib-neutral-200);
aspect-ratio: 4 / 3;
cursor: pointer;
transition: opacity var(--hib-duration-base) var(--hib-ease);
}
.hib-profile-gallery__item--main {
grid-row: 1 / 3;
aspect-ratio: 3 / 4;
}
/* Review card */
.hib-review-card {
padding: clamp(var(--hib-space-5), 2.4vw, var(--hib-space-6));
background: #FFFFFF;
border: 1px solid var(--hib-hairline, var(--hib-border-accent));
border-radius: var(--hib-radius-card);
box-shadow: var(--hib-shadow-card);
transition:
transform 320ms var(--hib-ease-out-soft, var(--hib-ease)),
border-color 320ms var(--hib-ease),
box-shadow 320ms var(--hib-ease);
position: relative;
}
.hib-review-card:hover {
transform: translateY(-2px);
border-color: rgba(29, 84, 196,0.22);
box-shadow: var(--hib-shadow-card-hover);
}
.hib-review-card::before {
content: "\201C";
position: absolute;
top: 8px;
inset-inline-end: 18px;
font-family: var(--hib-font-display);
font-size: 4rem;
line-height: 1;
color: var(--hib-primary);
opacity: 0.10;
pointer-events: none;
}
.hib-review-card__header {
display: flex;
align-items: center;
gap: var(--hib-space-3);
margin-bottom: var(--hib-space-3);
}
.hib-review-card__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(29, 84, 196,0.12) 0%, rgba(46,134,193,0.08) 100%);
color: var(--hib-primary);
border: 1px solid var(--hib-border-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--hib-font-display);
font-size: var(--hib-label-m-size);
font-weight: 800;
letter-spacing: normal;
flex-shrink: 0;
}
.hib-review-card__info {
flex: 1;
}
.hib-review-card__name {
font-family: var(--hib-font-ui);
font-size: var(--hib-body-s-size);
font-weight: 600;
letter-spacing: normal;
color: var(--hib-ink, #14171A);
}
.hib-review-card__date {
font-family: var(--hib-font-body);
font-size: var(--hib-micro-label-size);
letter-spacing: normal;
text-transform: uppercase;
font-weight: 600;
color: var(--hib-text-muted);
}
.hib-review-card__stars {
display: inline-flex;
gap: 1px;
color: #E4B23C;
margin-bottom: var(--hib-space-3);
}
.hib-review-card__stars svg {
width: 14px;
height: 14px;
color: var(--hib-rating-star);
}
.hib-review-card__text {
font-size: var(--hib-body-s-size);
line-height: 1.75;
color: var(--hib-text-strong);
}
.hib-profile-reviews__more {
margin-top: var(--hib-space-7);
text-align: center;
}
/* --- Bottom CTA ---
Surface material lives on the shared .hib-cta-surface class in
hib-extra.css; the texture is a real .hib-cta-surface__texture element
in the markup now, not a ::before, so this block matches the family's
anatomy and owns only its centred composition. */
.hib-profile-bottom-cta {
text-align: center;
}
.hib-profile-bottom-cta__title {
font-family: var(--hib-font-display);
font-size: var(--hib-display-l-size);
font-weight: var(--hib-heading-weight-section);
line-height: var(--hib-display-l-lh);
letter-spacing: normal;
margin-bottom: var(--hib-space-3);
}
.hib-profile-bottom-cta__desc {
font-size: clamp(1rem, 1.4vw, 1.125rem);
line-height: 1.6;
opacity: 0.88;
margin-bottom: var(--hib-space-7);
}
.hib-profile-bottom-cta__secondary {
margin-top: var(--hib-space-5);
font-size: var(--hib-label-m-size);
color: var(--hib-on-dark-muted);
}
@media (max-width: 767px) {
.hib-profile-bottom-cta__title {
font-size: var(--hib-h2-size);
}
.hib-profile-bottom-cta .hib-btn {
width: 100%;
}
}
/* --- Design domain overrides for profile --- */
[data-domain="design"] .hib-profile-hero {
background: linear-gradient(175deg, var(--hib-domain-panel-soft) 0%, var(--hib-bg) 55%);
}
[data-domain="design"] .hib-profile-gallery__item {
border-radius: var(--hib-radius-s);
}
[data-domain="design"] .hib-review-card {
border-color: var(--hib-domain-line);
}
[data-domain="design"] .hib-profile-specialties__item {
border-color: var(--hib-domain-line);
font-weight: 400;
}
/* --- Renovation domain overrides for profile --- */
[data-domain="renovation"] .hib-profile-hero {
background: linear-gradient(175deg, var(--hib-domain-panel-soft) 0%, var(--hib-bg) 60%);
}
.hib-star--empty {
opacity: 0.25;
}
/* ============================================================
35. PROFILE REFINEMENTS — Trust notes, compact previews,
gallery placeholders, reviews upgrade, domain variants
============================================================ */
/* --- Hero Summary: grouped blocks with visual separation --- */
.hib-profile-hero__block {
display: flex;
flex-direction: column;
gap: var(--hib-space-2);
}
/* Trust note — under rating */
.hib-profile-hero__trust-note svg {
width: 14px;
height: 14px;
color: var(--hib-success);
flex-shrink: 0;
}
/* Compact specialties in hero — max 4 */
.hib-profile-hero__specs--compact .hib-pro-card-v2__tag:nth-child(n+5) {
display: none;
}
/* Short areas preview */
.hib-profile-hero__areas-preview--short {
font-size: var(--hib-label-s-size);
}
/* --- Gallery Placeholder Variants --- */
.hib-profile-gallery__placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--hib-space-2);
color: var(--hib-text-muted);
font-size: var(--hib-label-s-size);
font-weight: 500;
background: var(--hib-domain-soft);
}
.hib-profile-gallery__placeholder svg {
width: 28px;
height: 28px;
color: var(--hib-primary);
opacity: 0.4;
}
.hib-profile-gallery__placeholder-label {
opacity: 0.7;
}
/* Plumbing gallery */
[data-domain="plumbing"] .hib-profile-gallery__placeholder {
background: var(--hib-domain-panel-soft);
}
/* Renovation gallery */
[data-domain="renovation"] .hib-profile-gallery__placeholder {
background: var(--hib-domain-panel-soft);
}
/* Design gallery */
[data-domain="design"] .hib-profile-gallery__placeholder {
background: var(--hib-domain-surface-soft);
border: 1px solid var(--hib-domain-line);
}
/* --- Reviews Header Upgrade --- */
.hib-profile-reviews__header-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.hib-profile-reviews__subtext {
font-size: var(--hib-label-s-size);
color: var(--hib-text-muted);
font-weight: 400;
}
.hib-badge--approved-reviews {
background: var(--hib-success-soft);
color: var(--hib-success);
font-size: var(--hib-micro-label-size);
font-weight: 600;
padding: 3px 8px;
border-radius: var(--hib-radius-pill);
display: inline-flex;
align-items: center;
gap: 3px;
}
.hib-badge--approved-reviews svg {
width: 10px;
height: 10px;
}
/* --- Design domain profile overrides (deeper) --- */
[data-domain="design"] .hib-profile-hero__summary--grouped {
gap: var(--hib-space-7);
}
[data-domain="design"] .hib-profile-hero__block + .hib-profile-hero__block {
border-top-color: var(--hib-domain-line);
}
[data-domain="design"] .hib-profile-about__text {
font-size: var(--hib-body-profile-size);
line-height: 1.82; /* intentional: design domain slightly tighter than base 1.85 */
}
[data-domain="design"] .hib-profile-areas__chip {
background: var(--hib-domain-tag-soft);
color: var(--hib-text-secondary);
font-weight: 400;
font-size: var(--hib-label-s-size);
}
[data-domain="design"] .hib-profile-bottom-cta {
border-radius: var(--hib-radius-xl);
}
/* Design profile: more breathing room */
[data-domain="design"] .hib-profile-hero {
padding: var(--hib-space-11) 0 var(--hib-space-12);
}
/* --- Renovation profile --- */
[data-domain="renovation"] .hib-profile-specialties__item {
border-color: var(--hib-domain-tag-soft);
}
[data-domain="renovation"] .hib-profile-areas__chip {
background: var(--hib-domain-panel-soft);
}
/* ============================================================
36. VIDEO SINGLE PAGE
============================================================ */
/* --- Video Hero / Content Header --- */
.hib-video-hero {
padding: var(--hib-space-8) 0 var(--hib-space-6);
background: linear-gradient(175deg, var(--hib-domain-soft) 0%, var(--hib-bg) 50%);
}
.hib-video-hero__meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hib-space-2) var(--hib-space-3);
margin-bottom: var(--hib-space-4);
}
.hib-video-hero__meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--hib-label-s-size);
color: var(--hib-text-muted);
}
.hib-video-hero__meta-item svg {
width: 14px;
height: 14px;
}
.hib-video-hero__title {
font-family: var(--hib-font-display);
font-size: var(--hib-h1-size);
font-weight: var(--hib-heading-weight-section);
line-height: var(--hib-h1-lh);
letter-spacing: normal;
margin-bottom: var(--hib-space-4);
max-width: 780px;
}
.hib-video-hero__lead {
font-size: var(--hib-h5-size);
line-height: 1.65;
color: var(--hib-text-secondary);
max-width: 680px;
margin-bottom: var(--hib-space-4);
}
.hib-video-hero__source {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--hib-space-2);
margin-top: var(--hib-space-5);
padding-top: var(--hib-space-4);
border-top: 1px dashed var(--hib-border-accent);
font-size: var(--hib-label-s-size);
color: var(--hib-text-muted);
}
.hib-video-hero__source svg {
width: 14px;
height: 14px;
color: var(--hib-accent);
}
/* --- Video Player --- */
.hib-video-player {
max-width: 880px;
margin: 0 auto;
}
.hib-video-player__frame {
aspect-ratio: 16 / 9;
border-radius: var(--hib-radius-l);
overflow: hidden;
background: var(--hib-neutral-900);
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--hib-shadow-l);
}
.hib-video-player__frame iframe,
.hib-video-player__frame video {
width: 100%;
height: 100%;
border: 0;
}
/* Placeholder */
.hib-video-player__placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--hib-space-3);
color: var(--hib-neutral-400);
width: 100%;
height: 100%;
cursor: pointer;
transition: opacity var(--hib-duration-base) var(--hib-ease);
}
.hib-video-player__placeholder:hover {
opacity: 0.85;
}
.hib-video-player__play-btn {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(255,255,255,.15);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: background var(--hib-duration-base) var(--hib-ease),
transform var(--hib-duration-base) var(--hib-ease);
}
.hib-video-player__placeholder:hover .hib-video-player__play-btn {
background: rgba(255,255,255,.25);
transform: scale(1.06);
}
.hib-video-player__placeholder-label {
font-size: var(--hib-label-m-size);
font-weight: 500;
color: var(--hib-neutral-400);
}
@media (max-width: 767px) {
.hib-video-player__frame {
border-radius: var(--hib-radius-m);
}
.hib-video-player__play-btn {
width: 56px;
height: 56px;
}
}
/* --- Video Summary Strip --- */
.hib-video-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--hib-space-4);
}
.hib-video-summary__card {
padding: clamp(var(--hib-space-5), 2.4vw, var(--hib-space-6));
background: linear-gradient(180deg, #FFFFFF 0%, var(--hib-surface-cream-2, #F5F3EC) 120%);
border: 1px solid var(--hib-hairline, var(--hib-border-accent));
border-radius: var(--hib-radius-card);
text-align: start;
display: flex;
flex-direction: column;
gap: 6px;
transition:
transform 360ms var(--hib-ease-out-soft, var(--hib-ease)),
border-color 360ms var(--hib-ease);
}
.hib-video-summary__card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px -16px rgba(16,24,40,0.14);
border-color: rgba(29, 84, 196,0.20);
}
.hib-video-summary__card-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(29, 84, 196,0.10) 0%, rgba(46,134,193,0.08) 100%);
border: 1px solid var(--hib-border-accent);
border-radius: var(--hib-radius-icon);
color: var(--hib-primary);
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 0 var(--hib-space-3);
}
.hib-video-summary__card-icon svg { width: 20px; height: 20px; }
.hib-video-summary__card-label {
font-size: var(--hib-micro-label-size);
letter-spacing: normal;
text-transform: uppercase;
font-weight: 600;
color: var(--hib-text-muted);
margin-bottom: 0;
}
.hib-video-summary__card-value {
font-family: var(--hib-font-display);
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
color: var(--hib-ink, #14171A);
}
/* --- Video Content / Description --- */
.hib-video-content {
max-width: 68ch;
margin: 0 auto;
}
.hib-video-content__title {
font-family: var(--hib-font-heading);
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: var(--hib-heading-weight-document);
line-height: 1.2;
letter-spacing: normal;
color: var(--hib-ink, #14171A);
margin-bottom: var(--hib-space-5);
padding-bottom: var(--hib-space-3);
border-bottom: 1px solid var(--hib-hairline, var(--hib-border-accent));
}
.hib-video-content__body {
font-size: var(--hib-body-profile-size);
line-height: var(--hib-body-profile-lh);
color: var(--hib-text-strong);
}
.hib-video-content__body p {
margin-bottom: var(--hib-space-5);
}
.hib-video-content__body p:last-child {
margin-bottom: 0;
}
/* --- Takeaways / Checklist --- */
.hib-video-takeaways {
max-width: 68ch;
margin: 0 auto;
padding: clamp(var(--hib-space-6), 3vw, var(--hib-space-8));
background:
radial-gradient(ellipse 120% 90% at 0% 0%, rgba(29, 84, 196,0.06) 0%, transparent 55%),
linear-gradient(180deg, #FFFFFF 0%, var(--hib-surface-cream, #FAFAF5) 100%);
border: 1px solid var(--hib-hairline, var(--hib-border-accent));
border-radius: var(--hib-radius-section);
box-shadow: var(--hib-shadow-m);
position: relative;
}
.hib-video-takeaways__item {
display: flex;
gap: var(--hib-space-3);
font-size: var(--hib-body-s-size);
line-height: 1.6;
color: var(--hib-text);
}
/* --- Related Videos --- */
.hib-video-related__title {
font-family: var(--hib-font-ui);
font-size: var(--hib-band-title-size);
font-weight: 600;
line-height: 1.25;
letter-spacing: normal;
margin-bottom: var(--hib-space-6);
}
/* --- Domain overrides for video page --- */
[data-domain="design"] .hib-video-hero {
background: linear-gradient(175deg, var(--hib-domain-panel-soft) 0%, var(--hib-bg) 50%);
}
[data-domain="design"] .hib-video-takeaways {
background: var(--hib-domain-surface-soft);
border: 1px solid var(--hib-domain-line);
}
[data-domain="renovation"] .hib-video-hero {
background: linear-gradient(175deg, var(--hib-domain-panel-soft) 0%, var(--hib-bg) 50%);
}
/* --- Featured Video --- */
.hib-featured-video {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(var(--hib-space-5), 3vw, var(--hib-space-8));
align-items: center;
padding: clamp(var(--hib-space-5), 3vw, var(--hib-space-7));
background: linear-gradient(180deg, #FFFFFF 0%, var(--hib-surface-cream, #FAFAF5) 100%);
border: 1px solid var(--hib-hairline, var(--hib-border-accent));
border-radius: clamp(16px, 1.6vw, 22px);
overflow: hidden;
box-shadow:
0 1px 2px rgba(16,24,40,0.04),
0 12px 32px -20px rgba(29, 84, 196,0.22);
transition:
transform 380ms var(--hib-ease-out-soft, var(--hib-ease)),
box-shadow 380ms var(--hib-ease-out-soft, var(--hib-ease)),
border-color 380ms var(--hib-ease);
}
.hib-featured-video:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(16,24,40,0.06),
0 24px 48px -22px rgba(29, 84, 196,0.30);
border-color: rgba(29, 84, 196,0.20);
}
.hib-featured-video__thumb {
aspect-ratio: 16 / 10;
border-radius: clamp(10px, 1.2vw, 16px);
box-shadow: 0 12px 28px -14px rgba(16,24,40,0.28);
overflow: hidden;
position: relative;
isolation: isolate;
background-color: var(--hib-neutral-900);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.hib-featured-video__thumb::before {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 100%),
linear-gradient(135deg, rgba(29, 84, 196,0.18) 0%, transparent 55%);
z-index: 1;
pointer-events: none;
}
.hib-featured-video__thumb:not(.hib-featured-video__thumb--embed):hover {
cursor: pointer;
}
.hib-featured-video__play {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(255,255,255,0.94);
color: var(--hib-primary);
box-shadow:
0 0 0 8px rgba(255,255,255,0.14),
0 12px 24px rgba(0,0,0,0.25);
backdrop-filter: none;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
.hib-featured-video__play svg { transform: translateX(-2px); }
.hib-featured-video__thumb--embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.hib-featured-video__thumb:hover .hib-featured-video__play {
background: #FFFFFF;
transform: scale(1.08);
box-shadow:
0 0 0 12px rgba(255,255,255,0.18),
0 16px 32px rgba(0,0,0,0.32);
}
.hib-featured-video__content {
display: flex;
flex-direction: column;
gap: var(--hib-space-3);
padding: clamp(var(--hib-space-6), 3vw, var(--hib-space-8));
}
.hib-featured-video__badge-row {
display: flex;
gap: var(--hib-space-2);
align-items: center;
}
.hib-featured-video__title {
font-family: var(--hib-font-display);
font-size: clamp(1.4rem, 2.2vw, 1.75rem);
font-weight: var(--hib-heading-weight-section);
line-height: 1.18;
letter-spacing: normal;
color: var(--hib-ink, #14171A);
}
.hib-featured-video__lead {
font-size: 1rem;
line-height: 1.6;
color: var(--hib-text-strong);
}
.hib-featured-video__meta {
font-size: var(--hib-label-s-size);
color: var(--hib-text-strong);
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border: 1px solid var(--hib-hairline, var(--hib-border-accent));
background: rgba(255,255,255,0.7);
border-radius: var(--hib-radius-pill);
align-self: flex-start;
}
.hib-featured-video__meta svg {
width: 14px;
height: 14px;
color: var(--hib-primary);
opacity: 0.85;
}
.hib-featured-video .hib-btn { align-self: flex-start; }
@media (max-width: 767px) {
.hib-featured-video {
grid-template-columns: 1fr;
gap: var(--hib-space-4);
padding: var(--hib-space-5);
border-radius: var(--hib-radius-m);
}
.hib-featured-video__play {
width: 56px;
height: 56px;
}
}
/* --- Related Topics --- */
.hib-related-topics__title {
font-family: var(--hib-font-ui);
font-size: var(--hib-band-title-size);
font-weight: 600;
line-height: 1.25;
letter-spacing: normal;
margin-bottom: var(--hib-space-5);
}
.hib-related-topic-card {
display: flex;
align-items: center;
gap: var(--hib-space-3);
padding: var(--hib-space-4) var(--hib-space-5);
background: #FFFFFF;
border: 1px solid var(--hib-hairline, var(--hib-border-accent));
border-radius: var(--hib-radius-card);
font-size: var(--hib-body-s-size);
font-weight: 600;
color: var(--hib-ink, #14171A);
transition:
transform 320ms var(--hib-ease-out-soft, var(--hib-ease)),
border-color 320ms var(--hib-ease),
box-shadow 320ms var(--hib-ease);
cursor: pointer;
text-decoration: none;
}
.hib-related-topic-card:hover {
transform: translateY(-2px);
border-color: rgba(29, 84, 196,0.22);
box-shadow: 0 14px 28px -18px rgba(29, 84, 196,0.26);
}
.hib-related-topic-card svg {
width: 22px;
height: 22px;
padding: 4px;
background: linear-gradient(135deg, rgba(29, 84, 196,0.10) 0%, rgba(46,134,193,0.08) 100%);
border: 1px solid var(--hib-border-accent);
border-radius: var(--hib-radius-xs);
color: var(--hib-primary);
flex-shrink: 0;
}
[data-domain="design"] .hib-featured-video {
border-color: var(--hib-domain-line);
}
[data-domain="design"] .hib-related-topic-card {
border-color: var(--hib-domain-line);
}
/* ============================================================
37b. GUIDE LIST — Vertical index-style guide entries
============================================================ */
.hib-guide-list {
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
background: #FFFFFF;
border: 1px solid var(--hib-hairline);
border-radius: var(--hib-radius-m);
box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 12px 28px -22px rgba(29, 84, 196,0.18);
}
.hib-guide-entry {
display: grid;
grid-template-columns: 152px 1fr auto;
gap: clamp(var(--hib-space-4), 2.4vw, var(--hib-space-6));
align-items: center;
padding: clamp(var(--hib-space-4), 2.2vw, var(--hib-space-5)) clamp(var(--hib-space-5), 3vw, var(--hib-space-7));
border-bottom: 1px solid var(--hib-hairline, var(--hib-border-accent));
text-decoration: none;
color: inherit;
transition: background 260ms var(--hib-ease), padding-inline 320ms var(--hib-ease);
}
.hib-guide-entry:last-child {
border-bottom: none;
}
.hib-guide-entry:hover {
background: linear-gradient(180deg, rgba(29, 84, 196,0.03) 0%, rgba(29, 84, 196,0.01) 100%);
}
.hib-guide-entry__thumb {
aspect-ratio: 16 / 10;
border-radius: var(--hib-radius-icon);
background-color: var(--hib-surface-cream);
background-size: cover;
background-position: center;
box-shadow: 0 6px 16px -10px rgba(16,24,40,0.32);
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.hib-guide-entry__thumb::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.35) 100%);
}
.hib-guide-entry__thumb-play {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255,255,255,0.96);
color: var(--hib-primary);
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
transition: background 280ms var(--hib-ease-out-soft, var(--hib-ease)), transform var(--hib-duration-base) var(--hib-ease);
}
.hib-guide-entry:hover .hib-guide-entry__thumb-play {
transform: scale(1.08);
background: rgba(29, 84, 196,0.55);
}
.hib-guide-entry__content {
display: flex;
flex-direction: column;
gap: var(--hib-space-1);
min-width: 0;
}
.hib-guide-entry__title {
font-family: var(--hib-font-ui);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: normal;
color: var(--hib-ink, #14171A);
margin-top: 6px;
}
.hib-guide-entry__summary {
font-size: var(--hib-body-s-size);
line-height: 1.55;
color: var(--hib-text-strong);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 4px;
}
.hib-guide-entry__meta {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--hib-micro-label-size);
letter-spacing: normal;
text-transform: uppercase;
font-weight: 600;
color: var(--hib-text-muted);
margin-top: var(--hib-space-2);
}
.hib-guide-entry__meta svg {
width: 13px;
height: 13px;
color: var(--hib-primary);
opacity: 0.8;
}
.hib-guide-entry__cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--hib-label-s-size);
font-weight: 700;
color: var(--hib-primary);
white-space: nowrap;
padding: 8px 10px;
border-radius: var(--hib-radius-icon);
border: 1px solid transparent;
transition: background 240ms var(--hib-ease), border-color 240ms var(--hib-ease);
}
.hib-guide-entry__cta svg {
width: 14px;
height: 14px;
transition: transform var(--hib-duration-base) var(--hib-ease);
}
.hib-guide-entry:hover .hib-guide-entry__cta {
background: rgba(29, 84, 196,0.06);
border-color: var(--hib-border-accent);
}
.hib-guide-entry:hover .hib-guide-entry__cta svg {
transform: translateX(-3px);
}
@media (max-width: 767px) {
.hib-guide-entry {
grid-template-columns: 96px 1fr;
gap: var(--hib-space-4);
padding: var(--hib-space-4) var(--hib-space-4);
}
.hib-guide-entry__cta {
display: none;
}
.hib-guide-entry__content {
gap: 2px;
}
.hib-guide-entry__summary {
-webkit-line-clamp: 1;
line-clamp: 1;
}
}
@media (max-width: 479px) {
.hib-guide-entry__thumb {
display: none;
}
.hib-guide-entry {
grid-template-columns: 1fr;
}
}
/* ============================================================
38. POLICY / REGULATION PAGE
============================================================ */
/* --- Policy Hero --- */
.hib-policy-hero {
padding: clamp(64px, 8vw, 104px) 0 clamp(44px, 5.5vw, 68px);
background:
radial-gradient(ellipse 85% 90% at 50% -5%, rgba(29, 84, 196,0.08) 0%, transparent 60%),
linear-gradient(180deg, var(--hib-domain-soft) 0%, var(--hib-bg) 68%);
position: relative;
}
.hib-policy-hero__meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hib-space-2);
margin-bottom: var(--hib-space-4);
}
/* A legal document opens an interior page, so its title takes the interior
PAGE-TITLE role — the same one the directory hero, the guides hero, the
category hero, the contact panel, the add-professional gate and the
professional's own name already carry. It was bound to the raw `--hib-h1-size`
instead, which rendered 72px against that family's 46.08px: the four legal
documents opened 1.56× louder than the profile of a vetted professional, and
in a different weight class. Authority on this page is the navy band, the
badge row and the measure — not a larger number than every other H1. */
.hib-policy-hero__title {
font-family: var(--hib-font-display);
font-size: var(--hib-page-title-size);
font-weight: 900; /* the authored weight the rest of the page-title family uses */
line-height: var(--hib-page-title-lh);
letter-spacing: normal;
margin-bottom: var(--hib-space-3);
max-width: var(--hib-policy-hero-title-max);
}
.hib-policy-hero__desc {
font-size: var(--hib-body-profile-size);
line-height: 1.65;
color: var(--hib-text-secondary);
max-width: 640px;
margin-bottom: var(--hib-space-5);
}
.hib-policy-hero__stats {
display: flex;
gap: var(--hib-space-6);
font-size: var(--hib-label-s-size);
color: var(--hib-text-muted);
}
.hib-policy-hero__stat {
display: flex;
align-items: center;
gap: 4px;
}
.hib-policy-hero__stat svg {
width: 14px;
height: 14px;
color: var(--hib-accent);
}
/* --- Principles Grid --- */
.hib-policy-principles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--hib-space-4);
}
.hib-policy-principle {
display: flex;
gap: var(--hib-space-4);
padding: var(--hib-space-5);
background: var(--hib-surface);
border: 1px solid var(--hib-border);
border-radius: var(--hib-radius-s);
}
.hib-policy-principle__icon {
width: 40px;
height: 40px;
border-radius: var(--hib-radius-icon);
background: var(--hib-domain-soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--hib-primary);
}
.hib-policy-principle__icon svg {
width: 20px;
height: 20px;
}
.hib-policy-principle__title {
font-size: var(--hib-body-s-size);
font-weight: 600;
margin-bottom: 2px;
}
.hib-policy-principle__desc {
font-size: var(--hib-label-s-size);
color: var(--hib-text-secondary);
line-height: 1.45; /* meta rung leading */
}
/* --- Standards Sections --- */
.hib-policy-standards {
max-width: 800px;
}
.hib-policy-standards__section {
margin-bottom: clamp(var(--hib-space-8), 6vw, var(--hib-space-11));
padding-bottom: clamp(var(--hib-space-8), 6vw, var(--hib-space-11));
border-bottom: 1px solid rgba(29, 84, 196,0.09);
}
.hib-policy-standards__section:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.hib-policy-standards__heading {
font-family: var(--hib-font-heading);
font-size: clamp(1.125rem, 2vw, 1.375rem);
font-weight: var(--hib-heading-weight-section);
line-height: var(--hib-band-title-lh);
letter-spacing: normal;
color: var(--hib-ink, #14171A);
margin-bottom: var(--hib-space-4);
display: flex;
align-items: center;
gap: var(--hib-space-3);
}
.hib-policy-standards__heading-number {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--hib-primary) 0%, #4C7CE0 100%);
box-shadow: 0 4px 10px -4px rgba(29, 84, 196,0.50);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--hib-label-m-size);
font-weight: 700;
flex-shrink: 0;
}
.hib-policy-standards__body {
font-size: var(--hib-body-policy-size);
line-height: var(--hib-body-policy-lh);
color: var(--hib-text-strong);
padding-inline-end: 50px;
}
.hib-policy-standards__body p {
margin-bottom: var(--hib-space-3);
}
.hib-policy-standards__body p:last-child {
margin-bottom: 0;
}
@media (max-width: 767px) {
.hib-policy-standards__body {
padding-inline-end: 0;
}
}
/* --- Process Steps --- */
.hib-policy-process__title {
font-family: var(--hib-font-heading);
font-size: var(--hib-band-title-size);
font-weight: var(--hib-heading-weight-section);
line-height: var(--hib-band-title-lh);
letter-spacing: normal;
margin-bottom: var(--hib-space-6);
}
.hib-policy-process__steps {
display: flex;
flex-direction: column;
gap: var(--hib-space-5);
max-width: 640px;
}
.hib-policy-process__step {
display: flex;
gap: var(--hib-space-4);
align-items: flex-start;
}
.hib-policy-process__step-number {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--hib-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--hib-label-m-size);
font-weight: 700;
flex-shrink: 0;
}
.hib-policy-process__step-content {
padding-top: 6px;
}
.hib-policy-process__step-title {
font-size: var(--hib-body-s-size);
font-weight: 600;
margin-bottom: 2px;
}
.hib-policy-process__step-desc {
font-size: var(--hib-label-s-size);
color: var(--hib-text-secondary);
line-height: 1.55;
}
/* --- Enforcement Callout --- */
.hib-policy-enforcement {
max-width: 800px;
padding: clamp(var(--hib-space-5), 3vw, var(--hib-space-7));
background:
radial-gradient(ellipse 120% 90% at 100% 0%, rgba(29, 84, 196,0.06) 0%, transparent 55%),
linear-gradient(180deg, #FFFFFF 0%, var(--hib-surface-cream, #FAFAF5) 100%);
border: 1px solid var(--hib-border-accent);
border-inline-start: 3px solid var(--hib-primary);
border-radius: var(--hib-radius-m);
box-shadow: 0 6px 20px -14px rgba(29, 84, 196,0.20);
}
.hib-policy-enforcement__title {
font-family: var(--hib-font-heading);
font-size: clamp(1.125rem, 1.8vw, 1.375rem);
font-weight: var(--hib-heading-weight-section);
line-height: var(--hib-band-title-lh);
letter-spacing: normal;
color: var(--hib-ink, #14171A);
margin-bottom: var(--hib-space-4);
display: flex;
align-items: center;
gap: var(--hib-space-2);
}
.hib-policy-enforcement__title svg {
width: 20px;
height: 20px;
color: var(--hib-primary);
background: rgba(29, 84, 196,0.10);
border-radius: 50%;
padding: 3px;
box-sizing: content-box;
}
.hib-policy-enforcement__body {
font-size: var(--hib-body-s-size);
line-height: 1.78;
color: var(--hib-text-strong);
}
.hib-policy-enforcement__body p {
margin-bottom: var(--hib-space-3);
}
.hib-policy-enforcement__body p:last-child {
margin-bottom: 0;
}
/* Domain overrides */
[data-domain="design"] .hib-policy-hero {
background: linear-gradient(175deg, var(--hib-domain-panel-soft) 0%, var(--hib-bg) 50%);
}
[data-domain="renovation"] .hib-policy-hero {
background: linear-gradient(175deg, var(--hib-domain-panel-soft) 0%, var(--hib-bg) 50%);
}
[data-domain="design"] .hib-policy-principle {
border-color: var(--hib-domain-line);
}
/* ============================================================
39. CONTACT PAGE
============================================================ */
/* --- Contact Hero --- */
.hib-contact-hero {
padding: clamp(72px, 9vw, 112px) 0 clamp(40px, 5vw, 60px);
background:
radial-gradient(ellipse 80% 90% at 50% -10%, rgba(29, 84, 196,0.09) 0%, transparent 65%),
linear-gradient(180deg, var(--hib-domain-soft) 0%, var(--hib-bg) 72%);
text-align: center;
position: relative;
}
.hib-contact-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--hib-space-2);
padding: 5px 12px;
background: var(--hib-surface);
border: 1px solid var(--hib-border);
border-radius: var(--hib-radius-pill);
font-size: var(--hib-label-s-size);
font-weight: 500;
color: var(--hib-text-secondary);
margin-bottom: var(--hib-space-5);
box-shadow: var(--hib-shadow-card);
}
.hib-contact-hero__badge svg {
width: 14px;
height: 14px;
color: var(--hib-accent);
}
.hib-contact-hero__title {
font-family: var(--hib-font-display);
font-size: var(--hib-h1-size);
font-weight: var(--hib-heading-weight-section);
line-height: var(--hib-h1-lh);
letter-spacing: normal;
margin-bottom: var(--hib-space-3);
}
.hib-contact-hero__desc {
font-size: var(--hib-h5-size);
line-height: 1.65;
color: var(--hib-text-secondary);
max-width: 560px;
margin: 0 auto var(--hib-space-4);
}
.hib-contact-hero__meta {
font-size: var(--hib-label-s-size);
color: var(--hib-text-muted);
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.hib-contact-hero__meta svg {
width: 14px;
height: 14px;
color: var(--hib-success);
}
/* --- Contact Options Grid --- */
.hib-contact-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: var(--hib-space-5);
}
.hib-contact-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(var(--hib-space-5), 2.5vw, var(--hib-space-7));
background: #FFFFFF;
border: 1px solid var(--hib-border-accent);
border-radius: var(--hib-radius-m);
cursor: pointer;
text-decoration: none;
transition:
transform 260ms var(--hib-ease),
border-color 260ms var(--hib-ease),
box-shadow 260ms var(--hib-ease);
}
.hib-contact-card:hover {
transform: translateY(-3px);
border-color: rgba(29, 84, 196,0.36);
box-shadow:
0 2px 4px rgba(16,24,40,0.04),
0 14px 32px -14px rgba(29, 84, 196,0.28);
}
.hib-contact-card__icon {
width: 48px;
height: 48px;
border-radius: var(--hib-radius-s);
background: radial-gradient(ellipse at 50% 10%, rgba(29, 84, 196,0.16) 0%, rgba(29, 84, 196,0.07) 100%);
box-shadow: var(--hib-shadow-card);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--hib-space-4);
color: var(--hib-primary);
transition: background 360ms var(--hib-ease), color 360ms var(--hib-ease), transform 360ms var(--hib-ease);
}
.hib-contact-card:hover .hib-contact-card__icon {
background: var(--hib-primary);
color: #FFFFFF;
transform: scale(1.06);
}
.hib-contact-card__icon svg {
width: 22px;
height: 22px;
}
.hib-contact-card__title {
font-family: var(--hib-font-ui);
font-size: var(--hib-body-l-size);
font-weight: 600;
margin-bottom: var(--hib-space-1);
}
.hib-contact-card__desc {
font-size: var(--hib-label-s-size);
color: var(--hib-text-secondary);
line-height: 1.5;
}
/* --- Contact Form --- */
.hib-contact-form-section {
max-width: 640px;
margin: 0 auto;
}
.hib-contact-form-section__title {
font-family: var(--hib-font-ui);
font-size: var(--hib-band-title-size);
font-weight: 600;
line-height: 1.30;
letter-spacing: normal;
text-align: center;
margin-bottom: var(--hib-space-7);
}
.hib-contact-form {
display: flex;
flex-direction: column;
gap: var(--hib-space-5);
}
.hib-contact-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--hib-space-4);
}
@media (max-width: 767px) {
.hib-contact-form__row {
grid-template-columns: 1fr;
}
}
/* ── Multi-line control minimum ──────────────────────────────────────────────
One resting height for every textarea on the site. The contact form
established 140px privately; the review form had no multi-line control at all
and fell through to `.hib-field__input`, which is a 50px SINGLE-LINE control
with `padding: 0 …` — so a `rows="4"` review box rendered 50px tall with zero
vertical padding. The role, not the value, was what was missing. */
:root { --hib-control-textarea-min: 140px; }
/* The shared field system's multi-line variant. Any form using `.hib-field__input`
on a