* { box-sizing: border-box; } /* Só a página pública do presente (que coloca theme-* no ): sem este escopo, importar o gift.css em outra página (home, pedido) centralizava o e trocava o fundo por um degradê com variáveis inexistentes. */ body[class*="theme-"] { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: linear-gradient(160deg, var(--gift-bg-1), var(--gift-bg-2)); color: var(--gift-fg); } /* Definidas em .theme-X (não "body.theme-X") de propósito: assim o mesmo tema também funciona num container qualquer, como a prévia ao vivo do formulário de pedido — não só no da página pública do cartão. */ .theme-aniversario { --gift-bg-1: #ff9a8b; --gift-bg-2: #ff6a88; --gift-fg: #3a0d18; --gift-accent: #ffffff; } .theme-natal { --gift-bg-1: #1f4037; --gift-bg-2: #99f2c8; --gift-fg: #ffffff; --gift-accent: #ffe08a; } .theme-maes { --gift-bg-1: #f6d5f7; --gift-bg-2: #fbe9d7; --gift-fg: #5a3450; --gift-accent: #ffffff; } .theme-desculpas { --gift-bg-1: #667eea; --gift-bg-2: #764ba2; --gift-fg: #ffffff; --gift-accent: #ffffff; } .theme-rosa-3d { --gift-bg-1: #2b0a10; --gift-bg-2: #6e0f22; --gift-fg: #fdf0f2; --gift-accent: #ffffff; } .gift-card { position: relative; z-index: 1; max-width: 480px; width: 100%; background: color-mix(in srgb, var(--gift-accent) 18%, transparent); backdrop-filter: blur(6px); border-radius: 20px; padding: 40px 28px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); } .gift-decor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .gift-decor span { position: absolute; top: -10vh; font-size: 1.8rem; opacity: 0.8; animation-name: gift-decor-fall; animation-timing-function: linear; animation-iteration-count: infinite; } .gift-decor span::before { content: "✨"; } .theme-aniversario .gift-decor span::before { content: "🎈"; } .theme-natal .gift-decor span::before { content: "❄️"; } .theme-maes .gift-decor span::before { content: "🌸"; } .theme-desculpas .gift-decor span::before { content: "💜"; } .theme-rosa-3d .gift-decor span::before { content: "🌹"; } .gift-decor span:nth-child(1) { left: 5%; animation-duration: 9s; animation-delay: 0s; } .gift-decor span:nth-child(2) { left: 18%; animation-duration: 12s; animation-delay: 1.5s; } .gift-decor span:nth-child(3) { left: 32%; animation-duration: 8s; animation-delay: 3s; } .gift-decor span:nth-child(4) { left: 48%; animation-duration: 14s; animation-delay: 0.5s; } .gift-decor span:nth-child(5) { left: 62%; animation-duration: 10s; animation-delay: 2s; } .gift-decor span:nth-child(6) { left: 75%; animation-duration: 11s; animation-delay: 4s; } .gift-decor span:nth-child(7) { left: 85%; animation-duration: 9.5s; animation-delay: 1s; } .gift-decor span:nth-child(8) { left: 95%; animation-duration: 13s; animation-delay: 2.5s; } @keyframes gift-decor-fall { 0% { transform: translateY(0) translateX(0) rotate(0deg); } 50% { transform: translateY(55vh) translateX(24px) rotate(180deg); } 100% { transform: translateY(120vh) translateX(-24px) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .gift-decor span { animation: none; opacity: 0.25; } } .gift-occasion { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8em; opacity: 0.85; margin: 0 0 8px; } .gift-title { margin: 0 0 24px; font-size: 1.8em; } .gift-photo { width: 100%; max-height: 280px; object-fit: cover; border-radius: 14px; margin-bottom: 20px; display: block; } .gift-message { background: rgba(255, 255, 255, 0.25); border-radius: 14px; padding: 20px; margin-bottom: 20px; font-size: 1.05em; line-height: 1.5; text-align: left; white-space: pre-line; } .gift-signature { font-style: italic; opacity: 0.9; margin-bottom: 24px; } .gift-share { text-align: center; } .gift-share summary { cursor: pointer; font-size: 0.9em; opacity: 0.85; } .gift-qr { margin-top: 16px; width: 160px; height: 160px; background: #fff; border-radius: 8px; padding: 8px; } .gift-url { font-size: 0.75em; word-break: break-all; opacity: 0.75; margin-top: 8px; } .gift-share-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; } .gift-share-whatsapp { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: #25d366; color: #fff; font-weight: 600; font-size: 0.85em; text-decoration: none; } .gift-share--featured { text-align: center; } .gift-share-label { font-size: 0.9em; opacity: 0.85; margin: 0; } .gift-qr--featured { width: 200px; height: 200px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .rose3d-stage { position: relative; width: 100%; max-width: 480px; height: 320px; margin: 0 auto 20px; border-radius: 20px; /* Sem overflow:hidden: recortar com cantos arredondados uma camada WebGL que muda a cada quadro custa GPU, e o canvas é transparente (nada vaza). O fallback de emojis recorta a si mesmo. */ background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.12), transparent 70%); } .rose3d-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; } .rose3d-stage canvas:active { cursor: grabbing; } .rose3d-stage .gift-decor { position: absolute; border-radius: 20px; } /* display:block do canvas vence o [hidden] do navegador; sem isto o fallback não esconde o canvas. */ .rose3d-stage [hidden] { display: none !important; } .gift-credit { margin: 20px 0 0; font-size: 0.7em; opacity: 0.7; text-align: center; line-height: 1.4; } .gift-credit a { color: inherit; }