/* * Cabecalho e rodape do site www.weblink.pt, para a area de cliente. * * GERADO -- nao editar a mao. Sai de assets/css/{main-style,comum-origem, * home,menu}.css do site, com todas as regras fechadas dentro de #wv-chrome * (cabecalho) e #wv-ftr (rodape). * * O fechamento e a razao de ser deste ficheiro. As folhas do site nao podiam * ser ligadas em cru: o main-style.css abre com * * { margin:0; padding:0; box-sizing:border-box; font-family:Ubuntu } * e ainda redefine `body`, `a` e `li`. Carregado assim, isso apagava as * margens, os espacamentos e os tipos de letra do Bootstrap sobre o qual a * area de cliente inteira esta construida -- o painel ficava com a marca * certa e ilegivel. Fechadas no contentor, as mesmas regras vestem a barra e * o rodape sem tocar em mais nada da pagina. * * O prefixo e um ID e nao uma classe de proposito: 100 de especificidade poe * estas regras acima de qualquer `.navbar-nav > li > a` do Bootstrap sem ser * preciso um !important por linha. Sao dois prefixos escritos por extenso em * vez de um :is(...) porque um :is() que o navegador nao entenda invalida a * folha inteira. * * Os :root e os @font-face ficam de fora do contentor: as variaveis tem de * ser visiveis as regras que as leem, e um @font-face dentro de um seletor * nao existe. * APARADA em 22/08/2026. As quatro folhas do site entraram inteiras, e * dentro delas esta o site TODO -- os planos de precos, os carrosseis, os * blocos da pagina inicial. O cabecalho e o rodape usam uma fraccao; o resto * viajava em cada pedido sem casar com nada. * * Criterio: uma regra so saiu se NENHUMA das classes que o seu seletor * nomeia existir em lado nenhum. "Lado nenhum" e a uniao de * - o HTML servido de cinco paginas do painel, nas duas linguas (o * cabecalho e o rodape vem inteiros em todas); * - o class="..." de todos os .tpl deste tema e dos do orderform, que * apanha o que so aparece com sessao iniciada; * - as classes que o JavaScript acrescenta ou tira em execucao * (classList.add/toggle, addClass/toggleClass) -- .mw-sticky, .open, * .active e companhia nunca estao no HTML inicial. * Regras sem classe nenhuma no seletor (elemento, id, :root) ficaram todas. * * Verificacao: das 122 classes que o cabecalho e o rodape usam nas paginas * servidas, ZERO perderam uma regra que tinham antes. * * Se um dia se regerar esta folha a partir do escopar.py, o corte perde-se * e o ficheiro volta aos 152 KB. Nao e um erro -- e so voltar a aplicar o * mesmo criterio. */ /* ubuntu.css */ @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej75l0mwFg.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej7wl0mwFg.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej74l0mwFg.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej73l0mwFg.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej76l0mwFg.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej70l0k.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejYHtFyCN4Ffgg.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejYHtFyLN4Ffgg.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejYHtFyDN4Ffgg.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejYHtFyMN4Ffgg.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejYHtFyBN4Ffgg.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family: 'Ubuntu'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejYHtFyPN4E.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKew72j00.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcw72j00.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfA72j00.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3jvWyNL4U.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3jtGyNL4U.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3jvGyNL4U.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3js2yNL4U.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3jvmyNL4U.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3jsGyN.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjsGyN.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* main-style.css */ :root{ --ttl_clr: #252C43; --sub_ttl_clr: #3B3B55; --heading_fz: 34px; --sub_heading_fz: 18px; --ttl_fz: 18px; --sub_ttl_fz: 16px; --head_three: 25px; --head_three_lg: 30px; --h20-size: 20px; --p_25: 25px; --pt_120: 120px; --pb_120: 120px; --pt_90: 90px; --pb_90: 90px; --pt_60: 60px; --pb_60: 60px; --pt_45: 45px; --pb_45: 45px; --pt_30: 30px; --pb_30: 30px; --pr_30: 30px; --pl_30: 30px; --pt_22: 22px; --pb_22: 22px; --pr_22: 22px; --pl_22: 22px; --pt_16: 16px; --pb_16: 16px; --pr_16: 16px; --pl_16: 16px; --pt_10: 10px; --pb_10: 10px; --pr_10: 10px; --pl_10: 10px; --pt_6: 6px; --pb_6: 6px; --pr_6: 6px; --pl_6: 6px; } @media(max-width:1180px){:root{ --heading_fz: 31px; --sub_heading_fz: 16px; --sub_ttl_fz: 14px; --p_25: 18px; --pt_90: 60px; --pb_90: 60px; --pt_60: 40px; --pb_60: 40px; --pt_30: 25px; --pb_30: 25px; --pr_30: 25px; --pl_30: 25px; }} @media(max-width:950px){:root{ --heading_fz: 28px; --sub_heading_fz: 15px; --ttl_fz: 16px; --head_three: 20px; --head_three_lg: 26px; --h20-size: 18px; --pt_90: 45px; --pb_90: 45px; --pt_60: 30px; --pb_60: 30px; --pt_30: 20px; --pb_30: 20px; --pr_30: 20px; --pl_30: 20px; --pt_22: 18px; --pb_22: 18px; --pr_22: 18px; --pl_22: 18px; --pt_16: 10px; --pb_16: 10px; --pr_16: 10px; --pl_16: 10px; --pt_10: 6px; --pb_10: 6px; --pr_10: 6px; --pl_10: 6px; }} @media(max-width:768px){:root{ --head_three_lg: 18px; --p_25: 13px; --pt_90: 35px; --pb_90: 35px; --pt_60: 25px; --pb_60: 25px; --pt_45: 25px; --pb_45: 25px; }} @media(max-width:450px){:root{ --heading_fz: 22px }} #wv-chrome, #wv-chrome *, #wv-ftr, #wv-ftr *{ margin: 0; padding: 0; box-sizing: border-box} #wv-chrome, #wv-ftr{font-family: Ubuntu, Arial} #wv-chrome, #wv-ftr{ font-size: 15px; font-weight: 400; color: var(--sub_ttl_clr); line-height: 1.4 } #wv-chrome a, #wv-ftr a{ display: inline-block; text-decoration: none; color: var(--ttl_clr) } #wv-chrome li, #wv-ftr li{ list-style: none } #wv-chrome .wv-container, #wv-ftr .wv-container{ max-width: 1240px; margin: 0 auto; padding: 0 20px } #wv-chrome .wv-h3{ font-weight: 700; font-size: var(--head_three); color: var(--ttl_clr); margin: 0 } #wv-chrome .wv-row{ display: flex; flex-wrap: wrap } #wv-chrome .pt-30, #wv-ftr .pt-30{ padding-top: var(--pt_30) } #wv-ftr .pt-22{ padding-top: var(--pt_22) } #wv-chrome .pb-10, #wv-ftr .pb-10{ padding-bottom: var(--pb_10) } #wv-ftr .fff{ color: #fff !important } @media(min-width:1600px){#wv-chrome .wv-container, #wv-ftr .wv-container{ max-width: 1550px; }} #wv-chrome .mw-menu-dropdown{ position: relative !important; } #wv-chrome .na-menu-fix{ position: relative } #wv-chrome .na-menu-fix.mw-sticky:before{ content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: #fff } #wv-chrome .mw-menu{ position: relative; z-index: 500 } #wv-chrome .mw-menu-row{ display: flex; flex-wrap: wrap; align-items: center } #wv-chrome .mw-menu-mncol-1{ width: 100% } #wv-chrome .mw-menu-left{ display: flex; align-items: center; flex-wrap: wrap } #wv-chrome .mw-menu-logo{ width: auto; display: flex; align-items: center } #wv-chrome .mw-menu-left-2{ width: auto; display: flex; align-items: center; justify-content: end; margin: auto } #wv-chrome .mw-navigation-show-ul{ display: flex; padding: 0; margin: 0; list-style-type: none; flex-wrap: wrap } #wv-chrome .mw-menu-tabs:hover, #wv-chrome .mw-menu-tabs:hover .mw-navigation-show-a, #wv-ftr .mw-menu-tabs:hover .mw-navigation-show-a{ color: #0435b2 !important } #wv-chrome .mw-menu-tabs:hover .mw-menu-tab-dwn{ color: #0435b2 !important } #wv-chrome .mw-menu-tabs{ display: flex; overflow: hidden; cursor: pointer; font-weight: 500; font-size: 14px; line-height: 1.1; color: #252525; padding: 38px 32px; position: relative; transition: all .3s ease } #wv-chrome .mw-logo2{ display: none } #wv-chrome .na-menu-fix.mw-sticky{ position: fixed; left: 0; right: 0; top: -1px; z-index: 500; border-bottom: 1px solid #0000000d; box-shadow: 1px 1px 18px rgba(0, 0, 0, .05) } #wv-chrome .na-menu-fix.mw-sticky .mw-logo1{ display: block } #wv-chrome .na-menu-fix.mw-sticky .mw-logo2{ display: none } #wv-chrome .wv-header-two .mw-menu-tabs:hover .mw-menu-tab-dwn::after, #wv-chrome .wv-header-two .mw-menu-tabs:hover .mw-menu-tab-dwn::before{ border-color: #afa0f9 !important } #wv-chrome .wv-header-two .na-menu-fix.mw-sticky .mw-menu-tabs:hover .mw-menu-tab-dwn::after, #wv-chrome .wv-header-two .na-menu-fix.mw-sticky .mw-menu-tabs:hover .mw-menu-tab-dwn::before{ border-color: #0435b2 !important } #wv-chrome .mw-menu-active .mw-submenu{ display: inline-block !important } #wv-chrome .mw-menu-right-ul{ display: flex; padding: 0; margin: 0; list-style-type: none; justify-content: end; flex-flow: wrap row } #wv-chrome .mw-menu-tab-dwn{ position: relative; right: -6px; top: 1px; transition: all .2s ease-in-out } #wv-chrome .mw-menu-tab-dwn:before{ content: ""; display: block; box-sizing: border-box; position: absolute; width: 7px; height: 7px; border-right: 1px solid; transform: rotate(45deg); transition: all .2s ease-in-out; left: 4px; top: 2px } #wv-chrome .mw-menu-tab-dwn::after{ content: ""; display: block; box-sizing: border-box; position: absolute; width: 7px; height: 7px; border-bottom: 1px solid; transform: rotate(45deg); left: 4px; transition: all .2s ease-in-out; top: 2px } #wv-chrome .mw-menu-tab-dwn{ display: inline-block } #wv-chrome .mw-submenu1 .wv-h3{ font-weight: 500; font-size: 20px; padding: 20px 20px 0 } #wv-chrome .mw-menu-active .mw-menu-tab-dwn:before{ transform: rotateZ(226deg); top: 6px } #wv-chrome .mw-menu-active .mw-menu-tab-dwn:after{ transform: rotateZ(221deg); top: 6px } #wv-chrome .mw-submenu{ display: none; right: 0; box-shadow: 1px -1px 18px 3px rgb(0 0 0 / 5%); position: absolute; z-index: 400; border-radius: 11px; background: #fff; width: 100%; transform: translate(-44%, 0); top: 94%; animation: slideDown .2s ease-in-out; min-width: max-content; left: 45%; padding: 15px 20px 25px } #wv-chrome .wv-col{ padding: 10px 20px } #wv-chrome .mw-sub-content-li{ padding: 12px 16px 12px } #wv-chrome .mw-sub-content-lnk{ font-weight: 500 } #wv-chrome .mw-sub-content-li:hover{ background: #7de7ff36; border-radius: 8px } #wv-chrome .mw-sub-content-li p{ color: #8E8D91; font-size: 14px; width: max-content } #wv-chrome .mw-menu-tabs:before{ content: ''; position: absolute; bottom: -11px; border: 1px solid transparent; opacity: 0; left: 50%; margin-left: -8px; transform: rotate(45deg); background: #fff; height: 28px; width: 28px; box-shadow: -4px -3px 10px 0 rgb(0 0 0 / 5%); border-radius: 10px 0 0 0; z-index: 402 } #wv-chrome .mw-menu-tabs::after{ content: ""; position: absolute; width: 100%; border-radius: 5px; bottom: 25px; left: 0; transform-origin: right; transform: scaleX(0); transition: all .3s ease } #wv-chrome .mw-menu-tabs:hover::after{ transform-origin: left; transform: scaleX(1); background: #d3d3d314; height: 40px; z-index: -1 } #wv-chrome .mw-menu-active .mw-menu-tabs:before{ animation: slideDown .2s ease-in-out; opacity: 1 } #wv-chrome .mw-sub-content-lnk{ margin-bottom: 12px; font-size: 15px; color: #3B3B55; text-decoration: none; position: relative } #wv-chrome .mw-sub-content-lnk:before{ content: ""; position: absolute; width: 100%; height: 1px; border-radius: 5px; background-color: #000; bottom: -2px; left: 0; transform-origin: right; transform: scaleX(0); transition: transform .3s ease-in-out } #wv-chrome .mw-sub-content-lnk:hover:before{ transform-origin: left; transform: scaleX(1) } #wv-chrome .drop-link-sup-tt{ color: #35354f; border: 1px solid #35354f; background: #fb0; vertical-align: middle; font-size: 9px; padding: 2px 3px; border-radius: 3px; font-weight: 500; margin-left: 2px } @keyframes slideDown{ from { opacity: 0 } to { opacity: 1 } } @media(min-width:995px){#wv-chrome .mw_menu_toggle{ display: none }} @media(max-width:994px){#wv-chrome .mw-menu-dropdown{ position: relative } #wv-chrome .mw-menu{ overflow: hidden; padding: 15px 0 } #wv-chrome .mw-active{ overflow: unset } #wv-chrome .mw-navigation-show{ width: 100%; position: absolute; left: 100%; right: 0; z-index: 99; transition: all .3s ease-in-out; top: 85px; overflow: auto; max-height: calc(100vh - 74px); display: block; box-shadow: 0 20px 18px rgba(0, 0, 0, .05); border-top: 1px solid } #wv-chrome .mw-navigation-show.mw-active{ left: 0 } #wv-chrome .mw-navigation-show-ul{ overflow: hidden; height: 800px; display: block; background: #fff; padding-top: 14px; padding-bottom: calc(100% - 74px) } #wv-chrome .mw-menu-tabs{ padding: 20px 0; padding-left: 32px; font-size: 18px } #wv-chrome .mw-menu-tabs:before{ left: 12%; margin-left: -22px } #wv-chrome .mw-navigation-toggle span{ display: block !important; margin-bottom: 6px; border-top: 2px solid #252525; width: 20px; transition: all .3s ease-in-out } #wv-chrome .mw-active .mw-navigation-toggle span:first-child{ transform: rotate(45deg) translate(2px, 0); margin-bottom: 0 } #wv-chrome .mw-active .mw-navigation-toggle span:nth-child(3){ transform: scale(0, 1) } #wv-chrome .mw-active .mw-navigation-toggle span:nth-child(2){ transform: rotate(133deg) translate(-2px, 0); margin-bottom: 0 } #wv-chrome .mw-navigation-toggle{ text-align: center; display: inline-block; margin: 0 0; cursor: pointer; background: 0 0; vertical-align: middle; padding: 10px 8px 2px !important } #wv-chrome .mw-submenu{ box-shadow: unset; border-radius: 0; transform: unset; left: 0 } #wv-chrome .wv-header-two .mw-navigation-toggle span{ border-top: 2px solid #fff }} @media(max-width:768px){#wv-chrome .mw-menu-tabs:before{ z-index: 0 } #wv-chrome .mw-submenu{ padding: 0 0 28px; max-width: 100%; border-top: 1px solid #00000021 }} @media(max-width:450px){#wv-chrome .mw-submenu1 .wv-h3{ padding: 10px 18px 0 } #wv-chrome .mw-navigation-show{ top: 74px }} #wv-chrome .wv-header-two .na-menu-fix{ position: absolute; right: 0; left: 0; top: 0 } #wv-chrome .wv-header-two .na-menu-fix.mw-sticky{ position: fixed } #wv-chrome .wv-header-two .mw-logo2{ display: block } #wv-chrome .wv-header-two .mw-logo1{ display: none } #wv-chrome .wv-header-two .na-menu-fix .mw-menu-tabs, #wv-chrome .wv-header-two .na-menu-fix .mw-menu-tabs a{ color: #fff } #wv-chrome .wv-header-two .na-menu-fix.mw-sticky .mw-menu-login, #wv-ftr .wv-header-two .na-menu-fix.mw-sticky .mw-menu-login, #wv-chrome .wv-header-two .na-menu-fix.mw-sticky .mw-menu-tabs, #wv-chrome .wv-header-two .na-menu-fix.mw-sticky .mw-menu-tabs a{ color: var(--ttl_clr) } #wv-chrome .wv-header-two .na-menu-fix.mw-sticky{ background: #fff } #wv-chrome .wv-header-two .mw-menu-tab-dwn::after, #wv-chrome .wv-header-two .mw-menu-tab-dwn::before{ border-color: #fff } #wv-chrome .wv-header-two .na-menu-fix.mw-sticky .mw-menu-tab-dwn::after, #wv-chrome .wv-header-two .na-menu-fix.mw-sticky .mw-menu-tab-dwn::before{ border-color: #000 } #wv-chrome .wv-header-two .na-menu-fix.mw-sticky .mw-logo1{ display: block } #wv-chrome .wv-header-two .mw-menu-tabs:hover{ color: #afa0f9 !important } #wv-chrome .wv-header-two .mw-menu-tabs:hover .mw-navigation-show-a, #wv-ftr .wv-header-two .mw-menu-tabs:hover .mw-navigation-show-a{ color: #afa0f9 !important } #wv-chrome .wv-header-two .mw-sticky .mw-menu-tabs:hover{ color: #0435b2 !important } #wv-chrome .wv-header-two .mw-sticky .mw-menu-tabs:hover .mw-navigation-show-a, #wv-ftr .wv-header-two .mw-sticky .mw-menu-tabs:hover .mw-navigation-show-a{ color: #0435b2 !important } @media(max-width:994px){#wv-chrome .wv-header-two .na-menu-fix.mw-sticky .mw-navigation-toggle span{ border-color: #000 } #wv-chrome .wv-header-two .na-menu-fix .mw-menu-login, #wv-ftr .wv-header-two .na-menu-fix .mw-menu-login, #wv-chrome .wv-header-two .na-menu-fix .mw-menu-tabs, #wv-chrome .wv-header-two .na-menu-fix .mw-menu-tabs a{ color: var(--ttl_clr) } #wv-chrome .wv-header-two .mw-menu-tab-dwn::after, #wv-chrome .wv-header-two .mw-menu-tab-dwn::before{ border-color: var(--ttl_clr) }} #wv-ftr .f6yt-ftr-col-copy{ color: #d7d7d7; font-size: 11px } #wv-ftr .f0t3r_mncntnr{ padding: 50px 30px 10px } #wv-ftr .f67t3r-mnwrapr{ max-width: 1150px; margin: 0 auto; padding-top: 20px } #wv-ftr .f3t303r-r0w{ width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; padding: 0 40px; } #wv-ftr .f3t303r-r0w .f3t303r-col:not(:last-child){ margin-right: calc(80px / 3) } #wv-ftr ._f3t303r-list li{ margin: 10px 0; list-style: none } #wv-ftr ._f3t303r-list li a{ position: relative; color: #d7d7d7; font-size: 14px; transition: all .3s ease-in-out; display: inline-block; text-decoration: none } #wv-ftr ._f3t303r-list li a:hover{ color: #fff; } #wv-ftr ._f3t303r-list li a:before{ content: ""; position: absolute; width: 100%; height: 1px; border-radius: 5px; background-color: #fff; bottom: -2px; left: 0; transform-origin: right; transform: scaleX(0); transition: transform .3s ease-in-out; } #wv-ftr ._f3t303r-list li a:hover:before{ transform-origin: left; transform: scaleX(1) } #wv-ftr ._f3t303r-list li._f3t303r-h3ad{ color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 15px; text-transform: uppercase } #wv-ftr ._f3t303r-list:not(:last-child){ margin-bottom: 25px } #wv-ftr .f6yt-ftr-mnwrapr{ margin-top: 0px; display: flex; flex-flow: row wrap; justify-content: space-between } #wv-ftr .f6yt-ftr-mncol-logo{ max-width: 500px } #wv-ftr .f6yt-ftr-logo{ max-width: 157px; display: inline-block } #wv-ftr .f6yt-ftr-logo img{ display: block; width: 100% } #wv-ftr .f6yt-ftr-info{ font-size: 14px; color: #d7d7d7; margin-top: 10px } @media (max-width:920px){#wv-ftr .f6yt-ftr-col-copy{ width: 100% }} @media(max-width:750px){#wv-ftr .f6yt-ftr-mncol-logo, #wv-chrome .f6yt-ftr-mncol-payments, #wv-ftr .f6yt-ftr-mncol-payments{ max-width: 100%; }} @media(max-width:550px){#wv-ftr ._f3t303r-head-lihide:after{ transform: rotate(90deg); } #wv-ftr .f3t303r-col{ width: 100% } #wv-ftr .f3t303r-r0w{ justify-content: center } #wv-ftr .f3t303r-r0w .f3t303r-col:not(:last-child){ margin: 10px auto } #wv-ftr .f3t303r-r0w .f3t303r-col:not(:last-child){ margin: 0 }} @media(min-width:1650px){#wv-ftr .f67t3r-mnwrapr{ max-width: 1600px; padding: 20px 10px 0 10px }} #wv-ftr .f6yt-ftr-logo img{ display: block; width: 100% } #wv-ftr ._f87h-mnwrapr{ position: relative; margin-top: 32px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; padding-left: 35px } #wv-ftr ._f87h-mnwrapr:before{ content: ''; position: absolute; top: -20px; left: 34px; right: 0; height: 1px; background: #2D295E } #wv-ftr .f6yt-ftr-col-copy{ color: #d7d7d7; font-size: 11px } @media(max-width:550px){#wv-chrome [data-f3t303r-head], #wv-ftr [data-f3t303r-head]{ cursor: pointer; position: relative; padding-right: 20px } #wv-chrome [data-f3t303r-head]:after, #wv-ftr [data-f3t303r-head]:after, #wv-chrome [data-f3t303r-head]:before, #wv-ftr [data-f3t303r-head]:before{ content: ''; position: absolute; top: 8px; right: 0; width: 12px; height: 1px; background: #fff; transition: all .3s ease-in-out }} #wv-chrome [data-xf247-popup], #wv-ftr [data-xf247-popup]{ display: none } @media screen and (max-width:600px){#wv-ftr ._f87h-mnwrapr{ padding-left: 10px } #wv-ftr .f3t303r-r0w{ padding: 0 10px; }} #wv-chrome #tooltip, #wv-ftr #tooltip{ text-align: center; color: #f7fbff; background: #2f3c4b; position: absolute; z-index: 100; padding: 10px; cursor: pointer; font-size: 13px; border-radius: 3px } #wv-chrome #tooltip:after, #wv-ftr #tooltip:after{ width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #2f3c4b; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px } #wv-chrome #tooltip.top:after, #wv-ftr #tooltip.top:after{ border-top-color: transparent; border-bottom: 10px solid #2f3c4b; top: -20px; bottom: auto } #wv-chrome #tooltip.left:after, #wv-ftr #tooltip.left:after{ left: 10px; margin: 0 } #wv-chrome #tooltip.right:after, #wv-ftr #tooltip.right:after{ right: 10px; left: auto; margin: 0 } #wv-chrome i, #wv-ftr i{ font-size: 100% } #wv-chrome .ultrn-featrs-cntnr li .fa-star, #wv-ftr .ultrn-featrs-cntnr li .fa-star, #wv-chrome .ultrn-featrs-cntnr li .fa-star-half-alt, #wv-ftr .ultrn-featrs-cntnr li .fa-star-half-alt{ color: #f07a23 } #wv-chrome .ultrn-tag-bsln81 span i.fa-star, #wv-ftr .ultrn-tag-bsln81 span i.fa-star{ margin: 0; margin-top: -3px } #wv-chrome .ultrn-tag-bsln81 span i.fa-star:first-child, #wv-ftr .ultrn-tag-bsln81 span i.fa-star:first-child{ margin-right: 10px } #wv-chrome .ultrn-tag-bsln81 span i.fa-star:last-child, #wv-ftr .ultrn-tag-bsln81 span i.fa-star:last-child{ margin-left: 10px } @media screen and (max-width:850px){#wv-chrome .ultrn-tag-bsln81 span i.fa-star, #wv-ftr .ultrn-tag-bsln81 span i.fa-star{ margin-top: 0 } #wv-chrome .ultrn-tag-bsln81 span i.fa-star:first-child, #wv-ftr .ultrn-tag-bsln81 span i.fa-star:first-child{ margin-right: 5px } #wv-chrome .ultrn-tag-bsln81 span i.fa-star:last-child, #wv-ftr .ultrn-tag-bsln81 span i.fa-star:last-child{ margin-left: 5px }} @media(max-width:500px){#wv-chrome #tooltip, #wv-ftr #tooltip{ text-align: left; width: 200px }} @media(max-width:750px){#wv-chrome #tooltip_feb21, #wv-ftr #tooltip_feb21{ width: 200px; font-size: 13px; padding: 15px 10px }} #wv-chrome .uk-client-white .fff, #wv-ftr .uk-client-white .fff{ color: unset !important } #wv-chrome .uk-client-white .wv-container, #wv-ftr .uk-client-white .wv-container{ border-radius: 35px; background: #fff; padding: 55px 30px 0; margin-top: -150px } #wv-chrome .uk-client-white .wv-container, #wv-ftr .uk-client-white .wv-container{ padding: 55px 27px 0 } #wv-chrome .su-listen-fff .fff, #wv-ftr .su-listen-fff .fff{ color: unset !important } #wv-chrome .wh-boost .wv-container, #wv-ftr .wh-boost .wv-container{ border: 1px solid #e2e2e2; border-radius: 35px; margin-bottom: -79px; padding: 56px 44px 65px; position: relative; background: #fff; z-index: 1 } @media(max-width:1250px){#wv-chrome .wh-boost .wv-container, #wv-ftr .wh-boost .wv-container{ border-radius: 8px; padding: 34px 18px 40px }} @media(max-width:768px){#wv-chrome .wh-boost .wv-container, #wv-ftr .wh-boost .wv-container{ margin-bottom: 30px }} @media(min-width:1650px){#wv-chrome .wh-boost .wv-container, #wv-ftr .wh-boost .wv-container{ max-width: 1450px }} /* comum-origem.css */ #wv-chrome .wv-features .wv-container, #wv-ftr .wv-features .wv-container{ border-radius: 35px; background: #fff; margin-top: -60px; margin-bottom: -60px; position: relative; z-index: 1; } @media(max-width:1200px){#wv-chrome .wv-features .wv-container, #wv-ftr .wv-features .wv-container{ margin-top: 0; }} #wv-ftr .wv-logo-rodape{ max-width: none; line-height: 1; } #wv-ftr .wv-logo-rodape .wv-logo-tld{ opacity: .45; } #wv-ftr .wv-ftr-contacto-lnk{ display: block; color: inherit; text-decoration: none; padding: 2px 0; } #wv-ftr .wv-ftr-contacto-lnk:hover, #wv-ftr .wv-ftr-contacto-lnk:focus-visible{ text-decoration: underline; } #wv-ftr .wv-ftr-pagamentos{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #fff; font-size: 13px; } #wv-ftr .wv-ftr-pagamentos-ttl{ opacity: .7; } #wv-ftr .wv-ftr-pagamento{ border: 1px solid rgba(255, 255, 255, .25); border-radius: 5px; padding: 4px 10px; white-space: nowrap; } #wv-chrome .uk-client-box .wv-row.pb-90 > .wv-col-6 + .wv-col-6, #wv-ftr .uk-client-box .wv-row.pb-90 > .wv-col-6 + .wv-col-6{ display: none; } #wv-chrome .uk-client-box .wv-row.pb-90 > .wv-col-6:first-child, #wv-ftr .uk-client-box .wv-row.pb-90 > .wv-col-6:first-child{ width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; } /* home.css */ #wv-chrome .uk-stress>.wv-row>.wv-col-6, #wv-ftr .uk-stress>.wv-row>.wv-col-6{ padding: 0 } @media(max-width:768px){#wv-chrome .uk-stress>.wv-row>.wv-col-6:first-child, #wv-ftr .uk-stress>.wv-row>.wv-col-6:first-child{ display: none } #wv-chrome .uk-stress .wv-row .wv-col-6, #wv-ftr .uk-stress .wv-row .wv-col-6{ width: 50% } #wv-chrome .uk-stress>.wv-row>.wv-col-6, #wv-ftr .uk-stress>.wv-row>.wv-col-6{ width: 100% }} @media(max-width:550px){#wv-chrome .uk-stress .wv-row .wv-col-6, #wv-ftr .uk-stress .wv-row .wv-col-6{ width: 100% }} #wv-chrome .wh-boost .wv-container, #wv-ftr .wh-boost .wv-container{ margin-bottom: 0 } #wv-chrome .mw-menu{ padding-top: 10px } #wv-chrome .mw-sub-content-li{ position: relative } #wv-chrome .drop-link-sup-tt{ color: #fff; background: #556bd5; vertical-align: middle; font-size: 10px; padding: 5px 7px; border-radius: 3px; font-weight: 500; margin-left: 2px; border: none; display: inline-block } #wv-chrome .mw-menu-tabs{ padding: 38px 25px } @media (max-width:1400px){#wv-chrome .mw-menu-tabs{ padding: 25px 13px } #wv-chrome .mw-menu-tab-dwn::after, #wv-chrome .mw-menu-tab-dwn::before{ left: -1px } #wv-chrome .mw-menu-tabs::after{ bottom: 14px }} @media (min-width:995px){#wv-chrome .mw-submenu{ left: 52% }} #wv-chrome .mw-menu-left-2{ margin-right: 0 } #wv-chrome .mw-menu-logo-a{ position: relative } #wv-chrome .plansJmp>.title-center.wv-container, #wv-ftr .plansJmp>.title-center.wv-container{ display: none } #wv-ftr ._f87h-mnwrapr{ margin-top: 32px } #wv-chrome #mwshow_contact_popup, #wv-ftr #mwshow_contact_popup{ display: none } #wv-ftr .f0t3r_mncntnr{ background: #0f0d2c } #wv-ftr .f6yt-ftr-mncol-logo{ max-width: 300px } #wv-ftr .f6yt-ftr-col-copy{ padding: 0 0 20px } @media (max-width:920px){#wv-ftr .f6yt-ftr-col-copy{ width: 50% }} @media(max-width:854px){#wv-ftr .f3t303r-col1{ margin-bottom: 30px; width: 100%; flex-wrap: wrap; padding: 25px }} @media (max-width:725px){#wv-ftr .f6yt-ftr-col-copy{ width: 100%; padding: 5px 0 }} #wv-ftr .f6yt-ftr-add{ max-width: 250px; padding-bottom: 15px } #wv-ftr .f6yt-ftr-add-ttl{ font-size: 14px; font-weight: 400; color: #9d9cb5; position: relative; display: inline-block; padding-bottom: 20px } #wv-ftr .f6yt-ftr-add-ttl::before{ content: ""; position: absolute; width: 100%; height: 1px; background: #d6d5E485; bottom: 15px } #wv-ftr .f6yt-ftr-add-desc{ font-size: 14px; font-weight: 400; color: #9d9cb5; position: relative; display: inline-block; line-height: 1.5 } @media (max-width:994px){#wv-ftr .f3t303r-r0w{ justify-content: unset }} #wv-ftr .mw-ftr-copyright{ padding-left: 35px; font-size: 12px } @media(max-width:991px){#wv-ftr .mw-ftr-copyright{ padding-left: 4px }} #wv-chrome [data-t8p0p-popup=YES], #wv-ftr [data-t8p0p-popup=YES]{ cursor: pointer; border-bottom: 1px dotted; transition: all .3s ease-in-out } #wv-chrome [data-t8p0p-popup=YES]:hover, #wv-ftr [data-t8p0p-popup=YES]:hover{ color: #ea5a7c } /* menu.css */ #wv-chrome .mw-menu-tabs{ padding: 28px 20px; } #wv-chrome .wv-logo-texto, #wv-ftr .wv-logo-texto{ font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1; color: #152458; text-decoration: none; white-space: nowrap; } #wv-chrome .wv-logo-texto-branco, #wv-ftr .wv-logo-texto-branco{ color: #fff; } #wv-chrome .wv-logo-tld, #wv-ftr .wv-logo-tld{ opacity: .125; } @media (min-width: 995px){#wv-chrome .mw-menu{ padding-top: 0; }} @media (min-width: 995px) and (hover: hover) and (pointer: fine){#wv-chrome .mw-menu-dropdown:hover > .mw-submenu{ display: inline-block; } #wv-chrome .mw-menu-dropdown:hover .mw-menu-tab-dwn:before{ transform: rotateZ(226deg); top: 6px; } #wv-chrome .mw-menu-dropdown:hover .mw-menu-tab-dwn:after{ transform: rotateZ(221deg); top: 6px; }} #wv-chrome .mw-submenu{ width: max-content; min-width: 0; max-width: min(94vw, 1120px); left: 50%; right: auto; transform: translateX(-50%); top: calc(100% - 2px); padding: 26px 14px 20px; border-radius: 14px; box-shadow: 0 12px 34px rgba(15, 13, 44, .13); border: 1px solid #ecedf3; background: #fff; } #wv-chrome .mw-submenu1 .wv-row{ flex-wrap: nowrap; } #wv-chrome .mw-submenu1 .wv-col{ padding: 0 10px; min-width: 268px; max-width: 320px; } #wv-chrome .mw-submenu1 .wv-col + .wv-col{ border-left: 1px solid #f0f1f6; } #wv-chrome .mw-submenu1 .wv-h3{ font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #9a99ab; padding: 2px 12px 10px; margin: 0; } #wv-chrome .mw-sub-content-ul{ padding: 0; margin: 0; list-style: none; } #wv-chrome .mw-sub-content-li{ position: relative; padding: 9px 12px 9px 58px; border-radius: 9px; transition: background-color .15s ease; } #wv-chrome .mw-sub-ico{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 9px; background: #eef2fb; color: #3558ca; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; transition: background-color .15s ease, color .15s ease; } #wv-chrome .mw-sub-content-li:hover .mw-sub-ico{ background: #3558ca; color: #fff; } #wv-chrome .mw-sub-content-li:hover{ background: #f4f6fb; border-radius: 9px; } #wv-chrome .mw-sub-content-lnk{ display: inline; margin-bottom: 0; font-size: 15px; font-weight: 600; color: #1b1a3a; line-height: 1.35; position: static; } #wv-chrome .mw-sub-content-lnk::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } #wv-chrome .mw-sub-content-li{ cursor: pointer; } #wv-chrome .mw-sub-content-li:hover .mw-sub-content-lnk{ color: #0435b2; } #wv-chrome .mw-sub-content-li p{ width: auto; margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: #74738a; } #wv-chrome .drop-link-sup-tt{ display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-left: 7px; padding: 2px 7px; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .02em; border-radius: 4px; white-space: nowrap; } @media (max-width: 1400px){#wv-chrome .mw-submenu1 .wv-col{ min-width: 236px; } #wv-chrome .mw-submenu{ padding: 22px 10px 16px; }} @media (min-width: 995px) and (max-width: 1180px){#wv-chrome .mw-menu-dropdown{ position: static !important; } #wv-chrome .mw-navigation-show-ul{ position: relative; } #wv-chrome .mw-submenu{ left: 0; right: auto; transform: none; max-width: calc(100vw - 32px); animation-name: wv-submenu-entrada-esquerda; } @keyframes wv-submenu-entrada-esquerda{ from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }} @media (min-width: 995px){#wv-chrome .mw-submenu{ animation: wv-submenu-entrada .22s ease-out; } @keyframes wv-submenu-entrada{ from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }} @media (prefers-reduced-motion: reduce){#wv-chrome .mw-submenu, #wv-chrome .na-menu-fix, #wv-chrome .mw-sub-content-li, #wv-chrome .mw-sub-ico, #wv-chrome .mw-menu-tabs::after{ animation-duration: .01ms; transition-duration: .01ms; }} #wv-chrome .na-menu-fix{ transition: background-color .25s ease, box-shadow .25s ease; } #wv-chrome .mw-menu-tabs::after{ content: ''; position: absolute; left: 22px; right: 22px; bottom: 14px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform .2s ease; } #wv-chrome .mw-menu-tabs:focus-within::after{ transform: scaleX(1); } #wv-chrome .mw-menu-tabs:hover::after{ background: transparent; height: 0; } #wv-chrome .mw-menu-tabs a:focus-visible, #wv-chrome .mw-menu-logo-a:focus-visible, #wv-chrome .mw-menu-right-a2:focus-visible, #wv-ftr .mw-menu-right-a2:focus-visible{ outline: 2px solid #0435b2; outline-offset: 3px; border-radius: 4px; } #wv-chrome .na-menu-fix.mw-sticky .mw-menu-tabs a:focus-visible, #wv-chrome .na-menu-fix.mw-sticky .mw-menu-logo-a:focus-visible{ outline-color: #0435b2; } #wv-chrome .na-menu-fix:not(.mw-sticky) .mw-menu-tabs a:focus-visible, #wv-chrome .na-menu-fix:not(.mw-sticky) .mw-menu-logo-a:focus-visible, #wv-chrome .na-menu-fix:not(.mw-sticky) .mw-menu-right-a2:focus-visible, #wv-ftr .na-menu-fix:not(.mw-sticky) .mw-menu-right-a2:focus-visible{ outline-color: #fff; } #wv-chrome .wv-menu-selector-lnk:focus-visible{ outline: 2px solid #0435b2; outline-offset: -2px; border-radius: 4px; } @media (max-width: 1400px){#wv-chrome .mw-menu-tabs{ padding: 22px 13px; } #wv-chrome .mw-menu-tabs::after{ left: 13px; right: 13px; bottom: 10px; }} @media (max-width: 1024px){#wv-chrome .mw-menu-tabs{ padding: 20px 10px; } #wv-chrome .wv-logo-texto, #wv-ftr .wv-logo-texto{ font-size: 22px; } #wv-chrome .mw-menu-tabs::after{ left: 10px; right: 10px; bottom: 8px; }} #wv-chrome .wv-menu-entrar-li{ display: flex; align-items: center; padding: 0 4px; } #wv-chrome .wv-menu-entrar-btn{ display: inline-block; padding: 10px 26px; border-radius: 68px; background: #fb0; color: #152458; font-weight: 600; font-size: 14px; line-height: 1.1; text-decoration: none; transition: background-color .15s ease; } #wv-chrome .wv-menu-entrar-btn:hover, #wv-chrome .wv-menu-entrar-btn:focus-visible{ background: #ffca37; color: #152458; } #wv-chrome .wv-menu-entrar-btn:focus-visible{ outline: 2px solid #0435b2; outline-offset: 3px; } #wv-chrome .wv-menu-selector .mw-menu-tabs::before{ content: none; } #wv-chrome .wv-menu-selector-bandeira{ display: inline-block; width: auto; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); } #wv-chrome .wv-menu-selector-trigger{ align-items: center; } #wv-chrome .wv-menu-selector-trigger .wv-menu-selector-bandeira{ width: auto; height: 18px; margin-right: 7px; } #wv-chrome .wv-menu-selector-lingua-actual{ margin-left: 6px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #fff; } #wv-chrome .na-menu-fix.mw-sticky .wv-menu-selector-lingua-actual{ color: #1b1a3a; } #wv-chrome .wv-menu-selector-titulo{ margin: 6px 18px 2px; padding-top: 10px; border-top: 1px solid #eceef3; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a8fa3; } #wv-chrome .wv-menu-selector-list{ list-style: none; margin: 0; padding: 6px 0; min-width: 180px; } #wv-chrome .wv-menu-selector-lnk{ display: block; padding: 9px 18px; font-size: 14px; font-weight: 500; color: #1b1a3a; text-decoration: none; transition: background-color .15s ease, color .15s ease; } #wv-chrome .wv-menu-selector-item:hover .wv-menu-selector-lnk{ background: #f4f6fb; color: #0435b2; } #wv-chrome .wv-menu-selector-item-actual .wv-menu-selector-lnk{ color: #0435b2; font-weight: 700; cursor: default; pointer-events: none; } @media (min-width: 995px){#wv-chrome .wv-menu-selector .mw-submenu{ left: auto; right: 0; transform: none; width: max-content; min-width: 0; max-width: none; padding: 0; } #wv-chrome .wv-menu-selector .mw-submenu1{ padding: 0; } @keyframes wv-submenu-entrada-direita{ from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } #wv-chrome .wv-menu-selector .mw-submenu{ animation-name: wv-submenu-entrada-direita; }} @media (max-width: 994px){#wv-chrome .mw-menu-row{ align-items: center; } #wv-chrome .mw-menu-left{ align-items: center; } #wv-chrome .wv-logo-texto, #wv-ftr .wv-logo-texto{ font-size: 22px; } #wv-chrome .mw-navigation-show-ul{ height: auto; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-top: 4px; padding-bottom: 24px; } #wv-chrome .mw-navigation-show-ul > .wv-menu-selector{ display: none; } #wv-chrome .mw-menu-tabs{ padding: 15px 20px; font-size: 16px; justify-content: space-between; align-items: center; } #wv-chrome .mw-menu-tabs::after{ display: none; } #wv-chrome .mw-submenu{ position: static; width: auto; max-width: none; min-width: 0; transform: none; left: auto; right: auto; box-shadow: none; border: 0; border-radius: 0; padding: 2px 0 10px; background: #f8f9fc; } #wv-chrome .mw-submenu1 .wv-row{ flex-wrap: wrap; } #wv-chrome .mw-submenu1 .wv-col{ width: 100%; min-width: 0; max-width: none; border-left: 0; padding: 0 8px; } #wv-chrome .mw-submenu1 .wv-col + .wv-col{ margin-top: 10px; border-top: 1px solid #e9ebf2; padding-top: 12px; } #wv-chrome .mw-submenu1 .wv-h3{ padding: 12px 20px 6px; font-size: 12px; letter-spacing: .06em; } #wv-chrome .mw-sub-content-li{ padding: 12px 16px 12px 62px; } #wv-chrome .mw-sub-ico{ left: 18px; } #wv-chrome .mw-sub-content-li p{ display: none; } #wv-chrome .wv-menu-entrar-li{ padding: 10px 20px; justify-content: center; } #wv-chrome .wv-menu-entrar-btn{ display: block; width: 100%; text-align: center; padding: 13px 20px; } #wv-chrome .wv-menu-selector-list{ min-width: 0; padding: 4px 0 10px; } #wv-chrome .wv-menu-selector-lnk{ padding: 11px 20px; }} @media (min-width: 995px){#wv-chrome .mw-menu-right .wv-menu-selector-pais, #wv-chrome .wv-menu-entrar-li-icone{ display: none; }} @media (max-width: 994px){#wv-chrome .mw-menu{ overflow-x: clip; overflow-y: visible; } #wv-chrome .mw-menu-right .wv-menu-selector-pais{ display: flex; align-items: center; } #wv-chrome .mw-menu-right .wv-menu-selector-pais .mw-menu-tabs{ overflow: visible; padding: 8px 10px; } #wv-chrome .mw-menu-right .wv-menu-selector-pais .mw-submenu{ position: absolute; width: max-content; max-width: 86vw; min-width: 0; transform: none; left: auto; right: -10px; top: 100%; box-shadow: 1px 1px 18px 3px rgb(0 0 0 / 12%); border: 0; border-radius: 11px; padding: 0; background: #fff; } #wv-chrome .wv-menu-entrar-li-icone{ display: flex; align-items: center; padding: 0 4px; } #wv-chrome .wv-menu-entrar-btn-icone{ display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 13px; }} #wv-chrome .mw-menu-dropdown > .mw-menu-tabs:focus-visible, #wv-chrome .mw-navigation-toggle:focus-visible, #wv-chrome .mw-toggle:focus-visible{ outline: 2px solid #0435b2; outline-offset: 3px; border-radius: 3px; } #wv-chrome .na-menu-fix.mw-sticky .mw-menu-dropdown > .mw-menu-tabs:focus-visible, #wv-chrome .na-menu-fix.mw-sticky .mw-navigation-toggle:focus-visible{ outline-color: #fff; } /* ------------------------------------------------------------------ Daqui para baixo e escrito a mao: o que so o painel precisa. ------------------------------------------------------------------ */ /* A barra e position:fixed e esta fora do fluxo, por isso nao reserva espaco nenhum. No site quem o reserva e o banner escuro do topo; aqui nao ha banner, e sem esta reserva a barra tapava o titulo da pagina. Os tres valores sao a altura da barra em cada largura, e os cortes tem de ser os MESMOS do menu.css do site -- os dois descrevem a mesma barra, um o espacamento interior, o outro o espaco que esse espacamento deixa por baixo dela. */ body { padding-top: 72px; } @media (max-width: 1400px) { body { padding-top: 60px; } } @media (max-width: 1024px) { body { padding-top: 56px; } } /* O rodape do site encosta ao conteudo anterior; no painel o conteudo acaba num cartao do Bootstrap e ficavam colados. */ #wv-ftr { margin-top: 60px; } /* Avisos da conta, acrescentados a barra da direita. Herdam o tamanho e o alinhamento dos irmaos que ja la estavam (o selector de lingua e o botao de entrar), para nao desalinharem a linha. */ #wv-chrome .wv-menu-whmcs-li { display: flex; align-items: center; position: relative; } #wv-chrome .wv-menu-whmcs-lnk { display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 15px; line-height: 1; color: var(--ttl_clr); } #wv-chrome .wv-menu-whmcs-lnk:hover { color: #0435b2; } /* Ponto de aviso: ha notificacoes por ler. */ #wv-chrome .wv-menu-whmcs-ponto { position: absolute; top: -2px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #d60037; } /* O popover dos avisos e montado pelo JavaScript do WHMCS a partir deste bloco; ele proprio nunca deve aparecer na pagina. */ #wv-chrome #accountNotificationsContent { display: none; } /* O menu do site e o menu da area de cliente convivem na mesma pagina. O da area de cliente (#main-menu, do Bootstrap) fica logo abaixo da barra da marca, e sem isto os dois encostavam um ao outro. */ #main-menu { margin-bottom: 20px; } /* ------------------------------------------------------------------ Pagina de entrada. O visual desta pagina vinha todo de /static/css/cas-login.css, que nao existe na Weblink -- o formulario ficava em HTML nu. Nao ha folha equivalente em /assets/ para onde apontar, por isso esta escrita aqui, com as cores e o tipo de letra do site (as variaveis --ttl_clr e --sub_ttl_clr vem do :root das folhas do site, mais acima neste ficheiro). A marcacao do formulario nao foi tocada: sao as classes que ele ja tinha. ------------------------------------------------------------------ */ /* O espaco por baixo do cartao era 40px, e somava-se ao do rodape. Com os contentores desta pagina agora fechados, 16px chegam para o cartao nao encostar — mais do que isso volta a abrir a faixa que se via. */ #central-do-cliente { max-width: 460px; margin: 0 auto; padding: 10px 20px 16px; font-family: Ubuntu, Arial, sans-serif; } #central-do-cliente .form-login .inner { background: #fff; border: 1px solid #e4e6ef; border-radius: 10px; padding: 32px 28px; box-shadow: 0 2px 18px rgba(0, 0, 0, .05); } #central-do-cliente .login-title { font-size: 24px; font-weight: 500; color: var(--ttl_clr, #252C43); margin: 0 0 22px; text-align: center; } #central-do-cliente .form-group { margin-bottom: 18px; position: relative; } #central-do-cliente .input-label { display: block; font-size: 14px; font-weight: 500; color: var(--sub_ttl_clr, #3B3B55); margin-bottom: 6px; } #central-do-cliente .input-style { width: 100%; height: 44px; padding: 0 12px; font-size: 15px; font-family: inherit; color: var(--ttl_clr, #252C43); background: #fff; border: 1px solid #d4d7e3; border-radius: 6px; } #central-do-cliente .input-style:focus { border-color: #0435b2; outline: 2px solid rgba(4, 53, 178, .15); } /* O botao de mostrar a palavra-passe assenta dentro do campo, encostado a direita; o campo reserva-lhe o espaco para o texto nao passar por baixo. */ #central-do-cliente .input-password .input-style { padding-right: 82px; } #central-do-cliente .btn-password { position: absolute; right: 8px; bottom: 7px; height: 30px; padding: 0 10px; font-size: 13px; font-family: inherit; color: #0435b2; background: none; border: 0; cursor: pointer; } #central-do-cliente .btn-password:hover { text-decoration: underline; } #central-do-cliente .captcha-container { margin-bottom: 18px; } #central-do-cliente .submit-button { width: 100%; height: 46px; font-size: 16px; font-family: inherit; font-weight: 500; color: #fff; background: #0435b2; border: 0; border-radius: 6px; cursor: pointer; } #central-do-cliente .submit-button:hover { background: #032a8e; } #central-do-cliente .links-form { list-style: none; margin: 20px 0 0; padding: 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #central-do-cliente .btn-links-form { font-size: 14px; color: #0435b2; } #central-do-cliente .btn-links-form:hover { text-decoration: underline; } /* Os tres produtos por baixo do formulario. */ #central-do-cliente .cross-sell { margin-top: 40px; } #central-do-cliente .cross-sell-title { font-size: 20px; font-weight: 500; color: var(--ttl_clr, #252C43); text-align: center; margin-bottom: 22px; } #central-do-cliente .cross-sell-title .highlight { display: inline; color: #0435b2; } #central-do-cliente .list-products { list-style: none; margin: 0; padding: 0; } #central-do-cliente .product-section { border-top: 1px solid #e4e6ef; padding: 16px 0; } #central-do-cliente .product-title { font-size: 16px; font-weight: 500; color: var(--ttl_clr, #252C43); margin: 0 0 4px; } #central-do-cliente .product-description { font-size: 14px; color: var(--sub_ttl_clr, #3B3B55); margin: 0 0 6px; } #central-do-cliente .product-link { font-size: 14px; color: #0435b2; } #central-do-cliente .product-link:hover { text-decoration: underline; } /* --- fundo da pagina --- O tema do WHMCS traz `body { background-color: #f8f8f8 }` no all.min.css — um cinzento claro que aparecia por baixo do conteudo e ao lado do rodape. O site da Weblink nao define fundo nenhum no body: fica o branco do navegador, e e com esse que o cabecalho e o rodape foram desenhados. Esta folha carrega depois do all.min.css, por isso basta declarar; nao e preciso !important. */ body { background-color: #fff; } /* ================================================================== O MIOLO DA AREA DE CLIENTE ================================================================== Escrito a mao. Daqui para baixo nada e gerado. O cabecalho e o rodape ja eram do site; entre um e outro continuava o tema que veio na copia da Interweb Mocambique -- Bootstrap 3 de origem mais uma camada de vermelho #d60037, ciano #00acc8 e cinzento-escuro #1f2835 que sao as cores DESSA marca, nao desta. Esta folha carrega depois do all.min.css do WHMCS e depois do custom.css, por isso ganha por ordem de cascata com a mesma especificidade. Nao ha um unico !important aqui -- e onde houver, esta a razao escrita ao lado. Os seletores sao os do Bootstrap sem prefixo (.btn, .panel, .table...). Isso e seguro e foi verificado: das 122 classes que o cabecalho e o rodape usam nas paginas servidas, NENHUMA e um nome do Bootstrap -- o site usa a sua propria nomenclatura (.wv-, .mw-, .f6yt-, .f0t3r-). Logo estas regras nunca chegam ao #wv-chrome nem ao #wv-ftr. Os seletores de ELEMENTO, esses, chegariam; por isso vao presos a #main-body ou tem contrapartida no chrome com especificidade maior (#wv-chrome a, #wv-ftr a, ...). ------------------------------------------------------------------ */ /* --- a paleta e as medidas do site, num sitio so --- Tiradas de assets/css/{main-style,menu}.css do www.weblink.pt. As duas primeiras (--ttl_clr, --sub_ttl_clr) ja vem do :root do site, mais acima neste ficheiro; ficam aqui listadas em comentario para se ler a paleta inteira de uma vez. --ttl_clr #252C43 titulos --sub_ttl_clr #3B3B55 texto corrido */ :root { --wl-azul: #0435b2; /* accao primaria; e o azul do foco do site */ --wl-azul-2: #032a8e; /* o mesmo, carregado, para o hover */ --wl-amarelo: #fb0; /* o botao "Entrar" do cabecalho */ --wl-amarelo-2: #ffca37; /* hover do amarelo */ --wl-tinta-amarelo: #152458; /* texto por cima do amarelo */ --wl-escuro: #091437; /* o azul-noite do rodape */ --wl-borda: #e2e2e2; /* borda dos cartoes do site */ --wl-borda-2: #eceef5; /* divisorias interiores, mais leves */ --wl-campo: #d4d7e3; /* borda dos campos de formulario */ --wl-suave: #f5f7ff; /* fundo de cabecalho de caixa e de tabela */ --wl-verde: #13b763; /* estado positivo */ --wl-vermelho: #ff4546; /* estado negativo */ --wl-cinza: #9ba3c4; /* icones e texto de apoio */ --wl-raio: 8px; /* cartoes */ --wl-raio-2: 6px; /* botoes e campos */ } /* ------------------------------------------------------------------ 1. TIPOGRAFIA O painel vinha com o Helvetica/Arial do Bootstrap no corpo e o Raleway nos menus; o site e todo Ubuntu, e a Ubuntu ja esta carregada aqui em cima (32 @font-face vindos do ubuntu.css do site). Nao entra fonte nova. ------------------------------------------------------------------ */ body { font-family: Ubuntu, Arial, sans-serif; font-size: 15px; /* o site usa 15px; o Bootstrap trazia 14px */ color: var(--sub_ttl_clr); } /* Os titulos herdam a familia (o Bootstrap poe font-family:inherit em h1..h6), por isso so falta a cor e o peso. O site usa 700 nos titulos grandes e 600 nos pequenos. */ #main-body h1, #main-body h2, #main-body h3, #main-body h4, #main-body h5, #main-body h6 { color: var(--ttl_clr); line-height: 1.25; } #main-body h1, #main-body h2, #main-body h3 { font-weight: 700; } #main-body h4, #main-body h5, #main-body h6 { font-weight: 600; } #main-body h1 { font-size: 28px; } #main-body h2 { font-size: 23px; } #main-body h3 { font-size: 19px; } #main-body h4 { font-size: 17px; } #main-body h5 { font-size: 15px; } #main-body h6 { font-size: 14px; } @media (max-width: 768px) { #main-body h1 { font-size: 22px; } #main-body h2 { font-size: 19px; } #main-body h3 { font-size: 17px; } } /* ------------------------------------------------------------------ 2. CORES E LIGACOES ------------------------------------------------------------------ */ /* O azul do Bootstrap (#337ab7) nao existe no site. Seletor de elemento sem classe: 0,0,1. O cabecalho e o rodape tem o seu proprio `#wv-chrome a` (1,0,1) e nao sao tocados; os botoes tem `.btn-*` (0,1,0) e tambem nao. */ a { color: var(--wl-azul); } a:hover, a:focus { color: var(--wl-azul-2); text-decoration: none; } /* O sublinhado no hover so onde e a unica pista de que aquilo e uma ligacao: dentro de texto corrido, de avisos, de tabelas e nas migalhas. Nos botoes e nos separadores fica de fora de proposito. */ #main-body p a:hover, #main-body td a:hover, .alert a:hover, .breadcrumb a:hover, .btn-link:hover, .btn-link:focus { text-decoration: underline; } /* O foco pelo teclado tem de se ver. E o mesmo anel do site (menu.css, .wv-menu-entrar-btn:focus-visible). */ #main-body a:focus-visible, .btn:focus-visible, .list-group-item:focus-visible { outline: 2px solid var(--wl-azul); outline-offset: 2px; border-radius: 3px; } /* Largura do conteudo. O conteudo das paginas do site vive dentro de .wv-container: 1240px com 20px de respiro. (A barra do menu e o rodape tem largura propria -- 1550 e 1150 -- por serem faixas de ecra inteiro; a medida do CONTEUDO e 1240.) O miolo estava numa .container do Bootstrap: 1170px fixos acima de 1200px de ecra e degraus de 970 e 750 mais abaixo. Duas consequencias: nunca coincidia com a medida do site, e saltava de degrau em degrau enquanto o cabecalho e o rodape se moviam suavemente. Fluida ate 1240 acaba com os degraus e adopta a medida do site. Ate aos 1240px de ecra o conteudo fica encostado ao mesmo x que o logotipo. Os 20px batem certo: a .row do Bootstrap puxa -15 e a .col devolve +15, por isso o conteudo assenta exactamente nos 20px, como no site. */ #main-body > .container, #main-menu .container { width: auto; max-width: 1240px; padding-left: 20px; padding-right: 20px; } /* ------------------------------------------------------------------ 3. CABECALHO DA PAGINA E MIGALHAS ------------------------------------------------------------------ */ div.header-lined h1 { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--wl-borda); /* era #ccc */ font-weight: 700; color: var(--ttl_clr); /* era #058, azul do WHMCS */ } div.header-lined h1 small { margin-left: 10px; font-size: 15px; font-weight: 400; color: var(--sub_ttl_clr); } @media (max-width: 768px) { div.header-lined h1 small { display: block; margin: 6px 0 0; } } /* As migalhas eram a caixa cinzenta do Bootstrap. No site nao ha caixa nenhuma: e uma linha de texto pequena por baixo do titulo. */ .breadcrumb { padding: 0; margin-bottom: 18px; background: none; border-radius: 0; font-size: 13px; color: var(--sub_ttl_clr); } div.header-lined .breadcrumb { margin: -6px 0 20px; } .breadcrumb > li + li:before { padding: 0 8px; color: var(--wl-cinza); } .breadcrumb > .active { color: var(--sub_ttl_clr); } .breadcrumb a, div.header-lined .breadcrumb li a { color: var(--wl-azul); } /* ------------------------------------------------------------------ 4. BOTOES O site tem um so estilo de botao, o "Entrar" amarelo do cabecalho: cantos redondos, peso 600, sem borda visivel, e uma transicao curta. Os 9px de altura interior sao para o botao ficar com exactamente 40px -- a mesma altura dos campos, para nao desalinhar dentro de um input-group. ------------------------------------------------------------------ */ .btn { padding: 9px 18px; font-weight: 500; border-radius: var(--wl-raio-2); transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .btn-sm { padding: 5px 12px; font-size: 13px; } .btn-xs { padding: 2px 9px; font-size: 12px; } .btn-lg { padding: 13px 26px; font-size: 17px; border-radius: var(--wl-raio); } .btn-primary, .btn-primary:focus { color: #fff; background-color: var(--wl-azul); border-color: var(--wl-azul); } .btn-primary:hover, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: #fff; background-color: var(--wl-azul-2); border-color: var(--wl-azul-2); } .btn-default { color: var(--ttl_clr); background-color: #fff; border-color: var(--wl-campo); } .btn-default:hover, .btn-default:focus, .btn-default:active, .open > .dropdown-toggle.btn-default { color: var(--wl-azul); background-color: var(--wl-suave); border-color: var(--wl-azul); } .btn-success, .btn-success:focus { color: #fff; background-color: var(--wl-verde); border-color: var(--wl-verde); } .btn-success:hover, .btn-success:active, .btn-success.active { background-color: #0f9d53; border-color: #0f9d53; color: #fff; } .btn-danger, .btn-danger:focus { background-color: var(--wl-vermelho); border-color: var(--wl-vermelho); } .btn-danger:hover, .btn-danger:active { background-color: #e63536; border-color: #e63536; } .btn-info, .btn-info:focus { background-color: var(--wl-escuro); border-color: var(--wl-escuro); } .btn-info:hover, .btn-info:active { background-color: #142a63; border-color: #142a63; } .btn-warning, .btn-warning:focus { color: var(--wl-tinta-amarelo); background-color: var(--wl-amarelo); border-color: var(--wl-amarelo); } .btn-warning:hover, .btn-warning:active { color: var(--wl-tinta-amarelo); background-color: var(--wl-amarelo-2); border-color: var(--wl-amarelo-2); } .btn-link { color: var(--wl-azul); font-weight: 500; } /* O amarelo e a chamada a accao da marca e no site so aparece uma vez por ecra. Aqui fica reservado ao mesmo papel: encomendar e finalizar. Vem DEPOIS do .btn-success de proposito -- o botao "Encomendar" do carrinho traz as duas classes e e esta que tem de ganhar. */ ul.top-nav > li.primary-action > a.btn, .btn-order-now, #order-standard_cart .btn-checkout { color: var(--wl-tinta-amarelo); background-color: var(--wl-amarelo); border-color: var(--wl-amarelo); font-weight: 600; } ul.top-nav > li.primary-action > a.btn:hover, .btn-order-now:hover, .btn-order-now:focus, #order-standard_cart .btn-checkout:hover { color: var(--wl-tinta-amarelo); background-color: var(--wl-amarelo-2); border-color: var(--wl-amarelo-2); } /* ------------------------------------------------------------------ 5. CAIXAS E PAINEIS Os cartoes do site sao brancos, de canto 8px, com uma borda fina #e2e2e2 e sem sombra. Os do Bootstrap 3 tinham canto 4px e uma sombra cinzenta. ------------------------------------------------------------------ */ .panel, .card { margin-bottom: 16px; border: 1px solid var(--wl-borda); border-radius: var(--wl-raio); box-shadow: none; } .panel-heading, .card-header { padding: 12px 16px; border-bottom: 1px solid var(--wl-borda-2); border-radius: var(--wl-raio) var(--wl-raio) 0 0; } .panel-title, .card-title { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ttl_clr); } .panel-body, .card-body { padding: 16px; } .panel-footer { padding: 12px 16px; background-color: var(--wl-suave); border-top: 1px solid var(--wl-borda-2); border-radius: 0 0 var(--wl-raio) var(--wl-raio); } .panel-default, .panel-info, .panel-success, .panel-warning, .panel-danger { border-color: var(--wl-borda); } .panel-default > .panel-heading, .panel-info > .panel-heading { color: var(--ttl_clr); background-color: var(--wl-suave); border-color: var(--wl-borda-2); } .panel-primary { border-color: var(--wl-borda); } .panel-primary > .panel-heading { color: #fff; background-color: var(--wl-azul); border-color: var(--wl-azul); } .panel-primary > .panel-heading .panel-title { color: #fff; } /* A caixa lateral -- a "Ja Registado?" da pagina de registo. Era azul-escura com o texto branco (heranca da outra marca). Passa a ser a mesma caixa clara de todas as outras, com o icone a azul para nao ficar generico. */ .panel-sidebar { border-color: var(--wl-borda); font-size: 15px; } .panel-sidebar > .panel-heading { color: var(--ttl_clr); background-color: var(--wl-suave); border-bottom: 1px solid var(--wl-borda-2); } .panel-sidebar .panel-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ttl_clr); } .panel-sidebar .panel-heading i { color: var(--wl-azul); } .panel-sidebar .panel-minimise { color: var(--wl-cinza); } .well { padding: 18px; background-color: var(--wl-suave); border: 1px solid var(--wl-borda); border-radius: var(--wl-raio); box-shadow: none; } .list-group { margin-bottom: 0; } .list-group-item { padding: 12px 18px; font-size: 14px; color: var(--sub_ttl_clr); border-color: var(--wl-borda-2); } /* Dentro de um painel a lista encosta ao cabecalho e ao fundo do cartao; sao os cantos do cartao que mandam, nao os de cada item. */ .panel > .list-group > .list-group-item:first-child { border-top: 0; border-radius: 0; } .panel > .list-group > .list-group-item:last-child { border-bottom: 0; border-radius: 0 0 var(--wl-raio) var(--wl-raio); } a.list-group-item, button.list-group-item { color: var(--sub_ttl_clr); } a.list-group-item:hover, a.list-group-item:focus, button.list-group-item:hover { color: var(--wl-azul); background-color: var(--wl-suave); } .list-group-item > i, .list-group-item > .fas, .list-group-item > .far, .list-group-item > .fal { color: var(--wl-cinza); } a.list-group-item:hover > i, a.list-group-item:hover > .fas, a.list-group-item:hover > .far { color: var(--wl-azul); } .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus, .panel-sidebar a.list-group-item.active, .panel-sidebar a.list-group-item.active:hover, .panel-sidebar a.list-group-item.active:focus { color: #fff; background-color: var(--wl-azul); border-color: var(--wl-azul); } .list-group-item.active > i, .panel-sidebar a.list-group-item.active > i, .panel-sidebar a.list-group-item.active > .fas { color: #fff; } /* Os quatro mostradores do topo da area de cliente. Eram cinzento-escuro com hover vermelho; passam ao azul-noite do rodape com hover no azul. */ .tiles .tile { background-color: var(--wl-escuro); border-right: 1px solid rgba(255, 255, 255, .12); } .tiles .tile:hover { background-color: var(--wl-azul); } /* ------------------------------------------------------------------ 6. FORMULARIOS O molde e o campo que a pagina de entrada ja usa (#central-do-cliente .input-style, mais abaixo): 40px de altura, canto 6px, borda #d4d7e3 e um anel azul no foco. Os campos do resto do painel passam a ser iguais. ------------------------------------------------------------------ */ .form-control { height: 40px; padding: 8px 12px; font-size: 15px; color: var(--ttl_clr); border: 1px solid var(--wl-campo); border-radius: var(--wl-raio-2); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .form-control:focus { border-color: var(--wl-azul); box-shadow: 0 0 0 3px rgba(4, 53, 178, .12); } .form-control::placeholder { color: var(--wl-cinza); } textarea.form-control { height: auto; padding: 10px 12px; } select.form-control, .custom-select { height: 40px; } .form-control[disabled], .form-control[readonly] { background-color: #f4f5f9; color: #737a99; } label, .control-label { font-weight: 500; font-size: 14px; color: var(--sub_ttl_clr); } .help-block { font-size: 13px; color: #767ca0; } .input-group-addon { color: var(--sub_ttl_clr); background-color: var(--wl-suave); border-color: var(--wl-campo); border-radius: var(--wl-raio-2); } .has-error .form-control { border-color: var(--wl-vermelho); } .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(255, 69, 70, .15); } .has-error .control-label, .has-error .help-block, .has-error label { color: #d92c2d; } .has-success .form-control { border-color: var(--wl-verde); } .has-success .control-label, .has-success .help-block, .has-success label { color: #0d8b4b; } /* ------------------------------------------------------------------ 7. TABELAS Facturas, servicos, dominios: e o que um cliente mais olha. O cabecalho deixa de ser uma linha grossa cinzenta e passa a uma faixa clara. ------------------------------------------------------------------ */ .table { font-size: 14px; } .table > thead > tr > th { padding: 13px 12px; font-weight: 600; color: var(--ttl_clr); background-color: var(--wl-suave); border-top: 0; border-bottom: 1px solid var(--wl-borda); } .table > tbody > tr > td { padding: 13px 12px; color: var(--sub_ttl_clr); vertical-align: middle; border-top: 1px solid var(--wl-borda-2); } .table > tbody > tr:first-child > td { border-top: 0; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: #fafbff; } .table-hover > tbody > tr:hover { background-color: var(--wl-suave); } .table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th { border-color: var(--wl-borda-2); } /* Uma tabela dentro de um cartao nao precisa de borda propria em cima nem de cantos: sao os do cartao. */ .panel > .table:last-child > tbody > tr:last-child > td { border-bottom: 0; } /* ------------------------------------------------------------------ 8. AVISOS Os .alert do Bootstrap 3 sao caixas cor-de-rosa, verde-alface e amarelo-torrado de 2013. Passam a fundo muito claro, texto escuro legivel e uma barra de cor a esquerda a dizer de que tipo sao. ------------------------------------------------------------------ */ .alert { padding: 14px 18px; margin-bottom: 20px; font-size: 14px; color: var(--ttl_clr); border: 1px solid transparent; border-left-width: 4px; border-radius: var(--wl-raio); } .alert h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; color: var(--ttl_clr); } .alert p:last-child { margin-bottom: 0; } /* A lista de erros de validacao. O