/* ===================================================================== مرصدك — أنماط صفحات الأخبار والتغطيات الميدانية pages/news.css · يغطي: /news · /news/{slug} · /coverages /coverages/{slug} · /coverage-request يبني فوق components.css ولا يكرّره: .card .badge .chip .prose .gallery-grid .share-btn .tabs .empty-state كل الخصائص منطقية (inline/block) — الاتجاه RTL. ===================================================================== */ /* ===================================================================== 0) شيم توافق: مخرجات Paginator::render() المكوّن العام ينسّق .pagination__link.is-active و .pagination__gap، بينما Paginator يولّد --active و __ellipsis. نغطّي الاسمين هنا فقط داخل صفحاتنا حتى لا يظهر الترقيم بلا حالة نشطة. ===================================================================== */ .page-news .pagination__link--active, .page-coverages .pagination__link--active { color: var(--white); background-image: var(--grad-brand); border-color: transparent; box-shadow: 0 6px 16px rgba(91, 63, 209, .24); pointer-events: none; } .page-news .pagination__ellipsis, .page-coverages .pagination__ellipsis { padding-inline: var(--sp-2); color: var(--muted); user-select: none; } .page-news .pagination__link--prev .pagination__label, .page-news .pagination__link--next .pagination__label, .page-coverages .pagination__link--prev .pagination__label, .page-coverages .pagination__link--next .pagination__label { font-weight: var(--fw-medium); } @media (max-width: 480px) { .page-news .pagination__label, .page-coverages .pagination__label { display: none; } } /* ===================================================================== 0.1) شبكة أمان بلا جافاسكربت .reveal / .reveal-stagger في animations.css تبدأ بـ opacity:0 وتنتظر الصنف .is-visible من reveal.js. يضيف app.js الصنف js-ready على ، فإن غاب جافاسكربت أظهرنا محتوى صفحاتنا فوراً — الصفحات تعمل بلا JS. ===================================================================== */ html:not(.js-ready) .page-news .reveal, html:not(.js-ready) .page-news .reveal-stagger > *, html:not(.js-ready) .page-coverages .reveal, html:not(.js-ready) .page-coverages .reveal-stagger > * { opacity: 1; transform: none; } /* ===================================================================== 1) شريط أدوات القوائم (بحث + ترتيب) — يعمل بلا جافاسكربت ===================================================================== */ .list-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); } .list-toolbar__search { min-inline-size: 0; } .list-toolbar__sort { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } .list-toolbar__sort .field__label { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); white-space: nowrap; } .list-toolbar__sort .select { min-inline-size: 170px; } @media (max-width: 768px) { .list-toolbar { grid-template-columns: minmax(0, 1fr); } .list-toolbar__sort { justify-content: space-between; } .list-toolbar__sort .select { flex: 1 1 auto; min-inline-size: 0; } } /* ===================================================================== 2) قسم «عاجل» أعلى صفحة الأخبار ===================================================================== */ .breaking { --card-pad: var(--sp-5); padding-block: var(--sp-6); background: radial-gradient(120% 140% at 88% 0%, rgba(214, 69, 80, .10), transparent 58%), var(--cream-50); border-block-end: 1px solid var(--line); } .breaking__head { display: flex; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-5); flex-wrap: wrap; } .breaking__label { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 7px 16px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--white); background: var(--danger); border-radius: var(--r-pill); box-shadow: 0 6px 18px rgba(214, 69, 80, .28); } .breaking__label::before { content: ''; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--white); animation: pulse-dot 1.6s var(--ease-in-out, ease-in-out) infinite; } .breaking__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--navy-800); line-height: var(--lh-tight); } .breaking__hint { margin: 0; margin-inline-start: auto; font-size: var(--fs-sm); color: var(--muted); } /* بطاقة الخبر العاجل */ .breaking-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--white); border: 1px solid var(--line); border-start-start-radius: var(--r-lg); border-start-end-radius: var(--r-lg); border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; block-size: 100%; transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease); } .breaking-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 4px; background: linear-gradient(90deg, var(--danger), #F0794E); } .breaking-card:hover { transform: translateY(-5px); border-color: rgba(214, 69, 80, .35); box-shadow: var(--shadow-md); } .breaking-card__top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .breaking-card__dot { position: relative; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--danger); flex-shrink: 0; } .breaking-card__dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(214, 69, 80, .55); animation: ping 1.9s var(--ease) infinite; } .breaking-card__time { font-size: var(--fs-xs); color: var(--danger); font-weight: var(--fw-bold); } .breaking-card__cat { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--muted); } .breaking-card__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--navy-800); } .breaking-card__title a { color: inherit; text-decoration: none; } .breaking-card__title a::after { content: ''; position: absolute; inset: 0; } .breaking-card__title a:hover { color: var(--violet-600); } .breaking-card__excerpt { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .breaking__label::before, .breaking-card__dot::after { animation: none; } } /* ===================================================================== 3) الخبر الرئيسي الكبير ===================================================================== */ .news-lead { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; margin-block-end: var(--sp-6); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease); } .news-lead:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .news-lead__media { position: relative; overflow: hidden; background: var(--cream-200); min-block-size: 320px; } .news-lead__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform var(--dur-4) var(--ease); } .news-lead:hover .news-lead__media img { transform: scale(1.05); } .news-lead__badges { position: absolute; inset-block-start: var(--sp-4); inset-inline-start: var(--sp-4); display: flex; gap: var(--sp-2); z-index: 2; flex-wrap: wrap; } .news-lead__body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-7) var(--sp-6); } .news-lead__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--violet-600); } .news-lead__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--navy-800); } .news-lead__title a { color: inherit; text-decoration: none; } .news-lead__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; } .news-lead__title a:hover { color: var(--violet-600); } .news-lead__excerpt { margin: 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: var(--lh-prose); color: var(--ink-soft); } .news-lead__meta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-block-start: auto; padding-block-start: var(--sp-4); border-block-start: 1px dashed var(--line); font-size: var(--fs-sm); color: var(--muted); } .news-lead__meta-item { display: inline-flex; align-items: center; gap: 6px; } .news-lead__meta-item svg[data-icon] { color: var(--violet-400); } @media (max-width: 1024px) { .news-lead { grid-template-columns: minmax(0, 1fr); } .news-lead__media { min-block-size: 0; aspect-ratio: 16 / 9; } .news-lead__body { padding: var(--sp-6) var(--sp-5); } .news-lead__title { font-size: var(--fs-xl); } } /* شارة العاجل داخل البطاقات العادية */ .badge--breaking { color: var(--white); background: var(--danger); border-color: transparent; } .badge--breaking::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--white); animation: pulse-dot 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .badge--breaking::before { animation: none; } } /* ===================================================================== 4) صفحة الخبر — الهيرو والميتا ===================================================================== */ .article-hero { position: relative; padding-block: var(--sp-8) var(--sp-7); background: radial-gradient(90% 120% at 82% -10%, rgba(129, 57, 214, .30), transparent 60%), var(--grad-navy, linear-gradient(135deg, #0A1236 0%, #1B2A6B 100%)); color: var(--white); overflow: hidden; } .article-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; } .article-hero__inner { position: relative; z-index: 1; max-inline-size: 820px; } .article-hero__badges { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-block-end: var(--sp-4); } .article-hero__title { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.22; color: var(--white); text-wrap: balance; } .article-hero__excerpt { margin: 0; font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.75; color: rgba(250, 247, 241, .86); } .article-hero__meta { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; margin-block-start: var(--sp-6); padding-block-start: var(--sp-5); border-block-start: 1px solid rgba(255, 255, 255, .16); font-size: var(--fs-sm); color: rgba(250, 247, 241, .78); } .article-hero__author { display: inline-flex; align-items: center; gap: var(--sp-3); } .article-hero__author-name { display: block; font-weight: var(--fw-bold); color: var(--white); } .article-hero__author-title { display: block; font-size: var(--fs-xs); color: rgba(250, 247, 241, .64); } .article-hero__stat { display: inline-flex; align-items: center; gap: 7px; } .article-hero__stat svg[data-icon] { color: var(--violet-300); } @media (max-width: 768px) { .article-hero { padding-block: var(--sp-7) var(--sp-6); } .article-hero__meta { gap: var(--sp-4); } } /* غلاف الخبر البارز فوق المحتوى */ .article-cover { position: relative; margin-block-start: calc(var(--sp-7) * -1); margin-block-end: var(--sp-6); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--cream-200); aspect-ratio: 16 / 9; } .article-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .article-cover__caption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--sp-6) var(--sp-5) var(--sp-4); font-size: var(--fs-sm); color: var(--white); background: linear-gradient(to top, rgba(7, 12, 38, .78), transparent); } @media (max-width: 768px) { .article-cover { margin-block-start: calc(var(--sp-6) * -1); border-radius: var(--r-lg); } } /* ===================================================================== 5) تخطيط المقال + شريط المشاركة اللاصق ===================================================================== */ .article-layout { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: var(--sp-6); align-items: start; } .article-rail { position: sticky; inset-block-start: calc(var(--header-h, 72px) + var(--sp-5)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-xs); } .article-rail__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); writing-mode: vertical-rl; margin-block-end: var(--sp-1); } .article-body { min-inline-size: 0; } /* المقتطف كافتتاحية */ .article-lead { margin: 0 0 var(--sp-6); padding-inline-start: var(--sp-5); border-inline-start: 4px solid var(--violet-400); font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.85; color: var(--navy-700); } /* ملاحظات تحت المقال */ .article-note { display: flex; align-items: flex-start; gap: var(--sp-3); margin-block-start: var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--violet-50); border: 1px solid var(--violet-100); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-body); } .article-note svg[data-icon] { color: var(--violet-500); flex-shrink: 0; margin-block-start: 2px; } /* مصدر الخبر */ .article-source { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-block-start: var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--cream-50); border: 1px solid var(--line); border-radius: var(--r-md); } .article-source__label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--navy-800); } .article-source__label svg[data-icon] { color: var(--violet-500); } .article-source__name { font-size: var(--fs-sm); color: var(--ink-soft); } .article-source__link { margin-inline-start: auto; } /* شريط المشاركة الأفقي أسفل المقال */ .article-share { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-block-start: var(--sp-7); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--line); } .article-share__end { margin-inline-start: auto; } @media (max-width: 560px) { .article-share__end { margin-inline-start: 0; inline-size: 100%; } } @media (max-width: 1024px) { .article-layout { grid-template-columns: minmax(0, 1fr); } .article-rail { position: static; flex-direction: row; justify-content: center; border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); } .article-rail__label { writing-mode: horizontal-tb; margin-block-end: 0; margin-inline-end: var(--sp-1); } } @media (max-width: 560px) { .article-lead { font-size: var(--fs-md); padding-inline-start: var(--sp-4); } } /* ===================================================================== 6) بطاقة الفعالية المرتبطة (في صفحة الخبر والتغطية) ===================================================================== */ .linked-event { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--sp-5); align-items: center; margin-block-start: var(--sp-6); padding: var(--sp-5); background: var(--white); border: 1px solid var(--violet-100); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; transition: box-shadow var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease); } .linked-event:hover { border-color: var(--violet-300); box-shadow: var(--shadow-md); } .linked-event__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream-200); } .linked-event__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .linked-event__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--violet-600); margin-block-end: var(--sp-2); } .linked-event__title { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--navy-800); line-height: var(--lh-snug); } .linked-event__title a { color: inherit; text-decoration: none; } .linked-event__title a::after { content: ''; position: absolute; inset: 0; } .linked-event__meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); } .linked-event__meta span { display: inline-flex; align-items: center; gap: 6px; } .linked-event__meta svg[data-icon] { color: var(--violet-400); } @media (max-width: 560px) { .linked-event { grid-template-columns: minmax(0, 1fr); } .linked-event__media { aspect-ratio: 16 / 9; } } /* بطاقة كاتب/مصوّر التغطية */ .author-card { display: flex; align-items: center; gap: var(--sp-4); margin-block-start: var(--sp-6); padding: var(--sp-5); background: var(--cream-50); border: 1px solid var(--line); border-radius: var(--r-lg); } .author-card__name { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--navy-800); } .author-card__role { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); } /* ===================================================================== 7) تبويبات أنواع التغطية ===================================================================== */ .cov-tabs { margin-block-end: var(--sp-5); padding-inline: 2px; } .cov-tabs .tab { padding-block: var(--sp-4); } @media (max-width: 768px) { .cov-tabs { margin-inline: calc(var(--gutter, 16px) * -1); padding-inline: var(--gutter, 16px); } } /* ===================================================================== 8) بلاطات معرض التغطيات (masonry فوق .gallery-grid) ===================================================================== */ .cov-tile { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-900); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease); } .cov-tile:hover, .cov-tile:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lg); text-decoration: none; } .cov-tile img { inline-size: 100%; block-size: auto; display: block; aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; transition: transform var(--dur-4) var(--ease); } .cov-tile:hover img { transform: scale(1.06); } .cov-tile--tall img { aspect-ratio: 3 / 4; } .cov-tile--wide img { aspect-ratio: 16 / 10; } .cov-tile__veil { position: absolute; inset: 0; /* كان التعتيم يتلاشى عند 74% فتقع شارة النوع أعلى البلاطة خارجه (1.82:1). الآن يغطّي البلاطة كلها. (A11Y-07) */ background: linear-gradient(to top, rgba(7, 12, 38, .9) 0%, rgba(7, 12, 38, .7) 48%, rgba(7, 12, 38, .44) 100%); transition: opacity var(--dur-3) var(--ease); } .cov-tile:hover .cov-tile__veil { background: linear-gradient(to top, rgba(10, 18, 54, .94) 0%, rgba(43, 26, 110, .74) 46%, rgba(7, 12, 38, .5) 100%); } .cov-tile__body { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); } .cov-tile__type { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 12px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--white); /* خلفية معتمة صلبة بدل شفافية بيضاء: الأخيرة كانت تُفتّح الصورة تحتها فينزل التباين إلى 1.82:1 فوق الأغلفة الفاتحة. (A11Y-07) */ background: rgba(7, 12, 38, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-pill); } .cov-tile__type svg[data-icon] { inline-size: 14px; block-size: 14px; } .cov-tile__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--white); } .cov-tile__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-xs); color: rgba(250, 247, 241, .76); } .cov-tile__meta span { display: inline-flex; align-items: center; gap: 5px; } /* أيقونة التشغيل للتغطيات المرئية */ .cov-tile__play { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(50%, -50%); inline-size: 60px; block-size: 60px; display: grid; place-items: center; border-radius: 50%; color: var(--navy-900); background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px rgba(7, 12, 38, .35); transition: transform var(--dur-3) var(--ease), background var(--dur-3) var(--ease); } .cov-tile__play svg[data-icon] { inline-size: 28px; block-size: 28px; } .cov-tile:hover .cov-tile__play { transform: translate(50%, -50%) scale(1.09); background: var(--white); } /* شارة مباشر */ .cov-tile__live { position: absolute; inset-block-start: var(--sp-4); inset-inline-start: var(--sp-4); display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--white); background: var(--danger); border-radius: var(--r-pill); } .cov-tile__live::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--white); animation: pulse-dot 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cov-tile__live::before { animation: none; } } @media (max-width: 560px) { .cov-tile__body { padding: var(--sp-4); } .cov-tile__play { inline-size: 48px; block-size: 48px; } } /* ===================================================================== 9) معرض صور التغطية (صفحة التفاصيل) ===================================================================== */ .cov-gallery { margin-block-start: var(--sp-6); } .cov-gallery__head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-block-end: var(--sp-4); } .cov-gallery__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--navy-800); } .cov-gallery__count { font-size: var(--fs-sm); color: var(--muted); } .cov-gallery .gallery__item { cursor: zoom-in; } .cov-gallery .gallery__item::before { content: ''; position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); z-index: 3; inline-size: 30px; block-size: 30px; border-radius: 50%; background: rgba(7, 12, 38, .52) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat; opacity: 0; transition: opacity var(--dur-2) var(--ease); } .cov-gallery .gallery__item:hover::before, .cov-gallery .gallery__item:focus-visible::before { opacity: 1; } /* ===================================================================== 10) رأس التغطية / الخبر المشترك — سطر معلومات مدمج ===================================================================== */ .meta-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); } .meta-row__item { display: inline-flex; align-items: center; gap: 6px; } .meta-row__item svg[data-icon] { color: var(--violet-400); } /* ===================================================================== 11) صفحة طلب التغطية ===================================================================== */ .req-audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-block-end: var(--sp-7); } .req-audience__card { position: relative; padding: var(--sp-6); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; } .req-audience__card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 4px; background-image: var(--grad-brand); } .req-audience__icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin-block-end: var(--sp-4); border-radius: var(--r-md); color: var(--violet-600); background: var(--violet-50); } .req-audience__title { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--navy-800); } .req-audience__text { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-soft); } .req-audience__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); } .req-audience__list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-snug); } .req-audience__list svg[data-icon] { color: var(--ok); flex-shrink: 0; margin-block-start: 3px; } .req-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-block-start: var(--sp-6); padding: var(--sp-5); background: var(--violet-50); border-radius: var(--r-lg); } .req-steps__item { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-snug); } .req-steps__num { display: grid; place-items: center; inline-size: 28px; block-size: 28px; flex-shrink: 0; border-radius: 50%; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--white); background-image: var(--grad-brand); } .req-wrap { max-inline-size: var(--container-narrow, 760px); margin-inline: auto; } .req-form { padding: var(--sp-6); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); } .req-form__title { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--navy-800); } .req-form__desc { margin: 0 0 var(--sp-6); font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-body); } .req-form__desc .req { color: var(--danger); } /* حقل «نوع الطلب» يأتي داخل fieldset — نلغي حدود المتصفح الافتراضية */ .req-form fieldset.field { margin: 0; padding: 0; border: 0; min-inline-size: 0; } .req-form fieldset.field > legend { padding: 0; } .req-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } @media (max-width: 1024px) { .req-audience { grid-template-columns: minmax(0, 1fr); } .req-steps { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .req-form { padding: var(--sp-5) var(--sp-4); } .req-types { grid-template-columns: minmax(0, 1fr); } } /* ===================================================================== 12) شريط الدعوة لطلب التغطية ===================================================================== */ .cov-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; padding: var(--sp-6) var(--sp-7); border-radius: var(--r-xl); background-image: var(--grad-brand); color: var(--white); overflow: hidden; box-shadow: var(--shadow-glow); } .cov-cta::before { content: ''; position: absolute; inset-block-start: -40%; inset-inline-end: -8%; inline-size: 300px; block-size: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 68%); pointer-events: none; } .cov-cta__text { position: relative; z-index: 1; max-inline-size: 640px; } .cov-cta__title { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--white); } .cov-cta__desc { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: rgba(250, 247, 241, .86); } .cov-cta__actions { position: relative; z-index: 1; flex-shrink: 0; } @media (max-width: 768px) { .cov-cta { padding: var(--sp-5); flex-direction: column; align-items: flex-start; } .cov-cta__actions .btn { inline-size: 100%; } }