/* Localside — identidade "instrumento de precisão" Branco puro · tinta quase-preta · red oxide (primária) · teal (selo de privacidade) Tipografia: IBM Plex Sans (única família) + IBM Plex Mono para dados. Os nomes --paper/--card/--ink/--ink-soft/--line/--cobalt/--cobalt-soft/--signal/--amber são a API estável usada pelos módulos JS das ferramentas — os valores mudam, os nomes não. */ :root { color-scheme: light; --bg: oklch(1 0 0); --surface: oklch(0.975 0.003 30); --ink: oklch(0.23 0.015 30); --muted: oklch(0.45 0.02 30); --line: oklch(0.9 0.006 30); --primary: oklch(0.5 0.185 29); --primary-strong: oklch(0.43 0.17 29); --primary-tint: oklch(0.955 0.02 29); --seal: oklch(0.45 0.09 180); --seal-tint: oklch(0.96 0.025 180); --warn: oklch(0.5 0.12 60); --warn-tint: oklch(0.96 0.025 75); /* Cores de gráfico (validadas p/ CVD no guia dataviz): juros = teal vivo, investido = neutro. Adaptam ao dark mode no bloco abaixo. */ --chart-juros: oklch(0.54 0.13 180); --chart-juros-fill: oklch(0.54 0.13 180 / 0.22); --chart-invest: var(--muted); --chart-invest-fill: oklch(0.45 0.02 30 / 0.14); /* alta/baixa das cotações (verde/vermelho) */ --chart-up: oklch(0.58 0.15 155); --chart-down: oklch(0.55 0.19 25); /* API estável para os módulos JS (aliases da paleta nova) */ --paper: var(--bg); --card: oklch(0.99 0.002 30); --ink-soft: var(--muted); --cobalt: var(--primary); --cobalt-soft: var(--primary-tint); --signal: var(--seal); --amber: var(--warn); --radius: 8px; --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* aliases tipográficos legados */ --display: var(--sans); --body: var(--sans); --z-sticky: 10; --z-toast: 20; } /* Tema escuro — aplicado manualmente pelo seletor (data-theme="dark" no ). O script inline no resolve a preferência do sistema para data-theme antes da 1ª pintura, então o CSS depende só do atributo (sem flash). */ :root[data-theme='dark'] { color-scheme: dark; --bg: oklch(0.15 0 0); --surface: oklch(0.2 0 0); --ink: oklch(0.92 0.005 30); --muted: oklch(0.7 0.012 30); --line: oklch(0.3 0 0); --primary: oklch(0.6 0.16 29); --primary-strong: oklch(0.66 0.16 29); --primary-tint: oklch(0.24 0.035 29); --seal: oklch(0.75 0.1 175); --seal-tint: oklch(0.23 0.03 180); --warn: oklch(0.75 0.12 70); --warn-tint: oklch(0.24 0.03 75); --card: oklch(0.19 0 0); --chart-juros: oklch(0.72 0.12 180); --chart-juros-fill: oklch(0.72 0.12 180 / 0.2); --chart-invest-fill: oklch(0.7 0.012 30 / 0.16); --chart-up: oklch(0.74 0.16 155); --chart-down: oklch(0.68 0.19 25); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: var(--primary-tint); color: var(--ink); } h1, h2, h3 { text-wrap: balance; } a { color: var(--primary); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; } .wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: 8px 16px; z-index: var(--z-toast); text-decoration: none; font-weight: 600; border-radius: 0 0 6px 0; } .skip-link:focus { left: 0; } /* ---------- Cabeçalho ---------- */ header.site { border-bottom: 1px solid var(--line); background: var(--bg); } .site-bar { display: flex; align-items: center; gap: 16px; padding: 14px 0; } .brand { font-weight: 700; font-size: 1.22rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; } .brand::before { content: ''; width: 10px; height: 10px; background: var(--primary); border-radius: 2px; align-self: center; margin-right: 6px; } .brand b { color: var(--primary); font-weight: 700; } .site-actions { margin-left: auto; display: flex; gap: 16px; align-items: center; } .site-actions a { color: var(--muted); text-decoration: none; font-size: 0.92rem; transition: color 0.15s; } .site-actions a:hover, .site-actions a:focus-visible { color: var(--primary); } /* Seletor de tema claro/escuro */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .t-sun { display: none; } .theme-toggle .t-moon { display: block; } :root[data-theme='dark'] .theme-toggle .t-sun { display: block; } :root[data-theme='dark'] .theme-toggle .t-moon { display: none; } /* Selo de privacidade — assinatura da marca, presente em todas as páginas */ .privacy-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 500; color: var(--seal); background: var(--seal-tint); border: 1px solid color-mix(in oklch, var(--seal) 30%, transparent); border-radius: 999px; padding: 4px 12px; white-space: nowrap; } .privacy-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--seal); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---------- Home ---------- */ .hero { padding: 64px 0 36px; } .hero h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; margin: 0 0 16px; max-width: 17ch; } .hero h1 em { font-style: normal; color: var(--primary); } .hero p { color: var(--muted); max-width: 54ch; margin: 0 0 10px; font-size: 1.05rem; } .hero .hero-note { font-size: 0.92rem; color: var(--seal); margin: 0; display: inline-flex; align-items: center; gap: 8px; } .hero .hero-note::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--seal); flex-shrink: 0; animation: pulse 2.4s ease-in-out infinite; } /* Seções por categoria */ .cat { padding: 10px 0 26px; } .cat > h2 { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin: 18px 0 4px; display: flex; align-items: baseline; gap: 10px; } .cat > h2 .count { font-family: var(--mono); font-size: 0.72rem; color: var(--primary); } .tool-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 28px; } .tool-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 10px; margin: 0 -10px; text-decoration: none; color: var(--ink); border-radius: 8px; border-bottom: 1px solid var(--line); transition: background 0.15s; } .tool-row:hover, .tool-row:focus-visible { background: var(--surface); } .tool-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Tile do ícone da ferramenta — usa a paleta e troca com o tema */ .tool-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px; background: var(--primary-tint); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .tool-ico svg { width: 20px; height: 20px; } .tool-row:hover .tool-ico, .tool-row:focus-visible .tool-ico { background: var(--primary); color: oklch(0.99 0.002 29); } .tool-ico.lg { width: 46px; height: 46px; border-radius: 11px; } .tool-ico.lg svg { width: 24px; height: 24px; } .tool-row .t { font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .tool-row .t::after { content: '→'; font-family: var(--mono); font-size: 0.85rem; color: var(--line); transition: color 0.15s, transform 0.15s; } .tool-row:hover .t::after, .tool-row:focus-visible .t::after { color: var(--primary); transform: translateX(2px); } .tool-row .d { font-size: 0.84rem; color: var(--muted); margin-top: 2px; } /* ---------- Página de ferramenta ---------- */ .crumbs { font-size: 0.8rem; color: var(--muted); padding: 18px 0 0; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--primary); } .crumbs .sep { margin: 0 6px; color: var(--line); } .tool-head { padding: 14px 0 8px; } .tool-head-top { display: flex; align-items: center; gap: 13px; margin-bottom: 8px; } .tool-head-top h1 { margin: 0; } .tool-head h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 8px; } .tool-head .tagline { color: var(--muted); margin: 0 0 6px; max-width: 62ch; } /* A bandeja — dropzone assinatura */ .tray { margin: 22px 0 10px; background: var(--surface); border: 1.5px dashed color-mix(in oklch, var(--muted) 55%, transparent); border-radius: var(--radius); padding: 44px 24px; text-align: center; cursor: pointer; position: relative; transition: border-color 0.15s, background 0.15s; } .tray:hover, .tray.dragover { border-color: var(--primary); background: var(--primary-tint); } .tray.dragover { transform: scale(1.01); } .tray { transition: border-color 0.15s, background 0.15s, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); } .tray.received { animation: tray-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes tray-pop { 0% { transform: scale(1); } 35% { transform: scale(0.985); border-color: var(--seal); } 100% { transform: scale(1); } } .tray:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .tray .big { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; } .tray .hint { color: var(--muted); font-size: 0.85rem; margin-top: 4px; } .tray input[type='file'] { display: none; } /* Área de trabalho da ferramenta */ .bench { margin: 8px 0 26px; } /* Tudo que nasce dentro da bancada entra com um fade+subida suave */ .bench > *, .bench .file-row, .bench .controls, .bench .result-grid figure { animation: lk-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes lk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Barra de espera indeterminada (mostrada automaticamente pelo tray.js) */ .lk-wait { height: 4px; border-radius: 2px; overflow: hidden; background: var(--line); margin: 10px 0; position: relative; } .lk-wait span { position: absolute; inset: 0; width: 38%; background: var(--primary); border-radius: 2px; animation: lk-slide 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes lk-slide { 0% { left: -38%; } 100% { left: 100%; } } .file-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 8px 0; } .file-row .fname { font-family: var(--mono); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .file-row .fsize { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); } .file-row .fsize.saved { color: var(--seal); font-weight: 600; } .file-row button.icon { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 1rem; padding: 4px; } .file-row button.icon:hover { color: var(--primary); } .controls { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 10px 0; } .controls label { font-size: 0.8rem; color: var(--muted); display: block; } .controls .field { display: flex; flex-direction: column; gap: 4px; } .controls select, .controls input[type='number'], .controls input[type='range'], .controls input[type='text'], .controls input[type='tel'], .controls input[type='date'] { font-family: var(--mono); font-size: 0.85rem; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--card); color: var(--ink); } .controls input[type='range'] { padding: 0; accent-color: var(--primary); min-width: 140px; } .controls input[type='checkbox'] { accent-color: var(--primary); } .btn { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; background: var(--primary); color: oklch(0.99 0.002 29); border: none; border-radius: var(--radius); padding: 12px 22px; cursor: pointer; transition: background 0.15s, transform 0.12s ease-out, box-shadow 0.15s; } .btn:hover:not(:disabled) { background: var(--primary-strong); box-shadow: 0 2px 10px color-mix(in oklch, var(--primary) 25%, transparent); } .btn:active:not(:disabled) { transform: scale(0.97); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn.secondary { background: transparent; color: var(--primary); border: 1px solid color-mix(in oklch, var(--primary) 45%, transparent); } .btn.secondary:hover:not(:disabled) { background: var(--primary-tint); } .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .status { font-size: 0.85rem; color: var(--muted); margin: 10px 0; min-height: 1.2em; } .status.ok { color: var(--seal); font-weight: 500; animation: lk-in 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .status.ok::before { content: '✓ '; } .status.err { color: var(--warn); font-weight: 500; } .lk-progress { display: flex; align-items: center; gap: 10px; margin: 10px 0; } .lk-progress progress.lk { flex: 1; } .lk-pct { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--primary); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; } progress.lk { width: 100%; height: 8px; appearance: none; border: none; background: var(--line); border-radius: 4px; overflow: hidden; } progress.lk::-webkit-progress-bar { background: var(--line); border-radius: 4px; } progress.lk::-webkit-progress-value { background: var(--primary); border-radius: 4px; transition: width 0.2s ease; } progress.lk::-moz-progress-bar { background: var(--primary); border-radius: 4px; } .result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 14px 0; } .result-grid figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; text-align: center; } .result-grid img, .result-grid canvas { max-width: 100%; border-radius: 4px; display: block; margin: 0 auto; } .result-grid figcaption { font-family: var(--mono); font-size: 0.7rem; margin-top: 6px; } .result-grid a { color: var(--primary); } textarea.ocr-out { width: 100%; min-height: 220px; font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--card); color: var(--ink); resize: vertical; } .heavy-note { font-size: 0.8rem; color: var(--warn); background: var(--warn-tint); border: 1px solid color-mix(in oklch, var(--warn) 25%, transparent); border-radius: 6px; padding: 8px 12px; margin: 8px 0; } /* ---------- Conteúdo de apoio ---------- */ .intro-text { color: var(--muted); max-width: 68ch; text-wrap: pretty; } section.faq { padding: 8px 0 30px; } section.faq h2, section.related h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; margin: 24px 0 10px; } .faq details { border-bottom: 1px solid var(--line); padding: 0 2px; } .faq summary { cursor: pointer; font-weight: 600; font-size: 0.94rem; padding: 13px 0; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--primary); font-family: var(--mono); transition: transform 0.15s; flex-shrink: 0; } .faq details[open] summary::after { content: '−'; } .faq details p { margin: 0 0 14px; color: var(--muted); font-size: 0.92rem; max-width: 70ch; animation: lk-in 0.25s ease-out; } section.related { padding-bottom: 40px; } .related-list { display: flex; flex-wrap: wrap; gap: 10px; } .related-list a { font-size: 0.86rem; color: var(--ink); text-decoration: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 14px; transition: border-color 0.15s, color 0.15s; } .related-list a:hover, .related-list a:focus-visible { border-color: var(--primary); color: var(--primary); } /* ---------- Slots de anúncio ---------- */ .ad-slot { min-height: 90px; margin: 22px 0; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: var(--radius); color: color-mix(in oklch, var(--muted) 50%, transparent); font-family: var(--mono); font-size: 0.7rem; } /* ---------- Rodapé profissional ---------- */ footer.site { border-top: 1px solid var(--line); padding: 40px 0 32px; color: var(--muted); font-size: 0.82rem; background: var(--surface); } .footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 26px 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .footer-col h3 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .footer-col a { color: var(--ink); text-decoration: none; font-size: 0.86rem; transition: color 0.15s; } .footer-col a:hover, .footer-col a:focus-visible { color: var(--primary); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-top: 22px; } .footer-bottom .brand { font-size: 1.05rem; } .footer-bottom .grow { flex: 1; } .footer-bottom .privacy-pill { margin: 0; } .footer-bottom p { margin: 0; } @media (max-width: 560px) { .site-bar nav { gap: 12px; } .tray { padding: 32px 14px; } .controls { gap: 10px 14px; } .hero { padding: 44px 0 28px; } } /* ---------- Busca de ferramentas (home) ---------- */ .tool-search { position: relative; display: flex; align-items: center; margin: 4px 0 18px; } .tool-search-ico { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; } .tool-search input[type='search'] { width: 100%; font-family: var(--sans); font-size: 1.02rem; padding: 15px 46px 15px 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); -webkit-appearance: none; appearance: none; transition: border-color 0.15s, box-shadow 0.15s; } .tool-search input[type='search']::-webkit-search-decoration, .tool-search input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; } .tool-search input::placeholder { color: var(--muted); } .tool-search input:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 20%, transparent); } .tool-search-clear { position: absolute; right: 10px; width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; } .tool-search-clear:hover { color: var(--primary); background: var(--primary-tint); } .tool-search-empty { text-align: center; color: var(--muted); font-size: 0.95rem; padding: 24px 0; } /* ---------- Ferramentas de cotação ---------- */ .q-tool { margin-top: 4px; } /* Conversor: dois lados (dropdown + valor) + botão de inverter */ .q-conv { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; } .q-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .q-side select, .q-side input { width: 100%; font-family: var(--sans); font-size: 0.95rem; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; background: var(--card); color: var(--ink); } .q-side input { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; } .q-side select:focus-visible, .q-side input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); } .q-swap { align-self: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--primary); font-size: 1.2rem; cursor: pointer; line-height: 1; transition: background 0.15s, transform 0.15s, color 0.15s; } .q-swap:hover { background: var(--primary); color: #fff; transform: rotate(180deg); } .q-rate { font-family: var(--mono); font-size: 0.9rem; color: var(--muted); margin: 12px 2px 0; min-height: 1.2em; } .q-rate b { color: var(--ink); } /* Cartão de preço em destaque */ .q-price-card { background: var(--primary-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-top: 14px; } .q-price-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .q-price-label { font-size: 0.88rem; color: var(--muted); } .q-price-big { font-size: 2.1rem; font-weight: 700; color: var(--primary); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .q-chg { display: inline-flex; flex-direction: column; align-items: flex-end; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; } .q-chg.up { color: var(--chart-up); } .q-chg.down { color: var(--chart-down); } .q-chg-per { font-size: 0.72rem; font-weight: 500; color: var(--muted); margin-top: 2px; } .q-hilo { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 0.82rem; color: var(--muted); font-family: var(--mono); } .q-hilo b { color: var(--ink); font-weight: 600; } .q-price-note { margin-top: 10px; font-size: 0.74rem; line-height: 1.5; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; } /* Seletor de faixa (1 dia, 5 dias, 1 mês…) */ .q-ranges { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; } .q-range-btn { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--card); color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .q-range-btn:hover { color: var(--primary); border-color: var(--primary); } .q-range-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* Gráfico */ .q-hist { margin-top: 10px; } .q-chart-wrap { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 10px 8px; } .q-chart { width: 100%; height: 300px; } .q-tip { position: absolute; top: 6px; left: 0; display: none; flex-direction: column; gap: 1px; pointer-events: none; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); z-index: 2; white-space: nowrap; } .q-tip-v { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; color: var(--ink); } .q-tip-d { font-size: 0.7rem; color: var(--muted); } .q-source { font-size: 0.74rem; color: var(--muted); line-height: 1.5; margin: 14px 2px 0; padding-top: 12px; border-top: 1px solid var(--line); } /* Esqueleto de carregamento */ .q-skeleton { border-radius: var(--radius); background: linear-gradient(100deg, var(--surface) 30%, var(--line) 50%, var(--surface) 70%); background-size: 200% 100%; animation: q-shimmer 1.2s infinite linear; } .q-sk-card { height: 118px; margin-top: 14px; } .q-sk-chart { height: 320px; margin-top: 10px; } @keyframes q-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (max-width: 560px) { .q-conv { grid-template-columns: 1fr; gap: 8px; } .q-swap { justify-self: center; transform: rotate(90deg); } .q-swap:hover { transform: rotate(270deg); } .q-price-big { font-size: 1.7rem; } .q-chart { height: 240px; } .q-sk-chart { height: 260px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }