/* ===================================================================== Heroi das paginas de produto — Interweb / MozOut --------------------------------------------------------------------- TODAS as regras deste ficheiro estao presas a `.rlx-heroi`. Uma pagina que nao tenha essa classe na
nao e afectada por uma unica linha daqui. E isso que permite a passagem gradual: as paginas ja convertidas usam este desenho, as que ainda nao foram continuam exactamente como estavam, com o mesmo ficheiro carregado nas duas. Carrega-se no CORPO, a partir do `includes/other/heroi.php`, e nao no . Razao medida: o `hosting-vps.css` -- que traz o `height:325px!important` e o subtitulo em posicao absoluta -- e carregado POR PAGINA, depois do cabecalho. Uma folha no ficava antes dele. Para desligar tudo: apagar a linha de include no menu-responsivo.php. ===================================================================== */ /* ------------------------------------------------------------------ DEMONSTRACAO — heroi proposto. Tres licoes que custaram tres tentativas: 1. Nao se reaproveitam .title/.subtitle do site: trazem cinco regras de posicionamento absoluto e floats, espalhadas por media queries. 2. O icone e dimensionado por `.product-adcast hgroup .product-icon` -- preso ao
. Sem hgroup, fica sem tamanho. Repetem-se aqui os MESMOS valores (hosting-vps.css, linhas 1942-1950). 3. A
esta ANINHADA dentro do heroi, e nao a seguir. Substituir ate ao primeiro
engolia-a. Aqui ela e preservada byte a byte e fica no fim, como no original. ------------------------------------------------------------------ */ /* NAO se toca no background-image: cada pagina traz o seu, pela classe do fundo (mozout-shared-hosting, mozout-web-design, ...). Substitui-lo aqui apagava a imagem de todas e punha a mesma em todas -- e nas Interweb apagava-a de vez, porque o caminho era da MozOut. O gradiente entra num pseudo-elemento POR CIMA da imagem que ja la esta. Assim a imagem de cada pagina mantem-se e o contraste do texto deixa de depender dela. */ .product-adcast.rlx-heroi{ height:auto !important; min-height:325px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; padding-bottom:14px; color:#fff; } .product-adcast.rlx-heroi::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:linear-gradient(100deg,rgba(31,40,53,.88) 0%,rgba(31,40,53,.60) 40%, rgba(3,165,192,.30) 72%,rgba(0,172,200,.14) 100%); } .product-adcast.rlx-heroi > .inner, .product-adcast.rlx-heroi > .breadcrumbs{position:relative;z-index:1} .product-adcast.rlx-heroi > .inner{width:100%;padding:0 20px;height:auto;float:none} .rlx-grelha{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px; align-items:center;padding:30px 0 6px} .rlx-texto{min-width:0} /* Em ecra grande o subtitulo, os botoes e a migalha alinham com o TITULO, nao com o icone: o icone mais o traco formam uma coluna a esquerda, e o texto todo comeca depois dela (78px do icone + 22px de margem). */ @media(min-width:701px){ .rlx-heroi .rlx-sub, .rlx-heroi .rlx-lista, .rlx-heroi .rlx-accoes{margin-left:100px} } /* Tamanho e traco do site (hosting-vps.css 1942-1950), mas no fluxo normal em vez de absoluto. Assim o icone e o primeiro elemento da linha, e tudo o que vem por baixo -- subtitulo, lista, botoes, cartao -- alinha pela esquerda DELE, nao pela do titulo. */ .rlx-heroi .product-icon{display:inline-block;vertical-align:middle; width:78px;line-height:70px;font-size:40px; border-right:solid 1px rgba(255,255,255,.3);text-align:center; margin:0 22px 0 0;flex:0 0 78px} .rlx-cab{min-height:70px;display:flex;align-items:center;gap:0} .rlx-h1{font-family:Ubuntu,arial,sans-serif;font-size:38px;font-weight:700; text-transform:uppercase;color:inherit;line-height:.9em;margin:0} .rlx-sub{font-family:Ubuntu,arial,sans-serif;font-size:18px;font-weight:300; color:inherit;margin:16px 0 0;line-height:1.5;max-width:52ch} .rlx-lista{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px; margin:18px 0 0;padding:0;font-size:14px} .rlx-lista li{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.95)} .rlx-lista > li > span{color:#8fe3a6;font-weight:700} .rlx-accoes{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px} .rlx-btn{display:inline-flex;align-items:center;justify-content:center; padding:13px 28px;border-radius:5px;font-size:14px;font-weight:500; text-transform:uppercase;letter-spacing:.4px;text-decoration:none; border:1px solid transparent;line-height:1.2} .rlx-btn-p,.rlx-btn-p:visited{background:#d10303;border-color:#f00843;color:#fff} .rlx-btn-p:hover,.rlx-btn-p:focus{background:#b80202;color:#fff} .rlx-btn-s,.rlx-btn-s:visited{color:#fff;border-color:rgba(255,255,255,.6)} .rlx-btn-s:hover,.rlx-btn-s:focus{background:rgba(255,255,255,.14);color:#fff} /* sem isto o navegador pinta as ligacoes ja visitadas de roxo, e o botao mudava de cor depois do primeiro clique */ a.rlx-cartao:visited{color:#fff} a.rlx-cartao:visited .rlx-obs{color:rgba(255,255,255,.86)} .product-adcast.rlx-heroi .breadcrumbs a:visited{color:#fff} /* O cartao passa a claro. Duas razoes: o fundo escuro sobre a ilustracao era pesado, e o preco dos planos e desenhado para fundo claro (as regras do site usam #333). Assim o numero aqui e EXACTAMENTE o mesmo que o cliente ve nos planos em baixo. */ .rlx-cartao{background:rgba(31,40,53,.42); border:1px solid #1f2835; border-radius:5px;padding:20px 22px 18px;text-align:center;color:#fff; /* o desfoque nao e enfeite: sem ele as linhas da ilustracao passam atraves do fundo translucido e comem o contraste do numero */ -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); box-shadow:0 8px 26px rgba(0,0,0,.22)} @supports not (backdrop-filter:blur(2px)){ .rlx-cartao{background:rgba(31,40,53,.62)} } .rlx-de{font-family:Ubuntu,arial,sans-serif;font-size:12px;font-weight:300; text-transform:uppercase;letter-spacing:.6px;color:rgba(255,255,255,.86)} /* valores copiados das regras dos planos: span.price-value, supcurrencytype, .plan .price .value sup e .plan .price .value sub */ .rlx-pr{position:relative;display:inline-block;margin:4px 0 0;line-height:1} .rlx-pr supcurrencytype{font-size:13px;margin-left:-6px;top:17px; position:absolute;font-weight:700;color:#fff} .rlx-valor{font-family:Ubuntu,arial,sans-serif;font-size:50px;font-weight:900; color:#fff;margin-left:9px} /* os centimos: o site usa 35% levantado 1.4em, e a esse tamanho o ponto decimal desaparece -- fica com menos de 2px. Sobe-se para 46% e encosta-se mais ao numero; continua subscrito, mas le-se. */ .rlx-valor sup{top:-.95em;font-size:46%;margin-right:-6px;letter-spacing:-.5px; color:rgba(255,255,255,.94)} .rlx-suf{font-size:14px;font-weight:500;bottom:-.1em;color:rgba(255,255,255,.86);margin-left:2px} .rlx-obs{font-size:12px;color:rgba(255,255,255,.86);line-height:1.4;margin-top:6px;font-weight:500} /* o cartao e uma ligacao: quem repara no preco quer ver o plano */ a.rlx-cartao{display:block;text-decoration:none;transition:border-color .15s,background .15s} a.rlx-cartao:hover,a.rlx-cartao:focus{background:rgba(31,40,53,.56);border-color:#0e1420;text-decoration:none} a.rlx-cartao:hover .rlx-obs{color:#fff} .rlx-prazo{display:block;font-size:11px;color:rgba(255,255,255,.66);margin-top:4px;font-weight:400} @media(max-width:900px){ /* -------------------------------------------------------------- Em telemovel o heroi chegava a passar dos 700px -- mais de um ecra inteiro antes de o visitante ver o primeiro plano. Aqui aperta-se tudo o que se pode apertar sem perder informacao: nada e removido, so encolhido e reorganizado. -------------------------------------------------------------- */ .product-adcast.rlx-heroi{min-height:0;padding-bottom:10px} .rlx-grelha{grid-template-columns:1fr;gap:16px;padding:20px 0 6px} .rlx-h1{font-size:26px} .rlx-sub{font-size:15px;line-height:1.4;margin-top:10px;max-width:none} .rlx-lista{gap:6px 16px;margin-top:12px;font-size:13px} .rlx-accoes{gap:8px;margin-top:16px} /* os botoes deixam de ocupar uma linha cada: lado a lado poupam cerca de 60px e continuam com area de toque suficiente */ .rlx-accoes .rlx-btn{flex:1 1 0;min-width:0;padding:12px 10px;font-size:13px;letter-spacing:.2px} /* O cartao volta ao arranjo de origem: rotulo por cima, preco por baixo, tudo centrado -- como em ecra grande. Tinha-o passado a linha para poupar altura, mas com o nome do plano fora ficava o "FROM" sozinho de um lado e o preco do outro, e lia-se mal. A altura recupera-se apertando o enchimento. */ .rlx-cartao{display:block;text-align:center;padding:14px 16px 12px} .rlx-cartao .rlx-txt{display:block} .rlx-de{font-size:10.5px;letter-spacing:.5px} .rlx-obs{margin:0;font-size:12px} .rlx-pr{margin:2px 0 0} .rlx-valor{font-size:32px;margin-left:8px} .rlx-valor sup{font-size:50%;top:-.8em} .rlx-pr supcurrencytype{top:10px;font-size:11px} .rlx-suf{font-size:12px} .product-adcast.rlx-heroi .breadcrumbs{padding:2px 0 0} } @media(max-width:700px){ /* Cada um na sua linha: o icone em cima, o titulo por baixo. O traco vertical sai -- ele existia para separar dois elementos lado a lado, e empilhados nao separa nada. */ .rlx-cab{display:block;min-height:0} .rlx-heroi .product-icon{display:block;width:auto;flex:none; border-right:none;text-align:left;line-height:1; font-size:28px;margin:0 0 10px} .rlx-h1{font-size:26px} } @media(max-width:400px){ .rlx-heroi .product-icon{font-size:24px;margin-bottom:8px} .rlx-h1{font-size:22px} } /* a migalha alinhada com o texto: o .inner dela herda o mesmo contentor do heroi, mais os 78px que dao lugar ao icone */ .product-adcast.rlx-heroi .breadcrumbs{ position:static !important; display:block !important; margin:0 !important; padding:4px 0 0; width:100%} .product-adcast.rlx-heroi .rlx-grelha{padding:26px 0 10px} /* nenhuma ligacao da migalha leva sublinhado -- nem em repouso nem ao passar o rato; o site sublinha no :hover e fica ruidoso sobre a ilustracao */ .product-adcast.rlx-heroi .breadcrumbs a, .product-adcast.rlx-heroi .breadcrumbs a:hover, .product-adcast.rlx-heroi .breadcrumbs a:focus{ text-decoration:none !important; border-bottom:0 !important; color:#fff} .product-adcast.rlx-heroi .breadcrumbs a:hover{color:rgba(255,255,255,.78)} /* a pagina actual nao e ligacao: sem sublinhado, sem cursor de mao */ .product-adcast.rlx-heroi .breadcrumbs .rlx-actual{ text-decoration:none;border-bottom:0;cursor:default;color:#fff;font-weight:500} @media(max-width:900px){ } /* --------------------------------------------------------------------- Migalha: alinhada com o TITULO em ecra grande, e com a margem em ecra pequeno (onde o icone esta por cima e nao ha coluna a esquerda). Nota para quem vier a seguir: esta regra tinha tres copias mais abaixo no ficheiro, restos das varias voltas do desenho, e todas repunham `padding:0 20px`. Com a mesma especificidade ganha a ultima -- e o alinhamento nunca chegava a aplicar-se. Fica uma so. --------------------------------------------------------------------- */ .product-adcast.rlx-heroi .breadcrumbs .inner{padding:0 20px} @media(min-width:701px){ .product-adcast.rlx-heroi .breadcrumbs .inner{padding:0 20px 0 120px} } /* --------------------------------------------------------------------- Preco do cartao — moeda e periodo empilhados ao lado do valor. O separador decimal estava a desaparecer: os `` do site vem a 35% do tamanho, e a 34px de valor isso deixa a virgula com menos de 2px. Sobe-se para 42% e encosta-se ao numero. A moeda que vem DEPOIS (Kz, MT, EUR) sobe para a mesma linha dos decimais, e o periodo (/mes) fica por baixo -- como nos cartoes de plano da propria pagina. --------------------------------------------------------------------- */ .rlx-heroi .rlx-pr{display:inline-flex;align-items:flex-start;gap:2px} .rlx-heroi .rlx-valor sup{top:-.55em;font-size:42%;letter-spacing:0; margin:0;color:#fff;font-weight:700} .rlx-heroi .rlx-lado{display:inline-flex;flex-direction:column; align-items:flex-start;line-height:1.15;padding-top:6px} .rlx-heroi .rlx-moeda{font-size:15px;font-weight:700;color:#fff;margin:0} .rlx-heroi .rlx-suf{font-size:13px;font-weight:400;bottom:0; color:rgba(255,255,255,.82);margin:0} .rlx-heroi .rlx-plano{font-size:13px;font-weight:600;color:#fff; margin-top:2px;letter-spacing:.1px} /* decimais e moeda na mesma linha de cima, periodo por baixo */ .rlx-heroi .rlx-cima{display:block;font-size:15px;font-weight:700; color:#fff;line-height:1.1;white-space:nowrap} .rlx-heroi .rlx-cima .rlx-moeda{font-size:inherit;font-weight:inherit;margin-left:4px} /* O periodo e um , e o `vertical-align:sub` do navegador puxa-o para dentro da linha de cima -- sobrepunha-se ao `,00 Kz`. Dentro da coluna do cartao ele tem de se comportar como bloco normal. */ .rlx-heroi .rlx-lado .rlx-suf{ display:block; position:static; vertical-align:baseline; bottom:auto; margin-top:3px; line-height:1.1} /* --------------------------------------------------------------------- O cartao nasce com [hidden] e so o perde quando o guiao o preenche. Mas o atributo `hidden` funciona pondo `display:none`, e a regra `a.rlx-cartao{display:block}` acima ANULA-O -- e o cartao aparecia sempre, com o `0` do marcador quando nao havia preco. Esta regra devolve-lhe o efeito. Sem ela, uma pagina sem preco ou um erro no guiao mostram um preco de zero ao cliente. --------------------------------------------------------------------- */ .rlx-heroi .rlx-cartao[hidden], a.rlx-cartao[hidden]{display:none !important} /* o rotulo do grupo numa linha so */ .rlx-heroi .rlx-plano{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px} /* linha por baixo do preco — o que a pagina promete */ .rlx-heroi .rlx-extra{margin-top:10px;padding-top:9px; border-top:1px solid rgba(255,255,255,.18); font-size:12px;line-height:1.35;color:rgba(255,255,255,.86); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rlx-heroi .rlx-extra:empty{display:none} /* cartao das paginas sem preco: sem numero, so o que a marca garante. O rotulo sobe para primeiro plano, ja que nao ha valor a destacar. */ .rlx-heroi .rlx-cartao.rlx-sem-preco .rlx-de{margin-bottom:2px;font-size:11.5px;opacity:.82} .rlx-heroi .rlx-cartao.rlx-sem-preco .rlx-pr{display:none} .rlx-heroi .rlx-cartao.rlx-sem-preco .rlx-extra{margin-top:8px;padding-top:8px} /* O cartao assentava um pouco acima do bloco de texto: a grelha centra as duas colunas, mas a migalha fica FORA dela e puxa o peso visual do lado esquerdo para baixo. Uns pixeis a mais em cima acertam as duas. */ @media(min-width:901px){ .rlx-heroi .rlx-cartao{margin-top:18px} } /* O rotulo tem `max-width:230px` para caber numa linha. Num cartao mais largo -- que e o que acontece em telemovel, onde ele ocupa a largura toda -- esse bloco ficava encostado a esquerda enquanto o resto estava centrado. As margens automaticas centram-no. */ .rlx-heroi .rlx-plano{margin-left:auto;margin-right:auto} /* rede de seguranca: nada dentro do heroi pode empurrar a pagina para fora do ecra */ .rlx-heroi .rlx-grelha, .rlx-heroi .rlx-texto, .rlx-heroi .rlx-cartao{min-width:0;max-width:100%} .rlx-heroi .rlx-accoes .rlx-btn{max-width:100%} /* no cartao sem preco a pergunta fica mais discreta e a resposta ganha peso -- o contrario do cartao de preco, onde o numero e que manda */ /* lista de promessas no cartao das paginas sem preco */ .rlx-heroi .rlx-lista-card{list-style:none;margin:10px 0 0;padding:0;text-align:left; /* centra-se o BLOCO da lista, nao cada linha: com marcadores, centrar linha a linha deixava as margens irregulares e os pontos desalinhados uns dos outros. fit-content + margens automaticas, e nao inline-block: o inline-block entra numa caixa de linha e a folga que isso traz fazia a pagina de privacidade perder o 6.o item por transbordo. */ width:fit-content;max-width:100%;margin-left:auto;margin-right:auto} .rlx-heroi .rlx-lista-card:empty{display:none} .rlx-heroi .rlx-lista-card li{position:relative;padding:0 0 0 20px;margin:0 0 7px; font-size:13px;line-height:1.35;color:rgba(255,255,255,.92)} .rlx-heroi .rlx-lista-card li:last-child{margin-bottom:0} .rlx-heroi .rlx-lista-card li::before{content:"\2713";position:absolute;left:0;top:0; color:#8fe3a6;font-weight:700} .rlx-heroi .rlx-cartao.rlx-sem-preco{padding:18px 20px 18px} .rlx-heroi .rlx-cartao.rlx-sem-preco .rlx-plano{display:none} /* a pagina actual na migalha nao e ligacao: sem sublinhado, sem cursor de mao. Era `` -- uma ligacao para lado nenhum que ainda por cima fazia o navegador saltar para o topo. */ .rlx-heroi .breadcrumbs .rlx-actual{ text-decoration:none;border-bottom:0;cursor:default;color:#fff;font-weight:500} /* no cartao-indice os itens nao levam visto verde: nao sao promessas, sao as seccoes do documento */ .rlx-heroi .rlx-cartao.rlx-sem-preco .rlx-lista-card li::before{ content:"\2022";color:rgba(255,255,255,.55)} .rlx-heroi .rlx-cartao.rlx-sem-preco .rlx-lista-card li{ padding-left:14px;font-size:12.5px;margin-bottom:6px} /* cartao que nao e ligacao (paginas sem #pricing): sem cursor de mao e sem o realce de passagem, para nao prometer um salto que nao ha */ .rlx-heroi .rlx-cartao.rlx-sem-ligacao{cursor:default} .rlx-heroi a.rlx-cartao.rlx-sem-ligacao:hover, .rlx-heroi a.rlx-cartao.rlx-sem-ligacao:focus{background:rgba(31,40,53,.42); border-color:#1f2835} /* --------------------------------------------------------------------- ALTURA FIXA DO CARTAO Medido nas 27 paginas: os cartoes iam de 140 a 226px e os maiores empurravam o heroi de 325 para 333px; no telemovel o heroi ia de 396 a 486px, mais de metade de um ecra de 844px. O heroi passa a ter sempre a mesma altura, e e o cartao que se ajusta -- o guiao corta os itens que nao couberem, medindo. --------------------------------------------------------------------- */ .rlx-heroi .rlx-cartao.rlx-sem-preco{height:209px;overflow:hidden} @media(max-width:700px){ .rlx-heroi .rlx-cartao.rlx-sem-preco{height:149px;padding:14px 16px 12px} .rlx-heroi .rlx-cartao.rlx-sem-preco .rlx-lista-card{margin-top:8px} .rlx-heroi .rlx-cartao.rlx-sem-preco .rlx-lista-card li{margin-bottom:5px;font-size:12px} }