/** * ============================================ * RESPINNERSTV — SIGNAL FIELD (pozadí webu) * ============================================ * Celoplošná vrstva pod obsahem. Dvě patra: * 1) .sbg-fallback — statický CSS mesh gradient, VŽDY vykreslený. * 2) .sbg-canvas — WebGL shader, plynule se prolne přes fallback, * až když se opravdu rozjede (assets/js/shader-bg.js). * Když WebGL chybí, selže, je Save-Data / slabé zařízení / reduced-motion, * canvas prostě nikdy nenaběhne a zůstane fallback. Žádné blikání. * * VYPNUTÍ CELÉ VRSTVY: config.php → define('SHADER_BG', false); * (vrátí web přesně do stavu před touto změnou, viz konec souboru) * ============================================ */ /* ============================================ ⬛ LADICÍ MÍSTO — JEDINÉ, KDE SE MĚNÍ BARVY ============================================ Tyhle proměnné čte shader (přes getComputedStyle na ) i statický fallback níž. Změna tady = změna obojího. Musí to být hex (#rgb / #rrggbb), JS jiný zápis nerozparsuje. Držte je TMAVÉ. Jsou to vrcholové barvy pole, ne průměr — text nad nimi musí zůstat čitelný. Orientačně: nejsvětlejší bod pozadí ať nepřeleze luminanci ~#0a2029, což bílému textu drží kontrast okolo 16:1. */ :root { --sbg-base: #06060a; /* podklad, do kterého se vše mísí */ --sbg-c1: #0a2029; /* hlavní proud, tlumená studená modrozelená */ --sbg-c2: #171432; /* druhý proud, ztlumená fialová */ --sbg-c3: #241026; /* akcent, zaprášená purpurová (nejvzácnější) */ --sbg-intensity: 1; /* celkový jas pole (0.6 = výrazně tlumeněji) */ --sbg-symbols: 1; /* krytí slot symbolů v pozadí (0 = bez nich) */ --sbg-speed: 1; /* tempo pohybu (0.5 = poloviční) */ /* Deska hlavičky. Patří sem, ne do navbar.css: lišta leží přímo na poli, takže se obojí ladí společně. Průhlednost nechává pod deskou tušit pole, blur v navbar.css ji drží klidnou. */ --nav-plate: rgba(31, 27, 60, 0.90); --nav-plate-scrolled: rgba(24, 21, 48, 0.96); --nav-ico: #8f7fd8; /* barva ikon u položek menu */ } /* ============================================ HOSTITEL ============================================ position:fixed → mimo tok dokumentu, takže vrstva nemůže způsobit CLS. z-index:-2 → pod obsahem i pod starými dekoračními vrstvami. Canvas není LCP kandidát a CSS gradient (na rozdíl od url()) taky ne, takže se pozadí nemůže stát LCP prvkem. */ .sbg { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; contain: strict; /* izoluje layout/paint vrstvy od zbytku stránky */ } /* ---- Statický fallback (a zároveň podklad pod shaderem) ---- */ .sbg-fallback { position: absolute; inset: 0; background: /* světelné proudy */ radial-gradient(ellipse 110% 70% at 50% -8%, var(--sbg-c1) 0%, transparent 58%), radial-gradient(ellipse 85% 65% at 14% 26%, var(--sbg-c2) 0%, transparent 55%), radial-gradient(ellipse 75% 60% at 88% 72%, var(--sbg-c3) 0%, transparent 52%), radial-gradient(ellipse 90% 60% at 78% 8%, var(--sbg-c2) 0%, transparent 50%), /* podklad + vinětace ke spodku */ linear-gradient(180deg, var(--sbg-base) 0%, var(--sbg-base) 55%, #050508 100%); } /* ---- WebGL vrstva ---- */ .sbg-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; /* pomalý prolnutí místo skoku, až shader vykreslí první snímek */ transition: opacity 0.9s ease; } .sbg-canvas.is-live { opacity: 1; } /* Bez animací: prolnutí je skok (shader stejně vykreslí jen jeden snímek) */ @media (prefers-reduced-motion: reduce) { .sbg-canvas { transition: none; } } /* ============================================ NEUTRALIZACE PŮVODNÍCH DEKORAČNÍCH VRSTEV ============================================ Staré pozadí měl web ve třech patrech: body.cyber-body::before — 4 radiální gradienty body.cyber-body::after — 2 kruhové záře + blur(60px) .floating-slots-container — 8 slot obrázků + .cyber-grid mřížka Gradienty i mřížku nahradilo pole. Slot symboly zůstávají, jen se přestěhovaly do canvasu, kde je pole unáší. Nic se nemaže. Když se v config.php vypne SHADER_BG, atribut na zmizí, tyhle selektory přestanou platit a původní vrstvy se vrátí. */ html[data-shader-bg="on"] body.cyber-body::before, html[data-shader-bg="on"] body.cyber-body::after { content: none; } /* Pojistka proti pohřbení vrstvy. Prvky se záporným z-indexem se kreslí POD bloková pozadí v toku. Dokud má background-color jen , propaguje se na kořenové plátno a body si žádné vlastní pozadí nekreslí, takže je vrstva vidět. Jakmile by pozadí dostal i (dělá to třeba page-admin.css), propagace se zruší, body začne kreslit neprůhledný obdélník a Signal Field zmizí. Řešení: pozadí drží , body zůstává průhledné. Vizuálně shodné, protože obojí stejně překrývá celoplošná vrstva .sbg. */ html[data-shader-bg="on"] { background-color: var(--sbg-base, #06060a); } html[data-shader-bg="on"] body.cyber-body { background-color: transparent; } /* Mřížka jde pryč úplně. */ html[data-shader-bg="on"] .cyber-grid { display: none; } /* Slot symboly naopak zůstávají viditelné, dokud shader nekreslí: - než se WebGL rozjede (pár set ms) - když se nerozjede vůbec (bez WebGL, slabé zařízení, Save-Data) - když se vrstva později sama vypne (perf-mode.js naměří propad FPS) Jakmile canvas ožije, doplní JS na třídu .sbg-live a statické symboly se vytratí. Pozice v shaderu jsou opsané odsud, takže výměna není vidět jako přeskok. Třída místo :has() schválně: :has() umí Firefox až od verze 121 a starší by nechal viset obě sady symbolů přes sebe. */ html[data-shader-bg="on"] .floating-slot { transition: opacity 0.5s ease; } html[data-shader-bg="on"].sbg-live .floating-slot { opacity: 0; }