/* * seamless-bg.css * Spatial Tonal Framing — сквозной фон для ultrawide мониторов * * Подключение: functions/enqueues.php → wp_enqueue_style('seamless-bg', ...) * Путь файла: /wp-content/themes/cm_theme/seamless-bg.css * * Концепция: * Две мягкие вертикальные тональные «опоры» по самым краям экрана. * Без диагоналей, без текстур, без шума — только тон. * Цвет — отсылка к бренд-стали #5c6c84 в OKLCH-пространстве. * * Активируется только при ширине экрана ≥ 1400px. * На мобильных и обычных мониторах — нулевое влияние. * LCP = 0 мс: нет изображений, нет HTTP-запросов. */ @media (min-width: 1400px) { /* * Градиент применяется к корневому элементу с background-attachment: fixed. * Это даёт сквозной фон, не зависящий от прокрутки и от фоновых цветов * любых дочерних элементов — никаких body::before и z-index хаков. */ html { background-image: radial-gradient( ellipse 25% 110% at 0% 50%, oklch(0.82 0.025 250 / 0.40) 0%, transparent 85% ), radial-gradient( ellipse 25% 110% at 100% 50%, oklch(0.82 0.025 250 / 0.40) 0%, transparent 85% ); background-attachment: fixed; } /* * Делаем прозрачными все элементы, у которых тема задаёт явный * белый background-color — иначе они перекрывают градиент сверху. * Перечень составлен по точечной диагностике через elementsFromPoint. * * !important — страховка от более специфичных правил темы * (например, .preroll .inner перебивается чем-то в main-old.css). */ body { background-color: transparent !important; } header.main-header { background-color: transparent !important; } nav.main-nav { background-color: transparent !important; } .preroll { background-color: transparent !important; } .preroll .inner { background-color: transparent !important; } /* * Фолбэк для браузеров без OKLCH (Chrome < 111, Firefox < 113). * Эквивалент в sRGB: oklch(0.82 0.025 250) ≈ #b3c0d2 */ @supports not (color: oklch(0 0 0)) { html { background-image: radial-gradient( ellipse 25% 110% at 0% 50%, rgba(179, 192, 210, 0.40) 0%, transparent 85% ), radial-gradient( ellipse 25% 110% at 100% 50%, rgba(179, 192, 210, 0.40) 0%, transparent 85% ); } } }