/* ========================================================================== NEXT RETAIL · ПОСОКА А „ИНЖЕНЕРНОТО БЮРО" ЕДНА СИСТЕМА · ДВЕ ТЕМИ Страницата е ЕДИН лист от проектантско бюро: непрекъснати полеви линии, номерирани полета, коти вместо декорация, нотация вместо украса. Архитектура на цвета — три слоя: 0 · БРАНД-КОНСТАНТИ (--c-*) суровината; не се ползват директно в компонент 1 · СЕМАНТИЧНИ РОЛИ (--bg, --fg, --rule, --accent …) единственото, което компонентите виждат; имат стойност за всяка тема 2 · КОМПОНЕНТИ говорят само на роли Светлата е ОРИГИНАЛЪТ на идеята (чертеж върху хартия) и затова е `:root`. Тъмната е [data-theme="dark"] — същите роли, друга материална логика. ========================================================================== */ /* ========================================================================== 0 · БРАНД-КОНСТАНТИ (еднакви за двете теми — точни, без приближения) ========================================================================== */ :root{ --c-ink:#071E24; --c-petrol:#0C3A42; --c-surface:#0F4653; --c-deep:#06181D; --c-mist:#EEF2F2; --c-white:#FFFFFF; --c-line:#D9E0E4; --c-muted:#5E7175; --c-text-dark:#DCE6E9; --c-brass:#D9A93F; --c-brass-dark:#8A6516; --c-aqua:#3EC6C0; --c-aqua-deep:#1E7F7A; --c-ops:#1F7570; --c-ops-d:#4ABDB5; --c-grow:#8A6516; --c-grow-d:#D9A93F; --c-tech:#28688E; --c-tech-d:#7FB8E0; --c-space:#A85A28; --c-space-d:#E08B4F; --c-yd:#FFD801; /* точният брандов жълт на Yellow Door */ --fh:'Montserrat',sans-serif; --fb:'IBM Plex Sans',sans-serif; --ease:cubic-bezier(.22,1,.36,1); /* ---- геометрия на листа (не зависи от темата) ---- */ --max:1320px; --gut:clamp(20px,4.2vw,56px); --colw:min(calc(var(--max) - 2*var(--gut)), calc(100% - 2*var(--gut))); /* Същото като --colw, но с 100vw вместо 100%. Трябва там, където мярката се ползва ВЪТРЕ в елемент — тогава процентът се мери спрямо неговия контейнер, не спрямо листа, и полето излиза наполовина. Поддържат се заедно; --sheetw е същият израз. */ --colw-abs:min(calc(var(--max) - 2*var(--gut)), calc(100vw - 2*var(--gut))); --sheetw:min(calc(var(--max) - 2*var(--gut)), calc(100vw - 2*var(--gut))); --bleed:calc((100vw - var(--sheetw))/2); --narrow:760px; /* ---- ТИПОГРАФСКА СКАЛА ---------------------------------------------- Десет назовани роли. Гъста там, където се чете (13,5→15→17); отворена там, където се строи йерархия (21→27→33→…). Прозата е ЕДИН размер: --t4. Уводът е --t5. Ситният ред е --t3. Течни са само трите заглавни роли — там, където ширината на листа наистина трябва да се усети. */ --t1:11px; /* щемпел, номер, етикет на поле */ --t2:13.5px; /* дребен етикет, таг, мета */ --t3:15px; /* ситен ред: бележка, връзка, бутон */ --t4:17px; /* ПРОЗА — единственият размер за текст */ --t5:21px; /* увод, подзаглавие, h4 */ --t6:27px; /* h3 */ --t7:33px; /* число-данни, теза */ --t8:clamp(33px,2.9vw,42px); /* h2 · заглавие на секция */ --t9:clamp(42px,4.03vw,58px); /* h1 на вътрешна страница */ --t10:clamp(52px,5.6vw,81px); /* h1 на херото */ /* ---- ОТСТЪПНА СКАЛА -------------------------------------------------- Осем стъпки, изведени от преброяване на 188-те реално ползвани отстъпа: всяка стъпка е центърът на едно от осемте гнезда, които данните образуват. Съотношението държи ~1,4 нагоре. Течни са само последните три — там живее вертикалният ритъм. */ --s1:4px; /* косъм: подбив на знак, ред под връзка */ --s2:8px; /* сглобка вътре в ред */ --s3:12px; /* между съседни редове */ --s4:16px; /* между абзаци, вътре в клетка */ --s5:22px; /* подложка на клетка, между клетки */ --s6:clamp(22px,2.6vw,34px); /* подложка на карта, отстъп на блок */ --s7:clamp(30px,3.6vw,52px); /* между блокове, широка колонна фуга */ --s8:clamp(46px,5.8vw,84px); /* вертикален ритъм на секцията */ /* ---- МЯРКА НА РЕДА --------------------------------------------------- Една мярка за проза. Втората е за КОНТЕЙНЕР, не за ред. */ --measure:34rem; /* всяка редица проза */ --measure-wide:44rem; /* обвивка, не ред */ } /* ---- 53 · ТАВАН НА ЛИСТА ПОД 1040 · 15.09.2026 ------------------------- Над 1040 12-полевата решетка пълни дясната част на листа: мерено, текстът стига до 85–97% от ширината му. Под 1040 решетката се изключва, а прозата си остава с таван --measure (544px) — и дясното остава голо: /za-nas при 1024 → 51 · 58 · 62 · 59% /kakvo-pravim при 1024 → 51% /yellow-door при 1024 → 58 · 64% Тоест празнотата НЕ е по дизайн — тя е дупката, оставена от решетката. Мярката не се разпъва (колко знака на ред се четат е типографско решение), а листът се свива към нея. При 660px: /za-nas отива на 73 · 82 · 87 · 90% — същият порядък като на плот. Пипа се ЕДИН променлив; нито един компонент не е докоснат. */ /* ВАЖНО: капва се САМО --colw (колоната на съдържанието). --sheetw НЕ се пипа: от него се смята --bleed = (100vw - sheetw)/2, тоест всеки изнесен елемент. Първият опит капна и двете и .grid4 на началната излетя извън екрана при 1024 (863→1027 при лист 1024). Портата го хвана. */ @media(max-width:1039px){ :root{ --colw:min(660px, calc(100% - 2*var(--gut))); } :root{ --colw-abs:min(660px, calc(100vw - 2*var(--gut))); } } /* ========================================================================== 1 · РОЛИ · СВЕТЛА ТЕМА — „чертеж върху качествена хартия" Дълбочината идва от ХАРТИЯ, СЯНКА и МАСТИЛО. Проверени контрасти (върху бяло): fg 10.1:1 · fg-muted 7.4:1 · fg-strong 17.2:1 · fg-faint 5.8:1 · accent 5.3:1 · data 4.8:1. ========================================================================== */ :root, :root[data-theme="light"], .scope-light{ color-scheme:light; /* повърхности: бяло → Mist → петрол-тинт */ --bg:var(--c-white); --bg-raised:var(--c-mist); --bg-sunken:#E7EDED; --bg-card:var(--c-white); --bg-card-hover:var(--c-white); --bg-header:rgba(255,255,255,.88); --bg-menu:var(--c-white); --bg-field:var(--c-white); /* полета на формуляр */ --raised-edge:rgba(12,58,66,.15); /* ръбът на повдигнатия лист */ /* мастило */ --fg:#2C464C; --fg-strong:var(--c-ink); --fg-head:var(--c-petrol); /* РЪЧНА · 1: заглавията са петролни — цветът от логото */ --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.559' height='11.387' viewBox='0 0 8.559 11.387'%3E%3Cpath d='M1.633 1.5H4.304L7.058 5.469 4.207 9.887H1.5L4.554 5.645Z'/%3E%3C/svg%3E"); /* РЪЧНА · 4: шевронът от логото, като маска */ --fg-muted:#44595F; --fg-faint:#56696E; /* линии на чертежа — мастилени (петрол), не сиви */ --rule-strong:rgba(12,58,66,.30); --rule:rgba(12,58,66,.155); --grid:rgba(12,58,66,.05); --grid-1:rgba(12,58,66,.028); --grid-2:rgba(12,58,66,.042); --grid-3:rgba(12,58,66,.058); --grid-fine:rgba(12,58,66,.034); /* милиметровата хартия на херото */ --tick:rgba(12,58,66,.42); /* кръстчета за кадриране, щемпел */ /* акцент: на светло месингът е BRASS-DARK (#D9A93F е само върху тъмно) */ --accent:var(--c-brass-dark); --accent-ink:var(--c-white); /* текст ВЪРХУ акцента */ --accent-soft:var(--c-brass-dark); /* месинг в размер на нотация */ --accent-tick:rgba(138,101,22,.85); --data:var(--c-aqua-deep); /* числа */ --focus:var(--c-aqua-deep); /* светофар на категориите (/yellow-door) — цветът е ДАННИ, не украса */ --field-ink:#2C464C; /* мастило ВЪРХУ полето (10.1:1) */ --field-hint:#5E7175; /* подсказка (5.13:1) */ --field-line:rgba(12,58,66,.55); /* кант на полето — 3.27:1 спрямо листа */ --sig-go:#2E7D32; /* 4.72:1 върху бяло */ --sig-wait:#C89600; /* жълто, 2.9:1 — знак, не текст */ --sig-stop:#B3402A; /* 5.34:1 */ /* вратите — код, не декорация */ --field-space:var(--c-space); --field-tech:var(--c-tech); --field-ops:var(--c-ops); --field-grow:var(--c-grow); /* хартия и сянка */ --plate-bg:rgba(12,58,66,.038); --plate-grid:rgba(12,58,66,.048); --shadow-lift:0 18px 40px -22px rgba(7,30,36,.34), 0 2px 6px -4px rgba(7,30,36,.14); --shadow-accent:0 14px 30px -12px rgba(138,101,22,.45); /* изометрията в родния си вид */ --iso-1:#FFFFFF; --iso-2:#E9F0F1; --iso-3:#D7E1E4; --iso-4:#F2FAF9; --iso-5:#F4F7F7; --iso-6:#DCE5E7; --iso-7:#C7D5D8; --iso-8:#D8EFED; --iso-9:#C9E4E2; --iso-halo:#FFFFFF; } /* ========================================================================== 2 · РОЛИ · ТЪМНА ТЕМА — „светещ чертеж върху мастило" Стойностите са наследени 1:1 от посока А; тук са само пренесени като роли. Проверени контрасти (върху ink): fg 14.0:1 · fg-muted 8.6:1 · fg-faint 5.6:1 · accent 7.6:1 · accent-soft 5.4:1. ========================================================================== */ :root[data-theme="dark"], .scope-dark{ color-scheme:dark; --bg:var(--c-ink); --bg-raised:var(--c-petrol); --bg-sunken:var(--c-deep); --bg-card:var(--c-petrol); --bg-card-hover:var(--c-surface); --bg-header:rgba(7,30,36,.88); --bg-menu:var(--c-ink); --raised-edge:transparent; --fg:var(--c-text-dark); --fg-strong:var(--c-white); --fg-head:var(--c-white); /* на тъмно заглавието остава бяло */ --fg-muted:rgba(220,230,233,.78); --fg-faint:rgba(220,230,233,.60); --rule-strong:rgba(220,230,233,.15); --rule:rgba(220,230,233,.085); --grid:rgba(220,230,233,.05); --grid-1:rgba(220,230,233,.028); --grid-2:rgba(220,230,233,.045); --grid-3:rgba(220,230,233,.062); --grid-fine:rgba(220,230,233,.030); --tick:rgba(220,230,233,.34); --accent:var(--c-brass); --accent-ink:var(--c-ink); --accent-soft:rgba(217,169,63,.92); /* 6.89:1 върху ink · 5.05:1 върху petrol */ --accent-tick:rgba(217,169,63,.70); --data:var(--c-aqua); --focus:var(--c-aqua); /* на тъмно полето НЕ е бяла хартия: дълбочината идва от стойност, не от хартия — затова полето е повдигната повърхност, а не светло петно */ --bg-field:var(--c-surface); --field-ink:var(--c-text-dark); /* 8.18:1 върху полето */ --field-hint:rgba(220,230,233,.72); /* 5.08:1 */ --field-line:rgba(220,230,233,.42); /* 4.56:1 спрямо листа */ --sig-go:#5FBF63; --sig-wait:#E0A93C; --sig-stop:#E8735A; --field-space:var(--c-space-d); --field-tech:var(--c-tech-d); --field-ops:var(--c-ops-d); --field-grow:var(--c-grow-d); --plate-bg:rgba(238,242,242,.028); --plate-grid:rgba(220,230,233,.032); --shadow-lift:none; --shadow-accent:0 12px 28px -8px rgba(217,169,63,.45); /* изометрията е ОСВЕТЕН обект върху тъмния лист */ --iso-1:var(--c-mist); --iso-2:var(--c-line); --iso-3:#AEC0C5; --iso-4:var(--c-line); --iso-5:#C4D2D5; --iso-6:#93A9AF; --iso-7:#93A9AF; --iso-8:#B7CFCD; --iso-9:#9CB8B6; --iso-halo:var(--c-ink); } /* ========================================================================== 3 · ОСНОВА ========================================================================== */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} html,body{overflow-x:clip} body{ font-family:var(--fb);font-size:var(--t4);line-height:1.66; color:var(--fg);background:var(--bg); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-feature-settings:"kern" 1; transition:background-color .28s ease,color .28s ease; } @media (prefers-reduced-motion:reduce){body{transition:none}} img{max-width:100%;display:block} a{color:inherit} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:1px} ::selection{background:var(--accent);color:var(--accent-ink)} /* РЪЧНА · 5 · ГЕОМЕТРИЯ — 12-полева решетка по конструкция. Досега ръбовете се уцелваха на ръка с max-width и отстъпи. Сега .wrap Е решетката: под 1040 е една колона, над 1040 — дванайсет. Всяко пряко дете заема цялата ширина, ако не поиска друго, а децата, които се делят, ползват subgrid — тоест наследяват СЪЩИТЕ линии, вместо да ги пресмятат наново. */ .wrap{width:var(--colw);margin-inline:auto;--m:calc(100%/12); display:grid;grid-template-columns:minmax(0,1fr);column-gap:0} .wrap>*{grid-column:1/-1;min-width:0} /* решетки, които си имат собствено делене, не се пренареждат */ .subnav .wrap>*,.wrap.nav>*,.nav.wrap>*{grid-column:auto} .wrap.nav,.nav.wrap{display:flex} @media(min-width:1040px){.wrap{grid-template-columns:repeat(12,minmax(0,1fr))}} .narrow{width:min(var(--colw),var(--narrow))} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ========================================================================== 4 · ПОЛЕВИ ЛИНИИ НА ЛИСТА (непрекъснати вертикали, през целия документ) ========================================================================== */ .rails{position:fixed;inset:0;z-index:2;pointer-events:none} .rails span{ position:relative; display:block;height:100%;width:var(--colw);margin-inline:auto; border-left:1px solid var(--rule); transform:scaleY(0);transform-origin:top; transition:transform 1.1s var(--ease) .15s; } /* ДЯСНАТА полева линия е псевдоелемент, а не `border-right`: рамката се рисува ВЪТРЕ в кутията (последния пиксел преди --colw), а мрежата слага лентата си СЛЕД границата. Заради тази разлика в конвенцията двете линии се разминаваха с 1px. Тук дясната линия ляга точно на границата x+--colw — същата граница, на която пада и мрежата. Разстоянието между двете полеви линии вече е ТОЧНО --colw, тоест точно 12 колони. */ .rails span::after{ content:"";position:absolute;left:100%;top:0;width:1px;height:100%; background:var(--rule); } .rails.on span{transform:scaleY(1)} @media (prefers-reduced-motion:reduce){.rails span{transform:none;transition:none}} @media(max-width:640px){.rails{display:none}} /* ========================================================================== 5 · ТИПОГРАФИЯ ========================================================================== */ h1,h2,h3,h4,.fh{font-family:var(--fh);font-weight:800;line-height:1.06;letter-spacing:-.022em;color:var(--fg-head);text-wrap:balance} h1{font-size:var(--t10);line-height:.98;letter-spacing:-.035em} h2{font-size:var(--t8);line-height:1.06} /* РЪЧНА · 6а · Подзаглавието в клетка се вдига цяла стъпка и потежнява: 18,6/700 → 27/800. Дотук картата нямаше ясна глава — заглавието беше едва по-едро от описанието под него. (.dossier h3 и .formstamp h3 си имат собствени правила и не се променят.) */ h3{font-size:var(--t6);font-weight:800;line-height:1.2;letter-spacing:-.02em} p{max-width:var(--measure)} /* ШЛИФОВКА · 07.09 · КОРИЦАТА Е СИМЕТРИЧНА: 84 отгоре · 84 отдолу. Дотук `min-height:420px; padding-bottom:0` изравняваше четирите вътрешни корици по височина — но заглавието и така ляга на едно и също място (y = 159) на всяка страница; изравняването даваше само мъртва опашка: 204px празно под два реда увод на /polia, /za-kogo и /kontakti (72px на /za-nas). Главата дава отстъп, без да има тяло под себе си — същият дефект като у сестринската версия (168 вместо 104). Сега височината следва съдържанието, а въздухът над и под главата е един и същ. */ /* РЪЧНА · 6б · Уводът става отделен глас, а не по-широк абзац: 19,4 → 21px, междуредие 1,62 → 1,50. */ .lead{font-size:var(--t5);line-height:1.5;color:var(--fg-muted);max-width:var(--measure)} /* месингова „точка на сметката" — типографски знак, не текст */ .bdot{color:var(--accent);-webkit-text-stroke:0} /* шеврон — системният знак; в списъци е нотация, не акцент */ .chev{color:var(--accent-soft);font-weight:700;font-style:normal} /* ========================================================================== 6 · ЛИСТОВЕ (секции) + чертожна мрежа с различна плътност ========================================================================== */ .sheet{ position:relative; /* H5: ритъмът се стяга — въздухът да е решение, не остатък. */ padding:var(--s8) 0 var(--s8); background-color:var(--bg); } /* повдигнатият лист: на тъмно е петрол, на светло — Mist с мастилен ръб */ .sheet.raised{ background-color:var(--bg-raised); box-shadow:inset 0 1px 0 var(--raised-edge),inset 0 -1px 0 var(--raised-edge); } /* колонната мрежа е ИСТИНСКАТА мрежа на оформлението (12 полета), подравнена точно към полевите линии — затова всичко ляга на нея. Стъпката е `calc(100%/12)` ВЪТРЕ в градиента, а не `calc(var(--colw)/12)`: вътре в градиента 100% е дължината на градиентната линия, тоест точно `background-size` = --colw. Ако вместо това се подаде самата променлива, скритият в нея `100%` се преизчислява спрямо ПЛОЧКАТА (--colw), не спрямо листа, и стъпката излиза (--colw − 2*--gut)/12 — при 1440px 91.33px вместо 100.67px. Оттам идваше разминаването: последната линия падаше на 20px от дясната полева линия. Сега 12-те стъпки изчерпват плочката по конструкция и двата ръба са линии на мрежата на ВСЯКА ширина. */ .gridded{ background-image:repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px calc(100%/12)); background-size:var(--colw) 100%; background-position:50% 0; background-repeat:repeat; } .g-05{--grid:var(--grid-1)} .g-10{--grid:var(--grid-2)} .g-15{--grid:var(--grid-3)} /* ---- глава на лист: номер · измерена линия · заглавие ---- */ .shead{ position:relative;margin-bottom:var(--s7); display:grid;grid-template-columns:minmax(0,1fr); } .shead .no{ grid-row:1;grid-column:1/-1; display:block;font-family:var(--fh);font-weight:800;font-size:var(--t1);line-height:1; letter-spacing:.22em;color:var(--accent-soft);margin-bottom:var(--s3); } /* КОТАТА В ГЛАВАТА е изтеглена на 06.09 („знакът в главата ОТПАДА изцяло — ролята на листа се носи от ТОНА, а новата секция се обявява от заглавието и от въздуха"). Правилото ѝ остана да живее с `content:none` — кутия, която не се ражда, с решетка, височина и марж, които никой не чете. Изчистено на 10.09 заедно с жълтата ѝ добавка за листа на Yellow Door. */ .shead h2,.shead h1{grid-row:3;grid-column:1} /* ПОПРАВКА 10.09 · базовата решетка (под 1040) познаваше само три реда: номер · черта · заглавие, и слагаше И увода, И колоната с разказа на ЧЕТВЪРТИ. Две последици, и двете видими на телефон: · при глава с увод И разказ (началната „Правили сме го", /za-nas „Кои сме ние") двата ляха ЕДИН ВЪРХУ ДРУГ — същата кутия, същите координати; · `.cta-col` нямаше ред изобщо и авто-разполагането го качваше НАД заглавието — на последната секция на три страници, от 1024 надолу. Сега всеки има свой ред: увод 4 · действие 5 · разказ 6. */ .shead .lead{grid-row:4;grid-column:1;margin-top:var(--s5)} .shead .cta-col{grid-row:5;grid-column:1} .shead .stack{grid-row:6;grid-column:1;margin-top:var(--s5)} @media(min-width:1040px){ /* ШЛИФОВКА · 07.09 · Главата дели листа ПО ПОЛЕВИТЕ ЛИНИИ, не по дробове. Досега 6fr/5fr с улей 52px слагаше увода на x = 798,5 — на 22px от линия 7 (820,7) и на 22px от десния ръб на формуляра на /kontakti, който Е на линия 7: две почти съвпадащи вертикали, които окото чете като грешка. Сега главата е същата 12-полева решетка като .wrap (column-gap 0, тоест линиите съвпадат по конструкция): заглавието държи полета 1–7, уводът — 8–12; в разказа (shead-split) заглавието е 1–5, колоната с текста 6–12. */ .shead{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:0} .shead h2,.shead h1{grid-column:1/8;padding-right:var(--s7)} .shead .lead{grid-row:3;grid-column:8/-1;margin-top:0;align-self:end;padding-bottom:.3em} .shead-wide h2,.shead-wide h1{grid-column:1/-1;max-width:25ch;padding-right:0} .shead-split h2{grid-column:1/6;align-self:start} .shead-split .stack{grid-row:3;grid-column:6/-1;margin-top:0;align-self:start} } /* Под 1040px решетката е едноколонна и линкът нямаше зададен ред — падаше на авто-разполагане и се качваше в първата свободна клетка, т.е. НАД собственото си заглавие (68–75px). */ /* ШЛИФОВКА · 07.09 · Когда главата е последното в листа (s-story на началната, „Кои сме ние" на /za-nas), долният ѝ марж се събираше с подложката на листа: 136px отдолу срещу 84 навсякъде другаде. Глава без тяло не дава отстъп. */ .shead:last-child{margin-bottom:0} /* ---- бележка на чертеж (изводът под блок) ---- */ .note{ position:relative;margin-top:var(--s7);padding-top:var(--s5); border-top:1px solid var(--rule); /* Изводът е ИЗРЕЧЕНИЕ, не име — значи телесен шрифт. Заглавният назовава (заглавия, етикети, кодове, имена на редове, бутони); телесният казва (увод, проза, извод). Montserrat 700 на 17px и сплиташе буквите. */ font-family:var(--fb);font-weight:600;font-size:var(--t4); line-height:1.55;letter-spacing:0;color:var(--fg-strong);max-width:var(--measure); } /* дълга бележка: разчупва се на абзаци по естествения си шев, вместо да расте в един блок — компонентът е за ИЗВОД, не за пасаж. */ .note>p{margin:0;max-width:none} .note>p+p{margin-top:.62em} /* ========================================================================== 7 · БУТОНИ И ЛИНКОВЕ ========================================================================== */ /* ПОПРАВЕНО 11.09 · БУТОНЪТ НЕ Е FLEX, ЗА ДА ЛЕГНЕ ШЕВРОНЪТ --------------- Шевронът е inline-block с `overflow:hidden`. По спецификация такава кутия има основна линия на ДОЛНИЯ СИ РЪБ — точно затова мастилото му ляга върху основната линия на текста до него. Мерено по пиксели, в картите и полевите знаци разминаването е 0.17px, тоест го няма. Но това правило важи само в ИНЛАЙН поток. В flex контейнер кутията се блокира и браузърът взима основната линия на СКРИТИЯ ѝ текст — оттам шевронът в бутоните стърчеше 4px нагоре при кегел 15 (и 7.5px при надпис на два реда). Не беше „само на моби" — беше на всяка ширина. Затова бутонът става инлайн-блок. При `box-sizing:border-box` подложката 16 + редът 18 + рамката 2 дават точно 52px, тъй че `min-height` отпада без да мърда нищо; разстоянието до шеврона минава от `gap` на марж. Четирите правила, които центрираха с `justify-content`, минават на `text-align` — вж. по-долу. */ .cta{ display:inline-block; font-family:var(--fh);font-weight:700;font-size:var(--t3);line-height:1.2; text-decoration:none;padding:var(--s4) var(--s6);border-radius:2px; border:1px solid transparent;cursor:pointer;text-align:left; transition:transform .35s var(--ease),box-shadow .35s var(--ease), border-color .25s,background-color .25s,color .25s; } .cta-solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .cta-solid:hover{transform:translateY(-2px);box-shadow:var(--shadow-accent)} .cta-ghost{border-color:var(--rule-strong);color:var(--fg-strong);background:transparent} .cta-ghost:hover{border-color:var(--fg-muted);transform:translateY(-2px)} .cta-line{border-color:var(--accent);color:var(--accent);background:transparent} .cta-line:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .cta:active{transform:translateY(0)} /* ========================================================================== 8 · ХЕДЪР — заглавното поле на листа ========================================================================== */ header.site{ position:sticky;top:0;z-index:90; background:var(--bg-header); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid var(--rule); } .nav{display:flex;align-items:center;height:74px;gap:var(--s5)} .nav .logo{display:flex;align-items:center;position:relative;padding-block:var(--s2)} .nav .logo img{height:24px;width:auto} .nav ul{display:flex;gap:var(--s6);list-style:none;align-items:center;margin-left:auto} /* :not(.cta) — иначе линковото оформление би изяло фона и цвета на бутона */ .nav ul a:not(.cta){ color:var(--fg-muted);text-decoration:none;font-size:var(--t3);font-weight:500;letter-spacing:.005em; padding-bottom:var(--s1);background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 1px no-repeat; transition:background-size .35s var(--ease),color .2s; } .nav ul a:not(.cta):hover{color:var(--fg-strong);background-size:100% 1px} .nav ul a:not(.cta)[aria-current]{color:var(--fg-strong);background-size:100% 1px} .nav .cta{padding:var(--s3) var(--s4);font-size:var(--t2);min-height:0;border-radius:2px} .nav-end{display:flex;align-items:center;gap:var(--s4)} .burger{display:none;background:none;border:none;color:var(--fg-strong);cursor:pointer;padding:var(--s3);line-height:0;min-height:44px;min-width:44px} .burger svg{width:24px;height:24px} /* логото е ФАЙЛ и има две версии — сменя се с темата, без допълнителен JS */ .lgswap .lg-dark{display:none} :root[data-theme="dark"] .lgswap .lg-light{display:none} :root[data-theme="dark"] .lgswap .lg-dark{display:block} /* ---- скала на четенето — докъде сме стигнали в листа ---- */ .scan{position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none} .scan i{display:block;width:var(--colw);margin-inline:auto;height:1px} .scan i::before{content:"";display:block;height:1px;background:var(--accent);width:var(--p,0%);transition:width .12s linear} /* ---- превключвател на темата ---- Знакът показва КЪДЕ отиваш, не къде си: на светъл лист свети полумесец (клик → тъмна), на тъмен — слънце (клик → светла). И двата са начертани с хайрлайн по геометрията на чертежа (окръжност + щрихи като котна розета); currentColor, 21px, stroke 1.6. Подчертаването при hover е същият месингов щрих, който бележи активния линк в менюто. */ .tsw{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer; font-size:var(--t3); /* иначе UA-по подразбиране за button (13,33px) тече в скалата */ color:var(--fg-muted);transition:color .25s; } .tsw[hidden]{display:none} .nav-theme{display:flex;align-items:center;gap:calc(var(--s6) - var(--s3))} .nav-theme .tsw{margin-right:calc(var(--s3)*-1)} /* хайрлайн-разделител преди знака — отделя инструмента от навигацията */ .nav-theme::before{content:"";width:1px;height:18px;background:var(--rule);flex:0 0 auto} .tsw-mob{display:none} .tsw:hover{color:var(--fg-strong)} .tsw::after{ content:"";position:absolute;left:12px;right:12px;bottom:7px;height:1px; background:var(--accent);transform:scaleX(0);transform-origin:left; transition:transform .3s var(--ease); } .tsw:hover::after{transform:scaleX(1)} .tsw svg{width:21px;height:21px;display:block;overflow:visible} .tsw .ic{transform-origin:12px 12px;transition:opacity .3s var(--ease),transform .45s var(--ease)} /* по подразбиране (светъл лист) се вижда полумесецът */ .tsw .ic-moon{opacity:1;transform:none} .tsw .ic-sun{opacity:0;transform:rotate(-45deg) scale(.62)} :root[data-theme="dark"] .tsw .ic-moon{opacity:0;transform:rotate(45deg) scale(.62)} :root[data-theme="dark"] .tsw .ic-sun{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .tsw .ic,.tsw::after{transition:none} .tsw .ic-sun,:root[data-theme="dark"] .tsw .ic-moon{transform:none} } /* ШЛИФОВКА · 07.09 · ХЕДЪРЪТ. С петата връзка (Yellow Door) под 1100px връзките се чупеха на два реда (58px), а бутонът се стесняваше до 159px; компактното меню поема листа до 1099. Между 1100 и 1199 улеят между връзките е една стъпка по-тесен (16px), над 1200 — както досега. И: празният .nav-end (бургер + мобилен превключвател, и двата скрити) стоеше в реда като flex-дете и вземаше улей от 22px — бутонът свършваше на x = 1302 вместо на дясната полева линия 1324. На широк лист го няма. */ @media(min-width:1100px){.nav-end{display:none}} @media(min-width:1100px) and (max-width:1199px){.nav ul{gap:var(--s4)}} @media(max-width:1099px){ .nav-end{margin-left:auto} .nav-theme{display:none} .tsw-mob{display:inline-flex} .tsw-mob[hidden]{display:none} .nav ul{ display:none;position:absolute;top:74px;left:0;right:0;background:var(--bg-menu); flex-direction:column;align-items:stretch;padding:var(--s3) var(--gut) var(--s6);gap:0; border-bottom:1px solid var(--rule-strong); } .nav ul.open{display:flex} .nav ul li{width:100%;border-top:1px solid var(--rule)} .nav ul li:first-child{border-top:0} .nav ul a:not(.cta){display:block;padding:var(--s4) 0;font-size:var(--t4);background-size:0 1px} .nav ul li:last-child{border-top:0;margin-top:var(--s4)} .nav ul .cta{display:inline-block;width:auto} .burger{display:block} } /* ========================================================================== 9 · ЛИСТ 01 · ХЕРО ========================================================================== */ /* ---- първият екран Е листът: милиметрова хартия през целия екран --------- Херото става ПОВДИГНАТ лист — това го отделя от бялата шапка и дава на чертежа истинска подложка, вместо плоча под самата илюстрация. Двете мрежи са едно семейство: ситната е 1/72 от листа, полевата е всяка нейна ШЕСТА линия. Рисуват се от една и съща геометрия (--colw) и не могат да се разминат. Затова и чертежът остава без подложка — ляга направо на хартията. */ .s-hero{ padding:var(--s8) 0 0; background-color:var(--bg-raised); --mesh:calc(var(--colw)/72); background-image: repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px calc(100%/12)), repeating-linear-gradient(90deg,var(--grid-fine) 0 1px,transparent 1px calc(100%/72)), linear-gradient(to bottom,var(--grid-fine) 0 1px,transparent 1px); background-size:var(--colw) 100%, var(--colw) 100%, 100% var(--mesh); background-position:50% 0, 50% 0, 0 0; background-repeat:repeat; box-shadow:inset 0 -1px 0 var(--raised-edge); } /* ---- ПРАВИЛОТО ЗА МЯСТОТО НА ЧЕРТЕЖА ------------------------------------ Чертежът заема ТОЧНО ШЕСТТЕ ДЕСНИ ПОЛЕТА: левият му ръб е на шестата линия, десният — на дясната полева линия. И двата ръба лежат на линии, точно както текстовата колона отсреща. Оттам идват симетрията и балансът. Следствие 1: няма преливане — чертежът стои ВЪТРЕ в листа, не изтича от него. Затова и крилото на ›grow е вътре в линията по конструкция, на всяка ширина, без специални правила. Следствие 2: височината му следва от ширината (604 x 456 при 1440) и е по-малка от текстовата колона при всяка ширина — значи екранът се мери по ТЕКСТА, а чертежът никога не го вдига. Проверено: 1024 · 295 срещу 398, 1141 · 395/430, 1280 · 441/464, 1440 · 456/501, 1920 · 456/509. */ /* Чертежът е без подложка — ляга направо върху хартията. */ .s-hero .plate{background:none;border:0;padding:0} /* Реперните кръстчета висят на САМИЯ чертеж (.plan-box), не на колоната: маркират горния и долния му ляв ъгъл, тоест шестата полева линия. Без кант изместването е -5px: -5 + 5 (рамото в кутия 11x11) = 0, рамото заема буквално същия пиксел като линията. */ .s-hero .plate::before,.s-hero .plate::after{content:none} .s-hero .plan-box{position:relative} .s-hero .plan-box::before,.s-hero .plan-box::after{ content:"";position:absolute;left:-7px;width:15px;height:15px;pointer-events:none; background: linear-gradient(var(--tick),var(--tick)) 0 7px/15px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) 7px 0/1px 15px no-repeat; } .s-hero .plan-box::before{top:-5px} .s-hero .plan-box::after{bottom:-5px} /* Същите репери и на ДЕСНИЯ ръб на чертежа — той лежи на дясната полева линия (края на шестата му колона). Носи ги .plate-in, защото .plan-box вече е изчерпал двата си псевдоелемента за левите два ъгъла. Изместването вдясно е -6px, не -5px: лявата линия се рисува ВЪТРЕ в кутията (първия ѝ пиксел), а дясната — СЛЕД нея, тоест едно деление по-навън. */ .s-hero .plate-in{position:relative} .s-hero .plate-in::before,.s-hero .plate-in::after{ content:"";position:absolute;right:-8px;width:15px;height:15px;pointer-events:none; background: linear-gradient(var(--tick),var(--tick)) 0 7px/15px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) 7px 0/1px 15px no-repeat; } .s-hero .plate-in::before{top:-5px} .s-hero .plate-in::after{bottom:-5px} /* 960 → 1039 (15.09) · Героят беше двуколонен до 960. Със свитата колона (--colw 660 под 1040) неговата половина пада на ~340px, а дисплейният кегел се води по vw, не по колоната: „Магазинът" излизаше 349px в кутия 340px. Единият стълб под 1040 връща на заглавието цялата колона. */ @media(max-width:1039px){ .s-hero .plan-box::before,.s-hero .plan-box::after{content:none} .s-hero .plate-in::before,.s-hero .plate-in::after{content:none} /* И на тесен екран чертежът стои ВЪТРЕ в листа — същото правило като на широк. Иначе текстът лежи на лявата линия, а рисунката излиза един улей извън нея от двете страни и подравняването се разпада. */ .s-hero .plate{margin-inline:0} } .s-hero .plate-in{background-image:none} /* Лявата колона е ШЕСТ ПОЛЕТА МИНУС УЛЕЯ, а не дроб от ширината. При дробно съотношение (или при 1fr 1fr) улеят се дели поравно между двете колони и плочата вдясно увисва на половин улей от линията: измерено 8.4px при 1440, 10.9px при 1280, 22.5px при 1024 — две почти успоредни косъмни линии, които окото чете като грешка. С `calc(50% - улея)` сборът колона+улей е точно 50% от листа, тоест шестата линия на мрежата, на ВСЯКА ширина по конструкция. */ .hero-grid{ --hgap:clamp(30px,4.4vw,64px); display:grid;grid-template-columns:calc(50% - var(--hgap)) minmax(0,1fr); gap:var(--hgap);align-items:center; } .hero-grid>*{min-width:0} .hero h1{margin-bottom:var(--s5);max-width:11ch} .hero .lead{margin-bottom:var(--s7);max-width:var(--measure)} .hero-ctas{display:flex;gap:var(--s3);flex-wrap:wrap} /* влизане на герото — по редове, веднъж */ .hero-copy>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .hero.on .hero-copy>*{opacity:1;transform:none} .hero.on .hero-copy>*:nth-child(1){transition-delay:.05s} .hero.on .hero-copy>*:nth-child(2){transition-delay:.14s} .hero.on .hero-copy>*:nth-child(3){transition-delay:.26s} .hero.on .hero-copy>*:nth-child(4){transition-delay:.36s} @media (prefers-reduced-motion:reduce){ .hero-copy>*{opacity:1;transform:none;transition:none} } /* ---- плочата „лист 01": сцената лежи върху подложка, която излиза от рамката ---- */ .plate{ /* Вътрешното поле е ДВЕ КЛЕТКИ хартия, а не свободна стойност: тогава вътрешният лист започва точно на линия и хартията не тръгва от половин клетка. `-1px` е кантът, който абсолютната геометрия вече е изяла. */ --mesh:calc(var(--sheetw)/72); --plate-pad:calc(var(--mesh)*2 - 1px); position:relative; background:var(--plate-bg); border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:var(--s5) 0 var(--s5) var(--plate-pad); } /* Реперното кръстче: рамената му са на 5-ия пиксел в кутия 11x11, а абсолютното позициониране се мери от ПОДЛОЖНОТО каре на плочата, тоест вече е един пиксел навътре заради канта. Затова изместването е -6px, а не -5px: -6 + 1 (кант) + 5 (рамото) = 0 — рамото заема буквално същия пиксел като линията. Старото `left:-1px` местеше вертикалното рамо на 5px вдясно от канта. */ .plate::before,.plate::after{ content:"";position:absolute;left:-8px;width:15px;height:15px; background: linear-gradient(var(--tick),var(--tick)) 0 7px/15px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) 7px 0/1px 15px no-repeat; } .plate::before{top:-6px} .plate::after{bottom:-6px} /* Милиметровата хартия под чертежа е ПОДДЕЛЕНИЕ на колонната мрежа: шест клетки на поле, тоест 72 на лист. Стъпката излиза от --sheetw (същата геометрия, с която се решават и полевите линии), а не от фиксирани 16px — иначе двете мрежи се разминават на всяка ширина. Тъй като вътрешното поле е точно две клетки, левият ръб на този лист е цяло число клетки от линия на мрежата — затова фазата е 0 и всяка шеста линия ЛЯГА върху линия на полето. Един прост градиент на клетка (не repeating-), защото само при background-size = една клетка повторението е точно. */ .plate-in{ position:relative; background-image: linear-gradient(to bottom,var(--plate-grid) 0 1px,transparent 1px), linear-gradient(to right,var(--plate-grid) 0 1px,transparent 1px); background-size:var(--mesh) var(--mesh); background-repeat:repeat; } .plan-box{min-width:0} .plan-box svg{width:100%;height:auto;display:block} @media(min-width:961px){ .plate{border-left:1px solid var(--rule)} } @media(max-width:1039px){ .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s7)} /* ---- 54 · НА ТЕЛЕФОН БУТОНЪТ СЛИЗА ПОД ИЛЮСТРАЦИЯТА · 16.09 ---------- Мерено при 390 (истинска видима височина в Safari ~680: лентата горе ~100, долната ~72 от 852): илюстрацията почваше на 534 и от 264-те ѝ пиксела се виждаха 146 — 55%, и то чак след като окото е минало покрай бутона. Бутонът (52px) и улеят пред него (30px) освобождават 82px. Освен аритметиката: на телефон героят има една задача — обещанието и какво правим. „Покажи ми как ↓" е покана да скролнеш; преди рисунката тя се състезава с нея, след нея е на мястото си. `display:contents` разпуска .hero-copy, за да станат h1, уводът и бутонът ПРЯКИ клетки на решетката и да се подредят с `order`. Разкриването остава непокътнато — то виси на `.hero-copy>*`, а то се мери по ДЪРВОТО, не по `display`. Улеят на решетката пада на 0, защото отстоянията вече ги носят собствените маржове на h1 (--s5) и на увода (--s7). */ @media(max-width:700px){ .hero-copy{display:contents} .hero-grid{row-gap:0} .plate{order:3} .hero-ctas{order:4;margin-top:var(--s7)} } /* Само редът не стигаше — рисунката пак излизаше 36px извън видимото. Мерено по кегели при 390/680: 52px → 3 реда, рисунката свършва на 716 (36 извън) 46px → 3 реда, 698 (18 извън) 44px → 2 реда на 430 и 390, но 3 на 375 и надолу 42px → 2 реда на 430 · 390 · 375 · 360, рисунката се побира на всички При 42 заглавието се чупи на „Магазинът ви / може повече." вместо на „Магазинът / ви може / повече." — тоест на цезурата, а не по средата на смисъла. По-малко, но и по-добре. `13.9vw` остава като таван: то пази „Магазинът" да не излезе от колоната при 320 (правило 57). */ /* тук плочата излиза в двата улея, тоест левият ѝ ръб НЕ е линия. Полето се мери НАЗАД от ръба на листа — улеят минус две клетки — и вътрешният лист пак застава на цяло число клетки от линия. Кантът отпада, затова без -1px. */ .plate{--plate-pad:calc(var(--gut) - var(--mesh)*2); margin-inline:calc(var(--gut)*-1);padding-inline:var(--plate-pad)} .plate::before,.plate::after{display:none} /* 16.09 · `ch` е ширината на нулата, а най-дългата дума „Магазинът" мери 6.10em (правило 57). При 1024 кегелът е 57.3px → 14ch = 340px, а думата иска 349px и излизаше от кутията си. `max()` казва правилото направо: кутията никога не е по-тясна от най-дългата дума. */ .hero h1{max-width:max(14ch, 6.2em)} } /* ---- котата: „500+ · 20+ · 24/7" като размерна верига ---- */ .dimchain{ list-style:none;display:grid;grid-template-columns:repeat(3,1fr); margin-top:var(--s8); padding-top:var(--s3);position:relative; } .dimchain::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule-strong); transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .5s; } .hero.on .dimchain::before,.dimchain.rv.on::before{transform:scaleX(1)} .dimchain li{position:relative;padding:var(--s3) 0 var(--s7);padding-right:var(--s5)} .dimchain li::before{ content:"";position:absolute;top:-7px;left:0;width:2px;height:15px;background:var(--rule-strong); opacity:0;transition:opacity .4s ease; } .dimchain li:last-child::after{ content:"";position:absolute;top:-7px;right:0;width:2px;height:15px;background:var(--rule-strong); opacity:0;transition:opacity .4s ease .18s; } .hero.on .dimchain li::before,.hero.on .dimchain li:last-child::after, .dimchain.rv.on li::before,.dimchain.rv.on li:last-child::after{opacity:1} .dimchain .v{ display:block;font-family:var(--fh);font-weight:800;font-size:var(--t7); line-height:1;letter-spacing:-.02em;color:var(--data);margin-bottom:var(--s2); font-variant-numeric:tabular-nums; } .dimchain .l{display:block;font-size:var(--t2);line-height:1.45;color:var(--fg-faint);max-width:17ch} .dimchain .v+.l{display:block} @media(max-width:700px){ /* ПОПРАВКА 17.09 · Лентата на телефон беше ТРИ РЕДА и се четеше сбъркана. Две причини, и двете мерени: всеки ред беше собствена решетка с `auto 1fr`, тоест колоната се мереше по СВОЕТО число — 86.8 / 64.3 / 80.4px — и етикетите почваха на 122.8 / 100.3 / 116.4 (раздърпан ръб от 22.4px); и надписът стоеше ДЯСНО от числото, с дупка до края на листа. Решението по указание на Георги: лентата на телефон е точно каквато е на плот. Затова тук НЕ СЕ ЗАМЕНЯ НИЩО — нито чертата, нито рискичките, нито падингите. Падат всички стари замени: grid-template-columns:1fr (правеше я едноколонна) .dimchain::before{display:none} (убиваше ЕДНАТА черта през листа) border-top на всеки ред (три черти вместо една) li::before / li:last-child::after: none (убиваше вертикалните рискички) .v{margin-bottom:0} и .l{max-width:none} Остава едно: таван 11ch на надписа, за да са и трите на ДВА реда — искане на Георги, за да е подредено. Трите фрази са по две думи, а най-дългата единична дума е „изградени" (9 знака), тъй че таван малко над нея ги чупи и трите еднакво. На плот таванът си остава 17ch. */ .dimchain{grid-template-columns:repeat(3,minmax(0,1fr))} .dimchain li{padding:var(--s6) var(--s6) 0 0} .dimchain .l{max-width:11ch} } /* Портата хвана това, което моята мярка пропусна: мерил съм спрямо кутията С падинга, а тя мери спрямо СЪДЪРЖАНИЕТО. Числото не се събираше и ядеше своя десен падинг: при 360 „500+" иска 87px в 85, при 320 — 82px в 71, а „24/7" 76px в 71. При 320 това значи 11px навън, тоест числото почти опира следващата рискичка. Гъвкавата част е падингът, не числото: --s6 (22px) става --s2 (8px) под 480px. Тогава при 320 мястото е 85px за 82, а при 360 — 99 за 87. Числото е данна и не се свива; въздухът отдясно се свива. */ @media(max-width:480px){ .dimchain li{padding-right:var(--s2)} } @media (prefers-reduced-motion:reduce){ .dimchain::before{transform:none;transition:none} .dimchain li::before,.dimchain li:last-child::after{opacity:1} } /* ========================================================================== 10 · ЛИСТ 02 · СПЕЦИФИКАЦИЯ четирите реда носят кода на четирите полета — само като цвят на кант ========================================================================== */ .spec{list-style:none;border-top:1px solid var(--rule-strong);max-width:none} .spec li{ position:relative;display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7.6fr); gap:var(--s6); padding:var(--s6) 0 var(--s6) var(--s5); border-bottom:1px solid var(--rule); } /* ШЛИФОВКА · 07.09 · описанието започва на полева линия 4 (беше на 569 — на 50px от линията): редът има 22px ляв отстъп за цветната черта, затова колоната се смята от ширината на листа (100% + отстъпа), не от дроб. */ @media(min-width:1040px){ .spec li{grid-template-columns:calc(4*(100% + var(--s5))/12 - var(--s5) - var(--s6)) minmax(0,1fr)} } .spec b{ font-family:var(--fh);font-weight:700;font-size:var(--t4); line-height:1.32;letter-spacing:-.012em;color:var(--fg-strong); } .spec b .chev{margin-right:.45em;color:var(--c,var(--accent-soft))} .spec p{font-size:var(--t4);line-height:1.62;color:var(--fg-muted);max-width:var(--measure)} .d-space{--c:var(--field-space)} .d-tech{--c:var(--field-tech)} .d-ops{--c:var(--field-ops)} .d-grow{--c:var(--field-grow)} /* 760 → 1039 (15.09) · Записът се цепеше на две колони (4fr заглавие / 7.6fr текст) от 760 до 1040 — точно където 12-полевата решетка вече не държи листа. Заглавната колона падаше на 235px при 768 и 314px при 1024: заглавие там не се побира, преносът му увисва вляво от първия си ред, а при сгънато ЧЗВ (същият компонент — `ul.spec faqspec`) широката колона стои празна. Двуколонната форма иска решетката; под нея няма място. Над 1040 записът и без това е едноколонен — .spec става две колони ЗАПИСИ, не две колони вътре в записа. */ @media(max-width:1039px){ .spec li{grid-template-columns:1fr;gap:var(--s2);padding-left:var(--s4)} .spec li::before{top:calc(var(--s4) + 2px)} } /* ========================================================================== 11 · ЛИСТ 03 · ЧЕТИРИТЕ ПОЛЕТА (плочки) ========================================================================== */ .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)} .fieldcard{ position:relative;display:flex;flex-direction:column; background:var(--bg-card);color:var(--fg);text-decoration:none; padding:var(--s6) var(--s5) var(--s6); transition:background-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease); isolation:isolate; } .fieldcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c,var(--accent));opacity:.85} .fieldcard::after{ content:"";position:absolute;right:16px;bottom:16px;width:15px;height:15px;opacity:0; background: linear-gradient(var(--c),var(--c)) 0 7px/15px 1px no-repeat, linear-gradient(var(--c),var(--c)) 7px 0/1px 15px no-repeat; transition:opacity .3s ease; } .fieldcard:hover,.fieldcard:focus-visible{background:var(--bg-card-hover);box-shadow:var(--shadow-lift);z-index:2} .fieldcard:hover::before,.fieldcard:focus-visible::before{opacity:1} .fieldcard:hover::after,.fieldcard:focus-visible::after{opacity:1} .fieldcard .tag{ font-family:var(--fh);font-weight:800;font-size:var(--t2);letter-spacing:.08em; color:var(--c,var(--accent));display:block;margin-bottom:var(--s7); } .fieldcard h3{margin-bottom:var(--s2)} .fieldcard p{font-size:var(--t4);line-height:1.56;color:var(--fg-muted);max-width:none} .t-ops{--c:var(--field-ops)} .t-grow{--c:var(--field-grow)} .t-tech{--c:var(--field-tech)} .t-space{--c:var(--field-space)} /* 980 → 1039 (15.09): `1fr` носи неявен минимум по съдържание, затова четирите карти не се свиват под min-content. При лист 660 те искаха 273+213+190+164 = 840px и излитаха извън екрана. Още при 1024 бяха по 234px — тесни. Две по две под 1040 им дава по 330px. */ @media(max-width:1039px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:540px){.grid4{grid-template-columns:1fr}.fieldcard .tag{margin-bottom:var(--s5)}} /* ========================================================================== 12 · ЛИСТ 04 · КАК РАБОТИМ — процесът като размерна верига ========================================================================== */ .chain{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0} .chain li{position:relative;padding:var(--s5) var(--s6) 0 0;border-top:1px solid var(--rule-strong)} .chain li::before{content:"";position:absolute;top:0;left:0;width:2px;height:30px;background:var(--rule-strong)} .chain .st{ display:block;font-family:var(--fh);font-weight:800;font-size:var(--t1);letter-spacing:.22em; color:var(--fg-faint);margin-bottom:var(--s6);font-variant-numeric:tabular-nums; } .chain b{ display:block;font-family:var(--fh);font-weight:700;font-size:var(--t5); letter-spacing:-.015em;color:var(--fg-strong);margin-bottom:var(--s2); } .chain b .chev{margin-right:.3em} .chain p{font-size:var(--t4);line-height:1.62;color:var(--fg-muted);max-width:var(--measure)} @media(max-width:820px){ .chain{grid-template-columns:1fr} .chain li{padding:var(--s5) 0 var(--s5) var(--s5);border-top:1px solid var(--rule)} .chain li:first-child{border-top-color:var(--rule-strong)} .chain li::before{top:-1px;left:0;width:2px;height:30px} .chain li:last-child::after{display:none} .chain .st{margin-bottom:var(--s3)} } /* ========================================================================== 13 · ЛИСТ 05 · РАЗКАЗЪТ — колона с полева линия и щрихи ========================================================================== */ .stack{position:relative;padding-left:var(--s6);max-width:var(--measure-wide)} .stack::before{content:"";position:absolute;left:0;top:.55em;bottom:.4em;width:1px;background:var(--rule)} .stack>p{position:relative;margin-bottom:var(--s5);max-width:var(--measure);color:var(--fg-muted)} .stack>p::before{content:"";position:absolute;left:calc(-1*var(--s6));top:.72em;width:var(--s3);height:1px;background:var(--rule-strong)} .stack>p:first-child{font-size:var(--t4);line-height:1.6;color:var(--fg)} .stack>p:last-of-type{margin-bottom:0} /* ========================================================================== 14 · ЛИСТ 06 · РЕГИСТЪР „кой ни търси" ========================================================================== */ .reg{ list-style:none;position:relative;display:grid; grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column; column-gap:var(--s8); border-top:1px solid var(--rule-strong); } .reg::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--rule)} .reg li{ display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:baseline; padding:var(--s5) 0;border-bottom:1px solid var(--rule); font-size:var(--t4);line-height:1.58;color:var(--fg-muted); } .reg b{font-family:var(--fh);font-weight:700;font-size:var(--t4);letter-spacing:-.01em;color:var(--fg-strong);display:block;margin-bottom:var(--s1)} .reg span span{display:block} .reg li>span{max-width:var(--measure)} @media(max-width:820px){ .reg{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row} .reg::before{display:none} } /* ========================================================================== 15 · ЛИСТ 07 · ЛЕНТАТА — щемпелът на листа ========================================================================== */ .mission{ background:var(--bg-raised);color:var(--fg); box-shadow:inset 0 1px 0 var(--raised-edge),inset 0 -1px 0 var(--raised-edge); padding:calc(var(--s8)*1.5) 0; } .stamp{position:relative;padding:var(--s8) var(--s7);text-align:center} .stamp::before,.stamp::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--rule-strong)} .stamp::before{top:0} .stamp::after{bottom:0} .stamp i{position:absolute;width:15px;height:15px;pointer-events:none; background: linear-gradient(var(--tick),var(--tick)) 0 7px/15px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) 7px 0/1px 15px no-repeat; } .stamp i:nth-of-type(1){top:-7px;left:-7px} .stamp i:nth-of-type(2){top:-7px;right:-7px} .stamp i:nth-of-type(3){bottom:-7px;left:-7px} .stamp i:nth-of-type(4){bottom:-7px;right:-7px} .m-vision{ margin:0 auto;max-width:24ch;font-family:var(--fh);font-weight:800; font-size:var(--t8);line-height:1.16;letter-spacing:-.025em;color:var(--fg-strong); } .m-vision .chev{color:var(--accent);margin-right:.2em} /* Кегелът на блока с НЕРАЗДЕЛИМ НИЗ се ограничава от низа, не от праг. Единица, по-широка от реда си, НЕ МОЖЕ да се центрира: редът задържа началния ръб и прелива в другата посока. Само началната има такъв низ — „а на точния екип." в white-space:nowrap, за да остане поантата цяла — затова само нейният блок носи .m-hold. Мерено при фиксирани 33px, с медената точка: низът иска 9.716 x кегела (320.6px при 33px, 262.3px при 27px — същото отношение). Мястото е 100vw − 2x20 улей − 2x30 падинг на .stamp = 100vw − 100px. Делителят е 9.8: два процента запас за резервен шрифт и бъдеща редакция. Това замества @media(max-width:400px) за ТОЗИ блок. Прагът беше сметнат грешно — низът иска екран от 421px, не 400 — и оставяше последния ред 9.3px вдясно от осата при 402, ширината на iPhone 16 Pro, точно където Георги го видя. А и една стъпка не стигаше: и на 27px низът не се събира под 363px, тоест 360 · 344 · 320 бяха извън центъра с 1.2 · 9.2 · 12.8px. Над 421px изразът не важи — там --t8 е по-малкото. */ .m-vision.m-hold{ font-size:min(var(--t8), calc((100vw - 100px) / 9.8)) } /* Под 400px девизът слиза с една стъпка. Важи за блоковете БЕЗ неразделим низ; мерено, най-широката им единица е дума: „демонстрация" иска 8.241 x кегела, „застанем" — 5.377. И двете се събират на всяка ширина при --t6. Стъпка от скалата, не нова стойност. */ @media(max-width:400px){ .m-vision:not(.m-hold){font-size:var(--t6)} } .m-sub{margin:var(--s6) auto 0;max-width:var(--measure);font-size:var(--t4);line-height:1.6;color:var(--fg-muted);text-wrap:balance} /* ========================================================================== 16 · ЛИСТ 08 · ДЕЙСТВИЕТО ========================================================================== */ .s-cta{background:var(--bg)} .s-cta .shead{margin-bottom:0} .cta-btns{margin-top:var(--s7);display:flex;flex-wrap:wrap;gap:var(--s3);max-width:none} .contactline a{color:var(--fg);text-decoration:none; display:inline-block;padding:12px 0 14px;margin:-12px 0 -14px; /* цел ≥ 46px, без визуална промяна */ background:linear-gradient(var(--accent),var(--accent)) 0 calc(100% - 12px)/100% 1px no-repeat; transition:background-size .3s var(--ease),color .2s} .contactline a:hover{color:var(--fg-strong);background-size:100% 2px} /* ========================================================================== 17 · ФУТЪР — заглавното каре на чертежа ========================================================================== */ footer.site{background:var(--bg-sunken);color:var(--fg);padding:var(--s8) 0 0;border-top:1px solid var(--rule-strong)} .f-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:start;padding-bottom:var(--s7)} .f-brand img{height:23px;width:auto} .f-brand a{display:inline-flex;padding-block:var(--s3)} .f-desc{margin-top:var(--s4);font-size:var(--t3);color:var(--fg-faint);max-width:var(--measure)} footer nav ul{list-style:none;display:flex;gap:var(--s2) var(--s6);flex-wrap:wrap;margin-top:-11px} footer nav a{display:inline-block;color:var(--fg-muted);text-decoration:none;font-size:var(--t3);padding:var(--s3) 0 var(--s4); background:linear-gradient(var(--accent),var(--accent)) 0 calc(100% - 12px)/0 1px no-repeat; transition:background-size .35s var(--ease),color .2s} footer nav a:hover{color:var(--fg-strong);background-size:100% 1px} /* Лентата дели като ГОРНИЯ ред на футъра — двата края, — а не на половина. Мерено: контактите тръгваха от 720 и оставяха 344px празно до шината, т.е. четвърт лист. Вертикалната черта по средата отпада заедно с разделянето: тя дели две колони, а двукрайна лента няма какво да дели — горният ред също няма черта между бранда и навигацията. */ .f-meta{display:flex;justify-content:space-between;gap:var(--s6); border-top:1px solid var(--rule)} .f-meta span{padding:var(--s5) 0 var(--s5);font-size:var(--t2);letter-spacing:.03em;color:var(--fg-faint)} .f-meta span+span{text-align:right} @media(max-width:700px){ .f-top{grid-template-columns:1fr;gap:var(--s6)} .f-meta{display:grid;grid-template-columns:1fr;gap:0} /* Отрицателният марж беше писан за старата решетка с двойна подложка; сега двата реда се застъпваха с 6px. Чертата дели, подложката е една. */ .f-meta span+span{text-align:left;border-top:1px solid var(--rule);padding-top:var(--s5)} } /* ========================================================================== 18 · РАЗКРИВАНЕ (reveal) ========================================================================== */ .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)} .rv.on{opacity:1;transform:none} .shead.rv{opacity:1;transform:none;transition:none} .shead.rv>*{opacity:0;transform:translateY(14px);transition:opacity .65s var(--ease),transform .65s var(--ease)} .shead.rv.on>*{opacity:1;transform:none} .shead.rv.on .no{transition-delay:.02s} .shead.rv.on h2,.shead.rv.on h1{transition-delay:.16s} .shead.rv.on .lead{transition-delay:.26s} @media (prefers-reduced-motion:reduce){ .rv,.shead.rv>*{opacity:1;transform:none;transition:none} } /* БЕЗ JS разкриването няма кой да го задейства — затова, когато скриптовете са изключени, всичко е показано и всяка линия е начертана. Проверката е на нивото на браузъра (@media scripting), а не на класове от JS. */ @media (scripting: none){ .rv,.shead.rv>*{opacity:1;transform:none;transition:none} .rails span,.dimchain::before{transform:none;transition:none} .dimchain li::before,.dimchain li:last-child::after{opacity:1} .iso .iz-label{opacity:1} .hero-copy>*{opacity:1;transform:none} } [id]{scroll-margin-top:120px} /* ========================================================================== 19 · ИЗОМЕТРИЧНИЯТ МАКЕТ Геометрията в SVG-то е НЕПРОМЕНЕНА. Цветовата обработка минава изцяло през роли (--iso-1…9, --iso-halo, --field-*), затова е една и съща таблица за двете теми — сменят се само стойностите на ролите. ========================================================================== */ .iso text{user-select:none} .iso .iso-note{font-family:var(--fb);font-size:var(--t1);font-weight:600;letter-spacing:.04em} .iso a.izone{cursor:pointer;outline:none;transition:opacity .35s ease} .iso .iz-lift{transition:transform .45s var(--ease)} .iso .zfloor,.iso .iz-tint{transition:fill-opacity .4s ease} .iso .iz-label{opacity:0;transition:opacity .3s ease} .iso .iz-label text{ font-family:var(--fh);font-weight:700;font-size:var(--t2);letter-spacing:.04em; paint-order:stroke;stroke:var(--iso-halo);stroke-width:5;stroke-linejoin:round; } .iso a.izone:is(:hover,:focus-visible,.lit) .iz-lift{transform:translateY(-8px)} .iso a.izone:is(:hover,:focus-visible,.lit) .zfloor{fill-opacity:.19} .iso a.izone:is(:hover,:focus-visible,.lit) .iz-tint{fill-opacity:.36} .iso a.izone:is(:hover,:focus-visible,.lit) .iz-label{opacity:1} /* Надписът на ›tech стои НАЙ-ОТГОРЕ в кадъра: витрината минава пред касите и го покриваше. Изваден е от групата на зоната — затова се пали през :has(), а не по наследяване, и си носи същото повдигане като останалите. */ .iso .iz-label-top{transition:opacity .3s ease,transform .45s var(--ease)} .iso:has(a.izone[data-zone="tech"]:is(:hover,:focus-visible,.lit)) .iz-label-top{opacity:1;transform:translateY(-8px)} .iso:has(a.izone:is(:hover,:focus-visible,.lit)) a.izone:not(:is(:hover,:focus-visible,.lit)){opacity:.3} .iso a.izone:focus-visible .zfloor{stroke:var(--focus);stroke-width:2;fill-opacity:.19} /* Етикетите не се показват и на телефон (решение 06.09) — четирите зони остават без имена там; зоните пак водят към полетата при тап. */ @media(prefers-reduced-motion:reduce){ .iso a.izone,.iso .iz-lift,.iso .zfloor,.iso .iz-tint,.iso .iz-label{transition:none} .iso .iz-label{opacity:1} .iso a.izone:is(:hover,:focus-visible) .iz-lift{transform:none} } /* ---- лицата на макета: на светло са родните, на тъмно — повдигнати ---- */ .iso [fill="#FFFFFF"]{fill:var(--iso-1)} .iso [fill="#E9F0F1"]{fill:var(--iso-2)} .iso [fill="#D7E1E4"]{fill:var(--iso-3)} .iso [fill="#F2FAF9"]{fill:var(--iso-4)} .iso [fill="#F4F7F7"]{fill:var(--iso-5)} .iso [fill="#DCE5E7"]{fill:var(--iso-6)} .iso [fill="#C7D5D8"]{fill:var(--iso-7)} .iso [fill="#D8EFED"]{fill:var(--iso-8)} .iso [fill="#C9E4E2"]{fill:var(--iso-9)} /* ---- „grow" лежи ИЗВЪН кутията, върху подложката: сменя се с темата ---- */ .iso a[data-zone="grow"] [fill="#8A6516"]{fill:var(--field-grow)} .iso a[data-zone="grow"] [stroke="#8A6516"]{stroke:var(--field-grow)} .iso text.iso-note{fill:var(--field-grow)} /* ---- етикетите на зоните са НАД всичко: винаги в темената врата ---- */ .iso .iz-label text[fill="#A85A28"]{fill:var(--field-space)} .iso .iz-label text[fill="#28688E"]{fill:var(--field-tech)} .iso .iz-label text[fill="#1F7570"]{fill:var(--field-ops)} .iso .iz-label text[fill="#8A6516"]{fill:var(--field-grow)} /* ---- при среден лист етикетите се уголемяват, за да останат четими ---- */ @media(min-width:821px) and (max-width:1200px){ .iso .iz-label text{font-size:var(--t4);stroke-width:6} .iso .iso-note{font-size:var(--t2)} } /* ШЛИФОВКА · 07.09 · На телефон етикетите НЕ съществуват (решение 06.09, дотук само записано като коментар). Правилата под 820/520 ги УГОЛЕМЯВАХА до 27px и при 390px „›tech · каси и самообслужване" се палеше 0,9–3,8 s след зареждане с ляв ръб на x = −26px. Скрити са изцяло; встъплението в main.js не тече на тесен лист; зоните остават линкове към полетата. */ @media(max-width:820px){ .plate-in .iso{overflow:visible} .iso .iz-label{display:none} } /* ========================================================================== 20 · НОМЕРАЦИЯ (CSS-броячи — копито остава дословно) ========================================================================== */ main{counter-reset:sheet} .sheet{counter-increment:sheet} .shead .no::before,.mission-no::before{content:counter(sheet,decimal-leading-zero)} .mission-no{ display:block;font-family:var(--fh);font-weight:800;font-size:var(--t1);line-height:1; letter-spacing:.22em;color:var(--accent-soft);margin-bottom:var(--s7); } /* Номерацията маркира СЪДЪРЖАТЕЛНИТЕ листове. Действието (CTA) и щемпелът (лентата) не са листове от чертежа — те са какво СЛЕДВА от него, затова остават без номер. Броячът продължава да тече, така че видимите номера си остават последователни. (04.09 — разреждане на фанфарата.) */ /* РЪЧНА · 2а: номерът на ЛИСТ отпада — заменя го котата. Изброяванията НЕ се пипат: тезите 01–05, стъпките на веригата, номерата на досиетата. Там числото носи смисъл, не етикет. */ .shead .no,.mission-no{display:none} /* Броячът отпадна на 10.09: числата на веригата вече стоят в разметката. CSS брояч не се копира, не се чете от екранен четец и не съществува без стилове — а номерът на стъпка е съдържание, не украса. */ /* ========================================================================== 21 · ВЪТРЕШНИТЕ ЛИСТОВЕ — ОБЩИ КОМПОНЕНТИ Всичко тук е наименувано по РОЛЯ, не по страница, и работи в двете теми: нито един компонент не съдържа цвят — само семантични роли. ========================================================================== */ /* ---- 21.1 · PAGEHEAD · заглавният лист на вътрешна страница ------------- Главата е СЪЩИЯТ компонент .shead като на всеки друг лист — само че носи H1: номер · измерена линия · заглавие вляво · увод вдясно. Така всяка вътрешна страница започва като лист от същия чертеж, а не като нов сайт. */ .pagehead{padding:var(--s8) 0 var(--s8)} .pagehead .shead{margin-bottom:0} .pagehead h1{ font-size:var(--t9);line-height:1.02;letter-spacing:-.032em; max-width:15ch; } .pagehead .lead{max-width:var(--measure)} .pagehead .cta-btns{margin-top:var(--s7)} /* ---- 21.2 · SHEAD-FIELD · глава на лист, която носи код на врата -------- Номерът на листа и кодът (›space · Пространства) стоят на един ред; измерената линия получава щрихи в цвета на вратата — котата казва кое поле започва, без нито една допълнителна дума. */ .shead .fieldmark{ grid-row:1;grid-column:1/-1; display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap; margin-bottom:var(--s3);max-width:none; } .shead .fieldmark .no{margin-bottom:0} .shead .fieldmark .kicker{margin-bottom:0;color:var(--fg-faint)} .shead-field::before{ background: linear-gradient(var(--rule-strong),var(--rule-strong)) 0 4px/100% 1px no-repeat, linear-gradient(var(--c,var(--accent)),var(--c,var(--accent))) 0 0/2px 9px no-repeat, linear-gradient(var(--c,var(--accent)),var(--c,var(--accent))) 100% 0/2px 9px no-repeat; } .f-space{--c:var(--field-space)} .f-tech{--c:var(--field-tech)} .f-ops{--c:var(--field-ops)} .f-grow{--c:var(--field-grow)} .f-space,.f-tech,.f-ops,.f-grow{scroll-margin-top:calc(var(--s8)*1.5 + var(--s5))} /* ---- 21.3 · SUBNAV · регистър на полетата (котвена лента) --------------- Не е таб-лента, а глава на листа: всяко поле има котен щрих в своя цвят; активното поле изтегля щриха до пълната височина на лентата. */ .subnav{ position:sticky;top:74px;z-index:80; background:var(--bg-header); backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid var(--rule-strong); } .subnav .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:58px} .subnav a{height:58px} /* Беше flex с `align-items:center`: тогава шевронът е КЛЕТКА и не сяда на основната линия — знакът висеше 28px над главната буква. Един ред текст, центриран с line-height, връща обикновеното инлайн подравняване. */ .subnav a{ position:relative;display:block;line-height:58px;padding-left:var(--s5); font-family:var(--fh);font-weight:700;font-size:var(--t3);letter-spacing:.05em; text-decoration:none;color:var(--fg-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color .25s; } .subnav a::before{ content:"";position:absolute;left:0;top:0;width:2px;height:15px;background:var(--c); opacity:.5;transition:height .35s var(--ease),opacity .25s; } .subnav a:hover,.subnav a:focus-visible{color:var(--c)} .subnav a.act{color:var(--c)} .subnav a.act::before{height:100%;opacity:1} /* БРАНД · шевронът и суфиксът носят ЕДИН цвят. В навигацията линкът е сив в покой и взима цвета на полето на hover и активен — знакът трябва да го следва, а не да стои месингов над сива дума. */ .subnav a .chev{color:inherit} .subnav a[data-k=space]{--c:var(--field-space)} .subnav a[data-k=tech]{--c:var(--field-tech)} .subnav a[data-k=ops]{--c:var(--field-ops)} .subnav a[data-k=grow]{--c:var(--field-grow)} @media (prefers-reduced-motion:reduce){.subnav a::before{transition:none}} @media(max-width:420px){.subnav .wrap{height:52px}.subnav a{height:52px;line-height:52px;padding-left:var(--s3);font-size:var(--t2)}} /* ---- 21.4 · SECLABEL · надпис на чертеж (етикет + линия до ръба) -------- */ .seclabel{ display:flex;align-items:center;gap:var(--s4); font-family:var(--fh);font-weight:800;font-size:var(--t1);line-height:1; letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint); margin:var(--s7) 0 var(--s5);max-width:none; } .seclabel::after{content:"";flex:1 1 auto;height:1px;background:var(--rule)} .seclabel:first-child{margin-top:0} /* ---- 21.5 · BRIEF · водещият абзац на поле („Какво виждаме") ------------ */ /* ШЛИФОВКА · 07.09 · На /yellow-door уводът свършваше и линията на регистъра започваше на 0px под него (два листа: „24/7 · 2 канала" и „Светофарът"). На /polia между двата стои надпис .seclabel със свой отстъп; тук го няма — отстъпът е този между блокове. */ .specreg li{ counter-increment:sr;position:relative; display:grid;grid-template-columns:2.7rem minmax(0,5.2fr) minmax(0,7fr); gap:var(--s1) var(--s6);align-items:baseline; padding:var(--s4) 0; border-bottom:1px solid var(--rule); } .specreg li::before{ content:counter(sr,decimal-leading-zero); font-family:var(--fh);font-weight:800;font-size:var(--t1);line-height:1.9; letter-spacing:.14em;color:var(--fg-faint);font-variant-numeric:tabular-nums; } .specreg b{ font-family:var(--fh);font-weight:700;font-size:var(--t4); line-height:1.4;letter-spacing:-.012em;color:var(--fg-strong); } .specreg b .chev{color:var(--c,var(--accent-soft));margin-right:.4em} .specreg li>span{font-size:var(--t3);line-height:1.6;color:var(--fg-muted);max-width:var(--measure)} /* тирето виси В УЛЕЯ между колоните — както при висяща пунктуация: описанието започва оптически на своята колона, а знакът остава разделител */ .specreg.dashed li>span{text-indent:-1.15em} .specreg li>span b{font-family:var(--fb);font-size:inherit;font-weight:600;color:var(--fg)} @media(max-width:820px){ .specreg li{grid-template-columns:2.2rem minmax(0,1fr)} .specreg li>span{grid-column:2} .specreg.dashed li>span{text-indent:0} } /* ---- 21.6б · SPECREG · ДВУКОЛОНЕН вариант (само четирите полета на /polia) По модела на .reg („Кой ни търси" на началната): решетка със СПОДЕЛЕНИ редове, затова хоризонталите на двете колони падат на една линия и блокът се чете като чертеж, а не като два независими списъка. Вертикална черта по средата. Четенето е НАДОЛУ по лявата колона, после дясната. ⚠ Броят редове е ЗАШИТ, защото grid-auto-flow:column изисква явен брой: 8 услуги = 4 реда, ›tech има 10 = 5 реда. ПРИ ДОБАВЯНЕ ИЛИ МАХАНЕ НА УСЛУГА редовете се преброяват наново ТУК. Затова вариантът е СКОУПНАТ към четирите полета: базовият .specreg (ползван и на /yellow-door, където списъците са 4–5 реда) остава едноколонен — при него зашитите 4 реда оставяха дясната колона празна. Поредните номера 01–08 паднаха (04.09, реш. Георги): дублираха шеврона и крадяха 2.7rem ширина. Единствените числа тук вече са номерата на ЛИСТОВЕТЕ. */ /* ПОПРАВЕНО 11.09 · ГОРНАТА ЧЕРТА СЕ ВРЪЩА, ЕТИКЕТЪТ СИ ОТИВА ------------- Модулът е роден като `.reg-2` и Е ИМАЛ горна черта; тя се изгуби на 05.09, когато беше пренаписан за две колони. Проверих го, след като твърдях обратното: първата ми справка търсеше ДНЕШНИТЕ имена на класовете в стар код, който ги няма (там са `.reg-2` и `.nota`), върна „няма" и аз го прочетох като „никога не е било". Старата черта обаче беше и прекалено тъмна: 0.6 плътност срещу 0.14 на редовете — 4.3 пъти. Днешната стъпка на сайта е по-мека: `--rule-strong` (0.3) срещу `--rule` (0.157), тоест 1.9. Затова се връща ТОЧНО елементът на другите модули — същият, който носи `.reg` на началната. А етикетът „С какво помагаме" отпада (реш. Георги, 11.09): щом модулът си има свой ръб, етикетът остава втора черта на 22px от първата и двете се четат като една дебела с процеп. Остава само „Разгледайте отблизо" — той стои пред карето, не пред таблица. */ .specreg.f-space,.specreg.f-tech,.specreg.f-ops,.specreg.f-grow{ position:relative; display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto); grid-auto-flow:column;column-gap:var(--s8); border-top:1px solid var(--rule-strong); } .specreg.f-tech{grid-template-rows:repeat(5,auto)} /* 10 услуги */ .specreg.f-space::before,.specreg.f-tech::before, .specreg.f-ops::before,.specreg.f-grow::before{ content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--rule); } .specreg.f-space li,.specreg.f-tech li,.specreg.f-ops li,.specreg.f-grow li{ display:block;padding:var(--s5) 0; } .specreg.f-space li::before,.specreg.f-tech li::before, .specreg.f-ops li::before,.specreg.f-grow li::before{content:none} /* ---- 21.12 · ВИСЯЩ ШЕВРОН В РЕГИСТЪРА НА /kakvo-pravim ----------------- Тук заглавието и описанието са на ОТДЕЛНИ редове (li и b са display:block). Затова „ — “ пред описанието падна: разделител, който няма какво да разделя. Прочитът беше ДВА знака за един елемент — шеврон на заглавието и тире на описанието. Щом тирето го няма, остава да се събере лявата линия. Досега бяха ТРИ: · първият ред на заглавието → 35px (бутнат от шеврона) · преносът на заглавието → 20px (шевронът не го бута) · описанието → 20px Шевронът увисва в полето, а всичко, което принадлежи на елемента, ляга на една линия — както е при .ticklist, където знакът е в своя колона. Отстъпът е ТОЧНО ходът на шеврона: глиф 7.88px + марж .4em при 17px = 14.68px = .8632em. Мерено на 1440, 820 и 390 — едно и също, защото е в em. */ .specreg.f-space li,.specreg.f-tech li,.specreg.f-ops li,.specreg.f-grow li{ --hang:calc(.8632 * var(--t4)); } .specreg.f-space b,.specreg.f-tech b,.specreg.f-ops b,.specreg.f-grow b{ display:block;margin-bottom:var(--s1); padding-left:var(--hang);text-indent:calc(-1 * var(--hang)); } .specreg.f-space li>span,.specreg.f-tech li>span, .specreg.f-ops li>span,.specreg.f-grow li>span{ display:block;max-width:none;padding-left:var(--hang); } /* под 860px регистърът се изправя в една колона — както .reg */ /* 860 → 1039 (16.09) · Последните самотни прагове. Под 1040 колоната на съдържанието е с таван 660px (правило 53), тоест две колони падат на ~300px всяка. Мерено на регистъра: 27 от 34 глоси ставаха на ТРИ реда и 8 заглавия се пренасяха, с 246–274px мъртво поле. За текст+бутон (.crossref) и за картите (.dossiers) числото е същото. Прагът им става ръбът на решетката. */ @media(max-width:1039px){ .specreg.f-space,.specreg.f-tech,.specreg.f-ops,.specreg.f-grow{ grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row; } .specreg.f-space::before,.specreg.f-tech::before, .specreg.f-ops::before,.specreg.f-grow::before{content:none} } /* ---- 21.7 · CROSSREF · препратка към отделен лист ----------------------- */ .crossref{ position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto; gap:var(--s6);align-items:center; background:var(--bg-raised);border-left:2px solid var(--c,var(--accent)); box-shadow:inset 0 1px 0 var(--raised-edge),inset 0 -1px 0 var(--raised-edge); padding:var(--s6) var(--s6); } .crossref h4{ font-family:var(--fh);font-weight:800;font-size:var(--t5); line-height:1.24;letter-spacing:-.018em;color:var(--fg-strong);margin-bottom:var(--s2); } .crossref p{font-size:var(--t4);line-height:1.6;color:var(--fg-muted);max-width:var(--measure)} .crossref .cta{flex:0 0 auto} @media(max-width:1039px){.crossref{grid-template-columns:minmax(0,1fr);align-items:start}} /* ---- 21.8 · CHAIN-4 · веригата с четири звена (режими на работа) -------- */ /* .chain.chain-4 (0,2,0) — за да НЕ зависи от реда спрямо чупката на .chain */ .chain.chain-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1160px){.chain.chain-4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.chain.chain-4{grid-template-columns:minmax(0,1fr)}} /* когато звеното носи СВОЙ етикет (текст), броячът мълчи */ /* ШЛИФОВКА · 07.09 · ДВОЙНИЯТ ИНТЕРВАЛ след шеврона. На три места текстът в HTML-а вече носи интервал след знака („› До ключ", „› Идентификация", „› Да застанем"), а правилото на контекста добавя и марж — 0,3–0,4em плюс интервал = дупка. Текстът не се пипа; маржът се маха точно там. */ .chain-4 b .chev,ol.specreg.dashed b .chev,.stamp-label+.m-vision .chev{margin-right:0} /* ---- 21.9 · DOSSIER · досие (шестте ситуации) --------------------------- Не е SaaS-картонче, а папка от бюрото: подетикетът ВИСИ върху горния ръб като етикет на класьор, номерът е кота, заглавието и двата абзаца лежат на един ритъм, а действието е заковано на дъното — затова всички досиета са с еднаква височина, независимо колко текст носят. Шестте ситуации са номерирани 01–06; седмият лист е ОТВОРЕН — затова е без номер. */ .dossiers{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;background:var(--rule);border:1px solid var(--rule); margin-top:var(--s8);counter-reset:ds; } /* ШЛИФОВКА · 07.09 · На /za-kogo решетката е ПЪРВО дете на листа и маржът ѝ се събираше с подложката: 167px над досиетата срещу 84 във всеки друг лист (между края на увода и етикетите на папките зееха 250px). Първото дете не носи марж — етикетът, който виси на горния ръб, си взима 7px от подложката. */ .wrap>.dossiers:first-child{margin-top:0} .dossier{ counter-increment:ds;position:relative;display:flex;flex-direction:column; /* Картонът взима фона на СТРАНИЦАТА, не --bg-card (04.09). Причината е етикетът: той виси върху горния ръб и рисува подложка в цвета на своя картон, а горната ѝ половина пада ИЗВЪН него. Съвпаднат ли двата цвята, петното изчезва — иначе се появява в едната тема и не в другата (--bg-card и --bg-raised са различни на светло и еднакви на тъмно). Картоните вече се определят от хайрлайновете на решетката, както лист от чертеж. */ background:var(--bg); padding:var(--s7) var(--s6) var(--s6); } /* БЕЗ състояние при посочване: досието е лист хартия, не бутон. Повдигането и месинговият кант са езикът на КЛИКАЕМОТО (.fieldcard) — тук те обещаваха действие, което картата няма. Действието е в текстовия линк на дъното и си носи собственото посочване. */ /* етикетът на папката виси върху горния ръб */ .dossier .dlabel{ position:absolute;top:0;left:var(--s6);transform:translateY(-50%); display:inline-flex;align-items:center;gap:var(--s2); background:var(--bg);padding-right:var(--s3); font-family:var(--fb);font-weight:600;font-size:var(--t1);line-height:1.2; letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint); max-width:calc(100% - 2*var(--s6)); } .dossier .dlabel::before{content:"";width:15px;height:2px;background:var(--accent-tick);flex:0 0 auto} /* мярката е 25ch, не 19: при 19 заглавието ползваше ~56% от листа и се чупеше вътре в изречението („Централата е / малка. Очакванията…"), тоест точка в началото на ред. При 25ch пренасянето пада на границата на изречението, а останалите заглавия запазват формата си. */ .dossier h3{ font-size:var(--t5);line-height:1.2;letter-spacing:-.024em; color:var(--fg-strong);margin-bottom:var(--s4);max-width:25ch; } .dossier p{font-size:var(--t4);line-height:1.62;color:var(--fg-muted);max-width:var(--measure)} .dossier p+p{margin-top:var(--s3)} /* седмият елемент — ОТВОРЕН лист: пълна ширина, пунктирана рамка, без номер */ /* „отворен" = ЦВЕТЪТ НА ЛИСТА, не прозрачност: прозрачният лист пропуска хайрлайна на решетката и сваля контраста на знаците върху него */ /* «Отворен лист» НЕ е тониран (04.09): ПУНКТИРЪТ казва «отворено» — тинтът беше второ казване на същото. И по-важно: етикетът на папката виси върху горния ръб и рисува подложка в цвета на СВОЯ картон, а горната ѝ половина пада ИЗВЪН него. Различни цветове от двете страни на ръба => видимо петно. В тъмната тема --bg-card и --bg-raised съвпадат, затова бъгът беше само на светло. Лекуван е по корен: секцията с досиетата вече не е повдигната, а този картон не е тониран — картон и фон са един цвят, както в тъмната тема. */ .dossier-open{ grid-column:1/-1;background:var(--bg); outline:1px dashed var(--rule-strong);outline-offset:-1px; } .dossier-open .dlabel{background:var(--bg)} .dossier-open h3{max-width:none} /* 16.09 · МАХНАТ мъртъв блок: искаше .dossier-open да е двуколонен над 901px (заглавие вляво, проза вдясно), но правило 40 реда по-долу, на СЪЩИЯ праг, го връща на display:block и печели по ред на източника. Тоест двуколонният вид не е важил на никаква резолюция. Решение на Георги, 16.09: остава както е — заглавие над прозата. Единственият елемент с този клас е картонът „Партньорства." на /za-kogo. */ .dossiers-3{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1160px){.dossiers-3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1039px){.dossiers,.dossiers-3{grid-template-columns:minmax(0,1fr)}} /* на тесен лист етикетът слиза В папката — дълъг етикет не бива да виси */ @media(max-width:700px){ .dossier{padding-top:var(--s6)} .dossier .dlabel{position:static;transform:none;background:none;padding-right:0; margin-bottom:var(--s4);max-width:none} } /* ---- 21.10 · THESES · тезите като регистър, не като втора номерация ---- Номерът на тезата е СЪЩИЯТ знак като номера на листа: Montserrat 800, .68rem, разредка .2em, месинг в размер на нотация — плюс котния щрих, с който започва всяко звено на веригата. Така 01–05 не са втора, паралелна система, а същата, приложена едно ниво по-надолу. */ .theses{list-style:none;max-width:none;border-top:1px solid var(--rule-strong)} .theses li{ position:relative;display:grid;grid-template-columns:minmax(0,1fr); padding:var(--s6) 0 var(--s6) var(--s7); border-bottom:1px solid var(--rule); } .theses li:last-child{border-bottom:0} .theses li::before{content:"";position:absolute;left:0;top:0;width:2px; height:15px;background:var(--rule-strong)} .theses .th{ font-family:var(--fh);font-weight:800;font-size:var(--t7); line-height:1.18;letter-spacing:-.024em;color:var(--fg-strong);max-width:21ch; } /* ШЛИФОВКА · 07.09 · на /yellow-door тезата започва с шеврон без интервал в текста („›Затвореният") — знакът се допираше до думата. Същият марж като при звеното на веригата (.chain b .chev). */ .theses .th .chev{margin-right:.3em} .theses .tno{ position:absolute;left:0;top:calc(var(--s6) + .28em); font-size:var(--t1);font-weight:800;line-height:1;letter-spacing:.2em; color:var(--accent-soft);font-variant-numeric:tabular-nums; } .theses .thsub{margin-top:var(--s4);font-size:var(--t4);line-height:1.64; color:var(--fg-muted);max-width:var(--measure)} @media(min-width:1040px){ /* ШЛИФОВКА · 07.09 · подтезата започва на полева линия 6 (центъра) — редът има 52px ляв отстъп за номера, затова колоната се смята от ширината на листа (100% + отстъпа), а не от дроб: беше на 726 (+6px). */ .theses li{grid-template-columns:calc(6*(100% + var(--s7))/12 - 2*var(--s7)) minmax(0,1fr); column-gap:var(--s7);align-items:start} .theses .thsub{margin-top:.55em} } @media(max-width:560px){ .theses li{padding-left:0;padding-top:var(--s6)} .theses li::before{height:19px} .theses .tno{position:static;display:block;margin-bottom:var(--s3)} } /* ---- 21.10б · STACK · акцентните изречения в разказа -------------------- */ .stack .em{ font-family:var(--fh);font-weight:700; font-size:var(--t4);line-height:1.42;letter-spacing:-.018em; color:var(--fg-strong);max-width:var(--measure); } .stack>p.em:first-child{font-size:var(--t5);color:var(--fg-strong)} /* ---- 21.10в · STAMP · надписът и уводът в щемпела ----------------------- */ .stamp-label{ font-family:var(--fh);font-weight:800;font-size:var(--t1);line-height:1; letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint); margin-bottom:var(--s6); } .stamp-lead{margin:0 auto var(--s6);max-width:var(--measure); font-size:var(--t4);line-height:1.62;color:var(--fg-muted)} /* ---- 21.11 · FORMSHEET · формулярът на бюрото --------------------------- Етикетите са нотация (както надписите на чертежа), полето е хартия, кота вляво брои редовете. Употребимостта не пострадва: етикетът е истински