/* ===== SITE PALETTE: only two brand colors ===== Dark theme = deep Blackstone (#14171a page, #212529 surfaces) | Light theme = Whiteout #E9ECEF Every neutral/grey in this file is a blend between these two. Accent colors (purple, status red/green/amber) are intentionally untouched. */ :root { --blackstone: #212529; --blackstone-deep: #14171a; --whiteout: #e9ecef; } /* ================================================================ CarMaa — STYLESHEET Reorganized: one definition per selector, grouped by purpose. Sections: 1. Reset & Base 2. Font Family Utilities 3. Spacing (padding / margin / gap) 4. Sizing (width / height) 5. Layout (display, flex, grid, position, z-index) 6. Typography 7. Colors (background / text / border / gradient stops) 8. Borders, Radius & Shadows 9. Effects, Transitions & Transforms 10. Shared Keyframe Animations 11. Component: Skeleton Loader 12. Component: Route-Transition Loading Overlay 13. Component: Burger Menu / Drawer 14. Component: Modal (generic) 15. Component: Login Modal 16. Component: Toast & Section-Enter Motion 17. Theme: Light Mode Overrides 18. Motion Preferences & Responsive ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&display=swap'); /* --------------------------------------------------------------- 1. RESET & BASE --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* HINT: تنظیمات پایه کل سایت → ساختار اصلی صفحه | selector: html, body, #app */ /* FIX: html/body had no background-color of their own — #appFrame supplies the dark fill via min-height:100vh. On mobile, opening an overlay (menu, search, filters...) sets overflow:hidden on html/body, which often makes the browser address bar collapse; the real viewport then grows past the 100vh #appFrame was sized against, exposing bare html/body underneath. With no background set there, that gap rendered white. Giving html/body the same base colour as #appFrame (dark by default, light in .theme-light) means that gap is never visible regardless of viewport-height jumps. */ html { height: 100%; overflow-x: hidden; background: #14171a; } body, #app { height: 100%; } body { background: #08090b; } /* Fullscreen PWA (status bar hidden): keep content clear of the notch / camera cutout and the home-indicator bar using safe-area insets. Only applies when running installed/fullscreen (display-mode), not in a normal browser tab, since regular tabs already reserve that space. */ @media all and (display-mode: fullscreen), all and (display-mode: standalone) { #stickyHeaderGroup { padding-top: env(safe-area-inset-top, 0px); } #appFrame { padding-bottom: env(safe-area-inset-bottom, 0px); } } html.theme-light, html.theme-light body { background: #e9ecef; } /* Site-wide background: one flat dark gray, applied via #appViewport so it shows behind every page (not just the listings page). #appViewport already carries .bg-neutral-950 as its base fill class — this ID rule (higher specificity than that single class) keeps it a flat, uniform color shared with #siteHeader and .bottom-dock-inner, while the vehicle-detail-page override further down (which uses !important) still wins on that specific page as before. */ #appViewport { background: #08090b; } html.theme-light #appViewport { background: #e9ecef; } /* HINT: تنظیمات پایه کل سایت → صفحه و تنظیمات پایه | selector: body */ body { margin: 0; -webkit-font-smoothing: antialiased; font-family: 'Vazirmatn', Tahoma, 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; } /* HINT: تنظیمات پایه کل سایت → استایل اختصاصی این Selector: h1, h2, h3, h4, h5, h6, p | selector: h1, h2, h3, h4, h5, h6, p */ h1, h2, h3, h4, h5, h6, p { margin: 0; } /* HINT: تنظیمات پایه کل سایت → استایل اختصاصی این Selector: button | selector: button */ button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } /* HINT: تنظیمات پایه کل سایت → استایل اختصاصی این Selector: a | selector: a */ a { color: inherit; text-decoration: none; } /* --------------------------------------------------------------- 2. FONT FAMILY UTILITIES --------------------------------------------------------------- */ /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .font-sans */ .font-sans { font-family: 'Vazirmatn', Tahoma, 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .font-serif */ .font-serif { font-family: 'Vazirmatn', 'Playfair Display', Georgia, Cambria, 'Times New Roman', Times, Tahoma, serif; font-weight: 400; } /* Header brand mark — mimics the duPont Registry wordmark: a light, condensed top line over a bold, letter-spaced line underneath. */ /* HINT: فونت و تایپوگرافی عمومی → لوگوی هدر / نام برند | selector: .brand-mark */ .brand-mark { font-family: 'Vazirmatn', 'Playfair Display', Georgia, 'Times New Roman', Times, serif; color: #e0e3e6; } /* HINT: فونت و تایپوگرافی عمومی → نشان جایگزین برای برندهای بدون لوگو | selector: .brand-mono-ring .brand-mono */ .brand-mono-ring { width: 52px; height: 52px; border-radius: 9999px; border: 1px solid rgba(224,227,230,0.35); display: flex; align-items: center; justify-content: center; } .brand-mono { font-family: 'Vazirmatn', 'Playfair Display', Georgia, 'Times New Roman', Times, serif; font-style: italic; font-weight: 600; font-size: 15px; letter-spacing: 0.03em; color: #e0e3e6; } /* HINT: فونت و تایپوگرافی عمومی → خط بالایی لوگوی هدر | selector: .brand-mark .brand-mark-top */ .brand-mark .brand-mark-top { font-weight: 400; font-style: italic; letter-spacing: 0.01em; } /* HINT: فونت و تایپوگرافی عمومی → خط پایینی لوگوی هدر | selector: .brand-mark .brand-mark-bottom */ .brand-mark .brand-mark-bottom { font-weight: 700; letter-spacing: 0.08em; } /* HINT: فونت و تایپوگرافی عمومی → برند/لوگو | selector: .theme-light .brand-mark */ .theme-light .brand-mark { color: #34383c; } /* --------------------------------------------------------------- 3. SPACING — padding, margin, gap (scale 0 → 40) --------------------------------------------------------------- */ /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-0 */ .p-0 { padding: 0px; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-0 */ .px-0 { padding-left: 0px; padding-right: 0px; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-0 */ .py-0 { padding-top: 0px; padding-bottom: 0px; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-0 */ .pt-0 { padding-top: 0px; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-0 */ .pb-0 { padding-bottom: 0px; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-0 */ .pl-0 { padding-left: 0px; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-0 */ .pr-0 { padding-right: 0px; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-0 */ .mt-0 { margin-top: 0px; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-0 */ .mb-0 { margin-bottom: 0px; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-0 */ .mx-0 { margin-left: 0px; margin-right: 0px; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-0 */ .gap-0 { gap: 0px; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-0 | selector: .-mt-0 */ .-mt-0 { margin-top: -0px; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-0\.5 */ .p-0\.5 { padding: 0.125rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-0\.5 */ .px-0\.5 { padding-left: 0.125rem; padding-right: 0.125rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-0\.5 */ .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-0\.5 */ .pt-0\.5 { padding-top: 0.125rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-0\.5 */ .pb-0\.5 { padding-bottom: 0.125rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-0\.5 */ .pl-0\.5 { padding-left: 0.125rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-0\.5 */ .pr-0\.5 { padding-right: 0.125rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-0\.5 */ .mt-0\.5 { margin-top: 0.125rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-0\.5 */ .mb-0\.5 { margin-bottom: 0.125rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-0\.5 */ .mx-0\.5 { margin-left: 0.125rem; margin-right: 0.125rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-0\.5 */ .gap-0\.5 { gap: 0.125rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-0\.5 | selector: .-mt-0\.5 */ .-mt-0\.5 { margin-top: -0.125rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-1 */ .p-1 { padding: 0.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-1 */ .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-1 */ .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-1 */ .pt-1 { padding-top: 0.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-1 */ .pb-1 { padding-bottom: 0.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-1 */ .pl-1 { padding-left: 0.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-1 */ .pr-1 { padding-right: 0.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-1 */ .mt-1 { margin-top: 0.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-1 */ .mb-1 { margin-bottom: 0.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-1 */ .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-1 */ .gap-1 { gap: 0.25rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-1 | selector: .-mt-1 */ .-mt-1 { margin-top: -0.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-1\.5 */ .p-1\.5 { padding: 0.375rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-1\.5 */ .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-1\.5 */ .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-1\.5 */ .pt-1\.5 { padding-top: 0.375rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-1\.5 */ .pb-1\.5 { padding-bottom: 0.375rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-1\.5 */ .pl-1\.5 { padding-left: 0.375rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-1\.5 */ .pr-1\.5 { padding-right: 0.375rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-1\.5 */ .mt-1\.5 { margin-top: 0.375rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-1\.5 */ .mb-1\.5 { margin-bottom: 0.375rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-1\.5 */ .mx-1\.5 { margin-left: 0.375rem; margin-right: 0.375rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-1\.5 */ .gap-1\.5 { gap: 0.375rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-1\.5 | selector: .-mt-1\.5 */ .-mt-1\.5 { margin-top: -0.375rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-2 */ .p-2 { padding: 0.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-2 */ .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-2 */ .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-2 */ .pt-2 { padding-top: 0.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-2 */ .pb-2 { padding-bottom: 0.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-2 */ .pl-2 { padding-left: 0.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-2 */ .pr-2 { padding-right: 0.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-2 */ .mt-2 { margin-top: 0.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-2 */ .mb-2 { margin-bottom: 0.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-2 */ .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-2 */ .gap-2 { gap: 0.5rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-2 | selector: .-mt-2 */ .-mt-2 { margin-top: -0.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-2\.5 */ .p-2\.5 { padding: 0.625rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-2\.5 */ .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-2\.5 */ .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-2\.5 */ .pt-2\.5 { padding-top: 0.625rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-2\.5 */ .pb-2\.5 { padding-bottom: 0.625rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-2\.5 */ .pl-2\.5 { padding-left: 0.625rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-2\.5 */ .pr-2\.5 { padding-right: 0.625rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-2\.5 */ .mt-2\.5 { margin-top: 0.625rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-2\.5 */ .mb-2\.5 { margin-bottom: 0.625rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-2\.5 */ .mx-2\.5 { margin-left: 0.625rem; margin-right: 0.625rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-2\.5 */ .gap-2\.5 { gap: 0.625rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-2\.5 | selector: .-mt-2\.5 */ .-mt-2\.5 { margin-top: -0.625rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-3 */ .p-3 { padding: 0.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-3 */ .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-3 */ .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-3 */ .pt-3 { padding-top: 0.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-3 */ .pb-3 { padding-bottom: 0.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-3 */ .pl-3 { padding-left: 0.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-3 */ .pr-3 { padding-right: 0.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-3 */ .mt-3 { margin-top: 0.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-3 */ .mb-3 { margin-bottom: 0.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-3 */ .mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-3 */ .gap-3 { gap: 0.75rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-3 | selector: .-mt-3 */ .-mt-3 { margin-top: -0.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-3\.5 */ .p-3\.5 { padding: 0.875rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-3\.5 */ .px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-3\.5 */ .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-3\.5 */ .pt-3\.5 { padding-top: 0.875rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-3\.5 */ .pb-3\.5 { padding-bottom: 0.875rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-3\.5 */ .pl-3\.5 { padding-left: 0.875rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-3\.5 */ .pr-3\.5 { padding-right: 0.875rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-3\.5 */ .mt-3\.5 { margin-top: 0.875rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-3\.5 */ .mb-3\.5 { margin-bottom: 0.875rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-3\.5 */ .mx-3\.5 { margin-left: 0.875rem; margin-right: 0.875rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-3\.5 */ .gap-3\.5 { gap: 0.875rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-3\.5 | selector: .-mt-3\.5 */ .-mt-3\.5 { margin-top: -0.875rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-4 */ .p-4 { padding: 1rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-4 */ .px-4 { padding-left: 1rem; padding-right: 1rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-4 */ .py-4 { padding-top: 1rem; padding-bottom: 1rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-4 */ .pt-4 { padding-top: 1rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-4 */ .pb-4 { padding-bottom: 1rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-4 */ .pl-4 { padding-left: 1rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-4 */ .pr-4 { padding-right: 1rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-4 */ .mt-4 { margin-top: 1rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-4 */ .mb-4 { margin-bottom: 1rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-4 */ .mx-4 { margin-left: 1rem; margin-right: 1rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-4 */ .gap-4 { gap: 1rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-4 | selector: .-mt-4 */ .-mt-4 { margin-top: -1rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-5 */ .p-5 { padding: 1.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-5 */ .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-5 */ .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-5 */ .pt-5 { padding-top: 1.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-5 */ .pb-5 { padding-bottom: 1.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-5 */ .pl-5 { padding-left: 1.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-5 */ .pr-5 { padding-right: 1.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-5 */ .mt-5 { margin-top: 1.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-5 */ .mb-5 { margin-bottom: 1.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-5 */ .mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-5 */ .gap-5 { gap: 1.25rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-5 | selector: .-mt-5 */ .-mt-5 { margin-top: -1.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-6 */ .p-6 { padding: 1.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-6 */ .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-6 */ .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-6 */ .pt-6 { padding-top: 1.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-6 */ .pb-6 { padding-bottom: 1.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-6 */ .pl-6 { padding-left: 1.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-6 */ .pr-6 { padding-right: 1.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-6 */ .mt-6 { margin-top: 1.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-6 */ .mb-6 { margin-bottom: 1.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-6 */ .mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-6 */ .gap-6 { gap: 1.5rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-6 | selector: .-mt-6 */ .-mt-6 { margin-top: -1.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-7 */ .p-7 { padding: 1.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-7 */ .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-7 */ .py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-7 */ .pt-7 { padding-top: 1.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-7 */ .pb-7 { padding-bottom: 1.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-7 */ .pl-7 { padding-left: 1.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-7 */ .pr-7 { padding-right: 1.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-7 */ .mt-7 { margin-top: 1.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-7 */ .mb-7 { margin-bottom: 1.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-7 */ .mx-7 { margin-left: 1.75rem; margin-right: 1.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-7 */ .gap-7 { gap: 1.75rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-7 | selector: .-mt-7 */ .-mt-7 { margin-top: -1.75rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-8 */ .p-8 { padding: 2rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-8 */ .px-8 { padding-left: 2rem; padding-right: 2rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-8 */ .py-8 { padding-top: 2rem; padding-bottom: 2rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-8 */ .pt-8 { padding-top: 2rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-8 */ .pb-8 { padding-bottom: 2rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-8 */ .pl-8 { padding-left: 2rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-8 */ .pr-8 { padding-right: 2rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-8 */ .mt-8 { margin-top: 2rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-8 */ .mb-8 { margin-bottom: 2rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-8 */ .mx-8 { margin-left: 2rem; margin-right: 2rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-8 */ .gap-8 { gap: 2rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-8 | selector: .-mt-8 */ .-mt-8 { margin-top: -2rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-9 */ .p-9 { padding: 2.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-9 */ .px-9 { padding-left: 2.25rem; padding-right: 2.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-9 */ .py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-9 */ .pt-9 { padding-top: 2.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-9 */ .pb-9 { padding-bottom: 2.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-9 */ .pl-9 { padding-left: 2.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-9 */ .pr-9 { padding-right: 2.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-9 */ .mt-9 { margin-top: 2.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-9 */ .mb-9 { margin-bottom: 2.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-9 */ .mx-9 { margin-left: 2.25rem; margin-right: 2.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-9 */ .gap-9 { gap: 2.25rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-9 | selector: .-mt-9 */ .-mt-9 { margin-top: -2.25rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-10 */ .p-10 { padding: 2.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-10 */ .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-10 */ .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-10 */ .pt-10 { padding-top: 2.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-10 */ .pb-10 { padding-bottom: 2.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-10 */ .pl-10 { padding-left: 2.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-10 */ .pr-10 { padding-right: 2.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-10 */ .mt-10 { margin-top: 2.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-10 */ .mb-10 { margin-bottom: 2.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-10 */ .mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-10 */ .gap-10 { gap: 2.5rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-10 | selector: .-mt-10 */ .-mt-10 { margin-top: -2.5rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-12 */ .p-12 { padding: 3rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-12 */ .px-12 { padding-left: 3rem; padding-right: 3rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-12 */ .py-12 { padding-top: 3rem; padding-bottom: 3rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-12 */ .pt-12 { padding-top: 3rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-12 */ .pb-12 { padding-bottom: 3rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-12 */ .pl-12 { padding-left: 3rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-12 */ .pr-12 { padding-right: 3rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-12 */ .mt-12 { margin-top: 3rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-12 */ .mb-12 { margin-bottom: 3rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-12 */ .mx-12 { margin-left: 3rem; margin-right: 3rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-12 */ .gap-12 { gap: 3rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-12 | selector: .-mt-12 */ .-mt-12 { margin-top: -3rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-16 */ .p-16 { padding: 4rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-16 */ .px-16 { padding-left: 4rem; padding-right: 4rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-16 */ .py-16 { padding-top: 4rem; padding-bottom: 4rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-16 */ .pt-16 { padding-top: 4rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-16 */ .pb-16 { padding-bottom: 4rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-16 */ .pl-16 { padding-left: 4rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-16 */ .pr-16 { padding-right: 4rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-16 */ .mt-16 { margin-top: 4rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-16 */ .mb-16 { margin-bottom: 4rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-16 */ .mx-16 { margin-left: 4rem; margin-right: 4rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-16 */ .gap-16 { gap: 4rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-16 | selector: .-mt-16 */ .-mt-16 { margin-top: -4rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .p-40 */ .p-40 { padding: 10rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .px-40 */ .px-40 { padding-left: 10rem; padding-right: 10rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .py-40 */ .py-40 { padding-top: 10rem; padding-bottom: 10rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pt-40 */ .pt-40 { padding-top: 10rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pb-40 */ .pb-40 { padding-bottom: 10rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pl-40 */ .pl-40 { padding-left: 10rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .pr-40 */ .pr-40 { padding-right: 10rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mt-40 */ .mt-40 { margin-top: 10rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mb-40 */ .mb-40 { margin-bottom: 10rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mx-40 */ .mx-40 { margin-left: 10rem; margin-right: 10rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .gap-40 */ .gap-40 { gap: 10rem; } /* HINT: ابزارهای فاصله‌گذاری عمومی؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-mt-40 | selector: .-mt-40 */ .-mt-40 { margin-top: -10rem; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .ml-auto */ .ml-auto { margin-left: auto; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mr-auto */ .mr-auto { margin-right: auto; } /* HINT: Utility فاصله‌گذاری (قابل استفاده در چند بخش) | selector: .mr-5 */ .mr-5 { margin-right: 1.25rem; } /* --------------------------------------------------------------- 4. SIZING — width & height --------------------------------------------------------------- */ /* HINT: ابزارهای اندازه؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .flip-x | selector: .flip-x */ .flip-x { display: inline-block; transform: scaleX(-1); } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-0 */ .w-0 { width: 0px; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-0 */ .h-0 { height: 0px; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-0\.5 */ .w-0\.5 { width: 0.125rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-0\.5 */ .h-0\.5 { height: 0.125rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-1 */ .w-1 { width: 0.25rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-1 */ .h-1 { height: 0.25rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-1\.5 */ .w-1\.5 { width: 0.375rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-1\.5 */ .h-1\.5 { height: 0.375rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-2 */ .w-2 { width: 0.5rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-2 */ .h-2 { height: 0.5rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-2\.5 */ .w-2\.5 { width: 0.625rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-2\.5 */ .h-2\.5 { height: 0.625rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-3 */ .w-3 { width: 0.75rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-3 */ .h-3 { height: 0.75rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-3\.5 */ .w-3\.5 { width: 0.875rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-3\.5 */ .h-3\.5 { height: 0.875rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-4 */ .w-4 { width: 1rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-4 */ .h-4 { height: 1rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-5 */ .w-5 { width: 1.25rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-5 */ .h-5 { height: 1.25rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-6 */ .w-6 { width: 1.5rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-6 */ .h-6 { height: 1.5rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-7 */ .w-7 { width: 1.75rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-7 */ .h-7 { height: 1.75rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-8 */ .w-8 { width: 2rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-8 */ .h-8 { height: 2rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-9 */ .w-9 { width: 2.25rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-9 */ .h-9 { height: 2.25rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-10 */ .w-10 { width: 2.5rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-10 */ .h-10 { height: 2.5rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-12 */ .w-12 { width: 3rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-12 */ .h-12 { height: 3rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-16 */ .w-16 { width: 4rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-16 */ .h-16 { height: 4rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-20 */ .w-20 { width: 5rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-20 */ .h-20 { height: 5rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-24 */ .h-24 { height: 6rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .min-w-0 */ .min-w-0 { min-width: 0px; } /* HINT: ابزارهای اندازه؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .truncate | selector: .truncate */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-40 */ .w-40 { width: 10rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-40 */ .h-40 { height: 10rem; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-full */ .w-full { width: 100%; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .max-w-full */ .max-w-full { max-width: 100%; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .max-h-full */ .max-h-full { max-height: 100%; } /* HINT: ابزارهای اندازه؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .object-contain | selector: .object-contain */ .object-contain { object-fit: contain; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .h-full */ .h-full { height: 100%; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-\[86\%\] */ .w-\[86\%\] { width: 86%; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-\[52px\] */ .w-\[52px\] { width: 52px; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .w-\[84px\] */ .w-\[84px\] { width: 84px; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .max-w-\[380px\] */ .max-w-\[380px\] { max-width: 380px; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .max-w-\[520px\] */ .max-w-\[520px\] { max-width: 520px; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .min-h-\[34px\] */ .min-h-\[34px\] { min-height: 34px; } /* HINT: Utility اندازه (قابل استفاده در چند بخش) | selector: .min-h-screen */ .min-h-screen { min-height: 100vh; } /* --------------------------------------------------------------- 5. LAYOUT — display, flex, grid, position, z-index --------------------------------------------------------------- */ /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .flex */ .flex { display: flex; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .grid */ .grid { display: grid; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .block */ .block { display: block; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .hidden */ .hidden { display: none; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .flex-col */ .flex-col { flex-direction: column; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .flex-1 */ .flex-1 { flex: 1 1 0%; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .flex-wrap */ .flex-wrap { flex-wrap: wrap; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .shrink-0 */ .shrink-0 { flex-shrink: 0; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .items-center */ .items-center { align-items: center; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .items-baseline */ .items-baseline { align-items: baseline; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .items-end */ .items-end { align-items: flex-end; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .justify-center */ .justify-center { justify-content: center; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .justify-between */ .justify-between { justify-content: space-between; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .justify-self-start */ .justify-self-start { justify-self: start; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .justify-self-center */ .justify-self-center { justify-self: center; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .justify-self-end */ .justify-self-end { justify-self: end; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .grid-cols-2 */ .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .grid-cols-3 */ .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .grid-cols-4 */ .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .grid-cols-6 */ .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* HINT: ابزارهای چیدمان؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-space-x-2 > * + * | selector: .-space-x-2 > * + * */ .-space-x-2 > * + * { margin-left: -0.5rem; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .relative */ .relative { position: relative; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .absolute */ .absolute { position: absolute; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .fixed */ .fixed { position: fixed; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .inset-0 */ .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .inset-x-0 */ .inset-x-0 { left: 0; right: 0; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .inset-y-0 */ .inset-y-0 { top: 0; bottom: 0; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .top-2 */ .top-2 { top: 0.5rem; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .top-3 */ .top-3 { top: 0.75rem; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .right-2 */ .right-2 { right: 0.5rem; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .right-3 */ .right-3 { right: 0.75rem; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .right-4 */ .right-4 { right: 1rem; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .left-0 */ .left-0 { left: 0; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .left-2 */ .left-2 { left: 0.5rem; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .left-3 */ .left-3 { left: 0.75rem; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .left-4 */ .left-4 { left: 1rem; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .bottom-0 */ .bottom-0 { bottom: 0; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .bottom-3 */ .bottom-3 { bottom: 0.75rem; } /* HINT: ابزارهای چیدمان؛ در چند کامپوننت استفاده می‌شوند → استایل اختصاصی این Selector: .-bottom-1 | selector: .-bottom-1 */ .-bottom-1 { bottom: -0.25rem; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .z-10 */ .z-10 { z-index: 10; } /* HINT: Utility چیدمان (قابل استفاده در چند بخش) | selector: .z-50 */ .z-50 { z-index: 50; } /* --------------------------------------------------------------- 6. TYPOGRAPHY --------------------------------------------------------------- */ /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-sm */ .text-sm { font-size: 0.875rem; line-height: 1.25rem; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-lg */ .text-lg { font-size: 1.125rem; line-height: 1.75rem; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-xl */ .text-xl { font-size: 1.25rem; line-height: 1.75rem; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-2xl */ .text-2xl { font-size: 1.5rem; line-height: 2rem; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-3xl */ .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[9px\] */ .text-\[9px\] { font-size: 9px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[9\.5px\] */ .text-\[9\.5px\] { font-size: 9.5px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[10\.5px\] */ .text-\[10\.5px\] { font-size: 10.5px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[11px\] */ .text-\[11px\] { font-size: 11px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[11\.5px\] */ .text-\[11\.5px\] { font-size: 11.5px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[12px\] */ .text-\[12px\] { font-size: 12px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[12\.5px\] */ .text-\[12\.5px\] { font-size: 12.5px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[13px\] */ .text-\[13px\] { font-size: 13px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[13\.5px\] */ .text-\[13\.5px\] { font-size: 13.5px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[14px\] */ .text-\[14px\] { font-size: 14px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[10px\] */ .text-\[10px\] { font-size: 10px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[14\.5px\] */ .text-\[14\.5px\] { font-size: 14.5px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[15px\] */ .text-\[15px\] { font-size: 15px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[19px\] */ .text-\[19px\] { font-size: 19px; } /* FIX: .text-[18px] was used on the Brand/Listings/Saved page titles (data-slot="title" h1) but was never actually defined here, so those headings fell back to the browser's default h1 style — large, bold, wrapping to two lines — right after the page finished loading. That's what looked like the header "breaking" and staying stuck at the top. */ .text-\[18px\] { font-size: 18px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[26px\] */ .text-\[26px\] { font-size: 26px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[22px\] */ .text-\[22px\] { font-size: 22px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-\[24px\] */ .text-\[24px\] { font-size: 24px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .font-medium */ .font-medium { font-weight: 500; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .font-semibold */ .font-semibold { font-weight: 600; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .font-bold */ .font-bold { font-weight: 700; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .tracking-tight */ .tracking-tight { letter-spacing: -0.025em; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .tracking-wide */ .tracking-wide { letter-spacing: 0.025em; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .leading-none */ .leading-none { line-height: 1; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .leading-relaxed */ .leading-relaxed { line-height: 1.625; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .leading-snug */ .leading-snug { line-height: 1.375; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .leading-tight */ .leading-tight { line-height: 1.25; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-center */ .text-center { text-align: center; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-left */ .text-left { text-align: start; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .uppercase */ .uppercase { text-transform: uppercase; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .underline */ .underline { text-decoration: underline; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .underline-offset-2 */ .underline-offset-2 { text-underline-offset: 2px; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .whitespace-nowrap */ .whitespace-nowrap { white-space: nowrap; } /* --------------------------------------------------------------- 7. COLORS — background / text / border / gradient stops (grouped per palette: neutral, violet, emerald, red, white, black) --------------------------------------------------------------- */ /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-50 */ .bg-neutral-50 { background-color: #e5e8eb; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-neutral-50 */ .text-neutral-50 { color: #e5e8eb; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-neutral-50 */ .border-neutral-50 { border-color: #e5e8eb; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-neutral-50 */ .from-neutral-50 { --gradient-from: #e5e8eb; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-neutral-50 */ .via-neutral-50 { --gradient-via: #e5e8eb; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-neutral-50 */ .to-neutral-50 { --gradient-to: #e5e8eb; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-50/70 */ .bg-neutral-50\/70 { background-color: rgba(229,232,235,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-50/90 */ .bg-neutral-50\/90 { background-color: rgba(229,232,235,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-neutral-50/30 */ .shadow-neutral-50\/30 { --tw-shadow-color: rgba(229,232,235,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-100 */ .bg-neutral-100 { background-color: #e0e3e6; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-neutral-100 */ .text-neutral-100 { color: #e0e3e6; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-neutral-100 */ .border-neutral-100 { border-color: #e0e3e6; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-neutral-100 */ .from-neutral-100 { --gradient-from: #e0e3e6; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-neutral-100 */ .via-neutral-100 { --gradient-via: #e0e3e6; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-neutral-100 */ .to-neutral-100 { --gradient-to: #e0e3e6; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-100/70 */ .bg-neutral-100\/70 { background-color: rgba(224,227,230,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-100/90 */ .bg-neutral-100\/90 { background-color: rgba(224,227,230,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-neutral-100/30 */ .shadow-neutral-100\/30 { --tw-shadow-color: rgba(224,227,230,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-200 */ .bg-neutral-200 { background-color: #d3d6d9; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-neutral-200 */ .text-neutral-200 { color: #d3d6d9; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-neutral-200 */ .border-neutral-200 { border-color: #d3d6d9; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-neutral-200 */ .from-neutral-200 { --gradient-from: #d3d6d9; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-neutral-200 */ .via-neutral-200 { --gradient-via: #d3d6d9; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-neutral-200 */ .to-neutral-200 { --gradient-to: #d3d6d9; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-200/70 */ .bg-neutral-200\/70 { background-color: rgba(211,214,217,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-200/90 */ .bg-neutral-200\/90 { background-color: rgba(211,214,217,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-neutral-200/30 */ .shadow-neutral-200\/30 { --tw-shadow-color: rgba(211,214,217,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-300 */ .bg-neutral-300 { background-color: #c4c7ca; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-neutral-300 */ .text-neutral-300 { color: #c4c7ca; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-neutral-300 */ .border-neutral-300 { border-color: #c4c7ca; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-neutral-300 */ .from-neutral-300 { --gradient-from: #c4c7ca; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-neutral-300 */ .via-neutral-300 { --gradient-via: #c4c7ca; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-neutral-300 */ .to-neutral-300 { --gradient-to: #c4c7ca; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-300/70 */ .bg-neutral-300\/70 { background-color: rgba(196,199,202,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-300/90 */ .bg-neutral-300\/90 { background-color: rgba(196,199,202,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-neutral-300/30 */ .shadow-neutral-300\/30 { --tw-shadow-color: rgba(196,199,202,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-400 */ .bg-neutral-400 { background-color: #9a9da0; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-neutral-400 */ .text-neutral-400 { color: #9a9da0; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-neutral-400 */ .border-neutral-400 { border-color: #9a9da0; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-neutral-400 */ .from-neutral-400 { --gradient-from: #9a9da0; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-neutral-400 */ .via-neutral-400 { --gradient-via: #9a9da0; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-neutral-400 */ .to-neutral-400 { --gradient-to: #9a9da0; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-400/70 */ .bg-neutral-400\/70 { background-color: rgba(154,157,160,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-400/90 */ .bg-neutral-400\/90 { background-color: rgba(154,157,160,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-neutral-400/30 */ .shadow-neutral-400\/30 { --tw-shadow-color: rgba(154,157,160,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-500 */ .bg-neutral-500 { background-color: #707478; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-neutral-500 */ .text-neutral-500 { color: #707478; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-neutral-500 */ .border-neutral-500 { border-color: #707478; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-neutral-500 */ .from-neutral-500 { --gradient-from: #707478; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-neutral-500 */ .via-neutral-500 { --gradient-via: #707478; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-neutral-500 */ .to-neutral-500 { --gradient-to: #707478; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-500/70 */ .bg-neutral-500\/70 { background-color: rgba(112,116,120,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-500/90 */ .bg-neutral-500\/90 { background-color: rgba(112,116,120,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-neutral-500/30 */ .shadow-neutral-500\/30 { --tw-shadow-color: rgba(112,116,120,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-600 */ .bg-neutral-600 { background-color: #54585b; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-neutral-600 */ .text-neutral-600 { color: #54585b; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-neutral-600 */ .border-neutral-600 { border-color: #54585b; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-neutral-600 */ .from-neutral-600 { --gradient-from: #54585b; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-neutral-600 */ .via-neutral-600 { --gradient-via: #54585b; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-neutral-600 */ .to-neutral-600 { --gradient-to: #54585b; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-600/70 */ .bg-neutral-600\/70 { background-color: rgba(84,88,91,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-600/90 */ .bg-neutral-600\/90 { background-color: rgba(84,88,91,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-neutral-600/30 */ .shadow-neutral-600\/30 { --tw-shadow-color: rgba(84,88,91,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-700 */ .bg-neutral-700 { background-color: #44484c; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-neutral-700 */ .text-neutral-700 { color: #44484c; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-neutral-700 */ .border-neutral-700 { border-color: #44484c; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-neutral-700 */ .from-neutral-700 { --gradient-from: #44484c; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-neutral-700 */ .via-neutral-700 { --gradient-via: #44484c; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-neutral-700 */ .to-neutral-700 { --gradient-to: #44484c; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-700/70 */ .bg-neutral-700\/70 { background-color: rgba(68,72,76,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-700/90 */ .bg-neutral-700\/90 { background-color: rgba(68,72,76,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-neutral-700/30 */ .shadow-neutral-700\/30 { --tw-shadow-color: rgba(68,72,76,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-800 */ .bg-neutral-800 { background-color: #2e3236; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-neutral-800 */ .text-neutral-800 { color: #2e3236; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-neutral-800 */ .border-neutral-800 { border-color: #2e3236; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-neutral-800 */ .from-neutral-800 { --gradient-from: #2e3236; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-neutral-800 */ .via-neutral-800 { --gradient-via: #2e3236; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-neutral-800 */ .to-neutral-800 { --gradient-to: #2e3236; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-800/70 */ .bg-neutral-800\/70 { background-color: rgba(46,50,54,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-800/90 */ .bg-neutral-800\/90 { background-color: rgba(46,50,54,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-neutral-800/30 */ .shadow-neutral-800\/30 { --tw-shadow-color: rgba(46,50,54,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-900 */ .bg-neutral-900 { background-color: #212529; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-neutral-900 */ .text-neutral-900 { color: #212529; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-neutral-900 */ .border-neutral-900 { border-color: #212529; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-neutral-900 */ .from-neutral-900 { --gradient-from: #212529; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-neutral-900 */ .via-neutral-900 { --gradient-via: #212529; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-neutral-900 */ .to-neutral-900 { --gradient-to: #212529; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-900/70 */ .bg-neutral-900\/70 { background-color: rgba(33,37,41,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-900/90 */ .bg-neutral-900\/90 { background-color: rgba(33,37,41,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-neutral-900/30 */ .shadow-neutral-900\/30 { --tw-shadow-color: rgba(33,37,41,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-950 */ .bg-neutral-950 { background-color: #14171a; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-neutral-950 */ .text-neutral-950 { color: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-neutral-950 */ .border-neutral-950 { border-color: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-neutral-950 */ .from-neutral-950 { --gradient-from: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-neutral-950 */ .via-neutral-950 { --gradient-via: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-neutral-950 */ .to-neutral-950 { --gradient-to: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-950/70 */ .bg-neutral-950\/70 { background-color: rgba(0, 0, 0, 0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-950/80 */ .bg-neutral-950\/80 { background-color: rgba(0, 0, 0, 0.8); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-neutral-950/90 */ .bg-neutral-950\/90 { background-color: rgba(0, 0, 0, 0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-neutral-950/30 */ .shadow-neutral-950\/30 { --tw-shadow-color: rgba(0, 0, 0, 0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-200 */ .bg-violet-200 { background-color: #d3d6d9; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-violet-200 */ .text-violet-200 { color: #d3d6d9; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-violet-200 */ .border-violet-200 { border-color: #d3d6d9; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-violet-200 */ .from-violet-200 { --gradient-from: #d3d6d9; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-violet-200 */ .via-violet-200 { --gradient-via: #d3d6d9; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-violet-200 */ .to-violet-200 { --gradient-to: #d3d6d9; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-200/70 */ .bg-violet-200\/70 { background-color: rgba(221, 214, 254, 0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-200/90 */ .bg-violet-200\/90 { background-color: rgba(221, 214, 254, 0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-violet-200/30 */ .shadow-violet-200\/30 { --tw-shadow-color: rgba(221, 214, 254, 0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-300 */ .bg-violet-300 { background-color: #e0e3e6; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-violet-300 */ .text-violet-300 { color: #e0e3e6; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-violet-300 */ .border-violet-300 { border-color: #e0e3e6; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-violet-300 */ .from-violet-300 { --gradient-from: #e0e3e6; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-violet-300 */ .via-violet-300 { --gradient-via: #e0e3e6; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-violet-300 */ .to-violet-300 { --gradient-to: #e0e3e6; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-300/70 */ .bg-violet-300\/70 { background-color: rgba(224,227,230,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-300/90 */ .bg-violet-300\/90 { background-color: rgba(224,227,230,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-violet-300/30 */ .shadow-violet-300\/30 { --tw-shadow-color: rgba(224,227,230,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-400 */ .bg-violet-400 { background-color: #c4c7ca; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-violet-400 */ .text-violet-400 { color: #c4c7ca; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-violet-400 */ .border-violet-400 { border-color: #c4c7ca; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-violet-400 */ .from-violet-400 { --gradient-from: #c4c7ca; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-violet-400 */ .via-violet-400 { --gradient-via: #c4c7ca; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-violet-400 */ .to-violet-400 { --gradient-to: #c4c7ca; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-400/70 */ .bg-violet-400\/70 { background-color: rgba(196,199,202,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-400/90 */ .bg-violet-400\/90 { background-color: rgba(196,199,202,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-violet-400/30 */ .shadow-violet-400\/30 { --tw-shadow-color: rgba(196,199,202,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-600 */ .bg-violet-600 { background-color: #44484c; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-violet-600 */ .text-violet-600 { color: #44484c; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-violet-600 */ .border-violet-600 { border-color: #44484c; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-violet-600 */ .from-violet-600 { --gradient-from: #44484c; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-violet-600 */ .via-violet-600 { --gradient-via: #44484c; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-violet-600 */ .to-violet-600 { --gradient-to: #44484c; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-600/70 */ .bg-violet-600\/70 { background-color: rgba(68,72,76,0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-600/90 */ .bg-violet-600\/90 { background-color: rgba(68,72,76,0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-violet-600/30 */ .shadow-violet-600\/30 { --tw-shadow-color: rgba(68,72,76,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-900 */ .bg-violet-900 { background-color: #212529; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-violet-900 */ .text-violet-900 { color: #212529; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-violet-900 */ .border-violet-900 { border-color: #212529; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-violet-900 */ .from-violet-900 { --gradient-from: #212529; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-violet-900 */ .via-violet-900 { --gradient-via: #212529; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-violet-900 */ .to-violet-900 { --gradient-to: #212529; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-900/70 */ .bg-violet-900\/70 { background-color: rgba(76, 29, 149, 0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-900/90 */ .bg-violet-900\/90 { background-color: rgba(76, 29, 149, 0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-violet-900/30 */ .shadow-violet-900\/30 { --tw-shadow-color: rgba(76, 29, 149, 0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-950 */ .bg-violet-950 { background-color: #14171a; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-violet-950 */ .text-violet-950 { color: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-violet-950 */ .border-violet-950 { border-color: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-violet-950 */ .from-violet-950 { --gradient-from: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-violet-950 */ .via-violet-950 { --gradient-via: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-violet-950 */ .to-violet-950 { --gradient-to: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-950/70 */ .bg-violet-950\/70 { background-color: rgba(46, 16, 101, 0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-violet-950/90 */ .bg-violet-950\/90 { background-color: rgba(46, 16, 101, 0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-violet-950/30 */ .shadow-violet-950\/30 { --tw-shadow-color: rgba(46, 16, 101, 0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-emerald-400 */ .bg-emerald-400 { background-color: #34d399; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-emerald-400 */ .text-emerald-400 { color: #34d399; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-emerald-400 */ .border-emerald-400 { border-color: #34d399; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-emerald-400 */ .from-emerald-400 { --gradient-from: #34d399; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-emerald-400 */ .via-emerald-400 { --gradient-via: #34d399; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-emerald-400 */ .to-emerald-400 { --gradient-to: #34d399; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-emerald-400/70 */ .bg-emerald-400\/70 { background-color: rgba(52, 211, 153, 0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-emerald-400/90 */ .bg-emerald-400\/90 { background-color: rgba(52, 211, 153, 0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-emerald-400/30 */ .shadow-emerald-400\/30 { --tw-shadow-color: rgba(52, 211, 153, 0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-red-500 */ .bg-red-500 { background-color: #ef4444; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-red-500 */ .text-red-500 { color: #ef4444; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-red-500 */ .border-red-500 { border-color: #ef4444; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-red-500 */ .from-red-500 { --gradient-from: #ef4444; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-red-500 */ .via-red-500 { --gradient-via: #ef4444; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-red-500 */ .to-red-500 { --gradient-to: #ef4444; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-red-500/70 */ .bg-red-500\/70 { background-color: rgba(239, 68, 68, 0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-red-500/90 */ .bg-red-500\/90 { background-color: rgba(239, 68, 68, 0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-red-500/30 */ .shadow-red-500\/30 { --tw-shadow-color: rgba(239, 68, 68, 0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-white */ .bg-white { background-color: #e9ecef; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-white */ .text-white { color: #e9ecef; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-white */ .border-white { border-color: #e9ecef; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-white */ .from-white { --gradient-from: #e9ecef; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-white */ .via-white { --gradient-via: #e9ecef; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-white */ .to-white { --gradient-to: #e9ecef; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-white/70 */ .bg-white\/70 { background-color: rgba(255, 255, 255, 0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-white/90 */ .bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-white/30 */ .shadow-white\/30 { --tw-shadow-color: rgba(255, 255, 255, 0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-black */ .bg-black { background-color: #14171a; } /* HINT: Utility متن/تایپوگرافی (قابل استفاده در چند بخش) | selector: .text-black */ .text-black { color: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-black */ .border-black { border-color: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .from-black */ .from-black { --gradient-from: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .via-black */ .via-black { --gradient-via: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .to-black */ .to-black { --gradient-to: #14171a; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-black/70 */ .bg-black\/70 { background-color: rgba(0, 0, 0, 0.7); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-black/90 */ .bg-black\/90 { background-color: rgba(0, 0, 0, 0.9); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-black/30 */ .shadow-black\/30 { --tw-shadow-color: rgba(0, 0, 0, 0.3); } /* --------------------------------------------------------------- 8. BORDERS, RADIUS & SHADOWS --------------------------------------------------------------- */ /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-transparent */ .border-transparent { border-color: transparent; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-none */ .border-none { border-style: none; } /* HINT: Utility Border/Radius/Shadow (قابل استفاده در چند بخش) | selector: .border */ .border { border-width: 1px; border-style: solid; border-color: #2e3236; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-2 */ .border-2 { border-width: 2px; border-style: solid; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-t */ .border-t { border-top-width: 1px; border-top-style: solid; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-t-8 */ .border-t-8 { border-top-width: 8px; border-top-style: solid; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-b */ .border-b { border-bottom-width: 1px; border-bottom-style: solid; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-b-2 */ .border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-x */ .border-x { border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .border-r */ .border-r { border-right-width: 1px; border-right-style: solid; } /* HINT: Utility Border/Radius/Shadow (قابل استفاده در چند بخش) | selector: .rounded-sm */ .rounded-sm { border-radius: 0.125rem; } /* HINT: Utility Border/Radius/Shadow (قابل استفاده در چند بخش) | selector: .rounded-md */ .rounded-md { border-radius: 0.375rem; } /* HINT: Utility Border/Radius/Shadow (قابل استفاده در چند بخش) | selector: .rounded-lg */ .rounded-lg { border-radius: 0.5rem; } /* HINT: Utility Border/Radius/Shadow (قابل استفاده در چند بخش) | selector: .rounded-xl */ .rounded-xl { border-radius: 0.75rem; } /* HINT: Utility Border/Radius/Shadow (قابل استفاده در چند بخش) | selector: .rounded-2xl */ .rounded-2xl { border-radius: 1rem; } /* HINT: Utility Border/Radius/Shadow (قابل استفاده در چند بخش) | selector: .rounded-full */ .rounded-full { border-radius: 9999px; } /* HINT: Utility Border/Radius/Shadow (قابل استفاده در چند بخش) | selector: .shadow */ .shadow { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3), 0 1px 2px -1px rgba(0,0,0,0.3); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-lg */ .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.4); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .shadow-xl */ .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px -6px rgba(0,0,0,0.4); } /* --------------------------------------------------------------- 9. EFFECTS, TRANSITIONS & TRANSFORMS --------------------------------------------------------------- */ /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .opacity-0 | selector: .opacity-0 */ .opacity-0 { opacity: 0; } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .opacity-100 | selector: .opacity-100 */ .opacity-100 { opacity: 1; } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .pointer-events-none | selector: .pointer-events-none */ .pointer-events-none { pointer-events: none; } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .cursor-pointer | selector: .cursor-pointer */ .cursor-pointer { cursor: pointer; } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .overflow-hidden | selector: .overflow-hidden */ .overflow-hidden { overflow: hidden; } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .overflow-x-auto | selector: .overflow-x-auto */ .overflow-x-auto { overflow-x: auto; } /* FIX: .overflow-hidden on an ancestor (both axes) silently disables position:sticky for every descendant — this is why the header/toolbar sticky fix didn't take effect even after sticky/top-0/z-30 were defined. NOTE: a single-axis utility like this one is NOT actually safe either — see the FIX 3 comment in index.html above #appViewport. Setting only overflow-x makes the browser silently promote the other axis (overflow-y) to `auto` as well, which just as reliably breaks position:sticky on any descendant, without the axis you set even needing to be the one sticky depends on. Audit any element this class is applied to for sticky descendants before reusing it — prefer `.overflow-x-clip` (below) for anything that also has a sticky descendant, e.g. #appViewport. */ .overflow-x-hidden { overflow-x: hidden; } /* FIX 4: companion to the note above. `overflow-x: clip` visually clips horizontal bleed exactly like `overflow-x: hidden` does, but — unlike `hidden` — it does not establish a scroll container, so it does NOT trigger the overflow-y auto-promotion that breaks position:sticky on a descendant. This is what #appViewport uses now instead of `.overflow-x-hidden`, to stop the vehicle gallery (and similar wide content) from bleeding past the boxed viewport without breaking #stickyHeaderGroup again. */ .overflow-x-clip { overflow-x: clip; } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .overflow-y-auto | selector: .overflow-y-auto */ .overflow-y-auto { overflow-y: auto; } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-gradient-to-r */ .bg-gradient-to-r { background-image: linear-gradient(to right, var(--gradient-from), var(--gradient-via, var(--gradient-to)), var(--gradient-to)); } /* HINT: Utility رنگ/ظاهر (قابل استفاده در چند بخش) | selector: .bg-gradient-to-b */ .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--gradient-from), var(--gradient-via, var(--gradient-to)), var(--gradient-to)); } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .transition-colors | selector: .transition-colors */ .transition-colors { transition-property: background-color, border-color, color; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .transition-opacity | selector: .transition-opacity */ .transition-opacity { transition-property: opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .transition-transform | selector: .transition-transform */ .transition-transform { transition-property: transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .duration-300 | selector: .duration-300 */ .duration-300 { transition-duration: 300ms; } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .ease-out | selector: .ease-out */ .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .translate-x-0 | selector: .translate-x-0 */ .translate-x-0 { transform: translateX(0); } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .translate-x-full | selector: .translate-x-full */ .translate-x-full { transform: translateX(100%); } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .-translate-x-full | selector: .-translate-x-full */ .-translate-x-full { transform: translateX(-100%); } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .scale-\[0\.98\] | selector: .scale-\[0\.98\] */ .scale-\[0\.98\] { transform: scale(0.98); } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .aspect-\[4\/3\] | selector: .aspect-\[4\/3\] */ .aspect-\[4\/3\] { aspect-ratio: 4 / 3; } /* Car listing/vehicle photos measured 3:2 in the real reference site (dupontregistry.com), not 4:3 — see renderListingCard / carGlyphSVG. */ .aspect-\[3\/2\] { aspect-ratio: 3 / 2; } /* Reference corner radius on the car photo itself measured ~10-12px, noticeably tighter than the site-wide rounded-2xl (16px) used for modals/sections, so listing photos get their own smaller radius. */ .rounded-\[12px\] { border-radius: 12px; } /* --------------------------------------------------------------- 10. SHARED KEYFRAME ANIMATIONS --------------------------------------------------------------- */ /* HINT: افکت‌ها، Transition و Transform عمومی → تعریف انیمیشن مشترک | selector: @keyframes tw-pulse */ @keyframes tw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } /* HINT: افکت‌ها، Transition و Transform عمومی → استایل اختصاصی این Selector: .animate-pulse | selector: .animate-pulse */ .animate-pulse { animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* HINT: افکت‌ها، Transition و Transform عمومی → تعریف انیمیشن مشترک | selector: @keyframes ui-fade-in */ @keyframes ui-fade-in { from { opacity:0 } to { opacity:1 } } /* HINT: افکت‌ها، Transition و Transform عمومی → تعریف انیمیشن مشترک | selector: @keyframes ui-fade-out */ @keyframes ui-fade-out { from { opacity:1 } to { opacity:0 } } /* HINT: افکت‌ها، Transition و Transform عمومی → تعریف انیمیشن مشترک | selector: @keyframes ui-pop-in */ @keyframes ui-pop-in { 0% { opacity:0; transform:translateY(18px) scale(.975) } 100% { opacity:1; transform:translateY(0) scale(1) } } /* HINT: افکت‌ها، Transition و Transform عمومی → تعریف انیمیشن مشترک | selector: @keyframes ui-pop-out */ @keyframes ui-pop-out { 0% { opacity:1; transform:translateY(0) scale(1) } 100% { opacity:0; transform:translateY(10px) scale(.985) } } /* HINT: افکت‌ها، Transition و Transform عمومی → تعریف انیمیشن مشترک | selector: @keyframes ui-drawer-in */ @keyframes ui-drawer-in { from { transform:translateX(100%); opacity:.7 } to { transform:translateX(0); opacity:1 } } /* HINT: افکت‌ها، Transition و Transform عمومی → تعریف انیمیشن مشترک | selector: @keyframes ui-drawer-out */ @keyframes ui-drawer-out { from { transform:translateX(0); opacity:1 } to { transform:translateX(100%); opacity:.7 } } /* HINT: افکت‌ها، Transition و Transform عمومی → تعریف انیمیشن مشترک | selector: @keyframes ui-slide-down */ @keyframes ui-slide-down { from { opacity:0; transform:translateY(-10px); max-height:0 } to { opacity:1; transform:translateY(0); max-height:500px } } /* HINT: افکت‌ها، Transition و Transform عمومی → تعریف انیمیشن مشترک | selector: @keyframes ui-slide-up */ @keyframes ui-slide-up { from { opacity:1; transform:translateY(0); max-height:500px } to { opacity:0; transform:translateY(-8px); max-height:0 } } /* HINT: افکت‌ها، Transition و Transform عمومی → اعلان Toast | selector: @keyframes ui-toast-in */ @keyframes ui-toast-in { from { opacity:0; transform:translate(-50%,18px) scale(.94) } to { opacity:1; transform:translate(-50%,0) scale(1) } } /* HINT: افکت‌ها، Transition و Transform عمومی → اعلان Toast | selector: @keyframes ui-toast-out */ @keyframes ui-toast-out { from { opacity:1; transform:translate(-50%,0) scale(1) } to { opacity:0; transform:translate(-50%,12px) scale(.94) } } /* HINT: افکت‌ها، Transition و Transform عمومی → پس‌زمینه و لایه Overlay | selector: @keyframes menu-backdrop-enter */ @keyframes menu-backdrop-enter { from { opacity:0; } to { opacity:1; } } /* HINT: افکت‌ها، Transition و Transform عمومی → پس‌زمینه و لایه Overlay | selector: @keyframes menu-backdrop-exit */ @keyframes menu-backdrop-exit { from { opacity:1; } to { opacity:0; } } /* --------------------------------------------------------------- 11. COMPONENT: SKELETON LOADER --------------------------------------------------------------- */ /* HINT: کامپوننت Skeleton Loader → Skeleton Loader | selector: @keyframes skeleton-shimmer */ @keyframes skeleton-shimmer { 0%, 100% { background-color: #2e3236; } 50% { background-color: #414549; } } /* HINT: کامپوننت Skeleton Loader → Skeleton Loader | selector: @keyframes skeleton-shimmer-light */ @keyframes skeleton-shimmer-light { 0%, 100% { background-color: #d6d9dc; } 50% { background-color: #c5c8cb; } } /* HINT: کامپوننت Skeleton Loader → اسکلت لودینگ | selector: .skeleton-block */ .skeleton-block { background-color: #2e3236; border-radius: 0.75rem; animation: skeleton-shimmer 1.3s ease-in-out infinite; } /* HINT: کامپوننت Skeleton Loader → Skeleton Loader | selector: .skeleton-block.rounded-full */ .skeleton-block.rounded-full { border-radius: 9999px; } /* HINT: کامپوننت Skeleton Loader → Skeleton Loader | selector: .skeleton-block.rounded-lg */ .skeleton-block.rounded-lg { border-radius: 0.5rem; } /* HINT: کامپوننت Skeleton Loader → Skeleton Loader | selector: .skeleton-block.rounded-2xl */ .skeleton-block.rounded-2xl { border-radius: 1rem; } /* HINT: کامپوننت Skeleton Loader → Skeleton Loader | selector: .theme-light .skeleton-block */ .theme-light .skeleton-block { animation-name: skeleton-shimmer-light; } /* --------------------------------------------------------------- 12. COMPONENT: ROUTE-TRANSITION LOADING OVERLAY (circular spinner removed — skeleton-only loading now) --------------------------------------------------------------- */ /* HINT: لودینگ انتقال بین صفحات → ناوبری | selector: .is-navigating, .is-navigating body */ /* FIX: this used to target ".is-navigating body" too — putting overflow:hidden on (rather than just the root , which gets special viewport propagation) re-creates a nested scroll container and breaks position:sticky on the header for the duration of every navigation. Root-only now. */ .is-navigating { overflow: hidden !important; } /* HINT: لودینگ انتقال بین صفحات → ناوبری | selector: .is-navigating #app */ .is-navigating #app { min-height: 100vh; } /* --------------------------------------------------------------- 13. COMPONENT: BURGER MENU / DRAWER Fullscreen blurred glass menu. On open, the blur veil wipes in from the right edge of the screen (clip-path) and the 4 nav links translate in from the right, one after another. No title, no footer, no submenu — just the veil, a close icon, and the 4 links. Pure backdrop-filter blur with no flat tint, so there's no solid-colour edge/border where the veil meets the page. --------------------------------------------------------------- */ /* HINT: منوی کناری / Drawer → پس‌زمینه و لایه Overlay | selector: .menu-veil */ /* NOTE: #menuBackdropEl/.menu-close/.menu-link all carry a `data-action` attribute (used by the site's generic click dispatcher). Later in this file, the general `[data-action] { transition: ... }` rule (section 16) has the exact same specificity as a lone class selector, so on source order it was silently overwriting the `transition` shorthand declared here — the clip-path/backdrop-filter/transform transitions were being replaced outright rather than merged, which is why the open/close and the staggered link entrance were not animating at all. Qualifying every selector below with the #menuOverlayInner ancestor raises specificity above the attribute rule so it can no longer clobber it. */ #menuOverlayInner .menu-veil { position: absolute; inset: 0; background: transparent; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); clip-path: inset(0 0 0 100%); -webkit-clip-path: inset(0 0 0 100%); will-change: clip-path, backdrop-filter; /* FIX: backdrop-filter and clip-path used to share the same .55s duration. clip-path's cubic-bezier(.22,1,.36,1) is a hard ease-out — it covers almost all of its visual distance early and then spends a disproportionate share of the .55s barely moving at all right before it lands. backdrop-filter's blur is one of the most expensive things a mobile GPU can be asked to keep re-sampling every frame (see the PERF FIX note on .auth-flow-backdrop below, which dropped an animated blur entirely for this exact reason) — so for the ~120ms where clip-path is crawling its last stretch, the browser was *also* still mid-recompute on the blur radius, and that overlap is what read as the veil "getting stuck" for a beat right before it fully closed. Giving backdrop-filter its own, shorter duration means the (heavy) blur finishes long before clip-path enters that slow tail, so nothing expensive is still being recomputed during it. */ transition: clip-path .55s cubic-bezier(.22,1,.36,1), -webkit-clip-path .55s cubic-bezier(.22,1,.36,1), backdrop-filter .28s ease, -webkit-backdrop-filter .28s ease; } /* HINT: منوی کناری / Drawer → منوی کناری / Drawer | selector: #menuOverlayInner.is-open .menu-veil */ #menuOverlayInner.is-open .menu-veil { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } /* HINT: منوی کناری / Drawer → منوی کناری / Burger Menu | selector: .menu-close */ #menuOverlayInner .menu-close { position: absolute; top: 22px; right: 20px; z-index: 2; width: 46px; height: 46px; border-radius: 9999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateX(16px); transition: opacity .35s ease .15s, transform .35s cubic-bezier(.22,1,.36,1) .15s; } #menuOverlayInner.is-open .menu-close { opacity: 1; transform: translateX(0); } /* HINT: منوی کناری / Drawer → منوی کناری / Drawer | selector: .menu-links */ .menu-links { direction: rtl; position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 0 26px; /* the nav itself has no background — it's just a full-height flex column holding the 4 buttons — so let taps in its empty space fall through to the backdrop underneath (closes the menu), and only re-enable pointer events on the actual link buttons. */ pointer-events: none; } /* FIX: this was unconditional (`#menuOverlayInner .menu-link`), so it overrode the container's `pointer-events: none` (toggled by JS only while the drawer is closed) for every link at all times — not just while the menu is open. #menuOverlayInner is a permanent fixed inset:0 layer sitting over every page, and its 4 links are vertically centered on the screen by the flex layout in .menu-links even while "closed" (they're only hidden via opacity + a small translateX, not removed from layout). That left 4 invisible-but-fully-clickable nav buttons floating over the middle of every page — tapping empty space there (e.g. on the account-edit form) actually hit the hidden "خانه" link and navigated home. Scoping this to `.is-open` means the links are only interactive while the menu is actually visible. */ #menuOverlayInner.is-open .menu-link { pointer-events: auto; } /* HINT: منوی کناری / Drawer → استایل اختصاصی این Selector: .menu-link | selector: .menu-link */ #menuOverlayInner .menu-link { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 4px; background: none; border: 0; min-height: 42px; opacity: 0; transform: translateX(56px); transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1), background-color .2s ease; } #menuOverlayInner.is-open .menu-link { opacity: 1; transform: translateX(0); } #menuOverlayInner.is-open .menu-link:nth-child(1) { transition-delay: .16s; } #menuOverlayInner.is-open .menu-link:nth-child(2) { transition-delay: .24s; } #menuOverlayInner.is-open .menu-link:nth-child(3) { transition-delay: .32s; } #menuOverlayInner.is-open .menu-link:nth-child(4) { transition-delay: .40s; } #menuOverlayInner .menu-link:active { opacity: .86; } .menu-link-icon { width: 46px; height: 46px; border-radius: 9999px; border: 1.5px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #e0e3e6; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .menu-link-label { font-size: 27px; font-weight: 800; letter-spacing: -0.01em; color: #d3d6d9; transition: color .2s ease; } .menu-link.is-active .menu-link-icon { background: #e0e3e6; border-color: #e0e3e6; color: #1a1d21; } .menu-link.is-active .menu-link-label { color: #e0e3e6; } /* HINT: منوی کناری / Drawer → استایل اختصاصی این Selector: .menu-submenu-motion | selector: .menu-submenu-motion */ .menu-submenu-motion { overflow: hidden; animation: ui-slide-down .34s cubic-bezier(.22,1,.36,1) both; } /* --------------------------------------------------------------- 14. COMPONENT: MODAL (generic) --------------------------------------------------------------- */ /* HINT: مودال عمومی → پوسته مودال عمومی | selector: .modal-shell */ .modal-shell { animation: ui-fade-in .55s ease both; will-change: opacity; } /* HINT: مودال عمومی → مودال | selector: .modal-shell.is-closing */ .modal-shell.is-closing { animation: ui-fade-out .48s ease both; } /* HINT: مودال عمومی → پس‌زمینه و لایه Overlay | selector: .modal-backdrop */ .modal-backdrop { animation: ui-fade-in .55s ease both; } /* HINT: مودال عمومی → پس‌زمینه و لایه Overlay | selector: .modal-shell.is-closing .modal-backdrop */ .modal-shell.is-closing .modal-backdrop { animation: ui-fade-out .48s ease both; } /* HINT: مودال عمومی → کارت مودال عمومی | selector: .modal-card */ .modal-card { animation: ui-pop-in .62s cubic-bezier(.22,1,.36,1) both; will-change: transform, opacity; } /* HINT: مودال عمومی → مودال | selector: .modal-shell.is-closing .modal-card */ .modal-shell.is-closing .modal-card { animation: ui-pop-out .48s cubic-bezier(.4,0,1,1) both; } /* "مدیریت آگهی" sheet — reuses the generic modal shell (#genericModal) with its own status banner + tappable row list styling. */ .manageAd-status { border: 1px solid rgba(167,139,250,.35); background: rgba(167,139,250,.08); } .manageAd-status-title { font-weight: 800; font-size: 15px; color: #c4b5fd; margin-bottom: 4px; } .manageAd-status.is-listed { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.08); } .manageAd-status.is-listed .manageAd-status-title { color: #6ee7b7; } .manageAd-status-desc { font-size: 12.5px; color: #999c9f; line-height: 1.6; } .manageAd-rows { border: 1px solid #2e3236; border-radius: 16px; overflow: hidden; background: #202327; } .manageAd-rows-secondary { margin-top: 10px; } .manageAd-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: transparent; border: 0; border-bottom: 1px solid #2e3236; color: #e0e3e6; text-align: right; } .manageAd-row:last-child { border-bottom: 0; } .manageAd-row:active { background: rgba(255,255,255,.05); } .manageAd-row-label { flex: 1; font-size: 14px; font-weight: 600; } .manageAd-row-icon { display: flex; align-items: center; justify-content: center; color: #999c9f; } .manageAd-row-chevron { display: flex; align-items: center; justify-content: center; color: #55595c; } .manageAd-row.manageAd-row-danger .manageAd-row-label, .manageAd-row.manageAd-row-danger .manageAd-row-icon { color: #f87171; } .theme-light .manageAd-status { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.25); } .theme-light .manageAd-status-title { color: #7c3aed; } .theme-light .manageAd-status.is-listed { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.28); } .theme-light .manageAd-status.is-listed .manageAd-status-title { color: #059669; } .theme-light .manageAd-status-desc { color: #7a7e82; } .theme-light .manageAd-rows { background: #e9ecef; border-color: #d4d7da; } .theme-light .manageAd-row { color: #34383c; border-bottom-color: #d4d7da; } .theme-light .manageAd-row:active { background: rgba(0,0,0,.04); } .theme-light .manageAd-row-icon { color: #7a7e82; } .theme-light .manageAd-row-chevron { color: #a0a3a7; } .theme-light .manageAd-row.manageAd-row-danger .manageAd-row-label, .theme-light .manageAd-row.manageAd-row-danger .manageAd-row-icon { color: #dc2626; } /* Delete-confirmation step: reason picker + "مطمئنی؟" warning banner. */ .manageAd-delete-warn { display: flex; align-items: flex-start; gap: 10px; border: 1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.08); border-radius: 16px; padding: 14px; margin-bottom: 14px; } .manageAd-delete-warn-icon { color: #f87171; flex-shrink: 0; margin-top: 1px; } .manageAd-delete-warn-title { font-weight: 800; font-size: 14.5px; color: #fca5a5; margin-bottom: 3px; } .manageAd-delete-warn-desc { font-size: 12px; color: #999c9f; line-height: 1.6; } .manageAd-reason-list { border: 1px solid #2e3236; border-radius: 16px; overflow: hidden; background: #202327; margin-bottom: 16px; } .manageAd-reason-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12.5px 16px; background: transparent; border: 0; border-bottom: 1px solid #2e3236; color: #e0e3e6; text-align: right; font-size: 13.5px; } .manageAd-reason-row:last-child { border-bottom: 0; } .manageAd-reason-row:active { background: rgba(255,255,255,.05); } .manageAd-reason-tick { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid #55595c; display: flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0; } .manageAd-reason-row.is-selected { color: #c4b5fd; font-weight: 700; } .manageAd-reason-row.is-selected .manageAd-reason-tick { border-color: #a78bfa; background: #a78bfa; color: #1a1d21; } .manageAd-cancel-btn { flex: 1; background: #2e3236; color: #d3d6d9; font-weight: 700; font-size: 14px; border-radius: 9999px; padding: 12px 0; border: 0; } .manageAd-cancel-btn:active { filter: brightness(.94); } .manageAd-delete-confirm-btn { flex: 1; background: #ef4444; color: #e9ecef; font-weight: 800; font-size: 14px; border-radius: 9999px; padding: 12px 0; border: 0; transition: opacity .15s; } .manageAd-delete-confirm-btn.is-unarmed { opacity: .5; } .manageAd-delete-confirm-btn:not(.is-unarmed):active { filter: brightness(.92); } .theme-light .manageAd-delete-warn { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.25); } .theme-light .manageAd-delete-warn-title { color: #dc2626; } .theme-light .manageAd-delete-warn-desc { color: #7a7e82; } .theme-light .manageAd-reason-list { background: #e9ecef; border-color: #d4d7da; } .theme-light .manageAd-reason-row { color: #34383c; border-bottom-color: #d4d7da; } .theme-light .manageAd-reason-row:active { background: rgba(0,0,0,.04); } .theme-light .manageAd-reason-row.is-selected { color: #7c3aed; } .theme-light .manageAd-cancel-btn { background: #d4d7da; color: #404448; } /* حذف آگهی → reason picker + confirm step, shown inside the same generic modal once the حذف row is tapped (see state.modal.step). */ .manageAd-delete-sub { font-size: 12.5px; color: #999c9f; } .manageAd-reason-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid #34383c; background: #202327; color: #d2d5d8; font-size: 13.5px; font-weight: 600; text-align: right; } .manageAd-reason-row:active { background: rgba(255,255,255,.05); } .manageAd-reason-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid #55595c; flex-shrink: 0; position: relative; } .manageAd-reason-row.is-selected { border-color: #a78bfa; background: rgba(167,139,250,.08); color: #e0e3e6; } .manageAd-reason-row.is-selected .manageAd-reason-dot { border-color: #a78bfa; background: #a78bfa; } .manageAd-reason-row.is-selected .manageAd-reason-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #1a1d21; } .manageAd-delete-warn { font-size: 12px; color: #f87171; line-height: 1.6; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); border-radius: 12px; padding: 10px 12px; } .manageAd-confirm-delete-btn { background: #55595c; color: #c5c8cb; pointer-events: none; } .manageAd-confirm-delete-btn.is-enabled { background: #ef4444; color: #e9ecef; pointer-events: auto; } .theme-light .manageAd-reason-row { background: #e9ecef; border-color: #d4d7da; color: #404448; } .theme-light .manageAd-reason-row:active { background: rgba(0,0,0,.04); } .theme-light .manageAd-reason-dot { border-color: #a0a3a7; } .theme-light .manageAd-reason-row.is-selected { border-color: #7c3aed; background: rgba(124,58,237,.06); } .theme-light .manageAd-reason-row.is-selected .manageAd-reason-dot { border-color: #7c3aed; background: #7c3aed; } .theme-light .manageAd-reason-row.is-selected .manageAd-reason-dot::after { background: #e9ecef; } .theme-light .manageAd-delete-warn { color: #dc2626; background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.22); } .theme-light .manageAd-confirm-delete-btn { background: #c8cbce; color: #7a7e82; } .theme-light .manageAd-confirm-delete-btn.is-enabled { background: #dc2626; color: #e9ecef; } /* --------------------------------------------------------------- 15. COMPONENT: LOGIN MODAL (centered popup) --------------------------------------------------------------- */ /* HINT: مودال ورود → پوسته مودال ورود | selector: .login-modal-shell */ .login-modal-shell { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:18px; } /* HINT: مودال ورود → پس‌زمینه و لایه Overlay | selector: .login-modal-backdrop */ .login-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.76); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:ui-fade-in .58s ease both; } /* HINT: مودال ورود → پس‌زمینه و لایه Overlay | selector: .login-modal-shell.is-closing .login-modal-backdrop */ .login-modal-shell.is-closing .login-modal-backdrop { animation:ui-fade-out .48s ease both; } /* HINT: مودال ورود → کارت مودال ورود | selector: .login-modal-card */ .login-modal-card { position:relative; width:min(100%,430px); max-height:calc(100vh - 36px); overflow-y:auto; border:1px solid rgba(255,255,255,.14); border-radius:28px; background:linear-gradient(180deg,#1e2125 0%,#1b1e22 100%); box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.025) inset; padding:24px; animation:ui-pop-in .68s cubic-bezier(.22,1,.36,1) both; will-change:transform,opacity; } /* HINT: مودال ورود → مودال | selector: .login-modal-shell.is-closing .login-modal-card */ .login-modal-shell.is-closing .login-modal-card { animation:ui-pop-out .48s cubic-bezier(.4,0,1,1) both; } /* HINT: مودال ورود → مودال | selector: .login-modal-icon */ .login-modal-icon { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(224,227,230,.22),rgba(68,72,76,.18)); border:1px solid rgba(224,227,230,.22); color:#d3d6d9; animation:ui-pop-in .72s .08s cubic-bezier(.22,1,.36,1) both; } /* HINT: مودال ورود → مودال | selector: .login-modal-input */ .login-modal-input { width:100%; height:54px; border-radius:16px; border:1px solid #404448; background:#202428; color:#e0e3e6; padding:0 15px; font-size:14px; outline:none; transition:border-color .28s ease, box-shadow .28s ease, background-color .28s ease; } .login-modal-input:focus { border-color:#c4c7ca; background:#212529; box-shadow:0 0 0 4px rgba(196,199,202,.12); } .login-modal-input::placeholder { color:#6f7377; } /* HINT: مودال ورود → مودال | selector: .login-modal-primary */ .login-modal-primary { width:100%; height:54px; border-radius:16px; background:#e0e3e6; color:#1e2125; font-size:15px; font-weight:800; transition:transform .22s cubic-bezier(.22,1,.36,1), filter .22s ease, box-shadow .22s ease; box-shadow:0 8px 24px rgba(224,227,230,.12); } .login-modal-primary:hover { filter:brightness(1.03); box-shadow:0 10px 26px rgba(224,227,230,.16); } /* FIX: utility classes referenced in index.html/script.js but missing from this stylesheet (or defined with an invalid unescaped "/" in the selector, which is not valid CSS and gets silently dropped by the browser). Without these, the sticky navbar, modal stacking/backgrounds, hover/focus states, and several layout utilities across the site (profile page, sell flow, filters, etc.) never actually took effect. */ .sticky { position: sticky; } .top-0 { top: 0; } .top-1\.5 { top: 0.375rem; } .top-full { top: 100%; } .bottom-1\.5 { bottom: 0.375rem; } .bottom-5 { bottom: 1.25rem; } .right-0 { right: 0; } .right-1\.5 { right: 0.375rem; } .left-1\/2 { left: 50%; } .-translate-x-1\/2 { transform: translateX(-50%); } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-\[60\] { z-index: 60; } .z-\[70\] { z-index: 70; } .z-\[90\] { z-index: 90; } .h-14 { height: 3.5rem; } .w-14 { width: 3.5rem; } .w-56 { width: 14rem; } .w-1\/3 { width: 33.333333%; } .w-1\/4 { width: 25%; } .w-1\/5 { width: 20%; } .w-2\/5 { width: 40%; } .w-3\/5 { width: 60%; } .max-w-\[420px\] { max-width: 420px; } .col-span-2 { grid-column: span 2 / span 2; } .inline-flex { display: inline-flex; } .items-start { align-items: flex-start; } .mx-auto { margin-left: auto; margin-right: auto; } .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; } .text-\[17px\] { font-size: 17px; } .text-\[20px\] { font-size: 20px; } .text-right { text-align: right; } .tracking-widest { letter-spacing: 0.1em; } .leading-6 { line-height: 1.5rem; } .text-red-300 { color: #fca5a5; } .border-l { border-left-width: 1px; border-left-style: solid; } .border-dashed { border-style: dashed; } .border-red-800 { border-color: #991b1b; } .rounded-none { border-radius: 0; } .bg-transparent { background-color: transparent; } .bg-neutral-900\/50 { background-color: rgba(33,37,41,0.5); } .bg-neutral-900\/80 { background-color: rgba(33,37,41,0.8); } .bg-red-950\/50 { background-color: rgba(69, 10, 10, 0.5); } .bg-violet-950\/25 { background-color: rgba(46, 16, 101, 0.25); } .border-violet-900\/50 { border-color: rgba(76, 29, 149, 0.5); } .opacity-70 { opacity: 0.7; } .outline-none { outline: none; } .resize-none { resize: none; } .object-cover { object-fit: cover; } .hover\:bg-neutral-800:hover { background-color: #2e3236; } .hover\:bg-neutral-800\/70:hover { background-color: rgba(46,50,54,0.7); } .focus\:border-violet-400:focus { border-color: #c4c7ca; } .active\:scale-\[0\.98\]:active { transform: scale(0.98); } .last\:border-none:last-child { border: none; } .placeholder\:text-neutral-500::placeholder { color: #707478; } /* FIX (structural): previously the header, the breadcrumb+title block, and the sort/filter toolbar were THREE independently `position:sticky` elements, each stacked using a `top` offset computed in JS from the others' rendered heights. On mobile browsers, independently-sticky siblings can update their pinned position on slightly different compositor frames during a fast scroll/fling, which very briefly exposes the (non-sticky) grid content scrolling underneath in the seam between them — this is what showed up as a "gap" with a car photo peeking through. Fix: header + breadcrumb/title + toolbar now all live as plain, non-sticky children inside ONE shared `.sticky top-0` wrapper (#stickyHeaderGroup, see index.html + render() in script.js). They move as a single atomic compositor layer, so there is no seam where two independent sticky calculations can fall out of sync. These classes are kept as plain (non-positioned) markers only so existing JS selectors keep working. FIX 2: #stickyHeaderGroup also used to live INSIDE #pageBlurWrap. Any filter/transform on an ANCESTOR of a `position: sticky` element breaks its stickiness (it establishes a new containing block, so the sticky element stops pinning to the viewport and just scrolls away with the page) — and render() in script.js applies exactly that (`filter: blur()` + `transform: translateZ(0)` via `.loading-blur-layer`) to #pageBlurWrap during page-transition loading. That's why the whole header block (down through the مرتب‌سازی/ذخیره جستجو/پاک کردن همه toolbar) would stop staying fixed and content would scroll up underneath it. Fix: moved #stickyHeaderGroup out to be a sibling BEFORE #pageBlurWrap, which now wraps only #pageContent — the blur/dim effect still covers the page content during navigation, but no longer sits between the sticky header and the viewport, so it can no longer break its stickiness. */ .page-header-sticky { position: static; } .toolbar-sticky { position: static; } /* FIX (v2): the previous approach masked the toolbar's own box, which faded the sort/filter row's own text along with the edge — not what was wanted (filters must stay fully solid/opaque, only the empty strip below them should fade). It also only ever applied to `.toolbar-sticky`, so on the home page — which has no toolbar, only the bare #siteHeader row — nothing faded at all. Fix: attach the fade as a separate ~22px strip appended AFTER whatever #stickyHeaderGroup's real last child currently is (via ::after, which always renders after the last actual child in normal flow) — that's #siteHeader alone on the home page, .page-header-sticky on pages with just a title/breadcrumb, or .toolbar-sticky (below the filter row) on listing pages. Because it's a distinct box rather than a mask on existing content, none of the real header/filter text is ever touched — it stays crisp and fully opaque right up to its own bottom edge, and only the added strip below it fades to transparent, replacing the old hard border line. --chrome-fade-bg mirrors the exact bg-neutral-950 value (and its .theme-light override) so the solid end of the gradient matches the header/toolbar background exactly in both themes. pointer-events: none keeps this decorative strip from swallowing taps on card content that scrolls up underneath it. */ #stickyHeaderGroup { --chrome-fade-bg: #14171a; } .theme-light #stickyHeaderGroup { --chrome-fade-bg: #e9ecef; } /* Unified flat chrome: header now matches the page/nav gray on every page (home included) — no glass/blur/gradient treatment, just one solid color, so there's no seam between header, page, and bottom dock. #siteHeader carries .bg-neutral-950 (black) from markup as its base fill class; this ID rule overrides it to the same gray used everywhere else, on every page (not just home). */ #siteHeader { background: #14171a; } #siteHeader.home-page-active .header-home-row { background: transparent; border-bottom: none; } #stickyHeaderGroup::after { content: ""; display: block; height: 8px; background: linear-gradient(to bottom, var(--chrome-fade-bg) 0%, transparent 100%); pointer-events: none; } .login-modal-primary:active { filter:brightness(.98); } /* HINT: مودال ورود → مودال | selector: .login-modal-link */ .login-modal-link { color:#e0e3e6; text-decoration:underline; text-underline-offset:3px; transition:opacity .2s ease; } .login-modal-link:hover { opacity:.75; } /* HINT: مودال ورود → جداکننده مودال ورود | selector: .login-modal-divider */ .login-modal-divider { display:flex; align-items:center; gap:12px; color:#6f7377; font-size:12px; } .login-modal-divider::before, .login-modal-divider::after { content:""; flex:1; height:1px; background:#313539; } /* --------------------------------------------------------------- 16. COMPONENT: TOAST & SECTION-ENTER MOTION / GENERAL INTERACTION --------------------------------------------------------------- */ /* HINT: Toast و انیمیشن ورود بخش‌ها → استایل اختصاصی این Selector: button, a | selector: button, a */ button, a { -webkit-tap-highlight-color: transparent; } /* FIX: the car/listing card, account cards, menu rows, etc. are plain `
`s with a `data-action` (not real