/* Start custom CSS for html, class: .elementor-element-979b1c5 *//* ======================================================
HERO — TRABALHE CONOSCO | GRUPO VNG
====================================================== */
#vng-carreiras-inicio.vng-careers-hero {
--vng-careers-navy: #09254b;
--vng-careers-navy-dark: #061b38;
--vng-careers-blue: #1b67ce;
--vng-careers-blue-light: #77b5f4;
--vng-careers-text-light: #d9e7f7;
--vng-careers-line: rgba(255, 255, 255, 0.18);
position: relative;
isolation: isolate;
display: grid;
grid-template-columns:
minmax(0, 1.03fr)
minmax(0, 0.97fr);
width: 100%;
max-width: none;
min-height: 730px;
margin: 0;
padding: 0;
overflow: hidden;
color: #ffffff;
background: var(--vng-careers-navy);
}
/* RESET DA SEÇÃO */
#vng-carreiras-inicio,
#vng-carreiras-inicio *,
#vng-carreiras-inicio *::before,
#vng-carreiras-inicio *::after {
box-sizing: border-box;
}
#vng-carreiras-inicio,
#vng-carreiras-inicio h1,
#vng-carreiras-inicio p,
#vng-carreiras-inicio span,
#vng-carreiras-inicio strong,
#vng-carreiras-inicio a {
font-family:
"Montserrat",
Arial,
sans-serif !important;
}
/* ======================================================
COLUNA DE CONTEÚDO
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__copy {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
min-height: 730px;
padding:
clamp(70px, 7vw, 110px)
clamp(55px, 7vw, 125px)
38px;
background:
radial-gradient(
circle at 8% 15%,
rgba(27, 103, 206, 0.2),
transparent 32%
),
linear-gradient(
145deg,
#0b2d5c 0%,
var(--vng-careers-navy) 48%,
var(--vng-careers-navy-dark) 100%
);
}
/* DETALHE DE FUNDO */
#vng-carreiras-inicio
.vng-careers-hero__copy::before {
content: "";
position: absolute;
z-index: -1;
top: -190px;
left: -190px;
width: 470px;
height: 470px;
border:
1px solid rgba(255, 255, 255, 0.07);
border-radius: 50%;
pointer-events: none;
}
#vng-carreiras-inicio
.vng-careers-hero__copy::after {
content: "";
position: absolute;
z-index: -1;
top: -110px;
left: -110px;
width: 310px;
height: 310px;
border:
1px solid rgba(117, 180, 249, 0.1);
border-radius: 50%;
pointer-events: none;
}
/* ======================================================
CONTEÚDO INTERNO
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__content {
width: 100%;
max-width: 650px;
}
/* ======================================================
EYEBROW
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__eyebrow {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 31px;
color: #ffffff;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
}
#vng-carreiras-inicio
.vng-careers-hero__eyebrow-line {
display: block;
flex-shrink: 0;
width: 46px;
height: 2px;
background: var(--vng-careers-blue-light);
}
/* ======================================================
TÍTULO
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__title {
display: flex;
flex-direction: column;
margin: 0 0 30px;
color: #ffffff;
font-size:
clamp(46px, 4.7vw, 76px) !important;
font-weight: 400 !important;
line-height: 1.05 !important;
letter-spacing: -0.055em !important;
}
#vng-carreiras-inicio
.vng-careers-hero__title-strong {
display: block;
color: #ffffff;
font-size: inherit !important;
font-weight: 700 !important;
line-height: inherit !important;
letter-spacing: inherit !important;
}
#vng-carreiras-inicio
.vng-careers-hero__title-light {
display: block;
margin-top: 9px;
color: #a9c9ec;
font-size:
clamp(32px, 3.2vw, 52px) !important;
font-weight: 400 !important;
line-height: 1.12 !important;
letter-spacing: -0.045em !important;
}
/* ======================================================
DESCRIÇÃO
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__description {
width: 100%;
max-width: 580px;
margin: 0 0 36px !important;
color: var(--vng-careers-text-light);
font-size:
clamp(16px, 1.15vw, 18px) !important;
font-weight: 400 !important;
line-height: 1.75 !important;
letter-spacing: -0.01em !important;
}
/* ======================================================
AÇÕES
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
}
/* ======================================================
BOTÃO PRINCIPAL
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__button {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 30px;
min-width: 275px;
min-height: 60px;
padding: 11px 12px 11px 25px;
overflow: hidden;
color: #ffffff !important;
background:
linear-gradient(
110deg,
#155cb9 0%,
#2678dc 52%,
#155cb9 100%
);
border:
1px solid rgba(255, 255, 255, 0.23);
border-radius: 4px;
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(69, 145, 231, 0.1);
text-decoration: none !important;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
background-color 0.3s ease;
}
/* BRILHO SUTIL */
#vng-carreiras-inicio
.vng-careers-hero__button::before {
content: "";
position: absolute;
z-index: -1;
top: -40%;
bottom: -40%;
left: -70%;
width: 42%;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.32),
transparent
);
transform: skewX(-22deg);
animation:
vngCareersButtonShine 5s ease-in-out infinite;
}
@keyframes vngCareersButtonShine {
0%,
56% {
left: -70%;
}
78%,
100% {
left: 130%;
}
}
#vng-carreiras-inicio
.vng-careers-hero__button-text {
color: inherit;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
}
#vng-carreiras-inicio
.vng-careers-hero__button-icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--vng-careers-navy);
background: #ffffff;
border-radius: 50%;
transition:
color 0.3s ease,
background-color 0.3s ease,
transform 0.3s ease;
}
#vng-carreiras-inicio
.vng-careers-hero__button-icon svg {
display: block;
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ======================================================
LINK SECUNDÁRIO
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__secondary-link {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
color: #ffffff !important;
border-bottom:
1px solid rgba(255, 255, 255, 0.4);
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
text-decoration: none !important;
transition:
color 0.25s ease,
border-color 0.25s ease;
}
#vng-carreiras-inicio
.vng-careers-hero__secondary-link svg {
display: block;
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.25s ease;
}
/* ======================================================
HOVERS
====================================================== */
@media (hover: hover) {
#vng-carreiras-inicio
.vng-careers-hero__button:hover {
color: #ffffff !important;
transform: translateY(-3px);
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.27),
0 0 24px rgba(38, 120, 220, 0.24);
}
#vng-carreiras-inicio
.vng-careers-hero__button:hover
.vng-careers-hero__button-icon {
color: #ffffff;
background: var(--vng-careers-navy);
transform: rotate(45deg);
}
#vng-carreiras-inicio
.vng-careers-hero__secondary-link:hover {
color: var(--vng-careers-blue-light) !important;
border-color: var(--vng-careers-blue-light);
}
#vng-carreiras-inicio
.vng-careers-hero__secondary-link:hover svg {
transform: translateY(4px);
}
}
/* ======================================================
BASE DA COLUNA
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__base {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
max-width: 650px;
margin-top: 55px;
padding-top: 28px;
border-top:
1px solid var(--vng-careers-line);
}
#vng-carreiras-inicio
.vng-careers-hero__base-item {
display: flex;
align-items: flex-start;
gap: 11px;
padding-right: 18px;
}
#vng-carreiras-inicio
.vng-careers-hero__base-item + .vng-careers-hero__base-item {
padding-left: 18px;
border-left:
1px solid var(--vng-careers-line);
}
#vng-carreiras-inicio
.vng-careers-hero__base-item > span {
color: var(--vng-careers-blue-light);
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
letter-spacing: 0.08em !important;
}
#vng-carreiras-inicio
.vng-careers-hero__base-item p {
margin: 0 !important;
color: #ffffff;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
letter-spacing: 0.01em !important;
}
/* ======================================================
COLUNA DA IMAGEM
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__visual {
position: relative;
isolation: isolate;
min-width: 0;
min-height: 730px;
margin: 0;
padding: 0;
overflow: hidden;
background: #173d69;
}
#vng-carreiras-inicio
.vng-careers-hero__visual img {
position: absolute;
z-index: 1;
inset: 0;
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
object-fit: cover;
object-position: center;
transform: scale(1.015);
transition:
transform 8s ease;
}
#vng-carreiras-inicio.vng-careers-hero--visible
.vng-careers-hero__visual img {
transform: scale(1.065);
}
/* OVERLAY DA IMAGEM */
#vng-carreiras-inicio
.vng-careers-hero__visual-overlay {
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(9, 37, 75, 0.38) 0%,
rgba(9, 37, 75, 0.08) 34%,
rgba(9, 37, 75, 0.05) 70%,
rgba(9, 37, 75, 0.22) 100%
),
linear-gradient(
180deg,
rgba(5, 25, 52, 0.05) 0%,
rgba(5, 25, 52, 0.05) 48%,
rgba(5, 25, 52, 0.78) 100%
);
}
/* LINHA DE CONEXÃO ENTRE AS COLUNAS */
#vng-carreiras-inicio
.vng-careers-hero__visual::before {
content: "";
position: absolute;
z-index: 4;
top: 0;
bottom: 0;
left: 0;
width: 82px;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(9, 37, 75, 0.55),
transparent
);
}
/* DETALHE DECORATIVO */
#vng-carreiras-inicio
.vng-careers-hero__visual-detail {
position: absolute;
z-index: 3;
top: 41px;
right: 41px;
width: 82px;
height: 82px;
border-top:
1px solid rgba(255, 255, 255, 0.5);
border-right:
1px solid rgba(255, 255, 255, 0.5);
pointer-events: none;
}
/* ======================================================
TEXTO SOBRE A IMAGEM
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__visual-label {
position: absolute;
z-index: 5;
right: clamp(35px, 5vw, 80px);
bottom: clamp(45px, 6vw, 88px);
left: clamp(35px, 5vw, 80px);
max-width: 520px;
padding-left: 20px;
border-left:
3px solid var(--vng-careers-blue-light);
}
#vng-carreiras-inicio
.vng-careers-hero__visual-label > span {
display: block;
margin-bottom: 10px;
color: #cce4ff;
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0.16em !important;
}
#vng-carreiras-inicio
.vng-careers-hero__visual-label strong {
display: block;
color: #ffffff;
font-size:
clamp(22px, 2vw, 31px) !important;
font-weight: 600 !important;
line-height: 1.26 !important;
letter-spacing: -0.035em !important;
}
/* ======================================================
SELO VNG
====================================================== */
#vng-carreiras-inicio
.vng-careers-hero__visual-badge {
position: absolute;
z-index: 5;
top: 42px;
left: 42px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 86px;
height: 86px;
color: #ffffff;
background:
rgba(9, 37, 75, 0.87);
border:
1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(6px);
}
#vng-carreiras-inicio
.vng-careers-hero__visual-badge span {
font-size: 8px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0.22em !important;
}
#vng-carreiras-inicio
.vng-careers-hero__visual-badge strong {
margin-top: 5px;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.05em !important;
}
/* ======================================================
ANIMAÇÕES DE ENTRADA
====================================================== */
#vng-carreiras-inicio.vng-careers-hero--motion
[data-vng-careers-reveal] {
opacity: 0;
transform:
translateY(25px);
transition:
opacity 0.75s ease,
transform 0.75s ease;
}
#vng-carreiras-inicio.vng-careers-hero--visible
[data-vng-careers-reveal] {
opacity: 1;
transform:
translateY(0);
}
#vng-carreiras-inicio
.vng-careers-hero__title {
transition-delay: 0.1s;
}
#vng-carreiras-inicio
.vng-careers-hero__description {
transition-delay: 0.2s;
}
#vng-carreiras-inicio
.vng-careers-hero__actions {
transition-delay: 0.3s;
}
#vng-carreiras-inicio
.vng-careers-hero__base {
transition-delay: 0.4s;
}
#vng-carreiras-inicio
.vng-careers-hero__visual-label {
transition-delay: 0.35s;
}
#vng-carreiras-inicio
.vng-careers-hero__visual-badge {
transition-delay: 0.2s;
}
/* ======================================================
FOCO DO TECLADO
====================================================== */
#vng-carreiras-inicio a:focus-visible {
outline:
3px solid #ffffff;
outline-offset: 4px;
}
/* ======================================================
TELAS GRANDES
====================================================== */
@media (min-width: 1600px) {
#vng-carreiras-inicio.vng-careers-hero {
min-height: 790px;
}
#vng-carreiras-inicio
.vng-careers-hero__copy,
#vng-carreiras-inicio
.vng-careers-hero__visual {
min-height: 790px;
}
#vng-carreiras-inicio
.vng-careers-hero__copy {
padding-right: clamp(90px, 8vw, 150px);
padding-left: clamp(90px, 8vw, 150px);
}
#vng-carreiras-inicio
.vng-careers-hero__content,
#vng-carreiras-inicio
.vng-careers-hero__base {
max-width: 720px;
}
}
/* ======================================================
NOTEBOOK
====================================================== */
@media (max-width: 1200px) {
#vng-carreiras-inicio.vng-careers-hero {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 0.9fr);
min-height: 680px;
}
#vng-carreiras-inicio
.vng-careers-hero__copy,
#vng-carreiras-inicio
.vng-careers-hero__visual {
min-height: 680px;
}
#vng-carreiras-inicio
.vng-careers-hero__copy {
padding:
64px
7%
32px;
}
#vng-carreiras-inicio
.vng-careers-hero__title {
font-size:
clamp(44px, 5vw, 65px) !important;
}
#vng-carreiras-inicio
.vng-careers-hero__base-item {
padding-right: 12px;
}
#vng-carreiras-inicio
.vng-careers-hero__base-item +
.vng-careers-hero__base-item {
padding-left: 12px;
}
}
/* ======================================================
TABLET
====================================================== */
@media (max-width: 900px) {
#vng-carreiras-inicio.vng-careers-hero {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 0.86fr);
min-height: 640px;
}
#vng-carreiras-inicio
.vng-careers-hero__copy,
#vng-carreiras-inicio
.vng-careers-hero__visual {
min-height: 640px;
}
#vng-carreiras-inicio
.vng-careers-hero__copy {
padding:
53px
6%
28px;
}
#vng-carreiras-inicio
.vng-careers-hero__eyebrow {
margin-bottom: 25px;
font-size: 10px !important;
}
#vng-carreiras-inicio
.vng-careers-hero__title {
font-size:
clamp(40px, 5.8vw, 55px) !important;
}
#vng-carreiras-inicio
.vng-careers-hero__title-light {
font-size:
clamp(28px, 4vw, 39px) !important;
}
#vng-carreiras-inicio
.vng-careers-hero__description {
font-size: 15px !important;
}
#vng-carreiras-inicio
.vng-careers-hero__actions {
align-items: flex-start;
flex-direction: column;
gap: 15px;
}
#vng-carreiras-inicio
.vng-careers-hero__base {
display: none;
}
#vng-carreiras-inicio
.vng-careers-hero__visual-badge {
top: 28px;
left: 28px;
width: 72px;
height: 72px;
}
#vng-carreiras-inicio
.vng-careers-hero__visual-detail {
top: 28px;
right: 28px;
}
}
/* ======================================================
MOBILE
====================================================== */
@media (max-width: 767px) {
#vng-carreiras-inicio.vng-careers-hero {
display: flex;
flex-direction: column;
min-height: auto;
}
#vng-carreiras-inicio
.vng-careers-hero__copy {
order: 1;
min-height: auto;
padding:
54px
6%
48px;
}
#vng-carreiras-inicio
.vng-careers-hero__content {
max-width: none;
}
#vng-carreiras-inicio
.vng-careers-hero__eyebrow {
margin-bottom: 26px;
font-size: 10px !important;
letter-spacing: 0.13em !important;
}
#vng-carreiras-inicio
.vng-careers-hero__eyebrow-line {
width: 35px;
}
#vng-carreiras-inicio
.vng-careers-hero__title {
margin-bottom: 25px;
font-size:
clamp(43px, 12vw, 60px) !important;
line-height: 1.04 !important;
}
#vng-carreiras-inicio
.vng-careers-hero__title-light {
margin-top: 13px;
font-size:
clamp(29px, 8vw, 39px) !important;
}
#vng-carreiras-inicio
.vng-careers-hero__description {
max-width: none;
margin-bottom: 31px !important;
font-size: 16px !important;
line-height: 1.7 !important;
}
#vng-carreiras-inicio
.vng-careers-hero__actions {
align-items: stretch;
}
#vng-carreiras-inicio
.vng-careers-hero__button {
width: 100%;
min-width: 0;
min-height: 60px;
}
#vng-carreiras-inicio
.vng-careers-hero__secondary-link {
align-self: flex-start;
}
#vng-carreiras-inicio
.vng-careers-hero__visual {
order: 2;
width: 100%;
min-height: 490px;
}
#vng-carreiras-inicio
.vng-careers-hero__visual::before {
top: 0;
right: 0;
bottom: auto;
width: auto;
height: 70px;
background:
linear-gradient(
180deg,
rgba(9, 37, 75, 0.62),
transparent
);
}
#vng-carreiras-inicio
.vng-careers-hero__visual img {
object-position: center 30%;
}
#vng-carreiras-inicio
.vng-careers-hero__visual-label {
right: 6%;
bottom: 39px;
left: 6%;
}
#vng-carreiras-inicio
.vng-careers-hero__visual-label strong {
font-size: 25px !important;
}
#vng-carreiras-inicio
.vng-careers-hero__visual-badge {
top: 24px;
left: 6%;
}
}
/* ======================================================
CELULARES PEQUENOS
====================================================== */
@media (max-width: 390px) {
#vng-carreiras-inicio
.vng-careers-hero__copy {
padding:
47px
6%
42px;
}
#vng-carreiras-inicio
.vng-careers-hero__title {
font-size: 40px !important;
}
#vng-carreiras-inicio
.vng-careers-hero__title-light {
font-size: 28px !important;
}
#vng-carreiras-inicio
.vng-careers-hero__button {
gap: 18px;
padding-left: 19px;
}
#vng-carreiras-inicio
.vng-careers-hero__button-text {
font-size: 14px !important;
}
#vng-carreiras-inicio
.vng-careers-hero__visual {
min-height: 430px;
}
}
/* ======================================================
ACESSIBILIDADE
====================================================== */
@media (prefers-reduced-motion: reduce) {
#vng-carreiras-inicio *,
#vng-carreiras-inicio *::before,
#vng-carreiras-inicio *::after {
animation: none !important;
transition: none !important;
}
#vng-carreiras-inicio
[data-vng-careers-reveal] {
opacity: 1 !important;
transform: none !important;
}
#vng-carreiras-inicio
.vng-careers-hero__visual img {
transform: none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c64af77 *//* ======================================================
CULTURA — TRABALHE CONOSCO
====================================================== */
#vng-cultura.vng-careers-culture {
--vng-culture-navy: #09254b;
--vng-culture-navy-dark: #061b38;
--vng-culture-blue: #1b67ce;
--vng-culture-blue-light: #74aff0;
--vng-culture-muted: #56708f;
--vng-culture-background: #f3f6fa;
--vng-culture-line: rgba(9, 37, 75, 0.13);
position: relative;
isolation: isolate;
width: 100%;
max-width: none;
margin: 0;
padding: 110px 0;
overflow: hidden;
color: var(--vng-culture-navy);
background: #ffffff;
}
/* RESET */
#vng-cultura,
#vng-cultura *,
#vng-cultura *::before,
#vng-cultura *::after {
box-sizing: border-box;
}
#vng-cultura,
#vng-cultura h2,
#vng-cultura h3,
#vng-cultura p,
#vng-cultura span,
#vng-cultura strong,
#vng-cultura a {
font-family:
"Montserrat",
Arial,
sans-serif !important;
}
/* DETALHES DE FUNDO */
#vng-cultura::before {
content: "";
position: absolute;
z-index: -1;
top: -270px;
right: -250px;
width: 600px;
height: 600px;
border:
1px solid rgba(27, 103, 206, 0.07);
border-radius: 50%;
pointer-events: none;
}
#vng-cultura::after {
content: "";
position: absolute;
z-index: -1;
top: -160px;
right: -150px;
width: 390px;
height: 390px;
border:
1px solid rgba(27, 103, 206, 0.06);
border-radius: 50%;
pointer-events: none;
}
/* ======================================================
CONTAINER
====================================================== */
#vng-cultura
.vng-careers-culture__container {
position: relative;
z-index: 2;
width: min(1380px, 88%);
margin: 0 auto;
}
/* ======================================================
CABEÇALHO
====================================================== */
#vng-cultura
.vng-careers-culture__header {
display: grid;
grid-template-columns:
minmax(0, 1.1fr)
minmax(300px, 0.72fr);
gap: clamp(70px, 9vw, 150px);
align-items: end;
margin-bottom: 67px;
}
/* ======================================================
EYEBROW
====================================================== */
#vng-cultura
.vng-careers-culture__eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 27px;
color: var(--vng-culture-blue);
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
letter-spacing: 0.14em !important;
}
#vng-cultura
.vng-careers-culture__eyebrow-number {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
color: var(--vng-culture-blue);
border:
1px solid var(--vng-culture-line);
border-radius: 50%;
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0.04em !important;
}
#vng-cultura
.vng-careers-culture__eyebrow-line {
display: block;
flex-shrink: 0;
width: 47px;
height: 1px;
background: var(--vng-culture-blue);
}
/* ======================================================
TÍTULO
====================================================== */
#vng-cultura
.vng-careers-culture__heading h2 {
max-width: 780px;
margin: 0;
color: var(--vng-culture-navy);
font-size:
clamp(40px, 4vw, 62px) !important;
font-weight: 600 !important;
line-height: 1.12 !important;
letter-spacing: -0.05em !important;
}
#vng-cultura
.vng-careers-culture__heading h2 > span {
display: block;
margin-top: 8px;
color: var(--vng-culture-muted);
font-size: inherit !important;
font-weight: 400 !important;
line-height: inherit !important;
letter-spacing: inherit !important;
}
/* ======================================================
INTRODUÇÃO
====================================================== */
#vng-cultura
.vng-careers-culture__introduction {
padding-bottom: 5px;
}
#vng-cultura
.vng-careers-culture__introduction p {
margin: 0 !important;
color: var(--vng-culture-muted);
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
letter-spacing: -0.01em !important;
}
#vng-cultura
.vng-careers-culture__introduction p:first-child {
color: var(--vng-culture-navy);
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1.65 !important;
}
#vng-cultura
.vng-careers-culture__introduction p + p {
margin-top: 17px !important;
}
/* ======================================================
GRADE DE PILARES
====================================================== */
#vng-cultura
.vng-careers-culture__grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
border-top:
1px solid var(--vng-culture-line);
border-bottom:
1px solid var(--vng-culture-line);
}
/* ======================================================
CARD
====================================================== */
#vng-cultura
.vng-careers-culture__card {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 355px;
margin: 0;
padding: 37px 31px 35px;
overflow: hidden;
background: #ffffff;
border-left:
1px solid var(--vng-culture-line);
transition:
color 0.35s ease,
background-color 0.35s ease,
transform 0.35s ease;
}
#vng-cultura
.vng-careers-culture__card:last-child {
border-right:
1px solid var(--vng-culture-line);
}
/* FUNDO NO HOVER */
#vng-cultura
.vng-careers-culture__card::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background:
radial-gradient(
circle at 90% 10%,
rgba(27, 103, 206, 0.34),
transparent 42%
),
linear-gradient(
150deg,
#0c2d59,
var(--vng-culture-navy-dark)
);
opacity: 0;
transition: opacity 0.35s ease;
}
/* ======================================================
TOPO DO CARD
====================================================== */
#vng-cultura
.vng-careers-culture__card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 58px;
}
#vng-cultura
.vng-careers-culture__card-number {
color: var(--vng-culture-blue);
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0.12em !important;
transition: color 0.35s ease;
}
/* ======================================================
ÍCONE
====================================================== */
#vng-cultura
.vng-careers-culture__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
color: var(--vng-culture-blue);
border:
1px solid var(--vng-culture-line);
border-radius: 50%;
transition:
color 0.35s ease,
background-color 0.35s ease,
border-color 0.35s ease,
transform 0.35s ease;
}
#vng-cultura
.vng-careers-culture__card-icon svg {
display: block;
width: 38px;
height: 38px;
fill: none;
stroke: currentColor;
stroke-width: 1.45;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ======================================================
CONTEÚDO DO CARD
====================================================== */
#vng-cultura
.vng-careers-culture__card-content {
margin-top: auto;
}
#vng-cultura
.vng-careers-culture__card-content h3 {
margin: 0 0 17px;
color: var(--vng-culture-navy);
font-size:
clamp(20px, 1.6vw, 25px) !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: -0.035em !important;
transition: color 0.35s ease;
}
#vng-cultura
.vng-careers-culture__card-content p {
margin: 0 !important;
color: var(--vng-culture-muted);
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.72 !important;
letter-spacing: -0.005em !important;
transition: color 0.35s ease;
}
/* LINHA INFERIOR */
#vng-cultura
.vng-careers-culture__card-line {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 4px;
background: var(--vng-culture-blue);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
/* ======================================================
INTERAÇÃO DOS CARDS
====================================================== */
@media (hover: hover) {
#vng-cultura
.vng-careers-culture__card:hover {
color: #ffffff;
transform: translateY(-7px);
}
#vng-cultura
.vng-careers-culture__card:hover::before {
opacity: 1;
}
#vng-cultura
.vng-careers-culture__card:hover
.vng-careers-culture__card-number {
color: var(--vng-culture-blue-light);
}
#vng-cultura
.vng-careers-culture__card:hover
.vng-careers-culture__card-content h3 {
color: #ffffff;
}
#vng-cultura
.vng-careers-culture__card:hover
.vng-careers-culture__card-content p {
color: #d7e5f5;
}
#vng-cultura
.vng-careers-culture__card:hover
.vng-careers-culture__card-icon {
color: var(--vng-culture-navy);
background: #ffffff;
border-color: #ffffff;
transform: rotate(-5deg) scale(1.04);
}
#vng-cultura
.vng-careers-culture__card:hover
.vng-careers-culture__card-line {
transform: scaleX(1);
}
}
/* ======================================================
DESTAQUE INFERIOR
====================================================== */
#vng-cultura
.vng-careers-culture__footer {
display: grid;
grid-template-columns:
82px
minmax(0, 1fr)
auto;
gap: 26px;
align-items: center;
margin-top: 55px;
padding: 31px 35px;
color: #ffffff;
background:
linear-gradient(
115deg,
var(--vng-culture-navy-dark),
var(--vng-culture-navy) 64%,
#123e75
);
border-radius: 4px;
box-shadow:
0 20px 48px rgba(9, 37, 75, 0.14);
}
/* MARCA */
#vng-cultura
.vng-careers-culture__footer-mark {
display: flex;
align-items: center;
justify-content: center;
width: 82px;
height: 82px;
color: #ffffff;
border:
1px solid rgba(255, 255, 255, 0.28);
border-radius: 50%;
}
#vng-cultura
.vng-careers-culture__footer-mark span {
font-size: 23px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.05em !important;
}
/* TEXTO */
#vng-cultura
.vng-careers-culture__footer-label {
display: block;
margin-bottom: 8px;
color: var(--vng-culture-blue-light);
font-size: 9px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0.16em !important;
}
#vng-cultura
.vng-careers-culture__footer-content h3 {
margin: 0;
color: #ffffff;
font-size:
clamp(20px, 2vw, 28px) !important;
font-weight: 500 !important;
line-height: 1.35 !important;
letter-spacing: -0.035em !important;
}
/* LINK */
#vng-cultura
.vng-careers-culture__footer-link {
display: inline-flex;
align-items: center;
gap: 18px;
min-height: 54px;
padding: 8px 9px 8px 21px;
color: #ffffff !important;
border:
1px solid rgba(255, 255, 255, 0.28);
border-radius: 3px;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
text-decoration: none !important;
transition:
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease;
}
#vng-cultura
.vng-careers-culture__footer-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
color: var(--vng-culture-navy);
background: #ffffff;
border-radius: 50%;
transition:
color 0.3s ease,
background-color 0.3s ease,
transform 0.3s ease;
}
#vng-cultura
.vng-careers-culture__footer-arrow svg {
display: block;
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (hover: hover) {
#vng-cultura
.vng-careers-culture__footer-link:hover {
color: var(--vng-culture-navy) !important;
background: #ffffff;
border-color: #ffffff;
transform: translateY(-2px);
}
#vng-cultura
.vng-careers-culture__footer-link:hover
.vng-careers-culture__footer-arrow {
color: #ffffff;
background: var(--vng-culture-blue);
transform: rotate(180deg);
}
}
/* ======================================================
ANIMAÇÕES
====================================================== */
#vng-cultura
[data-vng-culture-reveal] {
opacity: 0;
transform: translateY(28px);
transition:
opacity 0.7s ease var(--vng-culture-delay, 0ms),
transform 0.7s ease var(--vng-culture-delay, 0ms);
}
#vng-cultura
[data-vng-culture-reveal].vng-careers-culture__visible {
opacity: 1;
transform: translateY(0);
}
/* ======================================================
NOTEBOOK
====================================================== */
@media (max-width: 1200px) {
#vng-cultura.vng-careers-culture {
padding: 90px 0;
}
#vng-cultura
.vng-careers-culture__container {
width: 92%;
}
#vng-cultura
.vng-careers-culture__header {
gap: 70px;
}
#vng-cultura
.vng-careers-culture__card {
min-height: 340px;
padding:
32px
24px;
}
#vng-cultura
.vng-careers-culture__card-top {
margin-bottom: 45px;
}
#vng-cultura
.vng-careers-culture__card-icon {
width: 55px;
height: 55px;
}
#vng-cultura
.vng-careers-culture__card-icon svg {
width: 34px;
height: 34px;
}
}
/* ======================================================
TABLET
====================================================== */
@media (max-width: 900px) {
#vng-cultura.vng-careers-culture {
padding: 78px 0;
}
#vng-cultura
.vng-careers-culture__header {
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 50px;
}
#vng-cultura
.vng-careers-culture__introduction {
max-width: 680px;
}
#vng-cultura
.vng-careers-culture__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
#vng-cultura
.vng-careers-culture__card {
min-height: 310px;
border-bottom:
1px solid var(--vng-culture-line);
}
#vng-cultura
.vng-careers-culture__card:nth-child(odd) {
border-left: 0;
}
#vng-cultura
.vng-careers-culture__card:nth-child(2) {
border-right:
1px solid var(--vng-culture-line);
}
#vng-cultura
.vng-careers-culture__footer {
grid-template-columns:
70px
minmax(0, 1fr);
padding: 28px;
}
#vng-cultura
.vng-careers-culture__footer-mark {
width: 70px;
height: 70px;
}
#vng-cultura
.vng-careers-culture__footer-link {
grid-column: 1 / -1;
justify-self: flex-start;
margin-top: 5px;
}
}
/* ======================================================
MOBILE
====================================================== */
@media (max-width: 600px) {
#vng-cultura.vng-careers-culture {
padding: 65px 0;
}
#vng-cultura
.vng-careers-culture__container {
width: 88%;
}
#vng-cultura
.vng-careers-culture__header {
gap: 27px;
margin-bottom: 42px;
}
#vng-cultura
.vng-careers-culture__eyebrow {
gap: 11px;
margin-bottom: 23px;
font-size: 9px !important;
letter-spacing: 0.11em !important;
}
#vng-cultura
.vng-careers-culture__eyebrow-line {
width: 31px;
}
#vng-cultura
.vng-careers-culture__heading h2 {
font-size:
clamp(35px, 10vw, 45px) !important;
line-height: 1.13 !important;
}
#vng-cultura
.vng-careers-culture__heading h2 > span {
margin-top: 12px;
}
#vng-cultura
.vng-careers-culture__introduction p:first-child {
font-size: 17px !important;
}
#vng-cultura
.vng-careers-culture__introduction p {
font-size: 15px !important;
}
#vng-cultura
.vng-careers-culture__grid {
grid-template-columns: 1fr;
}
#vng-cultura
.vng-careers-culture__card,
#vng-cultura
.vng-careers-culture__card:nth-child(odd),
#vng-cultura
.vng-careers-culture__card:nth-child(2),
#vng-cultura
.vng-careers-culture__card:last-child {
min-height: 270px;
padding:
29px
25px;
border-right: 0;
border-left: 0;
}
#vng-cultura
.vng-careers-culture__card-top {
margin-bottom: 33px;
}
#vng-cultura
.vng-careers-culture__card-content h3 {
font-size: 23px !important;
}
#vng-cultura
.vng-careers-culture__card-content p {
max-width: 420px;
font-size: 15px !important;
}
#vng-cultura
.vng-careers-culture__footer {
grid-template-columns: 1fr;
gap: 21px;
margin-top: 42px;
padding:
28px
24px;
}
#vng-cultura
.vng-careers-culture__footer-mark {
width: 65px;
height: 65px;
}
#vng-cultura
.vng-careers-culture__footer-content h3 {
font-size: 22px !important;
}
#vng-cultura
.vng-careers-culture__footer-link {
grid-column: auto;
width: 100%;
justify-content: space-between;
}
}
/* ======================================================
CELULARES PEQUENOS
====================================================== */
@media (max-width: 390px) {
#vng-cultura
.vng-careers-culture__container {
width: 90%;
}
#vng-cultura
.vng-careers-culture__heading h2 {
font-size: 34px !important;
}
#vng-cultura
.vng-careers-culture__card {
min-height: 260px;
}
}
/* ======================================================
ACESSIBILIDADE
====================================================== */
#vng-cultura a:focus-visible {
outline:
3px solid var(--vng-culture-blue);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
#vng-cultura *,
#vng-cultura *::before,
#vng-cultura *::after {
animation: none !important;
transition: none !important;
}
#vng-cultura
[data-vng-culture-reveal] {
opacity: 1 !important;
transform: none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d9921ff *//* ======================================================
ÁREAS DE ATUAÇÃO — TRABALHE CONOSCO
====================================================== */
#vng-areas.vng-careers-areas {
--vng-areas-navy: #09254b;
--vng-areas-navy-dark: #061b38;
--vng-areas-blue: #1b67ce;
--vng-areas-blue-light: #77b5f4;
--vng-areas-muted: #58718f;
--vng-areas-background: #f3f6fa;
--vng-areas-line: rgba(9, 37, 75, 0.13);
position: relative;
isolation: isolate;
width: 100%;
max-width: none;
margin: 0;
padding: 110px 0;
overflow: hidden;
color: var(--vng-areas-navy);
background: var(--vng-areas-background);
}
/* RESET */
#vng-areas,
#vng-areas *,
#vng-areas *::before,
#vng-areas *::after {
box-sizing: border-box;
}
#vng-areas,
#vng-areas h2,
#vng-areas p,
#vng-areas span,
#vng-areas strong,
#vng-areas small,
#vng-areas a {
font-family:
"Montserrat",
Arial,
sans-serif !important;
}
/* DETALHE DE FUNDO */
#vng-areas::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
left: 0;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(27, 103, 206, 0.28),
transparent
);
}
/* ======================================================
CONTAINER
====================================================== */
#vng-areas
.vng-careers-areas__container {
position: relative;
z-index: 2;
width: min(1380px, 88%);
margin: 0 auto;
}
/* ======================================================
CABEÇALHO
====================================================== */
#vng-areas
.vng-careers-areas__header {
display: grid;
grid-template-columns:
minmax(0, 1.05fr)
minmax(300px, 0.68fr);
gap: clamp(70px, 9vw, 150px);
align-items: end;
margin-bottom: 61px;
}
/* ======================================================
EYEBROW
====================================================== */
#vng-areas
.vng-careers-areas__eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 27px;
color: var(--vng-areas-blue);
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
letter-spacing: 0.14em !important;
}
#vng-areas
.vng-careers-areas__eyebrow-number {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border:
1px solid var(--vng-areas-line);
border-radius: 50%;
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1 !important;
}
#vng-areas
.vng-careers-areas__eyebrow-line {
display: block;
flex-shrink: 0;
width: 47px;
height: 1px;
background: var(--vng-areas-blue);
}
/* ======================================================
TÍTULO
====================================================== */
#vng-areas
.vng-careers-areas__heading h2 {
max-width: 760px;
margin: 0;
color: var(--vng-areas-navy);
font-size:
clamp(40px, 4vw, 62px) !important;
font-weight: 600 !important;
line-height: 1.12 !important;
letter-spacing: -0.05em !important;
}
#vng-areas
.vng-careers-areas__heading h2 > span {
display: block;
margin-top: 8px;
color: var(--vng-areas-muted);
font-size: inherit !important;
font-weight: 400 !important;
line-height: inherit !important;
letter-spacing: inherit !important;
}
/* ======================================================
INTRODUÇÃO
====================================================== */
#vng-areas
.vng-careers-areas__introduction {
padding-bottom: 4px;
}
#vng-areas
.vng-careers-areas__introduction p {
margin: 0 0 17px !important;
color: var(--vng-areas-navy);
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
letter-spacing: -0.015em !important;
}
#vng-areas
.vng-careers-areas__introduction > span {
display: block;
color: var(--vng-areas-blue);
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase;
}
/* ======================================================
GRADE
====================================================== */
#vng-areas
.vng-careers-areas__grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
background: var(--vng-areas-line);
border:
1px solid var(--vng-areas-line);
border-radius: 4px;
}
/* ======================================================
CARD
====================================================== */
#vng-areas
.vng-careers-area-card {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 390px;
margin: 0;
padding: 31px 29px 27px;
overflow: hidden;
color: var(--vng-areas-navy) !important;
background: #ffffff;
text-decoration: none !important;
transition:
color 0.35s ease,
transform 0.35s ease;
}
/* FUNDO AZUL */
#vng-areas
.vng-careers-area-card::before {
content: "";
position: absolute;
z-index: -2;
inset: 0;
background:
radial-gradient(
circle at 95% 5%,
rgba(43, 126, 220, 0.42),
transparent 42%
),
linear-gradient(
145deg,
#0d3264 0%,
var(--vng-areas-navy-dark) 100%
);
opacity: 0;
transition: opacity 0.35s ease;
}
/* CÍRCULO DECORATIVO */
#vng-areas
.vng-careers-area-card::after {
content: "";
position: absolute;
z-index: -1;
top: -95px;
right: -95px;
width: 200px;
height: 200px;
border:
1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
opacity: 0;
transform: scale(0.75);
transition:
opacity 0.35s ease,
transform 0.55s ease;
}
/* ======================================================
NÚMERO
====================================================== */
#vng-areas
.vng-careers-area-card__number {
color: var(--vng-areas-blue);
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0.12em !important;
transition: color 0.35s ease;
}
/* ======================================================
ÍCONE
====================================================== */
#vng-areas
.vng-careers-area-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
margin: 27px 0 35px;
color: var(--vng-areas-blue);
border:
1px solid var(--vng-areas-line);
border-radius: 50%;
transition:
color 0.35s ease,
background-color 0.35s ease,
border-color 0.35s ease,
transform 0.35s ease;
}
#vng-areas
.vng-careers-area-card__icon svg {
display: block;
width: 41px;
height: 41px;
fill: none;
stroke: currentColor;
stroke-width: 1.45;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ======================================================
CONTEÚDO
====================================================== */
#vng-areas
.vng-careers-area-card__content {
display: flex;
flex-direction: column;
min-height: 135px;
}
#vng-areas
.vng-careers-area-card__content small {
display: block;
margin-bottom: 9px;
color: var(--vng-areas-blue);
font-size: 9px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0.14em !important;
transition: color 0.35s ease;
}
#vng-areas
.vng-careers-area-card__content strong {
display: block;
margin-bottom: 15px;
color: var(--vng-areas-navy);
font-size:
clamp(19px, 1.55vw, 24px) !important;
font-weight: 600 !important;
line-height: 1.27 !important;
letter-spacing: -0.035em !important;
transition: color 0.35s ease;
}
#vng-areas
.vng-careers-area-card__content > span {
color: var(--vng-areas-muted);
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.65 !important;
letter-spacing: -0.005em !important;
transition: color 0.35s ease;
}
/* ======================================================
AÇÃO
====================================================== */
#vng-areas
.vng-careers-area-card__action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: auto;
padding-top: 23px;
border-top:
1px solid var(--vng-areas-line);
color: var(--vng-areas-navy);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
transition:
color 0.35s ease,
border-color 0.35s ease;
}
#vng-areas
.vng-careers-area-card__arrow {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 31px;
height: 31px;
color: var(--vng-areas-blue);
border:
1px solid var(--vng-areas-line);
border-radius: 50%;
transition:
color 0.35s ease,
background-color 0.35s ease,
border-color 0.35s ease,
transform 0.35s ease;
}
#vng-areas
.vng-careers-area-card__arrow svg {
display: block;
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ======================================================
HOVER DOS CARDS
====================================================== */
@media (hover: hover) {
#vng-areas
.vng-careers-area-card:hover {
color: #ffffff !important;
transform: translateY(-5px);
}
#vng-areas
.vng-careers-area-card:hover::before {
opacity: 1;
}
#vng-areas
.vng-careers-area-card:hover::after {
opacity: 1;
transform: scale(1);
}
#vng-areas
.vng-careers-area-card:hover
.vng-careers-area-card__number,
#vng-areas
.vng-careers-area-card:hover
.vng-careers-area-card__content small {
color: var(--vng-areas-blue-light);
}
#vng-areas
.vng-careers-area-card:hover
.vng-careers-area-card__content strong,
#vng-areas
.vng-careers-area-card:hover
.vng-careers-area-card__action {
color: #ffffff;
}
#vng-areas
.vng-careers-area-card:hover
.vng-careers-area-card__content > span {
color: #d8e7f7;
}
#vng-areas
.vng-careers-area-card:hover
.vng-careers-area-card__icon {
color: var(--vng-areas-navy);
background: #ffffff;
border-color: #ffffff;
transform: scale(1.05);
}
#vng-areas
.vng-careers-area-card:hover
.vng-careers-area-card__action {
border-color:
rgba(255, 255, 255, 0.24);
}
#vng-areas
.vng-careers-area-card:hover
.vng-careers-area-card__arrow {
color: var(--vng-areas-navy);
background: #ffffff;
border-color: #ffffff;
transform: rotate(45deg);
}
}
/* ======================================================
OBSERVAÇÃO
====================================================== */
#vng-areas
.vng-careers-areas__notice {
display: grid;
grid-template-columns:
46px
minmax(0, 1fr)
auto;
gap: 20px;
align-items: center;
margin-top: 35px;
padding: 24px 27px;
background: #ffffff;
border:
1px solid var(--vng-areas-line);
border-radius: 3px;
}
#vng-areas
.vng-careers-areas__notice-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
color: var(--vng-areas-blue);
background:
rgba(27, 103, 206, 0.07);
border-radius: 50%;
}
#vng-areas
.vng-careers-areas__notice-icon svg {
display: block;
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
#vng-areas
.vng-careers-areas__notice p {
margin: 0 !important;
color: var(--vng-areas-muted);
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.65 !important;
}
#vng-areas
.vng-careers-areas__notice p strong {
color: var(--vng-areas-navy);
font-weight: 600 !important;
}
#vng-areas
.vng-careers-areas__notice > a {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--vng-areas-navy) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-decoration: none !important;
transition: color 0.25s ease;
}
#vng-areas
.vng-careers-areas__notice > a svg {
display: block;
width: 16px;
height: 16px;
fill: none;
stroke: var(--vng-areas-blue);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.25s ease;
}
@media (hover: hover) {
#vng-areas
.vng-careers-areas__notice > a:hover {
color: var(--vng-areas-blue) !important;
}
#vng-areas
.vng-careers-areas__notice > a:hover svg {
transform: translate(3px, -3px);
}
}
/* ======================================================
ANIMAÇÕES
====================================================== */
#vng-areas
[data-vng-areas-reveal] {
opacity: 0;
transform: translateY(27px);
transition:
opacity 0.7s ease var(--vng-areas-delay, 0ms),
transform 0.7s ease var(--vng-areas-delay, 0ms);
}
#vng-areas
[data-vng-areas-reveal].vng-careers-areas__visible {
opacity: 1;
transform: translateY(0);
}
/* ======================================================
NOTEBOOK
====================================================== */
@media (max-width: 1200px) {
#vng-areas.vng-careers-areas {
padding: 90px 0;
}
#vng-areas
.vng-careers-areas__container {
width: 92%;
}
#vng-areas
.vng-careers-areas__header {
gap: 70px;
}
#vng-areas
.vng-careers-area-card {
min-height: 375px;
padding:
27px
22px
24px;
}
#vng-areas
.vng-careers-area-card__icon {
width: 61px;
height: 61px;
margin-bottom: 30px;
}
#vng-areas
.vng-careers-area-card__icon svg {
width: 37px;
height: 37px;
}
}
/* ======================================================
TABLET
====================================================== */
@media (max-width: 900px) {
#vng-areas.vng-careers-areas {
padding: 78px 0;
}
#vng-areas
.vng-careers-areas__header {
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 48px;
}
#vng-areas
.vng-careers-areas__introduction {
max-width: 680px;
}
#vng-areas
.vng-careers-areas__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
#vng-areas
.vng-careers-area-card {
min-height: 355px;
padding: 29px;
}
#vng-areas
.vng-careers-area-card__content strong {
font-size: 22px !important;
}
}
/* ======================================================
MOBILE
====================================================== */
@media (max-width: 600px) {
#vng-areas.vng-careers-areas {
padding: 65px 0;
}
#vng-areas
.vng-careers-areas__container {
width: 88%;
}
#vng-areas
.vng-careers-areas__header {
gap: 27px;
margin-bottom: 40px;
}
#vng-areas
.vng-careers-areas__eyebrow {
gap: 11px;
margin-bottom: 23px;
font-size: 9px !important;
letter-spacing: 0.11em !important;
}
#vng-areas
.vng-careers-areas__eyebrow-line {
width: 31px;
}
#vng-areas
.vng-careers-areas__heading h2 {
font-size:
clamp(35px, 10vw, 45px) !important;
}
#vng-areas
.vng-careers-areas__heading h2 > span {
margin-top: 12px;
}
#vng-areas
.vng-careers-areas__introduction p {
font-size: 16px !important;
}
#vng-areas
.vng-careers-areas__grid {
grid-template-columns: 1fr;
}
#vng-areas
.vng-careers-area-card {
min-height: 330px;
padding:
27px
25px;
}
#vng-areas
.vng-careers-area-card__icon {
width: 59px;
height: 59px;
margin:
23px
0
27px;
}
#vng-areas
.vng-careers-area-card__content {
min-height: 116px;
}
#vng-areas
.vng-careers-area-card__content strong {
font-size: 22px !important;
}
#vng-areas
.vng-careers-area-card__content > span {
font-size: 14px !important;
}
#vng-areas
.vng-careers-areas__notice {
grid-template-columns:
46px
minmax(0, 1fr);
padding:
22px
20px;
}
#vng-areas
.vng-careers-areas__notice > a {
grid-column: 1 / -1;
justify-content: space-between;
padding-top: 16px;
border-top:
1px solid var(--vng-areas-line);
}
}
/* ======================================================
CELULARES PEQUENOS
====================================================== */
@media (max-width: 390px) {
#vng-areas
.vng-careers-areas__container {
width: 90%;
}
#vng-areas
.vng-careers-areas__heading h2 {
font-size: 34px !important;
}
#vng-areas
.vng-careers-area-card {
min-height: 320px;
}
}
/* ======================================================
FOCO E ACESSIBILIDADE
====================================================== */
#vng-areas a:focus-visible {
z-index: 5;
outline:
3px solid var(--vng-areas-blue);
outline-offset: -4px;
}
@media (prefers-reduced-motion: reduce) {
#vng-areas *,
#vng-areas *::before,
#vng-areas *::after {
animation: none !important;
transition: none !important;
}
#vng-areas
[data-vng-areas-reveal] {
opacity: 1 !important;
transform: none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9118b4e *//* ======================================================
FORMULÁRIO DE CANDIDATURA — GRUPO VNG
====================================================== */
#vng-candidatura.vng-careers-application {
--vng-application-navy: #09254b;
--vng-application-navy-dark: #061b38;
--vng-application-blue: #1b67ce;
--vng-application-blue-light: #76b4f5;
--vng-application-muted: #58718f;
--vng-application-background: #eef3f8;
--vng-application-line: rgba(9, 37, 75, 0.14);
--vng-application-error: #b42318;
--vng-application-success: #18794e;
position: relative;
width: 100%;
max-width: none;
margin: 0;
padding: 110px 0;
overflow: hidden;
color: var(--vng-application-navy);
background: var(--vng-application-background);
}
/* RESET */
#vng-candidatura,
#vng-candidatura *,
#vng-candidatura *::before,
#vng-candidatura *::after {
box-sizing: border-box;
}
#vng-candidatura,
#vng-candidatura h2,
#vng-candidatura h3,
#vng-candidatura p,
#vng-candidatura span,
#vng-candidatura strong,
#vng-candidatura label,
#vng-candidatura input,
#vng-candidatura select,
#vng-candidatura textarea,
#vng-candidatura button,
#vng-candidatura a {
font-family:
"Montserrat",
Arial,
sans-serif !important;
}
/* ======================================================
CONTAINER
====================================================== */
#vng-candidatura
.vng-careers-application__container {
display: grid;
grid-template-columns:
minmax(330px, 0.76fr)
minmax(0, 1.24fr);
gap: clamp(55px, 7vw, 110px);
align-items: start;
width: min(1380px, 88%);
margin: 0 auto;
}
/* ======================================================
COLUNA INFORMATIVA
====================================================== */
#vng-candidatura
.vng-careers-application__information {
position: sticky;
top: 110px;
min-width: 0;
}
/* EYEBROW */
#vng-candidatura
.vng-careers-application__eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 27px;
color: var(--vng-application-blue);
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
letter-spacing: 0.14em !important;
}
#vng-candidatura
.vng-careers-application__eyebrow-number {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border:
1px solid var(--vng-application-line);
border-radius: 50%;
font-size: 10px !important;
}
#vng-candidatura
.vng-careers-application__eyebrow-line {
display: block;
flex-shrink: 0;
width: 47px;
height: 1px;
background: var(--vng-application-blue);
}
/* TÍTULO */
#vng-candidatura
.vng-careers-application__information h2 {
margin: 0 0 27px;
color: var(--vng-application-navy);
font-size:
clamp(40px, 4vw, 61px) !important;
font-weight: 600 !important;
line-height: 1.12 !important;
letter-spacing: -0.05em !important;
}
#vng-candidatura
.vng-careers-application__information h2 > span {
display: block;
margin-top: 8px;
color: var(--vng-application-muted);
font-size: inherit !important;
font-weight: 400 !important;
line-height: inherit !important;
}
/* DESCRIÇÃO */
#vng-candidatura
.vng-careers-application__description {
max-width: 530px;
margin: 0 0 43px !important;
color: var(--vng-application-muted);
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
}
/* ======================================================
ETAPAS
====================================================== */
#vng-candidatura
.vng-careers-application__steps {
border-top:
1px solid var(--vng-application-line);
}
#vng-candidatura
.vng-careers-application__step {
display: grid;
grid-template-columns:
38px
minmax(0, 1fr);
gap: 17px;
padding: 23px 0;
border-bottom:
1px solid var(--vng-application-line);
}
#vng-candidatura
.vng-careers-application__step > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--vng-application-blue);
background: #ffffff;
border-radius: 50%;
font-size: 10px !important;
font-weight: 600 !important;
}
#vng-candidatura
.vng-careers-application__step strong {
display: block;
margin-bottom: 5px;
color: var(--vng-application-navy);
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
}
#vng-candidatura
.vng-careers-application__step p {
margin: 0 !important;
color: var(--vng-application-muted);
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
}
/* PRIVACIDADE */
#vng-candidatura
.vng-careers-application__privacy {
display: grid;
grid-template-columns:
42px
minmax(0, 1fr);
gap: 15px;
align-items: center;
margin-top: 31px;
padding: 19px;
background:
rgba(255, 255, 255, 0.67);
border:
1px solid var(--vng-application-line);
border-radius: 3px;
}
#vng-candidatura
.vng-careers-application__privacy-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: var(--vng-application-blue);
background:
rgba(27, 103, 206, 0.08);
border-radius: 50%;
}
#vng-candidatura
.vng-careers-application__privacy-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
#vng-candidatura
.vng-careers-application__privacy p {
margin: 0 !important;
color: var(--vng-application-muted);
font-size: 12px !important;
line-height: 1.6 !important;
}
/* ======================================================
ÁREA DO FORMULÁRIO
====================================================== */
#vng-candidatura
.vng-careers-application__form-area {
min-width: 0;
padding:
clamp(35px, 4vw, 58px);
background: #ffffff;
border:
1px solid var(--vng-application-line);
border-radius: 5px;
box-shadow:
0 25px 65px rgba(9, 37, 75, 0.1);
}
/* CABEÇALHO DO FORMULÁRIO */
#vng-candidatura
.vng-careers-application__form-header {
margin-bottom: 39px;
padding-bottom: 28px;
border-bottom:
1px solid var(--vng-application-line);
}
#vng-candidatura
.vng-careers-application__form-header > span {
display: block;
margin-bottom: 9px;
color: var(--vng-application-blue);
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0.15em !important;
}
#vng-candidatura
.vng-careers-application__form-header h3 {
margin: 0 0 9px;
color: var(--vng-application-navy);
font-size:
clamp(27px, 2.5vw, 37px) !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: -0.04em !important;
}
#vng-candidatura
.vng-careers-application__form-header p {
margin: 0 !important;
color: var(--vng-application-muted);
font-size: 13px !important;
line-height: 1.6 !important;
}
/* ======================================================
GRADE DO FORMULÁRIO
====================================================== */
#vng-candidatura
.vng-careers-form {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
25px
22px;
}
#vng-candidatura
.vng-careers-form__group {
min-width: 0;
}
#vng-candidatura
.vng-careers-form__group--full,
#vng-candidatura
.vng-careers-form__status,
#vng-candidatura
.vng-careers-form__submit-wrap {
grid-column: 1 / -1;
}
/* ======================================================
LABELS
====================================================== */
#vng-candidatura
.vng-careers-form__group > label:not(
.vng-careers-form__upload
):not(
.vng-careers-form__consent
) {
display: block;
margin-bottom: 9px;
color: var(--vng-application-navy);
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
}
#vng-candidatura
.vng-careers-form__group > label span {
color: var(--vng-application-blue);
}
/* ======================================================
CAMPOS
====================================================== */
#vng-candidatura
.vng-careers-form input:not(
[type="file"]
):not(
[type="checkbox"]
),
#vng-candidatura
.vng-careers-form select,
#vng-candidatura
.vng-careers-form textarea {
display: block;
width: 100%;
margin: 0;
color: var(--vng-application-navy);
background: #f8fafc;
border:
1px solid rgba(9, 37, 75, 0.19);
border-radius: 3px;
outline: none;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background-color 0.25s ease;
}
#vng-candidatura
.vng-careers-form input:not(
[type="file"]
):not(
[type="checkbox"]
),
#vng-candidatura
.vng-careers-form select {
height: 55px;
padding: 0 16px;
}
#vng-candidatura
.vng-careers-form textarea {
min-height: 145px;
padding: 15px 16px;
resize: vertical;
}
#vng-candidatura
.vng-careers-form input::placeholder,
#vng-candidatura
.vng-careers-form textarea::placeholder {
color: #8192a7;
opacity: 1;
}
#vng-candidatura
.vng-careers-form input:focus,
#vng-candidatura
.vng-careers-form select:focus,
#vng-candidatura
.vng-careers-form textarea:focus {
background: #ffffff;
border-color: var(--vng-application-blue);
box-shadow:
0 0 0 3px rgba(27, 103, 206, 0.11);
}
/* SELECT */
#vng-candidatura
.vng-careers-form__select-wrap {
position: relative;
}
#vng-candidatura
.vng-careers-form__select-wrap select {
padding-right: 47px;
appearance: none;
-webkit-appearance: none;
}
#vng-candidatura
.vng-careers-form__select-wrap > svg {
position: absolute;
top: 50%;
right: 17px;
width: 17px;
height: 17px;
pointer-events: none;
fill: none;
stroke: var(--vng-application-blue);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transform: translateY(-50%);
}
/* NOTA */
#vng-candidatura
.vng-careers-form__field-note {
display: block;
margin-top: 7px;
color: var(--vng-application-muted) !important;
font-size: 11px !important;
line-height: 1.5 !important;
}
/* ======================================================
UPLOAD
====================================================== */
#vng-candidatura
.vng-careers-form__file-input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
#vng-candidatura
.vng-careers-form__upload {
display: grid;
grid-template-columns:
49px
minmax(0, 1fr)
auto;
gap: 17px;
align-items: center;
min-height: 92px;
padding: 17px 18px;
background:
rgba(27, 103, 206, 0.035);
border:
1px dashed rgba(27, 103, 206, 0.43);
border-radius: 4px;
cursor: pointer;
transition:
background-color 0.25s ease,
border-color 0.25s ease;
}
#vng-candidatura
.vng-careers-form__upload-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 49px;
height: 49px;
color: var(--vng-application-blue);
background: #ffffff;
border:
1px solid var(--vng-application-line);
border-radius: 50%;
}
#vng-candidatura
.vng-careers-form__upload-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
#vng-candidatura
.vng-careers-form__upload-content strong {
display: block;
margin-bottom: 4px;
color: var(--vng-application-navy);
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
}
#vng-candidatura
.vng-careers-form__upload-content > span {
display: block;
overflow: hidden;
color: var(--vng-application-muted);
font-size: 11px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
text-overflow: ellipsis;
white-space: nowrap;
}
#vng-candidatura
.vng-careers-form__upload-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 8px 14px;
color: #ffffff !important;
background: var(--vng-application-navy);
border-radius: 3px;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
#vng-candidatura
.vng-careers-form__upload:hover {
background:
rgba(27, 103, 206, 0.07);
border-color: var(--vng-application-blue);
}
#vng-candidatura
.vng-careers-form__file-input:focus-visible +
* {
outline:
3px solid var(--vng-application-blue);
}
/* ======================================================
CONSENTIMENTO
====================================================== */
#vng-candidatura
.vng-careers-form__consent {
display: grid;
grid-template-columns:
23px
minmax(0, 1fr);
gap: 12px;
align-items: flex-start;
cursor: pointer;
}
#vng-candidatura
.vng-careers-form__consent input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
#vng-candidatura
.vng-careers-form__checkbox {
display: inline-flex;
align-items: center;
justify-content: center;
width: 23px;
height: 23px;
color: #ffffff;
background: #ffffff;
border:
1px solid rgba(9, 37, 75, 0.25);
border-radius: 3px;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
#vng-candidatura
.vng-careers-form__checkbox svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
}
#vng-candidatura
.vng-careers-form__consent input:checked +
.vng-careers-form__checkbox {
background: var(--vng-application-blue);
border-color: var(--vng-application-blue);
}
#vng-candidatura
.vng-careers-form__consent input:checked +
.vng-careers-form__checkbox svg {
opacity: 1;
}
#vng-candidatura
.vng-careers-form__consent input:focus-visible +
.vng-careers-form__checkbox {
outline:
3px solid rgba(27, 103, 206, 0.22);
outline-offset: 2px;
}
#vng-candidatura
.vng-careers-form__consent-text {
color: var(--vng-application-muted) !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.65 !important;
}
#vng-candidatura
.vng-careers-form__consent-text a {
color: var(--vng-application-blue) !important;
font-weight: 500 !important;
text-decoration: underline !important;
}
/* ======================================================
MENSAGEM DE STATUS
====================================================== */
#vng-candidatura
.vng-careers-form__status {
display: none;
padding: 15px 17px;
border-radius: 3px;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
}
#vng-candidatura
.vng-careers-form__status--success {
display: block;
color: #11603d;
background: #e8f7ef;
border: 1px solid #a8dfc3;
}
#vng-candidatura
.vng-careers-form__status--error {
display: block;
color: #922018;
background: #fff0ee;
border: 1px solid #f2b6b0;
}
/* ======================================================
BOTÃO DE ENVIO
====================================================== */
#vng-candidatura
.vng-careers-form__submit-wrap {
display: flex;
align-items: center;
gap: 22px;
padding-top: 5px;
}
#vng-candidatura
.vng-careers-form__submit {
position: relative;
isolation: isolate;
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: 28px;
min-width: 255px;
min-height: 59px;
padding: 10px 11px 10px 23px;
overflow: hidden;
color: #ffffff;
background:
linear-gradient(
110deg,
#155cb9,
#2879dc 52%,
#155cb9
);
border:
1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
box-shadow:
0 13px 28px rgba(9, 37, 75, 0.18);
cursor: pointer;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
opacity 0.3s ease;
}
#vng-candidatura
.vng-careers-form__submit::before {
content: "";
position: absolute;
z-index: -1;
top: -40%;
bottom: -40%;
left: -65%;
width: 38%;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.32),
transparent
);
transform: skewX(-22deg);
animation:
vngCareerSubmitShine 5s ease-in-out infinite;
}
@keyframes vngCareerSubmitShine {
0%,
57% {
left: -65%;
}
80%,
100% {
left: 135%;
}
}
#vng-candidatura
.vng-careers-form__submit-text {
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
#vng-candidatura
.vng-careers-form__submit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 37px;
height: 37px;
color: var(--vng-application-navy);
background: #ffffff;
border-radius: 50%;
transition:
color 0.3s ease,
background-color 0.3s ease,
transform 0.3s ease;
}
#vng-candidatura
.vng-careers-form__submit-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#vng-candidatura
.vng-careers-form__submit-wrap > p {
max-width: 290px;
margin: 0 !important;
color: var(--vng-application-muted);
font-size: 11px !important;
line-height: 1.55 !important;
}
#vng-candidatura
.vng-careers-form__submit:hover {
transform: translateY(-2px);
box-shadow:
0 17px 34px rgba(9, 37, 75, 0.25);
}
#vng-candidatura
.vng-careers-form__submit:hover
.vng-careers-form__submit-icon {
color: #ffffff;
background: var(--vng-application-navy);
transform: rotate(45deg);
}
#vng-candidatura
.vng-careers-form__submit:disabled {
opacity: 0.65;
cursor: wait;
transform: none;
}
/* ======================================================
ANIMAÇÃO DE ENTRADA
====================================================== */
#vng-candidatura
[data-vng-application-reveal] {
opacity: 0;
transform: translateY(27px);
transition:
opacity 0.7s ease var(--vng-application-delay, 0ms),
transform 0.7s ease var(--vng-application-delay, 0ms);
}
#vng-candidatura
[data-vng-application-reveal].vng-careers-application__visible {
opacity: 1;
transform: translateY(0);
}
/* ======================================================
TABLET
====================================================== */
@media (max-width: 900px) {
#vng-candidatura.vng-careers-application {
padding: 78px 0;
}
#vng-candidatura
.vng-careers-application__container {
grid-template-columns: 1fr;
gap: 48px;
width: 90%;
}
#vng-candidatura
.vng-careers-application__information {
position: static;
}
#vng-candidatura
.vng-careers-application__description {
max-width: 700px;
}
#vng-candidatura
.vng-careers-application__steps {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
border-bottom:
1px solid var(--vng-application-line);
}
#vng-candidatura
.vng-careers-application__step {
grid-template-columns: 1fr;
gap: 13px;
padding: 22px 17px;
border-bottom: 0;
}
#vng-candidatura
.vng-careers-application__step +
.vng-careers-application__step {
border-left:
1px solid var(--vng-application-line);
}
}
/* ======================================================
MOBILE
====================================================== */
@media (max-width: 600px) {
#vng-candidatura.vng-careers-application {
padding: 65px 0;
}
#vng-candidatura
.vng-careers-application__container {
width: 88%;
}
#vng-candidatura
.vng-careers-application__eyebrow {
gap: 11px;
font-size: 9px !important;
letter-spacing: 0.11em !important;
}
#vng-candidatura
.vng-careers-application__eyebrow-line {
width: 31px;
}
#vng-candidatura
.vng-careers-application__information h2 {
font-size:
clamp(35px, 10vw, 45px) !important;
}
#vng-candidatura
.vng-careers-application__description {
font-size: 15px !important;
}
#vng-candidatura
.vng-careers-application__steps {
display: block;
}
#vng-candidatura
.vng-careers-application__step {
grid-template-columns:
38px
minmax(0, 1fr);
padding: 20px 0;
border-bottom:
1px solid var(--vng-application-line);
}
#vng-candidatura
.vng-careers-application__step +
.vng-careers-application__step {
border-left: 0;
}
#vng-candidatura
.vng-careers-application__form-area {
padding:
31px
20px;
}
#vng-candidatura
.vng-careers-form {
grid-template-columns: 1fr;
}
#vng-candidatura
.vng-careers-form__group,
#vng-candidatura
.vng-careers-form__group--full,
#vng-candidatura
.vng-careers-form__status,
#vng-candidatura
.vng-careers-form__submit-wrap {
grid-column: auto;
}
#vng-candidatura
.vng-careers-form__upload {
grid-template-columns:
45px
minmax(0, 1fr);
gap: 14px;
}
#vng-candidatura
.vng-careers-form__upload-button {
grid-column: 1 / -1;
width: 100%;
}
#vng-candidatura
.vng-careers-form__upload-content > span {
white-space: normal;
}
#vng-candidatura
.vng-careers-form__submit-wrap {
align-items: stretch;
flex-direction: column;
}
#vng-candidatura
.vng-careers-form__submit {
width: 100%;
min-width: 0;
}
#vng-candidatura
.vng-careers-form__submit-wrap > p {
max-width: none;
}
}
/* ======================================================
ACESSIBILIDADE
====================================================== */
@media (prefers-reduced-motion: reduce) {
#vng-candidatura *,
#vng-candidatura *::before,
#vng-candidatura *::after {
animation: none !important;
transition: none !important;
}
#vng-candidatura
[data-vng-application-reveal] {
opacity: 1 !important;
transform: none !important;
}
}/* End custom CSS */
/* Start custom CSS */
/* End custom CSS */