/* hero.css — Version: 1.6.1 Hero slider — извлечено от _not_for_git/preview/home-redesign.html (секция "Предстоящи събития"). !important навсякъде заради Elementor Kit конфликта (виж header-menu.css за обяснение). */ /* Надписът над заглавието. Един размер за целия сайт: беше 13px в заглавните блокове и 15px в секциите, и разликата личеше при преминаване от страница към страница. Разредката е пропорционална (.08em), затова следва размера сама. Изключение е само баджът в банера — той е бутон, не надпис. */ .eyebrow { font-size: 15px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #F37B1F !important; margin: 0 0 10px !important; } h1.hero-h1, .hero .hero-text-panel h2 { font-size: 44px !important; line-height: 1.15 !important; margin: 0 0 20px !important; font-weight: 800 !important; color: #362A4B !important; } .lead { font-size: 16px !important; line-height: 1.65 !important; color: #6B5D82 !important; max-width: 62ch !important; } /* .btn* класовете стоят на Elementor widget wrapper-а на Button widget-а (loop-item темплейти), не директно на — таргетираме вложения .elementor-button. */ .btn .elementor-button, a.elementor-button.btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 14px 26px !important; border-radius: 3px !important; line-height: normal !important; font-size: 15px !important; font-weight: 600 !important; white-space: nowrap !important; } .btn-primary .elementor-button { background: #FF1A4B !important; color: #fff !important; } .btn-primary .elementor-button:hover { background: #E5133F !important; } .btn-ghost .elementor-button { background: #fff !important; color: #69528E !important; border: 1.5px solid #DED0EA !important; } .btn-ghost .elementor-button:hover { border-color: #69528E !important; } /* isolation:isolate — hero-ът става собствен stacking context. Без него вътрешният `z-index:2` на контейнера излиза в root контекста, мери се срещу хедър секцията (z-index:1) и печели: hero-ът поема рисуването И хит-теста върху зоната на падащите менюта. Следствие беше, че подменю не можеше да се достигне — курсорът влизаше в hero-а, `:hover` на плочката отпадаше и менюто се затваряше (проверено с hit-тест: 12 от 12 точки в подменюто връщаха hero елемент; с isolation — подменюто). */ .hero { background: #241A36 url('img/test_cover2.jpg') 70% center/cover no-repeat !important; color: #fff !important; position: relative !important; isolation: isolate !important; overflow: hidden !important; padding: 0 !important; } .hero::before { content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; background: linear-gradient(90deg, #3C2E56 0%, #3C2E56 35%, rgba(60,46,86,.35) 65%, rgba(60,46,86,0) 92%) !important; } /* `>` (не descendant) — иначе max-width/min-height удрят и вложените контейнери на loop-item-ите (засечено: контейнерът на снимката получаваше min-height 530px). */ .hero > .elementor-container { position: relative !important; z-index: 2 !important; max-width: 1300px !important; min-height: 530px !important; } /* .hero-left/.hero-right са Elementor column root-ове; реалният flex контрол на съдържанието им е в .elementor-widget-wrap едно ниво по-навътре. */ .hero-left { position: relative !important; z-index: 2 !important; } /* > (не descendant селектор) — иначе удря всеки вложен .elementor-widget-wrap в hero-left (напр. вътре в .hero-list-item .d), раздувайки ги с тия padding-и. */ .hero-left > .elementor-widget-wrap { padding: 90px 40px 110px 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; } /* Три Elementor default-а раздуваха hero с 310px спрямо мокъпа (измерено 2026-10-02, headless Chrome 1400×920: .hero 937.3px срещу 626.9px). Нулират се САМО вътре в loop-item-ите — горният `.hero-left > .elementor-widget-wrap` пази своите 90/110. 1. `.elementor-element-populated{padding:10px}` на всяко вложено гнездо (панел, hero-meta, cta-row, hero-list-item) = +20px × 4. 2. Kit `--widgets-spacing` → `margin-bottom:20px` на всеки widget без последния; във flex-row (.d, .tag, .btn) раздува кръстосания размер на линията, не само отстоянието. 3. Наследеният `line-height:1.7` (parity блока в style.css) стига до heading контейнерите, където мокъпът е на `normal`: бадж 55.25 вместо 44, `.d` 20.4 вместо 14. */ .hero-left .e-loop-item .elementor-widget-wrap, .hero-right .e-loop-item .elementor-widget-wrap { padding: 0 !important; } .hero-left .e-loop-item .elementor-widget, .hero-right .e-loop-item .elementor-widget { margin-bottom: 0 !important; } /* Heading widget-ите рендират

, който получава `margin: 0 0 .7em` от parity блока в style.css — 22.75px при баджа (32.5px), 7.7px при label-а. Мокъпът е обикновен текст без

. */ .hero .elementor-heading-title { margin: 0 !important; } /* Нулирането по-горе (3 класа) бие собствените margin-и на тези два елемента — връщат се с префикс, за да стоят по-специфични от него. */ .hero-left .e-loop-item .hero-eyebrow-badge { margin-bottom: 12px !important; } .hero-left .e-loop-item .lead { margin: 14.5px 0 !important; } /* И на `.elementor-heading-title`, не само на контейнера — Elementor Kit-ът слага line-height директно на заглавния елемент (засечено: бадж 55.25px при container `normal`). */ .hero-eyebrow-badge .elementor-widget-container, .hero-eyebrow-badge .elementor-heading-title, .hero-meta .tag .elementor-widget-container, .hero-meta .tag .elementor-heading-title, .hero-list-label .elementor-widget-container, .hero-list-label .elementor-heading-title { line-height: normal !important; } .hero-list-item .d .elementor-widget-container, .hero-list-item .d .elementor-heading-title { line-height: 14px !important; } .hero-list-item .t .elementor-widget-container { line-height: 1.35 !important; } /* Заглавието на панела слезе от H1 на H2 (на страницата трябва да има едно H1). `min-height` държи височината на панела постоянна при смяна на кадъра, затова правилото е САМО за панела — `.hero h1` отпадна от групата, когато в hero-а влезе истинското H1 на страницата (виж блока по-долу). */ .hero .hero-text-panel h2.elementor-heading-title { color: #fff !important; font-size: 23px !important; line-height: 1.22 !important; margin: 0 0 1px !important; min-height: 58px !important; } /* Заглавието на СТРАНИЦАТА. Статична Heading джаджа (`mkheroh1`) преди loop-grid-а, тоест извън цикъла — едно H1, не по едно на събитие. Стои на свой клас, защото `.hero h1` носеше мерките на заглавието на панела: 23px и min-height 58px. Няма мобилен вариант — съседът му (заглавието на панела) също няма, а размерът се извежда от отношението към него. Джаджата е извън loop-item-ите, затова нулирането на `--widgets-spacing` по-горе не я хваща и Kit-ът ѝ добавя още 20px под 14-те на заглавието. Отстоянието е едно. */ .hero .hero-page-h1 { margin-bottom: 0 !important; } .hero .hero-page-h1 .elementor-heading-title { color: #fff !important; font-size: 26px !important; line-height: 1.28 !important; font-weight: 800 !important; margin: 0 0 14px !important; min-height: 0 !important; } /* Собствени margin-и там, където Elementor-ските са нулирани по-горе — мокъпът ги получава от default-ните `p` margin-и (14.5px при font-size 14.5). */ .hero .lead { color: #fff !important; min-height: 20px !important; font-size: 14.5px !important; margin: 14.5px 0 !important; } /* `width:max-content` — Elementor дава на widget-а width:100%, а `.elementor-widget-wrap` е flex контейнер, в който `inline-block` се блокифицира. Затова контурът опъваше цялата колона (580px) и оставяше ~105px празно вдясно от текста при ~25px вляво. `color:#fff` — мокъпът го носи като inline стил върху същия елемент (ред 480 на home-redesign.html); без него баджът наследява оранжевото на `.eyebrow`. */ .hero-eyebrow-badge { display: inline-block !important; width: max-content !important; max-width: 100% !important; align-self: flex-start !important; color: #fff !important; padding: 10px 24px !important; border: 1.5px solid rgba(255,255,255,.5) !important; border-radius: 3px !important; margin: 0 0 10px !important; } .hero-eyebrow-badge .elementor-heading-title { color: #fff !important; } .hero-eyebrow-badge.eyebrow { margin: 0 0 12px !important; font-size: 32.5px !important; } .hero-text-panel { display: none !important; } .hero-text-panel.active { display: block !important; } .hero-meta .tag-date .elementor-heading-title::before, .hero-meta .tag-city .elementor-heading-title::before, .hero-list-item .d .elementor-heading-title::before { display: none !important; } .hero-meta .tag.tag-date::before, .hero-meta .tag.tag-city::before { content: "" !important; display: inline-block !important; width: 13px !important; height: 13px !important; background-color: currentColor !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-size: contain !important; mask-size: contain !important; } .hero-meta .tag.tag-date::before { -webkit-mask-image: url('data:image/svg+xml;utf8,') !important; mask-image: url('data:image/svg+xml;utf8,') !important; } .hero-meta .tag.tag-city::before { -webkit-mask-image: url('data:image/svg+xml;utf8,') !important; mask-image: url('data:image/svg+xml;utf8,') !important; } @media (max-width: 600px) { .hero-eyebrow-badge.eyebrow { font-size: 20px !important; padding: 7px 16px !important; } } .hero-meta { display: block !important; margin: 2px 0 10px !important; } .hero-meta .elementor-widget-wrap { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; } .hero-meta .elementor-widget-wrap > .elementor-element { width: auto !important; flex: 0 0 auto !important; } .meta-pair { display: flex !important; align-items: center !important; gap: 6px !important; } .meta-divider { width: 1px !important; height: 18px !important; background: rgba(255,255,255,.45) !important; } .hero-meta .tag { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #fff !important; color: #362A4B !important; font-weight: 700 !important; font-size: 12px !important; padding: 6px 12px !important; border-radius: 3px !important; white-space: nowrap !important; } .hero .cta-row { display: block !important; margin-bottom: 10px !important; } .hero .cta-row .elementor-widget-wrap { display: flex !important; flex-direction: row !important; gap: 12px !important; flex-wrap: wrap !important; } .hero .cta-row .elementor-widget-wrap > .elementor-element { width: auto !important; flex: 0 0 auto !important; } .hero .btn .elementor-button { padding: 11px 20px !important; font-size: 14px !important; } .hero-list { border-top: 1px solid rgba(255,255,255,.16) !important; padding-top: 12px !important; } .hero-list-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: #fff !important; margin-bottom: 6px !important; } /* .hero-list-item/.hero-meta/.cta-row/.d стоят на Elementor section root-а (loop-item темплейти) — реалната flex подредба на съдържанието им е в .elementor-widget-wrap едно ниво по-навътре. */ .hero-list-item { display: block !important; width: 100% !important; text-align: left !important; background: none !important; border: 0 !important; border-left: 2px solid rgba(255,255,255,.15) !important; padding: 7px 0 7px 16px !important; cursor: pointer !important; color: #DCD2EA !important; } .hero-list-item .elementor-widget-wrap { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 14px !important; min-width: 0 !important; } .hero-list-item .elementor-widget-wrap > .elementor-element { width: auto !important; flex: 0 0 auto !important; } /* flex-basis:0 (не auto) — .t се свива до наличното място вместо да иска пълната естествена ширина на заглавието, което с flex-wrap:wrap бутваше целия елемент на нов ред при по-дълги заглавия (засечено: w=522px при контейнер ~460px). */ /* Селекторът носи `.elementor-widget-wrap > .elementor-element`, за да е поне толкова специфичен, колкото правилото за `.d` един ред по-горе. Иначе `.t` оставаше `flex:0 0 auto`, вземаше естествената ширина на цялото заглавие (до x=764.5 при колона, свършваща на 644.5) и лягаше върху снимката, вместо да се пренася на втори ред. */ .hero-list-item .elementor-widget-wrap > .elementor-element.t { min-width: 0 !important; flex: 1 1 0 !important; } /* .d вече е единичен heading widget (1 custom dynamic tag "18 юли · София"), не вложена секция с 3 widget-а — опростено след layout проблеми с nested flex. */ .hero-list-item .d { background: #fff !important; color: #362A4B !important; font-weight: 700 !important; font-size: 12px !important; padding: 5px 10px !important; border-radius: 3px !important; white-space: nowrap !important; width: max-content !important; } .hero-list-item .t { font-size: 13.5px !important; line-height: 1.35 !important; color: #EDE7F5 !important; } .hero-list-item:hover { border-left-color: rgba(255,255,255,.5) !important; } .hero-list-item.active { border-left-color: #F37B1F !important; background: rgba(255,255,255,.06) !important; } .hero-list-item.active .t { color: #fff !important; font-weight: 600 !important; } .hero-list-item:hover .d, .hero-list-item.active .d { color: #C2600A !important; } /* hero-right НЕ носи position:relative — containing block-ът на .hero-photo е .hero (section root-ът, стабилна min-height от .elementor-container по-горе). Ако hero-right е positioned, Loop Grid wrapper-ът вътре я раздува на височина и снимката изчезва извън видимата зона (засечено чрез getBoundingClientRect: h=2557px, top=2725px). */ /* Всички предци на `.hero-photo` трябва да са `position:static`, за да се върже тя за `.hero` (единствената кутия с реална височина). Elementor слага `position:relative` на колоната, на widget-wrap-а и на widget-а — при нулирана височина (правилата по-долу) абсолютната снимка се връзваше за кутия с h=0 и излизаше НАД hero-а (засечено: top=-362px, clip-ната от `.hero{overflow:hidden}` — снимката изобщо не се виждаше). */ .hero-right, .hero-right > .elementor-widget-wrap, .hero-right .elementor-widget-loop-grid { position: static !important; } .hero-right { overflow: visible !important; } .hero > .elementor-container { align-items: flex-start !important; } /* Elementor Loop Grid-ът (CSS grid skin) на .elementor-loop-container/.e-loop-item правеше .hero-right изкуствено висок колкото .hero-left (flex stretch по подразбиране + grid auto-row sizing) — засечено: widget-wrap h=2557px. display:block вместо grid връща естествена височина на съдържанието от двете страни. */ .hero-left .elementor-loop-container, .hero-right .elementor-loop-container, .hero-left .e-loop-item, .hero-right .e-loop-item { display: block !important; } .hero-right .elementor-column.hero-right, .hero-right.elementor-column, .hero-right .elementor-widget-wrap { height: auto !important; min-height: 0 !important; } /* Същият stretch бъг (Elementor default height:100%/min-height по вертикалните нива) се повтаря на всяко вложено ниво в hero-left (засечено в .hero-list-item .d — цяла вертикална бяла кутия вместо малка хоризонтална пила). Нулираме навсякъде в hero-left. */ .hero-left .elementor-column, .hero-left .elementor-container, .hero-left .elementor-widget-wrap, .hero-left .elementor-section { height: auto !important; min-height: 0 !important; } .hero-photo { position: absolute !important; top: 0 !important; bottom: 0 !important; right: 0 !important; width: 50% !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; opacity: 0 !important; transition: opacity .35s ease !important; pointer-events: none !important; } .hero-photo.active { opacity: 1 !important; } /* Кадърът е кръг с диаметър 500: `cover` маскира излишното вместо да свива снимката, затова лицето остава в същия размер. Бордерът е ОТВЪН — `content-box` го държи извън петстотинте, тоест общият габарит е 520. */ .hero-photo img { width: 500px !important; height: 500px !important; max-width: 500px !important; max-height: 500px !important; object-fit: cover !important; display: block !important; box-sizing: content-box !important; border-radius: 50% !important; border: 10px solid rgba( 255, 255, 255, .5 ) !important; } /* ── Резерв срещу подскачането при зареждане ────────────────────────── Измерено: списъкът е 152px (три реда по 50/50/38), а до идването на Onest стои по-нисък — оттам идваше 0.10 CLS на началната страница. Резервът се заделя предварително, за да не се набавя след шрифта. */ .hero-list { min-height: 152px !important; } .hero-list-item { min-height: 50px !important; } /* Реалната височина на секцията е 696px при резерв 530 — разликата се добавяше накрая и буташе всичко под hero-а. */ .hero > .elementor-container { min-height: 696px !important; } /* ── редът в списъка е бутон, не ивица ────────────────────────────── Подсветката минаваше през цялата колона: при смяна на слайда през банера пробягваше лента, широка колкото него. Сега фонът е на самото съдържание на реда — датата и заглавието заедно — широк колкото тях и висок колкото реда. Полето слиза в бутона, затова редът запазва големината си за посочване. */ .hero-list-item { padding-top: 2px !important; padding-bottom: 2px !important; } /* Три класа, защото `.hero-left .e-loop-item .elementor-widget-wrap` по-горе нулира полето със същата дълбочина. */ .hero-left .hero-list-item .elementor-widget-wrap, .hero-right .hero-list-item .elementor-widget-wrap { display: inline-flex !important; width: auto !important; /* Без това дълго заглавие разпъва реда извън колоната: с inline-flex ширината идва от съдържанието, не от родителя. */ max-width: 100% !important; padding: 9px 18px !important; border-radius: 2px !important; transition: background-color .18s ease !important; } /* Фонът на целия ред отпада — иначе се вижда и под бутона. */ .hero-list-item.active { background: none !important; } .hero-left .hero-list-item:hover .elementor-widget-wrap, .hero-right .hero-list-item:hover .elementor-widget-wrap { background: rgba(255,255,255,.1) !important; } .hero-left .hero-list-item.active .elementor-widget-wrap, .hero-right .hero-list-item.active .elementor-widget-wrap { background: rgba(255,255,255,.16) !important; } /* Колоната вътре в реда е 100% широка — бутонът не може да се свие под нея. Затова тя също взема ширината на съдържанието си, а редът си остава широк колкото колоната (кликва се навсякъде по него). */ .hero-list-item > .elementor-container { display: flex !important; justify-content: flex-start !important; } .hero-list-item > .elementor-container > .elementor-column { width: auto !important; max-width: 100% !important; flex: 0 1 auto !important; } /* Чертата над списъка подчертава надписа над него, затова е дълга колкото него, а не колкото колоната. */ .hero-list { border-top: 0 !important; padding-top: 0 !important; } .hero-list-label .elementor-heading-title { display: inline-block !important; padding-bottom: 7px !important; border-bottom: 1px solid rgba(255,255,255,.28) !important; } .hero-list-label { margin-bottom: 10px !important; } /* ══ ТЕЛЕФОН ═══════════════════════════════════════════════════════════ На широк екран кадърът стои абсолютно позициониран вдясно и заема половината банер. При 390px същото правило го слага върху текста: списъкът със събития минаваше под лицето на лекаря и не се четеше. Тук кадърът излиза от абсолютното позициониране, застава пръв и се смалява до 150 — колкото да се види кой гостува, без да изяде екрана. Текстът получава цялата ширина. */ @media (max-width: 767px) { .hero > .elementor-container { flex-direction: column !important; min-height: 0 !important; } .hero-right { order: -1 !important; width: 100% !important; } .hero-left { width: 100% !important; } /* Трите кадъра са в Loop Grid — само активният се показва. Докато са абсолютни, невидимите не заемат място; в потока трябва да паднат изрично, иначе се редят един под друг. */ .hero-photo { display: none !important; position: static !important; width: 100% !important; justify-content: center !important; } .hero-photo.active { display: flex !important; } .hero-photo img { width: 150px !important; height: 150px !important; max-width: 150px !important; max-height: 150px !important; border-width: 5px !important; } .hero > .elementor-container > .elementor-column > .elementor-element-populated { padding: 22px 18px !important; } /* Воалът е мярка за широк екран, където текстът лежи върху светлата половина на снимката. На телефон кадърът е отделно, затова слоят само потъмнява фона — и трябва да е равномерен. */ .hero::before { background: rgba( 36, 26, 54, .55 ) !important; } .hero-list { min-height: 0 !important; } } /* ── таблет: кадърът се свива, но остава вдясно ───────────────────── При 768 има място за две колони, само че кръг от 520 изяжда едната: списъкът със събития оставаше под лицето. 280 се побира в дясната половина, без да стига до текста. */ @media (min-width: 768px) and (max-width: 1024px) { .hero-photo img { width: 280px !important; height: 280px !important; max-width: 280px !important; max-height: 280px !important; border-width: 7px !important; } .hero-photo { width: 44% !important; justify-content: center !important; } .hero > .elementor-container { min-height: 520px !important; } }