@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } body { background-color: #fafafa; font-family: "Barlow", sans-serif; font-size: 18px; } html, body { scroll-behavior: smooth; } .container { padding: 20px 0px 80px 0px; margin-left: 14%; width: 86%; } @media screen and (max-width: 920px) { .container { padding: 20px 0px 80px 0px; margin-left: 0%; width: 96%; } } @media screen and (max-width: 540px) { .container { padding: 150px 0px 10px 0px; margin-left: 0%; width: 96%; } } footer { background-color: #1a1a1a; width: 100%; padding: 10px; bottom: 0; position: fixed; } footer p { font-size: 0.8em; text-align: center; color: #fafafa; } @media screen and (max-width: 540px) { footer p { font-size: 0.6em; } } h1, h2, h3, h4, h5, h6 { color: #1a1a1a; } h1 { font-weight: 700; font-size: 1.8em; } h2 { font-weight: 500; font-size: 1.5em; } h3 { font-weight: 400; font-size: 1.3em; } p { font-weight: 300; } em { font-style: italic; } strong { font-weight: 500; } /* width */ ::-webkit-scrollbar { width: 8px; height: 8px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: #c5a672; border-radius: 15px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #c5a672; } ::selection { background-color: #c5a672; color: #fafafa; } .headerindex { height: 100vh; width: 100vw; background-image: url("../img/fundo-header.png"); background-size: cover; background-position: center center; position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; } @media screen and (max-width: 920px) { .headerindex { background-image: url("../img/fundo-header-tablet.png"); } } .headerindex .titulo { width: 35vw; padding-left: 12%; text-align: left; margin-top: 50px; } @media screen and (max-width: 920px) { .headerindex .titulo { width: 83vw; padding-left: 18%; } } .headerindex .titulo h1 { font-size: 2.3em; } .headerindex .titulo ul { margin-top: 20px; margin-bottom: 20px; } .headerindex .titulo ul li { text-decoration: none; } .headerindex .titulo ul li:hover { text-decoration: underline; } .headerindex .titulo img { width: 13px; } .headerindex .titulo p { margin-top: 20px; } .headerindex .logo { width: 35%; margin-left: 4%; } @media screen and (max-width: 920px) { .headerindex .logo { margin-left: 15%; width: 70%; } } .headermanual { width: 15%; height: 100vh; border-right: solid 0.5px #cbcbcb; position: fixed; padding: 50px 20px 50px 20px; text-align: right; background-color: #fafafa; } .headermanual img { width: 90%; } .headermanual h1 { font-size: 1.2em; margin-top: 30px; } .headermanual ul { margin-top: 10px; } .headermanual ul li { text-decoration: none; transition: 0.5s; } .headermanual ul li:hover { color: #808080; text-decoration: underline; transition: 0.5s; } .headermanual .apendice { margin: 30px 0 30px 0; } .headermanual .apendice li { font-size: 0.9em; text-decoration: none; transition: 0.5s; margin-top: 10px; margin-left: 30px; } .headermanual .apendice li:hover { color: #808080; text-decoration: underline; transition: 0.5s; } .headermanual .voltar { text-transform: uppercase; color: #c5a672; font-size: 1em; } .headermanual .voltar img { width: 14px; } @media screen and (max-width: 920px) { .headermanual { display: none; } } .menu-mobile { display: none; background-color: #fafafa; } @media screen and (max-width: 920px) { .menu-mobile { display: flex; width: 100%; padding: 20px; flex-direction: row; justify-content: start; border-bottom: 0.5px solid #cbcbcb; } .menu-mobile img { width: 50px; margin-right: 15px; } .menu-mobile h1 { font-size: 1.2em; } .menu-mobile ul { display: flex; flex-direction: row; } .menu-mobile ul li { font-size: 0.75em; margin-right: 15px; } } @media screen and (max-width: 540px) { .menu-mobile { position: fixed; flex-direction: column; align-items: flex-start; } .menu-mobile img { width: 20vw; margin-right: 0px; margin-bottom: 10px; } } section { margin: 80px 50px 50px 100px; width: 60%; scroll-behavior: smooth; } section h1, section h2, section h3, section h4 { padding-bottom: 2px; margin-bottom: 20px; } section h1 { margin-top: 100px; border-bottom: solid 0.5px #cbcbcb; scroll-margin-top: 200px; } section h2 { margin-top: 60px; } section h3 { margin-top: 30px; } section p { font-size: 0.95em; margin-bottom: 20px; } section ul { font-weight: 300; list-style-type: circle; margin-left: 20px; } section ul li { margin-bottom: 10px; } section ol { font-weight: 300; list-style-type: decimal; margin-left: 20px; } section ol li { margin-bottom: 10px; } section img { width: 80%; margin-left: 10%; } section figcaption { font-size: 0.8em; color: #808080; text-align: left; } section blockquote { margin-left: 15%; font-size: 0.85em; } section ul li { color: #1a1a1a; text-decoration: none; } section ul li :hover { color: #cbcbcb; text-decoration: underline; transition: 0.5s; } @media screen and (max-width: 920px) { section { width: 80%; } } @media screen and (max-width: 540px) { section { margin: 20px 30px; width: 90%; } } .quadroexp { width: 100%; margin: 0px; } .quadroexp img { padding: 10px; padding-left: 30px; } @media screen and (max-width: 920px) { .quadroexp { width: 104%; } } .quadroexp-tipo { width: 100%; margin: 0px; background-color: #1a1a1a; padding-top: 1%; padding-bottom: 1%; } .quadroexp-tipo img { padding: 10px; padding-left: 30px; } @media screen and (max-width: 920px) { .quadroexp-tipo { width: 104%; } } .quadroexp-tipo h1 { font-size: 15em; font-weight: 600; padding-left: 2%; padding-top: 1%; color: #c5a672; margin-bottom: 0px; } @media screen and (max-width: 700px) { .quadroexp-tipo h1 { font-size: 25vw; } } .quadroexp-tipo h2 { font-size: 2vw; font-weight: 500; color: #c5a672; padding-left: 3%; margin-bottom: 1%; padding-right: 3%; } .quadroexp-tipo h2 :hover { text-decoration: underline; transition: 0.5s; } @media screen and (max-width: 700px) { .quadroexp-tipo h2 { font-size: 5vw; } } .quadroexp-tipo .desc-2 { font-size: 1.3vw; font-weight: 400; color: #c5a672; padding-left: 3%; margin-bottom: 10px; } @media screen and (max-width: 700px) { .quadroexp-tipo .desc-2 { font-size: 3vw; } } .quadroexp-pesos { background-color: #ffffff; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-left: 3%; padding-right: 3%; color: #c5a672; } .quadroexp-pesos p { font-size: 3vw; padding: 10px 0px 10px 0; margin-bottom: 0; } .grid { width: 98%; background-image: url("../img/grid.svg"); background-size: 20px; background-repeat: repeat; border: 0.5px solid #cbcbcb; margin-bottom: 40px; padding: 30px; } .variações { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 40px; } @media (max-width: 920px) { .variações { grid-template-columns: 1fr; } } .variações .branco { background-color: #fafafa; border: 0.5px solid #cbcbcb; margin: 20px 30px 20px 30px; } .variações .branco figure img { margin-top: 0px; } .variações .intermed { background-color: saddlebrown; border: 0.5px solid #cbcbcb; margin: 20px 30px 20px 30px; } .variações .intermed figure img { margin-top: 0px; } .variações .preto { background-color: #1a1a1a; border: 0.5px solid #cbcbcb; margin: 20px 30px 20px 30px; } .variações .preto figure img { margin-top: 0px; } .variações .imagem { background-image: url("../img/fundo-imagem.jpg"); background-size: cover; border: 0.5px solid #cbcbcb; margin: 20px 30px 20px 30px; } .variações .imagem figure img { margin-top: 0px; } .variações figure img { padding: 10px; } .variações figure figcaption { background-color: #4CBB17; color: #fafafa; width: 100%; font-size: 0.8em; padding: 3px; text-align: center; } .variações figure .errado { background-color: #D2042D; } .paleta { display: inline-flex; margin: 0; width: 100%; } @media screen and (max-width: 700px) { .paleta { width: 104%; } } .paleta .preto { width: 33.3%; height: 500px; background-color: #1a1a1a; text-transform: uppercase; font-size: 0.8em; color: #fafafa; padding: 40px; padding-left: 60px; } @media screen and (max-width: 540px) { .paleta .preto { font-size: 0.65em; padding-left: 20px; } } .paleta .branco { width: 33.3%; height: 500px; background-color: #ffffff; text-transform: uppercase; font-size: 0.8em; color: #1a1a1a; padding: 40px; } @media screen and (max-width: 540px) { .paleta .branco { font-size: 0.65em; padding-left: 20px; } } .paleta .dourado { width: 33.4%; height: 500px; background-color: #c5a672; text-transform: uppercase; font-size: 0.8em; color: #1a1a1a; padding: 40px; } @media screen and (max-width: 540px) { .paleta .dourado { font-size: 0.65em; padding-left: 20px; } } .paleta strong { font-weight: 600; } .iconografia { display: inline-flex; margin: 0; width: 100%; } .iconografia .preto { width: 40%; padding: 80px; padding-left: 60px; background-color: #1a1a1a; } .iconografia .preto h1 { color: #c5a672; font-size: 3em; } @media screen and (max-width: 920px) { .iconografia .preto h1 { font-size: 1.5em; } } .iconografia .preto h2 { color: #c5a672; font-size: 1.5em; font-weight: 300; } @media screen and (max-width: 920px) { .iconografia .preto h2 { font-size: 0.9em; } } .iconografia .preto h3 { color: #c5a672; font-size: 1.4em; } .iconografia .preto h3 :hover { text-decoration: underline; transition: 0.5s; } @media screen and (max-width: 920px) { .iconografia .preto h3 { font-size: 1em; } } @media screen and (max-width: 920px) { .iconografia .preto { width: 50%; } } @media screen and (max-width: 540px) { .iconografia .preto { width: 100%; } } .iconografia .branco { width: 60%; padding: 40px; padding-left: 60px; background-color: #ffffff; } .iconografia .branco img { margin: 5%; width: 40vw; } @media screen and (max-width: 540px) { .iconografia .branco img { margin: 1%; width: 100%; } } @media screen and (max-width: 920px) { .iconografia .branco { width: 50%; } } @media screen and (max-width: 540px) { .iconografia .branco { width: 100%; padding-left: 40px; } } @media screen and (max-width: 700px) { .iconografia { display: block; width: 104%; } } iframe { width: 100%; aspect-ratio: 16/9; margin: 40px 0px 40px 0; } @media screen and (max-width: 700px) { iframe { margin: 20px 0px 20px 0; } } figure { width: 100%; } figure img { width: 100%; margin: 40px 0px 0px 0px; } /*# sourceMappingURL=style.css.map */