/* =============================================================
A MARCA DEBORAH ALMEIDA, o manual de marca, em CSS
"vamos adicionar mais essas cores, mudar a logo, e tirar o ícone,
muda a animação da logo dela agora, a font também, tudo."
Do manual (Design de Marca · Identidade Visual):
- LOGOTIPO: só o nome, em caixa-alta, Jost Bold, espaçamento entre
letras de 20%. DEBORAH e ALMEIDA com a mesma fonte, o mesmo peso,
o mesmo tamanho e a mesma cor. Horizontal é a principal; vertical
(ALMEIDA embaixo de DEBORAH) onde não há espaço na horizontal.
Sem ícone: a flor saiu.
- CORES: Bordô #82032E · Laranja avermelhado #FF5B3B · Laranja
#FB8A24 · Off-white #F5F4EF · Creme #F0E5CD.
- FONTES: Jost (logotipo, títulos, chamadas), Instrument Serif
(frases de destaque, citações e números), Inter (texto corrido,
legendas e contatos).
As fontes moram aqui no servidor (licença SIL Open Font License,
livres para usar em site): não dependem do Google carregar, e quem
abre o sistema não é contado por ninguém de fora.
============================================================= */
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url(jost-300.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(jost-400.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(jost-500.woff2) format("woff2")}
/* nos títulos o manual vai até o SemiBold (600): o que as telas pedem
em negrito (700-900) sai em SemiBold. O Bold (700) é só do logotipo,
que tem a família dele ("Jost Logo"). */
@font-face{font-family:"Jost";font-style:normal;font-weight:600 900;font-display:swap;src:url(jost-600.woff2) format("woff2")}
@font-face{font-family:"Jost Logo";font-style:normal;font-weight:100 900;font-display:swap;src:url(jost-700.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 400;font-display:swap;src:url(inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700 900;font-display:swap;src:url(inter-700.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(instrument-serif.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(instrument-serif-italico.woff2) format("woff2")}
:root{
/* as cinco cores do manual, com o nome delas */
--bordo:#82032E;
--laranja-verm:#FF5B3B;
--laranja:#FB8A24;
--off-white:#F5F4EF;
--creme:#F0E5CD;
--creme-borda:#D9CDB0;
/* as três fontes */
--f-logo:"Jost Logo","Jost","Helvetica Neue",Arial,sans-serif;
--f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
}
/* ---------------------------------------------------------------
O LOGOTIPO, texto de verdade, não imagem: fica nítido em qualquer
tamanho e pega a cor de onde está (currentColor).
… DEBORAH ALMEIDA
… DEBORAH / ALMEIDA
--------------------------------------------------------------- */
.marca-da{font-family:var(--f-logo); font-weight:700; font-style:normal; text-transform:uppercase;
letter-spacing:.2em; line-height:1.04; white-space:nowrap; color:inherit;
display:inline-flex; font-synthesis:none; -webkit-font-smoothing:antialiased}
.marca-da>span{display:block}
.marca-da i{font-style:normal; display:inline-block}
/* o espaço de 20% depois da última letra não conta: senão a marca
fica fora do centro */
.marca-da.horizontal{flex-direction:row; align-items:baseline; margin-right:-.2em}
.marca-da.horizontal>span+span{margin-left:.28em}
.marca-da.vertical{flex-direction:column; align-items:center}
.marca-da.vertical>span{padding-left:.2em}
/* ---------------------------------------------------------------
A ANIMAÇÃO DA MARCA
Nada gira mais (a flor saiu). O nome chega letra por letra, subindo
e ganhando foco, com o espaçamento entre as letras se acomodando até
os 20% do manual, firme e sem enfeite, como a marca. ALMEIDA vem logo
atrás de DEBORAH. Um traço laranja passa por baixo e vai embora: ele
não é parte do logotipo, é só o movimento.
--------------------------------------------------------------- */
@keyframes daLetra{
from{opacity:0; transform:translateY(.62em); filter:blur(7px)}
60%{filter:blur(0)}
to{opacity:1; transform:none; filter:none}
}
@keyframes daAcomoda{from{letter-spacing:.52em} to{letter-spacing:.2em}}
@keyframes daTraco{
0%{clip-path:inset(0 100% 0 0)}
45%{clip-path:inset(0 0 0 0)}
100%{clip-path:inset(0 0 0 100%)}
}
.marca-da.anima{animation:daAcomoda 1.5s cubic-bezier(.16,.84,.3,1) .05s both}
.marca-da.anima i{animation:daLetra .9s cubic-bezier(.2,.8,.25,1) both;
animation-delay:calc(.12s + var(--i, 0) * 55ms)}
.marca-traco{display:block; height:3px; border-radius:3px; width:100%;
background:linear-gradient(90deg, var(--laranja-verm), var(--laranja));
clip-path:inset(0 100% 0 0)}
.marca-traco.anima{animation:daTraco 1.35s cubic-bezier(.6,.05,.3,1) 1.05s both}
@media (prefers-reduced-motion:reduce){
.marca-da.anima,.marca-da.anima i,.marca-traco.anima{animation:none}
.marca-traco{display:none}
}
/* ---------------------------------------------------------------
O "ESTOU CARREGANDO", SEM ÍCONE: a faixa das cores da marca,
passando da esquerda para a direita.
--------------------------------------------------------------- */
@keyframes daCarrega{
0%{clip-path:inset(0 100% 0 0)}
50%{clip-path:inset(0 0 0 0)}
100%{clip-path:inset(0 0 0 100%)}
}
.faixa-marca{display:block; width:72px; height:6px; border-radius:6px;
background:linear-gradient(90deg, var(--bordo) 0 33.4%, var(--laranja-verm) 33.4% 66.7%, var(--laranja) 66.7%);
animation:daCarrega 1.5s cubic-bezier(.65,.05,.35,1) infinite}
@media (prefers-reduced-motion:reduce){ .faixa-marca{animation:none} }
/* frases de destaque e citações: a serifada da marca */
.destaque-serif{font-family:var(--f-serif); font-weight:400; letter-spacing:0}