/* * Praylum — prl-app.css * Sidebar system + logged-in layout offsets. * * SCOPE CONTRACT: * All layout shifts scoped to body.prl-in (logged-in users). * body.prl-auth (logged-out) is completely unaffected. * * Deploy to: /assets/css/prl-app.css * Linked from: /includes/header.php (inside ) * * HARDENED: * - Prevents sidebar SVG/icon “BIG M” / oversized icon issues via !important sizing * - Guards nav layout on pages with weird inherited styles * - Ensures sidebar/backdrop clickability + stacking behaves under fixed nav */ /* ════════════════════════════════════════ CUSTOM PROPERTIES ════════════════════════════════════════ */ :root { --sb-width: 260px; --sb-collapsed-width: 64px; --sb-transition: 0.26s cubic-bezier(0.4, 0, 0.2, 1); --sb-bg: rgba(7, 10, 26, 0.98); --sb-border: rgba(255, 255, 255, 0.065); --sb-item-active-bg: rgba(255, 190, 11, 0.09); --sb-item-hover-bg: rgba(255, 255, 255, 0.044); --sb-lock-dim: rgba(100, 116, 139, 0.50); } /* ════════════════════════════════════════ LAYOUT OFFSET (logged-in only) ════════════════════════════════════════ */ body.prl-in .page-content { padding-left: var(--sb-width); transition: padding-left var(--sb-transition); } body.prl-sb-collapsed .page-content { padding-left: var(--sb-collapsed-width); } /* Mobile: sidebar is off-canvas — no layout shift */ @media (max-width: 900px) { body.prl-in .page-content, body.prl-sb-collapsed .page-content { padding-left: 0 !important; } } /* ════════════════════════════════════════ SIDEBAR TOGGLE BUTTON (header far-left) ════════════════════════════════════════ */ .prl-sb-toggle { display: none; /* hidden until .prl-in */ align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: none; background: transparent; color: var(--gray-400); flex-shrink: 0; margin-right: 2px; cursor: pointer; transition: background 0.15s, color 0.15s; } .prl-sb-toggle:hover { background: var(--dark-elevated); color: var(--white); } body.prl-in .prl-sb-toggle { display: flex; } /* For logged-in users: sidebar handles mobile nav. Suppress old hamburger + mobile menu. */ body.prl-in .prl-nav__hamburger { display: none !important; } body.prl-in .prl-mobile-menu { display: none !important; } /* ════════════════════════════════════════ SIDEBAR SHELL ════════════════════════════════════════ */ .prl-sidebar { position: fixed; top: var(--nav-height); left: 0; bottom: 0; width: var(--sb-width); background: var(--sb-bg); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-right: 1px solid var(--sb-border); z-index: var(--z-sticky); /* 200 — below nav 300 */ display: flex; flex-direction: column; overflow: hidden; transition: width var(--sb-transition), transform var(--sb-transition); } /* Collapsed — desktop */ body.prl-sb-collapsed .prl-sidebar { width: var(--sb-collapsed-width); } /* Mobile — off-canvas by default */ @media (max-width: 900px) { .prl-sidebar { width: var(--sb-width) !important; transform: translateX(-110%); box-shadow: none; } body.prl-in.prl-sb-mobile-open .prl-sidebar { transform: translateX(0); box-shadow: 6px 0 48px rgba(0, 0, 0, 0.75); } } /* ════════════════════════════════════════ MOBILE BACKDROP ════════════════════════════════════════ */ .prl-sb-backdrop { display: none; position: fixed; inset: 0; top: var(--nav-height); background: rgba(0, 0, 0, 0.60); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: calc(var(--z-sticky) - 1); /* 199 */ cursor: pointer; -webkit-tap-highlight-color: transparent; } @media (max-width: 900px) { body.prl-in.prl-sb-mobile-open .prl-sb-backdrop { display: block; } } /* ════════════════════════════════════════ SCROLL AREA ════════════════════════════════════════ */ .prl-sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0 16px; scrollbar-width: none; } .prl-sb-scroll::-webkit-scrollbar { display: none; } /* ════════════════════════════════════════ SECTIONS ════════════════════════════════════════ */ .prl-sb-section { padding: 0 0 2px; } .prl-sb-section + .prl-sb-section { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.047); } .prl-sb-section-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(100, 116, 139, 0.60); padding: 4px 18px 5px; white-space: nowrap; overflow: hidden; max-height: 26px; transition: opacity var(--sb-transition), max-height var(--sb-transition), padding var(--sb-transition); } @media (min-width: 901px) { body.prl-sb-collapsed .prl-sb-section-label { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; } } /* ════════════════════════════════════════ NAV ITEMS ════════════════════════════════════════ */ .prl-sb-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 14px; margin: 1px 8px; border-radius: 10px; font-size: 0.865rem; font-weight: 500; color: var(--gray-400); text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; transition: background 0.14s, color 0.14s; } .prl-sb-item:hover { background: var(--sb-item-hover-bg); color: var(--gray-100); } .prl-sb-item.prl-sb-active { background: var(--sb-item-active-bg); color: var(--amber-gold); font-weight: 600; } /* Active accent bar */ .prl-sb-item.prl-sb-active::before { content: ''; position: absolute; left: -1px; top: 18%; bottom: 18%; width: 3px; background: var(--amber-gold); border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(255,190,11,0.45); } /* Locked — non-interactive */ .prl-sb-item.prl-sb-locked { color: var(--sb-lock-dim); pointer-events: none; cursor: default; } /* Locked but clickable (→ upgrade/apply) */ .prl-sb-item.prl-sb-locked-link { color: var(--sb-lock-dim); pointer-events: auto; cursor: pointer; } .prl-sb-item.prl-sb-locked-link:hover { background: rgba(239, 68, 68, 0.05); color: rgba(100, 116, 139, 0.75); } /* Danger (logout) */ .prl-sb-item.prl-sb-danger { color: rgba(248, 113, 113, 0.70); } .prl-sb-item.prl-sb-danger:hover { background: rgba(239, 68, 68, 0.09); color: #F87171; } /* Divider */ .prl-sb-divider { height: 1px; background: rgba(255, 255, 255, 0.057); margin: 5px 18px; } /* ════════════════════════════════════════ ITEM INTERNALS ════════════════════════════════════════ */ /* Icon wrapper */ .prl-sb-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; } /* HARDEN: prevent “big M” / huge icons from inherited svg rules */ .prl-sb-icon svg { width: 17px !important; height: 17px !important; display: block; flex-shrink: 0; } .prl-sb-icon svg * { vector-effect: non-scaling-stroke; } /* Live dot (overlays icon) */ .prl-sb-live-dot { position: absolute; top: 8px; left: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--error); box-shadow: 0 0 0 2px rgba(239,68,68,0.18); animation: prl-sb-lpulse 1.8s ease-in-out infinite; pointer-events: none; } @keyframes prl-sb-lpulse { 0%,100% { box-shadow: 0 0 0 2px rgba(239,68,68,.18); } 50% { box-shadow: 0 0 0 5px rgba(239,68,68,.04); } } /* Text label */ .prl-sb-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity var(--sb-transition); } /* Lock badge cluster */ .prl-sb-lock { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; transition: opacity var(--sb-transition); } .prl-sb-lock svg { width: 11px !important; height: 11px !important; } .prl-sb-badge { font-size: 0.59rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 1px 5px; white-space: nowrap; line-height: 1.6; } .prl-sb-badge-creator { background: rgba(255,190,11,0.09); color: var(--amber-gold); border: 1px solid rgba(255,190,11,0.20); } .prl-sb-badge-soon { background: rgba(100,116,139,0.09); color: rgba(100,116,139,0.65); border: 1px solid rgba(100,116,139,0.16); } /* ════════════════════════════════════════ COLLAPSED STATE — desktop only ════════════════════════════════════════ */ @media (min-width: 901px) { body.prl-sb-collapsed .prl-sb-label, body.prl-sb-collapsed .prl-sb-lock { opacity: 0; max-width: 0; overflow: hidden; pointer-events: none; } body.prl-sb-collapsed .prl-sb-item { justify-content: center; padding: 11px 0; margin: 2px 8px; } body.prl-sb-collapsed .prl-sb-live-dot { top: 9px; left: 30px; } /* CSS Tooltips (right side of icon) */ body.prl-sb-collapsed .prl-sb-item::after { content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--dark-elevated); color: var(--gray-100); border: 1px solid var(--glass-border); border-radius: 8px; padding: 5px 11px; font-size: 0.77rem; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.13s ease; z-index: 500; box-shadow: 0 4px 18px rgba(0,0,0,0.50); } body.prl-sb-collapsed .prl-sb-item:hover::after { opacity: 1; } } /* ════════════════════════════════════════ BOTTOM UPGRADE CTA ════════════════════════════════════════ */ .prl-sb-bottom { padding: 10px 10px 14px; border-top: 1px solid var(--sb-border); overflow: hidden; max-height: 100px; transition: opacity var(--sb-transition), max-height var(--sb-transition), padding var(--sb-transition); } @media (min-width: 901px) { body.prl-sb-collapsed .prl-sb-bottom { opacity: 0; max-height: 0; padding: 0; pointer-events: none; } } .prl-sb-cta { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(135deg, rgba(255,190,11,0.085), rgba(30,58,138,0.13) ); border: 1px solid rgba(255,190,11,0.155); border-radius: 12px; text-decoration: none; transition: all 0.18s ease; } .prl-sb-cta:hover { background: linear-gradient(135deg, rgba(255,190,11,0.13), rgba(30,58,138,0.20) ); border-color: rgba(255,190,11,0.28); transform: translateY(-1px); } .prl-sb-cta__icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,190,11,0.11); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--amber-gold); } .prl-sb-cta__icon svg { width: 14px !important; height: 14px !important; } .prl-sb-cta__text strong { display: block; font-size: 0.77rem; font-weight: 700; color: var(--white); line-height: 1.3; } .prl-sb-cta__text small { font-size: 0.69rem; color: var(--gray-500); display: block; margin-top: 1px; } /* ════════════════════════════════════════ OPTIONAL HARDENING FOR WEIRD PAGE CSS (prevents rogue SVG/global styles from affecting sidebar) ════════════════════════════════════════ */ body.prl-in .prl-sidebar svg { max-width: none !important; } body.prl-in .prl-sidebar img, body.prl-in .prl-sidebar video { max-width: 100% !important; height: auto !important; } /* ── Laptop responsive fix (1280px) ────────────────────────────── Nav styles defined inline in header.php require !important to override. Reduces link size and hides low-priority items on 1280px viewports. ──────────────────────────────────────────────────────────────── */ @media (max-width: 1280px) { /* Shrink nav links to fit all items */ .prl-nav__link, .prl-nav__dropdown-trigger { font-size: 0.75rem !important; padding: 5px 8px !important; letter-spacing: -0.01em; } /* Tighten gap between links */ .prl-nav__links { gap: 1px !important; } /* Shrink search input */ .prl-nav__search-input { width: 130px !important; } /* Hide Shorts and Community — lowest priority nav items */ .prl-nav__link[href*="/shorts"], .prl-nav__link[href*="/community"] { display: none !important; } /* Prevent logo text from being cut off */ .prl-nav__logo-text { display: none !important; } /* Tighten right side action icons */ .prl-nav__right { gap: 4px !important; } } /* ── Sidebar offset for laptop (901px–1280px) ──────────────────── Nav inner padding accounts for sidebar width so header doesn't render under the sidebar on laptop viewports. ──────────────────────────────────────────────────────────────── */ @media (min-width: 901px) and (max-width: 1280px) { body.prl-in .prl-nav__inner { padding-left: calc(var(--sb-width, 260px) + 16px) !important; } body.prl-in.prl-sb-collapsed .prl-nav__inner { padding-left: calc(var(--sb-collapsed-width, 64px) + 16px) !important; } }