/* ============================================================ A TELA ------------------------------------------------------------ O protótipo é uma tela de 1920px com tudo em coordenadas fixas, encolhida para caber no ecrã. Isso era feito pelo support.js, o runtime do Claude Design — o mesmo que passou a sessão a reescrever nós e a apagar classes, e que não vai para um tema de produção. Aqui é CSS, sem uma linha de JavaScript. O truque está em duas peças. A tela leva um transform que a encolhe. Mas um elemento transformado continua a OCUPAR o tamanho original no fluxo, e a página ficava com milhares de pixeis de vazio por baixo. Por isso vai dentro de um palco, cuja altura é a altura desenhada já multiplicada pela mesma escala. Cada página diz a sua altura em --altura, que vem do próprio protótipo. ============================================================ */ /* O --escala tem de ser um NUMERO puro, e o CSS nao consegue produzir um: 100vw / 1920 da um comprimento, e o scale() nao o aceita. Quem o poe e o assets/js/tela.js, em cinco linhas. Foi este o erro da primeira tentativa — a tela nao encolhia e o palco ficava com 303px. A ALTURA, essa, e mesmo CSS: o aspect-ratio da a altura certa a partir da proporcao da tela, sem calculo nenhum e sem depender de o --escala estar certo. */ .cc-palco { position: relative; width: 100%; overflow: hidden; aspect-ratio: 1920 / var(--altura, 9384); } .cc-tela { position: absolute; top: 0; /* Quando a escala esta travada, o desenho e mais estreito do que o palco e o prototipo centra-o. Enquanto nao ha travao o desvio e 0 e isto e o mesmo que left: 0. */ left: var(--desvio, 0px); width: 1920px; transform: scale(var(--escala)); transform-origin: 0 0; } /* A TIPOGRAFIA QUE SE HERDA DENTRO DA TELA No protótipo o não declara nada: é o que o browser dá — 16px, line-height normal, Times, preto. O tema declara 18px/27px, Plus Jakarta e cinzento, e isso é certo para o resto do site, mas dentro da tela é veneno: tudo o que não traz medidas próprias herda-as. Um sem estilo nenhum ficava com 24px de entrelinha em vez de 21, e o texto assentava 1,5px acima — eram os 1.778 pixeis das etiquetas da categoria e parte dos das notícias e do artigo. Aqui a tela volta ao que o protótipo tinha. Todos os elementos visíveis declaram as suas próprias medidas; isto é só a base de onde eles partem, e tem de ser a mesma. */ .cc-tela { font-family: "Times New Roman", Times, serif; font-size: 16px; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); } /* ---------- o telemóvel ---------- O desenho do telemóvel é outro, não é o desktop encolhido: é uma tela de 390px com o seu próprio conteúdo. Cada página emite as duas e o CSS mostra uma. As imagens de fundo da que está escondida não chegam a ser descarregadas pelo browser. */ .cc-tela-mobile { width: 390px; } .cc-palco-mobile { display: none; } @media (max-width: 860px) { .cc-palco-desktop { display: none; } .cc-palco-mobile { display: block; } } /* A altura do palco vem da proporcao — mas so enquanto a escala for w/390. Travada em 1,35x, a altura tambem tem de parar: sem isto o palco continuava a crescer e abria uma faixa vazia por baixo do desenho. Em CSS, para nao depender do JS ter corrido. */ .cc-palco-mobile { aspect-ratio: 390 / var(--altura, 8899); max-height: calc(var(--altura, 8899) * 1.35px); } /* Quem pediu menos movimento continua a ver tudo; a escala não é animação, é geometria. */ /* ------------------------------------------------------------ DENTRO DA TELA MANDA O PROTOTIPO ------------------------------------------------------------ O tema.css tem um box-sizing:border-box global, que e o que se faz hoje em dia. O protótipo nao o tinha: usava o content-box, que é o valor por omissão do browser. Parece detalhe e não é. Com border-box, o padding passa a comer a largura útil da caixa em vez de a somar — e o texto passa a quebrar noutro sítio. Foi o que deixou as onze páginas com umas centenas de pixeis de diferença, e a das notícias com dezenas de milhares. Dentro da tela, portanto, volta o content-box. E NÃO SÓ DENTRO DA TELA Aqui eu tinha escrito que fora dela ficava o border-box, e estava errado. A barra flutuante, o menu de telemóvel e o cabeçalho não são desenho meu: são desenhados pelo site.css, o mesmo ficheiro que veio do protótipo, onde valia o content-box. O logótipo do fundo do menu é o exemplo — height:111px mais padding-top:34px dá 145px no protótipo e 111px aqui, e o logótipo assentava 34px mais abaixo. A regra passa a ser: onde manda o site.css, manda o modelo de caixa dele. ------------------------------------------------------------ */ /* O :where() e de proposito: tem especificidade ZERO. Assim isto ganha ao reset global do tema (que e um seletor universal, tambem zero, mas vem antes) e PERDE para qualquer regra explicita do site.css. Sem isso eu pisava o proprio site.css: ele declara .cc-mf { box-sizing: border-box }, a minha regra ganhava-lhe, e a barra flutuante passou a somar o padding a largura — 1312px em vez de 1200 no computador, 426 numa janela de 390 no telemovel, a transbordar. Foi assim que a barra do telemovel apareceu partida. */ :where(.cc-tela, .cc-tela *, .cc-tela *::before, .cc-tela *::after, .cc-cab, .cc-cab *, .cc-cab *::before, .cc-cab *::after, .cc-mf, .cc-mf *, .cc-mf *::before, .cc-mf *::after, .cc-mm, .cc-mm *, .cc-mm *::before, .cc-mm *::after) { box-sizing: content-box; } /* ------------------------------------------------------------ O X QUE FECHA O MENU DE TELEMOVEL ------------------------------------------------------------ Estes numeros sao os que o menu-hamburguer.js do prototipo escrevia no elemento, medidos no browser: fixo a 32px do topo e 9px da direita, 48x32, as barras alinhadas a direita com 6.78px entre elas e um deslocamento de 9px para o X. Vao aqui e nao no site.css porque o site.css e o ficheiro do prototipo e nao se toca: la o X era posicionado por JavaScript, e aqui e markup normal. ------------------------------------------------------------ */ .cc-mm-fechar.cc-hb { /* FIXO, E NAO ABSOLUTO Absoluto, viajava com o painel e passava a maior parte do deslize fora do ecra. Fixo fica no sitio final desde o principio — mas ai o problema era outro: tracas brancas sobre o painel branco, invisiveis durante ~150ms, e o X so aparecia quando a forma laranja chegava. Resolve-se pela cor, nao pela posicao: as tracas nascem escuras, legiveis sobre o branco, e aclaram para branco enquanto o laranja entra por tras. A transicao da cor ja estava no site.css (.3s). */ position: absolute; top: 32px; right: 9px; z-index: 5; width: 48px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6.78125px; --cc-hb-d: 9px; --cc-hb-cor: #ffffff; } /* As medidas sao as do SVG da designer (36x21): a traca do meio e mais comprida que as de cima e de baixo, e as pontas sao redondas. */ .cc-mm-fechar.cc-hb { align-items: center; } .cc-mm-fechar.cc-hb > div { width: 27.734px; height: 2.226px; border-radius: 1.113px; /* escuras em repouso; o .cc-hb-x do site.css poe-nas brancas, e a transicao de background-color faz a passagem */ background: rgb(16, 16, 16); /* O ATRASO NA COR NAO E CAPRICHO Sem ele, as tracas aclaravam para branco enquanto o fundo ainda era o painel branco: por volta dos 220ms ficavam quase invisiveis, e a transformacao parecia desaparecer a meio. Os 0.2s poem a mudanca de cor a coincidir com a chegada da forma laranja, medida aos ~250ms. A rotacao mantem o tempo do site.css. */ transition: transform .42s var(--cc-suave-curva), background-color .26s ease .2s; } .cc-mm-fechar.cc-hb > div:nth-child(2) { width: 35.875px; } /* ------------------------------------------------------------ A BARRA FLUTUANTE NO TELEMOVEL ------------------------------------------------------------ No ecra pequeno os nove itens do menu nao cabem — a barra tem 342px de largura util. Fica so a logo e o hamburguer, como a Ana pediu. NOTA: o prototipo nao tem barra flutuante nenhuma no telemovel; o menu-fixo.js so a constroi em 1920. Isto e portanto comportamento novo, que existe no WordPress e nao no HTML. ------------------------------------------------------------ */ .cc-mf-hb { display: none; } @media (max-width: 860px) { .cc-mf-lado { display: none; } .cc-mf { justify-content: space-between; gap: 12px; } .cc-mf-hb { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6.78125px; width: 48px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; flex: 0 0 auto; /* a barra e branca: as tracas ficam escuras, ao contrario das do painel aberto, que sao brancas sobre a forma laranja */ --cc-hb-d: 9px; --cc-hb-cor: rgb(16, 16, 16); } .cc-mf-hb { align-items: center; } .cc-mf-hb > div { width: 27.734px; height: 2.226px; border-radius: 1.113px; background: var(--cc-hb-cor); } /* a do meio e mais comprida, como no icone da designer */ .cc-mf-hb > div:nth-child(2) { width: 35.875px; } } /* ------------------------------------------------------------ O X, COM VALORES LITERAIS ------------------------------------------------------------ O site.css escreve estas mesmas regras com translateY(var(--cc-hb-d, 9px)). Medido nos dois hamburgueres do tema — o da tela e o da barra flutuante — o transform ficava em matriz identidade e o X nunca se formava, embora o seletor alcancasse o elemento e um clone do mesmo botao recebesse a rotacao. Com o valor escrito por extenso, forma-se. Especificidade 0,3,1 contra os 0,2,1 do site.css, e carregado depois: isto ganha sem !important. ------------------------------------------------------------ */ .cc-hb.cc-hb-x > div:nth-child(1) { transform: translateY(9px) rotate(45deg); } .cc-hb.cc-hb-x > div:nth-child(2) { opacity: 0; transform: scaleX(0.15); } .cc-hb.cc-hb-x > div:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }