@media (max-width: 274px) { body{ display: none; } } @media (max-width: 310px) { .logo1{ font-size: 17px !important; } } * { margin: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary-color: #ff6b6b; --secondary-color: #4ecdc4; --dark-color: #333; --light-color: #f8f9fa; --gray-color: #6c757d; --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --transition: all 0.3s ease; } body { color: var(--dark-color); background-color: #fff7f1; } /* انیمیشن برای سبد خرید */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .cart-animate { animation: pulse 0.5s ease; } /* پیدا کردن المان مشکل‌دار */ * { max-width: 100%; /* جلوگیری از overflow */ } /* تعریف متغیرها و تنظیمات پایه */ :root { --primary-color: #00bcd4; /* فیروزه ای روشن (مثل الماس) */ --primary-dark: #0097a7; /* فیروزه ای تیره تر برای هاور */ --text-color: #333; --bg-light: #f8f8f8; --font-titr: 'Titr', sans-serif; --font-nazanin: 'Nazanin', serif; } /* فونت Noto Naskh Arabic به لینک ترکیبی فونت‌ها در منتقل شد تا @import بلاک‌کننده رندر حذف شود */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-titr); /* فونت تیترها */ } a { text-decoration: none; color: var(--text-color); } ul { list-style: none; } .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } /* --- نوار اطلاع‌رسانی بالا (Top Bar) --- */ .top-bar { background: var(--primary-dark); color: #fff; text-align: center; padding: 8px 0; font-size: 0.9em; } /* لوگو */ .logo a { font-family: var(--font-titr); font-size: 28px; color: var(--primary-color); font-weight: bold; display: flex; } /* منوی اصلی */ .main-nav ul { display: flex; } .main-nav ul li { margin: 0 15px; } .main-nav ul li a { display: block; padding: 10px 0; color: var(--text-color); font-size: 16px; transition: color 0.2s; } .main-nav ul li a:hover { color: var(--primary-color); } .search-box:focus-within { border-color: var(--primary-color); } .search-box input { border: none; padding: 0 15px; width: 200px; outline: none; font-family: var(--font-nazanin); } .search-box button { background: var(--primary-color); border: none; color: #fff; padding: 0 12px; cursor: pointer; transition: background 0.3s; } .search-box button:hover { background: var(--primary-dark); } /* دکمه‌های عملیاتی (ورود و سبد خرید) */ .action-btn { display: flex; align-items: center; gap: 5px; color: var(--primary-dark); font-weight: bold; transition: color 0.3s; } .action-btn i { font-size: 20px; } .action-btn:hover { color: var(--primary-color); } .cart-btn { position: relative; } .cart-count { position: absolute; top: -5px; right: -10px; /* background: red; */ color: #333; font-size: 10px; border-radius: 50%; padding: 3px 6px; line-height: 1; } /* --- دکمه‌های عمومی (برای استفاده در اسلایدر و بخش‌های دیگر) --- */ .btn { display: inline-block; padding: 12px 30px; border-radius: 5px; font-family: var(--font-titr); font-size: 16px; font-weight: bold; margin-top: 20px; cursor: pointer; transition: background 0.3s, color 0.3s; } .primary-btn { background: var(--primary-color); color: #fff; border: 2px solid var(--primary-color); } .primary-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .slider-content h1 { font-size: 3.2em; margin-bottom: 10px; font-weight: 900; } .slider-content p { font-size: 1.4em; font-weight: 300; } .main-nav ul li { position: relative; } /* استایل کادر اصلی مگامنو */ .mega-menu { position: absolute; top: 100%; /* زیر منوی اصلی ظاهر می‌شود */ right: 0; /* از سمت راست شروع شود */ width: 100vw; /* عرض کل صفحه */ left: 50%; transform: translateX(-50%); /* برای وسط قرار گرفتن منو در کل عرض صفحه */ background: #fff; border-top: 2px solid var(--primary-color); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 100; /* مخفی سازی اولیه مگامنو */ visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; } /* نمایش مگامنو هنگام نگه داشتن ماوس روی آیتم "محصولات" */ .main-nav ul li:hover .mega-menu { visibility: visible; opacity: 1; } /* محتوای داخلی مگامنو (شامل ستون‌ها) */ .mega-menu-content { display: flex; padding: 30px 15px; gap: 30px; justify-content: space-between; } /* ستون‌های دسته‌بندی */ .mega-menu-col { flex: 1; /* ستون‌ها فضای مساوی می‌گیرند */ min-width: 180px; } .mega-menu-col h3 { font-family: var(--font-titr); font-size: 1.2em; color: var(--primary-dark); border-bottom: 2px solid var(--bg-light); padding-bottom: 8px; margin-bottom: 15px; } .mega-menu-col h3 i { margin-left: 5px; } .mega-menu-col ul li a { padding: 8px 0; display: block; font-size: 15px; color: var(--text-color); } .mega-menu-col ul li a:hover { color: var(--primary-color); padding-right: 5px; /* کمی حرکت هنگام هاور */ } /* ستون بنر تبلیغاتی */ .mega-menu-banner { flex-basis: 250px; /* فضای ثابت برای بنر */ background: var(--bg-light); border-radius: 8px; overflow: hidden; text-align: center; } .mega-menu-banner a { display: block; padding: 15px; } .mega-menu-banner img { width: 100%; height: auto; border-radius: 6px; margin-bottom: 10px; } .mega-menu-banner h4 { color: var(--primary-dark); font-size: 1.1em; margin-bottom: 5px; } .mega-menu-banner p { color: var(--text-color); font-size: 0.9em; } @media (max-width: 768px) { /* B. لوگو */ .logo a { font-size: 1.4rem; } /* C. پنهان کردن منو در حالت عادی و تنظیم آن برای حالت موبایل */ .nav-menu { /* حالت پیش‌فرض: پنهان و آماده برای اسلاید */ display: none; /* در حالت جاوا اسکریپت آن را با flex نمایش می‌دهیم */ flex-direction: column; position: fixed; top: 60px; /* درست زیر هدر */ left: 0; width: 100%; height: calc(100vh - 60px); /* ارتفاع کامل صفحه منهای هدر */ background-color: rgba(0, 0, 0, 0.95); /* پس‌زمینه تیره برای تمرکز */ z-index: 1000; transform: translateX(100%); /* منو را به سمت راست هل می‌دهیم تا پنهان شود */ transition: transform 0.3s ease-in-out; padding: 20px 0; } .nav-menu.open { transform: translateX(0); /* وقتی کلاس open اضافه شد، منو نمایش داده شود */ } .nav-menu li { width: 100%; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .nav-menu li a { display: block; padding: 15px 0; font-size: 1.1rem; color: #fff; } /* D. نمایش دکمه همبرگری */ .hamburger { display: block; /* دکمه همبرگری را نمایش می‌دهیم */ font-size: 1.5rem; cursor: pointer; color: var(--primary-color); z-index: 1001; } } @media (max-width: 768px) { /* A. کانتینر اسلایدر */ .slider { height: 50px; /* ارتفاع اسلایدر را در موبایل کاهش می‌دهیم */ margin-top: 0; /* اگر مارجینی دارد، حذف می‌کنیم */ } .slider-content h2 { font-size: 1.5rem; margin-bottom: 5px; } .slider-content p { font-size: 0.9rem; display: -webkit-box; /* برای نمایش چند خطی با الیپس */ -webkit-line-clamp: 3; /* نمایش حداکثر ۲ خط */ -webkit-box-orient: vertical; overflow: hidden; } /* C. دکمه‌های کنترلی (فلش‌ها) */ .slider-btn { font-size: 1.5rem; padding: 7px; } } /* --- بخش نمایش محصولات (Horizontal Carousel) --- */ /* نوار تب‌بندی (Titles in a row) */ .category-tabs-container { display: flex; justify-content: center; /* وسط چین شدن دکمه‌ها */ gap: 15px; margin-bottom: 30px; } .category-tab { background: none; border: none; padding: 10px 20px; font-size: 1.2em; font-family: var(--font-titr); color: var(--text-color); cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; } .category-tab:hover, .category-tab.active { color: var(--primary-dark); border-bottom-color: var(--primary-color); /* زیر خط فیروزه‌ای برای تب فعال */ } /* مدیریت تب‌ها */ .tab-pane { display: none; } .tab-pane.active { display: block; } /* --- ردیف اسکرولی محصولات (Carousel Track) --- */ .product-carousel-track { display: flex; overflow-x: scroll; /* فعال‌سازی اسکرول افقی */ padding-bottom: 20px; /* فضای بیشتر برای اسکرول‌بار */ gap: 25px; padding: 10px 0; } .product-carousel-track::-webkit-scrollbar { display: none; } /* تنظیم عرض کارت محصول برای اسکرول */ .product-carousel-track .product-card { min-width: 250px; /* عرض ثابت برای هر کارت */ max-width: 250px; flex-shrink: 0; /* مهم: جلوگیری از کوچک شدن کارت‌ها */ } /* کارت مشاهده بیشتر (View All Card) */ .view-all-card { min-width: 150px; max-width: 150px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; text-align: center; margin-right: 10px; /* فاصله از آخرین محصول */ } /* واکنش‌گرایی برای موبایل */ @media (max-width: 600px) { .product-carousel-track .product-card { min-width: 180px; max-width: 180px; } } /* شبکه‌های اجتماعی */ .social-title { margin-top: 30px; } /* بخش محصولات پرفروش */ .best-sellers-section { /* margin: 5px auto 5px auto; */ /* padding: 0 30px 0 0; */ background: #352410; /* border-radius: 7px; */ position: relative; } .best-sellers-container:active .product-card best-seller-card { transition: transform 0.1s ease; } .best-sellers-container:hover .product-card best-seller-card { transform: translateY(-5px); } .section-subtitle { color: #666; font-size: 1.1em; } .best-sellers-container { display: block; } /* کانتینر محصولات پرفروش */ .best-sellers-container { position: relative; /* margin: 0 -15px; */ display: flex; align-items: center; } .best-sellers-track { display: flex; overflow-x: auto; gap: 3px; padding: 20px 0px 30px 15px; scrollbar-width: none; cursor: grab; user-select: none; } .best-sellers-track::-webkit-scrollbar { display: none; } /* کارت محصول پرفروش */ .best-seller-card { margin-right: 2%; min-width: 190px; background: #ebe1d9; /* border-radius: 10px; */ padding: 5PX 5PX 15PX 5PX; box-shadow: 0 10px 25px rgba(81, 81, 81, 0.1); transition: all 0.3s cubic-bezier(0 ,0 ,0.39 ,0.92); position: relative; border: 1px solid transparent; display: flex; flex-direction: column; height: 100%; /* ارتفاع کامل */ min-height: 100%; /* حداقل ارتفاع */ } .best-seller-card:hover { transform: translateY(-4px) translateX(0px); } .best-sellers-track:active { cursor: grabbing; } /* نشانگر کشیدن */ .drag-hint { text-align: center; color: #666; font-size: 0.9em; margin-top: 10px; } .drag-hint i { margin-left: 5px; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(0); } 40% { transform: translateX(-5px); } 60% { transform: translateX(-3px); } } /* بدج مخصوص محصولات پرفروش */ .bestseller-badge { font-family: 'titr', sans-serif; background: #ff0800; color: white; padding: 5px 12px; border-radius: 20px; font-size: 0.8em; font-weight: bold; position: absolute; top: 15px; right: 15px; z-index: 2; } .discount-badge { background: linear-gradient(45deg, #4ecdc4, #00bcd4); color: white; padding: 5px 10px; border-radius: 15px; font-size: 0.8em; position: absolute; top: 15px; left: 15px; z-index: 2; } /* قیمت */ .product-price { margin: 5px 0 15px 0; } .current-price { font-size: 1em; font-weight: bold; /* color: #ffffff ; */ font-family: Heavitas; } @media (min-width: 769px) { .current-price{ font-size: 22px; } .product-name{ font-size: 18px; font-family: var(--font-titr); } } /* واکنش‌گرایی */ @media (max-width: 768px) { .product-image{ width: 120px; } .product-name{ font-size: 15px; font-family: var(--font-titr); } .best-seller-card { min-width: 120px; } .l1{ width: 100px !important; } .l2{ width: 100px !important; } .section-header{ width: 100px; } } .section-header{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; text-align: center; } .l1{ width: 120px; } .l2{ width: 120px ; } /* --- تنظیمات رسپانسیو برای هدر و بخش لوگو تا سبد خرید --- */ @media (max-width: 768px) { .main-nav ul { flex-direction: column; /* منو زیر هم */ align-items: center; gap: 10px; } .search-box input { width: 100%; /* ورودی جستجو تمام عرض */ } .action-btn { font-size: 0.9rem; /* متن دکمه‌ها کوچکتر */ /* padding: 8px 12px; */ } .action-btn i { font-size: 16px; /* آیکون کوچکتر */ } .cart-count { font-size: 10px; padding: 2px 5px; top: -3px; right: -7px; } .hamburger { position: absolute; top: 15px; left: 15px; } } /* --- نوار پایین اپلیکیشن --- .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; border-top: 1px solid #ddd; display: flex; justify-content: space-around; align-items: center; padding: 8px 0; z-index: 1000; } .bottom-nav a { flex: 1; text-align: center; color: var(--text-color); font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 3px; } .bottom-nav a i { font-size: 18px; color: var(--primary-dark); } .bottom-nav a:hover { color: var(--primary-color); } .bottom-nav a:hover i { color: var(--primary-color); } @media (min-width: 769px) { .bottom-nav { display: none; } } .bottom-nav a.active { color: var(--primary-color); font-weight: bold; } .bottom-nav a.active i { color: var(--primary-color); } */ /* .tab-button.active:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); transition: box-shadow 0.25s ease-in-out; } */ .tab-button { background: transparent; color: #ffffff; border: 1.5px solid #d4af37; } .tab-button.active{ background: #352410; color: #ffffff; border: none; font-size: 22px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); transition: box-shadow 0.25s ease-in-out; } @media(max-width:600px) { .side-menu{ width: 270px !important; } } @media(max-width:400px) { .side-menu{ width: 250px !important; } } /* From Uiverse.io by risabbir */ .fullscreen-container { position: absolute; margin: 20px -40px 0 0px; display: flex; align-items: center; justify-content: flex-end; width: 100%; /* min-height: 100%; */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 20px 0; box-sizing: border-box; z-index: 50; } .radio-group-container { background-color: rgb(26 27 40 / 50%); padding: 10px 20px 0px 35px; border-radius: 20px; border: 1px solid rgb(255 255 255 / 20%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(12px); width: 90%; max-width: 200px; transition: all 0.3s ease; } .radio-label { display: flex; align-items: center; margin: 0px 0 20px 0;; cursor: pointer; position: relative; user-select: none; } .radio-input { display: none; } .radio-custom { width: 22px; height: 22px; background-color: transparent; border: 2px solid #5c5e79; border-radius: 50%; margin-right: 30px; position: relative; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .radio-custom::before { content: ""; position: absolute; width: 10px; height: 10px; background: #8a8b9f; border-radius: 50%; transform: scale(0); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .radio-custom::after { content: ""; position: absolute; width: 34px; height: 34px; border: 2px solid transparent; border-radius: 50%; border-top-color: #00a6ff; opacity: 0; transform: scale(0.8); transition: all 0.4s ease; } .radio-text { font-size: 1.2rem; font-weight: 400; color: #ffffff; transition: color 0.3s ease; margin: 0 0 0 20px; } /* Media Query for Mobile Responsiveness */ @media (max-width: 400px) { .radio-group-container { padding: 12px 27px; max-width: 180px; } .radio-label { margin: 20px 0; } .radio-text { font-size: 1.1rem; } } .fullscreen-container{ display: none; } .zarb{ height: 0; cursor: pointer; font-size: 45px; color: #b5b5b5; display: flex; margin: 20px 0px 32px 0; align-items: center; } .zarb:hover { color: #ffffff; transition: all 0.3s ease; text-shadow: 0 0 30px #ffffff, 0 0 80px rgb(255, 255, 255); } #shape{ color: #fff; } /* محتوای صفحه باید بلند باشد تا قابلیت اسکرول فراهم شود */ main { padding-top: 63px; padding-left: 0px !important; padding-right: 0px !important; text-align: center; direction: rtl; } /* --- هدر اصلی (تغییر برای پشتیبانی از اسکرول) --- */ .header-container { background-color: #fff7f1; border-bottom: 1px solid var(--border-color); padding: 10px 30px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: flex; justify-content: space-between; align-items: center; height: var(--header-height); position: fixed; /* ثابت کردن هدر */ top: 0; left: 0; width: 100%; z-index: 50; box-sizing: border-box; transition: transform var(--transition-speed) ease-in-out; /* اضافه شدن ترنزیشن برای پنهان/نمایان شدن */ } /* کلاسی که هنگام اسکرول به پایین اضافه می‌شود تا هدر را به بالا ببرد */ .header-hidden { transform: translateY(calc(var(--header-height) * -1)); } .logo { font-size: 32px; font-weight: 250; letter-spacing: 5px; color: #000; text-transform: uppercase; cursor: pointer; } @media (max-width: 440px) { .logo { display: none; } .logo1 { font-size: 28px; font-weight: 250; letter-spacing: 1px; color: #000; text-transform: uppercase; cursor: pointer; display: block; } } @media (max-width: 360px) { .logo1{ font-size: 22px; letter-spacing: 0px; } .icon-group i { font-size: 20px !important; } .header-container{ height: 55px; } main{ padding-top: 48px !important; } } /* @media (max-width: 320px) { .logo1{ font-size: 20px; } } */ .logo1{ font-weight: 250; } @media (min-width:441px) { .logo1{ display: none; } } .icon-group { display: flex; gap: 30px; align-items: center; } .icon-group i { font-size: 23px; color: #000; cursor: pointer; transition: color var(--transition-speed) ease; } .icon-group i:hover { color: #9c6b00; } .hamburger-icon-wrapper { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color var(--transition-speed) ease; border-radius: 50%; } .hamburger-icon-wrapper:hover { background-color: #f0f0f0; } .hamburger-icon { font-size: 18px; } /* --- استایل جدید برای دکمه جستجو --- */ .search-icon-wrapper { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1001; /* بالاتر از overlay */ } /* --- نوار جستجوی جدید (Overlay تمام صفحه) --- */ .search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.98); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; } .search-overlay.active { opacity: 1; visibility: visible; transition: opacity 0.4s ease; } .search-bar-expandable { position: relative; width: 90%; max-width: 800px; margin-top: 20vh; display: flex; align-items: center; border-bottom: 2px solid #000; padding: 10px 0; animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .search-input-full { width: 100%; border: none; outline: none; font-size: 24px; font-family: 'nazanin', sans-serif; padding: 10px 20px; background: transparent; direction: rtl; color: #000; } .search-input-full::placeholder { color: #aaa; font-size: 20px; } .search-close-btn { background: none; border: none; font-size: 32px; cursor: pointer; padding: 0 15px; color: #333; transition: transform 0.3s ease; order: -1; /* در سمت راست قرار بگیرد */ } .search-close-btn:hover { transform: rotate(90deg); color: #000; } /* مخفی کردن نوار جستجوی قبلی (اگر وجود داشت) */ .search-bar-container { display: none !important; } /* --- Overlay (باید بالاتر از نوار جستجو باشد) --- */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 900; opacity: 1; visibility: hidden; transition: opacity var(--transition-speed) ease, visibility 0s linear calc(var(--transition-speed) * 1.1); } .overlay.active { opacity: 1; visibility: visible; transition: all var(--transition-speed) ease-in; } /* --- استایل منوی کشویی (باید بالای همه چیز باشد) --- */ .side-menu { position: fixed; top: 0; right: 0; width: 350px; height: 100%; background-color: #fff7f1; z-index: 1000; /* بالاترین ز-ایندکس */ transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0; box-sizing: border-box; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; } .side-menu.open { transform: translateX(0); transition: all 0.5s ease; } /* ... (بقیه استایل‌های تب‌ها بدون تغییر می‌مانند) ... */ .tab-navigation { display: flex; border-bottom: 1px solid var(--border-color); } .tab-button { flex-grow: 1; padding: 14px 0; text-align: center; font-size: 17px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: border-color var(--transition-speed), color var(--transition-speed); color: #000000; } .tab-button.active { /* border: 1px solid var(--primary-color); */ color:#ffffff; } .tab-content { padding: 25px; overflow-y: auto; flex-grow: 1; } .tab-pane { display: none; } .tab-pane.active { display: block; } .tab-content h4 { margin-top: 0; font-size: 20px; font-weight: 600; margin-bottom: 20px; } .tab-content ul { list-style: none; padding: 0; } .tab-content li { color: #646464; padding: 12px 0; font-size: 20px; cursor: pointer; transition: color var(--transition-speed); } .tab-content li:hover { color: #000000; border-bottom: 2px #000 solid; } @media (max-width:441px){ .icon-group{ gap: 15px; } } /* نصب پیش‌فرض و ایزوله‌شده برای جلوگیری از تداخل */ .categories-section { direction: rtl; text-align: center; font-family: sans-serif; padding: 18px 0 7px 0; width: 100%; box-sizing: border-box; margin-top: 5px; border-radius: 7px; } @media (max-width:450px){ .categories-section{ padding:10px 0 0 0; } .categories-grid{ padding-bottom:0px !important; } } .cat-title { font-size: 30px; font-weight: 600; margin-bottom: 30px; color: #333; } @media(max-width:675px){ .categories-grid{ justify-content: flex-start !important; } } .categories-grid { display: flex; justify-content: center; /* تغییر از center به flex-start برای شروع اسکرول از راست */ align-items: flex-start; gap: 20px; max-width: 1600px; margin: 0 auto; overflow-x: auto; /* فعال‌سازی اسکرول افقی */ /* مخفی کردن اسکرول‌بار در مرورگرهای مختلف */ -ms-overflow-style: none; /* اینترنت اکسپلورر و اج */ scrollbar-width: none; /* فایرفاکس */ padding-bottom: 10px; /* کمی فاصله برای بهتر دیده شدن محتوا */ cursor: grab; /* نشانگر ماوس برای قابلیت کشیدن */ } /* مخفی کردن اسکرول‌بار در وب‌کیت (Chrome, Safari, Opera) */ .categories-grid::-webkit-scrollbar { display: none; } /* اضافه کردن استایل برای آیتم‌ها جهت جلوگیری از کوچک شدن */ .category-item { flex-shrink: 0; /* جلوگیری از کوچک شدن آیتم‌ها */ } .category-item { /* width: 160px; */ text-align: center; transition: all 0.3s ease; cursor: pointer; } /* .category-circle:hover { animation: spin 2s ; } @keyframes spin { 0% {rotate: 0deg;} 26% {rotate: 10deg;} 60%{rotate: -15deg;} 100% {rotate: 0deg;} } */ .category-circle { width: 90px; border-radius: 50%; background: #f8f8f8; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; overflow: visible; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); transition: all 0.4s ease; } /* .category-item:hover .category-circle { box-shadow: 0 6px 12px rgba(0,0,0,0.2); } */ .category-circle img { max-width: 100%; height: auto; object-fit: contain; transition: transform 0.35s ease; } .category-item p { font-size: 15px; font-weight: 500; color: #333; margin: 0; } @media (max-width: 600px) { .category-circle { width: 65px; /* height: 80px; */ } .category-item p { font-size: 12px; } } @media (max-width: 450px) { .category-circle { width: 55px; /* height: 70px; */ } .category-item p { font-size: 11px; } } .product-image{ border-radius: 10px ; /* box-shadow: 0 2px 5px 0px #00000094; */ } .product-features-section { margin-bottom: 10px; display: grid; grid-template-columns: repeat(4, 1fr); /* پیش‌فرض: ۴ ستون مساوی */ gap: 20px; /* فاصله بین آیتم‌ها */ max-width: 3000px; width: 100%; /* margin: 0 auto; */ padding: 0 30px ; /* background-color: #ffffff; */ border-radius: 7px; /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); */ } /* --- استایل هر جعبه ویژگی --- */ .feature-box { display: flex; align-items: center; padding: 10px; text-align: right; border: 0.8px solid #42311a; border-radius: 5px; transition: all 0.4s ease-in-out; /* انیمیشن نرم برای تغییرات */ height: 100px; /* حفظ ارتفاع ثابت برای تراز عالی */ } .feature-box:hover { transform: translateY(-5px) translate(-5px) ; box-shadow: 0 13px 25px rgb(51, 45, 16 , 0.3); border-color: #42311a; border-radius: 0px ; transition:0.5s ease-in-out; } /* --- استایل آیکون (برجسته) --- */ .icon-wrapper { margin-left: 15px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: #ffffff; /* آیکون سفید */ background-color: #8c5209; /* رنگ اصلی (بنفش تیره/صورتی) */ font-size: 26px; box-shadow: 0 4px 10px rgb(51, 45, 16 , 0.3); } /* --- استایل متن --- */ .text-content { display: flex; flex-direction: column; } .feature-title { font-size: 1.1em; font-weight: 700; color: #212529; margin: 0 0 4px 0; } .feature-subtitle { font-size: 0.9em; color: #6c757d; margin: 0; } /* ================================================= */ /* MEDIA QUERIES پیشرفته */ /* ================================================= */ /* ۱. تبلت‌ها و صفحات بزرگتر (Screen >= 1024px) */ @media (min-width: 1024px) { /* برای نمایشگرهای خیلی بزرگ، کمی فاصله را کم می‌کنیم تا فشرده‌تر به نظر برسد */ .feature-box { height: 90px; } } /* ۲. تبلت‌های متوسط و لپ‌تاپ‌ها (600px < Screen < 1024px) */ @media (max-width: 1023px) { .product-features-section { grid-template-columns: repeat(2, 1fr); /* ۲ ستون */ } .feature-box { /* در این حالت، ارتفاع را کمی بیشتر می‌کنیم چون عرض کمتر شده */ height: auto; } } /* ۳. موبایل و دستگاه‌های کوچک (Screen < 600px) */ @media (max-width: 599px) { .product-features-section { padding: 0px 10px 0 10px; gap: 10px; grid-template-columns: repeat(2, 1fr); font-size: 12px; } .icon-wrapper{ margin-left: 8px; } .yekta-social-banner { font-size: 11px; } .feature-box { height: auto; /* اجازه می‌دهیم ارتفاع بر اساس محتوا تنظیم شود */ } .icon-wrapper { width: 35px; height: 35px; font-size: 20px; } .feature-title { font-size: 1em; } .feature-subtitle { font-size: 0.85em; } } /* ============================ Yekta Keratin — Advanced CSS ============================ */ /* Design tokens */ :root { /* Palette */ --gold-50: #FFF6D9; --gold-100: #F7E5A8; --gold-300: #E2C86A; --gold-500: #D4AF37; --gold-700: #B5892B; --bg-900: #0B0B0B; --bg-800: #121212; --bg-700: #171717; --text-100: #FFFFFF; --text-300: #EDEDED; --text-500: #CFCFCF; /* Elevation */ --shadow-1: 0 1px 2px rgba(0,0,0,0.2); --shadow-2: 0 8px 24px rgba(0,0,0,0.35); --ring: 0 0 0 3px rgba(212,175,55,0.35); /* Typo & radius */ --font-sans: "IRANSans", "Vazirmatn", "Tahoma", system-ui, sans-serif; --radius-12: 12px; --radius-16: 16px; --radius-20: 20px; /* Motion */ --dur-100: 120ms; --dur-200: 220ms; --dur-300: 400ms; --ease-out: cubic-bezier(0.28, 0.84, 0.42, 1); /* Layout */ --container: 1100px; --pad-x: clamp(16px, 4vw, 32px); /* Gradients */ --gradient-bg: radial-gradient(1000px 600px at 90% 10%, rgba(212,175,55,0.09), transparent); --gradient-border: conic-gradient(from 180deg at 50% 50%, rgba(212,175,55,0.85), rgba(212,175,55,0.15), rgba(255,255,255,0.12), rgba(212,175,55,0.85)); } /* Dark/light auto adapt */ @media (prefers-color-scheme: light) { :root { --bg-900: #0E0E0E; /* keep brand mood even in light */ --text-100: #FAFAFA; --text-300: #EAEAEA; --text-500: #CDCDCD; } } /* Base section container */ .yekta-social-banner { padding-inline: var(--pad-x); padding-block: clamp(24px, 5vw, 40px); padding-bottom:10px; } /* Subtle vignette & sparkle layer */ .yekta-social-banner::before { content: ""; position: absolute; inset: -20% -10% -25% -10%; background: radial-gradient(600px 300px at 10% 90%, rgba(212,175,55,0.06), transparent 60%), radial-gradient(800px 500px at 100% 0%, rgba(255,255,255,0.05), transparent 65%); pointer-events: none; z-index: -1; filter: saturate(1.1); } /* Inner container */ .banner-inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; align-items: center; } /* Top area — fluid typography */ .banner-top { display: contents; grid-template-columns: 1.2fr 1fr; gap: clamp(12px, 2.5vw, 20px); align-items: start; margin-block-end: clamp(16px, 3.2vw, 28px); } .banner-title { margin: 0; font-weight: 800; letter-spacing: -0.015em; font-size: clamp(1.05rem, 1.6vw + 0.6rem, 1.35rem); text-shadow: 0 1px 0 rgba(0,0,0,0.35); } .banner-subtitle { margin: 0; font-size: clamp(0.92rem, 1.2vw + 0.5rem, 1.05rem); color: var(--text-500); padding-inline-start: 12px; border-inline-start: 2px solid var(--gold-500); backdrop-filter: saturate(1.05); } /* Bottom grid */ .banner-bottom { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(16px, 3vw, 24px); align-items: center; } /* Icon styling */ .icon { inline-size: clamp(20px, 2vw, 24px); block-size: clamp(20px, 2vw, 24px); color: var(--gold-500); filter: drop-shadow(0 2px 6px rgba(212,175,55,0.2)); transition: color var(--dur-100) var(--ease-out), transform var(--dur-100) var(--ease-out); } .icon { transform: translateY(-1px) scale(1.02); color: color-mix(in oklab, var(--gold-500) 82%, var(--gold-300)); } /* Username text */ .social-text { font-weight: 700; letter-spacing: -0.01em; font-size: clamp(0.92rem, 1vw + 0.5rem, 1rem); text-shadow: 0 1px 0 rgba(0,0,0,0.25); } /* Contact card — glassmorphism with subtle shine */ .contact { margin-top: 15px; position: relative; border-radius: var(--radius-20); padding: clamp(8px, 2.2vw, 0px) clamp(16px, 2.6vw, 22px); background:#fff; overflow: hidden; color: #000; } .contact::after { content: ""; position: absolute; inset-inline: -20%; inset-block-start: -60%; block-size: 120%; background: radial-gradient(1200px 200px at 10% 10%, rgba(212,175,55,0.08), transparent 55%); transform: rotate(-2deg); pointer-events: none; } /* Contact lines */ .contact-line { margin: 8px 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .contact-label { color: var(--gold-500); font-weight: 800; } .contact-value { color: var(--text-100); font-weight: 700; text-decoration: none; } .contact a.contact-value:hover { color: color-mix(in oklab, var(--gold-500) 88%, var(--gold-300)); text-decoration: underline; text-underline-offset: 3px; } /* Focus styles — accessible gold ring */ .social-item:focus-visible, .contact a:focus-visible { outline: none; box-shadow: var(--ring); } /* Motion preferences */ @media (prefers-reduced-motion: reduce) { .social-item, .icon { transition: none; } .social-item:hover { animation: none; } } /* Responsive layout (breakpoints + container queries) */ @media (max-width: 900px) { .banner-top, .banner-bottom { grid-template-columns: 1fr; } .banner-subtitle { border-inline-start: none; border-block-start: 2px solid var(--gold-500); padding-inline-start: 0; padding-block-start: 10px; margin-block-start: 8px; } } /* @container yekta (max-width: 700px) { .social-item { border-radius: var(--radius-12); } .icon { inline-size: 22px; block-size: 22px; } } */ /* Progressive enhancement: backdrop-filter where supported */ @supports (backdrop-filter: blur(6px)) { .social-item, .contact { backdrop-filter: blur(6px) saturate(1.6); } } /* RTL-friendly logical properties already used; ensure icon/text alignment in narrow widths */ @media (max-width: 500px) { .banner-title { font-size: clamp(1rem); } .banner-subtitle { font-size: 0.824rem; } .social-text { font-size: clamp(0.88rem, 2vw + 0.5rem, 0.95rem); } } /* Vazirmatn از قبل در لینک ترکیبی فونت‌ها در لود می‌شود */ :root { --pink: #ff4ecd; --purple: #6a5cff; --glass: rgba(255,255,255,0.08); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Vazirmatn', sans-serif; } /* ===== CURSOR GLOW ===== */ .cursor { position: fixed; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,78,205,.18), transparent 60%); transform: translate(-50%, -50%); z-index: 0; } /* ===== FOOTER ===== */ .footer { position: relative; padding: 30px 6% 40px ; background: radial-gradient(circle at center, #685929, #121212 100%); color: #fff; overflow: hidden; } .footer * { position: relative; /* z-index: 2; */ } /* top bar */ .footer-top { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; } .footer-top p { font-size: 14px; opacity: .8; } .socials { display: flex; gap: 14px; } .socials a { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; backdrop-filter: blur(14px); transition: .45s cubic-bezier(.2,.8,.2,1); } .socials a:hover { /* background: linear-gradient(135deg, var(--pink), var(--purple)); */ transform: translateY(-6px) scale(1.05); } /* grid */ .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* glass box */ .footer-box { background: #00000075; border-radius: 26px; padding: 32px; backdrop-filter: blur(10px); box-shadow: 0 0px 13px 0px rgb(0 0 0 / 50%); transition: all 0.3s ease; } .footer-box h3 { margin-bottom: 22px; font-size: 18px; } .footer-box p { font-size: 14px; opacity: .8; line-height: 1.9; } .footer-box ul { list-style: none; } .footer-box li { margin-bottom: 14px; } .footer-box a { text-decoration: none; color: #ddd; font-size: 15px; /* padding-right: 20px; */ position: relative; transition: .35s; } .footer-box a::before { color: #ffbf00; content: "›"; position: absolute; right: 0; opacity: 0; transition: .35s; font-size: 18px; } .footer-box a:hover { color: #fff; padding-right: 30px; border-radius: 0px; } .footer-box a:hover::before { opacity: 1; } /* bottom */ .footer-bottom { text-align: center; margin-top: 40px; font-size: 13px; opacity: .55; } /* ===== RESPONSIVE ===== */ @media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .footer { padding: 30px 3% 30px; } .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .footer-box{ border-radius: 15px; padding: 24px; } } /* @media (max-width:430px){ .footer-grid{ grid-template-columns: 1fr; } } */ /* Micro-interaction: shimmer on hover */ .footer-box:hover { transform: translateY(-5px); transition: all 0.3s ease; } .slide-image1 { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease; } .slide1 { width: 100%; height: 100%; } .luxury-slider1 { width: 100%; /* height: 100%; */ } .luxury-master-container1 { width: 100%; height: 100%; max-width: 3600px; position: relative; /* overflow: hidden; */ /* border-radius: 5px; */ } .all21{ display: flex; gap: 5px; width: 100%; } .all22{ display: flex; gap: 5px; width: 100%; } @media(max-width:700px) { .all4{ display: grid !important; } } .all4{ display: grid; /* gap: 5px; */ margin: 10px; } /* استایل برای discount badge */ .discount-badge { position: absolute; top: 10px; right: 10px; background: #ff4444; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: bold; } /* استایل برای old price */ .old-price { text-decoration: line-through; color: #999; font-size: 12px; margin-right: 8px; } /* استایل loading */ .fa-spinner { font-size: 24px; color: #666; } /* تنظیمات ریسپانسیو */ @media (max-width: 768px) { .product-link { width: 160px; } .product-name { font-size: 12px; /* height: 32px; */ } .current-price { font-size: 12px; } } @media (max-width: 480px) { .product-link { width: 140px; } } .section-header-wrapper { min-width: 140px; width: 140px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-left: 10px; margin-right: 15px; height: auto; } .slide-image1:hover{ transform: scale(0.97); } .search-submit-btn{ width: 160px; padding: 5px 4px 7px; background: #000; border: none; font-weight: 999; font-family: nazanin; } .section-header img { display: block; } .view-all-link { font-weight: 950; color: #fff; font-style: italic; font-size: 18px; text-decoration: none; white-space: nowrap; transition: all 0.3s; } .category-item :hover{ transform: scale(1.05); } .view-all-link:hover { transform: scale(1.05) ; } @media (max-width: 768px) { .section-header-wrapper { min-width: 100px; width: 100px; } .view-all-link { font-size: 14px; } } @media (max-width: 480px) { /* .l1 { width: 80px !important; } .l2 { width: 80px !important; } */ .view-all-link { font-size: 12px; } } #sliderContainer { -webkit-tap-highlight-color: transparent; } #sliderContainer img { pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; -webkit-touch-callout: none !important; } #sliderContainer, .slide-item { touch-action: pan-y pinch-zoom !important; user-select: none !important; -webkit-user-select: none !important; -webkit-touch-callout: none !important; } .banner-wrapper { overflow: hidden; } /* لود تنبل برای تصاویر */ img[loading="lazy"] { opacity: 0; transition: opacity 0.3s ease; } img[loading="lazy"].loaded { opacity: 1; } .img-es{ filter: drop-shadow(2px 4px 6px black); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-deep: #0F0A05; --bg-main: #1A1008; --bg-mid: #2C1A0E; --cream-light: #EDE3D0; --cream-main: #D9C9B0; --gold: #C4A882; --gold-warm: #A8895F; --brown-mid: #6B3F1F; --brown-light: #8B5A2B; } /* ─── SPLASH ────────────────────────────────────── */ #splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-main); z-index: 100; overflow: hidden; } /* grain texture overlay */ #splash::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.035; pointer-events: none; z-index: 1; } /* radial vignette */ #splash::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 0%, rgba(10,5,0,0.55) 100%); pointer-events: none; z-index: 1; } .splash-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0; } /* ── Logo ── */ .logo-wrap { display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(18px); animation: fadeUp 1.1s cubic-bezier(0.22,1,0.36,1) 0.4s forwards; } .logo-emblem { width: 80px; height: 80px; margin-bottom: 18px; } .logo-name { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: 0.14em; color: var(--cream-); text-transform: uppercase; line-height: 1; } .logo-tagline { font-family: 'Cormorant Garamond', serif; font-size: clamp(0.9rem, 1.5vw, 0.75rem); font-weight: 300; letter-spacing: 0.35em; color: var(--gold); text-transform: uppercase; margin-top: 5px; opacity: 0.90; } /* ── Divider ── */ .divider-wrap { width: 220px; margin: 15px auto 24px; display: flex; align-items: center; gap: 12px; opacity: 0; animation: fadeIn 0.7s ease 1.4s forwards; } .divider-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold-warm)); } .divider-line:last-child { background: linear-gradient(to left, transparent, var(--gold-warm)); } .divider-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; } /* ── Typing Text ── */ .typing-wrap { min-height: 2.4em; display: flex; align-items: center; justify-content: center; opacity: 0; animation: fadeIn 0.5s ease 1.6s forwards; } #typed-text { font-family: 'Cormorant Garamond', serif; /* font-size: clamp(1rem, 2.2vw, 1.35rem); */ font-size: 1.2rem !important; font-weight: 300; font-style: italic; color: var(--cream-main); letter-spacing: 0.06em; text-align: center; line-height: 1.5; margin-top: 10px; } #cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--gold); margin-right: 3px; vertical-align: middle; animation: blink 0.75s step-end infinite; } /* ── Gold underline signature ── */ .signature-line { width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 8px auto 0; border-radius: 2px; transition: width 0.9s cubic-bezier(0.22,1,0.36,1); } .signature-line.expand { width: 260px; } /* ── Loading bar ── */ .loading-bar-wrap { /* margin-top: 15px; */ position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: fadeIn 0.5s ease 2s forwards; } .loading-label { font-family: 'Cormorant Garamond', serif; font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold-warm); opacity: 0.7; } .loading-track { width: 120px; height: 1px; background: rgba(196,168,130,0.2); border-radius: 2px; overflow: hidden; /* margin-bottom: 10px; */ } .loading-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brown-mid), var(--gold)); border-radius: 2px; } /* ── Transition overlay ── */ /* #transition-overlay { position: fixed; inset: 0; background: var(--bg-deep); z-index: 200; opacity: 0; pointer-events: none; } */ .main-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(196,168,130,0.1); border-top: 1px solid rgba(196,168,130,0.1); position: relative; z-index: 1; } /* ── Keyframes ── */ @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } @keyframes blink { 50% { opacity: 0; } } @keyframes scrollPulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } } .bnr-outer5000 { width: 100%; } .bnr-ratio5000 { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; } .bnr-track5000 { position: absolute; inset: 0; display: flex; transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1); width: 400%; } .bnr-slide5000 { position: relative; width: 100%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .bnr-slide5000:nth-child(2) { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%); } .bnr-slide5000:nth-child(1) { background: linear-gradient(135deg, #f5f0eb 0%, #e8ddd4 50%, #f5f0eb 100%); } /* .bnr-slide5000:nth-child(3) { background: linear-gradient(135deg, #0d1b2a 0%, #1b2d42 50%, #0d1b2a 100%); } */ .bnr-slide5000:nth-child(3) { background: linear-gradient(135deg, #2a1a1a 0%, #3d2424 50%, #2a1a1a 100%); } .bnr-bgcirc5000 { position: absolute; border-radius: 50%; opacity: 0.07; pointer-events: none; } .bnr-slide5000:nth-child(2) .bnr-bgcirc5000:nth-child(1) { width: 55%; padding-top: 55%; background: #c9a97a; top: -10%; right: -8%; } .bnr-slide5000:nth-child(2) .bnr-bgcirc5000:nth-child(2) { width: 35%; padding-top: 35%; background: #c9a97a; bottom: -5%; left: -5%; } .bnr-slide5000:nth-child(1) .bnr-bgcirc5000:nth-child(1) { width: 60%; padding-top: 60%; background: #b07a5a; top: -20%; left: -10%; opacity: 0.06; } .bnr-slide5000:nth-child(1) .bnr-bgcirc5000:nth-child(2) { width: 30%; padding-top: 30%; background: #b07a5a; bottom: -5%; right: -5%; opacity: 0.08; } /*.bnr-slide5000:nth-child(3) */ .bnr-bgcirc5000:nth-child(1) { width: 50%; padding-top: 50%; background: #8fa8c8; top: -5%; left: -10%; } /* .bnr-slide5000:nth-child(3) */ .bnr-bgcirc5000:nth-child(2) { width: 40%; padding-top: 40%; background: #8fa8c8; bottom: -10%; right: -8%; } .bnr-slide5000:nth-child(3) .bnr-bgcirc5000:nth-child(1) { width: 55%; padding-top: 55%; background: #e8a0a0; top: -15%; right: -10%; } .bnr-slide5000:nth-child(3) .bnr-bgcirc5000:nth-child(2) { width: 25%; padding-top: 25%; background: #e8a0a0; bottom: -5%; left: 10%; } .bnr-decolines5000 { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .bnr-decolines5000::before { content: ''; position: absolute; border-radius: 50%; } .bnr-slide5000:nth-child(2) .bnr-decolines5000::before { width: 80%; padding-top: 80%; border: 1px solid rgba(201,169,122,0.12); top: 50%; right: -20%; transform: translateY(-50%); } .bnr-slide5000:nth-child(1) .bnr-decolines5000::before { width: 70%; padding-top: 70%; border: 1px solid rgba(176,122,90,0.12); top: 50%; left: -15%; transform: translateY(-50%); } /* .bnr-slide5000:nth-child(3) .bnr-decolines5000::before { width: 75%; padding-top: 75%; border: 1px solid rgba(143,168,200,0.12); top: 50%; right: -15%; transform: translateY(-50%); } */ .bnr-slide5000:nth-child(3) .bnr-decolines5000::before { width: 65%; padding-top: 65%; border: 1px solid rgba(232,160,160,0.12); top: 50%; left: -10%; transform: translateY(-50%); } .bnr-content5000 { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: 88%; height: 100%; gap: 4%; } .bnr-textblock5000 { flex: 1; display: flex; flex-direction: column; opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s; } .bnr-slide5000.bnr-active5000 .bnr-textblock5000 { opacity: 1; transform: translateX(0); } .bnr-eyebrow5000 { font-size: clamp(0.5rem, 1.1vw, 0.82rem); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: clamp(5px, 1.1vw, 13px); font-family: 'Montserrat', 'Segoe UI', sans-serif; } .bnr-slide5000:nth-child(2) .bnr-eyebrow5000 { color: #c9a97a; } .bnr-slide5000:nth-child(1) .bnr-eyebrow5000 { color: #8a5a3a; } /* .bnr-slide5000:nth-child(3) .bnr-eyebrow5000 { color: #7fa3c8; } */ .bnr-slide5000:nth-child(3) .bnr-eyebrow5000 { color: #d47070; } .bnr-headline5000 { font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-size: clamp(1.1rem, 3.5vw, 3rem); line-height: 1.15; font-weight: 700; margin-bottom: clamp(6px, 1.3vw, 16px); } .bnr-slide5000:nth-child(2) .bnr-headline5000 { color: #f5f0eb; } .bnr-slide5000:nth-child(1) .bnr-headline5000 { color: #1a1a1a; } /* .bnr-slide5000:nth-child(3) .bnr-headline5000 { color: #e8eef5; } */ .bnr-slide5000:nth-child(3) .bnr-headline5000 { color: #f5eeee; } .bnr-sub5000 { font-size: clamp(0.55rem, 1.1vw, 0.95rem); line-height: 1.7; max-width: 38ch; margin-bottom: clamp(10px, 1.8vw, 24px); font-family: 'Vazirmatn', 'Segoe UI', sans-serif; } .bnr-slide5000:nth-child(2) .bnr-sub5000 { color: rgba(245,240,235,0.7); } .bnr-slide5000:nth-child(1) .bnr-sub5000 { color: rgba(26,26,26,0.6); } /* .bnr-slide5000:nth-child(3) .bnr-sub5000 { color: rgba(232,238,245,0.65); } */ .bnr-slide5000:nth-child(3) .bnr-sub5000 { color: rgba(245,238,238,0.65); } .bnr-ctabtn5000 { display: inline-flex; align-items: center; gap: 8px; padding: clamp(7px, 1.2vw, 13px) clamp(14px, 2.5vw, 30px); border: none; border-radius: 50px; font-size: clamp(0.55rem, 1vw, 0.9rem); font-weight: 600; cursor: pointer; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; width: fit-content; letter-spacing: 0.04em; font-family: 'Vazirmatn', sans-serif; } .bnr-ctabtn5000:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .bnr-slide5000:nth-child(2) .bnr-ctabtn5000 { background: #c9a97a; color: #1a1a1a; } .bnr-slide5000:nth-child(1) .bnr-ctabtn5000 { background: #1a1a1a; color: #f5f0eb; } /* .bnr-slide5000:nth-child(3) .bnr-ctabtn5000 { background: #7fa3c8; color: #0d1b2a; } */ .bnr-slide5000:nth-child(3) .bnr-ctabtn5000 { background: #d47070; color: #fff; } .bnr-visual5000 { flex: 0 0 38%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.85); transition: opacity 0.9s ease 0.5s, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s; } .bnr-slide5000.bnr-active5000 .bnr-visual5000 { opacity: 1; transform: scale(1.8); } .bnr-viscirc5000 { width: clamp(80px, 20vw, 260px); height: clamp(80px, 20vw, 260px); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; } .img-banner-50{ border-radius: 50%; } .bnr-slide5000:nth-child(2) .bnr-viscirc5000 { background: rgba(201,169,122,0.12); } .bnr-slide5000:nth-child(1) .bnr-viscirc5000 { background: rgba(176,122,90,0.10); } /* .bnr-slide5000:nth-child(3) .bnr-viscirc5000 { background: rgba(127,163,200,0.12); } */ .bnr-slide5000:nth-child(3) .bnr-viscirc5000 { background: rgba(212,112,112,0.12); } .bnr-viscirc5000::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; } .bnr-slide5000:nth-child(2) .bnr-viscirc5000::before { border: 1px solid rgba(201,169,122,0.25); } .bnr-slide5000:nth-child(1) .bnr-viscirc5000::before { border: 1px solid rgba(176,122,90,0.20); } /* .bnr-slide5000:nth-child(3) .bnr-viscirc5000::before { border: 1px solid rgba(127,163,200,0.20); } */ .bnr-slide5000:nth-child(3) .bnr-viscirc5000::before { border: 1px solid rgba(212,112,112,0.20); } .bnr-icon5000 { width: 55%; height: 55%; } .bnr-progressbar5000 { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; } .bnr-progressfill5000 { height: 100%; width: 0%; transition: width linear; } .bnr-slide5000:nth-child(2) .bnr-progressfill5000 { background: #c9a97a; } .bnr-slide5000:nth-child(1) .bnr-progressfill5000 { background: #8a5a3a; } /* .bnr-slide5000:nth-child(3) .bnr-progressfill5000 { background: #7fa3c8; } */ .bnr-slide5000:nth-child(3) .bnr-progressfill5000 { background: #d47070; } .bnr-navbtn5000 { position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; width: clamp(28px, 3.8vw, 50px); height: clamp(28px, 3.8vw, 50px); border-radius: 50%; border: none; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; } .bnr-navbtn5000:hover { background: rgba(255,255,255,0.28); transform: translateY(-50%) scale(1.08); } .bnr-navprev5000 { right: 14px; } .bnr-navnext5000 { left: 14px; } .bnr-navbtn5000 svg { width: 40%; height: 40%; } .bnr-dots5000 { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; gap: 7px; align-items: center; } .bnr-dot5000 { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); border: none; cursor: pointer; transition: all 0.3s ease; padding: 0; } .bnr-dot5000.bnr-dotactive5000 { width: 22px; border-radius: 4px; background: rgba(255,255,255,0.9); } .bnr-counter5000 { position: absolute; top: clamp(8px, 1.8vw, 20px); left: clamp(12px, 2.2vw, 26px); z-index: 30; font-size: clamp(0.5rem, 0.85vw, 0.78rem); font-weight: 600; letter-spacing: 0.15em; color: rgba(255,255,255,0.45); font-family: 'Montserrat', sans-serif; } @media (prefers-reduced-motion: reduce) { .bnr-track5000 { transition: none; } .bnr-textblock5000, .bnr-visual5000 { transition: none; opacity: 1; transform: none; } .bnr-progressfill5000 { transition: none; } } .img-div{ display: flex; gap: 20px; justify-content: center; } .div-div{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; margin-bottom: 15px; } .img-p{ display: flex; flex-direction: column; } .img-p img{ width: 100px; border-radius:50%; overflow:hidden; } .div-div h2{ color:382b16 ; } .img-kol123{ width: 300px; } .all-blog-all{ direction: rtl; text-align: center; font-family: sans-serif; padding: 5px 10px 7px 0; width: 100%; box-sizing: border-box; } .all-blog{ display: flex; justify-content: flex-start; align-items: flex-start; gap: 10px; max-width: 1600px; padding-left:10px; margin: 0 auto; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 10px; cursor: grab; } .one-blog{ width: 220px; /* background-color: #ffffff; */ border-radius: 15px; overflow: hidden; box-shadow: -1px 3px 5px 0px rgb(0 0 0 / 35%); } .c-item-all{ text-align: center; transition: all 0.3s ease; cursor: pointer; flex-shrink: 0; } .one-blog img { max-width: 100%; object-fit: contain; transition: transform 0.35s ease; /* filter: drop-shadow(0px 0px 5px); */ } .one-blog h3{ padding: 3px 0 10px 0; font-size: 14px; } @media (min-width:450px){ .one-blog{ width: 250px; } .one-blog h3{ font-size: 18px; } } @media (min-width:630px){ .one-blog{ width: 350px; } .one-blog h3{ font-size: 22px; } }