/* Theme Name: Shelter Blog Theme URI: https://sheltertournament.com/blog/ Author: SHELTER Tournament Description: قالبِ بلاگِ شلتر تورنومنت — همان زبانِ طراحیِ خودِ پلتفرم (توکن‌های globals.css)، راست‌به‌چپ و فارسی. Version: 1.1.0 Requires PHP: 8.0 License: GNU General Public License v2 or later Text Domain: shelter-blog */ /* ═══════════ Vazirmatn — همان فایل‌های vendorشده‌ی خودِ سایت (apps/web/app/fonts) ═══════════ */ @font-face { font-family: 'Vazirmatn Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(./fonts/vazirmatn-arabic-wght-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } @font-face { font-family: 'Vazirmatn Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(./fonts/vazirmatn-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Vazirmatn Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(./fonts/vazirmatn-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ═══════════ توکن‌های طراحی — عیناً از apps/web/app/globals.css ═══════════ */ /* قراردادِ تم همان قراردادِ خودِ سایت است: localStorage['shelter:theme'] + کلاسِ light/dark روی (پیش‌فرض دارک). چون هم‌مبدأ‌ند، انتخابِ تم بینِ اپ و بلاگ در هر دو جهت حمل می‌شود. */ :root, html.dark { color-scheme: dark; --bg: #070a0f; --tile: #121822; --tile-2: #18202c; --line: #232a38; --line-2: #313a4d; --teal: #2dd4bf; --teal-dim: #1b8c80; --amber: #fbbf24; --text: #eef2f7; --muted: #aab2bf; --faint: #8a93a3; --good: #34d399; --bad: #f87171; --on-accent: #06251f; --header-bg: rgba(7, 10, 15, .88); --radius: 18px; --radius-sm: 12px; --ease: cubic-bezier(.2, .7, .3, 1); --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -18px rgba(0, 0, 0, .8); --card-grad: linear-gradient(162deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 55%); --hero-grad: radial-gradient(900px 520px at 85% -12%, rgba(45, 212, 191, .15), transparent 60%), radial-gradient(720px 480px at -8% 108%, rgba(96, 165, 250, .11), transparent 60%); --font-vazir: 'Vazirmatn Variable', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; } /* ── تمِ روشن — همان مقادیرِ html.lightِ خودِ سایت ── */ html.light { color-scheme: light; --bg: #eef2f7; --tile: #ffffff; --tile-2: #eef3f8; --line: #d3dbe6; --line-2: #bfc9d8; --teal: #0d9488; --teal-dim: #0f766e; --amber: #d97706; --text: #0f1722; --muted: #475160; --faint: #656f7f; --good: #059669; --bad: #e11d48; --on-accent: #ffffff; --header-bg: rgba(238, 242, 247, .88); --shadow: 0 1px 0 rgba(0, 0, 0, .02) inset, 0 12px 30px -20px rgba(15, 23, 42, .22); --card-grad: linear-gradient(162deg, rgba(15, 23, 42, .02), rgba(15, 23, 42, 0) 55%); --hero-grad: radial-gradient(900px 520px at 85% -12%, rgba(13, 148, 136, .12), transparent 60%), radial-gradient(720px 480px at -8% 108%, rgba(37, 99, 235, .08), transparent 60%); } /* ═══════════ پایه ═══════════ */ * { box-sizing: border-box; } html { direction: rtl; overflow-x: hidden; } body { margin: 0; background: var(--bg); background-image: var(--hero-grad); background-repeat: no-repeat; color: var(--text); font-family: var(--font-vazir); font-size: 17px; line-height: 1.9; /* فارسیِ بلندخوان — پایین‌تر از 1.7 چشم را خسته می‌کند */ -webkit-font-smoothing: antialiased; } a { color: var(--teal); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--amber); } a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; } img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ═══════════ چیدمان ═══════════ */ .wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; } .site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; } .brand { display: flex; align-items: baseline; gap: 10px; color: var(--text); font-weight: 800; font-size: 18px; } .brand .badge { color: var(--teal); font-size: 12px; font-weight: 700; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 10px; background: var(--tile); } .back-link { margin-inline-start: auto; font-size: 13px; color: var(--muted); } .back-link:hover { color: var(--teal); } .site-footer { border-top: 1px solid var(--line); margin-top: 64px; } .site-footer .wrap { padding: 24px 20px; color: var(--faint); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; } /* ═══════════ فهرست (آرشیو/خانه) — کارت‌های tile مثلِ خودِ سایت ═══════════ */ .page-title { font-size: 15px; font-weight: 700; color: var(--muted); margin: 36px 0 18px; } .post-list { display: grid; gap: 18px; grid-template-columns: 1fr; padding: 0; margin: 0; list-style: none; } @media (min-width: 760px) { .post-list { grid-template-columns: 1fr 1fr; } } .post-card { background: var(--tile); background-image: var(--card-grad); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; transition: border-color .2s var(--ease), transform .2s var(--ease); display: flex; flex-direction: column; gap: 10px; min-width: 0; } .post-card:hover { border-color: var(--line-2); transform: translateY(-2px); } .post-card h2 { margin: 0; font-size: 20px; line-height: 1.6; } .post-card h2 a { color: var(--text); } .post-card h2 a:hover { color: var(--teal); } .post-card .meta { color: var(--faint); font-size: 12.5px; display: flex; gap: 10px; flex-wrap: wrap; } .post-card .excerpt { color: var(--muted); font-size: 14.5px; margin: 0; } .post-card .thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* ═══════════ تک‌نوشته — تجربه‌ی خواندن ═══════════ */ .article { max-width: 720px; margin: 40px auto 0; } .article-header h1 { font-size: clamp(26px, 4.5vw, 36px); line-height: 1.5; margin: 0 0 12px; } .article-header .meta { color: var(--faint); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .article-content { font-size: 17.5px; } .article-content p { margin: 0 0 1.35em; } .article-content h2 { font-size: 24px; line-height: 1.6; margin: 1.8em 0 .6em; } .article-content h3 { font-size: 20px; line-height: 1.6; margin: 1.6em 0 .5em; } .article-content blockquote { margin: 1.5em 0; padding: 14px 18px; border-inline-start: 3px solid var(--teal); background: var(--tile); border-radius: var(--radius-sm); color: var(--muted); } .article-content pre, .article-content code { direction: ltr; text-align: left; background: var(--tile-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; } .article-content code { padding: 2px 6px; } .article-content pre { padding: 14px 16px; overflow-x: auto; } .article-content pre code { border: 0; padding: 0; background: transparent; } .article-content ul, .article-content ol { padding-inline-start: 1.4em; margin: 0 0 1.35em; } .article-content li { margin-bottom: .4em; } .article-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; display: block; overflow-x: auto; } .article-content th, .article-content td { border: 1px solid var(--line); padding: 8px 12px; text-align: right; } .article-content th { background: var(--tile); } .article-tags { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; } .article-tags a { font-size: 12px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 12px; background: var(--tile); } .article-tags a:hover { color: var(--teal); border-color: var(--teal-dim); } /* ناوبریِ نوشته‌ها + صفحه‌بندی */ .post-nav, .pagination { display: flex; justify-content: space-between; gap: 12px; margin: 40px auto 0; max-width: 720px; font-size: 14px; } .pagination { max-width: none; margin-top: 32px; } .pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; } .pagination .page-numbers { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 14px; background: var(--tile); color: var(--muted); } .pagination .page-numbers.current { color: var(--teal); border-color: var(--teal-dim); } .pagination a.page-numbers:hover { border-color: var(--line-2); color: var(--text); } /* حالت‌های خالی/۴۰۴ */ .empty { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 48px 24px; text-align: center; color: var(--faint); margin-top: 40px; } .empty a { color: var(--teal); } /* جستجو */ .search-form { display: flex; gap: 8px; margin: 24px 0 8px; } .search-form input[type="search"] { flex: 1; min-width: 0; background: var(--tile); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--text); padding: 10px 14px; font-family: inherit; font-size: 14px; } .search-form input[type="search"]:focus { outline: 2px solid var(--teal); outline-offset: 1px; } .search-form button { background: var(--teal); color: var(--on-accent); font-weight: 700; border: 0; border-radius: var(--radius-sm); padding: 10px 20px; font-family: inherit; font-size: 14px; cursor: pointer; } .search-form button:hover { background: var(--amber); } /* skip-link برای کیبورد */ .skip-link { position: absolute; inset-inline-start: -9999px; } .skip-link:focus { inset-inline-start: 16px; top: 12px; z-index: 99; background: var(--tile); color: var(--teal); padding: 8px 16px; border-radius: var(--radius-sm); } /* دکمه‌ی تغییرِ تم — همان آیکن/رفتارِ ThemeToggleِ خودِ سایت، ولی وانیلا. */ .theme-toggle { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--tile-2); color: var(--muted); cursor: pointer; transition: color .2s var(--ease); } .theme-toggle:hover { color: var(--teal); } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; } html.light .theme-toggle .sun { display: block; } html.light .theme-toggle .moon { display: none; }