/* ========================================================================== Renovare Móveis Planejados Estilos do site — carregado depois do Bootstrap, sobrescreve o que precisa. ========================================================================== */ :root { --renovare-dourado: #d7ae51; --renovare-dourado-escuro: #a9813f; --renovare-tinta: #1b1a18; --renovare-creme: #f2efe8; --renovare-creme-claro: #fffaf3; --renovare-cinza: #716c62; --renovare-carvao: #282621; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); } /* --- Base --------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; background: var(--renovare-creme); color: var(--renovare-tinta); -webkit-font-smoothing: antialiased; } ::selection { background: var(--renovare-dourado); color: var(--renovare-tinta); } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--renovare-dourado); outline-offset: 3px; box-shadow: none; } button:not(:disabled), a[href], select:not(:disabled), input:not(:disabled), textarea:not(:disabled) { cursor: pointer; } /* Largura do site: sobrescreve o .container do Bootstrap. */ .container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 28px; } /* O corte horizontal precisa ficar no : `overflow` no se propaga para o viewport e travaria a rolagem da página inteira. */ html { overflow-x: clip; } /* Ícones SVG (sprite em index.html). */ .ico { display: inline-block; flex: 0 0 auto; vertical-align: middle; } /* --- Cabeçalho ---------------------------------------------------------- */ .site-header { position: fixed; z-index: 50; inset: 0 0 auto; color: var(--renovare-creme-claro); transition: background 260ms var(--ease-out), color 260ms var(--ease-out), box-shadow 260ms var(--ease-out); } .site-header--scrolled { background: rgba(242, 239, 232, .92); color: var(--renovare-tinta); backdrop-filter: blur(18px); box-shadow: 0 1px 0 rgba(27, 26, 24, .12); } .site-header .navbar { position: relative; padding: 0; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 86px; gap: 24px; } /* A marca herda a cor do contexto — acompanha a troca de tema do cabeçalho. */ .brand-mark { display: inline-flex; align-items: center; color: inherit; white-space: nowrap; } .brand-mark__fallback { display: flex; align-items: center; } /* Logotipo tipográfico: o arquivo original da marca ainda não foi substituído. Para usar o SVG oficial, troque o conteúdo de .brand-mark__fallback por

*/ .brand-mark__logo { display: block; height: 34px; width: auto; } .brand-mark__wordmark { display: flex; flex-direction: column; line-height: 1; gap: 6px; } .brand-mark__wordmark strong { font-size: 18px; font-weight: 500; letter-spacing: .2em; } .brand-mark__wordmark small { font-size: 8px; letter-spacing: .34em; opacity: .7; } .site-nav { display: flex; align-items: center; gap: 27px; margin-left: auto; font-size: 12px; letter-spacing: .05em; flex-grow: 0; } .site-nav a { opacity: .84; transition: opacity 180ms ease; } .site-nav a:hover { opacity: 1; } .site-nav__instagram { display: inline-flex; align-items: center; gap: 7px; } .header-cta { display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid currentColor; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .header-cta:hover { background: var(--renovare-dourado); border-color: var(--renovare-dourado); color: var(--renovare-tinta); } .mobile-menu { display: none; padding: 6px; background: transparent; border: 0; color: currentColor; box-shadow: none; } .mobile-menu .ico--close { display: none; } .mobile-menu[aria-expanded="true"] .ico--close { display: inline-block; } .mobile-menu[aria-expanded="true"] .ico--open { display: none; } /* --- Hero --------------------------------------------------------------- */ .hero { position: relative; min-height: min(850px, 100vh); height: 800px; color: var(--renovare-creme-claro); background: #24221f; isolation: isolate; } /* A imagem do topo é servida no tamanho adequado a cada faixa de tela. */ .hero__image { position: absolute; z-index: -3; inset: 0; background-image: url("../img/suite-planejada-dormitorio-700w.webp"); background-size: cover; background-position: center 39%; filter: saturate(.72) contrast(1.03); transform: scale(1.015); } @media (min-width: 768px) { .hero__image { background-image: url("../img/suite-planejada-dormitorio-1100w.webp"); } } @media (min-width: 1400px) { .hero__image { background-image: url("../img/suite-planejada-dormitorio-1440w.webp"); } } .hero__veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(16, 15, 14, .88) 0%, rgba(16, 15, 14, .54) 47%, rgba(16, 15, 14, .15) 100%), linear-gradient(0deg, rgba(16, 15, 14, .72), transparent 40%); } .hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .14; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; } .hero__grid { position: relative; display: flex; align-items: center; min-height: 705px; } .hero__content { max-width: 700px; padding-top: 75px; } .display { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: -.045em; line-height: .92; margin: 0; } .display em { color: var(--renovare-dourado); font-style: italic; } .display--hero { max-width: 690px; font-size: clamp(68px, 9.2vw, 139px); } .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font-size: 10px; letter-spacing: .21em; text-transform: uppercase; color: var(--renovare-cinza); } .eyebrow--light { color: rgba(255, 250, 243, .78); } .eyebrow__line { width: 34px; height: 1px; background: var(--renovare-dourado-escuro); flex: 0 0 auto; } .hero__lede { max-width: 390px; margin: 31px 0 0; color: rgba(255, 250, 243, .78); font-size: 15px; line-height: 1.7; } .hero__actions { display: flex; align-items: center; gap: 26px; margin-top: 39px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 49px; padding: 0 19px; border: 1px solid transparent; border-radius: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: transform 160ms var(--ease-out), background 180ms ease, color 180ms ease, border-color 180ms ease; } .button:active { transform: scale(.97); } .button--gold { background: var(--renovare-dourado); color: var(--renovare-tinta); border-color: var(--renovare-dourado); } .button--gold:hover { background: #e7c46f; border-color: #e7c46f; color: var(--renovare-tinta); } .button--full { width: 100%; margin-top: 8px; } .text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--renovare-tinta); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid rgba(27, 26, 24, .35); padding-bottom: 6px; transition: gap 180ms var(--ease-out), color 180ms ease; } .text-link:hover { gap: 15px; color: var(--renovare-dourado-escuro); } .text-link--light { color: var(--renovare-creme-claro); border-color: rgba(255, 250, 243, .45); } .text-link--light:hover { color: var(--renovare-dourado); } .hero__side-note { display: flex; align-items: center; gap: 13px; position: absolute; top: 49%; right: 30px; transform: rotate(-90deg) translateX(50%); transform-origin: right center; color: rgba(255, 250, 243, .72); } .hero__side-note-line { width: 42px; height: 1px; background: var(--renovare-dourado); } .hero__side-note p { margin: 0; font-size: 10px; line-height: 1.5; letter-spacing: .11em; text-transform: uppercase; } .hero__bottom { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; color: rgba(255, 250, 243, .66); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; } .hero__bottom a { display: inline-flex; align-items: center; justify-content: center; width: 37px; height: 37px; border: 1px solid rgba(255, 250, 243, .4); border-radius: 50%; animation: floatDown 2.6s ease-in-out infinite; } @keyframes floatDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* --- Manifesto ---------------------------------------------------------- */ .intro-section { padding: 139px 0 151px; background: var(--renovare-creme); } .intro-grid { --bs-gutter-x: 75px; } .intro-grid__label { display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; } .intro-grid__label .eyebrow { margin-top: 4px; } .display--section { font-size: clamp(56px, 7.2vw, 100px); } .intro-grid__text { max-width: 410px; margin: 34px 0 28px; color: var(--renovare-cinza); font-size: 15px; line-height: 1.8; } .intro-grid__values { align-self: end; padding-bottom: 7px; } .value-item { padding: 18px 0 21px; border-top: 1px solid rgba(27, 26, 24, .17); } .value-item:last-child { border-bottom: 1px solid rgba(27, 26, 24, .17); } .value-item span { display: block; margin-bottom: 10px; color: var(--renovare-dourado-escuro); font-size: 10px; letter-spacing: .12em; } .value-item strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: .02em; } .value-item p { max-width: 230px; margin: 6px 0 0; color: var(--renovare-cinza); font-size: 13px; line-height: 1.45; } /* --- Portfólio ---------------------------------------------------------- */ .projects-section { padding: 105px 0 153px; background: #e8e2d8; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 60px; margin-bottom: 68px; } .section-heading__aside { max-width: 240px; padding-bottom: 7px; } .section-heading__aside p, .section-heading__description { color: var(--renovare-cinza); font-size: 13px; line-height: 1.65; margin: 0 0 20px; } /* Duas peças altas ladeadas por dois quadrados, fechando numa faixa larga. */ .project-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; grid-template-rows: 325px 267px 285px; gap: 14px; } .project-card { position: relative; display: block; overflow: hidden; min-height: 250px; background: #3c3832; color: var(--renovare-creme-claro); } .project-card--wide { grid-row: span 2; } .project-card--tall { grid-row: span 2; } .project-card--banner { grid-column: 1 / -1; } .project-card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.78); transition: transform 650ms var(--ease-out), filter 400ms ease; } .project-card--tall img { object-position: 49% center; } .project-card--banner img { object-position: center 58%; } .project-card:hover img { transform: scale(1.055); filter: saturate(1); } .project-card__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 12, 11, .76) 0%, rgba(13, 12, 11, .04) 65%); transition: opacity 300ms ease; } .project-card:hover .project-card__overlay { opacity: .87; } .project-card__meta { position: absolute; inset: auto 20px 18px; display: flex; align-items: end; justify-content: space-between; gap: 12px; } .project-card__meta span { color: rgba(255, 250, 243, .68); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; } .project-card__meta h3 { margin: 7px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 27px; font-weight: 500; line-height: .95; letter-spacing: -.02em; } .project-card__arrow { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255, 250, 243, .58); border-radius: 50%; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .project-card:hover .project-card__arrow { background: var(--renovare-dourado); color: var(--renovare-tinta); border-color: var(--renovare-dourado); } /* --- Citação ------------------------------------------------------------ */ .statement-section { position: relative; overflow: hidden; min-height: 475px; background: var(--renovare-carvao); color: var(--renovare-creme-claro); } .statement-section__texture { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(34, 32, 28, .87), rgba(34, 32, 28, .66)), url("../img/textura-madeira-900w.webp") center / cover, var(--renovare-carvao); opacity: .97; } @media (min-width: 992px) { .statement-section__texture { background: linear-gradient(90deg, rgba(34, 32, 28, .87), rgba(34, 32, 28, .66)), url("../img/textura-madeira-1400w.webp") center / cover, var(--renovare-carvao); } } .statement-section__inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 475px; } .statement-section blockquote { max-width: 790px; margin: 19px 0 46px; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(45px, 6vw, 80px); line-height: .95; letter-spacing: -.04em; } .statement-section__footer { display: flex; align-items: center; gap: 16px; color: rgba(255, 250, 243, .72); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; } .statement-section__footer .ico { color: var(--renovare-dourado); } /* --- Processo ----------------------------------------------------------- */ .process-section { padding: 130px 0 137px; background: var(--renovare-creme); } .section-heading--process { align-items: end; margin-bottom: 72px; } .section-heading__description { max-width: 295px; margin: 0 0 7px; } .process-grid { border-top: 1px solid rgba(27, 26, 24, .2); border-bottom: 1px solid rgba(27, 26, 24, .2); --bs-gutter-x: 0; } .process-card { min-height: 270px; padding: 28px 33px 25px 0; border-right: 1px solid rgba(27, 26, 24, .2); display: flex; flex-direction: column; align-items: flex-start; } .process-grid > [class*="col-"]:not(:first-child) .process-card { padding-left: 33px; } .process-grid > [class*="col-"]:last-child .process-card { border-right: 0; } .process-card__number { color: var(--renovare-dourado-escuro); font-size: 10px; letter-spacing: .14em; } .process-card h3 { margin: 49px 0 11px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 42px; font-weight: 500; line-height: 1; } .process-card p { max-width: 255px; margin: 0; color: var(--renovare-cinza); font-size: 13px; line-height: 1.65; } .process-card .ico { margin-top: auto; color: var(--renovare-dourado-escuro); } /* --- Contato ------------------------------------------------------------ */ .contact-section { padding: 120px 0 133px; background: var(--renovare-carvao); color: var(--renovare-creme-claro); } .contact-grid { --bs-gutter-x: 125px; } .display--contact { max-width: 520px; font-size: clamp(56px, 6.6vw, 88px); } .contact-copy > p:not(.eyebrow) { max-width: 405px; margin: 31px 0 39px; color: rgba(255, 250, 243, .67); font-size: 14px; line-height: 1.75; } .contact-copy__links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .contact-copy__links a { display: inline-flex; align-items: center; gap: 9px; color: var(--renovare-dourado); font-size: 12px; transition: color 180ms ease; } .contact-copy__links a:hover { color: #f1d891; } .contact-form { padding-top: 5px; } .contact-form .form-group { margin-bottom: 24px; } .contact-form .form-label { display: block; margin-bottom: 10px; color: rgba(255, 250, 243, .72); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .contact-form .form-control, .contact-form .form-select { width: 100%; border: 0; border-bottom: 1px solid rgba(255, 250, 243, .3); border-radius: 0; padding: 12px 0; color: var(--renovare-creme-claro); background-color: transparent; font-size: 14px; transition: border-color 180ms ease; } .contact-form .form-control::placeholder { color: rgba(255, 250, 243, .36); opacity: 1; } .contact-form .form-control:focus, .contact-form .form-select:focus { outline: 0; box-shadow: none; background-color: transparent; color: var(--renovare-creme-claro); border-color: var(--renovare-dourado); } .contact-form .form-select { appearance: none; padding-right: 20px; background-image: linear-gradient(45deg, transparent 50%, var(--renovare-dourado) 50%), linear-gradient(135deg, var(--renovare-dourado) 50%, transparent 50%); background-position: calc(100% - 7px) 50%, 100% 50%; background-size: 7px 7px, 7px 7px; background-repeat: no-repeat; } .contact-form .form-select option { color: var(--renovare-tinta); } .contact-form textarea.form-control { min-height: 100px; resize: vertical; } .contact-form small { display: block; margin-top: 13px; color: rgba(255, 250, 243, .45); font-size: 10px; line-height: 1.45; } /* --- Rodapé ------------------------------------------------------------- */ .site-footer { background: var(--renovare-creme); color: var(--renovare-tinta); } .site-footer__top { align-items: center; min-height: 192px; border-bottom: 1px solid rgba(27, 26, 24, .15); } .site-footer__top p { margin: 0; color: var(--renovare-cinza); font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; line-height: .98; } .footer-instagram { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transition: color 180ms ease; } .footer-instagram:hover { color: var(--renovare-dourado-escuro); } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 61px; color: var(--renovare-cinza); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; } .site-footer__credit { transition: color 180ms ease; } .site-footer__credit:hover { color: var(--renovare-dourado-escuro); } .floating-whatsapp { position: fixed; z-index: 60; right: 23px; bottom: 22px; display: inline-flex; align-items: center; gap: 11px; padding: 13px 16px 13px 13px; border: 1px solid rgba(255, 250, 243, .18); border-radius: 99px; background: #1d8f59; color: #fff; box-shadow: 0 12px 28px rgba(13, 12, 11, .22); font-size: 11px; font-weight: 600; letter-spacing: .04em; transition: transform 180ms var(--ease-out), background 180ms ease; } .floating-whatsapp:hover { background: #22aa6b; color: #fff; transform: translateY(-3px); } /* --- Página 404 --------------------------------------------------------- */ .error-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 0; background: var(--renovare-carvao); color: var(--renovare-creme-claro); text-align: center; } .error-page__code { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(96px, 20vw, 190px); line-height: .85; letter-spacing: -.05em; margin: 26px 0 8px; color: var(--renovare-dourado); } .error-page h1 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(34px, 6vw, 54px); font-weight: 400; letter-spacing: -.03em; margin: 0 0 18px; } .error-page p { max-width: 420px; margin: 0 auto 34px; color: rgba(255, 250, 243, .67); font-size: 14px; line-height: 1.75; } .error-page .eyebrow { justify-content: center; } .error-page .brand-mark { color: var(--renovare-creme-claro); } /* --- Responsivo --------------------------------------------------------- */ @media (max-width: 980px) { .container { padding-inline: 22px; } .site-nav { gap: 16px; } .site-nav__instagram { display: none; } .intro-grid { --bs-gutter-x: 50px; } .project-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 340px 260px 260px 260px; } .contact-grid { --bs-gutter-x: 55px; } } @media (max-width: 767.98px) { .container { padding-inline: 19px; } .site-header__inner { min-height: 72px; } .site-nav { position: absolute; top: 72px; left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px 18px; border: 1px solid rgba(27, 26, 24, .13); background: rgba(242, 239, 232, .98); color: var(--renovare-tinta); box-shadow: 0 14px 30px rgba(27, 26, 24, .12); } .site-nav a { padding: 13px 0; border-bottom: 1px solid rgba(27, 26, 24, .1); } .site-nav a:last-child { border-bottom: 0; } .site-nav__instagram { display: inline-flex; } .header-cta { display: none; } .mobile-menu { display: inline-flex; } .brand-mark__logo { width: 126px; } .hero { min-height: 720px; height: 720px; } .hero__image { background-position: 58% center; } .hero__grid { min-height: 650px; align-items: flex-end; padding-bottom: 99px; } .hero__content { padding-top: 0; } .display--hero { font-size: clamp(61px, 19vw, 103px); } .hero__lede { margin-top: 24px; font-size: 14px; } .hero__actions { flex-direction: column; align-items: flex-start; gap: 21px; margin-top: 30px; } .hero__side-note { display: none; } .hero__bottom { bottom: 18px; font-size: 8px; } .hero__bottom span:last-child { display: none; } .hero__bottom a { margin-left: auto; } .intro-section { padding: 90px 0 95px; } .intro-grid__label { min-height: 0; margin-bottom: 53px; } .display--section { font-size: clamp(57px, 17vw, 92px); } .intro-grid__text { margin-top: 27px; font-size: 14px; } .intro-grid__values { margin-top: 64px; } .projects-section { padding: 75px 0 90px; } .section-heading { display: block; margin-bottom: 45px; } .section-heading__aside { max-width: 290px; margin-top: 28px; } .project-grid { display: block; } .project-card { height: 330px; margin-bottom: 12px; } .project-card--wide, .project-card--tall { height: 400px; } .project-card--banner { height: 300px; margin-bottom: 0; } .project-card__meta h3 { font-size: 26px; } .statement-section, .statement-section__inner { min-height: 415px; } .statement-section blockquote { font-size: clamp(44px, 13vw, 70px); margin-top: 14px; } .process-section { padding: 91px 0 93px; } .section-heading--process { margin-bottom: 52px; } .section-heading__description { margin-top: 27px; } .process-card, .process-grid > [class*="col-"]:not(:first-child) .process-card { min-height: 235px; padding: 23px 0 25px; border-right: 0; border-bottom: 1px solid rgba(27, 26, 24, .2); } .process-grid > [class*="col-"]:last-child .process-card { border-bottom: 0; } .process-card h3 { margin-top: 35px; } .contact-section { padding: 87px 0 95px; } .contact-copy { margin-bottom: 62px; } .display--contact { font-size: clamp(57px, 16vw, 88px); } .contact-form .form-group { margin-bottom: 25px; } .site-footer__top { padding: 45px 0; min-height: auto; } .site-footer__top p { margin: 31px 0; } .site-footer__bottom { flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; padding: 24px 0; min-height: auto; font-size: 9px; } .floating-whatsapp { right: 15px; bottom: 14px; padding: 12px; } .floating-whatsapp span { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }