/* ========================================================================== Sofia de Castro Fernandes · novo desenho (entrega de 16 Out 2026) Os valores desta folha são os dos seis ficheiros aprovados (Update/Site_Sofia_novo_desenho/*.html), copiados tal como estão: a Sofia aprovou o desenho «tal como está», por isso nada aqui é arredondado, harmonizado ou «melhorado». Onde uma página tem valores diferentes das outras (o h1 da página inicial é 80px, o da Agenda 72px, o das legais 60px), a diferença fica, presa ao modelo da página: .pagina--inicio página inicial, arquivo e edições da newsletter, 404 .pagina--agenda Agenda do Talento (as duas são .pagina--interior) .pagina--percurso Percurso .pagina--legal as três páginas legais O que é do WordPress e não do desenho está assinalado. Duas peças repetem-se e convém conhecer antes de mexer: - `.accao` é o parágrafo que só existe para segurar um link. No desenho o é filho direto da secção (ou item de uma fila flex); no editor de blocos um link tem de viver dentro de um parágrafo. No site o parágrafo passa a `display: contents` e o link volta a ocupar o lugar que tinha no desenho, sem um píxel a mais. O prefixo `.wp-site-blocks` mantém isto fora do editor, onde um parágrafo sem caixa não se deixava editar. - Os formulários são do Fluent Forms. A marcação é dele (fieldset, grupos, etiquetas em divs); as regras da secção «Formulários» é que a levam à aparência dos campos de sublinhado do desenho. A exceção são as duas últimas secções. «Site completo» (17 Out 2026): o João pediu um site com páginas próprias em vez da página única do desenho, menu em lista no telemóvel, fotografias maiores e ao centro, datas por extenso e formulários com cor e transição no foco. «Telemóvel e tablet»: o desenho só foi testado a 1440 e a 390 px, e o que lá está trata dos ecrãs pelo meio e do toque. ========================================================================== */ :root{ --tinta:#1C1C1A; --tinta-suave:#3A3A37; --papel:#EEEAE3; --sol:#B8955A; --sol-escuro:#8A6D3B; --cinza:#6B6B66; --linha:#D8D2C8; } *{box-sizing:border-box;margin:0;padding:0} html:has(.pagina--inicio),html:has(.pagina--agenda){scroll-behavior:smooth} body{ font-family:'Jost',system-ui,sans-serif;font-weight:300; background:var(--papel);color:var(--tinta); line-height:1.6;-webkit-font-smoothing:antialiased; } a{color:inherit} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--sol);outline-offset:3px} ::selection{background:rgba(184,149,90,.3);color:var(--tinta)} /* WordPress: o que o core põe por omissão e o desenho não tem. Uma classe só em cada regra, de propósito: as regras do desenho que vêm a seguir (o `.retrato-pequeno{margin-left:11px}` do telemóvel, por exemplo) têm de lhes ganhar pela ordem. */ .wp-site-blocks .accao{display:contents} .wp-site-blocks p:empty{display:none} .wp-block-image,.wp-block-video,.wp-block-table{margin:0} .wp-block-post-template{list-style:none;margin:0;padding:0} .wp-block-post-content{display:block} /* Os grupos do editor levam a classe `is-layout-flow`, e o core escreve para eles `:root :where(.is-layout-flow) > *{margin:0}` (uma classe de peso) e `… > :last-child{margin-block-end:0}` (DUAS classes). A primeira perde para qualquer regra de classe desta folha, que vem depois; a segunda ganha a todas as que têm uma classe só, e apagava as margens de baixo com que o desenho conta no último elemento de um bloco: os 10px do último parágrafo de cada etapa do Percurso, os 14px de cada ponto das páginas legais. São repostas aqui, com força para lhe ganhar. */ .etapa > p:last-child:not(.lista){margin-bottom:10px} .pagina--legal .ponto > div > p:last-child{margin-bottom:14px} .pagina--legal .ponto > div > ul.lista:last-child{margin-bottom:16px} .pagina--legal .ponto > div > .tabela:last-child{margin-bottom:18px} .pagina--legal .ponto > div > p.destaque:last-child{margin-bottom:18px} /* -------------------------------------------------------------------------- A página -------------------------------------------------------------------------- */ .pagina{max-width:960px;margin:0 auto;padding:0 24px 120px} /* Antes, a Agenda tinha 880px e as legais 760px, e o cabeçalho mudava de sítio de página para página. Agora a página tem sempre 960px; nas legais é só o texto que fica nos 760px, encostado à esquerda como o logótipo. */ .pagina--legal main{max-width:760px} /* -------------------------------------------------------------------------- Barra superior (inicio.html) -------------------------------------------------------------------------- */ .barra{ display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 28px; padding:28px 0 0;font-size:11px;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--cinza); position:relative;z-index:30; } .barra .marca{color:var(--tinta);text-decoration:none;display:inline-block;line-height:0;padding:4px 0} .barra .logo{display:block;height:54px;width:auto} @media (max-width:640px){.barra .logo{height:44px}} /* O menu é o bloco de navegação do core: