/* ============================================================ PetСпутник — глобальные стили ------------------------------------------------------------ Шрифты (Nunito, Rubik) и иконки (Phosphor) подключаются через CDN в файла index.html. Здесь живут только глобальные правила: сбросы, базовые стили страницы и @keyframes для анимаций. Вёрстка секций свёрстана инлайн-стилями прямо в index.html — ищи их по комментариям-разделителям (HEADER, HERO, FEATURES…). ============================================================ */ /* ---- Палитра бренда (для справки и будущего рефакторинга) ---- Сейчас цвета заданы инлайн в разметке. При желании постепенно заменяй их на var(--…), чтобы менять тему в одном месте. */ :root { --bg-grad-1: #f3eefc; --bg-grad-2: #f1f0fb; --bg-grad-3: #eef7f3; --bg-grad-4: #eaf6f1; --text: #2b2150; --text-muted: #5b5286; --text-soft: #6b6396; --accent: #7a5fd0; --accent-strong: #6b4fc4; --selection-bg: #cdbdf6; --selection-fg: #241a44; } /* ---- Базовые сбросы ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: #cdbdf6; color: #241a44; } /* ---- Анимации ---- */ @keyframes riseIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } } @keyframes riseInPhone { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes floatY2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(24px, -22px) scale(1.08); } } @keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-26px, 18px) scale(1.05); } } @keyframes spinOrbit { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes pulseDot { 0%, 100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } } /* ============================================================ Адаптив (планшеты и телефоны) ------------------------------------------------------------ Базовая вёрстка свёрстана инлайн-стилями под десктоп, поэтому мобильные правила переопределяют ключевые контейнеры через !important. Классы-хуки расставлены в index.html: .hero, .split — двухколоночные блоки → одна колонка .trust-grid — полоса из 4 плиток → 2 .cards-2 / .cards-3 — сетки карточек внутри секций .section-title — заголовки секций (h2) .hero-title / .cta-title — крупные заголовки .cta-card — карточка призыва к действию (отступы) .floaty — плавающие подсказки у телефонов .nav-link — текстовые пункты меню в шапке .media-col — колонка со скриншотом (на мобильном уходит под текст) .store-item — обёртка кнопки-бейджа магазина (равная ширина) ============================================================ */ /* Якоря с поправкой на липкую шапку (чтобы заголовок не прятался под ней) */ :where(section[id], #top) { scroll-margin-top: 90px; } /* ---- Планшеты и уже: раскладка в одну колонку ---- */ @media (max-width: 900px) { .hero, .split { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; } .hero { padding-top: 32px !important; } /* в секциях «Питомцы» и «ИИ» скриншот должен идти после текста */ .media-col { order: 2 !important; } .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* min-width:0 не даёт длинным словам распирать грид-ячейки (grid blowout) */ .hero > *, .split > *, .trust-grid > *, .cards-2 > *, .cards-3 > * { min-width: 0 !important; } /* текст внутри плиток не вылезает за рамки (flex-элемент тоже должен сжиматься) */ .trust-grid > div > div { min-width: 0 !important; overflow-wrap: anywhere; } /* при стекинге плавающие подсказки теряют привязку к телефону — скрываем */ .floaty { display: none !important; } } /* ---- Телефоны ---- */ @media (max-width: 640px) { /* в шапке прячем текстовые ссылки, оставляем логотип и кнопку «Скачать» */ .nav-link { display: none !important; } /* ужимаем шапку, чтобы логотип и кнопка влезали по ширине */ .site-header { padding: 12px !important; } .site-header > div { gap: 10px !important; padding: 8px 10px 8px 12px !important; } .brand-name { font-size: 18px !important; } .nav-cta { padding: 9px 14px !important; font-size: 14px !important; } .nav-cta span { display: none !important; } /* бейдж «скоро» в шапке прячем */ /* компактнее заголовки */ .hero-title { font-size: 38px !important; } .section-title { font-size: 30px !important; } .cta-title { font-size: 32px !important; } /* меньше отступов между блоками (секции стояли слишком далеко друг от друга) */ .hero { padding: 26px 20px 30px !important; gap: 26px !important; } .split { padding: 26px 20px !important; gap: 24px !important; } .cta-card { padding: 40px 22px !important; } #health { padding-top: 10px !important; padding-bottom: 10px !important; } /* сетка статистики «Здоровья»: 3 → 2 колонки */ .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* кнопки-бейджи скачивания одинаковой ширины (фикс. ширина во всех секциях) */ .store-item { width: 100% !important; max-width: 280px !important; } .store-item > a { width: 100% !important; min-width: 0 !important; } } /* ---- Узкие телефоны ---- */ @media (max-width: 470px) { .hero-title { font-size: 33px !important; } .section-title { font-size: 26px !important; } /* плитки и карточки в один столбец (на узком 2 колонки слишком тесные) */ .trust-grid { grid-template-columns: minmax(0, 1fr) !important; } .cards-2 { grid-template-columns: minmax(0, 1fr) !important; } }