/* ============================================================ DioLabs — оформление публичной части сайта Подключается ПОСЛЕ style.css: главная, тарифы, юр. страницы. Файл отдельный намеренно — style.css общий для кабинета, студии и админки, и трогать его ради лендинга рискованно. ============================================================ */ :root { /* Чернила и поверхности */ --l-ink: #0B0B0F; --l-ink-2: #3F3F46; --l-ink-3: #71717A; --l-line: #E8E8EC; --l-line-soft: #F1F1F4; --l-surface: #FFFFFF; --l-surface-2: #F8F8FA; /* Фирменный спектр: им «светится» звук по всему сайту */ --l-brand-1: #6366F1; --l-brand-2: #A855F7; --l-brand-3: #EC4899; --l-gradient: linear-gradient(115deg, #6366F1 0%, #A855F7 52%, #EC4899 100%); /* Тени: две ступени, обе мягкие — «дорого» делает не темнота, а размытие */ --l-shadow-sm: 0 1px 2px rgba(11, 11, 15, .04), 0 8px 24px -18px rgba(11, 11, 15, .24); --l-shadow-md: 0 1px 2px rgba(11, 11, 15, .04), 0 24px 48px -28px rgba(11, 11, 15, .30); --l-shadow-lg: 0 2px 4px rgba(11, 11, 15, .04), 0 40px 80px -40px rgba(11, 11, 15, .38); --l-radius: 20px; --l-radius-sm: 14px; /* Такт вертикального ритма */ --l-section: 112px; } /* ============================================================ БАЗА ============================================================ */ .landing-body { background: var(--l-surface); color: var(--l-ink-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .landing-body h1, .landing-body h2, .landing-body h3, .landing-body h4 { color: var(--l-ink); letter-spacing: -0.02em; } .landing-container { max-width: 1180px; padding: 0 28px; } /* Плавная прокрутка по якорям + запас под «липкую» шапку */ html { scroll-behavior: smooth; scroll-padding-top: 88px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Появление секций при прокрутке (класс is-visible вешает landing.js). ⚠️ Прятать умеет только страница, на которой скрипты ЖИВЫ: класс has-js ставит инлайн-строка в . Иначе при выключенном или упавшем JS лендинг открылся бы пустым — все секции остались бы с opacity: 0. */ .has-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); } .has-js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .has-js .reveal { opacity: 1; transform: none; transition: none; } } /* Фокус с клавиатуры виден везде — мышью не мешает */ .landing-body a:focus-visible, .landing-body button:focus-visible { outline: 2px solid var(--l-brand-1); outline-offset: 3px; border-radius: 6px; } /* ============================================================ КНОПКИ (переопределяют базовые .btn из style.css) ============================================================ */ .landing-body .btn { border-radius: 999px; font-weight: 500; letter-spacing: -0.01em; transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } .landing-body .btn-primary { background: var(--l-ink); box-shadow: 0 1px 2px rgba(11, 11, 15, .16), 0 12px 24px -16px rgba(11, 11, 15, .6); } .landing-body .btn-primary:hover { background: #23232B; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(11, 11, 15, .18), 0 18px 32px -16px rgba(11, 11, 15, .55); } .landing-body .btn-primary:active { transform: translateY(0); } .landing-body .btn-secondary { background: rgba(255, 255, 255, .7); border: 1px solid var(--l-line); color: var(--l-ink); backdrop-filter: blur(8px); } .landing-body .btn-secondary:hover { background: #fff; border-color: #D7D7DE; transform: translateY(-1px); box-shadow: var(--l-shadow-sm); } .landing-body .btn-lg { padding: 16px 30px; font-size: 15px; } /* Светлая кнопка для тёмных полос */ .btn-invert { background: #fff; color: var(--l-ink); } .btn-invert:hover { background: #EFEFF2; text-decoration: none; color: var(--l-ink); } .btn-ghost-invert { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .22); } .btn-ghost-invert:hover { background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; } /* ============================================================ ШАПКА ============================================================ */ .landing-header { background: transparent; backdrop-filter: none; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } .landing-header > .landing-container { height: 72px; gap: 20px; } /* Класс вешает landing.js после первых пикселей прокрутки. is-menu-open — то же самое, но при раскрытом мобильном меню: у верха страницы шапка прозрачная, и сквозь неё просвечивал бы заголовок. */ .landing-header.is-stuck, .landing-header.is-menu-open { background: rgba(255, 255, 255, .78); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--l-line); box-shadow: 0 1px 24px -12px rgba(11, 11, 15, .28); } .landing-logo { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; letter-spacing: -0.03em; color: var(--l-ink); } .landing-logo-mark { display: block; width: 26px; height: 26px; flex-shrink: 0; } .landing-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 10px; } .landing-nav-link { padding: 9px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--l-ink-2); text-decoration: none; transition: background .15s ease, color .15s ease; } .landing-nav-link:hover { background: var(--l-surface-2); color: var(--l-ink); text-decoration: none; } /* Только кнопка в строке шапки. Селектор по id, а не `.landing-header .btn`: мобильное меню лежит ВНУТРИ шапки, и общий селектор доставал и его кнопки. */ #header-login-btn { padding: 11px 20px; font-size: 14px; } /* Бургер — только на узких экранах */ .landing-burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--l-line); border-radius: 12px; background: rgba(255, 255, 255, .8); color: var(--l-ink); cursor: pointer; flex-shrink: 0; } .landing-burger-lines { position: relative; width: 16px; height: 10px; } .landing-burger-lines span { position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .25s cubic-bezier(.16, 1, .3, 1), opacity .18s ease; } .landing-burger-lines span:nth-child(1) { top: 0; } .landing-burger-lines span:nth-child(2) { top: 4.2px; } .landing-burger-lines span:nth-child(3) { top: 8.4px; } .landing-burger[aria-expanded="true"] .landing-burger-lines span:nth-child(1) { transform: translateY(4.2px) rotate(45deg); } .landing-burger[aria-expanded="true"] .landing-burger-lines span:nth-child(2) { opacity: 0; } .landing-burger[aria-expanded="true"] .landing-burger-lines span:nth-child(3) { transform: translateY(-4.2px) rotate(-45deg); } .landing-mobile-menu { display: none; border-bottom: 1px solid var(--l-line); background: rgba(255, 255, 255, .96); backdrop-filter: saturate(180%) blur(14px); } .landing-mobile-menu.is-open { display: block; } .landing-mobile-menu .landing-container { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; padding-bottom: 18px; /* ⚠️ Сбрасываем то, что задано для контейнера ШАПКИ: там строка в ряд высотой 72px. Без сброса пункты меню наезжали друг на друга и на содержимое страницы. */ height: auto; align-items: stretch; justify-content: flex-start; } .landing-mobile-link { padding: 13px 4px; font-size: 16px; font-weight: 500; color: var(--l-ink); text-decoration: none; border-bottom: 1px solid var(--l-line-soft); } .landing-mobile-menu .btn { margin-top: 14px; width: 100%; } /* ============================================================ HERO ============================================================ */ .hero { padding: 148px 0 92px; position: relative; isolation: isolate; overflow: clip; } /* Мягкое «северное сияние» за первым экраном */ .hero-aurora { position: absolute; inset: -20% -10% auto -10%; height: 780px; z-index: -1; pointer-events: none; } .hero-aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; } .hero-aurora span:nth-child(1) { width: 560px; height: 560px; top: 4%; left: 48%; background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, .55), transparent 68%); animation: aurora-drift-a 22s ease-in-out infinite; } .hero-aurora span:nth-child(2) { width: 480px; height: 480px; top: 22%; left: 64%; background: radial-gradient(circle at 60% 40%, rgba(236, 72, 153, .42), transparent 68%); animation: aurora-drift-b 26s ease-in-out infinite; } .hero-aurora span:nth-child(3) { width: 520px; height: 520px; top: -12%; left: 22%; background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, .34), transparent 70%); animation: aurora-drift-c 30s ease-in-out infinite; } @keyframes aurora-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-40px, 30px, 0) scale(1.08); } } @keyframes aurora-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(36px, -28px, 0) scale(1.1); } } @keyframes aurora-drift-c { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(24px, 34px, 0) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .hero-aurora span { animation: none; } } .hero-inner { display: grid; /* Левой колонке отдано больше: заголовок набран крупно, и при равных долях «Ваш текст — голосом,» не помещалось в строку */ grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); align-items: center; gap: 56px; } .hero-content { max-width: 640px; } /* Плашка над заголовком */ .hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 9px; margin-bottom: 26px; border: 1px solid var(--l-line); border-radius: 999px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); font-size: 13.5px; font-weight: 500; color: var(--l-ink-2); box-shadow: var(--l-shadow-sm); } .hero-badge-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--l-gradient); position: relative; flex-shrink: 0; } .hero-badge-dot::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; } .hero-title { font-size: clamp(2.05rem, 4.6vw, 3.45rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.035em; margin-bottom: 22px; } /* Подсветка ключевого слова: градиентная «кисть» под строкой */ .hero-accent { position: relative; white-space: nowrap; } .hero-accent::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: .06em; height: .22em; border-radius: 999px; background: var(--l-gradient); opacity: .22; z-index: -1; } .hero-subtitle { font-size: 1.15rem; line-height: 1.6; color: var(--l-ink-2); margin-bottom: 32px; max-width: 540px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } /* Строка доверия под кнопками: три коротких факта */ .hero-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; color: var(--l-ink-3); } .hero-fact { display: inline-flex; align-items: center; gap: 7px; } .hero-fact svg { color: var(--l-brand-1); flex-shrink: 0; } /* --- Демонстрационная карточка справа --- */ .hero-visual { position: relative; justify-self: end; width: 100%; max-width: 460px; } .hero-card { position: relative; border: 1px solid var(--l-line); border-radius: 24px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px); box-shadow: var(--l-shadow-lg); padding: 22px; z-index: 1; } .hero-card-head { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--l-line-soft); } .hero-card-dots { display: flex; gap: 5px; } .hero-card-dots i { width: 9px; height: 9px; border-radius: 50%; background: #E2E2E8; } .hero-card-title { font-size: 12.5px; font-weight: 500; color: var(--l-ink-3); letter-spacing: .01em; } .hero-card-text { font-size: 14.5px; line-height: 1.65; color: var(--l-ink-2); margin-bottom: 16px; } .hero-card-text b { font-weight: 500; color: var(--l-ink); } .hero-card-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .hero-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--l-line); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 500; color: var(--l-ink-2); } .hero-chip-avatar { width: 16px; height: 16px; border-radius: 50%; background: var(--l-gradient); flex-shrink: 0; } .hero-chip-brand { border-color: rgba(99, 102, 241, .28); background: rgba(99, 102, 241, .07); color: #4F46E5; } .hero-card-player { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--l-surface-2); } .hero-card-play { width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; flex-shrink: 0; border-radius: 50%; background: var(--l-ink); color: #fff; display: flex; align-items: center; justify-content: center; } .hero-card-play .icon-pause { display: none; } .hero-card.is-playing .hero-card-play .icon-play { display: none; } .hero-card.is-playing .hero-card-play .icon-pause { display: block; } .hero-eq { display: flex; align-items: center; gap: 3px; height: 34px; flex: 1; overflow: hidden; } .hero-eq i { display: block; flex: 1; min-width: 2px; border-radius: 999px; background: linear-gradient(180deg, var(--l-brand-1), var(--l-brand-2)); opacity: .85; animation: eq-bounce 1.4s ease-in-out infinite; } @keyframes eq-bounce { 0%, 100% { height: 18%; } 50% { height: 100%; } } @media (prefers-reduced-motion: reduce) { .hero-eq i { animation: none; height: 55%; } } .hero-card-time { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--l-ink-3); flex-shrink: 0; } /* Парящая подпись «готово» */ .hero-float { position: absolute; right: -14px; bottom: -18px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--l-line); border-radius: 999px; background: #fff; box-shadow: var(--l-shadow-md); font-size: 13px; font-weight: 500; color: var(--l-ink); animation: float-soft 5s ease-in-out infinite; } .hero-float svg { color: #16A34A; flex-shrink: 0; } @keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (prefers-reduced-motion: reduce) { .hero-float { animation: none; } } /* ============================================================ ПОЛОСА ФАКТОВ ============================================================ */ .landing-stats { padding-bottom: 8px; } .landing-stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--l-line); border-radius: var(--l-radius); background: var(--l-line); overflow: hidden; box-shadow: var(--l-shadow-sm); } .landing-stat { background: #fff; padding: 26px 22px; text-align: center; } .landing-stat-value { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; color: var(--l-ink); line-height: 1.1; margin-bottom: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; } .landing-stat-label { font-size: 13.5px; color: var(--l-ink-3); line-height: 1.45; } /* ============================================================ ЗАГОЛОВКИ СЕКЦИЙ ============================================================ */ .landing-body section { border-top: none; } .section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; } .section-head-left { margin-left: 0; text-align: left; } .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--l-ink-3); } .section-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--l-gradient); } .landing-body .section-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.032em; } /* ⚠️ Отступ и выключку сбрасываем ТОЛЬКО внутри .section-head. На странице тарифов такой же заголовок стоит сам по себе, и обнулённый margin-bottom наезжал на следующий абзац. */ .section-head .section-title { margin-bottom: 0; text-align: inherit; } .section-lead { margin-top: 16px; font-size: 1.0625rem; line-height: 1.62; color: var(--l-ink-3); } /* ============================================================ ПРИМЕРЫ ЗВУЧАНИЯ ============================================================ */ .samples { padding: var(--l-section) 0; background: radial-gradient(1000px 420px at 50% -8%, rgba(99, 102, 241, .07), transparent 70%), var(--l-surface-2); border-top: 1px solid var(--l-line); border-bottom: 1px solid var(--l-line); } .samples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .sample-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--l-line); border-radius: var(--l-radius); background: #fff; box-shadow: var(--l-shadow-sm); transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease; } .sample-card:hover { transform: translateY(-3px); box-shadow: var(--l-shadow-md); border-color: #DCDCE3; } .sample-card.is-playing { border-color: rgba(99, 102, 241, .45); box-shadow: 0 0 0 3px rgba(99, 102, 241, .1), var(--l-shadow-md); } /* Шапка карточки: слева категория текста, справа манера чтения */ .sample-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; } .sample-kind { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 9px; border-radius: 999px; background: var(--l-surface-2); font-size: 12.5px; font-weight: 600; color: var(--l-ink); letter-spacing: -0.005em; } .sample-manner { flex-shrink: 0; font-size: 12px; color: var(--l-ink-3); white-space: nowrap; } .sample-kind-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; background: var(--l-gradient); color: #fff; flex-shrink: 0; } .sample-kind-icon svg { width: 13px; height: 13px; } .sample-text { font-size: 15px; line-height: 1.66; color: var(--l-ink-2); margin-bottom: 18px; flex-grow: 1; } /* Промпт — главный «обучающий» элемент секции */ .sample-prompt { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; margin-bottom: 18px; border: 1px dashed rgba(99, 102, 241, .35); border-radius: var(--l-radius-sm); background: rgba(99, 102, 241, .05); font-size: 13.5px; line-height: 1.5; color: #4338CA; } .sample-prompt svg { flex-shrink: 0; margin-top: 2px; } .sample-prompt-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6366F1; margin-bottom: 3px; } /* --- Плеер --- */ .sample-player { display: flex; align-items: center; gap: 13px; padding-top: 18px; border-top: 1px solid var(--l-line-soft); } .sample-play { position: relative; width: 46px; height: 46px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--l-ink); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .18s cubic-bezier(.16, 1, .3, 1), background .18s ease; } .sample-play:hover { transform: scale(1.06); } .sample-play:active { transform: scale(.98); } .sample-card.is-playing .sample-play { background: var(--l-gradient); } .sample-play .icon-pause { display: none; } .sample-card.is-playing .sample-play .icon-play { display: none; } .sample-card.is-playing .sample-play .icon-pause { display: block; } /* Кольцо загрузки поверх кнопки */ .sample-play.is-loading .icon-play, .sample-play.is-loading .icon-pause { opacity: 0; } .sample-play.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } .sample-wave { display: flex; align-items: center; gap: 2px; height: 40px; flex: 1; min-width: 0; cursor: pointer; } .sample-wave-bar { display: block; flex: 1; min-width: 2px; border-radius: 999px; background: #DEDEE5; transition: background .12s linear; } .sample-wave-bar.is-played { background: linear-gradient(180deg, var(--l-brand-1), var(--l-brand-2)); } .sample-time { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--l-ink-3); flex-shrink: 0; min-width: 34px; text-align: right; } .sample-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; font-size: 12.5px; color: var(--l-ink-3); } .sample-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #C9C9D2; } .samples-note { margin-top: 32px; text-align: center; font-size: 14px; color: var(--l-ink-3); } /* ============================================================ КОМУ ПОЛЕЗНО ============================================================ */ .audience { padding: var(--l-section) 0; } .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .audience-card { position: relative; padding: 28px 26px 26px; border: 1px solid var(--l-line); border-radius: var(--l-radius); background: #fff; overflow: hidden; transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease; } /* Градиентная «заря» проявляется на наведении */ .audience-card::before { content: ''; position: absolute; inset: -1px -1px auto -1px; height: 3px; background: var(--l-gradient); opacity: 0; transition: opacity .3s ease; } .audience-card:hover { transform: translateY(-4px); box-shadow: var(--l-shadow-md); border-color: #DCDCE3; } .audience-card:hover::before { opacity: 1; } .audience-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; background: var(--l-surface-2); color: var(--l-ink); transition: background .3s ease, color .3s ease; } .audience-card:hover .audience-icon { background: var(--l-gradient); color: #fff; } .audience-title { font-size: 1.0625rem; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.015em; } .audience-text { font-size: 14.5px; line-height: 1.6; color: var(--l-ink-3); } /* ============================================================ ВОЗМОЖНОСТИ ============================================================ */ .features { padding: var(--l-section) 0; border-top: 1px solid var(--l-line); background: var(--l-surface-2); } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature-card { display: flex; flex-direction: column; padding: 28px 26px; text-align: left; border: 1px solid var(--l-line); border-radius: var(--l-radius); background: #fff; box-shadow: var(--l-shadow-sm); transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; } .feature-card:hover { transform: translateY(-3px); box-shadow: var(--l-shadow-md); } /* Широкая карточка — для примера с промптом */ .feature-card-wide { grid-column: span 3; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; align-items: center; padding: 36px; } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; background: var(--l-surface-2); border: 1px solid var(--l-line); color: var(--l-ink); } .landing-body .feature-title { font-size: 1.0625rem; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.015em; } .feature-text { font-size: 14.5px; line-height: 1.62; color: var(--l-ink-3); } /* Пример промптов: строки «манера → результат» */ .prompt-demo { display: flex; flex-direction: column; gap: 10px; } .prompt-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--l-line); border-radius: var(--l-radius-sm); background: var(--l-surface-2); transition: border-color .25s ease, background .25s ease, transform .25s ease; } .prompt-row:hover { border-color: rgba(99, 102, 241, .38); background: rgba(99, 102, 241, .05); transform: translateX(3px); } .prompt-row-quote { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.45; color: var(--l-ink); } .prompt-row-tag { flex-shrink: 0; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--l-line); font-size: 12px; font-weight: 600; color: var(--l-ink-3); } .prompt-row-eq { display: flex; align-items: flex-end; gap: 2.5px; height: 20px; width: 34px; flex-shrink: 0; } .prompt-row-eq i { display: block; flex: 1; border-radius: 999px; background: var(--l-gradient); opacity: .75; } /* ============================================================ КАК ЭТО РАБОТАЕТ ============================================================ */ .how-it-works { padding: var(--l-section) 0; border-top: 1px solid var(--l-line); } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .step-card { position: relative; max-width: none; text-align: left; padding: 28px 26px; border: 1px solid var(--l-line); border-radius: var(--l-radius); background: #fff; } /* Тонкая связующая линия между шагами (только на широком экране) */ .step-card:not(:last-child)::after { content: ''; position: absolute; top: 48px; right: -25px; width: 26px; height: 1px; background: linear-gradient(90deg, var(--l-line), transparent); } .step-number { width: 38px; height: 38px; margin-bottom: 18px; border-radius: 12px; background: var(--l-ink); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; } .landing-body .step-title { font-size: 1.0625rem; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.015em; } .step-text { font-size: 14.5px; line-height: 1.62; color: var(--l-ink-3); } /* ============================================================ СТОИМОСТЬ НА ГЛАВНОЙ ============================================================ */ .landing-pricing { padding: var(--l-section) 0; border-top: 1px solid var(--l-line); background: var(--l-surface-2); } .landing-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .landing-price-card { position: relative; padding: 30px 26px; text-align: left; border: 1px solid var(--l-line); border-radius: var(--l-radius); background: #fff; box-shadow: var(--l-shadow-sm); transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; } .landing-price-card:hover { transform: translateY(-3px); box-shadow: var(--l-shadow-md); } /* Выделенная карточка — цена за символы */ .landing-price-card-accent { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--l-gradient) border-box; border: 1px solid transparent; } .landing-price-value { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 10px; font-variant-numeric: tabular-nums; } .landing-price-card-accent .landing-price-value { background: var(--l-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .landing-price-label { font-size: 14.5px; line-height: 1.6; color: var(--l-ink-3); } .landing-pricing-lead { color: var(--l-ink-3); margin: 16px auto 0; } .landing-pricing-actions { display: flex; justify-content: center; margin-top: 36px; } .landing-pricing-links { margin-top: 24px; color: var(--l-ink-3); } .landing-pricing-links a { color: var(--l-ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #D4D4DB; } .landing-pricing-links a:hover { color: var(--l-ink); } /* ============================================================ ВОПРОСЫ ============================================================ */ .faq { padding: var(--l-section) 0; border-top: 1px solid var(--l-line); } .faq-list { max-width: 780px; margin: 0 auto; border: 1px solid var(--l-line); border-radius: var(--l-radius); background: #fff; overflow: hidden; box-shadow: var(--l-shadow-sm); } .faq-item + .faq-item { border-top: 1px solid var(--l-line-soft); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; font-size: 1rem; font-weight: 500; color: var(--l-ink); cursor: pointer; list-style: none; transition: background .18s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { background: var(--l-surface-2); } .faq-item summary::after { content: ''; width: 10px; height: 10px; flex-shrink: 0; border-right: 1.8px solid var(--l-ink-3); border-bottom: 1.8px solid var(--l-ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s cubic-bezier(.16, 1, .3, 1); } .faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); } .faq-answer { padding: 0 26px 24px; font-size: 14.5px; line-height: 1.68; color: var(--l-ink-3); } .faq-answer a { color: var(--l-ink-2); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ ФИНАЛЬНЫЙ ПРИЗЫВ (тёмная полоса) ============================================================ */ .cta-band { padding: 96px 0 104px; } .cta-inner { position: relative; isolation: isolate; overflow: hidden; padding: 72px 40px; border-radius: 28px; background: #0B0B0F; text-align: center; color: #fff; } .cta-inner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 340px at 18% 6%, rgba(99, 102, 241, .55), transparent 68%), radial-gradient(520px 320px at 84% 96%, rgba(236, 72, 153, .40), transparent 68%), radial-gradient(420px 280px at 62% 12%, rgba(168, 85, 247, .30), transparent 70%); } /* Тонкая «дорожка звука» по нижней кромке */ .cta-inner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--l-gradient); opacity: .7; } /* ⚠️ Селектор с .landing-body намеренно: общее правило `.landing-body h1,h2,h3,h4 { color: var(--l-ink) }` весит больше одного класса и перекрашивало заголовок в чёрный прямо на чёрной плашке. */ .landing-body .cta-title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; color: #fff; margin-bottom: 16px; } .cta-text { max-width: 560px; margin: 0 auto 32px; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, .7); } .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .cta-note { margin-top: 22px; font-size: 13.5px; color: rgba(255, 255, 255, .5); } /* ============================================================ ПОДВАЛ ============================================================ */ .landing-footer { padding: 56px 0 40px; border-top: 1px solid var(--l-line); text-align: left; color: var(--l-ink-3); background: var(--l-surface-2); } .footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 40px; padding-bottom: 32px; margin-bottom: 28px; border-bottom: 1px solid var(--l-line); } .footer-brand-logo { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: var(--l-ink); text-decoration: none; margin-bottom: 12px; } .footer-brand-text { font-size: 14px; line-height: 1.6; max-width: 280px; } .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .footer-col-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--l-ink); margin-bottom: 14px; } .footer-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; } .landing-footer .footer-links a, .landing-footer .footer-contacts a { font-size: 14px; color: var(--l-ink-3); text-decoration: none; transition: color .15s ease; } .landing-footer .footer-links a:hover, .landing-footer .footer-contacts a:hover { color: var(--l-ink); text-decoration: none; } .footer-contacts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; font-size: 13px; line-height: 1.6; } .footer-requisites { margin: 0; max-width: 640px; } .footer-copy { margin: 0; } /* ============================================================ ПУБЛИЧНЫЕ СТРАНИЦЫ (тарифы, оферта, контакты) ============================================================ */ .public-main { padding-top: 72px; } .pricing-hero { padding: 72px 0 40px; text-align: center; } .landing-body .pricing-title { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 700; letter-spacing: -0.035em; } .landing-body .pricing-subtitle { color: var(--l-ink-3); max-width: 640px; margin: 16px auto 0; line-height: 1.6; } .landing-body .package-card, .landing-body .price-table-wrap { border-radius: var(--l-radius); border-color: var(--l-line); } .landing-body .package-card { box-shadow: var(--l-shadow-sm); transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; } .landing-body .package-card:hover { transform: translateY(-3px); box-shadow: var(--l-shadow-md); } /* ============================================================ АДАПТИВНОСТЬ ============================================================ */ @media (max-width: 1060px) { :root { --l-section: 88px; } .hero-inner { grid-template-columns: 1fr; gap: 48px; } .hero-content { max-width: 620px; } .hero-visual { justify-self: start; max-width: 520px; } .feature-card-wide { grid-template-columns: 1fr; gap: 28px; padding: 28px 26px; } .audience-grid, .features-grid, .samples-grid, .steps-grid, .landing-pricing-grid { grid-template-columns: repeat(2, 1fr); } .feature-card-wide { grid-column: span 2; } .step-card:not(:last-child)::after { display: none; } .landing-stats-inner { grid-template-columns: repeat(2, 1fr); } } /* ⚠️ Ровно 768px — этой границей в style.css задано `text-align: center` для .hero-inner ещё со старого лендинга. Длинный абзац по центру читается хуже, поэтому возвращаем выключку влево именно в этой же точке. */ @media (max-width: 768px) { .hero-inner { text-align: left; } } @media (max-width: 860px) { .landing-nav { display: none; } #header-login-btn { display: none; } .landing-burger { display: flex; } .landing-header > .landing-container { gap: 12px; } .footer-top { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 720px) { :root { --l-section: 72px; } .landing-container { padding: 0 20px; } .hero { padding: 116px 0 68px; } .hero-title { letter-spacing: -0.03em; } .hero-subtitle { font-size: 1.0625rem; } .hero-actions { gap: 10px; } .hero-actions .btn { flex: 1 1 100%; } .hero-facts { gap: 8px 14px; font-size: 13.5px; } .hero-visual { max-width: none; } .hero-float { right: 8px; bottom: -14px; padding: 9px 14px; font-size: 12px; } .section-head { margin-bottom: 36px; } .audience-grid, .features-grid, .samples-grid, .steps-grid, .landing-pricing-grid { grid-template-columns: 1fr; gap: 16px; } .feature-card-wide { grid-column: span 1; } .landing-stats-inner { grid-template-columns: repeat(2, 1fr); } .landing-stat { padding: 20px 14px; } .landing-stat-value { font-size: 1.4rem; } .landing-stat-label { font-size: 12.5px; } .cta-band { padding: 72px 0 80px; } .cta-inner { padding: 48px 24px; border-radius: 22px; } .cta-actions .btn { flex: 1 1 100%; } .footer-cols { grid-template-columns: 1fr; gap: 24px; } .faq-item summary { padding: 18px 20px; font-size: 15px; } .faq-answer { padding: 0 20px 20px; } .sample-card { padding: 20px; } /* Узкая строка промпта: метка уходит к дорожке, цитата — во всю ширину, иначе фраза рвётся на пять строк рядом с пустым местом */ .prompt-row { flex-wrap: wrap; gap: 10px 12px; } .prompt-row-eq { order: 1; } .prompt-row-tag { order: 2; margin-left: auto; } .prompt-row-quote { order: 3; flex: 1 0 100%; } .public-main { padding-top: 60px; } } @media (max-width: 420px) { .landing-stats-inner { grid-template-columns: 1fr; } .hero-card { padding: 18px; } }