/* =========================================================================== PlinioFM jogos — folha única do site --------------------------------------------------------------------------- Design system do Footy Pools (/bolao-fm/) generalizado para todas as páginas. Substitui, por página: ~1.141 KiB de CSS/JS (OceanWP + Elementor + jQuery + Swiper + FontAwesome) Tokens em :root são iguais em todo o site; cada jogo sobrepõe apenas --accent / --accent-ink via [data-game] no . JavaScript: nenhum, exceto no home (imagem aleatória + formulário de contato) — as landings e as páginas legais são 100% estáticas. Nenhum atributo style="" nas páginas, para permitir remover 'unsafe-inline' de style-src no _headers (docs/security.md). =========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0d1b2a; --bg-card: #152236; --bg-raised: #1a2b42; --line: #1e3550; --line-strong: #2d4a6a; --text: #e8edf2; --muted: #8a9bb0; --radius: 12px; --radius-lg: 24px; --maxw: 960px; /* fallback: paleta do Footy Pools */ --accent: #f5c518; --accent-ink: #0d1b2a; } /* Sotaque por jogo — só estas duas linhas mudam entre as landings. */ [data-game="unblock"] { --accent: #ff5c4d; --accent-ink: #1a0806; } [data-game="hangman"] { --accent: #4db8ff; --accent-ink: #05141f; } [data-game="tictactoe"] { --accent: #7ecf8a; --accent-ink: #06170a; } [data-game="footypools"] { --accent: #f5c518; --accent-ink: #0d1b2a; } html { scroll-behavior: smooth; } body { font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-text-size-adjust: 100%; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ── Layout ──────────────────────────────────────────────────────────────── */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } section { padding: 72px 0; } .section-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; text-align: center; margin-bottom: 40px; } .section-title span { color: var(--accent); } .eyebrow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); } /* ── Skip link ───────────────────────────────────────────────────────────── */ .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; } .skip-link:focus { inset-inline-start: 12px; top: 12px; padding: 10px 16px; background: var(--accent); color: var(--accent-ink); border-radius: 8px; font-weight: 700; } /* ── Header ──────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(13, 27, 42, 0.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); } .header-inner { display: flex; align-items: center; gap: 24px; min-height: 60px; padding: 8px 24px; max-width: var(--maxw); margin: 0 auto; } .brand { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.2px; white-space: nowrap; } .brand span { color: var(--accent); } .nav-desktop { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; } .nav-desktop a { padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color 0.15s, background 0.15s; } .nav-desktop a:hover { color: var(--text); background: var(--bg-card); } .nav-desktop a[aria-current="page"] { color: var(--accent); } /* Seletor de idioma: lista suspensa via
, sem JavaScript. Os idiomas continuam sendo reais dentro do painel, então os alternates hreflang seguem rastreáveis — o que um