/* ═══════════════════════════════════════════════════════════════ ARC SADU — «لؤلؤ دافئ» Warm Pearl · طبقة الهوية الأساسية للموقع مصدر الحقيقة: هوية ARC المعتمدة 2026-09-04 (ARCIDENTITYSPEC.md · arc-identity.css) تُحمَّل قبل styles.css على كل صفحة. الخطوط عبر في (لا @import). القاعدة الحاكمة: هالات خلف كل شيء + بلور مُشبَع + حافة نوعية + ظلال ثلاثية. ═══════════════════════════════════════════════════════════════ */ /* ── ١) الرموز (Tokens) ── */ :root { /* الأرضية */ --bg-top:#EFE9DE; --bg-mid:#F4EFE6; --bg-bot:#E6DED0; --bg2:#E6DED0; /* الأسطح الزجاجية */ --panel:rgba(255,255,255,.34); --card:rgba(255,255,255,.42); --cardHi:rgba(255,255,255,.60); --bdr:rgba(72,52,32,.14); --rowDiv:rgba(72,52,32,.09); --inputBg:rgba(255,255,255,.55); --btn2Bg:rgba(255,255,255,.48); /* النص */ --txt:#2A211A; --muted:rgba(42,33,26,.62); --dim:rgba(42,33,26,.40); --btnTxt:#FFFFFF; /* اللون الرئيسي: برونز دافئ */ --acc:#8A5A2B; --acc2:#A87038; --gold:#F0D2A4; /* دلالية — ليست لوناً رئيسياً */ --ok:#3F7A54; --warn:#96661A; --err:#A8402F; --info:#2F5C8F; --pur:#5B3F86; --track:rgba(42,33,26,.10); /* الشريط الداكن (يُستعمل فقط حين يكون الشعار فاتحاً — غير مستعمل في الموقع) */ --bar-top:#46331F; --bar-mid:#3A2A1C; --bar-bot:#32231A; /* الخطوط */ --font:'Almarai', Tajawal, Cairo, sans-serif; --fontD:'Noto Kufi Arabic', Almarai, sans-serif; /* الاستدارة */ --r-sm:11px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px; /* الحركة — زنبرك حقيقي (linear) لا cubic-bezier */ --spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 100%); --bounce: linear(0, .218 2.1%, .862 6.5%, 1.114 8.6%, 1.209 10.5%, 1.231 12.4%, 1.192 14.5%, 1.043 18.7%, .985 21.1%, .968 23.3%, .994 27.9%, 1.014 33.7%, 1 100%); color-scheme: light; } /* ── ٢) الأرضية الحيّة — الهالات هي ما ينكسر عليه الزجاج. بدونها لا زجاج ── نسخة الصفحات الطويلة (أهدأ من لوحة النظام، نفس الألوان). */ html { background: var(--bg-mid); } body { color: var(--txt); font-family: var(--font); font-feature-settings: 'tnum' 1, 'kern' 1; -webkit-font-smoothing: antialiased; background: radial-gradient(820px 640px at 86% -10%, rgba(168,112,56,.32), transparent 64%), radial-gradient(700px 580px at 0% 38%, rgba(94,132,108,.20), transparent 66%), radial-gradient(880px 560px at 54% 102%, rgba(206,166,112,.30), transparent 66%), radial-gradient(560px 560px at 30% 14%, rgba(150,102,26,.15), transparent 66%), linear-gradient(152deg, #EFE9DE 0%, #F5F0E7 44%, #E6DED0 100%); background-attachment: fixed; } /* iOS يتجاهل fixed على body ويكرّر الهالات — نثبّتها بطبقة خلفية مستقلة على اللمس */ @media (pointer: coarse) { body { background-attachment: scroll; background-size: 100% 100vh; background-repeat: no-repeat; } } ::selection { background: rgba(138,90,43,.24); } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(72,52,32,.20); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(138,90,43,.42); } :focus-visible { outline: 2.5px solid var(--acc); outline-offset: 2px; } @property --ang { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes arcSpin { to { --ang: 360deg } } @supports (corner-shape: squircle) { .glass, .btn, .dn-cta, .dn-card { corner-shape: squircle; } } /* ── ٣) الزجاج — أربع طبقات معاً ── */ .glass { position: relative; z-index: 1; border: 1px solid transparent; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--cardHi), var(--card)) padding-box, linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.42) 34%, var(--bdr) 72%) border-box; -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.05); backdrop-filter: blur(30px) saturate(190%) brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(72,52,32,.05), 0 1px 2px rgba(58,40,22,.07), 0 6px 14px -6px rgba(58,40,22,.10), 0 26px 46px -28px rgba(58,40,22,.30); transition: transform .55s var(--spring), box-shadow .38s ease; } .glass.lift:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(72,52,32,.05), 0 2px 4px rgba(58,40,22,.08), 0 12px 24px -8px rgba(58,40,22,.14), 0 40px 64px -32px rgba(58,40,22,.38); } /* الضوء المتتبّع: مزج عادي (لا screen — screen بأبيض فوق فاتح = لا شيء) */ .track { --mx: 50%; --my: 0%; } .spec { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .32s ease; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(255,255,255,.34), transparent 58%), radial-gradient(420px circle at var(--mx) var(--my), rgba(190,141,80,.09), transparent 70%); } .track:hover .spec { opacity: 1; } .glass > *:not(.spec) { position: relative; z-index: 1; } /* المحتوى يعلو الضوء دائماً */ /* لوح زجاجي كبير (شريط تنقّل ثابت · تذييل) — بلور أخف */ .panel { background: var(--panel); -webkit-backdrop-filter: blur(28px) saturate(175%); backdrop-filter: blur(28px) saturate(175%); box-shadow: inset 0 -1px 0 rgba(255,255,255,.55), 0 6px 26px -18px rgba(58,40,22,.30); } /* ── ٤) الأزرار — .btn + نوعه (والموقع يعكسها على .dn-cta في styles.css) ── */ .btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-md); cursor: pointer; font-weight: 700; text-decoration: none; font-family: var(--font); font-size: 13px; padding: 9px 20px; line-height: 1.4; transition: transform .5s var(--bounce), box-shadow .28s ease, filter .2s ease; } .btn::after, .dn-cta::after { content: ''; position: absolute; top: 0; left: -150%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); pointer-events: none; transition: left .62s cubic-bezier(.2,.8,.3,1); } .btn:hover::after, .dn-cta:hover::after { left: 170%; } .btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .btn:active { transform: translateY(0) scale(.965); transition-duration: .09s; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; filter: none; } .btn > * { position: relative; z-index: 1; pointer-events: none; } .btn-lg { font-size: 15px; padding: 13px 28px; border-radius: 14px; } /* رئيسي: تدرّج برونزي بحافة مخروطية تدور عند التحويم */ .btn-p { color: #fff; border: 1.5px solid transparent; background: linear-gradient(165deg, var(--acc2), var(--acc)) padding-box, conic-gradient(from var(--ang), var(--acc), var(--gold) 22%, var(--acc2) 42%, var(--acc) 62%, var(--acc)) border-box; /* noflip */ box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 2px 5px rgba(58,40,22,.20), 0 10px 22px -10px var(--acc); } .btn-p:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 4px 9px rgba(58,40,22,.22), 0 18px 34px -12px var(--acc); animation: arcSpin 3.2s linear infinite; } /* ثانوي: زجاجي */ .btn-s { color: var(--txt); border: 1px solid var(--bdr); background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.50)); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(58,40,22,.08); } .btn-s:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 5px 14px rgba(58,40,22,.13); } /* خطر */ .btn-d { color: #fff; border: none; background: linear-gradient(165deg,#C05545,#A8402F); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(58,40,22,.18); } /* شبح */ .btn-g { color: var(--muted); border: 1px solid transparent; background: transparent; box-shadow: none; } .btn-g:hover:not(:disabled) { color: var(--txt); background: rgba(255,255,255,.46); border-color: var(--bdr); } /* موجة النقر (تُضاف بالـJS) */ @keyframes arcRipple { from { transform: scale(0); opacity: .42 } to { transform: scale(2.8); opacity: 0 } } .rip { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; width: 120px; height: 120px; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.15) 65%, transparent 72%); animation: arcRipple .62s cubic-bezier(.2,.7,.3,1) forwards; } /* ── ٥) الحقول ── */ input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select { font-family: var(--font); font-size: 15px; color: var(--txt); background: var(--inputBg); border: 1px solid var(--bdr); border-radius: var(--r-md); padding: 11px 14px; transition: box-shadow .24s ease, border-color .24s ease, background .24s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--acc); background: rgba(255,255,255,.82); box-shadow: 0 0 0 3.5px rgba(138,90,43,.14), inset 0 1px 2px rgba(58,40,22,.05); } input::placeholder, textarea::placeholder { color: var(--dim); opacity: 1; } select option { background: #F4EFE6; color: #2A211A; } /* ── ٦) الصفوف والرقاقات ── */ .row { transition: background .22s ease, padding .22s ease, box-shadow .34s var(--spring), transform .34s var(--spring); border-radius: var(--r-sm); } .row:hover { background: color-mix(in srgb, var(--acc) 9%, rgba(255,255,255,.66)); box-shadow: inset 3px 0 0 0 var(--acc), 0 8px 20px -12px rgba(58,40,22,.42); transform: translateY(-1px); padding-inline: 10px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: color-mix(in srgb, currentColor 12%, rgba(255,255,255,.55)); border: 1px solid color-mix(in srgb, currentColor 28%, transparent); } /* ── ٧) المؤشرات (أرقام كبيرة) — خط سفلي ينمو عند التحويم ── */ .kpi { position: relative; overflow: hidden; } .kpi::after { content: ''; position: absolute; bottom: 0; right: 0; height: 2.5px; width: 0; opacity: .9; background: linear-gradient(270deg, currentColor, transparent); transition: width .55s var(--spring); pointer-events: none; } .kpi:hover::after { width: 100%; } .num { font-family: var(--fontD); font-variant-numeric: tabular-nums; font-weight: 700; } /* ── ٨) الحركة — الدخول بـbackwards لا both (both يقتل الـhover) ── */ @keyframes arcRise { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } } @keyframes arcSweep { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } } .rise { animation: arcRise .75s var(--spring) backwards; } .rise-2 { animation-delay: .08s } .rise-3 { animation-delay: .16s } .rise-4 { animation-delay: .24s } .skel { position: relative; overflow: hidden; height: 38px; border-radius: 13px; background: rgba(255,255,255,.44); border: 1px solid var(--bdr); } .skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); animation: arcSweep 1.5s infinite; background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent); } /* الشعار: توهّج ذهبي خفيف + تكبير طفيف */ .logo img { transition: transform .55s cubic-bezier(.22,1.1,.36,1), filter .35s ease; } .logo:hover img { transform: scale(1.06); filter: drop-shadow(0 0 11px rgba(240,210,164,.55)); } /* أيقونة في مربّع برونزي بشفافية 12% (وصفة بطاقات الخدمات) */ .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-family: var(--fontD); background: color-mix(in srgb, var(--acc) 12%, rgba(255,255,255,.6)); color: var(--acc); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }