/* Shift Assessoria · TOKENS (herdados da direção de arte aprovada na Quitex; só a cor mudou) ------------------------------------------------------------------------------------ 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: o VERDE da marca Shift (antes, o azul-ciano da Quitex), 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 (sistema herdado; mantido na Shift). ------------------------------------------------------------------------------------ */ /* 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 SHIFT — medida no arquivo oficial (logo/…17.22.40.jpeg) por tools/marca_shift.py, registro em docs/paleta-shift.json. São as cores REAIS da marca: */ --shift-preto: #010301; /* rgb(1 3 1) o fundo do selo */ --shift-verde-profundo: #011106; /* rgb(1 17 6) a borda escura do disco */ --shift-verde-escuro: #031B0C; /* rgb(3 27 12) o disco */ --shift-verde-medio: #042D15; /* rgb(4 45 21) a textura iluminada */ --shift-verde: #0B3D1F; /* rgb(11 61 31) o verde institucional (o mais claro do disco) */ --shift-dourado: #C09B59; /* rgb(192 155 89) o anel e o filete */ --shift-dourado-brilho: #FAE693; /* rgb(250 230 147) o brilho do anel — não usar em texto */ --shift-prata: #F5F6F5; /* rgb(245 246 245) a assinatura */ --marca-placa: var(--shift-preto); /* ACENTO — a única cor de destaque. O verde institucional da marca é escuro demais para ler como sinal sobre preto (1,6:1), então o acento é o MESMO MATIZ (~145°) em duas luminosidades, uma por fundo — como antes era o azul: --acento sobre preto #3FA66C 6,9:1 contra #000 --acento-tinta sobre branco #17804A 5,0:1 contra #FFF --acento-local é o que os componentes leem; cada seção escura troca o valor. --acento-luz é a cor dos reflexos (hero, CTA): luz ambiente, doses baixas. O DOURADO é acento SECUNDÁRIO, em uma ou duas linhas finas (rodapé). Nunca em bloco. */ --acento: #3FA66C; --acento-tinta: #17804A; --acento-local: var(--acento-tinta); --acento-luz: 63 166 108; /* rgb de --acento, para rgb(var(--acento-luz) / α) */ --ouro: var(--shift-dourado); /* ---------------------------------------------------------------- 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 */ }