/* ========================================================================== EVAST 1.5.0 — MARCA & HEADER MOBILE (Squad D · Header & Identidade) Carrega DEPOIS de ievera-theme.css (por isso alguns !important: existem regras 1.2.0 com !important na altura/largura da logo que precisam ceder). -------------------------------------------------------------------------- 01 tokens da marca · 02 slot da logo no header · 03 wordmark textual 04 header 320–768 (não quebra linha, alvo ≥44px, logo larga) · 05 rodapé 06 GTranslate (widget flutuante do plugin — só posição/tamanho) ZONA PROIBIDA (regra da casa): não existe aqui um seletor sequer para #av_top, av_content_*, .ai-*, .code-block, google_ads_iframe, .cb-leader-wrap ou iframe. Nada nesta folha toca geometria de anúncio. Não adicionar. ========================================================================== */ /* ========================================================================== 01 · TOKENS DA MARCA A logo nova é LARGA (552×120 = 4,6:1). Quem manda no tamanho é a LARGURA (max-width), não a altura — com max-height só, uma logo 4,6:1 estoura 184px e empurra o seletor de país para a segunda linha no celular. ========================================================================== */ :root{ --ev-logo-h:36px; /* teto de altura da marca no header */ --ev-logo-w:180px; /* teto de largura (a 4,6:1 → ~39px de altura) */ --ev-mark-size:34px; /* disco lima do wordmark */ --ev-mark-fs:17px; --ev-wordmark-fs:20px; --ev-suffix-fs:12px; } @media (min-width:768px){ :root{ --ev-logo-h:40px; --ev-logo-w:240px; --ev-mark-size:36px; --ev-mark-fs:18px; --ev-wordmark-fs:21px; --ev-suffix-fs:12.5px; } } @media (min-width:1024px){ :root{ --ev-logo-h:44px; --ev-logo-w:260px; --ev-wordmark-fs:22px; } } /* 320–360: o header é um orçamento de pixels. Logo menor, e só. */ @media (max-width:360px){ :root{ --ev-logo-h:32px; --ev-logo-w:132px; --ev-mark-size:30px; --ev-mark-fs:15px; --ev-wordmark-fs:18px; --ev-suffix-fs:11px; } } /* ========================================================================== 02 · SLOT DA LOGO NO HEADER O markup vem de inc/evast-brand.php (filtro generate_logo_output), mantendo as classes .site-logo / .header-image.is-logo-image para não quebrar nada que o GeneratePress (ou nós) já estilizava. ========================================================================== */ .site-header .site-logo, .site-header .site-logo.evast-brand{ display:inline-flex !important; align-items:center; order:-2; /* a marca é sempre o primeiro item do header */ min-width:0; /* deixa o flex encolher a logo larga em vez de quebrar linha */ flex:0 1 auto; } .site-header .site-logo > a, .site-header .evast-brand__link{ display:inline-flex;align-items:center; min-width:0;max-width:100%; text-decoration:none !important; } .site-header .site-logo picture{display:block;min-width:0;max-width:100%;} /* Modo genérico (marca sem dimensões conhecidas — ex.: EVAST_BRAND_LOGO_URL de um CDN): limita pelos dois eixos e deixa o browser resolver. */ .site-header .site-logo img, .site-header .site-logo img.is-logo-image, .site-header .evast-brand-logo{ display:block !important; width:auto !important; height:auto !important; max-height:var(--ev-logo-h) !important; max-width:min(100%,var(--ev-logo-w)) !important; object-fit:contain; object-position:left center; } /* Modo COM PROPORÇÃO (o normal: attachment do WP, `--evast-logo-ar` vem do PHP). A largura vira um comprimento DEFINIDO — o que sobra é altura × proporção, limitado pelo teto de largura. Com isso a caixa existe ANTES de a imagem baixar: zero CLS no header, que é justamente onde o LCP mora. Sem isto, medimos caixa de 0px no 1º paint. */ .site-header .site-logo img.evast-brand-logo--sized, /* especificidade acima da regra genérica acima */ .site-header .evast-brand-logo--sized, .iv-footer .iv-brand .iv-logo .evast-brand-logo--sized, .evast-brand-logo--sized{ width:min(var(--ev-logo-w),calc(var(--ev-logo-h) * var(--evast-logo-ar))) !important; height:auto !important; max-width:100% !important; max-height:none !important; aspect-ratio:var(--evast-logo-ar); } /* Com imagem no header, o título textual não aparece (o PHP já devolve ''; isto é o cinto). */ .site-header .site-logo + .site-branding .main-title, .site-header .site-branding-container:has(.site-logo img) .main-title{display:none !important;} /* ========================================================================== 03 · WORDMARK TEXTUAL (fallback sem imagem) Disco lima com "i" + "I" DESENHADO (barras em cima e embaixo) + "SEO". O "I" é SVG de propósito: em fonte geométrica o "I" maiúsculo é o mesmo traço do "l" minúsculo — foi assim que "Ieveera" virou "lévera". Desenhado, não tem jeito. ========================================================================== */ .evast-wordmark{ display:inline-flex;align-items:center;gap:10px; min-height:44px; /* alvo de toque */ text-decoration:none !important; color:var(--ev-brand) !important; -webkit-tap-highlight-color:transparent; } .main-title.evast-brand{font-size:0;line-height:1;margin:0;} .site-branding.evast-brand--forced{order:-2;margin-right:auto;} /* wordmark de emergência (título oculto) */ .main-title.evast-brand a::before{content:none !important;} /* mata o disco ::before da v1.2 */ .evast-wordmark__mark{ display:inline-grid;place-items:center;flex:none; width:var(--ev-mark-size);height:var(--ev-mark-size); border-radius:50%; background:var(--ev-lime); color:var(--ev-green-900); font:800 var(--ev-mark-fs)/1 var(--ev-font-display); text-transform:lowercase; letter-spacing:0; } .evast-wordmark__lockup{display:inline-flex;align-items:baseline;gap:6px;min-width:0;} .evast-wordmark__body{ display:inline-flex;align-items:baseline; font:800 var(--ev-wordmark-fs)/1 var(--ev-font-display); letter-spacing:-.02em; color:currentColor; white-space:nowrap; } .evast-wordmark__glyph{ width:.54em;height:.72em; /* 12:16 do viewBox, na altura de caixa alta */ flex:none;display:inline-block; margin-right:.05em; } .evast-wordmark__rest{white-space:nowrap;} .evast-wordmark__suffix{ font:800 var(--ev-suffix-fs)/1 var(--ev-font-body); letter-spacing:.14em; color:var(--ev-accent-text); /* 4,6:1 sobre branco — AA */ white-space:nowrap; text-transform:uppercase; } .evast-wordmark:hover{color:var(--ev-green-700) !important;} .evast-wordmark:hover .evast-wordmark__suffix{color:var(--ev-green-700);} .evast-wordmark:focus-visible{outline:3px solid var(--ev-focus);outline-offset:3px;border-radius:var(--ev-r-chip);} /* ========================================================================== 04 · HEADER 320–768 Medido no ar em 320px ANTES desta versão: .inside-header calculava flex-wrap:wrap, a marca (154px) + o bloco bandeira/hambúrguer (115px) + gap estouravam 280px por 1px e o wrapper caía para a segunda linha — header de 114px em vez de 64px. Três travas abaixo: nowrap, o