/* АРХІВІЯ — стилі сайту. Джерело правди дизайну: 18_САЙТ/БРЕНДБУК.md (в. 1.0). Акцент «Печатка» займає не більше 10 % площі екрана. Градієнтів немає. */ :root{ --chornylo:#123330; /* основний темний */ --pechatka:#C8873C; /* акцент */ --pechatka-navedennya:#B0742C; --papir:#F7F8F6; /* тло сторінки */ --papir-temnishyy:#EFF2F0; --arkush:#FFFFFF; /* картки, форми */ --grafit:#1E2422; /* основний текст */ --tin:#5C7873; /* другорядний текст */ --liniya:#DDE3DF; --temne-tlo:#0E1F1D; --temne-tlo-blok:#123330; --temna-kartka:#16302E; --temnyy-tekst:#EDF1EE; --temnyy-tin:#93A9A4; --temnyy-akcent:#D69E4A; --temna-liniya:#294F4A; --zag:"Literata",Georgia,serif; --tekst:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --shyryna:1180px; --pole:clamp(24px,5vw,64px); --krok:8px; --mizh-blokamy:clamp(56px,9vw,96px); --radius-kartky:14px; --radius-knopky:10px; --tin-kartky:0 1px 3px rgb(18 51 48 / .06); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--papir); color:var(--grafit); font-family:var(--tekst); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{display:block;max-inline-size:100%;height:auto} a{color:inherit} :where(a,button,summary,input,select,textarea):focus-visible{ outline:3px solid var(--pechatka); outline-offset:2px; border-radius:4px; } h1,h2,h3{font-family:var(--zag);color:var(--chornylo);margin:0;text-wrap:balance;letter-spacing:-.01em} h1{font-size:clamp(34px,4.6vw,48px);line-height:1.15;font-weight:700} h2{font-size:clamp(27px,3.4vw,34px);line-height:1.2;font-weight:600} h3{font-size:23px;line-height:1.3;font-weight:600} p{margin:0} .prose>*+*{margin-block-start:1em} .chytannya{max-inline-size:68ch} .nadzagolovok{ font-size:14px;font-weight:600;letter-spacing:.11em;text-transform:uppercase; color:var(--pechatka);margin:0 0 14px; } .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .dribnym{font-size:15.5px;line-height:1.6;color:var(--tin)} .obgortka{inline-size:min(100% - var(--pole)*2,var(--shyryna));margin-inline:auto} .rozdil{padding-block:var(--mizh-blokamy)} .rozdil.temnishyy{background:var(--papir-temnishyy)} .rozdil.temnyy{background:var(--temne-tlo-blok);color:var(--temnyy-tekst)} .rozdil.temnyy h2,.rozdil.temnyy h3{color:var(--temnyy-tekst)} .rozdil.temnyy .nadzagolovok{color:var(--temnyy-akcent)} /* кнопки */ .knopka{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-block-size:52px;padding:0 30px; font:600 16px/1 var(--tekst);text-decoration:none; border-radius:var(--radius-knopky);border:1.5px solid transparent; transition:background-color .18s ease,border-color .18s ease,transform .18s ease; } .knopka-akcent{background:var(--pechatka);color:#fff} .knopka-akcent:hover{background:var(--pechatka-navedennya)} .knopka-kontur{border-color:var(--chornylo);color:var(--chornylo)} .knopka-kontur:hover{background:var(--chornylo);color:#fff} .knopky{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:32px} /* шапка */ .perejty{ position:absolute;inset-inline-start:-9999px;top:8px;z-index:20; background:var(--chornylo);color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none; } .perejty:focus{inset-inline-start:16px} /* довгі адреси й реквізити не мають розпирати колонку на вузькому екрані */ :where(p,li,td,dd,summary,figcaption){overflow-wrap:break-word} .shapka{border-block-end:1px solid var(--liniya);background:var(--papir)} .shapka-ryad{display:flex;align-items:center;gap:20px;min-block-size:76px} .logo img{inline-size:168px} .menu-desktop{display:none} .menu-desktop a{ text-decoration:none;font-weight:500;font-size:16.5px;color:var(--grafit); padding-block:6px;border-block-end:2px solid transparent; } .menu-desktop a:hover{border-block-end-color:var(--pechatka)} .shapka-knopka{display:none;margin-inline-start:auto;min-block-size:44px;padding:0 20px} .menu-mob{margin-inline-start:auto} .menu-mob>summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px; min-block-size:44px;padding:0 14px;border:1.5px solid var(--liniya); border-radius:var(--radius-knopky);font-weight:600;font-size:16px;background:var(--arkush); } .menu-mob>summary::-webkit-details-marker{display:none} .menu-mob[open]>summary{border-color:var(--chornylo)} .menu-mob nav{ position:absolute;inset-inline:var(--pole);z-index:10;margin-block-start:10px; display:grid;gap:2px;padding:10px; background:var(--arkush);border:1px solid var(--liniya); border-radius:var(--radius-kartky);box-shadow:0 12px 32px rgb(18 51 48 / .12); } .menu-mob nav a{ text-decoration:none;font-weight:500;padding:12px 14px;border-radius:8px; min-block-size:44px;display:flex;align-items:center; } .menu-mob nav a:hover{background:var(--papir-temnishyy)} .menu-mob nav .knopka{margin-block-start:6px} /* перший екран */ .geroj{padding-block:clamp(44px,7vw,84px) var(--mizh-blokamy)} .geroj-sitka{display:grid;gap:clamp(32px,5vw,56px)} .geroj p.vedennya{font-size:clamp(18px,2.1vw,20.5px);color:var(--tin);margin-block-start:22px;max-inline-size:60ch} .pid-knopkamy{margin-block-start:20px;font-size:15.5px;color:var(--tin)} figure{margin:0} .znimok{ position:relative;background:var(--arkush);border:1px solid var(--liniya); border-radius:var(--radius-kartky);padding:12px;box-shadow:var(--tin-kartky); } .znimok img{border-radius:8px} .shtamp{ position:absolute;inset-block-start:24px;inset-inline-end:24px; font:600 12px/1 var(--tekst);letter-spacing:.08em;text-transform:uppercase; color:var(--pechatka);border:2px solid var(--pechatka);border-radius:6px; padding:7px 10px;transform:rotate(-4deg);background:rgb(255 255 255 / .86); } figcaption{margin-block-start:14px;font-size:15px;line-height:1.55;color:var(--tin)} /* напрями */ .zagolovok-bloku{max-inline-size:34ch} .napryamy{display:grid;gap:24px;margin-block-start:40px} .kartka{ background:var(--arkush);border:1px solid var(--liniya); border-radius:var(--radius-kartky);padding:28px;box-shadow:var(--tin-kartky); } .kartka-napryam{display:flex;flex-direction:column;gap:18px} .kartka-napryam h3{font-size:clamp(21px,2.4vw,25px)} .komu{color:var(--tin);font-size:16.5px} .fakty{margin:0;padding:0;list-style:none;display:grid;gap:12px} .fakty li{position:relative;padding-inline-start:28px;font-size:16.5px;line-height:1.6} .fakty li::before{ content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em; inline-size:12px;block-size:2px;background:var(--pechatka); } .pershyy-krok{ margin-block-start:auto;padding-block-start:18px;border-block-start:1px solid var(--liniya); font-weight:600;font-size:16px; } .pershyy-krok span{color:var(--pechatka)} .kartka-napryam .knopka{align-self:start} /* чого не обіцяємо */ .tezy{display:grid;gap:20px;margin-block-start:40px;counter-reset:teza} .teza{ background:var(--temna-kartka);border:1px solid var(--temna-liniya); border-radius:var(--radius-kartky);padding:26px 26px 28px; } .teza h3{font-size:21px;margin-block-end:10px} .teza p{color:var(--temnyy-tin);font-size:16.5px} .teza::before{ counter-increment:teza;content:counter(teza,decimal-leading-zero); font:700 26px/1 var(--zag);color:var(--temnyy-akcent); display:block;margin-block-end:14px; } /* хто робить */ .hto-sitka{display:grid;gap:clamp(28px,4vw,48px);margin-block-start:36px} .dogovir{background:var(--arkush);border:1px solid var(--liniya);border-radius:var(--radius-kartky);padding:28px;box-shadow:var(--tin-kartky)} .dogovir h3{font-size:20px;margin-block-end:16px} .dogovir ul{margin:0;padding:0;list-style:none;display:grid;gap:11px} .dogovir li{position:relative;padding-inline-start:26px;font-size:16.5px;line-height:1.55} .dogovir li::before{ content:"";position:absolute;inset-inline-start:0;inset-block-start:.58em; inline-size:10px;block-size:10px;border:2px solid var(--pechatka);border-radius:3px; } .posylannya-dali{ display:inline-flex;align-items:center;gap:9px;margin-block-start:26px; font-weight:600;text-decoration:none;border-block-end:2px solid var(--pechatka);padding-block-end:2px; } .posylannya-dali:hover{color:var(--pechatka)} /* підвал */ .pidval{background:var(--temne-tlo);color:var(--temnyy-tin);padding-block:clamp(48px,6vw,72px) 36px;margin-block-start:0} .pidval a{color:var(--temnyy-tekst);text-decoration:none} .pidval a:hover{color:var(--temnyy-akcent)} .pidval h4{font:600 14px/1 var(--tekst);letter-spacing:.1em;text-transform:uppercase;color:var(--temnyy-akcent);margin:0 0 16px} .pidval-kolonky{display:grid;gap:36px} .pidval ul{margin:0;padding:0;list-style:none;display:grid;gap:11px;font-size:16px} .pidval .brend img{inline-size:156px;margin-block-end:16px} .pidval .brend p{font-size:16px;line-height:1.6;max-inline-size:34ch} .pidval-nyz{ margin-block-start:40px;padding-block-start:26px;border-block-start:1px solid var(--temna-liniya); display:grid;gap:12px; } .rekvizyty{font-family:var(--mono);font-size:14px;line-height:1.75;color:var(--temnyy-tin);margin:0} /* ширші екрани */ @media (min-width:760px){ .napryamy{grid-template-columns:repeat(2,1fr)} .tezy{grid-template-columns:repeat(3,1fr)} .pidval-kolonky{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} .pidval-nyz{grid-template-columns:1fr} } @media (min-width:980px){ .menu-desktop{display:flex;gap:26px;margin-inline-start:14px} .menu-mob{display:none} .shapka-knopka{display:inline-flex} .shapka{position:sticky;inset-block-start:0;z-index:5} .geroj-sitka{grid-template-columns:1.05fr .95fr;align-items:center} .hto-sitka{grid-template-columns:1.1fr .9fr;align-items:start} } /* поява секцій під час прокручування — лише там, де підтримується і дозволено */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ /* Рух лише трансформацією. Прозорість не чіпаємо: якщо таймлайн не спрацює (знімок сторінки, нестандартний браузер), текст лишається видимим. */ .zyavlyaetsya{ animation:pidnyaty linear both; animation-timeline:view(); animation-range:entry 0% entry 90%; } @keyframes pidnyaty{from{transform:translateY(16px)}to{transform:none}} } @view-transition{navigation:auto} } /* темна тема пристрою */ @media (prefers-color-scheme:dark){ :root{ --papir:#0E1F1D;--papir-temnishyy:#123330;--arkush:#16302E; --grafit:#EDF1EE;--tin:#93A9A4;--liniya:#294F4A; --chornylo:#EDF1EE;--pechatka:#D69E4A;--pechatka-navedennya:#C8873C; --tin-kartky:0 1px 3px rgb(0 0 0 / .3); } .shapka{background:#0E1F1D} .knopka-akcent{color:#0E1F1D} .knopka-kontur{border-color:var(--temnyy-akcent);color:var(--temnyy-tekst)} .knopka-kontur:hover{background:var(--temnyy-akcent);color:#0E1F1D} .rozdil.temnyy{background:#0A1917} .shtamp{background:rgb(22 48 46 / .86)} .menu-mob>summary{background:var(--arkush)} } /* ======================= сторінки напрямів ======================= */ /* ряди «текст — зображення» з чергуванням */ .ryad{display:grid;gap:clamp(28px,4vw,48px);align-items:center;margin-block-start:44px} .ryad+.ryad{margin-block-start:clamp(40px,6vw,72px)} .pereliky{margin:0;padding:0;list-style:none;display:grid;gap:16px} .pereliky li{position:relative;padding-inline-start:30px;font-size:17px;line-height:1.6} .pereliky li::before{ content:"";position:absolute;inset-inline-start:0;inset-block-start:.6em; inline-size:14px;block-size:2px;background:var(--pechatka); } .pereliky li b{font-weight:600} /* кроки процесу */ .kroky{display:grid;gap:22px;margin-block-start:44px} .krok{ background:var(--arkush);border:1px solid var(--liniya);border-radius:var(--radius-kartky); overflow:hidden;box-shadow:var(--tin-kartky);display:grid; } .krok img{inline-size:100%;aspect-ratio:16/10;object-fit:cover} .krok-tilo{padding:24px 26px 26px} .krok-nomer{font:700 30px/1 var(--zag);color:var(--pechatka);display:block;margin-block-end:10px} .krok h3{font-size:20px;margin-block-end:10px} .krok p{font-size:16.5px;line-height:1.6} .krok .rezultat{ margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--liniya); font-size:15.5px;color:var(--tin); } .krok .rezultat b{color:var(--grafit);font-weight:600} /* блок довіри */ .dovira{display:grid;gap:22px;margin-block-start:40px} .dovira .kartka h3{font-size:20px;margin-block-end:12px} .dovira .kartka p{font-size:16.5px} .pravova{ margin-block-start:26px;padding:20px 22px;border-inline-start:3px solid var(--pechatka); background:var(--arkush);border-radius:0 10px 10px 0; } /* ціни */ .tsiny{margin-block-start:36px;padding:clamp(26px,3.6vw,38px)} .tsina-ryad{ display:grid;gap:8px 24px;padding-block:22px;border-block-end:1px solid var(--liniya); } .tsina-ryad:last-of-type{border-block-end:0} .tsina-ryad h3{font-size:19px} .tsina-ryad .opys{font-size:16px;color:var(--tin)} .tsina-ryad .suma{ font-family:var(--mono);font-size:21px;font-weight:500;color:var(--chornylo); white-space:nowrap;align-self:center; } .tsina-ryad .suma small{ display:block;margin-block-start:5px;font-family:var(--tekst);font-size:14px; font-weight:400;line-height:1.45;color:var(--tin);white-space:normal; } .pidsumok{margin-block-start:26px;font-size:16.5px;color:var(--tin);max-inline-size:72ch} .vstup-tsiny{margin-block-start:14px;font-size:17px;color:var(--tin);max-inline-size:72ch} /* акордеон */ .akordeon{margin-block-start:36px;border-block-start:1px solid var(--liniya)} .akordeon details{border-block-end:1px solid var(--liniya)} .akordeon summary{ list-style:none;cursor:pointer;display:flex;gap:18px;align-items:flex-start; padding-block:20px;font-family:var(--zag);font-weight:600;font-size:19px; color:var(--chornylo);min-block-size:44px; } .akordeon summary::-webkit-details-marker{display:none} .akordeon summary::after{ content:"";inline-size:14px;block-size:14px;margin-inline-start:auto;margin-inline-end:3px;flex:none; margin-block-start:.42em;border-inline-end:2.5px solid var(--pechatka); border-block-end:2.5px solid var(--pechatka);transform:rotate(45deg); transition:transform .2s ease; } .akordeon details[open] summary::after{transform:rotate(-135deg)} .akordeon .vidpovid{padding-block:0 22px;max-inline-size:72ch;font-size:16.5px;line-height:1.65;color:var(--grafit)} .akordeon .vidpovid p+p{margin-block-start:.8em} /* форма */ .forma-blok{max-inline-size:760px} .nad-formoyu{margin-block-start:16px;font-size:17px;color:var(--tin);max-inline-size:66ch} form.zayavka{margin-block-start:32px;display:grid;gap:18px} .pole{display:grid;gap:7px} .pole>label{font-size:15px;font-weight:500;color:var(--tin)} .pole .zirka{color:#96331F} .pole input,.pole select,.pole textarea{ font:400 17px/1.5 var(--tekst);color:var(--grafit);background:var(--arkush); border:1.5px solid var(--liniya);border-radius:var(--radius-knopky); padding:13px 15px;min-block-size:52px;inline-size:100%; } .pole textarea{min-block-size:120px;resize:vertical} .pole input:hover,.pole select:hover,.pole textarea:hover{border-color:var(--tin)} .pole input::placeholder,.pole textarea::placeholder{color:var(--tin);opacity:.75} .pole input[type=file]{padding:10px 12px;font-size:15.5px} .pole .pidkazka{font-size:14.5px;color:var(--tin)} .pole .lichylnyk-znakiv{margin-block-start:4px;font-size:13.5px} .pole .lichylnyk-znakiv[data-stan="pomylka"]{color:#96331F} .pole input:user-invalid,.pole select:user-invalid{border-color:#96331F} .past{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden} .para{display:grid;gap:18px} form.zayavka button{ justify-self:start;border:0;cursor:pointer;font:600 16px/1 var(--tekst); min-block-size:52px;padding:0 30px;border-radius:var(--radius-knopky); background:var(--pechatka);color:#fff;transition:background-color .18s ease; } form.zayavka button:hover{background:var(--pechatka-navedennya)} form.zayavka button[disabled]{opacity:.6;cursor:progress} .povidomlennya{font-size:16px;font-weight:500;min-block-size:1.4em} .povidomlennya[data-stan="pomylka"]{color:#96331F} .povidomlennya[data-stan="uspih"]{color:#2E6B4F} .zirochky,.abo-poshta{font-size:15.5px;color:var(--tin)} .abo-poshta a{font-weight:600} @media (min-width:760px){ .kroky{grid-template-columns:repeat(2,1fr)} .dovira{grid-template-columns:repeat(2,1fr)} .para{grid-template-columns:repeat(2,1fr)} } @media (min-width:980px){ .ryad{grid-template-columns:1fr 1fr} .ryad.navpaky>figure{order:-1} .kroky{grid-template-columns:repeat(3,1fr)} .krok:first-child,.krok:nth-child(2){grid-column:span 1} } .shyrokyy-znimok{margin-block-start:clamp(40px,6vw,72px);max-inline-size:900px;margin-inline:auto} /* кроки без фото (процедура) */ .kroky-tekst{display:grid;gap:20px;margin-block-start:44px} .kroky-tekst .krok-tilo{padding:26px} .strok{ margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--liniya); font-family:var(--mono);font-size:14.5px;color:var(--tin); } .strok b{color:var(--grafit);font-weight:500} .pidsumok-protsedura{ margin-block-start:30px;padding:24px 26px;background:var(--arkush); border:1px solid var(--liniya);border-inline-start:3px solid var(--pechatka); border-radius:0 var(--radius-kartky) var(--radius-kartky) 0; font-size:17px;line-height:1.6;max-inline-size:78ch; } /* три випадки */ .vypadky{display:grid;gap:22px;margin-block-start:40px} .vypadky .kartka h3{font-size:19px;margin-block-end:12px} .vypadky .kartka p{font-size:16.5px} .dfrr{ margin-block-start:30px;background:var(--temne-tlo-blok);color:var(--temnyy-tekst); border-radius:var(--radius-kartky);padding:clamp(26px,3.6vw,38px); } .dfrr h3{color:var(--temnyy-tekst);font-size:21px;margin-block-end:12px} .dfrr p{font-size:16.5px;color:var(--temnyy-tin);max-inline-size:74ch} /* «у якому порядку це робиться» */ .poryadok{margin-block-start:40px;max-inline-size:78ch} .poryadok h3{font-size:21px;margin-block-end:14px} .poryadok p{font-size:17px;line-height:1.7} .poryadok p+p{margin-block-start:1em} .poryadok :is(ul,ol)+p{margin-block-start:1.1em} .poryadok ol{margin:22px 0 0;padding:0;list-style:none;counter-reset:por;display:grid;gap:14px} .poryadok ol li{position:relative;padding-inline-start:44px;font-size:17px;line-height:1.6} .poryadok ol li::before{ counter-increment:por;content:counter(por); position:absolute;inset-inline-start:0;inset-block-start:-1px; inline-size:28px;block-size:28px;display:grid;place-items:center; font:700 15px/1 var(--zag);color:#fff;background:var(--pechatka);border-radius:8px; } .poryadok ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px} .poryadok ul li{position:relative;padding-inline-start:28px;font-size:16.5px;line-height:1.6} .poryadok ul li::before{ content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em; inline-size:13px;block-size:2px;background:var(--pechatka); } @media (min-width:760px){ .kroky-tekst{grid-template-columns:repeat(2,1fr)} .vypadky{grid-template-columns:repeat(3,1fr)} } @media (min-width:1080px){ .kroky-tekst{grid-template-columns:repeat(3,1fr)} } /* ======================= інформаційні сторінки ======================= */ .stattya{padding-block:clamp(40px,6vw,72px) var(--mizh-blokamy)} .stattya .obgortka{max-inline-size:820px;margin-inline:auto} .nazad{display:inline-flex;gap:8px;align-items:center;font-size:15.5px;color:var(--tin);text-decoration:none;margin-block-end:22px} .nazad:hover{color:var(--pechatka)} .shapka-dokumenta{ margin-block:22px 0;padding:18px 20px;background:var(--arkush); border:1px solid var(--liniya);border-radius:var(--radius-kartky); font-size:15px;line-height:1.7;color:var(--tin); } .shapka-dokumenta b{color:var(--grafit)} .stattya h2{font-size:clamp(23px,2.8vw,27px);margin-block:clamp(36px,4vw,52px) 14px} .stattya h3{font-size:19.5px;margin-block:30px 10px} .stattya h3:target{scroll-margin-block-start:90px} .stattya p{margin-block-start:1em;font-size:17px;line-height:1.7} .stattya ul{margin-block-start:1em;padding:0;list-style:none;display:grid;gap:11px} .stattya ul li{position:relative;padding-inline-start:28px;font-size:17px;line-height:1.65} .stattya ul li::before{ content:"";position:absolute;inset-inline-start:0;inset-block-start:.66em; inline-size:13px;block-size:2px;background:var(--pechatka); } .tablytsya{overflow-x:auto;margin-block-start:1.2em;border:1px solid var(--liniya);border-radius:10px;background:var(--arkush)} .tablytsya table{border-collapse:collapse;inline-size:100%;min-inline-size:520px;font-size:16px} .tablytsya th,.tablytsya td{text-align:start;padding:12px 16px;border-block-end:1px solid var(--liniya);vertical-align:top} .tablytsya th{font-weight:600;color:var(--chornylo);background:var(--papir-temnishyy)} .tablytsya tr:last-child td{border-block-end:0} .stattya .pytannya-h3{font-family:var(--zag);font-weight:600} .grupa-pytan{margin-block-start:clamp(36px,4vw,52px)} .pomylka-404{text-align:center;padding-block:clamp(70px,12vw,140px)} .pomylka-404 .knopky{justify-content:center} /* ======================= кроки рядами з чергуванням ======================= */ /* Один крок — один ряд на всю ширину: зображення з одного боку, текст з іншого. Непарні ряди — зображення ліворуч, парні — праворуч. На телефоні все в стовпчик, зображення завжди перше. Вузьких колонок більше немає. */ .kroky-ryady{margin-block-start:clamp(40px,6vw,64px);display:grid;gap:clamp(48px,7vw,88px)} .krok-ryad{display:grid;gap:clamp(24px,4vw,56px);align-items:center} .krok-ryad figure{margin:0} .krok-ryad img{ inline-size:100%;aspect-ratio:4/3;object-fit:cover;display:block; border-radius:var(--radius-kartky);border:1px solid var(--liniya); box-shadow:0 2px 10px rgb(18 51 48 / .07); } .krok-ryad .nomer{ display:inline-flex;align-items:center;gap:14px; font:700 clamp(34px,4.4vw,44px)/1 var(--zag);color:var(--pechatka); margin-block-end:14px; } .krok-ryad .nomer::after{content:"";inline-size:clamp(40px,7vw,86px);block-size:2px;background:var(--pechatka);opacity:.45} .krok-ryad h3{font-size:clamp(21px,2.6vw,26px);margin-block-end:14px} .krok-ryad p{font-size:17px;line-height:1.65;max-inline-size:52ch} .krok-ryad .rezultat{ margin-block-start:20px;padding-block-start:16px;border-block-start:1px solid var(--liniya); font-family:var(--mono);font-size:14.5px;line-height:1.7;color:var(--tin);max-inline-size:52ch; } .krok-ryad .rezultat b{color:var(--grafit);font-weight:500} .krok-ryad .strok{ margin-block-start:20px;padding-block-start:16px;border-block-start:1px solid var(--liniya); font-family:var(--mono);font-size:14.5px;color:var(--tin); } .krok-ryad .strok b{color:var(--grafit);font-weight:500} /* місце під зображення, якого ще немає */ .krok-ryad .mistse{ aspect-ratio:4/3;border:1.5px dashed var(--liniya);border-radius:var(--radius-kartky); display:grid;place-items:center;text-align:center;padding:24px; background:var(--arkush);color:var(--tin);font-size:15px;line-height:1.5; } @media (min-width:860px){ .krok-ryad{grid-template-columns:1.05fr .95fr} .krok-ryad:nth-child(even) figure, .krok-ryad:nth-child(even) .mistse-obgortka{order:2} } /* Липка шапка не повинна ховати заголовок, до якого веде якір. Відступ трохи більший за висоту шапки (76 px). */ :where(section,h2,h3,details)[id]{scroll-margin-block-start:96px} @media (max-width:979px){ :where(section,h2,h3,details)[id]{scroll-margin-block-start:24px} } /* ---------- виправлення: ціни в три колонки ---------- */ /* Було дві колонки на три елементи, і сума переносилася під назву. */ .tsina-ryad{grid-template-columns:1fr;gap:8px} @media (min-width:760px){ .tsina-ryad{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) max-content;gap:12px 32px;align-items:start} .tsina-ryad h3{grid-column:1;grid-row:1} .tsina-ryad .opys{grid-column:2;grid-row:1} .tsina-ryad .suma{grid-column:3;grid-row:1;text-align:end;justify-self:end} } /* ---------- виправлення: випадні поля тієї ж висоти, що й решта ---------- */ /*