/* componentes.css — sistema consolidado: componentes semanticos + utilitarios */ /* ===== Componentes ===== */ .badge { display:inline-block;font-size:0.7rem;font-weight:700;line-height:1.45;padding:2px 8px;border-radius:4px;white-space:nowrap; } .badge--green { background:#22c55e;color:#fff; } .badge--blue { background:#3b82f6;color:#fff; } .badge--purple { background:#8b5cf6;color:#fff; } .badge--amber { background:#f59e0b;color:#111; } .badge--orange { background:#f97316;color:#fff; } .badge--ml { margin-left:4px; } .badge--lg { font-size:0.75rem;padding:4px 10px;text-transform:uppercase;letter-spacing:0.05em; } .eyebrow { font-size:0.75rem;font-weight:700;letter-spacing:0.08em;margin-bottom:7px; } .eyebrow--accent { color:#30df47; } .eyebrow--green { color:#22c55e; } .eyebrow--blue { color:#3b82f6; } /* era #8b5cf6: dava 4.11:1 sobre o #1a1a1a do pick-card, abaixo do minimo de 4.5:1 da WCAG AA para texto pequeno. #a78bfa sobe para 6.6:1. */ .eyebrow--purple { color:#a78bfa; } .eyebrow--amber { color:#f59e0b; } .eyebrow--muted { color:#9ca3af; } .eyebrow--upper { text-transform:uppercase; } .eyebrow--block { display:block;margin-bottom:4px; } .cta-btn { display:inline-block;background:#f97316;color:#fff;font-weight:700;font-size:0.8rem;padding:6px 14px;border-radius:6px;text-decoration:none;white-space:nowrap; } .cta-btn--lg { padding:11px 18px;font-size:0.9rem;border-radius:8px; } .box-dark { background:#1a1a1a;border-radius:12px;padding:24px;margin:2rem 0;color:#e5e7eb; } .box-dark--center { text-align:center; } /* Caixa escura dentro de artigo: `.rr-art p` (estilos.css) fixa color:#333 e ganha das utilitarias .u-text-* por especificidade — classe+elemento contra so classe. Resultado: o texto herdava #333 sobre #1a1a1a, 1.38:1, ilegivel. Estas regras empatam a especificidade e vencem no cascade porque componentes.css e carregado DEPOIS de estilos.css no . Cor que elas aplicam e a mesma que a utilitaria ja pedia: #e5e7eb (12.6:1). */ .box-dark p, .box-dark li, .box-dark td, .pick-card p, .pick-card li { color:#e5e7eb; } .box-dark-bar { background:#1a1a1a;border-top:3px solid #30df47;color:#fff;text-align:center;padding:10px 16px;font-size:0.84rem;font-weight:600;letter-spacing:0.02em; } .box-dark-head { background:#111210;padding:40px 24px 22px; } .pick-card { background:#1a1a1a;border:2px solid;border-radius:12px;padding:18px;text-align:center; } .pick-card--green { border-color:#22c55e; } .pick-card--blue { border-color:#3b82f6; } .pick-card--purple { border-color:#8b5cf6; } .pick-card--amber { border-color:#f59e0b; } .box-soft-green { background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:20px;margin:1.5rem 0; } .box-soft-warn { background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:14px 16px;margin:1.5rem 0; } .box-soft-beige { background:#f5f0e8;border:1px solid #ccc; } .card-light { background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden; } .media-ph { background:#1a1a1a;width:100%;aspect-ratio:16/9;border-radius:10px;display:flex;align-items:center;justify-content:center;margin:24px 0;overflow:hidden; } .flex-1 { border-top:1px solid rgba(255,255,255,0.07);padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px; } .flex-2 { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; } .flex-3 { display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px; } .flex-4 { display:flex;flex-direction:column;gap:6px; } .flex-5 { display:flex;flex-direction:column;gap:7px; } .flex-6 { display:flex;flex-direction:column;gap:8px;min-width:0;width:100%;max-width:200px; } .flex-7 { display:flex;gap:10px;justify-content:center;flex-wrap:wrap; } .flex-8 { display:flex;gap:10px;margin-top:12px; } .flex-9 { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px; } .grid-1 { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1.2rem 0 2rem; } /* ===== Utilitarios ===== */ .u-alig-center { align-items:center; } .u-bg-0369a1 { background:#0369a1; } .u-bg-111 { background: #111; } .u-bg-166534 { background:#166534; } .u-bg-1a1a1a { background:#1a1a1a; } .u-bg-1a5276 { background:#1a5276; } .u-bg-2a3520 { background:#2a3520; } .u-bg-30df47 { background:#30df47; } .u-bg-3b82f6 { background:#3b82f6; } .u-bg-5b9bd5 { background: #5b9bd5; } .u-bg-7ec8a0 { background: #7ec8a0; } .u-bg-8b5cf6 { background:#8b5cf6; } .u-bg-b22222 { background: #b22222; } .u-bg-c0392b { background:#c0392b; } .u-bg-d97706 { background:#d97706; } .u-bg-e06030 { background:#e06030; } .u-bg-f59e0b { background:#f59e0b; } .u-bg-linear_gradient_13 { background:linear-gradient(135deg,#1a1a1a 0%,#0f2010 100%); } .u-bg-linear_gradient_135deg_b { background:linear-gradient(135deg,#b5651d,#f5cba7); } .u-bg-linear_gradient_135deg_c { background:linear-gradient(135deg,#c0392b,#7b241c); } .u-bg-radial_gradient_circle_a { background: radial-gradient(circle at 40% 40%, #c8a96e, #5c2d00); } .u-bg-radial_gradient_circle_a-2 { background:radial-gradient(circle at 40% 40%,#5a6a7a,#1a2a3a); } .u-bg-radial_gradient_circle_a-3 { background:radial-gradient(circle at 40% 40%,#7a7a7a,#2a2a2a); } .u-bg-radial_gradient_circle_a-4 { background:radial-gradient(circle at 40% 40%,#8b5e3c,#3b2008); } .u-bg-radial_gradient_circle_a-5 { background:radial-gradient(circle at 40% 40%,#9b3030,#3a0a0a); } .u-bord-1px_solid_ccc { border:1px solid #ccc; } .u-bord-1px_solid_rgba_255 { border-top:1px solid rgba(255,255,255,0.09); } .u-bord-2px_solid_22c55e { border:2px solid #22c55e; } .u-bord-none { border:none; } .u-btc-e5e7eb { border-top-color:#e5e7eb; } .u-d-block { display:block; } .u-d-contents { display:contents; } .u-d-inline_flex { display:inline-flex; } .u-ff-barlow_condensed_s { font-family:'Barlow Condensed',sans-serif; } .u-ff-poppins_system_ui_sans_s { font-family:'Poppins',system-ui,sans-serif; } .u-flex-1 { flex:1; } .u-fs-0_82rem { font-size:0.82rem; } .u-fs-0_85rem { font-size:0.85rem; } .u-fs-0_88rem { font-size:0.88rem; } .u-fs-0_8rem { font-size:0.8rem; } .u-fs-0_92rem { font-size:0.92rem; } .u-fs-0_93rem { font-size:0.93rem; } .u-fs-0_95rem { font-size:0.95rem; } .u-fs-0_97rem { font-size:0.97rem; } .u-fs-0_9rem { font-size:0.9rem; } .u-fs-11 { font-size:11px; } .u-fs-12 { font-size:12px; } .u-fs-1_05rem { font-size:1.05rem; } .u-fs-1_1rem { font-size:1.1rem; } .u-fs-1_2rem { font-size:1.2rem; } .u-fs-1rem { font-size:1rem; } .u-fs-20 { font-size:20px; } .u-fw-600 { font-weight:600; } .u-fw-700 { font-weight:700; } .u-fw-800 { font-weight:800; } .u-gap-10 { gap:10px; } .u-gtc-repeat_2_1fr { grid-template-columns: repeat(2, 1fr); } .u-h-100pct { height:100%; } .u-jc-center { justify-content:center; } .u-lh-1_4 { line-height:1.4; } .u-lh-1_5 { line-height:1.5; } .u-lh-1_65 { line-height:1.65; } .u-ls-0_06em { letter-spacing:0.06em; } .u-m-0 { margin:0; } .u-m-0_0_14px { margin:0 0 14px; } .u-m-0_0_16px { margin:0 0 16px; } .u-m-0_0_18px { margin:0 0 18px; } .u-m-0_0_20px { margin:0 0 20px; } .u-m-0_0_6px { margin:0 0 6px; } .u-m-0_0_8px { margin:0 0 8px; } .u-m-0_auto { margin:0 auto; } .u-m-1_5rem_0 { margin: 1.5rem 0; } .u-m-1_5rem_0-2 { margin:1.5rem 0; } .u-m-24px_0_8px { margin:24px 0 8px; } .u-m-28px_0 { margin:28px 0; } .u-m-28px_0_8px { margin:28px 0 8px; } .u-m-2rem_0 { margin:2rem 0; } .u-mb-10 { margin-bottom:10px; } .u-mb-14 { margin-bottom:14px; } .u-mb-16 { margin-bottom:16px; } .u-mb-18 { margin-bottom:18px; } .u-mb-20 { margin-bottom:20px; } .u-mb-56 { margin-bottom:56px; } .u-mb-4 { margin-bottom:4px; } .u-mb-6 { margin-bottom:6px; } .u-mb-8 { margin-bottom:8px; } .u-minw-0 { min-width:0; } .u-ml-6 { margin-left:6px; } .u-mt-0 { margin-top:0; } .u-mt-10 { margin-top:10px; } .u-mt-14 { margin-top:14px; } .u-mt-16 { margin-top:16px; } .u-mt-18 { margin-top:18px; } .u-mt-32 { margin-top:32px; } .u-mt-48 { margin-top:48px; } .u-mt-8 { margin-top:8px; } .u-mw-100pct { max-width:100%; } .u-mw-1200 { max-width:1200px; } .u-mw-260 { max-width:260px; } .u-mw-680 { max-width:680px; } .u-mw-820 { max-width:820px; } .u-mx-auto { margin-inline:auto; } .u-of-cover { object-fit:cover; } .u-ox-auto { overflow-x:auto; } .u-p-0_14px { padding:0 14px; } .u-p-14 { padding:14px; } .u-p-18px_0 { padding:18px 0; } .u-p-18px_0_0 { padding:18px 0 0; } .u-p-28px_22px { padding:28px 22px; } .u-p-7px_14px { padding:7px 14px; } .u-p-8px_14px { padding:8px 14px; } .u-p-9px_14px { padding:9px 14px; } .u-radius-14 { border-radius:14px; } .u-ta-center { text-align:center; } .u-text-111 { color:#111; } .u-text-111827 { color:#111827; } .u-text-166534 { color:#166534; } .u-text-16a34a { color:#16a34a; } .u-text-1ea533 { color:#1ea533; } .u-text-22c55e { color:#22c55e; } .u-text-30df47 { color:#30df47; } .u-text-374151 { color:#374151; } .u-text-3b82f6 { color:#3b82f6; } .u-text-4b5563 { color:#4b5563; } .u-text-6b7280 { color:#6b7280; } .u-text-92400e { color:#92400e; } .u-text-9ca3af { color:#9ca3af; } .u-text-9f1239 { color:#9f1239; } .u-text-b45309 { color:#b45309; } .u-text-d97706 { color:#d97706; } .u-text-dc2626 { color:#dc2626; } .u-text-e5e7eb { color:#e5e7eb; } .u-text-ef4444 { color:#ef4444; } .u-text-f59e0b { color:#f59e0b; } .u-text-f97316 { color:#f97316; } .u-text-fff { color:#fff; } .u-text-var_accent_dark { color:var(--accent-dark); } .u-text-var_text_muted { color:var(--text-muted); } .u-text-w22 { color:rgba(255,255,255,0.22); } .u-text-w3 { color:rgba(255,255,255,0.3); } .u-text-w38 { color:rgba(255,255,255,0.38); } .u-text-w55 { color:rgba(255,255,255,0.55); } .u-text-w6 { color:rgba(255,255,255,0.6); } .u-text-w65 { color:rgba(255,255,255,0.65); } .u-text-w7 { color:rgba(255,255,255,0.7); } .u-text-w75 { color:rgba(255,255,255,0.75); } .u-text-w85 { color:rgba(255,255,255,0.85); } .u-underline { text-decoration:underline; } .u-w-100pct { width:100%; } .u-w-auto { width:auto; } .u-wos-touch { -webkit-overflow-scrolling:touch; } .u-ws-nowrap { white-space:nowrap; } /* ── Alvos de toque dos links de afiliado ─────────────────────────── O CTA principal (.rr-ml-btn) ja nasce com 44px. Estes dois nao: o botao do pick vinha com 34px por causa do padding reduzido, e o link da tabela era so o badge, com 19px. Em pagina de afiliado o alvo pequeno custa clique, entao os dois vao para 44px. Fica em componentes.css porque ele carrega depois de estilos.css. */ .pick-card .rr-ml-btn { min-height: 44px; padding: 10px 14px; } /* O vira o alvo; o badge continua so o visual. */ .rr-tbl td > a[data-ml] { display: flex; align-items: center; min-height: 44px; margin: -11px 0; }