/* ============================================================ AXIUM QUIROPRAXIA — Tema de sub-marca Empresa operacional do Grupo Axium. Identidade PRÓPRIA: preto+dourado, espinha dourada, Fraunces + Montserrat. NÃO é a holding (que é champagne/sóbria). Opt-in por [data-brand="axium-quiropraxia"] no elemento raiz da superfície. Valores calibrados 1:1 com o site de produção (amipsias-web/Axium-Web · index.html #axium-root). ============================================================ */ [data-brand="axium-quiropraxia"] { /* --- Dourado (assinatura, único acento por tela) — nomes/valores do sistema v4.2F --- */ --aq-gold: #C9A227; /* dourado principal: filetes, barras, selo, estrela (--gold) */ --aq-gold-bright: #F4D672; /* palavra-chave itálica da headline, número protagonista (--gold-bright) */ --aq-gold-light: #E8C45F; /* convite Cormorant, detalhes (--gold-light) */ --aq-gold-deep: #B8932A; /* itálico/termo técnico sobre fundo CLARO — o bright some no creme (--gold-deep) */ /* --- Tinta e papel --- */ --aq-ink: #0B0B0C; /* preto absoluto — fundo base (--ink) */ --aq-base: #101010; /* fundo de peça / 2ª superfície escura (--piece) */ --aq-ink-800: #161512; /* card escuro quente (hero card do site) */ --aq-ink-700: #1C1C1F; --aq-paper: #F5F2EA; /* off-white quente / texto sobre escuro (--cream) */ --aq-paper-card: #FBF9F4; /* card claro flutuante editorial (--cream-card) */ --aq-paper-pure: #FFFFFF; --aq-ink-text: #111318; /* texto sobre fundo claro (--ink-text) */ --aq-ink-soft: #54514A; /* texto secundário sobre claro (--ink-soft) */ --aq-ink-faint: #8A8578; /* assinatura sobre claro (--ink-faint) */ --aq-muted: #9A958B; /* apoio/legenda sobre escuro */ --aq-muted-2: #CFC9BD; /* corpo sobre escuro (--mut / --apoio) */ --aq-line-gold: rgba(201, 162, 39, 0.22); /* divisória dourada fina (--gline) */ --aq-line-soft: rgba(255, 255, 255, 0.08); /* hairline sobre escuro */ --aq-line-ink: rgba(17, 19, 24, 0.16); /* divisória sobre claro (peças) */ --aq-line-card: rgba(17, 19, 24, 0.07); /* borda de card claro */ --aq-tint-gold: rgba(201, 162, 39, 0.04); /* preenchimento sutil de card / anel de dado */ --aq-glow-gold: rgba(201, 162, 39, 0.09); /* glow radial dourado de fundo */ --aq-shadow-card: 0 24px 60px rgba(17, 19, 24, 0.05); /* @kind shadow */ /* card claro */ --aq-shadow-photo: 0 24px 70px rgba(0, 0, 0, 0.5); /* @kind shadow */ /* janela de foto */ /* --- Tipografia (sistema v4.2F: 4 famílias) --- */ --aq-font-display: "Fraunces", Georgia, "Times New Roman", serif; /* headlines + frase de virada (itálico) */ --aq-font-word: "Cinzel", Georgia, serif; /* wordmark/assinatura AXIUM (ls 7px) */ --aq-font-italic: "Cormorant Garamond", Georgia, serif; /* eyebrow, convite, veredito (itálico) */ --aq-font-text: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* corpo, kicker, dados, rodapé */ --aq-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace; /* id, codigo, carimbo de versao */ --aq-tracking-caps: 0.34em; /* QUIROPRAXIA e labels — espaçado */ --aq-tracking-word: 0.4em; /* AXIUM em Cinzel (~7px @19px) */ --aq-tracking-wide: 0.16em; --aq-tracking-label: 0.2em; /* eyebrows de seção */ /* --- Geometria — a filha PODE arredondar (calor clínico) --- */ --aq-radius: 18px; /* cards (site usa 18px) */ --aq-radius-sm: 12px; /* legendas/chips de imagem */ --aq-radius-img: 16px; /* molduras de foto */ --aq-radius-pill: 999px; /* botões/chips — permitido nesta marca */ /* --- Régua e movimento (assinatura da operada) --- */ --aq-rule-w: 44px; /* régua dourada 44×3 (a holding usa 32×2) */ --aq-rule-h: 3px; --aq-ease: cubic-bezier(.16, 1, .3, 1); /* @kind other */ /* reveal e hover do site */ /* --- Espinha (o símbolo: hexágono alongado, tipo vértebra/agulha) --- */ --aq-spine-ratio: 0.208; /* @kind other */ /* largura / altura da barra (17/82 aprox.) */ /* --- Superfícies META / social --- */ --aq-story-w: 1080px; --aq-story-h: 1920px; /* 9:16 — Stories e Reels */ --aq-feed-w: 1080px; --aq-feed-h: 1350px; /* 4:5 — Feed e carrossel */ --aq-square: 1080px; /* 1:1 */ /* --- Contato / prova social (compliance) --- */ --aq-whatsapp: "(11) 97507-6978"; /* @kind other */ /* --- Responsividade / mobile --- */ --aq-bp-sm: 480px; /* telefone */ --aq-bp-md: 768px; /* tablet — breakpoint principal do site */ --aq-bp-lg: 1024px; /* desktop */ --aq-touch-min: 44px; /* área mínima de toque · WCAG 2.5.5 */ } /* ============================================================ CAMADA SEMÂNTICA DE SUPERFÍCIE — e a CHAVE CLARO/ESCURO ------------------------------------------------------------ Pedida pelo Fabrício em 21/09: "me parece que ainda temos uma diferença entre as telas de indicadores e as telas dos outros. Poderíamos adotar ambas, mas ter uma chave selecionando dark ou white." Ele estava certo sobre o fato e certo sobre a saída. Havia DOIS desenhos: gestão, prontuário e agenda em papel; os indicadores em tinta. Escolher um jogaria fora trabalho bom dos dois lados. A chave adota os dois. O QUE A CHAVE TROCA: a paleta. O QUE ELA NÃO TROCA: o layout. Indicadores continuam densos e com numeral monoespaçado; a gestão continua com a lateral escura e o corpo arejado. Tema é pele, não outra tela — prometer mais que isso seria vender um redesenho como um botão. Os nomes abaixo são SEMÂNTICOS (superfície, texto, borda), não literais (papel, tinta): é o que permite trocar os dois lados sem que nenhuma tela precise saber qual está valendo. As telas mapeiam seus nomes locais para estes; o tema vive aqui, num lugar só. ============================================================ */ [data-brand="axium-quiropraxia"] { /* --- superfícies --- */ --aq-sup: var(--aq-paper); /* fundo da página */ --aq-sup-2: #EFEBE1; /* fundo recuado (cabeçalho de tabela, faixa) */ --aq-sup-card: var(--aq-paper-card); /* card que flutua sobre o fundo */ --aq-sup-inv: var(--aq-ink); /* superfície INVERTIDA: a lateral, o topo */ --aq-sup-inv-2: var(--aq-ink-800); /* --- texto --- */ --aq-txt: var(--aq-ink-text); --aq-txt-2: var(--aq-ink-soft); /* NÃO é o --aq-ink-faint. Medido em 21/09: #8A8578 sobre o papel dá **3,29:1**, e o mínimo da WCAG AA para texto é 4,5. O --aq-ink-faint continua válido para o que NÃO é texto (filete, ícone decorativo); para TEXTO fraco vale este, que é o mesmo cinza-quente escurecido até passar: 4,74 sobre o papel e 5,04 sobre o card. */ --aq-txt-3: #706B5F; --aq-txt-inv: var(--aq-paper); /* texto SOBRE a superfície invertida */ /* ── FALTAVA O FRACO SOBRE O INVERTIDO (22/09) ─────────────────────── Havia `--aq-txt-inv` para o texto forte sobre a barra lateral e o topo, e NADA para o texto de apoio. Quem precisava dele pegava `--aq-txt-2`, que é o cinza de sobre-CLARO: no tema claro ele fica quase preto e some na lateral escura — foi assim que o carimbo de versão do gestão deu 3,44:1. A superfície invertida é uma REGIÃO, não uma tela inteira: o gestão vira de pele, mas a lateral dele não. Sem um nome para "fraco sobre invertido", todo mundo ia acabar escrevendo literal ali dentro. */ --aq-txt-inv-2: var(--aq-muted-2); /* apoio SOBRE a superfície invertida */ /* O DOURADO DA MARCA NÃO SE LÊ EM CORPO PEQUENO SOBRE CLARO: o --aq-gold dá 2,16:1 e o --aq-gold-deep, 2,59:1 — os dois reprovam AA com folga. Este é o mesmo dourado levado ao escuro necessário (4,90 no papel, 5,21 no card), e existe para TEXTO. Filete, selo e botão continuam com o dourado da marca, porque ali a regra é de contraste gráfico, não de leitura. */ --aq-gold-texto: #856418; /* --- traço e sombra --- */ --aq-borda: rgba(17, 19, 24, 0.12); --aq-borda-sutil: rgba(17, 19, 24, 0.07); --aq-sombra: 0 1px 3px rgba(17, 19, 24, 0.05), 0 1px 2px rgba(17, 19, 24, 0.04); /* @kind shadow */ --aq-sombra-2: 0 12px 32px -12px rgba(17, 19, 24, 0.18); /* @kind shadow */ /* --- semáforo: os mesmos significados, legíveis SOBRE CLARO --- Vermelho é falha, âmbar é atenção, cinza é neutro (regra da casa). O dourado NÃO entra aqui: ele é a assinatura da marca e não muda com o tema — é o que faz as duas peles continuarem sendo a AXIUM. */ --aq-verde: #15692e; --aq-vermelho: #b91c1c; --aq-azul: #1d4ed8; /* ── O ÂMBAR DO TEMA CLARO NÃO ERA ÂMBAR (22/09) ───────────────────── Era #92400e: MARROM QUEIMADO. Ele foi escolhido por contraste (6,34:1 sobre o papel) e passou — mas contraste não é a única coisa que uma cor precisa acertar. Ao lado do dourado da marca ele lê como outra paleta, e a agenda inteira ficou com cara de bordô. #8A5A00 dá 5,30:1 no papel e 5,63:1 no card — passa AA com folga — e é da família do dourado, não um vermelho-alaranjado. Atenção continua se distinguindo do texto normal sem sair da marca. */ --aq-ambar: #8A5A00; --aq-roxo: #4c1d95; } /* TEMA ESCURO. Os mesmos significados, os valores que funcionam sobre tinta. Os tons do semáforo SOBEM de luminosidade: #b91c1c sobre preto reprova o contraste AA que a #f87171 passa — cor de alarme que não se lê não alarma. */ [data-brand="axium-quiropraxia"][data-tema="escuro"] { --aq-sup: var(--aq-base); --aq-sup-2: var(--aq-ink); --aq-sup-card: var(--aq-ink-800); --aq-sup-inv: var(--aq-ink); --aq-sup-inv-2: var(--aq-ink-700); --aq-txt: var(--aq-paper); --aq-txt-2: var(--aq-muted-2); --aq-txt-3: var(--aq-muted); --aq-txt-inv: var(--aq-paper); --aq-txt-inv-2: var(--aq-muted-2); /* sobre tinta o problema se inverte: o dourado da marca se lê bem, e quem precisa clarear é o texto fraco. --aq-gold-light dá 8,6:1 sobre #101010. */ --aq-gold-texto: var(--aq-gold-light); --aq-borda: rgba(255, 255, 255, 0.12); --aq-borda-sutil: rgba(255, 255, 255, 0.07); --aq-sombra: 0 1px 3px rgba(0, 0, 0, 0.45); /* @kind shadow */ --aq-sombra-2: 0 12px 32px -12px rgba(0, 0, 0, 0.6); /* @kind shadow */ --aq-verde: #4ade80; --aq-vermelho: #f87171; --aq-azul: #60a5fa; --aq-ambar: #fbbf24; --aq-roxo: #c4b5fd; } /* Realces utilitários da marca (uso opcional em superfícies sociais) */ [data-brand="axium-quiropraxia"] .aq-gold { color: var(--aq-gold); } [data-brand="axium-quiropraxia"] .aq-italic { font-family: var(--aq-font-italic); font-style: italic; } /* ============================================================ A CHAVE — um interruptor, não um botão que anuncia o próximo estado. ------------------------------------------------------------ Pedida pelo Fabrício em 22/09: "não quero um botão assim, quero um slider ou um switch." Ele tem razão, e a razão é mais funda que estética. O botão dizia "Tema escuro" e trocava para escuro; depois dizia "Tema claro". O rótulo nomeava o DESTINO, e quem o lia de relance lia como se fosse o ESTADO — o mesmo item parecia dizer duas coisas opostas em dois momentos, e não havia como saber, sem apertar, qual estava valendo. Um interruptor não tem esse problema: o rótulo fica PARADO ("Tema escuro") e a posição diz se está ligado. Estado e ação deixam de disputar o mesmo texto. É a mesma regra do resto do sistema — estado se MOSTRA, não se deduz. O estado de verdade é o `aria-checked`, que é o que o leitor de tela anuncia e o que o teste mede. O desenho abaixo é consequência dele, nunca fonte: pintar a bolinha por conta própria criaria um segundo lugar onde "está escuro?" mora. ELA NÃO VIRA COM O TEMA. Vive na barra lateral, que é superfície INVERTIDA nas duas peles (--aq-sup-inv) — por isso as cores aqui são fixas sobre escuro, e não os nomes semânticos que trocam. Foi exatamente esse engano que deixou a lateral branca sobre branca em 21/09. ============================================================ */ [data-brand="axium-quiropraxia"] .aq-chave { flex: none; width: 38px; height: 21px; border-radius: 999px; position: relative; background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.2); transition: background .18s var(--aq-ease, ease), border-color .18s var(--aq-ease, ease); } [data-brand="axium-quiropraxia"] .aq-chave i { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); display: block; transition: transform .18s var(--aq-ease, ease), background .18s var(--aq-ease, ease); } [data-brand="axium-quiropraxia"] [aria-checked="true"] .aq-chave { background: var(--aq-gold, #C9A227); border-color: var(--aq-gold, #C9A227); } [data-brand="axium-quiropraxia"] [aria-checked="true"] .aq-chave i { transform: translateX(17px); background: var(--aq-ink, #0B0B0C); } /* Movimento é enfeite; a informação é a posição. Sem animação ela continua inteira. */ @media (prefers-reduced-motion: reduce) { [data-brand="axium-quiropraxia"] .aq-chave, [data-brand="axium-quiropraxia"] .aq-chave i { transition: none; } }