/* * A MARCA DA OCULOPLASTIC MENTORING, EM UM ARQUIVO SÓ. * * Nenhum componente deste módulo escreve cor, fonte ou raio de borda dentro de si: tudo lê daqui. * É o mesmo princípio que isola a regra clínica do componente. O que é do cliente fica separado * do que é estrutura. * * --------------------------------------------------------------------------------------------- * OS VALORES VÊM DO MANUAL DE MARCA (Branding_Oculoplastic_Mentoring.pdf), e não de suposição. * * O manual define, com as palavras dele: * * #0a2129 azul escuro "confiança, profundidade e precisão, valores que traduzem a segurança * de quem lidera com excelência" * #9a7d55 marrom "solidez e tradição, reforçando a credibilidade da marca" * #fcf4e8 off white "equilíbrio e sofisticação, oferecendo uma base leve e refinada" * #fcdf80 dourado "prestígio, excelência e o padrão elevado que define a experiência" * #f1cf6b dourado * #b48d47 dourado * * E a tipografia: GOTHAM e COMFORTAA. * * O logotipo é um olho formado pela fusão das iniciais O e M, "elemento que remete à precisão, ao * foco e à visão apurada". * * --------------------------------------------------------------------------------------------- * DUAS DECISÕES QUE PRECISAM SER LIDAS * * 1. GOTHAM É FONTE COMERCIAL (Hoefler & Co.). Ela vive dentro do manual como subconjunto * embutido, que é o suficiente para o PDF desenhar as letras que ele usa e insuficiente para * qualquer outra coisa: não tem o alfabeto inteiro, e servir aquilo num site seria usar fonte * licenciada sem licença. Também não está no Adobe Fonts desta conta (conferido, não suposto). * * Então a substituta foi ESCOLHIDA POR COMPARAÇÃO, e não por fama. O espécime de Gotham do * manual foi recortado do PDF e posto lado a lado com Montserrat, Figtree, Be Vietnam Pro, * Hanken Grotesk e DM Sans, no mesmo corpo e no mesmo fundo. A Montserrat ganhou pela largura * e pelas formas que mais importam aqui: o "a" de dois andares, o "g" de um andar com a cauda * reta, o "t" de topo cortado em diagonal e a mesma altura de x generosa. As outras erram por * estreitar (Figtree, Hanken) ou por arredondar demais (DM Sans). * * O QUE MUDA O ASPECTO MAIS DO QUE A FONTE É O PESO. O manual escreve o texto corrido em * Gotham LIGHT, e o site vinha em 400. É por isso que ficava pesado e genérico ao lado do * material do mentor. Agora o corpo é 300, com a entrelinha e o espacejamento do manual. * * A Gotham continua PRIMEIRO na pilha, e o @font-face dela está escrito logo abaixo, comentado. * No dia em que o arquivo licenciado chegar, descomenta-se aquele bloco e nada mais muda. * * 1b. A COMFORTAA é livre e está no Google Fonts, então essa é exata, sem substituta. * * 1c. E O MANUAL TEM DUAS FONTES, então o site passou a ter duas. Havia uma terceira aqui, IBM * Plex Mono, que eu tinha posto para os números. Fonte que não é da marca dilui a marca, e * número não precisa de mono para alinhar: precisa de tabular-nums, que a Montserrat tem. * * 2. O DOURADO MUDA DE TOM CONFORME O FUNDO, e isso não é liberdade criativa: #fcdf80 sobre * branco tem contraste baixo demais para texto, e reprovaria qualquer leitura em tela. Então o * claro usa o dourado mais fechado do próprio manual (#b48d47) para texto, e guarda os claros * para superfície; o escuro usa #f1cf6b, que sobre o azul da marca fica exato e legível. Os * seis tons são todos do manual: o que varia é onde cada um entra. * * O LOGOTIPO chegou e está aplicado (ver a nota dele abaixo). A identidade está completa: cores, * tipografia e marca, todas tiradas dos arquivos do mentor. */ :root { /* ---- AS SEIS CORES DO MANUAL, sem interpretação ---- */ --oc-azul: #0a2129; --oc-marrom: #9a7d55; --oc-offwhite: #fcf4e8; --oc-dourado-claro: #fcdf80; --oc-dourado: #f1cf6b; --oc-dourado-fechado: #b48d47; /* ---- IDENTIDADE aplicada ---- */ --oc-marca: var(--oc-azul); --oc-marca-escura: #06161c; /* o azul do manual, um passo mais fundo, para o cabeçalho */ --oc-marca-clara: #e6edef; /* o mesmo azul lavado, para selo e realce de superfície */ --oc-realce: var(--oc-dourado-fechado); /* * O LOGOTIPO OFICIAL, extraído do LOGO_DOURADO.pdf que o mentor enviou. * * O arquivo é vetor com 25 formas preenchidas por GRADIENTE dourado, e é o degradê que dá a * qualidade dele. Redesenhar aquilo em SVG à mão perderia justamente isso, então o vetor foi * renderizado em 4320px com fundo transparente e recortado, preservando o degradê original. * * Dois arquivos, porque o manual traz um lockup empilhado (símbolo em cima, letreiro embaixo) e * um cabeçalho fino não comporta os dois sem espremer: * simbolo.png o O com o olho e o M. Vai no cabeçalho de todas as telas. * logo.png o lockup inteiro, com o letreiro. Vai na entrada, em tamanho grande. */ --oc-logo: url("../img/simbolo.png"); --oc-logo-completo: url("../img/logo.png"); /* Gotham primeiro: assume sozinha no dia em que o arquivo licenciado for instalado. */ --oc-fonte-titulo: "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif; --oc-fonte-texto: "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif; --oc-fonte-marca: "Comfortaa", "Gotham", "Montserrat", sans-serif; /* Dado é texto da marca com número tabular, e não uma terceira fonte. */ --oc-fonte-dado: "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif; /* O peso do texto corrido no manual é o Light. É ele que dá o ar da identidade. */ --oc-peso-texto: 300; --oc-peso-medio: 500; /* ---- SUPERFÍCIE ---- */ --oc-fundo: var(--oc-offwhite); --oc-painel: #ffffff; --oc-texto: var(--oc-azul); --oc-texto-suave: #4a5c63; --oc-texto-fraco: #7c8a90; --oc-borda: #e7dccb; /* derivada do off white com o marrom, não um cinza qualquer */ --oc-borda-suave: #f2ead9; /* O fio é o elemento estrutural deste desenho: ele separa seção no lugar da caixa. */ --oc-fio: rgba(10, 33, 41, .12); --oc-fio-forte: rgba(10, 33, 41, .26); --oc-superficie: rgba(154, 125, 85, .07); --oc-contraste-realce: #ffffff; /* ---- TERRITÓRIO: as duas cores que dizem de quem é o dado ---- O marrom do manual vira o lado do mentorado (a clínica dele); o azul da marca, o lado da mentoria. São as duas cores institucionais, então a separação de território é lida sem introduzir cor estranha à identidade. */ --oc-mentorado: #7d6236; --oc-mentorado-fundo: #f4ecdf; --oc-mentor: #1f4d5e; --oc-mentor-fundo: #e4eef1; /* ---- SEMÂNTICA: separada do realce de propósito. Dourado é prestígio, não alerta. ---- * * O VERDE SAIU (2026-08-24), e o motivo merece ficar escrito porque o dono reclamou dele DUAS * vezes antes de alguém ir conferir. * * Havia aqui um --oc-ok: #2f6b4f. Ele não vinha do manual: eu inventei um verde para dizer * "isto está bem". O manual tem SEIS cores e nenhum verde além do próprio #0a2129, que ele * chama de azul escuro e que na chapa é um petróleo (é ele o "verde escuro numerado" que o dono * lembrava). Cor inventada num sistema de identidade fechado é a coisa mais barata de fazer e a * mais difícil de desfazer depois, porque ela se espalha. * * O substituto é o MARROM DO MANUAL, e a escolha é semântica, não estética: o manual descreve o * marrom como "solidez e tradição". É exatamente o que "isto aqui está resolvido, não mexe" * precisa dizer. Ganhamos a cor certa e perdemos uma cor do sistema, que é o sentido certo. * * O vermelho de alerta continua sendo o único tom fora do manual, e continua por um motivo que * não é gosto: aviso que não é vermelho falha em ser aviso. Ele é a exceção declarada, e única. */ --oc-alerta: #8f2f22; --oc-alerta-fundo: #f7e7e3; --oc-ok: #7d6236; /* o marrom do manual, fechado o suficiente para texto */ --oc-ok-fundo: #f4ecdf; /* ---- FORMA E MOVIMENTO (2026-08-24) ---- * * O dono olhou o produto e disse: "só os escritos funcionando como botão, não existe algo * animado, um botãozinho de fato, estão muito próximos uma coisa da outra". * * Ele está certo, e o defeito veio de uma decisão anterior que acertou o diagnóstico e errou a * dose. Para fugir da cara do SPI, este desenho tirou a caixa, tirou a pílula e tirou o * preenchimento, deixando fio e texto. Elegante, e sem affordance: quando TUDO é texto, nada * parece clicável, e o dedo não sabe onde bater. * * A correção não é voltar a ser o SPI. É devolver as três coisas que fazem uma interface * parecer viva sem virar genérica: FORMA (o botão tem corpo), ESTADO (ele responde ao toque) e * RESPIRO (as coisas param de se encostar). Os tokens abaixo existem para que essas três sejam * decididas UMA vez, aqui, e não improvisadas em cada tela. * * O raio segue o manual: as chapas dele usam retângulo de canto suave com fio dourado, e não * canto vivo nem pílula. É de lá que sai o 10px. */ --oc-raio: 10px; --oc-raio-suave: 6px; --oc-raio-pill: 999px; /* O tempo. Curto para toque (o dedo espera resposta imediata), um pouco maior para o que entra em cena. A curva é a mesma em tudo: sem bounce, que é firula e envelhece rápido. */ --oc-tempo-toque: 120ms; --oc-tempo-cena: 220ms; --oc-curva: cubic-bezier(.2, .7, .3, 1); /* O anel de foco. Existe porque quem navega por teclado precisa ver onde está, e porque some para quem usa mouse (:focus-visible). Acessibilidade que não estraga o visual de ninguém. */ --oc-foco: 0 0 0 2px var(--oc-fundo), 0 0 0 4px var(--oc-realce); /* A ESCALA DE ESPAÇO. O "muito próximo uma coisa da outra" era falta disto: cada tela escolhia um espaçamento no olho. Agora há uma escala, e o ritmo da página vem dela. */ --oc-esp-1: .4rem; --oc-esp-2: .8rem; --oc-esp-3: 1.2rem; --oc-esp-4: 1.8rem; --oc-esp-5: 2.6rem; --oc-esp-6: 3.6rem; --oc-sombra: 0 1px 2px rgba(10, 33, 41, .06), 0 8px 24px rgba(10, 33, 41, .07); } /* * Tela escura. Aqui o azul do manual deixa de ser tinta e vira o CHÃO, que é onde ele fica mais * bonito, e o dourado assume o papel de destaque. A regra dos três estados: quem não escolheu nada * cai aqui pelo sistema, e quem escolheu claro explicitamente continua no claro. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --oc-marca: var(--oc-dourado); --oc-marca-escura: #06161c; --oc-marca-clara: #14313b; --oc-realce: var(--oc-dourado-claro); --oc-fundo: var(--oc-azul); --oc-painel: #0f2c35; --oc-texto: var(--oc-offwhite); --oc-texto-suave: #a9bcc2; --oc-texto-fraco: #7a9099; --oc-borda: #1d3d47; --oc-borda-suave: #16333c; --oc-fio: rgba(252, 244, 232, .13); --oc-fio-forte: rgba(252, 244, 232, .28); --oc-superficie: rgba(252, 244, 232, .04); --oc-contraste-realce: #0a2129; --oc-mentorado: #cbae83; --oc-mentorado-fundo: #2a2318; --oc-mentor: #8fbacb; --oc-mentor-fundo: #132c36; --oc-alerta: #f0a199; --oc-alerta-fundo: #2e1614; --oc-ok: #cbae83; /* o mesmo marrom, clareado para o fundo escuro */ --oc-ok-fundo: #2a2318; --oc-sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .35); } } :root[data-tema="escuro"] { --oc-marca: var(--oc-dourado); --oc-marca-escura: #06161c; --oc-marca-clara: #14313b; --oc-realce: var(--oc-dourado-claro); --oc-fundo: var(--oc-azul); --oc-painel: #0f2c35; --oc-texto: var(--oc-offwhite); --oc-texto-suave: #a9bcc2; --oc-texto-fraco: #7a9099; --oc-borda: #1d3d47; --oc-borda-suave: #16333c; --oc-fio: rgba(252, 244, 232, .13); --oc-fio-forte: rgba(252, 244, 232, .28); --oc-superficie: rgba(252, 244, 232, .04); --oc-contraste-realce: #0a2129; --oc-mentorado: #cbae83; --oc-mentorado-fundo: #2a2318; --oc-mentor: #8fbacb; --oc-mentor-fundo: #132c36; --oc-alerta: #f0a199; --oc-alerta-fundo: #2e1614; --oc-ok: #cbae83; --oc-ok-fundo: #2a2318; --oc-sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .35); } /* * O cabeçalho era uma barra azul cheia com um botão dentro, que é exatamente a forma do SPI. Saiu. * Agora ele é slim e transparente, fechado por um fio, com o olho da marca à esquerda: a * identidade passa a vir do símbolo e da tipografia, não de um bloco de cor. */ /* * A GOTHAM LICENCIADA, PRONTA PARA ENTRAR. * * Descomente este bloco no dia em que os arquivos comprados estiverem em oculoplastica/fonts/. * Nada mais precisa mudar: a pilha já pede "Gotham" antes da Montserrat em todo lugar, e a * política de segurança do site já libera fonte servida do próprio domínio (font-src 'self'). * * Os três pesos são os que o manual usa, conferidos nos /BaseFont embutidos nele: Light para o * texto corrido, Book para o intermediário e Bold para os títulos. * * @font-face { * font-family: "Gotham"; font-style: normal; font-weight: 300; font-display: swap; * src: url("../fonts/Gotham-Light.woff2") format("woff2"); * } * @font-face { * font-family: "Gotham"; font-style: normal; font-weight: 400; font-display: swap; * src: url("../fonts/Gotham-Book.woff2") format("woff2"); * } * @font-face { * font-family: "Gotham"; font-style: normal; font-weight: 700; font-display: swap; * src: url("../fonts/Gotham-Bold.woff2") format("woff2"); * } */