/* * Sweetyblog Widgets — compiled stylesheet. * Self-contained: this is a Tailwind build scoped to only the utility * classes actually used in this plugin's widgets, so it works out of * the box regardless of whatever Tailwind setup (or none) the theme * itself uses. Preflight/base-reset is disabled so it won't fight with * the theme's own global styles. */ *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.\!static{position:static!important}.fixed{position:fixed}.\!absolute{position:absolute!important}.absolute{position:absolute}.relative{position:relative}.\!inset-0{inset:0!important}.inset-0{inset:0}.\!bottom-4{bottom:1rem!important}.\!left-auto{left:auto!important}.\!right-6{right:1.5rem!important}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-2{top:.5rem}.top-3{top:.75rem}.top-4{top:1rem}.z-10{z-index:10}.float-right{float:right}.clear-both{clear:both}.\!mt-5{margin-top:1.25rem!important}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-5{margin-bottom:1.25rem}.ml-4{margin-left:1rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.list-item{display:list-item}.hidden{display:none}.\!h-9{height:2.25rem!important}.\!h-full{height:100%!important}.h-16{height:4rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-40{height:10rem}.h-44{height:11rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-9{height:2.25rem}.h-auto{height:auto}.h-full{height:100%}.min-h-\[280px\]{min-height:280px}.\!w-9{width:2.25rem!important}.\!w-fit{width:-moz-fit-content!important;width:fit-content!important}.\!w-full{width:100%!important}.w-1\.5{width:.375rem}.w-16{width:4rem}.w-2\/5{width:40%}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-9{width:2.25rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-\[220px\]{max-width:220px}.shrink-0{flex-shrink:0}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.\!items-center{align-items:center!important}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.\!justify-center{justify-content:center!important}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.\!rounded-full{border-radius:9999px!important}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.border-b{border-bottom-width:1px}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-indigo-800{--tw-bg-opacity:1;background-color:rgb(55 48 163/var(--tw-bg-opacity,1))}.bg-pink-600{--tw-bg-opacity:1;background-color:rgb(219 39 119/var(--tw-bg-opacity,1))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity,1))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-black\/85{--tw-gradient-from:rgba(0,0,0,.85) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-black\/20{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.2) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.\!object-cover{-o-object-fit:cover!important;object-fit:cover!important}.\!p-0{padding:0!important}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-snug{line-height:1.375}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-500{transition-duration:.5s}.after\:hidden:after{content:var(--tw-content);display:none}.last\:border-0:last-child{border-width:0}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:block{display:block}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:768px){.md\:block{display:block}.md\:min-h-\[420px\]{min-height:420px}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[1\.3fr_1fr\]{grid-template-columns:1.3fr 1fr}}/* Swiper pagination bullets */ .sw-widget .swiper-pagination-bullet { width: 7px; height: 7px; background: #cbd5e1; opacity: 1; } .sw-widget .swiper-pagination-bullet-active { background: #4f46e5; width: 18px; border-radius: 9999px; } /* Single-slide widget: arrows sit near the bottom, spread to each side — matching Swiper's own rtl:true convention (prev=right, next=left). NOTE: the buttons are now DOM siblings of .sw-swiper (moved outside its overflow:hidden box so they can never get clipped), hence the general-sibling combinator (~) instead of a descendant selector. */ .sw-swiper:not(.sw-carousel) ~ .swiper-button-prev, .sw-swiper:not(.sw-carousel) ~ .swiper-button-next { top: auto; bottom: 1rem; margin-top: 0; } .sw-swiper:not(.sw-carousel) ~ .swiper-button-prev { right: 1.5rem; } .sw-swiper:not(.sw-carousel) ~ .swiper-button-next { left: 1.5rem; } /* Carousel widget: arrows sit outside the card row, vertically centered. Same principle — only position/size are set here, not left/right. */ .sw-carousel.swiper { padding: 0 0.25rem; } .sw-widget .sw-carousel ~ .swiper-button-prev, .sw-widget .sw-carousel ~ .swiper-button-next { position: absolute; top: 40%; transform: translateY(-50%); z-index: 10; } /* This carousel's prev/next ARE correctly right/left here (matching Swiper's own rtl:true convention) — this one was never the bug. */ .sw-widget .sw-carousel ~ .swiper-button-prev { right: -1.1rem; } .sw-widget .sw-carousel ~ .swiper-button-next { left: -1.1rem; } .sw-widget .swiper-button-disabled { opacity: .35; pointer-events: none; } /* ============================================================ * Mega Menu widget * ============================================================ */ .sw-menu-root { direction: rtl; } .sw-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 4px; } .sw-menu-item { list-style: none; position: relative; } .sw-menu-link { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 16px; color: #1e293b; text-decoration: none; font-size: 0.9375rem; font-weight: 600; border-radius: 10px; transition: color 0.2s ease, background-color 0.2s ease; white-space: nowrap; } .sw-menu-arrow { transition: transform 0.2s ease; } .sw-menu-item:hover .sw-menu-arrow { transform: rotate(180deg); } .sw-dropdown, .sw-mega-panel { position: absolute; top: 100%; right: 0; margin-top: 8px; background: #ffffff; border-radius: 16px; box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 50; } .sw-menu-item:hover > .sw-dropdown, .sw-menu-item:hover > .sw-mega-panel { opacity: 1; visibility: visible; transform: translateY(0); } .sw-dropdown { min-width: 220px; padding: 8px; } .sw-dropdown-item { position: relative; list-style: none; } .sw-dropdown-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; color: #334155; text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease, background-color 0.2s ease; } .sw-dropdown-flyout { top: 0; right: 100%; left: auto; margin-top: 0; margin-right: 8px; } /* * باگ: هاور روی خود آیتم منوی سطح اول فقط اولین لایه‌ی dropdown رو * نشون می‌داد (.sw-menu-item:hover > .sw-dropdown بالاتر). لایه‌های * عمیق‌تر (زیرمنوهای داخل زیرمنو) که به‌صورت .sw-dropdown-flyout داخل * .sw-dropdown-item تودرتو می‌شن، هیچ قانون hover مخصوص به خودشون * نداشتن، پس همیشه opacity:0/visibility:hidden (ارث‌بری‌شده از * .sw-dropdown پایه) می‌موندن و هیچ‌وقت دیده نمی‌شدن. */ .sw-dropdown-item:hover > .sw-dropdown-flyout { opacity: 1; visibility: visible; transform: translateY(0); } .sw-mega-panel { left: 50%; right: auto; transform: translateX(-50%) translateY(6px); width: 800px; max-width: 90vw; padding: 24px; } .sw-menu-item:hover > .sw-mega-panel { transform: translateX(-50%) translateY(0); } .sw-mega-grid { display: grid; grid-template-columns: repeat(var(--sw-mega-cols, 4), minmax(0, 1fr)); gap: 24px; } .sw-mega-col-title { font-weight: 700; font-size: 0.8125rem; color: #0f172a; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .sw-mega-col-title--link { display: block; text-decoration: none; transition: color 0.2s ease; } .sw-mega-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sw-mega-sublink { display: block; font-size: 0.875rem; color: #334155; text-decoration: none; transition: color 0.2s ease; padding: 4px 0; } .sw-mega-sublink:hover, .sw-mega-col-title--link:hover { color: #2563eb; } .sw-menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: none; background: rgba(15, 23, 42, 0.05); color: #1e293b; cursor: pointer; flex-shrink: 0; } /* Mobile: full-screen off-canvas panel sliding in from the side */ @media (max-width: 1023px) { .sw-menu-toggle { display: flex; } .sw-menu-overlay { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 998; } .sw-menu-root.sw-menu-open .sw-menu-overlay { opacity: 1; visibility: visible; } .sw-menu-panel { position: fixed; top: 0; bottom: 0; right: 0; width: var(--sw-mobile-panel-width, 320px); max-width: 92vw; /*background: #ffffff;*/ background: transparent; transform: translateX(100%); transition: transform 0.3s ease; z-index: 999; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18); } .sw-menu-root.sw-menu-open .sw-menu-panel { transform: translateX(0); } .sw-menu-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); position: sticky; top: 0; background: inherit; z-index: 1; } .sw-menu-panel-title { font-weight: 700; font-size: 1rem; color: #0f172a; } .sw-menu-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: none; background: rgba(15, 23, 42, 0.06); color: #1e293b; cursor: pointer; flex-shrink: 0; } .sw-menu-root .sw-menu { display: flex; position: static; flex-direction: column; width: 100%; align-items: stretch; gap: 2px; padding: 8px; } .sw-menu-item { width: 100%; } .sw-menu-link { width: 100%; justify-content: space-between; height: auto; padding: 14px 12px; } .sw-dropdown, .sw-mega-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; width: 100% !important; max-width: none; max-height: 0; overflow: hidden; padding: 0; margin-top: 0; transition: max-height 0.25s ease; } .sw-menu-item.sw-submenu-open > .sw-dropdown, .sw-menu-item.sw-submenu-open > .sw-mega-panel { max-height: 2000px; padding: 8px 0 8px 12px; } .sw-dropdown-item.sw-submenu-open > .sw-dropdown-flyout { max-height: 2000px; padding: 8px 0 8px 12px; } .sw-mega-grid { grid-template-columns: 1fr !important; gap: 16px; } .sw-dropdown-flyout { position: static !important; margin: 0 !important; } .sw-menu-item:hover .sw-menu-arrow { transform: none; } .sw-menu-item.sw-submenu-open > .sw-menu-link .sw-menu-arrow, .sw-dropdown-item.sw-submenu-open > .sw-dropdown-link svg { transform: rotate(180deg); } } /* body scroll lock while the mobile panel is open (class set via JS) */ body.sw-menu-scroll-lock { overflow: hidden; } @media (min-width: 1024px) { .sw-menu-toggle { display: none; } .sw-menu-overlay { display: none; } .sw-menu-panel-header { display: none; } .sw-menu-panel { position: static; width: auto; max-width: none; transform: none; box-shadow: none; background: transparent; overflow: visible; } } /* * فونت باید همیشه از فونت سراسری قالب (body) ارث‌بری (inherit) بشه، مگر * اینکه کاربر مستقیم از تب Style > Typography روی یک بخش خاص فونت دیگه‌ای * انتخاب کرده باشه. مشکل: مرورگرها به‌صورت پیش‌فرض به عنصرهای فرم * (button/input/select/textarea) فونت رو ارث نمی‌دن؛ این عناصر توسط * User-Agent Stylesheet خود مرورگر یک فونت سیستمی جدا می‌گیرن، نه فونت * body صفحه. چون خیلی از ویجت‌های ما (فلش/نقطه اسلایدر، دکمه‌های فیلتر، * دکمه‌ی منوی موبایل و...) از تگ