/* ============================================================ AI Platforms — современная визуальная система Гигантская серифная типографика, bento, mesh-blob, dark/cream contrast. ============================================================ */ /* ---------- Токены ---------- */ :root { --bg: #F4EFE5; --bg-warm: #EFE6D3; --bg-soft: #EBE0CB; --bg-card: #FFFCF6; --bg-elevate: #FBF6EC; --bg-dark: #181715; --bg-darker: #0E0D0B; --line: #E0D5BD; --line-strong: #C7B89B; --text: #1A1815; --text-soft: #4A463F; --text-muted: #8A8275; --text-on-dark: #F4EFE5; --muted-on-dark: #B5AC9A; --accent: #D2552A; --accent-2: #B14224; --accent-soft: #F4D9C5; --accent-deep: #6E2916; --plum: #5B3A4C; /* доп. оттенок для разнообразия секций */ --moss: #45563D; --indigo: #2E3A56; --radius-sm: 10px; --radius: 16px; --radius-lg: 26px; --radius-xl: 36px; --shadow-sm: 0 2px 6px rgba(20,16,10,.04); --shadow: 0 12px 30px -12px rgba(20,16,10,.18); --shadow-lg: 0 30px 80px -20px rgba(20,16,10,.28); --container: 1240px; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Fraunces", "Georgia", "Times New Roman", serif; --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* clip отсекает горизонтальное переполнение, но не превращает в скролл-контейнер */ overflow-x: clip; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; min-width: 320px; } /* Кастомный скроллбар для Chromium/WebKit — всегда виден, в фирменной палитре */ html::-webkit-scrollbar { width: 12px; height: 12px; } html::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid var(--bg); } html::-webkit-scrollbar-thumb:hover { background: var(--accent); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } ul { list-style: none; padding: 0; margin: 0; } h1, h2, h3, h4, h5 { font-family: var(--font-serif); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 50; letter-spacing: -.025em; line-height: 1.02; margin: 0 0 .5em; color: var(--text); overflow-wrap: break-word; word-break: normal; hyphens: auto; } h1 { font-size: clamp(2.6rem, 7vw, 5.8rem); line-height: .98; letter-spacing: -.035em; } h2 { font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.02; letter-spacing: -.03em; } h3 { font-size: 1.45rem; font-weight: 500; letter-spacing: -.018em; line-height: 1.15; } h4 { font-size: 1rem; font-weight: 600; font-family: var(--font-sans); letter-spacing: 0; } p { margin: 0 0 1em; color: var(--text-soft); } i.italic, em.italic, .italic { font-style: italic; font-family: var(--font-serif); font-weight: 300; color: var(--accent); } .muted { color: var(--text-muted); } .dim { color: var(--text-soft); } ::selection { background: var(--accent); color: #fff; } .skip-link { position: absolute; left: -9999px; background: #000; color: #fff; padding: 8px 14px; border-radius: 6px; } .skip-link:focus { left: 12px; top: 12px; z-index: 1000; } .container { width: 100%; max-width: var(--container); padding: 0 28px; margin: 0 auto; position: relative; } /* ---------- Кнопки ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 500; font-size: 15px; line-height: 1; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); border: 1px solid transparent; white-space: nowrap; cursor: pointer; user-select: none; position: relative; overflow: hidden; } .btn:active { transform: translateY(1px); } .btn--sm { padding: 10px 18px; font-size: 14px; } .btn--lg { padding: 18px 32px; font-size: 16px; } .btn--primary { background: var(--text); color: var(--bg); box-shadow: 0 6px 20px -8px rgba(20,16,10,.4); } .btn--primary::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--accent), transparent 60%); opacity: 0; transition: opacity .25s var(--ease); } .btn--primary:hover { box-shadow: 0 16px 40px -10px rgba(210,85,42,.5); } .btn--primary:hover::before { opacity: 1; } .btn--primary > * { position: relative; z-index: 1; } .btn--accent { background: var(--accent); color: #fff; box-shadow: 0 10px 30px -10px rgba(210,85,42,.6); } .btn--accent:hover { background: var(--accent-2); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--text); background: var(--bg-card); } .btn--ghost-dark { background: transparent; color: var(--text-on-dark); border-color: rgba(244,239,229,.3); } .btn--ghost-dark:hover { border-color: var(--text-on-dark); background: rgba(244,239,229,.08); } .link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 500; transition: gap .25s var(--ease); } .link-arrow:hover { gap: 14px; color: var(--accent-2); } .back-link { display: inline-block; margin-bottom: 28px; color: var(--text-muted); font-size: 14px; transition: color .2s var(--ease); } .back-link:hover { color: var(--text); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .15em; color: var(--accent); margin-bottom: 22px; font-family: var(--font-sans); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; } .eyebrow a { color: inherit; border-bottom: 1px solid currentColor; } .eyebrow--center { justify-content: center; } .eyebrow--center::before { display: none; } /* ---------- Скрол-ревил ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; } .reveal[data-d="3"] { transition-delay: .24s; } .reveal[data-d="4"] { transition-delay: .32s; } .reveal[data-d="5"] { transition-delay: .40s; } .reveal[data-d="6"] { transition-delay: .48s; } /* ============================================================ ШАПКА ============================================================ */ /* Без backdrop-filter: иначе position:fixed у выпадающего меню становится привязан к шапке и блок с top:64px получает высоту 0 px — меню как будто «не открывается». */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(244,239,229,.94); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), background .25s var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(244,239,229,.985); } .site-header__inner { display: flex; align-items: center; gap: 16px; height: 70px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); flex-shrink: 0; text-decoration: none; } .brand__mark { display: inline-flex; flex-shrink: 0; } .brand__name { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; color: var(--text); letter-spacing: -.015em; white-space: nowrap; } .site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .site-nav a { padding: 8px 14px; border-radius: 999px; font-size: 14.5px; color: var(--text-soft); font-weight: 500; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); white-space: nowrap; } .site-nav a:hover, .site-nav a.is-active { color: var(--text); background: rgba(20,16,10,.06); } .site-header__cta { display: inline-flex; flex-shrink: 0; } .nav-toggle { display: none; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-card); cursor: pointer; margin-left: auto; } .nav-toggle__bar { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding: clamp(60px, 10vw, 130px) 0 clamp(60px, 8vw, 110px); overflow: hidden; } .hero__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(20,16,10,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(20,16,10,.045) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%); pointer-events: none; } .blob { position: absolute; width: 720px; height: 720px; border-radius: 50%; filter: blur(110px); opacity: .55; pointer-events: none; z-index: 0; } .blob--1 { background: radial-gradient(circle, #F0A87A, transparent 70%); top: -180px; left: -160px; } .blob--2 { background: radial-gradient(circle, #E1C9F0, transparent 70%); top: 30%; right: -240px; } .blob--3 { background: radial-gradient(circle, #F8DDA8, transparent 70%); bottom: -200px; left: 30%; width: 560px; height: 560px; opacity: .45; } .hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; } .hero__inner > * { min-width: 0; } .hero__copy { max-width: 640px; min-width: 0; } .hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 10px; line-height: 1.45; background: rgba(255,252,246,.7); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--text-soft); backdrop-filter: blur(6px); margin-bottom: 28px; } .hero__badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; box-shadow: 0 0 0 0 rgba(76,175,80,.5); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(76,175,80,.5); } 70% { box-shadow: 0 0 0 12px rgba(76,175,80,0); } 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); } } .hero__title { margin-bottom: 28px; font-weight: 400; max-width: 100%; } .hero__title .stroke { display: block; } .hero__title .accent { font-style: italic; font-weight: 300; color: var(--accent); background: linear-gradient(120deg, var(--accent) 0%, #E48155 50%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-right: 4px; } .hero__lead { font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--text-soft); max-width: 560px; margin-bottom: 36px; } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; } .hero__bullets { display: flex; flex-wrap: wrap; gap: 22px; color: var(--text-soft); font-size: 14px; } .hero__bullets li { display: inline-flex; align-items: center; gap: 8px; } .hero__bullets svg { color: var(--accent); flex: 0 0 16px; } /* ---- Stylized chat ---- */ .hero__demo { position: relative; } .demo-chat { position: relative; direction: ltr; unicode-bidi: isolate; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); /* десктоп: на ~5% ниже по высоте */ padding: 21px 21px 17px; display: flex; flex-direction: column; min-height: 570px; } .demo-chat::before { content: ""; position: absolute; inset: -12px; background: linear-gradient(135deg, rgba(210,85,42,.18), rgba(120,40,180,.12)); border-radius: calc(var(--radius-lg) + 12px); z-index: -1; filter: blur(20px); pointer-events: none; } .demo-chat__head { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-soft); } .demo-chat__head strong { font-family: var(--font-serif); font-weight: 500; color: var(--text); font-size: 1.05rem; } .demo-chat__head .dots { display: inline-flex; gap: 5px; margin-left: auto; } .demo-chat__head .dots i { width: 10px; height: 10px; border-radius: 50%; background: #E0D5BD; } .demo-chat__head .dots i:nth-child(1) { background: #FF8576; } .demo-chat__head .dots i:nth-child(2) { background: #F4C264; } .demo-chat__head .dots i:nth-child(3) { background: #6FCC7A; } .chat-status { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; box-shadow: 0 0 0 4px rgba(76,175,80,.16); flex: 0 0 8px; } .demo-chat__log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; align-items: stretch; padding: 4px 4px; min-height: 342px; max-height: 456px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .msg { display: flex; width: 100%; min-width: 0; } .msg--bot { justify-content: flex-start; } .msg--user { justify-content: flex-end; } .msg__bubble { max-width: min(560px, 92%); padding: 12px 16px; border-radius: 18px; font-size: 14.5px; line-height: 1.55; background: var(--bg-soft); color: var(--text); white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; text-align: start; } .msg--user .msg__bubble { background: linear-gradient(135deg, var(--text), #2E2A24); color: var(--bg); border-bottom-right-radius: 6px; text-align: start; } .msg--bot .msg__bubble { border-bottom-left-radius: 6px; text-align: start; } .msg--err .msg__bubble { background: #FFEAE2; color: #8A2A0E; text-align: start; } .typing { display: inline-flex; gap: 4px; } .typing span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; animation: tpulse 1.2s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .30s; } @keyframes tpulse { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } .demo-chat__form { display: flex; gap: 8px; position: relative; z-index: 3; margin-top: 13px; padding: 6px 6px 6px 18px; background: var(--bg-soft); border-radius: 999px; border: 1px solid var(--line); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .demo-chat__form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(210,85,42,.12); } .demo-chat__form input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; font: inherit; font-size: 14.5px; outline: none; color: var(--text); text-align: start; } .demo-chat__form .btn { padding: 10px 14px; } .demo-chat__form button { flex-shrink: 0; pointer-events: auto; } .demo-chat__hints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; } .chip { border: 1px solid var(--line); background: var(--bg-card); padding: 7px 13px; border-radius: 999px; font-size: 12.5px; color: var(--text-soft); transition: all .2s var(--ease); } .chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); } /* Сетка чипов (used on /about for industries / clients) */ .chip-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; } .chip--static { cursor: default; background: var(--bg); border-color: var(--line-strong); color: var(--text); font-weight: 500; padding: 9px 16px; font-size: 13.5px; } .chip--static:hover { border-color: var(--accent); color: var(--accent); transform: none; } .chip--brand { cursor: default; background: var(--bg-card); border-color: var(--line); color: var(--text); font-family: var(--font-serif); font-weight: 500; font-size: 14.5px; padding: 10px 18px; letter-spacing: -.01em; } .chip--brand:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(110, 41, 22, .08); } .chip--more { background: transparent; border-style: dashed; color: var(--text-muted); font-style: italic; } /* Парент-блок: отступы и заголовки */ .parent-block h3 { font-size: 1.25rem; font-family: var(--font-serif); font-weight: 500; margin: 0; } /* ============================================================ MARQUEE ============================================================ */ .marquee { position: relative; padding: 28px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-warm); } .marquee__track { display: inline-flex; gap: 48px; align-items: center; animation: scroll 40s linear infinite; white-space: nowrap; padding-right: 48px; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { font-family: var(--font-serif); font-size: 1.6rem; color: var(--text); letter-spacing: -.015em; font-weight: 400; display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; } .marquee__item span.dim { font-style: italic; color: var(--text-muted); font-size: .9em; } .marquee__item::after { content: "✦"; color: var(--accent); margin-left: 32px; font-size: 1rem; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .marquee::before { left: 0; background: linear-gradient(to right, var(--bg-warm), transparent); } .marquee::after { right: 0; background: linear-gradient(to left, var(--bg-warm), transparent); } /* ============================================================ СЕКЦИИ ============================================================ */ .section { position: relative; padding: clamp(72px, 10vw, 140px) 0; } .section--alt { background: var(--bg-warm); } .section--soft { background: var(--bg-soft); } .section--dark { background: var(--bg-darker); color: var(--text-on-dark); } .section--dark h2, .section--dark h3 { color: #FFF8EB; } .section--cta { padding-top: clamp(72px, 10vw, 130px); padding-bottom: clamp(72px, 10vw, 140px); } .section__head { max-width: 880px; margin: 0 0 clamp(40px, 5vw, 72px); } .section__head--center { max-width: 880px; margin-left: auto; margin-right: auto; text-align: center; } .section__head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); } .section__head--split > div { max-width: 720px; } .section__head--split > p { margin: 0; padding-bottom: 8px; line-height: 1.55; } /* ============================================================ BENTO grid услуг ============================================================ */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(260px, auto); gap: 18px; } .bento__cell { position: relative; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .bento__cell--split > * { min-width: 0; } .bento__cell:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--shadow); } .bento__cell--wide { grid-column: span 4; } .bento__cell--mid { grid-column: span 3; } .bento__cell--small { grid-column: span 2; } .bento__cell--full { grid-column: span 6; } /* Двух-колоночная карточка (текст + иллюстрация) — для full-width */ .bento__cell--split { display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center; } .bento__cell--split-art { position: relative; width: 100%; height: 240px; } .avatar-art { display: block; width: 100%; height: 100%; animation: avatarFloat 7s ease-in-out infinite; filter: drop-shadow(0 8px 24px rgba(210, 85, 42, 0.18)); } @keyframes avatarFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .avatar-art { animation: none; } } /* Двух-колоночные буллеты внутри карточки */ .bento__bullets--two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; max-width: 560px; } .bento__cell--dark { background: var(--bg-dark); color: var(--text-on-dark); border-color: #2A2722; } .bento__cell--dark h3, .bento__cell--dark .bento__title { color: #FFF8EB; } .bento__cell--dark p, .bento__cell--dark .bento__lead { color: var(--muted-on-dark); } .bento__cell--accent { background: linear-gradient(135deg, var(--accent), #E07142 70%, var(--accent-2)); color: #fff; border-color: transparent; } .bento__cell--accent h3, .bento__cell--accent .bento__title { color: #fff; } .bento__cell--accent p, .bento__cell--accent .bento__lead { color: rgba(255,255,255,.85); } .bento__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .bento__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-2); flex-shrink: 0; } .bento__cell--dark .bento__icon { background: rgba(244,239,229,.1); color: var(--accent); } .bento__cell--accent .bento__icon { background: rgba(255,255,255,.18); color: #fff; } .bento__tag { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-muted); font-weight: 500; } .bento__cell--accent .bento__tag { color: rgba(255,255,255,.8); } .bento__title { font-family: var(--font-serif); font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 12px; color: var(--text); } .bento__lead { color: var(--text-soft); font-size: 15px; margin: 0 0 18px; max-width: 56ch; } .bento__bullets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .bento__bullets li { position: relative; padding-left: 22px; font-size: 14px; color: var(--text-soft); } .bento__bullets li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--accent); } .bento__cell--accent .bento__bullets li { color: rgba(255,255,255,.92); } .bento__cell--accent .bento__bullets li::before { color: rgba(255,255,255,.7); } .bento__cell--dark .bento__bullets li { color: var(--muted-on-dark); } .bento__cell--dark .bento__bullets li::before { color: var(--accent); } .bento__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 500; font-size: 14.5px; transition: gap .2s var(--ease); } .bento__cell--dark .bento__link { color: var(--accent); } .bento__cell--accent .bento__link { color: #fff; } .bento__link:hover { gap: 12px; } /* Декоративный SVG-art в правом нижнем углу */ .bento__art { position: absolute; right: -20px; bottom: -20px; width: 220px; height: 220px; color: var(--accent); opacity: .12; pointer-events: none; transition: transform .6s var(--ease), opacity .35s var(--ease); } .bento__cell:hover .bento__art { transform: scale(1.08) rotate(4deg); opacity: .18; } .bento__cell--dark .bento__art { color: var(--accent); opacity: .22; } .bento__cell--accent .bento__art { color: #fff; opacity: .25; } /* Граф знаний (LLM/RAG): убираем поворот при ховере, чтобы не "ехало" */ .bento__art--graph { transition: transform .6s var(--ease), opacity .35s var(--ease); } .bento__cell:hover .bento__art--graph { transform: scale(1.05); opacity: .3; } .bento__cell--dark .bento__art--graph { opacity: .32; } /* ============================================================ TIMELINE процесса ============================================================ */ .timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: clamp(24px, 3vw, 44px); row-gap: 0; align-items: start; list-style: none; margin: 0; padding: 56px 0 0; } .timeline--three { grid-template-columns: repeat(3, 1fr); } /* Если ставим два timeline-блока подряд (продолжение истории) */ .timeline--continued { margin-top: clamp(56px, 6vw, 88px); } /* Тонкая линия процесса по верху */ .timeline::before { content: ""; position: absolute; top: 22px; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0, var(--line-strong) 32px, var(--line-strong) calc(100% - 32px), transparent 100% ); opacity: .9; } .timeline__step { position: relative; display: flex; flex-direction: column; } /* Внешнее кольцо «станции» — слева у каждого шага */ .timeline__step::before { content: ""; position: absolute; top: -42px; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--accent); box-shadow: 0 0 0 6px var(--bg); z-index: 2; transition: transform .35s var(--ease); } /* Внутренняя точка */ .timeline__step::after { content: ""; position: absolute; top: -36px; left: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(210, 85, 42, .35); z-index: 3; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .timeline__step:hover::before { transform: scale(1.06); } .timeline__step:hover::after { transform: scale(1.35); box-shadow: 0 0 0 8px rgba(210, 85, 42, .12); } /* Большой курсивный номер с короткой акцентной чертой */ .timeline__num { display: inline-flex; align-items: baseline; gap: 12px; font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); font-size: clamp(2.2rem, 2.6vw, 2.8rem); line-height: 1; margin: 0 0 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .timeline__num::after { content: ""; width: 28px; height: 1.5px; background: currentColor; align-self: center; margin-bottom: 2px; opacity: .55; border-radius: 2px; } .timeline__step h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 500; color: var(--text); margin: 0 0 12px; letter-spacing: -.012em; max-width: 16ch; } .timeline__step p { font-size: 14.5px; line-height: 1.6; color: var(--text-soft); margin: 0; max-width: 32ch; } /* ============================================================ Манифест-цитата ============================================================ */ .manifesto { text-align: center; max-width: 1000px; margin: 0 auto; padding: 0 8px; } .manifesto__quote { font-family: var(--font-serif); font-size: clamp(1.8rem, 4.4vw, 3.4rem); font-weight: 300; line-height: 1.18; letter-spacing: -.02em; color: #FFF8EB; margin: 0 0 36px; } .manifesto__quote em { font-style: italic; color: var(--accent); font-weight: 300; background: linear-gradient(120deg, #E07142, var(--accent), #F0A87A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .manifesto__sign { color: var(--muted-on-dark); font-size: 13px; text-transform: uppercase; letter-spacing: .15em; } .manifesto__sign strong { color: #FFF8EB; font-weight: 500; } /* ============================================================ BIG metrics ============================================================ */ .big-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); overflow: hidden; } .big-metric { background: var(--bg-darker); padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; } .big-metric strong { font-family: var(--font-serif); font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .95; color: #FFF8EB; font-weight: 400; letter-spacing: -.03em; font-feature-settings: "tnum" 1, "lnum" 1; } .big-metric span { color: var(--muted-on-dark); font-size: 14.5px; max-width: 28ch; } .big-metric small { font-size: 11px; text-transform: uppercase; color: var(--accent); letter-spacing: .14em; font-weight: 500; } /* ============================================================ CASE STUDY (кейс c метриками) ============================================================ */ .case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 32px 56px; align-items: start; } .case__head { display: flex; flex-direction: column; gap: 14px; } .case__head h2 { margin: 0; } .case__req { color: var(--text-soft); font-size: 1.05rem; max-width: 48ch; margin: 0; } .case__metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(36, 28, 23, 0.08); border: 1px solid rgba(36, 28, 23, 0.08); border-radius: var(--radius-lg); overflow: hidden; align-self: start; } .case__metric { background: var(--bg-card); padding: 28px 26px; display: flex; flex-direction: column; gap: 8px; transition: background .25s ease; } .case__metric:hover { background: #FFFCF6; } .case__metric strong { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.2rem); line-height: .95; color: var(--accent); font-weight: 400; letter-spacing: -.02em; font-feature-settings: "tnum" 1, "lnum" 1; } .case__metric span { color: var(--text-soft); font-size: 13.5px; line-height: 1.4; } .case__body { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 56px; padding-top: clamp(8px, 1.5vw, 16px); border-top: 1px solid var(--line); margin-top: clamp(8px, 1.5vw, 16px); } .case__col h3 { font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); font-weight: 600; margin: 0 0 10px; } .case__col p { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.65; } /* ============================================================ СТЕК ТЕХНОЛОГИЙ (8 категорий) ============================================================ */ .tech-stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .tech-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .tech-card:hover { transform: translateY(-3px); border-color: rgba(210, 85, 42, 0.3); box-shadow: 0 12px 28px -16px rgba(36, 28, 23, 0.18); } .tech-card__icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(210, 85, 42, 0.08); color: var(--accent); margin-bottom: 4px; } .tech-card h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--text); } .tech-card p { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.5; } /* ============================================================ ГОТОВЫЕ КОНФИГУРАЦИИ (Appliance) ============================================================ */ .appliance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .appliance-card { position: relative; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 30px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; overflow: hidden; } .appliance-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .85; } .appliance-card:hover { transform: translateY(-4px); border-color: rgba(210, 85, 42, 0.35); box-shadow: 0 18px 36px -20px rgba(36, 28, 23, 0.22); } .appliance-card__tag { display: inline-block; align-self: flex-start; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-weight: 600; } .appliance-card h3 { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.2vw, 1.85rem); font-weight: 500; margin: 0; color: var(--text); letter-spacing: -.01em; } .appliance-card > p { margin: 0; color: var(--text-soft); font-size: 14.5px; line-height: 1.55; flex: 1 0 auto; } .appliance-card__specs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; } .appliance-card__specs li { display: flex; flex-direction: column; gap: 2px; } .appliance-card__specs strong { font-size: 14px; font-weight: 600; color: var(--text); font-feature-settings: "tnum" 1, "lnum" 1; } .appliance-card__specs span { font-size: 12.5px; color: var(--muted); line-height: 1.4; } /* ============================================================ Magazine-блок статей ============================================================ */ .magazine { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; } .magazine__main { grid-row: span 3; } .art-card { position: relative; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .art-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); } .art-card__meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px; } .art-card h3 { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.18; font-weight: 500; margin: 0; letter-spacing: -.02em; } .art-card h3 a { background-image: linear-gradient(currentColor,currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease); } .art-card h3 a:hover { background-size: 100% 1px; } .art-card p { color: var(--text-soft); font-size: 15px; margin: 0; } .art-card--feature { padding: 44px; grid-column: span 1; background: var(--bg-elevate); } .art-card--feature h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.05; } .art-card--feature p { font-size: 1.05rem; } .art-card--feature .art-card__cover { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #F0A87A, var(--accent), #E1C9F0); border-radius: var(--radius); margin-bottom: 8px; position: relative; overflow: hidden; } .art-card--feature .art-card__cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.4), transparent 50%); } .art-card--feature .art-card__cover svg { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; opacity: .55; } .tags { display: flex; flex-wrap: wrap; gap: 6px; } .tags li { background: var(--bg-warm); border: 1px solid var(--line); color: var(--text-soft); font-size: 12px; padding: 4px 10px; border-radius: 999px; } .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .article-grid--full { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } .art-card--lg h3 { font-size: 1.55rem; } .art-card--lg { padding: 36px; } /* ============================================================ Услуга — деталь ============================================================ */ .service-detail { display: grid; grid-template-columns: 1.6fr .9fr; gap: 56px; align-items: start; } .service-detail__main h2 { margin-top: 36px; } .service-detail__main h2:first-child { margin-top: 0; } .checklist { display: flex; flex-direction: column; gap: 10px; } .checklist li { position: relative; padding-left: 32px; color: var(--text-soft); font-size: 1.02rem; } .checklist li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; background: var(--accent-soft); color: var(--accent-2); border-radius: 50%; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 12px; } .service-detail__side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 16px; } .link-list { display: flex; flex-direction: column; gap: 8px; } .link-list a { color: var(--text-soft); padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; transition: color .2s var(--ease), padding .2s var(--ease); } .link-list a:hover { color: var(--accent); padding-left: 6px; } /* ============================================================ Two-col / About ============================================================ */ .two-col { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; } .brands-grid { display: grid; gap: 14px; } .brand-card { display: block; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); position: relative; overflow: hidden; } .brand-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); } .brand-card h3 { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; } .brand-card p { color: var(--text-soft); margin: 0 0 12px; font-size: 14.5px; } .brand-card--accent { background: var(--bg-dark); color: var(--bg); border-color: var(--bg-dark); } .brand-card--accent h3 { color: var(--bg); } .brand-card--accent p { color: rgba(244,239,229,.78); } .brand-card--accent::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 70%); opacity: .35; } .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 18px; } .value { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: transform .25s var(--ease), border-color .25s var(--ease); } .value:hover { transform: translateY(-3px); border-color: var(--line-strong); } .value__num { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; color: var(--accent); margin-bottom: 8px; } .value h3 { font-size: 1.2rem; margin-bottom: 10px; } .value p { font-size: 14.5px; color: var(--text-soft); margin: 0; } .bullets-large { display: grid; gap: 10px; } .bullets-large li { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; transition: border-color .2s var(--ease); } .bullets-large li:hover { border-color: var(--accent); } .bullets-large strong { font-family: var(--font-serif); font-weight: 500; font-size: 1.1rem; } .bullets-large span { color: var(--text-soft); font-size: 14px; } /* ============================================================ Контакты / Форма ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; } .contact-list { display: flex; flex-direction: column; gap: 18px; } .contact-list li { display: flex; flex-direction: column; gap: 4px; } .contact-list a { color: var(--text); font-weight: 500; font-size: 1.05rem; } .contact-list a:hover { color: var(--accent); } .callout { margin-top: 24px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; color: var(--text-soft); font-size: 14px; display: flex; flex-direction: column; gap: 6px; } .callout strong { color: var(--text); font-weight: 600; } .form { display: flex; flex-direction: column; gap: 16px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; } .form__row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form label { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text-soft); font-weight: 500; } .form input, .form textarea { font: inherit; padding: 14px 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--text); outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); resize: vertical; } .form input:focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(210,85,42,.12); } .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; } .alert { padding: 16px 20px; border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--line); } .alert--ok { background: #E9F4EC; border-color: #BFDFC8; color: #1F5B30; } .alert--err { background: #FFE9DF; border-color: #F2C0A6; color: #8A2A0E; } /* ============================================================ Контакты — hero, карточки, FAQ, бриф ============================================================ */ /* Hero c иллюстрацией справа */ .contacts-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; } .contacts-hero__copy { min-width: 0; } .contacts-hero__art { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 480px; margin-left: auto; } .contacts-hero__art svg { width: 100%; height: 100%; display: block; } .contacts-hero__perks { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 28px; color: var(--text-soft); font-size: 14.5px; } .contacts-hero__perks li { display: inline-flex; align-items: center; gap: 8px; } .contacts-hero__perks svg { color: var(--accent); flex: 0 0 18px; } /* ===== Контактная доска: 1 главный блок + 3 плитки ===== */ .contact-board { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto auto; gap: 18px; } .contact-primary { grid-row: span 3; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 36px 36px 32px; color: var(--text-on-dark); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; min-height: 320px; background: radial-gradient(ellipse 70% 85% at 100% 0%, rgba(210, 85, 42, 0.28), transparent 60%), radial-gradient(ellipse 80% 90% at 0% 100%, rgba(91, 58, 76, 0.25), transparent 65%), var(--bg-darker); } .contact-primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(244, 239, 229, 0.06); pointer-events: none; z-index: 1; } .contact-primary > * { position: relative; z-index: 2; } .contact-primary__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .contact-primary__label { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: rgba(244, 239, 229, .55); } .contact-primary__status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-on-dark); padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(244, 239, 229, .08); } .contact-primary__dot { width: 8px; height: 8px; border-radius: 50%; background: #6FCC7A; box-shadow: 0 0 0 4px rgba(111, 204, 122, .14); } .contact-primary__number { font-family: var(--font-serif); font-weight: 500; color: #FFF8EB; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.02em; margin-top: auto; border-bottom: 0; transition: color .2s var(--ease); } .contact-primary__number:hover { color: var(--accent); } .contact-primary__hint { color: var(--muted-on-dark); font-size: 14.5px; line-height: 1.55; margin: 0; max-width: 38ch; } .contact-primary__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .contact-primary__actions .btn--ghost { color: var(--text-on-dark); border-color: rgba(244, 239, 229, .25); } .contact-primary__actions .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .04); } /* Светлые плитки справа */ .contact-tile { position: relative; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 18px; padding: 22px 24px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--text); text-decoration: none; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .contact-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(110, 41, 22, .35); } .contact-tile__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--bg-warm); color: var(--accent); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .contact-tile__label { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--text-muted); } .contact-tile__value { font-family: var(--font-serif); font-weight: 500; font-size: 1.18rem; line-height: 1.2; color: var(--text); letter-spacing: -.012em; word-break: break-word; } .contact-tile__hint { color: var(--text-soft); font-size: 13px; line-height: 1.4; margin-top: 4px; } .contact-tile__arrow { color: var(--accent); font-size: 1.15rem; transition: transform .25s var(--ease); } .contact-tile:hover .contact-tile__arrow { transform: translateX(4px); } /* Юр. строка под доской */ .contact-legal { margin-top: 28px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px; color: var(--text-soft); font-size: 14px; padding-top: 22px; border-top: 1px solid var(--line); } .contact-legal__label { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--text-muted); font-weight: 500; } .contact-legal strong { font-family: var(--font-serif); font-weight: 500; color: var(--text); font-size: 1.05rem; letter-spacing: -.01em; } .contact-legal__sub a { color: var(--text); border-bottom: 1px solid var(--line-strong); transition: color .2s var(--ease), border-color .2s var(--ease); } .contact-legal__sub a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Trust-блок слева от формы */ .trust-list { margin-top: 32px; display: flex; flex-direction: column; gap: 18px; } .trust-list__item { display: flex; gap: 14px; align-items: flex-start; } .trust-list__icon { flex: 0 0 40px; width: 40px; height: 40px; background: var(--bg-warm); color: var(--accent); border: 1px solid var(--line); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; } .trust-list__item strong { display: block; font-weight: 500; color: var(--text); font-size: 15px; margin-bottom: 4px; } .trust-list__item p { color: var(--text-soft); font-size: 14px; line-height: 1.55; margin: 0; } /* Форма: «бриф» — fieldset + чипы тем */ .form--brief { padding: 32px; } .form__fieldset { border: 0; padding: 0; margin: 0 0 6px; } .form__legend { padding: 0; margin: 0 0 12px; font-size: 13.5px; font-weight: 500; color: var(--text-soft); } .form__topics { display: flex; flex-wrap: wrap; gap: 8px; } .topic-chip { cursor: pointer; user-select: none; display: inline-flex; align-items: center; flex-direction: row; gap: 0; margin: 0; } .topic-chip input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .topic-chip span { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 13.5px; color: var(--text-soft); transition: all .2s var(--ease); } .topic-chip:hover span { border-color: var(--accent); color: var(--accent); } .topic-chip input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); } .topic-chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(210, 85, 42, .2); } /* FAQ */ .faq { display: flex; flex-direction: column; gap: 14px; max-width: 880px; } .faq__item { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); overflow: hidden; } .faq__item[open] { border-color: var(--line-strong); box-shadow: 0 8px 22px -10px rgba(110, 41, 22, .15); } .faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-family: var(--font-serif); font-weight: 500; font-size: 1.08rem; color: var(--text); line-height: 1.35; } .faq__item summary::-webkit-details-marker { display: none; } .faq__chev { color: var(--accent); flex: 0 0 18px; transition: transform .3s var(--ease); } .faq__item[open] .faq__chev { transform: rotate(180deg); } .faq__body { padding: 0 22px 20px; color: var(--text-soft); font-size: 14.5px; line-height: 1.65; } .faq__body p { margin: 0; } .faq__body a { color: var(--accent); border-bottom: 1px solid currentColor; } .faq__body a:hover { color: var(--accent-2); } /* ============================================================ CTA блок ============================================================ */ .cta { position: relative; background: var(--bg-darker); color: var(--bg); border-radius: var(--radius-xl); padding: clamp(56px, 8vw, 96px); text-align: center; box-shadow: var(--shadow-lg); overflow: hidden; } .cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 20% 90%, rgba(210,85,42,.5), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 10%, rgba(120,40,180,.3), transparent 60%); pointer-events: none; } .cta > * { position: relative; z-index: 1; } .cta h2 { color: #FFF8EB; font-size: clamp(2rem, 4.5vw, 3.6rem); margin-bottom: 24px; font-weight: 400; letter-spacing: -.025em; } .cta h2 em { font-style: italic; color: var(--accent); font-weight: 300; } .cta p { color: rgba(244,239,229,.78); max-width: 680px; margin: 0 auto 36px; font-size: 1.1rem; } .cta__actions { display: inline-flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .cta .btn--primary { background: var(--accent); color: #fff; box-shadow: 0 16px 40px -10px rgba(210,85,42,.6); } .cta .btn--primary:hover { background: var(--accent-2); } .cta--inline { padding: clamp(36px, 5vw, 56px); margin-top: 40px; } /* ============================================================ Статья ============================================================ */ .article__hero { padding: clamp(56px, 8vw, 100px) 0 32px; } .article__meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--text-muted); font-size: 14px; margin-bottom: 18px; } .article__lead { font-size: 1.25rem; color: var(--text-soft); max-width: 760px; line-height: 1.5; margin: 8px 0 24px; } .article__body { max-width: 760px; padding-top: 28px; padding-bottom: 56px; } .article__body h2 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); margin-top: 1.7em; letter-spacing: -.02em; } .article__body h3 { font-size: 1.35rem; margin-top: 1.5em; } .article__body p, .article__body li { font-size: 1.08rem; color: var(--text); line-height: 1.7; } .article__body ul { margin: .8em 0 1.2em; display: flex; flex-direction: column; gap: 8px; } .article__body li { padding-left: 26px; position: relative; } .article__body li::before { content: ""; position: absolute; left: 8px; top: .85em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .article__body code { background: var(--bg-warm); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; font-size: .92em; } .article__body pre { background: var(--bg-darker); color: #F4EFE5; border-radius: var(--radius); padding: 20px; overflow-x: auto; font-size: 14px; margin: 22px 0; } .article__body pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: inherit; } .article__body a { color: var(--accent); border-bottom: 1px solid currentColor; } .article__body a:hover { color: var(--accent-2); } .article__body strong { color: var(--text); font-weight: 600; } .article__cta { padding-bottom: 80px; max-width: 980px; } /* ============================================================ Подвал ============================================================ */ .site-footer { background: var(--bg-darker); color: var(--text-on-dark); padding: 88px 0 28px; position: relative; overflow: hidden; } .site-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120%; height: 1px; background: linear-gradient(to right, transparent, rgba(244,239,229,.18), transparent); } .site-footer .brand--footer { align-items: flex-start; gap: 12px; margin-bottom: 18px; } .site-footer .brand__text { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1.2; } .site-footer .brand__name { color: #fff; font-size: 1.15rem; } .site-footer .brand__sub { color: var(--muted-on-dark); font-size: 13px; letter-spacing: .01em; } .site-footer .brand { color: var(--accent); } .site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid rgba(244,239,229,.1); } .site-footer__col h4 { color: #fff; margin-bottom: 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; } .site-footer__col ul { display: flex; flex-direction: column; gap: 10px; } .site-footer__col li { color: var(--muted-on-dark); font-size: 14.5px; line-height: 1.55; } .site-footer__col li.muted { color: rgba(244,239,229,.5); font-size: 13px; } .site-footer__col a { color: var(--muted-on-dark); font-size: 14.5px; transition: color .2s var(--ease); } .site-footer__col a:hover { color: #fff; } .site-footer__col p { color: var(--muted-on-dark); font-size: 14.5px; max-width: 360px; } .site-footer__col--contacts li { font-size: 14px; } .site-footer__col--contacts .site-footer__address { color: var(--muted-on-dark); font-style: normal; line-height: 1.5; } .site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 28px; color: var(--muted-on-dark); font-size: 13.5px; } .site-footer__bottom a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(181, 172, 154, 0.5); } .site-footer__bottom a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ============================================================ Чат-виджет (плавающий) ============================================================ */ .chat-widget { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .chat-widget__toggle { display: inline-flex; align-items: center; gap: 10px; background: var(--text); color: var(--bg); padding: 14px 22px; border-radius: 999px; box-shadow: 0 18px 40px -8px rgba(20,16,10,.4); font-weight: 500; transition: background .2s var(--ease), transform .2s var(--ease); } .chat-widget__toggle:hover { background: var(--accent); transform: translateY(-2px); } .chat-widget.is-open .chat-widget__toggle { display: none; } .chat-panel { width: min(400px, calc(100vw - 32px)); height: min(580px, 80vh); direction: ltr; unicode-bidi: isolate; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 30px 80px -20px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; animation: chatIn .3s var(--ease); } @keyframes chatIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } .chat-panel[hidden] { display: none; } .chat-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--bg-warm); } .chat-panel__title { display: flex; align-items: center; gap: 12px; font-size: 14px; } .chat-panel__title strong { display: block; color: var(--text); font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; } .chat-panel__title small { display: block; color: var(--text-muted); font-size: 12px; } .chat-panel__close { font-size: 24px; line-height: 1; color: var(--text-muted); padding: 6px 12px; border-radius: 8px; transition: background .2s var(--ease), color .2s var(--ease); } .chat-panel__close:hover { color: var(--text); background: var(--bg); } .chat-panel__log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; align-items: stretch; padding: 18px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .chat-panel__form { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--line); background: var(--bg-warm); } .chat-panel__form textarea { flex: 1 1 auto; min-width: 0; min-height: 52px; max-height: 140px; resize: none; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-card); font: inherit; font-size: 14px; line-height: 1.45; outline: none; color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); scrollbar-gutter: stable; } .chat-panel__form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(210, 85, 42, 0.12); } .chat-panel__form .btn { flex-shrink: 0; width: 44px; height: 44px; min-width: 44px; padding: 0; justify-content: center; border-radius: 50%; align-self: flex-end; } .chat-panel__form .btn svg { display: block; } .chat-panel__form .btn > * { position: relative; z-index: 1; } .chat-panel__hint { font-size: 11.5px; color: var(--text-muted); padding: 8px 16px 12px; text-align: center; background: var(--bg); } /* ============================================================ АДАПТИВ ============================================================ */ /* === Планшет / узкий ноутбук === */ @media (max-width: 1100px) { .bento { grid-template-columns: repeat(4, 1fr); } .bento__cell--wide { grid-column: span 4; } .bento__cell--mid { grid-column: span 2; } .bento__cell--small { grid-column: span 2; } .bento__cell--full { grid-column: span 4; } .timeline, .timeline--three { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 56px; padding-top: 50px; } /* На двух рядах общая горизонтальная линия не имеет смысла */ .timeline::before { display: none; } .big-metrics { grid-template-columns: 1fr 1fr; } .case { grid-template-columns: 1fr; gap: 28px; } .case__metrics { grid-template-columns: 1fr 1fr; } .case__body { grid-template-columns: 1fr; gap: 24px; } .tech-stack { grid-template-columns: repeat(2, 1fr); } .appliance-grid { grid-template-columns: 1fr; gap: 16px; } .magazine { grid-template-columns: 1fr; } .art-card--feature { padding: 30px; } .hero__inner { grid-template-columns: 1fr; gap: 40px; } .service-detail { grid-template-columns: 1fr; gap: 32px; } .service-detail__side { position: static; } .two-col { grid-template-columns: 1fr; gap: 32px; } .contact-grid { grid-template-columns: 1fr; gap: 32px; } .contacts-hero { grid-template-columns: 1fr; gap: 28px; } .contacts-hero__art { max-width: 240px; margin: 0 auto; } .contact-board { grid-template-columns: 1fr; grid-template-rows: auto; } .contact-primary { grid-row: auto; } .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; } } /* === Мобильная шапка и оверлей-меню === */ @media (max-width: 900px) { .site-header__inner { gap: 12px; height: 64px; } /* Скрываем десктопные навигацию и CTA */ .site-nav { display: none; } .site-header__cta { display: none; } /* Показываем бургер */ .nav-toggle { display: inline-flex; margin-left: auto; position: relative; z-index: 2; } /* Бургер открыт — полноэкранный drawer под шапкой (fixed относится к viewport) */ .site-header.is-menu-open .site-nav { display: flex; position: fixed; inset: 64px 0 0 0; background: var(--bg); flex-direction: column; align-items: stretch; padding: 24px 20px calc(140px + env(safe-area-inset-bottom)); gap: 4px; margin: 0; z-index: 110; overflow-y: auto; overflow-x: hidden; border-top: 1px solid var(--line); animation: navIn .25s var(--ease); -webkit-overflow-scrolling: touch; } .site-header.is-menu-open .site-nav a { padding: 16px 18px; font-size: 17px; border-radius: 12px; font-weight: 500; color: var(--text); border: 1px solid transparent; } .site-header.is-menu-open .site-nav a:hover, .site-header.is-menu-open .site-nav a.is-active { background: var(--bg-warm); border-color: var(--line); } .site-header.is-menu-open .site-nav::after { content: ""; display: block; margin: 14px 0 0; border-top: 1px solid var(--line); } /* CTA кнопка под ссылками, но над контентом страницы; выше виджета чата (60) */ .site-header.is-menu-open .site-header__cta { display: flex; position: fixed; left: 20px; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 115; } .site-header.is-menu-open .site-header__cta .btn { width: 100%; justify-content: center; padding: 16px 22px; font-size: 15px; } body.has-open-menu { overflow: hidden; } body.has-open-menu .chat-widget { visibility: hidden; pointer-events: none; opacity: 0; transition: opacity .15s var(--ease); } } @keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* === Мобильный layout (телефон, до iPad portrait включительно) === */ @media (max-width: 768px) { body { font-size: 16px; } .container { padding: 0 18px; } img, svg, video, canvas { max-width: 100%; } h1 { font-size: clamp(1.7rem, 8vw, 2.5rem); letter-spacing: -.018em; line-height: 1.08; font-variation-settings: "opsz" 72; } h2 { font-size: clamp(1.45rem, 6vw, 2.1rem); line-height: 1.1; font-variation-settings: "opsz" 72; } h3 { font-size: 1.18rem; } /* HERO */ .hero { padding: 40px 0 56px; overflow: hidden; } .hero__inner { gap: 32px; grid-template-columns: 1fr; } .hero__copy, .hero__demo { width: 100%; min-width: 0; } .hero__badge { max-width: 100%; font-size: 12px; flex-wrap: wrap; padding: 10px 14px 10px 8px; line-height: 1.5; } .hero__title { margin-bottom: 18px; } .hero__title .stroke { display: block; } .hero__title .accent { padding-right: 0; } .hero__lead { font-size: 1rem; margin-bottom: 24px; } .hero__cta { gap: 10px; flex-direction: column; align-items: stretch; margin-bottom: 24px; } .hero__cta .btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: 14.5px; } .hero__bullets { gap: 10px 18px; font-size: 13.5px; flex-wrap: wrap; } /* Демо-чат — компактный мобильный вид */ .demo-chat { padding: 18px 16px 16px; min-height: 0; width: 100%; max-width: 100%; overflow: visible; } .demo-chat::before { display: none; } .demo-chat__head { flex: 0 0 auto; font-size: 13px; gap: 10px; flex-wrap: wrap; align-items: center; padding: 0 0 12px; margin-bottom: 10px; } .demo-chat__head strong { font-size: 1.05rem; line-height: 1.3; } .demo-chat__head .muted { display: none; } .demo-chat__head .dots { display: none; } .demo-chat__log { min-height: 250px; max-height: 60vh; padding: 0; } .msg__bubble { max-width: 100%; font-size: 13.5px; padding: 10px 13px; } .demo-chat__form { padding: 4px 4px 4px 14px; } .demo-chat__form input { width: 100%; min-width: 0; font-size: 14px; padding: 10px 0; text-align: start; } .demo-chat__hints .chip { font-size: 12px; padding: 6px 11px; } /* Блобы */ .blob { filter: blur(80px); opacity: .4; } .blob--1 { width: 380px; height: 380px; top: -80px; left: -100px; } .blob--2 { width: 380px; height: 380px; right: -120px; } .blob--3 { width: 320px; height: 320px; } /* Marquee */ .marquee__track { gap: 28px; padding-right: 28px; } .marquee__item { font-size: 1.1rem; } .marquee__item::after { margin-left: 20px; } /* Секции */ .section { padding: 56px 0; } .section__head { margin-bottom: 28px; } .section__head--split { flex-direction: column; align-items: flex-start; gap: 12px; } /* Bento */ .bento { grid-template-columns: 1fr; gap: 14px; } .bento__cell, .bento__cell--wide, .bento__cell--mid, .bento__cell--small, .bento__cell--full { grid-column: span 1; } .bento__cell { padding: 24px 22px; } .bento__title { font-size: 1.35rem; } .bento__lead { font-size: 14.5px; } .bento__cell--split { grid-template-columns: 1fr; gap: 18px; } .bento__cell--split-art { height: 200px; max-width: 280px; margin: 8px auto 0; } .bento__bullets--two { grid-template-columns: 1fr; gap: 6px; max-width: none; } .bento__art { width: 140px; height: 140px; right: -8px; bottom: -8px; } /* Timeline — вертикальный список с точками слева, без верхней линии */ .timeline, .timeline--three { grid-template-columns: 1fr; gap: 22px; padding: 0 0 0 36px; } .timeline::before { display: block; top: 8px; bottom: 8px; left: 10px; right: auto; width: 1px; height: auto; background: linear-gradient( 180deg, transparent 0, var(--line-strong) 28px, var(--line-strong) calc(100% - 28px), transparent 100% ); } .timeline__step { padding-left: 0; } .timeline__step::before { top: 4px; left: -32px; } .timeline__step::after { top: 10px; left: -26px; } .timeline__num { font-size: 1.9rem; margin: 0 0 10px; } .timeline__num::after { width: 22px; } .timeline__step h3 { font-size: 1.15rem; max-width: none; margin-bottom: 8px; } .timeline__step p { max-width: none; } /* Метрики */ .big-metrics { grid-template-columns: 1fr; border-radius: var(--radius); } .big-metric { padding: 26px 22px; } .big-metric strong { font-size: 2.4rem; } /* Кейс */ .case__metrics { border-radius: var(--radius); } .case__metric { padding: 22px 20px; } .case__metric strong { font-size: 2.1rem; } /* Стек технологий */ .tech-stack { grid-template-columns: 1fr 1fr; gap: 12px; } .tech-card { padding: 22px 20px; } .tech-card__icon { width: 40px; height: 40px; border-radius: 10px; } /* Готовые конфигурации */ .appliance-card { padding: 26px 22px; } .appliance-card h3 { font-size: 1.4rem; } /* Манифест */ .manifesto__quote { font-size: clamp(1.35rem, 6.5vw, 1.9rem); line-height: 1.22; } /* Статьи */ .magazine { gap: 14px; } .art-card { padding: 22px; } .art-card--feature { padding: 22px; } .art-card--feature h3 { font-size: 1.45rem; } .art-card--feature .art-card__cover { aspect-ratio: 16 / 9; } /* Услуги — деталь */ .service-detail { grid-template-columns: 1fr; gap: 24px; } /* Формы */ .form__row--two { grid-template-columns: 1fr; } .form { padding: 20px; border-radius: var(--radius); } .form--brief { padding: 22px; } /* Контакты */ .contacts-hero__perks { gap: 10px 18px; font-size: 13px; } .contact-primary { padding: 28px 24px; } .contact-primary__number { font-size: clamp(1.7rem, 7vw, 2.4rem); } .contact-primary__actions { flex-direction: column; align-items: stretch; } .contact-primary__actions .btn { width: 100%; justify-content: center; } .contact-tile { grid-template-columns: 44px 1fr auto; padding: 18px 20px; gap: 14px; } .contact-tile__icon { width: 44px; height: 44px; } .contact-tile__value { font-size: 1.05rem; } .contact-legal { font-size: 13px; gap: 6px 12px; } .trust-list { margin-top: 24px; } .form__topics { gap: 6px; } .topic-chip span { font-size: 12.5px; padding: 8px 13px; } .faq__item summary { padding: 16px 18px; font-size: 1rem; } .faq__body { padding: 0 18px 18px; font-size: 14px; } /* Подвал */ .site-footer { padding: 56px 0 24px; } .site-footer__grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; border-bottom: none; } .site-footer__col--contacts ul li.muted { margin-top: 14px; } /* Чат-виджет */ .chat-widget { right: 14px; bottom: 14px; } .chat-widget__toggle { padding: 0; gap: 0; width: 52px; height: 52px; justify-content: center; border-radius: 50%; } .chat-widget__toggle span { display: none !important; } .chat-panel { width: calc(100vw - 28px); height: 78vh; } /* CTA */ .cta { padding: 32px 22px; border-radius: var(--radius-lg); } .cta h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); } .cta p { font-size: 1rem; } .cta__actions { flex-direction: column; align-items: stretch; } .cta__actions .btn { justify-content: center; width: 100%; } /* Статья */ .article__body p, .article__body li { font-size: 1rem; } .article__body { padding-bottom: 40px; } .article__hero { padding: 32px 0 16px; } } /* === Маленький телефон === */ @media (max-width: 420px) { .container { padding: 0 16px; } h1 { font-size: clamp(1.55rem, 7.5vw, 2.1rem); } .bento__cell { padding: 22px 18px; } .bento__title { font-size: 1.25rem; } .form { padding: 16px; } .marquee__item { font-size: 1rem; } .big-metric strong { font-size: 2.1rem; } .case__metrics { grid-template-columns: 1fr; } .tech-stack { grid-template-columns: 1fr; } .timeline, .timeline--three { padding-left: 30px; } .timeline__step::before { left: -28px; } .timeline__step::after { left: -22px; } .demo-chat__hints .chip { font-size: 11.5px; padding: 5px 10px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }