/* ============================================================ LokaLinc — Header Styles Self-contained. Load via in on every page. Requires: nothing from styles.css ============================================================ */ /* ── Fixed shell ── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; padding: 12px 20px; background: transparent; transform: translateY(0); opacity: 1; pointer-events: auto; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease; } /* Hide state (scroll down) */ .site-header.hide { transform: translateY(-110%); opacity: 0; pointer-events: none; } /* ── Frosted-glass pill ── */ .header-pill { max-width: 1100px; margin: 0 auto; height: 58px; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(28px) saturate(200%); -webkit-backdrop-filter: blur(28px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 18px; padding: 0 16px 0 14px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.50); transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* More opaque once user has scrolled */ .site-header:not(.at-top) .header-pill { background: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.60); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10); } /* ── Logo ── */ .header-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; } .header-logo img { height: 30px; width: auto; filter: none; transition: filter 0.3s ease; } .site-header:not(.at-top) .header-logo img { filter: none; /* original green logo when scrolled */ } .header-logo-name { font-size: 18px; font-weight: 800; color: #10b981; letter-spacing: -0.3px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; transition: color 0.3s ease; } .site-header:not(.at-top) .header-logo-name { color: #10b981; } /* ── Desktop nav ── */ .header-nav { display: flex; align-items: center; gap: 2px; } .header-nav a { font-size: 14px; font-weight: 500; color: #1f2937; text-decoration: none; padding: 7px 12px; border-radius: 10px; white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; transition: background 0.18s, color 0.18s; } .site-header:not(.at-top) .header-nav a { color: #1f2937; } .header-nav a:hover { background: rgba(16, 185, 129, 0.10); color: #10b981; } .site-header:not(.at-top) .header-nav a:hover { background: rgba(16, 185, 129, 0.10); color: #10b981; } /* Active page link */ .header-nav a.active, .mobile-menu a.active { color: #10b981 !important; font-weight: 600; } /* Download CTA button */ .nav-download { display: inline-flex !important; align-items: center; gap: 6px; background: #10b981 !important; color: white !important; padding: 8px 16px !important; border-radius: 11px !important; font-weight: 600 !important; margin-left: 6px; box-shadow: 0 3px 12px rgba(16, 185, 129, 0.40); transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important; } .nav-download:hover { background: #059669 !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(16, 185, 129, 0.50) !important; color: white !important; } /* ── Hamburger (mobile) ── */ .hamburger { display: none; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.20); border: 1px solid rgba(255, 255, 255, 0.35); align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .hamburger:hover { background: rgba(255, 255, 255, 0.35); } .hamburger span { display: block; width: 100%; height: 2px; background: #1f2937; border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease; transform-origin: center; } .site-header:not(.at-top) .hamburger span { background: #1f2937; } /* Hamburger → X animation */ .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; width: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile dropdown ── */ .mobile-menu { display: none; /* shown via .active */ position: fixed; top: 82px; left: auto; right: 14px; width: min(230px, calc(100% - 28px)); transform: none; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(28px) saturate(190%); -webkit-backdrop-filter: blur(28px) saturate(190%); border: 1px solid rgba(255, 255, 255, 0.50); border-radius: 18px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.42); padding: 10px; flex-direction: column; gap: 2px; z-index: 998; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; animation: menuIn 0.20s ease; } @keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .mobile-menu.active { display: flex; } .mobile-menu a { text-decoration: none; color: #1f2937; font-weight: 500; font-size: 15px; padding: 13px 16px; border-radius: 11px; transition: background 0.15s, color 0.15s; } .mobile-menu a:hover { background: rgba(16, 185, 129, 0.10); color: #10b981; } .mobile-menu .mob-download { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #10b981 !important; color: white !important; text-align: center; font-weight: 700; margin-top: 4px; box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35); } .mobile-menu .mob-download:hover { background: #059669 !important; } /* ── Breakpoints ── */ @media (max-width: 768px) { .header-nav { display: none !important; } .hamburger { display: flex !important; } .site-header { padding: 10px 14px; } }