/* sh-nav.css — Support Human Career Suite shared nav styles * Link this in BEFORE the tool's own stylesheet on every page * that uses sh-nav.js. Keeping CSS here (instead of injected by JS) * means all layout-affecting rules apply before the first pixel renders. */ html { scrollbar-gutter: stable; } body { padding-top: 58px; } nav { background: var(--cream); border-bottom: 1.5px solid var(--border); padding: 11px 32px; min-height: 58px; display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 200; } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-logo { height: 36px; width: auto; display: block; } .nav-brand-text { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 900; color: var(--ink); line-height: 1; } .nav-brand-text span { color: var(--purple); } .nav-divider { width: 1.5px; height: 28px; background: var(--border); border-radius: 2px; align-self: center; } .nav-suite-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1; } /* Absolutely centred so left/right content width never shifts the links */ .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; list-style: none; } .nav-links a { font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 8px; transition: background 0.15s, color 0.15s; white-space: nowrap; -webkit-font-smoothing: antialiased; } .nav-links a:hover { background: var(--purple-light); color: var(--purple); } .nav-links a.active { background: var(--purple); color: white; } #authState { display: inline-flex; align-items: center; gap: 8px; } /* ── HAMBURGER BUTTON ───────────────────────────────────────────────────── */ .nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; line-height: 0; } .nav-hamburger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; transition: all 0.2s; } @media (max-width: 700px) { nav { padding: 10px 14px; } .nav-suite-label, .nav-divider { display: none; } .nav-logo { height: 30px; } .nav-hamburger { display: block; } /* Override the absolute-centred desktop layout */ .nav-links { position: fixed; top: 58px; left: 0; right: 0; transform: none; flex-direction: column; background: var(--cream); border-bottom: 1.5px solid var(--border); padding: 10px 14px; gap: 2px; display: none; z-index: 199; } .nav-links.open { display: flex; } .nav-links a { padding: 10px 14px; font-size: 14px; } .btn-auth { font-size: 12px !important; padding: 6px 10px !important; } }