/* ===========================================================================
PGG homepage — Figma redesign layer
===========================================================================
Loaded ONLY by index.html. Everything is scoped under `.home-figma`, which
sits on next to the existing `.market-page`, so the eleven pages that
have not been redesigned yet keep the old stylesheet untouched.
Values marked [figma] come from an inspector screenshot and are exact.
Values marked [measured] were read off the reference PNGs pixel by pixel.
Values marked [uncertain] still need a visual QA pass against 01-hero.
The one thing that is deliberately global rather than scoped is the *set* of
navigation links (global-ui.js) — a menu is one menu across the whole site.
Its homepage *styling* stays in here.
=========================================================================== */
/* Design tokens (--fg-*) live in figma-chrome.css. */
/* ===========================================================================
PAGE BACKGROUND
---------------------------------------------------------------------------
BACKGROUND.jpg is 1920x6439 — exactly the height of the Figma canvas
(footer sits at top 6163 + 276 = 6439). It is one continuous artwork for the
whole page, not a tile, so it is drawn ONCE: `cover`, `no-repeat`, pinned to
the top.
This used to be `100% auto` + `repeat-y`, on the claim that a repeat would be
seamless because marble has no horizon line. A headless render of staging
disproved it. The rendered page is 6901px tall at 1920, so the artwork
restarted at y = 6439 — inside "Избрани предложения" — and the two ends do
NOT match: the top of the artwork is darker and flatter (mean luma ~27,
texture ~1.3) than the bottom (luma ~32, texture ~2.5). The join showed as a
hard horizontal line under the carousel dots. At narrower widths `100% auto`
shrinks the artwork while the page grows, so there were more seams, higher
up. `cover` scales the single copy to the page's real height instead — about
7% at 1920, imperceptible in an organic texture — and there is no seam at
any width because nothing repeats. Side-by-side renders of the About,
Offices and Reviews bands before and after show no visible difference.
Light sections do NOT swap the background — they lay a veil over it, so the
texture still reads underneath exactly as it does in Figma.
WHY THIS RULE IS SO HEAVILY !important
--------------------------------------
styles.css:5919 is the culprit that put the pale aerial photo of Varna back
behind the redesigned page:
body.market-page {
background:
linear-gradient(180deg, rgba(235,240,235,.88), rgba(238,242,239,.83)),
url("/city-bg.jpg") center center / cover no-repeat,
#ebf0eb !important;
background-attachment: fixed, fixed, fixed !important;
}
It is a three-layer `background` SHORTHAND carrying !important, and this body
has BOTH classes. `body.home-figma` and `body.market-page` are the same
specificity, so the earlier version of this rule — plain declarations — lost
on importance alone, no matter which file loaded last. Two changes fix it:
the selector now names both classes so it also out-specifies, and every
longhand is !important so it beats the shorthand layer by layer. The
attachment has to be restated too, or the marble inherits `fixed` and stops
scrolling with the page.
styles.css:5909 also paints `html` #ebf0eb !important. Because has a
background of its own, this body background does NOT propagate to the canvas
— it paints only inside the body box — so the html rule is overridden below
as well, otherwise pale grey shows through on overscroll.
=========================================================================== */
html:has(> body.home-figma) {
background: #0c2519 !important;
}
body.home-figma.market-page,
body.home-figma {
background-image: url('/figma/homepage-background.jpg') !important;
background-size: cover !important; /* one copy, scaled to page */
background-position: top center !important;
background-repeat: no-repeat !important; /* a repeat left a seam */
background-attachment: scroll !important;
background-color: var(--fg-green-deep) !important;
background-blend-mode: normal !important;
}
/* The old stylesheet paints a city photo on the body; it must not show. */
body.home-figma::before,
body.home-figma::after {
background-image: none !important;
}
/* Nothing between the body and a redesigned section may paint an opaque fill,
or the marble stops at that element's edge. .market-shell is already
transparent (styles.css:5928); these are the rest of the homepage wrappers. */
body.home-figma .market-shell,
body.home-figma .market-shell-home,
body.home-figma .about-band {
background-color: transparent !important;
}
/* ===========================================================================
FULL-BLEED HERO BAND
---------------------------------------------------------------------------
Why this wrapper exists.
styles.css:6701 caps every page shell:
.market-shell, .market-shell-home, … {
width: min(calc(100vw - (--page-inline-gap * 2)), --page-max-width) !important;
}
with --page-max-width: 88rem. Combined with the `margin: 0 auto` on
.market-shell that is a 1408px centred column, so at a 1920px viewport the
hero inherited 256px of empty page background on each side — the light
gutters. Overriding that cap was not an option: the same shell still wraps
the sections that have not been redesigned yet, and they depend on it.
So the header and the hero were lifted OUT of the shell in index.html and
into this band, which is a direct child of . body has margin: 0, so
`width: 100%` here is exactly the viewport minus the scrollbar — full bleed
with no 100vw trick and therefore no horizontal scrollbar.
The band is the full-width visual layer; .hero-banner-content inside it is
the centred container that re-applies the Figma side margins.
=========================================================================== */
.home-figma .hero-full-bleed {
position: relative; /* containing block for the absolutely placed navbar */
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
isolation: isolate;
}
.home-figma .market-shell-home {
/* Nothing visible lives in here any more (search, map and the empty videos
block are hidden), so this padding is only space between Top Offers and
the footer. Was clamp(32px, 3.4vw, 64px): about 32px less on phones and
tablets, 52px less at 1920. */
padding-top: clamp(0px, 3.4vw - 32px, 12px) !important;
background: transparent !important;
}
/* Header, hamburger menu and footer live in figma-chrome.css (shared with the
redesigned inner pages). What stays here is homepage-specific. */
@media (max-width: 1365px) {
/* .hero-full-bleed isolates its own stacking context, so a fixed bar inside
it would sit UNDER the positioned sections that scroll past. 60 clears the
page content and stays below the favourites drawer (120), the cookie
banner (1400) and the language dropdown (9500). */
.home-figma .hero-full-bleed {
z-index: 60;
}
}
/* ===========================================================================
HERO
---------------------------------------------------------------------------
hero-banner.jpg is a finished composite: the green marble is painted into
the left of the photograph and blends diagonally into the interior. Nothing
is layered on top of it — no gradient, no scrim — because the artwork
already carries that treatment.
=========================================================================== */
.home-figma .hero-banner.hero-banner-home {
position: relative;
width: 100%;
max-width: none !important;
/* One screenful: the whole composition — lockup, headline, copy, statistics,
both CTAs and the full form — has to be visible without scrolling. svh is
the small viewport height, so mobile browser chrome appearing or hiding
does not resize the hero mid-scroll. vh first as the fallback. */
min-height: 100vh;
min-height: 100svh;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background-image: url('/figma/hero-banner.jpg') !important;
background-size: cover !important;
/* Anchor left so the marble side — the backdrop the headline sits on — is
never the part that gets cropped. In practice the crop is negligible: the
min-height above tracks the asset's own 1.886 aspect ratio, so the frame
and the image stay in step from 1280px up. */
background-position: left center !important;
background-repeat: no-repeat !important;
box-shadow: none !important;
overflow: hidden;
display: flex;
align-items: center;
}
/* The slideshow and scrim belong to the old hero. HERO_IMAGES is emptied in
site-data.js so nothing is fetched; these hide the empty containers. */
.home-figma .hero-slideshow,
.home-figma .hero-overlay {
display: none !important;
}
.home-figma .hero-banner-content {
position: relative;
z-index: 2;
/* The container IS the content box — no inner padding — so at 1920 the left
edge lands on 155px and the right on 1765px, matching the reference
exactly. Below the design width the gutter takes over instead. */
width: min(var(--fg-container), 100% - (var(--fg-gutter) * 2));
max-width: none;
margin-inline: auto;
padding-inline: 0;
padding-block: clamp(96px, 7vw, 132px) clamp(28px, 3vw, 52px);
display: grid;
grid-template-columns: minmax(0, 1fr) var(--fg-form-w);
align-items: center;
gap: clamp(24px, 3vw, 64px);
}
.home-figma .hero-copy-wrap {
max-width: 46rem;
}
/* The eyebrow is not in the Figma hero. */
.home-figma .hero-copy-wrap .eyebrow {
display: none !important;
}
/* ── Brand lockup ─────────────────────────────────────────────────────────
Monogram + two lines of type on one row, total ~496x65 at 1920. The mark is
sized by HEIGHT so its own 1.937 aspect ratio decides the width; sizing it by
width is what previously blew it up to fill half the hero. */
.home-figma .hero-lockup {
display: flex;
align-items: center;
gap: clamp(10px, 0.85vw, 16px);
margin: 0 0 clamp(14px, 1.4vw, 26px);
}
.home-figma .hero-lockup-mark {
display: block;
height: clamp(34px, 2.86vw, 55px);
width: auto;
flex: 0 0 auto;
}
.home-figma .hero-lockup-words {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
min-width: 0;
}
.home-figma .hero-lockup-name {
font-family: var(--fg-display);
font-weight: 700;
font-size: clamp(1.15rem, 1.82vw, 35px); /* [figma t-1] 35px */
line-height: 1;
letter-spacing: 0.06em;
color: var(--fg-gold);
white-space: nowrap;
}
.home-figma .hero-lockup-sub {
font-family: var(--fg-display);
font-weight: 700;
font-size: clamp(0.75rem, 1.04vw, 20px); /* [figma t-1] span, 20px */
line-height: 1;
letter-spacing: 0.22em;
color: var(--fg-white);
white-space: nowrap;
}
.home-figma #hero-title {
margin: 0 0 clamp(10px, 1.05vw, 20px);
font-family: var(--fg-display);
font-weight: 700;
font-size: var(--fg-h1);
line-height: var(--fg-h1-lh);
letter-spacing: -0.5px; /* [figma t-2] */
text-transform: uppercase;
color: var(--fg-white);
/* Figma breaks this as "НЕДВИЖИМИ ИМОТИ" / "ОТ НОВО ПОКОЛЕНИЕ". The two
lines measure ~578 and ~593px, and adding "ОТ" to line one would need
~654, so anything in between forces the same break. i18n rewrites
textContent, so an explicit , so clicking the sentence
keeps toggling the box. */
.home-figma .valuation-card .valuation-form label.valuation-consent {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 9px !important;
margin-top: 2px;
font-family: var(--fg-form);
font-weight: 400 !important;
font-size: clamp(0.6875rem, 0.635vw, 12.2px) !important;
line-height: 1.3;
letter-spacing: 0;
color: var(--fg-form-ink) !important;
}
.home-figma .valuation-card .valuation-form label.valuation-consent > span {
min-width: 0;
text-align: left;
}
.home-figma .valuation-card .valuation-form label.valuation-consent input[type='checkbox'] {
width: 15px;
height: 15px;
margin: 0 !important; /* beats home-redesign.css:215 */
flex: 0 0 auto;
align-self: center;
accent-color: var(--fg-gold);
border-radius: 0;
}
.home-figma .valuation-submit {
min-height: var(--fg-btn-h); /* [measured] 52px */
margin-top: 2px;
border: 1px solid var(--fg-gold) !important;
border-radius: 0 !important;
background: #26382a !important; /* [measured] CTA fill */
color: var(--fg-white) !important;
font-family: var(--fg-form);
font-weight: 600;
font-size: clamp(0.8125rem, 0.781vw, 15px);
letter-spacing: 0;
cursor: pointer;
box-shadow: none !important;
transition: background-color 0.25s ease;
}
.home-figma .valuation-submit:hover {
background: #14301f !important;
}
.home-figma .valuation-trust {
margin: 2px 0 0;
font-family: var(--fg-form);
font-weight: 400;
font-size: clamp(0.66rem, 0.61vw, 11.5px);
line-height: 1.35;
text-align: center;
color: var(--fg-form-ink) !important;
}
.home-figma .valuation-feedback {
margin: 0;
font-family: var(--fg-form);
font-size: clamp(0.72rem, 0.68vw, 13px);
color: var(--fg-form-ink) !important;
}
/* The success and error states are how the form reports back, so they keep
their own colours — black would swallow the signal. Restated here because
the rule above carries !important. */
.home-figma .valuation-feedback.is-ok { color: #1c5c37 !important; }
.home-figma .valuation-feedback.is-error { color: #9e2b2b !important; }
/* Catch-all so nothing in the panel is left on an inherited colour: any text
the rules above do not name still lands on black. Two deliberate exceptions
are excluded — the submit button (white on the dark green fill) and the
feedback line (keeps its state colour). */
.home-figma .valuation-card,
.home-figma .valuation-card
:not(.valuation-submit):not(.valuation-feedback) {
color: var(--fg-form-ink) !important;
}
/* ===========================================================================
"ПОВЕЧЕ ОТ АГЕНЦИЯ" (02-about)
---------------------------------------------------------------------------
Every number below was measured off 02-about.jpg, which is a 1:1 crop of the
1920-wide Figma frame. The calibration that proves the 1:1 scale: the
paragraph's line pitch measures 31px, and Montserrat at the inspector's 25px
with Figma auto-leading is 30.5px.
Measured geometry, in frame pixels:
section height 886 (the crop is exactly the section)
content left edge 223 photo right edge 1697 -> right 222
container width 1475 = 1920 - 223 - 222
text column 620 wrap width of the paragraph
column gap 137
photo 718 x 632 at x 980, y 135 aspect 1.1361
padding-block 135 / 119
heading cap band y 256..289
paragraph line bands 356, 391, 421, 447, 481, 511 pitch ~31
CTA border box x 223..687, y 566..651 -> 465 x 86
CTA text ink x 280..628 (centred in the box)
Note the container is 1475px here, NOT the hero's 1610px. That is what the
reference shows — the About column is inset further than the hero — so it
gets its own token rather than being forced onto --fg-container.
The marble is the body background; this section paints nothing of its own,
which is what keeps the page one continuous composition through the hero
into here.
=========================================================================== */
.home-figma .about-band {
position: relative;
display: block;
width: 100%;
max-width: none;
margin: 0;
padding-block: clamp(56px, 7.03vw, 135px) clamp(48px, 6.2vw, 119px);
background: transparent;
}
.home-figma .about-inner {
width: min(var(--fg-about-container), 100% - (var(--fg-gutter) * 2));
margin-inline: auto;
display: grid;
/* 620 + 137 + 718 = 1475, so the fr split and the gap reproduce the
reference exactly at the design width and stay proportional below it. */
grid-template-columns: minmax(0, 620fr) minmax(0, 718fr);
gap: clamp(32px, 7.14vw, 137px);
align-items: center; /* [measured] text block and photo share a centre */
}
.home-figma .about-copy {
min-width: 0;
}
/* Same 55px Cormorant Garamond Bold as the hero H1: the cap heights measure
identically (34px in both references, at the same scale), and the hero size
is the one the inspector states outright in typography-2. */
.home-figma .about-title {
margin: 0 0 clamp(22px, 2.55vw, 49px);
font-family: var(--fg-display);
font-weight: 700;
font-size: var(--fg-h1);
line-height: 1.05;
letter-spacing: -0.5px; /* [figma t-2] as the hero H1 */
text-transform: uppercase;
color: var(--fg-gold-deep); /* [measured] #bf915d */
}
/* [figma t-5] Montserrat 700 / 25px / #ffffff. The inspector reads the line
height as 100%, but the reference measures a 31px pitch, which is Figma's
auto-leading for Montserrat — so the measurement wins over the label. */
.home-figma .about-text {
margin: 0 0 clamp(20px, 1.67vw, 32px);
max-width: 620px; /* [measured] paragraph wrap width */
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(1rem, 1.302vw, 25px);
line-height: 1.24; /* [measured] 31 / 25 */
letter-spacing: 0;
color: var(--fg-white);
}
/* Outline button: 1px gold hairline, square corners, no fill, no shadow.
The colour below has to be !important. styles.css:5587 is
.market-page a:not(.navbar a):not(.mode-pill):not(.scope-chip): … {
color: var(--market-charcoal);
}
— fourteen chained :not()s, which stack up to roughly (0,15,2) and turn every
unlisted link on the page charcoal. Adding .about-cta to that exclusion list
would mean editing the global stylesheet, which also serves the routes that
have not been redesigned; !important here keeps the fix on the homepage. */
.home-figma .about-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: min(465px, 100%); /* [measured] 465 x 86 */
min-height: clamp(56px, 4.48vw, 86px);
padding: 0 clamp(24px, 3.02vw, 58px);
border: 1px solid var(--fg-gold); /* [measured] #c2a06a */
border-radius: 0;
background: transparent;
color: #ffffff !important;
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.9375rem, 1.302vw, 25px);
line-height: 1.1;
letter-spacing: 0;
text-align: center;
text-transform: uppercase;
text-decoration: none;
box-shadow: none;
transition: background-color 0.25s ease, color 0.25s ease;
}
/* White in every state, per the brief. That means the hover can no longer flood
the button with solid gold — white on gold would be unreadable — so it tints
instead. Border, corners, size and position are unchanged. */
.home-figma .about-cta:link,
.home-figma .about-cta:visited,
.home-figma .about-cta:hover,
.home-figma .about-cta:focus,
.home-figma .about-cta:focus-visible,
.home-figma .about-cta:active {
color: #ffffff !important;
}
.home-figma .about-cta:hover,
.home-figma .about-cta:focus-visible {
background: rgba(194, 160, 106, 0.18);
}
.home-figma .about-figure {
margin: 0;
min-width: 0;
}
/* Sized by aspect ratio rather than a fixed height, so the photo keeps the
reference's 718x632 proportion at every width. */
.home-figma .about-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 718 / 632;
object-fit: cover;
/* about-image is portrait (1087x1446) in a landscape 718:632 frame, so cover
keeps 66% of its height. Centred, that crop starts 244px down and loses
the lamps — their glass begins at y 147-191. 20% starts it ~98px down,
which keeps all three bulbs with their cords, the full wall logo and the
table. The frame keeps one ratio at every width, so the crop is the same
on desktop and mobile. */
object-position: 50% 20%;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* ===========================================================================
"ЗАЩО ДА ИЗБЕРЕТЕ НАС" (03-why-us-trust-reviews)
---------------------------------------------------------------------------
03-why-us-trust-reviews.jpg is 1920x420 and is a 1:1 crop of the section.
Measured from it, in frame pixels:
section height 420 everything centred on x = 960
heading ink y 47..89 cap 28px, ink 773..1148 (376 wide)
lead lines cap tops 114 / 134 / 154 -> 20px pitch
lead widest line 583 -> ~600px wrap
avatar strip x 811..1107, y 199..270 -> 296 x 72
"+35" tile x 1032..1107 -> 76 x 72, #356a9c
five photos 44 x 72 each, butted, no gap and no overlap
review cards y 296..384 (89 tall), 12px gaps, whole row 543 wide
card widths 147 / 147 / 224 — content-sized, not equal
card padding-left 20
Derived vertical rhythm, which adds back to 421:
33 pad + 52 heading + 24 + 60 lead + 30 + 72 strip + 25 + 89 cards + 36 pad
THE BACKDROP. why-us-trust-reviews-background.jpg, supplied at 3000x2001 and
resized here to 1920x1281 (263 KB, mean loss 1.97/255). It is the section's
own photograph and it replaces the marble across the full width, exactly as
the reference shows.
NO DARKENING VEIL, and that is measured rather than assumed. Mapping the
reference back through cover-at-centre — scale max(1920/3000, 420/2001) =
0.64, so the 420px band reads source rows 672..1328 — and comparing mean
luma over two content-free regions gives 56.9 vs 59.9 on the left and 51.6
vs 51.0 on the right: ratios 0.95 and 1.01. The reference lays nothing over
the photograph. Those two matching ratios also confirm the crop, which is
why cover + centre below is the right pair. The photo is dark on its own
(mean luma ~52-57 of 255) and the white type clears contrast against it.
=========================================================================== */
.home-figma .trust-band {
--fg-trust-photo: url('/figma/trust-backdrop.jpg');
position: relative;
display: block;
width: 100%;
max-width: none;
margin: 0;
padding-block: clamp(26px, 1.72vw, 33px) clamp(28px, 1.875vw, 36px);
background-color: var(--fg-green-deep);
}
.home-figma .trust-band::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--fg-trust-photo);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
/* .why-intro arrives carrying the old rounded dark panel and a JS-injected
office-photo slideshow. Both are cancelled here rather than in the shared
stylesheet, which still serves the routes that are not redesigned. */
.home-figma .trust-inner.why-intro {
position: relative;
z-index: 1;
width: min(var(--fg-container), 100% - (var(--fg-gutter) * 2));
margin: 0 auto;
padding: 0;
text-align: center;
color: var(--fg-white);
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible;
}
.home-figma .trust-band .why-bg {
display: none !important;
}
/* Not present in the reference. */
.home-figma .trust-band .section-kicker {
display: none !important;
}
/* [measured] cap 28px against the 55px hero H1's 34px cap -> ~45px. Sentence
case, and the lighter of the two loaded Cormorant weights: the hairlines in
the reference are far too fine for the 700 used on the About heading. */
.home-figma .trust-band h2 {
margin: 0 0 clamp(14px, 1.25vw, 24px);
font-family: var(--fg-display);
font-weight: 600;
font-size: clamp(1.75rem, 2.344vw, 45px);
line-height: 1.15;
letter-spacing: 0;
text-transform: none;
color: var(--fg-white);
}
/* [measured] cap 12px against the About paragraph's 17px cap at 25px -> ~18px,
with a 20px pitch. Montserrat 700, white. */
.home-figma .trust-band .why-lead {
margin: 0 auto clamp(20px, 1.56vw, 30px);
max-width: 600px;
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.9375rem, 0.9375vw, 18px);
line-height: 1.111; /* [measured] 20 / 18 */
letter-spacing: 0;
color: var(--fg-white);
}
/* ── Broker strip ─────────────────────────────────────────────────────────
The old treatment is 40px circles with white rings and a -12px overlap. The
reference is the opposite: square portrait tiles butted edge to edge, no
ring, no overlap, no shadow. Same five real broker photos, same "+35" — the
markup and the JS that fills it are untouched. */
.home-figma .trust-band .trust-avatars {
display: flex;
justify-content: center;
align-items: stretch;
gap: 0;
margin: 0 auto clamp(18px, 1.3vw, 25px);
}
.home-figma .trust-band .trust-avatars img {
width: clamp(32px, 2.29vw, 44px); /* [measured] 44 x 72 */
height: clamp(52px, 3.75vw, 72px);
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
object-fit: cover; /* never distorts the original */
object-position: 50% 50%;
background-color: #17301f; /* fills nothing; kills any gap */
flex: 0 0 auto;
}
/* Per-photo framing.
---------------------------------------------------------------------------
Every one of the five originals is wider than the 44:72 tile, so `cover`
crops HORIZONTALLY only and the vertical half of object-position does
nothing. What the single shared value could not fix is that two of the five
are not centred portraits: Eleonora and Ivan both stand to the right of the
PGG logo wall, so a centred crop framed the wall and cut the person out —
which is what the staging screenshot showed.
The values below are computed, not nudged. With visible width v = 0.611/A
and the face centre f measured in the source, the position that lands the
face mid-tile is X = (f - v/2) / (1 - v); both of these clamp past 100%, so
96% is used, leaving a little air at the frame edge:
hristomir A 0.666 v 0.917 f 0.50 -> 50% face at 50% of the tile
eleonora A 0.807 v 0.758 f 0.68 -> 96% face at 59%
ivan A 1.000 v 0.611 f 0.72 -> 96% face at 57%
mariyan A 0.749 v 0.816 f 0.50 -> 50% face at 50%
toni A 1.491 v 0.410 f 0.52 -> 50% face at 50%
The originals are untouched; this is framing only. */
.home-figma .trust-band .trust-avatars img[src*='eleonora-kostova'],
.home-figma .trust-band .trust-avatars img[src*='ivan-naydenov'] {
object-position: 96% 50%;
}
.home-figma .trust-band .trust-avatars .trust-avatars-more {
display: flex;
align-items: center;
justify-content: center;
width: clamp(56px, 3.96vw, 76px); /* [measured] 76 x 72 */
height: clamp(52px, 3.75vw, 72px);
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: #356a9c; /* [measured] rgb(53,106,156) */
color: var(--fg-white);
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.75rem, 0.78vw, 15px); /* [inferred] */
line-height: 1;
flex: 0 0 auto;
}
/* ── Review cards ─────────────────────────────────────────────────────────
These already match the reference in type and size — the reference is this
implementation. Only the geometry changes: square corners, no shadow, the
measured 20px side padding, and the row centred. Links, ratings, counts and
the Instagram handle all still come from site-data.js. */
.home-figma .trust-band .social-proof {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 12px; /* [measured] */
margin: 0;
}
.home-figma .trust-band .social-card {
min-height: clamp(72px, 4.64vw, 89px); /* [measured] 89 tall */
padding: 12px 20px; /* [measured] 20 at the sides */
border-radius: 0 !important;
box-shadow: none !important;
text-align: left;
}
/* ===========================================================================
SIX BENEFITS (04-why-us-benefits-icons)
---------------------------------------------------------------------------
04-why-us-benefits-icons.jpg is 1918x734, a 1:1 crop. Two inspector
screenshots turned out to belong to this section, and both were confirmed
against the crop before being used:
typography-6 title Montserrat 700 / 20.5px / lh 22.53 / ls -0.41 / centre
#0F231A, box Left 410.4 Width 180.08 -> centre x 500.4
typography-7 copy 17px / lh 22.08 / ls 0 / centre / #000000
The confirmations: the title's measured cap is 14px, and 14/0.70 = 20 against
the stated 20.5; its ink runs 413..583 with centre 498, inside the stated box
at centre 500.4. The copy's measured cap is 12px (17.1px implied) and its two
cap tops sit at 286 and 308 — a 22px pitch against the stated 22.08.
typography-7 names the font "Jersey 15". That is a Figma substitution
artefact, not a decision: Jersey 15 is a pixel/arcade face and the reference
renders an ordinary humanist sans whose cap ratio matches Montserrat's 0.70.
Montserrat 400 is used and the substitution is reported rather than obeyed.
Measured geometry:
column centres 497 / 958 / 1418 -> 460.5 pitch, grid 1381.5 wide
icon tiles 226 x 190 each, cropped around each icon's own centroid
icon -> title 0 (the tile carries ~16px of its own air)
title -> copy 14.5
row gap 37
copy wrap 295 widest line -> ~330
padding-block 54 / 84
=========================================================================== */
.home-figma .benefits-band {
position: relative;
display: block;
width: 100%;
max-width: none;
margin: 0;
padding-block: clamp(34px, 2.81vw, 54px) clamp(48px, 4.375vw, 84px);
background-color: transparent;
}
/* THE LIGHT BAND IS A VEIL, NOT A FILL.
---------------------------------------------------------------------------
Measured rather than chosen. The reference's plateau reads rgb(180,191,187);
the marble underneath at this point on the canvas is about rgb(20,55,38).
Solving a·255 + (1-a)·marble for that result gives a = 0.68, and white at
0.68 over that marble computes to rgb(181,190,186) — which is the measured
colour to within one level per channel. So the band is plain white at 68%
and every bit of its green cast is the marble reading through. It is not a
flat colour and it is not opaque white.
NO FADE AT EITHER EDGE. Earlier passes ramped this veil in at the top and
out at the bottom, and then copied that ramp onto the broker and newsletter
bands. It came from reading 04's crop, which does shade toward its edges —
but 06 and 08, the other two light references, are flat: luma 184-188 from
the first row to the last, ending in a single hard dark row. The ramp was
therefore never the design, it was a misreading carried across three
sections. The veil is now one constant opacity, clipped to the section box
by `inset: 0`, so each light band starts and stops on a straight edge. */
.home-figma .benefits-band::before {
content: '';
position: absolute;
inset: 0; /* clipped to this section alone */
z-index: 0;
pointer-events: none;
background: rgba(255, 255, 255, 0.68); /* [measured] constant, no ramp */
}
.home-figma .benefits-inner {
position: relative;
z-index: 1;
width: min(1382px, 100% - (var(--fg-gutter) * 2)); /* [measured] 1381.5 */
margin-inline: auto;
}
.home-figma .benefits-band .why-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 0; /* the 460.5 pitch IS the column */
row-gap: clamp(24px, 1.93vw, 37px); /* [measured] 37 */
margin: 0;
}
/* Open composition: no card, no border, no shadow, no radius, no hover bar. */
.home-figma .benefits-band .why-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 clamp(12px, 1.5vw, 28px);
overflow: visible;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-align: center;
}
.home-figma .benefits-band .why-card::before {
display: none !important;
}
/* The emoji that renderValueProps() writes into .why-icon is suppressed with
font-size: 0 and the real illustration comes in as a background, so the JS
and VALUE_PROPS are left completely alone. */
.home-figma .benefits-band .why-icon {
width: clamp(150px, 11.77vw, 226px); /* [measured] 226 x 190 */
height: clamp(126px, 9.9vw, 190px);
/* The tile already carries ~16px of its own air below the artwork, which
matched the reference's 20px ink-to-title gap on its own. This margin is
added air on top of that, at the client's request. */
margin: 0 0 clamp(8px, 0.625vw, 12px);
font-size: 0;
line-height: 0;
color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* The ?v= matters here: these six files were re-cut in place, same names, so
without it the service worker and the browser both keep the first pass. */
.home-figma .benefits-band .why-card:nth-child(1) .why-icon { background-image: url('/figma/benefits/brokers.png?v=app-v144'); }
.home-figma .benefits-band .why-card:nth-child(2) .why-icon { background-image: url('/figma/benefits/valuation.png?v=app-v144'); }
.home-figma .benefits-band .why-card:nth-child(3) .why-icon { background-image: url('/figma/benefits/response.png?v=app-v144'); }
.home-figma .benefits-band .why-card:nth-child(4) .why-icon { background-image: url('/figma/benefits/coastal.png?v=app-v144'); }
.home-figma .benefits-band .why-card:nth-child(5) .why-icon { background-image: url('/figma/benefits/support.png?v=app-v144'); }
.home-figma .benefits-band .why-card:nth-child(6) .why-icon { background-image: url('/figma/benefits/marketing.png?v=app-v144'); }
.home-figma .benefits-band .why-card h3 {
margin: 0 0 clamp(11px, 0.859vw, 16.5px); /* [measured] 14.5, +2 as asked */
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(1rem, 1.068vw, 20.5px); /* [figma t-6] 20.5px */
line-height: 1.099; /* [figma t-6] 22.53 / 20.5 */
letter-spacing: -0.02em; /* [figma t-6] -0.41px at 20.5 */
color: #0f231a; /* [figma t-6] */
}
.home-figma .benefits-band .why-card p {
margin: 0;
max-width: 330px; /* [measured] 295 widest line */
font-family: var(--fg-body);
font-weight: 400;
font-size: clamp(0.875rem, 0.885vw, 17px); /* [figma t-7] 17px */
line-height: 1.299; /* [figma t-7] 22.08 / 17 */
letter-spacing: 0;
color: #000000; /* [figma t-7] */
}
/* ===========================================================================
"ЗАПОВЯДАЙТЕ В НАШИТЕ ОФИСИ" (05-offices)
---------------------------------------------------------------------------
THE WHITE CARD IS GONE BY DELETION, NOT BY OVERRIDE. It came from
home-redesign.css:726:
.why-pgg, … {
background: linear-gradient(160deg, var(--brand-panel-soft), #fff 72%);
border-radius: var(--brand-radius-lg);
padding: clamp(22px, 3vw, 40px);
}
That rule still serves the other sections named in it, so it is untouched.
This block simply left .why-pgg — which by then held nothing else, the
benefits grid having moved out in the previous pass — and the empty wrapper
went with it. Nothing is painted here, so the marble runs straight through.
Measured off 05-offices.jpg, a 1:1 1920x888 crop:
heading ink y 79..106, cap 28px, centred -> 45px Cormorant
subheading ink y 141..152, cap 12px, 847 wide -> 17px Montserrat
photos 337..949 and 971..1583, y 228..687
613 x 460 each, 4:3, 21px gap, block 1247 wide, centred
captions 17px in from the photo's left and bottom edges
city cap 14px -> 20px, address cap 9px -> 13px
CTA x 710..1201, y 740..813 -> 492 x 74, gold hairline
CTA text cap 17px -> 24px, 381 wide, centred in the box
Vertical rhythm, which adds back to 888:
64 pad + 52 heading + 18.5 + 22 sub + 71 + 460 photos + 53 + 74 CTA + 75
=========================================================================== */
.home-figma .offices-band {
position: relative;
display: block;
width: 100%;
max-width: none;
margin: 0;
padding-block: clamp(40px, 3.33vw, 64px) clamp(48px, 3.9vw, 75px);
background: transparent;
}
.home-figma .offices-band .offices-inner {
width: min(1247px, 100% - (var(--fg-gutter) * 2)); /* [measured] 1247 */
margin: 0 auto;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
.home-figma .offices-band .offices-head {
max-width: none;
margin: 0 0 clamp(44px, 3.7vw, 71px); /* [measured] sub -> photos 71 */
text-align: center;
}
/* Same 45px Cormorant as the trust heading — the cap measures 28px in both
references at the same scale. Sentence case, the lighter of the two loaded
weights, white; not the bold sans the old stylesheet had here. */
.home-figma .offices-band .offices-head h3 {
margin: 0 0 clamp(11px, 0.964vw, 18.5px); /* [measured] 18.5 */
font-family: var(--fg-display);
font-weight: 600;
font-size: clamp(1.75rem, 2.344vw, 45px);
line-height: 1.15;
letter-spacing: 0;
color: var(--fg-white);
}
.home-figma .offices-band .offices-head p {
margin: 0 auto;
max-width: 900px; /* [measured] 847 wide */
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.875rem, 0.885vw, 17px);
line-height: 1.299;
color: var(--fg-white);
}
.home-figma .offices-band .offices-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 21px; /* [measured] 970 - 949 */
margin: 0;
}
/* Square, unframed, and larger: 613 x 460 is 4:3, which the card already had —
what it also had was a radius, a shadow and a zoom on hover. */
.home-figma .offices-band .office-card {
position: relative;
aspect-ratio: 613 / 460; /* [measured] 4:3 */
overflow: hidden;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent;
}
.home-figma .offices-band .office-card .office-photo {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 !important;
transform: none !important; /* the 1.06 hover zoom is off */
transition: none;
}
/* The scrim stays: the reference has one, and the addresses sit on sky and
glass. Only its tint changes, from the old blue-grey to the page's green. */
.home-figma .offices-band .office-card::after {
background: linear-gradient(
to top,
rgba(9, 25, 17, 0.82) 0%,
rgba(9, 25, 17, 0.34) 34%,
rgba(9, 25, 17, 0) 60%
);
}
.home-figma .offices-band .office-info {
left: clamp(12px, 0.885vw, 17px); /* [measured] 17 from both */
bottom: clamp(12px, 0.885vw, 17px);
gap: 2px;
}
.home-figma .offices-band .office-info .office-city {
font-family: var(--fg-body); /* sans in the reference */
font-weight: 700;
font-size: clamp(1rem, 1.042vw, 20px); /* [measured] cap 14 -> 20 */
line-height: 1.15;
color: var(--fg-white);
}
.home-figma .offices-band .office-info .office-addr {
font-family: var(--fg-body);
font-weight: 400;
font-size: clamp(0.75rem, 0.677vw, 13px); /* [measured] cap 9 -> 13 */
line-height: 1.3;
opacity: 1;
color: rgba(255, 255, 255, 0.92);
}
.home-figma .offices-band .offices-foot {
margin: clamp(30px, 2.76vw, 53px) 0 0; /* [measured] photos -> CTA 53 */
text-align: center;
}
/* Was solid blue with a radius. Now the hairline outline the reference shows.
The colour needs !important for the same reason the About CTA did:
styles.css:5587 chains fourteen :not()s to about (0,15,2) and would repaint
it — .offices-cta is in that exclusion list, but the background and border
still have to beat home-redesign.css:435. */
.home-figma .offices-band .offices-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: min(492px, 100%); /* [measured] 492 x 74 */
min-height: clamp(56px, 3.85vw, 74px);
padding: 0 clamp(24px, 2.86vw, 55px);
border: 1px solid var(--fg-gold) !important;
border-radius: 0 !important;
background: transparent !important;
color: #ffffff !important;
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.9375rem, 1.25vw, 24px); /* [measured] cap 17 -> 24 */
line-height: 1.1;
letter-spacing: 0;
text-decoration: none;
box-shadow: none !important;
transition: background-color 0.25s ease;
}
.home-figma .offices-band .offices-cta:link,
.home-figma .offices-band .offices-cta:visited,
.home-figma .offices-band .offices-cta:hover,
.home-figma .offices-band .offices-cta:focus,
.home-figma .offices-band .offices-cta:focus-visible,
.home-figma .offices-band .offices-cta:active {
color: #ffffff !important;
}
.home-figma .offices-band .offices-cta:hover,
.home-figma .offices-band .offices-cta:focus-visible {
background: rgba(194, 160, 106, 0.18) !important;
}
/* ===========================================================================
"ИЗБЕРЕТЕ СВОЯ БРОКЕР" (06-brokers)
---------------------------------------------------------------------------
Light band, built exactly like the benefits one: white at 68% over the same
BACKGROUND, so the marble still reads through. The reference confirms it —
its ground samples rgb(180,189,186), the same value measured in 04.
Measured off 06-brokers.jpg, a 1:1 1920x653 crop:
kicker cap 10px -> 14px, tracked wide (120px for 11 caps)
heading cap 29px -> 47px Cormorant (29 / 0.618)
intro cap 14px -> 20px, one line 1182 wide
portraits 240 x 240, 18px gap, 258px pitch, first flush at x = 0
name cap 11px -> 16px
badge pill 91 x 22, text cap 8px -> 11px, fill rgb(164,181,189)
link cap 10px -> 14px
CTA 296 x 57 at x 814..1109, fill rgb(15,35,26) = #0f231a
Vertical: kicker 22..31, heading 51..94, intro 103..121, photos 142..381,
name 413..426, pill 433..454, link 463..472, buttons ~508..538,
CTA 566..622, section bottom 653.
THE TRACK IS FULL BLEED ON PURPOSE. In the reference the first portrait
starts at x = 0 and the eighth is cut by the right edge — that is what makes
it read as a continuous showcase rather than a row of cards, and it is also
the honest signal that the track scrolls. The head, intro and CTA stay in a
centred container; only the track escapes it.
The carousel is untouched: renderBrokerChooser() still fills #broker-track
and #broker-prev / #broker-next still scroll it. Only styling changed.
=========================================================================== */
.home-figma .brokers-band {
position: relative;
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: clamp(46px, 3.65vw, 70px) 0 clamp(24px, 1.61vw, 31px);
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden; /* keeps the track's overflow in */
}
/* Same constant veil as the benefits band. 06-brokers measures luma 184-188
from its first row to its last, with a hard dark row at the bottom edge —
one flat light block, no ramp in or out. */
.home-figma .brokers-band::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: rgba(255, 255, 255, 0.68); /* [measured] constant, no ramp */
}
.home-figma .brokers-band > * {
position: relative;
z-index: 1;
}
.home-figma .brokers-band .brokers-inner {
width: min(1382px, 100% - (var(--fg-gutter) * 2));
margin-inline: auto;
}
/* Figma centres the head; the slider arrows come out of the flow so they do
not push it off centre. They stay in the DOM and stay clickable. */
.home-figma .brokers-band .section-head {
position: relative;
display: block;
text-align: center;
margin: 0;
padding: 0;
border: 0;
}
.home-figma .brokers-band .slider-controls {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 8px;
}
.home-figma .brokers-band .slider-button {
border-radius: 0 !important;
border: 1px solid rgba(15, 35, 26, 0.35) !important;
background: transparent !important;
color: #0f231a !important;
box-shadow: none !important;
}
.home-figma .brokers-band .section-kicker {
margin: 0 0 clamp(14px, 1.25vw, 24px); /* [measured] 24 to the heading */
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.6875rem, 0.729vw, 14px); /* [measured] cap 10 -> 14 */
line-height: 1.2;
letter-spacing: 0.18em; /* [measured] 120px for 11 caps */
text-transform: uppercase;
color: #0f231a !important;
}
.home-figma .brokers-band .section-head h2 {
margin: 0 0 clamp(6px, 0.52vw, 10px); /* [measured] 10 to the intro */
font-family: var(--fg-display);
font-weight: 600;
font-size: clamp(1.75rem, 2.448vw, 47px); /* [measured] cap 29 -> 47 */
line-height: 1.15;
letter-spacing: 0;
color: #0f231a;
}
.home-figma .brokers-band .broker-chooser-intro {
margin: 0 auto clamp(14px, 1.09vw, 21px); /* [measured] 21 to the photos */
max-width: 1200px; /* [measured] one line, 1182 */
font-family: var(--fg-body);
font-weight: 500;
font-size: clamp(0.9375rem, 1.042vw, 20px); /* [measured] cap 14 -> 20 */
line-height: 1.35;
text-align: center;
color: #0f231a;
}
/* ── The track ────────────────────────────────────────────────────────────
Full bleed, no side padding, so the first portrait sits flush at the left
edge exactly as the reference does. Scroll behaviour, snap and the arrow
buttons are all the existing ones. */
.home-figma .brokers-band .broker-track {
display: flex;
gap: 18px; /* [measured] 258 - 240 */
padding: 0;
margin: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.home-figma .brokers-band .broker-track::-webkit-scrollbar {
display: none;
}
/* ── City tabs (Варна / Бургас) ────────────────────────────────────────────
Between the intro and the track. Square, in the band's own ink: inactive is
a hairline on the light veil, active is the dark green of "Виж целия екип"
with its gold edge. The selectors outrank styles.css's blue
`.market-page .market-shell button:hover` rule. */
body.home-figma .brokers-band .broker-city-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0 0 clamp(18px, 1.46vw, 28px);
}
body.home-figma .brokers-band .broker-city-tabs .broker-city-tab {
min-width: clamp(120px, 8.3vw, 160px);
min-height: 44px;
margin: 0;
padding: 0 clamp(18px, 1.46vw, 28px);
border: 1px solid rgba(15, 35, 26, 0.35) !important;
border-radius: 0 !important;
background: transparent !important;
color: #0f231a !important;
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.8125rem, 0.73vw, 14px);
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow: none !important;
transform: none !important;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
body.home-figma .brokers-band .broker-city-tabs .broker-city-tab:is(:hover, :focus-visible):not(.is-active) {
border-color: var(--fg-gold) !important;
background: rgba(194, 160, 106, 0.14) !important;
color: #0f231a !important;
}
body.home-figma .brokers-band .broker-city-tabs .broker-city-tab.is-active,
body.home-figma .brokers-band .broker-city-tabs .broker-city-tab.is-active:is(:hover, :focus-visible, :active) {
border-color: var(--fg-gold) !important;
background: #0f231a !important;
color: #ffffff !important;
}
body.home-figma .brokers-band .broker-city-tabs .broker-city-tab:focus-visible {
outline: 2px solid var(--fg-gold);
outline-offset: 2px;
}
/* A broker without a page keeps the link's line so the action row aligns. */
.home-figma .brokers-band .broker-listings-link-empty {
visibility: hidden;
}
.home-figma .brokers-band .broker-track .broker-card {
flex: 0 0 clamp(160px, 12.5vw, 240px); /* [measured] 240 */
scroll-snap-align: start;
}
/* Shared carousel (figma-chrome.css + carousel.js). The same inset for both
cities: arrows each side inside the band's gutters, up to 7 whole cards of
at least 170px (about 224px at 1920), dots underneath. */
.home-figma .brokers-band {
--pgg-carousel-min: 170px;
--pgg-carousel-gap: 18px;
--pgg-carousel-ink: #0f231a;
--pgg-carousel-dot: rgba(15, 35, 26, 0.24);
}
.home-figma .brokers-band .pgg-carousel {
width: min(1800px, 100% - (var(--fg-gutter) * 2));
}
@media (max-width: 767px) {
.home-figma .brokers-band {
--pgg-carousel-min: 150px;
}
}
/* No card: no fill, no border, no radius, no shadow, no lift on hover. The
portrait is the element; everything else is type on the band. */
.home-figma .brokers-band .broker-card {
display: flex;
flex-direction: column;
overflow: visible;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
transition: none !important;
text-align: center;
}
.home-figma .brokers-band .team-broker-image-wrap {
width: 100%;
aspect-ratio: 1 / 1; /* [measured] 240 x 240 */
overflow: hidden;
border-radius: 0 !important;
box-shadow: none !important;
background: rgba(255, 255, 255, 0.35);
}
.home-figma .brokers-band .team-broker-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
border-radius: 0 !important;
}
.home-figma .brokers-band .broker-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
padding: clamp(20px, 1.67vw, 32px) 8px 0; /* [measured] photo -> name 32 */
}
.home-figma .brokers-band .broker-name {
margin: 0 0 clamp(5px, 0.365vw, 7px); /* [measured] 7 to the pill */
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.8125rem, 0.833vw, 16px); /* [measured] cap 11 -> 16 */
line-height: 1.2;
color: #0f231a !important;
}
/* The pill stays a pill — the reference draws it that way — but in the light
blue-grey it actually measures, not the old bright blue. */
.home-figma .brokers-band .broker-focus {
align-self: center;
min-height: 22px; /* [measured] 91 x 22 */
margin: 0 0 clamp(6px, 0.47vw, 9px);
padding: 4px 12px;
border: 0;
border-radius: 999px;
background: #a4b5bd !important; /* [measured] rgb(164,181,189) */
color: #16302a !important;
font-family: var(--fg-body);
font-weight: 600;
font-size: clamp(0.625rem, 0.573vw, 11px); /* [measured] cap 8 -> 11 */
line-height: 1.3;
}
.home-figma .brokers-band .broker-listings-link {
margin: 0 0 clamp(22px, 1.875vw, 36px); /* [measured] 36 to the buttons */
font-family: var(--fg-body);
font-weight: 600;
font-size: clamp(0.75rem, 0.729vw, 14px); /* [measured] cap 10 -> 14 */
line-height: 1.2;
color: #0f231a !important;
text-decoration: none;
}
.home-figma .brokers-band .broker-listings-link:hover {
text-decoration: underline;
}
.home-figma .brokers-band .broker-actions {
display: flex;
gap: 10px;
width: 100%;
margin: auto 0 0;
padding: 0;
}
.home-figma .brokers-band .broker-action {
flex: 1 1 0;
min-width: 0;
min-height: 30px;
padding: 6px 8px;
gap: 5px;
border-radius: 999px;
font-family: var(--fg-body);
font-weight: 600;
font-size: clamp(0.625rem, 0.625vw, 12px);
box-shadow: none !important;
}
.home-figma .brokers-band .broker-action-call {
border: 1px solid rgba(15, 35, 26, 0.32) !important;
background: transparent !important;
color: #0f231a !important;
}
/* Viber keeps its own accent, which is the point of it being recognisable. */
.home-figma .brokers-band .broker-action-viber {
border: 0 !important;
background: #afaee7 !important; /* [measured] rgb(175,174,231) */
color: #2b2a63 !important;
}
/* ── Clickable broker cards ───────────────────────────────────────────────
Photo and name are links to the broker page (the same URL as "Виж обявите"),
and home-redesign.js follows it for a click anywhere else on the card. The
name link carries the keyboard focus; the photo link is a duplicate and
stays out of the tab order. */
.home-figma .brokers-band .broker-card.is-linked {
cursor: pointer;
}
.home-figma .brokers-band .broker-photo-link {
display: block;
color: inherit !important;
text-decoration: none !important;
}
.home-figma .brokers-band .broker-name-link,
.home-figma .brokers-band .broker-name-link:is(:link, :visited) {
color: #0f231a !important;
text-decoration: none !important;
background-image: linear-gradient(var(--fg-gold), var(--fg-gold));
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 0 1px;
transition: background-size 0.22s ease;
}
.home-figma .brokers-band .broker-name-link:focus-visible {
outline: 2px solid var(--fg-gold);
outline-offset: 3px;
}
.home-figma .brokers-band .team-broker-image {
transition: transform 0.25s ease;
}
.home-figma .brokers-band .broker-card.is-linked .broker-body {
transition: transform 0.22s ease;
}
@media (hover: hover) and (pointer: fine) {
.home-figma .brokers-band .broker-card.is-linked:hover .team-broker-image {
transform: scale(1.03);
}
.home-figma .brokers-band .broker-card.is-linked:is(:hover, :focus-within) .broker-name-link {
background-size: 100% 1px;
}
.home-figma .brokers-band .broker-card.is-linked:hover .team-broker-image-wrap {
box-shadow: 0 10px 22px rgba(15, 35, 26, 0.18) !important;
}
}
/* ── Call / Viber feedback ────────────────────────────────────────────────
Hover brightens and lifts a pixel; a press gives a short squeeze. Both are
plain links, so the tel: / viber: action is never delayed. These outrank the
old blue / purple hover fills in home-redesign.css. */
body.home-figma .brokers-band .broker-card .broker-action {
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
body.home-figma .brokers-band .broker-card .broker-action-call:hover {
border-color: var(--fg-gold) !important;
background: rgba(194, 160, 106, 0.16) !important;
color: #0f231a !important;
transform: translateY(-1px);
}
body.home-figma .brokers-band .broker-card .broker-action-viber:hover {
background: #bdbcf0 !important;
color: #2b2a63 !important;
transform: translateY(-1px);
}
}
body.home-figma .brokers-band .broker-card .broker-action:active {
transform: scale(0.97);
}
body.home-figma .brokers-band .broker-card .broker-action:focus-visible {
outline: 2px solid var(--fg-gold);
outline-offset: 2px;
}
.home-figma .brokers-band .broker-chooser-foot {
margin: clamp(18px, 1.51vw, 29px) 0 0; /* [measured] buttons -> CTA 29 */
text-align: center;
}
.home-figma .brokers-band .broker-see-all {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: min(296px, 100%); /* [measured] 296 x 57 */
min-height: clamp(46px, 2.97vw, 57px);
padding: 0 clamp(20px, 1.8vw, 34px);
border: 1px solid var(--fg-gold) !important;
border-radius: 0 !important;
background: #0f231a !important; /* [measured] rgb(15,35,26) */
color: #ffffff !important;
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.875rem, 1.042vw, 20px);
line-height: 1.1;
letter-spacing: 0;
text-decoration: none;
box-shadow: none !important;
transition: background-color 0.25s ease;
}
.home-figma .brokers-band .broker-see-all:link,
.home-figma .brokers-band .broker-see-all:visited,
.home-figma .brokers-band .broker-see-all:hover,
.home-figma .brokers-band .broker-see-all:focus,
.home-figma .brokers-band .broker-see-all:focus-visible,
.home-figma .brokers-band .broker-see-all:active {
color: #ffffff !important;
}
.home-figma .brokers-band .broker-see-all:hover,
.home-figma .brokers-band .broker-see-all:focus-visible {
background: #16302a !important;
}
/* ===========================================================================
"КАКВО КАЗВАТ ЗА НАС" (07-reviews)
---------------------------------------------------------------------------
Dark band. Nothing is painted: the marble comes from the body background and
this section is transparent, so the page stays one composition. The shared
white-card rule at home-redesign.css:727 names .testimonials directly, so
unlike the offices block this one could not be fixed by moving it — the
background, radius and padding are overridden here instead, and that rule is
left intact for .why-pgg elsewhere.
Measured off 07-reviews.jpg, a 1:1 1920x583 crop:
kicker cap 11px -> 14px, uppercase, tracked, white
heading cap 28px -> 45px Cormorant, white, centred on x = 960
cards 315 x 347, 4 across, ~17px gaps, block 1314 wide
avatar 64px photo + a 2px gold ring = 68 outer, 22px in from the edge
stars 86px wide, 10px tall, rgb(196,170,128)
review text cap 12px -> 17px italic, rgb(27,32,37)
name rgb(42,65,86) location rgb(99,104,109)
card inset 25px sides, 20px top
Vertical: kicker 45..55, heading 62..89, cards 141..487, avatar 161..229,
stars 240..249, text from 270, name 367..381, location 403..414.
TWO PLACES THIS DEPARTS FROM THE MEASUREMENT, both deliberate:
the review line-height measures 1.18 but the brief asks for 1.35-1.5, so it
is set to 1.35 — the card has 73px of slack under the longest quote, so the
extra leading fits; and the track gap stays at the existing 16px rather than
the measured ~17, because initTestimonialsCarousel() hard-codes GAP = 16 in
its transform maths and a mismatch would drift the slide position.
=========================================================================== */
.home-figma .reviews-band {
position: relative;
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: clamp(30px, 2.34vw, 45px) 0 clamp(38px, 3.13vw, 60px);
background: none !important; /* beats home-redesign.css:727 */
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.home-figma .reviews-band .reviews-inner {
width: min(1314px, 100% - (var(--fg-gutter) * 2)); /* [measured] 1314 */
margin-inline: auto;
}
.home-figma .reviews-band .section-head {
display: block;
margin: 0 0 clamp(20px, 1.72vw, 33px); /* [measured] heading -> cards */
padding: 0;
border: 0;
text-align: center;
}
.home-figma .reviews-band .section-kicker {
margin: 0;
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.6875rem, 0.729vw, 14px);
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-white) !important;
}
.home-figma .reviews-band .section-head h2 {
margin: 0;
font-family: var(--fg-display);
font-weight: 600;
font-size: clamp(1.75rem, 2.344vw, 45px); /* [measured] cap 28 -> 45 */
line-height: 1.15;
letter-spacing: 0;
color: var(--fg-white);
}
/* ── The cards ────────────────────────────────────────────────────────────
White, square, no accent stripe, no shadow. Equal height comes from the
min-height plus the track's align-items: stretch, so a short quote leaves
air at the bottom exactly as the reference shows. */
.home-figma .reviews-band .testimonial-card {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: clamp(280px, 18.07vw, 347px); /* [measured] 315 x 347 */
padding: clamp(14px, 1.04vw, 20px) clamp(16px, 1.302vw, 25px);
background: #ffffff !important;
border: 0 !important;
border-left: 0 !important; /* the 4px accent stripe is out */
border-radius: 0 !important;
box-shadow: none !important;
text-align: left;
}
.home-figma .reviews-band .testimonial-card .testimonial-photo {
width: clamp(52px, 3.33vw, 64px); /* [measured] 64 + 2px ring = 68 */
height: clamp(52px, 3.33vw, 64px);
margin: 0 0 clamp(8px, 0.573vw, 11px);
border: 2px solid var(--fg-gold) !important;
border-radius: 50%;
object-fit: cover;
box-shadow: none !important;
}
.home-figma .reviews-band .testimonial-card .testimonial-stars {
margin: 0 0 clamp(14px, 1.09vw, 21px);
font-size: clamp(0.8125rem, 0.781vw, 15px);
line-height: 1;
letter-spacing: 0.22em; /* [measured] five stars in 86px */
color: #c4aa80; /* [measured] rgb(196,170,128) */
}
.home-figma .reviews-band .testimonial-card .testimonial-text {
margin: 0 0 clamp(16px, 1.354vw, 26px);
font-family: var(--fg-form); /* Inter, per the brief */
font-weight: 400;
font-style: italic;
font-size: clamp(0.9375rem, 0.885vw, 17px); /* [measured] cap 12 -> 17 */
line-height: 1.35; /* brief 1.35-1.5; measured 1.18 */
color: #1b2025 !important; /* [measured] rgb(27,32,37) */
}
.home-figma .reviews-band .testimonial-card .testimonial-author {
margin: 0 0 clamp(14px, 1.146vw, 22px);
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.9375rem, 0.9375vw, 18px);
line-height: 1.2;
color: #2a4156 !important; /* [measured] rgb(42,65,86) */
}
.home-figma .reviews-band .testimonial-card .testimonial-loc {
margin: 0;
font-family: var(--fg-body);
font-weight: 400;
font-size: clamp(0.75rem, 0.677vw, 13px);
line-height: 1.3;
color: #63686d !important; /* [measured] rgb(99,104,109) */
}
/* ── Carousel chrome ──────────────────────────────────────────────────────
The arrows sit in the flex row by default, which would eat ~96px out of the
card block and pull it off the reference's width. Taking them out of the
flow keeps the four cards at their measured size and keeps the arrows where
they are useful. They still work; nothing about the JS changed. */
.home-figma .reviews-band .t-stage {
position: relative;
display: block;
gap: 0;
}
.home-figma .reviews-band .t-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
background: rgba(12, 37, 25, 0.72) !important;
color: var(--fg-white) !important;
box-shadow: none !important;
}
.home-figma .reviews-band .t-nav:hover {
transform: translateY(-50%);
background: rgba(12, 37, 25, 0.92) !important;
}
.home-figma .reviews-band .t-prev { left: -19px; }
.home-figma .reviews-band .t-next { right: -19px; }
.home-figma .reviews-band .t-dot {
background: rgba(255, 255, 255, 0.34);
}
.home-figma .reviews-band .t-dot.is-active {
background: var(--fg-gold);
}
/* ===========================================================================
"ПЪРВИ ВИЖДАТЕ НОВИТЕ ОФЕРТИ" (08-newsletter)
---------------------------------------------------------------------------
Light band, the same veil as the benefits and broker sections rather than a
third variant: white at 68% over the same BACKGROUND. The reference confirms
it once more — its ground samples rgb(178-181, 186-189, 182-184), which is
the value measured in 04 and 06.
The form is untouched. #subscribe-form still POSTs to /api/subscribe,
#subscribe-feedback still carries is-ok / is-error, the input keeps
type="email" + required so the browser's own validation and keyboard
behaviour are unchanged. Only the look moved.
Measured off 08-newsletter.jpg, a 1:1 1918x296 crop, everything centred on
x = 958 against a centre of 959:
heading cap 28px -> 45px Cormorant, ink 540 wide, rgb(9,23,16)
copy cap 12px -> 17px, 20px pitch, widest line 554, rgb(20,34,27)
control x 693..1261 -> 569 x 46, no gap between the two halves
input 332 wide, white, placeholder inset 17px
button 237 wide, fill rgb(17,32,25), label cap ~15 -> 17px
privacy cap 10px -> 14px, 375 wide, rgb(31,42,36)
Vertical: heading 43..86, copy 104..140, control 165..210, privacy 238..249,
section 296 tall.
The kicker "Над 2 000 абонати" is in the markup but not in the reference, so
it is hidden rather than deleted — the string stays in the i18n tables and
the element stays for anything that counts on it.
=========================================================================== */
.home-figma .newsletter-band {
position: relative;
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: clamp(24px, 1.72vw, 33px) 0 clamp(32px, 2.45vw, 47px);
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Same constant veil. 08-newsletter measures luma 183-194 top to bottom at
both edges of the frame — flat, no ramp in or out. */
.home-figma .newsletter-band::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: rgba(255, 255, 255, 0.68); /* [measured] constant, no ramp */
}
/* Kills the animated blue gradient card from home-redesign.css:733 without
editing that rule, which still serves other pages. */
.home-figma .newsletter-band .subscribe-card {
position: relative;
z-index: 1;
width: min(660px, 100% - (var(--fg-gutter) * 2));
margin-inline: auto;
padding: 0 !important;
background: none !important;
animation: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-align: center;
color: #0f231a;
}
/* Not in the reference. Hidden, not deleted. */
.home-figma .newsletter-band .subscribe-kicker {
display: none !important;
}
.home-figma .newsletter-band h2 {
margin: 0 0 clamp(9px, 0.73vw, 14px);
font-family: var(--fg-display);
font-weight: 600;
font-size: clamp(1.75rem, 2.344vw, 45px); /* [measured] cap 28 -> 45 */
line-height: 1.15;
letter-spacing: 0;
text-transform: none;
color: #0f231a !important; /* [measured] rgb(9,23,16) */
}
.home-figma .newsletter-band .subscribe-copy {
margin: 0 auto clamp(16px, 1.354vw, 26px);
max-width: 600px; /* [measured] widest line 554 */
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.9375rem, 0.885vw, 17px); /* [measured] cap 12 -> 17 */
line-height: 1.2; /* [measured] 20 / 17 */
color: #14221b !important; /* [measured] rgb(20,34,27) */
}
/* ── One control, not two ─────────────────────────────────────────────────
Input and button butt together with no gap, matching height, square. */
.home-figma .newsletter-band .subscribe-form {
display: flex;
flex-wrap: nowrap;
gap: 0; /* [measured] they touch */
width: min(569px, 100%); /* [measured] 569 x 46 */
margin: 0 auto;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
.home-figma .newsletter-band .subscribe-form input[type='email'] {
flex: 1 1 auto;
min-width: 0;
height: clamp(42px, 2.4vw, 46px);
padding: 0 clamp(12px, 0.885vw, 17px); /* [measured] 17px inset */
border: 0 !important;
border-radius: 0 !important;
background: #ffffff !important;
color: #0f231a !important;
font-family: var(--fg-body);
font-weight: 400;
font-size: clamp(0.875rem, 0.781vw, 15px);
box-shadow: none !important;
}
.home-figma .newsletter-band .subscribe-form input[type='email']::placeholder {
color: rgba(15, 35, 26, 0.5);
opacity: 1;
}
.home-figma .newsletter-band .subscribe-form input[type='email']:focus-visible {
outline: 2px solid var(--fg-gold);
outline-offset: -2px;
}
.home-figma .newsletter-band .subscribe-form button {
flex: 0 0 clamp(180px, 12.36vw, 237px); /* [measured] 237 of the 569 */
height: clamp(42px, 2.4vw, 46px);
padding: 0 clamp(14px, 1.04vw, 20px);
border: 0 !important;
border-radius: 0 !important;
background: #0f231a !important; /* [measured] rgb(17,32,25) */
color: #ffffff !important;
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.875rem, 0.885vw, 17px);
line-height: 1.1;
letter-spacing: 0;
cursor: pointer;
box-shadow: none !important;
transition: background-color 0.25s ease;
}
.home-figma .newsletter-band .subscribe-form button:hover,
.home-figma .newsletter-band .subscribe-form button:focus-visible {
background: #16302a !important;
}
.home-figma .newsletter-band .subscribe-privacy {
margin: clamp(15px, 1.25vw, 24px) auto 0;
font-family: var(--fg-body);
font-weight: 400;
font-size: clamp(0.75rem, 0.729vw, 14px); /* [measured] cap 10 -> 14 */
line-height: 1.3;
color: rgba(15, 35, 26, 0.72) !important; /* [measured] rgb(31,42,36) */
}
/* The reply the form gives back keeps its own colours — the band is light, so
these are the dark-on-light pair rather than the panel's. */
.home-figma .newsletter-band .subscribe-feedback {
margin: 8px 0 0;
font-family: var(--fg-body);
font-size: clamp(0.8125rem, 0.729vw, 14px);
color: #14221b;
}
.home-figma .newsletter-band .subscribe-feedback.is-ok { color: #1c5c37; }
.home-figma .newsletter-band .subscribe-feedback.is-error { color: #9e2b2b; }
/* ===========================================================================
"ИЗБРАНИ ПРЕДЛОЖЕНИЯ" (09-properties)
---------------------------------------------------------------------------
WHAT THE STAGING VERSION GOT STRUCTURALLY WRONG, before the values:
1. the whole carousel sat inside .market-shell, capped at 88rem and
centred — the narrow white panel. The reference runs the track nearly
edge to edge, first card flush left, last one cut by the viewport.
2. the cards were white ecommerce cards: white body, rounded corners,
soft shadow, a blue hover lift.
3. the heading was left-aligned dark blue sans, with two large circular
arrows opposite it. Figma centres a white eyebrow over a white serif
title and shows no arrows at all.
4. the track exposed a browser scrollbar.
5. there were no pagination dots.
None of that is restyled here — it is removed. The section left the shell in
index.html, the card is rebuilt from its own rules, and the arrows are taken
out of the composition while staying reachable by keyboard.
MEASURED off 09-properties.jpg, a 1:1 1920x740 crop, cross-checked against
property-1.png, which is the card exported at 355x486:
eyebrow cap 9px -> 13px uppercase, tracked, white, centred on x = 960
heading cap 28px -> 45px Cormorant, white — the same 45px every other
section heading measured, so the system holds
card 358 wide, 483 tall, gold border 2px
gap 24 (369-345, 752-727, 1516-1496)
image 270 of property-1's 486 -> aspect 355/270
body fill rgb(10,34,21) over marble rgb(28,59,41); solving for a = 0.9
gives rgba(7,30,17,0.9), which is the translucent green asked for
dots six at x 883..977, 8px each, active rgb(197,161,103)
card 1 right edge at 345, so it starts at -13: the track is full bleed
=========================================================================== */
.home-figma .properties-band {
position: relative;
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: clamp(34px, 2.6vw, 50px) 0 clamp(36px, 2.86vw, 55px);
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
/* THE FLAT GREEN BLOCK. styles.css:2180 styles `.geo-search-card,
.top-offers-section, .listings-results-shell` as a white glass card, and
that rule carries `backdrop-filter: blur(14px)`. The fill, border, radius
and shadow above were cancelled when this section was rebuilt; the blur
was not. With the white fill gone, a 14px blur over dark marble reads as a
flat, textureless green plate spanning the whole section box — exactly
where the texture disappeared — and it stopped at the section's bottom
edge, which is why the marble reappeared just below. Cancelled here, on
the element that carries it, rather than in styles.css, because that rule
still gives the listings pages their glass cards. */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
overflow: hidden; /* the track's overflow, not the page's */
}
.home-figma .properties-band .properties-inner {
width: min(1382px, 100% - (var(--fg-gutter) * 2));
margin-inline: auto;
}
.home-figma .properties-band .section-head {
position: relative;
display: block;
margin: 0 0 clamp(22px, 1.77vw, 34px);
padding: 0;
border: 0;
text-align: center;
}
.home-figma .properties-band .section-kicker {
margin: 0 0 clamp(8px, 0.63vw, 12px);
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.6875rem, 0.677vw, 13px); /* [measured] cap 9 -> 13 */
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-white) !important;
}
.home-figma .properties-band .section-head h2 {
margin: 0;
font-family: var(--fg-display);
font-weight: 600;
font-size: clamp(1.75rem, 2.344vw, 45px); /* [measured] cap 28 -> 45 */
line-height: 1.15;
letter-spacing: 0;
color: var(--fg-white);
}
/* Figma has no arrows. They stay in the DOM and stay focusable — home.js binds
them by id and they are the keyboard path through the carousel — but they
are clipped out of the layout instead of sitting over the composition. */
.home-figma .properties-band .slider-controls {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.home-figma .properties-band .slider-controls:focus-within {
position: static;
width: auto;
height: auto;
overflow: visible;
clip-path: none;
display: flex;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
.home-figma .properties-band #top-offers-status {
color: rgba(255, 255, 255, 0.82);
text-align: center;
}
.home-figma .properties-band #top-offers-status:empty {
display: none;
}
/* ── The track ────────────────────────────────────────────────────────────
Full bleed, no side padding, so the first card sits flush at the left edge
and the next one is cut by the right — which is what tells you it scrolls,
now that the arrows are gone. Scrollbar hidden visually only: overflow-x is
still auto, so wheel, drag, touch and the arrow buttons all still work. */
.home-figma .properties-band .top-offers-track {
display: flex;
gap: 24px; /* [measured] */
width: 100%;
margin: 0;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge */
}
.home-figma .properties-band .top-offers-track::-webkit-scrollbar {
width: 0;
height: 0;
display: none; /* Chrome, Safari */
}
/* ── The card ─────────────────────────────────────────────────────────────
Gold hairline, square, dark translucent green body. No white anywhere
except the badges, no radius, no shadow, no hover lift. */
.home-figma .properties-band .top-offer-card {
flex: 0 0 clamp(230px, 18.65vw, 358px); /* [measured] 358 wide */
display: flex;
flex-direction: column;
overflow: hidden;
border: 2px solid var(--fg-gold) !important; /* [measured] 2px #c2a06a */
border-radius: 0 !important;
background: rgba(7, 30, 17, 0.9) !important; /* [derived] see the header */
box-shadow: none !important;
transform: none !important;
transition: border-color 0.25s ease;
}
.home-figma .properties-band .top-offer-card:hover,
.home-figma .properties-band .top-offer-card:focus-visible {
background: rgba(7, 30, 17, 0.9) !important;
border-color: #d8bb86 !important;
transform: none !important;
box-shadow: none !important;
}
.home-figma .properties-band .top-offer-image-wrap {
position: relative;
width: 100%;
aspect-ratio: 355 / 270; /* [measured] property-1.png */
overflow: hidden;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: rgba(7, 30, 17, 0.9);
}
.home-figma .properties-band .top-offer-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 !important;
transform: none !important;
}
/* Badges are the one thing that stays white and stays a pill — the reference
draws them that way, top left, over the photo. */
.home-figma .properties-band .top-offer-badges {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: flex;
gap: 8px;
}
.home-figma .properties-band .top-offer-badges .badge,
.home-figma .properties-band .top-offer-badges > * {
border-radius: 999px !important;
background: #ffffff !important;
color: #22302a !important;
border: 0 !important;
box-shadow: none !important;
padding: 5px 13px;
font-family: var(--fg-body);
font-weight: 600;
font-size: clamp(0.6875rem, 0.677vw, 13px);
line-height: 1.2;
}
.home-figma .properties-band .top-offer-body {
flex: 1 1 auto;
padding: clamp(12px, 0.99vw, 19px) clamp(12px, 0.99vw, 19px) clamp(14px, 1.15vw, 22px);
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}
.home-figma .properties-band .top-offer-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.home-figma .properties-band .top-offer-location {
margin: 0 0 6px;
font-family: var(--fg-body);
font-weight: 400;
font-size: clamp(0.8125rem, 0.833vw, 16px);
line-height: 1.25;
color: rgba(255, 255, 255, 0.88) !important;
}
.home-figma .properties-band .top-offer-title {
margin: 0;
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.875rem, 0.885vw, 17px);
line-height: 1.32;
color: #ffffff !important;
}
.home-figma .properties-band .top-offer-price {
flex: 0 0 auto;
margin: 0;
font-family: var(--fg-body);
font-weight: 700;
font-size: clamp(0.8125rem, 0.781vw, 15px);
line-height: 1.25;
white-space: nowrap;
text-align: right;
color: #ffffff !important;
}
/* The reference body carries location, title and price and nothing else. The
meta pills and the broker line are hidden rather than removed from the
template, so the data and every other page that uses it are untouched. */
.home-figma .properties-band .top-offer-meta,
.home-figma .properties-band .top-offer-broker {
display: none !important;
}
/* ── Pagination dots ──────────────────────────────────────────────────────
Built in home.js from the track's real scrollWidth / clientWidth, with the
active one read back from scrollLeft — not decoration. */
.home-figma .properties-band .top-offers-dots {
display: flex;
justify-content: center;
gap: 11px; /* [measured] 95px for six */
margin: clamp(14px, 1.15vw, 22px) 0 0;
}
.home-figma .properties-band .top-offers-dots[hidden] {
display: none;
}
.home-figma .properties-band .top-offers-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.42);
cursor: pointer;
transition: background-color 0.25s ease;
}
.home-figma .properties-band .top-offers-dot.is-active {
background: var(--fg-gold); /* [measured] rgb(197,161,103)*/
}
/* Shared carousel (figma-chrome.css + carousel.js): arrows each side with a
small inset from the viewport edge, whole cards of at least 270px (five at
1920, four at 1440), the existing dots host underneath. */
.home-figma .properties-band {
--pgg-carousel-min: 270px;
--pgg-carousel-gap: 24px;
--pgg-carousel-ink: #ffffff;
--pgg-carousel-dot: rgba(255, 255, 255, 0.34);
}
.home-figma .properties-band .pgg-carousel {
width: min(1840px, 100% - (var(--fg-gutter) * 2));
}
@media (max-width: 767px) {
.home-figma .properties-band {
--pgg-carousel-min: 240px;
--pgg-carousel-gap: 14px;
}
}
/* ===========================================================================
RESPONSIVE
---------------------------------------------------------------------------
Desktop is the approved source of truth, so this is a safety net only: it
keeps the hero usable below the design width without reworking it. A proper
mobile pass follows once the desktop sections are signed off.
=========================================================================== */
/* Hero: one column wherever the header is a hamburger (<= 1365px) — copy,
stats and CTAs first, then the valuation form, in DOM order. Desktop keeps
the form on the right from 1366px. */
@media (max-width: 1365px) {
.home-figma .hero-banner-content {
grid-template-columns: minmax(0, 1fr);
gap: clamp(28px, 4vw, 48px);
}
.home-figma .valuation-card {
max-width: 520px;
}
}
@media (max-width: 1180px) {
/* [inferred] No mobile frame exists for this section yet. Below the point
where the 620px text column and the 718px photo stop fitting side by side,
they stack with the copy first — the reading order the desktop composition
already implies. The photo keeps its 718:632 crop. */
.home-figma .about-inner {
grid-template-columns: minmax(0, 1fr);
gap: clamp(28px, 4vw, 52px);
}
.home-figma .about-text {
max-width: 62ch;
}
/* Tablet: two columns. The shared stylesheet already breaks at 900 and 560,
but the scoped grid above out-specifies it, so the same two steps are
restated here rather than left to chance. */
.home-figma .benefits-band .why-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: clamp(28px, 3.4vw, 42px);
}
}
@media (max-width: 760px) {
.home-figma .hero-banner.hero-banner-home {
min-height: 0;
}
.home-figma .hero-banner-content {
padding-block: clamp(96px, 22vw, 140px) clamp(32px, 8vw, 56px);
}
.home-figma .hero-stats {
flex-wrap: wrap;
row-gap: 14px;
}
/* [inferred] The 465px CTA would overflow a phone, so it goes full width. */
.home-figma .about-cta {
min-width: 100%;
padding-inline: 18px;
}
/* [inferred] The 543px card row cannot hold one line on a phone, so it wraps
— .social-proof already allows that — and each card takes the full width so
the three read as a stack rather than as two-and-a-orphan. The broker strip
stays on one line: at its clamp minimum it is 5x32 + 56 = 216px, which fits
the narrowest phone, and stacking or shrinking it further would make the
faces unreadable. */
.home-figma .trust-band .social-card {
flex: 1 1 100%;
}
/* Mobile: one column. */
.home-figma .benefits-band .why-grid {
grid-template-columns: minmax(0, 1fr);
row-gap: clamp(30px, 8vw, 44px);
}
/* [inferred] No mobile frame for the offices either. The two photos stack
rather than shrink to thumbnails, and the 492px CTA goes full width. */
.home-figma .offices-band .offices-grid {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.home-figma .offices-band .offices-cta {
min-width: 100%;
padding-inline: 18px;
}
/* Brokers on a phone: the shared carousel swipes whole cards (at least
150px wide) with dots underneath; see the brokers-band tokens above. */
.home-figma .brokers-band .broker-see-all {
min-width: 100%;
padding-inline: 18px;
}
/* [inferred] On a phone the arrows would hang off the card, so they come
back inside. calcPerView() already drops to one card here; the dots and
the auto-rotation are the existing behaviour and are left alone. */
.home-figma .reviews-band .t-prev { left: 4px; }
.home-figma .reviews-band .t-next { right: 4px; }
.home-figma .benefits-band .why-card {
padding-inline: 8px;
}
/* [inferred] No mobile frame for the newsletter. Below this width the two
halves cannot share a line without the button squeezing the input to a few
characters, so they stack full width. They keep touching — the seam is the
point of the control — and neither can overflow. */
.home-figma .newsletter-band .subscribe-form {
flex-wrap: wrap;
}
.home-figma .newsletter-band .subscribe-form input[type='email'],
.home-figma .newsletter-band .subscribe-form button {
flex: 1 1 100%;
}
/* Properties on a phone: one whole card per swipe, dots underneath (the
shared carousel; tokens in the properties-band block). */
}
@media (prefers-reduced-motion: reduce) {
.home-figma .hero-cta-primary,
.home-figma .hero-cta-secondary,
.home-figma .valuation-submit,
.home-figma .about-cta {
transition: none;
}
}