/* ============================================================ BASE — tokens, reset, tipografia, botões. ┌──────────────────────────────────────────────────────────┐ │ PARA QUEM VAI APLICAR A IDENTIDADE VISUAL │ │ │ │ Tudo que define a marca está no bloco DESIGN TOKENS │ │ abaixo. Trocar os valores de lá muda o site inteiro — │ │ nenhuma cor, fonte ou raio está escrito solto no resto │ │ do CSS. Os três arquivos de estilo consomem só tokens. │ │ │ │ Ordem sugerida de trabalho: │ │ 1. --font-display e --font-text (ver nota de fontes) │ │ 2. as cores de marca (--brand-*) │ │ 3. --radius e --border para a "dureza" da marca │ │ 4. assets/wordmark.svg (a marca em si já está pronta) │ │ │ │ NOTA SOBRE FONTES: o site não carrega nada de fora (a │ │ CSP bloqueia). Para usar uma fonte própria, coloque os │ │ arquivos .woff2 em assets/fonts/ e declare o @font-face │ │ no fim deste arquivo — está preparado lá embaixo. │ └──────────────────────────────────────────────────────────┘ ============================================================ */ /* ---- DESIGN TOKENS ---------------------------------------- */ :root { /* Cores de marca — o designer mexe aqui */ --brand-ink: #14100c; /* texto e fundos escuros */ --brand-paper: #f7f3ec; /* fundo claro */ --brand-accent: #b4441a; /* cor de ação e destaques */ --brand-accent-warm: #e08a4c; /* segundo tom do gradiente */ --brand-deep: #16382c; /* verde da seção de troca */ /* Tipografia */ --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tracking-display: -.025em; --tracking-eyebrow: .14em; /* Forma */ --radius: 18px; --radius-sm: 10px; --border: 1px; /* Ritmo */ --wrap: 1180px; --section-y: clamp(4.5rem, 9vw, 8.5rem); /* Movimento — mexer aqui afeta o site inteiro de uma vez */ --ease: cubic-bezier(.22, 1, .36, 1); --dur: .8s; --dur-fast: .32s; } /* ---- Derivados: saem dos tokens acima, não editar ---------- O tema tem três estados: seguir o sistema (padrão), forçado claro e forçado escuro. O botão do cabeçalho grava a escolha e o js/theme.js carimba `data-theme` no antes da primeira pintura — por isso ele é o único script no . Os valores escuros ficam em `--dark-*`, definidos uma vez só; os dois seletores abaixo apenas apontam para eles. Assim ajustar uma cor do tema escuro continua sendo editar um lugar. ------------------------------------------------------------ */ :root { color-scheme: light; --paper: var(--brand-paper); --paper-alt: color-mix(in srgb, var(--brand-paper) 92%, var(--brand-ink)); --ink: var(--brand-ink); --ink-soft: color-mix(in srgb, var(--brand-ink) 62%, var(--brand-paper)); --line: color-mix(in srgb, var(--brand-ink) 15%, var(--brand-paper)); --accent: var(--brand-accent); --accent-soft: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-paper)); --deep: var(--brand-deep); --card: color-mix(in srgb, var(--brand-paper) 96%, #fff); --gradient: linear-gradient(115deg, var(--brand-accent), var(--brand-accent-warm)); --shadow: 0 1px 2px color-mix(in srgb, var(--brand-ink) 6%, transparent), 0 18px 44px color-mix(in srgb, var(--brand-ink) 9%, transparent); --shadow-lift: 0 2px 4px color-mix(in srgb, var(--brand-ink) 8%, transparent), 0 30px 70px color-mix(in srgb, var(--brand-ink) 16%, transparent); /* Paleta escura — os valores moram aqui, e só aqui */ --dark-paper: var(--brand-ink); --dark-paper-alt: color-mix(in srgb, var(--brand-ink) 88%, var(--brand-paper)); --dark-ink: var(--brand-paper); --dark-ink-soft: color-mix(in srgb, var(--brand-paper) 62%, var(--brand-ink)); --dark-line: color-mix(in srgb, var(--brand-paper) 14%, var(--brand-ink)); --dark-accent: color-mix(in srgb, var(--brand-accent) 55%, var(--brand-accent-warm)); --dark-accent-soft: color-mix(in srgb, var(--brand-accent) 22%, var(--brand-ink)); --dark-card: color-mix(in srgb, var(--brand-ink) 92%, var(--brand-paper)); --dark-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .34); --dark-shadow-lift: 0 2px 4px rgba(0, 0, 0, .55), 0 30px 70px rgba(0, 0, 0, .45); } /* Sistema no escuro, e a pessoa não pediu claro explicitamente */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: var(--dark-paper); --paper-alt: var(--dark-paper-alt); --ink: var(--dark-ink); --ink-soft: var(--dark-ink-soft); --line: var(--dark-line); --accent: var(--dark-accent); --accent-soft: var(--dark-accent-soft); --card: var(--dark-card); --shadow: var(--dark-shadow); --shadow-lift: var(--dark-shadow-lift); } } /* Escolha explícita pelo botão, independente do sistema */ :root[data-theme="dark"] { color-scheme: dark; --paper: var(--dark-paper); --paper-alt: var(--dark-paper-alt); --ink: var(--dark-ink); --ink-soft: var(--dark-ink-soft); --line: var(--dark-line); --accent: var(--dark-accent); --accent-soft: var(--dark-accent-soft); --card: var(--dark-card); --shadow: var(--dark-shadow); --shadow-lift: var(--dark-shadow-lift); } /* ---- reset ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.06; letter-spacing: var(--tracking-display); margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.6rem, 6.6vw, 5.2rem); } h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); } h3 { font-size: 1.16rem; font-family: var(--font-text); font-weight: 650; letter-spacing: 0; line-height: 1.3; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-underline-offset: 3px; } img, svg { max-width: 100%; height: auto; } ul { margin: 0; padding: 0; list-style: none; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; } .lead { font-size: clamp(1.04rem, 1.5vw, 1.19rem); color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .74rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0 0 1.2rem; } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gradient); } /* ---- botões ---- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .92rem 1.6rem; border: var(--border) solid transparent; border-radius: 999px; font: inherit; font-weight: 620; font-size: .97rem; text-decoration: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .btn-primary { background: var(--gradient); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-accent) 28%, transparent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px color-mix(in srgb, var(--brand-accent) 38%, transparent); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); } .btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: .7rem 1rem; z-index: 30; } .skip-link:focus { left: .5rem; top: .5rem; } /* ============================================================ FONTES PRÓPRIAS — descomentar quando a identidade trouxer os arquivos. Colocar os .woff2 em assets/fonts/ e depois apontar --font-display / --font-text para elas. @font-face { font-family: "Nome Da Fonte"; src: url("assets/fonts/nome-da-fonte.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } ============================================================ */