/* ===== Chic Site Background (clean, no noise) ===== */ :root{ --bg-fallback: #f4f6f8; --overlay-weak: rgba(15,23,42,.06); --overlay-strong: rgba(15,23,42,.16); --blob-green: rgba(34,197,94,.12); --blob-red: rgba(239,68,68,.10); } /* الخلفية */ .site-with-bg{ position: relative; min-height: 100vh; background-color: var(--bg-fallback); background-image: var(--flag-url); /* نمررها من الـ */ background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: scroll; /* mobile */ z-index: 0; } /* طبقة تأثيرات (بدون نويز) */ .site-with-bg::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(40% 35% at var(--gx,25%) var(--gy,18%), var(--blob-green), transparent 60%), radial-gradient(38% 32% at calc(100% - var(--gx,25%)) calc(100% - var(--gy,18%)), var(--blob-red), transparent 60%), linear-gradient(180deg, var(--overlay-weak), var(--overlay-strong)); animation: bg-blobs 16s ease-in-out infinite alternate; filter: saturate(1.05) contrast(1.02); } /* لا يوجد ::after إطلاقًا هنا (حتى نتجنب أي Data-URL) */ @keyframes bg-blobs{ 0% { --gx: 24%; --gy: 18%; } 50% { --gx: 32%; --gy: 24%; } 100% { --gx: 22%; --gy: 14%; } } @media (min-width: 992px){ .site-with-bg{ background-attachment: fixed; } } @media (prefers-reduced-motion: reduce){ .site-with-bg{ background-attachment: scroll !important; } .site-with-bg::before{ animation: none !important; } } /* خلي المحتوى فوق الخلفية */ .site-with-bg > *{ position: relative; z-index: 1; } @supports (backdrop-filter: blur(1px)){ .site-with-bg::before{ backdrop-filter: blur(0.6px); } }