/* * DES-046 — Mag redesign (xpcard.ir/mag/ + articles). Platform design: * design/delivered/DES-046 (MAG-SPEC.md, BANNER-SLOTS.md, pages/*.html). * DS v2.1 tokens only (style.css :root) — DES-046 adds no colours or tokens; * the few literals below are the design's own values (e.g. #1745BC gradients). * Mobile-first: <640 phone, 640–1023 tablet, ≥1024 desktop (content-max 1344, * gutter 48, section gap 56). */ body.xm-page { margin: 0; background: var(--surface-base); color: var(--text-strong); font-family: var(--xpc-font); -webkit-font-smoothing: antialiased; } .xm-page .xh button:not(.xh-promo-x) { background: none !important; border: 0 !important; } .xm-main { display: flex; flex-direction: column; gap: 40px; padding-top: 16px; padding-bottom: 8px; } @media (min-width: 1024px) { .xm-main { gap: 56px; padding-top: 28px; } } .xm-main h1, .xm-main h2, .xm-main h3 { font-family: var(--xpc-font); color: var(--text-strong); margin: 0; } .xm-main p { margin: 0; } .xm-main a { color: inherit; text-decoration: none; } .xm-main a:focus-visible, .xm-main summary:focus-visible, .xm-buybar a:focus-visible, .xm-table:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(47,107,255,.28); border-radius: 12px; } .xm-sec { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 1024px) { .xm-sec { gap: 24px; } } /* ---- buttons ---- */ .xm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--radius-md); font: 800 15px/1 var(--xpc-font); white-space: nowrap; cursor: pointer; transition: background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); } .xm-btn:active { transform: translateY(1px); } .xm-btn--primary { background: var(--primary); color: #fff !important; } .xm-btn--primary:hover { background: var(--primary-hover); box-shadow: 0 8px 20px rgba(47,107,255,.35); } .xm-btn--white { background: #fff; color: var(--text-strong) !important; } .xm-btn--white:hover { background: var(--primary-soft); } .xm-btn--soft { background: var(--surface-sunken); color: var(--text-strong) !important; } .xm-btn--soft:hover { background: var(--primary-soft); } .xm-btn--outline { border: 1.5px solid rgba(255,255,255,.5); color: #fff !important; font-weight: 700; } .xm-btn--outline:hover { background: rgba(255,255,255,.1); } .xm-btn--lg { height: 56px; border-radius: 18px; font-size: 16px; } .xm-btn--block { width: 100%; } .xm-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font: 700 14px/1 var(--xpc-font); color: var(--primary) !important; white-space: nowrap; } /* ---- chips / pills / meta ---- */ .xm-chips { display: flex; flex-wrap: wrap; gap: 8px; } .xm-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); font: 700 13px/1 var(--xpc-font); white-space: nowrap; } .xm-chip--mint { background: var(--success-soft); color: var(--success-strong); } .xm-chip--plain { background: #fff; color: var(--text-strong); box-shadow: var(--shadow-xs); } .xm-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-xs); font: 700 13px/1.4 var(--xpc-font); } .xm-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--success); animation: xm-pulse 2s ease-in-out infinite; } @keyframes xm-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(110,231,183,.6); } 60% { box-shadow: 0 0 0 8px rgba(110,231,183,0); } } .xm-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: 400 13px/1.5 var(--xpc-font); color: var(--text-muted); white-space: nowrap; } .xm-meta > span { display: inline-flex; align-items: center; gap: 5px; } .xm-lbl { font: 700 12px/1.5 var(--xpc-font); color: var(--text-muted); } .xm-avatar { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 800 15px/1 var(--xpc-font); } .xm-avatar--lg { width: 56px; height: 56px; font-size: 20px; } .xm-byline { display: flex; align-items: center; gap: 12px; min-width: 0; } .xm-byline > span:last-child { display: flex; flex-direction: column; gap: 2px; font: 400 14px/1.5 var(--xpc-font); } .xm-byline b { font-weight: 700; } .xm-panel { background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); } /* ---- covers ---- */ .xm-cover { position: relative; display: block; width: 100%; aspect-ratio: 768 / 403; overflow: hidden; background: var(--surface-ink); } .xm-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-standard); } .xm-cover--blank { display: flex; align-items: center; padding: 8%; background: radial-gradient(circle at 12% 0, rgba(47,107,255,.35) 0 38%, transparent 38.2%), var(--surface-ink); } .xm-cover--blank span { color: #fff; font: 800 clamp(13px, 3.4vw, 26px)/1.35 var(--xpc-font); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---- masthead ---- */ .xm-mast { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 1024px) { .xm-mast { gap: 24px; } } .xm-mast .xpc-breadcrumb { margin: 0; font-size: 13px; } .xm-mast-row { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 1024px) { .xm-mast-row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; } } .xm-mast-text { display: flex; flex-direction: column; gap: 8px; max-width: 720px; } .xm-mast h1 { font: 800 26px/40px var(--xpc-font); } @media (min-width: 1024px) { .xm-mast h1 { font-size: 46px; line-height: 60px; } } .xm-lead { font: 400 15px/1.8 var(--xpc-font); color: var(--text-body); } @media (min-width: 1024px) { .xm-lead { font-size: 17px; line-height: 30px; } } .xm-search { flex-shrink: 0; width: 100%; } @media (min-width: 1024px) { .xm-search { width: 440px; } } .xm-search label { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-xs); color: var(--text-muted); } @media (min-width: 1024px) { .xm-search label { height: 52px; border-radius: 16px; } } .xm-search label:focus-within { box-shadow: 0 0 0 3px rgba(47,107,255,.28); } .xm-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 0 !important; font: 400 16px var(--xpc-font); color: var(--text-strong); } @media (min-width: 1024px) { .xm-search input { font-size: 15px; } } .xm-filters { display: flex; gap: 8px; margin-inline: calc(-1 * var(--gutter-mobile)); padding-inline: var(--gutter-mobile); overflow-x: auto; scrollbar-width: none; } .xm-filters::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { .xm-filters { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; } } .xm-filters--center { justify-content: center; margin-top: 8px; flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } .xm-filter { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--radius-pill); background: #fff; color: var(--text-body) !important; box-shadow: var(--shadow-xs); font: 700 14px/1 var(--xpc-font); white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); } .xm-filter:hover { color: var(--primary) !important; box-shadow: 0 2px 8px rgba(15,27,51,.08); } .xm-filter.is-active { background: var(--surface-ink); color: #fff !important; box-shadow: none; } /* ---- section head ---- */ .xm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .xm-head h2 { font: 800 20px/30px var(--xpc-font); } @media (min-width: 1024px) { .xm-head h2 { font-size: 30px; line-height: 44px; } } .xm-head p { margin-top: 4px; font: 400 13px/1.7 var(--xpc-font); color: var(--text-muted); } @media (min-width: 1024px) { .xm-head p { font-size: 14px; } } /* ---- featured + popular ---- */ .xm-featured { display: grid; gap: 24px; align-items: start; } @media (min-width: 1024px) { .xm-featured { grid-template-columns: minmax(0, 1fr) 444px; } } .xm-hero-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base); } .xm-hero-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .xm-hero-card:hover .xm-cover img, .xm-card:hover .xm-cover img, .xm-row:hover .xm-cover img { transform: scale(1.04); } .xm-hero-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 20px; } @media (min-width: 1024px) { .xm-hero-body { gap: 14px; padding: 28px 32px 30px; } } .xm-hero-title { font: 800 20px/32px var(--xpc-font) !important; transition: color var(--dur-fast); } @media (min-width: 1024px) { .xm-hero-title { font-size: 30px !important; line-height: 44px !important; } } .xm-hero-title a::after, .xm-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .xm-hero-card:hover .xm-hero-title, .xm-card:hover .xm-card-title { color: var(--primary); } .xm-hero-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 15px/26px var(--xpc-font); color: var(--text-body); } @media (min-width: 1024px) { .xm-hero-excerpt { font-size: 16px; line-height: 28px; } } .xm-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; } .xm-hero-more { display: none; } @media (min-width: 640px) { .xm-hero-more { display: inline-flex; } } .xm-hero-card .xm-byline { position: relative; } .xm-featured-side { display: flex; flex-direction: column; gap: 24px; align-self: stretch; } .xm-s7 { display: none; flex: 1; } @media (min-width: 1024px) { .xm-s7 { display: flex; } } .xm-s7 > .xm-slot, .xm-s7 > aside { flex: 1; } .xm-popular { display: flex; flex-direction: column; gap: 4px; padding: 20px 14px 14px; } .xm-panel-h { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; font: 800 19px/30px var(--xpc-font) !important; } @media (min-width: 1024px) { .xm-panel-h { font-size: 21px !important; } } .xm-flame { display: flex; color: var(--warning); } .xm-refresh { display: flex; color: var(--primary); } /* ---- compact row ---- */ .xm-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; transition: background var(--dur-fast); } .xm-row:hover { background: var(--surface-base); } .xm-row:hover .xm-row-title { color: var(--primary); } .xm-row-rank { width: 24px; flex-shrink: 0; font: 800 24px/28px var(--xpc-font); color: var(--primary); text-align: center; } .xm-row-cover { width: 96px; flex-shrink: 0; border-radius: 12px; } @media (min-width: 1024px) { .xm-row-cover { width: 120px; } } .xm-row-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .xm-row-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 14px/22px var(--xpc-font); color: var(--text-strong); transition: color var(--dur-fast); } @media (min-width: 1024px) { .xm-row-title { font-size: 15px; line-height: 24px; } } .xm-row .xm-meta { font-size: 12px; } @media (max-width: 639px) { .xm-popular .xm-row .xm-meta > span:first-child { display: none; } .xm-popular .xm-row:nth-of-type(5) { display: none; } } /* ---- category columns ---- */ .xm-catcols { display: grid; gap: 24px; } @media (min-width: 640px) { .xm-catcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .xm-catcols .xm-catcol:nth-child(2) { display: none; } } .xm-catcol { display: flex; flex-direction: column; gap: 6px; padding: 20px 14px 14px; } @media (min-width: 1024px) { .xm-catcol { padding: 24px 18px 14px; } } .xm-catcol-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 6px; } .xm-catcol-head h2 { display: flex; align-items: center; gap: 12px; font: 800 19px/30px var(--xpc-font) !important; } @media (min-width: 1024px) { .xm-catcol-head h2 { font-size: 24px !important; line-height: 36px !important; } } .xm-catcol-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary); } @media (min-width: 1024px) { .xm-catcol .xm-row-cover { width: 152px; } } /* ---- product grid (shop card, from the shell's .xh-pc) + rails ---- */ .xm-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 640px) { .xm-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1024px) { .xm-products { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .xm-products--hub { grid-template-columns: minmax(0, 220px); } .xm-rail-all { display: none; } @media (max-width: 639px) { .xm-main .xm-rail-m { display: flex; gap: 10px; margin-inline: calc(-1 * var(--gutter-mobile)); padding-inline: var(--gutter-mobile); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; } .xm-rail-m::-webkit-scrollbar { display: none; } .xm-main .xm-rail-m > * { flex-shrink: 0; scroll-snap-align: start; } .xm-products.xm-rail-m > .xh-pc { width: 156px; } .xm-rail-all { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 120px; border-radius: var(--radius-lg); background: var(--primary-soft); color: var(--primary) !important; font: 700 14px/1.4 var(--xpc-font); } .xm-related.xm-rail-m > .xm-card { width: 260px; } } /* WP-228: a cached page whose only grid card(s) went out of stock / delisted has them dropped at serve time — hide the section (hub «خرید …», «محصولات پیشنهادی») rather than leave a heading over an empty grid. */ .xm-sec:has(> .xm-products:empty) { display: none; } .xm-pc.is-oos .xh-pc-art img { filter: grayscale(1); opacity: .55; } .xm-oos-cover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,27,51,.35); } .xm-oos-cover span, .xm-pill-oos { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); font: 700 13px/1 var(--xpc-font); } .xm-pc .xh-pc-price b { font-size: 15px; } /* ---- hubs ---- */ .xm-hubs { display: grid; gap: 12px; } @media (min-width: 640px) { .xm-hubs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 1023px) { .xm-hub { flex-direction: column; align-items: flex-start; gap: 10px; } .xm-hub > .xh-i { display: none; } .xm-hub-art { width: 48px; height: 48px; } } @media (min-width: 1024px) { .xm-hubs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } .xm-hub { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 16px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base); } @media (max-width: 639px) { .xm-hubs.xm-rail-m > .xm-hub { width: 240px; } } .xm-hub:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .xm-hub-art { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; overflow: hidden; border-radius: 16px; color: #fff; font: 800 18px/1 var(--xpc-font); } .xm-hub-art img { width: 100%; height: 100%; object-fit: cover; } .xm-hub-text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; } .xm-hub-text b { font: 800 16px/1.5 var(--xpc-font); } .xm-hub-text span { font: 400 13px/1.5 var(--xpc-font); color: var(--text-muted); } .xm-hub > .xh-i { color: var(--primary); } /* ---- banner slots (BANNER-SLOTS.md) ---- */ .xm-slot { position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden; border-radius: var(--radius-xl); padding: 24px 20px; min-height: 196px; } .xm-slot--ink { background: var(--surface-ink); color: #fff; } .xm-slot--primary { background: var(--primary); color: #fff; } .xm-slot--warm { background: var(--surface-warm); color: var(--text-strong); } .xm-slot--wide { border-radius: var(--radius-2xl); } @media (min-width: 1024px) { .xm-slot--wide { min-height: 208px; padding: 36px 48px; } .xm-slot--duo { min-height: 248px; padding: 32px; } } .xm-slot--side { min-height: 200px; padding: 24px; } .xm-slot--feed { height: 100%; padding: 28px; } .xm-slot--inline { min-height: 88px; padding: 18px 20px; margin: 28px 0; border-radius: var(--radius-xl); } .xm-orb { position: absolute; z-index: -1; width: 420px; height: 420px; left: -60px; top: -140px; border-radius: 999px; background: rgba(47,107,255,.28); animation: xm-orb 12s ease-in-out infinite alternate; pointer-events: none; } .xm-slot--primary .xm-orb, .xm-support .xm-orb, .xm-cta .xm-orb { background: rgba(255,255,255,.14); } .xm-slot--warm .xm-orb { background: rgba(224,147,10,.14); } .xm-slot--inline .xm-orb { width: 220px; height: 220px; left: -40px; top: -60px; } @keyframes xm-orb { to { transform: translate(40px, -30px) scale(1.12); } } .xm-slot-art { position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 38%; pointer-events: none; } .xm-tile { position: absolute; display: block; overflow: hidden; width: 72px; height: 72px; border-radius: 16px; border: 4px solid rgba(255,255,255,.9); box-shadow: 0 20px 40px rgba(0,0,0,.3); animation: xm-float 7s ease-in-out infinite alternate; } .xm-tile img { width: 100%; height: 100%; object-fit: cover; } .xm-tile--1 { --r: -8deg; left: 10%; top: 26%; } .xm-tile--2 { --r: 6deg; left: 42%; top: 10%; width: 64px; height: 64px; animation-delay: .8s; } .xm-tile--3 { --r: -4deg; left: 64%; top: 48%; width: 58px; height: 58px; animation-delay: 1.6s; } @media (min-width: 1024px) { .xm-slot--wide .xm-tile--1, .xm-slot--duo .xm-tile--1 { width: 104px; height: 104px; } .xm-slot--wide .xm-tile--2 { width: 96px; height: 96px; } .xm-slot--wide .xm-tile--3 { width: 88px; height: 88px; } } @keyframes xm-float { from { transform: translateY(-6px) rotate(var(--r)); } to { transform: translateY(8px) rotate(var(--r)); } } .xm-slot--inline .xm-slot-art, .xm-slot--side .xm-tile--2, .xm-slot--side .xm-tile--3, .xm-slot--feed .xm-tile--3 { display: none; } .xm-slot-text { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 62%; } .xm-slot--inline .xm-slot-text { max-width: 100%; flex: 1; } .xm-slot-kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1.5 var(--xpc-font); color: var(--rail-text); } .xm-slot--warm .xm-slot-kicker { color: var(--text-body); } .xm-slot .xm-slot-logo { height: 22px; width: auto; max-width: none; border-radius: 0; } .xm-slot-title { font: 800 20px/32px var(--xpc-font); text-wrap: balance; } @media (min-width: 1024px) { .xm-slot--wide .xm-slot-title { font-size: 32px; line-height: 46px; } .xm-slot--duo .xm-slot-title { font-size: 26px; line-height: 40px; } } .xm-slot--inline .xm-slot-title { font-size: 17px; line-height: 28px; } .xm-slot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .xm-slot-body { font: 400 14px/1.8 var(--xpc-font); color: var(--rail-text); } .xm-slot--warm .xm-slot-body { color: var(--text-body); } @media (min-width: 1024px) { .xm-slot-body { font-size: 16px; } } .xm-slot-cta { background: #fff; color: var(--text-strong) !important; } .xm-slot-cta:hover { background: var(--primary-soft); } .xm-slot--warm .xm-slot-cta { background: var(--primary); color: #fff !important; } .xm-slot--warm .xm-slot-cta:hover { background: var(--primary-hover); } @media (min-width: 640px) { .xm-slot--inline .xm-slot-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 4px; align-items: center; } .xm-slot--inline .xm-slot-title { grid-row: 1; grid-column: 1; } .xm-slot--inline .xm-slot-kicker { grid-row: 2; grid-column: 1; } .xm-slot--inline .xm-slot-row { grid-row: 1 / span 2; grid-column: 2; } } .xm-slot--image { padding: 0; min-height: 0; background: none; } .xm-slot--image a { display: block; width: 100%; } .xm-slot--image img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: inherit; } .xm-duo { display: grid; gap: 16px; } @media (min-width: 1024px) { .xm-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } /* S4 default — Telegram support card */ .xm-support { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; height: 100%; min-height: 280px; overflow: hidden; padding: 28px; border-radius: var(--radius-xl); background: var(--primary); color: #fff; } .xm-support .xm-orb { left: -80px; top: -80px; width: 300px; height: 300px; } .xm-support-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(255,255,255,.16); } .xm-support-title { font: 800 22px/34px var(--xpc-font); } .xm-support-body { font: 400 15px/26px var(--xpc-font); color: rgba(255,255,255,.9); } .xm-support .xm-btn { align-self: flex-start; } /* ---- feed ---- */ .xm-feed { display: grid; gap: 16px; } @media (min-width: 640px) { .xm-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .xm-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } .xm-feed > .xm-card { order: var(--o); } .xm-feed-s4 { order: 5; } @media (min-width: 1024px) { .xm-feed-s4 { order: 9; } } .xm-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base); } .xm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .xm-card-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px; } @media (min-width: 1024px) { .xm-card-body { padding: 20px; } } .xm-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 17px/28px var(--xpc-font) !important; transition: color var(--dur-fast); } @media (min-width: 1024px) { .xm-card-title { font-size: 18px !important; line-height: 30px !important; min-height: 60px; } } .xm-card-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 14px/24px var(--xpc-font); color: var(--text-muted); } .xm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--divider); } .xm-card-go { color: var(--primary); display: flex; } /* ---- pagination ---- */ .xm-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; } .xm-pager-n, .xm-pager-step { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-xs); font: 700 15px/1 var(--xpc-font); color: var(--text-strong) !important; transition: background var(--dur-fast); } .xm-pager-n:hover, .xm-pager-step:hover { background: var(--surface-hover); } .xm-pager-n.is-current { background: var(--primary); color: #fff !important; box-shadow: none; } .xm-pager-step:first-child .xh-i { transform: scaleX(-1); } .xm-pager-gap { min-width: 24px; text-align: center; color: var(--text-muted); font-weight: 700; } @media (max-width: 639px) { .xm-pager-far { display: none; } } /* ---- empty states ---- */ .xm-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); text-align: center; font: 400 15px/1.8 var(--xpc-font); color: var(--text-body); } .xm-empty-title { font: 800 20px/1.6 var(--xpc-font); color: var(--text-strong); } .xm-empty .xm-btn { margin-top: 8px; } /* ---- CTA band ---- */ .xm-cta { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 24px; overflow: hidden; padding: 32px 20px; border-radius: var(--radius-xl); background: var(--primary); color: #fff; } @media (min-width: 1024px) { .xm-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 56px; border-radius: var(--radius-3xl); } } .xm-cta .xm-orb { left: 80px; top: -140px; } .xm-cta-text { display: flex; flex-direction: column; gap: 14px; max-width: 720px; } .xm-cta h2 { color: #fff !important; font: 800 24px/38px var(--xpc-font) !important; text-wrap: balance; } @media (min-width: 1024px) { .xm-cta h2 { font-size: 36px !important; line-height: 52px !important; } } .xm-cta p { font: 400 15px/1.8 var(--xpc-font); color: rgba(255,255,255,.9); } .xm-cta-trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .xm-cta-trust li { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); font: 700 13px/1 var(--xpc-font); white-space: nowrap; } .xm-cta-btns { display: grid; gap: 10px; flex-shrink: 0; } @media (min-width: 1024px) { .xm-cta-btns { display: flex; gap: 12px; } } .xm-cta .xm-btn--white { box-shadow: 0 10px 24px rgba(15,27,51,.18); } /* ===================================================================== * Article * ===================================================================== */ .xm-progress { position: absolute; inset-inline: 0; bottom: -3px; height: 3px; background: transparent; pointer-events: none; } .xm-progress span { display: block; height: 100%; width: 0; margin-inline-start: 0; background: var(--primary); transition: width .1s linear; } .xm-main--article { gap: 32px; } @media (min-width: 1024px) { .xm-main--article { gap: 56px; } } .xm-article { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 1024px) { .xm-article { gap: 40px; } } /* hero */ .xm-ahero { display: flex; flex-direction: column; gap: 14px; } @media (min-width: 1024px) { .xm-ahero { display: grid; grid-template-columns: minmax(0, 1fr) 640px; column-gap: 48px; row-gap: 16px; align-items: start; } .xm-ahero > * { grid-column: 1; } .xm-ahero > .xm-ahero-cover { grid-column: 2; grid-row: 1 / span 6; align-self: center; } } .xm-crumbs { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: 13px; color: var(--text-muted); white-space: nowrap; } .xm-crumbs a { color: var(--text-muted) !important; } .xm-crumbs a:hover { color: var(--primary) !important; } .xm-crumb-last { overflow: hidden; text-overflow: ellipsis; min-width: 0; } @media (max-width: 639px) { .xm-crumb-last, .xm-crumbs span[aria-hidden]:nth-last-child(2) { display: none; } } .xm-ahero h1 { font: 800 24px/38px var(--xpc-font); text-wrap: balance; } @media (min-width: 1024px) { .xm-ahero h1 { font-size: 40px; line-height: 58px; } } .xm-ahero-lead { font: 400 15px/28px var(--xpc-font); color: var(--text-body); } @media (min-width: 1024px) { .xm-ahero-lead { font-size: 18px; line-height: 32px; } } .xm-ahero-cover { border-radius: var(--radius-xl); box-shadow: var(--shadow-card); } @media (min-width: 1024px) { .xm-ahero-cover { border-radius: var(--radius-2xl); } } .xm-ahero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } .xm-share { display: flex; gap: 8px; } .xm-share-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: #fff; color: var(--text-strong) !important; box-shadow: var(--shadow-xs); transition: background var(--dur-fast), color var(--dur-fast); } .xm-share-btn:hover { color: var(--primary) !important; background: var(--primary-soft); } .xm-share-btn.is-copied { color: var(--success-strong) !important; background: var(--success-soft); } .xm-toc-m { border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); } @media (min-width: 1024px) { .xm-toc-m { display: none; } } .xm-toc-m summary { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 16px; list-style: none; cursor: pointer; font: 400 14px/1 var(--xpc-font); color: var(--text-muted); } .xm-toc-m summary::-webkit-details-marker { display: none; } .xm-toc-m summary > .xh-i:first-child { color: var(--primary); } .xm-toc-m summary b { font: 800 15px/1 var(--xpc-font); color: var(--text-strong); } .xm-toc-m summary > .xh-i:last-child { margin-inline-start: auto; transition: transform var(--dur-fast); } .xm-toc-m[open] summary > .xh-i:last-child { transform: rotate(180deg); } .xm-toc-m ol, .xm-toc ol { margin: 0; padding: 0 8px 12px; list-style: none; counter-reset: none; } .xm-toc-m ol a, .xm-toc ol a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px; font: 500 14px/1.7 var(--xpc-font); color: var(--text-body) !important; } .xm-toc-m ol a::before, .xm-toc ol a::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 999px; background: var(--border-strong); } .xm-toc ol a:hover { color: var(--primary) !important; } .xm-toc a[aria-current="location"] { background: var(--primary-soft); color: var(--primary) !important; font-weight: 700; } .xm-toc a[aria-current="location"]::before { background: var(--primary); } /* body grid */ .xm-abody { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 1024px) { .xm-abody { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; } } .xm-paper { min-width: 0; margin-inline: calc(-1 * var(--gutter-mobile)); padding: 24px var(--gutter-mobile); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: #fff; } @media (min-width: 640px) { .xm-paper { margin-inline: 0; padding: 32px; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); } } @media (min-width: 1024px) { .xm-paper { padding: 44px 52px; border-radius: var(--radius-2xl); } } .xm-aside { display: none; } @media (min-width: 1024px) { .xm-aside { display: flex; flex-direction: column; gap: 24px; align-self: stretch; } } .xm-aside .xm-toc { position: sticky; top: 104px; } /* prose */ .xm-prose { max-width: none !important; margin: 0 !important; font: 400 16px/32px var(--xpc-font); color: var(--text-strong); } @media (min-width: 1024px) { .xm-prose { font-size: 17px; line-height: 34px; } } .xm-prose p { margin: 0 0 18px; } .xm-prose h2 { margin: 36px 0 14px !important; font: 800 21px/34px var(--xpc-font) !important; scroll-margin-top: 88px; } @media (min-width: 1024px) { .xm-prose h2 { font-size: 26px !important; line-height: 40px !important; } } .xm-prose h3 { margin: 26px 0 10px !important; font: 800 18px/30px var(--xpc-font) !important; scroll-margin-top: 88px; } .xm-prose a:not([class]) { color: var(--primary) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .xm-prose ul, .xm-prose ol { margin: 0 0 18px; padding-inline-start: 22px; } .xm-prose li { margin-bottom: 6px; } .xm-prose img:not([class]), .xm-prose figure img { max-width: 100%; height: auto; border-radius: var(--radius-lg); } .xm-prose figure { margin: 0 0 22px; } .xm-prose blockquote { margin: 0 0 18px; padding: 14px 18px; border-inline-start: 4px solid var(--primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--primary-soft); } .xm-prose > :first-child { margin-top: 0 !important; } .xm-prose .xpc-breadcrumb { display: none; } /* summary */ .xm-summary { margin: 0 0 28px; padding: 20px; border-radius: var(--radius-xl); background: var(--primary-soft); } @media (min-width: 1024px) { .xm-summary { padding: 24px 28px; } } .xm-summary-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px !important; font: 800 18px/30px var(--xpc-font) !important; scroll-margin-top: 88px; } .xm-summary-h .xh-i { color: var(--primary); } .xm-summary ul, .xm-prose .is-style-xpc-summary { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .xm-summary li { display: flex; gap: 10px; font: 500 15px/1.9 var(--xpc-font); } .xm-summary li .xh-i { margin-top: 5px; color: var(--success); } .xm-prose .is-style-xpc-summary { padding: 20px 24px; border-radius: var(--radius-xl); background: var(--primary-soft); margin-bottom: 24px; } .xm-prose .is-style-xpc-summary li { position: relative; padding-inline-start: 28px; margin: 0; } .xm-prose .is-style-xpc-summary li::before { content: '✓'; position: absolute; inset-inline-start: 0; top: 4px; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid var(--success); border-radius: 999px; color: var(--success); font: 800 10px/1 var(--xpc-font); } /* steps */ .xm-prose .is-style-xpc-steps { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: xm-step; } @media (min-width: 640px) { .xm-prose .is-style-xpc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .xm-prose .is-style-xpc-steps > li { position: relative; margin: 0; padding: 18px 18px 18px 18px; padding-inline-start: 62px; border-radius: var(--radius-lg); background: var(--surface-base); counter-increment: xm-step; font-size: 15px; line-height: 1.9; } .xm-prose .is-style-xpc-steps > li::before { content: counter(xm-step, persian); position: absolute; inset-inline-start: 16px; top: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--primary); color: #fff; font: 800 15px/1 var(--xpc-font); } /* warning */ .xm-prose .is-style-xpc-warning { margin: 0 0 24px; padding: 18px 22px; border-radius: var(--radius-xl); background: var(--surface-warm); color: var(--text-strong); } .xm-prose p.is-style-xpc-warning::before { content: '⚠ '; color: var(--warning); font-weight: 800; } /* tables */ .xm-table-hint { display: none; margin: 0 0 6px !important; font: 700 12px/1.5 var(--xpc-font); color: var(--text-muted); } @media (max-width: 639px) { .xm-table-hint { display: block; } } .xm-prose .xm-table { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); } .xm-prose .xm-table table { width: 100%; min-width: 520px; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.8; } .xm-prose .xm-table th { padding: 14px 16px; background: var(--surface-base); font: 700 13px/1.6 var(--xpc-font); color: var(--text-muted); text-align: start; border: 0; border-bottom: 1px solid var(--border); } .xm-prose .xm-table td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--border); } .xm-prose .xm-table tr:last-child td { border-bottom: 0; } .xm-prose .xm-table td:first-child { font-weight: 700; } .xm-prose .xm-table tr.is-best td, .xm-cmp tr.is-best td { background: var(--success-soft); } .xm-best { display: inline-block; margin-inline: 4px; padding: 1px 8px; border-radius: 999px; background: var(--success); color: #fff; font: 700 11px/1.8 var(--xpc-font); white-space: nowrap; } /* WP-187 live package comparison [xpc_compare] — the xm-table look above, the .xm-best chip, the DES-044 discount pill (.xh-pc-off); no new colours. */ .xm-cmp caption { padding: 12px 16px; border-bottom: 1px solid var(--border); font: 700 14px/1.6 var(--xpc-font); color: var(--text-strong); text-align: start; caption-side: top; } .xm-cmp td:not(:first-child) { white-space: nowrap; } .xm-cmp-price .xm-price-old { margin-inline-end: 2px; } .xm-cmp-price .xh-pc-off { display: inline-block; margin-inline-start: 6px; } .xm-cmp td:last-child { width: 1%; white-space: nowrap; } .xm-cmp-buy { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius-md); background: var(--primary); color: #fff !important; font: 800 13px/1 var(--xpc-font); text-decoration: none !important; white-space: nowrap; } .xm-cmp-buy:hover { background: var(--primary-hover); } .xm-cmp-more { margin: -16px 0 24px; } /* FAQ */ .xm-faqs { margin: 0 0 24px; } .xm-faq { margin-bottom: 10px; border-radius: var(--radius-lg); background: var(--surface-base); } .xm-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 20px; list-style: none; cursor: pointer; font: 800 15px/1.8 var(--xpc-font); color: var(--text-strong); } .xm-faq summary::-webkit-details-marker { display: none; } .xm-faq summary .xh-i { color: var(--text-muted); transition: transform var(--dur-fast); } .xm-faq[open] summary .xh-i { transform: rotate(180deg); } .xm-faq-a { padding: 0 20px 14px; font-size: 15px; line-height: 1.9; color: var(--text-body); } .xm-faq-a p:last-child { margin-bottom: 0; } /* About */ .xm-about { margin: 8px 0 24px; padding: 22px; border-radius: var(--radius-xl); background: var(--surface-base); } @media (min-width: 1024px) { .xm-about { padding: 26px 24px; } } .xm-about h2 { display: flex; align-items: center; gap: 12px; margin-top: 0 !important; font-size: 21px !important; } .xm-about-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary); color: #fff; font: 800 14px/1 var(--xpc-font); direction: ltr; } .xm-about p:last-child, .xm-about ul:last-child { margin-bottom: 0; } /* inline product card */ .xm-pi { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px 16px; align-items: center; margin: 28px 0; padding: 16px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card), 0 0 0 1px var(--border); } @media (min-width: 640px) { .xm-pi { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 20px; } } .xm-pi-art { display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; font: 800 24px/1 var(--xpc-font); } @media (min-width: 640px) { .xm-pi-art { width: 96px; height: 96px; } } .xm-pi-art img, .xm-pa-art img, .xm-buybar-art img { width: 100%; height: 100%; object-fit: cover; } .xm-pi-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .xm-prose .xm-pi a.xm-pi-name { font: 800 17px/1.6 var(--xpc-font); color: var(--text-strong) !important; text-decoration: none !important; } .xm-pi-meta { font: 400 13px/1.5 var(--xpc-font); color: var(--text-body); } .xm-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--success-strong); } .xm-live::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--success); } .xm-pi-buy { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; } @media (min-width: 640px) { .xm-pi-buy { grid-column: auto; flex-direction: column; align-items: flex-end; } } .xm-price { font: 400 12px/1.5 var(--xpc-font); color: var(--text-muted); white-space: nowrap; } .xm-price b { font: 800 18px/1.4 var(--xpc-font); color: var(--text-strong); } .xm-price--oos { font-weight: 700; } /* WP-186: pre-discount price, struck through before the effective one (g/a/i). */ .xm-price-old { font: 400 12px/1.5 var(--xpc-font); color: var(--text-muted); text-decoration: line-through; white-space: nowrap; } .xh-pc-price .xm-price-old { font-size: 11px; line-height: 1.3; } .xm-pi.is-oos .xm-pi-art img { filter: grayscale(1); opacity: .6; } /* sidebar product card */ .xm-pa { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); } .xm-pa-head { display: flex; align-items: center; gap: 14px; } .xm-pa-art { display: grid; place-items: center; flex-shrink: 0; width: 84px; height: 84px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; font: 800 22px/1 var(--xpc-font); } .xm-pa-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .xm-pa-name { font: 800 16px/1.6 var(--xpc-font); color: var(--text-strong) !important; } .xm-pa-name:hover { color: var(--primary) !important; } .xm-dp-logo { height: 18px; width: auto; } .xm-trust { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 14px 4px 0; border-top: 1px solid var(--divider); list-style: none; font: 400 13px/1.5 var(--xpc-font); color: var(--text-body); } .xm-trust li { display: flex; align-items: center; gap: 8px; } .xm-trust .xh-i { color: var(--primary); } .xm-pa.is-oos .xm-pa-art img { filter: grayscale(1); opacity: .6; } .xm-pa .xm-pill-oos { align-self: flex-start; } .xm-s5 .xm-slot { min-height: 200px; } /* sticky TOC */ .xm-toc { padding: 18px 8px 8px; } .xm-toc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 8px; } .xm-toc-head h2 { display: flex; align-items: center; gap: 8px; font: 800 17px/28px var(--xpc-font) !important; } .xm-toc-head .xh-i { color: var(--primary); } .xm-toc-pct { font: 400 12px/1 var(--xpc-font); color: var(--text-muted); white-space: nowrap; } .xm-toc ol { max-height: 46vh; overflow-y: auto; } .xm-toc-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 8px 4px; padding: 14px 4px 4px; border-top: 1px solid var(--divider); } .xm-toc-buy > div { display: flex; flex-direction: column; min-width: 0; } .xm-toc-buy-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.6 var(--xpc-font); color: var(--text-muted); } .xm-toc-buy .xm-price b { font-size: 16px; } /* tags / share / author */ .xm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; } .xm-tags a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--surface-base); font: 700 13px/1 var(--xpc-font); color: var(--text-body) !important; } .xm-tags a:hover { background: var(--primary-soft); color: var(--primary) !important; } .xm-share-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--divider); font: 700 15px/1.6 var(--xpc-font); } .xm-authorbox { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-xl); } .xm-authorbox > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .xm-authorbox-name { font: 800 16px/1.6 var(--xpc-font); color: var(--text-strong) !important; } .xm-authorbox-bio { font: 400 14px/1.9 var(--xpc-font); color: var(--text-body); } .xm-authorbox--page { margin: 0; border: 0; } .xm-authorbox-img { flex-shrink: 0; width: 72px; height: 72px; border-radius: 999px; object-fit: contain; background: var(--primary-soft); } /* related */ .xm-related { display: grid; gap: 16px; } @media (min-width: 640px) { .xm-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .xm-related { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } } /* mobile sticky buy bar (MAG-SPEC §4) */ .xm-buybar-wrap { position: fixed; z-index: 45; inset-inline: 0; bottom: 0; padding: 10px var(--gutter-mobile) calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: var(--shadow-sheet); transition: transform var(--dur-base) var(--ease-standard); } .xm-buybar-wrap.is-hidden { transform: translateY(110%); } /* WP-149: a cached page whose product went away (404 / expired snapshot) has its buy-bar card dropped at serve time — hide the then-empty fixed bar. */ .xm-buybar-wrap:empty { display: none; } @media (min-width: 1024px) { .xm-buybar-wrap { display: none; } } @media (max-width: 1023px) { body.xm-has-buybar { padding-bottom: 88px; } } /* WP-228: a page rendered while its product was out of stock has no xm-has-buybar and an empty wrap; if the serve-time swap restores the bar (restocked), pad for it here. */ @media (max-width: 1023px) { body:has(.xm-buybar-wrap:not(:empty)) { padding-bottom: 88px; } } body.xm-has-buybar:has(.xm-buybar-wrap:empty) { padding-bottom: 0; } .xm-buybar { max-width: 720px; margin-inline: auto; } .xm-buybar { display: flex; align-items: center; gap: 12px; } .xm-buybar-art { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; overflow: hidden; border-radius: 12px; color: #fff; font: 800 16px/1 var(--xpc-font); } .xm-buybar-info { display: flex; flex: 1; flex-direction: column; min-width: 0; } .xm-buybar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 14px/1.6 var(--xpc-font); } .xm-buybar .xm-price b { font-size: 15px; } .xm-buybar-dp { font: 400 11px/1.5 var(--xpc-font); color: var(--text-muted); } .xm-buybar .xm-btn { height: 44px; padding: 0 18px; } /* reduced motion (MAG-SPEC §6) — orb, float, pulse, shimmer, hover lifts */ @media (prefers-reduced-motion: reduce) { .xm-orb, .xm-tile, .xm-dot { animation: none !important; } .xm-card:hover, .xm-hero-card:hover, .xm-hub:hover, .xm-card:hover .xm-cover img, .xm-hero-card:hover .xm-cover img, .xm-row:hover .xm-cover img { transform: none !important; } .xm-buybar-wrap, .xm-progress span { transition: none; } } /* ===================================================================== * Tablet 640–1023 (DES-046 rev1 boards «تبلت ۷۶۸», MAG-SPEC §2) * ===================================================================== */ @media (min-width: 640px) and (max-width: 1023px) { .xm-page .xh-wrap { padding-inline: 24px; } .xm-page .xh-hdr-in { min-height: 64px; } .xm-filters { margin-inline: -24px; padding-inline: 24px; } .xm-mast h1 { font-size: 34px; line-height: 48px; } .xm-popular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; } .xm-popular .xm-panel-h { grid-column: 1 / -1; } .xm-popular .xm-row:nth-of-type(5) { display: none; } .xm-popular .xm-row .xm-meta > span:first-child { display: none; } .xm-ahero h1 { font-size: 30px; line-height: 46px; } } /* Product artwork fallback (xpc_mag_art_img): the text sits underneath and the image covers it; a failed image removes itself and the text shows. */ .xm-pa-art, .xm-pi-art, .xm-buybar-art, .xm-hub-art, .xm-tile, .xm-pc .xh-pc-art { position: relative; } .xm-art-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; } .xm-art-fb { display: grid; place-items: center; width: 100%; height: 100%; padding: 4px; color: #fff; font: 800 18px/1.3 var(--xpc-font); text-align: center; overflow: hidden; } .xm-pc .xh-pc-art .xm-art-fb { position: absolute; inset: 0; padding: 12px; font-size: 16px; } .xm-buybar-art .xm-art-fb { font-size: 16px; } /* ===================================================================== * WP-140 — reader comments + star ratings (comments.php). Lives in the * Mag-only stylesheet with the rest of the article card, so no new request * and nothing loaded outside Mag views. Star rows: see xpc_stars_html() — * the gold overlay is anchored to the inline START (right, in RTL). * ===================================================================== */ .xpc-cm { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--divider); } .xpc-cm-h { font: 800 20px/1.6 var(--xpc-font); } .xpc-cm-count { color: var(--text-muted); font-weight: 700; } .xpc-cm-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--surface-sunken); } .xpc-cm-avg { font: 700 15px/1.4 var(--xpc-font); color: var(--text-muted); } .xpc-cm-avg b { font: 800 28px/1 var(--xpc-font); color: var(--text-strong); } .xpc-cm-basis { font: 400 14px/1.6 var(--xpc-font); color: var(--text-muted); } .xpc-stars { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; color: var(--border-strong); white-space: nowrap; vertical-align: middle; } .xpc-stars-base, .xpc-stars-fill { display: inline-flex; gap: 2px; } .xpc-stars-fill { position: absolute; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; color: var(--warning); } .xpc-stars svg { flex-shrink: 0; } .xpc-cm-list, .xpc-cm-replies { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; } .xpc-cm-list > li { padding-bottom: 16px; border-bottom: 1px solid var(--divider); } .xpc-cm-list > li:last-child { padding-bottom: 0; border-bottom: 0; } .xpc-cm-replies { margin-top: 12px; margin-inline-start: 52px; } .xpc-cm-item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .xpc-cm-item--reply { padding: 12px 14px; border-radius: var(--radius-md); background: var(--primary-soft); } .xpc-cm-avatar--team { background: var(--primary); color: #fff; } .xpc-cm-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; } .xpc-cm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; } .xpc-cm-name { font: 800 15px/1.6 var(--xpc-font); color: var(--text-strong); overflow-wrap: anywhere; } .xpc-comment-text { font: 400 15px/1.9 var(--xpc-font); color: var(--text-body); overflow-wrap: anywhere; } .xpc-comment-text p + p { margin-top: 8px; } .xpc-cm-empty { padding: 16px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); font: 400 15px/1.8 var(--xpc-font); color: var(--text-muted); } .xpc-cm-more { margin: 0 0 12px; font: 400 13px/1.7 var(--xpc-font); color: var(--text-muted); } /* Success notice: hidden until the post-submit redirect targets it. */ .xpc-cm-sent { display: none; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--success-soft); color: var(--success-strong, #0A8F6A); font: 700 15px/1.8 var(--xpc-font); scroll-margin-top: 96px; } .xpc-cm-sent:target { display: flex; } .xpc-cm-sent svg { flex-shrink: 0; margin-top: 4px; } .xpc-cm-form { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-xl); scroll-margin-top: 96px; } .xpc-cm-form-h { font: 800 17px/1.6 var(--xpc-font); } .xpc-cm-row { display: grid; gap: 16px; } @media (min-width: 640px) { .xpc-cm-row { grid-template-columns: 1fr 1fr; } } .xpc-cm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .xpc-cm-field label { font: 700 14px/1.6 var(--xpc-font); color: var(--text-strong); } .xpc-cm-form input[type="text"], .xpc-cm-form input[type="tel"], .xpc-cm-form textarea { box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-strong); font: 400 16px/1.7 var(--xpc-font); box-shadow: none; } .xpc-cm-form textarea { min-height: 128px; resize: vertical; } .xpc-cm-form input[dir="ltr"] { text-align: start; } .xpc-cm-form input[dir="ltr"]::placeholder { text-align: end; } .xpc-cm-form input:focus-visible, .xpc-cm-form textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); } .xpc-cm-hint { font: 400 13px/1.7 var(--xpc-font); color: var(--text-muted); } .xpc-cm-challenge { max-width: 320px; } .xpc-cm-challenge bdi { font-weight: 800; } /* Star radio group. DOM order is 5→1 so `input:checked ~ label` fills the checked star and every LOWER one; row-reverse inside the RTL article puts the first DOM item (5) on the LEFT, so ۱ sits on the right and the fill grows right→left in reading order. (In an RTL row, flex-start is the right edge — the documented trap; this layout does not rely on it.) */ .xpc-rate { min-width: 0; margin: 0; padding: 0; border: 0; } .xpc-rate legend { margin-bottom: 8px; padding: 0; font: 700 15px/1.6 var(--xpc-font); color: var(--text-strong); } .xpc-rate-stars { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 4px; } .xpc-rate-stars input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } .xpc-rate-stars label { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--border-strong); cursor: pointer; transition: color var(--dur-fast), transform var(--dur-fast); } .xpc-rate-stars input:checked ~ label { color: var(--warning); } .xpc-rate-stars input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 1px; } @media (hover: hover) { /* Preview: while the row is hovered, the hovered star and every lower one light up (the selectors out-rank the :checked fill above). */ .xpc-rate-stars:hover input ~ label { color: var(--border-strong); } .xpc-rate-stars:hover input ~ label:hover, .xpc-rate-stars:hover input ~ label:hover ~ label { color: var(--warning); } .xpc-rate-stars label:hover { transform: scale(1.08); } } .xpc-rate-val { order: -1; min-width: 4.5em; margin-inline-end: 8px; font: 700 14px/1 var(--xpc-font); color: var(--text-muted); } #xpc-rate-5:checked ~ .xpc-rate-val::after { content: "عالی"; } #xpc-rate-4:checked ~ .xpc-rate-val::after { content: "خوب"; } #xpc-rate-3:checked ~ .xpc-rate-val::after { content: "متوسط"; } #xpc-rate-2:checked ~ .xpc-rate-val::after { content: "ضعیف"; } #xpc-rate-1:checked ~ .xpc-rate-val::after { content: "خیلی بد"; } /* style.css paints every