/* Шрифт заголовков ниже первого экрана (R-5-T04). Объявления здесь, а не в критическом CSS: иначе Chrome запрашивает их до первой отрисовки и они попадают в граф LCP. */ @font-face{font-family:Unbounded;src:url(../fonts/unbounded-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap} /* R-6-T03: Inter 500 тоже не нужен до первой отрисовки — в первом экране им набраны только меню и подпись «Звідки ви?», до загрузки они рисуются начертанием 400 той же гарнитуры. */ @font-face{font-family:Inter;src:url(../fonts/inter-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap} /* Стили секций ниже первого экрана. Вынесены из , чтобы первый экран рисовался раньше и LCP не ждал лишних байтов (решение 4 REVIEW-4). Файл свой, не библиотека. */ /* R-6-T03: бегущая строка, форма и печать вынесены из критического CSS — документ должен влезать в один круг TCP модели Lantern (≤ 14 КБ gzip). Всё это ниже первого экрана и появляется после прокрутки. */ /* ------------------------------------------ бегущая строка (ТЗ 11.7) ---- */ .mq{position:relative;z-index:1;height:80px;display:flex;align-items:center;overflow:hidden; border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)} .mq-row{width:100%;overflow:hidden;white-space:nowrap} /* R-7-T09: строка едет CSS-анимацией. На gsap она держала вечный цикл requestAnimationFrame — 120 колбэков в секунду, когда на экране ничего не движется. Вне экрана анимация ставится на паузу. */ .mq-track{display:inline-flex;font-family:var(--display);font-weight:600;font-size:32px;line-height:1.2; color:rgba(255,255,255,.10);will-change:transform; animation:tk-mq var(--mq-dur,40s) linear infinite} @keyframes tk-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} html[data-motion=still] .mq-track,html:not(.js) .mq-track{animation:none} .mq.is-off .mq-track{animation-play-state:paused} @media (prefers-reduced-motion:reduce){.mq-track{animation:none}} .mq-track i{font-style:normal;display:inline-flex;align-items:baseline;gap:.5em;padding-right:.5em} .mq-track b{font-weight:600;color:rgba(217,169,63,.30)} @media (min-width:1024px){.mq{height:128px}.mq-track{font-size:56px}} .form-card{position:relative;background:var(--white);border-radius:var(--r-card);padding:28px; color:var(--ink);overflow:hidden} @media (min-width:640px){.form-card{padding:32px}} .form-in,.done{position:relative;z-index:1} .field{display:grid;gap:8px;margin-bottom:20px} .field label{font-weight:500;font-size:14px} .field input,.field textarea{width:100%;padding:13px 14px;font:inherit;color:var(--ink); background:var(--white);border:1px solid var(--line);border-radius:var(--r-field); transition:border-color var(--t-fast),box-shadow var(--t-fast)} .field textarea{resize:vertical;min-height:104px} .field input:focus,.field textarea:focus{outline:none;border-color:var(--navy-900); box-shadow:0 0 0 3px rgba(20,48,79,.28),0 0 0 8px rgba(217,169,63,.16)} .field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--err)} .err{color:var(--err);font-size:13px} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-note{margin-top:12px;font-size:13px;color:var(--ink-2)} #send{width:100%} #form-status{margin:0 0 16px;font-size:15px;color:var(--ink-2);min-height:1px} #form-status.is-error{padding:12px 14px;border-radius:var(--r-field);background:#FEF3F2; border:1px solid rgba(180,35,24,.25);color:var(--err)} .done{display:none} .form-card.is-sent .form-in{display:none} .form-card.is-sent .done,.done.is-on{display:block} .done-tick{width:56px;height:56px;margin-bottom:20px} .done-tick circle,.done-tick path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round; stroke-linejoin:round} .done-tick path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .6s ease-out .15s forwards} .done h3{font-family:var(--display);font-weight:600;font-size:22px;margin-bottom:8px} .done p{color:var(--ink-2)} /* -------------------------------------- напрямки: бенто (ТЗ 5.2, 11.8) -- */ .h2{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.15;max-width:760px; letter-spacing:-.005em;text-wrap:balance} /* R-6-D11: единый кегль H2 во всех секциях — 30 px на 1024–1279 и 36 px от 1280. У «Запиту» колонка уже, ему 32 px. */ @media (min-width:1024px){.h2{font-size:30px;line-height:1.1}} @media (min-width:1280px){.h2{font-size:36px}} .sec-dark .h2{color:var(--white)} .head-gap{margin-bottom:48px} #zapyt-title{max-width:20ch} .h2 + .lead{margin-top:16px} .bento{display:grid;grid-template-columns:1fr;gap:16px} @media (min-width:640px){.bento{grid-template-columns:repeat(2,1fr);gap:20px}} @media (min-width:1024px){.bento{grid-template-columns:repeat(3,1fr);gap:24px}} .card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card); padding:28px;overflow:hidden;transition:transform var(--t-base),box-shadow var(--t-base); box-shadow:var(--sh)} /* ТЗ 14.11: прожектор под курсором, светящаяся рамка и 3D-наклон убраны — при наведении карточка поднимается на 2 px и получает тень */ .card{transition:transform .2s ease-out,box-shadow .2s ease-out} .card:hover{transform:translateY(-2px);box-shadow:var(--sh)} @media (prefers-reduced-motion:reduce){.card,.card:hover{transform:none;transition:none}} /* R-6-D04: акцентные карточки — тёмные опоры бенто (ТЗ 4.3, 5.2). Правило потерялось вместе с прожектором в раунде 6, карточки стали белыми. */ .card-accent{background:var(--navy-900);border-color:transparent;color:var(--white);box-shadow:none} .card-accent h3{color:var(--white)} .card-accent p{color:var(--on-dark-2)} .card-accent .arrow-link{color:var(--gold)} /* на navy теней нет (4.3) — при наведении только подъём */ .card-accent:hover{box-shadow:none} .card-more{background:var(--navy-100);border:0;box-shadow:none} .card-more:hover{box-shadow:none} .card-more::before,.card-more::after{display:none} .arrow-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:600; color:var(--navy-900);text-decoration:none;min-height:44px} .arrow-link span{position:relative} .arrow-link span::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor; transform:scaleX(0);transform-origin:left;transition:transform var(--t-base)} .arrow-link:hover span::after{transform:scaleX(1)} @media (min-width:640px){ .card-med,.card-def{grid-column:span 2} .card-more{grid-column:span 2} } @media (min-width:1024px){ /* широкие карточки: иллюстрация крупно справа во всю высоту, заголовок и текст прижаты к низу — низ карточки больше не пустует (R-3-15) */ .card{display:flex;flex-direction:column} .card > .card-in{flex:1 1 auto} .card-med .card-in,.card-def .card-in{display:grid;grid-template-columns:1fr 240px; grid-template-rows:1fr auto auto;gap:8px 32px} .card-med .ill,.card-def .ill{grid-column:2;grid-row:1 / span 3;align-self:center; width:240px;height:240px;--ill-k:5} .card-med h3,.card-def h3{grid-column:1;grid-row:2;margin:0;align-self:end} .card-med p,.card-def p{grid-column:1;grid-row:3;align-self:start;max-width:46ch} .card-more{grid-column:span 3} .card-more{display:flex;align-items:center;justify-content:space-between;gap:32px} .card-more .card-in{display:flex;align-items:center;gap:28px} .card-more .ill{flex:none} .card-more h3{margin-top:0} } /* ------------------------------- мини-иллюстрации карточек (ТЗ 11.8) ---- */ .ill{--ill-k:1.84;width:88px;height:88px;color:var(--navy-900)} .card-accent .ill{color:var(--gold)} .ill *{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; vector-effect:non-scaling-stroke} .ill .fillx{fill:currentColor;stroke:none;opacity:.9} /* каждая иллюстрация играет при появлении и при наведении (класс is-play) */ /* Длина штриха задаётся в единицах viewBox и переводится в экранные пиксели множителем --ill-k: при vector-effect:non-scaling-stroke stroke-dasharray считается в пикселях, и на крупной иллюстрации короткий штрих рвал линию на куски (R-3-15). */ .ill .dash{stroke-dasharray:calc(var(--len,120) * var(--ill-k)); stroke-dashoffset:calc(var(--len,120) * var(--ill-k))} .ill.is-play .dash,.ill.is-drawn .dash{animation:draw .9s cubic-bezier(.2,.7,.2,1) forwards} .ill.is-drawn .dash{animation-duration:.01s} @keyframes draw{to{stroke-dashoffset:0}} .ill .pop{opacity:0;transform-origin:center;transform:scale(.6)} .ill.is-play .pop,.ill.is-drawn .pop{animation:pop .5s cubic-bezier(.2,.7,.2,1) .7s forwards} .ill.is-drawn .pop{animation-duration:.01s;animation-delay:0s} @keyframes pop{to{opacity:1;transform:scale(1)}} .ill .spark{opacity:0} .ill.is-play .spark{animation:spark 1.1s ease-out .35s infinite} .ill.is-play .spark:nth-of-type(2){animation-delay:.5s} .ill.is-play .spark:nth-of-type(3){animation-delay:.68s} .ill.is-play .spark:nth-of-type(4){animation-delay:.86s} .ill.is-play .spark:nth-of-type(5){animation-delay:1.02s} .ill.is-play .spark:nth-of-type(6){animation-delay:1.2s} @keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.5)} 30%{opacity:1}100%{opacity:0;transform:translate(var(--sx,8px),var(--sy,-8px)) scale(.3)}} .ill .gear1,.ill .gear2{transform-origin:var(--ox,14px) var(--oy,24px)} .ill.is-play .gear1{animation:turn 2.4s cubic-bezier(.4,0,.2,1) .2s 1 forwards} .ill.is-play .gear2{animation:turnback 2.4s cubic-bezier(.4,0,.2,1) .45s 1 forwards} @keyframes turn{to{transform:rotate(360deg)}} @keyframes turnback{to{transform:rotate(-300deg)}} .ill .box{transform-origin:center bottom;transform:scaleY(0);opacity:0} .ill.is-play .box,.ill.is-drawn .box{animation:grow .45s cubic-bezier(.2,.7,.2,1) forwards} .ill.is-play .box:nth-of-type(2){animation-delay:.14s} .ill.is-play .box:nth-of-type(3){animation-delay:.28s} .ill.is-play .box:nth-of-type(4){animation-delay:.42s} @keyframes grow{to{transform:scaleY(1);opacity:1}} .ill .screen-on{opacity:0} .ill.is-play .screen-on,.ill.is-drawn .screen-on{animation:screen .8s ease-out .2s forwards} @keyframes screen{0%{opacity:0}40%{opacity:.55}100%{opacity:.22}} .ill .sweep{opacity:0} .ill.is-play .sweep{animation:sweep 1.5s ease-in-out .5s infinite} @keyframes sweep{0%{opacity:0;transform:translateX(-9px)}20%{opacity:1}80%{opacity:1} 100%{opacity:0;transform:translateX(9px)}} .ill .head3d{animation:none} .ill.is-play .head3d{animation:head 2.2s ease-in-out .2s infinite alternate} @keyframes head{to{transform:translateX(13px)}} .ill .layer{transform-origin:center bottom;transform:scaleY(0)} .ill.is-play .layer,.ill.is-drawn .layer{animation:grow .5s ease-out forwards} .ill.is-play .layer:nth-of-type(2){animation-delay:.55s} .ill.is-play .layer:nth-of-type(3){animation-delay:1.1s} .ill .prop{transform-origin:center;transform-box:fill-box} .ill.is-play .prop{animation:turn .5s linear infinite} .ill .wave{opacity:0;transform-origin:34px 30px} .ill.is-play .wave{animation:wave 1.8s ease-out .3s infinite} .ill.is-play .wave:nth-of-type(2){animation-delay:.6s} .ill.is-play .wave:nth-of-type(3){animation-delay:1.2s} @keyframes wave{0%{opacity:0;transform:scale(.5)}30%{opacity:.9}100%{opacity:0;transform:scale(1.5)}} /* ------------------------------- як ми працюємо (ТЗ 14.10) -------------- */ /* Закрепления, частиц и пустых областей нет: три шага видны сразу. Телефон и 768 — вертикальная линия маршрута слева, desktop — три равные колонки и горизонтальная линия по центрам узлов. */ .steps{position:relative;display:grid;grid-template-columns:1fr;gap:40px;margin-top:40px} /* R-7-D08: линия маршрута — из отрезков между соседними узлами, а не один блок на всю сетку: только так она кончается ровно в центре узла 03 на любой ширине и высоте шагов. Сам элемент .steps-line остаётся пустым — он больше ничего не рисует. */ .steps-line{display:none} .step:not(:last-child)::after{content:"";position:absolute;left:5px;top:5px; bottom:calc(-40px - 5.5px);width:1px;background:rgba(217,169,63,.45); transform:scaleY(0);transform-origin:top} .step{position:relative;padding-left:32px} .prog-node{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%; background:var(--navy-950);border:1.5px solid var(--gold);box-sizing:border-box} .prog-node.is-on{background:var(--gold)} .step-num{display:block;font-family:var(--display);font-weight:700;font-size:48px;line-height:1; letter-spacing:-.02em;color:var(--gold);margin-bottom:16px} .step h3{font-weight:600;font-size:19px;margin-bottom:12px;color:var(--white)} .step p{color:var(--on-dark-2);font-size:16px;line-height:1.6;max-width:34ch} @media (min-width:1024px){ .steps{grid-template-columns:repeat(3,1fr);gap:48px;margin-top:64px} .step:not(:last-child)::after{left:5.5px;right:calc(-48px - 5.5px);top:5px;bottom:auto; width:auto;height:1px;transform:scaleX(0);transform-origin:left} .step{padding-left:0;padding-top:43px} .prog-node{top:0;left:0} .step-num{font-size:72px;margin-bottom:20px} .step h3{font-size:22px} } /* прорисовка линии маршрута один раз при появлении секции */ html.js .step:not(:last-child)::after{transition:transform .6s cubic-bezier(.65,0,.35,1)} html.js .steps.is-drawn .step:not(:last-child)::after{transform:none} html.js .steps.is-drawn .step:nth-child(3)::after{transition-delay:.5s} html:not(.js) .step::after,html[data-motion=still] .step::after{transform:none;transition:none} /* -------------------------------------------- про компанію (ТЗ 5.4) ----- */ /* R-5-D09: H2 в две строки — «Постачальник, який розуміє / публічні закупівлі». В колонке 603 px первая строка при 38 px не помещалась на 9 px, поэтому у этого заголовка кегль 36 px (замер: строка 580 px). */ @media (min-width:1024px){#pro-title{max-width:760px}} .about{display:grid;grid-template-columns:1fr;gap:40px} @media (min-width:1024px){.about{grid-template-columns:58fr 42fr;gap:64px}} .checks{margin-top:28px;display:grid;gap:16px} .checks li{display:flex;gap:16px;align-items:flex-start} .checks i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--navy-100); display:grid;place-items:center} .checks svg{width:18px;height:18px} .checks svg path{fill:none;stroke:var(--navy-900);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* R-6-D05: у галочек не было состояния «нарисовано» — оно висело на удалённой хореографии сцены, и пять пустых кружков читались как невыбранные радиокнопки. Рисуются один раз при появлении списка. */ html.js .checks .tick{stroke-dasharray:24;stroke-dashoffset:24; transition:stroke-dashoffset .5s cubic-bezier(.65,0,.35,1)} html.js .checks.is-in .tick{stroke-dashoffset:0} .checks.is-in li:nth-child(2) .tick{transition-delay:.07s} .checks.is-in li:nth-child(3) .tick{transition-delay:.14s} .checks.is-in li:nth-child(4) .tick{transition-delay:.21s} .checks.is-in li:nth-child(5) .tick{transition-delay:.28s} html:not(.tk-on) .checks .tick,html[data-motion=still] .checks .tick{stroke-dashoffset:0;transition:none} .req{position:relative;align-self:start;background:var(--white);border:1px solid var(--line); border-radius:var(--r-card);padding:32px;box-shadow:var(--sh);overflow:hidden} /* ТЗ 14.11: отблеск и наклон убраны, золотая рамка 1 px оставлена */ .req{border-color:rgba(217,169,63,.55)} .req h3{position:relative;font-family:var(--display);font-weight:600;font-size:19px;margin-bottom:20px} .req dl{position:relative;margin:0} .req dt{margin-top:20px} .req dt:first-of-type{margin-top:0} .req dd{margin:4px 0 0;font-variant-numeric:tabular-nums} /* R-5-D17: подписи обычным регистром — трекингованных капсов на странице и так много, eyebrow их уже несёт */ .req dt{font-weight:500;font-size:13px;color:var(--ink-2)} .req dd{font-weight:500} .req a{display:inline-flex;align-items:center;min-height:44px;color:var(--navy-900); text-decoration:none;border-bottom:1px solid rgba(20,48,79,.3)} .req a:hover{border-bottom-color:var(--navy-900)} /* знак компании — вектор (ТЗ 14.10): обводка прочерчивается один раз, затем появляется заливка. Ниже 1024 px знака нет. */ .znak{display:none} @media (min-width:1024px){ .znak{display:block;width:160px;height:160px;margin-top:56px} /* pathLength="1" у контура: длина нормирована, поэтому обводка прочерчивается целиком независимо от реальной длины пути */ /* R-6-D16: при viewBox 500 и размере 160 px «stroke-width:2» давала 0.64 px — мутную оливковую нить. Толщина не масштабируется. */ .znak use{fill:#FFFFFF;fill-opacity:0;stroke:rgba(217,169,63,.55);stroke-width:1; vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1} html.js .znak.is-in use{fill-opacity:.08;stroke-dashoffset:0; transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1),fill-opacity .6s 1.6s linear} html:not(.js) .znak use,html[data-motion=still] .znak use{fill-opacity:.08;stroke-dashoffset:0; transition:none} } /* R-5-D10: карточка успеха не схлопывается — держит высоту формы */ .form-card.is-sent{min-height:var(--form-h,0)} .form-card.is-sent .done{display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;min-height:inherit} .done h3,.done p{max-width:36ch} /* -------------------------------------------------- запит (ТЗ 5.5) ------ */ .req-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start} @media (min-width:1024px){ /* R-4-D07: две колонки по ТЗ 5.5 — текст и контакты слева, форма справа, знак компании — вектор в левой колонке под контактами (ТЗ 14.10). */ .req-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px; grid-template-rows:auto 1fr} .req-grid > div:first-child{grid-column:1;grid-row:1} .form-card{grid-column:2;grid-row:1 / span 2;align-self:start;max-width:560px} #zapyt-title{max-width:none} } /* R-7-T10: кегль H2 «Запиту» — одно правило на диапазон, без перебивок. Заголовок везде встаёт в две строки «Отримати комерційну / пропозицію», а колонка на каждом диапазоне своя (R-3-19, R-4-D07, R-6-D11). */ @media (min-width:1024px) and (max-width:1199px){ /* на узком «десктопе» колонка меньше — кегль и сетка под те же две строки */ .req-grid{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:48px} #zapyt h2{font-size:24px} } @media (min-width:1200px) and (max-width:1279px){ #zapyt h2{font-size:30px} } /* R-6-D11 / R-7-D05: на 1280+ колонки «Запиту» равные, заголовок 32 px. */ @media (min-width:1280px){ .req-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr)} #zapyt h2{font-size:32px} } .contacts{margin-top:16px;display:grid;gap:0} .contacts a{display:inline-flex;align-items:center;gap:12px;color:var(--white);text-decoration:none; font-size:18px;min-height:44px} .contacts a + a{margin-top:12px} .contacts .hours{margin-top:6px} .contacts a svg{width:20px;height:20px;flex:none} .contacts a svg *{fill:none;stroke:var(--gold);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .contacts a span{position:relative} .contacts a span::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-base)} .contacts a:hover span::after{transform:scaleX(1)} .hours{color:var(--on-dark-2);font-size:14px} .contacts-lead{margin-top:32px;font-size:14px} /* -------------------------------------------------- подвал (ТЗ 5.6) ----- */ .foot{position:relative;z-index:1;color:var(--on-dark);border-top:1px solid rgba(255,255,255,.08)} .foot-line{height:1px;background:linear-gradient(90deg,var(--gold),rgba(217,169,63,0)); transform-origin:left} .foot-in{display:grid;grid-template-columns:1fr;gap:32px;padding-block:64px 32px} @media (min-width:1024px){.foot-in{grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-block:80px 32px}} .foot img,.foot .logo-mark{display:block;height:32px;width:auto;margin-bottom:20px} .foot h2{font-weight:500;font-size:13px; color:var(--on-dark-2);margin-bottom:16px} .foot p,.foot li{color:var(--on-dark-2);font-size:14px} .foot p + p{margin-top:6px} .foot ul{display:grid;gap:2px} .foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark-2);text-decoration:none} .foot a:hover{color:var(--white)} .foot-bottom{display:grid;gap:8px;padding-block:24px 32px;border-top:1px solid rgba(255,255,255,.08); font-size:13px;color:var(--on-dark-2);align-items:baseline} @media (min-width:640px){.foot-bottom{grid-template-columns:1fr auto;font-size:14px}} .foot-bottom p:last-child{text-align:left} @media (min-width:640px){.foot-bottom p:last-child{text-align:right}} /* ТЗ 15.8: подпись OpenStreetMap — отдельной строкой справа, на телефоне последней строкой; ссылка только на слове «OpenStreetMap». */ /* альфа .62, а не .60: при .60 контраст 4.36:1 против нормы AA 4.5 (R-10-T08) */ .foot-bottom .osm{font-size:12px;line-height:1.5;color:rgba(184,196,214,.62);text-align:left} @media (min-width:640px){ .foot-bottom{grid-template-columns:1fr auto auto;column-gap:24px} .foot-bottom .osm{text-align:right} } /* R-8-D05: зону нажатия даём псевдоэлементом, иначе высокая ссылка сдвигает базовую линию третьего элемента относительно первых двух */ .foot-bottom .osm a{color:inherit;text-decoration:none;position:relative;display:inline} .foot-bottom .osm a::after{content:"";position:absolute;inset:-15px -8px} .foot-bottom .osm a:hover,.foot-bottom .osm a:focus-visible{color:var(--on-dark-2); text-decoration:underline;text-decoration-thickness:1px} /* R-7-D01: стили секций пришли — показываем их. Правило обязано быть последним в файле и весомее скрывающего: ссылка на этот файл стоит в раньше встроенного