/* =========================================================================== OrçaDent — o sistema Um arquivo com uma definição de cada coisa: cor, tamanho de texto, espaço, canto, sombra, curva de animação e duração. Carregado ANTES de qualquer outra folha, em todas as telas. Por que ele existe: até aqui o mesmo verde tinha três valores (#1f7770 no site, #24786f no app e na página do paciente), o creme tinha três, o pêssego tinha três e a linha divisória tinha quatro. Diferenças pequenas demais para parecerem escolha e grandes demais para não serem sentidas quando a pessoa sai da home e entra no app. Duas camadas, e a ordem importa: 1. PRIMITIVAS (--neutral-300, --green-600…) são a tinta. Numeradas pela luminosidade, do claro para o escuro, como qualquer rampa de design. Ninguém deveria usar estas diretamente numa regra. 2. SEMÂNTICAS (--text-muted, --surface-card, --border…) dizem PARA QUE a tinta serve. São estas que as folhas usam. Assim, mudar "a cor do texto secundário" é mexer numa linha, e não caçar 43 ocorrências de #9aa79f. Todo par texto/fundo aqui foi conferido no cálculo de contraste da WCAG, e o valor está anotado ao lado. Onde um número aparece, ele foi medido. =========================================================================== */ :root{ /* --------------------------------------------------------------------- NEUTROS Não são cinzas puros: têm uma gota de verde e de amarelo. É o que faz o branco do OrçaDent parecer papel e não parecer tela de hospital — e hospital é justamente o que este produto não quer ser. --------------------------------------------------------------------- */ --neutral-0: #ffffff; /* branco puro — quase nada precisa dele */ --neutral-50: #fffefa; /* papel: o fundo dos cartões */ --neutral-100: #f8f6ef; /* creme: o fundo das páginas */ --neutral-200: #f1efe4; /* rebaixado: caixas dentro de cartões */ --neutral-300: #e0e2d8; /* linha divisória */ --neutral-400: #c7cbbe; /* borda de campo (3:1 é o mínimo da WCAG) */ --neutral-500: #9aa196; /* desativado — NÃO usar em texto que importa */ --neutral-600: #79817a; /* 3,9:1 no papel — só título grande */ --neutral-700: #586159; /* 6,4:1 no papel — texto secundário */ --neutral-800: #3c4741; /* 9,6:1 */ --neutral-900: #24352f; /* 14,3:1 */ /* --------------------------------------------------------------------- VERDE — a marca O 600 é o verde que ela já usava no site. O 900 substitui os três tons escuros que existiam (#153f3b, #113b38, #123b38): eles diferiam em 4 unidades por canal, o que ninguém enxerga e todo mundo tinha que manter. --------------------------------------------------------------------- */ --green-50: #eef5f2; --green-100: #d9e9e4; --green-200: #b2d2cb; --green-300: #82b6ac; --green-400: #4c988c; --green-500: #2a8378; /* 4,5:1 no papel — o limite para texto normal */ --green-600: #1f7770; /* 5,3:1 — a marca */ --green-700: #1a605a; /* 7,3:1 */ --green-800: #164b47; /* 9,8:1 */ --green-900: #133c38; /* 12,2:1 — tinta e fundo escuro */ --green-950: #0b2724; /* o mais fundo: cartão de assinatura */ /* --------------------------------------------------------------------- TERRACOTA — o acento quente É o que impede a paleta de virar "software de clínica". Usado com parcimônia: chapéus de seção, o "Dent" da marca, avisos. Abaixo do 600 ele não serve como texto sobre papel — só como fundo. --------------------------------------------------------------------- */ --clay-100: #fbe8dc; --clay-200: #f6d2ba; --clay-300: #f1b88e; /* fundo */ --clay-400: #e89b78; /* fundo */ --clay-500: #cc7350; /* 3,2:1 — só título grande. O valor anterior (#d17958) prometia 3,2:1 no comentário e entregava 2,95:1 sobre o creme: o "Dent" do logotipo, que é o único lugar onde este tom vira palavra, ficava 0,05 abaixo da régua de texto grande. Escurecido o suficiente para a conta fechar e de menos para alguém ver a diferença. */ --clay-600: #b45f45; /* 4,5:1 */ --clay-700: #9a4c34; /* 6,0:1 — texto pequeno */ --clay-800: #82402c; /* para os fundos lilás e pêssego, onde o 700 não chega */ /* --------------------------------------------------------------------- LIMA — o realce Quase sempre como FUNDO com tinta escura por cima, nunca como texto. --------------------------------------------------------------------- */ /* Os três tons de apoio das seções da home e do aro do botão de assinar. Não têm rampa porque não precisam: cada um aparece como fundo, uma vez. */ --sand: #e8d5bf; --pink: #f8e1dd; --lavender: #dad6f5; --lime-100: #f2f4e0; --lime-200: #eef0d5; --lime-300: #dce589; /* tinta escura em cima: 8,6:1 */ --lime-400: #cdd97a; --lime-500: #aebb5c; /* --------------------------------------------------------------------- ESTADOS --------------------------------------------------------------------- */ --ok-bg: #e8f2e4; --ok-fg: #1f6a4a; --warn-bg: #fdf3ef; --warn-fg: #9a4c34; --info-bg: #eef3ee; --info-fg: #2a6b57; /* ===================================================================== SEMÂNTICAS — é o que as folhas devem usar ===================================================================== */ /* TEXTO */ --text-strong: var(--green-900); /* títulos */ --text-body: var(--neutral-800); /* corpo */ --text-muted: var(--neutral-700); /* apoio, legendas — 6,4:1 */ --text-subtle: var(--neutral-600); /* rótulos MAIÚSCULOS grandes — 3,9:1 */ --text-disabled:var(--neutral-500); --text-brand: var(--green-600); --text-accent: var(--clay-700); --text-on-dark: var(--neutral-50); --text-on-dark-muted: var(--green-200); /* SUPERFÍCIES — três níveis, não catorze. Na tela de Nova proposta eu contei 14 cores de fundo diferentes. Isso cria emendas que ninguém consegue nomear e todo mundo sente. */ --surface-page: var(--neutral-100); --surface-card: var(--neutral-50); --surface-sunken: var(--neutral-200); --surface-dark: var(--green-900); /* O tom aceso DENTRO da barra escura: aba aberta, linha sob o cursor. Existia como #2c625b e #2b625b — a mesma cor com dois valores, em dez lugares. */ --surface-dark-on: #2c625b; --surface-darker: var(--green-950); /* BORDAS Duas, e a diferença não é estética: a WCAG pede 3:1 para a borda de um campo de formulário (é ela que diz onde clicar), e nada para uma linha divisória decorativa. */ --border: var(--neutral-300); --border-field: var(--neutral-400); --border-strong: var(--neutral-500); --border-brand: var(--green-600); --border-on-dark: rgba(255,255,255,.14); /* --------------------------------------------------------------------- TIPOGRAFIA Duas famílias, como já era: Fraunces para título, DM Sans para o resto. Os tamanhos de display são fluidos (clamp): crescem com a largura da tela em vez de pular num breakpoint. Metade dos @media do projeto existe só para reduzir fonte — isso deixa de ser necessário. O piso é 12px. Havia texto de 7px no site, e o público são dentistas de 40 e 50 anos. --------------------------------------------------------------------- */ --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-serif: Fraunces, ui-serif, Georgia, serif; --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* 11px existe para UM caso: rótulo em CAIXA ALTA com tracking — "SEU TRATAMENTO", "PLANO GRÁTIS". Maiúscula espaçada se lê num tamanho em que a minúscula já não se leria, e é um idioma de interface, não texto corrido. Fora disso, o piso é 12px. */ --text-2xs: 0.6875rem; /* 11px — só rótulo em caixa alta */ --text-xs: 0.75rem; /* 12px — piso do texto normal */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px — corpo do app */ --text-md: 1rem; /* 16px — corpo do site */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ /* Fluidos: crescem com a largura da tela em vez de pular num @media. Cada um substituiu um par de regras — o tamanho do computador mais o override do celular. Os limites vieram dos valores que já existiam: o mínimo é o que o celular mostrava, o máximo é o que o computador mostrava. Ninguém vê um tamanho novo; o que muda é o caminho entre eles. A conta: em 375px o clamp entrega o mínimo, em 1440px o máximo. */ --display-xs: 1.375rem; /* 22px fixo */ --display-sm: clamp(1.375rem, 1.2430rem + 0.5634vw, 1.75rem); /* 22 → 28 */ --display-md: clamp(1.5625rem, 1.4305rem + 0.5634vw, 1.9375rem); /* 25 → 31 */ --display-lg: clamp(1.9375rem, 1.6514rem + 1.2207vw, 2.75rem); /* 31 → 44 */ --display-xl: clamp(2.75rem, 2.2438rem + 2.1596vw, 4.1875rem); /* 44 → 67 */ --leading-tight: 1.15; /* títulos */ --leading-snug: 1.35; --leading-body: 1.6; /* texto corrido */ --leading-loose: 1.75; /* artigos longos */ /* Fraunces em tamanho grande precisa de tracking negativo; DM Sans em maiúsculas pequenas precisa do contrário. É o ajuste que separa tipografia de "escolher uma fonte". */ --tracking-display: -0.022em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-caps: 0.09em; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* --------------------------------------------------------------------- ESPAÇO — base 4 Havia 66 valores diferentes no site e 47 no app: praticamente todo número inteiro de 1 a 40. Aqui são 14, e o nome é o próprio tamanho. --------------------------------------------------------------------- */ --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-128: 128px; /* --------------------------------------------------------------------- CANTOS Havia 17 raios diferentes, cinco deles numa tela só. Canto pequeno lê como ferramenta precisa; canto grande lê como aplicativo de consumo. Este produto é ferramenta. --------------------------------------------------------------------- */ --radius-xs: 4px; /* campos, etiquetas */ --radius-sm: 8px; /* cartões */ --radius-md: 14px; /* cartões grandes, modais */ --radius-full: 999px; /* pastilhas, avatares */ /* --------------------------------------------------------------------- SOMBRAS Verde-escuras, não pretas. Preto sobre creme fica cinza sujo; a sombra tingida da cor da marca some no fundo como sombra de verdade. --------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(19,60,56,.06); --shadow-sm: 0 1px 2px rgba(19,60,56,.05), 0 4px 12px -4px rgba(19,60,56,.08); --shadow-md: 0 2px 4px rgba(19,60,56,.05), 0 12px 28px -8px rgba(19,60,56,.12); --shadow-lg: 0 4px 8px rgba(19,60,56,.06), 0 24px 56px -12px rgba(19,60,56,.18); --shadow-focus: 0 0 0 3px rgba(31,119,112,.28); /* --------------------------------------------------------------------- MOVIMENTO — ver motion.css --------------------------------------------------------------------- */ --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --dur-press: 120ms; --dur-fast: 160ms; --dur-base: 200ms; --dur-slow: 260ms; --dur-panel: 320ms; /* --------------------------------------------------------------------- LARGURAS Os breakpoints ficam aqui como referência escrita. O CSS não deixa usar variável dentro de @media — o número tem que ser repetido lá. Mas ter a lista num lugar só é o que impede a próxima pessoa de inventar um 701px porque o 700px "não pegou". (Havia 15 breakpoints diferentes em 5 arquivos, incluindo os pares 700/701 e 800/801.) --bp-sm: 560px celular deitado --bp-md: 760px tablet / onde a barra lateral some --bp-lg: 1024px onde o layout de duas colunas cabe --bp-xl: 1280px --------------------------------------------------------------------- */ --width-prose: 68ch; /* largura confortável de leitura */ --width-page: 1160px; --width-wide: 1320px; } /* =========================================================================== BASE Três linhas que não são estilo: são o conserto do vazamento por onde o sistema escapa. Botão e campo de formulário são os únicos elementos que NÃO herdam cor nem fonte do resto da página — o navegador impõe as dele. Achei 10 controles em PRETO PURO (#000) no app, entre eles os cinco títulos de seção do formulário ("01 Paciente", "02 Tratamento e investimento"…), e 6 campos com a fonte do sistema operacional. Preto puro no meio de um verde-preto tem aquela aparência de "alguma coisa está errada aqui" que ninguém consegue apontar. Como é uma regra de base, qualquer cor declarada depois continua ganhando. =========================================================================== */ button, input, select, textarea, optgroup{ color: inherit; font-family: inherit; } /* Nenhum controle deve ficar maior que a tela num celular. */ input, select, textarea{max-width: 100%;} /* Link sem estilo sai no AZUL do navegador. Achei três no corpo dos Termos (o e-mail e o link para a Privacidade) — o único azul do site inteiro, #0000ee sobre creme. Uma regra de base impede que o próximo link esquecido apareça assim. Quem define a própria cor continua mandando. */ a{color: var(--text-brand);}