/* ========================================================================= MANSÃO FEEST Uma folha so, bloqueante, no caminho critico. O porque esta no README: dividir em critico embutido mais folha assincrona mediu CLS 0,21 contra 0,0000 desta forma. ========================================================================= */ /* ---------- Fontes, hospedadas aqui, nada do Google em runtime ---------- */ @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Faces de reserva. Os valores de size-adjust foram MEDIDOS por _build/medir-reserva.mjs, nao chutados. Sem isto o CLS da troca chega a 0,28. */ @font-face { font-family: "Reserva Display"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); /* medido em 27/08/2026 por _build/medir-reserva.mjs, no peso 500 que os titulos usam: a Cormorant Garamond e 85,7% da largura do Arial */ size-adjust: 85.7%; ascent-override: 109%; descent-override: 34%; line-gap-override: 0%; } @font-face { font-family: "Reserva Corpo"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); /* medido: a Archivo e 98,4% da largura do Arial */ size-adjust: 98.4%; ascent-override: 90%; descent-override: 24%; line-gap-override: 0%; } /* ---------------------------- Tokens ---------------------------- */ :root { color-scheme: dark; /* O preto e o dourado nao sao escolha minha: sao a marca do proprio cliente, lida do monograma MF e dos cartoes de divulgacao dele. */ --tinta-000: #08080a; --tinta-050: #0d0d10; --tinta-100: #131318; --tinta-200: #1c1c22; --tinta-300: #2a2a32; --claro-000: #f6f4ef; --claro-100: #ece8df; --ouro-claro: #e8cd86; --ouro: #cfae5e; --ouro-fundo: #8a7134; --texto: #ece9e3; --texto-suave: #b6b1a8; --texto-escuro: #1a1a1f; --texto-escuro-suave: #4d4a45; --borda: #2c2c34; /* contorno de componente precisa de 3:1, e a borda decorativa nao chega la */ --borda-componente: #6a6a74; --borda-clara: #d8d2c6; /* medidos: #17803f da 5,00:1 com texto branco e 4,00:1 contra o fundo escuro. O verde da marca do WhatsApp e claro demais para texto branco. */ --zap: #17803f; --zap-forte: #136b39; --fonte-display: "Cormorant Garamond", "Reserva Display", Georgia, serif; --fonte-corpo: "Archivo", "Reserva Corpo", system-ui, sans-serif; --largura: 1180px; --gap: clamp(1rem, 3vw, 2rem); --raio: 2px; /* medida uma vez pelo script embutido no , ver armadilha 7.1 */ --h-heroi: 100svh; --sombra: 0 18px 40px rgba(0, 0, 0, 0.45); } /* ---------------------------- Base ---------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--tinta-000); color: var(--texto); font-family: var(--fonte-corpo); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); line-height: 1.65; /* clip, nao hidden: hidden quebra position sticky, armadilha 7.10 */ overflow-x: clip; touch-action: manipulation; } img, video { max-width: 100%; } /* aspect-ratio so vence os atributos width e height com isto, armadilha 7.8 */ img[width], video[width] { height: auto; } a { color: var(--ouro-claro); } h1, h2, h3 { font-family: var(--fonte-display); font-weight: 500; line-height: 1.1; letter-spacing: 0.005em; margin: 0 0 0.5em; } h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem); } h2 { font-size: clamp(1.9rem, 1.35rem + 2.3vw, 3.1rem); } h3 { font-size: clamp(1.2rem, 1.06rem + 0.6vw, 1.45rem); font-family: var(--fonte-corpo); font-weight: 600; } p { margin: 0 0 1em; } :focus-visible { outline: 3px solid var(--ouro-claro); outline-offset: 3px; border-radius: var(--raio); } .pular { position: absolute; left: 0.5rem; top: -100%; z-index: 100; padding: 0.85rem 1.2rem; background: var(--claro-000); color: var(--texto-escuro); font-weight: 600; text-decoration: none; border-radius: var(--raio); transition: top 160ms ease; } .pular:focus { top: 0.5rem; } .so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .envolve { width: min(100% - 2 * var(--gap), var(--largura)); margin-inline: auto; } /* Aviso que so aparece se a pagina for aberta como data: URL, sem CSS externo. Como este bloco esta NA folha, ele fica escondido quando a folha carrega. Ver armadilha 7.12. */ .aviso-protocolo { display: none; } /* --------------------- Motivo que se repete --------------------- O painel geometrico branco de relevo triangular, lavado por LED, e o cenario de fundo de praticamente todo evento da casa. Conferi no acervo antes de adotar: aparece em dezenas de fotos. Aqui ele vira uma faceta em fio de ouro, com halo curto. */ .faceta { display: block; width: 46px; height: 26px; margin-inline: auto; overflow: visible; } .faceta path { fill: none; stroke: var(--ouro); stroke-width: 1; } .faceta .brilho { stroke: var(--ouro-claro); opacity: 0.45; filter: blur(2.5px); } .selo-secao { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.9rem; font-family: var(--fonte-corpo); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro); } .selo-secao::before, .selo-secao::after { content: ""; height: 1px; width: clamp(1.5rem, 8vw, 4.5rem); background: linear-gradient(90deg, transparent, var(--ouro-fundo)); } .selo-secao::after { background: linear-gradient(270deg, transparent, var(--ouro-fundo)); } /* ---------------------------- Botoes ---------------------------- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 52px; padding: 0.85rem 1.5rem; border: 1px solid transparent; border-radius: var(--raio); font-family: var(--fonte-corpo); font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .botao:hover { transform: translateY(-2px); } .botao:active { transform: translateY(0); } .botao--zap { background: var(--zap); border-color: var(--zap); color: #ffffff; } .botao--zap:hover { background: var(--zap-forte); border-color: var(--zap-forte); } .botao--linha { background: transparent; border-color: var(--ouro-fundo); color: var(--ouro-claro); } .botao--linha:hover { border-color: var(--ouro); background: rgba(207, 174, 94, 0.08); } .botao--claro { background: var(--texto-escuro); border-color: var(--texto-escuro); color: var(--claro-000); } .botao--claro:hover { background: #000; border-color: #000; } .botao svg { flex: none; } /* ---------------------------- Cabecalho ---------------------------- */ .topo { position: sticky; top: 0; z-index: 40; background: rgba(8, 8, 10, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); } .topo__linha { display: flex; align-items: center; gap: var(--gap); min-height: 64px; } .marca { display: flex; flex-direction: column; justify-content: center; text-decoration: none; line-height: 1; margin-right: auto; /* alvo de toque minimo de 44px, medido por programa */ min-height: 44px; } .marca__nome { font-family: var(--fonte-display); font-size: 1.32rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--claro-000); } .marca__cauda { font-family: var(--fonte-display); font-size: 1.02rem; font-style: italic; letter-spacing: 0.08em; color: var(--ouro); align-self: flex-end; margin-top: 0.1rem; } .menu { display: none; gap: 1.6rem; } .menu a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--texto-suave); text-decoration: none; font-size: 0.92rem; transition: color 160ms ease; } .menu a:hover { color: var(--ouro-claro); } .topo .botao { min-height: 44px; padding: 0.55rem 1.05rem; font-size: 0.92rem; /* em 280px de largura o rotulo inteiro empurrava o cabecalho 7px para fora */ min-width: 0; } .topo .botao span { min-width: 0; } /* Abaixo de 340px o rotulo vira so o icone. O aria-label do proprio link continua descrevendo a acao, entao nada se perde para leitor de tela. */ @media (max-width: 339px) { .topo .botao__rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .topo .botao { padding-inline: 0.8rem; } .marca__nome { font-size: 1.12rem; letter-spacing: 0.16em; } } @media (min-width: 900px) { .menu { display: flex; } } /* ---------------------------- Heroi ---------------------------- */ .heroi { position: relative; /* min-height, nunca height: com altura travada o conteudo e cortado em janela baixa, armadilha 7.2 */ min-height: min(var(--h-heroi), 820px); display: grid; align-items: end; padding: clamp(5rem, 14vh, 8rem) 0 clamp(2.5rem, 7vh, 4rem); /* sem overflow clip aqui: a foto de fundo e absoluta com inset 0 e nao vaza, e o clip so servia para cortar o proprio conteudo em janela baixa */ } .heroi__foto { position: absolute; inset: 0; z-index: 0; } .heroi__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; } .heroi__veu { position: absolute; inset: 0; z-index: 1; /* Duas camadas em vez de um escurecimento parelho: a horizontal segura o contraste do texto a esquerda, a vertical costura o heroi com a secao seguinte. Assim a piscina continua visivel. */ background: linear-gradient(105deg, rgba(8, 8, 10, 0.88) 0%, rgba(8, 8, 10, 0.62) 38%, rgba(8, 8, 10, 0.12) 72%), linear-gradient(to bottom, rgba(8, 8, 10, 0.55) 0%, rgba(8, 8, 10, 0.08) 30%, rgba(8, 8, 10, 0.82) 86%, var(--tinta-000) 100%); } .heroi__conteudo { position: relative; z-index: 2; } .heroi h1 { max-width: 15ch; margin-bottom: 0.35em; } .heroi h1 em { display: block; font-style: italic; color: var(--ouro-claro); } .heroi__linha { max-width: 46ch; color: var(--claro-100); font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem); margin-bottom: 1.6rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); } .heroi__acoes { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.8rem; } .prova { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; /* e um

, e o margin-bottom herdado sobrava para fora da caixa do heroi em janela baixa. Foi assim que o conteudo aparecia cortado. */ margin-bottom: 0; padding-top: 1.4rem; border-top: 1px solid rgba(207, 174, 94, 0.28); font-size: 0.92rem; color: var(--texto-suave); } .prova__nota { font-family: var(--fonte-display); font-size: 1.9rem; line-height: 1; color: var(--ouro-claro); font-variant-numeric: tabular-nums; } .prova__estrelas { color: var(--ouro); letter-spacing: 0.1em; } .prova__fonte { font-variant-numeric: tabular-nums; } /* o botao flutuante do WhatsApp cobria o fim desta linha no celular */ @media (max-width: 759px) { .prova { padding-right: 72px; } } /* ---------------------------- Secoes ---------------------------- */ .secao { padding: clamp(3.5rem, 9vw, 6.5rem) 0; position: relative; } .secao--escura { background: var(--tinta-050); } .secao--fundo { background: var(--tinta-100); } .secao--clara { background: var(--claro-000); color: var(--texto-escuro); } .secao--clara h2 { color: var(--texto-escuro); } .secao--clara .selo-secao { color: var(--ouro-fundo); } .secao--clara .selo-secao::before { background: linear-gradient(90deg, transparent, #bda869); } .secao--clara .selo-secao::after { background: linear-gradient(270deg, transparent, #bda869); } .secao--clara .faceta path { stroke: var(--ouro-fundo); } .secao--clara .faceta .brilho { stroke: #bda869; } .secao__cabeca { text-align: center; max-width: 62ch; margin: 0 auto clamp(2rem, 5vw, 3.2rem); } .secao__cabeca p { color: var(--texto-suave); margin-bottom: 0; } .secao--clara .secao__cabeca p { color: var(--texto-escuro-suave); } /* ---------------------------- Estrutura ---------------------------- */ .grade-estrutura { display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); grid-template-columns: 1fr; } @media (min-width: 620px) { .grade-estrutura { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .grade-estrutura { grid-template-columns: repeat(3, 1fr); } } .cartao { background: var(--tinta-100); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.5rem 1.4rem; position: relative; } .secao--fundo .cartao { background: var(--tinta-050); } .cartao h3 { margin-bottom: 0.35em; color: var(--claro-000); } .cartao p { margin-bottom: 0; color: var(--texto-suave); font-size: 0.96rem; } /* especificidade: .cartao p venceria .cartao__selo, entao qualifico, armadilha 7.9 */ .cartao .cartao__selo { display: inline-block; margin-top: 0.7rem; padding: 0.2rem 0.55rem; border: 1px dashed var(--ouro-fundo); border-radius: var(--raio); color: var(--ouro); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .cartao__icone { display: block; width: 26px; height: 26px; margin-bottom: 0.9rem; color: var(--ouro); } /* ---------------------------- Galeria ---------------------------- */ /* Rolador lateral nativo com scroll-snap. Nada de rolagem presa, armadilha 7.6 */ .galeria { display: flex; gap: clamp(0.7rem, 1.6vw, 1.1rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gap); padding: 0.4rem var(--gap) 1.3rem; margin-inline: calc(-1 * var(--gap)); scrollbar-width: thin; scrollbar-color: var(--ouro-fundo) transparent; overscroll-behavior-x: contain; } .galeria::-webkit-scrollbar { height: 8px; } .galeria::-webkit-scrollbar-thumb { background: var(--ouro-fundo); border-radius: 99px; } .galeria__item { flex: 0 0 auto; width: min(78vw, 340px); scroll-snap-align: center; margin: 0; border-radius: var(--raio); overflow: hidden; background: var(--tinta-200); position: relative; } .galeria__item img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .galeria__item figcaption { padding: 0.7rem 0.9rem 0.85rem; font-size: 0.86rem; color: var(--texto-suave); background: var(--tinta-100); } @media (min-width: 760px) { .galeria__item { width: 320px; } } .galeria-controles { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.2rem; } .seta { width: 46px; height: 46px; display: grid; place-items: center; background: transparent; border: 1px solid var(--borda-componente); border-radius: 50%; color: var(--texto-suave); cursor: pointer; transition: border-color 160ms ease, color 160ms ease; } .seta:hover { border-color: var(--ouro); color: var(--ouro-claro); } .seta[disabled] { opacity: 0.35; cursor: default; } /* ---------------------------- Ocasioes ---------------------------- */ .ocasioes { display: grid; gap: clamp(0.8rem, 2vw, 1.2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .ocasiao { border: 1px solid var(--borda-clara); border-radius: var(--raio); padding: 1.3rem 1.2rem; background: #fff; } .ocasiao h3 { color: var(--texto-escuro); margin-bottom: 0.25em; } .ocasiao p { margin-bottom: 0; color: var(--texto-escuro-suave); font-size: 0.94rem; } /* ---------------------------- Valores ---------------------------- */ .valores { display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .valores { grid-template-columns: 1.05fr 0.95fr; } } .painel-valor { background: var(--tinta-100); border: 1px solid var(--borda); border-radius: var(--raio); padding: clamp(1.4rem, 3vw, 2.1rem); } .painel-valor h3 { color: var(--claro-000); } .lista-limpa { list-style: none; margin: 0; padding: 0; } .lista-limpa li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.5rem 0; border-bottom: 1px solid var(--borda); font-size: 0.97rem; } .lista-limpa li:last-child { border-bottom: 0; } .lista-limpa svg { flex: none; margin-top: 0.28em; color: var(--ouro); } .aviso { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1.05rem 1.2rem; border: 1px dashed var(--ouro-fundo); border-radius: var(--raio); background: rgba(207, 174, 94, 0.06); font-size: 0.95rem; color: var(--texto-suave); } .aviso strong { color: var(--ouro-claro); } .aviso svg { flex: none; margin-top: 0.2em; color: var(--ouro); } /* ---------------------------- Depoimentos ---------------------------- */ .depoimentos { display: grid; gap: clamp(0.9rem, 2vw, 1.3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .depoimento { background: var(--tinta-050); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.5rem 1.4rem; margin: 0; display: flex; flex-direction: column; } .depoimento blockquote { margin: 0 0 1rem; } .depoimento p { color: var(--texto); font-size: 0.98rem; } .depoimento figcaption { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--borda); font-size: 0.87rem; color: var(--texto-suave); } .depoimento cite { font-style: normal; font-weight: 600; color: var(--claro-100); } .estrelas { color: var(--ouro); letter-spacing: 0.12em; margin-bottom: 0.6rem; display: block; } /* ---------------------------- Local ---------------------------- */ .local { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 860px) { .local { grid-template-columns: 1fr 1fr; } } .local__foto { margin: 0; border-radius: var(--raio); overflow: hidden; } .local__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .endereco { font-style: normal; font-size: 1.05rem; line-height: 1.75; } .endereco strong { color: var(--claro-000); } .dado-linha { display: flex; gap: 0.7rem; align-items: center; font-variant-numeric: tabular-nums; margin-bottom: 0.4rem; } .dado-linha a { display: inline-flex; align-items: center; min-height: 44px; } .dado-linha svg { flex: none; color: var(--ouro); } /* ---------------------------- Perguntas ---------------------------- */ .perguntas { max-width: 780px; margin-inline: auto; } .perguntas details { border-bottom: 1px solid var(--borda); } .perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 1rem 0; cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none; } .perguntas summary::-webkit-details-marker { display: none; } .perguntas summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 1.5px solid var(--ouro); border-bottom: 1.5px solid var(--ouro); transform: rotate(45deg) translateY(-3px); transition: transform 200ms ease; } .perguntas details[open] summary::after { transform: rotate(-135deg) translateY(-3px); } .perguntas .resposta { padding: 0 0 1.2rem; color: var(--texto-suave); } .perguntas .resposta p:last-child { margin-bottom: 0; } /* ---------------------------- Chamada final ---------------------------- */ .chamada { text-align: center; padding: clamp(3.5rem, 9vw, 6rem) 0; background: radial-gradient(120% 100% at 50% 0%, rgba(207, 174, 94, 0.12), transparent 62%), var(--tinta-050); } .chamada h2 { max-width: 18ch; margin-inline: auto; } .chamada p { max-width: 52ch; margin-inline: auto 1.6rem; color: var(--texto-suave); } .chamada__acoes { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 1.8rem; } /* ---------------------------- Rodape ---------------------------- */ .rodape { background: var(--tinta-000); border-top: 1px solid var(--borda); padding: clamp(2.5rem, 6vw, 3.5rem) 0 calc(2rem + env(safe-area-inset-bottom)); font-size: 0.92rem; color: var(--texto-suave); } .rodape__grade { display: grid; gap: 1.8rem; grid-template-columns: 1fr; } @media (min-width: 760px) { .rodape__grade { grid-template-columns: 1.3fr 1fr 1fr; } } .rodape h3 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro); margin-bottom: 0.9rem; } .rodape ul { list-style: none; margin: 0; padding: 0; } .rodape li { padding: 0; } .rodape a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-suave); text-decoration: none; } .rodape p { margin-bottom: 0.6rem; } .rodape a:hover { color: var(--ouro-claro); text-decoration: underline; } .rodape__base { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; justify-content: space-between; font-size: 0.85rem; } .rodape__movimento { background: none; border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto-suave); padding: 0.5rem 0.9rem; min-height: 44px; font-size: 0.82rem; font-family: inherit; cursor: pointer; } .rodape__movimento:hover { border-color: var(--ouro-fundo); color: var(--ouro-claro); } /* ---------------------------- Zap flutuante ---------------------------- */ .zap-flutua { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 50; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--zap); color: #fff; box-shadow: var(--sombra); transition: background-color 180ms ease, transform 180ms ease; } .zap-flutua:hover { background: var(--zap-forte); transform: scale(1.06); } /* ---------------------------- 404 ---------------------------- */ .erro { min-height: min(var(--h-heroi), 720px); display: grid; place-items: center; text-align: center; padding: 4rem 0; } .erro__codigo { font-family: var(--fonte-display); font-size: clamp(4.5rem, 16vw, 9rem); line-height: 1; color: var(--ouro); font-variant-numeric: tabular-nums; margin-bottom: 0.2em; } /* -------------------- Revelacoes ao rolar -------------------- Regra de ouro da armadilha 7.4: NENHUM elemento nasce com opacity 0 no CSS. A classe .js-revelar so e posta pelo JavaScript, e so quando o movimento esta liberado. Sem JavaScript, ou com movimento reduzido, a pagina aparece inteira. */ .js-revelar [data-revelar] { opacity: 0; transform: translateY(18px); transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1); } .js-revelar [data-revelar].visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { /* preso a :root:not(.movimento-forcado) para que o botao do rodape possa devolver o movimento a quem pediu, armadilha 7.4 */ :root:not(.movimento-forcado) html { scroll-behavior: auto; } :root:not(.movimento-forcado) .botao:hover, :root:not(.movimento-forcado) .zap-flutua:hover { transform: none; } :root:not(.movimento-forcado) *, :root:not(.movimento-forcado) *::before, :root:not(.movimento-forcado) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* -------------------- Entrada do heroi -------------------- Acima da dobra tem que ser @keyframes, nao JavaScript: o script com defer chega depois da primeira pintura. E o heroi respeita a regra 7.3: a FOTO responde a rolagem, o TEXTO responde ao carregamento. Nunca os dois no mesmo elemento. */ @keyframes sobe { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .heroi__conteudo > * { animation: sobe 800ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } .heroi__conteudo > *:nth-child(1) { animation-delay: 60ms; } .heroi__conteudo > *:nth-child(2) { animation-delay: 160ms; } .heroi__conteudo > *:nth-child(3) { animation-delay: 250ms; } .heroi__conteudo > *:nth-child(4) { animation-delay: 340ms; } .heroi__conteudo > *:nth-child(5) { animation-delay: 430ms; } @media print { .topo, .zap-flutua, .galeria-controles, .rodape__movimento { display: none; } body { background: #fff; color: #000; } }