/* archēLAB — override: SOMENTE cor + layout de menu. Fontes/tamanhos = originais do template. */
/* ══════════════════════════════════════════════════════════════════════════
* WEBFONTS AUTO-HOSPEDADAS (CET 2026-07-30, decisão dele na auditoria de SEO)
*
* O que a auditoria achou: 'Playfair Display' é pedida em 165 declarações,
* espalhadas por 42 folhas — é A tipografia de display do site — e NUNCA era
* carregada. Não havia @font-face e nenhum casco tinha pro Google Fonts.
* O site inteiro caía em Georgia (fallback). Em Windows/macOS isso passa
* despercebido porque Georgia existe; em Android, que não tem Georgia, a
* tipografia da marca virava um serif genérico do sistema. Poppins (usada por
* --tp-ff-poppins, que é quem manda no hero e nos títulos de seção) estava na
* mesma situação, caindo no `serif` do fallback.
*
* 🔴 `latin-ext` NÃO É OPCIONAL AQUI. O `ē` de archē é U+0113, que mora no
* subset latin-ext — sem esses arquivos a marca seria renderizada com o ē vindo
* de OUTRA fonte, no meio da palavra. É o detalhe que decide se a marca aparece
* certa. O unicode-range abaixo é o do próprio Google Fonts, sem edição.
*
* `font-display: swap`: o texto aparece na hora com o fallback e troca quando a
* fonte chega. Nunca invisível — LCP não paga por isso.
*
* Playfair é VARIÁVEL (um arquivo cobre 400..900). Poppins é estática: só os 3
* pesos que o site realmente usa (400/600/700). Total: 10 arquivos, 176 KB.
* ══════════════════════════════════════════════════════════════════════════ */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('../fonts/playfairdisplay-400-900-normal-latinext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('../fonts/playfairdisplay-400-900-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Itálico: o `em` do wordmark `archē` usa font-style: italic. */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url('../fonts/playfairdisplay-400-900-italic-latinext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url('../fonts/playfairdisplay-400-900-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/poppins-400-normal-latinext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/poppins-400-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
src: url('../fonts/poppins-600-normal-latinext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
src: url('../fonts/poppins-600-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
src: url('../fonts/poppins-700-normal-latinext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
src: url('../fonts/poppins-700-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { --gold:#C4973A; --gold-hover:#D4A94A; }
/* ===== COR: ouro da marca distribuído ===== */
.tp-section-subtitle, .tp-section-subtitle.st { color: var(--gold) !important; }
.tp-section-title-playfair span, .st-hero-title i { color: var(--gold) !important; }
.st-portfolio-item-btn a,
.st-testimonial-bottom a,
.st-copyright-sub,
.tp-about-funcact-item span,
.st-blog-item-tags span,
.st-about-card-tag span,
.st-choose-list ul li { color: var(--gold) !important; }
a:hover, .tp-line-white:hover, .tp-line-black:hover { color: var(--gold-hover) !important; }
.st-blog-item-tags-devide { background: var(--gold) !important; }
.tp-border-line, .tp-border-line.line-2, .tp-border-line.line-3, .tp-border-line.line-4 { background: var(--gold) !important; opacity: .5; }
.st-counter-item h4 { color: var(--gold) !important; }
.ar-award-year { color: var(--gold) !important; }
/* botão COMEÇAR */
.tp-header-8-btn .tp-btn-border-2 { border-color:var(--gold) !important; color:var(--gold) !important; }
.tp-header-8-btn .tp-btn-border-2:hover { background:var(--gold) !important; color:#0A0A0A !important; }
/* ===== LAYOUT: header-12 horizontal (sem tocar fonte/tamanho) ===== */
.tp-header-12-menu > nav > ul { display:flex; align-items:center; justify-content:center; gap:34px; margin:0; padding:0; list-style:none; }
.tp-header-12-menu > nav > ul > li { position:relative; margin:0; }
.tp-header-12-menu > nav > ul > li > a { display:inline-flex; align-items:center; gap:7px; }
.tp-header-12-menu > nav > ul > li > a:hover { color:var(--gold); }
.tp-header-12-menu > nav > ul > li .tp-submenu {
position:absolute; top:100%; left:0; min-width:238px; margin:0; padding:12px; list-style:none;
background:var(--st-bg-2b, #121212); border:1px solid var(--st-line, #2A2A2A); border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.55);
opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:60;
}
.tp-header-12-menu > nav > ul > li.has-dropdown:hover > .tp-submenu { opacity:1; visibility:visible; transform:translateY(10px); }
.tp-header-12-menu > nav > ul > li .tp-submenu > li > a { display:block; padding:9px 14px; border-radius:9px; color:var(--st-ink-3, #C9C4BC); white-space:nowrap; transition:background .2s, color .2s; }
.tp-header-12-menu > nav > ul > li .tp-submenu > li > a:hover { background:rgba(196,151,58,.12); color:var(--gold); }
/* header-10 layout (archēME) */
.tp-header-10-menu > nav > ul { display:flex; align-items:center; gap:34px; margin:0; padding:0; list-style:none; }
.tp-header-10-menu > nav > ul > li { position:relative; margin:0; }
.tp-header-10-menu > nav > ul > li.has-dropdown > a { display:inline-flex; align-items:center; gap:7px; }
.tp-header-10-menu > nav > ul > li .tp-submenu {
position:absolute; top:100%; left:0; min-width:238px; margin:0; padding:12px; list-style:none;
background:var(--st-bg-2b, #121212); border:1px solid var(--st-line, #2A2A2A); border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.55);
opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:60;
}
.tp-header-10-menu > nav > ul > li.has-dropdown:hover > .tp-submenu { opacity:1; visibility:visible; transform:translateY(10px); }
.tp-header-10-menu > nav > ul > li .tp-submenu > li > a { display:block; padding:9px 14px; border-radius:9px; color:var(--st-ink-3, #C9C4BC); white-space:nowrap; transition:background .2s, color .2s; }
.tp-header-10-menu > nav > ul > li .tp-submenu > li > a:hover { background:rgba(196,151,58,.12); color:var(--gold); }
/* ===== OFFCANVAS contraste ===== */
.tp-offcanvas-area, .tp-offcanvas-wrapper, .tp-offcanvas-2-area, .tp-offcanvas-2-wrapper { background:var(--st-bg-1b, #0A0A0A) !important; }
.tp-offcanvas-area *, .tp-offcanvas-2-area * { color:var(--st-ink-1, #F5F2ED) !important; }
.tp-offcanvas-title, .tp-offcanvas-2-title { color:var(--st-t-ffffff, #FFFFFF) !important; }
.tp-offcanvas-area p, .tp-offcanvas-2-area p,
.tp-offcanvas-menu nav ul li a, .tp-offcanvas-2-menu nav ul li a { color:var(--st-ink-3, #C9C4BC) !important; }
.tp-offcanvas-menu nav ul li a:hover, .tp-offcanvas-2-menu nav ul li a:hover,
.tp-offcanvas-area a:hover, .tp-offcanvas-2-area a:hover { color:var(--gold) !important; }
.tp-offcanvas-close-btn, .tp-offcanvas-2-close-btn, .tp-offcanvas-close, .tp-offcanvas-2-close { cursor:pointer; position:relative; z-index:1002; }
.tp-offcanvas-close-btn svg path, .tp-offcanvas-2-close-btn svg path { stroke:var(--st-ink-1, #F5F2ED) !important; }
/* logo archēLAB — maior e com brilho pleno */
.tp-header-logo img, .tp-header-10-logo img, .tp-header-12-logo img { height:44px !important; width:auto !important; opacity:1 !important; filter:none !important; }
/* desabilita cursor mágico (edição) */
#magic-cursor, #ball, .mouse-cursor, .cursor-inner, .cursor-outer, .tp-cursor-point-area { display:none !important; }
body.tp-magic-cursor, .tp-magic-cursor { cursor:auto !important; }
a, button, .cursor-pointer { cursor:pointer !important; }
/* preloader desabilitado (edição) */
#preloader, .preloader, .tp-preloader, .preloader-wrap { display:none !important; opacity:0 !important; visibility:hidden !important; }
body { opacity:1 !important; visibility:visible !important; }
/* fallback: conteúdo flui normal mesmo sem ScrollSmoother (evita tela colapsada) */
#smooth-wrapper { position:static !important; height:auto !important; overflow-x:clip !important; width:100% !important; }
#smooth-content { height:auto !important; transform:none !important; }
/* sem ScrollSmoother o conteúdo vazava na horizontal (tela espremida/rolagem
lateral). overflow-x hidden no topo contém o vazamento SEM travar o scroll
vertical; box-sizing evita que padding estoure a largura. */
html, body { overflow-x:clip !important; max-width:100% !important; }
#smooth-content { overflow-x:clip !important; width:100% !important; }
img, video, iframe, svg { max-width:100% !important; height:auto; }
/* ═══════════════════════════════════════════════════════════════════════════
MENU MOBILE PRIME — estilo app (CET 2026-07-24)
Ancora no estado .tp-offcanvas-area.opened do tema. Não muda a estrutura
nem o JS de abrir/fechar — só eleva o visual e a animação.
═══════════════════════════════════════════════════════════════════════════ */
/* Backdrop com blur + escurecido (profundidade de app) */
.body-overlay { background: rgba(var(--st-r-6-6-8, 6, 6, 8),.55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .45s ease, visibility .45s ease; }
/* Painel: deslize suave (curva de app), largura confortável, sombra funda */
.tp-offcanvas-wrapper { transition: transform .55s cubic-bezier(.16,1,.3,1) !important; box-shadow: -30px 0 80px rgba(0,0,0,.55); max-width: 420px; width: 88vw; }
.tp-offcanvas-area.opened .tp-offcanvas-wrapper { box-shadow: -30px 0 80px rgba(0,0,0,.55); }
/* Menu mobile: tipografia grande e arejada, separadores sutis, item = linha tocável */
.tp-offcanvas-menu.d-xl-none nav > ul { margin: 8px 0 0; padding: 0; list-style: none; }
.tp-offcanvas-menu.d-xl-none nav > ul > li { border-bottom: 1px solid rgba(var(--st-veu-rgb, 255, 255, 255),.07); }
.tp-offcanvas-menu.d-xl-none nav > ul > li > a {
display: flex; align-items: center; justify-content: space-between;
padding: 17px 4px; font-size: 25px; font-weight: 600; letter-spacing: -.01em;
line-height: 1.15; color: var(--st-ink-1, #F5F2ED) !important; text-decoration: none;
transition: color .25s ease, padding-left .25s ease;
}
.tp-offcanvas-menu.d-xl-none nav > ul > li > a:hover { color: var(--gold, var(--st-c-c9a26d, #C9A26D)) !important; padding-left: 12px; }
/* Seta discreta à direita de cada item (affordance de app) */
.tp-offcanvas-menu.d-xl-none nav > ul > li > a::after {
content: ""; width: 9px; height: 9px; flex: 0 0 auto;
border-right: 2px solid rgba(var(--st-veu-rgb, 255, 255, 255),.28); border-top: 2px solid rgba(var(--st-veu-rgb, 255, 255, 255),.28);
transform: rotate(45deg); transition: border-color .25s ease, transform .25s ease;
}
.tp-offcanvas-menu.d-xl-none nav > ul > li > a:hover::after { border-color: var(--gold, #C9A26D); transform: rotate(45deg) translate(2px,-2px); }
/* Submenu (dropdown) recolhido/elegante */
.tp-offcanvas-menu.d-xl-none nav ul ul li a { font-size: 17px; font-weight: 500; padding: 11px 4px 11px 16px; color: var(--st-ink-3, #C9C4BC) !important; }
/* STAGGER: ao abrir, cada item entra de baixo com atraso incremental (cascata app) */
.tp-offcanvas-menu.d-xl-none nav > ul > li { opacity: 0; transform: translateY(14px); }
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li {
animation: arkeMenuIn .5s cubic-bezier(.16,1,.3,1) forwards;
}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(1){animation-delay:.10s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(2){animation-delay:.16s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(3){animation-delay:.22s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(4){animation-delay:.28s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(5){animation-delay:.34s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(6){animation-delay:.40s}
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li:nth-child(n+7){animation-delay:.46s}
@keyframes arkeMenuIn { to { opacity: 1; transform: translateY(0); } }
/* Botão fechar: alvo maior, gira no hover (toque de app) */
.tp-offcanvas-close-btn { transition: transform .3s ease, opacity .25s ease; opacity: .85; }
.tp-offcanvas-close-btn:hover { transform: rotate(90deg); opacity: 1; }
/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
.tp-offcanvas-menu.d-xl-none nav > ul > li { opacity: 1 !important; transform: none !important; animation: none !important; }
}
/* Grafo do hero: garante que o canvas ocupe o banner e não colapse (o placeholder
antes dava altura via ![]()
; o canvas tem altura própria, mas reforçamos). */
.st-banner-wrap { min-height: clamp(340px,44vw,640px); }
/* ⚠️ Esta regra é do banner ANTIGO (.st-banner-wrap/.st-hero-area). Como usa
seletor de ID, ela vencia a classe `.arq-hero__canvas` das páginas novas e
jogava o canvas para dentro do fluxo — virava uma FAIXA acima do texto em
vez de fundo do hero (era isso o "grafo descolado do texto" na /site/arche).
O :not() devolve o canvas novo para o position:absolute que ele declara. */
#arke-grafo-hero:not(.arq-hero__canvas) { display:block; width:100%; position:relative; z-index:1; }
/* Grafo como FUNDO DO HERO (CET): o canvas fica atrás (z-index:0); o conteúdo
do hero sobe acima dele. A faixa-banner separada (placeholder 2558X1928) sai. */
.st-hero-area { position: relative; }
.st-hero-area > .container,
.st-hero-area .st-hero-border,
.st-hero-area .st-hero-shape { position: relative; z-index: 2; }
#arke-grafo-hero { pointer-events: none; }
.st-banner-area { display: none !important; }
/* Botão "voltar ao topo" migra para a ESQUERDA; a direita fica pro WhatsApp (CET). */
.back-to-top-wrapper { right: auto !important; left: 24px !important; }
/* ═══ AJUSTES CET 2026-07-24 (2ª leva) ═══════════════════════════════════════ */
/* Logos das APIs de IA: brancos, ALTURA uniforme, caixa fixa (mesmo tamanho). */
.arke-logo-ia { display:flex; align-items:center; justify-content:center; height:44px; }
.arke-logo-ia img { height:36px !important; width:auto !important; max-width:130px; object-fit:contain;
filter:brightness(0) invert(1); opacity:.8; transition:opacity .25s ease; }
.arke-logo-ia img:hover { opacity:1; }
/* Botão "voltar ao topo": à ESQUERDA e o botão em si alinhado ali. */
.back-to-top-wrapper { right:auto !important; left:24px !important; }
.back-to-top-btn { margin-left:0 !important; margin-right:auto !important; }
/* Logo archēLAB no topo: -30% no CELULAR. */
@media (max-width: 768px) {
.tp-header-logo img, .logo-white, .logo-black { height:31px !important; }
}
/* ═══ MENU MOBILE — PRIME (estilo app: full, fonte gorda, entrada animada) ═══ */
@media (max-width: 1200px) {
/* Painel FULL — ocupa a tela inteira */
.tp-offcanvas-wrapper { width:100vw !important; max-width:100vw !important; }
/* Fundo escuro + aurora sutil de grafos (canvas injetado pela rota) atrás */
.tp-offcanvas-area, .tp-offcanvas-wrapper { background:var(--st-p-080808, #080808) !important; }
#arke-menu-grafo { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.28; pointer-events:none; }
.tp-offcanvas-top, .tp-offcanvas-main { position:relative; z-index:2; }
/* Menu: itens BEM grandes e fonte gorda, centralizados verticalmente */
.tp-offcanvas-main { display:flex; flex-direction:column; justify-content:center; min-height:70vh; }
.tp-offcanvas-menu.d-xl-none nav > ul > li > a {
font-size:34px !important; font-weight:800 !important; letter-spacing:-.02em; padding:16px 4px !important;
}
.tp-offcanvas-menu.d-xl-none nav > ul > li { border-bottom-color:rgba(var(--st-veu-rgb, 255, 255, 255),.06) !important; }
/* Entrada em cascata mais marcante */
.tp-offcanvas-menu.d-xl-none nav > ul > li { opacity:0; transform:translateY(22px); }
.tp-offcanvas-area.opened .tp-offcanvas-menu.d-xl-none nav > ul > li { animation:arkeMenuIn .55s cubic-bezier(.16,1,.3,1) forwards; }
}
/* Marrom #453030 do tema (watermark "INICIAR PROJETO", bordas) vira cinza-escuro neutro — combina com preto+dourado. */
:root { --tp-common-brown: #2b2b2b !important; }
/* ═══════════════════════════════════════════════════════════════════════════
TOPBAR QUE SAI DA FRENTE (CET) — controlada por /site/js/arke-topbar.js
Desce a página: recolhe. Sobe: volta. A regra de QUANDO está no JS; aqui só
o movimento. A animação headerSlideDown do tema é desligada porque ela
reexecutava a cada vez que a classe .header-sticky voltava, brigando com
o transform daqui (a barra "pulava" duas vezes).
═══════════════════════════════════════════════════════════════════════════ */
.ark-nav {
transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
will-change: transform;
}
.ark-nav.header-sticky { animation: none !important; -webkit-animation: none !important; }
.ark-nav--oculto { transform: translateY(-102%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.ark-nav { transition: none; }
.ark-nav--oculto { transform: none; opacity: 1; pointer-events: auto; }
}
/* ═══════════════════════════════════════════════════════════════════════════
FUNDO DE SILÍCIO — megamenu + rodapé (CET 26/07)
Pedido: "um fundo de silício brilhante com a animação sutil da cor da
archēLAB". A leitura: a superfície é a BOLACHA (wafer) — escura, com a
malha finíssima das trilhas — e a marca aparece como um brilho que
RESPIRA por baixo, nunca como um degradê chapado por cima.
Três camadas, todas atrás do conteúdo:
::before → o brilho dourado que deriva devagar (26s, ida e volta)
::after → a malha 44px + a varredura de luz que atravessa (14s)
o próprio elemento → a base quase preta
Sutil de propósito: opacidades entre .02 e .16. Se der pra "ver a
animação", ela está forte demais — o certo é sentir que a superfície
está viva sem conseguir apontar o movimento.
═══════════════════════════════════════════════════════════════════════ */
.ark-mega,
.st-footer-area {
position: relative;
isolation: isolate;
background-color: var(--st-p-0a0a0b, #0A0A0B);
}
/* O conteúdo sobe pra frente das camadas. Nos filhos diretos, porque no
megamenu o elemento é um grid e as colunas são os filhos. */
.ark-mega > *,
.st-footer-area > * { position: relative; z-index: 2; }
/* ── camada 1 · o brilho da marca respirando ─────────────────────────────── */
.ark-mega::before,
.st-footer-area::before {
content: ''; position: absolute; z-index: 0; pointer-events: none;
background:
radial-gradient(38% 55% at 18% 22%, rgba(196,151,58,.16), transparent 62%),
radial-gradient(34% 48% at 82% 78%, rgba(212,169,74,.11), transparent 66%),
radial-gradient(52% 62% at 50% 0%, rgba(126,146,178,.06), transparent 72%);
will-change: transform;
animation: arkSilicioDeriva 26s ease-in-out infinite alternate;
}
/* ── camada 2 · trilhas do silício + varredura de luz ────────────────────── */
.ark-mega::after,
.st-footer-area::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background-image:
linear-gradient(rgba(var(--st-ink-rgb, 245, 242, 237),.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--st-ink-rgb, 245, 242, 237),.028) 1px, transparent 1px),
linear-gradient(105deg, transparent 38%, rgba(196,151,58,.10) 47%,
rgba(var(--st-ink-rgb, 245, 242, 237),.05) 50%, rgba(196,151,58,.10) 53%, transparent 62%);
background-size: 44px 44px, 44px 44px, 260% 100%;
background-repeat: repeat, repeat, no-repeat;
/* a malha some nas bordas: grade que encosta na borda vira "tabela" */
-webkit-mask-image: radial-gradient(120% 100% at 50% 0%, var(--st-bg-0, #000) 42%, transparent 92%);
mask-image: radial-gradient(120% 100% at 50% 0%, var(--st-bg-0, #000) 42%, transparent 92%);
animation: arkSilicioVarredura 14s linear infinite;
}
/* No MEGAMENU o brilho pode transbordar (o painel já recorta com overflow);
no RODAPÉ não usamos overflow:hidden pra não decepar o ícone decorativo do
topo — por isso lá o brilho nasce contido em inset:0. */
.ark-mega { overflow: hidden; }
.ark-mega::before { inset: -40%; filter: blur(14px); }
.st-footer-area::before { inset: 0; filter: blur(22px); }
@keyframes arkSilicioDeriva {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}
@keyframes arkSilicioVarredura {
0% { background-position: 0 0, 0 0, -60% 0; }
100% { background-position: 0 0, 0 0, 160% 0; }
}
@media (prefers-reduced-motion: reduce) {
.ark-mega::before, .ark-mega::after,
.st-footer-area::before, .st-footer-area::after { animation: none; }
}
/* ── Rodapé: legibilidade sobre a nova superfície ────────────────────────── */
.st-footer-area .st-footer-widget-title {
font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
color: rgba(var(--st-ink-rgb, 245, 242, 237),.55); margin-bottom: 18px;
}
.st-footer-area .st-footer-widget-menu ul { margin: 0; padding: 0; list-style: none; }
.st-footer-area .st-footer-widget-menu li + li { margin-top: 9px; }
.st-footer-area .st-footer-widget-menu a { color: rgba(var(--st-ink-rgb, 245, 242, 237),.78); transition: color .22s ease; }
.st-footer-area .st-footer-widget-menu a:hover { color: var(--gold, var(--st-c-c4973a, #C4973A)); }
/* Bandeirinha: pequena e discreta — é um selo de origem, não um botão. */
.ark-foot-local {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; color: rgba(var(--st-ink-rgb, 245, 242, 237),.52);
}
.ark-foot-flag { font-size: 13px; line-height: 1; filter: saturate(.9); }
/* ═══════════════════════════════════════════════════════════════════════════
BLOG — a lateral do autor e os comentários (28/07)
───────────────────────────────────────────────────────────────────────────
O molde do tema trazia lateral e comentários com gente inventada. Estes
blocos são os de verdade: o autor é o CET, as categorias vêm do banco com
contagem, e os comentários são os aprovados em `cms_comentarios`.
Vive aqui (e não num arquivo novo) porque o casco do post só carrega
main.css + theme-override.css.
═══════════════════════════════════════════════════════════════════════════ */
.ark-side { position: sticky; top: 110px; display: grid; gap: 20px; }
@media (max-width: 991px) { .ark-side { position: static; margin-top: 48px; } }
.ark-side__bloco {
background: var(--st-bg-2, #101010);
border: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237),.10);
border-radius: 6px;
padding: 26px 24px;
}
.ark-side__autor { text-align: center; }
/* O card do autor é a ÚNICA porta para /site/eduardo (28/07). Por isso ele
precisa PARECER clicável: a foto acende no hover e há uma chamada explícita
embaixo do papel. Bloco bonito e mudo não é acesso, é decoração. */
.ark-side__autor-link { display: block; }
.ark-side__autor-link .ark-side__foto {
transition: border-color .25s ease, transform .25s ease;
}
.ark-side__autor-link:hover .ark-side__foto {
border-color: var(--gold, #C4973A);
transform: translateY(-2px);
}
.ark-side__autor-link:hover .ark-side__nome { color: var(--gold, var(--st-c-c4973a, #C4973A)); }
.ark-side__autor-cta {
display: inline-block;
margin-top: 12px;
font-family: var(--font-mono, monospace);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold, var(--st-c-c4973a, #C4973A));
border-bottom: 1px solid rgba(196, 151, 58, .35);
padding-bottom: 3px;
transition: border-color .25s ease;
}
.ark-side__autor-cta::after { content: " →"; }
.ark-side__autor-link:hover .ark-side__autor-cta { border-color: var(--gold, #C4973A); }
.ark-side__foto {
width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
border: 1px solid rgba(196,151,58,.42);
margin: 0 auto 14px; display: block;
}
.ark-side__nome {
margin: 0; font-size: 18px; font-weight: 650; color: var(--st-ink-1, #F5F2ED); line-height: 1.2;
}
.ark-side__papel {
display: block; margin-top: 5px;
font-family: var(--font-mono, monospace); font-size: 10px;
letter-spacing: .16em; text-transform: uppercase; color: var(--st-ink-6, #6B6560);
}
.ark-side__redes { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.ark-side__redes a {
width: 34px; height: 34px; display: grid; place-items: center;
border-radius: 50%; color: var(--st-ink-4b, #9A9590);
border: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237),.14);
transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.ark-side__redes a:hover {
color: #0A0A0A; background: var(--gold, #C4973A); border-color: var(--gold, #C4973A);
}
.ark-side__t {
margin: 0 0 14px; font-family: var(--font-mono, monospace);
font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--st-ink-6, #6B6560);
}
/* posts recentes: miniatura + título, sem card — a lateral já é o card */
.ark-side__recs { margin: 0; padding: 0; list-style: none; }
.ark-side__recs li + li {
margin-top: 14px; padding-top: 14px;
border-top: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237),.07);
}
.ark-side__rec a { display: flex; align-items: center; gap: 13px; }
.ark-side__rec img {
width: 62px; height: 62px; flex: 0 0 62px;
object-fit: cover; border-radius: 4px;
filter: grayscale(1) contrast(1.05); opacity: .78;
transition: filter .3s ease, opacity .3s ease;
}
.ark-side__rec a:hover img { filter: grayscale(0); opacity: 1; }
.ark-side__rec-txt { display: block; min-width: 0; }
.ark-side__rec-txt b {
/* título cortado em 3 linhas: o bloco fica previsível mesmo com título longo */
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
font-size: 13.5px; font-weight: 550; line-height: 1.4;
color: var(--st-ink-3, #C9C4BC); transition: color .25s ease;
}
.ark-side__rec a:hover .ark-side__rec-txt b { color: var(--gold, var(--st-c-c4973a, #C4973A)); }
.ark-side__rec-txt i {
display: block; margin-top: 5px; font-style: normal;
font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--st-ink-6, #6B6560);
}
.ark-side__cats { margin: 0; padding: 0; list-style: none; }
.ark-side__cats li + li { margin-top: 2px; }
.ark-side__cats a {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 11px; border-radius: 4px;
font-size: 13.5px; color: var(--st-ink-3, #C9C4BC);
transition: background .25s ease, color .25s ease;
}
.ark-side__cats a:hover { background: rgba(196,151,58,.10); color: var(--gold, var(--st-c-c4973a, #C4973A)); }
.ark-side__cats i {
font-style: normal; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--st-ink-6, #6B6560);
}
.ark-side__cats .is-atual a { background: rgba(196,151,58,.12); color: var(--gold, var(--st-c-c4973a, #C4973A)); }
/* ── comentários ─────────────────────────────────────────────────────────── */
.ark-com { margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237),.10); }
.ark-com__titulo { font-size: 24px; font-weight: 650; color: var(--st-ink-1, #F5F2ED); margin: 0 0 24px; }
.ark-com__titulo i {
font-style: normal; font-size: 14px; color: var(--st-ink-6, #6B6560);
font-family: var(--font-mono, monospace); vertical-align: middle; margin-left: 4px;
}
.ark-com__vazio { color: var(--st-ink-6, #6B6560); font-size: 14px; margin: 0 0 30px; }
.ark-com__lista { margin: 0 0 34px; padding: 0; list-style: none; display: grid; gap: 16px; }
.ark-com__item {
background: var(--st-bg-2, #101010); border: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237),.08);
border-radius: 6px; padding: 18px 20px;
}
.ark-com__cab { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ark-com__cab b { color: var(--st-ink-1, #F5F2ED); font-size: 14.5px; font-weight: 650; }
.ark-com__cab span {
font-family: var(--font-mono, monospace); font-size: 10.5px;
letter-spacing: .08em; color: var(--st-ink-6, #6B6560);
}
.ark-com__txt { margin: 0; color: var(--st-ink-3, #C9C4BC); font-size: 14px; line-height: 1.68; }
.ark-com__form {
background: var(--st-bg-2, #101010); border: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237),.10);
border-radius: 6px; padding: 26px 24px;
}
.ark-com__t { margin: 0 0 16px; font-size: 16px; font-weight: 650; color: var(--st-ink-1, #F5F2ED); }
.ark-com__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 575px) { .ark-com__linha { grid-template-columns: 1fr; } }
.ark-com__form input, .ark-com__form textarea {
width: 100%; padding: 12px 14px; border-radius: 4px;
background: var(--st-bg-1b, #0A0A0A); border: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237),.12);
color: var(--st-ink-1, #F5F2ED); font-size: 14px; font-family: inherit;
transition: border-color .25s ease;
}
.ark-com__form input:focus, .ark-com__form textarea:focus {
outline: none; border-color: rgba(196,151,58,.55);
}
.ark-com__form textarea { resize: vertical; min-height: 110px; }
/* honeypot: existe para o robô preencher, não para gente ver */
.ark-com__hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }
.ark-com__pe { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.ark-com__btn {
padding: 11px 24px; border-radius: 100px; border: 0;
background: var(--gold, #C4973A); color: #0A0A0A;
font-size: 13px; font-weight: 650; cursor: pointer;
transition: opacity .25s ease;
}
.ark-com__btn:hover { opacity: .85; }
.ark-com__btn[disabled] { opacity: .5; cursor: default; }
.ark-com__aviso { font-size: 13px; color: var(--st-ink-4b, #9A9590); }
.ark-com__aviso.is-erro { color: var(--st-c-e08a7a, #E08A7A); }
.ark-com__aviso.is-ok { color: var(--st-c-7bc49a, #7BC49A); }
/* ── LINHA JURÍDICA DO RODAPÉ ─────────────────────────────────────────────
* Política de Privacidade e Termos de Uso, no rodapé de TODAS as páginas.
* Mora aqui, e não numa folha de página, porque esta é a única folha
* carregada pelos 41 cascos — inclusive /site/cases, que não carrega a
* arke-nav.css. Documento legal que só aparece em parte do site não serve.
* Discreto de propósito: é referência permanente, não chamada. */
.ark-foot-legal {
margin: 8px 0 0 !important;
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
font-size: 12.5px; line-height: 1.6;
}
.ark-foot-legal a {
color: currentColor; opacity: .72; text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 1px; transition: opacity .25s ease, color .25s ease;
}
.ark-foot-legal a:hover { opacity: 1; color: var(--accent, var(--st-c-c4973a, #C4973A)); }
.ark-foot-legal span { opacity: .38; }
/* nos rodapés centralizados do tema (des-footer, tp-copyright) a linha
acompanha o alinhamento do bloco em vez de fugir para a esquerda */
.text-center .ark-foot-legal,
.des-footer-bottom .ark-foot-legal { justify-content: center; }
/* ── BANNER DE CONSENTIMENTO ──────────────────────────────────────────────
* Mora aqui pelo mesmo motivo da linha jurídica: é a única folha carregada
* pelos 41 cascos. Sóbrio de propósito — o banner não é a mensagem do site,
* é uma pergunta. E os dois botões têm o MESMO peso: recusar escondido é
* padrão escuro, e num site que defende arquitetura honesta seria pior que
* feio. */
.ark-consent {
position: fixed; inset-inline: 0; bottom: 0; z-index: 9999;
padding: 14px clamp(16px, 4vw, 40px) calc(14px + env(safe-area-inset-bottom));
background: rgba(var(--st-r-10-10-12, 10, 10, 12), .96);
border-top: 1px solid rgba(196, 151, 58, .34);
backdrop-filter: blur(8px);
animation: arkConsentSobe .34s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes arkConsentSobe { from { transform: translateY(100%); } to { transform: none; } }
.ark-consent__caixa {
width: min(1320px, 100%); margin-inline: auto;
display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
}
.ark-consent__txt {
flex: 1 1 380px; margin: 0;
font-size: 13.5px; line-height: 1.6; color: var(--st-t-a8a39c, #A8A39C);
}
.ark-consent__txt strong { color: var(--st-ink-2, #E6E2DA); font-weight: 600; }
.ark-consent__txt a {
color: var(--accent, var(--st-c-c4973a, #C4973A)); text-decoration: underline; text-underline-offset: 3px;
}
.ark-consent__acoes { display: flex; gap: 10px; flex: 0 0 auto; }
.ark-consent__btn {
padding: 11px 22px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237), .22);
background: transparent; color: var(--st-ink-2, #E6E2DA);
font-family: var(--font-mono, monospace); font-size: 11px;
letter-spacing: .12em; text-transform: uppercase;
transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.ark-consent__btn:hover { border-color: rgba(196, 151, 58, .6); color: var(--accent, var(--st-c-c4973a, #C4973A)); }
.ark-consent__btn:focus-visible { outline: 2px solid var(--accent, #C4973A); outline-offset: 2px; }
.ark-consent__btn--sim {
background: var(--accent, #C4973A); border-color: var(--accent, #C4973A);
color: #0A0A0A; font-weight: 700;
}
.ark-consent__btn--sim:hover { background: #D4A94A; border-color: #D4A94A; color: #0A0A0A; }
@media (max-width: 575px) {
.ark-consent__caixa { flex-direction: column; align-items: stretch; }
.ark-consent__acoes { justify-content: stretch; }
.ark-consent__btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .ark-consent { animation: none; } }
/* ── TELEFONE COM BANDEIRA ────────────────────────────────────────────────
* O seletor de país e o campo viram UMA peça. Mora aqui porque é a única
* folha carregada pelos 41 cascos, e o campo aparece em 8 formulários com
* prefixos de CSS diferentes (cns-, aut-, mkt-, idm-, prs-, seo-, srv-, ctt-):
* repetir a regra em 8 folhas seria 8 lugares pra divergir. */
.ark-tel { display: flex; gap: 8px; align-items: stretch; }
.ark-tel__ddi {
flex: 0 0 auto; width: auto; min-width: 92px;
padding: 11px 8px; cursor: pointer;
background: var(--st-bg-1, #08080A); color: var(--st-ink-1b, #F2EFE9);
border: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237),.14); border-radius: 4px;
font-family: inherit; font-size: 14px; letter-spacing: normal; text-transform: none;
}
.ark-tel__num { flex: 1 1 auto; min-width: 0; }
.ark-tel__ddi:focus { outline: none; border-color: rgba(var(--accent-rgb, 196,151,58), .6); }
@media (max-width: 420px) {
.ark-tel { flex-wrap: wrap; }
.ark-tel__ddi, .ark-tel__num { flex: 1 1 100%; }
}