/* ============================================================ قالب قلموم — لایه‌ی پایه (اسپرینت ۱) همه‌چیز از توکن‌های --gh-* می‌خواند که پلاگین در تزریق می‌کند. خواص «منطقی» (inline-start/end) → RTL و LTR هر دو درست. ============================================================ */ /* اسکرول نرم استاندارد — لینک‌های لنگری، فهرست مطلب، برگشت به بالا */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } @font-face { font-family: 'IRANYekanX'; src: url('../fonts/IRANYekanXVF.woff2') format('woff2-variations'), url('../fonts/IRANYekanXVF.woff') format('woff-variations'); font-weight: 100 1000; font-display: swap; } @media (prefers-reduced-motion: reduce) { .gh-logo, .gh-menu > li > a::after, .gh-pstep, .gh-card-course::after, .gh-card-cover img { transition: none; } } /* لحظه — فقط برای سند گواهی (تایپوگرافی تاریخی گواهی‌های قلموم)؛ نسخه‌ی PDF همین خانواده را به‌صورت TTF ایستا (Regular/Bold) embed می‌کند تا دو خروجی یکسان بمانند. */ @font-face { font-family: 'Lahzeh'; src: url('../fonts/Lahzeh-FamilyVF.woff2') format('woff2-variations'), url('../fonts/Lahzeh-FamilyVF.woff') format('woff-variations'); font-weight: 100 1000; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } /* شبکه‌ی ایمنی سراسری: بدنه‌ی صفحه هرگز نباید اسکرول افقی بگیرد (Responsive Rules). ⚠️ درس آموخته (RESP-01 + رگرسیون بعدی): بدون این، سرریز افقیِ هر کامپوننت آینده به‌جای کلیپ‌شدن، کل صفحه را جابه‌جا می‌کند. عمداً از overflow-x:hidden استفاده نشده — آن روی html/body باعث می‌شود مرورگر یک scrolling container جدید بسازد و هر position:sticky داخل صفحه (هدر، باکس خرید، سایدبار داشبورد) از کار بیفتد. overflow-x:clip هیچ کانتینر اسکرولی نمی‌سازد، پس sticky سالم می‌ماند؛ overflow-y صریحاً visible تا جفت‌شدنِ خودکار دو محور (که auto می‌شود) هم اثری نگذارد. */ html, body { overflow-x: clip; overflow-y: visible; } body { margin: 0; /* --gh-font-family را SiteFont.php در تزریق می‌کند (پیش‌فرض 'IRANYekanX')؛ اگر ادمین فونت سفارشی آپلود کرده باشد، همین یک متغیر جای آن را همه‌جا (سایت + پنل ادمین) می‌گیرد. */ font-family: var(--gh-font-family, 'IRANYekanX'), system-ui, sans-serif; font-size: var(--gh-font-size-base, 16px); line-height: 1.9; background: var(--gh-bg-page); color: var(--gh-text-primary); transition: background var(--gh-dur-slow) var(--gh-ease-out), color var(--gh-dur-slow) var(--gh-ease-out); -webkit-font-smoothing: antialiased; } /* کنترل‌های بومی مرورگر به‌صورت پیش‌فرض فونت بدنه را به ارث نمی‌برند؛ همه‌ی متن‌های تعاملی پروژه باید دقیقاً از تایپوگرافی اصلی قلموم استفاده کنند. */ button, input, select, textarea { font-family: inherit; font-size: inherit; letter-spacing: normal; } img { max-width: 100%; height: auto; display: block; } a { color: var(--gh-accent-text); } h1, h2, h3, h4 { line-height: 1.4; margin: 0 0 .5em; text-wrap: balance; } :focus-visible { outline: 2px solid var(--gh-accent-solid); outline-offset: 2px; border-radius: var(--gh-r-xs); } /* حلقه‌ی فوکوس اینپوت — قبلاً ۵ بار عیناً تکرار شده بود؛ حالا یک توکن سطح تم (نه Tokens.php، چون این پاس صیقل است نه معماری)؛ روی هر اینپوت/فیلد متمرکز focus استفاده می‌شود. */ :root { --gh-focus-ring: 0 0 0 3px color-mix(in srgb, var(--gh-accent-solid) 18%, transparent); /* کف خوانایی مشترک متن‌های کمکی و اندازه‌ی عنوان کوتاه بنر صفحات. */ --gh-font-micro: 12px; --gh-font-caption: 13px; --gh-font-kicker: 15px; /* * معماری شعاع: * micro برای جزئیات، compact برای کنترل کوچک، control برای دکمه/فیلد، * group برای گروه‌های متوسط، card برای کارت و section برای قاب‌های اصلی. */ --gh-radius-micro: var(--gh-r-xs); --gh-radius-compact: var(--gh-r-sm); --gh-radius-control: var(--gh-r-md); --gh-radius-group: var(--gh-r-lg); --gh-radius-card: var(--gh-r-xl); --gh-radius-section: var(--gh-r-2xl); /* شعاع موازی: شعاع فرزند = شعاع والد منهای فاصله‌ی واقعی از لبه‌ی والد. */ --gh-radius-card-inset-8: max(0px, calc(var(--gh-radius-card) - 8px)); --gh-radius-card-inset-10: max(0px, calc(var(--gh-radius-card) - 10px)); --gh-radius-section-inset-10: max(0px, calc(var(--gh-radius-section) - 10px)); } .skip-link { position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 200; background: var(--gh-accent-solid); color: var(--gh-accent-on-solid); padding: 10px 18px; border-radius: var(--gh-r-sm); font-weight: 700; text-decoration: none; } .skip-link:focus { inset-inline-start: 8px; } .gh-container { max-width: 1240px; margin-inline: auto; padding-inline: 24px; } .gh-section { padding-block: 56px; } /* ---------- بنر جشنواره تخفیف ---------- */ .gh-sale-banner { background: linear-gradient(90deg, var(--gh-accent-solid), color-mix(in srgb, var(--gh-accent-solid) 60%, var(--gh-accent-shade))); color: var(--gh-accent-on-solid); } .gh-sale-banner-inner { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding-block: 10px; } .gh-sale-banner-text { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; } .gh-sale-banner-text svg { width: 18px; height: 18px; flex-shrink: 0; } .gh-sale-banner-cta { background: color-mix(in srgb, var(--gh-accent-on-solid) 12%, transparent); color: var(--gh-accent-on-solid); border: 1px solid color-mix(in srgb, var(--gh-accent-on-solid) 24%, transparent); } .gh-sale-banner-cta:hover { background: color-mix(in srgb, var(--gh-accent-on-solid) 20%, transparent); color: var(--gh-accent-on-solid); } @media (max-width: 640px) { .gh-sale-banner-inner { gap: 10px; } } /* ---------- شمارنده‌ی معکوس (توکن‌محور: خودکار با تم روشن/تاریک هماهنگ می‌شود) ---------- */ .gh-countdown { display: flex; align-items: center; gap: 6px; direction: ltr; } .gh-cd-box { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--gh-bg-sunken); color: var(--gh-text-primary); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-sm); min-width: 48px; padding: 6px 4px; } .gh-cd-box b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; } .gh-cd-box span { font-size: 10px; color: var(--gh-text-tertiary); margin-block-start: 2px; } /* کف مقیاس تایپوگرافی 10px است؛ 9.5/8 قبلی خارج از مقیاس بود */ .gh-cd-sep { font-style: normal; font-weight: 900; color: var(--gh-text-tertiary); } .gh-countdown-sm .gh-cd-box { min-width: 34px; padding: 4px 2px; } .gh-countdown-sm .gh-cd-box b { font-size: 13px; } .gh-countdown-sm .gh-cd-box span { font-size: 10px; } /* داخل بنر جشنواره: همه‌ی اجزای روی سطح برند از توکن on-solid می‌خوانند؛ در تم روشن سفید و در تم تاریک تیره می‌شوند و کنتراست خودکار حفظ می‌شود. */ .gh-sale-banner .gh-cd-box { background: color-mix(in srgb, var(--gh-accent-on-solid) 12%, transparent); border-color: color-mix(in srgb, var(--gh-accent-on-solid) 24%, transparent); color: var(--gh-accent-on-solid); } .gh-sale-banner .gh-cd-box span { color: color-mix(in srgb, var(--gh-accent-on-solid) 72%, transparent); } .gh-sale-banner .gh-cd-sep { color: color-mix(in srgb, var(--gh-accent-on-solid) 52%, transparent); } /* داخل باکس خرید دوره — بزرگ‌تر و تمام‌عرض */ .gh-buybox .gh-countdown { width: 100%; justify-content: space-between; } .gh-buybox .gh-countdown .gh-cd-box { flex: 1; min-width: 0; padding-block: 10px; } .gh-buybox .gh-countdown .gh-cd-box b { font-size: 20px; } .gh-buybox .gh-countdown .gh-cd-box span { font-size: 10px; } .gh-cd-label { font-size: 12px; font-weight: 700; color: var(--gh-danger-text); display: flex; align-items: center; gap: 6px; margin-block-end: 8px; } .gh-cd-label svg { width: 14px; height: 14px; } /* ---------- هدر ---------- */ .gh-header { position: sticky; top: 0; z-index: 100; border-block-end: 1px solid var(--gh-border-subtle); } /* * افکت شیشه‌ای روی ::before است نه خودِ هدر — backdrop-filter روی هدر * برای فرزندان position:fixed (منوی موبایل و بک‌دراپش) containing block می‌سازد * و منو به‌جای کل صفحه، داخل قاب ۶۸px هدر حبس می‌شود. */ .gh-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--gh-bg-page) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .gh-header-inner { display: flex; align-items: center; gap: 24px; height: 68px; } .gh-logo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 19px; font-weight: 900; color: var(--gh-accent-text); text-decoration: none; } .gh-logo i { width: 26px; height: 26px; border-radius: var(--gh-r-sm); background: var(--gh-accent-solid); flex-shrink: 0; } /* نشان SVG قلموم — رنگ از توکن برند (روشن: نارنجی سوخته / تاریک: خودکار روشن‌تر) */ .gh-logo-mark { display: inline-flex; width: 25px; flex: none; color: var(--gh-accent-solid); } .gh-logo-mark svg, .gh-logo-mark img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; } .gh-logo-wordmark { display: block; width: auto; height: 1.25em; max-width: 112px; object-fit: contain; flex: none; } .gh-logo { transition: transform var(--gh-dur-base) var(--gh-ease-out); } .gh-logo:hover { transform: scale(.94); } /* متن لوگو باید اولین چیزی باشد که در تنگنای عرض جمع می‌شود — دکمه‌های آیکونی هدر هرگز نباید در این کشمکش ببازند (⚠️ درس آموخته RESP-01). min-width:0 دوبل لازم است: هم روی خودِ .gh-logo (به‌عنوان فرزند فلکس هدر) هم روی خودِ اسپن متن (به‌عنوان فرزند فلکس لوگو). */ .gh-logo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gh-nav { margin-inline-end: auto; } .gh-menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .gh-menu a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--gh-text-secondary); text-decoration: none; padding: 8px 14px; border-radius: var(--gh-r-full); border: 1px solid transparent; transition: background-color var(--gh-dur-fast) var(--gh-ease-out), color var(--gh-dur-fast) var(--gh-ease-out), border-color var(--gh-dur-fast) var(--gh-ease-out); } .gh-menu a svg { width: 16px; height: 16px; flex-shrink: 0; } .gh-menu a:hover { background: var(--gh-bg-sunken); color: var(--gh-text-primary); } .gh-menu .current-menu-item > a { color: var(--gh-accent-text); background: var(--gh-accent-surface); border-color: var(--gh-accent-border); } .gh-menu .sub-menu { position: absolute; list-style: none; margin: 8px 0 0; padding: 6px; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-md); box-shadow: var(--gh-shadow-3); min-width: 220px; } .gh-menu li { position: relative; } @media (min-width: 901px) { /* پل نامرئی روی فاصله‌ی ۸px تریگر↔پنل — همان درس «هیچ فاصله‌ی مرده‌ای در مسیر ماوس» (پنل حساب)، این‌بار برای زیرمنو که فاصله‌اش را margin ساخته بود نه padding. فقط دسکتاپ: در چیدمان استاتیک موبایل، همین پل تپِ ۸ پیکسل پایینِ آیتم والد را می‌بلعید. */ .gh-menu .sub-menu::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -8px; height: 8px; } .gh-menu .sub-menu { opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out), visibility 0s linear var(--gh-dur-fast); } .gh-menu li:hover > .sub-menu, .gh-menu li:focus-within > .sub-menu { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; } } .gh-menu .sub-menu a { display: flex; border-radius: var(--gh-r-xs); } /* شورون آیتم‌های دارای زیرمنو — کوچک‌تر از آیکون اصلی، هم‌الگو با چرخش .gh-f-group[open] summary svg */ .gh-menu a .gh-menu-caret { width: 13px; height: 13px; margin-inline-start: -2px; transition: transform var(--gh-dur-fast) var(--gh-ease-out); } .gh-menu li:hover > a .gh-menu-caret, .gh-menu li:focus-within > a .gh-menu-caret { transform: rotate(180deg); } .gh-header-actions { display: flex; align-items: center; gap: 8px; } .gh-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; background: transparent; border: none; border-radius: var(--gh-r-sm); color: var(--gh-text-secondary); cursor: pointer; transition: background-color var(--gh-dur-fast) var(--gh-ease-out), color var(--gh-dur-fast) var(--gh-ease-out), border-color var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out), opacity var(--gh-dur-fast) var(--gh-ease-out); } .gh-icon-btn:hover { background: var(--gh-bg-sunken); color: var(--gh-text-primary); } .gh-icon-btn svg { width: 20px; height: 20px; } .gh-icon-btn-sm { width: 34px; height: 34px; } .gh-icon-btn-sm svg { width: 17px; height: 17px; } /* آواتار کاربر — کامپوننت عمومی (هم در هدر سراسری، هم در dash.css استفاده می‌شود؛ باید در base.css باشد نه dash.css چون dash.css فقط در مسیرهای اپ enqueue می‌شود). */ .gh-avatar { position: relative; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--gh-accent-surface), var(--gh-accent-border)); color: var(--gh-accent-text); font-weight: 800; } /* موقعیت absolute عمدی است: در inline-grid با track ضمنی auto، اندازه‌ی درصدی روی می‌تواند به‌جای ابعاد واقعی به auto حل شود (کوئرک شناخته‌شده‌ی CSS Grid) و آواتار را غول‌آسا کند. */ .gh-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- حساب کاربری هدر ---------- */ .gh-account { position: relative; display: flex; align-items: center; gap: 4px; } .gh-account-trigger { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-block: 5px; padding-inline-start: 6px; padding-inline-end: 12px; border-radius: var(--gh-r-full); border: 1px solid var(--gh-border-default); background: var(--gh-bg-surface); color: var(--gh-text-primary); text-decoration: none; transition: all var(--gh-dur-fast) var(--gh-ease-out); } .gh-account-trigger:hover { border-color: var(--gh-border-strong); background: var(--gh-bg-sunken); } .gh-account-trigger:focus-visible { border-radius: var(--gh-r-full); } .gh-account-trigger .gh-avatar { width: 30px; height: 30px; } .gh-account-name { font-size: 13.5px; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gh-account-dot { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--gh-danger-solid); border: 2px solid var(--gh-bg-page); } /* پنل با padding-block-start (نه margin/gap موقعیتی) شروع می‌شود تا در مسیر ماوس بین دکمه و پنل هیچ نقطه‌ی «خارج از هاور» وجود نداشته باشد. */ .gh-account-panel { position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: 110; width: 300px; padding-block-start: 8px; } /* الگوی قفل‌شده‌ی Motion Principles (پنل‌ها = translate + opacity) به‌جای پرش display:none→block. visibility با تأخیرِ هم‌اندازه‌ی ترنزیشن می‌بندد؛ همین تأخیر یک مهلت ۱۲۰ms هاور-خروج هم می‌دهد (حرکت قابل‌قطع: برگشتن ماوس وسط محوشدن، پنل را همان‌جا برمی‌گرداند). موبایل الگوی سایدبار خودش را دارد. */ @media (min-width: 901px) { .gh-account-panel { opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out), visibility 0s linear var(--gh-dur-fast); } .gh-account:hover .gh-account-panel, .gh-account:focus-within .gh-account-panel, .gh-cart:hover .gh-account-panel, .gh-cart:focus-within .gh-account-panel { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; } } .gh-account-panel-inner { background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-lg); box-shadow: var(--gh-shadow-3); padding: 8px; } .gh-account-panel-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-block-end: 1px solid var(--gh-border-subtle); margin-block-end: 6px; } .gh-account-panel-head .gh-avatar { width: 42px; height: 42px; } .gh-account-panel-head b { display: block; font-size: 14px; font-weight: 800; } .gh-account-panel-head span { font-size: 12px; color: var(--gh-text-tertiary); } .gh-account-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .gh-account-links a, .gh-account-theme, .gh-account-logout { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--gh-text-secondary); text-decoration: none; background: transparent; border: none; cursor: pointer; padding: 9px 10px; border-radius: var(--gh-r-sm); text-align: start; } .gh-account-links a svg, .gh-account-theme svg, .gh-account-logout svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--gh-text-tertiary); } .gh-account-links a:hover, .gh-account-theme:hover { background: var(--gh-bg-sunken); color: var(--gh-text-primary); } .gh-account-links a .gh-count-badge { margin-inline-start: auto; } .gh-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--gh-r-full); background: var(--gh-danger-solid); color: var(--gh-white); font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .gh-account-notifs { border-block: 1px solid var(--gh-border-subtle); margin-block: 6px; padding-block: 8px; } .gh-account-notifs-head { display: flex; align-items: center; gap: 8px; padding: 4px 10px 6px; font-size: 12px; font-weight: 800; color: var(--gh-text-tertiary); } .gh-account-notifs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; } .gh-account-notifs li { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--gh-r-sm); font-size: 12.5px; color: var(--gh-text-secondary); } .gh-account-notifs li:hover { background: var(--gh-bg-sunken); } .gh-account-notifs li time { font-size: 11px; color: var(--gh-text-tertiary); font-variant-numeric: tabular-nums; } .gh-account-logout { color: var(--gh-danger-text); } .gh-account-logout:hover { background: color-mix(in srgb, var(--gh-danger-text) 10%, transparent); } .gh-account-logout svg { color: inherit; } @media (max-width: 900px) { .gh-account-name { display: none; } .gh-account-panel { inset-inline-end: -8px; } } /* ---------- سبد خرید هدر ---------- */ .gh-cart { position: relative; } .gh-cart-trigger { position: relative; } .gh-cart-badge { position: absolute; top: 2px; inset-inline-end: 2px; } .gh-cart-panel { width: 340px; } .gh-cart-empty { padding: 20px 10px; text-align: center; font-size: 13.5px; color: var(--gh-text-tertiary); margin: 0; } .gh-cart-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; } .gh-cart-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--gh-r-sm); } .gh-cart-item:hover { background: var(--gh-bg-sunken); } .gh-cart-item-img { width: 44px; height: 44px; border-radius: var(--gh-r-sm); overflow: hidden; flex: none; } .gh-cart-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .gh-cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .gh-cart-item-info b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gh-cart-item-info span { font-size: 12px; color: var(--gh-text-tertiary); font-variant-numeric: tabular-nums; } .gh-cart-item-remove { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--gh-text-tertiary); } .gh-cart-item-remove:hover { background: var(--gh-danger-surface); color: var(--gh-danger-text); } .gh-cart-item-remove svg { width: 14px; height: 14px; } .gh-cart-upsell { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; font-weight: 600; line-height: 1.6; background: var(--gh-accent-surface); color: var(--gh-accent-text); border: 1px solid var(--gh-accent-border); border-radius: var(--gh-r-sm); padding: 10px; margin: 10px 0 0; } .gh-cart-upsell svg { width: 15px; height: 15px; flex-shrink: 0; margin-block-start: 1px; } .gh-cart-totals { display: flex; flex-direction: column; gap: 7px; font-size: 13px; border-block-start: 1px dashed var(--gh-border-default); margin-block-start: 10px; padding: 10px 4px; } .gh-cart-row { display: flex; justify-content: space-between; color: var(--gh-text-secondary); } .gh-cart-row b { font-variant-numeric: tabular-nums; } .gh-cart-row.is-discount { color: var(--gh-text-tertiary); } .gh-cart-row.is-discount.is-active { color: var(--gh-success-text); } .gh-cart-row.is-total { font-size: 15px; font-weight: 900; color: var(--gh-text-primary); border-block-start: 1px solid var(--gh-border-default); padding-block-start: 8px; margin-block-start: 2px; } .gh-cart-panel .gh-btn { margin-block-start: 10px; } .gh-ic-sun, .gh-ic-moon { display: none; } .gh-ic-system { display: block; } :root[data-theme="light"] .gh-ic-system, :root[data-theme="dark"] .gh-ic-system { display: none; } :root[data-theme="light"] .gh-ic-sun, :root[data-theme="dark"] .gh-ic-moon { display: block; } .gh-nav-toggle { display: none; } /* ---------- دکمه (کامپوننت مصوب فاز ۴) ---------- */ .gh-btn { font-family: inherit; font-size: 14.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding-inline: 22px; border: none; border-radius: var(--gh-r-md); cursor: pointer; text-decoration: none; white-space: nowrap; /* فهرست صریح به‌جای all — all خواص layout (width/padding/font) را هم متحرک می‌کند و هر تغییر حالت آینده (مثل عوض‌شدن برچسب «✓ کپی شد») را بی‌دلیل کش می‌آورد. */ transition: background-color var(--gh-dur-fast) var(--gh-ease-out), color var(--gh-dur-fast) var(--gh-ease-out), border-color var(--gh-dur-fast) var(--gh-ease-out), box-shadow var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out), opacity var(--gh-dur-fast) var(--gh-ease-out); } .gh-btn svg { width: 16px; height: 16px; } /* * قرارداد سراسری آیکون کنترل‌ها: * بعضی موتورهای رندر، مخصوصاً وقتی دکمه‌ی فقط‌آیکون داخل form فلکس قرار می‌گیرد، * اندازه‌ی SVG را نگه می‌دارند اما currentColor را به stroke/fill ارائه‌شده روی خود SVG * منتقل نمی‌کنند؛ نتیجه یک قاب خالی است. اندازه، نمایش و رنگ در این سطح تثبیت می‌شود تا * تمام دکمه‌های آیکونی (هدر، کارت، داشبورد، مودال و فرم‌ها) از یک منبع حقیقت پیروی کنند. */ :where(.gh-btn, .gh-icon-btn, .gh-bookmark-btn) > svg { display: block; flex: 0 0 auto; min-width: 1em; min-height: 1em; overflow: visible; color: inherit; } :where(.gh-btn, .gh-icon-btn, .gh-bookmark-btn) > svg[stroke="currentColor"] { stroke: currentColor; } :where(.gh-btn, .gh-icon-btn, .gh-bookmark-btn) > svg[fill="currentColor"] { fill: currentColor; } .gh-btn-sm { height: 36px; padding-inline: 16px; font-size: 13px; } .gh-btn-lg { height: 52px; padding-inline: 28px; font-size: 16px; } .gh-btn-primary { background: var(--gh-accent-solid); color: var(--gh-accent-on-solid); } .gh-btn-primary:hover { background: var(--gh-accent-hover); transform: translateY(-1px); } .gh-btn-secondary { background: var(--gh-bg-surface); color: var(--gh-text-primary); border: 1px solid var(--gh-border-strong); } .gh-btn-secondary:hover { border-color: var(--gh-text-tertiary); } .gh-btn-ghost { background: transparent; color: var(--gh-accent-text); } .gh-btn-ghost:hover { background: var(--gh-accent-surface); } /* بازخورد فشردن — لمس/کلیک باید حس تعامل واقعی بدهد، جدا از هاور (اصل Interaction Feedback). زمان‌بندی نامتقارن: فرورفتن با نصف dur-fast (فوری، هم‌زمان با انگشت)، برگشتن با dur-fast کامل — عدد از خود توکن مشتق شده، نه مقدار سوم دلبخواه. */ .gh-btn:active:not(:disabled) { transform: scale(.97); transition-duration: calc(var(--gh-dur-fast) / 2); } .gh-icon-btn:active { transform: scale(.94); transition-duration: calc(var(--gh-dur-fast) / 2); } .gh-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; } /* حلقه‌ی فوکوس هم‌شکل با شعاع خودِ کامپوننت — فال‌بک سراسری r-xs روی دکمه/چیپ/پیل گرد نامناسب است */ .gh-btn:focus-visible { border-radius: var(--gh-r-md); } .gh-btn-danger { color: var(--gh-danger-text); border-color: color-mix(in srgb, var(--gh-danger-text) 35%, transparent); } .gh-btn-danger:hover { background: var(--gh-danger-surface); border-color: var(--gh-danger-text); } .gh-btn-group { display: flex; flex-wrap: wrap; gap: 10px; } .gh-btn-group .gh-btn { flex: 1 1 max-content; } /* ---------- کارت ---------- */ .gh-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .gh-card { position: relative; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-radius-card); overflow: hidden; transition: transform var(--gh-dur-base) var(--gh-ease-out), box-shadow var(--gh-dur-base) var(--gh-ease-out); } .gh-card:hover, .gh-card:focus-within { transform: translateY(-4px); box-shadow: var(--gh-shadow-2); } .gh-card-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; } .gh-card-cover img { width: 100%; height: 100%; object-fit: cover; } .gh-card-cover.is-gradient { display: grid; place-items: center; } .gh-card-cover.is-gradient svg { width: 44px; height: 44px; color: color-mix(in srgb, var(--gh-white) 85%, transparent); } .gh-card-body { padding: 20px; } .gh-card-title { font-size: 16.5px; font-weight: 800; margin: 0; line-height: 1.5; } .gh-card-title a { color: inherit; text-decoration: none; } .gh-card-excerpt { font-size: 13.5px; color: var(--gh-text-secondary); margin: 0; } .gh-card-course .gh-course-tag + .gh-card-title, .gh-card-course .gh-course-card-identity + .gh-card-title { margin-block-start: 12px; } .gh-card-course .gh-card-title + .gh-course-meta { margin-block-start: 10px; } /* ---------- فوتر ---------- */ .gh-footer { border-block-start: 1px solid var(--gh-border-subtle); background: var(--gh-bg-surface); margin-block-start: 64px; } .gh-footer-sitemap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-block: 44px; } .gh-footer-about { font-size: 13.5px; color: var(--gh-text-tertiary); max-width: 300px; margin-block-start: 10px; } .gh-footer-about-link { display: inline-flex; align-items: center; gap: 5px; margin-block-start: 10px; font-size: 12.5px; font-weight: 700; color: var(--gh-accent-text); text-decoration: none; } .gh-footer-about-link svg { width: 13px; height: 13px; } .gh-footer-about-link:hover { text-decoration: underline; } .gh-footer-col h3 { font-size: 13px; font-weight: 800; margin: 0 0 14px; color: var(--gh-text-primary); } .gh-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .gh-footer-col a { font-size: 13.5px; color: var(--gh-text-secondary); text-decoration: none; } .gh-footer-col a:hover { color: var(--gh-accent-text); } .gh-footer-bar { border-block-start: 1px solid var(--gh-border-subtle); padding-block: 18px; font-size: 12.5px; color: var(--gh-text-tertiary); } @media (max-width: 760px) { .gh-footer-sitemap { grid-template-columns: repeat(2, 1fr); } } /* ---------- شبکه‌های اجتماعی رسمی فوتر ---------- */ /* دایره‌ی خنثی که با هاور رنگ برند همان شبکه را می‌گیرد (--gh-brand اینلاین از PHP) + کمی بالا می‌رود. از آیکون کوچک پروفایل دانشجو (.gh-social-ic) جدا و بزرگ‌تر است چون این‌جا کانال رسمی برند است. */ .gh-footer-social { display: flex; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0; } .gh-footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--gh-bg-sunken); border: 1px solid var(--gh-border-default); color: var(--gh-text-secondary); transition: all var(--gh-dur-fast) var(--gh-ease-out); } .gh-footer-social a svg { width: 18px; height: 18px; } .gh-footer-social a:hover { background: var(--gh-brand); border-color: var(--gh-brand); color: var(--gh-white); transform: translateY(-3px); box-shadow: 0 8px 16px color-mix(in srgb, var(--gh-brand) 35%, transparent); } /* ---------- نمادهای اعتماد (اینماد/زرین‌پال و مشابه) ---------- */ /* اندازه‌ی نمایش همیشه استاندارد و کوچک است، صرف‌نظر از ابعاد واقعی تصویر ارائه‌دهنده. */ .gh-footer-trust { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; padding-block: 20px; border-block-start: 1px dashed var(--gh-border-subtle); } .gh-trust-badges { display: contents; } .gh-trust-badge { display: inline-flex; opacity: .85; transition: opacity var(--gh-dur-fast) var(--gh-ease-out); } .gh-trust-badge:hover { opacity: 1; } .gh-trust-badge img { display: block; height: 52px; width: auto; max-width: 110px; object-fit: contain; } /* نمادهای رسمی معمولاً روی زمینه‌ی سفید طراحی شده‌اند — در تم تاریک یک زمینه‌ی روشن پشتشان می‌ماند تا خوانا بمانند */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gh-trust-badge img { background: var(--gh-white); border-radius: var(--gh-r-sm); padding: 4px 8px; } } :root[data-theme="dark"] .gh-trust-badge img { background: var(--gh-white); border-radius: var(--gh-r-sm); padding: 4px 8px; } /* ---------- فرم جست‌وجو (search.php / 404.php) ---------- */ .gh-search-form { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--gh-border-default); border-radius: var(--gh-r-full); background: var(--gh-bg-surface); padding-inline-start: 20px; padding-inline-end: 7px; height: 58px; } .gh-search-form:focus-within { border-color: var(--gh-accent-solid); box-shadow: var(--gh-focus-ring); } .gh-search-form svg { width: 17px; height: 17px; color: var(--gh-text-tertiary); flex-shrink: 0; } .gh-search-form input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 16px; color: var(--gh-text-primary); outline: none; } .gh-search-form input::-webkit-search-cancel-button { display: none; } /* دکمه‌ی ارسال — همرنگ دکمه‌های شیشه‌ای هدر (سرچ/تم): بی‌رنگ تا هاور، نه دکمه‌ی برند */ .gh-search-form .gh-btn-round { width: 44px; height: 44px; flex: none; background: transparent; color: var(--gh-text-secondary); transition: all var(--gh-dur-fast) var(--gh-ease-out); } .gh-search-form .gh-btn-round:hover { background: var(--gh-bg-sunken); color: var(--gh-text-primary); transform: none; } .gh-search-form .gh-btn-round svg { width: 19px; height: 19px; } /* ---------- حالت خالی و صفحه‌بندی ---------- */ .gh-empty { text-align: center; padding: 64px 24px; } .gh-pagination { margin-block-start: 36px; } .gh-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-sm); background: var(--gh-bg-surface); color: var(--gh-text-secondary); font-weight: 700; font-size: 13.5px; text-decoration: none; margin-inline-end: 6px; font-variant-numeric: tabular-nums; transition: background-color var(--gh-dur-fast) var(--gh-ease-out), color var(--gh-dur-fast) var(--gh-ease-out), border-color var(--gh-dur-fast) var(--gh-ease-out); } .gh-pagination a.page-numbers:hover { background: var(--gh-bg-sunken); border-color: var(--gh-border-strong); color: var(--gh-text-primary); } .gh-pagination .page-numbers.current { background: var(--gh-accent-solid); border-color: var(--gh-accent-solid); color: var(--gh-accent-on-solid); } /* ---------- موبایل ---------- */ .gh-nav-close { display: none; } .gh-nav-backdrop { display: none; } .gh-nav-foot { display: none; } @media (max-width: 900px) { /* * منوی موبایل یک لایه‌ی تمام‌صفحه‌ی واقعی است. 100dvh به‌جای bottom:0 باعث می‌شود * با باز/بسته‌شدن نوار آدرس موبایل هم ارتفاع دقیق viewport حفظ شود. */ .gh-nav { position: fixed; inset: 0; z-index: 120; width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; display: flex; flex-direction: column; background: var(--gh-bg-page); padding: max(64px, calc(env(safe-area-inset-top) + 56px)) max(20px, env(safe-area-inset-right)) max(24px, calc(env(safe-area-inset-bottom) + 16px)) max(20px, env(safe-area-inset-left)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 0; box-shadow: none; transform: translateX(100%); visibility: hidden; transition: transform var(--gh-dur-base) var(--gh-ease-out), visibility var(--gh-dur-base); } .gh-nav.open { transform: none; visibility: visible; } /* میان‌برهای پایین سایدبار — تمام‌عرض، چسبیده به کف */ .gh-nav-foot { display: flex; flex-direction: column; gap: 10px; margin-block-start: auto; padding-block-start: 20px; border-block-start: 1px dashed var(--gh-border-default); } .gh-nav-foot .gh-btn { width: 100%; justify-content: flex-start; } .gh-nav-foot .gh-btn .gh-count-badge { margin-inline-start: auto; } .gh-nav-foot-row { display: flex; gap: 10px; } .gh-nav-foot-row .gh-btn-primary { flex: 1; } .gh-nav-foot-row .gh-btn-icon { width: 44px; flex: none; justify-content: center; } .gh-nav-close { display: grid; place-items: center; position: absolute; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--gh-bg-sunken); color: var(--gh-text-secondary); cursor: pointer; } .gh-nav-close svg { width: 17px; height: 17px; } .gh-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 119; background: color-mix(in srgb, var(--gh-stone-950) 50%, transparent); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--gh-dur-base) var(--gh-ease-out); } .gh-nav-backdrop.open { opacity: 1; pointer-events: auto; } .gh-menu { flex-direction: column; gap: 4px; } .gh-menu li { width: 100%; } .gh-menu a { display: flex; width: 100%; font-size: 16px; padding: 13px 16px; border-radius: var(--gh-r-md); } .gh-menu a svg { width: 19px; height: 19px; } .gh-menu .sub-menu { display: block; position: static; box-shadow: none; border: none; background: transparent; padding-inline-start: 16px; } /* چیدمان هدر: آیکون منو سمت راست، بقیه‌ی دکمه‌ها سمت چپ */ .gh-nav-toggle { display: grid; order: -2; } .gh-logo { order: -1; } .gh-header-inner { gap: 12px; } .gh-header-actions { margin-inline-start: auto; gap: 5px; } /* پیل حساب کاربری: بدون نام، کاملاً دایره */ .gh-account-trigger { padding: 5px; border-radius: 50%; } /* سبد و حساب نیز مثل منو لایه‌ی تمام‌صفحه‌اند؛ فقط محتوای داخل پنل اسکرول می‌خورد. */ .gh-account-panel { position: fixed; inset: 0; z-index: 130; width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; padding: 0; overflow: hidden; transform: translateX(-100%); visibility: hidden; transition: transform var(--gh-dur-base) var(--gh-ease-out), visibility var(--gh-dur-base); } .gh-account.is-open .gh-account-panel, .gh-cart.is-open .gh-cart-panel { transform: none; visibility: visible; } .gh-account-panel-inner { width: 100%; height: 100%; max-height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: none; border-radius: 0; box-shadow: none; padding: max(64px, calc(env(safe-area-inset-top) + 56px)) max(16px, env(safe-area-inset-right)) max(20px, calc(env(safe-area-inset-bottom) + 16px)) max(16px, env(safe-area-inset-left)); } .gh-panel-close { display: grid !important; place-items: center; position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline-end: max(14px, env(safe-area-inset-right)); z-index: 2; width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--gh-bg-sunken); color: var(--gh-text-secondary); cursor: pointer; } .gh-panel-close svg { width: 17px; height: 17px; } } /* دکمه‌ی بستن پنل فقط در موبایل دیده می‌شود (قانون موبایل بالا با !important غالب است) */ .gh-panel-close { display: none; } /* قفل اسکرول صفحه‌ی پشت منو/سبد/حساب؛ اسکرول فقط داخل همان لایه انجام می‌شود. */ html.gh-mobile-overlay-open, html.gh-mobile-overlay-open body { overflow: hidden !important; overscroll-behavior: none; } /* ---------- نوبار پایین موبایل (پیل شناور مصوب پروتوتایپ) ---------- */ .gh-bottom-nav { display: none; } @media (max-width: 900px) { .gh-bottom-nav { display: flex; position: fixed; bottom: 12px; inset-inline: 12px; z-index: 95; width: auto; overflow: hidden; background: color-mix(in srgb, var(--gh-bg-raised) 94%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); padding: 8px; box-shadow: var(--gh-shadow-3); } .gh-bottom-nav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--gh-text-tertiary); text-decoration: none; padding: 8px 0; border-radius: var(--gh-r-md); } .gh-bottom-nav a svg { width: 22px; height: 22px; } .gh-bottom-nav a.on { color: var(--gh-accent-text); background: var(--gh-accent-surface); } /* جا برای نوبار پایین؛ در صفحه‌ی دوره نوار خرید اولویت دارد و نوبار پنهان می‌شود */ .gh-footer { padding-block-end: 84px; } .single-gh_course .gh-bottom-nav { display: none; } } @media (prefers-reduced-motion: reduce) { /* iteration-count هم لازم است: انیمیشن بی‌نهایت (تایپینگ چت، لودر جست‌وجو) با duration صفر به حلقه‌ی چشمک‌زن تبدیل می‌شود، نه سکون — قاعده‌ی «بدون استثنا»ی Motion Principles. */ *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ---------- صفحات فونت ---------- */ .gh-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; margin-block-end: 20px; } .gh-crumb a { color: var(--gh-text-tertiary); text-decoration: none; } .gh-crumb a:hover { color: var(--gh-accent-text); } .gh-crumb span { color: var(--gh-border-strong); } .gh-crumb strong { color: var(--gh-text-primary); font-weight: 700; } .gh-font-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; } .gh-font-title { font-size: clamp(26px, 4vw, 36px); font-weight: 900; margin: 0; } .gh-font-en { font-size: 14px; color: var(--gh-text-tertiary); direction: ltr; unicode-bidi: isolate; display: inline-block; margin-block: 4px 8px; } .gh-font-cats a { display: inline-flex; font-size: 12px; font-weight: 700; text-decoration: none; background: var(--gh-accent-surface); color: var(--gh-accent-text); border: 1px solid var(--gh-accent-border); border-radius: var(--gh-r-full); padding: 4px 12px; margin-inline-end: 6px; } .gh-font-preview { margin: 24px 0; border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-lg); overflow: hidden; } .gh-font-content { font-size: 15.5px; line-height: 2.1; color: var(--gh-text-secondary); max-width: 680px; } .gh-font-side { position: sticky; top: var(--gh-sticky-offset); } .gh-font-card { background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); padding: 22px; display: flex; flex-direction: column; gap: 14px; } .gh-font-dl { width: 100%; } .gh-font-commercial { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .gh-badge-commercial { background: var(--gh-warning-surface); color: var(--gh-warning-text); border: 1px solid color-mix(in srgb, var(--gh-warning-text) 30%, transparent); display: inline-flex; align-items: center; gap: 6px; } .gh-font-dlcount { margin: 0; text-align: center; font-size: 12.5px; color: var(--gh-text-tertiary); } .gh-font-specs { margin: 0; border-block-start: 1px dashed var(--gh-border-default); padding-block-start: 14px; display: flex; flex-direction: column; gap: 10px; } .gh-font-specs div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; } .gh-font-specs dt { color: var(--gh-text-tertiary); } .gh-font-specs dd { margin: 0; font-weight: 700; text-align: end; } .gh-font-related { margin-block-start: 56px; } .gh-font-related h2 { font-size: 22px; font-weight: 800; margin-block-end: 20px; } /* ---------- آزمایشگاه فونت (آرشیو + تک‌فونت) ---------- */ .gh-font-lab { background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); padding: 24px 26px; margin-block: 32px; box-shadow: var(--gh-shadow-1); } .gh-font-lab-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 18px; } .gh-font-lab-head h2 { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; margin: 0; } .gh-font-lab-head h2 svg { width: 19px; height: 19px; color: var(--gh-accent-text); } .gh-font-lab-pick { min-width: 220px; } .gh-font-lab-pick select { width: 100%; height: 42px; border-radius: var(--gh-r-sm); border: 1.5px solid var(--gh-border-default); background: var(--gh-bg-surface); color: var(--gh-text-primary); font: inherit; font-size: 13.5px; padding-inline: 12px; } .gh-font-lab-controls { display: flex; flex-direction: column; gap: 12px; margin-block-end: 20px; } .gh-font-lab-text input { width: 100%; height: 46px; border-radius: var(--gh-r-sm); border: 1.5px solid var(--gh-border-default); background: var(--gh-bg-surface); color: var(--gh-text-primary); font: inherit; font-size: 14px; padding-inline: 14px; } .gh-font-lab-text input:focus, .gh-font-lab-pick select:focus, .gh-font-lab-row select:focus { outline: none; border-color: var(--gh-accent-solid); box-shadow: var(--gh-focus-ring); } .gh-font-lab-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .gh-font-lab-row > .gh-field { flex: 1; min-width: 140px; } .gh-font-lab-row select { width: 100%; height: 42px; border-radius: var(--gh-r-sm); border: 1.5px solid var(--gh-border-default); background: var(--gh-bg-surface); color: var(--gh-text-primary); font: inherit; font-size: 13.5px; padding-inline: 12px; } .gh-font-lab-size { flex: 2; min-width: 200px; } .gh-font-lab-size label b { color: var(--gh-accent-text); font-variant-numeric: tabular-nums; } .gh-font-lab-size input[type="range"] { width: 100%; accent-color: var(--gh-accent-solid); height: 42px; } .gh-font-lab-dir { display: flex; gap: 6px; flex: none; } .gh-font-lab-dir .gh-chip { cursor: pointer; border: 1px solid var(--gh-border-default); background: var(--gh-bg-surface); } .gh-font-lab-dir .gh-chip.is-on { background: var(--gh-accent-surface); border-color: var(--gh-accent-border); color: var(--gh-accent-text); font-weight: 800; } .gh-font-lab-stage { background: var(--gh-bg-sunken); border: 1px dashed var(--gh-border-strong); border-radius: var(--gh-r-lg); padding: 40px 28px; min-height: 140px; display: flex; align-items: center; justify-content: center; overflow-x: auto; } .gh-font-lab-preview { margin: 0; text-align: center; line-height: 1.4; color: var(--gh-text-primary); text-wrap: balance; word-break: break-word; } .gh-font-lab-unavailable { margin: 0; font-size: 13.5px; color: var(--gh-text-tertiary); text-align: center; } @media (max-width: 640px) { .gh-font-lab-row { flex-direction: column; align-items: stretch; } .gh-font-lab-dir { align-self: stretch; } .gh-font-lab-dir .gh-chip { flex: 1; text-align: center; justify-content: center; } } .gh-card-cover-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-size: 64px; font-weight: 900; color: var(--gh-accent-text); background: linear-gradient(135deg, var(--gh-accent-surface), var(--gh-bg-raised)); } .gh-font-specimen { display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: 300px; padding: clamp(22px, 5vw, 48px); color: var(--gh-text-primary); background: linear-gradient(145deg, var(--gh-accent-surface), var(--gh-bg-raised) 62%); position: relative; overflow: hidden; } .gh-font-specimen::after { content: "نقطه"; position: absolute; inset-inline-end: -12px; inset-block-end: -42px; font-size: 110px; font-weight: 900; opacity: .055; } .gh-font-specimen--2 { background: linear-gradient(145deg, var(--gh-info-surface), var(--gh-bg-raised) 65%); } .gh-font-specimen--3 { background: linear-gradient(145deg, var(--gh-success-surface), var(--gh-bg-raised) 65%); } .gh-font-specimen--4 { background: linear-gradient(145deg, var(--gh-warning-surface), var(--gh-bg-raised) 65%); } .gh-font-specimen-kicker { font-size: 11px; font-weight: 800; color: var(--gh-text-tertiary); letter-spacing: .04em; } .gh-font-specimen strong { font-size: clamp(36px, 7vw, 72px); line-height: 1.2; letter-spacing: -.04em; z-index: 1; } .gh-font-specimen-name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 800; z-index: 1; } .gh-font-specimen-name small { color: var(--gh-text-tertiary); font-size: 11px; font-weight: 600; } .gh-font-specimen.is-compact { min-height: 100%; padding: 18px; } .gh-font-specimen.is-compact::after { font-size: 70px; inset-block-end: -28px; } .gh-font-specimen.is-compact strong { font-size: clamp(28px, 4vw, 42px); } /* ---------- کارت نمونه‌کار — فقط تصویر؛ اطلاعات با هاور از پایین ظاهر می‌شود (کارت مصوب v1.1) ---------- */ .gh-pf-card { position: relative; display: block; text-decoration: none; color: inherit; border-radius: var(--gh-r-lg); overflow: hidden; border: 1px solid var(--gh-border-default); box-shadow: var(--gh-shadow-1); transition: transform var(--gh-dur-base) var(--gh-ease-out), box-shadow var(--gh-dur-base) var(--gh-ease-out); } .gh-pf-card:hover { transform: translateY(-4px); box-shadow: var(--gh-shadow-2); } .gh-pf-cover { height: 300px; position: relative; overflow: hidden; display: grid; place-items: center; } .gh-pf-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gh-pf-cover > svg { width: 44px; height: 44px; color: color-mix(in srgb, var(--gh-white) 80%, transparent); transition: transform var(--gh-dur-slow) var(--gh-ease-out), opacity var(--gh-dur-base) var(--gh-ease-out); } .gh-pf-card:hover .gh-pf-cover > svg { transform: scale(1.08); } .gh-pf-card:hover .gh-pf-cover > svg, .gh-pf-card:focus-within .gh-pf-cover > svg { opacity: 0; } /* اورلی v1.2 — سلسله‌مراتب: عنوان درشت ← ردیف سازنده با جداکننده ← چیپ‌های شیشه‌ای؛ ظهور پلکانی */ .gh-pf-overlay { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--gh-stone-950) 92%, transparent) 0%, color-mix(in srgb, var(--gh-stone-950) 45%, transparent) 52%, transparent 78%); opacity: 0; transition: opacity var(--gh-dur-base) var(--gh-ease-out); display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; gap: 9px; } .gh-pf-card:hover .gh-pf-overlay, .gh-pf-card:focus-within .gh-pf-overlay { opacity: 1; } .gh-pf-overlay h4 { order: 3; color: var(--gh-white); font-size: 17px; font-weight: 800; margin: 2px 0 0; letter-spacing: -.01em; text-wrap: balance; transform: translateY(8px); transition: transform var(--gh-dur-base) var(--gh-ease-out); } .gh-pf-overlay .gh-person { order: 1; } .gh-pf-overlay .gh-pf-meta { order: 2; } .gh-pf-overlay .gh-person, .gh-pf-overlay .gh-pf-meta { transform: translateY(8px); transition: transform var(--gh-dur-base) var(--gh-ease-out); } /* ظهور پلکانی — عنوان، بعد سازنده، بعد چیپ‌ها (حس ارکستره، فقط transform) */ .gh-pf-overlay .gh-person { transition-delay: 40ms; } .gh-pf-overlay .gh-pf-meta { transition-delay: 80ms; } .gh-pf-card:hover .gh-pf-overlay h4, .gh-pf-card:hover .gh-pf-overlay .gh-person, .gh-pf-card:hover .gh-pf-overlay .gh-pf-meta, .gh-pf-card:focus-within .gh-pf-overlay h4, .gh-pf-card:focus-within .gh-pf-overlay .gh-person, .gh-pf-card:focus-within .gh-pf-overlay .gh-pf-meta { transform: none; } .gh-pf-overlay .gh-person { gap: 10px; padding-block-start: 10px; border-block-start: 1px solid color-mix(in srgb, var(--gh-white) 14%, transparent); } .gh-pf-overlay .gh-person .gh-avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gh-white) 35%, transparent); } .gh-pf-overlay .gh-person b { color: var(--gh-white); } .gh-pf-overlay .gh-person span span { color: color-mix(in srgb, var(--gh-white) 75%, transparent); } .gh-pf-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* چیپ دوره و پسندها روی اورلی — شیشه‌ای سفید، مستقل از تم (روی عکس همیشه خواناست) */ .gh-pf-overlay .gh-course-tag { background: color-mix(in srgb, var(--gh-white) 14%, transparent); color: var(--gh-white); border-color: color-mix(in srgb, var(--gh-white) 25%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .gh-pf-overlay .gh-pf-likes { background: color-mix(in srgb, var(--gh-white) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gh-white) 22%, transparent); border-radius: var(--gh-r-full); padding: 4px 11px; color: var(--gh-white); font-weight: 700; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .gh-pf-like-count { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; z-index: 3; height: 40px; min-width: 62px; justify-content: center; gap: 6px; padding-inline: 11px; margin: 0; border: 1px solid color-mix(in srgb, var(--gh-white) 28%, transparent); border-radius: var(--gh-r-full); background: color-mix(in srgb, var(--gh-stone-950) 58%, transparent); color: var(--gh-white); box-shadow: var(--gh-shadow-1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 1; transform: none; pointer-events: none; transition: background-color var(--gh-dur-fast) var(--gh-ease-out), border-color var(--gh-dur-fast) var(--gh-ease-out); } .gh-pf-like-count svg { width: 17px; height: 17px; color: currentColor; } .gh-pf-card:hover .gh-pf-like-count, .gh-pf-card:focus-within .gh-pf-like-count { background: color-mix(in srgb, var(--gh-stone-950) 76%, transparent); border-color: color-mix(in srgb, var(--gh-white) 42%, transparent); } /* اکشن‌های کارت نمونه‌کار: یک نوار شیشه‌ای واحد، بدون دکمه یا پنل تکراری. */ .gh-pfc-actions { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; } .gh-pfc-actions .gh-btn-icon { height: 38px; width: 38px; min-height: 0; padding: 0; border-radius: var(--gh-r-sm); border: none; flex: none; background: transparent; color: var(--gh-text-primary); box-shadow: none; } .gh-pfc-actions .gh-btn-icon svg { display: block; width: 18px; height: 18px; stroke: currentColor; } .gh-pfc-actions .gh-btn-icon:hover { background: var(--gh-bg-sunken); color: var(--gh-accent-text); } .gh-pfc-actions .gh-btn-icon:focus-visible { border-radius: var(--gh-r-sm); } .gh-pfc-actions .gh-btn-icon.is-on { color: var(--gh-accent-solid); } .gh-pfc-more { display: none; } .gh-pfc-actions-list { display: flex; align-items: center; gap: 2px; padding: 5px; border: 1px solid color-mix(in srgb, var(--gh-white) 55%, transparent); border-radius: var(--gh-r-md); background: color-mix(in srgb, var(--gh-bg-surface) 92%, transparent); box-shadow: var(--gh-shadow-2); backdrop-filter: blur(12px); pointer-events: none; opacity: 0; transform: translateY(-5px) scale(.96); transition: opacity var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out); } .gh-pf-card:hover .gh-pfc-actions-list, .gh-pf-card:focus-within .gh-pfc-actions-list { opacity: 1; transform: none; pointer-events: auto; } .gh-pf-likes { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: color-mix(in srgb, var(--gh-white) 85%, transparent); margin-inline-start: auto; } .gh-pf-likes svg { width: 15px; height: 15px; } @media (hover: none) { .gh-pf-overlay { opacity: 1; background: linear-gradient(to top, color-mix(in srgb, var(--gh-stone-950) 82%, transparent) 0%, transparent 55%); } .gh-pf-overlay h4, .gh-pf-overlay .gh-person, .gh-pf-overlay .gh-pf-meta { transform: none; } .gh-pfc-actions-list { opacity: 1; transform: none; pointer-events: auto; } .gh-pf-like-count { opacity: 1; transform: none; } } .gh-share { position: relative; } /* همان الگوی پنل‌ها (translate + opacity + مهلت visibility) — فاصله‌ی تریگر↔پنل از قبل با padding خود پنل است. */ .gh-share-menu { position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: 3; padding-block-start: 8px; opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out), visibility 0s linear var(--gh-dur-fast); } .gh-share:hover .gh-share-menu, .gh-share:focus-within .gh-share-menu { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; } /* این چیپ روی عکس نمونه‌کار می‌نشیند، نه زمینه‌ی سایت — عمداً همیشه روشن (bg-sunken تم‌محور اینجا در دارک‌مود ناهماهنگ می‌شد؛ ⚠️ درس آموخته TOK-01). */ .gh-share-menu-inner { display: flex; gap: 4px; background: var(--gh-white); border-radius: var(--gh-r-md); padding: 5px; box-shadow: var(--gh-shadow-3); } /* آیکون‌ها هم‌رنگ برند (نارنجی) — چون خودِ جعبه همیشه سفید ثابت می‌ماند (بالا)، اینجا هم عمداً مقدار ثابت رنگ روشن برند به‌کار رفته نه توکن تم‌محور، وگرنه در دارک‌مود روی همین سفید ثابت کم‌کنتراست می‌شد. */ .gh-share-menu-inner button, .gh-share-menu-inner a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--gh-r-sm); color: var(--gh-accent-text); border: none; background: transparent; cursor: pointer; text-decoration: none; transition: background var(--gh-dur-fast) var(--gh-ease-out); } .gh-share-menu-inner button:hover, .gh-share-menu-inner a:hover { background: var(--gh-accent-surface); } .gh-share-menu-inner svg { width: 17px; height: 17px; } /* ---------- نوتیس‌های ووکامرس ---------- */ .gh-wc-notices { padding-block-start: 18px; } .gh-wc-notices .woocommerce-info, .gh-wc-notices .woocommerce-message, .gh-wc-notices .woocommerce-error li { display: flex; align-items: center; gap: 8px; text-align: start; background: var(--gh-accent-surface); color: var(--gh-accent-text); border: 1px solid var(--gh-accent-border); border-radius: var(--gh-r-md); padding: 12px 16px; font-size: 13.5px; font-weight: 600; list-style: none; margin: 0 0 8px; transition: opacity var(--gh-dur-base) var(--gh-ease-out), transform var(--gh-dur-base) var(--gh-ease-out); } /* آیکون پیش‌فرض ووکامرس حذف — آیکون SVG خودمان با JS اضافه می‌شود تا روی متن نیفتد */ .gh-wc-notices .woocommerce-info::before, .gh-wc-notices .woocommerce-message::before, .gh-wc-notices .woocommerce-error li::before { content: none !important; display: none !important; } .gh-wc-notices .is-hide { opacity: 0; transform: translateY(-6px); } .gh-wc-notices .is-danger, .gh-wc-notices .woocommerce-error li { background: var(--gh-danger-surface); color: var(--gh-danger-text); border-color: color-mix(in srgb, var(--gh-danger-text) 30%, transparent); } .gh-notice-ic { display: inline-grid; place-items: center; flex: none; } .gh-notice-ic svg { width: 18px; height: 18px; } .gh-notice-close { margin-inline-start: auto; flex: none; display: grid; place-items: center; width: 28px; height: 28px; background: transparent; border: none; border-radius: var(--gh-r-xs); color: inherit; cursor: pointer; opacity: .65; transition: all var(--gh-dur-fast) var(--gh-ease-out); } .gh-notice-close:hover { opacity: 1; background: color-mix(in srgb, var(--gh-black) 6%, transparent); } .gh-notice-close svg { width: 15px; height: 15px; } .gh-wc-notices .woocommerce-error { list-style: none; margin: 0; padding: 0; } .gh-wc-notices a { color: inherit; font-weight: 800; } /* ---------- نوتیف پایین صفحه (toast) ---------- */ .gh-toast { position: fixed; inset-block-end: 24px; left: 50%; transform: translate(-50%, 12px); background: var(--gh-stone-900); color: var(--gh-white); font-size: 13.5px; font-weight: 600; padding: 12px 20px; border-radius: var(--gh-r-full); box-shadow: var(--gh-shadow-3); z-index: 1000; opacity: 0; transition: opacity var(--gh-dur-base) var(--gh-ease-out), transform var(--gh-dur-base) var(--gh-ease-out); cursor: pointer; /* قاعده‌ی UX توست‌ها: هاور تایمر را نگه می‌دارد و کلیک/تپ همان دکمه‌ی بستن است (app.js) */ } .gh-toast.is-in { opacity: 1; transform: translate(-50%, 0); } .gh-card-font .gh-card-cover { aspect-ratio: 16 / 10; background: var(--gh-bg-sunken); } .gh-font-meta { display: flex; align-items: center; gap: 10px; min-width: 0; margin-block-start: 8px; } .gh-font-meta .gh-badge { display: block; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gh-badge { /* align-items + gap: آیکون داخل بدج (مثل «خرید تأییدشده») با متن هم‌راستا باشد، نه بالاتر */ display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; background: var(--gh-success-surface); color: var(--gh-success-text); border: 1px solid color-mix(in srgb, var(--gh-success-text) 25%, transparent); border-radius: var(--gh-r-full); padding: 4px 10px; } .gh-badge svg { flex: none; } .gh-font-weights { flex: none; font-size: 12px; color: var(--gh-text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; } /* قانون سراسری تگ‌ها: هیچ برچسب مفهومی دوخطی نمی‌شود. اگر فضای میزبان کم باشد، متن بریده می‌شود و app.js متن کامل را فقط هنگام هاور/فوکوس در tooltip نشان می‌دهد. */ :where( .gh-badge, .gh-chip, .gh-course-tag, .gh-curio-tag, .gh-qb-chip, .gh-review-kind, .gh-badge-sale, .gh-font-weights, .gh-search-chip, .gh-type-badge, .gh-pf-cover-badge, .gh-chip-check > span ) { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gh-overflow-tooltip { position: fixed; z-index: 1400; inset: auto; max-width: min(320px, calc(100vw - 24px)); padding: 7px 11px; border-radius: var(--gh-r-sm); background: var(--gh-stone-900); color: var(--gh-white); box-shadow: var(--gh-shadow-2); font-size: 11.5px; font-weight: 700; line-height: 1.65; text-align: center; white-space: normal; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out); } .gh-overflow-tooltip.is-visible { opacity: 1; transform: none; } .gh-archive-head { width: 100%; max-width: none; margin-block-end: 24px; text-align: start; } .gh-archive-head h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 900; } .gh-archive-head p { color: var(--gh-text-secondary); font-size: 15px; } /* سربرگ مشترک صفحات «ابزارها» (فونت‌ها، پالت رنگ). */ .gh-tools-hero .gh-archive-head { width: 100%; max-width: none; margin-inline: 0; margin-block-end: 24px; text-align: start; } .gh-tools-hero .gh-archive-head p { margin-inline: 0 auto; } .gh-chipbar { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 28px; } /* ---------- اسلایدر صفحه اصلی (اسکرول‌اسنپ، بدون کتابخانه) ---------- */ .gh-sec-tools { display: flex; align-items: center; gap: 10px; } .gh-slider-arrows { display: flex; gap: 4px; } .gh-slider-arrows .gh-icon-btn { border: 1px solid var(--gh-border-default); border-radius: 50%; width: 36px; height: 36px; } .gh-slider-arrows .gh-icon-btn:disabled { opacity: .35; cursor: default; background: transparent; } /* علت واقعی بریدگی سایه‌ی هاور: overflow-x:auto طبق مشخصات CSS باعث می‌شود overflow-y هم به auto محاسبه شود (نمی‌شود فقط یک محور را اسکرول‌پذیر کرد)، پس ناحیه‌ی کلیپ روی هر دو محور فعال است و سایه‌ی سطح ۲ (--gh-shadow-2: 0 10px 24px) + بلندشدن hover (translateY(-4px)) بیرون از باکس پدینگ بریده می‌شوند. راه‌حل اصولی: ناحیه‌ی کلیپ در لبه‌ی پدینگ است نه مرز — پس padding-block به‌اندازه‌ی بیشینه‌ی سایه بزرگ می‌شود و margin-block منفی هم‌اندازه آن را خنثی می‌کند تا فاصله‌ی واقعی نسبت به بخش‌های بالا/پایین تغییری نکند؛ فقط ناحیه‌ی کلیپ داخلی جادار می‌شود. */ .gh-slider-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-block: 22px 34px; margin-block: -22px -34px; margin-inline: -4px; padding-inline: 4px; } .gh-slider-track::-webkit-scrollbar { display: none; } .gh-slide { flex: 0 0 auto; scroll-snap-align: start; width: 300px; } .gh-slide-project { width: 280px; } .gh-slide-review { width: 330px; display: flex; } .gh-slide-review .gh-card-body { display: flex; flex-direction: column; gap: 10px; } .gh-review-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .gh-review-txt { font-size: 13.5px; color: var(--gh-text-secondary); line-height: 1.9; margin: 0; flex: 1; } .gh-slide-cert { width: 250px; text-decoration: none; color: inherit; } .gh-slide-cert .gh-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .gh-cert-mini-ic { width: 40px; height: 40px; border-radius: var(--gh-r-sm); display: grid; place-items: center; background: var(--gh-accent-surface); color: var(--gh-accent-text); } .gh-cert-mini-ic svg { width: 20px; height: 20px; } .gh-cert-mini-title { font-size: 14px; font-weight: 800; } .gh-cert-mini-name { font-size: 12.5px; color: var(--gh-text-secondary); } .gh-cert-mini-code { font-size: 11px; color: var(--gh-text-tertiary); font-variant-numeric: tabular-nums; } .gh-slide-post { width: 300px; } @media (max-width: 640px) { .gh-slide, .gh-slide-review, .gh-slide-post { width: 260px; } } /* ---------- چت هوشمند ---------- */ /* z-index 110: بالای محتوا و نوبار پایین (95)، ولی زیر بک‌دراپ (119) و سایدبارها (120/130) — وقتی منو یا پنل حساب/سبد باز است، دکمه‌ی چت نباید روی آن شناور بماند. */ .gh-aichat-fab { position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 110; width: 56px; height: 56px; border: none; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, var(--gh-accent-solid), color-mix(in srgb, var(--gh-accent-solid) 55%, var(--gh-accent-shade))); color: var(--gh-white); display: grid; place-items: center; box-shadow: var(--gh-shadow-accent); transition: transform var(--gh-dur-fast) var(--gh-ease-out), box-shadow var(--gh-dur-fast) var(--gh-ease-out); } .gh-aichat-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--gh-shadow-accent-hover); } .gh-aichat-fab svg { width: 26px; height: 26px; } .gh-aichat-ic-close { display: none; } .gh-aichat.is-open .gh-aichat-ic-open { display: none; } .gh-aichat.is-open .gh-aichat-ic-close { display: block; } .gh-aichat-win { position: fixed; bottom: 86px; inset-inline-start: 18px; z-index: 110; width: min(370px, calc(100vw - 36px)); height: min(540px, calc(100dvh - 120px)); display: flex; flex-direction: column; overflow: hidden; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); box-shadow: var(--gh-shadow-4); opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none; transition: opacity var(--gh-dur-base) var(--gh-ease-out), transform var(--gh-dur-base) var(--gh-ease-out); } .gh-aichat-win[hidden] { display: flex; } /* [hidden] فقط تا اولین باز شدن؛ نمایش با کلاس is-open کنترل می‌شود */ .gh-aichat.is-open .gh-aichat-win { opacity: 1; transform: none; pointer-events: auto; } .gh-aichat-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: linear-gradient(135deg, var(--gh-accent-solid), color-mix(in srgb, var(--gh-accent-solid) 60%, var(--gh-accent-shade))); color: var(--gh-white); } .gh-aichat-avatar { width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--gh-white) 18%, transparent); display: grid; place-items: center; flex: none; } .gh-aichat-avatar svg { width: 20px; height: 20px; } .gh-aichat-head > div { flex: 1; min-width: 0; } .gh-aichat-head b { display: block; font-size: 14px; font-weight: 800; } .gh-aichat-head span { font-size: 11px; opacity: .85; display: inline-flex; align-items: center; gap: 5px; } .gh-aichat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gh-status-live); display: inline-block; } .gh-aichat-head .gh-icon-btn { color: var(--gh-white); } .gh-aichat-head .gh-icon-btn:hover { background: color-mix(in srgb, var(--gh-white) 15%, transparent); color: var(--gh-white); } .gh-aichat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .gh-aichat-b { max-width: 85%; padding: 9px 13px; border-radius: var(--gh-r-md); font-size: 13px; line-height: 1.9; white-space: pre-line; } .gh-aichat-b.is-bot { align-self: flex-start; background: var(--gh-bg-sunken); color: var(--gh-text-primary); border-start-start-radius: 4px; } .gh-aichat-b.is-me { align-self: flex-end; background: var(--gh-accent-solid); color: var(--gh-accent-on-solid); border-start-end-radius: 4px; } .gh-aichat-b a { color: var(--gh-accent-text); font-weight: 700; } .gh-aichat-b.is-me a { color: inherit; } .gh-aichat-src { font-size: 10px; color: var(--gh-text-tertiary); align-self: flex-start; margin-block-start: -6px; padding-inline-start: 4px; } .gh-aichat-sugs { display: flex; flex-wrap: wrap; gap: 6px; } .gh-aichat-sug { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; background: transparent; color: var(--gh-accent-text); border: 1px solid var(--gh-accent-border); border-radius: var(--gh-r-full); padding: 6px 12px; transition: background var(--gh-dur-fast) var(--gh-ease-out); } .gh-aichat-sug:hover { background: var(--gh-accent-surface); } .gh-aichat-sug:focus-visible { border-radius: var(--gh-r-full); } /* نوار سوالات پیشنهادی — بین بدنه‌ی گفتگو و فرم، نه داخل حباب اسکرول‌شونده؛ همیشه با دکمه‌ی چراغ در هدر باز/بسته می‌شود، پس هیچ‌وقت (حتی بعد از کلی پیام رد و بدل شدن) گم نمی‌شود. */ .gh-aichat-sugs-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-block-start: 1px solid var(--gh-border-subtle); flex: none; } .gh-aichat-sugs-bar[hidden] { display: none; } .gh-aichat-links { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; } .gh-aichat-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--gh-bg-sunken); border-radius: var(--gh-r-md); border-start-start-radius: 4px; } .gh-aichat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gh-text-tertiary); animation: gh-typing 1.2s infinite; } .gh-aichat-typing i:nth-child(2) { animation-delay: .18s; } .gh-aichat-typing i:nth-child(3) { animation-delay: .36s; } @keyframes gh-typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } } .gh-aichat-form { display: flex; gap: 8px; padding: 12px; border-block-start: 1px solid var(--gh-border-subtle); } .gh-aichat-form input { flex: 1; min-width: 0; border: 1.5px solid var(--gh-border-default); border-radius: var(--gh-r-full); background: var(--gh-bg-surface); color: var(--gh-text-primary); font: inherit; font-size: 13px; padding: 10px 16px; } .gh-aichat-form input:focus { outline: none; border-color: var(--gh-accent-solid); box-shadow: var(--gh-focus-ring); } .gh-aichat-form .gh-btn-icon { width: 44px; height: 44px; border-radius: 50%; flex: none; } @media (max-width: 900px) { /* بالای نوبار پایین موبایل */ .gh-aichat-fab { bottom: 88px; width: 50px; height: 50px; } .gh-aichat-win { bottom: 148px; height: min(480px, calc(100dvh - 170px)); } } /* کارت دارنده‌ی گواهی (بازطراحی v1.2) — پروفایل‌کارت: آواتار + هویت | آمار ستونی با جداکننده | اکشن */ .gh-cert-student { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); padding: 18px 22px; margin-block-start: 18px; max-width: 960px; margin-inline: auto; box-shadow: var(--gh-shadow-1); } .gh-cert-student .gh-avatar { width: 56px; height: 56px; box-shadow: 0 0 0 2px var(--gh-bg-raised), 0 0 0 3.5px var(--gh-accent-border); } .gh-cert-student-info { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 3px; } .gh-cert-student-info b { display: block; font-size: 15.5px; font-weight: 800; } .gh-cert-student-info > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gh-text-tertiary); } /* آمار ستونی — عدد درشت بالای برچسب، با جداکننده‌ی نقطه‌چین بین ستون‌ها (زبان بصری آمار داشبورد) */ .gh-cert-student-stats { display: flex; margin: 0; } .gh-cert-student-stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-inline: 20px; font-size: 11.5px; color: var(--gh-text-tertiary); } .gh-cert-student-stats span + span { border-inline-start: 1px dashed var(--gh-border-default); } .gh-cert-student-stats b { color: var(--gh-text-primary); font-weight: 900; font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1.2; } @media (max-width: 640px) { .gh-cert-student { justify-content: center; text-align: center; } .gh-cert-student-info { align-items: center; flex-basis: 100%; } .gh-cert-student-stats { justify-content: center; flex-basis: 100%; } } .gh-review-profile { margin-inline-start: auto; flex: none; } /* فیلترهای آرشیو فونت — سایدبار چسبان مدرن (گروه بازشو + شمارنده + چیپ فعال) */ .gh-fonts-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; } /* ستون سایدبار: فیلترها + باکس پیشنهاد دوره یک واحدِ چسبانِ واحدند (خودِ ستون چسبان است، نه هرکدام جدا) — دو چسبان مستقل کنار هم با یک top یکسان روی هم می‌افتادند؛ حالا با آکاردئون (فقط یک گروه فیلتر باز) کل ستون کوتاه می‌ماند و همیشه با هم، بدون تداخل، می‌چسبند. */ .gh-f-sidecol { position: sticky; top: var(--gh-sticky-offset); display: flex; flex-direction: column; gap: 20px; } .gh-f-side { background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-lg); overflow: hidden; } .gh-f-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-block-end: 1px solid var(--gh-border-subtle); } .gh-f-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; } .gh-f-head b svg { width: 16px; height: 16px; color: var(--gh-text-tertiary); } .gh-f-clear { font-size: 12px; font-weight: 700; color: var(--gh-danger-text); text-decoration: none; } .gh-f-clear:hover { text-decoration: underline; } .gh-f-group { border-block-end: 1px solid var(--gh-border-subtle); } .gh-f-group:last-child { border-block-end: none; } .gh-f-group summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px; font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; color: var(--gh-text-primary); user-select: none; } .gh-f-group summary::-webkit-details-marker { display: none; } .gh-f-group summary svg { width: 15px; height: 15px; color: var(--gh-text-tertiary); transition: transform var(--gh-dur-fast) var(--gh-ease-out); } .gh-f-group[open] summary svg { transform: rotate(180deg); } /* ارتفاع/پدینگ با اینلاین‌استایل JS (app.js) انیمیت می‌شود، نه با [open]/CSS — چون display بومی
یک‌باره عوض می‌شود و قابل ترنزیشن نیست؛ اینجا فقط overflow را می‌بندیم. */ .gh-f-opts { display: flex; flex-direction: column; padding: 0 8px 10px; overflow: hidden; transition: height .26s var(--gh-ease-out), padding-block-end .26s var(--gh-ease-out); } .gh-f-opt { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: var(--gh-r-sm); font-size: 13px; font-weight: 600; color: var(--gh-text-secondary); text-decoration: none; transition: background var(--gh-dur-fast) var(--gh-ease-out); } .gh-f-opt:hover { background: var(--gh-bg-sunken); } .gh-f-opt:focus-visible { border-radius: var(--gh-r-sm); } .gh-f-check { width: 18px; height: 18px; flex: none; border-radius: var(--gh-r-xs); border: 1.5px solid var(--gh-border-strong); display: grid; place-items: center; color: transparent; transition: all var(--gh-dur-fast) var(--gh-ease-out); } /* تیک با یک پاپ ریز ظاهر می‌شود — میکروبازخوردِ «تغییر وضعیت» (Motion Principles)، فقط transform. */ .gh-f-check svg { width: 11px; height: 11px; transform: scale(0); transition: transform var(--gh-dur-fast) var(--gh-ease-out); } .gh-f-opt.is-on .gh-f-check svg { transform: scale(1); } .gh-f-opt.is-on { color: var(--gh-accent-text); font-weight: 800; } .gh-f-opt.is-on .gh-f-check { background: var(--gh-accent-solid); border-color: var(--gh-accent-solid); color: var(--gh-accent-on-solid); } .gh-f-count { margin-inline-start: auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--gh-bg-sunken); color: var(--gh-text-tertiary); border-radius: var(--gh-r-full); padding: 4px 8px; } .gh-f-opt.is-on .gh-f-count { background: var(--gh-accent-surface); color: var(--gh-accent-text); } .gh-f-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 16px; min-height: 34px; } .gh-f-result { font-size: 13px; color: var(--gh-text-tertiary); } .gh-f-result b { color: var(--gh-text-primary); font-weight: 800; } .gh-f-active { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .gh-f-active-chip { display: inline-flex; align-items: center; gap: 6px; } .gh-f-active-chip svg { width: 12px; height: 12px; } /* گرید فونت‌ها: ۴ در هر ردیف (دسکتاپ) */ .gh-fonts-main .gh-grid-cards { grid-template-columns: repeat(4, 1fr); gap: 16px; } .gh-fonts-main .gh-card-title { font-size: 14.5px; } /* آرشیو دوره‌ها و بخش دوره‌های صفحه‌ی اصلی، ۴تایی — همان الگوی گرید فونت‌ها (درخواست کاربر). چینش کارت برای عرض باریک‌تر بازتنظیم شده: رسانه → هویت (چیپ+عنوان) → مشخصات → خط نقطه‌چین → قیمت/ثبت‌نام */ .post-type-archive-gh_course .gh-grid-cards, .home .gh-grid-cards { grid-template-columns: repeat(4, 1fr); gap: 16px; } .post-type-archive-gh_course .gh-card-title, .home .gh-grid-cards .gh-card-title { font-size: 14.5px; } .post-type-archive-gh_course .gh-card-body, .home .gh-grid-cards .gh-card-body { padding: 16px; } .post-type-archive-gh_course .gh-course-meta, .home .gh-grid-cards .gh-course-meta { gap: 10px; font-size: 12px; } .post-type-archive-gh_course .gh-course-meta svg, .home .gh-grid-cards .gh-course-meta svg { width: 13px; height: 13px; } .post-type-archive-gh_course .gh-card-foot, .home .gh-grid-cards .gh-card-foot { margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px dashed var(--gh-border-subtle); } .post-type-archive-gh_course .gh-price, .home .gh-grid-cards .gh-price { font-size: 15px; } .post-type-archive-gh_course .gh-card-foot .gh-btn-sm, .home .gh-grid-cards .gh-card-foot .gh-btn-sm { height: 34px; padding-inline: 13px; font-size: 12.5px; } .gh-card-course .gh-course-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1280px) { .post-type-archive-gh_course .gh-grid-cards, .home .gh-grid-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .post-type-archive-gh_course .gh-grid-cards, .home .gh-grid-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .post-type-archive-gh_course .gh-grid-cards, .home .gh-grid-cards { grid-template-columns: 1fr; } } @media (max-width: 1280px) { .gh-fonts-main .gh-grid-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .gh-fonts-layout { grid-template-columns: 1fr; gap: 16px; } .gh-f-side { position: static; } .gh-fonts-main .gh-grid-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .gh-fonts-main .gh-grid-cards { grid-template-columns: 1fr; } } .gh-chip { font-size: 13px; font-weight: 600; text-decoration: none; padding: 8px 16px; border-radius: var(--gh-r-full); border: 1px solid var(--gh-border-default); background: var(--gh-bg-surface); color: var(--gh-text-secondary); transition: background-color var(--gh-dur-fast) var(--gh-ease-out), color var(--gh-dur-fast) var(--gh-ease-out), border-color var(--gh-dur-fast) var(--gh-ease-out); } .gh-chip:hover { border-color: var(--gh-border-strong); color: var(--gh-text-primary); } .gh-chip:focus-visible { border-radius: var(--gh-r-full); } .gh-chip.is-on { background: var(--gh-accent-surface); border-color: var(--gh-accent-border); color: var(--gh-accent-text); } @media (max-width: 900px) { .gh-font-layout { grid-template-columns: 1fr; } .gh-font-side { position: static; } } /* ---------- صفحه‌ی گواهی ---------- سند گواهی طرح ثابت دارد (عمداً هیچ توکن تم روشن/تاریکی مصرف نمی‌کند) و بوم آن نسبت A4 افقی (۲۹۷×۲۱۰mm) است. همه‌ی مختصات از همان جدول میلی‌متری Template::render_pdf مشتق شده‌اند: left% = mm/2.97 و top% = mm/2.10 و فونت‌ها cqw = pt×0.1188 — تا پیش‌نمایش وب و PDF یکسان بمانند. */ .gh-cert-page { max-width: 960px; margin-inline: auto; } /* قاب «برگه‌ی مدرک» — پاسپارتوی روشن دور سند + خط نقطه‌چین با فاصله (حس قاب فیزیکی)؛ برگه با چرخش خیلی ریز و دو برگ پشتی، حس یک سند کاغذی واقعی می‌دهد و با هاور صاف می‌شود. */ .gh-cert-stage { position: relative; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-2xl); padding: clamp(18px, 3.5vw, 36px); box-shadow: var(--gh-shadow-1); } .gh-cert-stage::before { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 1.5px dashed var(--gh-border-strong); border-radius: var(--gh-r-xl); } .gh-cert-paper { position: relative; transform: rotate(-.7deg); transition: transform var(--gh-dur-slow) var(--gh-ease-out); } /* دو برگ پشتی — پشته‌ی کاغذ */ .gh-cert-paper::before, .gh-cert-paper::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: var(--gh-bg-surface); border: 1px solid var(--gh-border-default); box-shadow: 0 8px 20px color-mix(in srgb, var(--gh-black) 8%, transparent); } .gh-cert-paper::before { transform: rotate(1.5deg) translateY(3px); } .gh-cert-paper::after { transform: rotate(-1.2deg) translate(-4px, 1px); } .gh-cert-paper .gh-certificate { box-shadow: var(--gh-shadow-3); } .gh-cert-stage:hover .gh-cert-paper { transform: rotate(0deg); } /* ریل اقدامات شناور — ستون دکمه‌های گرد بیرونِ لبه‌ی چپ قاب مدرک؛ تولتیپ رو به سند باز می‌شود. دو لایه: بیرونی absolute و به‌اندازه‌ی کل ارتفاع .gh-cert-stage (بدون اثر روی جریان صفحه)، داخلی sticky — این‌طوری دکمه‌ها با اسکرول همراه می‌شوند ولی هرگز از محدوده‌ی خودِ سند/گواهی (نه کل صفحه) بیرون نمی‌روند، چون کران‌شان همان ارتفاع لایه‌ی بیرونی است. */ .gh-cert-fabs { position: absolute; inset-block: 0; left: -68px; width: 48px; z-index: 6; } .gh-cert-fabs-inner { position: sticky; top: var(--gh-sticky-offset); display: flex; flex-direction: column; gap: 10px; } .gh-fab { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; text-decoration: none; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); color: var(--gh-text-secondary); box-shadow: var(--gh-shadow-2); font: inherit; transition: all var(--gh-dur-fast) var(--gh-ease-out); } .gh-fab svg { width: 20px; height: 20px; } .gh-fab:hover { background: var(--gh-accent-surface); border-color: var(--gh-accent-border); color: var(--gh-accent-text); transform: translateY(-2px); } .gh-fab-primary { background: var(--gh-accent-solid); border-color: var(--gh-accent-solid); color: var(--gh-accent-on-solid); } .gh-fab-primary:hover { background: var(--gh-accent-hover); border-color: var(--gh-accent-hover); color: var(--gh-accent-on-solid); } .gh-fab::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(4px, -50%); opacity: 0; pointer-events: none; white-space: nowrap; background: var(--gh-stone-900); color: var(--gh-white); font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: var(--gh-r-sm); box-shadow: var(--gh-shadow-2); transition: opacity var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out); } .gh-fab:hover::after, .gh-fab:focus-visible::after { opacity: 1; transform: translate(0, -50%); } @media (max-width: 1199px) { /* عرض کم: ریل به ردیف افقی وسط‌چین زیر سند برمی‌گردد؛ تولتیپ لازم نیست (aria-label هست) */ .gh-cert-fabs { position: static; width: auto; } .gh-cert-fabs-inner { position: static; flex-direction: row; justify-content: center; margin-block-start: 18px; } .gh-fab::after { display: none; } } .gh-certificate { position: relative; aspect-ratio: 297 / 210; container-type: inline-size; overflow: hidden; border-radius: 12px; box-shadow: var(--gh-shadow-1); font-family: 'Lahzeh', 'IRANYekanX', system-ui, sans-serif; /* تایپوگرافی تاریخی گواهی‌های قلموم — فقط نسخه‌ی فارسی */ } /* نسخه‌ی انگلیسی (dir=ltr) همیشه ایران‌یکان است — لحظه برای حروف لاتین طراحی نشده؛ هماهنگ با Template::pdf_font('en') */ .gh-certificate[dir="ltr"] { font-family: 'IRANYekanX', system-ui, sans-serif; } /* داخل گواهی فارسی هم، تکه‌های لاتین (کد گواهی، آدرس سایت) که خودشان dir="ltr" علامت‌گذاری شده‌اند، ایران‌یکان بمانند نه لحظه */ .gh-certificate:not([dir="ltr"]) [dir="ltr"] { font-family: 'IRANYekanX', system-ui, sans-serif; } .gh-certificate > * { position: absolute; margin: 0; } .gh-certificate .ghc-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; } .gh-certificate .ghc-logo { left: 44.28%; top: 13.10%; width: 11.45%; } .gh-certificate .ghc-kicker { left: 16.33%; top: 29.9%; width: 67.34%; display: flex; align-items: center; justify-content: center; gap: 1.35cqw; font-size: 1.663cqw; color: color-mix(in srgb, var(--gh-white) 50%, transparent); line-height: 1.35; letter-spacing: .02em; word-spacing: .1em; } .gh-certificate .ghc-kicker .ghc-ko { width: .75cqw; flex: none; } .gh-certificate .ghc-frame { left: 28.62%; top: 37.62%; width: 42.76%; height: 9.52%; border: .168cqw solid color-mix(in srgb, var(--gh-white) 65%, transparent); border-radius: 1.178cqw; display: flex; align-items: center; justify-content: center; } .gh-certificate .ghc-frame span { font-size: 2.851cqw; font-weight: 700; color: var(--gh-white); white-space: nowrap; } .gh-certificate .ghc-lead { left: 16.33%; top: 50.95%; width: 67.34%; text-align: center; font-size: 1.425cqw; color: color-mix(in srgb, var(--gh-white) 88%, transparent); line-height: 1.35; } .gh-certificate .ghc-body { left: 18.69%; top: 54.52%; width: 62.63%; text-align: center; font-size: 1.544cqw; color: color-mix(in srgb, var(--gh-white) 92%, transparent); line-height: 2.25; } .gh-certificate .ghc-body b { color: var(--gh-white); font-weight: 700; } .gh-certificate .ghc-badge { left: 17.68%; top: 68.81%; width: 9.09%; } .gh-certificate .ghc-code { left: 27.47%; top: 75.24%; width: 14.01%; text-align: center; font-size: 1.188cqw; color: color-mix(in srgb, var(--gh-white) 90%, transparent); line-height: 1.35; letter-spacing: .03em; white-space: nowrap; } .gh-certificate .ghc-month { left: 43.10%; top: 74.57%; width: 5.56%; text-align: center; line-height: 1.35; } .gh-certificate .ghc-month b { display: block; font-size: 1.366cqw; color: var(--gh-white); } .gh-certificate .ghc-month span { display: block; font-size: 1.188cqw; color: color-mix(in srgb, var(--gh-white) 65%, transparent); margin-top: .3cqw; } .gh-certificate .ghc-day { left: 49.49%; top: 73.81%; width: 3.43%; height: 5.24%; border: .135cqw solid var(--gh-white); border-radius: 1.01cqw; display: flex; align-items: center; justify-content: center; font-size: 1.782cqw; font-weight: 700; color: var(--gh-white); } .gh-certificate .ghc-datelabel { left: 55.05%; top: 74.48%; width: 8.42%; text-align: end; line-height: 1.35; } /* در rtl یعنی تخت-چپ، مطابق مرجع */ .gh-certificate .ghc-datelabel b { display: block; font-size: 1.366cqw; color: var(--gh-white); } .gh-certificate .ghc-datelabel span { display: block; font-size: 1.188cqw; color: color-mix(in srgb, var(--gh-white) 85%, transparent); margin-top: .35cqw; } .gh-certificate .ghc-sig { left: 72.39%; top: 66.19%; width: 11.45%; } .gh-certificate .ghc-inst { left: 65.99%; top: 73.81%; width: 20.20%; text-align: center; line-height: 1.35; } .gh-certificate .ghc-inst b { display: block; font-size: 1.663cqw; color: var(--gh-white); } .gh-certificate .ghc-inst span { display: block; font-size: 1.069cqw; color: color-mix(in srgb, var(--gh-white) 78%, transparent); margin-top: .55cqw; letter-spacing: .012em; } /* گروه QR + دامنه — کف QR با کرسی متن آدرس هم‌تراز؛ دورش خالی برای اسکن مطمئن */ .gh-certificate .ghc-qr { left: 92.26%; top: 85.71%; width: 5.56%; aspect-ratio: 1; } .gh-certificate .ghc-site { left: 74.41%; top: 91.62%; width: 16.84%; text-align: right; font-size: 1.188cqw; color: color-mix(in srgb, var(--gh-white) 90%, transparent); line-height: 1.2; letter-spacing: .02em; } /* نسخه‌ی انگلیسی: آینه‌ی خوشه‌ی تاریخ تا خوانش چپ→راست شود — «Date of issue: [8] July 2026» (عدد روز سمت چپِ ماه/سال). مختصات = آینه‌ی بازه‌ی 43.10%…63.47% نسخه‌ی فارسی. */ .gh-certificate[dir="ltr"] .ghc-datelabel { left: 43.10%; } .gh-certificate[dir="ltr"] .ghc-day { left: 53.65%; } .gh-certificate[dir="ltr"] .ghc-month { left: 57.91%; } /* ---------- صفحه فروش دوره ---------- */ .gh-course-hd { padding-block: 28px 4px; } /* پس‌زمینه‌ی متغیر دوره (متاباکس «فایل‌های دوره»، کلید background) — کم‌رنگ و محوشونده، متن خوانا می‌ماند */ .gh-course-hd.has-bg { position: relative; } .gh-course-hd.has-bg::before { content: ""; position: absolute; inset: -28px -24px 0; z-index: -1; pointer-events: none; background-image: var(--gh-course-bg); background-size: cover; background-position: center; opacity: .09; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); border-radius: var(--gh-r-xl); } /* گالری گواهی‌ها در صفحه دوره — همان کارت‌های استعلام، ۴تایی جمع‌وجور */ .gh-course-hd h1 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 900; line-height: 1.4; margin: 10px 0; } .gh-course-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--gh-r-full); border: 1px solid; width: fit-content; } .gh-course-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--course, currentColor); } .gh-course-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--gh-text-tertiary); } .gh-course-meta svg { width: 14px; height: 14px; vertical-align: -3px; margin-inline-end: 5px; } .gh-price-wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .gh-price { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; } .gh-price s { font-size: 12px; font-weight: 500; color: var(--gh-text-tertiary); } .gh-price .woocommerce-Price-currencySymbol { font-size: 11px; font-weight: 500; color: var(--gh-text-tertiary); } /* ⚠️ درس آموخته: باکس خرید (aside) روی دوره‌های با محتوای کوتاه (سرفصل کم/بدون نمونه‌کار) از ستون اصلی بلندتر می‌شود؛ چون CSS Grid ارتفاع ردیف را برابر بلندترین آیتم می‌سازد، دیگر فضایی برای «چسبیدن» sticky باقی نمی‌ماند و باکس قیمت با اسکرول کامل از صفحه خارج می‌شود (نه یک باگ overflow — خودِ sticky واقعاً هیچ‌وقت فعال نمی‌شد). حداقل‌ارتفاع تضمین می‌کند حتی کوتاه‌ترین دوره هم فضای واقعی برای sticky داشته باشد؛ برای دوره‌های پرمحتوا بی‌اثر است (فقط وقتی محتوا از این کمتر باشد اعمال می‌شود). */ .gh-course-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; padding-block: 26px 64px; } .gh-course-desc { width: 100%; max-width: none; margin-block-start: 46px; font-size: 15px; line-height: 2.1; color: var(--gh-text-secondary); } .gh-sec-title { font-size: 20px; font-weight: 800; margin: 32px 0 14px; } .gh-lesson { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-block-start: 1px solid var(--gh-border-subtle); font-size: 13.5px; } .gh-lesson-dur { margin-inline-start: auto; font-size: 12px; color: var(--gh-text-tertiary); font-variant-numeric: tabular-nums; } .gh-chapter { background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-md); margin-block-end: 10px; overflow: hidden; } .gh-chapter summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 15px 20px; font-weight: 800; font-size: 14.5px; } .gh-chapter summary::-webkit-details-marker { display: none; } .gh-chapter-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .gh-chapter-title { font: inherit; line-height: 1.55; color: var(--gh-text-primary); } .gh-chapter-description { font-size: 12.5px; line-height: 1.75; font-weight: 500; color: var(--gh-text-secondary); } .gh-chapter-meta { margin-inline-start: auto; font-size: 12px; font-weight: 500; color: var(--gh-text-tertiary); } /* شماره‌ی فصل — مونواسپیس درشت با جداکننده‌ی نقطه‌چین؛ حس اسپک‌شیت/ادیتور کد (درخواست کاربر) */ .gh-chapter-num { font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; font-size: 21px; font-weight: 700; line-height: 1; color: var(--gh-accent-text); direction: ltr; unicode-bidi: isolate; flex: none; min-width: 40px; text-align: center; padding-inline-end: 12px; border-inline-end: 1px dashed var(--gh-border-default); font-variant-numeric: tabular-nums; letter-spacing: .04em; } /* بدون box-shadow عمدی: کارتی که بریدگیِ بلیت دارد نباید سایه‌ی نرم پخش‌شونده داشته باشد (دور نیم‌دایره‌های بریدگی هاله‌ی ناهم‌خوان می‌سازد) — فقط border فریمِ آن را می‌سازد. overflow:visible هم لازم است تا بریدگی‌ها از لبه‌ی کارت بیرون بزنند؛ گردی گوشه‌های بالای کاور حالا مسئولیت خودِ .gh-buybox-cover است. */ .gh-buybox { position: sticky; top: var(--gh-sticky-offset); background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); overflow: visible; } .gh-buybox-cover { position: relative; aspect-ratio: 16 / 9; border-radius: var(--gh-r-xl) var(--gh-r-xl) 0 0; overflow: hidden; } .gh-buybox-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .gh-buybox-cover.is-gradient { display: grid; place-items: center; color: color-mix(in srgb, var(--gh-white) 85%, transparent); } .gh-buybox-cover.is-gradient svg { width: 44px; height: 44px; } .gh-buybox-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; } .gh-bigprice { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .gh-bigprice b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; } .gh-bigprice s { font-size: 13px; color: var(--gh-text-tertiary); } .gh-badge-sale { display: inline-flex; font-size: 12px; font-weight: 800; background: var(--gh-danger-solid); color: var(--gh-white); border-radius: var(--gh-r-sm); padding: 4px 9px; } /* استثنای مستند: افست/بلور ریز عمداً با اپاسیتی بالا جفت شده تا روبان کوچک روی هر پس‌زمینه‌ی عکسی جدا دیده شود. */ .gh-badge-sale-ribbon { position: absolute; top: 10px; left: 10px; z-index: 2; box-shadow: 0 2px 8px color-mix(in srgb, var(--gh-black) 25%, transparent); } .gh-buybox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--gh-text-secondary); } .gh-buybox-list li { display: flex; align-items: center; } .gh-buybox-list svg { width: 15px; height: 15px; color: var(--gh-success-text); margin-inline-end: 7px; flex-shrink: 0; } /* ⚠️ درس آموخته (CRAFT-02): این لینک قبلاً جعبه‌ی مرزدار/رنگی داشت و در کنار دکمه‌ی اصلی «ثبت‌نام» یک CTA دوم می‌ساخت — دقیقاً همان لحظه‌ای که خرید باید تک‌تصمیمی باشد. حالا فقط یک لینک متنی ساده است؛ تنها عنصر مرزدار/رنگی باکس خرید، دکمه‌ی اصلی می‌ماند. */ .gh-buybox-bundle-cta { display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--gh-text-secondary); min-height: 40px; padding-block: 8px; margin-block-start: 4px; border-radius: var(--gh-r-sm); } .gh-buybox-bundle-cta:hover { color: var(--gh-accent-text); } .gh-buybox-bundle-cta svg:first-child { width: 15px; height: 15px; flex-shrink: 0; } .gh-buybox-bundle-cta svg:last-child { width: 13px; height: 13px; flex-shrink: 0; } .gh-mobile-buybar { display: none; } /* ---------- بریدگی «بلیت» (ticket-cut) نیم‌دایره‌ها فقط داخل لبه‌ی کارت رسم می‌شوند؛ بنابراین چیزی بیرون کارت شناور نیست و قوس هر بریدگی نیز ادامه‌ی واقعی border کارت به نظر می‌رسد. */ .gh-ticket-cut { position: relative; height: 0; margin-block: 6px 18px; border-block-start: 2px dashed var(--gh-border-strong); } .gh-ticket-cut::before, .gh-ticket-cut::after { content: ""; position: absolute; z-index: 1; top: 0; width: 11px; height: 22px; background: var(--gh-bg-page); border: 1px solid var(--gh-border-default); transform: translateY(-50%); } .gh-ticket-cut::before { left: -1px; border-left: 0; border-radius: 0 11px 11px 0; } .gh-ticket-cut::after { right: -1px; border-right: 0; border-radius: 11px 0 0 11px; } .gh-buybox-body .gh-ticket-cut { margin-inline: -22px; } /* داخل .gh-bb-sum فاصله‌ی عمودی را خودِ gap فلکس والد می‌دهد — مارجین پایه با آن جمع نمی‌شود */ .gh-bb-sum .gh-ticket-cut { margin-inline: -24px; margin-block: 0; } /* ---------- صفحه اصلی ---------- */ .gh-hero { padding-block: 72px 48px; text-align: center; position: relative; overflow: hidden; } .gh-hero::before { content: ""; position: absolute; inset: -40% -20% auto; height: 130%; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 0%, color-mix(in srgb, var(--gh-accent-solid) 9%, transparent), transparent 70%); } .gh-hero > .gh-container { position: relative; z-index: 1; } /* چهار دوره به‌شکل یک دسته‌ی هم‌مرکز؛ کارت جلو رنگ واقعی دارد و پشت‌ها خنثی‌اند. */ .gh-hero-course-stack { position: relative; isolation: isolate; width: var(--gh-course-mark-size); height: calc(var(--gh-course-mark-size) + 10px); margin: 0 auto 30px; } .gh-hero-course-card { position: absolute; inset: auto 0 0; display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-md); color: var(--gh-text-tertiary); background-color: var(--gh-bg-sunken); text-decoration: none; box-shadow: var(--gh-shadow-1); animation: gh-course-stack 8s var(--gh-ease-in-out) calc(var(--gh-stack-i) * -2s) infinite; will-change: transform, opacity; transform-origin: 50% 100%; } .gh-hero-course-card span { font-size: 14px; font-weight: 900; line-height: 1; } .gh-hero-course-card:focus-visible { outline-offset: 5px; } @keyframes gh-course-stack { 0%, 20% { z-index: 4; transform: translateY(0) scale(1); opacity: 1; color: var(--gh-white); background-color: var(--gh-course-tone); box-shadow: 0 8px 18px color-mix(in srgb, var(--gh-course-tone) 14%, transparent); } 24% { z-index: 4; transform: translateY(11px) scale(1.08); opacity: 0; color: var(--gh-white); background-color: var(--gh-course-tone); } 25% { z-index: 0; transform: translateY(-19px) scale(.76); opacity: 0; color: var(--gh-text-tertiary); background-color: var(--gh-bg-sunken); } 32%, 48% { z-index: 1; transform: translateY(-19px) scale(.76); opacity: .42; color: var(--gh-text-tertiary); background-color: var(--gh-bg-sunken); box-shadow: var(--gh-shadow-1); } 50%, 73% { z-index: 2; transform: translateY(-13px) scale(.84); opacity: .6; color: var(--gh-text-tertiary); background-color: var(--gh-bg-sunken); } 75%, 98% { z-index: 3; transform: translateY(-6px) scale(.92); opacity: .82; color: var(--gh-text-tertiary); background-color: var(--gh-bg-sunken); } 100% { z-index: 4; transform: translateY(0) scale(1); opacity: 1; color: var(--gh-white); background-color: var(--gh-course-tone); } } @media (prefers-reduced-motion: reduce) { .gh-hero-course-card { animation: none; opacity: .45; } .gh-hero-course-card:first-child { z-index: 4; opacity: 1; transform: none; color: var(--gh-white); background: var(--gh-course-tone); } .gh-hero-course-card:nth-child(2) { z-index: 3; transform: translateY(-6px) scale(.92); } .gh-hero-course-card:nth-child(3) { z-index: 2; transform: translateY(-13px) scale(.84); } .gh-hero-course-card:nth-child(4) { z-index: 1; transform: translateY(-19px) scale(.76); } } .gh-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--gh-accent-text); background: var(--gh-accent-surface); border: 1px solid var(--gh-accent-border); padding: 6px 14px; border-radius: var(--gh-r-full); margin-block-end: 20px; } .gh-hero-eyebrow svg { width: 14px; height: 14px; } .gh-hero h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 900; line-height: 1.35; max-width: 720px; margin-inline: auto; text-wrap: balance; } .gh-hero-rotate { position: relative; display: inline-grid; vertical-align: bottom; } .gh-hero-rotate-word { grid-area: 1 / 1; color: var(--gh-accent-text); opacity: 0; filter: blur(10px); transition: opacity var(--gh-dur-slow) var(--gh-ease-out), filter var(--gh-dur-slow) var(--gh-ease-out); white-space: nowrap; pointer-events: none; } .gh-hero-rotate-word.is-active { opacity: 1; filter: blur(0); pointer-events: auto; } /* گلیف در حال اسکرمبل — کم‌رنگ (نزدیک به زمینه) و نازک‌تر از تیتر؛ حس «در حال شکل‌گرفتن»، نه باگ */ .gh-scramble-glyph { color: color-mix(in srgb, var(--gh-accent-text) 32%, var(--gh-bg-page)); font-weight: 320; /* IRANYekanX متغیر است — نازکی واقعی، نه faux */ direction: ltr; unicode-bidi: isolate; /* گلیف‌های لاتین داخل کلمه‌ی فارسی ترتیب بصری را به هم نزنند */ } /* کارت چشمک‌زن حالت typewriter — steps(1) یعنی پرش خشک تایپی، نه فید نرم */ .gh-caret { display: inline-block; width: 2.5px; height: 1.05em; margin-inline-start: 3px; background: var(--gh-accent-solid); border-radius: 1px; vertical-align: -.12em; animation: gh-caret-blink 1s steps(1) infinite; } @keyframes gh-caret-blink { 50% { opacity: 0; } } .gh-hero p { font-size: 16.5px; color: var(--gh-text-secondary); max-width: 540px; margin: 14px auto 28px; } .gh-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .gh-proof-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 840px; margin: 32px auto 0; } .gh-proof { text-align: center; padding: 16px 10px; border-radius: var(--gh-r-lg); background: var(--gh-bg-surface); border: 1px solid var(--gh-border-subtle); } .gh-proof b { font-size: 22px; font-weight: 900; display: block; font-variant-numeric: tabular-nums; } .gh-proof span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gh-text-tertiary); margin-block-start: 2px; } .gh-proof span svg { width: 13px; height: 13px; flex-shrink: 0; } .gh-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 24px; } .gh-sec-head h2 { font-size: 24px; font-weight: 850; margin: 0; } .gh-path-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .gh-pstep { position: relative; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-lg); padding: 20px; text-decoration: none; color: inherit; transition: transform var(--gh-dur-base) var(--gh-ease-out), box-shadow var(--gh-dur-base) var(--gh-ease-out); } .gh-pstep:hover { transform: translateY(-3px); box-shadow: var(--gh-shadow-2); } .gh-pstep-num { position: absolute; top: 14px; inset-inline-end: 16px; font-size: 24px; font-weight: 900; color: var(--gh-border-default); } .gh-pstep-dot { width: 34px; height: 34px; border-radius: var(--gh-r-sm); margin-block-end: 12px; display: grid; place-items: center; font-size: 12px; font-weight: 800; } .gh-pstep b { font-size: 15px; font-weight: 800; display: block; } .gh-pstep-note { font-size: 12px; color: var(--gh-text-tertiary); display: block; margin-block-start: 4px; line-height: 1.7; } .gh-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 10px; } /* بخش «درباره مدرس» — عمداً فقط وقتی بیوگرافی از پنل «مدیریت محتوا» پر شده باشد رندر می‌شود. */ .gh-instructor { display: flex; align-items: flex-start; gap: 24px; max-width: 780px; margin-inline: auto; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); padding: 32px; } .gh-instructor-avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 900; background: linear-gradient(135deg, var(--gh-accent-surface), var(--gh-accent-border)); color: var(--gh-accent-text); } .gh-instructor-body { min-width: 0; } .gh-instructor-body b { font-size: 17px; font-weight: 800; display: block; } .gh-instructor-body > span { font-size: 13px; color: var(--gh-text-tertiary); } .gh-instructor-body p { font-size: 14.5px; line-height: 1.9; color: var(--gh-text-secondary); margin: 14px 0 0; } @media (max-width: 640px) { .gh-instructor { flex-direction: column; align-items: center; text-align: center; } } /* ---------- اسلایدر ابزارها (فونت/پالت) — صفحه‌ی اصلی ---------- پس‌زمینه‌ی هر اسلاید چند ستون کارت است که با CSS keyframes بی‌وقفه بالا/پایین می‌چرخند (جهت‌ها یک‌درمیان، تا حس ارگانیک‌تر از یک بلوک یکنواخت بدهد) — تیره و ثابت (نه تم‌محور) چون خودش زمینه‌ی مستقل یک بنر تمام‌عرض است، نه بخشی از رنگ‌آمیزی روشن/تاریک سایت. */ .gh-toolslider { position: relative; border-radius: var(--gh-r-2xl); overflow: hidden; height: 460px; } .gh-toolslide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .9s var(--gh-ease-out), transform .9s var(--gh-ease-out), visibility 0s linear .9s; } .gh-toolslide.is-active { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; } /* دو لایه: .gh-ts-bg ثابت/بی‌چرخش (فقط پس‌زمینه + پوششِ تیره‌کننده‌ی خواناییِ صاف)، .gh-ts-grid داخلش کمی مورب می‌چرخد — اگر پوشش هم روی همان لایه‌ی چرخیده می‌نشست، خودش هم کج می‌شد. */ .gh-ts-bg { position: absolute; inset: 0; overflow: hidden; background: var(--gh-stone-950); } .gh-ts-grid { position: absolute; inset: -80px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 20px; transform: rotate(-5deg); } .gh-ts-bg::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, var(--gh-stone-950) 0%, transparent 22%, transparent 78%, var(--gh-stone-950) 100%), radial-gradient(ellipse at center, color-mix(in srgb, var(--gh-black) 50%, transparent) 0%, color-mix(in srgb, var(--gh-black) 82%, transparent) 100%); } .gh-ts-col { overflow: hidden; height: 100%; } .gh-ts-col-track { display: flex; flex-direction: column; gap: 14px; will-change: transform; } .gh-ts-up .gh-ts-col-track { animation: gh-ts-scroll-up 26s linear infinite; } .gh-ts-down .gh-ts-col-track { animation: gh-ts-scroll-down 32s linear infinite; } @keyframes gh-ts-scroll-up { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes gh-ts-scroll-down { from { transform: translateY(-50%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .gh-ts-col-track { animation: none !important; } } .gh-ts-card { flex: none; background: color-mix(in srgb, var(--gh-white) 6%, transparent); border: 1px solid color-mix(in srgb, var(--gh-white) 10%, transparent); border-radius: var(--gh-r-lg); padding: 16px; } .gh-ts-font-card b { display: block; font-size: 15px; font-weight: 800; color: color-mix(in srgb, var(--gh-white) 92%, transparent); } .gh-ts-font-card span { font-size: 11px; color: color-mix(in srgb, var(--gh-white) 45%, transparent); } .gh-ts-pal-card { display: flex; height: 46px; padding: 0; overflow: hidden; } .gh-ts-pal-card span { flex: 1; } .gh-ts-panel { position: relative; z-index: 3; text-align: center; max-width: 460px; padding: 0 24px; } .gh-ts-panel .gh-hero-eyebrow { background: color-mix(in srgb, var(--gh-white) 10%, transparent); border-color: color-mix(in srgb, var(--gh-white) 18%, transparent); color: var(--gh-white); } .gh-ts-panel h2 { font-size: clamp(22px, 3.5vw, 30px); font-weight: 900; color: var(--gh-white); margin: 14px 0 10px; } .gh-ts-panel p { font-size: 14.5px; color: color-mix(in srgb, var(--gh-white) 75%, transparent); margin: 0 0 22px; line-height: 1.8; } .gh-toolslider-arrow { position: absolute; z-index: 5; inset-block-start: 50%; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; transform: translateY(-50%); border: 1px solid color-mix(in srgb, var(--gh-white) 24%, transparent); border-radius: var(--gh-radius-control); background: color-mix(in srgb, var(--gh-stone-950) 62%, transparent); color: var(--gh-white); box-shadow: var(--gh-shadow-1); backdrop-filter: blur(12px); cursor: pointer; transition: background var(--gh-dur-fast) var(--gh-ease-out), border-color var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out); } .gh-toolslider-arrow:hover { border-color: color-mix(in srgb, var(--gh-white) 48%, transparent); background: color-mix(in srgb, var(--gh-accent-solid) 78%, transparent); transform: translateY(-50%) scale(1.05); } .gh-toolslider-arrow:focus-visible { outline-color: var(--gh-white); } .gh-toolslider-arrow svg { width: 22px; height: 22px; } .gh-toolslider-prev { inset-inline-start: 20px; } .gh-toolslider-next { inset-inline-end: 20px; } @media (max-width: 760px) { .gh-toolslider { height: 420px; } .gh-ts-bg { grid-template-columns: repeat(2, 1fr); } .gh-toolslider-arrow { width: 42px; height: 42px; inset-block-start: auto; bottom: 18px; transform: none; } .gh-toolslider-arrow:hover { transform: scale(1.04); } } .gh-final-cta { background: linear-gradient(135deg, var(--gh-stone-900), var(--gh-stone-800)); border-radius: var(--gh-r-2xl); padding: 56px 32px; text-align: center; } .gh-contact-cta { margin-block-start: 36px; } .gh-contact-cta-actions { justify-content: center; } /* ---------- ارتباط با ما ---------- */ .gh-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-block-start: 8px; } .gh-contact-card { display: flex; align-items: center; gap: 14px; padding: 18px; text-decoration: none; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-lg); transition: all var(--gh-dur-fast) var(--gh-ease-out); } a.gh-contact-card:hover { border-color: var(--gh-accent-border); transform: translateY(-2px); box-shadow: var(--gh-shadow-2); } .gh-contact-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--gh-r-md); background: var(--gh-accent-surface); color: var(--gh-accent-text); } .gh-contact-ic svg { width: 20px; height: 20px; } .gh-contact-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gh-contact-info b { font-size: 13.5px; color: var(--gh-text-primary); } .gh-contact-info span { font-size: 13px; color: var(--gh-text-secondary); overflow-wrap: break-word; } /* ---------- قوانین و حریم خصوصی ---------- */ .gh-privacy-body { max-width: 720px; margin-inline: auto; font-size: 15px; line-height: 2.1; color: var(--gh-text-secondary); } .gh-privacy-body p { margin-block: 18px 0; } .gh-privacy-body p:first-child { margin-block-start: 0; } /* ---------- صفحه‌ی درباره‌ی من (/about/) ---------- */ .gh-about-hero { position: relative; overflow: hidden; padding-block: 64px 40px; } .gh-about-hero::before { content: ""; position: absolute; inset: -40% -20% auto; height: 130%; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 0%, color-mix(in srgb, var(--gh-accent-solid) 10%, transparent), transparent 70%); } .gh-about-hero-inner { position: relative; display: flex; align-items: center; gap: 40px; } .gh-about-photo { flex: none; width: 190px; height: 190px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--gh-accent-surface), var(--gh-accent-border)); box-shadow: 0 0 0 5px var(--gh-bg-page), 0 0 0 7px var(--gh-accent-border), var(--gh-shadow-3); } .gh-about-photo img { width: 100%; height: 100%; object-fit: cover; } .gh-about-photo span { font-size: 76px; font-weight: 900; color: var(--gh-accent-text); } .gh-about-id { min-width: 0; } .gh-about-id h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 900; margin: 14px 0 4px; text-wrap: balance; } .gh-about-headline { font-size: 17px; font-weight: 700; color: var(--gh-accent-text); margin: 0 0 16px; } .gh-about-social { margin: 0 0 22px; } .gh-about-social a { width: 40px; height: 40px; } .gh-about-social a svg { width: 19px; height: 19px; } .gh-about-proof { margin-block: 8px 0; } @media (max-width: 760px) { .gh-about-hero-inner { flex-direction: column; text-align: center; } .gh-about-photo { width: 150px; height: 150px; } .gh-about-photo span { font-size: 60px; } .gh-about-social { justify-content: center; } .gh-hero-ctas { justify-content: center; } } .gh-about-bio-sec { padding-block-start: 8px; } .gh-about-bio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; } .gh-about-bio h2 { font-size: 22px; font-weight: 900; margin: 0 0 16px; } .gh-about-bio p { font-size: 15.5px; line-height: 2; color: var(--gh-text-secondary); margin: 0 0 16px; } .gh-about-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: var(--gh-sticky-offset); } .gh-about-card { background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); padding: 22px; } .gh-about-card h3 { font-size: 13.5px; font-weight: 800; margin: 0 0 14px; color: var(--gh-text-tertiary); letter-spacing: .02em; } .gh-about-card .gh-chips { margin: 0; } @media (max-width: 900px) { .gh-about-bio-layout { grid-template-columns: 1fr; } .gh-about-side { position: static; } } /* دوره‌ها و نمونه‌کارهای صفحه‌ی درباره — همیشه ۴ ستون (همان الگوی آرشیو/خانه)، صرف‌نظر از body class */ .gh-about .gh-grid-cards { grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1280px) { .gh-about .gh-grid-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .gh-about .gh-grid-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .gh-about .gh-grid-cards { grid-template-columns: 1fr; } } /* ---------- باندل‌ساز سریع (خانه + آرشیو دوره‌ها) ---------- */ .gh-qb { position: relative; overflow: hidden; display: grid; border: 1px solid var(--gh-border-default); border-radius: var(--gh-radius-section); background: linear-gradient(145deg, color-mix(in srgb, var(--gh-accent-surface) 36%, transparent), transparent 42%), var(--gh-bg-raised); box-shadow: var(--gh-shadow-2); transition: border-color var(--gh-dur-base) var(--gh-ease-out); } .gh-qb.is-ready { border-color: var(--gh-accent-solid); } @media (hover: hover) { .gh-qb:hover { border-color: var(--gh-accent-solid); } } .gh-qb-main { min-width: 0; padding: clamp(26px, 3.5vw, 42px); } .gh-qb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-block-end: 28px; } .gh-qb-heading { max-width: 700px; } .gh-qb-heading h2 { margin: 14px 0 6px; font-size: clamp(25px, 3vw, 38px); font-weight: 950; line-height: 1.45; } .gh-qb-heading p { margin: 0; color: var(--gh-text-secondary); font-size: 14.5px; } .gh-qb-head-actions { display: flex; align-items: center; gap: 10px; flex: none; } .gh-qb-live { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 7px 12px; border: 1px solid var(--gh-border-default); border-radius: var(--gh-radius-control); background: var(--gh-bg-surface); color: var(--gh-text-secondary); font-size: 11.5px; font-weight: 750; } .gh-qb-live strong { display: grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 5px; border-radius: var(--gh-radius-compact); background: var(--gh-accent-surface); color: var(--gh-accent-text); font-size: 14px; font-weight: 950; } .gh-qb-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .gh-qb-chip { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 154px; padding: 18px; cursor: pointer; border: 1.5px solid var(--gh-border-default); border-radius: var(--gh-radius-group); background: color-mix(in srgb, var(--gh-bg-surface) 92%, transparent); box-shadow: none; transition: transform var(--gh-dur-base) var(--gh-ease-out), border-color var(--gh-dur-base) var(--gh-ease-out), background var(--gh-dur-base) var(--gh-ease-out), box-shadow var(--gh-dur-base) var(--gh-ease-out); } .gh-qb-chip input { position: absolute; opacity: 0; pointer-events: none; } .gh-qb-chip:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gh-qb-course) 48%, var(--gh-border-default)); box-shadow: 0 7px 18px color-mix(in srgb, var(--gh-qb-course) 8%, transparent); } .gh-qb-chip:has(input:focus-visible) { box-shadow: var(--gh-focus-ring); } .gh-qb-chip.is-on { transform: translateY(-4px); border-color: var(--gh-qb-course); background: color-mix(in srgb, var(--gh-qb-course) 9%, var(--gh-bg-surface)); box-shadow: 0 9px 22px color-mix(in srgb, var(--gh-qb-course) 11%, transparent); } .gh-qb-dot { margin-block-end: 24px; } .gh-qb-name { max-width: calc(100% - 24px); color: var(--gh-text-primary); font-size: 14px; font-weight: 850; line-height: 1.6; } .gh-qb-price { margin-block-start: auto; padding-block-start: 8px; color: var(--gh-text-tertiary); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; } .gh-qb-check { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--gh-border-strong); border-radius: 50%; background: var(--gh-bg-raised); color: transparent; transition: all var(--gh-dur-fast) var(--gh-ease-out); } .gh-qb-check svg { width: 12px; height: 12px; transform: scale(0); transition: transform var(--gh-dur-fast) var(--gh-ease-out); } .gh-qb-chip.is-on .gh-qb-check { border-color: var(--gh-qb-course); background: var(--gh-qb-course); color: var(--gh-white); } .gh-qb-chip.is-on .gh-qb-check svg { transform: scale(1); } .gh-qb-side { display: grid; grid-template-columns: minmax(310px, 1.1fr) minmax(280px, 1fr) auto; align-items: center; gap: 26px; padding: 22px clamp(26px, 3.5vw, 42px); border-block-start: 1px solid var(--gh-border-default); background: color-mix(in srgb, var(--gh-bg-sunken) 76%, transparent); } .gh-qb-discount { min-width: 0; } .gh-qb-side-label { display: block; margin-block-end: 9px; color: var(--gh-text-tertiary); font-size: 10.5px; font-weight: 850; } .gh-qb-steps { display: flex; gap: 8px; } .gh-qb-step { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; height: 38px !important; min-width: 0; padding-inline: 10px; border: 1px solid var(--gh-border-default); border-radius: var(--gh-radius-compact); background: var(--gh-bg-surface); color: var(--gh-text-tertiary); transition: all .35s var(--gh-ease-out); } .gh-qb-step b { font-size: 13px; font-weight: 950; } .gh-qb-step small { font-size: 10.5px; font-weight: 700; white-space: nowrap; } .gh-qb-step.is-on { border-color: var(--gh-accent-solid); background: var(--gh-accent-surface); color: var(--gh-accent-text); box-shadow: 0 6px 14px color-mix(in srgb, var(--gh-accent-solid) 10%, transparent); } .gh-qb-result { min-width: 0; } .gh-qb-summary { margin: 0; color: var(--gh-text-primary); font-size: 13.5px; font-weight: 800; line-height: 1.8; } .gh-qb-summary b { color: var(--gh-accent-text); font-size: 15px; font-variant-numeric: tabular-nums; } .gh-qb-summary .gh-qb-save { display: inline; margin-inline-start: 6px; color: var(--gh-success-text); } .gh-qb-transfer { display: flex; align-items: center; gap: 5px; margin-block-start: 4px; color: var(--gh-text-tertiary); font-size: 10.5px; } .gh-qb-transfer svg { width: 13px; height: 13px; color: var(--gh-success-text); } .gh-qb-action .gh-btn { min-width: 220px; justify-content: center; white-space: nowrap; } /* دکمه‌ی تکمیل تا انتخاب زیر ۲ دوره غیرفعال به نظر می‌رسد. */ .gh-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } @media (max-width: 1050px) { .gh-qb-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gh-qb-side { grid-template-columns: 1fr 1fr; } .gh-qb-action { grid-column: 1 / -1; } .gh-qb-action .gh-btn { width: 100%; } } @media (max-width: 700px) { .gh-qb-main { padding: 24px 18px; } .gh-qb-head { align-items: flex-start; flex-direction: column; gap: 18px; } .gh-qb-head-actions { width: 100%; justify-content: space-between; } .gh-qb-chips { grid-template-columns: 1fr; } .gh-qb-chip { min-height: 132px; } .gh-qb-side { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px; } .gh-qb-action { grid-column: auto; } } .gh-final-cta h2 { color: var(--gh-stone-50); font-size: clamp(22px, 3.5vw, 30px); font-weight: 900; margin: 0; } .gh-final-cta p { color: var(--gh-stone-400); font-size: 14.5px; margin: 10px auto 24px; max-width: 440px; } @media (max-width: 1024px) { .gh-course-layout { grid-template-columns: 1fr; } .gh-buybox { position: static; } .gh-path-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .gh-proof-band { grid-template-columns: repeat(2, 1fr); } .gh-path-steps { grid-template-columns: 1fr; } .gh-mobile-buybar { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 90; background: color-mix(in srgb, var(--gh-bg-raised) 94%, transparent); backdrop-filter: blur(12px); border-block-start: 1px solid var(--gh-border-default); padding: 12px 16px; gap: 12px; align-items: center; } .gh-mobile-buybar .gh-btn { flex: 1; } .single-gh_course .gh-footer { margin-block-end: 76px; } } /* ---------- باندل‌ساز ---------- */ /* همان درسِ .gh-course-layout — بدون حداقل‌ارتفاع، وقتی خلاصه‌ی سبد از ستون انتخاب دوره‌ها بلندتر شود (سبد کم‌آیتم)، sticky اصلاً فضایی برای فعال‌شدن ندارد. */ .gh-bundle-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; margin-block-start: 32px; } .gh-bundle-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-block-end: 20px; } .gh-bb-item { position: relative; display: flex; align-items: flex-start; gap: 13px; cursor: pointer; background: var(--gh-bg-raised); border: 1.5px solid var(--gh-border-default); border-radius: var(--gh-radius-group); padding: 18px; transition: all var(--gh-dur-fast) var(--gh-ease-out); } .gh-bb-item:hover { border-color: var(--gh-border-strong); } .gh-bb-item input { position: absolute; opacity: 0; } /* input مخفی در یک واحد نیست (برخلاف gh-chip-check) پس input:focus-visible + span کار نمی‌کند؛ :has() روی خودِ کارت — همان الگوی precedented body:has(dialog[open]) در همین فایل. */ .gh-bb-item:has(input:focus-visible) { outline: 2px solid var(--gh-accent-solid); outline-offset: 2px; border-radius: var(--gh-r-lg); } .gh-bb-item.is-on { border-color: var(--gh-accent-solid); background: color-mix(in srgb, var(--gh-accent-surface) 45%, var(--gh-bg-raised)); } .gh-bb-dot { width: 42px; height: 42px; border-radius: var(--gh-r-md); flex: none; display: grid; place-items: center; font-size: 14px; font-weight: 800; letter-spacing: .2px; font-variant-caps: normal; } /* مخفف دوره روی نقطه‌ی رنگی — در هر دو تم سفید (درخواست کاربر)؛ !important تا بر رنگ اینلاین on-solid هم غالب شود */ .gh-bb-dot, .gh-pitch-dot, .gh-popup-dot, .gh-search-dot, .gh-mycourse-dot, .gh-pstep-dot { color: color-mix(in srgb, var(--gh-white) 95%, transparent) !important; } .gh-bb-info { flex: 1; min-width: 0; } .gh-bb-info b { font-size: 14.5px; font-weight: 800; display: block; } .gh-bb-pitch { font-size: 12px; color: var(--gh-text-tertiary); display: block; margin-block-start: 3px; } .gh-bb-price { font-size: 13px; font-weight: 800; display: block; margin-block-start: 8px; font-variant-numeric: tabular-nums; } .gh-bb-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; } /* دکمه‌ی جزئیات کارت باندل — آفوردنس استاندارد info: دایره‌ی کوچک ثانویه که با هاور رنگ برند می‌گیرد */ .gh-bb-more { width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--gh-border-default); border-radius: 50%; background: var(--gh-bg-surface); color: var(--gh-text-tertiary); transition: all var(--gh-dur-fast) var(--gh-ease-out); } .gh-bb-more svg { width: 15px; height: 15px; } .gh-bb-more:hover { border-color: var(--gh-accent-border); background: var(--gh-accent-surface); color: var(--gh-accent-text); } .gh-bb-check { width: 24px; height: 24px; border-radius: var(--gh-r-sm); display: grid; place-items: center; border: 1.5px solid var(--gh-border-strong); color: transparent; font-weight: 800; font-size: 13px; transition: all var(--gh-dur-fast) var(--gh-ease-out); } .gh-bb-item.is-on .gh-bb-check { background: var(--gh-accent-solid); border-color: var(--gh-accent-solid); color: var(--gh-accent-on-solid); } .gh-bb-sum { position: sticky; top: var(--gh-sticky-offset); background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); padding: 24px; display: flex; flex-direction: column; gap: 16px; } .gh-bb-sum h3 { font-size: 16px; font-weight: 800; margin: 0; } .gh-bb-tiers { display: flex; gap: 6px; } .gh-tier { flex: 1; text-align: center; font-size: 11.5px; font-weight: 700; padding: 8px 4px; border-radius: var(--gh-r-sm); background: var(--gh-bg-sunken); color: var(--gh-text-tertiary); border: 1px solid var(--gh-border-subtle); transition: all var(--gh-dur-base) var(--gh-ease-out); } .gh-tier b { display: block; font-size: 14px; } .gh-tier.is-hit { background: var(--gh-success-surface); color: var(--gh-success-text); border-color: color-mix(in srgb, var(--gh-success-text) 30%, transparent); } /* پاپ پله‌ی تازه فعال‌شده + کانفتی «برنده شدی» (bundle.js هنگام بالا رفتن نرخ تخفیف می‌سازد) */ .gh-tier.is-pop { animation: gh-tier-pop .5s var(--gh-ease-out); } @keyframes gh-tier-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } } .gh-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .gh-confetti i { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; border-radius: 2px; background: var(--c); opacity: 0; animation: gh-confetti-fly var(--dur) var(--gh-ease-out) var(--delay) forwards; } .gh-confetti i:nth-child(3n) { border-radius: 50%; width: 7px; height: 7px; } .gh-confetti i:nth-child(4n) { width: 5px; height: 11px; } @keyframes gh-confetti-fly { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } } .gh-bb-rows { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; border-block-start: 1px dashed var(--gh-border-default); padding-block-start: 14px; } .gh-bb-row { display: flex; justify-content: space-between; color: var(--gh-text-secondary); } .gh-bb-row b { font-variant-numeric: tabular-nums; } .gh-bb-row.is-discount { color: var(--gh-text-tertiary); font-weight: 700; transition: color var(--gh-dur-fast) var(--gh-ease-out); } .gh-bb-row.is-discount.is-active { color: var(--gh-success-text); } .gh-bb-row.is-total { font-size: 16px; font-weight: 900; color: var(--gh-text-primary); border-block-start: 1px solid var(--gh-border-default); padding-block-start: 12px; } .gh-bb-hint { font-size: 12.5px; background: var(--gh-warning-surface); color: var(--gh-warning-text); border: 1px solid color-mix(in srgb, var(--gh-warning-text) 25%, transparent); border-radius: var(--gh-r-sm); padding: 10px 13px; margin: 0; } .gh-team-box { border: 1.5px dashed var(--gh-border-strong); border-radius: var(--gh-r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .gh-team-box[hidden] { display: none; } .gh-seats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gh-seats input { width: 64px; height: 44px; text-align: center; font: inherit; font-weight: 800; font-size: 16px; border: 1.5px solid var(--gh-border-default); border-radius: var(--gh-r-sm); background: var(--gh-bg-surface); color: var(--gh-text-primary); } .gh-seats .gh-btn { width: 44px; padding: 0; font-size: 20px; } .gh-seats-label { font-size: 12.5px; font-weight: 700; color: var(--gh-success-text); } /* ---------- پاپ‌آپ دوره ---------- */ .gh-popup { border: none; border-radius: var(--gh-radius-card); background: var(--gh-bg-raised); color: var(--gh-text-primary); box-shadow: var(--gh-shadow-4); padding: 26px; width: min(420px, calc(100vw - 40px)); font-family: inherit; } .gh-popup::backdrop { background: color-mix(in srgb, var(--gh-stone-950) 55%, transparent); backdrop-filter: blur(4px); } /* تا پاپ‌آپی باز است، صفحه‌ی پشت قفل می‌شود (ورود، اطلاعات دوره و…) */ body:has(dialog[open]) { overflow: hidden; } .gh-popup-head { display: flex; align-items: center; gap: 10px; margin-block-end: 8px; } .gh-popup-head h2 { font-size: 17px; font-weight: 800; margin: 0; flex: 1; } /* نقطه‌ی رنگی پاپ‌آپ حالا مخفف دوره را هم نشان می‌دهد (Ps/Ai/…) — هماهنگ با gh-bb-dot و نتایج جست‌وجو */ .gh-popup-dot { width: 34px; height: 34px; border-radius: var(--gh-r-sm); flex: none; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; letter-spacing: .2px; } .gh-popup-pitch { font-size: 13.5px; color: var(--gh-text-secondary); margin: 0 0 12px; } .gh-popup-points { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--gh-text-secondary); } .gh-popup-points li { display: flex; align-items: center; } .gh-popup-points svg { width: 14px; height: 14px; color: var(--gh-success-text); margin-inline-end: 7px; flex-shrink: 0; } /* متادیتای پاپ‌آپ — آیتم‌های آیکون‌دار به‌جای متن نقطه‌جداشده */ .gh-popup-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; font-weight: 600; color: var(--gh-text-secondary); margin-block-end: 18px; } .gh-popup-meta span { display: inline-flex; align-items: center; gap: 6px; } .gh-popup-meta svg { width: 14px; height: 14px; color: var(--gh-accent-text); flex: none; } /* ---------- کراپر تصویر (آواتار/نمونه‌کار) ---------- */ .gh-crop-modal { width: min(380px, calc(100vw - 40px)); } .gh-crop-modal h2 { font-size: 16px; font-weight: 800; margin: 0 0 14px; } .gh-crop-stage { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; position: relative; border-radius: var(--gh-r-md); background: var(--gh-black); cursor: grab; touch-action: none; } .gh-crop-stage:active { cursor: grabbing; } .gh-crop-stage img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; } .gh-crop-controls { display: flex; align-items: center; gap: 10px; margin-block: 16px; } .gh-crop-controls svg { width: 15px; height: 15px; color: var(--gh-text-tertiary); flex-shrink: 0; } .gh-crop-controls input[type=range] { flex: 1; accent-color: var(--gh-accent-solid); } .gh-crop-hint { font-size: 12px; color: var(--gh-text-tertiary); text-align: center; margin: 0 0 14px; } /* ---------- اجزای فرم پایه (ورود، پروفایل، ...) — سراسری چون در پاپ‌آپ ورود هم لازم است ---------- */ .gh-field { display: flex; flex-direction: column; gap: 7px; } .gh-field label { font-size: 13.5px; font-weight: 700; } .gh-field input, .gh-field select { height: 48px; border-radius: var(--gh-r-sm); border: 1.5px solid var(--gh-border-default); background: var(--gh-bg-surface); color: var(--gh-text-primary); font: inherit; font-size: 14.5px; padding-inline: 14px; width: 100%; } .gh-field input:focus, .gh-field select:focus { outline: none; border-color: var(--gh-accent-solid); box-shadow: var(--gh-focus-ring); } .gh-hint { font-size: 12px; color: var(--gh-text-tertiary); } .gh-otp { display: flex; gap: 10px; justify-content: center; margin-block: 8px; } .gh-otp input { width: 56px; height: 62px; text-align: center; font-size: 24px; font-weight: 800; border: 1.5px solid var(--gh-border-default); border-radius: var(--gh-r-sm); background: var(--gh-bg-surface); color: var(--gh-text-primary); font-family: inherit; } .gh-otp input:focus { outline: none; border-color: var(--gh-accent-solid); box-shadow: var(--gh-focus-ring); } .gh-login-msg { min-height: 22px; font-size: 13px; font-weight: 700; margin: 12px 0 0; text-align: center; } .gh-login-msg.is-error { color: var(--gh-danger-text); } .gh-login-msg.is-ok { color: var(--gh-success-text); } .gh-login-modal { width: min(400px, calc(100vw - 40px)); padding: 32px; border-radius: var(--gh-r-2xl); position: relative; } .gh-login-modal h2 { font-size: 20px; font-weight: 800; margin: 0 0 6px; } .gh-login-modal p { font-size: 13.5px; color: var(--gh-text-secondary); margin: 0 0 18px; } .gh-login-modal .gh-btn { width: 100%; margin-block-start: 14px; } .gh-login-modal-close { position: absolute; top: 16px; left: 16px; width: 32px; height: 32px; display: grid; place-items: center; border: none; background: var(--gh-bg-sunken); color: var(--gh-text-secondary); border-radius: 50%; cursor: pointer; } .gh-login-modal-close:hover { background: var(--gh-border-default); color: var(--gh-text-primary); } .gh-login-modal-close svg { width: 16px; height: 16px; } /* ---------- جست‌وجوی سراسری هدر ---------- */ /* ⚠️ درس آموخته (این جلسه): display روی خودِ .gh-search-modal (بدون [open]) قانون بومی مرورگر dialog:not([open]){display:none} را می‌شکند — چون سلکتور کلاس از سلکتور ویژگی/عنصر قوی‌تر است، دیالوگ بسته هم در جریان عادی صفحه دیده می‌شد. display:flex فقط باید وقتی [open] هست اعمال شود. */ /* ارتفاع ثابت (الگوی پالت فرمان Raycast/Linear): پنل بین حالت‌های خالی/نتیجه نمی‌پرد و بخش «اخیر/پرطرفدار» جای کافی دارد — dvh تا با باز شدن کیبورد موبایل بدنه له و اسکرول‌خور نشود. */ .gh-search-modal { width: min(600px, calc(100vw - 40px)); height: min(62vh, 580px); height: min(62dvh, 580px); padding: 0; overflow: hidden; } .gh-search-modal[open] { display: flex; flex-direction: column; } .gh-search-modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-block-end: 1px solid var(--gh-border-subtle); flex: none; } .gh-search-modal-head:focus-within { border-block-end-color: var(--gh-border-subtle); box-shadow: none; } .gh-search-modal-head > svg { width: 19px; height: 19px; color: var(--gh-text-tertiary); flex-shrink: 0; } .gh-search-modal-head input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 15px; color: var(--gh-text-primary); outline: none; } .gh-search-modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; overscroll-behavior: contain; } .gh-search-sec-title { font-size: 11.5px; font-weight: 800; color: var(--gh-text-tertiary); margin: 0 0 8px; } .gh-search-sec-title:not(:first-child) { margin-block-start: 16px; } .gh-search-chips { display: flex; flex-wrap: wrap; gap: 8px; } .gh-search-chip { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--gh-bg-sunken); color: var(--gh-text-secondary); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-full); padding: 6px 14px; transition: background var(--gh-dur-fast) var(--gh-ease-out); } .gh-search-chip:hover { background: var(--gh-bg-surface); border-color: var(--gh-border-strong); } .gh-search-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .gh-search-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--gh-r-md); text-decoration: none; color: inherit; transition: background var(--gh-dur-fast) var(--gh-ease-out); } .gh-search-item:hover, .gh-search-item.is-active { background: var(--gh-bg-sunken); } .gh-search-item:focus-visible { outline: 2px solid var(--gh-accent-solid); outline-offset: -2px; border-radius: var(--gh-r-md); } .gh-search-thumb { width: 40px; height: 40px; border-radius: var(--gh-r-sm); object-fit: cover; flex: none; display: block; } .gh-search-thumb-ph { background: var(--gh-bg-sunken); } .gh-search-dot { width: 40px; height: 40px; border-radius: var(--gh-r-sm); flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 800; } .gh-search-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gh-search-item-body b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gh-search-item-body b mark { background: var(--gh-accent-surface); color: var(--gh-accent-text); border-radius: 3px; padding: 0 1px; } .gh-search-item-meta { font-size: 11.5px; color: var(--gh-text-tertiary); } /* @keyframes gh-typing از بخش چت هوشمند همین فایل دوباره استفاده می‌شود — بدون تعریف موازی */ .gh-search-loading { display: flex; justify-content: center; gap: 4px; padding: 24px 0; } .gh-search-loading i { width: 6px; height: 6px; border-radius: 50%; background: var(--gh-text-tertiary); animation: gh-typing 1.2s infinite; } .gh-search-loading i:nth-child(2) { animation-delay: .18s; } .gh-search-loading i:nth-child(3) { animation-delay: .36s; } .gh-search-empty, .gh-search-msg { text-align: center; padding: 24px 10px; color: var(--gh-text-tertiary); font-size: 13.5px; } .gh-search-empty p { margin: 0 0 12px; } /* ---------- کدهای تیمی ---------- */ .gh-seat-codes { background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-lg); padding: 20px 24px; margin-block: 20px; } .gh-seat-codes code { background: var(--gh-bg-sunken); border: 1px dashed var(--gh-border-strong); border-radius: var(--gh-r-xs); padding: 4px 10px; } @media (max-width: 900px) { .gh-bundle-layout { grid-template-columns: 1fr; } .gh-bundle-pick { grid-template-columns: 1fr; } .gh-bb-sum { position: static; } } /* ---------- پروفایل عمومی دانشجو + نمونه‌کارها ---------- */ .gh-student-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-block-end: 36px; } .gh-student-head h1 { font-size: clamp(22px, 3.5vw, 30px); font-weight: 900; margin: 4px 0 0; } .gh-student-stats { display: flex; gap: 18px; margin-block-start: 6px; } .gh-student-stats span { font-size: 12.5px; color: var(--gh-text-tertiary); } .gh-student-stats b { display: block; font-size: 18px; font-weight: 900; color: var(--gh-text-primary); font-variant-numeric: tabular-nums; } .gh-pf-public-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .gh-pf-public-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--gh-r-lg); overflow: hidden; border: 1px solid var(--gh-border-default); text-decoration: none; background: var(--gh-bg-sunken); transition: transform var(--gh-dur-base) var(--gh-ease-out); } .gh-pf-public-card:hover { transform: translateY(-4px); } .gh-pf-public-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .gh-pf-public-fallback { display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 4/3; font-size: 48px; font-weight: 900; color: var(--gh-accent-text); background: linear-gradient(135deg, var(--gh-accent-surface), var(--gh-bg-raised)); } .gh-pf-public-title { position: absolute; inset-inline: 0; bottom: 0; padding: 24px 14px 12px; background: linear-gradient(to top, color-mix(in srgb, var(--gh-stone-950) 82%, transparent), transparent); color: var(--gh-white); font-size: 13px; font-weight: 700; } /* ⚠️ همان الگوی .gh-course-layout/.gh-bundle-layout: بدون حداقل‌ارتفاع، وقتی محتوای ستون اصلی (تصویر+گالری) از باکس چسبان سایدبار کوتاه‌تر باشد، sticky فضایی برای چسبیدن پیدا نمی‌کند. */ .gh-project-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; padding-block: 26px 60px; } .gh-project-figure { margin: 0; border-radius: var(--gh-r-lg); overflow: hidden; border: 1px solid var(--gh-border-default); } .gh-project-figure img { width: 100%; display: block; border-radius: calc(var(--gh-r-lg) - 1px); } .gh-project-media > .gh-project-figure + .gh-project-editor-content, .gh-project-media > .gh-project-figure + .gh-project-gallery { margin-block-start: 24px; } .gh-project-gallery { display: flex; flex-direction: column; gap: 24px; } .gh-project-editor-content > * { margin-block: 0; } .gh-project-editor-content > * + * { margin-block-start: 24px; } .gh-project-editor-content figure { margin-inline: 0; overflow: hidden; border-radius: var(--gh-r-lg); } .gh-project-editor-content img { display: block; max-width: 100%; height: auto; border-radius: var(--gh-r-lg); } .gh-project-editor-content .wp-block-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .gh-project-editor-content .wp-block-gallery.has-nested-images figure.wp-block-image { width: 100% !important; min-width: 0; margin: 0; align-self: stretch; justify-self: stretch; } .gh-project-editor-content .wp-block-gallery figure > a { display: block; width: 100%; height: 100%; } .gh-project-editor-content .wp-block-gallery img { width: 100% !important; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: var(--gh-r-md); } .gh-project-side-stack { position: sticky; top: var(--gh-sticky-offset); min-width: 0; display: flex; flex-direction: column; gap: 12px; } /* باکس اطلاعات نمونه‌کار — همان زبان بصری .gh-buybox (کارت چسبان)، نه یک aside برهنه‌ی قبلی. */ .gh-project-side { position: static; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); box-shadow: var(--gh-shadow-2); padding: 22px; } .gh-project-side h1 { font-size: 22px; font-weight: 900; margin: 0 0 10px; } .gh-project-desc { margin-block-start: 14px; font-size: 14px; line-height: 1.9; color: var(--gh-text-secondary); } .gh-project-desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .gh-project-more { display: inline-block; margin-block-start: 8px; padding: 0; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--gh-accent-text); cursor: pointer; } .gh-project-more:hover { text-decoration: underline; } /* کارت سازنده + کارت دوره (v2 — استاندارد «تمام ردیف کلیک‌پذیر»): یک ردیف با آواتار/نشان، عنوان دوخطی و فلش انتها؛ کل ردیف لینک است، نه یک ریزلینک زیر متن یا جمله+دکمه‌ی جدا. */ .gh-maker-card { display: flex; align-items: center; gap: 12px; margin-block: 18px; text-decoration: none; color: inherit; padding: 10px 12px; border-radius: var(--gh-r-lg); border: 1px solid var(--gh-border-default); background: var(--gh-bg-raised); transition: all var(--gh-dur-fast) var(--gh-ease-out); } .gh-maker-card:not(.is-static):hover { border-color: var(--gh-border-strong); background: var(--gh-bg-sunken); transform: translateY(-1px); } .gh-maker-card.is-static { cursor: default; } .gh-maker-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .gh-maker-info b { font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gh-maker-info small { font-size: 11.5px; color: var(--gh-text-tertiary); font-weight: 600; } .gh-maker-arrow { width: 16px; height: 16px; flex: none; color: var(--gh-text-tertiary); transition: transform var(--gh-dur-fast) var(--gh-ease-out); } /* آیکون از قبل با rotate(180) برای RTL چپ‌گرد شده؛ هاور همان جهت را ادامه می‌دهد (translateX منفی = بیشتر به چپ) */ .gh-maker-card:hover .gh-maker-arrow { transform: translateX(-3px); color: var(--gh-accent-text); } .gh-project-related { margin-block: 18px 14px; padding-block-start: 16px; border-block-start: 1px solid var(--gh-border-subtle); } .gh-project-related h2 { margin: 0 0 10px; color: var(--gh-text-secondary); font-size: 13.5px; font-weight: 850; } .gh-project-related-tags { display: flex; flex-wrap: wrap; gap: 8px; } .gh-project-course-tag { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; padding: 8px 11px; border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-full); background: var(--gh-bg-sunken); color: var(--gh-text-primary); text-decoration: none; font-size: 12.5px; font-weight: 800; line-height: 1.5; transition: border-color var(--gh-dur-fast) var(--gh-ease-out), background var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out); } .gh-project-course-tag > span { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--gh-related-course); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gh-related-course) 12%, transparent); } .gh-project-course-tag:hover, .gh-project-course-tag:focus-visible { border-color: color-mix(in srgb, var(--gh-related-course) 48%, var(--gh-border-default)); background: var(--gh-related-course-surface); transform: translateY(-1px); } .gh-project-course-tag:focus-visible { outline: none; box-shadow: var(--gh-focus-ring); } .gh-project-share { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); box-shadow: var(--gh-shadow-1); } .gh-project-share .gh-fab { width: 42px; height: 42px; box-shadow: none; } .gh-project-share .gh-fab svg { width: 18px; height: 18px; } .gh-project-share .gh-fab::after { left: 50%; top: auto; bottom: calc(100% + 9px); transform: translate(-50%, 4px); } .gh-project-share .gh-fab:hover::after, .gh-project-share .gh-fab:focus-visible::after { transform: translate(-50%, 0); } @media (max-width: 900px) { .gh-project-layout { grid-template-columns: 1fr; min-height: 0; } .gh-project-side-stack { position: static; } .gh-project-editor-content .wp-block-gallery { gap: 12px; } } @media (max-width: 560px) { .gh-project-media > .gh-project-figure + .gh-project-editor-content, .gh-project-media > .gh-project-figure + .gh-project-gallery { margin-block-start: 18px; } .gh-project-editor-content > * + * { margin-block-start: 18px; } .gh-project-editor-content .wp-block-gallery { grid-template-columns: 1fr; } } /* ---------- لایت‌باکس مشترک تصاویر مقاله و نمونه‌کار ---------- track افقیِ scroll-snap هم با سوایپ موبایل و ترک‌پد کار می‌کند و هم با فلش‌های دستی/کیبورد. */ [data-lightbox-gallery] img.is-gh-lightbox-image { cursor: zoom-in; transition: filter var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out); } [data-lightbox-gallery] img.is-gh-lightbox-image:hover { filter: brightness(.96); } [data-lightbox-gallery] img.is-gh-lightbox-image:focus-visible { outline: 3px solid var(--gh-accent-border); outline-offset: 3px; } .gh-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: color-mix(in srgb, var(--gh-stone-950) 96%, transparent); color: var(--gh-white); overflow: hidden; } .gh-lightbox::backdrop { background: color-mix(in srgb, var(--gh-black) 72%, transparent); backdrop-filter: blur(10px); } .gh-lightbox-shell { display: grid; grid-template-rows: 64px minmax(0, 1fr) 72px; width: 100%; height: 100%; } .gh-lightbox-head { display: flex; align-items: center; gap: 14px; padding-inline: clamp(16px, 4vw, 48px); border-block-end: 1px solid color-mix(in srgb, var(--gh-white) 12%, transparent); } .gh-lightbox-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--gh-white) 78%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gh-lightbox-count { direction: ltr; font-size: 12px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--gh-white) 62%, transparent); } .gh-lightbox-close, .gh-lightbox-nav { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--gh-white) 18%, transparent); border-radius: var(--gh-r-md); background: color-mix(in srgb, var(--gh-white) 8%, transparent); color: var(--gh-white); cursor: pointer; transition: background var(--gh-dur-fast) var(--gh-ease-out), border-color var(--gh-dur-fast) var(--gh-ease-out); } .gh-lightbox-close:hover, .gh-lightbox-nav:hover { background: color-mix(in srgb, var(--gh-white) 16%, transparent); border-color: color-mix(in srgb, var(--gh-white) 32%, transparent); } .gh-lightbox-nav:disabled { opacity: .3; cursor: default; pointer-events: none; } .gh-lightbox-close svg, .gh-lightbox-nav svg { width: 20px; height: 20px; } .gh-lightbox-track { display: flex; min-height: 0; overflow-x: auto; overflow-y: hidden; direction: ltr; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gh-white) 28%, transparent) transparent; } .gh-lightbox-slide { flex: 0 0 100%; min-width: 0; margin: 0; padding: clamp(16px, 3vw, 38px); display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 12px; scroll-snap-align: start; scroll-snap-stop: always; } .gh-lightbox-slide img { display: block; max-width: min(1280px, 92vw); max-height: calc(100dvh - 190px); width: auto; height: auto; object-fit: contain; border-radius: var(--gh-r-lg); box-shadow: 0 18px 70px color-mix(in srgb, var(--gh-black) 48%, transparent); } .gh-lightbox-caption { max-width: 760px; min-height: 20px; margin: 0; color: color-mix(in srgb, var(--gh-white) 72%, transparent); font-size: 12.5px; line-height: 1.7; text-align: center; } .gh-lightbox-controls { display: flex; align-items: center; justify-content: center; gap: 12px; border-block-start: 1px solid color-mix(in srgb, var(--gh-white) 12%, transparent); } .gh-lightbox-hint { font-size: 11.5px; color: color-mix(in srgb, var(--gh-white) 48%, transparent); margin-inline: 8px; } @media (max-width: 640px) { .gh-lightbox-shell { grid-template-rows: 56px minmax(0, 1fr) 64px; } .gh-lightbox-slide { padding: 12px; } .gh-lightbox-slide img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 165px); border-radius: var(--gh-r-md); } .gh-lightbox-hint { display: none; } .gh-lightbox-close, .gh-lightbox-nav { width: 40px; height: 40px; } } /* ---------- بخش نظرات (مقاله + نمونه‌کار) — یک زبان بصری، دو call site (template-parts/comments.php) ---------- */ .gh-comments { margin-block-start: 44px; } .gh-comments-title { font-size: 19px; font-weight: 800; margin: 0 0 20px; } .gh-comments-list, .gh-comments-list .children { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .gh-comments-list { margin-block-end: 28px; } .gh-comments-list .children { margin-block-start: 14px; padding-inline-start: 30px; } .gh-comment { display: flex; gap: 12px; } .gh-comment-avatar { flex: none; } .gh-comment-avatar img { border-radius: 50%; display: block; } .gh-comment-body { flex: 1; min-width: 0; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-md); padding: 12px 16px; } .gh-comment-head { display: flex; align-items: baseline; gap: 8px; margin-block-end: 6px; flex-wrap: wrap; } .gh-comment-head b { font-size: 13.5px; font-weight: 800; } .gh-comment-head time { font-size: 11.5px; color: var(--gh-text-tertiary); } .gh-comment-rating { margin-inline-start: auto; color: var(--gh-warning-solid); direction: ltr; font-size: 13px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; } .gh-comment-text { font-size: 13.5px; line-height: 1.85; color: var(--gh-text-secondary); } .gh-comment-text p { margin: 0 0 10px; } .gh-comment-text p:last-child { margin-block-end: 0; } .gh-comment-pending { font-size: 12.5px; font-weight: 600; color: var(--gh-warning-text); background: var(--gh-warning-surface); border-radius: var(--gh-r-sm); padding: 8px 12px; margin: 0; } .gh-comment-body .comment-reply-link { display: inline-block; margin-block-start: 8px; font-size: 12px; font-weight: 700; color: var(--gh-accent-text); text-decoration: none; } .gh-comment-body .comment-reply-link:hover { text-decoration: underline; } /* فرم نظر تمام‌عرضِ قابِ خودش را پر می‌کند (درخواست کاربر — قبلاً 620px و کوچک‌تر از فریم بود) */ .gh-comment-form { display: flex; flex-direction: column; gap: 16px; width: 100%; } .gh-comment-form #reply-title { font-size: 17px; font-weight: 800; margin: 0; } .gh-comment-form .form-submit { margin: 0; } .gh-comment-form .gh-field textarea, .gh-comment-form .gh-field input { width: 100%; border-radius: var(--gh-r-sm); border: 1.5px solid var(--gh-border-default); background: var(--gh-bg-surface); color: var(--gh-text-primary); font: inherit; font-size: 14px; padding: 10px 14px; } .gh-comment-form .gh-field textarea:focus, .gh-comment-form .gh-field input:focus { outline: none; border-color: var(--gh-accent-solid); box-shadow: var(--gh-focus-ring); } .gh-comment-form .gh-field textarea { resize: vertical; } /* چک‌باکس رضایت کوکی — بومی وردپرس، خارج از fields/comment_field قابل بازنویسی نیست، فقط استایل سبک */ .gh-comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gh-text-tertiary); margin: 0; } .gh-comment-form .comment-form-cookies-consent input { accent-color: var(--gh-accent-solid); } .gh-course-comments .gh-comments { margin-block-start: 0; } /* ---------- گواهی: اقدامات و استعلام ---------- */ .gh-cert-actions { max-width: 960px; margin: 20px auto 0; justify-content: center; } .gh-verify-hint { max-width: 960px; margin: 14px auto 0; text-align: center; font-size: 12.5px; color: var(--gh-text-tertiary); } /* ---------- صفحه استعلام ---------- */ .gh-verify-box { max-width: 560px; margin-inline: auto; } .gh-verify-form { display: flex; gap: 10px; margin-block-end: 24px; } .gh-verify-form input { flex: 1; height: 48px; border-radius: var(--gh-r-sm); border: 1.5px solid var(--gh-border-default); background: var(--gh-bg-surface); color: var(--gh-text-primary); font: inherit; font-size: 15px; padding-inline: 14px; } .gh-verify-result { border-radius: var(--gh-r-lg); padding: 24px; text-align: center; border: 1px solid; } .gh-verify-result.is-ok { background: var(--gh-success-surface); border-color: color-mix(in srgb, var(--gh-success-text) 25%, transparent); } .gh-verify-result.is-error { background: var(--gh-danger-surface); border-color: color-mix(in srgb, var(--gh-danger-text) 25%, transparent); } .gh-verify-result h2 { font-size: 20px; font-weight: 900; margin: 10px 0 4px; } .gh-verify-result p { font-size: 13.5px; color: var(--gh-text-secondary); margin: 0 0 12px; } /* حالت خالی (بدون کد واردشده) — نکته‌های اعتمادساز با آیکون اختصاصی هر کدام؛ در حالت عادیِ حرکت، به‌صورت چرخشی با محو/لغزش عمودی عوض می‌شوند (حس هوشمند بودن). کاربرانِ reduced-motion همان لیست ایستا را می‌بینند — محتوا هیچ‌وقت گم نمی‌شود. */ .gh-verify-points { list-style: none; margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 12px; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-lg); } .gh-verify-points li { display: flex; align-items: center; font-size: 13.5px; color: var(--gh-text-secondary); } .gh-verify-points svg { width: 16px; height: 16px; color: var(--gh-accent-text); margin-inline-end: 9px; flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { .gh-verify-points { display: block; position: relative; min-height: 72px; padding: 0 24px; overflow: hidden; } .gh-verify-points li { position: absolute; inset-inline: 24px; top: 50%; justify-content: center; opacity: 0; transform: translateY(calc(-50% + 12px)); animation: gh-vp-cycle 9s infinite var(--gh-ease-in-out); } .gh-verify-points li:nth-child(2) { animation-delay: 3s; } .gh-verify-points li:nth-child(3) { animation-delay: 6s; } @keyframes gh-vp-cycle { 0% { opacity: 0; transform: translateY(calc(-50% + 12px)); } 5%, 28% { opacity: 1; transform: translateY(-50%); } 33%, 100%{ opacity: 0; transform: translateY(calc(-50% - 12px)); } } } /* گالری گواهی‌های صادرشده — دو نما: پازلی (گرید) و لیستی؛ با سوییچ سگمنتی عوض می‌شود */ .gh-certs-sec { width: 100%; max-width: none; margin: 44px 0 0; } .gh-view-switch { display: inline-flex; gap: 3px; background: var(--gh-bg-sunken); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-sm); padding: 3px; } .gh-view-switch .gh-icon-btn { width: 32px; height: 32px; border-radius: var(--gh-r-xs); } .gh-view-switch .gh-icon-btn.is-on { background: var(--gh-bg-raised); color: var(--gh-accent-text); box-shadow: var(--gh-shadow-1); } .gh-certs-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; } .gh-certg-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-decoration: none; color: inherit; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-lg); padding: 18px; grid-column: span 3; transition: transform var(--gh-dur-base) var(--gh-ease-out), box-shadow var(--gh-dur-base) var(--gh-ease-out), opacity var(--gh-dur-base) var(--gh-ease-out); } .gh-certg-item:hover { transform: translateY(-4px); box-shadow: var(--gh-shadow-2); } .gh-certg-ic { width: 40px; height: 40px; border-radius: var(--gh-r-sm); flex: none; display: grid; place-items: center; background: var(--gh-accent-surface); color: var(--gh-accent-text); } .gh-certg-ic svg { width: 20px; height: 20px; } .gh-certg-name { font-size: 14px; font-weight: 800; } .gh-certg-course { font-size: 12.5px; color: var(--gh-text-secondary); } .gh-certg-tail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-start: auto; padding-block-start: 6px; } .gh-certg-code { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; direction: ltr; unicode-bidi: isolate; background: var(--gh-bg-sunken); border: 1px dashed var(--gh-border-strong); border-radius: var(--gh-r-xs); padding: 2px 8px; color: var(--gh-text-tertiary); font-variant-numeric: tabular-nums; } .gh-certg-date { font-size: 11px; color: var(--gh-text-tertiary); } .gh-certs-more-wrap { display: grid; justify-items: center; gap: 8px; margin-block-start: 24px; } .gh-certs-more-wrap .gh-btn { min-width: 220px; } .gh-certs-more-status { min-height: 20px; margin: 0; color: var(--gh-text-secondary); font-size: 12.5px; } /* نمای لیستی */ .gh-certs-gallery.is-list { display: flex; flex-direction: column; gap: 10px; } .gh-certs-gallery.is-list .gh-certg-item { flex-direction: row; align-items: center; padding: 13px 16px; } .gh-certs-gallery.is-list .gh-certg-name { flex: none; } .gh-certs-gallery.is-list .gh-certg-course { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gh-certs-gallery.is-list .gh-certg-tail { margin: 0 0 0 auto; padding: 0; margin-inline-start: auto; } .gh-course-certs { margin-block-start: 44px; } .gh-course-certs .gh-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 18px; } .gh-course-certs .gh-sec-title { margin: 0; } .gh-course-body .gh-certs-gallery-course:not(.is-list) .gh-certg-item { grid-column: span 6; } @media (max-width: 1024px) { .gh-certs-gallery:not(.is-list) .gh-certg-item { grid-column: span 6; } } @media (max-width: 560px) { .gh-certs-gallery:not(.is-list) .gh-certg-item { grid-column: span 12; } } @media (max-width: 640px) { .gh-certs-gallery.is-list .gh-certg-course { flex-basis: 100%; order: 5; white-space: normal; } } /* ---------- مرکز راهنمایی FAQ ---------- */ .gh-faq-groups { display: flex; flex-direction: column; gap: 28px; max-width: 720px; margin-inline: auto; } .gh-faq-group h2 { font-size: 17px; font-weight: 800; margin-block-end: 12px; } .gh-faq-item { background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-md); margin-block-end: 8px; } .gh-faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-weight: 700; font-size: 14px; } .gh-faq-item summary::-webkit-details-marker { display: none; } .gh-faq-chev { margin-inline-start: auto; color: var(--gh-text-tertiary); } .gh-faq-item[open] .gh-faq-chev { color: var(--gh-accent-text); } .gh-faq-answer { padding: 0 18px 16px; font-size: 13.5px; color: var(--gh-text-secondary); line-height: 1.9; } .gh-faq-cta { text-align: center; margin: 44px auto 0; max-width: 720px; } .gh-faq-cta p { font-size: 14px; color: var(--gh-text-secondary); margin-block-end: 12px; } /* ---------- دیوار نظرات ---------- */ .gh-review-card .gh-stars { color: var(--gh-warning-solid); font-size: 15px; letter-spacing: 2px; margin-block-end: 8px; } .gh-review-text { font-size: 13.5px; color: var(--gh-text-secondary); line-height: 1.85; margin-block-end: 14px; } .gh-review-person { display: flex; align-items: center; gap: 10px; } .gh-review-person b { font-size: 13px; font-weight: 800; display: block; } .gh-review-person span span { font-size: 11.5px; color: var(--gh-text-tertiary); } .gh-review-link { margin-inline-start: auto; font-size: 13px; } /* ---------- دکمه‌ی فقط-آیکون ---------- */ .gh-btn-icon { width: 44px; padding-inline: 0; gap: 0; flex: none; } .gh-btn-icon.gh-btn-sm { width: 36px; } .gh-btn-icon svg { display: block; width: 18px; height: 18px; color: inherit; } /* ---------- ورودی عدد بدون فلش پیش‌فرض (فقط دکمه‌های +/- خودمان) ---------- */ .gh-seats input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .gh-seats input[type="number"]::-webkit-outer-spin-button, .gh-seats input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ---------- کارت‌های توضیحات باندل (زیر باندل‌ساز) ---------- */ .gh-bb-pitches { margin-block-start: 22px; } .gh-bb-pitches h3 { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 9px; margin-block-end: 12px; } .gh-bb-pitches h3 svg { width: 17px; height: 17px; color: var(--gh-accent-text); } .gh-bb-pitches [data-pitches-list] { display: flex; flex-direction: column; gap: 10px; } .gh-pitch-card { display: flex; gap: 13px; border: 1px solid; border-radius: var(--gh-r-lg); padding: 16px 18px; animation: gh-pitch-in var(--gh-dur-slow) var(--gh-ease-out); } @keyframes gh-pitch-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .gh-pitch-dot { width: 38px; height: 38px; border-radius: var(--gh-r-sm); flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 800; } .gh-pitch-body { min-width: 0; } .gh-pitch-body b { font-size: 14px; font-weight: 800; display: block; } .gh-pitch-body p { font-size: 13px; color: var(--gh-text-secondary); margin: 4px 0 9px; line-height: 1.85; } .gh-pitch-points { display: flex; flex-wrap: wrap; gap: 6px; } .gh-pitch-points span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--gh-r-full); background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); color: var(--gh-text-secondary); } .gh-pitch-points svg { width: 12px; height: 12px; color: var(--gh-success-text); } /* ---------- بخش‌های کیوریت‌شده‌ی آرشیو نمونه‌کار ---------- */ .gh-pf-section { margin-block-end: 44px; } .gh-pf-section h2 { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 9px; margin-block-end: 18px; } .gh-pf-section h2 svg { width: 19px; height: 19px; color: var(--gh-accent-text); } /* ---------- صفحه‌ی مسیر یادگیری ---------- */ .gh-path-desc { font-size: 14.5px; color: var(--gh-text-secondary); line-height: 2; } .gh-path-steps-full { grid-template-columns: repeat(4, 1fr); } .gh-pstep-price { display: block; margin-block-start: 8px; font-size: 12.5px; font-weight: 800; color: var(--gh-text-primary); } @media (max-width: 900px) { .gh-path-steps-full { grid-template-columns: repeat(2, 1fr); } } /* ---------- صفحه‌ی مقایسه ---------- */ .gh-compare-head { display: flex; align-items: center; justify-content: center; gap: 20px; margin-block: 28px 32px; flex-wrap: wrap; } .gh-compare-course { display: flex; align-items: center; gap: 10px; border: 1.5px solid; border-radius: var(--gh-r-lg); padding: 14px 20px; text-decoration: none; color: var(--gh-text-primary); font-weight: 800; font-size: 15px; } .gh-compare-dot { width: 14px; height: 14px; border-radius: 50%; } .gh-compare-vs { font-size: 13px; font-weight: 700; color: var(--gh-text-tertiary); } .gh-tbl-wrap { overflow-x: auto; border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-md); } .gh-compare-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px; } .gh-compare-table th, .gh-compare-table td { padding: 12px 18px; border-bottom: 1px solid var(--gh-border-subtle); text-align: start; } .gh-compare-table thead th { background: var(--gh-bg-sunken); font-weight: 800; color: var(--gh-text-primary); } .gh-compare-table tbody th { font-weight: 700; color: var(--gh-text-tertiary); background: var(--gh-bg-surface); } .gh-compare-table tr:last-child th, .gh-compare-table tr:last-child td { border-bottom: none; } .gh-compare-verdict { display: flex; gap: 12px; align-items: flex-start; background: var(--gh-accent-surface); border: 1px solid var(--gh-accent-border); border-radius: var(--gh-r-md); padding: 16px 20px; margin-block-start: 20px; } .gh-compare-verdict svg { width: 20px; height: 20px; color: var(--gh-accent-text); flex: none; margin-block-start: 2px; } .gh-compare-verdict p { font-size: 13.5px; color: var(--gh-text-primary); margin: 0; line-height: 1.9; } /* ---------- صفحه‌ی مقاله (ادیتوریال مجله) ---------- */ .gh-rp { position: fixed; top: 68px; inset-inline: 0; height: 3px; z-index: 70; background: transparent; pointer-events: none; } .gh-rp i { display: block; height: 100%; width: 0; background: var(--gh-accent-solid); transition: width var(--gh-dur-fast) linear; } .gh-article-layout { display: grid; grid-template-columns: 230px minmax(0, 680px); gap: 44px; justify-content: center; padding-block: 36px 60px; } .gh-toc-side { position: sticky; top: var(--gh-sticky-offset); align-self: start; display: flex; flex-direction: column; gap: 16px; min-height: 0; max-height: calc(100vh - var(--gh-sticky-offset) - 16px); max-height: calc(100dvh - var(--gh-sticky-offset) - 16px); font-size: 13px; overflow: hidden; } .gh-toc-main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .gh-toc-label { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--gh-text-tertiary); margin-block-end: 10px; display: flex; align-items: center; gap: 6px; } .gh-toc-label svg { width: 14px; height: 14px; } .gh-toc-scroll { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; padding-inline-end: 6px; padding-block-end: 4px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gh-border-strong) transparent; scroll-behavior: smooth; outline: none; } .gh-toc-scroll::-webkit-scrollbar { width: 5px; } .gh-toc-scroll::-webkit-scrollbar-track { background: transparent; } .gh-toc-scroll::-webkit-scrollbar-thumb { background: var(--gh-border-strong); border-radius: var(--gh-r-full); } .gh-toc-scroll:focus-visible { box-shadow: var(--gh-focus-ring); border-radius: var(--gh-r-xs); } .gh-toc-scroll > a { flex: none; color: var(--gh-text-tertiary); text-decoration: none; padding: 7px 12px; border-inline-start: 2px solid var(--gh-border-subtle); transition: color var(--gh-dur-fast) var(--gh-ease-out), border-color var(--gh-dur-fast) var(--gh-ease-out), background var(--gh-dur-fast) var(--gh-ease-out); } .gh-toc-scroll > a:hover { color: var(--gh-text-primary); background: var(--gh-bg-sunken); } .gh-toc-scroll > a.is-active { color: var(--gh-accent-text); border-color: var(--gh-accent-solid); font-weight: 700; } .gh-toc-offer { flex: none; position: relative; z-index: 1; } .gh-toc-offer::before { content: ''; position: absolute; inset-inline: 0; top: -16px; height: 16px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--gh-bg-surface)); } .gh-toc-offer .gh-curio { margin-block-start: 0; } /* ---------- جعبه‌ی چرخشی معرفی دوره‌ها (سایدبار فهرست/فونت/آرشیو) ---------- همه‌ی دوره‌ها به‌نوبت با کراس‌فِید نمایش داده می‌شوند؛ نوار پایین خودش هم شمارشِ معکوسِ ۵ثانیه‌ای را نشان می‌دهد هم با animationend زمان چرخش بعدی را به JS می‌گوید. */ .gh-curio { /* خودش چسبان نیست — همیشه داخل یک ستون/سایدبارِ از قبل چسبان می‌نشیند (فهرست مطلب/مشخصات فونت/آرشیو فونت). دو چسبانِ مستقل با همان top روی هم می‌افتند؛ کافی است والد بچسبد. */ position: relative; margin-block-start: 22px; border-radius: var(--gh-r-lg); background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); overflow: hidden; box-shadow: var(--gh-shadow-1); } .gh-curio-head { padding: 12px 16px 0; } .gh-curio-head .gh-curio-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--gh-accent-text); text-transform: uppercase; letter-spacing: .03em; } .gh-curio-head .gh-curio-eyebrow svg { width: 13px; height: 13px; } .gh-curio-stage { position: relative; min-height: 196px; } .gh-curio-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 18px 18px; opacity: 0; visibility: hidden; transition: opacity var(--gh-dur-slow) var(--gh-ease-out); } .gh-curio-slide.is-active { position: relative; opacity: 1; visibility: visible; } .gh-curio-thumb { width: 46px; height: 46px; border-radius: var(--gh-r-md); display: grid; place-items: center; color: var(--gh-white); flex: none; } .gh-curio-thumb svg { width: 20px; height: 20px; } .gh-curio-info { display: flex; flex-direction: column; gap: 4px; } .gh-curio-title { font-size: 14.5px; color: var(--gh-text-primary); } .gh-curio-tag { font-size: 12px; color: var(--gh-text-secondary); } .gh-curio-hours { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--gh-text-tertiary); justify-content: center; } .gh-curio-hours svg { width: 13px; height: 13px; } .gh-curio-cta { margin-block-start: 2px; width: 100%; justify-content: center; } /* ⚠️ درس آموخته: وقتی این باکس داخل .gh-toc-side می‌نشیند، «.gh-toc-side a» (یک کلاس+یک نوع) specificity بالاتری از «.gh-btn-primary» (فقط یک کلاس) دارد و رنگ متن دکمه را می‌گیرد. با دو کلاس اینجا مطمئن می‌شویم رنگ درست دکمه (سیاه روی نارنجی) همیشه برنده باشد. */ .gh-curio .gh-btn-primary, .gh-curio .gh-btn-primary:hover { color: var(--gh-accent-on-solid); } .gh-curio-bar { height: 3px; background: var(--gh-border-subtle); } .gh-curio-bar-fill { display: block; height: 100%; width: 0; background: var(--gh-accent-solid); } .gh-curio-bar-fill.is-running { animation: gh-curio-fill 5s linear; } .gh-curio:hover .gh-curio-bar-fill.is-running, .gh-curio:focus-within .gh-curio-bar-fill.is-running { animation-play-state: paused; } @keyframes gh-curio-fill { from { width: 0; } to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .gh-curio-bar-fill.is-running { animation: none; width: 100%; } } /* ---------- بوکمارک — قابل‌کاشت روی کارت‌ها (شناور روی کاور) یا به‌صورت دکمه‌ی معمولی ---------- */ .gh-bookmark-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: var(--gh-r-sm); border: 1px solid var(--gh-border-default); background: var(--gh-bg-surface); color: var(--gh-text-tertiary); cursor: pointer; transition: all var(--gh-dur-fast) var(--gh-ease-out); padding: 0; } .gh-bookmark-btn svg { width: 17px; height: 17px; } .gh-bookmark-btn:hover { border-color: var(--gh-accent-border); color: var(--gh-accent-text); } .gh-bookmark-btn.is-on { background: var(--gh-accent-surface); border-color: var(--gh-accent-border); color: var(--gh-accent-text); } /* روی کارت فونت/پالت، بوکمارک تنها دکمه‌ی شناور روی کاور است — اما داخل .gh-pfc-actions (نمونه‌کار) حالا یکی از چند دکمه‌ی هم‌ردیف داخل گروه هاور-ریویل است، پس نباید absolute/گوشه‌نشین باشد. */ .gh-card .gh-bookmark-btn, .gh-palcard .gh-bookmark-btn { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; border: none; background: color-mix(in srgb, var(--gh-bg-surface) 88%, transparent); color: var(--gh-text-primary); backdrop-filter: blur(4px); } .gh-card .gh-bookmark-btn:hover, .gh-palcard .gh-bookmark-btn:hover { background: var(--gh-bg-surface); } .gh-card .gh-bookmark-btn.is-on, .gh-palcard .gh-bookmark-btn.is-on, .gh-pfc-actions .gh-bookmark-btn.is-on { color: var(--gh-accent-solid); } .gh-palcard { position: relative; } .gh-palcard .gh-bookmark-btn { top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; } .gh-palcard .gh-bookmark-btn svg { width: 15px; height: 15px; } .gh-art-bookmark { margin-inline-start: auto; } .gh-font-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .gh-article { position: relative; } .gh-article h1 { font-size: clamp(24px, 4vw, 34px); font-weight: 900; line-height: 1.5; text-wrap: balance; margin: 14px 0; } /* ریل اقدامات مقاله — بیرونِ لبه‌ی چپ ستون مطالعه، دقیقاً همان الگوی .gh-cert-fabs/.gh-fab (بیرونی absolute به‌اندازه‌ی کل ارتفاع مقاله، داخلی sticky تا از محدوده‌ی خودِ مقاله بیرون نرود). */ .gh-article-fabs { position: absolute; inset-block: 0; left: -68px; width: 48px; z-index: 6; } /* margin-block-start: جای اولیه (پیش از اسکرول) هم‌تراز با بالای عکس شاخص باشد، نه بالای مقاله؛ عدد دقیق را app.js با اندازه‌گیری واقعی offsetTop عکس ست می‌کند (طول تیتر متغیر است، عدد ثابت دقیق نمی‌ماند) — این مقدار فقط fallback پیش از اجرای جاوااسکریپت است. بعد از اسکرول کافی، طبق معمول در top:84 می‌چسبد. */ .gh-article-fabs-inner { position: sticky; top: var(--gh-sticky-offset); margin-block-start: 165px; display: flex; flex-direction: column; gap: 10px; } @media (max-width: 1300px) { .gh-article-fabs { display: none; } } .gh-art-meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 14px; border-block: 1px solid var(--gh-border-subtle); margin-block-end: 20px; } .gh-person { display: flex; align-items: center; gap: 9px; } .gh-person img { border-radius: 50%; } .gh-person b { font-size: 13px; font-weight: 700; display: block; line-height: 1.3; } .gh-person span span { font-size: 11px; color: var(--gh-text-tertiary); display: inline-flex; align-items: center; gap: 4px; line-height: 1.3; margin-block-start: 1px; } .gh-person span span svg { width: 12px; height: 12px; flex-shrink: 0; } .gh-meta-sep { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gh-text-tertiary); } .gh-meta-sep svg { width: 14px; height: 14px; } .gh-art-cover { margin: 0 0 24px; border-radius: var(--gh-r-lg); overflow: hidden; border: 1px solid var(--gh-border-default); } @media (max-width: 1024px) { .gh-article-layout { grid-template-columns: minmax(0, 1fr); } .gh-toc-side { display: none; } } /* ---------- دکمه‌ی گرد فقط-آیکون (فرم جست‌وجوی ۴۰۴/نتایج) ---------- */ /* اندازه و رنگ واقعی در تعریف .gh-search-form بالای همین فایل است (هم‌رنگ دکمه‌های شیشه‌ای هدر) */ .gh-btn-round { border-radius: 50%; } /* ---------- صفحه ۴۰۴ — عدد خیلی درشت با گرادیان برند ---------- */ .gh-404-num { display: block; font-size: clamp(110px, 20vw, 200px); font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-block-end: 6px; background: linear-gradient(180deg, var(--gh-accent-solid) 30%, color-mix(in srgb, var(--gh-accent-solid) 35%, var(--gh-bg-page))); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: nowrap; } /* ---------- جلسات رایگان دوره — چیپ پخش + دیالوگ ویدیو ---------- */ .gh-lesson-play { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; background: var(--gh-success-surface); color: var(--gh-success-text); border: 1px solid color-mix(in srgb, var(--gh-success-text) 25%, transparent); border-radius: var(--gh-r-full); padding: 3px 11px; transition: all var(--gh-dur-fast) var(--gh-ease-out); } .gh-lesson-play svg { width: 12px; height: 12px; } .gh-lesson-play:hover { background: var(--gh-success-solid); border-color: var(--gh-success-solid); color: var(--gh-white); } .gh-video-modal { width: min(860px, calc(100vw - 40px)); padding: 0; overflow: hidden; } .gh-video-modal-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-block-end: 1px solid var(--gh-border-subtle); } .gh-video-modal-head b { flex: 1; font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gh-video-modal video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--gh-black); } /* ---------- مگامنوی «آموزش» — راست: دوره‌ها، چپ: کارت باندل‌ساز ---------- */ .gh-mega-panel { display: none; position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 110; padding-block-start: 8px; } .gh-mega:hover > .gh-mega-panel, .gh-mega:focus-within > .gh-mega-panel { display: block; } .gh-mega-inner { display: flex; gap: 8px; width: 660px; max-width: calc(100vw - 48px); background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-radius-card); box-shadow: var(--gh-shadow-3); padding: 10px; } .gh-mega-col { min-width: 0; } .gh-mega-courses { flex: 1.5; display: flex; flex-direction: column; gap: 2px; } .gh-mega-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--gh-text-tertiary); padding: 6px 10px 8px; } .gh-mega-course { --gh-mega-course-inset: 8px; display: flex; align-items: center; gap: 12px; padding: var(--gh-mega-course-inset); /* شعاع بیرونی برابر شعاع نشان دوره + فاصله‌ی یکنواخت دو قاب است. */ border-radius: calc(var(--gh-r-md) + var(--gh-mega-course-inset)); text-decoration: none; color: var(--gh-text-primary) !important; border: none !important; transition: background var(--gh-dur-fast) var(--gh-ease-out); } .gh-mega-course:hover { background: var(--gh-bg-sunken) !important; } .gh-mega-course .gh-bb-dot { width: 34px; height: 34px; font-size: 12px; border-radius: var(--gh-r-sm); } .gh-mega-course > span:last-child { min-width: 0; } .gh-mega-course b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gh-mega-course small { display: block; font-size: 11px; color: var(--gh-text-tertiary); } .gh-mega-all { display: inline-flex; margin-block-start: 4px; padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--gh-accent-text); text-decoration: none; border-radius: var(--gh-r-sm); } .gh-mega-all:hover { background: var(--gh-accent-surface); } /* کارت باندل‌ساز مگامنو (v1.1 — درشت‌تر و پویا): گرادیان همیشه به‌آرامی جابه‌جا می‌شود (حس «ترکیب/آمیختن» دوره‌ها) و با هاور شدت و جهتش عوض می‌شود؛ آیکون کمی می‌چرخد و بزرگ می‌شود. */ .gh-mega-bundle { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; position: relative; overflow: hidden; background: linear-gradient(120deg, var(--gh-accent-surface) 0%, var(--gh-bg-raised) 60%, var(--gh-accent-surface) 100%); background-size: 220% 220%; animation: gh-mega-bundle-flow 7s ease-in-out infinite; border: 1.5px solid var(--gh-accent-border); border-radius: var(--gh-radius-card-inset-10); padding: 20px; transition: border-color var(--gh-dur-base) var(--gh-ease-out), box-shadow var(--gh-dur-base) var(--gh-ease-out), transform var(--gh-dur-base) var(--gh-ease-out); } @keyframes gh-mega-bundle-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .gh-mega-bundle:hover { border-color: var(--gh-accent-solid); box-shadow: var(--gh-shadow-2); transform: translateY(-2px); animation-duration: 2.4s; } .gh-mega-bundle > svg { width: 26px; height: 26px; color: var(--gh-accent-text); transition: transform var(--gh-dur-base) var(--gh-ease-out); } .gh-mega-bundle:hover > svg { transform: rotate(-8deg) scale(1.12); } .gh-mega-bundle b { font-size: 17px; font-weight: 900; letter-spacing: -.01em; } .gh-mega-bundle p { font-size: 13.5px; color: var(--gh-text-primary); margin: 0; line-height: 1.85; flex: 1; } /* دکمه‌ی باندل‌ساز داخل منو: قوانین عمومی .gh-menu a (رنگ ثانویه/هاور خاکستری) روی .gh-btn غالب‌اند — این‌جا صریح برمی‌گردانیم تا دکمه همان پرایمری واقعی بماند. */ .gh-menu .gh-mega-bundle .gh-btn-primary { background: var(--gh-accent-solid); color: var(--gh-accent-on-solid); border: none; font-size: 13px; padding: 0 16px; height: 36px; border-radius: var(--gh-r-md); } .gh-menu .gh-mega-bundle .gh-btn-primary:hover { background: var(--gh-accent-hover); color: var(--gh-accent-on-solid); transform: translateY(-1px); } @media (max-width: 900px) { /* داخل سایدبار موبایل: مگامنو ایستا و ستونی — همان رفتار sub-menu */ .gh-mega-panel { display: block; position: static; padding: 0; } .gh-mega-inner { width: 100%; flex-direction: column; border: none; box-shadow: none; background: transparent; padding: 0; padding-inline-start: 16px; } .gh-mega-bundle { align-self: stretch; } } /* ========================================================================== */ /* Ghalamoom 2026 — premium academy redesign */ /* A visual compatibility layer: existing markup and product behavior stay. */ /* ========================================================================== */ html { scroll-padding-block-start: 92px; } body { min-block-size: 100svh; display: flex; flex-direction: column; background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--gh-accent-surface) 72%, transparent) 0, transparent 29rem), var(--gh-bg-page); } .gh-container { width: min(100% - 40px, 1200px); max-width: 1200px; padding-inline: 0; } .gh-main { /* پوسته‌ی صفحه فضای باقی‌مانده‌ی viewport را می‌گیرد، نه یک 60vh ثابت که همراه هدر، فاصله‌ی فوتر و خود فوتر روی صفحات کوتاه اسکرول خالی تولید می‌کرد. */ width: 100%; flex: 1 0 auto; min-height: 0; } .gh-section { padding-block: 72px; } .gh-section + .gh-section { border-block-start: 1px solid var(--gh-border-subtle); } .gh-sec-head { align-items: end; margin-block-end: 28px; } .gh-sec-head h2 { position: relative; max-width: 680px; font-size: clamp(24px, 3vw, 38px); line-height: 1.42; letter-spacing: -.035em; } .gh-sec-head h2::before { content: ''; display: block; width: 38px; height: 4px; margin-block-end: 14px; border-radius: var(--gh-r-full); background: var(--gh-accent-solid); } .gh-btn { min-height: 42px; font-weight: 800; letter-spacing: -.012em; transition: transform var(--gh-dur-fast) var(--gh-ease-out), background-color var(--gh-dur-fast) var(--gh-ease-out), border-color var(--gh-dur-fast) var(--gh-ease-out), box-shadow var(--gh-dur-fast) var(--gh-ease-out); } .gh-btn:hover { transform: translateY(-2px); } .gh-btn-primary { box-shadow: 0 10px 24px color-mix(in srgb, var(--gh-accent-solid) 25%, transparent); } .gh-btn-primary:hover { box-shadow: 0 14px 32px color-mix(in srgb, var(--gh-accent-solid) 32%, transparent); } .gh-btn-secondary { background: color-mix(in srgb, var(--gh-bg-raised) 92%, transparent); backdrop-filter: blur(12px); } .gh-header { inset-block-start: 10px; width: min(100% - 28px, 1240px); margin-inline: auto; border: 1px solid color-mix(in srgb, var(--gh-border-default) 78%, transparent); border-radius: var(--gh-r-xl); background: color-mix(in srgb, var(--gh-bg-surface) 86%, transparent); box-shadow: var(--gh-shadow-2); /* * blur روی ::before هدر اعمال می‌شود. backdrop-filter روی خود هدر برای فرزندان * position:fixed containing block می‌ساخت و پنل‌های موبایل را داخل ارتفاع هدر حبس می‌کرد. */ backdrop-filter: none; -webkit-backdrop-filter: none; } .gh-header .gh-container { width: 100%; padding-inline: 18px; } .gh-menu > li > a { position: relative; border-radius: var(--gh-r-full); font-size: 13px; font-weight: 750; } .gh-menu > li > a::after { content: ''; position: absolute; inset-inline: 14px; inset-block-end: 4px; height: 2px; border-radius: var(--gh-r-full); background: var(--gh-accent-solid); transform: scaleX(0); transition: transform var(--gh-dur-base) var(--gh-ease-out); } .gh-menu > li:not(.current-menu-item):is(:hover, :focus-within) > a::after { transform: scaleX(1); } .gh-hero { position: relative; isolation: isolate; min-height: min(820px, calc(100svh - 20px)); display: grid; align-items: center; padding-block: 150px 48px; overflow: clip; border-block-end: 1px solid var(--gh-border-subtle); background: linear-gradient(180deg, color-mix(in srgb, var(--gh-bg-page) 30%, transparent), var(--gh-bg-page)), radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--gh-accent-surface) 80%, transparent), transparent 36rem); } .gh-hero::before, .gh-hero::after { content: ''; position: absolute; z-index: 0; pointer-events: none; } .gh-hero::before { inset: 80px 0 auto; height: 460px; background-image: linear-gradient(var(--gh-border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--gh-border-subtle) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000 0, transparent 70%); opacity: .42; } .gh-hero::after { inset-inline-start: 50%; inset-block-start: 43%; width: min(760px, 80vw); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--gh-accent-border) 58%, transparent); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 80px color-mix(in srgb, var(--gh-accent-surface) 20%, transparent), 0 0 0 160px color-mix(in srgb, var(--gh-accent-surface) 12%, transparent); } [dir="rtl"] .gh-hero::after { transform: translate(50%, -50%); } .gh-hero > .gh-container { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; } .gh-hero-brandline { display: flex; align-items: center; gap: 12px; margin-block-end: 18px; color: var(--gh-text-tertiary); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; } .gh-hero-brandline i { width: 24px; height: 1px; background: var(--gh-border-strong); } .gh-hero-eyebrow { border: 1px solid var(--gh-accent-border); background: color-mix(in srgb, var(--gh-accent-surface) 82%, transparent); box-shadow: var(--gh-shadow-1); } .gh-hero h1 { max-width: 940px; margin-block: 22px 18px; font-size: clamp(42px, 7.2vw, 82px); line-height: 1.18; letter-spacing: -.065em; text-wrap: balance; } .gh-hero h1::first-line { letter-spacing: -.045em; } .gh-hero-rotate { color: var(--gh-accent-text); text-decoration: underline; text-decoration-color: var(--gh-accent-border); text-decoration-thickness: .09em; text-underline-offset: .13em; } .gh-hero > .gh-container > p { max-width: 650px; margin-inline: auto; color: var(--gh-text-secondary); font-size: clamp(16px, 1.8vw, 20px); line-height: 2; } .gh-hero-ctas { margin-block-start: 28px; gap: 10px; } .gh-hero-ctas .gh-btn { min-width: 188px; } .gh-hero-assurance { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-block-start: 22px; color: var(--gh-text-secondary); font-size: 12.5px; font-weight: 700; } .gh-hero-assurance span { display: inline-flex; align-items: center; gap: 7px; } .gh-hero-assurance i { width: 6px; height: 6px; border-radius: 50%; background: var(--gh-success-solid); box-shadow: 0 0 0 4px var(--gh-success-surface); } .gh-proof-band { width: min(100%, 920px); margin-block-start: 46px; padding: 12px; border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); background: color-mix(in srgb, var(--gh-bg-raised) 86%, transparent); box-shadow: var(--gh-shadow-2); backdrop-filter: blur(18px); } .gh-proof { min-height: 76px; justify-content: center; border-radius: var(--gh-r-lg); } .gh-proof + .gh-proof { border-inline-start-color: var(--gh-border-subtle); } .gh-proof b { font-size: 18px; } .gh-path-steps { position: relative; padding: 10px; border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); background: var(--gh-bg-surface); box-shadow: var(--gh-shadow-1); } .gh-pstep { min-height: 88px; padding: 14px 16px; border-radius: var(--gh-r-lg); overflow: hidden; isolation: isolate; transition: background var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-fast) var(--gh-ease-out); } .gh-pstep:hover { background: var(--gh-bg-sunken); transform: translateY(-2px); } .gh-pstep-num { top: auto; inset-inline-end: -4px; inset-block-end: -28px; z-index: -1; color: var(--gh-text-primary); font-size: clamp(88px, 9vw, 148px); font-weight: 1000; line-height: 1; opacity: .045; pointer-events: none; } .gh-pstep > :not(.gh-pstep-num) { position: relative; z-index: 1; } .gh-pstep-dot { box-shadow: 0 8px 18px color-mix(in srgb, currentColor 18%, transparent); } .gh-grid-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 18px; } .gh-card { border-color: var(--gh-border-default); border-radius: var(--gh-r-xl); background: var(--gh-bg-raised); box-shadow: var(--gh-shadow-1); overflow: clip; } .gh-card:hover { border-color: var(--gh-border-strong); box-shadow: var(--gh-shadow-3); } .gh-card-course { position: relative; } .gh-card-course::after { content: ''; position: absolute; inset-inline: 18px; inset-block-start: 0; height: 3px; border-radius: 0 0 var(--gh-r-full) var(--gh-r-full); background: var(--gh-accent-solid); opacity: 0; transform: scaleX(.6); transition: opacity var(--gh-dur-fast) var(--gh-ease-out), transform var(--gh-dur-base) var(--gh-ease-out); } .gh-card-course:hover::after { opacity: 1; transform: scaleX(1); } .gh-card-cover { margin: 8px; border-radius: var(--gh-radius-card-inset-8); overflow: clip; } .gh-card-cover img { transition: transform var(--gh-dur-slow) var(--gh-ease-out), filter var(--gh-dur-slow) var(--gh-ease-out); } .gh-card:hover .gh-card-cover img { transform: scale(1.035); filter: saturate(1.06) contrast(1.02); } .gh-card-body { padding: 18px 20px 20px; } .gh-card-title { font-size: 18px; line-height: 1.65; letter-spacing: -.025em; } .gh-course-tag { font-weight: 800; } .gh-course-meta { gap: 8px 14px; color: var(--gh-text-tertiary); } .gh-card-foot { margin-block-start: 18px; padding-block-start: 16px; border-block-start: 1px solid var(--gh-border-subtle); } .gh-slider-track { gap: 18px; padding-block: 4px 22px; scroll-padding-inline: 2px; } .gh-slide { scroll-snap-align: start; } .gh-slide-review .gh-card-body, .gh-slide-cert .gh-card-body { min-height: 210px; } .gh-review-card { background: linear-gradient(145deg, color-mix(in srgb, var(--gh-accent-surface) 36%, transparent), transparent 48%), var(--gh-bg-raised); } .gh-pf-card { border-radius: var(--gh-radius-card); box-shadow: var(--gh-shadow-1); } .gh-pf-cover { border-radius: inherit; } .gh-pf-overlay { padding: 56px 20px 18px; background: linear-gradient(0deg, color-mix(in srgb, var(--gh-stone-900) 94%, transparent), transparent 88%); } .gh-instructor { position: relative; overflow: hidden; padding: 32px; border-radius: var(--gh-radius-card); background: linear-gradient(120deg, var(--gh-accent-surface), transparent 54%), var(--gh-bg-raised); } .gh-instructor::after { content: 'ق'; position: absolute; inset-inline-end: 22px; inset-block-start: -70px; color: var(--gh-accent-text); font-size: 220px; font-weight: 1000; line-height: 1; opacity: .055; pointer-events: none; } .gh-footer { position: relative; margin-block-start: 72px; border-block-start: 1px solid var(--gh-border-default); background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--gh-accent-surface) 55%, transparent), transparent 26rem), var(--gh-bg-surface); } .gh-footer::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gh-accent-solid), transparent); opacity: .65; } .gh-popup { border-color: var(--gh-border-default); border-radius: var(--gh-r-xl); box-shadow: var(--gh-shadow-4); } @media (max-width: 1024px) { .gh-header { width: calc(100% - 20px); } .gh-hero h1 { max-width: 780px; } .gh-proof-band { width: min(100%, 780px); } } @media (max-width: 900px) { .gh-container { width: min(100% - 28px, 1200px); } .gh-header { inset-block-start: 7px; border-radius: var(--gh-r-lg); } .gh-header .gh-container { width: 100%; padding-inline: 10px; } .gh-hero { min-height: auto; padding-block: 132px 36px; } .gh-hero::after { width: 92vw; } .gh-hero h1 { font-size: clamp(38px, 10vw, 64px); } .gh-proof-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gh-proof + .gh-proof { border-inline-start: 0; } .gh-proof:nth-child(even) { border-inline-start: 1px solid var(--gh-border-subtle); } .gh-path-steps { padding: 8px; } } @media (max-width: 640px) { .gh-section { padding-block: 48px; } .gh-sec-head { align-items: flex-start; } .gh-sec-head h2 { font-size: 27px; } .gh-hero { padding-block-start: 118px; } .gh-hero-brandline { font-size: 10px; } .gh-hero-brandline span:last-child, .gh-hero-brandline i { display: none; } .gh-hero h1 { margin-block-start: 18px; font-size: clamp(36px, 12vw, 52px); line-height: 1.26; } .gh-hero > .gh-container > p { font-size: 15px; line-height: 1.9; } .gh-hero-ctas, .gh-hero-ctas .gh-btn { width: 100%; } .gh-hero-assurance { gap: 9px 16px; } .gh-proof-band { margin-block-start: 34px; padding: 6px; } .gh-proof { min-height: 70px; } .gh-proof b { font-size: 16px; } .gh-proof span { font-size: 10px; } .gh-card-cover { margin: 6px; } .gh-instructor { padding: 24px 20px; } } /* ========================================================================== */ /* Course conversion experience — 2026 */ /* ========================================================================== */ .gh-course-hd { position: relative; isolation: isolate; margin-block-start: 40px; padding: clamp(30px, 5vw, 62px); overflow: hidden; border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); background: linear-gradient(115deg, color-mix(in srgb, var(--course) 12%, var(--gh-bg-raised)), var(--gh-bg-raised) 62%); box-shadow: var(--gh-shadow-2); } .gh-course-hd::before { content: ''; position: absolute; z-index: -1; inset-inline-end: -9%; inset-block-start: -42%; width: min(500px, 56vw); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--course) 28%, transparent); border-radius: 50%; box-shadow: 0 0 0 60px color-mix(in srgb, var(--course) 5%, transparent), 0 0 0 120px color-mix(in srgb, var(--course) 3%, transparent); } .gh-course-hd.has-bg::after { opacity: .14; filter: saturate(.6) contrast(1.1); } .gh-course-hd .gh-crumb { margin-block-end: 42px; } .gh-course-kicker, .gh-archive-kicker { display: block; margin-block-end: 12px; color: var(--gh-accent-text); font-size: 11.5px; font-weight: 900; letter-spacing: .055em; } .gh-course-hd h1 { max-width: 820px; margin-block: 16px 12px; font-size: clamp(36px, 5.8vw, 68px); line-height: 1.28; letter-spacing: -.055em; } .gh-course-lead { max-width: 680px; margin: 0; color: var(--gh-text-secondary); font-size: clamp(15px, 1.6vw, 18px); line-height: 2; } .gh-course-hd .gh-course-meta { margin-block-start: 24px; gap: 10px; } .gh-course-hd .gh-course-meta > span { min-height: 38px; padding: 7px 12px; border: 1px solid var(--gh-border-subtle); border-radius: var(--gh-r-full); background: color-mix(in srgb, var(--gh-bg-raised) 72%, transparent); backdrop-filter: blur(10px); } .gh-course-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 28px; } .gh-course-assurance { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-block-start: 22px; color: var(--gh-text-secondary); font-size: 12.5px; font-weight: 750; } .gh-course-assurance span { display: inline-flex; align-items: center; gap: 8px; } .gh-course-assurance i, .gh-buybox-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--gh-success-solid); box-shadow: 0 0 0 4px var(--gh-success-surface); } .gh-course-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 42px; padding-block: 46px 80px; } .gh-course-desc { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-xl); background: var(--gh-bg-raised); box-shadow: var(--gh-shadow-1); } .gh-course-body > .gh-course-desc { width: 100%; margin-block-start: 0; } .gh-course-desc > :first-child { margin-block-start: 0; } .gh-course-section-head { margin-block: 62px 24px; scroll-margin-block-start: 110px; } .gh-course-overview-head { margin-block: 0 24px; } .gh-course-section-head > span { color: var(--gh-accent-text); font-size: 11.5px; font-weight: 900; letter-spacing: .05em; } .gh-course-section-head .gh-sec-title { margin-block: 6px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; } .gh-course-section-head p { max-width: 660px; margin: 0; color: var(--gh-text-secondary); font-size: 14px; line-height: 1.9; } .gh-chapter { margin-block-end: 12px; border-radius: var(--gh-r-lg); box-shadow: var(--gh-shadow-1); } .gh-chapter summary { min-height: 60px; padding: 16px 18px; } .gh-chapter[open] { border-color: var(--gh-border-strong); } .gh-chapter-num { background: var(--gh-bg-sunken); font-variant-numeric: tabular-nums; } .gh-lesson { min-height: 52px; padding-inline: 20px; } .gh-buybox { top: var(--gh-sticky-offset); scroll-margin-block-start: calc(var(--gh-sticky-offset) + 8px); border-radius: var(--gh-radius-card); box-shadow: var(--gh-shadow-3); } .gh-buybox::before { content: ''; position: absolute; z-index: 2; inset-inline: 28px; inset-block-start: 0; height: 4px; border-radius: 0 0 var(--gh-r-full) var(--gh-r-full); background: var(--course, var(--gh-accent-solid)); } .gh-buybox-cover { margin: 8px 8px 0; border-radius: var(--gh-radius-card-inset-8); } .gh-buybox-body { padding: 22px 24px 24px; } .gh-buybox-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--gh-text-secondary); font-size: 11.5px; font-weight: 850; } .gh-bigprice b { font-size: clamp(25px, 3vw, 32px); letter-spacing: -.04em; } .gh-buybox-list { padding: 14px; border: 1px solid var(--gh-border-subtle); border-radius: var(--gh-r-md); background: var(--gh-bg-sunken); } .gh-archive-head { position: relative; padding: clamp(30px, 5vw, 58px); overflow: hidden; border: 1px solid var(--gh-border-default); border-radius: var(--gh-radius-card); background: radial-gradient(circle at 85% 20%, var(--gh-accent-surface), transparent 24rem), var(--gh-bg-raised); box-shadow: var(--gh-shadow-1); } .gh-archive-head h1 { font-size: clamp(36px, 5vw, 62px); letter-spacing: -.055em; } .gh-archive-head > p { max-width: 620px; font-size: 16px; line-height: 2; } /* نشانه‌ی مشترک بنر صفحات: همان زبان بصری مهر گواهی، با آیکون مرتبط هر مقصد. چون partial رسانه در انتهای header رندر می‌شود، نشانه absolute است و padding بالایی برایش فضای واقعی رزرو می‌کند؛ در نتیجه ترتیب معنایی عنوان و توضیح دست‌نخورده می‌ماند. */ .gh-archive-head:has(> .gh-page-hero-icon) { padding-block-start: clamp(112px, 9vw, 132px); } .gh-page-hero-icon { position: absolute; z-index: 2; inset-block-start: clamp(32px, 4vw, 48px); inset-inline-start: clamp(30px, 5vw, 58px); display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid var(--gh-accent-border); border-radius: 50%; background: var(--gh-accent-surface); color: var(--gh-accent-text); box-shadow: 0 0 0 8px color-mix(in srgb, var(--gh-accent-surface) 55%, transparent); } .gh-page-hero-icon svg { width: 29px; height: 29px; } /* رسانه‌ی قابل مدیریت سمت چپ کارت معرفی صفحات (SVG یا Lottie). فقط وقتی برای صفحه فایل انتخاب شده باشد، فضای متن به دو نیم تقسیم می‌شود. */ .gh-archive-head:has(> .gh-page-hero-media) { min-height: 360px; } .gh-archive-head:has(> .gh-page-hero-media) > :not(.gh-page-hero-media) { max-width: 52%; } .gh-page-hero-media { position: absolute; z-index: 1; inset-inline-end: clamp(20px, 4vw, 54px); inset-block-start: 50%; display: grid; place-items: center; width: min(43%, 520px); height: calc(100% - clamp(38px, 7vw, 76px)); overflow: hidden; transform: translateY(-50%); pointer-events: none; } .gh-page-hero-media img, .gh-page-hero-media > svg, .gh-page-hero-media canvas { display: block; width: 100% !important; height: 100% !important; object-fit: contain; } .gh-page-hero-media-fallback { width: min(64%, 220px); aspect-ratio: 1; border: 1px dashed var(--gh-accent-border); border-radius: 50%; background: radial-gradient(circle, var(--gh-accent-surface), transparent 68%); opacity: .38; } .gh-page-hero-media[data-lottie-ready="1"] .gh-page-hero-media-fallback { display: none; } .gh-page-hero-media.has-lottie-error { opacity: .28; } .gh-archive-principles { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 22px; } .gh-archive-principles span { padding: 7px 12px; border: 1px solid var(--gh-border-default); border-radius: var(--gh-r-full); background: var(--gh-bg-surface); color: var(--gh-text-secondary); font-size: 12px; font-weight: 800; } .gh-archive-head + .gh-grid-cards { margin-block-start: 34px; } @media (max-width: 900px) { .gh-course-hd { margin-block-start: 26px; } .gh-course-layout { grid-template-columns: 1fr; gap: 28px; } .gh-buybox { position: static; } .gh-archive-head:has(> .gh-page-hero-media) { min-height: 0; } .gh-archive-head:has(> .gh-page-hero-media) > :not(.gh-page-hero-media) { max-width: none; } .gh-page-hero-media { position: relative; inset: auto; width: 100%; height: clamp(190px, 45vw, 280px); margin-block-start: 26px; transform: none; } } @media (max-width: 640px) { .gh-course-hd { padding: 24px 20px 28px; } .gh-course-hd .gh-crumb { margin-block-end: 30px; } .gh-course-hd h1 { font-size: clamp(34px, 11vw, 48px); } .gh-course-hero-actions, .gh-course-hero-actions .gh-btn { width: 100%; } .gh-course-assurance { gap: 10px 16px; } .gh-course-layout { padding-block-start: 28px; } .gh-course-desc { margin-block-start: 0; padding: 20px; } .gh-course-overview-head { margin-block-start: 0; } .gh-course-section-head { margin-block-start: 48px; } .gh-archive-head { padding: 28px 22px; } } /* ---------- هویت رنگی دوره — منبع حقیقت واحد ---------- * هر قاب رنگیِ دارای مخفف دوره در سراسر سایت فقط کلاس gh-course-mark می‌گیرد. * اندازه قاب و تایپوگرافی از همین دو توکن کنترل می‌شوند؛ برای تغییر بعدی نیازی به * اصلاح هیرو، مسیر، کارت دوره، باندل، جست‌وجو، مگامنو یا داشبورد به‌صورت جدا نیست. */ :root { --gh-course-mark-size: 48px; --gh-course-mark-font-size: 16px; } .gh-course-mark.gh-course-mark { inline-size: var(--gh-course-mark-size); block-size: var(--gh-course-mark-size); min-inline-size: var(--gh-course-mark-size); min-block-size: var(--gh-course-mark-size); aspect-ratio: 1; display: inline-grid; place-items: center; flex: 0 0 var(--gh-course-mark-size); margin: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--gh-white) 24%, transparent); border-radius: var(--gh-r-md); color: var(--gh-white) !important; box-shadow: var(--gh-shadow-1); font-family: var(--gh-font-family, 'IRANYekanX'), system-ui, sans-serif; font-size: var(--gh-course-mark-font-size); font-weight: 900; font-variant: normal; font-variant-caps: normal; font-variant-numeric: tabular-nums; letter-spacing: normal !important; line-height: 1; text-align: center; text-decoration: none; } .gh-course-mark.gh-course-mark > span { font: inherit; letter-spacing: inherit; line-height: inherit; } .gh-course-card-identity { display: flex; align-items: center; gap: 12px; min-width: 0; } .gh-course-card-identity .gh-course-tag { min-width: 0; } /* اندازه‌ی نشانگر دوره وابسته به بافت است، اما همچنان از همان کامپوننت مرکزی استفاده می‌کند. * این متغیرهای محلی جلوی یک‌اندازه‌شدن اجباری همه‌ی کاربردها را می‌گیرند. */ .gh-hero-course-stack, .gh-hero-course-card { --gh-course-mark-size: 48px; --gh-course-mark-font-size: 18px; } .gh-pstep-dot { --gh-course-mark-size: 50px; --gh-course-mark-font-size: 18px; } .gh-card-course .gh-course-mark, .gh-bb-item .gh-course-mark, .gh-mycourse-row .gh-course-mark { --gh-course-mark-size: 38px; --gh-course-mark-font-size: 15px; } .gh-qb-chip .gh-course-mark { --gh-course-mark-size: 38px; --gh-course-mark-font-size: 15px; } .gh-qb-chip .gh-qb-dot.gh-course-mark { margin-block-end: 24px; } .gh-mega-course .gh-course-mark { --gh-course-mark-size: 34px; --gh-course-mark-font-size: 13px; } .gh-search-item .gh-course-mark { --gh-course-mark-size: 40px; --gh-course-mark-font-size: 15px; } .gh-popup .gh-course-mark, .gh-pitch-dot.gh-course-mark { --gh-course-mark-size: 48px; --gh-course-mark-font-size: 18px; }