/* --- 1. ГЛОБАЛЬНЫЕ НАСТРОЙКИ И ПЕРЕМЕННЫЕ ТЕМ --- */ :root { /* Тема по умолчанию (Светлая) */ --main-theme-color: #3D8B9A; --background-color-top: #f8f9fa; --background-color-bottom: #e9ecef; --card-bg-color: #ffffff; --text-color: #212529; --text-color-light: #6c757d; --border-color: #dee2e6; --input-bg-color: #ffffff; --primary-accent: var(--main-theme-color); --secondary-accent: #ffffff; --color-bg-elevated: #ffffff; --safe-area-inset-top: env(safe-area-inset-top, 0px); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); --header-height: 60px; --footer-height: 70px; } body.theme-dark { --main-theme-color: #4fd1c5; --background-color-top: #1a202c; --background-color-bottom: #12161e; --card-bg-color: #2d3748; --text-color: #e2e8f0; --text-color-light: #a0aec0; --border-color: #4a5568; --input-bg-color: rgba(255, 255, 255, 0.08); --primary-accent: var(--main-theme-color); --secondary-accent: #1a202c; } .theme-dark { --color-bg-elevated: #2D3748; /* !!! ДОБАВЬТЕ ЭТУ СТРОКУ (фон для окон в темной теме) !!! */ } /* --- 2. ОСНОВНАЯ СТРУКТУРА И ТИПОГРАФИКА --- */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { height: 100%; } body { min-height: 100%; /* Используем min-height вместо height */ margin: 0; font-family: 'Nunito', sans-serif; background-image: linear-gradient(180deg, var(--background-color-top) 0%, var(--background-color-bottom) 100%); color: var(--text-color); background: /* Изображение 1: Верхнее левое свечение (цвет темы) */ radial-gradient( circle at 15% 15%, color-mix(in srgb, var(--main-theme-color) 15%, transparent) 0%, transparent 40% ), /* Изображение 2: Нижнее правое свечение (акцент) */ radial-gradient( circle at 85% 85%, color-mix(in srgb, var(--accent-color, #718096) 10%, transparent) 0%, /* Добавил цвет по умолчанию */ transparent 40% ), /* Изображение 3: Базовый линейный градиент (как у вас был) */ linear-gradient( 180deg, var(--background-color-top) 0%, var(--background-color-bottom) 100% ); /* Чтобы фон не скроллился вместе с контентом */ background-attachment: fixed; /* !!! ГЛАВНОЕ ИСПРАВЛЕНИЕ: Компенсируем высоту панелей !!! */ padding-top: calc(var(--header-height) + var(--safe-area-inset-top)); padding-bottom: calc(var(--footer-height) + var(--safe-area-inset-bottom)); } /* 1. Класс для , который блокирует скролл фона */ body.sidebar-is-open { overflow: hidden; } /* 2. Делаем сам сайдбар скроллящимся, если его содержимое не помещается */ /* Это особенно важно для маленьких экранов */ .chat-sidebar { overflow-y: auto; -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */ } /* --- 3. ПАНЕЛИ И ОСНОВНОЙ КОНТЕЙНЕР --- */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background-color-top); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.5s ease-out; } .preloader.hidden { opacity: 0; pointer-events: none; } .preloader-logo { width: 80px; height: 80px; border: 4px solid var(--text-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2.5rem; font-weight: bold; } .preloader-text { margin-top: 1rem; font-size: 1.2rem; font-weight: 600; } .top-bar { position: fixed; top: 0; left: 0; right: 0; height: calc(60px + var(--safe-area-inset-top)); padding: 0 1.5rem; padding-top: var(--safe-area-inset-top); display: flex; align-items: center; justify-content: space-between; z-index: 100; background-color: var(--background-color-top); } .logo, .theme-switcher { color: var(--text-color); } .theme-switcher { background: none; border: none; cursor: pointer; padding: 0.5rem; } .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(70px + var(--safe-area-inset-bottom)); padding-bottom: var(--safe-area-inset-bottom); display: flex; justify-content: space-around; align-items: center; background-color: color-mix(in srgb, var(--card-bg-color) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border-color); z-index: 100; } .nav-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; color: var(--text-color-light); cursor: pointer; text-decoration: none; font-size: 0.7rem; } .nav-btn.active, .nav-btn:hover { color: var(--primary-accent); } .nav-btn svg { width: 24px; height: 24px; } .bottom-nav a span{ font-size: 10px; } /* --- 4. ЭКРАНЫ ВХОДА/РЕГИСТРАЦИИ (VIEWS) --- */ .view-container { width: 100%; max-width: 420px; margin: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; } .hidden { display: none !important; } /* Общие стили для заголовков и текста */ .greeting, .welcome-content h1, .form-wrapper h1 { font-size: 2rem; font-weight: 800; margin: 0; text-align: center; } .prompt, .welcome-content p, .form-wrapper p { margin-top: 0.5rem; color: var(--text-color-light); text-align: center; } .welcome-actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; } /* Формы */ .registration-form, .login-form { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .input-group { position: relative; width: 100%; text-align: left; } .input-group label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 600; } .input-group input { width: 100%; padding: 0.9rem; border-radius: 12px; border: 1px solid var(--border-color); background-color: var(--input-bg-color); color: var(--text-color); font-size: 1rem; font-family: inherit; } .input-group input::placeholder { color: var(--text-color-light); opacity: 0.8; } .input-group input:focus { outline: none; border-color: var(--primary-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-accent) 20%, transparent); } .theme-selector { display: flex; gap: 0.75rem; margin-top: 0.25rem; } .theme-swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease; padding: 0; } .theme-swatch.selected { border-color: var(--primary-accent); transform: scale(1.1); } .pin-display { display: flex; justify-content: center; gap: 0.75rem; margin: 1.5rem 0; } .pin-dot { width: 20px; height: 20px; background-color: var(--input-bg-color); border-radius: 50%; transition: background-color 0.2s ease; } .pin-dot.filled { background-color: var(--primary-accent); } /* Блоки информации и чекбоксы */ .info-block { display: flex; align-items: flex-start; gap: 1rem; background-color: color-mix(in srgb, var(--main-theme-color) 8%, transparent); padding: 1rem; border-radius: 12px; margin: 0.5rem 0; } .info-block.compact { margin: -0.25rem 0 0.75rem; padding: 0.75rem 1rem; background-color: var(--background-color-bottom); } .info-block-icon { color: var(--main-theme-color); flex-shrink: 0; } .info-block-text { font-size: 0.85rem; line-height: 1.4; text-align: left; color: var(--text-color-light); } .info-block-text strong { color: var(--text-color); } .pin-info { font-size: 0.85rem; color: var(--text-color-light); text-align: center; margin: 0.5rem 0; line-height: 1.4; } .checkbox-container { display: flex; align-items: center; gap: 0.75rem; text-align: left; } .checkbox-container label { font-size: 0.9rem; line-height: 1.3; } .checkbox-container a { color: var(--main-theme-color); text-decoration: underline; } #agreePolicy, #understandRisk, #agreeAge { width: 20px; height: 20px; accent-color: var(--main-theme-color); } /* Кнопки */ .form-actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } .btn-primary, .btn-secondary { width: 100%; padding: 1rem; border-radius: 12px; border: none; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: transform 0.1s ease, background-color 0.2s; } .btn-primary { background-color: var(--primary-accent); color: var(--secondary-accent); } .btn-secondary { background-color: transparent; color: var(--primary-accent); border: 2px solid var(--primary-accent); } .btn-primary:active, .btn-secondary:active { transform: scale(0.98); } /* --- 5. NUMPAD, ВАЛИДАЦИЯ, УВЕДОМЛЕНИЯ --- */ .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: 1rem; flex-shrink: 0; } .numpad-btn { aspect-ratio: 1 / 1; /* Соотношение сторон 1 к 1 */ width: 100%; border-radius: 24px; border: none; background-color: var(--input-bg-color); color: var(--text-color); font-size: 1.8rem; /* Немного уменьшим шрифт для баланса */ font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background-color 0.15s ease; } .numpad-btn:active { background-color: color-mix(in srgb, var(--primary-accent) 20%, transparent); } /* --- Стили для специальных кнопок --- */ .numpad-btn.special { /* !!! ИЗМЕНЕНИЕ: Уменьшаем шрифт для текста "Назад" !!! */ font-size: 1rem; font-weight: 700; } .numpad-btn.special[data-key="backspace"] { /* !!! ИЗМЕНЕНИЕ: Стилизуем иконку удаления !!! */ color: var(--main-theme-color); /* Фирменный цвет */ } .numpad-btn.special[data-key="backspace"] svg { /* !!! ИЗМЕНЕНИЕ: Уменьшаем размер иконки !!! */ width: 32px; height: 32px; } /* Подсказки валидации */ .validation-bubble { position: absolute; bottom: 100%; left: 10px; margin-bottom: 12px; background-color: #c53030; color: #ffffff; padding: 0.75rem 1rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; z-index: 10; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .validation-bubble.show { opacity: 1; transform: translateY(0); } .validation-bubble::after { content: ''; position: absolute; top: 100%; left: 20px; width: 12px; height: 12px; background-color: #c53030; transform: translateY(-50%) rotate(45deg); z-index: -1; } .validation-bubble .icon { font-style: normal; } /* Уведомления-тосты */ .toast { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); padding: 1rem 1.5rem; border-radius: 12px; background-color: #323232; color: #ffffff; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 2000; transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .toast.show { bottom: calc(70px + var(--safe-area-inset-bottom) + 1rem); } .toast.error { background-color: #c53030; } .toast.success { background-color: #38a169; } /* Красивое подтверждение */ .custom-confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.2s ease-in-out; } .custom-confirm-overlay.show { opacity: 1; } .custom-confirm-box { background: var(--card-bg-color); color: var(--text-color); padding: 2rem; border-radius: 16px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 2001; } .custom-confirm-box h3 { margin: 0 0 0.5rem; } .custom-confirm-box p { margin: 0 0 1.5rem; color: var(--text-color-light); } .custom-confirm-actions { display: flex; gap: 1rem; } /* новые */ .btn-primary { background-color: var(--main-theme-color); border-color: var(--main-theme-color); } .btn-primary:hover { background-color: color-mix(in srgb, var(--main-theme-color), #000 10%); border-color: color-mix(in srgb, var(--main-theme-color), #000 10%); } .input-group input:focus, .input-group textarea:focus { border-color: var(--main-theme-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--main-theme-color), transparent 70%); } .pin-dot.filled { background-color: var(--main-theme-color); } .checkbox-container input:checked + label::before { background-color: var(--main-theme-color); border-color: var(--main-theme-color); } a { color: var(--main-theme-color); } .preloader-logo { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; /* Убираем рамку, она больше не нужна */ border: 0px solid var(--text-color); } .preloader-logo img { max-width: 100%; max-height: 100%; } .logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-color); } .logo-symbol { height: 32px; width: auto; } .logo-text { font-family: 'Ubuntu', sans-serif; /* Используем ваш фирменный шрифт */ font-weight: 700; font-size: 1.4rem; } /* /assets/css/main.css */ /* Новый контейнер для чекбоксов */ .form-agreements { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } .form-agreements .checkbox-container label { font-size: 0.85rem; /* Делаем текст немного меньше */ line-height: 1.4; } .form-agreements .checkbox-container label strong { color: var(--text-color); } .form-agreements a { text-decoration: underline; cursor: pointer; } /* Стили для модального окна (адаптируем из вашего существующего) */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2000; display: flex; justify-content: center; align-items: center; padding: 1rem; } .modal-box { background: var(--card-bg-color); color: var(--text-color); padding: 1.5rem; border-radius: 16px; width: 100%; max-width: 800px; height: 90vh; /* Занимает почти всю высоту экрана */ display: flex; flex-direction: column; position: relative; } .modal-close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--text-color-light); line-height: 1; z-index: 10; } .modal-content { flex-grow: 1; overflow-y: auto; /* Позволяет прокручивать длинный текст */ padding-right: 1rem; /* Отступ для скроллбара */ } /* Стили для контента, загруженного из legal-страниц */ .modal-content h1 { font-size: 1.5rem; } .modal-content h2 { font-size: 1.2rem; margin-top: 2rem; } .modal-content p { color: var(--text-color-light); } /* Простой спиннер загрузки */ .modal-loader { border: 4px solid var(--border-color); border-top: 4px solid var(--main-theme-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 4rem auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .offline-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 9999; /* Самый высокий z-index */ display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: #ffffff; } .offline-overlay.hidden { display: none; } .offline-content { max-width: 320px; } .offline-icon { width: 70px; height: 70px; border: 4px solid #f6e05e; /* Желтый цвет */ color: #f6e05e; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 800; margin: 0 auto 1.5rem; } .offline-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem; } .offline-text { font-size: 1rem; opacity: 0.8; line-height: 1.5; margin: 0; }