/*! Theme Name: Suba Theme URI: https://suba.pt/ Author: Suba the Grouth Agency Author URI: https://suba.pt/ Description: Suba is a theme created by Suba Creative Agency Template: betheme Version: 2.0 */ :root { --main: #2A4F65 ; --sec: #85816F ; --light: #F6F5F2 ; --bege: #E5E3DC ; --container: 1240px ; } /* Sem scroll-behavior: smooth — o Lenis conduz o scroll e os dois em simultâneo dão saltos. As âncoras passam por lenis.scrollTo() em assets/js/animations.js. */ body { --mfn-column-gap-bottom: 0; font-family: var(--font-family-body); font-size: var(--font-size-p); font-style: normal; font-weight: 300; line-height: var(--font-line-height-p); } p { margin: 0; } .content_wrapper .button { margin: 0; } /******* HEADER *******/ .mfn-header-scrolled .mfn-header-main { opacity: 1 !important; display: block !important; transition: .3s ease-in-out; pointer-events: all !important; user-select: initial !important; } .home.mfn-header-scrolled .mfn-header-main { opacity: 0 !important; display: block !important; transition: .3s ease-in-out; pointer-events: none !important; user-select: none !important; } .home.mfn-header-scrolled .mfn-header-main.header-scrolled { display: block !important; pointer-events: all !important; user-select: initial !important; opacity: 1 !important; } .mfn-sidemenu-tmpl a.mfn-menu-link::before { content: ''; transition: .3s ease-in-out; width: 8px; height: 8px; background: var(--cores-preto-40); border-radius: 50px; opacity: 0; margin-left: -8px; scale: 0; } .mfn-sidemenu-tmpl .current-menu-item a { color: #000 !important; } .mfn-sidemenu-tmpl a.mfn-menu-link:hover::before { opacity: 1; margin-left: 10px; background: #000; margin-right: 12px; scale: 2; } .mfn-sidemenu-tmpl .mfn-sidemenu-menu li { align-items: center; /* centra verticalmente link + ícone */ } .mfn-sidemenu-tmpl .mfn-sidemenu-menu li > .outer-menu-sub { position: static; /* volta ao fluxo normal */ top: auto; right: auto; width: auto; /* estava fixo em var(--mfn-sidemenu-submenu-icon-width) */ margin-left: var(--space-m); /* o "gap" */ } .mfn-sidemenu-tmpl .mfn-sidemenu-menu li > .mfn-menu-link { flex-grow: 0; /* para o ícone ficar colado à label, não na extremidade direita */ } ul.sub-menu.mfn-submenu { padding-left: var(--space-m); } /* ==========================================================================================================================*/ /* ====================================================== VARIAVEIS =========================================================*/ /* ==========================================================================================================================*/ /* ====================================================== */ /* ======================= GERAIS ======================= */ /* ====================================================== */ :root { --font-family-body: "Inter", sans-serif; --font-family-title: "Inter", sans-serif; /* === Cores - Tons Preto === */ --cores-preto-00: #E6E6E6; --cores-preto-20: #D9D9D9; --cores-preto-40: #A6A6A6; --cores-preto-60: #7F7F7F; --cores-preto-80: #1C1C1C; /* === Cores - Base === */ --cores-base-principal: #696969; --cores-base-secundaria: #FF2E47; --cores-base-branco: #FFFFFF; --cores-base-cinza: #F4F4F4; --cores-base-preto: #000000; } /* @media only screen and (max-width: 1500px) { .grid-servicos .mfn-queryloop-item-wrapper .mcb-wrap-inner { padding: var(--space-m) } } */ /* ====================================================== */ /* ======================= DESKTOP ====================== */ /* ====================================================== */ :root { /* === Botões=== */ --botoes-padding-top-bot: 14px; --botoes-padding-left-right: 22px; /* === Font Size === */ --font-size-s1: 100px; --font-size-s2: 54px; --font-size-s3: 34px; --font-size-s4: 20px; --font-size-s5: 14px; --font-size-s6: 12px; --font-size-p: 18px; --font-size-btn: 20px; /* === Line Height === */ --font-line-height-s1: 120%; --font-line-height-s2: 120%; --font-line-height-s3: 140%; --font-line-height-s4: 150%; --font-line-height-s5: 150%; --font-line-height-s6: 150%; --font-line-height-p: 160%; --font-line-height-btn: 100%; /* === Border Radius === */ --border-radius-l: 0px; --border-radius-m: 0px; --border-radius-s: 0px; /* === Space === */ --space-xxl: 160px; --space-xl: 80px; --space-l: 48px; --space-m: 32px; --space-s: 24px; --space-xs: 16px; --space-xxs: 8px; --space-0: 0px; } /* ====================================================== */ /* ======================= LAPTOP ======================= */ /* ====================================================== */ @media only screen and (max-width: 1539px) { :root { /* Botões */ --botoes-padding-top-bot: 14px; --botoes-padding-left-right: 18px; /* Font Size */ --font-size-s1: 86px; --font-size-s2: 48px; --font-size-s3: 26px; --font-size-s4: 20px; --font-size-s5: 14px; --font-size-s6: 12px; --font-size-p: 16px; --font-size-btn: 20px; /* Border Radius */ --border-radius-l: 0px; --border-radius-m: 0px; --border-radius-s: 0px; /* === Space === */ --space-xxl: 140px; --space-xl: 64px; --space-l: 40px; --space-m: 28px; --space-s: 22px; --space-xs: 14px; --space-xxs: 8px; --space-0: 0px; } } /* ====================================================== */ /* ======================= TABLET ======================= */ /* ====================================================== */ @media only screen and (max-width: 1024px) { :root { /* Botões */ --botoes-padding-top-bot: 12px; --botoes-padding-left-right: 16px; /* Font Size */ --font-size-s1: 60px; --font-size-s2: 42px; --font-size-s3: 24px; --font-size-s4: 18px; --font-size-s5: 14px; --font-size-s6: 12px; --font-size-p: 16px; --font-size-btn: 18px; /* Border Radius */ --border-radius-l: 0px; --border-radius-m: 0px; --border-radius-s: 0px; /* === Space === */ --space-xxl: 120px; --space-xl: 52px; --space-l: 36px; --space-m: 26px; --space-s: 20px; --space-xs: 12px; --space-xxs: 6px; --space-0: 0px; } } /* ====================================================== */ /* ======================= MOBILE ======================= */ /* ====================================================== */ @media only screen and (max-width: 767px) { :root { /* Botões */ --botoes-padding-top-bot: 10px; --botoes-padding-left-right: 14px; /* Font Size */ --font-size-s1: 55px; --font-size-s2: 38px; --font-size-s3: 25px; --font-size-s4: 20px; --font-size-s5: 14px; --font-size-s6: 12px; --font-size-p: 16px; --font-size-btn: 16px; /* Border Radius */ --border-radius-l: 0px; --border-radius-m: 0px; --border-radius-s: 0px; /* === Space === */ --space-xxl: 100px; --space-xl: 48px; --space-l: 32px; --space-m: 24px; --space-s: 16px; --space-xs: 8px; --space-xxs: 4px; --space-0: 0px; } } /* ===============================================================================================================================*/ /* ====================================================== ESTILOS GERAIS =========================================================*/ /* ==============================================================================================================================*/ /* === ESTILOS PARAGRAFO === */ h1{ font-family: var(--font-family-title); font-size: var(--font-size-s1); font-style: normal; font-weight: 200; line-height: var(--font-line-height-s1); } h2{ font-family: var(--font-family-title); font-size: var(--font-size-s2); font-style: normal; font-weight: 200; line-height: var(--font-line-height-s2); } h3{ font-family: var(--font-family-title); font-size: var(--font-size-s3); font-style: normal; font-weight: 200; line-height: var(--font-line-height-s3); } h4{ font-family: var(--font-family-title); font-size: var(--font-size-s4); font-style: normal; font-weight: 300; line-height: var(--font-line-height-s4); } h5{ font-family: var(--font-family-body); font-size: var(--font-size-s5); font-style: normal; font-weight: 300; line-height: var(--font-line-height-s5); } h6{ font-family: var(--font-family-body); font-size: var(--font-size-s6); font-style: normal; font-weight: 300; line-height: var(--font-line-height-s6); } .list li, p{ font-family: var(--font-family-body); font-size: var(--font-size-p); font-style: normal; font-weight: 300; line-height: var(--font-line-height-p); } a{ font-family: var(--font-family-body); font-size: var(--font-size-btn); font-style: normal; font-weight: 300; line-height: var(--font-line-height-btn); } footer a, footer p { font-family: var(--font-family-body); font-size: var(--font-size-s6); font-style: normal; font-weight: 300; line-height: var(--font-size-s6); } footer .mfn-footer-menu { gap: calc(var(--space-xs) * 1.2); } footer .menu-item a { font-size: var(--font-size-s5); line-height: 100%; padding: 0 !important; text-underline-offset: 2px; width: fit-content; } footer .menu-item a:hover { text-decoration: underline; } .button { text-transform: uppercase; font-family: var(--font-family-body); font-size: var(--font-size-btn); font-style: normal; font-weight: 300; line-height: var(--font-line-height-btn); gap: var(--space-xxs); transition: .2s ease-in-out; } .button:hover { gap: var(--space-xs); } .button i.icon-dot { display: flex; align-items: center; justify-content: center; } .button i.icon-dot:before { content: ''; transition: .3s ease-in-out; width: 8px; height: 8px; background: var(--cores-preto-00); border-radius: 50px; } .button.button_theme i.icon-dot:before { background: var(--mfn-button-theme-icon-color); } .button.button_theme:hover i.icon-dot:before { background: var(--mfn-button-theme-icon-color-hover); } .button:hover i.icon-dot:before { transform: scale(2); } /* === CLASSES PARAGRAFOS === */ .s1, .s1 .title{ font-family: var(--font-family-title); font-size: var(--font-size-s1); font-style: normal; font-weight: 200; line-height: var(--font-line-height-s1); } .s2, .s2 .title{ font-family: var(--font-family-title); font-size: var(--font-size-s2); font-style: normal; font-weight: 200; line-height: var(--font-line-height-s2); } .s3, .s3 h2, .s3 .title{ font-family: var(--font-family-title); font-size: var(--font-size-s3); font-style: normal; font-weight: 200; line-height: var(--font-line-height-s3); } .s4, .s4 p, .s4 a, .s4 span, .s4 .title{ font-family: var(--font-family-body); font-size: var(--font-size-s4); font-style: normal; font-weight: 300; line-height: var(--font-line-height-s4); } .s4 p:not(:first-child){ margin-top: var(--space-xs); } .s5, .s5 p, .s5 h3, .s5 h2, .s5 .title_link{ font-family: var(--font-family-body) !important; font-size: var(--font-size-s5) !important; font-style: normal !important; font-weight: 300 !important; line-height: var(--font-line-height-s5) !important; } .s6, .s6 p, .s6 a { font-family: var(--font-family-body); font-size: var(--font-size-s6); font-style: normal; font-weight: 300; line-height: var(--font-line-height-s6); } .sp, .sp .title{ font-family: var(--font-family-body); font-size: var(--font-size-p); font-style: normal; font-weight: 300; line-height: var(--font-line-height-p); } .a{ font-family: var(--font-family-body); font-size: var(--font-size-btn); font-style: normal; font-weight: 300; line-height: var(--font-line-height-btn); text-transform: uppercase; } .s6-a a{ font-family: var(--font-family-body); font-size: var(--font-size-s6); font-style: normal; font-weight: 300; line-height: var(--font-size-s6); text-transform: none; text-decoration: underline 1px; text-underline-offset: 2px; } .s6-a a:hover{ color: var(--cores-marca-principal); text-decoration: underline 1px; text-underline-offset: 2px; } .s6-a h6, .s6-a a{ color: var(--cores-tons-preto-60); } /* === BORDER RADIUS === */ .br-l, .br-l img, .br-l .mcb-wrap-inner{ border-radius:var(--border-radius-l); } .br-m, .br-m img, .br-m .mcb-wrap-inner{ border-radius:var(--border-radius-m); } .br-s, .br-s img, .br-s .mcb-wrap-inner{ border-radius:var(--border-radius-s); } .br-top-s, .br-top-s img { border-radius:var(--border-radius-s) var(--border-radius-s) 0px 0px; } .br-top-l .mcb-wrap-inner, .br-top-l, .br-top-l img { border-radius: var(--border-radius-l) var(--border-radius-l) 0px 0px; } .br-bot-l .mcb-wrap-inner, .br-bot-l, .br-bot-l img { border-radius: 0px 0px var(--border-radius-l) var(--border-radius-l); } /* === GAP === */ .gap-xl, .gap-xl > .mcb-wrap-inner, .gap-xl > .mfn-queryloop-item-wrapper, .gap-xl > .section_wrapper{ gap: var(--space-xl); } .gap-l, .gap-l > .mcb-wrap-inner, .gap-l > .mfn-queryloop-item-wrapper, .gap-l > .section_wrapper{ gap: var(--space-l); } .gap-m, .gap-m > .mcb-wrap-inner,.gap-m > .mfn-queryloop-item-wrapper, .gap-m > .section_wrapper{ gap: var(--space-m); } .gap-s, .gap-s > .mcb-wrap-inner, .gap-s > .mfn-queryloop-item-wrapper, .gap-s > .section_wrapper{ gap: var(--space-s); } .gap-xs, .gap-xs .mcb-wrap-inner, .gap-xs .mfn-queryloop-item-wrapper, .gap-xs .section_wrapper{ row-gap: var(--space-xs); } .gap-xxs, .gap-xxs .mcb-wrap-inner, .gap-xxs .mfn-queryloop-item-wrapper, .gap-xxs .section_wrapper{ row-gap: var(--space-xxs); } .gap-xl::before, .gap-xl::after, .gap-xl > .mcb-wrap-inner::before, .gap-xl > .mcb-wrap-inner::after, .gap-xl > .mfn-queryloop-item-wrapper::before, .gap-xl > .mfn-queryloop-item-wrapper::after, .gap-xl > .section_wrapper::before, .gap-xl > .section_wrapper::after, .gap-l::before, .gap-l::after, .gap-l > .mcb-wrap-inner::before, .gap-l > .mcb-wrap-inner::after, .gap-l > .mfn-queryloop-item-wrapper::before, .gap-l > .mfn-queryloop-item-wrapper::after, .gap-l > .section_wrapper::before, .gap-l > .section_wrapper::after, .gap-m::before, .gap-m::after, .gap-m > .mcb-wrap-inner::before, .gap-m > .mcb-wrap-inner::after, .gap-m > .mfn-queryloop-item-wrapper::before, .gap-m > .mfn-queryloop-item-wrapper::after, .gap-m > .section_wrapper::before, .gap-m > .section_wrapper::after, .gap-s::before, .gap-s::after, .gap-s > .mcb-wrap-inner::before, .gap-s > .mcb-wrap-inner::after, .gap-s > .mfn-queryloop-item-wrapper::before, .gap-s > .mfn-queryloop-item-wrapper::after, .gap-s > .section_wrapper::before, .gap-s > .section_wrapper::after, .gap-xs::before, .gap-xs::after, .gap-xs > .mcb-wrap-inner::before, .gap-xs > .mcb-wrap-inner::after, .gap-xs > .mfn-queryloop-item-wrapper::before, .gap-xs > .mfn-queryloop-item-wrapper::after, .gap-xs > .section_wrapper::before, .gap-xs > .section_wrapper::after, .gap-xxs::before, .gap-xxs::after, .gap-xxs > .mcb-wrap-inner::before, .gap-xxs > .mcb-wrap-inner::after, .gap-xxs > .mfn-queryloop-item-wrapper::before, .gap-xxs > .mfn-queryloop-item-wrapper::after, .gap-xxs > .section_wrapper::before, .gap-xxs > .section_wrapper::after{ display: none; } /* ======= PADDINGS ========= */ /* == XL ==*/ .pd-top-xxxl{ padding-top: calc(var(--space-xxl) + 90px); } .pd-top-xxl{ padding-top: var(--space-xxl); } .pd-bot-xxl{ padding-bottom: var(--space-xxl); } .pd-left-xxl{ padding-left: var(--space-xxl); } .pd-right-xxl{ padding-right: var(--space-xxl); } /* == XL ==*/ .pd-top-xl{ padding-top: var(--space-xl); } .pd-bot-xl{ padding-bottom: var(--space-xl); } .pd-left-xl{ padding-left: var(--space-xl); } .pd-right-xl{ padding-right: var(--space-xl); } /* == L ==*/ .pd-top-l{ padding-top: var(--space-l); } .pd-bot-l{ padding-bottom: var(--space-l); } .pd-left-l { padding-left: var(--left-space-l); } .pd-right-l{ padding-right: var(--space-l); } /* == M ==*/ .pd-top-m{ padding-top: var(--space-m); } .pd-bot-m{ padding-bottom: var(--space-m); } .pd-left-m{ padding-left: var(--space-m); } .pd-right-m{ padding-right: var(--space-m); } /* == S ==*/ .pd-top-s{ padding-top: var(--space-s); } .pd-bot-s{ padding-bottom: var(--space-s); } .pd-left-s{ padding-left: var(--space-s); } .pd-right-s{ padding-right: var(--space-s); } /* == XS ==*/ .pd-top-xs{ padding-top: var(--space-xs); } .pd-bot-xs{ padding-bottom: var(--space-xs); } .pd-left-xs{ padding-left: var(--space-xs); } .pd-right-xs{ padding-right: var(--space-xs); } /* == XXS ==*/ .pd-top-xxs{ padding-top: var(--space-xxs); } .pd-bot-xxs{ padding-bottom: var(--space-xxs); } .pd-left-xxs{ padding-left: var(--space-xxs); } .pd-right-xxs{ padding-right: var(--space-xxs); } /* == GERAIS (toda a volta) == */ .pd-xxl { padding: var(--space-xxl); } .pd-xl { padding: var(--space-xl); } .pd-l { padding: var(--space-l); } .wrap .pd-l { padding: 0; } .wrap .pd-l > div { padding: var(--space-l); } .pd-m { padding: var(--space-m); } .wrap .pd-m { padding: 0; } .wrap .pd-m > div { padding: var(--space-m); } .pd-s { padding: var(--space-s); } .pd-xs { padding: var(--space-xs); } .pd-xxs { padding: var(--space-xxs); } .pd-0 { padding: var(--space-0); } /* == Padding 0 - Responsive == */ /* Tablet */ @media only screen and (max-width: 1024px) { .pd-top-0-t { padding-top: 0 !important; } .pd-bot-0-t { padding-bottom: 0 !important; } .pd-left-0-t { padding-left: 0 !important; } .pd-right-0-t { padding-right: 0 !important; } } /* Mobile */ @media only screen and (max-width: 767px) { .pd-top-0-m { padding-top: 0 !important; } .pd-bot-0-m { padding-bottom: 0 !important; } .pd-left-0-m { padding-left: 0 !important; } .pd-right-0-m { padding-right: 0 !important; } } /* ==========================================================================================================================*/ /* ========================================================== STP ===========================================================*/ /* ==========================================================================================================================*/ #Content {padding-top: 0px;} /* Scroll ellipse */ .scroll-ellipse { width: 252px !important; height: 252px; position: absolute; bottom: -125px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; } /* Contorno com gradiente no ::before para não afetar o texto interior. Só se vê a metade de cima da circunferência: sólido no topo e já transparente a meio. */ .scroll-ellipse::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1px; /* espessura do contorno */ /* background: linear-gradient(180deg, #676B6E 0%, rgba(103, 107, 110, 0) 50%) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; */ /* mask-composite: exclude; */ pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='252' viewBox='0 0 252 252' fill='none'%3E%3Ccircle cx='126' cy='126' r='125.5' stroke='url(%23paint0_linear_19375_2497)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_19375_2497' x1='126' y1='0' x2='126' y2='252' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23676B6E'/%3E%3Cstop offset='0.45' stop-color='%23676B6E' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); } .scroll-ellipse .column_attr, .scroll-ellipse p { font-family: var(--font-family-body); font-weight: 300; font-size: var(--font-size-s4); line-height: var(--font-line-height-btn); text-transform: uppercase; text-align: center; color: var(--cores-preto-40) !important; margin: 0; } .scroll-ellipse p { margin-top: -60px; } .grid-servicos::before, .grid-servicos::after { display: none; } .grid-servicos .mfn-queryloop-item-wrapper { width: calc(33.33% - (var(--space-xl) * 2 / 3)) !important; } /* Responsivo: 2 colunas em tablet, 1 em mobile (fórmula: (100% - (n-1)*gap) / n, com gap = var(--space-xl)) */ @media (max-width: 1024px) { .grid-servicos .mfn-queryloop-item-wrapper { width: calc(50% - (var(--space-xl) / 2)) !important; } } @media (max-width: 767px) { .grid-servicos .mfn-queryloop-item-wrapper { width: 100% !important; } } /* A coluna .video-mp4 existe só para transportar o URL do vídeo do serviço até ao JS (campo mfn-post-video_mp4 do CPT). Nunca é para ser vista — sem isto o endereço aparece como texto dentro do cartão. Escondida por CSS e não pelo módulo: assim não depende de a animação arrancar, nem de a classe do gatilho estar aplicada. */ .video-mp4 { display: none; } /* Vídeo do cartão de serviço, criado por assets/js/modules/service-video.js e sobreposto à imagem. A imagem fica por baixo: é ela que dá altura à caixa (o vídeo é absoluto) e serve de poster enquanto o ficheiro carrega. */ .grid-servicos .image_wrapper { position: relative; /* confina o mix-blend-mode abaixo a esta caixa, para não misturar com o resto da página */ isolation: isolate; } .suba-service-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: none; } /* O preto do vídeo é #000 e queremos #0c0c0c. Não se resolve com background-color: medido, o rgb(0,0,0) está nos PIXÉIS do vídeo, e o fundo do elemento já é transparente. Esta camada resolve-o com precisão: o lighten devolve o máximo canal a canal, portanto o preto puro sobe exatamente a #0c0c0c e tudo o que for mais claro do que isso fica intacto. */ .grid-servicos .image_wrapper::after { content: ""; position: absolute; inset: 0; background: #0c0c0c; mix-blend-mode: lighten; pointer-events: none; z-index: 1; } .grid-servicos .button { opacity: 0.5; } .full-link, .full-link * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } .grid-servicos .image_wrapper img { opacity: 0 !important; } .grid-servicos .mfn-queryloop-item-wrapper:hover .mcb-wrap-inner { border: 1px solid rgba(255, 255, 255, 0.30); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%) !important; } .grid-servicos .mfn-queryloop-item-wrapper:hover .image_wrapper::after { background: linear-gradient(180deg, rgb(10 10 10) 0%, rgb(4 4 4) 100%) !important; } /* Hover do card dispara o hover do botão */ .grid-servicos .mfn-queryloop-item-wrapper:hover .button { gap: var(--space-xs); opacity: 1; } .grid-servicos .mfn-queryloop-item-wrapper:hover .button i.icon-dot:before { transform: scale(2); } .counter.counter_horizontal .desc_wrapper { padding: var(--space-xs) 0; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--cores-preto-20, #D9D9D9); } .counter.counter_horizontal .desc_wrapper .number-wrapper { margin: 0 !important; } .chart_box .chart .num, .counter .desc_wrapper .number-wrapper, .how_it_works .image .number, .pricing-box .plan-header .price, .quick_fact .number-wrapper, .woocommerce .product div.entry-summary .price { color: var(--base-preto, var(--cores-base-preto, #000)); text-align: center; font-family: var(--font-family-body); font-size: var(--size-s2, 68px); font-style: normal; font-weight: 200; line-height: 120%; } .counter .desc_wrapper .number-wrapper .label { font-size: 100%; } #stp-counter .counter .desc_wrapper .title{ color: var(--cores-preto-60) !important; text-align: center; font-family: var(--font-family-body); font-size: var(--font-size-s4); font-style: normal; font-weight: 300; line-height: 150%; } #stp-counter .counter { padding: 0; min-height: auto; } .column_counter .mcb-item-counter-inner{ background-image: unset !important; } .grid-icons .wrap.one-fourth { width: calc(25% - (var(--space-l) * 3 / 4)) !important; height: 100%; } /* Responsivo: 2 colunas em tablet, 1 em mobile (fórmula: (100% - (n-1)*gap) / n, com gap = var(--space-l)) */ @media (max-width: 1024px) { .grid-icons .wrap.one-fourth { width: calc(50% - (var(--space-l) / 2)) !important; height: auto; /* anula o height:100% -> senão empilha à altura toda e transborda */ } } @media (max-width: 767px) { .grid-icons .wrap.one-fourth { width: 100% !important; } } @media screen and (min-width: 1441px) and (max-width: 1700px) { .grid-icons h3.title { font-size: calc(var(--font-size-s3) * 0.87); } } /* ---- SLIDER-ICONS: grelha .slider-icons convertida em slider (custom.js) ---- */ .slider-icons .mcb-wrap-inner { position: relative; } .slider-icons .swiper { width: 100%; } .slider-icons .swiper-slide { height: auto; display: flex; } /* o Swiper controla a largura -> anula o 25% fixo da grelha original */ .slider-icons .swiper .wrap.one-fourth { width: 100% !important; height: auto; margin: 0 !important; float: none !important; } /* Offset alternado por PARIDADE FIXA (classe atribuída em custom.js pelo índice original do cartão). Não usar :nth-child: com loop + centeredSlides o Swiper clona/reordena os slides, a posição no DOM muda e o odd/even trocava, causando saltos. A classe é copiada para os clones do loop. */ .slider-icons .swiper .swiper-slide.slider-icons-slide-even .wrap.one-fourth { margin-top: var(--space-m) !important; } /* setas */ .slider-icons .swiper-button-next, .slider-icons .swiper-button-prev { color: currentColor; } .slider-icons .swiper-button-next::after, .slider-icons .swiper-button-prev::after { display: none; } /* dots por baixo do slider */ .slider-icons .swiper-pagination { position: static; margin-top: var(--space-m); text-align: center; } /* quando os slides cabem todos, o Swiper "bloqueia": esconde setas/dots */ .slider-icons .swiper-button-lock, .slider-icons .swiper-pagination-lock { display: none !important; } /* .slider .swiper { overflow: hidden !important; } */ .slider-portfolio .mfn-queryloop-item-wrapper { padding: 0 var(--space-l) !important; } .slider-portfolio .swiper-slide { margin-right: 0 !important; } .slider-portfolio .swiper-slide .image_frame img { transition: 0.3s ease-in-out; } .slider-portfolio .swiper-slide:hover .image_frame img { scale: 1.06; } /* setas do slider: canto inferior direito, brancas, 52x52 */ .slider-portfolio { --suba-arrow-size: 52px; --suba-arrow-icon-w: 19px; --suba-arrow-gap: 24px; --suba-arrow-inset-x: var(--space-xl); --suba-arrow-inset-y: -80px; } .slider-portfolio .mcb-wrap-inner { position: relative; } /* fora os dois icones de origem (o do tema e o que o Swiper injeta): as setas sao desenhadas no ::before, mais abaixo */ .slider-portfolio .mfn-swiper-arrow i, .slider-portfolio .mfn-swiper-arrow .swiper-navigation-icon { display: none; } .slider-portfolio .mfn-swiper-arrow.swiper-button-prev, .slider-portfolio .mfn-swiper-arrow.swiper-button-next { position: absolute; top: auto; bottom: var(--suba-arrow-inset-y); left: auto; transform: none; margin: 0; width: var(--suba-arrow-size); height: var(--suba-arrow-size); display: flex; align-items: center; justify-content: center; color: #fff; border: 1px solid #fff; background: transparent; z-index: 10; transition: 0.3s ease-in-out; border-style: solid !important; } .slider-portfolio .mfn-swiper-arrow.swiper-button-next { right: var(--suba-arrow-inset-x); } .slider-portfolio .mfn-swiper-arrow.swiper-button-prev { right: calc(var(--suba-arrow-inset-x) + var(--suba-arrow-size) + var(--suba-arrow-gap)); } /* setas desenhadas por mask-image: seguem o currentColor, por isso a inversao no hover funciona sem precisar de uma segunda copia do SVG */ .slider-portfolio .mfn-swiper-arrow.swiper-button-prev::before, .slider-portfolio .mfn-swiper-arrow.swiper-button-next::before { content: ""; flex: none; width: var(--suba-arrow-icon-w); height: calc(var(--suba-arrow-icon-w) * 21 / 19); /* mantem o racio 19:21 do SVG */ background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .slider-portfolio .mfn-swiper-arrow.swiper-button-prev::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='21' viewBox='0 0 19 21' fill='none'%3E%3Cpath d='M18.8888 10.3555L18.8888 9.85553L0.707031 9.85547L0.707031 10.3555L0.707031 10.8555L18.8888 10.8555L18.8888 10.3555Z' fill='%23fff'/%3E%3Cpath d='M10.707 20.3555L0.707031 10.3555L10.707 0.355469' stroke='%23fff'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='21' viewBox='0 0 19 21' fill='none'%3E%3Cpath d='M18.8888 10.3555L18.8888 9.85553L0.707031 9.85547L0.707031 10.3555L0.707031 10.8555L18.8888 10.8555L18.8888 10.3555Z' fill='%23fff'/%3E%3Cpath d='M10.707 20.3555L0.707031 10.3555L10.707 0.355469' stroke='%23fff'/%3E%3C/svg%3E"); } .slider-portfolio .mfn-swiper-arrow.swiper-button-next::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='21' viewBox='0 0 19 21' fill='none'%3E%3Cpath d='M6.67572e-05 10.3554L6.67124e-05 10.8554L18.1819 10.8555L18.1819 10.3555L18.1819 9.85547L6.6802e-05 9.8554L6.67572e-05 10.3554Z' fill='%23fff'/%3E%3Cpath d='M8.18189 0.355467L18.1819 10.3555L8.18188 20.3555' stroke='%23fff'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='21' viewBox='0 0 19 21' fill='none'%3E%3Cpath d='M6.67572e-05 10.3554L6.67124e-05 10.8554L18.1819 10.8555L18.1819 10.3555L18.1819 9.85547L6.6802e-05 9.8554L6.67572e-05 10.3554Z' fill='%23fff'/%3E%3Cpath d='M8.18189 0.355467L18.1819 10.3555L8.18188 20.3555' stroke='%23fff'/%3E%3C/svg%3E"); } .slider-portfolio .mfn-swiper-arrow.swiper-button-prev:hover, .slider-portfolio .mfn-swiper-arrow.swiper-button-next:hover { background: #fff; color: var(--main); } /* acompanha o padding lateral dos slides em cada breakpoint e encolhe as setas em tablet e mobile */ @media only screen and (max-width: 1700px) { .slider-portfolio { --suba-arrow-inset-x: var(--space-l); } } @media only screen and (max-width: 1025px) { .slider-portfolio { --suba-arrow-inset-x: var(--space-m); --suba-arrow-size: 44px; --suba-arrow-icon-w: 16px; --suba-arrow-gap: 16px; } } @media only screen and (max-width: 767px) { .slider-portfolio { --suba-arrow-inset-x: var(--space-s); --suba-arrow-size: 38px; --suba-arrow-icon-w: 14px; --suba-arrow-gap: 12px; } } /* QUERY LOOP SEM RESULTADOS: esconde a section inteira Sem posts, o Betheme renderiza o template do loop uma vez sem contexto de post (class-mfn-builder-front.php:2920) e o resultado e o placeholder. Nesse caminho nao e emitido nenhum .mfn-queryloop-item-wrapper, ao contrario da classe .mfn-looped-items que esta sempre no wrap: uma section que contem um query loop mas nenhum item e uma section sem resultados. Nota: o :has() nao pode ser aninhado dentro de outro :has(), por isso as duas condicoes ficam ao mesmo nivel, na section. */ .mcb-section:has(.mfn-looped-items):not(:has(.mfn-queryloop-item-wrapper)) { display: none; } #footer p a { color: #000; } #footer p strong a { font-weight: 700; } .toggle-servicos .mfn-queryloop-item-wrapper { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .toggle-servicos-wrap-img * { height: 100%; } .toggle-servicos-img .image_frame { position: absolute; right: 0; top: calc( 0px - (var(--space-xl) + 20px)); width: 80%; height: calc(100% + var(--space-xl) + var(--space-xl) + 40px); } /* === Toggle: estado FECHADO (só título + ícone visíveis) === */ .toggle-servicos .mfn-queryloop-item-wrapper { cursor: pointer; } .toggle-servicos .mfn-queryloop-item-wrapper > div { opacity: .5; transition: opacity .4s ease; } /* descrição + botão: colapsam a ALTURA (0fr -> 1fr) em vez de display:none, para que a troca não dê salto — a altura da lista muda de forma contínua */ .toggle-servicos .mfn-queryloop-item-wrapper .column_column, .toggle-servicos .mfn-queryloop-item-wrapper .column_button { opacity: 0; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease, opacity .4s ease; } .toggle-servicos .mfn-queryloop-item-wrapper .column_column > .mcb-column-inner, .toggle-servicos .mfn-queryloop-item-wrapper .column_button > .mcb-column-inner { min-height: 0; overflow: hidden; } /* colapsa o espaçamento (gap) do conteúdo quando fechado, para não sobrar espaço vazio por baixo do título */ .toggle-servicos .mfn-queryloop-item-wrapper > .wrap:first-child > .mcb-wrap-inner { transition: gap .4s ease; padding-left: 60px; } /* numeração automática dos itens (01., 02., 03., ...) via CSS counter */ .toggle-servicos { counter-reset: servico; } .toggle-servicos .mfn-queryloop-item-wrapper { counter-increment: servico; } /* número (01, 02, ...) e ponto separados para poderem ter cores diferentes: número no ::before, ponto no ::after */ .toggle-servicos .mfn-queryloop-item-wrapper > .wrap:first-child > .mcb-wrap-inner::before, .toggle-servicos .mfn-queryloop-item-wrapper > .wrap:first-child > .mcb-wrap-inner::after { display: block; font-family: var(--font-family-body); font-size: var(--font-size-s4); font-style: normal; font-weight: 300; line-height: 150%; position: absolute; top: 8px; } .toggle-servicos .mfn-queryloop-item-wrapper > .wrap:first-child > .mcb-wrap-inner::before { content: counter(servico, decimal-leading-zero); color: var(--cores-preto-40); /* cor do número */ left: 0; } .toggle-servicos .mfn-queryloop-item-wrapper > .wrap:first-child > .mcb-wrap-inner::after { content: '.'; color: #fff; /* cor do ponto — muda para a que quiseres */ left: 2ch; /* logo a seguir aos 2 dígitos; afina se necessário */ } .toggle-servicos .mfn-queryloop-item-wrapper:not(.active) > .wrap:first-child > .mcb-wrap-inner { gap: 0 !important; } .toggle-servicos .mfn-queryloop-item-wrapper .toggle-servicos-wrap-img { opacity: 0; transition: opacity .4s ease; } /* === Toggle: estado ABERTO (.active) === */ .toggle-servicos .mfn-queryloop-item-wrapper.active { cursor: default; } .toggle-servicos .mfn-queryloop-item-wrapper.active > div { opacity: 1; } .toggle-servicos .mfn-queryloop-item-wrapper.active .column_column, .toggle-servicos .mfn-queryloop-item-wrapper.active .column_button { opacity: 1; grid-template-rows: 1fr; } .toggle-servicos .mfn-queryloop-item-wrapper.active .toggle-servicos-wrap-img { opacity: 1; } /* === Herói fixo por trás === Aplicado por assets/js/modules/hero-video.js. A secção sai do fluxo e fica colada ao viewport; o espaçador ocupa-lhe o lugar para o resto da página começar onde começava. As secções seguintes sobem por cima. */ /* Seletor pesado de propósito: o be.css:3174 tem `.section.has-video { position: relative }`, com especificidade 0,2,0, que ganharia a uma classe única. Sem isto o herói continuava a rolar com a página e o efeito não acontecia. */ #Content .section.suba-hero-fixed { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; /* atrás de tudo o que vem depois, mas ainda dentro do contexto da página */ z-index: 0; } .suba-hero-spacer { height: 100vh; /* não recebe cliques nem interfere com o que está por baixo */ pointer-events: none; } /* Coberto por completo: deixa de ser desenhado. Evita reaparecer por trás de uma secção transparente mais abaixo e poupa a composição do vídeo. */ #Content .section.suba-hero-fixed.suba-hero-gone { visibility: hidden; } /* Véu que escurece o herói com o scroll, para a secção preta que sobe por cima não entrar como uma parede. A opacidade é escrita a cada frame pelo módulo; sem transition, senão cada valor era re-animado por cima. */ .suba-hero-veil { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: none; will-change: opacity; /* acima do vídeo e do texto: o herói inteiro escurece junto */ z-index: 20; } /* As restantes secções passam para um plano acima do herói. Sem isto ficavam no mesmo plano e a ordem dependia da ordem no DOM. */ #Content .mcb-section:not(.suba-hero-fixed) { position: relative; z-index: 1; } /* === Cursor personalizado === Criado por assets/js/modules/cursor.js, que só arranca com ponteiro fino e sem prefers-reduced-motion. A classe .suba-cursor-on é posta no pelo módulo DEPOIS de os elementos existirem — se algo falhasse antes disso, o visitante ficaria sem cursor nenhum. */ html.suba-cursor-on, html.suba-cursor-on a, html.suba-cursor-on button, html.suba-cursor-on .button { cursor: none; } /* Campos de texto mantêm o cursor nativo: o I-beam diz onde o texto vai ser inserido, e isso um ponto não substitui. */ html.suba-cursor-on input, html.suba-cursor-on textarea, html.suba-cursor-on select, html.suba-cursor-on [contenteditable] { cursor: auto; } .suba-cursor-dot, .suba-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; /* abaixo da cortina do preloader, acima de tudo o resto */ z-index: 2147482000; border-radius: 50%; /* o posicionamento é escrito a cada frame pelo JS; uma transition aqui re-animaria cada valor e o cursor andaria atrasado do rato */ transition: none; will-change: transform; /* Inverte-se contra o que estiver por baixo: branco sobre fundo escuro, preto sobre fundo claro, sem ninguém ter de marcar secções. O difference devolve |fundo - branco| canal a canal, portanto preto vira branco, branco vira preto, e os tons intermédios dão o inverso. */ mix-blend-mode: difference; } .suba-cursor-dot { width: 6px; height: 6px; /* branco por causa do difference: é o branco que produz a inversão */ background: #fff; } .suba-cursor-ring { width: 34px; height: 34px; border: 1px solid #fff; /* Só a opacidade transiciona. A dimensão do anel chega aos 56px no hover, e quem a anima é o GSAP — não uma transition daqui. Uma transition de width/height entrava em conflito com o transform que o JS escreve a cada frame: dois relógios no mesmo elemento, o que se via como um tremor na borda. Também não é escala: o anel está promovido a camada por causa do transform da posição, e escalar uma camada estica o bitmap rasterizado aos 34px — a borda de 1px chegava aos 56px serrilhada. Mudar a largura obriga a rasterizar de novo, e a borda fica sempre com 1px real. */ transition: opacity .2s ease; } /* A centragem é feita no transform (xPercent/yPercent pelo JS) e não por margens negativas, pela mesma razão: uma margem a transicionar deslocava a caixa enquanto o transform a deslocava também. */ html.suba-cursor-hover .suba-cursor-ring { opacity: 0.6; } html.suba-cursor-hover .suba-cursor-dot { opacity: 0; } /* Rato fora da janela: sem isto ficavam os dois parados numa aresta, como se a página tivesse encravado. */ html.suba-cursor-out .suba-cursor-dot, html.suba-cursor-out .suba-cursor-ring { opacity: 0; } /* Os botões magnéticos são deslocados por transform a cada frame; qualquer transição por cima disso atrasa-os do cursor. */ .button, .mfn-swiper-arrow, .scroll-ellipse, .grid-servicos .mfn-queryloop-item-wrapper { will-change: transform; } /* === Galeria [galeria] === Dois layouts, escolhidos no shortcode: [galeria] --grid 2 colunas em loop 1, 2, 1, 2, ... A 1.ª de cada grupo de três ocupa a largura toda. Todas com altura fixa e recorte. [galeria masonry] --lead 1.ª imagem à largura toda, altura fixa --masonry restantes em 2 colunas, altura natural O masonry é feito com colunas CSS e não com grid: o grid precisa de saber as alturas para as alinhar, e é justamente isso que aqui não queremos. Nota do comportamento: as colunas CSS enchem a 1.ª de cima a baixo e só depois a 2.ª — a ordem é por coluna, não de leitura. */ .suba-galeria-item { overflow: hidden; } .suba-galeria-item a { display: block; } .suba-galeria-img { display: block; width: 100%; transition: transform .4s ease; } .suba-galeria-item:hover .suba-galeria-img { transform: scale(1.05); } /* ---- grelha clássica: 2 colunas, padrão 1 inteira + 2 a par ---- */ .suba-galeria--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } .suba-galeria--grid .suba-galeria-item:nth-child(3n + 1) { grid-column: 1 / -1; } /* órfã: se a linha de par (posição 3n+2) só tiver 1 imagem por ser a última, ocupa a largura toda em vez de ficar meia */ .suba-galeria--grid .suba-galeria-item:nth-child(3n + 2):last-child { grid-column: 1 / -1; } /* ---- altura fixa e recorte: grelha clássica e 1.ª imagem do masonry ---- */ .suba-galeria--grid .suba-galeria-item, .suba-galeria--lead .suba-galeria-item { height: 650px; } .suba-galeria--grid .suba-galeria-item a, .suba-galeria--grid .suba-galeria-img, .suba-galeria--lead .suba-galeria-item a, .suba-galeria--lead .suba-galeria-img { height: 100%; } .suba-galeria--grid .suba-galeria-img, .suba-galeria--lead .suba-galeria-img { object-fit: cover; } /* ---- restantes: masonry de 2 colunas, sem altura definida ---- */ .suba-galeria--masonry { columns: 2; column-gap: var(--space-xl); } .suba-galeria--masonry .suba-galeria-item { /* uma imagem nunca é partida entre o fundo de uma coluna e o topo da seguinte */ break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: var(--space-xl); } .suba-galeria--masonry .suba-galeria-img { /* altura natural: é isto que faz o masonry. O height:100% da versão anterior forçava todas ao mesmo tamanho. */ height: auto; } /* Espaço entre a 1.ª imagem e o masonry quando NÃO há texto. O espaçamento nunca esteve na estrutura: vinha das margens do bloco de texto, que fica entre as duas grelhas. Sem {content} esse bloco não é impresso e as duas ficavam encostadas — medido, 0px contra os 939px de uma galeria com texto. O seletor de irmão adjacente resolve isto sozinho: só casa quando o masonry vem logo a seguir ao lead, ou seja exatamente quando o texto falta. Com texto não se aplica e as margens dele continuam a mandar, sem somas nem duplicações. O espaço é --space-xl e não o --space-xxl que o bloco de texto usa: sem texto pelo meio, a pausa entre as duas grelhas quer-se mais curta. */ .suba-galeria--lead + .suba-galeria--masonry { margin-top: var(--space-xl); } /* bloco de texto ({content}), entre a 1.ª imagem e o masonry */ .suba-galeria-text { margin: var(--space-xxl) auto; max-width: 700px; color: #fff !important; } .suba-galeria-text p:not(:first-child) { margin-top: var(--space-xs); } /* A lista respira um pouco do que vem antes. O :not(:first-child) é a mesma guarda da regra acima: só há espaço a dar se houver alguma coisa por cima. Levantados os 18 projetos, só um tem lista na galeria e essa está entre parágrafos — mas a guarda cobre o dia em que uma abrir o bloco, e não custa nada. Só o topo: a margem de baixo fica como está. */ .suba-galeria-text ul:not(:first-child) { margin-top: 5px; } @media only screen and (max-width: 1441px) { .suba-galeria--grid .suba-galeria-item, .suba-galeria--lead .suba-galeria-item { height: 600px; } } @media only screen and (max-width: 1025px) { .suba-galeria--grid .suba-galeria-item, .suba-galeria--lead .suba-galeria-item { height: 450px; } } @media only screen and (max-width: 767px) { .suba-galeria--grid .suba-galeria-item, .suba-galeria--lead .suba-galeria-item { height: 280px; } /* uma coluna: em ecrãs estreitos duas colunas de masonry deixam as imagens pequenas de mais para se verem */ .suba-galeria--masonry { columns: 1; } } .slider-segmentos .mfn-queryloop-item-wrapper { padding-right:var(--space-xl) !important; } .slider-segmentos .swiper-slide:nth-child(odd) .mfn-queryloop-item-wrapper { padding-top: var(--space-m) !important; } .grid-portfolio > .mcb-wrap-inner { gap: var(--space-xl) var(--space-xl); display: flex; } .grid-portfolio .mfn-queryloop-item-wrapper { flex: 0 0 calc(50% - (var(--space-xl) * 1 / 2)); } .grid-portfolio .mfn-queryloop-item-wrapper:nth-child(2) { flex: 0 0 100%; } .grid-portfolio .mfn-queryloop-item-wrapper .image_frame img { transition: 0.3s ease-in-out; } .grid-portfolio .mfn-queryloop-item-wrapper:hover .image_frame img { scale: 1.06; } .wrap-projeto-info .wrap.pd-bot-s { padding-bottom: 0; } .wrap-projeto-info .wrap.pd-bot-s > div { padding-bottom: var(--space-s); } .wrap-projeto-info .wrap.pd-top-s { padding-bottom: 0; } .wrap-projeto-info .wrap.pd-top-s > div { padding-bottom: var(--space-s); } a.fixed-nav { display: none !important; } .wrap-img-gradient .mcb-wrap-background-overlay { z-index: 2; } .stp-toggle .toggle-content{ font-family: var(--font-family-body); font-size: var(--font-size-p); font-style: normal; font-weight: 300; line-height: var(--font-line-height-p); } .mfn-toggle-divider .toggle-divider { margin: var(--space-s) 0; background-color: #00000040 !important; } .mfn-toggle .toggle-bar { padding: 0px 0; } .mfn-toggle-item { padding: 0px var(--space-xxs); } .mfn-toggle .active .toggle-bar .plus { display: block !important; transform: rotate(180deg) !important; } .mfn-toggle-item:not(.active) { opacity: .5; } .mfn-toggle-item.active + .toggle-divider { background-color: #000 !important; } /* O risco do acordeão no tema escuro. ----------------------------------------------------------------------------- A troca de tema (site.js) escreve `color` e `borderColor` nos elementos que apanha pelas tabelas de pares — e este risco não é nem uma coisa nem outra: é um background-color num
. Ficava preto sobre fundo preto. Resolve-se em CSS, pela classe que a troca põe no body, como já acontece com os cartões do .grid-icons. Precisa de !important porque as duas regras acima também o usam, e de um seletor mais pesado para as vencer. */ body.suba-tema-escuro .mfn-toggle-divider .toggle-divider { background-color: #ffffff40 !important; } body.suba-tema-escuro .mfn-toggle-item.active + .toggle-divider { background-color: #fff !important; } /* O ícone do acordeão no tema escuro. ----------------------------------------------------------------------------- Mesmo caso do risco: a troca de tema não lhe chega. A cor sai de uma variável do Betheme — .mfn-toggle .toggle-icon i { color: var(--mfn-toggle-icon-color) } [toggle.css] — que resolve para rgb(22, 25, 34), o preto da paleta. Ficava preto sobre fundo preto. Redefine-se a VARIÁVEL e não a cor do : assim tudo o que dependa dela acompanha, incluindo estados que o tema possa vir a acrescentar, e não é preciso disputar especificidade com a regra do plugin. */ body.suba-tema-escuro .mfn-toggle { --mfn-toggle-icon-color: #fff; } .slider-empresas .mfn-queryloop-item-wrapper { padding: 0 16px; } .slider-empresas .column { display: flex; align-items: center; justify-content: center; } .slider-empresas img { filter: brightness(0) invert(1); transition: 0.3s ease-in-out; opacity: 0.5; max-height: 65px; } .slider-empresas a:hover img { opacity: 1; } /* Marquee contínuo: movimento a velocidade constante (sem ease entre slides). O JS (custom.js) liga o autoplay com delay:0 + speed alta; aqui garantimos o timing linear para não haver travagem/aceleração em cada transição. */ .slider-empresas .swiper-wrapper { transition-timing-function: linear !important; } .anim-video-full { overflow: hidden; } .wrap-contacto.pd-top-m { padding-top: 0; } .wrap-contacto.pd-top-m > div { padding-top: var(--space-m); } .wrap-contacto.pd-bot-m { padding-bottom: 0; } .wrap-contacto.pd-bot-m > div { padding-bottom: var(--space-m); } .wrap-contacto i.icon-dot:before { content: ''; transition: .3s ease-in-out; width: 8px; height: 8px; background: var(--cores-preto-40); border-radius: 50px; } .mfn-column-absolute > .mcb-column-inner.mcb-item-heading-inner { overflow: hidden; backdrop-filter: blur(4px); } .mcb-column.column_breadcrumbs .breadcrumbs li, .mcb-column.column_breadcrumbs .breadcrumbs li * { font-family: var(--font-family-body, Inter); font-size: var(--font-size-s5, 14px); font-style: normal; font-weight: 300; line-height: 150%; } .mcb-column.column_breadcrumbs .breadcrumbs li:last-child { color: #000 !important; } span.mfn-breadcrumbs-separator { margin: 0 var(--space-xs); } .icon-number strong { color: #000 !important; font-weight: 400 !important; } /* FORM WHITE */ .form-white .wpforms-field{ padding-top: 0px; padding-bottom: 25px; } .form-white .wpforms-container{ margin-top: 0px; margin-bottom: 0px; } .form-white .wpforms-field-layout{ padding-top: 0px; padding-bottom: 0px; } .form-white .wpforms-container-full input[type=date], .form-white .wpforms-container-full input[type=datetime], .form-white .wpforms-container-full input[type=datetime-local], .form-white .wpforms-container-full input[type=email], .form-white .wpforms-container-full input[type=month], .form-white .wpforms-container-full input[type=number], .form-white .wpforms-container-full input[type=password], .form-white .wpforms-container-full input[type=range], .form-white .wpforms-container-full input[type=search], .form-white .wpforms-container-full input[type=tel], .form-white .wpforms-container-full input[type=text], .form-white .wpforms-container-full input[type=time], .form-white .wpforms-container-full input[type=url], .form-white .wpforms-container-full input[type=week], .form-white .wpforms-container-full textarea { background-color: transparent !important; border-radius: 0px !important; border: 0px solid rgba(255,255,255,0.5) !important; border-bottom: 1px solid rgba(255,255,255,0.5) !important; outline: unset !important; box-shadow: unset !important; color: var(--cores-base-branco, #FFF) !important; font-family: var(--font-family-body); font-size: var(--font-size-btn, 18px); font-style: normal; font-weight: 300; line-height: 100%; } .form-white .wpforms-container-full input[type=date]:focus, .form-white .wpforms-container-full input[type=datetime]:focus, .form-white .wpforms-container-full input[type=datetime-local]:focus, .form-white .wpforms-container-full input[type=email]:focus, .form-white .wpforms-container-full input[type=month]:focus, .form-white .wpforms-container-full input[type=number]:focus, .form-white .wpforms-container-full input[type=password]:focus, .form-white .wpforms-container-full input[type=range]:focus, .form-white .wpforms-container-full input[type=search]:focus, .form-white .wpforms-container-full input[type=tel]:focus,.form-white .wpforms-container-full input[type=text]:focus, .form-white .wpforms-container-full input[type=time]:focus, .form-white .wpforms-container-full input[type=url]:focus, .form-white .wpforms-container-full input[type=week]:focus, .form-white .wpforms-container-full select:focus, .form-white .wpforms-container-full textarea:focus { border: 0px solid var(--cores-base-branco, #FFF) !important; border-bottom: 1px solid var(--cores-base-branco, #FFF) !important; box-shadow: unset !important; outline: none !important; color: var(--cores-base-branco, #FFF) !important; } .form-white .wpforms-container-full input::placeholder, .form-white .wpforms-container-full textarea::placeholder { color: var(--cores-base-branco, #FFF) !important; opacity: 0.5 !important; font-family: var(--font-family-body); font-size: var(--font-size-btn, 18px); font-style: normal; font-weight: 300; line-height: 100%; } /* A seta do select vive no bloco "SETA DOS SELECTS", no fim do ficheiro. Ficava aqui um losango feito de dois linear-gradient. */ .form-white .wpforms-container-full select { color: var(--cores-base-branco, #FFF); background-color: transparent !important; border-radius: 0px !important; border: 0px solid rgba(255,255,255,0.5) !important; border-bottom: 1px solid rgba(255,255,255,0.5) !important; outline: unset !important; box-shadow: unset !important; font-family: var(--font-family-body) !important; font-size: var(--font-size-btn, 18px) !important; font-weight: 300 !important; line-height: 100% !important; } /* placeholder do select (opção vazia selecionada): mesma cor esbatida dos placeholders dos inputs. :invalid cobre selects required; :has é o fallback. */ .form-white .wpforms-container-full select:invalid, .form-white .wpforms-container-full select:has(option.placeholder:checked) { color: rgba(255,255,255,0.5) !important; } .form-white .wpforms-container-full input[type=checkbox]:focus:before, .form-white .wpforms-container-full input[type=radio]:focus:before { border: 0.6px solid var(--cores-base-branco, #FFF) !important; box-shadow: unset !important; } .form-white .wpforms-container-full input[type=checkbox]:checked:before, .form-white .wpforms-container-full input[type=radio]:checked:before { border-color: var(--cores-base-branco, #FFF) !important; box-shadow: unset !important; } .form-white .wpforms-container-full input[type=checkbox]:checked:after { height: calc(var(--wpforms-field-size-checkbox-size)* 0.6); border-left: 2px solid var(--cores-base-branco, #FFF) !important; border-bottom: 2px solid var(--cores-base-branco, #FFF) !important; width: 16px !important; height: 9px !important; top: -2px; left: -2px; } .form-white .wpforms-container-full input[type=checkbox]:before, .form-white .wpforms-container-full input[type=radio]:before { border-color: rgba(255,255,255,0.5) !important; background-color: transparent !important; } .form-white div.wpforms-container-full .wpforms-field-label { color: var(--cores-base-branco, #FFF); font-family: var(--font-family-body); font-size: var(--font-size-btn, 18px); font-style: normal; font-weight: 300; line-height: 100%; } .form-white .wpforms-field-gdpr-checkbox label, .form-white .wpforms-field.wpforms-field-gdpr-checkbox label, .form-white .wpforms-field.wpforms-field-gdpr-checkbox label a { color: var(--cores-preto-40) !important; } .form-white .wpforms-field-gdpr-checkbox a:hover{ color: var(--cores-base-branco, #FFF) !important; } .form-white div.wpforms-container-full .wpforms-form label.wpforms-error, .form-white div.wpforms-container-full .wpforms-form em.wpforms-error { color: #ff6b6b !important; font-size: 12px; padding: 0px !important; } /* botão: base copiada de .button; fundo branco/texto preto, hover fundo preto/texto branco. Em ambos os estados mantém border 1px branco. */ body .form-white div.wpforms-container-full button { justify-content: center !important; text-align: center !important; width: 100% !important; height: auto !important; box-shadow: unset; cursor: pointer; position: relative; text-decoration: none; text-transform: uppercase; font-family: var(--font-family-body); font-size: var(--font-size-btn); font-style: normal; font-weight: 300; line-height: var(--font-line-height-btn); gap: var(--space-xxs); transition: .3s ease-in-out; background-color: var(--cores-base-branco, #FFF) !important; color: var(--cores-base-preto, #000) !important; border: 1px solid var(--cores-base-branco, #FFF) !important; border-radius: 50px !important; padding: var(--botoes-padding-top-bot) var(--botoes-padding-left-right); } body .form-white div.wpforms-container-full button:hover{ background-color: var(--cores-base-preto, #000) !important; color: var(--cores-base-branco, #FFF) !important; border: 1px solid var(--cores-base-branco, #FFF) !important; } .form-white .wpforms-uploader.dz-clickable { border: 1px solid rgba(255,255,255,0.5) !important; border-radius: 0 !important; background: transparent !important; padding: var(--space-m) 0; } .form-white .wpforms-confirmation-container-full { background: transparent !important; border: 0 !important; border-radius: 0 !important; } .form-white .wpforms-confirmation-container-full p { color: var(--cores-base-branco, #FFF) !important; } /* FORMS — espaçamento por grid (substitui o padding por campo) */ .wpforms-container .wpforms-field { padding: 0 !important; } .wpforms-container .wpforms-field-container { display: grid; gap: var(--space-l); } /* Layout de colunas (wpforms-field-layout): mesmo gap do grid, tanto entre colunas (horizontal) como entre campos empilhados dentro de cada coluna (vertical). O campo de layout não acrescenta espaçamento próprio. */ .wpforms-container .wpforms-field-layout { padding: 0 !important; } .wpforms-container .wpforms-field-layout-columns { gap: var(--space-l) !important; } .wpforms-container .wpforms-layout-column { display: flex; flex-direction: column; row-gap: var(--space-l); } .wpforms-container .wpforms-layout-column > .wpforms-field { margin: 0 !important; } .wpforms-submit-container { padding: 0 !important; margin-top: var(--space-m) !important; } div.wpforms-container-full .wpforms-field.wpforms-field-gdpr-checkbox ul li { align-items: center !important; } div.wpforms-container-full .wpforms-field.wpforms-field-gdpr-checkbox ul li input { margin-top: 0 !important; } .btn-sec .button{ padding: var(--botoes-padding-top-bot, 14px) var(--botoes-padding-left-right, 22px); justify-content: center; align-items: center; border: 1px solid var(--cores-base-branco, #FFF); border-radius: 0px; background-color: transparent; color: white; } .btn-sec .button:hover{ background-color: white; color: black; } .btn-main .button{ padding: var(--botoes-padding-top-bot, 14px) var(--botoes-padding-left-right, 22px); justify-content: center; align-items: center; border: 1px solid black; border-radius: 0px; background-color: transparent; color: black; } .btn-main .button:hover{ background-color: black; color: white; } #ini-sec-1 .section_wrapper, #ini-sec-2 .section_wrapper, #sob-sec-2 .section_wrapper, #sob-sec-3 .section_wrapper, #ser-sec-5 .section_wrapper { display: flex; flex-direction: row; column-gap: var(--space-xl); } #ini-sec-1 .mcb-wrap, #ini-sec-2 .mcb-wrap, #sob-sec-2 .mcb-wrap, #ser-sec-5 .mcb-wrap { width: calc(33.33% - (var(--space-xl) * 2 / 3)); } #sob-sec-3 .col-1 { width: calc(33.33% - (var(--space-xl) * 2 / 3)); } #sob-sec-3 .col-2 { width: calc(66.66% - (var(--space-xl) * 2 / 3)); } #con-sec-1-col-2 .mcb-wrap-inner{ gap: var(--space-l); /* background-color: red; */ } #con-sec-1-col-2 .mcb-wrap-inner .wrap .mcb-wrap-inner { gap: var(--space-ssx); /* background-color: blue; */ } #con-sec-1 .col-1, #con-sec-1 .col-2, #con-sec-1 .col-3, #con-sec-1 .col-4{ width: calc(50% - (var(--space-l) * 1 / 2)); } #Content { overflow: hidden; } .mcb-section .mcb-wrap .mcb-item-gt4u84a .image_frame.mfn-coverimg .image_wrapper img { object-fit: contain; } /* FORM DARK */ .form-dark .wpforms-field{ padding-top: 0px; padding-bottom: 25px; } .form-dark .wpforms-container{ margin-top: 0px; margin-bottom: 0px; } .form-dark .wpforms-field-layout{ padding-top: 0px; padding-bottom: 0px; } .form-dark .wpforms-container-full input[type=date], .form-dark .wpforms-container-full input[type=datetime], .form-dark .wpforms-container-full input[type=datetime-local], .form-dark .wpforms-container-full input[type=email], .form-dark .wpforms-container-full input[type=month], .form-dark .wpforms-container-full input[type=number], .form-dark .wpforms-container-full input[type=password], .form-dark .wpforms-container-full input[type=range], .form-dark .wpforms-container-full input[type=search], .form-dark .wpforms-container-full input[type=tel], .form-dark .wpforms-container-full input[type=text], .form-dark .wpforms-container-full input[type=time], .form-dark .wpforms-container-full input[type=url], .form-dark .wpforms-container-full input[type=week], .form-dark .wpforms-container-full textarea { background-color: transparent !important; border-radius: 0px !important; border: 0px solid rgba(0,0,0,0.5) !important; border-bottom: 1px solid rgba(0,0,0,0.5) !important; outline: unset !important; box-shadow: unset !important; color: var(--cores-base-preto, #000) !important; font-family: var(--font-family-body); font-size: var(--font-size-btn, 18px); font-style: normal; font-weight: 300; line-height: 100%; } .form-dark .wpforms-container-full input[type=date]:focus, .form-dark .wpforms-container-full input[type=datetime]:focus, .form-dark .wpforms-container-full input[type=datetime-local]:focus, .form-dark .wpforms-container-full input[type=email]:focus, .form-dark .wpforms-container-full input[type=month]:focus, .form-dark .wpforms-container-full input[type=number]:focus, .form-dark .wpforms-container-full input[type=password]:focus, .form-dark .wpforms-container-full input[type=range]:focus, .form-dark .wpforms-container-full input[type=search]:focus, .form-dark .wpforms-container-full input[type=tel]:focus,.form-dark .wpforms-container-full input[type=text]:focus, .form-dark .wpforms-container-full input[type=time]:focus, .form-dark .wpforms-container-full input[type=url]:focus, .form-dark .wpforms-container-full input[type=week]:focus, .form-dark .wpforms-container-full select:focus, .form-dark .wpforms-container-full textarea:focus { border: 0px solid var(--cores-base-preto, #000) !important; border-bottom: 1px solid var(--cores-base-preto, #000) !important; box-shadow: unset !important; outline: none !important; color: var(--cores-base-preto, #000) !important; } .form-dark .wpforms-container-full input::placeholder, .form-dark .wpforms-container-full textarea::placeholder { color: var(--cores-base-preto, #000) !important; opacity: 0.5 !important; font-family: var(--font-family-body); font-size: var(--font-size-btn, 18px); font-style: normal; font-weight: 300; line-height: 100%; } .form-dark .wpforms-container-full input[type=checkbox]:focus:before, .form-dark .wpforms-container-full input[type=radio]:focus:before { border: 0.6px solid var(--cores-base-preto, #000) !important; box-shadow: unset !important; } .form-dark .wpforms-container-full input[type=checkbox]:checked:before, .form-dark .wpforms-container-full input[type=radio]:checked:before { border-color: var(--cores-base-preto, #000) !important; box-shadow: unset !important; } .form-dark .wpforms-container-full input[type=checkbox]:checked:after { height: calc(var(--wpforms-field-size-checkbox-size)* 0.6); border-left: 2px solid var(--cores-base-preto, #000) !important; border-bottom: 2px solid var(--cores-base-preto, #000) !important; width: 16px !important; height: 9px !important; top: -2px; left: -2px; } .form-dark .wpforms-container-full input[type=checkbox]:before, .form-dark .wpforms-container-full input[type=radio]:before { border-color: rgba(0,0,0,0.5) !important; background-color: transparent !important; } /* botão: base copiada de .button; fundo preto/texto branco, hover fundo branco/texto preto. Em ambos os estados mantém border 1px preto. (mesma lógica do .form-white) */ body .form-dark div.wpforms-container-full button { justify-content: center !important; text-align: center !important; width: 100% !important; height: auto !important; box-shadow: unset; cursor: pointer; position: relative; text-decoration: none; text-transform: uppercase; font-family: var(--font-family-body); font-size: var(--font-size-btn); font-style: normal; font-weight: 300; line-height: var(--font-line-height-btn); gap: var(--space-xxs); transition: .3s ease-in-out; background: var(--cores-base-preto, #000) !important; color: var(--cores-base-branco, #FFF) !important; border: 1px solid var(--cores-base-preto, #000) !important; border-radius: 50px !important; padding: var(--botoes-padding-top-bot) var(--botoes-padding-left-right); } body .form-dark div.wpforms-container-full button:hover{ background: var(--cores-base-branco, #FFF) !important; color: var(--cores-base-preto, #000) !important; border: 1px solid var(--cores-base-preto, #000) !important; } .form-dark .wpforms-field-gdpr-checkbox label, .form-dark .wpforms-field.wpforms-field-gdpr-checkbox label, .form-dark .wpforms-field.wpforms-field-gdpr-checkbox label a { color: var(--cores-preto-40) !important; } .form-dark .wpforms-field-gdpr-checkbox a:hover{ color: var(--cores-base-preto, #000) !important; } .form-dark div.wpforms-container-full .wpforms-form label.wpforms-error, .form-dark div.wpforms-container-full .wpforms-form em.wpforms-error { color: #c12626 !important; font-size: 12px; padding: 0px !important; } div.wpforms-container-full .wpforms-form label.wpforms-error:before, div.wpforms-container-full .wpforms-form em.wpforms-error:before { display: none; } .form-dark .wpforms-confirmation-container-full { background: transparent !important; border: 0 !important; border-radius: 0 !important; } .form-dark .wpforms-confirmation-container-full p { color: var(--cores-base-preto, #000) !important; } .form-dark .wpforms-container-full select { color: var(--cores-base-preto, #000); background-color: transparent !important; border-radius: 0px !important; border: 0px solid rgba(0,0,0,0.5) !important; border-bottom: 1px solid rgba(0,0,0,0.5) !important; outline: unset !important; box-shadow: unset !important; font-family: var(--font-family-body) !important; font-size: var(--font-size-btn, 18px) !important; font-weight: 300 !important; line-height: 100% !important; } /* placeholder do select (opção vazia selecionada): mesma cor esbatida dos placeholders dos inputs. :invalid cobre selects required; :has é o fallback. */ .form-dark .wpforms-container-full select:invalid, .form-dark .wpforms-container-full select:has(option.placeholder:checked) { color: rgba(0,0,0,0.5) !important; } .form-dark div.wpforms-container-full .wpforms-field-label { color: var(--cores-base-preto, #000); font-family: var(--font-family-body); font-size: var(--font-size-btn, 18px); font-style: normal; font-weight: 300; line-height: 100%; } .form-dark div.wpforms-container div.wpforms-uploader span.modern-title { color: var(--cores-base-preto, #000) !important; } div.wpforms-container-full .wpforms-field-file-upload .wpforms-uploader .dz-message .modern-hint { display: none; } div.wpforms-container div.wpforms-uploader .dz-message svg { width: 25px !important; height: 25px !important; display: none; } div.wpforms-container div.wpforms-uploader span.modern-title { color: var(--cores-base-cinza) !important; font-family: var(--font-family-body); font-size: var(--font-size-s6); font-style: normal; font-weight: 300; } span.wpforms-required-label { display: none; } .wpforms-uploader.dz-clickable { border: 1px solid #00000080 !important; border-radius: 0 !important; } .wpforms-field.wpforms-field-gdpr-checkbox { padding-bottom: 0 !important; } .wpforms-field.wpforms-field-gdpr-checkbox label { font-family: var(--font-family-body) !important; font-size: var(--font-size-s6, 12px) !important; font-style: normal !important; font-weight: 300 !important; line-height: var(--font-height-s6, 12px) !important; } div.wpforms-container-full input[type=checkbox]:before, div.wpforms-container-full input[type=checkbox]:after, div.wpforms-container-full input[type=radio]:before, div.wpforms-container-full input[type=radio]:after { width: 14px !important; height: 14px !important; border-radius: 0 !important; } .wpforms-container-full .wpforms-confirmation-container-full{ width: fit-content !important; background-color: var(--cores-preto-20) !important; margin: 0px !important; } .wpforms-container-full .wpforms-confirmation-container-full p{ color: black !important; font-size: var(--font-size-s5) !important; } /* ========================================================================== FOOTER — form de newsletter (scoped a .mfn-footer p/ diferenciar dos outros) Ref.: Figma 18832-2717 - o botão fica AO LADO da política (não por baixo); - o botão tem estilo próprio: link sublinhado, uppercase, cinza. ========================================================================== */ /* Email a full-width; política + botão na mesma linha. Achatamos os wrappers do WPForms (.wpforms-field-container e .wpforms-submit-container) com display:contents para que o email, a política e o botão passem a ser irmãos no mesmo flex — só assim o botão (que vive num container separado) consegue ficar ao lado da política. */ .mfn-footer .wpforms-form { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-m); row-gap: var(--space-s); } .mfn-footer .wpforms-form .wpforms-field-container, .mfn-footer .wpforms-form .wpforms-submit-container { display: contents; } .mfn-footer .wpforms-form .wpforms-field-email { flex: 0 0 100%; } /* base 0 + min-width:0 -> a política não "reserva" a largura da frase numa linha (o seu max-content). Assim o botão fica sempre ao lado e o texto da política quebra dentro do espaço disponível, em vez de empurrar o botão. */ .mfn-footer .wpforms-form .wpforms-field-gdpr-checkbox { flex: 1 1 0; min-width: 0; margin: 0 !important; } /* Botão do footer: link sublinhado, uppercase, cinza (tons-preto/40). Especificidade alta de propósito para vencer os botões do form-white/dark. */ body .mfn-footer div.wpforms-container-full button.wpforms-submit { flex: 0 0 auto; /* nunca encolhe; mantém-se ao lado da política */ white-space: nowrap; /* o texto do botão não quebra internamente */ width: auto !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--cores-preto-40, #A6A6A6) !important; border-radius: 0 !important; padding: var(--space-xxs) 0 !important; color: var(--cores-preto-40, #A6A6A6) !important; font-family: var(--font-family-body); font-size: 16px; font-weight: 300; line-height: 1; text-transform: uppercase; transition: .3s ease-in-out; } body .mfn-footer div.wpforms-container-full button.wpforms-submit:hover { background: transparent !important; color: var(--cores-base-preto, #000) !important; border-bottom-color: var(--cores-base-preto, #000) !important; } .text-politica h2, .text-politica h3, .text-politica h4, .text-politica h5 { color: #000; margin-top: var(--space-s); } .text-politica p:not(:first-child) { margin-top: var(--space-xs); } /* Responsivo: a política passa a 100% -> empurra o botão para a linha de baixo, sozinho e alinhado à esquerda (o botão mantém flex:0 0 auto = largura do conteúdo, e por defeito encosta ao início da linha). */ @media (max-width: 1024px) { .mfn-footer .wpforms-form .wpforms-field-gdpr-checkbox { flex: 1 1 100%; } body .mfn-footer div.wpforms-container-full button.wpforms-submit { align-self: flex-start; /* garante encosto à esquerda */ } } #header-menu .mfn-header-menu > .mfn-menu-li > .mfn-menu-link{ color: var(--base-preto, var(--cores-base-preto, #000)); font-family: var(--family-body, Manrope); font-size: var(--size-btn, 18px); font-style: normal; font-weight: 400; line-height: 100%; /* 18px */ padding-bottom: 4px; padding-top: 4px; padding-left: 0px; padding-right: 0px; border-bottom: solid 1px transparent; } #header-menu .mfn-header-menu > .mfn-menu-li > .mfn-menu-link:hover{ border-bottom: solid 1px black; } #header-menu .mcb-column-inner .mfn-header-menu{ gap: var(--space-m); } #header-menu .current-menu-item a{ border-bottom: solid 1px black; } .menu-right .mfn-header-menu > .mfn-menu-li:last-child a{ display: flex; padding: 12px 18px !important; justify-content: center; align-items: center; border: 1px solid var(--cores-base-preto, #000) !important; } .menu-right .mfn-header-menu > .mfn-menu-li:last-child a:hover{ color: white !important; background-color: black; border: 1px solid var(--cores-base-preto, #000) !important; } .mfn-header-scrolled .mfn-header-main { background: #ffffff !important; } #header-stp .section_wrapper .one-third{ width: 33%; } #header-stp .image_frame .image_wrapper, .mcb-section .mcb-wrap .mcb-item-nwsifq0b .image_frame{ overflow: visible; } #header-stp .mfn-header-menu { align-items: center; } .menu-preto .mcb-column-inner .mfn-header-menu li a{ color: white !important; } .menu-preto .mcb-column-inner .mfn-header-menu li a:hover{ border-color: white !important; } .menu-right.menu-preto .mfn-header-menu > .mfn-menu-li:last-child a{ border-color: white !important; } .menu-right.menu-preto .mfn-header-menu > .mfn-menu-li:last-child a:hover{ color: black !important; background-color: white !important; } .current-menu-item a{ border-color: black !important; } .menu-preto .current-menu-item a{ border-color: white !important; } .grad-b .mcb-background-overlay{ background: #00000000; background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 100%); } .swiper { overflow: inherit !important; } header .mcb-column-inner { margin-left: 0 !important; margin-right: 0 !important; } .whatsapp { position: fixed !important; opacity: 0; transition: .3s ease-in-out; } body.mfn-header-scrolled .whatsapp { opacity: 1; } .mfn-popup-tmpl .wpforms-container textarea.wpforms-field-medium { height: 80px !important; } .mfn-popup-tmpl .wpforms-container .wpforms-field-container { gap: var(--space-m); } .mfn-popup-tmpl .wpforms-container .wpforms-field-layout-columns { gap: var(--space-m) !important; } .mfn-popup-tmpl .wpforms-container .wpforms-layout-column { row-gap: var(--space-m); } .mfn-popup-tmpl .mfn-popup-tmpl-content { max-height: 92vh; } @media only screen and (max-width: 1700px) { .slider-portfolio .mfn-queryloop-item-wrapper { padding: 0 var(--space-l) !important; } } @media only screen and (max-width: 1441px) and (min-width: 1025px) { #mfn-sidemenu-tmpl-378 { --mfn-sidemenu-width: 600px !important; } .slider-portfolio .mfn-queryloop-item-wrapper { padding: 0 var(--space-l) !important; } } @media only screen and (max-width: 1025px) { .mfn-header-tmpl .mcb-header-section > .section_wrapper { flex-direction: row-reverse; } .mcb-section.wrap-reverse > .mcb-section-inner, .mcb-wrap.column-reverse > .mcb-wrap-inner { flex-direction: column-reverse; } #ini-sec-1 .section_wrapper, #ini-sec-2 .section_wrapper, #ser-sec-5 .section_wrapper{ flex-direction: column; row-gap: var(--space-xl); } #ini-sec-1 .mcb-wrap, #ini-sec-2 .mcb-wrap, #ser-sec-5 .mcb-wrap{ width: 100%; } #con-sec-1 .col-1, #con-sec-1 .col-2, #con-sec-1 .col-3, #con-sec-1 .col-4{ width: 100%; } #header-stp .section_wrapper .one-third{ width: 100%; } #menu-mobile li a{ padding: 0px !important; color: var(--base-branco, var(--cores-base-branco, #FFF)); font-family: var(--family-body, Manrope); font-size: var(--size-s2, 28px); font-style: normal; font-weight: 300; line-height: 160%; } .mfn-header-menu > .mfn-menu-li > .mfn-menu-link { justify-content: left !important; } .mfn-close-icon .icon{ font-weight: 200; font-family: var(--font-family-body); font-style: normal; } .slider-portfolio .mfn-queryloop-item-wrapper { padding: 0 var(--space-m) !important; } } @media only screen and (max-width: 767px) { .mfn-popup-tmpl .mfn-popup-tmpl-content section.section.mcb-section { padding: var(--space-m); } .mfn-sidemenu-tmpl a.mfn-menu-link:hover::before { width: 6px; height: 6px; margin-right: 10px; margin-left: 8px; display: none; } .grid-portfolio .mfn-queryloop-item-wrapper { flex: 100%; } ul.sub-menu.mfn-submenu { padding-left: var(--space-s); } .slider-portfolio .mfn-queryloop-item-wrapper { padding: 0 var(--space-s) !important; } .button i.icon-dot:before { width: 6px; height: 6px; margin-right: 3px; } .mfn-footer-tmpl .mcb-section:not(.full-width), .content_wrapper .section_wrapper, .container, .four.columns .widget-area { max-width: 550px !important; padding-left: 16px; padding-right: 16px; } .full-width-ex-mobile .section_wrapper { padding: 0 !important; } .content_wrapper .mcb-column-inner{margin:0 0 0px} #sob-sec-2 .col-1 { display: none; } #sob-sec-2 .col-2 { display: none; } #sob-sec-2 .col-3 { width: 100%; } #sob-sec-3 .col-1 { display: none; } #sob-sec-3 .col-2 { width: 100%; } #header-stp{ max-width: 550px !important; padding-left: 16px; padding-right: 16px; } } @media only screen and (min-width: 1240px) { .section_wrapper, .container { max-width: var(--container) !important; } } @media only screen and (min-width: 1500px) { :root { --container: 1350px; } } @media only screen and (min-width: 1600px) { :root { --container: 1450px; } } @media only screen and (min-width: 1700px) { :root { --container: 1520px; } } /* Badge "Em construção" ([em_construcao]) O estilo (blur/fundo) está na coluna, não no texto. Quando o shortcode devolve vazio o .title fica vazio mas a coluna continuava visível. Esconde a coluna sempre que o título estiver vazio. */ .column.column_heading:has(> .mcb-column-inner .title:empty) { display: none !important; } /* ========================================================================== SETA DOS SELECTS (wpforms) -------------------------------------------------------------------------- Era um losango desenhado com dois linear-gradient no fundo do não aceitar pseudo-elementos. Passa a ser o glifo \e868 da mfn-icons, a mesma fonte que o tema usa em todos os outros ícones. Como um : input[type=checkbox]::before { position: absolute; left: -2px; top: -2px } E abaixo dos 600px o WPForms recorta o campo: @media (max-width: 600px) .wpforms-field { overflow-x: hidden } Aqui está a armadilha, e é de especificação: com um eixo em `hidden` e o outro em `visible`, o `visible` passa a `auto`. Pede-se recorte horizontal e recebe-se recorte vertical também. Medido em 390px — o topo do .wpforms-field e o topo do caem ambos em y 2513, portanto o ::before, que começa em 2511, fica de fora. Em desktop a regra não se aplica e por isso não corta. A saída é `clip` em vez de `hidden`: o `clip` não obriga o outro eixo a `auto`, portanto o vertical pode ficar mesmo em `visible`. O recorte horizontal que o plugin quer mantém-se. !important porque a regra do plugin vive numa media query com um seletor pesado (`div.wpforms-container .wpforms-form .wpforms-field:not(…)`), e copiar-lhe a especificidade era ficar refém da próxima versão dele. ========================================================================== */ @media only screen and (max-width: 600px) { div.wpforms-container .wpforms-form .wpforms-field { overflow-x: clip !important; overflow-y: visible !important; } }