.aesquerda { float:left; } .adireita { float:right; } .center { margin-right: auto; margin-left: auto; } .thin { font-weight: 100; } .extralight{ font-weight: 200; } .light { font-weight: 300; } .regular { font-weight: 400; } .medium { font-weight: 500; } .semibold { font-weight: 600; } .bold { font-weight: 700; } .extrabold { font-weight: 800; } .black { font-weight: 900; } .italic { font-style: italic; } .capitalize { text-transform: capitalize; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .row { display: flex; flex-wrap: wrap; } .left{ margin-right: .6rem; } .right{ margin-left: .6rem; } /* SCROLLBAR */ *::-webkit-scrollbar { height: .8rem; width: .8rem; } *::-webkit-scrollbar-track { border-radius: var(--radius); background-color: transparent; } *::-webkit-scrollbar-track:hover { background-color: transparent; } *::-webkit-scrollbar-track:active { background-color: transparent; } *::-webkit-scrollbar-thumb { border-radius: var(--radius); background-color: var(--base-400); transition: var(--smooth); } *::-webkit-scrollbar-thumb:hover { background-color: var(--base-500); } *::-webkit-scrollbar-thumb:active { background-color: var(--base-500); } /* ICONES */ svg.iconify{ color: var(--base-600); font-size: 2.4rem; } svg.iconify path{ stroke-width: .2rem; } /* BUTTONS */ .btn, input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button{ display: inline-flex; justify-content: center; align-items: center; column-gap: calc(var(--gap) / 3); min-height: 4.8rem; width: auto; --btn-font-size: 1.7rem; font-size: var(--btn-font-size); font-weight: 500; text-align: center; color: var(--white); text-transform: uppercase; background-color: var(--base-500); line-height: 1.1; border: 0; outline: 0; border-radius: var(--radius); padding: .3rem 2.4rem .3rem; cursor: pointer; transition: var(--smooth); } .btn:hover{ background-color: var(--base-600); } .btn:active{ background-color: var(--base-700); } .btn:disabled, .btn-disabled{ background-color: var(--base-100); color: var(--base-400); opacity: .5; } .btn svg{ color: inherit; font-size: calc(var(--btn-font-size) + .5rem); position: relative; } .btn-engage{ background-color: var(--apoio); color: var(--white); } .btn-engage:hover{ background-color: color-mix(in srgb, var(--apoio) 85%, black); color: var(--white); } .btn-engage:active{ background-color: color-mix(in srgb, var(--apoio) 70%, black); color: var(--white); } .btn-engage:disabled, .btn-engage-disabled{ background-color: var(--engage-950); color: var(--base-700); opacity: .5; } .btn-transparent{ background-color: transparent; color: var(--base-color); } .btn-transparent:hover{ background-color: transparent; color: var(--base-color); opacity: .5; } .btn-transparent:active{ background-color: transparent; color: var(--base-color); } .btn-transparent:disabled, .btn-transparent-disabled{ background-color: transparent; color: var(--base-500); opacity: .5; } .btn-user{ background-color: var(--user-500); color: var(--white); } .btn-user:hover{ background-color: var(--user-600); color: var(--white); } .btn-user:active{ background-color: var(--user-700); color: var(--white); } .btn-user:disabled, .btn-user-disabled{ background-color: var(--user-950); color: var(--base-700); opacity: .5; } .btn-soft{ background-color: var(--user-200); color: var(--user-950); } .btn-soft:hover{ background-color: var(--user-300); color: var(--user-950); } .btn-soft:active{ background-color: var(--user-400); color: var(--user-950); } .btn-soft:disabled, .btn-soft-disabled{ background-color: var(--user-950); color: var(--base-500); opacity: .5; } .btn-white{ background-color: var(--white); color: var(--base-950); } .btn-white:hover{ background-color: var(--base-100); color: var(--base-950); } .btn-white:active{ background-color: var(--base-200); color: var(--base-950); } .btn-white:disabled, .btn-white-disabled{ background-color: var(--white); color: var(--base-500); opacity: .5; } .btn-black{ background-color: var(--black); color: var(--white); } .btn-black:hover{ background-color: var(--base-800); color: var(--white); } .btn-black:active{ background-color: var(--base-900); color: var(--white); } .btn-black:disabled, .btn-black-disabled{ background-color: var(--black); color: var(--base-500); opacity: .5; } .btn-light{ background-color: var(--base-200); color: var(--base-700); } .btn-light:hover{ background-color: var(--base-300); } .btn-light:active{ background-color: var(--base-400); } .btn-light:disabled,.btn-light-disabled{ background-color: var(--base-200); color: var(--base-500); opacity: .5; } .btn-dark{ background-color: var(--base-800); color: var(--base-100); } .btn-dark:hover{ background-color: var(--base-700); color: var(--base-100); } .btn-dark:active{ background-color: var(--base-600); color: var(--base-100); } .btn-dark:disabled,.btn-dark-disabled{ background-color: var(--base-800); color: var(--base-400); opacity: .5; } .btn-info{ background-color: var(--info-alt); color: var(--info); } .btn-info:hover{ background-color: var(--info); color: var(--info-alt); } .btn-info:active{ background-color: var(--info); } .btn-info:disabled, .btn-info-disabled{ background-color: var(--info-alt); color: var(--info); opacity: .5; } .btn-success{ background-color: var(--success-alt); color: var(--success); } .btn-success:hover{ background-color: var(--success); color: var(--success-alt); } .btn-success:active{ background-color: var(--success); } .btn-success:disabled, .btn-success-disabled{ background-color: var(--success-alt); color: var(--success); opacity: .5; } .btn-warning{ background-color: var(--warning-alt); color: var(--warning); } .btn-warning:hover{ background-color: var(--warning); color: var(--warning-alt); } .btn-warning:active{ background-color: var(--warning); } .btn-warning:disabled, .btn-warning-disabled{ background-color: var(--warning-alt); color: var(--warning); opacity: .5; } .btn-erro{ background-color: var(--erro-alt); color: var(--erro); } .btn-erro:hover{ background-color: var(--erro); color: var(--erro-alt); } .btn-erro:active{ background-color: var(--erro); } .btn-erro:disabled, .btn-erro-disabled{ background-color: var(--erro-alt); color: var(--erro); opacity: .5; } .btn-tip{ background-color: var(--tip-alt); color: var(--tip); } .btn-tip:hover{ background-color: var(--tip); color: var(--tip-alt); } .btn-tip:active{ background-color: var(--tip); } .btn-tip:disabled, .btn-tip-disabled{ background-color: var(--tip-alt); color: var(--tip); opacity: .5; } .btn-whatsapp{ background-color: var(--whatsapp); color: var(--white); } .btn-whatsapp:hover{ background-color: var(--whatsapp-alt); color: var(--whatsapp); } .btn-whatsapp:active{ background-color: var(--whatsapp-alt); } .btn-whatsapp:disabled, .btn-whatsapp-disabled{ background-color: var(--whatsapp); color: var(--whatsapp-alt); opacity: .5; } .btn-whatsapp-light{ background-color: var(--white); color: var(--whatsapp); border: .1rem solid var(--whatsapp); } .btn-whatsapp-light:hover{ background-color: var(--whatsapp); color: var(--white); } .btn-whatsapp-light:active{ background-color: var(--whatsapp); } .btn-whatsapp-light:disabled, .btn-whatsapp-light-disabled{ background-color: var(--base-200); color: var(--whatsapp); opacity: .5; } /* Instagram */ .btn-instagram { background-color: var(--instagram); color: var(--white); } .btn-instagram:hover { background-color: color-mix(in srgb, var(--instagram) 85%, black); color: var(--white); } .btn-instagram:active { background-color: color-mix(in srgb, var(--instagram) 70%, black); color: var(--white); } .btn-instagram:disabled, .btn-instagram-disabled { background-color: var(--base-700); color: var(--white); opacity: .5; } /* Facebook */ .btn-facebook { background-color: var(--facebook); color: var(--white); } .btn-facebook:hover { background-color: color-mix(in srgb, var(--facebook) 85%, black); color: var(--white); } .btn-facebook:active { background-color: color-mix(in srgb, var(--facebook) 70%, black); color: var(--white); } .btn-facebook:disabled, .btn-facebook-disabled { background-color: var(--base-700); color: var(--white); opacity: .5; } /* X (Twitter) */ .btn-x { background-color: var(--base-700); color: var(--white); } .btn-x:hover { background-color: color-mix(in srgb, var(--base-700) 85%, black); color: var(--white); } .btn-x:active { background-color: color-mix(in srgb, var(--base-700) 70%, black); color: var(--white); } .btn-x:disabled, .btn-x-disabled { background-color: var(--base-700); color: var(--white); opacity: .5; } /* TikTok */ .btn-tiktok { background-color: var(--base-700); color: var(--white); } .btn-tiktok:hover { background-color: color-mix(in srgb, var(--base-700) 85%, black); color: var(--white); } .btn-tiktok:active { background-color: color-mix(in srgb, var(--base-700) 70%, black); color: var(--white); } .btn-tiktok:disabled, .btn-tiktok-disabled { background-color: var(--base-700); color: var(--white); opacity: .5; } /* Telegram */ .btn-telegram { background-color: var(--telegram); color: var(--white); } .btn-telegram:hover { background-color: color-mix(in srgb, var(--telegram) 85%, black); color: var(--white); } .btn-telegram:active { background-color: color-mix(in srgb, var(--telegram) 70%, black); color: var(--white); } .btn-telegram:disabled, .btn-telegram-disabled { background-color: var(--base-700); color: var(--white); opacity: .5; } /* Spotify */ .btn-spotify { background-color: var(--spotify); color: var(--white); } .btn-spotify:hover { background-color: color-mix(in srgb, var(--spotify) 85%, black); color: var(--white); } .btn-spotify:active { background-color: color-mix(in srgb, var(--spotify) 70%, black); color: var(--white); } .btn-spotify:disabled, .btn-spotify-disabled { background-color: var(--base-700); color: var(--white); opacity: .5; } /* Pinterest */ .btn-pinterest { background-color: var(--pinterest); color: var(--white); } .btn-pinterest:hover { background-color: color-mix(in srgb, var(--pinterest) 85%, black); color: var(--white); } .btn-pinterest:active { background-color: color-mix(in srgb, var(--pinterest) 70%, black); color: var(--white); } .btn-pinterest:disabled, .btn-pinterest-disabled { background-color: var(--base-700); color: var(--white); opacity: .5; } /* YouTube */ .btn-youtube { background-color: var(--youtube); color: var(--white); } .btn-youtube:hover { background-color: color-mix(in srgb, var(--youtube) 85%, black); color: var(--white); } .btn-youtube:active { background-color: color-mix(in srgb, var(--youtube) 70%, black); color: var(--white); } .btn-youtube:disabled, .btn-youtube-disabled { background-color: var(--base-700); color: var(--white); opacity: .5; } /* YouTube */ .btn-airbnb{ background-color: var(--airbnb); color: var(--white); } .btn-airbnb:hover { background-color: color-mix(in srgb, var(--airbnb) 85%, black); color: var(--white); } .btn-airbnb:active { background-color: color-mix(in srgb, var(--airbnb) 70%, black); color: var(--white); } .btn-airbnb:disabled, .btn-airbnb-disabled { background-color: var(--base-700); color: var(--white); opacity: .5; } .btn-icon{ aspect-ratio: 1/1; padding: 0 !important; } .btn-icon svg{ font-size: 2.4rem; color: inherit; } .btn-anim svg{ transition: var(--smooth); } .btn-anim:hover svg{ transform: translateX(.6rem); } .btn-rounded{ border-radius: var(--btn-rounded); } /* Tamanhos */ @media screen and (min-width: 1440px) { .btn-xs{ min-height: 3.6rem; --btn-xs-font-size: 1.3rem; font-size: var(--btn-xs-font-size); padding: .3rem 1.6rem .4rem; } .btn-xs svg{ font-size: calc(var(--btn-xs-font-size) + .5rem); } .btn-icon.btn-xs svg{ font-size: 1.8rem; } .btn-sm{ min-height: 4.2rem; --btn-sm-font-size: 1.4rem; font-size: var(--btn-sm-font-size); padding: .3rem 2.0rem; } .btn-sm svg{ font-size: calc(var(--btn-sm-font-size) + .7rem); top: 0; } .btn-icon.btn-sm svg{ font-size: 1.95rem; top: 0; } .btn-md{ min-height: 5.4rem; --btn-md-font-size: 1.85rem; font-size: var(--btn-md-font-size); padding: .3rem 2.8rem .4rem; } .btn-md svg{ font-size: calc(var(--btn-md-font-size) + .5rem); } .btn-icon.btn-md svg{ font-size: 2.25rem; } .btn-lg{ min-height: 6.0rem; --btn-lg-font-size: 2.0rem; font-size: var(--btn-lg-font-size); padding: .3rem 3.2rem .4rem; } .btn-lg svg{ font-size: calc(var(--btn-lg-font-size) + .5rem); } .btn-icon.btn-lg svg{ font-size: 2.4rem; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .btn-xs{ min-height: 3.2rem; --btn-xs-font-size: 1.1rem; font-size: var(--btn-xs-font-size); padding: .3rem 1.4rem .4rem; } .btn-xs svg{ font-size: calc(var(--btn-xs-font-size) + .5rem); } .btn-icon.btn-xs svg{ font-size: 1.6rem; } .btn-sm{ min-height: 4.0rem; --btn-sm-font-size: 1.3rem; font-size: var(--btn-sm-font-size); padding: .3rem 1.8rem; } .btn-sm svg{ font-size: calc(var(--btn-sm-font-size) + .7rem); top: 0; } .btn-icon.btn-sm svg{ font-size: 1.85rem; top: 0; } .btn-md{ min-height: 5.2rem; --btn-md-font-size: 1.55rem; font-size: var(--btn-md-font-size); padding: .3rem 2.6rem .4rem; } .btn-md svg{ font-size: calc(var(--btn-md-font-size) + .5rem); } .btn-icon.btn-md svg{ font-size: 2.1rem; } .btn-lg{ min-height: 5.8rem; --btn-lg-font-size: 1.7rem; font-size: var(--btn-lg-font-size); padding: .3rem 3.0rem .4rem; } .btn-lg svg{ font-size: calc(var(--btn-lg-font-size) + .5rem); } .btn-icon.btn-lg svg{ font-size: 2.25rem; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .btn-xs { min-height: 2.8rem; --btn-xs-font-size: 1rem; font-size: var(--btn-xs-font-size); padding: .3rem 1.2rem .4rem; } .btn-xs svg { font-size: calc(var(--btn-xs-font-size) + .5rem); } .btn-icon.btn-xs svg { font-size: 1.4rem; } .btn-sm { min-height: 3.4rem; --btn-sm-font-size: 1.2rem; font-size: var(--btn-sm-font-size); padding: .3rem 1.6rem; } .btn-sm svg { font-size: calc(var(--btn-sm-font-size) + .6rem); top: 0; } .btn-icon.btn-sm svg { font-size: 1.6rem; top: 0; } .btn-md { min-height: 4.4rem; --btn-md-font-size: 1.4rem; font-size: var(--btn-md-font-size); padding: .3rem 2.2rem .4rem; } .btn-md svg { font-size: calc(var(--btn-md-font-size) + .5rem); } .btn-icon.btn-md svg { font-size: 1.9rem; } .btn-lg { min-height: 5.2rem; --btn-lg-font-size: 1.6rem; font-size: var(--btn-lg-font-size); padding: .3rem 2.6rem .4rem; } .btn-lg svg { font-size: calc(var(--btn-lg-font-size) + .5rem); } .btn-icon.btn-lg svg { font-size: 2.1rem; } } @media screen and (min-width: 0px) and (max-width: 767px) { .btn-xs { min-height: 2.4rem; --btn-xs-font-size: 0.95rem; font-size: var(--btn-xs-font-size); padding: .3rem 1.0rem .4rem; } .btn-xs svg { font-size: calc(var(--btn-xs-font-size) + .4rem); } .btn-icon.btn-xs svg { font-size: 1.3rem; } .btn-sm { min-height: 3.0rem; --btn-sm-font-size: 1.05rem; font-size: var(--btn-sm-font-size); padding: .3rem 1.4rem; } .btn-sm svg { font-size: calc(var(--btn-sm-font-size) + .5rem); top: 0; } .btn-icon.btn-sm svg { font-size: 1.5rem; top: 0; } .btn-md { min-height: 3.8rem; --btn-md-font-size: 1.3rem; font-size: var(--btn-md-font-size); padding: .3rem 2.0rem .4rem; } .btn-md svg { font-size: calc(var(--btn-md-font-size) + .5rem); } .btn-icon.btn-md svg { font-size: 1.8rem; } .btn-lg { min-height: 4.6rem; --btn-lg-font-size: 1.5rem; font-size: var(--btn-lg-font-size); padding: .3rem 2.4rem .4rem; } .btn-lg svg { font-size: calc(var(--btn-lg-font-size) + .5rem); } .btn-icon.btn-lg svg { font-size: 2rem; } } /* Tamanhos */ /* ICONES SOCIAIS */ svg[data-icon*="facebook"]:not(.btn svg) { color: var(--facebook); } svg[data-icon*="twitter"]:not(.btn svg) { color: var(--twitter); } svg[data-icon*="linkedin"]:not(.btn svg) { color: var(--linkedin); } svg[data-icon*="youtube"]:not(.btn svg) { color: var(--youtube); } svg[data-icon*="instagram"]:not(.btn svg){ color: var(--instagram); } svg[data-icon*="pinterest"]:not(.btn svg){ color: var(--pinterest); } svg[data-icon*="behance"]:not(.btn svg) { color: var(--behance); } svg[data-icon*="skype"]:not(.btn svg) { color: var(--skype); } svg[data-icon*="twitch"]:not(.btn svg) { color: var(--twitch); } svg[data-icon*="spotify"]:not(.btn svg) { color: var(--spotify); } svg[data-icon*="whatsapp"]:not(.btn svg) { color: var(--whatsapp); } svg[data-icon*="tiktok"]:not(.btn svg) { color: var(--tiktok); } svg[data-icon*="telegram"]:not(.btn svg) { color: var(--telegram); } /* LINKS */ .a-link{ font-size: inherit; color: var(--user-400); text-decoration: underline; display: inline-flex; align-items: center; gap: calc(var(--mr) / 2 - .2rem); } .a-link:visited{ color: var(--user-400);} .a-link:hover, .a-link:visited:hover{ color: var(--user-500); } .a-link svg{ color: inherit; transition: inherit; font-size: inherit; } /* TIPS */ .tip{ display: block; width: 100%; padding: .8rem 1.2rem; margin-top: .2rem; border-radius: var(--radius); background: var(--base-200); color: var(--base-500); font-size: 1.4rem; font-weight: 500; line-height: 1.5; } .tip svg{ color: inherit; font-size: 1.5rem; display: inline-block; vertical-align: middle; margin-right: .6rem; position: relative; top: -.1rem; } .tip.info { color: var(--info); background-color: var(--info-alt); } .tip.success{ color: var(--success); background-color: var(--success-alt); } .tip.warning{ color: var(--warning); background-color: var(--warning-alt); } .tip.erro { color: var(--erro); background-color: var(--erro-alt); } .tip.tips { color: var(--tip); background-color: var(--tip-alt); } .tip em{ display: inline-block; background-color: var(--base-600); border-radius: .3rem; padding: .1rem .6rem; color: var(--white); } .tip a{ color: inherit; font-style: italic; font-weight: 500; text-decoration: underline; } .tip a:hover{ color: var(--base-700); } /* FONTES */ h1{ font-size: 2.6rem; font-weight: bold; line-height: 1.1; } h1:has(+ h2){ margin-bottom: .4rem; } h2{ font-size: 1.6rem; font-weight: normal; line-height: 1.3; } h2:has(+ h3){ margin-bottom: .4rem; } h3{ font-size: 1.3rem; font-weight: normal; line-height: 1.4; } h4{ font-size: 1.1rem; font-weight: 500; line-height: 1.4; } /* p{ display: inline; } */ :is(h1, h2, h3, h4, h5, h6, p, ul li, ol li, label, th, td, legend) svg.iconify{ vertical-align: middle; font-size: inherit; color: inherit; } h1 svg.iconify{ position: relative; top: -.2rem !important; } /* FORM */ .box{ display: flex; flex-direction: column; } .grid{ display: grid; } .item{ width: 100%; padding: calc(var(--gap) / 3) 0; } .item label{ display: inline-block; padding-left: .4rem; font-size: 1.5rem; font-weight: 500; } .item label:has(+ .item-field :is(input, select, textarea):required)::before{ content: '•'; color: var(--erro); font-size: inherit; margin-right: 4px; } .item:has( > .grid){ padding: 0; } .item-field{ position: relative; width: inherit; height: 5rem; font-size: 0; background-color: var(--white); border-radius: var(--radius-form); border: .2rem solid var(--base-400); } .item-field-btn{ width: inherit; font-size: 0; } .item-field-img{ width: inherit; font-size: 0; } .item-field :is(input, select, textarea){ appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 100%; border: 0; background-color: transparent; border-radius: var(--radius-form); font-size: 1.6rem; letter-spacing: 0rem; } .item-field :is(input, select, textarea)::placeholder{ font-style: oblique; color: var(--base-400); } .item-field input{ padding: 0 1.8rem; } .item-field select{ padding: 0 4rem 0 1.8rem; } .item-field :is(textarea){ padding: 1.8rem; height: 10rem; min-height: 4rem; width: 100%; min-width: 100%; } .item-field:has(textarea){ height: auto; } .item-field:has(:is(input, select, textarea):focus){ border-color: rgba(var(--user-700-rgb), .35); } .item-field :is(input:focus, select:focus, textarea:focus), :not(.item.switch) :is(input[type="checkbox"]:focus, input[type="radio"]:focus), :not(.item.switch) :is(input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible){ outline: none; box-shadow: 0 0 0 .4rem rgba(var(--user-500-rgb), .25); } /* Iconify form fields */ .item-field svg.iconify{ color: var(--primary); font-weight: normal; font-size: 1.8rem; margin-right: 1.4rem; position: absolute; top: 50%; right: 0; pointer-events: none; transform: translateY(-50%); } .item-field svg.iconify path{ stroke-width: .2rem; } .item-field::before{ color: var(--user-400); font-family: var(--font-fa); font-weight: normal; font-size: 1.5rem; margin-right: 1.4rem; position: absolute; top: 50%; right: 0; pointer-events: none; transform: translateY(-50%); } .item-field :is(input[type="color"]){ padding: .6rem 4.2rem .6rem 1.2rem; } .item-field :is(input[type="range"]){ accent-color: var(--user-500); } .item-field :is(input[type="range"])::-webkit-slider-runnable-track{ background-color: var(--user-400); height: .8rem; border-radius: .5rem; width: calc(100% - 2.4rem); } .item-field :is(input[type="range"])::-webkit-slider-thumb{ cursor: pointer; position: relative; top: -.4rem; } .item-field :is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-inner-spin-button, .item-field :is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator{ opacity: 0; -webkit-appearance: none; } .item-field input[type="number"]::-webkit-outer-spin-button, .item-field input[type="number"]::-webkit-inner-spin-button{ opacity: 0; z-index: 1; } .item-field input[type="number"]{ appearance: textfield; -moz-appearance: textfield; } .item-field :is(input[type="search"])::-webkit-search-cancel-button{ appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 1.5rem; width: 1.5rem; cursor: pointer; } .item-field :is(input[type="time"])::-webkit-calendar-picker-indicator{ background: none; } .item-field input[type="file"]{ padding-left: .2rem; color: var(--base-400); } .item-field input[type="file"]::file-selector-button, .item-field input[type="file"]::-webkit-file-upload-button{ margin: .2rem 1rem .2rem 0; height: calc(100% - .4rem); color: var(--white); font-size: 1rem; font-weight: 600; text-transform: uppercase; border-radius: calc(var(--radius-form) - .2rem); } .item-field input[type="file"]::file-selector-button:hover, .item-field input[type="file"]::-webkit-file-upload-button:hover{ opacity: .75; } .item-field input[type="button"]{ padding-left: .2rem; color: var(--base-400); } /* Variação switch */ .item.switch{ display: flex; justify-content: space-between; align-items: center; } .item.switch h4{ display: inline-block; padding-right: 0.4rem; font-size: 1.3rem; font-weight: 500; } .item.switch label{ position: relative; height: 2.8rem; width: 4.8rem; min-width: 4.8rem; background-color: var(--base-200); border: .1rem solid var(--base-300); border-radius: 1.4rem; transition: var(--smooth); cursor: pointer; } .item.switch label input{ appearance: none; } .item.switch label::before{ content: ''; position: absolute; top: .3rem; left: .3rem; display: flex; align-items: center; justify-content: center; border-radius: 1rem; height: 2rem; width: 2rem; background-color: var(--white); transition: 200ms all ease-out; } .item.switch label:active::before{ width: 2.6rem; } .item.switch label:active:has(input:checked)::before{ margin-left: 1.4rem; } .item.switch label:has(input:checked){ background-color: var(--user-400); border-color: var(--white); } .item.switch label:has(input:checked)::before{ margin-left: 2rem; transition: 200ms all ease-out; } .item.switch label:has(input:focus), .item.switch label:has(input:focus-visible){ outline: none; box-shadow: 0 0 0 .4rem rgba(var(--user-500-rgb), .25); } .item.switch label:has(input:focus) input:focus{ box-shadow: none; } /* Checkbox */ .item:not(.switch):has(.item-field-checkbox){ display: flex; align-items: center; gap: calc(var(--gap) / 2); } .item:not(.switch) .item-field-checkbox{ font-size: 0; } .item:not(.switch) .item-field-checkbox input{ position: relative; appearance: none; -webkit-appearance: none; height: 2.4rem; aspect-ratio: 1/1; border-radius: calc(var(--radius-form) - .2rem); background-color: var(--base-200); border: .1rem solid var(--base-300); transition: var(--smooth); cursor: pointer; } .item:not(.switch) .item-field-checkbox input:checked{ background-color: var(--user-400); border-color: var(--white); } .item:not(.switch) .item-field-checkbox input::before{ content: ''; opacity: 0; height: 1rem; width: .6rem; border: .2rem solid var(--white); border-top: 0; border-left: 0; display: block; position: absolute; top: 1rem; left: 1.1rem; transform: translate(-50%, -50%) rotate(45deg); transition: var(--smooth); } .item:not(.switch) .item-field-checkbox input:checked:before{ opacity: 1; } .item:not(.switch) .item-field-checkbox input:active{ background-color: var(--user-500); } /* Radio */ .item:not(.switch):has(.item-field-radio){ display: flex; align-items: center; gap: calc(var(--gap) / 2); } .item:not(.switch) .item-field-radio{ font-size: 0; } .item:not(.switch) .item-field-radio input{ position: relative; appearance: none; -webkit-appearance: none; height: 2.4rem; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--base-200); border: .1rem solid var(--base-300); transition: var(--smooth); cursor: pointer; } .item:not(.switch) .item-field-radio input:checked{ background-color: var(--user-400); border-color: var(--white); } .item:not(.switch) .item-field-radio input::before{ content: ''; opacity: 0; height: 1rem; width: .6rem; border: .2rem solid var(--white); border-top: 0; border-left: 0; display: block; position: absolute; top: 1rem; left: 1.1rem; transform: translate(-50%, -50%) rotate(45deg); transition: var(--smooth); } .item:not(.switch) .item-field-radio input:checked:before{ opacity: 1; } .item:not(.switch) .item-field-radio input:active{ background-color: var(--user-500); } /* Variação social media */ .item-social{ display: flex; width: 100%; border-radius: var(--radius-form); } .item-social label{ display: flex; align-items: center; justify-content: center; height: 4rem; width: 4rem; padding: 0; border-radius: var(--radius-form) 0 0 var(--radius-form); border: .1rem solid var(--base-300); border-right: 0; transition: var(--smooth); } .item-social label svg{ font-size: 1.6rem; transition: var(--smooth); } .item-social .item-field{ border-radius: 0 var(--radius-form) var(--radius-form) 0; } .item-social .item-field :is(input:focus, select:focus, textarea:focus){ box-shadow: none; } .item-social .item-field:has(:is(input, select, textarea):focus){ border-color: rgba(var(--user-700-rgb), .35); } .item-social:has(.item-field :is(input, select, textarea):focus) label{ border-color: rgba(var(--user-700-rgb), .35); background-color: var(--user-400); } .item-social:has(.item-field :is(input, select, textarea):focus) label svg{ color: var(--white); } .item-social:has(.item-field :is(input, select, textarea):focus){ outline: none; box-shadow: 0 0 0 .4rem rgba(var(--user-500-rgb), .25); } /* Variação Composto */ .item-comp{ display: flex; width: 100%; border-radius: var(--radius-form); } .item-comp label{ display: flex; align-items: center; justify-content: center; width: auto; padding: 0 1rem; border: .1rem solid var(--base-300); transition: var(--smooth); } .item-comp label svg{ font-size: 1.6rem; transition: var(--smooth); } .item-comp :first-child{ border-radius: var(--radius-form) 0 0 var(--radius-form); border-right: 0; } .item-comp :last-child{ border-radius: 0 var(--radius-form) var(--radius-form) 0; } .item-comp .item-field[data-input="select"], .item-comp .item-field[data-input="select"] select{ width: auto; }.item-comp .item-field :is(input:focus, select:focus, textarea:focus){ box-shadow: none; } .item-comp .item-field:has(:is(input, select, textarea):focus){ border-color: rgba(var(--user-700-rgb), .35); } .item-comp:has(.item-field :is(input, select, textarea):focus) label{ border-color: rgba(var(--user-700-rgb), .35); background-color: var(--user-400); } .item-comp:has(.item-field :is(input, select, textarea):focus) label svg{ color: var(--white); } .item-comp:has(.item-field :is(input, select, textarea):focus){ outline: none; box-shadow: 0 0 0 .4rem rgba(var(--user-500-rgb), .25); } fieldset{ background-color: var(--white); border: .1rem solid var(--base-300); padding: var(--gap); margin: var(--gap) 0; border-radius: var(--radius); } fieldset legend{ font-size: 1.2rem; text-transform: uppercase; font-weight: bolder; letter-spacing: .05rem; padding: 0 .6rem; } fieldset.ft{ background-color: var(--base-100); } fieldset.ft > legend{ background-color: var(--white); border-radius: var(--radius); border: .1rem solid var(--base-300); } fieldset.ft :is(.item-field, .item.capsule, .item.switch.capsule, .box){ background-color: var(--white); } fieldset.dropdown legend{ position: relative; } fieldset.dropdown legend .dropdown-button{ position: absolute; top: -0.9rem; right: 0; margin-right: -5rem; height: 3.4rem; width: 3.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; cursor: pointer; transition: var(--smooth); } fieldset.dropdown legend .dropdown-button svg{ width: 2rem; font-size: 2.3rem; color: inherit; transition: var(--smooth); } fieldset.dropdown fieldset legend .dropdown-button{ display: none; } fieldset.dropdown .dropdown-content{ display: none; } fieldset.dropdown.fieldset-open .dropdown-button{ background-color: var(--erro-alt); color: var(--erro); } .capsule{ padding: var(--gap); margin: calc(var(--gap) / 2) 0; border: .1rem solid var(--base-300); border-radius: var(--radius); } table{ --table-bg: var(--white); --table-fg: var(--base-900); --table-bg-alt: rgba(var(--base-500-rgb), .1); --table-bg-hover: rgba(var(--base-900-rgb), .1); --table-border-width: .1rem; --table-border-style: solid; --table-border-color: var(--base-300); color: var(--table-fg); width: 100%; } table{ background-color: var(--table-bg); } table :is(th, td){ padding: calc(var(--gap) / 2); } .table-bd-bottom :is(th, td){ border-bottom: var(--table-border-width) var(--table-border-style) var(--table-border-color); } thead.table-bd-bottom-head{ border-bottom: calc(var(--table-border-width) + .1rem) var(--table-border-style) var(--table-fg); } .table-bd > :is(thead, tbody) > tr > :is(td, th){ border: var(--table-border-width) var(--table-border-style) var(--table-border-color); } .table-striped-rows > tbody > tr:nth-of-type(odd) > *{ background-color: var(--table-bg-alt); } .table-striped-cols > :not(caption) > tr > :nth-child(2n){ background-color: var(--table-bg-alt); } .table-info, :is(table, thead, tboby, tr, th, td).table-info{ background-color: var(--info-alt); color: var(--info); border-color: rgba(var(--info-rgb), .3); } .table-info th, .table-info td{ border-color: rgba(var(--info-rgb), .3); } .table-success, :is(table, thead, tboby, tr, th, td).table-success{ background-color: var(--success-alt); color: var(--success); border-color: rgba(var(--success-rgb), .3); } .table-success th, .table-success td{ border-color: rgba(var(--success-rgb), .3); } .table-warning, :is(table, thead, tboby, tr, th, td).table-warning{ background-color: var(--warning-alt); color: var(--warning); border-color: rgba(var(--warning-rgb), .3); } .table-warning th, .table-warning td{ border-color: rgba(var(--warning-rgb), .3); } .table-erro, :is(table, thead, tboby, tr, th, td).table-erro{ background-color: var(--erro-alt); color: var(--erro); border-color: rgba(var(--erro-rgb), .3); } .table-erro th, .table-erro td{ border-color: rgba(var(--erro-rgb), .3); } .table-tip, :is(table, thead, tboby, tr, th, td).table-tip{ background-color: var(--tip-alt); color: var(--tip); border-color: rgba(var(--tip-rgb), .3); } .table-tip th, .table-tip td{ border-color: rgba(var(--tip-rgb), .3); } .table-dark, :is(table, thead, tboby, tr, th, td).table-dark{ background-color: var(--base-700); color: var(--base-100); border-color: rgba(var(--base-800-rgb), .3); } table.table-dark thead, thead.table-dark{ background-color: var(--base-800); } .table-dark th, .table-dark td{ border-color: rgba(var(--base-800-rgb), .3); } .table-light, :is(table, thead, tboby, tr, th, td).table-light{ background-color: var(--base-200); color: var(--base-500); border-color: rgba(var(--base-500-rgb), .3); } table.table-light thead, thead.table-light{ background-color: var(--base-300); } .table-light th, .table-light td{ border-color: rgba(var(--base-500-rgb), .3); } .table-active{ background-color: var(--table-bg-alt) !important; } :is(table, thead, tboby, tr, th, td).table-active{ background-color: var(--table-bg-alt) !important; } .table-hover-rows > tbody > tr:hover > *{ background-color: var(--table-bg-hover); } .table-scroll-container{ overflow-y: auto; --tf-height: 4.4rem; } .table-scroll-container table{ width: calc(100% - .1rem); } .table-scroll-container [class^=".table-scroll-"]{ width: calc(100% - .1rem); } .table-scroll-container:has(.table-scroll-1x){ max-height: var(--tf-height); } .table-scroll-container:has(.table-scroll-2x){ max-height: calc(var(--tf-height) * 2); } .table-scroll-container:has(.table-scroll-3x){ max-height: calc(var(--tf-height) * 3); } .table-scroll-container:has(.table-scroll-4x){ max-height: calc(var(--tf-height) * 4); } .table-scroll-container:has(.table-scroll-5x){ max-height: calc(var(--tf-height) * 5); } .table-scroll-container:has(.table-scroll-6x){ max-height: calc(var(--tf-height) * 6); } .table-scroll-container:has(.table-scroll-7x){ max-height: calc(var(--tf-height) * 7); } .table-scroll-container:has(.table-scroll-8x){ max-height: calc(var(--tf-height) * 8); } .table-scroll-container:has(.table-scroll-9x){ max-height: calc(var(--tf-height) * 9); } .table-scroll-container:has(.table-scroll-10x){ max-height: calc(var(--tf-height) * 10); } .table-scroll-container:has(.table-scroll-11x){ max-height: calc(var(--tf-height) * 11); } .table-scroll-container:has(.table-scroll-12x){ max-height: calc(var(--tf-height) * 12); } .table-scroll-container:has(.table-scroll-13x){ max-height: calc(var(--tf-height) * 13); } .table-scroll-container:has(.table-scroll-14x){ max-height: calc(var(--tf-height) * 14); } .table-scroll-container:has(.table-scroll-15x){ max-height: calc(var(--tf-height) * 15); } .a-type{ &::before{ content: ''; display: inline-block; width: 2rem; height: 2rem; vertical-align: -0.125em; } &[href*='.pdf']::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23909090' d='m24.1 2.072l5.564 5.8v22.056H8.879V30h20.856V7.945z'/%3E%3Cpath fill='%23f4f4f4' d='M24.031 2H8.808v27.928h20.856V7.873z'/%3E%3Cpath fill='%237a7b7c' d='M8.655 3.5h-6.39v6.827h20.1V3.5z'/%3E%3Cpath fill='%23dd2025' d='M22.472 10.211H2.395V3.379h20.077z'/%3E%3Cpath fill='%23464648' d='M9.052 4.534H7.745v4.8h1.028V7.715L9 7.728a2 2 0 0 0 .647-.117a1.4 1.4 0 0 0 .493-.291a1.2 1.2 0 0 0 .335-.454a2.1 2.1 0 0 0 .105-.908a2.2 2.2 0 0 0-.114-.644a1.17 1.17 0 0 0-.687-.65a2 2 0 0 0-.409-.104a2 2 0 0 0-.319-.026m-.189 2.294h-.089v-1.48h.193a.57.57 0 0 1 .459.181a.92.92 0 0 1 .183.558c0 .246 0 .469-.222.626a.94.94 0 0 1-.524.114m3.671-2.306c-.111 0-.219.008-.295.011L12 4.538h-.78v4.8h.918a2.7 2.7 0 0 0 1.028-.175a1.7 1.7 0 0 0 .68-.491a1.9 1.9 0 0 0 .373-.749a3.7 3.7 0 0 0 .114-.949a4.4 4.4 0 0 0-.087-1.127a1.8 1.8 0 0 0-.4-.733a1.6 1.6 0 0 0-.535-.4a2.4 2.4 0 0 0-.549-.178a1.3 1.3 0 0 0-.228-.017m-.182 3.937h-.1V5.392h.013a1.06 1.06 0 0 1 .6.107a1.2 1.2 0 0 1 .324.4a1.3 1.3 0 0 1 .142.526c.009.22 0 .4 0 .549a3 3 0 0 1-.033.513a1.8 1.8 0 0 1-.169.5a1.1 1.1 0 0 1-.363.36a.67.67 0 0 1-.416.106m5.08-3.915H15v4.8h1.028V7.434h1.3v-.892h-1.3V5.43h1.4v-.892'/%3E%3Cpath fill='%23dd2025' d='M21.781 20.255s3.188-.578 3.188.511s-1.975.646-3.188-.511m-2.357.083a7.5 7.5 0 0 0-1.473.489l.4-.9c.4-.9.815-2.127.815-2.127a14 14 0 0 0 1.658 2.252a13 13 0 0 0-1.4.288Zm-1.262-6.5c0-.949.307-1.208.546-1.208s.508.115.517.939a10.8 10.8 0 0 1-.517 2.434a4.4 4.4 0 0 1-.547-2.162Zm-4.649 10.516c-.978-.585 2.051-2.386 2.6-2.444c-.003.001-1.576 3.056-2.6 2.444M25.9 20.895c-.01-.1-.1-1.207-2.07-1.16a14 14 0 0 0-2.453.173a12.5 12.5 0 0 1-2.012-2.655a11.8 11.8 0 0 0 .623-3.1c-.029-1.2-.316-1.888-1.236-1.878s-1.054.815-.933 2.013a9.3 9.3 0 0 0 .665 2.338s-.425 1.323-.987 2.639s-.946 2.006-.946 2.006a9.6 9.6 0 0 0-2.725 1.4c-.824.767-1.159 1.356-.725 1.945c.374.508 1.683.623 2.853-.91a23 23 0 0 0 1.7-2.492s1.784-.489 2.339-.623s1.226-.24 1.226-.24s1.629 1.639 3.2 1.581s1.495-.939 1.485-1.035'/%3E%3Cpath fill='%23909090' d='M23.954 2.077V7.95h5.633z'/%3E%3Cpath fill='%23f4f4f4' d='M24.031 2v5.873h5.633z'/%3E%3Cpath fill='%23fff' d='M8.975 4.457H7.668v4.8H8.7V7.639l.228.013a2 2 0 0 0 .647-.117a1.4 1.4 0 0 0 .493-.291a1.2 1.2 0 0 0 .332-.454a2.1 2.1 0 0 0 .105-.908a2.2 2.2 0 0 0-.114-.644a1.17 1.17 0 0 0-.687-.65a2 2 0 0 0-.411-.105a2 2 0 0 0-.319-.026m-.189 2.294h-.089v-1.48h.194a.57.57 0 0 1 .459.181a.92.92 0 0 1 .183.558c0 .246 0 .469-.222.626a.94.94 0 0 1-.524.114m3.67-2.306c-.111 0-.219.008-.295.011l-.235.006h-.78v4.8h.918a2.7 2.7 0 0 0 1.028-.175a1.7 1.7 0 0 0 .68-.491a1.9 1.9 0 0 0 .373-.749a3.7 3.7 0 0 0 .114-.949a4.4 4.4 0 0 0-.087-1.127a1.8 1.8 0 0 0-.4-.733a1.6 1.6 0 0 0-.535-.4a2.4 2.4 0 0 0-.549-.178a1.3 1.3 0 0 0-.228-.017m-.182 3.937h-.1V5.315h.013a1.06 1.06 0 0 1 .6.107a1.2 1.2 0 0 1 .324.4a1.3 1.3 0 0 1 .142.526c.009.22 0 .4 0 .549a3 3 0 0 1-.033.513a1.8 1.8 0 0 1-.169.5a1.1 1.1 0 0 1-.363.36a.67.67 0 0 1-.416.106m5.077-3.915h-2.43v4.8h1.028V7.357h1.3v-.892h-1.3V5.353h1.4v-.892'/%3E%3C/svg%3E"); } &[href*='.doc']::before, &[href*='.docx']::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='vscodeIconsFileTypeWord0' x1='4.494' x2='13.832' y1='-1712.086' y2='-1695.914' gradientTransform='translate(0 1720)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%232368c4'/%3E%3Cstop offset='.5' stop-color='%231a5dbe'/%3E%3Cstop offset='1' stop-color='%231146ac'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%2341a5ee' d='M28.806 3H9.705a1.19 1.19 0 0 0-1.193 1.191V9.5l11.069 3.25L30 9.5V4.191A1.19 1.19 0 0 0 28.806 3'/%3E%3Cpath fill='%232b7cd3' d='M30 9.5H8.512V16l11.069 1.95L30 16Z'/%3E%3Cpath fill='%23185abd' d='M8.512 16v6.5l10.418 1.3L30 22.5V16Z'/%3E%3Cpath fill='%23103f91' d='M9.705 29h19.1A1.19 1.19 0 0 0 30 27.809V22.5H8.512v5.309A1.19 1.19 0 0 0 9.705 29'/%3E%3Cpath d='M16.434 8.2H8.512v16.25h7.922a1.2 1.2 0 0 0 1.194-1.191V9.391A1.2 1.2 0 0 0 16.434 8.2' opacity='0.1'/%3E%3Cpath d='M15.783 8.85H8.512V25.1h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191' opacity='0.2'/%3E%3Cpath d='M15.783 8.85H8.512V23.8h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191' opacity='0.2'/%3E%3Cpath d='M15.132 8.85h-6.62V23.8h6.62a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191' opacity='0.2'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeWord0)' d='M3.194 8.85h11.938a1.193 1.193 0 0 1 1.194 1.191v11.918a1.193 1.193 0 0 1-1.194 1.191H3.194A1.19 1.19 0 0 1 2 21.959V10.041A1.19 1.19 0 0 1 3.194 8.85'/%3E%3Cpath fill='%23fff' d='M6.9 17.988q.035.276.046.481h.028q.015-.195.065-.47c.05-.275.062-.338.089-.465l1.255-5.407h1.624l1.3 5.326a8 8 0 0 1 .162 1h.022a8 8 0 0 1 .135-.975l1.039-5.358h1.477l-1.824 7.748h-1.727l-1.237-5.126q-.054-.222-.122-.578t-.084-.52h-.021q-.021.189-.084.561t-.1.552L7.78 19.871H6.024L4.19 12.127h1.5l1.131 5.418a5 5 0 0 1 .079.443'/%3E%3C/svg%3E"); } &[href*='.xls']::before, &[href*='.xlsx']::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='vscodeIconsFileTypeExcel0' x1='4.494' x2='13.832' y1='-2092.086' y2='-2075.914' gradientTransform='translate(0 2100)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2318884f'/%3E%3Cstop offset='.5' stop-color='%23117e43'/%3E%3Cstop offset='1' stop-color='%230b6631'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23185c37' d='M19.581 15.35L8.512 13.4v14.409A1.19 1.19 0 0 0 9.705 29h19.1A1.19 1.19 0 0 0 30 27.809V22.5Z'/%3E%3Cpath fill='%2321a366' d='M19.581 3H9.705a1.19 1.19 0 0 0-1.193 1.191V9.5L19.581 16l5.861 1.95L30 16V9.5Z'/%3E%3Cpath fill='%23107c41' d='M8.512 9.5h11.069V16H8.512Z'/%3E%3Cpath d='M16.434 8.2H8.512v16.25h7.922a1.2 1.2 0 0 0 1.194-1.191V9.391A1.2 1.2 0 0 0 16.434 8.2' opacity='0.1'/%3E%3Cpath d='M15.783 8.85H8.512V25.1h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191' opacity='0.2'/%3E%3Cpath d='M15.783 8.85H8.512V23.8h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191' opacity='0.2'/%3E%3Cpath d='M15.132 8.85h-6.62V23.8h6.62a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191' opacity='0.2'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeExcel0)' d='M3.194 8.85h11.938a1.193 1.193 0 0 1 1.194 1.191v11.918a1.193 1.193 0 0 1-1.194 1.191H3.194A1.19 1.19 0 0 1 2 21.959V10.041A1.19 1.19 0 0 1 3.194 8.85'/%3E%3Cpath fill='%23fff' d='m5.7 19.873l2.511-3.884l-2.3-3.862h1.847L9.013 14.6c.116.234.2.408.238.524h.017q.123-.281.26-.546l1.342-2.447h1.7l-2.359 3.84l2.419 3.905h-1.809l-1.45-2.711A2.4 2.4 0 0 1 9.2 16.8h-.024a1.7 1.7 0 0 1-.168.351l-1.493 2.722Z'/%3E%3Cpath fill='%2333c481' d='M28.806 3h-9.225v6.5H30V4.191A1.19 1.19 0 0 0 28.806 3'/%3E%3Cpath fill='%23107c41' d='M19.581 16H30v6.5H19.581Z'/%3E%3C/svg%3E"); } &[href*='.ppt']::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='vscodeIconsFileTypePowerpoint0' x1='4.494' x2='13.832' y1='-1748.086' y2='-1731.914' gradientTransform='translate(0 1756)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ca4c28'/%3E%3Cstop offset='.5' stop-color='%23c5401e'/%3E%3Cstop offset='1' stop-color='%23b62f14'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23ed6c47' d='M18.93 17.3L16.977 3h-.146A12.9 12.9 0 0 0 3.953 15.854V16Z'/%3E%3Cpath fill='%23ff8f6b' d='M17.123 3h-.146v13l6.511 2.6L30 16v-.146A12.9 12.9 0 0 0 17.123 3'/%3E%3Cpath fill='%23d35230' d='M30 16v.143A12.905 12.905 0 0 1 17.12 29h-.287a12.907 12.907 0 0 1-12.88-12.857V16Z'/%3E%3Cpath d='M17.628 9.389V23.26a1.2 1.2 0 0 1-.742 1.1a1.2 1.2 0 0 1-.45.091H7.027a10 10 0 0 1-.521-.65a12.74 12.74 0 0 1-2.553-7.657v-.286A12.7 12.7 0 0 1 6.05 8.85a9 9 0 0 1 .456-.65h9.93a1.2 1.2 0 0 1 1.192 1.189' opacity='0.1'/%3E%3Cpath d='M16.977 10.04v13.871a1.2 1.2 0 0 1-.091.448a1.2 1.2 0 0 1-1.1.741H7.62q-.309-.314-.593-.65a10 10 0 0 1-.521-.65a12.74 12.74 0 0 1-2.553-7.657v-.286A12.7 12.7 0 0 1 6.05 8.85h9.735a1.2 1.2 0 0 1 1.192 1.19' opacity='0.2'/%3E%3Cpath d='M16.977 10.04v12.571a1.2 1.2 0 0 1-1.192 1.189H6.506a12.74 12.74 0 0 1-2.553-7.657v-.286A12.7 12.7 0 0 1 6.05 8.85h9.735a1.2 1.2 0 0 1 1.192 1.19' opacity='0.2'/%3E%3Cpath d='M16.326 10.04v12.571a1.2 1.2 0 0 1-1.192 1.189H6.506a12.74 12.74 0 0 1-2.553-7.657v-.286A12.7 12.7 0 0 1 6.05 8.85h9.084a1.2 1.2 0 0 1 1.192 1.19' opacity='0.2'/%3E%3Cpath fill='url(%23vscodeIconsFileTypePowerpoint0)' d='M3.194 8.85h11.938a1.193 1.193 0 0 1 1.194 1.191v11.918a1.193 1.193 0 0 1-1.194 1.191H3.194A1.19 1.19 0 0 1 2 21.959V10.041A1.19 1.19 0 0 1 3.194 8.85'/%3E%3Cpath fill='%23fff' d='M9.293 12.028a3.3 3.3 0 0 1 2.174.636a2.27 2.27 0 0 1 .756 1.841a2.56 2.56 0 0 1-.373 1.376a2.5 2.5 0 0 1-1.059.935a3.6 3.6 0 0 1-1.591.334H7.687v2.8H6.141v-7.922ZM7.686 15.94h1.331a1.74 1.74 0 0 0 1.177-.351a1.3 1.3 0 0 0 .4-1.025q0-1.309-1.525-1.31H7.686z'/%3E%3C/svg%3E"); } &[href*='.zip']::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='vscodeIconsFileTypeZip0' x1='17.65' x2='21.099' y1='26.056' y2='26.056' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%234d4d4d'/%3E%3Cstop offset='.5' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%234d4d4d'/%3E%3C/linearGradient%3E%3ClinearGradient id='vscodeIconsFileTypeZip1' x1='17.65' x2='21.099' y1='23.756' y2='23.756' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZip2' x1='17.65' x2='21.099' y1='21.456' y2='21.456' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZip3' x1='17.65' x2='21.099' y1='19.156' y2='19.156' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZip4' x1='17.65' x2='21.099' y1='16.857' y2='16.857' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZip5' x1='17.65' x2='21.099' y1='14.557' y2='14.557' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZip6' x1='17.65' x2='21.099' y1='12.257' y2='12.257' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZip7' x1='17.65' x2='21.099' y1='9.957' y2='9.957' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZip8' x1='17.65' x2='21.099' y1='7.657' y2='7.657' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZip9' x1='16.237' x2='19.686' y1='27.217' y2='27.217' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipa' x1='16.237' x2='19.686' y1='24.918' y2='24.918' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipb' x1='16.237' x2='19.686' y1='22.618' y2='22.618' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipc' x1='16.237' x2='19.686' y1='20.318' y2='20.318' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipd' x1='16.237' x2='19.686' y1='18.018' y2='18.018' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipe' x1='17.65' x2='21.099' y1='28.356' y2='28.356' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipf' x1='16.237' x2='19.686' y1='15.718' y2='15.718' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipg' x1='16.237' x2='19.686' y1='13.419' y2='13.419' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZiph' x1='16.237' x2='19.686' y1='11.119' y2='11.119' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipi' x1='16.237' x2='19.686' y1='8.819' y2='8.819' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipj' x1='16.237' x2='19.686' y1='29.514' y2='29.514' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipk' x1='16.985' x2='20.446' y1='11.196' y2='11.196' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipl' x1='18.096' x2='19.336' y1='5.329' y2='5.329' href='%23vscodeIconsFileTypeZip0'/%3E%3ClinearGradient id='vscodeIconsFileTypeZipm' x1='16.029' x2='21.403' y1='5.591' y2='5.591' href='%23vscodeIconsFileTypeZip0'/%3E%3C/defs%3E%3Cpath fill='%23c09553' d='M27.667 27.667V17.333L23 15V2H4.333v28h23.334Zm-4.667 0v-9.111l2.333 1.222v7.889Z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZip0)' d='M17.65 25.559h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZip1)' d='M17.65 23.26h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZip2)' d='M17.65 20.96h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZip3)' d='M17.65 18.66h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZip4)' d='M17.65 16.36h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZip5)' d='M17.65 14.06h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZip6)' d='M17.65 11.76h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZip7)' d='M17.65 9.461h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZip8)' d='M17.65 7.161h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZip9)' d='M16.237 26.721h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipa)' d='M16.237 24.421h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipb)' d='M16.237 22.121h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipc)' d='M16.237 19.821h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipd)' d='M16.237 17.522h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipe)' d='M17.65 27.859h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipf)' d='M16.237 15.222h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipg)' d='M16.237 12.922h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZiph)' d='M16.237 10.622h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipi)' d='M16.237 8.322h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipj)' d='M16.237 29.018h3.45v.993h-3.45z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipk)' d='M20.1 5.911a.554.554 0 0 0-.548-.53h-.009v.557h.092l.206 2.514h-2.252l.211-2.514h.094v-.557h-.044a.55.55 0 0 0-.547.53l-.314 10.569a.513.513 0 0 0 .515.531h2.432a.51.51 0 0 0 .513-.531Zm-1.384 10.5a1.171 1.171 0 1 1 1.171-1.171a1.17 1.17 0 0 1-1.171 1.168Z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipl)' d='M18.096 3.802h1.24v3.054h-1.24z'/%3E%3Cpath fill='url(%23vscodeIconsFileTypeZipm)' d='M21.4 4.56a2.55 2.55 0 0 0-2.549-2.549h-.276a2.55 2.55 0 0 0-2.436 3.3v.006a8 8 0 0 1 .261 2.561a1.8 1.8 0 0 0 .641 1.271l.109-3.441a.593.593 0 0 1 .6-.551h.135v-1.57h1.653v1.57h.1a.6.6 0 0 1 .605.551l.121 3.462a1.8 1.8 0 0 0 .666-1.292V7.72a7.7 7.7 0 0 1 .236-2.359a2.5 2.5 0 0 0 .134-.801'/%3E%3C/svg%3E"); } &[href*='.jpg']::before, &[href*='.png']::before, &[href*='.gif']::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%232dcc9f' d='M30 5.851v20.298H2V5.851z'/%3E%3Cpath fill='%23fff' d='M24.232 8.541a2.2 2.2 0 1 0 1.127.623a2.2 2.2 0 0 0-1.127-.623M18.111 20.1q-2.724-3.788-5.45-7.575L4.579 23.766h10.9q1.316-1.832 2.634-3.663M22.057 16q-2.793 3.882-5.584 7.765h11.169Q24.851 19.882 22.057 16'/%3E%3C/svg%3E"); } &[href*='.exe']::before, &[href*='.dll']::before{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23c2c2c2' d='M22.038 2H6.375a1.755 1.755 0 0 0-1.75 1.75v24.5A1.755 1.755 0 0 0 6.375 30h19.25a1.755 1.755 0 0 0 1.75-1.75V6.856Zm.525 2.844l1.663 1.531h-1.663ZM6.375 28.25V3.75h14.438v4.375h4.813V28.25Z'/%3E%3Cpath fill='%23829ec2' d='M8.125 15.097h13.076v1.75H8.125zm0 9.342h9.762v1.75H8.125zm0-4.676h15.75v1.75H8.125zm0-9.533h15.75v1.75H8.125z'/%3E%3C/svg%3E"); } } /* Tamanho da grade */ .g-1 { grid-template-columns: repeat(1, 1fr); } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } .g-5 { grid-template-columns: repeat(5, 1fr); } .g-6 { grid-template-columns: repeat(6, 1fr); } .g-7 { grid-template-columns: repeat(7, 1fr); } .g-8 { grid-template-columns: repeat(8, 1fr); } .g-9 { grid-template-columns: repeat(9, 1fr); } .g-10{ grid-template-columns: repeat(10, 1fr); } .g-11{ grid-template-columns: repeat(11, 1fr); } .g-12{ grid-template-columns: repeat(12, 1fr); } /* Tamanho dos itens da grade */ .i-1 { grid-column: span 1; } .i-2 { grid-column: span 2; } .i-3 { grid-column: span 3; } .i-4 { grid-column: span 4; } .i-5 { grid-column: span 5; } .i-6 { grid-column: span 6; } .i-7 { grid-column: span 7; } .i-8 { grid-column: span 8; } .i-9 { grid-column: span 9; } .i-10{ grid-column: span 10; } .i-11{ grid-column: span 11; } .i-12{ grid-column: span 12; } /* Posição inicial e final de colunas */ .i-col-start-1 { grid-column-start: 1; } .i-col-start-2 { grid-column-start: 2; } .i-col-start-3 { grid-column-start: 3; } .i-col-start-4 { grid-column-start: 4; } .i-col-start-5 { grid-column-start: 5; } .i-col-start-6 { grid-column-start: 6; } .i-col-start-7 { grid-column-start: 7; } .i-col-start-8 { grid-column-start: 8; } .i-col-start-9 { grid-column-start: 9; } .i-col-start-10{ grid-column-start: 10; } .i-col-start-11{ grid-column-start: 11; } .i-col-start-12{ grid-column-start: 12; } .i-col-end-1 { grid-column-end: 1; } .i-col-end-2 { grid-column-end: 2; } .i-col-end-3 { grid-column-end: 3; } .i-col-end-4 { grid-column-end: 4; } .i-col-end-5 { grid-column-end: 5; } .i-col-end-6 { grid-column-end: 6; } .i-col-end-7 { grid-column-end: 7; } .i-col-end-8 { grid-column-end: 8; } .i-col-end-9 { grid-column-end: 9; } .i-col-end-10{ grid-column-end: 10; } .i-col-end-11{ grid-column-end: 11; } .i-col-end-12{ grid-column-end: 12; } .i-col-end { grid-column-end: -1; } /* Posição inicial e final de linhas */ .i-row-start-1 { grid-row-start: 1; } .i-row-start-2 { grid-row-start: 2; } .i-row-start-3 { grid-row-start: 3; } .i-row-start-4 { grid-row-start: 4; } .i-row-start-5 { grid-row-start: 5; } .i-row-start-6 { grid-row-start: 6; } .i-row-start-7 { grid-row-start: 7; } .i-row-start-8 { grid-row-start: 8; } .i-row-start-9 { grid-row-start: 9; } .i-row-start-10{ grid-row-start: 10; } .i-row-start-11{ grid-row-start: 11; } .i-row-start-12{ grid-row-start: 12; } .i-row-end-1 { grid-row-end: 1; } .i-row-end-2 { grid-row-end: 2; } .i-row-end-3 { grid-row-end: 3; } .i-row-end-4 { grid-row-end: 4; } .i-row-end-5 { grid-row-end: 5; } .i-row-end-6 { grid-row-end: 6; } .i-row-end-7 { grid-row-end: 7; } .i-row-end-8 { grid-row-end: 8; } .i-row-end-9 { grid-row-end: 9; } .i-row-end-10{ grid-row-end: 10; } .i-row-end-11{ grid-row-end: 11; } .i-row-end-12{ grid-row-end: 12; } @media screen and (min-width: 1440px) { .g-f-1{ grid-template-columns: repeat(1, 1fr); } .g-f-2{ grid-template-columns: repeat(2, 1fr); } .g-f-3{ grid-template-columns: repeat(3, 1fr); } .g-f-4{ grid-template-columns: repeat(4, 1fr); } .g-f-5{ grid-template-columns: repeat(5, 1fr); } .g-f-6{ grid-template-columns: repeat(6, 1fr); } .g-f-7{ grid-template-columns: repeat(7, 1fr); } .g-f-8{ grid-template-columns: repeat(8, 1fr); } .g-f-9{ grid-template-columns: repeat(9, 1fr); } .g-f-10{ grid-template-columns: repeat(10, 1fr); } .g-f-11{ grid-template-columns: repeat(11, 1fr); } .g-f-12{ grid-template-columns: repeat(12, 1fr); } .i-f-1 { grid-column: span 1; } .i-f-2 { grid-column: span 2; } .i-f-3 { grid-column: span 3; } .i-f-4 { grid-column: span 4; } .i-f-5 { grid-column: span 5; } .i-f-6 { grid-column: span 6; } .i-f-7 { grid-column: span 7; } .i-f-8 { grid-column: span 8; } .i-f-9 { grid-column: span 9; } .i-f-10{ grid-column: span 10; } .i-f-11{ grid-column: span 11; } .i-f-12{ grid-column: span 12; } /* Posição inicial e final de colunas */ .i-f-col-start-1 { grid-column-start: 1; } .i-f-col-start-2 { grid-column-start: 2; } .i-f-col-start-3 { grid-column-start: 3; } .i-f-col-start-4 { grid-column-start: 4; } .i-f-col-start-5 { grid-column-start: 5; } .i-f-col-start-6 { grid-column-start: 6; } .i-f-col-start-7 { grid-column-start: 7; } .i-f-col-start-8 { grid-column-start: 8; } .i-f-col-start-9 { grid-column-start: 9; } .i-f-col-start-10{ grid-column-start: 10; } .i-f-col-start-11{ grid-column-start: 11; } .i-f-col-start-12{ grid-column-start: 12; } .i-f-col-end-1 { grid-column-end: 1; } .i-f-col-end-2 { grid-column-end: 2; } .i-f-col-end-3 { grid-column-end: 3; } .i-f-col-end-4 { grid-column-end: 4; } .i-f-col-end-5 { grid-column-end: 5; } .i-f-col-end-6 { grid-column-end: 6; } .i-f-col-end-7 { grid-column-end: 7; } .i-f-col-end-8 { grid-column-end: 8; } .i-f-col-end-9 { grid-column-end: 9; } .i-f-col-end-10{ grid-column-end: 10; } .i-f-col-end-11{ grid-column-end: 11; } .i-f-col-end-12{ grid-column-end: 12; } .i-f-col-end { grid-column-end: -1; } /* Posição inicial e final de linhas */ .i-f-row-start-1 { grid-row-start: 1; } .i-f-row-start-2 { grid-row-start: 2; } .i-f-row-start-3 { grid-row-start: 3; } .i-f-row-start-4 { grid-row-start: 4; } .i-f-row-start-5 { grid-row-start: 5; } .i-f-row-start-6 { grid-row-start: 6; } .i-f-row-start-7 { grid-row-start: 7; } .i-f-row-start-8 { grid-row-start: 8; } .i-f-row-start-9 { grid-row-start: 9; } .i-f-row-start-10{ grid-row-start: 10; } .i-f-row-start-11{ grid-row-start: 11; } .i-f-row-start-12{ grid-row-start: 12; } .i-f-row-end-1 { grid-row-end: 1; } .i-f-row-end-2 { grid-row-end: 2; } .i-f-row-end-3 { grid-row-end: 3; } .i-f-row-end-4 { grid-row-end: 4; } .i-f-row-end-5 { grid-row-end: 5; } .i-f-row-end-6 { grid-row-end: 6; } .i-f-row-end-7 { grid-row-end: 7; } .i-f-row-end-8 { grid-row-end: 8; } .i-f-row-end-9 { grid-row-end: 9; } .i-f-row-end-10{ grid-row-end: 10; } .i-f-row-end-11{ grid-row-end: 11; } .i-f-row-end-12{ grid-row-end: 12; } .i-f-row-end { grid-row-end: -1; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .g-d-1{ grid-template-columns: repeat(1, 1fr); } .g-d-2{ grid-template-columns: repeat(2, 1fr); } .g-d-3{ grid-template-columns: repeat(3, 1fr); } .g-d-4{ grid-template-columns: repeat(4, 1fr); } .g-d-5{ grid-template-columns: repeat(5, 1fr); } .g-d-6{ grid-template-columns: repeat(6, 1fr); } .g-d-7{ grid-template-columns: repeat(7, 1fr); } .g-d-8{ grid-template-columns: repeat(8, 1fr); } .g-d-9{ grid-template-columns: repeat(9, 1fr); } .g-d-10{ grid-template-columns: repeat(10, 1fr); } .g-d-11{ grid-template-columns: repeat(11, 1fr); } .g-d-12{ grid-template-columns: repeat(12, 1fr); } .i-d-1 { grid-column: span 1; } .i-d-2 { grid-column: span 2; } .i-d-3 { grid-column: span 3; } .i-d-4 { grid-column: span 4; } .i-d-5 { grid-column: span 5; } .i-d-6 { grid-column: span 6; } .i-d-7 { grid-column: span 7; } .i-d-8 { grid-column: span 8; } .i-d-9 { grid-column: span 9; } .i-d-10{ grid-column: span 10; } .i-d-11{ grid-column: span 11; } .i-d-12{ grid-column: span 12; } /* Posição inicial e final de colunas */ .i-d-col-start-1 { grid-column-start: 1; } .i-d-col-start-2 { grid-column-start: 2; } .i-d-col-start-3 { grid-column-start: 3; } .i-d-col-start-4 { grid-column-start: 4; } .i-d-col-start-5 { grid-column-start: 5; } .i-d-col-start-6 { grid-column-start: 6; } .i-d-col-start-7 { grid-column-start: 7; } .i-d-col-start-8 { grid-column-start: 8; } .i-d-col-start-9 { grid-column-start: 9; } .i-d-col-start-10{ grid-column-start: 10; } .i-d-col-start-11{ grid-column-start: 11; } .i-d-col-start-12{ grid-column-start: 12; } .i-d-col-end-1 { grid-column-end: 1; } .i-d-col-end-2 { grid-column-end: 2; } .i-d-col-end-3 { grid-column-end: 3; } .i-d-col-end-4 { grid-column-end: 4; } .i-d-col-end-5 { grid-column-end: 5; } .i-d-col-end-6 { grid-column-end: 6; } .i-d-col-end-7 { grid-column-end: 7; } .i-d-col-end-8 { grid-column-end: 8; } .i-d-col-end-9 { grid-column-end: 9; } .i-d-col-end-10{ grid-column-end: 10; } .i-d-col-end-11{ grid-column-end: 11; } .i-d-col-end-12{ grid-column-end: 12; } .i-d-col-end { grid-column-end: -1; } /* Posição inicial e final de linhas */ .i-d-row-start-1 { grid-row-start: 1; } .i-d-row-start-2 { grid-row-start: 2; } .i-d-row-start-3 { grid-row-start: 3; } .i-d-row-start-4 { grid-row-start: 4; } .i-d-row-start-5 { grid-row-start: 5; } .i-d-row-start-6 { grid-row-start: 6; } .i-d-row-start-7 { grid-row-start: 7; } .i-d-row-start-8 { grid-row-start: 8; } .i-d-row-start-9 { grid-row-start: 9; } .i-d-row-start-10{ grid-row-start: 10; } .i-d-row-start-11{ grid-row-start: 11; } .i-d-row-start-12{ grid-row-start: 12; } .i-d-row-end-1 { grid-row-end: 1; } .i-d-row-end-2 { grid-row-end: 2; } .i-d-row-end-3 { grid-row-end: 3; } .i-d-row-end-4 { grid-row-end: 4; } .i-d-row-end-5 { grid-row-end: 5; } .i-d-row-end-6 { grid-row-end: 6; } .i-d-row-end-7 { grid-row-end: 7; } .i-d-row-end-8 { grid-row-end: 8; } .i-d-row-end-9 { grid-row-end: 9; } .i-d-row-end-10{ grid-row-end: 10; } .i-d-row-end-11{ grid-row-end: 11; } .i-d-row-end-12{ grid-row-end: 12; } .i-d-row-end { grid-row-end: -1; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .g-t-1{ grid-template-columns: repeat(1, 1fr); } .g-t-2{ grid-template-columns: repeat(2, 1fr); } .g-t-3{ grid-template-columns: repeat(3, 1fr); } .g-t-4{ grid-template-columns: repeat(4, 1fr); } .g-t-5{ grid-template-columns: repeat(5, 1fr); } .g-t-6{ grid-template-columns: repeat(6, 1fr); } .g-t-7{ grid-template-columns: repeat(7, 1fr); } .g-t-8{ grid-template-columns: repeat(8, 1fr); } .g-t-9{ grid-template-columns: repeat(9, 1fr); } .g-t-10{ grid-template-columns: repeat(10, 1fr); } .g-t-11{ grid-template-columns: repeat(11, 1fr); } .g-t-12{ grid-template-columns: repeat(12, 1fr); } .i-t-1 { grid-column: span 1; } .i-t-2 { grid-column: span 2; } .i-t-3 { grid-column: span 3; } .i-t-4 { grid-column: span 4; } .i-t-5 { grid-column: span 5; } .i-t-6 { grid-column: span 6; } .i-t-7 { grid-column: span 7; } .i-t-8 { grid-column: span 8; } .i-t-9 { grid-column: span 9; } .i-t-10{ grid-column: span 10; } .i-t-11{ grid-column: span 11; } .i-t-12{ grid-column: span 12; } /* Posição inicial e final de colunas */ .i-t-col-start-1 { grid-column-start: 1; } .i-t-col-start-2 { grid-column-start: 2; } .i-t-col-start-3 { grid-column-start: 3; } .i-t-col-start-4 { grid-column-start: 4; } .i-t-col-start-5 { grid-column-start: 5; } .i-t-col-start-6 { grid-column-start: 6; } .i-t-col-start-7 { grid-column-start: 7; } .i-t-col-start-8 { grid-column-start: 8; } .i-t-col-start-9 { grid-column-start: 9; } .i-t-col-start-10{ grid-column-start: 10; } .i-t-col-start-11{ grid-column-start: 11; } .i-t-col-start-12{ grid-column-start: 12; } .i-t-col-end-1 { grid-column-end: 1; } .i-t-col-end-2 { grid-column-end: 2; } .i-t-col-end-3 { grid-column-end: 3; } .i-t-col-end-4 { grid-column-end: 4; } .i-t-col-end-5 { grid-column-end: 5; } .i-t-col-end-6 { grid-column-end: 6; } .i-t-col-end-7 { grid-column-end: 7; } .i-t-col-end-8 { grid-column-end: 8; } .i-t-col-end-9 { grid-column-end: 9; } .i-t-col-end-10{ grid-column-end: 10; } .i-t-col-end-11{ grid-column-end: 11; } .i-t-col-end-12{ grid-column-end: 12; } .i-t-col-end { grid-column-end: -1; } /* Posição inicial e final de linhas */ .i-t-row-start-1 { grid-row-start: 1; } .i-t-row-start-2 { grid-row-start: 2; } .i-t-row-start-3 { grid-row-start: 3; } .i-t-row-start-4 { grid-row-start: 4; } .i-t-row-start-5 { grid-row-start: 5; } .i-t-row-start-6 { grid-row-start: 6; } .i-t-row-start-7 { grid-row-start: 7; } .i-t-row-start-8 { grid-row-start: 8; } .i-t-row-start-9 { grid-row-start: 9; } .i-t-row-start-10{ grid-row-start: 10; } .i-t-row-start-11{ grid-row-start: 11; } .i-t-row-start-12{ grid-row-start: 12; } .i-t-row-end-1 { grid-row-end: 1; } .i-t-row-end-2 { grid-row-end: 2; } .i-t-row-end-3 { grid-row-end: 3; } .i-t-row-end-4 { grid-row-end: 4; } .i-t-row-end-5 { grid-row-end: 5; } .i-t-row-end-6 { grid-row-end: 6; } .i-t-row-end-7 { grid-row-end: 7; } .i-t-row-end-8 { grid-row-end: 8; } .i-t-row-end-9 { grid-row-end: 9; } .i-t-row-end-10{ grid-row-end: 10; } .i-t-row-end-11{ grid-row-end: 11; } .i-t-row-end-12{ grid-row-end: 12; } .i-t-row-end { grid-row-end: -1; } } @media only screen and (min-width: 0px) and (max-width: 767px) { .g-m-1{ grid-template-columns: repeat(1, 1fr); } .g-m-2{ grid-template-columns: repeat(2, 1fr); } .g-m-3{ grid-template-columns: repeat(3, 1fr); } .g-m-4{ grid-template-columns: repeat(4, 1fr); } .g-m-5{ grid-template-columns: repeat(5, 1fr); } .g-m-6{ grid-template-columns: repeat(6, 1fr); } .g-m-7{ grid-template-columns: repeat(7, 1fr); } .g-m-8{ grid-template-columns: repeat(8, 1fr); } .g-m-9{ grid-template-columns: repeat(9, 1fr); } .g-m-10{ grid-template-columns: repeat(10, 1fr); } .g-m-11{ grid-template-columns: repeat(11, 1fr); } .g-m-12{ grid-template-columns: repeat(12, 1fr); } .i-m-1 { grid-column: span 1; } .i-m-2 { grid-column: span 2; } .i-m-3 { grid-column: span 3; } .i-m-4 { grid-column: span 4; } .i-m-5 { grid-column: span 5; } .i-m-6 { grid-column: span 6; } .i-m-7 { grid-column: span 7; } .i-m-8 { grid-column: span 8; } .i-m-9 { grid-column: span 9; } .i-m-10{ grid-column: span 10; } .i-m-11{ grid-column: span 11; } .i-m-12{ grid-column: span 12; } /* Posição inicial e final de colunas */ .i-m-col-start-1 { grid-column-start: 1; } .i-m-col-start-2 { grid-column-start: 2; } .i-m-col-start-3 { grid-column-start: 3; } .i-m-col-start-4 { grid-column-start: 4; } .i-m-col-start-5 { grid-column-start: 5; } .i-m-col-start-6 { grid-column-start: 6; } .i-m-col-start-7 { grid-column-start: 7; } .i-m-col-start-8 { grid-column-start: 8; } .i-m-col-start-9 { grid-column-start: 9; } .i-m-col-start-10{ grid-column-start: 10; } .i-m-col-start-11{ grid-column-start: 11; } .i-m-col-start-12{ grid-column-start: 12; } .i-m-col-end-1 { grid-column-end: 1; } .i-m-col-end-2 { grid-column-end: 2; } .i-m-col-end-3 { grid-column-end: 3; } .i-m-col-end-4 { grid-column-end: 4; } .i-m-col-end-5 { grid-column-end: 5; } .i-m-col-end-6 { grid-column-end: 6; } .i-m-col-end-7 { grid-column-end: 7; } .i-m-col-end-8 { grid-column-end: 8; } .i-m-col-end-9 { grid-column-end: 9; } .i-m-col-end-10{ grid-column-end: 10; } .i-m-col-end-11{ grid-column-end: 11; } .i-m-col-end-12{ grid-column-end: 12; } .i-m-col-end { grid-column-end: -1; } /* Posição inicial e final de linhas */ .i-m-row-start-1 { grid-row-start: 1; } .i-m-row-start-2 { grid-row-start: 2; } .i-m-row-start-3 { grid-row-start: 3; } .i-m-row-start-4 { grid-row-start: 4; } .i-m-row-start-5 { grid-row-start: 5; } .i-m-row-start-6 { grid-row-start: 6; } .i-m-row-start-7 { grid-row-start: 7; } .i-m-row-start-8 { grid-row-start: 8; } .i-m-row-start-9 { grid-row-start: 9; } .i-m-row-start-10{ grid-row-start: 10; } .i-m-row-start-11{ grid-row-start: 11; } .i-m-row-start-12{ grid-row-start: 12; } .i-m-row-end-1 { grid-row-end: 1; } .i-m-row-end-2 { grid-row-end: 2; } .i-m-row-end-3 { grid-row-end: 3; } .i-m-row-end-4 { grid-row-end: 4; } .i-m-row-end-5 { grid-row-end: 5; } .i-m-row-end-6 { grid-row-end: 6; } .i-m-row-end-7 { grid-row-end: 7; } .i-m-row-end-8 { grid-row-end: 8; } .i-m-row-end-9 { grid-row-end: 9; } .i-m-row-end-10{ grid-row-end: 10; } .i-m-row-end-11{ grid-row-end: 11; } .i-m-row-end-12{ grid-row-end: 12; } .i-m-row-end { grid-row-end: -1; } } /* ELEMENTOS DE TEXTO */ .no-list-style *{ list-style: none; } /* SOMBRAS */ .shadow-sm{ box-shadow: var(--shadow-sm); } .shadow{ box-shadow: var(--shadow); } .shadow-lg{ box-shadow: var(--shadow-lg); } /* CONTROLE DE ALINHAMENTO */ .txt-left, .txt-left *{ text-align: left; } .txt-center, .txt-center *{ text-align: center; } .txt-right, .txt-right *{ text-align: right; } .txt-justify, .txt-justify *{ text-align: justify; } .v-align-top{ vertical-align: top; } .v-align-middle{ vertical-align: middle; } .v-align-bottom{ vertical-align: bottom; } .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-wrap { flex-wrap: wrap; } .justify-center { justify-content: center; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } .align-start { align-items: flex-start; } .align-center { align-items: center; } .align-end { align-items: flex-end; } .align-stretch { align-items: stretch; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* CONTROLE DE ESPAÇAMENTOS */ .gap { gap: var(--gap); } .row-gap{ row-gap: var(--gap); } .col-gap{ column-gap: var(--gap); } .gap-05 { gap: calc(var(--gap) / 2); } .gap-x2 { gap: calc(var(--gap) * 2); } .gap-x3 { gap: calc(var(--gap) * 3); } .gap-x4 { gap: calc(var(--gap) * 4); } .pd { padding: var(--pd); } .pd-t { padding-top: var(--pd); } .pd-b { padding-bottom: var(--pd); } .pd-l { padding-left: var(--pd); } .pd-r { padding-right: var(--pd); } .pd-0 { padding: 0; } .pd-t-0{ padding-top: 0; } .pd-b-0{ padding-bottom: 0; } .pd-l-0{ padding-left: 0; } .pd-r-0{ padding-right: 0; } .mr { margin: var(--mr); } .mr-t { margin-top: var(--mr); } .mr-b { margin-bottom: var(--mr); } .mr-l { margin-left: var(--mr); } .mr-r { margin-right: var(--mr); } .mr-0 { margin: 0; } .mr-t-0{ margin-top: 0; } .mr-b-0{ margin-bottom: 0; } .mr-l-0{ margin-left: 0; } .mr-r-0{ margin-right: 0; } .left { margin-right: calc(var(--mr) / 2 - .2rem); } .right{ margin-left: calc(var(--mr) / 2 - .2rem); } .space-sm{ height: var(--space-sm); } .space { height: var(--space); } .space-md{ height: var(--space-md); } .space-lg{ height: var(--space-lg); } .space-xl{ height: var(--space-xl); } /* CONTROLE DE LARGURA POR PORCENTAGEM */ .cl { --pd-cl: calc(var(--pd) / 2); padding: 0 var(--pd-cl); } .cl-100 { width: 100%; } .cl-90 { width: 90%; } .cl-80 { width: 80%; } .cl-70 { width: 70%; } .cl-75 { width: 75%; } .cl-66 { width: 66.666%; } .cl-60 { width: 60%; } .cl-50 { width: 50%; } .cl-40 { width: 40%; } .cl-33 { width: 33.333%; } .cl-30 { width: 30%; } .cl-25 { width: 25%; } .cl-20 { width: 20%; } .cl-10 { width: 10%; } @media screen and (min-width: 1440px) { .cl-f { padding: 0 var(--pd-cl); } .cl-f-100 { width: 100%; } .cl-f-90 { width: 90%; } .cl-f-80 { width: 80%; } .cl-f-70 { width: 70%; } .cl-f-75 { width: 75%; } .cl-f-66 { width: 66.666%; } .cl-f-60 { width: 60%; } .cl-f-50 { width: 50%; } .cl-f-40 { width: 40%; } .cl-f-33 { width: 33.333%; } .cl-f-30 { width: 30%; } .cl-f-25 { width: 25%; } .cl-f-20 { width: 20%; } .cl-f-10 { width: 10%; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .cl-d { padding: 0 var(--pd-cl); } .cl-d-100 { width: 100%; } .cl-d-90 { width: 90%; } .cl-d-80 { width: 80%; } .cl-d-70 { width: 70%; } .cl-d-75 { width: 75%; } .cl-d-66 { width: 66.666%; } .cl-d-60 { width: 60%; } .cl-d-50 { width: 50%; } .cl-d-40 { width: 40%; } .cl-d-33 { width: 33.333%; } .cl-d-30 { width: 30%; } .cl-d-25 { width: 25%; } .cl-d-20 { width: 20%; } .cl-d-10 { width: 10%; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .cl-t { padding: 0 var(--pd-cl); } .cl-t-100 { width: 100%; } .cl-t-90 { width: 90%; } .cl-t-80 { width: 80%; } .cl-t-70 { width: 70%; } .cl-t-75 { width: 75%; } .cl-t-66 { width: 66.666%; } .cl-t-60 { width: 60%; } .cl-t-50 { width: 50%; } .cl-t-40 { width: 40%; } .cl-t-33 { width: 33.333%; } .cl-t-30 { width: 30%; } .cl-t-25 { width: 25%; } .cl-t-20 { width: 20%; } .cl-t-10 { width: 10%; } } @media only screen and (min-width: 0px) and (max-width: 767px) { .cl-m { padding: 0 var(--pd-cl); } .cl-m-100 { width: 100%; } .cl-m-90 { width: 90%; } .cl-m-80 { width: 80%; } .cl-m-70 { width: 70%; } .cl-m-75 { width: 75%; } .cl-m-66 { width: 66.666%; } .cl-m-60 { width: 60%; } .cl-m-50 { width: 50%; } .cl-m-40 { width: 40%; } .cl-m-33 { width: 33.333%; } .cl-m-30 { width: 30%; } .cl-m-25 { width: 25%; } .cl-m-20 { width: 20%; } .cl-m-10 { width: 10%; } } .oculto{ display: none; } @media screen and (min-width: 1440px) { .esconde-fulldesktop{ display: none; } .exibe-fulldesktop{ display: block; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .esconde-desktop{ display: none; } .exibe-desktop{ display: block; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .esconde-tablet{ display: none; } .exibe-tablet{ display: block; } } @media only screen and (min-width: 0px) and (max-width: 767px) { .esconde-celular{ display: none; } .exibe-celular{ display: block; } } /* ===================== CATALOG ===================== */ .catalog-download-gallery { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 30rem)); justify-content: center; gap: 4rem; width: 100%; margin: 3rem auto; align-items: start; } .catalog-download-gallery::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 0; width: 100%; height: 20rem; background: var(--apoio); transform: translateY(-50%); pointer-events: none; } .catalog-download-gallery a { position: relative; z-index: 1; display: block; overflow: hidden; border-radius: .8rem; box-shadow: 0 1rem 2.5rem rgba(5, 35, 67, .14); transition: transform .2s ease, box-shadow .2s ease; } .catalog-download-gallery a:hover { transform: translateY(-.4rem); box-shadow: 0 1.4rem 3rem rgba(5, 35, 67, .2); } .catalog-download-gallery img { display: block; width: 100%; height: auto; } .catalog-download-button { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; padding: 1.2rem 2.4rem; border-radius: .6rem; background: var(--primary); color: var(--white); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; } .catalog-download-button:hover { color: var(--white); opacity: .9; } .catalog-download-button icon { font-size: 2rem; } @media only screen and (max-width: 767px) { .catalog-download-gallery { grid-template-columns: 1fr; gap: 1.6rem; margin: 2rem auto; } .catalog-download-gallery::before { top: 50%; height: 20rem; } .catalog-download-button { width: 100%; } } .catalog-header { background-color: var(--primary); color: var(--white); padding: 5rem 0 4.5rem; position: relative; overflow: visible; } .catalog-header .centralizador { position: static; } .catalog-header[data-tipo="NB"], .catalog-header[data-tipo="NSB"] { background-color: var(--softblue); color: var(--primary); } .catalog-header[data-tipo="PGA"] { background-color: var(--pga); color: var(--primary); } .catalog-header[data-tipo="PGCL"] { background-color: var(--pgcl); color: var(--primary); } .catalog-header[data-tipo="PP"] { background-color: var(--poly); color: var(--white); } /* .catalog-header::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 14px ); pointer-events: none; } */ .catalog-breadcrumb { margin-bottom: 1.6rem; } .catalog-breadcrumb ol { display: flex; align-items: center; gap: .6rem; padding: 0; margin: 0; flex-wrap: wrap; } .catalog-breadcrumb li { font-size: 1.25rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .catalog-breadcrumb li:not(:last-child)::after { content: '›'; margin-left: .6rem; color: currentColor; } .catalog-breadcrumb a { color: inherit; text-decoration: none; transition: var(--smooth); } .catalog-breadcrumb a:hover { color: currentColor; opacity: .8; } .catalog-header h1 { font-size: var(--clamp-text-md); font-weight: 700; font-style: italic; line-height: 1.1; margin: 0 0 1.2rem; } .catalog-header p { font-size: 2rem; font-weight: 400; line-height: 1.6; margin: 0; max-width: calc(100% - 36rem); } .catalog-thread-color { position: absolute; z-index: 2; right: -6rem; bottom: -14rem; display: block; width: 36rem; height: auto; max-width: none; transform: scaleX(-1); transform-origin: center; pointer-events: none; user-select: none; } .catalog-listing { padding: var(--space-lg) 0; } .catalog-meta { margin-bottom: var(--space); } .catalog-count { font-size: 1.3rem; color: var(--base-400); margin: 0; } .product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-lg) var(--space-md); } .product-card { display: flex; flex-direction: column; } .product-card-img-wrap { display: block; overflow: hidden; background-color: #f0f1f2; aspect-ratio: 4 / 3; } .product-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .product-card-img-wrap:hover img { transform: scale(1.04); } .product-card-body { padding-top: 1.4rem; display: flex; flex-direction: column; flex: 1; } .product-card-name { font-size: 1.45rem; font-weight: 700; line-height: 1.4; color: var(--base-900); margin: 0 0 1.2rem; } .product-card-name a { color: inherit; text-decoration: none; transition: var(--smooth); } .product-card-name a:hover { color: var(--apoio); } .product-card-price { font-size: 1.55rem; font-weight: 400; color: var(--base-900); margin: 0 0 1rem; font-variant-numeric: tabular-nums; } .product-spec-table { width: 100%; border-collapse: collapse; font-size: 1.3rem; margin: 0; } .product-spec-table tbody tr:nth-child(odd) { background-color: var(--base-100); } .product-spec-table tbody tr:nth-child(even) { background-color: var(--white); } .product-spec-table td { padding: .5rem .7rem; vertical-align: middle; line-height: 1.3; border: none; } .product-spec-table .spec-label { color: var(--base-500); font-weight: 400; width: 50%; } .product-spec-table .spec-value { color: var(--base-800); font-weight: 500; } .product-spec-table tr:last-child .spec-label, .product-spec-table tr:last-child .spec-value { color: var(--apoio); font-weight: 600; } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } } @media only screen and (max-width: 767px) { .catalog-header { padding: 3.5rem 0 7.5rem; } .catalog-header h1 { font-style: normal; } .catalog-header p { max-width: 100%; font-size: 1.6rem; line-height: 1.5; } .catalog-thread-color { width: 18rem; right: -3.5rem; bottom: -11rem; } .product-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .product-card-img-wrap { aspect-ratio: 4 / 3; } } /* ===================== QUOTE CART ===================== */ body.quote-page-active { width: 100%; max-width: 100%; overflow-x: hidden; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .product-card-price small, .produto-price small { font-size: 1.2rem; font-weight: 400; color: var(--base-500); } .quote-add-form { margin-top: .4rem; } .quote-add-form > label { display: block; margin-bottom: .5rem; font-size: 1.3rem; font-weight: 600; color: var(--base-700); } .quote-add-controls { display: flex; gap: .8rem; align-items: stretch; } .quote-add-controls input, .quote-quantity-control input { width: 5rem; min-height: 4.4rem; padding: .6rem .3rem; border: 0; border-radius: .6rem; background: #fff; color: #17243b !important; -webkit-text-fill-color: #17243b; opacity: 1; font-family: var(--font-1); font-size: 1.6rem; font-weight: 600; line-height: 1; text-align: center; } .quote-quantity-control { display: inline-flex; align-items: stretch; overflow: hidden; flex: 0 0 auto; min-height: 4.4rem; border: 1px solid var(--base-300); border-radius: .6rem; background: #fff; } .quote-quantity-control button { width: 3.4rem; padding: 0; border: 0; background: var(--base-100); color: #17243b; font-size: 2rem; font-weight: 600; line-height: 1; cursor: pointer; transition: var(--smooth); } .quote-quantity-control button:hover { background: var(--base-200); } .quote-add-button, .quote-email-button, .quote-whatsapp-button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 4.4rem; padding: .8rem 1.5rem; border: 0; border-radius: .6rem; color: var(--white); background: var(--primary); font-size: 1.4rem; font-weight: 600; cursor: pointer; text-decoration: none; } .quote-add-button:hover { background: var(--apoio); color: var(--white); } .quote-add-button icon { font-size: 2rem; } .quote-add-feedback { min-height: 1.8rem; margin: .5rem 0 0; color: var(--apoio); font-size: 1.2rem; } .quote-add-form-card { margin-top: auto; padding-top: 1.4rem; } .quote-add-form-card .quote-add-button { flex: 1; padding-inline: .8rem; } .quote-cart-widget { position: fixed; z-index: 1000; right: 2.4rem; bottom: 2.4rem; width: 6rem; height: 6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--white); background: var(--primary); box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.25); text-decoration: none; transition: transform .2s ease, background .2s ease; } .quote-cart-widget[hidden] { display: none; } .quote-cart-widget:hover { transform: translateY(-3px); background: var(--apoio); color: var(--white); } .quote-cart-widget > icon { font-size: 3rem; } .quote-cart-widget > svg { color: #fff !important; fill: currentColor; } .legacy-buy-actions { margin-top: 1.4rem; } .quote-cart-count { position: absolute; top: -.4rem; right: -.4rem; min-width: 2.4rem; height: 2.4rem; padding: 0 .5rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--white); border-radius: 2rem; color: var(--white); background: #d62f2f; font-size: 1.1rem; font-weight: 700; } .quote-page { padding: var(--space-md) 0 var(--space-lg); background: var(--base-50); } .quote-heading { max-width: 72rem; margin: var(--space-md) 0; } .quote-heading h1 { margin: .3rem 0 1rem; color: var(--base-900); font-size: var(--clamp-text-md); } .quote-heading > p:last-child { color: var(--base-600); font-size: 1.6rem; } .quote-eyebrow { margin: 0; color: var(--apoio); font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .quote-notice { margin-bottom: 2rem; padding: 1.4rem 1.8rem; border-radius: .6rem; font-size: 1.4rem; } .quote-notice.is-success { color: #175c37; background: #e4f5eb; border: 1px solid #a9dcc0; } .quote-notice.is-error { color: #842029; background: #f8d7da; border: 1px solid #f1aeb5; } .quote-empty { padding: var(--space-lg); text-align: center; background: var(--white); border-radius: .8rem; } .quote-empty[hidden], .quote-content[hidden] { display: none; } .quote-empty > icon { font-size: 5rem; color: var(--base-400); } .quote-empty h2 { margin: 1rem 0 .5rem; } .quote-empty p { margin: 0 0 2rem; color: var(--base-600); } .quote-content { min-width: 0; max-width: 100%; } .quote-table-wrap { display: block; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; contain: inline-size; margin-bottom: var(--space-md); background: var(--white); border-radius: .8rem; } .quote-table { width: 100%; min-width: 72rem; max-width: none; border-collapse: collapse; font-size: 1.4rem; } .quote-table th, .quote-table td { padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--base-200); text-align: left; } .quote-table th { color: var(--base-600); background: var(--base-100); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; } .quote-table td:first-child { min-width: 28rem; } .quote-table td:first-child strong, .quote-table td:first-child span { display: block; } .quote-table td:first-child span { margin-top: .3rem; color: var(--base-500); font-size: 1.2rem; } .quote-table .quote-quantity-control { min-height: 4rem; } .quote-table .quote-quantity-control input { width: 4.6rem; min-height: 4rem; color: #17243b !important; -webkit-text-fill-color: #17243b; background: #fff; opacity: 1; font-size: 1.5rem; font-weight: 600; } .quote-table .quote-quantity-control button { width: 3rem; } .quote-table tfoot td { border: 0; font-size: 1.6rem; font-weight: 700; } .quote-table tfoot td:first-child { text-align: right; } .quote-remove { padding: .5rem; border: 0; color: #b42318; background: transparent; font-size: 2rem; cursor: pointer; } .quote-customer-form { padding: var(--space-md); background: var(--white); border-radius: .8rem; } .quote-customer-form h2 { margin: 0 0 2rem; color: var(--base-900); font-size: 2rem; } .quote-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .quote-fields label { color: var(--base-700); font-size: 1.3rem; font-weight: 600; } .quote-fields input { appearance: none; -webkit-appearance: none; -moz-appearance: none; display: block; width: 100%; height: 4.8rem; margin-top: .6rem; padding: 1.2rem; border: 1px solid var(--base-300); outline: 0; border-radius: .6rem; box-shadow: none !important; background: #fff; background-image: none; font: inherit; } .quote-fields .item-field { width: 100%; height: 4.8rem; margin-top: .6rem; border: 1px solid var(--base-300); border-radius: .6rem; background: #fff; box-shadow: none; } .quote-fields .item-field input { width: 100%; height: 100%; margin: 0; padding: 1.2rem 4.2rem 1.2rem 1.2rem; border: 0 !important; outline: 0 !important; border-radius: .6rem; box-shadow: none !important; background: transparent; color: var(--base-900); caret-color: var(--base-900); font-size: 1.6rem; } .quote-fields .item-field:focus-within { border-color: var(--apoio); box-shadow: 0 0 0 3px rgba(var(--user-500-rgb), .2); } .quote-fields .item-field input:focus { outline: 0 !important; box-shadow: none !important; } .quote-fields input:focus, .quote-add-controls input:focus, .quote-table input:focus { outline: 3px solid rgba(var(--user-500-rgb), .2); border-color: var(--apoio); } .quote-consent { display: flex; gap: .9rem; align-items: flex-start; margin: 2rem 0; color: var(--base-600); font-size: 1.3rem; font-weight: 400; } .quote-consent input { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; accent-color: var(--primary); } .quote-submit-actions { display: flex; flex-wrap: wrap; gap: 1rem; } .quote-email-button { background: var(--primary); } .quote-whatsapp-button { background: var(--whatsapp); } .quote-email-button:hover { background: var(--apoio); } .quote-whatsapp-button:hover { background: var(--whatsapp-alt); } .quote-submit-actions icon { font-size: 2rem; } .quote-disclaimer { margin: 1.5rem 0 0; color: var(--base-500); font-size: 1.2rem; } .quote-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } @media only screen and (max-width: 767px) { .quote-page .centralizador { width: 90%; max-width: 90%; } .quote-content { width: 100%; max-width: 100%; min-width: 0; } .quote-table-wrap { width: 100%; max-width: 100%; overflow: visible; contain: none; background: transparent; } .quote-table { display: block; width: 100%; min-width: 0; max-width: 100%; table-layout: auto; background: transparent; } .quote-table thead { display: none; } .quote-table tbody { display: grid; gap: 1.2rem; width: 100%; } .quote-table tbody tr { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-width: 0; padding: 1.4rem; gap: 1.2rem; border: 1px solid var(--base-200); border-radius: .8rem; background: var(--white); } .quote-table tbody td { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; } .quote-table tbody td::before { margin-bottom: .4rem; color: var(--base-500); font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .quote-table tbody td:nth-child(1) { grid-column: 1 / -1; padding-right: 3rem; } .quote-table tbody td:nth-child(1)::before { content: 'Product'; } .quote-table tbody td:nth-child(2)::before { content: 'Unit price'; } .quote-table tbody td:nth-child(3)::before { content: 'Quantity'; } .quote-table tbody td:nth-child(4)::before { content: 'Subtotal'; } .quote-table tbody td:nth-child(5) { position: absolute; top: 1.1rem; right: 1.1rem; } .quote-table tbody td:nth-child(5)::before { content: none; } .quote-table tfoot { display: block; width: 100%; margin-top: 1.2rem; } .quote-table tfoot tr { display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; padding: 1.4rem; background: var(--white); border-radius: .8rem; } .quote-table tfoot td { display: none; min-width: 0; padding: 0; border: 0; } .quote-table tfoot td:first-child { display: block; min-width: 0; text-align: left; } .quote-table tfoot .js-quote-total { display: block; } .quote-cart-widget { right: 1.6rem; bottom: 1.6rem; width: 5.5rem; height: 5.5rem; } .quote-fields { grid-template-columns: 1fr; } .quote-customer-form { padding: 2rem 1.5rem; } .quote-submit-actions { flex-direction: column; } .quote-submit-actions .btn { width: 100%; } } /* ===================== FOOTER ===================== */ .w3-footer { background-color: #000; color: #fff; font-family: var(--font-1); } .footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--space-lg); padding-top: var(--space-lg); padding-bottom: var(--space-lg); } .footer-col { display: flex; flex-direction: column; gap: var(--space); } .footer-logo { display: inline-block; width: 18rem; transition: var(--smooth); } .footer-logo:hover { opacity: .75; } .footer-logo svg { width: 100%; height: auto; display: block; } .footer-tagline { font-size: 1.3rem; line-height: 1.6; color: rgba(255,255,255,.55); margin: 0; } .footer-social { display: flex; gap: .8rem; margin: 0; padding: 0; } .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; font-size: 1.8rem; transition: var(--smooth); text-decoration: none; } .footer-social-link:hover { background-color: #fff; color: #000; border-color: #fff; } .footer-heading { font-size: 1.1rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); margin: 0; } .footer-links { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; } .footer-links a { font-size: 1.45rem; color: rgba(255,255,255,.8); text-decoration: none; transition: var(--smooth); } .footer-links a:hover { color: #fff; padding-left: .4rem; } .footer-address { display: flex; flex-direction: column; gap: .9rem; font-style: normal; } .footer-contact-item { display: flex; align-items: center; gap: .8rem; font-size: 1.45rem; color: rgba(255,255,255,.8); text-decoration: none; transition: var(--smooth); word-break: break-all; } .footer-contact-item icon { font-size: 1.8rem; flex-shrink: 0; } .footer-contact-item:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding-top: var(--space); padding-bottom: var(--space); } .footer-copy { font-size: 1.3rem; color: rgba(255,255,255,.35); margin: 0; } .footer-legal { display: flex; gap: var(--space); } .footer-legal a { font-size: 1.3rem; color: rgba(255,255,255,.35); text-decoration: none; transition: var(--smooth); } .footer-legal a:hover { color: rgba(255,255,255,.75); } @media only screen and (min-width: 768px) and (max-width: 1023px) { .footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-md); } .footer-brand { grid-column: 1 / -1; } } @media only screen and (max-width: 767px) { .footer-main { grid-template-columns: 1fr; gap: var(--space-md); padding-top: var(--space-md); padding-bottom: var(--space-md); } .footer-logo { width: 15rem; } .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: .6rem; } } /* ===================== PRODUTO DETAIL ===================== */ .produto-page { padding: var(--space-md) 0 var(--space-lg); } .produto-page .catalog-breadcrumb { margin-bottom: var(--space-md); } /* 3-col grid: thumbs | image | info */ .produto-layout { display: grid; grid-template-columns: 8rem 1fr 42%; gap: var(--space); align-items: start; } /* Thumbnail column */ .produto-thumbs { display: flex; flex-direction: column; gap: .8rem; } .produto-thumb { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 2px solid var(--base-200); background: var(--base-50); cursor: pointer; overflow: hidden; transition: border-color .2s ease; border-radius: .4rem; } .produto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; } .produto-thumb:hover { border-color: var(--apoio); } .produto-thumb:hover img { transform: scale(1.08); } .produto-thumb.active { border-color: var(--apoio); border-width: 2px; } /* Main image with zoom */ .produto-img-main { overflow: hidden; border-radius: .4rem; background: var(--base-100); } .produto-img-zoom-wrap { overflow: hidden; cursor: zoom-in; width: 100%; aspect-ratio: 5 / 4; } .produto-img-zoom-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center center; transform: scale(1); opacity: 1; /* transition only on transform + opacity — NOT on transform-origin (would lag during mousemove) */ transition: transform .35s ease, opacity .18s ease; will-change: transform; } .produto-img-zoom-wrap img.is-zoomed { transform: scale(2); cursor: crosshair; } /* Product info panel */ .produto-info { display: flex; flex-direction: column; gap: 1.6rem; padding-left: var(--space); } .produto-code { font-size: 1.4rem; font-weight: 600; color: var(--apoio); margin: 0; letter-spacing: .03em; } .produto-name { font-size: 2.2rem; font-weight: 400; line-height: 1.35; color: var(--base-900); margin: 0; } .produto-name strong { font-weight: 700; } .produto-price { font-size: 2rem; font-weight: 600; color: var(--base-900); margin: 0; font-variant-numeric: tabular-nums; } .produto-desc { font-size: 1.45rem; line-height: 1.65; color: var(--apoio); margin: 0; } .produto-thread-color { position: relative; display: flex; align-items: flex-start; width: 100%; min-height: 11rem; margin-bottom: -5rem; padding: 1.5rem; overflow: visible; border-radius: .8rem; background: transparent; } .produto-thread-color span { display: none; position: relative; z-index: 2; color: var(--primary); font-size: 1.15rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .produto-thread-color img { position: absolute; right: 0; top: 50%; bottom: auto; display: block; width: 15rem; height: auto; max-width: none; transform: translateY(-50%) scaleX(-1); pointer-events: none; user-select: none; } .produto-page[data-product="PGA"] .produto-thread-color { background: transparent; } .produto-page[data-product="PGCL"] .produto-thread-color { background: transparent; } .produto-page[data-product="PP"] .produto-thread-color { background: transparent; } .produto-page[data-product="PP"] .produto-thread-color span { color: var(--white); } @media only screen and (max-width: 767px) { .produto-thread-color, .produto-page[data-product="PGA"] .produto-thread-color, .produto-page[data-product="PGCL"] .produto-thread-color, .produto-page[data-product="PP"] .produto-thread-color { justify-content: center; min-height: 12rem; margin-bottom: 0; padding: 0; background: transparent; } .produto-thread-color span { display: none; } .produto-thread-color img { right: auto; left: 50%; top: 50%; width: 16rem; transform: translate(-50%, -50%) scaleX(-1); } } .produto-threads { font-size: 1.45rem; color: var(--base-700); margin: 0; } .produto-threads strong { font-weight: 700; color: var(--base-900); } .produto-specs-link { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.4rem; font-weight: 500; color: var(--apoio); text-decoration: underline; transition: var(--smooth); } .produto-specs-link:hover { color: var(--primary); } .produto-specs-link icon { font-size: 1.6rem; } .produto-buy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 450px; } .btn-whatsapp-buy, .btn-email-buy, .btn-sms-buy { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; color: var(--white); font-size: 1.6rem; font-weight: 600; padding: 1.2rem 2.4rem; border-radius: .6rem; text-decoration: none; border: none; cursor: pointer; transition: var(--smooth); } .btn-whatsapp-buy { grid-column: 1 / -1; } .btn-whatsapp-buy icon, .btn-email-buy icon, .btn-sms-buy icon { font-size: 2.2rem; } .btn-whatsapp-buy { background-color: var(--whatsapp); } .btn-whatsapp-buy:hover { background-color: var(--whatsapp-alt); } .btn-email-buy { background-color: var(--user-500); } .btn-email-buy:hover { background-color: var(--info); } .btn-sms-buy { background-color: var(--primary); } .btn-sms-buy:hover { background-color: var(--user-950); } /* Specs table section */ .produto-specs-section { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--base-200); } .produto-specs-title { font-size: 1.6rem; font-weight: 600; color: var(--base-700); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--space); } .produto-specs-table { max-width: 54rem; } /* Responsive */ @media only screen and (min-width: 768px) and (max-width: 1023px) { .produto-layout { grid-template-columns: 7rem 1fr; grid-template-rows: auto auto; } .produto-info { grid-column: 1 / -1; padding-left: 0; } } @media only screen and (max-width: 767px) { .produto-layout { grid-template-columns: 1fr; } .produto-thumbs { flex-direction: row; flex-wrap: wrap; } .produto-thumb { width: 7rem; } .produto-info { padding-left: 0; gap: 1.2rem; } .produto-name { font-size: 1.8rem; } .produto-img-zoom-wrap { aspect-ratio: 4 / 3; } } /* Center the recognition flag in the space between logo and menu on mobile. */ @media only screen and (max-width: 767px) { header.w3-header .top-bar .centralizador img { left: calc(50% + 4rem); } } /* Suture Training Pad product */ .produto-page[data-product="PAD"] .produto-img-zoom-wrap { aspect-ratio: 16 / 9; background: var(--base-100); } .produto-page[data-product="PAD"] .produto-img-zoom-wrap img, .produto-page[data-product="PAD"] .produto-thumb img { object-fit: contain; } .produto-video-section { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--base-200); } .produto-video-wrap { width: min(100%, 96rem); margin: 0 auto; overflow: hidden; border-radius: .8rem; background: #000; box-shadow: 0 1.2rem 3rem rgba(5, 35, 67, .16); } .produto-video-wrap video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }