ou não —
e não há nada no markup que os distinga de texto normal, porque vivem todos
num .wpb_text_column sem classe.
Daí esta classe. Põe-se em "Extra class name" do bloco de texto no WPBakery
(fica no .wpb_text_column) ou directamente no elemento; funciona nos dois
sítios. Não leva !important: a especificidade já chega.
O stack é o mesmo que o Salient usa nos h1, para não haver dois Maitree
ligeiramente diferentes pelo site. */
.antetitulo,
.antetitulo p,
.antetitulo span,
.antetitulo h1,
.antetitulo h2,
.antetitulo h3,
.antetitulo h4,
.antetitulo h5,
.antetitulo h6 {
font-family: "Maitree Regular", "Maitree", Georgia, serif;
}
/* =========================================================
Fundos animados das quatro áreas (homepage)
---------------------------------------------------------
Gradiente animado em CSS, em vez de vídeo: uns KB em vez de
quatro vídeos no topo da homepage, sem autoplay bloqueado
em iOS e sem ficheiros para gerir.
COMO USAR: uma classe só, na LINHA INTERIOR que tem as
quatro colunas lá dentro. Extra class name: areas-anim
As quatro colunas são apanhadas por :nth-child, por isso
não há hipótese de trocar a ordem nem de esquecer uma.
A imagem de fundo das colunas deixa de ser precisa — esta
regra esconde-a.
COMO É FEITO O DESENHO: cada mancha é um círculo grande com
o centro FORA da caixa. Vê-se só um pedaço da borda, e uma
borda de círculo grande lê-se como uma curva suave — é o que
dá o ar de tecido dobrado das imagens de referência, em vez
das manchas redondas de uma primeira tentativa.
O movimento é só transform, que o browser compõe sem voltar
a pintar. Animar o gradiente em si, ou background-position,
obrigaria a repintar a cada frame, quatro cards ao mesmo
tempo.
PARA AFINAR: mexe só nos quatro blocos :nth-child. Em cada
um, "base" é o fundo, "c1"/"c2" são as cores das duas
manchas, e "x/y" é onde fica o centro de cada círculo —
valores acima de 100% ou negativos põem o centro fora da
caixa, que é o que se quer.
========================================================= */
.areas-anim .column-image-bg {
display: none;
}
.areas-anim > .row_col_wrap_12_inner > .wpb_column .column-image-bg-wrap {
border-radius: 10px;
overflow: hidden;
background: var(--a-base);
}
.areas-anim > .row_col_wrap_12_inner > .wpb_column .column-image-bg-wrap::before,
.areas-anim > .row_col_wrap_12_inner > .wpb_column .column-image-bg-wrap::after {
content: "";
position: absolute;
/* Bem maiores do que o card: ao derivar, as bordas nunca entram. */
inset: -60%;
will-change: transform;
}
.areas-anim
> .row_col_wrap_12_inner
> .wpb_column
.column-image-bg-wrap::before {
background: radial-gradient(
70% 70% at var(--a-x1) var(--a-y1),
var(--a-c1) 0%,
var(--a-c1) 38%,
transparent 78%
);
animation: a-sweep1 26s ease-in-out infinite alternate;
}
.areas-anim > .row_col_wrap_12_inner > .wpb_column .column-image-bg-wrap::after {
background: radial-gradient(
60% 60% at var(--a-x2) var(--a-y2),
var(--a-c2) 0%,
var(--a-c2) 32%,
transparent 74%
);
animation: a-sweep2 34s ease-in-out infinite alternate;
}
/* 26s e 34s de propósito: nunca coincidem, por isso não se dá pelo
ciclo a repetir. A rotação é pequena — é ela que faz a curva
varrer o card devagar, como um tecido a dobrar. */
@keyframes a-sweep1 {
from {
transform: translate(-6%, -4%) rotate(0deg) scale(1);
}
to {
transform: translate(7%, 6%) rotate(9deg) scale(1.12);
}
}
@keyframes a-sweep2 {
from {
transform: translate(5%, 6%) rotate(0deg) scale(1.08);
}
to {
transform: translate(-7%, -5%) rotate(-8deg) scale(0.96);
}
}
.areas-anim > .row_col_wrap_12_inner > .wpb_column:nth-child(1) {
--a-base: #bfe38f;
--a-c1: #e4f4c0;
--a-x1: 18%;
--a-y1: 10%;
--a-c2: #45c07d;
--a-x2: 95%;
--a-y2: 105%;
}
.areas-anim > .row_col_wrap_12_inner > .wpb_column:nth-child(2) {
--a-base: #57c78a;
--a-c1: #a8e6a8;
--a-x1: 5%;
--a-y1: -5%;
--a-c2: #2f9d68;
--a-x2: 100%;
--a-y2: 55%;
}
.areas-anim > .row_col_wrap_12_inner > .wpb_column:nth-child(3) {
--a-base: #3fbd7c;
--a-c1: #93dda8;
--a-x1: 88%;
--a-y1: 18%;
--a-c2: #cfeaa0;
--a-x2: 108%;
--a-y2: 88%;
}
.areas-anim > .row_col_wrap_12_inner > .wpb_column:nth-child(4) {
--a-base: #5ac489;
--a-c1: #2fa76c;
--a-x1: 88%;
--a-y1: 5%;
--a-c2: #d3eda0;
--a-x2: 35%;
--a-y2: 112%;
}
/* Quem pede menos movimento no sistema fica com o gradiente parado,
que continua bonito — não perde nada de conteúdo. */
@media (prefers-reduced-motion: reduce) {
.areas-anim .column-image-bg-wrap::before,
.areas-anim .column-image-bg-wrap::after {
animation: none;
}
}
/* Título das quatro áreas.
Como a .antetitulo: funciona posta em "Extra class name" do bloco de texto
(fica no .wpb_text_column) ou directamente no elemento.
Sem !important — testei em e em vazios que o editor injecta (traziam padding-bottom: 1.5em) */
.get-in-touch-GS.green-footer .nectar-scrolling-text-inner__text-chunk > p:not(.rotating_txt) {
display: none !important;
}
/* Texto preto sobre o verde */
.get-in-touch-GS.green-footer p.rotating_txt {
white-space: nowrap !important;
flex: 0 0 auto;
display: inline-flex !important;
align-items: center;
margin: 0 !important;
padding: 0 !important;
color: #000000 !important;
font-size: 1em !important;
line-height: 1.05 !important;
}
/* Seta: o SVG é branco -> passa a preto e reduz para a escala do texto */
.get-in-touch-GS.green-footer .nectar-scrolling-text-inner__text-chunk img,
.get-in-touch-GS.green-footer p.rotating_txt img {
filter: brightness(0);
max-width: 3.4vw !important;
max-height: 3.4vw !important;
align-self: center !important;
padding: 0 !important;
/* Seta centrada entre as palavras.
Mesmo problema da marquee branca, mas com contas diferentes: aqui não há
span separador, e o vão depois da seta é o que sobra do chunk. A 1600 a
seta estava a 19px de um lado e a 87px do outro.
Os valores estão em em e não em vw, mas atenção a uma armadilha: o em
aqui resolve contra o font-size da PRÓPRIA imagem, que é o dobro do do
parágrafo (158px contra 79px). Um valor que pareça pequeno de mais é
por isso.
Medido depois: 57/55 a 1600 e 43/49 a 1200. */
margin: 0 0.2em 0 0.36em !important;
}
/* Mobile */
@media only screen and (max-width: 999px) {
.get-in-touch-GS.green-footer {
min-height: 55vh;
}
/* A row traz as classes top/bottom_padding_phone_20pct e o Salient injecta
"body .vc_row.bottom_padding_phone_20pct { padding-bottom:20% !important }"
abaixo dos 690px. São 72px que descolavam a faixa verde do fundo da foto
e a deixavam a meio da imagem.
O "padding: 0 !important" lá de cima não chegava: tem menos especificidade
(0,2,0) do que a regra do Salient (0,2,1). Este selector acrescenta o
body e o .vc_row para passar à frente. */
body .vc_row.get-in-touch-GS.green-footer {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.get-in-touch-GS.green-footer .nectar-scrolling-text-inner__text-chunk {
font-size: 9vw !important;
padding-left: 4vw !important;
}
.get-in-touch-GS.green-footer .nectar-scrolling-text-inner__text-chunk img,
.get-in-touch-GS.green-footer p.rotating_txt img {
max-width: 6vw !important;
max-height: 6vw !important;
margin-left: 2vw !important;
}
}
/* ==========================================================================
GET IN TOUCH — marquee do fim da homepage (.get-in-touch-GS sem .green-footer)
Os chunks encolhiam (flex-shrink:1) e o perdia o white-space:nowrap,
partindo "Get in Touch" em duas linhas. As regras antigas (linhas ~481-494
e ~1943) apontam para `h1 img` mas o bloco gera `p img`, por isso não aplicam.
========================================================================== */
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner {
flex-wrap: nowrap;
align-items: center;
min-height: 0 !important;
height: auto !important;
}
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner__text-chunk {
flex: 0 0 auto;
align-items: center;
min-height: 0 !important;
height: auto !important;
white-space: nowrap;
}
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner__text-chunk > p {
flex: 0 0 auto;
display: inline-flex !important;
align-items: center;
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
/* Seta proporcional ao texto (substitui o inline padding: 0 130px 0 30px) */
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner__text-chunk img,
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner__text-chunk p img {
flex: 0 0 auto;
width: 7vw !important;
max-width: 7vw !important;
height: auto !important;
align-self: center !important;
padding: 0 !important;
/* margens: ver o bloco "seta centrada" mais abaixo */
}
/* span.custom vazio injecta padding a 10vw */
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner span.custom:empty,
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner span.custom > span:empty {
padding: 0 !important;
}
@media only screen and (max-width: 999px) {
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner__text-chunk img,
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner__text-chunk p img {
width: 9vw !important;
max-width: 9vw !important;
}
}
/* --------------------------------------------------------------------------
Seta centrada entre "Touch" e o "Get" seguinte
Estava encostada à palavra da esquerda: 79px de um lado, 240px do outro.
A folga de cada lado é feita por três coisas diferentes, e só duas delas
estavam do lado direito:
[texto] espaço | margin-left SETA margin-right | espaço [span.custom]
O espaço aparece dos dois lados (é o carácter de espaço do texto e o que
separa uma repetição da seguinte), por isso anula-se. Sobra a conta:
margin-left = margin-right + largura do span
Os valores estão em em, não em px nem vw: assim acompanham o tamanho do
texto e a seta continua ao meio em qualquer largura de ecrã. Medido depois:
160 / 160, com o mesmo espaçamento total de antes (452px a 1920).
Se quiseres o marquee mais apertado ou mais folgado, mexe nos três valores
mantendo a conta acima — senão descentra outra vez.
-------------------------------------------------------------------------- */
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner__text-chunk > p {
/* o gap fixo de 50px (regra lá de cima) só contava para um dos lados */
gap: 0 !important;
}
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner__text-chunk p img {
margin: 0 0.2em 0 0.575em !important; /* 0.575 = 0.2 + 0.375 */
}
.get-in-touch-GS:not(.green-footer) .nectar-scrolling-text-inner span.custom {
width: 0.375em !important;
padding: 0 !important;
}
/* GET IN TOUCH — fim */
/* ==========================================================================
ABOUT — gráfico de números (.nectar-milestone)
O número estava colado ao topo da barra verde. A barra é uma imagem de
fundo com altura fixa (400px) e o texto está alinhado ao fundo da coluna,
por isso quanto maior for o bloco de texto mais o número sobe — e na barra
mais curta (a do "10", em que o verde só começa a 52% da altura) não havia
espaço nenhum.
Pior ainda: o tema aumentava o número para 80px abaixo dos ~1400px de
largura. Ou seja, ecrã mais pequeno, número maior. Medido antes:
1920 "10" a 73px do topo do verde
1440 "10" a 3px
1366 "10" a 4px
1024 "10" a -34px <- o número saía por cima da barra
375 "10" a 26px
Daí o tester ver o problema muito pior do que tu.
Correção: tamanhos em clamp() em vez de degraus por breakpoint, para o
texto encolher com o ecrã em vez de crescer. Depois:
1920:65 1440:61 1366:60 1024:65 375:90 (folga mínima ao topo)
O 62px do topo mantém-se igual ao que estava a 1920 — nos ecrãs grandes
nada muda. A legenda fica nos 20px pedidos e só desce daí para baixo em
ecrãs estreitos, senão voltava a rebentar.
========================================================================== */
.vc_column-inner:has(.column-image-bg) .nectar-milestone .number,
.vc_column-inner:has(.column-image-bg) .nectar-milestone .number h2,
.vc_column-inner:has(.column-image-bg) .nectar-milestone .number span,
.vc_column-inner:has(.column-image-bg) .nectar-milestone .number .symbol-wrap {
font-size: clamp(38px, 3.6vw, 62px) !important;
line-height: 1.1 !important;
}
.vc_column-inner:has(.column-image-bg) .nectar-milestone .subject {
font-size: clamp(15px, 1.55vw, 20px) !important;
line-height: 1.35 !important;
}
/* Colunas empilhadas: a barra passa a ocupar a largura toda e a legenda cabe
numa linha, por isso o número pode voltar a crescer. */
@media only screen and (max-width: 999px) {
.vc_column-inner:has(.column-image-bg) .nectar-milestone .number,
.vc_column-inner:has(.column-image-bg) .nectar-milestone .number h2,
.vc_column-inner:has(.column-image-bg) .nectar-milestone .number span,
.vc_column-inner:has(.column-image-bg) .nectar-milestone .number .symbol-wrap {
font-size: clamp(44px, 12vw, 62px) !important;
}
.vc_column-inner:has(.column-image-bg) .nectar-milestone .subject {
font-size: clamp(15px, 4.4vw, 20px) !important;
}
}
/* PORQUE É QUE O SELECTOR É ESTE, E NÃO ".nectar-milestone"
Escrevi isto à primeira sem âmbito nenhum e estraguei o bloco de números da
homepage: lá o shortcode pede 150px e a minha regra esmagava-os para 62px,
com as legendas a passarem de 28px para 20px. Ficou muito diferente da
maquete e demorou a perceber porquê, porque o erro estava noutra página.
O :has(.column-image-bg) apanha só os milestones que estão assentes numa
barra — que são exactamente estes cinco da About. Confirmado: 5 em 5 aqui,
0 em 3 na homepage.
O .symbol-wrap tem de estar na lista: o tamanho do shortcode fica nele, e
não no .number. Encolher só o .number deixava uma caixa alta a reservar
espaço para dígitos que já eram pequenos.
========================================================================== */
/* ABOUT números — fim */
/* ==========================================================================
HOMEPAGE — bloco de números (.milestone-homepage)
Aqui os números ficam no tamanho que o shortcode pede (150px) e o layout
de número à esquerda + legenda à direita já vem do bloco
"border_bottom_desktop / stats-linha" mais abaixo neste ficheiro. Só
faltava encostar as três linhas umas às outras.
Cada número é uma linha própria do WPBakery com 42px de margem em baixo, o
que dava 213px de um número ao seguinte contra os ~183px da maquete.
Atenção ao nome da classe: é .inner_row, com underscore. O .vc_row-inner
com hífen não existe nesta estrutura — cheguei a escrever a regra assim e
não fazia nada, mas parecia estar a funcionar porque outra alteração minha
estava a encolher tudo ao mesmo tempo.
========================================================================== */
.milestone-homepage .inner_row {
margin-bottom: 13px !important;
}
/* Números da homepage — fim */
/* ==========================================================================
NÚMEROS (.nectar-milestone) — peso normal, nunca bold
Deliberadamente sem âmbito: aplica-se a todos os contadores do site.
Comecei por limitar isto à homepage e a seguir apareceu o mesmo na Global
Approach. Os contadores existem em três páginas — homepage (3), About (5)
e Global Approach (3) — e a regra da marca é não usar bold em lado nenhum,
por isso é mais seguro tratá-los de uma vez do que andar a persegui-los
página a página.
O 600 vinha de uma regra do próprio site e não é um bold falso do browser:
há mesmo um UntitledSans-Bold declarado nos @font-face a 600. Estava a
carregar-se outro ficheiro de fonte só para estes números.
O .symbol-wrap e o span do "+" ou do "%" têm de vir na lista: o sinal é um
elemento à parte e ficava em bold sozinho ao lado dos dígitos.
========================================================================== */
.nectar-milestone .number,
.nectar-milestone .number span,
.nectar-milestone .number h2,
.nectar-milestone .number .symbol-wrap,
.nectar-milestone .number .symbol-wrap span {
font-weight: 400 !important;
}
/* Peso dos números — fim */
/* ==========================================================================
HOMEPAGE — as quatro caixas de áreas (.area-anim)
Dois problemas do cliente, com a mesma origem.
Os botões fugiam uns para cima: entre o texto e o botão há um divider de
altura fixa (150px), por isso a posição do botão dependia só do comprimento
do texto acima dele. O do "Digital", que tem menos uma linha, ficava 74px
acima do fundo enquanto os outros ficavam a 33px.
Não se resolve com margens: o que era preciso era o divider deixar de ter
altura fixa e passar a ser o espaço que sobra. Com a wrapper em coluna
flex e o divider a crescer, o botão encosta sempre ao fundo, tenha o texto
as linhas que tiver. Medido depois: 25px do fundo nas quatro.
O título subiu de 33px para 48px do topo, também nas quatro.
As colunas já vinham todas com a mesma altura (a linha tem
vc_row-o-equal-height), o que é o que faz isto funcionar — sem isso, cada
caixa acabaria onde o seu conteúdo acaba e não havia fundo comum.
========================================================================== */
.area-anim > .vc_column-inner {
padding-top: 48px !important;
}
.area-anim > .vc_column-inner > .wpb_wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
/* O divider deixa de ser uma altura fixa e passa a ser o elástico da caixa.
O min-height evita que desapareça de todo nas caixas de texto mais longo. */
.area-anim > .vc_column-inner > .wpb_wrapper > .divider-wrap {
flex: 1 1 auto;
height: auto !important;
min-height: 24px;
}
.area-anim > .vc_column-inner > .wpb_wrapper > .wpb_raw_code {
flex: 0 0 auto;
}
/* Caixas de áreas — fim */
/* ==========================================================================
EXPERTISE — etiquetas dos cartões (.different-business)
Estavam a 22px na UntitledSans. Passam para 16px em Maitree, como o resto
dos antetítulos e etiquetas do site.
A altura vinha do line-height de 38px, não do padding: 38 + 12 de padding
+ 2 de borda davam os 52px. Baixar só o padding não chegava — daí o
line-height estar aqui também. Com estes três valores a etiqueta fica a
36px, que é a medida do Figma.
Não mexi na borda, no fundo nem no blur: o que lá está já corresponde ao
Figma (raio 25.987, borda #CCC, o mesmo gradiente e o mesmo desfoque).
========================================================================== */
.different-business .span-button {
font-family: "Maitree Regular", "Maitree", Georgia, serif !important;
font-size: 16px !important;
line-height: 1.35 !important;
padding: 6px 16px !important;
}
/* Título do cartão: tamanho que acompanha a largura.
Estava fixo em 56px. "Transformation" é uma palavra só e comprida, e
abaixo de ~1500px deixava de caber na coluna. Como não tem espaços, não
parte — saía por fora do cartão em vez de passar para a linha seguinte.
O 2.95vw é a conta que faz a palavra mais comprida caber sempre: à volta
de 7 pixéis de largura por cada pixel de tamanho de letra, dentro de uma
coluna que é pouco mais de 22% do ecrã. Transbordo do "Transformation"
antes e depois (negativo = cabe, com folga):
1000px +119 -> -17
1200px +73 -> -21
1370px +92 -> -24
Acima de ~1900px o clamp trava nos 56px, que é o tamanho de origem: nos
ecrãs grandes nada muda. Em telemóvel as colunas empilham e sobra
largura, por isso o mínimo de 26px nunca chega a fazer falta.
========================================================================== */
.different-business h3 {
font-size: clamp(26px, 2.95vw, 56px) !important;
}
/* Etiquetas do Expertise — fim */
/* ==========================================================================
ABOUT — Republica x Staff Global (.staff-rep)
O texto começava exactamente no pixel onde a imagem acaba: a coluna da
direita não tinha padding nenhum, por isso a primeira letra encostava ao
limite da foto e a linha estendia-se até aos 953px.
A maquete tem ar de cada lado — cerca de 6% da largura entre a imagem e o
texto, e 4,6% até à margem direita. É isso que estas duas medidas fazem.
A 1920 dá 114px de folga à esquerda e 110px à direita, com a linha a
descer dos 953px para 743px.
O corpo de texto desce de 26px para 22px, como pedido. A conta
"0.52vw + 12px" faz o tamanho acompanhar o ecrã de forma suave em vez de
dar saltos: 1920 → 22px, 1440 → 19,5px, 1280 → 18,7px, nunca abaixo de 18.
(Esta secção está escondida em telemóvel — tem hide-mobile.)
========================================================================== */
.staff-rep .wpb_column + .wpb_column > .vc_column-inner {
padding-left: 6vw !important;
padding-right: 5vw !important;
}
.staff-rep .wpb_column + .wpb_column .wpb_text_column p {
font-size: clamp(18px, 0.52vw + 12px, 22px) !important;
line-height: 1.5 !important;
}
/* Staff Global — fim */
/* ==========================================================================
GLOBAL APPROACH — logos centrados nas caixas cinzentas
A caixa é um bloco Raw HTML (.wpb_raw_code) em display:flex, mas sem
alinhamento definido — o conteúdo encostava ao canto superior esquerdo.
Horizontalmente até parecia centrado nos ecrãs largos por acaso (o logo
enchia a caixa), verticalmente nunca esteve.
Havia ainda um margin-bottom de 15px que o tema mete em todas as imagens.
Mesmo com o flex a centrar, esse espaço fantasma contava como parte do
conteúdo e empurrava o logo para cima — por isso o :has() sozinho não
chegava. Medido antes e depois (topo/baixo, a 1920):
E3 8/30 -> 19/19
Staff Global 17/39 -> 28/28
Ver clientes 35/35 -> 35/35
Indeed 17/39 -> 28/28
O :has() limita a regra às caixas que têm mesmo um logo destes — os
outros blocos Raw HTML do site ficam como estão.
========================================================================== */
.wpb_raw_code:has(.image-wrapper-approach) {
justify-content: center !important;
align-items: center !important;
}
.image-wrapper-approach img {
display: block;
margin: 0 !important;
}
/* O "See international clients" ocupa o lugar de um logo, mas estava a 28px
— maior do que o texto do próprio cartão, que é 22px. Passa a acompanhar
o texto, para se ler como um link e não como um segundo título.
NOTA SOBRE OS LOGOS AO LADO: são PNG e estão a ser mostrados ao tamanho
exacto do ficheiro (194x66, 245x49, 183x49), ou seja, não há nada no CSS
a esticá-los. Se parecerem desfocados é em ecrãs de alta densidade, onde
fariam falta ficheiros com o dobro da largura: 388, 490 e 366px. Isso só
se resolve reexportando as imagens — não há CSS que o faça. */
.image-wrapper-approach .approach-link {
font-size: 22px;
line-height: 1.45;
}
/* Global Approach logos — fim */
/* ==========================================================================
GLOBAL APPROACH — tira de fotografias (.image-row)
As quatro colunas estavam coladas umas às outras: 476px cada, sem padding
nenhum, a começar exactamente onde a anterior acabava.
O vão é feito com padding no interior da coluna e não com "gap" no flex.
As colunas do WPBakery têm largura fixa (25% cada, que dá 100%) — pôr gap
somava-se a isso e a última passava a transbordar para fora do ecrã.
O --foto-gap é o único valor a mexer se quiseres mais ou menos ar; metade
vai para cada lado, por isso o vão entre duas fotos é o valor inteiro.
========================================================================== */
.image-row {
--foto-gap: 16px;
}
/* Quando as colunas passam para duas ou mais filas, este é o vão vertical.
row-gap não afecta a largura, por isso aqui não há risco de transbordo. */
.image-row > .row_col_wrap_12 {
row-gap: var(--foto-gap);
}
.image-row > .row_col_wrap_12 > .wpb_column > .vc_column-inner {
padding-left: calc(var(--foto-gap) / 2) !important;
padding-right: calc(var(--foto-gap) / 2) !important;
}
/* Todas as fotografias com o mesmo tamanho.
Os ficheiros foram exportados com a mesma altura mas larguras diferentes
(465, 472, 473 e 473 px). Enquanto coubessem à largura natural ninguém
dava por nada, mas a partir do momento em que a coluna fica mais estreita
do que a imagem, cada uma encolhe na sua proporção e as alturas separam-se.
Como estão alinhadas pelo topo, a primeira passava a sobrar por baixo:
a 1280 356 / 350 / 350 / 350 -> 350 / 350 / 350 / 350
a 1920 518 / 509 / 509 / 509 -> 509 / 509 / 509 / 509
O aspect-ratio fixa a proporção de todas e o object-fit: cover recorta o
excesso em vez de deformar. A proporção escolhida é a das três iguais, por
isso só a primeira é aparada, e em menos de 2%.
NOTA: por causa disto as pontas deixaram de poder ir encostadas ao ecrã.
Sem padding, as colunas das pontas ficavam 8px mais largas do que as do
meio — e voltavam a ter alturas diferentes. Agora todas levam o mesmo
padding e sobra um resto de 8px de cada lado, que em fundo preto não se vê.
========================================================================== */
.image-row .img-with-aniamtion-wrap img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 473 / 523;
object-fit: cover !important;
margin: 0 !important;
}
/* Tira de fotografias — fim */
/* ==========================================================================
GLOBAL APPROACH — grelha de logos de clientes (.logo-row)
Cada linha é uma coluna do WPBakery em modo horizontal, já com 10px de
espaçamento. Só faltava tirar às células a largura do conteúdo: com
flex: 0 1 auto ficavam do tamanho de cada imagem em vez de repartirem
a linha em sete partes iguais.
ATENÇÃO A QUEM MEXER AQUI: os 42 SVGs foram exportados todos com a
mesma medida, 234x92, e já trazem lá dentro a caixa e o espaçamento à
volta do logo. Não é preciso — nem se deve — impor altura, recorte ou
object-fit: basta deixá-los ocupar a célula. Cheguei a pôr uma altura
fixa de 52px e o efeito foi o contrário do pretendido, porque o
object-fit encolhia a imagem inteira (caixa incluída) para caber
nessa altura: os logos passavam de 236x93 para 132x52, perdidos no
meio da célula.
Como estão à largura da célula, encolhem sozinhos em ecrãs estreitos
sem precisarem de regra nenhuma por breakpoint.
========================================================================== */
.logo-row .wpb_wrapper > .img-with-aniamtion-wrap {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.logo-row .img-with-aniamtion-wrap img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
}
/* Grelha de logos — fim */
/* ==========================================================================
ARTIGOS — fundo branco, container estreito e pill da categoria em vidro
Tudo aqui é .single.single-post: só os posts, nunca as páginas.
NOTA SOBRE OS #ajax-content-wrap: não são enfeite. O Salient tem regras
com ID para a largura da coluna e para o fundo da pill, e um ID ganha a
qualquer número de classes, mesmo com !important do outro lado. Sem o ID
no meu selector, estas duas regras não pegavam — confirmei.
========================================================================== */
/* Fundo branco e texto escuro.
Deliberadamente no .container-wrap e não no body: o rodapé fica fora dele,
não tem fundo próprio e o texto é branco. Pintar o body de branco fazia
desaparecer o rodapé inteiro. */
.single.single-post .container-wrap {
background-color: #fff !important;
color: #111 !important;
}
/* A cor acima desce por herança para o texto corrido, mas há elementos que o
tema pinta de branco por sua conta. Este artigo só tem parágrafos, por isso
não dava para confirmar nos outros — fica a rede, para não haver um título
branco em fundo branco num artigo qualquer. */
.single.single-post .container-wrap h1,
.single.single-post .container-wrap h2,
.single.single-post .container-wrap h3,
.single.single-post .container-wrap h4,
.single.single-post .container-wrap h5,
.single.single-post .container-wrap h6,
.single.single-post .container-wrap li,
.single.single-post .container-wrap strong,
.single.single-post .container-wrap blockquote {
color: #111;
}
/* Coluna de leitura a 960px, centrada. Estava a 1715px — linhas de texto
demasiado longas para se ler com conforto. */
.single.single-post #ajax-content-wrap .post-area {
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
/* Título do artigo como foi escrito, sem maiúsculas forçadas pelo tema. */
.single.single-post h1.entry-title {
text-transform: initial !important;
}
/* Pill da categoria.
O selector aponta ao link por href e não por classe: a classe do elemento é
o slug da categoria (.brand-strategy, etc.), por isso mudaria de artigo
para artigo. Assim serve para todas.
O background-color: transparent é obrigatório — por baixo do gradiente
estava o verde do tema, que tapava o efeito de vidro por completo. */
.single.single-post #ajax-content-wrap .section-title .inner-wrap > a[href*="/category/"] {
background-color: transparent !important;
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(208, 208, 208, 0.2) 100%
) !important;
border: 0.65px solid #797979 !important;
border-radius: 25.987px !important;
-webkit-backdrop-filter: blur(6.4966816902160645px) !important;
backdrop-filter: blur(6.4966816902160645px) !important;
}
/* Artigos — fim */
.faq .toggle>.toggle-title a,.faq .toggle p{
color: #fff !important;
}
.img-right .img-with-aniamtion-wrap.right {
display: flex;
justify-content: end;
}
/* =========================================================
OUR CULTURE — secção do carousel (.column-caroussel)
---------------------------------------------------------
Maquete: coluna de texto à esquerda, carousel à direita a
sangrar para fora do ecrã, com o slide seguinte meio à vista.
Como funciona: o carousel ocupa só parte da coluna
(--caroussel-largura) e todos os overflow do caminho passam a
visible, para os slides a seguir se verem fora da caixa. Quem
corta é o overflow-x do , nas duas posições, e a regra ganha
na mesma. */
.titulo-4-areas,
.titulo-4-areas p,
.titulo-4-areas span,
.titulo-4-areas h1,
.titulo-4-areas h2,
.titulo-4-areas h3,
.titulo-4-areas h4,
.titulo-4-areas h5,
.titulo-4-areas h6 {
font-size: 40px;
font-family: "Maitree Regular", "Maitree", Georgia, serif;
}
/* Título do Global Approach. Mesma lógica da .titulo-4-areas: serve posta no
"Extra class name" do bloco de texto ou directamente no elemento. */
.titulo-global-approach,
.titulo-global-approach p,
.titulo-global-approach span,
.titulo-global-approach h1,
.titulo-global-approach h2,
.titulo-global-approach h3,
.titulo-global-approach h4,
.titulo-global-approach h5,
.titulo-global-approach h6 {
font-size: 32px;
font-family: "Maitree Regular", "Maitree", Georgia, serif;
}
/* Respiro lateral dos botões em cápsula.
Num botão de cantos redondos, o texto tem de começar depois de a curva
acabar. A curva de uma cápsula acaba a meio da altura do botão, por isso o
padding lateral tem de ser pelo menos essa medida: com 56px de altura, a
curva acaba aos 28px. Com os 10px que estavam aqui, o texto arrancava aos
11px — a meio da curva, colado à margem.
Se mudares a altura do botão, acerta este valor para metade dela. */
:root {
--btn-respiro: 28px;
}
.link--arrowed {
display: inline-block;
line-height: 2rem;
padding: 10px var(--btn-respiro);
border-radius: 50px;
border: 1px solid #fff;
}
.link--arrowed.black {
border: 1px solid #000;
}
/* Mesma conta para o botão da pesquisa: 42px de altura, curva a acabar aos
21px, e tinha 15px de padding.
O selector leva o #search-outer à frente porque o tema estiliza este botão
com mais especificidade do que ".search-box__button" sozinho — testei, e só
com um id à frente é que a regra ganha. Evita ter de usar !important. */
#search-outer .search-box__button {
padding-left: 21px;
padding-right: 21px;
}
.link--arrowed .arrow-icon {
position: relative;
top: -1px;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition:
transform 0.3s ease,
-webkit-transform 0.3s ease;
vertical-align: middle;
}
.link--arrowed .arrow-icon--circle {
transition: stroke-dashoffset 0.3s ease;
stroke-dasharray: 95;
stroke-dashoffset: 95;
}
/* .link--arrowed:hover .arrow-icon:not(.link--arrowed.down:hover .arrow-icon), .link--arrowed:hover .arrow-icon:not(.link.reverse svg) {
transform: translate3d(5px, 0, 0);
} */
.link--arrowed:hover .arrow-icon--circle {
stroke-dashoffset: 0;
}
.link.reverse svg {
transform: rotate(180deg);
}
.reverse {
transform: rotate(180deg);
}
.link.down svg {
transform: rotate(90deg);
}
.green-arrow-cta a {
display: flex;
gap: 25px;
align-items: center;
}
/* --------------------------- fim: 05. CTA --------------------------- */
/* ==========================================================================
06. MILESTONES E DIVERSOS
contadores, bordas e helpers soltos
========================================================================== */
body .wpb_text_column {
margin-bottom: 0 !important;
}
.border-line .vc_col-sm-8 {
border-right: 1px solid #fff;
}
.border-line > .row-bg-wrap {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.nectar-milestone .number,
.nectar-milestone .subject {
float: left;
}
.nectar-milestone.animated-in:not(
.postid-3019 .tetleyCountOrigin .nectar-milestone.animated-in
) {
clear: both;
display: flex;
align-items: end;
justify-content: space-between;
}
.nectar-milestone.animated-in:not(
.postid-3019 .tetleyCountOrigin .nectar-milestone.animated-in
) {
clear: both;
display: flex;
align-items: end;
justify-content: space-between;
}
.justify-center .nectar-milestone.animated-in {
justify-content: center;
}
.milestone-vertical .nectar-milestone.animated-in {
justify-content: flex-start !important;
}
.milestone-vertical .nectar-milestone.animated-in {
clear: both;
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
flex-direction: column !important;
text-align: left !important;
}
.animated-border-elipsis div {
position: relative;
display: flex;
align-items: center;
}
.ltr {
width: 90%;
display: block;
background: #fff;
height: 1px;
position: absolute;
right: 0;
}
/* ==========================================================================
07. POSTS HOMEPAGE
listagem de posts na home
========================================================================== */
.blog-recent[data-style*="classic_enhanced"] .inner-wrap,
.blog-recent[data-style*="classic_enhanced"] .article-content-wrap {
background-color: transparent;
padding: 0;
}
.blog-recent[data-style*="classic_enhanced"][data-color-scheme="light"]
h3.title:not(
.recent-posts-artigos
.blog-recent[data-style*="classic_enhanced"][data-color-scheme="light"]
h3.title
) {
color: #fff !important;
font-size: 20px;
line-height: 30px;
}
.attachment-portfolio-thumb.size-portfolio-thumb.wp-post-image {
width: 100%;
}
.blog-recent[data-style*="classic_enhanced"].columns-3 .span_4 {
border-radius: 8px;
border: 0.9px solid #525252;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(208, 208, 208, 0.1) 100%
);
backdrop-filter: blur(9.002776145935059px);
-webkit-backdrop-filter: blur(9.002776145935059px);
padding: 1%;
}
.homepage-posts .meta-category {
display: none;
}
.rotating_txt {
display: inline-flex !important;
padding-bottom: 0px !important;
}
/* --------------------------- fim: 07. POSTS HOMEPAGE --------------------------- */
/* ==========================================================================
08. ABOUT
blocos da pagina About
========================================================================== */
.bg-no-repeat .column-image-bg {
background-repeat: no-repeat !important;
}
.bg-cover .column-image-bg {
background-size: cover !important;
}
.get-in-touch-GS h1 img {
align-self: end !important;
}
.get-in-touch-GS
.nectar-scrolling-text.has-custom-divider
.nectar-scrolling-text-inner__text-chunk
> * {
gap: 50px !important;
}
.get-in-touch-GS .nectar-scrolling-text-inner__text-chunk h1 img {
padding-left: 2vw !important;
}
/* --------------------------- fim: 08. ABOUT --------------------------- */
/* ==========================================================================
09. FOOTER
rodape
========================================================================== */
.social-icons .img-with-aniamtion-wrap {
float: left;
margin-right: 2px;
}
.before-footer {
font-size: 12px;
line-height: 22px;
}
.footer-partners .img-with-aniamtion-wrap {
max-width: 25% !important;
float: left;
}
/* --------------------------- fim: 09. FOOTER --------------------------- */
/* ==========================================================================
10. TOGGLES
acordeoes / toggles
========================================================================== */
/* h3.toggle-title a {
margin-bottom: 0;
font-size: 36px !important;
} */
div[data-style="minimal"] .toggle.open > .toggle-title a {
color: #fff !important;
}
div[data-style="minimal"] .toggle:hover > .toggle-title a:hover {
color: #fff !important;
}
/* --------------------------- fim: 10. TOGGLES --------------------------- */
/* ==========================================================================
11. SHORTCODE ARTIGOS
shortcode de artigos e cartoes custom
========================================================================== */
.custom-post span.link_text.hover a {
color: #1a1b1f;
}
/* .custom-post span.link_text.hover {
position: absolute;
bottom: 25px;
color: #1a1b1f !important;
} */
.custom-post {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(208, 208, 208, 0.1) 100%
);
border-radius: 10px;
padding: 15px;
width: 100%;
height: 100%;
}
.custom-post.projetos {
background: transparent !important;
padding: 0px;
}
.custom-post img {
width: 100%;
height: auto;
}
.custom-post .meta-category a {
color: #383838;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.custom-post h3.post-heading a {
color: #383838;
font-family: "UntitledSans-Regular";
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 16px;
}
.custom-post .meta-excerpt {
color: #fff;
font-size: 15px;
font-style: normal;
line-height: 20px;
font-family: "UntitledSans-Regular";
}
.custom-post .meta-excerpt-projetos {
color: #000;
font-size: 20px;
font-style: normal;
line-height: 20px;
font-family: "UntitledSans-Regular";
}
.custom-post .link_text {
color: #1a1b1f;
font-family: "UntitledSans-Regular";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 29px;
}
.dark .link_text.hover {
color: #333;
}
.custom-post .background-image-post {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
height: 350px;
width: 100%;
border-radius: 10px;
}
.custom-post .background-image-post.artigos {
height: 150px !important;
position: relative !important;
background-size: cover !important;
}
span.cat_post {
position: absolute;
top: 50px;
left: 25px;
color: #000 !important;
}
.custom-post .background-image-post.projetos {
height: 500px;
position: relative;
}
.projetos-cat-wrapper {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
-moz-transition: padding 0.5s;
-o-transition: padding 0.5s;
position: absolute;
top: 0;
gap: 15px;
padding: 20px;
}
.custom-post .cat-span {
padding: 5px 15px !important;
text-align: center !important;
border-radius: 25.987px !important;
border: 0.65px solid #848484 !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(208, 208, 208, 0.3) 100%
) !important;
backdrop-filter: blur(6.4966816902160645px) !important;
-webkit-backdrop-filter: blur(6.4966816902160645px);
font-size: 14px;
line-height: 26px;
font-family: Maitree Regular;
}
.custom-post .background-image-post.team,
.custom-post .background-image-post.projetos {
background-size: cover;
background-position: top center;
}
.custom-post .nectar-post-grid-item__excerpt-wrap.item-meta-extra {
margin-top: 10px;
margin-bottom: 25px;
}
.custom-post.projetos .nectar-post-grid-item__excerpt-wrap.item-meta-extra {
margin-top: 0px;
}
.custom-post .content {
padding: 15px;
padding-bottom: 25px;
}
.carousel-item img {
width: 100%;
height: auto;
border-radius: 5px;
}
#loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.spinner {
border: 8px solid #f3f3f3;
border-top: 8px solid #04e762;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* ==========================================================================
12. ALL POSTS GRID
grelha da listagem completa de posts
========================================================================== */
.all-posts-row {
display: flex;
gap: 10px;
margin-bottom: 50px;
}
.all-posts-row.projetos {
gap: 50px;
}
.all-posts-col {
width: 33.33%;
min-width: 33.33%;
}
.all-posts-col.team {
width: 25%;
min-width: 25%;
}
.all-posts-col.projetos {
width: 49%;
min-width: 49%;
}
.all-posts .custom-row {
display: flex;
}
.all-posts .custom-col {
width: 33.3%;
}
.custom-text-right h5,
.custom-text-left h5 {
cursor: pointer;
}
.custom-text-right h5:hover,
.custom-text-left h5:hover {
color: #04e762;
}
.custom-text-right {
text-align: right;
}
.custom-text-left {
text-align: left;
}
.custom-col.custom-text-left img,
.custom-col.custom-text-right img {
margin-bottom: 0 !important;
}
.all-posts-navigation {
margin-top: 50px;
}
.all-posts-navigation-numbers {
text-align: center;
margin: auto;
width: 100%;
margin-left: 0;
}
.all-posts-navigation-numbers li {
display: inline;
text-align: center;
padding: 5px 15px;
cursor: pointer;
}
.all-posts-navigation-numbers li:hover {
color: #04e762;
}
.all-posts-navigation-numbers .custom-active {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(208, 208, 208, 0.1) 100%
);
border-radius: 5px;
color: #fff;
}
.all-posts-navigation-numbers li.custom-active:hover {
color: #04e762;
}
/* ==========================================================================
13. ALL POSTS FILTERS
filtros da listagem de posts
========================================================================== */
#custom-filter {
margin-top: 5vh;
margin-bottom: 5vh;
}
#custom-filter select {
width: 25%;
margin-right: 25px;
border-radius: 40px;
border: 1px solid #fff;
color: #999;
font-size: 14px !important;
font-style: normal;
background: transparent;
padding: 2px 25px;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("/wp-content/uploads/2024/04/arrow_down.svg");
background-repeat: no-repeat;
background-position-x: 90%;
background-position-y: 50%;
cursor: pointer;
}
#custom-filter select.projetos-select {
border: 1px solid #000;
color: #000;
background-image: url("/wp-content/uploads/2024/04/down_arrow_black.svg");
}
#custom-filter select option {
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 29px;
cursor: pointer;
}
body a.titulo-custom {
color: #fff !important;
}
body a.titulo-custom-projetos {
color: #000 !important;
}
#custom-posts-container-highlights h4,
#custom-posts-container h4,
#custom-posts-categoria h4,
#custom-posts-ultimas h4 {
margin-bottom: 50px;
}
.nectar-underline h4 {
background-image: none !important;
}
#custom-filter .meta-data-custom {
margin-top: 3%;
margin-bottom: 3%;
}
.data-custom {
font-size: 15px;
font-family: "UntitledSans-Regular";
}
.filterWrapper select {
width: 100% !important;
}
#custom-filter {
display: grid;
grid-template-columns: auto auto auto 1fr;
gap: 10px;
width: 100%;
align-items: center;
}
.filterWrapper:nth-child(4) {
justify-self: end;
width: 30%;
}
span.all-button {
padding: 3px 25px;
background-color: #fff;
border-radius: 40px;
color: #000 !important;
cursor: pointer;
margin-top: 2px;
font-size: 16px;
height: 100%;
display: block;
width: 95%;
margin-top: 0;
font-size: 14px;
}
span.all-button.projetos-button {
background-color: #000;
color: #fff !important;
border: 1px solid #000;
display: block;
width: 95%;
}
input#search-custom {
background: transparent;
border: none;
border-bottom: 1px solid #fff;
color: #fff;
background-image: url("/wp-content/uploads/2024/04/Magnifier.svg");
background-repeat: no-repeat;
background-position-x: 90%;
background-position-y: 50%;
padding: 5%;
width: 100%;
}
/* ==========================================================================
14. ARTIGOS
artigo single e media destacada
========================================================================== */
body[data-ext-responsive="true"].single-post
.container-wrap.no-sidebar
div.post-area {
max-width: 100% !important;
width: 100% !important;
}
body .recent-posts-artigos .inner-wrap {
box-shadow: none !important;
border-bottom: 1px solid #04e762 !important;
border-radius: 0px !important;
display: flex !important;
gap: 3%;
}
.artigos-border-bottom {
border-bottom: 1px solid #04e762 !important;
}
.recent-posts-artigos
.blog-recent[data-style*="classic_enhanced"][data-color-scheme="light"]
h3.title {
font-size: 16px;
line-height: 26px;
}
.recent-posts-artigos .excerpt,
.recent-posts-artigos .meta-category {
display: none;
}
.recent-posts-artigos .wpb_wrapper > div,
.recent-posts-artigos .blog-recent .col {
margin-bottom: 20px !important;
}
.recent-posts-artigos
img.attachment-portfolio-thumb.size-portfolio-thumb.wp-post-image {
width: 150px;
}
/* .single-post .featured-media-under-header,
.comments-section,
.single-service .featured-media-under-header {
display: none;
} */
.corpo-artigo .vc_column-inner p {
text-align: justify;
}
.read-all {
font-size: 16px !important;
color: #000 !important;
text-decoration: underline !important;
}
.pointer {
cursor: pointer;
}
.related-custom.custom-post {
background: linear-gradient(
180deg,
rgba(225, 225, 225, 0.1) 0%,
rgba(125, 125, 125, 0.1) 100%
) !important;
border: 1px solid #d9d9d9;
backdrop-filter: blur(9.002776145935059px);
-webkit-backdrop-filter: blur(9.002776145935059px);
}
.related-custom.custom-post * {
color: #000 !important;
}
.custom-related.all-posts-row {
justify-content: space-between;
}
.custom-related.all-posts-col {
width: 30% !important;
min-width: 30% !important;
max-width: 30% !important;
}
/* ==========================================================================
15. TIMELINE
linha temporal
========================================================================== */
.tabbed[data-style*="minimal"] > ul li a::after {
background-color: #04e762 !important;
}
.tabbed[data-style="minimal_flexible"] .wpb_tabs_nav > li a::after {
top: 0 !important;
}
.tabbed[data-style="minimal_flexible"] .wpb_tabs_nav > li a {
color: #5d5d5d !important;
}
.tabbed[data-style="minimal_flexible"] .wpb_tabs_nav > li a.active-tab {
color: #04e762 !important;
}
.light .tabbed[data-style="minimal_flexible"] .wpb_tabs_nav > li {
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
}
/* --------------------------- fim: 15. TIMELINE --------------------------- */
/* ==========================================================================
16. FORMS
formularios e campos
========================================================================== */
.fluentform .ff-el-form-control::placeholder,
.ff-default .ff-el-form-control {
color: #fff;
opacity: 1;
font-family: "UntitledSans-Regular" !important;
}
.ff-default .ff-el-form-control:focus {
background-color: #000 !important;
}
.ff-el-form-check-label.ff_tc_label {
font-size: 16px;
color: #fff;
opacity: 1;
font-family: "UntitledSans-Regular" !important;
}
.fluentform .ff-el-group,
.fluentform .ff-el-form-check {
margin-bottom: 0px;
}
.fluentform .ff-el-form-control {
margin-bottom: 20px;
}
.ff-el-group.ff-el-form-left.UploadZoneVagas {
margin-top: 25px;
}
.ff-uploaded-list {
display: none;
}
@media (min-width: 481px) {
.fluentform .ff-el-form-left .ff-el-input--content,
.fluentform .ff-el-form-right .ff-el-input--content {
margin-left: 0px;
}
}
.ff-el-form-control {
border-color: #fff !important;
}
.fluentform .ff_file_upload_holder {
font-size: 16px !important;
}
.fluentform .ff_upload_btn.ff-btn {
background: #04e762 !important;
color: #000 !important;
padding: 15px;
height: 50px;
border-right: 1px solid #fff !important;
border-top: 1px solid #fff !important;
border-bottom: 1px solid #fff !important;
border-end-end-radius: 10px !important;
border-start-end-radius: 10px !important;
min-height: 45px;
max-height: 45px;
}
.uploadStyle .ff-el-input--label.asterisk-right {
border-bottom: 1px solid white;
border-top: 1px solid white;
border-left: 1px solid white;
border-start-start-radius: 10px;
border-end-start-radius: 10px;
padding: 3px 15px 1px 0;
padding-left: 15px;
min-height: 45px;
max-height: 45px;
}
.ff-el-group.ff-custom_html.label-choose p {
margin-bottom: 15px;
font-size: 20px !important;
}
.fluentform * {
font-size: 16px !important;
color: #fff;
}
.fluentform .mb {
margin-bottom: 50px;
}
.uploadStyle {
margin-top: 25px !important;
}
/* --------------------------- fim: 16. FORMS --------------------------- */
/* ==========================================================================
17. TECH E PARTNERS
logos de tecnologia e parceiros
========================================================================== */
.tech-partners
.nectar-scrolling-tabs[data-navigation-width="wide"]
.scrolling-tab-nav {
width: 50% !important;
min-width: 275px !important;
text-align: center !important;
}
.tech-partners .scrolling-tab-nav-total.nectar-inherit-label {
display: none;
}
#ajax-content-wrap .navigation_func_active_link_only .scrolling-tab-nav ul li {
width: 100%;
}
.tech-partners .menu-content span {
display: inline-block;
transform: translateY(100%);
transition: 1s ease-in-out;
text-align: center;
}
.btmUp_ani {
animation: btmUp 3s ease-in-out 1;
animation-fill-mode: forwards;
}
@keyframes btmUp {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
/* --------------------------- fim: 17. TECH E PARTNERS --------------------------- */
/* ==========================================================================
18. TEAM
cartoes de equipa
========================================================================== */
span.team-dot {
color: #04e762;
}
#leadership {
-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(1.5);
}
.meta-category.meta-data-custom {
line-height: 15px !important;
}
/* --------------------------- fim: 18. TEAM --------------------------- */
/* ==========================================================================
19. SERVICES
listagem de servicos
========================================================================== */
.group-service-slide .vc_col-sm-3:hover .wpb_wrapper > h4 {
transition: all 0.5s ease;
}
.group-service-slide .vc_col-sm-3:hover .wpb_wrapper > h4 {
color: #04e762;
}
.cell.is-selected .vc_col-sm-3:not(.ignore-border) {
border-bottom: solid 0px transparent !important;
transition: border-width 0.3s linear;
}
.cell.is-selected .vc_col-sm-3:not(.ignore-border):hover {
border-bottom: solid 5px #04e762 !important;
}
.group-service-slide .img-with-animation.skip-lazy.next-slider.pointer {
transition: all 0.5s ease;
}
.group-service-slide .img-with-animation.skip-lazy.next-slider.pointer:hover {
opacity: 0.6 !important;
}
.border {
display: block;
position: absolute;
height: 3px;
width: 100%;
top: 100%;
background: #2bcf67;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: 0% 50%;
}
input:focus + .border,
.expand:focus .border {
transform: scaleX(1);
}
.single-service .has-global-section {
margin-top: 10%;
}
.single-service .has-global-section.portfolioCheck {
margin-top: 0% !important;
}
.single-service .bottom_padding_desktop_5pct h4:first-of-type {
text-transform: uppercase !important;
}
.arrow_services .vc_col-sm-1 {
width: auto;
margin-right: 15px !important;
}
.services-img img {
display: none !important;
}
.quote-icon {
position: relative !important;
left: -50px;
}
.cell.is-selected .vc_col-sm-3:not(.ignore-border) {
border-right: 1px solid white;
}
.bottom-0 {
position: absolute;
bottom: 0;
}
.flex-column-services .wpb_wrapper {
justify-content: space-between;
display: flex;
flex-direction: column;
}
.group-service-slide h4 {
font-family: UntitledSans-Regular;
font-size: 40px;
}
.group-service-slide h4 {
font-family: UntitledSans-Regular !important;
}
@media only screen and (min-width: 1300px) {
.group-service-slide h4 {
font-size: 40px !important;
line-height: 50px !important;
}
}
/* --------------------------- fim: 19. SERVICES --------------------------- */
/* ==========================================================================
20. SERVICES SINGLE
pagina individual de servico
========================================================================== */
.bg-services-single .column-bg-overlay {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(208, 208, 208, 0.1) 100%
) !important;
backdrop-filter: blur(9.002776145935059px) !important;
-webkit-backdrop-filter: blur(9.002776145935059px);
}
/* --------------------------- fim: 20. SERVICES SINGLE --------------------------- */
/* ==========================================================================
21. MEGA MENU
navegacao principal (Max Mega Menu) + dropdowns
========================================================================== */
#mega-menu-wrap-top_nav
#mega-menu-top_nav
> li.mega-menu-megamenu
> ul.mega-sub-menu {
position: fixed;
width: 90%;
margin: auto;
left: 0;
right: 0;
}
.mega-sub-menu.tracked-pos ul li ul li:nth-of-type(2) a {
font-size: 14px !important;
line-height: 10px !important;
}
header#top .sf-menu li ul li a:hover {
opacity: 0.7;
}
.dark-slide .mega-menu-item a {
color: #000 !important;
}
body:not([data-header-format="left-header"]) #header-outer .sf-menu li ul {
background-color: #04e762 !important;
}
input[type="checkbox"] {
accent-color: #04e762;
}
body #top nav .sf-menu ul li.sfHover > a,
header#top .sf-menu li ul li a:hover {
background-color: transparent !important;
}
header#top .sf-menu li ul li a {
color: #000 !important;
font-weight: normal !important;
text-transform: none !important;
}
header#top .sf-menu li ul li a:hover {
color: #000 !important;
}
header#top
.mega-sub-menu
.mega-menu-item-has-children:hover
a.mega-menu-link.sf-with-ul {
color: #333 !important;
}
header#top .sf-menu li ul li a.link {
float: right;
}
.search-results
#mega-menu-wrap-top_nav
#mega-menu-top_nav
> li.mega-menu-item
> a.mega-menu-link {
color: #000 !important;
}
.search-results #header-space {
background-color: #f4f4f4 !important;
}
body.search-results #header-outer,
body[data-header-color="dark"] #header-outer {
background-color: transparent;
}
.search-results #header-outer[data-box-shadow="large"] {
box-shadow: none !important;
}
@media only screen and (min-width: 1300px) {
#top .container .row {
height: 70px;
}
}
#mega-menu-wrap-top_nav
#mega-menu-top_nav
> li.mega-menu-item
> a.mega-menu-link {
font-size: 18px !important;
}
/* --- Dropdowns do menu (maquete 2026) -------------------------------------
Paineis em vidro/blur iguais ao container da navbar: cantos arredondados,
texto branco, separador por item e verde #04e762 no hover/estado activo. */
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-flyout > ul.mega-sub-menu,
body:not([data-header-format="left-header"]) #header-outer .sf-menu li ul {
width: auto !important;
min-width: 190px !important;
top: 74px !important;
padding: 4px 18px !important;
border-radius: 10px !important;
border: 0.504px solid #f9f9f9 !important;
background: linear-gradient(
178deg,
rgba(223, 223, 223, 0.4) 1.3%,
rgba(179, 179, 179, 0.08) 182.18%
) !important;
background-color: transparent !important;
backdrop-filter: blur(10.079344749450684px) !important;
-webkit-backdrop-filter: blur(10.079344749450684px) !important;
box-shadow: none !important;
overflow: hidden !important;
}
#mega-menu-wrap-top_nav
#mega-menu-top_nav
> li.mega-menu-flyout
> ul.mega-sub-menu
> li.mega-menu-item {
width: 100% !important;
}
/* Itens do dropdown: texto branco + linha separadora */
#mega-menu-wrap-top_nav
#mega-menu-top_nav
> li.mega-menu-flyout
> ul.mega-sub-menu
> li.mega-menu-item
> a.mega-menu-link,
header#top .sf-menu li ul li a {
color: #fff !important;
font-size: 15px !important;
line-height: 1.2 !important;
padding: 13px 0 !important;
height: auto !important;
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
white-space: nowrap !important;
}
/* O ultimo item nao leva separador */
#mega-menu-wrap-top_nav
#mega-menu-top_nav
> li.mega-menu-flyout
> ul.mega-sub-menu
> li.mega-menu-item:last-child
> a.mega-menu-link {
border-bottom: none !important;
}
#mega-menu-wrap-top_nav
#mega-menu-top_nav
> li.mega-menu-flyout
> ul.mega-sub-menu
> li.mega-menu-item
> a.mega-menu-link:hover,
header#top .sf-menu li ul li a:hover {
color: #04e762 !important;
opacity: 1 !important;
}
/* Item de topo: verde no hover, no dropdown aberto e na pagina activa */
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-current-page-ancestor > a.mega-menu-link {
color: #04e762 !important;
opacity: 1 !important;
}
/* Variante de header claro (Salient/Midnight junta .dark-slide ao #header-outer
quando a seccao por baixo e clara -- ex.: /get-in-touch/ na zona da imagem).
Nesse estado os itens de topo ficam pretos, por isso o dropdown acompanha:
painel em vidro claro (para o texto se ler mesmo quando o painel passa para
fora da seccao clara) e texto preto. O verde do hover mantem-se. */
#header-outer.dark-slide
#mega-menu-wrap-top_nav
#mega-menu-top_nav
> li.mega-menu-flyout
> ul.mega-sub-menu,
#header-outer.dark-slide .sf-menu li ul {
background: linear-gradient(
178deg,
rgba(255, 255, 255, 0.78) 1.3%,
rgba(235, 235, 235, 0.68) 182.18%
) !important;
border: 0.504px solid rgba(0, 0, 0, 0.1) !important;
}
#header-outer.dark-slide
#mega-menu-wrap-top_nav
#mega-menu-top_nav
> li.mega-menu-flyout
> ul.mega-sub-menu
> li.mega-menu-item
> a.mega-menu-link,
#header-outer.dark-slide header#top .sf-menu li ul li a {
color: #000 !important;
border-bottom-color: rgba(0, 0, 0, 0.25) !important;
}
#header-outer.dark-slide
#mega-menu-wrap-top_nav
#mega-menu-top_nav
> li.mega-menu-flyout
> ul.mega-sub-menu
> li.mega-menu-item:last-child
> a.mega-menu-link {
border-bottom: none !important;
}
#header-outer.dark-slide
#mega-menu-wrap-top_nav
#mega-menu-top_nav
> li.mega-menu-flyout
> ul.mega-sub-menu
> li.mega-menu-item
> a.mega-menu-link:hover,
#header-outer.dark-slide header#top .sf-menu li ul li a:hover {
color: #04e762 !important;
}
/* --- fim: Dropdowns do menu ---------------------------------------------- */
/* --------------------------- fim: 21. MEGA MENU --------------------------- */
/* ==========================================================================
22. FLOATING ICON
icone flutuante / botao de ajuda
========================================================================== */
#floatingIcon {
position: fixed;
bottom: 5vh;
right: 40px;
z-index: 999;
border-radius: 40px;
border: 1.5px solid var(--black, #000);
background: var(--green, #04e762);
backdrop-filter: blur(9.002776145935059px);
-webkit-backdrop-filter: blur(9.002776145935059px);
width: 250px;
padding: 5px 45px;
height: auto;
display: flex;
cursor: pointer;
transition: all 0.5s ease;
}
#floatingIconPT {
position: fixed;
bottom: 5vh;
right: 40px;
z-index: 999;
border-radius: 40px;
border: 1.5px solid var(--black, #000);
background: var(--green, #04e762);
backdrop-filter: blur(9.002776145935059px);
-webkit-backdrop-filter: blur(9.002776145935059px);
width: 250px;
padding: 5px 45px;
height: auto;
display: flex;
cursor: pointer;
transition: all 0.5s ease;
}
#floatingIcon:hover {
border-radius: 44.097px;
border: 0.882px solid var(--green, #04e762);
background: linear-gradient(
178deg,
rgba(63, 63, 63, 0.35) 1.3%,
rgba(86, 86, 86, 0.35) 182.18%
);
backdrop-filter: blur(17.63888931274414px);
-webkit-backdrop-filter: blur(17.63888931274414px);
}
#floatingIconPT:hover {
border-radius: 44.097px;
border: 0.882px solid var(--green, #04e762);
background: linear-gradient(
178deg,
rgba(63, 63, 63, 0.35) 1.3%,
rgba(86, 86, 86, 0.35) 182.18%
);
backdrop-filter: blur(17.63888931274414px);
-webkit-backdrop-filter: blur(17.63888931274414px);
}
#floatingIcon:hover p {
color: #fff;
}
#floatingIconPT:hover p {
color: #fff;
}
#floatingIcon p {
font-size: 16px;
color: #000;
padding-bottom: 0 !important;
width: 100%;
text-align: center;
}
#floatingIconPT p {
font-size: 16px;
color: #000;
padding-bottom: 0 !important;
width: 100%;
text-align: center;
}
#floatingIcon img {
transform: rotate(90deg);
}
#floatingIconPT img {
transform: rotate(90deg);
}
#floatingIconContent {
width: 250px;
position: fixed;
bottom: 13vh;
right: 40px;
z-index: 999;
padding: 15px;
display: none;
border-radius: 7.056px;
border: 0.794px solid #525252;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(208, 208, 208, 0.1) 100%
);
backdrop-filter: blur(7.939949035644531px);
-webkit-backdrop-filter: blur(7.939949035644531px);
}
#floatingIconContentPT {
width: 250px;
position: fixed;
bottom: 13vh;
right: 40px;
z-index: 999;
padding: 15px;
display: none;
border-radius: 7.056px;
border: 0.794px solid #525252;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(208, 208, 208, 0.1) 100%
);
backdrop-filter: blur(7.939949035644531px);
-webkit-backdrop-filter: blur(7.939949035644531px);
}
.btFloatingWidget {
border-radius: 44.097px;
border: 0.882px solid var(--green, #04e762);
background: linear-gradient(
178deg,
rgba(63, 63, 63, 0.35) 1.3%,
rgba(86, 86, 86, 0.35) 182.18%
);
backdrop-filter: blur(17.63888931274414px);
-webkit-backdrop-filter: blur(17.63888931274414px);
color: #fff;
font-size: 14px;
padding: 0px 15px;
margin-bottom: 15px;
text-align: center;
}
.btFloatingWidget:hover {
background: #04e762;
backdrop-filter: blur(17.63888931274414px);
-webkit-backdrop-filter: blur(17.63888931274414px);
color: #000;
}
.fade-in {
animation: fadeIn 1s;
opacity: 1;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* --------------------------- fim: 22. FLOATING ICON --------------------------- */
/* ==========================================================================
23. PROJECTS
portfolio e cartoes de projecto
========================================================================== */
/* .all-posts-col.projetos:hover {
opacity: 0.7;
} */
.lerMais {
gap: 15px;
display: flex;
align-items: center;
}
.single-project .row.hentry.featured-media-under-header {
display: none !important;
}
.single-project .cat-heading {
width: 100%;
max-width: 100% !important;
font-size: 16px !important;
font-family: Maitree Regular !important;
}
.nectar-category-grid .nectar-category-grid-link {
pointer-events: none;
}
.single-project .nectar-category-grid {
display: initial;
-webkit-flex-wrap: initial;
flex-wrap: initial;
width: auto;
float: left;
width: 100%;
}
.single-project .nectar-category-grid .nectar-category-grid-item .inner {
height: auto;
max-height: 50px;
display: flex;
align-content: center;
align-self: center;
align-items: center;
}
.single-project
.nectar-category-grid[data-columns="1"]
.nectar-category-grid-item {
padding-bottom: 0;
float: left;
width: auto;
}
.single-project .nectar-category-grid .nectar-category-grid-item .content {
position: initial;
}
.single-project .nectar-category-grid .nectar-category-grid-item .inner {
padding: 15px 25px !important;
text-align: center !important;
border-radius: 25.987px !important;
border: 0.65px solid #848484 !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(208, 208, 208, 0.3) 100%
) !important;
backdrop-filter: blur(6.4966816902160645px) !important;
-webkit-backdrop-filter: blur(6.4966816902160645px);
position: relative !important;
top: auto !important;
left: auto !important;
}
.single-project .nectar-category-grid .nectar-category-grid-item .content {
width: 100% !important;
}
.single-project
.nectar-milestone
.subject:not(.postid-3019 .tetleyCountOrigin .nectar-milestone .subject) {
width: 20% !important;
}
/* --------------------------- fim: 23. PROJECTS --------------------------- */
/* ==========================================================================
24. BLOG
listagem e single do blog
========================================================================== */
.single .fullscreen-header .blog-title,
.single.single-post .fullscreen-header .blog-title {
text-align: left !important;
}
body[data-ext-responsive="true"].single-post.material
#page-header-bg.fullscreen-header
h1 {
margin: 0 !important;
color: #000;
font-family: UntitledSans-Regular;
font-size: 60px;
line-height: 80px;
font-weight: 400;
max-width: 1920px;
}
.single-post #page-header-bg.fullscreen-header .author-section .meta-date {
color: #000;
}
.single-post #page-header-bg .container {
padding: 0 5%;
}
.single-post .section-title.blog-title a {
border: solid 1px #000 !important;
border-radius: 25.987px !important;
border: 0.65px solid #848484 !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(208, 208, 208, 0.3) 100%
) !important;
backdrop-filter: blur(6.4966816902160645px) !important;
color: #000 !important;
padding: 15px 25px !important;
font-size: 16px !important;
font-family: Maitree Regular !important;
}
body[data-button-style*="slightly_rounded"].single-post.material
#page-header-bg.fullscreen-header
.inner-wrap
> a {
-webkit-border-radius: 50px !important;
font-weight: 400;
}
.imagemBlog {
width: 100%;
max-width: 700px !important;
}
.single-post #header-outer {
background-color: rgba(0, 0, 0, 100) !important;
}
.single-post #header-outer header {
padding-bottom: 30px;
}
.single-post
.first-row-project
.nectar-category-grid[data-text-color="light"]
.nectar-category-grid-item
.content
* {
color: #000 !important;
}
.single-post .first-row-project h2 {
color: #000000;
}
/* .single-post .row.hentry.featured-media-under-header {
display: none !important;
} */
.single-post .cat-heading {
width: 100%;
max-width: 100% !important;
font-size: 16px !important;
font-family: Maitree Regular !important;
}
.blog_next_prev_buttons.vc_row-fluid.wpb_row.full-width-content.standard_section
.text {
font-size: 40px;
line-height: 55px;
}
.nectar-category-grid .nectar-category-grid-link {
pointer-events: none;
}
.single-post .nectar-category-grid {
display: initial;
-webkit-flex-wrap: initial;
flex-wrap: initial;
width: auto;
float: left;
width: 100%;
}
.single-post .nectar-category-grid .nectar-category-grid-item .inner {
height: auto;
max-height: 50px;
display: flex;
align-content: center;
align-self: center;
align-items: center;
}
.single-post
.nectar-category-grid[data-columns="1"]
.nectar-category-grid-item {
padding-bottom: 0;
float: left;
width: auto;
}
.single-post .nectar-category-grid .nectar-category-grid-item .content {
position: initial;
}
.single-post .nectar-category-grid .nectar-category-grid-item .inner {
padding: 15px 25px !important;
text-align: center !important;
border-radius: 25.987px !important;
border: 0.65px solid #848484 !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(208, 208, 208, 0.3) 100%
) !important;
backdrop-filter: blur(6.4966816902160645px) !important;
-webkit-backdrop-filter: blur(6.4966816902160645px);
position: relative !important;
top: auto !important;
left: auto !important;
}
.single-post .nectar-category-grid .nectar-category-grid-item .content {
width: 100% !important;
}
.single-post
.nectar-milestone
.subject:not(.postid-3019 .tetleyCountOrigin .nectar-milestone .subject) {
width: 20% !important;
}
.single-post .post-bg-img.loaded {
background-image: none !important;
background-color: grey !important;
}
.single-post .post .content-inner {
padding-bottom: 0px;
}
.single-post .blog_next_prev_buttons {
margin-top: -25px;
}
.single-post .nectar-scrolling-text-inner__text-chunk img {
width: 47px !important;
}
body.single-post.material[data-bg-header="true"] .container-wrap {
padding-top: 0px !important;
}
.single-post .fullscreen-blog-header #single-below-header {
margin-bottom: 60px;
display: none;
}
.single-post .scroll-down-wrap.no-border {
display: none;
}
.comments-section {
display: none;
}
.blog_next_prev_buttons.vc_row-fluid.wpb_row.full-width-content.standard_section:not(
.single-post
.blog_next_prev_buttons.vc_row-fluid.wpb_row.full-width-content.standard_section
) {
display: none !important;
}
/* --------------------------- fim: 24. BLOG --------------------------- */
/* ==========================================================================
25. MOBILE
media queries e ajustes responsivos
========================================================================== */
.nectar-mobile-only.mobile-header {
display: none !important;
}
@media only screen and (max-width: 999px) {
.border-line .vc_col-sm-8 {
border-right: 0px solid #fff !important;
}
.border-line > .row-bg-wrap {
border-top: 0px solid #fff !important;
border-bottom: 0px solid #fff !important;
}
}
@media only screen and (max-width: 1300px) {
#top .container {
padding: 2% 5%;
}
.footer-partners .img-with-aniamtion-wrap {
max-width: 50% !important;
}
#mega-menu-wrap-top_nav {
display: none;
}
.container-wrap {
padding: 0;
}
/* .material
#header-outer[data-transparent-header="true"][data-mobile-fixed="1"].transparent.scrolled-down {
background: linear-gradient(
178deg,
rgba(63, 63, 63, 0.35) 1.3%,
rgba(86, 86, 86, 0.35) 182.18%
);
background-color: rgba(0, 0, 0, 0);
backdrop-filter: blur(17.63888931274414px);
} */
body
.nectar-category-grid[data-columns][data-grid-spacing]:not(
[data-style="mouse_follow_image"]
)
.nectar-category-grid-item {
width: auto;
padding-bottom: 0;
}
.single-project .nectar-category-grid .nectar-category-grid-item .inner,
.custom-post .cat-span {
padding: 5px 15px !important;
}
.single-project .cat-heading,
.custom-post .cat-span {
font-size: 12px !important;
}
.get-in-touch-GS h1 img {
width: 60px !important;
}
.all-posts-col.projetos {
width: 100% !important;
min-width: 100% !important;
}
.projetos-cat-wrapper {
gap: 10px;
padding: 15px;
}
.nectar-milestone .number .symbol-wrap,
.nectar-milestone .number .symbol-wrap span,
.nectar-milestone .number {
display: inline-block;
font-size: 80px !important;
line-height: 80px !important;
}
.single-project .big-number-splited .number {
width: 60% !important;
display: flex;
}
.single-project .big-number-splited .nectar-milestone .subject {
width: 100% !important;
}
.single-project .nectar-milestone {
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 5%;
}
.border-line .vc_col-sm-8 {
border-right: 1px solid #fff;
}
#header-outer {
padding: 5% !important;
}
.top-level {
padding-top: 10vh !important;
}
.number-date .number span.in-sight {
line-height: 24vh !important;
}
h3.toggle-title a,
.challenges-we-solve p span,
.approach-tabs p span {
font-size: 20px !important;
line-height: 40px !important;
}
[data-permanent-transparent="1"] .wpb_row.vc_row-o-full-height.top-level,
[data-permanent-transparent="1"]
.wpb_row.vc_row-o-full-height.top-level
> .col.span_12 {
min-height: auto !important;
}
#homepage-first-row {
min-height: 50vh !important;
}
.all-posts-row {
display: block;
}
.all-posts-col.team {
width: 100%;
min-width: 100%;
float: left;
margin-top: 25px;
}
#custom-filter {
display: inline-block;
}
.filterWrapper {
width: 50%;
float: left;
}
.filterWrapper:nth-child(4),
.filterWrapper.produtoWrapper {
margin-top: 25px;
width: 100%;
}
[data-permanent-transparent="1"]
.wpb_row.mandatory-full-height.vc_row-o-full-height.top-level,
[data-permanent-transparent="1"]
.wpb_row.mandatory-full-height.vc_row-o-full-height.top-level
> .col.span_12 {
min-height: 100vh !important;
}
.post-area {
margin-top: 1px;
}
.nectar_video_lightbox.play_button {
width: 60px;
height: 60px;
}
.nectar_video_lightbox path {
fill: #000;
}
.auto_meta_overlaid_spaced article .content-inner > .play::before,
.nectar-video-box .play_button_mouse_follow::before,
.nectar_video_lightbox.play_button::before {
border: 1px solid #fff;
background: linear-gradient(
178deg,
rgba(223, 223, 223, 0.4) 1.3%,
rgba(179, 179, 179, 0.08) 182.18%
);
}
.nectar_video_lightbox.play_button::before,
.span_12.dark .nectar_video_lightbox.play_button::before {
border-width: 1px;
}
.play svg {
z-index: 999;
}
.tags-carousel h6 {
font-size: 16px !important;
}
#floatingIcon {
bottom: 0;
right: 0;
border-radius: 0px;
width: 100%;
}
#floatingIconPT {
bottom: 0;
right: 0;
border-radius: 0px;
width: 100%;
}
#floatingIconContent {
right: 5%;
width: 90%;
margin: auto;
left: 5%;
bottom: 8vh;
}
#floatingIconContentPT {
right: 5%;
width: 90%;
margin: auto;
left: 5%;
bottom: 8vh;
}
#floatingIcon:hover {
border-radius: 0;
border: 1.5px solid var(--black, #000);
background: #04e762;
backdrop-filter: blur(17.63888931274414px);
-webkit-backdrop-filter: blur(17.63888931274414px);
}
#floatingIconPT:hover {
border-radius: 0;
border: 1.5px solid var(--black, #000);
background: #04e762;
backdrop-filter: blur(17.63888931274414px);
-webkit-backdrop-filter: blur(17.63888931274414px);
}
#floatingIcon:hover p {
color: #000;
}
#floatingIconPT:hover p {
color: #000;
}
.before-footer {
margin-bottom: 50px !important;
}
#search-outer #search {
width: 90%;
}
.hide-desktop {
display: block !important;
}
.hide-mobile {
display: none !important;
}
#slide-out-widget-area.fullscreen-split .inner > .container {
width: 90% !important;
left: 0 !important;
}
.group-service-slide h4 {
font-size: 30px !important;
line-height: 40px !important;
}
}
@media only screen and (max-width: 700px) {
span.all-button {
padding: 6px 25px;
}
}
/* @media screen and (max-width: 1600px) and (min-width: 1300px) {
h1 {}
h2 {
font-size: 60px !important;
line-height: 90px !important;
}
h3 {
font-size: 50px !important;
line-height: 70px !important;
}
h4 {
font-size: 20px !important;
line-height: 30px !important;
}
h5 {
font-size: 30px !important;
line-height: 40px !important;
}
h6 {
font-size: 18px !important;
line-height: 28px !important;
}
p:not(.before-footer p, #floatingIcon p) {
font-size: 22px;
line-height: 34px;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav>li.mega-menu-item>a.mega-menu-link {
font-size: 18px;
}
.nectar-milestone .number .symbol-wrap,
.nectar-milestone .number .symbol-wrap span,
.nectar-milestone .number {
display: inline-block;
font-size: 100px !important;
line-height: 100px !important;
}
} */
/* --------------------------- fim: 25. MOBILE --------------------------- */
#process,
#sameInvest,
#sameInvest-2 {
display: none;
}
.mbway-red .subject {
color: #e80400;
}
/* ==========================================================================
26. ABOUT (PAGINA)
blocos especificos da pagina About
========================================================================== */
@import url(https://unpkg.com/open-props/open-props.min.css);
@import url(https://unpkg.com/open-props/normalize.min.css);
:root {
--font-size: clamp(2.49rem, calc(2.03rem + 2.31vw), 3.82rem);
--speed: 0.25s;
}
::-moz-selection {
background: #bfffd9;
}
::selection {
background: #bfffd9;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.info {
display: grid;
color: var(--gray-0);
padding: var(--size-1);
text-transform: uppercase;
font-size: var(--font-size);
line-height: 1;
font-weight: bold;
}
.info__line {
display: flex;
align-items: center;
gap: var(--size-4);
justify-content: center !important;
}
.char {
--blurriness: calc(var(--font-size) * 0.75);
display: inline-block;
filter: blur(calc(var(--blur, 1) * var(--blurriness)));
transition: filter 1.5s;
}
.char:hover {
--blur: 0;
transition: filter 0.2s;
}
span.fader.words.chars.splitting {
font-size: 32vw !important;
line-height: 54vh !important;
color: #000;
}
.urlFieldContainer {
display: none !important;
}
.row .col img.img-with-animation.nectar-lazy:not([srcset]) {
width: auto;
}
.parent {
margin-bottom: 15px;
}
/* ==========================================================================
27. VAGAS
pagina de recrutamento
========================================================================== */
.single-vagas .post-area {
margin-top: 0px !important;
}
.single-vagas .featured-media-under-header {
display: none !important;
}
@media only screen and (max-width: 700px) {
.UploadZoneVagas {
display: flex;
align-items: flex-start;
}
.UploadZoneVagas .ff_upload_btn.ff-btn {
padding: 10px 20px !important;
}
.UploadZoneVagas .ff_upload_btn.ff-btn {
height: 43px !important;
}
.uploadStyle {
display: flex !important;
flex-direction: row !important;
}
.uploadStyle .ff-el-input--label {
margin-bottom: 30px !important;
}
.uploadStyle .ff_upload_btn.ff-btn {
height: 46px !important;
}
}
.primeiroContador .nectar-milestone .number:before {
content: "+";
}
.segundoContador .nectar-milestone .number:before {
content: "+";
}
.ultimocontador .nectar-milestone .number:before {
content: ">";
}
.otgs-development-site-front-end {
display: none !important;
}
i.fa-brands.fa-x-twitter:before {
background-image: url(/wp-content/uploads/2024/09/Twitter-v2.svg);
background-size: 15px 19px;
display: inline-block;
width: 15px;
height: 15px;
content: "";
}
@media only screen and (max-width: 690px) {
.page-id-647
.vc_row.top-level.full-width-section:not(.full-width-ns)
> .span_12 {
padding-top: 0px !important;
}
body[data-ext-responsive="true"].single-post.material
#page-header-bg.fullscreen-header
h1 {
font-size: 35.1px;
line-height: 39px;
}
}
@media only screen and (max-width: 1300px) {
.page-id-647 .top-level {
padding-top: 0vh !important;
}
}
.bottom_controls {
display: none;
}
.page-id-3358
.nectar-post-grid-wrap:not([data-style="content_overlaid"])
.nectar-post-grid
.nectar-post-grid-item
.content {
padding: 10px 0;
}
.toUpper {
text-transform: uppercase;
}
.toogleHome div[data-style="minimal"] .toggle > .toggle-title a {
padding: 0px 70px 0px 0 !important;
}
span.post-featured-img {
display: none;
}
.row.heading-title.hentry {
display: none;
}
.single-project
.blog_next_prev_buttons.vc_row-fluid.wpb_row.full-width-content.standard_section {
display: none !important;
}
/* ==========================================================================
28. ALTERACOES RAFA
bloco de alteracoes posteriores
========================================================================== */
/* --- Home Page --- */
.nectar-underline p.projetos-title {
font-weight: bold !important;
font-family: UntitledSans-Regular !important;
}
.toogleHome .toggle.default {
padding: 10px 0px !important;
}
/* ==========================================================================
29. SERVICES (RAFA)
ajustes de servicos
========================================================================== */
.esteticaH1 {
font-size: 26px !important;
line-height: 36px !important;
font-family: Maitree Regular;
text-transform: uppercase !important;
}
.esteticaH2 {
font-size: 70px !important;
line-height: 80px !important;
font-family: UntitledSans-Regular;
text-transform: none !important;
}
.esteticaH3 {
font-size: 40px !important;
line-height: 50px !important;
font-family: UntitledSans-Regular;
}
.esteticaH4 {
font-size: 30px !important;
line-height: 40px !important;
font-family: Maitree Regular;
}
.esteticaH5 {
font-size: 16px !important;
line-height: 26px !important;
font-family: UntitledSans-Regular;
}
.esteticaH6 {
font-size: 11px !important;
line-height: 21px !important;
font-family: Maitree Regular;
}
.textoMaitree {
font-family: Maitree Regular !important;
}
.textoUntitled {
font-family: UntitledSans-Regular !important;
}
.textoUntitledButton {
font-family: UntitledSans-Regular !important;
font-size: 16px !important;
font-weight: 500 !important;
}
.titleWork h2 {
font-size: 35px !important;
line-height: 45px !important;
}
.copyOfH1 {
font-family: Maitree Regular !important;
font-size: 26px !important;
line-height: 36px !important;
text-transform: uppercase;
}
.green {
color: #04e762 !important;
}
.page-id-686 body .group-service-slide h3,
.page-id-1122 .group-service-slide h3,
.page-id-1139 .group-service-slide h3 {
font-size: 40px !important;
}
.group-service-slide h3 {
font-size: 2vw !important;
line-height: 2.5vw !important;
}
@media only screen and (max-width: 690px) {
.maxSize {
max-width: 120px !important;
padding: 0px 50px 0px 30px !important;
}
.group-service-slide h3 {
font-size: 9vw !important;
line-height: 11vw !important;
}
}
@media only screen and (max-width: 1000px) {
.esteticaH2 {
font-size: 40px !important;
line-height: 50px !important;
}
.titleWork h2 {
font-size: 25px !important;
line-height: 35px !important;
}
.esteticaH3 {
font-size: 35px !important;
line-height: 45px !important;
}
}
/* --- LANG SWITCHER --- */
.mega-wpml-ls-item {
padding-left: 15px !important;
}
.mega-wpml-ls-item a {
padding: 0 !important;
opacity: 0.5 !important;
}
.mega-wpml-ls-item a:hover {
opacity: 1 !important;
}
/* ==========================================================================
30. PORTFOLIO VIDEO
grelha e cartoes de video
========================================================================== */
.portfolioVideo .post-heading {
font-weight: 600 !important;
}
.page-id-3358 .nectar-post-grid[data-grid-spacing="4vw"] .nectar-post-grid-item,
.page-id-4537
.nectar-post-grid[data-grid-spacing="4vw"]
.nectar-post-grid-item {
margin: 1vw 4vw 4vw 4vw;
}
.page-id-3358 .nectar-post-grid-filters a:after,
.page-id-4537 .nectar-post-grid-filters a:after {
display: none;
}
.page-id-3358 .nectar-post-grid-filters.animated-in a,
.page-id-4537 .nectar-post-grid-filters.animated-in a {
padding: 15px 25px;
text-align: center;
border-radius: 50px;
border: 1px solid #4b4b4b;
background: linear-gradient(
178deg,
rgba(150, 150, 150, 0.3) 1.3%,
rgba(204, 204, 204, 0.06) 182.18%
);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
margin: 5px;
}
.page-id-3358 .nectar-post-grid-filters.animated-in a.active,
.page-id-4537 .nectar-post-grid-filters.animated-in a.active {
background: #04e762 !important;
color: #000000;
}
/* ==========================================================================
31. CHATBOT
widget de chat
========================================================================== */
.page-id-4841 #floatingIcon {
display: none !important;
}
.spanChallenges {
margin-right: 10px;
}
.spanChallenges {
border-radius: 80px;
background: var(--green, #04e762);
border: 1px solid var(--green, #04e762);
padding: 5px 30px;
font-size: 36px;
}
.spanChallengesQuote {
border-radius: 80px;
border: 0.9px solid #525252;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(208, 208, 208, 0.1) 100%
);
backdrop-filter: blur(9.002776145935059px);
padding: 5px 30px;
font-size: 36px;
color: #fff;
}
@media (max-width: 1356px) {
.spanChallenges {
display: flex;
margin-bottom: 20px;
}
.spanChallengesQuote {
display: flex;
width: 100%;
margin-bottom: 50px;
}
.spanChallengesQuote {
border-radius: 0;
border: none;
background: transparent;
font-size: 26px !important;
}
}
:where(p),
:where(h2) {
text-wrap: pretty;
max-inline-size: none;
}
/* ==========================================================================
32. EMBAIXADORES DA REPUBLICA
seccao de embaixadores
========================================================================== */
.page-id-5027 div#header-space {
display: none;
}
.page-id-5027 div#header-outer {
display: none;
}
.bt_lp_embaixadores_preto a {
color: #000 !important;
}
.alignBottomButtom .wpb_raw_code {
position: absolute;
bottom: 25px;
}
/* --------------------------- fim: 32. EMBAIXADORES DA REPUBLICA --------------------------- */
/* ==========================================================================
33. CONTENT CREATORS
seccao de criadores de conteudo
========================================================================== */
.page-id-5042 div#header-space,
.page-id-5150 div#header-space {
display: none;
}
.page-id-5042 div#header-outer,
.page-id-5150 div#header-outer {
display: none;
}
.page-id-5042 .nectar-milestone .subject,
.page-id-5150 .nectar-milestone .subject,
.page-id-7278 .nectar-milestone .subject {
font-family: "Maitree Regular";
font-weight: 400;
max-width: 40%;
}
.page-id-7278 .nectar-milestone .subject {
max-width: 40%;
}
.page-id-5042 .nectar-global-section.before-footer,
.page-id-5150 .nectar-global-section.before-footer {
display: none !important;
}
/* --------------------------- fim: 33. CONTENT CREATORS --------------------------- */
/* ==========================================================================
34. CANTADOR - BLOG
layout Cantador do blog
========================================================================== */
span.artigos-titulo {
font-size: 18px;
line-height: 18px !important;
}
span.artigos-exerto {
font-size: 16px;
line-height: 18px !important;
}
.p25 {
padding-top: 25px !important;
}
.artigos-flex {
display: flex !important;
gap: 25px !important;
align-items: center !important;
}
img.arrow-read-more {
width: 35px !important;
margin-bottom: 0px !important;
}
.custom-post.pointer.artigos {
padding-bottom: 10%;
}
.bottom {
position: absolute;
bottom: 10px;
}
div.filtros-artigos {
display: flex !important;
gap: 50px !important;
align-items: flex-end !important;
}
.dropdownFiltro {
width: 10% !important;
}
.pesquisaFiltro {
width: 30%;
}
.all-posts-col.team.artigos {
position: relative !important;
width: 33% !important;
min-width: 33% !important;
}
.all-posts-row.artigos {
gap: 50px !important;
}
@media only screen and (max-width: 1000px) {
.dropdownFiltro {
width: 30% !important;
}
.pesquisaFiltro {
width: 65%;
}
#homepage-first-row-mobile .row-bg.viewport-phone.using-image.loaded {
background-size: contain;
}
}
.single-post .post-content {
padding-top: 5%;
padding-bottom: 5%;
}
.resizeImageContentCreators
img.img-with-animation.skip-lazy.nectar-lazy.loaded {
width: 100%;
max-width: 30vw !important;
}
span.meta-author,
.avatar-post-info {
display: none !important;
}
@media only screen and (max-width: 999px) {
.all-posts-col.team.artigos {
width: 100% !important;
min-width: 100% !important;
}
}
/* ==========================================================================
35. LP ACESSIBILIDADE
landing page de acessibilidade
========================================================================== */
.acessibilityForm {
width: 100% !important;
}
/* ==========================================================================
36. LP BRAND-ROOM
landing page Brand Room
========================================================================== */
.page-id-7343 header#top,
.postid-7384 header#top,
.postid-7396 header#top,
.postid-7401 header#top,
.postid-7434 header#top,
.postid-7436 header#top,
.postid-7440 header#top,
.postid-7442 header#top,
.postid-7445 header#top,
.postid-7447 header#top,
.postid-7449 header#top,
.postid-7451 header#top,
.postid-7453 header#top,
.postid-7455 header#top,
.postid-7457 header#top,
.postid-7459 header#top,
.postid-7461 header#top,
.postid-7463 header#top {
display: none !important;
}
.page-id-7343 .nectar-global-section.before-footer,
.postid-7384 .nectar-global-section.before-footer,
.postid-7396 .nectar-global-section.before-footer,
.postid-7401 .nectar-global-section.before-footer,
.postid-7434 .nectar-global-section.before-footer,
.postid-7436 .nectar-global-section.before-footer,
.postid-7440 .nectar-global-section.before-footer,
.postid-7442 .nectar-global-section.before-footer,
.postid-7445 .nectar-global-section.before-footer,
.postid-7447 .nectar-global-section.before-footer,
.postid-7449 .nectar-global-section.before-footer,
.postid-7451 .nectar-global-section.before-footer,
.postid-7453 .nectar-global-section.before-footer,
.postid-7455 .nectar-global-section.before-footer,
.postid-7457 .nectar-global-section.before-footer,
.postid-7459 .nectar-global-section.before-footer,
.postid-7461 .nectar-global-section.before-footer,
.postid-7463 .nectar-global-section.before-footer {
display: none;
}
.page-id-7343 div#floatingIcon,
.postid-7384 div#floatingIcon,
.postid-7396 div#floatingIcon,
.postid-7401 div#floatingIcon,
.postid-7434 div#floatingIcon,
.postid-7436 div#floatingIcon,
.postid-7440 div#floatingIcon,
.postid-7442 div#floatingIcon,
.postid-7445 div#floatingIcon,
.postid-7447 div#floatingIcon,
.postid-7449 div#floatingIcon,
.postid-7451 div#floatingIcon,
.postid-7453 div#floatingIcon,
.postid-7455 div#floatingIcon,
.postid-7457 div#floatingIcon,
.postid-7459 div#floatingIcon,
.postid-7461 div#floatingIcon,
.postid-7463 div#floatingIcon {
display: none !important;
}
.textWhithe {
color: #ffffff !important;
}
p.categoryPills {
padding: 0px 20px;
text-align: center;
border-radius: 50px;
border: 1px solid #4b4b4b;
background: linear-gradient(
178deg,
rgba(150, 150, 150, 0.3) 1.3%,
rgba(204, 204, 204, 0.06) 182.18%
);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
margin: 5px;
font-size: 14px;
}
.brandRoomWrap .wpb_wrapper {
flex-wrap: wrap;
}
.reverseIcon {
transform: rotate(180deg);
}
#brandRoomcaseStudies .nectar-post-grid-filters.animated-in a {
border: solid 1px #ffffff;
border-radius: 50px;
padding: 5px 20px;
}
#brandRoomcaseStudies .nectar-post-grid-filters a:after {
content: "";
transition: 0.37s all cubic-bezier(0.23, 0.46, 0.4, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
display: block;
left: 0;
height: 100%;
width: 100%;
background-color: transparent;
bottom: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
border-radius: 50px;
color: #000000 !important;
text-align: center;
justify-content: center;
align-content: center;
}
#brandRoomcaseStudies a.active {
background-color: #ffffff !important;
color: #000000 !important;
}
#brandRoomcaseStudies span.meta-category a {
border: solid 1px #ffffff;
border-radius: 50px;
padding: 5px 20px;
}
.brandRoomFixedButton {
position: fixed;
bottom: 48px;
right: 5%;
}
.brandRoomFixedButton {
border: solid 1px #000000;
border-radius: 50px;
padding: 5px 20px;
background-color: #04e762 !important;
}
.brandRoomFixedButton:hover {
border: solid 1px #ffffff;
border-radius: 50px;
padding: 5px 20px;
background-color: #ffffff !important;
color: #000000;
}
.brandRoomFixedButton p a {
color: #000000;
opacity: 1 !important;
}
.brandRoomFixedButton:hover p a {
color: #000000;
opacity: 1 !important;
}
.hbspt-form .hs-input {
background-color: transparent !important;
color: #ffffff !important;
border-color: #ffffff !important;
}
.page-id-7343 a.load-more {
background-color: transparent !important;
color: #ffffff !important;
}
@media only screen and (max-width: 1300px) {
.brandRoomFixedButton {
bottom: 0;
right: 0;
border-radius: 0px;
width: 100%;
}
.brandRoomFixedButton:hover {
border-radius: 0px;
}
}
/* ==========================================================================
37. VENTURES
seccao Ventures
========================================================================== */
.page-id-7481 header#top {
display: none !important;
}
.page-id-7481 .nectar-global-section.before-footer {
display: none;
}
.page-id-7481 div#floatingIcon {
display: none !important;
}
body.page-id-7481 .container-wrap {
background-color: #ffffff !important;
}
.cardVentures:hover {
background-color: #000000;
color: #ffffff !important;
}
.cardVentures:hover img {
opacity: 0 !important;
}
.cardVentures.imgScratch:hover .img-loaded {
background-image: url(/wp-content/uploads/2025/06/scratch-white.svg);
background-repeat: no-repeat;
}
.cardVentures.imgTest:hover .img-loaded {
background-image: url(/wp-content/uploads/2025/06/test-white.svg);
background-repeat: no-repeat;
}
.cardVentures.imgRefine:hover .img-loaded {
background-image: url(/wp-content/uploads/2025/06/refine-white.svg);
background-repeat: no-repeat;
}
.cardVentures.imgMove:hover .img-loaded {
background-image: url(/wp-content/uploads/2025/06/move-white.svg);
background-repeat: no-repeat;
}
.toogleTitles h3 a {
font-size: 30px !important;
line-height: 40px !important;
font-family: UntitledSans-Regular;
color: #000000 !important;
}
.toogleTitles div[data-style="minimal"] .toggle.open > .toggle-title a {
font-size: 30px !important;
line-height: 40px !important;
font-family: Maitree Regular !important;
color: #000000 !important;
}
.page-id-7481 .all-posts-row {
display: flex;
gap: 10px;
margin-bottom: 50px;
width: 98%;
}
.page-id-7481 div[data-style="minimal"] .toggle:hover > .toggle-title a:hover {
color: #04e762 !important;
opacity: 1 !important;
}
.page-id-7481 .menu a,
.page-id-7481 .menuFooter a {
color: #000000 !important;
opacity: 1 !important;
}
/* ==========================================================================
MEET THE TEAM — faixa verde sobre a imagem
========================================================================== */
/* Secção: sem padding, faixa encostada ao fundo da imagem */
.get-in-touch-GS.green-footer {
padding: 0 !important;
min-height: 80vh;
display: flex;
align-items: flex-end;
}
/* Anula as goteiras das colunas do WPBakery */
.get-in-touch-GS.green-footer > .row_col_wrap_12 {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
.get-in-touch-GS.green-footer .vc_col-sm-12,
.get-in-touch-GS.green-footer .vc_column-inner,
.get-in-touch-GS.green-footer .wpb_wrapper {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* A faixa verde, full-bleed */
.get-in-touch-GS.green-footer .nectar-scrolling-text {
position: relative;
left: 50%;
width: 100vw;
max-width: 100vw;
margin-left: -50vw;
background: #04e762;
overflow: hidden;
padding: 0.6vw 0;
}
/* Uma única linha, sem quebras */
.get-in-touch-GS.green-footer .nectar-scrolling-text-inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
min-height: 0 !important;
height: auto !important;
}
.get-in-touch-GS.green-footer .nectar-scrolling-text-inner__text-chunk {
flex: 0 0 auto;
display: flex;
align-items: center;
min-height: 0 !important;
height: auto !important;
font-size: 5vw !important;
line-height: 1.05 !important;
padding: 0 0 0 2.5vw !important;
}
/* Remove os