@charset "utf-8"; /* nav.css — estilos do cabeçalho e menu, partilhados por todas as páginas */ /* Fonts carregadas via no de cada HTML — sem @import para evitar double-fetch */ /* Utilitários de transição */ .trans_400 { transition: all 400ms ease; } .trans_800 { transition: all 800ms ease; } /* ---- Subtítulo cursivo (hero e secções) ---- */ .page_subtitle { font-family: 'Great Vibes', cursive; color: #c9a96e; line-height: 0.85; } /* ---- Hero — container, subtítulo, título (igual ao contact.html) ---- */ .home_container { position: absolute; top: 50%; left: 0; bottom: auto; transform: translateY(-50%); width: 100%; z-index: 2; } .home_subtitle { font-weight: normal; line-height: 0.85; } .home_title { margin-top: 12px; } .home_title h1 { font-family: 'Cormorant Garamond', serif; font-weight: 300; color: #fff; letter-spacing: 0.04em; } .home_title::after { content: ''; display: block; width: 60px; height: 1px; background: #c9a96e; margin: 20px auto 0; } /* ---- Cabeçalho fixo ---- */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: all 400ms ease; background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%); } .header.scrolled { background: rgba(17, 17, 17, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .header_content { width: 100%; height: 130px; transition: all 400ms ease; } .header.scrolled .header_content { height: 72px; } /* ---- Logo ---- */ .logo a { display: block; } .logo a > div:first-child { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; line-height: 0.85; color: #fff; letter-spacing: 0.08em; } .logo a > div:last-child { font-family: 'Montserrat', sans-serif; font-size: 9px; text-transform: uppercase; color: #c9a96e; letter-spacing: 0.55em; line-height: 0.75; margin-top: 10px; } /* ---- Navegação principal ---- */ .main_nav { margin-left: 120px; } .main_nav ul li:not(:last-child) { margin-right: 36px; } .main_nav ul li a { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.18em; position: relative; padding-bottom: 4px; } .main_nav ul li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #c9a96e; transition: width 0.3s ease; } .main_nav ul li a:hover { color: #fff; } .main_nav ul li a:hover::after { width: 100%; } /* ---- Botão Reservar (CTA) ---- */ .nav_cta a { background: #c9a96e; border: 1px solid #c9a96e; border-radius: 3px; padding: 10px 28px !important; color: #fff !important; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important; } .nav_cta a:hover { background: transparent; border-color: #c9a96e; color: #c9a96e !important; } .nav_cta a::after { display: none !important; } /* ---- Hamburger (mobile) ---- */ .hamburger_bar { position: fixed; top: 0; right: calc((100vw - 690px) / 2 - 15px); width: auto; height: 130px; z-index: 102; } .hamburger_bar.scrolled { height: 72px; } .hamburger { display: none; position: absolute; top: 50%; transform: translateY(-50%); right: 0; cursor: pointer; padding: 15px; z-index: 2; } .menu_toggle { display: block; } .menu_hamburger { display: block; position: relative; width: 22px; height: 14px; } .hamburger_lines { display: block; position: absolute; left: 0; width: 100%; height: 1px; background: #fff; transition: all 600ms ease; transform-origin: center center; } .line_1 { top: 0; } .line_2 { top: 7px; } .line_3 { top: 14px; } .hamburger.active .line_1 { transform: translateY(7px) rotate(45deg) !important; } .hamburger.active .line_3 { transform: translateY(-7px) rotate(-45deg) !important; } .hamburger.active .line_2 { opacity: 0 !important; } .menu_toggle span { display: block; position: relative; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; line-height: 14px; letter-spacing: 2px; text-transform: uppercase; color: #fff; } /* ---- Menu mobile (overlay) ---- */ .menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(18, 14, 10, 0.97); z-index: 101; visibility: hidden; opacity: 0; padding-bottom: 100px; transition: all 800ms ease; } .menu.active { visibility: visible; opacity: 1; } .menu_content { width: 100%; height: 100%; } .menu_content ul li:not(:last-child) { margin-bottom: 6px; } .menu_content ul li a { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; text-transform: uppercase; color: rgba(255,255,255,0.7); letter-spacing: 0.15em; } .menu_content ul:hover li a { color: rgba(255,255,255,0.3); } .menu_content ul li a:hover { color: #c9a96e; } /* ---- Reservas ---- */ .reservations { width: 100%; padding-top: 120px; padding-bottom: 90px; position: relative; } .reservations::before { content: ''; position: absolute; inset: 0; background: rgba(15, 11, 8, 0.65); z-index: 1; } .reservations .container { position: relative; z-index: 2; } .res_stars { font-size: 38px; font-weight: normal; color: #c9a96e; } .res_title { font-family: 'Cormorant Garamond', serif; font-size: 56px; font-weight: 300; color: #fff; line-height: 0.85; margin-top: 14px; letter-spacing: 0.04em; } .res_title::after { content: ''; display: block; width: 40px; height: 1px; background: #c9a96e; margin: 20px auto 0; } .res_form_container { margin-top: 60px; } .res_input { background: transparent; width: 200px; height: 50px; border: 1px solid rgba(201,169,110,0.5); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 300; color: #fff; padding-left: 20px; outline: none; letter-spacing: 0.08em; transition: border-color 0.3s ease; } .res_input:not(:last-child) { margin-right: 14px; } .res_input:focus { border-color: #c9a96e; } .res_input::placeholder { color: rgba(255,255,255,0.5); } .res_select { -webkit-appearance: none; appearance: none; background: transparent; width: 200px; height: 50px; border: 1px solid rgba(201,169,110,0.5); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 300; color: #fff; padding-left: 20px; outline: none; letter-spacing: 0.08em; cursor: pointer; transition: border-color 0.3s ease; } .res_select:focus { border-color: #c9a96e; } .res_select option { color: #1a1a1a; background: #fff; } .res_button { width: 200px; height: 50px; background: #c9a96e; color: #fff; border: 1px solid #c9a96e; outline: none; margin-top: 40px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .res_button:hover { background: transparent; color: #c9a96e; border-color: #c9a96e; } /* ---- Rodapé ---- */ .footer { width: 100%; background: #111; padding-top: 80px; padding-bottom: 60px; border-top: 1px solid rgba(201,169,110,0.2); } .footer_logo_title { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 300; line-height: 0.85; color: #fff; letter-spacing: 0.05em; } .footer_logo_subtitle { font-family: 'Montserrat', sans-serif; font-size: 9px; text-transform: uppercase; color: #c9a96e; letter-spacing: 0.55em; line-height: 0.75; margin-top: 14px; } .copyright { font-family: 'Montserrat', sans-serif; font-size: 11px; color: rgba(255,255,255,0.25); line-height: 1.5; margin-top: 24px; letter-spacing: 0.04em; } .footer_about p { color: rgba(255,255,255,0.4); font-size: 14px; line-height: 2; font-weight: 300; font-family: 'Montserrat', sans-serif; } .footer_contact ul li:not(:last-child) { margin-bottom: 16px; } .footer_contact_title { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; color: #c9a96e; line-height: 21px; margin-right: 12px; white-space: nowrap; background: transparent; width: auto; height: auto; padding-left: 0; } .footer_contact_text { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 21px; letter-spacing: 0.03em; } .footer_contact ul li div:last-child { white-space: nowrap; } .footer_col:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.05); } /* ---- Responsive mobile (≤991px) ---- */ @media only screen and (max-width: 991px) { .hamburger { display: block; } .hamburger_bar { display: block; } .main_nav { display: none !important; } } @media only screen and (max-width: 767px) { .hamburger_bar { right: calc((100vw - 510px) / 2 - 15px); } } @media only screen and (max-width: 539px) { .hamburger_bar { right: 15px; } } @media only screen and (max-width: 575px) { .res_input, .res_select { width: 100%; } .res_input:not(:last-child) { margin-right: 0; margin-bottom: 12px; } } /* ---- Menu mobile — telefone reservas ---- */ .menu_reservations_phone { position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; height: 40px; line-height: 38px; padding: 0 24px; max-width: calc(100vw - 40px); box-sizing: border-box; border: 1px solid rgba(201,169,110,0.5); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 400; color: #c9a96e; white-space: nowrap; letter-spacing: 0.1em; }