/* ─── GS ODONTOLOGIA — TELA DE SITE EM CONSTRUÇÃO ─────────────────── Página temporária, servida enquanto o site definitivo não sobe. Duas regras que explicam quase todo o arquivo: 1. Ela usa `tokens.css` e `reset.css`, nada mais. Não há uma cor, uma fonte ou um raio novo aqui — tudo abaixo sai do mesmo vocabulário do site, para que quem chegar nesta página e depois no site definitivo veja a mesma marca. `layout.css` e `components.css` ficam de fora porque esta página não reaproveita nenhuma seção deles. 2. Zero JavaScript. O único caminho de saída daqui é o WhatsApp: se a página dependesse de script para montar link, animar ou revelar qualquer coisa, uma CDN fora do ar transformaria a tela de espera em beco sem saída. Por isso a fusão cruzada do fundo é `@keyframes`, e não um slideshow em JS como o do hero. ───────────────────────────────────────────────────────────────── */ .gs-ec { /* Fundo navy no e não só no scrim: enquanto as fotos carregam, a tela já é da marca em vez de branca. Também é o que aparece por baixo se o WebP falhar. */ background: var(--gs-primary-900); color: var(--gs-text-inverse); overflow-x: hidden; } .gs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ══ FUNDO ═════════════════════════════════════════════════════════ Quatro planos empilhados no mesmo lugar, em fusão cruzada de 28s (7s cada). O tempo é longo de propósito: numa tela de espera, a troca não pode chamar mais atenção que o texto — quem lê a frase deve terminar de ler antes de o plano mudar. */ .gs-ec__bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--gs-primary-900); } .gs-ec__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Um pouco acima do centro: nos quatro planos o assunto está no terço superior, e ancorar no meio cortava cabeça em telas baixas. */ object-position: center 42%; opacity: 0; animation: gs-ec-fade 28s var(--ease-smooth) infinite, gs-ec-zoom 28s var(--ease-smooth) infinite; } /* O primeiro plano fica visível também sem animação — é o estado que sobra com `prefers-reduced-motion` (ver o fim do arquivo). */ .gs-ec__plate:nth-child(1) { opacity: 1; animation-delay: 0s, 0s; } .gs-ec__plate:nth-child(2) { animation-delay: 7s, 7s; } .gs-ec__plate:nth-child(3) { animation-delay: 14s, 14s; } .gs-ec__plate:nth-child(4) { animation-delay: 21s, 21s; } /* Alternando o sentido do zoom, quatro imagens não viram um vaivém previsível — mesma decisão do slideshow do hero. */ .gs-ec__plate:nth-child(even) { animation-name: gs-ec-fade, gs-ec-zoom-out; } @keyframes gs-ec-fade { 0% { opacity: 0; } 5% { opacity: 1; } /* 1,4s de entrada, igual ao --dur-cinematic */ 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } /* A escala só sobe enquanto o plano está em cena e fica parada depois. O retorno a 1 acontece no salto do laço, com o plano já em opacidade zero — por isso não se vê corte. */ @keyframes gs-ec-zoom { 0% { transform: scale(1); } 30% { transform: scale(1.08); } 100% { transform: scale(1.08); } } @keyframes gs-ec-zoom-out { 0% { transform: scale(1.08); } 30% { transform: scale(1); } 100% { transform: scale(1); } } /* Duas camadas, a mesma gramática do hero e do CTA do Invisalign: o gradiente vertical assenta o texto no topo e o bloco de unidades embaixo; a vinheta radial fecha o quadro e é o que iguala quatro fotos com iluminações diferentes. Sem ela, um plano claro e um escuro em sequência fariam o texto piscar de legibilidade. */ .gs-ec__scrim { position: absolute; inset: 0; background-image: linear-gradient(to bottom, rgba(5, 20, 38, .88) 0%, rgba(8, 34, 63, .62) 34%, rgba(8, 34, 63, .70) 62%, rgba(5, 20, 38, .95) 100%), radial-gradient(130% 92% at 50% 42%, rgba(5, 20, 38, 0) 30%, rgba(5, 20, 38, .62) 100%); } /* ══ PALCO ═════════════════════════════════════════════════════════ `100svh` e não `100vh`: no mobile o `vh` conta a barra do navegador e empurraria o bloco de unidades para fora da primeira tela. */ .gs-ec__stage { position: relative; z-index: 1; display: grid; /* logo · frase (ocupa a sobra) · unidades · rodapé */ grid-template-rows: auto 1fr auto auto; justify-items: center; /* Respiro medido em `vh` e não em `rem`: aqui o recurso escasso é a altura, não a largura. Num notebook de 768px isso é o que mantém as três unidades acima da dobra; num monitor grande, os mesmos clamps devolvem o espaço. */ gap: clamp(1.5rem, 3.5vh, 3rem); min-height: 100svh; padding: clamp(1.25rem, 3.5vh, 3rem) var(--gutter); } .gs-ec__stage > * { width: 100%; max-width: var(--container); } /* ══ LOGO ══════════════════════════════════════════════════════════ */ .gs-ec__head { display: flex; justify-content: center; } /* Mesmo truque do header e do rodapé do site: o lockup é navy e some em fundo escuro, então vira branco por filtro em vez de virar um segundo arquivo para manter em dia. */ .gs-ec__logo { width: clamp(150px, 20vw, 220px); height: auto; filter: brightness(0) invert(1); } /* ══ FRASE ═════════════════════════════════════════════════════════ */ /* A largura aqui é do TÍTULO, não do parágrafo. Medir o bloco em `ch` (que se resolve pela fonte do body, ~8,5px) espremia a serifa de 64px em três linhas e empurrava as unidades para fora da primeira tela. O parágrafo tem a própria medida logo abaixo. */ .gs-ec__intro { display: grid; align-content: center; justify-items: center; gap: var(--space-5); max-width: 62rem; text-align: center; } /* O fio antes do texto é o mesmo gesto das antetítulos do site: marca o início do bloco sem precisar de caixa nem de fundo. */ .gs-ec__eyebrow { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-accent); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gs-secondary); } .gs-ec__eyebrow::before, .gs-ec__eyebrow::after { content: ""; width: clamp(28px, 7vw, 56px); height: 1px; background: rgba(208, 201, 193, .5); } /* `--text-hero` chega a 6,5rem e foi calibrado para uma tela em que o título é a única coisa acima da dobra. Aqui ele divide o quadro com três unidades e um rodapé, então o teto desce para 4rem: a frase continua sendo a primeira coisa lida, mas o bloco inteiro cabe em uma tela sem rolagem no desktop. O `
` no HTML garante as duas linhas da frase em qualquer largura — a quebra é de sentido ("vem aí algo" / "à altura do seu sorriso"), não de espaço. */ .gs-ec__title { font-family: var(--font-display); /* `min(vw, vh)` porque a frase é limitada pelas duas dimensões: pela largura num celular em pé, pela altura num notebook deitado. Sem o termo em `vh`, a serifa crescia com a largura da tela e empurrava as unidades para fora justamente nas telas mais baixas. */ font-size: clamp(2.05rem, min(4.8vw, 7.4vh), 4rem); font-weight: 400; line-height: 1.06; letter-spacing: var(--tracking-tight); } /* A segunda linha em itálico e areia: é o que transforma a frase de aviso em promessa — o mesmo par (serifa reta + serifa itálica) que o site usa na assinatura do rodapé. */ .gs-ec__title em { font-style: italic; color: var(--gs-secondary); } .gs-ec__lead { max-width: 64ch; font-size: var(--text-lead); font-weight: 300; line-height: var(--leading-relaxed); color: var(--gs-text-inverse-muted); } /* ══ UNIDADES ══════════════════════════════════════════════════════ Três colunas de vidro sobre a foto. O `backdrop-filter` existe por necessidade e não por estilo: o fundo troca de plano a cada 7s e um texto pequeno apoiado direto na imagem perderia contraste em algum dos quatro. O borrão garante o mesmo piso de leitura nos quatro. */ .gs-ec__unidades { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .gs-ec__unidade { display: grid; /* nome · endereço (ocupa a sobra) · botão — o `1fr` no endereço é o que alinha os três botões na mesma linha mesmo quando um endereço ocupa duas linhas e outro só uma. */ grid-template-rows: auto 1fr auto; gap: var(--space-4); padding: var(--space-6); background: rgba(5, 20, 38, .42); border: 1px solid rgba(208, 201, 193, .22); border-radius: var(--radius-sm); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); } .gs-ec__uf { font-family: var(--font-accent); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gs-secondary); } .gs-ec__end { display: flex; gap: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--gs-text-inverse); } .gs-ec__end svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--gs-secondary); } /* Botão areia sobre navy: é o CTA do site em fundo escuro, repetido aqui sem invenção. 48px de altura mínima é o alvo de toque do projeto — e este é o único botão da página, então ele não pode falhar no dedo. */ .gs-ec__wpp { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 48px; padding: var(--space-3) var(--space-5); background: var(--gs-secondary); color: var(--gs-primary); font-family: var(--font-accent); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-wide); border-radius: var(--radius-sm); transition: background-color var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-out-expo); } .gs-ec__wpp svg { flex: none; width: 20px; height: 20px; } .gs-ec__wpp:hover { background: var(--gs-text-inverse); transform: translateY(-2px); } /* ══ RODAPÉ ════════════════════════════════════════════════════════ */ .gs-ec__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding-top: var(--space-6); border-top: 1px solid rgba(208, 201, 193, .16); text-align: center; } .gs-ec__social { display: flex; gap: var(--space-3); } /* Quadrado de 48px, mesma medida e mesmo gesto de inversão no hover dos botões sociais do rodapé do site. */ .gs-ec__social-link { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(208, 201, 193, .35); border-radius: var(--radius-md); color: var(--gs-secondary); transition: background-color var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth); } .gs-ec__social-link svg { width: 22px; height: 22px; } .gs-ec__social-link:hover { background: var(--gs-secondary); border-color: var(--gs-secondary); color: var(--gs-primary); } .gs-ec__credit { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--gs-primary-300); } .gs-ec__credit strong { font-weight: 600; color: var(--gs-secondary); } /* ══ RESPONSIVO ════════════════════════════════════════════════════ Mobile-first: acima já está a versão empilhada. O único ponto de quebra real é 768px, onde as três unidades passam a caber lado a lado sem espremer o endereço. */ @media (min-width: 768px) { .gs-ec__unidades { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } } @media (min-width: 1024px) { /* Também limitado pela altura: em tela baixa o cartão volta ao acolchoamento do mobile em vez de roubar linha do título. */ .gs-ec__unidade { padding: clamp(var(--space-5), 3vh, var(--space-8)); } .gs-ec__end { font-size: var(--text-base); } .gs-ec__foot { flex-direction: row; justify-content: space-between; gap: var(--space-8); } } /* ══ ACESSIBILIDADE ════════════════════════════════════════════════ `tokens.css` já corta a duração de toda animação para 0,01ms com movimento reduzido. Só que uma animação que termina instantaneamente devolve o elemento ao estado do CSS — e o estado base do plano é `opacity: 0`. Sem o bloco abaixo, o fundo ficaria preto. A saída é desligar a animação de vez e deixar o primeiro plano aceso: uma foto parada, sem fusão e sem zoom. */ @media (prefers-reduced-motion: reduce) { .gs-ec__plate { animation: none; } .gs-ec__plate:nth-child(1) { opacity: 1; } .gs-ec__plate:nth-child(n + 2) { opacity: 0; } .gs-ec__wpp:hover { transform: none; } }