/*================================================== 1. ПЕРЕМЕННЫЕ И ТЕМЫ (Light & Dark) ==================================================*/ :root { --bg: #EAECE8; --dark: #2D4C3B; --accent: #C58B74; --accent-rgb: 197, 139, 116; /* Для эффектов прозрачности */ --link-color: #A64D32; --white: #FFFFFF; --text-main: #1A3326; --card-bg: rgba(255, 255, 255, 0.5); --border-color: rgba(45, 76, 59, 0.15); --btn-text: #FFFFFF; --error: #e74c3c; --success: #2ecc71; --email-highlight: #C28E5C; /* Насыщенный песочно-ореховый для светлой темы */ } /* Работает и через , и через */ .dark-mode { --bg: #1A2E24; --dark: #EAECE8; --accent: #D9A18C; --accent-rgb: 217, 161, 140; --link-color: #D9A18C; --white: #243D2F; --text-main: #EAECE8; --card-bg: rgba(45, 76, 59, 0.4); --border-color: rgba(234, 236, 232, 0.15); --btn-text: #1A2E24; --email-highlight: #E5C396; /* Фирменный яркий песочный цвет для темной темы */ } html { scroll-behavior: smooth; } /*================================================== 2. БАЗОВЫЕ СТИЛИ И ЗАЩИТА ОТ ГОРИЗОНТАЛЬНОГО СКРОЛЛА ==================================================*/ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* Не добавляем overflow-x: hidden сюда, чтобы не ломать position: sticky */ width: 100%; } body { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg); color: var(--text-main); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; width: 100%; overflow-x: hidden; /* Блокируем горизонтальный скролл только на уровне body */ transition: background-color 0.3s ease, color 0.3s ease; } /* Автоматический перенос длинных слов для предотвращения переполнения */ p, h1, h2, h3, h4, h5, h6, span, a { overflow-wrap: break-word; word-break: break-word; } .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; } .page-content { flex: 1; padding: 50px 0; } /*================================================== 3. ХЕДЕР (ШАПКА) И НАВИГАЦИЯ ==================================================*/ .main-header { background-color: var(--white); border-bottom: 1px solid var(--border-color); padding: 18px 0; position: sticky; top: 0; z-index: 100; transition: background-color 0.3s ease, border-color 0.3s ease; } .header-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; position: relative; } .logo { font-size: 1.35rem; font-weight: 700; color: var(--text-main); text-decoration: none; letter-spacing: -0.5px; } .logo span { font-weight: 400; color: var(--accent); } .nav-wrapper { display: flex; align-items: center; gap: 25px; } /* Главное меню навигации */ .main-nav { display: flex; align-items: center; gap: 12px; } .main-nav .nav-link { text-decoration: none; color: var(--text-main); opacity: 0.65; /* Приглушенный цвет для неактивных ссылок */ font-weight: 500; font-size: 0.95rem; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease; } .main-nav .nav-link:hover { color: var(--link-color); opacity: 1; /* Возвращаем яркость при наведении */ } /* Активная страница */ .main-nav .nav-link.active { color: var(--link-color); opacity: 1; /* Полная яркость для активной ссылки */ border-bottom-color: var(--link-color); font-weight: 600; } /* Разделители в меню */ .nav-divider { color: var(--text-main); opacity: 0.3; font-size: 0.9rem; user-select: none; } /* Переключатель языков */ .lang-switcher { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; } .lang-btn { text-decoration: none; color: var(--text-main); opacity: 0.65; /* Приглушенный цвет для неактивных языков */ font-weight: 500; transition: opacity 0.2s ease, color 0.2s ease; } .lang-btn:hover { opacity: 1; /* Возвращаем яркость при наведении */ } .lang-btn.active { opacity: 1; /* Полная яркость для выбранного языка */ font-weight: 700; color: var(--link-color); border-bottom: 2px solid var(--link-color); } .lang-divider { color: var(--text-main); opacity: 0.3; } /* Кнопка переключения темы */ .theme-toggle { background: transparent; border: none; cursor: pointer; font-size: 1.1rem; padding: 4px 8px; border-radius: 50%; line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .theme-toggle:hover { transform: scale(1.15); } /* На десктопе кнопка бургер скрыта */ .burger-menu { display: none; } /* ========================================== МОБИЛЬНАЯ НАВИГАЦИЯ И БУРГЕР-МЕНЮ (≤ 768px) ========================================== */ @media (max-width: 768px) { /* 1. ПЛАВАЮЩАЯ БУРГЕР-КНОПКА В ПРАВОМ НИЖНЕМ УГЛУ */ .burger-menu { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; position: fixed; bottom: 24px; right: 20px; top: auto; left: auto; z-index: 1000; width: 50px; height: 50px; padding: 14px; border-radius: 50%; cursor: pointer; /* Светлая тема */ background-color: var(--white); border: 1px solid var(--border-color); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); transition: transform 0.2s ease, background-color 0.3s ease; } .burger-menu:active { transform: scale(0.92); } /* Полоски бургера */ .burger-menu span { width: 100%; height: 2px; background-color: var(--text-main); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; } /* Анимация крестика */ .burger-menu.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger-menu.active span:nth-child(2) { opacity: 0; } .burger-menu.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Тёмная тема для кнопки */ .dark-mode .burger-menu { background-color: #1e2622; border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } /* 2. ВЫЕЗЖАЮЩАЯ СНИЗУ ШТОРКА (BOTTOM SHEET) */ .nav-wrapper { position: fixed; left: 0; right: 0; top: auto; bottom: -100%; /* Скрываем под экраном */ width: 100%; height: auto; background-color: var(--white); border-top-left-radius: 24px; border-top-right-radius: 24px; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25); padding: 16px 20px 40px 20px; z-index: 999; transform: none; transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; gap: 20px; } /* Активное состояние — выезд снизу */ .nav-wrapper.active { bottom: 0; } /* Индикатор-полоска сверху шторки */ .nav-wrapper::before { content: ''; width: 36px; height: 4px; background-color: rgba(0, 0, 0, 0.2); border-radius: 2px; margin-bottom: 4px; } /* Внутренние элементы навигации */ .main-nav { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .main-nav .nav-link { font-size: 1.1rem; font-weight: 600; text-decoration: none; padding: 6px 0; } .nav-divider, .lang-divider { display: none; } .lang-switcher { display: flex; flex-direction: row; align-items: center; gap: 12px; font-size: 1rem; } .lang-btn { font-size: 1.05rem; padding: 4px 10px; } /* Тёмная тема для шторки */ .dark-mode .nav-wrapper { background-color: #1a221e; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7); } .dark-mode .nav-wrapper::before { background-color: rgba(255, 255, 255, 0.25); } } /*================================================== 4. КОНТЕНТ, КНОПКИ И ВСТРОЕННАЯ ФОРМА ==================================================*/ .welcome-section { text-align: center; max-width: 700px; margin: 0 auto; background-color: var(--card-bg); padding: 40px 25px; border-radius: 16px; border: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); transition: background-color 0.3s ease, border-color 0.3s ease; } /* SEO заголовок */ .seo-title { font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 12px; } /* Динамическое приветствие */ .greeting-text { font-size: 2.3rem; font-weight: 700; line-height: 1.25; color: var(--text-main); margin-bottom: 18px; letter-spacing: -0.5px; } /* Подзаголовок */ .welcome-subtitle { font-size: 1.05rem; color: var(--text-main); opacity: 0.85; margin-bottom: 30px; line-height: 1.6; } /* Контейнер для кнопок (Мобильная версия по умолчанию — в столбик) */ .buttons-container { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 550px; margin: 0 auto; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: all 0.25s ease; cursor: pointer; white-space: nowrap; width: 100%; text-align: center; box-sizing: border-box; } /* Бумажное письмо / Кнопка отправки */ .btn-paper { background-color: var(--dark); color: var(--btn-text); border: 2px solid var(--dark); } .btn-paper:hover, .btn-paper:active { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } /* Электронное письмо */ .btn-digital { background-color: transparent; color: var(--text-main); border: 2px solid var(--dark); } .btn-digital:hover, .btn-digital:active { background-color: transparent; color: var(--accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } /* Встроенная форма в карточке welcome-section */ .inline-notify-form-container { margin: 20px 0; width: 100%; } /* По умолчанию на мобильных устройствах — колонка */ .welcome-inline-form { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; max-width: 520px; margin: 0 auto; width: 100%; } .inline-input { width: 100%; padding: 14px 20px; border-radius: 30px; border: 1.5px solid var(--border-color); background-color: var(--white); color: var(--text-main); font-size: 0.98rem; outline: none; box-sizing: border-box; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .dark-mode .inline-input { background-color: rgba(255, 255, 255, 0.05); } .inline-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2); } .inline-submit-btn { width: 100%; padding: 14px 26px; flex-shrink: 0; } /* Переключение формы в строчный режим для экранов от 576px */ @media (min-width: 576px) { .welcome-inline-form { flex-direction: row; } .inline-input { flex: 1 1 auto; width: auto; } .inline-submit-btn { width: auto; } } /* Десктопная версия: экраны от 768px (Кнопки встают РЯДОМ) */ @media (min-width: 768px) { .buttons-container { flex-direction: row; gap: 20px; } .buttons-container .btn { flex: 1; width: auto; } } /*================================================== 4.1 ТЕКСТОВЫЙ БЛОК О СЕРВИСЕ (ПОД КНОПКАМИ) ==================================================*/ .about-service-section { margin-top: 40px; padding-top: 30px; border-top: 1px dashed var(--border-color); text-align: left; max-width: 780px; /* Ограничиваем ширину текста для комфортного чтения */ margin-left: auto; /* Центрируем блок по горизонтали */ margin-right: auto; /* Центрируем блок по горизонтали */ } .about-service-section h2 { font-size: 1.45rem; font-weight: 700; color: var(--text-main); margin-bottom: 20px; text-align: center; line-height: 1.3; } .about-service-section h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-main); margin-top: 25px; margin-bottom: 14px; line-height: 1.35; } .about-service-section p { font-size: 1.05rem; color: var(--text-main); opacity: 0.9; line-height: 1.65; margin-bottom: 16px; } .about-service-section blockquote { margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--accent); background-color: var(--white); border-radius: 0 12px 12px 0; font-size: 1rem; color: var(--text-main); line-height: 1.5; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .dark-mode .about-service-section blockquote { background-color: rgba(255, 255, 255, 0.03); } .about-service-section blockquote strong { color: var(--accent); } .about-service-section .emotional-footer { text-align: center; margin-top: 25px; margin-bottom: 0; font-size: 1.05rem; font-weight: 600; color: var(--accent); opacity: 1; } /*================================================== 4.2. СТИЛИ ДЛЯ РЕКЛАМНОГО БЛОКА О СЕРВИСЕ ==================================================*/ .promo-features-block { background-color: var(--white); border: 1px solid var(--border-color); padding: 24px; border-radius: 16px; margin: 30px 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); } .dark-mode .promo-features-block { background-color: rgba(255, 255, 255, 0.03); } .promo-features-block h3 { margin-top: 0; margin-bottom: 18px; } .promo-features-list { list-style: none; padding-left: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; text-align: left !important; /* Выравнивание всего блока по левому краю */ } .promo-features-list li { font-size: 0.95rem; line-height: 1.5; color: var(--text-main); opacity: 0.92; display: flex; align-items: flex-start; gap: 8px; text-align: left !important; /* Выравнивание элементов по левому краю */ } /* Адаптив под 1 колонку */ @media (max-width: 768px) { .promo-features-list { grid-template-columns: 1fr; } } /* Принудительно выстраиваем элементы списка в обычный поток */ .promo-features-list li { display: block !important; text-align: left !important; } .promo-features-list li b, .promo-features-list li strong { display: inline !important; font-weight: bold; text-align: left !important; } .promo-cta-box { text-align: center; margin-top: 35px; padding: 30px 20px; background-color: var(--white); border: 1.5px solid var(--accent); border-radius: 20px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04); } .dark-mode .promo-cta-box { background-color: rgba(255, 255, 255, 0.03); } .promo-cta-box h4 { font-size: 1.25rem; font-weight: 700; color: var(--text-main); margin-bottom: 10px; } .promo-cta-box p { font-size: 0.95rem; margin-bottom: 22px; } .promo-main-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; background-color: var(--dark); color: var(--btn-text) !important; font-weight: 700; font-size: 1rem; text-decoration: none !important; border-radius: 30px; margin: 15px 0; border: 2px solid var(--dark); transition: all 0.25s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); } .promo-main-btn:hover, .promo-main-btn:active { background-color: var(--accent); border-color: var(--accent); color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .promo-security-note { font-size: 0.85rem; opacity: 0.8; margin-top: 22px; margin-bottom: 4px; } .promo-guarantees-note { font-size: 0.85rem; opacity: 0.85; font-weight: 600; color: var(--accent); margin-bottom: 0; } /*================================================== 5. ФУТЕР ==================================================*/ .main-footer { background-color: var(--white); color: var(--text-main); padding-top: 40px; margin-top: auto; border-top: 1px solid var(--border-color); transition: background-color 0.3s ease, border-color 0.3s ease; } .footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; padding-bottom: 30px; } .footer-col { flex: 1; min-width: 200px; } .footer-logo { font-size: 1.2rem; font-weight: bold; color: var(--text-main); text-decoration: none; } .footer-logo span { color: var(--accent); } .footer-col h4 { margin-bottom: 15px; font-size: 1rem; color: var(--text-main); } .footer-links ul { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 8px; } .footer-links a, .footer-contacts a { color: var(--link-color); text-decoration: none; transition: opacity 0.2s ease; } .footer-links a:hover, .footer-contacts a:hover { opacity: 0.8; } /* Колонка и оформление акцентной печати в футере */ .footer-stamp-col { display: flex; align-items: center; justify-content: center; min-width: 120px; } .footer-stamp-wrapper { display: inline-flex; align-items: center; justify-content: center; cursor: default; transition: transform 0.3s ease, opacity 0.3s ease; } .footer-stamp-wrapper:hover { transform: translateY(-4px) scale(1.05); opacity: 0.9; } .footer-stamp-img { width: 110px; height: 110px; object-fit: contain; /* Легкий наклон создает эффект настоящего ручного оттиска */ transform: rotate(-6deg); opacity: 0.85; transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease; } .footer-stamp-wrapper:hover .footer-stamp-img { transform: rotate(0deg) scale(1.06); opacity: 1; } /* Переворот цвета штемпеля в темной теме */ html.dark-mode .footer-stamp-img, .dark-mode .footer-stamp-img { filter: invert(1) brightness(0.9); opacity: 0.75; } html.dark-mode .footer-stamp-wrapper:hover .footer-stamp-img, .dark-mode .footer-stamp-wrapper:hover .footer-stamp-img { opacity: 0.95; } .footer-disclaimer { border-top: 1px dashed var(--border-color); padding-top: 15px; padding-bottom: 15px; font-size: 0.8rem; opacity: 0.7; line-height: 1.4; } .footer-bottom { background-color: var(--bg); padding: 15px 0; text-align: center; font-size: 0.85rem; opacity: 0.8; } .stamp-scroll-top { cursor: pointer; display: inline-block; /* Сохраняет размеры контейнера */ transition: transform 0.3s ease, opacity 0.3s ease; } .stamp-scroll-top:hover { transform: translateY(-4px) scale(1.05); opacity: 0.9; } /*================================================== 6. ОБЩАЯ АДАПТИВНОСТЬ И СЕТКИ (≤ 768px) ==================================================*/ @media (max-width: 768px) { .page-content { padding: 30px 0; } .welcome-section { margin: 10px auto; padding: 30px 18px; } .seo-title { font-size: 0.95rem; } .greeting-text { font-size: 1.75rem; } .welcome-subtitle { font-size: 1.05rem; } .welcome-inline-form { flex-direction: column; gap: 12px; } .inline-input { width: 100%; min-width: 100%; } .inline-submit-btn { width: 100%; } .about-service-section { margin-top: 30px; padding-top: 20px; } .about-service-section h2 { font-size: 1.25rem; } .about-service-section h3 { font-size: 1.1rem; } .about-service-section p { font-size: 1.05rem; } .about-service-section blockquote { padding: 12px 16px; font-size: 0.95rem; } .promo-main-btn { width: 100%; } .footer-content { flex-direction: column; gap: 25px; } .footer-stamp-col { margin-top: 10px; } .footer-stamp-img { width: 120px; height: 120px; } } /* Дополнительные исправления для узких экранов (≤ 480px) */ @media (max-width: 480px) { .footer-col:first-child { display: flex; flex-direction: column; align-items: flex-start; } .footer-logo-container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; flex-wrap: wrap; } .copyright-divider { display: none; } .footer-bottom { padding: 12px 10px; } .footer-bottom-content, .footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; } .footer-bottom span { white-space: nowrap; } } /*================================================== 7. ЭМОЦИОНАЛЬНЫЕ КНОПКИ ==================================================*/ .emotions-wrapper { margin-top: 35px; padding-top: 25px; border-top: 1px dashed var(--border-color); } .emotions-heading { font-size: 1.1rem; font-weight: 600; margin-bottom: 20px; color: var(--text-main); opacity: 0.9; } .emotions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-bottom: 15px; } /* Жесткий сброс для ссылок-кнопок на iOS и Android */ a.emotion-btn, a.emotion-btn:visited, a.emotion-btn:active, a.emotion-btn:hover { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 14px 10px !important; border-radius: 14px !important; text-decoration: none !important; color: var(--text-main) !important; background-color: var(--white) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.03); -webkit-appearance: none; -webkit-tap-highlight-color: transparent; transition: all 0.25s ease; } a.emotion-btn:hover, a.emotion-btn:active { transform: translateY(-2px); border-color: var(--accent) !important; box-shadow: 0 6px 15px rgba(0,0,0,0.08); } .emotion-icon { font-size: 1.6rem; margin-bottom: 6px; line-height: 1; } .emotion-label { font-size: 0.88rem; font-weight: 600; text-align: center; color: var(--text-main); } /* Нейтральная кнопка "Сложно определить" */ .neutral-emotion-container { margin-top: 15px; display: flex; justify-content: center; } a.emotion-neutral, a.emotion-neutral:visited, a.emotion-neutral:active { width: 100%; max-width: 280px; flex-direction: row !important; gap: 10px !important; background-color: transparent !important; border: 1.5px dashed var(--accent) !important; } a.emotion-neutral .emotion-icon { margin-bottom: 0 !important; font-size: 1.3rem; } /* Мобильная адаптация эмоций */ @media (max-width: 480px) { .emotions-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } a.emotion-btn { padding: 12px 8px !important; } .emotion-icon { font-size: 1.4rem; } .emotion-label { font-size: 0.82rem; } } /*================================================== 8. БЛОК КОПИРОВАНИЯ И МЯГКИЙ ОВЕРЛЕЙ ==================================================*/ .copy-fallback-block { margin-top: 30px; padding: 16px; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 12px; text-align: center; } .fallback-text { font-size: 0.9rem; color: var(--text-main); opacity: 0.85; margin-bottom: 6px; line-height: 1.4; } .fallback-email-display { font-family: monospace; font-size: 1rem; font-weight: 700; color: var(--link-color); letter-spacing: 0.5px; } /* Стили для кнопки скопировать */ .btn-copy { background-color: transparent; color: var(--text-main); border: 1.5px solid var(--border-color); padding: 12px 24px; border-radius: 30px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 8px; } .btn-copy:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } /* Затемняющий фон на весь экран при копировании */ .copy-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 999999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } /* Центральное модальное окно */ .copy-modal { background-color: var(--white); color: var(--text-main); padding: 24px 32px; border-radius: 20px; border: 1px solid var(--border-color); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); text-align: center; max-width: 85vw; transform: scale(0.9); transition: transform 0.2s ease; } .copy-icon { font-size: 2.2rem; margin-bottom: 8px; line-height: 1; } .copy-message { font-size: 1.05rem; font-weight: 600; } /* Состояние активации */ .copy-overlay.show { opacity: 1; pointer-events: auto; } .copy-overlay.show .copy-modal { transform: scale(1); } /*================================================== 9. БЛОК FAQ (АККОРДЕОН) ==================================================*/ .faq-section { margin-top: 50px; padding: 20px 20px; width: 100%; } .faq-title { text-align: center; font-size: 1.6rem; font-weight: 700; margin-bottom: 25px; color: var(--text-main); } .faq-accordion { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; width: 100%; } .faq-item { background-color: var(--white); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .faq-item[open] { border-color: var(--accent); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); } .faq-question { padding: 16px 20px; font-size: 1rem; font-weight: 600; color: var(--text-main); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; user-select: none; } .faq-question::-webkit-details-marker { display: none; } .faq-icon { font-size: 0.85rem; transition: transform 0.3s ease; opacity: 0.6; } .faq-item[open] .faq-icon { transform: rotate(90deg); color: var(--accent); opacity: 1; } .faq-answer { padding: 0 20px 16px 20px; font-size: 0.93rem; line-height: 1.5; color: var(--text-main); opacity: 0.85; border-top: 1px dashed transparent; white-space: pre-line; } .faq-item[open] .faq-answer { border-top-color: var(--border-color); padding-top: 12px; } .faq-answer p { margin-bottom: 10px; } .faq-answer ol, .faq-answer ul { margin: 8px 0 8px 20px; padding-left: 0; } .faq-answer li { margin-bottom: 6px; line-height: 1.5; } .faq-answer li ul, .faq-answer li ol { margin-top: 6px; margin-bottom: 6px; } /*================================================== 10. СТИЛИ ДЛЯ EMAIL В ФУТЕРЕ И ИКОНКИ КОПИРОВАНИЯ ==================================================*/ .footer-email-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .footer-email-row .email-link { color: var(--link-color); text-decoration: none; /* Убрано подчеркивание */ transition: opacity 0.2s ease, text-decoration 0.2s ease; } .footer-email-row .email-link:hover { opacity: 0.8; } /* Кнопка с иконкой два листика */ .copy-btn { background: transparent; border: none; padding: 3px 5px; cursor: pointer; color: var(--text-main); opacity: 0.65; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; -webkit-tap-highlight-color: transparent; transition: opacity 0.2s ease, transform 0.15s ease, background-color 0.2s ease; } .copy-btn:hover { opacity: 1; color: var(--accent); background-color: rgba(0, 0, 0, 0.04); } .dark-mode .copy-btn:hover { background-color: rgba(255, 255, 255, 0.08); } .copy-btn:active { transform: scale(0.9); } .copy-btn svg { display: block; } /* Подсказка о бонусе под кнопкой запуска */ .launch-bonus { margin-top: 16px; font-size: 0.88rem; color: var(--text-main); opacity: 0.85; line-height: 1.4; } .launch-bonus-1 { margin-top: 16px; margin-bottom: 16px; font-size: 0.88rem; color: var(--text-main); opacity: 0.85; line-height: 1.4; } .launch-bonus strong { color: var(--accent); } /*================================================== 11. МОДАЛЬНОЕ ОКНО РЕЗУЛЬТАТА (УСПЕХ / ОШИБКА) ==================================================*/ .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; /* Поддержка мобильных высот */ background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 999999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; /* Плавное затухание для первого показа */ } .modal-card { background-color: var(--white); color: var(--text-main); padding: 35px 25px; border-radius: 20px; border: 1px solid var(--border-color); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); width: 90%; max-width: 440px; position: relative; text-align: center; transform: scale(0.92); transition: transform 0.3s ease; /* Плавное увеличение для первого показа */ } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-overlay.active .modal-card { transform: scale(1); } /* Если пользователь уже подписан / открывает окно не в первый раз */ .modal-overlay.no-animation, .modal-overlay.no-animation .modal-card { transition: none !important; /* Мгновенное появление без задержки */ } .modal-close { position: absolute; top: 12px; right: 18px; background: transparent; border: none; font-size: 1.8rem; color: var(--text-main); cursor: pointer; opacity: 0.6; line-height: 1; transition: opacity 0.2s ease; } .modal-close:hover { opacity: 1; } .modal-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; } .modal-desc { font-size: 0.92rem; opacity: 0.85; margin-bottom: 22px; line-height: 1.5; } .modal-success { padding: 10px 0; animation: fadeIn 0.3s ease; } .success-icon { font-size: 2.5rem; margin-bottom: 10px; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /*================================================== 12. КНОПКА ОПЛАТЫ (ПОДДЕРЖКА ЗА ЧАШКОЙ КОФЕ) ==================================================*/ a.bmc-button-wrapper { margin-top: 16px; margin-bottom: 8px; background-color: var(--dark); color: var(--btn-text) !important; border: 2px solid var(--dark); padding: 10px 22px; border-radius: 25px; font-size: 0.92rem; font-weight: 600; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; transition: all 0.25s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } a.bmc-button-wrapper:hover, a.bmc-button-wrapper:active { background-color: var(--accent); border-color: var(--accent); color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } @media (max-width: 576px) { a.bmc-button-wrapper { width: 100%; justify-content: center; } } /*================================================== 13. ОБЕРТКА ДЛЯ EMAIL В МОДАЛЬНОМ ОКНЕ ==================================================*/ .user-entered-email-wrap { margin: 8px 0 12px 0; text-align: center; width: 100%; } #userEnteredEmail, .user-entered-email { color: var(--email-highlight) !important; font-size: 1.08em; font-weight: 700; word-break: break-all; display: inline-block; } .copyright-divider { margin: 0 8px; opacity: 0.5; } /*================================================== СТИЛИ ДЛЯ ОВРАЧНЫХ ТЕКСТОВЫХ ССЫЛОК (INLINE LINKS) ==================================================*/ /* Базовое состояние ссылки в контенте */ /* Основной стиль ссылок */ p a, .main-footer a, .page-content a:not(.btn):not(.nav-link):not(.lang-btn):not(.emotion-btn):not(.bmc-button-wrapper) { color: var(--link-color); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.4); text-underline-offset: 3px; font-weight: 500; transition: color 0.2s ease, text-decoration-color 0.2s ease, opacity 0.2s ease; } /* Состояние при наведении и нажатии */ p a:hover, .main-footer a:hover, .page-content a:not(.btn):not(.nav-link):not(.lang-btn):not(.emotion-btn):not(.bmc-button-wrapper):hover { color: var(--accent); text-decoration-color: var(--accent); opacity: 0.9; } /* Состояние фокуса для доступности (управление с клавиатуры) */ p a:focus-visible, .page-content a:not(.btn):not(.nav-link):not(.lang-btn):not(.emotion-btn):not(.bmc-button-wrapper):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .promo-projects-title { margin-top: 15px; margin-bottom: 6px; } .promo-services-links { list-style: none; /* Убираем стандартные круглые маркеры */ padding-left: 0; margin-left: 0; } .promo-services-links li { position: relative; padding-left: 1.2em; /* Отступ слева под тире */ } .promo-services-links li::before { content: "—"; /* Длинное тире в начале строки */ position: absolute; left: 0; color: inherit; } /*============================================================ СТИЛИ ДЛЯ ПЕРЕНОСА НА МОБИЛКАХ И В ОДНУ СТРОКУ НА КОМПЬЮТЕРЕ ==============================================================*/ /* Для коротких заголовков и интро: строго в 1 строку на ПК */ .digital-seo-title, .paper-seo-title, .payment-intro .welcome-subtitle .promo-security-note { white-space: nowrap; } /* На мобильных экранах разрешаем красивый перенос */ @media (max-width: 768px) { .digital-seo-title, .paper-seo-title, .payment-intro .welcome-subtitle .promo-security-note { white-space: normal; } } .custom-select-wrapper { position: relative; display: inline-block; width: 100%; } .custom-select { width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: rgba(255, 255, 255, 0.1); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); padding: 10px 38px 10px 16px; border-radius: 12px; font-size: 0.92rem; font-weight: 500; outline: none; cursor: pointer; backdrop-filter: blur(10px); transition: all 0.2s ease; } .custom-select:hover, .custom-select:focus { border-color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.15); } /* Стилизация опций внутри выпадающего списка */ .custom-select option { background-color: #12291d; /* Темно-зеленый под ваш фон */ color: #ffffff; padding: 10px; } /* Собственная кастомная стрелочка */ .custom-select-wrapper::after { content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #ffffff; pointer-events: none; } /*================================================ --- Стили для шагов оплаты (Payment Guide) --- =================================================*/ .payment-guide-section .step-number { font-size: 1.5rem; font-weight: 700; color: var(--accent, #22c55e); margin-bottom: 8px; text-align: center; } .payment-guide-section .step-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; } .payment-guide-section .step-desc { font-size: 0.93rem; opacity: 0.9; margin-bottom: 12px; } .payment-guide-section .step-image-wrapper { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color, #e2e8f0); } .payment-guide-section .step-image { width: 100%; height: auto; display: block; } /*============================================================ ИЗОЛИРОВАННЫЕ СТИЛИ ДЛЯ СТРАНИЦЫ ОТКРЫТОК ==============================================================*/ /* Главная белая карточка-конверт */ .postcards-section { width: 100%; margin: 0 auto; padding: 40px 32px; background-color: var(--white); border-radius: 24px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); box-sizing: border-box; } /* Сброс ограничений внутреннего контейнера, чтобы он не раздувал ширину */ .postcards-section .container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* SEO Заголовок и подзаголовок */ .seo-title { font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 12px; text-align: center; } .postcards-section .welcome-subtitle { font-size: 2.1rem; font-weight: 700; line-height: 1.25; color: var(--text-main); margin-bottom: 28px; letter-spacing: -0.5px; text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; } /* --- Категории (Чипы / Брендовые Pills) --- */ .postcards-section .category-pills-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; } .postcards-section .category-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; background-color: transparent; color: var(--text-main); border: 2px solid var(--border-color); border-radius: 30px; font-size: 0.88rem; font-weight: 500; text-decoration: none !important; transition: all 0.25s ease; } .postcards-section .category-pill:hover, .postcards-section .category-pill:active { background-color: transparent; color: var(--accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); } /* 🎯 АКТИВНАЯ КНОПКА (СВЕТЛАЯ И ТЕМНАЯ ТЕМЫ) 🎯 */ .postcards-section button.category-pill.active, .postcards-section a.category-pill.active, .postcards-section .category-pill.active { background-color: #1A3326 !important; color: #FFFFFF !important; border-color: #0D1A13 !important; font-weight: 600 !important; } .dark-mode .postcards-section button.category-pill.active, .dark-mode .postcards-section a.category-pill.active, .dark-mode .postcards-section .category-pill.active { background-color: #EAECE8 !important; color: #1A3326 !important; border-color: #94A3B8 !important; } /* --- Сетка: РОАВНО 2 КОЛОНКИ НА ЭКРАНЕ --- */ .postcards-section .postcards-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* Жестко 2 колонки */ gap: 24px; } .postcards-section .postcard-card { background-color: var(--card-bg); border-radius: 16px; border: 1px solid var(--border-color); overflow: hidden; display: flex; flex-direction: column; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } .postcards-section .postcard-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } .postcards-section .card-image-wrapper { aspect-ratio: 4/3; overflow: hidden; position: relative; background-color: var(--border-color); } .postcards-section .card-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .postcards-section .postcard-card:hover .card-image-wrapper img { transform: scale(1.05); } .postcards-section .card-badge { position: absolute; top: 8px; left: 12px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .postcards-section .card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .postcards-section .card-title { font-size: 1.25rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; line-height: 1.3; } .postcards-section .card-subtitle { font-size: 0.95rem; color: var(--accent); margin-bottom: 12px; font-weight: 600; } .postcards-section .card-text { font-size: 1.05rem; line-height: 1.6; color: var(--text-main); opacity: 0.85; margin-bottom: 24px; font-weight: 400 !important; } /* Кнопка заказа */ .postcards-section .promo-main-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 20px; background-color: var(--white); color: var(--text-main) !important; border: 2px solid var(--border-color); border-radius: 12px; font-size: 0.95rem; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: all 0.25s ease; } .postcards-section .promo-main-btn:hover, .postcards-section .promo-main-btn:active { background-color: transparent; color: var(--accent) !important; border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); } /* --- Блок CTA --- */ .postcards-section .promo-cta-box { margin-top: 40px; padding: 32px 20px; background-color: var(--card-bg); border: 1px dashed var(--border-color); border-radius: 16px; text-align: center; } .postcards-section .badge-dev { display: inline-block; background: rgba(225, 29, 72, 0.15); color: #f43f5e; font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; margin-bottom: 12px; } .postcards-section .promo-cta-box h4 { font-size: 1.2rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; } .postcards-section .promo-cta-box p { font-size: 0.9rem; color: var(--text-main); opacity: 0.7; max-width: 520px; margin: 0 auto 20px auto; } .postcards-section .btn-disabled { opacity: 0.6; cursor: not-allowed; padding: 10px 24px; border-radius: 20px; border: 1px solid var(--border-color); background: transparent; color: var(--text-main); font-weight: 600; font-size: 0.9rem; } .postcards-section .empty-state { text-align: center; padding: 40px 0; color: var(--text-main); opacity: 0.7; } /* Мобильная адаптивность (на телефонах переходит в 1 колонку) */ @media (max-width: 768px) { .postcards-section { padding: 24px 16px; border-radius: 16px; } .seo-title { font-size: 0.95rem; } .postcards-section .welcome-subtitle { font-size: 1.6rem; } .postcards-section .postcards-grid { grid-template-columns: 1fr; /* 1 колонка на моб экранах */ } } /*================================================== Формат поддержки ====================================================*/ .formats-section { max-width: 900px; margin: 40px auto; padding: 0 20px; } .section-title { text-align: center; font-size: 28px; color: #2d3748; margin-bottom: 8px; } .section-subtitle { text-align: center; color: #718096; margin-bottom: 32px; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .format-card { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.2s ease, box-shadow 0.2s ease; } .format-card.highlight { border: 2px solid #007bff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; } .card-item { margin-bottom: 16px; } .item-label { font-size: 12px; text-transform: uppercase; color: #888; font-weight: 600; display: block; margin-bottom: 4px; } .card-footer { margin-top: 24px; } .btn-full { width: 100%; text-align: center; display: block; } /*================================================== КАРТОЧКИ ФОРМАТОВ ПОДДЕРЖКИ ====================================================*/ .formats-section { max-width: 900px; margin: 40px auto; padding: 0 20px; width: 100%; } .formats-section .section-title { text-align: center; font-size: 1.8rem; font-weight: 700; color: var(--text-main); margin-bottom: 8px; line-height: 1.3; } .formats-section .section-subtitle { text-align: center; font-size: 1.05rem; color: var(--text-main); opacity: 0.85; margin-bottom: 35px; line-height: 1.5; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; width: 100%; } .format-card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease; } .format-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06); } /* Выделенная акцентная карточка */ .format-card.highlight { border: 2px solid var(--accent); box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.12); } .card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); } .card-header h3 { font-size: 1.25rem; font-weight: 700; color: var(--text-main); margin: 0; } /* Бейджи стоимости в шапке карточки */ .badge { font-size: 0.85rem; font-weight: 700; padding: 6px 12px; border-radius: 20px; white-space: nowrap; } .badge.free { background-color: rgba(45, 76, 59, 0.1); color: var(--dark); border: 1px solid var(--border-color); } .dark-mode .badge.free { background-color: rgba(234, 236, 232, 0.1); color: var(--text-main); } .badge.paid { background-color: rgba(var(--accent-rgb), 0.15); color: var(--link-color); border: 1px solid var(--accent); } /* Содержимое карточки */ .card-body { flex: 1; } .card-item { margin-bottom: 18px; } .card-item:last-child { margin-bottom: 0; } .item-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent); font-weight: 700; display: block; margin-bottom: 4px; } .card-item p { font-size: 0.98rem; color: var(--text-main); opacity: 0.9; line-height: 1.5; margin: 0; } /* Подвал карточки с кнопками */ .card-footer { margin-top: 28px; } .btn-full { width: 100%; text-align: center; } .btn-outline { background-color: transparent; color: var(--text-main); border: 2px solid var(--dark); } .btn-outline:hover, .btn-outline:active { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .btn-primary { background-color: var(--dark); color: var(--btn-text) !important; border: 2px solid var(--dark); } .btn-primary:hover, .btn-primary:active { background-color: var(--accent); border-color: var(--accent); color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } /* Мобильная адаптация */ @media (max-width: 768px) { .formats-section { margin: 25px auto; padding: 0 16px; } .formats-section .section-title { font-size: 1.45rem; } .formats-section .section-subtitle { font-size: 0.98rem; margin-bottom: 25px; } .cards-grid { grid-template-columns: 1fr; gap: 16px; } .format-card { padding: 20px 18px; } .card-header h3 { font-size: 1.15rem; } } /*================================================== БЛОК ДЫХАТЕЛЬНОГО ТРЕНАЖЕРА (АНТИСТРЕСС) ==================================================*/ .anti-stress-box { display: flex; flex-direction: column; align-items: center; padding: 30px 20px; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 16px; margin: 30px 0; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); transition: background-color 0.3s ease, border-color 0.3s ease; } .dark-mode .anti-stress-box { background-color: rgba(255, 255, 255, 0.03); } .anti-stress-title { margin-bottom: 20px; color: var(--text-main); font-size: 1.05rem; font-weight: 600; opacity: 0.9; line-height: 1.4; } /* Контейнер для круга */ .breathing-circle-wrapper { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; margin: 15px auto; } /* Сам круг */ .breathing-circle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(var(--accent-rgb), 0.15); border: 2px solid var(--accent); border-radius: 50%; transform: scale(0.7); opacity: 0.5; /* Плавные переходы размеров под фазы в JS */ transition: transform 4s ease-in-out, opacity 4s ease-in-out; } /* Состояния круга, управляемые из JS */ .breathing-circle.inhale { transform: scale(1.15); opacity: 0.95; transition-duration: 4s; /* Вдох */ } .breathing-circle.pause { /* На паузе сохраняется текущий размер */ transition-duration: 2s; /* Пауза */ } .breathing-circle.exhale { transform: scale(0.7); opacity: 0.5; transition-duration: 4s; /* Выдох */ } /* Текст внутри круга */ .breathing-text { position: relative; z-index: 2; font-weight: 700; font-size: 1rem; color: var(--accent); letter-spacing: 0.5px; text-transform: uppercase; user-select: none; pointer-events: none; } /* Контейнер для кнопки */ .breathing-controls { margin-top: 15px; text-align: center; } /* Стилизация кнопки Start/Stop (для классов .btn-breathing-start и .breathing-toggle-btn) */ .btn-breathing-start, .breathing-toggle-btn { appearance: none; -webkit-appearance: none; outline: none; border: none; display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 12px 32px; font-family: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.4; color: #ffffff; background-color: var(--accent, #4a7c59); border-radius: 30px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease; user-select: none; } /* Эффект при наведении */ .btn-breathing-start:hover, .breathing-toggle-btn:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } /* Эффект при клике */ .btn-breathing-start:active, .breathing-toggle-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Состояние, когда тренажер активен (Кнопка «Остановить») */ .btn-breathing-start.active, .breathing-toggle-btn.active { background-color: #d9534f; } /* Подсказка и статус под тренажером */ .anti-stress-hint, .breathing-status { margin-top: 15px; font-size: 0.88rem; color: var(--text-sub, #666); font-style: italic; text-align: center; line-height: 1.4; opacity: 0.85; min-height: 1.4em; } .breathing-circle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(var(--accent-rgb), 0.15); border: 2px solid var(--accent); border-radius: 50%; transform: scale(0.7); opacity: 0.5; will-change: transform, opacity; /* Аппаратное ускорение на телефонах */ transition: transform 4s ease-in-out, opacity 4s ease-in-out; } /* ========================================== 14. privacy (Политика конфиденциальности) ==========================================*/ /* Контейнер для документов */ .legal-container { max-width: 800px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border-color); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 48px 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); text-align: left; } /* Оформление типографики внутри документа */ .legal-container h1 { font-size: 32px; color: var(--dark); margin-bottom: 8px; font-weight: 800; } .legal-container .last-updated { font-size: 14px; opacity: 0.7; margin-bottom: 32px; } .legal-container h2, .legal-container h3 { color: var(--dark); margin-top: 28px; margin-bottom: 12px; font-weight: 700; } .legal-container p { margin-bottom: 16px; font-size: 15px; } .legal-container ul, .legal-container ol { margin-bottom: 16px; padding-left: 24px; } .legal-container li { margin-bottom: 8px; font-size: 15px; } .legal-container a { color: var(--link-color); text-decoration: underline; } .legal-container hr { border: 0; height: 1px; background: var(--border-color); margin: 32px 0; } /* Кнопка возврата внизу страницы */ .back-nav { margin-top: 40px; text-align: center; } .legal-btn { display: inline-block; padding: 12px 24px; background-color: var(--dark); color: var(--btn-text); text-decoration: none; border-radius: 10px; font-size: 14px; font-weight: 600; transition: transform 0.2s ease, opacity 0.2s ease; } .legal-btn:hover { opacity: 0.9; transform: translateY(-2px); } @media (max-width: 600px) { .legal-container { padding: 24px 20px; } .legal-container h1 { font-size: 24px; } } /* Дисклеймер */ .footer-disclaimer { margin-top: 20px; margin-bottom: 12px; padding-top: 16px; border-top: 1px dashed rgba(0, 0, 0, 0.12); font-size: 0.85rem; line-height: 1.5; color: #666666f; } /* Юридическая строка над копирайтом */ .footer-legal-bar { text-align: center; padding: 8px 0 16px 0; font-size: 0.82rem; } .footer-legal-bar a { color: #666666; text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.4); text-underline-offset: 3px; font-weight: 500; transition: color 0.2s ease, text-decoration-color 0.2s ease, opacity 0.2s ease; } .footer-legal-bar a:hover { color: var(--accent); text-decoration-color: var(--accent); opacity: 0.9; } .legal-dot { margin: 0 8px; color: #cccccc; } /* Сброс отступа для полосы копирайта */ .footer-bottom { margin-top: 0; } /*================================================== КАРТОЧКИ ФОРМАТОВ (АДАПТИРОВАНО ПОД ПЕРЕМЕННЫЕ) ====================================================*/ /* Заголовок секции */ .formats-section-title { text-align: center; font-size: 1.25rem; font-weight: 700; color: var(--text-main); margin: 35px 0 20px 0; line-height: 1.3; } /* Сетка карточек */ .formats-container, .cards-grid.formats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; width: 100%; margin: 20px 0; } /* Карточка-ссылка */ a.format-card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease; text-decoration: none !important; color: var(--text-main); cursor: pointer; text-align: left !important; } /* Убираем подчеркивание для всех дочерних элементов */ a.format-card *, a.format-card *:hover { text-decoration: none !important; } /* Состояния наведения */ a.format-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06); } /* Подсвеченная карточка (если требуется акцент на одной из них) */ a.format-card.highlight { border: 2px solid var(--accent); box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.12); } /* Шапка карточки */ .format-card-header, .card-header.format-card-header { display: flex; justify-content: flex-start; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); text-align: left !important; } .format-card-header h3, .card-header.format-card-header h3 { font-size: 1.25rem; font-weight: 700; color: var(--text-main); margin: 0; display: flex; align-items: center; gap: 8px; text-align: left !important; } .format-icon { font-size: 1.4rem; } /* Субтитр / Подзаголовок */ .format-subtitle { font-size: 0.95rem; color: var(--text-main); opacity: 0.85; margin: 0 0 16px 0; line-height: 1.4; text-align: left !important; } /* Блок "Для кого" с выделенной левой полосой */ .format-for-whom, .card-item.format-for-whom { margin-bottom: 18px; background: rgba(0, 0, 0, 0.03); padding: 12px 14px; border-radius: 10px; border-left: 3px solid var(--accent); text-align: left !important; } .format-for-whom strong { color: var(--text-main); font-weight: 600; } /* Стилизация если внутри используется .item-label */ .format-for-whom .item-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent); font-weight: 700; display: block; margin-bottom: 4px; text-align: left !important; } .format-for-whom p { font-size: 0.92rem; color: var(--text-main); opacity: 0.9; line-height: 1.45; margin: 0; text-align: left !important; } /* Список фич */ .format-features { list-style: none; padding: 0; margin: 0 0 20px 0; flex-grow: 1; text-align: left !important; } .format-features li { font-size: 0.9rem; color: var(--text-main); opacity: 0.9; margin-bottom: 8px; position: relative; padding-left: 18px; text-align: left !important; } .format-features li::before { content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: bold; } /* Ссылка / кнопка в подвале карточки */ .format-card-link, .card-footer.format-card-link { font-size: 0.9rem; font-weight: 600; color: var(--text-main); margin-top: auto; padding-top: 10px; text-align: left !important; transition: color 0.2s ease; } a.format-card:hover .format-card-link { color: var(--accent); } /* Стилизация для блоков в темной теме через классы и медиавыражения */ body.dark-theme .format-for-whom, [data-theme="dark"] .format-for-whom, .dark-mode .format-for-whom { background: rgba(255, 255, 255, 0.05); } @media (prefers-color-scheme: dark) { .format-for-whom { background: rgba(255, 255, 255, 0.05); } } /* Адаптивность для мобильных устройств */ @media (max-width: 768px) { .formats-section-title { font-size: 1.2rem; margin: 25px 0 15px 0; } .formats-container, .cards-grid.formats-container { grid-template-columns: 1fr; gap: 16px; } a.format-card { padding: 20px 18px; } .format-card-header h3, .card-header.format-card-header h3 { font-size: 1.15rem; } }