/* North — tokens de marca (variáveis + helpers base) * * Fonte da verdade da paleta e tipografia da North extraídas do CSS * de mentorianorth.com em 2026-07-27. Também documentado, em prosa, * em Agents/north/memory/north/marca.md e site.md. * * Toda LP deve importar este arquivo em ANTES de qualquer CSS * próprio. Assim uma mudança de cor/fonte se propaga a todas as LPs. */ /* ---------- Google Fonts (uma linha, três famílias) ---------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Montserrat:ital,wght@0,300..800;1,300..800&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap'); :root { /* ---------- Cores ---------- */ --north-grafite: #262626; /* dominante texto / fundos escuros */ --north-laranja: #FF914D; /* acento (botão, fio, detalhe) — nunca fundo grande */ --north-laranja-alt: #FF904C; /* variação usada no site oficial */ --north-pessego: #FFD5BA; /* fundo suave, apoio */ --north-quase-branco: #FAFAFA; /* fundo claro padrão */ --north-branco: #FFFFFF; /* respiro; texto sobre escuro */ --north-preto: #030712; /* contraste pontual */ /* Aliases semânticos */ --north-fundo: var(--north-quase-branco); --north-fundo-suave: var(--north-pessego); --north-texto: var(--north-grafite); --north-texto-inverso: var(--north-branco); --north-acento: var(--north-laranja); --north-borda: rgba(38, 38, 38, 0.12); /* ---------- Tipografia ---------- */ --font-titulo-editorial: 'Playfair Display', 'EB Garamond', Georgia, serif; --font-apoio-serif: 'EB Garamond', Georgia, serif; --font-corpo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* Escala tipográfica base (fluid clamp entre mobile e desktop) */ --fs-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem); --fs-h1: clamp(2rem, 3vw + 1rem, 3rem); --fs-h2: clamp(1.5rem, 2vw + 0.8rem, 2.25rem); --fs-h3: clamp(1.25rem, 1vw + 0.8rem, 1.5rem); --fs-body: 1rem; --fs-small: 0.875rem; /* Espaçamento em caixa alta (Montserrat, característico da marca) */ --ls-caps: 0.18em; /* ---------- Espaço ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; /* ---------- Layout ---------- */ --container-max: 1120px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* ---------- Elevação (usar com parcimônia) ---------- */ --shadow-sm: 0 1px 2px rgba(3, 7, 18, 0.06); --shadow-md: 0 6px 20px rgba(3, 7, 18, 0.08); } /* ---------- Reset mínimo e defaults ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-corpo); font-size: var(--fs-body); line-height: 1.6; color: var(--north-texto); background: var(--north-fundo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3 { font-family: var(--font-titulo-editorial); font-weight: 500; line-height: 1.15; margin: 0 0 var(--sp-4); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 var(--sp-4); } a { color: var(--north-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* ---------- Helpers de marca ---------- */ /* Palavra em serifada itálico — combinação clássica North */ .n-emocao { font-family: var(--font-titulo-editorial); font-style: italic; font-weight: 400; } /* Etiqueta Montserrat caixa alta espaçada */ .n-caps { font-family: var(--font-corpo); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 600; font-size: var(--fs-small); } /* Container padrão */ .n-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-6); } /* Botão acento (laranja pequeno) */ .n-btn { display: inline-block; padding: var(--sp-3) var(--sp-6); background: var(--north-acento); color: var(--north-preto); border: none; border-radius: var(--radius-md); font-family: var(--font-corpo); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-small); text-decoration: none; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; } .n-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Fio laranja (usado como separador editorial) */ .n-hr { width: 64px; height: 3px; background: var(--north-acento); border: 0; margin: var(--sp-8) 0; } /* Assinatura padrão do rodapé de peças */ .n-signature { font-family: var(--font-corpo); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-small); color: var(--north-texto); opacity: 0.7; }