:root{--bg:#0b0f1a;--card:#121829;--muted:#9fb0ffcc;--text:#e8ecff;--text-dim:#b6c0ff;--brand:#5170ff;--brand-2:#8aa0ff;--radius:18px;--shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);--shadow-soft:0 6px 16px rgba(0,0,0,.25);--focus:0 0 0 3px rgba(81,112,255,.55)} /* Tema claro: substitui as variáveis quando o atributo data-theme="light" está aplicado no . */ html[data-theme="light"]{ --bg:#f5f8ff; --card:#ffffff; --muted:#5d6db5cc; --text:#1a213a; --text-dim:#4f5d85; --brand:#5170ff; --brand-2:#8aa0ff; --radius:18px; --shadow:0 10px 24px rgba(0,0,0,.1), inset 0 1px 0 rgba(0,0,0,.02); --shadow-soft:0 6px 16px rgba(0,0,0,.08); --focus:0 0 0 3px rgba(81,112,255,.45); } /* Ajustes específicos para o tema claro: substitui cores escuras de fundo e borda por tons mais suaves */ html[data-theme="light"] header{ background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)); border-bottom:1px solid rgba(0,0,0,.06); } html[data-theme="light"] .hero{ background:linear-gradient(135deg, rgba(81,112,255,.08), rgba(138,160,255,.05)); border:1px solid rgba(0,0,0,.04); } html[data-theme="light"] .card{ border:1px solid rgba(0,0,0,.06); } html[data-theme="light"] .modal{ background:var(--card); border:1px solid rgba(0,0,0,.10); box-shadow:var(--shadow); } html[data-theme="light"] .modal header{ background:linear-gradient(180deg, rgba(245,248,255,.9), rgba(245,248,255,0)); } html[data-theme="light"] .aff-box{ background:linear-gradient(135deg, rgba(81,112,255,.10), rgba(138,160,255,.06)); border:1px solid rgba(0,0,0,.08); } html[data-theme="light"] .footer{ border-top:1px solid rgba(0,0,0,.1); color:var(--text-dim); } /* Controles de busca e selects em modo claro */ html[data-theme="light"] .input, html[data-theme="light"] select{ background:#ffffff; border:1px solid rgba(0,0,0,.12); color:var(--text); } *{box-sizing:border-box}html,body{margin:0;height:100%;scroll-behavior:smooth} body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; background: radial-gradient(1200px 800px at 20% -10%, rgba(81,112,255,.20), transparent 60%), radial-gradient(1200px 800px at 120% 20%, rgba(138,160,255,.15), transparent 60%), var(--bg); color:var(--text); line-height:1.55} a{color:var(--muted);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;display:block;border-radius:14px} .container{max-width:1200px;margin:0 auto;padding:20px} .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;z-index:999;background:#000;color:#fff;padding:8px 12px;border-radius:8px} header{position:sticky;top:0;z-index:40;backdrop-filter:saturate(180%) blur(10px);background:linear-gradient(180deg, rgba(18,24,41,.85), rgba(18,24,41,.6));border-bottom:1px solid rgba(255,255,255,.06)} .nav{display:flex;align-items:center;gap:16px;justify-content:space-between} .brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px} .logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow-soft)} .logo span{font-size:22px} .menu{display:flex;gap:14px;flex-wrap:wrap} .menu a{padding:10px 12px;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,.07)} .menu a[aria-current="page"]{background:linear-gradient(135deg, rgba(81,112,255,.2), rgba(138,160,255,.15))} .cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;padding:12px 16px;border-radius:14px;font-weight:700;box-shadow:var(--shadow-soft)} .hero{display:grid;gap:16px;padding:24px;margin:18px 0;border-radius:var(--radius);background:linear-gradient(135deg, rgba(81,112,255,.15), rgba(138,160,255,.10));border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)} .notice{font-size:14px;color:#dbe1ff;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.18);padding:10px 12px;border-radius:12px} .grid{display:grid;gap:18px;grid-template-columns: repeat(12,1fr)} .card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)} .card:hover{transform:translateY(-2px);transition:.2s} .post-card{grid-column: span 12}@media(min-width:720px){.post-card{grid-column: span 6}}@media(min-width:1024px){.post-card{grid-column: span 4}} .tag{font-size:12px;background:rgba(81,112,255,.2);color:#eaf;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.08)} .post-title{font-weight:800;font-size:18px;margin:10px 0 6px} .post-meta{font-size:12px;color:var(--text-dim)} .post-excerpt{color:#dce3ff;margin:8px 0 12px} .btn-row{display:flex;gap:8px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#fff;padding:10px 12px;border-radius:12px;font-weight:700} .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none} .controls{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0} .input, select{background:#0e1424;border:1px solid rgba(255,255,255,.12);color:#fff;padding:10px 12px;border-radius:12px;min-width:220px} .section-title{font-weight:900;font-size:22px;margin:16px 0 10px} .deal-card{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center} .price{font-weight:800} .rating{display:flex;align-items:center;gap:6px} .stars{display:inline-flex;gap:2px}.star{width:16px;height:16px} .footer{margin-top:40px;padding:24px;border-top:1px solid rgba(255,255,255,.08);color:#b7c3ff;font-size:14px} .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:60} .modal{background:#121829;border:1px solid rgba(255,255,255,.10);border-radius:18px;max-width:900px;width:calc(100% - 24px);max-height:90vh;overflow:auto;box-shadow:var(--shadow);padding:18px} .modal header{position:sticky;top:0;backdrop-filter: blur(6px);padding:0 0 12px;background:linear-gradient(180deg,rgba(18,24,41,.8),rgba(18,24,41,0));border:none} .modal-title{font-size:22px;margin:12px 0 8px} .aff-box{background:linear-gradient(135deg, rgba(81,112,255,.18), rgba(138,160,255,.14));border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px;margin:16px 0} /* Indicador de tempo de leitura: círculo com progresso proporcional. */ .readtime-ring{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; font-size:10px; font-weight:700; /* Usa variável --val para definir o percentual preenchido */ background:conic-gradient(var(--brand) calc(360deg * var(--val)), rgba(255,255,255,.15) 0); color:var(--text); } /* ====== Mobile polish (≤ 480px) ========================================= */ @media (max-width: 480px){ .container{ padding:16px; } /* Header reorganizado para telas pequenas */ .nav{ flex-direction:column; align-items:flex-start; gap:12px; flex-wrap:nowrap; } .brand{ font-size:16px; gap:10px; } .logo{ width:36px; height:36px; border-radius:10px; } /* Menu vira grade para acomodar todos os links em uma linha ou quebrar automaticamente */ .menu{ order:2; width:100%; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .menu a{ text-align:center; min-height:44px; line-height:1.1; } /* Tema e CTA ocupam largura toda */ #themeToggle, .cta{ order:3; width:100%; justify-content:center; min-height:48px; padding:12px 14px; border-radius:12px; } /* Hero mais enxuto */ .hero{ padding:16px; gap:12px; border-radius:14px; } .hero h1{ font-size:clamp(22px, 5.5vw, 28px); line-height:1.18; } /* Controles de busca em 1 coluna */ .controls{ display:grid; grid-template-columns:1fr; gap:10px; margin:16px 0; } .input, select{ min-width:0; width:100%; } /* Cards ocupam toda a largura, com imagem estável */ .post-card{ grid-column:span 12; } .card img{ aspect-ratio:16/9; object-fit:cover; } /* Deals/Guides: layout vertical em vez de 2 colunas apertadas */ .deal-card{ grid-template-columns:72px 1fr; gap:10px; } .deal-card img{ width:72px; height:72px; aspect-ratio:1 / 1; } /* Footer arejado */ .footer{ padding:18px; } /* Evita realces de toque fortes e “pulos” em iOS */ a, button{ -webkit-tap-highlight-color: transparent; } } /* ====== Tamanhos mínimos de toque (global) ============================== */ .btn, .menu a, .cta { min-height:44px; } .btn:focus-visible, .menu a:focus-visible, .cta:focus-visible { outline:none; box-shadow:var(--focus); } /* ====== Tipografia fluida (desktop → mobile) ============================ */ .hero h1{ font-size:clamp(28px, 3.2vw, 40px); } /* já suaviza em tablets */ /* ====== Redução de movimento (acessibilidade) ========================== */ @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; scroll-behavior:auto; } }