/* ========================================================================= Flatma AI — ai.css (новый дизайн под макет) Совместимо с ai.js: сохранены классы/состояния .ai_loading, .ai_bouncing-animate, .visible, .hidden, .ai_custom-select-option и т.д. Тёмная тема: [data-theme="dark"] на (ручное переключение) ========================================================================= */ :root { --ai-fg-primary: #111111; --ai-fg-secondary: #555555; --ai-fg-muted: #888888; --ai-fg-placeholder: #aaaaaa; --ai-border-default: #e2e2e2; --ai-border-subtle: #ededed; --ai-border-input: #d4d4d4; --ai-bg: #ffffff; --ai-bg-soft: #fafafa; --ai-bg-page: #fafafa; --ai-black: #111111; --ai-accent: #0D99FF; --ai-error-bg: #ffe2cc; --ai-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ai-sans: 'Arial', system-ui, sans-serif; } /* ── Тёмная тема: ручное переключение через атрибут на ── */ [data-theme="dark"] { --ai-fg-primary: #f3f3f3; --ai-fg-secondary: #b8b8b8; --ai-fg-muted: #7d7d7d; --ai-fg-placeholder: #5a5a5a; --ai-border-default: #2a2a2c; --ai-border-subtle: #1f1f21; --ai-border-input: #3a3a3d; --ai-bg: #1a1a1c; --ai-bg-soft: #232325; --ai-bg-page: #0f0f10; --ai-black: #f3f3f3; --ai-error-bg: #5c3a26; } /* ── База ── */ html, body { margin: 0; padding: 0; font-family: var(--ai-sans); font-size: 14px; color: var(--ai-fg-primary); height: 100%; width: 100%; } * { -webkit-tap-highlight-color: transparent; } .ai { display: flex; height: 100%; width: 100%; flex-direction: column; z-index: 999; background: var(--ai-bg-page); transition: opacity 1s ease-in-out; } .ai_hide { opacity: 0; } /* ── Скроллбары ── */ .ai *::-webkit-scrollbar { width: 8px; height: 8px; } .ai *::-webkit-scrollbar-track { background: transparent; } .ai *::-webkit-scrollbar-thumb { background: var(--ai-border-default); border-radius: 0; } .ai *::-webkit-scrollbar-thumb:hover { background: var(--ai-fg-muted); } /* ========================================================================= ХЕДЕР ========================================================================= */ .ai_header { background: var(--ai-bg); width: 100%; height: 50px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; position: relative; } .ai_header_title { padding-left: 15px; } .ai_logo { display: flex; align-items: baseline; font-size: 16px; font-weight: bold; margin-bottom: -5px;} .ai_logo_link { display: flex; color: var(--ai-fg-primary); text-decoration: none; position: relative;margin-right:7px; } .ai_logo_svg{ fill: var( --ai-black); } .ai_header_right { display: flex; align-items: center; } .ai_coins_link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ai-mono); font-size: 16px; line-height: 1; cursor: pointer; padding: 5px 12px; border: 1px solid transparent; text-decoration: none; color: var(--ai-fg-primary); transition: border-color .15s ease; border-radius: 50px; } .ai_coins_link:hover { border-color: var(--ai-black); border: 1px solid var(--ai-border-default);} .auth_menu { margin-left: 12px; margin-right: 15px; display: flex; align-items: center; } .ai_header_link { font-size: 16px; margin-left: 12px; cursor: pointer; color: var(--ai-fg-primary); text-decoration: none; } .ai_login_link { display: flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--ai-border-default); background: var(--ai-bg); color: var(--ai-fg-primary); transition: border-color .15s ease; } .ai_login_link:hover { border-color: var(--ai-black); } .ai_exit { width: 50px; height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .ai_exit:hover { background: var(--ai-bg-soft); } .ai_icon { display: inline-block; width: 20px; height: 20px; fill: var(--ai-fg-primary); vertical-align: middle; } /* ========================================================================= КОНТЕНТ / HERO ========================================================================= */ .ai_content { display: flex; flex: 1; width: 100%; align-items: flex-start; justify-content: center; position: relative; overflow-y: auto; align-items: center; height: 100%; } .ai_case { display: block; max-width: 800px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 64px 16px 80px; margin-top: -130px; position: relative; } .ai_title { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 40px; text-align: left; color: var(--ai-fg-primary); font-weight: 700; } /* ── Bouncing icon (используется ai.js во время генерации) ── */ .ai_bouncing-icon { height: 40px; width: 156px; position: relative; margin: 0 0 16px; display: none; } .ai_bouncing-icon .ai_logo_link svg path[fill="black"] { fill: var(--ai-fg-primary); } .ai_bouncing-animate { animation: bounce 1s infinite; display: block !important; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* ========================================================================= КОМПОЗЕР ========================================================================= */ .ai_case_text { width: 100%; box-sizing: border-box; position: relative; display: block; background: var(--ai-bg); border: 1px solid var(--ai-border-default); border-radius: 0; padding: 24px; transition: border-color .2s ease; padding-bottom: 12px; border-radius: 6px; } .ai_case_text:has(textarea:focus), .ai_case_text:focus-within { border-color: var(--ai-black); } .ai_left { width: 100%; } .ai_textarea { width: 100%; min-height: 72px; border: 0; outline: none; resize: none; background: transparent; font-family: var(--ai-sans); font-size: 17px; line-height: 1.45; letter-spacing: -0.005em; color: var(--ai-fg-primary); padding: 0; box-sizing: border-box; caret-color: var(--ai-accent); } .ai_textarea::placeholder { color: var(--ai-fg-placeholder); } /* нижняя панель композера */ .ai_textarea_actions { width: 100%; box-sizing: border-box; margin-top: 16px; padding-top: 7px; border-top: 1px solid var(--ai-border-default); display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; position: relative; } .ai_textarea_actions label { margin: 6px; } /* блок кнопок выбора материала */ .ai_settings_case { display: flex; flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; } .ai_settings_button_case { position: relative; display: inline-flex; flex-direction: column; } /* .ai_settings_button_case > label { display: none; } */ .ai_settings_button { cursor: pointer; border: 1px solid var(--ai-border-subtle); background: var(--ai-bg-soft); border-radius: 0; border-radius: 3px; display: inline-flex; align-items: center; padding: 6px 8px 6px 6px; gap: 8px; font-size: 14px; position: relative; transition: border-color .15s ease, background .15s ease; } .ai_settings_button:hover { border-color: var(--ai-black); background: var(--ai-bg); } .ai_settings_button img { height: 32px; width: 32px; margin: 0; border-radius: 0; object-fit: cover; flex-shrink: 0; align-self: center; display: block; } .ai_settings_button span { font-family: var(--ai-mono); font-size: 12px; font-weight: 500; color: var(--ai-fg-muted); line-height: 1.2; white-space: nowrap; } /* подпись «Фасад / Корпус» — задаётся в PHP через ::before (content из $textAI) */ #aiFacadeButtonDesktop::before, #aiMaterialButtonDesktop::before { position: absolute; left: 60px; top: 9px; font-family: var(--ai-sans); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--ai-fg-primary); line-height: 1.25; white-space: nowrap; } /* распорка между блоками и кнопкой отправки */ .ai_spacer { flex: 1; } /* таймер генерации (#aiTimer) */ #aiTimer { font-family: var(--ai-mono); font-size: 13px; color: var(--ai-fg-muted); margin-left: auto; } /* кнопка отправки */ .ai_send { width: 50px; height:50px; border: 0; border-radius: 0; background: var(--ai-accent); padding: 0; cursor: pointer; margin: 0; flex-shrink: 0; border-radius: 60px; display: inline-flex; align-items: center; justify-content: center; transition: opacity .15s ease; position: relative; } .ai_send:hover { opacity: .85; } .ai_send svg { width: 18px; height: 18px; fill: none; stroke: #fff; } .ai_send.ai_loading svg { opacity: 0; } .ai_send.ai_loading:after { content: ''; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin-left: -12px; margin-top: -12px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spinner 0.8s linear infinite; } @keyframes spinner { to { transform: rotate(360deg); } } /* ========================================================================= ДОП. КНОПКА «3D-КОНСТРУКТОР» ========================================================================= */ .ai_case_btns { width: 100%; margin-top: 28px; display: flex; align-items: center; margin-left: 24px; } .ai_btn { display: inline-flex; align-items: center; gap: 8px; height: auto; width: auto; max-width: none; font-size: 15px; font-weight: 500; cursor: pointer; background: transparent; color: var(--ai-black); border: 0; border-bottom: 1px solid var(--ai-black); border-radius: 0; padding: 0 0 2px; text-decoration: none; } .ai_btn .ai_icon { width: 14px; height: 14px; fill: var(--ai-black); stroke: var(--ai-black); } /* ========================================================================= ПРИМЕРЫ ========================================================================= */ .ai_examples { margin-top: 24px; margin-left: 24px;} .ai_examples__label { font-family: var(--ai-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-fg-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 12px; } .ai_examples__list { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; margin-left: -10px; } .ai_example { background: transparent; border: 0; padding: 6px 10px; font-family: var(--ai-sans); font-size: 13px; color: var(--ai-fg-secondary); cursor: pointer; transition: background .15s ease, color .15s ease; border: 1px solid transparent; border-radius: 6px; } .ai_example:hover { border-color: var(--ai-black); } /* ========================================================================= ОВЕРЛЕЙ + МОДАЛКА МАТЕРИАЛОВ ========================================================================= */ .ai_overlay_stop { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 100; display: none; background: rgba(15, 15, 15, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ai_materials_window { display: flex; /* всегда flex; видимость через opacity/pointer-events */ flex-direction: column; position: fixed; top: 50%; left: 50%; width: calc(100% - 32px); max-width: 760px; max-height: calc(100vh - 64px); box-sizing: border-box; background: var(--ai-bg); border-radius: 6px; box-shadow: none; padding: 0; z-index: 101; overflow: hidden; transform: translate(-50%, -48%); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } .ai_materials_window.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); } .ai_materials { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; } /* шапка модалки */ .ai_mhead { display: flex; align-items: baseline; justify-content: space-between; padding: 28px 32px 0; gap: 12px; } .ai_mhead__eyebrow { font-family: var(--ai-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-fg-muted); display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .ai_materials_title { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--ai-fg-primary); display: block; } .ai_mclose { width: 36px; height: 36px; border: 0; background: var(--ai-bg); color: var(--ai-fg-primary); display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease; flex-shrink: 0; cursor: pointer; } .ai_mclose:hover { background: var(--ai-bg-soft); } .ai_mclose svg { width: 12px; height: 12px; stroke: var(--ai-fg-primary); fill: none; } /* тело модалки */ .ai_mbody { padding: 28px 32px 0; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .ai_material-selector { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; overflow: hidden; } /* сетка полей параметров */ .ai_field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ai_selector-group { display: flex; flex-direction: column; gap: 10px; } .ai_selector-group label { font-family: var(--ai-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-fg-muted); } .ai_selector-group select { height: 38px; width: 100%; box-sizing: border-box; padding: 0 40px 0 16px; border: 1px solid var(--ai-border-default); border-radius: 3px; font-family: var(--ai-sans); font-size: 15px; color: var(--ai-fg-primary); background-color: var(--ai-bg); cursor: pointer; outline: 0; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; transition: border-color .15s ease; } .ai_selector-group select:focus { border-color: var(--ai-black); } .ai_selector-group select option { color: var(--ai-fg-primary); background: var(--ai-bg); } /* свой размер листа */ .ai_custom-input-group { grid-column: 1 / -1; margin-top: 4px; padding: 20px; border: 1px solid var(--ai-border-subtle); background: var(--ai-bg-soft); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ai_custom-input-group.hidden { display: none; } .ai_custom-input-row { display: flex; flex-direction: column; gap: 10px; } .ai_custom-input-row label { font-weight: 500; font-family: var(--ai-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-fg-muted); width: auto; flex-shrink: 0; } .ai_custom-input-row input[type="number"] { width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px; border: 1px solid var(--ai-border-default); border-radius: 0; font-family: var(--ai-sans); font-size: 15px; color: var(--ai-fg-primary); background: var(--ai-bg); outline: none; transition: border-color .15s ease; appearance: none; border-radius: 6px; -webkit-appearance: none; } .ai_custom-input-row input[type="number"]:focus { border-color: var(--ai-black); } .ai_custom-input-row input[type=number]::-webkit-inner-spin-button, .ai_custom-input-row input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .ai_custom-input-row input[type=number] { -moz-appearance: textfield; } /* секция текстур */ .ai_texture-section { margin: 32px 0 0; flex: 1; display: flex; flex-direction: column; min-height: 0; } .ai_texture-section__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--ai-border-default); margin-bottom: 20px; } .ai_texture-section__head label { font-family: var(--ai-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-fg-muted); display: flex; align-items: center; gap: 12px; } /* контейнер кастом-селекта (триггер скрыт, сетка открыта всегда) */ .ai_custom-select-container { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; } .ai_custom-select-trigger { display: none; } /* в новом дизайне не нужен, но оставлен для ai.js */ /* === КЛЮЧЕВОЕ: сетка свотчей вместо выпадающего списка === */ .ai_custom-select-options { display: grid; /* было: none / block */ position: static; /* было: absolute — ломало раскладку */ grid-template-columns: repeat(5, 1fr); gap: 14px; width: 100%; box-sizing: border-box; border: 0; box-shadow: none; background: transparent; max-height: none; overflow-y: auto; flex: 1; min-height: 0; padding: 0 0 8px; } .ai_custom-select-options.visible { display: grid; } /* .visible не должен переключать на block */ .ai_custom-select-option { padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; cursor: pointer; border: 1px solid var(--ai-border-default); background: var(--ai-bg); color: var(--ai-fg-primary); position: relative; transition: border-color .15s ease, box-shadow .15s ease; } .ai_custom-select-option:hover { border-color: var(--ai-black); background: var(--ai-bg); } .ai_custom-select-option img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0; background-color: #d8d3cc; flex-shrink: 0; display: block; } .ai_custom-select-option span { font-family: var(--ai-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; color: var(--ai-fg-secondary); padding: 8px 10px; text-align: center; border-top: 1px solid var(--ai-border-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* выбранный свотч (класс навешивается скриптом на странице) */ .ai_custom-select-option.ai_is-selected { border-color: var(--ai-black); box-shadow: 0 0 0 1px var(--ai-black); } .ai_custom-select-option.ai_is-selected span { color: var(--ai-fg-primary); } .ai_custom-select-option.ai_is-selected::after { content: ""; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; background: var(--ai-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5L5 9l4.5-5.5'/%3E%3C/svg%3E") center no-repeat; } /* скрытый текущий выбор (триггер) */ .ai_selected-option-content { display: flex; align-items: center; gap: 8px; } .ai_selected-option-img { width: 28px; height: 28px; object-fit: cover; border-radius: 0; flex-shrink: 0; } .ai_selected-option-text { color: var(--ai-fg-primary); } .ai_arrow { font-size: 12px; color: var(--ai-fg-muted); } /* подвал модалки */ .ai_mfoot { padding: 20px 32px 24px; /* border-top: 1px solid var(--ai-border-default); */ margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ai_mfoot__hint { font-family: var(--ai-mono); font-size: 12px; color: var(--ai-fg-muted); letter-spacing: 0.04em; } .ai_mfoot__hint b { color: var(--ai-fg-primary); font-weight: 500; } .ai_select-material-btn { height: 48px; padding: 0 28px; width: auto; background-color: var(--ai-accent); color: #fff; border: 1px solid var(--ai-accent); border-radius: 0; font-family: var(--ai-sans); font-size: 14px; font-weight: 500; border-radius: 48px; letter-spacing: -0.005em; cursor: pointer; transition: opacity .15s ease; margin: 0; align-self: auto; flex-shrink: 0; } .ai_select-material-btn:hover { opacity: .85; } /* ========================================================================= ОШИБКИ ========================================================================= */ .ai_error_message { transform: translateX(-50%); max-width: 400px; z-index: 99999; top: 60px; left: 50%; position: fixed; background: var(--ai-error-bg); color: var(--ai-fg-primary); min-width: 200px; padding: 12px 16px; border-radius: 0; border: 1px solid var(--ai-border-default); display: none; } /* ========================================================================= АДАПТИВ ========================================================================= */ @media screen and (max-width: 768px) { .ai_case { padding: 40px 16px 64px; } .ai_case_text { padding: 20px; } .ai_textarea { font-size: 16px; } .ai_settings_button { flex: 1; } .ai_send { width: 100%; height: 48px; margin-top: 16px;} .ai_case_btns { flex-direction: row; } } @media screen and (max-width: 640px) { .ai_materials_window { max-height: calc(100vh - 24px); width: calc(100% - 16px); } .ai_mhead, .ai_mbody { padding-left: 20px; padding-right: 20px; } .ai_mfoot { padding: 16px 20px 20px; } .ai_field-grid { grid-template-columns: 1fr; } .ai_custom-input-group { grid-template-columns: 1fr 1fr; } .ai_custom-select-options { grid-template-columns: repeat(3, 1fr); gap: 8px; } }