/* ============================================================= AfroChip — PÁGINA INICIAL ============================================================= Folha própria enquanto esta peça se refaz em paralelo com as outras. Funde-se na `estilo.css` quando assentar; até lá é carregada DEPOIS dela no molde, mesma especificidade, e por isso ganha sem precisar de `!important` em lado nenhum. Carrega em todas as páginas do site. Por isso TUDO aqui está encostado a uma classe que só existe na inicial — `.heroi`, `.explica`, `.confianca`. Nenhuma regra deste ficheiro pode tocar numa página que não seja a inicial. ------------------------------------------------------------- O PROBLEMA QUE ESTA FOLHA RESOLVE, EM NÚMEROS ------------------------------------------------------------- Medido no HTML servido, com o browser, ANTES: 1366 x 680 ... "Ver pacotes" acabava aos 825 px → 145 px abaixo da dobra. 390 x 664 ... "Ver pacotes" acabava aos 800 px → 136 px abaixo da dobra. Não se via nada dele. O selector é um partial partilhado com a página de destinos e ganhou entretanto uma terceira pergunta. Não se lhe toca. O que se corta é tudo o que está POR CIMA dele, e no ecrã grande dá-se -lhe a coluna da direita, que era da arte. Quem mexer num dos valores marcados DOBRA está a mexer na dobra. Meça antes e depois, no browser, com o site a correr. ============================================================= */ /* ------------------------------------------------------------- 1. A REVELAÇÃO AO ROLAR NÃO ENTRA NO PRIMEIRO ECRÃ `.revelar` serve `opacity: 0` e espera pelo observador. Num bloco que já está à vista quando a página abre, isso é o selector a aparecer DEPOIS — e o selector é a única coisa que esta página tem para fazer. Aqui pinta logo. ------------------------------------------------------------- */ html.com-js .heroi .revelar { opacity: 1; transform: none; transition: none; } /* ------------------------------------------------------------- 2. ALTURA DO HERÓI (DOBRA) ------------------------------------------------------------- */ .heroi { /* 28 -> 16 no telemóvel. São 12 px, e no telemóvel os 12 px decidem se a última linha do botão aparece. */ padding-top: clamp(16px, 3.4vw, 48px); padding-bottom: clamp(32px, 4.4vw, 56px); } /* A frase de abertura passou a ter DUAS linhas no telemóvel e não quatro. O tecto de largura existe para ela não se esticar num ecrã grande, onde uma linha de 110 caracteres já não se lê. */ .heroi__texto .chamada { margin-top: 14px; max-width: 44ch; } .heroi__texto h1 { /* 15ch dava três linhas com o título actual em ecrã estreito. */ max-width: 17ch; line-height: 1.04; } /* ------------------------------------------------------------- 3. O SELECTOR DENTRO DO HERÓI (DOBRA) O partial é partilhado e não se toca. O que se aperta é o que a folha principal lhe dá quando ele está DENTRO do herói. ------------------------------------------------------------- */ /* O espaçamento estava a ser contado duas vezes: a grelha `.selector__campos` dá `gap: 16px` E a regra geral `.campo + .campo` dá `margin-top: 16px`. Entre três campos são 32 px de ar a mais, de graça. */ .heroi .selector__campos > .campo + .campo { margin-top: 0; } /* O CAMPO DO PAÍS PASSAVA POR CIMA DO BOTÃO. (DOBRA) Um ``, que é o que ele sabe fazer. Isto está encostado a `.heroi` porque é aqui que a coluna é estreita. A mesma armadilha existe para quem puser o selector noutra coluna apertada: fica escrito no relatório. */ .heroi .selector__campos > .campo, .heroi .selector .campo__caixa, .heroi .selector .campo__seleccao { min-width: 0; } .heroi .selector { padding: clamp(14px, 2.2vw, 22px); } .heroi .selector__cabeca { margin-bottom: 10px; } .heroi .selector__campos { gap: 14px; } .heroi .selector .campo { gap: 6px; } /* 42 -> 40 px de altura nas fichas de duração e de uso. Duas linhas de fichas mais uma: são 6 px, e param acima dos 40 px de alvo que um dedo grande ainda acerta. Abaixo disto não se desce. */ .heroi .selector .ficha span { padding-block: 9px; } /* ------------------------------------------------------------- 4. AS DUAS COLUNAS DO ECRÃ GRANDE (DOBRA) A arte do telemóvel ocupava a coluna da direita inteira e empurrava o selector para BAIXO do texto. A coluna da direita passou a ser do selector; a arte saiu do HTML. O corte é aos 1000 px e não aos 820: é a partir dos 1000 que a folha principal dá ao selector do herói duas colunas de campos. Entre os 820 e os 999 uma coluna estreita punha as cinco fichas de duração umas por cima das outras, e ficava mais alto do que ficava empilhado. ------------------------------------------------------------- */ @media (min-width: 1000px) { .heroi__grelha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(26px, 3.4vw, 52px); align-items: start; } .heroi__texto { grid-column: 1; grid-row: 1; } .heroi__apoio { grid-column: 1; grid-row: 2; } .heroi__accao { grid-column: 2; grid-row: 1 / span 2; } /* Os selos vivem agora numa coluna estreita: um por linha lê-se, dois lado a lado partem cada frase em três. */ .heroi__apoio .selos { grid-template-columns: minmax(0, 1fr); } } .heroi__apoio .selos { margin-top: clamp(20px, 2.6vw, 30px); } /* ------------------------------------------------------------- 5. O BLOCO QUE EXPLICA O eSIM Três frases contra três medos. Vive DENTRO do herói, sem separador e sem outro banho de espaçamento: é o primeiro deslize de quem hesitou em vez de carregar no botão. O amarelo aqui é SUPERFÍCIE — o fundo do cartão do ícone e o preenchimento de um dos desenhos. Nunca letra: sobre branco daria 1,4:1. ------------------------------------------------------------- */ .heroi__explica { margin-top: clamp(34px, 4.6vw, 60px); padding-top: clamp(26px, 3.4vw, 40px); border-top: 1px solid var(--linha); } .heroi__explica .sobrancelha { margin-bottom: 12px; } .heroi__explica-titulo { font-size: clamp(1.32rem, 2.4vw, 1.75rem); letter-spacing: -.02em; max-width: 22ch; } .explica { display: grid; gap: clamp(20px, 2.8vw, 32px); margin-top: clamp(22px, 2.8vw, 32px); } .explica__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; } .explica__icone { width: 40px; height: 40px; flex: 0 0 auto; padding: 8px; box-sizing: border-box; color: var(--tinta); background: var(--amarelo-luz); border: 1px solid var(--linha); border-radius: var(--r2); } .explica__item h3 { font-family: var(--sans); font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; } .explica__item p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--tinta-2); } .explica__nota { margin-top: clamp(22px, 2.6vw, 30px); font-size: 14.5px; } .explica__nota a { color: var(--tinta); font-weight: 600; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .3s var(--suave); } .explica__nota a:hover { text-decoration-color: var(--tinta); } @media (min-width: 700px) { .explica { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ------------------------------------------------------------- 6. A FAIXA DE NÚMEROS DENTRO DO BLOCO DA CONFIANÇA `provas` e `diaspora` eram duas secções de página inteira a dizer a mesma coisa por dois caminhos — ambas argumento de confiança, e uma delas repetia à letra o número que a outra trazia na frase de abertura ("cerca de 92 mil angolanos"). Passaram a ser uma só. A faixa amarela deixou de atravessar a página de lado a lado e passou a ser um cartão dentro da secção, o que poupa uma banda inteira de espaçamento a quem está a deslizar — e o dono queixou-se de deslizar. Continua a ser amarelo com TINTA por cima: 13,1:1. ------------------------------------------------------------- */ /* A ROTA DESENHADA NÃO ENTRA NO TELEMÓVEL. O desenho é decorativo — `aria-hidden`, não diz nada a ninguém que não o veja — e num ecrã de 390 px ocupava 262 px de altura ANTES do título do bloco. Era um terço de ecrã a empurrar para baixo a frase que vende, e o dono queixou-se precisamente de deslizar. No ecrã grande fica: aí vive na coluna do lado e não custa uma linha de altura a ninguém. */ @media (max-width: 699.98px) { .diaspora__arte { display: none; } } .provas--dentro { margin-top: clamp(34px, 4.4vw, 56px); padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 34px); border: 1px solid rgba(18, 18, 18, .12); border-radius: var(--r3); } .provas--dentro .provas__grelha { gap: clamp(18px, 2.6vw, 30px); } @media (min-width: 560px) { .provas--dentro .provas__grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }