/* acao-page.css — estilo da página de ação (dados, espelha o visual escuro do site). */ /* largura/padding alinhados ao .article-container (1200px) → casa com header e footer */ .acao-container { max-width: 1200px; margin: 0 auto; padding: 24px 20px 40px; box-sizing: border-box; width: 100%; } .acao-container section.acao-sec { padding: 0; } /* article-fii.css seta `html, body, .page-wrapper { overflow-x: hidden }`; o browser converte o overflow-y ausente pra "auto" (os dois eixos precisam ficar "não-visible" juntos) — isso transforma body/.page-wrapper em scroll containers que NUNCA rolam de fato (quem rola é o ), e quebra position:sticky de tudo dentro deles: o .fii-tabs abaixo simplesmente some ao rolar em vez de grudar sob o topbar fixo do site (mesmo fix já usado no V4 dos FIIs, fii-page-v4.css). NÃO mexe no — ele é o scroller real (document.scrollingElement) e mantém overflow-x hidden pra não voltar o risco de estouro horizontal. Este arquivo só carrega na página de ação, então o seletor pode mirar direto. */ body, .page-wrapper { overflow: visible; } /* ── Menu de abas (mesmo visual dos FIIs; copiado de fii-page.css pois não carregamos o fii-page.css inteiro). Alinhado à coluna do conteúdo. ── */ .fii-tabs { position: sticky; top: var(--topbar-h, 56px); z-index: 40; background: linear-gradient(180deg, rgba(13,17,23,0.95) 0%, rgba(13,17,23,0.88) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.08); margin: 8px 0 8px; scroll-margin-top: calc(var(--topbar-h, 56px) + 4px); } .fii-tabs-inner { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 8px 0; justify-content: flex-start; } .fii-tabs-inner::-webkit-scrollbar { display: none; } .fii-tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.72); font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .18s ease; flex-shrink: 0; } .fii-tab-btn:hover { color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); } .fii-tab-btn.is-active { color: #fff; background: linear-gradient(135deg, rgba(16,185,129,0.22) 0%, rgba(59,130,246,0.22) 100%); border-color: rgba(16,185,129,0.45); box-shadow: 0 4px 14px rgba(16,185,129,0.15); } .fii-tab-icon { display: inline-flex; align-items: center; } .fii-tab-pane { animation: fii-fade-in .25s ease; } .fii-tab-pane[hidden] { display: none !important; } .acao-panes .acao-sec { margin-top: 6px; } @keyframes fii-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .fii-tab-btn { padding: 9px 12px; } .fii-tab-icon svg { width: 14px; height: 14px; } } /* ── HERO (cabeçalho) — mesma estrutura do FII (banda + ticker/preço grandes + tira de métricas), CSS PRÓPRIO (a página de ação não carrega o Tailwind CDN que o fii-template.js injeta só na V1 desktop). O fundo geral do site não muda — só a banda do cabeçalho ganha um acento violeta (#a78bfa, já a "cor de ação" do site) pra deixar claro que isto é uma ação, não um FII. ── */ .acao-hero-desktop, .acao-hero-mobile { /* são
s de verdade (semântica) — o seletor genérico `header` em style.css dá position:sticky + z-index:1000 pra TODO
da página (pro cabeçalho do site). O position aqui já sobrescreve (relative), mas faltava sobrescrever o z-index: sem isso o hero ficava com z-index:1000, acima do .article-topbar-wrap (z-index:50) do site, e "vazava" por cima dele em qualquer situação de overlap. */ position: relative; z-index: 0; overflow: hidden; background: linear-gradient(135deg, var(--bg-primary, #0d1117) 0%, var(--bg-secondary, #161b22) 55%, rgba(124,58,237,0.16) 100%); border: 1px solid rgba(167,139,250,0.25); border-radius: 18px; margin: 0 0 24px; } .acao-hero-desktop::before, .acao-hero-mobile::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a78bfa' fill-opacity='0.035'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .acao-hero-desktop { display: none; padding: 30px 32px 24px; } .acao-hero-inner { position: relative; z-index: 1; } .acao-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; } .acao-hero-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .acao-hero-id-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .acao-hero-ticker { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary, #e6edf3); margin: 0; } .acao-hero-pill, .acao-hm-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; background: rgba(167,139,250,0.16); color: #c4b5fd; font-size: 0.8rem; font-weight: 700; border: 1px solid rgba(167,139,250,0.32); white-space: nowrap; } .acao-hero-nome, .acao-hm-nome { font-size: 1rem; color: var(--text-secondary, #9ca3af); margin-top: 2px; } .acao-hero-price { text-align: right; } .acao-hero-price-row { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; } .acao-hero-currency, .acao-hm-currency { font-size: 1.3rem; font-weight: 600; color: #c4b5fd; } .acao-hero-amount { font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary, #e6edf3); } .acao-hero-meta { margin-top: 6px; font-size: 0.85rem; color: var(--text-muted, #8b949e); } .acao-hero-metrics { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; flex-wrap: wrap; } .acao-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; } .acao-hero-metric-list { display: flex; gap: 28px; flex-wrap: wrap; } .acao-hero-metric { display: flex; flex-direction: column; gap: 2px; } .acao-hero-metric-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #8b949e); } .acao-hero-metric-val { font-size: 1.2rem; font-weight: 700; color: var(--text-primary, #e6edf3); } .acao-hero-metric-val.is-gain { color: #3fb950; } .acao-hero-mobile { display: block; padding: 18px 16px 16px; } .acao-hm-id { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .acao-hm-ticker { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--text-primary, #e6edf3); } .acao-hm-cota { margin-top: 14px; position: relative; z-index: 1; } .acao-hm-cota-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #8b949e); } .acao-hm-cota-price { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; } .acao-hm-amount { font-size: 2.1rem; font-weight: 800; color: var(--text-primary, #e6edf3); } .acao-hm-cota-meta { font-size: 0.78rem; color: var(--text-muted, #8b949e); margin-top: 2px; } .acao-hm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; position: relative; z-index: 1; } .acao-hm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.25); font-size: 0.76rem; color: #e6edf3; } .acao-hm-chip-label { color: var(--text-muted, #8b949e); } .acao-hm-chip strong { color: #c4b5fd; } .acao-hm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; position: relative; z-index: 1; } @media (min-width: 1024px) { .acao-hero-desktop { display: block; } .acao-hero-mobile { display: none; } } .acao-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 20px; } .acao-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 14px 16px; } .acao-card-label { font-size: 0.72rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; } .acao-card-valor { font-size: 1.25rem; font-weight: 700; color: var(--text-primary, #e6edf3); margin-top: 4px; } .acao-card-det { font-size: 0.74rem; color: #64748b; margin-top: 2px; } /* Ações: favoritar + carteira */ .acao-act-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; background: rgba(255,255,255,0.04); color: #cbd5e1; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all .15s; } .acao-act-btn:hover { color: #fff; border-color: rgba(255,255,255,0.24); } .acao-act-btn.on { color: #fff; background: linear-gradient(135deg, rgba(167,139,250,0.24), rgba(59,130,246,0.20)); border-color: rgba(167,139,250,0.5); } .acao-act-btn .acao-act-ic { font-size: 1rem; line-height: 1; } .acao-fav-btn.on { background: rgba(244,63,94,0.14); border-color: rgba(244,63,94,0.5); } .acao-modal-bg { position: fixed; inset: 0; background: rgba(2,6,23,0.7); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; } .acao-modal { background: #0f172a; border: 1px solid #1e293b; border-radius: 14px; padding: 20px; width: 100%; max-width: 380px; } .acao-modal h3 { margin: 0 0 14px; color: #e6edf3; font-size: 1.05rem; } .acao-modal label { display: block; color: #94a3b8; font-size: 0.8rem; margin-bottom: 12px; } .acao-modal input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; background: #0b1220; border: 1px solid #1e293b; border-radius: 8px; color: #e6edf3; padding: 9px 11px; font-size: 0.92rem; } .acao-modal-err { color: #f87171; font-size: 0.8rem; min-height: 1.1em; margin-bottom: 6px; } .acao-modal-foot { display: flex; justify-content: flex-end; gap: 8px; } .acao-sec { margin-top: 30px; } .acao-sec h2 { font-size: 1.15rem; color: var(--text-primary, #e6edf3); border-left: 3px solid #a78bfa; padding-left: 10px; margin-bottom: 14px; } .acao-desc { color: #cbd5e1; line-height: 1.6; font-size: 0.94rem; } .acao-fatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; margin-top: 14px; } .acao-fato { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #1e293b; padding: 7px 0; font-size: 0.86rem; } .acao-fato span { color: #94a3b8; } .acao-fato strong { color: #e2e8f0; text-align: right; font-weight: 600; } .acao-link { display: inline-block; margin-top: 14px; color: #a78bfa; text-decoration: none; font-size: 0.86rem; } .acao-chart-wrap { position: relative; height: 280px; background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 12px; } .acao-vazio { color: #64748b; font-size: 0.86rem; padding: 18px; } .acao-docs-sub { color: #94a3b8; font-size: 0.8rem; margin-bottom: 12px; } @media (max-width: 400px) { .acao-hero-ticker { font-size: 2.4rem; } .acao-hero-amount { font-size: 2.4rem; } .acao-hm-ticker { font-size: 1.7rem; } .acao-hm-amount { font-size: 1.8rem; } } /* ── Timeline de preço (vg-*): padding que no FII vem do Tailwind (p-4 md:p-6) ── */ .vg-price-card { padding: 16px; margin-bottom: 22px; } @media (min-width: 768px) { .vg-price-card { padding: 22px; } } .acao-sobre { margin-top: 22px; } /* cards menores p/ "Sobre a empresa" */ .acao-cards-sm { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .acao-cards-sm .acao-card-valor { font-size: 0.98rem; line-height: 1.25; } /* Dividendos: toggle por ano / por provento + tabela anual */ .acao-div-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .acao-toggle { display: inline-flex; gap: 6px; } .acao-tg { padding: 7px 13px; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.72); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all .18s ease; } .acao-tg:hover { color: #fff; border-color: rgba(255,255,255,0.16); } .acao-tg.is-active { color: #fff; background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(59,130,246,0.22)); border-color: rgba(16,185,129,0.45); } .acao-tab-wrap { overflow-x: auto; margin-top: 16px; } .acao-tab { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .acao-tab th, .acao-tab td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #1e293b; } .acao-tab th { color: #94a3b8; font-weight: 600; } .acao-tab td { color: #e2e8f0; }