@media (max-width: 768px) { #resultTitle { margin-top: 20px; /* Добавляем отступ сверху для мобильной версии */ } .text-center { text-align: center; } } /* Линия разделения */ .divider { border-bottom: 1px solid #ddd; margin-top: -1px; /* Совмещаем линию с нижней частью шапки */ } /* Стили для логотипа */ .logo-title { font-size: 24px; /* Размер шрифта логотипа */ font-weight: bold; margin-bottom: 0; } .logo-subtitle { font-size: 16px; /* Размер для подзаголовка */ margin-bottom: 0; } .logo-container { display: flex; align-items: center; /* Выравнивание по центру */ margin-right: 20px; /* Отступ справа */ } /* Ограничение ширины для шапки и FAQ */ .content-container { max-width: 1110px; } #output { width: 100%; height: 100%; max-width: 100%; max-height: 100%; position: relative; margin: 0; /* Убираем отступы */ padding: 0; /* Убираем внутренние отступы */ border: none; /* Убираем границу */ display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; /* Задаем фоновый цвет */ overflow: hidden; } #outputNumber { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(10px, 15vw, 232px); /* Основной размер с ограничением до 232px */ font-weight: bold; text-align: center; z-index: 1; white-space: nowrap; max-width: 100%; max-height: 100%; overflow: hidden; transform-origin: center; } @media (max-width: 480px) { #outputNumber { font-size: 96px; /* Ограничение для мобильных на 96px */ } } #selectedThumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Масштабируем изображение, чтобы оно заполнило весь блок */ z-index: 0; } /* Плавное появление */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation: fadeIn 3s ease-out forwards; } /* Пульсирующая анимация */ @keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } } .pulse { animation: pulse 1s infinite; } .thumbnail-large { width: 118px; height: 118px; } .add-thumbnail { width: 118px; height: 118px; display: flex; justify-content: center; align-items: center; border: 2px dashed #ccc; cursor: pointer; } .color-swatch { width: 40px; height: 40px; margin-right: 10px; cursor: pointer; border-radius: 5px; } #thumbnailContainer { display: flex; flex-wrap: wrap; /* Позволяет перенос на новые строки */ gap: 10px; justify-content: center; } #screenshotArea { cursor: pointer; } /* Стиль для миниатюр с учетом масштабирования */ .clickable-thumbnail { width: 118px; height: 118px; object-fit: contain; /* Масштабируем изображение, чтобы оно полностью помещалось в контейнер */ cursor: pointer; } /* Стиль рамки блока результатов */ #output { border: 3px solid #000; /* Толщина и цвет рамки */ position: relative; } /* Стиль брендирования */ .branding { position: absolute; bottom: 0; right: 0; background-color: rgba(255, 255, 255, 0.8); /* Фон с полупрозрачностью */ padding: 5px 10px; font-size: 14px; font-weight: bold; border-top-left-radius: 5px; /* Скругление угла */ } #generationTime { color: #6c757d; /* Серый цвет */ font-size: 14px; /* Размер шрифта */ display: block; visibility: visible; text-align: center; /* Выравнивание по центру */ margin-top: 10px; /* Отступ сверху для улучшенной видимости */ } /* Контейнер для конфетти на весь экран */ .confetti-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; display: none; /* По умолчанию скрыто */ overflow: visible; z-index: 1000; /* Перекрываем всё содержимое страницы */ } /* Стиль для конфетти */ .confetti { position: absolute; width: 10px; height: 10px; opacity: 0.8; animation: fall linear infinite; } /* Анимация падения конфетти */ @keyframes fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } /* Разные формы и цвета конфетти */ .confetti.square { background-color: #ff595e; } .confetti.triangle { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #ffca3a; } .confetti.circle { width: 8px; height: 8px; border-radius: 50%; background-color: #8ac926; } /* Установка более контрастного фона для кнопок */ .btn-primary { color: #ffffff; background-color: #0056b3; border-color: #004494; } .btn-primary:hover { background-color: #004494; border-color: #003366; } /* Больше контраста для вкладок */ .nav-link { color: #212529; /* Текст более тёмного оттенка */ background-color: #e9ecef; /* Светлый фон для повышения контраста */ } .nav-link.active { background-color: #0056b3; color: #ffffff; } .text-dark { color: #212529 !important; } .card-header { cursor: pointer; } .card-header h5 { font-weight: normal; /* Убираем жирность */ } .card-header h5 a { text-decoration: none; /* Убираем подчеркивание */ color: #007bff; /* Цвет, как у ссылки */ } .card-header h5 a:hover { text-decoration: underline; /* Добавляем подчеркивание при наведении */ }