/* ========================================================================== Garimpo ยท Design Tokens Fonte: Garimpo Brand Identity Guidelines, Version 1.0, 2024. Cada token marcado [manual] sai literal do PDF. Cada token marcado [extensao] nao existe no manual e foi derivado para uso em tela. Nao edite valores [manual] sem a cliente aprovar por escrito. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. PALETA PRIMARIA [manual 3.2] Os quatro unicos tons que sustentam qualquer comunicacao da marca. ---------------------------------------------------------------------- */ --gp-nightskye: #000A1F; /* rgb(0 10 31) tambem grafado DarkSkye na pag. 27 */ --gp-garimpo: #009EFF; /* rgb(0 158 255) a cor da marca */ --gp-lime: #D7FFC2; /* rgb(215 255 194) */ --gp-mint: #EFFFE6; /* rgb(239 255 230) */ /* ---------------------------------------------------------------------- 2. PALETA SECUNDARIA [manual 3.3] Uso pontual, sempre ancorada na primaria. Ver escopo em base.css. ---------------------------------------------------------------------- */ --gp-sky: #BAEBFF; --gp-capri: #483CFF; --gp-midnight: #002847; --gp-pink: #FFB3FD; --gp-rose: #FF61EF; --gp-orchid: #3D1146; --gp-vanilla: #FFFFED; --gp-peach: #FDD6BA; --gp-sangria: #FF6333; --gp-claret: #511124; --gp-branco: #FFFFFF; /* ---------------------------------------------------------------------- 3. TIPOGRAFIA [manual 4.1 a 4.3] DM Sans e a fonte padrao. Bricolage Grotesque Condensed entra so em display, em pouca quantidade e tamanho grande. ---------------------------------------------------------------------- */ --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Bricolage Grotesque", "DM Sans", ui-sans-serif, system-ui, sans-serif; /* Pesos usados. Regra do manual: pule um peso para garantir contraste. Nunca combine Regular com Medium. */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* Eixo de largura do Bricolage variavel. 75% = o corte Condensed. */ --display-stretch: 75%; /* Entrelinhamento do manual [manual 4.6] */ --lh-display: 0.8; /* 80% */ --lh-headline: 1; /* 100% */ --lh-subhead: 1.1; /* 110% */ --lh-brand-body: 1.2; /* 120%, valor impresso do manual */ --lh-body: 1.55; /* [extensao] leitura em tela, ver LEIA-ME */ --lh-lead: 1.4; /* [extensao] */ /* Tracking do manual, convertido de milesimos de em para em [manual 4.6] 0 a 19pt: 0 | 20 a 39pt: -5 | 40 a 59pt: -10 | acima de 60pt: -20 */ --tr-display: -0.01em; /* -10 */ --tr-headline: -0.02em; /* -20 */ --tr-subhead: -0.005em; /* -5 */ --tr-body: 0; /* 0 */ --tr-label: 0.05em; /* 50, caixa alta */ /* Escala fluida [extensao a partir das proporcoes do manual 4.4 e 4.6] Regra herdada: subtitulo no maximo 50% do titulo, corpo no maximo 50% da altura de caixa alta do subtitulo. Razao entre degraus >= 1.29. */ --fs-display: clamp(3.5rem, 1.6rem + 7.2vw, 6rem); /* 56 a 96 */ --fs-h1: clamp(2.75rem, 1.5rem + 4.5vw, 4.25rem); /* 44 a 68 */ --fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3rem); /* 32 a 48 */ --fs-h3: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); /* 24 a 32 */ --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18 a 22 */ --fs-body: clamp(1rem, 0.96rem + 0.14vw, 1.0625rem); /* 16 a 17 */ --fs-small: 0.875rem; /* 14 */ --fs-label: 0.75rem; /* 12, caixa alta */ /* Medida de leitura */ --measure: 68ch; --measure-tight: 46ch; /* ---------------------------------------------------------------------- 4. GRADE E ESPACO [manual 5.1] Formula do manual: lado mais longo dividido por 25. Em tela o lado mais longo e a maior dimensao da viewport. O clamp evita margem absurda em monitor largo e em celular muito alto. ---------------------------------------------------------------------- */ --margem: clamp(1.25rem, max(100vw, 100vh) / 25, 5rem); /* Largura do logo = 2x a margem [manual 5.4] */ --logo-w: calc(var(--margem) * 2); /* Espaco livre ao redor do logo = 100% da altura do logo [manual 2.4] */ --logo-clearspace: 1; /* Altura minima do logo em tela [manual 2.4] */ --logo-min-h: 20px; /* Escala de espaco [extensao], base 4px */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 10rem; /* Respiro vertical de secao [extensao] */ --secao-y: clamp(4rem, 2rem + 8vw, 10rem); /* Largura util maxima do conteudo [extensao] */ --container: 76rem; /* ---------------------------------------------------------------------- 5. RAIO [extensao, lido das formas de botao e badge do manual 6.2] ---------------------------------------------------------------------- */ --r-1: 10px; /* retangulo arredondado */ --r-2: 14px; /* squircle */ --r-3: 20px; --r-pill: 999px; /* ---------------------------------------------------------------------- 6. LINHA [extensao] ---------------------------------------------------------------------- */ --linha: 1px; /* ---------------------------------------------------------------------- 7. MOVIMENTO [extensao, o manual nao trata de motion] Sem bounce e sem elastico. A marca pede sensacao de sistema, nao de brinquedo. Saida exponencial em tudo. ---------------------------------------------------------------------- */ --d-1: 120ms; --d-2: 180ms; --d-3: 260ms; --d-4: 420ms; --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* ---------------------------------------------------------------------- 8. CAMADAS [extensao] ---------------------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ========================================================================== TEMA ESCURO O tema da landing Garimpo de Viajantes. Fundo NightSkye, texto Mint, acento Garimpo reservado ao CTA. Contrastes medidos (WCAG 2.1, texto sobre fundo): Mint sobre NightSkye ........ 18,92:1 AAA Lime sobre NightSkye ........ 17,84:1 AAA Garimpo sobre NightSkye ...... 6,90:1 AA NightSkye sobre Garimpo ...... 6,90:1 AA Sky sobre Midnight .......... 11,77:1 AAA ink-2 (Mint 72%) ............. 9,77:1 AAA ink-3 (Mint 55%) ............. 6,01:1 AA ========================================================================== */ [data-tema="escuro"] { color-scheme: dark; --fundo: var(--gp-nightskye); --superficie: var(--gp-midnight); --superficie-sutil: color-mix(in srgb, var(--gp-mint) 5%, var(--gp-nightskye)); --ink: var(--gp-mint); --ink-2: color-mix(in srgb, var(--gp-mint) 72%, transparent); --ink-3: color-mix(in srgb, var(--gp-mint) 55%, transparent); --acento: var(--gp-garimpo); --acento-ink: var(--gp-nightskye); /* texto sobre o acento */ --realce: var(--gp-lime); /* numeros e destaque tipografico */ --regua: color-mix(in srgb, var(--gp-mint) 14%, transparent); --regua-2: color-mix(in srgb, var(--gp-mint) 26%, transparent); --foco: var(--gp-garimpo); /* Logo em fundo escuro: peca inteira em azul Garimpo [manual 2.6, opcao 1]. A versao de duas cores nao serve aqui, porque a marca nominativa e NightSkye e sumiria dentro do proprio fundo. */ --logo-icon: var(--gp-garimpo); --logo-ink: var(--gp-garimpo); } /* ========================================================================== TEMA CLARO Documentos, apresentacao, e-mail e as paginas do proprio manual. Atencao: Garimpo azul sobre branco da 2,86:1 e reprova em corpo de texto. Nesse tema o azul so entra como preenchimento, nunca como cor de texto. ========================================================================== */ [data-tema="claro"] { color-scheme: light; --fundo: var(--gp-vanilla); --superficie: var(--gp-branco); --superficie-sutil: var(--gp-mint); --ink: var(--gp-nightskye); --ink-2: color-mix(in srgb, var(--gp-nightskye) 72%, transparent); --ink-3: color-mix(in srgb, var(--gp-nightskye) 55%, transparent); --acento: var(--gp-garimpo); --acento-ink: var(--gp-nightskye); --realce: var(--gp-nightskye); --regua: color-mix(in srgb, var(--gp-nightskye) 14%, transparent); --regua-2: color-mix(in srgb, var(--gp-nightskye) 26%, transparent); --foco: var(--gp-nightskye); /* Logo em fundo claro: as duas cores originais [manual 2.3]. */ --logo-icon: var(--gp-garimpo); --logo-ink: var(--gp-nightskye); }