/* ========================================================================== SUBTROPIKAL TAILOR MADE — TOKENS (subtropikal.com.br) Fonte única de verdade do site publicado. Hierarquia: DNA.md > DESIGN.md > este arquivo > styles.css. Mesmo vocabulário do design system: um token chamado --c-fg-2 significa a mesma coisa aqui e no styleguide. Regra dura: nenhum valor literal de cor, duração ou curva fora daqui. ========================================================================== */ :root{ /* --------------------------------------------------------------------- 1. PRIMITIVAS — matéria-prima. Componente nenhum consome direto. --------------------------------------------------------------------- */ --stk-black:#000; --stk-white:#fff; --stk-ink:#111; /* tipografia sobre a faixa branca */ --stk-gray-500:#6e6e6e; /* rótulo sobre a faixa branca */ --stk-near:#0a0a0a; /* chão da foto do hero */ /* A neutralidade deste site é branco com alfa: ela precisa deitar sobre uma fotografia, não só sobre preto chapado. Os degraus abaixo foram medidos contra preto — o valor ao lado é o contraste real. */ --stk-alpha-72:rgba(255,255,255,.72); /* 10.5:1 — corpo */ --stk-alpha-56:rgba(255,255,255,.56); /* 6.5:1 — rótulo, legenda */ --stk-alpha-38:rgba(255,255,255,.38); /* 3.2:1 — contorno de campo */ --stk-alpha-22:rgba(255,255,255,.22); /* 1.8:1 — fio decorativo */ --stk-alpha-12:rgba(255,255,255,.12); /* 1.3:1 — fio de card */ --stk-alpha-06:rgba(255,255,255,.06); --stk-alpha-04:rgba(255,255,255,.04); --stk-alpha-02:rgba(255,255,255,.02); /* Herança A VOAR — património do festival, documentada para não ser reinventada. PROIBIDA em qualquer elemento de interface. Se a cor não conta a herança, não entra. */ --stk-heritage-lima:#E5F538; --stk-heritage-coral:#FF9777; --stk-heritage-rosa:#FF82B0; --stk-heritage-ceu:#8FD1E4; --stk-heritage-menta:#8BDAD5; --stk-heritage-laranja:#FF9E63; /* --------------------------------------------------------------------- 2. SEMÂNTICAS — o que o componente consome. Padrão = campo escuro, o campo-assinatura da marca. --------------------------------------------------------------------- */ --c-bg:var(--stk-black); --c-bg-photo:var(--stk-near); /* chão sob a foto do hero */ --c-surface:var(--stk-alpha-02); /* card, bloco de serviço */ --c-surface-hover:var(--stk-alpha-04); --c-surface-solid:#0b0b0b; /* chapado, quando não há foto atrás */ --c-field:var(--stk-alpha-04); /* campo de formulário */ --c-field-focus:var(--stk-alpha-06); --c-fg:var(--stk-white); /* tipografia principal */ --c-fg-2:var(--stk-alpha-72); /* corpo, subtítulo */ --c-fg-3:var(--stk-alpha-56); /* rótulo em caixa alta */ --c-line:var(--stk-alpha-22); /* fio visível */ --c-line-soft:var(--stk-alpha-12); /* fio de card */ --c-line-interactive:var(--stk-alpha-38); /* contorno de campo e botão fantasma — 3:1, o mínimo que a WCAG pede para delimitar um controle */ --c-dash:var(--stk-white); /* traço de alfaiataria — o gesto alto: sublinhado de capa */ --c-dash-quiet:var(--stk-alpha-22); /* traço baixo: régua, moldura, fio de lista */ --c-focus:var(--stk-white); /* anel de foco */ /* --------------------------------------------------------------------- 3. TIPOGRAFIA — Inter, travada pelo DNA. Nunca itálico, nunca serif. --------------------------------------------------------------------- */ --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-heavy:800; /* título. sempre caixa baixa. */ --text-hero:clamp(3rem,9vw,6.6rem); --text-title-m:clamp(1.6rem,3.6vw,2.6rem); --text-title-s:clamp(1.8rem,4vw,2.6rem); --text-lead:clamp(1.02rem,1.5vw,1.28rem); --text-body:.98rem; --text-sm:.9rem; --text-card:clamp(.98rem,1.15vw,1.08rem); --text-label:11px; /* rótulo em caixa alta — o único uso de caixa alta */ --text-nano:10px; --lh-hero:.82; /* linhas juntas: o título vira lockup */ --lh-tight:1.05; --lh-body:1.5; --ls-hero:-.035em; --ls-title:-.02em; --ls-label:.24em; --ls-btn:.14em; --measure-hero:32ch; --measure-title:22ch; /* --------------------------------------------------------------------- 4. ESPAÇO E GRADE --------------------------------------------------------------------- */ --space-2xs:7px; --space-xs:12px; --space-sm:16px; --space-md:22px; --space-lg:34px; --space-section:clamp(56px,9vw,104px); --pad:clamp(28px,6vw,80px); /* margem lateral */ --pad-narrow:clamp(24px,6vw,40px); --pad-card:clamp(22px,2.2vw,30px); --gap-grid:clamp(14px,1.4vw,20px); --maxw:1240px; --maxw-brands:1280px; --maxw-form:620px; --radius:0; /* TRAVADO. A marca é de canto vivo. */ /* --------------------------------------------------------------------- 5. TRAÇO DE ALFAIATARIA — o único dispositivo gráfico da marca. Vem do molde e do corte. Não é bordado, não é artesania. --------------------------------------------------------------------- */ --dash-w:2px; --dash-rule:1.5px; --dash-border:1px dashed var(--c-line-soft); --tick-size:22px; /* --------------------------------------------------------------------- 6. MOVIMENTO — um gesto por vez. Nada salta, nada pisca. --------------------------------------------------------------------- */ --ease:cubic-bezier(.16,1,.3,1); --dur-press:.16s; /* confirmação de toque — o gesto mais rápido */ --dur-fast:.18s; /* cor, borda */ --dur:.2s; /* card, superfície */ --dur-mark:.7s; /* a costura da marca — gesto de primeira vez */ --lift:-3px; /* elevação máxima de hover */ --press:.97; /* recuo ao pressionar */ --dur-kenburns:30s; /* respiração da foto do hero */ --dur-marquee-a:42s; /* fileira de cima */ --dur-marquee-b:52s; /* fileira de baixo — tempos diferentes para as duas nunca sincronizarem */ /* --------------------------------------------------------------------- 7. VÉUS — a força com que a foto cede lugar ao texto. É decisão de design, não detalhe: mora aqui para ser calibrada num lugar só, não em três gradientes espalhados. --------------------------------------------------------------------- */ --scrim-hero: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,.92) 100%), linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.22) 62%, rgba(0,0,0,.10) 100%); /* no telemóvel o texto ocupa a largura toda: o véu lateral sai de cena */ --scrim-hero-sm: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.42) 34%, rgba(0,0,0,.92) 100%); /* o marquee entra e sai por trás de um esmaecido, nunca cortado a faca */ --mask-fade:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } /* ========================================================================== CAMPO CLARO — a faixa de marcas. Não redeclara cor: troca de campo. Os componentes dentro acertam sozinhos. ========================================================================== */ [data-field="light"], .brands{ --c-bg:var(--stk-white); --c-fg:var(--stk-ink); --c-fg-2:var(--stk-gray-500); --c-fg-3:var(--stk-gray-500); --c-line:rgba(0,0,0,.22); --c-line-soft:rgba(0,0,0,.12); --c-line-interactive:rgba(0,0,0,.38); --c-dash:var(--stk-ink); --c-focus:var(--stk-ink); }