/* =========================================================== MARCA QUE SE DESENHA NA SEÇÃO DA FRASE Ana Paula Lellis Werneck O rabisco emaranhado sendo desenhado embaixo de "O caminho não é rotular, mas compreender e cuidar" é a ideia da seção virando imagem. Por isso ele fica aqui, e não numa tela de abertura. O traço já nasce visível. Quem o esconde é o JavaScript, e só depois de medir cada caminho. Se algo falhar, a marca aparece inteira em vez de sumir. COMO VOLTAR AO PNG ESTÁTICO: ver as instruções no bloco MARCA, no do index.html. =========================================================== */ .frase-marca { position: relative; display: block; /* maior que o PNG antigo: em 96px o rabisco não se lê enquanto desenha */ width: clamp(96px, 11vw, 168px); color: var(--turquesa-claro); } .frase-marca svg { display: block; width: 100%; height: auto; } .marca-fiel { position: absolute; inset: 0; opacity: 0; } .marca-traco path { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; } .marca-fiel path { fill: currentColor; } /* Sem o desenho medido, mostra a marca inteira e pronto. */ html:not(.js-marca) .marca-traco { opacity: 0; } html:not(.js-marca) .marca-fiel { opacity: 1; } @media (prefers-reduced-motion: reduce) { .marca-traco { display: none; } .marca-fiel { opacity: 1; } } /* Nada de mexer no espaçamento durante o pin: medi e a seção tem 328px numa tela de 760px, então centralizada sobram 216px acima, contra 84px de cabeçalho. Não encosta. Mudar padding com a seção presa causaria salto de layout à toa. */ @media (max-width: 1000px) { .frase-marca { width: clamp(84px, 16vw, 132px); } }