/* ========================================================================== شركة الخليج العربي — الأنماط (الإصدار 2: «المدّ») هوية بحرية: كحلي عميق، أزرق سماوي، موجتان مزدوجتان من الشعار، ولمسات برتقالية للأفعال. زوايا «الشراع» (ركن منخفض الانحناء) للبطاقات، وإطارات متوهجة للصور. خصائص منطقية (inline/block) لتعمل العربية والإنجليزية بالملف نفسه. ========================================================================== */ :root { --ga-navy: #13265C; --ga-navy-2: #1E3A8A; --ga-deep: #0E1D4B; --ga-sky: #0EA5E9; --ga-sky-2: #38BDF8; --ga-ocean: #0284C7; --ga-sun: #F59E0B; --ga-cta: #C2410C; --ga-cta-2: #9A3412; --ga-wa: #15803D; --ga-rose: #e5487f; --ga-foam: #EAF6FD; --ga-mist: #F3F8FD; --ga-sand: #FFF6E5; --ga-line: #D3E3F3; --ga-text: #13265C; --ga-body: #22335F; --ga-muted: #42557F; --ga-r-xl: 30px; --ga-r-lg: 22px; --ga-r-md: 16px; --ga-r-sm: 11px; --ga-sail: 26px 26px 26px 7px; --ga-shadow: 0 22px 48px -30px rgba(19, 38, 92, .55); --ga-shadow-sm: 0 12px 26px -20px rgba(19, 38, 92, .6); --ga-font: 'Almarai', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif; --ga-ease: cubic-bezier(.2, .7, .2, 1); --accent: var(--ga-sky); --ink: color-mix(in srgb, var(--accent) 58%, #0B1A44); --tint: color-mix(in srgb, var(--accent) 10%, #fff); } [dir="rtl"] { --ga-sail: 26px 26px 7px 26px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; font-family: var(--ga-font); font-size: 16px; line-height: 1.75; color: var(--ga-body); background: var(--ga-mist); overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @supports (overflow: clip) { body { overflow-x: clip; } } img, svg, video, iframe { max-width: 100%; } img { height: auto; display: block; } a { color: var(--ga-ocean); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--ga-navy); } h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .5em; font-weight: 800; color: var(--ga-navy); } p { margin: 0 0 1em; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--ga-sun); outline-offset: 3px; border-radius: 8px; } .ga-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ga-skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 2147483100; background: var(--ga-navy); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; transition: top .2s; } .ga-skip:focus { top: 12px; color: #fff; } [dir="rtl"] .ga-flip { transform: scaleX(-1); } .ga-ico { flex: none; } .ga-main:focus { outline: none; } .ga-main { display: block; } .ga-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 16px; } .ga-wrap--narrow { max-width: 900px; } .ga-wrap--form { max-width: 920px; } @media (min-width: 768px) { .ga-wrap { padding-inline: 28px; } } /* ---------- حركة الظهور عند التمرير (تُفعَّل من السكربت فقط) ---------- */ .ga-rv-on [data-ga-rv] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ga-ease), transform .7s var(--ga-ease); transition-delay: calc(var(--d, 0) * 90ms); } .ga-rv-on [data-ga-rv].is-in { opacity: 1; transform: none; } /* ---------- الأزرار ---------- */ .ga-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; isolation: isolate; overflow: hidden; min-height: 48px; padding: 10px 22px; border-radius: 14px; border: 2px solid transparent; font-weight: 800; font-size: 15px; line-height: 1.3; text-decoration: none; cursor: pointer; transition: transform .2s var(--ga-ease), box-shadow .2s, background-color .2s, color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; } .ga-btn::after { /* لمعة تعبر الزر عند المرور */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%); transform: translateX(-120%); transition: transform .6s var(--ga-ease); } .ga-btn:hover::after { transform: translateX(120%); } .ga-btn:hover { transform: translateY(-2px); } .ga-btn:active { transform: translateY(0) scale(.98); } .ga-btn--lg { min-height: 54px; padding-inline: 26px; font-size: 16px; border-radius: 16px; } .ga-btn--block { width: 100%; } .ga-btn--cta { background: linear-gradient(135deg, var(--ga-cta), var(--ga-cta-2)); color: #fff; box-shadow: 0 12px 26px -12px rgba(194, 65, 12, .85); } .ga-btn--cta:hover { color: #fff; box-shadow: 0 16px 30px -12px rgba(194, 65, 12, .95); } .ga-btn--primary, .ga-btn--navy { background: linear-gradient(135deg, var(--ga-navy-2), var(--ga-navy)); color: #fff; box-shadow: 0 12px 26px -14px rgba(19, 38, 92, .9); } .ga-btn--primary:hover, .ga-btn--navy:hover { color: #fff; } .ga-btn--rose { background: linear-gradient(135deg, #c42f66, #9d1f52); color: #fff; box-shadow: 0 12px 24px -12px rgba(196, 47, 102, .85); } .ga-btn--rose:hover { color: #fff; } .ga-btn--wa { background: linear-gradient(135deg, #16a34a, var(--ga-wa)); color: #fff; box-shadow: 0 12px 24px -12px rgba(21, 128, 61, .85); } .ga-btn--wa:hover { color: #fff; } .ga-btn--accent { background: var(--ink); color: #fff; } .ga-btn--accent:hover { color: #fff; filter: brightness(1.12); } .ga-btn--ghost { background: #fff; color: var(--ga-navy); border-color: var(--ga-line); } .ga-btn--ghost:hover { border-color: var(--ga-sky); color: var(--ga-ocean); } .ga-btn--light { background: #fff; color: var(--ga-navy); box-shadow: var(--ga-shadow-sm); } .ga-btn--light:hover { color: var(--ga-ocean); } .ga-btn--glass, .ga-btn--outline-light { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ga-btn--glass:hover, .ga-btn--outline-light:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: #fff; } .ga-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ga-ocean); text-decoration: none; } .ga-link:hover { color: var(--ga-navy); } .ga-link svg { transition: transform .2s; } .ga-link:hover svg { transform: translateX(4px); } [dir="rtl"] .ga-link:hover svg { transform: scaleX(-1) translateX(4px); } /* ---------- الرأس ---------- */ .ga-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-block-end: 1px solid rgba(14, 165, 233, .18); transition: box-shadow .25s, background-color .25s; } .ga-header.is-scrolled { box-shadow: 0 14px 34px -24px rgba(19, 38, 92, .6); background: rgba(255, 255, 255, .97); } .admin-bar .ga-header { top: 32px; } @media (max-width: 782px) { .admin-bar .ga-header { top: 0; } } .ga-header__progress { position: absolute; inset-inline: 0; bottom: -1px; height: 3px; overflow: hidden; pointer-events: none; } .ga-header__progress span { display: block; height: 100%; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left center; background: linear-gradient(90deg, var(--ga-sky), var(--ga-sky-2), var(--ga-sun)); } [dir="rtl"] .ga-header__progress span { transform-origin: right center; background: linear-gradient(270deg, var(--ga-sky), var(--ga-sky-2), var(--ga-sun)); } .ga-header__in { display: flex; align-items: center; gap: 14px; min-height: 76px; transition: min-height .25s var(--ga-ease); } .ga-header.is-scrolled .ga-header__in { min-height: 64px; } .ga-brand { display: flex; align-items: center; flex: none; text-decoration: none; } .ga-brand__logo { width: auto; height: 54px; max-width: 170px; object-fit: contain; transition: height .25s var(--ga-ease); } .ga-header.is-scrolled .ga-brand__logo { height: 44px; } .ga-header__tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .ga-lang { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 12px; font-weight: 800; font-size: 14px; color: var(--ga-navy); text-decoration: none; border: 1.5px solid var(--ga-line); background: #fff; } .ga-lang:hover { border-color: var(--ga-sky); color: var(--ga-ocean); } .ga-lang__ico { display: inline-flex; color: var(--ga-sky); } .ga-header__cta { min-height: 44px; padding-inline: 16px; white-space: nowrap; border-radius: 12px; } .ga-burger { position: relative; z-index: 61; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 13px; border-radius: 12px; border: 0; background: var(--ga-navy); color: #fff; cursor: pointer; font-weight: 800; font-size: 14px; box-shadow: 0 10px 22px -14px rgba(19, 38, 92, .9); } .ga-burger__lines { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; } .ga-burger__lines i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .2s, width .25s; } .ga-burger__lines i:nth-child(2) { width: 70%; } .ga-burger[aria-expanded="true"] .ga-burger__lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .ga-burger[aria-expanded="true"] .ga-burger__lines i:nth-child(2) { opacity: 0; } .ga-burger[aria-expanded="true"] .ga-burger__lines i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .ga-burger__label { line-height: 1; } .ga-lang-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; flex: none; border-radius: 12px; background: var(--ga-foam); color: var(--ga-navy); border: 1.5px solid var(--ga-line); font-weight: 800; font-size: 14px; text-decoration: none; } .ga-lang-pill[lang="ar"] { font-size: 19px; } .ga-lang-pill:hover { color: var(--ga-ocean); border-color: var(--ga-sky); } .ga-lang--bar { display: none; } @media (min-width: 768px) { .ga-lang--bar { display: inline-flex; } .ga-lang-pill { display: none; } } @media (max-width: 479px) { .ga-header__in { gap: 8px; } .ga-header__cta { padding-inline: 11px; font-size: 14px; gap: 6px; } .ga-header__cta svg { display: none; } .ga-lang-pill { display: none; } .ga-brand__logo { height: 46px; max-width: 104px; } .ga-burger { padding: 0 11px; } .ga-tide__actions .ga-btn { flex: 1 1 100%; } } @media (max-width: 339px) { .ga-header__cta span { display: none; } .ga-header__cta svg { display: inline; } } @media (max-width: 359px) { .ga-burger__label { display: none; } .ga-header__tools { gap: 6px; } } /* القائمة: درج داكن على الشاشات الصغيرة */ .ga-nav { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 60; width: min(90vw, 380px); background: radial-gradient(120% 60% at 100% 0%, rgba(14, 165, 233, .28), transparent 60%), linear-gradient(170deg, var(--ga-navy-2) 0%, var(--ga-navy) 45%, var(--ga-deep) 100%); color: #fff; padding: 0 18px 28px; box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .6); opacity: 0; transform: translateX(24px); visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .3s var(--ga-ease), visibility .25s; overflow-y: auto; } [dir="rtl"] .ga-nav { transform: translateX(-24px); box-shadow: 24px 0 60px -30px rgba(0, 0, 0, .6); } .ga-nav.is-open { opacity: 1; transform: none !important; visibility: visible; pointer-events: auto; } .ga-nav__head { display: none; } .ga-nav__list { list-style: none; margin: 0; padding: 0; } .ga-nav__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; border-block-end: 1px solid rgba(255, 255, 255, .1); } .ga-nav__item > a { flex: 1; padding: 14px 6px; font-weight: 800; color: #fff; text-decoration: none; } .ga-nav__item.is-current > a { color: var(--ga-sky-2); } .ga-nav__subtoggle { width: 42px; height: 42px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ga-nav__subtoggle svg { transition: transform .2s; } .ga-nav__subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); } .ga-nav__sub { list-style: none; margin: 0 0 12px; padding: 0; width: 100%; display: none; } .ga-nav__sub.is-open { display: grid; gap: 4px; } .ga-nav__sub a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: #E6F1FF; text-decoration: none; font-weight: 700; font-size: 15px; } .ga-nav__sub a:hover { background: rgba(255, 255, 255, .1); color: #fff; } .ga-nav__subico { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 9px; flex: none; background: var(--accent, var(--ga-sky)); color: #fff; } .ga-nav__extra { display: grid; gap: 12px; margin-top: 22px; } .ga-nav__extra .ga-lang { justify-content: center; background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .25); } .ga-nav__extra .ga-lang__ico { color: var(--ga-sky-2); } .ga-nav__note { margin: 6px 0 0; padding: 14px; border-radius: 14px; font-size: 14px; line-height: 1.7; color: #CFE3FA; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(56, 189, 248, .4); } .ga-scrim { position: fixed; inset: 0; background: rgba(14, 29, 75, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 55; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .ga-scrim.is-on { opacity: 1; visibility: visible; } body.ga-lock { overflow: hidden; } @media (max-width: 1199px) { .ga-nav { z-index: 2147483001; height: 100%; height: 100dvh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .ga-scrim { z-index: 2147483000; } .ga-nav__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -18px 6px; padding: 16px 18px; background: rgba(19, 38, 92, .96); border-block-end: 1px solid rgba(56, 189, 248, .25); } .ga-nav__title { font-weight: 800; font-size: 19px; color: #fff; } .ga-nav__close { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; } .ga-nav.is-open { transition: opacity .25s ease, transform .3s var(--ga-ease), visibility 0s; } html.ga-lock, body.ga-lock { overflow: hidden; } } @media (min-width: 1200px) { .ga-burger, .ga-nav__extra, .ga-nav__head { display: none; } .ga-nav { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; width: auto; padding: 0; box-shadow: none; overflow: visible; background: transparent; color: inherit; margin-inline-start: 8px; } [dir="rtl"] .ga-nav { transform: none; box-shadow: none; } .ga-nav__list { display: flex; align-items: center; gap: 2px; } .ga-nav__item { border: 0; flex-wrap: nowrap; } .ga-nav__item > a { position: relative; padding: 10px clamp(7px, .7vw, 12px); color: var(--ga-navy); font-size: clamp(14px, 1.1vw, 15px); white-space: nowrap; border-radius: 10px; } .ga-nav__item > a::after { content: ""; position: absolute; inset-inline: 10px; bottom: 3px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ga-sky), var(--ga-sky-2)); transform: scaleX(0); transition: transform .25s var(--ga-ease); } .ga-nav__item > a:hover { color: var(--ga-ocean); } .ga-nav__item > a:hover::after, .ga-nav__item.is-current > a::after { transform: scaleX(1); } .ga-nav__item.is-current > a { color: var(--ga-ocean); } .ga-nav__subtoggle { width: 24px; height: 32px; background: transparent; color: var(--ga-navy); margin-inline-start: -6px; } .ga-nav__sub { display: grid; gap: 2px; position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 230px; margin: 0; padding: 10px; background: linear-gradient(170deg, var(--ga-navy-2), var(--ga-navy)); border-radius: 18px; box-shadow: 0 26px 50px -24px rgba(14, 29, 75, .8); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s var(--ga-ease); } .ga-nav__sub::before { content: ""; position: absolute; inset-inline: 0; top: -10px; height: 10px; } .ga-nav__sub--grid { grid-template-columns: 1fr 1fr; min-width: 440px; } .ga-nav__item.has-sub:hover .ga-nav__sub, .ga-nav__item.has-sub:focus-within .ga-nav__sub, .ga-nav__sub.is-open { opacity: 1; visibility: visible; transform: none; } .ga-en .ga-nav__item > a { padding-inline: 7px; font-size: 14px; } .ga-en .ga-header__in { gap: 10px; } } /* ---------- عناصر مشتركة ---------- */ .ga-section { padding-block: 60px; } @media (min-width: 1024px) { .ga-section { padding-block: 88px; } } .ga-section--tint, .ga-section--foam { background: linear-gradient(180deg, var(--ga-foam), var(--ga-mist)); } .ga-section--sky { background: radial-gradient(70% 60% at 90% 0%, rgba(56, 189, 248, .22), transparent 60%), linear-gradient(180deg, #E1F2FD, var(--ga-mist)); } .ga-section--peach { background: linear-gradient(180deg, var(--ga-sand), #FFFBF3); } .ga-section--mint { background: linear-gradient(180deg, #E6F7F1, #F4FBF8); } .ga-section--lilac { background: linear-gradient(180deg, #EEF0FF, #F7F8FF); } .ga-section--rose { background: linear-gradient(180deg, #FFEAF2, #FFF6F9); } .ga-head { max-width: 760px; margin-bottom: 34px; } .ga-head h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.25; margin-bottom: 10px; letter-spacing: -.01em; } .ga-head p { color: var(--ga-muted); margin: 0; font-size: 17px; } .ga-head--center { margin-inline: auto; text-align: center; } .ga-head--row, .ga-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; } .ga-head--split > div { max-width: 720px; } .ga-head h2::after { /* الموجة المزدوجة تحت العناوين */ content: ""; display: block; width: 92px; height: 14px; margin-top: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 14' fill='none' stroke-linecap='round'%3E%3Cpath d='M2 6c10-6 20-6 30 0s20 6 30 0 18-6 28 0' stroke='%230EA5E9' stroke-width='3'/%3E%3Cpath d='M12 12c8-4 16-4 24 0s16 4 24 0' stroke='%23F59E0B' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat; } .ga-head--center h2::after { margin-inline: auto; } .ga-eyebrow, .ga-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 5px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 800; color: var(--ink); background: var(--tint); } .ga-eyebrow--band, .ga-eyebrow--light { color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); } .ga-cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); } @media (min-width: 1100px) { .ga-cards--3 { grid-template-columns: repeat(3, 1fr); } .ga-cards--4 { grid-template-columns: repeat(4, 1fr); } } .ga-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .ga-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 12px; background: #fff; border: 1.5px solid var(--ga-line); color: var(--ga-navy); text-decoration: none; font-weight: 800; font-size: 15px; transition: transform .2s var(--ga-ease), border-color .2s, box-shadow .2s, background-color .2s; } .ga-chips a svg { color: var(--ga-sky); } .ga-chips a:hover { border-color: var(--ga-sky); transform: translateY(-2px); box-shadow: var(--ga-shadow-sm); color: var(--ga-navy); } .ga-chips--sm a { padding: 7px 12px; font-size: 14px; } .ga-chips--svc a svg { color: var(--accent); } .ga-chips--svc a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, #fff); } .ga-chips li.is-main a { background: var(--ga-rose); border-color: var(--ga-rose); color: #fff; } .ga-ticks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; } .ga-ticks li { display: flex; align-items: flex-start; gap: 9px; font-weight: 700; line-height: 1.6; } .ga-ticks svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 8px; background: var(--tint); color: var(--ink); } .ga-ticks--dark li { font-weight: 400; color: var(--ga-body); } .ga-dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; transform: rotate(45deg); background: var(--accent, var(--ga-sky)); flex: none; } /* ========================================================================== الرئيسية ========================================================================== */ /* ---------- الواجهة «المدّ» ---------- */ .ga-tide { position: relative; overflow: hidden; color: #fff; isolation: isolate; background: radial-gradient(55% 70% at 88% 18%, rgba(14, 165, 233, .45), transparent 62%), radial-gradient(40% 50% at 8% 92%, rgba(245, 158, 11, .2), transparent 60%), linear-gradient(160deg, var(--ga-navy-2) 0%, var(--ga-navy) 48%, var(--ga-deep) 100%); padding-block: 44px 120px; } .ga-tide::before { /* شبكة نقاط خافتة كخريطة بحرية */ content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(rgba(56, 189, 248, .5) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); } .ga-tide__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .ga-tide__star { position: absolute; width: 14px; height: 14px; background: var(--ga-sky-2); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: ga-twinkle 3.6s ease-in-out infinite; } .ga-tide__star--1 { top: 12%; inset-inline-start: 46%; } .ga-tide__star--2 { top: 28%; inset-inline-end: 6%; width: 10px; height: 10px; animation-delay: -1.2s; } .ga-tide__star--3 { bottom: 30%; inset-inline-start: 4%; width: 18px; height: 18px; animation-delay: -2.1s; background: #fff; } .ga-tide__star--4 { top: 8%; inset-inline-start: 12%; width: 9px; height: 9px; animation-delay: -.6s; } @keyframes ga-twinkle { 0%, 100% { opacity: .35; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } } .ga-tide__grid { position: relative; display: grid; gap: 34px; align-items: center; } @media (min-width: 1024px) { .ga-tide { padding-block: 70px 150px; } .ga-tide__grid { grid-template-columns: 1.15fr .85fr; gap: 56px; } } .ga-tide__kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px; border-radius: 12px; font-size: 14px; font-weight: 800; color: #E0F2FE; background: rgba(255, 255, 255, .08); border: 1px solid rgba(56, 189, 248, .4); } .ga-tide__kicker svg { color: var(--ga-sky-2); } .ga-tide__title { font-size: clamp(40px, 6.4vw, 78px); line-height: 1.12; margin: 0 0 18px; color: #fff; letter-spacing: -.015em; background: linear-gradient(180deg, #fff 30%, #BDE6FD); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ga-tide__lead { font-size: clamp(16.5px, 1.8vw, 19px); line-height: 1.9; color: #D7E8FB; max-width: 640px; margin-bottom: 26px; } .ga-tide__actions { display: flex; flex-wrap: wrap; gap: 12px; } .ga-tide__svc { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ga-tide__svc a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 11px; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); transition: background .2s, transform .2s var(--ga-ease), border-color .2s; } [dir="rtl"] .ga-tide__svc a { padding: 5px 6px 5px 12px; } .ga-tide__svc a:hover { background: rgba(255, 255, 255, .16); border-color: var(--accent); transform: translateY(-2px); color: #fff; } .ga-tide__svcico { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; background: var(--accent); color: #fff; } /* مدار الخدمات */ .ga-orbit { --size: min(440px, 84vw); --r: calc(var(--size) / 2 - 30px); position: relative; width: var(--size); aspect-ratio: 1; margin-inline: auto; } .ga-orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(56, 189, 248, .45); } .ga-orbit__ring--inner { inset: 22%; border-style: solid; border-color: rgba(255, 255, 255, .12); background: radial-gradient(circle, rgba(14, 165, 233, .18), transparent 70%); } .ga-orbit__core { position: absolute; inset: 31%; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 30% 25%, #4CC6FA, var(--ga-ocean) 55%, var(--ga-navy-2)); box-shadow: 0 0 0 10px rgba(14, 165, 233, .12), 0 30px 60px -20px rgba(2, 132, 199, .9), inset 0 -10px 24px rgba(14, 29, 75, .45); } .ga-orbit__globe { position: relative; color: #fff; display: inline-flex; filter: drop-shadow(0 6px 10px rgba(14, 29, 75, .4)); } .ga-orbit__waves { position: absolute; inset-inline: -4%; bottom: 2%; width: 108%; fill: none; stroke-linecap: round; } .ga-orbit__waves path { stroke: #fff; stroke-width: 6; opacity: .9; } .ga-orbit__waves path + path { stroke: var(--ga-sky-2); opacity: 1; } .ga-orbit__track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; animation: ga-spin 70s linear infinite; } .ga-orbit__track li { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px; transform: rotate(calc(var(--i) * 45deg)) translate(var(--r)) rotate(calc(var(--i) * -45deg)); } .ga-orbit__chip { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 18px; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 14px 26px -12px var(--accent); animation: ga-spin 70s linear infinite reverse; } @keyframes ga-spin { to { transform: rotate(360deg); } } @media (max-width: 1023px) { .ga-orbit { --size: min(320px, 76vw); } .ga-orbit__track li { width: 50px; height: 50px; margin: -25px; } .ga-orbit__chip { border-radius: 14px; } .ga-orbit__chip svg { width: 20px; height: 20px; } } .ga-tide.has-poster .ga-orbit { --size: min(380px, 80vw); } @media (max-width: 767px) { .ga-tide.has-poster .ga-orbit { display: none; } } .ga-tide__poster { position: relative; margin: 40px 0 0; border-radius: var(--ga-r-xl); padding: 6px; overflow: hidden; background: linear-gradient(120deg, var(--ga-sky-2), rgba(255, 255, 255, .5), var(--ga-sun)); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8); } .ga-tide__poster img { width: 100%; height: auto; border-radius: calc(var(--ga-r-xl) - 6px); } /* الموجتان أسفل الواجهة */ .ga-tide__waves { position: absolute; inset-inline: 0; bottom: -1px; width: 100%; height: 110px; display: block; } .ga-tide__fill { fill: var(--ga-foam); animation: ga-bob 7s ease-in-out infinite; transform-origin: center; } .ga-tide__line { fill: none; stroke-linecap: round; stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: ga-draw 2.2s var(--ga-ease) .3s forwards; } .ga-tide__line--a { stroke: var(--ga-sky-2); stroke-width: 5; } .ga-tide__line--b { stroke: var(--ga-sky); stroke-width: 3.5; animation-delay: .65s; opacity: .85; } @keyframes ga-draw { to { stroke-dashoffset: 0; } } @keyframes ga-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ---------- الأرقام ---------- */ .ga-stats { position: relative; z-index: 2; display: flow-root; background: var(--ga-foam); padding-bottom: 10px; } .ga-stats__list { list-style: none; margin: -64px 0 0; padding: 10px; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: var(--ga-r-xl); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 60px -36px rgba(19, 38, 92, .6); } @media (min-width: 900px) { .ga-stats__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 14px; margin-top: -84px; } } .ga-stats__list li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, #fff), #fff 75%); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); overflow: hidden; } .ga-stats__list strong { font-size: clamp(30px, 4vw, 44px); line-height: 1; font-weight: 800; color: var(--ga-navy); font-variant-numeric: tabular-nums; } .ga-stats__list strong::after { content: "+"; font-size: .55em; color: var(--accent); margin-inline-start: 2px; vertical-align: top; } .ga-stats__list li:first-child strong::after, .ga-stats__list li:last-child strong::after { content: none; } .ga-stats__list span { font-size: 14px; font-weight: 700; color: var(--ga-muted); line-height: 1.5; } .ga-stats__list li::before { content: ""; position: absolute; inset-inline-end: -18px; top: -18px; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, transparent); } /* ---------- بطاقات الخدمات الثماني ---------- */ .ga-deck { background: linear-gradient(180deg, var(--ga-foam), var(--ga-mist)); padding-block: 56px 70px; } @media (min-width: 1024px) { .ga-deck { padding-block: 72px 96px; } } .ga-deck__rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); } @media (min-width: 1100px) { .ga-deck__rail { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 699px) { /* شريط أفقي بالسحب على الجوال */ .ga-deck__rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin-inline: -16px; padding: 6px 16px 22px; scroll-padding-inline: 16px; scrollbar-width: none; } .ga-deck__rail::-webkit-scrollbar { display: none; } .ga-deck__item { flex: 0 0 80%; scroll-snap-align: start; } } .ga-deck__item { display: flex; } .ga-card8 { --rx: 0deg; --ry: 0deg; position: relative; display: flex; flex-direction: column; width: 100%; background: #fff; border-radius: var(--ga-sail); box-shadow: 0 20px 40px -28px color-mix(in srgb, var(--accent) 70%, #13265C); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s var(--ga-ease), box-shadow .3s; } .ga-card8::before { /* إطار متدرّج بلمعة */ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 45%, #fff), var(--ga-line) 40%, var(--ga-line) 60%, color-mix(in srgb, var(--accent) 45%, #fff)) 0 0 / 250% 250%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); transition: background-position .8s var(--ga-ease); } .ga-card8:hover { box-shadow: 0 30px 50px -28px color-mix(in srgb, var(--accent) 85%, #13265C); } .ga-card8:hover::before { background-position: 100% 100%; background-image: linear-gradient(120deg, var(--accent), var(--ga-sky-2) 45%, var(--ga-sun) 70%, var(--accent)); } .ga-card8__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ga-sail); border-end-start-radius: 0; border-end-end-radius: 0; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent)); } .ga-card8__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ga-ease), clip-path .9s var(--ga-ease); clip-path: inset(0); } .ga-card8:hover .ga-card8__media img { transform: scale(1.06); } .ga-rv-on .ga-deck__item:not(.is-in) .ga-card8__media img { clip-path: inset(0 0 100% 0); } .ga-card8__ph, .ga-feat__ph, .ga-svc__ph, .ga-post__ph, .ga-task__ph, .ga-tile__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40' fill='none' stroke='white' stroke-opacity='.22' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M0 14c15-10 30-10 45 0s30 10 45 0 22-8 30-4'/%3E%3Cpath d='M0 30c15-10 30-10 45 0s30 10 45 0 22-8 30-4'/%3E%3C/svg%3E") 0 0 / 120px 40px, radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .45), transparent 45%), linear-gradient(140deg, color-mix(in srgb, var(--accent, var(--ga-sky)) 62%, #fff), var(--accent, var(--ga-sky)) 60%, color-mix(in srgb, var(--accent, var(--ga-sky)) 70%, #13265C)); } .ga-card8__ph svg, .ga-feat__ph svg { filter: drop-shadow(0 10px 16px rgba(14, 29, 75, .35)); transition: transform .5s var(--ga-ease); } .ga-card8:hover .ga-card8__ph svg { transform: scale(1.12) rotate(-6deg); } .ga-card8__area { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 800; color: var(--ga-navy); background: rgba(255, 255, 255, .92); box-shadow: 0 8px 16px -10px rgba(14, 29, 75, .8); } .ga-card8__area svg { color: var(--accent); } .ga-card8__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 0 20px 20px; } .ga-card8__ico { display: inline-flex; width: 52px; height: 52px; margin: -26px 0 12px; align-items: center; justify-content: center; position: relative; z-index: 1; border-radius: 16px; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); border: 3px solid #fff; box-shadow: 0 12px 22px -12px var(--accent); } .ga-card8 h3 { font-size: 19.5px; margin-bottom: 6px; } .ga-card8 h3 a { color: var(--ga-navy); text-decoration: none; } .ga-card8 h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--ga-sail); } .ga-card8 h3 a:focus-visible { outline: none; } .ga-card8:has(h3 a:focus-visible) { outline: 3px solid var(--ga-sun); outline-offset: 4px; } .ga-card8 p { color: var(--ga-muted); font-size: 15px; line-height: 1.75; flex: 1; } .ga-card8__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--ink); } .ga-card8__more svg { transition: transform .25s; } .ga-card8:hover .ga-card8__more svg { transform: translateX(5px); } [dir="rtl"] .ga-card8:hover .ga-card8__more svg { transform: scaleX(-1) translateX(5px); } /* ---------- خريطة مسارات الشحن ---------- */ .ga-route { position: relative; overflow: hidden; color: #fff; padding-block: 70px; background: radial-gradient(60% 70% at 85% 50%, rgba(14, 165, 233, .32), transparent 65%), linear-gradient(150deg, var(--ga-deep) 0%, var(--ga-navy) 50%, var(--ga-navy-2) 100%); } .ga-route.has-img { background-image: linear-gradient(150deg, rgba(14, 29, 75, .94), rgba(19, 38, 92, .88) 50%, rgba(30, 58, 138, .82)), var(--band); background-size: cover; background-position: center; } @media (min-width: 1024px) { .ga-route { padding-block: 100px; } } .ga-route__grid { display: grid; gap: 34px; align-items: center; } @media (min-width: 1024px) { .ga-route__grid { grid-template-columns: 1fr 1.1fr; gap: 56px; } } .ga-route h2 { color: #fff; font-size: clamp(27px, 3.6vw, 42px); line-height: 1.25; } .ga-route h2::after { content: ""; display: block; width: 92px; height: 14px; margin-top: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 14' fill='none' stroke-linecap='round'%3E%3Cpath d='M2 6c10-6 20-6 30 0s20 6 30 0 18-6 28 0' stroke='%2338BDF8' stroke-width='3'/%3E%3Cpath d='M12 12c8-4 16-4 24 0s16 4 24 0' stroke='%23F59E0B' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat; } .ga-route__lead { color: #D7E8FB; font-size: 17px; line-height: 1.9; } .ga-route__modes { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 10px; } @media (min-width: 560px) { .ga-route__modes { grid-template-columns: 1fr 1fr; } } .ga-route__modes li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 13px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-inline-start: 3px solid var(--accent); } .ga-route__mico { grid-row: span 2; display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent); } .ga-route__modes strong { color: #fff; font-size: 15.5px; } .ga-route__modes span:not(.ga-route__mico) { color: #BFD6F2; font-size: 14px; line-height: 1.6; } .ga-route__actions { display: flex; flex-wrap: wrap; gap: 12px; } .ga-route__map { position: relative; margin: 0; padding: 12px; border-radius: var(--ga-r-xl); background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); border: 1px solid rgba(56, 189, 248, .3); box-shadow: inset 0 0 60px rgba(14, 165, 233, .12), 0 40px 70px -40px rgba(0, 0, 0, .7); } .ga-route__map svg { display: block; width: 100%; height: auto; overflow: visible; } .ga-map__dots { fill: rgba(56, 189, 248, .22); } #ga-dots circle { fill: rgba(56, 189, 248, .35); } .ga-map__path { fill: none; stroke-linecap: round; stroke-width: 2.6; animation: ga-flow 1.6s linear infinite; } .ga-map__path--road { stroke: var(--ga-sky-2); stroke-dasharray: 7 7; } .ga-map__path--sea { stroke: #7DD3FC; stroke-dasharray: 16 9; stroke-width: 2.2; animation-duration: 2.6s; } .ga-map__path--air { stroke: var(--ga-sun); stroke-dasharray: 2 8; stroke-width: 3; } @keyframes ga-flow { to { stroke-dashoffset: -28; } } [dir="rtl"] .ga-map__path { animation-direction: normal; } .ga-map__mover--road, .ga-map__mover--sea { fill: #fff; } .ga-map__mover--air { fill: var(--ga-sun); } .ga-map__node text, .ga-map__origin text { fill: #fff; font: 800 15px/1 var(--ga-font); paint-order: stroke; stroke: var(--ga-deep); stroke-width: 4px; stroke-linejoin: round; } .ga-map__dot { fill: var(--ga-sky-2); stroke: #fff; stroke-width: 2.5; } .ga-map__node--sea .ga-map__dot { fill: #7DD3FC; } .ga-map__node--air .ga-map__dot { fill: var(--ga-sun); } .ga-map__pulse { fill: rgba(56, 189, 248, .25); transform-box: fill-box; transform-origin: center; animation: ga-pulse 2.6s ease-out infinite; } .ga-map__node--air .ga-map__pulse { fill: rgba(245, 158, 11, .28); } .ga-map__pulse--big { fill: rgba(245, 158, 11, .3); } .ga-map__core { fill: var(--ga-sun); stroke: #fff; stroke-width: 4; } .ga-map__origin text { font-size: 18px; } @media (max-width: 699px) { .ga-map__node text { font-size: 23px; stroke-width: 5px; } .ga-map__origin text { font-size: 25px; } .ga-route__map { padding: 6px; } .ga-route__legend { position: static; justify-content: center; padding: 8px 0 4px; } } @keyframes ga-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } } .ga-route__legend { position: absolute; inset-block-end: 14px; inset-inline-start: 16px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; font-weight: 800; color: #DCEBFB; } .ga-route__legend span { display: inline-flex; align-items: center; gap: 6px; } .ga-route__legend span::before { content: ""; width: 22px; height: 0; border-top: 3px dashed var(--ga-sky-2); } .ga-route__legend .is-sea::before { border-top-color: #7DD3FC; border-top-style: solid; } .ga-route__legend .is-air::before { border-top: 3px dotted var(--ga-sun); } /* ---------- شريط المدن المتحرك ---------- */ .ga-marquee { position: relative; padding-block: 34px 38px; background: linear-gradient(100deg, var(--ga-ocean), var(--ga-sky) 55%, #22B8F0); color: #fff; overflow: hidden; } .ga-marquee__head .ga-wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 18px; } .ga-marquee h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #fff; font-size: clamp(22px, 2.6vw, 28px); } .ga-marquee__head p { margin: 0; color: #F0F9FF; font-weight: 700; } .ga-marquee__belt { display: flex; width: max-content; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .ga-marquee__belt { width: 100%; overflow: hidden; } .ga-marquee__list { list-style: none; margin: 0; padding: 0 6px; display: flex; gap: 12px; flex: none; animation: ga-marquee 46s linear infinite; } [dir="rtl"] .ga-marquee__list { animation-name: ga-marquee-rtl; } .ga-marquee__belt:hover .ga-marquee__list, .ga-marquee__belt:focus-within .ga-marquee__list { animation-play-state: paused; } @keyframes ga-marquee { to { transform: translateX(calc(-100% - 12px)); } } @keyframes ga-marquee-rtl { to { transform: translateX(calc(100% + 12px)); } } .ga-marquee__list a { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border-radius: 14px; white-space: nowrap; background: rgba(255, 255, 255, .96); color: var(--ga-navy); font-weight: 800; text-decoration: none; box-shadow: 0 12px 24px -16px rgba(14, 29, 75, .9); transition: background .2s, color .2s, transform .2s; } .ga-marquee__list a svg { color: var(--ga-cta); } .ga-marquee__list a:hover { background: var(--ga-navy); color: #fff; transform: translateY(-3px); } .ga-marquee__list a:hover svg { color: var(--ga-sun); } /* ---------- أشرطة الخدمات ---------- */ .ga-feat { position: relative; padding-block: 64px; overflow: hidden; } @media (min-width: 1024px) { .ga-feat { padding-block: 96px; } } .ga-feat--sun { background: radial-gradient(50% 60% at 100% 0%, rgba(245, 158, 11, .22), transparent 60%), radial-gradient(40% 50% at 0% 100%, rgba(14, 165, 233, .14), transparent 60%), linear-gradient(160deg, #FFF6E5, #FFFBF3 60%, #F0F8FF); } .ga-feat--sea { background: radial-gradient(50% 60% at 0% 0%, rgba(14, 165, 233, .2), transparent 60%), radial-gradient(40% 50% at 100% 100%, rgba(10, 165, 154, .18), transparent 60%), linear-gradient(160deg, #E4F5FD, #F2FAFF 60%, #EAF8F5); } .ga-feat--rose, .ga-feat--navy { color: #fff; background: radial-gradient(60% 70% at 100% 0%, rgba(229, 72, 127, .45), transparent 62%), radial-gradient(50% 60% at 0% 100%, rgba(14, 165, 233, .3), transparent 60%), linear-gradient(150deg, #7E1D4A 0%, #4A2366 45%, var(--ga-navy) 100%); } .ga-feat__grid { position: relative; display: grid; gap: 36px; align-items: center; } @media (min-width: 1024px) { .ga-feat__grid { grid-template-columns: 1.1fr 1fr; gap: 60px; } .ga-feat.is-rev .ga-feat__media { order: -1; } } .ga-feat h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.25; } .ga-feat--rose h2, .ga-feat--navy h2 { color: #fff; } .ga-feat__lead { font-size: 17px; line-height: 1.9; max-width: 640px; color: var(--ga-muted); } .ga-feat--rose .ga-feat__lead, .ga-feat--navy .ga-feat__lead { color: #F3E8F5; } .ga-feat--rose .ga-tag, .ga-feat--navy .ga-tag { color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); } .ga-feat--sun .ga-tag { color: #8A4A05; background: #fff; box-shadow: var(--ga-shadow-sm); } .ga-feat--sea .ga-tag { color: #075985; background: #fff; box-shadow: var(--ga-shadow-sm); } .ga-feat__items { display: grid; gap: 14px; margin-top: 22px; } @media (min-width: 640px) { .ga-feat__items--2, .ga-feat__items--3 { grid-template-columns: 1fr 1fr; } .ga-feat__items--3 .ga-feat__item:first-child { grid-column: 1 / -1; } } .ga-feat__item { position: relative; min-width: 0; padding: 16px 18px 14px; border-radius: 18px; background: #fff; color: var(--ga-body); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); box-shadow: 0 18px 34px -26px rgba(19, 38, 92, .7); transition: transform .25s var(--ga-ease), box-shadow .25s; } .ga-feat__item::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: -1px; width: 4px; border-radius: 4px; background: var(--accent); } .ga-feat__item:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -26px rgba(19, 38, 92, .8); } .ga-feat__item h3 { display: flex; align-items: center; gap: 10px; font-size: 17.5px; margin-bottom: 8px; } .ga-feat__ico { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 11px; background: var(--accent); color: #fff; flex: none; } .ga-feat__item ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; } .ga-feat__items--3 .ga-feat__item:first-child ul { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); column-gap: 14px; } .ga-feat__item li { display: flex; align-items: flex-start; gap: 7px; font-size: 14.5px; color: var(--ga-muted); line-height: 1.65; } .ga-feat__item li svg { color: var(--ink); margin-top: 4px; } .ga-feat__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--ink); text-decoration: none; } .ga-feat__more:hover { color: var(--ga-navy); text-decoration: underline; } .ga-feat__note { display: flex; align-items: center; gap: 6px; margin: 18px 0 0; font-weight: 800; } .ga-feat__cta { margin: 20px 0 0; } .ga-feat__links { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ga-feat__links a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 11px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; transition: background .2s, color .2s; } .ga-feat__links a:hover { background: #fff; color: #9d1f52; } .ga-feat__media { position: relative; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } .ga-feat__media--1 { grid-template-columns: 1fr; } .ga-feat__media--3 .ga-feat__fig:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .ga-feat__media--2 .ga-feat__fig:nth-child(2) { margin-top: 44px; } .ga-feat__media--2 .ga-feat__fig:first-child { margin-bottom: 44px; } .ga-feat__fig { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--ga-sail); border: 4px solid #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 50%, #fff), var(--accent)); box-shadow: 0 30px 60px -34px rgba(14, 29, 75, .85); } .ga-feat--rose .ga-feat__fig, .ga-feat--navy .ga-feat__fig { border-color: rgba(255, 255, 255, .85); } .ga-feat__media--2 .ga-feat__fig { aspect-ratio: 4 / 5; } .ga-feat__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ga-ease); } .ga-feat__fig:hover img { transform: scale(1.05); } .ga-feat__fig figcaption { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 10px; background: rgba(255, 255, 255, .94); color: var(--ga-navy); font-weight: 800; font-size: 13px; } .ga-feat__fig figcaption svg { color: var(--ink); } /* ---------- الخطوات ---------- */ .ga-flow { background: linear-gradient(180deg, var(--ga-mist), var(--ga-foam)); } .ga-flow__list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 18px; } @media (min-width: 900px) { .ga-flow__list { grid-template-columns: repeat(4, 1fr); gap: 22px; } .ga-flow__list::before { /* موجة واصلة بين الخطوات */ content: ""; position: absolute; inset-inline: 10%; top: 34px; height: 16px; z-index: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16' viewBox='0 0 80 16' fill='none'%3E%3Cpath d='M0 8c10-8 20-8 30 0s20 8 30 0 14-6 20-4' stroke='%2338BDF8' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='4 5'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 16px; animation: ga-slide 6s linear infinite; } } @keyframes ga-slide { to { background-position: 80px 0; } } .ga-flow__step { position: relative; z-index: 1; padding: 22px 20px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--ga-line); box-shadow: var(--ga-shadow-sm); } .ga-flow__num { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 50%; font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--ga-sky-2), var(--ga-ocean)); box-shadow: 0 0 0 6px var(--ga-foam), 0 14px 26px -12px rgba(2, 132, 199, .9); } .ga-flow__step:nth-child(2) .ga-flow__num { background: linear-gradient(140deg, #FBBF24, #D97706); box-shadow: 0 0 0 6px var(--ga-foam), 0 14px 26px -12px rgba(217, 119, 6, .9); } .ga-flow__step:nth-child(3) .ga-flow__num { background: linear-gradient(140deg, #3B82F6, var(--ga-navy-2)); box-shadow: 0 0 0 6px var(--ga-foam), 0 14px 26px -12px rgba(30, 58, 138, .9); } .ga-flow__step:nth-child(4) .ga-flow__num { background: linear-gradient(140deg, #22C55E, var(--ga-wa)); box-shadow: 0 0 0 6px var(--ga-foam), 0 14px 26px -12px rgba(21, 128, 61, .9); } .ga-flow__step h3 { font-size: 18px; margin-bottom: 4px; } .ga-flow__step p { color: var(--ga-muted); margin: 0; font-size: 15px; } /* خطوات الصفحات الداخلية (نفس الهيكل القديم) */ .ga-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .ga-step { position: relative; padding: 22px 20px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--ga-line); box-shadow: var(--ga-shadow-sm); } .ga-step__num { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; margin-bottom: 12px; border-radius: 50%; font-weight: 800; font-size: 19px; color: #fff; background: linear-gradient(140deg, var(--ga-sky-2), var(--ga-ocean)); box-shadow: 0 0 0 5px var(--ga-foam); } .ga-step:nth-child(2) .ga-step__num { background: linear-gradient(140deg, #FBBF24, #D97706); } .ga-step:nth-child(3) .ga-step__num { background: linear-gradient(140deg, #3B82F6, var(--ga-navy-2)); } .ga-step:nth-child(4) .ga-step__num { background: linear-gradient(140deg, #22C55E, var(--ga-wa)); } .ga-step h3 { font-size: 18px; margin-bottom: 4px; } .ga-step p { color: var(--ga-muted); margin: 0; font-size: 15px; } /* ---------- لماذا الخليج العربي ---------- */ .ga-why { position: relative; overflow: hidden; padding-block: 64px; background: radial-gradient(60% 70% at 0% 0%, rgba(255, 255, 255, .25), transparent 60%), linear-gradient(135deg, var(--ga-ocean) 0%, var(--ga-sky) 55%, #2BB6F2 100%); } @media (min-width: 1024px) { .ga-why { padding-block: 96px; } } .ga-why::before { content: ""; position: absolute; inset: auto -10% -60px; height: 180px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none' fill='none' stroke='white' stroke-opacity='.18' stroke-width='3'%3E%3Cpath d='M0 90c240-70 480-70 720 0s480 70 720 0'/%3E%3Cpath d='M0 130c240-70 480-70 720 0s480 70 720 0'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; } .ga-why .ga-head h2, .ga-why .ga-head p { color: #fff; } .ga-why .ga-head h2::after { filter: brightness(0) invert(1); opacity: .9; } .ga-why__grid { position: relative; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); } @media (min-width: 1100px) { .ga-why__grid { grid-template-columns: repeat(3, 1fr); } } .ga-why__card { position: relative; padding: 24px 22px 22px; border-radius: var(--ga-sail); background: rgba(255, 255, 255, .95); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 44px -30px rgba(14, 29, 75, .8); transition: transform .3s var(--ga-ease); } .ga-why__card:hover { transform: translateY(-5px); } .ga-why__ico { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 15px; color: #fff; background: var(--accent); box-shadow: 0 12px 22px -12px var(--accent); } .ga-why__card h3 { font-size: 18.5px; } .ga-why__card p { color: var(--ga-muted); margin: 0; font-size: 15px; } /* ---------- تبويبات المقالات ---------- */ .ga-ftabs__bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .ga-ftabs__bar [role="tab"] { min-height: 42px; padding: 8px 16px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, #fff); background: #fff; color: var(--ga-navy); font-weight: 800; font-size: 14px; cursor: pointer; transition: .2s var(--ga-ease); } .ga-ftabs__bar [role="tab"]:hover { border-color: var(--accent); transform: translateY(-2px); } .ga-ftabs__bar [aria-selected="true"] { background: color-mix(in srgb, var(--accent) 72%, #0B1A44); border-color: transparent; color: #fff; box-shadow: 0 12px 22px -12px var(--accent); } html:not(.ga-js) .ga-ftabs__bar { display: none; } html:not(.ga-js) .ga-ftabs .ga-tabs__panel:not(:first-of-type) { display: none; } .ga-js .ga-tabs__panel[data-ga-hidden] { display: none; } .ga-tabs__panel { animation: ga-fadein .45s var(--ga-ease); } @keyframes ga-fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ---------- الأسئلة في الرئيسية ---------- */ .ga-faqband { background: #fff; } .ga-faqband__grid { display: grid; gap: 28px; } @media (min-width: 1000px) { .ga-faqband__grid { grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; } .ga-faqband__side { position: sticky; top: 100px; } } .ga-faqband__side { padding: 28px 26px; border-radius: var(--ga-sail); color: #fff; background: radial-gradient(80% 60% at 100% 0%, rgba(14, 165, 233, .45), transparent 60%), linear-gradient(160deg, var(--ga-navy-2), var(--ga-navy)); box-shadow: var(--ga-shadow); } .ga-faqband__side h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); } .ga-faqband__side h2::after { content: ""; display: block; width: 92px; height: 14px; margin-top: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 14' fill='none' stroke-linecap='round'%3E%3Cpath d='M2 6c10-6 20-6 30 0s20 6 30 0 18-6 28 0' stroke='%2338BDF8' stroke-width='3'/%3E%3Cpath d='M12 12c8-4 16-4 24 0s16 4 24 0' stroke='%23F59E0B' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat; } .ga-faqband__side p { color: #D7E8FB; } .ga-faqband__side .ga-btn--navy { background: #fff; color: var(--ga-navy); } /* ---------- شريط الدعوة ---------- */ .ga-cta { padding-block: 0 72px; background: transparent; } .ga-cta__in { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: 38px 26px; border-radius: var(--ga-r-xl); color: #fff; background: radial-gradient(60% 90% at 100% 0%, rgba(245, 158, 11, .3), transparent 60%), radial-gradient(50% 80% at 0% 100%, rgba(56, 189, 248, .45), transparent 60%), linear-gradient(130deg, var(--ga-navy) 0%, var(--ga-navy-2) 50%, var(--ga-ocean) 100%); box-shadow: 0 40px 70px -40px rgba(19, 38, 92, .9); } @media (min-width: 768px) { .ga-cta__in { padding: 48px 46px; } } .ga-cta.has-img .ga-cta__in { background-image: linear-gradient(130deg, rgba(19, 38, 92, .94), rgba(30, 58, 138, .86) 55%, rgba(2, 132, 199, .78)), var(--band); background-size: cover; background-position: center; } .ga-cta__waves { position: absolute; inset-inline: 0; bottom: -6px; width: 100%; height: 90px; z-index: -1; fill: none; stroke-linecap: round; } .ga-cta__waves path { stroke: rgba(56, 189, 248, .5); stroke-width: 3; stroke-dasharray: 10 12; animation: ga-flow 2.2s linear infinite; } .ga-cta__waves path + path { stroke: rgba(245, 158, 11, .45); animation-duration: 3s; animation-direction: reverse; } .ga-cta__text { max-width: 640px; } .ga-cta h2 { color: #fff; font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 8px; } .ga-cta p { color: #DCEBFB; margin: 0; font-size: 17px; } .ga-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ========================================================================== الصفحات الداخلية ========================================================================== */ .ga-phero { position: relative; color: #fff; padding-block: 30px 92px; overflow: hidden; isolation: isolate; background: radial-gradient(55% 80% at 90% 10%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 62%), linear-gradient(160deg, var(--ga-navy-2) 0%, var(--ga-navy) 55%, var(--ga-deep) 100%); } .ga-phero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; background-image: radial-gradient(rgba(56, 189, 248, .5) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); } .ga-phero__grid { display: grid; gap: 26px; align-items: center; } @media (min-width: 900px) { .ga-phero__grid { grid-template-columns: 1.25fr .9fr; gap: 48px; } .ga-phero { padding-block: 40px 110px; } } .ga-phero h1 { display: flex; align-items: center; gap: 14px; color: #fff; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.2; margin-bottom: 14px; } .ga-phero__ico { display: inline-flex; width: 60px; height: 60px; flex: none; align-items: center; justify-content: center; border-radius: 18px; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); box-shadow: 0 14px 28px -12px var(--accent); border: 2px solid rgba(255, 255, 255, .5); } .ga-phero__lead { font-size: 17.5px; line-height: 1.9; color: #D7E8FB; max-width: 700px; } .ga-phero__actions, .ga-phero__acts { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ga-phero__area { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-weight: 800; font-size: 14px; } .ga-phero__area svg { color: var(--ga-sky-2); } .ga-phero .ga-btn--accent { background: #fff; color: var(--ga-navy); } .ga-phero .ga-btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .45); } .ga-phero__media { position: relative; } .ga-phero__media img, .ga-phero__art { width: 100%; border-radius: var(--ga-sail); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 0 0 5px rgba(255, 255, 255, .14), 0 36px 60px -34px rgba(0, 0, 0, .8); } .ga-phero__art { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; background: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .45), transparent 45%), linear-gradient(140deg, color-mix(in srgb, var(--accent) 65%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 60%, #13265C)); } .ga-phero__arti { position: relative; display: inline-flex; width: 120px; height: 120px; align-items: center; justify-content: center; border-radius: 34px; background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ga-float 6s ease-in-out infinite; } .ga-phero__artwaves { position: absolute; inset-inline: 0; bottom: 6%; width: 100%; height: 40%; fill: none; stroke-linecap: round; } .ga-phero__artwaves path { stroke: rgba(255, 255, 255, .75); stroke-width: 5; } .ga-phero__artwaves path + path { stroke: var(--ga-navy); stroke-opacity: .35; } @keyframes ga-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (max-width: 899px) { .ga-phero__media { display: none; } .ga-phero.has-img .ga-phero__media { display: block; } } .ga-phero__wave, .ga-arthead__wave { position: absolute; inset-inline: 0; bottom: -1px; width: 100%; height: 56px; display: block; } .ga-phero__wfill { fill: var(--ga-mist); } .ga-phero__wline { fill: none; stroke: var(--ga-sky-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: ga-draw 2s var(--ga-ease) .2s forwards; } .ga-phero--list .ga-chips { margin-top: 18px; } .ga-phero--list .ga-chips a, .ga-phero--author .ga-chips a { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; } .ga-phero--list .ga-chips a svg { color: var(--ga-sky-2); } .ga-phero--list .ga-chips a:hover { background: #fff; color: var(--ga-navy); } .ga-phero--list .ga-chips a:hover svg { color: var(--accent); } .ga-phero__search { max-width: 580px; margin-top: 16px; } .ga-phero--svc h1 .ga-bsec__ico { width: 56px; height: 56px; } .ga-profile { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; } .ga-profile .ga-avatar { width: 96px; height: 96px; border: 3px solid rgba(255, 255, 255, .6); } .ga-profile__txt { flex: 1 1 280px; min-width: 0; } .ga-profile__txt h1 { margin-bottom: 4px; } .ga-profile__role { font-weight: 800; color: var(--ga-sky-2); margin-bottom: 8px; } /* مسار التنقل (يظهر دائماً على لوح كحلي) */ .ga-crumbs ol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: #BFD6F2; } .ga-crumbs li { display: inline-flex; align-items: center; } .ga-crumbs li + li::before { content: ""; width: 6px; height: 6px; margin-inline: 10px; border-radius: 2px; transform: rotate(45deg); background: var(--ga-sky-2); opacity: .8; } .ga-crumbs a { color: #DCEBFB; text-decoration: none; } .ga-crumbs a:hover { color: #fff; text-decoration: underline; } .ga-crumbs [aria-current] { color: #fff; font-weight: 800; } /* صفحة الخدمة */ .ga-include { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .ga-include li { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border-radius: 16px; font-weight: 700; color: var(--ga-navy); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); box-shadow: var(--ga-shadow-sm); transition: transform .25s var(--ga-ease); } .ga-include li:hover { transform: translateY(-3px); } .ga-include__ico { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 11px; background: var(--accent); color: #fff; flex: none; } .ga-cities { display: grid; gap: 20px; } @media (min-width: 900px) { .ga-cities { grid-template-columns: 1.6fr 1fr; } } .ga-city { position: relative; padding: 24px 22px; border-radius: var(--ga-sail); background: #fff; border: 1px solid #F6C6D7; box-shadow: var(--ga-shadow-sm); --accent: var(--ga-rose); } .ga-city h3 { display: flex; align-items: center; gap: 8px; font-size: 22px; } .ga-city h3 svg { color: var(--ga-rose); } .ga-city p { color: var(--ga-muted); } .ga-city__sub { font-size: 16px; margin: 14px 0 10px; } .ga-task { position: relative; overflow: hidden; padding-bottom: 16px; border-radius: var(--ga-sail); background: #fff; border: 1px solid var(--ga-line); box-shadow: var(--ga-shadow-sm); --accent: var(--ga-rose); transition: transform .3s var(--ga-ease); } .ga-task:hover { transform: translateY(-5px); } .ga-task__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 14px; } .ga-task__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ga-cards--4 .ga-task:nth-child(2) { --accent: var(--ga-sun); } .ga-cards--4 .ga-task:nth-child(3) { --accent: var(--ga-sky); } .ga-cards--4 .ga-task:nth-child(4) { --accent: #22A06B; } .ga-task h3, .ga-task p { padding-inline: 18px; } .ga-task h3 { font-size: 18px; margin-bottom: 4px; } .ga-task p { color: var(--ga-muted); margin: 0; font-size: 15px; } /* صفحة الخدمات */ .ga-hub { display: grid; gap: 26px; } .ga-hub__item { position: relative; display: grid; overflow: hidden; background: #fff; border-radius: var(--ga-sail); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); box-shadow: 0 24px 46px -34px color-mix(in srgb, var(--accent) 80%, #13265C); } @media (min-width: 768px) { .ga-hub__item { grid-template-columns: 340px 1fr; } .ga-hub__item:nth-child(even) { grid-template-columns: 1fr 340px; } .ga-hub__item:nth-child(even) .ga-hub__media { order: 2; } } .ga-hub__media { position: relative; display: block; min-height: 220px; overflow: hidden; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent)); } .ga-hub__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ga-ease); } .ga-hub__item:hover .ga-hub__media img { transform: scale(1.05); } .ga-hub__body { padding: 24px; } .ga-hub__body .ga-svc__ico { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 15px; background: var(--accent); color: #fff; margin-bottom: 12px; vertical-align: middle; } .ga-hub__area { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 10px; padding: 4px 10px; border-radius: 9px; background: var(--tint); color: var(--ink); font-size: 12.5px; font-weight: 800; vertical-align: middle; } .ga-hub__body h2 { font-size: 25px; } .ga-hub__body h2 a { color: var(--ga-navy); text-decoration: none; } .ga-hub__body > p { color: var(--ga-muted); } /* من نحن وتواصل */ .ga-about { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .ga-about__block, .ga-infocard { position: relative; padding: 26px 24px; border-radius: var(--ga-sail); background: #fff; border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff); box-shadow: var(--ga-shadow-sm); overflow: hidden; } .ga-about__block::before, .ga-infocard::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff)); } .ga-about__block h2 { font-size: 21px; } .ga-about__block p { color: var(--ga-muted); margin: 0; } .ga-contact2 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .ga-contact2 .ga-chips { margin-top: 6px; } .ga-infocard__ico { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 16px; background: var(--accent); color: #fff; margin-bottom: 12px; box-shadow: 0 12px 22px -12px var(--accent); } .ga-infocard h2 { font-size: 20px; } .ga-infocard p { color: var(--ga-muted); } .ga-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 800px) { .ga-pick { grid-template-columns: repeat(4, 1fr); } } .ga-pick a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%; padding: 18px 16px; border-radius: var(--ga-sail); text-decoration: none; background: #fff; border: 1.5px solid color-mix(in srgb, var(--accent) 25%, #fff); box-shadow: var(--ga-shadow-sm); transition: transform .25s var(--ga-ease), background .25s, border-color .25s; } .ga-pick a:hover { transform: translateY(-4px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, #fff); } .ga-pick__ico { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 15px; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); margin-bottom: 4px; } .ga-pick strong { color: var(--ga-navy); font-size: 16.5px; line-height: 1.4; } .ga-pick small { color: var(--ga-muted); font-weight: 700; font-size: 13px; } .ga-booking__note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: center; margin: 16px 0 0; color: var(--ga-muted); font-weight: 700; } .ga-booking__note svg { color: var(--ga-rose); } .ga-legal h2 { font-size: 22px; margin-top: 1.4em; } /* ---------- النماذج ---------- */ .ga-form { --accent: var(--ga-ocean); position: relative; overflow: hidden; background: #fff; border-radius: var(--ga-r-xl); padding: 24px 18px; border: 1px solid color-mix(in srgb, var(--accent) 25%, #fff); box-shadow: 0 30px 60px -36px rgba(19, 38, 92, .55); color: var(--ga-body); } .ga-form::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--accent), var(--ga-sun), var(--ga-sky)); } .ga-form--maid { --accent: var(--ga-rose); } @media (min-width: 600px) { .ga-form { padding: 32px 30px 26px; } } .ga-form__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; } .ga-form__ico { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex: none; border-radius: 16px; background: var(--accent); color: #fff; box-shadow: 0 12px 22px -12px var(--accent); } .ga-form__title { font-size: 22px; margin: 0 0 4px; color: var(--ga-navy); } .ga-form__lead { margin: 0; color: var(--ga-muted); font-size: 15px; } .ga-grid-form { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 600px) { .ga-grid-form { grid-template-columns: 1fr 1fr; } .ga-field--wide { grid-column: 1 / -1; } } .ga-form--compact .ga-grid-form { gap: 12px; } .ga-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ga-field label { font-weight: 800; font-size: 14px; color: var(--ga-navy); } .ga-field input, .ga-field select, .ga-field textarea { width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid #C5D8EE; background: var(--ga-mist); transition: border-color .15s, box-shadow .15s, background-color .15s; font-size: 16px; color: var(--ga-navy); } .ga-field textarea { min-height: 100px; resize: vertical; } .ga-field select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ga-muted) 50%), linear-gradient(135deg, var(--ga-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 36px; } [dir="rtl"] .ga-field select { background-position: 15px 22px, 20px 22px; } .ga-field input:focus, .ga-field select:focus, .ga-field textarea:focus { outline: none; border-color: var(--ga-sky); box-shadow: 0 0 0 4px rgba(14, 165, 233, .2); background: #fff; } .ga-field.is-invalid input, .ga-field.is-invalid textarea, .ga-field.is-invalid select { border-color: #BE123C; box-shadow: 0 0 0 4px rgba(190, 18, 60, .14); } .ga-field input[dir="ltr"] { text-align: start; } [dir="rtl"] .ga-field input[dir="ltr"] { text-align: right; } .ga-form .ga-btn--block { margin-top: 18px; min-height: 56px; font-size: 16px; } .ga-form__note { font-size: 13px; color: var(--ga-muted); margin: 10px 0 0; } .ga-form__msg { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; font-weight: 700; } .ga-form__msg.is-error { background: #FDECEF; color: #9F1239; } .ga-form__msg.is-ok { background: #E8F6EE; color: #14532D; } .ga-form__done { text-align: center; padding: 18px 6px 6px; } .ga-form__done-ico { display: inline-flex; width: 66px; height: 66px; align-items: center; justify-content: center; border-radius: 50%; background: #E8F6EE; color: var(--ga-wa); margin-bottom: 10px; } .ga-form__done-txt { font-weight: 800; font-size: 18px; } .ga-hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; } /* ---------- القوائم والبحث ---------- */ .ga-search { display: flex; background: #fff; border: 1.5px solid #C5D8EE; border-radius: 14px; overflow: hidden; box-shadow: var(--ga-shadow-sm); } .ga-search:focus-within { border-color: var(--ga-sky); box-shadow: 0 0 0 4px rgba(14, 165, 233, .22); } .ga-search input { flex: 1; min-width: 0; border: 0; padding: 13px 18px; background: transparent; font-size: 16px; color: var(--ga-navy); } .ga-search input:focus { outline: none; } .ga-search button { border: 0; background: linear-gradient(135deg, var(--ga-cta), var(--ga-cta-2)); color: #fff; width: 56px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .ga-empty { text-align: center; max-width: 560px; margin: 0 auto; padding: 34px 20px; color: var(--ga-muted); background: #fff; border-radius: var(--ga-r-xl); border: 1px dashed var(--ga-line); } .ga-empty svg { color: var(--ga-sky); margin: 0 auto 10px; } .ga-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .ga-pages { margin-top: 36px; } .ga-pages .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .ga-pages .page-numbers, .ga-pager__num, .ga-pager__step, .ga-pager__gap { display: inline-flex; min-width: 46px; height: 46px; align-items: center; justify-content: center; padding-inline: 12px; border-radius: 13px; border: 1.5px solid color-mix(in srgb, var(--accent) 25%, #DDE8F5); text-decoration: none; color: var(--ga-navy); font-weight: 800; background: #fff; transition: transform .2s, border-color .2s, color .2s; } .ga-pages .page-numbers.current, .ga-pager__num.is-current { background: linear-gradient(140deg, var(--ga-sky), var(--ga-ocean)); color: #fff; border-color: transparent; box-shadow: 0 12px 22px -12px var(--ga-ocean); } .ga-pages a.page-numbers:hover, .ga-pager a:hover { border-color: var(--ga-sky); color: var(--ga-ocean); transform: translateY(-2px); } .ga-pager ul { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .ga-pager__gap { border: 0; background: transparent; min-width: 20px; } .ga-pager__prev { transform: rotate(90deg); } .ga-pager__next { transform: rotate(-90deg); } [dir="rtl"] .ga-pager__prev { transform: rotate(-90deg); } [dir="rtl"] .ga-pager__next { transform: rotate(90deg); } .ga-404 { text-align: center; } .ga-404__code { font-size: clamp(84px, 16vw, 170px); font-weight: 800; line-height: 1; margin: 0 0 10px; background: linear-gradient(135deg, var(--ga-sky), var(--ga-navy-2) 55%, var(--ga-sun)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ga-404 .ga-search { max-width: 520px; margin: 18px auto; } .ga-404 .ga-chips { justify-content: center; margin-block: 18px; } /* المدونة: أقسام الخدمات */ .ga-bsec { scroll-margin-top: 84px; } .ga-bsec__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 26px; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid color-mix(in srgb, var(--accent) 25%, #fff); box-shadow: var(--ga-shadow-sm); } .ga-bsec__ico { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 17px; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); color: #fff; flex: none; box-shadow: 0 12px 24px -12px var(--accent); } .ga-bsec__titles { flex: 1 1 220px; min-width: 0; } .ga-bsec__titles h2 { font-size: clamp(21px, 2.8vw, 28px); margin: 0; } .ga-bsec__titles p { margin: 0; color: var(--ga-muted); font-weight: 700; font-size: 14.5px; } .ga-bsec__all { flex: none; } .ga-bsec__grid { transition: opacity .2s; } .ga-bsec.is-loading .ga-bsec__grid { opacity: .4; pointer-events: none; } /* بطاقات المقالات */ .ga-post { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: var(--ga-sail); border: 1px solid color-mix(in srgb, var(--accent) 18%, #E2ECF7); box-shadow: 0 18px 36px -28px color-mix(in srgb, var(--accent) 70%, #13265C); transition: transform .3s var(--ga-ease), box-shadow .3s; } .ga-post:hover { transform: translateY(-5px); box-shadow: 0 28px 46px -28px color-mix(in srgb, var(--accent) 85%, #13265C); } .ga-post__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 45%, #fff), var(--accent)); } .ga-post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ga-ease); } .ga-post:hover .ga-post__media img { transform: scale(1.06); } .ga-post__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 20px; } .ga-chip { align-self: flex-start; font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 8px; background: var(--tint); color: var(--ink); } .ga-post__title { font-size: 17px; line-height: 1.55; margin: 0; } .ga-post__title a { color: var(--ga-navy); text-decoration: none; } .ga-post__title a::after { content: ""; position: absolute; inset: 0; } .ga-post__title a:hover { color: var(--ga-ocean); } .ga-post__text { color: var(--ga-muted); font-size: 14.5px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* الأسئلة الشائعة */ .ga-faq { display: grid; gap: 12px; } .ga-faq__item { background: #fff; border: 1px solid color-mix(in srgb, var(--accent) 22%, #E2ECF7); border-radius: 18px; overflow: hidden; transition: box-shadow .25s, border-color .25s; } .ga-faq__item[open] { border-color: color-mix(in srgb, var(--accent) 50%, #fff); box-shadow: 0 18px 34px -26px rgba(19, 38, 92, .6); } .ga-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-weight: 800; color: var(--ga-navy); cursor: pointer; transition: background .15s; } .ga-faq__item summary::-webkit-details-marker { display: none; } .ga-faq__item summary:hover { background: color-mix(in srgb, var(--accent) 6%, #fff); } .ga-faq__item[open] summary { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, #fff), #fff); } [dir="rtl"] .ga-faq__item[open] summary { background: linear-gradient(270deg, color-mix(in srgb, var(--accent) 12%, #fff), #fff); } .ga-faq__chev { flex: none; width: 32px; height: 32px; padding: 6px; border-radius: 10px; background: var(--tint); color: var(--ink); transition: transform .25s, background .25s, color .25s; } .ga-faq__item[open] .ga-faq__chev { transform: rotate(180deg); background: var(--ga-navy); color: #fff; } .ga-faq__a { padding: 14px 18px 16px; color: var(--ga-body); } .ga-faq__a p:last-child { margin-bottom: 0; } /* ========================================================================== المقال ========================================================================== */ .ga-artbg { background: var(--ga-mist); } .ga-arthead { position: relative; color: #fff; padding-block: 26px 96px; overflow: hidden; isolation: isolate; background: radial-gradient(55% 90% at 92% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 62%), linear-gradient(160deg, var(--ga-navy-2), var(--ga-navy) 55%, var(--ga-deep)); } .ga-arthead::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; background-image: radial-gradient(rgba(56, 189, 248, .5) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); } @media (min-width: 1024px) { .ga-arthead { padding-block: 34px 120px; } } .ga-arthead__in { max-width: 1240px; } .ga-arthead__svc { margin: 0 0 10px; } .ga-arthead__svc a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 10px; font-size: 13.5px; font-weight: 800; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); } [dir="rtl"] .ga-arthead__svc a { padding: 5px 6px 5px 12px; } .ga-arthead__svc a span { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 7px; background: var(--accent); } .ga-arthead__svc a:hover { background: rgba(255, 255, 255, .2); color: #fff; } .ga-article__title { font-size: clamp(27px, 4vw, 44px); line-height: 1.35; margin-bottom: 14px; max-width: 940px; } .ga-arthead .ga-article__title { color: #fff; } .ga-byline { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 8px; border-radius: 12px; font-size: 15px; color: #DCEBFB; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); } [dir="rtl"] .ga-byline { padding: 6px 8px 6px 14px; } .ga-byline a { font-weight: 800; color: #fff; text-decoration: none; } .ga-byline a:hover { color: var(--ga-sky-2); } .ga-byline .ga-avatar { width: 28px; height: 28px; box-shadow: none; } .ga-layout { display: grid; gap: 28px; padding-block: 0 64px; grid-template-columns: minmax(0, 1fr); margin-top: -64px; position: relative; z-index: 2; } @media (min-width: 1024px) { .ga-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; padding-bottom: 90px; margin-top: -84px; } } .ga-article { min-width: 0; background: #fff; border-radius: var(--ga-r-xl); padding: 16px 16px 30px; border: 1px solid color-mix(in srgb, var(--accent) 14%, #E2ECF7); box-shadow: 0 30px 70px -48px rgba(19, 38, 92, .6); } @media (min-width: 768px) { .ga-article { padding: 26px 36px 42px; } } .ga-article__thumb { margin: 0 0 24px; } .ga-article__thumb img { width: 100%; height: auto; border-radius: 20px; box-shadow: var(--ga-shadow-sm); } .ga-article__form, .ga-article__faq, .ga-related { margin-top: 42px; } .ga-article__faq h2, .ga-related h2 { display: flex; align-items: center; gap: 10px; font-size: 25px; } .ga-article__faq h2::before, .ga-related h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, #fff); } .ga-layout--page { margin-top: -64px; } /* ---------- نص المقال ---------- */ .ga-prose { font-size: 17.5px; line-height: 2; color: var(--ga-body); overflow-wrap: break-word; } .ga-prose > * { max-width: 100%; } .ga-prose div, .ga-prose p, .ga-prose figure, .ga-prose section, .ga-prose span { max-width: 100%; } .ga-prose p { margin: 0 0 1.15em; } .ga-prose > p:first-child { font-size: 18.5px; color: var(--ga-navy); } .ga-prose strong, .ga-prose b { color: var(--ga-navy); font-weight: 800; } .ga-prose h2 { position: relative; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.5; margin: 2em 0 .9em; padding-bottom: 16px; color: var(--ga-navy); text-align: start !important; scroll-margin-top: 100px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 14' fill='none' stroke-linecap='round'%3E%3Cpath d='M2 6c10-6 20-6 30 0s20 6 30 0 18-6 28 0' stroke='%230EA5E9' stroke-width='3'/%3E%3Cpath d='M12 12c8-4 16-4 24 0s16 4 24 0' stroke='%23F59E0B' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat left bottom / 74px 12px; } [dir="rtl"] .ga-prose h2 { background-position: right bottom; } .ga-prose h3 { display: flex; align-items: baseline; gap: 10px; font-size: clamp(19px, 2.2vw, 22px); margin: 1.6em 0 .6em; color: var(--ink); text-align: start !important; scroll-margin-top: 100px; } .ga-prose h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); transform: rotate(45deg) translateY(-2px); } .ga-prose h4 { font-size: 18px; margin: 1.3em 0 .4em; color: var(--ga-navy); text-align: start !important; } .ga-prose ul { list-style: none; padding-inline-start: 0; margin: 0 0 1.3em; } .ga-prose ul > li { position: relative; padding-inline-start: 30px; margin-bottom: .55em; } .ga-prose ul > li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 16px; height: 16px; background: var(--accent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); } .ga-prose ul ul > li::before { width: 8px; height: 8px; top: .9em; inset-inline-start: 8px; clip-path: none; border-radius: 2px; transform: rotate(45deg); background: color-mix(in srgb, var(--accent) 55%, #fff); } .ga-prose ol { list-style: none; counter-reset: gaol; padding-inline-start: 0; margin: 0 0 1.3em; } .ga-prose ol > li { counter-increment: gaol; position: relative; padding-inline-start: 40px; margin-bottom: .6em; } .ga-prose ol > li::before { content: counter(gaol); position: absolute; inset-inline-start: 0; top: .3em; min-width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--ga-navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, #fff); } .ga-prose li::marker { content: none; } .ga-prose a { color: color-mix(in srgb, var(--accent) 45%, #0B3A8F); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-decoration-thickness: 2px; text-underline-offset: 4px; border-radius: 4px; transition: background .15s, color .15s; } .ga-prose a:hover { color: var(--ga-navy); background: color-mix(in srgb, var(--accent) 12%, #fff); text-decoration-color: var(--accent); } .ga-prose img { border-radius: 18px; margin-inline: auto; height: auto !important; box-shadow: 0 18px 40px -28px rgba(19, 38, 92, .6); } .ga-prose figure, .ga-prose .wp-caption { margin: 1.8em auto; max-width: 100% !important; } .ga-prose figcaption, .ga-prose .wp-caption-text { display: table; margin: 10px auto 0; padding: 4px 14px; border-radius: 10px; text-align: center; font-size: 14px; line-height: 1.7; color: var(--ink); background: color-mix(in srgb, var(--accent) 9%, #fff); } .ga-prose blockquote { position: relative; margin: 1.8em 0; padding: 22px 22px 18px; padding-inline-start: 60px; border-radius: var(--ga-sail); background: linear-gradient(135deg, var(--ga-foam), #fff); border: 1px solid var(--ga-line); color: var(--ga-navy); font-size: 18px; } .ga-prose blockquote::before { content: ""; position: absolute; inset-inline-start: 18px; top: 22px; width: 26px; height: 26px; background: var(--ga-sky); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); } .ga-prose blockquote p:last-child { margin-bottom: 0; } .ga-prose iframe { width: 100%; border: 0; border-radius: 16px; aspect-ratio: 16 / 9; height: auto; } .ga-prose pre { overflow-x: auto; max-width: 100%; } .ga-prose .aligncenter { margin-inline: auto; } .ga-prose .alignleft, .ga-prose .alignright { float: none; margin-inline: auto; } .ga-prose .ga-faq { margin: 1em 0 2em; } .ga-prose .ga-faq summary span { font-size: 17px; } .ga-prose p[style*="center"], .ga-prose div[style*="center"], .ga-prose span[style*="center"] { text-align: start !important; } .ga-prose p[style*="center"]:has(img, iframe), .ga-prose div[style*="center"]:has(img, iframe) { text-align: center !important; } .ga-note { position: relative; padding: 14px 18px; padding-inline-start: 54px; border-radius: 16px; font-weight: 600; background: var(--ga-foam); border: 1px solid #BEE3F8; color: var(--ga-navy); } .ga-note::before { content: "i"; position: absolute; inset-inline-start: 15px; top: 15px; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font: 800 15px/1 Georgia, serif; color: #fff; background: var(--ga-ocean); } .ga-note--warn { background: #FFF6E5; border-color: #FCD9A0; } .ga-note--warn::before { content: "!"; background: #B45309; font-family: inherit; } .ga-note--tip { background: #ECF8EF; border-color: #BFE6C9; } .ga-note--tip::before { content: "\2713"; background: var(--ga-wa); font-family: inherit; } /* الجداول */ .ga-table { overflow-x: auto; max-width: 100%; margin: 1.6em 0; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 22%, #E2ECF7); background: #fff; box-shadow: var(--ga-shadow-sm); -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .ga-table table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 520px; font-size: 15px; margin: 0; } .ga-prose table { max-width: none; } .ga-prose .wp-block-table { margin: 0; overflow: visible; } .ga-table th, .ga-table td { padding: 12px 14px; border: 0; border-block-end: 1px solid color-mix(in srgb, var(--accent) 12%, #EDF3FA); text-align: start; vertical-align: top; } .ga-table thead th, .ga-table thead td, .ga-table tr:first-child th { background: linear-gradient(135deg, var(--ga-navy-2), var(--ga-navy)); color: #fff; font-weight: 800; white-space: nowrap; } .ga-table table:not(:has(thead)) tr:first-child td { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--ga-navy); font-weight: 800; } .ga-table tbody tr:nth-child(even) td { background: var(--ga-mist); } .ga-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 9%, #fff); } .ga-table tr:last-child td { border-block-end: 0; } .ga-table th:first-child, .ga-table td:first-child { min-width: 9.5em; } /* صندوق الحجز داخل المقال */ .ga-teaser { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 1.6em 0; padding: 18px; border-radius: var(--ga-sail); background: linear-gradient(120deg, #FFF0F5, var(--ga-foam)); border: 1px solid #F6C6D7; box-shadow: 0 16px 30px -24px rgba(196, 47, 102, .9); } .ga-teaser__ico { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: 16px; background: #fff; color: #B8285C; flex: none; } .ga-teaser__txt { flex: 1 1 220px; display: flex; flex-direction: column; line-height: 1.6; } .ga-teaser__txt strong { font-size: 18px; color: var(--ga-navy); } .ga-teaser__txt span { color: var(--ga-muted); font-size: 15px; } .ga-teaser .ga-btn { text-decoration: none; } .ga-prose a.ga-btn { color: #fff; border-radius: 14px; text-decoration: none; font-weight: 800; } .ga-prose a.ga-btn:hover { color: #fff; background: linear-gradient(135deg, #c42f66, #9d1f52); } /* ---------- الفهرس الداكن: مطوي حتى «إظهار» ---------- */ .ga-toc { margin-bottom: 24px; border-radius: 20px; color: #E2EEFF; overflow: hidden; background: radial-gradient(90% 70% at 100% 0%, rgba(14, 165, 233, .3), transparent 60%), linear-gradient(165deg, var(--ga-navy-2) 0%, var(--ga-navy) 55%, var(--ga-deep) 100%); box-shadow: 0 22px 44px -28px rgba(14, 29, 75, .9); border: 1px solid rgba(56, 189, 248, .25); } .ga-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; } .ga-toc__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15.5px; color: #fff; } .ga-toc__title svg { color: var(--ga-sky-2); } .ga-toc__title small { display: inline-flex; min-width: 24px; height: 24px; align-items: center; justify-content: center; padding-inline: 6px; border-radius: 7px; font-size: 12px; background: rgba(56, 189, 248, .22); color: #fff; } .ga-toc__toggle { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 10px; padding: 7px 12px; font-weight: 800; font-size: 13.5px; cursor: pointer; color: var(--ga-navy); background: var(--ga-sky-2); transition: background .2s; } .ga-toc__toggle:hover { background: #fff; } .ga-toc__toggle svg { transition: transform .25s; } .ga-toc__toggle .ga-toc__hide { display: none; } .ga-toc__toggle[aria-expanded="true"] .ga-toc__hide { display: inline; } .ga-toc__toggle[aria-expanded="true"] .ga-toc__show { display: none; } .ga-toc__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .ga-toc__body { padding: 0 10px 12px; max-height: 60vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; border-top: 1px solid rgba(255, 255, 255, .08); } .ga-toc__body:not([hidden]) { animation: ga-fadein .3s var(--ga-ease); } .ga-toc__body[hidden] { display: none; } html:not(.ga-js) .ga-toc__body[hidden] { display: block; } .ga-toc__list, .ga-toc__sub { list-style: none; margin: 0; padding: 0; counter-reset: gatoc; } .ga-toc__list { padding-top: 8px; } .ga-toc__list > li { counter-increment: gatoc; } .ga-toc__sub { counter-reset: gasub; padding-inline-start: 30px; } .ga-toc__sub > li { counter-increment: gasub; } .ga-toc a { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: 10px; color: #D6E6FF; text-decoration: none; font-size: 14.5px; line-height: 1.6; border-inline-start: 3px solid transparent; } .ga-toc a:hover { background: rgba(255, 255, 255, .08); color: #fff; } .ga-toc a:focus-visible { outline-color: var(--ga-sun); } .ga-toc__list > li > a::before { content: counter(gatoc); flex: none; min-width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--ga-navy); background: var(--ga-sky-2); } .ga-toc__list > li:nth-child(3n+2) > a::before { background: var(--ga-sun); } .ga-toc__list > li:nth-child(3n+3) > a::before { background: #fff; } .ga-toc__sub > li > a::before { content: counter(gatoc) "." counter(gasub); flex: none; min-width: 30px; margin-top: 2px; font-size: 12px; color: #9FC0EA; } .ga-toc a.is-active { background: rgba(56, 189, 248, .16); color: #fff; font-weight: 800; border-inline-start-color: var(--ga-sun); } .ga-toc--side { display: none; } @media (min-width: 1024px) { .ga-toc--inline { display: none; } .ga-toc--side { display: block; } } /* ---------- الشريط الجانبي ---------- */ .ga-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .ga-side__a:empty, .ga-side__sticky:empty { display: none; } .ga-side__sticky { display: flex; flex-direction: column; gap: 16px; } .ga-side__b { display: grid; gap: 20px; align-content: start; } .ga-side__b > *, .ga-side__sticky > * { min-width: 0; } @media (min-width: 640px) and (max-width: 1023px) { .ga-side__b { grid-template-columns: 1fr 1fr; } .ga-side__b > .ga-widget--cta { grid-column: 1 / -1; } } @media (min-width: 1024px) { .ga-side.has-toc .ga-side__a { flex: 1 1 auto; } .ga-side.has-toc .ga-side__sticky { position: sticky; top: 92px; max-height: calc(100vh - 112px); } .admin-bar .ga-side.has-toc .ga-side__sticky { top: 124px; max-height: calc(100vh - 144px); } .ga-side.has-toc .ga-toc--side { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; margin-bottom: 0; } .ga-side.has-toc .ga-toc--side .ga-toc__body:not([hidden]) { flex: 1 1 auto; min-height: 0; max-height: none; } .ga-side.has-toc .ga-widget--book { flex: none; } } .ga-widget { position: relative; overflow: hidden; border-radius: 22px; padding: 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--accent) 24%, #E2ECF7); box-shadow: var(--ga-shadow-sm); } .ga-widget::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, #fff)); } .ga-widget__h { display: flex; align-items: center; gap: 9px; font-size: 17px; margin-bottom: 14px; color: var(--ga-navy); } .ga-widget__ico { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent); color: #fff; flex: none; } .ga-widget__more { margin-top: 12px; font-size: 14.5px; } .ga-widget__cities { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 8px; } .ga-minis { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ga-mini { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 14px; text-decoration: none; color: var(--ga-navy); transition: background .15s; } .ga-mini:hover { background: color-mix(in srgb, var(--accent) 9%, #fff); color: var(--ga-navy); } .ga-mini__media { position: relative; flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, #fff); } .ga-mini__img { width: 100%; height: 100%; object-fit: cover; } .ga-mini__t { font-size: 14.5px; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ga-svc-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (max-width: 359px) { .ga-svc-tiles { grid-template-columns: minmax(0, 1fr); } } .ga-svc-tiles a { display: flex; align-items: center; gap: 8px; height: 100%; min-width: 0; padding: 9px; border-radius: 13px; text-decoration: none; font-size: 13.5px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; color: color-mix(in srgb, var(--accent) 55%, #0B1A44); background: color-mix(in srgb, var(--accent) 9%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff); transition: transform .15s, background .15s, color .15s; } .ga-svc-tiles__ico { flex: none; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent); color: #fff; } .ga-svc-tiles a:hover, .ga-svc-tiles a[aria-current] { background: var(--accent); color: #fff; transform: translateY(-2px); } .ga-svc-tiles a:hover .ga-svc-tiles__ico, .ga-svc-tiles a[aria-current] .ga-svc-tiles__ico { background: rgba(255, 255, 255, .22); } .ga-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; } .ga-areas a, .ga-areas span { display: inline-flex; padding: 5px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; text-decoration: none; color: color-mix(in srgb, var(--accent) 60%, #0B1A44); background: #fff; border: 1px solid color-mix(in srgb, var(--accent) 32%, #fff); transition: background .15s, color .15s; } .ga-areas a:hover, .ga-areas a[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; } .ga-widget--book { --accent: var(--ga-rose); border: 0; color: #fff; background: radial-gradient(80% 60% at 100% 0%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(150deg, #D63C74 0%, #9D1F52 55%, var(--ga-navy) 130%); box-shadow: 0 22px 40px -24px rgba(157, 31, 82, .9); } .ga-widget--book::before, .ga-widget--cta::before { display: none; } .ga-widget--book__top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ga-widget--book__ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255, 255, 255, .2); flex: none; } .ga-widget--book .ga-widget__h { color: #fff; margin: 0; } .ga-widget--book p { color: rgba(255, 255, 255, .92); font-size: 15px; margin-bottom: 12px; } .ga-widget__cities a { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 10px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); color: #fff; text-decoration: none; font-weight: 800; font-size: 14px; } .ga-widget__cities a:hover { background: #fff; color: #9D1F52; } .ga-widget--book .ga-btn--light { color: #9D1F52; } .ga-widget--cta { border: 0; color: #fff; background: radial-gradient(80% 60% at 100% 0%, rgba(56, 189, 248, .45), transparent 60%), linear-gradient(150deg, var(--ga-navy-2), var(--ga-navy)); box-shadow: 0 22px 40px -24px rgba(19, 38, 92, .9); } .ga-widget--cta::after { content: ""; position: absolute; inset-inline-end: -30px; bottom: -40px; width: 160px; height: 90px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90' fill='none' stroke-linecap='round'%3E%3Cpath d='M0 40c20-14 40-14 60 0s40 14 60 0 30-12 40-6' stroke='%2338BDF8' stroke-width='5'/%3E%3Cpath d='M0 60c20-14 40-14 60 0s40 14 60 0 30-12 40-6' stroke='%23F59E0B' stroke-width='4'/%3E%3C/svg%3E") no-repeat; opacity: .55; } .ga-widget--cta__ico { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255, 255, 255, .14); color: var(--ga-sky-2); margin-bottom: 10px; } .ga-widget--cta .ga-widget__h { color: #fff; font-size: 19px; margin-bottom: 6px; } .ga-widget--cta p { color: #D7E8FB; font-size: 14.5px; } .ga-widget--cta .ga-btn { position: relative; z-index: 1; } /* ---------- الكاتب ---------- */ .ga-avatar { display: inline-block; flex: none; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 6px 16px -8px rgba(19, 38, 92, .5); } .ga-avatar--initial { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--ga-sky), var(--ga-navy-2)); } .ga-authorbox { display: flex; gap: 18px; align-items: flex-start; margin-top: 42px; padding: 22px; border-radius: var(--ga-sail); background: linear-gradient(135deg, var(--ga-foam), #fff 75%); border: 1px solid var(--ga-line); } .ga-authorbox__txt { min-width: 0; } .ga-authorbox__txt p { margin: 0 0 4px; } .ga-authorbox__eyebrow { font-size: 13px; font-weight: 800; color: var(--ga-ocean); } .ga-authorbox__name { font-size: 20px; font-weight: 800; } .ga-authorbox__name a { color: var(--ga-navy); text-decoration: none; } .ga-authorbox__role { color: var(--ga-muted); font-weight: 700; font-size: 14.5px; } .ga-authorbox__bio { color: var(--ga-body); margin: 8px 0 10px !important; } @media (max-width: 479px) { .ga-authorbox { flex-direction: column; } } /* ========================================================================== التذييل ========================================================================== */ .ga-footer { position: relative; color: #D2E2F6; background: var(--ga-mist); } .ga-footer__wave { display: block; width: 100%; height: 80px; margin-bottom: -1px; } .ga-footer__wave-a { fill: var(--ga-deep); } .ga-footer__wave-b, .ga-footer__wave-c { fill: none; stroke-linecap: round; stroke-dasharray: 12 10; animation: ga-flow 3s linear infinite; } .ga-footer__wave-b { stroke: var(--ga-sky-2); stroke-width: 3; } .ga-footer__wave-c { stroke: var(--ga-sun); stroke-width: 2.5; animation-direction: reverse; animation-duration: 4s; } .ga-footer__body { background: radial-gradient(60% 50% at 100% 0%, rgba(14, 165, 233, .18), transparent 60%), linear-gradient(180deg, var(--ga-deep), #0B1840); } .ga-footer__grid { display: grid; gap: 18px; padding-block: 34px 34px; grid-template-columns: 1fr; } @media (min-width: 700px) { .ga-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .ga-footer__grid { grid-template-columns: 1.35fr .9fr 1.15fr 1.2fr; gap: 20px; } } .ga-footer__card { position: relative; padding: 22px 20px; border-radius: var(--ga-sail); background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(56, 189, 248, .22); } .ga-footer__brand { display: inline-flex; text-decoration: none; margin-bottom: 14px; } .ga-footer__plate { display: inline-flex; padding: 8px 12px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7); } .ga-footer__logo { width: 150px; height: auto; max-height: 96px; object-fit: contain; } .ga-footer__about p { color: #C4D6EF; font-size: 15px; line-height: 1.9; } .ga-footer__acts { display: flex; flex-wrap: wrap; gap: 10px; } .ga-footer__h { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 17px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed rgba(56, 189, 248, .3); } .ga-footer__hico { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 9px; background: rgba(56, 189, 248, .18); color: var(--ga-sky-2); } .ga-footer ul { list-style: none; margin: 0; padding: 0; } .ga-footer__links li, .ga-footer__posts li { margin-bottom: 6px; } .ga-footer__col a { display: inline-flex; align-items: center; gap: 9px; color: #D2E2F6; text-decoration: none; transition: color .15s, transform .2s; } .ga-footer__col a:hover { color: #fff; transform: translateX(-3px); } [dir="ltr"] .ga-footer__col a:hover { transform: translateX(3px); } .ga-footer__posts a { display: block; line-height: 1.6; font-size: 14.5px; padding-inline-start: 14px; position: relative; } .ga-footer__posts a::before { content: ""; position: absolute; inset-inline-start: 0; top: .65em; width: 6px; height: 6px; border-radius: 2px; transform: rotate(45deg); background: var(--ga-sun); } .ga-footer__chips { display: flex; flex-wrap: wrap; gap: 6px; } .ga-footer__chips a { padding: 5px 11px; border-radius: 9px; font-size: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); } .ga-footer__chips a:hover { background: var(--ga-sky); border-color: var(--ga-sky); transform: none; } .ga-footer__bar { border-block-start: 1px solid rgba(255, 255, 255, .08); } .ga-footer__bar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-block: 16px; font-size: 14px; } .ga-footer__bar p { margin: 0; color: #AFC4E2; } .ga-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 16px; } .ga-footer__legal a { color: #D2E2F6; text-decoration: none; } .ga-footer__legal a:hover { color: #fff; text-decoration: underline; } /* ========================================================================== الأزرار العائمة: اتصال وواتساب (من القالب)، احجز شغالة، اللغة، العودة للأعلى ========================================================================== */ .tarek-tpfb { display: none !important; } .ga-callbar { position: fixed; z-index: 999999; display: flex; gap: 10px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 12px; } .ga-callbar__btn { position: relative; flex: 1 1 50%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 12px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .92); color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; box-shadow: 0 10px 26px rgba(14, 29, 75, .32); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; -webkit-tap-highlight-color: transparent; } .ga-callbar__btn--call { background: linear-gradient(135deg, var(--ga-ocean), var(--ga-navy-2)); } .ga-callbar__btn--wa { background: linear-gradient(135deg, #16A34A, var(--ga-wa)); } .ga-callbar__btn:hover, .ga-callbar__btn:focus-visible { color: #fff; transform: translateY(-3px); filter: brightness(1.06); } .ga-callbar__btn:focus-visible { outline: 3px solid var(--ga-sun); outline-offset: 3px; } .ga-callbar__ico { flex: none; } .ga-callbar__btn--wa .ga-callbar__ico { stroke-width: 1.9; } @media (min-width: 601px) { .ga-callbar__btn--call::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--ga-sky-2); animation: ga-ring 2.4s ease-out infinite; pointer-events: none; } } @keyframes ga-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } } .ga-fab { position: fixed; z-index: 999998; bottom: max(24px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 18px 0 8px; border-radius: 18px; background: linear-gradient(135deg, #D63C74, #9D1F52); color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; border: 2px solid rgba(255, 255, 255, .92); box-shadow: 0 10px 26px rgba(14, 29, 75, .3); transition: transform .2s ease, opacity .2s ease, visibility .2s; } [dir="rtl"] .ga-fab { padding: 0 8px 0 18px; } .ga-fab:hover, .ga-fab:focus-visible { color: #fff; transform: translateY(-3px); } .ga-fab__ico { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, .2); } .ga-fab.is-away { opacity: 0; visibility: hidden; transform: translateY(12px); } .ga-call-left .ga-fab { left: max(20px, env(safe-area-inset-left)); } .ga-call-right .ga-fab { right: max(20px, env(safe-area-inset-right)); } .ga-has-call .ga-fab { bottom: calc(max(24px, env(safe-area-inset-bottom)) + 140px); } .ga-top { position: fixed; z-index: 999997; bottom: max(24px, env(safe-area-inset-bottom)); width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: var(--ga-navy); color: #fff; cursor: pointer; box-shadow: 0 12px 28px -10px rgba(14, 29, 75, .7); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9); transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s; } .ga-top.is-on { opacity: 1; visibility: visible; transform: none; } .ga-top:hover { background: var(--ga-ocean); } .ga-call-left .ga-top { right: max(20px, env(safe-area-inset-right)); } .ga-call-right .ga-top { left: max(20px, env(safe-area-inset-left)); } .ga-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .ga-top__track { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 3; } .ga-top__bar { fill: none; stroke: var(--ga-sun); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .1s linear; } .ga-top__ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .ga-langfab { position: fixed; z-index: 999997; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--ga-sky), var(--ga-ocean)); color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; border: 2px solid rgba(255, 255, 255, .92); box-shadow: 0 10px 24px rgba(14, 29, 75, .3); transition: transform .2s ease, filter .2s ease; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 58px); } .ga-langfab[lang="ar"] { font-size: 20px; } .ga-langfab:hover, .ga-langfab:focus-visible { color: #fff; transform: translateY(-3px); filter: brightness(1.08); } .ga-call-left .ga-langfab { right: 12px; } .ga-call-right .ga-langfab { left: 12px; } @media (max-width: 600px) { .ga-fab { height: 50px; font-size: 14px; bottom: max(14px, env(safe-area-inset-bottom)); } .ga-fab__ico { width: 34px; height: 34px; } .ga-call-left .ga-fab { left: 12px; } .ga-call-right .ga-fab { right: 12px; } .ga-top { width: 48px; height: 48px; bottom: max(14px, env(safe-area-inset-bottom)); } .ga-call-left .ga-top { right: 12px; } .ga-call-right .ga-top { left: 12px; } .ga-has-call .ga-fab, .ga-has-call .ga-top { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 66px); } .ga-has-call .ga-langfab { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 66px + 58px); } body.ga-has-call { padding-bottom: 72px; } } @media (min-width: 601px) { .ga-callbar { right: auto; left: auto; bottom: max(24px, env(safe-area-inset-bottom)); flex-direction: column; gap: 12px; } .ga-callbar--left { left: max(20px, env(safe-area-inset-left)); } .ga-callbar--right { right: max(20px, env(safe-area-inset-right)); } .ga-callbar__btn { flex: none; width: 56px; height: 56px; padding: 0; border-radius: 50%; } .ga-callbar__txt, .ga-fab__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ga-fab { width: 56px; height: 56px; padding: 0 !important; justify-content: center; border-radius: 50%; } .ga-fab__ico { background: transparent; } .ga-has-call .ga-fab { bottom: calc(max(24px, env(safe-area-inset-bottom)) + 136px); } .ga-call-left .ga-fab { left: max(20px, env(safe-area-inset-left)); } .ga-call-right .ga-fab { right: max(20px, env(safe-area-inset-right)); } .ga-top { width: 56px; height: 56px; } .ga-langfab { width: 56px; height: 56px; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 68px); font-size: 16px; } .ga-call-left .ga-langfab { right: max(20px, env(safe-area-inset-right)); } .ga-call-right .ga-langfab { left: max(20px, env(safe-area-inset-left)); } .ga-callbar__btn[data-ga-tip]::after, .ga-fab[data-ga-tip]::after, .ga-langfab[data-ga-tip]::after { content: attr(data-ga-tip); position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; padding: 6px 12px; border-radius: 10px; background: var(--ga-navy); color: #fff; font: 700 14px/1.4 var(--ga-font); opacity: 0; visibility: hidden; transition: opacity .15s; box-shadow: 0 10px 24px -12px rgba(14, 29, 75, .8); } .ga-callbar--left .ga-callbar__btn::after, .ga-call-left .ga-fab::after { left: calc(100% + 10px); } .ga-callbar--right .ga-callbar__btn::after, .ga-call-right .ga-fab::after { right: calc(100% + 10px); } .ga-call-left .ga-langfab::after { right: calc(100% + 10px); } .ga-call-right .ga-langfab::after { left: calc(100% + 10px); } .ga-callbar__btn:hover::after, .ga-callbar__btn:focus-visible::after, .ga-fab:hover::after, .ga-fab:focus-visible::after, .ga-langfab:hover::after, .ga-langfab:focus-visible::after { opacity: 1; visibility: visible; } /* هامش يتسع للأزرار العائمة: 20 + 56 + 16 = 92px من حافة الشاشة إلى المحتوى */ .ga-main .ga-wrap, .ga-footer .ga-wrap { padding-inline: max(28px, calc(92px - max(0px, (100vw - 1240px) / 2))); } } /* ---------- مقالات مصممة بأنماط مضمّنة:
---------- */ .ga-prose [data-ga-art] { display: block; } .ga-prose [data-ga-art] :is(ul, ol)[style] { padding-inline-start: revert; } .ga-prose [data-ga-art] :is(ul, ol)[style] > li, .ga-prose [data-ga-art] li[style] { padding-inline-start: revert; position: static; counter-increment: none; } .ga-prose [data-ga-art] :is(ul, ol)[style] > li::before, .ga-prose [data-ga-art] li[style]::before { content: none; display: none; } .ga-prose [data-ga-art] :is(ul, ol)[style] > li::marker, .ga-prose [data-ga-art] li[style]::marker { content: normal; } .ga-prose [data-ga-art] :is(h2, h3, h4)[style] { background: none; border: 0; border-radius: 0; padding: 0; display: block; } .ga-prose [data-ga-art] h3[style]::before { content: none; display: none; } .ga-prose [data-ga-art] blockquote[style] { background: none; border: 0; border-radius: 0; padding: 0; font-size: inherit; } .ga-prose [data-ga-art] blockquote[style]::before { content: none; display: none; } .ga-prose [data-ga-art] .ga-table:has(> table[style]) { border: 0; border-radius: 0; box-shadow: none; background: transparent; } .ga-prose [data-ga-art] table[style] { border-collapse: collapse; border-spacing: 0; } .ga-prose [data-ga-art] table[style] :is(th, td) { border: revert; background: revert; color: revert; font-weight: revert; white-space: normal; padding: revert; } .ga-prose [data-ga-art] table[style] tr:hover > td { background: revert; } .ga-prose [data-ga-art] img[style] { border-radius: 0; box-shadow: none; } .ga-prose [data-ga-art] a[style] { text-decoration: none; background: none; border-radius: 0; font-weight: inherit; } .ga-prose [data-ga-art] a[style]:hover { background: none; } .ga-prose [data-ga-art] figure[style] figcaption, .ga-prose [data-ga-art] figcaption[style] { display: block; background: none; padding: 0; border-radius: 0; } .ga-prose [data-ga-art] :is(p, div, span, td, th)[style*="center"] { text-align: center !important; } .ga-prose [data-ga-art] table[style] :is(th, td):first-child { min-width: 0; } /* ---------- تقليل الحركة ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; } .ga-tide__line, .ga-phero__wline { stroke-dashoffset: 0; } .ga-orbit__track, .ga-orbit__chip, .ga-marquee__list, .ga-map__path, .ga-map__pulse, .ga-tide__star, .ga-cta__waves path, .ga-footer__wave-b, .ga-footer__wave-c, .ga-flow__list::before { animation: none !important; } .ga-marquee__belt { flex-wrap: wrap; width: auto; -webkit-mask-image: none; mask-image: none; } .ga-marquee__list { flex-wrap: wrap; justify-content: center; padding-inline: 16px; } .ga-marquee__list--clone { display: none; } .ga-card8 { transform: none !important; } .ga-map__mover { display: none; } } /* ---------- الطباعة ---------- */ @media print { .ga-header, .ga-footer, .ga-side, .ga-teaser, .ga-article__form, .ga-cta, .ga-fab, .ga-top, .ga-langfab, .ga-callbar { display: none !important; } .ga-arthead { background: none; color: #000; padding: 0; } .ga-arthead .ga-article__title { color: #000; } .ga-layout { margin-top: 0; } } /* أسفل قوائم المقالات: أرقام الصفحات وبجوارها زر كل المقالات */ .ga-bsec__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 30px; } .ga-bsec__foot .ga-pager ul { margin: 0; } .ga-bsec__foot .ga-bsec__all { flex: none; } @media (max-width: 600px) { .ga-bsec__foot { flex-direction: column; } } /* وصف الاسم: للنقل والشحن والخدمات العامة */ .ga-brand { display: inline-flex; align-items: center; gap: 10px; } .ga-brand__tag { font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--ga-ocean, #0284C7); max-width: 120px; padding-inline-start: 10px; border-inline-start: 2px solid var(--ga-sky, #38BDF8); } @media (max-width: 1100px) { .ga-brand__tag { display: none; } } .ga-tide__tagline { margin: -6px 0 14px; font-size: clamp(16px, 2vw, 22px); font-weight: 800; color: #FBBF24; letter-spacing: .2px; } .ga-footer__tag { margin: 10px 0 0; font-size: 14px; color: #BAE6FD; } .ga-footer__tag strong { color: #fff; } /* النص المتدرج: نقاط الياء والحروف النازلة تحت السطر كانت تُقص — مساحة سفلية لتظهر كاملة */ .ga-tide__title { padding-block-end: .22em; margin-block-end: -.12em; line-height: 1.3; overflow: visible; }