/* As fontes (Outfit + Satoshi) são carregadas pelo no do index.html/404.html,
não por @import: um @import aqui só começa a baixar depois que este arquivo chega,
atrasando a primeira pintura. */
/*
---------------------------------
Design System & Tokens (High-End)
---------------------------------
*/
:root {
/* Colors */
--bg-color: #1C2339;
--surface-color: #272E46;
--surface-color-light: #323A54;
--text-primary: #FFFBFF;
--text-secondary: #A3ADC2;
/* Brand Accents */
--accent-color: #FE633D; /* Coral Red */
--accent-ink: #FFFBFF; /* texto sobre o coral */
--brand-glow: rgba(254, 99, 61, 0.06);
/* Tom intermediário (areia): fundos e citações que precisam de calor sem puxar o coral,
que já carrega botões, links e destaques. */
--sand-color: #E8DCCD;
--sand-soft: rgba(232, 220, 205, 0.09);
--sand-line: rgba(232, 220, 205, 0.22);
/* Typography (Fontshare): Outfit nos títulos e frases grandes, Satoshi no texto corrido
e nos rótulos pequenos (menu, pills, badges) — corpo pequeno lê melhor numa fonte de
menor contraste de traço e x-height maior. Também evita um defeito real da Outfit: no
peso 700 (usado nesses rótulos), o acento do "Í"/"É" maiúsculo sai desconectado da
letra — em texto grande vira um espaço estranho acima da letra, em texto pequeno vira
um pontinho solto (ex.: "DISPONÍVEL" no botão do menu). Testado isolado: Satoshi não
tem esse problema em nenhum tamanho. */
--font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-nav: var(--font-sans);
/* Spacing */
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 8rem;
/* Easing */
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
/* Cards "vidro" (glassmorphism): --surface-color em rgba, para o backdrop-filter ter o que borrar */
--glass-bg: rgba(39, 46, 70, 0.6);
--glass-bg-strong: rgba(50, 58, 84, 0.7); /* cards "featured" */
--glass-border-a: rgba(254, 99, 61, 0.5);
--glass-border-b: rgba(255, 251, 255, 0.06);
}
/* Ângulo animável da borda em gradiente dos cards de vidro (ver "Cards de Vidro" abaixo).
Sem suporte a @property (Houdini), o navegador ignora isto — a borda fica só estática. */
@property --glass-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
/*
---------------------------------
Reset & Base
---------------------------------
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*
---------------------------------
Cards de Vidro (glassmorphism)
---------------------------------
Substitui o padrão "fundo sólido + borda 1px reta" nos cards de projetos, serviços,
depoimentos e planos: fundo translúcido borrado (backdrop-filter) + borda em gradiente
girando lentamente + brilho interno sutil. Cada seletor mantém seu próprio border-radius
e padding (definidos nos blocos originais, em styles.css/sections.css/cases.css) — aqui
só o tratamento de fundo/borda/hover é compartilhado.
A borda é um ::after com padding+mask (a técnica padrão de "borda em gradiente"):
um z-index:-1 NÃO funciona aqui — por especificação, um descendente de z-index
negativo pinta ACIMA do próprio background do elemento que cria o contexto, não
atrás dele (foi o que vazou o gradiente por cima do card inteiro na 1ª tentativa).
A máscara recorta só o anel de 1px do gradiente, então o ::after pode ficar por
cima em DOM/z-index normal sem cobrir o conteúdo. ::before segue livre em todos
(o testimonial-card usa ::before para as aspas).
*/
.service-card,
.testimonial-card,
.plan-card,
.case-card,
.case-featured {
position: relative;
background-color: var(--glass-bg);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 46px rgba(254, 99, 61,0.05);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
}
.service-card::after,
.testimonial-card::after,
.plan-card::after,
.case-card::after,
.case-featured::after {
content: "";
position: absolute;
inset: 0;
padding: 1px; /* espessura da borda */
border-radius: inherit;
background: conic-gradient(from var(--glass-angle, 0deg),
var(--glass-border-a), var(--glass-border-b) 30%,
var(--glass-border-a) 55%, var(--glass-border-b) 85%,
var(--glass-border-a));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: glass-rotate 10s linear infinite;
pointer-events: none;
}
.service-card.featured,
.plan-card.featured {
background-color: var(--glass-bg-strong);
}
.service-card.featured::after,
.plan-card.featured::after {
/* mesma rotação, mas sem o trecho neutro — a borda "acesa" o tempo todo marca o destaque */
background: conic-gradient(from var(--glass-angle, 0deg),
var(--glass-border-a), rgba(254, 99, 61,0.85) 25%,
var(--glass-border-a) 55%, rgba(254, 99, 61,0.85) 80%,
var(--glass-border-a));
}
.service-card:hover,
.testimonial-card:hover,
.plan-card:hover,
.case-card:hover,
.case-featured:hover {
transform: translateY(-4px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 0 60px rgba(254, 99, 61,0.09), 0 20px 40px rgba(0,0,0,0.25);
}
@keyframes glass-rotate {
to { --glass-angle: 360deg; }
}
/* Lenis Recommended CSS */
html.lenis, html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
body {
font-family: var(--font-sans);
font-size: 1.0625rem;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.65;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 5%;
}
/*
---------------------------------
Ambient Glows & Grid (Background)
---------------------------------
*/
.background-grid {
position: fixed;
inset: -100%;
width: 300%;
height: 300%;
background-size: 60px 60px;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
z-index: -2;
pointer-events: none;
transform-origin: center center;
transition: transform 0.1s linear; /* Para parallax suave */
}
.glow-sphere {
position: fixed;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%);
filter: blur(80px);
z-index: -1;
pointer-events: none;
will-change: transform;
}
.glow-1 { top: -200px; left: -200px; }
.glow-2 { bottom: -200px; right: -200px; }
/* Brilho interativo que segue o mouse */
.glow-mouse {
top: 0; left: 0;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(254, 99, 61, 0.045) 0%, transparent 60%);
filter: blur(70px);
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.6s ease;
}
/* Grain dinâmico (Film Grain em movimento) */
.grain-overlay {
position: fixed;
inset: -200%;
width: 500%;
height: 500%;
z-index: 500;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px 200px;
opacity: 0.045;
mix-blend-mode: overlay;
pointer-events: none;
animation: grain-dance 0.4s steps(2) infinite;
}
@keyframes grain-dance {
0% { transform: translate(0, 0); }
25% { transform: translate(-20px, 20px); }
50% { transform: translate(20px, -20px); }
75% { transform: translate(-20px, -20px); }
100% { transform: translate(20px, 20px); }
}
/* Glows por seção: em vez de só os dois fixos de canto, cada seção de conteúdo ganha
um brilho próprio (mesma técnica, sem acompanhar o scroll) pra não deixar o fundo
chapado nas partes do meio da página. */
.section-glow {
position: absolute;
top: 80px;
width: 480px;
height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(254, 99, 61, 0.11) 0%, transparent 70%);
filter: blur(90px);
z-index: 0;
pointer-events: none;
}
/* O da direita encosta na borda em vez de vazar 160px: transbordo à direita aumenta a
largura rolável da página (à esquerda o navegador ignora). Como é um degradê radial
que já termina transparente, encostar na borda não muda o que se vê. */
.section-glow--left { left: -160px; }
.section-glow--right { right: 0; }
.section {
position: relative;
}
.section > .container {
position: relative;
z-index: 1;
}
.glow-2 { bottom: -200px; right: -200px; }
/*
---------------------------------
Header & Navigation
---------------------------------
*/
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
transition: transform 0.45s var(--ease-out-expo), opacity 0.35s ease;
}
/* Menu "encolhe" ao rolar (js/ui.js PS.initHeaderShrink). O selo da logo gira devagar
feito um selo/moeda enquanto compacto.
No desktop a barra é full-bleed (fundo até a borda + border-bottom): dar padding ao
.header ao compactar empurrava a barra inteira 0.75rem para baixo e 5% para dentro de
uma vez só — e padding não está na transition do .header, então o salto era instantâneo.
O recuo do mobile (barra flutuante arredondada) mora no bloco @media e continua valendo. */
/* A logo ao lado de Priscila Santos não deve se mexer */
.logo-badge {
animation: none !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
.header { transition: none; }
}
.side-rail {
display: none;
}
/* A barra some com deslizamento suave para cima ao rolar. No desktop ao passar do topo,
e no mobile após sair da seção hero (js/ui.js initHeaderShrink) */
.header.is-hidden {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
@media (min-width: 901px) {
/* Menu flutuante lateral (desktop): nomes visíveis e sem caixa ao redor,
posicionado discretamente na margem direita da tela */
.side-rail {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.55rem;
position: fixed;
right: 1.5rem;
top: 50%;
transform: translateY(-50%) translateX(10px);
z-index: 95;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo);
user-select: none;
}
.header.is-hidden ~ .side-rail {
opacity: 1;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
}
/* Folga à direita nas seções em telas médias para o conteúdo nunca encavalar com os nomes */
@media (max-width: 1480px) {
.section > .container {
padding-right: 160px;
}
}
}
.side-dot {
position: relative;
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.25rem 0.5rem;
border-radius: 20px;
text-decoration: none;
background: transparent;
transition: all 0.2s ease;
}
.side-dot-pip {
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
transition: transform 0.25s var(--ease-out-expo), background-color 0.25s ease, box-shadow 0.25s ease;
}
.side-dot-label {
font-family: var(--font-nav);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-secondary);
white-space: nowrap;
transition: color 0.2s ease, opacity 0.2s ease;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6);
}
/* Hover */
.side-dot:hover .side-dot-pip {
background-color: var(--text-primary);
transform: scale(1.3);
}
.side-dot:hover .side-dot-label {
color: var(--text-primary);
}
/* Ativo (seção selecionada pelo scroll-spy) */
.side-dot.is-active .side-dot-pip {
background-color: var(--accent-color);
transform: scale(1.4);
box-shadow: 0 0 8px rgba(254, 99, 61, 0.6);
}
.side-dot.is-active .side-dot-label {
color: var(--accent-color);
font-weight: 700;
}
.side-home-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
color: inherit;
transition: transform 0.25s var(--ease-out-expo), color 0.2s ease;
}
.side-dot.side-home:hover .side-home-icon {
transform: scale(1.2);
color: var(--text-primary);
}
.side-dot.side-home.is-active .side-home-icon {
color: var(--accent-color);
transform: scale(1.2);
}
.nav-container {
display: flex;
justify-content: flex-start;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 1.35rem 5% 1.35rem 1.5rem;
background: rgba(28, 35, 57, 0.4);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
transition: padding 0.4s var(--ease-out-expo), background-color 0.4s ease;
}
.header.is-compact .nav-container {
padding: 1.1rem 5% 1.1rem 1.5rem;
background: rgba(28, 35, 57, 0.82);
}
/* margin-right é um piso de afastamento: o margin-left:auto do .nav-menu só separa
enquanto sobra espaço na linha — quando acaba, ele colapsa para 0 e a logo encostaria
no primeiro link. */
.brand-logo {
display: flex;
align-items: center;
gap: 0.75rem;
margin-right: 1.75rem;
text-decoration: none;
color: var(--text-primary);
flex-shrink: 0;
}
/* Divisor entre marca e navegação: separa os dois grupos sem depender de quanto espaço
sobrou na linha, que era o que fazia a logo parecer colada nos links. */
.brand-logo::after {
content: '';
width: 1px;
height: 26px;
margin-left: 1rem;
background: rgba(255, 255, 255, 0.14);
flex-shrink: 0;
}
/* flex-shrink: 0 + aspect-ratio: sem isso o flex espremia o selo na horizontal quando a
linha ficava apertada e o círculo virava elipse. */
.logo-badge {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.2rem;
background: var(--accent-color);
color: var(--bg-color);
width: 40px;
height: 40px;
aspect-ratio: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.logo-name {
font-family: var(--font-nav);
font-weight: 700;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.logo-name .dot {
color: var(--accent-color);
}
.nav-menu {
display: flex;
align-items: center;
gap: 0.35rem;
margin-left: auto;
margin-right: 2.5rem;
counter-reset: nav-idx;
position: relative;
}
/* Pastilha da seção atual: um único elemento que desliza entre os itens, em vez de cada
link acender o seu. O JS (initNavSpy) só escreve width e translateX; a transição daqui
é que faz o deslocamento ser suave. */
.nav-indicator {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0;
border-radius: 50px;
background: rgba(254, 99, 61, 0.13);
border: 1px solid rgba(254, 99, 61, 0.34);
opacity: 0;
pointer-events: none;
transition: transform 0.45s var(--ease-out-expo), width 0.45s var(--ease-out-expo), opacity 0.25s ease;
}
.nav-menu.has-active .nav-indicator {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.nav-indicator { transition: opacity 0.25s ease; }
}
.nav-link {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
color: var(--text-secondary);
text-decoration: none;
font-family: var(--font-nav);
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
padding: 0.55rem 0.95rem;
white-space: nowrap;
position: relative;
transition: color 0.25s ease;
counter-increment: nav-idx;
}
/* Número gerado por CSS (counter), não hardcoded no HTML: adicionar/remover um link
renumera os outros sozinho, sem precisar editar cada item à mão. */
.nav-link-idx {
font-size: 0.72rem;
font-weight: 500;
color: var(--accent-color);
opacity: 0.7;
transition: opacity 0.25s ease;
}
.nav-link-idx::before {
content: "0" counter(nav-idx);
}
.nav-link:hover .nav-link-idx,
.nav-link.is-active .nav-link-idx {
opacity: 1;
}
/* Sublinhado só de hover. A seção atual é marcada pela pastilha deslizante (.nav-indicator):
manter os dois no item ativo deixava a marcação duplicada. */
.nav-link::after {
content: '';
position: absolute;
left: 0.95rem;
right: 0.95rem;
bottom: 0.2rem;
height: 1px;
background-color: var(--text-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s var(--ease-out-expo);
}
.nav-link:hover,
.nav-link:focus-visible {
color: var(--text-primary);
}
.nav-link:hover::after {
transform: scaleX(1);
}
.nav-link.is-active {
color: var(--accent-color);
}
.nav-link.is-active::after {
transform: scaleX(0);
}
/* Pill Button */
.btn-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background-color: var(--surface-color-light);
color: var(--text-primary);
text-decoration: none;
padding: 0.7rem 1.25rem;
border-radius: 50px;
font-family: var(--font-nav);
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s ease;
}
.btn-pill:hover {
background-color: var(--accent-color);
color: var(--bg-color);
}
/* Instagram link no menu superior (com os tons do site) */
.nav-instagram {
display: inline-flex;
align-items: center;
gap: 0.55rem;
background-color: var(--surface-color-light);
color: var(--text-primary);
text-decoration: none;
padding: 0.65rem 1.2rem;
border-radius: 50px;
font-family: var(--font-nav);
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.8px;
border: 1px solid rgba(255, 255, 255, 0.12);
transition: all 0.3s var(--ease-out-expo);
}
.nav-instagram-icon {
width: 17px;
height: 17px;
color: var(--accent-color);
flex-shrink: 0;
transition: color 0.3s ease, transform 0.3s ease;
}
.nav-instagram:hover {
background-color: var(--accent-color);
color: var(--bg-color);
border-color: var(--accent-color);
box-shadow: 0 4px 16px rgba(254, 99, 61, 0.35);
transform: translateY(-1px);
}
.nav-instagram:hover .nav-instagram-icon {
color: var(--bg-color);
transform: scale(1.1);
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #4ade80;
box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
/*
---------------------------------
Hero Section
---------------------------------
*/
.hero-section {
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 10vh;
position: relative;
}
.hero-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 1200px;
width: 100%;
}
.hero-tag-wrap {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
/* estado inicial movido para o bloco .js (ver "Fallback sem JS") */
}
.pill-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 50px;
font-size: 0.88rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.availability-badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 1.25rem;
border-radius: 50px;
background: var(--accent-color);
color: var(--accent-ink);
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.availability-badge .status-indicator {
background-color: var(--accent-ink);
box-shadow: none;
}
/* Typography Reveal using SplitType requires specific line-heights and hidden overflow */
.hero-title {
font-family: var(--font-display);
/* "Comunicação," precisa caber numa linha: se não couber, o SplitType (palavras inline-block)
quebra a palavra no meio. O 7vw deixa folga na
largura mais apertada (390px). Ver tests/layout.test.mjs */
font-size: clamp(1.4rem, 7vw, 5.6rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: 2rem;
color: var(--text-primary);
/* The .line elements generated by split-type will get overflow:hidden via JS */
}
/* Acima de 900px a coluna de texto do hero divide espaço com o retrato (.hero-copy em effects.css):
o vw usado no clamp acima foi calibrado para a largura cheia do container, então precisa de um
fator menor aqui para "Comunicação," continuar cabendo na coluna mais estreita. */
@media (min-width: 901px) {
.hero-title {
font-size: clamp(1.8rem, 3.6vw, 2.9rem);
}
}
/* Para quem ela trabalha — abaixo da chamada do contato */
.contact-audience {
max-width: 52ch;
margin-top: 1rem;
padding: 0.85rem 1rem;
border-left: 2px solid var(--sand-line);
border-radius: 0 10px 10px 0;
background: var(--sand-soft);
font-size: 1.08rem;
line-height: 1.6;
color: var(--text-secondary);
}
/* Mesma caixa do parágrafo acima, com a borda em laranja: separa o recado
"aberta a oportunidades" do recado pra cliente sem virar outro bloco. */
.contact-audience--work {
border-left-color: var(--accent-color);
background: rgba(254, 99, 61, 0.07);
}
.contact-audience--work strong {
color: var(--text-primary);
font-weight: 600;
}
.hero-actions {
display: flex;
justify-content: center;
gap: 1.5rem;
/* estado inicial movido para o bloco .js (ver "Fallback sem JS") */
}
/* NESH Style Buttons */
.btn-primary-nesh {
display: inline-flex;
align-items: center;
gap: 1rem;
background: var(--accent-color);
color: var(--bg-color);
padding: 1.25rem 2.5rem;
border-radius: 50px;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
text-decoration: none;
transition: transform 0.3s var(--ease-out-expo);
}
.btn-primary-nesh:hover {
transform: scale(1.05);
}
.btn-arrow {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.btn-primary-nesh:hover .btn-arrow {
transform: translateX(5px);
}
.btn-ghost-nesh {
display: inline-flex;
align-items: center;
padding: 1.25rem 0;
color: var(--text-primary);
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.3);
transition: border-color 0.3s ease;
}
.btn-ghost-nesh:hover {
border-color: var(--text-primary);
}
/*
---------------------------------
Infinite Strip
---------------------------------
*/
.infinite-strip {
width: 100%;
background: rgba(255, 255, 255, 0.02);
color: var(--text-primary);
padding: 1.5rem 0;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.strip-track {
display: inline-flex;
white-space: nowrap;
animation: scroll-strip 30s linear infinite;
}
.strip-item {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.98rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-ink);
margin-right: 3rem;
}
@keyframes scroll-strip {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* Requires duplicated content in HTML */
}
/*
---------------------------------
Sections Base
---------------------------------
*/
.section {
padding: var(--space-2xl) 0;
}
.section-header {
margin-bottom: var(--space-xl);
max-width: 800px;
}
.section-subtitle {
display: block;
font-size: 0.98rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-color);
margin-bottom: 1rem;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 7.6vw, 4rem); /* "Selecionados" ~10.8em: cabe em (largura útil / 10.8) */
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.section-lead {
font-size: 1.2rem;
color: var(--text-secondary);
font-weight: 300;
}
/*
---------------------------------
Selected Work Grid
---------------------------------
*/
.work-section {
background-color: var(--bg-color);
}
.work-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
/*
Fallback sem JS / CDN fora do ar:
os estados iniciais só se aplicam quando o script inline do marcou html.js.
O main.js remove a classe `js-pending` assim que a animação assume (ou após timeout),
garantindo que nada fique invisível se GSAP não carregar.
*/
.js.js-pending .gsap-reveal,
.js.js-pending .hero-actions,
.js.js-pending .header {
opacity: 0;
}
.js.js-pending .gsap-reveal {
transform: translateY(50px);
}
.work-card {
background-color: var(--surface-color);
border-radius: 16px;
padding: 3rem;
border: 1px solid rgba(255,255,255,0.03);
transition: background-color 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 380px;
}
.work-card:hover {
background-color: var(--surface-color-light);
}
.work-card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 4rem;
}
.work-number {
font-family: var(--font-display);
font-weight: 800;
font-size: 3rem;
color: rgba(255,255,255,0.1);
line-height: 1;
}
.work-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.tag-badge {
background: rgba(255,255,255,0.05);
padding: 0.4rem 0.8rem;
border-radius: 50px;
font-size: 0.88rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.work-title {
font-family: var(--font-display);
font-size: 2rem;
margin-bottom: 1rem;
}
.work-desc {
color: var(--text-secondary);
font-size: 1.18rem;
}
/*
---------------------------------
Services Section
---------------------------------
*/
.services-section {
background-color: var(--surface-color);
position: relative;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.service-card {
padding: 3rem 2rem;
border-radius: 16px;
overflow: hidden;
}
.featured-ribbon {
position: absolute;
top: 0;
right: 0;
background: var(--accent-color);
color: var(--bg-color);
padding: 0.4rem 1.5rem;
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom-left-radius: 16px;
}
.service-badge {
font-family: monospace;
color: #666;
margin-bottom: 2rem;
font-size: 0.95rem;
}
.service-title {
font-family: var(--font-display);
font-size: 1.8rem;
margin-bottom: 1rem;
line-height: 1.2;
}
.service-desc {
color: var(--text-secondary);
font-size: 1.12rem;
margin-bottom: 2rem;
}
.service-list {
list-style: none;
}
.service-list li {
color: #ccc;
font-size: 1.02rem;
margin-bottom: 0.75rem;
padding-left: 1.5rem;
position: relative;
}
.service-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--text-secondary);
}
/*
---------------------------------
Contact CTA
---------------------------------
*/
.contact-section {
padding: 8rem 0;
}
.contact-box {
background-color: var(--surface-color);
border-radius: 24px;
padding: 5rem;
text-align: center;
border: 1px solid rgba(255,255,255,0.05);
}
.contact-header {
margin-bottom: 4rem;
}
.contact-title {
font-family: var(--font-display);
font-size: clamp(1.3rem, 6.2vw, 4.5rem); /* "comunicação" ~11.15em dentro do padding do .contact-box */
font-weight: 800;
line-height: 1.1;
margin-top: 2rem;
}
.contact-channels {
display: flex;
gap: 2rem;
justify-content: center;
}
.contact-card {
background-color: var(--bg-color);
padding: 2rem;
border-radius: 16px;
display: flex;
align-items: center;
gap: 1.5rem;
text-decoration: none;
color: var(--text-primary);
border: 1px solid rgba(255,255,255,0.05);
transition: all 0.3s ease;
min-width: 300px;
text-align: left;
}
.contact-card:hover {
background-color: var(--surface-color-light);
border-color: rgba(255,255,255,0.2);
/* o "levantar" no hover agora é o tilt 3D magnético (js/text-effects.js initTiltCards),
que escreve o próprio transform via GSAP — por isso não é definido aqui */
}
.channel-icon {
font-size: 2rem;
}
.channel-info {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0; /* flex item: sem isto o e-mail longo força a largura mínima e estoura a tela */
}
.channel-type {
font-size: 0.92rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
}
.channel-value {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.18rem;
/* break-word, não anywhere: o e-mail quebrava no meio de uma sílaba. Assim o navegador
respeita primeiro o antes do @ (index.html) e só parte a palavra em último caso. */
overflow-wrap: break-word;
}
.channel-arrow {
font-size: 1.5rem;
color: var(--text-secondary);
transition: transform 0.3s ease;
}
.contact-card:hover .channel-arrow {
transform: translateX(5px);
color: var(--accent-color);
}
/*
---------------------------------
Footer
---------------------------------
*/
.footer {
padding: 2rem 0;
border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-container {
display: flex;
justify-content: center;
align-items: center;
}
.footer-brand {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.2rem;
margin-right: 1rem;
}
.footer-copy {
color: var(--text-secondary);
font-size: 1rem;
}
/*
---------------------------------
Responsive Adjustments
---------------------------------
*/
@media (max-width: 1024px) {
.work-grid {
grid-template-columns: 1fr;
}
.services-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 1000px) {
.nav-menu {
display: none !important;
}
}
@media (max-width: 768px) {
.contact-channels {
flex-direction: column;
}
.contact-box {
padding: 3rem 1.5rem;
}
}
/*
---------------------------------
Mobile Navigation (Toggle + Drawer)
---------------------------------
*/
.nav-action {
display: flex;
align-items: center;
gap: 1rem;
}
/* Adaptação fluida do menu desktop em telas intermediárias (laptops e tablets landscape).
Este bloco encolhia a fonte dos links até 0.74rem e zerava o padding vertical — era a
causa principal da barra parecer achatada nessas larguras, e vencia os ajustes do topo
do arquivo por vir depois. Com quatro links no lugar de seis não é mais preciso
espremer: só os espaçamentos cedem. */
@media (min-width: 1001px) and (max-width: 1280px) {
.nav-container {
padding: 1.1rem clamp(1.5rem, 2.5vw, 2.5rem) 1.1rem 1.5rem;
}
.nav-menu {
margin-right: 1.25rem;
}
.btn-pill,
.nav-instagram {
padding: 0.5rem 0.9rem;
font-size: 0.78rem;
gap: 0.45rem;
white-space: nowrap;
}
}
/* No desktop (>1000px), o toggle (hambúrguer) e o drawer mobile ficam estritamente desativados */
.nav-toggle {
display: none;
}
@media (min-width: 1001px) {
.nav-toggle,
.mobile-menu {
display: none !important;
}
}
@media (max-width: 1000px) {
.header {
padding: 0.65rem 0.85rem 0;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.nav-container {
padding: 0.55rem 1rem !important;
border-radius: 18px;
background: rgba(20, 25, 42, 0.82) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.09) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
justify-content: space-between;
}
.header.is-compact {
padding: 0.55rem 0.85rem 0;
}
.header.is-compact .nav-container {
padding: 0.6rem 0.95rem !important;
background: rgba(18, 22, 38, 0.94) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
.brand-logo {
gap: 0.65rem;
margin-right: 0;
}
/* O divisor separa a marca dos links, que não existem na barra do celular */
.brand-logo::after {
display: none;
}
.logo-badge {
width: 36px;
height: 36px;
font-size: 0.85rem;
font-weight: 800;
background: linear-gradient(135deg, #FE633D, #ea4a22);
color: #ffffff;
box-shadow: 0 4px 14px rgba(254, 99, 61, 0.35);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.logo-name {
font-size: 0.95rem;
letter-spacing: 0.01em;
}
.nav-action {
margin-left: auto;
}
.nav-toggle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 42px;
height: 42px;
padding: 0;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 11px;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
background: rgba(254, 99, 61, 0.12);
border-color: rgba(254, 99, 61, 0.4);
}
.nav-toggle:active {
transform: scale(0.93);
}
.nav-toggle-bar {
display: block;
width: 18px;
height: 2px;
border-radius: 2px;
background-color: #ffffff;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, width 0.2s ease, background-color 0.2s ease;
}
.nav-toggle-bar:nth-child(2) {
width: 13px;
align-self: flex-end;
background-color: var(--accent-color);
}
.nav-toggle[aria-expanded="true"] {
background: rgba(254, 99, 61, 0.15);
border-color: rgba(254, 99, 61, 0.5);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar {
background-color: var(--accent-color);
width: 18px;
align-self: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
}
.mobile-menu {
position: fixed;
inset: 0;
z-index: 99;
background-color: var(--bg-color);
display: flex;
align-items: center;
opacity: 0;
transition: opacity 0.4s var(--ease-out-expo);
}
.mobile-menu.is-open {
opacity: 1;
}
/* `display: flex` acima anula o atributo hidden; sem isto o drawer invisível cobre a página e bloqueia cliques */
.mobile-menu[hidden] {
display: none;
}
.mobile-menu-inner {
display: flex;
flex-direction: column;
gap: 0.25rem;
width: 100%;
padding: 0 8%;
counter-reset: mobile-nav-idx;
}
.mobile-link {
display: flex;
align-items: baseline;
gap: 1rem;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.25rem, 5.6vw, 2.4rem); /* "DEPOIMENTOS" ~12.7em */
text-transform: uppercase;
letter-spacing: -0.02em;
color: var(--text-primary);
text-decoration: none;
padding: 0.4rem 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
counter-increment: mobile-nav-idx;
}
/* Número gerado por CSS (counter), não hardcoded: renumera sozinho se um item for
adicionado/removido, sem precisar editar cada link à mão. */
.mobile-link-idx {
font-family: monospace;
font-size: 0.8rem;
font-weight: 400;
color: #666;
}
.mobile-link-idx::before {
content: "0" counter(mobile-nav-idx);
}
.mobile-menu-footer {
display: flex;
gap: 1.5rem;
margin-top: 2.5rem;
}
.mobile-menu-footer a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding-bottom: 2px;
}
/* Trava o scroll enquanto o drawer está aberto */
body.menu-open {
overflow: hidden;
}
/*
---------------------------------
Mobile Tabbar (atalhos rápidos)
---------------------------------
*/
.mobile-tabbar {
display: none;
}
@media (max-width: 768px) {
.mobile-tabbar {
display: flex !important;
position: fixed !important;
left: 0.6rem !important;
right: 0.6rem !important;
bottom: 0.6rem !important;
z-index: 99 !important;
padding: 0.4rem 0.2rem calc(0.4rem + env(safe-area-inset-bottom, 0px)) !important;
background: rgba(20, 25, 42, 0.94) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 20px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
justify-content: space-around !important;
}
/* Barra sempre visível: impede qualquer estado de ocultação ao rolar */
.mobile-tabbar.is-hidden {
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Espaço pra barra não tampar o fim do conteúdo/rodapé */
body {
padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}
}
.tab-link {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.5rem 0.25rem;
border-radius: 18px;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.62rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color 0.25s ease, background-color 0.25s ease;
}
.tab-link svg {
width: 20px;
height: 20px;
}
.tab-link.is-active {
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.06);
}
.tab-link-cta {
color: var(--accent-color);
background-color: rgba(254, 99, 61, 0.12);
}
.tab-link-cta.is-active,
.tab-link-cta:hover {
color: var(--accent-ink);
background-color: var(--accent-color);
}
/* O slot de mídia já cria respiro: reduz o gap exagerado do topo do card */
.work-card .work-card-top {
margin-bottom: 2rem;
}
/*
---------------------------------
Testimonials
---------------------------------
*/
.testimonials-section {
background-color: var(--bg-color);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.testimonial-card {
border-radius: 16px;
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
}
.testimonial-card::before {
content: "\201C";
position: absolute;
top: 0.5rem;
right: 1.5rem;
font-family: var(--font-display);
font-size: 5rem;
line-height: 1;
color: var(--sand-soft);
}
.testimonial-quote {
padding-left: 1.1rem;
border-left: 2px solid var(--sand-line);
font-size: 1.16rem;
color: var(--sand-color);
font-weight: 400;
line-height: 1.7;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}
.author-avatar {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 50%;
background-color: var(--surface-color-light);
border: 1px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 800;
font-size: 0.95rem;
color: var(--text-secondary);
}
.author-info {
display: flex;
flex-direction: column;
}
.author-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.08rem;
}
.author-role {
font-size: 0.9rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
}
/*
---------------------------------
FAQ (accordion nativo com )
---------------------------------
*/
.faq-section {
background-color: var(--surface-color);
}
.faq-list {
max-width: 900px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.faq-item {
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 1.75rem 0;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.1rem, 2.2vw, 1.4rem);
transition: color 0.3s ease;
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-question:hover {
color: var(--text-secondary);
}
.faq-icon {
position: relative;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.faq-icon::before,
.faq-icon::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 16px;
height: 1.5px;
background-color: var(--accent-color);
transition: transform 0.3s var(--ease-out-expo);
}
.faq-icon::after {
transform: rotate(90deg);
}
.faq-item[open] .faq-icon::after {
transform: rotate(0deg);
}
.faq-answer {
padding-bottom: 1.75rem;
max-width: 680px;
}
.faq-answer p {
color: var(--text-secondary);
font-size: 1.15rem;
font-weight: 300;
line-height: 1.7;
}
/*
---------------------------------
Contact Form
---------------------------------
*/
.form-divider {
display: flex;
align-items: center;
gap: 1.5rem;
margin: 3.5rem 0 2.5rem;
color: #666;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.form-divider::before,
.form-divider::after {
content: "";
flex: 1;
height: 1px;
background-color: rgba(255,255,255,0.08);
}
.contact-form {
max-width: 760px;
margin: 0 auto;
text-align: left;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-form-compact {
max-width: 580px;
gap: 1rem;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-field label {
font-size: 0.92rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-secondary);
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
background-color: var(--bg-color);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 1rem 1.25rem;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 1.05rem;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.form-field textarea {
resize: vertical;
min-height: 120px;
}
.contact-form-compact .form-field textarea {
min-height: 90px;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: #555;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: rgba(255,255,255,0.4);
background-color: var(--surface-color-light);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
border-color: #f87171;
}
.field-hint {
align-self: flex-end;
font-size: 0.85rem;
color: #555;
font-family: monospace;
}
.field-error {
font-size: 0.9rem;
color: #f87171;
min-height: 1rem;
}
.form-submit {
align-self: flex-start;
border: none;
cursor: pointer;
}
.form-status {
width: 100%;
}
.form-feedback {
padding: 1.25rem 1.5rem;
border-radius: 12px;
margin-top: 0.5rem;
animation: feedbackSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-align: left;
}
@keyframes feedbackSlideIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-feedback-title {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.98rem;
font-weight: 700;
margin-bottom: 0.4rem;
}
.form-feedback-desc {
font-size: 0.88rem;
line-height: 1.5;
margin: 0;
}
.form-feedback--error {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.35);
color: #fca5a5;
}
.form-feedback--error .form-feedback-title {
color: #f87171;
}
.form-feedback--success {
background: rgba(254, 99, 61, 0.08);
border: 1px solid rgba(254, 99, 61, 0.3);
color: var(--text-primary, #ffffff);
}
.form-feedback--success .form-feedback-title {
color: var(--accent-color, #FE633D);
}
.form-fallback-box {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.form-fallback-label {
font-size: 0.82rem;
color: var(--text-secondary, #94a3b8);
margin-bottom: 0.6rem;
}
.form-fallback-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
padding: 0.85rem 1.25rem;
border-radius: 10px;
background: var(--accent-color, #FE633D);
color: #ffffff !important;
font-size: 0.92rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 4px 16px rgba(254, 99, 61, 0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-fallback-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(254, 99, 61, 0.45);
background: #ff7554;
}
.form-fallback-btn .btn-arrow {
transition: transform 0.2s ease;
}
.form-fallback-btn:hover .btn-arrow {
transform: translateX(4px);
}
/* Foco visível consistente para navegação por teclado */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 3px;
}
/*
---------------------------------
Footer Social
---------------------------------
*/
.footer-container {
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footer-left {
display: flex;
align-items: center;
}
.footer-social {
display: flex;
gap: 1.5rem;
}
.footer-social a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
transition: color 0.3s ease;
}
.footer-social a:hover {
color: var(--text-primary);
}
/*
---------------------------------
Responsivo — ajustes adicionais
---------------------------------
*/
@media (max-width: 1100px) {
.testimonials-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 1000px) {
.nav-toggle {
display: flex;
}
.nav-action .btn-pill,
.nav-action .nav-instagram {
display: none;
}
}
@media (max-width: 900px) {
.section {
padding: 5rem 0;
}
.contact-section {
padding: 5rem 0;
}
.work-card,
.service-card {
padding: 2rem 1.5rem;
}
.contact-box {
padding: 3.5rem 2rem;
}
.work-card {
min-height: 0;
}
.work-card-top {
margin-bottom: 1.5rem;
}
}
@media (max-width: 768px) {
.logo-name {
display: none;
}
/* 22vh de topo somados à foto jogavam o título para fora da primeira tela.
Agora só o espaço da barra fixa + respiro. */
.hero-section {
min-height: auto;
padding-top: 5.5rem;
padding-bottom: 2rem;
}
.hero-actions {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.btn-primary-nesh {
justify-content: center;
padding: 1.1rem 1.75rem;
}
.btn-ghost-nesh {
justify-content: center;
text-align: center;
}
.form-row {
grid-template-columns: 1fr;
}
.form-submit {
align-self: stretch;
}
.contact-card {
min-width: 0;
}
.footer-container {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 480px) {
.container,
.nav-container {
padding: 0 1.25rem;
}
.section-lead {
font-size: 1.05rem;
}
.work-desc {
font-size: 1rem;
}
.contact-box {
padding: 2.5rem 1.25rem;
border-radius: 16px;
}
.mobile-menu-footer {
flex-direction: column;
gap: 0.75rem;
}
}
/*
---------------------------------
Acessibilidade — movimento reduzido
---------------------------------
*/
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.strip-track {
animation: none;
}
}
/* Ícones de marca (WhatsApp / Instagram) */
.channel-icon {
display: flex;
align-items: center;
justify-content: center;
}
.channel-icon--whatsapp { color: #25D366; }
.channel-icon--email { color: var(--text-primary); }
.channel-icon--instagram { color: #E1306C; }
.social-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.footer-social a,
.mobile-menu-footer a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.footer-social a:hover .icon-whatsapp,
.mobile-menu-footer a:hover .icon-whatsapp { color: #25D366; }
.footer-social a:hover .icon-instagram,
.mobile-menu-footer a:hover .icon-instagram { color: #E4405F; }
::selection {
background: var(--accent-color);
color: var(--accent-ink);
}
/* Form Chips */
/* Caixas de seleção do formulário (js/form-select.js). Uma linha fechada por
pergunta; a lista abre por cima do conteúdo seguinte, sem empurrar o form. */
.form-selects {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.form-select { position: relative; }
/* `display: flex` abaixo ganha do `display: none` que o atributo hidden aplica,
então a regra precisa ser explícita — sem ela a lista fica sempre aberta e
cobre os campos seguintes. */
.form-select[hidden],
.form-select-panel[hidden] { display: none; }
.form-select-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.9rem 1.1rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
color: var(--text-primary);
font-family: inherit;
font-size: 0.95rem;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: border-color 0.25s ease, background 0.25s ease;
}
.form-select-trigger:hover { border-color: rgba(255,255,255,0.28); }
.form-select-trigger:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.form-select.is-open .form-select-trigger {
border-color: var(--accent-color);
background: rgba(254, 99, 61, 0.06);
}
.form-select-value {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Sem nada escolhido, o texto é a própria pergunta — fica no tom secundário
pra não parecer uma resposta já dada. */
.form-select-value.is-placeholder { color: var(--text-secondary); font-weight: 400; }
.form-select-caret { flex-shrink: 0; color: var(--text-secondary); transition: transform 0.25s ease; }
.form-select.is-open .form-select-caret { transform: rotate(180deg); color: var(--accent-color); }
.form-select-panel {
position: absolute;
z-index: 20;
top: calc(100% + 0.4rem);
left: 0;
right: 0;
display: flex;
flex-direction: column;
padding: 0.4rem;
max-height: 16rem;
overflow-y: auto;
background: rgba(20, 25, 42, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.form-select-option {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 0.85rem;
background: transparent;
border: 0;
border-radius: 8px;
color: var(--text-secondary);
font-family: inherit;
font-size: 0.9rem;
text-align: left;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.form-select-option:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.form-select-option[aria-selected="true"] { color: var(--accent-color); font-weight: 600; }
/* Marquinha da esquerda: vazia quando não escolhida, laranja com tique quando sim.
Reservar o espaço desde sempre impede o texto de pular ao marcar. */
.form-select-option::before {
content: '';
flex-shrink: 0;
width: 16px;
height: 16px;
border: 1.5px solid rgba(255,255,255,0.25);
border-radius: 5px;
background-size: 11px;
background-position: center;
background-repeat: no-repeat;
transition: all 0.2s ease;
}
.form-select-option[aria-selected="true"]::before {
border-color: var(--accent-color);
background-color: var(--accent-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2339' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* Escolha única não é caixinha de marcar: vira bolinha. */
.form-select[data-mode="single"] .form-select-option::before { border-radius: 50%; }
.form-select-done {
margin-top: 0.3rem;
padding: 0.6rem;
background: rgba(254, 99, 61, 0.12);
border: 1px solid rgba(254, 99, 61, 0.3);
border-radius: 8px;
color: var(--accent-color);
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.form-select-done:hover { background: rgba(254, 99, 61, 0.2); }
/* Glassmorphism */
.glass { background: rgba(28, 35, 57, 0.45) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,0.05) !important; }
/* ─── Ticker Wall ─── */
.ticker-wall {
padding: clamp(4rem, 10vw, 8rem) 0;
border-top: 1px solid rgba(255,255,255,0.04);
border-bottom: 1px solid rgba(255,255,255,0.04);
background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(254,99,61,0.04), transparent);
}
.ticker-grid {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(2rem, 5vw, 5rem);
flex-wrap: wrap;
}
.ticker-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
}
.ticker-number {
font-family: var(--font-display);
font-size: clamp(3.5rem, 12vw, 9rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--accent-color) 0%, #ff9a76 40%, var(--text-primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ticker-label {
font-family: var(--font-sans);
font-size: clamp(0.8rem, 1.2vw, 1rem);
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.ticker-divider {
width: 1px;
height: clamp(3rem, 8vw, 6rem);
background: linear-gradient(to bottom, transparent, rgba(254,99,61,0.3), transparent);
flex-shrink: 0;
}
@media (max-width: 768px) {
.ticker-grid {
flex-direction: column;
gap: 2.5rem;
}
.ticker-divider {
width: clamp(3rem, 20vw, 6rem);
height: 1px;
background: linear-gradient(to right, transparent, rgba(254,99,61,0.3), transparent);
}
}
/* --- Page Transitions --- */
.page-transition-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--bg-color);
z-index: 10000;
pointer-events: none;
opacity: 0;
}
/* ─── 1. Viewfinder Cinematográfico (Bordas & Cantos de Câmera) ─── */
.cinema-viewfinder {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 45;
}
.viewfinder-corner {
position: fixed;
width: 22px;
height: 22px;
border-color: rgba(255, 255, 255, 0.22);
border-style: solid;
pointer-events: none;
transition: border-color 0.4s ease;
}
.viewfinder-corner.top-left {
top: 24px;
left: 24px;
border-width: 1.5px 0 0 1.5px;
}
.viewfinder-corner.top-right {
top: 24px;
right: 24px;
border-width: 1.5px 1.5px 0 0;
}
.viewfinder-corner.bottom-left {
bottom: 24px;
left: 24px;
border-width: 0 0 1.5px 1.5px;
}
.viewfinder-corner.bottom-right {
bottom: 24px;
right: 24px;
border-width: 0 1.5px 1.5px 0;
}
.viewfinder-spec-badge {
position: fixed;
bottom: 24px;
right: 32px;
display: flex;
align-items: center;
gap: 0.6rem;
background: rgba(13, 17, 26, 0.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
padding: 0.42rem 0.9rem;
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.5);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
user-select: none;
pointer-events: none;
}
.rec-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--accent-color);
animation: recBlink 1.8s ease-in-out infinite;
box-shadow: 0 0 8px rgba(254, 99, 61, 0.85);
}
@keyframes recBlink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.25; transform: scale(0.85); }
}
.rec-text {
color: var(--accent-color);
font-weight: 700;
}
.rec-info {
color: rgba(255, 255, 255, 0.4);
}
/* ─── 2. Micro-Widget de Status & Equalizador (Canto Inferior Esquerdo) ─── */
.corner-status-widget {
position: fixed;
bottom: 24px;
left: 32px;
z-index: 90;
text-decoration: none;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.corner-status-widget:hover {
transform: translateY(-2px);
}
.status-widget-inner {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: rgba(13, 17, 26, 0.78);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.42rem 0.95rem;
border-radius: 999px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.corner-status-widget:hover .status-widget-inner {
border-color: rgba(254, 99, 61, 0.45);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 18px rgba(254, 99, 61, 0.2);
}
.status-pulse-dot {
width: 6.5px;
height: 6.5px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.85);
animation: statusPulse 2.2s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.6; }
}
.status-text {
font-size: 0.74rem;
font-weight: 500;
color: #e2e4e9;
letter-spacing: 0.01em;
white-space: nowrap;
}
.status-divider {
width: 1px;
height: 11px;
background: rgba(255, 255, 255, 0.15);
}
.audio-visualizer {
display: inline-flex;
align-items: flex-end;
gap: 2.5px;
height: 13px;
padding-bottom: 1px;
}
.audio-bar {
width: 2.5px;
border-radius: 1px;
background: var(--accent-color);
}
.audio-bar:nth-child(1) { height: 5px; animation: wave1 1.2s ease-in-out infinite; }
.audio-bar:nth-child(2) { height: 12px; animation: wave2 0.9s ease-in-out infinite 0.2s; }
.audio-bar:nth-child(3) { height: 7px; animation: wave3 1.1s ease-in-out infinite 0.4s; }
.audio-bar:nth-child(4) { height: 10px; animation: wave4 1.3s ease-in-out infinite 0.1s; }
@keyframes wave1 { 0%, 100% { height: 4px; } 50% { height: 12px; } }
@keyframes wave2 { 0%, 100% { height: 13px; } 50% { height: 5px; } }
@keyframes wave3 { 0%, 100% { height: 6px; } 50% { height: 13px; } }
@keyframes wave4 { 0%, 100% { height: 11px; } 50% { height: 4px; } }
/* Oculta em telas menores que 1024px para manter celulares e tablets 100% limpos */
@media (max-width: 1024px) {
.cinema-viewfinder { display: none !important; }
.corner-status-widget { display: none !important; }
}
/* --- Refatoração de Estilos Inline --- */
/* Contato */
.contact-box {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
gap: 4rem !important;
align-items: start !important;
text-align: left !important;
}
.contact-header {
margin-bottom: 2rem !important;
}
.contact-title {
margin-top: 1rem !important;
font-size: clamp(2rem, 4vw, 3rem) !important;
line-height: 1.2 !important;
}
.contact-header .section-lead {
margin-top: 1.25rem !important;
color: var(--text-secondary) !important;
font-size: 1.1rem !important;
line-height: 1.6 !important;
}
.contact-channels {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
.contact-card {
padding: 1.5rem !important;
min-width: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
.contact-form-col {
padding: 2.5rem !important;
border-radius: 16px !important;
}
@media (max-width: 600px) {
.contact-form-col {
padding: 1.5rem 1.15rem !important;
}
}
.contact-form-col .contact-form {
margin-top: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
opacity: 1 !important;
visibility: visible !important;
}
.form-field {
margin-bottom: 0 !important;
}
.form-submit {
width: 100% !important;
margin-top: 1rem !important;
padding: 1rem 1.25rem !important;
font-family: var(--font-display) !important;
font-size: clamp(0.88rem, 3.8vw, 1rem) !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0.01em !important;
white-space: normal !important;
word-break: normal !important;
text-align: center !important;
line-height: 1.35 !important;
min-height: 50px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.6rem !important;
}
/* No celular a caixa precisa caber o texto longo sem cortar no meio da palavra. */
.form-select-trigger {
padding: 0.95rem 1rem !important;
font-size: 0.95rem !important;
}
.form-select-panel {
max-height: 14rem !important;
}
/* Footer */
.footer {
padding: 3rem 0 2rem !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
background: rgba(10, 10, 15, 0.4) !important;
}
.footer-container {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 1.5rem !important;
}
.footer-left {
display: flex !important;
align-items: center !important;
gap: 1.5rem !important;
}
.brand-logo {
display: inline-flex !important;
align-items: center !important;
gap: 0.75rem !important;
}
.logo-badge {
width: 32px !important;
height: 32px !important;
font-size: 0.75rem !important;
}
.logo-name {
font-size: 0.95rem !important;
}
.footer-copy {
color: var(--text-secondary) !important;
font-size: 0.85rem !important;
}
.footer-social {
display: flex !important;
gap: 1.25rem !important;
}
.footer-social a {
color: var(--text-secondary) !important;
}
/* ============================================================================
Aviso de cookies (LGPD) — js/consent.js
Barra fixa no rodapé, discreta, sem escurecer a página atrás: a pessoa pode
ler o site antes de decidir. No celular sobe acima da tabbar pra não cobrir
os atalhos de navegação.
========================================================================== */
.cookie-banner {
position: fixed;
left: 1rem;
right: 1rem;
bottom: 1rem;
z-index: 200;
margin: 0 auto;
max-width: 720px;
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
padding: 1rem 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
background: rgba(20, 25, 42, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
animation: cookie-banner-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cookie-banner-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.cookie-banner { animation: none; }
}
.cookie-banner-text {
flex: 1 1 260px;
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-secondary);
}
.cookie-banner-text a {
color: var(--accent-color);
text-decoration: underline;
text-underline-offset: 2px;
}
.cookie-banner-actions {
display: flex;
gap: 0.6rem;
flex-shrink: 0;
}
.cookie-btn {
padding: 0.6rem 1.2rem;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
}
.cookie-btn--ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--text-secondary);
}
.cookie-btn--ghost:hover {
border-color: rgba(255, 255, 255, 0.4);
color: var(--text-primary);
}
.cookie-btn--accept {
background: var(--accent-color);
border: 1px solid var(--accent-color);
color: #1C2339;
}
.cookie-btn--accept:hover {
filter: brightness(1.1);
}
@media (max-width: 768px) {
.cookie-banner {
left: 0.6rem;
right: 0.6rem;
bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
gap: 0.85rem;
padding: 0.9rem 1rem;
}
.cookie-banner-actions {
width: 100%;
}
.cookie-btn {
flex: 1;
}
}
/* ============================================================================
Hero — atalho de vaga
Fica ao lado do botão principal, num tom mais baixo: quem vem contratar
continua com um caminho óbvio, e quem veio recrutar não precisa procurar.
O `gap` da seta é o mesmo do botão primário pra os dois ficarem irmãos.
========================================================================== */
.hero-job-link {
gap: 0.5rem;
color: var(--text-secondary);
border-bottom-color: rgba(255, 255, 255, 0.18);
}
.hero-job-link:hover {
color: var(--text-primary);
border-bottom-color: var(--accent-color);
}
.hero-job-link .btn-arrow {
transition: transform 0.3s ease;
}
.hero-job-link:hover .btn-arrow {
transform: translateX(5px);
}
/* A pílula ficou com um texto mais longo ("projetos e oportunidades"): no
celular ela precisa poder quebrar em duas linhas sem estourar a largura. */
@media (max-width: 480px) {
.availability-pill {
max-width: 100%;
white-space: normal;
text-align: left;
line-height: 1.35;
}
}
/* O selo de localização do "sobre" dizia só "Salvador · BA", e quem estava em
outro estado lia aquilo como limite de atendimento. A parte do alcance vem
num peso menor: a base continua sendo a informação principal. */
.about-badge-reach {
font-weight: 400;
opacity: 0.75;
}
@media (max-width: 480px) {
.about-badge {
white-space: normal;
line-height: 1.35;
}
}