/* ========================================================================== NEVES LICENSING AUTHORITY HEADER STYLESHEET -------------------------------------------------------------------------- ========================================================================== */ /* 1. VARIABLES & BASE ----------------------------------------------------- */ :root { --primary: #102a5c; --bg: #f4f6fb; --text: #0f172a; --muted: #4b5563; --border: #e5e7eb; --gold: #d4a548; --dark: #020617; --white: #ffffff; --soft: #f9fafb; /* Verify-page palette */ --nla-navy: #051426; --nla-navy-soft: #0c223e; --nla-gold: #d4a548; --nla-gold-soft: #f5e2bf; --nla-bg: #f5f7fb; --nla-border: #dde2ee; --nla-text: #1f2933; --nla-muted: #64748b; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } a { text-decoration: none; } img { max-width: 100%; display: block; } /* 3. HEADER --------------------------------------------------------------- */ .site-topbar { background: #030d19; color: #cbd5f5; font-size: 12px; } .site-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 70px; flex-wrap: wrap; } .site-topbar-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .topbar-portal { color: #fff; } .topbar-portal b { color: var(--gold); } .topbar-tagline { color: #94a3b8; } .site-topbar-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .site-topbar-right a { color: #cbd5f5; } .site-topbar-right a:hover { color: var(--gold); } /* Main header bar */ .site-header { background: #051426; border-bottom: 4px solid var(--gold); position: relative; z-index: 50; } .site-header-inner { display: flex; align-items: center; gap: 20px; padding: 14px 70px !important; } .site-logo img { width: auto; height: 60px; } .site-nav { margin-left: auto; } .nav-menu { list-style: none; display: flex; align-items: center; gap: 15px; } .nav-menu i.fas.fa-chevron-down{ font-size: 10px !important; } .nav-menu > li { position: relative; } .nav-menu > li > a { color: #e5ecff; font-size: 14px; padding: 8px 0; display: inline-flex; align-items: center; gap: 5px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; cursor: pointer; } .nav-menu > li > a:hover { color: var(--gold); cursor: pointer; } /* Dropdowns */ .sub-menu { list-style: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: #051426; border: 1px solid rgba(212,165,72,.25); border-radius: 8px; padding: 6px 0; box-shadow: 0 18px 40px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; } .nav-menu > li.has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .sub-menu li a { display: block; padding: 9px 16px; font-size: 13.5px; color: #cbd5e1; line-height: 1.4; } .sub-menu li a:hover { background: rgba(212,165,72,.12); color: var(--gold); cursor: pointer !important; } .nav-menu li a.g_translate a.glink { color: #fff !important; font-weight: normal !important; } /* Header CTA buttons */ .header-cta { display: flex; gap: 8px; } .header-btn { background: var(--gold); color: #111827; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; white-space: nowrap; transition: transform .08s, box-shadow .2s; } .header-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.3); } /* Hamburger (mobile) */ .nav-toggle { display: none; margin-left: auto; width: 42px; height: 38px; background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .nav-toggle span { width: 20px; height: 2px; background: #fff; transition: transform .2s, opacity .2s; } /* 4. BUTTONS -------------------------------------------------------------- */ .btn-primary, .btn-secondary { border-radius: 999px; font-size: 12px; padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; } .btn-primary { background: var(--gold); color: #111827; border: 1px solid var(--gold); box-shadow: 0 12px 26px rgba(15,23,42,.45); } .btn-secondary { background: transparent; color: #f9fafb; border: 1px solid rgba(248,250,252,.7); box-shadow: 0 8px 20px rgba(15,23,42,.35); } .soft-btn { background: #fff; color: var(--primary); border: 1px solid #d1d5db; box-shadow: none; } /* 8. RESPONSIVE ----------------------------------------------------------- */ @media (max-width: 1024px) { .site-topbar { display: none; } .site-header-inner { padding: 14px 30px !important; } /* .site-logo img {*/ /* width: 170px;*/ /*}*/ .nav-toggle { display: flex; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: #051426; border-top: 1px solid rgba(212,165,72,.25); margin-left: 0; max-height: 0; overflow: hidden; transition: max-height .25s ease; } .site-nav.open { max-height: 80vh; overflow-y: auto; } .nav-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; } .nav-menu > li > a { padding: 12px 20px; } .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-radius: 0; background: rgba(255,255,255,.03); display: none; min-width: 0; } .nav-menu > li.expanded > .sub-menu { display: block; } .header-cta { display: none; } }