/* ========================================================================== أرباحي — Public Mobile Bottom Navigation Bar (Task ID: A — SUBTASK A3) -------------------------------------------------------------------------- App-like fixed bottom navigation for the public site on phones (≤768px). Hidden entirely on desktop (≥769px). Includes a floating "+" action button (FAB) above the bar that opens the quick-auth route. Layout (RTL aware — items flow naturally with dir="rtl" on ): [ Home ] [ How ] [ FAQ ] [ Login/Dashboard ] Design system (matches worklog.md): • Glass: backdrop-filter: blur(20px) saturate(160%) • Bg: rgba(10, 10, 20, 0.92) • Border-top: 1px solid rgba(108, 92, 231, 0.2) • Icons 22px · labels 10px • Active: primary #a29bfe + small dot indicator above icon • Primary gradient: linear-gradient(135deg, #6c5ce7, #a29bfe) ========================================================================== */ /* ========================================================================== 1. BODY PADDING (mobile only) — clears content from behind the bar ========================================================================== */ @media (max-width: 768px) { body { padding-bottom: 70px !important; } /* When the cookie-consent bar is visible it sits above the bottom nav. Keep both visible without overlap. */ .cookie-consent-overlay { bottom: 60px !important; } /* The sticky mobile CTA from landing.js also lives at the bottom — lift it above the bottom nav so it stays tappable. */ .lp-sticky-cta { bottom: 70px !important; } /* Task ID: V2-A — Hide the top-nav hamburger on mobile because the bottom bar now contains its own Menu (hamburger) tab. The top hamburger stays visible on desktop (≥769px) per landing.css rules. The language switcher button in the top nav stays visible on mobile. */ .hamburger-landing { display: none !important; } } /* ========================================================================== 2. BOTTOM NAV BAR (hidden by default, shown only on mobile) ========================================================================== */ .pub-bottom-nav { display: none; /* hidden on desktop */ } @media (max-width: 768px) { .pub-bottom-nav { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 9985; height: 60px; padding: 0 4px; padding-bottom: env(safe-area-inset-bottom, 0); background: rgba(10, 10, 20, 0.92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid rgba(108, 92, 231, 0.2); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4); align-items: stretch; justify-content: space-around; font-family: "Cairo", "Tajawal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* The bar slides out of view when the sidebar drawer opens */ transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } /* When the public hamburger drawer is open, tuck the bar away so it doesn't visually fight with the drawer overlay. */ body.nav-drawer-open .pub-bottom-nav { transform: translateY(100%); } .pub-bn-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px 4px; color: rgba(184, 184, 200, 0.85); text-decoration: none; font-size: 10px; font-weight: 600; line-height: 1.1; position: relative; -webkit-tap-highlight-color: transparent; transition: color 0.25s ease, transform 0.2s ease; cursor: pointer; min-width: 0; } .pub-bn-item i { font-size: 22px; line-height: 1; transition: transform 0.25s ease, color 0.25s ease, filter 0.25s ease; } .pub-bn-item span { font-size: 10px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Active state — primary color + dot indicator */ .pub-bn-item.pub-bn-active { color: #a29bfe; } .pub-bn-item.pub-bn-active i { color: #a29bfe; transform: translateY(-1px); filter: drop-shadow(0 0 6px rgba(162, 155, 254, 0.55)); } .pub-bn-item.pub-bn-active::before { content: ""; position: absolute; top: 4px; inset-inline-start: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #a29bfe; box-shadow: 0 0 6px rgba(162, 155, 254, 0.85); } [dir="rtl"] .pub-bn-item.pub-bn-active::before { transform: translateX(50%); } /* Pressed state */ .pub-bn-item:active { transform: scale(0.94); } /* The auth tab (Login or Dashboard) — slight primary tint to set it apart */ .pub-bn-item.pub-bn-auth { color: #c8c0ff; } .pub-bn-item.pub-bn-auth i { background: linear-gradient(135deg, rgba(108, 92, 231, 0.18), rgba(162, 155, 254, 0.12)); width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; border: 1px solid rgba(108, 92, 231, 0.28); } .pub-bn-item.pub-bn-auth.pub-bn-active i { background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -4px rgba(108, 92, 231, 0.65); } /* Task ID: V2-A — The Menu (hamburger) tab. Opens the same slide-in sidebar drawer (#navLinks) that the top hamburger used to open. Visually distinct: a circular primary-tinted gradient icon tile so users immediately recognize it as the menu trigger. */ .pub-bn-item.pub-bn-menu { color: #d8d2ff; } .pub-bn-item.pub-bn-menu i { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: radial-gradient(circle at 30% 30%, rgba(162, 155, 254, 0.30), rgba(108, 92, 231, 0.22)); border: 1px solid rgba(162, 155, 254, 0.45); box-shadow: 0 4px 14px -4px rgba(108, 92, 231, 0.55); transition: transform 0.25s ease, box-shadow 0.25s ease; } .pub-bn-item.pub-bn-menu:active i { transform: scale(0.92) rotate(90deg); } /* When the drawer is open, highlight the Menu tab as active so the user sees which control opened the drawer. */ body.nav-drawer-open .pub-bn-item.pub-bn-menu { color: #a29bfe; } body.nav-drawer-open .pub-bn-item.pub-bn-menu i { background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; border-color: transparent; box-shadow: 0 6px 18px -3px rgba(108, 92, 231, 0.75); } } /* ========================================================================== 3. FLOATING "+" ACTION BUTTON (FAB) — quick-auth shortcut -------------------------------------------------------------------------- Sits above the bottom bar (bottom: 75px) on the right (LTR) or left (RTL). 56px circle with primary gradient. Links to: - /user/dashboard.php if logged in - /user/login.php if not ========================================================================== */ .pub-fab { display: none; /* hidden on desktop */ } @media (max-width: 768px) { .pub-fab { display: inline-flex; position: fixed; bottom: 75px; inset-inline-end: 16px; /* right in LTR, left in RTL */ z-index: 9986; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%); color: #fff; text-decoration: none; font-size: 1.4rem; box-shadow: 0 10px 28px -6px rgba(108, 92, 231, 0.7), 0 0 0 4px rgba(10, 10, 20, 0.92); border: 2px solid rgba(255, 255, 255, 0.16); -webkit-tap-highlight-color: transparent; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; cursor: pointer; /* Subtle pulse so users notice it */ animation: pubFabPulse 2.6s ease-in-out infinite; } .pub-fab i { line-height: 1; transition: transform 0.3s ease; } .pub-fab:active { transform: scale(0.92); animation: none; } .pub-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px -6px rgba(108, 92, 231, 0.8), 0 0 0 4px rgba(10, 10, 20, 0.92); } .pub-fab:hover i { transform: rotate(90deg); } @keyframes pubFabPulse { 0%, 100% { box-shadow: 0 10px 28px -6px rgba(108, 92, 231, 0.7), 0 0 0 4px rgba(10, 10, 20, 0.92), 0 0 0 0 rgba(162, 155, 254, 0.45); } 50% { box-shadow: 0 10px 28px -6px rgba(108, 92, 231, 0.7), 0 0 0 4px rgba(10, 10, 20, 0.92), 0 0 0 10px rgba(162, 155, 254, 0); } } /* Tuck the FAB away too when the drawer is open */ body.nav-drawer-open .pub-fab { transform: scale(0); animation: none; pointer-events: none; } /* When the landing-page sticky CTA bar is visible, fade the FAB out so the two don't fight for the same screen real-estate. The sticky CTA only appears on the homepage once the user scrolls past the hero, so on other pages the FAB stays put. */ .lp-sticky-cta.lp-show ~ .pub-fab { opacity: 0; transform: scale(0) translateY(20px); animation: none; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .pub-fab { animation: none; } .pub-fab:hover i { transform: none; } } /* Extra-narrow phones — pull the FAB in slightly so it doesn't hug the edge */ @media (max-width: 360px) { .pub-fab { width: 52px; height: 52px; font-size: 1.25rem; inset-inline-end: 12px; bottom: 72px; } /* Task ID: V2-A — With 5 items now (Home, How, FAQ, Auth, Menu) the bottom bar is tighter. Slightly shrink icons + labels on tiny screens so nothing overflows or wraps. */ .pub-bn-item i { font-size: 19px; } .pub-bn-item span { font-size: 9px; letter-spacing: -0.01em; } .pub-bn-item.pub-bn-auth i, .pub-bn-item.pub-bn-menu i { width: 28px; height: 28px; font-size: 15px; } .pub-bottom-nav { padding: 0 2px; } } @media (max-width: 320px) { /* Even smaller (iPhone SE 1st gen, etc.) — keep labels short */ .pub-bn-item span { font-size: 8.5px; } .pub-bn-item i { font-size: 17px; } .pub-bn-item.pub-bn-auth i, .pub-bn-item.pub-bn-menu i { width: 26px; height: 26px; font-size: 14px; } } } /* ========================================================================== 4. SAFETY — never show on desktop (≥769px), even if a higher-specificity rule tries to. This is the contract from SUBTASK A3. ========================================================================== */ @media (min-width: 769px) { .pub-bottom-nav, .pub-fab { display: none !important; } }