/* ============================================================ BRAND MAKER — nav-learning-popup.css Learning nav as a CENTERED POPUP (no dropdown). Replaces: nav-learning-dropdown.css Scope: .nav-item-learning trigger + #learning-popup-overlay Loaded LAST in so it always wins the cascade. ============================================================ */ :root { --lp-orange: #F97316; --lp-orange-2: #FF7A00; --lp-purple: #7C3AED; --lp-bg-1: #1e0045; --lp-bg-2: #130030; --lp-bg-3: #1a0038; --lp-border: rgba(255,255,255,0.12); --lp-text: #e8def8; --lp-text-muted: #C4AEDE; --lp-radius: 22px; --lp-duration: 320ms; } /* ============================================================ TRIGGER — plain nav link, no arrow, no dropdown markup needed ============================================================ */ .nav-item-learning { position: relative !important; } .nav-learning-trigger { display: inline-flex !important; align-items: center !important; gap: 7px !important; cursor: pointer; } .nav-learning-trigger i { font-size: 0.82em; opacity: 0.85; } /* ============================================================ OVERLAY — full screen backdrop ============================================================ */ .lp-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(5,0,16,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity var(--lp-duration) ease; will-change: opacity; } .lp-overlay.show { opacity: 1; pointer-events: auto; } /* ============================================================ POPUP BOX ============================================================ */ .lp-box { position: relative; width: 100%; max-width: 460px; background: linear-gradient(160deg, var(--lp-bg-1) 0%, var(--lp-bg-2) 60%, var(--lp-bg-3) 100%); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 38px 32px 32px; box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(249,115,22,0.10); transform: scale(0.86) translateY(28px); opacity: 0; transition: transform 280ms cubic-bezier(0.4,0,0.2,1), opacity 240ms ease; max-height: 88vh; overflow-y: auto; } .lp-overlay.show .lp-box { transform: scale(1) translateY(0); opacity: 1; transition: transform var(--lp-duration) cubic-bezier(0.34,1.56,0.64,1), opacity var(--lp-duration) ease; } /* Close button */ .lp-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s; z-index: 2; } .lp-close:hover { background: rgba(255,0,0,0.18); border-color: rgba(255,0,0,0.38); color: #fff; transform: rotate(90deg); } /* Header */ .lp-header { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; } .lp-header-icon { width: 58px; height: 58px; min-width: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: linear-gradient(135deg, var(--lp-orange), var(--lp-purple)); color: #fff; box-shadow: 0 8px 26px rgba(249,115,22,0.4); } .lp-tag { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lp-orange); margin-bottom: 4px; } .lp-title { font-family: var(--font-heading, 'Sora', sans-serif); font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; } .lp-sub { font-size: 0.84rem; color: var(--lp-text-muted); line-height: 1.6; margin: 14px 0 24px; } /* ============================================================ OPTIONS LIST ============================================================ */ .lp-options { display: flex; flex-direction: column; gap: 12px; } .lp-option { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; overflow: hidden; font-family: inherit; transition: border-color 0.3s ease, background 0.3s ease, transform 0.25s ease; } .lp-option:hover { background: rgba(255,255,255,0.07); border-color: rgba(249,115,22,0.3); transform: translateX(3px); } /* Glow ring layer — animates on click via .pulse class (JS-added) */ .lp-opt-glow { position: absolute; inset: -2px; border-radius: 16px; pointer-events: none; opacity: 0; background: linear-gradient(135deg, var(--lp-orange), #ec4899, var(--lp-purple), #06b6d4, var(--lp-orange)); background-size: 300% 300%; z-index: 0; filter: blur(0px); } .lp-option.pulse .lp-opt-glow { animation: lpGlowPulse 900ms ease-out; } @keyframes lpGlowPulse { 0% { opacity: 0; filter: blur(0px); background-position: 0% 50%; } 35% { opacity: 0.9; filter: blur(2px); background-position: 50% 50%; } 70% { opacity: 0.55;filter: blur(4px); background-position: 100% 50%; } 100% { opacity: 0; filter: blur(0px); background-position: 100% 50%; } } .lp-option.pulse { border-color: rgba(249,115,22,0.65); box-shadow: 0 0 0 1px rgba(249,115,22,0.3), 0 0 26px rgba(249,115,22,0.35); animation: lpShake 420ms ease; } @keyframes lpShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-1px); } } .lp-opt-icon { position: relative; z-index: 1; width: 44px; height: 44px; min-width: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: rgba(249,115,22,0.13); border: 1px solid rgba(249,115,22,0.25); color: var(--lp-orange); transition: transform 0.3s ease; } .lp-option:hover .lp-opt-icon { transform: scale(1.08) rotate(-4deg); } .lp-opt-icon.yt { background: rgba(255,0,0,0.13); border-color: rgba(255,0,0,0.28); color: #FF3B3B; } .lp-opt-icon.ig { background: rgba(225,48,108,0.13); border-color: rgba(225,48,108,0.28); color: #E1306C; } .lp-opt-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .lp-opt-title { font-size: 0.94rem; font-weight: 700; color: #fff; } .lp-opt-desc { font-size: 0.74rem; color: var(--lp-text-muted); } /* Coming Soon badge — hidden by default, fades in on click */ .lp-opt-badge { position: relative; z-index: 1; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-orange); background: rgba(249,115,22,0.14); border: 1px solid rgba(249,115,22,0.3); padding: 5px 10px; border-radius: 99px; white-space: nowrap; opacity: 0; transform: translateY(4px) scale(0.9); transition: opacity 0.35s ease, transform 0.35s ease; } .lp-option.pulse .lp-opt-badge { opacity: 1; transform: translateY(0) scale(1); } /* ============================================================ LAPTOP / DESKTOP — primary focus, wide comfortable spacing ============================================================ */ @media (min-width: 1025px) { .lp-box { padding: 42px 38px 36px; max-width: 480px; } .lp-option { padding: 16px 18px; } } /* ============================================================ TABLET / MEDIUM (769px – 1024px) ============================================================ */ @media (min-width: 769px) and (max-width: 1024px) { .lp-box { max-width: 440px; padding: 34px 28px 28px; } } /* ============================================================ MOBILE — small / medium / large, bottom-sheet style ============================================================ */ @media (max-width: 768px) { .lp-overlay { align-items: flex-end; padding: 0; overflow-x: hidden; } .lp-box { position: relative; max-width: 100%; width: 100%; margin: 0; box-sizing: border-box; border-radius: 20px 20px 0 0; padding: 30px 20px calc(24px + env(safe-area-inset-bottom, 0px)); max-height: 86vh; transform: translateY(100%); transition: transform 260ms cubic-bezier(0.4,0,0.2,1), opacity 220ms ease; box-shadow: 0 -8px 40px rgba(0,0,0,0.5); } .lp-overlay.show .lp-box { transform: translateY(0); transition: transform var(--lp-duration) cubic-bezier(0.34,1.56,0.64,1), opacity var(--lp-duration) ease; } /* Drag handle — signals "this is a sheet", standard mobile UX pattern */ .lp-box::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.22); } .lp-close { top: 14px; right: 14px; } .lp-header-icon { width: 48px; height: 48px; min-width: 48px; font-size: 1.15rem; border-radius: 14px; } .lp-header { margin-bottom: 4px; gap: 13px; } .lp-tag { font-size: 0.62rem; margin-bottom: 3px; } .lp-title { font-size: 1.1rem; } .lp-sub { font-size: 0.78rem; margin: 10px 0 18px; line-height: 1.55; } .lp-options { gap: 10px; } .lp-option { padding: 12px 13px; gap: 12px; border-radius: 13px; } .lp-opt-icon { width: 38px; height: 38px; min-width: 38px; font-size: 0.95rem; border-radius: 11px; } .lp-opt-title { font-size: 0.86rem; } .lp-opt-desc { font-size: 0.69rem; } } /* Small phones */ @media (max-width: 480px) { .lp-box { padding: 24px 18px 22px; } .lp-opt-badge { font-size: 0.58rem; padding: 4px 8px; } .lp-opt-desc { display: none; } /* keep rows compact on very small screens */ } /* Large phones / phablets */ @media (min-width: 481px) and (max-width: 600px) { .lp-box { padding: 26px 20px 24px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .lp-option.pulse, .lp-option.pulse .lp-opt-glow { animation: none !important; } .lp-overlay, .lp-box, .lp-opt-badge { transition: none !important; } }