/* * MOZA Convites — Temas Visuais por Tipo de Evento * Cada tema define variáveis CSS e decorações específicas. * Aplicado via classe no : */ /* ── Variáveis base (fallback / wedding) ───────────────────────────────────── */ :root { --t-primary: #48482D; --t-accent: #C9A24B; --t-bg: #FAF7F2; --t-bg2: #F5F0E6; --t-card: #FFFFFF; --t-text: #1a1a1a; --t-text-light: #666666; --t-border: rgba(201,162,75,.25); --t-shadow: rgba(72,72,45,.10); --t-hero-bg: linear-gradient(160deg, #3d3d26 0%, #5a5a38 100%); --t-hero-text: #FAF7F2; --t-deco-top: '❧'; --t-deco-bot: '❧'; --t-font-serif: 'Playfair Display', Georgia, serif; --t-font-body: 'Poppins', sans-serif; --t-radius: 1.2rem; --t-radius-sm: .6rem; } /* ════════════════════════════════════════════════════════════════════════════ 💍 WEDDING — Elegante, Verde Musgo + Dourado ════════════════════════════════════════════════════════════════════════════ */ body.theme-wedding { --t-primary: #48482D; --t-accent: #C9A24B; --t-bg: #FAF7F2; --t-bg2: #F5F0E6; --t-border: rgba(201,162,75,.25); --t-shadow: rgba(72,72,45,.10); --t-hero-bg: linear-gradient(160deg, #3d3d26 0%, #5a5a38 60%, #48482D 100%); --t-deco-top: '❧'; --t-deco-bot: '❧'; } body.theme-wedding .theme-deco-line::before, body.theme-wedding .theme-deco-line::after { content: '— ✦ —'; color: var(--t-accent); font-size: .9rem; letter-spacing: .15em; } /* ════════════════════════════════════════════════════════════════════════════ 💎 ENGAGEMENT — Roxo profundo + Lavanda ════════════════════════════════════════════════════════════════════════════ */ body.theme-engagement { --t-primary: #5C3D8F; --t-accent: #C084FC; --t-bg: #FAF5FF; --t-bg2: #F3E8FF; --t-border: rgba(192,132,252,.25); --t-shadow: rgba(92,61,143,.10); --t-hero-bg: linear-gradient(160deg, #3b1f6e 0%, #5C3D8F 60%, #7c5cb8 100%); --t-deco-top: '💎'; --t-deco-bot: '💎'; } body.theme-engagement .theme-deco-line::before, body.theme-engagement .theme-deco-line::after { content: '— 💎 —'; color: var(--t-accent); font-size: .9rem; } /* ════════════════════════════════════════════════════════════════════════════ 🎂 BIRTHDAY — Vermelho vivo + Laranja festivo ════════════════════════════════════════════════════════════════════════════ */ body.theme-birthday { --t-primary: #C0392B; --t-accent: #F39C12; --t-bg: #FFF9F0; --t-bg2: #FEF3CD; --t-border: rgba(243,156,18,.30); --t-shadow: rgba(192,57,43,.10); --t-hero-bg: linear-gradient(160deg, #922b21 0%, #C0392B 50%, #e74c3c 100%); --t-font-serif: 'Playfair Display', Georgia, serif; --t-deco-top: '🎂'; --t-deco-bot: '🎊'; } body.theme-birthday .theme-deco-line::before, body.theme-birthday .theme-deco-line::after { content: '— 🎉 —'; color: var(--t-accent); font-size: .9rem; } /* ════════════════════════════════════════════════════════════════════════════ 🌟 SWEET16 / MILESTONE — Roxo + Rosa ════════════════════════════════════════════════════════════════════════════ */ body.theme-sweet16 { --t-primary: #8E44AD; --t-accent: #F1948A; --t-bg: #FDF4FF; --t-bg2: #FAE8FF; --t-border: rgba(241,148,138,.30); --t-shadow: rgba(142,68,173,.10); --t-hero-bg: linear-gradient(160deg, #6c3483 0%, #8E44AD 55%, #a569bd 100%); --t-deco-top: '✨'; --t-deco-bot: '🌟'; } body.theme-sweet16 .theme-deco-line::before, body.theme-sweet16 .theme-deco-line::after { content: '— ✨ —'; color: var(--t-accent); font-size: .9rem; } /* ════════════════════════════════════════════════════════════════════════════ 🎓 GRADUATION — Azul marinho + Dourado académico ════════════════════════════════════════════════════════════════════════════ */ body.theme-graduation { --t-primary: #1A3C5E; --t-accent: #C9A24B; --t-bg: #F0F4F8; --t-bg2: #E8EFF5; --t-border: rgba(201,162,75,.30); --t-shadow: rgba(26,60,94,.12); --t-hero-bg: linear-gradient(160deg, #0d2137 0%, #1A3C5E 60%, #24527a 100%); --t-deco-top: '🎓'; --t-deco-bot: '🏅'; } body.theme-graduation .theme-deco-line::before, body.theme-graduation .theme-deco-line::after { content: '— 🎓 —'; color: var(--t-accent); font-size: .9rem; } /* ════════════════════════════════════════════════════════════════════════════ 🍼 BABY SHOWER — Azul bebé + Rosa pastel ════════════════════════════════════════════════════════════════════════════ */ body.theme-baby_shower { --t-primary: #5B8FB9; --t-accent: #F4A7B9; --t-bg: #F0F7FF; --t-bg2: #E8F4FD; --t-border: rgba(244,167,185,.35); --t-shadow: rgba(91,143,185,.10); --t-hero-bg: linear-gradient(160deg, #3a6e96 0%, #5B8FB9 55%, #7aafd4 100%); --t-font-serif: 'Playfair Display', Georgia, serif; --t-radius: 1.6rem; --t-radius-sm: .9rem; --t-deco-top: '🍼'; --t-deco-bot: '⭐'; } body.theme-baby_shower .theme-deco-line::before, body.theme-baby_shower .theme-deco-line::after { content: '— 🌸 —'; color: var(--t-accent); font-size: .9rem; } /* ════════════════════════════════════════════════════════════════════════════ 🏠 HOUSEWARMING — Verde floresta + Âmbar ════════════════════════════════════════════════════════════════════════════ */ body.theme-housewarming { --t-primary: #4A7C59; --t-accent: #D4A853; --t-bg: #F2F8F4; --t-bg2: #E8F4EC; --t-border: rgba(212,168,83,.30); --t-shadow: rgba(74,124,89,.10); --t-hero-bg: linear-gradient(160deg, #2d5236 0%, #4A7C59 60%, #6a9d76 100%); --t-deco-top: '🏠'; --t-deco-bot: '🌿'; } body.theme-housewarming .theme-deco-line::before, body.theme-housewarming .theme-deco-line::after { content: '— 🌿 —'; color: var(--t-accent); font-size: .9rem; } /* ════════════════════════════════════════════════════════════════════════════ 🏢 BUSINESS OPENING — Cinza-azul + Laranja corporativo ════════════════════════════════════════════════════════════════════════════ */ body.theme-business_opening { --t-primary: #2C3E50; --t-accent: #E67E22; --t-bg: #F4F6F8; --t-bg2: #ECF0F1; --t-border: rgba(230,126,34,.25); --t-shadow: rgba(44,62,80,.12); --t-hero-bg: linear-gradient(160deg, #1a252f 0%, #2C3E50 60%, #3d5166 100%); --t-font-serif: 'Poppins', sans-serif; --t-font-body: 'Poppins', sans-serif; --t-deco-top: '🏢'; --t-deco-bot: '🤝'; } body.theme-business_opening .theme-deco-line::before, body.theme-business_opening .theme-deco-line::after { content: '— ◆ —'; color: var(--t-accent); font-size: .9rem; } /* ════════════════════════════════════════════════════════════════════════════ ✝️ BAPTISM — Marfim + Dourado suave / Religioso ════════════════════════════════════════════════════════════════════════════ */ body.theme-baptism { --t-primary: #7A6340; --t-accent: #BFA980; --t-bg: #FDFAF5; --t-bg2: #F8F3E8; --t-border: rgba(191,169,128,.30); --t-shadow: rgba(122,99,64,.10); --t-hero-bg: linear-gradient(160deg, #5a4a30 0%, #7A6340 60%, #9a7f55 100%); --t-deco-top: '✝️'; --t-deco-bot: '🕊️'; } body.theme-baptism .theme-deco-line::before, body.theme-baptism .theme-deco-line::after { content: '— ✦ —'; color: var(--t-accent); font-size: .9rem; letter-spacing: .2em; } /* ════════════════════════════════════════════════════════════════════════════ 🎖️ RETIREMENT — Azul aço + Dourado clássico ════════════════════════════════════════════════════════════════════════════ */ body.theme-retirement { --t-primary: #34495E; --t-accent: #C9A24B; --t-bg: #F5F7FA; --t-bg2: #EBF0F5; --t-border: rgba(201,162,75,.25); --t-shadow: rgba(52,73,94,.10); --t-hero-bg: linear-gradient(160deg, #1f2e3d 0%, #34495E 60%, #4a6278 100%); --t-deco-top: '🎖️'; --t-deco-bot: '🌟'; } body.theme-retirement .theme-deco-line::before, body.theme-retirement .theme-deco-line::after { content: '— ★ —'; color: var(--t-accent); font-size: .9rem; letter-spacing: .15em; } /* ════════════════════════════════════════════════════════════════════════════ 🤝 CORPORATE — Azul marinho profundo + Azul elétrico ════════════════════════════════════════════════════════════════════════════ */ body.theme-corporate { --t-primary: #1B2A4A; --t-accent: #3498DB; --t-bg: #F0F4FA; --t-bg2: #E4EAF5; --t-border: rgba(52,152,219,.25); --t-shadow: rgba(27,42,74,.12); --t-hero-bg: linear-gradient(160deg, #0d1829 0%, #1B2A4A 60%, #243d6a 100%); --t-font-serif: 'Poppins', sans-serif; --t-font-body: 'Poppins', sans-serif; --t-radius: .8rem; --t-radius-sm: .4rem; --t-deco-top: '🤝'; --t-deco-bot: '💼'; } body.theme-corporate .theme-deco-line::before, body.theme-corporate .theme-deco-line::after { content: '— ◈ —'; color: var(--t-accent); font-size: .9rem; } /* ════════════════════════════════════════════════════════════════════════════ 🕊️ COMMUNION — Branco puro + Dourado sagrado ════════════════════════════════════════════════════════════════════════════ */ body.theme-communion { --t-primary: #8B6914; --t-accent: #C9A24B; --t-bg: #FEFEFE; --t-bg2: #FBF8F0; --t-border: rgba(201,162,75,.20); --t-shadow: rgba(139,105,20,.08); --t-hero-bg: linear-gradient(160deg, #6b5010 0%, #8B6914 60%, #a87d1c 100%); --t-deco-top: '🕊️'; --t-deco-bot: '✝️'; } body.theme-communion .theme-deco-line::before, body.theme-communion .theme-deco-line::after { content: '— ✦ —'; color: var(--t-accent); font-size: .9rem; letter-spacing: .2em; } /* ════════════════════════════════════════════════════════════════════════════ 👨‍👩‍👧‍👦 REUNION — Verde terra + Âmbar quente ════════════════════════════════════════════════════════════════════════════ */ body.theme-reunion { --t-primary: #2E7D32; --t-accent: #FFC107; --t-bg: #F1F8F1; --t-bg2: #E8F5E9; --t-border: rgba(255,193,7,.30); --t-shadow: rgba(46,125,50,.10); --t-hero-bg: linear-gradient(160deg, #1b5e20 0%, #2E7D32 60%, #388e3c 100%); --t-deco-top: '👨‍👩‍👧‍👦'; --t-deco-bot: '🌳'; } body.theme-reunion .theme-deco-line::before, body.theme-reunion .theme-deco-line::after { content: '— 🌿 —'; color: var(--t-accent); font-size: .9rem; } /* ════════════════════════════════════════════════════════════════════════════ Utilitários partilhados por todos os temas ════════════════════════════════════════════════════════════════════════════ */ /* Aplica variáveis do tema em elementos comuns */ .theme-bg { background: var(--t-bg); } .theme-bg2 { background: var(--t-bg2); } .theme-card { background: var(--t-card, #fff); border-radius: var(--t-radius); box-shadow: 0 4px 20px var(--t-shadow); } .theme-primary { color: var(--t-primary); } .theme-accent { color: var(--t-accent); } .theme-border { border-color: var(--t-border); } /* Hero banner do convite */ .theme-hero { background: var(--t-hero-bg); color: var(--t-hero-text, #fff); position: relative; overflow: hidden; } .theme-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } /* Linha decorativa entre secções */ .theme-deco-line { display: flex; align-items: center; gap: .8rem; color: var(--t-accent); margin: 1.5rem 0; font-size: .8rem; letter-spacing: .1em; } .theme-deco-line::before, .theme-deco-line::after { flex: 1; display: block; height: 1px; background: var(--t-border); content: ''; } /* Badge de tipo de evento (pequena etiqueta no convite) */ .theme-event-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem; border-radius: 999px; background: rgba(255,255,255,.15); color: var(--t-hero-text, #fff); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.2); } /* Selector card (usado em criar.html Step 0) */ .type-card { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.2rem .8rem; border: 2px solid #e5e7eb; border-radius: 1rem; cursor: pointer; transition: all .2s; background: #fff; text-align: center; user-select: none; } .type-card:hover { border-color: var(--t-accent, #C9A24B); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); } .type-card.selected { border-color: var(--t-primary, #48482D); background: var(--t-bg2, #F5F0E6); box-shadow: 0 4px 16px var(--t-shadow, rgba(72,72,45,.15)); } .type-card .type-emoji { font-size: 2rem; line-height: 1; } .type-card .type-label { font-size: .72rem; font-weight: 600; color: #374151; letter-spacing: .04em; } .type-card.selected .type-label { color: var(--t-primary, #48482D); }