/* Quitex · TOKENS · fase 5.2 (direção de arte viva) ------------------------------------------------------------------------------------ PLANO (frontend-design) Assunto ..... a compra de um veículo com dívida, contada como um percurso. A página vai do PRETO ABSOLUTO (a proposta) ao CINZA (a operação em curso) ao BRANCO (a conclusão) e fecha de novo no PRETO (quem é a empresa). Cor ......... monocromática + UM acento (fase 8): um azul-ciano frio, em doses pequenas — a cabeça da faixa, o sublinhado da palavra-chave, os operadores da proposta, as marcas das notas sobre a fotografia. Nunca fundo, nunca bloco, nunca botão. A energia continua vindo da amplitude. Antes a página vivia numa faixa estreita de cinza médio; agora ela usa os dois extremos de verdade — #000 e #FFF — e aprofunda as bordas com vinheta. Os cinzas de fundo das cenas continuam SENDO MEDIDOS nas bordas do render: não são escolha estética, são a emenda do palco. Tipo ........ Schibsted Grotesk (títulos) · Public Sans (texto) · DM Mono (rótulo e microinformação). O salto de escala é a metade da energia: rótulo de 12 px em mono encostado num título de até 72 px (fase 8: a escala desceu — o título não precisa gritar quando a composição tem densidade). Silêncio e impacto na mesma composição. Assinatura .. A FAIXA. O traço da faixa central da estrada — uma cabeça sólida seguida de traços interrompidos. É UM sistema, repetido com variações: abre cada rótulo, marca cada microinformação, divide o rodapé, puxa a seta do CTA e atravessa a ponte sozinha, conduzida pelo scroll. Retângulos, nunca círculos: a marca Quitex é feita de retângulos. ------------------------------------------------------------------------------------ */ /* FONTES-RESERVA com a LARGURA das definitivas (fase 8). Medido no navegador, a mesma frase em 100 px: Public Sans / Arial = 1,026 · Schibsted 600 / Arial Bold = 0,993 · DM Mono / Consolas = 1,091. Enquanto a fonte da web não chega, o texto já quebra nos mesmos pontos — sem isso o hero mudava de altura na troca (CLS 0,009 no desktop). */ @font-face { font-family: "Public Sans Reserva"; src: local("Arial"); size-adjust: 102.6%; } @font-face { font-family: "Schibsted Reserva"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 500 800; size-adjust: 99.3%; } @font-face { font-family: "Schibsted Reserva"; src: local("Arial"); font-weight: 100 499; size-adjust: 99.3%; } @font-face { font-family: "DM Mono Reserva"; src: local("Consolas"); size-adjust: 109.1%; } :root { color-scheme: light; /* ---------------------------------------------------------------- paleta */ --preto-absoluto: #000000; /* só nos dois momentos de impacto: hero e fecho */ --preto: #0A0A0B; /* tinta: texto, rótulo, ação */ --grafite: #26282B; /* o asfalto; hover; vinheta */ --cinza: #6B6E73; /* texto secundário sobre branco/névoa */ --chao: #A1A4A8; /* MEDIDO: chão da C06 */ --lateral: #969A9F; /* MEDIDO: laterais da estrada */ --nevoa: #E6E7E9; /* atmosfera, nuvem, superfície sobre branco */ --branco: #FFFFFF; --marca-placa: #010101; /* o preto do próprio arquivo da marca (medido) */ /* ACENTO — a única cor. Dois valores do mesmo azul, um por luminosidade de fundo: --acento sobre preto #3AB4FF 9,15:1 contra #000 --acento-tinta sobre branco #0A6CD6 5,09:1 contra #FFF (e 2,0/1,8:1 no cinza do palco, onde só pinta a cabeça da faixa — decorativa) --acento-local é o que os componentes leem; cada seção escura troca o valor. */ --acento: #3AB4FF; --acento-tinta: #0A6CD6; --acento-local: var(--acento-tinta); /* ---------------------------------------------------------------- tipo: famílias */ --f-titulo: "Schibsted Grotesk", "Schibsted Reserva", "Helvetica Neue", Arial, system-ui, sans-serif; --f-texto: "Public Sans", "Public Sans Reserva", "Segoe UI", system-ui, -apple-system, sans-serif; --f-mono: "DM Mono", "DM Mono Reserva", ui-monospace, "Cascadia Mono", Consolas, monospace; /* ---------------------------------------------------------------- tipo: escala O salto entre o rótulo (12) e o título (até 96) é deliberado — é ele que cria a densidade que faltava. */ --t-display: clamp(2.5rem, 1.25rem + 3.5vw, 4.5rem); /* 40–72 CTA final */ --t-h1: clamp(2.25rem, 0.25rem + 3.6vw, 4.25rem); /* 36–68 hero (1280 → 50, 1440 → 56: o título termina antes do carro) */ --t-secao: clamp(1.875rem, 1.1rem + 2.1vw, 3.25rem); /* 30–52 título de seção */ --t-h2: clamp(1.75rem, 1.15rem + 1.7vw, 2.75rem); /* 28–44 jornada */ --t-h3: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); /* 20–24 */ --t-lide: clamp(1.0625rem, 0.98rem + 0.32vw, 1.25rem); /* 17–20 */ --t-body: 1rem; /* 16 */ --t-caption: 0.8125rem; /* 13 */ --t-label: 0.75rem; /* 12 mono, caixa-alta */ --t-mono: 0.8125rem; /* 13 mono */ --p-texto: 400; --p-texto-forte: 560; --p-titulo: 560; --p-display: 600; --lh-display: 0.96; --lh-titulo: 1.0; --lh-texto: 1.5; --tr-display: -0.034em; --tr-titulo: -0.026em; --tr-label: 0.11em; --tr-acao: 0.06em; /* ---------------------------------------------------------------- A FAIXA (assinatura) cabeça sólida + traços interrompidos, na proporção da faixa central do render */ --faixa-alt: 2px; --faixa-cabeca: 20px; --faixa-traco: 10px; --faixa-vao: 7px; --faixa-larg: 76px; /* comprimento padrão sobre um rótulo */ /* ---------------------------------------------------------------- espaço (base 4) */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 144px; --margem: clamp(20px, 4.2vw, 88px); /* coluna máxima do conteúdo. Sem ela, numa tela de 1920 o texto fica encostado na borda esquerda com metade da tela vazia à direita — o que lê como erro, não como composição. */ --largura: 1320px; --alvo: 44px; /* toque mínimo */ --topo: env(safe-area-inset-top, 0px); --base: env(safe-area-inset-bottom, 0px); /* ---------------------------------------------------------------- tempos */ --tema-dur-fundo: 650ms; --tema-dur-texto: 350ms; --curva-entra: cubic-bezier(0.16, 0.84, 0.3, 1); } /* ==================================================================================== TEMAS — conjunto fechado (theme-choreography). Um atributo no ; o CSS faz o resto. Razões calculadas pela fórmula WCAG 2.2, sem arredondar para cima: fundo tinta (preto) tinta-2 rótulo mono (#26282B) light #A1A4A8 7,91 #26282B 5,91 5,91 road #969A9F 6,99 #26282B 5,22 5,22 end #FFFFFF 19,79 #55585D 7,14 #6B6E73 4,75 --tema-vinheta é a profundidade das bordas da janela. Era 0,12 e uniforme; agora cada tema declara a sua, e ela é o que tira a página do cinza chapado sem tocar no render. Fica em zero perto do palco, então a emenda com a borda do render não muda. ==================================================================================== */ :root, [data-tema="light"] { --tema-fundo: var(--chao); --tema-veu: rgb(161 164 168 / 0.94); /* legado: o véu de zona do celular (hoje só reduzido) */ /* ESCUDO do bloco de texto: uma clareira local atrás da leitura, não um cartão. Feito para o texto escuro dos temas claros; some nas bordas, e o render continua visível. */ --tema-escudo: rgb(233 234 236 / 0.90); --tema-tinta: var(--preto); --tema-tinta-2: var(--grafite); --tema-linha: rgb(10 10 11 / 0.26); --tema-vinheta: 0.20; } [data-tema="road"] { --tema-fundo: var(--lateral); --tema-veu: rgb(150 154 159 / 0.94); --tema-escudo: rgb(231 233 235 / 0.92); /* a estrada é mais clara: o escudo fecha um pouco mais */ --tema-tinta: var(--preto); --tema-tinta-2: var(--grafite); --tema-linha: rgb(10 10 11 / 0.26); --tema-vinheta: 0.30; /* a estrada é o trecho mais fechado */ } [data-tema="end"] { --tema-fundo: var(--branco); --tema-veu: rgb(255 255 255 / 0.9); --tema-escudo: rgb(255 255 255 / 0.72); /* a conclusão já é branca: quase nada */ --tema-tinta: var(--preto); --tema-tinta-2: #55585D; --tema-linha: rgb(10 10 11 / 0.14); --tema-vinheta: 0; /* a conclusão abre: nada fecha as bordas */ }