/* * style-forms.css * CSS exclusivo para /forms/passageiro/ (e qualquer outra página de formulário). * Carregado NO LUGAR de style.css + tailwind-purged.css nessas páginas. * * Contém APENAS o que a página de formulário realmente usa: * reset, variáveis, fontes de fallback e os ~80 seletores necessários. * Tamanho: ~4KB vs ~22KB do style.css + tailwind-purged.css combinados. */ /* ── RESET MÍNIMO ── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* ── VARIÁVEIS GLOBAIS ── */ :root { /* Paleta principal (LP) */ --primary: #1a5f7a; --primary-light: #e8f4f8; --accent: #10b981; --bg: #ffffff; --muted: #f3f4f6; --text: #111827; --sub: #374151; --border: #e5e7eb; --shadow: 0 10px 25px rgba(0, 0, 0, .08); --radius: 14px; --white: #ffffff; --gray-text: #4b5563; --gold-light: #e8c97a; /* Paleta da página de forms */ --navy: #0f1e35; --navy-mid: #1e3a5f; --gold: #b89455; --gold-light-forms: #d4af74; --text-light: #e8edf3; --muted-light: #9fb3c8; } /* ── BODY ── */ body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: var(--bg); line-height: 1.45; } /* ── SCROLL REVEAL (herdado do base) ── */ .section-hidden { opacity: 0; transform: translateY(38px); will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { .section-hidden { transition: none !important; opacity: 1; transform: none; will-change: auto; } } /* ════════════════════════════════════════════════════════════ ESTILOS DA PÁGINA DE FORMULÁRIO (equivalente ao {% block extra_styles %} do forms.html, mas separado para evitar CSS inline no ) ════════════════════════════════════════════════════════════ */ /* ── RESET LOCAL ── */ .forms-page *, .forms-page *::before, .forms-page *::after { box-sizing: border-box; } /* ── PAGE ── */ .forms-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--navy); position: relative; overflow: hidden; } .forms-page::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 50% at 50% -5%, rgba(184, 148, 85, .12) 0%, transparent 65%), radial-gradient(ellipse 55% 45% at 95% 100%, rgba(30, 58, 95, .8) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* ── HEADER ── */ .forms-header { position: relative; z-index: 1; padding: 1.5rem 0 0; text-align: center; opacity: 0; animation: fadeUp .45s ease forwards; } .forms-logo { height: 40px; width: auto; filter: brightness(0) invert(1); display: block; margin: 0 auto; } /* ── BADGE ── */ .forms-badge { display: inline-flex; align-items: center; gap: .45rem; background: rgba(184, 148, 85, .12); border: 1px solid rgba(184, 148, 85, .3); border-radius: 999px; padding: .32rem .85rem; font-size: .7rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-light-forms); margin: 1.1rem auto .9rem; } .forms-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } /* ── TÍTULO E SUBTÍTULO ── */ .forms-title { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 3.5vw, 1.85rem); font-weight: 600; color: #fff; line-height: 1.25; max-width: 500px; margin: 0 auto .7rem; padding: 0 4rem; } .forms-subtitle { font-size: .9rem; color: var(--muted-light); line-height: 1.65; max-width: 400px; margin: 0 auto 0; padding: 0 1rem; } .forms-subtitle strong { color: var(--text-light); } /* ── TRUST BAR ── */ .forms-trust { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem 1.25rem; padding: 1.5rem 1.5rem 0; opacity: 0; animation: fadeUp .45s ease .1s forwards; } .forms-trust-item { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--muted-light); } .forms-trust-item svg { width: 13px; height: 13px; stroke: var(--gold); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ── BODY ── */ .forms-body { position: relative; z-index: 1; flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 1.75rem 1.25rem 3rem; opacity: 0; animation: fadeUp .45s ease .2s forwards; } /* ── CARD DO FORMULÁRIO ── */ .forms-container { width: 100%; max-width: 700px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(184, 148, 85, .22); border-radius: 16px; overflow: hidden; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 40px rgba(0, 0, 0, .3), 0 1px 0 rgba(184, 148, 85, .18) inset; } .forms-container iframe { display: block; width: 100%; border: none; } /* ── PLACEHOLDER enquanto o Tally carrega ── */ .tally-placeholder { display: flex; align-items: center; justify-content: center; min-height: 420px; color: var(--muted-light); font-size: .85rem; gap: .6rem; } .tally-placeholder svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; animation: spin 1s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* ── RODAPÉ ── */ .forms-footer { position: relative; z-index: 1; text-align: center; padding: 0 1.5rem 2.5rem; font-size: .7rem; color: var(--muted-light); line-height: 1.6; opacity: 0; animation: fadeUp .45s ease .3s forwards; } .forms-footer a { color: var(--gold-light-forms); text-decoration: none; } .forms-footer a:hover { text-decoration: underline; } .forms-footer-oab { margin-top: .4rem; font-size: .65rem; opacity: .55; } /* ── ANIMAÇÃO ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ── MOBILE ── */ @media (max-width: 480px) { .forms-body { padding: 1.5rem 1rem 2.5rem; } } @media (prefers-reduced-motion: reduce) { .forms-header, .forms-trust, .forms-body, .forms-footer { opacity: 1; animation: none; transform: none; } }