@charset "utf-8"; /* ========================================================================== Estelahat.com — سیستم طراحی «کارت واژه‌نامه» ایدهٔ طراحی: دفترچهٔ دانش. الهام از فرهنگ لغت چاپی مدرن — کاغذ کرم، مرکّب سرمه‌ای، شنگرف برای نشانه‌گذاری مدخل، خط‌کش‌های مویی، شماره‌گذاری فولیو در حاشیه و ستون حاشیه‌نویسی برای معنی‌های سریع. تم روشن • RTL • بدون وابستگی خارجی ========================================================================== */ /* --------------------------------------------------------------- 1. فونت */ @font-face { font-family: "Vazirmatn VF"; src: url("../fonts/Vazirmatn-var.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* پشتیبان برای مرورگرهایی که فونت متغیر را نمی‌شناسند */ @font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------- 2. توکن‌ها */ :root { /* کاغذ و مرکّب */ --paper: #FBF9F4; --paper-2: #F5F1E8; --paper-card: #FFFFFF; --ink: #16202F; --ink-2: #3C4A5E; --ink-3: #6B7789; --ink-4: #98A1AE; /* شنگرف — رنگ نشانه‌گذاری مدخل در فرهنگ‌های چاپی */ --mark: #C4432B; --mark-soft: #F4E3DE; --mark-deep: #9A3320; /* خط‌کش مویی */ --rule: #E4DED0; --rule-strong: #CFC7B4; /* رنگ دسته — به‌صورت درون‌خطی روی جایگزین می‌شود */ --cat: var(--mark); --cat-soft: var(--mark-soft); /* تایپوگرافی */ --font: "Vazirmatn VF", "Vazirmatn", "Segoe UI", Tahoma, sans-serif; --fs-body: 1.0625rem; /* 17px — خوانایی فارسی */ --lh-body: 2.05; /* اندازه‌ها */ --measure: 68ch; /* عرض بهینهٔ ستون متن */ --wrap: 1240px; --gutter: clamp(1rem, 4vw, 2.5rem); --radius: 14px; --radius-sm: 9px; /* سایه‌های بسیار ملایم (حس کاغذ، نه حس متریال) */ --shadow-1: 0 1px 2px rgba(22,32,47,.04), 0 2px 8px rgba(22,32,47,.04); --shadow-2: 0 2px 6px rgba(22,32,47,.06), 0 12px 28px rgba(22,32,47,.07); } /* رنگ اختصاصی هر دستهٔ مادر — ده رنگ خاموش که روی کاغذ کرم می‌نشینند */ [data-cat="ai"] { --cat:#6B4FBB; --cat-soft:#EDE8FA; } [data-cat="technology"] { --cat:#1F6F8B; --cat-soft:#E2EFF3; } [data-cat="programming-web"] { --cat:#2E6B4F; --cat-soft:#E3F0E9; } [data-cat="seo-digital-marketing"]{ --cat:#B5651D; --cat-soft:#F7EADB; } [data-cat="crypto-blockchain"] { --cat:#8A6D1F; --cat-soft:#F4EDDA; } [data-cat="finance-economy"] { --cat:#1F5B9E; --cat-soft:#E3ECF7; } [data-cat="business-startup"] { --cat:#8C3B6B; --cat-soft:#F6E6F0; } [data-cat="health-psychology"] { --cat:#137A6B; --cat-soft:#DFF1EE; } [data-cat="legal-immigration"] { --cat:#4A4E7C; --cat-soft:#E9EAF4; } [data-cat="language-slang"] { --cat:#B03A4A; --cat-soft:#F8E5E7; } /* زیتونی گرم — دورترین فام از ده رنگ بالا و هم‌خوان با حوزهٔ غذا */ [data-cat="food-industry"] { --cat:#6E7B1C; --cat-soft:#EFF2DE; } /* --------------------------------------------------------------- 3. پایه */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* بافت بسیار ظریف کاغذ: دو گرادیان رادیال کم‌رمق، بدون تصویر */ background-image: radial-gradient(ellipse 80% 50% at 50% -10%, #FFFFFF 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 100% 0%, var(--paper-2) 0%, transparent 55%); background-attachment: fixed; } h1, h2, h3, h4, h5 { margin: 0 0 .6em; line-height: 1.45; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; } h1 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem); font-weight: 800; line-height: 1.28; } h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem); } h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.32rem); } h4 { font-size: 1.05rem; } p { margin: 0 0 1.25em; } a { color: var(--cat); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1.5px; } a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2.5px solid var(--cat); outline-offset: 3px; border-radius: 4px; } img, svg { max-width: 100%; height: auto; } ul, ol { margin: 0 0 1.25em; padding-inline-start: 1.35em; } li { margin-bottom: .5em; } li::marker { color: var(--cat); } strong, b { font-weight: 700; color: var(--ink); } code, kbd, samp { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 5px; padding: .12em .42em; direction: ltr; display: inline-block; unicode-bidi: isolate; } mark { background: var(--cat-soft); color: var(--ink); padding: .05em .25em; border-radius: 3px; } hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; } /* اعداد و واژه‌های لاتین درون متن فارسی */ .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "ss01"; } .wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; } /* صفحات صرفاً متنی (درباره، روش تحریریه، تماس، حریم خصوصی، شرایط استفاده) ستون کناری ندارند. اگر ستون متن را در عرض کامل ۱۲۴۰ رها کنیم، تمام فضای خالی به یک سمت می‌افتد و خط‌کش تیترها دو برابر متن پهن می‌شود — متن «زودشکسته» به نظر می‌رسد. این صفحات ظرف باریک‌تر و وسط‌چین می‌گیرند. */ .wrap--prose { width: min(100% - (var(--gutter) * 2), 74ch); } .wrap--prose .entry-body, .wrap--prose .page-head__lead { max-width: none; } .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999; background: var(--ink); color: var(--paper); padding: .8rem 1.4rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600; } .skip-link:focus { inset-inline-start: 1rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------- 4. هدر */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(251,249,244,.88); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--rule); } .header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; } /* لوگو + لوگوتایپ */ .logo { display: inline-flex; align-items: center; gap: .6rem; flex-shrink: 0; } .logo:hover { text-decoration: none; } .logo__mark { width: 38px; height: 38px; display: block; } .logo__type { display: flex; flex-direction: column; line-height: 1; } .logo__name { font-size: 1.4rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; } .logo__name em { font-style: normal; color: var(--mark); } .logo__tld { font-size: .62rem; font-weight: 600; color: var(--ink-4); letter-spacing: .16em; margin-top: .3rem; direction: ltr; text-transform: uppercase; } .nav { margin-inline-start: auto; } .nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; } .nav li { margin: 0; } .nav a { display: block; padding: .5rem .8rem; border-radius: var(--radius-sm); color: var(--ink-2); font-size: .95rem; font-weight: 500; transition: background .16s ease, color .16s ease; } .nav a:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; } .nav a[aria-current="page"] { color: var(--mark); background: var(--mark-soft); font-weight: 600; } /* جست‌وجوی هدر */ .header-search { position: relative; flex: 0 1 260px; margin-inline-start: .5rem; } .header-search input { width: 100%; font-family: inherit; font-size: .92rem; padding: .55rem 2.3rem .55rem .9rem; border: 1px solid var(--rule-strong); border-radius: 100px; background: var(--paper-card); color: var(--ink); } .header-search input::placeholder { color: var(--ink-4); } .header-search svg { position: absolute; inset-inline-end: .8rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-4); pointer-events: none; } .nav-toggle { display: none; } @media (max-width: 940px) { .header-search { display: none; } } @media (max-width: 780px) { .nav ul { gap: 0; } .nav a { padding: .5rem .55rem; font-size: .88rem; } .nav .nav-hide-sm { display: none; } } /* --------------------------------------------------- 5. مسیر راهنما */ .breadcrumb { padding: 1.1rem 0 0; font-size: .85rem; color: var(--ink-3); } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; list-style: none; margin: 0; padding: 0; } .breadcrumb li { margin: 0; display: flex; align-items: center; gap: .5rem; } .breadcrumb li + li::before { content: "‹"; color: var(--ink-4); font-size: 1.05em; } .breadcrumb a { color: var(--ink-3); } .breadcrumb a:hover { color: var(--cat); } .breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; } /* ------------------------------------------- 6. چیدمان صفحهٔ اصطلاح */ .entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 4vw, 4rem); align-items: start; padding-bottom: 4rem; } @media (max-width: 1080px) { .entry-layout { grid-template-columns: minmax(0, 1fr); } } /* ---- سربرگ مدخل: قلب ایدهٔ «کارت واژه‌نامه» ---- */ .entry-head { position: relative; margin: 1.5rem 0 2.5rem; padding: 2rem 2.2rem 1.9rem; background: var(--paper-card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-1); /* نوار رنگ دسته در لبهٔ راست — نشانهٔ برگهٔ فرهنگ لغت */ border-inline-start: 4px solid var(--cat); overflow: hidden; } /* شمارهٔ فولیو، مثل شمارهٔ مدخل در فرهنگ چاپی */ .entry-head__folio { position: absolute; top: 1.15rem; inset-inline-end: 1.5rem; font-size: .7rem; font-weight: 600; letter-spacing: .13em; color: var(--ink-4); font-variant-numeric: tabular-nums; direction: ltr; } .entry-head__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .9rem; } .entry-head h1 { margin-bottom: .55rem; } /* واژهٔ سرمدخل: بزرگ، مقتدر، با تلفظ/معادل لاتین کنارش */ .entry-head__word { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; margin-bottom: .3rem; } .entry-head__latin { font-size: .95rem; font-weight: 500; color: var(--ink-3); direction: ltr; unicode-bidi: isolate; letter-spacing: .01em; } /* معنی کوتاه — همان چیزی که کاربر در ۵ ثانیهٔ اول می‌خواهد */ .entry-head__gloss { margin: 1.1rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule); font-size: 1.12rem; line-height: 1.95; color: var(--ink-2); } .entry-head__gloss strong { color: var(--ink); } /* ---- برچسب‌ها و تراشه‌ها ---- */ .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem; border-radius: 100px; font-size: .78rem; font-weight: 600; line-height: 1.7; background: var(--cat-soft); color: var(--cat); border: 1px solid color-mix(in srgb, var(--cat) 18%, transparent); } .chip:hover { text-decoration: none; filter: brightness(.97); } .chip--plain { background: var(--paper-2); color: var(--ink-3); border-color: var(--rule); } .chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ---- بدنهٔ مقاله ---- */ .entry-body { max-width: var(--measure); } .entry-body > h2 { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); position: relative; } /* نشانهٔ شنگرف کنار هر تیتر — امضای بصری سایت */ .entry-body > h2::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 42px; height: 3px; background: var(--cat); border-radius: 2px; } .entry-body > h3 { margin-top: 2rem; color: var(--ink); } .entry-body > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .entry-body > h2:first-child::before { display: none; } .entry-body ul li::marker { color: var(--cat); } /* نقل‌قول/نکتهٔ کلیدی */ .callout { margin: 1.8rem 0; padding: 1.15rem 1.35rem; background: var(--cat-soft); border: 1px solid color-mix(in srgb, var(--cat) 16%, transparent); border-inline-start: 3px solid var(--cat); border-radius: var(--radius-sm); font-size: .98rem; line-height: 1.95; } .callout p:last-child { margin-bottom: 0; } .callout__title { display: block; font-weight: 700; color: var(--cat); font-size: .85rem; letter-spacing: .04em; margin-bottom: .4rem; } .callout--warn { --cat: var(--mark); --cat-soft: var(--mark-soft); } /* جدول */ .table-wrap { overflow-x: auto; margin: 1.8rem 0; } table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--paper-card); border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; } th, td { padding: .8rem 1rem; text-align: start; border-bottom: 1px solid var(--rule); } th { background: var(--paper-2); font-weight: 700; font-size: .88rem; color: var(--ink); } tr:last-child td { border-bottom: 0; } /* ---- فهرست مطالب (چسبان در ستون کناری) ---- */ .aside { position: sticky; top: 88px; display: grid; gap: 1.25rem; } @media (max-width: 1080px) { .aside { position: static; } } .panel { background: var(--paper-card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem 1.35rem; box-shadow: var(--shadow-1); } .panel__title { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-4); margin: 0 0 .9rem; display: flex; align-items: center; gap: .5rem; } .panel__title::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .toc li { margin: 0; counter-increment: toc; } .toc a { display: flex; gap: .6rem; padding: .42rem 0; font-size: .9rem; color: var(--ink-2); line-height: 1.7; border-bottom: 1px dashed transparent; } .toc a::before { content: counter(toc, decimal); color: var(--ink-4); font-size: .78rem; font-weight: 600; flex-shrink: 0; min-width: 1.2em; font-variant-numeric: tabular-nums; } .toc a:hover { color: var(--cat); text-decoration: none; } .toc a:hover::before { color: var(--cat); } /* ---- حاشیه‌نویسی: معنی سریع واژه‌های مرتبط ---- */ .marginalia { display: grid; gap: .1rem; } .marginalia dt { font-weight: 700; font-size: .92rem; color: var(--ink); margin-top: .85rem; } .marginalia dt:first-child { margin-top: 0; } .marginalia dd { margin: .15rem 0 0; font-size: .855rem; line-height: 1.85; color: var(--ink-3); } .marginalia dd a { font-weight: 600; } /* ------------------------------------------------- 7. پرسش‌های متداول */ .faq { margin-top: 2.8rem; } .faq details { background: var(--paper-card); border: 1px solid var(--rule); border-radius: var(--radius-sm); margin-bottom: .7rem; overflow: hidden; transition: border-color .18s ease; } .faq details[open] { border-color: color-mix(in srgb, var(--cat) 32%, var(--rule)); } .faq summary { cursor: pointer; list-style: none; padding: 1rem 1.2rem; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: .8rem; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; margin-inline-start: auto; flex-shrink: 0; font-size: 1.4rem; font-weight: 400; color: var(--cat); line-height: 1; transition: transform .2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq summary:hover { background: var(--paper-2); } .faq__answer { padding: 0 1.2rem 1.1rem; color: var(--ink-2); font-size: .97rem; } .faq__answer p:last-child { margin-bottom: 0; } /* --------------------------------------------- 8. لینک‌سازی داخلی */ .link-section { margin-top: 3rem; } .link-section__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; } .link-section__head h2 { margin: 0; font-size: 1.25rem; } .link-section__head a { font-size: .88rem; font-weight: 600; margin-inline-start: auto; flex-shrink: 0; } /* شبکهٔ کارت اصطلاح */ .term-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); list-style: none; margin: 0; padding: 0; } .term-grid li { margin: 0; } .term-card { display: block; height: 100%; padding: 1.05rem 1.15rem; background: var(--paper-card); border: 1px solid var(--rule); border-radius: var(--radius-sm); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .term-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--cat) 45%, var(--rule)); transform: translateY(-2px); box-shadow: var(--shadow-2); } .term-card__word { display: block; font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-bottom: .3rem; line-height: 1.6; } .term-card:hover .term-card__word { color: var(--cat); } .term-card__gloss { display: block; font-size: .855rem; line-height: 1.8; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .term-card__meta { display: block; margin-top: .6rem; font-size: .72rem; font-weight: 600; color: var(--ink-4); letter-spacing: .04em; } /* ناوبری قبلی/بعدی */ .prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); } @media (max-width: 620px) { .prev-next { grid-template-columns: 1fr; } } .prev-next a { padding: .95rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-card); transition: border-color .18s ease; } .prev-next a:hover { text-decoration: none; border-color: var(--cat); } .prev-next span { display: block; font-size: .73rem; font-weight: 600; color: var(--ink-4); letter-spacing: .08em; margin-bottom: .3rem; } .prev-next strong { display: block; font-size: .98rem; color: var(--ink); font-weight: 600; } .prev-next .next { text-align: end; } /* -------------------------------------------------------- 9. صفحهٔ خانه */ .hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); text-align: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: var(--mark); background: var(--mark-soft); padding: .35rem .9rem; border-radius: 100px; margin-bottom: 1.5rem; border: 1px solid color-mix(in srgb, var(--mark) 16%, transparent); } .hero h1 { max-width: 20ch; margin-inline: auto; margin-bottom: 1rem; } .hero h1 em { font-style: normal; color: var(--mark); } .hero__lead { max-width: 56ch; margin: 0 auto 2.2rem; font-size: 1.13rem; line-height: 2; color: var(--ink-2); } /* جست‌وجوی بزرگ صفحهٔ اصلی */ .hero-search { max-width: 620px; margin: 0 auto; position: relative; } .hero-search input { width: 100%; font-family: inherit; font-size: 1.05rem; padding: 1.05rem 3.4rem 1.05rem 1.4rem; border: 1px solid var(--rule-strong); border-radius: 100px; background: var(--paper-card); color: var(--ink); box-shadow: var(--shadow-1); transition: border-color .18s ease, box-shadow .18s ease; } .hero-search input:focus { border-color: var(--mark); box-shadow: var(--shadow-2); } .hero-search__icon { position: absolute; inset-inline-end: 1.25rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-4); pointer-events: none; } .hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 2.5rem; margin-top: 2.2rem; font-size: .88rem; color: var(--ink-3); } .hero-stats b { display: block; font-size: 1.5rem; color: var(--ink); font-weight: 800; line-height: 1.4; } /* شبکهٔ ده دستهٔ مادر */ .cat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); list-style: none; margin: 0; padding: 0; } .cat-grid li { margin: 0; } .cat-card { display: flex; flex-direction: column; height: 100%; padding: 1.5rem 1.6rem; background: var(--paper-card); border: 1px solid var(--rule); border-inline-start: 4px solid var(--cat); border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease; } .cat-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-2); } .cat-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; } .cat-card h3 { margin: 0; font-size: 1.2rem; color: var(--ink); } .cat-card:hover h3 { color: var(--cat); } .cat-card__count { font-size: .74rem; font-weight: 700; color: var(--cat); background: var(--cat-soft); padding: .22rem .6rem; border-radius: 100px; flex-shrink: 0; font-variant-numeric: tabular-nums; } .cat-card p { margin: 0 0 1rem; font-size: .9rem; line-height: 1.9; color: var(--ink-3); } .cat-card__subs { margin-top: auto; padding-top: .9rem; border-top: 1px dashed var(--rule); font-size: .8rem; color: var(--ink-4); line-height: 1.9; } /* بخش‌های صفحه */ .section { padding: clamp(2.5rem, 5vw, 4rem) 0; } .section__head { margin-bottom: 1.8rem; max-width: 60ch; } .section__head h2 { margin-bottom: .5rem; } .section__head p { margin: 0; color: var(--ink-3); font-size: 1rem; } .section--tint { background: var(--paper-2); border-block: 1px solid var(--rule); } /* --------------------------------------- 10. صفحهٔ دسته / زیر‌دسته */ .page-head { padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--rule); margin-bottom: clamp(2rem, 4vw, 3rem); } .page-head h1 { margin-bottom: .8rem; } .page-head__lead { max-width: 68ch; font-size: 1.08rem; color: var(--ink-2); margin-bottom: 0; } /* فهرست زیر‌دسته‌ها به‌صورت تراشه — لینک‌سازی افقی */ .sub-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; } /* بلوک زیر‌دسته در صفحهٔ دسته */ .sub-block { margin-bottom: 3rem; scroll-margin-top: 6rem; } .sub-block__head { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--rule); } .sub-block__head h2 { margin: 0; font-size: 1.28rem; } .sub-block__head .count { font-size: .8rem; color: var(--ink-4); font-weight: 600; } .sub-block__head a { margin-inline-start: auto; font-size: .85rem; font-weight: 600; flex-shrink: 0; } /* آرشیو تخت دستهٔ مادر: هر صفحه حداکثر ۱۶ اصطلاح */ .category-archive { margin-bottom: 2.5rem; } .category-archive__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; padding-bottom: .75rem; border-bottom: 1px solid var(--rule); } .category-archive__head h2 { margin: 0; font-size: 1.28rem; } .category-archive__head span { margin-inline-start: auto; color: var(--ink-4); font-size: .82rem; font-weight: 600; } /* صفحه‌بندی سئویی و قابل‌استفاده با صفحه‌کلید */ .pagination { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); } .pagination ol { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; list-style: none; margin: 0; padding: 0; } .pagination li { margin: 0; } .pagination__number, .pagination__step { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-card); color: var(--ink-2); font-size: .9rem; font-weight: 600; line-height: 1.4; } .pagination__number:hover, .pagination__step:hover { border-color: var(--cat); color: var(--cat); text-decoration: none; } .pagination__number[aria-current="page"] { border-color: var(--cat); background: var(--cat-soft); color: var(--cat); } .pagination__step { padding-inline: .9rem; gap: .45rem; } .pagination__step[rel="next"] { justify-self: end; } @media (max-width: 640px) { .pagination { grid-template-columns: 1fr 1fr; } .pagination ol { grid-column: 1 / -1; grid-row: 1; } .pagination__step { grid-row: 2; } } /* ------------------------------------------------ 11. صفحهٔ واژه‌نامه */ .alpha-bar { display: flex; flex-wrap: wrap; gap: .35rem; padding: 1rem 1.2rem; background: var(--paper-card); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 2rem; position: sticky; top: 80px; z-index: 20; box-shadow: var(--shadow-1); } .alpha-bar a { min-width: 2.1rem; text-align: center; padding: .3rem .5rem; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 600; color: var(--ink-2); background: var(--paper-2); } .alpha-bar a:hover { background: var(--mark-soft); color: var(--mark); text-decoration: none; } .glossary-group { margin-bottom: 2.5rem; scroll-margin-top: 9rem; } .glossary-group__letter { font-size: 2rem; font-weight: 800; color: var(--mark); padding-bottom: .4rem; margin-bottom: 1rem; border-bottom: 2px solid var(--rule); } /* ------------------------------------------------------- 12. فوتر */ .site-footer { margin-top: auto; background: var(--ink); color: #B9C2D0; padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; font-size: .9rem; } /* خط شنگرف بالای فوتر — ادامهٔ همان زبان بصری «نشانه‌گذاری مدخل» */ .site-footer::before { content: ""; display: block; height: 3px; background: var(--mark); position: absolute; top: 0; inset-inline: 0; } .site-footer { position: relative; } /* ---- ردیف بالا: برند + ستون‌های پیوند ---- */ /* ستون برند ثابت است و ستون‌های پیوند به تعداد دسته‌های منتشرشده تطبیق می‌یابند — تا وقتی همهٔ ده دسته پر نشده‌اند، فوتر جای خالی نداشته باشد. */ .footer-top { display: grid; gap: 2.5rem 2rem; grid-template-columns: minmax(240px, 1.5fr) repeat(auto-fit, minmax(150px, 1fr)); padding-bottom: 2.5rem; } .footer-brand-col { max-width: 40ch; } .footer-about { margin: 1.1rem 0 1.25rem; } .footer-mail { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .9rem; border-radius: 100px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: .86rem; font-weight: 500; color: #E6EAF0 !important; transition: background .18s ease, border-color .18s ease; } .footer-mail:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.24); text-decoration: none; } .footer-mail svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; } .site-footer h2, .site-footer h3 { font-size: .76rem; font-weight: 700; letter-spacing: .11em; color: #FFFFFF; margin: 0 0 1.1rem; } .site-footer a { color: #B9C2D0; } .site-footer a:hover { color: #FFFFFF; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: .1rem; } .site-footer p { line-height: 1.95; color: #98A3B4; } .footer-brand .logo__name { color: #FFFFFF; } .footer-brand .logo__tld { color: #7C8899; } /* ناحیهٔ لمسی مناسب موبایل برای هر پیوند فوتر */ .footer-col a { display: block; padding: .42rem 0; font-size: .89rem; line-height: 1.75; } /* ---- سلب مسئولیت ---- */ .footer-disclaimer { margin: 0; padding: 1rem 1.2rem; background: rgba(196,67,43,.12); border: 1px solid rgba(196,67,43,.28); border-radius: var(--radius-sm); font-size: .84rem; line-height: 1.9; color: #D6C2BD !important; } .footer-disclaimer strong { color: #F0DBD6; } /* ---- ردیف پایین ---- */ .footer-bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 2rem; font-size: .82rem; color: #7C8899; } .footer-bottom p { margin: 0; color: inherit; font-size: inherit; } .footer-copy strong { color: #C9D2DD; font-weight: 600; } .footer-legal { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; } .footer-legal a { font-size: .82rem; position: relative; } .footer-legal a + a::before { content: ""; position: absolute; inset-inline-end: -.75rem; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #4A5566; transform: translateY(-50%); } .footer-credit { margin-inline-start: auto !important; } /* کل عبارت لینک است؛ نام برند فقط با وزن و روشنایی بیشتر متمایز می‌شود */ .footer-credit a, .footer-credit span { color: #98A3B4; font-weight: 500; } .footer-credit strong { color: #C9D2DD; font-weight: 700; } .footer-credit a:hover, .footer-credit a:hover strong { color: #FFFFFF; } /* ---- موبایل ---- */ @media (max-width: 860px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; } .footer-brand-col { grid-column: 1 / -1; max-width: none; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; gap: 1.75rem; } /* در موبایل هر ستون به یک بلوک جمع‌وجور با خط جداکننده تبدیل می‌شود */ .footer-col { border-top: 1px solid rgba(255,255,255,.09); padding-top: 1.25rem; } .footer-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; } /* ناحیهٔ لمسی دست‌کم ۴۴ پیکسل مطابق راهنمای دسترس‌پذیری */ .footer-col a { padding: .7rem 0; min-height: 44px; display: flex; align-items: center; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; } .footer-credit { margin-inline-start: 0 !important; } .footer-mail { width: 100%; justify-content: center; } } body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } /* ------------------------------------------------------- 13. چاپ */ @media print { .site-header, .site-footer, .aside, .prev-next, .link-section, .breadcrumb, .skip-link { display: none !important; } body { background: #fff; font-size: 11pt; } .entry-layout { grid-template-columns: 1fr; } .entry-head { box-shadow: none; border: 1px solid #ccc; } a { color: inherit; text-decoration: none; } .faq details { break-inside: avoid; } .faq details:not([open]) > *:not(summary) { display: block; } } /* مدخل‌های هنوز منتشرنشده: متن حفظ می‌شود، لینک غیرفعال است */ .term-pending { color: var(--ink-2); border-bottom: 1px dotted var(--rule-strong); cursor: help; } /* سطر تاریخ به‌روزرسانی در صفحات قانونی */ .legal-updated { display: inline-block; margin: 0 0 2rem; padding: .35rem .85rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 100px; font-size: .82rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } /* نوار اطلاعات مدخل: زمان مطالعه و تاریخ آخرین بازبینی */ .entry-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.1rem 0 0; padding-top: .95rem; border-top: 1px dashed var(--rule); font-size: .8rem; color: var(--ink-4); } .entry-meta span { display: inline-flex; align-items: center; gap: .45rem; } .entry-meta span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--rule-strong); margin-inline-end: .5rem; } .entry-meta time { color: var(--ink-3); }