/* ═══════════════════════════════════════════════════════════
Хэллоуин: паутина по верхним углам.
Подключается одной строкой и так же убирается после ивента.
Разметку не трогает - рисуется на свободных body::before/after.
Цвет задаётся маской, поэтому подходит обеим темам.
═══════════════════════════════════════════════════════════ */
body::before,
body::after {
content: "";
position: fixed;
top: 0;
width: min(170px, 30vw);
height: min(170px, 30vw);
z-index: 3;
pointer-events: none;
background-color: rgba(255, 255, 255, 0.45);
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
body::before { left: 0; }
body::after { right: 0; transform: scaleX(-1); }
@media (prefers-color-scheme: dark) {
body::before,
body::after { background-color: rgba(233, 212, 241, 0.32); }
}
/* На телефоне шапка узкая, паутина не должна лезть на логотип */
@media (max-width: 600px) {
body::before,
body::after {
width: min(104px, 26vw);
height: min(104px, 26vw);
background-color: rgba(255, 255, 255, 0.32);
}
}