/* ========================================================================== Section heading and breadcrumb - the two text objects that repeat on every page. ========================================================================== */ /* The most repeated object in the system: 48px Playfair with a 2px rule beneath running about two-thirds of the heading's width. The rule is GREEN. Gold appears on exactly two instances in the whole twelve-frame file, both on the landing page, and .c-heading--gold exists only to reproduce those two. Do not reach for it in new work. */ .c-heading{ /* shrink-to-fit, and it has to be BOTH declarations. `inline-block` alone stops shrinking the moment the heading becomes a flex or grid item - which it does on the landing page's three `display:contents` bands and in the footer column - and it then stretches to its parent and takes the rule with it. That is what made four of the ten mobile instances below paint a rule 123 to 162px wider than the heading they were tracking. */ display:inline-block; width:fit-content; /* The rule is the heading plus 14, so a heading allowed to fill its column puts 14px of green past the page gutter. This is what "fit" means when the text is longer than the line; shrink-to-fit still does the tracking. */ max-width:calc(100% - 14px); margin:0; font:400 var(--c-fs-display)/var(--c-lh-serif) var(--c-serif); color:var(--c-ink); } /* THE RULE TRACKS ITS HEADING: its own width plus 14, at every size and every width. Settled by this pass (27 Aug 2026) and it closes DESIGN.md's Section Heading entry, which carried three behaviours and no majority. What settled it was counting the instances INDEPENDENTLY rather than by appearance. The +14 has twenty-four of them across three sizes and eight frames: twelve card titles at 24 (Services, Обучения, Contacts, Екип), ten section headings at 30 on all four mobile renders, and the Careers frame's two at 48. Against that, the "unanimous" fixed 372 is ONE heading - «Бързи връзки» - drawn eight times in one footer component, and the landing's five hand-drawn widths are one frame. A value repeated by a component is not eight measurements of it. And nothing contradicts tracking. The one thing all nine section instances in the file agree on is that the rule is WIDER than its heading, and +14 is the narrowest overhang any of them draws, so tracking never inverts an instance - it only shortens the ones that were drawn longer. Measured live at 1920, the overhang the frames drew runs +16 / +24 / +27 / +27 / +35 / +50 / +53 / +76 around a median of 27; the two that were already tracked sit at +14. Search's apparent 373 under a 733px heading box is a drag around a string that inks about 180 and was never a measurement. So there is no `--c-rule-w` any more, no `.c-heading--track` and no fixed 372: one declaration, and page-home.css's five per-band widths and footer.css's definite-width workaround go with it. */ .c-heading::after{ content:""; display:block; width:calc(100% + 14px); height:3px; margin-top:6px; background:var(--c-green); } .c-heading--gold::after{ background:var(--c-gold); } /* On the «Ръководство» band the heading sits over a dark photograph, and both it and its rule go light - the rule samples #f7f7f7, not green. */ .c-heading--on-dark{ color:var(--c-field); } .c-heading--on-dark::after{ background:var(--c-field); } /* Card-level heading: 24px on a fixed 40px line - see DESIGN.md's Title entry for the nine instances that put it at 24 rather than the 30 its h=40 box suggests. Here the rule DOES track the text: it runs exactly the title's width plus 14px, holding on twelve instances across Services, Обучения, Contacts and Екип, is 4px tall rather than 3, and sits directly on the box bottom with no gap - measured title box 767..807, rule at 807. */ .c-heading--title{ font-size:var(--c-fs-title); line-height:var(--c-lh-title); } .c-heading--title::after{ /* the width is the default now; only the bar and its gap differ */ height:4px; margin-top:0; } /* Used where the rule would be wrong - the footer's column heading keeps it, a bare heading does not. */ .c-heading--bare::after{ display:none; } /* --- breadcrumb: italic, on every inner page ---------------------------- */ .c-crumbs{ display:flex; align-items:center; gap:6px; /* 12px: the breadcrumb's box is 14px tall, which is 12 x 1.172 */ font:italic 400 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans); color:var(--c-ink); } .c-crumbs a{ transition:color var(--c-ease); } .c-crumbs a:hover{ color:var(--c-green); } .c-crumbs__sep{ color:var(--c-muted); } .c-crumbs [aria-current="page"]{ color:var(--c-muted); } /* --- CMS prose ---------------------------------------------------------- */ /* Editor HTML from `pages.content`, `news.content` and the dictionary's `section_*_body` keys: paragraphs, h2/h3 and links, and nothing else the TinyMCE toolbar can make. It is a component rather than a per-page rule because four page templates render CMS copy - Услуги and the policy pages, Обучения, Контакти and the article page - and the block was copied byte-for-byte into three page stylesheets before the fourth was written. The 521px cap is the system's copy measure, and a page that wants a wider column overrides `max-width` locally rather than restating the type. */ /* 16 on 24, the Prose role, and NOT the Body role's 19 (critique, 28 Sep 2026): 19 is 1.19, which holds a label or a one-line bar and closes up a 68-character line until the eye loses the next one. Every block that carries this class is running copy of three lines or more - see DESIGN.md, Typography, for the audit. */ .c-prose{ max-width:var(--c-measure); font:400 var(--c-fs-body)/var(--c-lh-prose) var(--c-sans); } /* A PARAGRAPH GAP HAS TO BEAT THE LINE GAP or it marks nothing, and this one was 19 against a 19px line box - the two intervals identical, so a numbered list of eight came out as sixteen evenly spaced lines with no grouping in it at all. That is the half of open question 4 that is rhythm rather than height, and it is the same defect on every surface that takes CMS copy. The frames cannot settle it: every prose block they draw is a single paragraph, so the 19 was the line height copied, not a measurement. One and a half line boxes is the smallest interval that reads as a break without opening the column - 28 against the 19 (`typeset`, 27 Aug 2026). The line went to 24 on 28 Sep 2026 and the 28 was kept: 24 + 28 between paragraphs against 24 inside one is still better than two to one. */ .c-prose p{ margin:0 0 28px; } /* Serif for headings, per the Serif-Heads-Only Rule - the editor's h2 and h3 are card-title and nav sized, not the 48px page heading. ON THE SERIF'S OWN 1.333, not the prose 24 they used to inherit: a 24px h2 that wrapped was set solid, 24 on 24. Not the Title role's fixed 40 either - that 40 exists to seat a card title's green rule on its box bottom, and a CMS heading has no rule; at 24/40 its two lines sit further apart than the paragraph after it. 1.333 is Display's and Headline's line, so it holds at every size these take (24/20 here, 20/16 on the phone). critique, 28 Sep 2026 */ .c-prose :is(h2,h3){ font-family:var(--c-serif); font-weight:400; line-height:var(--c-lh-serif); margin:32px 0 8px; } .c-prose h2{ font-size:var(--c-fs-title); } .c-prose h3{ font-size:var(--c-fs-nav); } .c-prose a{ color:var(--c-green); text-decoration:underline; } /* CMS copy carries its own ; keep it inside the measure. */ .c-prose img{ max-width:100%; height:auto; border-radius:var(--c-r-surface); } /* ========================================================================== 393 - the section heading, measured on the four mobile renders. ========================================================================== */ @media (max-width: 639px){ /* 30px, and it is solved by advance width against the DESKTOP renders' own ink rather than against a box: «Ръководство» inks 178 on Team.png where it inks 286 on Careers.png, and «Запознайте се с екипа» inks 313 against 502. Both ratios are .622 / .624 where 30/48 is .625. Two strings, two frames. The Box-Height-Is-Not-A-Size Rule is why the h=36 text box was not used: 36/1.333 would have said 27. */ /* 30px, and it is solved by advance width against the DESKTOP renders' own ink rather than against a box: «Ръководство» inks 178 on Team.png where it inks 286 on Careers.png, and «Запознайте се с екипа» inks 313 against 502. Both ratios are .622 / .624 where 30/48 is .625. Two strings, two frames. The Box-Height-Is-Not-A-Size Rule is why the h=36 text box was not used: 36/1.333 would have said 27. */ .c-heading{ font-size:var(--c-fs-display-sm); } /* THE TEN MOBILE INSTANCES ARE WHY THE RULE TRACKS EVERYWHERE, and they no longer need a declaration of their own - see the entry above. Every one of them is the heading's own text box plus exactly 14: Търсене на имот 241 -> 255 Избрани имоти 224 -> 238 Резултати - 3 186 -> 200 Нашите Услуги 217 -> 231 Ръководство 184 -> 198 Елате в екипа ни 244 -> 258 Запознайте се с екипа 317 -> 331 Нашите партньори 275 -> 289 Вижте подобни 224 -> 238 Бързи връзки 217 -> 231 Four of those were re-measured off the renders rather than off the metadata, and the rule's painted extent agrees with the node to the pixel. FOUR OF THE TEN WERE NOT ACTUALLY TRACKING until this pass, and nothing had reported it: «Избрани имоти», «Нашите Услуги» and «Какво казват нашите клиенти» are flex items of a `display:contents` band and «Бързи връзки» was given a definite width, so all four stretched and their rule went with them - 361 / 393 / 361 / 347 against the 238 / 231 / 238 / 231 the frames draw, with «Нашите Услуги»'s running the full screen. The `width:fit-content` above is the fix and it is one declaration for all four. */ /* The card title keeps its 24 and its 4px bar: the Listing frame's three card titles and the Екип frame's two office titles all sample Estate Green at zero spread on mobile, and their rules are 157 and 184 under 143 and 170 boxes, which is the same +14 one size down. Only the fixed 40px line has to go - at 24/40 a title that wraps to two lines on a 317px card opens a 16px hole above its own rule. */ /* Restated, not inherited: .c-heading--title is declared ABOVE this media query at the same specificity, so the 30px above would otherwise win on source order and put every card title at the section heading's size. */ .c-heading--title{ font-size:var(--c-fs-title); line-height:1.3; } /* The 521 measure is wider than the phone's whole content column, so the cap does nothing but the editor's headings are still two steps too big. */ .c-prose{ max-width:none; } .c-prose h2{ font-size:var(--c-fs-nav); } .c-prose h3{ font-size:var(--c-fs-body); } }