/* ===========================
Nupciali — Design System Premium
=========================== */
:root {
--primary: #1A1A1A;
--accent: #C9A87C;
--accent-soft: #E8D5BB;
--rose: #F4D9D0;
--cream: #FAF6EE;
--offwhite: #FBFAF7;
--white: #FFFFFF;
--ink: #0F0F0F;
--ink-2: #2C2C2C;
--gray-1: #6B6B6B;
--gray-2: #9C9C9C;
--gray-3: #D4D4D4;
--gray-4: #E8E8E8;
--gray-5: #F4F4F4;
--success: #16A34A;
--danger: #DC2626;
--warning: #D97706;
--font-heading: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 22px;
--radius-xl: 32px;
--shadow-sm: 0 1px 2px rgba(15,15,15,0.04), 0 1px 3px rgba(15,15,15,0.04);
--shadow: 0 4px 14px rgba(15,15,15,0.06), 0 2px 6px rgba(15,15,15,0.04);
--shadow-lg: 0 24px 48px -12px rgba(15,15,15,0.18), 0 8px 16px rgba(15,15,15,0.06);
--shadow-xl: 0 40px 80px -20px rgba(15,15,15,0.25);
--transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--container: 1200px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: var(--transition); }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
h1,h2,h3,h4,h5 { font-family: var(--font-heading); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: 1.25rem; }
p { color: var(--ink-2); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.container-md { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
/* === Header === */
.header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(15,15,15,0.06); transition: var(--transition); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); display:flex; align-items:center; gap:8px; }
.logo-mark { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--rose)); display:inline-block; flex-shrink: 0; }
.logo .brand-logo-text { line-height: 1.2; }
.brand-logo-img { max-height: 36px; width: auto; display: inline-block; vertical-align: middle; }
.brand-logo-img--sidebar { max-height: 32px; }
.brand-logo-img--footer { max-height: 40px; }
.footer-logo .brand-logo-img--invert { filter: brightness(0) invert(1); }
.nav { display: flex; align-items: center; gap: 32px; }
.nav .nav-links a { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.nav .nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.menu-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; }
.menu-toggle span { display:block; width: 20px; height: 2px; background: var(--ink); position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content:''; position:absolute; left:0; width: 20px; height: 2px; background: var(--ink); }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
/* === Buttons === */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 100px; font-weight: 600; font-size: 14px; transition: var(--transition); white-space: nowrap; }
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-accent { background: linear-gradient(135deg, var(--accent), #B8956A); color: var(--white); }
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(201,168,124,0.35); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--gray-5); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--gray-3); }
.btn-outline:hover { border-color: var(--ink); }
.btn-lg { padding: 16px 32px; font-size: 15px; }
.btn-block { width: 100%; }
/* === Hero === */
.hero { padding: 140px 0 80px; background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(244,217,208,0.4), transparent 70%); pointer-events: none; }
.hero::after { content: ''; position: absolute; bottom: -300px; left: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,124,0.2), transparent 70%); pointer-events: none; }
.hero-inner { position: relative; text-align: center; max-width: 880px; margin: 0 auto; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px; background: rgba(255,255,255,0.6); border: 1px solid var(--gray-4); font-size: 13px; color: var(--ink-2); margin-bottom: 24px; backdrop-filter: blur(8px); }
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1 { margin-bottom: 24px; }
.hero h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.hero p { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--gray-1); max-width: 640px; margin: 0 auto 40px; }
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
.hero-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--gray-4); }
.hero-stat strong { display: block; font-family: var(--font-heading); font-size: 2rem; color: var(--ink); }
.hero-stat span { font-size: 13px; color: var(--gray-1); }
.hero-mockup { margin-top: 64px; max-width: 1000px; margin-left: auto; margin-right: auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); border: 1px solid var(--gray-4); position: relative; }
.hero-mockup-inner { background: linear-gradient(135deg, var(--rose), var(--accent-soft)); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; color: var(--white); font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 0.05em; }
/* === Landing Pages (Ads/SEO) === */
.lp-hero-variant { background: linear-gradient(180deg, var(--offwhite) 0%, var(--white) 100%); }
.lp-hero-variant::before { background: radial-gradient(circle, rgba(201,168,124,0.16), transparent 70%); }
.lp-hero-variant::after { background: radial-gradient(circle, rgba(244,217,208,0.28), transparent 70%); }
.benefit-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.benefit-card { background: rgba(255,255,255,0.9); border: 1px solid var(--gray-4); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); transition: var(--transition); }
.benefit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.benefit-card h3 { font-family: var(--font-body); font-size: 1rem; margin: 12px 0 6px; }
.benefit-card p { font-size: 14px; color: var(--gray-1); }
.how-flow { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 980px; margin: 0 auto; }
.how-step { position: relative; background: var(--white); border: 1px solid var(--gray-4); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.how-step strong { display:inline-flex; align-items:center; justify-content:center; width: 36px; height: 36px; border-radius: 50%; background: rgba(201,168,124,0.14); color: #8B6A3D; font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.how-step h3 { font-family: var(--font-body); font-size: 1rem; margin-bottom: 6px; }
.how-step p { font-size: 14px; color: var(--gray-1); }
.gift-examples { display: grid; grid-template-columns: 1fr; gap: 16px; }
.gift-example-card { background: linear-gradient(180deg, rgba(250,246,238,0.8), rgba(255,255,255,0.9)); border: 1px solid rgba(15,15,15,0.08); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.gift-example-card .gift-price { display:flex; align-items: baseline; gap: 8px; margin: 10px 0 6px; }
.gift-example-card .gift-price strong { font-family: var(--font-heading); font-size: 2.25rem; }
.gift-example-card .gift-price span { font-size: 12px; color: var(--gray-1); }
.gift-example-card p { font-size: 14px; color: var(--gray-1); }
.compare-table { background: var(--white); border: 1px solid var(--gray-4); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); max-width: 980px; margin: 0 auto; }
.compare-row { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; padding: 16px 18px; align-items: center; border-top: 1px solid var(--gray-4); }
.compare-row:first-child { border-top: 0; }
.compare-head { background: var(--offwhite); font-size: 12px; color: var(--gray-1); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.compare-row .cell-title { font-weight: 700; color: var(--ink); }
.compare-row .cell { font-size: 14px; color: var(--ink-2); }
.compare-row .yes { color: #0F5132; font-weight: 700; }
.compare-row .no { color: #7A2E2E; font-weight: 700; }
.invite-mockup { border-radius: var(--radius-xl); border: 1px solid var(--gray-4); overflow: hidden; box-shadow: var(--shadow-xl); background: var(--white); }
.invite-mockup-top { padding: 16px 18px; border-bottom: 1px solid var(--gray-4); background: rgba(251,250,247,0.9); display:flex; align-items:center; justify-content: space-between; gap: 12px; }
.invite-mockup-top small { color: var(--gray-1); }
.invite-mockup-body { padding: 26px 22px; display:grid; gap: 16px; }
.invite-pill { display:inline-flex; align-items:center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--gray-4); background: var(--offwhite); font-size: 13px; color: var(--ink-2); width: fit-content; }
.invite-mockup-body h3 { margin-top: 8px; }
.lp-cta-sticky-mobile { position: fixed; inset: auto 0 0 0; z-index: 120; padding: 10px 14px; background: rgba(255,255,255,0.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid rgba(15,15,15,0.08); display: none; }
.lp-cta-sticky-mobile-inner { max-width: var(--container); margin: 0 auto; display:flex; gap: 10px; align-items: center; }
.lp-cta-sticky-mobile .btn { flex: 1; }
.lp-cta-sticky-mobile .btn-outline { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }
/* === Section === */
.section { padding: 100px 0; }
.section-sm { padding: 60px 0; }
.section-tag { display: inline-block; padding: 6px 14px; background: var(--cream); border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.section-title { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.section-title h2 { margin-bottom: 16px; }
.section-title p { color: var(--gray-1); font-size: 1.125rem; }
/* === Cards / Grid === */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.feature-card { background: var(--white); border: 1px solid var(--gray-4); border-radius: var(--radius-lg); padding: 32px; transition: var(--transition); position: relative; overflow: hidden; }
.feature-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature-icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--cream), var(--accent-soft)); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; }
.feature-card h3 { font-size: 1.25rem; font-family: var(--font-body); font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.feature-card p { font-size: 0.9375rem; color: var(--gray-1); }
/* === Steps === */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: step; }
.step { padding: 32px; background: var(--offwhite); border-radius: var(--radius-lg); position: relative; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: -20px; left: 32px; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 18px; font-weight: 700; }
.step h3 { margin-top: 16px; margin-bottom: 8px; font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; }
/* === Templates Grid === */
.template-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--white); border: 1px solid var(--gray-4); transition: var(--transition); position: relative; }
.template-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.template-cover { aspect-ratio: 4/5; background: linear-gradient(135deg, var(--cream), var(--rose)); display:flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 2rem; color: var(--white); position: relative; }
.template-card[data-style="dourado"] .template-cover { background: linear-gradient(135deg, #1a1a1a, #d4af37); }
.template-card[data-style="botanic"] .template-cover { background: linear-gradient(135deg, #7A8B6A, #C5D5B4); }
.template-card[data-style="minimal"] .template-cover { background: linear-gradient(135deg, #f4f4f4, #1a1a1a); }
.template-card[data-style="aurora"] .template-cover { background: linear-gradient(135deg, #B07BAC, #FFF4F1); }
.template-card[data-style="praia"] .template-cover { background: linear-gradient(135deg, #3A8CA8, #FAF6EE); }
.template-card[data-style="rustico"] .template-cover { background: linear-gradient(135deg, #8B5A3C, #F4ECE0); }
.template-card[data-style="moderno"] .template-cover { background: linear-gradient(135deg, #FF6B6B, #FFFFFF); color: #1a1a1a; }
.template-card[data-style="vintage"] .template-cover { background: linear-gradient(135deg, #A87C5A, #F0E8D8); }
.template-card[data-style="imperial"] .template-cover { background: linear-gradient(135deg, #2C1810, #E8DCC4); }
.template-info { padding: 20px; display:flex; align-items: center; justify-content: space-between; }
.template-info h4 { font-family: var(--font-heading); }
.template-badge { font-size: 11px; padding: 4px 10px; border-radius: 100px; background: var(--ink); color: var(--white); }
/* === Pricing === */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
.price-card { background: var(--white); border: 1px solid var(--gray-4); border-radius: var(--radius-lg); padding: 40px 32px; transition: var(--transition); position: relative; }
.price-card.featured { background: var(--ink); color: var(--white); border-color: var(--ink); transform: scale(1.04); }
.price-card.featured h3, .price-card.featured .price strong { color: var(--white); }
.price-card.featured p, .price-card.featured li { color: rgba(255,255,255,0.75); }
.price-card-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--white); padding: 4px 14px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.price-card h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; margin-bottom: 8px; }
.price-card .price { margin: 16px 0 24px; }
.price-card .price strong { font-family: var(--font-heading); font-size: 3rem; font-weight: 700; }
.price-card .price span { color: var(--gray-1); font-size: 14px; }
.price-card ul { list-style: none; margin-bottom: 24px; }
.price-card li { padding: 8px 0; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.price-card li::before { content: '✓'; color: var(--accent); font-weight: 700; }
/* === FAQ === */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gray-4); padding: 24px 0; cursor: pointer; }
.faq-q { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 500; }
.faq-q::after { content: '+'; font-size: 1.5rem; transition: var(--transition); }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 300ms ease, padding 300ms ease; color: var(--gray-1); }
.faq-item.open .faq-a { max-height: 500px; padding-top: 16px; }
/* === Testimonials === */
.testimonial-card { background: var(--offwhite); border-radius: var(--radius-lg); padding: 32px; }
.testimonial-card p { font-size: 1.125rem; line-height: 1.6; color: var(--ink); margin-bottom: 24px; font-style: italic; }
.testimonial-author { display:flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--rose)); }
.testimonial-author strong { display: block; font-size: 14px; }
.testimonial-author span { font-size: 12px; color: var(--gray-1); }
/* === Footer === */
.footer { background: var(--ink); color: rgba(255,255,255,0.75); padding: 80px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer h5 { color: var(--white); font-family: var(--font-body); font-size: 14px; font-weight: 600; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.1em; }
.footer ul { list-style: none; }
.footer li { padding: 6px 0; font-size: 14px; }
.footer a:hover { color: var(--white); }
.footer-bottom { padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); display:flex; justify-content: space-between; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.5); }
.footer-logo { color: var(--white); font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 16px; }
/* === Forms === */
.form-card { background: var(--white); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-4); max-width: 480px; margin: 0 auto; }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--ink-2); }
.form-input, .form-select, .form-textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--gray-4); border-radius: var(--radius-sm); font-family: inherit; font-size: 15px; transition: var(--transition); background: var(--white); color: var(--ink); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(15,15,15,0.06); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-help { font-size: 12px; color: var(--gray-1); margin-top: 6px; }
.form-error { color: var(--danger); font-size: 13px; margin-top: 6px; }
.form-divider { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: var(--gray-2); font-size: 12px; }
.form-divider::before, .form-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-4); }
/* === Auth pages === */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { background: linear-gradient(135deg, var(--cream), var(--rose)); display:flex; flex-direction: column; justify-content: center; padding: 64px; position: relative; overflow: hidden; }
.auth-side::after { content: ''; position: absolute; bottom: -200px; right: -200px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.5), transparent 70%); }
.auth-side h2 { font-size: 3rem; margin-bottom: 16px; }
.auth-side p { font-size: 1.125rem; color: var(--ink-2); }
.auth-form { display: flex; flex-direction: column; justify-content: center; padding: 64px 32px; }
.auth-form-inner { max-width: 380px; margin: 0 auto; width: 100%; }
.auth-form h1 { font-size: 2.25rem; margin-bottom: 8px; }
.auth-form .subtitle { color: var(--gray-1); margin-bottom: 32px; }
/* === Flash messages === */
.flash { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; }
.flash-success { background: #DCFCE7; color: #166534; }
.flash-error { background: #FEE2E2; color: #991B1B; }
.flash-info { background: #DBEAFE; color: #1E40AF; }
/* === Dashboard layout === */
.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; background: var(--offwhite); }
.sidebar { background: var(--white); border-right: 1px solid var(--gray-4); padding: 24px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-logo { padding: 8px 12px; margin-bottom: 32px; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; }
.sidebar-section { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-2); padding: 16px 12px 8px; font-weight: 600; }
.sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-size: 14px; font-weight: 500; transition: var(--transition); margin-bottom: 2px; }
.sidebar-link:hover { background: var(--gray-5); }
.sidebar-link.active { background: var(--ink); color: var(--white); }
.sidebar-link .icon { width: 18px; opacity: 0.7; }
.sidebar-link.active .icon { opacity: 1; }
.app-main { padding: 32px 40px; max-width: 1280px; min-width: 0; }
.app-toolbar { display: none; align-items: center; gap: 14px; }
.app-toolbar-title { font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; color: var(--ink); }
.sidebar-backdrop { display: none; }
.app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.app-header h1 { font-family: var(--font-body); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.app-header .subtitle { color: var(--gray-1); font-size: 14px; margin-top: 4px; }
/* === Stat cards === */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.stat-card { background: var(--white); border: 1px solid var(--gray-4); border-radius: var(--radius); padding: 20px; transition: var(--transition); }
.stat-card:hover { box-shadow: var(--shadow); }
.stat-label { font-size: 12px; color: var(--gray-1); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.stat-value { font-family: var(--font-heading); font-size: 2rem; font-weight: 600; margin-top: 8px; color: var(--ink); }
.stat-meta { font-size: 12px; color: var(--gray-1); margin-top: 4px; }
.stat-meta.up { color: var(--success); }
/* === Card === */
.card { background: var(--white); border: 1px solid var(--gray-4); border-radius: var(--radius); padding: 24px; }
.card-header { display:flex; justify-content: space-between; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--gray-4); }
.card-header h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; }
/* === Tables === */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 12px 16px; font-size: 12px; text-transform: uppercase; color: var(--gray-1); font-weight: 600; letter-spacing: 0.05em; border-bottom: 1px solid var(--gray-4); }
.table td { padding: 16px; font-size: 14px; border-bottom: 1px solid var(--gray-5); }
.table tr:hover td { background: var(--offwhite); }
.badge { display: inline-block; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-success { background: #DCFCE7; color: #166534; }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-danger { background: #FEE2E2; color: #991B1B; }
.badge-info { background: #DBEAFE; color: #1E40AF; }
.badge-neutral { background: var(--gray-4); color: var(--ink-2); }
/* === Wedding site === */
.wsite { font-family: var(--font-body); }
.wsite-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 24px; background: linear-gradient(180deg, var(--cream), var(--white)); position: relative; }
.wsite-hero h1 { font-family: var(--font-heading); font-size: clamp(3rem, 8vw, 6rem); font-style: italic; }
.wsite-hero h1 em { font-style: normal; }
.wsite-hero .amp { font-size: 0.7em; color: var(--accent); }
.wsite-date { margin-top: 24px; letter-spacing: 0.3em; text-transform: uppercase; font-size: 14px; color: var(--gray-1); }
.wsite-countdown { display: flex; gap: 24px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.wsite-countdown div { text-align: center; min-width: 80px; }
.wsite-countdown strong { display:block; font-family: var(--font-heading); font-size: 2.5rem; }
.wsite-countdown span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gray-1); }
.wsite-nav { display: flex; gap: 24px; justify-content: center; padding: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--gray-4); position: sticky; top: 0; background: rgba(255,255,255,0.9); backdrop-filter: blur(20px); z-index: 50; }
.wsite-nav a { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.wsite-nav a:hover { color: var(--accent); }
.wsite-section { padding: 100px 24px; max-width: 1000px; margin: 0 auto; text-align: center; }
.wsite-section h2 { font-style: italic; margin-bottom: 32px; }
/* === Gift card === */
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.gift-card { background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray-4); transition: var(--transition); }
.gift-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.gift-cover { aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.gift-info { padding: 16px; }
.gift-info h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.gift-price { font-family: var(--font-heading); font-size: 1.25rem; color: var(--accent); }
/* Quando há apenas 1 presente, evita que o card estique ocupando toda a largura */
.gift-grid:has(> .gift-card:only-child),
.gift-grid:has(> a.gift-card:only-child) {
grid-template-columns: minmax(240px, 320px);
justify-content: center;
}
/* === Legal docs === */
.legal-doc { font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 720px; }
.legal-doc h2 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 32px 0 12px; letter-spacing: -0.02em; }
.legal-doc p { margin-bottom: 14px; }
.legal-doc ul { margin: 0 0 14px 1.25rem; padding: 0; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc a { color: var(--accent); font-weight: 500; }
.legal-doc a:hover { text-decoration: underline; }
/* === Utilities === */
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.flex { display: flex; }
.gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.w-full { width: 100%; }
.fade-in { animation: fadeIn 0.6s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
/* === Responsive === */
@media (max-width: 968px) {
.nav-links { display: none; }
.nav-cta { display: none; }
.menu-toggle { display: inline-flex; }
.nav.open { position: absolute; top: 72px; left: 0; right: 0; background: var(--white); padding: 24px; border-bottom: 1px solid var(--gray-4); box-shadow: var(--shadow); flex-direction: column; align-items: stretch; gap: 16px; }
.nav.open .nav-links { display: flex; flex-direction: column; gap: 14px; }
.nav.open .nav-cta { display: flex; flex-direction: column; gap: 10px; }
.nav.open .nav-cta .btn { width: 100%; justify-content: center; }
.nav.open .menu-toggle { position: absolute; top: -60px; right: 16px; }
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
.pricing { grid-template-columns: 1fr; }
.price-card.featured { transform: none; }
.steps { grid-template-columns: 1fr; gap: 48px; }
.auth-page { grid-template-columns: 1fr; }
.auth-side { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.app { grid-template-columns: 1fr; }
.app-toolbar {
display: flex;
margin: -32px -40px 24px -40px;
padding: 12px 20px 12px 16px;
background: var(--white);
border-bottom: 1px solid var(--gray-4);
position: sticky;
top: 0;
z-index: 60;
}
.sidebar-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(15, 15, 15, 0.38);
z-index: 70;
opacity: 0;
visibility: hidden;
transition: opacity 250ms ease, visibility 250ms ease;
pointer-events: none;
}
.sidebar-backdrop.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.sidebar { position: fixed; left: -260px; top: 0; width: 260px; max-width: min(260px, 92vw); z-index: 80; transition: left 250ms ease; box-shadow: var(--shadow-lg); }
.sidebar.open { left: 0; }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.compare-row { grid-template-columns: 1fr; gap: 6px; }
.compare-row .cell-title { margin-bottom: 4px; }
}
@media (max-width: 600px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.form-card { padding: 32px 24px; }
.auth-form { padding: 40px 24px; }
.stat-grid { grid-template-columns: 1fr; }
.app-main { padding: 24px 20px; }
.app-toolbar { margin: -24px -20px 20px -20px; padding-left: 16px; padding-right: 20px; }
.benefit-grid, .gift-examples, .how-flow { grid-template-columns: 1fr; }
.lp-cta-sticky-mobile { display: block; }
}
/* ===========================
Refresh — Photo-driven UI
=========================== */
/* Lucide icon defaults */
[data-lucide] { width: 20px; height: 20px; stroke-width: 1.75; }
.ico-inline { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; stroke-width: 1.9; }
.ico-check { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.price-card li::before { content: none !important; }
/* Hero photo layout */
.hero-photo { padding: 130px 0 60px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; text-align: left; }
.hero-grid .hero-eyebrow { margin-bottom: 20px; }
.hero-grid h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.05; margin-bottom: 20px; }
.hero-grid h1 em { font-style: italic; color: var(--accent); font-weight: 500; font-family: 'Cormorant Garamond', Georgia, serif; }
.hero-grid p { font-size: 1.0625rem; color: var(--gray-1); max-width: 520px; margin: 0 0 32px; }
.hero-grid .hero-ctas { justify-content: flex-start; margin-bottom: 40px; }
.hero-trust { display: flex; align-items: center; gap: 16px; }
.hero-avatars { display: flex; }
.hero-avatars span { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; border: 3px solid var(--white); margin-left: -10px; box-shadow: var(--shadow-sm); }
.hero-avatars span:first-child { margin-left: 0; }
.hero-stars { display: flex; align-items: center; gap: 2px; color: #E8B547; }
.hero-stars [data-lucide] { width: 16px; height: 16px; fill: #E8B547; }
.hero-stars strong { margin-left: 8px; color: var(--ink); font-family: var(--font-body); font-size: 14px; }
.hero-trust small { display: block; color: var(--gray-1); font-size: 12px; }
.hero-mosaic { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1/1.05; }
.mosaic-tile { background-size: cover; background-position: center; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: transform 600ms cubic-bezier(.2,.8,.2,1); background-color: var(--cream); }
.mosaic-tile:hover { transform: translateY(-4px) scale(1.01); }
.mosaic-1 { grid-row: 1 / span 2; border-radius: var(--radius-xl); }
.mosaic-2 { }
.mosaic-3 { }
.mosaic-4 { display: none; }
.mosaic-badge { position: absolute; bottom: 24px; left: -18px; background: var(--white); padding: 12px 18px; border-radius: 100px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; z-index: 3; }
.mosaic-badge [data-lucide] { color: var(--accent); fill: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
.mosaic-badge strong { font-family: var(--font-heading); font-size: 14px; display: block; line-height: 1.2; color: var(--ink); }
.mosaic-badge span { font-size: 10px; color: var(--gray-1); letter-spacing: 0.14em; text-transform: uppercase; display: block; line-height: 1.2; margin-top: 2px; }
.hero-photo .hero-stats { margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--gray-4); display: flex; justify-content: space-between; gap: 24px; }
.hero-photo .hero-stat strong { display: flex; align-items: center; gap: 6px; }
.hero-photo .hero-stat strong [data-lucide] { color: #E8B547; fill: #E8B547; width: 22px; height: 22px; }
/* Logo strip */
.logo-strip { padding: 40px 0; border-bottom: 1px solid var(--gray-4); }
.logo-strip p { text-align: center; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gray-2); margin-bottom: 20px; }
.logo-strip .logos { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 32px; }
.logo-strip .logos span { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; letter-spacing: 0.2em; color: var(--gray-2); opacity: .65; transition: var(--transition); }
.logo-strip .logos span:hover { opacity: 1; color: var(--ink-2); }
/* Inspiration gallery (masonry-like) */
.section-tight { padding: 80px 0; }
.inspiration-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 16px; }
.inspo { position: relative; border-radius: var(--radius-lg); overflow: hidden; background-size: cover; background-position: center; display: block; transition: var(--transition); cursor: pointer; box-shadow: var(--shadow); }
.inspo:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.inspo-tall { grid-row: span 2; }
.inspo-wide { grid-column: span 2; }
.inspo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,15,15,0.7) 100%); }
.inspo-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; color: var(--white); z-index: 1; }
.inspo-overlay span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.inspo-overlay span [data-lucide] { width: 12px; height: 12px; }
.inspo-overlay h4 { font-family: var(--font-heading); color: var(--white); font-style: italic; font-size: 1.5rem; }
.inspo-overlay small { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,0.85); opacity: 0; transform: translateY(8px); transition: var(--transition); }
.inspo:hover .inspo-overlay small { opacity: 1; transform: translateY(0); }
/* Feature icon (Lucide) */
.feature-icon [data-lucide] { width: 24px; height: 24px; color: var(--ink); stroke-width: 1.75; }
.feature-card:hover .feature-icon [data-lucide] { color: var(--accent); }
/* Steps with icon */
.section-how { background: linear-gradient(180deg, var(--white), var(--cream)); }
.step { padding-top: 56px; }
.step-icon { position: absolute; top: -20px; right: 24px; width: 48px; height: 48px; border-radius: 14px; background: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.step-icon [data-lucide] { color: var(--accent); width: 22px; height: 22px; }
/* Template cover with photo overlay + themed preview mock */
a.template-card { display: block; color: inherit; }
.template-cover { background-size: cover !important; background-position: center !important; position: relative; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--white); overflow: hidden; }
.template-cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,15,0.15) 0%, rgba(15,15,15,0.55) 100%); transition: var(--transition); }
.template-card:hover .template-cover::before { background: linear-gradient(180deg, rgba(15,15,15,0.35) 0%, rgba(15,15,15,0.7) 100%); }
.tpl-mock { position: relative; z-index: 1; text-align: center; padding: 28px 22px; border: 1px solid rgba(255,255,255,0.55); border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0)); backdrop-filter: blur(2px); transition: var(--transition); transform: translateY(0); }
.tpl-mock-eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; opacity: 0.85; margin-bottom: 14px; color: var(--tpl-secondary, #fff); }
.tpl-mock-title { font-family: var(--tpl-heading, var(--font-heading)); font-size: 1.6rem; line-height: 1.05; font-weight: 500; color: #fff; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tpl-mock-title em { font-style: italic; }
.tpl-mock-title span { font-size: 0.65em; color: var(--tpl-primary, var(--accent)); opacity: 0.95; font-style: italic; }
.tpl-mock-date { display: block; font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.3em; margin-top: 12px; opacity: 0.85; }
.template-card:hover .tpl-mock { transform: translateY(-4px) scale(1.02); border-color: rgba(255,255,255,0.85); }
.template-cover-cta { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(8px); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(255,255,255,0.97); color: var(--ink); border-radius: 100px; font-size: 12px; font-weight: 600; opacity: 0; transition: var(--transition); z-index: 2; }
.template-cover-cta [data-lucide] { width: 14px; height: 14px; }
.template-card:hover .template-cover-cta { opacity: 1; transform: translateX(-50%) translateY(0); }
.template-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, var(--accent), #B8956A); }
/* Per-style template tints */
.template-card[data-style="dourado"] .template-cover::before { background: linear-gradient(180deg, rgba(15,15,15,0.4) 0%, rgba(15,15,15,0.8) 100%); }
.template-card[data-style="dourado"] .tpl-mock-title span { color: #D4AF37; }
.template-card[data-style="botanic"] .template-cover::before { background: linear-gradient(180deg, rgba(36,52,40,0.2) 0%, rgba(36,52,40,0.6) 100%); }
.template-card[data-style="minimal"] .template-cover::before { background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(15,15,15,0.55) 100%); }
.template-card[data-style="praia"] .template-cover::before { background: linear-gradient(180deg, rgba(58,140,168,0.2) 0%, rgba(15,30,45,0.55) 100%); }
.template-card[data-style="rustico"] .template-cover::before { background: linear-gradient(180deg, rgba(60,40,30,0.2) 0%, rgba(60,40,30,0.65) 100%); }
.template-card[data-style="moderno"] .template-cover::before { background: linear-gradient(180deg, rgba(255,107,107,0.15) 0%, rgba(15,15,15,0.55) 100%); }
.template-card[data-style="imperial"] .template-cover::before { background: linear-gradient(180deg, rgba(44,24,16,0.3) 0%, rgba(15,5,0,0.8) 100%); }
.template-card[data-style="aurora"] .template-cover::before { background: linear-gradient(180deg, rgba(176,123,172,0.15) 0%, rgba(60,30,55,0.6) 100%); }
/* Testimonials with star + photo avatar */
.testimonial-stars { display: flex; gap: 2px; margin-bottom: 12px; color: #E8B547; }
.testimonial-stars [data-lucide] { width: 16px; height: 16px; fill: #E8B547; }
.testimonial-card { background: var(--white); border: 1px solid var(--gray-4); }
.testimonial-card:hover { box-shadow: var(--shadow-lg); }
.testimonial-avatar { background-size: cover; background-position: center; }
/* Blog post cards with photo */
.post-card { display: block; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-4); transition: var(--transition); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-cover { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.post-body { padding: 24px; }
.post-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.post-card h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; margin-bottom: 8px; }
.post-card p { font-size: 0.9375rem; color: var(--gray-1); margin-bottom: 14px; }
.post-link { font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.post-card:hover .post-link { color: var(--accent); }
/* CTA Final with photo */
.cta-final { position: relative; padding: 120px 0; color: var(--white); text-align: center; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.42) saturate(.9); transform: scale(1.05); }
.cta-final-inner { position: relative; z-index: 1; }
.cta-final h2 { color: var(--white); font-style: italic; }
.cta-final p { color: rgba(255,255,255,0.85); font-size: 1.125rem; margin: 16px 0 32px; }
.cta-final .hero-eyebrow { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: var(--white); }
.cta-final .hero-eyebrow [data-lucide] { color: var(--rose); }
/* ===========================
CRO Enhancements — Novos componentes de conversão
=========================== */
/* Microcopy de fricção zero no hero */
.hero-microcopy {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px !important;
color: var(--gray-1) !important;
margin: -24px 0 28px !important;
max-width: none !important;
}
.hero-microcopy [data-lucide] { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
.hero-grid .hero-microcopy { justify-content: flex-start; }
/* Step detail text */
.step-detail {
display: inline-block;
margin-top: 12px;
font-size: 12px;
color: var(--accent);
font-weight: 600;
letter-spacing: 0.04em;
}
/* Feature card destaque */
.feature-card--highlight {
border-color: var(--accent-soft);
background: linear-gradient(180deg, rgba(250,246,238,0.6), var(--white));
}
.feature-card--highlight .feature-icon {
background: linear-gradient(135deg, var(--accent-soft), var(--cream));
}
/* Feature card link */
.feature-link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 12px;
font-size: 13px;
font-weight: 600;
color: var(--accent);
transition: var(--transition);
}
.feature-link:hover { gap: 8px; }
.feature-link [data-lucide] { width: 13px; height: 13px; }
/* Inline CTA — bloco de conversão no meio dos recursos */
.inline-cta {
margin-top: 56px;
padding: 32px 40px;
background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
box-shadow: var(--shadow-lg);
}
.inline-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
width: 100%;
}
.inline-cta strong {
display: block;
font-family: var(--font-heading);
font-size: 1.375rem;
color: var(--white);
margin-bottom: 4px;
font-style: italic;
}
.inline-cta span {
font-size: 14px;
color: rgba(255,255,255,0.75);
}
/* Trust bar — prova social inline */
.trust-bar {
display: flex;
justify-content: center;
gap: 48px;
flex-wrap: wrap;
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid var(--gray-4);
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--ink-2);
font-weight: 500;
}
.trust-item [data-lucide] {
width: 18px;
height: 18px;
color: var(--accent);
flex-shrink: 0;
}
/* Microcopy de planos */
.plan-microcopy {
text-align: center;
font-size: 12px;
color: var(--gray-1);
margin-top: 10px;
}
/* Microcopy CTA final */
.cta-microcopy {
margin-top: 20px !important;
font-size: 13px !important;
color: rgba(255,255,255,0.7) !important;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.cta-microcopy [data-lucide] { width: 13px; height: 13px; color: rgba(255,255,255,0.5); }
/* SEO prose section */
.container-readable { max-width: 800px; }
.seo-content { background: var(--offwhite); }
.prose { line-height: 1.8; }
.prose h2, .prose h3 { margin-bottom: 16px; }
.prose h2 { margin-top: 0; }
.prose h3 { margin-top: 40px; }
.prose p { margin-bottom: 20px; color: var(--ink-2); }
.prose strong { color: var(--ink); }
/* Responsive — novos componentes */
@media (max-width: 968px) {
.inline-cta-inner { flex-direction: column; align-items: flex-start; }
.inline-cta-inner .btn { width: 100%; justify-content: center; }
.trust-bar { gap: 24px; }
}
@media (max-width: 600px) {
.hero-microcopy { justify-content: center; }
.inline-cta { padding: 24px 20px; }
.trust-bar { flex-direction: column; align-items: center; gap: 16px; }
.trust-item { justify-content: center; }
}
/* Footer ❤ replacement */
.footer-made { display: inline-flex; align-items: center; gap: 6px; }
.footer-made [data-lucide] { color: #E8576A; fill: #E8576A; }
/* === Wedding site refresh === */
.wsite-hero-photo { min-height: 100vh; padding: 0; position: relative; color: var(--white); justify-content: center; overflow: hidden; }
.wsite-hero-photo::before { content: ''; position: absolute; inset: 0; background-image: var(--hero-img); background-size: cover; background-position: center; transform: scale(1.06); }
.wsite-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,15,0.25) 0%, rgba(15,15,15,0.55) 100%); }
.wsite-hero-content { position: relative; z-index: 2; text-align: center; padding: 48px 24px; max-width: 900px; }
.wsite-hero-photo h1 { color: var(--white); font-family: var(--font-heading); font-size: clamp(3rem, 9vw, 6.5rem); line-height: 1; margin: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wsite-hero-photo h1 em { font-style: italic; }
.wsite-hero-photo h1 .amp { font-size: 0.55em; color: var(--accent); font-style: italic; opacity: .9; }
.wsite-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(10px); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; }
.wsite-eyebrow [data-lucide] { width: 14px; height: 14px; color: var(--rose); fill: var(--rose); }
.wsite-hero-photo .wsite-date { color: rgba(255,255,255,0.92); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wsite-hero-photo .wsite-countdown { margin-top: 32px; }
.wsite-hero-photo .wsite-countdown div { background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); padding: 16px 8px; border-radius: var(--radius); min-width: 90px; }
.wsite-hero-photo .wsite-countdown strong { color: var(--white); font-size: 2.25rem; }
.wsite-hero-photo .wsite-countdown span { color: rgba(255,255,255,0.75); }
.wsite-hero-photo .btn-primary { background: var(--white); color: var(--ink); }
.wsite-hero-photo .btn-primary:hover { background: var(--accent); color: var(--white); }
.wsite-hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.8); animation: bounce 2s infinite; }
@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }
.wsite-story { max-width: 1100px; }
.wsite-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; text-align: left; }
.wsite-story-img { aspect-ratio: 4/5; background-size: cover; background-position: center; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.wsite-story-text h2 { text-align: left; font-style: italic; }
.wsite-story-text p { font-size: 1.0625rem; line-height: 1.85; color: var(--ink-2); }
.wsite-story-mark { margin-top: 24px; color: var(--accent); }
.wsite-story-mark [data-lucide] { width: 28px; height: 28px; fill: var(--accent); }
.wsite-locations-grid { max-width: 900px; margin: 0 auto; }
.loc-card { background: var(--white); border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--gray-4); }
.loc-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.loc-icon [data-lucide] { width: 28px; height: 28px; color: var(--accent); }
.loc-card h3 { font-family: var(--font-heading); font-style: italic; }
.loc-card p { font-size: 1.0625rem; margin-top: 8px; }
.loc-card small { display: inline-flex; align-items: center; gap: 4px; color: var(--gray-1); margin-top: 8px; }
.wsite-lead { color: var(--gray-1); font-size: 1.0625rem; margin-bottom: 8px; }
/* Gift cards refresh */
.gift-cover { background-size: cover; background-position: center; color: var(--accent); position: relative; }
.gift-cover [data-lucide] { width: 48px; height: 48px; }
.gift-tag { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.95); color: var(--ink); padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.gift-tag [data-lucide] { width: 11px; height: 11px; color: var(--accent); }
.gift-info { text-align: left; }
.gift-info small { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; }
.gift-detail { max-width: 720px; margin: 0 auto; }
.gift-detail-cover { aspect-ratio: 16/10; background-color: #fff; background-size: contain; background-position: center; background-repeat: no-repeat; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: -32px; box-shadow: var(--shadow-lg); position: relative; z-index: 1; }
.gift-detail-cover [data-lucide] { width: 80px; height: 80px; }
.gift-detail .form-card { padding-top: 56px; max-width: 640px; }
.gift-detail-price { text-align: center; font-family: var(--font-heading); font-size: 2.75rem; color: var(--accent); margin: 8px 0 24px; font-style: italic; }
/* Album */
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; grid-auto-rows: 240px; }
.album-tile { position: relative; background-size: cover; background-position: center; border-radius: var(--radius); overflow: hidden; transition: var(--transition); }
.album-tile:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); }
.album-tile:nth-child(7n+1) { grid-row: span 2; }
.album-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,15,15,0.4); opacity: 0; transition: var(--transition); color: var(--white); }
.album-tile:hover .album-zoom { opacity: 1; }
.empty-state { text-align: center; padding: 64px 24px; color: var(--gray-1); }
.empty-state [data-lucide] { width: 48px; height: 48px; margin-bottom: 12px; color: var(--gray-2); }
/* Message cards */
.wsite-msg-grid { max-width: 900px; margin-left: auto; margin-right: auto; }
.msg-card { position: relative; background: var(--white); border-radius: var(--radius-lg); padding: 32px; text-align: left; border: 1px solid var(--gray-4); transition: var(--transition); }
.msg-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.msg-quote { color: var(--accent); opacity: .35; width: 32px; height: 32px; margin-bottom: 8px; }
.msg-card p { font-family: var(--font-heading); font-style: italic; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 12px; }
.msg-card strong { font-size: 14px; color: var(--ink); }
.msg-card small { display: block; margin-top: 4px; color: var(--gray-1); font-size: 12px; }
/* Form labels with icons */
.form-label [data-lucide] { color: var(--accent); }
/* Wedding nav refresh */
.wsite-nav { gap: 32px; padding: 18px 24px; }
/* ===========================
DIGITAL INVITE — 10 themes
=========================== */
.inv { --inv-w: 540px; width: var(--inv-w); max-width: 100%; aspect-ratio: 4/5.6; position: relative; box-shadow: 0 30px 80px -20px rgba(15,15,15,0.35), 0 12px 30px rgba(15,15,15,0.12); border-radius: 4px; overflow: hidden; font-family: 'Inter', sans-serif; color: #2C2C2C; container-type: inline-size; container-name: invite; }
.inv-mini { --inv-w: 100%; box-shadow: 0 8px 24px rgba(15,15,15,0.12); pointer-events: none; }
.inv-frame { position: absolute; inset: 0; padding: 56px 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.inv-mini .inv-frame { padding: 22px 18px; }
.inv-body { position: relative; z-index: 2; width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.inv-eyebrow { display: inline-block; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; opacity: 0.85; margin-bottom: 24px; }
.inv-mini .inv-eyebrow { font-size: 7px; letter-spacing: 0.25em; margin-bottom: 10px; }
.inv-names { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(1.65rem, 4.4vw, 3.4rem); line-height: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 28px; }
.inv-mini .inv-names { font-size: 1.05rem; gap: 2px; margin-bottom: 12px; }
.inv-names em { font-style: italic; }
.inv-amp { font-size: 0.55em; font-style: italic; opacity: 0.75; }
.inv-date { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 24px; }
.inv-mini .inv-date { gap: 2px; margin-bottom: 12px; }
.inv-weekday { font-size: 11px; letter-spacing: 0.35em; opacity: 0.75; }
.inv-mini .inv-weekday { font-size: 7px; letter-spacing: 0.2em; }
.inv-date-grid { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.inv-mini .inv-date-grid { gap: 6px; padding: 4px 0; }
.inv-day { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.85rem, 5vw, 3.4rem); line-height: 1; font-weight: 500; }
.inv-mini .inv-day { font-size: 1.4rem; }
.inv-month-year { display: flex; flex-direction: column; align-items: flex-start; font-size: 11px; letter-spacing: 0.25em; line-height: 1.4; }
.inv-mini .inv-month-year { font-size: 7px; letter-spacing: 0.15em; }
.inv-time { font-size: 11px; letter-spacing: 0.3em; opacity: 0.85; display: inline-flex; align-items: center; gap: 4px; }
.inv-mini .inv-time { font-size: 7px; letter-spacing: 0.18em; }
.inv-mini .inv-time .ico-inline { width: 9px; height: 9px; }
.inv-locations { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 22px; }
.inv-mini .inv-locations { gap: 5px; margin-bottom: 8px; }
.inv-loc { display: flex; flex-direction: column; gap: 2px; }
.inv-loc-tag { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.7; }
.inv-mini .inv-loc-tag { font-size: 6px; letter-spacing: 0.18em; }
.inv-loc strong { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500; font-size: 1rem; }
.inv-mini .inv-loc strong { font-size: 8px; }
.inv-loc small { font-size: 11px; opacity: 0.75; }
.inv-mini .inv-loc small { font-size: 6px; }
.inv-message { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.0625rem; line-height: 1.5; opacity: 0.85; margin-bottom: 24px; max-width: 360px; margin-left: auto; margin-right: auto; }
.inv-mini .inv-message { font-size: 7px; margin-bottom: 8px; max-width: none; }
.inv-foot { display: flex; flex-direction: column; gap: 4px; align-items: center; padding-top: 12px; border-top: 1px solid currentColor; }
.inv-mini .inv-foot { gap: 1px; padding-top: 4px; }
.inv-monogram { font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; letter-spacing: 0.25em; opacity: 0.85; }
.inv-mini .inv-monogram { font-size: 7px; letter-spacing: 0.15em; }
.inv-url { font-size: 10px; letter-spacing: 0.2em; opacity: 0.65; }
.inv-mini .inv-url { font-size: 5px; }
.inv-deco { position: absolute; width: 140px; height: 140px; opacity: 0.65; z-index: 1; }
.inv-mini .inv-deco { width: 56px; height: 56px; }
.inv-deco-tl { top: 18px; left: 18px; }
.inv-deco-br { bottom: 18px; right: 18px; }
.inv-mini .inv-deco-tl { top: 6px; left: 6px; }
.inv-mini .inv-deco-br { bottom: 6px; right: 6px; }
.inv-crest { width: 80px; height: 60px; margin: 0 auto 22px; display: block; opacity: 0.9; }
.inv-mini .inv-crest { width: 32px; height: 24px; margin-bottom: 8px; }
@supports (font-size: 1cqi) {
.inv:not(.inv-mini) .inv-names { font-size: clamp(1.55rem, 10.5cqi, 3.4rem); }
.inv:not(.inv-mini) .inv-day { font-size: clamp(1.75rem, 11.5cqi, 3.4rem); }
.inv-minimal:not(.inv-mini) .inv-names { font-size: clamp(1.15rem, 8cqi, 2.4rem); }
}
@container invite (max-width: 480px) {
.inv:not(.inv-mini) .inv-frame { padding: 42px 28px; }
.inv:not(.inv-mini) .inv-eyebrow { margin-bottom: 18px; letter-spacing: 0.28em; }
.inv:not(.inv-mini) .inv-names { margin-bottom: 20px; }
.inv:not(.inv-mini) .inv-date { margin-bottom: 18px; }
.inv:not(.inv-mini) .inv-locations { margin-bottom: 16px; gap: 10px; }
.inv:not(.inv-mini) .inv-message { margin-bottom: 18px; }
}
@container invite (max-width: 380px) {
.inv:not(.inv-mini) .inv-frame { padding: 30px 18px; }
.inv:not(.inv-mini) .inv-date-grid { gap: 10px; }
.inv:not(.inv-mini) .inv-weekday { letter-spacing: 0.22em; font-size: 10px; }
.inv:not(.inv-mini) .inv-time { letter-spacing: 0.2em; font-size: 10px; }
}
@container invite (max-width: 420px) {
.inv-minimal:not(.inv-mini) .inv-names {
flex-direction: column;
gap: 8px;
font-size: clamp(1.1rem, 7.5cqi, 2.2rem);
}
}
/* === Eternal === */
.inv-eternal { background: linear-gradient(180deg,#FBF6EE 0%, #F4ECDA 100%); color: #5C4830; }
.inv-eternal .inv-frame::after { content: ''; position: absolute; inset: 22px; border: 1px solid rgba(201,168,124,0.45); pointer-events: none; }
.inv-eternal .inv-mini.inv-frame::after, .inv-mini.inv-eternal .inv-frame::after { inset: 8px; }
.inv-eternal .inv-amp { color: #C9A87C; }
/* === Botanic === */
.inv-botanic { background: linear-gradient(180deg,#F5F1E8 0%,#E8EDD8 100%); color: #4A5D3F; }
.inv-botanic .inv-amp { color: #7A8B6A; }
.inv-botanic .inv-names { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; }
.inv-botanic .inv-deco { color: #7A8B6A; }
/* === Minimal === */
.inv-minimal { background: #FFFFFF; color: #1A1A1A; }
.inv-minimal .inv-names { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase; font-size: clamp(1.25rem, 3.2vw, 2.4rem); flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; }
.inv-mini .inv-minimal .inv-names, .inv-minimal.inv-mini .inv-names { font-size: 0.85rem; gap: 6px; flex-direction: row; }
.inv-minimal .inv-amp { color: #1A1A1A; font-style: normal; opacity: 0.5; }
.inv-line { position: absolute; background: #1A1A1A; }
.inv-line-tl { top: 28px; left: 28px; width: 50px; height: 1px; }
.inv-line-tl::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 50px; background: #1A1A1A; }
.inv-line-br { bottom: 28px; right: 28px; width: 50px; height: 1px; }
.inv-line-br::after { content: ''; position: absolute; right: 0; bottom: 0; width: 1px; height: 50px; background: #1A1A1A; }
.inv-mini .inv-line-tl, .inv-mini .inv-line-br { width: 22px; }
.inv-mini .inv-line-tl::after, .inv-mini .inv-line-br::after { height: 22px; }
/* === Aurora === */
.inv-aurora { background: linear-gradient(135deg, #FFE4E0 0%, #F4D9D0 35%, #DDD4F0 100%); color: #4A3A55; }
.inv-aurora .inv-amp { color: #B07BAC; }
.inv-glow { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.7; z-index: 0; }
.inv-glow-1 { width: 280px; height: 280px; background: rgba(255,180,200,0.6); top: -80px; left: -80px; }
.inv-glow-2 { width: 280px; height: 280px; background: rgba(176,123,172,0.45); bottom: -80px; right: -80px; }
.inv-mini .inv-glow-1, .inv-mini .inv-glow-2 { width: 120px; height: 120px; filter: blur(20px); }
/* === Dourado === */
.inv-dourado { background: radial-gradient(ellipse at top, #1F1812 0%, #0A0807 100%); color: #E8C778; }
.inv-dourado .inv-amp { color: #D4AF37; }
.inv-dourado .inv-names { font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: 0.04em; }
.inv-dourado .inv-eyebrow, .inv-dourado .inv-weekday, .inv-dourado .inv-loc-tag { color: #D4AF37; }
.inv-dourado .inv-foot, .inv-dourado .inv-date-grid { border-color: rgba(212,175,55,0.5); }
.inv-dourado .inv-frame::after { content: ''; position: absolute; inset: 22px; border: 1px solid rgba(212,175,55,0.5); pointer-events: none; }
.inv-mini.inv-dourado .inv-frame::after { inset: 8px; }
.inv-dourado .inv-crest { color: #D4AF37; }
/* === Praia === */
.inv-praia { background: linear-gradient(180deg, #E8F0F4 0%, #F4ECDA 100%); color: #1F4055; }
.inv-praia .inv-amp { color: #3A8CA8; }
.inv-praia .inv-deco { color: #3A8CA8; }
/* === Rústico === */
.inv-rustico { background: #EBDFC8; color: #4A3525; position: relative; }
.inv-rustico::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(60,40,20,0.06) 1px, transparent 1px); background-size: 4px 4px; }
.inv-rustico .inv-names { font-family: 'Lora', Georgia, serif; }
.inv-rustico .inv-amp { color: #8B5A3C; }
.inv-stamp { position: absolute; top: 28px; right: 28px; padding: 6px 14px; border: 2px solid #8B5A3C; color: #8B5A3C; font-size: 10px; letter-spacing: 0.25em; transform: rotate(8deg); font-weight: 600; opacity: 0.85; z-index: 2; }
.inv-mini .inv-stamp { font-size: 5px; padding: 2px 5px; top: 10px; right: 10px; border-width: 1px; letter-spacing: 0.15em; }
/* === Moderno === */
.inv-moderno { background: #FFFFFF; color: #1A1A1A; }
.inv-moderno .inv-names { font-family: 'Manrope', sans-serif; font-weight: 700; letter-spacing: -0.03em; }
.inv-moderno .inv-amp { color: #FF6B6B; font-style: normal; }
.inv-moderno .inv-eyebrow { color: #FF6B6B; }
.inv-shape { position: absolute; z-index: 0; }
.inv-shape-1 { top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: #FF6B6B; opacity: 0.18; }
.inv-shape-2 { bottom: -40px; left: -40px; width: 140px; height: 140px; background: #1A1A1A; border-radius: 0; transform: rotate(45deg); opacity: 0.06; }
.inv-shape-3 { top: 40%; right: -20px; width: 6px; height: 80px; background: #FF6B6B; }
.inv-mini .inv-shape-1 { width: 80px; height: 80px; }
.inv-mini .inv-shape-2 { width: 50px; height: 50px; }
.inv-mini .inv-shape-3 { height: 30px; }
/* === Vintage === */
.inv-vintage { background: linear-gradient(180deg, #F0E5D0 0%, #E5D5B8 100%); color: #5C4530; }
.inv-vintage .inv-names { font-family: 'Cormorant Garamond', Georgia, serif; }
.inv-vintage .inv-amp { color: #A87C5A; }
.inv-vintage .inv-frame::after { content: ''; position: absolute; inset: 16px; border: 2px double #A87C5A; opacity: 0.55; pointer-events: none; }
.inv-mini.inv-vintage .inv-frame::after { inset: 6px; border-width: 1px; }
.inv-vintage .inv-crest { color: #A87C5A; }
/* === Imperial === */
.inv-imperial { background: linear-gradient(180deg, #1A0F08 0%, #2C1810 60%, #1A0F08 100%); color: #E8DCC4; }
.inv-imperial .inv-amp { color: #C9A87C; }
.inv-imperial .inv-names { font-family: 'Playfair Display', Georgia, serif; }
.inv-imperial .inv-eyebrow, .inv-imperial .inv-weekday, .inv-imperial .inv-loc-tag { color: #C9A87C; }
.inv-imperial .inv-frame::after { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(232,220,196,0.25); pointer-events: none; }
.inv-mini.inv-imperial .inv-frame::after { inset: 7px; }
.inv-imperial .inv-foot, .inv-imperial .inv-date-grid { border-color: rgba(201,168,124,0.5); }
.inv-imperial .inv-crest { color: #C9A87C; }
/* Dashboard invite picker */
.invite-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.invite-pick { background: var(--white); border: 2px solid var(--gray-4); border-radius: var(--radius); padding: 16px; transition: var(--transition); display: flex; flex-direction: column; gap: 12px; cursor: default; }
.invite-pick:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.invite-pick.is-selected { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(15,15,15,0.06); }
.invite-pick-thumb { position: relative; aspect-ratio: 4/5.6; overflow: hidden; border-radius: 6px; background: var(--gray-5); }
.invite-pick-thumb .inv { position: absolute; inset: 0; }
.invite-pick-check { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); z-index: 5; }
.invite-pick-check [data-lucide] { width: 16px; height: 16px; }
.invite-pick-info strong { font-family: var(--font-heading); font-size: 1.0625rem; display: block; }
.invite-pick-info small { color: var(--gray-1); font-size: 12px; display: block; line-height: 1.4; margin-top: 2px; }
.invite-preview-wrap { display: flex; justify-content: center; padding: 32px 0; background: var(--offwhite); border-radius: var(--radius); }
.invite-preview-wrap .inv { --inv-w: 460px; }
.invite-share { display: flex; gap: 10px; flex-wrap: wrap; padding: 20px 0 4px; }
/* Public invite page */
.invite-page { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--offwhite), var(--cream)); }
.invite-bar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--gray-4); display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 16px; flex-wrap: wrap; }
.invite-bar strong { font-family: var(--font-heading); font-size: 1.0625rem; font-style: italic; }
.invite-bar .ib-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-bar .ib-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--gray-1); }
.invite-bar .ib-back:hover { color: var(--ink); }
.invite-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.invite-foot { padding: 20px; text-align: center; color: var(--gray-1); font-size: 13px; }
.invite-foot p { color: var(--gray-1); }
@media (max-width: 600px) {
.inv { --inv-w: min(90vw, calc(100vw - 32px)); }
.invite-preview-wrap .inv { --inv-w: min(88vw, calc(100vw - 40px)); }
.invite-stage { padding: 24px 16px; }
.invite-bar { padding: 12px 16px; }
.invite-bar strong { display: none; }
.invite-bar .ib-actions .btn { padding: 8px 12px; font-size: 12px; }
}
/* Responsive overrides */
@media (max-width: 968px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
.hero-grid p, .hero-grid .hero-ctas { margin-left: auto; margin-right: auto; }
.hero-grid .hero-ctas { justify-content: center; }
.hero-trust { justify-content: center; }
.hero-mosaic { aspect-ratio: 1/0.75; max-width: 560px; margin: 0 auto; }
.inspiration-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
.inspo-wide { grid-column: span 2; }
.inspo-tall { grid-row: span 1; }
.wsite-story-grid { grid-template-columns: 1fr; gap: 32px; }
.wsite-story-text h2 { text-align: center; }
.album-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 600px) {
.hero-photo { padding: 100px 0 32px; }
.hero-photo .hero-stats { flex-wrap: wrap; gap: 18px; margin-top: 40px; padding-top: 24px; }
.hero-photo .hero-stat { flex: 1 1 calc(50% - 9px); text-align: center; }
.inspiration-gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
.inspo-wide, .inspo-tall { grid-column: span 1; grid-row: span 1; }
.wsite-hero-photo h1 { font-size: 3rem; }
.album-grid { grid-template-columns: 1fr; }
.album-tile:nth-child(7n+1) { grid-row: span 1; }
/* Hero premium mobile: imagem única em destaque com badge sobreposto */
.hero-grid { gap: 32px; }
.hero-grid h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
.hero-grid p { font-size: 0.9375rem; margin-bottom: 24px; }
.hero-grid .hero-ctas { margin-bottom: 28px; }
.hero-mosaic {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
aspect-ratio: 4 / 5;
max-width: 100%;
margin: 0 -4px 12px;
gap: 0;
border-radius: var(--radius-xl);
overflow: visible;
}
.hero-mosaic .mosaic-tile { display: none; }
.hero-mosaic .mosaic-2 {
display: block;
grid-column: 1;
grid-row: 1;
border-radius: var(--radius-xl);
box-shadow: 0 30px 60px -20px rgba(60, 30, 20, .35), 0 12px 24px -10px rgba(60, 30, 20, .18);
position: relative;
}
.hero-mosaic::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-xl);
background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(40,20,15,.45) 100%);
pointer-events: none;
}
.mosaic-badge {
left: 16px;
right: auto;
bottom: 16px;
transform: none;
padding: 10px 16px 10px 14px;
max-width: calc(100% - 32px);
white-space: nowrap;
background: rgba(255,255,255,.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.6);
box-shadow: 0 12px 28px -8px rgba(0,0,0,.25);
gap: 10px;
}
.mosaic-badge strong { font-size: 13px; }
.mosaic-badge span { font-size: 9px; letter-spacing: 0.16em; }
.hero-trust { flex-wrap: nowrap; gap: 12px; row-gap: 10px; justify-content: center; }
.hero-trust > div:last-child { text-align: left; }
.hero-grid .hero-ctas { flex-direction: column; align-items: stretch; }
.hero-grid .hero-ctas .btn { width: 100%; justify-content: center; }
}
/* ============================================================
TEMPLATE 1 — ETERNAL · Dark Luxury Editorial
Concept: noite profunda + champagne foil + serifa Cormorant
Hero cinematográfico, monograma art-déco, mobile bottom tabbar
Inspiração: Vogue Weddings + Apple + Luxury Minimalism
============================================================ */
.tpl-eternal{
--e-gold:#D4B575; --e-gold-2:#E8D5B5; --e-gold-soft:#B89A6E; --e-gold-deep:#8A6E45;
--e-cream:#F7F0E3; --e-cream-2:#FBF6EC; --e-paper:#FFFCF5;
--e-night:#0E0B08; --e-night-2:#16110D; --e-night-3:#221A12;
--e-ink:#2B231C; --e-ink-2:#5C5044; --e-ink-3:#8A7C6C;
background:var(--e-night); color:#E8DFD2;
font-family:'Cormorant Garamond', Georgia, serif;
min-height:100vh;
}
.tpl-eternal a{ color:var(--e-gold-2); }
/* Subtle film grain on body */
.tpl-eternal::before{
content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.35; mix-blend-mode:overlay;
background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
background-size:3px 3px;
}
/* ---------- TOP BAR (monogram + menu + music) ---------- */
.wsite-topbar{
position:absolute; top:0; left:0; right:0; z-index:20;
display:flex; align-items:center; justify-content:space-between;
padding:18px 28px; background:linear-gradient(180deg, rgba(10,8,6,.85) 0%, rgba(10,8,6,0) 100%);
pointer-events:none;
}
.wsite-topbar > *{ pointer-events:auto; }
.wsite-topbar-menu{
background:transparent; border:none; cursor:pointer; padding:10px;
display:inline-flex; flex-direction:column; gap:5px; width:42px;
}
.wsite-topbar-menu span{
display:block; width:22px; height:1.5px; background:#EBD7B1; transition:.3s ease;
}
.wsite-topbar-menu:hover span{ background:#fff; }
.wsite-topbar-mono{
display:inline-flex; flex-direction:column; align-items:center; gap:4px;
color:#EBD7B1;
}
.wsite-topbar-mono-letters{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
font-size:1.55rem; letter-spacing:.18em; line-height:1;
color:var(--e-gold-2);
}
.wsite-topbar-mono-mark{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:14px; position:relative;
}
.wsite-topbar-mono-mark::before,
.wsite-topbar-mono-mark::after{
content:''; position:absolute; top:50%; width:9px; height:1px; background:var(--e-gold);
}
.wsite-topbar-mono-mark::before{ left:0; }
.wsite-topbar-mono-mark::after{ right:0; }
.wsite-topbar-mono-mark [data-lucide]{
width:11px; height:11px; color:var(--e-gold-2); fill:var(--e-gold-2);
position:relative; z-index:2;
}
.wsite-topbar-music{
display:inline-flex; align-items:center; gap:10px;
background:transparent; border:none; cursor:pointer;
color:#EBD7B1; font-family:'Inter', sans-serif; font-size:11px;
letter-spacing:.16em; text-transform:none; padding:8px 4px;
transition:.3s ease; text-decoration:none;
}
.wsite-topbar-music:hover{ color:#fff; }
.wsite-topbar-music-ico{
width:34px; height:34px; border:1px solid rgba(232,213,181,.4); border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
.wsite-topbar-music-ico [data-lucide]{ width:14px; height:14px; }
.wsite-topbar-music.is-playing .wsite-topbar-music-ico{
border-color:var(--e-gold-2); background:rgba(212,181,117,.15);
animation:wsite-pulse 1.6s ease-in-out infinite;
}
.wsite-topbar-music-disabled{ opacity:.45; cursor:default; }
@keyframes wsite-pulse{
0%,100%{ box-shadow:0 0 0 0 rgba(212,181,117,.5); }
50%{ box-shadow:0 0 0 8px rgba(212,181,117,0); }
}
/* ---------- HERO ---------- */
.tpl-eternal .wsite-hero-photo{ min-height:100vh; padding-top:80px; padding-bottom:120px; position:relative; }
.tpl-eternal .wsite-hero-photo::before{ transform:scale(1.05); filter:contrast(1.04) saturate(.78) brightness(.7); }
.tpl-eternal .wsite-hero-overlay{
background:
radial-gradient(ellipse at center, rgba(10,7,4,.25) 0%, rgba(10,7,4,.78) 100%),
linear-gradient(180deg, rgba(10,7,4,.55) 0%, rgba(10,7,4,.85) 100%);
}
.tpl-eternal .wsite-hero-photo .wsite-hero-content{
position:relative; z-index:3; max-width:780px; padding:60px 32px;
text-align:center; color:#fff;
}
.tpl-eternal .wsite-hero-photo .wsite-eyebrow{
display:inline-flex; background:transparent; border:none; color:var(--e-gold-2);
font-family:'Inter', sans-serif; font-weight:500;
font-size:11px; letter-spacing:.55em; text-transform:uppercase;
padding:6px 0; gap:14px; position:relative; align-items:center;
}
.tpl-eternal .wsite-hero-photo .wsite-eyebrow::before,
.tpl-eternal .wsite-hero-photo .wsite-eyebrow::after{
content:''; width:38px; height:1px; background:var(--e-gold-2); opacity:.55;
}
.tpl-eternal .wsite-hero-photo .wsite-eyebrow [data-lucide]{ display:none; }
/* Names */
.tpl-eternal .wsite-hero-photo h1{
font-family:'Cormorant Garamond', Georgia, serif; font-weight:400;
font-size:clamp(3.4rem, 9vw, 7rem); line-height:1; letter-spacing:.01em;
margin:30px 0 18px; gap:0;
display:flex; flex-direction:column; align-items:center;
color:#fff;
text-shadow:0 12px 50px rgba(0,0,0,.55);
}
.tpl-eternal .wsite-hero-photo h1 em{ font-style:normal; letter-spacing:.04em; text-transform:uppercase; }
.tpl-eternal .wsite-hero-photo h1 .amp{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:300;
font-size:.5em; color:var(--e-gold-2); margin:-6px 0; line-height:1;
text-shadow:0 2px 18px rgba(212,181,117,.6);
}
/* Date line */
.tpl-eternal .wsite-hero-photo .wsite-date{
display:inline-flex; font-family:'Inter', sans-serif; font-weight:500;
font-size:11px; letter-spacing:.42em; text-transform:uppercase;
color:var(--e-gold-2); margin-top:8px; gap:10px; align-items:center;
padding:10px 22px;
border-top:1px solid rgba(212,181,117,.3); border-bottom:1px solid rgba(212,181,117,.3);
}
.tpl-eternal .wsite-hero-photo .wsite-date .ico-inline{ width:13px; height:13px; color:var(--e-gold-2); }
.tpl-eternal .wsite-hero-subtitle{
margin:28px auto 0; max-width:460px;
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
font-size:1.18rem; line-height:1.55; color:rgba(245,235,215,.85);
}
/* Countdown */
.tpl-eternal .wsite-hero-photo .wsite-countdown{
gap:0; margin-top:42px; justify-content:center;
display:inline-flex;
}
.tpl-eternal .wsite-hero-photo .wsite-countdown div{
background:transparent; border:none; padding:8px 26px; min-width:auto;
position:relative; backdrop-filter:none; flex-direction:column; display:flex; align-items:center;
}
.tpl-eternal .wsite-hero-photo .wsite-countdown div + div::before{
content:''; position:absolute; left:0; top:18%; bottom:18%; width:1px;
background:rgba(212,181,117,.4);
}
.tpl-eternal .wsite-hero-photo .wsite-countdown strong{
font-family:'Cormorant Garamond', serif; font-weight:300;
font-size:3.2rem; color:#fff; line-height:1;
}
.tpl-eternal .wsite-hero-photo .wsite-countdown span{
font-size:9px; letter-spacing:.42em; text-transform:uppercase;
color:rgba(232,213,181,.7); margin-top:8px; font-family:'Inter', sans-serif;
}
/* Hero CTAs (3 buttons) */
.tpl-eternal .wsite-hero-ctas{
margin-top:48px; display:flex; flex-direction:column; gap:14px;
align-items:center; max-width:460px; margin-left:auto; margin-right:auto;
}
.tpl-eternal .wsite-cta-primary,
.tpl-eternal .wsite-cta-outline{
width:100%; max-width:420px; min-height:56px;
display:inline-flex; align-items:center; justify-content:center; gap:12px;
border-radius:6px; padding:16px 28px;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.34em; text-transform:uppercase;
font-weight:600; transition:.4s ease; text-decoration:none;
}
.tpl-eternal .wsite-cta-primary{
background:linear-gradient(180deg, var(--e-gold-2) 0%, var(--e-gold) 100%);
color:#1a120a; border:1px solid var(--e-gold-2);
box-shadow:0 14px 40px -16px rgba(212,181,117,.55);
}
.tpl-eternal .wsite-cta-primary:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.tpl-eternal .wsite-cta-outline{
background:transparent; color:#fff; border:1px solid rgba(232,213,181,.55);
}
.tpl-eternal .wsite-cta-outline:hover{
border-color:var(--e-gold-2); background:rgba(212,181,117,.1);
}
.tpl-eternal .wsite-cta-outline + .wsite-cta-outline{ /* second outline same style */ }
@media (min-width: 720px){
.tpl-eternal .wsite-hero-ctas{
flex-direction:row; flex-wrap:wrap; max-width:680px; justify-content:center;
}
.tpl-eternal .wsite-cta-primary{ flex:1 1 100%; max-width:480px; }
.tpl-eternal .wsite-cta-outline{ flex:1 1 calc(50% - 7px); max-width:none; }
}
.tpl-eternal .wsite-hero-scroll{ color:rgba(232,213,181,.55); }
/* ---------- DESKTOP NAV (hidden on mobile) ---------- */
.tpl-eternal .wsite-nav{
background:rgba(14,11,8,.96); backdrop-filter:blur(20px);
border-bottom:1px solid rgba(212,181,117,.18); padding:18px 24px; gap:36px;
position:relative; z-index:10;
}
.tpl-eternal .wsite-nav a{
font-family:'Inter', sans-serif; font-weight:500;
font-size:10px; letter-spacing:.42em; text-transform:uppercase;
color:#C9BFAE; padding:8px 2px; position:relative; text-decoration:none;
}
.tpl-eternal .wsite-nav a [data-lucide]{ display:none; }
.tpl-eternal .wsite-nav a:hover{ color:var(--e-gold-2); }
.tpl-eternal .wsite-nav a::after{
content:''; position:absolute; left:50%; bottom:0; width:0; height:1px;
background:var(--e-gold-2); transition:.4s ease; transform:translateX(-50%);
}
.tpl-eternal .wsite-nav a:hover::after{ width:24px; }
/* ---------- SECTIONS BASE (alternating dark/cream) ---------- */
.tpl-eternal .wsite-section{
padding:120px 32px; max-width:1080px; margin:0 auto; position:relative;
background:var(--e-night-2); color:#E8DFD2; text-align:center;
}
.tpl-eternal .wsite-section .wsite-section-head{ max-width:720px; margin:0 auto 56px; }
.tpl-eternal .wsite-section .section-tag{
display:inline-flex; align-items:center; gap:14px;
font-family:'Inter', sans-serif; font-weight:600;
font-size:10px; letter-spacing:.55em; text-transform:uppercase;
color:var(--e-gold-2); background:none; padding:0;
}
.tpl-eternal .wsite-section .section-tag::before,
.tpl-eternal .wsite-section .section-tag::after{
content:''; width:46px; height:1px; background:var(--e-gold-soft); position:static;
}
.tpl-eternal .wsite-section h2{
font-family:'Cormorant Garamond', Georgia, serif; font-weight:400; font-style:italic;
font-size:clamp(2.4rem, 5vw, 4rem); line-height:1.1; letter-spacing:.005em;
color:#fff; margin:24px 0 22px; position:relative;
}
.tpl-eternal .wsite-section h2 em{ color:var(--e-gold-2); font-style:italic; }
.tpl-eternal .wsite-section h2::after{
content:''; display:block; width:10px; height:10px; margin:24px auto 0;
background:var(--e-gold); transform:rotate(45deg);
box-shadow:-18px 0 0 -3px rgba(212,181,117,.45), 18px 0 0 -3px rgba(212,181,117,.45);
}
.tpl-eternal .wsite-section .wsite-lead{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
color:rgba(232,219,196,.85); font-size:1.2rem; line-height:1.6;
max-width:560px; margin:0 auto;
}
/* Light/cream sections (story, gifts, gallery) */
.tpl-eternal .wsite-story,
.tpl-eternal #gifts,
.tpl-eternal .wsite-gallery,
.tpl-eternal .wsite-padrinhos{ background:var(--e-cream); color:var(--e-ink); max-width:none; padding-left:32px; padding-right:32px; }
.tpl-eternal .wsite-story .section-tag,
.tpl-eternal #gifts .section-tag,
.tpl-eternal .wsite-gallery .section-tag,
.tpl-eternal .wsite-padrinhos .section-tag{ color:var(--e-gold-deep); }
.tpl-eternal .wsite-story .section-tag::before,
.tpl-eternal .wsite-story .section-tag::after,
.tpl-eternal #gifts .section-tag::before,
.tpl-eternal #gifts .section-tag::after,
.tpl-eternal .wsite-gallery .section-tag::before,
.tpl-eternal .wsite-gallery .section-tag::after,
.tpl-eternal .wsite-padrinhos .section-tag::before,
.tpl-eternal .wsite-padrinhos .section-tag::after{ background:var(--e-gold-soft); }
.tpl-eternal .wsite-story h2,
.tpl-eternal #gifts h2,
.tpl-eternal .wsite-gallery h2,
.tpl-eternal .wsite-padrinhos h2{ color:var(--e-ink); }
.tpl-eternal .wsite-story .wsite-lead,
.tpl-eternal #gifts .wsite-lead,
.tpl-eternal .wsite-gallery .wsite-lead,
.tpl-eternal .wsite-padrinhos .wsite-lead{ color:var(--e-ink-2); }
/* ---------- STORY ---------- */
.tpl-eternal .wsite-story-grid{
display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
max-width:1080px; margin:0 auto;
}
.tpl-eternal .wsite-story-img{
border-radius:0; aspect-ratio:4/5; background-size:cover; background-position:center;
box-shadow:0 40px 80px -30px rgba(60,40,20,.4); position:relative;
}
.tpl-eternal .wsite-story-img::before,
.tpl-eternal .wsite-story-img::after{
content:''; position:absolute; width:42px; height:42px; border:1px solid var(--e-gold-deep);
pointer-events:none;
}
.tpl-eternal .wsite-story-img::before{ top:-12px; left:-12px; border-right:none; border-bottom:none; }
.tpl-eternal .wsite-story-img::after{ bottom:-12px; right:-12px; border-left:none; border-top:none; }
.tpl-eternal .wsite-story-text{ text-align:left; }
.tpl-eternal .wsite-story-text h2{ text-align:left; margin-top:18px; }
.tpl-eternal .wsite-story-text h2::after{ margin:24px 0 0 0; box-shadow:-18px 0 0 -3px rgba(184,154,110,.4); }
.tpl-eternal .wsite-story-text p{
font-family:'Cormorant Garamond', serif; font-weight:400;
color:var(--e-ink-2); font-size:1.18rem; line-height:1.85; margin-top:32px;
}
.tpl-eternal .wsite-story-text p::first-letter{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:4.2rem; float:left; line-height:.85;
padding:8px 14px 0 0; color:var(--e-gold-deep);
}
.tpl-eternal .wsite-story-mark{
margin-top:40px; display:flex; align-items:center; gap:18px;
font-family:'Cormorant Garamond', serif; font-style:italic; color:var(--e-gold-deep);
font-size:1.4rem;
}
.tpl-eternal .wsite-story-mark::before{ content:'~ Para sempre ~'; }
.tpl-eternal .wsite-story-mark [data-lucide]{ display:none; }
.tpl-eternal .wsite-story-mark::after{
content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--e-gold-soft), transparent);
}
/* ---------- AGENDA / TIMELINE ---------- */
.tpl-eternal .wsite-schedule{ background:var(--e-night-3); }
.tpl-eternal .wsite-timeline{
list-style:none; padding:0; margin:0; max-width:680px; margin-left:auto; margin-right:auto;
position:relative; text-align:left;
}
.tpl-eternal .wsite-timeline::before{
content:''; position:absolute; left:24px; top:6px; bottom:6px; width:1px;
background:linear-gradient(180deg, transparent, var(--e-gold-soft) 12%, var(--e-gold-soft) 88%, transparent);
}
.tpl-eternal .wsite-timeline-item{
display:flex; gap:28px; padding:18px 0 28px 0; position:relative;
}
.tpl-eternal .wsite-timeline-dot{
flex:0 0 50px; width:50px; height:50px; border-radius:50%;
background:var(--e-night); border:1px solid var(--e-gold-soft);
display:inline-flex; align-items:center; justify-content:center;
color:var(--e-gold-2); position:relative; z-index:2;
}
.tpl-eternal .wsite-timeline-dot [data-lucide]{ width:18px; height:18px; }
.tpl-eternal .wsite-timeline-body{ flex:1; padding-top:4px; }
.tpl-eternal .wsite-timeline-time{
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.32em; text-transform:uppercase;
color:var(--e-gold-2);
}
.tpl-eternal .wsite-timeline-body h3{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:1.6rem; color:#fff; margin:6px 0 6px;
}
.tpl-eternal .wsite-timeline-body p{
font-family:'Cormorant Garamond', serif; color:rgba(232,219,196,.78);
font-size:1.08rem; line-height:1.6; margin:0;
}
/* ---------- LOCATIONS ---------- */
.tpl-eternal .wsite-locations{ background:var(--e-cream-2); color:var(--e-ink); max-width:none; }
.tpl-eternal .wsite-locations .section-tag{ color:var(--e-gold-deep); }
.tpl-eternal .wsite-locations .section-tag::before,
.tpl-eternal .wsite-locations .section-tag::after{ background:var(--e-gold-soft); }
.tpl-eternal .wsite-locations h2{ color:var(--e-ink); }
.tpl-eternal .wsite-locations-grid{
display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:980px; margin:24px auto 0;
}
.tpl-eternal .loc-card{
background:var(--e-paper); border:none; border-radius:0;
box-shadow:0 30px 60px -30px rgba(60,40,20,.18);
padding:64px 40px 56px; position:relative; transition:.5s ease; text-align:center;
}
.tpl-eternal .loc-card::before{ content:''; position:absolute; inset:14px; border:1px solid var(--e-gold-soft); pointer-events:none; }
.tpl-eternal .loc-card::after{ content:''; position:absolute; inset:18px; border:1px solid rgba(184,154,110,.18); pointer-events:none; }
.tpl-eternal .loc-card:hover{ transform:translateY(-6px); box-shadow:0 40px 80px -30px rgba(60,40,20,.3); }
.tpl-eternal .loc-icon{
background:var(--e-cream); border:1px solid var(--e-gold-soft); border-radius:50%;
width:80px; height:80px; margin:0 auto 24px; position:relative;
display:inline-flex; align-items:center; justify-content:center;
}
.tpl-eternal .loc-icon::before{ content:''; position:absolute; inset:-6px; border:1px solid var(--e-gold-soft); border-radius:50%; opacity:.5; }
.tpl-eternal .loc-icon [data-lucide]{ color:var(--e-gold-deep); width:30px; height:30px; stroke-width:1.4; }
.tpl-eternal .loc-card h3{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:1.7rem; color:var(--e-ink); margin:0;
}
.tpl-eternal .loc-card h3::after{ content:''; display:block; width:30px; height:1px; background:var(--e-gold-deep); margin:14px auto; }
.tpl-eternal .loc-card p{
font-family:'Cormorant Garamond', serif; font-size:1.15rem;
color:var(--e-ink-2); margin:0; line-height:1.5;
}
.tpl-eternal .loc-card small{
display:inline-flex; gap:6px; align-items:center; justify-content:center;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--e-ink-3); margin-top:14px;
}
.tpl-eternal .loc-card small .ico-inline{ color:var(--e-gold-deep); width:13px; height:13px; }
.tpl-eternal .loc-map{
display:inline-flex; align-items:center; gap:8px; margin-top:18px; text-decoration:none;
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.34em; text-transform:uppercase;
color:var(--e-gold-deep); border-bottom:1px solid var(--e-gold-soft); padding-bottom:6px;
}
.tpl-eternal .loc-map .ico-inline{ width:14px; height:14px; }
.tpl-eternal .loc-map:hover{ color:var(--e-ink); border-color:var(--e-ink); }
.tpl-eternal .wsite-event-extras{
display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
margin:48px auto 0; max-width:780px;
}
.tpl-eternal .wsite-event-chip{
display:inline-flex; align-items:center; gap:12px;
background:var(--e-paper); border:1px solid var(--e-gold-soft);
padding:14px 20px; min-width:220px;
}
.tpl-eternal .wsite-event-chip [data-lucide]{ width:18px; height:18px; color:var(--e-gold-deep); }
.tpl-eternal .wsite-event-chip span{
font-family:'Inter', sans-serif; font-size:9px; letter-spacing:.32em; text-transform:uppercase;
color:var(--e-ink-3); display:block;
}
.tpl-eternal .wsite-event-chip strong{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
color:var(--e-ink); font-size:1.15rem; display:block;
}
.tpl-eternal .wsite-event-notes{
margin:30px auto 0; max-width:680px;
font-family:'Cormorant Garamond', serif; font-style:italic;
color:var(--e-ink-2); font-size:1.08rem; line-height:1.7;
}
/* ---------- RSVP TEASER ---------- */
.tpl-eternal .wsite-rsvp-teaser{
background:var(--e-night);
background-image:
radial-gradient(ellipse at top, rgba(212,181,117,.12) 0%, transparent 60%),
linear-gradient(180deg, var(--e-night-3), var(--e-night));
padding:140px 32px;
}
.tpl-eternal .wsite-rsvp-teaser .wsite-section-head{ margin-bottom:36px; }
.tpl-eternal .wsite-rsvp-cta .btn-primary{
background:linear-gradient(180deg, var(--e-gold-2) 0%, var(--e-gold) 100%);
color:#1a120a; border:1px solid var(--e-gold-2); border-radius:6px;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.34em; text-transform:uppercase;
padding:18px 40px; font-weight:600; box-shadow:0 14px 40px -16px rgba(212,181,117,.5);
}
/* ---------- GIFTS ---------- */
.tpl-eternal #gifts{ padding:120px 32px; max-width:none; }
.tpl-eternal #gifts > *:not(.wsite-section-head):not(.text-center){ max-width:1080px; margin-left:auto; margin-right:auto; }
.tpl-eternal .gift-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:32px; max-width:1080px; margin:0 auto; }
.tpl-eternal .gift-card{
background:var(--e-cream-2); border:none; border-radius:0; box-shadow:none;
transition:.5s ease; overflow:hidden; position:relative; text-decoration:none; color:inherit;
}
.tpl-eternal .gift-card::before{
content:''; position:absolute; inset:10px; border:1px solid var(--e-gold-soft);
pointer-events:none; z-index:2; transition:.5s ease;
}
.tpl-eternal .gift-card:hover{ transform:translateY(-6px); }
.tpl-eternal .gift-card:hover::before{ inset:6px; border-color:var(--e-gold-deep); }
.tpl-eternal .gift-cover{
background:linear-gradient(135deg, #F2E6CC 0%, #E4D2B5 50%, var(--e-gold) 100%);
aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
color:#fff; border:none; background-size:cover; background-position:center;
}
.tpl-eternal .gift-cover [data-lucide]{ width:54px; height:54px; stroke-width:1; opacity:.85; }
.tpl-eternal .gift-info{ padding:32px 24px 28px; text-align:center; position:relative; }
.tpl-eternal .gift-info h4{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:1.4rem; color:var(--e-ink); margin:0; line-height:1.2;
}
.tpl-eternal .gift-info h4::after{ content:''; display:block; width:24px; height:1px; background:var(--e-gold-deep); margin:12px auto; }
.tpl-eternal .gift-price{
font-family:'Cormorant Garamond', serif; font-weight:400;
color:var(--e-gold-deep); font-size:1.6rem; letter-spacing:.02em;
}
/* ---------- GALERIA ---------- */
.tpl-eternal .wsite-gallery{ background:var(--e-paper); }
.tpl-eternal .wsite-gallery-grid{
display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
max-width:1180px; margin:0 auto;
}
.tpl-eternal .wsite-gallery-cell{
aspect-ratio:1/1; background-size:cover; background-position:center;
position:relative; overflow:hidden; transition:.5s ease;
border:1px solid rgba(184,154,110,.18);
}
.tpl-eternal .wsite-gallery-cell-0{ grid-column:span 2; grid-row:span 2; aspect-ratio:1/1; }
.tpl-eternal .wsite-gallery-cell-3{ grid-row:span 2; aspect-ratio:auto; }
.tpl-eternal .wsite-gallery-cell::after{
content:''; position:absolute; inset:0; background:rgba(10,8,6,0); transition:.4s ease;
}
.tpl-eternal .wsite-gallery-cell:hover::after{ background:rgba(10,8,6,.35); }
.tpl-eternal .wsite-gallery-cap{
position:absolute; left:14px; bottom:14px; z-index:2;
font-family:'Cormorant Garamond', serif; font-style:italic; color:#fff;
background:rgba(10,8,6,.55); padding:6px 12px; font-size:.95rem;
opacity:0; transition:.4s ease;
}
.tpl-eternal .wsite-gallery-cell:hover .wsite-gallery-cap{ opacity:1; }
/* ---------- PADRINHOS ---------- */
.tpl-eternal .wsite-padrinhos{ background:var(--e-cream-2); }
.tpl-eternal .wsite-padrinhos-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
gap:32px; max-width:1080px; margin:0 auto; text-align:left;
}
.tpl-eternal .wsite-padrinho-card{
background:var(--e-paper); border:1px solid var(--e-gold-soft); padding:0;
transition:.4s ease; overflow:hidden;
}
.tpl-eternal .wsite-padrinho-card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(60,40,20,.25); }
.tpl-eternal .wsite-padrinho-img{
aspect-ratio:1/1; background:var(--e-cream); background-size:cover; background-position:center;
display:flex; align-items:center; justify-content:center;
border-bottom:1px solid var(--e-gold-soft);
}
.tpl-eternal .wsite-padrinho-img [data-lucide]{ width:48px; height:48px; color:var(--e-gold-deep); opacity:.6; }
.tpl-eternal .wsite-padrinho-body{ padding:24px 26px 28px; }
.tpl-eternal .wsite-padrinho-role{
font-family:'Inter', sans-serif; font-size:9px; letter-spacing:.42em; text-transform:uppercase;
color:var(--e-gold-deep); font-weight:600;
}
.tpl-eternal .wsite-padrinho-body h3{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
color:var(--e-ink); font-size:1.5rem; margin:8px 0 6px;
}
.tpl-eternal .wsite-padrinho-rel{
font-family:'Cormorant Garamond', serif; color:var(--e-ink-3); font-size:1rem; margin:0 0 10px;
}
.tpl-eternal .wsite-padrinho-desc{
font-family:'Cormorant Garamond', serif; color:var(--e-ink-2); font-size:1.05rem; line-height:1.55; margin:0;
}
/* ---------- GUIA DA CIDADE ---------- */
.tpl-eternal .wsite-guide{ background:var(--e-night-3); }
.tpl-eternal .wsite-guide-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:24px; max-width:1080px; margin:0 auto; text-align:left;
}
.tpl-eternal .wsite-guide-card{
display:flex; gap:18px;
background:var(--e-night); border:1px solid rgba(212,181,117,.18);
padding:24px 24px 26px;
transition:.4s ease;
}
.tpl-eternal .wsite-guide-card:hover{ border-color:var(--e-gold-soft); }
.tpl-eternal .wsite-guide-ico{
flex:0 0 44px; width:44px; height:44px; border-radius:50%;
background:rgba(212,181,117,.1); border:1px solid var(--e-gold-soft);
display:inline-flex; align-items:center; justify-content:center; color:var(--e-gold-2);
}
.tpl-eternal .wsite-guide-ico [data-lucide]{ width:18px; height:18px; }
.tpl-eternal .wsite-guide-card h3{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:1.35rem; color:#fff; margin:0;
}
.tpl-eternal .wsite-guide-addr{
font-family:'Cormorant Garamond', serif; color:rgba(232,219,196,.75);
margin:6px 0 8px; font-size:1.02rem;
}
.tpl-eternal .wsite-guide-meta{
display:flex; gap:18px; flex-wrap:wrap;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.12em;
color:rgba(232,219,196,.7); margin:8px 0;
}
.tpl-eternal .wsite-guide-meta span{ display:inline-flex; align-items:center; gap:6px; }
.tpl-eternal .wsite-guide-meta [data-lucide]{ width:13px; height:13px; color:var(--e-gold-2); }
.tpl-eternal .wsite-guide-notes{
font-family:'Cormorant Garamond', serif; color:rgba(232,219,196,.78);
font-size:1rem; line-height:1.55; margin:8px 0 0;
}
.tpl-eternal .wsite-guide-link{
display:inline-flex; align-items:center; gap:8px; margin-top:12px;
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.32em; text-transform:uppercase;
color:var(--e-gold-2); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:4px;
}
.tpl-eternal .wsite-guide-link:hover{ border-color:var(--e-gold-2); }
.tpl-eternal .wsite-guide-link [data-lucide]{ width:13px; height:13px; }
/* ---------- FAQ ---------- */
.tpl-eternal .wsite-faq{ background:var(--e-night-2); }
.tpl-eternal .wsite-faq-list{ max-width:760px; margin:0 auto; text-align:left; }
.tpl-eternal .wsite-faq-item{
border-bottom:1px solid rgba(212,181,117,.18); padding:8px 0;
}
.tpl-eternal .wsite-faq-item summary{
list-style:none; cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:24px;
padding:22px 4px;
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
color:#fff; font-size:1.3rem;
}
.tpl-eternal .wsite-faq-item summary::-webkit-details-marker{ display:none; }
.tpl-eternal .wsite-faq-toggle{
width:18px; height:18px; color:var(--e-gold-2); transition:.3s ease; flex:0 0 18px;
}
.tpl-eternal .wsite-faq-item[open] .wsite-faq-toggle{ transform:rotate(45deg); }
.tpl-eternal .wsite-faq-answer{
padding:0 4px 22px;
font-family:'Cormorant Garamond', serif; color:rgba(232,219,196,.85);
font-size:1.1rem; line-height:1.7;
}
/* ---------- MESSAGES ---------- */
.tpl-eternal .wsite-messages{
background:var(--e-cream); color:var(--e-ink); max-width:none; padding-left:32px; padding-right:32px;
}
.tpl-eternal .wsite-messages .section-tag{ color:var(--e-gold-deep); }
.tpl-eternal .wsite-messages .section-tag::before,
.tpl-eternal .wsite-messages .section-tag::after{ background:var(--e-gold-soft); }
.tpl-eternal .wsite-messages h2{ color:var(--e-ink); }
.tpl-eternal .wsite-messages .wsite-lead{ color:var(--e-ink-2); }
.tpl-eternal .wsite-messages .form-card{
background:var(--e-paper) !important; border:1px solid var(--e-gold-soft); border-radius:0;
padding:48px 40px; box-shadow:0 30px 60px -30px rgba(60,40,20,.18);
max-width:640px; margin:0 auto; position:relative;
}
.tpl-eternal .wsite-messages .form-card::before{
content:''; position:absolute; inset:10px; border:1px solid rgba(184,154,110,.2); pointer-events:none;
}
.tpl-eternal .wsite-messages .form-label{
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.32em; text-transform:uppercase;
color:var(--e-ink-2); font-weight:600;
}
.tpl-eternal .wsite-messages .form-input,
.tpl-eternal .wsite-messages .form-textarea{
background:transparent; border:none; border-bottom:1px solid var(--e-gold-soft); border-radius:0;
font-family:'Cormorant Garamond', serif; font-size:1.1rem; color:var(--e-ink);
padding:10px 0; width:100%;
}
.tpl-eternal .wsite-messages .form-input:focus,
.tpl-eternal .wsite-messages .form-textarea:focus{
border-color:var(--e-gold-deep); box-shadow:none; outline:none;
}
.tpl-eternal .wsite-messages .btn-primary{
background:var(--e-ink); color:var(--e-gold-2); border:none; border-radius:0;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.34em; text-transform:uppercase;
padding:18px; margin-top:8px; transition:.4s ease; width:100%;
}
.tpl-eternal .wsite-messages .btn-primary:hover{ background:var(--e-gold-deep); color:#fff; }
.tpl-eternal .wsite-msg-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
margin-top:64px !important; gap:32px; max-width:1080px; margin-left:auto; margin-right:auto;
}
.tpl-eternal .msg-card{
background:var(--e-paper); border:none; border-radius:0; padding:48px 36px 32px;
position:relative; transition:.5s ease; text-align:center;
box-shadow:0 24px 50px -28px rgba(60,40,20,.2);
}
.tpl-eternal .msg-card::before{ content:''; position:absolute; inset:10px; border:1px solid var(--e-gold-soft); pointer-events:none; }
.tpl-eternal .msg-card:hover{ transform:translateY(-4px); box-shadow:0 36px 70px -30px rgba(60,40,20,.32); }
.tpl-eternal .msg-quote{ display:none; }
.tpl-eternal .msg-card p{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
font-size:1.2rem; line-height:1.75; color:var(--e-ink-2); margin:0 0 24px;
position:relative;
}
.tpl-eternal .msg-card p::before{
content:'\201C'; font-family:'Cormorant Garamond', serif; font-size:4rem; color:var(--e-gold-deep);
display:block; line-height:.6; margin-bottom:6px; opacity:.7;
}
.tpl-eternal .msg-card strong{
font-family:'Inter', sans-serif; font-weight:600; font-size:10px;
letter-spacing:.42em; text-transform:uppercase; color:var(--e-gold-deep);
display:inline-block; padding-top:18px; position:relative;
}
.tpl-eternal .msg-card strong::before{
content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:30px; height:1px;
background:var(--e-gold-deep);
}
/* ---------- FOOTER ---------- */
.wsite-footer{
background:var(--e-night); color:#C9BFAE; padding:80px 32px 120px;
border-top:1px solid rgba(212,181,117,.18); text-align:center;
}
.wsite-footer-inner{ max-width:680px; margin:0 auto; }
.wsite-footer-mono{
font-family:'Cormorant Garamond', serif; font-style:italic;
color:var(--e-gold-2); font-size:1.6rem; letter-spacing:.2em;
}
.wsite-footer-names{
font-family:'Cormorant Garamond', serif; font-style:italic;
color:#fff; font-size:1.8rem; margin:14px 0 6px;
}
.wsite-footer-date{
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.42em; text-transform:uppercase;
color:rgba(232,213,181,.6);
}
.wsite-footer-credit{
margin-top:36px; font-family:'Inter', sans-serif; font-size:11px;
color:rgba(201,191,174,.7); display:inline-flex; align-items:center; gap:6px;
}
.wsite-footer-credit [data-lucide]{ width:13px; height:13px; color:var(--e-gold-2); }
.wsite-footer-credit a{ color:var(--e-gold-2); text-decoration:none; }
/* ---------- BOTTOM TAB BAR (mobile) ---------- */
.wsite-tabbar{
display:none;
position:fixed; left:0; right:0; bottom:0; z-index:50;
background:linear-gradient(180deg, rgba(14,11,8,.92) 0%, rgba(14,11,8,.99) 100%);
border-top:1px solid rgba(212,181,117,.22);
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
padding:10px 6px calc(10px + env(safe-area-inset-bottom));
}
.wsite-tabbar-item{
flex:1; display:inline-flex; flex-direction:column; align-items:center; gap:4px;
padding:6px 4px; text-decoration:none; color:#C9BFAE;
transition:.3s ease; min-height:54px; justify-content:center;
}
.wsite-tabbar-item:hover,
.wsite-tabbar-item.is-active{ color:var(--e-gold-2); }
.wsite-tabbar-ico{ display:inline-flex; align-items:center; justify-content:center; }
.wsite-tabbar-ico [data-lucide]{ width:22px; height:22px; }
.wsite-tabbar-lbl{
font-family:'Inter', sans-serif; font-size:9px; letter-spacing:.18em; text-transform:uppercase;
font-weight:500;
}
@media (max-width: 820px){
.wsite-tabbar{ display:flex; }
.tpl-eternal .wsite-nav{ display:none; }
body.tpl-eternal-body, .tpl-eternal{ padding-bottom:80px; }
.wsite-footer{ padding-bottom:96px; }
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px){
.tpl-eternal .wsite-section{ padding:80px 22px; }
.tpl-eternal .wsite-locations,
.tpl-eternal .wsite-messages,
.tpl-eternal .wsite-rsvp-teaser,
.tpl-eternal .wsite-schedule,
.tpl-eternal .wsite-faq,
.tpl-eternal .wsite-guide,
.tpl-eternal .wsite-padrinhos,
.tpl-eternal .wsite-gallery,
.tpl-eternal #gifts{ padding:80px 22px; }
.tpl-eternal .wsite-hero-photo{ padding-top:90px; padding-bottom:100px; }
.tpl-eternal .wsite-hero-photo h1{ font-size:3.4rem; }
.tpl-eternal .wsite-story-grid{ grid-template-columns:1fr; gap:48px; }
.tpl-eternal .wsite-story-text{ text-align:center; }
.tpl-eternal .wsite-story-text h2{ text-align:center; }
.tpl-eternal .wsite-story-text h2::after{ margin:24px auto 0; box-shadow:-18px 0 0 -3px rgba(184,154,110,.4), 18px 0 0 -3px rgba(184,154,110,.4); }
.tpl-eternal .wsite-story-text p::first-letter{ font-size:3rem; padding:6px 10px 0 0; }
.tpl-eternal .wsite-locations-grid{ grid-template-columns:1fr; gap:20px; }
.tpl-eternal .wsite-story-img::before,
.tpl-eternal .wsite-story-img::after{ width:28px; height:28px; }
.tpl-eternal .wsite-section .section-tag::before,
.tpl-eternal .wsite-section .section-tag::after{ width:24px; }
.tpl-eternal .wsite-hero-photo .wsite-countdown div{ padding:8px 14px; }
.tpl-eternal .wsite-hero-photo .wsite-countdown strong{ font-size:2.4rem; }
.tpl-eternal .wsite-gallery-grid{ grid-template-columns:repeat(2, 1fr); }
.tpl-eternal .wsite-gallery-cell-0{ grid-column:span 2; grid-row:span 1; }
.tpl-eternal .wsite-gallery-cell-3{ grid-row:auto; aspect-ratio:1/1; }
.wsite-topbar{ padding:14px 18px; }
.wsite-topbar-music-label{ display:none; }
.wsite-topbar-mono-letters{ font-size:1.3rem; }
.tpl-eternal .wsite-timeline-dot{ flex:0 0 42px; width:42px; height:42px; }
.tpl-eternal .wsite-timeline::before{ left:20px; }
.wsite-footer{ padding:60px 22px 96px; }
}
/* ============================================================
TEMPLATE 2 — BOTANIC · Jardim botânico, sage green, eucalipto
Conceito: floral, romântico, washes aquarela, orgânico
============================================================ */
.tpl-botanic{
--b-sage:#7A8B6A; --b-sage-2:#5D6E50; --b-sage-3:#A8B89A; --b-sage-soft:#D4DDC8;
--b-ivory:#F5F1E8; --b-cream:#FAF7EE; --b-paper:#FFFCF5;
--b-blush:#E8D5C8; --b-ink:#2E3326; --b-ink-2:#4F5645; --b-ink-3:#7E8472;
background:var(--b-cream); color:var(--b-ink);
font-family:'Cormorant Garamond', Georgia, serif;
/* SVG sprig encoded as data URI for ornaments */
--b-leaf:url("data:image/svg+xml;utf8,");
}
.tpl-botanic a{ color:var(--b-sage); }
/* Soft watercolor washes on body */
.tpl-botanic::before{
content:''; position:fixed; top:-15%; left:-10%; width:50%; height:60%; z-index:0; pointer-events:none;
background:radial-gradient(ellipse, rgba(168,184,154,.18) 0%, transparent 65%);
filter:blur(40px);
}
.tpl-botanic::after{
content:''; position:fixed; bottom:-15%; right:-10%; width:55%; height:60%; z-index:0; pointer-events:none;
background:radial-gradient(ellipse, rgba(232,213,200,.22) 0%, transparent 65%);
filter:blur(40px);
}
/* ---------- HERO ---------- */
.tpl-botanic .wsite-hero-photo::before{ transform:scale(1.05); filter:saturate(.9) brightness(.92) hue-rotate(-5deg); }
.tpl-botanic .wsite-hero-overlay{
background:
linear-gradient(180deg, rgba(46,51,38,.15) 0%, rgba(46,51,38,.45) 60%, rgba(93,110,80,.55) 100%);
}
.tpl-botanic .wsite-hero-photo .wsite-hero-content{ max-width:820px; padding:64px 32px; }
/* Eyebrow with botanical feel */
.tpl-botanic .wsite-hero-photo .wsite-eyebrow{
background:rgba(255,255,255,.12); border:1px solid rgba(212,221,200,.45); backdrop-filter:blur(10px);
color:#F0EBDD; font-family:'Inter', sans-serif; font-weight:500;
font-size:11px; letter-spacing:.4em; text-transform:uppercase;
padding:8px 22px; border-radius:100px;
}
.tpl-botanic .wsite-hero-photo .wsite-eyebrow [data-lucide]{ width:13px; height:13px; color:#D4DDC8; fill:#D4DDC8; }
/* Names — soft serif, looser tracking */
.tpl-botanic .wsite-hero-photo h1{
font-family:'Cormorant Garamond', Georgia, serif; font-weight:400;
font-size:clamp(3.4rem, 8.5vw, 6.8rem); line-height:1; letter-spacing:.005em;
margin:32px 0; gap:8px; color:#fff;
text-shadow:0 6px 36px rgba(0,0,0,.4);
}
.tpl-botanic .wsite-hero-photo h1 em{ font-style:italic; font-weight:400; }
.tpl-botanic .wsite-hero-photo h1 .amp{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:300;
font-size:.45em; color:#D4DDC8; opacity:.95; line-height:1; margin:-4px 0;
}
/* Botanical sprig under names */
.tpl-botanic .wsite-hero-photo h1::after{
content:''; display:block; width:120px; height:24px; margin:18px auto 0;
background:var(--b-leaf) center/contain no-repeat;
filter:brightness(0) invert(1) opacity(.6);
}
.tpl-botanic .wsite-hero-photo .wsite-date{
font-family:'Inter', sans-serif; font-weight:500;
font-size:12px; letter-spacing:.32em; text-transform:uppercase;
color:rgba(255,255,255,.92); margin-top:24px; gap:14px;
}
.tpl-botanic .wsite-hero-photo .wsite-date .ico-inline{ width:13px; height:13px; color:#D4DDC8; }
.tpl-botanic .wsite-hero-photo .wsite-countdown{ gap:18px; margin-top:40px; }
.tpl-botanic .wsite-hero-photo .wsite-countdown div{
background:rgba(255,255,255,.1); border:1px solid rgba(212,221,200,.35);
border-radius:14px; padding:18px 16px; min-width:88px; backdrop-filter:blur(14px);
}
.tpl-botanic .wsite-hero-photo .wsite-countdown strong{
font-family:'Cormorant Garamond', serif; font-weight:400; font-size:2.2rem; color:#fff;
}
.tpl-botanic .wsite-hero-photo .wsite-countdown span{
font-size:10px; letter-spacing:.32em; text-transform:uppercase;
color:rgba(240,235,221,.8); font-family:'Inter', sans-serif;
}
.tpl-botanic .wsite-hero-content .btn{
margin-top:40px; background:#fff; color:var(--b-sage-2);
border:none; border-radius:100px;
padding:16px 36px; letter-spacing:.18em; font-size:11px; text-transform:uppercase;
font-family:'Inter', sans-serif; font-weight:600;
transition:.4s ease;
}
.tpl-botanic .wsite-hero-content .btn:hover{ background:var(--b-sage); color:#fff; transform:translateY(-2px); }
/* ---------- NAV ---------- */
.tpl-botanic .wsite-nav{
background:rgba(250,247,238,.94); backdrop-filter:blur(16px);
border-bottom:1px solid var(--b-sage-soft); padding:18px 24px; gap:36px;
}
.tpl-botanic .wsite-nav a{
font-family:'Inter', sans-serif; font-weight:500;
font-size:11px; letter-spacing:.28em; text-transform:uppercase;
color:var(--b-ink-2); display:inline-flex; align-items:center; gap:6px;
}
.tpl-botanic .wsite-nav a [data-lucide]{ width:14px; height:14px; color:var(--b-sage); }
.tpl-botanic .wsite-nav a:hover{ color:var(--b-sage); }
/* ---------- SECTIONS BASE ---------- */
.tpl-botanic .wsite-section{
padding:130px 32px; max-width:1100px; position:relative; z-index:1;
}
.tpl-botanic .wsite-section .section-tag{
display:inline-flex; align-items:center; gap:14px;
font-family:'Inter', sans-serif; font-weight:600;
font-size:11px; letter-spacing:.42em; text-transform:uppercase;
color:var(--b-sage); background:none; padding:0; position:relative;
}
.tpl-botanic .wsite-section .section-tag::before,
.tpl-botanic .wsite-section .section-tag::after{
content:''; width:42px; height:1px; background:var(--b-sage-3); position:static;
}
.tpl-botanic .wsite-section h2{
font-family:'Cormorant Garamond', Georgia, serif; font-weight:400; font-style:italic;
font-size:clamp(2.6rem, 5.5vw, 4rem); line-height:1.1; letter-spacing:-.005em;
color:var(--b-ink); margin:20px 0 28px;
}
/* Botanical sprig under h2 */
.tpl-botanic .wsite-section h2::after{
content:''; display:block; width:140px; height:24px; margin:24px auto 0;
background:var(--b-leaf) center/contain no-repeat; opacity:.6;
}
.tpl-botanic .wsite-section .wsite-lead{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
color:var(--b-ink-2); font-size:1.25rem; line-height:1.6;
max-width:580px; margin:0 auto 36px;
}
/* ---------- STORY ---------- */
.tpl-botanic .wsite-story{ background:var(--b-paper); position:relative; overflow:hidden; }
/* watercolor blob */
.tpl-botanic .wsite-story::before{
content:''; position:absolute; top:-10%; right:-15%; width:50%; height:80%;
background:radial-gradient(ellipse, rgba(168,184,154,.22), transparent 70%);
filter:blur(50px); pointer-events:none;
}
.tpl-botanic .wsite-story-grid{ gap:80px; align-items:center; position:relative; z-index:1; }
.tpl-botanic .wsite-story-img{
border-radius:50% 50% 50% 50% / 50% 50% 50% 50%; aspect-ratio:1/1;
box-shadow:0 30px 70px -25px rgba(93,110,80,.4);
position:relative;
}
.tpl-botanic .wsite-story-img::before{
content:''; position:absolute; inset:-18px; border-radius:50%;
border:1px dashed var(--b-sage-3); pointer-events:none;
}
.tpl-botanic .wsite-story-img::after{
content:''; position:absolute; bottom:-30px; left:-30px; width:140px; height:80px;
background:var(--b-leaf) center/contain no-repeat; opacity:.7; transform:rotate(-15deg);
}
.tpl-botanic .wsite-story-text{ text-align:left; }
.tpl-botanic .wsite-story-text .section-tag::before{ display:none; }
.tpl-botanic .wsite-story-text h2{ text-align:left; margin-top:18px; }
.tpl-botanic .wsite-story-text h2::after{ margin:24px 0 0; opacity:.55; }
.tpl-botanic .wsite-story-text p{
font-family:'Cormorant Garamond', serif; font-weight:400;
color:var(--b-ink-2); font-size:1.18rem; line-height:1.85;
margin-top:32px;
}
.tpl-botanic .wsite-story-text p::first-letter{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:4rem; float:left; line-height:.85;
padding:8px 14px 0 0; color:var(--b-sage);
}
.tpl-botanic .wsite-story-mark{
margin-top:36px; display:flex; align-items:center; gap:16px;
font-family:'Cormorant Garamond', serif; font-style:italic;
color:var(--b-sage); font-size:1.3rem;
}
.tpl-botanic .wsite-story-mark::before{ content:'Em flor, sempre.'; }
.tpl-botanic .wsite-story-mark [data-lucide]{ display:none; }
.tpl-botanic .wsite-story-mark::after{
content:''; flex:1; height:24px;
background:var(--b-leaf) left center/auto 100% no-repeat; opacity:.55;
}
/* ---------- LOCATIONS ---------- */
.tpl-botanic .wsite-locations{
background:var(--b-ivory) !important; position:relative; padding:130px 32px; overflow:hidden;
}
.tpl-botanic .wsite-locations::before{
content:''; position:absolute; top:48px; left:50%; transform:translateX(-50%);
width:160px; height:28px;
background:var(--b-leaf) center/contain no-repeat; opacity:.5;
}
.tpl-botanic .wsite-locations-grid{ gap:32px; margin-top:24px !important; }
.tpl-botanic .loc-card{
background:var(--b-paper); border:1px solid var(--b-sage-soft); border-radius:24px;
padding:56px 40px 48px; box-shadow:0 24px 50px -25px rgba(93,110,80,.25);
position:relative; transition:.5s ease; text-align:center; overflow:hidden;
}
.tpl-botanic .loc-card::before{
content:''; position:absolute; top:-30px; right:-30px; width:140px; height:140px;
background:radial-gradient(circle, rgba(168,184,154,.25), transparent 65%);
filter:blur(20px); pointer-events:none;
}
.tpl-botanic .loc-card:hover{ transform:translateY(-6px); box-shadow:0 36px 70px -25px rgba(93,110,80,.35); border-color:var(--b-sage-3); }
.tpl-botanic .loc-icon{
background:linear-gradient(135deg, var(--b-sage-soft), var(--b-ivory));
border:1px solid var(--b-sage-3); border-radius:50%;
width:80px; height:80px; margin:0 auto 22px; position:relative;
}
.tpl-botanic .loc-icon::before{
content:''; position:absolute; inset:-8px; border:1px dashed var(--b-sage-3); border-radius:50%; opacity:.6;
}
.tpl-botanic .loc-icon [data-lucide]{ color:var(--b-sage-2); width:30px; height:30px; stroke-width:1.4; }
.tpl-botanic .loc-card h3{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:1.7rem; color:var(--b-ink); margin:0;
}
.tpl-botanic .loc-card h3::after{
content:''; display:block; width:60px; height:14px; margin:14px auto;
background:var(--b-leaf) center/contain no-repeat; opacity:.6;
}
.tpl-botanic .loc-card p{
font-family:'Cormorant Garamond', serif; font-size:1.15rem; color:var(--b-ink-2); line-height:1.5; margin:0;
}
.tpl-botanic .loc-card small{
display:inline-flex; gap:6px; align-items:center; justify-content:center;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--b-ink-3); margin-top:14px;
}
.tpl-botanic .loc-card small .ico-inline{ color:var(--b-sage); width:13px; height:13px; }
/* ---------- GIFTS ---------- */
.tpl-botanic #gifts{ background:var(--b-paper); position:relative; }
.tpl-botanic .gift-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:32px; }
.tpl-botanic .gift-card{
background:var(--b-cream); border:1px solid var(--b-sage-soft); border-radius:20px;
box-shadow:0 18px 40px -25px rgba(93,110,80,.2);
transition:.5s ease; overflow:hidden; position:relative;
}
.tpl-botanic .gift-card:hover{
transform:translateY(-6px); box-shadow:0 32px 60px -25px rgba(93,110,80,.3);
border-color:var(--b-sage);
}
.tpl-botanic .gift-cover{
background:linear-gradient(135deg, var(--b-sage-soft) 0%, var(--b-sage-3) 60%, var(--b-sage) 100%);
aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
color:#fff; border:none; position:relative;
}
.tpl-botanic .gift-cover::before{
content:''; position:absolute; inset:0;
background:var(--b-leaf) center/200% no-repeat; opacity:.18; mix-blend-mode:overlay;
}
.tpl-botanic .gift-cover [data-lucide]{ width:56px; height:56px; stroke-width:1.1; opacity:.95; position:relative; }
.tpl-botanic .gift-tag{
background:#fff; color:var(--b-sage-2); border-radius:100px;
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.18em;
text-transform:uppercase; padding:5px 12px; font-weight:600;
}
.tpl-botanic .gift-tag [data-lucide]{ color:var(--b-sage); }
.tpl-botanic .gift-info{ padding:28px 24px; text-align:center; }
.tpl-botanic .gift-info h4{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:1.4rem; color:var(--b-ink); margin:0; line-height:1.2;
}
.tpl-botanic .gift-price{
font-family:'Cormorant Garamond', serif; font-weight:500;
color:var(--b-sage); font-size:1.7rem; margin-top:8px;
}
.tpl-botanic .gift-info small{
display:inline-flex; align-items:center; gap:5px; margin-top:8px; color:var(--b-ink-3);
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
/* ---------- MESSAGES ---------- */
.tpl-botanic .wsite-messages{
background:var(--b-ivory) !important; position:relative; padding:130px 32px; overflow:hidden;
}
.tpl-botanic .wsite-messages::before{
content:''; position:absolute; top:48px; left:50%; transform:translateX(-50%);
width:160px; height:28px; background:var(--b-leaf) center/contain no-repeat; opacity:.5;
}
.tpl-botanic .wsite-messages .form-card{
background:var(--b-paper) !important; border:1px solid var(--b-sage-soft); border-radius:24px;
padding:48px 40px; box-shadow:0 24px 50px -25px rgba(93,110,80,.25); max-width:640px;
}
.tpl-botanic .wsite-messages .form-label{
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.32em; text-transform:uppercase;
color:var(--b-ink-2); font-weight:600;
}
.tpl-botanic .wsite-messages .form-label [data-lucide]{ color:var(--b-sage); }
.tpl-botanic .wsite-messages .form-input,
.tpl-botanic .wsite-messages .form-textarea{
background:var(--b-cream); border:1px solid var(--b-sage-soft); border-radius:12px;
font-family:'Cormorant Garamond', serif; font-size:1.1rem; color:var(--b-ink);
padding:14px 16px;
}
.tpl-botanic .wsite-messages .form-input:focus,
.tpl-botanic .wsite-messages .form-textarea:focus{
border-color:var(--b-sage); box-shadow:0 0 0 3px rgba(122,139,106,.15); outline:none;
}
.tpl-botanic .wsite-messages .btn-primary{
background:var(--b-sage); color:#fff; border:none; border-radius:100px;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
padding:18px; margin-top:8px; transition:.4s ease; font-weight:600;
}
.tpl-botanic .wsite-messages .btn-primary:hover{ background:var(--b-sage-2); transform:translateY(-2px); }
.tpl-botanic .wsite-msg-grid{ margin-top:64px !important; gap:28px; }
.tpl-botanic .msg-card{
background:var(--b-paper); border:1px solid var(--b-sage-soft); border-radius:20px;
padding:36px 32px 32px; position:relative; transition:.5s ease; text-align:left;
box-shadow:0 18px 40px -25px rgba(93,110,80,.2);
}
.tpl-botanic .msg-card::before{
content:''; position:absolute; top:-14px; left:32px; width:60px; height:14px;
background:var(--b-leaf) center/contain no-repeat; opacity:.6;
}
.tpl-botanic .msg-card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -25px rgba(93,110,80,.3); border-color:var(--b-sage-3); }
.tpl-botanic .msg-quote{ color:var(--b-sage); opacity:.4; width:30px; height:30px; }
.tpl-botanic .msg-card p{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
font-size:1.18rem; line-height:1.7; color:var(--b-ink-2); margin:0 0 18px;
}
.tpl-botanic .msg-card strong{
font-family:'Inter', sans-serif; font-weight:600; font-size:11px;
letter-spacing:.32em; text-transform:uppercase; color:var(--b-sage);
display:inline-block; padding-top:14px; border-top:1px solid var(--b-sage-soft);
}
/* ---------- CTA FINAL ---------- */
.tpl-botanic .cta-final{ padding:160px 32px; position:relative; overflow:hidden; }
.tpl-botanic .cta-final .cta-bg{ filter:brightness(.55) saturate(.85) hue-rotate(-5deg); }
.tpl-botanic .cta-final::before{
content:''; position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
width:200px; height:32px;
background:var(--b-leaf) center/contain no-repeat;
filter:brightness(0) invert(1) opacity(.55); z-index:2;
}
.tpl-botanic .cta-final-inner{ color:#fff; position:relative; z-index:3; }
.tpl-botanic .cta-final .hero-eyebrow{
display:inline-flex; gap:14px; align-items:center;
font-family:'Inter', sans-serif; font-weight:500; font-size:11px;
letter-spacing:.42em; text-transform:uppercase; color:#D4DDC8;
background:rgba(255,255,255,.1); border:1px solid rgba(212,221,200,.4);
padding:8px 22px; border-radius:100px; backdrop-filter:blur(10px);
}
.tpl-botanic .cta-final .hero-eyebrow [data-lucide]{ width:13px; height:13px; }
.tpl-botanic .cta-final h2{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
font-size:clamp(2.6rem, 6vw, 4.4rem); line-height:1.15; margin:24px 0;
}
.tpl-botanic .cta-final h2 em{ color:#D4DDC8; font-style:italic; }
.tpl-botanic .cta-final p{
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.2rem;
color:rgba(255,255,255,.85); max-width:520px; margin:0 auto 32px;
}
.tpl-botanic .cta-final .btn-accent{
background:#fff; color:var(--b-sage-2);
border:none; border-radius:100px;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
padding:18px 40px; font-weight:600; transition:.4s ease;
}
.tpl-botanic .cta-final .btn-accent:hover{ background:var(--b-sage); color:#fff; transform:translateY(-2px); }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px){
.tpl-botanic .wsite-section{ padding:80px 24px; }
.tpl-botanic .wsite-locations,
.tpl-botanic .wsite-messages{ padding:80px 24px; }
.tpl-botanic .wsite-hero-photo h1{ font-size:3.4rem; }
.tpl-botanic .wsite-story-grid{ gap:48px; }
.tpl-botanic .wsite-story-img::after{ width:90px; height:60px; bottom:-20px; left:-15px; }
.tpl-botanic .wsite-section .section-tag::before,
.tpl-botanic .wsite-section .section-tag::after{ width:24px; }
.tpl-botanic .wsite-nav{ gap:18px; }
.tpl-botanic .cta-final{ padding:96px 24px; }
}
/* ============================================================
TEMPLATE 3 — MINIMAL · Swiss / editorial monocromático
Conceito: zero ornamento, hairlines, grid modular, Inter only
============================================================ */
.tpl-minimal{
--m-ink:#0A0A0A; --m-ink-2:#3A3A3A; --m-ink-3:#737373; --m-line:#E5E5E5;
--m-bg:#FFFFFF; --m-bg-2:#FAFAFA;
background:var(--m-bg); color:var(--m-ink);
font-family:'Inter', sans-serif; font-feature-settings:"ss01","cv11";
}
.tpl-minimal a{ color:var(--m-ink); }
/* ---------- HERO ---------- */
.tpl-minimal .wsite-hero-photo{ background:var(--m-ink); }
.tpl-minimal .wsite-hero-photo::before{ filter:grayscale(1) contrast(1.1) brightness(.85); transform:scale(1.04); }
.tpl-minimal .wsite-hero-overlay{ background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55)); }
.tpl-minimal .wsite-hero-photo .wsite-hero-content{ max-width:1080px; padding:64px 32px; text-align:left; width:100%; position:relative; z-index:3; }
/* Tiny grid label top-left */
.tpl-minimal .wsite-hero-photo .wsite-hero-content::before{
content:'01 / Save the date'; position:absolute; top:32px; left:32px;
font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:500;
}
.tpl-minimal .wsite-hero-photo .wsite-hero-content::after{
content:''; position:absolute; bottom:32px; right:32px; width:80px; height:1px; background:rgba(255,255,255,.4);
}
.tpl-minimal .wsite-hero-photo .wsite-eyebrow{
background:transparent; border:none; padding:0;
font-family:'Inter', sans-serif; font-weight:500;
font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:rgba(255,255,255,.7);
}
.tpl-minimal .wsite-hero-photo .wsite-eyebrow [data-lucide]{ display:none; }
.tpl-minimal .wsite-hero-photo h1{
font-family:'Inter', sans-serif; font-weight:700; letter-spacing:-.04em;
font-size:clamp(3.5rem, 11vw, 9rem); line-height:.92; gap:0;
align-items:flex-start; text-align:left; margin:24px 0 0;
text-shadow:none;
}
.tpl-minimal .wsite-hero-photo h1 em{ font-style:normal; font-weight:700; }
.tpl-minimal .wsite-hero-photo h1 .amp{
font-family:'Inter', sans-serif; font-weight:200; font-style:normal;
color:rgba(255,255,255,.4); font-size:.6em; line-height:1; margin:8px 0;
}
.tpl-minimal .wsite-hero-photo .wsite-date{
font-family:'Inter', sans-serif; font-weight:500;
font-size:13px; letter-spacing:.18em; text-transform:none;
color:rgba(255,255,255,.85); margin-top:32px; padding-top:24px;
border-top:1px solid rgba(255,255,255,.25); display:inline-flex; gap:14px;
}
.tpl-minimal .wsite-hero-photo .wsite-date .ico-inline{ display:none; }
.tpl-minimal .wsite-hero-photo .wsite-countdown{ gap:48px; margin-top:40px; justify-content:flex-start; }
.tpl-minimal .wsite-hero-photo .wsite-countdown div{ background:none; border:none; padding:0; min-width:auto; backdrop-filter:none; text-align:left; }
.tpl-minimal .wsite-hero-photo .wsite-countdown strong{
font-family:'Inter', sans-serif; font-weight:600; font-size:2.5rem; color:#fff; letter-spacing:-.03em; line-height:1;
}
.tpl-minimal .wsite-hero-photo .wsite-countdown span{
font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.55);
display:block; margin-top:6px;
}
.tpl-minimal .wsite-hero-content .btn{
margin-top:40px; background:#fff; color:var(--m-ink);
border:none; border-radius:0;
padding:18px 32px; letter-spacing:.16em; font-size:12px; text-transform:uppercase;
font-family:'Inter', sans-serif; font-weight:600;
transition:.3s ease;
}
.tpl-minimal .wsite-hero-content .btn:hover{ background:var(--m-ink-2); color:#fff; }
.tpl-minimal .wsite-hero-content .btn .ico-inline{ display:none; }
.tpl-minimal .wsite-hero-scroll{ color:rgba(255,255,255,.5); }
/* ---------- NAV ---------- */
.tpl-minimal .wsite-nav{
background:rgba(255,255,255,.94); backdrop-filter:blur(16px);
border-bottom:1px solid var(--m-line); padding:18px 32px; gap:36px; justify-content:space-between;
}
.tpl-minimal .wsite-nav::before{
content:'01'; font-family:'Inter', sans-serif; font-weight:600; font-size:11px;
letter-spacing:.18em; color:var(--m-ink-3);
}
.tpl-minimal .wsite-nav a{
font-family:'Inter', sans-serif; font-weight:500;
font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--m-ink-2);
}
.tpl-minimal .wsite-nav a [data-lucide]{ display:none; }
.tpl-minimal .wsite-nav a:hover{ color:var(--m-ink); }
/* ---------- SECTIONS ---------- */
.tpl-minimal .wsite-section{
padding:140px 32px; max-width:1200px; text-align:left; position:relative;
}
.tpl-minimal .wsite-section::before{
content:''; position:absolute; top:0; left:32px; right:32px; height:1px; background:var(--m-line);
}
.tpl-minimal .wsite-section .section-tag{
display:flex; align-items:center; gap:14px;
font-family:'Inter', sans-serif; font-weight:500;
font-size:11px; letter-spacing:.32em; text-transform:uppercase;
color:var(--m-ink-3); background:none; padding:0;
}
.tpl-minimal .wsite-section .section-tag::before{
content:'—'; width:auto; height:auto; background:none; position:static; color:var(--m-ink-3);
}
.tpl-minimal .wsite-section .section-tag::after{ display:none; }
.tpl-minimal .wsite-section h2{
font-family:'Inter', sans-serif; font-weight:600; font-style:normal;
font-size:clamp(2.4rem, 5vw, 4rem); line-height:1; letter-spacing:-.035em;
color:var(--m-ink); margin:18px 0 28px; text-align:left;
}
.tpl-minimal .wsite-section h2::after{ display:none; }
.tpl-minimal .wsite-section .wsite-lead{
font-family:'Inter', sans-serif; font-weight:400;
color:var(--m-ink-2); font-size:1.05rem; line-height:1.6;
max-width:560px; margin:0 0 36px;
}
/* ---------- STORY ---------- */
.tpl-minimal .wsite-story-grid{ gap:64px; align-items:start; }
.tpl-minimal .wsite-story-img{
border-radius:0; aspect-ratio:4/5; box-shadow:none; filter:grayscale(.4) contrast(1.05);
}
.tpl-minimal .wsite-story-img::after{ display:none; }
.tpl-minimal .wsite-story-text{ text-align:left; padding-top:24px; }
.tpl-minimal .wsite-story-text .section-tag::before{ content:'—'; }
.tpl-minimal .wsite-story-text h2{ text-align:left; margin-top:18px; }
.tpl-minimal .wsite-story-text p{
font-family:'Inter', sans-serif; font-weight:400;
color:var(--m-ink-2); font-size:1.0625rem; line-height:1.75;
margin-top:24px;
}
.tpl-minimal .wsite-story-text p::first-letter{ font-style:normal; color:var(--m-ink); font-size:inherit; padding:0; float:none; }
.tpl-minimal .wsite-story-mark{
margin-top:36px; display:flex; align-items:center; gap:14px;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
color:var(--m-ink-3);
}
.tpl-minimal .wsite-story-mark::before{ content:'02 — Como começou'; }
.tpl-minimal .wsite-story-mark [data-lucide]{ display:none; }
.tpl-minimal .wsite-story-mark::after{ content:''; flex:1; height:1px; background:var(--m-line); }
/* ---------- LOCATIONS ---------- */
.tpl-minimal .wsite-locations{ background:var(--m-bg-2) !important; padding:140px 32px; }
.tpl-minimal .wsite-locations .section-tag,
.tpl-minimal .wsite-locations h2{ text-align:left; }
.tpl-minimal .wsite-locations-grid{ gap:32px; margin-top:48px !important; }
.tpl-minimal .loc-card{
background:#fff; border:1px solid var(--m-line); border-radius:0; box-shadow:none;
padding:48px 36px; text-align:left; transition:.3s ease; position:relative;
}
.tpl-minimal .loc-card::before{
content:''; position:absolute; top:0; left:0; width:32px; height:1px; background:var(--m-ink); transition:.4s ease;
}
.tpl-minimal .loc-card:hover{ background:var(--m-ink); color:#fff; }
.tpl-minimal .loc-card:hover::before{ width:80px; background:#fff; }
.tpl-minimal .loc-card:hover h3,
.tpl-minimal .loc-card:hover p{ color:#fff; }
.tpl-minimal .loc-card:hover .loc-icon{ background:#fff; border-color:#fff; }
.tpl-minimal .loc-card:hover .loc-icon [data-lucide]{ color:var(--m-ink); }
.tpl-minimal .loc-icon{
background:var(--m-bg-2); border:1px solid var(--m-line); border-radius:0;
width:56px; height:56px; margin:0 0 24px;
}
.tpl-minimal .loc-icon [data-lucide]{ color:var(--m-ink); width:22px; height:22px; stroke-width:1.6; }
.tpl-minimal .loc-card h3{
font-family:'Inter', sans-serif; font-style:normal; font-weight:600;
font-size:1.5rem; color:var(--m-ink); margin:0; letter-spacing:-.01em;
}
.tpl-minimal .loc-card p{
font-family:'Inter', sans-serif; font-size:1rem; color:var(--m-ink-2); margin-top:8px; line-height:1.5;
}
.tpl-minimal .loc-card small{
display:block; margin-top:16px;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--m-ink-3);
}
.tpl-minimal .loc-card small .ico-inline{ display:none; }
/* ---------- GIFTS ---------- */
.tpl-minimal #gifts{ background:#fff; }
.tpl-minimal #gifts .section-tag,
.tpl-minimal #gifts h2,
.tpl-minimal #gifts .wsite-lead{ text-align:left; }
.tpl-minimal .gift-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:0; margin-top:48px; }
.tpl-minimal .gift-card{
background:#fff; border:1px solid var(--m-line); border-right:none; border-radius:0;
box-shadow:none; transition:.3s ease; overflow:hidden; position:relative;
}
.tpl-minimal .gift-card:last-child{ border-right:1px solid var(--m-line); }
.tpl-minimal .gift-card:hover{ background:var(--m-bg-2); }
.tpl-minimal .gift-cover{
background:var(--m-bg-2); aspect-ratio:1/1;
display:flex; align-items:center; justify-content:center; color:var(--m-ink); border:none;
}
.tpl-minimal .gift-cover [data-lucide]{ width:40px; height:40px; stroke-width:1.4; }
.tpl-minimal .gift-tag{
background:var(--m-ink); color:#fff; border-radius:0;
font-family:'Inter', sans-serif; font-size:9px; letter-spacing:.32em; text-transform:uppercase;
padding:5px 10px; font-weight:600;
}
.tpl-minimal .gift-tag [data-lucide]{ display:none; }
.tpl-minimal .gift-info{ padding:24px; text-align:left; border-top:1px solid var(--m-line); }
.tpl-minimal .gift-info h4{
font-family:'Inter', sans-serif; font-style:normal; font-weight:600;
font-size:1.0625rem; color:var(--m-ink); margin:0; letter-spacing:-.005em;
}
.tpl-minimal .gift-price{
font-family:'Inter', sans-serif; font-weight:500; color:var(--m-ink); font-size:1.25rem; margin-top:8px;
}
.tpl-minimal .gift-info small{ display:block; margin-top:6px; color:var(--m-ink-3); font-size:11px; letter-spacing:.12em; }
/* ---------- MESSAGES ---------- */
.tpl-minimal .wsite-messages{ background:var(--m-bg-2) !important; padding:140px 32px; }
.tpl-minimal .wsite-messages .section-tag,
.tpl-minimal .wsite-messages h2,
.tpl-minimal .wsite-messages .wsite-lead{ text-align:left; }
.tpl-minimal .wsite-messages .form-card{
background:#fff !important; border:1px solid var(--m-line); border-radius:0; padding:40px;
box-shadow:none; max-width:none;
}
.tpl-minimal .wsite-messages .form-label{
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.28em; text-transform:uppercase;
color:var(--m-ink-3); font-weight:600;
}
.tpl-minimal .wsite-messages .form-label [data-lucide]{ display:none; }
.tpl-minimal .wsite-messages .form-input,
.tpl-minimal .wsite-messages .form-textarea{
background:transparent; border:none; border-bottom:1px solid var(--m-line); border-radius:0;
font-family:'Inter', sans-serif; font-size:1rem; color:var(--m-ink); padding:12px 0;
}
.tpl-minimal .wsite-messages .form-input:focus,
.tpl-minimal .wsite-messages .form-textarea:focus{ border-color:var(--m-ink); box-shadow:none; outline:none; }
.tpl-minimal .wsite-messages .btn-primary{
background:var(--m-ink); color:#fff; border:none; border-radius:0;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
padding:18px; font-weight:600;
}
.tpl-minimal .wsite-messages .btn-primary:hover{ background:var(--m-ink-2); }
.tpl-minimal .wsite-msg-grid{ margin-top:48px !important; gap:0; }
.tpl-minimal .msg-card{
background:#fff; border:1px solid var(--m-line); border-radius:0; padding:36px;
box-shadow:none; text-align:left; transition:.3s ease;
}
.tpl-minimal .msg-card:hover{ background:var(--m-bg-2); }
.tpl-minimal .msg-card::before, .tpl-minimal .msg-card::after{ display:none; }
.tpl-minimal .msg-quote{ display:none; }
.tpl-minimal .msg-card p{
font-family:'Inter', sans-serif; font-style:normal; font-weight:400;
font-size:1.0625rem; line-height:1.65; color:var(--m-ink); margin:0 0 20px;
}
.tpl-minimal .msg-card p::before{ content:'"'; font-size:2rem; color:var(--m-ink-3); display:inline; margin-right:4px; }
.tpl-minimal .msg-card strong{
font-family:'Inter', sans-serif; font-weight:600; font-size:11px;
letter-spacing:.18em; text-transform:uppercase; color:var(--m-ink-3);
display:block; padding-top:16px; border-top:1px solid var(--m-line);
}
/* ---------- CTA FINAL ---------- */
.tpl-minimal .cta-final{ padding:160px 32px; background:var(--m-ink); position:relative; }
.tpl-minimal .cta-final .cta-bg{ display:none; }
.tpl-minimal .cta-final-inner{ color:#fff; max-width:900px; }
.tpl-minimal .cta-final .hero-eyebrow{
font-family:'Inter', sans-serif; font-weight:500; font-size:11px;
letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.tpl-minimal .cta-final .hero-eyebrow [data-lucide]{ display:none; }
.tpl-minimal .cta-final h2{
font-family:'Inter', sans-serif; font-weight:600; font-style:normal;
font-size:clamp(2.6rem, 6.5vw, 5rem); line-height:1; letter-spacing:-.04em; margin:24px 0;
}
.tpl-minimal .cta-final h2 em{ font-style:normal; font-weight:200; color:rgba(255,255,255,.6); }
.tpl-minimal .cta-final p{ color:rgba(255,255,255,.7); font-size:1.0625rem; max-width:520px; margin:0 0 32px; }
.tpl-minimal .cta-final .btn-accent{
background:#fff; color:var(--m-ink); border:none; border-radius:0;
font-family:'Inter', sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
padding:18px 36px; font-weight:600;
}
.tpl-minimal .cta-final .btn-accent:hover{ background:rgba(255,255,255,.85); }
@media (max-width: 768px){
.tpl-minimal .wsite-section{ padding:80px 24px; }
.tpl-minimal .wsite-locations,
.tpl-minimal .wsite-messages{ padding:80px 24px; }
.tpl-minimal .wsite-hero-photo h1{ font-size:3.5rem; }
.tpl-minimal .wsite-hero-photo .wsite-countdown{ gap:24px; }
.tpl-minimal .wsite-story-grid{ gap:40px; }
.tpl-minimal .gift-card{ border-right:1px solid var(--m-line); }
.tpl-minimal .cta-final{ padding:96px 24px; }
}
/* ============================================================
TEMPLATE 4 — AURORA · Cinematográfico, gradientes lavanda/peach
Conceito: dreamy, glassmorphism, glow, blur, romance suave
============================================================ */
.tpl-aurora{
--au-lav:#B07BAC; --au-lav-2:#8E5C90; --au-peach:#F4B5A1; --au-peach-2:#E89B85;
--au-cream:#FFF4F1; --au-cream-2:#FFEAE2; --au-mist:#F8E9F2;
--au-ink:#2D1F2E; --au-ink-2:#5A4A5C; --au-ink-3:#8B7A8D;
background:var(--au-cream); color:var(--au-ink);
font-family:'Playfair Display', Georgia, serif;
}
.tpl-aurora a{ color:var(--au-lav); }
/* Aurora gradient blobs animated on body */
.tpl-aurora::before{
content:''; position:fixed; top:-20%; left:-15%; width:60%; height:70%; z-index:0; pointer-events:none;
background:radial-gradient(ellipse, rgba(176,123,172,.35) 0%, transparent 60%);
filter:blur(60px); animation:auroraFloat 18s ease-in-out infinite;
}
.tpl-aurora::after{
content:''; position:fixed; bottom:-20%; right:-15%; width:70%; height:75%; z-index:0; pointer-events:none;
background:radial-gradient(ellipse, rgba(244,181,161,.4) 0%, transparent 60%);
filter:blur(60px); animation:auroraFloat 22s ease-in-out infinite reverse;
}
@keyframes auroraFloat{
0%,100%{ transform:translate(0,0) scale(1); }
50%{ transform:translate(40px,30px) scale(1.1); }
}
/* ---------- HERO ---------- */
.tpl-aurora .wsite-hero-photo::before{ transform:scale(1.06); filter:saturate(.85) brightness(.9); }
.tpl-aurora .wsite-hero-overlay{
background:
radial-gradient(ellipse at 20% 30%, rgba(176,123,172,.55), transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(244,181,161,.5), transparent 55%),
linear-gradient(180deg, rgba(45,31,46,.2) 0%, rgba(45,31,46,.55) 100%);
}
.tpl-aurora .wsite-hero-photo .wsite-hero-content{ max-width:840px; padding:64px 32px; }
.tpl-aurora .wsite-hero-photo .wsite-eyebrow{
background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(20px);
color:#FFF4F1; font-family:'Inter', sans-serif; font-weight:500;
font-size:11px; letter-spacing:.4em; text-transform:uppercase;
padding:10px 24px; border-radius:100px;
box-shadow:0 8px 32px rgba(176,123,172,.3);
}
.tpl-aurora .wsite-hero-photo .wsite-eyebrow [data-lucide]{ width:13px; height:13px; color:var(--au-peach); fill:var(--au-peach); }
.tpl-aurora .wsite-hero-photo h1{
font-family:'Playfair Display', serif; font-weight:400;
font-size:clamp(3.6rem, 9vw, 7rem); line-height:.98; letter-spacing:-.01em;
margin:32px 0; gap:0; color:#fff;
text-shadow:0 8px 50px rgba(176,123,172,.6), 0 4px 20px rgba(0,0,0,.4);
}
.tpl-aurora .wsite-hero-photo h1 em{ font-style:italic; }
.tpl-aurora .wsite-hero-photo h1 .amp{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:.5em; line-height:1; margin:-4px 0;
background:linear-gradient(135deg, var(--au-peach) 0%, var(--au-lav) 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
text-shadow:none;
}
.tpl-aurora .wsite-hero-photo .wsite-date{
font-family:'Inter', sans-serif; font-weight:500;
font-size:12px; letter-spacing:.32em; text-transform:uppercase;
color:rgba(255,255,255,.92); margin-top:24px;
background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(12px);
padding:10px 22px; border-radius:100px; gap:12px;
}
.tpl-aurora .wsite-hero-photo .wsite-date .ico-inline{ width:13px; height:13px; color:var(--au-peach); }
.tpl-aurora .wsite-hero-photo .wsite-countdown{ gap:14px; margin-top:40px; }
.tpl-aurora .wsite-hero-photo .wsite-countdown div{
background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(20px);
border-radius:18px; padding:20px 18px; min-width:88px;
box-shadow:0 8px 32px rgba(176,123,172,.2);
}
.tpl-aurora .wsite-hero-photo .wsite-countdown strong{
font-family:'Playfair Display', serif; font-weight:400;
font-size:2.4rem; color:#fff; line-height:1;
background:linear-gradient(135deg, #fff 0%, var(--au-peach) 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-aurora .wsite-hero-photo .wsite-countdown span{
font-size:10px; letter-spacing:.32em; text-transform:uppercase;
color:rgba(255,255,255,.75); font-family:'Inter', sans-serif;
}
.tpl-aurora .wsite-hero-content .btn{
margin-top:40px;
background:linear-gradient(135deg, var(--au-lav), var(--au-peach));
color:#fff; border:none; border-radius:100px;
padding:16px 36px; letter-spacing:.18em; font-size:11px; text-transform:uppercase;
font-family:'Inter', sans-serif; font-weight:600;
box-shadow:0 12px 40px rgba(176,123,172,.45);
transition:.4s ease;
}
.tpl-aurora .wsite-hero-content .btn:hover{ transform:translateY(-3px); box-shadow:0 20px 50px rgba(176,123,172,.6); }
/* ---------- NAV ---------- */
.tpl-aurora .wsite-nav{
background:rgba(255,244,241,.85); backdrop-filter:blur(24px);
border-bottom:1px solid rgba(176,123,172,.15); padding:18px 24px; gap:36px;
}
.tpl-aurora .wsite-nav a{
font-family:'Inter', sans-serif; font-weight:500;
font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--au-ink-2);
}
.tpl-aurora .wsite-nav a [data-lucide]{ width:14px; height:14px; color:var(--au-lav); }
.tpl-aurora .wsite-nav a:hover{ color:var(--au-lav); }
/* ---------- SECTIONS ---------- */
.tpl-aurora .wsite-section{ padding:140px 32px; max-width:1100px; position:relative; z-index:1; }
.tpl-aurora .wsite-section .section-tag{
display:inline-flex; align-items:center; gap:14px;
font-family:'Inter', sans-serif; font-weight:600;
font-size:11px; letter-spacing:.42em; text-transform:uppercase;
background:linear-gradient(135deg, var(--au-lav), var(--au-peach));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
padding:0;
}
.tpl-aurora .wsite-section .section-tag::before,
.tpl-aurora .wsite-section .section-tag::after{
content:''; width:42px; height:1px; position:static;
background:linear-gradient(90deg, var(--au-lav), var(--au-peach));
}
.tpl-aurora .wsite-section h2{
font-family:'Playfair Display', serif; font-weight:400; font-style:italic;
font-size:clamp(2.6rem, 5.5vw, 4.2rem); line-height:1.1; letter-spacing:-.005em;
color:var(--au-ink); margin:20px 0 28px;
}
.tpl-aurora .wsite-section h2::after{
content:''; display:block; width:80px; height:3px; margin:24px auto 0;
background:linear-gradient(90deg, var(--au-lav), var(--au-peach)); border-radius:100px;
}
.tpl-aurora .wsite-section .wsite-lead{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
color:var(--au-ink-2); font-size:1.25rem; line-height:1.6;
max-width:580px; margin:0 auto 36px;
}
/* ---------- STORY ---------- */
.tpl-aurora .wsite-story{ background:linear-gradient(180deg, var(--au-cream) 0%, var(--au-mist) 100%); position:relative; overflow:hidden; }
.tpl-aurora .wsite-story-grid{ gap:80px; align-items:center; position:relative; z-index:1; }
.tpl-aurora .wsite-story-img{
border-radius:24px; aspect-ratio:4/5;
box-shadow:0 40px 80px -25px rgba(176,123,172,.45);
position:relative;
}
.tpl-aurora .wsite-story-img::before{
content:''; position:absolute; inset:-20px; border-radius:32px;
background:linear-gradient(135deg, var(--au-lav), var(--au-peach));
filter:blur(40px); opacity:.4; z-index:-1;
}
.tpl-aurora .wsite-story-text{ text-align:left; }
.tpl-aurora .wsite-story-text .section-tag::before{ display:none; }
.tpl-aurora .wsite-story-text h2{ text-align:left; }
.tpl-aurora .wsite-story-text h2::after{ margin:24px 0 0; }
.tpl-aurora .wsite-story-text p{
font-family:'Inter', sans-serif; font-weight:400;
color:var(--au-ink-2); font-size:1.05rem; line-height:1.85;
margin-top:32px;
}
.tpl-aurora .wsite-story-text p::first-letter{
font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
font-size:4rem; float:left; line-height:.85; padding:8px 14px 0 0;
background:linear-gradient(135deg, var(--au-lav), var(--au-peach));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-aurora .wsite-story-mark{ margin-top:36px; }
.tpl-aurora .wsite-story-mark [data-lucide]{ color:var(--au-lav); fill:var(--au-lav); width:24px; height:24px; }
/* ---------- LOCATIONS ---------- */
.tpl-aurora .wsite-locations{
background:linear-gradient(135deg, var(--au-mist) 0%, var(--au-cream-2) 100%) !important;
padding:140px 32px; position:relative; overflow:hidden;
}
.tpl-aurora .wsite-locations-grid{ gap:32px; margin-top:24px !important; }
.tpl-aurora .loc-card{
background:rgba(255,255,255,.6); backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.7); border-radius:24px;
padding:48px 36px; box-shadow:0 24px 60px -20px rgba(176,123,172,.3);
transition:.5s ease; text-align:center;
}
.tpl-aurora .loc-card:hover{
transform:translateY(-6px); box-shadow:0 36px 80px -20px rgba(176,123,172,.45);
background:rgba(255,255,255,.8);
}
.tpl-aurora .loc-icon{
background:linear-gradient(135deg, var(--au-lav), var(--au-peach));
border:none; width:72px; height:72px; margin:0 auto 22px;
box-shadow:0 12px 32px rgba(176,123,172,.4);
}
.tpl-aurora .loc-icon [data-lucide]{ color:#fff; width:30px; height:30px; }
.tpl-aurora .loc-card h3{
font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
font-size:1.6rem; color:var(--au-ink); margin:0;
}
.tpl-aurora .loc-card p{ font-family:'Inter', sans-serif; font-size:1rem; color:var(--au-ink-2); margin-top:8px; }
.tpl-aurora .loc-card small{
display:inline-flex; gap:6px; align-items:center; justify-content:center;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--au-ink-3); margin-top:14px;
}
.tpl-aurora .loc-card small .ico-inline{ color:var(--au-lav); }
/* ---------- GIFTS ---------- */
.tpl-aurora #gifts{ background:var(--au-cream); position:relative; }
.tpl-aurora .gift-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:32px; }
.tpl-aurora .gift-card{
background:rgba(255,255,255,.7); backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.8); border-radius:20px;
box-shadow:0 18px 50px -20px rgba(176,123,172,.25);
transition:.5s ease; overflow:hidden;
}
.tpl-aurora .gift-card:hover{ transform:translateY(-6px); box-shadow:0 30px 70px -20px rgba(176,123,172,.4); }
.tpl-aurora .gift-cover{
background:linear-gradient(135deg, var(--au-lav) 0%, var(--au-peach) 100%);
aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
color:#fff; border:none;
}
.tpl-aurora .gift-cover [data-lucide]{ width:54px; height:54px; stroke-width:1.2; }
.tpl-aurora .gift-tag{
background:rgba(255,255,255,.95); color:var(--au-lav-2); border-radius:100px;
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.18em;
text-transform:uppercase; padding:5px 12px; font-weight:600;
}
.tpl-aurora .gift-tag [data-lucide]{ color:var(--au-lav); }
.tpl-aurora .gift-info{ padding:28px 24px; text-align:center; }
.tpl-aurora .gift-info h4{
font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
font-size:1.35rem; color:var(--au-ink); margin:0;
}
.tpl-aurora .gift-price{
font-family:'Playfair Display', serif; font-weight:500; font-size:1.7rem; margin-top:8px;
background:linear-gradient(135deg, var(--au-lav), var(--au-peach));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-aurora .gift-info small{
display:inline-flex; align-items:center; gap:5px; margin-top:8px; color:var(--au-ink-3);
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
/* ---------- MESSAGES ---------- */
.tpl-aurora .wsite-messages{
background:linear-gradient(180deg, var(--au-mist) 0%, var(--au-cream) 100%) !important;
padding:140px 32px;
}
.tpl-aurora .wsite-messages .form-card{
background:rgba(255,255,255,.7) !important; backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.8); border-radius:24px;
padding:48px 40px; box-shadow:0 24px 60px -20px rgba(176,123,172,.3);
}
.tpl-aurora .wsite-messages .form-input,
.tpl-aurora .wsite-messages .form-textarea{
background:rgba(255,255,255,.6); border:1px solid rgba(176,123,172,.2); border-radius:14px;
font-family:'Inter', sans-serif; font-size:1rem; padding:14px 16px;
}
.tpl-aurora .wsite-messages .form-input:focus,
.tpl-aurora .wsite-messages .form-textarea:focus{
border-color:var(--au-lav); box-shadow:0 0 0 4px rgba(176,123,172,.15); outline:none; background:#fff;
}
.tpl-aurora .wsite-messages .btn-primary{
background:linear-gradient(135deg, var(--au-lav), var(--au-peach));
color:#fff; border:none; border-radius:100px;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
padding:18px; font-weight:600; box-shadow:0 12px 32px rgba(176,123,172,.4);
}
.tpl-aurora .wsite-messages .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(176,123,172,.5); }
.tpl-aurora .wsite-msg-grid{ margin-top:64px !important; gap:28px; }
.tpl-aurora .msg-card{
background:rgba(255,255,255,.7); backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.8); border-radius:20px;
padding:36px 32px; box-shadow:0 18px 40px -20px rgba(176,123,172,.25);
transition:.5s ease;
}
.tpl-aurora .msg-card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -20px rgba(176,123,172,.4); }
.tpl-aurora .msg-quote{
width:30px; height:30px; opacity:.5;
color:var(--au-lav);
}
.tpl-aurora .msg-card p{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:1.15rem; line-height:1.7; color:var(--au-ink-2); margin:0 0 18px;
}
.tpl-aurora .msg-card strong{
font-family:'Inter', sans-serif; font-weight:600; font-size:11px;
letter-spacing:.32em; text-transform:uppercase;
background:linear-gradient(135deg, var(--au-lav), var(--au-peach));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
display:inline-block; padding-top:14px; border-top:1px solid rgba(176,123,172,.2);
}
/* ---------- CTA FINAL ---------- */
.tpl-aurora .cta-final{ padding:160px 32px; position:relative; overflow:hidden; }
.tpl-aurora .cta-final .cta-bg{ filter:brightness(.5) saturate(.85); }
.tpl-aurora .cta-final::before{
content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
background:
radial-gradient(ellipse at 30% 30%, rgba(176,123,172,.6), transparent 55%),
radial-gradient(ellipse at 70% 70%, rgba(244,181,161,.55), transparent 55%);
}
.tpl-aurora .cta-final-inner{ color:#fff; position:relative; z-index:3; }
.tpl-aurora .cta-final h2{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:clamp(2.6rem, 6vw, 4.6rem); margin:24px 0;
}
.tpl-aurora .cta-final h2 em{
background:linear-gradient(135deg, #fff, var(--au-peach));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-aurora .cta-final .btn-accent{
background:linear-gradient(135deg, var(--au-lav), var(--au-peach));
color:#fff; border:none; border-radius:100px;
font-family:'Inter', sans-serif; font-size:12px; letter-spacing:.28em; text-transform:uppercase;
padding:18px 40px; font-weight:600; box-shadow:0 16px 50px rgba(176,123,172,.5);
}
.tpl-aurora .cta-final .btn-accent:hover{ transform:translateY(-3px); box-shadow:0 24px 60px rgba(176,123,172,.65); }
@media (max-width: 768px){
.tpl-aurora .wsite-section,
.tpl-aurora .wsite-locations,
.tpl-aurora .wsite-messages{ padding:80px 24px; }
.tpl-aurora .wsite-hero-photo h1{ font-size:3.4rem; }
.tpl-aurora .wsite-story-grid{ gap:48px; }
.tpl-aurora .cta-final{ padding:96px 24px; }
}
/* ============================================================
TEMPLATE 5 — DOURADO · Luxo black + gold
Conceito: Cinzel uppercase, fundos escuros, foil dourado
============================================================ */
.tpl-dourado{
--d-gold:#D4AF37; --d-gold-2:#E8C766; --d-gold-3:#A88828; --d-gold-soft:#5A4A1F;
--d-black:#0A0907; --d-black-2:#15120D; --d-black-3:#1F1B14;
--d-cream:#F4E9C8;
background:var(--d-black); color:var(--d-cream);
font-family:'Cinzel', 'Playfair Display', serif;
}
.tpl-dourado a{ color:var(--d-gold); }
/* Subtle gold grain */
.tpl-dourado::before{
content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.06;
background-image:radial-gradient(rgba(212,175,55,.4) 1px, transparent 1px);
background-size:4px 4px;
}
/* ---------- HERO ---------- */
.tpl-dourado .wsite-hero-photo{ background:var(--d-black); }
.tpl-dourado .wsite-hero-photo::before{ filter:brightness(.5) saturate(.7) contrast(1.1); transform:scale(1.05); }
.tpl-dourado .wsite-hero-overlay{
background:
radial-gradient(ellipse at center, rgba(10,9,7,.55) 0%, rgba(10,9,7,.92) 100%),
linear-gradient(180deg, rgba(10,9,7,.4) 0%, rgba(10,9,7,.85) 100%);
}
.tpl-dourado .wsite-hero-photo .wsite-hero-content{ max-width:820px; padding:80px 40px; position:relative; z-index:3; }
/* Gold double frame */
.tpl-dourado .wsite-hero-photo .wsite-hero-content::before{
content:''; position:absolute; inset:24px;
border:1px solid var(--d-gold); pointer-events:none;
box-shadow:inset 0 0 0 1px var(--d-black);
}
.tpl-dourado .wsite-hero-photo .wsite-hero-content::after{
content:''; position:absolute; inset:32px;
border:1px solid rgba(212,175,55,.4); pointer-events:none;
}
.tpl-dourado .wsite-hero-photo .wsite-eyebrow{
background:transparent; border:none; padding:0;
font-family:'Cinzel', serif; font-weight:500;
font-size:11px; letter-spacing:.55em; text-transform:uppercase;
color:var(--d-gold-2); gap:14px; position:relative;
}
.tpl-dourado .wsite-hero-photo .wsite-eyebrow::before,
.tpl-dourado .wsite-hero-photo .wsite-eyebrow::after{
content:''; width:38px; height:1px; background:var(--d-gold);
}
.tpl-dourado .wsite-hero-photo .wsite-eyebrow [data-lucide]{ display:none; }
.tpl-dourado .wsite-hero-photo h1{
font-family:'Cinzel', serif; font-weight:500; text-transform:uppercase;
font-size:clamp(2.6rem, 7vw, 5rem); line-height:1.05; letter-spacing:.06em;
margin:36px 0; gap:8px;
color:#fff;
text-shadow:0 4px 30px rgba(212,175,55,.35);
}
.tpl-dourado .wsite-hero-photo h1 em{
font-style:normal; font-weight:500;
background:linear-gradient(180deg, #FFE9A8 0%, var(--d-gold) 50%, var(--d-gold-3) 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-dourado .wsite-hero-photo h1 .amp{
font-family:'Playfair Display', serif; font-style:italic; font-weight:300;
font-size:1.2em; line-height:1; margin:8px 0; text-transform:none; letter-spacing:0;
color:var(--d-gold-2); text-shadow:0 0 20px rgba(212,175,55,.6);
}
.tpl-dourado .wsite-hero-photo .wsite-date{
font-family:'Cinzel', serif; font-weight:400;
font-size:11px; letter-spacing:.45em; text-transform:uppercase;
color:var(--d-gold-2); margin-top:24px;
padding:12px 22px; border-top:1px solid var(--d-gold); border-bottom:1px solid var(--d-gold);
display:inline-flex; gap:14px;
}
.tpl-dourado .wsite-hero-photo .wsite-date .ico-inline{ width:13px; height:13px; color:var(--d-gold); }
.tpl-dourado .wsite-hero-photo .wsite-countdown{ gap:0; margin-top:48px; justify-content:center; }
.tpl-dourado .wsite-hero-photo .wsite-countdown div{
background:transparent; border:none; padding:8px 32px; min-width:auto; position:relative;
}
.tpl-dourado .wsite-hero-photo .wsite-countdown div + div::before{
content:''; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--d-gold);
}
.tpl-dourado .wsite-hero-photo .wsite-countdown strong{
font-family:'Cinzel', serif; font-weight:500; font-size:3rem; line-height:1;
background:linear-gradient(180deg, #FFE9A8 0%, var(--d-gold) 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-dourado .wsite-hero-photo .wsite-countdown span{
font-family:'Cinzel', serif; font-weight:400; font-size:9px; letter-spacing:.45em; text-transform:uppercase;
color:var(--d-gold-2); margin-top:8px;
}
.tpl-dourado .wsite-hero-content .btn{
margin-top:40px; background:transparent; color:var(--d-gold);
border:1px solid var(--d-gold); border-radius:0;
padding:16px 36px; letter-spacing:.42em; font-size:11px; text-transform:uppercase;
font-family:'Cinzel', serif; font-weight:500;
transition:.5s ease; position:relative;
}
.tpl-dourado .wsite-hero-content .btn::before{
content:''; position:absolute; inset:3px; border:1px solid rgba(212,175,55,.35); pointer-events:none;
}
.tpl-dourado .wsite-hero-content .btn:hover{ background:var(--d-gold); color:var(--d-black); }
.tpl-dourado .wsite-hero-content .btn .ico-inline{ display:none; }
.tpl-dourado .wsite-hero-scroll{ color:var(--d-gold); }
/* ---------- NAV ---------- */
.tpl-dourado .wsite-nav{
background:rgba(10,9,7,.95); backdrop-filter:blur(16px);
border-bottom:1px solid var(--d-gold-soft); padding:20px 24px; gap:40px;
}
.tpl-dourado .wsite-nav a{
font-family:'Cinzel', serif; font-weight:400;
font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:var(--d-gold-2);
}
.tpl-dourado .wsite-nav a [data-lucide]{ display:none; }
.tpl-dourado .wsite-nav a:hover{ color:var(--d-gold); }
/* ---------- SECTIONS ---------- */
.tpl-dourado .wsite-section{
padding:140px 32px; max-width:1100px; position:relative; z-index:1;
}
.tpl-dourado .wsite-section .section-tag{
display:inline-flex; align-items:center; gap:14px;
font-family:'Cinzel', serif; font-weight:500;
font-size:11px; letter-spacing:.55em; text-transform:uppercase;
color:var(--d-gold); background:none; padding:0;
}
.tpl-dourado .wsite-section .section-tag::before,
.tpl-dourado .wsite-section .section-tag::after{
content:''; width:46px; height:1px; background:var(--d-gold); position:static;
}
.tpl-dourado .wsite-section h2{
font-family:'Cinzel', serif; font-style:normal; font-weight:500; text-transform:uppercase;
font-size:clamp(2rem, 4.5vw, 3.4rem); line-height:1.15; letter-spacing:.04em;
color:#fff; margin:24px 0 28px;
}
.tpl-dourado .wsite-section h2::after{
content:''; display:block; width:14px; height:14px; margin:28px auto 0;
background:var(--d-gold); transform:rotate(45deg);
box-shadow:-22px 0 0 -4px var(--d-gold), 22px 0 0 -4px var(--d-gold);
}
.tpl-dourado .wsite-section .wsite-lead{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
color:var(--d-cream); font-size:1.2rem; line-height:1.6; opacity:.85;
max-width:580px; margin:0 auto 36px;
}
/* ---------- STORY ---------- */
.tpl-dourado .wsite-story{ background:var(--d-black-2); }
.tpl-dourado .wsite-story-grid{ gap:80px; align-items:center; }
.tpl-dourado .wsite-story-img{
border-radius:0; aspect-ratio:4/5;
box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
position:relative; filter:saturate(.8) brightness(.95);
}
.tpl-dourado .wsite-story-img::before,
.tpl-dourado .wsite-story-img::after{
content:''; position:absolute; width:48px; height:48px; border:1px solid var(--d-gold); pointer-events:none;
}
.tpl-dourado .wsite-story-img::before{ top:-14px; left:-14px; border-right:none; border-bottom:none; }
.tpl-dourado .wsite-story-img::after{ bottom:-14px; right:-14px; border-left:none; border-top:none; }
.tpl-dourado .wsite-story-text{ text-align:left; }
.tpl-dourado .wsite-story-text .section-tag::before{ display:none; }
.tpl-dourado .wsite-story-text h2{ text-align:left; }
.tpl-dourado .wsite-story-text h2::after{ margin:24px 0 0; box-shadow:22px 0 0 -4px var(--d-gold); }
.tpl-dourado .wsite-story-text p{
font-family:'Playfair Display', serif; font-weight:400;
color:var(--d-cream); font-size:1.1rem; line-height:1.85; opacity:.85;
margin-top:32px;
}
.tpl-dourado .wsite-story-text p::first-letter{
font-family:'Cinzel', serif; font-weight:500; text-transform:uppercase;
font-size:4rem; float:left; line-height:.9; padding:6px 16px 0 0;
background:linear-gradient(180deg, #FFE9A8, var(--d-gold-3));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-dourado .wsite-story-mark{ margin-top:36px; }
.tpl-dourado .wsite-story-mark::after{ content:''; flex:1; height:1px; background:var(--d-gold); opacity:.5; }
.tpl-dourado .wsite-story-mark [data-lucide]{ color:var(--d-gold); fill:var(--d-gold); }
/* ---------- LOCATIONS ---------- */
.tpl-dourado .wsite-locations{ background:var(--d-black-3) !important; padding:140px 32px; position:relative; }
.tpl-dourado .wsite-locations::before{
content:''; position:absolute; left:50%; top:64px; transform:translateX(-50%) rotate(45deg);
width:10px; height:10px; background:var(--d-gold);
}
.tpl-dourado .wsite-locations-grid{ gap:32px; margin-top:24px !important; }
.tpl-dourado .loc-card{
background:var(--d-black-2); border:1px solid var(--d-gold-soft); border-radius:0;
padding:56px 40px; position:relative; transition:.5s ease; text-align:center;
box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.tpl-dourado .loc-card::before{
content:''; position:absolute; inset:14px; border:1px solid rgba(212,175,55,.2); pointer-events:none;
}
.tpl-dourado .loc-card:hover{ border-color:var(--d-gold); transform:translateY(-6px); }
.tpl-dourado .loc-card:hover::before{ border-color:var(--d-gold); }
.tpl-dourado .loc-icon{
background:transparent; border:1px solid var(--d-gold); border-radius:50%;
width:80px; height:80px; margin:0 auto 24px; position:relative;
}
.tpl-dourado .loc-icon [data-lucide]{ color:var(--d-gold); width:30px; height:30px; stroke-width:1.4; }
.tpl-dourado .loc-card h3{
font-family:'Cinzel', serif; font-style:normal; font-weight:500; text-transform:uppercase;
font-size:1.1rem; letter-spacing:.18em; color:var(--d-gold); margin:0;
}
.tpl-dourado .loc-card h3::after{
content:''; display:block; width:30px; height:1px; background:var(--d-gold); margin:14px auto;
}
.tpl-dourado .loc-card p{
font-family:'Playfair Display', serif; font-style:italic; font-size:1.2rem;
color:var(--d-cream); margin:0; line-height:1.4;
}
.tpl-dourado .loc-card small{
display:inline-flex; gap:6px; align-items:center; justify-content:center;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:rgba(244,233,200,.6); margin-top:14px;
}
.tpl-dourado .loc-card small .ico-inline{ color:var(--d-gold); width:13px; height:13px; }
/* ---------- GIFTS ---------- */
.tpl-dourado #gifts{ background:var(--d-black); }
.tpl-dourado .gift-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:32px; }
.tpl-dourado .gift-card{
background:var(--d-black-2); border:1px solid var(--d-gold-soft); border-radius:0;
box-shadow:0 24px 50px -20px rgba(0,0,0,.6); transition:.5s ease; overflow:hidden; position:relative;
}
.tpl-dourado .gift-card::before{
content:''; position:absolute; inset:10px; border:1px solid rgba(212,175,55,.2); pointer-events:none; z-index:2; transition:.4s ease;
}
.tpl-dourado .gift-card:hover{ border-color:var(--d-gold); transform:translateY(-6px); }
.tpl-dourado .gift-card:hover::before{ inset:6px; border-color:var(--d-gold); }
.tpl-dourado .gift-cover{
background:linear-gradient(135deg, #2A220F 0%, #5A4A1F 50%, var(--d-gold) 100%);
aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
color:var(--d-black); border:none;
}
.tpl-dourado .gift-cover [data-lucide]{ width:56px; height:56px; stroke-width:1.2; }
.tpl-dourado .gift-tag{
background:var(--d-gold); color:var(--d-black); border-radius:0;
font-family:'Cinzel', serif; font-size:10px; letter-spacing:.32em; text-transform:uppercase;
padding:5px 12px; font-weight:500;
}
.tpl-dourado .gift-tag [data-lucide]{ color:var(--d-black); }
.tpl-dourado .gift-info{ padding:28px 24px; text-align:center; }
.tpl-dourado .gift-info h4{
font-family:'Cinzel', serif; font-weight:500; text-transform:uppercase; letter-spacing:.08em;
font-size:1rem; color:var(--d-gold); margin:0;
}
.tpl-dourado .gift-info h4::after{
content:''; display:block; width:24px; height:1px; background:var(--d-gold); margin:12px auto;
}
.tpl-dourado .gift-price{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
color:var(--d-gold-2); font-size:1.7rem;
}
.tpl-dourado .gift-info small{
display:block; margin-top:10px; color:rgba(244,233,200,.6);
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.28em; text-transform:uppercase;
}
/* ---------- MESSAGES ---------- */
.tpl-dourado .wsite-messages{ background:var(--d-black-2) !important; padding:140px 32px; position:relative; }
.tpl-dourado .wsite-messages::before{
content:''; position:absolute; left:50%; top:64px; transform:translateX(-50%) rotate(45deg);
width:10px; height:10px; background:var(--d-gold);
}
.tpl-dourado .wsite-messages .form-card{
background:var(--d-black) !important; border:1px solid var(--d-gold-soft); border-radius:0;
padding:48px 40px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); position:relative;
}
.tpl-dourado .wsite-messages .form-card::before{
content:''; position:absolute; inset:10px; border:1px solid rgba(212,175,55,.2); pointer-events:none;
}
.tpl-dourado .wsite-messages .form-label{
font-family:'Cinzel', serif; font-size:10px; letter-spacing:.42em; text-transform:uppercase;
color:var(--d-gold); font-weight:500;
}
.tpl-dourado .wsite-messages .form-label [data-lucide]{ color:var(--d-gold); }
.tpl-dourado .wsite-messages .form-input,
.tpl-dourado .wsite-messages .form-textarea{
background:transparent; border:none; border-bottom:1px solid var(--d-gold-soft); border-radius:0;
font-family:'Playfair Display', serif; font-size:1.1rem; color:var(--d-cream); padding:12px 0;
}
.tpl-dourado .wsite-messages .form-input:focus,
.tpl-dourado .wsite-messages .form-textarea:focus{
border-color:var(--d-gold); box-shadow:none; outline:none;
}
.tpl-dourado .wsite-messages .btn-primary{
background:transparent; color:var(--d-gold); border:1px solid var(--d-gold); border-radius:0;
font-family:'Cinzel', serif; font-size:11px; letter-spacing:.42em; text-transform:uppercase;
padding:18px; font-weight:500; transition:.4s ease;
}
.tpl-dourado .wsite-messages .btn-primary:hover{ background:var(--d-gold); color:var(--d-black); }
.tpl-dourado .wsite-msg-grid{ margin-top:64px !important; gap:28px; }
.tpl-dourado .msg-card{
background:var(--d-black); border:1px solid var(--d-gold-soft); border-radius:0;
padding:48px 36px 32px; position:relative; transition:.5s ease; text-align:center;
}
.tpl-dourado .msg-card::before{
content:''; position:absolute; inset:10px; border:1px solid rgba(212,175,55,.2); pointer-events:none;
}
.tpl-dourado .msg-card:hover{ border-color:var(--d-gold); transform:translateY(-4px); }
.tpl-dourado .msg-quote{ display:none; }
.tpl-dourado .msg-card p{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:1.18rem; line-height:1.7; color:var(--d-cream); margin:0 0 24px; opacity:.9;
}
.tpl-dourado .msg-card p::before{
content:'“'; font-family:'Playfair Display', serif; font-size:4rem; color:var(--d-gold);
display:block; line-height:.6; margin-bottom:6px; opacity:.7;
}
.tpl-dourado .msg-card strong{
font-family:'Cinzel', serif; font-weight:500; font-size:10px;
letter-spacing:.42em; text-transform:uppercase; color:var(--d-gold);
display:inline-block; padding-top:18px; position:relative;
}
.tpl-dourado .msg-card strong::before{
content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
width:30px; height:1px; background:var(--d-gold);
}
/* ---------- CTA FINAL ---------- */
.tpl-dourado .cta-final{ padding:160px 32px; position:relative; background:var(--d-black); }
.tpl-dourado .cta-final .cta-bg{ filter:brightness(.35) saturate(.6); }
.tpl-dourado .cta-final::before{
content:''; position:absolute; inset:24px; border:1px solid var(--d-gold); pointer-events:none; z-index:2;
}
.tpl-dourado .cta-final::after{
content:''; position:absolute; inset:32px; border:1px solid rgba(212,175,55,.3); pointer-events:none; z-index:2;
}
.tpl-dourado .cta-final-inner{ color:#fff; position:relative; z-index:3; }
.tpl-dourado .cta-final .hero-eyebrow{
font-family:'Cinzel', serif; font-weight:500; font-size:10px;
letter-spacing:.55em; text-transform:uppercase; color:var(--d-gold);
display:inline-flex; gap:14px; align-items:center;
}
.tpl-dourado .cta-final .hero-eyebrow::before,
.tpl-dourado .cta-final .hero-eyebrow::after{ content:''; width:32px; height:1px; background:var(--d-gold); }
.tpl-dourado .cta-final .hero-eyebrow [data-lucide]{ display:none; }
.tpl-dourado .cta-final h2{
font-family:'Cinzel', serif; font-style:normal; font-weight:500; text-transform:uppercase;
font-size:clamp(2rem, 5vw, 3.6rem); line-height:1.15; letter-spacing:.05em; margin:28px 0;
}
.tpl-dourado .cta-final h2 em{
font-style:normal;
background:linear-gradient(180deg, #FFE9A8, var(--d-gold));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-dourado .cta-final p{ font-family:'Playfair Display', serif; font-style:italic; color:var(--d-cream); opacity:.85; }
.tpl-dourado .cta-final .btn-accent{
background:transparent; color:var(--d-gold); border:1px solid var(--d-gold); border-radius:0;
font-family:'Cinzel', serif; font-size:11px; letter-spacing:.42em; text-transform:uppercase;
padding:18px 40px; font-weight:500; position:relative; transition:.5s ease;
}
.tpl-dourado .cta-final .btn-accent::before{
content:''; position:absolute; inset:3px; border:1px solid rgba(212,175,55,.3); pointer-events:none;
}
.tpl-dourado .cta-final .btn-accent:hover{ background:var(--d-gold); color:var(--d-black); }
@media (max-width: 768px){
.tpl-dourado .wsite-section,
.tpl-dourado .wsite-locations,
.tpl-dourado .wsite-messages{ padding:80px 24px; }
.tpl-dourado .wsite-hero-photo h1{ font-size:2.4rem; letter-spacing:.04em; }
.tpl-dourado .wsite-hero-photo .wsite-countdown div{ padding:8px 18px; }
.tpl-dourado .wsite-hero-photo .wsite-countdown strong{ font-size:2.2rem; }
.tpl-dourado .wsite-story-grid{ gap:48px; }
.tpl-dourado .cta-final{ padding:96px 24px; }
}
/* ============================================================
TEMPLATE 6 — PRAIA · Casamento na praia, azul + areia
Conceito: ondas, areia, light & airy, watercolor azul
============================================================ */
.tpl-praia{
--p-blue:#3A8CA8; --p-blue-2:#266781; --p-blue-3:#7AB5C9; --p-blue-soft:#C7E0E8;
--p-sand:#FAF6EE; --p-sand-2:#F0E6D2; --p-coral:#E8A78D;
--p-ink:#1F3A45; --p-ink-2:#3D5A66; --p-ink-3:#7A8E96;
background:var(--p-sand); color:var(--p-ink);
font-family:'Playfair Display', Georgia, serif;
--p-wave:url("data:image/svg+xml;utf8,");
}
.tpl-praia a{ color:var(--p-blue); }
/* Soft watercolor blobs */
.tpl-praia::before{
content:''; position:fixed; top:-15%; right:-10%; width:50%; height:60%; z-index:0; pointer-events:none;
background:radial-gradient(ellipse, rgba(122,181,201,.25), transparent 65%);
filter:blur(50px);
}
.tpl-praia::after{
content:''; position:fixed; bottom:-15%; left:-10%; width:55%; height:60%; z-index:0; pointer-events:none;
background:radial-gradient(ellipse, rgba(232,167,141,.18), transparent 65%);
filter:blur(50px);
}
/* ---------- HERO ---------- */
.tpl-praia .wsite-hero-photo::before{ filter:saturate(.95) brightness(.92) hue-rotate(-3deg); transform:scale(1.05); }
.tpl-praia .wsite-hero-overlay{
background:
linear-gradient(180deg, rgba(31,58,69,.15) 0%, rgba(31,58,69,.45) 60%, rgba(38,103,129,.6) 100%);
}
.tpl-praia .wsite-hero-photo .wsite-hero-content{ max-width:840px; padding:64px 32px; }
.tpl-praia .wsite-hero-photo .wsite-eyebrow{
background:rgba(255,255,255,.18); border:1px solid rgba(199,224,232,.5); backdrop-filter:blur(12px);
color:#fff; font-family:'Inter', sans-serif; font-weight:500;
font-size:11px; letter-spacing:.4em; text-transform:uppercase;
padding:8px 22px; border-radius:100px;
}
.tpl-praia .wsite-hero-photo .wsite-eyebrow [data-lucide]{ color:var(--p-blue-soft); fill:var(--p-blue-soft); }
.tpl-praia .wsite-hero-photo h1{
font-family:'Playfair Display', serif; font-weight:400;
font-size:clamp(3.4rem, 9vw, 7rem); line-height:1; letter-spacing:.005em;
margin:32px 0; gap:6px; color:#fff;
text-shadow:0 8px 40px rgba(0,0,0,.45);
}
.tpl-praia .wsite-hero-photo h1 em{ font-style:italic; }
.tpl-praia .wsite-hero-photo h1 .amp{
font-family:'Playfair Display', serif; font-style:italic; font-weight:300;
font-size:.5em; color:var(--p-blue-soft); line-height:1; margin:-4px 0;
}
/* Wave under names */
.tpl-praia .wsite-hero-photo h1::after{
content:''; display:block; width:140px; height:24px; margin:18px auto 0;
background:var(--p-wave) center/contain no-repeat;
filter:brightness(0) invert(1) opacity(.7);
}
.tpl-praia .wsite-hero-photo .wsite-date{
font-family:'Inter', sans-serif; font-weight:500;
font-size:12px; letter-spacing:.32em; text-transform:uppercase;
color:#fff; margin-top:24px; gap:14px;
}
.tpl-praia .wsite-hero-photo .wsite-date .ico-inline{ width:13px; height:13px; color:var(--p-blue-soft); }
.tpl-praia .wsite-hero-photo .wsite-countdown{ gap:18px; margin-top:40px; }
.tpl-praia .wsite-hero-photo .wsite-countdown div{
background:rgba(255,255,255,.12); border:1px solid rgba(199,224,232,.35);
border-radius:18px; padding:18px 16px; min-width:88px; backdrop-filter:blur(14px);
}
.tpl-praia .wsite-hero-photo .wsite-countdown strong{
font-family:'Playfair Display', serif; font-weight:400; font-size:2.2rem; color:#fff;
}
.tpl-praia .wsite-hero-photo .wsite-countdown span{
font-size:10px; letter-spacing:.32em; text-transform:uppercase;
color:rgba(255,255,255,.85); font-family:'Inter', sans-serif;
}
.tpl-praia .wsite-hero-content .btn{
margin-top:40px; background:#fff; color:var(--p-blue-2);
border:none; border-radius:100px;
padding:16px 36px; letter-spacing:.18em; font-size:11px; text-transform:uppercase;
font-family:'Inter', sans-serif; font-weight:600;
transition:.4s ease; box-shadow:0 12px 30px rgba(0,0,0,.15);
}
.tpl-praia .wsite-hero-content .btn:hover{ background:var(--p-blue); color:#fff; transform:translateY(-2px); }
/* ---------- NAV ---------- */
.tpl-praia .wsite-nav{
background:rgba(250,246,238,.95); backdrop-filter:blur(16px);
border-bottom:1px solid var(--p-blue-soft); padding:18px 24px; gap:36px;
}
.tpl-praia .wsite-nav a{
font-family:'Inter', sans-serif; font-weight:500;
font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--p-ink-2);
}
.tpl-praia .wsite-nav a [data-lucide]{ width:14px; height:14px; color:var(--p-blue); }
.tpl-praia .wsite-nav a:hover{ color:var(--p-blue); }
/* ---------- SECTIONS ---------- */
.tpl-praia .wsite-section{
padding:130px 32px; max-width:1100px; position:relative; z-index:1;
}
.tpl-praia .wsite-section .section-tag{
display:inline-flex; align-items:center; gap:14px;
font-family:'Inter', sans-serif; font-weight:600;
font-size:11px; letter-spacing:.42em; text-transform:uppercase;
color:var(--p-blue); background:none; padding:0;
}
.tpl-praia .wsite-section .section-tag::before,
.tpl-praia .wsite-section .section-tag::after{
content:''; width:42px; height:1px; background:var(--p-blue-3); position:static;
}
.tpl-praia .wsite-section h2{
font-family:'Playfair Display', serif; font-weight:400; font-style:italic;
font-size:clamp(2.6rem, 5.5vw, 4rem); line-height:1.1;
color:var(--p-ink); margin:20px 0 28px;
}
/* Wave under h2 */
.tpl-praia .wsite-section h2::after{
content:''; display:block; width:160px; height:24px; margin:24px auto 0;
background:var(--p-wave) center/contain no-repeat; opacity:.7;
}
.tpl-praia .wsite-section .wsite-lead{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
color:var(--p-ink-2); font-size:1.25rem; line-height:1.6;
max-width:580px; margin:0 auto 36px;
}
/* ---------- STORY ---------- */
.tpl-praia .wsite-story{ background:#fff; position:relative; }
.tpl-praia .wsite-story-grid{ gap:80px; align-items:center; }
.tpl-praia .wsite-story-img{
border-radius:200px 200px 24px 24px; aspect-ratio:4/5;
box-shadow:0 30px 70px -25px rgba(31,58,69,.4); position:relative;
}
.tpl-praia .wsite-story-img::before{
content:''; position:absolute; inset:-14px; border-radius:200px 200px 24px 24px;
border:1px dashed var(--p-blue-3); pointer-events:none; opacity:.7;
}
.tpl-praia .wsite-story-text{ text-align:left; }
.tpl-praia .wsite-story-text .section-tag::before{ display:none; }
.tpl-praia .wsite-story-text h2{ text-align:left; }
.tpl-praia .wsite-story-text h2::after{ margin:24px 0 0; }
.tpl-praia .wsite-story-text p{
font-family:'Inter', sans-serif; font-weight:400;
color:var(--p-ink-2); font-size:1.05rem; line-height:1.85; margin-top:32px;
}
.tpl-praia .wsite-story-text p::first-letter{
font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
font-size:4rem; float:left; line-height:.85; padding:8px 14px 0 0; color:var(--p-blue);
}
.tpl-praia .wsite-story-mark{
margin-top:36px; display:flex; align-items:center; gap:16px;
font-family:'Playfair Display', serif; font-style:italic; color:var(--p-blue); font-size:1.3rem;
}
.tpl-praia .wsite-story-mark::before{ content:'Onde o mar nos abençoa'; }
.tpl-praia .wsite-story-mark [data-lucide]{ display:none; }
.tpl-praia .wsite-story-mark::after{ content:''; flex:1; height:24px; background:var(--p-wave) left center/auto 100% no-repeat; opacity:.5; }
/* ---------- LOCATIONS ---------- */
.tpl-praia .wsite-locations{ background:var(--p-sand-2) !important; padding:130px 32px; position:relative; overflow:hidden; }
.tpl-praia .wsite-locations::before{
content:''; position:absolute; top:48px; left:50%; transform:translateX(-50%);
width:180px; height:28px; background:var(--p-wave) center/contain no-repeat; opacity:.6;
}
.tpl-praia .wsite-locations-grid{ gap:32px; margin-top:24px !important; }
.tpl-praia .loc-card{
background:#fff; border:1px solid var(--p-blue-soft); border-radius:24px;
padding:56px 40px 48px; box-shadow:0 24px 50px -25px rgba(31,58,69,.25);
position:relative; transition:.5s ease; text-align:center; overflow:hidden;
}
.tpl-praia .loc-card::before{
content:''; position:absolute; bottom:0; left:0; right:0; height:60px;
background:var(--p-wave) center/cover; opacity:.08;
}
.tpl-praia .loc-card:hover{ transform:translateY(-6px); box-shadow:0 36px 70px -25px rgba(31,58,69,.35); }
.tpl-praia .loc-icon{
background:linear-gradient(135deg, var(--p-blue-soft), var(--p-sand-2));
border:1px solid var(--p-blue-3); border-radius:50%;
width:80px; height:80px; margin:0 auto 22px;
}
.tpl-praia .loc-icon [data-lucide]{ color:var(--p-blue-2); width:30px; height:30px; stroke-width:1.4; }
.tpl-praia .loc-card h3{
font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
font-size:1.7rem; color:var(--p-ink); margin:0;
}
.tpl-praia .loc-card h3::after{
content:''; display:block; width:50px; height:14px; margin:14px auto;
background:var(--p-wave) center/contain no-repeat; opacity:.6;
}
.tpl-praia .loc-card p{ font-family:'Playfair Display', serif; font-size:1.15rem; color:var(--p-ink-2); margin:0; line-height:1.5; }
.tpl-praia .loc-card small{
display:inline-flex; gap:6px; align-items:center; justify-content:center;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--p-ink-3); margin-top:14px;
}
.tpl-praia .loc-card small .ico-inline{ color:var(--p-blue); width:13px; height:13px; }
/* ---------- GIFTS ---------- */
.tpl-praia #gifts{ background:#fff; }
.tpl-praia .gift-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:32px; }
.tpl-praia .gift-card{
background:var(--p-sand); border:1px solid var(--p-blue-soft); border-radius:20px;
box-shadow:0 18px 40px -25px rgba(31,58,69,.25);
transition:.5s ease; overflow:hidden;
}
.tpl-praia .gift-card:hover{ transform:translateY(-6px); box-shadow:0 32px 60px -25px rgba(31,58,69,.35); border-color:var(--p-blue); }
.tpl-praia .gift-cover{
background:linear-gradient(135deg, var(--p-blue-3) 0%, var(--p-blue) 100%);
aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
color:#fff; border:none; position:relative;
}
.tpl-praia .gift-cover::before{
content:''; position:absolute; bottom:0; left:0; right:0; height:60%;
background:var(--p-wave) center/200% no-repeat; opacity:.25; mix-blend-mode:soft-light;
}
.tpl-praia .gift-cover [data-lucide]{ width:54px; height:54px; stroke-width:1.2; position:relative; }
.tpl-praia .gift-tag{
background:#fff; color:var(--p-blue-2); border-radius:100px;
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.18em;
text-transform:uppercase; padding:5px 12px; font-weight:600;
}
.tpl-praia .gift-tag [data-lucide]{ color:var(--p-blue); }
.tpl-praia .gift-info{ padding:28px 24px; text-align:center; }
.tpl-praia .gift-info h4{
font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
font-size:1.4rem; color:var(--p-ink); margin:0;
}
.tpl-praia .gift-price{
font-family:'Playfair Display', serif; font-weight:500;
color:var(--p-blue); font-size:1.7rem; margin-top:8px;
}
.tpl-praia .gift-info small{
display:inline-flex; align-items:center; gap:5px; margin-top:8px; color:var(--p-ink-3);
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
/* ---------- MESSAGES ---------- */
.tpl-praia .wsite-messages{ background:var(--p-sand-2) !important; padding:130px 32px; position:relative; overflow:hidden; }
.tpl-praia .wsite-messages::before{
content:''; position:absolute; top:48px; left:50%; transform:translateX(-50%);
width:180px; height:28px; background:var(--p-wave) center/contain no-repeat; opacity:.6;
}
.tpl-praia .wsite-messages .form-card{
background:#fff !important; border:1px solid var(--p-blue-soft); border-radius:24px;
padding:48px 40px; box-shadow:0 24px 50px -25px rgba(31,58,69,.25); max-width:640px;
}
.tpl-praia .wsite-messages .form-input,
.tpl-praia .wsite-messages .form-textarea{
background:var(--p-sand); border:1px solid var(--p-blue-soft); border-radius:12px;
font-family:'Playfair Display', serif; font-size:1.1rem; color:var(--p-ink); padding:14px 16px;
}
.tpl-praia .wsite-messages .form-input:focus,
.tpl-praia .wsite-messages .form-textarea:focus{
border-color:var(--p-blue); box-shadow:0 0 0 3px rgba(58,140,168,.15); outline:none;
}
.tpl-praia .wsite-messages .btn-primary{
background:var(--p-blue); color:#fff; border:none; border-radius:100px;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
padding:18px; font-weight:600; transition:.4s ease;
}
.tpl-praia .wsite-messages .btn-primary:hover{ background:var(--p-blue-2); transform:translateY(-2px); }
.tpl-praia .wsite-msg-grid{ margin-top:64px !important; gap:28px; }
.tpl-praia .msg-card{
background:#fff; border:1px solid var(--p-blue-soft); border-radius:20px;
padding:36px 32px; position:relative; transition:.5s ease;
box-shadow:0 18px 40px -25px rgba(31,58,69,.2);
}
.tpl-praia .msg-card::before{
content:''; position:absolute; top:-14px; left:32px; width:60px; height:14px;
background:var(--p-wave) center/contain no-repeat; opacity:.7;
}
.tpl-praia .msg-card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -25px rgba(31,58,69,.3); border-color:var(--p-blue-3); }
.tpl-praia .msg-quote{ color:var(--p-blue); opacity:.4; }
.tpl-praia .msg-card p{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:1.18rem; line-height:1.7; color:var(--p-ink-2); margin:0 0 18px;
}
.tpl-praia .msg-card strong{
font-family:'Inter', sans-serif; font-weight:600; font-size:11px;
letter-spacing:.32em; text-transform:uppercase; color:var(--p-blue);
display:inline-block; padding-top:14px; border-top:1px solid var(--p-blue-soft);
}
/* ---------- CTA FINAL ---------- */
.tpl-praia .cta-final{ padding:160px 32px; position:relative; overflow:hidden; }
.tpl-praia .cta-final .cta-bg{ filter:brightness(.55) saturate(.9) hue-rotate(-3deg); }
.tpl-praia .cta-final::before{
content:''; position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
width:240px; height:32px; background:var(--p-wave) center/contain no-repeat;
filter:brightness(0) invert(1) opacity(.55); z-index:2;
}
.tpl-praia .cta-final-inner{ color:#fff; position:relative; z-index:3; }
.tpl-praia .cta-final h2{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:clamp(2.6rem, 6vw, 4.4rem); line-height:1.15; margin:24px 0;
}
.tpl-praia .cta-final h2 em{ color:var(--p-blue-soft); }
.tpl-praia .cta-final .btn-accent{
background:#fff; color:var(--p-blue-2); border:none; border-radius:100px;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
padding:18px 40px; font-weight:600; transition:.4s ease; box-shadow:0 12px 32px rgba(0,0,0,.2);
}
.tpl-praia .cta-final .btn-accent:hover{ background:var(--p-blue); color:#fff; transform:translateY(-2px); }
@media (max-width: 768px){
.tpl-praia .wsite-section,
.tpl-praia .wsite-locations,
.tpl-praia .wsite-messages{ padding:80px 24px; }
.tpl-praia .wsite-hero-photo h1{ font-size:3.4rem; }
.tpl-praia .wsite-story-grid{ gap:48px; }
.tpl-praia .cta-final{ padding:96px 24px; }
}
/* ============================================================
TEMPLATE 7 — RÚSTICO · Madeira, kraft, country charm
Conceito: marrons quentes, kraft, twine, eucalipto + trigo
============================================================ */
.tpl-rustico{
--r-wood:#8B5A3C; --r-wood-2:#6B4226; --r-wood-3:#A87C5A; --r-wood-soft:#D4B89A;
--r-kraft:#F4ECE0; --r-kraft-2:#E8DCC4; --r-paper:#FBF4E5;
--r-cream:#FAF6EC; --r-rust:#C97D4A;
--r-ink:#2D1F12; --r-ink-2:#5C4730; --r-ink-3:#8B7355;
background:var(--r-kraft); color:var(--r-ink);
font-family:'Lora', Georgia, serif;
--r-wheat:url("data:image/svg+xml;utf8,");
}
.tpl-rustico a{ color:var(--r-wood); }
/* Subtle paper grain */
.tpl-rustico::before{
content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.08;
background-image:radial-gradient(rgba(139,90,60,.4) 1px, transparent 1px);
background-size:3px 3px;
}
/* ---------- HERO ---------- */
.tpl-rustico .wsite-hero-photo::before{ filter:saturate(.85) brightness(.9) sepia(.15); transform:scale(1.05); }
.tpl-rustico .wsite-hero-overlay{
background:
linear-gradient(180deg, rgba(45,31,18,.2) 0%, rgba(45,31,18,.55) 60%, rgba(107,66,38,.65) 100%);
}
.tpl-rustico .wsite-hero-photo .wsite-hero-content{ max-width:820px; padding:64px 32px; }
.tpl-rustico .wsite-hero-photo .wsite-eyebrow{
background:rgba(212,184,154,.18); border:1px solid rgba(212,184,154,.5); backdrop-filter:blur(10px);
color:#FAF6EC; font-family:'Lora', serif; font-style:italic; font-weight:500;
font-size:13px; letter-spacing:.18em;
padding:8px 22px; border-radius:0;
}
.tpl-rustico .wsite-hero-photo .wsite-eyebrow [data-lucide]{ color:var(--r-wood-soft); fill:var(--r-wood-soft); }
.tpl-rustico .wsite-hero-photo h1{
font-family:'Lora', Georgia, serif; font-weight:500; font-style:italic;
font-size:clamp(3.4rem, 8.5vw, 6.4rem); line-height:1; letter-spacing:-.01em;
margin:32px 0; gap:6px; color:#fff;
text-shadow:0 6px 30px rgba(0,0,0,.45);
}
.tpl-rustico .wsite-hero-photo h1 em{ font-style:italic; }
.tpl-rustico .wsite-hero-photo h1 .amp{
font-family:'Lora', serif; font-style:italic; font-weight:400;
font-size:.55em; line-height:1; margin:-2px 0;
color:var(--r-wood-soft);
}
/* Wheat ornament under names */
.tpl-rustico .wsite-hero-photo h1::after{
content:''; display:block; width:100px; height:24px; margin:18px auto 0;
background:var(--r-wheat) center/contain no-repeat;
filter:brightness(0) invert(1) opacity(.7);
}
.tpl-rustico .wsite-hero-photo .wsite-date{
font-family:'Lora', serif; font-style:italic; font-weight:500;
font-size:14px; letter-spacing:.08em; text-transform:none;
color:#FAF6EC; margin-top:24px; gap:14px;
padding:10px 22px; background:rgba(0,0,0,.2); border-radius:0;
border:1px solid rgba(212,184,154,.3); display:inline-flex;
}
.tpl-rustico .wsite-hero-photo .wsite-date .ico-inline{ width:13px; height:13px; color:var(--r-wood-soft); }
.tpl-rustico .wsite-hero-photo .wsite-countdown{ gap:0; margin-top:40px; justify-content:center; }
.tpl-rustico .wsite-hero-photo .wsite-countdown div{
background:transparent; border:none; padding:8px 28px; min-width:auto; position:relative;
}
.tpl-rustico .wsite-hero-photo .wsite-countdown div + div::before{
content:''; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:rgba(212,184,154,.4);
}
.tpl-rustico .wsite-hero-photo .wsite-countdown strong{
font-family:'Lora', serif; font-style:italic; font-weight:500;
font-size:2.6rem; color:#fff; line-height:1;
}
.tpl-rustico .wsite-hero-photo .wsite-countdown span{
font-family:'Lora', serif; font-style:italic; font-size:11px; letter-spacing:.05em;
color:var(--r-wood-soft); margin-top:8px;
}
.tpl-rustico .wsite-hero-content .btn{
margin-top:40px; background:var(--r-wood); color:#fff;
border:1px solid rgba(212,184,154,.6); border-radius:0;
padding:16px 36px; letter-spacing:.18em; font-size:11px; text-transform:uppercase;
font-family:'Lora', serif; font-weight:600;
transition:.4s ease; box-shadow:0 8px 24px rgba(0,0,0,.25);
position:relative;
}
.tpl-rustico .wsite-hero-content .btn::before{
content:''; position:absolute; inset:3px; border:1px dashed rgba(212,184,154,.5); pointer-events:none;
}
.tpl-rustico .wsite-hero-content .btn:hover{ background:var(--r-wood-2); }
/* ---------- NAV ---------- */
.tpl-rustico .wsite-nav{
background:rgba(244,236,224,.95); backdrop-filter:blur(16px);
border-bottom:1px dashed var(--r-wood-soft); padding:18px 24px; gap:36px;
}
.tpl-rustico .wsite-nav a{
font-family:'Lora', serif; font-style:italic; font-weight:500;
font-size:13px; letter-spacing:.05em; text-transform:none; color:var(--r-ink-2);
}
.tpl-rustico .wsite-nav a [data-lucide]{ width:14px; height:14px; color:var(--r-wood); }
.tpl-rustico .wsite-nav a:hover{ color:var(--r-wood); }
/* ---------- SECTIONS ---------- */
.tpl-rustico .wsite-section{ padding:130px 32px; max-width:1100px; position:relative; z-index:1; }
.tpl-rustico .wsite-section .section-tag{
display:inline-flex; align-items:center; gap:14px;
font-family:'Lora', serif; font-weight:600; font-style:italic;
font-size:14px; letter-spacing:.05em; text-transform:none;
color:var(--r-wood); background:none; padding:0;
}
.tpl-rustico .wsite-section .section-tag::before,
.tpl-rustico .wsite-section .section-tag::after{
content:''; width:42px; height:1px; background:var(--r-wood-3); position:static;
}
.tpl-rustico .wsite-section h2{
font-family:'Lora', serif; font-style:italic; font-weight:500;
font-size:clamp(2.4rem, 5vw, 3.8rem); line-height:1.15; letter-spacing:-.005em;
color:var(--r-ink); margin:18px 0 28px;
}
.tpl-rustico .wsite-section h2::after{
content:''; display:block; width:100px; height:22px; margin:24px auto 0;
background:var(--r-wheat) center/contain no-repeat; opacity:.6;
}
.tpl-rustico .wsite-section .wsite-lead{
font-family:'Lora', serif; font-style:italic; font-weight:400;
color:var(--r-ink-2); font-size:1.2rem; line-height:1.6;
max-width:580px; margin:0 auto 36px;
}
/* ---------- STORY ---------- */
.tpl-rustico .wsite-story{ background:var(--r-paper); position:relative; overflow:hidden; }
.tpl-rustico .wsite-story-grid{ gap:80px; align-items:center; }
.tpl-rustico .wsite-story-img{
border-radius:0; aspect-ratio:4/5;
box-shadow:0 30px 60px -25px rgba(45,31,18,.4);
position:relative; filter:sepia(.1) saturate(.95);
}
/* Wood frame around photo */
.tpl-rustico .wsite-story-img::before{
content:''; position:absolute; inset:-12px; border:8px solid var(--r-wood); pointer-events:none;
box-shadow:inset 0 0 0 2px var(--r-wood-2);
}
.tpl-rustico .wsite-story-img::after{
content:''; position:absolute; bottom:-30px; right:-20px; width:110px; height:30px;
background:var(--r-wheat) center/contain no-repeat; transform:rotate(15deg); opacity:.85;
}
.tpl-rustico .wsite-story-text{ text-align:left; }
.tpl-rustico .wsite-story-text .section-tag::before{ display:none; }
.tpl-rustico .wsite-story-text h2{ text-align:left; }
.tpl-rustico .wsite-story-text h2::after{ margin:24px 0 0; }
.tpl-rustico .wsite-story-text p{
font-family:'Lora', serif; font-weight:400;
color:var(--r-ink-2); font-size:1.1rem; line-height:1.85; margin-top:32px;
}
.tpl-rustico .wsite-story-text p::first-letter{
font-family:'Lora', serif; font-style:italic; font-weight:600;
font-size:4rem; float:left; line-height:.85; padding:8px 14px 0 0; color:var(--r-wood);
}
.tpl-rustico .wsite-story-mark{
margin-top:36px; display:flex; align-items:center; gap:16px;
font-family:'Lora', serif; font-style:italic; color:var(--r-wood); font-size:1.3rem;
}
.tpl-rustico .wsite-story-mark::before{ content:'No campo, sob o céu'; }
.tpl-rustico .wsite-story-mark [data-lucide]{ display:none; }
.tpl-rustico .wsite-story-mark::after{ content:''; flex:1; height:22px; background:var(--r-wheat) left center/auto 100% no-repeat; opacity:.55; }
/* ---------- LOCATIONS ---------- */
.tpl-rustico .wsite-locations{ background:var(--r-kraft-2) !important; padding:130px 32px; position:relative; overflow:hidden; }
.tpl-rustico .wsite-locations::before{
content:''; position:absolute; top:48px; left:50%; transform:translateX(-50%);
width:120px; height:24px; background:var(--r-wheat) center/contain no-repeat; opacity:.55;
}
.tpl-rustico .wsite-locations-grid{ gap:32px; margin-top:24px !important; }
.tpl-rustico .loc-card{
background:var(--r-paper); border:1px solid var(--r-wood-soft); border-radius:0;
padding:56px 40px 48px; box-shadow:0 24px 50px -25px rgba(45,31,18,.3);
position:relative; transition:.5s ease; text-align:center;
}
/* Twine corner decoration */
.tpl-rustico .loc-card::before{
content:''; position:absolute; top:0; left:0; right:0; height:6px;
background:repeating-linear-gradient(45deg, var(--r-wood) 0 6px, var(--r-wood-3) 6px 12px);
}
.tpl-rustico .loc-card:hover{ transform:translateY(-6px); box-shadow:0 36px 70px -25px rgba(45,31,18,.4); border-color:var(--r-wood); }
.tpl-rustico .loc-icon{
background:var(--r-kraft); border:2px dashed var(--r-wood); border-radius:0;
width:80px; height:80px; margin:0 auto 22px; transform:rotate(45deg);
}
.tpl-rustico .loc-icon [data-lucide]{ color:var(--r-wood-2); width:30px; height:30px; stroke-width:1.5; transform:rotate(-45deg); }
.tpl-rustico .loc-card h3{
font-family:'Lora', serif; font-style:italic; font-weight:600;
font-size:1.7rem; color:var(--r-ink); margin:0;
}
.tpl-rustico .loc-card h3::after{
content:''; display:block; width:80px; height:18px; margin:14px auto;
background:var(--r-wheat) center/contain no-repeat; opacity:.6;
}
.tpl-rustico .loc-card p{ font-family:'Lora', serif; font-size:1.1rem; color:var(--r-ink-2); margin:0; line-height:1.5; }
.tpl-rustico .loc-card small{
display:inline-flex; gap:6px; align-items:center; justify-content:center;
font-family:'Lora', serif; font-style:italic; font-size:13px; color:var(--r-ink-3); margin-top:14px;
}
.tpl-rustico .loc-card small .ico-inline{ color:var(--r-wood); width:13px; height:13px; }
/* ---------- GIFTS ---------- */
.tpl-rustico #gifts{ background:var(--r-paper); }
.tpl-rustico .gift-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:32px; }
.tpl-rustico .gift-card{
background:var(--r-cream); border:1px solid var(--r-wood-soft); border-radius:0;
box-shadow:0 18px 40px -25px rgba(45,31,18,.3); transition:.5s ease; overflow:hidden; position:relative;
}
.tpl-rustico .gift-card:hover{ transform:translateY(-6px); box-shadow:0 32px 60px -25px rgba(45,31,18,.4); border-color:var(--r-wood); }
.tpl-rustico .gift-cover{
background:linear-gradient(135deg, var(--r-wood-3) 0%, var(--r-wood) 60%, var(--r-wood-2) 100%);
aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; color:#fff; border:none; position:relative;
}
.tpl-rustico .gift-cover::before{
content:''; position:absolute; inset:0;
background:var(--r-wheat) center/200% no-repeat; opacity:.18; mix-blend-mode:soft-light;
}
.tpl-rustico .gift-cover [data-lucide]{ width:54px; height:54px; stroke-width:1.2; opacity:.95; position:relative; }
.tpl-rustico .gift-tag{
background:var(--r-kraft); color:var(--r-wood-2); border-radius:0;
font-family:'Lora', serif; font-style:italic; font-size:12px; padding:5px 12px; font-weight:600;
letter-spacing:0; text-transform:none; border:1px dashed var(--r-wood);
}
.tpl-rustico .gift-tag [data-lucide]{ color:var(--r-wood); }
.tpl-rustico .gift-info{ padding:28px 24px; text-align:center; }
.tpl-rustico .gift-info h4{
font-family:'Lora', serif; font-style:italic; font-weight:600;
font-size:1.4rem; color:var(--r-ink); margin:0;
}
.tpl-rustico .gift-price{
font-family:'Lora', serif; font-weight:600;
color:var(--r-wood); font-size:1.7rem; margin-top:8px;
}
.tpl-rustico .gift-info small{
display:inline-flex; align-items:center; gap:5px; margin-top:8px; color:var(--r-ink-3);
font-family:'Lora', serif; font-style:italic; font-size:13px;
}
/* ---------- MESSAGES ---------- */
.tpl-rustico .wsite-messages{ background:var(--r-kraft-2) !important; padding:130px 32px; position:relative; overflow:hidden; }
.tpl-rustico .wsite-messages::before{
content:''; position:absolute; top:48px; left:50%; transform:translateX(-50%);
width:120px; height:24px; background:var(--r-wheat) center/contain no-repeat; opacity:.55;
}
.tpl-rustico .wsite-messages .form-card{
background:var(--r-paper) !important; border:1px solid var(--r-wood-soft); border-radius:0;
padding:48px 40px; box-shadow:0 24px 50px -25px rgba(45,31,18,.3); max-width:640px; position:relative;
}
.tpl-rustico .wsite-messages .form-card::before{
content:''; position:absolute; top:0; left:0; right:0; height:6px;
background:repeating-linear-gradient(45deg, var(--r-wood) 0 6px, var(--r-wood-3) 6px 12px);
}
.tpl-rustico .wsite-messages .form-label{
font-family:'Lora', serif; font-style:italic; font-size:14px; color:var(--r-ink-2); font-weight:600;
}
.tpl-rustico .wsite-messages .form-label [data-lucide]{ color:var(--r-wood); }
.tpl-rustico .wsite-messages .form-input,
.tpl-rustico .wsite-messages .form-textarea{
background:var(--r-cream); border:1px dashed var(--r-wood-soft); border-radius:0;
font-family:'Lora', serif; font-size:1.1rem; color:var(--r-ink); padding:14px 16px;
}
.tpl-rustico .wsite-messages .form-input:focus,
.tpl-rustico .wsite-messages .form-textarea:focus{
border-color:var(--r-wood); border-style:solid; box-shadow:0 0 0 3px rgba(139,90,60,.12); outline:none;
}
.tpl-rustico .wsite-messages .btn-primary{
background:var(--r-wood); color:#fff; border:1px solid var(--r-wood-2); border-radius:0;
font-family:'Lora', serif; font-style:italic; font-size:14px; letter-spacing:0; text-transform:none;
padding:18px; font-weight:600; transition:.4s ease; position:relative;
}
.tpl-rustico .wsite-messages .btn-primary::before{
content:''; position:absolute; inset:3px; border:1px dashed rgba(212,184,154,.5); pointer-events:none;
}
.tpl-rustico .wsite-messages .btn-primary:hover{ background:var(--r-wood-2); }
.tpl-rustico .wsite-msg-grid{ margin-top:64px !important; gap:28px; }
.tpl-rustico .msg-card{
background:var(--r-paper); border:1px solid var(--r-wood-soft); border-radius:0;
padding:36px 32px; position:relative; transition:.5s ease;
box-shadow:0 18px 40px -25px rgba(45,31,18,.25);
}
.tpl-rustico .msg-card::before{
content:''; position:absolute; top:0; left:0; right:0; height:4px;
background:repeating-linear-gradient(45deg, var(--r-wood) 0 4px, var(--r-wood-3) 4px 8px);
}
.tpl-rustico .msg-card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -25px rgba(45,31,18,.35); }
.tpl-rustico .msg-quote{ color:var(--r-wood); opacity:.4; }
.tpl-rustico .msg-card p{
font-family:'Lora', serif; font-style:italic; font-weight:400;
font-size:1.18rem; line-height:1.7; color:var(--r-ink-2); margin:0 0 18px;
}
.tpl-rustico .msg-card strong{
font-family:'Lora', serif; font-style:italic; font-weight:700; font-size:14px; color:var(--r-wood);
display:inline-block; padding-top:14px; border-top:1px dashed var(--r-wood-soft);
}
/* ---------- CTA FINAL ---------- */
.tpl-rustico .cta-final{ padding:160px 32px; position:relative; overflow:hidden; }
.tpl-rustico .cta-final .cta-bg{ filter:brightness(.5) saturate(.85) sepia(.15); }
.tpl-rustico .cta-final::before{
content:''; position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
width:160px; height:30px; background:var(--r-wheat) center/contain no-repeat;
filter:brightness(0) invert(1) opacity(.55); z-index:2;
}
.tpl-rustico .cta-final-inner{ color:#fff; position:relative; z-index:3; }
.tpl-rustico .cta-final h2{
font-family:'Lora', serif; font-style:italic; font-weight:500;
font-size:clamp(2.4rem, 5.5vw, 4rem); line-height:1.15; margin:24px 0;
}
.tpl-rustico .cta-final h2 em{ color:var(--r-wood-soft); }
.tpl-rustico .cta-final .btn-accent{
background:var(--r-wood); color:#fff; border:1px solid rgba(212,184,154,.6); border-radius:0;
font-family:'Lora', serif; font-style:italic; font-size:14px; letter-spacing:0; text-transform:none;
padding:18px 40px; font-weight:600; position:relative; transition:.4s ease;
}
.tpl-rustico .cta-final .btn-accent::before{
content:''; position:absolute; inset:3px; border:1px dashed rgba(212,184,154,.5); pointer-events:none;
}
.tpl-rustico .cta-final .btn-accent:hover{ background:var(--r-wood-2); }
@media (max-width: 768px){
.tpl-rustico .wsite-section,
.tpl-rustico .wsite-locations,
.tpl-rustico .wsite-messages{ padding:80px 24px; }
.tpl-rustico .wsite-hero-photo h1{ font-size:3rem; }
.tpl-rustico .wsite-story-grid{ gap:48px; }
.tpl-rustico .wsite-story-img::before{ inset:-8px; border-width:6px; }
.tpl-rustico .cta-final{ padding:96px 24px; }
}
/* ============================================================
TEMPLATE 8 — MODERNO · Geométrico, vibrante, contemporâneo
Conceito: coral, Manrope bold, formas geométricas, layouts assimétricos
============================================================ */
.tpl-moderno{
--mo-coral:#FF6B6B; --mo-coral-2:#E54B4B; --mo-coral-soft:#FFB5B5;
--mo-pink:#FF8E9E; --mo-orange:#FFA94D;
--mo-bg:#FFFFFF; --mo-bg-2:#FAFAFA; --mo-bg-3:#FFF5F5;
--mo-ink:#0A0A0A; --mo-ink-2:#3A3A3A; --mo-ink-3:#737373;
background:var(--mo-bg); color:var(--mo-ink);
font-family:'Manrope', sans-serif;
}
.tpl-moderno a{ color:var(--mo-coral); }
/* ---------- HERO ---------- */
.tpl-moderno .wsite-hero-photo::before{ filter:saturate(1.05) contrast(1.05) brightness(.92); transform:scale(1.05); }
.tpl-moderno .wsite-hero-overlay{
background:linear-gradient(135deg, rgba(255,107,107,.4) 0%, rgba(10,10,10,.55) 100%);
}
.tpl-moderno .wsite-hero-photo .wsite-hero-content{ max-width:1100px; padding:64px 32px; text-align:left; width:100%; position:relative; z-index:3; }
/* Geometric circle accent */
.tpl-moderno .wsite-hero-photo .wsite-hero-content::before{
content:''; position:absolute; top:32px; right:32px; width:120px; height:120px;
border:2px solid var(--mo-coral); border-radius:50%; pointer-events:none;
}
.tpl-moderno .wsite-hero-photo .wsite-hero-content::after{
content:''; position:absolute; bottom:32px; left:32px; width:80px; height:8px;
background:var(--mo-coral);
}
.tpl-moderno .wsite-hero-photo .wsite-eyebrow{
background:var(--mo-coral); border:none; color:#fff;
font-family:'Manrope', sans-serif; font-weight:700;
font-size:11px; letter-spacing:.32em; text-transform:uppercase;
padding:8px 18px; border-radius:0;
}
.tpl-moderno .wsite-hero-photo .wsite-eyebrow [data-lucide]{ color:#fff; fill:#fff; width:13px; height:13px; }
.tpl-moderno .wsite-hero-photo h1{
font-family:'Manrope', sans-serif; font-weight:800; letter-spacing:-.05em;
font-size:clamp(3.6rem, 12vw, 9.5rem); line-height:.9; gap:0;
align-items:flex-start; text-align:left; margin:24px 0 0; color:#fff;
text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.tpl-moderno .wsite-hero-photo h1 em{ font-style:normal; font-weight:800; }
.tpl-moderno .wsite-hero-photo h1 .amp{
font-family:'Manrope', sans-serif; font-weight:300; font-style:normal;
color:var(--mo-coral); font-size:.7em; line-height:1; margin:-12px 0;
}
.tpl-moderno .wsite-hero-photo .wsite-date{
font-family:'Manrope', sans-serif; font-weight:600;
font-size:13px; letter-spacing:.18em; text-transform:uppercase;
color:#fff; margin-top:32px; gap:14px;
display:inline-flex; align-items:center;
padding:10px 0; border-top:2px solid var(--mo-coral); border-bottom:2px solid var(--mo-coral);
padding-left:18px; padding-right:18px;
}
.tpl-moderno .wsite-hero-photo .wsite-date .ico-inline{ width:13px; height:13px; color:var(--mo-coral); }
.tpl-moderno .wsite-hero-photo .wsite-countdown{ gap:8px; margin-top:40px; justify-content:flex-start; }
.tpl-moderno .wsite-hero-photo .wsite-countdown div{
background:rgba(0,0,0,.45); border:none; border-left:3px solid var(--mo-coral);
border-radius:0; padding:18px 20px; min-width:96px; text-align:left; backdrop-filter:blur(10px);
}
.tpl-moderno .wsite-hero-photo .wsite-countdown strong{
font-family:'Manrope', sans-serif; font-weight:800; font-size:2.6rem; color:#fff; line-height:1; letter-spacing:-.03em;
}
.tpl-moderno .wsite-hero-photo .wsite-countdown span{
font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--mo-coral);
font-family:'Manrope', sans-serif; font-weight:700; display:block; margin-top:6px;
}
.tpl-moderno .wsite-hero-content .btn{
margin-top:40px; background:var(--mo-coral); color:#fff;
border:none; border-radius:0;
padding:18px 36px; letter-spacing:.18em; font-size:12px; text-transform:uppercase;
font-family:'Manrope', sans-serif; font-weight:700;
transition:.3s ease; box-shadow:8px 8px 0 var(--mo-ink);
}
.tpl-moderno .wsite-hero-content .btn:hover{ transform:translate(-2px,-2px); box-shadow:10px 10px 0 var(--mo-ink); background:var(--mo-coral-2); }
/* ---------- NAV ---------- */
.tpl-moderno .wsite-nav{
background:rgba(255,255,255,.96); backdrop-filter:blur(16px);
border-bottom:2px solid var(--mo-ink); padding:18px 32px; gap:36px;
}
.tpl-moderno .wsite-nav a{
font-family:'Manrope', sans-serif; font-weight:700;
font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mo-ink);
position:relative;
}
.tpl-moderno .wsite-nav a [data-lucide]{ display:none; }
.tpl-moderno .wsite-nav a:hover{ color:var(--mo-coral); }
.tpl-moderno .wsite-nav a:hover::before{
content:''; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
width:6px; height:6px; background:var(--mo-coral); border-radius:50%;
}
/* ---------- SECTIONS ---------- */
.tpl-moderno .wsite-section{
padding:140px 32px; max-width:1200px; position:relative; text-align:left;
}
.tpl-moderno .wsite-section .section-tag{
display:inline-flex; align-items:center; gap:14px;
font-family:'Manrope', sans-serif; font-weight:700;
font-size:11px; letter-spacing:.32em; text-transform:uppercase;
color:var(--mo-coral); background:none; padding:0;
}
.tpl-moderno .wsite-section .section-tag::before{
content:''; width:32px; height:2px; background:var(--mo-coral); position:static;
}
.tpl-moderno .wsite-section .section-tag::after{ display:none; }
.tpl-moderno .wsite-section h2{
font-family:'Manrope', sans-serif; font-weight:800; font-style:normal;
font-size:clamp(2.6rem, 6vw, 4.6rem); line-height:1; letter-spacing:-.04em;
color:var(--mo-ink); margin:18px 0 28px; text-align:left; max-width:780px;
}
.tpl-moderno .wsite-section h2::after{ display:none; }
.tpl-moderno .wsite-section .wsite-lead{
font-family:'Manrope', sans-serif; font-weight:400;
color:var(--mo-ink-2); font-size:1.1rem; line-height:1.6;
max-width:560px; margin:0 0 36px;
}
/* ---------- STORY ---------- */
.tpl-moderno .wsite-story{ background:var(--mo-bg); position:relative; overflow:hidden; }
.tpl-moderno .wsite-story::before{
content:''; position:absolute; top:80px; right:-60px; width:200px; height:200px;
background:var(--mo-coral); border-radius:50%; opacity:.15; filter:blur(40px);
}
.tpl-moderno .wsite-story-grid{ gap:80px; align-items:center; position:relative; z-index:1; }
.tpl-moderno .wsite-story-img{
border-radius:0; aspect-ratio:4/5; box-shadow:14px 14px 0 var(--mo-coral);
position:relative;
}
.tpl-moderno .wsite-story-img::before{
content:''; position:absolute; top:-20px; left:-20px; width:80px; height:80px;
border:3px solid var(--mo-coral); pointer-events:none;
}
.tpl-moderno .wsite-story-text{ text-align:left; }
.tpl-moderno .wsite-story-text h2{ text-align:left; }
.tpl-moderno .wsite-story-text p{
font-family:'Manrope', sans-serif; font-weight:400;
color:var(--mo-ink-2); font-size:1.0625rem; line-height:1.8; margin-top:32px;
}
.tpl-moderno .wsite-story-text p::first-letter{
font-family:'Manrope', sans-serif; font-weight:800; font-style:normal;
font-size:5rem; float:left; line-height:.85; padding:6px 16px 0 0; color:var(--mo-coral);
}
.tpl-moderno .wsite-story-mark{
margin-top:36px; display:flex; align-items:center; gap:14px;
font-family:'Manrope', sans-serif; font-weight:700; font-size:11px;
letter-spacing:.32em; text-transform:uppercase; color:var(--mo-coral);
}
.tpl-moderno .wsite-story-mark::before{ content:'02 // OUR STORY'; }
.tpl-moderno .wsite-story-mark [data-lucide]{ display:none; }
.tpl-moderno .wsite-story-mark::after{ content:''; flex:1; height:2px; background:var(--mo-coral); }
/* ---------- LOCATIONS ---------- */
.tpl-moderno .wsite-locations{ background:var(--mo-bg-3) !important; padding:140px 32px; position:relative; overflow:hidden; }
.tpl-moderno .wsite-locations::before{
content:''; position:absolute; top:-100px; left:-100px; width:300px; height:300px;
border:2px solid var(--mo-coral); border-radius:50%; opacity:.3; pointer-events:none;
}
.tpl-moderno .wsite-locations-grid{ gap:32px; margin-top:48px !important; }
.tpl-moderno .loc-card{
background:#fff; border:none; border-radius:0;
padding:48px 36px; box-shadow:8px 8px 0 var(--mo-ink);
position:relative; transition:.3s ease; text-align:left;
}
.tpl-moderno .loc-card:nth-child(2){ box-shadow:8px 8px 0 var(--mo-coral); }
.tpl-moderno .loc-card:hover{ transform:translate(-4px,-4px); box-shadow:12px 12px 0 var(--mo-ink); }
.tpl-moderno .loc-card:nth-child(2):hover{ box-shadow:12px 12px 0 var(--mo-coral); }
.tpl-moderno .loc-icon{
background:var(--mo-coral); border:none; border-radius:0;
width:64px; height:64px; margin:0 0 24px;
}
.tpl-moderno .loc-icon [data-lucide]{ color:#fff; width:28px; height:28px; stroke-width:2; }
.tpl-moderno .loc-card h3{
font-family:'Manrope', sans-serif; font-style:normal; font-weight:800;
font-size:1.6rem; color:var(--mo-ink); margin:0; letter-spacing:-.02em;
}
.tpl-moderno .loc-card p{
font-family:'Manrope', sans-serif; font-size:1rem; color:var(--mo-ink-2); margin-top:12px; line-height:1.5;
}
.tpl-moderno .loc-card small{
display:block; margin-top:16px;
font-family:'Manrope', sans-serif; font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--mo-coral);
}
.tpl-moderno .loc-card small .ico-inline{ display:none; }
/* ---------- GIFTS ---------- */
.tpl-moderno #gifts{ background:var(--mo-bg); position:relative; }
.tpl-moderno .gift-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; margin-top:48px; }
.tpl-moderno .gift-card{
background:#fff; border:2px solid var(--mo-ink); border-radius:0; box-shadow:none;
transition:.3s ease; overflow:hidden; position:relative;
}
.tpl-moderno .gift-card:hover{ transform:translate(-4px,-4px); box-shadow:8px 8px 0 var(--mo-coral); }
.tpl-moderno .gift-cover{
background:linear-gradient(135deg, var(--mo-coral) 0%, var(--mo-orange) 100%);
aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
color:#fff; border:none; border-bottom:2px solid var(--mo-ink);
}
.tpl-moderno .gift-cover [data-lucide]{ width:54px; height:54px; stroke-width:1.6; }
.tpl-moderno .gift-tag{
background:var(--mo-ink); color:#fff; border-radius:0;
font-family:'Manrope', sans-serif; font-size:10px; letter-spacing:.18em;
text-transform:uppercase; padding:5px 12px; font-weight:700;
}
.tpl-moderno .gift-tag [data-lucide]{ color:var(--mo-coral); }
.tpl-moderno .gift-info{ padding:24px; text-align:left; }
.tpl-moderno .gift-info h4{
font-family:'Manrope', sans-serif; font-weight:800; font-size:1.1rem;
color:var(--mo-ink); margin:0; letter-spacing:-.01em;
}
.tpl-moderno .gift-price{
font-family:'Manrope', sans-serif; font-weight:800; color:var(--mo-coral);
font-size:1.6rem; margin-top:8px; letter-spacing:-.02em;
}
.tpl-moderno .gift-info small{
display:block; margin-top:8px; color:var(--mo-ink-3);
font-family:'Manrope', sans-serif; font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
/* ---------- MESSAGES ---------- */
.tpl-moderno .wsite-messages{ background:var(--mo-ink) !important; padding:140px 32px; color:#fff; position:relative; overflow:hidden; }
.tpl-moderno .wsite-messages::before{
content:''; position:absolute; top:-100px; right:-100px; width:300px; height:300px;
border:2px solid var(--mo-coral); border-radius:50%; opacity:.4;
}
.tpl-moderno .wsite-messages .section-tag{ color:var(--mo-coral); }
.tpl-moderno .wsite-messages h2{ color:#fff; }
.tpl-moderno .wsite-messages .wsite-lead{ color:rgba(255,255,255,.7); }
.tpl-moderno .wsite-messages .form-card{
background:#fff !important; border:none; border-radius:0; padding:48px 40px;
box-shadow:14px 14px 0 var(--mo-coral); max-width:none;
}
.tpl-moderno .wsite-messages .form-label{
font-family:'Manrope', sans-serif; font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--mo-ink);
}
.tpl-moderno .wsite-messages .form-label [data-lucide]{ color:var(--mo-coral); }
.tpl-moderno .wsite-messages .form-input,
.tpl-moderno .wsite-messages .form-textarea{
background:transparent; border:none; border-bottom:2px solid var(--mo-ink); border-radius:0;
font-family:'Manrope', sans-serif; font-size:1rem; color:var(--mo-ink); padding:12px 0;
}
.tpl-moderno .wsite-messages .form-input:focus,
.tpl-moderno .wsite-messages .form-textarea:focus{ border-color:var(--mo-coral); outline:none; box-shadow:none; }
.tpl-moderno .wsite-messages .btn-primary{
background:var(--mo-coral); color:#fff; border:none; border-radius:0;
font-family:'Manrope', sans-serif; font-weight:700; font-size:12px;
letter-spacing:.18em; text-transform:uppercase; padding:18px;
box-shadow:6px 6px 0 var(--mo-ink); transition:.3s ease;
}
.tpl-moderno .wsite-messages .btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--mo-ink); background:var(--mo-coral-2); }
.tpl-moderno .wsite-msg-grid{ margin-top:64px !important; gap:24px; }
.tpl-moderno .msg-card{
background:#fff; border:none; border-left:4px solid var(--mo-coral); border-radius:0; padding:32px;
box-shadow:none; text-align:left; transition:.3s ease;
}
.tpl-moderno .msg-card::before, .tpl-moderno .msg-card::after{ display:none; }
.tpl-moderno .msg-card:hover{ transform:translateX(4px); box-shadow:8px 0 0 -2px var(--mo-coral); }
.tpl-moderno .msg-quote{ display:none; }
.tpl-moderno .msg-card p{
font-family:'Manrope', sans-serif; font-style:normal; font-weight:500;
font-size:1.0625rem; line-height:1.7; color:var(--mo-ink); margin:0 0 18px;
}
.tpl-moderno .msg-card strong{
font-family:'Manrope', sans-serif; font-weight:800; font-size:11px;
letter-spacing:.18em; text-transform:uppercase; color:var(--mo-coral);
display:block; padding-top:14px; border-top:2px solid var(--mo-bg-3);
}
/* ---------- CTA FINAL ---------- */
.tpl-moderno .cta-final{ padding:160px 32px; background:var(--mo-coral); position:relative; overflow:hidden; }
.tpl-moderno .cta-final .cta-bg{ display:none; }
.tpl-moderno .cta-final::before{
content:''; position:absolute; top:-150px; right:-150px; width:400px; height:400px;
border:3px solid rgba(255,255,255,.25); border-radius:50%;
}
.tpl-moderno .cta-final::after{
content:''; position:absolute; bottom:-80px; left:-80px; width:240px; height:240px;
background:rgba(255,255,255,.08); border-radius:50%;
}
.tpl-moderno .cta-final-inner{ color:#fff; position:relative; z-index:3; max-width:900px; }
.tpl-moderno .cta-final .hero-eyebrow{
font-family:'Manrope', sans-serif; font-weight:700; font-size:11px;
letter-spacing:.32em; text-transform:uppercase; color:#fff;
background:var(--mo-ink); padding:8px 18px; display:inline-block;
}
.tpl-moderno .cta-final .hero-eyebrow [data-lucide]{ color:var(--mo-coral); margin-right:6px; }
.tpl-moderno .cta-final h2{
font-family:'Manrope', sans-serif; font-weight:800; font-style:normal;
font-size:clamp(2.6rem, 7vw, 5.4rem); line-height:.95; letter-spacing:-.04em; margin:24px 0;
}
.tpl-moderno .cta-final h2 em{ font-style:normal; color:var(--mo-ink); font-weight:800; }
.tpl-moderno .cta-final p{ color:rgba(255,255,255,.92); font-size:1.1rem; max-width:520px; margin:0 0 32px; }
.tpl-moderno .cta-final .btn-accent{
background:var(--mo-ink); color:#fff; border:none; border-radius:0;
font-family:'Manrope', sans-serif; font-weight:700; font-size:12px;
letter-spacing:.18em; text-transform:uppercase; padding:18px 40px;
box-shadow:8px 8px 0 #fff; transition:.3s ease;
}
.tpl-moderno .cta-final .btn-accent:hover{ transform:translate(-2px,-2px); box-shadow:10px 10px 0 #fff; }
@media (max-width: 768px){
.tpl-moderno .wsite-section,
.tpl-moderno .wsite-locations,
.tpl-moderno .wsite-messages{ padding:80px 24px; }
.tpl-moderno .wsite-hero-photo h1{ font-size:3.6rem; }
.tpl-moderno .wsite-hero-photo .wsite-hero-content::before{ width:80px; height:80px; }
.tpl-moderno .wsite-story-grid{ gap:48px; }
.tpl-moderno .wsite-story-img{ box-shadow:8px 8px 0 var(--mo-coral); }
.tpl-moderno .cta-final{ padding:96px 24px; }
.tpl-moderno .wsite-hero-content .btn{ box-shadow:6px 6px 0 var(--mo-ink); }
}
/* ============================================================
TEMPLATE 9 — VINTAGE · Retrô elegante, sépia, art-déco anos 20
Conceito: Cormorant + sépia, tipografia de revista antiga,
bordas duplas, ornamentos simétricos, papel envelhecido
============================================================ */
.tpl-vintage{
--v-sepia:#A87C5A; --v-sepia-2:#7A5638; --v-sepia-3:#C9A37C; --v-sepia-soft:#E5CFB3;
--v-cream:#F0E8D8; --v-cream-2:#F8F1DE; --v-paper:#FBF5E5;
--v-burgundy:#8B3A3A; --v-ink:#3A2818; --v-ink-2:#5C432B; --v-ink-3:#8C7256;
background:var(--v-cream); color:var(--v-ink);
font-family:'Cormorant Garamond', Georgia, serif;
}
.tpl-vintage a{ color:var(--v-sepia-2); }
/* Vintage paper grain */
.tpl-vintage::before{
content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.12; mix-blend-mode:multiply;
background-image:
radial-gradient(rgba(122,86,56,.6) 1px, transparent 1px),
radial-gradient(rgba(122,86,56,.4) 1px, transparent 1px);
background-size:5px 5px, 11px 11px;
background-position:0 0, 2px 2px;
}
/* Vignette corner darkening */
.tpl-vintage::after{
content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
background:radial-gradient(ellipse at center, transparent 50%, rgba(58,40,24,.15) 100%);
}
/* ---------- HERO ---------- */
.tpl-vintage .wsite-hero-photo::before{
filter:sepia(.4) saturate(.85) brightness(.9) contrast(1.05);
transform:scale(1.05);
}
.tpl-vintage .wsite-hero-overlay{
background:
radial-gradient(ellipse at center, transparent 30%, rgba(58,40,24,.6) 100%),
linear-gradient(180deg, rgba(58,40,24,.25) 0%, rgba(58,40,24,.55) 100%);
}
.tpl-vintage .wsite-hero-photo .wsite-hero-content{
max-width:780px; padding:80px 40px; position:relative; z-index:3;
}
/* Triple art-déco frame */
.tpl-vintage .wsite-hero-photo .wsite-hero-content::before{
content:''; position:absolute; inset:24px;
border:2px solid var(--v-sepia-3); pointer-events:none;
}
.tpl-vintage .wsite-hero-photo .wsite-hero-content::after{
content:''; position:absolute; inset:34px;
border:1px solid rgba(201,163,124,.5); pointer-events:none;
}
.tpl-vintage .wsite-hero-photo .wsite-eyebrow{
background:transparent; border:none; padding:0;
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:14px; letter-spacing:.18em;
color:var(--v-sepia-soft); gap:14px;
}
.tpl-vintage .wsite-hero-photo .wsite-eyebrow::before,
.tpl-vintage .wsite-hero-photo .wsite-eyebrow::after{
content:'~'; font-style:italic; color:var(--v-sepia-3);
font-size:1.4em; opacity:.8;
}
.tpl-vintage .wsite-hero-photo .wsite-eyebrow [data-lucide]{ display:none; }
.tpl-vintage .wsite-hero-photo h1{
font-family:'Cormorant Garamond', Georgia, serif; font-weight:500;
font-size:clamp(3.4rem, 8vw, 6.4rem); line-height:.95; letter-spacing:.005em;
margin:32px 0; gap:0; color:#fff;
text-shadow:0 4px 24px rgba(0,0,0,.55);
}
.tpl-vintage .wsite-hero-photo h1 em{ font-style:italic; font-weight:500; }
.tpl-vintage .wsite-hero-photo h1 .amp{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:300;
font-size:.7em; line-height:1; margin:6px 0; color:var(--v-sepia-3);
position:relative;
}
.tpl-vintage .wsite-hero-photo h1 .amp::before{
content:'~'; position:absolute; left:-32px; top:50%; transform:translateY(-50%);
font-size:.5em; color:var(--v-sepia-soft); opacity:.7;
}
.tpl-vintage .wsite-hero-photo h1 .amp::after{
content:'~'; position:absolute; right:-32px; top:50%; transform:translateY(-50%);
font-size:.5em; color:var(--v-sepia-soft); opacity:.7;
}
.tpl-vintage .wsite-hero-photo .wsite-date{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:15px; letter-spacing:.1em;
color:var(--v-sepia-soft); margin-top:24px; gap:12px;
padding:10px 24px; border:1px double var(--v-sepia-3);
display:inline-flex; align-items:center;
}
.tpl-vintage .wsite-hero-photo .wsite-date .ico-inline{ width:13px; height:13px; color:var(--v-sepia-3); }
.tpl-vintage .wsite-hero-photo .wsite-countdown{ gap:0; margin-top:48px; justify-content:center; }
.tpl-vintage .wsite-hero-photo .wsite-countdown div{
background:transparent; border:none; padding:8px 24px; min-width:auto; position:relative;
}
.tpl-vintage .wsite-hero-photo .wsite-countdown div + div::before{
content:'·'; position:absolute; left:-3px; top:50%; transform:translateY(-50%);
color:var(--v-sepia-3); font-size:1.6rem; line-height:1;
}
.tpl-vintage .wsite-hero-photo .wsite-countdown strong{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:2.6rem; color:#fff; line-height:1;
}
.tpl-vintage .wsite-hero-photo .wsite-countdown span{
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:12px;
letter-spacing:.05em; color:var(--v-sepia-soft); margin-top:6px;
}
.tpl-vintage .wsite-hero-content .btn{
margin-top:44px; background:transparent; color:var(--v-sepia-soft);
border:1px double var(--v-sepia-3); border-radius:0;
padding:16px 36px; letter-spacing:.18em; font-size:13px; text-transform:uppercase;
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600;
transition:.4s ease;
}
.tpl-vintage .wsite-hero-content .btn:hover{ background:var(--v-sepia); color:#fff; border-color:var(--v-sepia); }
.tpl-vintage .wsite-hero-content .btn .ico-inline{ display:none; }
/* ---------- NAV ---------- */
.tpl-vintage .wsite-nav{
background:rgba(240,232,216,.95); backdrop-filter:blur(16px);
border-bottom:3px double var(--v-sepia-3); padding:18px 24px; gap:36px;
}
.tpl-vintage .wsite-nav a{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600;
font-size:14px; letter-spacing:.08em; text-transform:none; color:var(--v-ink-2);
}
.tpl-vintage .wsite-nav a [data-lucide]{ display:none; }
.tpl-vintage .wsite-nav a:hover{ color:var(--v-sepia-2); }
/* ---------- SECTIONS ---------- */
.tpl-vintage .wsite-section{
padding:130px 32px; max-width:1080px; position:relative; z-index:1;
}
.tpl-vintage .wsite-section .section-tag{
display:inline-flex; align-items:center; gap:14px;
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600;
font-size:15px; letter-spacing:.08em; text-transform:none;
color:var(--v-sepia-2); background:none; padding:0;
}
.tpl-vintage .wsite-section .section-tag::before,
.tpl-vintage .wsite-section .section-tag::after{
content:'~'; width:auto; height:auto; background:none; position:static;
font-size:1.4em; color:var(--v-sepia-3); opacity:.8;
}
.tpl-vintage .wsite-section h2{
font-family:'Cormorant Garamond', serif; font-weight:500; font-style:italic;
font-size:clamp(2.6rem, 5.5vw, 4.2rem); line-height:1.1; letter-spacing:-.005em;
color:var(--v-ink); margin:18px 0 28px;
}
.tpl-vintage .wsite-section h2::after{
content:'❦'; display:block; font-family:Georgia, serif; font-style:normal;
font-size:1.4rem; color:var(--v-sepia); margin:20px auto 0; line-height:1;
}
.tpl-vintage .wsite-section .wsite-lead{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
color:var(--v-ink-2); font-size:1.25rem; line-height:1.6;
max-width:580px; margin:0 auto 36px;
}
/* ---------- STORY ---------- */
.tpl-vintage .wsite-story{ background:var(--v-paper); position:relative; }
.tpl-vintage .wsite-story-grid{ gap:80px; align-items:center; }
.tpl-vintage .wsite-story-img{
border-radius:0; aspect-ratio:4/5;
box-shadow:0 30px 60px -25px rgba(58,40,24,.45);
position:relative; filter:sepia(.3) saturate(.85) contrast(1.02);
}
/* Double oval frame */
.tpl-vintage .wsite-story-img::before{
content:''; position:absolute; inset:-16px; border:2px solid var(--v-sepia); pointer-events:none;
}
.tpl-vintage .wsite-story-img::after{
content:''; position:absolute; inset:-22px; border:1px solid var(--v-sepia-3); pointer-events:none;
}
.tpl-vintage .wsite-story-text{ text-align:left; }
.tpl-vintage .wsite-story-text .section-tag::before,
.tpl-vintage .wsite-story-text .section-tag::after{ display:inline-block; }
.tpl-vintage .wsite-story-text h2{ text-align:left; }
.tpl-vintage .wsite-story-text h2::after{ margin:20px 0 0; text-align:left; }
.tpl-vintage .wsite-story-text p{
font-family:'Cormorant Garamond', serif; font-weight:400;
color:var(--v-ink-2); font-size:1.18rem; line-height:1.85; margin-top:32px;
}
.tpl-vintage .wsite-story-text p::first-letter{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600;
font-size:5rem; float:left; line-height:.85; padding:8px 16px 0 0;
color:var(--v-sepia); border-right:2px solid var(--v-sepia-3); margin-right:14px;
}
.tpl-vintage .wsite-story-mark{
margin-top:36px; display:flex; align-items:center; gap:16px;
font-family:'Cormorant Garamond', serif; font-style:italic;
color:var(--v-sepia); font-size:1.4rem;
}
.tpl-vintage .wsite-story-mark::before{ content:'~ Para a eternidade ~'; }
.tpl-vintage .wsite-story-mark [data-lucide]{ display:none; }
.tpl-vintage .wsite-story-mark::after{
content:''; flex:1; height:1px; background:repeating-linear-gradient(90deg, var(--v-sepia-3) 0 6px, transparent 6px 12px);
}
/* ---------- LOCATIONS ---------- */
.tpl-vintage .wsite-locations{ background:var(--v-cream-2) !important; padding:130px 32px; position:relative; }
.tpl-vintage .wsite-locations::before{
content:'❦'; position:absolute; top:48px; left:50%; transform:translateX(-50%);
font-family:Georgia, serif; font-size:2rem; color:var(--v-sepia); opacity:.7;
}
.tpl-vintage .wsite-locations-grid{ gap:32px; margin-top:24px !important; }
.tpl-vintage .loc-card{
background:var(--v-paper); border:1px solid var(--v-sepia-3); border-radius:0;
padding:56px 40px 48px; box-shadow:0 24px 50px -25px rgba(58,40,24,.3);
position:relative; transition:.5s ease; text-align:center;
}
.tpl-vintage .loc-card::before{
content:''; position:absolute; inset:8px; border:1px solid var(--v-sepia-3); opacity:.5; pointer-events:none;
}
.tpl-vintage .loc-card::after{
content:''; position:absolute; top:0; left:50%; transform:translate(-50%, -50%) rotate(45deg);
width:14px; height:14px; background:var(--v-paper); border:1px solid var(--v-sepia-3);
}
.tpl-vintage .loc-card:hover{ transform:translateY(-6px); box-shadow:0 36px 70px -25px rgba(58,40,24,.4); border-color:var(--v-sepia); }
.tpl-vintage .loc-icon{
background:var(--v-cream); border:2px double var(--v-sepia-3); border-radius:50%;
width:80px; height:80px; margin:0 auto 24px; position:relative;
}
.tpl-vintage .loc-icon [data-lucide]{ color:var(--v-sepia-2); width:30px; height:30px; stroke-width:1.4; }
.tpl-vintage .loc-card h3{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600;
font-size:1.8rem; color:var(--v-ink); margin:0;
}
.tpl-vintage .loc-card h3::after{
content:'~'; display:block; font-style:italic; font-size:1.5rem;
color:var(--v-sepia-3); margin:8px auto;
}
.tpl-vintage .loc-card p{ font-family:'Cormorant Garamond', serif; font-size:1.18rem; color:var(--v-ink-2); margin:0; line-height:1.5; }
.tpl-vintage .loc-card small{
display:inline-flex; gap:6px; align-items:center; justify-content:center;
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13px;
color:var(--v-ink-3); margin-top:14px;
}
.tpl-vintage .loc-card small .ico-inline{ color:var(--v-sepia); width:13px; height:13px; }
/* ---------- GIFTS ---------- */
.tpl-vintage #gifts{ background:var(--v-paper); }
.tpl-vintage .gift-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:32px; }
.tpl-vintage .gift-card{
background:var(--v-cream-2); border:1px solid var(--v-sepia-3); border-radius:0;
box-shadow:0 18px 40px -25px rgba(58,40,24,.3); transition:.5s ease; overflow:hidden; position:relative;
}
.tpl-vintage .gift-card::before{
content:''; position:absolute; inset:8px; border:1px solid var(--v-sepia-soft); opacity:.6;
pointer-events:none; z-index:2; transition:.5s ease;
}
.tpl-vintage .gift-card:hover{ transform:translateY(-6px); border-color:var(--v-sepia); }
.tpl-vintage .gift-card:hover::before{ inset:4px; border-color:var(--v-sepia); }
.tpl-vintage .gift-cover{
background:linear-gradient(135deg, #E5CFB3 0%, #C9A37C 60%, #A87C5A 100%);
aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
color:var(--v-paper); border:none; filter:sepia(.2);
}
.tpl-vintage .gift-cover [data-lucide]{ width:54px; height:54px; stroke-width:1.2; opacity:.95; }
.tpl-vintage .gift-tag{
background:var(--v-burgundy); color:var(--v-cream); border-radius:0;
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:12px;
letter-spacing:.05em; text-transform:none; padding:5px 12px; font-weight:600;
}
.tpl-vintage .gift-tag [data-lucide]{ color:var(--v-cream); }
.tpl-vintage .gift-info{ padding:28px 24px; text-align:center; }
.tpl-vintage .gift-info h4{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600;
font-size:1.5rem; color:var(--v-ink); margin:0;
}
.tpl-vintage .gift-info h4::after{
content:'~'; display:block; font-size:1.2rem; color:var(--v-sepia-3); margin:8px auto;
}
.tpl-vintage .gift-price{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
color:var(--v-burgundy); font-size:1.7rem;
}
.tpl-vintage .gift-info small{
display:inline-flex; align-items:center; gap:5px; margin-top:8px; color:var(--v-ink-3);
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13px;
}
/* ---------- MESSAGES ---------- */
.tpl-vintage .wsite-messages{ background:var(--v-cream-2) !important; padding:130px 32px; position:relative; }
.tpl-vintage .wsite-messages::before{
content:'❦'; position:absolute; top:48px; left:50%; transform:translateX(-50%);
font-family:Georgia, serif; font-size:2rem; color:var(--v-sepia); opacity:.7;
}
.tpl-vintage .wsite-messages .form-card{
background:var(--v-paper) !important; border:1px solid var(--v-sepia-3); border-radius:0;
padding:48px 40px; box-shadow:0 24px 50px -25px rgba(58,40,24,.3); max-width:640px; position:relative;
}
.tpl-vintage .wsite-messages .form-card::before{
content:''; position:absolute; inset:8px; border:1px solid var(--v-sepia-soft); opacity:.6; pointer-events:none;
}
.tpl-vintage .wsite-messages .form-label{
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:15px;
color:var(--v-ink-2); font-weight:600;
}
.tpl-vintage .wsite-messages .form-label [data-lucide]{ color:var(--v-sepia); }
.tpl-vintage .wsite-messages .form-input,
.tpl-vintage .wsite-messages .form-textarea{
background:transparent; border:none; border-bottom:1px solid var(--v-sepia-3); border-radius:0;
font-family:'Cormorant Garamond', serif; font-size:1.15rem; color:var(--v-ink); padding:12px 0;
}
.tpl-vintage .wsite-messages .form-input:focus,
.tpl-vintage .wsite-messages .form-textarea:focus{
border-color:var(--v-sepia); border-bottom-width:2px; box-shadow:none; outline:none;
}
.tpl-vintage .wsite-messages .btn-primary{
background:var(--v-burgundy); color:var(--v-cream); border:1px double var(--v-sepia-3); border-radius:0;
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:15px;
letter-spacing:.08em; text-transform:none; padding:18px; font-weight:600; transition:.4s ease;
}
.tpl-vintage .wsite-messages .btn-primary:hover{ background:var(--v-sepia-2); }
.tpl-vintage .wsite-msg-grid{ margin-top:64px !important; gap:28px; }
.tpl-vintage .msg-card{
background:var(--v-paper); border:1px solid var(--v-sepia-3); border-radius:0;
padding:48px 36px 32px; position:relative; transition:.5s ease; text-align:center;
box-shadow:0 18px 40px -25px rgba(58,40,24,.25);
}
.tpl-vintage .msg-card::before{
content:''; position:absolute; inset:8px; border:1px solid var(--v-sepia-soft); opacity:.6; pointer-events:none;
}
.tpl-vintage .msg-card::after{
content:'❦'; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
font-family:Georgia, serif; font-size:1.4rem; color:var(--v-sepia);
background:var(--v-cream-2); padding:0 8px;
}
.tpl-vintage .msg-card:hover{ transform:translateY(-4px); border-color:var(--v-sepia); }
.tpl-vintage .msg-quote{ display:none; }
.tpl-vintage .msg-card p{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
font-size:1.2rem; line-height:1.7; color:var(--v-ink-2); margin:0 0 22px;
}
.tpl-vintage .msg-card p::before{
content:'“'; font-family:'Cormorant Garamond', serif; font-size:3.5rem; color:var(--v-sepia-3);
display:block; line-height:.6; margin-bottom:8px; opacity:.7;
}
.tpl-vintage .msg-card strong{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600;
font-size:14px; letter-spacing:.05em; color:var(--v-burgundy);
display:inline-block; padding-top:14px; position:relative;
}
.tpl-vintage .msg-card strong::before{
content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
width:40px; height:1px; background:var(--v-sepia-3);
}
/* ---------- CTA FINAL ---------- */
.tpl-vintage .cta-final{ padding:160px 32px; position:relative; }
.tpl-vintage .cta-final .cta-bg{ filter:sepia(.45) brightness(.5) saturate(.75); }
.tpl-vintage .cta-final::before{
content:''; position:absolute; inset:24px; border:2px solid var(--v-sepia-3); pointer-events:none; z-index:2;
}
.tpl-vintage .cta-final::after{
content:''; position:absolute; inset:34px; border:1px solid rgba(201,163,124,.4); pointer-events:none; z-index:2;
}
.tpl-vintage .cta-final-inner{ color:#fff; position:relative; z-index:3; }
.tpl-vintage .cta-final .hero-eyebrow{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:14px; letter-spacing:.18em; color:var(--v-sepia-soft);
display:inline-flex; gap:14px; align-items:center;
}
.tpl-vintage .cta-final .hero-eyebrow::before,
.tpl-vintage .cta-final .hero-eyebrow::after{
content:'~'; color:var(--v-sepia-3); font-size:1.4em; opacity:.8;
}
.tpl-vintage .cta-final .hero-eyebrow [data-lucide]{ display:none; }
.tpl-vintage .cta-final h2{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:clamp(2.6rem, 6vw, 4.4rem); line-height:1.15; margin:24px 0;
}
.tpl-vintage .cta-final h2 em{ color:var(--v-sepia-3); }
.tpl-vintage .cta-final .btn-accent{
background:transparent; color:#fff; border:1px double var(--v-sepia-3); border-radius:0;
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:15px;
letter-spacing:.1em; text-transform:none; padding:16px 40px; font-weight:600; transition:.4s ease;
}
.tpl-vintage .cta-final .btn-accent:hover{ background:var(--v-sepia); border-color:var(--v-sepia); }
@media (max-width: 768px){
.tpl-vintage .wsite-section,
.tpl-vintage .wsite-locations,
.tpl-vintage .wsite-messages{ padding:80px 24px; }
.tpl-vintage .wsite-hero-photo h1{ font-size:3rem; }
.tpl-vintage .wsite-hero-photo h1 .amp::before,
.tpl-vintage .wsite-hero-photo h1 .amp::after{ display:none; }
.tpl-vintage .wsite-story-grid{ gap:48px; }
.tpl-vintage .wsite-story-img::before{ inset:-10px; }
.tpl-vintage .wsite-story-img::after{ inset:-14px; }
.tpl-vintage .cta-final{ padding:96px 24px; }
}
/* ============================================================
TEMPLATE 10 — IMPERIAL · Suntuoso, dark, cinematográfico
Conceito: tons profundos chocolate, foil champanhe,
marble/velvet feel, gold leaf accents, drama high-contrast
============================================================ */
.tpl-imperial{
--i-bg:#1A1108; --i-bg-2:#241810; --i-bg-3:#2E2017;
--i-cocoa:#3D2B1A; --i-cocoa-2:#5C4332;
--i-champ:#E8DCC4; --i-champ-2:#D4C39C; --i-champ-3:#B8A574;
--i-foil:#C7A461;
--i-rose:#9D6F5A;
--i-ink:#F4EBD5; --i-ink-2:#C9BD9F; --i-ink-3:#8C8068;
background:var(--i-bg); color:var(--i-ink);
font-family:'Playfair Display', Georgia, serif;
}
.tpl-imperial a{ color:var(--i-foil); }
/* Subtle marble veining via gradient + grain */
.tpl-imperial::before{
content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
background:
radial-gradient(ellipse at 20% 10%, rgba(199,164,97,.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(157,111,90,.08) 0%, transparent 55%),
radial-gradient(ellipse at 60% 40%, rgba(232,220,196,.04) 0%, transparent 40%);
}
.tpl-imperial::after{
content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05;
background-image:radial-gradient(rgba(232,220,196,.6) 1px, transparent 1px);
background-size:4px 4px;
}
/* ---------- HERO ---------- */
.tpl-imperial .wsite-hero-photo{ background:var(--i-bg); }
.tpl-imperial .wsite-hero-photo::before{
filter:saturate(.8) brightness(.7) contrast(1.1) sepia(.1);
transform:scale(1.05);
}
.tpl-imperial .wsite-hero-overlay{
background:
radial-gradient(ellipse at center, rgba(26,17,8,.35) 0%, rgba(26,17,8,.85) 100%),
linear-gradient(180deg, rgba(26,17,8,.4) 0%, rgba(26,17,8,.75) 100%);
}
.tpl-imperial .wsite-hero-photo .wsite-hero-content{
max-width:840px; padding:96px 48px; position:relative; z-index:3;
}
/* Imperial gold double frame */
.tpl-imperial .wsite-hero-photo .wsite-hero-content::before{
content:''; position:absolute; inset:24px; pointer-events:none;
border:1px solid var(--i-foil);
background:linear-gradient(135deg, transparent 0%, rgba(199,164,97,.05) 100%);
}
.tpl-imperial .wsite-hero-photo .wsite-hero-content::after{
content:''; position:absolute; inset:36px; border:1px solid rgba(199,164,97,.3); pointer-events:none;
}
.tpl-imperial .wsite-hero-photo .wsite-eyebrow{
background:transparent; border:none; padding:0;
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:14px; letter-spacing:.42em; text-transform:uppercase;
color:var(--i-champ-2); gap:18px; position:relative;
}
.tpl-imperial .wsite-hero-photo .wsite-eyebrow::before,
.tpl-imperial .wsite-hero-photo .wsite-eyebrow::after{
content:''; width:48px; height:1px; background:var(--i-foil);
}
.tpl-imperial .wsite-hero-photo .wsite-eyebrow [data-lucide]{ display:none; }
.tpl-imperial .wsite-hero-photo h1{
font-family:'Playfair Display', serif; font-weight:400;
font-size:clamp(3.4rem, 8.5vw, 6.8rem); line-height:.95; letter-spacing:.005em;
margin:36px 0; gap:8px;
color:var(--i-ink);
text-shadow:0 4px 30px rgba(0,0,0,.7), 0 0 50px rgba(199,164,97,.15);
}
.tpl-imperial .wsite-hero-photo h1 em{
font-style:italic; font-weight:400;
background:linear-gradient(180deg, #F8EFD4 0%, var(--i-champ-2) 50%, var(--i-foil) 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-imperial .wsite-hero-photo h1 .amp{
font-family:'Playfair Display', serif; font-style:italic; font-weight:300;
font-size:.55em; line-height:1; margin:-2px 0;
color:var(--i-foil);
text-shadow:0 0 30px rgba(199,164,97,.5);
}
.tpl-imperial .wsite-hero-photo .wsite-date{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:14px; letter-spacing:.18em; text-transform:none;
color:var(--i-champ-2); margin-top:28px; gap:14px;
padding:12px 28px; border-top:1px solid var(--i-foil); border-bottom:1px solid var(--i-foil);
display:inline-flex; align-items:center;
}
.tpl-imperial .wsite-hero-photo .wsite-date .ico-inline{ width:13px; height:13px; color:var(--i-foil); }
.tpl-imperial .wsite-hero-photo .wsite-countdown{ gap:0; margin-top:48px; justify-content:center; }
.tpl-imperial .wsite-hero-photo .wsite-countdown div{
background:transparent; border:none; padding:8px 32px; min-width:auto; position:relative;
}
.tpl-imperial .wsite-hero-photo .wsite-countdown div + div::before{
content:''; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--i-foil); opacity:.6;
}
.tpl-imperial .wsite-hero-photo .wsite-countdown strong{
font-family:'Playfair Display', serif; font-weight:400; font-size:3.2rem; line-height:1;
background:linear-gradient(180deg, #F8EFD4 0%, var(--i-foil) 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-imperial .wsite-hero-photo .wsite-countdown span{
font-family:'Playfair Display', serif; font-style:italic; font-size:11px;
letter-spacing:.32em; text-transform:uppercase; color:var(--i-champ-2); margin-top:8px;
}
.tpl-imperial .wsite-hero-content .btn{
margin-top:44px; background:transparent; color:var(--i-champ);
border:1px solid var(--i-foil); border-radius:0;
padding:18px 40px; letter-spacing:.32em; font-size:11px; text-transform:uppercase;
font-family:'Playfair Display', serif; font-weight:500;
transition:.5s ease; position:relative;
box-shadow:0 0 30px rgba(199,164,97,.15);
}
.tpl-imperial .wsite-hero-content .btn::before{
content:''; position:absolute; inset:3px; border:1px solid rgba(199,164,97,.3); pointer-events:none;
}
.tpl-imperial .wsite-hero-content .btn:hover{
background:linear-gradient(135deg, var(--i-foil), var(--i-champ-3));
color:var(--i-bg); border-color:var(--i-champ-3);
box-shadow:0 0 50px rgba(199,164,97,.4);
}
.tpl-imperial .wsite-hero-content .btn .ico-inline{ color:var(--i-foil); }
.tpl-imperial .wsite-hero-content .btn:hover .ico-inline{ color:var(--i-bg); }
.tpl-imperial .wsite-hero-scroll{ color:var(--i-foil); }
/* ---------- NAV ---------- */
.tpl-imperial .wsite-nav{
background:rgba(26,17,8,.95); backdrop-filter:blur(20px);
border-bottom:1px solid rgba(199,164,97,.3); padding:20px 24px; gap:40px;
}
.tpl-imperial .wsite-nav a{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:13px; letter-spacing:.18em; text-transform:none; color:var(--i-champ-2);
}
.tpl-imperial .wsite-nav a [data-lucide]{ display:none; }
.tpl-imperial .wsite-nav a:hover{ color:var(--i-foil); }
/* ---------- SECTIONS ---------- */
.tpl-imperial .wsite-section{
padding:140px 32px; max-width:1100px; position:relative; z-index:1;
}
.tpl-imperial .wsite-section .section-tag{
display:inline-flex; align-items:center; gap:18px;
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:13px; letter-spacing:.42em; text-transform:uppercase;
color:var(--i-foil); background:none; padding:0;
}
.tpl-imperial .wsite-section .section-tag::before,
.tpl-imperial .wsite-section .section-tag::after{
content:''; width:48px; height:1px; background:var(--i-foil); position:static;
}
.tpl-imperial .wsite-section h2{
font-family:'Playfair Display', serif; font-weight:400; font-style:italic;
font-size:clamp(2.6rem, 5.8vw, 4.4rem); line-height:1.1; letter-spacing:-.005em;
color:var(--i-ink); margin:24px 0 28px;
}
.tpl-imperial .wsite-section h2::after{
content:''; display:block; width:14px; height:14px; margin:28px auto 0;
background:linear-gradient(135deg, var(--i-foil), var(--i-champ-3));
transform:rotate(45deg);
box-shadow:-22px 0 0 -3px var(--i-foil), 22px 0 0 -3px var(--i-foil);
}
.tpl-imperial .wsite-section .wsite-lead{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
color:var(--i-ink-2); font-size:1.25rem; line-height:1.6;
max-width:580px; margin:0 auto 36px;
}
/* ---------- STORY ---------- */
.tpl-imperial .wsite-story{ background:var(--i-bg-2); position:relative; overflow:hidden; }
.tpl-imperial .wsite-story::before{
content:''; position:absolute; top:-15%; left:-10%; width:50%; height:60%;
background:radial-gradient(ellipse, rgba(199,164,97,.08), transparent 70%);
filter:blur(40px); pointer-events:none;
}
.tpl-imperial .wsite-story-grid{ gap:80px; align-items:center; position:relative; z-index:1; }
.tpl-imperial .wsite-story-img{
border-radius:0; aspect-ratio:4/5;
box-shadow:0 50px 100px -30px rgba(0,0,0,.7);
position:relative; filter:saturate(.85) brightness(.95);
}
/* Triple gold corner brackets */
.tpl-imperial .wsite-story-img::before,
.tpl-imperial .wsite-story-img::after{
content:''; position:absolute; width:60px; height:60px; border:1px solid var(--i-foil); pointer-events:none;
}
.tpl-imperial .wsite-story-img::before{ top:-16px; left:-16px; border-right:none; border-bottom:none; }
.tpl-imperial .wsite-story-img::after{ bottom:-16px; right:-16px; border-left:none; border-top:none; }
.tpl-imperial .wsite-story-text{ text-align:left; }
.tpl-imperial .wsite-story-text .section-tag::before{ display:none; }
.tpl-imperial .wsite-story-text h2{ text-align:left; }
.tpl-imperial .wsite-story-text h2::after{ margin:24px 0 0; box-shadow:22px 0 0 -3px var(--i-foil); }
.tpl-imperial .wsite-story-text p{
font-family:'Playfair Display', serif; font-weight:400;
color:var(--i-ink-2); font-size:1.15rem; line-height:1.85; margin-top:32px;
}
.tpl-imperial .wsite-story-text p::first-letter{
font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
font-size:5rem; float:left; line-height:.85; padding:8px 18px 0 0;
background:linear-gradient(180deg, #F8EFD4, var(--i-foil));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-imperial .wsite-story-mark{
margin-top:36px; display:flex; align-items:center; gap:16px;
font-family:'Playfair Display', serif; font-style:italic; color:var(--i-foil); font-size:1.3rem;
}
.tpl-imperial .wsite-story-mark::before{ content:'Sob a luz dos imperadores'; }
.tpl-imperial .wsite-story-mark [data-lucide]{ display:none; }
.tpl-imperial .wsite-story-mark::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--i-foil), transparent); }
/* ---------- LOCATIONS ---------- */
.tpl-imperial .wsite-locations{ background:var(--i-bg-3) !important; padding:140px 32px; position:relative; }
.tpl-imperial .wsite-locations::before{
content:''; position:absolute; left:50%; top:64px; transform:translateX(-50%) rotate(45deg);
width:12px; height:12px; background:var(--i-foil);
box-shadow:-20px 0 0 -2px var(--i-foil), 20px 0 0 -2px var(--i-foil);
}
.tpl-imperial .wsite-locations-grid{ gap:32px; margin-top:24px !important; }
.tpl-imperial .loc-card{
background:var(--i-bg-2); border:1px solid rgba(199,164,97,.3); border-radius:0;
padding:64px 40px 56px; box-shadow:0 30px 60px -25px rgba(0,0,0,.6);
position:relative; transition:.5s ease; text-align:center;
}
.tpl-imperial .loc-card::before{
content:''; position:absolute; inset:14px; border:1px solid rgba(199,164,97,.18); pointer-events:none;
}
.tpl-imperial .loc-card:hover{
border-color:var(--i-foil); transform:translateY(-6px);
box-shadow:0 50px 80px -25px rgba(0,0,0,.7), 0 0 60px rgba(199,164,97,.15);
}
.tpl-imperial .loc-card:hover::before{ border-color:var(--i-foil); }
.tpl-imperial .loc-icon{
background:linear-gradient(135deg, var(--i-bg-3), var(--i-cocoa));
border:1px solid var(--i-foil); border-radius:50%;
width:84px; height:84px; margin:0 auto 26px; position:relative;
box-shadow:inset 0 0 30px rgba(199,164,97,.1);
}
.tpl-imperial .loc-icon::before{
content:''; position:absolute; inset:-6px; border:1px solid rgba(199,164,97,.35); border-radius:50%;
}
.tpl-imperial .loc-icon [data-lucide]{ color:var(--i-foil); width:32px; height:32px; stroke-width:1.3; }
.tpl-imperial .loc-card h3{
font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
font-size:1.7rem; color:var(--i-ink); margin:0;
}
.tpl-imperial .loc-card h3::after{
content:''; display:block; width:36px; height:1px; background:var(--i-foil); margin:14px auto;
}
.tpl-imperial .loc-card p{
font-family:'Playfair Display', serif; font-size:1.15rem; color:var(--i-ink-2); margin:0; line-height:1.5;
}
.tpl-imperial .loc-card small{
display:inline-flex; gap:6px; align-items:center; justify-content:center;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--i-ink-3); margin-top:14px;
}
.tpl-imperial .loc-card small .ico-inline{ color:var(--i-foil); width:13px; height:13px; }
/* ---------- GIFTS ---------- */
.tpl-imperial #gifts{ background:var(--i-bg); }
.tpl-imperial .gift-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:32px; }
.tpl-imperial .gift-card{
background:var(--i-bg-2); border:1px solid rgba(199,164,97,.3); border-radius:0;
box-shadow:0 24px 50px -25px rgba(0,0,0,.6); transition:.5s ease; overflow:hidden; position:relative;
}
.tpl-imperial .gift-card::before{
content:''; position:absolute; inset:10px; border:1px solid rgba(199,164,97,.18);
pointer-events:none; z-index:2; transition:.5s ease;
}
.tpl-imperial .gift-card:hover{ border-color:var(--i-foil); transform:translateY(-6px); box-shadow:0 40px 70px -25px rgba(0,0,0,.7), 0 0 50px rgba(199,164,97,.1); }
.tpl-imperial .gift-card:hover::before{ inset:6px; border-color:var(--i-foil); }
.tpl-imperial .gift-cover{
background:
radial-gradient(ellipse at top left, rgba(199,164,97,.5), transparent 60%),
linear-gradient(135deg, var(--i-cocoa) 0%, var(--i-bg-3) 50%, var(--i-cocoa-2) 100%);
aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
color:var(--i-foil); border:none; border-bottom:1px solid rgba(199,164,97,.2);
}
.tpl-imperial .gift-cover [data-lucide]{ width:54px; height:54px; stroke-width:1.2; }
/* Fotos de produtos na lista de presentes: encaixar sem cortar (prioridade sobre templates) */
.gift-card .gift-cover.gift-cover--photo,
a.gift-card .gift-cover.gift-cover--photo {
background-color: #fff;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.tpl-imperial .gift-tag{
background:linear-gradient(135deg, var(--i-foil), var(--i-champ-3)); color:var(--i-bg); border-radius:0;
font-family:'Inter', sans-serif; font-size:9px; letter-spacing:.32em;
text-transform:uppercase; padding:5px 12px; font-weight:600;
}
.tpl-imperial .gift-tag [data-lucide]{ color:var(--i-bg); }
.tpl-imperial .gift-info{ padding:32px 24px 28px; text-align:center; }
.tpl-imperial .gift-info h4{
font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
font-size:1.4rem; color:var(--i-ink); margin:0;
}
.tpl-imperial .gift-info h4::after{
content:''; display:block; width:30px; height:1px; background:var(--i-foil); margin:14px auto;
}
.tpl-imperial .gift-price{
font-family:'Playfair Display', serif; font-weight:400; font-size:1.7rem; letter-spacing:.02em;
background:linear-gradient(180deg, #F8EFD4, var(--i-foil));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-imperial .gift-info small{
display:block; margin-top:10px; color:var(--i-ink-3);
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.28em; text-transform:uppercase;
}
/* ---------- MESSAGES ---------- */
.tpl-imperial .wsite-messages{ background:var(--i-bg-2) !important; padding:140px 32px; position:relative; }
.tpl-imperial .wsite-messages::before{
content:''; position:absolute; left:50%; top:64px; transform:translateX(-50%) rotate(45deg);
width:12px; height:12px; background:var(--i-foil);
box-shadow:-20px 0 0 -2px var(--i-foil), 20px 0 0 -2px var(--i-foil);
}
.tpl-imperial .wsite-messages .form-card{
background:var(--i-bg) !important; border:1px solid rgba(199,164,97,.3); border-radius:0;
padding:48px 40px; box-shadow:0 30px 60px -25px rgba(0,0,0,.7); max-width:640px; position:relative;
}
.tpl-imperial .wsite-messages .form-card::before{
content:''; position:absolute; inset:10px; border:1px solid rgba(199,164,97,.18); pointer-events:none;
}
.tpl-imperial .wsite-messages .form-label{
font-family:'Playfair Display', serif; font-style:italic; font-size:14px;
color:var(--i-foil); font-weight:500;
}
.tpl-imperial .wsite-messages .form-label [data-lucide]{ color:var(--i-foil); }
.tpl-imperial .wsite-messages .form-input,
.tpl-imperial .wsite-messages .form-textarea{
background:transparent; border:none; border-bottom:1px solid rgba(199,164,97,.4); border-radius:0;
font-family:'Playfair Display', serif; font-size:1.1rem; color:var(--i-ink); padding:12px 0;
}
.tpl-imperial .wsite-messages .form-input:focus,
.tpl-imperial .wsite-messages .form-textarea:focus{
border-color:var(--i-foil); box-shadow:none; outline:none;
}
.tpl-imperial .wsite-messages .btn-primary{
background:transparent; color:var(--i-champ);
border:1px solid var(--i-foil); border-radius:0;
font-family:'Playfair Display', serif; font-style:italic; font-size:14px;
letter-spacing:.18em; text-transform:uppercase; padding:18px;
font-weight:500; transition:.5s ease; position:relative;
}
.tpl-imperial .wsite-messages .btn-primary::before{
content:''; position:absolute; inset:3px; border:1px solid rgba(199,164,97,.3); pointer-events:none;
}
.tpl-imperial .wsite-messages .btn-primary:hover{
background:linear-gradient(135deg, var(--i-foil), var(--i-champ-3));
color:var(--i-bg); border-color:var(--i-champ-3);
}
.tpl-imperial .wsite-msg-grid{ margin-top:64px !important; gap:28px; }
.tpl-imperial .msg-card{
background:var(--i-bg); border:1px solid rgba(199,164,97,.3); border-radius:0;
padding:48px 36px 32px; position:relative; transition:.5s ease; text-align:center;
}
.tpl-imperial .msg-card::before{
content:''; position:absolute; inset:10px; border:1px solid rgba(199,164,97,.18); pointer-events:none;
}
.tpl-imperial .msg-card:hover{ border-color:var(--i-foil); transform:translateY(-4px); }
.tpl-imperial .msg-quote{ display:none; }
.tpl-imperial .msg-card p{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:1.18rem; line-height:1.75; color:var(--i-ink-2); margin:0 0 24px;
}
.tpl-imperial .msg-card p::before{
content:'“'; font-family:'Playfair Display', serif; font-size:4.5rem;
background:linear-gradient(180deg, #F8EFD4, var(--i-foil));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
display:block; line-height:.55; margin-bottom:6px;
}
.tpl-imperial .msg-card strong{
font-family:'Inter', sans-serif; font-weight:500; font-size:10px;
letter-spacing:.42em; text-transform:uppercase; color:var(--i-foil);
display:inline-block; padding-top:18px; position:relative;
}
.tpl-imperial .msg-card strong::before{
content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
width:30px; height:1px; background:var(--i-foil);
}
/* ---------- CTA FINAL ---------- */
.tpl-imperial .cta-final{ padding:180px 32px; position:relative; background:var(--i-bg); }
.tpl-imperial .cta-final .cta-bg{ filter:brightness(.4) saturate(.7) sepia(.1); }
.tpl-imperial .cta-final::before{
content:''; position:absolute; inset:24px; border:1px solid var(--i-foil); pointer-events:none; z-index:2;
box-shadow:inset 0 0 80px rgba(199,164,97,.08);
}
.tpl-imperial .cta-final::after{
content:''; position:absolute; inset:36px; border:1px solid rgba(199,164,97,.3); pointer-events:none; z-index:2;
}
.tpl-imperial .cta-final-inner{ color:var(--i-ink); position:relative; z-index:3; }
.tpl-imperial .cta-final .hero-eyebrow{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:14px; letter-spacing:.42em; text-transform:uppercase; color:var(--i-foil);
display:inline-flex; gap:18px; align-items:center;
}
.tpl-imperial .cta-final .hero-eyebrow::before,
.tpl-imperial .cta-final .hero-eyebrow::after{
content:''; width:48px; height:1px; background:var(--i-foil);
}
.tpl-imperial .cta-final .hero-eyebrow [data-lucide]{ display:none; }
.tpl-imperial .cta-final h2{
font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
font-size:clamp(2.6rem, 6vw, 4.8rem); line-height:1.15; margin:28px 0;
}
.tpl-imperial .cta-final h2 em{
font-style:italic;
background:linear-gradient(180deg, #F8EFD4, var(--i-foil));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl-imperial .cta-final p{ font-family:'Playfair Display', serif; font-style:italic; color:var(--i-ink-2); font-size:1.2rem; }
.tpl-imperial .cta-final .btn-accent{
background:transparent; color:var(--i-champ); border:1px solid var(--i-foil); border-radius:0;
font-family:'Playfair Display', serif; font-style:italic; font-size:14px;
letter-spacing:.32em; text-transform:uppercase; padding:18px 44px;
font-weight:500; position:relative; transition:.5s ease;
box-shadow:0 0 40px rgba(199,164,97,.15);
}
.tpl-imperial .cta-final .btn-accent::before{
content:''; position:absolute; inset:3px; border:1px solid rgba(199,164,97,.3); pointer-events:none;
}
.tpl-imperial .cta-final .btn-accent:hover{
background:linear-gradient(135deg, var(--i-foil), var(--i-champ-3));
color:var(--i-bg); border-color:var(--i-champ-3);
box-shadow:0 0 60px rgba(199,164,97,.4);
}
@media (max-width: 768px){
.tpl-imperial .wsite-section,
.tpl-imperial .wsite-locations,
.tpl-imperial .wsite-messages{ padding:80px 24px; }
.tpl-imperial .wsite-hero-photo h1{ font-size:3.2rem; }
.tpl-imperial .wsite-hero-photo .wsite-countdown div{ padding:8px 18px; }
.tpl-imperial .wsite-hero-photo .wsite-countdown strong{ font-size:2.4rem; }
.tpl-imperial .wsite-story-grid{ gap:48px; }
.tpl-imperial .wsite-story-img::before,
.tpl-imperial .wsite-story-img::after{ width:36px; height:36px; }
.tpl-imperial .cta-final{ padding:96px 24px; }
}
/* ============================================================
Acessibilidade & SEO — adições 2026-05
============================================================ */
/* Skip link (acessibilidade A11y + Lighthouse) */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
background: var(--ink);
color: var(--white);
padding: 12px 20px;
border-radius: var(--radius-sm);
z-index: 9999;
font-weight: 600;
font-size: 14px;
transition: top 200ms ease;
}
.skip-link:focus { top: 16px; }
/* Visually hidden (para screen readers) */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Container leitura confortável (long-form copy) */
.container-readable { max-width: 760px; margin: 0 auto; padding: 0 24px; }
/* Bloco SEO (texto rico) */
.seo-content { padding: 80px 0; background: var(--white); }
.seo-content .prose h2 {
font-size: clamp(1.6rem, 3vw, 2.25rem);
margin-bottom: 18px;
}
.seo-content .prose h3 {
font-size: clamp(1.15rem, 2vw, 1.4rem);
margin: 32px 0 12px;
color: var(--ink-2);
}
.seo-content .prose p {
font-size: 1rem;
line-height: 1.8;
margin-bottom: 16px;
color: var(--ink-2);
}
.seo-content .prose strong { color: var(--ink); font-weight: 600; }
/* Hero avatares estáticos (substitui inline styles via background-image) */
.hero-avatar { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; border: 3px solid var(--white); margin-left: -10px; box-shadow: var(--shadow-sm); display: inline-block; }
.hero-avatars .hero-avatar:first-child { margin-left: 0; }
.hero-avatar-1 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=80&q=80&auto=format&fit=crop'); }
.hero-avatar-2 { background-image: url('https://images.unsplash.com/photo-1606800052052-a08af7148866?w=80&q=80&auto=format&fit=crop'); }
.hero-avatar-3 { background-image: url('https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=80&q=80&auto=format&fit=crop'); }
.hero-avatar-4 { background-image: url('https://images.unsplash.com/photo-1525258946800-98cfd641d0de?w=80&q=80&auto=format&fit=crop'); }
/* Hero mosaic — fundo via classes (sem inline style) */
.hero-mosaic .mosaic-1 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=900&q=80&auto=format&fit=crop'); }
.hero-mosaic .mosaic-2 { background-image: url('https://images.unsplash.com/photo-1606216794074-735e91aa2c92?w=700&q=80&auto=format&fit=crop'); }
.hero-mosaic .mosaic-3 { background-image: url('https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=700&q=80&auto=format&fit=crop'); }
.hero-mosaic .mosaic-4 { background-image: url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=700&q=80&auto=format&fit=crop'); }
/* Footer brand + descrição */
.footer-brand .footer-description {
font-size: 14px;
max-width: 320px;
line-height: 1.6;
color: rgba(255,255,255,0.85);
margin-top: 12px;
}
.footer-social {
list-style: none;
padding: 0;
margin: 18px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.footer-social li { margin: 0; }
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.85);
transition: var(--transition);
border: 1px solid rgba(255,255,255,0.12);
}
.footer-social a:hover {
background: var(--accent);
color: var(--ink);
border-color: var(--accent);
transform: translateY(-2px);
}
.footer-social a [data-lucide] { width: 16px; height: 16px; }
/* Seção how — utilitários para substituir inline-styles */
.section-pad-top-lg { padding-top: 140px !important; }
.section-pad-tight { padding-top: 140px; padding-bottom: 40px; }
.text-center-block { text-align: center; }
.h1-display {
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
margin: 16px 0 18px;
line-height: 1.1;
}
.h1-display em {
font-style: italic;
color: var(--accent);
font-family: 'Cormorant Garamond', Georgia, serif;
}
.lead-readable {
font-size: 1.0625rem;
color: var(--gray-1);
max-width: 640px;
margin: 0 auto;
}
.hero-ctas-center {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 32px;
flex-wrap: wrap;
}
/* Step list (textos com check) */
.step-checklist {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
color: var(--gray-1);
}
/* CTA final cobre wedding card / etc. */
.section-title-spaced { margin-top: 64px; }
/* Bloco code inline elegante (how) */
.inline-code {
background: var(--white);
padding: 2px 8px;
border-radius: 6px;
font-size: 13px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Pricing 3 colunas explícito (substitui inline style) */
.pricing-3-col { grid-template-columns: repeat(3, 1fr); }
/* Comparativo cards (how.php) */
.compare-bad {
background: #fff5f5;
border-color: #f4cccc;
}
.compare-bad h3 { color: #9a3a3a; }
.compare-bad ul {
list-style: none;
padding: 0;
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
color: #7a4848;
font-size: 14px;
}
.compare-good { border-color: var(--accent); }
.compare-good h3 { color: var(--accent); }
.compare-good ul {
list-style: none;
padding: 0;
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
color: var(--ink-2);
font-size: 14px;
}
/* Faq item destaque com strong colorido */
.faq-q-highlight strong { color: var(--accent); }
/* Pricing card fee descritivo */
.fee-card-desc {
font-size: 13px;
color: var(--gray-1);
}
/* ============================================================
Prévia de rascunho (URLs ?previa=1) + painel Site (abas)
============================================================ */
:root {
--draft-preview-h: 56px;
}
.draft-preview-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 400;
background: linear-gradient(135deg, #1c1917 0%, #292524 100%);
color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 20px rgba(15, 15, 15, 0.2);
}
.draft-preview-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
max-width: var(--container);
margin: 0 auto;
padding: 10px 24px;
min-height: var(--draft-preview-h);
}
.draft-preview-bar__left {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
flex: 1;
}
.draft-preview-bar__tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 100px;
background: rgba(201, 168, 124, 0.22);
color: var(--accent-soft);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.draft-preview-bar__text {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.78);
}
.draft-preview-bar__btn {
flex-shrink: 0;
padding: 8px 16px !important;
font-size: 13px !important;
border-color: rgba(255, 255, 255, 0.35) !important;
color: #fff !important;
background: rgba(255, 255, 255, 0.06) !important;
}
.draft-preview-bar__btn:hover {
background: rgba(255, 255, 255, 0.14) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
body.draft-preview-body {
padding-top: var(--draft-preview-h);
}
body.draft-preview-body .wsite-nav {
top: var(--draft-preview-h);
}
body.draft-preview-body .invite-bar {
top: var(--draft-preview-h);
}
@media (max-width: 720px) {
.draft-preview-bar__inner {
flex-direction: column;
align-items: flex-start;
padding: 12px 16px;
gap: 10px;
}
.draft-preview-bar__left {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.draft-preview-bar__text {
font-size: 12px;
}
body.draft-preview-body {
padding-top: 96px;
}
body.draft-preview-body .wsite-nav {
top: 96px;
}
body.draft-preview-body .invite-bar {
top: 96px;
}
}
/* —— Dashboard: site com abas —— */
.site-settings-page {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: hidden;
}
.site-settings-page > form {
width: 100%;
max-width: 100%;
min-width: 0;
}
.site-settings-panels {
min-width: 0;
max-width: 100%;
}
.site-settings-panel {
min-width: 0;
max-width: 100%;
}
.site-settings-page .card {
max-width: 100%;
min-width: 0;
}
.site-settings-template-strip {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 16px 18px;
margin-bottom: 20px;
background: var(--white);
border: 1px solid var(--gray-4);
border-radius: var(--radius);
min-width: 0;
max-width: 100%;
}
.site-settings-template-strip__thumb {
flex-shrink: 0;
width: 120px;
aspect-ratio: 5 / 3;
max-width: min(120px, 42vw);
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--gray-4);
background: var(--gray-5);
}
.site-settings-template-strip__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.site-settings-template-strip__body {
flex: 1;
min-width: min(100%, 200px);
}
.site-settings-template-strip__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-2);
font-weight: 600;
margin-bottom: 4px;
}
.site-settings-template-strip__title-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-bottom: 4px;
}
.site-settings-template-strip__name {
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
}
.site-settings-template-strip__badge.template-badge {
margin: 0;
}
.site-settings-template-strip__desc {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--gray-1);
}
.site-settings-template-strip__actions {
flex-shrink: 0;
display: flex;
gap: 8px;
align-items: center;
}
.site-settings-template-strip__actions .btn {
white-space: nowrap;
}
@media (max-width: 640px) {
.site-settings-template-strip {
flex-direction: column;
align-items: stretch;
padding: 14px 16px;
}
.site-settings-template-strip__thumb {
width: 100%;
max-width: 100%;
aspect-ratio: 21 / 9;
max-height: 140px;
}
.site-settings-template-strip__actions .btn {
width: 100%;
justify-content: center;
white-space: normal;
text-align: center;
}
}
/* Grid: evita overflow horizontal por largura intrínseca de imagens / conteúdo longo */
.site-settings-page .grid > * {
min-width: 0;
}
/* Prévias de upload — cabem na viewport (capa panorâmica, OG, etc.) */
.site-settings-media-preview {
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 0;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--gray-4);
background: var(--gray-5);
box-sizing: border-box;
}
.site-settings-media-preview img {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.site-settings-media-preview--hero {
aspect-ratio: 21 / 9;
max-height: min(140px, 38vw);
}
.site-settings-media-preview--couple {
aspect-ratio: 4 / 3;
max-height: min(160px, 48vw);
}
.site-settings-media-preview--seo {
aspect-ratio: 1200 / 630;
max-height: min(120px, 34vw);
}
.site-settings-page input[type='file'].form-input {
max-width: 100%;
box-sizing: border-box;
padding: 12px 14px;
font-size: 14px;
}
.site-settings-header {
align-items: flex-start;
width: 100%;
min-width: 0;
}
.site-settings-header__main {
min-width: 0;
flex: 1;
}
.site-settings-header__subtitle {
max-width: 560px;
}
.site-settings-header__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
min-width: 0;
max-width: 100%;
}
.site-settings-header__actions .btn {
min-width: 0;
}
.site-settings-page .site-settings-header__actions .btn {
white-space: normal;
text-align: center;
}
.site-settings-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-right: 8px;
vertical-align: middle;
}
.site-settings-badge--draft {
background: var(--gray-5);
color: var(--gray-1);
border: 1px solid var(--gray-4);
}
.site-settings-badge--live {
background: rgba(22, 163, 74, 0.12);
color: var(--success);
border: 1px solid rgba(22, 163, 74, 0.3);
}
.site-settings-header__url {
font-size: 13px;
word-break: break-all;
color: var(--gray-1);
}
.site-settings-tabs-wrap {
margin-bottom: 24px;
padding-bottom: 4px;
border-bottom: 1px solid var(--gray-4);
overflow-x: visible;
width: 100%;
max-width: 100%;
min-width: 0;
}
/* Grid responsivo: quebra linha conforme a largura (evita faixa larga min-content) */
.site-settings-tabs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
gap: 8px;
width: 100%;
max-width: 100%;
min-width: 0;
padding-bottom: 0;
}
.site-settings-tab {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
padding: 10px 12px;
min-height: 44px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
border-radius: var(--radius-sm);
border: 1px solid var(--gray-5);
border-bottom: 1px solid var(--gray-5);
background: var(--offwhite);
color: var(--gray-1);
cursor: pointer;
font-family: inherit;
transition: var(--transition);
white-space: normal;
text-align: left;
word-break: break-word;
hyphens: auto;
}
.site-settings-tab:hover {
color: var(--ink);
background: var(--gray-5);
border-color: var(--gray-4);
}
.site-settings-tab.is-active {
color: var(--ink);
background: var(--white);
border-color: var(--gray-4);
box-shadow: var(--shadow-sm);
margin-bottom: 0;
}
.site-settings-tab__title {
font-weight: 700;
font-size: 13px;
font-family: var(--font-body);
line-height: 1.25;
}
.site-settings-tab__hint {
font-size: 10px;
color: var(--gray-2);
font-weight: 500;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.site-settings-tab.is-active .site-settings-tab__hint {
color: var(--accent);
}
.site-settings-panel__lead {
margin: 0 0 20px;
font-size: 14px;
color: var(--gray-1);
line-height: 1.5;
}
.site-settings-footer {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--gray-4);
}
.site-settings-visibility {
display: flex;
gap: 16px;
align-items: flex-start;
cursor: pointer;
padding: 4px 0;
}
.site-settings-visibility__input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
clip: rect(0 0 0 0);
}
.site-settings-visibility__ui {
flex-shrink: 0;
width: 48px;
height: 28px;
border-radius: 999px;
background: var(--gray-4);
position: relative;
transition: var(--transition);
margin-top: 2px;
}
.site-settings-visibility__input:checked + .site-settings-visibility__ui {
background: linear-gradient(135deg, #16a34a, #15803d);
}
.site-settings-visibility__input:focus-visible + .site-settings-visibility__ui {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.site-settings-visibility__ui::after {
content: '';
position: absolute;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--white);
top: 3px;
left: 3px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.site-settings-visibility__input:checked + .site-settings-visibility__ui::after {
left: 23px;
}
.site-settings-visibility__copy {
display: block;
min-width: 0;
}
.site-settings-visibility__title {
display: block;
font-size: 15px;
margin-bottom: 6px;
color: var(--ink);
}
.site-settings-visibility__desc {
font-size: 13px;
color: var(--gray-1);
line-height: 1.5;
}
.site-settings-visibility__desc code {
font-size: 12px;
background: var(--gray-5);
padding: 1px 6px;
border-radius: 4px;
}
.site-publish-modal {
position: fixed;
inset: 0;
z-index: 500;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.site-publish-modal.is-open {
display: flex;
}
.site-publish-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 15, 15, 0.45);
backdrop-filter: blur(6px);
}
.site-publish-modal__sheet {
position: relative;
z-index: 1;
width: 100%;
max-width: 460px;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
border: 1px solid var(--gray-4);
padding: 28px;
}
.site-publish-modal__title {
font-family: var(--font-body);
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 12px;
letter-spacing: -0.02em;
}
.site-publish-modal__body {
margin: 0 0 24px;
font-size: 15px;
line-height: 1.55;
color: var(--ink-2);
}
.site-publish-modal__actions {
display: flex;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
/* Faixa de abas alinhada ao padding horizontal do .app-main (40px tablet/desktop estreito, 20px mobile) */
@media (max-width: 967px) {
.site-settings-tabs-wrap {
margin-left: -40px;
margin-right: -40px;
padding-left: 40px;
padding-right: 40px;
}
}
@media (max-width: 600px) {
.site-settings-tabs-wrap {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 768px) {
.site-settings-header__main {
flex-basis: 100%;
width: 100%;
min-width: 0;
}
.site-settings-header__actions {
flex-basis: 100%;
width: 100%;
justify-content: stretch;
min-width: 0;
}
.site-settings-header__actions .btn {
flex: 1 1 calc(50% - 6px);
min-height: 46px;
justify-content: center;
}
.site-settings-header h1 {
font-size: clamp(1.2rem, 5vw, 1.5rem);
line-height: 1.25;
}
.site-settings-header__subtitle {
max-width: none;
font-size: 13px;
line-height: 1.45;
}
.site-settings-badge {
display: flex;
width: fit-content;
margin-bottom: 6px;
margin-right: 0;
}
.site-settings-tabs {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
gap: 6px;
}
.site-settings-tab {
padding: 9px 10px;
min-height: 44px;
}
.site-settings-tab__title {
font-size: 12px;
}
.site-settings-tab__hint {
font-size: 9px;
}
.site-settings-panel__lead {
overflow-wrap: anywhere;
font-size: 13px;
}
.site-settings-media-preview--hero {
max-height: min(112px, 34vw);
}
.site-settings-media-preview--couple {
max-height: min(132px, 42vw);
}
.site-settings-media-preview--seo {
max-height: min(96px, 30vw);
}
.site-settings-page .grid.grid-2,
.site-settings-page .grid.grid-3 {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.site-settings-page .form-group[style*="grid-column"] {
grid-column: 1 / -1 !important;
}
.site-settings-footer {
margin-top: 24px;
padding-top: 20px;
}
.site-settings-footer .btn-lg {
width: 100%;
min-height: 48px;
justify-content: center;
}
.site-publish-modal {
align-items: flex-end;
padding: 0;
}
.site-publish-modal__sheet {
max-height: min(88vh, 640px);
overflow-y: auto;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0));
margin-top: auto;
}
.site-publish-modal__actions {
flex-direction: column-reverse;
align-items: stretch;
}
.site-publish-modal__actions .btn {
width: 100%;
justify-content: center;
min-height: 46px;
}
.site-settings-visibility {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.site-settings-visibility__ui {
margin-top: 0;
align-self: flex-start;
}
.site-settings-visibility__desc code {
word-break: break-all;
}
.site-settings-page input.form-input,
.site-settings-page select.form-select,
.site-settings-page textarea.form-textarea {
font-size: 16px;
}
.site-settings-page .card {
padding: 18px 16px;
}
.site-settings-page .card-header {
padding-bottom: 12px;
margin-bottom: 12px;
}
}
@media (max-width: 640px) {
.site-settings-header {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.site-settings-header__actions {
flex-direction: column;
}
.site-settings-header__actions .btn {
width: 100%;
flex: none;
min-height: 46px;
}
}
@media (max-width: 480px) {
.site-settings-tab {
padding: 10px 12px;
}
}
/* ============================================================
ETERNAL — Drawer / Sub-hero / Secondary forms / Invite Card
============================================================ */
/* ---------- DRAWER (off-canvas premium menu) ---------- */
.wsite-drawer{
position:fixed; inset:0; z-index:80;
pointer-events:none;
}
.wsite-drawer.is-open{ pointer-events:auto; }
.wsite-drawer-backdrop{
position:absolute; inset:0;
background:rgba(8,6,4,.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
opacity:0; transition:.45s ease;
}
.wsite-drawer.is-open .wsite-drawer-backdrop{ opacity:1; }
.wsite-drawer-panel{
position:absolute; top:0; left:0; bottom:0;
width:min(420px, 92vw);
background:linear-gradient(180deg, #0E0B08 0%, #16110D 100%);
border-right:1px solid rgba(212,181,117,.18);
transform:translateX(-100%); transition:transform .45s cubic-bezier(.2,.8,.2,1);
display:flex; flex-direction:column;
padding:22px 24px 32px;
box-shadow:30px 0 80px rgba(0,0,0,.6);
}
.wsite-drawer.is-open .wsite-drawer-panel{ transform:translateX(0); }
.wsite-drawer-head{
display:flex; align-items:center; justify-content:space-between;
padding-bottom:18px; margin-bottom:18px;
border-bottom:1px solid rgba(212,181,117,.18);
}
.wsite-drawer-mono{
font-family:'Cormorant Garamond', serif; font-style:italic;
color:#E8D5B5; font-size:1.45rem; letter-spacing:.18em;
}
.wsite-drawer-close{
background:transparent; border:1px solid rgba(212,181,117,.35);
color:#E8D5B5; width:38px; height:38px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
cursor:pointer; transition:.3s ease;
}
.wsite-drawer-close:hover{ border-color:#D4B575; color:#fff; }
.wsite-drawer-close [data-lucide]{ width:18px; height:18px; }
.wsite-drawer-couple{ margin:8px 0 26px; }
.wsite-drawer-couple small{
font-family:'Inter', sans-serif; font-size:9px; letter-spacing:.42em; text-transform:uppercase;
color:#9C8E78; display:block;
}
.wsite-drawer-couple strong{
display:block; font-family:'Cormorant Garamond', serif; font-style:italic;
color:#fff; font-size:1.7rem; margin:6px 0 4px; font-weight:500;
}
.wsite-drawer-couple em{
font-style:normal; font-family:'Inter', sans-serif; font-size:10px;
letter-spacing:.32em; text-transform:uppercase; color:#D4B575;
}
.wsite-drawer-list{
list-style:none; padding:0; margin:0;
overflow-y:auto; flex:1;
}
.wsite-drawer-list li{ margin:0; padding:0; }
.wsite-drawer-list a{
display:flex; align-items:center; gap:16px;
padding:16px 4px; border-bottom:1px solid rgba(212,181,117,.08);
color:#E8DFD2; text-decoration:none;
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
font-size:1.25rem;
transition:.3s ease;
}
.wsite-drawer-list a:hover{ color:#D4B575; padding-left:10px; }
.wsite-drawer-list a span{
font-family:'Inter', sans-serif; font-style:normal; font-size:9px;
letter-spacing:.32em; text-transform:uppercase; color:#9C8E78;
min-width:30px;
}
.wsite-drawer-list a [data-lucide]{
margin-left:auto; width:16px; height:16px; color:#9C8E78; transition:.3s ease;
}
.wsite-drawer-list a:hover [data-lucide]{ color:#D4B575; transform:translate(2px,-2px); }
/* ---------- SUB-HERO (top of secondary pages) ---------- */
.wsite-subhero{
position:relative; min-height:46vh; padding:130px 32px 70px;
display:flex; align-items:center; justify-content:center; text-align:center;
background:#0E0B08; overflow:hidden;
}
.wsite-subhero::before{
content:''; position:absolute; inset:0; z-index:0;
background-image:var(--subhero-img, linear-gradient(135deg, #1a120a, #0E0B08));
background-size:cover; background-position:center;
filter:contrast(1.04) saturate(.78) brightness(.55);
transform:scale(1.03);
}
.wsite-subhero-overlay{
position:absolute; inset:0; z-index:1;
background:
radial-gradient(ellipse at center, rgba(10,7,4,.4) 0%, rgba(10,7,4,.85) 100%),
linear-gradient(180deg, rgba(10,7,4,.45) 0%, rgba(10,7,4,.95) 100%);
}
.wsite-subhero-content{
position:relative; z-index:2; max-width:780px; padding:32px;
color:#fff;
}
.wsite-subhero-content::before,
.wsite-subhero-content::after{
content:''; position:absolute; left:50%; transform:translateX(-50%);
width:64px; height:1px; background:rgba(212,181,117,.55);
}
.wsite-subhero-content::before{ top:0; }
.wsite-subhero-content::after{ bottom:0; }
.wsite-subhero-eyebrow{
display:inline-flex; gap:14px; align-items:center;
font-family:'Inter', sans-serif; font-weight:500;
font-size:10px; letter-spacing:.55em; text-transform:uppercase;
color:#E8D5B5;
}
.wsite-subhero-eyebrow::before,
.wsite-subhero-eyebrow::after{
content:''; width:30px; height:1px; background:#D4B575; opacity:.6;
}
.wsite-subhero-content h1{
font-family:'Cormorant Garamond', Georgia, serif; font-weight:400; font-style:italic;
font-size:clamp(2.6rem, 6vw, 4.4rem); line-height:1.1; letter-spacing:.005em;
color:#fff; margin:22px 0 14px;
}
.wsite-subhero-content h1 em{ font-style:italic; color:#E8D5B5; }
.wsite-subhero-lead{
font-family:'Cormorant Garamond', serif; font-style:italic;
color:rgba(245,235,215,.9); font-size:1.18rem; line-height:1.55;
max-width:540px; margin:6px auto 0;
}
/* ---------- FLASH ---------- */
.wsite-flash{
display:inline-flex; align-items:center; gap:10px;
padding:14px 22px; border-radius:0;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
font-weight:600; margin:0 auto 28px;
}
.wsite-flash-success{
background:rgba(212,181,117,.15); color:#D4B575;
border:1px solid rgba(212,181,117,.5);
}
.wsite-flash [data-lucide]{ width:16px; height:16px; }
/* ---------- SECONDARY SECTIONS ---------- */
.tpl-eternal .wsite-rsvp,
.tpl-eternal .wsite-messages{
background:var(--e-night-2);
padding:90px 32px 110px; max-width:none;
}
.tpl-eternal .wsite-album,
.tpl-eternal .wsite-gifts-list{
background:var(--e-cream); color:var(--e-ink);
padding:90px 32px 110px; max-width:none;
}
.tpl-eternal .wsite-form{
max-width:680px; margin:0 auto;
background:var(--e-paper) !important; border:1px solid var(--e-gold-soft); border-radius:0;
padding:48px 44px; box-shadow:0 30px 60px -30px rgba(60,40,20,.18);
position:relative;
}
.tpl-eternal .wsite-form::before{
content:''; position:absolute; inset:10px; border:1px solid rgba(184,154,110,.18); pointer-events:none;
}
.tpl-eternal .wsite-form-row{ margin-bottom:22px; position:relative; z-index:1; }
.tpl-eternal .wsite-form-row-2{
display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.tpl-eternal .wsite-form .form-label{
display:block; font-family:'Inter', sans-serif; font-size:10px;
letter-spacing:.32em; text-transform:uppercase; color:var(--e-ink-2); font-weight:600;
margin-bottom:8px;
}
.tpl-eternal .wsite-form .form-input,
.tpl-eternal .wsite-form .form-textarea,
.tpl-eternal .wsite-form .form-select{
width:100%; background:transparent; border:none;
border-bottom:1px solid var(--e-gold-soft); border-radius:0;
font-family:'Cormorant Garamond', serif; font-size:1.12rem; color:var(--e-ink);
padding:10px 0;
}
.tpl-eternal .wsite-form .form-input:focus,
.tpl-eternal .wsite-form .form-textarea:focus,
.tpl-eternal .wsite-form .form-select:focus{
border-color:var(--e-gold-deep); outline:none; box-shadow:none;
}
.tpl-eternal .wsite-radio-group{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.tpl-eternal .wsite-radio{ position:relative; cursor:pointer; }
.tpl-eternal .wsite-radio input{ position:absolute; opacity:0; pointer-events:none; }
.tpl-eternal .wsite-radio span{
display:flex; align-items:center; justify-content:center; gap:10px;
padding:18px; border:1px solid var(--e-gold-soft); background:#fff;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color:var(--e-ink-2); transition:.3s ease;
}
.tpl-eternal .wsite-radio span [data-lucide]{ width:14px; height:14px; color:var(--e-gold-deep); }
.tpl-eternal .wsite-radio input:checked + span{
background:var(--e-ink); color:var(--e-gold-2); border-color:var(--e-ink);
}
.tpl-eternal .wsite-radio input:checked + span [data-lucide]{ color:var(--e-gold-2); }
.tpl-eternal .wsite-form .btn-primary{
background:linear-gradient(180deg, var(--e-gold-2) 0%, var(--e-gold) 100%);
color:#1a120a; border:none; border-radius:6px;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.34em; text-transform:uppercase;
padding:18px; margin-top:8px; font-weight:600; width:100%;
}
.tpl-eternal .wsite-empty{
text-align:center; padding:60px 24px; max-width:520px; margin:0 auto;
font-family:'Cormorant Garamond', serif; font-style:italic; color:var(--e-ink-3);
font-size:1.2rem;
}
.tpl-eternal .wsite-empty [data-lucide]{
display:block; margin:0 auto 16px;
width:48px; height:48px; color:var(--e-gold-deep); opacity:.5;
}
.tpl-eternal .wsite-gifts-bar{
display:flex; justify-content:flex-end; max-width:1080px; margin:0 auto 24px;
}
.tpl-eternal .wsite-gifts-bar .btn-outline{
border:1px solid var(--e-gold-deep); color:var(--e-ink); background:transparent;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
padding:12px 22px; border-radius:0; text-decoration:none;
display:inline-flex; align-items:center; gap:8px;
}
@media (max-width: 640px){
.tpl-eternal .wsite-form{ padding:32px 22px; }
.tpl-eternal .wsite-form-row-2{ grid-template-columns:1fr; gap:16px; }
.tpl-eternal .wsite-radio-group{ grid-template-columns:1fr; }
.wsite-subhero{ min-height:38vh; padding:110px 22px 50px; }
}
/* ============================================================
INVITE CARD — Mobile portrait digital invite
============================================================ */
.wsite-invite-page{ background:var(--e-night) !important; min-height:100vh; }
.invite-card-stage{
min-height:100vh; padding:90px 18px 110px;
display:flex; align-items:center; justify-content:center;
background:
radial-gradient(ellipse at top, rgba(212,181,117,.08) 0%, transparent 55%),
var(--e-night);
}
.invite-card{
position:relative; width:100%; max-width:420px;
background:linear-gradient(180deg, #FBF6EC 0%, #F4ECDB 100%);
color:#2B231C; padding:80px 32px 28px;
border:1px solid rgba(184,154,110,.35);
box-shadow:
0 60px 120px -40px rgba(0,0,0,.7),
inset 0 0 0 8px #FBF6EC,
inset 0 0 0 9px rgba(184,154,110,.4);
text-align:center; overflow:hidden;
font-family:'Cormorant Garamond', Georgia, serif;
}
.invite-card::before,
.invite-card::after{
content:''; position:absolute; width:46px; height:46px;
border:1px solid rgba(184,154,110,.55); pointer-events:none; z-index:3;
}
.invite-card::before{ top:22px; left:22px; border-right:none; border-bottom:none; }
.invite-card::after{ bottom:22px; right:22px; border-left:none; border-top:none; }
.invite-leaf{
position:absolute; pointer-events:none; opacity:.85; z-index:1;
background-repeat:no-repeat; background-size:contain;
}
.invite-leaf-tr{
top:38px; right:8px; width:140px; height:200px;
background-image:url("data:image/svg+xml;utf8,");
}
.invite-leaf-bl{
bottom:80px; left:-10px; width:120px; height:170px; opacity:.45;
transform:rotate(180deg);
background-image:url("data:image/svg+xml;utf8,");
}
.invite-quote{
position:relative; z-index:2;
font-family:'Inter', sans-serif; font-size:10.5px; letter-spacing:.16em;
text-transform:uppercase; color:#5C5044; line-height:1.65; margin:0 0 28px;
font-weight:500;
}
.invite-names{
position:relative; z-index:2; margin:0;
font-family:'Great Vibes','Allura','Cormorant Garamond', cursive;
font-weight:400; line-height:1; color:#2B231C;
display:flex; flex-direction:column; align-items:flex-start;
text-align:left; padding-left:6px;
}
.invite-names span{ font-size:3.3rem; }
.invite-names em{
font-style:italic; font-family:'Cormorant Garamond', serif;
font-size:1.6rem; color:#8A6E45; align-self:flex-start; margin:-2px 0 -2px 14px;
}
.invite-callout{
position:relative; z-index:2;
margin:32px 0 28px;
font-family:'Inter', sans-serif; font-size:10.5px; letter-spacing:.34em;
text-transform:uppercase; color:#5C5044; line-height:1.7; font-weight:500;
}
.invite-date{
position:relative; z-index:2;
display:inline-flex; align-items:center; gap:18px;
margin:0 auto 14px;
font-family:'Cormorant Garamond', serif; font-weight:400;
}
.invite-date-d, .invite-date-y{ font-size:1.55rem; color:#5C5044; }
.invite-date-m{
font-size:2.5rem; color:#2B231C; font-weight:600;
font-family:'Cormorant Garamond', serif;
}
.invite-date-sep{
width:1px; height:38px; background:#B89A6E; opacity:.6;
}
.invite-time{
position:relative; z-index:2;
font-family:'Inter', sans-serif; font-size:10px; letter-spacing:.42em;
text-transform:uppercase; color:#5C5044; margin:0 0 22px;
}
.invite-location{
position:relative; z-index:2;
font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.42em;
text-transform:uppercase; color:#2B231C; margin:0 0 18px; font-weight:600;
}
.invite-extras{
position:relative; z-index:2;
font-family:'Inter', sans-serif; font-size:9.5px; letter-spacing:.3em;
text-transform:uppercase; color:#5C5044; line-height:1.7; margin:0 0 36px;
}
.invite-actions{
position:relative; z-index:2;
display:flex; justify-content:center; gap:18px; margin:24px 0 14px;
border-top:1px solid rgba(184,154,110,.3);
border-bottom:1px solid rgba(184,154,110,.3);
padding:22px 0;
}
.invite-action{
flex:1; max-width:96px; text-decoration:none;
display:flex; flex-direction:column; align-items:center; gap:8px;
color:#2B231C; transition:.3s ease;
}
.invite-action-ico{
width:46px; height:46px; border-radius:50%;
background:#7A8B6A; color:#fff;
display:inline-flex; align-items:center; justify-content:center;
box-shadow:0 8px 18px -8px rgba(122,139,106,.6);
transition:.3s ease;
}
.invite-action-ico [data-lucide]{ width:20px; height:20px; }
.invite-action:hover .invite-action-ico{ transform:translateY(-3px); background:#5D6E50; }
.invite-action-lbl{
font-family:'Inter', sans-serif; font-size:8px; letter-spacing:.2em;
text-transform:uppercase; color:#5C5044; line-height:1.3;
}
.invite-hint{
position:relative; z-index:2;
font-family:'Inter', sans-serif; font-size:8.5px; letter-spacing:.34em;
text-transform:uppercase; color:#8A7C6C; margin:6px 0 12px;
}
.invite-footer{
position:relative; z-index:2;
display:flex; justify-content:space-between; align-items:center;
margin-top:18px; padding-top:18px;
border-top:1px solid rgba(184,154,110,.2);
}
.invite-btn-back, .invite-btn-share{
display:inline-flex; align-items:center; gap:6px;
font-family:'Inter', sans-serif; font-size:9px; letter-spacing:.28em; text-transform:uppercase;
color:#5C5044; background:transparent; border:none; cursor:pointer;
text-decoration:none; padding:6px 0; font-weight:500;
}
.invite-btn-back [data-lucide],
.invite-btn-share [data-lucide]{ width:13px; height:13px; }
.invite-btn-share{ color:#8A6E45; }
@media (max-width: 480px){
.invite-card{ padding:64px 24px 22px; }
.invite-card::before, .invite-card::after{ width:36px; height:36px; }
.invite-names span{ font-size:2.7rem; }
.invite-leaf-tr{ width:110px; height:160px; top:30px; right:0; }
.invite-leaf-bl{ width:90px; height:130px; }
}