/* Yup. — Temas (6 presets) Aplicar via */ /* ====== AZUL AQUARELA (clássico 15 anos / casamento elegante) ====== */ body[data-theme="azul-aquarela"] { --primary: #1e3a5f; --primary-dark: #0f2340; --primary-light: #3a5a82; --accent: #c9a961; --accent-dark: #9d7f3d; --bg: #faf7f2; --surface: #ffffff; --line: #e5e1d9; } /* ====== ROSA ROMÂNTICO (casamento, chá de bebê menina) ====== */ body[data-theme="rosa-romantico"] { --primary: #9b4b5f; --primary-dark: #6d3242; --primary-light: #c17a8c; --accent: #d4a574; --accent-dark: #a8824f; --bg: #fdf9f5; --surface: #ffffff; --line: #efd9dc; } /* ====== VERDE BOTÂNICO (rústico, boho, casamento ao ar livre) ====== */ body[data-theme="verde-botanico"] { --primary: #3d5a3d; --primary-dark: #26391f; --primary-light: #6b8a6b; --accent: #c49a4b; --accent-dark: #91722c; --bg: #f7f5ee; --surface: #ffffff; --line: #dee3d4; } /* ====== DOURADO MINIMAL (corporativo, formal, gala) ====== */ body[data-theme="dourado-minimal"] { --primary: #1a1a1a; --primary-dark: #000000; --primary-light: #3a3a3a; --accent: #b89048; --accent-dark: #8a6a2c; --bg: #faf8f3; --surface: #ffffff; --line: #e6e0d2; } /* ====== FESTA COLORIDA (aniversário casual / infantil) ====== */ body[data-theme="festa-colorida"] { --primary: #6f2dbd; --primary-dark: #4a1d7d; --primary-light: #a366e0; --accent: #ffb347; --accent-dark: #e88a1a; --bg: #fffaf0; --surface: #ffffff; --line: #f0e4d7; } /* ====== PRETO ELEGANTE (black tie / sofisticado) ====== */ body[data-theme="preto-elegante"] { --primary: #c8a96a; --primary-dark: #95794a; --primary-light: #e0c896; --accent: #c8a96a; --accent-dark: #95794a; --bg: #0f0f0f; --surface: #1c1c1c; --line: #2a2a2a; --ink: #f5f5f5; --ink-soft: #c4c4c4; --ink-faint: #7a7a7a; } /* ====== Backgrounds decorativos por tema ====== */ .theme-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .theme-bg .ornament { position: absolute; opacity: 0.7; animation: gentle-float 8s ease-in-out infinite; } .theme-bg .top-left { top: -20px; left: -20px; width: 220px; transform: rotate(-15deg); } .theme-bg .top-right { top: -20px; right: -20px; width: 220px; transform: rotate(15deg) scaleX(-1); } .theme-bg .bottom-left { bottom: -20px; left: -20px; width: 240px; transform: rotate(180deg) scaleX(-1); animation-delay: -4s; } .theme-bg .bottom-right { bottom: -20px; right: -20px; width: 240px; transform: rotate(180deg); animation-delay: -4s; } @media (max-width: 640px) { .theme-bg .ornament { width: 140px; opacity: 0.5; } } @keyframes gentle-float { 0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)) scaleX(var(--sx, 1)); } 50% { transform: translate(0, -8px) rotate(var(--r, 0deg)) scaleX(var(--sx, 1)); } } /* ====== Confetes (tema festa-colorida) ====== */ body[data-theme="festa-colorida"] .theme-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, #ffb347 2px, transparent 3px), radial-gradient(circle at 80% 30%, #6f2dbd 2px, transparent 3px), radial-gradient(circle at 40% 70%, #ec4899 2px, transparent 3px), radial-gradient(circle at 70% 85%, #10b981 2px, transparent 3px), radial-gradient(circle at 20% 90%, #3b82f6 2px, transparent 3px); opacity: 0.4; } /* ====== Modo escuro do preto-elegante ====== */ body[data-theme="preto-elegante"] .card, body[data-theme="preto-elegante"] .stat-card, body[data-theme="preto-elegante"] .modal, body[data-theme="preto-elegante"] .input, body[data-theme="preto-elegante"] .select, body[data-theme="preto-elegante"] .textarea { background: var(--surface); color: var(--ink); border-color: var(--line); } body[data-theme="preto-elegante"] .label { color: var(--ink-soft); } /* ====== QUINZE ROSÉ (15 anos — rosê & champagne) ====== */ body[data-theme="quinze-rose"] { --primary: #b06070; --primary-dark: #8a4355; --primary-light: #cf909d; --accent: #e0a87a; --accent-dark: #b87e50; --bg: #fef9f6; --surface: #ffffff; --line: #f5ddd5; } /* ====== QUINZE VIOLETA (15 anos — violeta & ouro) ====== */ body[data-theme="quinze-violeta"] { --primary: #6b4fa0; --primary-dark: #4a3570; --primary-light: #9978c8; --accent: #c4a86a; --accent-dark: #9b8040; --bg: #faf7ff; --surface: #ffffff; --line: #e8deff; } /* ====== CASAMENTO MARFIM (casamento — marfim & ouro quente) ====== */ body[data-theme="casamento-marfim"] { --primary: #7a5c3a; --primary-dark: #5a4028; --primary-light: #a88060; --accent: #c9a850; --accent-dark: #9b7a2e; --bg: #fdfbf6; --surface: #ffffff; --line: #ede3cc; } /* ====== BEBÊ AZUL (chá de bebê menino) ====== */ body[data-theme="bebe-azul"] { --primary: #3a7ab0; --primary-dark: #285680; --primary-light: #6aa0d0; --accent: #78c8e0; --accent-dark: #48aac8; --bg: #f0f8ff; --surface: #ffffff; --line: #cde4f8; } /* ====== BEBÊ ROSA (chá de bebê menina) ====== */ body[data-theme="bebe-rosa"] { --primary: #c06a82; --primary-dark: #9a4860; --primary-light: #dc98ac; --accent: #f0b8c8; --accent-dark: #cc8898; --bg: #fff5f8; --surface: #ffffff; --line: #fcd8e4; } /* ====== BEBÊ NEUTRO (chá de bebê neutro — amendoado) ====== */ body[data-theme="bebe-neutro"] { --primary: #8b7355; --primary-dark: #6a5438; --primary-light: #b09878; --accent: #d4b880; --accent-dark: #a88a54; --bg: #fdf8f0; --surface: #ffffff; --line: #eddece; } /* ====== FORMATURA NAVY (formatura — navy & dourado) ====== */ body[data-theme="formatura-navy"] { --primary: #1a2f5c; --primary-dark: #0d1a38; --primary-light: #2e508a; --accent: #c8a840; --accent-dark: #9b7e28; --bg: #f6f4ef; --surface: #ffffff; --line: #d8d0c0; } /* ====== ANIVERSÁRIO ADULTO (vinho & dourado) ====== */ body[data-theme="aniversario-adulto"] { --primary: #7a2840; --primary-dark: #5a1828; --primary-light: #a85068; --accent: #c8a04a; --accent-dark: #9a7828; --bg: #fdf8f3; --surface: #ffffff; --line: #e8d4c0; } /* ====================================================== Variações de layout por skin (aplicadas no convite) ====================================================== */ /* --- Título: fonte display (formal/elegante) em vez de script --- */ body[data-theme="dourado-minimal"] .invite-title, body[data-theme="preto-elegante"] .invite-title, body[data-theme="formatura-navy"] .invite-title, body[data-theme="aniversario-adulto"] .invite-title { font-family: var(--font-display); font-size: clamp(32px, 5.5vw, 50px); letter-spacing: 4px; font-weight: 600; font-style: normal; text-transform: uppercase; } /* --- Título: chá de bebê — script suave, um pouco menor --- */ body[data-theme="bebe-azul"] .invite-title, body[data-theme="bebe-rosa"] .invite-title, body[data-theme="bebe-neutro"] .invite-title { font-size: clamp(44px, 8vw, 68px); line-height: 1.15; } /* --- Hero: tints suaves por skin --- */ body[data-theme="quinze-rose"] .invite-hero { background: linear-gradient(170deg, rgba(255,224,220,.35) 0%, transparent 60%); } body[data-theme="quinze-violeta"] .invite-hero { background: linear-gradient(170deg, rgba(216,196,255,.30) 0%, transparent 60%); } body[data-theme="casamento-marfim"] .invite-hero { background: linear-gradient(170deg, rgba(245,235,210,.40) 0%, transparent 60%); } body[data-theme="bebe-azul"] .invite-hero { background: linear-gradient(170deg, rgba(188,224,248,.30) 0%, transparent 60%); } body[data-theme="bebe-rosa"] .invite-hero { background: linear-gradient(170deg, rgba(252,210,224,.30) 0%, transparent 60%); } body[data-theme="bebe-neutro"] .invite-hero { background: linear-gradient(170deg, rgba(230,210,185,.25) 0%, transparent 60%); } /* --- Card: borda superior dourada para skins elegantes/formais --- */ body[data-theme="formatura-navy"] .invite-card, body[data-theme="dourado-minimal"] .invite-card, body[data-theme="preto-elegante"] .invite-card { border-top: 3px solid var(--accent); } /* --- Card: cantos mais suaves para baby shower --- */ body[data-theme="bebe-azul"] .invite-card, body[data-theme="bebe-rosa"] .invite-card, body[data-theme="bebe-neutro"] .invite-card { border-radius: 28px; overflow: hidden; } /* --- Divisor: símbolo personalizado por categoria --- Sobrescreve o ponto padrão do .invite-divider .dot */ /* Casamento & românticos → florzinha ❦ */ body[data-theme="casamento-marfim"] .invite-divider .dot, body[data-theme="rosa-romantico"] .invite-divider .dot { width: auto; height: auto; background: transparent; border-radius: 0; font-size: 20px; line-height: 1; color: var(--accent); } body[data-theme="casamento-marfim"] .invite-divider .dot::before, body[data-theme="rosa-romantico"] .invite-divider .dot::before { content: '❦'; } /* Formatura & corporativo → losango ◆ */ body[data-theme="formatura-navy"] .invite-divider .dot, body[data-theme="dourado-minimal"] .invite-divider .dot, body[data-theme="preto-elegante"] .invite-divider .dot { width: auto; height: auto; background: transparent; border-radius: 0; font-size: 14px; line-height: 1; color: var(--accent); } body[data-theme="formatura-navy"] .invite-divider .dot::before, body[data-theme="dourado-minimal"] .invite-divider .dot::before, body[data-theme="preto-elegante"] .invite-divider .dot::before { content: '◆'; } /* Baby shower → florzinha ✿ */ body[data-theme="bebe-azul"] .invite-divider .dot, body[data-theme="bebe-rosa"] .invite-divider .dot, body[data-theme="bebe-neutro"] .invite-divider .dot { width: auto; height: auto; background: transparent; border-radius: 0; font-size: 16px; line-height: 1; color: var(--accent); } body[data-theme="bebe-azul"] .invite-divider .dot::before, body[data-theme="bebe-rosa"] .invite-divider .dot::before, body[data-theme="bebe-neutro"] .invite-divider .dot::before { content: '✿'; } /* 15 anos & aniversário → estrela ✦ */ body[data-theme="festa-colorida"] .invite-divider .dot, body[data-theme="quinze-rose"] .invite-divider .dot, body[data-theme="quinze-violeta"] .invite-divider .dot, body[data-theme="aniversario-adulto"] .invite-divider .dot, body[data-theme="azul-aquarela"] .invite-divider .dot, body[data-theme="verde-botanico"] .invite-divider .dot { width: auto; height: auto; background: transparent; border-radius: 0; font-size: 13px; line-height: 1; color: var(--accent); } body[data-theme="festa-colorida"] .invite-divider .dot::before, body[data-theme="quinze-rose"] .invite-divider .dot::before, body[data-theme="quinze-violeta"] .invite-divider .dot::before, body[data-theme="aniversario-adulto"] .invite-divider .dot::before, body[data-theme="azul-aquarela"] .invite-divider .dot::before, body[data-theme="verde-botanico"] .invite-divider .dot::before { content: '✦'; } /* --- Confetes leves no bebê rosa --- */ body[data-theme="bebe-rosa"] .theme-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 25%, #f0b8c8 2px, transparent 3px), radial-gradient(circle at 75% 35%, #dc98ac 2px, transparent 3px), radial-gradient(circle at 45% 65%, #fcd8e4 2px, transparent 3px), radial-gradient(circle at 65% 80%, #c06a82 2px, transparent 3px); opacity: 0.3; } /* --- Confetes leves no bebê azul --- */ body[data-theme="bebe-azul"] .theme-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 22%, #78c8e0 2px, transparent 3px), radial-gradient(circle at 78% 32%, #3a7ab0 2px, transparent 3px), radial-gradient(circle at 42% 68%, #cde4f8 2px, transparent 3px), radial-gradient(circle at 68% 78%, #6aa0d0 2px, transparent 3px); opacity: 0.35; } /* --- Modo escuro: overrides para preto-elegante no admin --- */