/* ========================================================= IT Solutions — visual refresh v2 Drop-in для существующего vanilla CSS. Тексты/порядок блоков не трогает. ========================================================= */ /* 1. TOKENS ------------------------------------------------ Фон чуть глубже и холоднее, поверхности разведены по 3 уровням высоты: иерархия читается светом, а не рамками. */ :root { /* фон и поверхности (elevation 0 → 3) */ --bg: #0a1120; --bg-alt: #0d1728; --surface: #121d33; --surface-2: #172641; --surface-3: #1d2f50; /* границы: тихая по умолчанию, сильная — для hover/focus */ --border: #1d2d4b; --border-strong: #2b4270; --hairline: rgba(148, 176, 224, .10); /* текст: 3 ступени вместо 2 */ --text: #eef2f9; --text-dim: #a9b6cf; --text-mute: #7888a6; /* акценты */ --accent: #3aa0ff; --accent-hover: #62b4ff; --accent-ink: #04111f; /* текст на акцентной кнопке */ --accent-soft: rgba(58, 160, 255, .12); --accent-line: rgba(58, 160, 255, .35); --accent-2: #5fe0c0; --accent-2-soft: rgba(95, 224, 192, .10); /* градиенты */ --grad-brand: linear-gradient(135deg, #3aa0ff 0%, #5fe0c0 100%); --grad-glow: radial-gradient(60% 50% at 50% 0%, rgba(58,160,255,.10), transparent 70%); --grad-rule: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent); /* тени: мягкие, с холодным оттенком, без «висящих» чёрных пятен */ --shadow-sm: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -8px rgba(0,0,0,.45); --shadow-lg: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 48px -16px rgba(0,0,0,.55); --shadow-cta: 0 8px 24px -8px rgba(58,160,255,.55); /* радиусы */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; /* ритм */ --maxw: 1160px; --gutter: clamp(20px, 5vw, 40px); --section-y: clamp(72px, 10vw, 136px); --stack-lg: clamp(40px, 5vw, 64px); /* заголовок секции → контент */ /* типографика */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --fs-h1: clamp(34px, 5.2vw, 60px); --fs-h2: clamp(28px, 3.6vw, 42px); --fs-h3: 18px; --fs-body: 16px; --fs-lead: clamp(17px, 1.6vw, 19px); } /* 2. BASE -------------------------------------------------- */ body { background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; margin: 0; } h1 { font-size: var(--fs-h1); font-weight: 650; letter-spacing: -0.03em; } h2 { font-size: var(--fs-h2); font-weight: 620; } h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } p { text-wrap: pretty; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* 3. SECTIONS + мягкие переходы ---------------------------- Чередование bg/bg-alt + градиентная волосяная линия вместо резкой смены цвета. Glow сверху даёт глубину без анимаций. */ .section { position: relative; padding-block: var(--section-y); } .section--alt { background: var(--bg-alt); } .section::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--grad-rule); } .section--glow { background-image: var(--grad-glow); } /* Full-screen sections on laptop-and-up: each section is at least one viewport tall, its content vertically centered. Short sections (hero, process, audit) end up visually "full screen"; sections whose content already exceeds 100vh (problems, solutions, technologies, contact) are unaffected — min-height is a floor, not a cap. Scoped to ≥1024px so mobile isn't forced into tall near-empty sections. */ @media (min-width: 1024px) { .section { min-height: 100vh; display: flex; align-items: center; } .section > .container { width: 100%; } } .section-head { max-width: 680px; margin-bottom: var(--stack-lg); display: grid; gap: 16px; } .section-head p { color: var(--text-dim); font-size: var(--fs-lead); margin: 0; } /* Моно-«eyebrow»: инженерная интонация без стартап-пестроты */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); } .eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--accent-2); border-radius: 1px; } /* "Работаем с" / vendor grid — карточки с реальными лого (Simple Icons, монохром) или 2-буквенной монограммой для вендоров без файла лого. Монограмма всегда в разметке под img: если файл есть — он рисуется поверх и закрывает её; если файла нет — img просто не выводится. */ .vendor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 8px; } .vendor-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .2s, background .2s, transform .2s; } .vendor-card:hover { border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-2px); } .vendor-logo { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--bg); border: 1px solid var(--border-strong); overflow: hidden; font: 600 13px/1 var(--mono); letter-spacing: .02em; color: var(--accent); } .vendor-logo img { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; object-fit: contain; background: var(--bg); } .vendor-info { display: grid; gap: 3px; min-width: 0; } .vendor-info__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .vendor-name { font-weight: 600; font-size: .95rem; color: var(--text); } .vendor-cat { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); white-space: nowrap; } .vendor-desc { font-size: .85rem; line-height: 1.45; color: var(--text-dim); margin: 0; } /* 4. BUTTONS ------------------------------------------------ Карточки никогда не бывают залиты акцентом — поэтому сплошная синяя кнопка с тёмным текстом всегда «самое яркое на экране». */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--radius-sm); font: 600 15px/1 var(--font); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; } .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-cta); } .btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn--ghost:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); } .btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; } .btn .arrow { transition: transform .15s; } .btn:hover .arrow { transform: translateX(3px); } @media (max-width: 480px) { .btn { width: 100%; } } /* 5. CARDS -------------------------------------------------- Единая анатомия: иконка → заголовок → 1-2 строки текста. Разный «вес» у проблем (с меткой-последствием) и услуг (с номером), чтобы блоки не сливались в одну сетку одинаковых плиток. */ .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .card { position: relative; display: grid; align-content: start; gap: 14px; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color .2s, background .2s, transform .2s; } .card:hover { border-color: var(--border-strong); background: var(--surface-2); } .card h3 { margin: 4px 0 0; } .card p { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.55; } /* Проблема: тихая тил-плашка «последствия» внизу */ .card--problem .tag { justify-self: start; margin-top: 6px; font: 500 12px/1 var(--mono); color: var(--text-mute); padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; } /* Услуга: номер справа сверху — помогает сканировать 8 карточек */ .card--service .num { position: absolute; top: 24px; right: 24px; font: 500 12px/1 var(--mono); color: var(--text-mute); } /* 6. ICONS -------------------------------------------------- Inline SVG 24×24, stroke 1.6, currentColor. Плитка-подложка делает иконки одинаковыми по «массе» независимо от формы. */ .icon-tile { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(58,160,255,.18); } .icon-tile--teal { color: var(--accent-2); background: var(--accent-2-soft); border-color: rgba(95,224,192,.18); } .icon-tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* 7. FLOW DIAGRAM (Internet → Firewall → VLAN → Wi-Fi → …) -- Горизонтально на desktop, вертикально на mobile. Только CSS.
  1. WANInternet
    2. …
*/ .flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; counter-reset: f; } .flow__node { position: relative; display: grid; gap: 4px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; } .flow__node--key { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); } .flow__k { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); } .flow__node:not(:last-child)::after { content: ""; position: absolute; left: 24px; top: 100%; width: 1px; height: 28px; background: linear-gradient(var(--accent-line), var(--accent)); } .flow__node:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: calc(100% + 22px); border: 3.5px solid transparent; border-top: 5px solid var(--accent); z-index: 1; } @media (min-width: 900px) { .flow--h { flex-direction: row; gap: 32px; } .flow--h .flow__node { flex: 1; } .flow--h .flow__node:not(:last-child)::after { left: 100%; top: 50%; width: 32px; height: 1px; background: linear-gradient(90deg, var(--accent-line), var(--accent)); } .flow--h .flow__node:not(:last-child)::before { left: calc(100% + 26px); top: calc(50% - 3.5px); border: 3.5px solid transparent; border-left: 5px solid var(--accent); } } /* Компактная версия для второстепенных сценариев */ .flow-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); color: var(--text-dim); } .flow-chips span { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-alt); } .flow-chips i { font-style: normal; color: var(--accent); } /* 8. PROCESS STEPS ----------------------------------------- Линия с узлами: процесс читается как последовательность, а не как ещё одна сетка карточек. */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } .step { position: relative; padding: 0 20px 32px 0; border-top: 1px solid var(--border-strong); } .step::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--accent); } .step__n { display: block; margin: 24px 0 12px; font: 500 12px/1 var(--mono); color: var(--accent); letter-spacing: .1em; } .step p { color: var(--text-dim); font-size: 15px; margin: 8px 0 0; } /* 9. IT AUDIT — выделенный оффер --------------------------- Градиентная рамка 1px — единственное место с brand-градиентом, поэтому блок воспринимается как «главное предложение». */ .audit { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-lg); border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-brand) border-box; box-shadow: var(--shadow-lg); } .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .checklist li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; color: var(--text-dim); } .checklist li::before { content: ""; width: 12px; height: 7px; margin-top: 6px; border: solid var(--accent-2); border-width: 0 0 2px 2px; transform: rotate(-45deg); } /* Scenario micro-label ("СЦЕНАРИЙ A · ОФИС" / "B · СКЛАД") above a card's h3 */ .scenario-tag { display: block; margin-bottom: 4px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); } .scenario-tag--accent { color: var(--accent); } /* Technologies section head: heading block + "ask about your stack" link side by side, same row-wrap pattern as elsewhere on the page. */ .tech-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; } .tech-footnote { margin: 24px 0 0; font: 500 12px/1.5 var(--mono); color: var(--text-mute); } /* 10. TRUST — «Инженерный подход» -------------------------- Список с крупными моно-номерами и волосяными линиями — спокойно, как в технической документации, а не рекламный буллет-лист. */ .principles { list-style: none; margin: 0; padding: 0; } .principle { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--hairline); } .principle:last-child { border-bottom: 1px solid var(--hairline); } .principle__n { font: 500 13px/1.6 var(--mono); color: var(--accent-2); } /* 11. FORM -------------------------------------------------- */ .field { display: grid; gap: 8px; } .field label { font-size: 13px; font-weight: 500; color: var(--text-dim); } .field.field-check { display: flex; align-items: flex-start; gap: 10px; } .field-check input { width: auto; margin-top: 3px; } .field-check label { font-size: 13px; } .input { min-height: 48px; padding: 12px 14px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; } .input::placeholder { color: var(--text-mute); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } textarea.input { min-height: 120px; resize: vertical; } /* 12. HERO — инженерная сетка вместо фото ------------------ */ .hero { position: relative; overflow: hidden; padding-block: clamp(96px, 14vw, 168px) var(--section-y); } /* Анимированная сетка (::before) — раньше это был ::after с mask-image, и анимировался background-position. Комбинация "mask + animated background" заставляет браузер перекомпоновывать маскированный слой на КАЖДЫЙ кадр (repaint), что на слабом GPU даёт заметные рывки. Теперь сетка двигается через transform (чисто GPU-композитинг, без repaint): слой сделан больше контейнера на один тайл (inset:-60px > 56px), поэтому translate никогда не открывает пустой край. Статичная виньетка вынесена в отдельный слой (::after) — обычный градиент, а не mask-image, поэтому ей вообще не нужно ничего перевычислять на кадрах анимации. */ .hero::before { content: ""; position: absolute; inset: -60px; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: 56px 56px; animation: grid-pan 40s linear infinite; will-change: transform; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(70% 60% at 70% 30%, transparent, var(--bg) 78%); } .hero > * { position: relative; z-index: 3; } /* Лёгкая анимация фона hero: медленный дрейф сетки и двух glow-пятен. Сетка — transform (см. выше), glow-пятна — transform, пульсирующие узлы — opacity. Всё компонуется GPU без перерисовки, поэтому 22–40 с на цикл воспринимается как плавный «живой» фон, а не как рывками едущий эффект. первым ребёнком .hero */ .hero__bg { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .hero__bg i { position: absolute; border-radius: 50%; } .hero__bg i:nth-child(1) { width: min(60vw, 760px); aspect-ratio: 1; right: -10%; top: -30%; background: radial-gradient(closest-side, rgba(58,160,255,.16), transparent); animation: glow-a 22s ease-in-out infinite; } .hero__bg i:nth-child(2) { width: min(50vw, 620px); aspect-ratio: 1; left: -10%; bottom: -35%; background: radial-gradient(closest-side, rgba(95,224,192,.08), transparent); animation: glow-b 28s ease-in-out infinite; } .hero__bg b { position: absolute; width: 4px; height: 4px; border-radius: 1px; background: var(--accent-2); box-shadow: 0 0 12px rgba(95,224,192,.6); opacity: .35; animation: node-pulse 6s ease-in-out infinite; } .hero__bg b:nth-of-type(1) { left: 18%; top: 22%; } .hero__bg b:nth-of-type(2) { left: 64%; top: 14%; animation-delay: 1.6s; } .hero__bg b:nth-of-type(3) { left: 82%; top: 46%; animation-delay: 3.2s; } .hero__bg b:nth-of-type(4) { left: 40%; top: 58%; animation-delay: 4.8s; } .hero__bg b:nth-of-type(5) { left: 90%; top: 20%; animation-delay: 2.4s; } @keyframes node-pulse { 50% { opacity: .8; } } @keyframes grid-pan { to { transform: translate(-56px, -56px); } } @keyframes glow-a { 50% { transform: translate(-8%, 6%) scale(1.15); } } @keyframes glow-b { 0%,100% { transform: scale(1.1); } 50% { transform: translate(10%, -4%) scale(.95); } } /* 14. ТЕМАТИЧЕСКИЕ ФОНОВЫЕ ФОТО ПО РУБРИКАМ ------------------ Один слой (::after — ::before уже занят hairline-линией секции), фото + тёмный градиент запечены ВМЕСТЕ в background-image (не через отдельный opacity/filter — так overlay не "высветляет" фото, а даёт ровно рассчитанную темноту). Исходники — превью-разрешение (~550px), поэтому overlay намеренно плотный: скрывает мягкость апскейла, а не декоративен сам по себе. .container поднят в отдельный стек-контекст (z-index:1), чтобы текст всегда читался поверх фото на любой секции. */ .section--photo { position: relative; } .section--photo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(180deg, rgba(10,17,32,.88) 0%, rgba(10,17,32,.93) 100%), var(--section-photo); background-size: cover; background-position: center; } .section--photo.section--alt::after { background-image: linear-gradient(180deg, rgba(13,23,40,.88) 0%, rgba(13,23,40,.93) 100%), var(--section-photo); } .section--photo > .container { position: relative; z-index: 1; } #probleme { --section-photo: url(/assets/img/bg-problems.webp); } #solutii { --section-photo: url(/assets/img/bg-solutions.webp); } #proces { --section-photo: url(/assets/img/bg-process.webp); } #servicii { --section-photo: url(/assets/img/bg-services.webp); } #tehnologii { --section-photo: url(/assets/img/bg-tech.webp); } #audit { --section-photo: url(/assets/img/bg-audit.webp); } #de-ce-noi { --section-photo: url(/assets/img/bg-approach.webp); } #contact { --section-photo: url(/assets/img/bg-contact.webp); } /* Hero — отдельный слой (не ::before/::after, они уже заняты анимированной сеткой выше): статичное фото датацентра позади grid-pan/glow-анимации, с тем же плотным overlay для читаемости текста. */ .hero__photo { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(180deg, rgba(10,17,32,.55) 0%, rgba(10,17,32,.8) 65%, rgba(10,17,32,.9) 100%), url(/assets/img/bg-hero.webp); background-size: cover; background-position: center; } /* Hero — двухколоночная сетка: текст+CTA слева, иллюстративная карточка архитектуры справа. Карточка декоративная (не реальные данные клиента), поэтому весь блок помечен aria-hidden в разметке. */ .hero__grid { display: grid; gap: 56px; align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .hero__diagram { padding: 28px; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .hero__diagram-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); } .hero__diagram-status { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-2); } .hero__diagram-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); } .hero__diagram-flow { display: grid; gap: 0; } .hero__diagram-node { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-alt); border: 1px solid var(--border-strong); display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .95rem; } .hero__diagram-node span:last-child { font: 500 11px/1.9 var(--mono); color: var(--text-mute); } .hero__diagram-node--active { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); } .hero__diagram-node--active span:last-child { color: var(--accent); } .hero__diagram-link { width: 1px; height: 22px; margin-left: 24px; background: linear-gradient(var(--accent-line), var(--accent)); } .hero__diagram-vlans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .hero__diagram-vlan { padding: 10px; border-radius: var(--radius-sm); background: var(--bg-alt); border: 1px solid var(--border); font: 500 12px/1.3 var(--mono); color: var(--text-dim); } .hero__diagram-vlan span { display: block; color: var(--text-mute); } /* 13. MOBILE (320–768) ------------------------------------- */ @media (max-width: 768px) { .card { padding: 22px; } .section-head { margin-bottom: 32px; } .principle { grid-template-columns: 40px 1fr; gap: 12px; } .step { padding-right: 0; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }