/* ============================================================ OPTC — LAMPS v8.1 «GOLDEN WINDOWS — FINAL» Свет из двух верхних углов (ярче). Центр — тёмный. Идёт по диагонали, пересекается в средней части страницы, но точка пересечения намеренно приглушена. ============================================================ */ html body.optc-lens-page, html body.optc-opty-page, html body.optc-compl-page, html body.optc-repair-page, html body.optc-services-page { position: relative; isolation: isolate; } /* ============================================================ СЛОЙ 1 — ДВА ЯРКИХ ДИАГОНАЛЬНЫХ ЛУЧА ИЗ ВЕРХНИХ УГЛОВ Центральный огонь убран. Лучи сильные, длинные. ============================================================ */ html body.optc-lens-page::before, html body.optc-opty-page::before, html body.optc-compl-page::before, html body.optc-repair-page::before, html body.optc-services-page::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 1100px; pointer-events: none; z-index: 0; background: /* ЛЕВОЕ ОКНО — усилено, свет идёт вправо-вниз */ radial-gradient( ellipse 720px 1000px at -8% -12%, rgba(255, 224, 155, 0.36) 0%, rgba(255, 214, 145, 0.22) 20%, rgba(255, 205, 135, 0.10) 45%, rgba(255, 198, 125, 0.03) 68%, transparent 92% ), /* ПРАВОЕ ОКНО — усилено, зеркально */ radial-gradient( ellipse 720px 1000px at 108% -12%, rgba(255, 224, 155, 0.36) 0%, rgba(255, 214, 145, 0.22) 20%, rgba(255, 205, 135, 0.10) 45%, rgba(255, 198, 125, 0.03) 68%, transparent 92% ); animation: optcGoldenBreath 20s ease-in-out infinite; will-change: opacity; } /* ============================================================ СЛОЙ 2 — ТОЛЬКО ПОДСВЕТКА СНИЗУ Верхний центр — тёмный, без огня. ============================================================ */ html body.optc-lens-page::after, html body.optc-opty-page::after, html body.optc-compl-page::after, html body.optc-repair-page::after, html body.optc-services-page::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: /* Отражение света на «полу» — внизу страницы */ radial-gradient( ellipse 60% 220px at 50% 100%, rgba(255, 225, 165, 0.06) 0%, rgba(255, 220, 155, 0.02) 45%, transparent 80% ), /* Боковые отсветы от лучей на «стенах» */ radial-gradient( ellipse 300px 500px at 0% 70%, rgba(255, 215, 145, 0.05) 0%, transparent 78% ), radial-gradient( ellipse 300px 500px at 100% 70%, rgba(255, 215, 145, 0.05) 0%, transparent 78% ); animation: optcGoldenBreath 22s ease-in-out infinite; animation-delay: -8s; will-change: opacity; } /* ============================================================ АНИМАЦИИ ============================================================ */ @keyframes optcGoldenBreath { 0%, 100% { opacity: 1; } 50% { opacity: 0.86; } } /* ============================================================ АКЦЕНТ НА HERO-БЛОКЕ ============================================================ */ html body .optc-cat .optc-cat-hero, html body .optc-kit .optc-kit__hero, html body .optc-repair-constructor .optc-repair-hero { position: relative; z-index: 2; box-shadow: 0 1px 0 rgba(255, 235, 190, 0.08) inset, 0 0 100px rgba(255, 225, 165, 0.10), 0 12px 32px rgba(0, 0, 0, 0.5) !important; } html body .optc-cat .optc-cat-hero::before, html body .optc-kit .optc-kit__hero::before, html body .optc-repair-constructor .optc-repair-hero::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient( 135deg, rgba(255, 235, 190, 0.14) 0%, rgba(255, 225, 165, 0.05) 35%, transparent 60% ); pointer-events: none; z-index: -1; } /* ============================================================ ТОНКАЯ ЯРКАЯ КРОМКА СВЕРХУ — как «полоса неба за окном» ============================================================ */ html body.optc-lens-page, html body.optc-opty-page, html body.optc-compl-page, html body.optc-repair-page, html body.optc-services-page { background-image: linear-gradient( 180deg, rgba(255, 220, 150, 0.06) 0%, rgba(255, 220, 150, 0.02) 8%, transparent 16% ), linear-gradient(180deg, #050505 0%, #050505 100%) !important; background-attachment: fixed, scroll; } /* ============================================================ МОБИЛЬНАЯ ВЕРСИЯ ============================================================ */ @media (max-width: 900px) { html body.optc-lens-page::before, html body.optc-opty-page::before, html body.optc-compl-page::before, html body.optc-repair-page::before, html body.optc-services-page::before { height: 720px; background: radial-gradient( ellipse 500px 720px at -10% -8%, rgba(255, 224, 155, 0.32) 0%, rgba(255, 214, 145, 0.15) 35%, transparent 82% ), radial-gradient( ellipse 500px 720px at 110% -8%, rgba(255, 224, 155, 0.32) 0%, rgba(255, 214, 145, 0.15) 35%, transparent 82% ); } } @media (max-width: 560px) { html body.optc-lens-page::before, html body.optc-opty-page::before, html body.optc-compl-page::before, html body.optc-repair-page::before, html body.optc-services-page::before { height: 560px; background: radial-gradient( ellipse 380px 560px at -12% -6%, rgba(255, 224, 155, 0.28) 0%, transparent 82% ), radial-gradient( ellipse 380px 560px at 112% -6%, rgba(255, 224, 155, 0.28) 0%, transparent 82% ); } html body.optc-lens-page::after, html body.optc-opty-page::after, html body.optc-compl-page::after, html body.optc-repair-page::after, html body.optc-services-page::after { background: radial-gradient( ellipse 60% 180px at 50% 100%, rgba(255, 225, 165, 0.05) 0%, transparent 80% ); } } /* ============================================================ prefers-reduced-motion ============================================================ */ @media (prefers-reduced-motion: reduce) { html body.optc-lens-page::before, html body.optc-lens-page::after, html body.optc-opty-page::before, html body.optc-opty-page::after, html body.optc-compl-page::before, html body.optc-compl-page::after, html body.optc-repair-page::before, html body.optc-repair-page::after, html body.optc-services-page::before, html body.optc-services-page::after { animation: none !important; } }