/* ========================================================= FordLine — design system Тёмная монохромная тема: свечения, сетка, бегущий луч, частицы, glow-типографика, pill-кнопки. ========================================================= */ /* ---------- Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { /* iOS в альбомной ориентации самовольно раздувает текст — запрещаем */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* серый прямоугольник по тапу на Android/iOS — свои :hover/:active нагляднее */ a, button, input, textarea, label { -webkit-tap-highlight-color: transparent; } /* ---------- Tokens ---------- */ :root { /* поверхности */ --bg: #070707; --bg-2: #0C0C0C; --bg-card: #101010; --bg-soft: rgba(var(--ink-rgb),0.04); --bg-soft-2: rgba(var(--ink-rgb),0.07); /* линии */ --line: rgba(var(--ink-rgb),0.07); --line-strong: rgba(var(--ink-rgb),0.16); /* текст */ --text: #FFFFFF; --text-dim: #8C8C8C; --text-dimmer: #5C5C5C; /* акцент = белое свечение */ --accent: #FFFFFF; --glow-strong: rgba(var(--ink-rgb),0.45); --glow-soft: rgba(var(--ink-rgb),0.14); /* фирменный голубой. Сам --brand одинаков в обеих темах — бренд должен читаться одним и тем же цветом. Отдельный --brand-text нужен потому, что #3D7DCA на белом даёт слабый контраст для мелкого текста: там светлая тема подставляет затемнённый вариант. */ --brand: #3D7DCA; --brand-rgb: 61, 125, 202; --brand-text: #7AAEE8; --brand-contrast: #FFFFFF; /* «чернила»: цвет всех свечений, обводок и заливок, завязанных на акцент. В тёмной теме это белый; светлая тема просто переопределяет эти два значения — и все rgba(var(--ink-rgb), X) по всему файлу следуют сами. */ --ink: #FFFFFF; --ink-rgb: 255, 255, 255; /* та же идея для полупрозрачных «слепков» фона (шапка при скролле, виньетка, мобильное меню, плашка cookie) */ --bg-rgb: 7, 7, 7; /* типографика */ --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; /* сетка */ --container: 1240px; --gutter: 24px; --header-h: 76px; /* радиусы */ --r-pill: 999px; --r-lg: 24px; --r-md: 16px; /* тайминги */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Светлая тема ---------- Переключается атрибутом data-theme на , ставится в script.js. Переопределяем только «сырые» цвета — --ink-rgb тянет за собой все rgba(var(--ink-rgb), X) заливки/обводки/свечения по всему файлу. */ :root[data-theme="light"] { --bg: #FFFFFF; --bg-2: #F6F6F6; --bg-card: #FBFBFB; --text: #0A0A0A; --text-dim: #5C5C5C; --text-dimmer: #8C8C8C; --accent: #0A0A0A; --ink: #0A0A0A; --ink-rgb: 10, 10, 10; --bg-rgb: 255, 255, 255; /* --brand намеренно не переопределяем — фирменный цвет один на обе темы */ --brand-text: #2C63A5; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } /* ========================================================= Заставка при открытии сайта ========================================================= */ .intro-lock, .intro-lock body { overflow: hidden; } .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); /* уезжает сама, чистым CSS — если JS не выполнится, сайт всё равно откроется */ animation: intro-out 0.75s var(--ease) 1.2s forwards; } .intro-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; } /* мягкое фирменное свечение, распускающееся за логотипом */ .intro-inner::before { content: ''; position: absolute; top: 50%; left: 50%; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--brand-rgb),0.3) 0%, transparent 65%); opacity: 0; animation: intro-glow 1.5s var(--ease) 0.15s forwards; } /* логотип и линия — над свечением */ .intro-logo, .intro-line { position: relative; } .intro-logo { height: 46px; width: auto; opacity: 0; transform: scale(0.9); animation: intro-logo-in 1s var(--ease) 0.1s forwards; } /* PNG белый на прозрачном — в светлой теме инвертируем, как в шапке. Держим filter вне анимации: свойство из @keyframes перебило бы invert. */ :root[data-theme="light"] .intro-logo { filter: invert(1); } /* тонкая фирменная линия расходится из-под логотипа */ .intro-line { display: block; width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand), transparent); box-shadow: 0 0 12px rgba(var(--brand-rgb),0.8); animation: intro-line-in 0.9s var(--ease) 0.35s forwards; } @keyframes intro-logo-in { to { opacity: 1; transform: scale(1); } } @keyframes intro-glow { 0% { opacity: 0; transform: scale(0.7); } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0.55; transform: scale(1.06); } } @keyframes intro-line-in { 0% { width: 0; opacity: 0; } 40% { opacity: 1; } 100% { width: 190px; opacity: 0.9; } } @keyframes intro-out { to { opacity: 0; visibility: hidden; } } /* при выключенных анимациях заставку не показываем вовсе */ :root.intro-skip .intro { display: none; } @media (prefers-reduced-motion: reduce) { .intro { display: none; } } a { color: inherit; text-decoration: none; } svg { display: block; } ul { list-style: none; } ::selection { background: rgba(var(--brand-rgb),0.9); color: var(--brand-contrast); } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* ---------- Типографика ---------- */ h1, h2, h3 { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; } /* свечение под текстом — фирменный приём референса */ .glow-text { color: var(--ink); text-shadow: 0 0 18px rgba(var(--ink-rgb),0.35), 0 0 48px rgba(var(--ink-rgb),0.18), 0 0 96px rgba(var(--ink-rgb),0.10); animation: text-pulse 5s ease-in-out infinite; } @keyframes text-pulse { 0%, 100% { text-shadow: 0 0 18px rgba(var(--ink-rgb),.32), 0 0 48px rgba(var(--ink-rgb),.16), 0 0 96px rgba(var(--ink-rgb),.09); } 50% { text-shadow: 0 0 24px rgba(var(--ink-rgb),.48), 0 0 64px rgba(var(--ink-rgb),.24), 0 0 120px rgba(var(--ink-rgb),.14); } } /* ========================================================= Кнопки ========================================================= */ .btn { --btn-py: 11px; --btn-px: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--btn-py) var(--btn-px); font-family: var(--font); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); } .btn-lg { --btn-py: 15px; --btn-px: 26px; font-size: 0.95rem; } /* основная — фирменная голубая таблетка с белым круглым бейджем. Цвет один на обе темы: это главный носитель бренда на странице. */ .btn-primary { background: var(--brand); color: var(--brand-contrast); box-shadow: 0 0 0 rgba(var(--brand-rgb),0); } /* правый отступ ужимаем только там, где есть круглый бейдж со стрелкой — иначе у кнопок без бейджа текст прижимается к краю */ .btn-primary:has(.btn-badge) { padding-right: 8px; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(var(--brand-rgb),0.55), 0 10px 30px rgba(0, 0, 0, 0.4); } .btn-badge { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--bg); color: var(--ink); transition: transform 0.35s var(--ease); } /* внутри голубой кнопки бейдж всегда белый со стрелкой фирменного цвета */ .btn-primary .btn-badge { background: var(--brand-contrast); color: var(--brand); } .btn-lg .btn-badge { width: 34px; height: 34px; flex-basis: 34px; } .btn-badge svg { width: 15px; height: 15px; } .btn-primary:hover .btn-badge { transform: translate(2px, -2px) rotate(45deg); } /* призрачная — тонкая обводка */ .btn-ghost { background: var(--bg-soft); color: var(--text); border-color: var(--line-strong); backdrop-filter: blur(6px); } .btn-ghost:hover { transform: translateY(-2px); border-color: rgba(var(--ink-rgb),0.4); background: var(--bg-soft-2); box-shadow: 0 0 24px rgba(var(--ink-rgb),0.08); } /* ========================================================= Чип / малый лейбл ========================================================= */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; font-size: 0.8rem; font-weight: 500; color: var(--text-dim); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); backdrop-filter: blur(6px); } .chip-icon svg { width: 12px; height: 12px; color: var(--brand-text); } .chip-strong { color: var(--text); font-weight: 600; } /* ========================================================= Header ========================================================= */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 90; transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease); border-bottom: 1px solid transparent; } .header.is-scrolled { background: rgba(var(--bg-rgb), 0.72); backdrop-filter: blur(14px); border-bottom-color: var(--line); } .header-inner { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: var(--header-h); display: flex; align-items: center; gap: 20px; } /* логотип: PNG белый на прозрачном фоне — в светлой теме инвертируем в тёмный, иначе он потеряется на белой шапке */ .brand img { height: 30px; width: auto; opacity: 0.95; transition: opacity 0.25s var(--ease), filter 0.3s var(--ease); } :root[data-theme="light"] .brand img { filter: invert(1); } .brand:hover img { opacity: 1; } /* навигация в тёмной таблетке (как в референсе) */ .nav-pill { display: flex; align-items: center; gap: 4px; margin: 0 auto; padding: 5px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); backdrop-filter: blur(10px); } .nav-link { padding: 8px 16px; font-size: 0.85rem; font-weight: 500; color: var(--text-dim); border-radius: var(--r-pill); transition: color 0.25s var(--ease), background 0.25s var(--ease); } .nav-link:hover { color: var(--brand-text); background: rgba(var(--brand-rgb),0.1); } .nav-link.is-active { color: var(--text); background: var(--bg-soft-2); box-shadow: inset 0 0 0 1px var(--line); } .header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* переключатель темы — виден на всех разрешениях, иконка кроссфейдится */ .theme-toggle { position: relative; display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; margin-left: auto; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text); cursor: pointer; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .theme-toggle:hover { border-color: var(--line-strong); background: var(--bg-soft-2); } .theme-toggle-icon { grid-area: 1 / 1; width: 19px; height: 19px; opacity: 0; transform: scale(0.5) rotate(-90deg); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } /* тёмная тема (по умолчанию) — солнце как приглашение включить светлую */ .theme-toggle-icon--sun { opacity: 1; transform: scale(1) rotate(0deg); } :root[data-theme="light"] .theme-toggle-icon--sun { opacity: 0; transform: scale(0.5) rotate(90deg); } :root[data-theme="light"] .theme-toggle-icon--moon { opacity: 1; transform: scale(1) rotate(0deg); } /* бургер */ .burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; margin-left: 10px; padding: 0 11px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; } .burger span { display: block; height: 1.5px; width: 100%; background: var(--text); border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.25s var(--ease); } .header.nav-open .burger span:first-child { transform: translateY(3.25px) rotate(45deg); } .header.nav-open .burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); } /* ========================================================= Hero ========================================================= */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 80px) 0 130px; overflow: hidden; isolation: isolate; } .hero-content { position: relative; z-index: 2; text-align: center; } .hero-title { max-width: 26ch; margin: 26px auto 32px; font-size: clamp(2rem, 4.7vw, 4.15rem); font-weight: 700; line-height: 1.1; color: rgba(var(--ink-rgb),0.7); text-wrap: balance; } .hero-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-bottom: 40px; } .hero-features li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500; color: var(--text-dim); } .hero-features svg { width: 14px; height: 14px; color: var(--text); opacity: 0.75; } .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; } /* нижняя строка героя */ .hero-foot { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .socials { display: flex; align-items: center; gap: 10px; } .socials-label { font-size: 0.75rem; color: var(--text-dimmer); margin-right: 2px; } .socials a { display: grid; place-items: center; width: 30px; height: 30px; color: var(--text-dim); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 50%; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .socials a:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-2px); } .socials svg { width: 14px; height: 14px; } .scroll-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-dimmer); transition: color 0.25s var(--ease); } .scroll-hint em { font-style: normal; color: var(--text-dim); } .scroll-hint:hover { color: var(--text); } .scroll-hint svg { width: 13px; height: 13px; animation: nudge 2.2s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(4px); opacity: 1; } } /* ========================================================= Фон героя: сетка + лучи + свечения + частицы ========================================================= */ .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* тонкая сетка, затухающая к краям */ .grid-lines { position: absolute; inset: -2px; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 128px 128px; -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 25%, transparent 78%); } /* бегущий по линии сетки луч */ .beam { position: absolute; background-repeat: no-repeat; } .beam--h { left: 0; right: 0; height: 1px; background-image: linear-gradient(90deg, transparent, rgba(var(--brand-rgb),.85), transparent); background-size: 32% 100%; filter: drop-shadow(0 0 6px rgba(var(--brand-rgb),0.65)); animation: beam-x 9s linear infinite; } .beam--h1 { top: 24%; animation-duration: 11s; } .beam--h2 { top: 76%; animation-duration: 14s; animation-delay: 3.5s; } .beam--v { top: 0; bottom: 0; left: 26%; width: 1px; background-image: linear-gradient(180deg, transparent, rgba(var(--brand-rgb),.7), transparent); background-size: 100% 30%; filter: drop-shadow(0 0 6px rgba(var(--brand-rgb),0.5)); animation: beam-y 13s linear infinite; animation-delay: 1.5s; } @keyframes beam-x { 0% { background-position: -35% 0; } 100% { background-position: 135% 0; } } @keyframes beam-y { 0% { background-position: 0 -35%; } 100% { background-position: 0 135%; } } /* мягкие радиальные свечения */ .blob { position: absolute; border-radius: 50%; filter: blur(70px); animation: drift 20s ease-in-out infinite; } .blob--1 { width: 620px; height: 620px; top: -18%; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(var(--brand-rgb),.20) 0%, rgba(var(--brand-rgb),.07) 45%, transparent 70%); } .blob--2 { width: 460px; height: 460px; bottom: -14%; left: 8%; background: radial-gradient(circle, rgba(var(--brand-rgb),.16) 0%, transparent 70%); animation-duration: 26s; animation-direction: reverse; } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(34px, -26px) scale(1.1); } } .blob--1 { animation-name: drift-center; } @keyframes drift-center { 0%, 100% { transform: translateX(-50%) translateY(0) scale(1); } 50% { transform: translateX(-50%) translateY(26px) scale(1.08); } } /* частицы (canvas) */ .particles { position: absolute; inset: 0; width: 100%; height: 100%; } /* всплывающие фрагменты кода на фоне */ .symbols { position: absolute; inset: 0; overflow: hidden; } /* все фрагменты стартуют из центра — из-за заголовка — и разлетаются наружу */ .symbol { position: absolute; left: 50%; top: 50%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--size, 1rem); font-weight: 500; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.3); /* у центра медленно, в середине пути быстрее, у края снова мягко тормозит */ animation: symbol-fly var(--dur, 14s) cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: var(--delay, 0s); will-change: transform, opacity; } @keyframes symbol-fly { 0% { opacity: 0; transform: translate(-50%, -50%) translate(var(--sx, 0), var(--sy, 0)) rotate(var(--rot, 0deg)) scale(0.3); } /* Длительность цикла фиксирована (14 / 15.5 / 17 с), поэтому проценты дают точное время: плавный выход ~1.2 с, яркая фаза ~1 с, уход ~1.4 с. */ 46% { opacity: 0; } 54% { opacity: var(--peak, 0.2); } 61% { opacity: var(--peak, 0.2); } 70% { opacity: 0; } 100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)) scale(1.75); } } /* неоновая пыльца: точки на круговых орбитах вокруг центра героя */ .pollen { position: absolute; inset: 0; overflow: hidden; } /* «рычаг» — вращается вокруг центра, точка сидит на его конце */ .pollen-arm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: orbit var(--dur, 30s) linear infinite; animation-delay: var(--delay, 0s); will-change: transform; } .pollen-arm--reverse { animation-direction: reverse; } @keyframes orbit { from { transform: rotate(var(--a, 0deg)); } to { transform: rotate(calc(var(--a, 0deg) + 360deg)); } } .pollen-dot { position: absolute; left: var(--r, 30vmin); top: 0; width: var(--size, 3px); height: var(--size, 3px); margin: calc(var(--size, 3px) / -2) 0 0 calc(var(--size, 3px) / -2); border-radius: 50%; background: var(--brand); box-shadow: 0 0 5px 1px rgba(var(--brand-rgb),0.95), 0 0 13px 3px rgba(var(--brand-rgb),0.45), 0 0 26px 7px rgba(var(--brand-rgb),0.18); animation: pollen-pulse var(--pulse, 4s) ease-in-out infinite alternate; animation-delay: var(--delay2, 0s); } @keyframes pollen-pulse { from { opacity: calc(var(--o, 0.5) * 0.3); transform: scale(0.75); } to { opacity: var(--o, 0.5); transform: scale(1.2); } } /* виньетка по краям */ .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 45%, transparent 40%, rgba(var(--bg-rgb),.75) 100%), linear-gradient(to bottom, transparent 70%, var(--bg) 100%); } /* свечение за курсором */ .cursor-glow { position: fixed; top: 0; left: 0; z-index: 1; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(var(--brand-rgb),.14) 0%, transparent 65%); transition: opacity 0.5s var(--ease); will-change: transform; } /* ========================================================= Бегущая строка технологий ========================================================= */ .ticker { position: relative; z-index: 2; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(var(--ink-rgb),0.015); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .ticker-track { display: flex; align-items: center; gap: 44px; width: max-content; animation: ticker 34s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker-item { display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 500; color: var(--text-dim); white-space: nowrap; } .ticker-item::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--text-dimmer); } /* ========================================================= Секции + угловые скобки ========================================================= */ .section { position: relative; padding: 120px 0; } /* якорь из меню не должен уезжать под фиксированную шапку */ section[id], main [id] { scroll-margin-top: calc(var(--header-h) + 20px); } .section-head { position: relative; max-width: 760px; margin: 0 auto; padding: 40px 20px; text-align: center; } .section-title { font-size: clamp(1.9rem, 4vw, 3.1rem); color: rgba(var(--ink-rgb),0.75); } .section-sub { margin-top: 16px; font-size: 0.95rem; color: var(--text-dim); } /* декоративные уголки рамки */ .corner { position: absolute; width: 16px; height: 16px; border: 1px solid var(--line-strong); } .corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; } .corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; } .corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; } .corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; } /* ========================================================= Услуги: бенто-сетка карточек ========================================================= */ .services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 56px; } .svc { position: relative; grid-column: span 2; display: flex; flex-direction: column; padding: 32px 28px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, rgba(var(--ink-rgb),0.035), rgba(var(--ink-rgb),0.008)); overflow: hidden; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); } .svc--wide { grid-column: span 3; } /* карточка во всю ширину: иконка с заголовком слева, содержимое справа */ .svc--full { grid-column: span 6; flex-direction: row; align-items: center; gap: 44px; } .svc-full-head { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; } .svc-full-head .svc-icon { margin-bottom: 0; } .svc-full-head .svc-title { margin-bottom: 0; white-space: nowrap; } .svc-full-body { display: flex; align-items: center; gap: 32px; flex: 1; } .svc-full-body .svc-text { flex: 1; max-width: 52ch; } .svc-full-body .svc-tags { margin-top: 0; padding-top: 0; justify-content: flex-end; flex: 0 1 auto; } .svc:hover { border-color: rgba(var(--ink-rgb),0.22); transform: translateY(-3px); } /* «прожектор» за курсором внутри карточки */ .svc::before { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient( 380px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--ink-rgb),0.09), transparent 62% ); transition: opacity 0.4s var(--ease); } .svc:hover::before { opacity: 1; } .svc > * { position: relative; z-index: 1; } .svc-index { position: absolute; top: 22px; right: 26px; z-index: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--text-dimmer); } .svc-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; color: var(--brand-text); background: rgba(var(--brand-rgb),0.09); border: 1px solid rgba(var(--brand-rgb),0.22); border-radius: 14px; transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease); } .svc:hover .svc-icon { background: rgba(var(--brand-rgb),0.16); border-color: rgba(var(--brand-rgb),0.5); box-shadow: 0 0 22px rgba(var(--brand-rgb),0.3); } .svc-icon svg { width: 23px; height: 23px; } .svc-title { font-size: 1.32rem; font-weight: 700; margin-bottom: 12px; } .svc-text { font-size: 0.9rem; line-height: 1.62; color: var(--text-dim); } .svc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 24px; } .svc-tags li { padding: 6px 13px; font-size: 0.75rem; font-weight: 500; color: var(--text-dim); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); } @media (max-width: 1000px) { /* горизонтальная карточка не помещается — складываем её в колонку */ .svc--full { flex-direction: column; align-items: stretch; gap: 0; } .svc-full-head { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 12px; } .svc-full-head .svc-icon { margin-bottom: 22px; } .svc-full-head .svc-title { white-space: normal; } .svc-full-body { flex-direction: column; align-items: stretch; gap: 0; } .svc-full-body .svc-tags { justify-content: flex-start; padding-top: 24px; } } @media (max-width: 900px) { .services { grid-template-columns: repeat(2, 1fr); } .svc, .svc--wide, .svc--full { grid-column: span 1; } } @media (max-width: 600px) { .services { grid-template-columns: 1fr; } .svc { padding: 26px 22px; } } /* ========================================================= Цены: переключатель направлений + сравнительная таблица ========================================================= */ .price-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 52px auto 40px; padding: 5px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); backdrop-filter: blur(10px); overflow-x: auto; scrollbar-width: none; } .price-tabs::-webkit-scrollbar { display: none; } .price-tab { padding: 10px 22px; font-family: inherit; font-size: 0.88rem; font-weight: 600; white-space: nowrap; color: var(--text-dim); background: none; border: 0; border-radius: var(--r-pill); cursor: pointer; transition: color 0.3s var(--ease), background 0.3s var(--ease); } .price-tab:hover { color: var(--text); } .price-tab.is-active { color: var(--bg); background: var(--ink); box-shadow: 0 0 20px rgba(var(--ink-rgb),0.18); } /* горизонтальная прокрутка на узких экранах */ .price-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, rgba(var(--ink-rgb),0.03), rgba(var(--ink-rgb),0.006)); } .price-table { display: grid; grid-template-columns: minmax(210px, 1.2fr) repeat(3, minmax(190px, 1fr)); min-width: 820px; } .pt-cell { padding: 15px 22px; font-size: 0.88rem; border-bottom: 1px solid var(--line); } /* последняя строка без разделителя */ .price-table > .pt-cell:nth-last-child(-n + 4) { border-bottom: 0; } /* колонка с названиями строк — липкая при горизонтальной прокрутке */ .pt-label { position: sticky; left: 0; z-index: 2; color: var(--text-dim); background: var(--bg); } .pt-value { text-align: center; color: rgba(var(--ink-rgb),0.78); border-left: 1px solid var(--line); } /* шапка с пакетами */ .pt-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; /* верхний отступ одинаковый у всех — место под бейдж зарезервировано, иначе выделенная колонка съезжает вниз относительно соседних */ padding: 42px 22px 26px; text-align: center; border-left: 1px solid var(--line); } .pt-corner { background: var(--bg); } .pt-note { font-size: 0.75rem; color: var(--text-dimmer); } .pt-name { font-size: 1.12rem; font-weight: 700; } .pt-price { margin: 6px 0 16px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; text-shadow: 0 0 22px rgba(var(--ink-rgb),0.22); } .pt-btn { width: 100%; max-width: 190px; } .pt-badge { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-text); background: rgba(var(--brand-rgb),0.12); border: 1px solid rgba(var(--brand-rgb),0.35); border-radius: var(--r-pill); white-space: nowrap; } /* выделенная колонка */ .pt-cell.is-featured { background: rgba(var(--brand-rgb),0.07); } .pt-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--brand); } .pt-yes svg { width: 15px; height: 15px; filter: drop-shadow(0 0 6px rgba(var(--brand-rgb),0.7)); } .pt-no { color: var(--text-dimmer); } .price-note { max-width: 62ch; margin: 26px auto 0; font-size: 0.82rem; line-height: 1.6; text-align: center; color: var(--text-dimmer); } /* ---- мобильный вид: сравнительная таблица нечитаема на узком экране — вместо неё свайпаемые карточки, по одной на пакет ---- */ .price-cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 4px 6px; margin: 0 -4px; } .price-cards::-webkit-scrollbar { display: none; } .price-card { position: relative; flex: 0 0 84%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; text-align: center; /* верхний отступ такой же, как у десктопной .pt-head — под бейдж «Популярный» нужно место, иначе он наезжает на текст ниже */ padding: 42px 22px 22px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(var(--ink-rgb),0.035), rgba(var(--ink-rgb),0.008)); } .price-card.is-featured { border-color: rgba(var(--brand-rgb),0.4); background: rgba(var(--brand-rgb),0.08); } .price-card .pt-btn { margin-top: 16px; } .price-card-rows { width: 100%; margin-top: 24px; text-align: left; } .price-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.86rem; } .price-card-row span { color: var(--text-dim); } @media (max-width: 720px) { .price-tabs { width: 100%; justify-content: flex-start; } .pt-cell { padding: 13px 16px; font-size: 0.84rem; } .pt-price { font-size: 1.3rem; } /* карточкам не нужна ширина стола под сравнительную таблицу */ .price-wrap { overflow-x: visible; border: 0; border-radius: 0; background: none; } .price-table.is-cards { display: block; min-width: 0; } } /* ========================================================= Процесс: сцена + табы этапов ========================================================= */ .stage { position: relative; margin-top: 56px; min-height: clamp(280px, 33vw, 430px); border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, rgba(var(--ink-rgb),0.035), rgba(var(--ink-rgb),0.008)); overflow: hidden; /* вертикальный скролл остаётся у браузера, горизонтальный жест — наш */ touch-action: pan-y; cursor: grab; } .stage:active { cursor: grabbing; } /* мягкое свечение внутри сцены */ .stage-glow { position: absolute; width: 60%; height: 150%; top: -25%; left: 8%; border-radius: 50%; filter: blur(70px); background: radial-gradient(circle, rgba(var(--ink-rgb),0.09) 0%, transparent 68%); animation: stage-drift 22s ease-in-out infinite alternate; pointer-events: none; } @keyframes stage-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(46%, 6%) scale(1.15); } } /* экраны кладём в одну ячейку грида — сцена сама тянется под самый высокий, без абсолютного позиционирования и подбора min-height */ .screens { display: grid; } /* показывается только активный. --dir задаёт сторону перехода: 1 — вперёд, -1 — назад. */ .screen { grid-area: 1 / 1; display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: 48px; margin: 0; padding: clamp(30px, 4vw, 56px); opacity: 0; transform: translateX(calc(var(--dir, 1) * 64px)) scale(0.975); transition: opacity 0.5s var(--ease), transform 0.55s var(--ease); pointer-events: none; will-change: transform, opacity; } .screen.is-active { opacity: 1; transform: translateX(0) scale(1); } /* уходящий экран смещается в противоположную сторону */ .screen.is-leaving { opacity: 0; transform: translateX(calc(var(--dir, 1) * -64px)) scale(0.975); } /* ---- текстовая часть баннера ---- */ .screen-text { position: relative; z-index: 1; } /* крупный призрачный номер этапа за текстом */ .screen-index { position: absolute; top: -0.42em; left: -0.06em; z-index: -1; font-size: clamp(7rem, 13vw, 11rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: rgba(var(--ink-rgb),0.045); pointer-events: none; user-select: none; } .screen-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-text); margin-bottom: 14px; } .screen-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; margin-bottom: 18px; text-shadow: 0 0 20px rgba(var(--ink-rgb),0.24), 0 0 60px rgba(var(--ink-rgb),0.1); } .screen-desc { max-width: 44ch; font-size: clamp(0.95rem, 1.15vw, 1.06rem); line-height: 1.65; color: rgba(var(--ink-rgb),0.62); } .screen-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .screen-points li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 0.8rem; font-weight: 500; color: var(--text-dim); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); } .screen-points li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 7px rgba(var(--ink-rgb),0.8); } /* ---- иллюстрация ---- */ .screen-visual { display: grid; place-items: center; opacity: 0.75; } /* ---- макеты внутри сцены ---- */ .mock { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; } .mock i, .mock span { display: block; } /* бриф — переписка */ .mock--chat .bubble { display: flex; flex-direction: column; gap: 7px; max-width: 72%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(var(--ink-rgb),0.03); } .mock--chat .bubble--out { align-self: flex-end; /* ширина нужна явно: flex-end снимает растягивание, и проценты у линий внутри иначе считаются от неопределённой ширины и схлопываются в ноль */ width: 58%; background: rgba(var(--ink-rgb),0.1); border-color: rgba(var(--ink-rgb),0.18); } .mock--chat .bubble i { height: 7px; width: var(--w, 60%); border-radius: 4px; background: rgba(var(--ink-rgb),0.22); } .mock--chat .bubble--out i { background: rgba(var(--ink-rgb),0.45); } /* дизайн — каркас страницы */ .mock--wire .wire-bar { height: 26px; border: 1px solid var(--line); border-radius: 8px; background: rgba(var(--ink-rgb),0.04); } .mock--wire .wire-hero { height: 104px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--ink-rgb),0.06); } .mock--wire .wire-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .mock--wire .wire-row i { height: 62px; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--ink-rgb),0.03); } /* разработка — строки кода */ .mock--code { gap: 10px; font-size: 0; } .mock--code .code-line { height: 8px; width: var(--w, 60%); border-radius: 4px; background: rgba(var(--ink-rgb),0.2); } .mock--code .code-line--in { margin-left: 26px; } .mock--code .code-line--in2 { margin-left: 52px; } /* запуск — окно с растущим графиком */ .mock--launch { gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(var(--ink-rgb),0.03); } .mock--launch .win-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .mock--launch .win-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--ink-rgb),0.22); } .mock--launch .chart { width: 100%; height: 132px; padding: 20px; color: var(--ink); filter: drop-shadow(0 0 10px rgba(var(--ink-rgb),0.45)); } /* ---- табы этапов ---- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 34px; touch-action: pan-y; } .step { position: relative; padding: 18px 0 0; text-align: left; font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* полоса прогресса над каждым этапом */ .step-bar { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); overflow: hidden; } .step-bar i { display: block; height: 100%; width: 0; background: var(--brand); box-shadow: 0 0 8px rgba(var(--brand-rgb),0.85); } .step.is-done .step-bar i { width: 100%; opacity: 0.3; } .step.is-active .step-bar i { animation: step-fill var(--step-dur, 6s) linear forwards; } @keyframes step-fill { from { width: 0; } to { width: 100%; } } .step-label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dimmer); transition: color 0.35s var(--ease); } .step:hover .step-label { color: var(--text-dim); } /* активный этап — подсвечен фирменным цветом, без скобок */ .step.is-active .step-label { color: var(--brand-text); } .step-title { display: block; margin-top: 8px; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-dimmer); transition: color 0.35s var(--ease); } .step:hover .step-title { color: var(--text-dim); } .step.is-active .step-title { color: var(--text); } @media (max-width: 900px) { /* иллюстрация уходит под текст и уменьшается */ .screen { grid-template-columns: 1fr; gap: 30px; } .screen-visual { order: 2; } .mock { width: min(360px, 100%); } .steps { grid-template-columns: repeat(2, 1fr); gap: 22px 20px; } } @media (max-width: 560px) { .stage { border-radius: 20px; } /* на узком экране баннер отдаём тексту целиком */ .screen-visual { display: none; } .screen-points { gap: 6px; } .steps { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; } .step-title { font-size: 0.9rem; } } @media (prefers-reduced-motion: reduce) { .stage-glow { animation: none; } .step.is-active .step-bar i { animation: none; width: 100%; } } /* ========================================================= Портфолио ========================================================= */ .cases { display: grid; grid-template-columns: repeat(2, 1fr); /* карточка с телефоном выше остальных — соседнюю не растягиваем */ align-items: start; gap: 22px; margin-top: 56px; } /* карточка — ссылка на живой проект */ .case { display: block; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, rgba(var(--ink-rgb),0.035), rgba(var(--ink-rgb),0.008)); transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .case:hover { border-color: rgba(var(--ink-rgb),0.24); transform: translateY(-4px); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5); } /* область скриншота */ .case-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(180deg, rgba(var(--ink-rgb),0.05), rgba(var(--ink-rgb),0.015)), repeating-linear-gradient(0deg, transparent 0 31px, rgba(var(--ink-rgb),0.045) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(var(--ink-rgb),0.045) 31px 32px); border-bottom: 1px solid var(--line); } /* сам скриншот кладём поверх заглушки: пока файла нет — слой прозрачный и видна заглушка, как только файл появится — он её перекрывает */ .case-shot::after { content: ''; position: absolute; inset: 0; z-index: 1; background-image: var(--img, none); background-size: cover; background-position: center top; transition: transform 0.6s var(--ease); } .case:hover .case-shot::after { transform: scale(1.045); } .case-stub { position: absolute; inset: 0; display: grid; place-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--text-dimmer); } .case-arrow { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; color: var(--bg); background: var(--ink); border-radius: 50%; opacity: 0; transform: translateY(-6px) scale(0.9); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .case:hover .case-arrow { opacity: 1; transform: translateY(0) scale(1); } .case-arrow svg { width: 16px; height: 16px; } /* ---- вариант «просто телефон»: без карточки-коробки вокруг ---- */ .case--phone { background: none; border: 0; border-radius: 0; overflow: visible; text-align: center; } .case--phone:hover { border-color: transparent; box-shadow: none; } .case-shot--phone { aspect-ratio: auto; display: grid; place-items: center; padding: 0; background: none; border: 0; overflow: visible; } /* корпус — готовый мокап 1024×1536 с прозрачным окном экрана */ .phone { position: relative; width: 100%; /* в самом PNG устройство занимает ~51% ширины холста (широкие прозрачные поля по бокам) — увеличиваем контейнер, чтобы сам телефон был ~300px */ max-width: 590px; aspect-ratio: 1024 / 1536; filter: drop-shadow(0 0 60px rgba(var(--ink-rgb),0.07)) drop-shadow(0 28px 55px rgba(0, 0, 0, 0.65)); transition: transform 0.6s var(--ease); } .case--phone:hover .phone { transform: translateY(-8px); } .phone-frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; } /* координаты окна замерены по прозрачной области мокапа: x 272..753, y 197..1310 при холсте 1024×1536. Скриншот подогнан ровно под это соотношение (1179×2725), поэтому background-size: 100% 100% ничего не растягивает и не режет. */ .phone-screen { position: absolute; z-index: 1; left: 26.5625%; top: 12.826%; width: 47.0703%; height: 72.526%; /* скругление угла в мокапе — около 12% ширины экрана */ border-radius: 22px; background-color: #FAF6F1; background-image: var(--img, none); background-size: 100% 100%; background-repeat: no-repeat; } /* подпись под телефоном — по центру, без внутренних отступов карточки */ .case--phone .case-body { padding: 26px 8px 0; } .case--phone .case-tech { justify-content: center; } .case-body { padding: 22px 24px 26px; } .case-tag { display: inline-block; margin-bottom: 14px; padding: 5px 12px; font-size: 0.72rem; font-weight: 500; color: var(--text-dim); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); } .case-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 9px; } .case-text { font-size: 0.87rem; line-height: 1.6; color: var(--text-dim); } .case-tech { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; } .case-tech li { position: relative; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; color: var(--text-dimmer); } .case-tech li + li::before { content: ''; position: absolute; left: -8px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: var(--text-dimmer); } .cases-cta { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 52px; text-align: center; } .cases-cta p { font-size: 0.92rem; color: var(--text-dim); } @media (max-width: 820px) { .cases { grid-template-columns: 1fr; } } /* ========================================================= Контакты ========================================================= */ /* без правой колонки форма на всю ширину контейнера выглядела растянутой — держим её компактной колонкой по центру */ .contact-panel { max-width: 760px; margin: 48px auto 0; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, rgba(var(--ink-rgb),0.035), rgba(var(--ink-rgb),0.008)); overflow: hidden; } .contact-form { padding: 34px 32px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-field { display: block; margin-bottom: 18px; } .form-field span { display: block; margin-bottom: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dimmer); } .form-field input, .form-field textarea { width: 100%; padding: 13px 16px; font-family: inherit; font-size: 0.92rem; color: var(--text); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; outline: none; resize: none; transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease); } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-dimmer); } .form-field input:focus, .form-field textarea:focus { border-color: var(--brand); background: var(--bg-soft-2); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.18); } /* honeypot: реально скрыт (не display:none — иначе некоторые боты его пропускают именно по этому признаку), но недоступен людям и скринридерам */ .form-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .form-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; font-size: 0.82rem; line-height: 1.5; color: var(--text-dim); cursor: pointer; } .form-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--brand); cursor: pointer; } .form-check a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; } .form-hint { margin: 4px 0 22px; font-size: 0.78rem; line-height: 1.55; color: var(--text-dimmer); transition: color 0.25s var(--ease); } /* без цветных акцентов — ошибку показываем весом и белым, а не цветом */ .form-hint.is-error { color: var(--text); font-weight: 600; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* прямые контакты — только логотипы, рядом с кнопкой отправки */ .contact-socials { display: flex; flex-wrap: wrap; gap: 10px; } .contact-socials a { display: grid; place-items: center; width: 52px; height: 52px; color: var(--brand-text); background: rgba(var(--brand-rgb),0.1); border: 1px solid rgba(var(--brand-rgb),0.24); border-radius: 14px; transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .contact-socials a:hover { color: var(--brand-contrast); background: var(--brand); border-color: var(--brand); transform: translateY(-2px); } .contact-socials svg { width: 21px; height: 21px; } @media (max-width: 860px) { .contact-form { padding: 32px 26px; } .form-row { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 480px) { .form-actions .btn { width: 100%; } /* логотипы уходят на свою строку и растягиваются на всю ширину */ .form-actions .contact-socials { width: 100%; } .form-actions .contact-socials a { flex: 1; } } /* ========================================================= Страница «Политика конфиденциальности» ========================================================= */ .legal { padding-top: calc(var(--header-h) + 64px); } .legal-container { max-width: 760px; } .legal-title { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; margin-bottom: 10px; } .legal-updated { font-size: 0.85rem; color: var(--text-dimmer); margin-bottom: 48px; } .legal-body h2 { margin-top: 44px; margin-bottom: 14px; font-size: 1.2rem; font-weight: 700; } .legal-body h2:first-child { margin-top: 0; } .legal-body p { margin-bottom: 14px; font-size: 0.95rem; line-height: 1.7; color: var(--text-dim); } .legal-body ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; } .legal-body li { margin-bottom: 8px; font-size: 0.95rem; line-height: 1.65; color: var(--text-dim); } .legal-body li::marker { color: var(--text-dimmer); } .legal-body a, .legal-body strong { color: var(--text); } .legal-body a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; } .legal-body em { color: var(--text-dimmer); } .legal-back { margin-top: 56px; } /* ========================================================= Футер ========================================================= */ .footer { position: relative; z-index: 2; border-top: 1px solid var(--line); } .footer-inner { display: flex; align-items: center; gap: 32px; padding: 44px 0 28px; } .footer-inner .brand img { height: 26px; } .footer-nav { display: flex; flex-wrap: wrap; gap: 28px; margin: 0 auto; } .footer-nav a { font-size: 0.86rem; color: var(--text-dim); transition: color 0.25s var(--ease); } .footer-nav a:hover { color: var(--brand-text); } .footer-socials { flex: 0 0 auto; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 32px; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--text-dimmer); } @media (max-width: 720px) { .footer-inner { flex-direction: column; text-align: center; padding: 40px 0 24px; } .footer-nav { order: 3; justify-content: center; } .footer-bottom { flex-direction: column; text-align: center; } } /* ========================================================= Плашка cookie ========================================================= */ .cookie { position: fixed; left: 50%; bottom: 22px; z-index: 120; display: flex; align-items: center; gap: 18px; width: min(780px, calc(100vw - 32px)); padding: 13px 14px 13px 20px; background: rgba(var(--bg-rgb), 0.88); border: 1px solid var(--line); border-radius: var(--r-pill); backdrop-filter: blur(16px); box-shadow: 0 22px 54px rgba(0, 0, 0, 0.6); /* закрытое состояние */ visibility: hidden; opacity: 0; transform: translateX(-50%) translateY(150%); transition: transform 0.7s var(--ease), opacity 0.45s var(--ease), visibility 0s linear 0.7s; } .cookie.is-open { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); transition: transform 0.7s var(--ease), opacity 0.45s var(--ease), visibility 0s; } .cookie-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 50%; } .cookie-icon svg { width: 19px; height: 19px; } .cookie-text { flex: 1; font-size: 0.82rem; line-height: 1.5; color: var(--text-dim); } .cookie-text a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--brand-rgb),0.45); transition: text-decoration-color 0.25s var(--ease); } .cookie-text a:hover { text-decoration-color: var(--brand); } .cookie-actions { display: flex; gap: 8px; flex-shrink: 0; } /* обе кнопки без бейджа — даём тексту запас по бокам */ .cookie-actions .btn { --btn-px: 28px; } @media (max-width: 720px) { .cookie { flex-wrap: wrap; gap: 12px; padding: 18px; border-radius: var(--r-lg); } .cookie-text { flex: 1 1 100%; order: 2; } .cookie-actions { flex: 1 1 100%; order: 3; } .cookie-actions .btn { flex: 1; } } /* ========================================================= Появление при скролле / загрузке ========================================================= */ /* первый экран — чистый CSS, без зависимости от JS */ .reveal-load { opacity: 0; animation: reveal-up 0.9s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 120ms); } @keyframes reveal-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } /* остальные секции — по мере скролла */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ========================================================= Адаптив ========================================================= */ @media (max-width: 1080px) { .nav-pill { display: none; } .header-actions { margin-left: auto; } } @media (max-width: 860px) { :root { --header-h: 66px; } .header-actions { display: none; } .burger { display: flex; } /* выпадающее мобильное меню */ .nav-pill { position: absolute; top: calc(var(--header-h) + 8px); left: var(--gutter); right: var(--gutter); margin: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; /* почти непрозрачно: сквозь 4% уже читался заголовок героя под меню */ background: rgba(var(--bg-rgb), 0.985); border-radius: var(--r-lg); backdrop-filter: blur(16px); } .header.nav-open .nav-pill { display: flex; animation: menu-in 0.35s var(--ease); } @keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .nav-link { padding: 12px 16px; font-size: 0.95rem; text-align: center; } .hero { padding: calc(var(--header-h) + 70px) 0 140px; } .hero-features { gap: 8px 18px; } .hero-actions .btn { flex: 1 1 auto; } .hero-foot { bottom: 26px; flex-direction: column-reverse; align-items: center; gap: 14px; } .grid-lines { background-size: 84px 84px; } .section { padding: 80px 0; } } @media (max-width: 520px) { .brand img { height: 26px; } .hero-title { max-width: 100%; } /* ровная сетка 2×2 вместо рваной строки */ .hero-features { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 12px 20px; } .hero-features li { font-size: 0.78rem; } .socials-label { display: none; } } /* ========================================================= Мобильная доводка: размеры нажатия, читаемость, iOS-особенности ========================================================= */ @media (max-width: 860px) { /* iOS Safari принудительно зумит страницу при фокусе на поле, если размер шрифта меньше 16px. Единственное лекарство — 16px. */ .form-field input, .form-field textarea { font-size: 16px; } /* чекбокс согласия — крупнее под палец */ .form-check input { width: 22px; height: 22px; } .form-check { font-size: 0.86rem; gap: 12px; } /* круглые иконки соцсетей в герое и футере: 30px мало для пальца */ .socials a { width: 44px; height: 44px; } .socials a svg { width: 17px; height: 17px; } /* вкладки прайса добираем до комфортной высоты нажатия */ .price-tab { min-height: 44px; } /* ссылки футера стояли впритык — разводим по вертикали */ .footer-nav { gap: 4px 18px; } .footer-nav a { display: inline-block; padding: 11px 4px; } .brand { display: inline-flex; align-items: center; padding: 9px 0; } .scroll-hint { padding: 12px 6px; } /* мелкие подписи: ниже 12px на телефоне читать тяжело */ .pt-badge { font-size: 0.75rem; } .screen-label, .step-label, .case-tag, .svc-tags li, .case-tech li { font-size: 0.76rem; } } /* учитываем «чёлку» и домашнюю полоску на iPhone */ @supports (padding: env(safe-area-inset-left)) { @media (max-width: 860px) { .header-inner, .container { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } .cookie { margin-bottom: env(safe-area-inset-bottom); } } } /* ---------- Уважение к настройкам движения ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .beam, .blob, .ticker-track, .scroll-hint svg, .glow-text { animation: none !important; } /* разлетающиеся фрагменты и пыльцу полностью убираем */ .symbols, .pollen { display: none; } .reveal-load { opacity: 1; animation: none; } .reveal { opacity: 1; transform: none; transition: none; } .cursor-glow { display: none; } }