/* ========================================================================== Tema Vector — folha única. Tokens vêm de theme.json (var(--wp--preset--*)); aqui ficam só os padrões que blocos nativos não expressam sozinhos. ========================================================================== */ :root { /* Espelha o --heading--font-size-h2 do twentytwentyone, que a producao herda: 3rem a partir de 652px, 2.25rem abaixo. O widget de titulo do Elementor nao define tamanho -- so familia, peso e cor --, entao o tamanho sempre veio do h2 do tema. */ /* Escala de titulos do twentytwentyone, que a producao herda: o widget de titulo do Elementor define familia, peso e cor, nunca tamanho. Os valores dobram de faixa em 652px. */ --vector--font-size-h1: 4rem; --vector--font-size-h2: 2.25rem; --vector--font-size-h3: 1.875rem; --vector--font-size-h4: 1.5rem; --vector--font-size-h5: 1.125rem; --vector--font-size-h6: 1rem; /* Os 10px da coluna do Elementor. A barra sob o titulo de secao usa o mesmo valor: como ela e absoluta, "left: 0" cai na borda do padding e nao no inicio do texto. */ --vector-col-pad: 10px; } @media (min-width: 652px) { :root { --vector--font-size-h1: 6rem; --vector--font-size-h2: 3rem; --vector--font-size-h3: 2rem; } } /* O WordPress aplica :where(.wp-site-blocks) > * { margin-block-start: 24px } entre os blocos de topo. Header, main e footer devem ficar encostados. */ .wp-site-blocks > * { margin-block-start: 0; } /* Mesmo block gap, agora entre as secoes dentro do
. As secoes trazem o proprio espacamento (padding-top de 50px), como no original. */ main.wp-block-group > * { margin-block-start: 0; } /* O mesmo, dentro de cada secao e de cada card. O espacamento vem do proprio elemento -- a margem de 50px sob o .vector-titulo, os 20px do .vector-card__thumb --, entao os 24px do WordPress sobram. Varredura de todo grupo is-layout-flow/constrained com 2+ filhos: estes sao os que restavam. Paragrafos dentro de .wp-block-column ficam de fora de proposito, porque ali o espacamento entre paragrafos e legitimo. */ .vector-secao > *, .vector-card > *, .vector-card__text > * { margin-block-start: 0; } /* Espacamento entre widgets, no modelo do kit do Elementor: .elementor-widget:not(:last-child){margin-block-end:20px}. O block gap do WordPress fica zerado dentro das secoes -- porque secao ja traz o proprio padding -- e este e o mecanismo que devolve o respiro entre os widgets de uma mesma secao. Secao aninhada nao entra: o espaco dela vem do proprio padding. */ .vector-widget:not(:last-child) { margin-block-end: 20px; } .vector-secao > .vector-secao { margin-block-end: 0; } /* O mesmo dentro do conteudo da pagina: as secoes convertidas do Elementor trazem o proprio padding, entao o block gap entre elas sobra. Restrito a .vector-secao de proposito -- entre paragrafos comuns do editor o espacamento continua valendo. */ .entry-content > .vector-secao { margin-block-start: 0; } /* A coluna do Elementor (.elementor-element-populated) leva padding: 10px DENTRO do container de 1140. Sem esse nivel o conteudo ficava 1140 de largura util em vez de 1120 -- o que esticava as abas, o menu e a figura junto. O eixo vertical desses 10px ja esta somado ao padding da propria secao (50+10 no topo, 10 embaixo). */ .vector-secao { padding-inline: 0; } .vector-secao > * { padding-inline: var(--vector-col-pad); } /* Toda coluna do Elementor leva padding: 10px, do column-gap-default. Vale para as colunas aninhadas tambem -- os cartoes de rede social, as grades de icone e as linhas de logo. Quando a coluna traz padding proprio, ele chega inline e sobrepoe. */ .vector-secao .wp-block-column { padding: 10px; } /* Dentro de uma coluna quem recebe os 10px e o wrapper de colunas, nao o titulo. Zerando a variavel nesse escopo, a barra -- que e absoluta e ancora na borda do padding -- volta a coincidir com o inicio do texto. Sem isso ela sobra 10px para a direita nas faixas de setor. */ .wp-block-column { --vector-col-pad: 0px; } /* A producao tem border-box em tudo, por dois caminhos: o reset global do twentytwentyone e o ".elementor *" do proprio Elementor. O tema nao tinha nenhum dos dois, entao padding somava a largura em vez de caber dentro dela. Visivel no .vector-header__inner, que com max-width 1140 e padding lateral ficava 1160 de largura total acima desse viewport. */ *, *::before, *::after { box-sizing: border-box; } body { -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } /* Titulos vindos do widget heading do Elementor. O .elementor-heading-title zera line-height, margem e padding em todos eles -- sem isso o titulo fica 1,2x mais alto (48px viram 57,6) e ganha margens que o original nao tem. O padding proprio do widget, quando existe, vem inline e sobrepoe este reset. */ .vector-heading { line-height: 1; margin: 0; /* padding-block, nao padding: no Elementor o titulo fica DENTRO da coluna, que fornece os 10px laterais. Aqui ele e o proprio filho da secao, entao zerar o padding inteiro tirava esses 10px e o titulo ficava 1140 de conteudo em vez de 1120. */ padding-block: 0; } /* --- Título de seção --- Montserrat bold, tamanho do h2 do tema, alinhado a esquerda, com a barra ciano de 50x4 embaixo. Valores do CSS do Customizer: left 0, bottom -20px, 50px de largura, 4px solid #34c2e0, margem inferior de 50px. */ .vector-titulo, .vector-heading.vector-titulo { position: relative; margin-bottom: 50px; text-align: left; } .vector-titulo::after { content: ""; display: block; position: absolute; left: var(--vector-col-pad); bottom: -20px; width: 102px; border-bottom: 6px solid var(--wp--preset--color--accent); } /* --- Cabeçalho --- Espelha a estrutura do header do Elementor (post 290): colunas 24% / 69,333% / 6%, todas centradas verticalmente, sem borda, padding de 10px, menu Montserrat 16px/600 com 13px 10px por item. O breakpoint do burger e 1025px, igual ao viewport_lg do kit. */ /* padding 10px 5px: valor conferido pixel a pixel contra a producao */ .vector-header { background: var(--wp--preset--color--base); padding: 10px 5px; } .vector-header__inner { display: grid; grid-template-columns: 24% 69.333% 6%; align-items: center; max-width: 1140px; margin-inline: auto; padding: 0 10px; } /* O grupo e is-layout-flow, entao o WP aplica --wp--style--block-gap (24px) como margin-block-start em todo filho que nao seja o primeiro. Num grid isso vira um deslocamento visivel -- o nav descia 24px. */ .vector-header__inner > * { margin-block: 0; } /* A
estica ate a altura da linha (74) e centraliza o logo (68), espelhando o .elementor-widget-wrap do original. line-height 0 + em block matam o vao de linha-base que o inline criava embaixo da imagem -- era o que levava a figure a 76 e esticava a linha inteira do grid. */ .vector-header__logo { margin: 0; justify-self: start; align-self: stretch; display: flex; align-items: center; line-height: 0; } .vector-header__logo a { display: block; } .vector-header__logo img { display: block; width: 100%; max-width: 236px; height: auto; } .vector-header__nav { justify-self: end; } .vector-header__lang { justify-self: center; } /* A altura do header vem do menu, nao do logo: 27 (padding) + 20 (linha do texto) + 27 (padding) = 74px. O logo tem 68px e centraliza dentro disso. */ .vector-nav ul { display: flex; flex-wrap: wrap; align-items: stretch; list-style: none; margin: 0; padding: 0; } /* Entre 1025 e ~1056 o menu nao cabe na coluna de 69,333% e "Contato" quebra para a linha de baixo. A producao tem o mesmo defeito: o burger so entra em 1024, entao sobra uma faixa onde o menu horizontal esta apertado demais. Aqui o espacamento encolhe de forma continua nessa faixa -- sem degrau visivel num breakpoint -- e volta aos 10px do original a partir de 1140, onde o container ja esta no maximo. Nos ~1025 isso libera 78px: 48 do padding dos seis itens e 30 das cinco margens. */ .vector-nav li:not(:last-child) { margin-right: clamp(4px, calc(4px + (100vw - 1025px) * 0.052), 10px); } .vector-nav a { position: relative; display: block; padding-block: 27px; padding-inline: clamp(6px, calc(6px + (100vw - 1025px) * 0.035), 10px); font-family: var(--wp--preset--font-family--montserrat); /* 700, nao 600. O Elementor pede 600, mas a fonte custom da producao registra apenas 400 e 700 -- sem face 600 o navegador sobe para 700 (CSS Fonts 4: alvo acima de 500 procura primeiro os pesos maiores). O menu no ar e Montserrat Bold. Mantido para a migracao nao mudar a aparencia. O Montserrat-SemiBold.ttf esta em uploads/2022/03/ desde 2022, nunca registrado, caso queiram o 600 de verdade. */ font-weight: 700; font-size: 16px; line-height: 20px; color: var(--wp--preset--color--navy); text-decoration: none; transition: color .3s cubic-bezier(.58, .3, .005, 1); } .vector-nav a:hover, .vector-nav .current-menu-item > a { color: var(--wp--preset--color--accent); } /* Barra ciano de 3px sob os itens do menu. Aparece no hover e fica fixa no item da pagina atual. Na home nenhum item corresponde (a home nao esta no menu), entao so o hover aparece. Em producao ela fica sempre visivel em todos os itens, mas isso e defeito, nao design: o markup pede "e--animation-fade" e essa classe nao existe em nenhum CSS do Elementor instalado (grep = 0 no free 4.2.4 e no Pro 3.0.8), entao o fade nunca roda. Aqui vale o comportamento pretendido. */ .vector-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background-color: var(--wp--preset--color--accent); opacity: 0; transition: opacity .3s cubic-bezier(.58, .3, .005, 1); } .vector-nav a:hover::after, .vector-nav a:focus-visible::after, .vector-nav .current-menu-item > a::after, .vector-nav .current-menu-ancestor > a::after, .vector-nav .current-menu-parent > a::after { opacity: 1; } /* Alternador de idioma: bandeiras 21x15, espaco de 15px, como no original */ .vector-lang ul { display: flex; align-items: center; justify-content: center; gap: 15px; list-style: none; margin: 0; padding: 0; } .vector-lang a { display: block; line-height: 0; } .vector-lang img { display: block; width: 21px; height: 15px; } /* Menu em telas pequenas: checkbox + label, sem JS */ .vector-burger { display: none; } @media (max-width: 1024px) { .vector-header__inner { grid-template-columns: 1fr auto; row-gap: 0; } .vector-burger { display: inline-flex; justify-self: end; padding: .5rem; cursor: pointer; color: var(--wp--preset--color--navy); } .vector-header__nav, .vector-header__lang { display: none; } .vector-burger__state:checked ~ .vector-header__nav, .vector-burger__state:checked ~ .vector-header__lang { display: block; grid-column: 1 / -1; justify-self: stretch; } .vector-burger__state:checked ~ .vector-header__nav ul { flex-direction: column; align-items: stretch; } .vector-burger__state:checked ~ .vector-header__nav li:not(:last-child) { margin-right: 0; } .vector-burger__state:checked ~ .vector-header__lang ul { justify-content: flex-start; padding: .5rem 10px 1rem; } } /* --- Quem Somos --- Montserrat 400 em #58595B. O widget do Elementor nao define tamanho para desktop, entao os 20px vinham do --global--font-size-base do twentytwentyone (1.25rem). O 16px e o font_size_tablet do widget, que o Elementor emite em max-width:1024px. */ .vector-quem-somos p { font-family: var(--wp--preset--font-family--montserrat); font-weight: 400; font-size: 20px; color: #58595B; } @media (max-width: 1024px) { .vector-quem-somos p { font-size: 16px; } } .vector-quem-somos__icon { margin: 0; } .vector-quem-somos__icon img { display: block; margin-inline: auto; height: auto; } /* --- Hero --- Valores lidos do post-6.css do Elementor: slide 850px (400 tablet, 300 mobile), conteudo com max-width 47% (41% / 68%), interno com padding 50px, alinhado ao meio e a esquerda, titulo Montserrat bold 45px/1.2em #1F3060, descricao Roboto Slab 26px, botao #33C3E0 raio 30px com padding 10px 20px. Navegacao por scroll-snap, sem Swiper. */ .vector-hero { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .vector-hero::-webkit-scrollbar { display: none; } .vector-hero__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; height: 850px; } .vector-hero__bg { position: absolute; inset: 0; background-color: #E1E1E1; background-size: cover; background-position: 50%; background-repeat: no-repeat; } /* O slide inteiro e o link, como no original */ .vector-hero__inner { position: absolute; inset: 0; margin: auto; padding: 50px; display: flex; align-items: center; justify-content: flex-start; text-align: left; text-decoration: none; } .vector-hero__contents { position: relative; z-index: 1; width: 100%; max-width: 47%; } .vector-hero__title { font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: 45px; line-height: 1.2em; color: var(--wp--preset--color--navy); } .vector-hero__title:not(:last-child) { margin-bottom: 30px; } .vector-hero__desc { font-family: var(--wp--preset--font-family--montserrat); font-weight: 400; font-size: 26px; line-height: 1.4; color: var(--wp--preset--color--navy); } .vector-hero__desc:not(:last-child) { margin-bottom: 30px; } .vector-hero__cta { display: inline-block; padding: 10px 20px; font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: 17px; line-height: 1; color: #fff; background-color: #33C3E0; border: 0; border-radius: 30px; } @media (max-width: 1024px) { .vector-hero__slide { height: 400px; } .vector-hero__contents { max-width: 41%; } .vector-hero__title { font-size: 20px; } } @media (max-width: 767px) { .vector-hero__slide { height: 300px; } .vector-hero__contents { max-width: 68%; } .vector-hero__title { font-size: 16px; } .vector-hero__inner { padding: 30px; } } /* --- Abas "Onde atuamos?" --- Valores do post-6.css e do CSS do Customizer: lista 15% de largura, wrapper com padding 20px 0, item com padding 77/25/30/25, Roboto 600 19px com text-shadow, icone centralizado a 15px do topo. Inativo: fundo branco, texto #1F3060. Ativo: fundo #34c2e0, icone "-on", texto branco. Primeiro item com canto superior arredondado, ultimo com inferior, e borda de 2px #f4f4f4 separando do segundo em diante. */ .vector-tabs { display: flex; background-color: var(--wp--preset--color--surface); } .vector-tabs__list { flex: 0 0 15%; /* Sem isto o min-width:auto de item flex estica a lista ate o min-content ("Infraestrutura" + 50px de padding = 185px), roubando 17px do painel e desequilibrando as alturas. O Elementor resolve o mesmo problema com .elementor-tabs-wrapper{overflow:hidden}. */ min-width: 0; list-style: none; margin: 0; padding: 20px 0; } .vector-tabs__btn { appearance: none; display: block; width: 100%; border: 0; cursor: pointer; /* 18px nas laterais em vez dos 25px da producao: o texto do item cabe melhor na coluna de 168px, medido no staging. */ padding: 77px 18px 30px; text-align: center; font-family: var(--wp--preset--font-family--montserrat); font-weight: 600; font-size: 19px; /* line-height 1, do .elementor-tab-desktop-title. O post-6.css nao sobrescreve. Com 1.3 a lista ficava ~90px mais alta que o painel. */ line-height: 1; color: var(--wp--preset--color--navy); text-shadow: 0 0 10px rgba(0, 0, 0, .3); background: #fff var(--vector-tab-icon) center 15px / auto no-repeat; } .vector-tabs__list li:not(:first-child) .vector-tabs__btn { border-top: 2px solid var(--wp--preset--color--surface); } .vector-tabs__list li:first-child .vector-tabs__btn { border-top-left-radius: 20px; border-top-right-radius: 20px; } .vector-tabs__list li:last-child .vector-tabs__btn { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .vector-tabs__btn[aria-selected="true"] { color: #fff; background: var(--wp--preset--color--accent) var(--vector-tab-icon-on) center 15px / auto no-repeat; } /* flex-grow 1 e altura igual a da lista: o container e flex e o align-items fica no padrao "stretch", como no .elementor-tabs. Eu tinha posto flex-start, e por isso as duas colunas divergiam. Os 20px em volta da figura sao padding daqui, e nao margin do painel: como margin do filho eles ficavam fora da altura de conteudo deste item flex, entao o container media 10px a menos que a producao e a lista, esticada ate ele, ficava mais curta que a figura. A geometria e a mesma da producao -- painel de 912 centrado numa faixa de 952. */ .vector-tabs__panels { flex: 1 1 auto; padding: 20px; } /* .elementor-tab-content no Customizer: margem de 20px, padding zero, gradiente que vai de transparente a branco em 52% e cantos inferiores de 20px. */ .vector-tabs__panel { display: none; margin: 0; padding: 0; background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 1) 52%, rgba(255, 255, 255, 1) 100% ); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .vector-tabs__panel.is-active { display: block; } .vector-tabs__panel img { width: 100%; display: block; } .vector-tabs__caption { padding: 0 30px 24px; font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; color: var(--wp--preset--color--navy); } @media (max-width: 782px) { .vector-tabs { display: block; } .vector-tabs__list { display: flex; overflow-x: auto; padding: 0; } .vector-tabs__btn { padding: 60px 12px 12px; white-space: nowrap; font-size: 15px; } .vector-tabs__list li:first-child .vector-tabs__btn, .vector-tabs__list li:last-child .vector-tabs__btn { border-radius: 0; } .vector-tabs__list li:not(:first-child) .vector-tabs__btn { border-top: 0; } } /* --- Divisor das secoes --- O widget divider do Elementor (post-6: 617c9ff, 3faafed, eb41bf7) e um .elementor-divider display:flex com padding-block de 15px; o separador tem width:10% e border-block-start de 5px, e fica a esquerda porque o flex nao foi centrado. O
nativo traz do UA stylesheet margin-inline:auto, que centraliza a barra assim que a largura e menor que 100% -- era isso que deslocava as barrinhas azuis para o meio. O margin-block-end soma os 15px internos aos 20px entre widgets. */ .wp-block-group.vector-divisor { margin-block: 15px; } .wp-block-group.vector-divisor:not(:last-child) { margin-block-end: 35px; } /* A linha em si. O
nasce com margin-inline:auto no UA stylesheet, que a centralizaria dentro do grupo assim que a largura e menor que 100%. Aqui basta uma regra normal: dentro de um grupo de layout flow nao existe a margem automatica com !important que o layout constrained impoe aos filhos diretos da secao. */ .vector-divisor__linha { margin-block: 0; margin-inline: 0; } /* --- Rodape do post --- A producao serve o post pelo tema antigo, nao pelo Elementor: titulo, imagem destacada, conteudo e uma linha de meta no fim com data, autor e categorias. Mantive a ordem e deixei de fora o autor -- ver README. Sem palavras entre os itens, so o separador, porque o template part e estatico e as mesmas linhas servem os tres idiomas. */ .vector-post__meta { margin-block-start: 40px; gap: 0 12px; font-family: var(--wp--preset--font-family--montserrat); font-size: 16px; color: var(--wp--preset--color--ink); } .vector-post__meta > * { margin-block: 0; } .vector-post__meta > * + *::before { content: "\2022"; margin-inline-end: 12px; color: var(--wp--preset--color--accent); } .vector-post__meta a { color: inherit; text-decoration: none; } .vector-post__meta a:hover { color: var(--wp--preset--color--accent); } /* --- Carrossel de logos de clientes --- Espelha o image-carousel do Elementor: 4 visiveis, setas, autoplay. O logo ocupa 70% do slide, com borda 1px #ccc e raio 20px, do CSS do Customizer (.swiper-image-stretch .swiper-slide .swiper-slide-image). Sem JS a faixa continua rolavel por arraste e teclado. */ .vector-logos-wrap { position: relative; } /* O padding fica no envolucro, nao no rolador. Dentro de um container com overflow-x, o padding lateral soma a area visivel e deixava aparecer ~10px do slide seguinte. */ .vector-carrossel { position: relative; padding: 10px; } .vector-logos { display: flex; flex-wrap: nowrap; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; } .vector-logos::-webkit-scrollbar { display: none; } .vector-logos__item { flex: 0 0 calc(25% - 1.125rem); scroll-snap-align: start; margin: 0; display: flex; align-items: center; } .vector-logos__item img { width: 70%; margin: auto; display: block; border: 1px solid #ccc; border-radius: 20px; } /* Setas sobre a faixa, como o .elementor-swiper-button: hsla(0,0%,93%,.9), 25px, absolutas no meio vertical, a 10px das bordas. */ .vector-carrossel__seta { appearance: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; color: hsla(0, 0%, 93%, .9); font-size: 25px; } .vector-carrossel__seta--prev { left: 10px; } .vector-carrossel__seta--next { right: 10px; } .vector-carrossel__seta svg { width: 1em; height: 1em; } .vector-carrossel__seta:hover { color: var(--wp--preset--color--accent); } @media (max-width: 900px) { .vector-logos__item { flex-basis: calc(50% - .75rem); } } @media (max-width: 560px) { .vector-logos__item { flex-basis: 100%; } } /* --- Depoimentos dos socios (substitui o elementskit-testimonial) --- Montagem do estilo "style2" do ElementsKit, medida na producao: tres cartoes visiveis separados por 6px, cada um com borda fina #28303D; dentro, a textura bg-socios.jpg em repeat-x no topo, que e o que cria o efeito de moldura parcial sobre a foto; a biografia como celula de tabela de 370px centrada verticalmente; e o nome e o cargo posicionados por cima, a 250px do rodape do cartao. */ .vector-depoimentos { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; } .vector-depoimentos::-webkit-scrollbar { display: none; } .vector-depoimento { flex: 0 0 calc((100% - (var(--vector-por-vez) - 1) * 6px) / var(--vector-por-vez)); scroll-snap-align: start; height: 692.4px; padding: 0; border: 1px solid #28303D; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0); } .vector-depoimento__conteudo { position: relative; display: block; height: 690px; text-align: center; background: url(../img/bg-socios.jpg) top left repeat-x; } .vector-depoimento__foto { margin: 0; } .vector-depoimento__foto img { display: block; width: 100%; height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px; } /* O cartao e mais estreito que a foto (326,4 contra 358) e sobe 15px sobre a base dela. Sombra, nao borda. Nao da para usar display table-cell aqui: celula de tabela ignora margem, e a sobreposicao depende de margin-top negativa. */ .vector-depoimento__card { position: relative; z-index: 1; width: 326.4px; max-width: 90%; min-height: 333px; margin: -15px auto 0; padding: 24px 20px 28px; background: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15); text-align: center; } .vector-depoimento__nome { display: block; font-weight: 700; font-size: 1.125rem; color: var(--wp--preset--color--navy); margin-bottom: 0; } .vector-depoimento__cargo { display: block; margin-bottom: 1rem; font-size: .875rem; color: var(--wp--preset--color--navy); } .vector-depoimento__texto { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--wp--preset--color--ink); } @media (max-width: 1024px) { .vector-carrossel { --vector-por-vez: 2; } } @media (max-width: 767px) { .vector-carrossel { --vector-por-vez: 1; } } /* --- Cards de post ("Destaque Vector") --- Skin "cards" do widget posts do Elementor, com os ajustes do Customizer: fundo #1f3060, raio 25px, titulo branco 19px, meta branca sem borda superior, badge transparente embaixo e o "+" sobre a imagem. Proporcao da miniatura 0.78 no desktop e 0.5 no mobile. */ .vector-cards { list-style: none; margin: 0; padding: 0; gap: 24px 20px; } .vector-card { position: relative; overflow: hidden; width: 100%; min-height: 100%; background-color: var(--wp--preset--color--navy); border-radius: 25px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15); transition: box-shadow .25s; } .vector-card:hover { box-shadow: 0 0 30px 0 rgba(0, 0, 0, .15); } .vector-cards .wp-block-post { overflow: visible; } /* Miniatura em proporcao fixa, com a imagem cobrindo a area */ .vector-card__thumb { position: relative; overflow: hidden; margin: 0 0 20px; padding-bottom: calc(0.78 * 100%); } .vector-card__thumb a, .vector-card__thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* Gradiente de hover do elementor-posts__hover-gradient */ .vector-card__thumb::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to top, rgba(0, 0, 0, .35), transparent 75%); opacity: 0; transition: opacity .3s; pointer-events: none; } .vector-card:hover .vector-card__thumb::after { opacity: .5; } /* Badge: nome da categoria, transparente, embaixo da imagem */ .vector-card__badge { position: absolute; top: auto; bottom: 10px; left: 205px; margin: 20px; padding: .6em 1.2em; background: transparent; color: #fff; font-size: 12px; line-height: 1; font-weight: 400; border-radius: 999px; } /* O Elementor mostra so a primeira categoria; o core/post-terms lista todas, entao as demais e os separadores ficam ocultos. */ .vector-card__badge a { color: #fff; text-decoration: none; } .vector-card__badge a:not(:first-of-type), .vector-card__badge .wp-block-post-terms__separator { display: none; } .vector-card__text { padding: 0 30px; margin-top: 20px; margin-bottom: 0; } .vector-card__title { margin: 0 0 25px; font-size: 19px; line-height: 1.35; } .vector-card__title, .vector-card__title a { color: #fff; text-decoration: none; } .vector-card__title a:hover { color: var(--wp--preset--color--accent); } /* O "+" sobre a imagem, no icone redondo */ .vector-card__more { position: absolute; top: 234px; right: 40px; margin-bottom: 20px; padding: 15px; display: inline-block; font-size: 36px; font-weight: 300; line-height: 1; color: #fff; text-decoration: none; background: url(../img/mais.png) center center no-repeat; } .vector-card__meta { gap: 0; padding: 15px 30px; margin-bottom: 0; border-top: 0; color: #fff; font-size: 12px; line-height: 1.3em; } .vector-card__meta > * + *::before { content: "•"; margin: 0 5px; } @media (max-width: 1024px) { .vector-cards { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 767px) { .vector-cards { grid-template-columns: 1fr !important; } .vector-card__thumb { padding-bottom: calc(0.5 * 100%); } } /* --- Rodapé --- Template 343 do Elementor. Quatro faixas: logo, divisor, tres colunas e a barra de copyright. As tres primeiras em #1F3060, a barra em #0F1936. Larguras das colunas do post-343.css: 33,333 / 36,139 / 30,166. */ .vector-footer { background-color: var(--wp--preset--color--navy); } /* O WordPress aplica block gap entre os filhos do