/* ============================================================================ CRV UI — sistema visual único do app, tirado do Manual de Identidade Visual (Atêlie Mi Arte, 2020). Uma folha só: página não declara :root nem recria componente. Guia vivo em ui.html; decisões em docs/marca.md. ========================================================================= */ /* ------------------------------------------------------------ marca (fixo) */ :root{ /* paleta oficial — pág. 11 e 12 do manual */ --roxo: #5C0F8B; /* Pantone 2597 C — principal */ --agua: #00C4B3; /* Pantone 3265 C — principal */ --amarelo: #FFB600; /* Pantone 7549 C — principal */ --laranja: #FF6C0E; /* Pantone 1585 C — apoio */ --cinza: #E3E3E3; /* apoio */ /* derivados nossos. O roxo puro dá 1,8:1 sobre fundo escuro: serve de bloco e de superfície, nunca de texto. Daí o roxo claro. */ --roxo-claro: #B98BE0; --roxo-medio: #8A5AB8; --roxo-fundo: #2A0A42; /* tipografia — pág. 20 e 21. Título pede Mostra Nuova Heavy, que é fonte comercial sem licença web; Montserrat Black é a substituta enquanto isso. Dado tabular sai do próprio Montserrat com tabular-nums, para não entrar uma terceira família que o manual não prevê. */ --fonte-titulo: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --fonte-texto: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --tracking-titulo: .05em; /* os 50pt do manual */ /* escala de texto — 8 degraus, nada de 12,5px no meio */ --t-micro:11px; --t-xs:12px; --t-sm:13px; --t-md:15px; --t-lg:18px; --t-xl:22px; --t-2xl:28px; --t-3xl:40px; --t-4xl:56px; /* espaço — múltiplos de 4 */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; /* raio — a marca é de bloco chapado e figura angular, então quase tudo é canto vivo. Só o que a mão toca ganha 4px. */ --r-0:0; --r-sm:4px; --r-md:8px; --maxw:1040px; --destaque: var(--agua); --destaque-tinta: #04322E; /* texto por cima do destaque cheio */ } /* cor de destaque da página: */ [data-cor="agua"] { --destaque:var(--agua); --destaque-tinta:#04322E; } [data-cor="amarelo"]{ --destaque:var(--amarelo); --destaque-tinta:#4A3400; } [data-cor="laranja"]{ --destaque:var(--laranja); --destaque-tinta:#3D1700; } [data-cor="roxo"] { --destaque:var(--roxo-claro); --destaque-tinta:#1E0733; } /* ------------------------------------------------------------ tema escuro Padrão. É o da TV, da quadra e do uso noturno. */ :root, [data-tema="escuro"]{ --fundo: #0D0418; --fundo-2: #150726; --superficie: #17082A; --superficie-2:#1F0C36; --fio: #2E1247; --fio-2: #3B1A5A; --texto: #F2EEF7; --texto-2: #C7B3DA; --texto-3: #A98CC4; --ok: var(--agua); --atencao: var(--amarelo); --alerta: var(--laranja); --barra: var(--roxo); /* faixa do topo = a parede da unidade */ --barra-texto: #FFFFFF; } /* ------------------------------------------------------------- tema claro Laudo, prontuário, relatório e tudo que sai impresso. É o manual ao pé da letra: cinza-papel de fundo, bloco chapado, cartão branco. */ [data-tema="claro"]{ --fundo: #E3E3E3; --fundo-2: #EFEFEF; --superficie: #FFFFFF; --superficie-2:#F5F2F7; --fio: #CFC7D6; --fio-2: #B9AEC4; --texto: #241436; --texto-2: #4A3A5E; --texto-3: #665676; --ok: #00695F; --atencao: #7E5800; --alerta: #9E3C00; --barra: var(--roxo); --barra-texto: #FFFFFF; } /* ------------------------------------------------------------------ base */ *{ box-sizing:border-box; margin:0; padding:0; } html{ -webkit-text-size-adjust:100%; } body{ background:var(--fundo); color:var(--texto); font-family:var(--fonte-texto); font-size:var(--t-sm); font-weight:400; line-height:1.5; min-height:100vh; padding:0 0 var(--s-7); -webkit-font-smoothing:antialiased; } a{ color:var(--destaque); } ::selection{ background:var(--destaque); color:var(--destaque-tinta); } :focus-visible{ outline:2px solid var(--destaque); outline-offset:2px; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--s-4); } .wrap-largo{ max-width:1360px; } /* número é o produto: sempre alinhado em coluna */ .num, td, .metrica-v{ font-variant-numeric:tabular-nums; } /* --------------------------------------------------- seta dupla da marca O manual diz que a seta está "presente em toda a identidade visual". Aqui ela marca seção e cabeçalho. Desenhada em máscara para herdar cor. */ .seta{ display:inline-block; width:22px; height:11px; flex:none; background:currentColor; -webkit-mask:var(--seta) no-repeat center/contain; mask:var(--seta) no-repeat center/contain; } :root{ --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 0 L7 6 L0 12 Z'/%3E%3Cpath d='M10 1 L15 6 L10 11' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M17 1 L22 6 L17 11' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------- cabeçalho */ .topo{ background:var(--barra); color:var(--barra-texto); padding:0 var(--s-5); min-height:58px; display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap; } .topo a{ color:var(--barra-texto); text-decoration:none; } .topo-logo{ height:26px; width:auto; display:block; } /* fio de luz — as réguas de LED do teto da unidade */ .luz{ height:4px; background:linear-gradient(90deg, var(--amarelo) 0%, var(--amarelo) 22%, var(--agua) 22%, var(--agua) 33%, var(--laranja) 33%, var(--laranja) 38%, transparent 38%); } .cabeca{ padding:var(--s-5) 0 var(--s-4); } .sobretitulo{ display:flex; align-items:center; gap:var(--s-2); font-size:var(--t-micro); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-3); margin-bottom:var(--s-2); } .sobretitulo .seta{ color:var(--destaque); } .titulo{ font-family:var(--fonte-titulo); font-weight:900; font-size:var(--t-2xl); letter-spacing:var(--tracking-titulo); line-height:1; text-transform:uppercase; } .subtitulo{ color:var(--texto-2); font-size:var(--t-xs); margin-top:var(--s-2); max-width:64ch; } /* ----------------------------------------------------------------- seção Seção não é caixa: é rótulo mais fio. Caixa só para objeto de verdade. */ .sec{ margin-top:var(--s-6); } .sec-cab{ display:flex; align-items:center; gap:var(--s-3); padding-bottom:var(--s-2); border-bottom:2px solid var(--destaque); margin-bottom:var(--s-3); } .sec-cab .seta{ color:var(--destaque); } .sec-titulo{ font-family:var(--fonte-titulo); font-weight:900; font-size:var(--t-lg); letter-spacing:.12em; text-transform:uppercase; } .sec-cab .dir{ margin-left:auto; display:flex; align-items:center; gap:var(--s-2); } .sec-nota{ font-size:var(--t-micro); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); } /* ---------------------------------------------------------------- cartão */ .card{ background:var(--superficie); border:1px solid var(--fio); padding:var(--s-4); } .card-fio{ background:transparent; } .card-destaque{ border-color:var(--destaque); } .card-faixa{ border-bottom:5px solid var(--destaque); } .card-faixa.is-ok { border-bottom-color:var(--ok); } .card-faixa.is-atencao{ border-bottom-color:var(--atencao); } .card-faixa.is-alerta { border-bottom-color:var(--alerta); } a.card{ text-decoration:none; color:inherit; display:block; transition:border-color .15s, transform .15s; } a.card:hover{ border-color:var(--destaque); transform:translateY(-1px); } .grade{ display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); } .grade-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } .linha{ display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap; } .empurra{ margin-left:auto; } /* --------------------------------------------------------------- métrica Número grande, unidade pequena, rótulo em maiúscula espaçada. É a assinatura da casa. */ .metrica{ display:flex; flex-direction:column; gap:var(--s-2); } .metrica-k{ font-size:var(--t-micro); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-3); } .metrica-v{ font-family:var(--fonte-titulo); font-weight:900; font-size:var(--t-3xl); line-height:.94; letter-spacing:.01em; } .metrica-v small{ font-size:var(--t-md); font-weight:600; color:var(--texto-2); margin-left:4px; } .metrica-v.is-ok{ color:var(--ok); } .metrica-v.is-atencao{ color:var(--atencao); } .metrica-v.is-alerta{ color:var(--alerta); } .metrica-v.is-vazio{ color:var(--texto-3); } .metrica-nota{ font-size:var(--t-micro); color:var(--texto-3); } .metrica-xl .metrica-v{ font-size:var(--t-4xl); } /* ---------------------------------------------------------------- estado Fio mais ponto. Sem fundo translúcido colorido. */ .estado{ display:inline-flex; align-items:center; gap:6px; font-size:var(--t-micro); font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--fio-2); border-radius:var(--r-sm); padding:3px 8px; color:var(--texto-2); white-space:nowrap; } .estado::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; } .estado.is-ok{ color:var(--ok); border-color:var(--ok); } .estado.is-atencao{ color:var(--atencao); border-color:var(--atencao); } .estado.is-alerta{ color:var(--alerta); border-color:var(--alerta); } .estado.is-off{ color:var(--texto-3); border-color:var(--fio-2); } /* ----------------------------------------------------------------- botão */ .btn{ font-family:var(--fonte-texto); font-size:var(--t-sm); font-weight:600; display:inline-flex; align-items:center; gap:var(--s-2); background:var(--superficie); color:var(--texto); border:1px solid var(--fio-2); border-radius:var(--r-sm); padding:10px 16px; cursor:pointer; text-decoration:none; transition:border-color .15s, background .15s; } .btn:hover{ border-color:var(--destaque); } .btn:disabled{ opacity:.45; cursor:not-allowed; } .btn-forte{ background:var(--destaque); color:var(--destaque-tinta); border-color:var(--destaque); font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:var(--t-xs); } .btn-forte:hover{ filter:brightness(1.08); } .btn-fio{ background:transparent; } .btn-pp{ padding:6px 10px; font-size:var(--t-xs); } .btn-perigo{ color:var(--alerta); border-color:var(--alerta); background:transparent; } .voltar{ display:inline-flex; align-items:center; gap:6px; font-size:var(--t-xs); font-weight:600; color:var(--texto-2); text-decoration:none; border:1px solid var(--fio); border-radius:var(--r-sm); padding:6px 12px; } .voltar:hover{ border-color:var(--fio-2); color:var(--texto); } /* ------------------------------------------------------------ formulário */ .campo{ display:flex; flex-direction:column; gap:5px; } .rotulo{ font-size:var(--t-micro); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3); } input, select, textarea{ font-family:var(--fonte-texto); font-size:var(--t-sm); color:var(--texto); background:var(--fundo-2); border:1px solid var(--fio-2); border-radius:var(--r-sm); padding:10px 12px; width:100%; } input:focus, select:focus, textarea:focus{ border-color:var(--destaque); outline:none; } input[type=checkbox], input[type=radio]{ width:auto; accent-color:var(--destaque); } /* --------------------------------------------------------------- tabela */ table.dados{ width:100%; border-collapse:collapse; font-size:var(--t-xs); } table.dados th{ font-size:var(--t-micro); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3); text-align:left; padding:0 var(--s-2) var(--s-2); border-bottom:1px solid var(--fio); } table.dados td{ font-weight:500; padding:9px var(--s-2); border-bottom:1px solid var(--fio); color:var(--texto); } table.dados tr:last-child td{ border-bottom:none; } table.dados td.is-sobe{ color:var(--atencao); } table.dados td.is-desce{ color:var(--ok); } .rola-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* ---------------------------------------------------------------- vazio */ .vazio{ border:1px dashed var(--fio-2); padding:var(--s-5); text-align:center; color:var(--texto-3); font-size:var(--t-xs); } /* ---------------------------------------------------------------- ícone — hidratado por crv-icons.js Abaixo de 24px use data-ico="atomo-grosso" no lugar de "atomo". */ .ico{ display:inline-flex; width:1.2em; height:1.2em; flex:none; } .ico svg{ width:100%; height:100%; display:block; } .ico-lg{ width:24px; height:24px; } .ico-xl{ width:34px; height:34px; } /* ----------------------------------------------------------------- resto */ .fraco{ color:var(--texto-2); } .fraco-2{ color:var(--texto-3); } .micro{ font-size:var(--t-micro); } .caps{ letter-spacing:.14em; text-transform:uppercase; font-weight:600; } .fio{ height:1px; background:var(--fio); border:0; margin:var(--s-4) 0; } .girando{ width:18px; height:18px; border:2px solid var(--fio-2); border-top-color:var(--destaque); border-radius:50%; animation:crv-gira .6s linear infinite; } @keyframes crv-gira{ to{ transform:rotate(360deg); } } @media (max-width:560px){ :root{ --t-2xl:24px; --t-3xl:32px; --t-4xl:42px; } .topo{ padding:0 var(--s-4); } } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }