/* ============================================================================
site.css — единственият източник на стилове за целия сайт.
Зарежда се от всяка страница с
следва директно в нормалния flow, и на по-къси страници (contact/
demo, особено след като .footer-top отпадна оттам) съдържанието не
стигаше долния край на прозореца — под футъра се виждаше самият body фон
(var(--paper), затова "линията" сменяше цвят според темата). main{flex:1}
го разтяга да запълни остатъка, футърът пада точно на долния ръб. На
по-дълги страници (текстът надвишава прозореца) нищо не се променя. */
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}
a{color:inherit}
img,svg{display:block;max-width:100%}
/* line-height 1.12 и отрицателен tracking бяха тунинг за плътен получер
sans (Golos). Сериф с нормални тегла иска повече въздух: при Intuendi 60px
заглавие има line-height 78px = 1.3, и никакъв letter-spacing. */
h1,h2,h3{font-family:var(--display);line-height:1.25;letter-spacing:normal}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
/* Skip-link — достъпност (WCAG 2.4.1 Bypass Blocks). Скрит визуално, но
присъства за screen reader-и и клавиатурна навигация; появява се само
при focus (Tab от началото на страницата), позволява да се прескочи
навигацията директно към съдържанието, без да се минава през всеки линк
в nav-а с Tab всеки път. */
.skip-link{
position:absolute;top:-100px;left:12px;z-index:1000;
background:var(--blue);color:#fff;
padding:10px 18px;border-radius:8px;
font-size:14px;font-weight:600;text-decoration:none;
transition:top .15s ease;
}
.skip-link:focus{top:12px}
/* Ширината е снета от intuendi.com: техният вътрешен контейнер за четене е
min(100%, 1205px), но hero-то и навигацията НЕ го ползват — техният
контейнер там е maxWidth:none, само с отстъп. Тоест шелът и първият екран
вървят чак до ръба на екрана, на всякаква ширина, а четивните секции се
свиват.
Първият опит тук грешно сложи max-width:1560px на .wrap "за всеки случай"
— на екран, по-широк от 1560 (какъвто е този на собственика), това пак
оставя голи полета отстрани, точно каквото трябваше да се избегне. Свалено.
.wrap — БЕЗ таван, само отстъп — истински през целия екран
.wrap-narrow — 1205px, същата стойност като при тях, за секции с четене */
.wrap{width:100%;margin:0 auto;padding:0 clamp(16px,3.6vw,60px)}
.wrap-narrow{max-width:1205px;margin:0 auto}
/* Двуезичие: показва се само вариантът на избрания език. Механизмът е същият
като в стария сайт — доказан е и работи без JavaScript за подразбиращия се
език. Виж research.md, R6. */
html[data-lang="bg"] .l-en{display:none!important}
html[data-lang="en"] .l-bg{display:none!important}
/* Ако темата се сменя, докато страницата стои отворена, преходът да не е рязък.
Никога върху свойства, които предизвикват преоформяне. */
@media (prefers-reduced-motion: no-preference){
body{transition:background-color .2s ease, color .2s ease}
}
/* ==========================================================================
3. РАЗКРИВАНЕ ПРИ СКРОЛ
Началното скрито състояние важи САМО под html.js — тоест само когато
site.js наистина работи. Ако скриптът падне, класът js липсва и цялото
съдържание е видимо. Това е защитата срещу дефекта при confluence.com,
където при бърз скрол части от страницата остават празни.
========================================================================== */
/* Рецептата е снета едно към едно от intuendi.com:
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,30px,0)}to{...}}
.visible{animation:fadeUp .5s ease forwards}
Същественото при тях не е разстоянието, а зърнистостта: класът се слага на
ВСЕКИ отделен елемент — заглавие, абзац, бутон, снимка поотделно — а не на
цял блок. Оттам идва каскадата, заради която страницата им изглежда жива.
Затова в разметката [data-reveal] стои на отделните елементи. */
@keyframes fadeUp{
from{opacity:0;transform:translate3d(0,30px,0)}
to{opacity:1;transform:none}
}
html.js [data-reveal]{opacity:0}
html.js [data-reveal].is-in{
animation:fadeUp .5s ease forwards;
animation-delay:var(--reveal-delay, 0ms);
}
/* Посетител, който е поискал по-малко движение, получава напълно статична
страница и не губи нищо от съдържанието. */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
html.js [data-reveal]{opacity:1}
html.js [data-reveal].is-in{animation:none}
}
/* ==========================================================================
4. ШЕЛ — НАВИГАЦИЯ
Футърът влиза в User Story 3 (фаза 5).
========================================================================== */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* Три колони, двете крайни РАВНИ (1fr всяка) — единственият начин връзките
в средата да застанат на истинския център на лентата, а не на центъра на
каквото остане свободно. С auto 1fr auto среднaта колона се измества към
по-тясната крайна колона. Всяка крайна колона поема каквото ѝ трябва,
остатъкът от 1fr просто е поле. */
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:22px;height:64px}
/* Логото сменено от (динамична SVG, цвят през CSS vars) на
истинските нови wordmark файлове на собственика (assets/logo/wordmark-
light.webp/wordmark-dark.webp) — обработени от оригиналните JPG-та с плътен
фон: изрязан плътния фон до прозрачност (color-key по разстояние от фоновия
цвят), изрязана празната рамка около текста. +data-theme-media е
установеният механизъм в проекта за двутемови кадри (виж initShiftBand/
syncThemedSources в site.js, R8 в research.md) — реагира и на изричния
theme toggle, не само на системната тема. */
.logo{text-decoration:none;flex:none;justify-self:start;display:flex;align-items:center}
.logo img{display:block;height:31px;width:auto}
.nav-links{display:flex;gap:24px}
.nav-links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
/* .nav-links button — "Контакти" е плосък елемент тук, не вътре в падащо
меню (собственикът прибра дропдауна обратно; засега два отделни елемента,
докато не се разбере как точно да изглежда занапред). Стилизиран еднакво
с връзките до него — само функционално не води никъде (виж index.html). */
.nav-links button{
font-family:var(--body);text-decoration:none;font-size:15px;font-weight:500;
color:var(--muted);background:none;border:0;padding:0;cursor:pointer;
}
.nav-links button:hover{color:var(--ink)}
/* Празна средна колона не бива да пречи на разпределението. */
.nav-links:empty{display:none}
.nav-actions{display:flex;align-items:center;gap:12px;justify-self:end}
/* С равни крайни колони, дясната (вход + 2 бутона) трябва да се побере в
същата ширина като лявата (логото). Границата е измерена, не е кръгло
число по навик — под нея дясната група не се събира без пренасяне. */
@media(max-width:900px){
.nav-links{display:none}
}
/* На тесен екран четирите елемента в навигацията не се събират: логото плюс
„Вход" плюс двата превключвателя надхвърлят 320px още преди отстоянията.
Затова тук се свиват отстоянията, логото и вътрешните полета на бутоните.
Бутоните не се крият — „Вход" трябва да се вижда и на телефон (FR-017). */
@media(max-width:520px){
.nav-in{column-gap:8px}
.nav-actions{gap:6px}
.logo img{height:25px}
.ctrl-btn{padding:6px 9px}
.login-btn{padding:6px 11px;font-size:12.5px}
}
.ctrl-btn{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 12px;font-family:var(--mono);font-size:13px;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;min-height:32px;flex:none}
.ctrl-btn:hover{border-color:var(--blue);color:var(--blue)}
.ctrl-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Входът към клиентския дашборд. Стои и на телефон, за разлика от .nav-links. */
.login-btn{border:1px solid var(--blue);background:var(--blue-soft);border-radius:999px;padding:6px 14px;font-family:var(--mono);font-size:13px;color:var(--blue);text-decoration:none;display:flex;align-items:center;min-height:32px;white-space:nowrap;flex:none}
.login-btn:hover{background:var(--blue);color:var(--paper)}
/* "Get a Demo" в навигацията — собственикът поиска да го има и горе, до
езиковия суич, не само на дъното на екрана. Съзнателно СПОКОЕН вариант —
без обикалящото сияние на .footer-top .btn (собственикът изрично поиска
"не толкова натрапчив с ефекти"): плътен фон, същия компактен размер като
.login-btn/.ctrl-btn (не голямото 14px/28px padding на общия .btn), само
лек brightness на hover, нищо повече. Скрит под 900px заедно с .nav-links
— на тесен екран .nav-actions вече е стегнат само с Вход + 2 превключвателя
(FR-017, виж бележката горе); четвърти елемент там би счупил подредбата,
а мобилната навигация е отделна, отложена задача. */
.nav-demo-btn{border:1px solid var(--blue);background:var(--blue);border-radius:999px;padding:6px 14px;font-family:var(--mono);font-size:13px;color:#fff;text-decoration:none;display:flex;align-items:center;min-height:32px;white-space:nowrap;flex:none}
.nav-demo-btn:hover{filter:brightness(1.1)}
@media(max-width:900px){
.nav-demo-btn{display:none}
}
/* ==========================================================================
5. СЕКЦИИ — ПЪРВИ ЕКРАН
========================================================================== */
/* Измерих директно защо изглеждахме "накуцани по краищата" при отдалечен
изглед: hero-то при intuendi.com расте с височината на прозореца (636px
при 720px прозорец, 1020px при 1200px — пропорционално), докато нашето
беше високо точно колкото съдържанието плюс padding с таван по clamp. При
голям ефективен viewport тяхното продължава да пълни почти целия екран;
нашето спираше да расте и оставаше малко петно в единия ъгъл на много
по-голямо платно.
min-height, не height — ако съдържанието някога стане по-високо от това
(дълъг български текст, малък екран), кутията расте с него, не го реже.
64px е точната височина на .nav (виж по-долу), не кръгло число. */
.hero{padding:clamp(40px,6vw,84px) 0 clamp(48px,6vw,88px);overflow:hidden}
/* Бяха почти равни колони (1fr / 1.02fr) с широка междина — на широк екран
текстът е естествено по-тесен от колоната си (шрифтът е с таван по clamp),
а кадърът си стоеше в своята половина: резултатът беше голяма мъртва дупка
по средата, нищо общо с intuendi.com. При тях кадърът поема забележимо
повече от лентата и започва близо до текста. Тук същото — по-тясна текстова
колона, по-широка за кадъра, по-стегната междина. */
/* min-height:85vh е буквалната им стойност, свалена от истинския им CSS
(не от усет): ".elementor-element-45c2c49 > .elementor-container{
min-height: 85vh }" — редът с двете колони, не секцията отвън. Преди беше
на .hero, като calc(100vh - 64px) — работеше по число, но не беше
буквално тяхното. align-items:center центрира двете колони вътре в тази
по-висока кутия, точно както при тях (align-items:center на реда им). */
/* Съотношението на колоните е .5fr:1fr, вместо буквалните .62fr:1fr на
Intuendi (виж бележката по-горе) — нарочно отклонение: собственикът
поиска по-голям кадър ("много мънички, нищо не се вижда"), а с
.62fr:1fr текстовата колона взимаше повече, отколкото ѝ трябва (текстът
е с таван 710px и не го достигаше), докато кадърът — двойна композиция с
доста дребен текст вътре — имаше нужда точно от повече пространство.
max-height в .shot-img вдигнат успоредно, но НЕ той е бил истинското
ограничение тук — измерено директно: при по-високия max-height кадърът
пак излизаше 676px широк, защото самата колона му даваше точно толкова
(max-width:100% го спираше преди max-height изобщо да се задейства). */
.hero-grid{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;min-height:85vh}
@media(max-width:960px){
.hero-grid{grid-template-columns:1fr;gap:36px}
}
/* Таван 710px, снет от кода им (виж по-горе) — текстът не расте безгранично
с колоната. Самото центриране обаче е решение на собственика, не снето от
тях: при проверка тяхното h1 стои близо до левия ръб на колоната си, не
центрирано. Собственикът поиска изрично същото третиране като при кадъра
— margin:0 auto центрира блока в лявата колона, текстът вътре си остава
ляво подравнен (нормален начин на четене), само кутията му е по средата. */
.hero-copy{max-width:710px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:20px}
/* Тегло 400, не 800 — получер сериф на 60px изглежда тежко и разбира се не
е тяхното. Проверих: тяхното 60px H3 е точно тегло 400. */
.hero h1{font-size:clamp(36px,5.4vw,60px);font-weight:400;margin-bottom:22px;text-wrap:balance}
.hero .lead{font-size:clamp(17px,1.4vw,19.5px);color:var(--muted);max-width:50ch;margin-bottom:32px}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:16px;padding:14px 28px;border-radius:999px;border:1.5px solid var(--blue);background:var(--blue);color:#fff;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
/* --- рамката около кадъра от дашборда ---
Рамката е еднаква в двете теми; кадърът вътре се сменя. Тънката лента с
трите точки отгоре го чете като прозорец на приложение, вместо като
залепена картинка. */
/* width:fit-content — рамката се свива до ширината на кадъра вътре, вместо
да остане широка колкото цялата колона. Иначе, откакто кадърът вече не се
реже (виж .shot-img по-долу), рамката оставаше пълна ширина с голи полета
от двете страни на по-тесния кадър — точно толкова грозно, колкото
отрязването, което замества.
margin:0 auto, не margin-left:auto — центрирана в колоната си, не опряна в
десния край. Първият опит опираше рамката в десния ръб; при много широк
ефективен viewport (zoom out) кадърът, с таван по височина, оставаше малък
и фиксиран, докато колоната растеше неограничено — рамката буквално
"бягаше" към ръба, все по-далеч от текста. Проверих директно в техния код:
тяхната собствена рамка е центрирана в половината си от реда (334px/335px
разстояние от двата ръба на колоната — практически идентично), не опряна
в ръба. */
/* Рамката е по-плътна (2px, var(--ink)), не тънка линия — собственикът
показа мостра с плътен тъмен кант около кадъра, вместо едва забележим
контур. var(--ink) се обръща заедно с темата, както навсякъде другаде: в
светла тема е тъмна рамка, в тъмна тема — светла. */
/* Кадърът вече идва с готова рамка/сянка от самата png (виж бележката в
index.html) — .shot само центрира, не рисува собствен border/фон/сянка
отгоре. Старата плътна рамка (2px var(--ink)) и фалшивият browser-chrome
(.shot-bar с трите точки) паднаха с тази смяна — бяха нужни само докато
кадърът беше гол, единичен скрийншот. */
.shot{
position:relative;
width:fit-content;
max-width:100%;
margin:0 auto;
}
/* Предният опит режеше кадъра по височина (max-height + object-fit:cover) и
заглаждаше долния ръб с преливане към фона. Проблемът: кадърът е таблица
от карти в редове — отрязването падаше по средата на реда с четирите KPI
карти, а не на чиста граница, и с преливането отгоре изглеждаше като
счупена страница, не като нарочен избор. При Intuendi кадърът е цял
правоъгълник, без замъглени/отрязани ръбове.
Сега кадърът се показва ЦЯЛ — никакво отрязване, никакво преливане. По-
тясната текстова колона (виж .hero-grid по-горе) вече дава на кадъра
достатъчно място, без да е нужно да се реже. */
/* height (не max-height) плюс width:auto — на по време на
изпълнение, от site.js — в разметката стои нормален текст, за да е четим за
търсачки, за екранни четци и при изключен JavaScript.
========================================================================== */
/* Проверих реалната им последователност от фонове: hero rgb(243,244,247),
следващата секция rgb(250,250,250), следващата пак rgb(243,244,247) — две
близки, но различни сиви, редувани. При нас hero/подход/покриваме бяха
и трите на голия --paper, неразличими едно от друго. Редувам --paper/
--panel по същия принцип, плюс тънка линия — при тях разликата е само
6-7 нюанса сиво, при нас на светла тема --panel(бяло)/--paper е също
толкова фина; линията прави границата сигурна дори на екран с лош
контраст. */
.approach{padding:clamp(64px,9vw,132px) 0;background:var(--panel);border-top:1px solid var(--line)}
.approach .eyebrow{margin-bottom:26px}
.statement{
font-family:var(--display);
font-weight:400;
font-size:clamp(26px,4.2vw,48px);
line-height:1.3;
letter-spacing:normal;
max-width:26ch;
}
/* Втората и третата мисъл са по-тихи от първата — иначе трите изречения се
бият за едно и също внимание. */
.statement .q{color:var(--muted)}
/* ==========================================================================
5д. СЕКЦИИ — КАКВО ПОКРИВАМЕ
Мрежа от възможности, по модел на "solution overview" при intuendi.com.
За разлика от техните карти, елементите тук не водят никъде — все още
нямаме отделни страници по услуга. Стават връзки, щом тези страници се
появят.
========================================================================== */
.coverage{padding:clamp(56px,7vw,104px) 0;background:var(--paper);border-top:1px solid var(--line)}
.coverage .sec-head{max-width:60ch}
.coverage-grid{
display:grid;grid-template-columns:1fr;
column-gap:clamp(40px,6vw,96px);row-gap:clamp(36px,4.4vw,56px);
}
@media(min-width:720px){
.coverage-grid{grid-template-columns:1fr 1fr}
}
.coverage-card .coverage-ic{width:38px;height:38px;margin-bottom:16px;color:var(--blue)}
.coverage-card .coverage-ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.coverage-card h3{font-size:19px;font-weight:700;margin-bottom:8px}
.coverage-card p{font-size:15.5px;color:var(--muted);max-width:44ch}
/* ==========================================================================
5д2. ПЪЛНОШИРИННИ КАДРИ С ПАРАЛАКС ([data-shift-band] / [data-shift-layer])
Общ механизъм, ползван от две секции по-долу: разделителя между „подхода"
и „какво покриваме" (section-divider.webp) и снимката до цитата на
основателя. Затова е изваден тук, а не повтарян във всяка секция.
Фиксирана височина на лентата (задава се от самата секция, не оттук) +
object-fit:cover на кадъра вътре — еквивалентът на background-size:cover
от техния код (виж бележката в index.html при разделителя). Лентата НЕ
следва естественото съотношение на файла — реже кадъра, никога не го
разтяга и никога не оставя празно поле, на каквато и да е ширина или zoom.
[data-shift-layer] е слоят с лекия паралакс (движи се обратно на скрола) —
по-висок от лентата с --shift-range, центриран с translateY(-50%), JS-ът
в site.js добавя отгоре малко допълнително отместване през --shift. Без
JS или при prefers-reduced-motion остава просто центриран, статичен кадър
— не изчезва нищо, само липсва движението. --shift-range трябва да е поне
2× стойността на data-shift-range в HTML (обичайно 90 → 200px тук).
========================================================================== */
[data-shift-band]{
position:relative;overflow:hidden;
--shift-range:200px;
--shift:0px; /* пипа се от site.js при скрол; 0 без JS/reduced-motion */
}
[data-shift-layer]{
position:absolute;left:0;right:0;top:50%;
height:calc(100% + var(--shift-range));
transform:translateY(calc(-50% + var(--shift)));
}
[data-shift-band] img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* .tint-overlay — двата тъмни кадъра (section-divider-dark.webp,
founder-shot-dark.webp) са рисувани от собственика в старата лилава
марка — снимки, не CSS токени, не се преоцветяват сами при рибрандинга.
Резултат: лилав кадър върху нов син фон, "пръска" (собственикът).
Вместо да иска нови снимки, тонираме съществуващите през CSS:
mix-blend-mode:color взима ХЮ-а/наситеността от този слой (--blue) и
пази светлината на кадъра отдолу непокътната — тъмните/средните тонове
се обръщат забележимо към синьо, бялото остава почти бяло (за да остане
четим текстът вътре), контрастът на самия кадър не се губи.
display:none по подразбиране — само тъмната тема е засегната (светлите
кадри вече са в правилния цвят, тонирането там би развалило нещо
работещо). */
.tint-overlay{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:var(--blue);
mix-blend-mode:color;
opacity:.45; /* пълна сила (1) излезе твърде ярко/неоново върху светлите
части на кадъра — собственикът поиска по-спокойно, по-тъмно. Намалената
opacity частично връща оригиналния лилав тон под синия, омекотява
ефекта, без да го маха. */
display:none;
}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) .tint-overlay{display:block}
}
:root[data-theme="dark"] .tint-overlay{display:block}
/* Разделителят между „подхода" и „какво покриваме". Вече има тъмен вариант
(section-divider-dark.webp), теглен през в index.html — не се
крие повече в тъмна тема. */
.section-divider{height:clamp(200px,26vw,440px)}
/* ==========================================================================
5д3. СЕКЦИЯ — ЦИТАТ ОТ ОСНОВАТЕЛЯ (founder-shot-light.webp)
По модел на testimonial секция от intuendi.com: текст+снимка отляво в
padded колона, наклонен екран отдясно, който се проточва до ръба на
секцията (няма .wrap таван на самата снимка — само на текстовата колона).
Височината на .founder-visual е нарочно голяма (близо до hero), не тънка
лента като .section-divider — при locale проверка (виж бележката в
index.html) наклонът/сянката на кадъра стават видими едва при съотношение
между 1:1 и 1.3:1; по-широка/по-тънка лента реже точно през средата на
екрана и заличава целия ефект на "наклонен кадър".
========================================================================== */
.founder{background:var(--paper);border-top:1px solid var(--line);overflow:hidden}
.founder-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.3fr);align-items:center;column-gap:clamp(16px,3vw,48px)}
@media(max-width:900px){ .founder-grid{grid-template-columns:1fr} }
/* max-width + margin:0 auto, не vw-базиран padding — същата поправка, както
при .hero-copy (виж бележката там): без таван текстът просто следваше
ширината на собствената си (широка) колона и на голям монитор увисваше
близо до левия ръб, "залепен за стената", а позицията му се местеше с
всяка промяна на ефективната ширина (голям монитор, browser zoom-out).
С таван и auto центриране текстът пада на собствено, стабилно място по
средата на колоната си, което не зависи от zoom. */
.founder-copy{
padding:clamp(48px,7vw,96px) 24px;
max-width:440px;
margin:0 auto;
}
.founder-quote{margin:0 0 28px}
.founder-quote p{
font-family:var(--display);font-weight:400;font-style:italic;
font-size:clamp(20px,2.2vw,28px);line-height:1.45;margin:0;
text-wrap:balance;
}
.founder-attribution{display:flex;align-items:center;gap:14px}
.founder-avatar{width:68px;height:68px;border-radius:50%;object-fit:cover;flex:none}
.founder-name{font-weight:700;margin:0}
.founder-role{color:var(--muted);font-size:14.5px;margin:0}
/* Колоната с кадъра свита от 1.6fr на 1.3fr (по-малка снимка) и височината
вдигната малко (по желание на собственика) — заедно движат съотношението
на изрязване леко надолу към 1:1, все още в проверения "безопасен" обхват
1:1–1.3:1 от бележката горе. */
.founder-visual{height:clamp(460px,48vw,740px)}
@media(max-width:900px){ .founder-visual{height:clamp(380px,92vw,660px)} }
/* Вече има тъмен вариант (founder-shot-dark.webp), теглен през в
index.html — двуколонната решетка остава и в тъмна тема, снимката не се
крие повече. */
/* ==========================================================================
4б. ШЕЛ — ПАДАЩИ МЕНЮТА
Механизмът е готов, но засега е празен: няма нито една друга страница, а
меню без съществуваща подстраница изобщо не се извежда (FR-015).
========================================================================== */
.nav-menu{position:relative;display:flex;align-items:center}
.nav-menu-btn{
display:inline-flex;align-items:center;gap:6px;
border:0;background:none;cursor:pointer;
font-family:var(--body);font-size:15px;font-weight:500;color:var(--muted);
padding:0;
}
.nav-menu-btn:hover,.nav-menu-btn[aria-expanded="true"]{color:var(--ink)}
.nav-menu-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.nav-menu-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-submenu{
position:absolute;top:calc(100% + 14px);left:-10px;
min-width:210px;list-style:none;z-index:60;
background:var(--panel);border:1px solid var(--line);border-radius:12px;
box-shadow:var(--shadow);padding:8px;
}
.nav-submenu[hidden]{display:none}
/* .nav-submenu button — "Контакти" вътре е кликаем бутон без дестинация
(по изрично решение на собственика, докато няма истинска страница
"Контакти"), не . Стилизиран еднакво с истинската връзка до него, за
да не личи разликата визуално — само функционално не води никъде. */
.nav-submenu a,.nav-submenu button{
display:block;width:100%;padding:9px 12px;border-radius:8px;
font-family:var(--body);font-size:15px;text-align:left;
color:var(--muted);text-decoration:none;
background:none;border:0;cursor:pointer;
}
.nav-submenu a:hover,.nav-submenu button:hover{background:var(--blue-soft);color:var(--blue)}
/* ==========================================================================
4в. ШЕЛ — ФУТЪР
========================================================================== */
.site-footer{border-top:1px solid var(--line);padding-bottom:26px}
/* Първият опит тук претупа мащаба — 46px слоган и padding до 108px са много
по-едри от истинската CTA-лента на intuendi.com, която е скромна: кратко
изречение, обикновен бутон, тънки вълни на заден план, не водещ елемент.
Свалено обратно до размер, близък до нормален подзаглавие, не до hero. */
.footer-top{
position:relative;overflow:hidden;
display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;
padding:clamp(40px,5.5vw,64px) 24px;border-bottom:1px solid var(--line);
}
.footer-waves{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.footer-waves path{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.14}
/* :not(.footer-waves) — БЪГ, открит по сигнал на собственика (много празно
място над слогана): това правило събаряше position:absolute на вълните
(еднаква специфичност, по-късно в листа → печели), превръщайки ги от
плаващ фон в обикновен flex елемент, който заемаше собствен ред ~200px
височина. Оттам идваше цялата "празнина" — не от padding. */
.footer-top > :not(.footer-waves){position:relative;z-index:1}
.footer-slogan{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.2vw,26px);line-height:1.25;letter-spacing:normal;max-width:22ch}
/* Обикалящ акцент по канта на "Поискайте демо" — пети опит. Собственикът
хареса механизма (T193), но поиска различни цветове за самото изпълнение:
черно в покой се губи на тъмния футър (Phase 37 — вече винаги тъмен) —
вместо него светло сиво-синьо изпълнение, контрастиращо на тъмния фон.
И обратно на преди: "вместо да е тая дискотека вътре" на hover — дъгата
остава само по ръба (::before, непроменено), но ::after вече НЕ изчезва
на hover (тогава дъгата залива центъра) — само сменя цвета си от светло
на черно. Резултат: в покой светъл бутон с дъгов пръстен, на hover черен
бутон със същия дъгов пръстен — дъгата се вижда и в двата случая, само по
ръба, никога не залива центъра. */
.footer-top .btn{
position:relative;
z-index:0;
border:none;
outline:none;
background:#EAF4FF;
color:#0C2033;
}
.footer-top .btn::before{
content:'';
position:absolute;
top:-2px;
left:-2px;
width:calc(100% + 4px);
height:calc(100% + 4px);
z-index:-1;
border-radius:999px;
background:linear-gradient(45deg,#ff0000,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,#ff0000);
background-size:400%;
filter:blur(5px);
opacity:1;
}
.footer-top .btn::after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
border-radius:999px;
background:#EAF4FF;
transition:background .3s ease-in-out;
}
@keyframes footer-btn-glow{
0%{background-position:0 0}
50%{background-position:400% 0}
100%{background-position:0 0}
}
@media(prefers-reduced-motion:no-preference){
.footer-top .btn::before{animation:footer-btn-glow 20s linear infinite}
}
.footer-top .btn:hover::after,
.footer-top .btn:focus-visible::after{
background:#000;
}
.footer-top .btn:hover,
.footer-top .btn:focus-visible{
color:#fff;
}
/* Логото на компанията във футъра — вече истинска картинка (wordmark-
dark.webp, белият/светлият вариант), не динамична SVG. Футърът вече е
ЕДИН И СЪЩ тъмен тон в двете теми (--footer-bg — виж бележката там), значи
логото винаги иска светлия вариант тук, без значение от избраната тема на
сайта — затова е обикновен с theme-switch (за разлика
от логото в навигацията, което трябва да отговаря на реалната тема). */
/* Собственикът: логото и връзките изглеждаха "разпилени" на отделни редове
(логото само на един ред, връзките под него на широк отделен ред) —
вече са на ЕДИН ред заедно: лого вляво, връзките вдясно от него, същата
височина. .footer-main-row е новият общ контейнер; .footer-brand вече
няма собствен долен отстъп (margin-bottom:0) — разстоянието между тях
идва от gap-а на .footer-main-row, не от полето на логото. */
.footer-main-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px;padding:clamp(28px,3.6vw,44px) 0}
.footer-brand{margin-bottom:0;line-height:0;flex:none}
.footer-brand img{display:block;height:34px;width:auto}
/* Собственикът: махни отделната колона "Контакти" (mailto линк, вече
излишен — contact.html е истинската форма), и вземи останалите четири
връзки от "Сайт" една до друга. Първият опит (space-between вътре в
.footer-links-row) разпръскваше връзките по цялата останала ширина —
собственикът поиска вместо това да седят на нивото на логото, вдясно,
като стегната група (flex-end + нормален gap между тях, не разтеглени
едно от друго). flex:1 остава, за да продължи .footer-links-row да заема
мястото до края на реда (за да може flex-end реално да ги избута
надясно) — само подредбата вътре в него се смени. .footer-cols остава общ
контейнер за нещо под основния ред — на privacy/terms/cookies там ще
седне .footer-col "Правна информация", щом се разреже (виж бележката в
HTML) — .footer-col стиловете остават заради това, не са излишни. */
.footer-links-row{display:flex;flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:14px 28px;min-width:260px}
.footer-links-row a{text-decoration:none;font-size:15px;color:var(--ink);white-space:nowrap}
.footer-links-row a:hover{color:var(--blue)}
.footer-cols{display:flex;flex-direction:column;gap:26px}
.footer-col h3{font-family:var(--mono);font-weight:400;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:15px}
.footer-col ul{list-style:none;display:grid;gap:10px}
.footer-col a{text-decoration:none;font-size:15px;color:var(--ink)}
.footer-col a:hover{color:var(--blue)}
@media(max-width:560px){
.footer-links-row{justify-content:center;text-align:center}
}
.footer-bottom{
display:flex;justify-content:space-between;align-items:center;
gap:16px;flex-wrap:wrap;
padding-top:22px;border-top:1px solid var(--line);
font-size:14px;color:var(--muted);
}
.social{display:flex;gap:10px}
.social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:var(--muted)}
.social a:hover{border-color:var(--blue);color:var(--blue)}
.social svg{width:17px;height:17px;fill:currentColor}
/* ==========================================================================
6. ЗАНАЯТ — слоеве в първия екран и тъмна лента най-долу
Добавено, след като сравнението с intuendi.com показа, че при тях hero-то
е слоесто: снимката излиза извън контейнера, зад нея стои очертан кръг и
мек ореол. Нашето беше плоска решетка от две колони.
========================================================================== */
/* Проверих директно в кода им: кадърът им НЕ опира в десния ръб — стои
центриран в собствената си половина от реда (background-size:930px,
фиксирано число, но при 3200px екран разстоянието от кадъра до левия ръб
на колоната му е 334px, до десния — 335px, практически еднакво). "Bleed"
към ръба, който имаше тук, беше измислен, не снет от техния код — свален. */
.hero-visual{position:relative}
.hero-visual .shot{z-index:1}
/* Взето от техния действителен файл, не по усет: fetch-нах
sfondo-hero.svg и прочетох съдържанието му. Два концентрични кръга, един
и същ център — r=873 при opacity 0.5, r=437 при opacity 0.8 — върху сива
основа. Не два отделни decorative елемента (::before контур + ::after
блъснато сияние, каквото имаше тук преди — измислено, не тяхното), а един
слой на самата секция, точно както при тях (background-image на цялата
.elementor-element-45c2c49, не само зад картинката).
Цветовете са нашите (--glow-outer/--glow-inner, тонирани в --blue), не
бяло върху сиво — техниката е тяхна, палитрата си остава наша. Позицията
82% 46% отговаря на техния десен-център фокус (center 1241 от viewBox
1440 ≈ 86% хоризонтално); радиусите 55%/28% пазят съотношението 873:437. */
.hero{
background-image:
radial-gradient(circle at 82% 46%, var(--glow-inner) 0%, transparent 28%),
radial-gradient(circle at 82% 46%, var(--glow-outer) 0%, transparent 55%);
background-repeat:no-repeat;
}
/* Тъмна лента най-долу — вече ЕДИН И СЪЩ тъмен тон в двете теми, не се
обръща и не потъмнява/просветлява с темата (собственикът: първо "футърът
е светъл на тъмната тема, не се ли губи смисъла" — оправено да е тъмен и
в двете; после забеляза, че все пак леко се различаваше — светлата тема
излизаше по-тъмна от тъмната тема, защото формулата четеше var(--blue), а
тъмната тема ползва по-светла версия на акцента. Оправено: --footer-bg
вече е изведен от буквалния СВЕТЛА-тема --blue (#2C5AA0), не var(--blue)
— виж токена по-горе — така резултатът е identичен байт по байт в двете
теми, никаква зависимост от коя тема е активна). `,var(--ink)` в
background тук остава само като последен fallback, ако --footer-bg по
някаква причина не се резолвне (напр. много стар браузър без color-mix()
— тогава по-горе пада на литералния #11223D fallback, не чак дотук).
color е ЛИТЕРАЛЕН светъл тон (#F6F8FA), не var(--paper) — лентата вече не
се обръща, значи текстът трябва да остане светъл винаги, не да следва
темата. Разделителните линии са неутрално сиви, за да работят и в двата
случая. */
.site-footer{background:var(--footer-bg,var(--ink));color:#F6F8FA;border-top:0}
.site-footer .footer-top,
.site-footer .footer-bottom{border-color:rgba(128,128,128,.3)}
.site-footer .footer-links-row a,
.site-footer .footer-col a{color:currentColor;opacity:.85}
.site-footer .footer-links-row a:hover,
.site-footer .footer-col a:hover{opacity:1}
.site-footer .footer-col h3{color:currentColor;opacity:.55}
.site-footer .footer-bottom{color:currentColor;opacity:.7}
.site-footer .social a{border-color:rgba(128,128,128,.4);color:currentColor}
/* ==========================================================================
7. СТРАНИЦА — ЗА НАС (about.html)
Специфично само за тази страница — виж реда на файла в началото. Хедърът
и футърът идват от общия шел (page-shell.md), не се повтарят тук.
========================================================================== */
/* -- Блок 1: hero ---------------------------------------------------------
Фонът беше оригинална CSS градиентна композиция, докато нямаше снимка под
ръка — вече има (about-block-1.webp, доставена от собственика). Градиентът
остава като база под снимката (var(--ink) е тъмна в светла тема, светла в
тъмна тема — .about-hero нарочно е "обърнат" спрямо темата, hero изглежда
тъмно/драматично независимо от общата тема на сайта). Снимката е почти
бяла/светла абстрактна текстура — на пълна яркост би счупила контраста с
текста върху нея, затова седи на ниска opacity (само текстура, градиентът
отдолу продължава да носи контраста), а .tint-overlay отгоре ѝ дава
марковия син нюанс. За разлика от .tint-overlay на главната страница
(там само в тъмна тема, коригира стар лилав кадър), тук тонирането е
винаги включено — снимката е неутрална навсякъде, не само в тъмна тема.
data-shift-band/layer — същият паралакс механизъм като на главната
страница (по изрично желание: "снимката пак се скролва"). */
.about-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}
.about-hero-bg{position:absolute;inset:0;z-index:0}
.about-hero-bg [data-shift-layer]{
background:
radial-gradient(circle at 28% 30%, var(--glow-inner) 0%, transparent 45%),
radial-gradient(circle at 76% 68%, var(--glow-outer) 0%, transparent 55%),
var(--ink);
}
/* Лек blur (не 28px както първия опит — собственикът поиска снимката да се
вижда, не да е скрита) + малко overscale да покрие ръбовете. */
.about-hero-bg [data-shift-layer] img{opacity:.55;filter:blur(6px);transform:scale(1.05)}
.about-hero-bg .tint-overlay,
.about-team-bg .tint-overlay{display:block}
.about-hero-in{position:relative;z-index:1;padding:clamp(96px,16vw,200px) 24px clamp(72px,10vw,120px);text-align:center;max-width:900px;margin:0 auto}
/* Меко "петно" зад текста/бутоните (не text-shadow — с толкова видима
снимка отзад, тънък ореол около буквите не стигаше за контраст, особено
когато hero-то се обръща светло в тъмна тема, виж бележката горе). Радиален
градиент в цвета на самия hero фон (var(--ink)), избледняващ навън —
снимката остава напълно видима извън текстовия блок, само зад него се
къса плавно за четимост. z-index:-1 го слага зад h1/бутоните, но над
.about-hero-bg (тъй като .about-hero-in вече е на z-index:1 спрямо hero-то). */
.about-hero-in::before{
content:'';position:absolute;inset:-12% -8%;z-index:-1;
background:radial-gradient(ellipse at center, var(--ink) 0%, var(--ink) 35%, transparent 72%);
opacity:.6;
}
.about-hero-in h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,56px);line-height:1.2;letter-spacing:normal;text-wrap:balance;margin:0 0 32px}
.about-hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
/* .btn-ghost съществуваше преди, паднал при чистенето на старата CTA секция
(Phase 24) — трябва отново, за вторичния бутон тук ("Свържете се с нас").
currentColor вместо var(--ink), защото седи върху тъмния hero фон, не
върху нормален панел. */
.btn-ghost{
display:inline-block;text-decoration:none;
font-family:var(--body);font-weight:600;font-size:16px;
padding:14px 28px;border-radius:999px;
border:1.5px solid currentColor;color:currentColor;background:none;
white-space:nowrap;cursor:pointer;
}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
/* -- Блок 2: история --------------------------------------------------- */
.about-history{padding:clamp(64px,9vw,120px) 0;background:var(--panel);border-top:1px solid var(--line);text-align:center}
.about-history-in{max-width:70ch;margin:0 auto}
.about-history-in p{color:var(--muted);font-size:17px;line-height:1.7}
/* -- Блок 3: числата -----------------------------------------------------
Не буквалният Venn/припокриващи-се кръгове на intuendi.com (собственикът
изрично поиска "не баш същия") — тук всяко число е в собствен пръстен,
редуващите се плочки леко отместени надолу, за да не е плосък еднакъв
ред. Реални, проверени числа от McKinsey (виж бележката в about.html при
.numbers-note) — не измислени. */
.about-numbers{padding:clamp(64px,9vw,120px) 0;background:var(--paper);border-top:1px solid var(--line);text-align:center}
.about-numbers h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,34px);margin:0 0 clamp(40px,6vw,64px)}
.numbers-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(24px,4vw,56px)}
.number-tile{
display:flex;flex-direction:column;align-items:center;justify-content:center;
width:clamp(140px,18vw,180px);height:clamp(140px,18vw,180px);
border-radius:50%;
background:radial-gradient(circle,var(--blue-soft) 0%,transparent 72%);
border:1px solid var(--line);
}
.number-tile:nth-child(even){margin-top:28px}
.number-tile strong{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,38px);color:var(--blue)}
.number-tile span{font-size:13.5px;color:var(--muted);max-width:20ch;margin-top:6px;text-align:center}
.numbers-note{margin:clamp(32px,5vw,48px) auto 0;max-width:70ch;font-size:13px;color:var(--muted)}
.numbers-note a{color:var(--muted);text-decoration:underline}
/* -- Блок 4: екип ----------------------------------------------------------
Не вертикален "албум"/карусел като при intuendi.com (собственикът не го
хареса) — но снимката трябва да е голяма като тяхната, не малка карта.
Затова: текст+снимка едно до друго (като hero), не card в рамка; членовете
един под друг, докато има повече от един. Първата версия (малка card
снимка 96-140px) изглеждаше "мега жалко" по думите на собственика —
вдигнато сериозно, почти колкото founder-shot секцията.
ВНИМАНИЕ: zarin.png е 288×288 — единствената налична снимка, не заснета за
толкова голям показ. При ~360px показ това е ~1.25× overscale, леко меко,
но не пикселизирано. По-висока резолюция ще стане нужна, ако снимката
порасне още, или при нов човек в екипа. */
.about-team{position:relative;overflow:hidden;padding:clamp(64px,9vw,120px) 0;background:var(--panel);border-top:1px solid var(--line)}
/* Фон зад "Екипът" — about-block-2.webp, същата логика като hero-снимката
по-горе: ниска opacity (само текстура върху var(--panel), не пълна
снимка), марковият син тон отгоре през .tint-overlay (форсиран винаги
видим, виж правилото при .about-hero-bg по-горе), същият паралакс. Текстът
и снимката на екипа седят в .wrap-narrow, вдигнат над фона с z-index. */
.about-team-bg{position:absolute;inset:0;z-index:0}
.about-team-bg [data-shift-layer] img{opacity:.4;filter:blur(6px);transform:scale(1.05)}
.about-team > .wrap{position:relative;z-index:1}
/* Собственикът: без сенки/петна тук, "Екипът" се вижда достатъчно и без тях
— обикновен плътен текст върху тонираната снимка е достатъчен контраст,
по-просто и по-сигурно от градиентни петна. var(--ink) вместо буквален
бял цвят — той автоматично е тъмен в светла тема, светъл в тъмна (черно
на светло, бяло на тъмно, точно каквото поиска собственикът), докато
буквалният #fff беше нечетим в светла тема. */
.about-team h2{
color:var(--ink);
font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,34px);text-align:center;margin:0 0 clamp(40px,6vw,64px);
}
.team-list{display:grid;gap:clamp(56px,8vw,96px)}
.team-member{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;
}
.team-member:nth-child(even){direction:rtl}
.team-member:nth-child(even) > *{direction:ltr}
/* aspect-ratio:1/1, не фиксирана height — zarin.png самата е квадратна
(288×288). С фиксирана height кутията излизаше по-широка от висока
(landscape), а object-fit:cover режеше горе/долу — точно оплакването
"кропната през челото". При квадратна кутия, съвпадаща със съотношението
на самата снимка, cover показва снимката ЦЯЛА, без никакво отрязване —
cover и contain стават едно и също, когато пропорциите съвпадат.
border-radius вдигнат до 28px (по-заоблено, изрично поискано), не общия
--radius (10px, твърде остро за толкова голям елемент). */
.team-photo{width:100%;aspect-ratio:1/1;height:auto;border-radius:28px;object-fit:cover;box-shadow:var(--shadow)}
/* Без петна/сенки (собственикът: "не искам никакви други тъпотии") — само
плътен текст, по-едър от преди, директно върху тонираната снимка.
var(--ink) навсякъде вместо буквален бял цвят — черно в светла тема,
бяло в тъмна, автоматично (виж бележката при .about-team h2 по-горе). */
.team-name{color:var(--ink);font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,38px);margin:0}
.team-role{color:var(--ink);font-size:17px;font-weight:600;margin:8px 0 16px}
.team-bio{color:var(--ink);opacity:.82;font-size:17px;line-height:1.6;margin:0 0 20px;max-width:52ch}
.team-linkedin{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border:1.5px solid var(--ink);border-radius:50%;
background:none;color:var(--ink);text-decoration:none;
}
.team-linkedin:hover{background:var(--ink);color:var(--panel)}
.team-linkedin svg{width:18px;height:18px;fill:currentColor}
@media(max-width:720px){
.team-member,.team-member:nth-child(even){grid-template-columns:1fr;direction:ltr;text-align:center}
.team-bio{margin-left:auto;margin-right:auto}
}
.site-footer .social a:hover{border-color:currentColor}
/* ==========================================================================
8. ПРАВНИ СТРАНИЦИ (privacy.html, terms.html, cookies.html)
Прост, четим лейаут — не hero със снимка/паралакс като другите страници,
тук съдържанието е самият текст, не визия. Общо за трите: къс хедър с
заглавие + дата на последна редакция, после проза в тесен четим стълб
(.wrap-narrow), разделена на секции с h2.
========================================================================== */
.legal-hero{padding:clamp(56px,9vw,96px) 0 clamp(32px,5vw,48px);border-bottom:1px solid var(--line)}
.legal-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,44px);line-height:1.2;margin:10px 0 14px}
.legal-updated{color:var(--muted);font-size:14px}
.legal-body{padding:clamp(40px,6vw,64px) 0 clamp(80px,10vw,120px)}
/* Предупредителна плашка — не декорация, а функционална граница между
"чернова, генерирана от AI помощник" и "правно обвързващ текст". Стои в
началото на трите страници, вижда се без да се търси, изчезва само след
изричен коментар/премахване от собственика, след преглед от юрист. Жълт
тон нарочно, различен от марковото синьо — предупреждение, не бранд
елемент. */
.legal-notice{
display:flex;gap:14px;align-items:flex-start;
background:rgba(230,162,60,.12);border:1.5px solid rgba(230,162,60,.5);
border-radius:var(--radius);padding:18px 20px;margin-bottom:clamp(40px,6vw,56px);
font-size:14.5px;line-height:1.6;color:var(--ink);
}
.legal-notice strong{display:block;margin-bottom:4px;font-size:15px}
.legal-section{max-width:74ch;margin:0 auto clamp(40px,5vw,56px)}
.legal-section:last-child{margin-bottom:0}
.legal-section h2{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.2vw,24px);margin:0 0 14px}
.legal-section h3{font-family:var(--body);font-weight:600;font-size:16px;margin:20px 0 8px}
.legal-section p{margin:0 0 14px}
.legal-section p:last-child{margin-bottom:0}
.legal-section ul,.legal-section ol{margin:0 0 14px;padding-left:22px}
.legal-section li{margin-bottom:8px}
.legal-section a{color:var(--blue);text-decoration:underline}
.legal-section strong{font-weight:600}
/* Плейсхолдър за факти, специфични за фирмата (ЕИК, адрес, компетентен съд
и т.н.), които не мога да знам/измисля — видимо различни от готовия текст
и в четения изглед, не само в HTML коментар, за да не могат да минат
случайно необърнати в публикация. */
.legal-todo{background:rgba(217,68,68,.12);border:1px dashed rgba(217,68,68,.6);border-radius:6px;padding:1px 7px;color:#B03A3A;font-weight:600;white-space:normal}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .legal-todo{color:#FF9B9B}}
:root[data-theme="dark"] .legal-todo{color:#FF9B9B}
.legal-toc{list-style:none;display:grid;gap:8px;margin:0 0 clamp(40px,5vw,56px);padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
/* ==========================================================================
9. СТРАНИЦА — КОНТАКТИ (contact.html)
Единствената страница с истинска форма (POST към /contact, Cloudflare
Pages Function → Resend → contact@prognautix.com). Работи и без JS
(обикновен form POST, функцията връща цяла HTML "благодарим" страница) и
с JS (fetch, inline съобщение без презареждане — виж contact.html за
логиката). Полетата следват native HTML5 валидация (required, type=email/
tel) — работи без JS, `:focus-visible` вече е глобален за клавиатурна
навигация, всяко поле си има истински .
========================================================================== */
/* Фонови снимки зад hero-то на contact.html/demo.html — собственикът:
двата блока "си бяха лика-прилика", лесно за объркване коя страница е
коя. Доставени 2 различни снимки (contact-hero-bg.webp/demo-hero-bg.webp),
същият механизъм като about-hero-bg по-горе: data-shift-band паралакс,
ниска opacity + blur (само текстура, не пълна снимка), .tint-overlay
форсиран винаги видим (не само тъмна тема — снимките са неутрални и в
двете). За разлика от about-hero, тук НЯМА обърнат тъмен фон — секцията
си остава нормална (var(--paper) фон, var(--ink) текст), затова не трябва
и допълнителен scrim зад текста — ниският opacity + blur пази четимостта
директно върху обичайния светъл/тъмен фон на страницата. */
/* Собственикът: "защо ги третираш като 2 блока — те са 1 блок общо, искам
снимката да стига до футъра долу". .contact-page-bg е общият контейнер
(hero + форма заедно) — .contact-hero-bg вече е absolute спрямо НЕГО, не
спрямо .contact-hero самостоятелно, значи inset:0 обхваща комбинираната
височина на двата блока, не спира в края на hero-то.
вече е с flex:1 (виж body правилото по-горе, sticky footer
фикс) — на по-къси страници се разтяга да опре футъра в дъното на
прозореца. Само това обаче НЕ стигаше: самото .contact-page-bg
(обикновен блок) не наследяваше тази разтегната височина — оставаше си
с интринзичната си (по съдържание), а под него зейваше същият body фон,
само че вече МЕЖДУ формата и футъра вместо под футъра (собственикът го
хвана: "сега стои между футъра и блока"). Опитът с min-height:100%
не проработи надеждно (процентна височина на дете на flex-item не се
смята винаги за definite от браузъра) — затова main.page-fill прави
самият flex контейнер (само на contact.html/demo.html, чрез
класа) и .contact-page-bg получава flex:1 директно — гарантирано
запълва разтегнатата височина, снимката/тонирането стигат чак до
футъра, без фуга, на всякаква височина на прозореца. */
main.page-fill{display:flex;flex-direction:column}
main.page-fill>.contact-page-bg{flex:1 0 auto}
.contact-page-bg{position:relative;overflow:hidden}
.contact-hero-bg{position:absolute;inset:0;z-index:0}
.contact-hero-bg [data-shift-layer] img{opacity:.35;filter:blur(6px);transform:scale(1.05)}
.contact-hero-bg .tint-overlay{display:block}
.contact-hero,.contact-body{position:relative;z-index:1}
.contact-hero{padding:clamp(56px,9vw,96px) 0 clamp(24px,4vw,36px)}
.contact-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,44px);line-height:1.2;margin:10px 0 14px}
.contact-hero p{color:var(--muted);font-size:17px;max-width:60ch}
.contact-body{padding:0 0 clamp(80px,10vw,120px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(32px,5vw,64px);align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.required-note{font-size:13px;color:var(--muted);margin:0}
.contact-form{display:grid;gap:20px}
.contact-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.contact-form .field-row{grid-template-columns:1fr}}
.field{display:grid;gap:7px}
.field label{font-size:14.5px;font-weight:600}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{
font-family:var(--body);font-size:16px;color:var(--ink);
background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);
padding:12px 14px;width:100%;
}
.field textarea{resize:vertical;min-height:120px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
border-color:var(--blue);outline:3px solid var(--blue);outline-offset:1px;
}
/* Реален бъг, открит при проверка: `:not(:placeholder-shown)` изискваше
истински `placeholder` атрибут на всяко поле, за да проработи — без него
`:placeholder-shown` никога не съвпада, значи `:not(:placeholder-shown)`
винаги е вярно и ВСИЧКИ празни задължителни полета светваха червено
веднага при зареждане, преди потребителят изобщо да пипне нещо (``
го нямаше дори това полу-решение — светеше червено безусловно). Сменено с
клас `.touched`, слаган от site.js при `blur` (виж initContactForm) —
работи еднакво за input/select/textarea, не разчита на `placeholder`. */
.field input.touched:invalid,
.field select.touched:invalid,
.field textarea.touched:invalid{border-color:#D9534F}
/* Honeypot — скрито от истински посетители, но НЕ display:none (ботовете
пропускат display:none полета по-често) — извън екрана, извън tab реда,
извън screen reader-а. Полето се казва "website", защото автоматичните
попълвачи на ботове масово го хващат по това име. */
.field-trap{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.contact-submit{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.contact-submit .btn{border:none;cursor:pointer;font-family:inherit}
.form-status{font-size:14.5px;font-weight:600;padding:10px 16px;border-radius:var(--radius);display:none}
.form-status.is-ok{display:block;background:rgba(60,160,90,.12);color:#2E8B4E}
.form-status.is-err{display:block;background:rgba(217,68,68,.12);color:#B03A3A}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) .form-status.is-ok{color:#7FD99B}
:root:not([data-theme="light"]) .form-status.is-err{color:#FF9B9B}
}
:root[data-theme="dark"] .form-status.is-ok{color:#7FD99B}
:root[data-theme="dark"] .form-status.is-err{color:#FF9B9B}
.contact-aside{
background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(24px,3vw,32px);display:grid;gap:20px;align-content:start;
}
.contact-aside h2{font-family:var(--display);font-weight:400;font-size:20px;margin:0}
.contact-aside a{color:var(--blue);text-decoration:none;font-weight:600}
.contact-aside a:hover{text-decoration:underline}
.contact-aside p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0}
.contact-consent{font-size:13px;color:var(--muted);line-height:1.5}
.contact-consent a{color:var(--muted);text-decoration:underline}
.legal-toc a{font-size:14.5px}
/* Собственикът: на тъмна тема "Fill out the form...", "* required field" и
"By submitting this form..." не се виждат хубаво, няма контраст. Трите
седят директно върху снимката (.contact-hero-bg) — var(--muted) в тъмна
тема е светло сиво-синьо (#93A0B0), почти същия тон като замъглената,
тонирана снимка отдолу, затова се губи. .contact-aside НЕ е засегнат —
той седи върху плътната --panel карта, не върху снимката, там
контрастът си е наред. Вдигаме тона към почти бяло + лека text-shadow,
независимо от локалната яркост на снимката под текста. */
:root[data-theme="dark"] .contact-page-bg .contact-hero p,
:root[data-theme="dark"] .contact-page-bg .required-note,
:root[data-theme="dark"] .contact-page-bg .contact-consent,
:root[data-theme="dark"] .contact-page-bg .contact-consent a{
color:#D7DEE6;text-shadow:0 1px 4px rgba(0,0,0,.45);
}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) .contact-page-bg .contact-hero p,
:root:not([data-theme="light"]) .contact-page-bg .required-note,
:root:not([data-theme="light"]) .contact-page-bg .contact-consent,
:root:not([data-theme="light"]) .contact-page-bg .contact-consent a{
color:#D7DEE6;text-shadow:0 1px 4px rgba(0,0,0,.45);
}
}