/* ============================================================ OHAS ADS — FOLHA DE ESTILOS PRINCIPAL Temas via [data-tema] no . Ícones em SVG (stroke). ============================================================ */ /* ---------- Temas ---------- */ :root, :root[data-tema="escuro"] { --fundo: #0e1116; --fundo-topo: #1a2333; --cartao: #161c26; --borda: #263041; --texto: #e9eef5; --texto-fraco: #8b97a8; --primario: #3b82f6; --primario-forte: #2563eb; --ok: #22c55e; --ok-forte: #16a34a; --erro: #ef4444; --sombra: 0 10px 30px rgba(0, 0, 0, .35); --campo: #10151d; } :root[data-tema="claro"] { --fundo: #f3f5f9; --fundo-topo: #e6ebf4; --cartao: #ffffff; --borda: #dfe4ec; --texto: #17202e; --texto-fraco: #5d6b7f; --primario: #2563eb; --primario-forte: #1d4ed8; --ok: #22c55e; --ok-forte: #16a34a; --erro: #dc2626; --sombra: 0 10px 30px rgba(23, 32, 46, .10); --campo: #f6f8fb; } /* ---------- Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { color-scheme: dark; } :root[data-tema="claro"] { color-scheme: light; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: radial-gradient(1000px 500px at 50% -10%, var(--fundo-topo) 0%, var(--fundo) 60%); color: var(--texto); min-height: 100vh; display: flex; flex-direction: column; transition: background-color .25s ease, color .25s ease; } [hidden] { display: none !important; } .icone { width: 20px; height: 20px; flex-shrink: 0; } .icone-grande { width: 36px; height: 36px; } /* ---------- Cabeçalho ---------- */ .cabecalho { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--borda); } .marca { display: flex; align-items: center; gap: 10px; } .logo { width: 30px; height: 30px; border-radius: 8px; } .marca-nome { font-weight: 700; font-size: 15px; letter-spacing: .2px; } .controles { display: flex; align-items: center; gap: 10px; } /* Seletor de idioma */ .campo-idioma { position: relative; display: flex; align-items: center; } .campo-idioma .icone-globo { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--texto-fraco); pointer-events: none; } .campo-idioma .icone-seta { position: absolute; right: 8px; width: 14px; height: 14px; color: var(--texto-fraco); pointer-events: none; } .campo-idioma select { appearance: none; -webkit-appearance: none; background: var(--campo); color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 30px 8px 32px; font-size: 13px; font-family: inherit; cursor: pointer; transition: border-color .15s ease, background-color .25s ease; } .campo-idioma select:hover { border-color: var(--primario); } /* Botão de tema */ .botao-icone { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--campo); color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background-color .25s ease; } .botao-icone:hover { border-color: var(--primario); } /* Mostra o ícone do tema PARA ONDE vai alternar */ .icone-sol, .icone-lua { display: none; } [data-tema="escuro"] .icone-sol { display: block; } [data-tema="claro"] .icone-lua { display: block; } /* ---------- Conteúdo ---------- */ main { flex: 1; width: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; } .cartao { width: 100%; max-width: 560px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 20px; padding: 32px 28px; text-align: center; box-shadow: var(--sombra); transition: background-color .25s ease, border-color .25s ease; } h1 { font-size: 22px; margin-bottom: 8px; } .sub { color: var(--texto-fraco); font-size: 14px; line-height: 1.55; } .origem { margin-top: 6px; } .origem strong { color: var(--texto); } /* Emblemas (erro / sucesso) */ .emblema { width: 72px; height: 72px; margin: 4px auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .emblema-erro { background: rgba(239, 68, 68, .12); border: 2px solid var(--erro); color: var(--erro); } .emblema-ok { background: rgba(34, 197, 94, .12); border: 2px solid var(--ok); color: var(--ok); } /* Espaço do anúncio (placeholder) */ .espaco-anuncio { margin: 24px 0; min-height: 240px; border: 2px dashed var(--borda); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--texto-fraco); font-size: 13px; } .espaco-anuncio .icone-imagem { width: 28px; height: 28px; opacity: .7; } .etiqueta { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid var(--borda); border-radius: 20px; padding: 3px 10px; } /* Botões */ .botao { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; font-size: 16px; font-weight: 600; font-family: inherit; color: #ffffff; background: var(--primario); border: none; border-radius: 12px; cursor: pointer; transition: background-color .15s ease, transform .05s ease; } .botao:hover:not(:disabled) { background: var(--primario-forte); } .botao:active:not(:disabled) { transform: scale(.99); } .botao:disabled { opacity: .55; cursor: wait; } .botao-ok { background: var(--ok); } .botao-ok:hover:not(:disabled) { background: var(--ok-forte); } /* Timer */ .timer-numero { font-size: 64px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; } .timer-legenda { color: var(--texto-fraco); font-size: 13px; margin-bottom: 18px; } .barra { height: 10px; background: var(--borda); border-radius: 99px; overflow: hidden; margin-bottom: 18px; } .barra-preenchimento { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primario), #60a5fa); border-radius: 99px; transition: width .25s linear; } .status { color: var(--texto-fraco); font-size: 13px; min-height: 20px; margin-top: 10px; } /* Rodapé */ footer { text-align: center; color: var(--texto-fraco); font-size: 12px; padding: 16px; } /* Foco visível (acessibilidade) */ select:focus-visible, button:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; } /* Telas pequenas */ @media (max-width: 480px) { .cartao { padding: 24px 18px; } .timer-numero { font-size: 52px; } .marca-nome { font-size: 14px; } }