/* =========================================================================== برچسب در سایت — صفحهٔ برچسب، فهرستِ برچسب‌ها و برچسب‌های صفحهٔ محصول (docs/36 §۲.۳). مشترکِ هر چهار قالب. چرا پالتِ خودش و نه رنگِ قالب: برچسب یک «لایهٔ کشف» است که از دلِ محصول و مقاله و خبر می‌گذرد، و در هر چهار قالب باید همان‌طور خوانده شود. وقتی رنگ و گردی را از قالب می‌گرفت، در بیگ‌دیل کادرِ سرِ صفحه با `--theme-radius-lg`ِ بزرگ به قرصِ کشیده تبدیل می‌شد و در کالامارکت با رنگِ دکمه‌ها یکی می‌شد. پس نشانه‌ها همین‌جا تعریف شده‌اند (`--dx-*`) و فقط قلم از قالب می‌آید. همین نشانه‌ها را `collections.css` هم دارد. پیوندها با پیشوندِ `:is(.tgx-ptags, .tgh, .tgi)` نوشته شده‌اند: قالب‌ها `a:not(.btn)` را رنگ می‌کنند (ویژگیِ ۰،۱،۱) و یک کلاسِ تنها (۰،۱،۰) به آن می‌باخت. کادرها هم `
`اند و نه `
`: بیگ‌دیل به هر `header` زمینه و پویانمایی با `!important` می‌دهد. =========================================================================== */ .tgx-ptags, .tgh, .tgi { --dx-ink: #0f172a; --dx-ink-2: #334155; --dx-muted: #64748b; --dx-line: #e2e8f0; --dx-line-2: #cbd5e1; --dx-surface: #fff; --dx-tint: #f8fafc; --dx-brand: #4f46e5; --dx-brand-2: #7c3aed; --dx-brand-ink: #4338ca; --dx-brand-soft: #eef2ff; --dx-brand-line: #c7d2fe; --dx-hero: radial-gradient(120% 140% at 100% 0%, #4338ca 0%, rgba(67, 56, 202, 0) 55%), radial-gradient(90% 120% at 0% 100%, #7c3aed 0%, rgba(124, 58, 237, 0) 60%), #1e1b4b; --dx-radius: 18px; --dx-radius-sm: 12px; --dx-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 34px -18px rgba(15, 23, 42, .28); --dx-shadow-hover: 0 2px 6px rgba(15, 23, 42, .06), 0 20px 44px -20px rgba(79, 70, 229, .5); --dx-ease: cubic-bezier(.2, .7, .2, 1); color: var(--dx-ink); } .tgh *, .tgi * { box-sizing: border-box; } /* بیگ‌دیل به `p`، `span`، `li`، `small` و تیترها `color: var(--theme-ink) !important` می‌دهد و جوهرِ خودش روشن است، پس متنِ این کادرهای روشن کم‌رنگ می‌شد. به‌جای جنگِ `!important` همان متغیر را درونِ این اجزا به رنگِ خودِ هر عنصر برمی‌گردانیم؛ در سه قالبِ دیگر این متغیر کاری نمی‌کند. */ .tgx-ptags, .tgh, .tgi, :is(.tgx-ptags, .tgh, .tgi) .tgh-tile__name{ --theme-ink: var(--dx-ink); } :is(.tgx-ptags, .tgh, .tgi) .tgh-hero, :is(.tgx-ptags, .tgh, .tgi) .tgh-hero__title, :is(.tgx-ptags, .tgh, .tgi) .tgh-card__type, :is(.tgx-ptags, .tgh, .tgi) .tgh-tab.active .tgh-tab__n, :is(.tgx-ptags, .tgh, .tgi) .tgi-group__letter, :is(.tgx-ptags, .tgh, .tgi) .tgx-ptags__icon, :is(.tgx-ptags, .tgh, .tgi) .tgi-top li:nth-child(-n+3) .tgi-top__rank{ --theme-ink: #fff; } :is(.tgx-ptags, .tgh, .tgi) .tgh-hero__desc, :is(.tgx-ptags, .tgh, .tgi) .tgh-hero__kicker, :is(.tgx-ptags, .tgh, .tgi) .tgh-related__label{ --theme-ink: rgba(255, 255, 255, .8); } :is(.tgx-ptags, .tgh, .tgi) .tgh-section__count, :is(.tgx-ptags, .tgh, .tgi) .tgh-tab__n, :is(.tgx-ptags, .tgh, .tgi) .tgx-tag__n, :is(.tgx-ptags, .tgh, .tgi) .tgh-card__excerpt, :is(.tgx-ptags, .tgh, .tgi) .tgh-card__meta, :is(.tgx-ptags, .tgh, .tgi) .tgh-card__meta *, :is(.tgx-ptags, .tgh, .tgi) .tgi-top__name small, :is(.tgx-ptags, .tgh, .tgi) .tgi-none{ --theme-ink: var(--dx-muted); } :is(.tgx-ptags, .tgh, .tgi) .tgh-section__icon, :is(.tgx-ptags, .tgh, .tgi) .tgx-tag__hash{ --theme-ink: var(--dx-brand); } :is(.tgx-ptags, .tgh, .tgi) .tgh-tile__media > span, :is(.tgx-ptags, .tgh, .tgi) .tgi-top__rank{ --theme-ink: var(--dx-brand-ink); } :is(.tgx-ptags, .tgh, .tgi) .tgh-facets__group h3{ --theme-ink: var(--dx-ink-2); } /* --------------------------------------------------------------------------- برچسبِ تکی — صفحهٔ محصول، برچسب‌های مرتبط، فهرستِ همهٔ برچسب‌ها --------------------------------------------------------------------------- */ :is(.tgx-ptags, .tgh, .tgi) .tgx-tag { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--dx-line); border-radius: 999px; background: var(--dx-surface); color: var(--dx-ink-2); font-size: 13px; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap; transition: border-color .18s var(--dx-ease), background-color .18s var(--dx-ease), color .18s var(--dx-ease), transform .18s var(--dx-ease), box-shadow .18s var(--dx-ease); } :is(.tgx-ptags, .tgh, .tgi) .tgx-tag__hash{ color: var(--dx-brand); font-weight: 800; } :is(.tgx-ptags, .tgh, .tgi) .tgx-tag__n{ margin-inline-start: 4px; padding: 0 7px; border-radius: 999px; background: var(--dx-tint); color: var(--dx-muted); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; } :is(.tgx-ptags, .tgh, .tgi) .tgx-tag:hover, :is(.tgx-ptags, .tgh, .tgi) .tgx-tag:focus-visible { border-color: var(--dx-brand-line); background: var(--dx-brand-soft); color: var(--dx-brand-ink); transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(79, 70, 229, .55); text-decoration: none; } :is(.tgx-ptags, .tgh, .tgi) .tgx-tag:focus-visible { outline: 2px solid var(--dx-brand); outline-offset: 2px; } /* برچسب‌های صفحهٔ محصول */ .tgx-ptags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 16px 0; padding: 14px 16px; border: 1px solid var(--dx-line); border-radius: var(--dx-radius-sm); background: var(--dx-tint); } :is(.tgx-ptags, .tgh, .tgi) .tgx-ptags__title{ display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 800; color: var(--dx-ink); } :is(.tgx-ptags, .tgh, .tgi) .tgx-ptags__icon{ width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--dx-brand), var(--dx-brand-2)); font-size: 15px; font-weight: 800; } :is(.tgx-ptags, .tgh, .tgi) .tgx-ptags__list{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } /* --------------------------------------------------------------------------- صفحهٔ برچسب — سرِ صفحه --------------------------------------------------------------------------- */ .tgh { display: flex; flex-direction: column; gap: 22px; margin: 8px 0 32px; } /* نوارِ مسیرِ کالامارکت شناور است، و جعبهٔ flex کنارِ شناور به پهنای صفر فشرده می‌شد. */ .tgh, .tgi { clear: both; width: 100%; } :is(.tgx-ptags, .tgh, .tgi) .tgh-hero{ position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-start; gap: 22px; padding: 30px 32px; border-radius: var(--dx-radius); background: var(--dx-hero); color: #fff; box-shadow: 0 24px 60px -32px rgba(30, 27, 75, .75); } /* «#»ِ بزرگِ کم‌رنگ پشتِ متن — نشانهٔ صفحه، نه تزئینِ بی‌معنا: همین نشانه روی هر برچسبِ سایت هست. */ :is(.tgx-ptags, .tgh, .tgi) .tgh-hero::after{ content: "#"; position: absolute; z-index: -1; inset-inline-end: -10px; bottom: -70px; font-size: 260px; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, .06); pointer-events: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-hero__mark{ flex: none; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 20px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 36px; font-weight: 900; backdrop-filter: blur(6px); } :is(.tgx-ptags, .tgh, .tgi) .tgh-hero__main{ display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 auto; } :is(.tgx-ptags, .tgh, .tgi) .tgh-hero__kicker{ margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .78); letter-spacing: 0; } :is(.tgx-ptags, .tgh, .tgi) .tgh-hero__kicker::before{ content: ""; width: 18px; height: 2px; border-radius: 2px; background: #a5b4fc; } :is(.tgx-ptags, .tgh, .tgi) .tgh-hero__title{ margin: 0; font-size: clamp(26px, 18px + 1.6vw, 40px); font-weight: 900; line-height: 1.25; color: #fff; overflow-wrap: anywhere; } :is(.tgx-ptags, .tgh, .tgi) .tgh-hero__desc{ margin: 0; max-width: 70ch; font-size: 14.5px; line-height: 2; color: rgba(255, 255, 255, .82); } :is(.tgx-ptags, .tgh, .tgi) .tgh-stats{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-stat { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 13px; text-decoration: none; transition: background-color .18s var(--dx-ease), transform .18s var(--dx-ease); } :is(.tgx-ptags, .tgh, .tgi) .tgh-stat b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; } :is(.tgx-ptags, .tgh, .tgi) .tgh-stat svg { width: 16px; height: 16px; opacity: .85; } :is(.tgx-ptags, .tgh, .tgi) .tgh-stat:hover, :is(.tgx-ptags, .tgh, .tgi) .tgh-stat:focus-visible { background: rgba(255, 255, 255, .2); color: #fff; transform: translateY(-1px); text-decoration: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-stat:focus-visible, :is(.tgx-ptags, .tgh, .tgi) .tgh-action:focus-visible, :is(.tgx-ptags, .tgh, .tgi) .tgh-related a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-action { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 16px; border-radius: 12px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; transition: background-color .18s var(--dx-ease); } :is(.tgx-ptags, .tgh, .tgi) .tgh-action svg { width: 16px; height: 16px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-action:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-action--solid { background: #fff; border-color: #fff; color: var(--dx-brand-ink); } :is(.tgx-ptags, .tgh, .tgi) .tgh-action--solid:hover { background: #eef2ff; color: var(--dx-brand-ink); } :is(.tgx-ptags, .tgh, .tgi) .tgh-related{ display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); min-width: 0; } :is(.tgx-ptags, .tgh, .tgi) .tgh-related__label{ flex: none; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .72); } :is(.tgx-ptags, .tgh, .tgi) .tgh-related__list{ display: flex; gap: 8px; margin: 0; padding: 2px; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } :is(.tgx-ptags, .tgh, .tgi) .tgh-related__list::-webkit-scrollbar{ display: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-related a { scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 34px; padding: 5px 13px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color .18s var(--dx-ease); } :is(.tgx-ptags, .tgh, .tgi) .tgh-related a:hover { background: rgba(255, 255, 255, .22); color: #fff; text-decoration: none; } /* --------------------------------------------------------------------------- صفحهٔ برچسب — زبانه‌های بخش‌ها (چسبان) --------------------------------------------------------------------------- */ :is(.tgx-ptags, .tgh, .tgi) .tgh-tabs{ position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; padding: 6px; margin: 0; overflow-x: auto; border: 1px solid var(--dx-line); border-radius: 14px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); box-shadow: 0 8px 24px -18px rgba(15, 23, 42, .4); scrollbar-width: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-tabs::-webkit-scrollbar{ display: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border-radius: 10px; color: var(--dx-ink-2); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .18s var(--dx-ease), color .18s var(--dx-ease); } :is(.tgx-ptags, .tgh, .tgi) .tgh-tab svg { width: 17px; height: 17px; color: var(--dx-muted); transition: color .18s var(--dx-ease); } :is(.tgx-ptags, .tgh, .tgi) .tgh-tab__n{ min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--dx-tint); color: var(--dx-muted); font-size: 11.5px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; } :is(.tgx-ptags, .tgh, .tgi) .tgh-tab:hover { background: var(--dx-tint); color: var(--dx-ink); text-decoration: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-tab.active { background: var(--dx-brand-soft); color: var(--dx-brand-ink); } :is(.tgx-ptags, .tgh, .tgi) .tgh-tab.active svg { color: var(--dx-brand); } :is(.tgx-ptags, .tgh, .tgi) .tgh-tab.active .tgh-tab__n { background: var(--dx-brand); color: #fff; } :is(.tgx-ptags, .tgh, .tgi) .tgh-tab:focus-visible { outline: 2px solid var(--dx-brand); outline-offset: 1px; } /* --------------------------------------------------------------------------- صفحهٔ برچسب — بخش‌ها --------------------------------------------------------------------------- */ /* `!important` فقط اینجا: بیگ‌دیل به هر `
` با `!important` رنگِ زمینه و متن می‌دهد. */ :is(.tgx-ptags, .tgh, .tgi) .tgh-section{ scroll-margin-top: 90px; padding: 22px; border: 1px solid var(--dx-line); border-radius: var(--dx-radius); background: var(--dx-surface) !important; color: var(--dx-ink) !important; box-shadow: var(--dx-shadow); } :is(.tgx-ptags, .tgh, .tgi) .tgh-section__head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--dx-line); } :is(.tgx-ptags, .tgh, .tgi) .tgh-section__title{ display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 900; color: var(--dx-ink); } :is(.tgx-ptags, .tgh, .tgi) .tgh-section__icon{ width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--dx-brand-soft); color: var(--dx-brand); } :is(.tgx-ptags, .tgh, .tgi) .tgh-section__icon svg{ width: 19px; height: 19px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-section__count{ font-size: 13px; font-weight: 700; color: var(--dx-muted); font-variant-numeric: tabular-nums; } :is(.tgx-ptags, .tgh, .tgi) .tgh-filters{ display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--dx-tint); border: 1px solid var(--dx-line); } :is(.tgx-ptags, .tgh, .tgi) .tgh-filter { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 12px; border-radius: 9px; color: var(--dx-ink-2); font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; } :is(.tgx-ptags, .tgh, .tgi) .tgh-filter:hover { color: var(--dx-ink); background: var(--dx-surface); text-decoration: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-filter[aria-current="true"] { background: var(--dx-surface); color: var(--dx-brand-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); } :is(.tgx-ptags, .tgh, .tgi) .tgh-filter:focus-visible { outline: 2px solid var(--dx-brand); outline-offset: 1px; } /* محصول: کارتِ خودِ قالب (قیمت، سبد، امتیاز) در شبکهٔ این صفحه. */ :is(.tgx-ptags, .tgh, .tgi) .tgh-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 16px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-grid > *{ min-width: 0; width: auto; max-width: none; margin: 0; } :is(.tgx-ptags, .tgh, .tgi) .tgh-grid--cards{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-empty{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 12px; text-align: center; color: var(--dx-muted); } :is(.tgx-ptags, .tgh, .tgi) .tgh-empty b{ color: var(--dx-ink); font-size: 15px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-empty a{ color: var(--dx-brand-ink); font-weight: 700; } :is(.tgx-ptags, .tgh, .tgi) .tgh-more{ display: flex; justify-content: center; margin-top: 20px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-more__btn{ display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 26px; border-radius: 999px; cursor: pointer; border: 1px solid var(--dx-brand-line); background: var(--dx-surface); color: var(--dx-brand-ink); font: inherit; font-size: 14px; font-weight: 800; transition: background-color .18s var(--dx-ease), box-shadow .18s var(--dx-ease); } :is(.tgx-ptags, .tgh, .tgi) .tgh-more__btn:hover{ background: var(--dx-brand-soft); box-shadow: var(--dx-shadow-hover); } :is(.tgx-ptags, .tgh, .tgi) .tgh-more__btn:focus-visible{ outline: 2px solid var(--dx-brand); outline-offset: 2px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-more__btn.is-loading{ opacity: .7; cursor: progress; } :is(.tgx-ptags, .tgh, .tgi) .tgh-more__btn.is-loading::after{ content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: tgh-spin .7s linear infinite; } @keyframes tgh-spin { to { transform: rotate(360deg); } } /* مطلب، خبر، ویدیو */ :is(.tgx-ptags, .tgh, .tgi) .tgh-card{ position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--dx-line); border-radius: 16px; background: var(--dx-surface); overflow: hidden; transition: transform .2s var(--dx-ease), box-shadow .2s var(--dx-ease), border-color .2s var(--dx-ease); } :is(.tgx-ptags, .tgh, .tgi) .tgh-card:hover, :is(.tgx-ptags, .tgh, .tgi) .tgh-card:focus-within{ transform: translateY(-3px); box-shadow: var(--dx-shadow-hover); border-color: var(--dx-brand-line); } :is(.tgx-ptags, .tgh, .tgi) .tgh-card__media{ position: relative; display: block; aspect-ratio: 16 / 9; background: var(--dx-tint); overflow: hidden; } :is(.tgx-ptags, .tgh, .tgi) .tgh-card__media img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--dx-ease); } :is(.tgx-ptags, .tgh, .tgi) .tgh-card:hover .tgh-card__media img{ transform: scale(1.04); } :is(.tgx-ptags, .tgh, .tgi) .tgh-card__type{ position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(15, 23, 42, .72); color: #fff; font-size: 11.5px; font-weight: 700; backdrop-filter: blur(4px); } :is(.tgx-ptags, .tgh, .tgi) .tgh-card__play{ position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--dx-brand-ink); box-shadow: 0 8px 24px rgba(15, 23, 42, .3); } :is(.tgx-ptags, .tgh, .tgi) .tgh-card__play svg{ width: 22px; height: 22px; margin-inline-start: 3px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-card__body{ display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1 1 auto; } :is(.tgx-ptags, .tgh, .tgi) .tgh-card__title{ margin: 0; font-size: 15px; font-weight: 800; line-height: 1.7; color: var(--dx-ink); } :is(.tgx-ptags, .tgh, .tgi) .tgh-card__title a { color: inherit; text-decoration: none; } /* کلِ کارت کلیک‌پذیر، با یک پیوندِ واحد برای صفحه‌خوان. */ :is(.tgx-ptags, .tgh, .tgi) .tgh-card__title a::after { content: ""; position: absolute; inset: 0; } :is(.tgx-ptags, .tgh, .tgi) .tgh-card__title a:focus-visible { outline: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-card:has(.tgh-card__title a:focus-visible){ outline: 2px solid var(--dx-brand); outline-offset: 2px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-card__excerpt{ margin: 0; font-size: 13px; line-height: 1.9; color: var(--dx-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :is(.tgx-ptags, .tgh, .tgi) .tgh-card__meta{ margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; font-size: 12px; color: var(--dx-muted); } /* دسته‌ها و برندها */ :is(.tgx-ptags, .tgh, .tgi) .tgh-facets{ display: grid; gap: 18px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-facets__group h3{ margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--dx-ink-2); } :is(.tgx-ptags, .tgh, .tgi) .tgh-tiles{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-tile { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border: 1px solid var(--dx-line); border-radius: 14px; background: var(--dx-surface); color: var(--dx-ink); font-size: 13.5px; font-weight: 700; text-decoration: none; transition: border-color .18s var(--dx-ease), box-shadow .18s var(--dx-ease), transform .18s var(--dx-ease); } :is(.tgx-ptags, .tgh, .tgi) .tgh-tile:hover, :is(.tgx-ptags, .tgh, .tgi) .tgh-tile:focus-visible { border-color: var(--dx-brand-line); box-shadow: var(--dx-shadow-hover); transform: translateY(-2px); color: var(--dx-brand-ink); text-decoration: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-tile:focus-visible { outline: 2px solid var(--dx-brand); outline-offset: 2px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-tile__media{ flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: var(--dx-brand-soft); color: var(--dx-brand-ink); font-weight: 900; } :is(.tgx-ptags, .tgh, .tgi) .tgh-tile__media img{ width: 100%; height: 100%; object-fit: contain; } :is(.tgx-ptags, .tgh, .tgi) .tgh-tile__media > span{ line-height: 1; font-size: 16px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-tile__name{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --------------------------------------------------------------------------- فهرستِ برچسب‌ها (`/tags/`) --------------------------------------------------------------------------- */ .tgi { display: flex; flex-direction: column; gap: 22px; margin: 8px 0 32px; } .tgi .tgh-hero { align-items: center; } :is(.tgx-ptags, .tgh, .tgi) .tgi-find{ position: relative; max-width: 520px; margin-top: 8px; } :is(.tgx-ptags, .tgh, .tgi) .tgi-find input{ width: 100%; min-height: 50px; padding: 10px 46px 10px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .96); color: var(--dx-ink); font: inherit; font-size: 14.5px; } :is(.tgx-ptags, .tgh, .tgi) .tgi-find input:focus{ outline: 3px solid rgba(165, 180, 252, .7); outline-offset: 1px; } :is(.tgx-ptags, .tgh, .tgi) .tgi-find svg{ position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--dx-muted); pointer-events: none; } :is(.tgx-ptags, .tgh, .tgi) .tgi-block{ padding: 22px; border: 1px solid var(--dx-line); border-radius: var(--dx-radius); background: var(--dx-surface); box-shadow: var(--dx-shadow); } :is(.tgx-ptags, .tgh, .tgi) .tgi-block__title{ display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 18px; font-weight: 900; color: var(--dx-ink); } :is(.tgx-ptags, .tgh, .tgi) .tgi-top{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: tgi; } :is(.tgx-ptags, .tgh, .tgi) .tgi-top a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--dx-line); border-radius: 14px; background: linear-gradient(180deg, var(--dx-surface), var(--dx-tint)); color: var(--dx-ink); text-decoration: none; transition: border-color .18s var(--dx-ease), box-shadow .18s var(--dx-ease), transform .18s var(--dx-ease); } :is(.tgx-ptags, .tgh, .tgi) .tgi-top a:hover, :is(.tgx-ptags, .tgh, .tgi) .tgi-top a:focus-visible { border-color: var(--dx-brand-line); box-shadow: var(--dx-shadow-hover); transform: translateY(-2px); text-decoration: none; } :is(.tgx-ptags, .tgh, .tgi) .tgi-top a:focus-visible { outline: 2px solid var(--dx-brand); outline-offset: 2px; } :is(.tgx-ptags, .tgh, .tgi) .tgi-top__rank{ flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-weight: 900; font-size: 13px; color: var(--dx-brand-ink); background: var(--dx-brand-soft); font-variant-numeric: tabular-nums; } :is(.tgx-ptags, .tgh, .tgi) .tgi-top li:nth-child(-n+3) .tgi-top__rank{ color: #fff; background: linear-gradient(135deg, var(--dx-brand), var(--dx-brand-2)); } :is(.tgx-ptags, .tgh, .tgi) .tgi-top__name{ min-width: 0; display: flex; flex-direction: column; } :is(.tgx-ptags, .tgh, .tgi) .tgi-top__name b{ font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(.tgx-ptags, .tgh, .tgi) .tgi-top__name small{ font-size: 12px; color: var(--dx-muted); } :is(.tgx-ptags, .tgh, .tgi) .tgi-letters{ position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; padding: 8px; border-radius: 12px; background: rgba(248, 250, 252, .95); border: 1px solid var(--dx-line); backdrop-filter: blur(8px); } :is(.tgx-ptags, .tgh, .tgi) .tgi-letters a { min-width: 34px; min-height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--dx-ink-2); font-size: 13px; font-weight: 800; text-decoration: none; } :is(.tgx-ptags, .tgh, .tgi) .tgi-letters a:hover, :is(.tgx-ptags, .tgh, .tgi) .tgi-letters a:focus-visible { background: var(--dx-brand-soft); color: var(--dx-brand-ink); text-decoration: none; } :is(.tgx-ptags, .tgh, .tgi) .tgi-group{ display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px dashed var(--dx-line); scroll-margin-top: 80px; } :is(.tgx-ptags, .tgh, .tgi) .tgi-group:first-of-type{ border-top: 0; } :is(.tgx-ptags, .tgh, .tgi) .tgi-group__letter{ width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--dx-ink); color: #fff; font-size: 18px; font-weight: 900; } :is(.tgx-ptags, .tgh, .tgi) .tgi-group__tags{ display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; } :is(.tgx-ptags, .tgh, .tgi) .tgi-none{ margin: 0; padding: 18px; text-align: center; color: var(--dx-muted); } .tgi [hidden] { display: none !important; } /* --------------------------------------------------------------------------- موبایل و حرکت --------------------------------------------------------------------------- */ @media (max-width: 767.98px) { :is(.tgx-ptags, .tgh, .tgi) .tgh-hero{ flex-direction: column; align-items: stretch; gap: 14px; padding: 22px 18px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-hero__mark{ width: 52px; height: 52px; font-size: 26px; border-radius: 16px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-hero::after{ font-size: 180px; bottom: -50px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-related{ flex-direction: column; align-items: stretch; gap: 8px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-section, :is(.tgx-ptags, .tgh, .tgi) .tgi-block{ padding: 16px; border-radius: 16px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-section__head{ flex-direction: column; align-items: stretch; } :is(.tgx-ptags, .tgh, .tgi) .tgh-filters{ align-self: flex-start; max-width: 100%; overflow-x: auto; } :is(.tgx-ptags, .tgh, .tgi) .tgh-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } :is(.tgx-ptags, .tgh, .tgi) .tgh-grid--cards{ grid-template-columns: minmax(0, 1fr); } :is(.tgx-ptags, .tgh, .tgi) .tgh-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(.tgx-ptags, .tgh, .tgi) .tgi-group{ grid-template-columns: 44px minmax(0, 1fr); } :is(.tgx-ptags, .tgh, .tgi) .tgi-group__letter{ width: 36px; height: 36px; font-size: 15px; } .tgx-ptags { padding: 12px; } } @media (prefers-reduced-motion: reduce) { :is(.tgx-ptags, .tgh, .tgi) .tgx-tag, :is(.tgx-ptags, .tgh, .tgi) .tgh-stat, :is(.tgx-ptags, .tgh, .tgi) .tgh-tab, :is(.tgx-ptags, .tgh, .tgi) .tgh-card, :is(.tgx-ptags, .tgh, .tgi) .tgh-card__media img, :is(.tgx-ptags, .tgh, .tgi) .tgh-tile, :is(.tgx-ptags, .tgh, .tgi) .tgi-top a { transition: none; } :is(.tgx-ptags, .tgh, .tgi) .tgx-tag:hover, :is(.tgx-ptags, .tgh, .tgi) .tgh-card:hover, :is(.tgx-ptags, .tgh, .tgi) .tgh-tile:hover, :is(.tgx-ptags, .tgh, .tgi) .tgi-top a:hover { transform: none; } :is(.tgx-ptags, .tgh, .tgi) .tgh-more__btn.is-loading::after{ animation: none; } }