/*Design the system Butthisnotsure ver. 0.1 04-25*/ :root { /* ============= */ /* COLOR SYSTEM */ /* ============= */ --color-primary: #BDFD51; /* Основной акцентный цвет (кнопки, фокус) */ --color-blue: #0059FF; /*Синий*/ --color-text: #1a1a1a; /* Основной цвет текста (заголовки, основной текст) */ --color-text-secondary: #404040; /* Вторичный цвет текста (подписи, пояснения) */ --color-border: #e0e0e0; /* Цвет границ полей ввода и разделителей */ --color-background: #fff; /* Цвет фона контейнеров и страницы */ --color-shadow: rgba(0,0,0,0.08); /* Цвет теней (модальные окна, карточки) */ /* ============= */ /* SPACING SYSTEM */ /* ============= */ --space-xs: 4px; /* Минимальный отступ (мелкие элементы) */ --space-sm: 8px; /* Малый отступ (внутренние отступы кнопок) */ --space-md: 12px; /* Средний отступ (между связанными элементами) */ --space-lg: 16px; /* Большой отступ (вертикальные отступы секций) */ --space-xl: 20px; /* Очень большой отступ (между группами) */ --space-xxl: 24px; /* Максимальный отступ (редкие случаи) */ --space-xxxl: 28px; /* Специальный отступ для форм (между полями) */ --space-xxxxl: 30px; /* Отступ для контейнеров (padding) */ --space-xxxxxl: 32px; /* Максимальный отступ для заголовков */ /* ================ */ /* BORDER RADIUSES */ /* ================ */ --radius-sm: 8px; /* Скругление для кнопок, полей ввода */ --radius-md: 12px; /* Скругление для карточек (мобильная версия) */ --radius-lg: 16px; /* Скругление для контейнеров (десктоп) */ /* ============= */ /* TYPOGRAPHY */ /* ============= */ --text-xs: 12px; /* Мелкий текст (подписи, метки) */ --text-sm: 14px; /* Малый текст (вторичная информация) */ --text-md: 15px; /* Основной текст (поля ввода, кнопки) */ --text-lg: 16px; /* Крупный текст (редкие случаи) */ --text-xl: 24px; /* Заголовки (h3) */ --text-xxl: 28px; /* Заголовки (h2) */ --text-xxxl: 32px; /* Заголовки (h1) */ /* Font weights */ --weight-medium: 500; /* Средняя насыщенность (подписи) */ --weight-semibold: 600; /* Полужирный (кнопки, акценты) */ --weight-bold: 700; /* Жирный (заголовки) */ /* ============= */ /* EFFECTS */ /* ============= */ --shadow-sm: 0 4px 24px var(--color-shadow); /* Тень для контейнеров */ --focus-ring: 0 0 0 1px var(--color-primary); /* Обводка при фокусе */ /* ============= */ /* TRANSITIONS */ /* ============= */ --transition-speed: 0.2s; /* Стандартная скорость анимации */ --transition-easing: ease; /* Тип сглаживания анимации */ } /* ==================== */ /* BASE RESET STYLES */ /* ==================== */ .custom-generator-wrapper *:not(script) { /* all: unset; */ /* Полный сброс наследуемых стилей */ box-sizing: border-box; /* Корректный расчет размеров */ display: revert; /* Восстановление дефолтного display */ margin: 0; /* Сброс внешних отступов */ padding: 0; /* Сброс внутренних отступов */ border: 0; /* Сброс границ */ font-family: 'Manrope', sans-serif !important; /* Основной шрифт */ } /* ==================== */ /* LAYOUT CONTAINER */ /* ==================== */ .custom-generator-wrapper { max-width: 600px !important; /* Фиксированная максимальная ширина */ margin: 0 auto !important; /* Центрирование по горизонтали */ padding: var(--space-xxxxl) var(--space-xxl) !important; background: var(--color-background) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; } /* ==================== */ /* HEADER IMAGE */ /* ==================== */ .custom-image-container { text-align: center !important; /* Центрирование логотипа */ margin: var(--space-xl) 0 !important; height: 40px !important; /* Фиксированная высота контейнера */ } .custom-header-image { height: 100% !important; /* Заполнение по высоте контейнера */ width: auto !important; /* Сохранение пропорций */ max-width: 254px !important; /* Максимальная ширина изображения */ object-fit: contain !important; /* Корректное отображение */ } /* ==================== */ /* FORM CONTAINER */ /* ==================== */ .custom-form-container { display: flex !important; flex-direction: column !important; gap: var(--space-lg) !important; /* Отступ между группами полей */ } /* ==================== */ /* FORM FIELD GROUPS */ /* ==================== */ .custom-field-group { width: 100% !important; display: flex !important; flex-direction: column !important; gap: var(--space-md) !important; /* Отступ между label и input */ } /* ==================== */ /* COLUMN LAYOUT */ /* ==================== */ .custom-columns-wrapper { display: flex !important; gap: var(--space-xl) !important; /* Отступ между колонками */ width: 100% !important; } .custom-column { flex: 1 1 50% !important; /* Равное разделение на 2 колонки */ min-width: 0 !important; /* Фикс для переполнения контента */ display: flex !important; flex-direction: column !important; gap: var(--space-md) !important; /* Отступ между элементами в колонке */ } /* ==================== */ /* FORM LABELS */ /* ==================== */ .custom-label { font-size: var(--space-lg) !important; font-weight: var(--weight-medium) !important; color: var(--color-text-secondary) !important; line-height: 1.4 !important; /* Оптимальный межстрочный интервал */ } /* ==================== */ /* INPUT FIELDS */ /* ==================== */ .custom-input { width: 100% !important; padding: var(--space-lg) var(--space-xl) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; font-size: var(--text-sm) !important; background: var(--color-background) !important; transition: all var(--transition-speed) var(--transition-easing) !important; } /* Focus state */ .custom-input:focus { outline: 3px solid var(--color-primary) !important; border-color: transparent !important; /* Убираем двойную границу */ box-shadow: var(--focus-ring) !important; } /* ==================== */ /* SUBMIT BUTTON */ /* ==================== */ .custom-submit-button { width: 100% !important; padding: var(--space-lg) !important; background: var(--color-primary) !important; color: var(--color-text) !important; border: none !important; border-radius: var(--radius-sm) !important; font-size: var(--text-md) !important; font-weight: var(--weight-semibold) !important; cursor: pointer !important; margin-top: var(--space-sm) !important; transition: background var(--transition-speed) var(--transition-easing) !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ==================== */ /* RESPONSIVE ADJUSTMENTS */ /* ==================== */ @media (max-width: 480px) { /* Переключаем колонки на вертикальный режим */ .custom-columns-wrapper { flex-direction: column !important; gap: var(--space-xxxl) !important; /* Увеличиваем отступ между бывшими колонками */ } /* Уменьшаем отступы и скругления для мобильных */ .custom-generator-wrapper { padding: var(--space-xxl) var(--space-xl) !important; border-radius: var(--radius-md) !important; } } /* Стили для уведомлений */ .tilda-notification, .custom-notification { display: none; position: fixed; bottom: var(--space-xl); right: var(--space-xl); background-color: var(--color-primary); color: var(--color-text); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); font-family: 'Manrope', sans-serif; font-weight: var(--weight-medium); font-size: var(--text-md); text-align: center; box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(20px); transition: all var(--transition-speed) var(--transition-easing); z-index: 1000; max-width: 300px; } /* Уведомления */ .custom-notification.show, .tilda-notification.show { opacity: 1; transform: translateY(0); display: block; } /* Стили кнопок */ .icon-button { width: 40px; height: 40px; border-radius: var(--radius-sm); /* background: #f5f5f5;*/ transition: all var(--transition-speed) var(--transition-easing); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .icon-button:hover { /*background: var(--color-primary);*/ transform: translateY(-2px); box-shadow: var(--shadow-sm); } .icon { width: 40px; height: 40px; display: block; object-fit: contain; border-radius: 8px; } .tab-pane { transition: opacity 0.2s ease; opacity: 1; } #codeSection { transition: opacity 0.2s ease; }