/* ==========================================================================
Surfaces that carry photography - 16px radius throughout.
The frosted info bar is the system's signature component: it is how the
design puts words on a photograph without covering it.
========================================================================== */
/* --- the photo frame ---------------------------------------------------- */
.c-photo{
position:relative;
border-radius:var(--c-r-surface);
box-shadow:var(--c-sh-photo);
overflow:hidden;
}
.c-photo__img{
width:100%; height:100%;
object-fit:cover;
}
/* --- the absent photograph ---------------------------------------------- */
/* One plate for every card in the system: property, article and person. The
template picks it when `pic` is empty and `onerror` swaps to it when the
named file 404s (docs/known-issues.md #40).
THREE LAYERS ON ONE ELEMENT, and it is one element on purpose - the fallback
has to work on an ![]()
that is already in the markup, so there is no wrapper
to hang a second box on and no way to nest one inside an ![]()
.
src img/icons/no-photo.svg, the struck-out camera. `object-fit:none`
keeps it at its own 96x96, so the SAME mark reads at the same
size in a 420x280 property card and a 160x171 team card - which
`cover` would crop and `contain` would inflate.
layer 1 Hairline Gold at .44, the tint.
layer 2 img/bg/no-photo.jpg, `cover`. A property photograph at 64x43,
gaussian-blurred at source: nothing is recognisable, and the
browser's own upscale to the card's box does most of the work.
WHY A BLURRED PHOTOGRAPH AND NOT A FILL. This is the Wash-Is-Not-A-Colour
rule read the right way round. The system's warm bands are a tint over a
blurred photograph and `--c-wash` is only their FLAT FALLBACK; a flat plate
here reads as a coloured rectangle someone forgot to style.
The recipe is the Careers band's - Hairline Gold over a blurred photograph -
but the alpha is .44 where that band is .61, and the difference is deliberate.
At .61 the tint wins and the result is the flat wash again with a faint
texture in it. At .44 the photograph wins and the plate reads as something
out of focus, which is the whole point: a card is 420x280, not a page-wide
band, and it is sitting where a photograph is supposed to be.
The blur is BAKED INTO THE ASSET, not a CSS `filter`. That is the
Separate-Elements Rule: `filter` on the same box as anything else silently
drops in Chromium, and here there is only one box.
Still not a photograph, though - DESIGN.md's rule that a silent fallback must
not read as real content. Nothing in the plate is legible and a struck-out
camera sits on top of it.
THE SELECTOR LIST IS THE POINT, and it is why this rule is not one class.
Every consumer sets its own `object-fit: cover` on its own class, so the
placeholder has to outrank each of them by name - a single `.is-empty` loses
to `.c-person--lead .c-person__photo` and to `.p-prop__thumb img` on
specificity, and page-property.css is linked after this file. Adding a
consumer means adding it here; if that list ever gets long enough to be a
nuisance, the answer is a shared class on the img, not a `!important`. */
.c-photo__img.is-empty,
.c-person__photo.is-empty,
.p-prop__stage__img.is-empty,
.p-prop__thumb__img.is-empty,
.p-prop__broker__photo.is-empty{
object-fit:none;
/* A QUARTER DOWN, not centred. The frosted info bar is 100 tall inset 20 from
the photo's bottom, so it owns 160..260 of a 280 box - and a centred mark
sits half behind it. At 25% the box's own free space puts the camera at
46..142, clear of the bar on the property card, the wide card and the
article card alike, and still optically inside the frame on the two person
cards, which have no bar. */
object-position:50% 25%;
background-color:var(--c-wash); /* the ground while the jpg loads */
background-image:
linear-gradient(rgba(194,161,112,.44), rgba(194,161,112,.44)),
url(../../img/bg/no-photo.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
/* --- price badge: inset 20px from the photo's top-left ------------------ */
/* MEASURED, and it was wrong before the Search frame was read. The badge is a
fixed 122x52 box with a 2px Hairline Gold stroke and a 12px radius, not a
padded 6px chip: the corner arc is 12px on both axes (the top row's fill
starts 12 in from each edge and the left edge reaches x0 twelve rows down)
and a pixel walk across it reads gold, gold, then green. Six instances
agree - three on Search, three on the landing frame's card row - at 122x52
with their two centred lines starting 20px in and 12px down, which is what
the fixed box plus centring reproduces. */
.c-price{
position:absolute;
top:var(--c-inset);
left:var(--c-inset);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:122px; height:52px;
background:var(--c-green);
border:2px solid var(--c-gold);
border-radius:var(--c-r-pill);
color:var(--c-field);
font:600 var(--c-fs-price)/1.35 var(--c-sans);
text-align:center;
}
.c-price b{ display:block; font-weight:600; }
.c-price s{ display:block; font-weight:400; opacity:.7; }
/* --- date chip: the Blog's equivalent of the price badge ---------------- */
/* Measured on the Blog frame, which is the only frame that draws one: ten
instances, all 35 tall with a 2px Field Grey stroke, a 10px control radius
and a flat #f5d098 fill that appears nowhere else in the file.
The nine grid chips are 109 wide, which is a 12px "05/08/2026" (63.9) plus
20px of padding and the 2px stroke each side - within a pixel, unanimously.
The featured chip sets the same string at 20px in a 139px box, i.e. 14px of
padding; the nine win and the one is carried as hand-drawn drift.
It is positioned only when it sits on a photograph. Inside the featured
article's hero panel it is a flex child in normal flow. */
.c-datechip{
display:inline-flex;
align-items:center;
/* a date is one line by definition */
white-space:nowrap;
/* it is a flex child on the hero panel, and would otherwise stretch */
align-self:flex-start;
height:35px;
padding:0 var(--c-inset);
background:var(--c-gold-tint);
border:2px solid var(--c-field);
border-radius:var(--c-r-control);
font:400 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans);
color:var(--c-ink);
}
/* 20px on the featured article, where the chip stands in for the green pill
the other three heroes draw in the same 406/189 slot. */
.c-datechip--lg{ font-size:var(--c-fs-nav); }
.c-photo .c-datechip{
position:absolute;
top:var(--c-inset);
left:var(--c-inset);
}
/* --- pill badge: the green tag on a page hero --------------------------- */
.c-pill{
display:inline-flex;
/* a pill is one line by definition. The Контакти panel's is 236 against a
235 column, and without this that single pixel breaks it over two lines
and doubles its height. */
white-space:nowrap;
/* it is a flex child on the hero panel, and would otherwise stretch */
align-self:flex-start;
align-items:center;
/* Rectangle 162 on the Services hero: 105x35, and the Екип hero draws the
same 105 for a label that computes to 78. Обучения's grows to 123 for a
91px label, so 105 is a floor rather than the width: two of the three
heroes sit on it and the third is the only one whose label does not fit
inside it. */
height:35px;
min-width:105px;
justify-content:center;
padding:0 16px;
background:var(--c-green);
border:1px solid var(--c-gold);
border-radius:var(--c-r-control);
/* 20px, not the 14 the label role uses: the badge's text box is h23 on
every hero, and "Обучения" measures 91 in it - the same 91 that word
measures in the 20px nav. 123 = 91 + 2x16. */
font:500 var(--c-fs-nav)/var(--c-lh-sans) var(--c-sans);
color:var(--c-white);
}
/* --- THE FROSTED INFO BAR ----------------------------------------------- */
/* Inset 20px from the photo's left, right and bottom. blur(17.4px) over
rgba(247,247,247,.65), 2px gold border, 16px radius.
filter, backdrop-filter and clip-path must stay on SEPARATE elements -
stacking them on one box silently drops the blur in Chromium.
The stroke is a ::before for the same reason the form card's is. */
.c-infobar{
position:absolute;
left:var(--c-inset);
right:var(--c-inset);
bottom:var(--c-inset);
/* 22, not 16: the title's ink starts 22px inside the bar on the Search
frame's three cards and on the landing frame's five, and .c-acard already
carried 22 from the Blog frame. Nine instances across three frames, so it
is the rule and the 16 was a guess. 12/13 top and bottom on the same
readings; 12 both ways, with the meta row's own line box taking up the
difference. */
padding:12px 22px;
/* The bar's 100px closes exactly on the measured stack, which is how the
internals below were settled rather than guessed:
12 top + 19 title + 5 + 24 id row + 4 + 24 meta row + 12 bottom = 100. */
background:var(--c-frost-bar);
-webkit-backdrop-filter:blur(17.4px);
backdrop-filter:blur(17.4px);
border-radius:var(--c-r-surface);
}
.c-infobar::before{
content:"";
position:absolute;
inset:0;
border:2px solid var(--c-gold);
border-radius:inherit;
pointer-events:none;
}
/* 16/19 - Roboto's own auto line height at 16px, and the height the frame's
title box carries on every card. At 1.25 the box came out 20 and pushed the
whole stack a pixel down. */
.c-infobar__title{
display:block;
font:600 var(--c-fs-body)/19px var(--c-sans);
color:var(--c-ink);
}
/* Real listing titles run long. The Figma placeholder is one line; this
clamps to two and keeps the bar's height stable. */
.c-infobar__title--clamp{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* The reference and the city share one row. The gap is 11: the ID's ink ends
at x432 and the location pin's box opens at x443, identically on the Search
and landing frames. */
.c-infobar__id{
display:flex;
align-items:center;
gap:11px;
margin-top:5px;
font:400 var(--c-fs-label)/var(--c-lh-sans) var(--c-sans);
color:var(--c-ink);
}
/* --- meta row: kind, area, year, material ------------------------------- */
/* 8px between meta items, not 14: the four groups sit at x360/474/550/631 and
end at 466/542/623/696, i.e. an 8px gap four times over on both frames. */
.c-metas{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 8px;
margin-top:4px;
font:400 var(--c-fs-label)/var(--c-lh-sans) var(--c-sans);
color:var(--c-ink);
}
.c-metas__item{ display:inline-flex; align-items:center; gap:6px; }
/* Every icon is drawn at its own intrinsic size: rooms, year and material are
22x22, area and location are 22x24. The frame's boxes say exactly that - the
meta row carries three 22x22 frames and one 22x24 - so the WIDTH is the
constant and the height follows. Setting the height instead squashed the two
tall glyphs to 20x22. */
.c-metas__icon{ width:22px; height:auto; flex:0 0 auto; }
/* --- property card ------------------------------------------------------ */
.c-pcard{ display:block; }
/* THE PHOTOGRAPH HAS A FLOOR, and it is the smallest one any frame draws.
The frosted bar is content-sized - 12 + title + 5 + id row + 4 + meta row
+ 12 - and every one of those three rows grows as the card narrows: a real
66-character listing title takes the title's two clamped lines instead of
one, and the four meta items wrap onto a second row. At 320 that is a 145px
bar in a 192px photograph, 76% of it, and the card stops being a picture
with a bar on it. 241 is the mobile frames' own photo height (361x241 on
four instances across two frames), so this is inert at 393 and above -
where the 3:2 already gives 241 or more - and only lifts the two widths
below the narrowest frame, which no frame covers.
IT IS ON EVERY CARD, the wide variant included. `harden` had to scope the
variant out of it, because the landing row's 2.731 put both its cards under
the floor and lifting them would have moved a measured render. That row now
carries the two shapes the frame actually draws (below), so the exception it
needed is gone with it. It was `docs/known-issues.md` #71, deleted with the
fix the way that file's own rule asks. */
.c-pcard .c-photo,
.c-acard .c-photo{ min-height:241px; }
/* 3:2, not a fixed 280 - and the aspect is what both frames actually agree
on rather than either number. The desktop card's photograph is 420x280
(1.500) and the mobile card's is 361x241 (1.498), on four instances across
two mobile frames. So the card is fluid and its photo keeps its shape at
every width in between, which is one rule instead of a height per
breakpoint. */
.c-pcard .c-photo{ width:100%; aspect-ratio:3 / 2; height:auto; }
/* THE LANDING ROW'S TWO CARDS SHARE A HEIGHT, NOT AN ASPECT. They are the
only consumers of `--wide`, and they were carrying 1188/435 - the news
hero's 2.731, which is a different object on a different page. The frame
draws 847x435 and 416x435: one ratio each, and what the pair has in common
is the 435. So the LEAD card's own aspect sets the row's height and its
neighbour stretches to whatever that resolves to, which keeps the pair
even at every width the 847fr/416fr row exists at instead of only at 1920.
`min-width` and not the file's usual `max-width`, and this is the one place
it is right: below 1120 the row is no longer 847 + 416 but equal auto-fit
columns (page-home.css), where an 847-shaped card is a letterbox. There the
variant is 3:2 like every other card, which is what it already became at
640 - this only moves the same answer up one breakpoint. */
@media (min-width: 1120px){
.p-home__prow--1 > .c-pcard:first-child .c-photo{ aspect-ratio:847 / 435; }
.p-home__prow--1 > .c-pcard:nth-child(2) .c-photo{
aspect-ratio:auto;
height:100%;
}
}
/* --- article card: same frosted bar, centred title ---------------------- */
/* 420x280 on the Blog frame, nine identical instances. The bar is the same
20px inset as the property card's, and its 100px height is two 24px lines
inside 26px of padding - which is what keeps the row even when a real
article title runs to two lines and the placeholder runs to one. */
.c-acard{ display:block; }
.c-acard .c-photo{ width:100%; aspect-ratio:3 / 2; height:auto; }
.c-acard .c-infobar{ text-align:center; padding:26px 22px; }
/* 20/24/700. The size is solved by advance width - the frame's two lines
measure 284 and 282 of ink against 286.9 and 283.5 at 20px - and the weight
by stem thickness, because at this size 500, 600 and 700 are all inside a
pixel of each other on advance. The frame's stem carries 2.74px of ink
where a 400 renders 1.88, a ratio of 1.46, which is Roboto's 700 exactly
(500 is 1.15 and 600 is 1.33). Heavier than the property card's 16/600. */
.c-acard .c-infobar__title{ font:700 var(--c-fs-nav)/24px var(--c-sans); }
/* AN ARTICLE CARD IS ITS HEADLINE, so this one clamps at three lines and not
at the property card's two. `typeset`, 27 Aug 2026, and it is a size
decision the way HANDOFF.md frames it rather than a clamp decision: at 20px
in the card's 336px measure two lines hold about 60 characters, and the
live headlines average 49 and run to 79 - «Ръководство за начинаещи
купувачи на първия Ви имот през 2024» lost its year and «Прогнози на
имотния пазар за 2024 година. Дали цените ще скочат или ще спаднат?» lost
its question. Three lines hold about 90 and cover all eight with margin.
The size stays at 20: it is measured, and it is the only typographic
emphasis the card has. What it costs is the bar - 129 of a 275 photograph
at three lines, against the 60% the sweep calls a collision - and the
photograph is still the larger half.
The PROPERTY card keeps its two. That was settled by `harden`: its title is
a generated string on a bar whose height has to stay stable across a grid
of them, and it ellipses honestly. */
.c-acard .c-infobar__title--clamp{ -webkit-line-clamp:3; }
/* --- page hero banner --------------------------------------------------- */
/* Services, Обучения, Екип, and the Blog's featured article as a variant. */
.c-hero{
position:relative;
display:flex;
/* The photograph is absolutely positioned, so the hero has no intrinsic
height - it takes it from whatever wrapper places it. Without this the
panel collapses to its content and margin-top:auto has nothing to push
the CTA against.
`flex:1` and not `height:100%`, and the four wrappers carry `min-height`
and not `height`, because THE HERO CLIPS: a panel that outgrows a fixed
548 is cut off by the `overflow:hidden` two lines down, and the title and
the CTA are the two things at the ends of the panel. The Blog frame's
featured article is where it shows - the panel is 42% below 1120, so at
640 its measure is 248px and a real article headline runs eleven lines
into a slot that holds nine. Stretching to the slot and GROWING past it
is one declaration and it keeps the 548 everywhere the copy fits, which
is every frame this design was drawn against. */
flex:1 1 auto;
border-radius:var(--c-r-surface);
overflow:hidden;
box-shadow:var(--c-sh-photo);
}
/* The dark panel is a fixed width over the left of the photograph, not a
fraction of the hero - measured 372 on Services, Обучения and Екип, and
500 since the critique (below).
The tint IS solved. The Обучения page row now carries the frame's own photo
(«35_image 161.jpg», 1920x886, the same 2.168 aspect as the 1188x548 slot),
so the bare layer and the composite could be regressed against each other
the way the careers wash was: alpha 0.85 and 0.85 on two patches with
R2 0.84, colour rgb(32,32,31), normalised onto the system's Soft Ink. A
third patch came back at R2 0.4 and was discarded - its background barely
varies, which is the failure the recipe warns about. */
/* 500, not the frames' 372 (critique, 28 Sep 2026). The panel carries the
page's , and at the Headline's 40 the 372 panel's 292 measure could
not hold the longest word of the live slogans - «взаимоотношения»
advances 351 - so the choice was an h1 that breaks a word or a panel wide
enough for its heading. Measured in the browser at three widths:
panel Услуги Екип Обучения Видеа Екип's hero
460 4 4 4 3 651
500 3 3 4 3 598
520 3 3 - - 598
500 is the narrowest that sets Услуги and Екип in three lines, 520 buys
nothing more, and the photograph stays the larger part (778 of 1278 at
1920, 540 of 1040 at 1120). Екип's hero grows 50 past the 548 floor; it
is the one hero with both an office list and a stat grid, and a drawn
height is a floor (DESIGN.md, The Drawn-Height-Is-A-Floor Rule). */
.c-hero__panel{
position:relative;
z-index:1;
flex:0 0 500px;
display:flex;
flex-direction:column;
padding:30px 40px 37px;
background:rgba(28,28,28,.85);
color:var(--c-white);
}
/* The body is what the CTA's `margin-top:auto` pushes against, so it takes
the panel's remaining height. */
.c-hero__body{
flex:1 1 auto;
display:flex;
flex-direction:column;
}
/* The Blog frame's featured article is this hero with two substitutions: a
date chip where the green pill goes, and the article's own title, which the
frame sets in ROBOTO - 32/38, solved by advance width on three of its six
lines (267/268.1, 277/278.0, 272/272.5) against a 38px pitch. That is not
the Serif-Heads-Only rule being broken: an article title on a photograph is
the same class of object as the property and article cards' bar titles, all
of which are sans. It sits 30 under the chip rather than 10, because the
title runs six lines here and three on the other heroes. */
.c-hero--article .c-hero__title{
margin-top:30px;
font:400 32px/38px var(--c-sans);
}
/* THE PAGE'S H1, SO THE TOP OF ITS HIERARCHY (critique, 28 Sep 2026). It
was the frames' 24/28 - the Title role - under 48px section headings, the
smallest heading on every page that draws this hero. It is the Headline
role now, 40 on the serif's 1.333, the size the system already reserves
for the two moments that ask for the action; Display's 48 was the other
candidate and loses because it is the SECTION heading's size, and an h1
that only equals its h2s is not the top of anything. The measure is the
panel's content box, 420 (above). */
.c-hero__title{
margin:10px 0 0;
font:400 var(--c-fs-headline)/var(--c-lh-serif) var(--c-serif);
color:var(--c-white);
}
.c-hero__features{
display:grid;
grid-template-columns:repeat(2, 142px);
gap:50px 25px;
margin-top:68px;
}
.c-hero__feature{
display:flex;
gap:4px;
font:400 var(--c-fs-label)/1.18 var(--c-sans);
color:var(--c-white);
}
.c-hero__feature img{ width:40px; height:40px; flex:0 0 auto; }
.c-hero__feature span{ max-width:102px; }
/* The Екип hero replaces the 2x2 feature grid with a single column of office
rows and a 2x2 stat grid. Rows are 32 apart, the icon is the 22x24 location
pin (the one glyph on this frame that HAS an export) and the text sits 30
from the icon's left, i.e. 8 clear of it. */
.c-hero__rows{
/* rows at y332 and y364 under a title box ending at 318 */
margin:14px 0 0;
padding:0;
list-style:none;
display:grid;
gap:8px;
}
.c-hero__row{
display:flex;
align-items:center;
gap:8px;
font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
color:var(--c-white);
}
/* location.svg is stroked in Soft Ink, which is invisible on the panel. The
frame draws the same pin in white, so the artwork is inverted rather than
duplicated as a second file - brightness(0) first, so any colour in a
future icon lands on white rather than on its own negative. */
.c-hero__row img{
width:22px; height:24px; flex:0 0 auto;
filter:brightness(0) invert(1);
}
.c-hero__row a{ transition:color var(--c-ease); }
.c-hero__row a:hover{ color:var(--c-gold); }
/* 2x2 at a 162 column pitch and a 79 row pitch, measured off the four icon
boxes at x406/568 and y437/516. The 152px column is the stat's own
40 + 10 + 102, so the pitch falls out of the component rather than being
set twice. */
.c-hero__stats{
display:grid;
grid-template-columns:repeat(2, 152px);
grid-template-rows:repeat(2, 79px);
column-gap:10px;
/* y437, 49 under the second office row's 388 bottom */
margin-top:49px;
}
.c-hero__cta{ margin-top:auto; align-self:flex-start; }
/* Every light button in the file is its label plus 29px of padding each side,
on a 49 height: 155 / 97, 180 / 122, 143 / 84, 155 / 97. The Обучения
button's 176 / 139 box is the one that disagrees and its text box is
over-wide, so the padding wins and the min-width is the smallest frame. */
.c-hero__cta .c-btn{ height:49px; min-width:143px; padding:0 29px; }
.c-hero__img{
position:absolute;
inset:0;
width:100%; height:100%;
object-fit:cover;
}
/* ==========================================================================
Below 1024 - the hero's 372px panel is a fixed page measurement and stops
being a third of the block long before the phone.
clamp() rather than a step, because this is the one component where both
ends are designed and nothing between them is: it resolves to 372 at 1024
and above (the measured Services / Обучения / Екип panel), and to 165 at
393 (42% of the frame, which is what the Екип mobile frame draws), and
walks between the two on the frame's own ratio. */
@media (max-width: 1119px){
/* THE HEAD TAKES THE HERO'S FULL WIDTH, THE BODY KEEPS THE PANEL'S COLUMN
(critique, 28 Sep 2026). Below 1120 the h1 is the mobile Display, 30, and
the panel's column is 42% of the hero - 201 of measure at 640 and 133 at
393, against a longest slogan word of 263 at 30px. No size that tops the
page's hierarchy fits that column, and the column itself is the client's
decision (HANDOFF.md, `harden`), so the column stays for what it holds -
the features, the offices, the stats and the button - and the pill and
the h1 run across the top of the hero on the same tint.
`display:contents` throws the panel's box away, and the box carried the
tint and the padding: both move onto the head and the body, which are
real boxes (DESIGN.md, Layout - the `display:contents` entry). */
.c-hero{
display:grid;
grid-template-columns:clamp(165px, 42%, 372px) minmax(0, 1fr);
grid-template-rows:auto 1fr;
}
.c-hero__panel{ display:contents; }
.c-hero__head,
.c-hero__body{
position:relative;
z-index:1;
background:rgba(28,28,28,.85);
color:var(--c-white);
}
.c-hero__head{
grid-column:1 / -1;
grid-row:1;
padding:24px 24px 20px;
}
.c-hero__body{
grid-column:1;
grid-row:2;
padding:0 24px 28px;
}
.c-hero__title{ font-size:var(--c-fs-display-sm); }
.c-hero__features{ grid-template-columns:1fr; gap:20px; margin-top:32px; }
.c-hero__stats{ grid-template-columns:1fr; grid-template-rows:none; row-gap:10px; margin-top:28px; }
.c-hero__cta .c-btn{ min-width:0; }
}
/* ==========================================================================
393 - measured on the four mobile renders.
========================================================================== */
@media (max-width: 639px){
/* INSIDE A PHOTOGRAPH THE VERTICAL INSETS HALVE AND THE HORIZONTAL ONES DO
NOT. Two independent objects carry it and they agree: the price badge's
top (photo top 738, badge top 748) and the info bar's bottom (bar bottom
969, photo bottom 979), on the Search and landing frames, four instances.
The sides measure 22 where the desktop is 20, and that 2px loses to the
nine desktop instances DESIGN.md already records - a 2px disagreement on
a hand-placed frame is drift, a 10px one on two different objects is not.
It is what lets the bar keep its whole 100px stack inside a 241px photo
instead of a 280px one: 10 + 131 of picture + 100 = 241 exactly. */
.c-price{ top:var(--c-inset-y-sm); }
.c-infobar{ bottom:var(--c-inset-y-sm); }
/* The card's meta row keeps kind, area and year and drops the material
(c-metas.tpl). Since the area came into the row (28 Sep 2026) the four
no longer fit a 393 bar's 277px, the material wrapped to a second line,
and the bar stood 145-184 on a 241 photograph - the whole picture under
frosted glass. Three facts are the ones a seeker compares while
scanning; the material is on the offer page. */
.c-metas__item--material{ display:none; }
/* The wide card needs nothing here any more. It used to carry 1188/435 at
every width and this block was the undo; the two shapes are now scoped to
the >=1120 row that draws them, so the variant is already 3:2 with the
floor under it, like every other card. DESIGN.md's own finding is that
the property card's photograph is 3:2 at every width - 420x280 is 1.500
and the mobile frames' 361x241 is 1.498 - and the landing frame draws its
two lead offers at exactly that. */
/* The bar's own internals are UNCHANGED, and that is the finding rather
than an omission: its 12/22 padding, its 16/19/600 title, its 14px id row
and its 22px-wide icons all measure the same on the 393 renders as on the
1920 ones. The system's signature surface does not adapt; the photograph
around it does. */
/* The one exception, and it is the clamp rather than the type: an article
card's measure falls with the column while the headline does not, so the
same three lines that hold 90 characters at 1920 hold about 85 at 393 and
about 66 at 320. Four lines keeps the same headline whole down to the
stress width, which is what the clamp is for. */
.c-acard .c-infobar__title--clamp{ -webkit-line-clamp:4; }
/* --- the page hero ---------------------------------------------------- */
/* Full bleed, no radius and no shadow: the Екип frame draws it 393x390 from
edge to edge, where the desktop draws 1188x548 inset in the container
with the 16px carrying radius. A radius on a box that touches both screen
edges is a notch, not a corner. */
.c-hero{
border-radius:0;
box-shadow:none;
min-height:390px;
}
/* 165 of 393. This is the frame's own composition and it was taken as
drawn: the panel keeps the photograph beside it rather than moving under
it, which is the one place a mobile frame in this file preserves a
desktop side-by-side. Content opens at x16 and the widest of it (the
office rows) ends at 161, so the inset is 16 and the measure is 133.
THE COST IS RECORDED RATHER THAN DESIGNED AROUND: a 133px measure is the
narrowest column in the system by a factor of four, and real CMS copy does
strain it - the Blog frame's featured article runs eleven lines here. The
`harden` pass took the half of that which is a bug: the hero no longer
CLIPS what will not fit, it grows (see `.c-hero`). How narrow the panel is
stays the client's own instruction and a question for the designer, not
something to widen here - HANDOFF.md, `harden`, "left as proposals". */
.c-hero{ grid-template-columns:42% minmax(0, 1fr); }
.c-hero__head{ padding:16px 16px 14px; }
.c-hero__body{ padding:0 16px 20px; }
/* The frame set this h1 at 12/14 - exactly half the desktop's 24, solved
by advance width («Повече от брокери. / Строим дългосрочни /
взаимоотношения» inks 108 / 118 / 97 on Team.png against 217 / 237 / 193
on Careers.png) - which made it the smallest type on the screen under
30px section headings. It is the mobile Display, 30, since the critique
(28 Sep 2026), set across the hero's full width by the 1119 block above,
where a 133 column could not hold it. */
.c-hero__title{ margin-top:8px; }
.c-hero--article .c-hero__title{ margin-top:14px; font-size:16px; line-height:20px; }
/* The pill sizes to its label and loses the 105 floor, which is a 1920
number: the Екип frame's mobile pill is 69x26 around a «Екип» that does
not come near 105. Its 20px label goes to the nav-in-a-drawer's problem
the other way round - at 12px the pill would be a caption, so it keeps
16, which is what 69 - 2x16 = 37 of label wants. */
.c-pill{ height:26px; min-width:0; padding:0 10px; font-size:var(--c-fs-body); }
.c-hero__rows{ margin-top:10px; gap:6px; }
.c-hero__row{ font-size:var(--c-fs-caption); line-height:15px; gap:6px; }
.c-hero__row img{ width:16px; height:18px; }
/* 27x27 icons against the desktop's 40, and the text column stays 101 -
the same 102 the desktop stat carries, which is why the four rows stack
rather than shrink. */
.c-hero__stats{ row-gap:8px; margin-top:20px; }
.c-stat__icon{ width:27px; height:27px; }
.c-stat__text{ width:auto; }
.c-stat__value{ font-size:var(--c-fs-caption); line-height:15px; }
.c-stat__label{ line-height:14px; }
/* 120x41 in the frame. The height goes to 44 rather than 41 because 41 is
under the touch floor and the 3px is invisible; the padding drops from
the button's own 29 to 12, which is what the frame's own 96px «Свържете
се» label needs to come out at 120. */
.c-hero__cta .c-btn{ height:44px; padding:0 12px; font-size:var(--c-fs-body); }
}
/* ==========================================================================
THE CLOSING CONTACT BAND - one component, five consumers.
"Every surface in this design ends in a form" is a product principle
(PRODUCT.md), and the band that carries it had been copied into four page
stylesheets one at a time: page-404.css says in its own comment that it was
copied from .p-article__cta, which was copied from .p-page__cta. Three of
the four were byte-identical modulo the class name and the fourth, Обучения,
is a real variant - a shorter band with the wide CV card on the right.
Five copies is a component; the sixth consumer is the Блог index, which had
no closing band at all and ended in a card row 67px above the footer
(HANDOFF.md's open question 15). Extracted and the Блог given its band by
the `layout` pass, 27 Aug 2026.
THE GAP ABOVE THE BAND IS NOT THE BAND'S. Four pages put 40 there and Екип
puts none, which is composition rather than component, so each page says so
itself and this only draws the band.
One disagreement had to be settled to fold the two wide ones together:
Обучения restacked its card at 1119 and Екип the identical card at 1359.
Same 607px card in the same 570px band, so one of the two was wrong; 1359
wins because the reason to restack is that the CV form outgrows the band
that clips it, and the earlier of two guesses can only prevent that. */
/* THE BAND HAS ITS OWN GROUND, Estate Green, for the time before its photograph
arrives or if it never does: the ![]()
is lazy and below the fold, and
without a fill the wide band's white copy sat on the cream page. Green is
the one token of `contact-band.jpg`'s hue (mean #556754, a green-grey;
#333e32 under the wide band's 60% dim) and white on it is 7.77:1. The photograph
covers it completely once loaded. (critique, 28 Sep 2026) */
.c-cta-band{
position:relative;
overflow:hidden;
padding:var(--c-pad) 0;
background-color:var(--c-green);
}
.c-cta-band__bg{
position:absolute;
inset:0;
width:100%; height:100%;
object-fit:cover;
}
/* CENTRED, and it is the one hand-placed page coordinate this band ever had.
The frames put the card at x784 of a 1920 band, which leaves 784 to its left
and 674 to its right - 55px off the band's centre and aligned to nothing:
not the band, not the 1278 container (463 / 353), not either edge. The
system's own test for a container is the one the Listing page's three widths
passed, "centred on 1920 to within a pixel, which is what separates them
from drift", and 110px of asymmetry fails it. Nothing in the photograph
earns it either - `contact-band.jpg` is a uniformly blurred interior with no
focal point the card is dodging.
The deciding evidence is that the band already disagreed with itself. `left`
is a PERCENTAGE, so a fixed 462px card walks further off centre as the page
narrows - 55 at 1920, 99 at 1440, 106 at 1360 - and then snaps to dead
centre at 1119, where the restack below centres it with `margin-inline`. Four
of the sweep's ten widths already said "centred"; only the 1920 coordinate
said otherwise.
`left:0; right:0` with an auto inline margin rather than a translate: it
centres a definite width without a transform for the `--wide` variant and
the restack to undo. The form card carries its own 45px padding, so
this only places it.
THE NARROW CARD IS IN FLOW, NOT PINNED TO A FIXED-HEIGHT BAND: it held a
3-field form when the 666px band was measured; the optional message field
added to c-contact-form.tpl (docs/known-issues.md #22) made it ~724px
tall against the 626px `overflow:hidden` was leaving it, so the submit
button was clipped on every page this band appears on - Услуги
(`pages.tpl`), the blog list and article page (`news.tpl`, `snews.tpl`)
and 404 - at every width, not only below the 1119 restack below. The
`--wide` variant keeps its fixed height: it holds `c-cv-form.tpl`
(Екип, Обучения), which never grew this field and still fits. */
.c-cta-band__card{
position:relative;
z-index:1;
width:min(462px, 100% - 2 * var(--c-page-gutter));
margin-inline:auto;
}
/* Обучения: a shorter band with the 607px CV card held to the container's own
right edge rather than to a page coordinate. The card carries its own 30px
padding. */
/* THE WIDE VARIANT IS NOT CENTRED, and that is deliberate: it is held to the
container's own right edge, so unlike the narrow card it is aligned to
something. The frame drew it 5px past that edge (997 + 607 = 1604 against
1599); the drift was carried until 24 Sep 2026 and is dropped now, because
every section's box is the nav's 1278. */
.c-cta-band--wide{ height:570px; }
/* Same shape as `.p-home__careers`' own `:has()` fallback in page-home.css:
the 607px card fits the 570px band's 530px budget empty, but a rejected
submit's banner and up to five field errors (Екип/Обучения's own contacts
row plus the CV attach) do not - no frame draws that state to measure the
band against. Scoped to above the 1359 restack below, which already puts
this card in flow unconditionally and so never has a fixed height left to
outgrow. `c-form.js` un-hides `.c-form__alert` with no reload for a
JavaScript visitor, and a flash round trip renders it already un-hidden
for one without, so the trigger has to be the rendered DOM, not a
template condition - see the longer note in page-home.css. */
@media (min-width: 1360px){
.c-cta-band--wide:has(#form-cv .c-form__alert:not(.c-is-hidden)){
height:auto;
padding:var(--c-pad) 0;
}
.c-cta-band--wide:has(#form-cv .c-form__alert:not(.c-is-hidden)) .c-cta-band__card{
position:relative;
z-index:1;
right:auto; top:auto;
width:min(607px, 100% - 2 * var(--c-page-gutter));
margin:0 max(var(--c-page-gutter), (100% - var(--c-container)) / 2) 0 auto;
}
}
.c-cta-band--wide .c-cta-band__card{
/* The shared `.c-cta-band__card` rule above went from `absolute` to
`relative` for the narrow card's own fix, and `right` means something
different on each: a gap from the containing block's edge on an
absolute box, a shift from the box's own static position on a relative
one. The wide variant still needs the former - restated here rather
than left to inherit the narrow card's `position`. */
position:absolute;
top:var(--c-pad);
left:auto;
right:max(var(--c-page-gutter), (100% - var(--c-container)) / 2);
width:607px;
margin-inline:0;
}
/* The wide band's copy (24 Sep 2026): a heading and two paragraphs on the
container's left edge, where the band used to be photograph and nothing
else - bare on the photograph, with no panel and no heading rule (client,
24 Sep 2026). It takes the width the card leaves, with two `--c-pad`
between them the way the footer's columns have: 1278 - 607 - 80 is 591,
capped at the 521 measure by `.c-prose`. Centred on the band rather than
on the card, so the rejected-submit state below, which grows the band,
keeps it centred too. */
.c-cta-band__aside{
position:absolute;
z-index:1;
top:50%;
left:max(var(--c-page-gutter), (100% - var(--c-container)) / 2);
transform:translateY(-50%);
width:calc(var(--c-container) - 607px - 2 * var(--c-pad));
}
/* Bare white copy needs a darker photograph: `contact-band.jpg`'s pale
patches measured 2.3:1 under the heading and 2.9:1 under the body. The
PHOTOGRAPH is dimmed rather than a ground put under the copy (the client
asked for none), on the one band that carries copy - the Услуги / Блог /
404 band keeps its photograph as it was. */
.c-cta-band--wide:has(.c-cta-band__aside) .c-cta-band__bg{ filter:brightness(.6); }
.c-cta-band__text{
margin-top:24px;
color:var(--c-white);
}
.c-cta-band__text p:last-child{ margin-bottom:0; }
/* ==========================================================================
Below 1360 - the wide variant stops being a fixed height with a card
pinned inside.
The narrow `.c-cta-band` dropped its own fixed height above (see the note
beside `.c-cta-band__card`) and flows at every width now. Only the wide
variant still has one to outgrow: its 607px card holding `c-cv-form.tpl`
is taller than its 570px band the moment the form's own fields start
wrapping.
========================================================================== */
@media (max-width: 1359px){
.c-cta-band--wide{ height:auto; padding:var(--c-pad) 0; }
.c-cta-band--wide .c-cta-band__card{
position:relative;
z-index:1;
right:auto; top:auto;
width:min(607px, 100% - 2 * var(--c-page-gutter));
margin:0 max(var(--c-page-gutter), (100% - var(--c-container)) / 2) 0 auto;
}
/* The copy and the card side by side on the container, as above 1360 but in
flow: the band is a two-track grid, the copy taking what the card leaves.
The photograph is absolutely placed and takes no track. */
.c-cta-band--wide:has(.c-cta-band__aside){
display:grid;
grid-template-columns:minmax(0, 1fr) min(607px, 100%);
column-gap:calc(2 * var(--c-pad));
row-gap:var(--c-pad);
align-items:center;
padding-inline:max(var(--c-page-gutter), (100% - var(--c-container)) / 2);
}
.c-cta-band--wide:has(.c-cta-band__aside) .c-cta-band__card{
width:auto;
margin:0;
}
.c-cta-band__aside{
position:relative;
top:auto; left:auto;
transform:none;
width:auto;
}
}
/* Below 1120 the two tracks are under 400 each, so they stack: the copy the
container's full width, the card under it at its own 607. */
@media (max-width: 1119px){
.c-cta-band--wide:has(.c-cta-band__aside){ grid-template-columns:minmax(0, 1fr); }
.c-cta-band--wide:has(.c-cta-band__aside) .c-cta-band__card{
justify-self:end;
width:min(607px, 100%);
}
}
@media (max-width: 639px){
.c-cta-band{ padding:20px 0 24px; }
.c-cta-band--wide .c-cta-band__card{
width:100%;
margin:0;
display:flex;
justify-content:center;
}
}