@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap'); /* =========================================================================== دهّار (Dahar) — assets/css/style.css Public website design system. Arabic, RTL, dark-luxury literary. THEMING: dark is the default (tokens on :root). A light theme is applied by setting data-theme="light" on (main.js toggles it and persists the choice in localStorage). This stylesheet is independent of admin.css — it uses its own variable names and its own component classes, with no shared scope or variables. =========================================================================== */ /* --------------------------------------------------------------------------- Design tokens — DARK (default) --------------------------------------------------------------------------- */ :root { /* Surfaces */ --bg: #100d0b; --bg-2: #14110f; --surface: #1b1612; --surface-2: #221b16; --header-bg: rgba(16, 13, 11, 0.82); /* Borders & lines */ --border: #342a20; --border-soft: rgba(217, 181, 106, 0.14); /* Gold accents */ --gold: #d9b56a; --gold-soft: #e6c684; --gold-deep: #b8923f; --gold-glow: rgba(217, 181, 106, 0.20); /* Text */ --text: #efe7d8; --text-dim: #c7baa3; --muted: #968871; /* Effects */ --radius: 16px; --radius-sm: 11px; --shadow: 0 20px 55px -28px rgba(0, 0, 0, 0.85); --shadow-soft: 0 12px 34px -22px rgba(0, 0, 0, 0.7); /* Type */ --font-head: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; --font-body: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif; --font-poem: 'Noto Naskh Arabic', 'Amiri', 'IBM Plex Sans Arabic', serif; --maxw: 1140px; } /* --------------------------------------------------------------------------- Design tokens — LIGHT (parchment) --------------------------------------------------------------------------- */ [data-theme="light"] { --bg: #f6f0e4; --bg-2: #fbf6ec; --surface: #fffdf8; --surface-2: #fbf4e7; --header-bg: rgba(246, 240, 228, 0.85); --border: #e4dac4; --border-soft: rgba(184, 146, 63, 0.22); --gold: #b8923f; --gold-soft: #caa24c; --gold-deep: #936f2c; --gold-glow: rgba(184, 146, 63, 0.18); --text: #2a2118; --text-dim: #5b4f3c; --muted: #7c6e58; --shadow: 0 18px 48px -28px rgba(80, 60, 20, 0.35); --shadow-soft: 0 12px 30px -22px rgba(80, 60, 20, 0.25); } /* --------------------------------------------------------------------------- Base --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; direction: rtl; text-align: start; background-color: var(--bg); background-image: radial-gradient(120% 70% at 90% -10%, var(--gold-glow), transparent 55%), radial-gradient(90% 60% at 0% 105%, var(--gold-glow), transparent 50%); background-attachment: fixed; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.85; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.3; margin: 0 0 0.5em; color: var(--text); } a { color: var(--gold); text-decoration: none; transition: color 0.18s ease; } a:hover { color: var(--gold-soft); } img { max-width: 100%; height: auto; display: block; } p { margin: 0 0 1em; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- Header / navigation --------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 68px; } .brand { font-family: var(--font-head); font-weight: 800; font-size: 26px; letter-spacing: 0.5px; color: var(--gold); white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .nav-links a { display: inline-block; color: var(--text-dim); font-size: 15px; padding: 8px 12px; border-radius: 9px; transition: color 0.18s ease, background 0.18s ease; } .nav-links a:hover, .nav-links a.is-active { color: var(--gold-soft); background: var(--gold-glow); } .nav-actions { display: flex; align-items: center; gap: 8px; } /* Theme toggle (icon only): sun shown in dark, moon shown in light */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--gold); cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; } .theme-toggle:hover { border-color: var(--gold); color: var(--gold-soft); } .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: inline-flex; } /* Mobile nav toggle (hamburger) — hidden on desktop */ .nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } /* --------------------------------------------------------------------------- Hero (homepage) --------------------------------------------------------------------------- */ .hero { text-align: center; padding: 72px 0 40px; } .hero-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(40px, 8vw, 72px); color: var(--gold); margin-bottom: 14px; text-shadow: 0 6px 30px var(--gold-glow); } .hero-subtitle { max-width: 720px; margin: 0 auto; font-size: clamp(15px, 2.4vw, 19px); line-height: 2.1; color: var(--text-dim); } /* --------------------------------------------------------------------------- Search --------------------------------------------------------------------------- */ .search { display: flex; gap: 10px; max-width: 620px; margin: 28px auto 0; } .search-input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 13px 20px; color: var(--text); font-family: var(--font-body); font-size: 16px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .search-input::placeholder { color: var(--muted); } .search-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); } /* --------------------------------------------------------------------------- Sections --------------------------------------------------------------------------- */ .section { padding: 40px 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--border); padding-bottom: 12px; } .section-title { font-size: clamp(20px, 3.4vw, 26px); font-weight: 700; color: var(--text); position: relative; padding-inline-start: 16px; } .section-title::before { content: ""; position: absolute; inset-block: 4px auto; inset-inline-start: 0; width: 4px; height: 1.1em; border-radius: 4px; background: linear-gradient(var(--gold), var(--gold-deep)); } .section-link { font-size: 14px; color: var(--gold); white-space: nowrap; } /* --------------------------------------------------------------------------- Card grid --------------------------------------------------------------------------- */ .grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .card { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-4px); border-color: var(--border-soft); box-shadow: var(--shadow); } .card-media { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .card:hover .card-media img { transform: scale(1.05); } .card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; } .card-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--text); margin: 0; } .card-meta { font-size: 13px; color: var(--muted); } .card-excerpt { font-size: 14.5px; color: var(--text-dim); line-height: 1.9; } /* --------------------------------------------------------------------------- Buttons --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 15px; line-height: 1; padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn:active { transform: translateY(1px); } .btn--primary { color: #1a140c; background: linear-gradient(135deg, var(--gold-soft), var(--gold) 45%, var(--gold-deep)); box-shadow: 0 10px 26px -12px var(--gold-glow); } .btn--primary:hover { filter: brightness(1.04); } .btn--ghost { color: var(--text); background: transparent; border-color: var(--border); } .btn--ghost:hover { border-color: var(--gold); color: var(--gold-soft); background: var(--gold-glow); } /* --------------------------------------------------------------------------- Tags (clickable chips) --------------------------------------------------------------------------- */ .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { display: inline-block; font-size: 13px; color: var(--gold); background: var(--gold-glow); border: 1px solid var(--border-soft); border-radius: 999px; padding: 5px 14px; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .tag:hover { background: var(--gold); color: #1a140c; border-color: var(--gold); } /* --------------------------------------------------------------------------- Page header (listing/detail) --------------------------------------------------------------------------- */ .page-head { padding: 44px 0 8px; } .page-title { font-size: clamp(26px, 5vw, 40px); font-weight: 800; color: var(--text); } .page-intro { color: var(--text-dim); max-width: 760px; } /* --------------------------------------------------------------------------- Detail layouts & literary typography --------------------------------------------------------------------------- */ .detail { padding: 28px 0 56px; } .detail-hero { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 28px; } .detail-figure { width: 220px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-soft); flex-shrink: 0; } .detail-figure img { width: 100%; height: 100%; object-fit: cover; } .detail-headings { flex: 1; min-width: 240px; } .meta-list { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; padding: 0; list-style: none; } .meta-list li { font-size: 14px; color: var(--text-dim); } .meta-list b { color: var(--gold); font-weight: 600; margin-inline-end: 6px; } /* Long prose (bios, summaries, stories, myths) */ .prose { font-size: 17px; line-height: 2.05; color: var(--text-dim); } .prose p { margin-bottom: 1.15em; } /* Poem text — elegant, airy, never cramped */ .poem-text { font-family: var(--font-poem); font-size: clamp(19px, 2.6vw, 24px); line-height: 2.5; color: var(--text); white-space: pre-wrap; /* preserve line breaks from the editor */ background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-soft); } /* Two-hemistich verses — centered & balanced on every screen */ .poem-verses { font-family: var(--font-poem); color: var(--text); background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; max-width: 860px; margin-inline: auto; padding: 34px 30px; font-size: clamp(22px, 2.3vw, 30px); line-height: 2.15; text-align: center; gap: 1.15rem; } .poem-bayt { display: block; margin: 0; } .poem-hemistich { display: block; max-width: 100%; text-align: center; direction: rtl; white-space: normal; } .poem-sadr { text-align: center; } .poem-ajuz { margin-top: 0.25rem; margin-inline-start: 0; max-width: 100%; text-align: center; } .poem-single-line { display: flex; justify-content: center; } .poem-single-line .poem-hemistich { max-width: 100%; margin-inline: auto; text-align: center; } /* Quote display */ .quote-block { font-family: var(--font-poem); font-size: clamp(20px, 3vw, 28px); line-height: 2.2; color: var(--text); background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-inline-start: 4px solid var(--gold); border-radius: var(--radius); padding: 26px 28px; position: relative; } .quote-author { display: block; margin-top: 14px; font-family: var(--font-body); font-size: 15px; color: var(--gold); } /* Verse explanation panel */ .explanation { margin-top: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; } .explanation h3 { font-size: 17px; color: var(--gold); } /* --------------------------------------------------------------------------- Related content --------------------------------------------------------------------------- */ .related { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); } /* --------------------------------------------------------------------------- Pagination --------------------------------------------------------------------------- */ .pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 36px; } .pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-dim); font-size: 14.5px; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; } .pager a:hover { border-color: var(--gold); color: var(--gold-soft); } .pager .is-current { color: #1a140c; background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep)); border-color: transparent; font-weight: 700; } /* --------------------------------------------------------------------------- Empty state --------------------------------------------------------------------------- */ .empty { text-align: center; color: var(--muted); padding: 60px 16px; font-size: 16px; } /* --------------------------------------------------------------------------- Footer --------------------------------------------------------------------------- */ .site-footer { margin-top: 64px; border-top: 1px solid var(--border); background: var(--bg-2); } .footer-inner { padding: 40px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .footer-brand { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--gold); } .footer-desc { max-width: 560px; color: var(--text-dim); font-size: 14.5px; line-height: 2; } .footer-social { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); overflow: hidden; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease; } .footer-social a svg { width: 20px; height: 20px; display: block; } .footer-social a:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); transform: translateY(-2px); } .footer-copy { font-size: 13px; color: var(--muted); } /* --------------------------------------------------------------------------- Reduced motion --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } /* --------------------------------------------------------------------------- Responsive --------------------------------------------------------------------------- */ @media (max-width: 980px) { .grid, .grid--4 { grid-template-columns: repeat(2, 1fr); } .poem-verses { max-width: 760px; padding: 30px 24px; font-size: clamp(22px, 3vw, 28px); line-height: 2.1; gap: 1.05rem; } } @media (max-width: 760px) { .nav-toggle { display: inline-flex; } .nav-links { position: absolute; inset-inline: 12px; top: 64px; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); display: none; } .nav-links.is-open { display: flex; } .nav-links a { padding: 11px 14px; } } @media (max-width: 560px) { body { font-size: 15.5px; } .grid, .grid--2, .grid--4 { grid-template-columns: 1fr; } .hero { padding: 52px 0 30px; } .search { flex-direction: column; } .search .btn { width: 100%; } .detail-figure { width: 100%; } .poem-text { padding: 22px 18px; line-height: 2.3; } } /* =========================================================================== */ @media (max-width: 760px) { .poem-verses { max-width: 100%; padding: 24px 16px; font-size: clamp(21px, 6vw, 25px); line-height: 2.05; gap: 0.95rem; } .poem-ajuz { margin-top: 0.18rem !important; margin-inline-start: 0 !important; max-width: 100% !important; padding-inline-end: 0 !important; } } /* Homepage section count badge + "more" link (scoped additions) */ .section-count { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--gold); background: var(--gold-glow); border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 12px; white-space: nowrap; } .section-more { width: 100%; margin-top: 22px; display: flex; justify-content: center; align-items: center; text-align: center; } .section-more .btn { margin-inline: auto; } /* Homepage hero — calmer, centered, literary composition */ .hero-inner { display: flex; flex-direction: column; align-items: center; } .hero-tagline { font-family: var(--font-head); font-weight: 700; font-size: clamp(17px, 2.6vw, 22px); color: var(--gold-soft); margin: 0 0 12px; } .hero-lede { max-width: 620px; margin: 0 auto; color: var(--text-dim); font-size: clamp(15px, 2.2vw, 18px); line-height: 2; } .hero .search { margin-top: 30px; max-width: 700px; width: 100%; } .hero .search-input { padding: 16px 24px; font-size: 17px; background: linear-gradient(180deg, rgba(36, 29, 23, 0.95), rgba(27, 22, 18, 0.95)); border: 1px solid rgba(217, 181, 106, 0.30); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .hero .search-input::placeholder { color: var(--muted); } .hero .search-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow), 0 18px 40px -24px rgba(217, 181, 106, 0.30); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; } .hero-cats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; } .hero-cat { display: inline-flex; align-items: center; font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--text-dim); background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border-soft); border-radius: 999px; padding: 8px 18px; box-shadow: var(--shadow-soft); transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .hero-cat:hover { color: var(--gold-soft); border-color: var(--gold); background: var(--gold-glow); box-shadow: 0 6px 18px -8px var(--gold-glow); transform: translateY(-2px); } @media (max-width: 560px) { .hero-cats { gap: 8px; margin-top: 22px; } .hero-cat { font-size: 13px; padding: 7px 13px; } .hero .search { margin-top: 24px; } .hero .search-input { padding: 14px 18px; font-size: 16px; } .hero-lede { font-size: 15.5px; } } /* === Dahar final homepage visual overrides === */ .hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, rgba(217, 181, 106, 0.10), transparent 60%), radial-gradient(80% 60% at 50% 8%, rgba(217, 181, 106, 0.14), transparent 58%), linear-gradient(180deg, #161009 0%, #120d09 46%, var(--bg) 100%); } .hero-inner { position: relative; isolation: isolate; padding: 40px 18px 26px; } .hero-inner::before { content: ""; position: absolute; z-index: -1; inset: -10px auto auto 50%; width: min(620px, 96vw); height: 320px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at center, rgba(217, 181, 106, 0.38), rgba(217, 181, 106, 0.16) 36%, rgba(217, 181, 106, 0.05) 60%, transparent 76%); filter: blur(6px); pointer-events: none; } .hero-title { position: relative; letter-spacing: 0.02em; color: var(--gold-soft); text-shadow: 0 0 26px rgba(217, 181, 106, 0.40), 0 0 60px rgba(217, 181, 106, 0.22), 0 12px 46px rgba(0, 0, 0, 0.55); } .hero-title::after { content: ""; display: block; width: 74px; height: 2px; margin: 16px auto 0; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.85; } .hero-cats, .hero-cats:where(nav, div) { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin-top: 28px !important; max-width: 760px; margin-inline: auto !important; } .hero-cat, .hero-cats a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 40px; padding: 9px 20px !important; border-radius: 999px !important; border: 1px solid rgba(217, 181, 106, 0.45) !important; background: linear-gradient(180deg, #241d17, #1a1410) !important; color: var(--text) !important; font-family: var(--font-head) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(217, 181, 106, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important; } .hero-cat:hover, .hero-cats a:hover { color: #1a140c !important; border-color: var(--gold) !important; background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep)) !important; box-shadow: 0 12px 28px -14px rgba(217, 181, 106, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; transform: translateY(-2px); } .section-more { width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; margin-top: 32px !important; padding-inline: 16px; grid-column: 1 / -1 !important; } .section-more .btn, .section-more a, a.section-more, .btn.section-more { margin-inline: auto !important; width: auto; min-width: 160px; } @media (max-width: 640px) { .section-more { justify-content: center !important; padding-inline: 18px; margin-top: 26px !important; } .section-more .btn, .section-more a { width: 100%; max-width: 320px; text-align: center; } } @media (max-width: 560px) { .hero-inner { padding-top: 24px; } .hero-inner::before { width: 98vw; height: 260px; } .hero-cats, .hero-cats:where(nav, div) { gap: 8px !important; margin-top: 22px !important; } .hero-cat, .hero-cats a { font-size: 13px !important; padding: 8px 14px !important; } } /* =========================================================================== * Hero category buttons — readability fix (dark + light themes) * Appended last so these win the cascade. Layout/text unchanged. * ======================================================================== */ .hero-cat, .hero-cats a { color: var(--gold-soft) !important; background: linear-gradient(180deg, rgba(36, 29, 23, 0.96), rgba(20, 16, 12, 0.96)) !important; border-color: rgba(217, 181, 106, 0.60) !important; } .hero-cat:hover, .hero-cats a:hover { color: #1a140c !important; background: linear-gradient(135deg, var(--gold-soft), var(--gold), var(--gold-deep)) !important; border-color: var(--gold-deep) !important; } [data-theme="light"] .hero-cat, [data-theme="light"] .hero-cats a { color: #3a2b17 !important; background: linear-gradient(180deg, #fff7e8, #ead9b8) !important; border-color: rgba(184, 146, 63, 0.55) !important; box-shadow: 0 10px 24px -18px rgba(80, 60, 20, 0.35) !important; } [data-theme="light"] .hero-cat:hover, [data-theme="light"] .hero-cats a:hover { color: #1a140c !important; background: linear-gradient(135deg, var(--gold-soft), var(--gold), var(--gold-deep)) !important; border-color: var(--gold-deep) !important; } /* =========================================================================== * Light theme — homepage harmony polish (light mode only). * Appended last so it wins the cascade. Dark mode untouched. No layout/text * changes. Warm parchment / cream / soft-gold palette. * ======================================================================== */ [data-theme="light"] .hero { background: radial-gradient(60% 80% at 50% 0%, rgba(217, 181, 106, 0.18), transparent 70%), linear-gradient(180deg, #f7efdf, #f2e8d4, var(--bg)); } [data-theme="light"] .hero .search-input { background: rgba(255, 252, 245, 0.92); color: #2a2118; border-color: rgba(184, 146, 63, 0.35); box-shadow: 0 14px 32px -24px rgba(80, 60, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); } [data-theme="light"] .hero .search-input::placeholder { color: #8a795c; } [data-theme="light"] .hero .search-input:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--gold-glow), 0 16px 34px -24px rgba(184, 146, 63, 0.45); } /* Hero category buttons (light) — warm cream pills, readable dark text. */ [data-theme="light"] .hero-cat, [data-theme="light"] .hero-cats a { background: linear-gradient(180deg, #fffaf0, #f1dfbb) !important; color: #2a2118 !important; border-color: rgba(184, 146, 63, 0.50) !important; box-shadow: 0 10px 24px -20px rgba(80, 60, 20, 0.30) !important; } [data-theme="light"] .hero-cat:hover, [data-theme="light"] .hero-cats a:hover { color: #1a140c !important; background: linear-gradient(135deg, var(--gold-soft), var(--gold), var(--gold-deep)) !important; border-color: var(--gold-deep) !important; } /* Random buttons (light) — warm, elegant, not heavy. */ [data-theme="light"] .hero-actions .btn--ghost { background: rgba(255, 250, 240, 0.9); color: #3a2b17; border-color: rgba(184, 146, 63, 0.45); } [data-theme="light"] .hero-actions .btn--ghost:hover { color: #1a140c; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); border-color: var(--gold-deep); }