/** * Jane Flores — Design tokens * * Fonte única de verdade do design system (blueprint §15). * Nenhum valor de cor, espaçamento ou tipografia deve ser escrito * literalmente em outro arquivo CSS: sempre referenciar um token daqui. * * DIREÇÃO — híbrida, e a escolha é deliberada. * * Os NEUTROS vêm da Bonfim Flores, a marca irmã: fundo bege quente, texto * marrom-grafite, superfícies em tom de papel. É o que dá parentesco visual * entre as duas lojas do mesmo cliente. * * A COR DE AÇÃO é da Jane Flores: o azul sereno. A Bonfim usa verde vivo, que * funciona numa floricultura de presentes e destoaria numa loja de homenagem * fúnebre. Irmãs no clima, distintas na assinatura. * * CONTRASTE * Todos os pares de texto e interface foram medidos: o menor deles é 3,26:1 * (borda de controle, mínimo 3:1 pela WCAG 1.4.11) e o menor par de texto é * 4,57:1 (mínimo 4,5:1). Ao trocar qualquer cor daqui, medir de novo. */ :root { /* ---------- Cor ---------- * Os 20 pares de texto e interface foram medidos sobre a base quente. O * menor par de texto é 4,69:1 (apagado sobre a superfície de apoio) e a * menor borda de controle é 3,58:1. Trocar qualquer valor daqui exige * medir de novo. */ --jf-color-bg: #FAF4F1; /* bege quente — da Bonfim */ --jf-color-surface: #FFFFFF; --jf-color-surface-alt: #EBE4DF; /* tom de papel, para faixas de apoio */ --jf-color-text: #3F3B36; /* marrom-grafite — da Bonfim */ --jf-color-text-muted: #6B635B; --jf-color-text-on-dark: #FFFFFF; --jf-color-border: #E0D6CF; /* divisórias decorativas */ --jf-color-border-strong: #8A7F77; /* borda de controle — 3,58:1 */ --jf-color-primary: #2D6285; /* azul sereno — assinatura da Jane */ --jf-color-primary-hover: #214B68; --jf-color-primary-soft: #E6EFF5; --jf-color-accent: #A65648; /* rosé terroso, parente do da Bonfim */ --jf-color-accent-soft: #F7EAE4; --jf-color-success: #1F6A50; --jf-color-warning: #7A5410; --jf-color-error: #9B2C20; --jf-color-error-soft: #FBEDE9; --jf-color-focus: #1A5FA8; /* anel de foco visível (§21) */ /* Não há véu sobre foto. O banner tinha texto sobre a imagem com um * degradê escuro por baixo; passou a painel de texto + foto ao lado, e o * contraste deixou de depender da imagem (ver banners.css, no plugin). Não * reintroduzir texto sobre foto sem medir o pior caso. */ /* ---------- Tipografia ---------- */ /* Montserrat nos títulos, como na Bonfim — é o que faz as duas lojas parecerem da mesma casa ao primeiro olhar. Carregada em functions.php. */ --jf-font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --jf-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --jf-weight-regular: 400; --jf-weight-semibold: 600; --jf-weight-bold: 700; /* só Montserrat, em títulos de destaque */ --jf-size-xs: 0.8125rem; --jf-size-sm: 0.9375rem; --jf-size-base: 1.0625rem; --jf-size-lg: 1.1875rem; --jf-size-xl: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem); --jf-size-2xl: clamp(1.625rem, 1.25rem + 1.9vw, 2.25rem); --jf-size-3xl: clamp(2rem, 1.45rem + 2.7vw, 3rem); --jf-size-4xl: clamp(2.25rem, 1.5rem + 3.6vw, 3.75rem); --jf-leading-tight: 1.2; --jf-leading-snug: 1.35; --jf-leading-normal: 1.6; --jf-tracking-tight: -0.01em; /* Espaçamento do rótulo em caixa alta. É o mesmo valor do checkout (`--cee-caixa-alta-espaco`): o eyebrow é o elemento tipográfico que as duas pontas da compra têm em comum. */ --jf-tracking-eyebrow: 0.14em; /* ---------- Espaçamento ---------- * Escala de 4px. Usar sempre um degrau da escala: espaçamento inventado * caso a caso é o que faz uma interface parecer desalinhada sem que se * consiga apontar onde. */ --jf-space-3xs: 0.25rem; /* 4px */ --jf-space-2xs: 0.5rem; /* 8px */ --jf-space-xs: 0.75rem; /* 12px */ --jf-space-sm: 1rem; /* 16px */ --jf-space-md: 1.5rem; /* 24px */ --jf-space-lg: 2rem; /* 32px */ --jf-space-xl: 3rem; /* 48px */ --jf-space-2xl: 4rem; /* 64px */ --jf-space-3xl: 6rem; /* 96px */ /* Respiro interno das caixas — um valor por densidade, não por componente. É isto que mantém card, painel e aviso com a mesma respiração. */ --jf-pad-sm: var(--jf-space-sm); --jf-pad-md: var(--jf-space-md); --jf-pad-lg: clamp(var(--jf-space-md), 3vw, var(--jf-space-xl)); --jf-section-y: clamp(var(--jf-space-xl), 6vw, var(--jf-space-3xl)); /* ---------- Layout ---------- */ --jf-container: 1120px; /* abre para 1392px acima de 1200px — ver abaixo */ --jf-container-narrow: 768px; --jf-filtros: 16.5rem; /* coluna de filtros do catálogo */ --jf-measure: 68ch; --jf-gutter: clamp(var(--jf-space-sm), 4vw, var(--jf-space-lg)); /* ---------- Forma ---------- * DUAS FAMÍLIAS DE RAIO, e a divisão é proposital. * * O checkout em etapas usa cantos de 2–4px (modelo Chilli Beans) e a loja * usava 6–24px em tudo. Quem saía do catálogo e entrava no checkout via a * forma mudar junto com a cor. Agora: * * CONTROLES campo, botão, selo, bandeira — 4 a 6px, encostando no * checkout. É o que a pessoa toca, e é onde a diferença era * mais visível. * SUPERFÍCIES card, painel, banner, gaveta — 16 a 24px. A loja continua * macia onde ela é vitrine; o checkout não tem superfícies * desse tipo, então não há o que reconciliar. */ --jf-radius-sm: 6px; /* campo de formulário */ --jf-radius-md: 8px; /* botão, selo, bandeira — o raio da Bonfim */ --jf-radius-lg: 16px; /* card, painel, aviso */ --jf-radius-xl: 24px; /* banner, gaveta */ --jf-radius-pill: 999px; --jf-shadow-sm: 0 1px 2px rgba(30, 42, 54, 0.05); --jf-shadow-md: 0 6px 20px rgba(30, 42, 54, 0.08); --jf-shadow-lg: 0 14px 40px rgba(30, 42, 54, 0.12); --jf-shadow-raised: 0 -2px 12px rgba(30, 42, 54, 0.10); /* ---------- Controles ---------- */ --jf-control-height: 3rem; --jf-control-height-lg: 3.5rem; --jf-tap-min: 44px; --jf-focus-width: 3px; --jf-focus-offset: 2px; /* ---------- Movimento ---------- * A coreografia é feita de três coisas: uma curva só, uma escala de * duração e um atraso entre irmãos. Componentes diferentes que usem os * mesmos três valores parecem parte do mesmo sistema; cada um com a sua * curva parece um site remendado. */ --jf-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* saída suave */ --jf-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --jf-duration-fast: 160ms; --jf-duration: 280ms; --jf-duration-slow: 560ms; --jf-stagger: 80ms; /* atraso entre elementos irmãos */ --jf-rise: 14px; /* deslocamento de entrada */ --jf-transition: var(--jf-duration-fast) var(--jf-ease-soft); } /** * Container largo em telas grandes. * * Em 1120px fixos, um monitor de 1440 ou 1920 sobrava faixa vazia dos dois * lados e os trilhos de coroas ficavam apertados. Acima de 1200px o container * abre para 1392px — a largura da Bonfim, e a mesma do checkout em etapas * (`--cee-largura`), então sair da vitrine para o checkout não muda a moldura. * Até 1200px nada muda. */ @media (min-width: 75em) { :root { --jf-container: 1392px; } } /** * Menos movimento, quando a pessoa pede. * * Não basta encurtar a duração: entradas com deslocamento e o giro automático * dos banners precisam realmente parar. O que sobra é a mudança de estado, * instantânea (§21). */ @media (prefers-reduced-motion: reduce) { :root { --jf-duration-fast: 0ms; --jf-duration: 0ms; --jf-duration-slow: 0ms; --jf-stagger: 0ms; --jf-rise: 0px; --jf-transition: 0ms linear; } } /** * Desenhos de ícone usados como máscara. * * Ficam aqui, e não no componente, pela mesma razão que as cores: é o lugar * onde se vê o sistema inteiro. São `mask-image`, então a cor vem de quem usa. */ :root { --jf-icone-relogio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); --jf-icone-local: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); --jf-icone-flor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Ccircle cx='12' cy='6' r='3.2'/%3E%3Ccircle cx='17.2' cy='9' r='3.2'/%3E%3Ccircle cx='17.2' cy='15' r='3.2'/%3E%3Ccircle cx='12' cy='18' r='3.2'/%3E%3Ccircle cx='6.8' cy='15' r='3.2'/%3E%3Ccircle cx='6.8' cy='9' r='3.2'/%3E%3C/svg%3E"); } /** * Texturas de fundo. * * REGRAS DE USO, e elas não são estéticas: * * 1. Opacidade do traço em 0,06. Medido: no ponto cheio do desenho, o texto * apagado sobre a faixa de apoio ainda dá 5,21:1 (mínimo 4,5). Subir daqui * exige medir de novo — a textura muda o fundo efetivo, e os pares da * paleta foram validados sobre cor chapada. * 2. Só em faixas alternadas. Textura em tudo deixa de ser textura e vira * ruído de fundo. * 3. Nunca atrás de texto corrido longo. Serve para faixas de apoio, não * para a coluna de leitura. * 4. Nunca atrás de foto. A foto do produto é a protagonista (§16). * * O desenho das pétalas vem da flor do logotipo — é o único elemento gráfico * próprio que a marca tem, e repeti-lo em escala pequena é o que faz a textura * parecer da Jane Flores em vez de um padrão genérico. */ :root { --jf-pattern-petalas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%233F3B36' stroke-opacity='0.06' stroke-width='1.3'%3E%3Ccircle cx='40' cy='40' r='3.4'/%3E%3Ccircle cx='40' cy='31.5' r='4.7'/%3E%3Ccircle cx='47.4' cy='35.8' r='4.7'/%3E%3Ccircle cx='47.4' cy='44.2' r='4.7'/%3E%3Ccircle cx='40' cy='48.5' r='4.7'/%3E%3Ccircle cx='32.6' cy='44.2' r='4.7'/%3E%3Ccircle cx='32.6' cy='35.8' r='4.7'/%3E%3Ccircle cx='135' cy='135' r='3.4'/%3E%3Ccircle cx='135' cy='126.5' r='4.7'/%3E%3Ccircle cx='142.4' cy='130.8' r='4.7'/%3E%3Ccircle cx='142.4' cy='139.2' r='4.7'/%3E%3Ccircle cx='135' cy='143.5' r='4.7'/%3E%3Ccircle cx='127.6' cy='139.2' r='4.7'/%3E%3Ccircle cx='127.6' cy='130.8' r='4.7'/%3E%3C/g%3E%3C/svg%3E"); --jf-pattern-grade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%233F3B36' fill-opacity='0.06'/%3E%3C/svg%3E"); --jf-pattern-linhas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 16L16 0' stroke='%233F3B36' stroke-opacity='0.06' stroke-width='1.2'/%3E%3C/svg%3E"); } :root { --jf-icone-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 0-7.7 13.6L3 21l4.5-1.2A9 9 0 1 0 12 3z'/%3E%3Cpath d='M9 9.5c0 3 2.5 5.5 5.5 5.5l1-1.5-2-1-1 1a5 5 0 0 1-2-2l1-1-1-2-1.5 1z'/%3E%3C/svg%3E"); --jf-icone-cadeado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }