/* ═══════════════════════════════════════════════════════════════════════════ * arke-blog.css — o hero do blog (LAB) e os ajustes da listagem. * * CONTEXTO DO CONSERTO: o blog-grid.html não carregava arke-nav.css nem * arke-tokens.css. Sem o primeiro, os botões do header ficavam colados * ("DemonstraçãoConectarInscrever-se"); sem o segundo, var(--accent) não * existia e a página caía nas cores do tema comprado. Os dois links foram * acrescentados ao — este arquivo cuida só do que é do blog. * * O HERO: um grafo PARADO desenhado em canvas, com bolinhas que acendem * sozinhas mostrando os tipos editoriais. O grafo não se move por ordem * explícita do CET; o que pisca é a palavra. Ver arke-blog-hero.js. * ═══════════════════════════════════════════════════════════════════════════ */ /* ── HERO ──────────────────────────────────────────────────────────────── */ .lab-hero { position: relative; padding-block: clamp(112px, 13vw, 190px) clamp(60px, 7vw, 100px); background: #08080A; overflow: hidden; } .lab-hero__grafo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; } /* Véu radial: escurece o centro para o título nunca disputar com a teia. */ .lab-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(62% 70% at 26% 46%, rgba(8,8,10,.94), rgba(8,8,10,.55) 46%, transparent 74%), linear-gradient(to bottom, transparent 62%, #08080A); } .lab-hero > .container { position: relative; z-index: 3; } .lab-hero__k { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent, #C4973A); } .lab-hero__k::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; } .lab-hero__t { margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: clamp(34px, 5.6vw, 82px); font-weight: 800; line-height: .97; letter-spacing: -.04em; color: #F2EFE9; max-width: 17ch; } .lab-hero__t em { display: block; margin-top: .12em; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--accent, #C4973A); font-size: .86em; line-height: 1.02; } .lab-hero__d { margin: clamp(22px, 2.6vw, 34px) 0 0; max-width: 56ch; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.62; color: #A29C93; } .lab-hero__d strong { color: #F2EFE9; font-weight: 600; } /* Os tipos editoriais listados embaixo — o mesmo catálogo que pisca no grafo */ .lab-tipos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: clamp(26px, 3vw, 40px); max-width: 62ch; } .lab-tipos span { padding: 5px 11px; border-radius: 3px; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .06em; color: #A29C93; background: rgba(242,239,233,.035); border: 1px solid rgba(242,239,233,.09); } .lab-hero__desce { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(28px, 3.2vw, 44px); font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #A29C93; text-decoration: none; transition: color .4s ease; } .lab-hero__desce:hover { color: var(--accent, #C4973A); } .lab-hero__desce svg { width: 15px; height: 15px; } /* ── LISTAGEM: só o que estava visivelmente quebrado ───────────────────── */ /* O tema desenha a foto do autor com fundo claro; no escuro virava um quadrado cinza. Sem foto, o bloco inteiro some em vez de mostrar placeholder. */ .tp-blog-masonry-item-user-content span { color: #A29C93; } .tp-blog-masonry-item-time span { color: #6A645C; } /* Capa ausente: em vez do 384X282 do tema, um bloco neutro com o fio da marca. */ .tp-blog-masonry-thumb img { width: 100%; height: auto; display: block; border-radius: 4px; } .tp-blog-masonry-item { border: 1px solid rgba(242,239,233,.08); border-radius: 6px; padding: clamp(18px, 2vw, 26px); background: #0E0E11; transition: border-color .45s ease; } .tp-blog-masonry-item:hover { border-color: rgba(var(--accent-rgb, 196,151,58), .34); } .tp-blog-masonry-title a { color: #F2EFE9; } .tp-blog-masonry-tag span { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .08em; color: var(--accent, #C4973A); } @media (max-width: 767px) { .lab-hero { padding-block: clamp(96px, 22vw, 130px) clamp(44px, 10vw, 70px); } .lab-hero__t { max-width: none; } .lab-hero::after { background: radial-gradient(90% 60% at 50% 40%, rgba(8,8,10,.94), rgba(8,8,10,.6) 52%, transparent 82%), linear-gradient(to bottom, transparent 58%, #08080A); } } @media (prefers-reduced-motion: reduce) { .lab-hero__desce { transition: none; } }