/* ============================================================ Stream From Conddiz — página pública (ouvinte) Dark theme, mobile-first, zero dependências externas. Paleta derivada da logo: azul #2979FF · teal #00C9A7 · verde #69F0AE SKINS POR ESTAÇÃO: aplicadas via (player.js seta a partir de api/nowplaying → station.skin; override de debug ?skin= na querystring). Tudo que a skin controla vive em CSS vars neste :root; cada skin é um bloco :root[data-skin="…"] que só sobrescreve tokens (+ poucos ajustes estruturais no fim do arquivo, p/ a "clean"). Sem data-skin (ou "retro") = visual padrão atual. ============================================================ */ :root { /* -- página -- */ --bg0: #05070d; --bg1: #0a1120; --text: #eef2f8; --muted: #93a1b8; --text-strong: #dfe7f2; --title-color: #fff; --title-grad-a: #ffffff; --title-grad-b: #b9c9e2; --accent1: #2979ff; --accent2: #00c9a7; --accent3: #69f0ae; --grad: linear-gradient(135deg, var(--accent1) 0%, var(--accent2) 55%, var(--accent3) 100%); --live: #ff4d5e; --card-bg: rgba(13, 20, 36, 0.55); --card-border: rgba(255, 255, 255, 0.08); --card-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); --card2-bg: rgba(13, 20, 36, 0.35); --chip-bg: rgba(255, 255, 255, 0.03); --chip-border: rgba(255, 255, 255, 0.06); --track: rgba(255, 255, 255, 0.08); --track2: rgba(255, 255, 255, 0.14); --hover-bg: rgba(255, 255, 255, 0.06); --hover-strong: #fff; --warn: #ffc46b; --radius: 22px; /* -- fundo da página (gradientes + blobs) -- */ --page-top: #081020; --page-glow-a: rgba(41, 121, 255, 0.16); --page-glow-b: rgba(0, 201, 167, 0.13); --blob-a: rgba(41, 121, 255, 0.55); --blob-b: rgba(0, 201, 167, 0.45); /* -- capa do cliente (bg_url): overlay p/ legibilidade -- */ --bg-overlay: rgba(4, 8, 14, 0.68); --bg-blur: 4px; /* -- botão play / marca -- */ --play-grad: var(--grad); --play-fg: #04131c; --play-glow-rgb: 0, 201, 167; --logo-glow: rgba(0, 201, 167, 0.35); } /* ---------- Reset leve ---------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg0); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.45; } img { max-width: 100%; display: inline-block; } h1, h2, p, ol { margin: 0; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } [hidden] { display: none !important; } ::selection { background: rgba(0, 201, 167, 0.35); } :focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; border-radius: 8px; } /* ---------- Fundo (gradientes + blobs suaves) ---------- */ .bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1200px 800px at 82% -12%, var(--page-glow-a), transparent 60%), radial-gradient(1000px 720px at -12% 112%, var(--page-glow-b), transparent 60%), linear-gradient(180deg, var(--page-top) 0%, var(--bg0) 68%); } .bg::before, .bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.32; } .bg::before { width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax; background: radial-gradient(circle, var(--blob-a), transparent 65%); animation: drift 28s ease-in-out infinite alternate; } .bg::after { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -14vmax; background: radial-gradient(circle, var(--blob-b), transparent 65%); animation: drift 34s ease-in-out infinite alternate-reverse; } /* ---------- Capa do cliente (bg_url / ?bg=) ---------- player.js seta --bg-image e a classe .has-image; a imagem entra em cover fixo e o ::before vira um overlay escurecedor + desfoque sutil (na skin clean o overlay é claro — tokens --bg-overlay/--bg-blur). */ .bg.has-image { background: var(--bg-image) center center / cover no-repeat var(--bg0); } .bg.has-image::before { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; filter: none; opacity: 1; animation: none; background: var(--bg-overlay); -webkit-backdrop-filter: blur(var(--bg-blur)); backdrop-filter: blur(var(--bg-blur)); } .bg.has-image::after { display: none; } @keyframes drift { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: 620px; margin-inline: auto; min-height: 100dvh; padding: 22px 18px 26px; display: flex; flex-direction: column; gap: 20px; } /* ---------- Hero ---------- */ .hero { text-align: center; padding-top: clamp(6px, 3vw, 22px); } .logo { width: clamp(118px, 32vw, 164px); filter: drop-shadow(0 8px 34px var(--logo-glow)); } .station-name { margin-top: 4px; font-size: clamp(1.55rem, 6vw, 2.25rem); font-weight: 850; letter-spacing: -0.02em; color: var(--title-color); } @supports (-webkit-background-clip: text) or (background-clip: text) { .station-name { background: linear-gradient(92deg, var(--title-grad-a) 20%, var(--title-grad-b) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .slogan { margin-top: 5px; color: var(--muted); font-size: 0.98rem; } /* ---------- Card (glassmorphism leve) ---------- */ .card { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 22px; -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: var(--card-shadow); } /* ---------- Topo do player: badge + ouvintes ---------- */ .player-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 77, 94, 0.35); background: rgba(255, 77, 94, 0.08); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; color: #ff8f9a; white-space: nowrap; transition: color 0.3s, border-color 0.3s, background 0.3s; } .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px rgba(255, 77, 94, 0.8); transition: background 0.3s, box-shadow 0.3s; } .badge.pulse .dot { animation: livedot 1.4s ease-in-out infinite; } @keyframes livedot { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px rgba(255, 77, 94, 0.9); } 50% { opacity: 0.45; transform: scale(0.78); box-shadow: 0 0 3px rgba(255, 77, 94, 0.4); } } .badge.off { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--muted); } .badge.off .dot { background: #8a94a6; box-shadow: none; animation: none; } .listeners { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .listeners svg { width: 15px; height: 15px; flex: none; } /* ============================================================ DISPLAY RETRÔ (Tocando agora) Moldura física + "vidro" recuado com scanlines CRT, texto com glow verde vintage e número grande âmbar (Orbitron). O display é um componente dentro da página dark; a identidade da marca segue no resto (gradiente azul→verde na wavebar e no progresso). ============================================================ */ :root { /* Texto do "vidro" (CRT/VFD) */ --crt-green: #00ff66; /* cor plena dos LEDs/barras de sinal */ --crt-text: #a9ffce; /* título da faixa */ --crt-dim: rgba(135, 255, 180, 0.66); --crt-faint: rgba(135, 255, 180, 0.34); --crt-idle: rgba(135, 255, 180, 0.14); /* barras de sinal apagadas */ --crt-glow-rgb: 0, 255, 102; /* canal RGB dos glows do vidro */ /* Número grande (tempo decorrido) */ --crt-amber: #ffc46b; --freq-glow-a: rgba(255, 178, 80, 0.55); --freq-glow-b: rgba(255, 150, 40, 0.3); /* Moldura + vidro */ --frame-grad: linear-gradient(180deg, #262d36 0%, #13181f 52%, #1b212a 100%); --frame-border: rgba(255, 255, 255, 0.07); --frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 6px rgba(0, 0, 0, 0.55), 0 12px 30px rgba(0, 0, 0, 0.4); --glass-bg: radial-gradient(130% 150% at 50% -10%, #0a2114 0%, #051308 58%, #030f08 100%); --glass-border: rgba(0, 0, 0, 0.85); --glass-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.85), inset 0 0 46px rgba(var(--crt-glow-rgb), 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.03); /* Wavebar (lidas pelo retro.js via getComputedStyle; hex #rrggbb) */ --wave-from: #1d5fb0; --wave-to: #74e6b0; /* Progresso */ --progress-grad: linear-gradient(90deg, var(--accent1), var(--accent2) 60%, var(--accent3)); --progress-anim: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3), var(--accent2), var(--accent1)); } /* Moldura física do rádio */ .retro-frame { background: var(--frame-grad); border: 1px solid var(--frame-border); border-radius: 16px; padding: 11px 11px 12px; box-shadow: var(--frame-shadow); } /* Vidro recuado com scanlines */ .retro-glass { position: relative; overflow: hidden; border-radius: 9px; border: 1px solid var(--glass-border); background: var(--glass-bg); padding: 12px 14px 10px; box-shadow: var(--glass-shadow); } /* Malha de pixels CRT (linhas horizontais + verticais) */ .retro-glass::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px); } /* Brilho do vidro + vinheta */ .retro-glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, transparent 26%), radial-gradient(120% 90% at 50% 110%, transparent 62%, rgba(0, 0, 0, 0.4) 100%); } /* Linha superior: estação + barras de sinal */ .retro-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .retro-ch { font-family: "Share Tech Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--crt-dim); text-shadow: 0 0 6px rgba(var(--crt-glow-rgb), 0.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .retro-signal { display: inline-flex; align-items: flex-end; gap: 2px; flex: none; height: 13px; } .retro-signal i { display: block; width: 4px; border-radius: 1px; background: var(--crt-idle); box-shadow: none; transition: background 0.4s, box-shadow 0.4s; } .retro-signal i:nth-child(1) { height: 4px; } .retro-signal i:nth-child(2) { height: 7px; } .retro-signal i:nth-child(3) { height: 10px; } .retro-signal i:nth-child(4) { height: 13px; } .retro-signal[data-level="1"] i:nth-child(1), .retro-signal[data-level="2"] i:nth-child(-n+2), .retro-signal[data-level="3"] i:nth-child(-n+3), .retro-signal[data-level="4"] i:nth-child(-n+4) { background: var(--crt-green); box-shadow: 0 0 6px rgba(var(--crt-glow-rgb), 0.65); } /* TÍTULO — ARTISTA em mono com glow */ .np-song { position: relative; margin-top: 10px; min-width: 0; font-family: "Share Tech Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .np-song.anim { animation: np-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; } @keyframes np-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .np-title { font-size: clamp(1.02rem, 4.4vw, 1.3rem); color: var(--crt-text); text-shadow: 0 0 5px rgba(var(--crt-glow-rgb), 0.5), 0 0 20px rgba(var(--crt-glow-rgb), 0.2); } .np-artist { font-size: clamp(0.92rem, 4vw, 1.12rem); color: var(--crt-dim); text-shadow: 0 0 5px rgba(var(--crt-glow-rgb), 0.3); } #np-artist:not(:empty)::before { content: "— "; } /* Número grande (tempo decorrido) + LEDs */ .retro-freq-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; } .time.retro-freq { font-family: "Orbitron", "Share Tech Mono", ui-monospace, monospace; font-size: clamp(2.15rem, 9.5vw, 3rem); font-weight: 700; letter-spacing: 0.05em; line-height: 1; color: var(--crt-amber); text-shadow: 0 0 8px var(--freq-glow-a), 0 0 30px var(--freq-glow-b); font-variant-numeric: tabular-nums; min-width: 0; } .retro-leds { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding-bottom: 4px; } .led { display: inline-flex; align-items: center; gap: 6px; font-family: "Share Tech Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.62rem; letter-spacing: 0.16em; color: var(--crt-faint); white-space: nowrap; transition: color 0.4s; } .led-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6); transition: background 0.4s, box-shadow 0.4s; } .led.on { color: var(--crt-dim); } .led.on .led-dot { background: var(--crt-green); box-shadow: 0 0 7px rgba(var(--crt-glow-rgb), 0.75); } .led-live.on { color: #ff9d95; } .led-live.on .led-dot { background: #ff453a; box-shadow: 0 0 8px rgba(255, 69, 58, 0.85); animation: leddot 1.4s ease-in-out infinite; } @keyframes leddot { 0%, 100% { opacity: 1; box-shadow: 0 0 9px rgba(255, 69, 58, 0.9); } 50% { opacity: 0.4; box-shadow: 0 0 3px rgba(255, 69, 58, 0.4); } } /* Wavebar na base do vidro */ .retro-wave { position: relative; height: 46px; margin-top: 12px; } .retro-wave canvas { display: block; width: 100%; height: 100%; } .wave-fallback { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; } .wave-fallback i { flex: 1; height: 100%; border-radius: 1px; transform: scaleY(0.05); transform-origin: bottom; opacity: 0.55; animation: wavecss 1s ease-in-out infinite alternate; animation-play-state: paused; } .wave-fallback.on i { animation-play-state: running; opacity: 0.9; } @keyframes wavecss { from { transform: scaleY(0.08); } to { transform: scaleY(0.9); } } /* ---------- Fora do ar (dentro do vidro) ---------- */ .offair-state { display: none; } .player.offair .offair-state { position: relative; /* acima das camadas ::before/::after do vidro */ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 0 16px; text-align: center; } .player.offair .np-song, .player.offair .retro-freq-row, .player.offair .retro-wave, .player.offair .progress-row { display: none; } .offair-state svg { width: 32px; height: 32px; color: var(--crt-dim); opacity: 0.9; margin-bottom: 4px; filter: drop-shadow(0 0 6px rgba(var(--crt-glow-rgb), 0.35)); } .offair-title { font-family: "Share Tech Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.02rem; color: var(--crt-text); text-shadow: 0 0 5px rgba(var(--crt-glow-rgb), 0.45); text-wrap: balance; } .offair-sub { font-size: 0.85rem; color: var(--crt-dim); } .player.offair .led-live .led-dot { animation: none; } .player.offair .btn-play { filter: grayscale(0.55) brightness(0.8); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); } .player.offair .btn-play:hover { filter: grayscale(0.3) brightness(0.92); } /* ---------- Progresso ---------- */ .progress-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 0 3px; } .time { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 38px; } .time:last-child { text-align: right; min-width: auto; } .progress-row .time { font-family: "Share Tech Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8rem; } .progress { flex: 1; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; } .progress-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--progress-grad); } .player.playing .progress-fill { background: var(--progress-anim); background-size: 300% 100%; animation: sheen 6s linear infinite; } @keyframes sheen { from { background-position: 0% 0; } to { background-position: 300% 0; } } .progress.indeterminate .progress-fill { width: 35% !important; animation: indet 1.6s ease-in-out infinite; } @keyframes indet { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } } /* ---------- Controles ---------- */ .controls { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .btn-play { position: relative; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: var(--play-grad); color: var(--play-fg); box-shadow: 0 14px 34px rgba(var(--play-glow-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease; } .btn-play:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 44px rgba(var(--play-glow-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn-play:active { transform: scale(0.95); } .btn-play svg { width: 34px; height: 34px; } .btn-play .ic-play { transform: translateX(0); } .btn-play .ic-pause { display: none; } .btn-play.is-playing .ic-play { display: none; } .btn-play.is-playing .ic-pause { display: block; } .player.playing .btn-play::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; animation: halo 2s ease-out infinite; } @keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(var(--play-glow-rgb), 0.45); } 70% { box-shadow: 0 0 0 24px rgba(var(--play-glow-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--play-glow-rgb), 0); } } /* Volume */ .vol-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 280px; } .btn-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); transition: color 0.2s, background 0.2s; } .btn-icon:hover { color: var(--hover-strong); background: var(--hover-bg); } .btn-icon svg { width: 20px; height: 20px; display: block; } .btn-icon .ic-vol-off { display: none; } .btn-icon.is-muted .ic-vol { display: none; } .btn-icon.is-muted .ic-vol-off { display: block; } .btn-icon.is-muted + .volume { opacity: 0.45; } .volume { -webkit-appearance: none; appearance: none; flex: 1; height: 22px; background: transparent; cursor: pointer; --fill: 80%; } .volume::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--accent2) var(--fill), var(--track2) var(--fill)); } .volume::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; margin-top: -5px; border: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); transition: transform 0.15s; } .volume::-webkit-slider-thumb:hover { transform: scale(1.15); } /* Anel de foco visível também no polegar do slider (teclado) */ .volume:focus-visible { outline: none; } .volume:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(var(--play-glow-rgb), 0.55); } .volume:focus-visible::-moz-range-thumb { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(var(--play-glow-rgb), 0.55); } .volume::-moz-range-track { height: 5px; border-radius: 999px; background: var(--track2); } .volume::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--accent2); } .volume::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); } /* Status do player */ .status { margin-top: 14px; text-align: center; font-size: 0.85rem; color: var(--muted); min-height: 1.35em; transition: color 0.3s; } .status.is-warn { color: var(--warn); } /* ---------- Próxima ---------- */ .next { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--chip-border); background: var(--chip-bg); font-size: 0.92rem; color: var(--text); min-width: 0; } .next-label { color: var(--accent3); font-weight: 650; flex: none; } .next-song { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ---------- Histórico ---------- */ .history { background: var(--card2-bg); border: 1px solid var(--chip-border); border-radius: 18px; padding: 16px 18px; } .history-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .history-list { list-style: none; padding: 0; } .history-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 8px; margin-inline: -6px; border-radius: 10px; transition: background 0.2s; } .history-list li:hover { background: var(--hover-bg); } .history-list li + li { border-top: 1px solid var(--chip-border); } .h-main { display: flex; flex-direction: column; min-width: 0; } .h-title { font-size: 0.92rem; font-weight: 550; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .h-artist { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .h-time { flex: none; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; } /* ---------- Rodapé ---------- */ .foot { margin-top: auto; text-align: center; font-size: 0.8rem; color: var(--muted); opacity: 0.85; /* contraste AA no corpo pequeno */ } /* ---------- Telas maiores ---------- */ @media (min-width: 640px) { .wrap { padding: 34px 24px 32px; gap: 24px; } .card { padding: 30px 34px; } .btn-play { width: 92px; height: 92px; } .btn-play svg { width: 38px; height: 38px; } .retro-glass { padding: 14px 18px 12px; } .retro-wave { height: 54px; } } /* ---------- Movimento reduzido ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ DIRETÓRIO DE ESTAÇÕES (directory.html — servido na raiz) Reusa o tema acima: .bg, .hero, .card, .badge, .listeners. (O bloco de movimento reduzido continua valendo: usa !important.) ============================================================ */ .wrap-dir { max-width: 1040px; } .wrap-dir .logo { width: clamp(104px, 26vw, 140px); } .dir-status { text-align: center; color: var(--muted); font-size: 0.9rem; } .dir-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; } .dir-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; min-width: 0; transition: transform 0.18s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .dir-card:hover { transform: translateY(-3px); border-color: rgba(0, 201, 167, 0.26); box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07); } .dir-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; } .dir-name { font-size: 1.28rem; font-weight: 800; letter-spacing: -0.01em; color: #f4f7fc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-slogan { color: var(--muted); font-size: 0.9rem; min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-np { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.04); } .dir-np-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent2); } .dir-np-song { min-width: 0; font-size: 0.95rem; color: #dfe7f2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-np-artist { color: var(--muted); } .dir-np.off { color: var(--muted); font-size: 0.9rem; } .dir-listen { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--grad); color: #04131c; font-weight: 750; font-size: 0.95rem; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 201, 167, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease; } .dir-listen svg { width: 17px; height: 17px; flex: none; } .dir-listen:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0, 201, 167, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .dir-listen:active { transform: scale(0.97); } .dir-card.off .dir-listen { filter: grayscale(0.5) brightness(0.85); } .dir-card.off .dir-listen:hover { filter: grayscale(0.25) brightness(0.95); } .dir-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 46px 24px; border-radius: var(--radius); border: 1px dashed rgba(255, 255, 255, 0.13); background: rgba(13, 20, 36, 0.35); text-align: center; } .dir-empty svg { width: 38px; height: 38px; color: var(--muted); opacity: 0.85; margin-bottom: 6px; } .dir-empty-title { font-size: 1.12rem; font-weight: 650; color: #dbe4f2; text-wrap: balance; } .dir-empty-sub { font-size: 0.88rem; color: var(--muted); } @media (min-width: 640px) { .dir-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .dir-card { padding: 22px; } } @media (min-width: 960px) { .dir-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ SKINS POR ESTAÇÃO retro = padrão (tokens do :root acima — nada a sobrescrever) amber = display âmbar monocromático, vibe rádio valvulado neon = ciano/azul frio, vibe synthwave clean = claro minimalista, sem CRT — rádios corporativas ============================================================ */ /* ---------- SKIN: AMBER (rádio antigo, monocromático quente) ---------- */ :root[data-skin="amber"] { --bg0: #0b0602; --page-top: #160d03; --text: #f6efe3; --muted: #b5a186; --text-strong: #f0e2cc; --title-grad-a: #fff7ec; --title-grad-b: #e2cba6; --accent1: #d97400; --accent2: #ff9900; --accent3: #ffc266; --page-glow-a: rgba(255, 153, 0, 0.12); --page-glow-b: rgba(200, 90, 0, 0.10); --blob-a: rgba(255, 153, 0, 0.42); --blob-b: rgba(210, 110, 0, 0.36); --card-bg: rgba(30, 19, 8, 0.55); --card-border: rgba(255, 190, 110, 0.09); --card2-bg: rgba(30, 19, 8, 0.35); --chip-bg: rgba(255, 190, 110, 0.04); --chip-border: rgba(255, 190, 110, 0.08); --play-fg: #251200; --play-glow-rgb: 255, 153, 0; --logo-glow: rgba(255, 153, 0, 0.35); --bg-overlay: rgba(14, 7, 1, 0.7); /* display */ --crt-green: #ff9900; --crt-text: #ffd9a0; --crt-dim: rgba(255, 196, 120, 0.72); --crt-faint: rgba(255, 196, 120, 0.36); --crt-idle: rgba(255, 196, 120, 0.14); --crt-glow-rgb: 255, 153, 0; --crt-amber: #ffe2ad; --freq-glow-a: rgba(255, 170, 60, 0.55); --freq-glow-b: rgba(255, 140, 20, 0.3); --frame-grad: linear-gradient(180deg, #36291a 0%, #191006 52%, #241809 100%); --frame-border: rgba(255, 220, 160, 0.08); --glass-bg: radial-gradient(130% 150% at 50% -10%, #241302 0%, #140a02 58%, #0e0601 100%); --wave-from: #8a4500; --wave-to: #ffb84d; } /* ---------- SKIN: NEON (synthwave — ciano frio + toque magenta) ---------- */ :root[data-skin="neon"] { --bg0: #04060f; --page-top: #080d20; --text: #eaf3fc; --muted: #94a8cd; --text-strong: #dde9f8; --title-grad-a: #ffffff; --title-grad-b: #a9c6f0; --accent1: #2b6bff; --accent2: #00f0ff; --accent3: #7df3ff; --page-glow-a: rgba(0, 240, 255, 0.10); --page-glow-b: rgba(130, 70, 255, 0.12); --blob-a: rgba(0, 180, 255, 0.45); --blob-b: rgba(140, 70, 255, 0.40); --card-bg: rgba(9, 16, 34, 0.55); --card-border: rgba(140, 220, 255, 0.10); --card2-bg: rgba(9, 16, 34, 0.35); --chip-bg: rgba(140, 220, 255, 0.04); --chip-border: rgba(140, 220, 255, 0.09); --play-fg: #00161c; --play-glow-rgb: 0, 240, 255; --logo-glow: rgba(0, 240, 255, 0.32); --bg-overlay: rgba(3, 6, 16, 0.7); /* display */ --crt-green: #00f0ff; --crt-text: #c2f3ff; --crt-dim: rgba(160, 235, 255, 0.70); --crt-faint: rgba(160, 235, 255, 0.34); --crt-idle: rgba(160, 235, 255, 0.14); --crt-glow-rgb: 0, 240, 255; --crt-amber: #e6fbff; --freq-glow-a: rgba(0, 220, 255, 0.55); --freq-glow-b: rgba(120, 140, 255, 0.30); --frame-grad: linear-gradient(180deg, #242c3d 0%, #0f1420 52%, #171f31 100%); --frame-border: rgba(170, 220, 255, 0.08); --glass-bg: radial-gradient(130% 150% at 50% -10%, #05222e 0%, #03131d 58%, #020c15 100%); --wave-from: #00d9ff; --wave-to: #b96bf5; } /* ---------- SKIN: CLEAN (claro, glassmorphism, sem CRT) ---------- */ :root[data-skin="clean"] { color-scheme: light; --bg0: #eef2f8; --page-top: #ffffff; --text: #1c2740; --muted: #5b6b85; --text-strong: #22304a; --title-color: #1c2740; --title-grad-a: #1c2740; --title-grad-b: #3d5170; --page-glow-a: rgba(41, 121, 255, 0.10); --page-glow-b: rgba(0, 201, 167, 0.09); --blob-a: rgba(41, 121, 255, 0.20); --blob-b: rgba(0, 201, 167, 0.18); --card-bg: rgba(255, 255, 255, 0.72); --card-border: rgba(23, 43, 77, 0.08); --card-shadow: 0 18px 44px rgba(23, 43, 77, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8); --card2-bg: rgba(255, 255, 255, 0.6); --chip-bg: rgba(23, 43, 77, 0.04); --chip-border: rgba(23, 43, 77, 0.09); --track: rgba(23, 43, 77, 0.12); --track2: rgba(23, 43, 77, 0.14); --hover-bg: rgba(23, 43, 77, 0.06); --hover-strong: #12203a; --warn: #8a5800; --logo-glow: rgba(23, 43, 77, 0.18); --bg-overlay: rgba(246, 249, 253, 0.82); --bg-blur: 6px; /* display → card limpo */ --crt-green: #00a37c; --crt-text: #1e2c49; --crt-dim: #4a5c78; --crt-faint: #93a1b8; --crt-idle: rgba(23, 43, 77, 0.14); --crt-glow-rgb: 0, 163, 124; --crt-amber: #1d63e0; --freq-glow-a: transparent; --freq-glow-b: transparent; --frame-grad: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); --frame-border: rgba(23, 43, 77, 0.08); --frame-shadow: 0 14px 36px rgba(23, 43, 77, 0.10), inset 0 1px 0 #fff; --glass-bg: linear-gradient(180deg, #f7fafd 0%, #f2f6fb 100%); --glass-border: rgba(23, 43, 77, 0.07); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); --wave-from: #2979ff; --wave-to: #00b08c; } /* Ajustes estruturais da CLEAN: some o CRT, entra tipografia Jakarta. (Nada disso roda nas skins escuras — scanlines e glows continuam lá.) */ [data-skin="clean"] .retro-glass::before, [data-skin="clean"] .retro-glass::after { display: none; } [data-skin="clean"] .retro-ch, [data-skin="clean"] .np-song, [data-skin="clean"] .led, [data-skin="clean"] .offair-title, [data-skin="clean"] .progress-row .time { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } [data-skin="clean"] .retro-ch { font-weight: 800; font-size: 0.66rem; letter-spacing: 0.15em; text-shadow: none; } [data-skin="clean"] .np-title { font-weight: 700; text-shadow: none; } [data-skin="clean"] .np-artist { text-shadow: none; } [data-skin="clean"] .time.retro-freq { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-shadow: none; } [data-skin="clean"] .led { font-weight: 700; letter-spacing: 0.13em; } [data-skin="clean"] .led-dot { box-shadow: none; background: rgba(23, 43, 77, 0.16); } [data-skin="clean"] .led.on .led-dot { background: var(--crt-green); box-shadow: none; } [data-skin="clean"] .led-live.on { color: #c81e2e; } [data-skin="clean"] .led-live.on .led-dot { background: #e02535; box-shadow: none; } [data-skin="clean"] .retro-signal i { box-shadow: none !important; } [data-skin="clean"] .offair-title { text-shadow: none; } [data-skin="clean"] .offair-state svg { filter: none; } [data-skin="clean"] .badge.off { border-color: rgba(23, 43, 77, 0.14); background: rgba(23, 43, 77, 0.04); } [data-skin="clean"] .badge:not(.off) { color: #c81e2e; } [data-skin="clean"] .next-label { color: #067a5e; } [data-skin="clean"] .volume::-webkit-slider-thumb { border: 1px solid rgba(23, 43, 77, 0.25); box-shadow: 0 1px 4px rgba(23, 43, 77, 0.3); } [data-skin="clean"] .volume::-moz-range-thumb { border: 1px solid rgba(23, 43, 77, 0.25); box-shadow: 0 1px 4px rgba(23, 43, 77, 0.3); } [data-skin="clean"] ::selection { background: rgba(41, 121, 255, 0.22); } /* ---------- Logo do cliente nos cards do diretório ---------- */ .dir-head { display: flex; align-items: center; gap: 12px; min-width: 0; } .dir-head .dir-name { flex: 1; min-width: 0; } .dir-logo { width: 46px; height: 46px; flex: none; border-radius: 11px; object-fit: cover; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); } /* ---------- SKIN: VINTAGE (rádio de estúdio dourado — recriação funcional) ---------- Recriação em CSS/JS do mockup res/retroradio.png: madeira escura + latão, grade de tecido com o nome da estação, medidores de LED reais (vintage.js), relógio AGORA, knob de volume funcional e rodapé social configurável. */ :root[data-skin="vintage"] { --bg0: #151009; --page-top: #1e1710; --text: #f2e6cf; --muted: #b3a284; --text-strong: #ecdcbb; --title-grad-a: #f7ecd4; --title-grad-b: #d3b681; --accent1: #a8823f; --accent2: #d4ab5e; --accent3: #f0cf8e; --page-glow-a: rgba(212, 171, 94, 0.10); --page-glow-b: rgba(140, 100, 40, 0.10); --blob-a: rgba(212, 171, 94, 0.30); --blob-b: rgba(120, 80, 30, 0.28); --card-bg: transparent; --card-border: transparent; --card2-bg: rgba(28, 20, 12, 0.5); --chip-bg: rgba(0, 0, 0, 0.35); --chip-border: rgba(212, 171, 94, 0.25); --play-grad: radial-gradient(circle at 34% 30%, #6b4f22 0%, #3a2a10 70%); --play-fg: #f5d792; --play-glow-rgb: 240, 178, 80; --logo-glow: rgba(212, 171, 94, 0.35); --bg-overlay: rgba(16, 11, 6, 0.75); --crt-green: #f5d792; --crt-text: #f2e6cf; --crt-dim: rgba(240, 217, 160, 0.75); --crt-faint: rgba(240, 217, 160, 0.35); --crt-idle: rgba(240, 217, 160, 0.14); --crt-glow-rgb: 240, 178, 80; --crt-amber: #ffd98c; --freq-glow-a: rgba(250, 205, 120, 0.5); --freq-glow-b: rgba(220, 160, 60, 0.28); --progress-grad: linear-gradient(90deg, #8a6a2d, #f0cf8e); --wave-from: #6d5220; --wave-to: #ffd98c; /* privados da skin */ --vg-wood: linear-gradient(160deg, #4a3018 0%, #2c1b0d 45%, #38230f 78%, #22150a 100%); --vg-panel: #16100a; --vg-panel-border: rgba(216, 179, 113, 0.35); --vg-led-off: rgba(255, 200, 110, 0.13); --vg-led-on: #ffb84a; } /* gabinete: madeira + filete de latão */ [data-skin="vintage"] .player { display: grid; grid-template-columns: 104px 1fr 126px; grid-template-areas: "top top top" "grille grille grille" "badge np side" "controls controls actions" "status status status" "social social social"; gap: 12px; padding: 16px 18px 14px; background: var(--vg-wood); border: 2px solid #8a6a35; border-radius: 26px; box-shadow: inset 0 0 0 3px rgba(240, 208, 140, 0.28), inset 0 18px 40px rgba(0, 0, 0, 0.45), 0 24px 50px rgba(0, 0, 0, 0.6); } [data-skin="vintage"] .player-top { grid-area: top; } /* grade de tecido com o nome da estação + medidores */ [data-skin="vintage"] .vg-grille { grid-area: grille; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 92px; padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(216, 179, 113, 0.45); background: radial-gradient(140% 120% at 50% 0%, rgba(255, 210, 130, 0.10) 0%, transparent 55%), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0 2px, rgba(150, 110, 55, 0.5) 2px 3px, rgba(60, 40, 18, 0.6) 3px 5px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 2px, rgba(170, 128, 62, 0.35) 2px 3px, transparent 3px 5px), #2b1c0e; box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.6); } .vg-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .vg-brand-name { font-family: "Segoe Script", "Brush Script MT", "Comic Sans MS", cursive; font-size: clamp(1.3rem, 4.5vw, 1.9rem); font-weight: 700; color: #ecc87e; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 18px rgba(236, 200, 126, 0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .vg-brand-sub { font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; color: #c9a45c; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } .vg-meters { display: flex; gap: 14px; flex: none; } .vg-meter { display: flex; flex-direction: column; align-items: center; gap: 4px; } .vg-meter-label { font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase; color: #d3b681; } .vg-meter-col { display: flex; flex-direction: column; gap: 2px; padding: 5px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(216, 179, 113, 0.3); } .vg-meter-col i { width: 18px; height: 4px; border-radius: 2px; background: var(--vg-led-off); } .vg-meter-col i.on { background: var(--vg-led-on); box-shadow: 0 0 6px rgba(255, 184, 74, 0.8); } /* selo neon (logo do cliente ou microfone) */ [data-skin="vintage"] .vg-badge { grid-area: badge; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border-radius: 14px; background: var(--vg-panel); border: 1px solid var(--vg-panel-border); box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.6); min-height: 118px; } .vg-badge img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; box-shadow: 0 0 14px rgba(255, 120, 40, 0.35); } .vg-badge svg { width: 40px; height: 40px; color: #ff7a2f; filter: drop-shadow(0 0 8px rgba(255, 110, 40, 0.9)) drop-shadow(0 0 20px rgba(255, 90, 20, 0.5)); } .vg-badge-label { font-size: 0.52rem; font-weight: 800; letter-spacing: 0.14em; color: #ffb37a; text-shadow: 0 0 8px rgba(255, 120, 40, 0.6); text-align: center; max-width: 100%; line-height: 1.5; overflow-wrap: break-word; /* nome completo, quebrando em linhas centralizadas */ } /* display central = painel escuro (aproveita o retro-frame) */ [data-skin="vintage"] .retro-frame { grid-area: np; background: var(--vg-panel); border: 1px solid var(--vg-panel-border); border-radius: 14px; padding: 8px 10px 9px; box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.6); } [data-skin="vintage"] .retro-glass { border: 0; background: transparent; box-shadow: none; padding: 8px 10px 6px; } [data-skin="vintage"] .retro-glass::before { display: none; } [data-skin="vintage"] .retro-glass::after { display: none; } [data-skin="vintage"] .retro-freq { font-size: 1.7rem; } [data-skin="vintage"] .retro-wave { height: 44px; } /* painel AGORA + knob */ [data-skin="vintage"] .vg-side { grid-area: side; display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .vg-clock-panel { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border-radius: 12px; background: var(--vg-panel); border: 1px solid var(--vg-panel-border); box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.6); } .vg-clock-cap { display: inline-flex; align-items: center; gap: 4px; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: #d3b681; } .vg-clock-cap svg { width: 10px; height: 10px; } .vg-clock { font-family: "Share Tech Mono", ui-monospace, Consolas, monospace; font-size: 1.55rem; color: #f5d792; text-shadow: 0 0 10px rgba(245, 215, 146, 0.45); font-variant-numeric: tabular-nums; } .vg-date { font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; color: #b3a284; text-align: center; white-space: pre-line; /* dia da semana em cima, "19 de agosto" embaixo */ line-height: 1.5; } .vg-knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; } .vg-knob { --vg-knob-deg: 45deg; position: relative; width: 74px; height: 74px; border-radius: 50%; cursor: grab; background: radial-gradient(circle at 36% 30%, #f4dfae 0%, #caa25c 38%, #8f6c33 72%, #6b4f22 100%); border: 2px solid #55401d; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 240, 200, 0.5), inset 0 -4px 8px rgba(0, 0, 0, 0.35); touch-action: none; } .vg-knob:active { cursor: grabbing; } .vg-knob-notch { position: absolute; left: 50%; top: 50%; width: 4px; height: 26px; margin-left: -2px; border-radius: 3px; background: #3a2a10; transform-origin: 50% 100%; transform: translateY(-100%) rotate(var(--vg-knob-deg)); box-shadow: 0 0 3px rgba(0, 0, 0, 0.6); } .vg-knob-caps { display: flex; justify-content: space-between; width: 74px; font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: #b3a284; } /* barra inferior: play + mute (controles existentes) e ações extras */ [data-skin="vintage"] .controls { grid-area: controls; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; margin: 0; } [data-skin="vintage"] .vol-row { display: flex; align-items: center; flex: none; width: auto; max-width: none; } [data-skin="vintage"] .vol-row .volume { display: none; } /* o knob assumiu */ [data-skin="vintage"] .btn-play { width: 62px; height: 62px; border: 2px solid rgba(240, 208, 140, 0.5); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 178, 80, 0.35); } [data-skin="vintage"] .vg-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .vg-round { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(216, 179, 113, 0.4); background: radial-gradient(circle at 35% 30%, #2c2112 0%, #17110a 70%); color: #e8c887; cursor: pointer; transition: box-shadow 0.2s, color 0.2s; } .vg-round:hover { color: #ffd98c; box-shadow: 0 0 12px rgba(255, 184, 74, 0.35); } .vg-round svg { width: 18px; height: 18px; } .vg-round.done { color: #7ee2a0; box-shadow: 0 0 12px rgba(126, 226, 160, 0.45); } .vg-bitrate { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: #b3a284; white-space: nowrap; } [data-skin="vintage"] .status { grid-area: status; margin: 0; } /* rodapé social */ [data-skin="vintage"] .vg-social { grid-area: social; display: flex; align-items: center; justify-content: center; gap: 12px; border-top: 1px solid rgba(216, 179, 113, 0.25); padding: 8px 0 0; } .vg-social-cap { font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase; color: #c9a45c; } .vg-soc { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #e8c887; border: 1px solid rgba(216, 179, 113, 0.35); transition: color 0.2s, box-shadow 0.2s; } .vg-soc:hover { color: #ffd98c; box-shadow: 0 0 10px rgba(255, 184, 74, 0.4); } .vg-soc svg { width: 15px; height: 15px; } /* mobile: uma coluna; selo some, relógio+knob viram uma linha */ @media (max-width: 640px) { [data-skin="vintage"] .player { grid-template-columns: 1fr; grid-template-areas: "top" "grille" "np" "side" "controls" "actions" "status" "social"; } [data-skin="vintage"] .vg-badge { display: none; } [data-skin="vintage"] .vg-side { flex-direction: row; justify-content: center; align-items: center; gap: 18px; } [data-skin="vintage"] .vg-meters { display: none; } [data-skin="vintage"] .controls { justify-content: center; } /* barra de ações centrada; bitrate vira legenda centralizada embaixo */ [data-skin="vintage"] .vg-actions { justify-content: center; flex-wrap: wrap; row-gap: 6px; } [data-skin="vintage"] .vg-bitrate { flex-basis: 100%; text-align: center; } } /* ============================================================ RESTYLE 2026-08 — skins atualizadas pelas referências res/*.webp retro ← neumorfismo teal (fundo azul-petróleo, acentos verdes; CRT intacto) neon ← neumorfismo grafite com gradiente azul→magenta clean ← claro minimal lilás, cartões suaves sem borda, play escuro (amber e vintage preservadas — família "rádio físico".) Blocos declarados DEPOIS dos originais: vencem no cascade só no que redefinem. ============================================================ */ /* ---------- RETRO: superfícies neumórficas teal ---------- */ :root[data-skin="retro"] { --bg0: #1c232e; --page-top: #232c39; --page-glow-a: rgba(53, 224, 161, 0.07); --page-glow-b: rgba(41, 121, 255, 0.08); --blob-a: rgba(41, 121, 255, 0.28); --blob-b: rgba(53, 224, 161, 0.24); --card-bg: #232b37; --card-border: transparent; --card-shadow: -10px -10px 24px rgba(255, 255, 255, 0.045), 14px 14px 32px rgba(0, 0, 0, 0.55); --card2-bg: #212934; --chip-bg: #1e2631; --chip-border: rgba(255, 255, 255, 0.05); --track: rgba(0, 0, 0, 0.38); --track2: rgba(0, 0, 0, 0.38); --hover-bg: rgba(255, 255, 255, 0.05); --accent2: #35e0a1; --accent3: #6ff0bd; --play-grad: radial-gradient(circle at 35% 30%, #2d3644, #1d242e); --play-fg: #4ee6a4; --play-glow-rgb: 53, 224, 161; --logo-glow: rgba(53, 224, 161, 0.3); } [data-skin="retro"] .card { -webkit-backdrop-filter: none; backdrop-filter: none; } [data-skin="retro"] .btn-play { border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: -8px -8px 18px rgba(255, 255, 255, 0.05), 10px 12px 24px rgba(0, 0, 0, 0.55), 0 0 22px rgba(53, 224, 161, 0.18); } [data-skin="retro"] .btn-play:hover { box-shadow: -8px -8px 18px rgba(255, 255, 255, 0.05), 10px 12px 24px rgba(0, 0, 0, 0.55), 0 0 30px rgba(53, 224, 161, 0.3); } [data-skin="retro"] .btn-icon { width: 40px; height: 40px; background: #242c38; box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.04), 6px 6px 14px rgba(0, 0, 0, 0.5); } [data-skin="retro"] .btn-icon:hover { background: #28313e; } /* ---------- NEON: neumorfismo grafite azul→magenta ---------- */ :root[data-skin="neon"] { --bg0: #23262e; --page-top: #292d38; --page-glow-a: rgba(58, 139, 255, 0.08); --page-glow-b: rgba(198, 92, 255, 0.08); --blob-a: rgba(58, 139, 255, 0.26); --blob-b: rgba(198, 92, 255, 0.24); --card-bg: #2a2e39; --card-border: transparent; --card-shadow: -10px -10px 24px rgba(255, 255, 255, 0.05), 14px 14px 32px rgba(0, 0, 0, 0.55); --card2-bg: #282c36; --chip-bg: #252932; --chip-border: rgba(255, 255, 255, 0.05); --track: rgba(0, 0, 0, 0.38); --track2: rgba(0, 0, 0, 0.38); --accent1: #3a8bff; --accent2: #8f5cff; --accent3: #d065ff; --play-grad: radial-gradient(circle at 35% 30%, #333846, #23262e); --play-fg: #eaf3ff; --play-glow-rgb: 143, 92, 255; --logo-glow: rgba(143, 92, 255, 0.32); --progress-grad: linear-gradient(90deg, #3a8bff, #8f5cff 55%, #d065ff); --progress-anim: linear-gradient(90deg, #3a8bff, #8f5cff, #d065ff, #8f5cff, #3a8bff); --wave-from: #3a8bff; --wave-to: #d065ff; } [data-skin="neon"] .card { -webkit-backdrop-filter: none; backdrop-filter: none; } [data-skin="neon"] .btn-play { border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: -8px -8px 18px rgba(255, 255, 255, 0.05), 10px 12px 24px rgba(0, 0, 0, 0.58), 0 0 24px rgba(143, 92, 255, 0.22); } [data-skin="neon"] .btn-play:hover { box-shadow: -8px -8px 18px rgba(255, 255, 255, 0.05), 10px 12px 24px rgba(0, 0, 0, 0.58), 0 0 34px rgba(143, 92, 255, 0.34); } [data-skin="neon"] .btn-icon { width: 40px; height: 40px; background: #2b2f3a; box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.045), 6px 6px 14px rgba(0, 0, 0, 0.52); } [data-skin="neon"] .btn-icon:hover { background: #303442; } [data-skin="neon"] .volume::-webkit-slider-runnable-track { background: linear-gradient(90deg, #3a8bff 0%, #8f5cff var(--fill), var(--track2) var(--fill)); } /* ---------- CLEAN: claro minimal lilás ---------- */ :root[data-skin="clean"] { --bg0: #e9e8f3; --page-top: #f3f2fa; --page-glow-a: rgba(157, 151, 214, 0.14); --page-glow-b: rgba(190, 186, 235, 0.12); --blob-a: rgba(178, 172, 228, 0.35); --blob-b: rgba(203, 199, 240, 0.3); --card-bg: #fbfbfd; --card-border: transparent; --card-shadow: 0 28px 60px rgba(97, 94, 155, 0.18), 0 4px 14px rgba(97, 94, 155, 0.08); --card2-bg: #f4f4f9; --chip-bg: #f1f0f7; --chip-border: rgba(97, 94, 155, 0.1); --track: rgba(97, 94, 155, 0.14); --track2: rgba(97, 94, 155, 0.14); --play-grad: linear-gradient(160deg, #23242b, #16171c); --play-fg: #ffffff; --play-glow-rgb: 60, 60, 96; --logo-glow: rgba(120, 116, 190, 0.28); } [data-skin="clean"] .btn-play { box-shadow: 0 16px 32px rgba(50, 50, 92, 0.28), 0 3px 8px rgba(50, 50, 92, 0.16); } [data-skin="clean"] .btn-play:hover { box-shadow: 0 20px 40px rgba(50, 50, 92, 0.34), 0 3px 8px rgba(50, 50, 92, 0.16); } [data-skin="clean"] .btn-icon { width: 40px; height: 40px; background: #ffffff; box-shadow: 0 6px 16px rgba(97, 94, 155, 0.18); } [data-skin="clean"] .btn-icon:hover { background: #f4f4fb; } /* ---------- Versão do build (discreta, canto superior direito) ---------- */ .app-version { position: fixed; top: 6px; right: 10px; z-index: 5; font-size: 9px; letter-spacing: 0.06em; color: var(--muted); opacity: 0.35; pointer-events: none; user-select: none; font-variant-numeric: tabular-nums; }