/* CSS extraído do */ img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; } /* CSS extraído do */ :root { --brand-blue: #0063a5; --brand-teal: #00a695; --text-body: #6d6461; --header-h: 90px; --header-h-scrolled: 68px; --footer-h: 76px; --container-max: 1200px; --gutter: 32px; --radius: 16px; --shadow: 0 12px 30px rgba(0, 0, 0, .12); --form-gap: 20px; --header-open-mult: 2.5; } :where(.is-layout-flow) > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } :root :where(.is-layout-flow) > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: Outfit, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color: var(--text-body); background: #fff; overflow-y: scroll; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* TRANSIÇÃO GLOBAL (mantida) */ body *, body *::before, body *::after { transition: all .24s ease-in-out; } :focus-visible { outline: 2px solid #0063a5; outline-offset: 3px; } /* HEADER */ .header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); display: flex; align-items: center; z-index: 1000; background: rgba(255, 255, 255, .45); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid rgba(0, 0, 0, .06); } .scrolled .header { height: var(--header-h-scrolled); } .header__inner { width: 100%; max-width: calc(var(--container-max) + 2*var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; } /* LOGO */ .brand { display: flex; align-items: center; gap: 20px; min-width: 0; height: var(--header-h); border: 0 !important; outline: 0 !important; -webkit-tap-highlight-color: transparent; } .scrolled .brand { height: var(--header-h-scrolled); } .brand:active, .brand:focus, .brand:focus-visible { outline: 0 !important; box-shadow: none !important; border: 0 !important; } .brand__logo { display: block; height: var(--header-h); margin-left: -21px; padding: 0 !important; border: 0 !important; outline: 0 !important; -webkit-tap-highlight-color: transparent; } .scrolled .brand__logo { height: var(--header-h-scrolled); margin-left: -17px; } .brand__logo img { display: block; height: 100%; width: auto; max-height: 100%; } /* mantém a logo do mesmo tamanho mesmo com header aberto */ header.header--open .brand { height: var(--header-h); } .scrolled header.header--open .brand { height: var(--header-h-scrolled); } header.header--open .brand__logo { height: var(--header-h); } .scrolled header.header--open .brand__logo { height: var(--header-h-scrolled); } /* SOCIAIS */ .social { display: flex; align-items: center; gap: 18px; margin-left: auto; } .soc-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; text-decoration: none; line-height: 1; background: transparent; border: none; box-shadow: none; color: var(--brand-teal); font-size: 22px; } .soc-icon:hover { transform: translateY(-2px); opacity: .9; } .soc-icon:focus, .soc-icon:focus-visible { outline: 2px solid rgba(0, 0, 0, 0) !important; } /* CALL */ .call { display: inline-flex; align-items: center; gap: .6rem; border: none; border-radius: 10px; background: var(--brand-blue); color: #fff; text-decoration: none; white-space: nowrap; font-weight: 600; letter-spacing: .2px; font-size: 1.4rem; padding: .4rem 2rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .16); } .call:hover { background: var(--brand-teal); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } .call svg { width: 1.15em; height: 1.15em; fill: #fff; } @media (min-width: 981px) { .call { padding: .8rem 2rem; } .scrolled .call { padding: .4rem 2rem; } } /* MENU */ .menu-btn { display: none; border: 1px solid transparent; -webkit-tap-highlight-color: transparent; } .menu-btn:focus, .menu-btn:focus-visible { outline: 0; border-color: transparent; box-shadow: none; } /* HERO */ .hero { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; margin-bottom: var(--footer-h) !important; z-index: 5; } .hero__media { position: absolute; inset: 0; overflow: hidden; background: #e9ecef url('https://nuancehospitalidade.com.br/images/nuance_site-video_background.jpg') center/cover no-repeat; } .hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .70); pointer-events: none; z-index: 2; } .yt-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; } .yt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100vh; display: block; pointer-events: none; } .hero__inner { position: relative; /* sem z-index para evitar stacking context extra */ width: 100%; max-width: calc(var(--container-max) + 2*var(--gutter)); margin: 0 auto; padding: calc(var(--header-h) + 24px) var(--gutter) 40px; display: grid; grid-template-columns: 2fr 1fr; gap: var(--gutter); align-items: stretch; } /* FIX z-stack desktop (mantido) */ @media (min-width: 981px) { .hero__inner { z-index: 3; } } #heroi { margin: 0 0 24px 0; font-family: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important; font-weight: 800; font-optical-sizing: auto; font-variation-settings: "opsz" 32, "wght" 800; font-synthesis: none; color: #0063a5; font-size: clamp(45px, 4.7vw, 80px); line-height: clamp(45px, 4.7vw, 80px); } .hero__text { display: flow-root; } .hero__text > :last-child { margin-bottom: 0; } .lead { font-weight: 400; font-size: clamp(18.1333px, 1.83vw, 31.2167px); line-height: clamp(28.2404px, 2.85vw, 48.6162px); color: #6d6461; margin: 0 0 28px 0; } .card { background: linear-gradient(#00a695, #0063a5); border-radius: 10px; padding: var(--form-gap); box-shadow: var(--shadow); color: #fff; height: auto; display: flex; flex-direction: column; align-self: start; margin-top: .8vw; } .card form { margin: 0; display: flex; flex-direction: column; gap: var(--form-gap); } #contactForm > .field { width: 100%; border-radius: 5px; border: 2px solid rgba(0, 0, 0, 0); padding: 12px 14px; font-size: 1rem; background: #fff; color: #222; outline: none; margin: 0; } #contactForm > .field:focus { border-color: rgba(0, 0, 0, .08); box-shadow: 0 0 0 4px rgba(255, 255, 255, .28); } /* *** MIX-BLEND apenas <980px (mantido) *** */ @media (max-width: 980px) { @supports (mix-blend-mode: multiply) { .card { background: transparent; position: relative; } .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(#00a695, #0063a5); mix-blend-mode: multiply; z-index: 0; pointer-events: none; } .card > * { position: relative; z-index: 1; } } } .submit { width: 100%; border: none; border-radius: 5px; padding: .9rem 1.2rem; font-weight: 800; letter-spacing: .2px; background: #0aa3a0; color: #fff; cursor: pointer; margin-top: 0; } .submit:hover { filter: brightness(.95); transform: translateY(-1px); } /* FOOTER */ .footer { position: fixed; inset: auto 0 0 0; height: var(--footer-h); display: grid; place-items: center; background: #00a695; color: #fff; z-index: 0; text-align: center; font-size: 1rem; padding: 0 12px; } .footer p { margin: 0; } /* MOBILE */ @media (max-width: 980px) { .hero__inner { grid-template-columns: 1fr; align-items: start; padding: calc(var(--header-h) + 24px) var(--gutter) 40px; } .header__inner { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; align-items: center; justify-items: center; row-gap: 12px; } .brand { grid-column: 1; grid-row: 1; justify-self: start; } /* alvo 44×44, visual 26/14 via wrapper interno */ .menu-btn { grid-column: 2; grid-row: 1; display: inline-grid; place-items: center; width: 46px; height: 44px; border-radius: 10px; background: transparent; cursor: pointer; align-self: center; border: 1px solid transparent; } .menu-btn__box { display: grid; place-items: center; width: 26px; height: 26px; /* fechado: 26px */ } .menu-btn.is-open .menu-btn__box { height: 12px; } /* aberto: 1px */ #menuBtn .menu-btn__box .bar { display: block; width: 26px; height: 2px; background: var(--brand-blue); border-radius: 2px; transform-origin: center; } #menuBtn .menu-btn__box .bar + .bar { margin-top: 3px; } #menuBtn.is-open .menu-btn__box .bar:nth-child(1) { transform: translateY(5px) rotate(45deg); } #menuBtn.is-open .menu-btn__box .bar:nth-child(2) { opacity: 0; } #menuBtn.is-open .menu-btn__box .bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .social { grid-column: 1/-1; grid-row: 2; display: none; justify-content: center; gap: 24px; margin: -60px 0 0 32px; } .soc-icon { width: 44px; height: 44px; font-size: 24px; } .call { grid-column: 1/-1; grid-row: 3; display: none; justify-self: center; font-size: 1.35rem; padding: .8rem 1.6rem; border-radius: 10px; margin: -40px 0 0 32px; } header.header--open { height: calc(var(--header-h)*var(--header-open-mult)); overflow: hidden; } .scrolled header.header--open { height: calc(var(--header-h-scrolled)*var(--header-open-mult)); } header.header--open .social { display: flex; animation: fadeSlide .22s ease both; } header.header--open .call { display: inline-flex; animation: fadeSlide .26s ease both .05s; } @keyframes fadeSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } } @media (max-width: 450px) { h1 { font-size: 13vw; line-height: 13.6vw; } .lead { font-size: 6vw; line-height: 6.6vw; } } @media (max-width: 400px) { .brand__logo { display: flex; align-items: center; } .brand__logo img { height: 80% !important; width: auto; max-height: none; } } /* Camadas explícitas (mantidas) */ .footer { z-index: 0 !important; } .hero { position: relative !important; z-index: 5 !important; } .hero__inner { position: relative !important; } .hero__media { position: absolute !important; inset: 0 !important; } .hero__media::after { z-index: 2 !important; } /* VÍDEO FIXO + COVER */ @media (orientation: portrait) { .hero__media { position: fixed !important; inset: 0 !important; } .yt-wrap { position: absolute !important; inset: 0 !important; overflow: hidden !important; z-index: 1 !important; } .yt { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; height: 100dvh !important; width: max(100vw, calc(100dvh * 1.7778)) !important; min-height: 100dvh !important; display: block !important; } .hero { min-height: calc(100vh + var(--footer-h)); } } @media (max-width: 980px) and (orientation: landscape) { .hero__media { position: fixed !important; inset: 0 !important; } .yt-wrap { position: absolute !important; inset: 0 !important; overflow: hidden !important; z-index: 1 !important; } .yt { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; height: 100dvh !important; width: max(100vw, calc(100dvh * 1.7778)) !important; min-height: 100dvh !important; display: block !important; } .hero { min-height: calc(100vh + var(--footer-h)); } } @media (prefers-reduced-motion: reduce) { .yt-wrap { display: none !important; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* TEXTAREA */ textarea.field { flex: 0 0 auto !important; height: 13.35vw !important; overflow: auto !important; resize: vertical !important; } @media (max-width: 980px) { textarea.field { height: 26.7vw !important; } } @media (min-width: 1200px) { textarea.field { height: 222px !important; } } /* MODAL */ body.modal-open { overflow: hidden; } .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .42); backdrop-filter: blur(2px); z-index: 2000; padding: 20px; } .modal[aria-hidden="false"] { display: flex; } .modal__dialog { width: min(680px, 92vw); background: #fff; color: #333; border-radius: 10px; box-shadow: var(--shadow); border: 1px solid rgba(0, 0, 0, .06); padding: 24px; position: relative; } .modal__title { margin: 0 0 8px 0; color: #0063a5; font-size: clamp(22px, 2.6vw, 28px); font-family: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important; font-weight: 800; } .modal__p { margin: .5rem 0; line-height: 1.6; } .modal__actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; } .btn { display: inline-block; border: none; cursor: pointer; text-decoration: none; background: #00a695; color: #fff; font-weight: 700; padding: .8rem 1.2rem; border-radius: 10px; } .btn--ghost { background: transparent; color: #0063a5; border: 1px solid #cfe3f3; } .modal__closeX { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; font-size: 26px; line-height: 1; color: #6d6461; cursor: pointer; } .is-sending .submit { opacity: .65; pointer-events: none; } .field::placeholder { color: #8b827f; opacity: 1; }