/* ═══════════════════════════════════════════════════════════ GIA SEO Analytics – style.css v2.1 Tema dual light/dark via [data-theme] no ═══════════════════════════════════════════════════════════ */ /* ── Variáveis: Dark (padrão) ───────────────────────────── */ :root { --brand: #02BF93; --brand-dark: #019B78; --brand-light: #34d8b0; --brand-glow: rgba(2,191,147,.2); --bg: #0d1117; --bg-2: #111827; --bg-card: #161b22; --bg-input: #0d1117; --bg-navbar: rgba(13,17,23,.9); --border: rgba(255,255,255,.08); --border-focus: rgba(2,191,147,.5); --text: #e6edf3; --text-muted: #8b949e; --text-subtle: #6e7681; --good: #10b981; --good-bg: rgba(16,185,129,.12); --attention: #f59e0b; --attention-bg: rgba(245,158,11,.12); --critical: #ef4444; --critical-bg: rgba(239,68,68,.12); --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.5); --shadow-lg: 0 8px 32px rgba(0,0,0,.6); --transition: .25s ease; } /* ── Variáveis: Light ────────────────────────────────────── */ [data-theme="light"] { --bg: #f0f4f8; --bg-2: #e8edf3; --bg-card: #ffffff; --bg-input: #ffffff; --bg-navbar: rgba(255,255,255,.95); --border: rgba(0,0,0,.08); --border-focus: rgba(2,191,147,.6); --text: #111827; --text-muted: #4b5563; --text-subtle:#9ca3af; --good-bg: rgba(16,185,129,.1); --attention-bg: rgba(245,158,11,.1); --critical-bg: rgba(239,68,68,.1); --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 8px 32px rgba(0,0,0,.1); } /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; transition: background var(--transition), color var(--transition); } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Container ───────────────────────────────────────────── */ .container { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 1.25rem; } /* ═══════════════════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════════════════ */ .navbar { position: sticky; top: 0; z-index: 100; background: var(--bg-navbar); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } /* ── Logo (imagem) ────────────────────────────────────────── */ .nav-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex-shrink: 0; } .nav-logo-img { height: 38px; /* altura máxima — ajuste se necessário */ width: auto; max-width: 200px; object-fit: contain; display: block; /* Filtro para garantir boa leitura em modo dark */ filter: brightness(1); transition: filter var(--transition); } /* Em modo dark, logo escura fica mais visível */ [data-theme="dark"] .nav-logo-img { filter: brightness(1.1) drop-shadow(0 0 6px rgba(2,191,147,.15)); } /* Fallback texto */ .nav-logo-fallback { display: flex; align-items: center; gap: .5rem; } .logo-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--brand-glow); } 70% { box-shadow: 0 0 0 8px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } } .logo-text { font-weight: 700; font-size: 1rem; background: linear-gradient(135deg, var(--brand), var(--brand-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Theme toggle ────────────────────────────────────────── */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: border-color var(--transition), color var(--transition), transform .15s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--brand); color: var(--brand); transform: scale(1.08); } .theme-toggle svg { width: 18px; height: 18px; pointer-events: none; } [data-theme="dark"] .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: block; } [data-theme="light"] .icon-moon { display: none; } [data-theme="light"] .icon-sun { display: block; } /* ═══════════════════════════════════════════════════════════ HERO / HOME ═══════════════════════════════════════════════════════════ */ .hero { position: relative; overflow: hidden; padding: 5rem 1.25rem 4rem; text-align: center; } .hero-glow-1, .hero-glow-2 { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; opacity: .3; } .hero-glow-1 { width: 500px; height: 500px; background: var(--brand); top: -180px; left: 50%; transform: translateX(-55%); } .hero-glow-2 { width: 360px; height: 360px; background: #7c3aed; bottom: -80px; right: 3%; } .hero-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); font-size: .8rem; font-weight: 500; color: var(--text-muted); margin-bottom: 1.75rem; backdrop-filter: blur(8px); } .hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); } .hero h1 { font-size: clamp(2rem, 6vw, 3.75rem); font-weight: 900; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 1.25rem; } .hero h1 .gradient-text { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 60%, #6ee7b7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-sub { font-size: 1.05rem; color: var(--text-muted); max-width: 540px; margin: 0 auto 2.5rem; } /* ═══════════════════════════════════════════════════════════ FORMULÁRIO PRINCIPAL (layout corrigido) ═══════════════════════════════════════════════════════════ */ .form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 2rem; max-width: 620px; margin-inline: auto; box-shadow: var(--shadow-lg); } /* ── Grupo de campo (label + wrapper + erro) ─────────────── */ .form-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; } .form-group:last-of-type { margin-bottom: 0; } /* ── Wrapper do input (garante alinhamento do ícone) ─────── */ .form-field-wrap { position: relative; display: flex; align-items: center; /* ícone e input na mesma linha */ } /* ── Ícone posicionado dentro do wrapper ─────────────────── */ .form-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-subtle); pointer-events: none; z-index: 2; transition: color var(--transition); } .form-field-wrap:focus-within .form-icon { color: var(--brand); } /* ── Input ────────────────────────────────────────────────── */ .form-input { width: 100%; /* espaço à esquerda para o ícone (18px + 2×1rem gap) */ padding: .875rem 1rem .875rem 2.75rem; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg-input); color: var(--text); font-size: .95rem; font-family: inherit; outline: none; line-height: 1.4; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .form-input::placeholder { color: var(--text-subtle); } .form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); background: var(--bg-card); } /* Remove aparência padrão do navegador para type="url" */ .form-input[type="url"]:invalid { box-shadow: none; } /* ── Mensagem de erro (abaixo do wrapper) ────────────────── */ .error-msg { color: var(--critical); font-size: .8rem; display: none; margin-top: .1rem; } .error-msg.visible { display: block; } /* ── Botão principal ──────────────────────────────────────── */ .btn-primary { width: 100%; padding: .9rem 1.5rem; margin-top: .5rem; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: opacity .2s, transform .15s, box-shadow .2s; box-shadow: 0 4px 20px var(--brand-glow); } .btn-primary:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 28px var(--brand-glow); } .btn-primary:active { transform: translateY(0); } .btn-primary svg { width: 18px; height: 18px; } /* Spinner dentro do botão */ .spinner { width: 18px; height: 18px; display: none; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; } .btn-primary.loading .spinner { display: block; } .btn-primary.loading .btn-label { display: none; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Feature cards (home) ────────────────────────────────── */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 1.25rem; margin-top: 3rem; } .feat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; text-align: left; transition: border-color var(--transition), transform .2s; } .feat-card:hover { border-color: var(--brand); transform: translateY(-3px); } .feat-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--brand-glow); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--brand); } .feat-icon svg { width: 20px; height: 20px; } .feat-card h3 { font-size: .95rem; font-weight: 600; margin-bottom: .35rem; } .feat-card p { font-size: .82rem; color: var(--text-muted); line-height: 1.55; } /* ═══════════════════════════════════════════════════════════ LOADER OVERLAY ═══════════════════════════════════════════════════════════ */ .loader-overlay { display: none; position: fixed; inset: 0; background: rgba(13,17,23,.88); backdrop-filter: blur(8px); z-index: 200; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; } .loader-overlay.active { display: flex; } .loader-ring { width: 64px; height: 64px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin .9s linear infinite; } .loader-text { color: var(--text-muted); font-size: .95rem; } /* ═══════════════════════════════════════════════════════════ PÁGINA DE RESULTADOS ═══════════════════════════════════════════════════════════ */ .results-wrap { padding: 2rem 1.25rem 4rem; } /* ── Barra de ações (topo) ───────────────────────────────── */ .results-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; } .btn-action { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.25rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); font-size: .85rem; font-weight: 600; font-family: inherit; cursor: pointer; height: 42px; transition: all var(--transition); } .btn-action:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-glow); } .btn-action svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-action.primary-action { background: var(--brand); border-color: var(--brand); color: #fff; } .btn-action.primary-action:hover { background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: 0 4px 12px var(--brand-glow); } .results-url-info { flex: 1; min-width: 0; font-size: .8rem; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .results-url-info strong { color: var(--brand); } /* ── Score hero ──────────────────────────────────────────── */ .score-hero { display: flex; gap: 2.5rem; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-md); width: 100%; } @media(max-width:640px) { .score-hero { grid-template-columns:1fr; text-align:center; } .score-circle-wrap { margin-inline:auto; } } .score-circle-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; } .score-circle-wrap svg { transform: rotate(-90deg); } .score-track { fill: none; stroke: var(--border); stroke-width: 8; } .score-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.1s ease; } .score-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .score-number { font-size: 2.2rem; font-weight: 800; line-height: 1; } .score-label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; } .score-info h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: .4rem; } .score-info > p { color: var(--text-muted); font-size: .9rem; margin-bottom: 1rem; } .score-badges { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; } .score-badge { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.2rem; border-radius: 12px; font-size: .9rem; font-weight: 700; } .score-badge.onpage { background: var(--good-bg); color: var(--good); border: 1px solid var(--good); } .score-badge.technical { background: rgba(124,58,237,.12); color: #a78bfa; border: 1px solid rgba(124,58,237,.3); } .score-badge svg { width: 16px; height: 16px; } /* ── Quick stats ─────────────────────────────────────────── */ .info-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(185px,1fr)); gap: 1rem; margin-bottom: 2rem; } .info-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .2rem; } .tile-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } .tile-value { font-size: 1.1rem; font-weight: 700; } .tile-sub { font-size: .72rem; color: var(--text-subtle); } /* ── Separadores de seção ────────────────────────────────── */ .section-sep { display: flex; align-items: center; gap: 1rem; margin: 2.25rem 0 1.25rem; } .section-sep h2 { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); white-space: nowrap; } .section-sep::after { content:''; flex:1; height:1px; background:var(--border); } /* ── Grid de cards ───────────────────────────────────────── */ .analysis-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); gap: 1.25rem; margin-bottom: 2rem; } .analysis-grid.cols-2 { grid-template-columns: 1fr 1fr; } .analysis-grid.cols-3 { grid-template-columns: repeat(3,1fr); } .full-width { grid-column: 1 / -1; width: 100%; } /* ── Card base ───────────────────────────────────────────── */ .a-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .9rem; transition: border-color var(--transition), box-shadow var(--transition); } .a-card:hover { border-color: rgba(2,191,147,.25); box-shadow: var(--shadow-md); } .a-card-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .a-card-title { display:flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:600; } .a-card-title svg { width:15px; height:15px; color:var(--brand); flex-shrink:0; } /* ── Badges ──────────────────────────────────────────────── */ .badge { display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .65rem; border-radius:999px; font-size:.72rem; font-weight:600; white-space:nowrap; } .badge::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; } .badge-good::before { background:var(--good); } .badge-attention::before { background:var(--attention); } .badge-critical::before { background:var(--critical); } .badge-good { background:var(--good-bg); color:var(--good); } .badge-attention { background:var(--attention-bg); color:var(--attention); } .badge-critical { background:var(--critical-bg); color:var(--critical); } /* ── Métricas ────────────────────────────────────────────── */ .metric-row { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; font-size:.84rem; padding:.32rem 0; border-bottom:1px solid var(--border); } .metric-row:last-child { border-bottom:none; } .metric-label { color:var(--text-muted); flex-shrink:0; } .metric-value { font-weight:500; text-align:right; word-break:break-word; max-width:65%; } .metric-value.good { color:var(--good); } .metric-value.attention { color:var(--attention); } .metric-value.critical { color:var(--critical); } /* ── Progress bar ────────────────────────────────────────── */ .progress-bar-wrap { background:var(--border); border-radius:999px; height:5px; overflow:hidden; } .progress-bar { height:100%; border-radius:999px; transition:width 1s ease; } /* ── Checklist ───────────────────────────────────────────── */ .checklist { list-style:none; display:flex; flex-direction:column; gap:.4rem; } .checklist li { display:flex; align-items:flex-start; gap:.55rem; font-size:.83rem; } .check-icon { flex-shrink:0; width:15px; height:15px; margin-top:2px; } .check-yes { color:var(--good); } .check-no { color:var(--critical); } .check-warn{ color:var(--attention); } /* ── Sugestões ───────────────────────────────────────────── */ .suggestions-section { margin-bottom: 2rem; } .suggestions-section > h2 { font-size:1.1rem; font-weight:700; margin-bottom:1rem; } .suggestion-list { display:flex; flex-direction:column; gap:.6rem; } .suggestion-item { display:flex; align-items:flex-start; gap:.7rem; background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--attention); border-radius:10px; padding:.7rem 1rem; font-size:.86rem; } .suggestion-item.onpage { border-left-color:var(--brand); } .suggestion-item.technical { border-left-color:#a78bfa; } .suggestion-icon { flex-shrink:0; width:15px; height:15px; margin-top:2px; } .suggestion-icon.onpage { color:var(--brand); } .suggestion-icon.technical { color:#a78bfa; } .sugg-type { display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.1rem; } .sugg-type.onpage { color:var(--brand); } .sugg-type.technical { color:#a78bfa; } /* ───────────────────────────────────────────────────────── SERP CARD (posição no Google) ───────────────────────────────────────────────────────── */ .serp-found { display:flex; align-items:flex-start; gap:1.25rem; } .serp-position-num { font-size:2.5rem; font-weight:900; line-height:1; flex-shrink:0; min-width:60px; text-align:center; } .serp-position-meta { flex:1; min-width:0; } .serp-result-title { font-size:.9rem; font-weight:600; margin:.35rem 0 .2rem; word-break:break-word; } .serp-result-url { word-break:break-all; } .serp-result-snippet{ margin-top:.4rem; color:var(--text-muted); } .serp-not-found { text-align:center; padding:.5rem 0; } /* ───────────────────────────────────────────────────────── ASYNC CARDS (carregamento dinâmico) ───────────────────────────────────────────────────────── */ .async-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.65rem; padding:1.5rem 0; color:var(--text-muted); } .async-spinner { width:28px; height:28px; border:2px solid var(--border); border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; } .async-fallback { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem; padding:.75rem 0; color:var(--text-muted); } .async-fallback svg { opacity:.4; } .async-fallback p { font-size:.84rem; } .async-fallback code{ font-size:.75rem; background:var(--bg); padding:.1rem .35rem; border-radius:4px; } /* ───────────────────────────────────────────────────────── PAGESPEED CARD ───────────────────────────────────────────────────────── */ .ps-scores-grid { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; } .ps-score-wrap { display:flex; flex-direction:column; align-items:center; flex:1; min-width:130px; } .ps-device-label{ font-size:.8rem; font-weight:600; color:var(--text-muted); margin-bottom:.6rem; } .ps-metrics { list-style:none; width:100%; margin-top:.75rem; } .ps-metric-item { display:flex; justify-content:space-between; padding:.25rem 0; font-size:.8rem; border-bottom:1px solid var(--border); } .ps-metric-item:last-child { border-bottom:none; } .ps-metric-label { color:var(--text-muted); } .ps-metric-value.good { color:var(--good); font-weight:600; } .ps-metric-value.attention { color:var(--attention); font-weight:600; } .ps-metric-value.critical { color:var(--critical); font-weight:600; } .ps-metric-value.neutral { color:var(--text-muted); } .ps-opps { list-style:none; margin-top:.75rem; display:flex; flex-direction:column; gap:.35rem; } .ps-opp-item { font-size:.82rem; color:var(--text-muted); display:flex; gap:.5rem; align-items:flex-start; } /* ───────────────────────────────────────────────────────── SCREENSHOT CARDS ───────────────────────────────────────────────────────── */ .screenshot-frame { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); } .browser-bar { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; background: var(--bg-2); border-bottom: 1px solid var(--border); } .browser-dot { width:8px; height:8px; border-radius:50%; } .browser-dot:nth-child(1) { background:#ef4444; } .browser-dot:nth-child(2) { background:#f59e0b; } .browser-dot:nth-child(3) { background:#10b981; } .browser-url { flex:1; font-size:.7rem; color:var(--text-subtle); background:var(--bg); border-radius:4px; padding:.2rem .5rem; } .screenshot-img { width:100%; height:auto; display:block; } .screenshot-img-mobile { max-width:280px; margin-inline:auto; display:block; } /* Mobile frame */ .mobile-frame-wrap { display:flex; justify-content:center; padding:.5rem 0; } .mobile-frame { width:220px; border:6px solid var(--text-subtle); border-radius:24px; overflow:hidden; position:relative; background:var(--bg); } .mobile-notch { height:14px; background:var(--text-subtle); display:flex; align-items:center; justify-content:center; } .mobile-notch::after { content:''; width:40px; height:5px; background:var(--bg); border-radius:3px; } /* ───────────────────────────────────────────────────────── GOOGLE SNIPPET PREVIEW ───────────────────────────────────────────────────────── */ .snippet-preview-wrap { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 1.25rem 1.5rem; font-family: arial, 'Helvetica Neue', sans-serif; max-width: 600px; } /* O snippet fica sempre em modo "claro" para imitar o Google */ .snippet-favicon-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; } .snippet-favicon-row img { width: 18px; height: 18px; border-radius: 3px; object-fit: contain; } .snippet-favicon-domain { font-size: .82rem; color: #202124; } .snippet-title-preview { font-size: 1.08rem; color: #1a0dab; line-height: 1.3; cursor: pointer; margin-bottom: .25rem; word-break: break-word; } .snippet-title-preview.over-limit { color: #d93025; text-decoration: line-through; } .snippet-url-preview { font-size: .82rem; color: #006621; margin-bottom: .45rem; word-break:break-all; } .snippet-desc-preview { font-size: .88rem; color: #4d5156; line-height: 1.55; } .snippet-length-warn { font-size: .72rem; color: #d93025; margin-top: .25rem; font-style: italic; } .snippet-length-ok { font-size: .72rem; color: #188038; margin-top: .25rem; } /* ───────────────────────────────────────────────────────── SOCIAL & TAGS ───────────────────────────────────────────────────────── */ .social-grid { display:flex; flex-wrap:wrap; gap:.5rem; } .social-chip { display:flex; align-items:center; gap:.3rem; padding:.25rem .7rem; border-radius:999px; font-size:.78rem; font-weight:500; border:1px solid var(--border); } .social-chip.found { border-color:var(--good); color:var(--good); background:var(--good-bg); } .social-chip.missing { color:var(--text-subtle); } .tag-list { display:flex; flex-wrap:wrap; gap:.35rem; } .tag { padding:.18rem .6rem; border-radius:5px; background:var(--brand-glow); color:var(--brand); font-size:.76rem; font-weight:500; } /* ───────────────────────────────────────────────────────── HISTÓRICO LOCAL ───────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────── BOTÕES AUXILIARES ───────────────────────────────────────────────────────── */ .btn-export { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem 1.1rem; border:1px solid var(--border); border-radius:9px; background:var(--bg-card); color:var(--text-muted); font-size:.84rem; font-weight:500; cursor:pointer; font-family:inherit; transition:border-color var(--transition), color var(--transition); } .btn-export:hover { border-color:var(--brand); color:var(--brand); } .btn-export svg { width:14px; height:14px; } /* ───────────────────────────────────────────────────────── ALERTA DE ERRO ───────────────────────────────────────────────────────── */ .alert-error { background:var(--critical-bg); border:1px solid var(--critical); border-radius:12px; padding:1.25rem 1.5rem; color:var(--critical); margin:2rem auto; max-width:620px; font-size:.9rem; } .alert-error strong { display:block; margin-bottom:.35rem; font-size:1rem; } /* ───────────────────────────────────────────────────────── FOOTER ───────────────────────────────────────────────────────── */ .site-footer { border-top:1px solid var(--border); padding:1.25rem; text-align:center; color:var(--text-subtle); font-size:.78rem; margin-top:2rem; } /* ───────────────────────────────────────────────────────── UTILITÁRIOS ───────────────────────────────────────────────────────── */ .text-good { color:var(--good)!important; } .text-attention { color:var(--attention)!important; } .text-critical { color:var(--critical)!important; } .text-muted { color:var(--text-muted); } .text-small { font-size:.82rem; } .mt-1 { margin-top:.5rem; } .mt-2 { margin-top:1rem; } .flex { display:flex; align-items:center; gap:.5rem; } /* ───────────────────────────────────────────────────────── RESPONSIVIDADE ───────────────────────────────────────────────────────── */ @media(max-width:768px) { .hero { padding:3rem 1rem 2.5rem; } .score-hero { padding:1.5rem; gap:1.25rem; } .a-card { padding:1.15rem; } .form-card { padding:1.5rem 1.15rem; } .analysis-grid.cols-2, .analysis-grid.cols-3 { grid-template-columns:1fr; } .ps-scores-grid { flex-direction:column; } .results-topbar { flex-wrap:wrap; } } @media(max-width:480px) { .analysis-grid { grid-template-columns:1fr; } .info-grid { grid-template-columns:1fr 1fr; } .score-hero { grid-template-columns:1fr; } }