@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap); /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :root { /* Cores */ --clr-prm-400: #002554; --clr-sec-400: #828fa5; --clr-sec-100: #e6eaf2; --clr-trd-400: #888888; --clr-qtr-400: #828fa5; --clr-qtr-100: #e6eaf2; --clr-promo01-400: #a96324; --clr-promo02-400: #e3b76e; --clr-opt-400: #c56143; --clr-opt-100: #ffece6; --clr-black: #000; --clr-gray-700: #222; --clr-gray-600: #3d3d3d; --clr-gray-500: #646464; --clr-gray-400: #888; --clr-gray-300: #b0b0b0; --clr-gray-200: #d1d1d1; --clr-gray-100: #f1f1f1; --clr-gray-050: #f9f9f9; --clr-white: #fff; --clr-link-400: #0075ff; --clr-info-400: #3176ea; --clr-info-100: #edf0ff; --clr-success-400: #5ca694; --clr-success-100: #f3fffa; --clr-error-400: #dc3545; --clr-error-100: #ffedec; --clr-warning-400: #ffad0d; --clr-warning-100: #fff9ee; --transition--default: all 0.3s ease-out; /* Layout e Espaçadores */ --cols: 12; --offset: 0px; --spacer: 16px; --divider-spacer: 60px; --max-container: 1496px; --container: calc(var(--max-container) - 2 * var(--offset)); --container-margins: 0px; --section-spacer: 40px; --section-spacer-lg: 60px; --footer-spacer: 60px; @media(max-width: 1536px) { --cols: 12; --offset: 20px; --spacer: 16px; --container: calc(100% - 2 * var(--offset)); } @media(max-width: 1180px) { --cols: 8; } @media(max-width: 769px) { --cols: 4; --container-margins: 0px; --section-spacer: 20px; --section-spacer-lg: 40px; --footer-spacer: 40px; } /* Inputs */ --input--width--min: 120px; --input--height: 42px; --input--radius: 10px; --input--background: var(--clr-gray-100); --input--border-color: var(--clr-gray-250); --input--placeholder-color: var(--clr-gray-500); --input--font-size: 0.875rem; --input--font-size-focus: 0.625rem; --input--font-color: var(--clr-gray-700); --input--font-color-focus: var(--clr-gray-700); --input--font-weight: 300; --input--font-weight-focus: 500; --input--prepos-size: 0.875rem; --input--prepos-color: var(--clr-gray-400); --input--prepos-weight: 300; --input--label-top: 10px; --input--padding-left: 1rem; --input--padding-right: 1rem; --input--padding-top: calc(var(--input--label-top) + 2px); --input--icon: 18px; --input--mark: 1rem; --input--mark-spacer: 10px; --input--mark-radius: 2px; --input--mark-border-size: 1px; --input--mark-border-spacer: 1px; --input--mark-border-color: var(--clr-gray-700); --input--mark-check: var(--clr-info-400); --input--mark-background: var(--clr-white); --input--range-thumb-size: 15px; --input--range-thumb-color: var(--clr-prm-600); --input--range-track-size: 2px; --input--range-track-color: var(--clr-gray-300); --input--spacer: 1rem; --mark--font-size: 0.75rem; --mark--font-weight: 300; --mark--font-color: var(--clr-gray-700); --mark--font-style: normal; --content--font-size: 0.875rem; --content--font-weight: 400; --content--font-color: var(--clr-gray-700); --content--font-style: normal; --hint--font-size: 0.75rem; --hint--font-weight: 400; --hint--font-color: var(--clr-gray-300); --hint--font-style: italic; --error--font-size: 0.75rem; --error--font-weight: 500; --error--font-color: var(--clr-error-400); --error--font-style: normal; /* Diversos */ --border: 1px solid var(--clr-gray-100); --matte: rgba(0,0,0,0.54); --shadow: 0px 0px 15px 0px rgba(0,0,0,0.1); --box-radius: 5px; --fx: all 0.3s ease-out; --fx-menu: all 0.5s ease-in-out; /* Tags*/ --tag--height: 28px; --tag--spacer: 4px 12px; --tag--radius: 5px; --tag--bg: var(--clr-gray-180); --tag--font-size: 0.75rem; --tag--font-weight: 300; --tag--font-color: var(--clr-gray-700); /* Background */ --z-100: -1; /* Backgrounds */ --z-200: 1; /* Padrão */ --z-300: 10; /* Menus */ --z-400: 100; /* Elementos Extras */ --z-500: 1000; /* Dialog e Modais de Contexto */ --z-600: 10000; /* Menu Principal */ --z-700: 100000; /* Dialog e Modais de Bloqueio */ --z-800: 1000000; /* Toasts */ /* Banners */ --bnr-fx: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%); } /* Menu Auxiliar */ .pbds-auxmenu, .pbds-auxmenu * { --auxmenu-width: 454px; } @media (max-width: 600px) { .pbds-auxmenu, .pbds-auxmenu * { --auxmenu-width: 100%; } } .pbds-container { &.seo { --container: calc(1536px * 0.66); @media (max-width: 1180px) { --container: calc(100% - 2 * var(--container-margins)); } } &.full { --container: 100%; --container-margins: 20px; } &.full-spaced { --container: 100%; --container-margins: 20px; } &.bleed { --container-margins: 20px; @media (max-width: 769px) { --container-margins: 0px; } } &.tool { --container: 100%; --container-margins: 90px; @media (max-width: 1498px) { --container-margins: 60px; } @media (max-width: 769px) { --container-margins: 20px; } } &.over { --container: 100%; --container-margins: 0px; } &.medium { --container: 1246px; --container-margins: 20px; @media (max-width: 1180px) { --container: 100%; } } &.small { --container: 780px; --container-margins: 20px; @media (max-width: 769px) { --container: 100%; } } &.carousel { @media (max-width: 1498px) { --container: 100%; --container-margins: 12px; } } } /* Tags */ .pbds-tag { &.specs, &.specs-application { --tag--height: 28px; --tag--spacer: 4px 8px; --tag--font-size: 0.875rem; --tag--font-weight: 300; --tag--font-color: var(--clr-gray-700); --tag--bg: var(--clr-gray-050); --tag--border-color: var(--clr-gray-200); > i { font-style: normal; white-space: nowrap; } } &.download { --tag--height: 28px; --tag--spacer: 0px 20px; --tag--font-size: 0.875rem; --tag--font-weight: 300; --tag--radius: 20px; --tag--font-color: var(--clr-gray-700); --tag--bg: var(--clr-qtr-100); --tag--border-color: var(--clr-qtr-100); &:hover { opacity: 1 !important; --tag--border-color: var(--clr-qtr-400); } } &.sku { --tag--spacer: 4px 20px; --tag--font-size: 0.875rem; --tag--font-weight: 300; --tag--font-color: var(--clr-gray-700); --tag--bg: var(--clr-gray-050); --tag--border-color: var(--clr-gray-100); } &.releases { --tag--spacer: 4px 8px; --tag--font-size: 0.875rem; --tag--font-weight: 300; --tag--font-color: var(--clr-gray-700); --tag--bg: var(--clr-gray-050); --tag--border-color: var(--clr-gray-050); } &.new { --tag-height: 28px; --tag--spacer: 4px 8px; --tag--radius: 5px; --tag--bg: var(--clr-gray-050); --tag--font-size: 0.875rem; --tag--font-weight: 300; --tag--font-color: var(--clr-gray-700); --tag--border-color: var(--clr-gray-100); } &.discount { --tag--font-color: var(--clr-black); --tag--bg: #FCB956; --tag--font-size: 0.875rem; gap: 4px; } &.info { --tag--height: 17px; --tag--spacer: 0px 8px; --tag--radius: 9px; --tag--bg: var(--clr-gray-050); --tag--font-size: 0.5rem !important; --tag--font-weight: 300; --tag--text-transform: uppercase; --tag--font-color: var(--clr-gray-700); --tag--border-color: var(--clr-gray-200); } &.blackdays { --tag--height: 28px; --tag--spacer: 4px 8px; --tag--font-size: 14px; --tag--font-weight: 700; --tag--font-color: var(--clr-black); --tag--font-color-hover: var(--clr-black); --tag--bg: var(--clr-promo02-600); --tag--bg-hover: var(--clr-white); --tag--border-color: var(--clr-promo02-600); --tag--border-color-hover: var(--clr-promo02-600); } /* Tag: Engenharia/Construtoras */ &.saleschannel-1, &.saleschannel-construtoras { --tag--height: 17px; --tag--spacer: 0px 8px; --tag--font-size: 0.5rem; --tag--font-weight: 500; --tag--text-transform: uppercase; --tag--letter-spacing: 0.5px; --tag--radius: 8px; --tag--font-color: var(--clr-white); --tag--bg: var(--clr-prm-400); --tag--border-color: var(--clr-prm-400); } /* Tag: Multimarcas */ &.saleschannel-2, &.saleschannel-lojas, &.saleschannel-multimarcas { --tag--height: 17px; --tag--spacer: 0px 8px; --tag--font-size: 0.5rem; --tag--font-weight: 500; --tag--text-transform: uppercase; --tag--letter-spacing: 0.5px; --tag--radius: 8px; --tag--font-color: var(--clr-white); --tag--bg: var(--clr-qtr-400); --tag--border-color: var(--clr-qtr-400); } /* Tag: Portobello Shop */ &.saleschannel-4, &.saleschannel-portobello-shop { --tag--height: 17px; --tag--spacer: 0px 8px; --tag--font-size: 0.5rem; --tag--font-weight: 500; --tag--text-transform: uppercase; --tag--letter-spacing: 0.5px; --tag--radius: 8px; --tag--font-color: var(--clr-white); --tag--bg: var(--clr-gray-700); --tag--border-color: var(--clr-gray-700); } /* Tag: Exportação/Internacional */ &.saleschannel-5, &.saleschannel-internacional { --tag--height: 17px; --tag--spacer: 0px 8px; --tag--font-size: 0.5rem; --tag--font-weight: 500; --tag--text-transform: uppercase; --tag--letter-spacing: 0.5px; --tag--radius: 8px; --tag--font-color: var(--clr-white); --tag--bg: var(--clr-gray-500); --tag--border-color: var(--clr-gray-500); } } .pbds-item--pagination, .pbds-item--pagination * { --input--font-size: 14px; --input--font-weight: 400; --input--font-color: var(--clr-gray-500); --border--color: transparent; } .pbds-item--pagination:has(input:checked), .pbds-item--pagination:has(input:checked) * { --input--font-color: var(--clr-link-400); --input--font-weight: 400 !important; --border--color: var(--clr-link-400); } .pbds-field--search, .pbds-field--search * { --input--background: var(--clr-white); --input--border-color: var(--clr-gray-200); } /* Input */ label { &:has(input:not([type="checkbox"]):not([type="radio"]):not([disabled])):hover { --input--border-color: black; } } .sr-only { width: 0px !important; height: 0px !important; padding: 0 !important; margin: -0px !important; position: absolute !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; border: 0 !important; } /* HEADER DE SEÇÃO */ .pbds-section--header { display: block; margin: 0 auto var(--section-header--spacer,20px); h2, p { text-align: center; b { font-weight: 700; } } p { margin: 8px 0 0; } } /* NAVEGAÇÃO/INDEXADOR DE CAROUSEL */ .pbds-carousel--navigation { margin: 0 auto var(--carousel-nav--spacer); position: relative; z-index: var(--z-400); ul { &.ui-tabs-nav { margin: 0 auto; display: inline-flex; justify-content: flex-start; align-items: center; } } .tabs-index--wrapper { overflow-x: auto; overflow-y: hidden; text-align: center; } .splide:not( .is-overflow ) .splide__list { justify-content: center; } ul li, ul li a, ul li button, ul li a span, ul li button span { display: block; margin: 0; padding: 0; border: none; background: transparent; font-size: var(--carousel-nav--link-font,1rem); font-weight: 300; color: var(--carousel-nav--link-color); text-decoration: none; letter-spacing: normal; white-space: nowrap; @media (max-width: 1179px) { font-size: 0.875rem; } @media (max-width: 889px) { font-size: 0.75rem; } @media (max-width: 769px) { font-size: 0.875rem; } } ul li { cursor: default !important; border: none !important; padding: 0 calc(var(--carousel-nav--link-spacer)/2); &:first-of-type { padding-left: var(--container-margins); } &:last-of-type { padding-right: var(--container-margins); } a, button { &:hover { cursor: pointer; span { border-bottom: 2px solid var(--carousel-nav--link-color); } } span { border-bottom: 2px solid transparent; transition: border 0.3s ease-out, font-weight 0.3s ease-out } } &.is-active a span, &.is-active button span, &.ui-state-active a span, &.ui-state-active button span { font-weight: 500; border-bottom: 2px solid var(--carousel-nav--link-color); } } }/* NAVEGAÇÃO/INDEXADOR DE CAROUSEL */ .pbds-carousel--navigation { margin: 0 auto var(--carousel-nav--spacer); position: relative; z-index: var(--z-400); } .pbds-carousel--navigation ul:not(.splide__list) { margin: 0 auto; display: inline-flex; justify-content: flex-start; align-items: center; } .pbds-carousel--navigation .tabs-index--wrapper { overflow-x: auto; overflow-y: hidden; text-align: center; } .pbds-carousel--navigation .splide:not( .is-overflow ) .splide__list { justify-content: center; } .pbds-carousel--navigation ul li, .pbds-carousel--navigation ul li a, .pbds-carousel--navigation ul li button, .pbds-carousel--navigation ul li a span, .pbds-carousel--navigation ul li button span { display: block; margin: 0; padding: 0; border: none; background: transparent; font-size: var(--carousel-nav--link-font,1rem); font-weight: 300; color: var(--carousel-nav--link-color); text-decoration: none; letter-spacing: normal; white-space: nowrap; } .pbds-carousel--navigation ul li { cursor: default !important; border: none !important; padding: 0 calc(var(--carousel-nav--link-spacer)/2); } .pbds-carousel--navigation ul li:first-of-type { padding-left: var(--container-margins); } .pbds-carousel--navigation ul li:last-of-type { padding-right: var(--container-margins); } .pbds-carousel--navigation ul li a:hover, .pbds-carousel--navigation ul li button:hover { cursor: pointer; } .pbds-carousel--navigation ul li a span, .pbds-carousel--navigation ul li button span { border-bottom: 2px solid transparent; transition: border 0.3s ease-out, font-weight 0.3s ease-out } .pbds-carousel--navigation ul li a:hover span, .pbds-carousel--navigation ul li button:hover span { border-bottom: 2px solid var(--carousel-nav--link-color); } .pbds-carousel--navigation ul li.is-active a span, .pbds-carousel--navigation ul li.is-active button span, .pbds-carousel--navigation ul li.ui-state-active a span, .pbds-carousel--navigation ul li.ui-state-active button span { font-weight: 500; border-bottom: 2px solid var(--carousel-nav--link-color); } @media (max-width: 1179px) { .pbds-carousel--navigation ul li, .pbds-carousel--navigation ul li a, .pbds-carousel--navigation ul li button, .pbds-carousel--navigation ul li a span, .pbds-carousel--navigation ul li button span { font-size: 0.875rem; } } @media (max-width: 889px) { .pbds-carousel--navigation ul li, .pbds-carousel--navigation ul li a, .pbds-carousel--navigation ul li button, .pbds-carousel--navigation ul li a span, .pbds-carousel--navigation ul li button span { font-size: 0.75rem; } } @media (max-width: 769px) { .pbds-carousel--navigation ul li, .pbds-carousel--navigation ul li a, .pbds-carousel--navigation ul li button, .pbds-carousel--navigation ul li a span, .pbds-carousel--navigation ul li button span { font-size: 0.875rem; } .pbds-carousel--navigation + .wrapper .pbds-grid--banners-v2 .pbds-banner:nth-of-type(1), .pbds-carousel--navigation + .wrapper .pbds-grid--banners-v2 .pbds-banner:nth-of-type(1) *, .pbds-carousel--navigation + .wrapper .pbds-grid--banners-v2.template-5 .pbds-banner:nth-of-type(2), .pbds-carousel--navigation + .wrapper .pbds-grid--banners-v2.template-5 .pbds-banner:nth-of-type(2) * { --banner-title--font: 1.3125rem !important; --banner-subtitle--font: 0.875rem !important; } } /* TAGS */ .pbds-tag { min-height: var(--tag--height); display: inline-flex !important; justify-content: center; align-items: center; gap: 10px; padding: var(--tag--spacer); font-size: var(--tag--font-size); font-weight: var(--tag--font-weight); font-style: normal; text-decoration: none; text-transform: var(--tag--text-transform,normal); letter-spacing: var(--tag--letter-spacing,unset); line-height: 1; color: var(--tag--font-color) !important; background: var(--tag--bg); border-radius: var(--tag--radius,5px); border: 1px solid var(--tag--border-color); &:not(.static):hover { opacity: 0.7; color: var(--tag--font-color); text-decoration: none; } &.fx:hover { opacity: 1; color: var(--tag--font-color-hover); background: var(--tag--bg-hover); border: 1px solid var(--tag--border-color-hover); text-decoration: none !important; } &.specs-application { white-space: nowrap; } > * { line-height: 1; font-size: inherit; font-weight: inherit; font-style: inherit; color: inherit !important; } img { max-width: 20px; } } .pbds-tags { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; li { margin: 0; padding: 0; a, button { height: 25px; margin: 0; padding: 12px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 0.75rem; font-weight: 300; color: var(--clr-gray-700); background: var(--clr-gray-200); text-decoration: none; } } } /* Submenus */ .pbds-btn:has(+ .pbds-submenu) .icon { margin: -2px 0 0; } .pbds-btn:has(+ .pbds-submenu[style*='block']) .icon { transform: rotate(180deg); } .submenu--wrapper:has(.pbds-btn,.pbds-submenu) { position: relative; } .pbds-submenu.filter-submenu { min-width: 210px; display: none; position: absolute; margin-top: 10px; padding: 15px; border-radius: 10px; background: var(--clr-white); box-shadow: 0px 0px 5px rgba(0,0,0,0.15); z-index: var(--z-300); } .pbds-submenu.filter-submenu.show, .pbds-submenu.filter-submenu.opened { display: block; } .pbds-submenu.filter-submenu .wrapper { max-height: 25dvh; overflow: auto; display: flex; justify-content: flex-start; align-items: flex-start; gap: 10px; flex-direction: column; } .pbds-submenu.filter-submenu .wrapper::-webkit-scrollbar { width: 12px; border-radius: 12px; } .pbds-submenu.filter-submenu .wrapper::-webkit-scrollbar-track { border-radius: 12px; background: var(--clr-gray-100); padding: 3px; } .pbds-submenu.filter-submenu .wrapper::-webkit-scrollbar-thumb { border-radius: 6px; background: var(--clr-gray-300); border: 3px solid var(--clr-gray-100); } .pbds-submenu.filter-submenu .actions { margin: 16px 0 0; display: flex; justify-content: space-between; align-items: center; } .pbds-submenu.filter-options { display: none; position: relative; padding: 20px 24px; background: var(--clr-gray-100); } .pbds-submenu.filter-options > .wrapper { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 8px; } /* Menu Auxiliar */ .pbds-auxmenu { display: none; width: 100dvw; height: 100dvh; position: fixed; top: 0; right: 0; z-index: var(--z-700); } .pbds-auxmenu:before { width: 100dvw; height: 100dvh; display: block; content: ""; position: fixed; top: 0; right: 0; z-index: calc(var(--z-700) + 1); background: rgba(0,0,0,0); transition: all 0.5s ease-out; } .pbds-auxmenu[style*="block"]:before { background: var(--matte); } body:has(.pbds-auxmenu[style*="block"]) { overflow: hidden; } .pbds-auxmenu .auxmenu--wrapper { width: 100%; max-width: var(--auxmenu-width); height: 100dvh; display: none; position: fixed; top: 0; right: 0; z-index: calc(var(--z-700) + 5); } .pbds-auxmenu .auxmenu--wrapper .wrapper { width: 100%; height: 100dvh; position: relative; margin-right: calc(100% - var(--auxmenu-width)); display: grid; grid-template-columns: 100%; grid-template-rows: auto 1fr; grid-template-areas: "header" "body"; background: var(--clr-white); } .pbds-auxmenu .auxmenu--wrapper .wrapper:has(> .auxmenu--actions) { grid-template-rows: auto 1fr auto; grid-template-areas: "header" "body" "actions"; } .pbds-auxmenu .auxmenu--wrapper header { display: grid; grid-template-columns: 16px 1fr 16px; grid-template-areas: "spacer title close"; padding: 20px 24px; border-bottom: 1px solid var(--clr-gray-100); } .pbds-auxmenu .auxmenu--wrapper header .title { grid-area: title; font-size: 1.25rem; font-weight: 500; text-align: center; } .pbds-auxmenu .auxmenu--wrapper header > button.close { grid-area: close; } .pbds-auxmenu .auxmenu--wrapper .auxmenu--body { width: 100%; padding: 0; overflow: auto; } .pbds-auxmenu .auxmenu--wrapper .auxmenu--body ul { margin: 0; padding: 0; list-style: none; } .pbds-auxmenu .auxmenu--wrapper .auxmenu--actions { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "clear submit"; padding: 40px 24px 20px; } .pbds-auxmenu .auxmenu--wrapper .auxmenu--actions .pbds-btn.action-link { grid-area: clear; align-self: center; justify-self: start; } .pbds-auxmenu .auxmenu--wrapper .auxmenu--actions .pbds-btn.dark { grid-area: submit; align-self: center; justify-self: end; } /* Divisor */ .pbds-divider { margin-top: var(--divider-spacer); margin-bottom: var(--divider-spacer); border: 0; border-top: 1px solid var(--clr-gray-100); } [id] { scroll-margin-top: var(--menu-height); } /* NAVEGAÇÃO DEFAULT CAROUSEL (BULLETS & ARROWS) */ [class*="pbds-carousel"] { &:not(.is-overflow) .splide__arrows { display: none; } &:not(.pbds-carousel--main) { .splide__pagination { width: fit-content; margin: 0 auto; display: inline-flex; padding: 5px 10px; border-radius: 10px; background: var(--carousel-pagination--bg); bottom: var(--carousel-pagination--y); gap: 10px; z-index: var(--z-400); > li { width: 10px; height: 10px; border-radius: 50%; position: relative; overflow: hidden; &:has(button.is-active) { transform:scale(120%); background: var(--carousel-pagination--color); } } button { width: 100%; height: 100%; padding: 0; margin: 0; display: block; position: relative; z-index: 1; background: var(--carousel-pagination--color); opacity: 0.5; } } .splide__arrow { width: 40px; height: 40px; background: rgba(34,34,34,0.5); opacity: 1; > img { width: 6px; height: 12px; margin: 0 0 0 2px; } &:hover { background: rgba(34,34,34,0.7); } &[disabled] { background: rgba(34,34,34,0.03); &:hover { cursor: not-allowed; } } &.splide__arrow--prev { left: -12px; img { transform: scale(-1,-1); margin: 0 2px 0 0; } } &.splide__arrow--next { right: -12px; } @media (max-width: 1530px) { &.splide__arrow--next { right: 0px; } &.splide__arrow--prev { left: 0px; } } @media (max-width: 1180px) { &.splide__arrow--prev { left: 6px; } &.splide__arrow--next { right: 6px; } } } } } /* DL Specs */ .pbds-specs--table { display: grid; grid-template-columns: 1fr minmax(30%,auto); gap: 0; > dt { margin: 0; padding: 20px 40px 20px 20px; background: var(--clr-gray-100); font-size: 0.875rem; font-weight: 400; &:nth-of-type(2n) { background: var(--clr-gray-050); } &:nth-of-type(1) { border-top-left-radius: 10px; } &:last-of-type { border-bottom-left-radius: 10px; } } > dd { margin: 0; padding: 20px 20px 20px 0px; background: var(--clr-gray-100); font-size: 0.875rem; font-weight: 300; color: var(--clr-gray-500); &:nth-of-type(2n) { background: var(--clr-gray-050); } &:nth-of-type(1) { border-top-right-radius: 10px; } &:last-of-type { border-bottom-right-radius: 10px; } p { margin: 0; font-size: 0.875rem; font-weight: 300; } } @media (max-width: 1180px) { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } @media (max-width: 1180px) { > dt { padding: 20px; } } } h4:has(+ .pbds-specs--table ) { margin: 0; padding: 20px; font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; color: var(--clr-gray-500); background: var(--clr-gray-200); border-radius: 10px 10px 0 0; + .pbds-specs--table { > dd { &:nth-of-type(1) { border-top-right-radius: 0px; } &:last-of-type { border-bottom-right-radius: 10px; } } > dt { &:nth-of-type(1) { border-top-left-radius: 0px; } &:last-of-type { border-bottom-left-radius: 10px; } } } } /* Footnote */ .pbds-specs--table + .pbds-footnote { margin: 16px 0 0; } .pbds-footnote { scroll-margin-top: var(--menu-height); font-size: 0.75rem; font-weight: 400; > img { margin: 0 8px 0 0; vertical-align: middle; } &.extended { > .header { display: grid; grid-template-columns: 18px 1fr; grid-template-areas: "icon content"; gap: 0.5rem; > img { grid-area: icon; } > span { grid-area: content; font-weight: 700; margin: 0 0 0.75rem; } } > .content { padding: 0 0 0 calc(18px + 0.5rem); .wrapper * { font-size: 0.75rem; } @media (max-width: 769px) { display: -webkit-box; -webkit-line-clamp: var(--content--lines-max); -webkit-box-orient: vertical; overflow: hidden; transition: var(--transition--default); max-height: calc(var(--content--lines-max)* 1.5rem); margin: 0 0 8px; -webkit-line-clamp: 400; max-height: 5000px; } } > .footnoteaction { margin: 0.75rem 0 1rem calc(18px + 0.5rem);; display: none; @media (max-width: 769px) { display: block; > .show { display: block; } > .close { display: none; } } } &.expanded { @media (max-width: 769px) { > .footnoteaction { > .show { display: none; } > .close { display: block; } } } } } } /* VIDEOS */ .pbds-video { width: 100%; height: var(--video-height,auto); aspect-ratio: var(--video-ratio,unset); position: relative; overflow: hidden; > iframe, > video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; object-position: center; z-index: 1; .mobile, .tablet { display: none; } @media (max-width: 1180px) { &:has(> .tablet) .desktop { display: none; } .tablet { display: block; } } @media (max-width: 769px) { &:has(> .mobile) .desktop, &:has(> .mobile) .tablet { display: none; } .mobile { display: block; } } } > button { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; font-size: 0.75rem; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--clr-white); background: rgba(0,0,0,0.75); border: none !important; opacity: 0; transition: var(--transition--default); &:hover { opacity: 1; } } } /* Modal */ .pbds-modal--video { padding: 0; border: none; &::backdrop { background: rgba(0,0,0,0.5); } .header { padding: 20px; display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; font-weight: 400; border-bottom: 1px solid var(--clr-gray-100); } .body { padding: 20px; } } .pbds-item--pagination { height: 190px; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; padding: 26px 0; border: 1px solid var(--border--color); border-radius: 10px; &:before { display: none !important; } > input { display: none !important; } .icon { width: 100%; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; svg path { stroke: var(--input--font-color) } } span { text-align: center; &:before { display: none !important; } } } /* TABELAS */ .pbds-table { width: 100%; table { width: 100%; th,td { padding: 10px 20px; } thead { th { font-weight: 700; } } tbody { tr { &:nth-of-type(odd) { background: var(--clr-qtr-100); } td { &:nth-of-type(1) { font-weight: 500; } } } } } } .pbds-field--search { width: 100%; height: 48px; display: flex; justify-content: flex-start; align-items: center; padding: 0 20px; .icon { width: 12px; height: 12px; } input { flex-grow: 1; } } @keyframes link { 0% { width: 0; } 100% { width: 100%; } } @keyframes simple { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes matte { 0% { display: none; opacity: 0; } 5% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @keyframes carouselPagination { from {width: 0;} to {width: 100%;} } @keyframes bannerHoverFx { 0% { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,0.55) 100%); } 30% { background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.55) 100%); } 70% { background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.55) 100%); } 100% { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,0.55) 100%); } } @keyframes bannerHoverDarkFx { 0% { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%); } 30% { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); } 70% { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); } 100% { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.80) 100%); } } @keyframes underlineAnimation { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } body { opacity: 0; transition: opacity 0.3s ease-out; &.loaded { opacity: 1; } } .pbds-container { width: min(100%,var(--container)); padding: 0 var(--container-margins,0); margin-inline: auto; &.full { margin-left: var(--offset,20px); margin-right: var(--offset,20px); } &.bleed { width: min(100%,calc(var(--max-container) + 2 * var(--container-margins))); padding: 0; } } @media (max-width: 769px) { body, html{ overflow-x: hidden; } } @media (pointer:coarse) { body { padding-left: calc(100vw - 100%); } } :root { --type-display01--size: 3rem; --type-display01--weight: 300; --type-display01--spacing: auto; --type-display01--line: 1.2; --type-display02--size: 2.5rem; --type-display02--weight: 300; --type-display02--spacing: 0; --type-display02--line: 1.2; --type-titleLg--size: 2.25rem; --type-titleLg--weight: 300; --type-titleLg--spacing: 0; --type-titleLg--line: 1.2; --type-titleMd--size: 2rem; --type-titleMd--weight: 300; --type-titleMd--spacing: 0; --type-titleMd--line: 1.2; --type-titleSm--size: 1.75rem; --type-titleSm--weight: 300; --type-titleSm--spacing: 0; --type-titleSm--line: 1.2; --type-titleXs--size: 1.5rem; --type-titleXs--weight: 300; --type-titleXs--spacing: 0; --type-titleXs--line: 1.2; --type-subLg--size: 1.125rem; --type-subLg--weight: 300; --type-subLg--spacing: 0; --type-subLg--line: 1.5; --type-subMd--size: 1rem; --type-subMd--weight: 300; --type-subMd--spacing: 0; --type-subMd--line: 1.5; --type-subSm--size: 0.875rem; --type-subSm--weight: 300; --type-subSm--spacing: 0; --type-subSm--line: 1.3; --type--size: 1rem; --type--weight: 300; --type--spacing: 0; --type--line: 1.5; --type-Md--size: 0.875rem; --type-Md--weight: 300; --type-Md--spacing: 0; --type-Md--line: 1.3; --type-Sm--size: 0.75rem; --type-Sm--weight: 300; --type-Sm--spacing: 0; --type-Sm--line: 1.3; --type-labelLg--size: 0.875rem; --type-labelLg--weight: 300; --type-labelLg--spacing: 0; --type-labelLg--line: 1.3; --type-labelSm--size: 0.625rem; --type-labelSm--weight: 300; --type-labelSm--spacing: 0; --type-labelSm--line: 1.3; @media(max-width:1440px) { --type-display01--size: 2.75rem; --type-display01--spacing: 0; --type-display02--size: 2.25rem; --type-titleLg--size: 2rem; --type-titleMd--size: 1.75rem; --type-titleSm--size: 1.5rem; --type-titleXs--size: 1.25rem; } @media(max-width:1080px) { --type-display01--size: 2.5rem; --type-display02--size: 2rem; --type-titleLg--size: 1.75rem; --type-titleMd--size: 1.5rem; --type-titleSm--size: 1.25rem; --type-titleXs--size: 1.125rem; --type-subLg--size: 1rem; --type-subMd--size: 0.875rem; --type-subSm--size: 0.75rem; } @media(max-width:600px) { --type-display01--size: 2rem; --type-display02--size: 1.75rem; --type-titleLg--size: 1.5rem; --type-titleMd--size: 1.25rem; --type-titleSm--size: 1.25rem; --type-titleXs--size: 1.125rem; } } * { font-family: 'Roboto', sans-serif; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } body { font-size: var(--type--size); font-weight: var(--type--weight); line-height: var(--type--line); letter-spacing:var(--type--spacing); color: var(--clr-gray-700); } .pbds-type { &.disp1 { font-size: var(--type-display01--size); font-weight: var(--type-display01--weight); line-height: var(--type-display01--line); letter-spacing:var(--type-display01--spacing); } &.disp2 { font-size: var(--type-display02--size); font-weight: var(--type-display02--weight); line-height: var(--type-display02--line); letter-spacing:var(--type-display02--spacing); } &.titleLg, &.h1 { font-size: var(--type-titleLg--size); font-weight: var(--type-titleLg--weight); line-height: var(--type-titleLg--line); letter-spacing:var(--type-titleLg--spacing); } &.titleMd, &.h2 { font-size: var(--type-titleMd--size); font-weight: var(--type-titleMd--weight); line-height: var(--type-titleMd--line); letter-spacing:var(--type-titleMd--spacing); } &.titleSm, &.h3 { font-size: var(--type-titleSm--size); font-weight: var(--type-titleSm--weight); line-height: var(--type-titleSm--line); letter-spacing:var(--type-titleSm--spacing); } &.titleXs, &.h4 { font-size: var(--type-titleXs--size); font-weight: var(--type-titleXs--weight); line-height: var(--type-titleXs--line); letter-spacing:var(--type-titleXs--spacing); } &.subLg, &.h5 { font-size: var(--type-subLg--size); font-weight: var(--type-subLg--weight); line-height: var(--type-subLg--line); letter-spacing:var(--type-subLg--spacing); } &.subMd { font-size: var(--type-subMd--size); font-weight: var(--type-subMd--weight); line-height: var(--type-subMd--line); letter-spacing:var(--type-subMd--spacing); } &.subSm { font-size: var(--type-subSm--size); font-weight: var(--type-subSm--weight); line-height: var(--type-subSm--line); letter-spacing:var(--type-subSm--spacing); } &.bodyLg { font-size: var(--type--size); font-weight: var(--type--weight); line-height: var(--type--line); letter-spacing:var(--type--spacing); } &.bodyMd { font-size: var(--type-Md--size); font-weight: var(--type-Md--weight); line-height: var(--type-Md--line); letter-spacing:var(--type-Md--spacing); } &.bodySm { font-size: var(--type-Sm--size); font-weight: var(--type-Sm--weight); line-height: var(--type-Sm--line); letter-spacing:var(--type-Sm--spacing); } } h1 { font-size: var(--type-titleLg--size); font-weight: var(--type-titleLg--weight); line-height: var(--type-titleLg--line); letter-spacing:var(--type-titleLg--spacing); } h2 { font-size: var(--type-titleMd--size); font-weight: var(--type-titleMd--weight); line-height: var(--type-titleMd--line); letter-spacing:var(--type-titleMd--spacing); } h3 { font-size: var(--type-titleSm--size); font-weight: var(--type-titleSm--weight); line-height: var(--type-titleSm--line); letter-spacing:var(--type-titleSm--spacing); } h4 { font-size: var(--type-titleXs--size); font-weight: var(--type-titleXs--weight); line-height: var(--type-titleXs--line); letter-spacing:var(--type-titleXs--spacing); } h5 { font-size: var(--type-subLg--size); font-weight: var(--type-subLg--weight); line-height: var(--type-subLg--line); letter-spacing:var(--type-subLg--spacing); } p { margin: 0 0 1rem; font-size: var(--type--size); font-weight: var(--type--weight); line-height: var(--type--line); letter-spacing:var(--type--spacing); &.md { font-size: var(--type-Md--size); font-weight: var(--type-Md--weight); line-height: var(--type-Md--line); letter-spacing:var(--type-Md--spacing); } &.sm { font-size: var(--type-Sm--size); font-weight: var(--type-Sm--weight); line-height: var(--type-Sm--line); letter-spacing:var(--type-Sm--spacing); } } b { font-weight: 500; } .bold { font-weight: 500 !important; } .bolder { font-weight: 700 !important; } a { font-size: var(--type--size); font-weight: var(--type--weight); line-height: var(--type--line); letter-spacing:var(--type--spacing); color: var(--clr-link-400); &.md { font-size: var(--type-Md--size); font-weight: var(--type-Md--weight); line-height: var(--type-Md--line); letter-spacing:var(--type-Md--spacing); } &.sm { font-size: var(--type-Sm--size); font-weight: var(--type-Sm--weight); line-height: var(--type-Sm--line); letter-spacing:var(--type-Sm--spacing); } &.anchor { color: var(--clr-qtr-400); font-weight: 400; } } .pbds-label { font-size: var(--type-labelLg--size); font-weight: var(--type-labelLg--weight); line-height: var(--type-labelLg--line); letter-spacing:var(--type-labelLg--spacing); &.sm { font-size: var(--type-labelSm--size); font-weight: var(--type-labelSm--weight); line-height: var(--type-labelSm--line); letter-spacing:var(--type-labelSm--spacing); } } /* CUSTOM */ /* Banners */ .pbds-banner { .tpMain { font-size: var(--type-display01--size); font-weight: var(--type-display01--weight); line-height: var(--type-display01--line); letter-spacing:var(--type-display01--spacing); } .tpContent { font-size: var(--type-titleXs--size); font-weight: var(--type-titleXs--weight); line-height: var(--type-titleXs--line); letter-spacing:var(--type-titleXs--spacing); } } /* Mainmenu */ .pbds-mainmenu { .tpMenu { } } .pbds-btn { width: var(--btn-width,auto); min-width: var(--btn-min-width,auto); height: var(--btn-height,44px); aspect-ratio: var(--btn-aspect,auto); display: inline-flex; justify-content: center; align-items: center; gap: 10px; position: relative; padding: var(--btn-padding,0 20px); border-radius: var(--btn-radius,10px); border: 1px var(--btn-border-type,solid) var(--btn-border,var(--clr-gray-700)); font-size: var(--btn-size,0.75rem); font-weight: var(--btn-weight,400); letter-spacing: var(--btn-letter,auto); color: var(--btn-color,var(--clr-white)); text-transform: var(--btn-transform,normal); text-decoration: none; line-height: var(--btn-line,1); background: var(--btn-bg,var(--clr-gray-700)); transition: var(--fx); > span, > *:not(img) { font-size: inherit; line-height: 1; font-weight: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; position: relative; } img { width: var(--btn-icon,12px); min-width: var(--btn-icon,12px); max-width: var(--btn-icon,12px); height: var(--btn-icon,12px); min-height: var(--btn-icon,12px); max-height: var(--btn-icon,12px); display: block; &.hover { display: block; position: absolute; top: 0px; left: 0px; opacity: 0; } } &:hover { cursor: pointer; opacity: var(--btn-opacity--hover,var(--btn-opacity)); border: 1px solid var(--btn-border--hover,var(--btn-border)); color: var(--btn-color--hover,var(--btn-color)); background: var(--btn-bg--hover,var(--btn-bg)); font-weight: var(--btn-weight--hover,var(--btn-weight)); > span:has(.hover), > *:not(img):has(.hover) { img { opacity: 0; &.hover { opacity: 1; } } } } &.trd, &.all { height: auto; padding: 0; border-radius: 0; border: transparent !important; background: transparent !important; > span, > *:not(img) { display: inline-block; padding: 0 0 4px; position: relative; &:before { width: 100%; height: 2px; content: ""; display: block; position: absolute; bottom: 0px; left: 0; background: var(--btn-border); transition: var(--fx); } } > span { border-bottom: 1px solid transparent !important; } &:hover { > span:before, > *:before { animation-name: link; animation-duration: 0.3s; animation-timing-function: ease-out; } } &[disabled], &[disabled]:hover { border: transparent !important; > span:before { animation: none; } } } &.linkds { height: auto; padding: 0 0 4px; border-radius: 0; border: transparent !important; background: transparent !important; > span { position: relative; &:before { width: 0%; height: 0px; content: ""; display: block; position: absolute; bottom: -2px; left: 0; border-bottom: 2px solid var(--btn-border); transition: var(--fx); } } &:hover { > span:before { width: 100%; animation-name: link; animation-duration: 0.3s; animation-timing-function: ease-out; } } &.selected { > span:before { width: 100%; } } &[disabled], &[disabled]:hover { border: transparent !important; } } &.menuds { height: auto; padding: 0 0 4px; border-radius: 0; border: transparent !important; background: transparent !important; transition: var(--fx); > span { &:before { width: 100%; height: 0px; content: ""; display: block; position: absolute; bottom: -19px; left: 0; border-bottom: 2px solid var(--btn-border); transition: var(--fx); opacity: 0; } } &.selected, &:hover > span:before { opacity: 1; } &[disabled], &[disabled]:hover { border: transparent !important; } } &.link { height: auto; padding: 0; border-radius: 0; border: transparent !important; background: transparent !important; transition: var(--fx-menu); > span { position: relative; &:before { width: 100%; height: 0px; content: ""; display: block; position: absolute; bottom: -2px; left: 0; border-bottom: 1px solid var(--btn-border); transition: var(--fx); opacity: 0; } } &.selected, &:hover > span:before { opacity: 1; } &[disabled], &[disabled]:hover { border: transparent !important; } } &.sided { @media (max-width: 769px) { span { display: none; } } } &.filter-auxmenu { width: 100%; justify-content: space-between; border-bottom: 1px solid var(--clr-gray-100); } &.filter-submenu { &:has( + .pbds-submenu.filter-options .wrapper label input[type="radio"]) { background: var(--clr-gray-100); } &:not(:has(.wrapper label input[type="checkbox"]:checked)) .actions .jsClearTags { visibility: hidden; } &:has( + .pbds-submenu.filter-options .wrapper label input[type="checkbox"]:checked) { border: 1px solid var(--clr-black); } span { white-space: nowrap; } } &.jsExpand { display: none; @media (max-width: 769px) { display: inline-flex; } > .more { display: block; text-wrap: nowrap; } > .less { display: none; text-wrap: nowrap; } > img { width: 10px; height: 6px; } } &.expand { --btn-height: 36px; --btn-border: var(--clr-gray-100); --btn-size: 0.875rem; --btn-weight: 400; --btn-padding: 0 70px; --btn-letter: auto; --btn-color: var(--clr-gray-700); --btn-transform: normal; --btn-line: 1; --btn-bg: var(--clr-gray-100); } &.download { text-align: left; justify-content: flex-start; &.icon { justify-content: center; } img { filter: grayscale(100%); } > span, .title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: none; letter-spacing: normal; font-weight: var(--btn-weight); } .size { margin-left: 20px; text-transform: none; letter-spacing: normal; font-weight: var(--btn-weight); color: var(--clr-gray-400); white-space: nowrap; } } &.trd.disabled { visibility: hidden; } &.icon-only { --btn-height: auto; --btn-border: transparent; --btn-size: 0.75rem; --btn-weight: 400; --btn-letter: 3px; --btn-color: var(--clr-gray-700); --btn-transform: uppercase; --btn-line: 1; --btn-bg: transparent; --btn-padding: 4px; span:not(:has(img)) { display: none; } } &.share { --btn-height: auto; --btn-border: transparent; --btn-size: 0.875rem; --btn-weight: 400; --btn-padding: 0; --btn-letter: auto; --btn-color: var(--clr-gray-700); --btn-transform: normal; --btn-line: 1; --btn-bg: transparent; } &.masonry-actions { width: 40px; max-width: 40px; overflow: hidden; > span { display: none; white-space: nowrap; } &:hover { width: auto; max-width: 100%; padding: 0 20px; > span { display: block; } } } &.spec-selector.color { img { border-radius: var(--btn-radius,10px); } } &:not(.disabled), &:not([disabled]) { .enabled { width: 12px; height: 12px; display: block; } .disabled { width: 12px; height: 12px; display: none; } } &.disabled, &[disabled] { .enabled { width: 12px; height: 12px; display: none; } .disabled { width: 12px; height: 12px; display: block; } } &[disabled], &[disabled]:hover { cursor: not-allowed !important; border: 1px var(--btn-border-type,solid) var(--btn-border--disabled,var(--clr-gray-200)) !important; color: var(--btn-color--disabled,var(--clr-gray-400)) !important; background: var(--btn-bg--disabled,var(--clr-gray-200)) !important; opacity: 1 !important; > span:before { border-bottom: 2px solid var(--btn-border--disabled); } } } label.pbds-btn.spec-selector:before, label.pbds-btn.spec-selector span:before{ display: none !important; } .pbds-btn { --btn-opacity: 1; --btn-opacity--hover: 0.7; --btn-weight: 400; &.full { --btn-width: 100%; } &.close { --btn-height: auto; --btn-border: transparent; --btn-size: 0.75rem; --btn-weight: 400; --btn-letter: 3px; --btn-color: var(--clr-gray-700); --btn-transform: uppercase; --btn-line: 1; --btn-bg: transparent; --btn-padding: 0px; } &.prm { --btn-height: 44px; --btn-border: var(--clr-gray-700); --btn-size: 0.75rem; --btn-weight: 400; --btn-letter: 0.125rem; --btn-color: var(--clr-white); --btn-transform: uppercase; --btn-line: 1; --btn-bg: var(--clr-gray-700); } &.prm.inv { --btn-border: var(--clr-white); --btn-color: var(--clr-gray-700); --btn-bg: var(--clr-white); } &.sec { --btn-height: 36px; --btn-border: var(--clr-gray-700); --btn-size: 0.875rem; --btn-weight: 400; --btn-letter: auto; --btn-color: var(--clr-white); --btn-transform: normal; --btn-line: 1; --btn-bg: var(--clr-gray-700); } &.sec.inv { --btn-border: var(--clr-gray-100); --btn-color: var(--clr-gray-700); --btn-bg: var(--clr-gray-100); } &.out { --btn-height: 44px; --btn-border: var(--clr-gray-700); --btn-size: 0.875rem; --btn-weight: 400; --btn-letter: 3px; --btn-color: var(--clr-gray-700); --btn-transform: uppercase; --btn-line: 1; --btn-bg: transparent; --btn-border--disabled: var(--clr-gray-200); --btn-color--disabled: var(--clr-gray-400); --btn-bg--disabled: transparent; } &.out.blue { --btn-color: var(--clr-link-400); --btn-bg: transparent; --btn-border: var(--clr-link-400); } &.out.inv { --btn-border: var(--clr-white); --btn-color: var(--clr-white); } &.trd, &.all { --btn-opacity--hover: 1; --btn-border: var(--clr-gray-500); --btn-size: 0.875rem; --btn-weight: 700; --btn-letter: auto; --btn-color: var(--clr-gray-700); --btn-transform: normal; --btn-line: 1; --btn-bg: transparent; --btn-bg--disabled: transparent; --btn-color--disabled: var(--clr-gray-700); --btn-border--disabled: var(--clr-gray-500); &.inv { --btn-border: var(--clr-white); --btn-color: var(--clr-white); --btn-color--disabled: var(--clr-white); --btn-border--disabled: var(--clr-white); } &.gray { --btn-border: var(--clr-gray-100); --btn-color: var(--clr-gray-400); --btn-color--disabled: var(--clr-gray-400); --btn-border--disabled: var(--clr-gray-100); } } &.link { --btn-opacity--hover: 1; --btn-border: var(--clr-gray-500); --btn-size: 0.875rem; --btn-weight: 300; --btn-letter: auto; --btn-color: var(--clr-gray-700); --btn-transform: normal; --btn-line: 1; --btn-bg: transparent; --btn-bg--disabled: transparent; --btn-color--disabled: var(--clr-gray-700); --btn-border--disabled: var(--clr-gray-500); &.white { --btn-border: var(--clr-white); --btn-color: var(--clr-white); --btn-color--disabled: var(--clr-white); --btn-border--disabled: var(--clr-white); } } &.linkds { --btn-opacity--hover: 1; --btn-border: var(--clr-gray-500); --btn-size: 1rem; --btn-weight: 300; --btn-letter: auto; --btn-color: var(--clr-gray-700); --btn-transform: normal; --btn-line: 1; --btn-bg: transparent; --btn-bg--disabled: transparent; --btn-color--disabled: var(--clr-gray-700); --btn-border--disabled: var(--clr-gray-500); &.white { --btn-border: var(--clr-white); --btn-color: var(--clr-white); --btn-color--disabled: var(--clr-white); --btn-border--disabled: var(--clr-white); } } &.menuds { --btn-opacity--hover: 1; --btn-border: var(--clr-gray-500); --btn-size: 0.875rem; --btn-weight: 400; --btn-letter: auto; --btn-color: var(--clr-gray-700); --btn-transform: normal; --btn-line: 1; --btn-bg: transparent; --btn-bg--disabled: transparent; --btn-color--disabled: var(--clr-gray-700); --btn-border--disabled: var(--clr-gray-500); &.white { --btn-border: var(--clr-white); --btn-color: var(--clr-white); --btn-color--disabled: var(--clr-white); --btn-border--disabled: var(--clr-white); } } &.icon { --btn-opacity--hover: 1; --btn-height: 40px; --btn-icon: 18px; --btn-aspect: 1; --btn-padding: 0; --btn-border: var(--clr-gray-300); --btn-color: var(--clr-white); --btn-bg: var(--clr-gray-300); --btn-radius: 20px; --btn-border--hover: var(--clr-gray-700); --btn-bg--hover: var(--clr-gray-700); &:has(span) { --btn-padding: 0 20px; } &.sec.inv { --btn-height: 36px; --btn-radius: 10px; --btn-opacity--hover: 0.7; --btn-border--hover: var(--clr-gray-100); --btn-bg--hover: var(--clr-gray-100); } } &.sided { --btn-opacity--hover: 0.7; --btn-height: 38px; --btn-icon: 18px; --btn-padding: 0 20px; --btn-border: var(--clr-gray-700); --btn-color: var(--clr-white); --btn-bg: var(--clr-gray-700); --btn-radius: 10px 0 0 10px; @media (max-width: 769px) { --btn-aspect: 1; --btn-padding: 0; --btn-radius: 10px; } } &.selector { --btn-opacity--hover: 1; --btn-min-width: 94px; --btn-height: 36px; --btn-padding: 0 8px; --btn-border-type: solid; --btn-size: 0.875rem; --btn-border: var(--clr-gray-200); --btn-color: var(--clr-gray-700); --btn-bg: transparent; &:hover { --btn-border: var(--clr-gray-700); } &[disabled] { --btn-border--disabled: var(--clr-gray-200); --btn-color--disabled: var(--clr-gray-400); --btn-bg--disabled: transparent; --btn-border-type: dashed; } &.selected { --btn-border: var(--clr-gray-700); --btn-color: var(--clr-white); --btn-bg: var(--clr-gray-700); } &.color { --btn-min-width: 50px; --btn-height: 51px; --btn-aspect: 1; --btn-icon: 43px; } &.color.selected { --btn-border: var(--clr-gray-700); --btn-color: var(--clr-gray-700); --btn-bg: transparent; box-shadow: 0 0 0 1px var(--clr-gray-700); } } &.filter-submenu { --btn-border: var(--clr-white); --btn-size: 0.875rem; --btn-weight: 300; --btn-letter: normal; --btn-color: var(--clr-gray-700); --btn-transform: Normal; --btn-line: 1; --btn-bg: var(--clr-white); --btn-border: var(--clr-gray-200); } &.show-filter { --btn-height: 36px; --btn-border: var(--clr-white); --btn-size: 0.875rem; --btn-weight: 300; --btn-letter: normal; --btn-color: var(--clr-gray-700); --btn-transform: Normal; --btn-line: 1; --btn-bg: var(--clr-gray-100); --btn-border: var(--clr-gray-100); } &.download { --btn-icon: 14px; --btn-size: 1rem !important; &:hover { --btn-opacity--hover: 1; --btn-weight: 500; img { filter: brightness(0); } } } &.filter { --btn-height: 36px; --btn-border: var(--clr-white); --btn-size: 0.875rem; --btn-weight: 300; --btn-color: var(--clr-white); --btn-bg: var(--clr-black); --btn-border: var(--clr-black); --btn-color--hover: var(--clr-white); --btn-bg--hover: var(--clr-black); --btn-border--hover: var(--clr-black); } &.filter-auxmenu { --btn-height: 56px; --btn-padding: 20px; --btn-letter: normal; --btn-size: 1rem; --btn-weight: 400; --btn-radius: 0px; --btn-color: var(--clr-gray-700); --btn-transform: normal; --btn-border: transparent; --btn-border--hover: transparent; --btn-bg: var(--clr-white); } &.back { --btn-icon: 16px; --btn-height: auto; --btn-border: transparent; --btn-size: 0.75rem; --btn-weight: 400; --btn-letter: 3px; --btn-color: var(--clr-gray-700); --btn-transform: uppercase; --btn-weight--hover: 500; --btn-line: 1; --btn-bg: transparent; --btn-padding: 0px; } &.more { --btn-height: 20px; --btn-icon: 16px; --btn-height: auto; --btn-border: transparent; --btn-size: 0.875rem; --btn-weight: 400; --btn-letter: 3px; --btn-color: var(--clr-black); --btn-transform: uppercase; --btn-line: 1; --btn-bg: var(--clr-white); --btn-padding: 0px 30px; } &.success { --btn-height: 44px; --btn-icon: 16px; --btn-border: transparent; --btn-size: 0.75rem; --btn-weight: 400; --btn-letter: 3px; --btn-color: var(--clr-white); --btn-transform: uppercase; --btn-line: 1; --btn-bg: var(--clr-success-400); --btn-padding: 0px 30px; } &.masonry-actions { --btn-height: 40px; --btn-icon: 20px; --btn-spacer: 10px; --btn-padding: 0px; --btn-radius: 20px; --btn-font: 0.75rem; --btn-weight: 400; --btn-color: var(--clr-white); --btn-transform: normal; --btn-letter: auto; --btn-bg: rgba(34,34,34,0.5); --btn-color--hover: var(--clr-white); --btn-bg--hover: rgba(34,34,34,0.5); --btn-shadow: none; --btn-border: transparent; --btn-border--hover: transparent; } &.spec-selector { --btn-height: 36px; --btn-spacer: 10px; --btn-padding: 8px; --btn-radius: 10px; --btn-weight: 400; --btn-color: var(--clr-gray-700); --btn-bg: var(--clr-white); --btn-color--hover: var(--clr-gray-700); --btn-bg--hover: var(--clr-white); --btn-shadow: none; --btn-border: var(--clr-gray-200); --btn-border--hover: var(--clr-gray-700); --btn-size: 0.875rem; --btn-letter: normal; --btn-transform: normal; &.selected { --btn-color: var(--clr-white); --btn-bg: var(--clr-black); --btn-color--hover: var(--clr-white); --btn-bg--hover: var(--clr-black); --btn-border: var(--clr-black); --btn-border--hover: var(--clr-black); } &.color { --btn-width: 50px; --btn-height: 50px; --btn-icon: 42px; --btn-aspect: 1/1; --btn-spacer: 0px; --btn-padding: 4px; --btn-radius: 10px; --btn-weight: 400; &.selected { --btn-color: var(--clr-gray-700); --btn-bg: var(--clr-white); --btn-color--hover: var(--clr-gray-700); --btn-bg--hover: var(--clr-white); --btn-shadow: none; --btn-border: var(--clr-gray-200); --btn-border--hover: var(--clr-gray-700); border: 2px solid var(--btn-border--hover, --btn-border); } &:has(> input[type="radio"]:checked), &:has(> input[type="checkbox"]:checked) { --btn-color: var(--clr-gray-700); --btn-bg: var(--clr-white); --btn-color--hover: var(--clr-gray-700); --btn-bg--hover: var(--clr-white); --btn-shadow: none; --btn-border: var(--clr-gray-200); --btn-border--hover: var(--clr-gray-700); border: 2px solid var(--btn-border--hover,--btn-border); } } &:has(> input[type="radio"]:checked), &:has(> input[type="checkbox"]:checked) { --btn-weight: 400; --btn-color: var(--clr-white) !important; --input--font-color: var(--clr-white) !important; --mark-font--color: var(--clr-white) !important; --mark-font--weight: 400; --btn-bg: var(--clr-black); --btn-color--hover: var(--clr-white); --btn-bg--hover: var(--clr-black); --btn-border: var(--clr-black); --btn-border--hover: var(--clr-black); } &:has(> input[type="radio"][disabled]), &:has(> input[type="checkbox"][disabled]) { border: 1px dashed var(--btn-border); } } &.input-disabled { --btn-border: transparent; --btn-color: transparent; --btn-bg: transparent; } } /* Forms Básicos */ label { display: inline-grid; grid-template-columns: 100%; grid-template-areas: "field"; position: relative; isolation: isolate; &:has(> input:not([type="radio"]):not([type="checkbox"])) { min-height: var(--input--height); } &:has(input[disabled]):before, &:has(input[disabled]) input, &:has(input[disabled]) span:not([class]):before { opacity: 0.5 !important; } &:has(input[disabled]):hover { cursor: not-allowed !important; } &:has(> input:not([type="radio"]):not([type="checkbox"])), &:has(textarea) { > span:not([class]) { grid-area: field; position: absolute; top: 50%; left: var(--input--padding-left,0); z-index: 1; transform: translateY(-50%); font-size: var(--input--font-size); color: var(--input--font-color); font-weight: var(--input--font-weight); white-space: nowrap; transition: all 0.3s ease-out; } > input { grid-area: field; min-height: var(--input--height); align-self: center; align-items: center; min-height: var(--input--height); padding: calc(var(--input--padding-top)/2) var(--input--padding-right,0) calc(var(--input--padding-top)/2) var(--input--padding-left,0); position: relative; z-index: 2; font-size: var(--input--font-size); font-weight: var(--input--font-weight); color: var(--input--font-color); background: none; border: none; &:not(:placeholder-shown) { padding: var(--input--padding-top) var(--input--padding-right,0) 0 var(--input--padding-left,0); } } &:before { width: 100%; height: 100%; display: block; content: ""; grid-column: 1 / -1; grid-row: 1 / 1; position: absolute; top: 0; left: 0; z-index: -1; background: var(--input--background); border: 1px solid var(--input--border-color); border-radius: var(--input--radius); transition: background 0.3s ease-out, border 0.3s ease-out; } &:has(input:not(:placeholder-shown)) > span:not([class]) { font-size: var(--input--font-size-focus); font-weight: var(--input--font-weight-focus); color: var(--input--font-color-focus,--input--font-color); top: var(--input--label-top); } } &:has(input:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown)) { --input--border-color: var(--clr-gray-700); } &:has(input:placeholder-shown) > span:not([class]) { opacity: 0; } } /* Prefixos e Sufixos (conteúdo Pre e Pos) */ label { &:has(> .pre) { grid-template-columns: auto 1fr; grid-template-areas: "pre field"; } &:has(> .pos) { grid-template-columns: 1fr auto; grid-template-areas: "field pos"; } &:has(> .pre, > .pos) { grid-template-columns: auto 1fr auto; grid-template-areas: "pre field pos"; } &:has(> .pre,[data-hint]) { grid-template-areas: "pre field" "hint hint"; } &:has(> .pos,[data-hint]) { grid-template-areas: "field pos" "hint hint"; } &:has(> .pre, > .pos,[data-hint]) { grid-template-areas: "pre field pos" "hint hint hint"; } &:has(> .pre,[data-error]) { grid-template-areas: "pre field" "error error"; } &:has(> .pos,[data-error]) { grid-template-areas: "field pos" "error error"; } &:has(> .pre, > .pos,[data-error]) { grid-template-areas: "pre field pos" "error error error"; } &:has(> input:not([type="radio"]):not([type="checkbox"])) { &:has(> .pre:not(.icon)) { > input { padding: var(--input--padding-top,0) var(--input--padding-right,0) 0 calc(var(--input--padding-left,0)/8); } > span:not([class]) { grid-area: not-set; font-size: var(--input--font-size-focus); font-weight: var(--input--font-weight-focus); color: var(--input--font-color-focus); top: var(--input--label-top); left: var(--input--padding-left,0); opacity: 1; } } &:has(> .pos:not(.icon)) { > input { padding: var(--input--padding-top,0) calc(var(--input--padding-right,0)/8) 0 var(--input--padding-left,0); text-align: right; } > span:not([class]) { grid-area: not-set; font-size: var(--input--font-size-focus); font-weight: var(--input--font-weight-focus); color: var(--input--font-color-focus); top: var(--input--label-top); left: var(--input--padding-left,0); opacity: 1; } } } > .pre { grid-area: pre; display: flex; justify-content: flex-start; align-items: center; min-height: var(--input--height); align-self: center; align-items: center; text-align: right; font-size: var(--input--prepos-size); font-weight: var(--input--prepos-weight); color: var(--input--prepos-color); padding: var(--input--padding-top,0) 0 0 var(--input--padding-left,0); } > .pos { grid-area: pos; display: flex; justify-content: flex-start; align-items: center; min-height: var(--input--height); align-self: center; align-items: center; text-align: left; font-size: var(--input--prepos-size); font-weight: var(--input--prepos-weight); color: var(--input--prepos-color); padding: var(--input--padding-top,0) var(--input--padding-right,0) 0 0; } > .pre.icon, > .pos.icon { padding-top: 0; } &:has(input[type="radio"]:checked), &:has(input[type="radio"]:checked) *, &:has(input[type="checkbox"]:checked), &:has(input[type="checkbox"]:checked) * { --mark-font-weight: 700; --input--mark-border-color: var(--clr-info-400); } } /* Dicas (conteúdo em data-hint) */ label[data-hint] { grid-template-areas: "field" "hint"; &:after { grid-area: hint; display: block; content: "*" attr(data-hint); font-size: var(--hint--font-size); color: var(--hint--font-color); font-weight: var(--hint--font-weight); font-style: var(--hint--font-style); padding: 0 0 0 calc(var(--input--padding-left,0)/4); } } /* Erro em feedback (conteúdo em data-error) */ label[data-error] { grid-template-areas: "field" "error"; &:after { grid-area: error; display: block; content: "*" attr(data-error); font-size: var(--error--font-size); color: var(--error--font-color); font-weight: var(--error--font-weight); font-style: var(--error--font-style); padding: calc(var(--input--padding-left,0)/4) 0 0 calc(var(--input--padding-left,0)/4); } &:has(.is-invalid), &:has(.field-error) { --input--border-color: var(--clr-error-400); } } /* Input de arquivo e de image (file e image), cor, range */ label:has(> input:not([type="radio"]):not([type="checkbox"])) { > input[type="file"], > input[type="image"] { min-width: var(--input--width-min); padding: calc(var(--input--padding-top) * 1.2) var(--input--padding-right,0) 0 var(--input--padding-left,0); } > input[type="color"] { width: 100%; min-width: var(--input--width--min); height: calc(100% - (var(--input--padding-top) * 1.2)); padding: calc(var(--input--padding-top) * 1.2) var(--input--padding-right,0) 0 var(--input--padding-left,0); } > input[type="range"] { -webkit-appearance :none; -moz-appearance :none; appearance :none; background: none; cursor: pointer; padding: calc(var(--input--padding-top) * 1.2) var(--input--padding-right,0) 0 var(--input--padding-left,0); &::-webkit-slider-thumb { height: var(--input--range--thumb-size); aspect-ratio: 1 / 1; border-radius: 50%; background: var(--input--range--thumb-color); transform: translateY(calc(var(--input--range--track-size)/2 - var(--input--range--thumb-size)/2)); appearance: none; } &::-webkit-slider-runnable-track { height: var(--input--range--track-size); background: var(--input--range--track-color); border-radius: calc(var(--input--range--track-size)/2); } } } /* Input Radio e Checkbox */ label:has(> input[type="checkbox"],> input[type="radio"]) { grid-template-columns: var(--input--mark) 1fr; grid-template-areas: "mark field"; column-gap: var(--input--mark-spacer); > input[type="checkbox"], > input[type="radio"] { position: absolute; z-index: -1; top: 0; left: 0; display: none; width: 1rem; height: 1rem; } > span:not([class]) { grid-area: field; position: relative; top: 0 !important; font-size: var(--input--font-size) !important; color: var(--input--font-color) !important; font-weight: var(--input--font-weight) !important; font-style: var(--input--font-style) !important; &:before { align-self: start; width: calc(var(--input--mark) - ((var(--input--mark-border-size) + var(--input--mark-border-spacer)) * 2)); aspect-ratio: 1; content: ""; display: block; position: absolute; top: calc(var(--input--mark-border-size) + var(--input--mark-border-spacer)); left: calc(0px - var(--input--mark-spacer) - (var(--input--mark) - (var(--input--mark-border-size) + var(--input--mark-border-spacer)))); background: var(--input--mark-check); border-radius: var(--input--mark-radius); transform: scale(0); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } } &:hover { cursor: pointer; } &:before { grid-area: mark; align-self: start; width: var(--input--mark); height: var(--input--mark); content: ""; display: block; position: relative; background: var(--input--mark-background); border-radius: var(--input--mark-radius); border: var(--input--mark-border-size) solid var(--input--mark-border-color); } .content { grid-area: content; font-size: var(--content--font-size); color: var(--content--font-color); font-weight: var(--content--font-weight); font-style: var(--content--font-style); } &:has(> input:checked) span:not([class]):before, &:has(> input.checked) span:not([class]):before { opacity: 1; transform: scale(1); } } label[data-hint]:has(> input[type="checkbox"],> input[type="radio"]) { grid-template-areas: "mark field" "mark hint"; } label[data-error]:has(> input[type="checkbox"],> input[type="radio"]) { grid-template-areas: "mark field" "mark error"; } label:has(> input[type="checkbox"],> input[type="radio"]):has(> .content) { grid-template-areas: "mark field" "mark content"; } label[data-hint]:has(> input[type="checkbox"],> input[type="radio"]):has(> .content) { grid-template-areas: "mark field" "mark content" "mark hint"; } label[data-error]:has(> input[type="checkbox"],> input[type="radio"]):has(> .content) { grid-template-areas: "mark field" "mark content" "mark error"; } label:has(> input[type="radio"]):before, label:has(> input[type="radio"]) span:not([class]):before { border-radius: 50%; } /* Área de texto */ label:has(> textarea) { > span:not([class]) { grid-area: field; position: absolute; top: var(--input--padding-top); left: var(--input--padding-left,0); z-index: 1; font-size: var(--input--font-size); color: var(--input--font-color); font-weight: var(--input--font-weight); white-space: nowrap; } > textarea { grid-area: field; min-height: var(--input--height); align-self: center; align-items: center; min-height: var(--input--height); margin: var(--input--padding-top) var(--input--padding-right,0) var(--input--padding-top) var(--input--padding-left,0); position: relative; z-index: 2; font-size: var(--input--font-size); font-weight: var(--input--font-weight); color: var(--input--font-color); resize: both; background: none; border: none; &:before { width: 100%; height: 100%; display: block; content: ""; grid-column: 1 / -1; grid-row: 1 / 1; position: absolute; top: 0; left: 0; z-index: -1; background: var(--input--background); border: 1px solid var(--input--border-color); border-radius: var(--input--radius); } } } label:has(textarea:placeholder-shown) > span:not([class]) { opacity: 0; } label:has(textarea:not(:placeholder-shown)) > span:not([class]) { font-size: var(--input--font-size-focus) !important; font-weight: var(--input--font-weight-focus) !important; color: var(--input--font-color-focus,--input--font-color) !important; top: var(--input--label-top) !important; } label > textarea:not(:placeholder-shown) { margin: calc(var(--input--padding-top) * 2) var(--input--padding-right,0) 0 var(--input--padding-left,0) !important; } /* Seletor (select) */ label:has(> select) { display: inline-grid; grid-template-columns: 100%; grid-template: "field"; position: relative; isolation: isolate; > span:not([class]) { grid-area: field; position: absolute; font-size: var(--input--font-size-focus); font-weight: var(--input--font-weight-focus); color: var(--input--font-color-focus); top: var(--input--label-top); transform: translateY(-50%); left: var(--input--padding-left,0); opacity: 1; transition: all 0.3s ease-out; } &:before { width: 100%; height: 100%; display: block; content: ""; grid-row: 1 / 1; position: absolute; top: 0; left: 0; z-index: -1; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMC43MDkiIGhlaWdodD0iNi43NjgiPgogIDxwYXRoIGQ9Ik05LjAwMy4yOTMgNS4zNTUgMy45NDEgMS43MDcuMjkzQTEgMSAwIDAgMCAuMjkzIDEuNzA3bDMuNjQ4IDMuNjQ4IDEuNDE0IDEuNDE0IDEuNDE0LTEuNDE0IDMuNjQ4LTMuNjQ4QTEgMSAwIDAgMCA5LjAwMy4yOTMiIGZpbGw9IiMyMjIiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZGF0YS1uYW1lPSJDYW1pbmhvIDI2OTEiLz4KPC9zdmc+Cg==) calc(100% - 1rem) calc(50%) no-repeat, var(--input--background); border: 1px solid var(--input--border-color); border-radius: var(--input--radius); } > select { width: 100%; grid-area: field; min-height: var(--input--height); align-self: center; align-items: center; min-height: var(--input--height); padding: var(--input--padding-top) calc(var(--input--padding-right, 0) + 1.25rem) 0 var(--input--padding-left, 0); position: relative; z-index: 2; font-size: var(--input--font-size); font-weight: var(--input--font-weight); color: var(--input--font-color); background: none; border: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; transition: all 0.3s ease-out; } &:has(option[value=""]:checked) { > select { --input--padding-left: 20px; margin: 0 0 0 calc(0 - var(--input--padding-left)); padding: calc(var(--input--padding-top) / 2) var(--input--padding-right, 0) calc(var(--input--padding-top) / 2) var(--input--padding-left, 0); } > span:not([class]) { grid-area: field; position: absolute; top: 50%; left: var(--input--padding-left, 0); z-index: 1; transform: translateY(-50%); font-size: var(--input--font-size); color: var(--input--font-color); font-weight: var(--input--font-weight); white-space: nowrap; opacity: 0; } } } label:has(select[disabled]) .pbds-btn.input-disabled { grid-area:field; width: 100%; display: flex; position: absolute; justify-content: flex-start; top: 0; left: 0; padding: calc(var(--input--padding-top) / 2) var(--input--padding-right, 0) calc(var(--input--padding-top) / 2) var(--input--padding-left, 0); z-index: 5; } label .pbds-btn.input-disabled { display: none; } label:has(.pbds-btn.input-disabled) select[disabled] { padding-left: calc(20px + var(--input--padding-left,0)); } /* Exibir Placeholder */ label.show-placeholder:has(> input:not([type="radio"]):not([type="checkbox"])) { > span:not([class]) { grid-area: not-set; position: absolute; font-size: var(--input--font-size-focus); font-weight: var(--input--font-weight-focus); color: var(--input--font-color-focus); top: var(--input--label-top); transform: translateY(-50%); left: var(--input--padding-left,0); opacity: 1; } > input { padding: var(--input--padding-top) var(--input--padding-right,0) 0 var(--input--padding-left,0); } } /* Fake Input Checkbox / Radio */ .pbds-input--fake.radio, .pbds-input--fake.radio * { --input--mark-radius: 50%; } .pbds-input--fake { min-height: auto; display: inline-grid; grid-template-columns: var(--input--mark) 1fr; grid-template-areas: "mark field"; column-gap: var(--input--mark-spacer); position: relative; isolation: isolate; padding: 0; border: none; background: none; text-align: left; &:before { grid-area: mark; align-self: start; width: var(--input--mark); height: var(--input--mark); content: ""; display: block; position: relative; background: var(--input--mark-background); border-radius: var(--input--mark-radius); border: var(--input--mark-border-size) solid var(--input--mark-border-color); } > span { &:not([class]) { grid-area: field; position: relative; top: 0 !important; font-size: var(--input--font-size) !important; color: var(--input--font-color) !important; font-weight: var(--input--font-weight) !important; font-style: var(--input--font-style) !important; } &:before { align-self: start; width: calc(var(--input--mark) - ((var(--input--mark-border-size) + var(--input--mark-border-spacer))* 2)); aspect-ratio: 1; content: ""; display: block; position: absolute; top: calc(var(--input--mark-border-size) + var(--input--mark-border-spacer)); left: calc(0px - var(--input--mark-spacer) - (var(--input--mark) - (var(--input--mark-border-size) + var(--input--mark-border-spacer)))); background: var(--input--mark-check); border-radius: var(--input--mark-radius); transform: scale(0); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } } &.checked span:not([class]):before { opacity: 1; transform: scale(1); } } .pbds-switch { grid-template-columns: 35px 1fr !important; &:before { width: 35px !important; height: 20px !important; display: block !important; content: "" !important; background: var(--clr-gray-100) !important; border: 1px solid var(--clr-gray-200) !important; border-radius: 10px !important; position: absolute; top: 0; left: 0; } > span:not([class]) { display: flex; justify-content: flex-start; align-items: center; gap: 4px; &:before { width: 14px !important; height: 14px !important; border-radius: 50% !important; top: 3px !important; left: -42px !important; opacity: 1 !important; transform: scale(1) !important; background: var(--clr-gray-300) !important; transition: all 0.3s ease-out !important; } } &:has(> input:checked) > span:not([class]):before { left: -28px !important; background: var(--clr-link-400) !important; } } /* Select alterado */ label > .select2 { --input--padding-left: 20px; display: inline-block; min-height: var(--input--height); margin: 0 0 0 calc(0 - var(--input--padding-left)); padding: var(--input--padding-top) calc(var(--input--padding-right, 0) + 1.25rem) 0 var(--input--padding-left, 0); } label .select2 .selection, label .select2-selection, label .select2-selection__rendered { width: 100%; height: 100% !important; display: flex; align-items: center; padding: 0; border: 0 !important; line-height: 1.2; background: transparent !important; font-size: var(--input--font-size) !important; color: var(--input--font-color) !important; } label .select2-selection__rendered { padding: 0 !important; } label .select2 .select2-selection__arrow { display: none; } label:has(select option[value=""]:checked) > .select2 { --input-padding--left: 20px; padding: calc(var(--input--padding-top) / 2) var(--input--padding-right, 0) calc(var(--input--padding-top) / 2) var(--input--padding-left, 0); } label:has(.select2-selection[aria-disabled="true"]) .select2 .select2-selection__rendered { padding-left: 20px !important; } label div.field-error { display: none; } .pbds-banner, .pbds-banner * { --bnr--height: 637px; --bnr--font-color: var(--clr-white); --bnr--padding-x: 120px; --bnr--padding-y: 92px; --bnr--radius: 5px; --bnr--cta-spacer: 10px; --bnr--fx: linear-gradient(to bottom, rgba(18,18,18,0.4) 0%,rgba(18,18,18,1) 100%); @media(max-width: 1180px) { --bnr--height: 724px; --bnr--padding-x: 120px; --bnr--padding-y: 72px; } @media(max-width: 769px) { --bnr--height: 562px; --bnr--padding-x: 40px; --bnr--padding-y: 72px; } } .pbds-banner.modular, .pbds-banner.modular * { --bnr--padding-x: 40px; --bnr--padding-y: 32px; --bnr--fx: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); --bnr--radius: 5px; @media(max-width: 1180px) { --bnr--padding-x: 20px; --bnr--padding-y: 32px; } } .pbds-banner.modular:hover * { --bnr--fx: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); } .pbds-banner.content, .pbds-banner.content * { --bnr--height: 810px; --bnr--font-color: var(--clr-white); --bnr--padding-x: 120px; --bnr--padding-y: 80px; --bnr--radius: 5px; --bnr--fx: linear-gradient(to bottom, rgba(18,18,18,0.4) 0%,rgba(18,18,18,1) 100%); @media(max-width: 1180px) { --bnr--height: 563px; --bnr--padding-x: 40px; --bnr--padding-y: 32px; } @media(max-width: 769px) { --bnr--radius: 0px; } } .pbds-banner, .pbds-banner * { &.left-top { --bnr--align-y: flex-start; --bnr--align-x: flex-start; } &.left-center { --bnr--align-y: center; --bnr--align-x: flex-start; } &.left-bottom { --bnr--align-y: flex-end; --bnr--align-x: flex-start; } &.center-top { --bnr--align-y: flex-start; --bnr--align-x: center; } &.center-center { --bnr--align-y: center; --bnr--align-x: center; } &.center-bottom { --bnr--align-y: flex-end; --bnr--align-x: center; } &.right-top { --bnr--align-y: flex-start; --bnr--align-x: flex-end; } &.right-center { --bnr--align-y: center; --bnr--align-x: flex-end; } &.right-bottom { --bnr--align-y: flex-end; --bnr--align-x: flex-end; } } .pbds-banner { width: 100%; height: var(--bnr--height); aspect-ratio: var(--bnr--aspect); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--bnr--radius); box-shadow: var(--bnr--shadow); .content { width: 100%; height: 100%; position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: var(--bnr--align-y,flex-end); align-items: var(--bnr--align-x,flex-start); padding: var(--bnr--padding-y) var(--bnr--padding-x); text-decoration: none; .title { order: 2; width: 100%; max-width: var(--bnr--content-max,100%); margin: 0; font-size: var(--bnr--title-font); font-weight: var(--bnr--title-weight,300); line-height: var(--bnr--title-line,1.2); color: var(--bnr--font-color,inherit); text-align: var(--bnr--align-x,normal); } .subtitle { order: 1; width: 100%; max-width: var(--bnr--content-max); margin: 0 0 var(--bnr--subtitle-spacer); font-size: var(--bnr--subtitle-font); font-weight: var(--bnr--subtitle-weight,500); line-height: var(--bnr--subtitle-line,1.2); text-transform: var(--bnr--subtitle-transform,normal); letter-spacing: var(--bnr--subtitle-spacing,0.5px); color: var(--bnr--font-color,inherit); text-align: var(--bnr--align-x,normal); } .cta-wrapper { order: 3; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 20px; padding: 20px 0 0; @media(max-width: 769px) { width: 100%; flex-direction: column; justify-content: center; .pbds-btn.prm, .pbds-btn.sec { width: 100%; } } } } .media { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; &:before { width: 100%; height: 100%; display: block; content: ""; position: absolute; top: 0px; left: 0px; z-index: 1; background: var(--bnr--fx,transparent); opacity: 0.55; } > img { width: 100%; height: 100%; display: block; position: relative; z-index: -1; object-fit: cover; object-position: center; } } } .pbds-banner.modular { .content { .cta-wrapper { display: grid; grid-template-columns: 100%; grid-template-rows: 0px; overflow: hidden; padding: 0; transition: grid-template-rows 0.3s ease-out, padding 0.3s ease-out; } } .media { &:before { opacity: 1; } } &:hover { .content { opacity: 1; .cta-wrapper { padding: 20px 0 4px; grid-template-rows: 1fr; } } .media { &:before { animation: bannerHoverDarkFx; animation-duration: 0.8s; animation-fill-mode: forwards; } } } } .pbds-banner.content { .content { .title { order: 1; } .subtitle { order: 2; margin: 8px 0 0; } } } .pbds-banner.cta-collapse { .content { .cta-wrapper { display: grid; grid-template-columns: 100%; grid-template-rows: 0fr; overflow: hidden; padding: 0; transition: grid-template-rows 0.3s ease-out, padding 0.3s ease-out; > b { overflow: hidden; display: block; } @media (max-width: 1180px) { padding: var(--bnr--cta-spacer) 0 0; grid-template-rows: 1fr; > * { justify-self: start; } } } } &:hover { .content { .cta-wrapper { padding: var(--bnr--cta-spacer) 0 0; grid-template-rows: 1fr; } } } } .pbds-banner { &:not(.hover-dark-fx):hover .media:before { animation: bannerHoverFx; animation-duration: 0.8s; animation-fill-mode: forwards; } &.hover-no-fx:hover .media:before { animation: none !important; } &.hover-dark-fx:hover .media:before { animation: bannerHoverDarkFx; animation-duration: 0.8s; animation-fill-mode: forwards; } } /* CARD DE PROJETO ARCHTRENDS */ .pbds-card--archtrends-project { width: var(--card--size); aspect-ratio: 310 / 390; display: grid; grid-template-columns: 100%; grid-template-rows: 84% 1fr; grid-template-areas: "image" "content"; border-radius: var(--box-radius); overflow: hidden; box-shadow: var(--shadow); background: var(--clr-white); .image { grid-area: image; width: 100%; height: 100%; position: relative; isolation: isolate; > a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1; object-fit: cover; object-position: center; &:before { width: 100%; height: 100%; display: block; content: ""; position: absolute; top: 0; left: 0; z-index: 2; background: var(--card--fx); opacity: 0; transition: opacity 0.3s ease-out; } > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; position: relative; top: 0; left: 0; z-index: 1; } } .title { width: calc(100% - 30px); display: block; font-size: 1rem; font-weight: 500; color: var(--clr-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; z-index: 5; bottom: 18px; left: 15px; opacity: 0; transition: opacity 0.3s ease-out; } .shortcut { width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: rgba(34,34,34,0.5); position: absolute; z-index: 5; top: 18px; right: 15px; opacity: 0; transition: opacity 0.3s ease-out; } } .content { grid-area: content; width: 100%; height: 100%; a { display: grid; padding: 13px 13px 15px; grid-template-columns: 35px 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "avatar name" "avatar locale"; column-gap: 5px; text-decoration: none; } .avatar { grid-area: avatar; width: 35px; height: 35px; display: block; overflow: hidden; border-radius: 50%; position: relative; img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } } .name { grid-area: name; display: block; font-size: 1rem; font-weight: 300; color: var(--clr-gray-700); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .locale { grid-area: locale; display: block; font-size: 0.875rem; font-weight: 400; color: var(--clr-gray-300); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } &:hover { .image { &:before, .title, .shortcut { opacity: 1; } } } @media (max-width: 1180px) { .image { &:before, .title, .shortcut { opacity: 1; } } } } .pbds-card--archtrends-post { width: var(--card--size); aspect-ratio: 310 / 390; display: grid; grid-template-columns: 100%; grid-template-rows: 50.5% 1fr; grid-template-areas: "image" "content"; border-radius: var(--box-radius); overflow: hidden; box-shadow: var(--shadow); background: var(--clr-white); .image { grid-area: image; width: 100%; height: 100%; position: relative; isolation: isolate; > a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1; object-fit: cover; object-position: center; > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; position: relative; top: 0; left: 0; z-index: 1; } } .shortcut { width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: rgba(34,34,34,0.5); position: absolute; z-index: 5; top: 24px; right: 24px; opacity: 0; transition: opacity 0.3s ease-out; } } .content { grid-area: content; width: 100%; height: 100%; display: grid; grid-template-columns: 100%; grid-template-rows: 1fr 44px; grid-template-areas: "article" "author"; padding: 30px 20px 15px; .article { grid-area: article; display: block; text-decoration: none; .title { display: -webkit-box; font-size: 1.3125rem; font-weight: 300; color: var(--clr-gray-700); -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; padding: 0 4px; margin: 0 0 16px; } .post { display: none; color: var(--clr-gray-700); } } .author { border-top: 1px solid var(--clr-gray-250); display: grid; padding: 16px 0px 0px; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "avatar name" "avatar locale"; column-gap: 16px; text-decoration: none; } .avatar { grid-area: avatar; width: 32px; height: 32px; display: block; overflow: hidden; border-radius: 50%; position: relative; img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } } .name { grid-area: name; display: block; font-size: 1rem; font-weight: 300; color: var(--clr-gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .occupation { grid-area: locale; display: block; font-size: 0.75rem; font-weight: 400; color: var(--clr-gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } &:hover { .image { .shortcut { opacity: 1; } } } } .pbds-carousel--archtrends .pbds-carousel--archtrends-posts li:first-of-type > .pbds-card--archtrends-post .content .article .title { -webkit-line-clamp: 4; } @media (min-width: 1180px) { .pbds-card--archtrends-post { aspect-ratio: 261 / 329; } .pbds-card--archtrends-post .image .shortcut { top: 15px; right: 15px; opacity: 1 !important; } .pbds-carousel--archtrends .pbds-carousel--archtrends-posts li:first-of-type > .pbds-card--archtrends-post { grid-template-columns: 56% 1fr; grid-template-rows: auto; grid-template-areas: "image content"; } .pbds-carousel--archtrends .pbds-carousel--archtrends-posts li:first-of-type > .pbds-card--archtrends-post .image { aspect-ratio: 367 / 318; } .pbds-carousel--archtrends .pbds-carousel--archtrends-posts li:first-of-type > .pbds-card--archtrends-post .content { padding: 15px 17px; grid-template-rows: 1fr calc(15px + 48px); } .pbds-carousel--archtrends .pbds-carousel--archtrends-posts li:first-of-type > .pbds-card--archtrends-post .content .article .title { -webkit-line-clamp: 3; font-size: 1.325rem; } .pbds-carousel--archtrends .pbds-carousel--archtrends-posts li:first-of-type > .pbds-card--archtrends-post .content .article .post { max-height: 116px; margin: 0 0 16px; display: block; overflow: hidden; text-overflow: ellipsis; } .pbds-carousel--archtrends .pbds-carousel--archtrends-posts li:first-of-type > .pbds-card--archtrends-post .content .author { height: calc(48px + 15px); grid-template-columns: 48px 1fr; column-gap: 18px; padding: 10px 0 0; } .pbds-carousel--archtrends .pbds-carousel--archtrends-posts li:first-of-type > .pbds-card--archtrends-post .content .avatar { width: 48px; height: 48px; align-self: center; } .pbds-carousel--archtrends .pbds-carousel--archtrends-posts li:first-of-type > .pbds-card--archtrends-post .content .name { align-self: end; } .pbds-carousel--archtrends .pbds-carousel--archtrends-posts li:first-of-type > .pbds-card--archtrends-post .content .occupation { align-self: end; } } .pbds-modal { box-sizing: border-box; width: var(--modal--width); max-width: var(--modal--max-width); border: none; padding: var(--modal--padding); border-radius: var(--modal--radius); background: var(--modal--background,#fff) !important; .header { display: flex; justify-content: space-between; align-items: center; margin: 0 0 20px; &:not(:has(.title)) { justify-content: flex-end; } } .footer { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 20px 0 0; } &::backdrop { background-color: var(--matte); } @media (max-width: 769px) { max-width: 100dvh; } &.channel-select { .body { ul { grid-template-columns: 100%; li { display: flex; justify-content: space-between; align-items: center; padding: 30px; gap: var(--spacer); border-radius: var(--modal--radius); background: var(--clr-white); .dialog-content { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; gap: 5px; &:has(> img) { align-items: center; flex-direction: row; } } .pbds-btn { &.out { min-width: 194px; } } @media (max-width: 600px) { flex-direction: column; align-items: flex-start; .pbds-btn { width: 100%; } } } } } @media(max-width: 769px) { width: 100%; border-radius: 0; margin-bottom: 0px; } } } .pbds-modal, .pbds-modal *, .pbds-modal::backdrop { --modal--max-width: 729px; --modal--width: calc(100% - 40px); --modal--radius: 10px; --modal--padding: 20px 20px 40px; --modal--background: var(--clr-white); --matte: rgba(0,0,0,0.54); } .pbds-modal.channel-select, .pbds-modal.channel-select * { --modal--padding: 20px; } #toast-container { position: fixed; right: 20px; top: 100px; z-index: var(--z-800); } @media (max-width: 769px) { #toast-container { left: 20px; } } .pbds-toast, .pbds-toast * { --notification-bg: var(--clr-gray-100); --notification-color: var(--clr-gray-700); --notificationtimeout: 5s; --border-radius: 15px; --shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); &[data-timeout="5s"], &[data-timeout="5s"] *, &[data-timeout="default"], &[data-timeout="default"] * { --notificationtimeout: 5s; } &[data-timeout="8s"], &[data-timeout="8s"] * { --notificationtimeout: 8s; } &[data-timeout="10s"], &[data-timeout="10s"] * { --notificationtimeout: 10s; } &[data-timeout="15s"], &[data-timeout="15s"] * { --notificationtimeout: 15s; } &[data-status="warning"], &[data-timeout="warning"] * { --notification-bg: var(--clr-warning-100); --notification-color: var(--clr-warning-400); } &[data-status="alert"], &[data-timeout="alert"] * { --notification-bg: var(--clr-warning-100); --notification-color: var(--clr-warning-400); } &[data-status="error"], &[data-timeout="error"] * { --notification-bg: var(--clr-error-100); --notification-color: var(--clr-error-400); } &[data-status="success"], &[data-timeout="success"] * { --notification-bg: var(--clr-success-100); --notification-color: var(--clr-success-400); } } .pbds-toast { .notification-container { width: 100%; max-width: 402px; display: grid; grid-template-columns: 26px 1fr auto; grid-template-areas: "icon content action"; gap: 10px; border-radius: var(--border-radius); -webkit-box-shadow: var(--shadow); box-shadow: var(--shadow); padding: 14px 10px; background: var(--notification-bg); margin-bottom: 10px; position: relative; &:before { width: calc(100% - 40px); height: 2px; display: none; content: ""; border-radius: 1px; background: var(--clr-white); position: absolute; bottom: 5px; left: 20px; z-index: 5; } &:after { width: 0%; height: 2px; display: none; content: ""; border-radius: 1px; background: var(--notification-color); position: absolute; bottom: 5px; left: 20px; z-index: 6; } .icon { grid-area: icon; background-color: var(--notification-bg) !important; align-self: center; display: flex; justify-content: center; align-items: center; } .action { background-color: var(--notification-bg) !important; grid-area: action; align-self: center; display: flex; justify-content: center; align-items: center; } .content { /*align-self: center;*/ align-self: left; /*display: flex; justify-content: flex-start; flex-direction: column;*/ align-items: left; /*align-items: center;*/ font-size: 1rem; font-weight: 400; line-height: 1.2; color: var(--color-darkest); .title { font-weight: 700; font-size: 1.125rem; } .total { display: none; /* position: absolute;*/ right: 52px; background-color: white; padding: 2px 7px; border-radius: 5px; font-size: 12px; font-weight: 600; } .message { display: block; } } } &[data-timeout]:not([data-timeout=""]) { .notification-container { /* animation-delay: var(--notificationtimeout); */ animation-name: notification; /* animation-duration: 0.25s; */ opacity: 1; visibility: visible; /* animation-fill-mode: forwards; */ &:after, &:before { display: block; } &:after { animation-name: notificationbar; animation-duration: var(--notificationtimeout); } } } } @keyframes notificationbar { 0% { width: 0%; } 100% { width: calc(100% - 40px); } } .pbds-search, .pbds-search * { box-sizing: border-box; --search-field--height: 145px; --search--padding-y: 40px; --search--shadow: 0px 20px 35px 0px rgba(0,0,0,0.16); --search-presesults--spacer: 8px; --divider: 1px solid var(--clr-gray-100); --input-mark--border-size: 1px; --input-mark--check: var(--clr-link-400); --input-mark--spacer: 4px; @media (max-width: 769px) { --search-field--height: 126px; --search--padding-y: 20px; --search-presesults--spacer: 16px; } } .pbds-search:has(.channels--container.noShow), .pbds-search:has(.channels--container.noShow) * { --search-field--height: 104px; @media (max-width: 769px) { --search-field--height: 62px; } } .pbds-search { width: 100%; display: none; position: fixed; top: 0; right: 0; padding: 0; z-index: var(--z-600); -webkit-box-shadow: var(--search--shadow); -moz-box-shadow: var(--search--shadow); box-shadow: var(--search--shadow); overflow-y: auto; @media (max-width: 769px) { height: 100dvh; } &:before { width: 100dvw; height: 100dvh; display: block; background: rgba(0,0,0,0.3); content: ""; position: fixed; top: 0; left: 0; z-index: 1; } .pbds-search-container { position: relative; z-index: var(--z-700); background: var(--clr-white); } .search-wrapper--field { min-height: var(--search-field--height); padding-top: var(--search--padding-y); form { display: grid; row-gap: 20px; column-gap: 16px; grid-template-columns: 18px 1fr auto auto; grid-template-areas: "icon field clear submit close" "channels channels channels channels channels"; > img { grid-area: icon; align-self: center; } > label { grid-area: field; min-height: 0; align-self: center; &:before { display: none; } input { height: 1.5rem !important; min-height: 0 !important; padding: 0 !important; font-size: 1.25rem; font-weight: 300; color: var(--clr-gray-700); outline: none !important; box-shadow: none !important; &::placeholder { font-size: 1.25rem; font-weight: 300; color: var(--clr-gray-400) !important; } &.mobile { display: none; } @media (max-width: 769px) { &.desktop { display: none; } &.mobile { display: block; } } } } > button.jsSubmitSearch { border: none; background: none; display: none; align-self: center; } > button.pbds-btn.jsClearSearch { display: none; align-self: center; } .pbds-btn.close { grid-area: close; border: 0px !important; padding: 0; align-self: center; } .channels--container { grid-area: channels; display: flex; justify-content: flex-start; align-items: center; gap: 16px; @media (max-width: 769px) { width: calc(100% + 2 * var(--container-margins)); margin-left: calc(0px - var(--container-margins)); display: block; align-items: flex-start; &.show .wrapper { display: flex; } &.show .label span.icon { transform: rotate(-180deg); } } .label { padding: 0; border: 0; font-size: 0.875rem; font-weight: 700; color: var(--clr-gray-700); background: transparent; pointer-events: none; &:hover { cursor: default; } span:not([class]):after { display: inline; content: ":"; } span.icon { display: none; } @media (max-width: 769px) { width: 100%; padding: calc(var(--search--padding-y) + 2px) var(--container-margins); display: flex; justify-content: space-between; align-items: center; text-align: left; pointer-events: auto; border-top: var(--divider); font-weight: 500; &:hover { cursor: pointer; } span:not([class]):after { display: none; } span.icon { display: block; } } } .wrapper { display: flex; justify-content: flex-start; align-items: center; gap: 16px; @media (max-width: 769px) { display: none; flex-direction: column; align-items: flex-start; border-top: var(--divider); padding: var(--search--padding-y) var(--container-margins); } label { span { font-size: 0.875rem !important; line-height: 1.4; } } } } } } .search-wrapper--preview { padding-top: var(--search--padding-y); padding-bottom: var(--search--padding-y); @media (max-width: 769px) { min-height: calc(100dvh - var(--search-field--height)); } .results--autocomplete { display: none; } .results--wrapper { display: flex; justify-content: flex-start; align-items: flex-start; gap: 60px; @media (max-width: 769px) { flex-direction: column; gap: 41px; } .preresults--group { position: relative; @media (max-width: 769px) { &.recent:before { width: 100dvw; height: 1px; display: block; content: ""; position: absolute; top: -21px; left: -20px; background: var(--clr-gray-100); } } .title { display: block; margin: 0 0 var(--search-presesults--spacer); font-size: 1rem; font-weight: 500; @media (max-width: 769px) { font-size: 0.875rem; } } ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; gap: var(--search-presesults--spacer); a { font-size: 0.875rem; font-weight: 300; color: var(--clr-gray-700) !important; text-decoration: none !important; } } } } } .pbds-search-container > hr { margin: 0; border-top: var(--divider); } .search-suggestions { h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 500; text-transform: none; } ul { margin: 0; padding: 0; list-style: none; li { margin: 0 0 12px; a { display: flex; justify-content: flex-start; align-items: flex-end; gap: 4px; font-size: 0.875rem; font-weight: 300; color: var(--clr-gray-700); b { font-weight: 500; } &:hover { text-decoration: none !important; svg, svg * { stroke: var(--clr-black); } } } } } } } .cc-window,.cc-window *{box-sizing:border-box}.cc-grower .cc-window,.cc-window{align-items:center!important;background:rgba(0,0,0,.8)!important;display:flex!important;flex-direction:column!important;height:100vh;justify-content:flex-start!important;left:0!important;max-height:100vh!important;max-width:100vw!important;padding-top:48px!important;position:fixed!important;top:0!important;width:100vw!important;z-index:100000000}.cc-grower .cc-window .cc-message-container,.cc-window .cc-message-container{background:#fff;flex-grow:0!important;margin:0 0 -1px;max-width:460px!important;padding:50px 70px 30px;width:80%}.cc-grower .cc-window .cc-message-container:before,.cc-window .cc-message-container:before{background:url(https://www.portobello.com.br/template/images/logo.svg) 0 0 no-repeat;content:"";display:block;height:30px;margin:0 0 30px;width:100%}.cc-grower .cc-window .cc-message-container a,.cc-window .cc-message-container a{color:#212529;opacity:1}.cc-grower .cc-window .cc-message-container>span,.cc-window .cc-message-container>span{font-size:14px;margin:0}.cc-grower .cc-window .cc-compliance,.cc-window .cc-compliance{display:grid;grid-template-columns:100%;grid-template-rows:42px;max-width:460px;width:80%;grid-gap:10px;background:#fff;flex-grow:0!important;gap:10px;padding:0 30px 50px}.cc-grower .cc-window .cc-compliance>a,.cc-window .cc-compliance>a{align-items:center;background:none!important;border:1px solid #cecece!important;border-radius:0;color:#08234e!important;display:flex;font-size:14px;font-weight:700;height:42px;justify-content:center;margin:0;max-width:100%;opacity:1!important;-webkit-text-decoration:none!important;text-decoration:none!important;width:100%}.cc-grower .cc-window .cc-compliance>a span,.cc-window .cc-compliance>a span{color:#08234e!important;font-weight:700}.cc-grower .cc-window .cc-compliance>a:hover,.cc-window .cc-compliance>a:hover{-webkit-text-decoration:none!important;text-decoration:none!important}.cc-grower .cc-window.cc-invisible,.cc-window.cc-invisible{display:none!important;font-weight:300}.cmp-body{z-index:100000001!important}@media (max-width:992px){.cc-grower .cc-window .cc-message-container,.cc-window .cc-message-container{max-width:312px!important;padding:30px;width:90%}.cc-grower .cc-window .cc-compliance,.cc-window .cc-compliance{flex:0!important;max-width:312px!important;width:90%}}.cc-window.cc-banner{background:none!important;bottom:0!important;height:auto!important;left:20px!important;padding:0!important;right:auto!important;top:auto!important;width:360px!important}.cc-grower .cc-window .cc-message-container,.cc-window .cc-message-container{background:#f5f6f7;padding:25px;top:0!important;width:360px}.cc-grower .cc-window .cc-compliance,.cc-window .cc-compliance{background:#f5f6f7;padding:0 25px 25px;width:360px}.cc-grower .cc-window .cc-message-container:before,.cc-window .cc-message-container:before{display:none}.cc-grower .cc-window .cc-compliance>a.cmp-pref-link,.cc-window .cc-compliance>a.cmp-pref-link{border:none!important}.cc-grower .cc-window .cc-compliance>a.cmp-pref-link>span,.cc-window .cc-compliance>a.cmp-pref-link>span{font-weight:300!important}@media (max-width:769px) and (min-width:601px){.cc-color-override--222512206.cc-window{height:100vh;padding-top:48px!important}}@media (max-width:600px){.cc-window.cc-banner{left:0!important}.cc-grower .cc-window .cc-compliance,.cc-grower .cc-window .cc-message-container,.cc-window .cc-compliance,.cc-window .cc-message-container,.cc-window.cc-banner{max-width:100vw!important;width:100vw!important}}@media (max-width:769px){.cc-grower .cc-window,.cc-window{border-radius:0;bottom:0;height:auto;padding:0!important;top:auto!important}} /*# sourceMappingURL=dev.bundle.1fe92bea83149efc1089.css.map*/