PUBLIC SCREEN REDESIGN STYLES — EMPÓRIO VELEIRO Harmonic Palette: - Hero & Rodapé: Deep Navy #0a162b (brand identity) - Body & Content: Soft Sand #f7f5f0 / #faf8f4 - Highlights: Matte Gold / Champagne #c9a24b - CTAs: #ff4b30 ==================================================== */ #public-plans-screen { background-color: var(--sand-bg); color: var(--navy-base); min-height: 100vh; display: flex; flex-direction: column; position: relative; } .public-topbar { background: var(--navy-base); border-bottom: 2px solid var(--gold); padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 18px rgba(10, 22, 43, 0.25); backdrop-filter: blur(8px); } /* Section Wrappers & Container */ .pub-section { padding: 5rem 1.5rem; position: relative; } .pub-container { max-width: 1180px; margin: 0 auto; } .pub-header-center { text-align: center; max-width: 760px; margin: 0 auto 3.25rem; } .pub-tag { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--gold-dark); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.75rem; background: rgba(201, 162, 75, 0.12); border: 1px solid var(--gold-border); padding: 0.35rem 0.9rem; border-radius: 999px; } .pub-tag svg { width: 14px; height: 14px; fill: var(--gold-dark); } .pub-title { font-size: 2.35rem; line-height: 1.2; color: var(--navy-base); margin: 0 0 1rem; letter-spacing: -0.015em; font-weight: 700; } .pub-desc { font-size: 1.05rem; line-height: 1.65; color: var(--text-muted); margin: 0; } /* 1. HERO SECTION (Momento de Marca em Azul-Marinho Nobre) */ .pub-hero-section { padding: 4.5rem 1.5rem 4rem; background: radial-gradient(ellipse 90% 70% at 50% 10%, #15294a 0%, var(--navy-base) 100%); color: #ffffff; position: relative; overflow: hidden; border-bottom: 2px solid var(--gold); } .pub-hero-grid { display: grid; grid-template-columns: 1.15fr 0.95fr; gap: 3.5rem; align-items: center; } .pub-hero-left { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .pub-hero-brand-badge { display: inline-flex; align-items: center; gap: 0.85rem; background: rgba(10, 22, 43, 0.75); border: 1px solid var(--gold-border); border-radius: 14px; padding: 0.45rem 1rem 0.45rem 0.45rem; margin-bottom: 1.75rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .pub-hero-brand-name { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.05em; color: #ffffff; line-height: 1.2; } .pub-hero-brand-sub { font-size: 0.7rem; color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .pub-hero-h1 { font-size: 3.25rem; line-height: 1.15; margin: 0 0 1.35rem; color: #ffffff; letter-spacing: -0.02em; font-weight: 800; } .pub-hero-lead { font-size: 1.18rem; line-height: 1.65; color: rgba(255, 255, 255, 0.88); margin: 0 0 2rem; max-width: 580px; }Nova Paleta Empório Veleiro — Suave, Nobre & Arejada: Fundo geral: Areia suave / Off-white (#f7f5f0 e #faf8f4) Azul-marinho da logo (#0a162b): detalhe e contraste, menu e cabeçalho Dourado fosco / Champanhe (#c9a24b e #946f23 acessível): palavras-chave, divisores e selos Vermelho-coral (#ff4b30): botões de ação e conversão */ --sand-bg: #f7f5f0; --sand-subtle: #faf8f4; --surface-white: #ffffff; --navy-base: #0a162b; --navy-dark: #07101f; --navy-surface: #0f203b; --navy-elevated: #15294a; --gold: #c9a24b; --gold-dark: #946f23; /* Alto contraste para texto sobre fundo claro (4.6:1) */ --gold-light: #e8d08e; --gold-subtle: rgba(201, 162, 75, 0.14); --gold-border: rgba(201, 162, 75, 0.42); --gold-divider: rgba(201, 162, 75, 0.3); --bg: #f7f5f0; --surface: #ffffff; --text: #0a162b; --text-muted: #5a6b82; --border: #e6dfd3; --accent: #0a162b; --accent-contrast: #ffffff; --accent-red: #ff4b30; --accent-red-hover: #e64329; --accent-red-light: #ff725c; --red-text: #d93820; --red-bg: rgba(255, 75, 48, 0.08); --red-border: rgba(255, 75, 48, 0.28); --sidebar-width: 260px; } =======