/** * home.css — الواجهة الرئيسية الجديدة لمنصة عبقر * ================================================ * كل القواعد معزولة تحت #page-welcome كي لا تتسرب لبقية الصفحات. * الوضع الليلي يتبع استراتيجية Tailwind: .dark على (انظر js/theme.js). * * تنبيه: البلاطات تحمل .app-card عمداً ليلتقطها تفويض الأحداث في * navigation.js (الضيوف/الصيانة/المفضلة). لذلك نبطل أنماط .app-card * القديمة (الزجاجية البيضاء) عبر تخصيص أعلى + !important عند اللزوم. */ #page-welcome { /* ===== الوضع الفاتح (الافتراضي) ===== */ --h-bg-1: #f7f3ff; --h-bg-2: #fdf9f3; --h-bg-3: #f2f6ff; --h-panel: #ffffff; --h-panel-2: #faf7ff; --h-line: rgba(91, 33, 182, .14); --h-ink: #241a4d; --h-muted: #675e8a; --h-violet: #6d28d9; --h-gold: #d97706; --h-gold-soft: #fbbf24; --h-shadow: 0 10px 30px rgba(36, 26, 77, .12); --h-shadow-lg: 0 24px 50px rgba(36, 26, 77, .20); --h-tile-bg: #efeaff; --h-scrim: 250, 247, 255; } .dark #page-welcome { /* ===== الوضع الليلي ===== */ --h-bg-1: #100a22; --h-bg-2: #150d2b; --h-bg-3: #0e0a1e; --h-panel: #1a1136; --h-panel-2: #1e1338; --h-line: rgba(196, 181, 253, .16); --h-ink: #f3f0ff; --h-muted: #a79ec9; --h-violet: #a78bfa; --h-gold: #fbbf24; --h-gold-soft: #fcd34d; --h-shadow: 0 10px 30px rgba(0, 0, 0, .45); --h-shadow-lg: 0 24px 50px rgba(0, 0, 0, .6); --h-tile-bg: #160e2c; --h-scrim: 30, 19, 56; } /* الحاوية العامة: نلغي الحشو الافتراضي لأن الأشرطة ممتدة بعرض الشاشة */ #page-welcome.page { padding: 0 !important; max-width: none !important; background: linear-gradient(180deg, var(--h-bg-1) 0%, var(--h-bg-2) 55%, var(--h-bg-3) 100%); color: var(--h-ink); } /* الغلاف يمتد ليملأ الصفحة لأن #page-welcome يُعرض flex-column من showPage */ #page-welcome .home-shell { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; } #page-welcome .home-in { max-width: 1400px; margin: 0 auto; padding: 0 22px; width: 100%; } /* الأشرطة تتمدد لملء الارتفاع المتبقي في الشاشات الطويلة */ #page-welcome .home-band--tools { flex: 1 0 auto; } /* ======================================================= 0) الشريط العلوي — الشعار في الزاوية ======================================================= */ #page-welcome .home-nav { position: sticky; top: 0; z-index: 20; padding: 10px 0 0; background: linear-gradient(180deg, rgba(247, 243, 255, .96) 0%, rgba(247, 243, 255, .76) 72%, transparent 100%); } .dark #page-welcome .home-nav { background: linear-gradient(180deg, rgba(16, 10, 34, .97) 0%, rgba(16, 10, 34, .78) 72%, transparent 100%); } #page-welcome .home-nav .home-in { display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr); grid-template-areas: "brand links acct"; align-items: center; gap: 16px; height: 64px; width: calc(100% - 28px); max-width: 1212px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 22px; background: rgba(255, 255, 255, .76); box-shadow: 0 14px 38px rgba(46, 27, 92, .12), inset 0 1px 0 rgba(255, 255, 255, .82); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); } .dark #page-welcome .home-nav .home-in { border-color: rgba(196, 181, 253, .16); background: rgba(24, 15, 50, .80); box-shadow: 0 16px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06); } #page-welcome .home-brand { grid-area: brand; justify-self: start; display: flex; align-items: center; gap: 10px; min-width: 0; } #page-welcome .home-brand::before { content: ""; width: 4px; height: 30px; flex: none; border-radius: 99px; background: linear-gradient(180deg, var(--h-gold-soft), var(--h-violet)); box-shadow: 0 0 16px rgba(251, 191, 36, .28); } #page-welcome .home-logo { height: 42px; width: auto; flex: none; display: block; filter: drop-shadow(0 5px 10px rgba(36, 26, 77, .14)); } #page-welcome .home-slogan { font-family: AAGalaxy, 'Tajawal', sans-serif; font-size: 14px; font-weight: 900; color: var(--h-muted); white-space: nowrap; line-height: 1.4; } #page-welcome .home-slogan em { font-style: normal; color: var(--h-gold); } #page-welcome .home-nav-sp { display: none; } #page-welcome .home-nav-links { grid-area: links; justify-self: center; display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--h-line); border-radius: 16px; background: rgba(109, 40, 217, .055); } .dark #page-welcome .home-nav-links { background: rgba(255, 255, 255, .045); } #page-welcome .home-link { background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 13.5px; color: var(--h-muted); padding: 9px 12px; border-radius: 12px; white-space: nowrap; display: flex; align-items: center; gap: 7px; transition: color .2s, background-color .2s, transform .2s, box-shadow .2s; } #page-welcome .home-link-mark { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--link-accent, var(--h-violet)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--link-accent, var(--h-violet)) 13%, transparent); transition: transform .2s, box-shadow .2s; } #page-welcome .home-link--comp { --link-accent: #10b981; } #page-welcome .home-link--games { --link-accent: #f43f5e; } #page-welcome .home-link--tools { --link-accent: #3b82f6; } #page-welcome .home-link:hover, #page-welcome .home-link:focus-visible { color: var(--h-ink); background: var(--h-panel); transform: translateY(-1px); box-shadow: 0 7px 18px rgba(36, 26, 77, .10); } .dark #page-welcome .home-link:hover, .dark #page-welcome .home-link:focus-visible { background: rgba(255, 255, 255, .08); } #page-welcome .home-link:hover .home-link-mark, #page-welcome .home-link:focus-visible .home-link-mark { transform: scale(1.22); box-shadow: 0 0 0 5px color-mix(in srgb, var(--link-accent) 18%, transparent); } /* --- الحساب والرسائل داخل الشريط --- */ #page-welcome .home-nav-acct { grid-area: acct; justify-self: end; display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid var(--h-line); border-radius: 16px; background: rgba(109, 40, 217, .05); direction: ltr; } .dark #page-welcome .home-nav-acct { background: rgba(255, 255, 255, .045); } /* أزرار المنصة الأصلية بعد نقلها إلى الشريط */ #page-welcome .home-nav-acct > #btn-welcome-feedback, #page-welcome .home-nav-acct > #btn-header-login, #page-welcome .home-nav-acct > #btn-open-sidebar { position: static !important; inset: auto !important; z-index: auto !important; margin: 0 !important; padding: 0 !important; flex: none; width: 40px !important; height: 40px !important; border-radius: 12px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #page-welcome .home-nav-acct > #btn-open-sidebar, #page-welcome .home-nav-acct > #btn-welcome-feedback { color: var(--h-violet) !important; background: transparent !important; border-color: transparent !important; } /* أيقونة زر البلاغات تتبع لون الشريط بدل رماديها الأصلي */ #page-welcome .home-nav-acct > #btn-welcome-feedback svg { color: inherit !important; } #page-welcome .home-nav-acct > #btn-header-login { color: #fff !important; background: linear-gradient(135deg, #7c3aed, #2563eb) !important; border-color: rgba(255, 255, 255, .22) !important; } #page-welcome .home-nav-acct > #btn-open-sidebar:hover, #page-welcome .home-nav-acct > #btn-welcome-feedback:hover, #page-welcome .home-nav-acct > #btn-header-login:hover { transform: translateY(-2px) !important; } /* شعار البروفايل العائم يُخفى في الرئيسية فقط — الشريط يحمل الشعار أصلاً. نحتاج !important لأن showPage يضبط display عبر أنماط سطرية. */ body.home-nav-owns-chrome #mini-profile-logo { display: none !important; } /* ======================================================= 1) البطل — لعبة مميزة متبدّلة ======================================================= */ /* overflow-x:clip يقصّ الهالة أفقياً دون قصّ ظل البطل رأسياً (بخلاف hidden) */ #page-welcome .home-hero { position: relative; padding: 26px 0 40px; overflow-x: clip; } #page-welcome .home-hero::before { content: ""; position: absolute; top: -120px; right: -6%; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; filter: blur(60px); background: radial-gradient(closest-side, rgba(124, 58, 237, .18), transparent 72%); } .dark #page-welcome .home-hero::before { background: radial-gradient(closest-side, rgba(124, 58, 237, .34), transparent 72%); } #page-welcome .home-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr clamp(96px, 11vw, 148px); gap: 16px; align-items: stretch; } /* 32/68 مع نسبة 75:34 تجعل عمود الفن 3:2 بالضبط (0.68 ÷ 0.4533 = 1.5). حصة الفن ارتفعت من 60% إلى 68% فيرتفع البطل دون أي اقتطاع، ولوحة النص تضيق فيمتلئ فراغها بدل أن تبدو خاوية. */ #page-welcome .home-stage { position: relative; display: grid; grid-template-columns: 32% 68%; aspect-ratio: 75 / 34; border-radius: 26px; overflow: hidden; background: linear-gradient(135deg, var(--h-panel), var(--h-panel-2)); border: 1px solid var(--h-line); box-shadow: var(--h-shadow-lg); } #page-welcome .home-stage-art { position: relative; overflow: hidden; } #page-welcome .home-stage-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; transform: scale(1.025); transition: opacity .6s ease, transform 18s cubic-bezier(.18, .5, .28, 1); } /* الغلاف الخارج يبقى معتماً تحت الداخل (is-prev) بدل أن يتلاشى معه، وإلا امتزج فنّان مزدحمان أثناء الانتقال فبدا المشهد موحلاً. */ #page-welcome .home-stage-art img.is-prev { opacity: 1; z-index: 1; transition: none; } #page-welcome .home-stage-art img.is-on { opacity: 1; z-index: 2; transform: scale(1.075); } /* تدرّج يذيب حافة الفن في لوحة النص (الحافة اليمنى في RTL) */ #page-welcome .home-stage-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to left, rgba(var(--h-scrim), .98) 0%, rgba(var(--h-scrim), .5) 10%, transparent 28%); } /* لوحة النص: مقاييسها كلها مرنة بـclamp فتتكيّف مع أي عرض دون الحاجة إلى استثناءات لكل مقاس شاشة. */ #page-welcome .home-stage-txt { position: relative; z-index: 2; overflow: hidden; padding: clamp(20px, 2.2vw, 40px); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(155deg, var(--h-panel) 0%, var(--h-panel-2) 100%); } /* توهج ذهبي خافت يكسر بياض اللوحة ويربطها بهوية عبقر */ #page-welcome .home-stage-txt::before { content: ""; position: absolute; top: -28%; inset-inline-start: -32%; width: 78%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(251, 191, 36, .16), transparent 72%); } .dark #page-welcome .home-stage-txt::before { background: radial-gradient(closest-side, rgba(251, 191, 36, .12), transparent 72%); } #page-welcome .home-tag { position: relative; align-self: flex-start; font-size: clamp(10.5px, .85vw, 12.5px); font-weight: 900; letter-spacing: .2px; padding: 6px clamp(11px, 1.1vw, 16px); border-radius: 99px; margin-bottom: clamp(9px, 1vw, 16px); color: #2a1500; background: linear-gradient(135deg, var(--h-gold-soft), var(--h-gold)); box-shadow: 0 4px 12px rgba(217, 119, 6, .28); } #page-welcome .home-stage-txt h2 { position: relative; font-family: AAGalaxy, 'Tajawal', sans-serif; font-size: clamp(21px, 2.7vw, 42px); font-weight: 900; line-height: 1.3; margin: 0 0 clamp(9px, .9vw, 14px); color: var(--h-ink); } /* خط ذهبي رفيع يفصل العنوان عن الوصف */ #page-welcome .home-stage-txt h2::after { content: ""; display: block; width: 46px; height: 3px; border-radius: 99px; margin-top: clamp(8px, .8vw, 13px); background: linear-gradient(90deg, var(--h-gold), transparent); } #page-welcome .home-stage-txt p { position: relative; color: var(--h-muted); font-size: clamp(12.5px, 1.15vw, 16px); line-height: 1.75; font-weight: 500; margin: 0 0 clamp(14px, 1.5vw, 24px); /* ثلاثة أسطر كحد أقصى: يبقى ارتفاع اللوحة متوقعاً مهما طال الوصف */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #page-welcome .home-btns { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 16px; width: min(100%, 370px); } /* زر التشغيل يحمل .app-card للتفويض؛ لذلك نعزل الزرين تماماً عن شكل البطاقات. */ #page-welcome .home-b { position: relative; isolation: isolate; border: 1px solid transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; cursor: pointer; font-family: inherit; font-weight: 900; font-size: clamp(13px, 1.08vw, 15px); width: 100%; min-width: 0; min-height: 52px; padding: 0 18px; border-radius: 14px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; transform: translateY(0) !important; transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, background .22s, border-color .22s, color .22s; } #page-welcome .home-b:active { transform: translateY(0) scale(.97) !important; } #page-welcome .home-b:focus-visible { outline: 3px solid var(--h-gold); outline-offset: 3px; } /* الأيقونة جزء من محتوى الزر وليست زرًا مصغرًا أو طبقة متداخلة. */ #page-welcome .home-b__icon { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; background: none !important; } #page-welcome .home-b__icon svg { width: 19px; height: 19px; } /* --- الزر الأساسي: تباين ثابت حتى مع !important الموروث من .dark .app-card --- */ #page-welcome .home-b.home-b--play, .dark #page-welcome .home-b.home-b--play { color: #2b1700 !important; background: linear-gradient(135deg, #ffe49a 0%, #fbbf24 52%, #f59e0b 100%) !important; border-color: rgba(255, 234, 166, .78) !important; box-shadow: 0 9px 22px rgba(245, 158, 11, .24), inset 0 1px 0 rgba(255, 255, 255, .55) !important; } #page-welcome .home-b.home-b--play:hover, .dark #page-welcome .home-b.home-b--play:hover { color: #201000 !important; background: linear-gradient(135deg, #fff0bd 0%, #fcd34d 48%, #f59e0b 100%) !important; border-color: #ffe39a !important; transform: translateY(-2px) !important; box-shadow: 0 14px 28px rgba(245, 158, 11, .34), inset 0 1px 0 rgba(255, 255, 255, .72) !important; } /* --- الزر الثانوي: tonal واضح ومنخفض التأكيد عن زر اللعب --- */ #page-welcome .home-b--explore { color: #4c1d95 !important; background: #f0e9ff !important; border-color: #ddd0ff !important; box-shadow: 0 7px 18px rgba(76, 29, 149, .1), inset 0 1px 0 rgba(255, 255, 255, .8) !important; } #page-welcome .home-b--explore .home-b__icon { color: var(--h-violet); } #page-welcome .home-b--explore:hover { color: #fff !important; background: linear-gradient(135deg, #6d28d9, #4c1d95) !important; border-color: #8b5cf6 !important; transform: translateY(-2px) !important; box-shadow: 0 13px 26px rgba(91, 33, 182, .25) !important; } #page-welcome .home-b--explore:hover .home-b__icon { color: #fff; background: none !important; } .dark #page-welcome .home-b--explore { color: #f4f0ff !important; background: #352650 !important; border-color: #584475 !important; box-shadow: 0 7px 18px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08) !important; } .dark #page-welcome .home-b--explore:hover { color: #fff !important; background: linear-gradient(135deg, #7c3aed, #5b21b6) !important; border-color: #a78bfa !important; box-shadow: 0 16px 34px rgba(76, 29, 149, .42) !important; } /* شريط مصغرات سينمائي موحّد: يقرأ كعنصر تحكّم واحد لا كخمس بطاقات منفصلة. */ #page-welcome .home-rail { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 9px; border: 1px solid color-mix(in srgb, var(--h-line) 78%, transparent); border-radius: 24px; background: linear-gradient(150deg, rgba(255, 255, 255, .1), transparent 34%), color-mix(in srgb, var(--h-panel) 88%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 36px rgba(15, 10, 35, .13); backdrop-filter: blur(16px) saturate(1.12); -webkit-backdrop-filter: blur(16px) saturate(1.12); isolation: isolate; } /* مسار رفيع من جهة البطل يمنح الدولاب محوراً بصرياً دون أن يزاحم الصور. */ #page-welcome .home-rail::after { content: ""; position: absolute; z-index: 0; top: 18px; bottom: 18px; inset-inline-start: -1px; width: 2px; border-radius: 99px; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(217, 119, 6, .48) 28%, rgba(124, 58, 237, .42) 72%, transparent); box-shadow: 0 0 10px rgba(124, 58, 237, .13); } .dark #page-welcome .home-rail { border-color: rgba(167, 139, 250, .19); background: linear-gradient(150deg, rgba(167, 139, 250, .1), transparent 36%), rgba(20, 12, 43, .74); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 42px rgba(4, 2, 16, .34); } #page-welcome .home-thumb { display: block; padding: 0; font: inherit; position: relative; z-index: 1; aspect-ratio: 3 / 2; border-radius: 14px; overflow: visible; cursor: pointer; background: var(--h-tile-bg); border: 1px solid transparent; opacity: .64; filter: saturate(.82) brightness(.88); transform: scale(.96); transform-origin: center; transition: opacity .34s ease, transform .34s cubic-bezier(.2, .8, .2, 1), filter .34s ease, border-color .34s ease, box-shadow .34s ease; } #page-welcome .home-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } /* لمعة داخلية خافتة تميّز العنصر النشط من دون إطار سميك. */ #page-welcome .home-thumb::before { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(145deg, rgba(255, 255, 255, .16), transparent 42%, rgba(251, 191, 36, .08)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); transition: opacity .34s ease; } #page-welcome .home-thumb.is-near { opacity: .78; filter: saturate(.93) brightness(.94); transform: scale(.975); } #page-welcome .home-thumb.is-far { opacity: .46; filter: saturate(.65) brightness(.76); transform: scale(.925); } #page-welcome .home-thumb:hover { z-index: 3; opacity: .96; filter: saturate(1) brightness(1); transform: translateX(3px) scale(1.01); } #page-welcome .home-thumb.is-on { z-index: 4; opacity: 1; filter: none; transform: translateX(5px) scale(1.035); border-color: color-mix(in srgb, var(--h-gold) 76%, white); box-shadow: 0 0 0 2px rgba(251, 191, 36, .13), 0 12px 27px rgba(9, 5, 28, .26); } #page-welcome .home-thumb.is-on::before { opacity: 1; } /* لسان صغير باتجاه صورة البطل يربط المصغّر النشط بالمشهد الكبير. */ #page-welcome .home-thumb.is-on::after { content: ""; position: absolute; top: 50%; inset-inline-start: -6px; width: 11px; height: 11px; border-top: 1px solid color-mix(in srgb, var(--h-gold) 76%, white); border-inline-start: 1px solid color-mix(in srgb, var(--h-gold) 76%, white); background: color-mix(in srgb, var(--h-panel) 88%, var(--h-gold) 12%); transform: translateY(-50%) rotate(45deg); box-shadow: 2px -2px 9px rgba(251, 191, 36, .2); } #page-welcome .home-thumb__progress { position: absolute; z-index: 2; inset-inline: 9px; bottom: 6px; height: 3px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .24); opacity: 0; transition: opacity .25s ease; } #page-welcome .home-thumb__progress::after { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--h-gold-soft), #fff0ad); transform-origin: right center; transform: scaleX(0); } #page-welcome .home-thumb.is-on .home-thumb__progress { opacity: 1; } #page-welcome .home-thumb.is-on .home-thumb__progress::after { animation: home-thumb-progress 5.5s linear both; } #page-welcome .home-rail.is-paused .home-thumb__progress::after { animation-play-state: paused; } @keyframes home-thumb-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* الجذر: كان شريط المصغرات (5 × 3:2) يفرض ارتفاعاً 604px فيتمدد البطل ويتحول عمود الفن إلى مربع، فيُقتطع ثلث كل غلاف عرضاً. الحل: المصغرات تتمدد لتملأ ارتفاع البطل بالضبط أياً كان العرض. المقايضة مقصودة — نقتطع من المصغّرة الصغيرة، ولا نقتطع من البطل أبداً. */ @media (min-width: 861px) { #page-welcome .home-thumb { flex: 1 1 0; min-height: 0; aspect-ratio: auto; } } /* استُغني عن استثناءات العرض الوسطي: كل مقاييس اللوحة والأزرار صارت clamp() تتكيّف تلقائياً من 861px حتى أوسع شاشة. */ /* ======================================================= 2) الأشرطة الملوّنة للأقسام ======================================================= */ #page-welcome .home-band { position: relative; isolation: isolate; padding: 46px 0; scroll-margin-top: 88px; } /* دمج بصري بلا زيادة في الارتفاع: بداية القسم تتمدد فوق الحد السابق بقوس ضحل. */ #page-welcome .home-band::before { content: ""; position: absolute; z-index: 0; top: -24px; inset-inline: 0; height: 25px; pointer-events: none; clip-path: ellipse(64% 100% at 50% 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--band-entry) 78%, var(--band-accent) 22%), var(--band-entry)); filter: drop-shadow(0 -5px 12px color-mix(in srgb, var(--band-accent) 10%, transparent)); } #page-welcome .home-band > .home-in { position: relative; z-index: 1; } #page-welcome .home-band--comp { --band-entry: #eafaf3; --band-accent: #10b981; background: linear-gradient(180deg, #eafaf3 0%, #eef6ff 100%); } #page-welcome .home-band--games { --band-entry: #fdeef4; --band-accent: #f43f5e; background: linear-gradient(180deg, #fdeef4 0%, #f6eeff 100%); } #page-welcome .home-band--tools { --band-entry: #e9f2ff; --band-accent: #3b82f6; background: linear-gradient(180deg, #e9f2ff 0%, #f1eeff 100%); } .dark #page-welcome .home-band--comp { --band-entry: #0d2620; --band-accent: #34d399; background: linear-gradient(180deg, #0d2620 0%, #0f1c2e 100%); } .dark #page-welcome .home-band--games { --band-entry: #2a1024; --band-accent: #fb7185; background: linear-gradient(180deg, #2a1024 0%, #1d0f2b 100%); } .dark #page-welcome .home-band--tools { --band-entry: #101f38; --band-accent: #60a5fa; background: linear-gradient(180deg, #101f38 0%, #140f2c 100%); } #page-welcome .home-band-head { display: flex; align-items: center; justify-content: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; } #page-welcome .home-band-id { display: flex; align-items: center; gap: 15px; min-width: 0; } #page-welcome .home-band-txt { min-width: 0; } #page-welcome .home-band-head h2 { font-family: AAGalaxy, 'Tajawal', sans-serif; font-size: clamp(22px, 2.8vw, 31px); font-weight: 900; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 0 0 3px; line-height: 1.35; } /* رقاقة بيضاء تحتضن الأيقونة — أيقونات المنصة ذات تعبئة بيضاء داخلية. الحلقة الملوّنة حولها تربطها بلون القسم. */ #page-welcome .home-ico { width: 54px; height: 54px; flex: none; border-radius: 17px; background: #fff; padding: 10px; box-shadow: var(--h-shadow); border: 2px solid transparent; transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); } #page-welcome .home-band:hover .home-ico { transform: rotate(-4deg) scale(1.06); } #page-welcome .home-ico img { width: 100%; height: 100%; object-fit: contain; display: block; } #page-welcome .home-count { font-size: 12.5px; font-weight: 900; padding: 5px 14px; border-radius: 99px; white-space: nowrap; letter-spacing: .2px; } /* بطاقة "عرض الكل" جزء ثابت من رف التطبيقات بدل زر منفصل في رأس القسم. */ #page-welcome .home-all { position: relative; overflow: hidden; flex: 0 0 clamp(122px, 10vw, 142px); min-width: 122px; min-height: 100%; padding: 16px 14px; border-radius: 18px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; text-align: center; color: var(--all-ink) !important; background: rgba(var(--all-rgb), .12) !important; border: 1px solid rgba(var(--all-rgb), .27) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 24px rgba(var(--all-rgb), .12) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; z-index: 1; transition: background-color .22s, border-color .22s, box-shadow .22s, transform .22s !important; } #page-welcome .home-all::before { content: ""; position: absolute; inset-inline: 16px; inset-block-start: 0; height: 3px; border-radius: 0 0 99px 99px; background: rgb(var(--all-rgb)); opacity: .72; } #page-welcome .home-all:hover { color: var(--all-ink) !important; background: rgba(var(--all-rgb), .21) !important; border-color: rgba(var(--all-rgb), .46) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 15px 30px rgba(var(--all-rgb), .2) !important; transform: translateY(-3px) !important; } #page-welcome .home-all__icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--all-ink); background: rgba(var(--all-rgb), .16); border: 1px solid rgba(var(--all-rgb), .24); transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .2s; } #page-welcome .home-all__icon svg { width: 24px; height: 24px; } #page-welcome .home-all:hover .home-all__icon { transform: scale(1.08) rotate(-3deg); background: rgba(var(--all-rgb), .24); } #page-welcome .home-all__copy { display: grid; gap: 2px; } #page-welcome .home-all__copy strong { font-size: 15px; font-weight: 900; line-height: 1.2; } #page-welcome .home-all__copy small { font-size: 11px; font-weight: 700; opacity: .7; } #page-welcome .home-band-sub { color: var(--h-muted); font-size: 14.5px; font-weight: 500; margin: 0; line-height: 1.7; } /* ألوان كل قسم — وتنتقل نفسها إلى بطاقة نهاية الرف. */ #page-welcome .home-band--comp h2 { color: #047857; } #page-welcome .home-band--comp .home-ico { border-color: rgba(5, 150, 105, .45); } #page-welcome .home-band--comp .home-count { background: rgba(16, 185, 129, .16); color: #047857; } #page-welcome .home-band--comp { --all-rgb: 16, 185, 129; --all-ink: #047857; } .dark #page-welcome .home-band--comp h2 { color: #6ee7b7; } .dark #page-welcome .home-band--comp .home-count { background: rgba(16, 185, 129, .2); color: #6ee7b7; } .dark #page-welcome .home-band--comp { --all-ink: #6ee7b7; } #page-welcome .home-band--games h2 { color: #be123c; } #page-welcome .home-band--games .home-ico { border-color: rgba(225, 29, 72, .42); } #page-welcome .home-band--games .home-count { background: rgba(244, 63, 94, .14); color: #be123c; } #page-welcome .home-band--games { --all-rgb: 244, 63, 94; --all-ink: #be123c; } .dark #page-welcome .home-band--games h2 { color: #fda4af; } .dark #page-welcome .home-band--games .home-count { background: rgba(244, 63, 94, .2); color: #fda4af; } .dark #page-welcome .home-band--games { --all-ink: #fda4af; } #page-welcome .home-band--tools h2 { color: #1d4ed8; } #page-welcome .home-band--tools .home-ico { border-color: rgba(37, 99, 235, .42); } #page-welcome .home-band--tools .home-count { background: rgba(59, 130, 246, .14); color: #1d4ed8; } #page-welcome .home-band--tools { --all-rgb: 59, 130, 246; --all-ink: #1d4ed8; } .dark #page-welcome .home-band--tools h2 { color: #93c5fd; } .dark #page-welcome .home-band--tools .home-count { background: rgba(59, 130, 246, .2); color: #93c5fd; } .dark #page-welcome .home-band--tools { --all-ink: #93c5fd; } /* ======================================================= 3) شبكة البلاطات ======================================================= */ /* صف أفقي منزلق بدل شبكة متعددة الصفوف. السبب: أعداد الأقسام مختلفة (10 و6 و3) وعدد الأعمدة يتغيّر مع العرض، فلا يوجد عدد أعمدة واحد يمنع الصف الأخير الناقص في كل الأقسام. */ /* رف موحّد: مسار منزلق + بطاقة ثابتة في النهاية اليسرى. */ #page-welcome .home-shelf { display: flex; align-items: stretch; gap: 12px; padding: 10px; border-radius: 24px; background: rgba(var(--h-scrim), .34); border: 1px solid var(--h-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 12px 30px rgba(36, 26, 77, .07); } .dark #page-welcome .home-shelf { background: rgba(var(--h-scrim), .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 34px rgba(0, 0, 0, .18); } #page-welcome .home-row { position: relative; flex: 1 1 auto; min-width: 0; border-radius: 18px; } /* تلاشي خفيف عند مدخل بطاقة "عرض الكل" يجعل البطاقات كأنها تدخل في الرف. */ #page-welcome .home-row::after { content: ""; position: absolute; z-index: 5; inset-block: 0; inset-inline-end: 0; width: 34px; pointer-events: none; background: linear-gradient(to right, rgba(var(--h-scrim), .9), transparent); } #page-welcome .home-grid { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; /* مساحة للظل عند التحويم كي لا يُقصّ */ padding: 4px 2px 8px; scroll-padding-inline: 2px; /* نخفي شريط التمرير — التنقل بالأسهم والسحب */ scrollbar-width: none; -ms-overflow-style: none; } #page-welcome .home-grid::-webkit-scrollbar { display: none; } #page-welcome .home-grid > .home-tile { flex: 0 0 clamp(210px, 21vw, 268px); scroll-snap-align: start; } #page-welcome .home-grid--sm > .home-tile { flex-basis: clamp(150px, 15vw, 190px); } /* أسهم التنقل */ #page-welcome .home-arrow { position: absolute; top: 50%; transform: translateY(-50%); /* أعلى من z-index: 10 الموروث من .app-card في styles.css */ z-index: 20; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; border: 1px solid var(--h-line); background: var(--h-panel); color: var(--h-ink); box-shadow: var(--h-shadow); opacity: 0; transition: opacity .25s, background-color .2s, transform .2s; } #page-welcome .home-row:hover .home-arrow, #page-welcome .home-arrow:focus-visible { opacity: 1; } #page-welcome .home-arrow:hover { background: var(--h-violet); color: #fff; transform: translateY(-50%) scale(1.08); } #page-welcome .home-arrow[hidden] { display: none; } /* في RTL: التقدم يساراً، والرجوع يميناً */ #page-welcome .home-arrow--prev { inset-inline-start: 6px; } #page-welcome .home-arrow--next { inset-inline-end: 6px; } #page-welcome .home-arrow svg { width: 22px; height: 22px; } /* على اللمس لا يوجد تحويم — نعتمد السحب ونُخفي الأسهم */ @media (hover: none) { #page-welcome .home-arrow { display: none; } #page-welcome .home-grid { scroll-snap-type: x mandatory; } } /* نبطل الأنماط الزجاجية القديمة لـ .app-card داخل الواجهة الجديدة */ #page-welcome .home-tile { display: block; padding: 0 !important; font: inherit; text-align: inherit; position: relative; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; cursor: pointer; background: var(--h-tile-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--h-line) !important; box-shadow: var(--h-shadow); transition: transform .35s cubic-bezier(.34, 1.35, .64, 1), box-shadow .35s, border-color .35s; } #page-welcome .home-grid--sm .home-tile { aspect-ratio: 1 / 1; } #page-welcome .home-tile > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.4, 0, .2, 1); } /* الغلاف يحمل اسم اللعبة بخط عربي فاخر — لا نعتّم عليه إلا عند التحويم */ #page-welcome .home-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: linear-gradient(to top, rgba(10, 6, 22, .94) 0%, rgba(10, 6, 22, .42) 42%, transparent 72%); } #page-welcome .home-tile:hover { transform: translateY(-8px); box-shadow: var(--h-shadow-lg); border-color: rgba(251, 191, 36, .6) !important; } #page-welcome .home-tile:hover::after { opacity: 1; } #page-welcome .home-tile:hover > img { transform: scale(1.09); } #page-welcome .home-tinfo { position: absolute; bottom: 0; inset-inline: 0; z-index: 2; padding: 14px 16px; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; } #page-welcome .home-tile:hover .home-tinfo { opacity: 1; transform: translateY(0); } #page-welcome .home-tdesc { display: block; font-size: 13.5px; font-weight: 700; color: #e9e2ff; line-height: 1.6; } /* الاسم مكتوب داخل الغلاف بصرياً — نبقيه لمحركات البحث وقارئات الشاشة */ #page-welcome .home-tname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #page-welcome .home-play { /* أعلى اليسار بجوار المفضلة: المفضلة تأخذ الزاوية والتشغيل يليها */ position: absolute; top: 12px; inset-inline-end: 58px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: var(--h-gold-soft); color: #2a1500; opacity: 0; transform: scale(.65); transition: opacity .35s, transform .35s cubic-bezier(.34, 1.5, .64, 1); box-shadow: 0 5px 16px rgba(0, 0, 0, .35); } #page-welcome .home-tile:hover .home-play { opacity: 1; transform: scale(1); } /* شارات «نسخة تجريبية» و«منتج خاص» — أسفل البلاطة كي لا تزاحم شارة الصيانة (يمين) ولا زر المفضلة (يسار) */ #page-welcome .home-flags { position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 3; display: flex; gap: 5px; flex-wrap: wrap; max-width: calc(100% - 20px); pointer-events: none; } #page-welcome .home-flag { font-size: 10.5px; font-weight: 900; padding: 4px 10px; border-radius: 99px; color: #fff; white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); } #page-welcome .home-flag--beta { background: rgba(14, 165, 233, .95); border: 1px solid rgba(125, 211, 252, .7); } #page-welcome .home-flag--private { background: rgba(124, 58, 237, .95); border: 1px solid rgba(196, 181, 253, .6); } /* تختفي عند التحويم ليظهر الوصف دون ازدحام */ #page-welcome .home-tile:hover .home-flags { opacity: 0; transition: opacity .25s; } /* زر المفضلة */ /* الزاوية اليسرى العليا (inset-inline-end في RTL = يسار) */ #page-welcome .home-fav { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; width: 38px; height: 38px; padding: 8px; border: none; border-radius: 50%; cursor: pointer; background: rgba(0, 0, 0, .38); color: rgba(255, 255, 255, .72); backdrop-filter: blur(6px); opacity: 0; transform: scale(.65); transition: opacity .35s, transform .35s cubic-bezier(.34, 1.5, .64, 1), color .2s, background-color .2s; } #page-welcome .home-fav svg { width: 100%; height: 100%; display: block; } #page-welcome .home-tile:hover .home-fav, #page-welcome .home-fav:focus-visible, #page-welcome .home-fav.is-fav { opacity: 1; transform: scale(1); } #page-welcome .home-fav:hover { color: #fff; background: rgba(0, 0, 0, .55); } #page-welcome .home-fav.is-fav { color: var(--h-gold-soft); } /* على اللمس لا يوجد تحويم، فلا مفرّ من إبقاء النجمة ظاهرة وإلا تعذّرت المفضلة على الجوال — لكن نخفّفها بصرياً حتى لا تزاحم الغلاف، وتتضح فور إضافتها للمفضلة. */ @media (hover: none) { #page-welcome .home-fav { opacity: .5; transform: scale(.88); background: rgba(0, 0, 0, .28); } #page-welcome .home-fav.is-fav { opacity: 1; transform: scale(1); } } /* ملاحظة: لا نُخفي البلاطات مبدئياً بأي حال. جُرّب سابقاً ظهور متدرّج عبر IntersectionObserver فبقيت البلاطات الـ17 كلها opacity:0 ولم تظهر التطبيقات إطلاقاً. الظهور الفوري أهم من أي حركة دخول. */ #page-welcome .home-badge { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; font-size: 11px; font-weight: 900; padding: 5px 12px; border-radius: 99px; color: #fff; } #page-welcome .home-badge--hot { background: linear-gradient(135deg, #f43f5e, #be123c); } #page-welcome .home-badge--new { background: linear-gradient(135deg, #10b981, #047857); } #page-welcome .home-badge--soon { background: linear-gradient(135deg, #64748b, #475569); } /* بلاطة معطّلة (قريباً / صيانة) */ #page-welcome .home-tile.cursor-not-allowed { cursor: not-allowed; filter: grayscale(.65); opacity: .6; } #page-welcome .home-tile.cursor-not-allowed:hover { transform: none; border-color: var(--h-line) !important; } /* ======================================================= 4) الإحصائيات والتذييل ======================================================= */ #page-welcome .home-stats { background: var(--h-bg-3); padding: 38px 0; } .dark #page-welcome .home-stats { background: var(--h-panel); } #page-welcome .home-stats .home-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; } #page-welcome .home-st { text-align: center; padding: 18px; border-radius: 18px; background: var(--h-panel); border: 1px solid var(--h-line); box-shadow: var(--h-shadow); } .dark #page-welcome .home-st { background: rgba(255, 255, 255, .04); } #page-welcome .home-st b { display: block; font-family: AAGalaxy, 'Tajawal', sans-serif; font-size: 30px; font-weight: 900; } #page-welcome .home-st span { font-size: 13px; color: var(--h-muted); font-weight: 700; } #page-welcome .home-st:nth-child(1) b { color: #0891b2; } #page-welcome .home-st:nth-child(2) b { color: #059669; } .dark #page-welcome .home-st:nth-child(1) b { color: #67e8f9; } .dark #page-welcome .home-st:nth-child(2) b { color: #6ee7b7; } #page-welcome .home-foot { background: var(--h-bg-3); text-align: center; padding: 26px 22px 30px; color: var(--h-muted); font-size: 13px; border-top: 1px solid var(--h-line); } .dark #page-welcome .home-foot { background: #0b0718; } #page-welcome .home-foot a { color: var(--h-violet); text-decoration: none; cursor: pointer; } #page-welcome .home-foot a:hover { text-decoration: underline; } /* ======================================================= 5) الوصولية والحركة ======================================================= */ #page-welcome :where(a, button, .home-tile, .home-thumb):focus-visible { outline: 3px solid var(--h-gold); outline-offset: 3px; opacity: 1; } @media (prefers-reduced-motion: reduce) { #page-welcome *, #page-welcome *::before, #page-welcome *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } #page-welcome .home-stage-art img.is-on { transform: none; } #page-welcome .home-tile:hover, #page-welcome .home-thumb:hover, #page-welcome .home-b:hover { transform: none; } } /* ======================================================= 6) الشاشات الصغيرة ======================================================= */ @media (min-width: 861px) and (max-width: 1100px) { #page-welcome .home-nav .home-in { grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); gap: 10px; } #page-welcome .home-slogan { display: none; } #page-welcome .home-link { padding: 9px 10px; } } @media (max-width: 860px) { #page-welcome .home-hero-grid { grid-template-columns: 1fr; } #page-welcome .home-shelf { flex-direction: column; gap: 9px; padding: 8px; border-radius: 20px; } #page-welcome .home-all { order: -1; flex: 0 0 auto; width: 100%; min-height: 56px; padding: 8px 14px; border-radius: 15px; flex-direction: row; justify-content: flex-start; gap: 11px; text-align: right; } #page-welcome .home-all::before { inset-inline: 14px; } #page-welcome .home-all__icon { width: 38px; height: 38px; border-radius: 12px; } #page-welcome .home-all__icon svg { width: 21px; height: 21px; } /* الفن فوق والنص تحته */ #page-welcome .home-stage { aspect-ratio: auto; grid-template-columns: 1fr; grid-template-rows: auto auto; } #page-welcome .home-stage-art { order: -1; aspect-ratio: 3 / 2; } #page-welcome .home-stage-art::after { background: linear-gradient(to top, rgba(var(--h-scrim), .98) 0%, rgba(var(--h-scrim), .35) 16%, transparent 40%); } #page-welcome .home-stage-txt { padding: 20px 22px 26px; } #page-welcome .home-rail { flex-direction: row; overflow-x: auto; gap: 9px; padding: 10px; border-radius: 20px; scroll-snap-type: x proximity; scrollbar-width: none; } #page-welcome .home-rail::-webkit-scrollbar { display: none; } #page-welcome .home-rail::after { top: -1px; bottom: auto; inset-inline: 20px; width: auto; height: 2px; background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .42), rgba(217, 119, 6, .48), transparent); } #page-welcome .home-thumb { flex: 0 0 128px; scroll-snap-align: center; } #page-welcome .home-thumb:hover { transform: translateY(-2px) scale(1.01); } #page-welcome .home-thumb.is-on { transform: translateY(-2px) scale(1.025); } #page-welcome .home-thumb.is-on::after { top: -8px; right: auto; left: 50%; width: 12px; height: 8px; border: 0; background: color-mix(in srgb, var(--h-gold) 82%, white); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateX(-50%); box-shadow: none; filter: drop-shadow(0 -2px 5px rgba(251, 191, 36, .3)); } #page-welcome .home-grid { gap: 11px; padding: 8px 2px 12px; } #page-welcome .home-grid > .home-tile { flex-basis: 62vw; max-width: 260px; } #page-welcome .home-grid--sm > .home-tile { flex-basis: 40vw; max-width: 170px; } #page-welcome .home-band { padding: 34px 0; } #page-welcome .home-band::before { top: -16px; height: 17px; } #page-welcome .home-ico { width: 38px; height: 38px; border-radius: 12px; padding: 6px; } /* الشريط على الجوال: صف للهوية والحساب وصف تنقل مختصر للأقسام. */ #page-welcome .home-nav { padding-top: 8px; } #page-welcome .home-nav .home-in { grid-template-columns: 1fr auto; grid-template-areas: "brand acct" "links links"; width: calc(100% - 20px); height: auto; min-height: 96px; column-gap: 10px; row-gap: 5px; padding: 6px 7px 7px; border-radius: 18px; } #page-welcome .home-slogan, #page-welcome .home-nav-sp { display: none; } #page-welcome .home-nav-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; width: 100%; gap: 3px; padding: 3px; border-radius: 13px; background: rgba(109, 40, 217, .045); } .dark #page-welcome .home-nav-links { border-color: rgba(196, 181, 253, .11); background: rgba(255, 255, 255, .03); } #page-welcome .home-link { min-width: 0; min-height: 30px; justify-content: center; gap: 6px; padding: 6px 5px; border-radius: 10px; font-size: 11.5px; line-height: 1; } #page-welcome .home-link > span:last-child { display: none; } #page-welcome .home-link::after { content: attr(data-mobile-label); overflow: hidden; text-overflow: ellipsis; } #page-welcome .home-link-mark { width: 6px; height: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--link-accent, var(--h-violet)) 13%, transparent); } #page-welcome .home-brand { gap: 7px; } #page-welcome .home-brand::before { width: 3px; height: 24px; } #page-welcome .home-logo { height: 32px; } #page-welcome .home-nav-acct { gap: 3px; padding: 3px; border-radius: 14px; } #page-welcome .home-nav-acct > #btn-welcome-feedback, #page-welcome .home-nav-acct > #btn-header-login, #page-welcome .home-nav-acct > #btn-open-sidebar { width: 38px !important; height: 38px !important; border-radius: 11px !important; } #page-welcome .home-band { scroll-margin-top: 112px; } #page-welcome .home-hero { padding-top: 16px; } } /* على الهواتف شديدة الضيق نكدّس الزرين كي لا ينضغط النص أو تتلامس الأهداف. */ @media (max-width: 380px) { #page-welcome .home-btns { grid-template-columns: 1fr; width: 100%; } } /* «ريموت عبقر» داخل الشريط العلوي — نفس معاملة بقيّة أزرار المنصّة. لا قاعدة خاصة به: يُلحق بالمحدِّدات القائمة أعلاه. */ #page-welcome .home-nav-acct > #btn-presenter { position: static !important; inset: auto !important; z-index: auto !important; margin: 0 !important; padding: 0 !important; flex: none; width: 40px !important; height: 40px !important; border-radius: 12px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: var(--h-violet) !important; background: transparent !important; border-color: transparent !important; }