` stays in the templates (Zain's markers etc.) but renders as nothing. Background tone is pushed onto so the page still has the right dark colour. */ .space-bg, .space-bg .nebula { display: none !important; } body, html { background: #0A0718; } /* ─── NAV ────────────────────────────────────────────────────── */ /* ROUND 40 rev7 (2026-04-23) — nav back to 64px. User feedback: "كبّرت اللوكو كبير بدون ما يزحف على باقي الأشياء" — logo should grow visually without pushing page content down. Keep nav height fixed and scale the logo inside it. */ .landing-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: 64px; display: flex; align-items: center; overflow: visible; background: rgba(5,4,15,0.78); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-bottom: 1px solid rgba(255,255,255,0.06); transition: background .3s, border-color .3s; } /* clip the stars canvas only — not the dropdown */ #navStarsCanvas { clip-path: inset(0); } .landing-nav.scrolled { background: rgba(5,4,15,0.94); border-bottom-color: rgba(139,92,246,0.22); box-shadow: 0 8px 32px rgba(0,0,0,0.45); } #navStarsCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .landing-nav-inner { position: relative; z-index: 1; /* Fix 2026-04-22: was max-width 1320px which left empty space on wide monitors while the nav items got cramped. Raised cap + tighter horizontal padding on large screens so the navbar uses the full viewport and items have breathing room. */ max-width: 1600px; margin: 0 auto; padding: 0 40px; width: 100%; display: flex; align-items: center; gap: 28px; } @media (min-width: 1700px) { .landing-nav-inner { max-width: none; padding: 0 64px; } } .lnav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } /* ROUND 40 rev8 (2026-04-23) — icon + HTML wordmark. User asked: "شلون جانت جبيرة وحلوة سوي نفسها بس برو تكون خضرة" — big readable "afkar pro" wordmark next to the icon, with the "pro" part in a GREEN pill (matching the designer's pill in the logo badge). The icon (coin.svg) is the mark-only disc; the wordmark is pure HTML so it stays crisp at any DPI and the green pill is part of the page theme rather than a baked-in PNG pixel. */ /* ROUND 40 rev14 (2026-04-24) — user supplied a clean transparent mark (vectorink-background-removed.png). Thickened + recolored to solid white by Python. Icon sits before "افكار برو" wordmark. */ .lnav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; margin-inline-end: 20px; gap: 10px; } .lnav-logo img { height: 44px !important; width: auto !important; flex-shrink: 0; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3)); transition: transform .2s ease; } .lnav-logo:hover img { transform: rotate(-6deg); } .lnav-logo-text { display: inline-flex !important; align-items: center; gap: 8px; /* ROUND 40 rev13: Tajawal 900 is a modern Arabic display face — much more premium-brand-feel than utilitarian Plex. Tighter letter-spacing gives it a confident wordmark presence. */ font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif; font-size: 30px; font-weight: 900; color: #F5EEDC; line-height: 1; letter-spacing: -0.02em; transition: transform .2s ease; } .lnav-logo:hover .lnav-logo-text { transform: translateY(-1px); } .lnav-logo-plus { display: inline-block !important; padding: 5px 12px 6px; border-radius: 9px; background: #22c55e; color: #0A0718; font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif; font-weight: 900; font-size: 21px; line-height: 1; letter-spacing: -0.01em; box-shadow: 0 2px 12px rgba(34, 197, 94, 0.4), 0 1px 0 rgba(0,0,0,0.15) inset; } .lnav-links { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; justify-content: flex-start; } .lnav-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.62); text-decoration: none; border-radius: 8px; transition: color .15s, background .15s; position: relative; white-space: nowrap; } .lnav-link:hover { color: #fff; background: rgba(139,92,246,0.08); } .lnav-link--active { color: #fff !important; background: rgba(139,92,246,0.15); box-shadow: inset 0 0 0 1px rgba(139,92,246,0.28); } .nav-new-badge { display: inline-block; font-size: 8px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #86efac; background: rgba(134,239,172,0.10); border: 1px solid rgba(134,239,172,0.25); padding: 2px 5px; border-radius: 8px; vertical-align: middle; line-height: 1; text-shadow: 0 0 6px rgba(134,239,172,0.5); } /* Claude 2026-04-19 — top-nav dropdown used by "إنشاء صور" (Create/Edit/Shots). Opens on hover (desktop) and on click (touch/mobile, via .open class). */ .lnav-dd { position: relative; display: inline-block; } .lnav-dd-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font-family: inherit; color: rgba(255,255,255,0.62); } .lnav-dd-btn:hover { color: #fff; background: rgba(139,92,246,0.08); } .lnav-dd--active > .lnav-dd-btn { color: #fff !important; background: rgba(139,92,246,0.15); box-shadow: inset 0 0 0 1px rgba(139,92,246,0.28); } .lnav-dd-caret { opacity: .75; transition: transform .15s; } .lnav-dd:hover .lnav-dd-caret, .lnav-dd.open .lnav-dd-caret { transform: rotate(180deg); opacity: 1; } .lnav-dd-menu { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; min-width: 280px; background: rgba(18,12,28,0.96); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 6px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,92,246,0.08); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 1200; } .lnav-dd:hover .lnav-dd-menu, .lnav-dd.open .lnav-dd-menu, .lnav-dd:focus-within .lnav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lnav-dd-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; color: rgba(255,255,255,0.85); text-decoration: none; font-size: 13px; font-weight: 600; transition: background .12s, color .12s; } .lnav-dd-item:hover { background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(196,162,78,0.07)); color: #fff; } .lnav-dd-item--active { background: rgba(139,92,246,0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(139,92,246,0.32); } .lnav-dd-icon { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.22); border-radius: 8px; font-size: 14px; line-height: 1; } .lnav-dd-title { display: block; font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; } .lnav-dd-sub { display: block; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.48); margin-top: 2px; line-height: 1.4; } @media (max-width: 860px) { .lnav-dd-menu { position: fixed; top: 56px; left: 8px; right: 8px; min-width: 0; } .lnav-dd:hover .lnav-dd-menu { opacity: 0; visibility: hidden; } .lnav-dd.open .lnav-dd-menu { opacity: 1; visibility: visible; } } .lnav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Avatar ring (credit indicator) */ .lnav-avatar-ring { position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; } .lnav-ring-svg { position: absolute; inset: 0; pointer-events: none; } .lnav-ring-progress { transition: stroke-dasharray 0.5s ease; } .lnav-avatar-ring .lnav-avatar { position: relative; z-index: 2; width: 32px; height: 32px; } .lnav-btn-ghost { color: rgba(255,255,255,0.55); font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 8px; text-decoration: none; border: 1px solid rgba(255,255,255,0.10); transition: all .15s; } .lnav-btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.58); } .lnav-btn { background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff; font-size: 13px; font-weight: 700; padding: 7px 18px; border-radius: 8px; text-decoration: none; box-shadow: 0 4px 14px rgba(109,40,217,0.35); transition: opacity .15s, transform .1s; } .lnav-btn:hover { opacity: .88; transform: translateY(-1px); } /* ─── NAV AVATAR DROPDOWN ───────────────────────────────────── */ .lnav-avatar-wrap { position: relative; } .lnav-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff; font-size: 13px; font-weight: 800; border: 2px solid rgba(139,92,246,0.50); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, transform .15s, box-shadow .15s; box-shadow: 0 0 0 0 rgba(139,92,246,0.4); } .lnav-avatar:hover { border-color: rgba(139,92,246,0.85); ; box-shadow: 0 0 0 4px rgba(139,92,246,0.18); } .lnav-dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px; background: rgba(12,7,30,0.96); border: 1px solid rgba(139,92,246,0.22); border-radius: 14px; padding: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 4px 16px rgba(80,20,180,0.30); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 400; } .lnav-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); } .lnav-dropdown-user { padding: 10px 12px 8px; } .lnav-dropdown-name { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; } .lnav-dropdown-email { font-size: 11px; color: rgba(255,255,255,0.58); } .lnav-dropdown-sep { height: 1px; background: rgba(139,92,246,0.15); margin: 4px 0; } /* ── Credits remaining indicator ── */ .lnav-credits-block { padding: 10px 12px 12px; border-top: 1px solid rgba(139,92,246,0.15); background: rgba(139,92,246,0.04); } .lnav-credits-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; margin-bottom: 6px; } .lnav-credits-pct { font-weight: 700; color: rgba(255,255,255,0.85); } .lnav-credits-val { color: var(--gold, #c8a24e); font-weight: 700; } .lnav-credits-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; position: relative; } .lnav-credits-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c8a24e, #f59e0b); transition: width .4s ease; box-shadow: 0 0 8px rgba(200,162,78,0.45); } .lnav-credits-fill.low { background: linear-gradient(90deg, #f59e0b, #ef4444); } /* WB-023 (وحش بلال 2026-05-05): industry-standard 3-tier color thresholds. Cursor / Runway / Replit pattern — green when comfortable, amber when approaching depletion, red when running low. Applied to BOTH the bar fill and the percentage label. */ .lnav-credits-fill.lnav-credits-tier-ok { background: linear-gradient(90deg, #4ade80, #22c55e); box-shadow: 0 0 8px rgba(74,222,128,0.35); } .lnav-credits-fill.lnav-credits-tier-warn { background: linear-gradient(90deg, #facc15, #f59e0b); box-shadow: 0 0 8px rgba(250,204,21,0.35); } .lnav-credits-fill.lnav-credits-tier-low { background: linear-gradient(90deg, #f87171, #ef4444); box-shadow: 0 0 8px rgba(248,113,113,0.35); } .lnav-credits-pct.lnav-credits-tier-ok { color: #4ade80; } .lnav-credits-pct.lnav-credits-tier-warn { color: #facc15; } .lnav-credits-pct.lnav-credits-tier-low { color: #f87171; } .lnav-credits-buy { display: block; text-align: center; margin-top: 8px; background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff; font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 8px; text-decoration: none; transition: opacity .15s, transform .12s; } .lnav-credits-buy:hover { opacity: .9; transform: translateY(-1px); } .lnav-dropdown-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; color: rgba(255,255,255,0.65); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .12s, color .12s; } .lnav-dropdown-item:hover { background: rgba(139,92,246,0.12); color: #fff; } .lnav-dropdown-item svg { flex-shrink: 0; color: rgba(255,255,255,0.58); } .lnav-dropdown-danger { color: rgba(248,113,113,0.75); } .lnav-dropdown-danger:hover { background: rgba(239,68,68,0.12); color: #f87171; } /* ─── HERO ───────────────────────────────────────────────────── */ .landing-hero { position: relative; z-index: 1; padding: 130px 24px 60px; text-align: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(139,92,246,0.10); border: 1px solid rgba(139,92,246,0.28); color: #a78bfa; font-size: 11px; font-weight: 700; padding: 5px 14px; border-radius: 22px; margin-bottom: 28px; letter-spacing: 1.8px; text-transform: uppercase; } .hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; animation: dotPulse 2s ease-in-out infinite; } @keyframes dotPulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(167,139,250,.5); } 50% { opacity: .6; box-shadow: 0 0 0 5px rgba(167,139,250,0); } } .hero-title { font-size: clamp(38px, 5.5vw, 72px); font-weight: 900; letter-spacing: -2px; line-height: 1.06; margin-bottom: 20px; background: linear-gradient(140deg, #ffffff 0%, rgba(255,255,255,0.88) 45%, #c4b5fd 75%, #a78bfa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-sub { font-size: clamp(14px, 1.8vw, 17px); color: rgba(255,255,255,0.58); max-width: 480px; margin: 0 auto 36px; line-height: 1.8; } .hero-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 52px; } .hero-btn-primary { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff; font-size: 15px; font-weight: 700; padding: 13px 30px; border-radius: 8px; text-decoration: none; box-shadow: 0 8px 28px rgba(109,40,217,0.38), 0 2px 8px rgba(0,0,0,0.25); transition: opacity .15s, transform .12s; } .hero-btn-primary:hover { opacity: .88; transform: translateY(-2px); } .hero-btn-ghost { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.11); color: rgba(255,255,255,0.7); font-size: 15px; font-weight: 600; padding: 12px 26px; border-radius: 8px; text-decoration: none; transition: all .15s; } .hero-btn-ghost:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.58); color: #fff; } /* Stats */ .hero-stats { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.025); } .h-stat { padding: 14px 28px; display: flex; flex-direction: column; align-items: center; } .h-num { font-size: 24px; font-weight: 800; color: #fff; line-height: 1; } .h-num span { color: #8b5cf6; } .h-lbl { font-size: 10px; color: rgba(255,255,255,0.58); margin-top: 4px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; } .h-div { width: 1px; background: rgba(255,255,255,0.07); align-self: stretch; } /* ─── SHOWCASE STRIP ─────────────────────────────────────────── */ .showcase-strip { position: relative; z-index: 1; } .strip-wrapper { position: relative; } .strip-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; padding: 8px 20px 20px; } .strip-cards::-webkit-scrollbar { display: none; } .strip-card { flex: 0 0 calc(33.333% - 8px); min-width: 240px; scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; background: rgba(15,10,35,0.85); border-radius: 14px; overflow: hidden; border: 1px solid rgba(139,92,246,0.14); transition: transform .25s cubic-bezier(.22,.68,0,1.2), border-color .25s, box-shadow .25s; backdrop-filter: blur(8px); } .strip-card:hover { transform: translateY(-4px); border-color: rgba(139,92,246,0.50); box-shadow: 0 12px 36px rgba(80,20,180,0.35); } .strip-card-media { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; } .strip-media-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .strip-card-tint { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(5,3,15,0.6) 100%); pointer-events: none; } .strip-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,0.45); border: 1.5px solid rgba(255,255,255,0.58); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; z-index: 4; pointer-events: none; } .strip-card:hover .strip-play-btn { opacity: 1; } .strip-card-info { padding: 12px 14px 14px; flex: 1; } .strip-card-title { font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; } .strip-card-sub { font-size: 11px; color: rgba(255,255,255,0.58); line-height: 1.5; } .strip-media-loader { position: absolute; bottom: 7px; right: 7px; display: flex; align-items: center; gap: 4px; background: rgba(5,2,20,0.75); border: 1px solid rgba(139,92,246,0.28); border-radius: 22px; padding: 3px 8px 3px 5px; z-index: 4; backdrop-filter: blur(4px); } .strip-media-loader.hidden { opacity: 0; } .loader-ring { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; animation: ldPulse 1s ease-in-out infinite; flex-shrink: 0; } .loader-err-dot { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; flex-shrink: 0; } @keyframes ldPulse { 0%,100% { opacity: 1; ; } 50% { opacity: .35; ; } } .loader-lbl { font-size: 8px; font-weight: 700; letter-spacing: .5px; color: rgba(167,139,250,0.85); white-space: nowrap; } .loader-bar-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.05); z-index: 4; pointer-events: none; } .loader-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #6d28d9, #a78bfa); transition: width .25s linear; } .strip-arrow { position: absolute; top: 0; bottom: 0; width: 48px; z-index: 20; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .strip-arrow-left { left: 0; background: linear-gradient(to right, rgba(5,3,15,.9) 0%, transparent 100%); display: none; } .strip-arrow-right { right: 0; background: linear-gradient(to left, rgba(5,3,15,.9) 0%, transparent 100%); } .strip-arrow svg { color: rgba(255,255,255,0.6); } /* ─── HERO BANNER ────────────────────────────────────────────── */ .hero-banner--stacked { border-top: 1px solid rgba(139,92,246,0.12); } .hero-banner { position: relative; display: flex; min-height: 360px; background: linear-gradient(135deg, #07021e 0%, #0c0328 60%, #060118 100%); border-bottom: 1px solid rgba(139,92,246,0.10); overflow: hidden; transition: border-color .25s; } .hero-banner:hover { border-color: rgba(139,92,246,0.40); } .hero-banner-body { flex: 0 0 38%; display: flex; flex-direction: column; justify-content: center; padding: 48px 36px 48px 44px; position: relative; z-index: 5; gap: 14px; } .hero-banner-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px; border-radius: 22px; border-width: 1px; border-style: solid; margin-bottom: -2px; } .hero-banner-badge::before { content: '✦'; font-size: 7px; opacity: .8; } .hero-banner-title { font-weight: 900; letter-spacing: -1px; line-height: 1.06; } .hero-banner-sub { font-size: 13px; line-height: 1.7; max-width: 320px; } .hero-banner-btn { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 14px; font-weight: 700; padding: 12px 28px; border-radius: 8px; text-decoration: none; justify-content: center; transition: opacity .15s, transform .1s; } .hero-banner-btn:hover { opacity: .86; transform: translateY(-2px); } .hero-banner-media { flex: 1; min-height: 320px; position: relative; overflow: hidden; background: #040114; } .hero-banner-media-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .hero-banner-media-fade { position: absolute; inset: 0; background: linear-gradient(to right, #06021a 0%, rgba(8,3,26,0.90) 10%, rgba(12,5,35,0.65) 22%, rgba(18,7,48,0.35) 38%, transparent 65%); z-index: 2; pointer-events: none; } /* ─── SECTION ────────────────────────────────────────────────── */ .land-section { position: relative; z-index: 1; padding: 68px 24px; } .land-dark { background: rgba(8,5,22,0.80); backdrop-filter: blur(10px); } .land-dark::before, .land-dark::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(139,92,246,0.20), transparent); } .land-dark::before { top: 0; } .land-dark::after { bottom: 0; } .land-container { max-width: 1180px; margin: 0 auto; } .sec-header { text-align: center; margin-bottom: 48px; } .sec-eyebrow { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #8b5cf6; margin-bottom: 10px; padding: 3px 12px; border-radius: 22px; background: rgba(139,92,246,0.10); border: 1px solid rgba(139,92,246,0.22); } .sec-title { font-size: clamp(24px, 3.8vw, 40px); font-weight: 800; color: #fff; letter-spacing: -0.5px; line-height: 1.18; margin-bottom: 10px; } .sec-sub { font-size: 15px; color: rgba(255,255,255,0.58); max-width: 420px; margin: 0 auto; line-height: 1.8; } /* ─── TOOLS ROW ─────────────────────────────────────────────── */ .tools-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tool-card { position: relative; display: flex; align-items: center; gap: 18px; padding: 26px 28px; border-radius: 14px; text-decoration: none; overflow: hidden; background: rgba(15,9,36,0.80); border: 1px solid rgba(255,255,255,0.07); backdrop-filter: blur(10px); transition: transform .22s, border-color .22s, box-shadow .22s; } .tool-card:hover { transform: translateY(-3px); } .tool-card-video:hover { border-color: rgba(139,92,246,0.45); box-shadow: 0 16px 40px rgba(100,20,200,0.25); } .tool-card-image:hover { border-color: rgba(167,139,250,0.40); box-shadow: 0 16px 40px rgba(139,92,246,0.20); } .tool-glow { position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -60px; top: -60px; opacity: 0; transition: opacity .3s; pointer-events: none; } .tool-card:hover .tool-glow { opacity: 1; } .tool-glow-v { background: radial-gradient(circle, rgba(139,92,246,0.20) 0%, transparent 70%); } .tool-glow-i { background: radial-gradient(circle, rgba(167,139,250,0.16) 0%, transparent 70%); } .tool-icon { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; } .tool-icon-v { background: rgba(109,40,217,0.15); border: 1px solid rgba(109,40,217,0.32); color: #a78bfa; } .tool-icon-i { background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.28); color: #c4b5fd; } .tool-body { flex: 1; position: relative; z-index: 1; } .tool-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8b5cf6; margin-bottom: 5px; } .tool-title { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.3px; margin-bottom: 5px; } .tool-desc { font-size: 12px; color: rgba(255,255,255,0.58); line-height: 1.6; } .tool-arrow { color: rgba(255,255,255,0.58); position: relative; z-index: 1; flex-shrink: 0; transition: color .2s, transform .2s; } .tool-card:hover .tool-arrow { color: #8b5cf6; transform: translateX(5px); } .tool-tags { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; } .tool-tag { font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 2px 8px; border-radius: 8px; background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.20); color: rgba(167,139,250,0.8); } /* ─── STEPS ──────────────────────────────────────────────────── */ .steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; } .steps-row::before { content: ''; position: absolute; top: 34px; left: calc(100%/6 + 26px); right: calc(100%/6 + 26px); height: 1px; background: linear-gradient(90deg, rgba(139,92,246,.5), rgba(139,92,246,.15)); z-index: 0; } .step-item { background: rgba(14,8,32,0.75); border: 1px solid rgba(139,92,246,0.12); border-radius: 14px; padding: 26px 22px; text-align: center; position: relative; z-index: 1; backdrop-filter: blur(8px); transition: border-color .2s, transform .2s; } .step-item:hover { border-color: rgba(139,92,246,0.36); transform: translateY(-3px); } .step-num { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 18px; background: rgba(109,40,217,0.14); border: 1.5px solid rgba(109,40,217,0.32); display: flex; align-items: center; justify-content: center; font-size: 20px; } .step-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 7px; } .step-desc { font-size: 12px; color: rgba(255,255,255,0.58); line-height: 1.7; } /* ─── FEATURES ───────────────────────────────────────────────── */ .features-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .feat-card { background: rgba(14,8,32,0.75); border: 1px solid rgba(139,92,246,0.10); border-radius: 14px; padding: 24px 20px; backdrop-filter: blur(8px); transition: border-color .2s, transform .2s; } .feat-card:hover { border-color: rgba(139,92,246,0.32); transform: translateY(-2px); } .feat-icon { width: 44px; height: 44px; border-radius: 8px; margin-bottom: 16px; background: rgba(109,40,217,0.12); border: 1px solid rgba(109,40,217,0.22); display: flex; align-items: center; justify-content: center; font-size: 20px; } .feat-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 7px; } .feat-desc { font-size: 12px; color: rgba(255,255,255,0.58); line-height: 1.7; } /* ─── MODELS ─────────────────────────────────────────────────── */ .models-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .models-scroll::-webkit-scrollbar { display: none; } .model-chip { flex-shrink: 0; background: rgba(14,8,32,0.80); border: 1px solid rgba(139,92,246,0.13); border-radius: 14px; padding: 16px 18px; min-width: 190px; backdrop-filter: blur(8px); transition: border-color .18s, transform .18s; cursor: default; } .model-chip:hover { border-color: rgba(139,92,246,0.35); transform: translateY(-2px); } .model-chip.featured { border-color: rgba(139,92,246,0.35); background: rgba(109,40,217,0.08); } .model-chip-cat { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8b5cf6; margin-bottom: 8px; padding: 2px 8px; border-radius: 8px; background: rgba(139,92,246,0.10); display: inline-block; } .model-chip-name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 8px; } .model-chip-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; } .model-chip-tags span { font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.45); } .model-chip-price { font-size: 15px; font-weight: 800; color: #a78bfa; } /* ─── PROOF STRIP ────────────────────────────────────────────── */ .proof-strip { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(8,5,22,0.60); backdrop-filter: blur(8px); } .proof-item { padding: 28px 44px; text-align: center; } .proof-num { font-size: 30px; font-weight: 900; color: #fff; letter-spacing: -1px; line-height: 1; } .proof-num span { color: #8b5cf6; } .proof-lbl { font-size: 10px; color: rgba(255,255,255,0.58); margin-top: 4px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; } .proof-divider { width: 1px; height: 44px; background: rgba(255,255,255,0.07); } /* ─── CTA ────────────────────────────────────────────────────── */ .land-cta { position: relative; z-index: 1; padding: 100px 24px; text-align: center; overflow: hidden; } .cta-orb { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(109,40,217,0.16) 0%, transparent 65%); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: nbDrift 10s ease-in-out infinite; pointer-events: none; } .cta-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(139,92,246,0.10); border: 1px solid rgba(139,92,246,0.25); color: #a78bfa; font-size: 10px; font-weight: 700; padding: 5px 14px; border-radius: 22px; margin-bottom: 20px; letter-spacing: 1.8px; text-transform: uppercase; } .cta-title { font-size: clamp(28px, 4.5vw, 52px); font-weight: 900; letter-spacing: -1px; color: #fff; margin-bottom: 14px; line-height: 1.12; } .cta-sub { font-size: 15px; color: rgba(255,255,255,0.58); max-width: 360px; margin: 0 auto 40px; line-height: 1.8; } /* ─── FOOTER ─────────────────────────────────────────────────── */ .land-footer { background: rgba(4,2,14,0.95); border-top: 1px solid rgba(255,255,255,0.05); padding: 28px 24px; position: relative; z-index: 1; } .footer-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .footer-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; } /* ROUND 40 rev14 (2026-04-24) — footer: icon + wordmark, smaller. */ .footer-logo { display: flex; align-items: center; text-decoration: none; gap: 8px; } .footer-logo img { height: 30px !important; width: auto !important; flex-shrink: 0; } .footer-logo-text { display: inline-flex !important; align-items: center; gap: 6px; font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif; font-size: 21px; font-weight: 900; color: #F5EEDC; line-height: 1; letter-spacing: -0.02em; } .footer-logo-plus { display: inline-block !important; padding: 3px 9px 4px; border-radius: 7px; background: #22c55e; color: #0A0718; font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif; font-weight: 900; font-size: 15px; line-height: 1; box-shadow: 0 1px 6px rgba(34, 197, 94, 0.3); } .footer-links { display: flex; gap: 1px; flex: 1; flex-wrap: wrap; } .footer-links a { padding: 5px 10px; font-size: 12px; color: rgba(255,255,255,0.58); text-decoration: none; border-radius: 8px; transition: color .15s; } .footer-links a:hover { color: rgba(255,255,255,0.70); } .footer-copy { font-size: 11px; color: rgba(255,255,255,0.18); } /* ─── PLATFORM INTRO (replaces landing-hero) ──────────────────── */ .plat-intro { position: relative; z-index: 1; display: flex; align-items: center; gap: 40px; padding: 100px 60px 60px; max-width: 1280px; margin: 0 auto; min-height: 520px; } .plat-intro-text { flex: 0 0 38%; display: flex; flex-direction: column; gap: 0; } .plat-title { font-size: clamp(44px, 5.5vw, 72px); font-weight: 900; color: #fff; line-height: 1.0; letter-spacing: -2.5px; margin: 20px 0 18px; } .plat-title em { font-style: normal; background: linear-gradient(135deg, #8b5cf6, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .plat-sub { font-size: 15px; color: rgba(255,255,255,0.45); line-height: 1.7; margin-bottom: 28px; max-width: 340px; } .plat-model-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; } .plat-model-tag { font-size: 10px; font-weight: 600; letter-spacing: .5px; padding: 4px 10px; border-radius: 22px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.58); } .plat-intro-media { flex: 1; position: relative; border-radius: 22px; overflow: hidden; background: rgba(14,8,32,0.80); border: 1px solid rgba(139,92,246,0.20); aspect-ratio: 16/9; box-shadow: 0 24px 80px rgba(80,20,180,0.30); } .plat-intro-media video, .plat-intro-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .plat-intro-media-placeholder { width: 100%; height: 100%; min-height: 300px; background: linear-gradient(135deg, rgba(109,40,217,0.15) 0%, rgba(30,20,80,0.4) 100%); display: flex; align-items: center; justify-content: center; font-size: 80px; } /* ─── SHOWCASE GRID ─────────────────────────────────────────────── */ .plat-showcase { position: relative; z-index: 1; padding: 0 24px 60px; max-width: 1280px; margin: 0 auto; } .showcase-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 6px; } .showcase-card { position: relative; overflow: hidden; border-radius: 8px; cursor: pointer; background: rgba(14,8,32,0.80); text-decoration: none; display: block; } .showcase-card--wide { grid-column: span 2; } .showcase-card--hero { grid-column: span 2; grid-row: span 2; } .showcase-card video, .showcase-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .showcase-card:hover video, .showcase-card:hover img { ; } .showcase-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,3,15,0.85) 0%, transparent 55%); opacity: 0; transition: opacity .25s; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; } .showcase-card:hover .showcase-card-overlay { opacity: 1; } .showcase-card-caption { font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .showcase-card-model { font-size: 10px; color: rgba(167,139,250,0.8); margin-top: 2px; letter-spacing: .5px; } .showcase-card-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; opacity: .3; } /* ═══════════════════════════════════════════════════════════════ HIGGSFIELD-STYLE PLATFORM LAYOUT ═══════════════════════════════════════════════════════════════ */ /* ── Top Slider ── */ .hf-top-slider-wrap { position: relative; z-index: 1; margin-top: 60px; /* R166c (صمومي 2026-05-05): removed `overflow:hidden` from the wrap and moved horizontal-scroll responsibility onto the track itself — same pattern Z121 uses for `.hfs-grid-wrap` / `.hfs-grid`. The wrap now exists purely as a positioning context for the absolute-pinned prev/next buttons. */ } .hf-top-track { display: flex; gap: 6px; /* R166c: native horizontal scroll. Browser handles RTL automatically so the JS no longer fights with translateX direction math. The scrollbar is hidden — arrows are the only chrome. */ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .hf-top-track::-webkit-scrollbar { display: none; } /* R166c: snap each card to the start edge so the slider stops on a card boundary rather than mid-card. */ .hf-top-card { scroll-snap-align: start; } .hf-top-card { flex: 0 0 calc(33.333% - 4px); display: flex; flex-direction: column; text-decoration: none; cursor: pointer; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .hf-top-card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,0.55); box-shadow: 0 12px 36px rgba(109,40,217,0.35); } /* R166 (صمومي 2026-05-05): re-enable slider arrows so cards 4+ are reachable. Bilal earlier asked "احذف الاسهم" (rev33) when there were only 3 items + 3 visible — no scroll needed, arrows just visual noise. After R166 raised the cap to 12 cards, hidden arrows trapped the 4th+ card off-screen. Bilal repro: "هسة اني ضفت كارد جديد بس ما ظهر بالاندنك بيج". Now: arrows render with display:flex, but the existing JS opacity-toggle (landing.html ~line 660-663) already handles the auto-hide — when idx=0 the prev arrow is opacity:0 + pointer-events:none, when idx=maxIdx the next arrow hides. So with exactly 3 items + 3 visible, idx=0=maxIdx and both arrows stay invisible — Bilal's original ask is preserved for the 3-card case. With 4+ items the relevant arrow auto-appears. */ .hf-slider-btn { display: flex; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 38px; height: 38px; border-radius: 50%; background: rgba(10,6,30,0.82); backdrop-filter: blur(8px); border: 1px solid rgba(139,92,246,0.35); color: #a78bfa; cursor: pointer; align-items: center; justify-content: center; transition: opacity .2s, background .15s, border-color .15s; } .hf-slider-btn:hover { background: rgba(109,40,217,0.5); border-color: rgba(139,92,246,0.7); } /* R166c (صمومي 2026-05-05): use logical inset-inline-* so the buttons sit on the correct visual edge regardless of page direction. - prev button (rewind toward start): visual leading edge - next button (advance toward end): visual trailing edge In RTL: prev = visual RIGHT, next = visual LEFT (matches reading flow). In LTR: prev = visual LEFT, next = visual RIGHT. This matches how Z121 wires `.hfs-arrow-prev/next` for the spotlight sliders that Bilal said work the way he wants. */ .hf-slider-prev { left: auto; right: auto; inset-inline-start: 8px; } .hf-slider-next { left: auto; right: auto; inset-inline-end: 8px; } /* R166c: mirror chevron icons in RTL so they point in the visually-correct direction (matches Z122 on the spotlight rows). */ html[dir="rtl"] .hf-slider-btn svg { transform: scaleX(-1); } .hf-top-card--empty { cursor: default; } .hf-top-media { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #0a0a18; position: relative; max-height: 340px; } /* added by Zain — don't remove (showcase Phase 1.5 20260418): switched object-fit from 'cover' to 'contain' so portrait 9:16 generated videos show in full without aggressive zoom. */ .hf-top-media video, .hf-top-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; display: block; } .hf-top-card:hover .hf-top-media video, .hf-top-card:hover .hf-top-media img { ; } /* added by Zain — don't remove (showcase Phase 1.6 — YouTube ambient blur 20260418): Fills the side area (when a portrait video sits in a 16:9 card) with a blurred, enlarged copy of the same media — same pattern YouTube uses on its watch page, Netflix on its row cards, Apple TV everywhere. Two DOM elements per card: .htc-bgfill (blurred fill, z=0) and .htc-main (sharp foreground, z=1). Browsers cache the source file so only one network fetch happens per card. */ .hf-top-media .htc-bgfill { object-fit: cover; filter: blur(28px) saturate(1.3) brightness(.55); ; z-index: 0; transition: none; } .hf-top-card:hover .hf-top-media .htc-bgfill { ; /* keep background static — don't double-scale on hover */ } .hf-top-media .htc-main { z-index: 1; } /* Scale the main content on hover, leave the bgfill alone */ .hf-top-card:hover .hf-top-media .htc-main { ; } .hf-top-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 52px; opacity: .22; background: linear-gradient(135deg, #0d0630 0%, #1a0a4a 100%); } /* ── Card Overlay System (htc) ── */ /* Type badge — top-left */ .htc-type-badge { position: absolute; top: 10px; left: 10px; z-index: 4; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 8px; border-radius: 8px; backdrop-filter: blur(6px); } .htc-video { background: rgba(124,58,237,0.75); color: #e9d5ff; border: 1px solid rgba(167,139,250,0.4); } .htc-image { background: rgba(20,100,220,0.75); color: #bfdbfe; border: 1px solid rgba(96,165,250,0.4); } /* Info overlay — always visible at bottom. Claude 2026-04-20 rev37: rev36's `text-align: start` didn't work because the parent `#topSliderTrack` has an explicit `dir="ltr"` (needed for the slider animation), so the overlay inherited LTR and `start` = left. Force the overlay back to RTL explicitly for AR pages and use a separate rule to flip it for LTR. Works regardless of what the track sets. */ .htc-info-overlay { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 65%, transparent 100%); padding: 36px 16px 16px; transition: opacity .25s; direction: rtl; text-align: right; } /* Flip on English pages so the overlay respects the active site language. */ html[dir="ltr"] .htc-info-overlay, html[lang="en"] .htc-info-overlay { direction: ltr; text-align: left; } .hf-top-card:hover .htc-info-overlay { opacity: 0; } /* Claude 2026-04-20 rev32: Satoshi applied to top-slider card titles (previously only on .hfs-title which is a DIFFERENT element — user couldn't see the change because "SEEDANCE 2.0" etc. live on the hero slider, class .htc-title). Arabic falls through to Cairo. */ .htc-title { font-family: 'Satoshi', 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 13px; font-weight: 900; font-style: italic; letter-spacing: -0.3px; color: #fff; margin-bottom: 3px; /* rev40: drop the line-clamp entirely — user reported "بعدها مقصوصة شوية" (still trimmed a bit). Let text wrap to whatever height it needs; the gradient overlay expands to fit. */ text-align: inherit; direction: inherit; line-height: 1.2; word-break: break-word; overflow-wrap: break-word; } .htc-sub { font-family: 'Satoshi', 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.50); text-align: inherit; direction: inherit; line-height: 1.35; word-break: break-word; overflow-wrap: break-word; } /* Hover overlay — appears on hover */ .htc-hover-overlay { position: absolute; inset: 0; z-index: 5; background: rgba(8,8,20,0.70); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity .22s; } .hf-top-card:hover .htc-hover-overlay { opacity: 1; } /* Action buttons row */ .htc-actions { display: flex; gap: 12px; align-items: center; } .htc-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, color .15s, transform .12s; flex-shrink: 0; } .htc-btn:hover { background: rgba(124,58,237,0.60); border-color: rgba(167,139,250,0.6); color: #fff; ; } /* Model badge at bottom of hover */ .htc-model-badge { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #a78bfa; } /* ── Info bar (below media, inside card) ── */ .hf-top-info { padding: 10px 14px 12px; background: rgba(12,8,28,0.97); border-top: 1px solid rgba(139,92,246,0.10); } .hf-top-title { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 2px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hf-top-sub { font-size: 11px; color: rgba(255,255,255,0.58); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── MIXED ── */ /* added by Zain — don't remove (Phase 2.6 rev4 20260418): - .land-page matches nav container (max 1320px + padding 32px). - Promo box REMOVED from .hf-mixed — slider takes full width, extra room to scroll through many hero items. - margin-top 72px for breathing room from nav. */ /* rev5 20260418: user said sides still too wide at 1320px max on big monitors. Removed max-width so .land-page fills the viewport minus a small 32px gutter each side (same as nav padding). Edge-to-edge feel on wide screens, still has breathing room. */ .land-page { max-width: 100%; margin: 0; padding: 0 32px; box-sizing: border-box; } .hf-mixed { display: block; margin-top: 72px; position: relative; z-index: 1; } .hf-mixed .hf-top-slider-wrap { margin-top: 0; } /* Slider is now full-width — restore 16:9 aspect for a cinematic feel */ .hf-mixed .hf-top-media { aspect-ratio: 16/9; max-height: 340px; } @media (max-width: 960px) { .hf-mixed { margin-top: 48px; } .land-page { padding: 0 16px; } } .hf-promo { background: linear-gradient(145deg, #0d0630 0%, #180b4a 55%, #080220 100%); padding: 0; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; min-height: 500px; } .hf-promo-top { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 28px 36px 0; position: relative; z-index: 1; } .hf-promo-top-img { max-width: 100%; max-height: 200px; border-radius: 8px; object-fit: cover; margin-bottom: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .hf-promo-top-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: rgba(196,181,253,0.8); padding: 4px 10px; background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.25); border-radius: 22px; display: inline-block; } .hf-promo-bottom { padding: 28px 36px 36px; position: relative; z-index: 1; display: flex; flex-direction: column; } .hf-promo-orb { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(109,40,217,0.40) 0%, transparent 70%); top: -100px; left: -60px; pointer-events: none; } .hf-promo-label { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(167,139,250,0.60); margin-bottom: 14px; } .hf-promo-title { font-size: clamp(34px, 3.8vw, 52px); font-weight: 900; color: #fff; line-height: 0.95; letter-spacing: -2px; margin-bottom: 16px; } .hf-promo-title span { background: linear-gradient(135deg, #8b5cf6, #c4b5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hf-promo-desc { font-size: 13px; color: rgba(255,255,255,0.58); line-height: 1.75; margin-bottom: 30px; max-width: 240px; } .hf-promo-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff; font-size: 13px; font-weight: 700; padding: 12px 22px; border-radius: 8px; text-decoration: none; align-self: flex-start; box-shadow: 0 6px 20px rgba(109,40,217,0.45); transition: opacity .15s, transform .1s; margin-bottom: 22px; } .hf-promo-btn:hover { opacity: .88; transform: translateY(-2px); } .hf-promo-models { display: flex; flex-wrap: wrap; gap: 5px; } .hf-promo-models span { font-size: 9px; font-weight: 600; letter-spacing: .4px; padding: 3px 9px; border-radius: 22px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.58); } .hf-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; } .hf-mini-card { position: relative; overflow: hidden; background: #0a0a18; text-decoration: none; cursor: pointer; display: block; min-height: 120px; border-radius: 8px; } .hf-mini-card video, .hf-mini-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; } .hf-mini-card:hover video, .hf-mini-card:hover img { ; } .hf-mini-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; opacity: .2; background: linear-gradient(135deg, #0d0630, #1a0a4a); } /* ── BOTTOM ROW ── */ .hf-bottom-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 3px; position: relative; z-index: 1; } .hf-bottom-card { position: relative; overflow: hidden; aspect-ratio: 16/9; background: #0a0a18; text-decoration: none; cursor: pointer; display: block; } .hf-bottom-card video, .hf-bottom-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; } .hf-bottom-card:hover video, .hf-bottom-card:hover img { ; } /* ─── RESPONSIVE ─────────────────────────────────────────────── */ @media (max-width: 900px) { .hf-top-card { flex: 0 0 calc(50% - 3px); } .hf-mixed { grid-template-columns: 1fr; } .hf-mini-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); } .hf-bottom-row { grid-template-columns: repeat(3, 1fr); } .strip-card { flex: 0 0 calc(50% - 6px); } .tools-row { grid-template-columns: 1fr; } .features-row { grid-template-columns: 1fr 1fr; } .steps-row { grid-template-columns: 1fr; } .steps-row::before { display: none; } .hero-banner { flex-direction: column; min-height: auto; } .hero-banner-body { flex: none; padding: 32px 22px 22px; } .hero-banner-media { min-height: 220px; } .plat-intro { flex-direction: column; padding: 80px 24px 40px; min-height: auto; } .plat-intro-text { flex: none; } .plat-intro-media { width: 100%; } .showcase-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } .showcase-card--hero { grid-column: span 2; } .showcase-card--wide { grid-column: span 2; } } /* ────────────────────────────────────────────────────────────── MOBILE / TABLET NAV Hamburger drawer kicks in at ≤1024px so tablet overflow is gone. ────────────────────────────────────────────────────────────── */ .lnav-hamburger { display: none; width: 44px; height: 44px; border-radius: 8px; background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #fff; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; flex-shrink: 0; } .lnav-hamburger:hover { background: rgba(255,255,255,0.06); } .lnav-hamburger svg { width: 20px; height: 20px; } /* Drawer itself — hidden by default, slides in from the right (RTL) */ .mobile-drawer { display: none; position: fixed; top: 0; bottom: 0; right: 0; width: 82%; max-width: 320px; background: linear-gradient(180deg, #0e0828 0%, #06021a 100%); border-left: 1px solid rgba(124,58,237,0.25); z-index: 9999; transform: translateX(100%); transition: transform 0.3s ease; flex-direction: column; overflow-y: auto; } .mobile-drawer.open { display: flex; transform: translateX(0); } .mobile-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 9998; } .mobile-drawer-backdrop.show { display: block; } .md-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); } .md-logo { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 1px; } .md-logo span { color: #a78bfa; } .md-close { width: 44px; height: 44px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 24px; font-weight: 300; } .md-close:hover { background: rgba(239,68,68,0.12); color: #fca5a5; } .md-nav { display: flex; flex-direction: column; padding: 14px 0; flex: 1; } .md-nav-section { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.58); padding: 14px 22px 8px; } .md-link { display: flex; align-items: center; gap: 12px; padding: 14px 22px; color: rgba(255,255,255,0.85); font-size: 15px; font-weight: 600; min-height: 48px; transition: background 0.12s, color 0.12s; text-decoration: none; } .md-link:hover, .md-link--active { background: rgba(124,58,237,0.12); color: #fff; border-right: 3px solid #7c3aed; } .md-link .md-icon { font-size: 18px; opacity: 0.85; } .md-link .md-new { margin-right: auto; font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #a78bfa); color: #fff; } .md-foot { padding: 16px 20px 22px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 10px; } .md-foot .md-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; min-height: 48px; } .md-btn--primary { background: linear-gradient(90deg, #7c3aed, #9333ea); color: #fff; box-shadow: 0 6px 20px rgba(124,58,237,0.35); } .md-btn--ghost { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); } /* ────────────────────────────────────────────────────────────── Keep all 10 links visible from 1280px up to 1600px by scaling down font / padding / gap instead of dropping items. User requested: "اريدهن كلهن موجودات" (keep them all visible). ────────────────────────────────────────────────────────────── */ @media (max-width: 1600px) and (min-width: 1367px) { .landing-nav-inner { gap: 22px; padding: 0 24px; } .lnav-link { padding: 7px 11px; font-size: 12.5px; } .lnav-links { gap: 2px; } .nav-new-badge { font-size: 7px; padding: 1.5px 4px; letter-spacing: .5px; } } /* ────────────────────────────────────────────────────────────── added by Zain 2026-04-26 — don't remove (Z77). Prioritized navbar collapse — replaces the old "shrink-everything" approach (Z73-and-earlier) which crammed all 11 items into a tiny row at 1025-1280px. Now low-priority items move into a "المزيد" overflow dropdown instead of staying in the bar. Priority tiers (set on each .lnav-link / .lnav-dd via data-priority="primary|secondary|tertiary" in base.html): • primary → always visible (إنشاء صور, إنشاء فيديوهات, الأسعار, Cinema Studio for owner) • secondary → hidden ≤1180px (حزمة البراند, أصوات, كابشن) • tertiary → hidden ≤1366px (شخصيات, كورسات, المجتمع, معرضي, تواصل) The "المزيد" dropdown (.lnav-overflow) is hidden by default and appears only when the viewport hides at least one item. Inside it, .lnav-overflow-group blocks have data-clone="secondary|tertiary" so we only show groups whose corresponding tier is ALSO hidden in the main bar — no duplicate nav entries between bar and dropdown. Hamburger threshold moved from 1024 → 1100. Below 1100, prioritized nav steps aside and the existing mobile drawer handles everything. ──────────────────────────────────────────────────────────── */ .lnav-overflow { display: none; } .lnav-overflow-menu { min-width: 270px; } .lnav-overflow-group { padding: 4px 0; } .lnav-overflow-group + .lnav-overflow-group { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 4px; padding-top: 8px; } .lnav-overflow-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(167,139,250,0.85); padding: 4px 12px 6px; } /* 1181–1366px: hide tertiary, show "المزيد" with tertiary content only */ @media (max-width: 1366px) and (min-width: 1181px) { .landing-nav-inner { gap: 18px; padding: 0 20px; } .lnav-link { padding: 7px 10px; font-size: 12.5px; } .lnav-links { gap: 2px; } .nav-new-badge { font-size: 7px; padding: 1.5px 4px; letter-spacing: .5px; } .lnav-link[data-priority="tertiary"], .lnav-dd[data-priority="tertiary"] { display: none !important; } .lnav-overflow { display: inline-flex; } .lnav-overflow-group[data-clone="secondary"] { display: none; } } /* 1101–1180px: hide secondary AND tertiary, show full "المزيد" */ @media (max-width: 1180px) and (min-width: 1101px) { .landing-nav-inner { gap: 14px; padding: 0 16px; } .lnav-link { padding: 7px 11px; font-size: 12.5px; } .lnav-links { gap: 2px; } .lnav-link[data-priority="secondary"], .lnav-link[data-priority="tertiary"], .lnav-dd[data-priority="secondary"], .lnav-dd[data-priority="tertiary"] { display: none !important; } .lnav-overflow { display: inline-flex; } /* both groups visible inside the dropdown */ /* Admin "لوحة التحكم →" button hides here to save space — still reachable via the avatar dropdown. */ .lnav-actions .lnav-btn:not([onclick*="toggleLnavDropdown"]) { display: none; } } /* added by Zain — don't remove (Z115b) — was 1100 (Z115 raised to 1180), now 1366. The 1181–1366 zone still crammed link-bar+admin+bell+avatar past viewport for owners; bumping kills that cram zone entirely. The 1101–1180 and 1181–1366 secondary/tertiary-hide rules above are now superseded by hamburger but left harmlessly in place. */ @media (max-width: 1366px) { .lnav-hamburger { display: flex; } .lnav-links { display: none !important; } .lnav-overflow { display: none !important; } .lnav-actions .lnav-btn-ghost { display: none; } } /* ─── Mobile nav tightening ─────────────────────────────── */ @media (max-width: 768px) { .landing-nav-inner { padding: 0 12px; gap: 10px; } .lnav-actions { gap: 8px; } /* Hide the "Admin panel →" button text on mobile — too wide; the drawer already has an admin link. */ .lnav-actions > .lnav-btn:not([onclick*="toggleLnavDropdown"]) { display: none; } /* Avatar ring — large enough to be a proper tap target */ .lnav-avatar-ring { width: 44px; height: 44px; } .lnav-avatar-ring .lnav-avatar { width: 34px; height: 34px; font-size: 13px; } /* ROUND 40 rev12 — mobile: compact. */ .lnav-logo { margin-inline-end: 8px; } .lnav-logo-text { font-size: 19px !important; gap: 5px !important; } .lnav-logo-plus { font-size: 14px !important; padding: 3px 7px 4px !important; } /* Sign In ghost already hidden at ≤1024px via rule above */ } @media (max-width: 600px) { .hf-top-card { flex: 0 0 100%; } .hf-promo { min-height: 380px; padding: 36px 24px; } /* Instead of hiding, let the row scroll horizontally like strip-cards */ .hf-bottom-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .hf-bottom-row > * { scroll-snap-align: start; flex: 0 0 80%; } .strip-card { flex: 0 0 calc(82% - 6px); } .land-section { padding: 52px 18px; } .features-row { grid-template-columns: 1fr; } .proof-item { padding: 22px 24px; } .proof-divider { display: none; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; } .r1, .r2 { display: none; } } /* ═══════════════════════════════════════════════════════════════════ added by Zain — don't remove (Phase 2.9 — PWA install banner 20260418) Prominent banner between hero and spotlights. Gradient background, clear CTA button. Hidden when the page is running as installed PWA. ═══════════════════════════════════════════════════════════════════ */ .pwa-install-banner { margin: 28px 0; border-radius: 14px; background: linear-gradient(135deg, rgba(124,58,237,.22) 0%, rgba(167,139,250,.12) 50%, rgba(74,222,128,.08) 100%); border: 1px solid rgba(167,139,250,.3); position: relative; overflow: hidden; } .pwa-install-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(167,139,250,.15), transparent 50%); pointer-events: none; } .pwa-install-banner-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; padding: 20px 24px; flex-wrap: wrap; } .pwa-install-banner-icon { font-size: 36px; line-height: 1; flex-shrink: 0; } .pwa-install-banner-text { flex: 1; min-width: 200px; } .pwa-install-banner-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 3px; letter-spacing: -.3px; } .pwa-install-banner-sub { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.5; } .pwa-install-banner-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 14px; background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); color: #fff; font-size: 14px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(124,58,237,.35); transition: transform .15s, box-shadow .15s; flex-shrink: 0; } .pwa-install-banner-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,.5); } @media (max-width: 600px) { .pwa-install-banner-inner { padding: 16px; gap: 12px; } .pwa-install-banner-title { font-size: 16px; } .pwa-install-banner-sub { font-size: 12px; } .pwa-install-banner-btn { width: 100%; justify-content: center; margin-top: 4px; } } /* ═══════════════════════════════════════════════════════════════════ added by Zain — don't remove (showcase Phase 2 — spotlight rows 20260418) Higgsfield/Runway-style product spotlight. Left column: brand eyebrow + giant title + description + CTA + secondary. Right column: 3×2 grid of example outputs from this section. Stacks vertically on mobile. ═══════════════════════════════════════════════════════════════════ */ /* Claude 2026-04-20 rev23: background now lives only behind the left text card (.hfs-left) — the outer section is transparent and just holds layout + spacing. Reels area stays dark/neutral. The text-card edge facing the reels fades into transparency for a soft blend instead of a hard cut. */ /* rev27: reels column now takes 1fr (all remaining space) instead of being capped at 820px. User screenshot showed a black empty strip on the left side because the grid left trailing space unused. Cards now stretch to fill, which naturally distributes the gap uniformly. */ .hfs-spotlight { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; margin: 22px 0; padding: 4px 0; border: none; background: transparent; position: relative; overflow: visible; } /* rev23: no section-wide ::before — bg lives on .hfs-left only. */ .hfs-left { display: flex; flex-direction: column; justify-content: center; padding: 18px 22px; position: relative; z-index: 1; border-radius: 16px; /* Default background when admin hasn't customized. The `bg_style` inline attribute (when set) overrides this. */ background: linear-gradient(145deg, rgba(20,12,48,0.85) 0%, rgba(10,4,26,0.95) 100%); border: 1px solid rgba(139,92,246,0.12); overflow: hidden; min-height: 180px; } /* Soft edge toward the reels: in RTL the reels are on the LEFT side, so we fade the card's physical-left edge into transparent. The overlay blends to the body's dark tone so the card melts into the surrounding page instead of stopping at a hard border. */ .hfs-left::after { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-end: 0; /* in RTL: this is the LEFT edge (reels side) */ width: 35%; background: linear-gradient(to var(--hfs-fade-dir, left), rgba(8,4,22,0) 0%, rgba(8,4,22,0.55) 60%, rgba(8,4,22,1) 100%); pointer-events: none; z-index: 0; } /* LTR override — in English mode the reels are on the right, fade direction flips. */ html[dir="ltr"] .hfs-left::after { background: linear-gradient(to right, rgba(8,4,22,0) 0%, rgba(8,4,22,0.55) 60%, rgba(8,4,22,1) 100%); } /* Keep all text above the fade overlay */ .hfs-left > * { position: relative; z-index: 1; } .hfs-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(200,162,78,.95); margin-bottom: 8px; } .hfs-title { /* rev31: Satoshi Black Italic for Latin titles (matches Higgsfield header style). Cairo/IBM Plex fallbacks catch Arabic text which Satoshi doesn't cover. */ font-family: 'Satoshi', 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 30px; font-weight: 900; font-style: italic; line-height: 1.05; letter-spacing: -1px; color: #fff; margin-bottom: 8px; background: linear-gradient(135deg, #fff 0%, #c8a24e 75%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hfs-desc { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.68); margin-bottom: 12px; max-width: 320px; } .hfs-cta-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .hfs-cta-primary { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 8px; background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; letter-spacing: .2px; box-shadow: 0 4px 16px rgba(124,58,237,.35); transition: transform .15s, box-shadow .15s; } /* rev21: size variants controlled by admin. */ .hfs-cta-primary.size-sm { padding: 7px 14px; font-size: 12px; } .hfs-cta-primary.size-lg { padding: 13px 26px; font-size: 15px; } .hfs-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(124,58,237,.55); } .hfs-cta-secondary { display: inline-block; font-size: 13px; color: rgba(255,255,255,.7); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.2); padding-bottom: 1px; } .hfs-cta-secondary:hover { color: #a78bfa; border-color: rgba(167,139,250,.4); } .hfs-right { position: relative; z-index: 1; min-width: 0; } /* Z121 (added by Zain — don't remove): spotlight grid is now a horizontal scroll track — 1 row of 6 visible, swipe/arrows reveal items 7-12. The parent .hfs-grid-wrap holds the prev/next buttons and provides the relative positioning context. Was: CSS-grid repeat(6, 1fr) wrapping to 6×2. Per Zain spec on 2026-04-30: "make it 1 line of 6 with side-scroll arrows for the rest, apply to all 4 spotlight sections". */ .hfs-grid-wrap { position: relative; /* Bleed wrapper edges 4px outside .hfs-right so arrows can sit just inside the track edges without overlapping cards. */ } .hfs-grid { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Hide native scrollbar — the arrows are the only chrome we want. */ scrollbar-width: none; -ms-overflow-style: none; } .hfs-grid::-webkit-scrollbar { display: none; } .hfs-card { /* 6 visible at a time, 5 gaps × 4px = 20px total gap. Fixed basis so the track has a stable scrollWidth. */ flex: 0 0 calc((100% - 20px) / 6); scroll-snap-align: start; aspect-ratio: 9/16; border-radius: 6px; overflow: hidden; background: #000; position: relative; border: 1px solid rgba(255,255,255,.05); transition: transform .2s, border-color .2s; } /* Z121 (added by Zain — don't remove): scroll-track arrow buttons. */ .hfs-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(10,4,26,0.75); color: #fff; border: 1px solid rgba(255,255,255,0.18); cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0,0,0,0.45); transition: opacity .15s, background .15s, transform .15s, border-color .15s; } .hfs-arrow:hover { background: rgba(124,58,237,0.85); border-color: rgba(167,139,250,0.7); transform: translateY(-50%) scale(1.05); } /* In RTL the track flows right-to-left visually: • prev button (rewinds towards items 1,2,...) sits on the visual RIGHT • next button (advances towards items 7,8,...) sits on the visual LEFT logical inset-inline-start/end keeps this correct in both AR (RTL) and EN (LTR) without explicit dir overrides. */ .hfs-arrow-prev { inset-inline-start: -8px; } .hfs-arrow-next { inset-inline-end: -8px; } /* Z122 (added by Zain — don't remove): mirror chevron icons in RTL so they point in the visually-correct direction. In LTR, prev=← / next=→ matches reading flow. In RTL the same SVG paths visually flip the semantics — a right-side button with a left-pointing chevron looked like "advance" but actually rewound. scaleX(-1) flips horizontally so prev (visual RIGHT in RTL) shows → and next (visual LEFT) shows ←. */ html[dir="rtl"] .hfs-arrow svg { transform: scaleX(-1); } .hfs-card:hover { transform: translateY(-2px); border-color: rgba(124,58,237,.45); } .hfs-card video, .hfs-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hfs-card-badge { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; background: rgba(0,0,0,.55); color: #e9d5ff; backdrop-filter: blur(4px); } /* added by Zain — don't remove (Phase 2.2 grid card overlay 20260418): Each spotlight grid card gets a bottom gradient with title + subtitle. Mirrors the .htc-info-overlay system used on hero cards, but sized for smaller 1:1 grid tiles. Fades out on hover to reveal clean video. */ .hfs-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 20px 10px 8px; background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 55%, transparent 100%); transition: opacity .2s; pointer-events: none; } .hfs-card:hover .hfs-card-overlay { opacity: 0; } .hfs-card-title { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.1px; } .hfs-card-sub { font-size: 10px; color: rgba(255,255,255,.60); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hfs-view-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: #a78bfa; text-decoration: none; font-weight: 600; } .hfs-view-all:hover { color: #c4b5fd; } /* Empty state — legacy single-box (kept for reference) */ .hfs-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; border-radius: 8px; background: rgba(255,255,255,.02); border: 1px dashed rgba(255,255,255,.1); color: rgba(255,255,255,.4); font-size: 13px; text-align: center; } .hfs-empty-icon { font-size: 36px; opacity: .35; margin-bottom: 8px; } /* added by Zain — don't remove (Phase 2.6 2×3 placeholder grid 20260418): When a spotlight section has no items, we render 6 .hfs-card--placeholder tiles so the section keeps the same footprint as populated ones. */ .hfs-card--placeholder { background: linear-gradient(145deg, rgba(20,14,45,.55) 0%, rgba(10,6,25,.85) 100%); border-style: dashed; border-color: rgba(139,92,246,.18); display: flex; align-items: center; justify-content: center; cursor: default; } .hfs-card--placeholder:hover { transform: none; border-color: rgba(139,92,246,.3); } .hfs-placeholder-icon { font-size: 30px; opacity: .28; } /* Mobile: stack left and right vertically. rev23: on mobile the edge-fade on .hfs-left doesn't make sense (nothing beside it to blend into) so we hide the ::after overlay. */ @media (max-width: 860px) { .hfs-spotlight { grid-template-columns: 1fr; gap: 14px; padding: 0; margin: 16px 0; } .hfs-left { min-height: 0; padding: 16px 18px; } .hfs-left::after { display: none; } .hfs-title { font-size: 24px; } .hfs-desc { max-width: none; font-size: 12.5px; } /* Z121: still horizontal scroll on tablet, but show 4 cards per page and let users swipe — hide arrows since touch handles it. */ .hfs-card { flex: 0 0 calc((100% - 12px) / 4); } .hfs-arrow { display: none; } } @media (max-width: 480px) { .hfs-title { font-size: 22px; } /* Z121: phones — 3 cards per page, swipe only. */ .hfs-card { flex: 0 0 calc((100% - 8px) / 3); } } /* added by Zain — don't remove (Z115) — nav avatar shows profile_picture_url when set */ .lnav-avatar.lnav-avatar--img { padding: 0; overflow: hidden; } .lnav-avatar.lnav-avatar--img > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; pointer-events: none; } /* ════════════════════════════════════════════════════════════════════ WB-068 (وحش بلال 2026-05-06): GLOBAL nav theme retint — purple/violet → emerald/charcoal across every page that loads landing.css (i.e. base.html-extending pages). Bilal: "اللون والتفاصيل الجديدة عممها على كل النافكيشن بار بكل مكان بكل الاقسام". Replaces the WB-067 page-scoped overrides that lived inside landing_v2.html. Kept colour-only — layout (positions, paddings, font sizes) is untouched so all existing nav functionality (dropdowns, drawer, hamburger, credits ring, avatar) keeps working. ════════════════════════════════════════════════════════════════════ */ .landing-nav { background: rgba(26, 29, 32, 0.85) !important; border-bottom: 1px solid rgba(61, 220, 151, 0.15) !important; } .landing-nav.scrolled { background: rgba(26, 29, 32, 0.96) !important; border-bottom-color: rgba(61, 220, 151, 0.30) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important; } .lnav-link { color: rgba(94, 234, 212, 0.86); } .lnav-link:hover { color: #fff; background: rgba(61, 220, 151, 0.10); } .lnav-link--active, .lnav-dd--active > .lnav-dd-btn { color: #fff !important; background: rgba(61, 220, 151, 0.18) !important; } .nav-new-badge { background: #3DDC97 !important; color: #1a1d20 !important; border-color: rgba(94, 234, 212, 0.5) !important; } .lnav-credits-block, .lnav-credits { background: rgba(61, 220, 151, 0.08) !important; border-color: rgba(94, 234, 212, 0.22) !important; } .lnav-credits-block:hover, .lnav-credits:hover { background: rgba(61, 220, 151, 0.15) !important; border-color: rgba(94, 234, 212, 0.45) !important; } .lnav-dd-menu, .lnav-dropdown, .lnav-dropdown-menu { background: rgba(26, 29, 32, 0.98) !important; border-color: rgba(61, 220, 151, 0.20) !important; } .lnav-dd-item:hover, .lnav-dropdown-item:hover { background: rgba(61, 220, 151, 0.12) !important; color: #fff !important; } .lnav-avatar, .lnav-avatar-ring { border-color: rgba(94, 234, 212, 0.55) !important; } .lnav-cta, .hero-btn-primary { background: linear-gradient(135deg, #0d9488, #3DDC97) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(61, 220, 151, 0.35) !important; } .lnav-cta:hover, .hero-btn-primary:hover { background: linear-gradient(135deg, #14b8a6, #5eead4) !important; box-shadow: 0 10px 28px rgba(61, 220, 151, 0.50) !important; } /* ════════════════════════════════════════════════════════════════════ WB-167 v8 (وحش بلال 2026-05-13): شارة "برو" مضيئة + بارتكلز سموث. Bilal asked: glowing green + plus-sign particles emerging from inside the "برو" pill and rising up. Iterated over 7 versions live with Bilal — v1-v7 felt choppy / wrong shape / wrong density. The breakthrough was studying the existing payment-pending preview at /static/preview/payment-pending.html which Bilal pointed to as the gold-standard smoothness reference. Bilal: "حركتهن مو سموث، شوفهن هنا" + URL. v8 is a direct port of that recipe scaled for a small pill. The smoothness comes from THREE specific values that v1-v7 had wrong: • LONG duration (8-14s per particle — was 2-4s) • LINEAR easing (constant speed — was ease-out) • NEGATIVE delays (-10s to 0s — every particle starts mid-flight on page load, so the stream is continuous instead of synchronized pulses) Architecture: • CSS here defines the .wb167-particle class + the @keyframes wb167-rise animation. Two particle TYPES: .wb167-particle — small glowing dot .wb167-particle.spark — crossed ::before/::after lines forming a "+" cross (verbatim copy of pay-particle.spark from the payment-pending reference) • JS lives in base.html + base_public.html (inline). It finds every `.lnav-logo-plus, .footer-logo-plus, .r168zc-welcome- brand-pro` on the page and injects 14 particles per pill with randomized size / position / duration / delay / drift / peak. The five CSS custom properties (--p-size, --p-dur, --p-delay, --p-drift, --p-peak) feed back into the @keyframes. This block ONLY ADDS — it doesn't touch the original .lnav-logo-plus /.footer-logo-plus rules at the top of this file (line ~130 + ~641). Same selector, later in cascade, wins for `background` and `box-shadow`, so the original solid #22c55e is a clean fallback if anyone strips this block. ════════════════════════════════════════════════════════════════════ */ .lnav-logo-plus, .footer-logo-plus { position: relative; isolation: isolate; /* Don't add `overflow: hidden` — particles intentionally rise OUT of the top of the pill into the surrounding space. */ background: radial-gradient(ellipse 85% 60% at 50% 0%, rgba(167, 243, 208, 0.42) 0%, transparent 65%), radial-gradient(ellipse 110% 110% at 50% 100%, rgba(16, 185, 129, 0.55) 0%, #22c55e 70%); box-shadow: 0 0 14px rgba(52, 211, 153, 0.65), 0 0 28px rgba(34, 197, 94, 0.30), 0 2px 12px rgba(34, 197, 94, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.18); } /* Particle base — the JS injects spans into each pill. Five custom properties tune each instance. */ .wb167-particle { position: absolute; bottom: -6px; width: var(--p-size, 4px); height: var(--p-size, 4px); border-radius: 50%; background: radial-gradient(circle, #d1fae5 0%, #34d399 45%, transparent 75%); box-shadow: 0 0 8px #34d399; animation: wb167-rise var(--p-dur, 12s) linear infinite; animation-delay: var(--p-delay, 0s); opacity: 0; pointer-events: none; z-index: 2; } /* Spark variant — verbatim from payment-pending.html .pay-particle.spark. The two pseudo-elements form a crossed "+" shape. Single 5px shadow (NOT a triple-glow stack — that bloomed into a circle in earlier versions and obscured the cross). */ .wb167-particle.spark { background: transparent; width: var(--p-size, 8px); height: var(--p-size, 8px); box-shadow: none; } .wb167-particle.spark::before, .wb167-particle.spark::after { content: ''; position: absolute; background: #34d399; } .wb167-particle.spark::before { top: 50%; left: 0; width: 100%; height: 1.4px; transform: translateY(-50%); box-shadow: 0 0 5px #34d399; border-radius: 1px; } .wb167-particle.spark::after { left: 50%; top: 0; width: 1.4px; height: 100%; transform: translateX(-50%); box-shadow: 0 0 5px #34d399; border-radius: 1px; } /* The rise — particles emerge from the bottom, peak quickly at 8%, hold opacity through the middle, fade out by 100%. The use of var(--p-drift, 0px) for horizontal motion + var(--p-peak, 0.6) for per-instance opacity is what creates the "many particles at many different positions and brightnesses" effect that reads as smooth. */ @keyframes wb167-rise { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 8% { opacity: var(--p-peak, 0.6); transform: translate(calc(var(--p-drift, 0px) * 0.2), -10px) scale(1); } 50% { opacity: var(--p-peak, 0.6); } 90% { opacity: var(--p-peak, 0.6); } 100% { transform: translate(var(--p-drift, 0px), -60px) scale(0.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wb167-particle { animation: none; opacity: 0; } } /* ════════════════════════════════════════════════════════════════════════ WB-225 NAVBAR-FONT-UNIFY (وحش بلال 2026-05-13): Force the same Tajawal-led stack on every nav link / dropdown button / dropdown item so landing + internal pages render identically. Affects ANY page that loads landing.css (base.html does via base, and landing.html does directly). ════════════════════════════════════════════════════════════════════════ */ .lnav-link, .lnav-dd-btn, .lnav-dd-title, .lnav-dd-item, .lnav-dropdown, .lnav-dropdown-name, .lnav-dropdown-email, .lnav-dropdown-item, .lnav-credits-pct, .lnav-credits-val, .lnav-credits-bonus, .lnav-credits-buy, .lnav-credits-forecast, .lnav-overflow, .lnav-overflow-label, .lnav-overflow-menu, .nav-new-badge { font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif !important; } /* Slight tracking + weight tweak so Tajawal renders crisp at small nav sizes (matches the look of the screenshot Bilal shared). */ .lnav-link, .lnav-dd-btn { font-weight: 700 !important; letter-spacing: -0.1px; } /* ════════════════════════════════════════════════════════════════════════ WB-229 NAVBARS-CINEMA-LANDING (وحش بلال 2026-05-13): Override remaining purple in desktop top-nav (lnav-*). Affects every page that loads landing.css (which is base.html + landing.html). ════════════════════════════════════════════════════════════════════════ */ /* Link hover */ .lnav-link:hover { background: rgba(34, 197, 94, 0.10) !important; color: #fff !important; } /* Active link (currently selected page) */ .lnav-link--active, .lnav-link.lnav-link--active { background: rgba(34, 197, 94, 0.18) !important; box-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.40) !important; color: #fff !important; } /* Dropdown trigger button */ .lnav-dd-btn:hover { background: rgba(34, 197, 94, 0.10) !important; color: #fff !important; } .lnav-dd--active > .lnav-dd-btn { background: rgba(34, 197, 94, 0.18) !important; box-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.40) !important; color: #fff !important; } /* Dropdown menu shell */ .lnav-dd-menu { background: rgba(8, 14, 10, 0.96) !important; border-color: rgba(134, 239, 172, 0.18) !important; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(34, 197, 94, 0.10) !important; } /* Dropdown items */ .lnav-dd-item:hover { background: linear-gradient(135deg, rgba(34, 197, 94, 0.20), rgba(94, 234, 212, 0.08)) !important; color: #fff !important; } .lnav-dd-item--active { background: rgba(34, 197, 94, 0.18) !important; box-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.40) !important; color: #fff !important; } .lnav-dd-icon { background: rgba(34, 197, 94, 0.12) !important; border-color: rgba(134, 239, 172, 0.25) !important; color: #86efac !important; } /* Overflow ("المزيد") menu — same theme */ .lnav-overflow-menu { background: rgba(8, 14, 10, 0.96) !important; border-color: rgba(134, 239, 172, 0.18) !important; } .lnav-overflow-label { color: rgba(134, 239, 172, 0.85) !important; } /* Mobile-menu button (hamburger) when in the top nav row */ .mob-menu-btn:hover, .mob-menu-btn:active { background: rgba(34, 197, 94, 0.14) !important; color: #86efac !important; } /* Scrolled nav (sticky) — green tint instead of purple shadow */ .landing-nav.scrolled { border-bottom-color: rgba(134, 239, 172, 0.22) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(34, 197, 94, 0.10) !important; }