/* ═══════════════════════════════════════════════════════════════════════════ * 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: var(--st-bg-1, #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(var(--st-bg-rgb, 8, 8, 10),.94), rgba(var(--st-bg-rgb, 8, 8, 10),.55) 46%, transparent 74%), linear-gradient(to bottom, transparent 62%, var(--st-bg-1, #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, var(--st-c-c4973a, #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: var(--st-ink-1b, #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, var(--st-c-c4973a, #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: var(--st-ink-4, #A29C93); } .lab-hero__d strong { color: var(--st-ink-1b, #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: var(--st-ink-4, #A29C93); background: rgba(var(--st-ink-rgb-b, 242, 239, 233),.035); border: 1px solid rgba(var(--st-ink-rgb-b, 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: var(--st-ink-4, #A29C93); text-decoration: none; transition: color .4s ease; } .lab-hero__desce:hover { color: var(--accent, var(--st-c-c4973a, #C4973A)); } .lab-hero__desce svg { width: 15px; height: 15px; } /* ── HERO NO POST ─────────────────────────────────────────────────────────── O topo do artigo reusa o hero da listagem: mesmo grafo, mesmo canvas, mesmo script. Só muda o enquadramento, porque o conteúdo aqui é CENTRALIZADO (o título do post) e lá é alinhado à esquerda. Especificidade proposital: `.tp-breadcrumb-ptb { padding-top: 180px }` mora no main.css, que a página carrega DEPOIS deste arquivo. Uma classe só (0,1,0) perderia o empate por ordem; por isso as duas classes juntas. ═══════════════════════════════════════════════════════════════════════════ */ .lab-hero.lab-hero--post { padding-block: clamp(118px, 13vw, 186px) clamp(34px, 4vw, 56px); } /* Véu centralizado: lá o texto fica à esquerda, aqui no meio — o mesmo gradiente de canto deixaria o título disputando com a teia de um lado só. */ .lab-hero--post::after { background: radial-gradient(64% 66% at 50% 48%, rgba(var(--st-bg-rgb, 8, 8, 10),.93), rgba(var(--st-bg-rgb, 8, 8, 10),.5) 48%, transparent 78%), linear-gradient(to bottom, transparent 64%, var(--st-bg-1, #08080A)); } /* O tema desenha o título do post em 80px com line-height 1.5 — folgado demais para um título de 8 palavras dentro de um hero. Aperta sem encolher. */ .lab-hero--post .tp-breadcrumb-title { font-size: clamp(30px, 4.6vw, 66px); line-height: 1.12; letter-spacing: -.035em; max-width: 20ch; margin-inline: auto; } .lab-hero--post .tp-breadcrumb-list { margin-top: clamp(18px, 2vw, 26px); } /* ── 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: var(--st-ink-4, #A29C93); } .tp-blog-masonry-item-time span { color: var(--st-t-6a645c, #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(var(--st-ink-rgb-b, 242, 239, 233),.08); border-radius: 6px; padding: clamp(18px, 2vw, 26px); background: var(--st-bg-1e, #0E0E11); transition: border-color .45s ease; } .tp-blog-masonry-item:hover { border-color: rgba(var(--accent-rgb, 196,151,58), .34); } /* O card vivo (o feixe girando na borda) MUDOU DE ARQUIVO: `.ark-card` não é do blog, é o card do site inteiro, declarado em arke-home.css — e a regra agora mora lá, junto do componente. Ver o bloco "CARD VIVO" naquele arquivo. */ .tp-blog-masonry-title a { color: var(--st-ink-1b, #F2EFE9); } .tp-blog-masonry-tag span { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .08em; color: var(--accent, var(--st-c-c4973a, #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(var(--st-bg-rgb, 8, 8, 10),.94), rgba(var(--st-bg-rgb, 8, 8, 10),.6) 52%, transparent 82%), linear-gradient(to bottom, transparent 58%, var(--st-bg-1, #08080A)); } } @media (prefers-reduced-motion: reduce) { .lab-hero__desce { transition: none; } }