/* ── Шрифты ─────────────────────────────────────────────── */ @font-face{font-family:Unbounded;font-style:normal;font-weight:600 800;font-display:swap; src:url(fonts/unbounded-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+2000-206F,U+2212;} @font-face{font-family:Unbounded;font-style:normal;font-weight:600 800;font-display:swap; src:url(fonts/unbounded-cyrillic.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+2116;} @font-face{font-family:Onest;font-style:normal;font-weight:400 600;font-display:swap; src:url(fonts/onest-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+2000-206F,U+2212;} @font-face{font-family:Onest;font-style:normal;font-weight:400 600;font-display:swap; src:url(fonts/onest-cyrillic.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+2116;} /* ── Токены ─────────────────────────────────────────────── */ :root{ --paper:#F4F5F7; --white:#FFFFFF; --navy:#1F2A44; --steel:#8A8F98; --steel-text:#666D78; --plate:#C8CCD1; --ink-soft:#4A5568; /* Семантический цвет состояния (ошибка формы), не из фирменной палитры. Проверен на фоне, где реально лежит, — тёмная плашка формы (--navy): контраст 5.36:1, проходит AA (4.5:1) для обычного текста. */ --error:#E8836B; --container:1200px; --gutter:24px; --radius:4px; --section-y:clamp(64px,9vw,120px); /* Высота шапки — используется и в самой шапке (.header-inner), и в двух местах, которые обязаны совпадать с ней вручную: inset мобильной панели меню и отрицательный margin-top у .hero (поднимает hero под шапку, см. ниже). Одна правка здесь — и все три места остаются согласованы. */ --header-h:76px; } @media (min-width:900px){ :root{ --gutter:40px; } } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ margin:0;background:var(--paper);color:var(--navy); font-family:Onest,ui-sans-serif,system-ui,sans-serif; font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:Unbounded,sans-serif;margin:0;text-wrap:balance} h1{font-weight:800;font-size:clamp(34px,6vw,68px);line-height:1.04;letter-spacing:-.015em} h2{font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.15} h3{font-weight:600;font-size:19px;line-height:1.3} p{margin:0;max-width:68ch;color:var(--ink-soft)} .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} /* scroll-margin-top обов'язковий: шапка sticky, і без відступу якір (#rfq, #services, #contact) ставить заголовок секції рівно під неї — перший рядок ховається за шапкою. */ .section{padding:var(--section-y) 0;scroll-margin-top:var(--header-h)} .eyebrow{ font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--steel-text);margin:0 0 14px; } /* ── Кнопки ─────────────────────────────────────────────── */ .btn,.btn-secondary{ display:inline-flex;align-items:center;justify-content:center; min-height:52px;padding:0 28px;border-radius:var(--radius); font-family:Unbounded,sans-serif;font-weight:600;font-size:15px; text-decoration:none;cursor:pointer;border:1.5px solid var(--navy); transition:transform .18s ease,opacity .18s ease; } .btn{background:var(--navy);color:var(--paper)} .btn-secondary{background:transparent;color:var(--navy)} .btn:hover,.btn-secondary:hover{transform:translateY(-2px)} .btn:active,.btn-secondary:active{transform:translateY(0)} :where(a,button,input,textarea,select,summary):focus-visible{ outline:3px solid var(--navy);outline-offset:3px; } /* ── Карточка ───────────────────────────────────────────── */ .card{ background:var(--white);border:1px solid var(--plate);border-radius:var(--radius); overflow:hidden;transition:border-color .2s ease; } .card:hover{border-color:var(--navy)} /* ── Появление при скролле ──────────────────────────────── */ .reveal{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease} .reveal.is-visible{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .btn,.btn-secondary,.card{transition:none} .site-header,.menu,.menu-bars,.menu-bars::before,.menu-bars::after{transition:none} } /* ── Скрытая ссылка «к содержимому» ─────────────────────── */ .skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--navy);color:var(--paper);padding:12px 20px;border-radius:0 0 var(--radius) 0; } .skip:focus{left:0} .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ── Шапка ──────────────────────────────────────────────── */ .site-header{ position:sticky;top:0;z-index:50; background:var(--paper);border-bottom:1px solid transparent; transition:border-color .2s ease,background-color .2s ease; } .site-header.is-scrolled{border-bottom-color:var(--plate)} .header-inner{display:flex;align-items:center;gap:20px;min-height:var(--header-h)} .logo{display:inline-flex;align-items:center;gap:12px;color:var(--navy);text-decoration:none} .logo-mark{flex:none} .logo-word{font-family:Unbounded,sans-serif;font-weight:800;font-size:20px;letter-spacing:.04em} .menu{display:flex;align-items:center;gap:28px;margin-left:auto} .nav-link{color:var(--navy);text-decoration:none;font-weight:600;font-size:15px} .nav-link:hover{text-decoration:underline;text-underline-offset:5px} .lang-switch{ color:var(--steel-text);text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.06em; } .lang-switch:hover{color:var(--navy)} .header-cta{min-height:44px;padding:0 20px;font-size:14px} .menu-toggle{display:none;margin-left:auto;width:44px;height:44px; background:none;border:0;padding:0;cursor:pointer} .menu-bars,.menu-bars::before,.menu-bars::after{ display:block;width:24px;height:2px;background:var(--navy);margin:0 auto;content:''; transition:transform .2s ease,opacity .2s ease; } .menu-bars::before{transform:translateY(-7px)} .menu-bars::after{transform:translateY(5px)} .menu-toggle[aria-expanded="true"] .menu-bars{background:transparent} .menu-toggle[aria-expanded="true"] .menu-bars::before{transform:rotate(45deg)} .menu-toggle[aria-expanded="true"] .menu-bars::after{transform:rotate(-45deg) translateY(-1px)} @media (max-width:899px){ .menu-toggle{display:block} .menu{ position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch; gap:0;margin:0;padding:12px var(--gutter) 28px;background:var(--paper); border-bottom:1px solid var(--plate); visibility:hidden;opacity:0;transform:translateY(-8px); transition:opacity .2s ease,transform .2s ease,visibility .2s; } .menu.is-open{visibility:visible;opacity:1;transform:none} .nav-link,.lang-switch{padding:14px 0;border-bottom:1px solid var(--plate);font-size:17px} .header-cta{margin-top:18px} } /* ── Первый экран ───────────────────────────────────────── */ .hero{position:relative;isolation:isolate;min-height:min(88vh,760px);display:flex;align-items:flex-end; padding:120px 0 clamp(48px,7vw,88px);overflow:hidden; /* Страховка: .hero-media/img — position:absolute, лежит поверх этого фона. Если в Task 10 реальное фото не загрузится (сеть, битая ссылка), просвечивает этот navy-фон, а не светлый фон страницы — иначе светлый текст первого экрана окажется на светлом --paper и станет нечитаемым. */ background:var(--navy); /* Шапка position:sticky всё равно занимает своё место в потоке (--header-h), поэтому без сдвига hero стартовал бы ниже шапки, а не под ней — и прозрачная шапка просто показывала бы фон страницы, а не тёмное фото. Поднимаем hero под шапку на её высоту (та же --header-h, что и в inset мобильного меню ниже), чтобы фото/градиент оказались у неё за спиной. */ margin-top:calc(-1 * var(--header-h))} .hero-media{position:absolute;inset:0;z-index:-2} .hero-media img{width:100%;height:100%;object-fit:cover;display:block} .hero::before{ content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(31,42,68,.94) 0%,rgba(31,42,68,.78) 42%,rgba(31,42,68,.35) 100%); } .hero-inner{color:var(--paper)} .hero-eyebrow{color:var(--plate)} .hero h1{color:var(--paper);max-width:16ch} .hero-sub{color:var(--plate);margin-top:22px;max-width:56ch;font-size:clamp(16px,1.5vw,19px)} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .hero .btn{background:var(--paper);color:var(--navy);border-color:var(--paper)} .hero-btn-light{color:var(--paper);border-color:rgba(244,245,247,.65)} .hero-btn-light:hover{border-color:var(--paper)} /* Шапка лежит поверх тёмного первого экрана, пока страница не прокручена. Правило обязательно завязано на body:has(.hero) — оно относится только к странице с тёмным первым экраном. Без этого условия на будущих страницах без .hero (privacy.html, /en/ и т.д., ссылки на которые уже стоят в футере) при scrollY=0 навигация оказалась бы светлым текстом на светлом --paper фоне страницы — то есть невидимой. */ body:has(.hero) .site-header:not(.is-scrolled){background:transparent;color:var(--paper)} body:has(.hero) .site-header:not(.is-scrolled) .logo, body:has(.hero) .site-header:not(.is-scrolled) .nav-link{color:var(--paper)} body:has(.hero) .site-header:not(.is-scrolled) .lang-switch{color:var(--plate)} body:has(.hero) .site-header:not(.is-scrolled) .header-cta{background:var(--paper);color:var(--navy);border-color:var(--paper)} body:has(.hero) .site-header:not(.is-scrolled) .menu-bars, body:has(.hero) .site-header:not(.is-scrolled) .menu-bars::before, body:has(.hero) .site-header:not(.is-scrolled) .menu-bars::after{background:var(--paper)} @media (max-width:899px){ body:has(.hero) .site-header.is-open-menu:not(.is-scrolled){background:var(--paper)} /* .menu уже непрозрачный (background:var(--paper) в базовых стилях мобильного меню выше), но цвет текста внутри него по-прежнему завязан на правило ":not(.is-scrolled)" — без сброса пункты навигации останутся светлыми (var(--paper)) на светлой же панели, то есть нечитаемыми. Возвращаем обычные («светлая шапка») цвета на время, пока меню открыто. */ body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .logo, body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .nav-link{color:var(--navy)} body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .lang-switch{color:var(--steel-text)} body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .menu-bars, body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .menu-bars::before, body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .menu-bars::after{background:var(--navy)} } /* ── Про компанію ───────────────────────────────────────── */ .about-inner{display:grid;gap:clamp(28px,4vw,56px);align-items:center} @media (min-width:900px){ .about-inner{grid-template-columns:1fr 1fr} } .about-media img{width:100%;height:auto;display:block;border-radius:var(--radius)} .about-text h2{margin-bottom:20px} .about-text p+p{margin-top:16px} .about-text .btn{margin-top:28px} /* ── Чому обирають Intelsoft ────────────────────────────── */ .why{background:var(--white);border-top:1px solid var(--plate);border-bottom:1px solid var(--plate)} .why h2{margin-bottom:36px} .feature-grid{display:grid;gap:16px} @media (min-width:640px){ .feature-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ .feature-grid{grid-template-columns:repeat(3,1fr)} } .feature{padding:28px 26px} .feature h3{margin-bottom:10px} .feature p{font-size:15.5px} /* ── Послуги ────────────────────────────────────────────── */ .services h2{margin-bottom:14px} .section-lead{margin-bottom:40px;font-size:18px;max-width:60ch} .service-grid{display:grid;gap:16px} @media (min-width:560px){ .service-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:900px){ .service-grid{grid-template-columns:repeat(3,1fr)} } @media (min-width:1200px){ .service-grid{grid-template-columns:repeat(4,1fr)} } .service{display:flex;flex-direction:column} .service-media{overflow:hidden;aspect-ratio:4/3;background:var(--plate)} .service-media img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .35s ease} .service:hover .service-media img{transform:scale(1.03)} .service-body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:8px} .service-body p{font-size:15px;line-height:1.55} .services-note{margin-top:32px;color:var(--steel-text);font-size:15px} @media (prefers-reduced-motion:reduce){ .service-media img{transition:none} } /* ── Галузі ─────────────────────────────────────────────── */ .industry-grid{display:grid;gap:14px;margin-top:36px} @media (min-width:560px){ .industry-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ .industry-grid{grid-template-columns:repeat(4,1fr)} } .industry{display:flex;align-items:center;gap:14px;padding:22px 20px; background:var(--white);border:1px solid var(--plate);border-radius:var(--radius); font-weight:600;font-size:15.5px} .industry svg{flex:none;color:var(--navy)} /* ── Виробнича галерея ──────────────────────────────────── */ .gallery{background:var(--white);border-top:1px solid var(--plate)} .gallery-grid{display:grid;gap:8px;margin-top:36px;padding:0 8px} @media (min-width:700px){ .gallery-grid{grid-template-columns:repeat(3,1fr)} } .gallery-item{padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden; border-radius:var(--radius);aspect-ratio:3/2} .gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease} .gallery-item:hover img{transform:scale(1.03)} /* Затемнение — var(--navy) на высокой непрозрачности. rgba() записан явными числами (31,42,68 = #1F2A44), потому что var() внутри rgba() без color-mix() не подставляется; тот же приём уже используется для градиента на первом экране и линии в футере (см. .hero::before, .footer-bottom). */ .lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center; gap:12px;background:rgba(31,42,68,.94);padding:24px} .lightbox[hidden]{display:none} .lightbox img{max-width:min(1200px,88vw);max-height:84vh;object-fit:contain;border-radius:var(--radius)} .lb-close,.lb-prev,.lb-next{ background:none;border:0;color:var(--paper);font-size:38px;line-height:1; cursor:pointer;padding:8px 14px;border-radius:var(--radius); opacity:.8;transition:opacity .18s ease,transform .18s ease; } .lb-close:hover,.lb-prev:hover,.lb-next:hover{opacity:1} .lb-close:active,.lb-prev:active,.lb-next:active{transform:scale(.92)} .lb-close{position:absolute;top:16px;right:20px;font-size:32px} @media (prefers-reduced-motion:reduce){ .gallery-item img{transition:none} .lb-close,.lb-prev,.lb-next{transition:none} } /* ── Наші роботи (кейси) ────────────────────────────────── */ /* Фото кейсів — реальна зйомка з телефона, різної орієнтації: сім вертикальних і три горизонтальні. Тому у картки одна пропорція 4/5 і object-fit:cover: вертикальні трохи підрізаються зверху й знизу, горизонтальні з боків, а сітка лишається рівною. Нове фото під тим самим іменем ляже без правок. */ .projects{background:var(--white);border-top:1px solid var(--plate)} .projects-lead{margin:14px 0 36px} .case-grid{display:grid;gap:18px} @media (min-width:640px){ .case-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ .case-grid{grid-template-columns:repeat(3,1fr)} } .case{display:flex;flex-direction:column} .case-trigger{ position:relative;display:block;width:100%;padding:0;border:0;background:none; cursor:zoom-in;overflow:hidden;aspect-ratio:4/3; } .case-trigger img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .35s ease} .case-trigger:hover img{transform:scale(1.03)} /* Обводка всередину: зовнішня ховається під рамкою картки. */ .case-trigger:focus-visible{outline:3px solid var(--navy);outline-offset:-3px} .case-play{ position:absolute;right:12px;bottom:12px;width:46px;height:46px;border-radius:50%; display:grid;place-items:center;background:rgba(31,42,68,.85); } .case-play svg{width:20px;height:20px;fill:var(--paper)} .case-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px} .case-industry{ font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--steel-text);margin:0; } .case-title{font-size:17.5px;line-height:1.3} .case-desc{font-size:15px;line-height:1.55} .projects-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:40px} .projects-cta p{margin:0;font-weight:600;color:var(--navy)} /* ── Вікно кейсу ────────────────────────────────────────── */ /* rgba() явними числами (31,42,68 = --navy) — той самий приём, що й у .lightbox: var() всередині rgba() без color-mix() не підставляється. */ .case-modal{ position:fixed;inset:0;z-index:100;display:grid;place-items:center; padding:clamp(0px,3vw,32px);background:rgba(31,42,68,.72); } .case-modal[hidden]{display:none} .case-dialog{ position:relative;width:min(100%,1000px);max-height:100%;overflow-y:auto; background:var(--paper);border-radius:var(--radius);display:grid; box-shadow:0 1px 2px rgba(31,42,68,.14),0 16px 40px rgba(31,42,68,.22); } @media (min-width:900px){ .case-dialog{grid-template-columns:1.1fr 1fr;align-items:start} } .case-close{ position:absolute;top:8px;right:10px;z-index:2; width:42px;height:42px;display:grid;place-items:center;cursor:pointer; font-size:30px;line-height:1;color:var(--paper); background:rgba(31,42,68,.72);border:0;border-radius:var(--radius); transition:background-color .18s ease; } .case-close:hover{background:rgba(31,42,68,.92)} .case-close:focus-visible{outline:3px solid var(--paper);outline-offset:-3px} .case-stage img,.case-stage video{ width:100%;max-height:min(70vh,620px);object-fit:contain;display:block; background:var(--navy); } /* На телефоні висота медіа обмежена сильніше: при 70vh вертикальне фото займало майже весь екран, і назва кейсу опинялась нижче згину. */ @media (max-width:899px){ .case-stage img,.case-stage video{max-height:48vh} } .case-thumbs{display:flex;gap:8px;padding:10px 10px 0;flex-wrap:wrap} .case-thumb{ position:relative;width:62px;height:62px;padding:0;overflow:hidden;cursor:pointer; background:none;border:1.5px solid var(--plate);border-radius:2px; transition:border-color .18s ease; } .case-thumb img{width:100%;height:100%;object-fit:cover;display:block} .case-thumb:hover{border-color:var(--navy)} .case-thumb.is-on{border-color:var(--navy)} /* Трикутник відтворення на мініатюрі відео — бордерами, бо псевдоелемент не вміє SVG, а інлайнові стилі й іконки в розмітці тут заборонені CSP. */ .case-thumb-video::after{ content:"";position:absolute;left:50%;top:50%; transform:translate(-40%,-50%); border-style:solid;border-width:7px 0 7px 12px; border-color:transparent transparent transparent var(--paper); filter:drop-shadow(0 1px 2px rgba(31,42,68,.6)); } .case-modal-body{padding:clamp(20px,3vw,30px)} .case-modal-body h3{font-size:clamp(19px,2.2vw,23px);margin:6px 0 12px} .case-modal-desc{margin-bottom:24px} @media (prefers-reduced-motion:reduce){ .case-trigger img,.case-thumb,.case-close{transition:none} } /* ── Партнерство ────────────────────────────────────────── */ /* Тёмная плашка, а не светлая секция: блок заявляет позиционирование и стоит между двумя светлыми — на paper он читался бы как ещё один абзац текста и терялся. Текст берёт --plate, как в блоке контактов: на navy у него 8.4:1, у фирменного --steel только 4.39:1. */ .partnership{background:var(--navy);color:var(--paper)} .partnership .eyebrow{color:var(--plate)} /* 24ch, а не меньше: на 22ch английский заголовок рвал «long-term» по дефису — перенос внутри составного слова читается как опечатка. */ .partnership h2{color:var(--paper);max-width:24ch} .partnership p{color:var(--plate)} .partnership p+p{margin-top:16px} .partnership-inner{display:grid;gap:clamp(24px,4vw,56px)} @media (min-width:900px){ .partnership-inner{grid-template-columns:1fr 1fr;align-items:start} } /* Кнопка на тёмном инвертируется, как в контактах. Обводка фокуса тоже: глобальная navy-обводка (styles.css:77) на этом фоне не видна. */ .partnership-cta{margin-top:28px;background:var(--paper);color:var(--navy);border-color:var(--paper)} .partnership-cta:focus-visible{outline:3px solid var(--paper);outline-offset:3px} /* ── Контакти ───────────────────────────────────────────── */ .contact{background:var(--navy);color:var(--paper)} .contact h2,.contact .eyebrow{color:var(--paper)} .contact .eyebrow{color:var(--plate)} .contact p{color:var(--plate)} .contact-inner{display:grid;gap:clamp(32px,5vw,64px)} @media (min-width:900px){ .contact-inner{grid-template-columns:1.15fr 1fr;align-items:start} /* Форма (решение 09-10) занимает правую колонку на обе строки, адреса уходят под телефон в левую. Порядок в разметке при этом остаётся «текст → форма → адреси» — именно так блок читается на мобильном, где колонок нет: сначала позвонить, потом форма, потом справка. Без этого правая колонка оказывалась вдвое длиннее левой и под телефоном зияла пустота в треть высоты блока. */ .contact-text{grid-column:1;grid-row:1} .contact-form{grid-column:2;grid-row:1/span 2} .places{grid-column:1;grid-row:2} } /* Кнопка звонка — главный призыв блока. Форма заявки рядом вторым каналом (решение 09-10), но телефон остаётся крупнее и выше: большинству украинских заказчиков быстрее позвонить, а форма закрывает случаи, где звонок не работает — вечер, выходные, звонок в Киев из-за границы. Светлая плашка на navy даёт максимальный контраст и крупную цель для тапа, номер набран Unbounded как заголовок. Селекторы идут от .contact: без этого `.contact p` (0,1,1) перебивает цвет одиночных классов и текст уходит в приглушённый --plate. */ .contact .call{ display:inline-flex;flex-direction:column;gap:6px; margin-top:30px;padding:16px 22px; background:var(--paper);color:var(--navy);text-decoration:none; transition:background-color .18s ease; } .contact .call-label{ font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--navy); } .contact .call-number{ font-family:Unbounded,sans-serif;font-size:clamp(18px,4.4vw,29px);line-height:1.05;white-space:nowrap; } .contact .call:hover,.contact .call:active{background:var(--plate)} /* Глобальный :focus-visible рисует navy-обводку (styles.css:77) — на тёмной плашке (--navy) она сливается с фоном и пропадает для клавиатурной навигации (1:1 контраст, тот же класс дефектов «невидимое из-за специфичности», что ревью уже находило дважды). Возвращаем видимость. */ .contact .call:focus-visible{outline:3px solid var(--paper);outline-offset:3px} .call-note{margin-top:20px;font-size:15px;line-height:1.6} .contact .call-note a{color:var(--paper);text-decoration:underline;text-underline-offset:4px} .contact .call-note a:hover{color:var(--plate)} /* Адреса — линиями, а не карточками: на тёмной плашке рамка читается спокойнее коробки и повторяет линейную графику знака. */ .places{display:grid;font-style:normal} .place{padding:20px 0;border-bottom:1px solid rgba(244,245,247,.18)} .place:first-child{border-top:1px solid rgba(244,245,247,.18)} .place-role{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin:0 0 8px} .contact .place-addr{color:var(--paper);font-size:17px;line-height:1.5;margin:0} @media (prefers-reduced-motion:reduce){ .contact .call{transition:none} } /* ── Форма запиту ціни (RFQ) ────────────────────────────────────────────── Головна дія сайту. Лежить на світлому --paper перед блоком контактів; усі кнопки «Надіслати креслення» ведуть сюди якорем #rfq. Вхід у форму — зона для креслення, а не поля: людина приходить сюди з файлом, а не з бажанням заповнити анкету. */ .rfq{background:var(--paper)} .rfq-lead{margin:14px 0 36px} .rfq-grid{display:grid;gap:clamp(24px,4vw,48px)} @media (min-width:980px){ .rfq-grid{grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:start} } /* Зона завантаження */ .dropzone{ display:flex;flex-direction:column;align-items:center;text-align:center; padding:clamp(24px,4vw,40px) 20px; background:var(--white); border:1.5px dashed var(--plate);border-radius:var(--radius); transition:border-color .18s ease,background-color .18s ease; } .dropzone.is-over{border-color:var(--navy);border-style:solid;background:#FAFBFC} .dropzone-icon{width:56px;height:46px;fill:none;stroke:var(--navy); stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .dropzone-title{ font-family:Unbounded,sans-serif;font-weight:600;font-size:clamp(17px,2vw,20px); color:var(--navy);margin:16px 0 8px;max-width:none; } .dropzone-formats{font-size:14px;color:var(--steel-text);letter-spacing:.02em;margin:0} .dropzone-or{font-size:13px;color:var(--steel-text);margin:18px 0 12px} .dropzone-btn{min-height:46px;padding:0 22px} .dropzone-limit{font-size:13.5px;color:var(--steel-text);margin:16px 0 0} /* Список прикріплених файлів */ .filelist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px} .filelist:empty{margin:0} .filelist li{ display:flex;align-items:center;gap:12px; padding:11px 14px;background:var(--white); border:1px solid var(--plate);border-radius:var(--radius); } .file-ext{ flex:none;font-family:Unbounded,sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em; padding:4px 7px;border-radius:2px;background:var(--navy);color:var(--paper); } .file-name{flex:1;min-width:0;font-size:15px;color:var(--navy); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .file-size{flex:none;font-size:13.5px;color:var(--steel-text)} .file-drop{ flex:none;width:30px;height:30px;display:grid;place-items:center;cursor:pointer; background:transparent;border:0;border-radius:2px;color:var(--steel-text); transition:color .18s ease,background-color .18s ease; } .file-drop:hover{color:var(--navy);background:var(--paper)} .file-drop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} /* --error підібраний під темну плашку контактів (5.36:1 на navy). На світлому тлі форми він дає лише 3.1:1, тому тут окремий, темніший відтінок. */ .drop-error,.rfq-status.is-error,.field-error{color:#B4462C} .drop-error{font-size:14px;margin:12px 0 0} .drop-error:empty{margin:0} .trust{font-size:13.5px;color:var(--steel-text);margin:16px 0 0} /* Поля */ .rfq-fields{display:grid;gap:18px} @media (min-width:620px){ .rfq-fields{grid-template-columns:1fr 1fr} } /* min-width:0 обов'язковий: без нього довге значення розпирає колонку й штовхає горизонтальний скрол на мобільному. */ .field{display:flex;flex-direction:column;gap:7px;min-width:0} .field-wide{grid-column:1/-1} .field label{font-size:14px;font-weight:600;color:var(--navy)} /* font-size:16px — не смак: усе менше змушує Safari на iPhone зумити сторінку при фокусі в полі, і верстка їде. */ .field input,.field textarea{ font:inherit;font-size:16px;color:var(--navy);background:var(--white); border:1px solid var(--plate);border-radius:var(--radius);padding:11px 13px; transition:border-color .18s ease; } .field input::placeholder,.field textarea::placeholder{color:var(--steel)} .field textarea{resize:vertical;min-height:96px} .field input:focus,.field textarea:focus{border-color:var(--navy);outline:none} .field [aria-invalid=true]{border-color:#B4462C} .field-error{font-size:13.5px;margin:0} .hp{display:none} .rfq-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px} .rfq-status{font-size:15px;color:var(--steel-text);margin:0} .rfq-status.is-success{color:var(--navy);font-weight:600} .rfq-consent{font-size:13.5px;line-height:1.5;color:var(--steel-text);margin:16px 0 0} .rfq-consent a{color:var(--navy)} /* Кнопка з іконкою завантаження на першому екрані й у шапці */ .btn-upload{gap:10px} .btn-upload svg{width:18px;height:18px;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media (prefers-reduced-motion:reduce){ .dropzone,.file-drop,.field input,.field textarea{transition:none} } /* ── Футер ──────────────────────────────────────────────── */ .site-footer{background:var(--navy);color:var(--paper);padding:64px 0 32px} .site-footer .logo{color:var(--paper)} .site-footer a{color:var(--paper)} .site-footer .lang-switch:hover{color:var(--plate)} .footer-inner{display:grid;gap:36px} @media (min-width:900px){ .footer-inner{grid-template-columns:1.4fr 1fr 1.2fr;align-items:start} } .footer-note{color:var(--plate);margin-top:14px;font-size:15px;max-width:38ch} .footer-nav{display:flex;flex-direction:column;gap:10px;font-size:15px} .footer-contacts{display:flex;flex-direction:column;gap:10px;font-style:normal;font-size:15px;color:var(--plate)} .footer-bottom{ grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; border-top:1px solid rgba(244,245,247,.18);padding-top:22px;font-size:14px;color:var(--plate); } /* ── Текстовая страница (политика) ────────────────────────── Ширина колонки задана в ch, а не в пикселях: строка держится в районе 70 знаков независимо от кегля и языка — читается так же, как абзац в техдокументации, а не как растянутая на весь экран простыня. Отступ сверху компенсирует шапку: hero здесь нет, и без него h1 упирался бы в логотип. */ .legal{padding:calc(var(--header-h) + clamp(40px,6vw,72px)) 0 clamp(64px,9vw,110px)} .legal-inner{max-width:74ch} .legal h1{font-size:clamp(30px,4.4vw,46px)} .legal-updated{margin:18px 0 0;color:var(--steel-text);font-size:14px} .legal-lead{margin:28px 0 0;font-size:18px;line-height:1.6} .legal h2{font-size:clamp(20px,2.2vw,24px);margin:44px 0 0} .legal h2 + p{margin-top:12px} .legal p{margin:14px 0 0;line-height:1.65} .legal ul{margin:14px 0 0;padding-left:20px;line-height:1.65} .legal li{margin-top:8px} .legal a{color:var(--navy);text-underline-offset:3px} .legal a:hover{text-decoration-thickness:2px} .legal-contacts{ margin-top:44px;padding-top:24px;border-top:1px solid var(--plate); font-style:normal;color:var(--ink-soft);line-height:1.7; } /* ── Страница 404 ─────────────────────────────────────────── Стили здесь, а не инлайном в самой странице: CSP запрещает инлайновые