/* examples-page.css Жёстко перекрываем базовые цвета ТОЛЬКО на странице с 4 разделами. Работает, если на этой странице у есть класс .page-examples и файл подключён ПОСЛЕ main2.css */ /* На всякий: убираем возможный общий фон у main/section */ body.page-examples main, body.page-examples section { background: transparent !important; } /* Общие настройки для наших 4 блоков */ body.page-examples #consultations, body.page-examples #recommendations, body.page-examples #family-diagnostics, body.page-examples #patho-diagnostics { position: relative; border-radius: 24px !important; padding: 60px 0 !important; margin: 40px 0 !important; overflow: hidden; } /* 1. Пример консультаций — голубой */ body.page-examples #consultations { background-color: #E0F2FE !important; /* светло-голубой */ } /* 2. Пример рекомендаций — мягкий жёлтый */ body.page-examples #recommendations { background-color: #FEF3C7 !important; /* тёплый жёлтый */ } /* 3. Пример диагностики семьи — сиреневый */ body.page-examples #family-diagnostics { background-color: #EDE9FE !important; /* нежный сиреневый */ } /* 4. Пример патопсихологической диагностики — зелёный */ body.page-examples #patho-diagnostics { background-color: #DCFCE7 !important; /* мягкий зелёный */ } /* Чтоб текст читался нормально поверх цветного фона */ body.page-examples #consultations .section-title--center, body.page-examples #recommendations .section-title--center, body.page-examples #family-diagnostics .section-title--center, body.page-examples #patho-diagnostics .section-title--center { color: #0F172A !important; } body.page-examples #consultations p, body.page-examples #consultations li, body.page-examples #recommendations p, body.page-examples #recommendations li, body.page-examples #family-diagnostics p, body.page-examples #family-diagnostics li, body.page-examples #patho-diagnostics p, body.page-examples #patho-diagnostics li { color: #111827 !important; } /* ======= CSS ДЛЯ VIEWER И КРУПНОЙ КНОПКИ ======= */ /* Увеличенная кнопка-бейдж (как раньше) */ .badge-large { font-size: 18px !important; padding: 12px 24px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center; justify-content: center; font-weight: 600 !important; line-height: 1.2 !important; background: #F3E8FF !important; color: #4B2E83 !important; border: 2px solid #E4D2FF !important; cursor: pointer; text-decoration: none; transition: all .2s ease; } .badge-large:hover { background: #E9D5FF !important; border-color: #D8BFFF !important; color: #3B2372 !important; transform: translateY(-1px); } .badge-large:active { transform: translateY(0); opacity: .85; } /* Фуллскрин-оверлей */ .pdfjs-viewer { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; justify-content: center; align-items: center; z-index: 99999; } /* Окно */ .pdfjs-window { position: relative; width: 95%; height: 90vh; max-width: 960px; background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } /* Кнопка закрытия */ .pdfjs-close { position: absolute; top: 10px; right: 16px; font-size: 26px; font-weight: 700; width: 36px; height: 36px; background: #0F172A; color: #fff; border-radius: 50%; border: none; cursor: pointer; z-index: 20; } /* Тулбар */ .pdfjs-toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #E5E7EB; background: #F9FAFB; } .pdfjs-btn { border: none; border-radius: 999px; padding: 6px 14px; font-size: 16px; cursor: pointer; background: #E5E7EB; color: #111827; transition: background .2s ease, transform .1s ease; } .pdfjs-btn:hover { background: #D1D5DB; transform: translateY(-1px); } .pdfjs-btn:active { transform: translateY(0); } .pdfjs-counter { font-size: 14px; color: #4B5563; } /* Область для canvas — БЕЗ flex */ .pdfjs-canvas-wrap { position: relative; flex: 1 1 auto; overflow: auto; background: #111827; /* убираем flex-центрирование */ display: block; padding: 8px 0 12px; /* небольшой отступ сверху/снизу для воздуха */ } /* Сам canvas — центр только по горизонтали */ #pdfCanvas { display: block; max-width: 100%; height: auto; margin: 0 auto; /* центр по горизонтали */ background: #111827; } /* Защитный слой — блокирует выделение/копирование */ .pdfjs-protect { position: absolute; inset: 0; z-index: 10; background: transparent; pointer-events: none; } /* Доп. защита от выделения текста внутри окна */ .pdfjs-window, .pdfjs-window * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .pdf-button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-size: 18px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #6366F1, #4338CA); /* фиолетово-синий градиент */ border-radius: 14px; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35); text-decoration: none; transition: all .25s ease; cursor: pointer; border: none; } /* Ховер */ .pdf-button:hover { box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45); transform: translateY(-2px); } /* Клик */ .pdf-button:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25); opacity: 0.9; } /* Иконка PDF */ .pdf-button::before { content: "📄"; font-size: 22px; margin-right: 10px; } .pdfjs-toolbar { position: relative; /* или вообще убрать position */ top: auto; left: auto; right: auto; height: auto; /* можно дать padding вместо height */ } .pdfjs-window { display: flex; flex-direction: column; } /* Мягкий, лёгкий, современный крестик */ .pdfjs-close { position: absolute; top: 12px; right: 12px; width: 36px; /* компактный размер */ height: 36px; font-size: 22px; /* аккуратный крест */ font-weight: 600; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.75); /* мягкая белая подложка */ backdrop-filter: blur(6px); /* стеклянный эффект */ -webkit-backdrop-filter: blur(6px); color: #4B4B4B; /* мягкий тёмно-серый крестик */ border-radius: 10px; /* не круг → мягкая «пилюля» */ border: 1px solid rgba(255, 255, 255, 0.4); cursor: pointer; z-index: 999999; transition: all .2s ease; } /* Наведение (ПК) */ .pdfjs-close:hover { background: rgba(255, 255, 255, 0.95); transform: scale(1.06); } /* Нажатие */ .pdfjs-close:active { transform: scale(0.92); opacity: 0.8; } /* Общий стиль секции */ .section-intro { font-size: 18px; line-height: 1.65; max-width: 760px; margin: 0 auto; padding: 26px 30px; background: #FAFAFE; border-radius: 18px; border: 1px solid rgba(210, 210, 230, 0.45); text-align: center; } /* Каждая строка — отдельный блок */ .section-intro span { display: block; margin: 12px 0; padding: 8px 12px; border-radius: 10px; transition: 0.25s ease; text-align: center; } /* 1 строка — пастельно-голубая */ .section-intro span:nth-child(1) { background: rgba(180, 210, 255, 0.25); color: #2C3A58; font-weight: 500; } /* 2 строка — серо-синяя с тонкой линией */ .section-intro span:nth-child(2) { background: rgba(200, 210, 230, 0.25); border-left: 3px solid rgba(120, 140, 170, 0.45); padding-left: 16px; color: #2D3440; } /* 3 строка — мягкий песочный оттенок */ .section-intro span:nth-child(3) { background: rgba(240, 225, 190, 0.25); color: #4C3F28; } /* 4 строка — очень светлый зелёный */ .section-intro span:nth-child(4) { background: rgba(195, 230, 205, 0.25); border: 1px solid rgba(165, 200, 175, 0.35); color: #283A30; } /* 5 строка — нежный тёплый серо-розовый */ .section-intro span:nth-child(5) { background: rgba(235, 210, 220, 0.25); color: #4A343C; font-weight: 500; } /* Отступ между логотипом и меню только на ПК */ @media (min-width: 1024px) { .header-inner { justify-content: flex-start; } .header-nav { margin-left: 40px; /* ← можно увеличить или уменьшить */ } } .pdf-button-wrap { text-align: center; margin-top: 12px; } .pdf-note { margin-top: 6px; font-size: 12px; color: #6B7280; /* мягкий серо-синий текст */ opacity: 0.85; font-style: italic; } /* Только для ПК */ @media (min-width: 1024px) { /* Текст "Записаться" рядом с плавающей кнопкой */ .floating-whatsapp::after { content: "Записаться"; position: absolute; right: 60px; /* положение текста */ top: 50%; transform: translateY(-50%); background: #25D366; color: #fff; padding: 8px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,0.2); animation: whatsapp-blink 1.3s infinite ease-in-out; } /* Анимация привлекательного мигания */ @keyframes whatsapp-blink { 0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); } 50% { opacity: 0.55; transform: translateY(-50%) scale(0.92); } } } /* Нужный фикс, чтобы текст появился справа от кнопки */ .floating-whatsapp { position: fixed; bottom: 30px; right: 30px; z-index: 99999; }