/* ============================================================= قسم الأخبار — ستايل مستقلّ خاصّ بالأخبار فقط (news portal) تصميم تحريري احترافي، غير معتمِد على بطاقات باقي الموقع. كل الأصناف مسبوقة بـ nws- لتفادي التعارض. يدعم الوضعين الفاتح والداكن (عبر .dark على ). ============================================================= */ .nws { --nws-accent: #c9a24b; /* اللون الذهبي العام للموقع */ --nws-accent-2: #a07f2e; --nws-ink: #14151a; --nws-muted: #6b7280; --nws-line: #e7e5e0; --nws-card: #ffffff; --nws-bg-soft: #faf9f7; --nws-shadow: 0 10px 30px -14px rgba(20, 21, 26, .28); --nws-radius: 6px; color: var(--nws-ink); font-family: "Tajawal", system-ui, sans-serif; max-width: 1180px; margin: 0 auto; padding: 7.5rem 1.25rem 5rem; } .dark .nws { --nws-accent: #e5c877; --nws-accent-2: #c9a24b; --nws-ink: #f2f3f5; --nws-muted: #9aa1ac; --nws-line: #262735; --nws-card: #14151f; --nws-bg-soft: #10111a; --nws-shadow: 0 12px 34px -16px rgba(0, 0, 0, .7); } /* ---------- ترويسة القسم ---------- */ .nws-masthead { text-align: center; margin-bottom: 2.75rem; } .nws-kicker { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: .28em; font-size: .72rem; color: var(--nws-accent); text-transform: uppercase; } .nws-kicker::before, .nws-kicker::after { content: ""; width: 26px; height: 2px; background: var(--nws-accent); display: inline-block; } .nws-masthead h1 { font-family: "Amiri", serif; font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.1; margin: .6rem 0 .5rem; } .nws-masthead p { color: var(--nws-muted); max-width: 40rem; margin: 0 auto; line-height: 1.9; } /* ---------- شريط البحث ---------- */ .nws-search { display: flex; gap: .6rem; max-width: 34rem; margin: 1.6rem auto 0; } .nws-search input { flex: 1; background: var(--nws-card); border: 1px solid var(--nws-line); border-radius: var(--nws-radius); padding: .7rem 1rem; color: var(--nws-ink); font-family: inherit; font-size: .95rem; outline: none; transition: border-color .2s; } .nws-search input:focus { border-color: var(--nws-accent); } .nws-search button { background: var(--nws-accent); color: #fff; border: 0; border-radius: var(--nws-radius); padding: 0 1.4rem; font-family: inherit; font-weight: 700; cursor: pointer; transition: background .2s; } .nws-search button:hover { background: var(--nws-accent-2); } /* ---------- الخبر الرئيسي (Lead) ---------- */ .nws-lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: var(--nws-card); border: 1px solid var(--nws-line); border-radius: calc(var(--nws-radius) + 4px); overflow: hidden; box-shadow: var(--nws-shadow); margin-bottom: 3rem; text-decoration: none; color: inherit; } .nws-lead__media { position: relative; min-height: 340px; overflow: hidden; } .nws-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .nws-lead:hover .nws-lead__media img { transform: scale(1.05); } .nws-lead__media .nws-noimg { position: absolute; inset: 0; } .nws-lead__body { padding: 2.4rem 2.2rem; display: flex; flex-direction: column; justify-content: center; } .nws-lead__title { font-family: "Amiri", serif; font-weight: 700; line-height: 1.25; font-size: clamp(1.6rem, 3vw, 2.35rem); margin: .8rem 0 .7rem; } .nws-lead:hover .nws-lead__title { color: var(--nws-accent); } .nws-lead__excerpt { color: var(--nws-muted); line-height: 1.9; margin-bottom: 1.2rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- شبكة الأخبار ---------- */ .nws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .nws-card { display: flex; flex-direction: column; background: var(--nws-card); border: 1px solid var(--nws-line); border-radius: calc(var(--nws-radius) + 2px); overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .nws-card:hover { transform: translateY(-4px); box-shadow: var(--nws-shadow); border-color: transparent; } .nws-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .nws-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .nws-card:hover .nws-card__media img { transform: scale(1.06); } .nws-noimg { width: 100%; height: 100%; background: linear-gradient(135deg, var(--nws-bg-soft), var(--nws-line)); display: grid; place-items: center; color: var(--nws-muted); } .nws-card__body { padding: 1.15rem 1.15rem 1.3rem; display: flex; flex-direction: column; flex: 1; } .nws-card__title { font-family: "Amiri", serif; font-weight: 700; font-size: 1.28rem; line-height: 1.4; margin: .5rem 0 .55rem; } .nws-card:hover .nws-card__title { color: var(--nws-accent); } .nws-card__excerpt { color: var(--nws-muted); font-size: .9rem; line-height: 1.75; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- الوسوم والبيانات الوصفية ---------- */ .nws-tag { align-self: flex-start; display: inline-block; background: var(--nws-accent); color: #fff; font-weight: 700; font-size: .68rem; letter-spacing: .12em; padding: .28rem .7rem; border-radius: 3px; text-transform: uppercase; } .nws-lead__media .nws-tag, .nws-card__media .nws-tag { position: absolute; top: .8rem; inset-inline-start: .8rem; z-index: 2; box-shadow: 0 4px 14px -4px rgba(0,0,0,.5); } .nws-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--nws-muted); font-size: .78rem; margin-top: .9rem; } .nws-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; } .nws-readmore { margin-top: 1rem; display: inline-flex; align-items: center; gap: .45rem; color: var(--nws-accent); font-weight: 700; font-size: .9rem; } .nws-readmore svg { width: 1rem; height: 1rem; transition: transform .25s; } .nws-lead:hover .nws-readmore svg, .nws-card:hover .nws-readmore svg { transform: translateX(-4px); } /* ---------- حالة الفراغ ---------- */ .nws-empty { text-align: center; padding: 5rem 1rem; } .nws-empty p { font-family: "Amiri", serif; font-size: 1.9rem; color: var(--nws-muted); } .nws-empty a { display: inline-block; margin-top: 1.2rem; color: var(--nws-accent); font-weight: 700; text-decoration: none; } /* ============================================================= صفحة تفاصيل الخبر ============================================================= */ .nws-article { --nws-accent: #c9a24b; --nws-accent-2: #a07f2e; --nws-ink: #14151a; --nws-muted: #6b7280; --nws-line: #e7e5e0; --nws-bg-soft: #faf9f7; color: var(--nws-ink); font-family: "Tajawal", system-ui, sans-serif; } .dark .nws-article { --nws-accent: #e5c877; --nws-accent-2: #c9a24b; --nws-ink: #f2f3f5; --nws-muted: #9aa1ac; --nws-line: #262735; --nws-bg-soft: #10111a; } /* الصورة تظهر كاملة فوق العنوان (بدون قصّ) */ .nws-article__top { max-width: 860px; margin: 0 auto; padding: 7.5rem 1.25rem 0; } .nws-article__figure { margin: 0 0 1.6rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--nws-line); background: var(--nws-bg-soft); display: flex; justify-content: center; align-items: center; } .nws-article__figure img { width: 100%; height: auto; display: block; max-height: 76vh; object-fit: contain; } .nws-article__headwrap { color: var(--nws-ink); } .nws-article__headwrap .nws-tag { position: static; } .nws-article__title { font-family: "Amiri", serif; font-weight: 700; line-height: 1.2; font-size: clamp(1.9rem, 4.4vw, 3rem); margin: .7rem 0 0; } .nws-article__metabar { max-width: 820px; margin: 0 auto; padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; border-bottom: 1px solid var(--nws-line); color: var(--nws-muted); font-size: .85rem; } .nws-article__body { max-width: 820px; margin: 0 auto; padding: 2.2rem 1.25rem 1rem; font-family: "Amiri", serif; font-size: 1.2rem; line-height: 2.05; color: var(--nws-ink); } .nws-article__body p { margin: 0 0 1.3rem; } .nws-article__body p:first-of-type::first-letter { font-size: 3.2rem; font-weight: 700; float: inline-start; line-height: .8; padding-inline-end: .5rem; color: var(--nws-accent); } .nws-article__summary { max-width: 820px; margin: 0 auto; padding: 1.6rem 1.25rem 0; font-family: "Amiri", serif; font-size: 1.35rem; line-height: 1.9; border-inline-start: 4px solid var(--nws-accent); padding-inline-start: 1.1rem; } .nws-source-cta { display: inline-flex; align-items: center; gap: .55rem; background: var(--nws-accent); color: #fff; text-decoration: none; font-weight: 700; padding: .85rem 1.5rem; border-radius: 6px; transition: background .2s; } .nws-source-cta:hover { background: var(--nws-accent-2); } .nws-article__foot { max-width: 820px; margin: 0 auto; padding: 1.6rem 1.25rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .nws-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--nws-muted); text-decoration: none; font-weight: 600; font-size: .9rem; } .nws-back:hover { color: var(--nws-accent); } /* ---------- استجابة الشاشات ---------- */ @media (max-width: 900px) { .nws-lead { grid-template-columns: 1fr; } .nws-lead__media { min-height: 230px; } .nws-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .nws-grid { grid-template-columns: 1fr; } .nws { padding-top: 6.5rem; } .nws-article__body p:first-of-type::first-letter { font-size: 2.6rem; } }