/* =========================================================================== Identidade visual da Tick's — tokens da PLATAFORMA =========================================================================== Estas variáveis valem para a moldura do produto: construtor, assistente, autenticação e páginas institucionais. NÃO valem para o site que o cliente está montando. O site do cliente tem paleta própria, extraída da logo dele (LogoColorPicker / BlockColors / presets). Ver o bloco "CONGELADOS" no fim deste arquivo. Carregado ANTES do app.css (Components/App.razor); o app.css redefine as suas variáveis --color-* a partir daqui, em vez de repetir hex. =========================================================================== */ :root { /* ----------------------------------------------------------------- Cores da marca ----------------------------------------------------------------- */ --tk-bg: #F6EFE3; /* creme — fundo principal de todas as telas */ /* Aquecido de #FFFDF8: como fundo de seção inteira aquele tom lia como branco puro ao lado do creme, e a troca entre as faixas ficava dura. Continua mais claro que o creme (é o que separa um card do fundo), só que sem o salto. */ --tk-surface: #FDFAF2; /* cards, painéis, campos */ --tk-sand: #E8D9BC; /* painel lateral, barra de janela, hover */ --tk-green: #17452A; /* títulos, ícones, "resolvido/concluído" */ --tk-orange: #F26B1D; /* ação: botão primário, foco, item ativo */ --tk-ink: #2B2A26; /* texto corrido */ --tk-muted: #626056; /* texto secundário */ --tk-line: rgba(23, 69, 42, .18); /* bordas e divisores */ /* Laranja escurecido o mínimo necessário para passar em 4,5:1 sobre --tk-bg (4,54:1) e sobre --tk-surface (5,11:1). Calculado com o ContrastChecker do próprio projeto (Models/SiteBuilder/BlockStyle.cs). O --tk-orange puro NÃO passa como texto (2,66:1 / 3,00:1) — por isso ele só existe como preenchimento, nunca como cor de letra. Atenção: sobre --tk-sand este tom dá 3,73:1 e também reprova. Link sobre areia usa --tk-green (7,85:1) com sublinhado — ver .tk-link-sand no app.css. */ --tk-orange-text: #B34F15; /* Variante para fundo de estado ativo/hover sem virar preenchimento sólido — mantém o laranja legível como acento discreto. */ --tk-orange-soft: rgba(242, 107, 29, .12); --tk-green-soft: rgba(23, 69, 42, .08); /* ----------------------------------------------------------------- Tipografia — Instrument Sans hospedada localmente (wwwroot/fonts), não via Google Fonts. É fonte variável: um arquivo cobre 400–700. ----------------------------------------------------------------- */ --tk-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ----------------------------------------------------------------- Forma — dois raios, de propósito. Campo e botão são "peças de controle" (6px); card e painel são "superfícies" (12px). Um raio único para tudo apaga essa diferença. ----------------------------------------------------------------- */ --tk-radius-field: 6px; --tk-radius-card: 12px; /* Única sombra do sistema, e só para o que flutua sobre o resto (menu suspenso, popover, modal). Nada de sombra em card ou botão. */ --tk-shadow-float: 0 6px 20px rgba(23, 69, 42, .12); --tk-ease: cubic-bezier(0.16, 1, 0.3, 1); /* ----------------------------------------------------------------- Bootstrap 5.3 — sobrescrito a partir dos tokens, em vez de reescrever componente por componente. Só as variáveis que as 4 classes de cor realmente usadas na marcação consomem (btn-primary, btn-outline-primary, text-danger, btn-outline-light). ----------------------------------------------------------------- */ --bs-primary: var(--tk-orange); --bs-primary-rgb: 242, 107, 29; --bs-body-bg: var(--tk-bg); --bs-body-color: var(--tk-ink); --bs-body-font-family: var(--tk-font); --bs-border-color: var(--tk-line); --bs-border-radius: var(--tk-radius-field); --bs-border-radius-lg: var(--tk-radius-card); --bs-link-color: var(--tk-orange-text); --bs-link-hover-color: var(--tk-green); --bs-secondary-color: var(--tk-muted); --bs-emphasis-color: var(--tk-green); } /* =========================================================================== O SITE DO CLIENTE — tokens próprios =========================================================================== Estas variáveis isolam o site que o cliente está montando da identidade da Tick's: não seguem os --tk-* acima. Motivo: o site de um cliente sem logo enviada herdaria o laranja e a fonte da Tick's, que é exatamente o que o briefing proíbe. Eram "congeladas" (valores idênticos aos do app.css antigo) para que a troca de identidade da plataforma não mexesse no site do cliente. Agora o próprio site foi redesenhado (wwwroot/css/client-site.css), então os valores abaixo são DELE, de propósito: - tipografia: Sora nos títulos (geométrica, firme) e Inter no texto (legível em tela), as duas já carregadas por App.razor; - --preview-accent-fallback: a cor de marca de quem ainda não escolheu uma na logo. Era o verde de teste #2fcf2f; agora é o mesmo verde-escuro que BlockColors.PrimaryHex usa no C# (#014000), para o CSS e os blocos concordarem; - sombras em duas camadas (contato + difusa), o que dá profundidade sem parecer "caixa flutuando"; - raios maiores: o site inteiro fala a mesma língua de cantos suaves. =========================================================================== */ :root { --preview-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --preview-font-heading: 'Sora', 'Helvetica Neue', Arial, sans-serif; --preview-accent-fallback: #014000; --preview-text: #1d2330; --preview-text-muted: #5b6676; --preview-radius: 1.25rem; --preview-shadow-soft: 0 1px 2px rgba(18, 20, 26, 0.05), 0 10px 28px -10px rgba(18, 20, 26, 0.16); --preview-shadow-strong: 0 2px 4px rgba(14, 16, 20, 0.06), 0 28px 60px -14px rgba(14, 16, 20, 0.34); --preview-ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* =========================================================================== Fontes locais =========================================================================== Instrument Sans é fonte variável: o mesmo arquivo atende 400, 500 e 700, por isso um @font-face por subset com intervalo de peso, e não um por peso. font-display: swap — o texto aparece na fonte de sistema e troca quando a fonte chega, em vez de a tela ficar em branco. =========================================================================== */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* =========================================================================== Logo da Tick's =========================================================================== Mora aqui, e nao num .razor.css, de proposito: a home institucional (wwwroot/index.html) e HTML estatico puro e nao passa pelo Razor, entao nao receberia um estilo isolado por componente. Com a regra global, a mesma marcacao funciona nos dois lugares. =========================================================================== */ /* Tudo dimensionado em `em`, a partir do font-size que o parâmetro Size define no elemento raiz. Assim a logo escala inteira com uma única propriedade, e a caixa-check nunca sai de proporção com as letras. */ .ticks-logo { display: inline-flex; align-items: baseline; font-family: var(--tk-font); font-weight: 700; letter-spacing: -0.045em; color: var(--tk-orange); line-height: 1; white-space: nowrap; /* O wordmark é sempre em minúsculas, independentemente de onde a logo for usada (um cabeçalho com text-transform herdado não pode transformá-la em "TICK'S"). */ text-transform: lowercase; user-select: none; } .ticks-logo-word { display: inline-block; } /* A caixa-check ocupa o lugar do apóstrofo: largura de ~0.46em, alinhada pelo topo das ascendentes (o "t" e o "k" ao lado), não pela linha de base — por isso o deslocamento vertical. O overflow visível deixa a ponta do check passar do canto superior direito da caixa, como na marca. */ /* As duas cores da marca são variáveis para que uma superfície escura possa trocar o check sem precisar de outra versão do componente: sobre o verde da marca, um check verde simplesmente desaparece. Quem estiver num fundo escuro define --ticks-logo-check (ver app.css). */ .ticks-logo-mark rect { stroke: var(--ticks-logo-box, var(--tk-orange)); } .ticks-logo-mark path { stroke: var(--ticks-logo-check, var(--tk-green)); } .ticks-logo-mark { width: 0.46em; height: 0.46em; flex: none; overflow: visible; /* Sobe a caixa até a altura das ascendentes e abre um respiro mínimo dos dois lados, no lugar do apóstrofo. */ transform: translateY(-0.30em); margin: 0 0.04em; }