/* ==========================================================================
NOSSO AMOR — FOLHA DE ESTILO PRINCIPAL
Arquivo único, compartilhado pelas 7 páginas do site. Construído
mobile-first: os estilos base valem para telas pequenas, e as media
queries no final do arquivo ajustam para telas maiores (768px, 1024px,
1440px).
========================================================================== */
/* --------------------------------------------------------------------------
RESET BÁSICO
-------------------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100dvh;
background-color: var(--rosa-bg);
color: var(--texto-escuro);
font-family: var(--fonte-corpo);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
/* Garante que o atributo/propriedade "hidden" sempre esconda de verdade.
Sem isto, qualquer elemento que combine hidden com uma classe que define
"display" próprio (ex.: .botao usa display:inline-flex) fica visível
mesmo hidden — a regra [hidden] do navegador e a classe do componente
têm a mesma especificidade, e a nossa folha de estilo vence por vir
depois da folha padrão do navegador na cascata. */
[hidden] {
display: none !important;
}
h1, h2, h3 {
margin: 0 0 0.5em 0;
font-family: var(--fonte-titulo);
font-weight: 700;
line-height: 1.15;
/* Evita "órfãos" (uma palavra sozinha na última linha do título) */
text-wrap: balance;
}
h1 { font-size: var(--tam-h1); }
h2 { font-size: var(--tam-h2); }
h3 { font-size: var(--tam-h3); font-weight: 600; }
p {
margin: 0 0 1em 0;
max-width: var(--largura-leitura);
}
a {
color: inherit;
}
button {
font-family: inherit;
cursor: pointer;
}
ul, ol {
padding: 0;
margin: 0;
list-style: none;
}
/* Respeita quem prefere menos movimento — reduz a duração das transições
"instantâneas" de estado (não afeta as animações contínuas, que têm seu
próprio ajuste mais abaixo, em ANIMAÇÕES). */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: var(--duracao-rapida) !important;
}
}
/* --------------------------------------------------------------------------
VARIÁVEIS DE IDENTIDADE VISUAL
-------------------------------------------------------------------------- */
:root {
/* Paleta — valores exatos do briefing, não alterar */
--rosa-bg: #FDEFF3;
--rosa-suave: #F7D9E3;
--rosa-destaque: #E39AB6;
--dourado: #C6A15B;
--texto-escuro: #3B2A2E;
--branco-quente: #FFFBF8;
/* Tipografia (ver do Google Fonts no de cada página) */
--fonte-titulo: 'Dancing Script', cursive;
--fonte-corpo: 'Poppins', sans-serif;
--tam-h1: clamp(2.25rem, 4vw + 1rem, 3.75rem);
--tam-h2: clamp(1.75rem, 3vw + 1rem, 2.5rem);
--tam-h3: clamp(1.375rem, 2vw + 1rem, 1.75rem);
--largura-leitura: 68ch; /* limite de ~75-80 caracteres por linha */
/* Espaçamento (escala usada em todo o site, em vez de valores soltos) */
--espaco-2xs: 4px;
--espaco-xs: 8px;
--espaco-sm: 16px;
--espaco-md: 24px;
--espaco-lg: 40px;
--espaco-xl: 64px;
--espaco-2xl: 96px;
/* Raios e sombras — duas sombras distintas, nunca uma cinza genérica
repetida em todo cartão */
--raio-sm: 8px;
--raio-md: 16px;
--raio-pill: 999px;
--sombra-suave: 0 8px 28px rgba(198, 161, 91, 0.22); /* halo dourado — só para o coração-foto e destaques pontuais */
--sombra-cartao: 0 4px 14px rgba(59, 42, 46, 0.08); /* elevação discreta do dia a dia */
/* Easing nomeado — nunca usar a curva padrão crua do navegador */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--duracao-rapida: 200ms;
--duracao-media: 500ms;
--duracao-lenta: 1.8s;
/* Layout */
--largura-menu-lateral: 260px;
--largura-conteudo-max: 1200px;
--altura-hamburguer: 48px;
/* Camadas — z-index nomeado em vez de números soltos espalhados pelo CSS */
--z-coracoes: 0;
--z-conteudo: 1;
--z-fundo-menu: 90;
--z-menu-lateral: 100;
--z-hamburguer: 110;
}
/* --------------------------------------------------------------------------
UTILITÁRIOS
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--largura-conteudo-max);
margin-inline: auto;
padding-inline: var(--espaco-md);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Link "Pular para o conteúdo" — invisível até receber foco de teclado */
.pular-para-conteudo {
position: absolute;
top: -100%;
left: var(--espaco-sm);
z-index: 1000;
background-color: var(--dourado);
color: var(--texto-escuro);
padding: var(--espaco-xs) var(--espaco-md);
border-radius: var(--raio-sm);
font-weight: 600;
text-decoration: none;
transition-property: top;
transition-duration: var(--duracao-rapida);
transition-timing-function: var(--ease-out);
}
.pular-para-conteudo:focus {
top: var(--espaco-sm);
}
/* Foco de teclado visível em qualquer elemento interativo.
Usa texto-escuro (não dourado): sobre o fundo claro deste site, dourado
fica em ~2:1 de contraste (falha o mínimo de 3:1 para indicadores de UI);
texto-escuro passa com folga em qualquer superfície da paleta. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--texto-escuro);
outline-offset: 2px;
border-radius: 2px;
}
/* Eyebrow — usado com moderação, só onde o conteúdo é sequencial de verdade
(datas da linha do tempo). Texto sempre em texto-escuro: dourado como cor
de texto falha o contraste mínimo sobre esta paleta clara. */
.eyebrow {
display: block;
font-family: var(--fonte-corpo);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--texto-escuro);
opacity: 0.75;
margin-bottom: var(--espaco-2xs);
}
.texto-corpo {
max-width: var(--largura-leitura);
}
/* --------------------------------------------------------------------------
BOTÕES
-------------------------------------------------------------------------- */
.botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--espaco-xs);
padding: 14px 28px;
border-radius: var(--raio-pill);
border: 1px solid transparent;
font-family: var(--fonte-corpo);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition-property: transform, box-shadow, background-color, border-color;
transition-duration: var(--duracao-rapida);
transition-timing-function: var(--ease-out);
}
.botao--primario {
background-color: var(--rosa-destaque);
color: var(--texto-escuro);
}
.botao--primario:hover {
box-shadow: var(--sombra-suave);
transform: translateY(-2px);
}
.botao--primario:active {
transform: translateY(0) scale(0.98);
}
.botao--fantasma {
background-color: transparent;
border-color: rgba(198, 161, 91, 0.4);
color: var(--texto-escuro);
}
.botao--fantasma:hover {
border-color: var(--dourado);
background-color: var(--rosa-suave);
}
.botao--fantasma:active {
transform: scale(0.98);
}
/* --------------------------------------------------------------------------
CARTÃO — usado com moderação, não em toda superfície do site
-------------------------------------------------------------------------- */
.cartao {
background-color: var(--branco-quente);
border-radius: var(--raio-md);
box-shadow: var(--sombra-cartao);
padding: var(--espaco-md);
}
/* --------------------------------------------------------------------------
ÍCONES (sprite SVG inline no shell — ver comentário no de cada
página). Traço fino, cor herdada via currentColor.
-------------------------------------------------------------------------- */
.icone {
width: 20px;
height: 20px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* --------------------------------------------------------------------------
CORAÇÕES FLUTUANTES DE FUNDO (gerados por js/script.js)
-------------------------------------------------------------------------- */
.coracoes-flutuantes {
position: fixed;
inset: 0;
z-index: var(--z-coracoes);
overflow: hidden;
pointer-events: none;
}
.coracao-flutuante__item {
position: absolute;
bottom: -10vh;
left: var(--pos-x, 10%);
width: var(--tamanho, 20px);
height: var(--tamanho, 20px);
fill: currentColor;
color: var(--rosa-destaque);
opacity: 0;
animation-name: flutuar-coracao;
animation-duration: var(--duracao, 16s);
animation-delay: var(--atraso, 0s);
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes flutuar-coracao {
0% { transform: translate(0, 0); opacity: 0; }
10% { opacity: var(--opacidade-alvo, 0.2); }
50% { transform: translate(var(--deslocamento-x, 14px), -55vh); }
90% { opacity: var(--opacidade-alvo, 0.2); }
100% { transform: translate(0, -110vh); opacity: 0; }
}
/* --------------------------------------------------------------------------
MENU LATERAL — fixo e sempre visível no desktop (≥1024px, ver media
query), drawer/overlay abaixo disso.
-------------------------------------------------------------------------- */
.hamburguer {
position: fixed;
top: var(--espaco-sm);
right: var(--espaco-sm);
z-index: var(--z-hamburguer);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: var(--altura-hamburguer);
height: var(--altura-hamburguer);
background-color: var(--branco-quente);
border: 1px solid rgba(198, 161, 91, 0.3);
border-radius: 50%;
box-shadow: var(--sombra-cartao);
transition-property: transform;
transition-duration: var(--duracao-rapida);
transition-timing-function: var(--ease-out);
}
.hamburguer:active {
transform: scale(0.94);
}
.hamburguer__linha {
display: block;
width: 20px;
height: 2px;
background-color: var(--texto-escuro);
transition-property: transform, opacity;
transition-duration: var(--duracao-rapida);
transition-timing-function: var(--ease-in-out);
}
/* Estado aberto: hamburguer vira "X" */
.hamburguer[aria-expanded="true"] .hamburguer__linha:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburguer[aria-expanded="true"] .hamburguer__linha:nth-child(2) {
opacity: 0;
}
.hamburguer[aria-expanded="true"] .hamburguer__linha:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.menu-lateral__fundo {
position: fixed;
inset: 0;
z-index: var(--z-fundo-menu);
background-color: rgba(59, 42, 46, 0.4);
opacity: 0;
pointer-events: none;
transition-property: opacity;
transition-duration: var(--duracao-media);
transition-timing-function: var(--ease-out);
}
.menu-lateral__fundo--visivel {
opacity: 1;
pointer-events: auto;
}
.menu-lateral {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: var(--z-menu-lateral);
width: min(var(--largura-menu-lateral), 82vw);
background-color: var(--branco-quente);
border-right: 1px solid rgba(198, 161, 91, 0.25);
padding: var(--espaco-2xl) var(--espaco-md) var(--espaco-md);
overflow-y: auto;
transform: translateX(-100%);
transition-property: transform;
transition-duration: var(--duracao-media);
transition-timing-function: var(--ease-out);
}
.menu-lateral--aberto {
transform: translateX(0);
}
.menu-lateral__marca {
display: block;
font-family: var(--fonte-titulo);
font-weight: 700;
font-size: 1.5rem;
color: var(--texto-escuro);
text-decoration: none;
margin-bottom: var(--espaco-lg);
}
.menu-lateral__lista {
display: flex;
flex-direction: column;
gap: var(--espaco-2xs);
}
.menu-lateral__link {
display: block;
padding: var(--espaco-sm);
border-radius: var(--raio-sm);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.01em;
text-decoration: none;
color: var(--texto-escuro);
transition-property: background-color, transform;
transition-duration: var(--duracao-rapida);
transition-timing-function: var(--ease-out);
}
.menu-lateral__link:hover {
background-color: var(--rosa-suave);
transform: translateX(3px);
}
/* Página atual — decidido em runtime por js/script.js comparando
data-pagina do com data-pagina de cada link (ver ativarLinkAtiva) */
.menu-lateral__link--ativa {
background-color: var(--rosa-destaque);
color: var(--texto-escuro);
font-weight: 700;
}
.menu-lateral__link--ativa:hover {
transform: none;
}
/* --------------------------------------------------------------------------
CONTEÚDO PRINCIPAL
-------------------------------------------------------------------------- */
.conteudo {
position: relative;
z-index: var(--z-conteudo);
padding-top: calc(var(--altura-hamburguer) + var(--espaco-lg));
padding-bottom: var(--espaco-2xl);
}
.secao {
padding-block: var(--espaco-xl);
}
.secao__cabecalho {
max-width: var(--largura-leitura);
margin-bottom: var(--espaco-lg);
}
/* --------------------------------------------------------------------------
SCROLL REVEAL — transição de estado disparada uma vez pelo
IntersectionObserver em js/script.js (não é @keyframes: só entra, não
fica em loop).
-------------------------------------------------------------------------- */
.scroll-reveal {
opacity: 0;
transform: translateY(16px);
transition-property: opacity, transform;
transition-duration: var(--duracao-media);
transition-timing-function: var(--ease-out);
/* --indice é escrito inline no HTML de cada item (style="--indice: 2")
para criar o efeito de cascata entre itens da mesma seção */
transition-delay: calc(var(--indice, 0) * 60ms);
}
.scroll-reveal--visivel {
opacity: 1;
transform: translateY(0);
}
/* --------------------------------------------------------------------------
MOLDURA-CORAÇÃO — a foto do casal recortada em coração, único momento de
grande impacto visual do site (index.html). O recorte usa clip-path com
um SVG definido no shell (ver comentário no body). O contorno
dourado é um