/* ============================================================ TEMA — ALMY CLUB ------------------------------------------------------------ ESTE É O ÚNICO ARQUIVO QUE MUDA DE CLIENTE PARA CLIENTE. Nada aqui é estrutura. Só identidade. Para criar uma loja nova: copie este arquivo, troque os valores, não renomeie nenhuma variável. ============================================================ */ :root { /* --- PALETA ------------------------------------------------ WARM LUXURY & TIMELESS POISE — 16/09/2026. Substitui o "Atelier Athleisure" (dourado #C8A84B + vinho #4A1E2F, com a regra "sem preto"). Decisão do Guilherme: descartar a base de 09/09, não conciliar as duas. A base agora é carbon quase preto sobre ivory, com terracota como único acento e blush como tinta de apoio. A regra "sem preto" foi revogada: o carbon #211E1C É a cor da marca. */ --marca-primaria: #B78275; /* terracota — acentos, bordas, hover */ --marca-primaria-alt: #D8B4A6; /* blush — tinta clara de apoio */ --marca-escura: #211E1C; /* carbon — texto forte, botão sólido */ --marca-escura-hover: #B78275; /* hover do sólido: carbon → terracota */ --marca-media: #4D4540; /* texto corrido */ --marca-suave: #6E655E; /* texto secundário, legendas (4.5:1 no ivory) */ --marca-detalhe: #8F5A4A; /* link e eyebrow — terracota fechado. O blush puro (#D8B4A6) ficaria em 1.8:1 sobre o ivory; link precisa de 4.5:1. */ /* --marca-realce é o hover de link (menu, rodapé, migalhas) e o itálico do hero. A Spec pedia o blush #D8B4A6 aqui, mas blush sobre ivory é 1.8:1 — o link DESAPARECERIA ao passar o mouse. Terracota profunda: 7.2:1, e mais escura que --marca-detalhe, então o link escurece no hover em vez de sumir. O blush segue disponível em --marca-primaria-alt, para preenchimento decorativo, que é onde a Spec realmente o queria. */ --marca-realce: #7A4437; /* terracota profunda — hover, itálico do hero */ /* Antes eram os tons de prestígio do Atelier (vinho, mocha, taupe). Os nomes ficam — components.css e painel.css os leem em 500+ lugares — mas agora apontam para a família carbon. */ --marca-vinho: #211E1C; /* contraste alto: cartão escuro, checkout */ --marca-vinho-fundo: #171513; /* seção escura, um passo abaixo do carbon */ --marca-mocha: #8F5A4A; /* filtros, tags, divisores */ --marca-taupe: #9A9089; /* placeholder, estado inativo */ --fundo: #F9F6F0; /* ivory — fundo da página */ --fundo-alt: #EFE9DF; /* sand — seções alternadas, hero */ /* A Spec mapeava --superficie para o mesmo sand de --fundo-alt. Não dá: o corpo do painel, o rodapé, a barra de atalhos e a abertura do catálogo JÁ são --fundo-alt, e o cartão que vive dentro deles usa --superficie — sand sobre sand, separado só por um fio de rgba(.08), é cartão invisível. --superficie continua sendo o tom MAIS CLARO da pilha, como era antes, agora em temperatura ivory. Sand segue em --fundo-alt, para a seção. */ --superficie: #FDFBF7; /* cartões — o tom que se levanta */ --borda-quente: rgba(33,30,28,.08); /* hairline, não borda opaca */ /* --- TIPOGRAFIA -------------------------------------------- Três famílias, três papeis — revisto em 16/09/2026 com o Warm Luxury. EB Garamond e Montserrat sairam. Bodoni Moda narrativa da marca: hero, título de seção, nome de peça e de coleção. Didone de alto contraste — é o que dá o tom editorial. Plus Jakarta Sans tudo o que se opera: botão, rótulo, descrição, formulário, menu Inter SÓ número: preço, parcela, medida, quantidade A separação do número não é preciosismo. Fonte de texto usa algarismo old-style, que desce abaixo da linha de base e faz coluna de preço parecer torta — o painel já tinha resolvido isso, e agora a loja resolve igual. Toda pilha termina numa fonte que existe em qualquer máquina: Google Fonts fora do ar não pode deixar a loja sem tipografia. */ --fonte-titulo: "Bodoni Moda", Georgia, "Times New Roman", serif; --fonte-corpo: "Plus Jakarta Sans", -apple-system, "Segoe UI", Helvetica, sans-serif; --fonte-ui: "Plus Jakarta Sans", -apple-system, "Segoe UI", Helvetica, sans-serif; --fonte-numero: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* Assinatura da marca: "almyclub" e a flor. Definido em 08/09/2026, Poppins Light. Nao usar em texto corrido. PENDENTE: o Warm Luxury pede um wordmark mais editorial, mas trocar a fonte do logo é decisão de marca — fica em Poppins até o Guilherme confirmar. Não alterar sem essa confirmação. */ --fonte-logo: "Poppins", sans-serif; /* --- FORMA -------------------------------------------------- Canto reto. O Warm Luxury não tem raio: a moldura é um fio, não uma pastilha. Só emblema redondo e avatar seguem circulares, e esses usam 50%/999px no próprio componente. */ --raio-sm: 0px; --raio-md: 0px; --raio-lg: 0px; /* --- ESPAÇO ------------------------------------------------- Uma escala só, para o respiro entre seções ser decisão e não chute. Componente aperta por dentro (2xs a md) e o espaço generoso fica por fora (2xl a 4xl) — assim a foto lidera. */ --espaco-2xs: 0.25rem; --espaco-xs: 0.5rem; --espaco-sm: 0.75rem; --espaco-md: 1rem; --espaco-lg: 1.5rem; --espaco-xl: 2rem; --espaco-2xl: 3rem; --espaco-3xl: 4.5rem; --espaco-4xl: 6rem; /* --- GRADE --------------------------------------------------- 12 colunas até 1320px. A margem lateral encolhe por faixa, e e ela que garante que a foto respire no celular. */ --largura-max: 1320px; --gutter: 1.5rem; --margem-lateral: 3rem; /* --- INTERAÇÃO ---------------------------------------------- Como a interface se move e responde ao toque. Vale para a loja e para o painel: os dois leem este arquivo, então o site e o admin reagem do mesmo jeito. A curva sai rápido e chega devagar — o movimento termina calmo, em vez de frear de repente. */ --mov-rapido: 130ms; --mov-normal: 220ms; --mov-lento: 420ms; --curva: cubic-bezier(.32, .72, 0, 1); /* Controle e pastilha também vão a zero: input, chip e botão compartilham o mesmo canto reto do resto do sistema. */ --raio-controle: 0px; --raio-pastilha: 0px; /* Elevação quase imperceptível: as opacidades caíram ~60% em relação ao Atelier e a tinta virou carbon em vez de cacau. No Warm Luxury é o hairline que separa as camadas, não a sombra. */ --sombra-controle: 0 1px 1.5px rgba(33,30,28,.04); --sombra-flutuante: 0 4px 14px rgba(33,30,28,.04), 0 1px 3px rgba(33,30,28,.024); --sombra-alta: 0 18px 44px rgba(33,30,28,.064), 0 2px 8px rgba(33,30,28,.032); /* Difusão para gaveta da sacola, menu e dropdown: quase sem borda visível, tingida de carbon em vez de cinza sintético. */ --sombra-ambiente: 0 16px 40px -12px rgba(33,30,28,.032), 0 2px 6px 0 rgba(33,30,28,.012); /* Fundo escurecido de modal. */ --scrim: rgba(33,30,28,.45); /* O anel de foco NÃO segue a regra de reduzir: acessibilidade não é decoração. Deixou de ser um halo translúcido (o anterior, dourado a 32%, dava ~1.4:1 sobre o ivory — um anel que ninguém vê não é indicador de foco) e virou o padrão de dois passos: um vão da cor do fundo e, por fora, o fio carbon. 15:1 contra o ivory, e continua legível sobre o sand e sobre foto. */ --foco: 0 0 0 2px var(--fundo), 0 0 0 4px var(--marca-escura); /* --- PERFIL DA LOJA ---------------------------------------- Ajusta a densidade visual conforme o público. fitness/grife → respiro e foto grande modinha → mais produtos por tela, preço protagonista */ --grade-vitrine: 4; /* produtos por linha no desktop */ --grade-catalogo: 3; --proporcao-foto: 3 / 4; /* grife costuma usar 4/5 */ --hero-altura: 640px; } /* ============================================================ ROLAGEM - loja e painel ------------------------------------------------------------ A barra de rolagem faz parte da identidade tanto quanto a fonte: a do sistema (17px, cinza, com setas) em cima de um fundo ivory parece componente de outro produto. Aqui ela vira um fio fino, carbon translucido, sem trilho visivel - some quando parada e escurece so quando a mao passa por cima. Chrome 121+ e Firefox leem scrollbar-width/scrollbar-color e IGNORAM ::-webkit-scrollbar quando esses existem. Safari e o contrario. Por isso as duas escritas: cada navegador pega a sua. ============================================================ */ :root { --rolagem-polegar: rgba(33,30,28,.22); --rolagem-polegar-forte: rgba(33,30,28,.42); } * { scrollbar-width: thin; scrollbar-color: var(--rolagem-polegar) transparent; } *:hover { scrollbar-color: var(--rolagem-polegar-forte) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--rolagem-polegar); border-radius: 999px; /* Borda transparente com background-clip: o polegar fica com 4px de folga do conteudo em vez de encostar nele. */ border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--rolagem-polegar-forte); } ::-webkit-scrollbar-button { display: none; } /* Rolagem suave em link de ancora, nos dois lados. Quem pediu menos movimento ao sistema recebe o salto direto. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Tablet: 8 colunas. */ @media (max-width: 1023px) { :root { --gutter: 1rem; --margem-lateral: 2rem; } } /* Celular: 4 colunas, e a margem some quase toda — foto de roupa perde muito quando encolhe. */ @media (max-width: 767px) { :root { --gutter: 1rem; --margem-lateral: 1rem; } }