/* ══════════════════════════════════════════════════════════ HAOUES ARTICLES — articles.css Styles for articles.html (listing) and article.html (detail) Dark/Light mode via [data-theme] on ══════════════════════════════════════════════════════════ */ /* ── Screen reader only ─────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ── Articles Hero ─────────────────────────────────── */ .articles-hero { min-height: 320px; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(92,207,196,0.18) 0%, transparent 70%), var(--bg-base); padding: calc(var(--nav-h,80px) + var(--space-12)) var(--space-6) var(--space-12); position: relative; overflow: hidden; } .articles-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(92,207,196,0.06) 0%, transparent 60%), radial-gradient(ellipse at 70% 50%, rgba(174,144,115,0.06) 0%, transparent 60%); pointer-events: none; } .articles-hero-content { position: relative; z-index: 1; } .articles-hero-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: var(--w-black); color: var(--text-primary); margin: var(--space-3) 0; line-height: 1.15; } .articles-hero-subtitle { font-size: var(--text-md); color: var(--text-secondary); max-width: 520px; margin: 0 auto; line-height: var(--leading-arabic); } /* ── Controls (search + categories) ─────────────────── */ .articles-controls { display: flex; flex-direction: column; gap: var(--space-4); max-width: 900px; margin: 0 auto; } .articles-search { max-width: 440px; width: 100%; } .articles-cats { gap: var(--space-2); } /* ── Articles Grid ─────────────────────────────────── */ .articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); max-width: 1200px; margin: 0 auto; } /* ── Article Card ───────────────────────────────────── */ .art-card { background: var(--glass-fill); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, border-color 0.3s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .art-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,0,0,0.18), 0 0 0 1px rgba(92,207,196,0.2); border-color: rgba(92,207,196,0.35); } .art-card-img-wrap { width: 100%; height: 200px; overflow: hidden; flex-shrink: 0; background: var(--bg-surface-2); display: flex; align-items: center; justify-content: center; } .art-card-noimg { font-size: 3rem; } .art-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .art-card:hover .art-card-img { transform: scale(1.05); } .art-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .art-card-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .art-cat-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: var(--w-bold); background: rgba(92,207,196,0.12); color: #3dbfb5; border: 1px solid rgba(92,207,196,0.25); letter-spacing: var(--tracking-wide); } .art-date-chip { font-size: var(--text-xs); color: var(--text-muted-strong); } .art-card-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--w-bold); color: var(--text-primary); line-height: var(--leading-snug); margin: 0; } .art-card-summary { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-arabic); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .art-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); } .art-like-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--text-muted-strong); transition: color 0.2s; } .art-like-chip.liked { color: #e84393; } .art-like-chip svg { transition: fill 0.2s; } .art-read-more { font-size: var(--text-xs); font-weight: var(--w-bold); color: #3dbfb5; letter-spacing: var(--tracking-wide); } /* ── Skeleton loading ───────────────────────────────── */ .articles-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); max-width: 1200px; margin: 0 auto; } .article-skeleton { height: 380px; border-radius: var(--radius-2xl); background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-surface-3) 50%, var(--bg-surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Empty state ────────────────────────────────────── */ .articles-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-20) var(--space-6); color: var(--text-muted-strong); text-align: center; gap: var(--space-3); } .articles-empty-icon { font-size: 3.5rem; margin-bottom: var(--space-2); } /* ═══════════════════════════════════════════════════════ DETAIL PAGE — article.html ═══════════════════════════════════════════════════════ */ /* ── Loading skeletons ──────────────────────────────── */ .article-page-loading { max-width: 800px; margin: 120px auto 0; padding: 0 var(--space-6); } .article-page-skeleton { display: flex; flex-direction: column; gap: var(--space-4); } .skel { border-radius: var(--radius-lg); background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-surface-3) 50%, var(--bg-surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } .skel-hero { height: 280px; border-radius: var(--radius-2xl); } .skel-title { height: 44px; width: 70%; } .skel-meta { height: 20px; width: 45%; } .skel-p { height: 18px; } .skel-p-short { width: 55%; } .skel-img { height: 220px; border-radius: var(--radius-xl); } /* ── Hero image ─────────────────────────────────────── */ .art-hero-wrap { position: relative; width: 100%; height: clamp(280px, 40vw, 500px); overflow: hidden; margin-top: var(--nav-h, 80px); } .art-hero-img { width: 100%; height: 100%; object-fit: cover; } .art-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, var(--bg-base) 100%); } /* ── Article page body ──────────────────────────────── */ .article-page-body { max-width: 800px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); } /* When no hero image: add top padding for nav */ #article-content:not(:has(.art-hero-wrap[style*="display: none"])) .article-page-body, .article-page-body { padding-top: var(--space-8); } /* ── Breadcrumb ─────────────────────────────────────── */ .art-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted-strong); margin-bottom: var(--space-6); flex-wrap: wrap; } .art-breadcrumb a { color: var(--text-muted-strong); text-decoration: none; transition: color 0.2s; } .art-breadcrumb a:hover { color: #3dbfb5; } /* ── Meta row ───────────────────────────────────────── */ .art-meta-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); } .art-meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--text-muted-strong); } /* ── Title ──────────────────────────────────────────── */ .art-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: var(--w-black); color: var(--text-primary); line-height: 1.2; margin-bottom: var(--space-5); } /* ── Summary ────────────────────────────────────────── */ .art-summary { font-size: var(--text-lg); color: var(--text-secondary); line-height: var(--leading-arabic); border-right: 4px solid #3dbfb5; padding-right: var(--space-5); margin-bottom: var(--space-8); font-weight: var(--w-medium); } /* ── Body content ───────────────────────────────────── */ .art-body { color: var(--text-primary); font-size: var(--text-base); line-height: var(--leading-arabic); } .art-body p { margin-bottom: var(--space-4); } .art-body br { display: block; margin: var(--space-2) 0; } /* ── Image Gallery ──────────────────────────────────── */ .art-gallery { margin-top: var(--space-10); } .art-gallery-title { font-family: var(--font-display); font-size: var(--text-md); color: var(--gold-300); margin-bottom: var(--space-4); font-weight: var(--w-bold); } .art-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); } .art-gallery-thumb { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius-lg); cursor: zoom-in; border: 2px solid var(--border-subtle); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .art-gallery-thumb:hover { transform: scale(1.03); border-color: rgba(92,207,196,0.5); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } /* ── Like button ────────────────────────────────────── */ .art-like-section { margin-top: var(--space-10); padding: var(--space-8); background: var(--glass-fill); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; backdrop-filter: blur(12px); } .art-like-btn { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-8); border-radius: 999px; border: 2px solid var(--border-mid); background: transparent; color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--w-bold); cursor: pointer; transition: all 0.3s cubic-bezier(.34,1.56,.64,1); position: relative; overflow: hidden; } .art-like-btn:hover:not(:disabled) { border-color: #e84393; color: #e84393; transform: scale(1.06); box-shadow: 0 6px 20px rgba(232, 67, 147, 0.25); } .art-like-btn.liked { border-color: #e84393; background: rgba(232,67,147,0.08); color: #e84393; } .art-like-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .art-like-heart { width: 22px; height: 22px; transition: fill 0.3s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1); } .art-like-btn.liked .art-like-heart { fill: currentColor; transform: scale(1.2); } .art-like-count { font-size: var(--text-xl); font-weight: var(--w-black); min-width: 24px; } .art-like-note { font-size: var(--text-sm); color: var(--text-muted-strong); margin: 0; } /* ── Lightbox ───────────────────────────────────────── */ .art-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.94); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .art-lightbox-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius-xl); box-shadow: 0 32px 80px rgba(0,0,0,0.6); } .art-lightbox-close, .art-lightbox-prev, .art-lightbox-next { position: absolute; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; transition: background 0.2s, transform 0.2s; backdrop-filter: blur(6px); } .art-lightbox-close { top: 16px; left: 16px; width: 40px; height: 40px; } .art-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; } .art-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; } .art-lightbox-close:hover { background: rgba(255,255,255,0.25); transform: scale(1.1); } .art-lightbox-prev:hover { background: rgba(255,255,255,0.2); transform: translateY(-50%) scale(1.1); } .art-lightbox-next:hover { background: rgba(255,255,255,0.2); transform: translateY(-50%) scale(1.1); } .art-lightbox-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: var(--text-sm); background: rgba(0,0,0,0.5); padding: 4px 14px; border-radius: 999px; } /* ── Nav active link ────────────────────────────────── */ .nav-active-link { color: #3dbfb5 !important; font-weight: var(--w-bold); } .nav-cta { background: linear-gradient(135deg,#0a1a6e,#1E2EDB); color: #fff !important; padding: 8px 18px; border-radius: var(--radius-md); font-weight: var(--w-bold); transition: opacity 0.2s; } .nav-cta:hover { opacity: 0.9; } /* ════ LIGHT MODE OVERRIDES ════════════════════════════ */ [data-theme="light"] .art-card { background: rgba(255,255,255,0.88); border-color: rgba(92,207,196,0.2); } [data-theme="light"] .art-card:hover { box-shadow: 0 20px 40px rgba(44,40,34,0.12), 0 0 0 1px rgba(92,207,196,0.3); } [data-theme="light"] .art-card-title { color: #111111; } [data-theme="light"] .art-card-summary { color: #2C2822; } [data-theme="light"] .art-card-img-wrap { background: #EBE6DD; } [data-theme="light"] .articles-hero { background: radial-gradient(ellipse at 50% 0%, rgba(92,207,196,0.12) 0%, transparent 70%), #FDFBF7; } [data-theme="light"] .art-title { color: #111111; } [data-theme="light"] .art-summary { color: #2C2822; } [data-theme="light"] .art-body { color: #111111; } [data-theme="light"] .art-like-section { background: rgba(255,255,255,0.82); border-color: rgba(92,207,196,0.25); } [data-theme="light"] .art-like-btn { color: #2C2822; } [data-theme="light"] .article-skeleton, [data-theme="light"] .skel { background: linear-gradient(90deg, #EBE6DD 25%, #F4F1EA 50%, #EBE6DD 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } [data-theme="light"] .art-gallery-thumb { border-color: rgba(92,207,196,0.2); } /* ── Responsive ─────────────────────────────────────── */ @media (max-width: 600px) { .articles-grid { grid-template-columns: 1fr; gap: var(--space-4); } .articles-skeleton-grid { grid-template-columns: 1fr; } .art-hero-wrap { height: 220px; } .art-title { font-size: 1.6rem; } .art-gallery-grid { grid-template-columns: repeat(2, 1fr); } .art-lightbox-prev, .art-lightbox-next { display: none; } }