/* ========================================================================== За нас — историята на Николай. Само за тази страница (pages/za-nas.html, „css: za-nas“ в горния коментар). Системата е в styles.css; ръководство: tmp/site-v3/components.md. Секциите (всяка с различна форма): 1 героят Николай (изрязан от снимката) до PDR лампа на стойка — вертикалната глава е само на тази страница; лъчът пада хоризонтално върху него, светло е само откъм лампата 2 тетрадката три навика, задраскани на линиите на лист; под всеки — истинският екран, който го замени (трите еднакво високи) 3 спорът огромен цитат + белият телефон: подпис, отметка, „Изчисти“ става активен, „Подпиши и заключи“, заключен PDF 4 линията заводската PDR линия свети (студено синьо); обратът е тъмна карта с угаснала лампа (същото тяло като в героя) 5 защо PDR куката в заглавието + голямото B и истинският лист; второто докосване вади „Втора щета — смята се сама“ 6 роди се ивиците са огънати около вдлъбнатина зад знака R; постоят, изправят се бавно и по тях минава отблясък 7 пътят картата: България свети, съседите са в плана (контур) 8 призив картата на видео срещата под къса хоризонтална лампа Всяко движение е само в prefers-reduced-motion: no-preference и с .js. ========================================================================== */ /* ---------- 1 · героят: Николай до лампата на стойка ---------- */ .zn-hero { position: relative; padding: calc(var(--nav-h) + clamp(20px, 3vw, 44px)) 0 0; overflow-x: clip; } .zn-sky { position: absolute; inset: 0 0 auto 0; height: 900px; pointer-events: none; background: radial-gradient(ellipse 40% 52% at 68% 26%, rgba(var(--glow), .13), transparent 70%), radial-gradient(ellipse 40% 40% at 6% 0%, rgba(var(--glow), .08), transparent 70%); } .zn-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "h vis" "intro vis"; grid-template-rows: 1fr auto; column-gap: clamp(24px, 3.4vw, 56px); } .zn-hero h1 { grid-area: h; align-self: end; font-size: clamp(2.5rem, 1rem + 3.4vw, 3.9rem); line-height: 1.02; text-wrap: balance; } .zn-intro { grid-area: intro; margin-top: 24px; max-width: 21em; padding-bottom: clamp(20px, 5vw, 76px); } /* визията: стойката е вляво (--rig), до нея — Николай. --hx/--ht/--hl/--hw — главата на лампата; --px — тръбата; --bw — основата с колелата */ .zn-hero-visual { --rig: clamp(96px, 8.4vw, 124px); --hw: 14px; --hx: calc(var(--rig) - 46px); --px: calc(var(--hx) - 13px); --ht: 9%; --hl: 42%; --bw: 112px; grid-area: vis; position: relative; align-self: end; padding-left: var(--rig); } .zn-rig { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: var(--rig); pointer-events: none; } /* сиянието около главата — повече към Николай */ .zn-rig::before { content: ""; position: absolute; top: calc(var(--ht) - 6%); height: calc(var(--hl) + 12%); left: calc(var(--hx) - 26px); width: 110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(180, 220, 255, .34), rgba(140, 196, 245, .12) 58%, transparent 100%); filter: blur(10px); } /* сянката на основата на пода */ .zn-rig::after { content: ""; position: absolute; bottom: -8px; left: calc(var(--px) + 2.5px - var(--bw) * .6); width: calc(var(--bw) * 1.2); height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); } .zn-pole { position: absolute; left: var(--px); width: 5px; top: calc(var(--ht) + var(--hl) / 2 - 16px); bottom: calc(var(--bw) * .3); border-radius: 3px; background: linear-gradient(90deg, #0e1419 0%, #56626e 42%, #2a333c 70%, #0d1217 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); } /* скобата, на която главата се върти */ .zn-knuckle { position: absolute; top: calc(var(--ht) + var(--hl) / 2 - 6px); left: calc(var(--px) - 3px); width: calc(var(--hx) - var(--px) + 6px); height: 12px; border-radius: 4px; background: linear-gradient(180deg, #46525e, #1a222a 60%, #10161b); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12); } /* главата: корпус, две тръби (угаснали отдолу, светещи отгоре), капачки */ .zn-head { position: absolute; left: var(--hx); top: var(--ht); width: var(--hw); height: var(--hl); border-radius: 5px; --dead: linear-gradient(180deg, rgba(150, 170, 190, .05), rgba(150, 170, 190, .3) 6%, rgba(150, 170, 190, .3) 94%, rgba(150, 170, 190, .05)); background: var(--dead) 3px 8px / 2px calc(100% - 16px) no-repeat, var(--dead) calc(100% - 3px) 8px / 2px calc(100% - 16px) no-repeat, linear-gradient(90deg, #070b0f 0%, #1d2731 30%, #2f3b47 55%, #151d25 85%, #0a0f14 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 30px -12px rgba(0, 0, 0, .9); } .zn-head::before, .zn-head::after { content: ""; position: absolute; left: -2px; right: -2px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #0b1015, #3c4854 50%, #0b1015); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .1); } .zn-head::before { top: -4px; } .zn-head::after { bottom: -4px; } .zn-tubes { position: absolute; top: 8px; bottom: 8px; left: 3px; right: 3px; --tube: linear-gradient(180deg, rgba(225, 242, 255, 0), rgb(225, 242, 255) 6%, #fff 50%, rgb(225, 242, 255) 94%, rgba(225, 242, 255, 0)); background: var(--tube) 0 0 / 2px 100% no-repeat, var(--tube) 100% 0 / 2px 100% no-repeat; filter: drop-shadow(0 0 1.5px rgb(225, 242, 255)) drop-shadow(0 0 5px rgba(140, 196, 245, .9)); } /* основата: крака с колела (геометрия, не рисунка) */ .zn-base { position: absolute; bottom: 0; left: calc(var(--px) + 2.5px - var(--bw) / 2); width: var(--bw); height: auto; overflow: visible; } .zn-base .b-leg { fill: none; stroke: #3b4652; stroke-width: 4; stroke-linecap: round; } .zn-base .b-hub { fill: #2a343e; stroke: #0b1015; stroke-width: 1; } .zn-base circle { fill: #0b1015; stroke: #4a5561; stroke-width: 2; } .zn-base .b-far { opacity: .55; } /* лъчът във въздуха: хоризонтално от главата към Николай, пада на височина лице–гърди. filter е на родителя, clip-path — на детето, за да е мек ръбът */ .zn-beam { position: absolute; z-index: 0; left: calc(var(--hx) + var(--hw)); right: -4%; top: calc(var(--ht) - 4%); height: calc(var(--hl) + 24%); pointer-events: none; filter: blur(14px); mix-blend-mode: screen; } .zn-beam::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 71%); background: linear-gradient(90deg, rgba(200, 228, 252, .46) 0%, rgba(156, 203, 242, .2) 38%, rgba(85, 145, 196, .06) 78%, rgba(85, 145, 196, 0) 100%); } .zn-portrait { position: relative; z-index: 1; margin: 0; max-width: 420px; } /* изрезът е с истинска алфа (без сивия кант); отдолу се губи в тъмното. Светлината е три слоя с маска = алфата на снимката: лъчът отляво, светъл ръб само по левите контури (снимката минус същата снимка, отместена надясно) и сянка вдясно */ .zn-portrait-img { position: relative; display: block; aspect-ratio: 4 / 5; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 94%); mask-image: linear-gradient(180deg, #000 60%, transparent 94%); } .zn-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; } .zn-light, .zn-rim, .zn-shade { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: url(/img/s/crop/za-nas-portret.webp); mask-image: url(/img/s/crop/za-nas-portret.webp); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .zn-light { mix-blend-mode: screen; background: radial-gradient(ellipse 104% 44% at 0% 33%, rgba(222, 240, 255, .62), rgba(170, 212, 248, .3) 40%, rgba(120, 180, 235, .08) 74%, transparent 100%); } .zn-rim { --rx: 2.5px; --ry: 0px; background: rgba(214, 236, 255, .7); -webkit-mask-image: radial-gradient(ellipse 72% 40% at 0% 38%, #000 25%, transparent 100%), url(/img/s/crop/za-nas-portret.webp), url(/img/s/crop/za-nas-portret.webp); mask-image: radial-gradient(ellipse 72% 40% at 0% 38%, #000 25%, transparent 100%), url(/img/s/crop/za-nas-portret.webp), url(/img/s/crop/za-nas-portret.webp); -webkit-mask-position: 0 0, 0 0, var(--rx) var(--ry); mask-position: 0 0, 0 0, var(--rx) var(--ry); -webkit-mask-composite: source-in, source-out, source-over; mask-composite: intersect, subtract, add; } .zn-shade { background: linear-gradient(90deg, rgba(5, 9, 13, 0) 36%, rgba(5, 9, 13, .46) 70%, rgba(5, 9, 13, .7) 100%); } /* подписът стои долу, където снимката вече е изчезнала — отдолу има тъмна подложка */ .zn-portrait figcaption { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; padding: 44px 8% 4%; background: linear-gradient(180deg, rgba(9, 14, 19, 0), rgba(9, 14, 19, .72) 52%); text-shadow: 0 1px 3px rgba(5, 8, 12, .95); } .zn-portrait figcaption b { margin-bottom: 2px; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; color: #f4f9ff; } .zn-portrait figcaption span { font-size: 15px; color: var(--ink); } /* ---------- 2 · тетрадката: трите навика на линиите, задраскани ---------- */ .zn-book { padding-top: clamp(40px, 3.6vw, 56px); padding-bottom: clamp(20px, 2.4vw, 32px); } .zn-book .sec-head { max-width: 50rem; } .zn-book .sec-head > p { max-width: 31em; } /* на широко: заглавието вляво, абзацът вдясно на последния му ред — тетрадката веднага под тях */ @media (min-width: 1100px) { .zn-book .sec-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(40px, 5vw, 80px); align-items: last baseline; } .zn-book .sec-head > p { margin-top: 0; max-width: 29em; text-wrap: pretty; } } .zn-ledger { --L: 2.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 28px; row-gap: clamp(18px, 2vw, 28px); } /* подмрежа: текстовете са еднакво високи (два реда), линиите вървят като една страница */ .zn-row { --di: calc(var(--i, 0) * .28s); position: relative; grid-row: span 2; display: grid; grid-template-rows: subgrid; } .zn-old { position: relative; isolation: isolate; margin: 0 -14px; padding: 0 14px; min-height: calc(var(--L) * 2); font-size: clamp(1.2rem, .45rem + 1.3vw, 1.6rem); line-height: var(--L); font-weight: 700; letter-spacing: -.015em; text-wrap: balance; } /* линиите на листа — само тук, под задрасканите навици (светът е тетрадката) */ .zn-old::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 calc(var(--L) - 1px), rgba(156, 203, 242, .17) calc(var(--L) - 1px) var(--L)); } .zn-row:first-child .zn-old::before { -webkit-mask-image: linear-gradient(90deg, transparent, #000 90px); mask-image: linear-gradient(90deg, transparent, #000 90px); } .zn-row:last-child .zn-old::before { -webkit-mask-image: linear-gradient(270deg, transparent, #000 90px); mask-image: linear-gradient(270deg, transparent, #000 90px); } /* задраскването: червена линия през средата на всеки ред (тръгва отляво при поява) */ .zn-old s { text-decoration: none; color: var(--ink-2); background: linear-gradient(var(--red), var(--red)) 0 60% / 100% 2.5px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* трите екрана — еднакво високи, една редица */ .zn-new { position: relative; align-self: start; margin: 0; aspect-ratio: 1170 / 1040; border-radius: 14px; overflow: hidden; background: #0b1117; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 70px -40px rgba(0, 0, 0, .95), 0 26px 60px -36px rgba(var(--glow), .5); } .zn-new img { display: block; width: 100%; } /* украинската чернова (uk/crop/za-nas-oferta): четирите реда са по два — изрезът е по-висок */ .zn-new-tall { aspect-ratio: 1170 / 1170; } /* протоколът е бял лист, като в приложението; листът продължава под изреза */ .zn-new-paper { background: #fafcfe; box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 40px 70px -40px rgba(0, 0, 0, .95), 0 0 70px rgba(210, 232, 255, .1); } .zn-shot { position: relative; display: block; width: 100%; container-type: inline-size; } /* четирите ъгъла светват един по един */ .zn-snap { position: absolute; top: 72.6%; height: 17.8%; width: 22.2%; border-radius: 2.2cqw; pointer-events: none; background: rgba(85, 145, 196, .08); box-shadow: 0 0 0 2px var(--blue), 0 4px 16px rgba(var(--glow), .45); } .zn-snap.s1 { left: 2.2%; } .zn-snap.s2 { left: 26.5%; } .zn-snap.s3 { left: 51%; } .zn-snap.s4 { left: 75.3%; } /* в украинския изрез (uk/crop/za-nas-snimki) надписите под бутоните са на два реда — бутоните са по-горе */ :lang(uk) .zn-snap { top: 69.66%; height: 18.43%; } /* в полския изрез (pl/crop/za-nas-snimki) над ъглите са заварените щети — бутоните са по-долу */ :lang(pl) .zn-snap { top: 77.53%; height: 19.33%; } .zn-dots { display: none; } /* мостът към спора: обиколих — навсякъде същото */ .zn-book-end { margin: clamp(56px, 6vw, 96px) auto 0; max-width: 19em; text-align: center; font-size: clamp(1.7rem, 1rem + 2.2vw, 2.8rem); font-weight: 800; line-height: 1.12; letter-spacing: -.028em; text-wrap: balance; } /* ---------- 3 · спорът: огромният цитат и подписът на клиента ---------- */ .zn-quote { overflow-x: clip; padding-top: clamp(24px, 2.5vw, 40px); } .zn-quote-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .zn-quote-text { padding-top: clamp(24px, 4.4vw, 72px); } .zn-quote h2 { max-width: 13ch; font-size: clamp(2.3rem, .9rem + 4.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; } .zn-qm { color: var(--blue-hi); text-shadow: 0 0 26px rgba(var(--glow), .85); } .zn-q2 { margin-top: 22px; font-size: clamp(1.4rem, .95rem + 1.3vw, 2.2rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--ink-2); } .zn-q-line { margin-top: 28px; max-width: 30em; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } .zn-sign { position: relative; display: grid; justify-items: center; } .zn-sign::before { content: ""; position: absolute; left: 50%; top: 44%; width: 620px; height: 620px; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(215, 235, 255, .16), rgba(var(--glow), .1) 55%, transparent 100%); } .zn-sign-stage { position: relative; padding-bottom: 38px; } .zn-sign-phone { width: min(290px, 64vw); rotate: 4deg; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px rgba(0, 0, 0, .35), 0 60px 90px -40px rgba(0, 0, 0, .95), 0 0 110px rgba(210, 232, 255, .18); } /* екранът е общият crop/podpis (истинският протокол с въздух под заглавката; .fx-sign е на мястото си); крайното му състояние като в приложението: подписът, „Изчисти“ става активен, под линията — името на подписващия, отметката е сложена, бутонът е активен. Мерките са в % от екрана 1170 × 2532. */ .zn-clear { position: absolute; z-index: 3; left: 66.92%; top: 53.2%; width: 23.25%; height: 4.7%; display: grid; place-items: center; border-radius: 2.56cqw; background: #fff5f4; box-shadow: inset 0 0 0 .26cqw #f0c9c4; color: #c4453a; font-size: 3.69cqw; font-weight: 700; letter-spacing: 0; } .zn-signer { position: absolute; z-index: 3; left: 11.37%; top: 81.04%; width: 45.04%; height: 2.21%; display: flex; align-items: center; padding-left: .77cqw; background: #fff; color: #5b6b7a; font-size: 3.36cqw; font-weight: 400; white-space: nowrap; } .zn-ok { position: absolute; z-index: 3; left: 7.18%; top: 41.47%; width: 7.35%; aspect-ratio: 1; border-radius: 1.8cqw; display: grid; place-items: center; color: #fff; background: #2e5f8a; box-shadow: 0 0 0 .17cqw #2e5f8a; } .zn-ok .ic { width: 56%; height: 56%; stroke-width: 3; } /* украинският акт (uk/crop/podpis) има две отметки — за условията и за личните данни — и стоят по-горе */ :lang(uk) .zn-ok { top: 36.22%; } :lang(uk) .zn-ok.zn-ok2 { top: 44.67%; } /* полският акт (pl/crop/podpis): също две отметки */ :lang(pl) .zn-ok { top: 38.74%; } :lang(pl) .zn-ok.zn-ok2 { top: 45.97%; } /* „Prosimy podpisać się tutaj palcem“ е по-дълго — името на подписващия го покрива цялото */ :lang(pl) .zn-signer { width: 56%; } .zn-lockbtn { position: absolute; z-index: 3; left: 7.18%; top: 87.68%; width: 85.56%; height: 7.54%; border-radius: 2.4cqw; display: flex; align-items: center; justify-content: center; gap: 2.2cqw; font-size: 4.3cqw; font-weight: 700; letter-spacing: -.01em; color: #fff; background: linear-gradient(180deg, #5591c4, #3b73a3); box-shadow: inset 0 .3cqw 0 rgba(255, 255, 255, .25), 0 2cqw 5cqw -2cqw rgba(59, 115, 163, .8); } .zn-lockbtn .ic { width: 4.4cqw; height: 4.4cqw; stroke-width: 2.2; } .zn-tap { left: 50%; top: 91.45%; } /* картата, която затваря спора — застъпва долния ръб на телефона */ .zn-locked { left: 50%; bottom: 0; translate: -50% 0; } /* ---------- 4 · линията: заводската PDR линия свети; обратът е тъмна карта ---------- */ .zn-line { overflow-x: clip; padding-top: calc(var(--sec) / 2); } .zn-hale { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); grid-template-rows: auto auto; max-width: 1100px; margin-inline: auto; } .zn-hale::before { content: ""; position: absolute; left: 50%; top: 45%; width: 120%; height: 90%; translate: -50% -50%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--glow), .22), transparent); } .zn-hale-img { grid-column: 1 / -1; grid-row: 1; position: relative; isolation: isolate; display: block; aspect-ratio: 1200 / 700; border-radius: 20px; overflow: hidden; background: #111820; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 110px -60px rgba(0, 0, 0, .95), 0 40px 120px -50px rgba(var(--glow), .45); } /* халето свети — светещите ленти по тавана са същият мотив „лампа“; тонът е студен, не сив */ .zn-hale-img img { position: relative; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(.75) brightness(.92) contrast(1.06); } .zn-hale-img::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: color; background: linear-gradient(180deg, rgba(88, 150, 210, .52), rgba(52, 104, 158, .62)); } /* тъмно само долу вляво — зад заглавието */ .zn-hale-img::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 74% 80% at 0% 100%, rgba(6, 10, 14, .94) 0%, rgba(6, 10, 14, .78) 36%, rgba(6, 10, 14, .3) 62%, rgba(6, 10, 14, 0) 80%); } .zn-hale-h { grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 3; max-width: 15em; padding: clamp(24px, 3.6vw, 52px); font-size: clamp(1.8rem, .9rem + 1.8vw, 2.55rem); text-wrap: balance; text-shadow: 0 2px 26px rgba(5, 9, 13, .75); } /* обратът: тъмна карта с угаснала лампа — застъпва долния десен ъгъл на снимката */ .zn-turn { grid-column: 2; grid-row: 1 / 3; align-self: end; position: relative; z-index: 4; margin: 0 clamp(20px, 3vw, 44px) calc(clamp(28px, 3vw, 44px) * -1) 0; padding: 28px 28px 30px; border-radius: 18px; background: linear-gradient(180deg, rgba(15, 22, 29, .9), rgba(9, 14, 19, .96)); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -30px rgba(0, 0, 0, .95); } .zn-turn p { position: relative; z-index: 1; margin-top: 26px; font-size: clamp(1.4rem, .8rem + 1vw, 1.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: #f4f9ff; text-wrap: balance; } .zn-dim { color: var(--ink-3); } /* лампата в България: същото тяло като в героя — корпус, две тръби, капачки — по цялата ширина на картата; тръбите са сиви, не светят */ .zn-off { position: relative; display: block; height: 14px; margin: 0 7px; border-radius: 5px; background: linear-gradient(180deg, #2a3541 0%, #141c24 45%, #0a0f14 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .65), 0 10px 20px -10px rgba(0, 0, 0, .95); } .zn-off::before, .zn-off::after { content: ""; position: absolute; z-index: 1; top: -3px; bottom: -3px; width: 10px; border-radius: 3px; background: linear-gradient(180deg, #3c4854, #161e26 55%, #0b1015); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .1); } .zn-off::before { left: -7px; } .zn-off::after { right: -7px; } .zn-off-tubes { position: absolute; left: 6px; right: 6px; top: 3px; bottom: 3px; --tube: linear-gradient(90deg, rgba(150, 170, 190, .04), rgba(150, 170, 190, .3) 4%, rgba(150, 170, 190, .3) 96%, rgba(150, 170, 190, .04)); background: var(--tube) 0 0 / 100% 2px no-repeat, var(--tube) 0 100% / 100% 2px no-repeat; } /* опитът да светне: бели тръби отгоре (невидими) и студен конус надолу — само в движение */ .zn-off-tubes::after { content: ""; position: absolute; inset: 0; opacity: 0; --lit: linear-gradient(90deg, rgba(225, 242, 255, 0), rgb(225, 242, 255) 4%, #fff 50%, rgb(225, 242, 255) 96%, rgba(225, 242, 255, 0)); background: var(--lit) 0 0 / 100% 2px no-repeat, var(--lit) 0 100% / 100% 2px no-repeat; filter: drop-shadow(0 0 1.5px rgb(225, 242, 255)) drop-shadow(0 0 5px rgba(140, 196, 245, .9)); } .zn-off-cone { position: absolute; left: -4%; right: -4%; top: 100%; height: 130px; opacity: 0; pointer-events: none; filter: blur(12px); mix-blend-mode: screen; } .zn-off-cone::before { content: ""; position: absolute; inset: 0; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(190, 220, 248, .42), rgba(120, 170, 220, .12) 55%, rgba(120, 170, 220, 0)); } .zn-hale-cap { grid-column: 1; grid-row: 2; position: relative; z-index: 1; margin-top: 14px; font-size: 15px; color: var(--ink-3); } /* ---------- 5 · защо само за PDR: куката и голямото B ---------- */ .zn-why { overflow-x: clip; } .zn-why-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: ". b" "h b" "p b" ". b"; grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: center; } .zn-why-h { grid-area: h; font-size: clamp(2.05rem, .5rem + 2.85vw, 3rem); text-wrap: balance; } .zn-why-line { grid-area: p; max-width: 25em; } .zn-b { grid-area: b; position: relative; padding: clamp(120px, 12vw, 170px) 0 0 clamp(60px, 7vw, 100px); } .zn-b-letter { position: absolute; left: 0; top: clamp(-30px, -1.6vw, -14px); font-size: clamp(12rem, 5rem + 13vw, 21rem); font-weight: 800; line-height: .8; letter-spacing: -.04em; pointer-events: none; user-select: none; color: var(--ice); -webkit-text-stroke: 2px transparent; text-shadow: 0 0 60px rgba(var(--glow), .85), 0 0 18px rgba(var(--glow), .5); } .zn-b-stage { position: relative; z-index: 1; } .zn-b-shot { position: relative; margin: 0; border-radius: 16px; overflow: hidden; container-type: inline-size; background: #111820; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 90px -44px rgba(0, 0, 0, .95), 0 30px 70px -40px rgba(var(--glow), .55); } .zn-b-shot img { display: block; width: 100%; } .zn-b-ring { left: 26.6%; top: 5.3%; width: 22%; height: 86.5%; border-radius: 2.9cqw; } .zn-b-tap { left: 37.7%; top: 69%; width: 9%; } /* втората кука: второто докосване — втората щета на същия панел се смята сама */ .zn-second { right: -18px; bottom: calc(100% - 14px); margin: 0; } .zn-b-cap { position: relative; z-index: 1; margin-top: 14px; font-size: 15px; color: var(--ink-3); text-wrap: balance; } /* ---------- 6 · така се роди Reflekt: ивиците около знака се изправят ---------- */ .zn-born { overflow: clip; padding-block: clamp(110px, 12vw, 180px) clamp(90px, 10vw, 150px); } .zn-born::before { content: ""; position: absolute; left: 50%; top: 40%; width: 1000px; height: 700px; translate: -50% -50%; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--glow), .18), rgba(var(--glow), .04) 60%, transparent); transition: opacity 1s var(--ease); } .zn-born-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } /* знакът седи точно във вдлъбнатината: полето е центрирано върху него и е широко колкото екрана; поясът с ивици е по-тесен надолу — под заглавието вече затихват */ .zn-born-mark { position: relative; width: 84px; height: 84px; } .zn-field { inset: -300px calc(42px - 50vw); -webkit-mask-image: radial-gradient(46% 29% at 50% 46%, #000 28%, rgba(0, 0, 0, .5) 58%, transparent 100%); mask-image: radial-gradient(46% 29% at 50% 46%, #000 28%, rgba(0, 0, 0, .5) 58%, transparent 100%); } .zn-field .w-band { fill-opacity: .17; transition: fill-opacity 1.2s var(--ease); } .zn-field .w-edge { fill: none; stroke-opacity: .95; stroke-width: 1.35; stroke-linejoin: round; transition: stroke-width 1.2s var(--ease); } /* изправен — по-светъл панел */ .zn-born.flat .zn-field .w-band { fill-opacity: .25; } .zn-born.flat .zn-field .w-edge { stroke-width: 1.7; } /* отблясъкът: копие на ръбовете (js), видимо само в пояса, който минава по тях */ .zn-glint { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 4px rgba(210, 236, 255, .9)) drop-shadow(0 0 16px rgba(var(--glow), .95)); -webkit-mask-image: linear-gradient(100deg, transparent 42%, #000 48.5%, #000 51.5%, transparent 58%); mask-image: linear-gradient(100deg, transparent 42%, #000 48.5%, #000 51.5%, transparent 58%); -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; } .zn-glint .g-band { fill: #e6f3ff; fill-opacity: .62; stroke: none; } .zn-glint .g-edge { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; } .zn-born-icon { position: relative; z-index: 1; display: block; width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 0 0 7px rgba(9, 14, 19, .7), 0 24px 50px -14px rgba(var(--glow), .95); } /* текстът е над ивиците (z-index), всеки със своя тъмна мека подложка — линиите не минават през буквите */ .zn-born h2, .zn-born-line, .zn-born-q { position: relative; z-index: 1; } .zn-born h2::before, .zn-born-line::before, .zn-born-q::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(9, 14, 19, .92), rgba(9, 14, 19, .64) 58%, transparent); } .zn-born h2::before { inset: -26px -56px; } .zn-born-line::before, .zn-born-q::before { inset: -30px -60px; } .zn-born h2 { margin-top: 34px; font-size: clamp(2.6rem, 1rem + 5vw, 5.4rem); line-height: .98; letter-spacing: -.04em; text-shadow: 0 0 36px rgba(9, 14, 19, .9); } .zn-born-line { margin-top: 24px; max-width: 31em; font-size: 1.12rem; line-height: 1.5; color: var(--ink-2); text-wrap: balance; } .zn-born-q { margin: clamp(36px, 4.5vw, 56px) 0 0; max-width: 21em; font-size: clamp(1.55rem, .95rem + 1.9vw, 2.6rem); font-weight: 800; line-height: 1.16; letter-spacing: -.025em; color: #f4f9ff; text-wrap: balance; } /* ---------- 7 · пътят: картата ---------- */ .zn-road { overflow-x: clip; } .zn-road-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); align-items: center; column-gap: clamp(40px, 7vw, 110px); } .zn-road-copy { display: grid; align-content: center; } .zn-road-head { max-width: 34rem; } /* днес — една държава (свети); в плана — още три (контур, като на картата) */ .zn-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 22px; row-gap: 16px; margin-top: clamp(28px, 3vw, 40px); } .zn-now, .zn-next { display: contents; } .zn-plan b { justify-self: end; font-size: clamp(4.2rem, 2.4rem + 3.6vw, 6.4rem); font-weight: 800; line-height: .84; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .zn-now b { color: var(--ice); text-shadow: 0 0 56px rgba(var(--glow), .9), 0 0 18px rgba(var(--glow), .55); } .zn-next b { color: transparent; -webkit-text-stroke: 1.5px var(--blue-hi); text-shadow: 0 0 34px rgba(var(--glow), .5); } .zn-plan span { max-width: 17em; font-size: clamp(1.1rem, .95rem + .5vw, 1.4rem); font-weight: 700; line-height: 1.25; color: var(--ink-2); text-wrap: balance; } .zn-now span { color: var(--ink); } .zn-road-note { margin-top: clamp(40px, 4vw, 56px); max-width: 34rem; } .zn-road-pre { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } .zn-road-q { margin: 14px 0 0; font-size: clamp(2rem, 1.1rem + 2.6vw, 3.3rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; } /* картата е изрязана до България, Румъния, Сърбия и Северна Гърция; ръбовете се губят в тъмното */ .zn-map { position: relative; margin: 0; container-type: inline-size; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-composite: intersect; } .zn-map svg { display: block; width: 100%; height: auto; overflow: hidden; } .zn-map path, .zn-map use { vector-effect: non-scaling-stroke; stroke-linejoin: round; } /* тихите съседи */ .zn-rest { fill: rgba(255, 255, 255, .022); stroke: rgba(156, 203, 242, .13); stroke-width: 1; } /* контурите на трите следващи — тих вид (под светлия) */ .zn-c { fill: rgba(156, 203, 242, .035); stroke: rgba(156, 203, 242, .3); stroke-width: 1.2; } /* в плана: контурът свети, лек син пълнеж (крайното състояние) */ .zn-lit { fill: rgba(85, 145, 196, .07); stroke: var(--blue-hi); stroke-width: 1.6; stroke-opacity: .9; filter: url(#zn-glow); } /* България: запълнена, свети като под лампа */ .zn-bg { fill: url(#zn-bg-fill); stroke: #eaf5ff; stroke-width: 2; } .zn-bg-halo { fill: rgba(156, 203, 242, .55); stroke: none; filter: url(#zn-glow); transform-box: fill-box; transform-origin: center; scale: 1.02; } .zn-wave { opacity: 0; transform-box: fill-box; transform-origin: center; } .zn-pin { position: absolute; z-index: 2; width: clamp(34px, 11cqw, 54px); aspect-ratio: 1; translate: -50% -58%; border-radius: 28%; box-shadow: 0 0 0 4px rgba(9, 14, 19, .55), 0 10px 26px -6px rgba(5, 10, 16, .9); } .zn-pin img { display: block; width: 100%; height: 100%; border-radius: inherit; } .zn-lab { position: absolute; z-index: 2; translate: -50% -50%; font-size: clamp(14.5px, 3.6cqw, 18px); font-weight: 700; letter-spacing: -.005em; color: var(--ink); white-space: nowrap; text-shadow: 0 1px 10px rgba(5, 9, 13, .95), 0 0 2px rgba(5, 9, 13, .9); } .zn-lab-bg { translate: -50% calc(clamp(34px, 11cqw, 54px) * .62); font-size: clamp(15px, 4cqw, 20px); font-weight: 800; color: #07121c; text-shadow: none; } /* „Україна“ е в горния десен ъгъл — надписът свършва до ръба, вместо да се реже */ .zn-lab-ua { translate: -100% -50%; } /* ---------- 8 · призивът: огледалото на героя — Николай под същата лампа на стойка, до него заглавието и бутонът ---------- */ .zn-final { position: relative; padding-block: clamp(16px, 2vw, 32px) clamp(84px, 9vw, 124px); overflow-x: clip; } .zn-final::before { content: ""; position: absolute; left: 30%; top: 50%; width: 1100px; height: 800px; translate: -50% -50%; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--glow), .2), rgba(var(--glow), .05) 60%, transparent 100%); } .zn-final-grid { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "vis h" "vis copy"; grid-template-rows: 1fr 1fr; column-gap: clamp(40px, 6vw, 96px); max-width: calc(1080px + var(--gut) * 2); } /* стойката и портретът са общите с героя (.zn-hero-visual) — тук по-малки */ .zn-final-vis { --rig: clamp(80px, 7vw, 100px); --hw: 12px; --hx: calc(var(--rig) - 38px); --px: calc(var(--hx) - 11px); --bw: 92px; align-self: center; } .zn-portrait-sm { max-width: 300px; } .zn-final-h { grid-area: h; align-self: end; max-width: 11em; font-size: clamp(2.3rem, 1rem + 3.4vw, 3.9rem); letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; } .zn-final-copy { grid-area: copy; align-self: start; position: relative; z-index: 3; } .zn-final .btn-xl { margin-top: 30px; } /* 30–40 минути · Zoom, Google Meet или телефон · С вашите цени — ред под бутона */ .zn-meet-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; padding: 0; list-style: none; } .zn-meet-row li { display: inline-flex; align-items: center; gap: 9px; font-size: 1.02rem; font-weight: 600; color: var(--ink-2); } .zn-meet-row .ic { width: 18px; height: 18px; flex: none; color: var(--blue-hi); } .zn-me-big { margin-top: clamp(28px, 3.2vw, 44px); max-width: 16em; font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #f4f9ff; text-wrap: balance; } .zn-me-links { display: flex; flex-wrap: wrap; gap: 2px 26px; margin-top: 6px; } .zn-me-links a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 1.05rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-color: rgba(156, 203, 242, .35); text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; } .zn-me-links .ic { width: 18px; height: 18px; color: var(--blue-hi); } @media (hover: hover) { .zn-me-links a:hover { color: var(--blue-hi); text-decoration-color: currentColor; } } /* ========================================================================== движение — само ако е позволено; без .js всичко се вижда (крайното състояние) ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* 1 · лампата пали при зареждане: тръбите трепкат, лъчът тръгва, Николай светва с тях (едно и също трепкане — lampOn от styles.css и znLitSync тук) */ .zn-hero h1 { animation: up .9s var(--ease) both; } .zn-intro { animation: up .9s .12s var(--ease) both; } .js .zn-hero:not(.in) .glow { color: #9fb2c4; text-shadow: none; } .zn-hero.in .glow { animation: ignite .6s .05s linear both; } .js .zn-hero:not(.in) .zn-tubes, .js .zn-hero:not(.in) .zn-rig::before, .js .zn-hero:not(.in) .zn-beam, .js .zn-hero:not(.in) .zn-light, .js .zn-hero:not(.in) .zn-rim { opacity: 0; } .zn-hero.in .zn-tubes, .zn-hero.in .zn-rig::before, .zn-hero.in .zn-light, .zn-hero.in .zn-rim { animation: lampOn .8s .15s linear both; } .zn-hero.in .zn-beam { animation: znBeam 1.1s .15s var(--ease) both; } .js .zn-hero:not(.in) .zn-portrait img { filter: brightness(.5) saturate(.7); } .zn-hero.in .zn-portrait img { animation: znLitSync .8s .15s linear both; } /* 2 · задраскването минава отляво, навикът избледнява, после идва екранът */ .js .zn-row:not(.in) .zn-old s { background-size: 0% 2.5px; color: var(--ink); } .zn-old s { transition: background-size .8s var(--ease-io) calc(.3s + var(--di)), color .6s ease calc(.9s + var(--di)); } .js .zn-row:not(.in) .zn-old { opacity: 0; transform: translateY(18px); } .zn-old { transition: opacity .7s var(--ease) var(--di), transform .8s var(--ease) var(--di); } .js .zn-row:not(.in) .zn-new { opacity: 0; transform: translateY(34px) scale(.97); filter: blur(10px); } .zn-new { transition: opacity .9s var(--ease) calc(var(--nd, 1s) + var(--di)), transform 1.1s var(--ease) calc(var(--nd, 1s) + var(--di)), filter .9s var(--ease) calc(var(--nd, 1s) + var(--di)); } .js .zn-row:not(.in) .zn-snap { opacity: 0; scale: 1.14; } .zn-snap { transition: opacity .45s var(--ease) calc(var(--nd, 1s) + var(--sd) + var(--di)), scale .55s var(--ease) calc(var(--nd, 1s) + var(--sd) + var(--di)); } .zn-snap.s1 { --sd: .9s; } .zn-snap.s2 { --sd: 1.15s; } .zn-snap.s3 { --sd: 1.4s; } .zn-snap.s4 { --sd: 1.65s; } /* 3 · белият телефон идва, клиентът се подписва („Изчисти“ става активен, името слиза под линията), отметката, бутонът, заключено */ .js .zn-sign:not(.in) .zn-sign-phone { opacity: 0; transform: translateY(80px) rotate(5deg); } .zn-sign-phone { transition: opacity 1s var(--ease), transform 1.3s var(--ease); } .js .zn-sign:not(.in) .fx-sign { stroke-dashoffset: 1; } .zn-sign.in .fx-sign { animation: sign 1.1s cubic-bezier(.55, .1, .35, 1) .9s both; } .js .zn-sign:not(.in) .zn-clear, .js .zn-sign:not(.in) .zn-signer { opacity: 0; } .zn-clear, .zn-signer { transition: opacity .35s ease 2s; } .js .zn-sign:not(.in) .zn-ok { opacity: 0; scale: .5; } .zn-ok { transition: opacity .25s ease 2.2s, scale .45s var(--ease) 2.2s; } .js .zn-sign:not(.in) .zn-lockbtn { opacity: 0; } .zn-lockbtn { transition: opacity .45s ease 2.55s; } .zn-sign.in .zn-tap { animation: tap .9s ease-out 3s 1 both; } .zn-sign.in .zn-lockbtn { animation: znPress .5s ease-out 3.05s 1 both; } .js .zn-sign:not(.in) .zn-locked { opacity: 0; transform: translateY(18px) scale(.96); } .zn-locked { transition: opacity .5s var(--ease) 3.35s, transform .7s var(--ease) 3.35s; } /* 4 · халето се отваря и лампите му палят; после върху него се плъзга тъмната карта (.turn от js) */ .js .zn-hale:not(.in) .zn-hale-img { clip-path: inset(10% 14% 10% 14% round 28px); } .zn-hale-img { clip-path: inset(-120px -120px -160px -120px round 0px); transition: clip-path 1.6s var(--ease); } .js .zn-hale:not(.in) .zn-hale-img img { transform: scale(1.16); filter: saturate(.5) brightness(.42) contrast(1.06); } .zn-hale-img img { transition: transform 2.2s var(--ease), filter 1.2s ease-out .35s; } .js .zn-hale:not(.in) .zn-hale-h, .js .zn-hale:not(.in) .zn-hale-cap { opacity: 0; transform: translateY(24px); } .zn-hale-h { transition: opacity .9s var(--ease) .7s, transform 1s var(--ease) .7s; } .zn-hale-cap { transition: opacity .9s var(--ease) 1s, transform 1s var(--ease) 1s; } .js .zn-hale:not(.turn) .zn-turn { opacity: 0; transform: translateY(56px); filter: blur(8px); } .zn-turn { transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease); } /* угасналата лампа: два слаби опита да светне (с конус надолу), после нищо */ .zn-hale.turn .zn-off-tubes::after { animation: znDead 1.4s .6s linear both; } .zn-hale.turn .zn-off-cone { animation: znDeadCone 1.4s .6s linear both; } /* 5 · кръгът пада върху B, три докосвания, голямото B светва; второто докосване вади втората щета */ .js .zn-b:not(.in) .zn-b-letter { color: transparent; -webkit-text-stroke-color: rgba(140, 192, 236, .42); text-shadow: none; } .zn-b-letter { transition: color .8s var(--ease) 1.3s, -webkit-text-stroke-color .8s 1.3s, text-shadow 1s var(--ease) 1.3s; } .js .zn-b:not(.in) .zn-b-shot { opacity: 0; transform: translateY(40px); } .zn-b-shot { transition: opacity .9s var(--ease), transform 1.1s var(--ease); } .js .zn-b:not(.in) .zn-b-ring { opacity: 0; scale: 1.18; } .zn-b-ring { transition: opacity .5s var(--ease) .7s, scale .6s var(--ease) .7s; } .zn-b.in .zn-b-ring { animation: ringPulse 2.2s ease-in-out 1.3s 2; } .zn-b.in .zn-b-tap { animation: tap .9s ease-out 1.3s 3; } .js .zn-b:not(.in) .zn-second { opacity: 0; transform: translateY(16px) scale(.95); filter: blur(6px); } .zn-second { transition: opacity .5s var(--ease) 2.3s, transform .7s var(--ease) 2.3s, filter .5s var(--ease) 2.3s; } /* 6 · ивиците постоят огънати, изправят се (js/za-nas.js), после един отблясък минава по тях (.glint) */ .zn-born.glint .zn-glint { animation: znGlint 1.6s cubic-bezier(.4, 0, .6, 1) both; } /* 7 · картата: България пали, светлината тръгва от нея и очертава съседите един по един (.go .n2 .n3 .n4 от js) */ .js .zn-map:not(.go) .zn-bg, .js .zn-map:not(.go) .zn-bg-halo { opacity: .12; } .zn-map .zn-bg, .zn-map .zn-bg-halo { transition: opacity 1s var(--ease); } .js .zn-map:not(.go) .zn-pin, .js .zn-map:not(.go) .zn-lab-bg { opacity: 0; scale: .7; } .zn-pin, .zn-lab-bg { transition: opacity .5s var(--ease) .35s, scale .7s var(--ease) .35s; } .zn-map.go .zn-wave { animation: znWave 2.4s var(--ease-io) .45s 1 both; } .zn-lit, .zn-lab-ro, .zn-lab-rs, .zn-lab-gr, .zn-lab-ua { transition: opacity .9s var(--ease); } .js .zn-map:not(.n2) .zn-l-ro, .js .zn-map:not(.n3) .zn-l-rs, .js .zn-map:not(.n4) .zn-l-gr { opacity: 0; } .js .zn-map:not(.n2) .zn-lab-ro, .js .zn-map:not(.n3) .zn-lab-rs, .js .zn-map:not(.n4) .zn-lab-gr { opacity: .35; } /* Україна (само на украинската страница) светва първа — приложението там вече работи */ .js .zn-map:not(.n1) .zn-l-ua { opacity: 0; } .js .zn-map:not(.n1) .zn-lab-ua { opacity: .35; } /* числата до картата: „1“ трепва заедно с България, „+3“ се очертава с последния съсед */ .js .zn-road:not(.now) .zn-now b { color: #2a3642; text-shadow: none; } .zn-now b { transition: color .9s var(--ease), text-shadow 1.1s var(--ease); } .js .zn-road:not(.plan) .zn-next b { -webkit-text-stroke-color: rgba(156, 203, 242, .42); text-shadow: none; } .zn-next b { transition: -webkit-text-stroke-color .9s var(--ease), text-shadow 1.2s var(--ease); } /* 8 · призивът: лампата на стойка загрява меко — без трепкане (трепка само героят); Николай светва с нея, после бутонът и редът */ .js .zn-final:not(.lit) :is(.zn-tubes, .zn-beam, .zn-light, .zn-rim), .js .zn-final:not(.lit) .zn-rig::before { opacity: 0; } .zn-final :is(.zn-tubes, .zn-beam, .zn-light, .zn-rim), .zn-final .zn-rig::before { transition: opacity 1.4s var(--ease); } .js .zn-final:not(.lit) .zn-portrait img { filter: brightness(.5) saturate(.7); } .zn-final .zn-portrait img { transition: filter 1.4s var(--ease); } .js .zn-final-copy:not(.in) > * { opacity: 0; transform: translateY(24px); } .zn-final-copy > * { transition: opacity .9s var(--ease), transform 1s var(--ease); } .zn-final-copy > :nth-child(2) { transition-delay: .12s; } .zn-final-copy > :nth-child(3) { transition-delay: .22s; } .zn-final-copy > :nth-child(4) { transition-delay: .3s; } /* бутонът: посочването (translateY) не чака появата */ .zn-final-copy.in > .btn { transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease), opacity .9s var(--ease); } } /* същото трепкане като lampOn (styles.css), но за яркостта на снимка */ @keyframes znLitSync { 0% { filter: brightness(.5) saturate(.7); } 8% { filter: brightness(1) saturate(1); } 14% { filter: brightness(.55) saturate(.72); } 24% { filter: brightness(1) saturate(1); } 30% { filter: brightness(.7) saturate(.82); } 42%, 100% { filter: brightness(1) saturate(1); } } @keyframes znBeam { 0% { opacity: 0; transform: scaleX(.35); transform-origin: 0 50%; } 8% { opacity: .9; } 14% { opacity: .15; } 24% { opacity: 1; } 30% { opacity: .45; } 42% { opacity: 1; } 100% { opacity: 1; transform: none; transform-origin: 0 50%; } } @keyframes znPress { 0%, 100% { transform: scale(1); } 35% { transform: scale(.96); filter: brightness(1.12); } } @keyframes znWave { 0% { opacity: 0; transform: scale(.08); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } @keyframes znGlint { 0% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; } 88% { opacity: 1; } 100% { opacity: 0; -webkit-mask-position: 0 0; mask-position: 0 0; } } /* угасналата лампа: светва слабо два пъти и умира */ @keyframes znDead { 0%, 9%, 17%, 40%, 48%, 100% { opacity: 0; } 4% { opacity: .85; } 13% { opacity: .45; } 44% { opacity: .38; } } @keyframes znDeadCone { 0%, 9%, 17%, 40%, 48%, 100% { opacity: 0; } 4% { opacity: .9; } 13% { opacity: .5; } 44% { opacity: .4; } } /* ========================================================================== размери ========================================================================== */ /* до 1180: картата „Втора щета“ не излиза вдясно от листа — остава въздух до ръба на екрана */ @media (max-width: 1180px) { .zn-second { right: 0; } } /* под 1100: трите колони стават тесни — навиците стават карти за плъзгане */ @media (max-width: 1099.98px) { .zn-ledger { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding: 4px var(--gut) 10px; scroll-padding-inline: var(--gut); } .zn-ledger::-webkit-scrollbar { display: none; } /* картата идва при плъзгане — екранът не чака цялото задраскване */ .zn-row { --di: 0s; --nd: .45s; flex: 0 0 min(84%, 420px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; padding: 20px 18px 18px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015) 70%); box-shadow: inset 0 0 0 1px var(--edge), 0 30px 60px -34px rgba(0, 0, 0, .8); } .zn-old { --L: 2.1rem; margin: 0; padding: 0; min-height: calc(var(--L) * 2); font-size: 1.22rem; } .zn-row:first-child .zn-old::before, .zn-row:last-child .zn-old::before { -webkit-mask-image: none; mask-image: none; } /* във flex колона екранът се разтяга на цялата ширина на картата (иначе изрезът с container-type се свива до 0) */ .zn-new { align-self: stretch; width: 100%; margin-top: auto; } /* точките са общите (.dots в styles.css, site.js: [data-swipe]) */ .zn-dots { display: flex; margin-top: 2px; } .zn-book-end { margin-top: 48px; } } /* таблет и тесен лаптоп */ @media (max-width: 1023.98px) { /* халето: картата за България слиза под снимката (застъпва долния ѝ ръб) */ .zn-hale { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; } .zn-hale-h { grid-column: 1; grid-row: 1; padding-bottom: 76px; } .zn-turn { grid-column: 1; grid-row: 2; justify-self: end; max-width: 500px; margin: -52px clamp(16px, 3vw, 32px) 0 0; } .zn-hale-cap { grid-row: 3; } .zn-b-letter { font-size: clamp(10rem, 4rem + 14vw, 15rem); } .zn-road-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } .zn-final-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); } } /* телефон */ @media (max-width: 860px) { .zn-hero { padding-top: calc(var(--nav-h) + 26px); } .zn-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "vis" "intro"; grid-template-rows: none; } /* „специализиран“ остава на всяка ширина — шрифтът се смалява, думата не се крие */ .zn-hero h1 { font-size: clamp(2.05rem, 1rem + 5.4vw, 2.8rem); line-height: 1.04; } .zn-hero-visual { --rig: 66px; --hw: 11px; --hx: calc(var(--rig) - 30px); --px: calc(var(--hx) - 10px); --bw: 80px; width: 100%; max-width: 440px; margin-top: 14px; } .zn-knuckle { height: 10px; top: calc(var(--ht) + var(--hl) / 2 - 5px); } .zn-pole { width: 4px; } .zn-rig::before { left: calc(var(--hx) - 22px); width: 84px; } .zn-head::before, .zn-head::after { height: 8px; } .zn-rim { --rx: 2px; } .zn-portrait { max-width: none; } .zn-portrait figcaption { padding: 40px 7% 4%; } .zn-intro { margin-top: 12px; padding-bottom: 0; } .zn-book { padding-top: 56px; } .zn-book .sec-head > p { font-size: 1.06rem; text-wrap: pretty; } .zn-row { flex-basis: 86%; padding-inline: 16px; } .zn-old { font-size: 1.1rem; } .zn-book-end { margin-top: 44px; font-size: clamp(1.6rem, 1rem + 3vw, 2.1rem); } .zn-quote-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .zn-quote-text { padding-top: 12px; } .zn-quote h2 { font-size: clamp(2.2rem, 1rem + 6vw, 3rem); } .zn-sign::before { width: 440px; height: 440px; } .zn-sign-phone { width: min(262px, 66vw); } /* халето на таблет: в полето, 3:2 */ .zn-hale-img { aspect-ratio: 3 / 2; border-radius: 18px; } .zn-hale-img::after { background: linear-gradient(0deg, rgba(6, 10, 14, .96) 0%, rgba(6, 10, 14, .8) 32%, rgba(6, 10, 14, .22) 60%, rgba(6, 10, 14, 0) 72%); } .zn-hale-h { grid-column: 1; grid-row: 1; max-width: none; padding: 0 clamp(20px, 4vw, 32px) 76px; font-size: clamp(1.75rem, 1rem + 3.4vw, 2.2rem); } .zn-turn { justify-self: stretch; max-width: none; margin: -52px 0 0; padding: 24px 22px 24px; } .zn-turn p { margin-top: 22px; font-size: clamp(1.45rem, 1rem + 2.4vw, 1.8rem); } .zn-hale-cap { margin-top: 14px; font-size: 14.5px; } /* куката и отговорът заедно, картинката след тях; абзацът е едно изречение */ .zn-why-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "p" "b"; grid-template-rows: none; row-gap: 18px; } .zn-long { display: none; } .zn-why-line { margin-top: 0; } /* „щета категория B“ не се разделя — шрифтът следва ширината на телефона */ .zn-why-h { font-size: min(2.05rem, 8.5vw); } /* B стои цяло над лентата — лентата застъпва само сиянието */ .zn-b { width: 100%; max-width: 520px; justify-self: center; margin-top: 8px; padding: 132px 0 0; } .zn-b-letter { font-size: 9.5rem; top: 0; left: -4px; } /* листът A–D остава в полето, със заоблени ъгли */ .zn-b-ring { border-radius: 2.6cqw; } .zn-second { position: relative; left: auto; right: auto; bottom: auto; width: max-content; max-width: 100%; margin: -10px 0 0 auto; } .zn-b-cap { display: none; } .zn-born { padding-block: 100px 88px; } .zn-born-mark, .zn-born-icon { width: 72px; height: 72px; } .zn-born-icon { border-radius: 19px; } .zn-field { inset: -260px calc(36px - 50vw); -webkit-mask-image: linear-gradient(180deg, transparent 26%, #000 38%, #000 74%, transparent 88%), radial-gradient(62% 26% at 50% 50%, #000 26%, rgba(0, 0, 0, .5) 56%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 26%, #000 38%, #000 74%, transparent 88%), radial-gradient(62% 26% at 50% 50%, #000 26%, rgba(0, 0, 0, .5) 56%, transparent 100%); mask-composite: intersect; } .zn-born h2 { margin-top: 28px; } .zn-born h2::before { inset: -20px -24px; } .zn-born-line { font-size: 1.05rem; } .zn-road-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "plan" "map" "note"; } .zn-road-copy { display: contents; } .zn-road-head { grid-area: head; } .zn-plan { grid-area: plan; margin-top: 26px; column-gap: 18px; } .zn-plan b { font-size: 4.4rem; } .zn-map { grid-area: map; margin-top: 26px; } .zn-road-note { grid-area: note; margin-top: 26px; } /* призивът на телефон: заглавието → Николай под лампата → бутонът → редът и контактите */ .zn-final-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "vis" "copy"; grid-template-rows: none; justify-items: center; text-align: center; } .zn-final::before { left: 50%; top: 46%; width: 760px; height: 760px; } .zn-final-h { align-self: auto; font-size: clamp(2.1rem, 1rem + 5vw, 2.8rem); margin-inline: auto; } .zn-final-vis { max-width: 300px; margin-top: 22px; } .zn-portrait-sm { max-width: 234px; } .zn-final-copy { display: flex; flex-direction: column; align-items: center; width: 100%; } .zn-final .btn-xl { width: 100%; font-size: 19px; padding: 18px 24px; margin-top: 22px; } .zn-meet-row { justify-content: center; gap: 6px 18px; } .zn-me-links { justify-content: center; flex-direction: column; align-items: center; gap: 0; } } /* телефон: халето — от ръб до ръб, 4:5 (отделен изрез от оригинала, crop/zavod-hale-4x5) */ @media (max-width: 600px) { .zn-hale-img { margin-inline: calc(var(--gut) * -1); aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; } .zn-hale-img img { object-position: 50% 50%; } .zn-hale-img::after { background: linear-gradient(0deg, rgba(6, 10, 14, .96) 0%, rgba(6, 10, 14, .78) 28%, rgba(6, 10, 14, .2) 52%, rgba(6, 10, 14, 0) 62%); } .zn-hale-h { padding: 0 0 76px; } } @media (max-width: 380px) { .zn-hero-visual { --rig: 60px; --hx: calc(var(--rig) - 28px); --bw: 72px; } }