/* ============================================================ Convite Samuel & Micaele — folha de estilo ------------------------------------------------------------ Sem dependência, sem build, sem framework. O convite é escuro. Não é preferência de tema: é a decisão que faz o recorte do casal no topo ter para onde recortar. Numa página branca, um PNG sem fundo fica boiando; num fundo escuro e desfocado, ele vira o assunto da tela. Todo o resto da folha existe para sustentar essa primeira tela. Três cores e só: preto de fundo, bege para o cerimonial, e o verde-oliva em variações para o que é apoio. Uma quarta cor aqui viraria enfeite. ATENÇÃO: a marca lá no fim do arquivo separa o que é escrito à mão do que o editor visual regrava a cada publicação. Nunca escreva abaixo dela — some na próxima publicação. ============================================================ */ /* ============================================================ 1 · Tokens ============================================================ */ :root{ /* --- verde-oliva e suas variações --- A escada inteira foi puxada para cima em relação à versão clara: sobre preto, os tons antigos (o --ol-600 em diante) apagam. O que era "principal" no claro vira sombra no escuro. */ --ol-900:#1A1E12; --ol-800:#242918; --ol-700:#333A26; --ol-600:#444D33; --ol-500:#5A6440; /* o oliva antigo, agora usado como apoio */ --ol-400:#7C875A; --ol-300:#9AA678; /* oliva principal sobre preto */ --ol-200:#B7C199; --ol-100:#D3DABE; /* --- bege --- */ --be-700:#A8916C; --be-600:#C0AA83; --be-500:#D9C7A5; /* bege principal */ --be-400:#E4D6BA; --be-300:#EFE4CE; /* --- superfícies --- Nenhuma é preto puro. #000 sobre tela OLED de celular faz o texto claro esfumaçar nas bordas, e o degradê do topo entrega faixas visíveis. Um preto com um resto de verde dentro resolve os dois. */ --bg-0:#0A0B09; /* fundo da página */ --bg-1:#101210; /* seção elevada, cartão do formulário */ --bg-2:#171A14; /* dentro do cartão: campos, marcas */ --bg-3:#1F2319; /* --- dourado --- Entra em poucos lugares e de propósito: o dourado é a cor que mais rápido vira enfeite de festa de salão quando se repete. Aqui ele marca só o que é cerimonial — as tarjas de seção, o "&" dos nomes, o horário na linha do tempo e o botão de confirmar. O bege continua carregando o texto. */ --ou-600:#A8873F; --ou-500:#C6A664; /* dourado principal */ --ou-400:#DCC489; /* --- marca --- */ --ac-1:var(--ol-300); --ac-2:var(--be-500); --ac-3:var(--ou-500); /* --- escada de texto --- Quatro degraus, nunca um quinto. Branco puro sobre preto vibra; a escada parte de um branco levemente quente. */ --tx-1:rgba(247,244,236,.95); --tx-2:rgba(247,244,236,.74); --tx-3:rgba(247,244,236,.54); --tx-4:rgba(247,244,236,.38); /* Sobre foto escura, no topo */ --tx-c1:rgba(255,255,255,.97); --tx-c2:rgba(255,255,255,.84); --tx-c3:rgba(255,255,255,.64); --linha:rgba(217,199,165,.14); --linha-forte:rgba(217,199,165,.26); /* --- tipografia --- Duas famílias, e isto é deliberado. A serifada carrega o registro cerimonial (nomes, títulos, a data) e a sem-serifa carrega a informação prática (horário, endereço, formulário). A divisão tem significado; não é tempero. */ --ff-tit:"Cormorant Garamond",Georgia,"Times New Roman",serif; --ff-txt:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* A escada era fixa em rem, e era isso que fazia o convite encolher no computador: 15px de texto no meio de uma tela de 1600px é letra de rodapé, e foi o que apareceu no ar. Agora cada degrau cresce junto com a largura. O piso de cada clamp é o que valia antes num celular de 375px — quem abre no telefone não perde nada; o teto é o tamanho que o texto precisa ter num monitor grande para continuar sendo texto, e não legenda. */ --fs-1:clamp(.72rem,.688rem + .14vw,.82rem); --fs-2:clamp(.82rem,.784rem + .16vw,.94rem); /* Estes dois degraus carregam o "como vai ser no dia" — o título de cada etapa e o texto embaixo. Eram os menores da página e é por isso que aquela seção sumia. A reta deles começa mais alta: no celular de 375px o texto sobe de 15,7px para 16,7px e o título de 22,4px para 24,6px, e no monitor os dois chegam no mesmo teto de antes. Ninguém perde, os dois lados ganham. */ --fs-3:clamp(1rem,1rem + .18vw,1.18rem); --fs-4:clamp(1.06rem,.994rem + .29vw,1.28rem); --fs-5:clamp(1.4rem,1.4rem + .59vw,1.98rem); --fs-6:clamp(1.95rem,1.4rem + 2.4vw,3.4rem); /* O piso do clamp é o que vale em telas estreitas: 10vw só passa a mandar acima de ~540px. Com piso alto os nomes estouravam os 375px de um celular comum. 2.25rem cabe até em 320px. */ --fs-7:clamp(2.25rem,10vw,6rem); /* --- grade de 8, fluida --- Os degraus grandes crescem junto com a tela. Grade fixa sufoca num celular de 375px: 96px de respiro em cima e embaixo é um quarto da largura da tela. Os dois primeiros degraus são fixos de propósito — 4px e 8px são filete e respiro de ícone, e encolher isso só borra. */ --sp-1:4px; --sp-2:8px; --sp-3:clamp(13px, 11.75px + 0.33vw, 16px); --sp-4:clamp(18px, 15.5px + 0.66vw, 24px); --sp-5:clamp(28px, 23px + 1.33vw, 40px); --sp-6:clamp(40px, 30px + 2.65vw, 64px); --sp-7:clamp(56px, 39.5px + 4.42vw, 96px); --r-1:2px; --r-2:12px; --r-3:999px; /* Sombra sobre preto não escurece — ninguém enxerga preto sobre preto. Aqui o relevo vem de um filete claro por dentro, e a sombra fica só para o que flutua de verdade. */ --sh-1:inset 0 1px 0 rgba(255,255,255,.04); --sh-2:0 18px 40px rgba(0,0,0,.55); --sh-3:0 30px 70px rgba(0,0,0,.7); /* --- movimento --- Um par para o site inteiro: o tempo curto responde ao dedo, o longo é para o que entra em cena. Uma curva só. Duração variando por elemento é o que faz interface parecer montada de pedaços. */ --t-rap:160ms; --t-len:320ms; --t-cena:620ms; --curva:cubic-bezier(.2,.8,.3,1); --curva-cena:cubic-bezier(.16,.84,.32,1); /* 1106px era estreito demais para um monitor comum: sobrava um palmo de preto de cada lado e o miolo do convite parecia uma coluna de jornal. Em tela pequena nada muda — o .env já é width:100% e o teto só passa a valer acima de 1320px. */ --larg:1320px; --larg-txt:720px; } /* ============================================================ 2 · Base ============================================================ */ *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* O único jeito honesto de garantir que âncora nenhuma pare debaixo de nada: o deslocamento mora aqui, não em cada alvo. */ scroll-padding-top:var(--sp-4); background:var(--bg-0); } body{ margin:0; background:var(--bg-0); color:var(--tx-1); font-family:var(--ff-txt); font-size:var(--fs-4); font-weight:300; line-height:1.65; /* Sem isto, o topo desfocado ganha uma barra horizontal em celular: a foto de fundo é ampliada em 12% para o desfoque não deixar a borda transparente. */ overflow-x:clip; -webkit-font-smoothing:antialiased; } img,svg,iframe{ display:block; max-width:100% } img{ height:auto } /* O atributo hidden tem que vencer as classes que dão display. A regra do navegador para [hidden] é display:none, mas ela é da folha do navegador e perde de qualquer regra escrita aqui: o "Quais?" é um .campo, .campo tem display:grid, e o campo ficava na tela com "Não" marcado mesmo estando hidden no HTML. Esta linha vale para todo elemento escondido do site, não só ele. */ [hidden]{ display:none !important } h1,h2,h3{ font-family:var(--ff-tit); font-weight:400; line-height:1.12; margin:0 } p{ margin:0 } ol,ul{ margin:0 } a{ color:inherit } :focus-visible{ outline:2px solid var(--ac-2); outline-offset:3px; border-radius:var(--r-1); } ::selection{ background:var(--ol-500); color:#fff } /* Pular direto para o formulário. Fica escondido até receber o foco pelo teclado — quem chega de mouse nunca vê. */ .pular{ position:absolute; left:var(--sp-3); top:-100px; z-index:60; padding:.6rem 1rem; border-radius:var(--r-3); background:var(--ac-2); color:#0A0B09; font-size:var(--fs-2); text-decoration:none; transition:top var(--t-rap) var(--curva); } .pular:focus{ top:var(--sp-3) } /* ============================================================ 3 · Peças repetidas ============================================================ */ .env{ width:100%; max-width:var(--larg); margin-inline:auto; padding-inline:var(--sp-4) } .secao{ padding-block:var(--sp-7) } /* A tarja de cima de cada seção. É o lugar mais barato para o dourado morar: aparece cinco vezes no site, sempre pequena, sempre na mesma função. Repetição sem volume é o que faz uma cor virar assinatura em vez de enfeite. */ .vers{ margin:0; font-size:var(--fs-1); letter-spacing:.24em; text-transform:uppercase; color:var(--ac-3); font-weight:400; } .vers--centro{ text-align:center } .tit-secao{ margin:var(--sp-3) 0 0; font-size:var(--fs-6); text-align:center; color:var(--tx-1); } .sub-secao{ max-width:var(--larg-txt); margin:var(--sp-3) auto 0; text-align:center; color:var(--tx-2); font-size:var(--fs-3); } .lk{ display:inline-block; margin-top:.35rem; color:var(--ac-2); font-size:var(--fs-2); text-decoration:none; border-bottom:1px solid var(--linha-forte); padding-bottom:1px; transition:border-color var(--t-rap) var(--curva), color var(--t-rap) var(--curva); } .lk:hover{ color:var(--be-300); border-color:var(--ac-2) } .ramo{ width:40px; height:24px; margin:0 auto var(--sp-3); color:var(--ac-2); } .bt{ display:inline-block; padding:.85rem 1.9rem; border-radius:var(--r-3); font-family:var(--ff-txt); font-size:var(--fs-3); font-weight:400; letter-spacing:.06em; text-decoration:none; text-align:center; cursor:pointer; transition:background-color var(--t-rap) var(--curva), color var(--t-rap) var(--curva), border-color var(--t-rap) var(--curva), transform var(--t-rap) var(--curva); } .bt:active{ transform:translateY(1px) } .bt--vazado{ border:1px solid rgba(255,255,255,.5); background:rgba(10,11,9,.28); color:var(--tx-c1); backdrop-filter:blur(6px); } .bt--vazado:hover{ background:var(--ac-3); border-color:var(--ac-3); color:#0A0B09 } /* O botão de confirmar é o único bloco dourado do site inteiro. Ele é a ação que importa; se houvesse um segundo bloco dessa cor, os dois brigariam e nenhum seria o principal. Preto sobre este dourado dá 8,5:1 de contraste — passa folgado no AAA. */ .bt--cheio{ border:1px solid var(--ac-3); background:var(--ac-3); color:#0A0B09; width:100%; } .bt--cheio:hover{ background:var(--ou-400); border-color:var(--ou-400) } .bt--cheio[disabled]{ opacity:.55; cursor:progress } /* ------------------------------------------------------------ Entrada em cena ------------------------------------------------------------ Só translateY. Deslocamento lateral aqui alarga a caixa de rolagem no celular mesmo com overflow-x:clip no body, e o sintoma é uma faixa preta que aparece e some ao rolar. ------------------------------------------------------------ */ .cena [data-reveal]{ opacity:0; transform:translateY(20px) } .cena [data-reveal].is-in{ opacity:1; transform:none; transition:opacity var(--t-cena) var(--curva-cena), transform var(--t-cena) var(--curva-cena); } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } .cena [data-reveal]{ opacity:1; transform:none; transition:none } *{ animation-duration:.001ms !important; transition-duration:.001ms !important } } /* ============================================================ 4 · Topo ------------------------------------------------------------ Três camadas na mesma tela: foto desfocada no fundo, véu por cima dela, recorte do casal, e o texto embaixo. O
é uma grade de duas faixas — a de cima cresce e segura o recorte, a de baixo é do tamanho do texto. O véu não é enfeite: sem ele, o texto branco cai em cima de um trecho claro da foto e some. Ele é radial no centro e linear no rodapé, para o topo desaguar no preto da página sem emenda visível. ============================================================ */ .hero{ position:relative; isolation:isolate; overflow:hidden; /* Altura fixa, não mínima: com min-height, a foto do casal puxava o topo para 1,6 tela no computador e o nome dos noivos nascia fora da vista. Com height, a faixa 1fr recebe só o que sobra e a foto encolhe sozinha pelo max-height:100%. O piso de 520px é para celular deitado, onde 100svh some. */ height:100svh; min-height:520px; /* Uma célula só, e não duas linhas. Empilhados, a foto ficava apoiada no título como um adesivo colado por cima; na mesma célula ela passa por trás do texto e o topo vira uma cena. */ display:grid; grid-template-areas:"palco"; justify-items:center; text-align:center; padding:var(--sp-6) var(--sp-4) var(--sp-6); } .hero__fundo{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center; /* A ampliação de 12% existe por causa do desfoque: sem ela, o blur puxa pixels de fora da imagem e a borda fica lavada. */ transform:scale(1.12); filter:blur(16px) saturate(.65) brightness(.4); } .hero__veu{ position:absolute; inset:0; z-index:-1; background: radial-gradient(78% 58% at 50% 40%, rgba(10,11,9,0) 0%, rgba(10,11,9,.45) 60%, rgba(10,11,9,.9) 100%), linear-gradient(180deg, rgba(10,11,9,.72) 0%, rgba(10,11,9,.15) 26%, rgba(10,11,9,.72) 78%, var(--bg-0) 100%); } /* A foto do casal. ------------------------------------------------------------ O arquivo é uma foto retangular, não um recorte com fundo transparente, e é isso que dava o ar de montagem: quatro quinas e uma borda reta embaixo, boiando sobre o fundo desfocado. A máscara resolve sem depender do arquivo. São dois degradês multiplicados um pelo outro: o de cima apaga a metade de baixo até o nada, para o casal emergir do escuro em vez de terminar numa linha; o oval come as quinas de leve. Onde a foto some é exatamente onde o nome dos noivos passa por cima. Navegador sem suporte a máscara mostra a foto inteira, com borda — feio, não quebrado. */ .hero__casal{ grid-area:palco; align-self:start; z-index:0; /* cover, e não contain. Com contain a foto ficava menor que a moldura e sobrava vazio nas laterais: a máscara apaga a MOLDURA, então o degradê caía no vazio e a foto terminava em corte reto do lado do casal. Com cover a moldura e a foto são a mesma coisa, e o apagamento morde a imagem de verdade. */ /* O teto de 1100px de largura e 660px de altura era o que fazia a foto "encolher" no ar: num monitor de 1600px sobravam 250px de preto de cada lado da cena, e o casal virava um cartão no meio da tela em vez de ocupar o topo. */ width:min(100%,1420px); height:min(78svh,780px); object-fit:cover; object-position:center 28%; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.5) 74%, transparent 99%), radial-gradient(74% 92% at 50% 38%, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.5) 74%, transparent 99%), radial-gradient(74% 92% at 50% 38%, #000 40%, transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } /* No celular a foto é deitada e a tela é em pé: encaixada inteira, ela vira uma tira baixa que não alcança o texto. Aqui ela passa a preencher um quadro mais alto — o corte tira só fundo das laterais, porque o casal está no meio do quadro. */ @media (max-width:640px){ .hero__casal{ /* Sem estourar a largura da tela: em 118vw a noiva saía pela direita. 100% mantém os dois dentro do quadro, e a altura maior é o que faz a foto descer até encostar no nome — senão sobra uma faixa preta entre a foto e o texto e volta a parecer figurinha colada. */ width:100%; max-width:none; height:min(62svh,500px); object-fit:cover; object-position:center 24%; /* Máscara mais larga que a do computador. A foto é deitada e a tela é em pé: o recorte já corta as laterais, e o mesmo degradê redondo de lá comia ainda mais, apagando o rosto da noiva. Aqui as laterais quase não são tocadas e o desaparecimento acontece só de cima para baixo. */ -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.5) 78%, transparent 99%), radial-gradient(120% 96% at 50% 40%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.5) 78%, transparent 99%), radial-gradient(120% 96% at 50% 40%, #000 62%, transparent 100%); } } .hero__c{ grid-area:palco; align-self:end; z-index:1; max-width:660px; display:grid; justify-items:center; gap:var(--sp-3); padding-top:var(--sp-4); } /* O texto agora corre por cima da foto. A sombra é o que garante que ele continue legível se um dia entrar aí uma foto clara — escrita branca sobre vestido branco desaparece. */ .hero__c > *{ text-shadow:0 1px 14px rgba(10,11,9,.85) } .hero__nomes{ margin:0; font-size:var(--fs-7); font-weight:300; line-height:1; color:var(--tx-c1); text-shadow:0 2px 30px rgba(0,0,0,.6); } .hero__nomes .e{ color:var(--ac-3); font-style:italic } .hero__linha{ font-size:var(--fs-3); letter-spacing:.14em; text-transform:uppercase; color:var(--tx-c2); } .hero__sub{ max-width:44ch; font-size:var(--fs-3); color:var(--tx-c3); } /* ============================================================ 5 · Nossa história ============================================================ */ .historia{ background:var(--bg-0) } .hist__texto{ max-width:var(--larg-txt); margin:var(--sp-4) auto 0; text-align:center; color:var(--tx-2); } .dupla{ margin-top:var(--sp-6); display:grid; gap:var(--sp-5); justify-items:center; text-align:center; } .dupla__nome{ font-size:var(--fs-5); color:var(--ac-2) } .dupla__bio{ margin-top:var(--sp-2); color:var(--tx-2); font-size:var(--fs-3); max-width:38ch } .simbolo{ position:relative; width:min(260px,70vw) } .simbolo__foto{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; border:1px solid var(--linha-forte); filter:saturate(.85) brightness(.92); } .simbolo__e{ position:absolute; left:50%; bottom:-.35em; transform:translateX(-50%); font-family:var(--ff-tit); font-style:italic; font-size:clamp(2.6rem,9vw,3.6rem); color:var(--ac-2); text-shadow:0 4px 16px var(--bg-0); } /* ============================================================ 6 · A linha do tempo ------------------------------------------------------------ Vertical, e vertical por um motivo prático: uma linha do tempo horizontal em celular vira rolagem lateral, e rolagem lateral dentro de página que já rola para baixo é onde as pessoas perdem metade do conteúdo sem saber que ele existia. O filete corre atrás das marcas, e desaparece nas duas pontas em degradê — uma linha que termina em corte reto parece um erro de recorte. ============================================================ */ /* A seção da linha do tempo é a única com fundo oliva. Não é um verde que se anuncia — é #1A1E12, quase o preto da página, e o que ele faz é dar um degrau de cor entre duas seções pretas em vez de mais um cinza. */ .linha{ background:var(--ol-900); border-block:1px solid var(--linha) } .tl{ position:relative; list-style:none; max-width:860px; margin:var(--sp-6) auto 0; padding:0; } .tl::before{ content:''; position:absolute; left:19px; top:14px; bottom:14px; width:1px; /* O fio desce do dourado para o oliva. As duas pontas somem em transparente porque um fio que começa e termina em traço seco parece corte de tesoura. */ background:linear-gradient(180deg, transparent 0%, rgba(198,166,100,.55) 10%, rgba(154,166,120,.4) 62%, rgba(154,166,120,.18) 90%, transparent 100%); } .tl__p{ position:relative; display:grid; grid-template-columns:40px 1fr; gap:var(--sp-4); padding-bottom:var(--sp-5); } .tl__p:last-child{ padding-bottom:0 } .tl__marca{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--ol-800); border:1px solid rgba(198,166,100,.3); box-shadow:var(--sh-1); color:var(--ol-200); } .tl__marca svg{ width:19px; height:19px } .tl__hora{ font-size:var(--fs-1); letter-spacing:.18em; text-transform:uppercase; color:var(--ac-3); } .tl__tit{ margin-top:.2rem; font-size:var(--fs-5); color:var(--tx-1) } .tl__txt{ margin-top:var(--sp-2); color:var(--tx-2); font-size:var(--fs-3) } .mapa{ margin-top:var(--sp-6); border-radius:var(--r-2); overflow:hidden; border:1px solid var(--linha); background:var(--bg-2); } .mapa iframe{ width:100%; height:clamp(220px,42vw,360px); border:0; /* O mapa do Google é branco e queima a tela num convite escuro. Não dá para tematizar um iframe de fora, então ele entra invertido e com o matiz devolvido — fica escuro sem trocar as cores das ruas. */ filter:invert(.9) hue-rotate(180deg) saturate(.55) brightness(.95); } /* ============================================================ 7 · Confirme sua presença ------------------------------------------------------------ A seção cabe numa tela de celular: 100svh, e "svh" e não "vh" porque a barra do navegador some e volta durante a rolagem — com vh, o formulário pularia de altura no meio do preenchimento. Cabe porque foi feito para caber: título de uma linha, quatro campos baixos, um botão. Toda gordura aqui empurra o botão para fora da tela, e botão fora da tela é confirmação que não acontece. ============================================================ */ .presenca{ position:relative; background:var(--bg-0); border-block:1px solid var(--linha); min-height:100svh; display:grid; align-content:center; justify-items:center; padding:var(--sp-5) var(--sp-4); } /* Some no celular: é onde a altura é disputada. */ .presenca__lado{ display:none } .presenca__cartao{ width:100%; max-width:430px; display:grid; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-2); border:1px solid var(--linha-forte); background:var(--bg-1); box-shadow:var(--sh-2); } .presenca__cabeca{ display:grid; gap:.25rem; text-align:center; margin-bottom:var(--sp-1) } .presenca__tit{ font-size:clamp(1.7rem,6vw,2.2rem); color:var(--tx-1) } .presenca__txt{ font-size:var(--fs-2); color:var(--tx-3) } .presenca__txt strong{ color:var(--ac-2); font-weight:400 } .campo{ display:grid; gap:.3rem; margin:0; padding:0; border:0 } .campo label, .campo legend{ font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--tx-3); padding:0; } .campo input[type=text], .campo input[type=tel]{ width:100%; padding:.66rem .85rem; border-radius:var(--r-2); border:1px solid var(--linha-forte); background:var(--bg-2); color:var(--tx-1); font-family:var(--ff-txt); font-weight:300; /* 16px cravado. Abaixo disso o Safari do iPhone dá zoom sozinho ao focar o campo, e a pessoa perde o formulário de vista. */ font-size:16px; line-height:1.4; transition:border-color var(--t-rap) var(--curva), background-color var(--t-rap) var(--curva); } .campo input::placeholder{ color:var(--tx-4) } .campo input:focus{ outline:none; border-color:var(--ac-2); background:var(--bg-3); } .campo input:focus-visible{ outline:2px solid var(--ac-2); outline-offset:1px } /* --- o sim/não --- Dois rádios de verdade por baixo (teclado, leitor de tela e validação continuam funcionando), com os botões desenhados por cima. Um par de