/* ========================================================================== STHEFANY PRODUÇÕES ARTÍSTICAS — tokens tokens.css · v0.10.1 -------------------------------------------------------------------------- Fonte da verdade do design system. No plugin isto vira assets/ds/tokens.css com versão própria, separada da versão do plugin. Cor: o vinho veio da fotografia da marca nova (#8E231C, matiz 4°). Ele é atmosfera — luz de palco, sobreposição, faixa. Não é cor de ação: contra o fundo dá 2,32 de contraste e reprova. Quem carrega ação é o --acento, que dá 4,18 contra o fundo e 4,84 com branco por cima. ========================================================================== */ :root { /* --- cor: base ------------------------------------------------------- A página é branca. O escuro não é o fundo do site: é o material dos blocos que flutuam sobre ela — hero, faixas de destaque, rodapé. */ --sp-papel: #FFFFFF; /* fundo da página */ --sp-fundo: #0B0505; /* material dos blocos escuros */ --sp-fundo-alto: #150A09; /* elevação dentro de bloco escuro */ --sp-claro: #FFFFFF; /* --- cor: marca ------------------------------------------------------ */ --sp-vinho: #8E231C; --sp-vinho-fundo: #3A0E0B; /* vinho rebaixado, para véu sobre foto */ --sp-acento: #E01B17; --sp-acento-esc: #A81411; /* O acento sobre bloco escuro é outro: #E01B17 contra #0B0505 dá 4,18 e reprova. Clareado até #F0413C, sobe para 5,32 e mantém a matiz. Não é usado sobre papel branco, onde daria 3,80 — quem serve ali é o acento normal, com 4,84. `.sp-escuro` faz essa troca sozinho, no escopo. */ --sp-acento-claro: #F0413C; /* Acento quando ele é TEXTO ou ícone. Sobre papel é o próprio acento; dentro de `.sp-escuro` a classe o troca pelo claro, no escopo. Fundo de botão e borda continuam usando `--sp-acento` direto. */ --sp-acento-texto: var(--sp-acento); /* --- cor: texto sobre papel ------------------------------------------- */ --sp-tinta: #16090A; /* preto quente, par do fundo */ --sp-tinta-2: rgba(22, 9, 10, .70); --sp-tinta-3: rgba(22, 9, 10, .58); /* 4,82 sobre papel */ --sp-linha-clara: rgba(22, 9, 10, .12); /* --- cor: texto sobre bloco escuro ------------------------------------ */ --sp-texto: #FFFFFF; --sp-texto-2: rgba(255, 255, 255, .72); --sp-texto-3: rgba(255, 255, 255, .48); /* 4,96 sobre bloco escuro */ --sp-linha: rgba(255, 255, 255, .14); /* --- tipografia ------------------------------------------------------ */ --sp-fonte-titulo: "degular-display", "Sthefany Fallback", system-ui, sans-serif; --sp-fonte-texto: "degular-text", "Sthefany Fallback", system-ui, sans-serif; --sp-t-hero: clamp(3.25rem, 8.4vw, 7.5rem); --sp-t-h2: clamp(2rem, 4.2vw, 3.5rem); --sp-t-h3: clamp(1.375rem, 2vw, 1.75rem); --sp-t-corpo: 1.125rem; --sp-t-peq: 0.9375rem; --sp-t-mini: 0.8125rem; --sp-lh-titulo: 0.98; --sp-lh-corpo: 1.65; /* --- espaço ---------------------------------------------------------- A escala miúda é fixa: espaçamento pequeno fluido faz o mesmo componente ter respiro diferente em cada largura, e isso vira inconsistência. A escala grande é fluida. É ela que separa bloco de bloco e afasta o conteúdo da borda do quadro — e é aí que a página respira. Fluida, o layout acompanha a janela em vez de saltar entre pontos de quebra. */ --sp-e-1: 0.25rem; --sp-e-2: 0.5rem; --sp-e-3: 0.75rem; --sp-e-4: 1rem; --sp-e-5: 1.5rem; --sp-e-6: clamp(1.75rem, 2.4vw, 2.25rem); --sp-e-7: clamp(2.25rem, 3.6vw, 3.25rem); --sp-e-8: clamp(3rem, 5.2vw, 4.5rem); --sp-e-9: clamp(4rem, 7.4vw, 6.5rem); /* Cada seção contribui com METADE do respiro. Duas vizinhas somam --sp-secao; antes cada uma aplicava o valor cheio e o encontro delas virava o dobro do previsto. */ --sp-secao: clamp(4.5rem, 10vw, 9rem); --sp-secao-meia: calc(var(--sp-secao) / 2); --sp-margem: clamp(1.5rem, 5.4vw, 5rem); --sp-largura: 84rem; /* --- forma ----------------------------------------------------------- */ --sp-raio: 10px; /* imagem e painel, como no registro de referência */ --sp-raio-peq: 6px; --sp-raio-botao: 999px; --sp-raio-bloco: clamp(20px, 2.2vw, 32px); /* bloco escuro sobre o papel */ /* Entre o raio de item e o de bloco escuro. O raio de bloco é calibrado para uma faixa que atravessa a tela: aplicado a um cartão de painel de 20 rem, a mesma curva come o canto e o cartão lê como botão gigante. */ --sp-raio-cartao: 16px; --sp-recuo-bloco: clamp(0.625rem, 1vw, 1rem); /* recuo do bloco até a janela */ --sp-abas: 3.75rem; /* altura da barra de abas do celular */ /* Espaço que o topo fixo tira da primeira dobra. É o que cada seção de topo soma ao próprio padding para não nascer por baixo do cabeçalho. Os dois valores abaixo são do cabeçalho transparente, que é alto porque não tem corpo. A variante em barra é bem mais baixa e redefine estes mesmos tokens no escopo dela — ver cabecalho.css. Redefinir o token em vez de listar as classes que precisam de ajuste é o que faz página nova nascer compensada sem ninguém lembrar de incluí-la numa lista. */ --sp-cabecalho: 8rem; --sp-cabecalho-min: 4rem; --sp-cabecalho-barra: 4.5rem; /* altura do topo em barra, sem os recuos */ /* A área do contratante não usa o cabeçalho do site: tem topo próprio, estreito e não fixo. Vive aqui, e não em contratante.css, porque é medida de layout — a mesma família dos outros dois acima. */ --sp-area-topo: 4.5rem; /* --- movimento ------------------------------------------------------- */ --sp-transicao: 240ms cubic-bezier(.2, .7, .3, 1); --sp-transicao-foto: 520ms cubic-bezier(.2, .7, .3, 1); } @media (prefers-reduced-motion: reduce) { :root { --sp-transicao: 1ms; --sp-transicao-foto: 1ms; } } /* Fallback métrico: aproxima a caixa da Degular Text enquanto ela não chega, para o texto não pular quando o Typekit responde. Ajustar quando o kit estiver com font-display: swap. */ @font-face { font-family: "Sthefany Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }