/* * نظام تصميم «المنصة الإخبارية» * مُرحَّل من chronicle-hub-main/src/styles.css إلى CSS عادي (بلا توجيهات * Tailwind) حتى تعمل الصفحات بلا اعتماد على بناء Tailwind لهويّتها. * * الهوية: غرفة أخبار دافئة — كريمي/بنّي + أحمر رُمّاني أساسي + ذهبي للتمييز * وتركوازي ثانوي. قيم OKLCH منقولة حرفياً من المرجع. * * ⚠ ترتيب الطبقات إلزامي: Tailwind v4 يضع أدواته داخل @layer utilities، * وCSS بلا طبقة يتفوّق على أي CSS داخل طبقة مهما كان ترتيب التحميل — أي أن * ‎.nw-btn{display:inline-flex}‎ كان سيبتلع ‎md:hidden‎. لذلك نعلن الترتيب * نفسه ونضع المكوّنات في components. المتغيّرات والحركات تبقى خارج الطبقات * عمداً حتى لا يُغيّرها شيء. * * ⚠ الأسماء بُدِّلت لا نُسِخت: المرجع يستعمل ‎bg-primary‎ و‎text-muted-foreground‎ * كأدوات Tailwind مولَّدة من ‎@theme inline‎. متجرنا لا يعرّفها، وتعريفها في * resources/css/app.css كان سيسرّب هوية الأخبار إلى كل صفحات الموقع. فصارت * أصنافاً صريحة ببادئة nw-. * * ⚠ الوضع الليلي بالصنف ‎.nw-dark‎ على لا بمتغيّر ‎dark:‎ الخاص * بـTailwind (تفعيله بالصنف يتطلّب تعديل app.css العام). كل لون يمرّ عبر * متغيّر CSS، فقلب الصنف يقلب الصفحة كاملة. */ @layer theme, base, components, utilities; :root { --nw-radius: 0.5rem; /* فاتح — لوحة غرفة الأخبار الدافئة */ --nw-background: oklch(0.988 0.006 85); --nw-foreground: oklch(0.24 0.02 45); --nw-surface: oklch(0.965 0.012 80); --nw-card: oklch(1 0 0); --nw-card-foreground: oklch(0.24 0.02 45); --nw-primary: oklch(0.55 0.19 26); --nw-primary-foreground: oklch(0.99 0.005 85); --nw-secondary: oklch(0.94 0.02 80); --nw-secondary-foreground: oklch(0.3 0.03 45); --nw-muted: oklch(0.95 0.01 85); --nw-muted-foreground: oklch(0.52 0.02 60); --nw-accent: oklch(0.6 0.11 200); --nw-accent-foreground: oklch(0.99 0.005 85); --nw-highlight: oklch(0.82 0.14 84); --nw-highlight-foreground: oklch(0.26 0.04 60); --nw-destructive: oklch(0.577 0.245 27.325); --nw-destructive-foreground: oklch(0.99 0.005 85); --nw-border: oklch(0.9 0.012 75); --nw-input: oklch(0.9 0.012 75); --nw-ring: oklch(0.55 0.19 26); --nw-shadow-card: 0 1px 2px oklch(0.24 0.02 45 / 0.06), 0 8px 24px -12px oklch(0.24 0.02 45 / 0.16); --nw-font-sans: 'Cairo', system-ui, sans-serif; --nw-font-display: 'Tajawal', Georgia, serif; } html.nw-dark { --nw-background: oklch(0.22 0.015 60); --nw-foreground: oklch(0.96 0.008 85); --nw-surface: oklch(0.26 0.018 60); --nw-card: oklch(0.27 0.018 60); --nw-card-foreground: oklch(0.96 0.008 85); --nw-primary: oklch(0.68 0.17 27); --nw-primary-foreground: oklch(0.18 0.02 45); --nw-secondary: oklch(0.32 0.02 60); --nw-secondary-foreground: oklch(0.96 0.008 85); --nw-muted: oklch(0.32 0.02 60); --nw-muted-foreground: oklch(0.74 0.015 70); --nw-accent: oklch(0.68 0.1 200); --nw-accent-foreground: oklch(0.18 0.02 45); --nw-highlight: oklch(0.8 0.13 84); --nw-highlight-foreground: oklch(0.2 0.03 60); --nw-border: oklch(1 0 0 / 12%); --nw-input: oklch(1 0 0 / 15%); --nw-ring: oklch(0.68 0.17 27); --nw-shadow-card: 0 1px 2px oklch(0 0 0 / 0.3), 0 10px 28px -14px oklch(0 0 0 / 0.6); } /* الشريط المتحرك — العناصر تُطبع مرتين في القالب و«‏-50%‏» تلفّ عند نهاية النسخة الأولى بالضبط. أي نسخة واحدة تعني قفزة مرئية عند كل دورة. */ @keyframes nw-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } @keyframes nw-marquee-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes nw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes nw-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @layer base { body.nw-body { margin: 0; background-color: var(--nw-background); color: var(--nw-foreground); font-family: var(--nw-font-sans); -webkit-font-smoothing: antialiased; } body.nw-body h1, body.nw-body h2, body.nw-body h3, body.nw-body h4 { font-family: var(--nw-font-display); font-weight: 700; letter-spacing: -0.01em; margin: 0; } body.nw-body p { margin: 0; } body.nw-body a { color: inherit; text-decoration: none; } body.nw-body img { max-width: 100%; } body.nw-body :focus-visible { outline: 2px solid var(--nw-ring); outline-offset: 2px; } [x-cloak] { display: none !important; } } @layer components { /* ── أسطح وألوان ─────────────────────────────────────────────── */ .nw-card { background-color: var(--nw-card); box-shadow: var(--nw-shadow-card); border: 1px solid var(--nw-border); } .nw-surface { background-color: var(--nw-surface); } .nw-mut { color: var(--nw-muted-foreground); } .nw-ink { color: var(--nw-foreground); } .nw-bd { border-color: var(--nw-border); } .nw-bd-t { border-top: 1px solid var(--nw-border); } .nw-bd-b { border-bottom: 1px solid var(--nw-border); } .nw-bd-y { border-top: 1px solid var(--nw-border); border-bottom: 1px solid var(--nw-border); } .nw-bd-all { border: 1px solid var(--nw-border); } .nw-primary { background-color: var(--nw-primary); color: var(--nw-primary-foreground); } .nw-primary-text { color: var(--nw-primary); } .nw-gold { background-color: var(--nw-highlight); color: var(--nw-highlight-foreground); } .nw-accent-text { color: var(--nw-accent); } .nw-danger-text { color: var(--nw-destructive); } .nw-soft { background-color: var(--nw-secondary); color: var(--nw-secondary-foreground); } /* ── ترويسة الموقع ───────────────────────────────────────────── */ .nw-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--nw-border); background-color: color-mix(in oklab, var(--nw-background) 92%, transparent); backdrop-filter: blur(10px); } .nw-brand { display: inline-flex; align-items: center; gap: .4rem; background-color: var(--nw-primary); color: var(--nw-primary-foreground); padding: .28rem .6rem; border-radius: .5rem; font-family: var(--nw-font-display); font-size: 1.125rem; font-weight: 900; line-height: 1.25; } /* عناصر شريط الأقسام — الفارق بين البارز والثانوي بالوزن واللون فقط، لأن الاثنين يعيشان في شريط أفقي واحد قابل للتمرير كما في المرجع. */ .nw-navlink { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; padding: .6rem .7rem; font-size: .8125rem; font-weight: 700; color: color-mix(in oklab, var(--nw-foreground) 80%, transparent); border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .nw-navlink:hover { color: var(--nw-primary); border-bottom-color: var(--nw-primary); } .nw-navlink.is-active { color: var(--nw-primary); border-bottom-color: var(--nw-primary); } .nw-navlink-sub { font-weight: 500; color: var(--nw-muted-foreground); } .nw-drawer-link { display: flex; align-items: center; gap: .45rem; padding: .5rem .7rem; border-radius: .5rem; font-size: .8125rem; font-weight: 600; } .nw-drawer-link:hover { background-color: var(--nw-secondary); } /* ── شريط العاجل ─────────────────────────────────────────────── */ .nw-ticker { display: flex; align-items: stretch; overflow: hidden; border-bottom: 1px solid var(--nw-border); background-color: var(--nw-primary); color: var(--nw-primary-foreground); } .nw-ticker-label { display: flex; flex-shrink: 0; align-items: center; gap: .45rem; background-color: var(--nw-highlight); color: var(--nw-highlight-foreground); padding: .5rem 1rem; font-size: .8125rem; font-weight: 900; } .nw-ticker-dot { width: .5rem; height: .5rem; border-radius: 999px; background-color: var(--nw-primary); animation: nw-pulse 1.6s ease-in-out infinite; } .nw-marquee { display: inline-flex; gap: 3rem; white-space: nowrap; animation: nw-marquee-rtl 40s linear infinite; } .nw-marquee:hover { animation-play-state: paused; } [dir='ltr'] .nw-marquee { animation-name: nw-marquee-ltr; } /* ── بطاقات الأخبار ──────────────────────────────────────────── */ .nw-artcard { display: flex; flex-direction: column; overflow: hidden; border-radius: .75rem; background-color: var(--nw-card); box-shadow: var(--nw-shadow-card); border: 1px solid var(--nw-border); transition: transform .2s ease, box-shadow .2s ease; } .nw-artcard:hover { transform: translateY(-2px); } .nw-artcard:hover .nw-artcard-title { color: var(--nw-primary); } .nw-artcard:hover .nw-artcard-img { transform: scale(1.05); } .nw-artcard-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .nw-artcard-title { transition: color .15s; } /* شارة القسم فوق الصورة — start لا left حتى تنقلب مع الاتجاه */ .nw-cat-badge { position: absolute; top: .75rem; inset-inline-start: .75rem; border-radius: 999px; background-color: var(--nw-primary); color: var(--nw-primary-foreground); padding: .2rem .7rem; font-size: .7rem; font-weight: 700; } .nw-ph { display: grid; place-items: center; width: 100%; height: 100%; background-color: var(--nw-secondary); color: var(--nw-muted-foreground); font-size: 1.75rem; } /* ── ترويسة قسم — سمة التصميم المميّزة ───────────────────────── */ .nw-sect { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--nw-primary); } .nw-sect h2, .nw-sect h1 { font-size: 1.25rem; font-weight: 900; } /* ── أزرار وحقول ─────────────────────────────────────────────── */ .nw-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem 1rem; border-radius: .5rem; border: none; font-family: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; transition: all .18s; } .nw-btn-primary { background-color: var(--nw-primary); color: var(--nw-primary-foreground); } .nw-btn-primary:hover { filter: brightness(1.08); } .nw-btn-gold { background-color: var(--nw-highlight); color: var(--nw-highlight-foreground); } .nw-btn-gold:hover { filter: brightness(1.06); } .nw-btn-soft { background-color: var(--nw-secondary); color: var(--nw-secondary-foreground); } .nw-btn-soft:hover { background-color: var(--nw-primary); color: var(--nw-primary-foreground); } .nw-btn-outline { background: transparent; border: 1px solid var(--nw-border); color: var(--nw-foreground); } .nw-btn-outline:hover { border-color: var(--nw-primary); color: var(--nw-primary); } .nw-btn:disabled { opacity: .55; cursor: not-allowed; filter: none; } .nw-iconbtn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border: none; background: transparent; color: inherit; border-radius: .5rem; cursor: pointer; font-size: .95rem; transition: background-color .15s; } .nw-iconbtn:hover { background-color: var(--nw-secondary); } .nw-field { width: 100%; background-color: var(--nw-card); border: 1px solid var(--nw-input); color: var(--nw-foreground); border-radius: .5rem; padding: .55rem .8rem; font-family: inherit; font-size: .875rem; } .nw-field::placeholder { color: var(--nw-muted-foreground); } .nw-field:focus { outline: none; border-color: var(--nw-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--nw-ring) 18%, transparent); } /* حقل البحث الحبّة */ .nw-searchbox { display: flex; align-items: center; gap: .5rem; border-radius: 999px; border: 1px solid var(--nw-border); background-color: var(--nw-card); padding: .35rem .85rem; } .nw-searchbox input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; font-family: inherit; font-size: .85rem; color: var(--nw-foreground); } .nw-searchbox input::placeholder { color: var(--nw-muted-foreground); } /* ── أقراص وشارات ────────────────────────────────────────────── */ .nw-chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; border: 1px solid var(--nw-border); background-color: var(--nw-card); padding: .4rem .9rem; font-size: .8125rem; font-weight: 700; transition: border-color .15s, color .15s; } .nw-chip:hover { border-color: var(--nw-primary); color: var(--nw-primary); } .nw-tag { display: inline-flex; border-radius: 999px; border: 1px solid var(--nw-border); padding: .2rem .7rem; font-size: .8125rem; } .nw-tag:hover { border-color: var(--nw-primary); color: var(--nw-primary); } .nw-badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: .4rem; padding: .15rem .5rem; font-size: .68rem; font-weight: 700; } /* ── متن الخبر ───────────────────────────────────────────────── */ .nw-prose { font-size: 1.0625rem; line-height: 1.9; } .nw-prose > * + * { margin-top: 1.15rem; } .nw-prose p:first-of-type { font-weight: 600; } .nw-prose h2 { font-size: 1.5rem; font-weight: 800; margin-top: 2rem; } .nw-prose h3 { font-size: 1.2rem; font-weight: 800; margin-top: 1.6rem; } .nw-prose a { color: var(--nw-primary); text-decoration: underline; text-underline-offset: 3px; } .nw-prose ul, .nw-prose ol { padding-inline-start: 1.5rem; } .nw-prose li + li { margin-top: .4rem; } .nw-prose figure { margin: 0; } .nw-prose figure img { width: 100%; border-radius: .75rem; } .nw-prose figcaption { margin-top: .5rem; font-size: .8125rem; color: var(--nw-muted-foreground); text-align: center; } .nw-prose blockquote { margin: 0; border-inline-start: 4px solid var(--nw-primary); background-color: var(--nw-surface); padding: .9rem 1.1rem; border-radius: .5rem; font-weight: 600; } .nw-prose blockquote cite { display: block; margin-top: .5rem; font-size: .8125rem; font-weight: 500; font-style: normal; color: var(--nw-muted-foreground); } .nw-prose hr { border: none; border-top: 1px solid var(--nw-border); } .nw-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: .75rem; overflow: hidden; background-color: #000; } .nw-embed iframe, .nw-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── الشريط الجانبي ──────────────────────────────────────────── */ .nw-widget { border-radius: .75rem; background-color: var(--nw-card); box-shadow: var(--nw-shadow-card); border: 1px solid var(--nw-border); padding: 1rem; } .nw-widget-title { margin-bottom: .75rem; font-size: .8125rem; font-weight: 900; color: var(--nw-primary); } .nw-rowcard { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--nw-border); } .nw-rowcard:last-child { border-bottom: none; padding-bottom: 0; } .nw-rowcard:hover .nw-artcard-title { color: var(--nw-primary); } .nw-newsletter { border-radius: .75rem; background-color: var(--nw-primary); color: var(--nw-primary-foreground); padding: 1.25rem; } /* ── التعليقات ───────────────────────────────────────────────── */ .nw-comment { display: flex; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--nw-border); } .nw-comment:last-child { border-bottom: none; } .nw-avatar { display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 999px; background-color: var(--nw-secondary); color: var(--nw-secondary-foreground); font-weight: 900; } /* ── ترقيم الصفحات ───────────────────────────────────────────── */ .nw-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; margin-top: 2rem; } .nw-pager a, .nw-pager span { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .6rem; border-radius: .5rem; border: 1px solid var(--nw-border); background-color: var(--nw-card); font-size: .8125rem; font-weight: 700; } .nw-pager a:hover { border-color: var(--nw-primary); color: var(--nw-primary); } .nw-pager .is-current { background-color: var(--nw-primary); color: var(--nw-primary-foreground); border-color: var(--nw-primary); } .nw-pager .is-disabled { opacity: .45; } /* ── متفرقات ─────────────────────────────────────────────────── */ .nw-noscroll { scrollbar-width: none; -ms-overflow-style: none; } .nw-noscroll::-webkit-scrollbar { display: none; } .nw-rise { animation: nw-rise .45s ease both; } .nw-ad { display: block; overflow: hidden; border-radius: .75rem; } .nw-ad-label { display: block; margin-bottom: .3rem; font-size: .65rem; font-weight: 700; letter-spacing: .04em; color: var(--nw-muted-foreground); text-align: center; } .nw-toast { position: fixed; top: 1rem; inset-inline-start: 50%; transform: translateX(50%); z-index: 300; padding: .7rem 1.3rem; border-radius: .7rem; font-size: .85rem; font-weight: 700; box-shadow: var(--nw-shadow-card); } [dir='ltr'] .nw-toast { transform: translateX(-50%); } .nw-toast-ok { background-color: var(--nw-highlight); color: var(--nw-highlight-foreground); } .nw-toast-err { background-color: var(--nw-destructive); color: var(--nw-destructive-foreground); } } @media (prefers-reduced-motion: reduce) { .nw-marquee { animation: none; } .nw-rise { animation: none; } .nw-ticker-dot { animation: none; } .nw-artcard, .nw-artcard-img { transition: none; } }