/** * CSS transversal do site. * * Enfileirado por inc/class-suba-site.php em TODAS as páginas. * * O âmbito deixou de vir do enfileiramento: uma regra que só deva valer numa * página tem de o dizer no seletor, com body.page-id-NNN. Enquanto isto era o * CSS de uma página só, não era preciso — e há regras aqui escritas nesse * pressuposto, por exemplo as que apontam a .grid-icons. * * Este ficheiro sai ANTES do style.css do tema-filho. Quem precisa de ganhar, * ganha por especificidade — nunca por ordem, e nunca por dependência no * enqueue: já foi tentado e encolheu os títulos de todo o site. A razão está no * cabeçalho do class-suba-site.php. */ /* ========================================================================== Header: esconde-se a descer, volta a subir ========================================================================== Isto existe no style.css, mas preso ao `.home` — a classe que o WordPress só põe na página inicial. Nesta página nunca chegou a aplicar-se, e por isso o header ficava sempre à vista. O JS já funciona nas duas páginas: o custom.js tira e põe a classe .header-scrolled no header conforme o sentido do scroll (verificado no site). O que faltava era só o CSS. `body` à frente para a especificidade chegar a 0,3,0 e passar à frente do `.mfn-header-scrolled .mfn-header-main { opacity: 1 !important }` do style.css, que é 0,2,0 e vem depois deste ficheiro. */ body.mfn-header-scrolled .mfn-header-main { opacity: 0 !important; display: block !important; transition: 0.3s ease-in-out; pointer-events: none !important; user-select: none !important; } body.mfn-header-scrolled .mfn-header-main.header-scrolled { opacity: 1 !important; pointer-events: all !important; user-select: initial !important; } /* ========================================================================== Troca de fundo com o scroll ========================================================================== Montado por assets/js/pages/site.js. As classes .v2-tema-on (no ), .suba-tema-escuro / .suba-tema-claro (no ) e .v2-sec-escura / .v2-sec-clara (nas secções) são todas postas por esse ficheiro — sem JS nada disto se aplica e a página fica exatamente como o builder a deixou. */ /* Duas camadas opacas em vez de uma com a cor animada: o crossfade passa a ser opacity, que o compositor resolve sozinho, em vez de um repinte do ecrã inteiro a cada frame. */ .v2-fundo { position: fixed; inset: 0; z-index: 0; pointer-events: none; /* quem anima a opacidade é o GSAP; uma transition aqui seria um segundo relógio no mesmo valor */ transition: none; } .v2-fundo--claro { background-color: #fff; } .v2-fundo--escuro { background-color: #000; } /* As secções sobem para o plano acima das camadas. O herói fica de fora: é fixo, tem vídeo por dentro e mantém o fundo próprio, portanto continua a tapar as camadas enquanto está à vista. */ html.v2-tema-on #Content .mcb-section:not(.suba-hero-fixed), html.v2-tema-on .mfn-footer .mcb-section, html.v2-tema-on #Footer .mcb-section { position: relative; z-index: 1; } /* O #Content e o #Wrapper deixam de pintar: o branco deles taparia as camadas, que vivem lá dentro. */ html.v2-tema-on #Content, html.v2-tema-on #Wrapper { background-color: transparent; } /* O crossfade das cores do conteúdo. Quem escreve as cores é o JS, em style inline, e só uma vez por troca de modo — esta transition é que as leva de uma à outra. Uma só escrita e uma só transition: não há dois relógios no mesmo elemento. */ html.v2-tema-on #Content :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, td, .title, .subtitle, .desc, .button) { transition: color 0.45s ease-in-out, border-color 0.45s ease-in-out; } /* SVG sobre o fundo trocado. Os 5 SVG da página estão todos em secções claras, portanto são desenhos escuros. Quando a secção fica sobre o fundo oposto, o desenho desaparecia — e um de SVG não se recolore por `color`, só por filtro. Invertido apenas no desencontro: com a secção sobre a sua própria cor o ficheiro fica intacto. */ html.v2-tema-on #Content img[src$=".svg"] { transition: filter 0.45s ease-in-out; } body.suba-tema-escuro .v2-sec-clara img[src$=".svg"], body.suba-tema-claro .v2-sec-escura img[src$=".svg"] { filter: brightness(0) invert(1); } body.suba-tema-escuro .button_theme:hover, body.suba-tema-escuro input[type="submit"]:hover { border-color: var(--mfn-button-theme-border-) !important; color: var(--mfn-button-theme-color) !important; } body.suba-tema-escuro .button_theme:hover i, body.suba-tema-escuro input[type="submit"]:hover i { color: var(--mfn-button-theme-icon-color) !important; } body.suba-tema-escuro .button.button_theme:hover i.icon-dot:before { background: var(--mfn-button-theme-icon-color); } /* Placeholder dos campos. Não se alcança por style inline — só por seletor — portanto não pode ir com as outras cores, que o JS escreve elemento a elemento. Segue a mesma regra: inverte só quando a secção está sobre o fundo contrário. */ html.v2-tema-on ::placeholder { transition: color 0.45s ease-in-out; } body.suba-tema-escuro .v2-sec-clara .form-dark .wpforms-container-full input[type=checkbox]:before, body.suba-tema-escuro .v2-sec-clara .form-dark .wpforms-container-full input[type=radio]:before { border-color: rgb(255 255 255 / 50%) !important; } body.suba-tema-escuro .v2-sec-clara .form-dark .wpforms-container-full input::placeholder, body.suba-tema-escuro .v2-sec-clara ::placeholder { color: rgba(255, 255, 255, 0.7) !important; } body.suba-tema-claro .v2-sec-escura ::placeholder { color: rgba(0, 0, 0, 0.7); } /* Campos de formulário. Tratados aqui e não pela tabela de cores do JS: o tema declara-lhes a cor com !important, e o style inline que a troca usa para tudo o resto perde para isso — medido, o input do footer ficava com color:#fff inline e continuava a computar preto. Invertem só no desencontro, como os SVG. */ html.v2-tema-on #Content input, html.v2-tema-on #Content textarea, html.v2-tema-on #Content select, html.v2-tema-on .mfn-footer input, html.v2-tema-on .mfn-footer textarea, html.v2-tema-on .mfn-footer select { transition: color 0.45s ease-in-out, border-color 0.45s ease-in-out; } body.suba-tema-escuro .v2-sec-clara :is(input, textarea, select), body.suba-tema-escuro .v2-sec-clara .form-dark .wpforms-container-full input { color: #fff !important; border-color: rgba(255, 255, 255, 0.5) !important; } body.suba-tema-claro .v2-sec-escura :is(input, textarea, select) { color: #000 !important; border-color: rgba(0, 0, 0, 0.5) !important; } /* ========================================================================== Revelação de títulos e textos ========================================================================== Montado por assets/js/modules/reveal.js, que corre em todas as secções. A máscara é por PALAVRA e o desfasamento é por linha. Uma máscara por linha obrigava a reescrever o innerHTML em elementos de linha, e isso arranca as palavras dos pais — um ou um no meio de um parágrafo desapareciam. Embrulhada palavra a palavra no sítio onde está, a estrutura do texto fica intacta; como as palavras da mesma linha partilham o atraso, o que se vê continua a ser a linha inteira a subir de uma vez. overflow:hidden e não clip-path: com clip-path o recorte teria de ser recalculado a cada quebra; com overflow o browser trata disso sozinho. */ .v2-palavra { display: inline-block; overflow: hidden; /* sem isto uma letra com descida (g, p, q) fica cortada pela máscara: a caixa acaba na linha de base, não no fundo do glifo */ padding-bottom: 0.14em; margin-bottom: -0.14em; } .v2-palavra-int { display: inline-block; will-change: transform; } /* Entrelinha dos blocos cortados. Cortar em palavras não muda a altura de linha por si — o que muda é que cada palavra passa a ser uma caixa com máscara, e a máscara leva 0.14em de folga em baixo para os glifos com descida (g, p, q) não ficarem cortados. Num texto com entrelinha larga isso não se nota; num título apertado, nota-se. Daí estes ajustes serem por tipo de bloco. */ h2.title.v2-cortado { line-height: 110% !important; } h3.title.v2-cortado { line-height: 120% !important; } h4.title.v2-cortado { line-height: 120% !important; } p.v2-cortado { line-height: 120% !important; } /* ========================================================================== grid-icons — cartões que se empilham com o scroll ========================================================================== Um cartão por linha, só com risco em baixo. Ao descer, cada um para no seu lugar e o seguinte sobe por cima; ao subir, desfaz-se pela ordem inversa. PORQUE NÃO É position: sticky Foi a primeira tentativa e chegou a funcionar em parte — os três primeiros cartões colavam nos 138/156/174 — mas largavam todos ao mesmo tempo a meio do percurso, muito antes de o contentor acabar (medido: fundo do contentor em 739px e mesmo assim já tinham desistido). Com float, sem float, com overflow hidden, clip ou visible no #Content, o resultado era o mesmo. Não vale a pena continuar a adivinhar qual das regras do tema é que estreita o retângulo de restrição do sticky: a posição passa a ser calculada aqui, a partir do scroll, e deixa de depender da caixa que o builder montou. Segunda tentativa, mais tarde, a propósito da suavidade em touch — mesmo resultado, e agora com a causa medida. A caixa que limita o sticky é a CONTENT box do contentor, e nada do que a devia estender a estende: testado `padding-bottom` a 20vh e a 120vh (altura do contentor de 1525 para 2369) e `margin-bottom` de 60vh no último cartão. Comportamento idêntico nos três: o último cartão nunca entra na pilha e os presos colapsam todos para a mesma posição. Numa grelha de 10 cartões não se forma pilha nenhuma. Fica escrito para não haver terceira tentativa. O QUE ISTO CUSTA EM TOUCH Em touch não há Lenis — a CAN_SMOOTH exige pointer: fine —, portanto o scroll é o nativo e o ticker não anda no mesmo passo que ele: cada frame desenha a posição que o scroll já deixou atrás, e isso lê-se como tremido. No desktop não acontece porque o Lenis avança dentro do próprio ticker, antes do render (ver o prioritize no animations.js). A única saída conhecida é pôr o Lenis a correr também em touch (syncTouch), o que muda o scroll do site inteiro em telemóvel. Não é decisão para tomar de passagem, e por isso está por decidir e não feita. O JS escreve só um translateY por cartão, a cada frame, a partir da posição natural que mediu uma vez. Não há estado a repor: o valor é função do scroll, portanto subir desfaz exatamente o que descer fez. ...EXCETO ONDE NÃO HÁ LENIS, E AÍ QUEM CONDUZ É O COMPOSITOR O ticker só é suave enquanto o Lenis o conduz, porque o Lenis avança dentro do próprio ticker e antes do render (ver o prioritize no animations.js). Em touch não há Lenis — a CAN_SMOOTH exige pointer: fine — e o scroll nativo não anda no mesmo passo que o rAF: cada frame desenha a posição que o scroll já deixou atrás, e lê-se como tremido. A saída não é mudar a geometria, é mudar quem a executa. Estes keyframes, ligados a uma animation-timeline de scroll, são a MESMA função que o ticker calcula — translateY linear entre dois pontos de scroll, preso nas pontas pelo fill — só que resolvida pelo compositor, sem passar por JavaScript nenhum. Confirmado no browser: com alcance de 0 a 1000px e teto de 200px, a scrollY 500 o transform é exatamente translateY(100px). O teto e o alcance de cada cartão são escritos pelo JS, porque dependem das posições naturais e do número de cartões. É uma escrita por refresh, não por frame — e é justamente por não haver escrita por frame que fica suave. */ @keyframes suba-pilha { to { transform: translateY(var(--suba-pilha, 0px)); } } /* O contentor dos cartões: um por linha. O padding em baixo é o tempo em que a pilha fica montada antes de a secção seguir — sem ele, o último cartão chegava ao lugar e logo a seguir tudo arrancava. */ #Content .grid-icons > .mcb-wrap-inner { display: block; padding-bottom: 20vh; } /* O #Content à frente e o !important não são exagero: o style.css tem `.grid-icons .wrap.one-fourth { width: calc(25% - ...) !important }`, com a MESMA especificidade que este seletor (0,3,0). Em empate ganha quem vier depois, e este ficheiro sai antes do style.css. Sem o id, os cartões ficavam nos 280px de sempre — medido. */ #Content .grid-icons > .mcb-wrap-inner > .mcb-wrap { width: 100% !important; max-width: none !important; flex: none; /* A mesma regra do style.css que fixa a largura também dá `height: 100%`. Com ela o cartão media 1269px em vez dos ~170px do conteúdo. */ height: auto !important; position: relative; will-change: transform; /* distância de scroll entre a chegada de um cartão e a do seguinte */ margin-bottom: 9vh; border-bottom: 1px solid; padding-bottom: var(--space-m, 28px); } /* O plano de cada cartão é escrito pelo JS, em site.js. Estava aqui, enumerado de nth-child(2) a nth-child(7) — seis cartões. A segunda grelha da sobre-nos tem dez, e do sétimo em diante ficavam sem plano nenhum: passavam por baixo dos que o tinham. Uma lista escrita à mão não sabe quantos cartões a página vai ter; o JS sabe. */ /* O último não precisa de margem: não há nada para lhe passar por cima. */ #Content .grid-icons > .mcb-wrap-inner > .mcb-wrap:last-child { margin-bottom: 0; } /* Fundo opaco, da cor da página. É o que faz o empilhamento ler-se: sem ele via-se o cartão de baixo através do de cima. Como é a mesma cor do fundo, continua a parecer que só existe o risco — que era o pedido. A cor segue o modo que a página já mantém no . */ /* O risco nasce invisível e acende com o cartão. A caixa chega ao ecrã muito antes de o texto se escrever, e um cartão sem fundo próprio é só um risco: via-se uma linha sozinha a atravessar o ecrã durante bastante scroll. A classe é posta pelo site.js no mesmo ponto em que o texto arranca. */ #Content .grid-icons > .mcb-wrap-inner > .mcb-wrap { border-bottom-color: transparent; } /* O fundo do cartão acompanha a troca de tema com o MESMO tempo do crossfade da camada de fundo (0.45s, no site.js). Sem isto o cartão saltava de branco para preto num frame enquanto o resto da página ia mudando devagar, e o que se via era o cartão a piscar contra o fundo. */ #Content .grid-icons > .mcb-wrap-inner > .mcb-wrap { transition: border-bottom-color 0.5s ease, background-color 0.45s ease-in-out; } body.suba-tema-claro #Content .grid-icons > .mcb-wrap-inner > .mcb-wrap { background-color: #fff; } body.suba-tema-escuro #Content .grid-icons > .mcb-wrap-inner > .mcb-wrap { background-color: #000; } body.suba-tema-claro #Content .grid-icons > .mcb-wrap-inner > .mcb-wrap.v2-cartao-on { border-bottom-color: rgba(0, 0, 0, 0.16); } body.suba-tema-escuro #Content .grid-icons > .mcb-wrap-inner > .mcb-wrap.v2-cartao-on { border-bottom-color: rgba(255, 255, 255, 0.18); } /* O conteúdo de cada cartão, agora que a linha é larga. A ordem no documento é número, ícone, título, texto; em grelha cada um vai para a sua coluna sem se mexer no markup. */ #Content .grid-icons > .mcb-wrap-inner > .mcb-wrap > .mcb-wrap-inner { /* quem pinta e quem risca é o cartão; o interior não acrescenta nada */ background: transparent; border: 0; display: grid; grid-template-columns: 90px minmax(200px, 1fr) minmax(0, 1.5fr) 72px; /* Baseline, e não center: com center o número e o ícone assentavam pelo meio da caixa deles e o título e o texto pelo meio das suas, que são bem mais altas — o resultado era o número e o ícone no topo e o resto uns pixéis abaixo, sem nada a alinhar. Pela linha de base, as primeiras linhas dos três blocos de texto assentam na mesma horizontal. */ align-items: baseline; column-gap: var(--space-l, 40px); } .grid-icons .mcb-wrap-background-overlay { /* decorativo e vazio: fora da grelha, senão ocupava uma coluna */ position: absolute; } .grid-icons .column_column.icon-number { grid-column: 1; grid-row: 1; top: 4px !important; } .grid-icons .column_heading { grid-column: 2; grid-row: 1; top: 14px !important; } .grid-icons .column_column:not(.icon-number) { grid-column: 3; grid-row: 1; } .grid-icons .column_image { grid-column: 4; grid-row: 1; /* o ícone não tem linha de texto; assenta pelo meio em vez de fingir uma base que não tem */ align-self: center; top: 6px !important; } .grid-icons h3 { font-size: calc(var(--font-size-s3) * 1.3); } /* Os SVG destes ícones não trazem tamanho intrínseco — medido, naturalWidth e naturalHeight a 0. Com height:auto o browser resolve isso para 0px, e o ícone renderizava a 32x0: estava lá e não se via. Daí a altura explícita. */ #Content .grid-icons .column_image img { width: 32px; height: 32px; object-fit: contain; display: block; /* o traço do desenho pode passar meio pixel para fora do viewBox */ overflow: visible; } /* A coluna do número vem do tema com display:flex, e a linha de base de um contentor flex é a do primeiro item dele, não a da linha de texto — era por isso que o número assentava 36px acima do título e do texto (58 contra 94). */ #Content .grid-icons .column_column.icon-number, #Content .grid-icons .column_column.icon-number .mcb-column-inner, #Content .grid-icons .column_column.icon-number .column_attr { display: block; } /* As colunas trazem larguras e margens do builder pensadas para o cartão estreito; em grelha quem manda são as colunas. */ #Content .grid-icons > .mcb-wrap-inner > .mcb-wrap .mcb-column { width: auto !important; max-width: none !important; margin: 0; padding-top: 0; padding-bottom: 0; } /* Tablet e mobile: quatro colunas não cabem. ----------------------------------------------------------------------------- Havia aqui uma query só para os 767px que mudava as COLUNAS e se esquecia das LINHAS. As regras de cima põem grid-row: 1 nos quatro blocos; mandando três deles para a coluna 2 sem lhes dar linha própria, os três ficavam na mesma célula, uns por cima dos outros. Medido em 390px: título, texto e ícone todos em grid-column 2 / grid-row 1, com os topos a 38, 44 e 71. E entre os 768 e os 1024 não havia query nenhuma, portanto o tablet ficava com as quatro colunas do desktop: 90 + 200 + 186 + 72 em 708px de cartão, com o texto esmagado a 186px e o ícone a assentar 40px abaixo do resto. O desenho aqui: duas colunas apenas. Em cima, o número à esquerda e o ícone encostado à direita; por baixo, o título e o texto a ocupar a linha inteira, ambos encostados à esquerda — não indentados para além do número, que era o que a primeira versão desta query fazia e não é o que se quer. */ @media only screen and (max-width: 1024px) { #Content .grid-icons > .mcb-wrap-inner > .mcb-wrap > .mcb-wrap-inner { grid-template-columns: 1fr auto; /* baseline só faz sentido entre blocos na MESMA linha; em linhas separadas alinha-se pelo topo de cada uma */ align-items: start; row-gap: var(--space-s, 22px); } /* Os empurrões do desktop (top: 4px/14px/6px) existem para acertar linhas de base entre caixas de alturas diferentes. Em linhas separadas não há base comum nenhuma para acertar, e o que faziam era desalinhar. */ #Content .grid-icons .column_column.icon-number, #Content .grid-icons .column_heading, #Content .grid-icons .column_column:not(.icon-number), #Content .grid-icons .column_image { top: 0 !important; } .grid-icons .column_column.icon-number { grid-column: 1; grid-row: 1; } .grid-icons .column_image { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; } /* 1 / -1: da primeira à última coluna. É isto que os põe à esquerda, a começar na mesma vertical do número e não depois dele. */ .grid-icons .column_heading { grid-column: 1 / -1; grid-row: 2; } .grid-icons .column_column:not(.icon-number) { grid-column: 1 / -1; grid-row: 3; } } @media only screen and (max-width: 767px) { .grid-icons > .mcb-wrap-inner > .mcb-wrap { margin-bottom: 12vh; } } /* ========================================================================== Etiqueta do cursor ========================================================================== Montada por assets/js/modules/cursor.js. Vive DENTRO do anel, portanto não tem posição própria a manter em dia: herda a do anel. */ .v2-cursor-etiqueta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; opacity: 0; /* só a opacidade transiciona: a dimensão do anel é escrita pelo GSAP e uma transition aqui seria um segundo relógio no mesmo elemento */ transition: opacity 0.2s ease; pointer-events: none; } html.v2-cursor-etiqueta-on .v2-cursor-etiqueta { opacity: 1; transition-delay: 0.08s; } /* Com a etiqueta aberta o anel passa a pastilha cheia. Sai do mix-blend-mode: difference de propósito — o difference garante contraste sobre qualquer fundo, mas aplicado a texto dentro de uma pastilha cheia dava cores imprevisíveis. Em vez disso lê a classe de tema que a página já mantém no . */ /* O `body` no meio não é enfeite: sobe a especificidade para 0,3,1 e põe esta regra acima de `html.suba-cursor-hover .suba-cursor-ring` (0,2,1), que o style.css usa para esbater o anel em hover. A etiqueta é um estado de hover como outro qualquer, portanto a pastilha herdava esses 60% e via-se o conteúdo através do texto. Uma primeira tentativa confiou na ordem dos ficheiros — mesma especificidade, a ganhar por vir depois. Estava errado: medido no servidor, este ficheiro sai ANTES do style.css. A correção seguinte, pior, foi forçar a ordem com uma dependência no enqueue. Isso reordenou a cadeia inteira e pôs o style.css à frente do CSS dinâmico do Betheme, que declara h1..h6 a 6px — os títulos da página encolheram. A dependência foi retirada. A lição fica: nesta instalação a ordem das folhas não é um detalhe que se possa ajustar de fora, porque o style.css só corrige os 6px do Betheme por sair depois dele. O que este ficheiro precisa de ganhar, ganha por especificidade. */ html.v2-cursor-etiqueta-on body .suba-cursor-ring { mix-blend-mode: normal; border-color: transparent; opacity: 1; } /* A classe da etiqueta está no e a do tema no , por essa ordem — é a única ordem que um seletor pode ter. */ html.v2-cursor-etiqueta-on body.suba-tema-escuro .suba-cursor-ring { background-color: #fff; color: #000; } html.v2-cursor-etiqueta-on body.suba-tema-claro .suba-cursor-ring { background-color: #000; color: #fff; } /* O ponto sai da frente quando a etiqueta está aberta: sobre a pastilha cheia era só um buraco no meio do texto. */ html.v2-cursor-etiqueta-on .suba-cursor-dot { opacity: 0; } /* ========================================================================== Barra de progresso do slider de projetos ========================================================================== Montada por assets/js/pages/site.js, que lê o deslocamento real do carrossel. O elemento é escalado em X pelo GSAP — escalar é trabalho do compositor, enquanto animar `width` obrigaria a um layout por frame. */ /* Fixa e colocada pelo JS a partir do retângulo do slider. O carrossel está fora do fluxo — o contentor dele colapsa — portanto pôr a barra no fluxo ao lado punha-a no topo do slider em vez de por baixo. O left/top/width vêm do JS; o espaçamento continua a ser este margin-top. */ .v2-barra { position: fixed; display: block; height: 2px; margin-top: var(--space-m, 24px); overflow: hidden; pointer-events: none; z-index: 2; } /* O esbatido do carril é na COR e não em `opacity`. Com opacity: 0.18 no contentor, a parte cheia herdava os mesmos 18% — a barra enchia e o cheio era indistinguível do vazio. A opacidade de um pai aplica-se a tudo o que está lá dentro; para dois níveis diferentes de translucidez a diferença tem de estar na cor de cada um. */ body.suba-tema-escuro .v2-barra { color: #fff; background-color: rgba(255, 255, 255, 0.18); } body.suba-tema-claro .v2-barra { color: #000; background-color: rgba(0, 0, 0, 0.18); } .v2-barra-int { position: absolute; inset: 0; background-color: currentColor; transform: scaleX(0); transform-origin: left center; will-change: transform; } /* ========================================================================== Footer ========================================================================== */ footer .menu-item a { font-size: calc(var(--font-size-s5) * 1.2); } /* ========================================================================== anim-video-full — o vídeo tem de encher a moldura -------------------------------------------------------------------------- O módulo faz crescer a MOLDURA até ao ecrã inteiro; o vídeo lá dentro ficava com o tamanho que o tema lhe dava e não acompanhava. Medido no fim do pin: tablet moldura 820x1180 (0.69:1) vídeo 820x461 (1.78:1) mobile moldura 390x844 (0.46:1) vídeo 390x219 (1.78:1) Ou seja: a moldura cobria o ecrã e o vídeo era uma faixa 16:9 no meio dela, com vazio em cima e em baixo. Em desktop a moldura acaba em 1.6:1, quase 16:9, e por isso a falha não se via — era só em tablet e mobile. No arranque a moldura já é 16:9, portanto isto não muda nada ao princípio da animação em nenhum ecrã: só passa a valer à medida que ela cresce. object-fit: cover, e não contain: encher é o objetivo do módulo, e contain devolvia as bandas vazias por outro caminho. Num ecrã de telefone isto corta bastante dos lados do vídeo — é o preço de o querer a ocupar tudo. O .section_video tem de vir na regra, e não só o vídeo. ----------------------------------------------------------------------------- Entre a moldura e o vídeo há um invólucro do tema, o .section_video, e é dele que o vídeo é 100% — não da moldura. Pôr só o vídeo a 100% não mudava nada: ele já estava a 100% de uma caixa de 201px que não crescia. Medida a cadeia: .content_video 358x201 <- é esta que o módulo faz crescer .section_video 358x201.375 <- ficava aqui, parada video 358x201.375 Quem quiser confirmar: o módulo escreve width/height inline na .content_video, e a percentagem só resolve contra um pai com altura declarada — que é o caso ao longo de toda a cadeia depois disto. ========================================================================== */ /* Só onde há crescimento. Em responsive o módulo não corre (ver video-full.js), a moldura não leva altura explícita nenhuma, e uma altura em percentagem contra um pai de altura automática não tem contra o que resolver. */ @media only screen and (min-width: 1025px) { .anim-video-full .content_video .section_video, .anim-video-full .content_video video, .anim-video-full .content_video iframe { display: block; width: 100%; height: 100%; object-fit: cover; } } /* ========================================================================== Responsive — entrelinha dos blocos cortados -------------------------------------------------------------------------- Pedido em ecrã pequeno, onde os títulos partem em mais linhas e a entrelinha do desktop abre demasiado. !important porque estes elementos levam entrelinha do mfn-dynamic-inline-css, que é impresso por página e depois desta folha. ========================================================================== */ @media only screen and (max-width: 1024px) { h1.title.v2-cortado { line-height: 100% !important; } h2.title.v2-cortado { line-height: 100% !important; } h3.title.v2-cortado, h3.toggle-heading { line-height: 110% !important; } h4.title.v2-cortado { line-height: 110% !important; } .s4 p.v2-cortado { line-height: 100% !important; } p.v2-cortado { line-height: 120% !important; } } /* ========================================================================== Lista da .suba-galeria-text -------------------------------------------------------------------------- ALINHAMENTO Uma caixa inline-block com overflow:hidden perde a linha de base do texto e passa a tê-la na aresta de baixo — é regra de especificação, não defeito do browser. O resultado é a linha inchar pela altura da descida dos glifos. Medido nesta lista: 33.2px por item, contra os 25.6px de um
igual sem máscara. Sobre uma lista com marcadores isso lê-se logo, porque o ponto fica longe do texto e o espaçamento entre itens sai maior do que o dos parágrafos ao lado. O clip-path recorta o mesmo e NÃO mexe na linha de base, porque essa regra é do overflow. Medido depois: 25.6px, exatamente como sem máscara. Está restrito a esta lista de propósito. A mesma inflação existe em todos os blocos cortados do site — medido, um título passa de 69.2 para 57.6 e um parágrafo de 70.2 para 57.6 — mas as entrelinhas do v2-cortado foram afinadas à mão já com ela, e trocar isto globalmente mudava o ritmo do site inteiro. Fica aqui registado para quando se quiser tomar essa decisão de propósito. COR O
vinha em rgb(166,166,166) e o
ao lado em branco: a troca de tema dá-lhes pares diferentes, porque foi essa a cor de origem de cada um. Aqui igualam-se ao parágrafo. !important porque a troca escreve a cor em estilo inline; a transição do tema continua a aplicar-se, portanto isto não perde o crossfade. ========================================================================== */ .suba-galeria-text ul .v2-palavra { overflow: visible; clip-path: inset(0 0 0 0); } body.suba-tema-escuro .suba-galeria-text ul, body.suba-tema-escuro .suba-galeria-text ul li { color: var(--cores-base-branco, #FFF) !important; } body.suba-tema-claro .suba-galeria-text ul, body.suba-tema-claro .suba-galeria-text ul li { color: var(--cores-base-preto, #000) !important; }