/*! * Exalearn Pro — Persistent Navigation Bar * Injected after via wp_body_open on every front-end page. */ /* ── Reset & variables ─────────────────────────────────────────────────────── */ #exl-navbar { --exl-nb-h: 52px; --exl-nb-bg: #ffffff; --exl-nb-border: #e5e7eb; --exl-nb-primary: #2563eb; --exl-nb-primary-dark: #1e40af; --exl-nb-accent: #7c3aed; --exl-nb-text: #0f172a; --exl-nb-muted: #64748b; --exl-nb-danger: #ef4444; --exl-nb-radius: 10px; --exl-nb-shadow: 0 1px 4px rgba(15,23,42,.08), 0 4px 16px rgba(15,23,42,.06); position: fixed; top: 0; left: 0; right: 0; z-index: 99999; background: var(--exl-nb-bg); border-bottom: 1px solid var(--exl-nb-border); box-shadow: var(--exl-nb-shadow); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1; box-sizing: border-box; } /* ── Inner row ─────────────────────────────────────────────────────────────── */ #exl-navbar .exl-nb-inner { display: flex; align-items: center; gap: 4px; height: var(--exl-nb-h); max-width: 1400px; margin: 0 auto; padding: 0 20px; } /* ── Brand ─────────────────────────────────────────────────────────────────── */ #exl-navbar .exl-nb-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--exl-nb-text); font-weight: 800; font-size: 15px; letter-spacing: -0.02em; flex-shrink: 0; margin-right: 8px; } #exl-navbar .exl-nb-brand-icon { font-size: 20px; line-height: 1; } #exl-navbar .exl-nb-brand-name { background: linear-gradient(135deg, var(--exl-nb-primary), var(--exl-nb-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Primary nav links ─────────────────────────────────────────────────────── */ #exl-navbar .exl-nb-links { display: flex; align-items: center; gap: 2px; flex: 1; } #exl-navbar .exl-nb-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; text-decoration: none; color: var(--exl-nb-muted); font-weight: 600; font-size: 13.5px; transition: color 0.15s, background 0.15s; white-space: nowrap; } #exl-navbar .exl-nb-link:hover { color: var(--exl-nb-primary); background: rgba(37,99,235,.07); } #exl-navbar .exl-nb-link--active { color: var(--exl-nb-primary); background: rgba(37,99,235,.09); } #exl-navbar .exl-nb-link--admin { color: var(--exl-nb-accent); } #exl-navbar .exl-nb-link--admin:hover { background: rgba(124,58,237,.08); color: var(--exl-nb-accent); } #exl-navbar .exl-nb-icon { font-size: 15px; line-height: 1; } /* ── Right-side actions ────────────────────────────────────────────────────── */ #exl-navbar .exl-nb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } /* ── Buttons ───────────────────────────────────────────────────────────────── */ #exl-navbar .exl-nb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; white-space: nowrap; border: none; } #exl-navbar .exl-nb-btn--ghost { color: var(--exl-nb-primary); background: transparent; border: 1.5px solid var(--exl-nb-border); } #exl-navbar .exl-nb-btn--ghost:hover { background: rgba(37,99,235,.07); border-color: var(--exl-nb-primary); } #exl-navbar .exl-nb-btn--primary { color: #fff; background: linear-gradient(135deg, var(--exl-nb-primary), var(--exl-nb-accent)); box-shadow: 0 2px 8px rgba(37,99,235,.3); } #exl-navbar .exl-nb-btn--primary:hover { box-shadow: 0 4px 14px rgba(37,99,235,.4); opacity: .92; } /* ── User pill ─────────────────────────────────────────────────────────────── */ #exl-navbar .exl-nb-user { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1.5px solid var(--exl-nb-border); cursor: pointer; user-select: none; transition: border-color 0.15s, box-shadow 0.15s; } #exl-navbar .exl-nb-user:hover, #exl-navbar .exl-nb-user--open { border-color: var(--exl-nb-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } #exl-navbar .exl-nb-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--exl-nb-primary), var(--exl-nb-accent)); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #exl-navbar .exl-nb-username { font-weight: 600; color: var(--exl-nb-text); font-size: 13.5px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #exl-navbar .exl-nb-caret { color: var(--exl-nb-muted); font-size: 11px; transition: transform 0.2s; } #exl-navbar .exl-nb-user--open .exl-nb-caret { transform: rotate(180deg); } /* ── Dropdown ──────────────────────────────────────────────────────────────── */ #exl-navbar .exl-nb-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: #fff; border: 1px solid var(--exl-nb-border); border-radius: var(--exl-nb-radius); box-shadow: 0 8px 32px rgba(15,23,42,.14); padding: 6px; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s; z-index: 100000; } #exl-navbar .exl-nb-user--open .exl-nb-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); } #exl-navbar .exl-nb-dd-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--exl-nb-border); margin-bottom: 4px; } #exl-navbar .exl-nb-dd-header strong { display: block; font-size: 14px; font-weight: 700; color: var(--exl-nb-text); margin-bottom: 2px; } #exl-navbar .exl-nb-dd-header small { display: block; font-size: 12px; color: var(--exl-nb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #exl-navbar .exl-nb-dd-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 7px; text-decoration: none; color: var(--exl-nb-text); font-size: 13.5px; font-weight: 500; transition: background 0.12s; } #exl-navbar .exl-nb-dd-item:hover { background: var(--exl-nb-border); color: var(--exl-nb-text); } #exl-navbar .exl-nb-dd-item--danger { color: var(--exl-nb-danger); } #exl-navbar .exl-nb-dd-item--danger:hover { background: rgba(239,68,68,.08); } #exl-navbar .exl-nb-dd-divider { height: 1px; background: var(--exl-nb-border); margin: 4px 0; } /* ── Hamburger ─────────────────────────────────────────────────────────────── */ #exl-navbar .exl-nb-hamburger { display: none; flex-direction: column; justify-content: center; gap: 4.5px; width: 36px; height: 36px; padding: 6px; border: 1.5px solid var(--exl-nb-border); border-radius: 8px; background: transparent; cursor: pointer; transition: border-color 0.15s; } #exl-navbar .exl-nb-hamburger span { display: block; height: 2px; background: var(--exl-nb-text); border-radius: 2px; transition: transform 0.22s, opacity 0.22s; } #exl-navbar .exl-nb-hamburger--open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } #exl-navbar .exl-nb-hamburger--open span:nth-child(2) { opacity: 0; } #exl-navbar .exl-nb-hamburger--open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } #exl-navbar .exl-nb-hamburger:hover { border-color: var(--exl-nb-primary); } /* ── Mobile drawer ─────────────────────────────────────────────────────────── */ #exl-navbar .exl-nb-mobile-drawer { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 14px; border-top: 1px solid var(--exl-nb-border); background: var(--exl-nb-bg); } #exl-navbar .exl-nb-mobile-link { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 9px; text-decoration: none; color: var(--exl-nb-text); font-size: 14px; font-weight: 500; transition: background 0.12s; } #exl-navbar .exl-nb-mobile-link:hover { background: rgba(37,99,235,.07); color: var(--exl-nb-primary); } #exl-navbar .exl-nb-mobile-link--danger { color: var(--exl-nb-danger); } #exl-navbar .exl-nb-mobile-link--danger:hover { background: rgba(239,68,68,.07); color: var(--exl-nb-danger); } #exl-navbar .exl-nb-mobile-divider { height: 1px; background: var(--exl-nb-border); margin: 6px 0; } /* ── Body offset so content is not under the sticky bar ───────────────────── */ body.admin-bar #exl-navbar { top: 32px; } @media (max-width: 782px) { body.admin-bar #exl-navbar { top: 46px; } } /* ── Responsive ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { #exl-navbar .exl-nb-links, #exl-navbar .exl-nb-btn--ghost, #exl-navbar .exl-nb-username, #exl-navbar .exl-nb-caret { display: none; } #exl-navbar .exl-nb-hamburger { display: flex; } #exl-navbar .exl-nb-user { padding: 5px; border-radius: 50%; } } @media (min-width: 769px) { #exl-navbar .exl-nb-mobile-drawer { display: none !important; } }