/** * Sudanna Mobile Professional CSS * ملف مستقل — لا يمس أي CSS موجود * يُضاف كـ في نهاية فقط * ═══════════════════════════════════════════════ */ /* ════════════════════════════════════════════════ 1. GLOBAL MOBILE FIXES ════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Prevent horizontal overflow */ html, body { overflow-x: hidden !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Minimum font size: 14px */ body, p, span, div, a, button, input, select, textarea, label, li, td, th { font-size: max(14px, 0.875rem); } /* Fix tiny inline font-size overrides */ [style*="font-size:.7"], [style*="font-size: .7"], [style*="font-size:.65"], [style*="font-size: .65"], [style*="font-size:.6"], [style*="font-size:.68"], [style*="font-size:.72"], [style*="font-size:.75"], [style*="font-size:.8rem"] { font-size: 13px !important; } /* Cards — full width */ .card, .eco, .ent, .plan-card, .service-card, [class*="card"], [class*="-card"] { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Grids → single column */ .eco-grid, .ent-grid, .plans-grid, .grid-3, .grid-2, .services-grid, .mstat-grid, .corp-features { grid-template-columns: 1fr !important; gap: 12px !important; } /* Touch targets */ button, .btn, a.btn, [role="button"], input[type="submit"], input[type="button"] { min-height: 44px !important; min-width: 44px !important; } /* Fix large padding on hero sections */ .hero, [class*="hero"] { padding-top: 48px !important; padding-bottom: 40px !important; } /* Section padding */ .sec, .section, [class*="section"] { padding-top: 48px !important; padding-bottom: 48px !important; } /* Container padding */ .container, [class*="container"] { padding-left: 16px !important; padding-right: 16px !important; } /* H1 sizes */ h1, .hero-title, [class*="hero-title"] { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; line-height: 1.2 !important; } h2 { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; } h3 { font-size: clamp(1rem, 4vw, 1.2rem) !important; } /* Fix fixed widths causing overflow */ [style*="width:600px"], [style*="width: 600px"], [style*="width:500px"], [style*="width: 500px"], [style*="width:700px"], [style*="width: 700px"], [style*="width:800px"], [style*="width: 800px"], [style*="width:900px"], [style*="width: 900px"] { width: 100% !important; max-width: 100% !important; } /* Tables — scroll */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; white-space: nowrap; } /* Code blocks */ pre, code { overflow-x: auto; max-width: 100%; } /* Images */ img { max-width: 100% !important; height: auto !important; } } @media (max-width: 480px) { h1 { font-size: clamp(1.6rem, 8vw, 2rem) !important; } .btn-lg, [class*="btn-lg"] { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; display: flex !important; justify-content: center !important; } } /* ════════════════════════════════════════════════ 2. PROFESSIONAL NAV — HAMBURGER DRAWER ════════════════════════════════════════════════ */ /* Hamburger button */ .su-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; cursor: pointer; z-index: 300; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .su-hamburger span { display: block; width: 22px; height: 2px; background: #F0EDE8; border-radius: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } .su-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .su-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .su-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile Drawer overlay */ .su-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 8000; opacity: 0; transition: opacity 0.25s ease; } .su-drawer-overlay.open { opacity: 1; } /* Mobile Drawer panel */ .su-drawer { position: fixed; top: 0; left: 0; width: min(300px, 85vw); height: 100%; background: #0B1410; border-right: 1px solid rgba(29,200,116,0.15); z-index: 8001; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; padding: 0 0 80px; } html[dir="rtl"] .su-drawer { left: auto; right: 0; border-right: none; border-left: 1px solid rgba(29,200,116,0.15); transform: translateX(100%); } .su-drawer.open { transform: translateX(0); } /* Drawer header */ .su-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(29,200,116,0.06); position: sticky; top: 0; backdrop-filter: blur(16px); } .su-drawer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .su-drawer-logo .mark { width: 36px; height: 36px; background: linear-gradient(135deg,#1DC874,#0B8F52); border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; box-shadow: 0 0 16px rgba(29,200,116,0.3); } .su-drawer-logo span { font-size: 1.1rem; font-weight: 700; color: #F0EDE8; } .su-drawer-close { width: 36px; height: 36px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; color: rgba(240,237,232,0.6); font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; transition: all 0.15s; } .su-drawer-close:hover { background: rgba(220,38,38,0.15); color: #F87171; } /* Drawer links */ .su-drawer-nav { padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; } .su-drawer-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: rgba(240,237,232,0.75); font-size: 0.95rem; font-weight: 500; transition: all 0.15s; -webkit-tap-highlight-color: transparent; min-height: 52px; } .su-drawer-link .icon { width: 36px; height: 36px; background: rgba(255,255,255,0.05); border-radius: 10px; display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0; } .su-drawer-link:hover, .su-drawer-link.active { background: rgba(29,200,116,0.1); color: #1DC874; } .su-drawer-link.active .icon { background: rgba(29,200,116,0.15); } .su-drawer-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 8px 16px; } .su-drawer-cta { padding: 16px; display: flex; flex-direction: column; gap: 10px; } .su-drawer-cta a { display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: 12px; font-size: 0.95rem; font-weight: 600; text-decoration: none; min-height: 48px; transition: all 0.2s; } .su-drawer-cta .primary { background: linear-gradient(135deg,#1DC874,#0B8F52); color: #fff; box-shadow: 0 4px 16px rgba(29,200,116,0.25); } .su-drawer-cta .ghost { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(240,237,232,0.8); } @media (max-width: 768px) { .su-hamburger { display: flex !important; } /* Hide desktop nav links */ .nav-links, .nb-links, [class*="nav-link"]:not(.su-drawer-link), nav ul:not(.su-drawer-nav) { display: none !important; } /* Show hamburger in existing navs */ nav .nav-inner, nav .nb, .navbar { position: relative; } } /* ════════════════════════════════════════════════ 3. BOTTOM NAVIGATION — marketing & engagement ════════════════════════════════════════════════ */ .su-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: rgba(10,20,14,0.96); backdrop-filter: blur(8px) saturate(140%); /* RC-E2: 24px→8px low-end Android GPU */ -webkit-backdrop-filter: blur(8px) saturate(140%); border-top: 1px solid rgba(255,255,255,0.08); z-index: 500; direction: rtl; padding: 0 8px; padding-bottom: env(safe-area-inset-bottom); } .su-bottom-nav-inner { display: flex; align-items: stretch; justify-content: space-around; height: 100%; max-width: 480px; margin: 0 auto; } .su-bn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; padding: 8px 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.15s; border: none; background: none; color: rgba(240,237,232,0.45); font-family: inherit; border-radius: 12px; position: relative; } .su-bn-item:active { transform: scale(0.92); } .su-bn-item .su-bn-icon { font-size: 1.35rem; line-height: 1; transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1); } .su-bn-item .su-bn-label { font-size: 10px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .su-bn-item.active { color: #1DC874; } .su-bn-item.active .su-bn-icon { transform: translateY(-2px) scale(1.15); } .su-bn-item.active::before { content: ''; position: absolute; top: 6px; width: 32px; height: 32px; background: rgba(29,200,116,0.12); border-radius: 10px; z-index: -1; } /* FAB center button */ .su-bn-fab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; padding: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; border: none; background: none; font-family: inherit; } .su-bn-fab .su-bn-fab-btn { width: 48px; height: 48px; background: linear-gradient(135deg,#1DC874,#0B8F52); border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; box-shadow: 0 4px 20px rgba(29,200,116,0.4); transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1); margin-top: -16px; } .su-bn-fab:active .su-bn-fab-btn { transform: scale(0.92); } .su-bn-fab .su-bn-label { font-size: 10px; font-weight: 600; color: rgba(240,237,232,0.45); white-space: nowrap; } /* More Sheet */ .su-more-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: #0F1E17; border-top: 1px solid rgba(29,200,116,0.2); border-radius: 20px 20px 0 0; z-index: 8500; /* E1: Use transform instead of bottom animation — GPU composite, no layout reflow */ transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); padding: 0 16px calc(80px + env(safe-area-inset-bottom)); max-height: 80vh; overflow-y: auto; } .su-more-sheet.open { bottom: 0; transform: translateY(0); } /* RC-E1: GPU composite */ .su-more-sheet-handle { width: 40px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; margin: 12px auto 16px; } .su-more-sheet-title { font-size: 0.85rem; font-weight: 700; color: rgba(240,237,232,0.4); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; } .su-more-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .su-more-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; min-height: 80px; } .su-more-item:active { transform: scale(0.95); } .su-more-item.active { background: rgba(29,200,116,0.1); border-color: rgba(29,200,116,0.25); } .su-more-item .icon { font-size: 1.6rem; } .su-more-item .label { font-size: 0.78rem; font-weight: 600; color: rgba(240,237,232,0.7); text-align: center; } @media (max-width: 768px) { .su-bottom-nav { display: flex; align-items: stretch; } /* Push content up from bottom nav */ .main, .su-page-content, [id="main"], .tabs + div, .tabs + .main { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; } /* Hide desktop tabs on pages with bottom nav */ .su-has-bottom-nav .tabs { display: none !important; } } /* ════════════════════════════════════════════════ 4. PAGE-SPECIFIC MOBILE FIXES ════════════════════════════════════════════════ */ /* ── marketing.html ── */ @media (max-width: 768px) { /* Stats row — 2 columns */ .stats, .stats-row, [class*="stats"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .stat, .stat-chip { padding: 14px 10px !important; text-align: center !important; } .stat .n, .stat-chip .val { font-size: 1.4rem !important; } /* Chat area full height */ .chat-wrap, .chat-box, [class*="chat"] { height: auto !important; min-height: 300px !important; } .chat-area, [class*="chat-area"] { max-height: 40vh !important; overflow-y: auto !important; } /* Form groups stack */ .form-row, [class*="form-row"] { flex-direction: column !important; gap: 10px !important; } .form-group { width: 100% !important; } } /* ── pricing.html ── */ @media (max-width: 768px) { .plans-grid, .pricing-grid, [class*="plans-grid"] { grid-template-columns: 1fr !important; max-width: 400px !important; margin: 0 auto !important; } .compare-section, [class*="compare"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .doc-section { overflow-x: auto !important; } } /* ── hub.html ── */ @media (max-width: 768px) { .eco-grid { grid-template-columns: 1fr !important; } .inv-grid, [class*="inv-grid"] { grid-template-columns: 1fr !important; } .asst-wrap, [class*="asst-wrap"] { flex-direction: column !important; } .hero-actions { flex-direction: column !important; align-items: center !important; } .hero-actions .btn, .hero-actions a { width: 100% !important; max-width: 280px !important; } } /* ── engagement.html ── */ @media (max-width: 768px) { .poll-option, [class*="poll-option"] { min-height: 52px !important; padding: 14px !important; } .leaderboard-item, [class*="leaderboard"] { padding: 12px !important; } } /* ── magazine.html ── */ @media (max-width: 768px) { .feed-grid, [class*="feed"] { grid-template-columns: 1fr !important; } .filter-row, [class*="filter-row"] { flex-wrap: wrap !important; gap: 8px !important; } .filter-row select, .filter-row input { flex: 1 !important; min-width: 120px !important; } } /* ── corporate.html ── */ @media (max-width: 768px) { .services-grid, [class*="services-grid"] { grid-template-columns: 1fr !important; } .hero-actions { flex-direction: column !important; align-items: stretch !important; } } /* ── developer.html ── */ @media (max-width: 768px) { .dev-layout, [class*="dev-layout"] { flex-direction: column !important; } .dev-right, [class*="dev-right"] { display: none !important; } .dev-left, [class*="dev-left"] { width: 100% !important; } pre { font-size: 12px !important; } } /* ════════════════════════════════════════════════ 5. PWA INSTALL BANNER (Professional) ════════════════════════════════════════════════ */ .su-install-banner { display: none; position: fixed; bottom: calc(72px + env(safe-area-inset-bottom) + 12px); left: 12px; right: 12px; background: linear-gradient(135deg, rgba(11,77,59,0.95), rgba(6,13,9,0.98)); border: 1px solid rgba(29,200,116,0.3); border-radius: 16px; padding: 16px; z-index: 600; backdrop-filter: blur(8px); /* E4: install banner — reduced */ box-shadow: 0 8px 32px rgba(0,0,0,0.4); animation: bannerSlide 0.4s cubic-bezier(0.34,1.56,0.64,1) both; } .su-install-banner.show { display: flex; } .su-install-banner-inner { display: flex; align-items: center; gap: 14px; width: 100%; } .su-install-icon { width: 48px; height: 48px; flex-shrink: 0; background: linear-gradient(135deg,#1DC874,#0B8F52); border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; box-shadow: 0 4px 16px rgba(29,200,116,0.3); } .su-install-text { flex: 1; } .su-install-text strong { display: block; font-size: 0.9rem; color: #F0EDE8; margin-bottom: 2px; } .su-install-text span { font-size: 0.78rem; color: rgba(240,237,232,0.5); } .su-install-actions { display: flex; gap: 8px; flex-shrink: 0; } .su-install-btn { padding: 8px 16px; border-radius: 20px; border: none; font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; min-height: 36px; transition: all 0.15s; } .su-install-btn.primary { background: linear-gradient(135deg,#1DC874,#0B8F52); color: #fff; } .su-install-btn.dismiss { background: rgba(255,255,255,0.08); color: rgba(240,237,232,0.6); } @keyframes bannerSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ════════════════════════════════════════════════ 6. SCROLL TO TOP (mobile only) ════════════════════════════════════════════════ */ .su-scroll-top { display: none; position: fixed; bottom: calc(80px + env(safe-area-inset-bottom) + 12px); left: 16px; width: 44px; height: 44px; background: rgba(29,200,116,0.15); border: 1px solid rgba(29,200,116,0.3); border-radius: 50%; color: #1DC874; font-size: 1.2rem; cursor: pointer; z-index: 499; align-items: center; justify-content: center; backdrop-filter: blur(8px); transition: all 0.2s; -webkit-tap-highlight-color: transparent; } .su-scroll-top.visible { display: flex; } .su-scroll-top:hover { background: rgba(29,200,116,0.25); } @media (max-width: 768px) { .su-scroll-top { display: none; } .su-scroll-top.visible { display: flex; } } /* ════════════════════════════════════════════════ 7. SAFE AREA + NOTCH SUPPORT ════════════════════════════════════════════════ */ .su-bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)); } nav, .nav, .nb { padding-top: max(0px, env(safe-area-inset-top)); } @media (max-width: 768px) { /* Upload buttons — touch friendly */ .su-upload-btn { min-width: 44px !important; min-height: 44px !important; } /* Fix small tap targets globally */ a, button, [role="button"], input[type="submit"], input[type="button"], label[for] { min-height: 44px !important; } /* File inputs on mobile */ input[type="file"] { min-height: 44px; } /* Chat attach area */ .su-upload-bar { padding: 10px 12px; gap: 10px; } }