/* * blog.css — Chrome do blog Solar (listagem + artigo). * Reproduz a estrutura/layout do blog Elementar, recolorido para a marca * Solar (amarelo #fac202, azul #1a04ec, marinho #0b264b, Montserrat). * Escopado sob .blog-scope. O corpo do post (the_content) usa article.css. */ .blog-scope { --bg: #FFFFFF; --card: #FFFFFF; --side: #F7F7F7; --line: #E3E3E3; --line-2: #D2D2D2; --text: #191919; --text-dim: #4A4A4A; --text-faint: #8A8A8A; --text-mute: #B7B7B7; --brand: #1A04EC; --brand-deep: #0B264B; --brand-soft: #EAEAFB; --brand-hot: #3B28F0; --terra: #0B264B; --terra-deep: #061733; --terra-soft: #E7EBF1; --amarelo: #FAC202; --amarelo-bright: #FFD84D; --amarelo-soft: #FEF3D0; --ok: #199B55; --ok-soft: #E4F5EC; --r-card: 15px; --r-pill: 3.125rem; --r-sm: 6px; --shadow-2: 0 10px 30px -16px rgba(25, 25, 25, .18); --maxw: 720px; --display: 'Montserrat', system-ui, sans-serif; --body: 'Montserrat', system-ui, sans-serif; --mono: 'Montserrat', ui-monospace, monospace; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Dark mode do artigo/listagem (toggle via [data-theme] no ) */ html[data-theme="dark"] .blog-scope { --bg: #0E0F12; --card: #16181E; --side: #111317; --line: #24272F; --line-2: #2F333D; --text: #F0EFEC; --text-dim: #B5B0A4; --text-faint: #7A7568; --text-mute: #4F4B42; --brand: #6F7BD6; --brand-soft: #1B1E33; --brand-hot: #8A93E8; --terra: #9FB3D6; --terra-soft: #1B2330; --amarelo: #FFD84D; --amarelo-soft: #332A0B; --ok-soft: #12261B; } /* ─── Barra de progresso de leitura ─── */ .blog-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 200; background: var(--amarelo); width: 0%; transition: width .1s linear; pointer-events: none; } /* ─── Toggle claro/escuro (flutuante) ─── */ .blog-theme-toggle { position: fixed; right: 20px; bottom: 84px; z-index: 120; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text-dim); display: grid; place-items: center; font-size: 16px; cursor: pointer; box-shadow: var(--shadow-2); transition: .2s; } .blog-theme-toggle:hover { color: var(--brand); border-color: var(--brand); } .blog-theme-toggle .fa-sun { display: none; } html[data-theme="dark"] .blog-theme-toggle .fa-moon { display: none; } html[data-theme="dark"] .blog-theme-toggle .fa-sun { display: block; } /* ─── Faixa de categorias (topo da listagem) ─── */ .blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; } .blog-cat-chip { font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 7px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--text-dim); text-decoration: none; transition: .18s; } .blog-cat-chip:hover, .blog-cat-chip.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } /* ─── Layout wrapper ─── */ /* Corrige bug do TOC não-sticky: `body`/`.l-page` usam `overflow-x: hidden` (main.css) para travar scroll horizontal. Pela spec de CSS Overflow, se um eixo não é `visible`, o outro deixa de ser `visible` também (vira `auto`), o que transforma `body`/`.l-page` em contêineres de scroll de verdade — como nenhum dos dois chega a rolar de fato (a altura já acompanha o conteúdo), o `position: sticky` de qualquer descendente passa a se comportar como `static`, rolando junto com a página em vez de grudar. Não há combinação de overflow-x/overflow-y que mantenha um eixo travado e o outro genuinamente `visible`, então liberamos os dois eixos aqui (só nas páginas do blog; o conteúdo não depende do corte horizontal do resto do site). */ body, .l-page { overflow: visible; } .blog-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .blog-grid { display: grid; grid-template-columns: 58px minmax(0, var(--maxw)) 290px; gap: 34px; justify-content: center; /* NÃO usar align-items: start aqui: o TOC sticky não é ele mesmo o item do grid, é um