/* Theme Name: Verduca Template: adnext-base Description: Estilos propios de Verduca: paleta, tipografía y bloques del sitio. Version: 1.2.0 */ /* LOGO DO HEADER: SVG inline no parts/header.html, não wp:site-logo — a marca aparece desde a primeira subida, sem depender de attachment no banco. Símbolo: tile verde com a escada recortada em branco e o degrau mais alto em âmbar; cores fixas no próprio SVG, versão clara no header e escura no rodapé. Wordmark em minúsculas via text-transform (o texto real segue "Verduca"). */ .site-header .vd-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--wp--preset--color--primary)} .site-header .vd-logo svg{display:block;flex:none} .site-header .vd-logo span{font-weight:800;font-size:1.22rem;letter-spacing:-.022em;text-transform:lowercase;color:var(--wp--preset--color--text)} .site-header .vd-logo:hover span{color:var(--wp--preset--color--primary)} /* LOGO DO RODAPÉ: também SVG inline, em versão escura própria (tile branco). Evita a armadilha conhecida do base, que pinta a logo do rodapé com brightness(0) invert(1) e apaga área colorida — aqui não há imagem para filtrar. */ .site-footer .vd-logo-rodape{display:inline-flex;align-items:center;gap:8px;text-decoration:none;margin-bottom:6px} .site-footer .vd-logo-rodape span{font-weight:800;font-size:1.1rem;letter-spacing:-.02em;text-transform:lowercase;color:#fff} /* ================================================================== IDENTIDADE VISUAL Verde profundo #14624A + âmbar #F2A413 + tinta #11201B; Figtree (variável, títulos 800) declarada no theme.json. Assinatura: DEGRAUS — hero com escada em blocos, trilha de 4 degraus escalonados, categorias em cartão com barra de progresso e filete serrilhado no lugar do traço reto embaixo dos títulos. ⚠ ESTE ARQUIVO É SERVIDO PUBLICAMENTE (/wp-content/themes/{este-child}/style.css — qualquer um baixa). Nada de histórico do projeto, nome de domínio, comparação com outros projetos ou "quem pediu" AQUI. Esse tipo de nota vive no functions.php, que é executado e nunca chega ao navegador. Medidas marcadas com "ES:" dependem do comprimento do texto (a mesma frase em espanhol corre ~15-25% mais longa que em português). Só sobrescreve o que precisa divergir — header, cards, FAQ, busca e formulários continuam vindo do tema-pai. ================================================================== */ /* TILE DA ESCADA — a assinatura gráfica, um único data-URI reaproveitado em 4 lugares (marca de título, sublinhado do H1, topo da banda de populares e topo do rodapé). Substitui o traço reto do base. */ :root{ --vd-degraus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V7.5h18V5h18V2.5h18V0h18v10z' fill='%23F2A413'/%3E%3C/svg%3E"); } body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* -- HEADER: mantém o pill flutuante do base (regra da casa). Só o CTA do menu vira âmbar, para o verde não virar bloco único. -- */ .site-header .menu-cta a{border-color:var(--wp--preset--color--accent);background:var(--wp--preset--color--accent);color:var(--wp--preset--color--text)} .site-header .menu-cta a:hover{background:#d9900d;border-color:#d9900d;color:var(--wp--preset--color--text)} /* ES: rótulo de menu em espanhol é mais longo que o equivalente PT — deixa o item respirar sem quebrar no meio da palavra. */ .site-header .wp-block-navigation a{white-space:nowrap} /* -- HERO CLARO com a escada de fundo (silhueta verde muito discreta) -- */ .vd-hero{background-color:var(--wp--preset--color--bg-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 460' preserveAspectRatio='none'%3E%3Cpath d='M0 460V385h233V310h233V235h234V160h233V85h233V10h234V460z' fill='%2314624A' fill-opacity='.055'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center bottom;background-size:100% 62%;border-bottom:1px solid var(--wp--preset--color--line)} .vd-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center} /* ES: kicker "Cursos gratuitos y certificados" estoura a linha em telas médias — line-height e max-width deixam a pill quebrar em 2 linhas sem deformar. */ .vd-kicker{margin:0 0 14px;display:inline-flex;align-items:center;gap:10px;max-width:100%;font-size:.74rem;font-weight:800;letter-spacing:.11em;line-height:1.35;text-transform:uppercase;color:var(--wp--preset--color--primary);background:var(--wp--preset--color--primary-soft);border-radius:99px;padding:7px 15px} .vd-kicker::before{content:"";flex:none;width:24px;height:8px;background:var(--vd-degraus) 0 0/100% 100% no-repeat} /* ES: 19ch no lugar de 17ch — o H1 em espanhol tem mais caracteres e com 17ch sobrava um órfão na 3ª linha. */ .vd-hero-copy h1{margin:0 0 16px;max-width:19ch;color:var(--wp--preset--color--text);font-size:clamp(2rem,1.3rem + 2.4vw,2.9rem);line-height:1.13} /* o realce do H1 recebe a ESCADA no lugar do traço reto */ .vd-hero-copy h1 em{font-style:normal;color:var(--wp--preset--color--primary);position:relative;white-space:nowrap} .vd-hero-copy h1 em::after{content:"";position:absolute;left:0;right:-4px;bottom:-9px;height:9px;background:var(--vd-degraus) 0 0/100% 100% no-repeat} /* ES: 54ch (PT usa 52ch) — mantém as 3 linhas do lead com o texto mais longo. */ .vd-lead{margin:0 0 20px;max-width:54ch;color:var(--wp--preset--color--muted);font-size:1.06rem;line-height:1.65} /* ES: gap horizontal menor (18px, PT 22px) — os 3 selos em espanhol são mais largos e com 22px caíam para 2 linhas em 1024px. */ .vd-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px} .vd-trust li{position:relative;padding-left:20px;font-size:.83rem;font-weight:700;color:var(--wp--preset--color--primary)} /* marcador em degrauzinho (não é bolinha nem check) */ .vd-trust li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:7px;background:var(--vd-degraus) 0 0/100% 100% no-repeat} .vd-hero-art{display:block} .vd-hero-art svg{width:100%;height:auto;display:block} /* -- TRILHA DE MÓDULOS EM DEGRAUS: a assinatura, dentro do hero. 4 blocos de altura igual, cada um 16px acima do anterior, ligados por um montante (riser) no vão. O padding-top compensa exatamente a subida do 4º bloco — nenhum degrau invade a seção de cima. -- */ .vd-degraus{list-style:none;margin:36px 0 0;padding:48px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .vd-degrau{position:relative;background:#fff;border:1px solid var(--wp--preset--color--line);border-radius:14px;padding:16px 18px 15px;box-shadow:0 14px 30px -26px rgba(11,50,39,.55)} /* ES: .92rem (PT .95rem) + balance — "Descarga el certificado" é o rótulo mais longo dos quatro e precisa caber em 2 linhas equilibradas. */ .vd-degrau strong{display:block;font-size:.92rem;font-weight:800;line-height:1.3;text-wrap:balance;color:var(--wp--preset--color--text)} .vd-degrau small{display:block;margin-top:4px;font-size:.82rem;line-height:1.5;color:var(--wp--preset--color--muted)} /* piso do degrau: filete âmbar no alto de cada bloco */ .vd-degrau::before{content:"";position:absolute;left:18px;top:-1px;width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--wp--preset--color--accent)} .vd-degrau:nth-child(2){transform:translateY(-16px)} .vd-degrau:nth-child(3){transform:translateY(-32px)} .vd-degrau:nth-child(4){transform:translateY(-48px)} /* montante: liga a base do degrau à base do degrau anterior */ .vd-degrau:not(:first-child)::after{content:"";position:absolute;left:-9px;bottom:-16px;width:2px;height:16px;background:var(--wp--preset--color--line)} /* -- CATEGORIAS: cartão com BARRA DE PROGRESSO no topo, escalonados. As larguras 28/52/76/100% desenham a mesma progressão dos degraus; no hover a barra completa. Sem ícone, sem número, sem chip. -- */ .vd-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:36px} .vd-cat{display:block;background:#fff;border:1px solid var(--wp--preset--color--line);border-radius:14px;padding:16px 18px 18px;text-decoration:none;transition:border-color .16s ease,box-shadow .16s ease} .vd-cat:hover{border-color:var(--wp--preset--color--primary);box-shadow:0 20px 44px -30px rgba(11,50,39,.65)} .vd-cat-bar{display:block;height:5px;border-radius:99px;background:var(--wp--preset--color--line);overflow:hidden;margin-bottom:16px} .vd-cat-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--wp--preset--color--primary),var(--wp--preset--color--accent));transition:width .3s ease} .vd-cat:nth-child(1) .vd-cat-bar i{width:28%} .vd-cat:nth-child(2) .vd-cat-bar i{width:52%} .vd-cat:nth-child(3) .vd-cat-bar i{width:76%} .vd-cat:nth-child(4) .vd-cat-bar i{width:100%} .vd-cat:hover .vd-cat-bar i{width:100%} /* ES: balance — "Inscripción y plataformas" e "Áreas y salida laboral" quebram em 2 linhas; sem isso sobra uma palavra sozinha embaixo. */ .vd-cat strong{display:block;font-size:1rem;font-weight:800;line-height:1.3;text-wrap:balance;color:var(--wp--preset--color--text)} .vd-cat small{display:block;margin-top:5px;font-size:.82rem;line-height:1.5;color:var(--wp--preset--color--muted)} /* mesmo escalonamento do hero, em passo menor (12px) — a marca se repete sem gritar */ .vd-cat:nth-child(2){transform:translateY(-12px)} .vd-cat:nth-child(3){transform:translateY(-24px)} .vd-cat:nth-child(4){transform:translateY(-36px)} /* -- POPULARES: banda verde de sangria total com a ESCADA âmbar no topo. Faixa cheia, borda a borda — não é o pill arredondado do base. -- */ .vd-pop{position:relative;background:linear-gradient(155deg,var(--wp--preset--color--accent-dark),var(--wp--preset--color--primary))} .vd-pop::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--vd-degraus) 0 0/72px 6px repeat-x} .vd-pop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-bottom:28px} .vd-pop-head h2{color:#fff;margin:0;font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem)} /* ES: 60ch (PT 56ch) — a linha de apoio em espanhol é mais longa. */ .vd-pop-head p{margin:8px 0 0;color:#b7cec3;font-size:.92rem;line-height:1.6;max-width:60ch} /* ES: nowrap — "Ver todas las guías" é mais largo que o rótulo PT e quebrava dentro do botão em ~1000px, virando um botão de 2 linhas. */ .vd-pop-more{flex:none;white-space:nowrap;color:var(--wp--preset--color--accent);border:1.5px solid rgba(242,164,19,.45);border-radius:11px;padding:10px 22px;font-weight:700;font-size:.88rem;text-decoration:none;transition:.15s} .vd-pop-more:hover{background:var(--wp--preset--color--accent);border-color:var(--wp--preset--color--accent);color:var(--wp--preset--color--accent-dark)} .vd-pop .grid-cards .wp-block-post{border-color:transparent;border-radius:14px;box-shadow:0 22px 44px -30px rgba(0,0,0,.75)} .vd-pop .wp-block-query-no-results p{color:#b7cec3;margin:0} /* -- SEÇÕES DO BASE (últimas noticias): título à esquerda com a ESCADA no lugar do traço reto. -- */ main > .wp-block-group.section-center > .wp-block-heading{text-align:left!important;margin-bottom:22px} main > .wp-block-group.section-center > .wp-block-heading::after{content:"";display:block;width:76px;height:10px;margin-top:12px;background:var(--vd-degraus) 0 0/100% 100% no-repeat} .news-list .wp-block-post{border-radius:12px;transition:background .15s ease} .news-list .wp-block-post:hover{background:var(--wp--preset--color--bg-soft)} /* -- FAQ: reaproveita o
do base; troca o azul por verde/âmbar e marca o item aberto com um degrau âmbar na lateral. -- */ .vd-faq .wp-block-details{border-radius:14px;border-left:3px solid var(--wp--preset--color--line)} .vd-faq .wp-block-details[open]{border-color:var(--wp--preset--color--line);border-left-color:var(--wp--preset--color--accent);box-shadow:0 16px 36px -26px rgba(11,50,39,.6)} .vd-faq .wp-block-details summary::after{color:var(--wp--preset--color--accent)} /* ES: as perguntas em espanhol são longas e o summary é flex com o sinal à direita; sem isso o "+" era empurrado para fora em telas estreitas. */ .vd-faq .wp-block-details summary{line-height:1.4} /* -- CARDS E CAIXAS GLOBAIS -- */ .grid-cards .wp-block-post{border-radius:14px} .author-hero,.autor-box-utua,.author-box{border-radius:16px} /* capa-fantasma do card: o base traz carro em gradiente azul (nicho veículos) */ .card-thumb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' fill-opacity='0.5'%3E%3Cpath d='M3.2 5.6c2.6-1.15 5.2-1.15 7.8 0v12.9c-2.6-1.15-5.2-1.15-7.8 0V5.6zm9.8 0c2.6-1.15 5.2-1.15 7.8 0v12.9c-2.6-1.15-5.2-1.15-7.8 0V5.6z'/%3E%3C/svg%3E"),linear-gradient(135deg,#14624A,#2E8A6B)} /* -- RODAPÉ: tinta verde com a ESCADA âmbar no topo. -- */ .site-footer{background:var(--wp--preset--color--accent-dark);color:#c9d9d2;position:relative} .site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--vd-degraus) 0 0/72px 6px repeat-x} .site-footer a{color:#e6efea} .site-footer .footer-strip{background:rgba(255,255,255,.05);color:#a8c0b6} .site-footer .footer-brand small{color:#a8c0b6} .site-footer .footer-divider{border-top-color:rgba(255,255,255,.16)} /* logo do rodapé: o base pinta com brightness(0) invert(1) e ela sai branca chapada. Se a arte tiver área colorida que não pode sumir, criar o asset dark (assets/img/logo-footer.webp), pôr a img em opacity:0 e desenhar o background no wrapper, com ?v= para furar o cache da borda. */ /* -- FUNIL: este blog não roda funil hoje (ver functions.php). Se rodar, o compactador de header do base já pega o wp:site-logo padrão. -- */ /* ==================== RESPONSIVO ==================== */ @media (max-width:900px){ .vd-hero-grid{grid-template-columns:1fr;gap:28px} .vd-hero-copy h1{max-width:none} .vd-hero-art{max-width:440px} /* degraus viram grade plana: escada empilhada não lê como escada */ .vd-degraus{grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;padding-top:0} .vd-degrau:nth-child(2),.vd-degrau:nth-child(3),.vd-degrau:nth-child(4){transform:none} .vd-degrau:not(:first-child)::after{display:none} .vd-cats{grid-template-columns:1fr 1fr;gap:12px;padding-top:8px} .vd-cat:nth-child(2),.vd-cat:nth-child(3),.vd-cat:nth-child(4){transform:none} .vd-pop-head{margin-bottom:22px} } @media (max-width:560px){ .vd-degraus,.vd-cats{grid-template-columns:1fr} .vd-lead{font-size:1.08rem} /* ES: no mobile o botão já é full-width; o nowrap de cima faria overflow numa tela de 320px, então volta a poder quebrar. */ .vd-pop-more{width:100%;white-space:normal;text-align:center} }