/* ============================================================ hero-slides.css — четимост на името върху hero-то История накратко, за да не се преоткрива: а) Първо страничен затъмнен градиент под лявата колона (--veil-side), измерен на ръка за всеки кадър. Работеше, но всеки нов кадър искаше ново измерване, а на 24.08.2026 се оказа и визуално тежко, усещане за тъмни очила върху цялата снимка. б) Пробвани и отхвърлени на 24.08.2026: автоматична смяна на целия надпис между бял и тъмен текст по средната яркост зад него (не достатъчно, зоната зад текста е едновременно светла и тъмна на всеки кадър, един плосък цвят не може да печели навсякъде) и истински blend mode, пиксел по пиксел (технически безупречен контраст, но шарен цвят върху наситена екипировка). в) Матово стъкло само зад буквите, прието същия ден, после отхвърлено вечерта: Лора го поиска максимално невидимо, доизгладено два пъти (без сиво петно, без плътен цвят), но накрая предпочете изобщо без него, чисто заради усещането, не заради четимост. г) ЗАКЛЮЧЕНО на 24.08.2026 вечерта: името е центрирано, ниско, много по-широко от началния вариант (около три четвърти от ширината), а четимостта я носи самата пелена .veil, задълбочена долу, вместо отделна форма отгоре. Цитатът е махнат от hero-то същия ден, за да остане само един типографски глас. Лявата подредба и стъклото остават само като история в този файл и в S3_Снимки/… записите, кодът им е изтрит, за да не тежи в проекта. --veil-boost остава, той захранва .veil, вертикалното затъмняване горе-долу за хедъра, футъра, баджа и кредита, отделен въпрос от четимостта на името. */ .hero.cine{ --ink-rgb:10,18,22; --veil-boost:0; --name-ink:rgba(255,255,255,.97); --name-shadow:0 4px 40px rgba(0,0,0,.28); } /* Пелената чете boost-а. Долният край расте по-бавно, за да не почернее зоната със социалните и с баджа. Задълбочена на 24.08.2026 вечерта, вместо отделно матово стъкло: името вече е центрирано, ниско и много по-широко (около три четвърти от ширината), тоест минава през по-голяма и по-разнородна част от снимката. Сметнато по най-светлия пиксел от всичките шест кадъра (церемонията, кадър 13): за контраст 4,5 към 1 трябва поне 0,52 плътност през цялата лента 60 до 76 на сто от височината, не само в една точка. Затова между 50 и 60 на сто пелената скача до 0,58, вместо да пълзи бавно към 0,86 чак на 96 на сто, и остава силна (0,62) до края на текста на 76 на сто. ПОПРАВЕНО 28.08.2026, лентата е сбъркана с шест пункта. Сметката отгоре тръгва от 60 на сто, но там започват само главните букви на ХРИСТОВА. Върхът на „Лора“ седи по-високо. Измерено на живо през метриките на шрифта, не на око: рисунъкът на „Лора“ върви от 54,7 до 76,8 на сто, а този на ХРИСТОВА от 60,7 до 73,2. Тоест горните шест пункта на голямата дума са падали в частта, където пелената още пълзи и е около 0,40. Измерен контраст там, пак по най-светлия пиксел, на всичките шест кадъра: между 2,64 и 3,38 към 1, при наша норма 4,5. Затова двата стопа се вдигат с шест пункта, 0,20 от 50 на 44 на сто и силният от 60 на 54 на сто. Наклонът остава дълъг колкото беше, десет пункта, за да няма видим ръб. Силният е вдигнат от 0,58 на 0,60, защото при 0,58 двата най-светли кадъра излизаха 4,52 и 4,53, тоест минаваха на косъм. Премерено наново след промяната, по целия рисунък на „Лора“, тоест от 54,7 до 76,8 на сто, ред по ред и всеки ред със своята плътност: най-лошото на шестте кадъра вече е между 4,90 и 6,20 към 1. Преди беше между 2,64 и 3,38. Цената е, че лентата между 44 и 54 на сто от кадъра потъмнява. На око е малка, но е реална. Ако Лора я усети като тежка, връщането е един ред: стопите се смъкват обратно на 50 и 60. Тогава обаче името пада под нормата, това е размяната. */ .hero.cine .veil{ background:linear-gradient(180deg, rgba(var(--ink-rgb), calc(.58 + var(--veil-boost))), rgba(var(--ink-rgb), calc(.12 + var(--veil-boost))) 32%, rgba(var(--ink-rgb), calc(.20 + var(--veil-boost))) 44%, rgba(var(--ink-rgb), calc(.60 + var(--veil-boost))) 54%, rgba(var(--ink-rgb), calc(.62 + var(--veil-boost))) 76%, rgba(var(--ink-rgb), calc(.86 + var(--veil-boost) * .35)) 96%); transition:background 1.5s ease; /* върви заедно с прехода на слайда */ } /* Името центрирано и възможно най-ниско в hero-то, заключено 24.08.2026 вечерта по избор на Лора. Модификатор върху .name от base.css, не го променя пряко. Долният отстъп е измерен на живо да опира точно над .heroui (социалните и баджа долу вдясно), не върху тях. */ .hero.cine .name.bottom-center{ justify-content:center; align-items:flex-end; padding-left:var(--pad); padding-bottom:clamp(150px,24vh,230px); } .hero.cine .name.bottom-center .stack{align-items:center} /* Уголемено по искане на Лора: заема около три четвърти от ширината, само в тази долна центрирана версия. Лявата подредба в base.css не е пипната, остава за 02_САЙТ/proba/hero-preview.html. */ .hero.cine .name.bottom-center .lockup{gap:clamp(10px,2.7vw,26px)} /* ЕДИН кегел за двете части, 03.09.2026, по бележка на Христо: името в hero-то да е като във футъра, тоест „Христова" с по-големи букви. Дотук „Лора" беше на 170 пиксела, а „ХРИСТОВА" на 94, тоест почти двойно по-дребна. Във футъра `.f-name` дава ЕДИН кегел на двете, а разликата идва само от шрифта: наклоненият сериф е лек, а правата главна гротеска тежи. Затова там фамилията носи името, а тук се губеше. Сега двете са на един кегел и тежестта пада върху фамилията, точно както долу. Таванът е 104, не 170: при равни кегли „Лора ХРИСТОВА" на един ред е почти два пъти по-широко, а 104 е най-голямото, което стои чисто и на 1440, и на 375 пиксела. Мерено, не преценено. */ .hero.cine .name.bottom-center .first, .hero.cine .name.bottom-center .last{font-size:clamp(30px,7.6vw,104px)} /* Името чете променливата вместо твърдо зададения бял цвят. */ .hero.cine .name .first, .hero.cine .name .last{ color:var(--name-ink); text-shadow:var(--name-shadow); transition:color .9s var(--ease), text-shadow .9s var(--ease); } /* --- Вариант с тъмен текст, за мъгла, сняг и ясно небе --- */ .hero.cine.is-light{ --name-ink:var(--ink-on-snow); --name-shadow:none; } /* При светъл вариант пелената изсветлява горе и в средата, но долу остава тъмна заради социалните, баджа и кредита. */ .hero.cine.is-light .veil{ background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12) 32%, rgba(255,255,255,.20) 60%, rgba(var(--ink-rgb),.74) 96%); } /* Хедърът стои в горната зона и при светъл вариант трябва да потъмнее. */ .hero.cine.is-light ~ #site-header .brand, .hero.cine.is-light ~ #site-header a{ color:var(--ink-on-snow); } /* Долната третина остава тъмна, затова социалните, баджът и кредитът не се пипат. Оставено нарочно, за да не се чупи контрастът там. */ @media (prefers-reduced-motion:reduce){ .hero.cine .veil, .hero.cine .name .first, .hero.cine .name .last{transition:none} } /* ============================================================ КАК СЕ ВКЛЮЧВА 1) В index.html, след base.css: 2) В index.html, всеки слайд получава своя стойност. Светлите кадри получават и data-ink="light":
3) В js/site.js, функцията initSlides се заменя с версията по-долу. Тя прави същото като сегашната, плюс пренася boost-а и режима на текста върху .hero при всяка смяна. function initSlides(){ var slides = document.querySelectorAll(".slides .slide"); if(slides.length < 2) return; var hero = document.querySelector(".hero.cine"); var i = 0; var apply = function(el){ if(!hero) return; hero.style.setProperty("--veil-boost", el.getAttribute("data-boost") || 0); hero.classList.toggle("is-light", el.getAttribute("data-ink") === "light"); }; apply(slides[0]); setInterval(function(){ slides[i].classList.remove("on"); i = (i + 1) % slides.length; slides[i].classList.add("on"); apply(slides[i]); }, 5200); } ============================================================ ИЗМЕРЕНИ СТОЙНОСТИ ЗА ВСЕКИ КАДЪР Кадър Контраст data-boost data-ink Hristova051225cm002137 4.7 0 бял Hristova130326vt73048 4.0 .04 бял Hristova051225cm001988 2.6 .16 бял Hristova070326dy69807 2.3 .18 бял Hristova100126vt29157 2.0 .22 бял Hristova10126la929 1.8 .20 бял Hristova281125mn11866 1.7 .26 бял Hristova11126la697 1.7 0 light Hristova190326la11724 1.3 0 light Hristova180326la15283 1.2 0 light Ако решението е да се остане само на бял текст, изтрий блоковете с .is-light и ползвай единствено data-boost. ============================================================ */ /* ============================================================ HERO НА ТЕЛЕФОН: ВЕРТИКАЛНИ ИЗРЕЗКИ ============================================================ Премерено на 10.09.2026. Шестте кадъра са широки, 3:2, а телефонът е висок и тесен. При 100svh и ширина 375 „cover“ мащабира по височината и от кадъра се вижда едва 31 на сто от ширината му, тоест централната ивица. Точно затова Камелия видя медала и усмивката отрязани. Решението не е ново наместване на същия широк кадър, а ОТДЕЛНИ изрезки 2:3, композирани поотделно за всеки от шестте. При тях се вижда около 69 на сто от ширината на изрезката, тоест Лора остава цяла. Кой ги слага: `preload()` в site.js подменя всичките шест, щом ширината е до 700 и на страницата има .hero.cine. Първият слайд обаче носи адреса си и в inline style, за да се нарисува бързо, а inline бие CSS. Затова само той се пренаписва и оттук, с !important: така браузърът изобщо не тегли широкия файл на телефон, вместо да го тегли и после да го смени. Ако кадърът на първия слайд се смени, този адрес се сменя с него. */ @media(max-width:700px){ .hero.cine .slide[data-src="assets/hero/lora-hero-10"]{ background-image:url(../assets/hero/lora-hero-10-mob-1000.jpg) !important; } }