/* barradatijuca.com.br — header unificado (mesmo visual da home) * Carregado em todas as páginas via no . * Usa valores literais (sem depender das variáveis CSS locais de cada página). */ .topbar, .topbar *, .header, .header *, .mobile-overlay, .mobile-overlay * { box-sizing: border-box; } /* ---- TOP BAR ---- */ .topbar { background: #023047; color: rgba(255,255,255,.5); font-family: 'Inter', -apple-system, sans-serif; font-size: .7rem; font-weight: 400; letter-spacing: .04em; height: 34px; display: flex; align-items: center; padding: 0 24px; position: sticky; top: 0; z-index: 201; margin: 0; } .topbar-inner { max-width: 1280px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .topbar-brand { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.5); } .topbar-brand .dot { color: #e9c46a; } .topbar-brand .hide-mobile { display: inline; } .topbar-links { display: flex; align-items: center; gap: 0; } .topbar-links a { color: rgba(255,255,255,.4); padding: 0 12px; border-right: 1px solid rgba(255,255,255,.08); font-size: .7rem; letter-spacing: .04em; text-decoration: none; transition: color .28s cubic-bezier(.4,0,.2,1); } .topbar-links a:last-child { border-right: none; padding-right: 0; } .topbar-links a:hover { color: #e9c46a; } /* ---- HEADER ---- */ .header { position: sticky; top: 34px; z-index: 200; background: #fafafa; height: 72px; display: flex; align-items: center; padding: 0 24px; transition: box-shadow .28s cubic-bezier(.4,0,.2,1), background .28s cubic-bezier(.4,0,.2,1); border-top: 4px solid #e9c46a; border-bottom: 1px solid rgba(13,13,13,.06); box-shadow: 0 1px 0 rgba(13,13,13,.04); margin: 0; } .header.scrolled { background: rgba(250,249,247,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 2px 24px rgba(13,13,13,.06); border-bottom-color: transparent; } .header-inner { max-width: 1280px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .header .logo, .header a.logo { display: flex; align-items: center; gap: 10px; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.45rem; color: #111827; line-height: 1; white-space: nowrap; text-decoration: none; transition: opacity .28s cubic-bezier(.4,0,.2,1); letter-spacing: -.01em; } .header .logo-icon { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; } .header .logo-text { display: inline-flex; align-items: baseline; } .header .logo-text span { color: #023047; font-size: .9rem; font-weight: 500; margin-left: 2px; letter-spacing: 0; } .header .logo:hover { opacity: .8; } .header .nav { display: flex; align-items: center; gap: 2px; } .header .nav a, .header .nav > button { font-family: 'Inter', -apple-system, sans-serif; font-size: .85rem; font-weight: 500; color: #6b6158; padding: 8px 14px; border-radius: 8px; background: transparent; border: none; cursor: pointer; text-decoration: none; transition: color .28s cubic-bezier(.4,0,.2,1); white-space: nowrap; position: relative; } .header .nav a::after, .header .nav > button::after { content: ''; position: absolute; bottom: 2px; left: 14px; right: 14px; height: 2px; background: #e9c46a; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.4,0,.2,1); } .header .nav a:hover, .header .nav > button:hover { color: #111827; } .header .nav a:hover::after, .header .nav > button:hover::after { transform: scaleX(1); } .header .nav-canais { position: relative; } .header .nav-canais > button { display: flex; align-items: center; gap: 5px; } .header .nav-dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-8px); background: #ffffff; border: 1px solid rgba(13,13,13,.06); border-radius: 12px; box-shadow: 0 24px 64px rgba(13,13,13,.16); padding: 10px; min-width: 280px; opacity: 0; pointer-events: none; transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1); z-index: 300; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .header .nav-canais:hover .nav-dropdown, .header .nav-canais:focus-within .nav-dropdown { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .header .nav-dropdown a { font-family: 'Inter', -apple-system, sans-serif; font-size: .82rem; font-weight: 500; color: #6b6158; padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 8px; transition: background .28s cubic-bezier(.4,0,.2,1), color .28s cubic-bezier(.4,0,.2,1); } .header .nav-dropdown a::after { display: none; } .header .nav-dropdown a:hover { background: rgba(0,119,182,.06); color: #111827; } .header .header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .header .header-social { display: flex; align-items: center; gap: 4px; padding-right: 10px; border-right: 1px solid rgba(13,13,13,.1); margin-right: 4px; } .header .header-social-link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #6b6158; transition: all .28s cubic-bezier(.4,0,.2,1); } .header .header-social-link:hover { background: #e9c46a; color: #fff; transform: translateY(-1px); } .header .btn-outline { font-family: 'Inter', -apple-system, sans-serif; font-size: .82rem; font-weight: 600; color: #111827; border: 1.5px solid rgba(13,13,13,.12); background: transparent; padding: 8px 18px; border-radius: 8px; text-decoration: none; transition: all .28s cubic-bezier(.4,0,.2,1); white-space: nowrap; display: inline-block; } .header .btn-outline:hover { border-color: #e9c46a; color: #e9c46a; } .header .btn-gold, .mobile-nav-footer .btn-gold { font-family: 'Inter', -apple-system, sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: .02em; color: #ffffff; background: #e9c46a; padding: 13px 28px; border-radius: 12px; transition: transform .28s cubic-bezier(.4,0,.2,1), background .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1); white-space: nowrap; border: none; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; box-shadow: 0 6px 20px rgba(233,196,106,.45); } .header .btn-gold:hover, .mobile-nav-footer .btn-gold:hover { transform: translateY(-2px); background: #f4e4ba; box-shadow: 0 12px 30px rgba(233,196,106,.6); } .header .hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; border-radius: 6px; background: transparent; border: none; cursor: pointer; } .header .hamburger span { width: 22px; height: 2px; background: #111827; border-radius: 2px; transition: all .28s cubic-bezier(.4,0,.2,1); display: block; } .header .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .header .hamburger.active span:nth-child(2) { opacity: 0; } .header .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ---- MOBILE OVERLAY ---- */ .mobile-overlay { position: fixed; inset: 0; background: #023047; z-index: 500; display: flex; flex-direction: column; padding: 0; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .mobile-overlay.active { opacity: 1; pointer-events: all; } .mobile-overlay-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.06); } .mobile-overlay-logo { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.4rem; color: #ffffff; letter-spacing: -.01em; } .mobile-overlay-logo span { color: #e9c46a; } .mobile-close { color: rgba(255,255,255,.5); font-size: 1.5rem; line-height: 1; padding: 4px 8px; background: transparent; border: none; cursor: pointer; transition: color .28s cubic-bezier(.4,0,.2,1); } .mobile-close:hover { color: #ffffff; } .mobile-nav { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; } .mobile-nav a, .mobile-nav button { font-family: 'Inter', -apple-system, sans-serif; font-size: 1.05rem; font-weight: 500; color: rgba(255,255,255,.7); padding: 13px 16px; border-radius: 10px; display: flex; align-items: center; gap: 12px; transition: background .28s cubic-bezier(.4,0,.2,1), color .28s cubic-bezier(.4,0,.2,1); text-align: left; width: 100%; background: transparent; border: none; cursor: pointer; text-decoration: none; } .mobile-nav a:hover, .mobile-nav button:hover { background: rgba(255,255,255,.05); color: #ffffff; } .mobile-nav .mobile-section-label { font-family: 'Inter', -apple-system, sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: #e9c46a; text-transform: uppercase; padding: 16px 16px 4px; opacity: .6; } .mobile-nav-footer { padding: 20px 24px; border-top: 1px solid rgba(255,255,255,.06); } .mobile-nav-footer .btn-gold { width: 100%; text-align: center; display: block; padding: 16px; font-size: .95rem; border-radius: 12px; } /* ---- RESPONSIVE ---- */ @media (max-width: 1100px) { .header .header-social { display: none; } } @media (max-width: 768px) { .topbar { height: 30px; } .header { top: 30px; height: 62px; } .topbar-brand .hide-mobile { display: none; } .header .nav, .header .header-actions { display: none; } .header .hamburger { display: flex; } } @media (max-width: 480px) { .topbar { padding: 0 16px; } .header { padding: 0 16px; } }