/* ═══════════════════════════════════════════════════════════════ DEAREST — Landing Page v2 assets/css/landing.css Fundo unificado + tema interativo + preview de declaração real ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════ 1. TOKENS DE TEMA — por data-theme no ══════════════════════════════════════════ */ :root, html[data-theme="eternal"] { --land-bg-from: #0C0A0F; --land-bg-mid: #1A0D14; --land-bg-to: #0C0A0F; --land-accent: #D4AF37; --land-accent-r: 212; --land-accent-g: 175; --land-accent-b: 55; --land-accent2: #C41E3A; --land-text: #FAF7F2; --land-sub: rgba(250, 247, 242, 0.62); --land-orb1: rgba(196, 30, 58, 0.30); --land-orb2: rgba(183, 110, 121, 0.20); --land-orb3: rgba(212, 175, 55, 0.12); --land-border: rgba(212, 175, 55, 0.15); --land-card: rgba(20, 10, 16, 0.72); --land-card-h: rgba(30, 15, 22, 0.88); --land-eyebrow: #D4AF37; --land-sh-a: #8B3B5A; --land-sh-b: #F0D080; --land-scroll: rgba(250, 247, 242, 0.30); } html[data-theme="cosmic"] { --land-bg-from: #050A1A; --land-bg-mid: #0A1628; --land-bg-to: #050A1A; --land-accent: #A78BFA; --land-accent-r: 167; --land-accent-g: 139; --land-accent-b: 250; --land-accent2: #F9A8D4; --land-text: #E8E8F0; --land-sub: rgba(232, 232, 240, 0.60); --land-orb1: rgba(167, 139, 250, 0.28); --land-orb2: rgba(249, 168, 212, 0.18); --land-orb3: rgba(100, 140, 255, 0.14); --land-border: rgba(167, 139, 250, 0.18); --land-card: rgba(8, 12, 35, 0.78); --land-card-h: rgba(14, 18, 50, 0.92); --land-eyebrow: #A78BFA; --land-sh-a: #A78BFA; --land-sh-b: #F9A8D4; --land-scroll: rgba(232, 232, 240, 0.28); } html[data-theme="bloom"] { --land-bg-from: #FFF8F0; --land-bg-mid: #FFF0F5; --land-bg-to: #FFF8F0; --land-accent: #C2185B; --land-accent-r: 194; --land-accent-g: 24; --land-accent-b: 91; --land-accent2: #E91E8C; --land-text: #2D1A24; --land-sub: rgba(45, 26, 36, 0.62); --land-orb1: rgba(194, 24, 91, 0.16); --land-orb2: rgba(255, 174, 192, 0.50); --land-orb3: rgba(255, 220, 235, 0.45); --land-border: rgba(194, 24, 91, 0.18); --land-card: rgba(255, 245, 248, 0.84); --land-card-h: rgba(255, 240, 248, 0.96); --land-eyebrow: #C2185B; --land-sh-a: #C2185B; --land-sh-b: #E91E8C; --land-scroll: rgba(45, 26, 36, 0.32); } html[data-theme="velvet"] { --land-bg-from: #1A0508; --land-bg-mid: #2D0A0E; --land-bg-to: #1A0508; --land-accent: #F5C842; --land-accent-r: 245; --land-accent-g: 200; --land-accent-b: 66; --land-accent2: #C41E3A; --land-text: #FAF0D8; --land-sub: rgba(250, 240, 216, 0.60); --land-orb1: rgba(245, 200, 66, 0.20); --land-orb2: rgba(196, 30, 58, 0.28); --land-orb3: rgba(180, 80, 20, 0.15); --land-border: rgba(245, 200, 66, 0.18); --land-card: rgba(22, 5, 8, 0.80); --land-card-h: rgba(35, 8, 12, 0.92); --land-eyebrow: #F5C842; --land-sh-a: #F5C842; --land-sh-b: #FFD080; --land-scroll: rgba(250, 240, 216, 0.28); } /* ══════════════════════════════════════════ 2. FUNDO GLOBAL — um só background para todo o site ══════════════════════════════════════════ */ html { background: linear-gradient(160deg, var(--land-bg-from) 0%, var(--land-bg-mid) 50%, var(--land-bg-to) 100% ); min-height: 100%; transition: background var(--dur-slow) var(--ease-silk); } body { background: transparent; color: var(--land-text); min-height: 100dvh; position: relative; transition: color var(--dur-med) var(--ease-silk); } /* Canvas de partículas — fixo, cobre toda a viewport */ #global-particles-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 1; } #global-particles { position: absolute; inset: 0; width: 100%; height: 100%; } /* Bokeh orbs fixos — flutuam suavemente */ .bokeh-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .bokeh { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; transition: background var(--dur-slow) var(--ease-silk); } .bokeh-1 { width: clamp(380px, 60vw, 800px); height: clamp(380px, 60vw, 800px); background: radial-gradient(circle, var(--land-orb1) 0%, transparent 70%); top: -15%; left: -18%; animation: bokeh-a 14s var(--ease-drift) infinite; } .bokeh-2 { width: clamp(280px, 48vw, 600px); height: clamp(280px, 48vw, 600px); background: radial-gradient(circle, var(--land-orb2) 0%, transparent 70%); bottom: 8%; right: -14%; animation: bokeh-b 18s var(--ease-drift) infinite; animation-delay: -6s; } .bokeh-3 { width: clamp(180px, 32vw, 440px); height: clamp(180px, 32vw, 440px); background: radial-gradient(circle, var(--land-orb3) 0%, transparent 70%); top: 42%; left: 50%; animation: bokeh-c 22s var(--ease-drift) infinite; animation-delay: -11s; } @keyframes bokeh-a { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(8%, 12%) scale(1.08); } 66% { transform: translate(-5%, 7%) scale(0.94); } } @keyframes bokeh-b { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-10%, -8%) scale(1.12); } 70% { transform: translate(5%, -3%) scale(0.96); } } @keyframes bokeh-c { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, 18%) scale(1.18); } } /* Conteúdo acima do fundo */ nav, main, footer, header { position: relative; z-index: 3; } /* ══════════════════════════════════════════ 3. NAVEGAÇÃO ══════════════════════════════════════════ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-modal); padding: var(--space-4) var(--page-padding); display: flex; align-items: center; justify-content: space-between; transition: background var(--dur-fast) var(--ease-silk), border-color var(--dur-fast) var(--ease-silk), backdrop-filter var(--dur-fast) var(--ease-silk); border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(12, 10, 15, 0.76); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom-color: var(--land-border); } html[data-theme="bloom"] .nav.scrolled { background: rgba(255, 248, 245, 0.84); } html[data-theme="cosmic"] .nav.scrolled { background: rgba(5, 10, 26, 0.84); } html[data-theme="velvet"] .nav.scrolled { background: rgba(26, 5, 8, 0.84); } .nav-logo { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; font-style: italic; letter-spacing: 0.04em; background: linear-gradient(135deg, var(--land-sh-a), var(--land-accent), var(--land-sh-b), var(--land-accent)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 5s linear infinite; text-decoration: none; cursor: pointer; } .nav-actions { display: flex; align-items: center; gap: var(--space-3); } .nav-cta { display: none; transition: background var(--dur-med) var(--ease-silk), box-shadow var(--dur-med) var(--ease-silk), color var(--dur-med) var(--ease-silk); } @media (min-width: 640px) { .nav-cta { display: inline-flex; } } /* ══════════════════════════════════════════ 4. HERO ══════════════════════════════════════════ */ .hero { position: relative; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: var(--space-24) var(--page-padding) var(--space-20); } .hero-content { position: relative; z-index: var(--z-raised); text-align: center; max-width: 780px; width: 100%; } .hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--land-accent); border: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.28); border-radius: var(--radius-full); padding: 6px 18px; background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.07); margin-bottom: var(--space-6); animation: fade-in-up var(--dur-med) var(--ease-drift) both; backdrop-filter: blur(8px); transition: color var(--dur-slow), border-color var(--dur-slow), background var(--dur-slow); } .hero-logo { font-family: var(--font-display); font-size: clamp(var(--text-4xl), 14vw, 96px); font-weight: 300; font-style: italic; line-height: 1; letter-spacing: -0.01em; background: linear-gradient( 135deg, var(--land-sh-a) 0%, var(--land-accent) 30%, var(--land-sh-b) 50%, var(--land-accent) 70%, var(--land-sh-a) 100% ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: /* R7-CSS-01: --dur-slow é 680ms (token de transição UI), não adequado para animação decorativa longa — causava efeito strobe (> 3Hz, risco WCAG 2.3.1). Hardcode 5s. */ shimmer 5s linear infinite, fade-in-up var(--dur-slow) var(--ease-drift) 80ms both; margin-bottom: var(--space-4); } .hero-tagline { font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 300; font-style: italic; color: var(--land-text); opacity: 0.88; letter-spacing: 0.01em; animation: fade-in-up var(--dur-slow) var(--ease-drift) 160ms both; margin-bottom: var(--space-4); transition: color var(--dur-slow); } .hero-sub { font-family: var(--font-body); font-size: clamp(var(--text-base), 2.5vw, var(--text-md)); font-weight: 400; color: var(--land-sub); line-height: var(--leading-relaxed); max-width: 540px; margin: 0 auto var(--space-10); animation: fade-in-up var(--dur-slow) var(--ease-drift) 240ms both; transition: color var(--dur-slow); } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); animation: fade-in-up var(--dur-slow) var(--ease-drift) 320ms both; } @media (max-width: 640px) { .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn-cta, .hero-actions .btn-secondary { width: 100%; justify-content: center; } } /* Badge de urgência / prova social viva */ .hero-urgency { margin-top: var(--space-8); display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--land-sub); animation: fade-in-up var(--dur-slow) var(--ease-drift) 480ms both; transition: color var(--dur-slow); } .urgency-dot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; animation: pulse-dot 2s ease infinite; flex-shrink: 0; } @keyframes pulse-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); } } /* Scroll hint */ .hero-scroll-hint { position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); color: var(--land-scroll); animation: fade-in var(--dur-slow) var(--ease-drift) 800ms both; transition: color var(--dur-slow); } .scroll-mouse { width: 20px; height: 32px; border: 1.5px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.22); border-radius: 10px; position: relative; transition: border-color var(--dur-slow); } .scroll-mouse::after { content: ''; position: absolute; width: 3px; height: 6px; background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.5); border-radius: 2px; top: 5px; left: 50%; transform: translateX(-50%); animation: float 1.5s ease-in-out infinite; transition: background var(--dur-slow); } /* Corações flutuantes */ .hero-hearts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .float-heart { position: absolute; bottom: -10%; animation: float-heart-up linear infinite; animation-duration: var(--fh-dur, 14s); animation-delay: var(--fh-delay, 0s); opacity: 0; } .float-heart svg { fill: currentColor; display: block; } @keyframes float-heart-up { 0% { transform: translateY(0) rotate(var(--rot, 0deg)); opacity: 0; } 8% { opacity: 1; } 90% { opacity: 0.4; } 100% { transform: translateY(-110vh) rotate(calc(var(--rot, 0deg) + 30deg)); opacity: 0; } } /* ══════════════════════════════════════════ 5. PROOF STRIP ══════════════════════════════════════════ */ .proof-strip { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-8); padding: var(--space-5) var(--page-padding); background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.05); border-top: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.12); border-bottom: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.12); backdrop-filter: blur(12px); transition: background var(--dur-slow), border-color var(--dur-slow); } .proof-item { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--land-sub); white-space: nowrap; transition: color var(--dur-slow); } .proof-icon { color: var(--land-accent); transition: color var(--dur-slow); } .proof-item strong { color: var(--land-text); transition: color var(--dur-slow); } /* ══════════════════════════════════════════ 6. LAYOUT COMPARTILHADO DAS SECTIONS ══════════════════════════════════════════ */ .section { padding: clamp(var(--space-16), 10vw, 120px) var(--page-padding); position: relative; z-index: 3; } .section-inner { max-width: var(--content-max); margin: 0 auto; } .section-eyebrow { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--land-eyebrow); margin-bottom: var(--space-3); display: block; transition: color var(--dur-slow); } .section-heading { font-family: var(--font-head); font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl)); font-weight: 400; color: var(--land-text); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-5); transition: color var(--dur-slow); } .section-heading em { font-style: italic; font-weight: 400; background: linear-gradient(135deg, var(--land-sh-a), var(--land-accent), var(--land-sh-b)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-sub { font-family: var(--font-body); font-size: var(--text-md); color: var(--land-sub); line-height: var(--leading-relaxed); max-width: 560px; margin: 0 auto; text-align: center; transition: color var(--dur-slow); } /* section-sub em layouts de 2 colunas — alinhado à esquerda, sem max-width */ .demo-text .section-sub { text-align: left; max-width: none; margin: 0; } /* Mobile: layouts de 2 colunas colapsam em coluna única — centralizar */ @media (max-width: 899px) { .demo-text .section-sub { text-align: center; max-width: 560px; margin: 0 auto; } } /* Reveal via IntersectionObserver */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-drift), transform var(--dur-slow) var(--ease-drift); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 100ms; } .reveal-delay-2 { transition-delay: 200ms; } .reveal-delay-3 { transition-delay: 300ms; } .reveal-delay-4 { transition-delay: 400ms; } /* Ornament divider */ .ornament-divider { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: 0 auto var(--space-12); color: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.4); font-size: var(--text-sm); transition: color var(--dur-slow); } .ornament-divider::before, .ornament-divider::after { content: ''; flex: 1; max-width: 80px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.3), transparent); transition: background var(--dur-slow); } /* ══════════════════════════════════════════ 7. DEMO — DECLARAÇÃO AO VIVO ══════════════════════════════════════════ */ .demo-layout { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); } @media (min-width: 900px) { .demo-layout { flex-direction: row; gap: var(--space-20); align-items: center; } } .demo-text { flex: 1; max-width: 480px; } @media (max-width: 899px) { .demo-text { text-align: center; } .demo-features { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; } } @media (min-width: 900px) { .demo-text { text-align: left; } } .demo-badge { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.10); border: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.22); border-radius: var(--radius-full); padding: 5px 14px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; color: var(--land-accent); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-5); transition: color var(--dur-slow), background var(--dur-slow), border-color var(--dur-slow); } .demo-features { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); } .demo-features li { display: flex; align-items: flex-start; gap: var(--space-3); font-family: var(--font-body); font-size: var(--text-base); color: var(--land-sub); line-height: var(--leading-normal); transition: color var(--dur-slow); } .demo-features li::before { content: '✦'; color: var(--land-accent); font-size: 10px; margin-top: 5px; flex-shrink: 0; transition: color var(--dur-slow); } /* ── Preview real da declaração ────────── */ .decl-mock-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .decl-mock { width: clamp(240px, 55vw, 296px); background: var(--land-card); border: 1px solid var(--land-border); border-radius: 28px; padding: var(--space-5); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.06), 0 0 40px rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.08); position: relative; overflow: hidden; animation: float 5.5s ease-in-out infinite; backdrop-filter: blur(16px); transition: background var(--dur-slow) var(--ease-silk), border-color var(--dur-slow) var(--ease-silk), box-shadow var(--dur-slow) var(--ease-silk); } /* Canvas de partículas dentro do preview */ #preview-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 28px; } .decl-orb-a { position: absolute; width: 150px; height: 150px; background: radial-gradient(circle, var(--land-orb1) 0%, transparent 70%); top: -35px; right: -35px; border-radius: 50%; filter: blur(30px); pointer-events: none; transition: background var(--dur-slow) var(--ease-silk); } .decl-orb-b { position: absolute; width: 110px; height: 110px; background: radial-gradient(circle, var(--land-orb2) 0%, transparent 70%); bottom: -22px; left: -22px; border-radius: 50%; filter: blur(25px); pointer-events: none; transition: background var(--dur-slow) var(--ease-silk); } .decl-inner { position: relative; z-index: 1; } .decl-brand-tag { font-family: var(--font-ui); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--land-accent); opacity: 0.65; margin-bottom: 5px; transition: color var(--dur-slow); } .decl-brand-name { font-family: var(--font-display); font-size: 24px; font-style: italic; font-weight: 300; background: linear-gradient(135deg, var(--land-sh-a), var(--land-accent), var(--land-sh-b)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 5s linear infinite; margin-bottom: 10px; } .decl-divider-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.45), transparent); margin-bottom: 12px; transition: background var(--dur-slow); } .decl-to-label { font-family: var(--font-ui); font-size: 8px; color: var(--land-sub); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; transition: color var(--dur-slow); } .decl-recipient { font-family: var(--font-display); font-size: 24px; font-style: italic; color: var(--land-text); font-weight: 300; margin-bottom: 10px; line-height: 1.1; transition: color var(--dur-slow); } .decl-msg { font-family: var(--font-body); font-size: 9.5px; color: var(--land-sub); line-height: 1.75; font-style: italic; margin-bottom: 10px; transition: color var(--dur-slow); } .decl-counter-pill { display: flex; align-items: center; gap: 6px; background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.09); border: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.18); border-radius: var(--radius-full); padding: 5px 12px; margin-bottom: 10px; transition: background var(--dur-slow), border-color var(--dur-slow); } .decl-counter-icon { color: var(--land-accent2); font-size: 10px; transition: color var(--dur-slow); } .decl-counter-text { font-family: var(--font-ui); font-size: 8.5px; color: var(--land-accent); transition: color var(--dur-slow); } .decl-photo-slot { width: 100%; height: 68px; background: linear-gradient(135deg, rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.12), rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.05) ); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 10px; transition: background var(--dur-slow); } .decl-spotify-pill { display: flex; align-items: center; gap: 6px; background: rgba(29, 185, 84, 0.08); border: 1px solid rgba(29, 185, 84, 0.2); border-radius: var(--radius-full); padding: 4px 10px; } .decl-spotify-icon { color: #1DB954; font-size: 10px; } .decl-spotify-text { font-family: var(--font-ui); font-size: 8.5px; color: var(--land-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; transition: color var(--dur-slow); } /* Label abaixo do preview */ .decl-mock-label { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--land-sub); letter-spacing: var(--tracking-wide); transition: color var(--dur-slow); } .decl-mock-label span:first-child { color: var(--land-accent); transition: color var(--dur-slow); } /* ══════════════════════════════════════════ 8. COMO FUNCIONA — 3 PASSOS ══════════════════════════════════════════ */ .steps-header { text-align: center; margin-bottom: var(--space-12); } .steps-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin: 0 auto; position: relative; } @media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } .steps-grid::before { content: ''; position: absolute; top: 44px; left: calc(33.33%); right: calc(33.33%); height: 1px; background: linear-gradient(90deg, rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.2), rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.5), rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.2) ); z-index: 0; transition: background var(--dur-slow); } } .step-card { position: relative; z-index: 1; text-align: center; padding: var(--space-8) var(--space-6); background: var(--land-card); border: 1px solid var(--land-border); border-radius: var(--radius-xl); backdrop-filter: blur(12px); transition: background var(--dur-slow), border-color var(--dur-slow), transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-silk); } .step-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.28), 0 0 22px rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.1); } .step-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.08); border: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.22); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); margin: 0 auto var(--space-5); position: relative; transition: background var(--dur-slow), border-color var(--dur-slow); } .step-num { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; background: var(--land-accent); color: var(--obsidian); font-family: var(--font-ui); font-size: 10px; font-weight: 600; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--dur-slow); } .step-title { font-family: var(--font-head); font-size: var(--text-lg); font-weight: 400; color: var(--land-text); margin-bottom: var(--space-3); transition: color var(--dur-slow); } .step-desc { font-family: var(--font-body); font-size: var(--text-base); color: var(--land-sub); line-height: var(--leading-relaxed); transition: color var(--dur-slow); } /* ══════════════════════════════════════════ 9. TEMAS — SELETOR INTERATIVO (muda o site inteiro) ══════════════════════════════════════════ */ .themes-header { text-align: center; margin-bottom: var(--space-10); } .themes-hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--land-sub); letter-spacing: var(--tracking-wide); text-align: center; max-width: 560px; margin: var(--space-3) auto 0; transition: color var(--dur-slow); } .themes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(var(--space-4), 3vw, var(--space-6)); margin: 0 auto; } @media (max-width: 480px) { .themes-grid { grid-template-columns: 1fr; } } .theme-card { position: relative; border-radius: var(--radius-xl); padding: clamp(var(--space-6), 5vw, var(--space-10)); overflow: hidden; cursor: pointer; transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-silk), border-color var(--dur-fast) var(--ease-silk); border: 2px solid transparent; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; } .theme-card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-med) var(--ease-silk); } .theme-card:hover { transform: translateY(-6px) scale(1.02); } .theme-card:hover::before { opacity: 1; } /* Estado ativo (tema selecionado) */ .theme-card.is-active { transform: translateY(-4px) scale(1.01); } .theme-card.is-active::after { content: '✓'; position: absolute; top: var(--space-3); right: var(--space-3); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: var(--font-ui); color: #0C0A0F; } /* Eternal */ .theme-eternal { background: linear-gradient(135deg, #1A0D14, #2a0e1f 50%, #1A0D14); box-shadow: 0 8px 32px rgba(196,30,58,0.20), 0 0 0 1px rgba(212,175,55,0.15); } .theme-eternal::before { background: radial-gradient(circle at 50% 50%, rgba(212,175,55,0.08) 0%, transparent 70%); } .theme-eternal:hover, .theme-eternal.is-active { border-color: rgba(212, 175, 55, 0.65); box-shadow: 0 16px 48px rgba(196,30,58,0.3), 0 0 32px rgba(212,175,55,0.2); } .theme-eternal.is-active::after { background: #D4AF37; } /* Cosmic */ .theme-cosmic { background: linear-gradient(135deg, #0a0818, #130f2a 50%, #0a0818); box-shadow: 0 8px 32px rgba(139,88,177,0.2), 0 0 0 1px rgba(167,139,250,0.15); } .theme-cosmic::before { background: radial-gradient(circle at 50% 50%, rgba(167,139,250,0.08) 0%, transparent 70%); } .theme-cosmic:hover, .theme-cosmic.is-active { border-color: rgba(167, 139, 250, 0.65); box-shadow: 0 16px 48px rgba(139,88,177,0.35), 0 0 32px rgba(167,139,250,0.2); } .theme-cosmic.is-active::after { background: #A78BFA; } /* Bloom */ .theme-bloom { background: linear-gradient(135deg, #fff0f5, #ffd8e8 50%, #fff4f0); box-shadow: 0 8px 32px rgba(255,105,135,0.12), 0 0 0 1px rgba(194,24,91,0.15); } .theme-bloom::before { background: radial-gradient(circle at 50% 50%, rgba(255,174,192,0.18) 0%, transparent 70%); } .theme-bloom:hover, .theme-bloom.is-active { border-color: rgba(194, 24, 91, 0.55); box-shadow: 0 16px 48px rgba(194,24,91,0.2), 0 0 32px rgba(255,174,192,0.18); } .theme-bloom .theme-name, .theme-bloom .theme-desc { color: #2D1A24; } .theme-bloom .theme-arrow { color: rgba(45,26,36,0.45); } .theme-bloom:hover .theme-arrow, .theme-bloom.is-active .theme-arrow { color: #C2185B; } .theme-bloom.is-active::after { background: #C2185B; color: #FFF; } /* Velvet */ .theme-velvet { background: linear-gradient(135deg, #120a04, #2a1500 50%, #120a04); box-shadow: 0 8px 32px rgba(139,69,19,0.2), 0 0 0 1px rgba(218,165,32,0.15); } .theme-velvet::before { background: radial-gradient(circle at 50% 50%, rgba(245,200,66,0.08) 0%, transparent 70%); } .theme-velvet:hover, .theme-velvet.is-active { border-color: rgba(245, 200, 66, 0.60); box-shadow: 0 16px 48px rgba(139,69,19,0.3), 0 0 32px rgba(245,200,66,0.15); } .theme-velvet.is-active::after { background: #F5C842; } .theme-badge-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .theme-popular { font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--obsidian); background: var(--gold); border-radius: var(--radius-full); padding: 3px 10px; } .theme-icon { font-size: var(--text-2xl); } .theme-name { font-family: var(--font-display); font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); font-style: italic; font-weight: 300; color: var(--ivory); margin-bottom: var(--space-2); } .theme-desc { font-family: var(--font-body); font-size: var(--text-sm); color: rgba(250,247,242,0.62); line-height: var(--leading-normal); } .theme-arrow { margin-top: var(--space-4); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: rgba(250,247,242,0.38); display: flex; align-items: center; gap: var(--space-2); transition: color var(--dur-fast), gap var(--dur-fast); } .theme-card:hover .theme-arrow, .theme-card.is-active .theme-arrow { gap: var(--space-4); } /* CTA após seleção de tema */ .themes-cta { text-align: center; margin-top: var(--space-10); } .themes-cta-label { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--land-sub); margin-bottom: var(--space-5); text-align: center; transition: color var(--dur-slow); } /* ══════════════════════════════════════════ 9b. BTN-CTA — overrides por tema (landing page) landing.css não carrega os arquivos de tema, então os overrides ficam aqui. ══════════════════════════════════════════ */ html[data-theme="eternal"] .btn-cta, html[data-theme="eternal"] .nav-cta { background: linear-gradient(135deg, #E8394D, #8B0A24); box-shadow: 0 8px 32px rgba(232, 57, 77, 0.45), 0 2px 8px rgba(0,0,0,0.3); color: #fff; } html[data-theme="eternal"] .btn-cta:hover, html[data-theme="eternal"] .nav-cta:hover { background: linear-gradient(135deg, #C4213A, #6B0818); box-shadow: 0 16px 48px rgba(232, 57, 77, 0.65), 0 4px 16px rgba(0,0,0,0.4); } html[data-theme="eternal"] .btn-cta:focus-visible, html[data-theme="eternal"] .nav-cta:focus-visible { outline-color: #E8394D; } html[data-theme="cosmic"] .btn-cta, html[data-theme="cosmic"] .nav-cta { background: linear-gradient(135deg, #7C3AED, #5B21B6); box-shadow: 0 8px 32px rgba(124, 58, 237, 0.45), 0 2px 8px rgba(0,0,0,0.3); color: #fff; } html[data-theme="cosmic"] .btn-cta:hover, html[data-theme="cosmic"] .nav-cta:hover { background: linear-gradient(135deg, #6D28D9, #4C1D95); box-shadow: 0 16px 48px rgba(124, 58, 237, 0.65), 0 4px 16px rgba(0,0,0,0.4); } html[data-theme="cosmic"] .btn-cta:focus-visible, html[data-theme="cosmic"] .nav-cta:focus-visible { outline-color: #A78BFA; } html[data-theme="bloom"] .btn-cta, html[data-theme="bloom"] .nav-cta { background: linear-gradient(135deg, #E91E8C, #C2185B); box-shadow: 0 8px 32px rgba(233, 30, 140, 0.45), 0 2px 8px rgba(0,0,0,0.2); color: #fff; } html[data-theme="bloom"] .btn-cta:hover, html[data-theme="bloom"] .nav-cta:hover { background: linear-gradient(135deg, #D81B80, #AD1457); box-shadow: 0 16px 48px rgba(233, 30, 140, 0.65), 0 4px 16px rgba(0,0,0,0.3); } html[data-theme="bloom"] .btn-cta:focus-visible, html[data-theme="bloom"] .nav-cta:focus-visible { outline-color: #E91E8C; } html[data-theme="velvet"] .btn-cta, html[data-theme="velvet"] .nav-cta { background: linear-gradient(135deg, #F5C842, #B8860B); box-shadow: 0 8px 32px rgba(245, 200, 66, 0.45), 0 2px 8px rgba(0,0,0,0.3); color: #1A0508; } html[data-theme="velvet"] .btn-cta:hover, html[data-theme="velvet"] .nav-cta:hover { background: linear-gradient(135deg, #F7D05A, #9A6E00); box-shadow: 0 16px 48px rgba(245, 200, 66, 0.65), 0 4px 16px rgba(0,0,0,0.4); color: #1A0508; } html[data-theme="velvet"] .btn-cta:focus-visible, html[data-theme="velvet"] .nav-cta:focus-visible { outline-color: #F5C842; } /* ── BTN-SECONDARY — overrides por tema (a landing não carrega os theme files) ── */ html[data-theme="bloom"] .btn-secondary { color: #C2185B; border-color: rgba(194, 24, 91, 0.55); } html[data-theme="bloom"] .btn-secondary:hover { background: rgba(194, 24, 91, 0.08); color: #C2185B; } html[data-theme="cosmic"] .btn-secondary { color: #A78BFA; border-color: rgba(167, 139, 250, 0.55); } html[data-theme="cosmic"] .btn-secondary:hover { background: rgba(167, 139, 250, 0.10); color: #A78BFA; } html[data-theme="velvet"] .btn-secondary { color: #F5C842; border-color: rgba(245, 200, 66, 0.55); } html[data-theme="velvet"] .btn-secondary:hover { background: rgba(245, 200, 66, 0.08); color: #F5C842; } /* ══════════════════════════════════════════ 10. PLANOS ══════════════════════════════════════════ */ .plans-header { text-align: center; margin-bottom: var(--space-12); } .plans-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin: 0 auto var(--space-8); } @media (min-width: 768px) { .plans-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } } .plan-card { background: var(--land-card); border: 1px solid var(--land-border); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 5vw, var(--space-8)); display: flex; flex-direction: column; gap: var(--space-4); backdrop-filter: blur(14px); transition: background var(--dur-slow), border-color var(--dur-slow), transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-silk); position: relative; overflow: hidden; } .plan-card:hover { transform: translateY(-5px); box-shadow: 0 24px 56px rgba(0,0,0,0.32), 0 0 24px rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.1); } .plan-popular { border-color: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.45); box-shadow: 0 0 0 1px rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.15); } .plan-popular-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--obsidian); background: var(--land-accent); border-radius: var(--radius-full); padding: 4px 14px; margin-bottom: var(--space-2); transition: background var(--dur-slow); } .plan-name { font-family: var(--font-head); font-size: var(--text-xl); font-weight: 400; color: var(--land-text); transition: color var(--dur-slow); } .plan-price { display: flex; align-items: baseline; gap: var(--space-1); } .plan-currency-symbol { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: 500; color: var(--land-sub); transition: color var(--dur-slow); } .plan-amount { font-family: var(--font-display); font-size: clamp(48px, 10vw, 64px); font-weight: 300; font-style: italic; line-height: 1; color: var(--land-text); transition: color var(--dur-slow); } .plan-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.3), transparent); transition: background var(--dur-slow); } .plan-features { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .plan-features li { display: flex; align-items: flex-start; gap: var(--space-3); font-family: var(--font-body); font-size: var(--text-sm); color: var(--land-sub); transition: color var(--dur-slow); } .feat-icon { color: var(--land-accent); flex-shrink: 0; transition: color var(--dur-slow); } .plan-btn { padding: var(--space-4) var(--space-6); border-radius: var(--radius-full); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-wide); cursor: pointer; transition: all var(--dur-fast) var(--ease-silk); text-align: center; border: none; min-height: var(--touch-md); -webkit-tap-highlight-color: transparent; } .plan-btn-primary { background: var(--land-accent); color: var(--obsidian); } .plan-btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.4); } .plan-btn-ghost { background: transparent; border: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.35); color: var(--land-accent); } .plan-btn-ghost:hover { background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.08); } .plans-compare-toggle { display: block; margin: 0 auto; background: transparent; border: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.22); border-radius: var(--radius-full); padding: var(--space-3) var(--space-6); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--land-sub); cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } .plans-compare-toggle:hover { border-color: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.5); color: var(--land-accent); background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.05); } .plans-compare-wrap { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-drift), margin-top 0.3s var(--ease-drift); margin-top: 0; } .plans-compare-wrap.open { max-height: 600px; margin-top: var(--space-8); } .compare-table { width: 100%; max-width: 760px; margin: 0 auto; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-sm); } .compare-table th { padding: var(--space-3) var(--space-4); text-align: center; font-weight: 500; color: var(--land-text); border-bottom: 1px solid var(--land-border); background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.04); transition: color var(--dur-slow), border-color var(--dur-slow), background var(--dur-slow); } .compare-table th:first-child { text-align: left; } .compare-table td { padding: var(--space-3) var(--space-4); text-align: center; color: var(--land-sub); border-bottom: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.07); transition: color var(--dur-slow), border-color var(--dur-slow); } .compare-table td:first-child { text-align: left; } .compare-table td:not(:first-child) { color: var(--land-accent); } .compare-table .no-feat { color: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.25); } /* ══════════════════════════════════════════ 11. DEPOIMENTOS ══════════════════════════════════════════ */ .testimonials-header { text-align: center; margin-bottom: var(--space-12); } .rating-badge { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.08); border: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.2); border-radius: var(--radius-full); padding: 8px 20px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--land-accent); margin-bottom: var(--space-8); transition: background var(--dur-slow), border-color var(--dur-slow), color var(--dur-slow); } .rating-stars { letter-spacing: 2px; } .testimonials-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin: 0 auto; } @media (min-width: 700px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } } .testimonial-card { padding: clamp(var(--space-5), 4vw, var(--space-8)); border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: var(--space-4); background: var(--land-card); border: 1px solid var(--land-border); backdrop-filter: blur(12px); transition: background var(--dur-slow), border-color var(--dur-slow), transform var(--dur-med) var(--ease-spring); } .testimonial-card:hover { transform: translateY(-5px); } .testimonial-stars { color: var(--land-accent); font-size: var(--text-sm); letter-spacing: 3px; transition: color var(--dur-slow); } .testimonial-quote { font-family: var(--font-body); font-size: var(--text-base); font-style: italic; color: var(--land-sub); line-height: var(--leading-relaxed); flex: 1; transition: color var(--dur-slow); } .testimonial-quote::before { content: '"'; font-family: var(--font-display); font-size: 40px; color: var(--land-accent2); line-height: 1; display: block; margin-bottom: -8px; opacity: 0.6; transition: color var(--dur-slow); } .testimonial-author { display: flex; align-items: center; gap: var(--space-3); } .testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--land-accent2), var(--land-accent)); display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--ivory); flex-shrink: 0; transition: background var(--dur-slow); } .testimonial-name { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--land-text); transition: color var(--dur-slow); } .testimonial-city { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--land-sub); transition: color var(--dur-slow); } /* ══════════════════════════════════════════ 13. FAQ ══════════════════════════════════════════ */ .faq-header { text-align: center; margin-bottom: var(--space-12); } .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); } .faq-item { background: var(--land-card); border: 1px solid var(--land-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--dur-fast), background var(--dur-slow); } .faq-item:has(.faq-toggle:checked) { border-color: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.30); } .faq-toggle { display: none; } .faq-label { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); cursor: pointer; gap: var(--space-4); min-height: var(--touch-md); user-select: none; -webkit-tap-highlight-color: transparent; } .faq-q { font-family: var(--font-head); font-size: var(--text-md); font-weight: 400; color: var(--land-text); line-height: var(--leading-snug); transition: color var(--dur-slow); } .faq-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.08); border: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.20); display: flex; align-items: center; justify-content: center; color: var(--land-accent); font-size: 14px; line-height: 1; transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast), color var(--dur-slow), border-color var(--dur-slow); } .faq-toggle:checked ~ .faq-label .faq-icon { transform: rotate(45deg); background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.15); } .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-drift), padding 0.3s var(--ease-drift); padding: 0 var(--space-6); } .faq-toggle:checked ~ .faq-body { max-height: 300px; padding-bottom: var(--space-5); } .faq-a { font-family: var(--font-body); font-size: var(--text-base); color: var(--land-sub); line-height: var(--leading-relaxed); transition: color var(--dur-slow); } /* ══════════════════════════════════════════ 14. CTA FINAL ══════════════════════════════════════════ */ .cta-final-section { text-align: center; position: relative; z-index: 3; /* fade suave no topo — elimina corte seco com seção anterior */ mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%); } .cta-final-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(120px); transition: background var(--dur-slow); } .cta-final-orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, var(--land-orb1) 0%, transparent 65%); top: -80px; left: 50%; transform: translateX(-50%); } .cta-final-orb-2 { width: 350px; height: 350px; background: radial-gradient(circle, var(--land-orb2) 0%, transparent 65%); bottom: -80px; right: -60px; } .cta-final-content { position: relative; z-index: 1; } .cta-final-section .section-heading { font-size: clamp(var(--text-3xl), 8vw, 64px); } .cta-final-sub { font-family: var(--font-display); font-size: clamp(var(--text-lg), 3vw, var(--text-xl)); font-style: italic; font-weight: 300; color: var(--land-sub); margin: var(--space-5) auto var(--space-10); max-width: 460px; transition: color var(--dur-slow); } /* Urgência no CTA final */ .cta-urgency-strip { display: inline-flex; align-items: center; gap: var(--space-3); background: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.08); border: 1px solid rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.18); border-radius: var(--radius-full); padding: 8px 24px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--land-text); margin-top: var(--space-8); transition: background var(--dur-slow), border-color var(--dur-slow), color var(--dur-slow); } /* ══════════════════════════════════════════ 15. FOOTER ══════════════════════════════════════════ */ .footer { background: transparent; padding: var(--space-12) var(--page-padding) var(--space-8); position: relative; z-index: 3; transition: background var(--dur-slow); } /* fade suave na entrada do footer */ .footer::before { content: ''; position: absolute; top: -80px; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.18)); pointer-events: none; z-index: 0; } .footer-inner { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; } .footer-logo { font-family: var(--font-display); font-size: var(--text-2xl); font-style: italic; font-weight: 300; background: linear-gradient(135deg, var(--land-sh-a), var(--land-accent), var(--land-sh-b)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 5s linear infinite; text-decoration: none; } .footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-6); } .footer-links a { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--land-sub); transition: color var(--dur-fast); } .footer-links a:hover { color: var(--land-accent); } .footer-bottom { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: 100%; } @media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } } .footer-copy { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(var(--land-accent-r), var(--land-accent-g), var(--land-accent-b), 0.35); transition: color var(--dur-slow); } .footer-heart { color: var(--land-accent2); animation: heartbeat 2.5s ease-in-out infinite; display: inline-block; } /* ══════════════════════════════════════════ 16. SCROLLBAR ══════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--land-accent), var(--land-sh-a)); border-radius: 3px; } /* ══════════════════════════════════════════ 17. ACESSIBILIDADE ══════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--land-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .bokeh-1, .bokeh-2, .bokeh-3, .float-heart, .scroll-mouse::after, .decl-mock, .envelope-art { animation: none !important; } /* R15-CSS-05: Desativar também transições decorativas (WCAG 2.3.3) */ html, body { transition: none !important; } }