/* Theme Name: Hoda Law Theme URI: https://mediumvioletred-quetzal-257243.hostingersite.com/ Author: Hoda Rashad Law Office Description: قالب ووردبريس مخصّص لمكتب الدكتورة هدى رشاد محمد للمحاماة — 5 صفحات (الرئيسية، من نحن، الخدمات، مكاتبنا، تواصل معنا)، عربي RTL، بدون جافاسكريبت. Version: 1.0.0 Requires at least: 5.9 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: hoda-law */ @charset "UTF-8"; /* ════════════════════════════════════════════════════════════════════ مكتب الدكتورة هدى رشاد محمد للمحاماة — ورقة الأنماط HTML + CSS فقط · بدون JavaScript · RTL · Mobile-first friendly ──────────────────────────────────────────────────────────────────── الفهرس: 01. المتغيرات 07. الهيرو 13. لماذا نحن 19. النموذج 02. إعادة الضبط 08. شريط الثقة 14. الخطوات 20. الفوتر 03. الطباعة 09. عن المكتب 15. شريط CTA 21. العائمة 04. الأيقونات 10. بطاقات الخدمات 16. الأسئلة 22. الأنميشن 05. الأزرار 11. قسم النقض 17. الآراء 23. الميديا 06. الهيدر 12. القضاء الإداري 18. المكاتب 24. الوصول ════════════════════════════════════════════════════════════════════ */ /* ══ 01 · المتغيرات ══════════════════════════════════════════════ */ :root{ /* الأخضر الزيتوني */ --ink-900:#0B1A13; --ink-800:#12291F; --ink-700:#1E4433; --ink-600:#2A5C45; --ink-500:#3B7859; /* الذهبي */ --gold-900:#7A6217; --gold-500:#C9A227; --gold-400:#E0C266; --gold-300:#F0DFA8; /* المحايدة */ --sand-50:#FAF8F2; --sand-100:#F1ECE0; --sand-200:#E4DDCB; --white:#FFFFFF; --text-900:#101A14; --text-700:#2C3A33; --text-600:#4C5A52; --text-500:#6B7A72; --on-dark:#EAF0EC; --on-dark-dim:#B4C4BA; --line:rgba(16,26,20,.12); --line-light:rgba(255,255,255,.16); /* الظلال */ --sh-1:0 2px 8px rgba(11,26,19,.06); --sh-2:0 10px 30px rgba(11,26,19,.10); --sh-3:0 22px 60px rgba(11,26,19,.18); --sh-gold:0 12px 34px rgba(201,162,39,.28); /* الخطوط */ --f-head:"Amiri","Times New Roman",serif; --f-body:"Cairo","Segoe UI",Tahoma,sans-serif; /* المقاييس */ --r-sm:8px; --r-md:14px; --r-lg:22px; --sec-y:clamp(3.5rem,7vw,7rem); --head-h:74px; --ease:cubic-bezier(.2,.7,.25,1); } /* ══ 02 · إعادة الضبط ════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;} *{margin:0;padding:0;} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 12px); } body{ font-family:var(--f-body); font-size:clamp(15px,.42vw + 14px,17px); line-height:1.85; color:var(--text-700); background:var(--white); overflow-x:hidden; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;height:auto;background:var(--sand-100);} a{color:inherit;text-decoration:none;} ul,ol{list-style:none;} button,input,select,textarea{font:inherit;color:inherit;} button{background:none;border:0;cursor:pointer;} /* حاوية واحدة تضمن هامشاً جانبياً 16px في كل العروض */ .wrap{width:min(1180px,100% - 2rem);margin-inline:auto;} .wrap--narrow{width:min(860px,100% - 2rem);} .section{padding-block:var(--sec-y);position:relative;} .section--sand{background:var(--sand-50);} .section--dark{ background:linear-gradient(150deg,var(--ink-900) 0%,var(--ink-700) 65%,var(--ink-600) 100%); color:var(--on-dark); } /* قسم داكن بصورة خلفية خافتة */ .section--photo{isolation:isolate;} .section__bg{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center center;z-index:-2; opacity:.5;filter:grayscale(.5) contrast(1.05) brightness(.95); } .section--photo::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(120% 90% at 78% 10%,rgba(201,162,39,.14),transparent 58%), linear-gradient(150deg,rgba(11,26,19,.86) 0%,rgba(18,41,31,.8) 48%,rgba(30,68,51,.76) 100%); } .section--dark > .wrap{position:relative;z-index:1;} .skip-link{ position:absolute;inset-inline-start:-9999px;top:0;z-index:999; background:var(--gold-500);color:var(--ink-900);padding:.7rem 1.2rem; font-weight:700;border-radius:0 0 var(--r-sm) var(--r-sm); } .skip-link:focus{inset-inline-start:1rem;} /* ══ 03 · الطباعة ════════════════════════════════════════════════ */ .h2{ font-family:var(--f-head); font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.35;font-weight:700;color:var(--ink-800); letter-spacing:-.01em; } .h2--light{color:var(--white);} h3{font-family:var(--f-body);font-weight:700;color:var(--ink-800);line-height:1.5;} .lead{font-size:1.06em;color:var(--text-600);} p + p{margin-top:.9rem;} .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-size:.82rem;font-weight:700;letter-spacing:.08em; color:var(--gold-900);text-transform:none;margin-bottom:.9rem; } .eyebrow--light{color:var(--gold-400);} .eyebrow__line{width:34px;height:2px;background:currentColor;display:inline-block;flex:none;} .sec-head{max-width:760px;margin-inline:auto;text-align:center;margin-bottom:clamp(2.2rem,4vw,3.6rem);} .sec-head .eyebrow{justify-content:center;} .sec-head__sub{margin-top:1rem;color:var(--text-600);} .section--dark .sec-head__sub{color:var(--on-dark-dim);} .sec-head__sub--warn{ color:var(--gold-900);font-size:.86rem;font-weight:600; background:rgba(201,162,39,.12);border:1px dashed rgba(201,162,39,.5); padding:.5rem .9rem;border-radius:var(--r-sm);display:inline-block; } /* فاصل ذهبي بمعيّن */ .divider{ display:block;width:150px;height:1px;margin:1.6rem auto 0; background:linear-gradient(90deg,transparent,var(--gold-500),transparent); position:relative; } .divider::after{ content:"";position:absolute;inset-inline-start:50%;top:50%; width:9px;height:9px;background:var(--gold-500); transform:translate(-50%,-50%) rotate(45deg); } .divider--light{background:linear-gradient(90deg,transparent,var(--gold-400),transparent);} .divider--light::after{background:var(--gold-400);} .ticks{margin-top:1.5rem;display:grid;gap:.7rem;} .ticks li{position:relative;padding-inline-start:2rem;color:var(--text-600);} .ticks li::before{ content:"";position:absolute;inset-inline-start:0;top:.62em; width:11px;height:11px;background:var(--gold-500); transform:rotate(45deg);border-radius:2px; } /* أي رقم أو بريد: يُعرض بترتيبه الصحيح داخل نص عربي */ .num{ direction:ltr;unicode-bidi:isolate; display:inline-block;font-variant-numeric:lining-nums; } /* ══ 04 · الأيقونات (SVG داخل CSS عبر mask) ══════════════════════ */ .ic{ display:inline-block;width:1em;height:1em;flex:none; background-color:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; vertical-align:-.13em; } .ic--clock,.ic--clock2{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");} .ic--pin{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");} /* أيقونة الهاتف مقلوبة أفقياً (transform:scaleX(-1)) لتقرأ بشكل صحيح في اتجاه RTL — سمّاعة الهاتف أصلاً مرسومة لسياق LTR. */ .ic--phone,.ic--phone2{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.6 4-2 1.4a12.5 12.5 0 0 0 6.5 6.5l1.4-2 4 1.6v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.5 5.2 2 2 0 0 1 6.5 3z'/%3E%3C/svg%3E"); transform:scaleX(-1); } .ic--gavel{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h10'/%3E%3Cpath d='M6.5 17.5 14 10'/%3E%3Crect x='12.2' y='4.6' width='8.4' height='4.6' rx='1' transform='rotate(45 16.4 6.9)'/%3E%3C/svg%3E");} .ic--pillar{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M4 20V9m5 11V9m6 11V9m5 11V9M2.5 9h19L12 3.5 2.5 9z'/%3E%3C/svg%3E");} .ic--shield{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.1 8.4-7.5 9.5-4.4-1.1-7.5-4.9-7.5-9.5V6L12 3z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E");} .ic--family{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9.5' r='2.4'/%3E%3Cpath d='M2.5 20c0-3.3 2.5-5.5 5.5-5.5s5.5 2.2 5.5 5.5M15 14.8c2.8-.4 6 1.3 6 5.2'/%3E%3C/svg%3E");} .ic--home{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");} .ic--briefcase{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12.5' rx='2'/%3E%3Cpath d='M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3 12.5h18'/%3E%3C/svg%3E");} .ic--worker{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 20.5c0-3.9 3.1-6.5 7-6.5s7 2.6 7 6.5'/%3E%3Cpath d='M4 6.5h16'/%3E%3C/svg%3E");} .ic--tax{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-1.8L12 21l-3-1.8L6 21z'/%3E%3Cpath d='m9.5 14.5 5-5'/%3E%3Ccircle cx='9.8' cy='9.8' r='1'/%3E%3Ccircle cx='14.2' cy='14.2' r='1'/%3E%3C/svg%3E");} .ic--balance{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M4 7h16M12 5.5 4 7l-2.2 5.5a3.6 3.6 0 0 0 4.4 0L4 7M12 5.5 20 7l2.2 5.5a3.6 3.6 0 0 1-4.4 0L20 7'/%3E%3C/svg%3E");} .ic--pen{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10-10a2.5 2.5 0 0 0-3.5-3.5L4.5 16.5 4 20z'/%3E%3Cpath d='m13.5 7 3.5 3.5'/%3E%3C/svg%3E");} .ic--scroll{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h10a2 2 0 0 1 2 2v14a2 2 0 0 0 2 2H8a2 2 0 0 1-2-2V3z'/%3E%3Cpath d='M4 7h2M9.5 8h5M9.5 12h5M9.5 16h3'/%3E%3C/svg%3E");} .ic--key{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4'/%3E%3Cpath d='m10.5 12.5 8-8M16 7l2.5 2.5M14 9l2.5 2.5'/%3E%3C/svg%3E");} .ic--eye{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");} .ic--doc{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z'/%3E%3Cpath d='M14 3v5h5M8.5 12.5h7M8.5 16h5'/%3E%3C/svg%3E");} .ic--wallet{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M16.5 14.5h1.5'/%3E%3C/svg%3E");} .ic--chat{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.6c0 4.2-4 7.6-9 7.6a10 10 0 0 1-3-.45L4 20.5l1.4-3.4A7.2 7.2 0 0 1 3 11.6C3 7.4 7 4 12 4s9 3.4 9 7.6z'/%3E%3C/svg%3E");} .ic--wa{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884a9.82 9.82 0 0 1 6.988 2.896 9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.886-9.885 9.886m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0 0 20.464 3.488'/%3E%3C/svg%3E");} .ic--mail{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.8 6.6 8.2 6 8.2-6'/%3E%3C/svg%3E");} /* ══ 05 · الأزرار ════════════════════════════════════════════════ */ .btn{ position:relative;isolation:isolate;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:.6rem; min-height:48px;padding:.75rem 1.7rem; font-family:var(--f-body);font-weight:700;font-size:.95rem;line-height:1.2; letter-spacing:.005em;border-radius:12px; transition:transform .35s var(--ease),box-shadow .35s var(--ease), color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease); } /* طبقة التعبئة */ .btn::before{ content:"";position:absolute;inset:0;z-index:-2; transform:scaleX(0);transform-origin:right; transition:transform .45s var(--ease); } /* لمعة تمرّ عبر الزر */ .btn::after{ content:"";position:absolute;top:0;bottom:0;width:45%;z-index:-1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent); transform:translateX(-190%) skewX(-14deg); transition:transform .85s cubic-bezier(.2,.8,.2,1); pointer-events:none; } .btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);} .btn:hover::after,.btn:focus-visible::after{transform:translateX(330%) skewX(-14deg);} .btn:hover,.btn:focus-visible{transform:translateY(-3px);} .btn:active{transform:translateY(-1px) scale(.99);} .btn .ic{font-size:1.15em;} /* ذهبي — الزر الأساسي */ .btn--gold{ background:linear-gradient(160deg,var(--gold-400) 0%,var(--gold-500) 48%,#AC8A1D 100%); color:#231B04; border:1px solid rgba(255,255,255,.32); box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 -1px 0 rgba(0,0,0,.14) inset, 0 10px 26px -10px rgba(201,162,39,.75); } .btn--gold::before{background:linear-gradient(160deg,var(--gold-300),var(--gold-400));} .btn--gold:hover,.btn--gold:focus-visible{ box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 16px 34px -12px rgba(201,162,39,.9); } /* شفاف بحدّ — للخلفيات الداكنة */ .btn--ghost{ color:#fff;background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.4); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .btn--ghost::before{background:linear-gradient(160deg,#fff,#EFEFE8);} .btn--ghost:hover,.btn--ghost:focus-visible{ color:var(--ink-900);border-color:#fff; box-shadow:0 14px 30px -14px rgba(0,0,0,.6); } /* داكن — للخلفيات الفاتحة */ .btn--dark{ background:linear-gradient(160deg,var(--ink-700),var(--ink-900)); color:#fff;border:1px solid rgba(201,162,39,.38); box-shadow:0 10px 26px -12px rgba(11,26,19,.7); } .btn--dark::before{background:linear-gradient(160deg,var(--gold-400),var(--gold-500));} .btn--dark:hover,.btn--dark:focus-visible{color:#231B04;border-color:var(--gold-400);} /* ── الزر المميّز (كبسولة بسهم دائري) ── */ .btn--pill{ --chip:46px; gap:1.1rem; /* خصائص منطقية (وليست فيزيائية): مساحة مريحة في جهة النص، وضيقة في جهة الدائرة الذهبية حتى تلتصق بحافة الزر البيضاوي المستديرة — هذا ما كان معكوساً فيجعل المحتوى يبدو غير متمركز داخل الزر. */ padding-block:.55rem; padding-inline-start:1.9rem; padding-inline-end:.55rem; min-height:64px;border-radius:999px; background:linear-gradient(160deg,var(--ink-700),var(--ink-900)); color:#fff;border:1px solid rgba(201,162,39,.4); box-shadow:0 14px 34px -16px rgba(11,26,19,.85), 0 0 0 0 rgba(201,162,39,.35); font-size:1.02rem; } .btn--pill::before{background:linear-gradient(160deg,var(--gold-400),var(--gold-500));} .btn--pill .btn__label{position:relative;z-index:1;transition:color .3s var(--ease);} .btn--pill .btn__chip{ position:relative;z-index:1;flex:none; width:var(--chip);height:var(--chip);border-radius:50%; background:var(--gold-500); display:grid;place-items:center; transition:background .3s var(--ease),transform .45s var(--ease); } .btn--pill .btn__chip::before{ content:"";width:19px;height:19px; background-color:#231B04; -webkit-mask:var(--arrow) center/contain no-repeat; mask:var(--arrow) center/contain no-repeat; transition:background-color .3s; } .btn--pill{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");} .btn--pill:hover,.btn--pill:focus-visible{ color:#231B04;border-color:var(--gold-400); box-shadow:0 20px 44px -18px rgba(201,162,39,.85); } .btn--pill:hover .btn__chip,.btn--pill:focus-visible .btn__chip{ background:var(--ink-900);transform:translateX(-6px); } .btn--pill:hover .btn__chip::before,.btn--pill:focus-visible .btn__chip::before{background-color:var(--gold-400);} .btn--lg{min-height:56px;padding:.95rem 2.1rem;font-size:1rem;} .btn--block{width:100%;} /* ══ 06 · الشريط العلوي والهيدر ══════════════════════════════════ */ .topbar{ background:var(--ink-900);color:var(--on-dark-dim); font-size:.82rem;border-bottom:1px solid rgba(201,162,39,.22); } .topbar__inner{ display:flex;align-items:center;gap:1rem; min-height:44px;flex-wrap:nowrap; } .topbar__item{ display:inline-flex;align-items:center;gap:.45rem; line-height:1;white-space:nowrap; } .topbar__item > span:last-child{line-height:1;padding-top:1px;} .topbar__item .ic{ color:var(--gold-500);font-size:15px; width:15px;height:15px;vertical-align:0;flex:none; } .topbar__sep{width:1px;height:14px;background:rgba(201,162,39,.35);flex:none;} .topbar__phone{ margin-inline-start:auto;color:var(--gold-400); font-weight:700;transition:color .25s; } .topbar__phone:hover{color:var(--gold-300);} .site-header{ position:sticky;top:0;z-index:60; background:rgba(18,41,31,.92); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid rgba(201,162,39,.2); color:#fff; } .header__inner{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center;gap:1rem;min-height:var(--head-h); } /* الشعار */ .brand{display:inline-flex;align-items:center;gap:.75rem;flex:none;grid-column:1;justify-self:start;} .brand__mark{ width:46px;height:46px;flex:none; display:block;object-fit:contain; background:none;border:0;box-shadow:none; transition:transform .35s var(--ease); } .brand:hover .brand__mark{transform:scale(1.06);} .brand__text{display:grid;line-height:1.35;} .brand__name{font-family:var(--f-head);font-size:1.15rem;font-weight:700;color:#fff;} .brand__sub{font-size:.74rem;color:var(--gold-400);letter-spacing:.02em;} /* القائمة — على الشاشات الكبيرة تصبح