/* ===== Flagship Brick (full-width in Products) ===== */ /* Растянуть контейнер на всю строку сетки .container */ .home-page .products-section .container>.flagship-cta-container { grid-column: 1 / -1; width: 100%; margin: 2rem 0; } /* Сам «кирпич»: это product-card на всю ширину */ .home-page .products-section .flagship-brick.product-card { display: flex !important; flex-direction: column !important; align-items: center; text-align: center; padding: 2rem 2rem; border-radius: 12px; } /* Иконка сверху — как в карточках, только крупнее */ .flagship-brick .product-icon { width: 72px; height: 72px; color: var(--neon-turquoise); margin: 0 auto 0.75rem; } .flagship-brick .product-icon svg { width: 100%; height: 100%; } /* Заголовок и описание выровнены по центру */ .flagship-brick .product-title { margin-top: 0.25rem; margin-bottom: 0.25rem; } .flagship-brick .product-description { margin: 0 0 1rem 0; } /* Кнопка Learn More берёт стили из темы (.product-card .product-link) */ /* Никаких правил не нужно — класс product-link уже стилизован в glassmorphism_theme.css */ /* ===== Модалка ===== */ .flagship-modal { position: fixed; inset: 0; display: none; z-index: 1000; overflow-y: auto; -webkit-overflow-scrolling: touch; } .flagship-modal.is-open { display: block; } .flagship-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); } .flagship-modal__dialog { position: relative; max-width: 960px; margin: 6vh auto; padding: 1.5rem; border-radius: 16px; background: var(--glass-bg-primary, rgba(255, 255, 255, 0.08)); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18)); box-shadow: var(--glass-shadow, 0 8px 32px rgba(31, 38, 135, 0.37)); } .flagship-modal__close { position: absolute; top: 10px; right: 12px; font-size: 28px; line-height: 1; background: transparent; border: 0; color: var(--text-primary-glass, #fff); cursor: pointer; } .flagship-modal__title { margin: 0 0 1rem 0; text-align: center; color: var(--text-primary-glass, #fff); } /* Варианты — сеткой 2 колонки на десктопе */ .flagship-modal__options { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 720px) { .flagship-modal__options { grid-template-columns: 1fr 1fr; } } /* Небольшие правки для карточек внутри модалки */ .flagship-option.product-card { padding: 1.25rem 1rem; min-height: 0; } .flagship-option .product-title { margin-bottom: 0.25rem; } .flagship-option .product-description { margin-bottom: 0.75rem; } /* ===== Легаси: поддержка старой «плашки» (если где-то осталась) ===== */ .home-page .products-section .flagship-cta-button { position: relative; display: block; width: 100%; max-width: none; padding: 1.5rem 2rem; box-sizing: border-box; background: rgba(255, 255, 255, 0.05); border: 2px solid var(--neon-turquoise); border-radius: 12px; text-align: center; text-decoration: none; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 768px) { .home-page .products-section .flagship-cta-button .flagship-gradient-overlay { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 245, 255, 0.1), rgba(177, 0, 255, 0.1), transparent); transition: left 0.6s ease; } .home-page .products-section .flagship-cta-button:hover .flagship-gradient-overlay { left: 100%; } } /* ===== Mobile overrides for Classic theme (no glass) ===== */ @media (max-width: 767px) { /* если у тебя есть класс .classic-theme на , замени селектор ниже на .classic-theme */ body:not(.glassmorphism-theme) .flagship-modal__backdrop { background: rgba(0, 0, 0, 0.65); /* плотнее затемнение */ backdrop-filter: none; /* убираем блюр для чистой классики */ } body:not(.glassmorphism-theme) .flagship-modal__dialog { /* подставляем «менее стеклянные» переменные и сразу используем их */ --glass-bg-primary: rgba(12, 16, 28, 0.96); /* почти непрозрачно */ --glass-border: rgba(255, 255, 255, 0.10); --text-primary-glass: #fff; background: var(--glass-bg-primary); border-color: var(--glass-border); color: var(--text-primary-glass); } /* сами опции внутри модалки тоже делаем менее прозрачными */ body:not(.glassmorphism-theme) .flagship-modal .flagship-option.product-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); } /* на всякий случай — кнопки в модалке слегка подсветим */ body:not(.glassmorphism-theme) .flagship-modal .product-link { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); } } /* ===== Треугольная сетка для 3 продуктов (перевернутый треугольник) ===== */ /* AI Chat Assistant (слева) + AI Media System (справа) сверху */ /* Content Factory (центрирован) снизу */ .flagship-modal__options--triangle { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 720px) { .flagship-modal__options--triangle { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1.25rem; } /* Верхний ряд: два продукта */ .flagship-option--top-left { grid-column: 1 / 2; grid-row: 1 / 2; } .flagship-option--top-right { grid-column: 2 / 3; grid-row: 1 / 2; } /* Нижний ряд: один продукт по центру */ .flagship-option--bottom-center { grid-column: 1 / 3; grid-row: 2 / 3; max-width: 50%; justify-self: center; } } /* Адаптивность для планшетов */ @media (min-width: 720px) and (max-width: 960px) { .flagship-option--bottom-center { max-width: 60%; } } /* Мобильная версия - все карточки в столбик */ @media (max-width: 719px) { .flagship-modal__options--triangle { grid-template-columns: 1fr; } .flagship-option--top-left, .flagship-option--top-right, .flagship-option--bottom-center { grid-column: auto; grid-row: auto; max-width: 100%; justify-self: stretch; } } /* Выделение нового продукта Content Factory */ /* .flagship-option--bottom-center.product-card { border-color: var(--neon-turquoise, #00F5FF); background: rgba(0, 245, 255, 0.05); } .flagship-option--bottom-center.product-card:hover { border-color: var(--neon-turquoise, #00F5FF); box-shadow: 0 0 20px rgba(0, 245, 255, 0.2); } */