/* ============================================================ 01 · TOKENS ESTE E O UNICO ARQUIVO DO PROJETO COM VALOR DE COR LITERAL. Qualquer hex em outro .css e bug. Verificacao: grep -rniE '#[0-9a-fA-F]{3,8}\b' css/ --include='*.css' \ | grep -v '01-tokens.css' (deve retornar zero linhas; o data-URI do grao usa %23, nao #) ============================================================ */ @layer tokens { :root{ /* ---- COR ------------------------------------------------- Proporcao de uso: 60 / 30 / 8 / 2. Base dominante / base secundaria / tipografia / latao. O latao nunca passa de 2% da area de uma peca: filete, simbolo, numero, botao. Nunca fundo, nunca bloco cheio. ---------------------------------------------------------- */ --verde: #0E2A20; /* base dominante */ --offwhite: #F2EFE8; /* base secundaria */ --preto: #0B0B0B; /* tipografia sobre claro */ --latao: #B9A16B; /* acento, teto de 2% */ --verde-2: #17392C; /* marca d'agua, blocos internos */ --verde-3: #1E4034; /* hairline sobre verde */ --verde-texto: #9CB0A4; /* texto secundario SOBRE VERDE */ /* ---- CONTRASTE MEDIDO (WCAG 2.1, todos os 21 pares) ------- PARES DE TEXTO APROVADOS (AA, >= 4.5:1) offwhite / preto ......... 17.14 verde / offwhite ......... 13.34 offwhite / verde-2 ....... 11.03 offwhite / verde-3 ........ 9.95 preto / verde-texto ....... 8.59 preto / latao ............. 7.85 verde / verde-texto ....... 6.68 verde / latao ............. 6.11 verde-2 / verde-texto ..... 5.52 latao / verde-2 ........... 5.05 verde-3 / verde-texto ..... 4.98 latao / verde-3 ........... 4.56 PARES DE TEXTO REPROVADOS — nunca use como texto: latao / offwhite .......... 2.18 <- o erro mais provavel verde-texto / offwhite .... 2.00 <- --verde-texto e SO sobre verde latao / verde-texto ....... 1.09 PARES DE CAMADA — razao baixa de proposito, nao sao texto: verde / verde-3 ........... 1.34 hairline verde / verde-2 ........... 1.21 marca d'agua verde-2 / verde-3 ......... 1.11 bloco sobre bloco ---------------------------------------------------------- */ /* ---- ESPACO — base 8px ----------------------------------- */ --space-05: .25rem; /* 4 */ --space-1: .5rem; /* 8 */ --space-2: 1rem; /* 16 */ --space-3: 1.5rem; /* 24 */ --space-4: 2rem; /* 32 */ --space-6: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-12: 6rem; /* 96 */ --space-16: 8rem; /* 128 */ --space-20: 10rem; /* 160 */ --space-28: 14rem; /* 224 */ /* ---- TIPO — razao 1.333 a partir de 16px ------------------ Todo clamp() do projeto mora aqui. Nenhum outro arquivo escreve clamp. ---------------------------------------------------------- */ --fs-100: .75rem; /* 12 · rotulo */ --fs-200: .875rem; /* 14 · legenda */ --fs-300: 1rem; /* 16 · corpo */ --fs-400: 1.333rem; /* 21 */ --fs-500: 1.777rem; /* 28 */ --fs-600: 2.369rem; /* 38 */ --fs-700: clamp(2.369rem, 1.55rem + 3.5vw, 3.157rem); --fs-800: clamp(2.75rem, 1.40rem + 5.8vw, 4.209rem); --fs-900: clamp(3.157rem, 1.10rem + 8.8vw, 5.61rem); --lh-tight: 1.02; --lh-heading: 1.1; --lh-body: 1.6; /* tracking das tres vozes */ --tr-manchete: -0.03em; /* faixa do briefing: -0.025 a -0.035 */ --tr-rotulo: 0.19em; /* faixa do briefing: 0.18 a 0.20 */ --tr-editorial:-0.012em; /* ---- GRID ------------------------------------------------ */ --container: 1280px; --cols: 12; --gutter: 24px; --edge: var(--space-3); --rail: 232px; /* coluna da navegacao lateral */ /* ---- CAMADAS --------------------------------------------- */ --z-grain: 50; --z-nav: 100; --z-topbar: 120; --z-overlay: 200; /* ---- SCROLL ---------------------------------------------- */ --nav-offset: var(--space-10); /* ---- MOVIMENTO ------------------------------------------- */ --ease: cubic-bezier(.22,.61,.36,1); --dur: 520ms; /* ---- GRAO ------------------------------------------------ feTurbulence rasterizado uma vez como data-URI e repetido em tile de 160px. Nao e vivo: filtro vivo sobre overlay fixo repinta a cada frame de scroll. stitchTiles='stitch' e o que elimina a costura entre tiles. O alpha ja vem assado no proprio ruido (feFuncA slope), entao nao ha mix-blend-mode nem camada de composicao extra. ---------------------------------------------------------- */ --ds-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.085'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); --ds-grain-size: 160px; /* mesmo ruido com o alpha subido, so para a demonstracao ampliada da secao 07: no tamanho real o grao de producao e imperceptivel de perto e o bloco parecia vazio */ --ds-grain-forte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.42'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); } @media (max-width: 899px){ :root{ --gutter: 16px; --edge: var(--space-2); --nav-offset: calc(56px + var(--space-2)); } } /* o grao nao sobrevive a impressao: uma linha o mata no documento inteiro */ @media print{ :root{ --ds-grain: none; } } }