, който е `relative` и висок колкото цялата страница: мерено, видеото ставаше 17 938px вместо 576. Бъгът се появяваше чак СЛЕД разкриването и затова беше труден за хващане: `scripts/page/interactions.js` слага `will-change: opacity, transform` за времето на прехода, а will-change с transform прави контейниращ блок точно както истинският transform. Махне ли се на transitionend, котвата изчезва. `top: auto` върви задължително с него: `top: var(--space-6)` горе важи за sticky-то, а `static` го пренебрегваше. `relative` обаче го ЧЕТЕ и избутваше карето 24px по-надолу — точно толкова по-далеч от картите над него, отколкото те са една от друга. */ @media (max-width:1024px){.tech-aside{position:relative;top:auto}} /* ═══ base ═══ */ :root{ /* --leading-body НЕ е тук. Стоеше, с 1.4, и не правеше нищо: бандълът се сглобява по азбучен ред (виж layouts/styles.css.liquid), tokens/ е последна, и typography.css го предекларира. Един токен, едно място — иначе смяната на този ред изглежда като че не е подействала. */ /* The vertical rhythm between sections. Every section pads top and bottom with this, so a boundary is twice it — the design used --space-9 (96px) throughout, giving 208px with the heading's line box, which reads as too much air. One token so it stays uniform: change it here, not per section. */ --section-pad:var(--space-8); /* Заглавието на страница е една роля, независимо дали стои в компактен хедър над решетка (Апарати) или само̀ на цял екран (Козметика). Дизайнът ги беше нарисувал с различен кегел; тук стойността е една, за да не могат да се разминат отново. Регистърът е изреченски — концепцията пише заглавията с главни букви, но това е стил на документа, не на страницата, и дизайнът също ги рендира изреченски. */ --text-page-title:var(--text-h1); --leading-page-title:1.15; /* Мярката е в ch, за да се мери в знаци, а не в пиксели: щом кеглите се сменя на тесен екран, редът се пречупва на същата дължина в думи. Без нея заглавието се разтяга колкото е широк прозорецът — на 1440 Апарати стоеше на един ред, а Козметика се пречупваше на два. */ --measure-page-title:22ch; /* Въвеждащият абзац под заглавието. Стойностите са от .page-head p в proizvoditeli.html — най-новият хедър на секционна страница в дизайна, и единственият, който ползва същото име на класа. Без цвят: там абзацът е мастилен, а --text-secondary в devices.html е по-ранният вариант. */ --measure-lede:60ch; --leading-lede:1.5} @media (max-width:768px){:root{--text-page-title:var(--text-h2)}} *{box-sizing:border-box} body{margin:0;background:var(--white)} /* The default for anchors nothing else styles. With the link colour now the same ink as body text, the underline is the only thing marking a link — so it stays, tinted to the accent so it reads as an affordance rather than a rule. :where() zeroes the specificity so any component rule wins in both states. A bare `a:hover` would be 0,1,1 and would start overriding the components that colour their own anchor at 0,1,0 — .pcs, .dl-row, .maker-link — none of which want a link hover on top of the hover they already have. */ :where(a){color:var(--link);text-decoration-color:var(--accent-500);text-underline-offset:2px} :where(a:hover){color:var(--link-hover);text-decoration-color:currentColor} /* Reveal on scroll (тихо, само opacity/transform) */ /* Reveal-on-scroll is an enhancement, never a gate on the content. The design hid .rv unconditionally, so with scripting off the page rendered blank — unacceptable when the HTML is the product. The hidden state now applies only once the document has announced that script is running. */ .rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(0.15,0,0,1),transform .7s cubic-bezier(0.15,0,0,1)} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}} /* Present to assistive technology, absent from layout. page.liquid emits an h1 with this class on pages whose first section carries no visible one, so the document outline still starts at h1. Without the rule the heading is a full-size 53px block that pushes the page down — on contacts it happened to be masked by the fixed .mapbg, which made it look like a spacing bug rather than a missing class. */ .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Lifts page content above a fixed backdrop such as the contacts map. Harmless on pages that have none. */ main{position:relative;z-index:1} /* ═══ components ═══ */ /* L Medical — design-system component styles. * * Extracted from the component JS, which upstream injects at upgrade time. * On a JS-built page that is fine; here it is not — the pages are server- * rendered, so JS-injected CSS means unstyled markup until the scripts run * (FOUC + layout shift). Shipped as a real stylesheet instead. * * The injection is REMOVED from scripts/components/*.js rather than left as a * harmless duplicate, and that is not tidiness. Three templates hand an * asset path to a CSS custom property — --icon-btn-src, --sf-type-src, * --sf-mark-src. A url() inside a custom property is resolved against the * stylesheet that SUBSTITUTES it, not against the document. While both * copies of a rule existed they had different base URLs — this bundle at * {lang}/styles/, the injected