/* =========================================================================== luizguedes.pt — camada propria, por cima do template Bostami. Nao editar main.css: e do template e sera substituido numa actualizacao. Ambito: correcoes ao template e suporte ao bilingue. Nao redesenha o site. =========================================================================== */ :root { --lg-primaria: #1b74e4; --lg-primaria-escura: #1560c4; --lg-transicao: 180ms ease; /* Dimensao dos controlos do cabecalho (bandeira e tema). Num so sitio para os dois nao poderem divergir. */ --ctrl: 50px; --ctrl-icone: 21px; } @media (max-width: 480px) { :root { --ctrl: 44px; --ctrl-icone: 19px; } } /* --- Fundo da pagina ------------------------------------------------------ Estava a ser definido por JavaScript (document.body.style.backgroundColor), o que so acontecia depois de a pagina pintar -- daí o flash branco antes de escurecer. Em CSS resolve-se antes do primeiro paint. So o leva a cor: quando o nao tem fundo proprio, o do body propaga-se para toda a tela, incluindo a zona de overscroll. */ body { background-color: #37424d; } body.dark-theme { background-color: #1a1a1a; } /* --- Elementos que ficam fixos ao rolar ----------------------------------- O scroll nao acontece no documento: o template poe .page-wrapper em position:fixed com height:100vh e overflow-y:auto, e e la dentro que a pagina rola. Os `position: sticky` colam-se a essa caixa -- funcionam, mas os valores de `top` tem de ser lidos nesse referencial. Estado medido antes desta alteracao (scroll de 0 a 1200px): - foto: docava aos 110px (correcto, ja vinha do template) - menu: docava aos -35px (top:-45px do template -- ficava cortado) - cabecalho: nao docava, subia ate sair do ecra */ /* Controlos (bandeira, tema, menu mobile): flutuam fixos no canto superior direito. NAO fixar o cabecalho inteiro -- foi a versao anterior e cortava a foto e o texto: era uma barra opaca de largura total, quase vazia, com dois botoes na ponta. Os botoes ja tem superficie propria e podem flutuar sozinhos sobre o conteudo. position:fixed refere-se a janela; funciona aqui porque o .page-wrapper (o contentor que rola) e ele proprio fixed a ocupar a janela toda. */ .bostami-header-menu-btn { position: fixed; top: 20px; right: 24px; z-index: 40; } /* Abaixo de 1400px o menu lateral esconde-se e aparece o botao de 3 tracos. Nesse modo os controlos empilham-se em coluna, com o hamburger no topo e o idioma e o tema por baixo dele (order:-1 poe o hamburger primeiro sem mexer no HTML). Alinhados a direita, encostados a margem do ecra. */ @media (max-width: 1399px) { .bostami-header-menu-btn { flex-direction: column; align-items: flex-end; gap: 10px; } .bostami-header-menu-btn .menu-btn { order: -1; } /* As margens laterais da fila horizontal (6px da bandeira, 10px do tema no template) desalinhavam as bordas direitas na coluna. Seletor composto para ganhar a regra base da bandeira, que vem mais abaixo no ficheiro. */ .bostami-header-menu-btn .btn-idioma, .bostami-header-menu-btn .dark-btn { margin: 0; } /* O menu abria em position:absolute dentro do cabecalho. Como o cabecalho ja rolou para fora ao chegar a meio da pagina, o menu aparecia acima do ecra (medido: -750px) e nao se via nada. Passa a position:fixed: abre sempre no ecra actual, como um painel a esquerda da coluna de controlos. z-index abaixo dos controlos (40) para o X e a bandeira ficarem sempre por cima e clicaveis. */ .mobile-menu-wrap .mobile-menu { position: fixed; top: 20px; right: 84px; left: auto; width: min(280px, calc(100vw - 120px)); max-height: calc(100vh - 40px); overflow-y: auto; z-index: 39; } .mobile-menu-wrap .mobile-menu .mean-bar .mean-nav ul li a { padding: 8px 24px; } } /* Menu lateral: alinhado com a foto, em vez de colar acima da area visivel (o template dava-lhe top:-45px e ficava com o topo cortado ao docar) */ .bostami-main-menu-wrap { top: 100px; } /* NOTA: a foto NAO doca abaixo de 1200px, de proposito. Foi experimentado (aside sticky) e revertido: nesses tamanhos o cartao esta empilhado acima do conteudo e ocupa ~77% do ecra -- docado, tapava a pagina e o conteudo rolava escondido por tras. So doca no desktop, onde e barra lateral. */ /* --- Acessibilidade ------------------------------------------------------ */ /* Salto para o conteudo: primeiro elemento focavel da pagina */ .salta-conteudo { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 12px 20px; background: var(--lg-primaria); color: #fff; font-weight: 600; } .salta-conteudo:focus { left: 0; } /* Indicador de foco visivel. O template nao tinha nenhum: quem navega por teclado nao sabia onde estava. Restrito a controlos com area visivel -- um contorno sobre um elemento de altura zero desenha-se como uma linha atravessada no ecra. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .fillter-btn:focus-visible { outline: 3px solid var(--lg-primaria); outline-offset: 3px; } /* Os controlos do cabecalho passaram de

para