/* ========================================================= Психологічна служба ЗЗСО №19, м. Чернігів Дизайн-система: "М'яка м'ята" ========================================================= */ /* ---------- 1. Токени ---------- */ :root{ /* базові (світла тема) */ --ink: #15302c; --ink-soft: #40605a; --ink-mute: #527069; --paper: #f4fbf9; --white: #ffffff; /* переходи для плавної зміни теми */ --theme-t: background-color .3s ease, color .3s ease, border-color .3s ease; /* поверхні / межі / тіні — RGB-трійки, щоб теми могли міняти лише базовий колір */ --surface-rgb: 255,255,255; --border-rgb: 0,105,92; --shadow-rgb: 0,55,50; /* акцент за замовчуванням — м'ята */ --a: #26a69a; --a-dark: #00695c; /* --a-ink — колір акцентного тексту на тонованих поверхнях, адаптується в темній темі */ --a-ink: var(--a-dark); /* --a-1/--a-2 — м'які тонування, обчислюються з акценту й фону, тому самі підлаштовуються під тему */ --a-1: color-mix(in srgb, var(--a) 14%, var(--paper)); --a-2: color-mix(in srgb, var(--a) 22%, var(--paper)); /* радіуси / тіні */ --r-xs: 12px; --r-sm: 16px; --r-md: 22px; --r-lg: 30px; --sh-1: 0 4px 12px rgba(var(--shadow-rgb),.06); --sh-2: 0 10px 28px rgba(var(--shadow-rgb),.09); --sh-3: 0 20px 50px rgba(var(--shadow-rgb),.14); /* ритм */ --wrap: 1120px; --gap: 22px; --sec: clamp(28px, 3.4vw, 40px); /* типографіка */ --display: "Unbounded", "Manrope", system-ui, sans-serif; --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; } /* акцентні теми — вішаються на або на будь-яку секцію */ [data-accent="mint"] { --a:#26a69a; --a-dark:#00695c; } [data-accent="violet"]{ --a:#7e57c2; --a-dark:#4527a0; } [data-accent="sky"] { --a:#2196f3; --a-dark:#0d47a1; } [data-accent="amber"] { --a:#f9a825; --a-dark:#a35b00; } [data-accent="rose"] { --a:#ec407a; --a-dark:#ad1457; } [data-accent="grass"] { --a:#5aa832; --a-dark:#33691e; } [data-accent="coral"] { --a:#ff7043; --a-dark:#bf360c; } /* ---------- 2. Скидання ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--body); font-size:18.5px; line-height:1.72; color:var(--ink); background:var(--paper); overflow-x:hidden; transition:var(--theme-t); } .site-footer, .note, .ground, .person{ transition:var(--theme-t); } img{ max-width:100%; display:block; } a{ color:var(--a-ink); text-decoration:none; transition:color .2s ease; } a:hover{ color:var(--a); } button{ font:inherit; } h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.25; margin:0 0 .5em; letter-spacing:-.01em; } h1{ font-size:clamp(32px,5.4vw,56px); } h2{ font-size:clamp(24px,3.3vw,35px); } h3{ font-size:clamp(20px,2.3vw,25px); } h4{ font-size:19px; font-family:var(--body); font-weight:800; } p{ margin:0 0 1.05em; } ul,ol{ margin:0 0 1.1em; padding-left:1.15em; } li{ margin-bottom:.5em; } :focus-visible{ outline:3px solid var(--a); outline-offset:3px; border-radius:6px; } /* ---------- 3. Живе тло ---------- */ .bg-stage{ position:fixed; inset:0; z-index:-2; overflow:hidden; background: radial-gradient(1100px 700px at 8% -6%, #e0f7f4 0%, transparent 62%), radial-gradient(900px 640px at 96% 4%, #eaf3ff 0%, transparent 60%), radial-gradient(1000px 800px at 50% 108%,#fdf3e6 0%, transparent 64%), linear-gradient(180deg,#f7fdfb 0%,#f2f9f7 55%,#f6fbff 100%); } .blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; animation:drift 26s ease-in-out infinite; } .blob.b1{ width:460px; height:460px; left:-120px; top:6%; background:#b2dfdb; } .blob.b2{ width:400px; height:400px; right:-110px; top:28%; background:#c5e1f9; animation-delay:-8s; } .blob.b3{ width:520px; height:520px; left:38%; bottom:-180px; background:#ffe0b2; animation-delay:-15s; opacity:.38; } .blob.b4{ width:300px; height:300px; right:16%; bottom:12%; background:#dcedc8; animation-delay:-4s; } @keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1); } 33% { transform:translate(46px,-38px) scale(1.09); } 66% { transform:translate(-34px,30px) scale(.94); } } /* легке "зерно", щоб градієнти не виглядали пластиковими */ .bg-grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.32; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } /* ---------- 4. Каркас ---------- */ .wrap{ width:min(100% - 36px, var(--wrap)); margin-inline:auto; } .section{ padding-block:var(--sec); } .section--tight{ padding-block:calc(var(--sec) * .55); } .stack > * + *{ margin-top:16px; } /* ---------- 5. Прогрес прокрутки ---------- */ .progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,#26a69a,#7e57c2,#f9a825); z-index:100; transition:width .12s linear; } /* ---------- 6. Шапка ---------- */ .site-header{ position:sticky; top:0; z-index:60; background:rgba(var(--surface-rgb),.72); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid rgba(var(--border-rgb),.08); transition:box-shadow .25s ease, background .25s ease; } .site-header.is-stuck{ box-shadow:0 6px 22px rgba(var(--shadow-rgb),.08); background:rgba(var(--surface-rgb),.9); } .header-in{ display:flex; align-items:center; gap:14px; min-height:70px; } .brand{ display:flex; align-items:center; gap:12px; margin-right:auto; } .brand-mark{ width:42px; height:42px; flex:none; border-radius:14px; background:linear-gradient(135deg,#26a69a,#4db6ac); display:grid; place-items:center; color:#fff; font-size:20px; box-shadow:0 6px 16px rgba(38,166,154,.34); position:relative; transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease; } .brand:hover .brand-mark{ transform:scale(1.1) rotate(-6deg); box-shadow:0 10px 24px rgba(38,166,154,.44); } .brand-mark::after{ content:""; position:absolute; inset:-5px; border-radius:18px; border:2px solid rgba(38,166,154,.35); animation:pulse 3.4s ease-out infinite; } @keyframes pulse{ 0%{ transform:scale(.9); opacity:.9 } 70%{ transform:scale(1.22); opacity:0 } 100%{ opacity:0 } } .brand-text b{ display:block; font-family:var(--display); font-size:15px; color:var(--a-ink); line-height:1.2; white-space:nowrap; } .brand-text span{ display:block; font-size:13px; color:var(--ink-mute); letter-spacing:.02em; white-space:nowrap; } .nav{ display:flex; align-items:center; gap:4px; } .nav a{ position:relative; padding:9px 10px; border-radius:11px; font-size:14.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap; transition:background .2s ease, color .2s ease; } .nav a:hover{ background:rgba(38,166,154,.1); color:var(--a-ink); } .nav a.active{ color:var(--a-ink); background:rgba(38,166,154,.14); } .nav a.active::after{ content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; border-radius:2px; background:var(--a); } .nav .nav-cta{ background:linear-gradient(135deg,color-mix(in srgb,#26a69a 25%,#00695c),#00695c); color:#fff; margin-left:6px; box-shadow:0 6px 16px rgba(38,166,154,.3); } .nav .nav-cta:hover{ background:linear-gradient(135deg,#00695c,#00453c); color:#fff; } .burger{ display:none; width:44px; height:44px; border:0; border-radius:13px; cursor:pointer; background:rgba(38,166,154,.12); color:var(--a-ink); } .burger span{ display:block; width:19px; height:2px; margin:4px auto; background:currentColor; border-radius:2px; transition:.28s; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } @media (max-width:1180px){ .burger{ display:block; } .nav{ position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:2px; padding:12px 18px 20px; background:rgba(var(--surface-rgb),.97); backdrop-filter:blur(16px); border-bottom:1px solid rgba(var(--border-rgb),.1); box-shadow:0 18px 40px rgba(var(--shadow-rgb),.12); transform:translateY(-14px); opacity:0; pointer-events:none; transition:.28s ease; } .nav.open{ transform:none; opacity:1; pointer-events:auto; } .nav a{ padding:12px 14px; font-size:16px; } .nav .nav-cta{ margin:8px 0 0; text-align:center; } } /* ---------- 7. Кнопки / чіпи ---------- */ .btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px; border:0; cursor:pointer; font-weight:700; font-size:15.5px; letter-spacing:.01em; transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, background .25s ease; position:relative; overflow:hidden; } .btn:active{ transform:translateY(1px) scale(.99); } .btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%); transform:translateX(-120%); transition:transform .6s ease; } .btn:hover::after{ transform:translateX(120%); } .btn-primary{ background:linear-gradient(135deg,color-mix(in srgb,var(--a) 25%,var(--a-dark)),var(--a-dark)); color:#fff; box-shadow:0 10px 24px color-mix(in srgb, var(--a) 38%, transparent); } .btn-primary:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 16px 34px color-mix(in srgb, var(--a) 46%, transparent); } .btn-ghost{ background:rgba(var(--surface-rgb),.85); color:var(--a-ink); box-shadow:var(--sh-1); border:1px solid rgba(var(--border-rgb),.12); } .btn-ghost:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); } .btn-sm{ padding:9px 17px; font-size:14px; } .chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:999px; font-size:14.5px; font-weight:700; background:var(--a-2); color:var(--a-ink); border:1px solid color-mix(in srgb, var(--a) 22%, transparent); transition:transform .25s ease, box-shadow .25s ease; } .chip:hover{ transform:translateY(-3px); box-shadow:var(--sh-1); } .eyebrow{ display:inline-block; font-size:13.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--a); margin-bottom:12px; } /* ---------- 8. Заголовок секції (стиль з ТЗ) ---------- */ .sec-head{ background:linear-gradient(135deg, var(--a-1), var(--a-2)); border-radius:var(--r-md); padding:28px 32px; text-align:center; border-left:6px solid var(--a); border-right:6px solid var(--a); box-shadow:var(--sh-1); margin-bottom:34px; position:relative; overflow:hidden; } .sec-head::before{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(var(--surface-rgb),.6) 50%,transparent 70%); transform:translateX(-120%); } .sec-head.in::before{ animation:sheen 1.5s .25s ease forwards; } @keyframes sheen{ to{ transform:translateX(120%); } } .sec-head .ico{ font-size:34px; line-height:1; margin-bottom:8px; } .sec-head h2{ margin:0; color:var(--a-ink); } .sec-head p{ margin:10px auto 0; max-width:62ch; color:var(--ink-soft); font-size:16px; } /* ---------- 9. Картки ---------- */ .grid{ display:grid; gap:var(--gap); } .grid-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); } .grid-3{ grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); } .grid-4{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } .card{ position:relative; overflow:hidden; background:rgba(var(--surface-rgb),.82); border:1px solid rgba(var(--border-rgb),.08); border-radius:var(--r-md); padding:18px 18px 16px; box-shadow:var(--sh-1); backdrop-filter:blur(6px); transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, border-color .3s ease; } .card::before{ content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg,var(--a),color-mix(in srgb,var(--a) 40%,#fff)); transform:scaleX(0); transform-origin:left; transition:transform .45s ease; } .card:hover{ transform:translateY(-7px); box-shadow:var(--sh-3); border-color:color-mix(in srgb,var(--a) 30%,transparent); } .card:hover::before{ transform:scaleX(1); } .card .card-ico{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:25px; margin-bottom:14px; background:linear-gradient(135deg,var(--a-1),var(--a-2)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 20%,transparent); transition:transform .35s ease; } .card:hover .card-ico{ transform:rotate(-7deg) scale(1.08); } .stat-num{ font-family:var(--display); font-weight:700; font-size:clamp(28px,4vw,36px); line-height:1; color:var(--a-ink); margin-bottom:10px; } .card h3{ color:var(--a-ink); font-size:20px; } .card p:last-child{ margin-bottom:0; } .card--flat{ background:linear-gradient(135deg,var(--a-1),var(--a-2)); border-color:transparent; } .card--link{ display:block; color:inherit; } .card--link:hover{ color:inherit; } .card--link .go{ display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--a-ink); margin-top:6px; } .card--link:hover .go{ gap:11px; } .card--link .go{ transition:gap .25s ease; } /* ---------- 10. Списки-поради ---------- */ .tips{ list-style:none; padding:0; margin:0; display:grid; gap:12px; } .tips li{ position:relative; margin:0; padding:14px 18px 14px 52px; background:rgba(var(--surface-rgb),.78); border-radius:var(--r-sm); border:1px solid rgba(var(--border-rgb),.07); box-shadow:var(--sh-1); transition:transform .25s ease, box-shadow .25s ease, background .25s ease; } .tips li::before{ content:"✦"; position:absolute; left:16px; top:13px; width:24px; height:24px; border-radius:8px; display:grid; place-items:center; font-size:12px; color:#fff; background:color-mix(in srgb,var(--a) 25%,var(--a-dark)); } .tips li:hover{ transform:translateX(6px); box-shadow:var(--sh-2); background:#fff; } .tips--num{ counter-reset:t; } .tips--num li::before{ counter-increment:t; content:counter(t); font-weight:800; font-size:13px; } .tips--no li::before{ content:"✕"; background:#c62828; } .tips--yes li::before{ content:"✓"; background:#33691e; } /* ---------- 11. Цитата ---------- */ .quote{ position:relative; margin:0; width:100%; padding:28px 26px 26px 66px; background:linear-gradient(135deg,var(--a-1),var(--a-2)); border-radius:var(--r-md); border-left:6px solid var(--a); box-shadow:var(--sh-1); font-family:var(--display); font-size:clamp(18px,2.4vw,24px); line-height:1.5; color:var(--a-ink); } .quote::before{ content:"“"; position:absolute; left:20px; top:-14px; font-family:var(--display); font-size:66px; color:var(--a); opacity:.3; line-height:1; pointer-events:none; } .quote cite{ display:block; margin-top:14px; font-family:var(--body); font-size:15px; font-style:normal; font-weight:700; color:var(--ink-mute); } /* ---------- 12. Акордеон ---------- */ .acc{ background:rgba(var(--surface-rgb),.84); border:1px solid rgba(var(--border-rgb),.09); border-radius:var(--r-sm); margin-bottom:12px; overflow:hidden; box-shadow:var(--sh-1); transition:box-shadow .3s ease, border-color .3s ease; } .acc[open]{ box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--a) 30%,transparent); } .acc summary{ cursor:pointer; list-style:none; padding:17px 54px 17px 22px; position:relative; font-weight:800; color:var(--a-ink); font-size:17px; transition:background .2s ease; } .acc summary:hover{ background:rgba(var(--border-rgb),.05); } .acc summary::-webkit-details-marker{ display:none; } .acc summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--a-2); color:var(--a-ink); font-weight:800; transition:.3s; } .acc[open] summary::after{ content:"−"; background:color-mix(in srgb,var(--a) 25%,var(--a-dark)); color:#fff; transform:translateY(-50%) rotate(180deg); } .acc .acc-body{ padding:0 22px 20px; animation:accIn .35s ease; } @keyframes accIn{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } } /* ---------- 13. Вкладки ---------- */ .tabs{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:22px; } .tab{ padding:11px 20px; border-radius:999px; border:1px solid rgba(var(--border-rgb),.14); background:rgba(var(--surface-rgb),.8); color:var(--ink-soft); font-weight:700; font-size:15px; cursor:pointer; transition:.25s; } .tab:hover{ transform:translateY(-2px); box-shadow:var(--sh-1); } .tab.active{ background:linear-gradient(135deg,color-mix(in srgb,var(--a) 25%,var(--a-dark)),var(--a-dark)); color:#fff; border-color:transparent; box-shadow:0 8px 20px color-mix(in srgb,var(--a) 38%,transparent); } .tab-panel{ display:none; } .tab-panel.active{ display:block; animation:accIn .4s ease; } /* ---------- 14. Герой ---------- */ .hero{ position:relative; padding-block:clamp(8px,1.4vw,18px) clamp(20px,3.4vw,40px); overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:46px; align-items:center; } @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:34px; } } .hero h1{ margin-bottom:14px; } .hero h1 .grad{ background:linear-gradient(100deg,#00695c,#26a69a 40%,#7e57c2 75%,#f9a825); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:220% 100%; animation:flow 11s ease infinite; } @keyframes flow{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } } .hero .lead{ font-size:clamp(17px,2vw,20px); color:var(--ink-soft); max-width:56ch; } .hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:16px; } .hero-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } /* картка команди */ .people{ display:grid; gap:14px; } .person{ display:flex; gap:15px; align-items:center; background:rgba(var(--surface-rgb),.88); border-radius:var(--r-md); padding:17px 20px; border:1px solid rgba(var(--border-rgb),.08); box-shadow:var(--sh-1); transition:transform .3s ease, box-shadow .3s ease; } .person:hover{ transform:translateX(6px); box-shadow:var(--sh-2); } .person .av{ width:56px; height:56px; flex:none; border-radius:19px; display:grid; place-items:center; font-size:26px; background:linear-gradient(135deg,var(--a-1),var(--a-2)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 22%,transparent); } .person b{ display:block; font-size:16.5px; color:var(--a-ink); } .person small{ display:block; color:var(--ink-mute); font-size:14.5px; } .person a{ font-size:14px; font-weight:700; } /* ---------- 15. Дихальний тренажер (сигнатурний блок) ---------- */ .breath{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; background:linear-gradient(135deg,#e8f5e9,#e0f2f1 55%,#e3f2fd); border-radius:var(--r-lg); padding:clamp(18px,3vw,32px); border:1px solid rgba(var(--border-rgb),.1); box-shadow:var(--sh-2); } @media (max-width:820px){ .breath{ grid-template-columns:1fr; gap:26px; text-align:center; } } .breath-stage{ display:grid; place-items:center; width:min(280px,68vw); aspect-ratio:1; margin-inline:auto; position:relative; } .breath-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(38,166,154,.28); transition:transform var(--dur,4s) cubic-bezier(.4,0,.4,1), opacity var(--dur,4s) ease; } .breath-ring.r2{ inset:14px; border-color:rgba(126,87,194,.22); } .breath-ring.r3{ inset:28px; border-color:rgba(249,168,37,.24); } .breath-core{ width:52%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 34% 30%,#ffffff,#a7ded7 55%,#4db6ac); box-shadow:0 18px 44px rgba(38,166,154,.36), inset 0 -10px 26px rgba(var(--border-rgb),.16); display:grid; place-items:center; text-align:center; transition:transform var(--dur,4s) cubic-bezier(.4,0,.4,1); } .breath-core b{ font-family:var(--display); font-size:17px; color:#00453c; display:block; } .breath-core span{ font-size:13px; color:#0a5b52; font-weight:700; } .breath.is-run .breath-core{ transform:scale(var(--scale,1)); } .breath.is-run .breath-ring{ transform:scale(var(--scale,1)); } .breath-modes{ display:flex; flex-wrap:wrap; gap:9px; margin:16px 0 20px; } .breath h2{ color:#00584c; } /* ---------- 16. Психологічний тренажер: 5-4-3-2-1 ---------- */ .ground{ background:rgba(var(--surface-rgb),.86); border-radius:var(--r-lg); padding:clamp(24px,4vw,38px); border:1px solid rgba(var(--border-rgb),.09); box-shadow:var(--sh-2); } .ground-step{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; padding:22px; border-radius:var(--r-md); background:linear-gradient(135deg,var(--a-1),var(--a-2)); min-height:120px; animation:accIn .4s ease; } .ground-step .n{ width:62px; height:62px; border-radius:20px; display:grid; place-items:center; font-family:var(--display); font-size:26px; color:#fff; background:linear-gradient(135deg,color-mix(in srgb,var(--a) 25%,var(--a-dark)),var(--a-dark)); box-shadow:0 10px 22px color-mix(in srgb,var(--a) 40%,transparent); } .ground-step b{ display:block; color:var(--a-ink); font-size:18px; } .ground-dots{ display:flex; gap:7px; justify-content:center; margin-top:18px; } .ground-dots i{ width:9px; height:9px; border-radius:50%; background:rgba(var(--border-rgb),.18); transition:.3s; } .ground-dots i.on{ background:var(--a); transform:scale(1.35); } /* ---------- 17. Компас настрою ---------- */ .compass-opts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .compass-opts button{ padding:12px 20px; border-radius:999px; border:1px solid rgba(var(--border-rgb),.13); background:rgba(var(--surface-rgb),.9); font-weight:700; font-size:15px; color:var(--ink-soft); cursor:pointer; transition:.25s; } .compass-opts button:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); color:var(--a-ink); } .compass-opts button.active{ background:linear-gradient(135deg,color-mix(in srgb,var(--a) 25%,var(--a-dark)),var(--a-dark)); color:#fff; border-color:transparent; } .compass-out{ margin-top:22px; padding:24px 26px; border-radius:var(--r-md); background:linear-gradient(135deg,var(--a-1),var(--a-2)); border-left:6px solid var(--a); box-shadow:var(--sh-1); animation:accIn .4s ease; } .compass-out b{ color:var(--a-ink); } /* ---------- 18. Телефони довіри ---------- */ .hot{ display:grid; gap:14px; } .hotline{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 22px; border-radius:var(--r-md); background:rgba(var(--surface-rgb),.88); border:1px solid rgba(var(--border-rgb),.08); box-shadow:var(--sh-1); transition:transform .28s ease, box-shadow .28s ease; } .hotline:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); } .hotline .h-ico{ width:46px; height:46px; flex:none; border-radius:15px; display:grid; place-items:center; font-size:22px; background:linear-gradient(135deg,var(--a-1),var(--a-2)); } .hotline .h-txt{ flex:1 1 240px; } .hotline .h-txt b{ display:block; color:var(--a-ink); font-size:16.5px; } .hotline .h-txt small{ color:var(--ink-mute); } .hotline .h-num{ display:flex; flex-wrap:wrap; gap:8px; } .num{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px; background:var(--a-2); color:var(--a-ink); font-weight:800; font-size:15px; letter-spacing:.02em; border:1px solid color-mix(in srgb,var(--a) 24%,transparent); transition:.25s; cursor:pointer; } .num:hover{ background:color-mix(in srgb,var(--a) 25%,var(--a-dark)); color:#fff; transform:scale(1.04); } .num.copied{ background:#33691e; color:#fff; border-color:transparent; } .mail-copy{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; position:relative; top:-3px; width:34px; height:34px; margin:0 8px; border-radius:50%; border:1px solid color-mix(in srgb,var(--a) 30%,transparent); background:var(--a-2); color:var(--a-ink); font-size:16px; line-height:1; cursor:pointer; flex:none; box-shadow:var(--sh-1); transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; } .mail-copy:hover{ background:color-mix(in srgb,var(--a) 25%,var(--a-dark)); color:#fff; transform:scale(1.1); } .mail-copy.copied{ background:#33691e; color:#fff; border-color:transparent; } /* ---------- 19. SOS-смуга ---------- */ .sos{ background:linear-gradient(135deg,#fff3e0,#fce4ec); border-radius:var(--r-lg); padding:clamp(16px,3vw,28px); border-left:6px solid #ec407a; border-right:6px solid #ec407a; box-shadow:var(--sh-2); text-align:center; } .sos h2{ color:#ad1457; } .sos .sos-nums{ display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin-top:18px; } .sos .num{ background:#fff; color:#ad1457; border-color:rgba(236,64,122,.3); font-size:16px; } .sos .num:hover{ background:#ad1457; color:#fff; } /* ---------- 20. Відео ---------- */ .video{ border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-2); background:#dcefec; aspect-ratio:16/9; border:1px solid rgba(var(--border-rgb),.1); transition:transform .35s ease, box-shadow .35s ease; } .video:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); } .video iframe{ width:100%; height:100%; border:0; display:block; } .video-cap{ margin-top:11px; font-weight:700; color:var(--a-ink); font-size:15.5px; text-align:center; } .video-alt{ display:inline-block; margin-top:4px; font-size:13.5px; color:var(--ink-mute); } .video-alt:hover{ color:var(--a); } /* ---------- 20b. Інфографіка (офіційні матеріали) ---------- */ .infoshot{ border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-2); border:1px solid rgba(var(--border-rgb),.1); background:rgb(var(--surface-rgb)); transition:transform .35s ease, box-shadow .35s ease; } .infoshot img{ display:block; width:100%; cursor:zoom-in; transition:transform .5s cubic-bezier(.2,.8,.3,1); } .infoshot:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); } .infoshot:hover img{ transform:scale(1.045); } .infoshot figcaption{ padding:10px 16px; font-size:14.5px; color:var(--ink-mute); text-align:center; } .infosrc{ font-size:14.5px; color:var(--ink-mute); margin-top:14px; } /* ---------- 20c. Ілюстрація секції ---------- */ .illus{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); border:1px solid rgba(var(--border-rgb),.1); margin-bottom:26px; aspect-ratio:21/6; width:100%; } .illus svg{ display:block; width:100%; height:100%; } @media (max-width:640px){ .illus{ aspect-ratio:4/3; } } /* ---------- 20c. Лайтбокс (великий перегляд картинок) ---------- */ .lightbox{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:5vh 5vw; background:rgba(6,14,13,.86); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .28s ease; } .lightbox.open{ opacity:1; pointer-events:auto; } .lightbox img{ max-width:100%; max-height:88vh; border-radius:var(--r-md); box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.94); transition:transform .28s cubic-bezier(.2,.8,.3,1); } .lightbox.open img{ transform:scale(1); } .lightbox-close{ position:absolute; top:22px; right:26px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:18px; cursor:pointer; display:grid; place-items:center; transition:background .2s ease, transform .2s ease; } .lightbox-close:hover{ background:rgba(255,255,255,.28); transform:scale(1.08); } /* ---------- 21. Мотиваційна стрічка ---------- */ .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee-track{ display:flex; gap:16px; width:max-content; animation:slide 42s linear infinite; } .marquee:hover .marquee-track{ animation-play-state:paused; } @keyframes slide{ to{ transform:translateX(-50%); } } .mq-item{ padding:16px 24px; border-radius:999px; white-space:nowrap; font-weight:700; color:var(--a-ink); background:linear-gradient(135deg,var(--a-1),var(--a-2)); border:1px solid color-mix(in srgb,var(--a) 18%,transparent); } /* ---------- 22. Хлібні крихти + шапка сторінки ---------- */ .page-hero{ padding-block:clamp(20px,3vw,36px) clamp(18px,2vw,28px); } .crumbs{ font-size:14.5px; color:var(--ink-mute); margin-bottom:14px; } .crumbs a{ font-weight:700; } .page-hero h1{ max-width:20ch; } .page-hero .lead{ max-width:66ch; color:var(--ink-soft); font-size:clamp(16.5px,1.8vw,19px); } /* зміст сторінки */ .toc{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; } .toc a{ padding:9px 17px; border-radius:999px; font-size:14.5px; font-weight:700; background:rgba(var(--surface-rgb),.85); border:1px solid rgba(var(--border-rgb),.12); color:var(--ink-soft); transition:.25s; } .toc a:hover{ background:color-mix(in srgb,var(--a) 25%,var(--a-dark)); color:#fff; border-color:transparent; transform:translateY(-3px); } /* ---------- 23. Підвал ---------- */ .site-footer{ margin-top:var(--sec); background:linear-gradient(135deg,#e8f5e9,#e0f2f1 60%,#e3f2fd); border-top:1px solid rgba(var(--border-rgb),.1); padding-block:28px 16px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; } @media (max-width:800px){ .footer-grid{ grid-template-columns:1fr; gap:26px; } } .site-footer h4{ color:var(--a-ink); margin-bottom:12px; font-size:15px; letter-spacing:.05em; text-transform:uppercase; } .site-footer ul{ list-style:none; padding:0; margin:0; } .site-footer li{ margin-bottom:8px; } .site-footer a:not(.btn){ color:var(--a-ink); font-weight:600; } .site-footer a:not(.btn):hover{ color:var(--a); } .footer-bottom{ margin-top:18px; padding-top:14px; border-top:1px solid rgba(var(--border-rgb),.12); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:14.5px; color:var(--ink-mute); } /* ---------- 24. Плаваючі кнопки ---------- */ .fab-col{ position:fixed; right:20px; bottom:20px; z-index:70; display:grid; gap:10px; } .fab{ width:48px; height:48px; border:0; border-radius:16px; cursor:pointer; background:rgba(var(--surface-rgb),.92); color:var(--a-ink); font-size:19px; box-shadow:var(--sh-2); display:grid; place-items:center; transition:transform .28s ease, opacity .28s ease, background .25s ease, box-shadow .28s ease; } .fab:hover{ transform:translateY(-4px) scale(1.06); background:rgb(var(--surface-rgb)); box-shadow:var(--sh-3); } .fab:active{ transform:translateY(-1px) scale(.97); } #toTop{ opacity:0; pointer-events:none; } #toTop.show{ opacity:1; pointer-events:auto; } /* ---------- 25. Поява при прокрутці ---------- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); } .reveal.in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s } .reveal.d5{ transition-delay:.4s } .reveal.d6{ transition-delay:.48s } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } html{ scroll-behavior:auto; } } /* ---------- 27. Дрібниці ---------- */ .muted{ color:var(--ink-mute); } .center{ text-align:center; } .mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 } .note{ padding:16px 20px; border-radius:var(--r-sm); font-size:15.5px; background:rgba(var(--surface-rgb),.78); border-left:4px solid var(--a); box-shadow:var(--sh-1); } hr.soft{ border:0; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--border-rgb),.18),transparent); margin:var(--gap) 0; } .kicker{ font-family:var(--display); font-size:15px; color:var(--a); letter-spacing:.08em; text-transform:uppercase; } .badge-row{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; } /* ---------- 28. Правки полірування ---------- */ [id]{ scroll-margin-top:92px; } .card .go{ display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--a-ink); margin-top:6px; transition:gap .25s ease; } .card:hover .go{ gap:11px; } .ground-step .muted{ display:block; margin-top:2px; font-size:15.5px; line-height:1.55; } .card-ico{ font-variant-numeric:tabular-nums; } .compass-out[hidden]{ display:none; } .sec-head + .grid, .sec-head + .tips, .sec-head + .hot{ margin-top:0; } /* ---------- 28b. Інтерактивний чек-лист ---------- */ .checklist{ background:rgba(var(--surface-rgb),.86); border:1px solid rgba(var(--border-rgb),.09); border-radius:var(--r-lg); padding:clamp(20px,3.4vw,32px); box-shadow:var(--sh-2); } .checklist-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; } .checklist-count{ margin:0; font-weight:800; color:var(--a-ink); font-size:15.5px; white-space:nowrap; } .checklist-reset{ border:1px solid rgba(var(--border-rgb),.16); background:rgba(var(--surface-rgb),.7); color:var(--ink-mute); border-radius:999px; padding:6px 14px; font-size:13.5px; font-weight:700; cursor:pointer; transition:.2s; } .checklist-reset:hover{ background:var(--a-2); color:var(--a-ink); } .checklist-progress{ height:8px; border-radius:999px; background:rgba(var(--border-rgb),.14); overflow:hidden; margin-bottom:18px; } .checklist-bar{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--a),var(--a-dark)); width:0%; transition:width .35s cubic-bezier(.2,.8,.3,1); } .checklist-items{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } .checklist-items li{ margin:0; } .checklist-items label{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; padding:12px 16px; border-radius:var(--r-sm); background:rgba(var(--surface-rgb),.65); border:1px solid rgba(var(--border-rgb),.07); transition:.2s; font-weight:600; line-height:1.5; } .checklist-items label:hover{ background:var(--a-2); border-color:transparent; } .checklist-items input{ appearance:none; -webkit-appearance:none; flex:none; width:24px; height:24px; margin-top:1px; border-radius:8px; border:2px solid rgba(var(--border-rgb),.35); cursor:pointer; position:relative; transition:.2s; background:rgba(var(--surface-rgb),.9); } .checklist-items input:checked{ background:linear-gradient(135deg,var(--a),var(--a-dark)); border-color:transparent; } .checklist-items input:checked::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:15px; font-weight:800; } .checklist-items input:checked ~ span{ text-decoration:line-through; color:var(--ink-mute); } .checklist-items label:has(input:checked){ background:rgba(var(--surface-rgb),.4); } /* ---------- 29. Темна тема ---------- */ :root[data-theme="dark"]{ --ink: #e8f5f1; --ink-soft: #a9cec5; --ink-mute: #7fa89f; --paper: #0c1715; --white: #16302c; --surface-rgb: 24,46,42; --border-rgb: 140,196,186; --shadow-rgb: 0,0,0; --a-ink: color-mix(in srgb, var(--a) 45%, white 55%); } [data-theme="dark"] .bg-stage{ background: radial-gradient(1100px 700px at 8% -6%, color-mix(in srgb, var(--a) 18%, transparent) 0%, transparent 62%), radial-gradient(900px 640px at 96% 4%, rgba(126,87,194,.18) 0%, transparent 60%), radial-gradient(1000px 800px at 50% 108%,rgba(249,168,37,.12) 0%, transparent 64%), linear-gradient(180deg,#0a1513 0%,#0c1917 55%,#0a1412 100%); } [data-theme="dark"] .blob{ opacity:.22; } [data-theme="dark"] .blob.b1{ background:#0f5f56; } [data-theme="dark"] .blob.b2{ background:#2b4f8f; } [data-theme="dark"] .blob.b3{ background:#8a5a1f; opacity:.2; } [data-theme="dark"] .blob.b4{ background:#3f6b2c; } [data-theme="dark"] .bg-grain{ opacity:.5; } [data-theme="dark"] .breath{ background:linear-gradient(135deg, color-mix(in srgb, var(--a) 20%, var(--paper)), color-mix(in srgb, #7e57c2 20%, var(--paper)) 55%, color-mix(in srgb, #2196f3 20%, var(--paper))); } [data-theme="dark"] .breath h2{ color:var(--a-ink); } [data-theme="dark"] .sos{ background:linear-gradient(135deg, color-mix(in srgb, #f9a825 22%, var(--paper)), color-mix(in srgb, #ec407a 22%, var(--paper))); } [data-theme="dark"] .sos h2{ color:#ff9dc4; } [data-theme="dark"] .sos .num{ background:rgb(var(--surface-rgb)); color:#ff9dc4; border-color:rgba(236,64,122,.4); } [data-theme="dark"] .sos .num:hover{ background:#ad1457; color:#fff; } [data-theme="dark"] .video{ background:#0c211f; } [data-theme="dark"] .site-footer{ background:linear-gradient(135deg, color-mix(in srgb, var(--a) 16%, var(--paper)), color-mix(in srgb, #7e57c2 14%, var(--paper)) 60%, color-mix(in srgb, #2196f3 14%, var(--paper))); } [data-theme="dark"] .fab:hover{ background:rgb(var(--surface-rgb)); } @media (max-width:520px){ body{ font-size:17.2px; } .sec-head{ padding:22px 18px; border-left-width:5px; border-right-width:5px; } .card{ padding:22px 20px; } .quote{ padding:28px 22px 26px 26px; } .quote::before{ display:none; } .hotline{ padding:16px; } .fab-col{ right:12px; bottom:12px; } }