/* Este arquivo é CÓPIA, não referência compartilhada. As duas variantes da Fezinha e o LotoApp são projetos independentes, em repositórios separados: nenhum alcança o outro. O preço disso é sincronizar à mão quando a mecânica mudar; o que se compra é que mexer num não pode quebrar os outros. */ /* ========================================================================== comum/base.css — o que as duas experiências dividem Aqui mora MECÂNICA, nunca cor: a escala do sistema num número só, o reset, os papéis de tipo, a coluna, o vidro, o movimento e a barra do preview. Os tokens de cor e a regra do moram em cada experiência, porque é ali que a paleta é decidida — neste repositório, fezinha-v2.css. ========================================================================== */ /* O CONTRATO com cada experiência: este arquivo não conhece paleta nenhuma, mas precisa de quatro papéis de cor para funcionar. Cada experiência os aponta para a sua própria paleta, no topo do seu CSS: --foco anel de foco do teclado --tinta-3 tinta mais apagada, para rótulo e metadado --superficie superfície em alfa do vidro --fio o fio de 1px por dentro do card Faltando qualquer um, o que quebra é visível na hora — e é de propósito: um valor de reserva escondido faria a falta passar despercebida. */ :root { /* ---------- raios (fixos de propósito: não escalam) ---------- */ --raio-card: 12px; --raio-campo: 8px; --raio-pill: 100px; --raio-fio: 3px; /* ---------- tipografia ---------- */ /* A identidade Paggins pede Google Sans Flex, e ela foi a primeira escolha. TROCADA POR DEFEITO DE RENDERIZAÇÃO, medido, não suposto: no tamanho de display o Chrome fura o contorno de alguns glifos e o texto sai vazado — sem erro no console. Provado trocando só a família na mesma página: o título volta a sair sólido. Instrument Sans mantém o ar geométrico-humanista e não tem eixo de tamanho óptico para interpolar errado. */ --fonte: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --fonte-num: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---------- movimento ---------- */ --t-rapido: 120ms; --t-medio: 220ms; --t-longo: 340ms; --ease: cubic-bezier(.2, .7, .3, 1); /* ---------- a coluna tem teto, e a seção não ---------- 64rem = 1280px no root de 125%, que é o mesmo max-w-7xl com que o fezinha-web embrulha as páginas: pôr teto CONVERGE com o destino do porte. Sem ele o conteúdo saía com 1766px em 1920px e a linha do comparador dava ~775px à coluna do nome para ~300px de texto. A seção continua sangrando: fundo, abertura e vitrine são paisagem e vão de ponta a ponta; quem para é o que se lê. */ --largura-max: 64rem; --barra-h: 3rem; /* ---------- escala de espaçamento ---------- Razão ~1,5 a partir de 0,25rem. Antes dela o arquivo de pele tinha dezenas de valores distintos a um passo uns dos outros, e com tudo à mesma distância de tudo nada lidera. Em rem, para acompanhar quem aumenta a fonte do navegador. */ --e-1: 0.25rem; /* 5px — dentro de um átomo */ --e-2: 0.5rem; /* 10px — entre irmãos colados */ --e-3: 0.75rem; /* 15px — dentro de um grupo */ --e-4: 1rem; /* 20px — entre grupos vizinhos */ --e-5: 1.5rem; /* 30px — entre blocos */ --e-6: 2rem; /* 40px — entre assuntos */ --e-7: 3rem; /* 60px — entre seções */ /* ---------- alvo de toque ---------- 44px, o mínimo de todos os guias. Não é enfeite: o PRODUCT.md da Fezinha registra o público idoso como PISO — vista ruim, dedo grosso, Android velho. max() e não 2.2rem seco porque a raiz cai para 112,5% abaixo de 480px, e 2.2rem valeria 39,6px JUSTO no telefone. O px segura o piso; o rem passa na frente quando alguém aumenta a própria fonte. */ --toque: max(44px, 2.2rem); color-scheme: light; } /* ARMADILHA DAS DUAS RÉGUAS: dentro de componente, 1rem = 20px (o font-size de 125% logo abaixo). Dentro de @media, rem NÃO herda isso — a media query mede no font-size INICIAL do navegador, 16px. Então 48rem numa media query é 768px, não 960px. Os pontos de virada deste projeto, em px: 36rem = 576px · 48rem = 768px · 52rem = 832px · 60rem = 960px */ /* A ESCALA DO SISTEMA INTEIRO, NUM NÚMERO SÓ. Tudo abaixo está em rem, e rem mede a partir daqui: uma linha move texto, espaçamento, altura de controle e raio juntos. É porcentagem e não px — valor absoluto ignora quem aumentou a fonte padrão do próprio navegador, que é justamente quem mais precisa. PARA AJUSTAR A ESCALA, é este número e mais nenhum. */ html { font-size: 125%; /* 20px na base de 16 do navegador */ -webkit-text-size-adjust: 100%; } @media (max-width: 30rem) { html { font-size: 112.5%; } /* no telefone a mesma escala aperta demais */ } * { box-sizing: border-box; } /* TIPOGRAFIA INTEIRA EM REGULAR na Fezinha: a hierarquia sai de tamanho, cor e espaço. O que o navegador ainda engrossa sozinho é o que precisa ser dito. */ strong, b, th { font-weight: 400; } img { max-width: 100%; display: block; } a { color: inherit; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--raio-fio); } /* ---------- papéis de tipo (a escala, em um lugar só) ---------- */ .t-display { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em; } .t-tela { font-size: 2.25rem; line-height: 1.12; letter-spacing: -.03em; } .t-secao { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.025em; } .t-card { font-size: 1rem; line-height: 1.35; letter-spacing: -.015em; } .t-corpo { font-size: 0.875rem; } .t-mini { font-size: 0.75rem; } .t-meta { font-size: 0.6875rem; letter-spacing: .04em; } .num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; } /* Neste projeto é sempre MARCADOR GRÁFICO — ponto de cor, traço da trilha, barra de progresso, ponteiro da roleta — e nunca ênfase. Mas o estilo do navegador o deixa itálico, e quando o marcador carrega texto (o número da trilha, o nível do LotoApp, o rótulo da roleta) a inclinação aparece. Pior: as fontes são carregadas só em romano, sem eixo itálico, então o que se vê é o navegador SINTETIZANDO a inclinação — falso itálico, torto. Desligar aqui mata a classe inteira de uma vez, inclusive nos casos que ainda não existem. Ênfase de verdade, quando houver, é . */ i { font-style: normal; } /* Dígito centrado em caixa redonda fica ALTO, e não é ilusão de óptica: medido no círculo da trilha, a tinta do "2" caía 1,69px acima do centro de 25px. A causa é a fonte reservar descendente que o dígito não usa — em DM Mono são 0,32em abaixo da linha de base contra 0 de tinta, e centrar pela caixa de texto herda essa sobra. O line-height tira o excesso de entrelinhamento e o padding desce o que resta; em em, para a correção acompanhar qualquer corpo. Com box-sizing: border-box o padding desloca METADE do seu valor, porque a caixa encolhe pelo topo e o conteúdo se recentra no que sobrou. */ /* Os nomes são os DESTE projeto. A lista vinha copiada de outra variante e citava .dz, .cel, .trilha e .passo, que aqui se chamam -fz2: a correção não chegava a chegar. .cel-fz2 entrou agora — a célula do volante é dígito em caixa, que é exatamente o caso que esta regra existe para corrigir. */ .trilha-fz2 .et .n, .passo-fz2 .n, .dz-fz2, .cel-fz2 { line-height: 1; padding-block-start: 0.16em; } .rotulo { font-family: var(--fonte-num); font-size: 0.625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-3); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Sem teto de coluna: a seção ocupa a tela inteira e o que segura o texto é a goteira, que cresce com a largura. */ .wrap { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 4.5rem); } /* ---------- VIDRO ---------- Superfície em alfa + backdrop-filter. O que ele borra é a luz do fundo — por isso superfície opaca não serviria. O que CONTORNA um card é o fio de 1px por dentro, não uma borda. */ .vidro { background: var(--superficie); border-radius: var(--raio-card); box-shadow: inset 0 1px 0 0 var(--fio); backdrop-filter: blur(16px) saturate(130%); } /* Clique é APERTO, nunca deslize lateral. A profundidade é variável porque superfície grande precisa de menos para ler igual: .985 numa linha de 1300px seria um salto de 20px, que lê como sobressalto e não como toque. Cada experiência aplica isto aos seus próprios elementos, por seletor — ver o fim de fezinha.css e de lotoapp.css. */ .aperta { --aperto: .985; transition: transform var(--t-rapido) var(--ease); } .aperta:active { transform: scale(var(--aperto)); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ========================================================================== BARRA DO PREVIEW — não faz parte do produto ========================================================================== */ #preview-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.4rem 0.9rem; background: rgba(11, 15, 12, 0.82); backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06); color: #eef4ea; font-family: var(--fonte-num); font-size: 0.625rem; } #preview-bar .tag { /* a barra é sempre escura, em qualquer experiência: cor fixa como o resto dela */ background: #a8ff35; color: #0b0f0c; padding: 0.15rem 0.5rem; border-radius: var(--raio-pill); letter-spacing: .04em; } #preview-bar .sep { flex: 1 1 auto; } #preview-bar button { background: transparent; color: rgba(238, 244, 234, .62); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--raio-pill); padding: 0.25rem 0.7rem; cursor: pointer; font: inherit; transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease); } #preview-bar button[aria-pressed="true"] { background: #eef4ea; color: #0b0f0c; border-color: transparent; } #preview-bar button:hover { background: rgba(255, 255, 255, .09); color: #eef4ea; } #preview-bar button:active { transform: scale(.985); } body.bar-hidden { --barra-h: 0rem; } body.bar-hidden #preview-bar { display: none; }