/* =================================================================== استایل اصلی سایت شخصی شاعر الهام از نسخه‌های خطی و تذهیب ایرانی — کاغذی، آرام، باوقار =================================================================== */ /* فونت نستعلیق محلی (برای نام شاعر و عناوین خوشنویسی‌شده) */ @font-face { font-family: 'IranNastaliq'; src: url('../fonts/IranNastaliq.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :root { --paper: #F5F2E9; --surface: #FBF9F3; --ink: #20232E; --ink-soft: #5C5D67; --lapis: #284B8C; --lapis-deep: #1C3563; --gold: #AE8638; --crimson: #8E2A2E; --line: #E3DAC8; --radius: 14px; --shadow-soft: 0 8px 24px rgba(28, 53, 99, 0.08); --shadow-soft-lg: 0 16px 40px rgba(28, 53, 99, 0.12); --font-body: 'Vazirmatn', Tahoma, sans-serif; --font-signature: 'IranNastaliq', 'Mirza', 'Noto Nastaliq Urdu', serif; } /* ---------------------------------------------------------------- حالت شب — پالت تیره‌ی هماهنگ با هویت نسخه‌ی خطی جوهر تیره، طلا و لاجورد روشن‌شده روی پس‌زمینه‌ی شب ---------------------------------------------------------------- */ html.dark { --paper: #16181E; --surface: #1E2029; --ink: #E8E4D8; --ink-soft: #9A9BA8; --lapis: #7098CE; --lapis-deep: #92B4E2; --gold: #C9A24E; --crimson: #C95A60; --line: #2E3140; --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-soft-lg: 0 16px 40px rgba(0, 0, 0, 0.55); } /* گذار نرم تنها هنگام تغییر دستی توسط کاربر (نه لود اولیه) */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: none !important; } } /* ---------------------------------------------------------------- ریست پایه ---------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* ایمنیِ انیمیشنِ AOS (کتابخانه‌ی خارجی، assets/js/main.js): خودِ AOS با CSSِ خودش [data-aos] را پیش‌فرض opacity:0 می‌کند تا با اسکرول نمایان شود. کلاسِ js-scroll-ready را main.js فقط بعد از فراخوانیِ AOS.init + نمایان‌کردنِ فوریِ عناصرِ داخلِ viewport روی می‌گذارد؛ تا قبل از آن (یعنی دقیقاً وقتی جاوااسکریپت هنوز اجرا نشده، خطا داده، یا کلاً غیرفعال است) این override پیش‌فرضِ AOS را خنثی می‌کند تا محتوا هرگز نامرئی نماند */ html:not(.js-scroll-ready) [data-aos] { opacity: 1 !important; transform: none !important; } body { background-color: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.8; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } .container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; } /* ---------------------------------------------------------------- صفحه‌ی لودینگ (splash) با انیمیشن Lottie لوگو — فقط بار اول ورود در هر نشست (includes/header.php کنترل sessionStorage را دارد) ---------------------------------------------------------------- */ .splash { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background-color: var(--paper); opacity: 1; transition: opacity 0.5s ease; } .splash[hidden] { display: none; } .splash.splash--hide { opacity: 0; pointer-events: none; } .splash__anim { width: 220px; height: 220px; max-width: 60vw; max-height: 60vw; } body.splash-active { overflow: hidden; } @media (max-width: 480px) { .splash__anim { width: 180px; height: 180px; } } /* ---------------------------------------------------------------- لودینگِ گذار بین صفحات — ساده‌تر و کوچک‌تر از splash؛ روی کلیکِ لینک‌های داخلی و به‌صورت تصادفی نمایش داده می‌شود (assets/js/page-transition.js) ---------------------------------------------------------------- */ .page-transition { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background-color: var(--paper); } .page-transition[hidden] { display: none; } .page-transition__anim { width: 140px; height: 140px; max-width: 40vw; max-height: 40vw; } body.page-transition-active { overflow: hidden; } @media (max-width: 480px) { .page-transition__anim { width: 110px; height: 110px; } } /* ---------------------------------------------------------------- نوار بالای چسبان ---------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: transparent; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .site-header.scrolled { background-color: var(--surface); box-shadow: var(--shadow-soft); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-signature); font-size: 1.7rem; font-weight: normal ; word-spacing: -0.200em; color: var(--lapis-deep); } .brand-logo { flex-shrink: 0; height: 40px; width: auto; object-fit: contain; /* فونت نستعلیق ارتفاع بصری بیشتری از خط پایه دارد؛ کمی جابه‌جایی برای هم‌ترازی نرم */ transform: translateY(2px); } .brand-name { /* فونت IranNastaliq کشیده و بلندتر است؛ به line-height بیشتر نیاز دارد تا حروف فشرده نشوند */ line-height: 1.5; } @media (max-width: 480px) { .brand-logo { height: 32px; } } .header-end { display: flex; align-items: center; gap: 8px; } .main-nav { display: flex; align-items: center; gap: 28px; } .nav-link { position: relative; font-size: 0.98rem; color: var(--ink-soft); padding: 6px 2px; transition: color 0.25s ease; } .nav-link::after { content: ''; position: absolute; right: 0; bottom: -2px; width: 0; height: 2px; background-color: var(--gold); transition: width 0.25s ease; } .nav-link:hover, .nav-link.active { color: var(--lapis-deep); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } /* دکمه‌ی منوی همبرگری (فقط در موبایل) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; } .nav-toggle span { display: block; width: 100%; height: 2px; background-color: var(--ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } /* دکمه‌ی تغییر حالت شب/روز */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; flex-shrink: 0; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .theme-toggle:hover { color: var(--gold); border-color: var(--gold); background-color: rgba(174, 134, 56, 0.08); } /* آیکن ماه در حالت روشن نمایان — آیکن خورشید مخفی */ .theme-icon-sun { display: none; } html.dark .theme-icon-moon { display: none; } html.dark .theme-icon-sun { display: block; } /* خوانایی select در دارک مود — رندر لیست باز‌شده به مرورگر وابسته است ولی این مقادیر صریح در اکثر مرورگرها پس‌زمینه و متن را درست نگه می‌دارند */ html.dark select, html.dark select option { background-color: var(--surface); color: var(--ink); } html.dark select option:checked { background-color: var(--lapis); color: #fff; } /* ---------------------------------------------------------------- دکمه‌ها ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: var(--radius); font-size: 0.95rem; font-weight: 500; border: 1px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .btn-primary { background-color: var(--lapis); color: #fff; box-shadow: var(--shadow-soft); } .btn-primary:hover { background-color: var(--lapis-deep); transform: translateY(-2px); box-shadow: var(--shadow-soft-lg); } .btn-outline { background-color: transparent; color: var(--lapis-deep); border-color: var(--line); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } .btn-fal { background-color: rgba(174, 134, 56, 0.1); color: var(--gold); border-color: rgba(174, 134, 56, 0.35); } .btn-fal:hover { background-color: var(--gold); color: #fff; border-color: var(--gold); transform: translateY(-2px); } /* ---------------------------------------------------------------- تزئین شمسه‌ای جداکننده ---------------------------------------------------------------- */ .ornament { display: block; margin: 0 auto 16px; } .ornament-divider { display: flex; justify-content: center; margin: 16px 0 40px; } /* ---------------------------------------------------------------- هیرو ---------------------------------------------------------------- */ .hero { padding: 64px 0 56px; } .hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; } /* wrapper متنی — در موبایل شفاف (children مستقیم در جریان flex-column) */ .hero-text { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; } .hero-photo { position: relative; width: clamp(200px, 40vw, 300px); height: clamp(200px, 40vw, 300px); border-radius: 50%; box-shadow: 0 20px 48px rgba(28, 53, 99, 0.16); animation: heroPhotoReveal 0.8s ease-out both; transition: transform 0.35s ease, box-shadow 0.35s ease; flex-shrink: 0; } .hero-photo::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(174, 134, 56, 0.35); pointer-events: none; } .hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid var(--gold); } .hero-photo:hover { transform: scale(1.02); box-shadow: 0 22px 54px rgba(28, 53, 99, 0.22); } @keyframes heroPhotoReveal { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .hero-photo { animation: none; opacity: 1; transform: none; } } .hero-name { font-family: var(--font-signature); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.6; color: var(--lapis-deep); word-spacing: -0.2em; font-weight: normal; } .hero-tagline { font-size: 1.1rem; color: var(--ink-soft); max-width: 540px; } .hero-verse { position: relative; padding: 8px 28px; border-right: 3px solid var(--gold); font-size: 1.15rem; line-height: 2.2; color: var(--ink); max-width: 560px; text-align: right; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } /* ── موبایل: تلاش برای جا شدنِ هر سه دکمه در یک ردیف با اندازه‌ی جمع‌وجورتر (nowrap عمدی، تا هرگز به‌صورت دو+یکِ نامرتب نشکند) ────── */ @media (max-width: 480px) { .hero-actions { flex-wrap: nowrap; gap: 8px; } .hero-actions .btn { flex: 1 1 auto; padding: 10px 10px; font-size: 0.8rem; min-height: 44px; white-space: nowrap; } } /* ── عرض‌های خیلی کم: حتی با اندازه‌ی جمع‌وجورِ بالا هم جا نمی‌شوند؛ پس به‌جای شکستِ ناموزون، هر سه دکمه تمام‌عرض و زیر هم می‌نشینند ──── */ @media (max-width: 360px) { .hero-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; gap: 10px; } .hero-actions .btn { width: 100%; } } /* ── دسکتاپ: دو ستون ──────────────────────────────────────────── */ @media (min-width: 900px) { .hero { padding: 80px 0 72px; } .hero-inner { flex-direction: row; align-items: center; text-align: right; gap: 64px; } /* عکس به ستون چپ (order:2 در RTL = انتهای ردیف = سمت چپ) */ .hero-photo { order: 2; width: clamp(380px, 38vw, 480px); height: clamp(380px, 38vw, 480px); } /* متن به ستون راست (order:1 در RTL = ابتدای ردیف = سمت راست) */ .hero-text { order: 1; flex: 1; align-items: flex-start; gap: 20px; min-width: 0; } .hero-tagline, .hero-verse { max-width: none; } .hero-actions { justify-content: flex-start; } .hero-name { font-size: clamp(2.8rem, 4vw, 4rem); } } /* ---------------------------------------------------------------- سرتیتر بخش‌ها ---------------------------------------------------------------- */ .section { padding: 56px 0; } .section-header { text-align: center; margin-bottom: 40px; } .section-eyebrow { display: block; color: var(--gold); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; margin-bottom: 8px; } .section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--lapis-deep); font-weight: 700; } .section-footer { text-align: center; margin-top: 36px; } /* ---------------------------------------------------------------- کارت شعر ---------------------------------------------------------------- */ .poem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .poem-card { position: relative; background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .poem-card::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background-color: var(--lapis); transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; } .poem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-lg); } .poem-card:hover::before { transform: scaleY(1); } .poem-form-badge { display: inline-block; font-size: 0.78rem; color: var(--lapis-deep); background-color: rgba(40, 75, 140, 0.08); border-radius: 999px; padding: 4px 14px; margin-bottom: 14px; } .poem-card-title { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; } .poem-card-preview { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.9; margin-bottom: 14px; } /* شمسه‌ی کوچکِ جداکننده‌ی دو مصرع در پیش‌نمایش کوتاه شعر (poem_preview) */ .poem-preview-sep { color: var(--gold); } .poem-card-meta { font-size: 0.85rem; color: var(--gold); } /* ---------------------------------------------------------------- تایپوگرافی صفحه‌ی تک‌شعر ---------------------------------------------------------------- */ .poem-page-title { text-align: center; font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--lapis-deep); margin-bottom: 10px; } .poem-page-meta { text-align: center; color: var(--ink-soft); margin-bottom: 36px; } .poem-page-meta a { color: var(--lapis); font-weight: 600; } .poem-body { max-width: 700px; margin: 0 auto; text-align: center; font-size: 1.2rem; line-height: 2.9; color: var(--ink); font-family: var(--font-body); } /* ---------------------------------------------------------------- عکس یادبود شعر (poem.php) — برای شعرهایی که به یاد کسی سروده شده‌اند. قاب و کپشنِ دوقسمتی همان کلاس‌های صفحه‌ی درباره‌ی شاعر را دوباره به‌کار می‌برند (.about-frame/.about-photo-caption(-sub))؛ این کلاس فقط وسط‌چین می‌کند، مثل .about-photo-col ---------------------------------------------------------------- */ .poem-memorial-photo { display: flex; flex-direction: column; align-items: center; margin: 0 auto 8px; } /* ---------------------------------------------------------------- بیت‌ها و جداکننده‌ی شمسه‌ای بین آن‌ها (render_poem_with_ornaments) ---------------------------------------------------------------- */ .poem-beyt { text-align: center; } /* فاصله‌ی افقیِ وسط مصرع (از علامت *** داخل یک مصرع)؛ مثل فاصله‌ی وسط بیت در دیوان شعر. هر بخش با nowrap یک‌جا می‌شکند، نه وسط کلمه */ .poem-misra-part { white-space: nowrap; } .poem-misra-gap { display: inline-block; width: 28px; } @media (max-width: 600px) { /* در موبایل هر بخشِ مصرع در خط جداگانه‌ی خودش می‌نشیند تا سرریز نشود */ .poem-misra-part { display: block; white-space: normal; } .poem-misra-gap { display: none; } } .poem-ornament { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--gold); margin: 22px 0; } .poem-ornament-icon { flex-shrink: 0; } .poem-ornament-icon-side { opacity: 0.6; } .poem-ornament::before, .poem-ornament::after { content: ''; width: 36px; height: 1px; background-color: rgba(174, 134, 56, 0.35); } @media (max-width: 480px) { .poem-ornament { margin: 18px 0; } .poem-ornament::before, .poem-ornament::after { width: 22px; } } @media (prefers-reduced-motion: reduce) { .poem-ornament { transition: none; } } /* ---------------------------------------------------------------- کارت کتاب ---------------------------------------------------------------- */ .book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } .book-card { display: flex; flex-direction: column; background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } .book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-lg); } .book-cover { width: 100%; aspect-ratio: 3 / 4; background-color: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--gold); border-bottom: 1px solid var(--line); } .book-cover img { width: 100%; height: 100%; object-fit: cover; } .book-info { padding: 22px 22px 26px; } .book-title { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .book-year { color: var(--gold); font-size: 0.88rem; margin-bottom: 12px; } .book-desc { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 16px; } /* ---------------------------------------------------------------- کارت مقاله (articles.php + «مقالات دیگر» در article.php) ---------------------------------------------------------------- */ .article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } .article-card { display: flex; flex-direction: column; background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } .article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-lg); } .article-cover { width: 100%; aspect-ratio: 16 / 9; background-color: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--gold); border-bottom: 1px solid var(--line); } .article-cover img { width: 100%; height: 100%; object-fit: cover; } .article-info { display: flex; flex-direction: column; padding: 20px 22px 24px; flex: 1; } .article-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .article-meta { color: var(--gold); font-size: 0.82rem; margin-bottom: 12px; } .article-excerpt { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.85; margin-bottom: 16px; flex: 1; } .article-more-link { color: var(--lapis); font-size: 0.88rem; font-weight: 600; align-self: flex-start; transition: color 0.2s ease; } .article-card:hover .article-more-link { color: var(--gold); } /* ---------------------------------------------------------------- صفحه‌ی تک‌مقاله (article.php) ---------------------------------------------------------------- */ .article-single { max-width: 760px; margin: 0 auto; } .article-single-title { text-align: center; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--lapis-deep); margin-bottom: 10px; } .article-single-cover { margin: 24px 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); } .article-single-cover img { width: 100%; max-height: 420px; object-fit: cover; } .article-body { margin-top: 24px; } @media (max-width: 480px) { .article-single-cover img { max-height: 240px; } } /* ---------------------------------------------------------------- گالری عمومی سه‌بخشی (عکس/نماهنگ/صدا) — gallery.php ---------------------------------------------------------------- */ .media-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 2px; } .media-tab { padding: 10px 22px; font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.2s ease, border-color 0.2s ease; } .media-tab:hover { color: var(--lapis); } .media-tab.active { color: var(--lapis-deep); border-bottom-color: var(--gold); } /* mobile-first عمدی: حالتِ پایه (بدونِ media query) خودش دو ستون است، پس از کوچک‌ترین عرضِ ممکن (۳۲۰px به بالا) هرگز تک‌ستون نمی‌ماند — به‌جای اینکه پایه auto-fill/تک‌ستون باشد و فقط در یک بازه‌ی خاص با max-width دو ستون بشود (که اگر عرضِ واقعیِ گوشی از آن بازه جا می‌ماند، دوباره تک‌ستون می‌شد). برای تغییرِ تعداد ستون‌های موبایل فقط همین عدد (2) را عوض کن. */ .media-public-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; } /* از ۶۰۰px به بالا (تبلت): سه ستون */ @media (min-width: 600px) { .media-public-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } /* از ۹۰۰px به بالا (دسکتاپ): همان چیدمانِ auto-fill قبلی/فعلی */ @media (min-width: 900px) { .media-public-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } /* ریست ظاهر دکمه برای کارت‌های قابل‌کلیک (عکس/ویدئو) */ .media-card { display: block; width: 100%; box-sizing: border-box; margin: 0; background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); appearance: none; font: inherit; text-align: inherit; color: inherit; } .media-card-image, .media-card-video { position: relative; overflow: hidden; aspect-ratio: 1 / 1; padding: 0; cursor: pointer; } .media-card-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; display: block; } .media-card-image:hover .media-card-thumb, .media-card-video:hover .media-card-thumb { transform: scale(1.06); } .media-card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(20, 23, 30, 0.18); pointer-events: none; } .media-card-play svg { width: 44px; height: 44px; padding: 12px; background-color: rgba(20, 23, 30, 0.55); border-radius: 50%; } .media-card-audio { position: relative; overflow: hidden; aspect-ratio: 1 / 1; padding: 0; cursor: pointer; background-image: linear-gradient(155deg, var(--lapis), var(--lapis-deep)); } .media-card-audio:hover .media-card-thumb { transform: scale(1.06); } /* placeholderِ کارتِ ویدیوی بدونِ poster (رکوردهای قدیمی‌تر از افزودنِ این قابلیت)؛ به‌جای تگ