/* ========================================================================== Footer - Figma repeats this verbatim in all eight desktop frames, so it is one static component with no props. The largest sans in the system (24px) sits in the least important place. That is deliberate and it is what gives the footer its weight. ========================================================================== */ /* The band's vertical rhythm is derived from the INK, not from the file's text boxes (DESIGN.md, the Box-Height-Is-Not-A-Size Rule). The footer is identical in all eight desktop frames - the same 23 nodes at the same relative offsets, only the whole-frame +5px x shift differs - so there is no second instance to vote against and the majority has to be taken WITHIN the three groups. Band-relative, from the Figma metadata: logo top 66, logo 128 tall, then label/value tops at 240/284, 355/391, 462/498, band 589. Every label box is 36 and the value boxes are 47, 47 and 28. Only the 28 is a real line box (24px Roboto auto-leads to 28.13), so the other two are dragged slack below top-aligned ink. Reading the ink instead: logo bottom -> first label 46 (one measurement) label ink bottom -> value ink 16 / 8 / 8 -> 8 is the majority value ink bottom -> next label 43 / 43 -> unanimous last value ink bottom -> band 63 band top -> logo top 66 That model renders 581.9, not the frame's 589. The 7.1 is group 34's pair alone: its label-to-value is 44 where the other two are 36. Reproducing 589 means reproducing one hand-drag in one group, which is what the rule exists to refuse, so the band is 582 on purpose and this comment is the record. */ /* The band's bottom 63 is the legal row's margin-top now, not this padding - the row sits below it, under its own hairline (`.c-footer__legal`). */ .c-footer{ background:var(--c-ink); color:var(--c-white); padding:66px 0 0; } /* The vertical divider is Rectangle 74: 3px wide, 543px tall, sitting 6px below the top of the band. The frame puts it at x954 - five of the eight frames agree, and the other three at 959 carry the same whole-frame +5 their footer text does - and x954 is a PAGE COORDINATE, 6px left of the band's own centre on a footer whose two columns were not equal either. IT IS CENTRED NOW, on the boundary between two equal columns, which is the same thing. See `.c-footer__inner` below for why the three asymmetries went together. It hangs off `.c-footer__inner`, not the band, since the legal row went in below the band's content: on the band it would have run down through that row. The insets are the same reading re-based on the inner box - the band's 66 top padding less 6 is -60, its 63 bottom gap less 33 is -30. */ .c-footer__inner::before{ content:""; position:absolute; left:0; right:0; margin-inline:auto; /* TOP AND BOTTOM, not top and a height. The frame's 543 is a height inside a 582px band, i.e. 6 above and 33 below, and 33 is the number that was missing: a band that grows - which is what a longer address does to it - left a fixed 543 hanging short of the column it divides. Both insets are the same reading of the same drawn rectangle and this resolves to exactly 543 on the frame's own band. */ top:-60px; bottom:-30px; width:3px; background:var(--c-green); } /* TWO EQUAL COLUMNS IN A CENTRED CONTAINER, and it is one correction rather than three. The frame draws the footer with THREE separate asymmetries and they were all reproduced: - the inner box was padded 163 left and 80 right; - the two tracks were 894 and 783, i.e. 53.3% / 46.7%; - and the divider sat at x954, 6px left of the band's own centre and 103px left of the boundary between those two tracks - so it was not on the centre of anything, not even of the columns it divides. Every one of those is a hand-placed 1920 coordinate. What settles them is DESIGN.md's Container Debt Rule, the same call `page-home.css` makes for its five different left edges: KEEP THE WIDTH, WHICH IS REAL, AND CENTRE IT. The width is real - 1920 - 163 - 80 = 1677 is the footer's own container, wider than the system's 1278 on purpose, and it is the one number here that eight frames agree on. Centring it puts 121.5 on each side. SUPERSEDED 24 Sep 2026: the footer is the nav's 1278 like every other section (DESIGN.md, The One Width Rule). The centring and the equal fractions below still stand; the 1677 does not. And the footer already agreed, everywhere below 1360: the overlay at the bottom of this file has been drawing equal `1fr 1fr` columns with symmetric padding and the divider at `50%` since the `adapt` pass. Only the 1920 coordinates said otherwise, which is the same shape of finding as the closing band's card (media.css). THE GAP IS WHAT THE ADDRESS ALLOWS. The left column has to hold the address without wrapping - `.c-footer__group`'s 791 measure, which `harden` derived and which the agency's two real addresses advance 772.8 and 751.6 into - so the gap could not exceed 1677 - 2 x 791 = 95. At 80, which is two `--c-pad`, the divider sits in the middle of the gap with exactly one `--c-pad` of air on either side. On the 1278 each column is 599 and the address wraps to two lines - the price of the one width, held open for `critique` in HANDOFF.md. The `minmax(min-content, …)` floor the old second track carried is not needed any more: it existed because 894 was a page coordinate that squeezed the quick links to 223px between 1360 and about 1430, and equal fractions of a container cannot do that. */ .c-footer__inner{ position:relative; display:grid; width:min(var(--c-container), 100% - 2 * var(--c-page-gutter)); margin-inline:auto; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:calc(2 * var(--c-pad)); } .c-footer__logo img{ width:465px; height:auto; } /* 43 between groups, unanimous across the two gaps that can be measured from ink. The first group follows the logo instead of a group and takes the 46 that gap measures. The max-width WAS the frame's own text box, 614 - which the designer had dragged 0.13px too tight around this one string (613.13 of advance at 24/700 Roboto into a 613 box), so it wrapped to two lines and took the whole band 28px past where the frame draws it. 614 IS NOT A MEASURE, IT IS A DRAG AROUND ONE STRING, and it was the whole of the footer-address half of `harden`. The measure that exists is the space before the divider: the group opens at the inner box's 163 and the divider is at the band's 954, so it is 791. That is what the two addresses the agency actually uses need - the `offices` table carries them, and at 24/700 they advance 772.8 («бул. България 58, сграда 'Жаклин'...») and 751.6 («сграда 'Хармония', ж.к. Дианабад...»). Both are past 614 and both are inside 791, so at the drawn box either of them wrapped and took the band a line with it, and at the real measure neither does. The placeholder's 613 is unaffected either way, which is why the 1920 render does not move. Longer than 791 still wraps, and it should: the alternative is type crossing the divider. */ .c-footer__group{ margin-top:43px; max-width:791px; } /* Written as the sibling relationship it IS, not as :first-of-type: the logo is a div too and takes "first of type" for itself, so that selector matched no group at all and the 46 silently stayed 43. */ .c-footer__logo + .c-footer__group{ margin-top:46px; } /* One group per office, then the shared e-mail's (c-footer.tpl). They are
elements - contact details for the agency, which is what the element is for - so the UA's italic comes off. Same 43 between them as between the old address/phone/e-mail groups, and the same 8 inside: an office is the label/value pair with two values, address then phone. The per-field labels went with it, so two offices cost one group more than the one office did, not three. */ .c-footer address{ font-style:normal; } .c-footer__label{ margin:0; font:400 var(--c-fs-footer)/var(--c-lh-sans) var(--c-sans); color:var(--c-white); } .c-footer__value{ margin:8px 0 0; /* 36.13 pair pitch - the file's 44/36/36, majority 36 */ font:700 var(--c-fs-footer)/var(--c-lh-sans) var(--c-sans); color:var(--c-white); } .c-footer__links{ display:grid; /* column-wise, six then the rest - the frames fill the left column before starting the right one, so row-wise flow puts the wrong links together. */ grid-template-rows:repeat(6, auto); grid-auto-flow:column; grid-auto-columns:1fr; gap:24px 40px; margin-top:40px; justify-items:start; } .c-footer__link{ font:700 var(--c-fs-footer)/var(--c-lh-sans) var(--c-sans); color:var(--c-white); transition:color var(--c-ease); } .c-footer__link:hover{ color:var(--c-gold); } .c-footer .c-heading{ color:var(--c-white); } /* The legal row - copyright and the Webcharm credit. Not in the frames; added at the client's request (23 Sep 2026). It takes the band's old 63 as its margin, so everything above it sits exactly where it did, and it is set in the system's body size, well under the 24 above it: it is small print and should read as small print. Same container as `.c-footer__inner`, so its hairline spans exactly the two columns. */ .c-footer__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 40px; width:min(var(--c-container), 100% - 2 * var(--c-page-gutter)); margin:63px auto 0; padding:24px 0 calc(24px + env(safe-area-inset-bottom)); border-top:1px solid var(--c-gold-rule); } .c-footer__copy, .c-footer__credit{ margin:0; font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans); color:rgba(255,255,255,.72); } .c-footer__credit a{ font-weight:700; color:var(--c-white); transition:color var(--c-ease); } .c-footer__credit a:hover{ color:var(--c-gold); } /* «Настройки за бисквитки» - reopens the cookie notice (js1/c-consent.js). A button, because it opens something rather than going somewhere, dressed as the credit's link beside it: the same white, the same gold on hover. */ .c-footer__consent{ align-self:flex-start; padding:0; border:0; background:none; font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans); color:var(--c-white); text-decoration:underline; text-underline-offset:3px; cursor:pointer; transition:color var(--c-ease); } .c-footer__consent:hover{ color:var(--c-gold); } .c-footer__consent[hidden]{ display:none; } /* ========================================================================== Below 1360 - the two 894/1057 tracks are page coordinates on a 1920 frame and stop meaning anything the moment the page is narrower than one. ========================================================================== */ @media (max-width: 1359px){ /* The grid, the padding and the divider are all the same here as at 1920 now - `min(var(--c-container), 100% - 2 x gutter)` shrinks on its own and the columns are already equal - so this overlay says only what genuinely differs. */ .c-footer__group{ max-width:none; } .c-footer__logo img{ width:min(465px, 100%); } /* The nine quick links go to ONE column here rather than at 640. Two columns of them need 476 - «Политика за поверителност» advances 317 at 24/700 beside «Продажби»'s 119 with the 40px gap - and a grid item cannot shrink below its own min-content, so the pair ran off the right edge of every viewport under about 1040. One column shrinks: the same link then wraps at «поверителност», which is 190. It is also the treatment the 393 overlay already gives them, two steps down. */ .c-footer__links{ grid-template-rows:none; grid-auto-flow:row; } /* «Бързи връзки» used to carry the flat 372 and a definite width to stop it taking the page sideways inside a 276px column at 640. Both are gone: the rule tracks the heading now (typography.css), so it is 333 under a 319px «Бързи връзки» at 48 and 213 under a 199 at 30, and it cannot outgrow its own column at any width. The footer's 372 was ONE heading drawn eight times, which is what the typeset pass weighed it as. */ } /* ========================================================================== 393 - one column, and every value below is measured on the four mobile renders, which draw the footer identically on all four. ========================================================================== */ @media (max-width: 639px){ /* Band-relative on Search.png: logo top +16, and the last link's box bottom sits 58 above the band's own bottom. */ .c-footer{ padding-top:16px; } /* There is no divider at 393: the two columns are one. */ .c-footer__inner::before{ content:none; } /* The 58 is the legal row's margin here, as the 63 is above; the row stacks, and takes the inner box's gutter so the two left edges agree. */ .c-footer__legal{ flex-direction:column; margin-top:58px; padding-inline:var(--c-page-gutter); } .c-footer__inner{ display:block; padding-inline:var(--c-page-gutter); } /* 251x69 against the desktop's 465 - this is the ONE place in the system where the logo does scale. The header's does not: its wordmark inks 128x44 on both the 1920 and the 393 render. */ .c-footer__logo img{ width:251px; } /* 16px, both of them, and it is solved by advance width rather than by the boxes, which say 22 and 23 and 47 and disagree with each other: «Телефон за връзка» inks 142 here against 212 on Contacts.png and «+359 88 778 8853» inks 129 against 193 - ratios of .670 and .668 against 16/24 = .667. The 24 is the largest sans in the system sitting in the least important place, which is a 1920 gesture; at 393 it would be the largest thing on the page. Only the weights survive: 400 for a label and 700 for the value it introduces. */ .c-footer__label, .c-footer__value, .c-footer__link{ font-size:var(--c-fs-body); line-height:var(--c-lh-body); } /* 12 BETWEEN EVERY BOX, uniformly, where the desktop runs 8 inside a group and 43 between them. Measured on the boxes rather than the ink because here they agree: logo bottom 1342 -> «Адрес:» 1354, label bottoms 1376 / 1466 / 1540 -> value tops 1388 / 1478 / 1552, and value bottoms 1435 and 1571 -> the next label at 1447 and 1583. Six instances of 12 and one of 20. So the address block reads as one tight stack and the 400/700 contrast is what groups it, not the spacing. */ .c-footer__logo + .c-footer__group, .c-footer__group{ margin-top:12px; } .c-footer__value{ margin-top:12px; } /* Except BETWEEN groups, which take two of them since the footer prints every office. The frames' 12 was measured on one office split into three one-value groups, where the 400/700 contrast alone could tell one group from the next; an office group holds an address AND a phone, and at a uniform 12 the second office's label read as a third line of the first. 24 is the 12 doubled, still the tight stack the frames draw. */ .c-footer__group + .c-footer__group{ margin-top:24px; } /* And the quick links' heading clears the brand column by one --c-pad. The column ended in an e-mail value sitting flush under «Бързи връзки»'s ascenders - there was nothing between the two columns once they stack. */ .c-footer__quick{ margin-top:var(--c-pad); } /* «Бързи връзки» is a section heading and takes the mobile 30 with the tracked rule like every other one - 231 under a 217 box. Its rule is Hairline Gold rather than green, sampled #c2a170 at zero spread on the ink band; that is the footer's own treatment and NOT the .c-heading--on-dark inversion, which is #f7f7f7 and belongs to the «Ръководство» band (sampled there on the same render). */ .c-footer .c-heading::after{ background:var(--c-gold); } /* One column at a 35px pitch, indented 10 from the page gutter - measured at x26 against a 16 gutter, on all four frames. The rule's bottom is 43 above the first link. */ .c-footer__links{ display:block; margin-top:43px; padding-left:10px; } .c-footer__link{ display:block; /* 35px pitch = the 19px line box plus 16. Written as padding rather than as a margin so the row itself clears the 44px touch floor. */ padding:8px 0; min-height:35px; } }