/* Poppins — 300 / 500 / 600 / 700 / 800 / 900, subsets latin e latin-ext. Copiado do fonts.googleapis.com, como nos demais hotsites. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z1JlFd2JQEl8qw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z1xlFd2JQEk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDD4Z1JlFd2JQEl8qw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDD4Z1xlFd2JQEk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLBT5Z1JlFd2JQEl8qw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLBT5Z1xlFd2JQEk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; } :root { --blue: #2F729B; --blue-l: #71A9D4; --cream: #FEEED0; --red: #E6342B; --gray: #5F5F5F; --gray-l: #6A6A6A; /* Distância da borda do .wrap até a borda da viewport. Serve para sangrar decorações de dentro do wrap até o fim da tela. O .wrap do Olaria é mais estreito que o padrão (ver abaixo). */ --extra: 0px; } @media ( width > 1144px ) { :root { --extra: calc( ( 100vw - 1144px ) / 2 ); } } html { scroll-behavior: smooth; } body { min-height: 100vh; width: 100%; font: 300 16px/1.5 'Poppins', tahoma, sans-serif; color: #fff; background-color: #fff; display: flex; flex-direction: column; position: relative; } strong { font-weight: 700; } a { transition: .3s all ease-in-out; text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } /* O Figma do Olaria fecha em 1104px de conteúdo (margens de 168px no frame de 1440), e não nos 1200px do padrão da casa. Para alinhar aos demais hotsites, é só trocar por 1240px aqui e no @media do --extra. */ .wrap { width: 100%; max-width: 1144px; margin: 0 auto; padding: 0 20px; } #hero { min-height: 555px; position: relative; isolation: isolate; overflow: clip; background-color: #2b3a42; /* véu de 37% do layout, que dá contraste ao texto sobre a foto */ &::before { content: ''; position: absolute; inset: 0; background: rgba( 0, 0, 0, .37 ); z-index: -1; } .wrap { min-height: 555px; padding-block: 38px 26px; position: relative; } .intro { max-width: 480px; } /* o logotipo é o h1: o texto fica no DOM para leitor de tela e busca, e o desenho vem do SVG */ h1 { width: 277px; aspect-ratio: 277 / 140; font-size: 1px; color: transparent; background: url(../img/logo-olaria.svg) no-repeat 0 0 / contain; } h2 { font-size: 1.25rem; font-weight: 300; line-height: 1.55; margin-top: 15px; max-width: 400px; } /* mesmo caso do h1: "2 Quartos com varanda" é desenhado em Solomon Sans, fonte licenciada, então vem como vetor */ .qts { width: 320px; aspect-ratio: 320 / 114; font-size: 1px; color: transparent; background: url(../img/quartos.svg) no-repeat 0 0 / contain; margin-top: 32px; } .lazer { min-height: 62px; margin-top: 16px; padding-left: 118px; display: flex; flex-direction: column; justify-content: center; font-size: 1rem; line-height: 1.19; letter-spacing: .4px; background: url(../img/icone-lazer.svg) no-repeat 20px 50% / 86px auto; } .pin { min-height: 42px; margin-top: 32px; padding-left: 44px; font-size: .875rem; font-weight: 900; line-height: 1.5; max-width: 420px; background: url(../img/icone-pin.svg) no-repeat 2px 1px / auto 37px; } .familia { position: absolute; right: -10px; bottom: -48px; width: 474px; height: auto; pointer-events: none; } picture { position: absolute; inset: 0; z-index: -2; img { width: 100%; height: 100%; object-fit: cover; object-position: center; } } } @media ( width < 992px ){ #hero { min-height: 470px; /* o `cover` amplia a foto e traz o guarda-sol claro para trás do texto; o degradê devolve o contraste do layout original */ &::before { background: linear-gradient( to right, rgba( 0, 0, 0, .55 ) 0%, rgba( 0, 0, 0, .34 ) 55%, rgba( 0, 0, 0, .24 ) 100% ); } .wrap { min-height: 470px; padding-block: 32px 24px; } .intro { max-width: 62%; } h1 { width: 224px; } h2 { font-size: 1.0625rem; margin-top: 12px; } .qts { width: 240px; margin-top: 26px; } .lazer { min-height: 50px; margin-top: 14px; padding-left: 92px; font-size: .9375rem; background-position: 8px 50%; background-size: 70px auto; } .pin { margin-top: 26px; padding-left: 38px; font-size: .8125rem; background-size: auto 31px; } .familia { right: -12px; bottom: -38px; width: 34vw; } } } @media ( width < 600px ){ #hero { min-height: 1px; &::before { background: linear-gradient( to bottom, rgba( 0, 0, 0, .52 ) 0%, rgba( 0, 0, 0, .40 ) 45%, rgba( 0, 0, 0, .28 ) 100% ); } .wrap { min-height: 1px; padding-block: 28px 0; display: flex; flex-direction: column; } .intro { max-width: none; } h1 { width: 196px; } h2 { font-size: .9375rem; } .qts { width: 210px; margin-top: 22px; } .lazer { padding-left: 74px; font-size: .875rem; background-position: 0 50%; background-size: 62px auto; } .pin { margin-top: 22px; padding-left: 34px; font-size: .75rem; background-size: auto 28px; } /* a família sai do canto e passa a fechar a dobra */ .familia { position: static; width: min( 74%, 320px ); margin: 20px auto -30px; } } } @media ( width < 420px ){ #hero { h1 { width: 170px; } .qts { width: 180px; } } } #status { order: -1; min-height: 57px; padding: 12px 20px; background: var(--blue-l); display: flex; align-items: center; justify-content: center; h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: #fff; text-transform: uppercase; letter-spacing: 11px; text-indent: 11px; text-align: center; display: flex; align-items: center; justify-content: center; strong { font-weight: 600; display: inline-block; border-left: 2px solid #fff; padding-left: 18px; margin-left: 10px; } } } @media ( width < 992px ){ #status { h2 { font-size: 1.0625rem; letter-spacing: 7px; text-indent: 7px; } } } @media ( width < 600px ){ #status { min-height: 44px; h2 { font-size: .8125rem; letter-spacing: 4px; text-indent: 4px; } } } @media ( width < 420px ){ #status { padding: 10px 20px; /* "Breve lançamento | Olaria" ainda cabe em uma linha aqui — só o corpo diminui */ h2 { font-size: .6875rem; letter-spacing: 3px; text-indent: 3px; } } } #wa, #chat { display: block; width: 54px; height: 54px; position: fixed; right: 20px; z-index: 9999; font-size: 1px; color: transparent; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; transition: .3s ease-in-out; &:hover { transform: translate( -4px, -4px ); } } /* #wa { bottom: 80px; background-image: url(../img/btn-whatsapp.svg); } #chat { bottom: 20px; background-image: url(../img/btn-chat.svg); } */ #wa { bottom: 20px; background-image: url(../img/btn-whatsapp.svg); } #cadastro { background: var(--blue); position: relative; isolation: isolate; overflow: clip; padding-block: 66px 67px; .wrap { display: flex; gap: 40px; position: relative; } /* grafismo floral: exportado já com o azul da seção e o fade embutidos, sangrando do wrap até a borda da tela */ .flores { position: absolute; top: -61px; right: calc( var(--extra) * -1 ); width: 418px; aspect-ratio: 418 / 405; background: url(../img/grafismo-flores.webp) no-repeat center / contain; z-index: -1; pointer-events: none; } .text { flex: 0 0 436px; padding-top: 44px; h2 { display: inline-block; margin-left: -12px; padding: 10px 12px 10px 16px; font-size: 1.5rem; font-weight: 700; line-height: 1; background: var(--red); } p { margin-top: 6px; font-size: 2.5rem; font-weight: 300; line-height: 1.34; letter-spacing: .6px; max-width: 400px; } } .form { flex: 1 1 100%; h3 { font-size: 1.6875rem; font-weight: 800; line-height: 1.33; letter-spacing: .54px; max-width: 532px; } form { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 20px 22px; align-items: center; &:has( [name=pp]:not(:checked) ) .field-submit .submit { opacity: .5; pointer-events: none; } &.sending-form .field-submit .submit { pointer-events: none; color: transparent; background: var(--blue-l) url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)' stroke-width='2'%3E%3Ccircle stroke-opacity='.5' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center / 24px auto; } } .form-output { flex: 0 0 100%; order: 99; font-size: .8125rem; &.is-error { padding: 8px 20px; background: #c00; color: #fff; } &.is-success { padding: 8px 20px; background: var(--cream); color: var(--blue); } } /* Campo com rótulo flutuante. O layout mostra o nome do campo repousando sobre a linha, como um placeholder — mas usando