/* ── Medicxab · спільні стилі публічних сторінок ────────────────── Каркас 24.09.2026. Кольори, теми й доступність узято з site.html: сторінки мають виглядати як частина сайту, а не як чужі вставки. Тому змінні ті самі — змінив тему на головній, змінилась усюди. */ :root{ --bil:#fff; --tx:#f2e8eb; --tx2:#c8b3b9; --tx3:#96808a; --rose:#e39aab; --akc:#c8163f; --akc2:#ff8fa5; --chervon:#ff5a6e; --ok:#5fd6a0; --bad:#ff8f8f; --skl:rgba(255,255,255,.045); --rama:rgba(242,232,235,.13); --rama2:rgba(242,232,235,.22); --g1:#3a0f1d; --g2:#260a14; --g3:#150509; --syayvo:rgba(190,60,90,.22); --pidlozhka:rgba(26,8,14,.92); --sans:"Onest","Segoe UI",system-ui,sans-serif; --mono:ui-monospace,"SFMono-Regular",Consolas,monospace; color-scheme:dark; } /* Графіт — тема за замовчуванням (рішення Мираж 15.09). */ html[data-kolir="hrafit"]{--tx:#f0eee9;--tx2:#c3c8d0;--tx3:#8e949e;--rose:#d9b2bc; --akc:#8a2a42;--akc2:#e0b8c2;--rama:rgba(240,238,233,.13);--rama2:rgba(240,238,233,.23); --g1:#3a4152;--g2:#232833;--g3:#101217;--syayvo:rgba(200,205,215,.12); --pidlozhka:rgba(20,22,28,.94)} html[data-kolir="sapfir"]{--akc:#1f3d9e;--akc2:#9db4ff;--rose:#b7c6f0; --g1:#182a5e;--g2:#101b3a;--g3:#080c19;--syayvo:rgba(120,150,230,.18); --pidlozhka:rgba(10,15,30,.94)} html[data-kolir="biryuza"]{--akc:#0a5a5f;--akc2:#8fe3e0;--rose:#a8d8d6; --g1:#0e3f43;--g2:#0a2a2d;--g3:#041315;--syayvo:rgba(90,200,200,.16); --pidlozhka:rgba(6,20,22,.94)} /* Висока контрастність — для людей з порушенням зору. */ html[data-kontrast="1"][data-kolir]{--tx:#fff;--tx2:#fff;--tx3:#eee;--rose:#ffd84d; --akc:#ffd84d;--akc2:#ffd84d;--skl:#000;--rama:#fff;--rama2:#fff; --g1:#000;--g2:#000;--g3:#000;--syayvo:transparent} html[data-fs="1"]{font-size:112.5%} html[data-fs="2"]{font-size:125%} html[data-lnk="1"] main a,html[data-lnk="1"] footer a{text-decoration:underline;text-underline-offset:3px} *{box-sizing:border-box} html{background:var(--g3);scroll-behavior:smooth;scroll-padding-top:90px} body{margin:0;min-height:100vh;color:var(--tx);font:400 1rem/1.6 var(--sans);overflow-x:hidden; background:radial-gradient(60% 55% at 0% 0%, var(--syayvo), transparent 70%), linear-gradient(135deg,var(--g1) 0%,var(--g2) 45%,var(--g3) 100%) fixed} /* Ледь помітне зерно: без нього градієнт смугує на великих екранах. */ body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55; background:url("data:image/svg+xml;utf8,")} html[data-ruh="0"] *{animation:none!important;transition:none!important} /* ── шапка: той самий «острів», що на першій сторінці ────────── Було смугою на всю ширину — вибивалось зі стилю. Тепер плаваюча панель зі скругленням, як у макеті. */ .shapka{position:fixed;top:14px;left:0;right:0;z-index:50; display:flex;justify-content:center;pointer-events:none;padding-inline:16px} .shapka-v{pointer-events:auto;display:flex;align-items:center; gap:clamp(8px,1.6vw,18px);padding:6px 10px 6px 6px;border-radius:999px; background:rgba(255,255,255,.05); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); box-shadow:inset 0 0 0 1px var(--rama),0 18px 40px -24px rgba(0,0,0,.9); max-width:100%} /* Сторінка починається нижче панелі — вона плаває поверх. */ body{padding-top:76px} .logo{display:flex;align-items:center;gap:9px;text-decoration:none; color:var(--tx);font-weight:600;letter-spacing:-.01em;white-space:nowrap; padding:4px 6px 4px 8px} .nav{display:flex;gap:clamp(6px,1.2vw,16px);flex-wrap:wrap;align-items:center} /* ═══ МЕНЮ — ЯК НА ПЕРШІЙ СТОРІНЦІ (.lanky a в макеті) ═══ 24.09, Мираж: «зроби точно так само, як на 1 сторінці». Ті самі відступи, той самий радіус, той самий ховер — легкий світлий підклад, без тіней і без зеленого. */ /* 24.09, Мираж: «не потрібно кнопками з підсвіткою». Прибрано ВСЕ, що малює кнопку: підклад на ховері, радіус і бічні відступи, через які капсула взагалі була видима. Лишився чистий текст, який на наведення просто світлішає. */ .nav a{color:var(--tx2);text-decoration:none;font-size:.9rem; padding:8px 0;white-space:nowrap;transition:color .2s} .nav a:hover{color:var(--bil)} /* Активний пункт: у макеті такої позначки немає взагалі, тому тут теж нічого не малюємо — ні рамки, ні підкладу. */ .nav a[aria-current="page"]{color:var(--tx)} @media(max-width:880px){ .shapka-v{flex-wrap:wrap;justify-content:center;border-radius:22px; padding:8px 10px} .nav{justify-content:center;gap:4px} .nav a{font-size:.84rem;padding:5px 8px} body{padding-top:104px} } /* ── вміст ─────────────────────────────────────────────── */ main{position:relative;z-index:2;width:min(820px,100%);margin:0 auto; padding:clamp(28px,5vw,64px) clamp(16px,4vw,32px) 64px} main.shyr{width:min(1180px,100%)} .bry{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-bottom:10px} h1{font:600 clamp(1.9rem,4.4vw,3rem)/1.12 var(--sans);letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance} h2{font:600 clamp(1.3rem,2.6vw,1.75rem)/1.25 var(--sans);letter-spacing:-.015em;margin:38px 0 12px;text-wrap:balance} h3{font:600 1.08rem/1.35 var(--sans);margin:26px 0 8px} p{margin:0 0 14px;color:var(--tx2)} main a{color:var(--akc2)} ul,ol{margin:0 0 16px;padding-left:22px;color:var(--tx2)} li{margin-bottom:7px} strong{color:var(--tx);font-weight:600} .lid{font-size:1.08rem;color:var(--tx2);margin-bottom:26px} hr{border:0;border-top:1px solid var(--rama);margin:34px 0} /* Картка-виноска: нею виділяємо головне в документах і статтях. */ .vyn{background:var(--skl);box-shadow:inset 0 0 0 1px var(--rama);border-radius:14px; padding:16px 18px;margin:0 0 18px} .vyn p:last-child{margin-bottom:0} .dr{color:var(--tx3);font-size:.9rem} table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.95rem} th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--rama);color:var(--tx2)} th{color:var(--tx);font-weight:600} /* ── підвал ────────────────────────────────────────────── */ footer{position:relative;z-index:2;border-top:1px solid var(--rama); background:rgba(0,0,0,.18);padding:26px clamp(16px,4vw,32px) 34px} .pidval{width:min(1180px,100%);margin:0 auto;display:flex;flex-wrap:wrap; gap:10px 20px;align-items:center;font-size:.9rem} /* ═══ ПІДВАЛ — ЯК НА ПЕРШІЙ СТОРІНЦІ (footer.niz a) ═══ У макеті це звичайні підкреслені посилання: жодних підкладів, радіусів і тіней. На ховері просто світлішають. */ /* Підкреслення теж прибрано: Мираж обвів саме цю смужку під «Публічна оферта». Звичайний текст, на ховері світлішає. */ .pidval a{color:var(--tx3);text-decoration:none; padding:0;border-radius:0;transition:color .2s} .pidval a:hover{color:var(--bil)} .pidval .c{color:var(--tx3);margin-left:auto} @media(max-width:700px){.pidval .c{margin-left:0;width:100%}} /* ═══════════ СКЛАДАННЯ ШАПКИ ПІД ЧАС ПРОКРУТКИ (24.09) ═══════════ Мираж: «меню якщо прокручувати вниз, на цих сторінках має складатись так само, як на 1 сторінці». Поводимось як .panel.zgorn у макеті: їдемо вниз — посилання ховаються, лишається логотип; наводимо мишку або їдемо вгору — усе повертається. */ .shapka-v{transition:gap .26s ease, padding .26s ease} .nav{transition:max-width .32s cubic-bezier(.2,.8,.2,1), height .32s ease, opacity .22s ease} .shapka.zgorn .shapka-v:not(:hover):not(:focus-within){gap:0;padding:6px} /* 🐞 24.09: складена панель роздувалась у величезну капсулу 138x271. Причина: .nav має flex-wrap:wrap, і при max-width:0 посилання не зникали, а переносились по одному в стовпчик — ширина 0, зате висота на пів екрана. Тому тут не лише ширина: height:0 і nowrap не дають рядкам переноситись, а overflow ховає те, що не влізло. */ .shapka.zgorn .shapka-v:not(:hover):not(:focus-within) .nav{ max-width:0;height:0;opacity:0;overflow:hidden;flex-wrap:nowrap} /* Як на першій сторінці: у складеному стані лишається САМ логотип — напис «Medicxab» теж ховається, і панель стає рівним кружечком 50x50, а не пігулкою з назвою. Еталон виміряно на макеті. */ .logo span:not(.mlogo),.logo{transition:max-width .32s cubic-bezier(.2,.8,.2,1), gap .26s ease, padding .26s ease} .shapka.zgorn .shapka-v:not(:hover):not(:focus-within) .logo{ gap:0;padding:0;font-size:0} .shapka.zgorn .shapka-v:not(:hover):not(:focus-within) .mlogo{font-size:0} @media(prefers-reduced-motion:reduce){ .shapka-v,.nav{transition:none} } /* ═══════════ ДОСТУПНІСТЬ (24.09) ═══════════ Мираж: «везде в плашки добавь доступность в виде очков». Кнопка-окуляри живе в шапці поруч із меню, панель випадає під нею. Самі ефекти (розмір, контраст, підкреслення, без анімацій) уже були вище — бракувало тільки способу їх увімкнути. */ .okul-mini{border:0;background:none;cursor:pointer;height:36px; border-radius:999px;display:grid;place-items:center;padding:0 8px; color:#fff;flex:none;transition:background .2s} .okul-mini:hover{background:rgba(255,255,255,.07)} .okul-mini svg{width:26px;height:auto;overflow:visible} /* У складеному стані окуляри ховаються разом із меню. */ .shapka.zgorn .shapka-v:not(:hover):not(:focus-within) .okul-mini{ max-width:0;padding:0;opacity:0;overflow:hidden} .dost-p{position:fixed;right:16px;top:74px;z-index:60;color:var(--tx); width:min(290px,calc(100vw - 36px));padding:18px;border-radius:22px; display:grid;gap:14px;font-size:.9rem; background:rgba(22,24,30,.92); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); box-shadow:inset 0 0 0 1px var(--rama),0 24px 50px -30px rgba(0,0,0,.95)} .dost-p[hidden]{display:none} html[data-kontrast="1"] .dost-p{background:#000; box-shadow:inset 0 0 0 2px #fff;text-shadow:none} .dost-p .z{display:flex;justify-content:space-between;align-items:center} .dost-p b{font-weight:600;color:var(--bil)} .dost-p .ryad{display:flex;justify-content:space-between; align-items:center;gap:10px} .dost-p label{display:flex;justify-content:space-between; align-items:center;gap:10px;cursor:pointer} .zgornuty{border:0;background:rgba(255,255,255,.08);cursor:pointer; color:var(--bil);font-size:1.1rem;line-height:1;width:30px;height:30px; border-radius:50%} /* Перемикач розміру тексту. */ .dost-p .seg{display:flex;gap:4px;background:rgba(255,255,255,.06); padding:3px;border-radius:999px} .dost-p .seg button{flex:none;border:0;background:none;cursor:pointer; color:var(--tx2);padding:5px 11px;border-radius:999px;font-size:.85rem; transition:background .2s, color .2s} .dost-p .seg button.on{background:#f2f2f2;color:#111} /* Вимикачі. */ .dost-p input[type=checkbox]{appearance:none;-webkit-appearance:none; width:40px;height:24px;border-radius:999px;flex:none; background:rgba(127,127,127,.3);position:relative;cursor:pointer; transition:background .2s} .dost-p input[type=checkbox]::after{content:"";position:absolute;top:3px; left:3px;width:18px;height:18px;border-radius:50%;background:#fff; transition:transform .2s} .dost-p input[type=checkbox]:checked{background:var(--rose)} .dost-p input[type=checkbox]:checked::after{transform:translateX(16px)} /* Технічний підпис на «Про нас» (24.09). Мираж просив «шрифт інший, більш прямий, і приглушити». Моноширинний — він уже підключений як --mono (системний, нічого не вантажиться) і читається як підпис інженера. Рябі «Матриці» тут навмисно НЕМАЄ: поруч стоїть рядок про команду викладачів, і спецефект на технічному виконавці перетягував би увагу на себе. Матриця лишається в підвалі макета, де вона доречна. */ .pidpys-teh{font-family:var(--mono);font-size:.94em;letter-spacing:.04em; /* 🐞 було --tx2 — СВІТЛІШЕ за сусідній текст, тобто підпис не глушився, а навпаки підсвічувався. Беремо колір рядка, щоб виділявся лише накресленням: Мираж просив «приглушити». */ color:inherit} /* ═══════ ПИТАННЯ Й ВІДПОВІДІ на «Про нас» (28.09) ═══════ Мираж: «додай блоками красиво». Той самий FAQ, що в Mini App — один список на два місця, щоб не розійшлися. */ .faq-sitka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;margin-top:18px} @media(max-width:820px){.faq-sitka{grid-template-columns:1fr}} .faq-blok{background:var(--skl);border-radius:18px;padding:18px 20px; box-shadow:inset 0 0 0 1px var(--rama), 0 10px 22px -16px rgba(0,0,0,.8); transition:box-shadow .26s ease} /* Фірмове свічення З-ПІД блоку — те саме, що на картках макета. 🔴 Підйому НЕМАЄ навмисно: 24.09 зʼясували, що саме він малює світлу смугу в зазорі (рамка їде на нове місце). Тіні тримаємо в межах gap 14px: 8+16/2-8=8 і 14+30/2-14=15. */ @media (hover:hover){.faq-blok:hover{box-shadow:inset 0 0 0 1px var(--rama), 0 8px 16px -8px rgba(61,220,151,.72), 0 14px 30px -14px rgba(61,220,151,.5)}} .faq-blok:has(details[open]){box-shadow:inset 0 0 0 1px var(--rama), 0 8px 16px -8px rgba(61,220,151,.72), 0 14px 30px -14px rgba(61,220,151,.5)} .faq-blok h3{margin:0 0 10px;font-size:.96rem;font-weight:600; color:var(--tx);letter-spacing:.01em} .faq-blok details{border-top:1px solid var(--rama);padding:9px 0} .faq-blok details:first-of-type{border-top:0;padding-top:2px} .faq-blok summary{cursor:pointer;font-size:.9rem;color:var(--tx2); list-style:none;transition:color .2s;padding-right:18px;position:relative} .faq-blok summary::-webkit-details-marker{display:none} .faq-blok summary::after{content:"+";position:absolute;right:0;top:-1px; color:var(--tx3);font-weight:600;transition:transform .2s, color .2s} .faq-blok details[open] summary{color:var(--tx);font-weight:500} .faq-blok details[open] summary::after{content:"\2212";color:var(--tx2)} .faq-blok summary:hover{color:var(--bil)} .faq-blok details p{margin:8px 0 2px;font-size:.87rem;line-height:1.5; color:var(--tx3)} /* == Шапка як на головнiй (30.09.2026) ========================= * Мираж: на 1 сторiнцi вона вiдмiнна довжиною, а в iнших * вкладках менша - це вiзуально вибивається. Зробити скрiзь як * на головнiй. Так само лого: на головнiй обiдка круг, а тут овал. * * Замiряно в браузерi ДО правки: * головна: .ostriv 802x52, лого 40x40, gap 4px, padding 6px * пiдсторiнки: .shapka-v 659x51, лого 30x30, gap 18px, padding 6px 10px 6px 6px */ .shapka-v{ padding:6px; gap:4px; } .shapka .logo{ gap:10px; padding:0 6px 0 0; border-radius:999px; height:40px; } .shapka .mlogo{ width:40px; height:40px; } .shapka .nav{ gap:2px; } .shapka .nav a{ padding:8px 14px; border-radius:999px; } /* Кнопка Увiйти на пiдсторiнках — тi самi розмiри, що на головнiй. Веде на головну: сам вхiд живе там, механiку не дублюємо. */ .shapka .uviyty-l{ border:0; border-radius:999px; background:none; color:var(--bil); font-weight:600; font-size:.9rem; padding:8px 14px; margin-left:2px; text-decoration:none; white-space:nowrap; transition:transform .22s ease, background .22s ease; } .shapka .uviyty-l:hover{ transform:translateY(-1px); background:rgba(255,255,255,.07); } /* На вузьких екранах меню пiдсторiнок переносилось у три рядки: шапка ставала 176px замiсть 52. Мираж цього ще не бачив, але на телефонi це те саме вибивання, про яке вiн казав. Ховаємо частину пунктiв — лишаємо головне. */ @media (max-width:880px){ .shapka .nav a:nth-child(n+4){display:none} .shapka .nav{flex-wrap:nowrap} } @media (max-width:560px){ /* На телефонi лишаємо тiльки Головну: решта не влазить у один рядок, а шапка мусить бути 52px, як на головнiй. */ .shapka .nav a:nth-child(n+2){display:none} .shapka-v{gap:2px} .shapka .uviyty-l{padding:8px 10px} .shapka .logo .zg,.shapka .logo{font-size:.92rem} } @media (max-width:400px){ /* На 360px не влазила кнопка доступностi — переносилась у другий рядок, шапка ставала 90px замiсть 52. Ховаємо Увiйти: вхiд є на головнiй, куди веде сам логотип. Доступнiсть важливiша — без неї людина з поганим зором не змiнить розмiр тексту. */ .shapka .uviyty-l{display:none} .shapka .nav{display:none} } /* Логотип фарбується змiнною --mlogo, яку крутить скрипт при прокрутцi (бiлий -> бiрюзовий). Ранiше тут стояв var(--tx) — колiр не мiнявся взагалi. Запасне значення — колiр тексту, щоб до першого скролу логотип був видимий. */ .shapka .mlogo{background:var(--mlogo, var(--tx))} /* Довжина шапки як на головнiй (30.09.2026). Мираж: «прибрав кнопку увiйти — рядок став коротший вiдносно головної, куцо дивиться». Замiряно: головна 802px, пiдсторiнки 728px. Рiзниця 74px — рiвно ширина кнопки, якої тут немає. Тому задаємо ту саму довжину прямо, а вiльне мiсце вiддаємо меню: пункти розходяться ширше й виглядають як на головнiй. */ /* ширину знято: з кнопкою Увiйти вона збiгається сама */ /* Шапка згортається в логотип при прокрутцi — як на головнiй. Мираж: «щоб шапка складалась у логотип i не показувала кнопку увiйти». На головнiй ховається все, крiм самого знака; наведеш мишу — розкривається назад. Тут те саме. */ .shapka-v{transition:gap .26s ease, padding .26s ease, width .26s ease} .shapka .nav,.shapka .uviyty-l,.shapka .zg-nazva, .shapka .okul-mini{ transition:max-width .32s cubic-bezier(.2,.8,.2,1), opacity .22s ease, padding .26s ease, margin .26s ease; overflow:hidden; white-space:nowrap; } @media (min-width:1024px){ .shapka.zgorn .shapka-v:not(:hover):not(:focus-within){ width:auto; gap:0; padding:6px; } } .shapka.zgorn .shapka-v:not(:hover):not(:focus-within) .nav, .shapka.zgorn .shapka-v:not(:hover):not(:focus-within) .uviyty-l, .shapka.zgorn .shapka-v:not(:hover):not(:focus-within) .okul-mini, .shapka.zgorn .shapka-v:not(:hover):not(:focus-within) .zg-nazva{ max-width:0; opacity:0; padding-inline:0; margin:0; } .shapka .zg-nazva{display:inline-flex;max-width:200px;opacity:1} .shapka.zgorn .shapka-v:not(:hover):not(:focus-within) .logo{ padding:0; gap:0; } /* ═══════════ 18.10.2026: шторка меню, новий підвал, кнопки, підвал внизу ═══════════ */ body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh} body>main{flex:1 0 auto} .knr{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0} .knp{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 18px; font:500 .96rem var(--sans);text-decoration:none;background:#fff;color:#16090d;cursor:pointer; box-shadow:0 8px 18px -12px rgba(0,0,0,.9);transition:transform .2s} .knp:hover{transform:translateY(-1px)} .knp.g{background:rgba(255,255,255,.08);color:var(--bil);box-shadow:inset 0 0 0 1px var(--rama2)} .knp svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .knp.sm{padding:11px 8px;font-size:.88rem;border-radius:13px;gap:6px} main a.knp{color:#16090d;text-decoration:none} main a.knp.g{color:var(--bil)} html[data-kontrast="1"] .knp{background:#ffd84d;color:#000;box-shadow:none} html[data-kontrast="1"] .knp.g,html[data-kontrast="1"] main a.knp.g{background:#000;color:#fff;box-shadow:inset 0 0 0 2px #fff} html[data-ruh="0"] .knp{transition:none} @media(max-width:560px){.knr{flex-direction:column}.knr .knp{width:100%}} footer.nf{position:relative;z-index:2;flex:none;border-top:1px solid var(--rama);background:rgba(0,0,0,.22); padding:22px clamp(16px,4vw,32px) 30px} .nf-v{width:min(1180px,100%);margin:0 auto} .nf-r3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .nf-docs{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rama);border-bottom:1px solid var(--rama)} .nf-docs a{padding:11px 4px;text-align:center;font-size:.78rem;line-height:1.3;color:var(--tx3); border-right:1px solid var(--rama);text-decoration:none;transition:color .2s} .nf-docs a:last-child{border-right:0} @media (hover:hover){.nf-docs a:hover{color:var(--bil)}} .nf-base{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:.82rem;color:var(--tx3);min-height:20px} .nf-base .c{margin-left:auto} @media(min-width:900px){ .nf-v{display:grid;grid-template-columns:minmax(300px,420px) 1fr;column-gap:36px;align-items:center} .nf-docs{margin-top:0;max-width:560px;width:100%;justify-self:end} .nf-base{grid-column:1/-1} } .mirazh{display:inline-flex;gap:.06em;vertical-align:baseline; font:inherit;letter-spacing:inherit; opacity:0;pointer-events:none;user-select:none; transition:opacity .25s ease} .mirazh.vydno{opacity:1} /* Поки буква в шумі — тримаємо ширину, щоб рядок не стрибав. Спіймана — звичайна буква, інакше «by Mirage» виглядає розрідженим. */ .mirazh i{display:inline-block;font-style:normal;text-align:center} /* Символ ще не спійманий — зелений моноширинний шум. */ .mirazh i.shum{min-width:.52em;font-family:var(--mono);color:#3ddc84;opacity:.72; font-size:.86em;text-shadow:0 0 6px rgba(61,220,132,.5)} /* Спалах у момент фіксації. */ .mirazh i.spalah{animation:mzh-spalah .42s ease-out} @keyframes mzh-spalah{ 0%{color:#3ddc84;text-shadow:0 0 14px rgba(61,220,132,.95)} 100%{color:inherit;text-shadow:none}} /* Спіймана буква: глітч розводить червоний і синій канали. */ /* Спіймана буква — кольором підвалу, глітч ледь помітний. */ .mirazh i.ok{color:inherit; text-shadow:.02em 0 rgba(255,80,80,.2),-.02em 0 rgba(80,180,255,.2)} /* Скан-лінії — лише в момент появи, близько секунди. */ .mirazh.skan::after{content:"";position:absolute;inset:-4px -8px;pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(61,220,132,.09) 0 1px, transparent 1px 3px); animation:mzh-skan 1s linear forwards} @keyframes mzh-skan{to{opacity:0}} .mirazh{position:relative} /* Без руху міражу просто немає — рішення Мираж. */ html[data-ruh="0"] .mirazh{display:none} /* меню-шторка (телефон) */ .shapka .kn-menu{display:none;border:0;background:none;width:40px;height:40px;border-radius:50%;cursor:pointer; place-items:center;color:var(--bil);padding:0;flex:none} .shapka .kn-menu svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round} .msh{position:fixed;inset:0;z-index:45} .msh[hidden]{display:none} .msh::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)} .msh-v{position:absolute;left:16px;right:16px;top:74px;padding:14px;border-radius:22px;display:grid;gap:10px; background:var(--pidlozhka);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:inset 0 0 0 1px var(--rama2),0 30px 60px -30px #000;max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow:auto} .msh-g{display:grid;grid-template-columns:1fr 1fr;gap:10px} .msh-g a{display:flex;align-items:center;gap:12px;padding:15px 14px;border-radius:18px;background:var(--skl); box-shadow:inset 0 0 0 1px var(--rama);color:var(--bil);text-decoration:none;font-weight:500;font-size:.98rem} .msh-g a svg{width:22px;height:22px;flex:none;stroke:var(--akc2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} @media(max-width:700px){ .shapka .nav{display:none!important} .shapka .kn-menu{display:grid} .shapka-v{flex-wrap:nowrap!important} } @media(min-width:701px){.msh{display:none!important}} /* 18.10: телефон — шапка підсторінок ховається при прокрутці вниз */ @media (max-width:700px){ .shapka .shapka-v{transition:background .25s,box-shadow .25s !important} .shapka .shapka-v>*:not(.logo){transition:opacity .22s,max-width .25s,padding .25s,margin .25s !important} .shapka.mx-mala .shapka-v{padding:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .shapka.mx-mala .shapka-v>*:not(.logo){opacity:0;max-width:0;padding:0;margin:0;overflow:hidden;pointer-events:none} .shapka.mx-mala .logo .zg-nazva{display:none} .shapka.mx-mala .logo{padding:0;border-radius:50%;background:rgba(22,24,31,.94);box-shadow:0 0 0 1px rgba(242,238,233,.18),0 8px 20px -8px rgba(0,0,0,.8)} } /* 18.10: на телефоні шапка підсторінок — довга, на всю ширину, як на головній */ @media (max-width:700px){ .shapka{top:14px;padding-inline:16px} .shapka .shapka-v{width:100%;max-width:none;justify-content:space-between;padding:6px;gap:4px;border-radius:999px} .shapka .uviyty-l{display:inline-block !important;margin-left:auto;padding:8px 10px;font-size:.9rem} .shapka.mx-mala .shapka-v{width:auto;margin:0 auto} } /* 22.10 (v3): підвал — у стилі «Публічна оферта»: ліворуч сторінки, праворуч документи, один ряд */ .nf-v{display:block!important} .nf-row{display:flex;align-items:stretch;justify-content:space-between;gap:48px} .nf-row .nf-docs{margin-top:0!important;max-width:none!important;width:auto!important;justify-self:auto!important;display:grid} .nf-lk{grid-template-columns:repeat(4,auto)!important} .nf-lk a{padding:11px 22px!important;font-size:.88rem!important;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--tx2)!important} .nf-lk a svg{width:15px;height:15px;fill:currentColor;flex:none} .nf-row .nf-docs:not(.nf-lk){grid-template-columns:repeat(3,auto)} .nf-row .nf-docs:not(.nf-lk) a{padding:11px 22px} .nf-base{margin-top:16px!important} @media (max-width:1180px){.nf-row{gap:28px}.nf-lk a{padding:11px 16px!important}.nf-row .nf-docs:not(.nf-lk) a{padding:11px 14px}} @media (max-width:980px){.nf-row{flex-direction:column;gap:14px}.nf-lk{grid-template-columns:repeat(4,1fr)!important}.nf-row .nf-docs:not(.nf-lk){grid-template-columns:repeat(3,1fr)}} @media (max-width:560px){.nf-lk{grid-template-columns:repeat(2,1fr)!important}.nf-lk a:nth-child(2){border-right:0}.nf-lk a:nth-child(-n+2){border-bottom:1px solid var(--rama)}}