@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&display=swap'); /*** The new CSS reset - version 1.8.5 (last updated 14.6.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" attribute is exclud, because 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; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { 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; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } :root { --orange: #eba949; --purple-clear: #4c1a61; --purple-dark: #3b1e32; --gray-dark: #1d1f21; --gray-soft: #efefef; --off-white: #fefdff; } /* 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; } strong { font-weight: 600; } /* rows cols only necessary */ .row { display: flex; flex-wrap: wrap; } .row>* { width: 100%; max-width: 100%; } .col { flex: 1 0 0%; padding: 0 1rem; } .p-0 { padding: 0 !important; } /* properties to row */ .d-flex { display: flex; } .justify-content-center { justify-content: center; } .align-items-center { align-items: center; } .justify-content-start { justify-content: flex-start; } .justify-content-between { justify-content: space-between; } .position-relative { position: relative; } .order-1 { order: 1; } .order-2 { order: 2; } .col-6 { width: 50%; padding: 1rem; } .col-4 { width: 33.333%; padding: 1rem; } .col-3 { width: 25%; padding: 1rem; } .col-8 { width: 66.6%; padding: 1rem; } /* titles */ body { font-family: 'Archivo', sans-serif; font-size: 18px; scroll-behavior: smooth; } * { transition: all .2s ease; } header { display: none; } .text-left { text-align: left; } .text-right { text-align: right; } .title { font-size: 45px !important; /* não alterar */ font-weight: 500; color: var(--off-white); margin-bottom: 3rem; text-shadow: 3px 4px 8px rgba(0,0,0,.3); height: auto; } .subtitle { font-size: 1.6rem; font-weight: 600; color: var(--purple-clear); margin-bottom: 10px; } .title-section { position: relative; font-size: 3rem; color: var(--purple-clear); padding: 2rem 0; font-weight: 600; width: fit-content; } .title-section::after { content: " "; width: 140px; height: 2px; background-color: var(--purple-dark); display: block; top: 50%; left: 115%; position: absolute; transform: translateY(-50%); } .paragraph { color: var(--purple-clear); font-size: 1rem; line-height: 1.6rem; margin: 0 0 10px 0; } .main-banner { background: url(../images/background-duplex-guestier.png) top center no-repeat; background-size: cover; height: 100vh; display: flex; justify-content: center; position: relative; z-index: 1; } .main-banner::before { content: " "; width: 100%; height: 100%; background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5)); position: absolute; top: 0; left: 0; z-index: -1; } .main-banner .container { display: flex; align-items: flex-end; padding: 15px 15px 15vh 15px; } .main-banner aside { width: auto; display: flex; justify-content: center; flex-direction: column; } .main-banner aside.left { width: 68%; } .main-banner aside.right { width: 28%; } .left .button { font-size: 1.3rem; padding: 1rem 2rem; height: auto; } .left .button:hover { box-shadow: 0px 0px 25px -5px #ffc400; } .form-lead { background-color: var(--off-white); box-shadow: 2px 3px 20px 0px #0000003b; border-radius: 4px; display: flex; flex-direction: column; padding: 0 35px 35px 35px; margin: 0 auto; width: 300px; overflow: hidden; } .form-lead h2 { color: var(--off-white); font-size: 2rem; position: relative; background: var(--purple-dark); text-align: center; padding: 14px 0; margin: 0 0 30px; z-index: 1; } .form-lead h2::before { content: " "; width: 200%; background-color: var(--purple-dark); position: absolute; top: 0; left: -50%; height: 63px; z-index: -1; } .form-lead input[type="text"], .form-lead input[type="email"], .form-lead input[type="tel"] { background: #f0eded; border-radius: 4px; height: 45px; margin: 3px 0 15px; padding: 0 10px; font-size: 14px; font-weight: 400; } .form-lead input::placeholder { color: #ccc; } /* style checkbox */ .form-group { display: block; margin-bottom: 15px; } .form-group input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none; cursor: pointer; } .form-group label { position: relative; cursor: pointer; font-size: 12px; color: #666; transition: all .2s ease; } .form-group label:before { content:''; -webkit-appearance: none; background-color: transparent; border: 2px solid var(--orange); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 7px; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; margin-right: 5px; transition: all .2s ease; } .form-group input:checked + label:after { content: ''; display: block; position: absolute; top: 0px; left: 6.5px; width: 6px; height: 11px; border: solid var(--purple-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); } .form-lead .button { width: 100%; } .button { background-color: var(--orange); color: #fff; border-radius: 51px; width: fit-content; padding: 5px 25px; height: 50px !important; text-align: center; font-size: 1rem; cursor: pointer; transition: all .2s ease-in-out; align-items: center; display: flex; justify-content: center; } .button svg { width: 30px; height: 30px; margin-right: 10px; } .button:hover { background:#c57a09; } /* retornos success, error */ .success { position: relative; } .success::before { content: " "; background:#008000bf; width: 300%; position: absolute; top: 0; left: 0; } .success { background:#008000bf; border: 1px solid green; } .error { background: #e35656; border:1px solid red; } /* type text js */ .typeText::after { content: "|"; /* animation: blink 1s step-end infinite; */ animation: none; } .showAnim.typeText::after { animation: blink 1s step-end infinite; } @keyframes blink { 0%, 100% {opacity: 1;} 50% {opacity: 0;} } /* plantas */ .plantas { display: flex; justify-content: center; padding: 2rem 2rem 6rem 2rem } .plantas .container { position: relative; } .plantas .container::before { content: " "; width: 150px; height: 130px; background: url(../images/galho_1000px.png) 0 0 no-repeat; background-size: 100%; top: -2rem; left: 10%; position: absolute; } .plantas .dots .glider-dot { position: relative; width: auto; background: unset; } .plantas .dots button::after { font-size: 35px; font-weight: 500; color: var(--purple-clear); margin: 0 20px; } .plantas .dots button.active::after { color: var(--orange); font-weight: 600; background: unset; } .plantas .dots button[data-index="0"]::after { content: "160 m²"; } .plantas .dots button[data-index="1"]::after { content: "180 m²"; } .plantas .dots button[data-index="2"]::after { content: "200 m²"; } .glider-item { display: flex; } .glider-item img { padding: 2rem; max-width: 100%; } /* o duplex */ .o-duplex { display: flex; justify-content: center; background-color: var(--gray-soft); padding: 2rem 0; } .o-duplex .paragraph { color: var(--purple-clear); } .o-duplex .container .left { background: url(../images/o-duplex.png) 0 0 no-repeat; background-size: cover; height: 100%; padding: 20px 20px 20px 0; } .o-duplex .container .right { padding: 0px 0 20px 20px; } /* glider buttons */ .glider-full, .glider { position: relative; } .carousel { position: relative; } .carousel .glider-prev, .carousel .glider-next { width: fit-content; top: 50%; } .carousel .glider-prev { left: 5rem; } .carousel .glider-next { right: 5rem; } .glider-prev svg { transform: rotate(180deg); } /* scroll block */ .scroll-block { overflow: hidden !important; } /* modal */ /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 10; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.8); /* Black w/ opacity */ } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: fit-content; /* Could be more or less, depending on screen size */ position: relative; } /* The Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; background: #fff; position: absolute; right: 0; padding: 10px; top: 0; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .localizacao { display: flex; justify-content: center; } .text-cta { padding: 3rem 0; } .text-cta .title { text-shadow: none; color: var(--purple-clear); text-align: center; font-weight: 600; font-size: 3.5rem; } .text-cta .button { margin: 0 auto; } .ebook { padding: 3rem 0 2rem 0; overflow: hidden; } .ebook .container::after{ content: " "; position: absolute; top: -3.5rem; width: 150px; height: 130px; background: url(../images/galho_1000px.png) 0 0 no-repeat; background-size: 100%; right: 15%; } .ebook .title { color: var(--purple-clear); text-shadow: none; font-size: 3.5rem; } .section-cta { background: var(--gray-soft); padding: 2rem; } .section-cta img { border-radius: 5px; } .glider-full { } .glider-full img { width: 100%; } footer { padding: 2rem 0; background: var(--orange); color: var(--off-white); } .small-text { font-size: 12px; margin-bottom: 25px; } @media (min-width: 1239px) { .container { width: 1190px; } } @media (max-width: 1239px) { header { display: flex; width: 100%; padding: 15px 0; justify-content: center; } header img { max-width: 150px; } .main-banner .container { flex-direction: column; width: 100%; align-items: normal; padding: 15px; justify-content: space-around; } .title { font-size: 2rem; text-align: center; text-shadow: 2px 2px 4px rgba(0,0,0,.4); height: 70px; } .button { margin: 0 auto; } .main-banner { padding-top: 30vh; } .main-banner aside.left, .main-banner aside.right { width: 100%; } .main-banner aside.left { order: 1; } .main-banner aside.right { order: 2; padding-top: 10vh; } .form-lead { width: 100%; } .plantas { padding: 0 0 8vh; } .plantas .container { width: 100%; } .plantas .dots button::after { font-size: 25px; margin: 0; } .plantas .glider-dots { justify-content: space-around; } .form-lead { padding: 0 15px 15px 15px; } .form-lead h2 { font-size: 1rem; margin-bottom: 20px; } .form-lead h2::before { height: 47px; } .form-lead input[type="text"], .form-lead input[type="email"], .form-lead input[type="tel"] { margin: 1px 0 8px; } .form-group label:before { top: -2px; } .carousel .glider-next { right: 1rem; } .carousel .glider-prev { left: 1rem; } .section-cta { padding: 2rem 0; } .suite-order .col-6:nth-child(1) { order: 2; } .suite-order .col-6:nth-child(2) { order: 1; } .ebook .container::after { width: 105px; } footer .col-3 { width: 100%; text-align: center; } footer .col-3 img { max-width: 150px; } iframe { width: 100% !important; } } @media (max-width: 1239px) { .o-duplex { padding: 5rem 0 2rem 0; } .col-6 { width: 100%; } .title { font-size: 25px!important; } .title-section { width: fit-content; font-size: 2rem; padding: 1rem 0; } .title-section::after { width: 50%; left: 120%; position: relative; top: -16px; } .text-right { text-align: left; } .left .button { font-size: 1rem; } }