/* ============================================================= FÁBRICA DE MILHAS — Design System v5 (Tokens) Baseado no Brandbook v1.0 — março 2026. v5 promove --grad-emphasis. --- v4 mantém a disciplina do v3 (tokens-first, no raw values), mas adota a identidade visual nova: paleta dupla de azul + acentos amarelo/laranja, gradientes oficiais, H1 Bold 60px. ============================================================= */ /* ------------------------------------------------------------- FONTS Brandbook explicita Inter via Google Fonts (Light 300 + Bold 700). Mantemos arquivos self-hosted como fallback offline e p/ perf. ------------------------------------------------------------- */ @font-face { font-family: 'Inter'; src: url("/assets/tenants/fabrica_de_milhas/Inter_18pt-Light-faa0e5e8.woff2") format('woff2'), url("/assets/tenants/fabrica_de_milhas/Inter_18pt-Light-faa0e5e8.woff2") format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("/assets/tenants/fabrica_de_milhas/Inter_18pt-Regular-ae5e94c0.woff2") format('woff2'), url("/assets/tenants/fabrica_de_milhas/Inter_18pt-Regular-ae5e94c0.woff2") format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url("/assets/tenants/fabrica_de_milhas/Inter_18pt-Bold-045d18c3.woff2") format('woff2'), url("/assets/tenants/fabrica_de_milhas/Inter_18pt-Bold-045d18c3.woff2") format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; } :root { /* =========================================================== PALETA DE MARCA — do brandbook v1.0 Quatro cores principais, cada uma com 4 tints (100/70/40/10). =========================================================== */ /* ---- PRIMÁRIA — Azure Light ---- RGB 26, 179, 255. Header, gradientes, CTAs. */ --azure-light: #1AB3FF; --azure-light-70: #5CC7FF; /* tint 70% — hover claro */ --azure-light-40: #A3DDFF; /* tint 40% — bg suave */ --azure-light-10: #E8F7FF; /* tint 10% — bg quase branco */ /* ---- SECUNDÁRIA — Azure Deep ---- RGB 0, 76, 230. Header, logo, links, botões. */ --azure-deep: #004CE6; --azure-deep-70: #4D7EEE; /* tint 70% — hover */ --azure-deep-40: #99B7F5; /* tint 40% */ --azure-deep-10: #E5EDFD; /* tint 10% — bg sutil */ /* ---- ACCENT — Amarelo Login ---- RGB 252, 200, 0. Ação de login, sidebar light, destaque. */ --yellow: #FCB100; --yellow-70: #FDC74D; --yellow-40: #FEE099; --yellow-10: #FFF7E5; /* Variante "Login button" do brandbook (#FFC800 vs #FCB100 — */ /* o brandbook usa #FFC800 no botão de login específico) */ --yellow-login: #FFC800; /* ---- ACCENT — Laranja Tags ---- RGB 255, 159, 26. Banner, tags, destaque secundário. */ --orange: #FF9F1A; --orange-70: #FFBB5C; --orange-40: #FFD5A3; --orange-10: #FFF4E5; /* =========================================================== NEUTROS — estrutura mínima pra UI funcionar Brandbook é silencioso sobre neutros; assumimos branco puro como bg (conforme PDF) + ink near-black + meta gray declarado. =========================================================== */ --white: #FFFFFF; /* page background — bate com o PDF */ --paper-2: #F5F7FA; /* diferenciador de seção (frio, combina c/ azul) */ --paper-3: #E7ECF2; /* bordas, separadores */ --ink: #111111; /* headings, UI principal */ --ink-2: #2D3748; /* body, texto secundário */ --ink-3: #6C7C93; /* meta/caption — declarado no brandbook */ --ink-4: #A0AEC0; /* placeholder, muted */ /* =========================================================== GRADIENTES OFICIAIS — peça central da identidade v4 v3 proibia gradientes; v4 os formaliza como tokens. =========================================================== */ --grad-header: linear-gradient(90deg, var(--azure-light), var(--azure-deep)); --grad-cta: linear-gradient(90deg, var(--azure-light), var(--azure-deep)); --grad-section-guia: linear-gradient(135deg, var(--azure-light), var(--azure-deep)); --grad-banner-overlay: linear-gradient(to bottom, transparent, #000000); --grad-banner-overlay-h: linear-gradient(to right, transparent, rgba(0,0,0,0.7)); /* ----- v5: gradiente de ÊNFASE ----- Azul-petróleo vertical (#18AEFD → #004D75). Promoção de v4 a v5 a partir do uso recorrente em tabelas comparativas, cards featured, verdict bars e frames de destaque. Coexiste com --grad-section-guia (royal blue diagonal); use --grad-emphasis para chrome de DADOS, reserve --grad-section-guia para chrome editorial/marketing. */ --grad-emphasis: linear-gradient(180deg, #18AEFD 0%, #004D75 100%); /* =========================================================== FUNCIONAIS — semânticos =========================================================== */ --ok: #1E7A3F; --ok-tint: #E1F0E5; --warn: #B7791F; --warn-tint: #F7EDD4; --err: #B42318; --err-tint: #F8E3E0; /* =========================================================== ALPHAS — pra overlays/notes evitando rgba literal de marca =========================================================== */ --ink-a05: rgba(17,17,17,0.05); --ink-a08: rgba(17,17,17,0.08); --ink-a12: rgba(17,17,17,0.12); --ink-a25: rgba(17,17,17,0.25); --white-a60: rgba(255,255,255,0.60); --white-a80: rgba(255,255,255,0.80); /* =========================================================== TYPE — Inter only Brandbook: H1 60px / H2 40px / H3 30px / Body 18px / Caption 12px Pesos: Light 300 e Bold 700 =========================================================== */ --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Mono não está no brandbook; extensão v4 para números/saldos de milhas. */ /* Escala — bate com o brandbook + alguns degraus auxiliares. Root: 16px. */ --fs-12: 0.75rem; /* caption / meta */ --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem; --fs-16: 1rem; /* body alternativo */ --fs-18: 1.125rem; /* body / descrições — brandbook */ --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; /* H3 — brandbook */ --fs-40: 2.5rem; /* H2 — brandbook */ --fs-60: 3.75rem; /* H1 banner — brandbook */ /* Line heights */ --lh-display: 1; --lh-tight: 1.12; --lh-body: 1.7; /* brandbook explícito p/ body */ --lh-long: 1.7; /* Letter-spacing */ --ls-h1: -1px; /* brandbook: H1 + H2 = -1px */ --ls-h2: -1px; --ls-tight: -0.02em; --ls-base: 0; --ls-wide: 0.08em; /* eyebrow / uppercase labels */ /* Pesos — Inter Light 300 + Bold 700 (brandbook) */ --w-light: 300; --w-reg: 400; --w-med: 500; --w-bold: 700; /* =========================================================== SPACING (grid de 4pt) — herdado do v3 sem mudança =========================================================== */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* =========================================================== RADII — v4 introduz 15/16 (brandbook) ao lado dos do v3 =========================================================== */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 8px; --r-6: 12px; --r-btn: 15px; /* Primary CTA — brandbook */ --r-btn-login: 16px; /* Login button — brandbook */ --r-pill: 999px; /* =========================================================== BORDERS, SHADOWS, MOTION, LAYOUT =========================================================== */ --bd: 1px solid var(--paper-3); --bd-strong: 1px solid var(--ink); --bd-muted: 1px solid var(--ink-a08); --bd-azure: 1px solid var(--azure-deep); --sh-1: 0 1px 0 var(--ink-a05), 0 1px 2px var(--ink-a05); --sh-2: 0 1px 0 var(--ink-a05), 0 8px 20px -8px var(--ink-a12); --sh-cta: 0 4px 16px -4px rgba(0, 76, 230, 0.30); --sh-focus: 0 0 0 3px rgba(26, 179, 255, 0.30); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --container: 1200px; --gutter: 24px; } /* ============================================================= SEMANTIC CLASSES — use estas em vez de estilar texto à mão ============================================================= */ /* Banner / Hero — H1 60px Bold (brandbook) */ .u-banner-title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: clamp(2.5rem, 6vw, var(--fs-60)); line-height: var(--lh-display); letter-spacing: var(--ls-h1); color: var(--ink); } /* Section Title — H2 40px Bold (brandbook) */ .u-section-title { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: clamp(1.875rem, 4vw, var(--fs-40)); line-height: var(--lh-tight); letter-spacing: var(--ls-h2); color: var(--ink); } /* Info Title — H3 30px Bold (brandbook) */ .u-info-title { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-30); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--ink); } /* Compat aliases — u-h1/h2/h3 são apelidos das classes brandbook acima. Quem escrever .u-h1 herda exatamente os mesmos estilos. */ .u-h1 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: clamp(2.5rem, 6vw, var(--fs-60)); line-height: var(--lh-display); letter-spacing: var(--ls-h1); color: var(--ink); } .u-h2 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: clamp(1.875rem, 4vw, var(--fs-40)); line-height: var(--lh-tight); letter-spacing: var(--ls-h2); color: var(--ink); } .u-h3 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-30); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--ink); } .u-h4 { font-family: var(--font-sans); font-size: var(--fs-24); font-weight: var(--w-bold); line-height: var(--lh-tight); color: var(--ink); } /* Lead / Body / Small / Micro */ .u-lead { font-family: var(--font-sans); font-size: var(--fs-20); font-weight: var(--w-light); line-height: var(--lh-body); color: var(--ink-2); } .u-body { font-family: var(--font-sans); font-size: var(--fs-18); font-weight: var(--w-light); line-height: var(--lh-body); color: var(--ink-2); } .u-small { font-family: var(--font-sans); font-size: var(--fs-14); line-height: var(--lh-body); color: var(--ink-3); } .u-micro { font-family: var(--font-sans); font-size: var(--fs-12); line-height: var(--lh-body); color: var(--ink-3); } /* Caption / Meta — brandbook: 12px Bold, color #6C7C93 */ .u-caption, .u-meta { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: var(--w-bold); line-height: 1.4; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3); } /* Eyebrow — kicker acima de títulos */ .u-eyebrow { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: var(--w-bold); line-height: 1; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--azure-deep); } /* Mono — números/saldos. Extensão v4. */ .u-mono { font-family: var(--font-mono); font-size: var(--fs-14); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); } .u-mono-lg { font-family: var(--font-mono); font-size: var(--fs-30); font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); } /* Prose — long-form blog content */ .u-prose { font-family: var(--font-sans); font-size: var(--fs-18); font-weight: var(--w-light); line-height: var(--lh-body); color: var(--ink-2); max-width: 64ch; } .u-prose p + p { margin-top: 1em; } .u-prose a { color: var(--azure-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .u-prose a:hover { color: var(--azure-light); } .u-prose h2 { font-family: var(--font-sans); font-size: var(--fs-40); font-weight: var(--w-bold); letter-spacing: var(--ls-h2); color: var(--ink); margin: 1.6em 0 0.5em; line-height: var(--lh-tight); } .u-prose h3 { font-family: var(--font-sans); font-size: var(--fs-30); font-weight: var(--w-bold); color: var(--ink); margin: 1.4em 0 0.4em; letter-spacing: var(--ls-tight); } .u-prose blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 3px solid var(--azure-light); font-family: var(--font-sans); font-weight: var(--w-light); font-size: var(--fs-24); line-height: 1.4; color: var(--ink); } /* ============================================================= RESET-LITE ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-18); font-weight: var(--w-light); line-height: var(--lh-body); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }