/* Landing page do casamento — mobile-first. Cores: variáveis no atributo style do , calculadas no servidor (mckz.casamento._tema_css): --fundo --superficie --tinta --suave --destaque --destaque-forte --sobre-destaque --claro --linha */ :root { --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --raio: 20px; --sombra: 0 18px 50px -24px rgba(40, 28, 16, .35); --largura: 1080px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body.lp { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--destaque-forte); } .lp-escuro a { color: var(--destaque); } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0; letter-spacing: -.01em; } p { margin: 0; } .sobretitulo { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--destaque-forte); margin-bottom: 14px; } .lp-escuro .sobretitulo { color: var(--destaque); } .miudo { font-size: 14px; color: var(--suave); margin-top: 14px; } /* ------------------------------------------------------------------ botões */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 28px; border-radius: 999px; font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: .01em; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; -webkit-tap-highlight-color: transparent; } .botao:active { transform: scale(.98); } .botao:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; } .botao-principal { background: var(--destaque-forte); color: var(--sobre-destaque) !important; box-shadow: 0 12px 28px -12px var(--destaque-forte); } .botao-principal:hover { box-shadow: 0 16px 34px -12px var(--destaque-forte); transform: translateY(-1px); } .botao-fantasma { background: transparent; color: var(--tinta) !important; border: 1.5px solid var(--linha); } .botao-grande { min-height: 60px; padding: 18px 36px; font-size: 18px; } /* ------------------------------------------------------------------ topo */ .lp-topo { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; padding-top: max(14px, env(safe-area-inset-top)); transition: background-color .25s ease, box-shadow .25s ease; } .lp-topo.rolou, .lp-topo-fixo { background: color-mix(in srgb, var(--fundo) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--linha); } .lp-monograma { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; font-family: var(--serif); font-style: italic; font-size: 19px; text-decoration: none; color: var(--tinta); } .lp-topo-entrar { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--tinta); padding: 10px 14px; border-radius: 999px; } body:has(.hero-foto) .lp-topo:not(.rolou) .lp-monograma, body:has(.hero-foto) .lp-topo:not(.rolou) .lp-topo-entrar { color: #fff; } /* ------------------------------------------------------------------ hero */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 104px 22px 88px; overflow: hidden; isolation: isolate; } .hero-tipo { background: radial-gradient(120% 70% at 50% 0%, var(--claro) 0%, transparent 60%), radial-gradient(90% 60% at 50% 110%, var(--claro) 0%, transparent 55%), var(--fundo); } .hero-tipo::before { content: ''; position: absolute; inset: 12px; border: 1px solid var(--linha); border-radius: 28px; pointer-events: none; z-index: -1; } .hero-tipo::after { content: ''; position: absolute; inset: 20px; border: 1px solid var(--linha); border-radius: 22px; opacity: .55; pointer-events: none; z-index: -1; } .hero-midia { position: absolute; inset: 0; z-index: -2; } .hero-midia img { width: 100%; height: 100%; object-fit: cover; animation: aproximar 18s ease-out both; } .hero-foto::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 6, .45) 0%, rgba(10, 8, 6, .18) 38%, rgba(10, 8, 6, .72) 100%); } .hero-foto { color: #fff; align-items: flex-end; } .hero-foto .sobretitulo, .hero-foto .hero-e { color: rgba(255, 255, 255, .88); } .hero-foto .botao-fantasma { color: #fff !important; border-color: rgba(255, 255, 255, .55); } .hero-conteudo { max-width: 640px; width: 100%; animation: surgir 1s ease-out both; } .hero-nomes { font-style: italic; font-weight: 500; font-size: clamp(3.4rem, 17vw, 7.2rem); line-height: .92; margin: 6px 0 18px; } .hero-nomes span { display: block; } .hero-e { font-size: .52em; color: var(--destaque); font-style: italic; margin: .08em 0 .02em; } .hero-ornamento { color: var(--destaque); margin: 0 auto 18px; display: flex; justify-content: center; } .hero-foto .hero-ornamento { color: rgba(255, 255, 255, .8); } .hero-quando { font-size: 15px; font-weight: 600; letter-spacing: .03em; } .hero-quando::first-letter { text-transform: uppercase; } .hero-onde { font-size: 15px; opacity: .8; margin-top: 2px; } .hero-frase { font-family: var(--serif); font-size: clamp(1.35rem, 5.6vw, 1.75rem); font-style: italic; line-height: 1.3; margin: 22px auto 30px; max-width: 22em; } .hero-acoes { display: flex; flex-direction: column; gap: 12px; align-items: stretch; max-width: 340px; margin: 0 auto; } .contagem { display: flex; justify-content: center; gap: 10px; margin-top: 30px; } .contagem div { min-width: 76px; padding: 10px 8px; border-radius: 16px; background: color-mix(in srgb, var(--superficie) 70%, transparent); border: 1px solid var(--linha); } .hero-foto .contagem div { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .contagem strong { display: block; font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; } .contagem span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; } .contagem-hoje { font-family: var(--serif); font-size: 26px; font-style: italic; margin-top: 26px; } .hero-rolar { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: inherit; opacity: .6; animation: quicar 2.4s ease-in-out infinite; } /* ------------------------------------------------------------------ seções */ section { padding: 88px 22px; } .manifesto { text-align: center; max-width: 820px; margin: 0 auto; padding-top: 104px; padding-bottom: 104px; } .manifesto h2 { font-size: clamp(2.1rem, 8.4vw, 3.6rem); } .manifesto h2 em { color: var(--destaque-forte); } .lp-escuro .manifesto h2 em { color: var(--destaque); } .manifesto p { margin: 26px auto 0; max-width: 34em; color: var(--suave); font-size: 17px; } .como { max-width: var(--largura); margin: 0 auto; text-align: center; } .como h2 { font-size: clamp(2rem, 7.4vw, 3rem); max-width: 16em; margin: 0 auto; } .passos { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: 16px; text-align: left; } .passo { position: relative; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px 24px 26px; overflow: hidden; } .passo-num { position: absolute; top: -10px; right: 14px; font-family: var(--serif); font-style: italic; font-size: 96px; line-height: 1; color: var(--destaque); opacity: .18; } .passo-icone { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--claro); color: var(--destaque-forte); margin-bottom: 18px; } .lp-escuro .passo-icone { color: var(--destaque); } .passo h3 { font-size: 26px; margin-bottom: 8px; } .passo p { color: var(--suave); font-size: 15.5px; } /* O mural (vitrine com o celular) */ .vitrine { max-width: var(--largura); margin: 0 auto; display: grid; gap: 56px; align-items: center; } .vitrine h2, .convite-texto h2, .sorteios h2, .final h2 { font-size: clamp(2rem, 7.4vw, 3rem); } .vitrine-texto > p:not(.sobretitulo) { margin-top: 18px; color: var(--suave); font-size: 17px; } .lista-check { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; } .lista-check li { position: relative; padding-left: 34px; font-weight: 600; } .lista-check li::before { content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; } .celular { justify-self: center; width: min(290px, 78vw); aspect-ratio: 9 / 18.5; border-radius: 44px; padding: 11px; background: #17161a; box-shadow: var(--sombra), inset 0 0 0 2px #2d2c31; transform: rotate(-2.5deg); } .celular-tela { height: 100%; border-radius: 34px; background: var(--fundo); overflow: hidden; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); } .celular-barra { text-align: center; font-family: var(--serif); font-style: italic; font-size: 17px; padding: 2px 0 4px; border-bottom: 1px solid var(--linha); } .post-demo { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 10px; font-size: 12.5px; line-height: 1.4; animation: flutuar 6s ease-in-out infinite; } .post-demo:nth-child(3) { animation-delay: -2s; } .post-demo:nth-child(4) { animation-delay: -4s; } .post-demo p { margin-top: 8px; } .post-demo-autor { display: flex; align-items: center; gap: 7px; } .post-demo-autor b { font-size: 12.5px; } .post-demo-autor small { margin-left: auto; color: var(--suave); font-size: 11px; } .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--serif); font-size: 13px; background: var(--claro); color: var(--destaque-forte); } .av-2 { background: #e7e1f3; color: #5b4a86; } .av-3 { background: #dfeee6; color: #3e6b52; } .post-demo-foto { margin-top: 8px; height: 112px; border-radius: 10px; position: relative; overflow: hidden; } .post-demo-foto-real img { width: 100%; height: 100%; object-fit: cover; } .foto-a { background: radial-gradient(circle at 22% 30%, rgba(255, 255, 255, .7) 0 5px, transparent 7px), radial-gradient(circle at 70% 22%, rgba(255, 240, 210, .8) 0 4px, transparent 7px), radial-gradient(circle at 84% 60%, rgba(255, 255, 255, .5) 0 6px, transparent 9px), linear-gradient(135deg, #f3d3c1 0%, #d8a08c 45%, #8d6f86 100%); } .foto-b { background: radial-gradient(circle at 30% 70%, rgba(255, 214, 150, .55) 0 10px, transparent 22px), radial-gradient(circle at 76% 34%, rgba(255, 190, 220, .45) 0 8px, transparent 18px), linear-gradient(160deg, #2a2f4a 0%, #6b4d7a 58%, #e0a96d 100%); } .play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(255, 255, 255, .85); } .play::after { content: ''; position: absolute; left: 15px; top: 11px; border-left: 12px solid #2a2f4a; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .post-demo-acoes { margin-top: 6px; color: var(--suave); font-size: 11px; } .post-demo-texto p { font-family: var(--serif); font-size: 16px; font-style: italic; } /* Convite */ .convite-sec { max-width: var(--largura); margin: 0 auto; display: grid; gap: 52px; align-items: center; } .convite-cartao { position: relative; justify-self: center; width: min(300px, 80vw); padding: 34px 26px 30px; background: var(--superficie); border-radius: 6px; text-align: center; box-shadow: var(--sombra), inset 0 0 0 1px var(--linha), inset 0 0 0 9px var(--superficie), inset 0 0 0 10px var(--destaque); transform: rotate(2deg); } .convite-selo { position: absolute; top: 14px; right: -8px; background: var(--destaque-forte); color: var(--sobre-destaque); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; transform: rotate(6deg); } .convite-de { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--suave); } .convite-nome { font-family: var(--serif); font-style: italic; font-size: 46px; line-height: 1.05; margin: 4px 0 16px; } .convite-retrato { width: 128px; height: 128px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, var(--claro), var(--linha)); color: var(--destaque-forte); box-shadow: 0 0 0 4px var(--superficie), 0 0 0 5px var(--destaque); } .convite-para { font-size: 12px; color: var(--suave); } .convite-noivos { font-family: var(--serif); font-size: 26px; font-style: italic; margin-top: 2px; } .convite-data { font-size: 12px; letter-spacing: .3em; margin-top: 10px; color: var(--suave); } .convite-texto > p:not(.sobretitulo):not(.miudo) { margin: 18px 0 28px; color: var(--suave); font-size: 17px; } /* Sorteios */ .sorteios { max-width: 760px; margin: 0 auto 0; text-align: center; background: var(--claro); border-radius: 32px; padding: 56px 26px; margin-left: 16px; margin-right: 16px; } .sorteios-icone { color: var(--destaque-forte); display: flex; justify-content: center; margin-bottom: 16px; } .lp-escuro .sorteios-icone { color: var(--destaque); } .sorteios p { margin: 16px auto 0; max-width: 30em; color: var(--suave); } /* História */ .historia { max-width: var(--largura); margin: 0 auto; display: grid; gap: 40px; align-items: center; } .historia-foto img { width: min(360px, 100%); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 18px 18px; margin: 0 auto; box-shadow: var(--sombra); } .historia-texto p:not(.sobretitulo) { font-family: var(--serif); font-size: 21px; line-height: 1.5; margin-bottom: 16px; } /* Informações */ .info { max-width: 880px; margin: 0 auto; display: grid; gap: 16px; } .info-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px 26px; text-align: center; } .info-grande { font-family: var(--serif); font-size: 28px; line-height: 1.2; } .info-grande::first-letter { text-transform: uppercase; } .info-sub { color: var(--suave); margin-top: 6px; } .info-mapa { display: inline-block; margin-top: 14px; font-weight: 700; text-decoration: none; } /* CTA final */ .final { text-align: center; padding: 110px 22px 120px; background: radial-gradient(80% 90% at 50% 100%, var(--claro) 0%, transparent 70%); } .final h2 { max-width: 14em; margin: 0 auto 30px; font-style: italic; } .lp-rodape { text-align: center; padding: 36px 22px 110px; font-size: 13.5px; color: var(--suave); border-top: 1px solid var(--linha); } .lp-rodape p + p { margin-top: 6px; } .rodape-hashtag { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--tinta); } /* CTA flutuante (só celular, aparece depois do hero) */ .cta-flutuante { position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 999px; background: var(--destaque-forte); color: var(--sobre-destaque) !important; font-weight: 700; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); transform: translateY(140%); transition: transform .3s ease; } .cta-flutuante.visivel { transform: none; } /* Termos */ .lp-doc .doc { max-width: 680px; margin: 0 auto; padding: 110px 22px 60px; } .doc h1 { font-size: clamp(2.4rem, 9vw, 3.4rem); margin-bottom: 18px; } .doc h2 { font-size: 26px; margin: 34px 0 10px; } .doc p, .doc li { color: var(--tinta); } .doc-intro { font-size: 18px; color: var(--suave) !important; } .doc ul { padding-left: 20px; } .doc li + li { margin-top: 6px; } /* ------------------------------------------------------------------ animações */ .js .revelar { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; } .js .revelar.visto { opacity: 1; transform: none; } @keyframes surgir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes aproximar { from { transform: scale(1.08); } to { transform: scale(1); } } @keyframes quicar { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } @keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .js .revelar { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ telas maiores */ @media (min-width: 760px) { section { padding: 120px 40px; } .hero { padding: 120px 40px 110px; } .hero-nomes span { display: inline; } .hero-e { margin: 0 .18em; } .hero-acoes { flex-direction: row; justify-content: center; max-width: none; } .passos { grid-template-columns: repeat(3, 1fr); gap: 22px; } .vitrine { grid-template-columns: 1.1fr .9fr; gap: 72px; } .convite-sec { grid-template-columns: .9fr 1.1fr; gap: 72px; } .historia { grid-template-columns: .8fr 1.2fr; gap: 64px; } .info { grid-template-columns: 1fr 1fr; } .sorteios { margin-left: auto; margin-right: auto; padding: 72px 56px; } .cta-flutuante { display: none; } .lp-rodape { padding-bottom: 40px; } .lp-topo { padding: 18px 32px; } } /* Prêmios na seção de sorteios */ .premios-lp { list-style: none; padding: 0; margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .premios-lp li { display: flex; align-items: center; gap: 10px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 999px; padding: 6px 16px 6px 6px; font-weight: 600; font-size: 15px; } .premios-lp img, .premio-lp-icone { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--claro); } /* ajustes 27/09: fotos inteiras no espaço; demonstração do convite-passe */ .hero-midia img { object-position: 50% 35%; } .post-demo-foto-real { height: auto; } .post-demo-foto-real img { height: auto; aspect-ratio: auto; object-fit: contain; } .historia-foto img { aspect-ratio: auto; height: auto; object-fit: contain; } .convite-retrato { width: 120px; height: 140px; border-radius: 60px 60px 10px 10px; } .convite-canhoto { display: flex; align-items: center; gap: 12px; margin: 18px -26px -30px; padding: 14px 24px 16px; border-top: 1.5px dashed var(--linha); text-align: left; color: var(--tinta); } .convite-qr { color: var(--tinta); background: #fff; padding: 5px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--linha); flex: 0 0 auto; } .convite-canhoto b { display: block; font-size: 10px; letter-spacing: .18em; color: var(--destaque-forte); } .convite-canhoto span { font-family: var(--serif); font-style: italic; font-size: 24px; }