/* ============================================================ UpCast – podcastové pozadia stránky. Načítaj PO style.css a PO landing.css / stiahnut.css. POUŽITIE: pridaj jednu triedu na : <- landing <- /stiahnut Vzory kreslí CSS, nie obrázky: nula requestov, ostré na retine a farbu berú z --accent-rgb, takže sa menia so sezónnym akcentom (accent.js) aj s tmavým režimom. Glow (ambientné svetlo) ostáva na ::before v landing.css / stiahnut.css, vzor sedí na ::after – vrstvia sa nad sebou. ============================================================ */ body[class*="bg-"]::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* ---------- 1. Mriežka mikrofónu ---------- Perforovaný plech mikrofónu. Zároveň to rýmuje s perforáciou účtenky v .ledger, takže vzor niečo znamená, nie je len ozdoba. Najtichšia z trojice – odporúčam ju pod obe stránky. */ body.bg-grille::after { background-image: radial-gradient(rgba(var(--accent-rgb), .26) 1.1px, transparent 1.6px); background-size: 20px 20px; /* smerom dole sa vytráca, aby nerušila text */ -webkit-mask-image: radial-gradient(120% 78% at 50% 0%, #000 26%, transparent 76%); mask-image: radial-gradient(120% 78% at 50% 0%, #000 26%, transparent 76%); } html.dark body.bg-grille::after { background-image: radial-gradient(rgba(var(--accent-rgb), .20) 1.1px, transparent 1.6px); } /* ---------- 2. Zvuková vlna ---------- SVG je len maska (bez farby), farbu dáva gradient pod ňou – preto vlna tiež sleduje sezónny akcent. */ body.bg-wave::after { top: auto; height: min(46vh, 420px); background: linear-gradient(180deg, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), .05)); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62 C15 38 25 84 40 60 C55 36 65 88 80 58 C95 28 105 82 120 56 C135 30 145 86 160 62 C175 38 185 80 200 58 C215 36 228 74 240 60 L240 100 L0 100Z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62 C15 38 25 84 40 60 C55 36 65 88 80 58 C95 28 105 82 120 56 C135 30 145 86 160 62 C175 38 185 80 200 58 C215 36 228 74 240 60 L240 100 L0 100Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-size: 640px 100%; mask-size: 640px 100%; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: bottom; mask-position: bottom; } html.dark body.bg-wave::after { background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .03)); } @media (max-width: 560px) { body.bg-wave::after { -webkit-mask-size: 380px 100%; mask-size: 380px 100%; } } /* ---------- 3. Vysielacie kruhy ---------- */ body.bg-rings::after { background-image: repeating-radial-gradient(circle at 92% -6%, transparent 0 58px, rgba(var(--accent-rgb), .13) 58px 60px); -webkit-mask-image: radial-gradient(90% 80% at 92% 0%, #000 20%, transparent 78%); mask-image: radial-gradient(90% 80% at 92% 0%, #000 20%, transparent 78%); } html.dark body.bg-rings::after { background-image: repeating-radial-gradient(circle at 92% -6%, transparent 0 58px, rgba(var(--accent-rgb), .10) 58px 60px); } @media (max-width: 560px) { body.bg-rings::after { background-image: repeating-radial-gradient(circle at 88% -4%, transparent 0 40px, rgba(var(--accent-rgb), .13) 40px 41.5px); } }