@font-face { font-family: 'Peyda'; src: url('../fonts/PeydaFaNumWeb-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Peyda'; src: url('../fonts/PeydaFaNumWeb-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } html { margin: 0 !Important; /* چیدمان پایه‌ی سایت راست‌به‌چپ است؛ این قانون پشتیبانِ dir="rtl" روی است تا حتی اگر آن اتربیوت چاپ نشود، صفحه از راست چیده شود. */ direction: rtl; } body { direction: rtl; text-align: right; } /*! * Iconly icon font. Generated by Iconly: https://iconly.io/ */ @font-face { font-display: auto; font-family: "Iconly"; font-style: normal; font-weight: 400; src: url(../font/iconly.woff2); } [class*=" icon-"], [class=icon], [class^=icon-] { display: inline-block; font-family: "Iconly" !important; font-weight: 400; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased } .icon-user:before { content: "\e000" } .icon-user-circle:before { content: "\e001" } .icon-up:before { content: "\e002" } .icon-star:before { content: "\e003" } .icon-star-fill:before { content: "\e004" } .icon-sort:before { content: "\e005" } .icon-sms:before { content: "\e006" } .icon-search:before { content: "\e007" } .icon-right:before { content: "\e008" } .icon-right-rounded:before { content: "\e009" } .icon-right-down:before { content: "\e00a" } .icon-minus:before { content: "\e00b" } .icon-menu:before { content: "\e00c" } .icon-location:before { content: "\e00d" } .icon-list:before { content: "\e00e" } .icon-left:before { content: "\e00f" } .icon-left-up:before { content: "\e010" } .icon-home:before { content: "\e011" } .icon-filter:before { content: "\e012" } .icon-down:before { content: "\e013" } .icon-diploma:before { content: "\e014" } .icon-dicount:before { content: "\e015" } .icon-check:before { content: "\e016" } .icon-cat:before { content: "\e017" } .icon-cart:before { content: "\e018" } .icon-call:before { content: "\e019" } .icon-calendar:before { content: "\e01a" } .icon-calendar-2:before { content: "\e01b" } .icon-box:before { content: "\e01c" } .icon-arrow-up:before { content: "\e01d" } .icon-add:before { content: "\e01e" } * { list-style: none; } body { font-family: "peyda"; font-size: 1rem; line-height: 2; color: var(--black); } img { height: auto; /* بدون !important تا ارتفاع‌های دیزاین‌سیستم جدید کار کند */ max-width: 100%; } a { text-decoration: none !important; color: unset; } ul { list-style: none; padding: 0; margin: 0; } h1 { font-size: 1.6rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; } h4 { font-size: 1rem; } h5 { font-size: 0.9rem; } h6 { font-size: 0.8rem; } .text-justify { text-align: justify; } .oneline { display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 1; -moz-line-clamp: 1; -ms-line-clamp: 1; line-clamp: 1; overflow: hidden; } .towline { display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 2; -moz-line-clamp: 2; -ms-line-clamp: 2; line-clamp: 2; overflow: hidden; } .threeline { display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 3; -moz-line-clamp: 3; -ms-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* =============================== 4) کامنت‌ها — نمایش ستونی + ریپلای تمیز =============================== */ /* ظرف کلی بخش دیدگاه‌ها */ .comments { margin-top: 2.2rem; border-top: 1px solid rgba(0, 0, 0, .06); padding-top: 1.5rem; } /* ساختار پایه لیست‌ها */ .comment-list, .children { list-style: none; margin: 0; padding: 0; } /* هر کامنت: به‌صورت بلوک (ستونی) */ .comment { display: block; padding: 18px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); } .comment:last-child { border-bottom: none; } /* هد (آواتار + نام + تاریخ) */ .comment .comment-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #6b7280; margin-bottom: 8px; } .comment .comment-author .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); } .comment .comment-author .fn { font-weight: 800; color: #111827; font-size: 14px; } .comment .comment-metadata a { color: inherit; text-decoration: none; } .comment .comment-metadata a:hover { text-decoration: underline; } /* متن کامنت */ .comment .comment-content { font-size: 15px; line-height: 1.9; color: #1f2937; margin-top: 6px; } /* لینک پاسخ */ .comment .reply { margin-top: 10px; } .comment .reply .comment-reply-link { font-size: 13px; border: 1px solid rgba(0, 0, 0, .1); padding: 4px 12px; border-radius: 999px; text-decoration: none; } .comment .reply .comment-reply-link:hover { background: #f3f4f6; } /* حالت نویسنده پست */ .bypostauthor > .comment-body, .bypostauthor > .comment { border-inline-start: 3px solid #10b981; padding-inline-start: 12px; background: linear-gradient(180deg, #ffffff, #fbfffd); border-radius: 8px; } /* ── ریپلای‌ها (children) : خطوط راهنما و فرورفتگی منطقی ── */ .children { margin-top: 10px; padding-inline-start: 18px; /* فرورفتگی منطقی برای RTL/LTR */ border-inline-start: 2px dashed #e5e7eb; } .children .comment { border-bottom: none; /* داخل شاخه فرعی خط جداکننده نمی‌خواهیم */ padding: 14px 0 6px 0; } /* عمق‌های بیشتر: کمی کم‌رنگ‌تر */ .children .children { border-inline-start: 2px dashed #f0f0f0; padding-inline-start: 16px; } /* رفع بی‌نظمی مارک‌آپ‌های مختلف تم‌ها */ .comment-body { margin: 0; } .comment-meta + .comment-content { margin-top: 4px; } /* پیام در انتظار تایید */ .comment-awaiting-moderation { display: inline-block; margin-top: 6px; font-size: 12px; color: #b45309; background: #fff7ed; border: 1px solid #fdba74; padding: 2px 8px; border-radius: 8px; } /* فرم دیدگاه‌ها — طبق خواسته شما تغییری نمی‌دهیم، فقط فاصله‌ی بالا تا لیست را استاندارد می‌کنیم */ .comment-respond { margin-top: 1.75rem; } .woocommerce p.stars a::before { color: #fdba74; } .woocommerce #review_form #respond .form-submit input { background: unset !important; font-size: 16px !important; color: var(--primary) !important; text-decoration: underline; text-underline-offset: 0.5rem; padding: 0; line-height: 2; } h2.woocommerce-Reviews-title { font-size: 1rem; margin-top: 3rem; margin-bottom: 2rem; } .woocommerce #reviews #comments ol.commentlist li img.avatar { display: none; } .woocommerce #reviews #comments ol.commentlist li .comment-text { margin: 0; } .woocommerce #reviews #comments ol.commentlist { padding: 0; } span.woocommerce-review__dash { display: none; } .commentlist p.meta { display: flex; width: 100%; justify-content: space-between; margin: 0.5rem 0 !important; border-bottom: 1px solid var(--g4); } .woocommerce .star-rating { float: unset !important; color: #fdba74; } strong.woocommerce-review__author { font-size: 14px; color: var(--primary); } /* =============================== 5) ریزبهینه‌سازی‌های ریسپانسیو =============================== */ @media (max-width: 991.98px) { .single-blog .info { font-size: 13px; } .post-content { font-size: 15.5px; } .single-blog .single-excerpt { font-size: 15px; } .post-content { font-size: 15px; } } /* ظرف فرم دیدگاه */ .comment-respond { margin-top: 2.25rem; border: 1px solid rgba(0, 0, 0, .06); border-radius: 14px; padding: 16px; background: #fff; } /* عنوان فرم */ .comment-reply-title { margin: 0 0 10px 0; font-size: 18px; font-weight: 800; } /* متن‌های راهنما و لاگین */ .comment-notes, .logged-in-as { font-size: 13px; color: #6b7280; margin-bottom: 10px; } /* گروه‌های فرم */ .comment-form p { margin-bottom: 10px; } /* لیبل‌ها */ .comment-form label { display: block; font-size: 16px; color: var(--black); margin-bottom: 6px; } /* فیلدهای ورودی */ .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; background: #fff; } /* textarea بزرگ‌تر */ .comment-form textarea { min-height: 140px; resize: vertical; } /* حالت فوکوس */ .comment-form input:focus, .comment-form textarea:focus { border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(147, 197, 253, .25); } /* کوکی‌ها و چک‌باکس */ .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; } .comment-form-cookies-consent input { width: 16px; height: 16px; } /* دکمه ارسال */ .form-submit input[type="submit"] { display: inline-block; border: none; background: #111827; color: #fff; border-radius: 999px; padding: 10px 18px; font-size: 14px; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease, background .2s ease; } .form-submit input[type="submit"]:hover { background: #0f172a; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); } .form-submit input[type="submit"]:active { transform: translateY(1px); } div#wpadminbar { position: relative; } .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--primary); color: white; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { margin: 0; text-decoration: none; line-height: 1; font-size: 1em; font-weight: 400; padding: unset; min-width: unset; height: 2rem; width: 2rem; display: inline-flex !important; justify-content: center; align-items: center; background: var(--g4); border-radius: 50%; } .woocommerce nav.woocommerce-pagination ul { display: inline-block; white-space: nowrap; padding: 0; clear: both; border: unset; border-left: unset; margin: 1px; margin-top: 2rem; } .woocommerce nav.woocommerce-pagination ul li { border-left: unset; padding: 0; margin: 0; float: unset; display: inline; overflow: hidden; } .woocommerce nav.woocommerce-pagination ul { display: flex; gap: .5rem; white-space: nowrap; padding: 0; clear: both; border: unset; border-left: unset; margin: 1px; justify-content: center; margin-top: 2em; } .order-by-wrapper { width: max-content; background: var(--g4); display: flex; align-items: center; justify-content: center; padding: .75rem 1rem; border-radius: 12px; gap: .5rem; } .woocommerce .woocommerce-ordering select { vertical-align: top; background: unset; border: unset; } .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 1px solid var(--g3, #cacccf); border-radius: 10px; background: #fff; color: var(--secondary, #2D3034); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color .2s ease, color .2s ease; margin: 0 !important; } /* ========================= WooCommerce Checkout Fix ========================= */ .woocommerce-checkout { background: var(--g4); } .woocommerce-checkout .woocommerce { max-width: 1200px; margin: 0 auto; padding: 30px 15px 60px; } /* پیام‌ها */ .woocommerce-checkout .woocommerce-info, .woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-error { background: var(--g3); border: none; border-radius: 14px; color: var(--primary); padding: 14px 18px; margin-bottom: 20px; } .woocommerce-checkout .woocommerce-error { background: #fff1f1; color: #b42318; } /* فرم اصلی */ .woocommerce-checkout form.checkout { } .woocommerce-checkout .woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before { position: static; margin-top: 4px; } /* ستون اطلاعات مشتری */ .woocommerce-checkout #customer_details { flex: 1 1 700px; background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 10px 28px rgba(0, 56, 77, 0.08); } /* ستون جمع سفارش */ .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { flex: 0 0 320px; width: 320px; } .woocommerce-checkout #order_review_heading { background: var(--g4); border-radius: 18px 18px 0 0; padding: 20px; margin: 0; box-shadow: 0 10px 28px rgba(0, 56, 77, 0.08); color: var(--primary); font-size: 24px; font-weight: 800; width: 100%; } .woocommerce-checkout #order_review { background: #fff; border-radius: 0 0 18px 18px; padding: 16px 20px 20px; box-shadow: 0 10px 28px rgba(0, 56, 77, 0.08); position: sticky; top: 20px; width: 100%; } /* عنوان‌ها */ .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout .woocommerce-shipping-fields h3, .woocommerce-checkout .woocommerce-additional-fields h3 { color: var(--primary); font-size: 24px; font-weight: 800; margin: 0 0 20px; } /* اصلاح ساختار col2-set */ .woocommerce-checkout .col2-set { display: block; width: 100%; margin: 0; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; max-width: 100%; margin: 0; } /* حذف کامل ستون یادداشت سفارش از ظاهر */ .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout #order_comments_field, .woocommerce-checkout textarea#order_comments { display: none !important; } /* فرم‌ها */ .woocommerce-checkout .form-row { margin-bottom: 16px; } .woocommerce-checkout .form-row label { display: block; color: var(--black); font-weight: 700; margin-bottom: 8px; } .woocommerce-checkout .form-row .required { color: var(--secondary); } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select, .woocommerce-checkout .select2-container--default .select2-selection--single { width: 100%; min-height: 48px; border: 1px solid var(--g4); border-radius: 12px; background: #f7f7f7; color: var(--black); padding: 0 14px; transition: all 0.25s ease; } .woocommerce-checkout .form-row textarea { min-height: 120px; padding: 14px; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row textarea:focus, .woocommerce-checkout .form-row select:focus, .woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(0, 175, 239, 0.15); background: #fff; } /* select2 */ .woocommerce-checkout .select2-container--default .select2-selection--single { display: flex; align-items: center; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: normal; padding-right: 0; padding-left: 0; color: var(--black); } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; } /* جدول سفارش */ .woocommerce-checkout table.shop_table { border: none; border-radius: 14px; overflow: hidden; background: var(--g4); margin-bottom: 20px; } .woocommerce-checkout table.shop_table thead th { background: var(--primary); color: #fff; padding: 14px 12px; font-weight: 800; border: none; } .woocommerce-checkout table.shop_table td, .woocommerce-checkout table.shop_table th { border-top: 1px solid var(--g4); padding: 14px 12px; } .woocommerce-checkout table.shop_table tbody td, .woocommerce-checkout table.shop_table tfoot td, .woocommerce-checkout table.shop_table tfoot th { color: var(--black); background: #fff; } .woocommerce-checkout table.shop_table .order-total th, .woocommerce-checkout table.shop_table .order-total td { color: var(--primary); font-weight: 900; font-size: 17px; } /* باکس پرداخت */ .woocommerce-checkout #payment { background: var(--g4); border-radius: 16px; overflow: hidden; } .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid rgba(0, 56, 77, 0.1); padding: 16px; margin: 0; } .woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 10px; font-weight: 700; color: var(--black); } .woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: 12px; padding: 14px; color: var(--g1); margin-top: 10px; } .woocommerce-checkout #payment div.form-row { padding: 16px; } /* دکمه ثبت سفارش */ .woocommerce-checkout #place_order { width: 100%; background: var(--secondary); color: #fff; border: none; border-radius: 14px; padding: 15px 20px; font-size: 16px; font-weight: 800; transition: all 0.25s ease; } .woocommerce-checkout #place_order:hover { background: var(--primary); transform: translateY(-2px); } /* دکمه‌های عمومی */ .woocommerce-checkout .button, .woocommerce-checkout button.button, .woocommerce-checkout input.button, .woocommerce-checkout a.button { background: var(--primary); color: #fff; border: none; border-radius: 12px; padding: 12px 18px; font-weight: 700; } .woocommerce-checkout .button:hover, .woocommerce-checkout button.button:hover, .woocommerce-checkout input.button:hover, .woocommerce-checkout a.button:hover { background: var(--secondary); color: #fff; } /* RTL */ .rtl.woocommerce-checkout table.shop_table th, .rtl.woocommerce-checkout table.shop_table td, .rtl.woocommerce-checkout .form-row label, .rtl.woocommerce-checkout #customer_details, .rtl.woocommerce-checkout #order_review, .rtl.woocommerce-checkout #order_review_heading { text-align: right; } /* موبایل */ @media (max-width: 992px) { .woocommerce-checkout form.checkout { flex-direction: column; } .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { width: 100%; flex: 1 1 100%; } .woocommerce-checkout #order_review { position: static; } } @media (max-width: 768px) { .woocommerce-checkout .woocommerce { padding: 20px 12px 40px; } .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review { padding: 16px; } .woocommerce-checkout #order_review_heading { padding: 16px 16px 0; font-size: 21px; } .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout .woocommerce-shipping-fields h3 { font-size: 21px; } section.wr-offer-section { margin: 0; } section.main-header.bg-main.text-white { display: none; } } /* WooCommerce Cart Page */ .woocommerce-cart { background: var(--g4); } .woocommerce-cart .site-main, .woocommerce-cart main { padding: 40px 0; } /* Cart wrapper */ .woocommerce-cart .woocommerce { max-width: 1180px; margin: 0 auto; padding: 0 16px; } /* Notices */ .woocommerce-cart .woocommerce-message, .woocommerce-cart .woocommerce-info, .woocommerce-cart .woocommerce-error { border: none; border-radius: 14px; background: var(--g4); color: var(--primary); padding: 16px 20px; box-shadow: 0 8px 24px rgba(0, 56, 77, 0.08); } .woocommerce-cart .woocommerce-message::before, .woocommerce-cart .woocommerce-info::before { color: var(--secondary); } /* Cart table */ .woocommerce-cart table.shop_table { border: none; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 12px 32px rgba(0, 56, 77, 0.08); } .woocommerce-cart table.shop_table th { background: var(--primary); color: #fff; font-weight: 700; padding: 18px 16px; border: none; } .woocommerce-cart table.shop_table td { border-top: 1px solid var(--g4); padding: 18px 16px; color: var(--black); vertical-align: middle; } /* Product image */ .woocommerce-cart table.cart img { width: 76px; border-radius: 14px; } /* Product name */ .woocommerce-cart table.cart .product-name a { color: var(--primary); font-weight: 700; text-decoration: none; } .woocommerce-cart table.cart .product-name a:hover { color: var(--secondary); } /* Remove product */ .woocommerce-cart a.remove { width: 32px; height: 32px; line-height: 30px; border-radius: 50%; background: #fff; color: var(--g2) !important; border: 1px solid var(--g4); transition: 0.25s ease; } .woocommerce-cart a.remove:hover { background: #ffeded; color: #d63638 !important; } /* Quantity */ .woocommerce-cart .quantity .qty { width: 82px; height: 42px; border-radius: 12px; border: 1px solid var(--g4); background: var(--g4); color: var(--black); text-align: center; font-weight: 600; } .woocommerce-cart .quantity .qty:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(0, 175, 239, 0.16); } /* Coupon */ .woocommerce-cart .coupon { display: flex; gap: 10px; align-items: center; margin-left: 1rem; } .woocommerce-cart .coupon input.input-text { min-width: 220px; height: 46px; border-radius: 12px; border: 1px solid var(--g4); background: var(--g4); color: var(--black); padding: 0 14px; } .woocommerce-cart .coupon input.input-text:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(0, 175, 239, 0.16); } /* Buttons */ .woocommerce-cart .button, .woocommerce-cart button.button, .woocommerce-cart input.button, .woocommerce-cart a.button { border: none; border-radius: 14px; background: var(--primary); color: #fff; padding: 14px 22px; font-weight: 700; transition: 0.25s ease; } .woocommerce-cart .button:hover, .woocommerce-cart button.button:hover, .woocommerce-cart input.button:hover, .woocommerce-cart a.button:hover { background: var(--secondary); color: #fff; transform: translateY(-2px); } .woocommerce-cart .button:disabled, .woocommerce-cart button.button:disabled, .woocommerce-cart input.button:disabled { background: var(--g3); color: #fff; opacity: 1; } /* Cart totals */ .woocommerce-cart .cart-collaterals { margin-top: 30px; } .woocommerce-cart .cart_totals { background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 12px 32px rgba(0, 56, 77, 0.08); } .woocommerce-cart .cart_totals h2 { color: var(--primary); font-size: 24px; font-weight: 800; margin-bottom: 18px; } .woocommerce-cart .cart_totals table.shop_table { box-shadow: none; border-radius: 14px; background: var(--g4); } .woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td { background: transparent; color: var(--black); border-top: 1px solid var(--g4); } .woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { color: var(--primary); font-size: 18px; font-weight: 800; } /* Checkout button */ .woocommerce-cart .wc-proceed-to-checkout { padding: 20px 0 0; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; border-radius: 16px; background: var(--secondary); color: #fff; padding: 16px 24px; font-size: 17px; font-weight: 800; text-align: center; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--primary); color: #fff; } /* Cross sells */ .woocommerce-cart .cross-sells { background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 12px 32px rgba(0, 56, 77, 0.08); } .woocommerce-cart .cross-sells h2 { color: var(--primary); font-weight: 800; } /* Empty cart */ .woocommerce-cart .cart-empty { background: #fff; border-radius: 18px; padding: 30px; color: var(--primary); text-align: center; box-shadow: 0 12px 32px rgba(0, 56, 77, 0.08); } .woocommerce-cart .return-to-shop { text-align: center; } /* Responsive */ @media (max-width: 768px) { .woocommerce-cart .woocommerce { padding: 0 12px; } .woocommerce-cart table.shop_table { border-radius: 14px; } .woocommerce-cart table.shop_table td { padding: 14px 12px; } .woocommerce-cart table.cart img { width: 64px; } .woocommerce-cart .coupon { flex-direction: column; align-items: stretch; } .woocommerce-cart .coupon input.input-text, .woocommerce-cart .coupon .button { width: 100%; } .woocommerce-cart .cart_totals { padding: 18px; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { font-size: 16px; } .woocommerce-cart .button:disabled, .woocommerce-cart button.button:disabled, .woocommerce-cart input.button:disabled { float: unset; } } td.product-quantity { display: flex !important; align-items: center !important; justify-content: space-between !important; } td.product-quantity .quantity { display: flex; align-items: center; gap: .5rem; } /* RTL support */ .rtl.woocommerce-cart table.shop_table th, .rtl.woocommerce-cart table.shop_table td { text-align: right; } .rtl.woocommerce-cart .coupon { float: right; } .woocommerce-cart { background: var(--g4); } .woocommerce-cart .site-main, .woocommerce-cart main { padding: 40px 0; } /* Cart wrapper */ .woocommerce-cart .woocommerce { max-width: 1180px; margin: 0 auto; padding: 0 16px; } /* Notices */ .woocommerce-cart .woocommerce-message, .woocommerce-cart .woocommerce-info, .woocommerce-cart .woocommerce-error { border: none; border-radius: 14px; background: var(--g4); color: var(--primary); padding: 16px 20px; box-shadow: 0 8px 24px rgba(0, 56, 77, 0.08); } .woocommerce-cart .woocommerce-message::before, .woocommerce-cart .woocommerce-info::before { color: var(--secondary); } /* Cart table */ .woocommerce-cart table.shop_table { border: none; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 12px 32px rgba(0, 56, 77, 0.08); } .woocommerce-cart table.shop_table th { background: var(--primary); color: #fff; font-weight: 700; padding: 18px 16px; border: none; } .woocommerce-cart table.shop_table td { border-top: 1px solid var(--g4); padding: 18px 16px; color: var(--black); vertical-align: middle; } /* Product image */ .woocommerce-cart table.cart img { width: 76px; border-radius: 14px; } /* Product name */ .woocommerce-cart table.cart .product-name a { color: var(--primary); font-weight: 700; text-decoration: none; } .woocommerce-cart table.cart .product-name a:hover { color: var(--secondary); } /* Remove product */ .woocommerce-cart a.remove { width: 32px; height: 32px; line-height: 30px; border-radius: 50%; background: #fff; color: var(--g1) !important; border: 1px solid var(--g4); transition: 0.25s ease; } .woocommerce-cart a.remove:hover { background: #ffeded; color: #d63638 !important; } /* Quantity */ .woocommerce-cart .quantity .qty { width: 82px; height: 42px; border-radius: 12px; border: 1px solid var(--g4); background: var(--g4); color: var(--black); text-align: center; font-weight: 600; } .woocommerce-cart .quantity .qty:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(0, 175, 239, 0.16); } /* Coupon */ .woocommerce-cart .coupon { display: flex; gap: 10px; align-items: center; } .woocommerce-cart .coupon input.input-text { min-width: 220px; height: 46px; border-radius: 12px; border: 1px solid var(--g4); background: var(--g4); color: var(--black); padding: 0 14px; } .woocommerce-cart .coupon input.input-text:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(0, 175, 239, 0.16); } /* Buttons */ .woocommerce-cart .button, .woocommerce-cart button.button, .woocommerce-cart input.button, .woocommerce-cart a.button { border: none; border-radius: 14px; background: var(--primary); color: #fff; padding: 14px 22px; font-weight: 700; transition: 0.25s ease; } .woocommerce-cart .button:hover, .woocommerce-cart button.button:hover, .woocommerce-cart input.button:hover, .woocommerce-cart a.button:hover { background: var(--secondary); color: #fff; transform: translateY(-2px); } .woocommerce-cart .button:disabled, .woocommerce-cart button.button:disabled, .woocommerce-cart input.button:disabled { background: var(--g3); color: #fff; opacity: 1; } /* Cart totals */ .woocommerce-cart .cart-collaterals { margin-top: 30px; } .woocommerce-cart .cart_totals { background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 12px 32px rgba(0, 56, 77, 0.08); } .woocommerce-cart .cart_totals h2 { color: var(--primary); font-size: 24px; font-weight: 800; margin-bottom: 18px; } .woocommerce-cart .cart_totals table.shop_table { box-shadow: none; border-radius: 14px; background: var(--g4); } .woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td { background: transparent; color: var(--black); border-top: 1px solid var(--g4); } .woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { color: var(--primary); font-size: 18px; font-weight: 800; } /* Checkout button */ .woocommerce-cart .wc-proceed-to-checkout { padding: 20px 0 0; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; border-radius: 16px; background: var(--secondary); color: #fff; padding: 16px 24px; font-size: 17px; font-weight: 800; text-align: center; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--primary); color: #fff; } /* Cross sells */ .woocommerce-cart .cross-sells { background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 12px 32px rgba(0, 56, 77, 0.08); } .woocommerce-cart .cross-sells h2 { color: var(--primary); font-weight: 800; } /* Empty cart */ .woocommerce-cart .cart-empty { background: #fff; border-radius: 18px; padding: 30px; color: var(--primary); text-align: center; box-shadow: 0 12px 32px rgba(0, 56, 77, 0.08); } .woocommerce-cart .return-to-shop { text-align: center; } /* Responsive */ @media (max-width: 768px) { .woocommerce-cart .woocommerce { padding: 0 12px; } .woocommerce-cart table.shop_table { border-radius: 14px; } .woocommerce-cart table.shop_table td { padding: 14px 12px; } .woocommerce-cart table.cart img { width: 64px; } .woocommerce-cart .coupon { flex-direction: column; align-items: stretch; } .woocommerce-cart .coupon input.input-text, .woocommerce-cart .coupon .button { width: 100%; } .woocommerce-cart .cart_totals { padding: 18px; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { font-size: 16px; } .woocommerce-cart .button:disabled, .woocommerce-cart button.button:disabled, .woocommerce-cart input.button:disabled { float: unset; } } td.product-quantity { display: flex !important; align-items: center !important; justify-content: space-between !important; } td.product-quantity .quantity { display: flex; align-items: center; gap: .5rem; } /* RTL support */ .rtl.woocommerce-cart table.shop_table th, .rtl.woocommerce-cart table.shop_table td { text-align: right; } .rtl.woocommerce-cart .coupon { float: right; } input.plus, input.minus { background: var(--primary); color: white; border: unset; padding: .25rem .5rem; border-radius: .3rem; } button[type="submit"].button[name="update_cart"] { border: none; border-radius: 14px; color: #fff; padding: 14px 22px !important; font-weight: 700; transition: 0.25s ease; } /* ========================================================= Blog Archive ========================================================= */ .blog-hero { padding: 84px 0 72px; background: radial-gradient(circle at 82% 18%, rgba(91, 192, 190, .16), transparent 30%), linear-gradient(110deg, var(--g6) 0%, var(--white) 56%, var(--g6) 100%); overflow: hidden; } .blog-hero h1 { font-size: clamp(1.85rem, 3.5vw, 3.1rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.22; max-width: 780px; margin: 0 auto .8rem; } .blog-hero p { color: var(--g2); max-width: 620px; margin-inline: auto; font-size: .97rem; line-height: 1.78; } .blog-archive-section { padding: 56px 0 72px; } .blog-grid { max-width: 1264px; margin-inline: auto; } .blog-archive-empty { padding: 60px 0; text-align: center; color: var(--g3); } /* کارت آرشیو — کل کارت یک لینک است و همه‌ی کارت‌ها هم‌قد می‌مانند. */ .archive-card { height: 100%; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--g5); border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .archive-card:hover { transform: translateY(-3px); border-color: var(--secondary); box-shadow: 0 14px 34px rgba(58, 80, 107, .12); } /* تصویر گوشه‌های خودش را گرد نمی‌کند؛ overflow کارت این کار را می‌کند. با .archive-card نوشته می‌شود چون .blog-card-image پایین‌تر در همین فایل تعریف شده و با تخصص برابر بر آن غلبه می‌کرد. */ .archive-card .archive-card__image { border-radius: 0; aspect-ratio: 1.44 / 1; flex: 0 0 auto; } .archive-card .archive-card__image img { transition: transform .45s ease; } .archive-card:hover .archive-card__image img { transform: scale(1.05); } .archive-card__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px 18px 18px; } .card-badge { width: fit-content; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(91, 192, 190, .16); color: var(--primary); font-size: 11px; font-weight: 700; } .archive-card .blog-card-title { margin: 0 0 8px; font-size: 15px; } .archive-card:hover .blog-card-title { color: var(--primary); } .archive-card__excerpt { margin: 0 0 14px; color: var(--g2); font-size: 13px; line-height: 1.95; } /* margin-top:auto فوتر همه‌ی کارت‌ها را هم‌تراز نگه می‌دارد. */ .archive-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--g5); } .archive-card__read, .archive-card__more { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; } .archive-card__read { color: var(--g3); } .archive-card__read i { color: var(--secondary); font-size: 15px; } .archive-card__more { color: var(--primary); font-weight: 600; } .archive-card__more i { font-size: 15px; transition: transform .25s ease; } .archive-card:hover .archive-card__more i { transform: translateX(-3px); } @media (max-width: 575.98px) { .blog-archive-section { padding: 32px 0 48px; } .archive-card__body { padding: 14px 14px 16px; } } /* Pagination */ .blog-pagination { margin-top: 52px; } .blog-pagination .nav-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--g5); border-radius: 12px; font-size: .9rem; color: var(--g1); background: var(--white); text-decoration: none; } .blog-pagination .page-numbers:hover, .blog-pagination .page-numbers.current { background: var(--primary); border-color: var(--primary); color: var(--white); } .blog-pagination .prev.page-numbers, .blog-pagination .next.page-numbers { padding: 0 20px; font-size: .88rem; font-weight: 500; } .blog-pagination .dots { border: 0; background: transparent; min-width: auto; color: var(--g4); cursor: default; pointer-events: none; } .section-eyebrow { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: rgba(91, 192, 190, .16); border-radius: 32px; padding: .35rem .85rem; font-size: .82rem; margin-bottom: 1.1rem; } /* ===================================================== Blog Single Page ===================================================== */ .article-hero { padding: 76px 0; background: linear-gradient(90deg, rgba(0, 0, 0, .76), rgba(0, 0, 0, .28)), center/cover no-repeat; background-color: #1e1e1e; color: #fff; } .article-hero h1 { font-size: 2rem; line-height: 2; font-weight: 780; letter-spacing: -.05em; margin-bottom: 1rem; } .article-hero p { max-width: 680px; color: rgba(255, 255, 255, .88); line-height: 1.85; } .article-hero .hero-actions { justify-content: flex-start; margin-top: 26px; } .article-hero .section-eyebrow--hero { color: #fff; background: var(--primary); } .breadcrumb-mini { display: flex; flex-wrap: wrap; gap: 8px; color: rgba(255, 255, 255, .74); margin-bottom: 1rem; font-size: .88rem; } .breadcrumb-mini a { color: rgba(255, 255, 255, .82); } .breadcrumb-mini a:hover { color: #fff; } .hero-camera { width: 100%; border-radius: 16px; box-shadow: 0 24px 55px rgba(0, 0, 0, .11) } /* Article layout */ .article-section { background: #fff; } .article-layout { display: grid; grid-template-columns: 270px minmax(0, 820px); justify-content: center; gap: 44px; } .toc-sidebar { position: sticky; top: 98px; align-self: start; } .toc-card { border: 1px solid var(--g3); border-radius: 12px; padding: 22px; box-shadow: 0 10px 28px rgba(0, 0, 0, .05); } .toc-card h2 { font-size: 1rem; font-weight: 750; margin-bottom: 14px; } .toc-card a, #post-toc a { display: block; color: #4b5563; padding: 0.25rem 0; border-bottom: 1px solid var(--g3); font-size: .8rem; } .toc-card a:last-child, #post-toc a:last-child { border-bottom: 0; } .toc-card a:hover, #post-toc a:hover { color: var(--primary); } /* Article content */ .article-content { min-width: 0; } .article-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: calc(100% - 32px); margin: -26px auto 36px; padding: 7px; border: 1px solid var(--primary-2, rgba(209, 212, 217, 0.65)); border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 18px 45px var(--card-shadow, rgba(19, 19, 19, 0.08)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; z-index: 3; } .article-meta__item { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border-radius: 999px; color: var(--g2); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; background: transparent; } .article-meta__item i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--g6); color: var(--primary); font-size: 14px; line-height: 1; } .article-meta__item:not(:last-child) { border-inline-end: 1px solid var(--g5); border-radius: 0; } .article-meta__item a { color: var(--secondary); text-decoration: none; transition: color 0.2s ease; } .article-meta__item a:hover { color: var(--primary); } .article-meta__item--category { color: var(--secondary); } .article-meta__item--category i { background: color-mix(in srgb, var(--secondary), transparent 88%); color: var(--secondary); } @media (max-width: 768px) { .article-meta { margin: -20px auto 30px; border-radius: 18px; justify-content: flex-start; width: calc(100% - 32px); max-width: none; } .article-meta__item { flex: 1 1 auto; justify-content: center; } .article-meta__item:not(:last-child) { border-inline-end: 0; } } @media (max-width: 480px) { .article-meta { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px; border-radius: 18px; margin: -16px 16px 28px; width: auto; } .article-meta__item { justify-content: flex-start; min-height: 38px; padding: 0 10px; background: var(--g6); } } .article-content h2 { font-size: 1.15rem; font-weight: 750; letter-spacing: -.025em; margin: 42px 0 16px; } .article-content h3 { font-size: 1.05rem; font-weight: 750; margin: 28px 0 12px; } .article-content h4 { font-size: 1rem; font-weight: 600; margin: 28px 0 12px; } .article-content h5 { font-size: .9rem; font-weight: 600; margin: 28px 0 12px; } .article-content h6 { font-size: 0.8rem; font-weight: 500; margin: 28px 0 12px; } .article-content p { color: #4b5563; line-height: 1.9; font-size: 0.9rem; margin-bottom: 1rem; } /* Feature callout (product_callout shortcode) */ .feature-callout, .download-banner { margin: 34px 0; background: var(--g4); border-radius: 16px; padding: 1.2rem 1.75rem; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; align-items: center; } .callout-label { color: var(--primary); font-weight: 700; font-size: .85rem; display: inline-block; margin-bottom: .6rem; background: white; padding: 0.5rem 0.75rem; border-radius: 12px; } .feature-callout h3, .download-banner h3 { font-size: 1.35rem; margin-top: 0; } .feature-callout ul, .download-banner ul { color: #4b5563; } .feature-callout img, .download-banner img { width: 100%; border-radius: 12px; margin: 0 !important; } /* Article table */ .article-table { width: 100%; border-collapse: collapse; margin-bottom: 28px; border: 1px solid var(--g3); } .article-table th, .article-table td { padding: 14px 16px; border-bottom: 1px solid var(--g3); } .article-table th { background: #f0f0f0; } .article-table tr:nth-child(even) td { background: #fafafa; } /* Article image */ .article-image { margin: 38px 0; } .article-image img { width: 100%; border-radius: 16px; } .article-image figcaption { color: var(--g2); font-size: .9rem; margin-top: 10px; } /* Check list */ .check-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; } .check-list li { color: #4b5563; display: flex; gap: 10px; align-items: center; } .check-list i { color: var(--primary); } /* FAQ accordion */ .faq-accordion { margin-top: 22px; } .faq-accordion .accordion-button:not(.collapsed) { background: rgb(224, 242, 243); color: var(--primary); } /* Blog single contact section */ .bs-contact-section { padding: 84px 0 94px; background: var(--g4); } .bs-contact-form { max-width: 1060px; margin-inline: auto; background: #fff; border-radius: 16px; padding: clamp(26px, 4vw, 58px); box-shadow: 0 24px 55px rgba(0, 0, 0, .11) } .bs-contact-form .form-control { min-height: 52px; border: 1px solid #c5ccd6; border-radius: 0; box-shadow: none; font-size: .9rem; padding: .85rem 1rem; } .bs-contact-form textarea.form-control { min-height: 88px; } .bs-contact-form .form-control:focus { border-color: rgba(255, 37, 43, .55); box-shadow: 0 0 0 .2rem rgba(255, 37, 43, .08); } /* Chat widget */ .chat-widget { position: fixed; right: 26px; bottom: 26px; width: 54px; height: 54px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; z-index: 1001; box-shadow: 0 12px 30px rgba(206, 231, 232, 0.85); font-size: 1.45rem; } .chat-bubble { position: fixed; right: 92px; bottom: 26px; width: min(320px, calc(100vw - 130px)); background: #fff; border-radius: 12px; padding: 18px 42px 18px 18px; box-shadow: 0 24px 55px rgba(0, 0, 0, .11); z-index: 1001; display: none; } .chat-bubble.show { display: block; } .chat-bubble strong { display: block; margin-bottom: .3rem; } .chat-bubble p { margin: 0; color: var(--g2); font-size: .9rem; } .chat-close { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: #555; font-size: 1.15rem; } /* Blog single responsive */ @media (max-width: 991.98px) { .article-hero { text-align: center; padding: 58px 0; } .article-hero .hero-actions { justify-content: center; } .article-layout { grid-template-columns: 1fr; } .toc-sidebar { position: static; } .toc-card { display: none; } .feature-callout, .download-banner { grid-template-columns: 1fr; } .bs-contact-section { padding: 64px 0; } } @media (max-width: 575.98px) { .article-meta { gap: 10px; } .bs-contact-form { box-shadow: 0 16px 42px rgba(0, 0, 0, .07); } .chat-bubble { right: 16px; bottom: 92px; width: calc(100vw - 32px); } .chat-widget { right: 18px; bottom: 22px; } } .breadcrumb-wrap span:last-of-type { color: black; } .oneline { display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 1; -moz-line-clamp: 1; -ms-line-clamp: 1; line-clamp: 1; overflow: hidden; } .towline { display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 2; -moz-line-clamp: 2; -ms-line-clamp: 2; line-clamp: 2; overflow: hidden; } .threeline { display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 3; -moz-line-clamp: 3; -ms-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* ========================================================= Blog Single – Sticky bar + Author card + Trusted swiper ========================================================= */ /* Sticky article bar */ .sticky-blog-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; background: rgba(255, 255, 255, .97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--g3); padding: .6rem 0; transform: translateY(-110%); transition: transform .3s ease; pointer-events: none; } .sticky-blog-bar.is-visible { transform: translateY(0); pointer-events: auto; } .sticky-blog-title { font-size: .88rem; font-weight: 600; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; } .sticky-blog-bar .btn-sm { padding: .42rem 1rem; font-size: .82rem; border-radius: 32px; } /* Article reading progress bar */ .reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--primary); z-index: 1200; transition: width .1s linear; } /* Trusted logos swiper */ .blog-trusted-swiper { padding: 4px 0 8px; } .trusted-slide { display: flex; align-items: center; justify-content: center; } .trusted-slide img { width: auto; object-fit: contain; filter: grayscale(1); opacity: .72; } .trusted-slide img:hover { filter: none; opacity: 1; } /* Author card in sidebar */ .author-card { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 18px; border: 1px solid var(--g3); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .05); } .author-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--g3); } .author-info { display: flex; flex-direction: column; gap: 2px; } .author-label { font-size: .75rem; color: var(--g2); text-transform: uppercase; letter-spacing: .05em; } .author-name { font-size: .9rem; font-weight: 600; color: var(--black); } /* TOC active link */ #post-toc a.active, .toc-card a.active { color: var(--primary); font-weight: 600; } /* Section eyebrow white variant (hero context) */ .section-eyebrow--hero { color: #fff; background: rgba(255, 37, 43, .92); } .section-eyebrow--hero a { color: inherit; } /* Article hero: dark fallback; full background set inline from ACF */ .article-hero { background-color: #1e1e1e; background-size: cover; background-position: center; background-repeat: no-repeat; } /* Tables inside article content */ .post-content table { width: 100%; border-collapse: collapse; margin-bottom: 28px; border: 1px solid var(--g3); font-size: .93rem; } .post-content table th, .post-content table td { padding: 12px 16px; border-bottom: 1px solid var(--g3); text-align: left; } .post-content table th { background: #f0f0f0; font-weight: 600; } .post-content table tr:nth-child(even) td { background: #fafafa; } @media (max-width: 991.98px) { .sticky-blog-bar .sticky-blog-title { display: none; } .sticky-blog-bar .d-flex.gap-2 { width: 100%; justify-content: center; } .author-card { display: none; } } @media (max-width: 575.98px) { .sticky-blog-bar .btn-sm { flex: 1; text-align: center; } } .accordion-button::after { margin: 0; margin-right: auto; } /* ----- Wrapper ----- */ body .gform_wrapper { margin: 0; padding: 30px; background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .gform-theme--foundation .gform_fields { row-gap: 0.5rem !important; } input#gform_submit_button_1 { display: block; width: 100%; background: var(--primary); } /* ----- Form Title & Description ----- */ body .gform_heading .gform_title { font-size: 28px; font-weight: 700; margin-bottom: 10px; text-align: center; color: #111; } body .gform_heading .gform_description { text-align: center; color: #666; font-size: 15px; margin-bottom: 25px; } /* ----- Fields ----- */ body .gform_wrapper .gfield { margin-bottom: 20px; } body .gform_wrapper .gfield_label { display: block; margin-bottom: 6px; font-weight: 600; color: #333; } /* ----- Inputs, Selects, Textarea ----- */ body .gform_wrapper input[type="text"], body .gform_wrapper input[type="email"], body .gform_wrapper input[type="tel"], body .gform_wrapper input[type="url"], body .gform_wrapper input[type="number"], body .gform_wrapper input[type="password"], body .gform_wrapper textarea, body .gform_wrapper select { width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid #ddd; border-radius: 12px; background: #fafafa; transition: all .2s ease; } body .gform_wrapper input:focus, body .gform_wrapper textarea:focus, body .gform_wrapper select:focus { border-color: #d8bd65; /* رنگ برند شما */ box-shadow: 0 0 0 3px rgba(216, 189, 101, 0.35); background: #fff; outline: none; } /* ----- Placeholders ----- */ body .gform_wrapper ::placeholder { color: #999; } /* ----- Submit Button ----- */ body .gform_wrapper .gform_footer input[type="submit"], body .gform_wrapper .gform_page_footer input[type="button"], body .gform_wrapper .gform_page_footer input[type="submit"] { display: inline-block; background: #d8bd65; /* طلایی برند */ border: none; color: #000; font-weight: 600; padding: 12px 26px; font-size: 16px; border-radius: 12px; cursor: pointer; transition: all .25s ease; } body .gform_wrapper .gform_footer input[type="submit"]:hover, body .gform_wrapper .gform_page_footer input[type="submit"]:hover { background: #c2a94d; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } /* ----- Error Messages ----- */ body .gform_wrapper .gform_validation_errors { border: 1px solid #dc3545; background: #f8d7da; color: #842029; padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; } body .gform_wrapper .validation_message { color: #dc3545; font-size: 13px; margin-top: 4px; } /* ----- Success Confirmation ----- */ body .gform_confirmation_message { border: 1px solid #198754; background: #d1e7dd; color: #0f5132; padding: 14px 18px; border-radius: 10px; font-weight: 500; font-size: 15px; text-align: center; margin-top: 20px; } .contact-image-wrapper { height: 100%; width: 100%; border-radius: 1rem; background-size: cover !important; background-position: center center !important; } /* ========================================================================== AJAX Product Search — trigger button + modal + live results ========================================================================== */ /* desktop trigger (looks like a search field) */ .header-search.search-modal-trigger { display: inline-flex; align-items: center; gap: 8px; min-width: 230px; height: 40px; padding: 0 16px; border: unset; border-radius: 14px; background: unset; font-size: 14px; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; } button.btn-close { margin-left: unset !important; margin-right: auto !important; } .header-search.search-modal-trigger i { font-size: 20px; } /* modal shell */ .search-modal .modal-content { border: 0; border-radius: 18px; overflow: hidden; } .search-modal .modal-header { padding: 1rem 1.25rem .5rem; } .search-modal .modal-body { padding: .5rem 1.25rem 1.5rem; } /* input */ .search-wrapper { position: relative; } .search-wrapper__icon { position: absolute; inset-inline-start: 16px; top: 26px; transform: translateY(-50%); color: var(--g2); font-size: 20px; pointer-events: none; } .search-input { width: 100%; height: 52px; padding: 0 48px; border: 1px solid var(--g3); border-radius: 12px; background: #fff; color: var(--secondary); font-size: 15px; outline: none; transition: border-color .2s ease; } .search-input:focus { border-color: var(--primary); } .search-input::-webkit-search-cancel-button { -webkit-appearance: none; } /* results */ .ajax-search-results { display: none; margin-top: 14px; max-height: 58vh; overflow-y: auto; scrollbar-width: thin; } .ajax-search-results .no-result { margin: 0; padding: 1.5rem 0; text-align: center; color: var(--g1); font-size: 14px; } .search-section-label { margin: 16px 0 8px; font-size: 13px; font-weight: 800; color: var(--secondary); } .search-section-label:first-child { margin-top: 4px; } .search-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } .search-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--g3); border-radius: 999px; color: var(--secondary); font-size: 13px; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; } .search-badge:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .search-badge--brand img { height: 22px; width: auto; border-radius: 4px; } .ajax-search-results ul { list-style: none; margin: 0; padding: 0; } .ajax-search-results ul li + li { border-top: 1px solid var(--g4); } .ajax-search-results ul li a { border-radius: 10px; transition: background .2s ease; } .ajax-search-results ul li a:hover { background: #f7f9f9; } .filter-wrapper { width: 100%; } /* لوپ محصولات: تبدیل چیدمان float پیش‌فرض ووکامرس به گرید هم‌ارتفاع تا کارت‌ها بدون بهم‌ریختگی در ردیف‌های منظم چیده شوند. */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0 0 2rem !important; padding: 0 !important; list-style: none !important; } /* حذف کلیرفیکس float ووکامرس که در گرید فاصلهٔ اضافه ایجاد می‌کند */ .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none !important; display: none !important; } /* سلول فقط جای کارت است؛ قاب، شعاع و سایه از خودِ .product-card می‌آید، وگرنه کارت دو بار قاب می‌گرفت. */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 100% !important; margin: 0 !important; padding: 0; float: none !important; clear: none !important; border: 0; background: transparent; display: flex; } .woocommerce ul.products li.product > .product-card, .woocommerce-page ul.products li.product > .product-card { width: 100%; } @media (max-width: 991.98px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } } /* روی موبایل هم دو ستون می‌ماند: کارت در همین اندازه طراحی شده. */ @media (max-width: 575.98px) { .woocommerce ul.products, .woocommerce-page ul.products { gap: .75rem; } } @media (max-width: 575.98px) { .wmz-discount-badge { min-width: 38px; padding: 3px 7px; font-size: 12px; } } ins span.woocommerce-Price-currencySymbol { font-weight: 100; margin-right: 0.3rem; } button.slide-nav-next, button.slide-nav-prev { background: unset; border: unset; font-size: 32px; padding: 0; line-height: 1; width: 35px; height: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--black); transform: translateX(-70%); } button.slide-nav-prev { transform: translateX(70%); } .product-control-wrapper { position: absolute; top: 40%; left: 0; display: flex; justify-content: space-between; width: 100%; z-index: 999; } /* موبایل: فلش‌ها در دو طرف اسلایدر (چپ و راست) روی خود اسلایدر قرار می‌گیرند */ @media (max-width: 767.98px) { .product-control-wrapper { position: absolute; top: 40%; left: 0; right: 0; width: 100%; justify-content: space-between; gap: 0; margin-top: 0; /* فقط خود دکمه‌ها کلیک‌پذیر باشند تا سواایپ اسلایدر مختل نشود */ pointer-events: none; } .product-control-wrapper button.slide-nav-next, .product-control-wrapper button.slide-nav-prev { transform: none; pointer-events: auto; width: 34px; height: 34px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .product-control-wrapper button.slide-nav-prev { margin-right: 2px; } .product-control-wrapper button.slide-nav-next { margin-left: 2px; } .product-control-wrapper button.slide-nav-next i, .product-control-wrapper button.slide-nav-prev i { font-size: 24px; line-height: 1; } } section.product .swiper-slide, section.tabs .swiper-slide { padding-bottom: 1.5rem; } .service-icon-wrapper { background: var(--primary); line-height: 1; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; color: white; border-radius: 8px; } .wr-products-tabs { width: max-content; margin: 0 auto; border-radius: 100px; } .wr-products-tabs .nav-link { color: var(--black); border-radius: 8px; transition: 0.5s linear; } .wr-products-tabs .nav-link.active, .wr-products-tabs .nav-link:hover { background: var(--primary) !important; color: white !important; } /* موبایل: جلوگیری از اسکرول افقی کل صفحه؛ تب‌ها داخل خودشان اسکرول شوند */ @media (max-width: 767.98px) { .wr-products-tabs { width: 100%; max-width: 100%; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .wr-products-tabs::-webkit-scrollbar { display: none; } .wr-products-tabs .nav-item, .wr-products-tabs .nav-link { flex: 0 0 auto; white-space: nowrap; } } .tb-items { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon title" "text text"; align-items: center; gap: 3px 10px; } .tb-items span { grid-area: icon; width: 8px; height: 8px; background: var(--secondary); border: 4px solid #fae7cc; display: block; box-sizing: content-box; border-radius: 50%; } .tb-items b { grid-area: title; } .tb-items p { grid-area: text; margin: 0; } /* Product Callout */ .product-callout { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; margin: 36px 0; padding: 28px; border: 1px solid color-mix(in srgb, var(--g4), transparent 45%); border-radius: 24px; background: radial-gradient(circle at top right, color-mix(in srgb, var(--primary), transparent 86%), transparent 34%), linear-gradient(135deg, var(--white) 0%, var(--g6) 100%); box-shadow: 0 18px 45px color-mix(in srgb, var(--black), transparent 92%); overflow: hidden; } .product-callout::before { content: ""; position: absolute; inset-inline-start: 0; top: 24px; bottom: 24px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary), var(--black) 16%)); } .product-callout__media { display: flex; align-items: center; justify-content: center; min-height: 170px; padding: 22px; border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g4), transparent 55%); } .product-callout__image { max-width: 100%; height: auto; object-fit: contain; transition: transform 0.25s ease; } .product-callout:hover .product-callout__image { transform: scale(1.04); } .product-callout__content { min-width: 0; } .product-callout__badge { display: inline-flex; align-items: center; width: fit-content; margin-bottom: 12px; padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--primary), transparent 90%); color: var(--primary); font-size: 13px; font-weight: 700; line-height: 1; } .product-callout__title { margin: 0 0 12px; color: var(--black); font-size: clamp(20px, 2vw, 26px); font-weight: 900; line-height: 1.65; letter-spacing: -0.02em; } .product-callout__price { display: inline-flex; align-items: center; margin-bottom: 18px; color: var(--primary); font-size: 20px; font-weight: 900; } .product-callout__price del { margin-inline-end: 8px; color: var(--g3); font-size: 14px; font-weight: 500; } .product-callout__price ins { text-decoration: none; } .product-callout__features { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; } .product-callout__features li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-radius: 14px; background: color-mix(in srgb, var(--white), transparent 18%); border: 1px solid color-mix(in srgb, var(--g4), transparent 55%); color: var(--g1); font-size: 14px; } .product-callout__features li::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--primary), transparent 88%); color: var(--primary); font-size: 13px; font-weight: 900; } .product-callout__features span { color: var(--g2); font-weight: 600; } .product-callout__features strong { margin-inline-start: auto; color: var(--black); font-weight: 800; text-align: left; } .product-callout__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary), var(--black) 14%)); color: var(--white) !important; font-size: 15px; font-weight: 800; text-decoration: none !important; box-shadow: 0 12px 24px color-mix(in srgb, var(--primary), transparent 78%); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .product-callout__button:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 16px 30px color-mix(in srgb, var(--primary), transparent 72%); } .product-callout__button svg { transition: transform 0.2s ease; } .product-callout__button:hover svg { transform: translateX(-3px); } /* Download Banner */ .download-banner { position: relative; display: grid; grid-template-columns: 1fr 260px; gap: 30px; align-items: center; margin: 36px 0; padding: 30px; border-radius: 26px; border: 1px solid color-mix(in srgb, var(--g4), transparent 45%); background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--primary), transparent 84%), transparent 32%), linear-gradient(135deg, var(--white) 0%, var(--g6) 100%); box-shadow: 0 20px 48px color-mix(in srgb, var(--black), transparent 92%); overflow: hidden; } .download-banner::before { content: ""; position: absolute; inset-inline-start: 0; top: 26px; bottom: 26px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary), var(--black) 16%)); } .download-banner__content { position: relative; z-index: 1; min-width: 0; } .download-banner__badge { display: inline-flex; align-items: center; width: fit-content; margin-bottom: 12px; padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--primary), transparent 90%); color: var(--primary); font-size: 13px; font-weight: 800; line-height: 1; } .download-banner__title { margin: 0 0 10px; color: var(--black); font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; line-height: 1.55; letter-spacing: -0.02em; } .download-banner__title strong, .download-banner__title span { color: var(--primary); } .download-banner__desc { max-width: 560px; margin: 0 0 22px; color: var(--g2); font-size: 15px; font-weight: 500; line-height: 2; } .download-banner__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary), var(--black) 14%)); color: var(--white) !important; font-size: 15px; font-weight: 850; text-decoration: none !important; box-shadow: 0 12px 24px color-mix(in srgb, var(--primary), transparent 78%); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .download-banner__button:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 16px 30px color-mix(in srgb, var(--primary), transparent 72%); } .download-banner__button svg { transition: transform 0.2s ease; } .download-banner__button:hover svg { transform: translateX(-3px); } .download-banner__media { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 170px; padding: 12px; border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g4), transparent 55%), 0 14px 30px color-mix(in srgb, var(--black), transparent 92%); overflow: hidden; } .download-banner__image { width: 100%; max-width: 240px; height: auto; border-radius: 18px; object-fit: cover; transition: transform 0.25s ease; } .download-banner:hover .download-banner__image { transform: scale(1.04); } /* Responsive */ @media (max-width: 768px) { .product-callout, .download-banner { grid-template-columns: 1fr; gap: 22px; padding: 24px; border-radius: 22px; text-align: right; } .product-callout::before, .download-banner::before { top: 0; bottom: auto; inset-inline-start: 22px; inset-inline-end: 22px; width: auto; height: 4px; } .download-banner__media { order: -1; } .product-callout__media, .download-banner__media { min-height: 150px; } .download-banner__image { max-width: 100%; } .product-callout__button, .download-banner__button { width: 100%; } } @media (max-width: 480px) { .product-callout, .download-banner { padding: 20px; } .download-banner__title { font-size: 21px; } .download-banner__desc { font-size: 14px; } .product-callout__features li { align-items: flex-start; flex-wrap: wrap; } .product-callout__features strong { width: 100%; text-align: right; margin-inline-start: 36px; } } .wr-purchase-note { padding: 10px 12px; border: 1px solid var(--g5); border-radius: 16px; background: var(--g6); } ul.product-info-list { margin: 0; padding-right: 0.5rem; list-style: none; color: var(--g1); font-size: 13px; line-height: 2; } ul.product-info-list li:before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; margin-left: 0.5rem; } header.custom-products-archive-header { background: var(--primary-1); padding: 2rem 1rem 1rem 1rem; border-radius: 12px; text-align: center; position: relative; margin-bottom: 2rem; } header.custom-products-archive-header:before { background: white; height: 1rem; width: 15%; display: block; position: absolute; top: 0; left: 50%; content: ''; transform: translateX(-50%); border-radius: 0 0 1rem 1rem; } .term-description { padding: 2rem; border: 1px solid var(--g4); border-radius: 12px; } .term-description h2 { font-weight: bold; } .term-description ul li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: .5rem; border-radius: 50%; background: var(--primary); } .term-description h1, .term-description h2, .term-description h3, .term-description h4, .term-description h5, .term-description h6 { margin-top: 2rem; margin-bottom: 1rem; } .term-description h1 { font-size: 1.1rem; } .term-description h2 { font-size: 1rem; } .term-description h3 { font-size: 0.9rem; } .term-description h4 { font-size: 0.8rem; } .term-description h5 { font-size: 0.7rem; } .term-description h6 { font-size: 0.6rem; } .term-description a { color: var(--primary); } ul.dropdown-menu.depth_0 { text-align: right; } .woocommerce-cart-form__contents tbody tr.cart_item > td { vertical-align: middle !important; } .woocommerce-cart-form td.product-quantity { text-align: center; } .woocommerce-cart-form .quantity-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; } .woocommerce-cart-form .quantity-wrapper .quantity { float: none !important; margin: 0 !important; } .woocommerce-cart-form .quantity-wrapper .qty { margin: 0 !important; } @media (max-width: 575.98px) { .slider-control-wrapper { top: unset; z-index: 1; bottom: 0.75rem; left: 50%; transform: translateX(-50%); } .tab-sec-wrapper { margin: 0 0.5rem; padding: 1rem 0.5rem; } } /* ========================================================================= DIDBARTAR — New design system (merged from index.html mockup) Everything below overrides the legacy theme styles above. Order: 1) design tokens + helpers 2) header 3) page sections 4) footer 5) responsive 6) WordPress integration fixes ========================================================================= */ :root { --primary: #3a506b; --secondary: #5bc0be; --black: #0D1117; --g1: #354151; --g2: #546275; --g3: #798596; --g4: #C7CED9; --g5: #E4E8EE; --g6: #F7F8FA; --white: #ffffff; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Vazirmatn", sans-serif; background: var(--white); color: var(--black); } /* Design-system helpers used in this page */ .text-primary { color: var(--primary) !important; } .text-secondary { color: var(--secondary) !important; } .text-black { color: var(--black) !important; } .text-g1 { color: var(--g1) !important; } .text-g2 { color: var(--g2) !important; } .text-g3 { color: var(--g3) !important; } .text-g4 { color: var(--g4) !important; } .text-g5 { color: var(--g5) !important; } .text-g6 { color: var(--g6) !important; } .text-white { color: var(--white) !important; } .bg-primary { background-color: var(--primary) !important; } .bg-secondary { background-color: var(--secondary) !important; } .bg-black { background-color: var(--black) !important; } .bg-g5 { background-color: var(--g5) !important; } .bg-g6 { background-color: var(--g6) !important; } .border-primary { border-color: var(--primary) !important; } .border-secondary { border-color: var(--secondary) !important; } .border-g4 { border-color: var(--g4) !important; } /* Font Sizes - Desktop: 8px to 28px */ .fs-8 { font-size: 0.5rem; } .fs-9 { font-size: 0.5625rem; } .fs-10 { font-size: 0.625rem; } .fs-11 { font-size: 0.6875rem; } .fs-12 { font-size: 0.75rem; } .fs-13 { font-size: 0.8125rem; } .fs-14 { font-size: 0.875rem; } .fs-15 { font-size: 0.9375rem; } .fs-16 { font-size: 1rem; } .fs-17 { font-size: 1.0625rem; } .fs-18 { font-size: 1.125rem; } .fs-19 { font-size: 1.1875rem; } .fs-20 { font-size: 1.25rem; } .fs-21 { font-size: 1.3125rem; } .fs-22 { font-size: 1.375rem; } .fs-23 { font-size: 1.4375rem; } .fs-24 { font-size: 1.5rem; } .fs-25 { font-size: 1.5625rem; } .fs-26 { font-size: 1.625rem; } .fs-27 { font-size: 1.6875rem; } .fs-28 { font-size: 1.75rem; } .fs-30 { font-size: 30px; } .fs-32 { font-size: 2rem; } .fs-36 { font-size: 2.25rem; } .fs-40 { font-size: 2.5rem; } .fs-44 { font-size: 2.75rem; } .fs-48 { font-size: 3rem; } .fs-50 { font-size: 3.125rem; } /* Font Sizes - Mobile: 8px to 28px */ @media (max-width: 768px) { .fsm-8 { font-size: 0.5rem; } .fsm-9 { font-size: 0.5625rem; } .fsm-10 { font-size: 0.625rem; } .fsm-11 { font-size: 0.6875rem; } .fsm-12 { font-size: 0.75rem; } .fsm-13 { font-size: 0.8125rem; } .fsm-14 { font-size: 0.875rem; } .fsm-15 { font-size: 0.9375rem; } .fsm-16 { font-size: 1rem; } .fsm-17 { font-size: 1.0625rem; } .fsm-18 { font-size: 1.125rem; } .fsm-19 { font-size: 1.1875rem; } .fsm-20 { font-size: 1.25rem; } .fsm-21 { font-size: 1.3125rem; } .fsm-22 { font-size: 1.375rem; } .fsm-23 { font-size: 1.4375rem; } .fsm-24 { font-size: 1.5rem; } .fsm-25 { font-size: 1.5625rem; } .fsm-26 { font-size: 1.625rem; } .fsm-27 { font-size: 1.6875rem; } .fsm-28 { font-size: 1.75rem; } .fsm-32 { font-size: 2rem; } .fsm-36 { font-size: 2.25rem; } .fsm-40 { font-size: 2.5rem; } .fsm-44 { font-size: 2.75rem; } .fsm-48 { font-size: 3rem; } .fsm-50 { font-size: 3.125rem; } } /* Header */ .site-header { min-height: 84px; background: var(--white); position: relative; z-index: 20; } .site-header::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(calc(100% - 176px), 1264px); height: 5px; border-radius: 999px; background: var(--primary); } .header-inner { min-height: 84px; max-width: 1264px; margin: 0 auto; padding-inline: 0; display: grid; grid-template-columns: 280px 1fr 280px; align-items: center; gap: 24px; } /* هدر از سند ارث می‌برد: ستون اول (اکشن‌ها) سمت راست و ستون سوم (جستجو) سمت چپ می‌نشیند؛ دقیقاً همان چیدمانی که نسخه‌ی موبایل هم دارد. */ .header-inner, .header-actions, .header-center, .header-search { direction: rtl; } .header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; } .header-icon-btn { width: 36px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--white); border-radius: 50%; color: var(--g1); background: var(--g6); font-size: 18px; text-decoration: none; transition: .2s ease; } .header-icon-btn.cart-btn { background: var(--primary); color: var(--white); border-color: var(--white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); } .header-icon-btn:hover { color: var(--secondary); transform: translateY(-1px); } .special-products-btn { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--secondary); color: var(--white); font-size: 13px; font-weight: 500; white-space: nowrap; } .header-center { justify-self: center; display: flex; align-items: center; gap: 30px; white-space: nowrap; } .header-nav { display: flex; align-items: center; gap: 28px; } .header-nav a { color: var(--g1); font-size: 13px; text-decoration: none; transition: color .2s ease; } .header-nav a:hover { color: var(--secondary); } .header-logo { width: 76px; height: 48px; object-fit: cover; object-position: center; display: block; } .header-search { justify-self: end; width: 257px; position: relative; } .header-search { width: 100%; height: 40px; border: 0; outline: none; border-radius: 999px; background: var(--g6); color: var(--g1); /* padding: 0 46px 0 18px; */ font-size: 14px; display: flex; align-items: center; justify-content: space-between; padding: 0 0.75rem; border: 1px solid var(--g5); } .header-search input::placeholder { color: var(--g3); } .header-search .bi-search { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--g3); font-size: 18px; } .mobile-menu-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--g2); background: transparent; color: var(--primary); font-size: 20px; } /* Hero Swiper */ .hero-section { background: var(--white); } .hero-slider-shell { position: relative; max-width: 1392px; height: clamp(440px, 37.5vw, 540px); margin: 0 auto; border-radius: 24px; overflow: hidden; background: #97c2f1; } .hero-swiper, .hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide { width: 100%; height: 100%; z-index: unset; } .hero-slide { position: relative; overflow: hidden; background: #97c2f1; } .hero-visual { position: absolute; inset: 0 auto 0 0; width: 58%; height: 100%; z-index: 1; overflow: hidden; } .hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; } .hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(151, 194, 241, 0) 68%, #97c2f1 100%); pointer-events: none; } .hero-content { position: relative; z-index: 3; width: 49%; height: 100%; padding: 0 64px 72px 24px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: right; color: var(--white); margin-left: auto; margin-right: 0; } .hero-title { margin: 0 0 12px; font-size: clamp(27px, 2.2vw, 36px); line-height: 1.5; font-weight: 700; } .hero-description { margin: 0; font-size: clamp(15px, 1.25vw, 18px); line-height: 2; font-weight: 400; } .hero-cta { min-height: 43px; margin-top: 34px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(35, 75, 111, .92); color: var(--white); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 13px; transition: .2s ease; } .hero-cta:hover { background: var(--primary); color: var(--white); transform: translateY(-1px); } /* The white shape is above the Swiper, so it stays identical on every slide. */ .hero-white-shape { position: absolute; z-index: 5; bottom: -1px; pointer-events: none; left: 50%; transform: translateX(-50%); } .hero-pagination { z-index: 8; bottom: 6px !important; display: flex; align-items: center; justify-content: center; gap: 2px; direction: ltr; height: 38px; } .hero-pagination .swiper-pagination-bullet { box-sizing: border-box; width: 34px; height: 34px; margin: 0 !important; border-radius: 50%; background: transparent; opacity: 1; position: relative; } .hero-pagination .swiper-pagination-bullet::before { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--g5); top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .2s ease; } .hero-pagination .swiper-pagination-bullet-active { border: 2px solid #244f78; background: var(--white); } .hero-pagination .swiper-pagination-bullet-active::before { width: 14px; height: 14px; background: #244f78; } /* Product Categories Swiper */ .category-section { background: var(--white); } .category-container { max-width: 1264px; margin: 0 auto; } .category-kicker { margin: 0 0 7px; color: var(--g3); font-size: 14px; font-weight: 400; letter-spacing: .06em; text-align: center; direction: ltr; } .category-title { margin: 0 0 40px; color: var(--black); font-size: 24px; font-weight: 700; text-align: center; } .category-slider-wrap { position: relative; } .category-swiper { overflow: hidden; padding-top: 18px; } .category-card { position: relative; height: 118px; border-radius: 18px; background: var(--g6); overflow: visible; text-decoration: none; color: var(--black); display: block; } .category-card-content { position: relative; z-index: 2; height: 100%; width: 62%; margin-right: 0; padding: 20px 18px 14px 8px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: right; } .category-name { margin: 0 0 7px; font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--black); } .category-count { margin: 0; font-size: 14px; color: var(--g3); line-height: 1.2; } .category-image { position: absolute; z-index: 3; left: 8px; bottom: 0; width: 43%; height: 140px; object-fit: contain; object-position: center bottom; pointer-events: none; transition: transform .25s ease; } .category-card:hover .category-image { transform: translateY(-4px); } .category-card--camera .category-image { width: 47%; left: 2px; height: 146px; } .category-card--protector .category-image { width: 43%; left: 3px; height: 143px; } .category-card--ups .category-image { width: 40%; left: 6px; height: 137px; } .category-card--line .category-image { width: 44%; left: 1px; height: 143px; } .category-card--stabilizer .category-image { width: 41%; left: 4px; height: 143px; } .category-navigation { display: flex; justify-content: center; align-items: center; margin-top: 23px; direction: ltr; } .category-nav-btn { color: var(--primary); font-size: 40px; transition: .2s ease; background: unset; border: 0; line-height: 1; } .category-nav-btn.swiper-button-disabled { opacity: .45; cursor: default; } /* Discount products slider */ .discount-section { position: relative; overflow: hidden; min-height: 665px; background: var(--primary); } .discount-section::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 338px; background: var(--white); clip-path: polygon(0 24%, 50% 0, 100% 24%, 100% 100%, 0 100%); z-index: 0; pointer-events: none; } .discount-container { position: relative; z-index: 1; max-width: 1264px; margin: 0 auto; } .discount-kicker { margin: 0 0 2px; color: var(--g4); font-size: 16px; font-weight: 300; letter-spacing: .02em; text-align: center; direction: ltr; } .discount-title { margin: 0 0 39px; color: var(--white); font-size: 25px; font-weight: 700; text-align: center; } .discount-swiper { width: 100%; overflow: hidden; padding: 0 0 1px; } .discount-swiper .swiper-slide { height: auto; } .product-card { height: 421px; display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid var(--g5); border-radius: 20px; background: var(--white); color: var(--black); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .product-card:hover { color: var(--black); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(13, 17, 23, .08); } .product-discount { position: absolute; top: 18px; right: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; color: var(--secondary); font-size: 12px; font-weight: 400; } .product-discount i { font-size: 16px; } .product-media { position: relative; height: 276px; padding: 46px 34px 15px; display: flex; align-items: center; justify-content: center; } .product-stock-flag { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 5px 14px; border-radius: 999px; background: rgba(13, 17, 23, .72); color: var(--white); font-size: 12px; font-weight: 600; white-space: nowrap; } .product-media img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; } .product-card--audio .product-media img { width: 184px; } .product-card--tube .product-media img { width: 214px; } .product-card--stabilizer .product-media img { width: 176px; } .product-card--strip .product-media img { width: 220px; } .product-content { position: relative; flex: 1; margin: 0 19px; padding: 14px 0 15px; border-top: 1px solid var(--g5); } .product-name { margin: 0; min-height: 55px; color: var(--black); font-size: 15px; font-weight: 500; line-height: 1.85; } .product-price-row { margin-top: 3px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } .product-prices { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .product-old-price { color: var(--g3); font-size: 12px; line-height: 1.3; white-space: nowrap; } .product-old-price del { text-decoration-thickness: 1px; } .product-new-price { color: var(--black); font-size: 16px; font-weight: 600; line-height: 1.4; white-space: nowrap; } .product-unit { margin-right: 4px; font-size: 12px; font-weight: 400; } .product-cart-btn { width: 39px; height: 39px; flex: 0 0 39px; border: 1px solid var(--white); border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--primary); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; } .discount-controls { position: relative; z-index: 2; margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 20px; } .discount-navigation { display: flex; align-items: center; justify-content: center; } .discount-nav-btn { color: var(--primary); font-size: 40px; transition: .2s ease; background: unset; border: 0; line-height: 1; transition: background-color .2s ease, opacity .2s ease; } .discount-nav-btn.swiper-button-disabled { opacity: .4; } .discount-view-all { min-width: 130px; height: 43px; padding: 0 17px; border-radius: 999px; background: var(--primary); color: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-size: 13px; font-weight: 500; } .discount-view-all:hover { color: var(--white); } .discount-view-all-icon { width: 15px; height: 15px; border-radius: 50%; background: var(--secondary); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; } @media (max-width: 1199.98px) { .discount-container { padding-inline: var(--bs-gutter-x, .75rem); } } @media (max-width: 767.98px) { .discount-section { min-height: 610px; } .discount-section::after { height: 315px; clip-path: polygon(0 16%, 50% 0, 100% 16%, 100% 100%, 0 100%); } .discount-container { padding-inline: 16px; } .discount-kicker { font-size: 14px; } .discount-title { margin-bottom: 28px; font-size: 22px; } .product-card { height: 400px; } .product-media { height: 255px; padding-inline: 26px; } .discount-controls { margin-top: 18px; gap: 16px; } } /* New products slider */ .new-products-section { background: var(--white); } .new-products-container { position: relative; } .new-products-kicker { margin: 0 0 4px; color: var(--g3); font-size: 16px; font-weight: 300; letter-spacing: .04em; text-align: center; direction: ltr; } .new-products-title { margin: 0 0 41px; color: var(--black); font-size: 25px; font-weight: 700; text-align: center; } .new-products-swiper { width: 100%; overflow: hidden; padding: 0 0 2px; } .new-products-swiper .swiper-slide { height: auto; } .new-product-card { height: 421px; } .new-product-card .product-media { height: 276px; padding: 38px 26px 12px; } .new-product-card .product-media img { mix-blend-mode: multiply; } .new-product-card--camera .product-media img { width: 220px; } .new-product-card--intercom .product-media img { width: 205px; } .new-product-card--protector .product-media img { width: 150px; } .new-product-card--gate .product-media img { width: 235px; } .new-product-card .product-name { min-height: 57px; } .new-products-controls { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 20px; } .new-products-navigation { display: flex; align-items: center; justify-content: center; direction: ltr; } .new-products-nav-btn { color: var(--primary); font-size: 40px; transition: .2s ease; background: unset; border: 0; line-height: 1; transition: background-color .2s ease, opacity .2s ease; } .new-products-nav-btn.swiper-button-disabled { opacity: .4; } .new-products-view-all { min-width: 130px; height: 43px; padding: 0 17px; border-radius: 999px; background: var(--primary); color: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-size: 13px; font-weight: 500; } .new-products-view-all:hover { color: var(--white); } .new-products-view-all-icon { width: 15px; height: 15px; border-radius: 50%; background: var(--secondary); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; } @media (max-width: 767.98px) { .new-products-section { } .new-products-kicker { font-size: 14px; } .new-products-title { margin-bottom: 28px; font-size: 22px; } .new-product-card { height: 400px; } .new-product-card .product-media { height: 255px; padding-inline: 24px; } .new-products-controls { margin-top: 18px; gap: 16px; } } /* Benefits */ .benefits-section { background: var(--white); } .benefit-card { min-height: 216px; border-radius: 17px; background: rgba(91, 192, 190, .12); color: var(--g1); } .benefit-icon { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--secondary); color: var(--white); font-size: 28px; } .benefit-title { margin: 17px 0 5px; color: var(--g1); font-size: 19px; font-weight: 700; line-height: 1.6; } .benefit-description { margin: 0; color: var(--g2); font-size: 15px; line-height: 1.9; } @media (max-width: 767.98px) { .benefit-card { min-height: auto; } .benefit-icon { width: 58px; height: 58px; flex-basis: 58px; font-size: 25px; } .benefit-title { font-size: 18px; } .benefit-description { font-size: 14px; } } /* Brands slider */ .brands-section { background: var(--white); } .brands-kicker { margin: 0 0 4px; color: var(--g3); font-size: 16px; font-weight: 300; letter-spacing: .04em; text-align: center; direction: ltr; } .brands-title { margin: 0 0 38px; color: var(--black); font-size: 25px; font-weight: 700; text-align: center; } .brands-swiper { width: 100%; overflow: hidden; } .brands-swiper .swiper-slide { height: auto; } .brand-card { height: 90px; border-radius: 16px; background: var(--g6); display: flex; align-items: center; justify-content: center; overflow: hidden; } .brand-card img { display: block; width: auto; max-width: 82%; height: auto; max-height: 58px; object-fit: contain; background: transparent !important; } @media (max-width: 767.98px) { .brands-kicker { font-size: 14px; } .brands-title { margin-bottom: 26px; font-size: 22px; } .brand-card { height: 82px; border-radius: 14px; } .brand-card img { max-height: 52px; } } /* Blog */ .blog-section { background: var(--white); } .blog-kicker { margin: 0 0 4px; color: var(--g3); font-size: 16px; font-weight: 300; letter-spacing: .04em; text-align: center; direction: ltr; } .blog-title { margin: 0 0 40px; color: var(--black); font-size: 25px; font-weight: 700; text-align: center; } .blog-featured-image, .blog-card-image { position: relative; overflow: hidden; border-radius: 16px; background: var(--g6); } .blog-featured-image { aspect-ratio: 2.05 / 1; } .blog-card-image { aspect-ratio: 2 / 1; } .blog-featured-image img, .blog-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; } .blog-date { position: absolute; right: 16px; bottom: 14px; min-height: 31px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; background: rgba(247, 248, 250, .92); color: var(--g2); font-size: 12px; direction: ltr; backdrop-filter: blur(3px); } .blog-date i { color: var(--primary); font-size: 14px; } .blog-featured-title { margin: 14px 0 5px; color: var(--black); font-size: 20px; font-weight: 700; line-height: 1.65; } .blog-featured-excerpt { margin: 0; color: var(--g2); font-size: 14px; line-height: 2; } .blog-card-title { margin: 12px 0 0; color: var(--black); font-size: 15px; font-weight: 600; line-height: 1.75; } .blog-card-link, .blog-featured-link { display: block; color: inherit; text-decoration: none; } .blog-card-link:hover .blog-card-title, .blog-featured-link:hover .blog-featured-title { color: var(--primary); } /* اسلایدر وبلاگ روی موبایل */ .blog-mobile-slider { margin-top: 4px; } .blog-swiper { overflow: hidden; } .blog-mobile-navigation { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; direction: ltr; } .blog-mobile-nav-btn { color: var(--primary); background: unset; border: 0; line-height: 1; padding: 0; font-size: 40px; transition: .2s ease; } .blog-mobile-nav-btn i { font-size: inherit; } .blog-mobile-nav-btn.swiper-button-disabled { opacity: .45; cursor: default; } .blog-view-all { min-width: 130px; height: 43px; padding: 0 17px; border-radius: 999px; background: var(--primary); color: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-size: 13px; font-weight: 500; } .blog-view-all:hover { color: var(--white); } .blog-view-all-icon { width: 15px; height: 15px; border-radius: 50%; background: var(--secondary); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; } @media (max-width: 991.98px) { .blog-featured-title { font-size: 18px; } } @media (max-width: 767.98px) { .blog-kicker { font-size: 14px; } .blog-title { margin-bottom: 28px; font-size: 22px; } .blog-featured-title { font-size: 17px; } .blog-featured-excerpt { font-size: 13px; } .blog-card-title { font-size: 14px; } } /* Footer */ .site-footer { position: relative; background: var(--g5); border-radius: 22px 22px 0 0; overflow: hidden; padding: 96px 32px 15px; color: var(--black); } .site-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(540px, 52vw); height: 62px; background: var(--white); clip-path: polygon(0 0, 100% 0, 58% 88%, 54% 96%, 50% 100%, 46% 96%, 42% 88%); z-index: 1; } .back-to-top { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 4; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--white); background: var(--primary); box-shadow: 0 0 0 2px var(--primary); color: var(--white); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .back-to-top span { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--white); color: var(--primary); font-size: 12px; } .footer-inner { max-width: 1264px; margin: 0 auto; position: relative; z-index: 2; } .footer-brand { text-align: center; margin-bottom: 14px; } .footer-brand-logo { width: 220px; max-width: 60vw; height: 48px; object-fit: cover; object-position: center; } .footer-description { max-width: 1240px; margin: 0 auto 22px; text-align: center; line-height: 2; font-size: 14px; } .footer-divider { margin: 0; border: 0; border-top: 1px solid var(--g4); opacity: 1; } .footer-columns { padding: 29px 0 40px; } .footer-column-title { font-size: 16px; font-weight: 700; margin-bottom: 22px; } .footer-links { display: flex; flex-direction: column; gap: 17px; } .footer-links a, .contact-item { color: var(--g1); font-size: 14px; text-decoration: none; transition: color .2s ease; } .footer-links a:hover { color: var(--secondary); } .contact-list { display: flex; flex-direction: column; gap: 15px; } .contact-item { display: flex; align-items: center; gap: 12px; } .contact-item i { color: var(--secondary); font-size: 19px; flex: 0 0 auto; } .trust-logos { width: 126px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 8px; } .trust-logo { width: 51px; height: 51px; object-fit: cover; border-radius: 6px; background: var(--white); } .trust-logo:last-child { grid-column: 1 / -1; } .footer-copyright { text-align: center; font-size: 13px; padding-top: 15px; margin: 0; } @media (max-width: 1199.98px) { .header-inner { padding-inline: 24px; grid-template-columns: auto 1fr auto; } .header-center { gap: 18px; } .header-nav { gap: 16px; } .header-search { width: 220px; } } @media (max-width: 991.98px) { .site-header::before { width: calc(100% - 32px); } /* سه ستون ثابت: جستجو سمت راست، لوگو دقیقاً وسط، اکشن‌ها سمت چپ. جای position:absolute که هدر را به‌هم می‌ریخت. */ .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; } .header-center .header-nav, .header-search, .special-products-btn { display: none; } .header-center { position: static; justify-self: center; transform: none; } .mobile-menu-btn { display: inline-flex; } .header-actions { justify-self: end; gap: 8px; } .site-footer { padding-inline: 24px; } .category-section { } .category-title { margin-bottom: 30px; } .footer-columns { row-gap: 38px; } } @media (max-width: 767.98px) { .category-section { } .category-kicker { font-size: 12px; } .category-title { margin-bottom: 22px; font-size: 20px; } .category-swiper { overflow: visible; } .category-card { height: 108px; } .category-card-content { padding-right: 14px; } .category-name { font-size: 14px; } .category-count { font-size: 12px; } .category-image, .category-card--camera .category-image, .category-card--protector .category-image, .category-card--ups .category-image, .category-card--line .category-image, .category-card--stabilizer .category-image { height: 128px; } .site-footer { border-radius: 18px 18px 0 0; padding-top: 88px; } .site-footer::before { width: 72vw; height: 55px; } .footer-description { font-size: 13px; line-height: 1.9; } .footer-column-title { margin-bottom: 16px; } .footer-links { gap: 12px; } .footer-columns { padding-bottom: 28px; } .contact-item, .footer-links a { font-size: 13px; } } @media (max-width: 991.98px) { .hero-section { } .hero-slider-shell { height: 500px; border-radius: 20px; } .hero-visual { width: 68%; opacity: .78; } .hero-visual::after { background: linear-gradient(90deg, rgba(151, 194, 241, .05) 30%, #97c2f1 100%); } .hero-content { width: 62%; padding-right: 34px; padding-bottom: 76px; } } @media (max-width: 767.98px) { .hero-section { } .hero-slider-shell { height: 530px; border-radius: 18px; } .hero-visual { width: 100%; height: 66%; top: auto; bottom: 78px; opacity: .55; } .hero-visual img { object-position: 32% center; } .hero-visual::after { background: linear-gradient(180deg, #97c2f1 0%, rgba(151, 194, 241, .05) 28%, rgba(151, 194, 241, .15) 62%, #97c2f1 100%), linear-gradient(90deg, rgba(151, 194, 241, .1) 0%, #97c2f1 100%); } .hero-content { width: 100%; padding: 42px 24px 105px; justify-content: flex-start; align-items: flex-start; } .hero-title { font-size: 27px; } .hero-description { max-width: 92%; font-size: 14px; } .hero-cta { margin-top: 22px; } .hero-white-shape { height: 72px; clip-path: polygon(0 75%, 20% 66%, 50% 10%, 77% 52%, 100% 76%, 100% 100%, 0 100%); } } /* ========================================================= Mobile layout — matches supplied mobile design Section spacing continues to use Bootstrap utilities. ========================================================= */ .footer-mobile { display: none; } @media (max-width: 767.98px) { body { overflow-x: hidden; } .container { --bs-gutter-x: 1rem; } /* Header */ .site-header { min-height: 54px; } .site-header::before { display: none; } .header-inner { min-height: 54px; padding-inline: 10px; } .header-logo { width: 44px; height: 28px; object-fit: contain; } .header-actions .header-icon-btn:not(.cart-btn), .header-actions .special-products-btn, .header-actions .mobile-menu-btn { display: none !important; } .header-icon-btn.cart-btn { display: none; } /* روی موبایل جستجو فقط یک دکمه‌ی گرد است، سمت راست هدر. */ .header-search { display: inline-flex; align-items: center; justify-content: center; justify-self: start; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--g6); color: var(--primary); } .header-search span, .header-search input { display: none; } .header-search .icon { font-size: 14px; color: var(--primary); } .header-search .bi-search { position: static; width: 28px; height: 28px; transform: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--g6); color: var(--primary); font-size: 12px; } /* Hero */ .hero-slider-shell { height: 520px; border-radius: 16px; } .hero-content { width: 100%; height: auto; padding: 30px 18px 0; align-items: center; justify-content: flex-start; text-align: center; } .hero-title { margin-bottom: 8px; font-size: 20px; line-height: 1.6; } .hero-description { max-width: 100%; font-size: 12px; line-height: 1.9; } .hero-cta { min-height: 34px; margin-top: 12px; padding-inline: 13px; font-size: 10px; } .hero-visual { width: 100%; height: 66%; bottom: 44px; opacity: 1; } .hero-visual img { object-position: 27% bottom; } .hero-visual::after { background: linear-gradient(180deg, #97c2f1 0%, rgba(151, 194, 241, .06) 20%, rgba(151, 194, 241, .03) 80%, #97c2f1 100%); } .hero-white-shape { height: 52px; clip-path: polygon(0 72%, 25% 60%, 50% 15%, 76% 60%, 100% 72%, 100% 100%, 0 100%); } .hero-pagination { bottom: 11px !important; } .hero-pagination .swiper-pagination-bullet { width: 7px; height: 7px; } .hero-pagination .swiper-pagination-bullet-active { width: 22px; height: 22px; } /* Shared section headings */ .category-kicker, .discount-kicker, .new-products-kicker, .brands-kicker, .blog-kicker { font-size: 10px; } .category-title, .discount-title, .new-products-title, .brands-title, .blog-title { margin-bottom: 18px; font-size: 16px; } /* Categories: 2 columns x 2 rows */ .category-swiper { overflow: hidden; } .category-swiper .swiper-wrapper { align-items: stretch; } .category-card { height: 158px; border-radius: 14px; background: transparent; overflow: hidden; display: flex; flex-direction: column; align-items: center; } .category-image, .category-card--camera .category-image, .category-card--protector .category-image, .category-card--ups .category-image, .category-card--line .category-image, .category-card--stabilizer .category-image { position: relative; inset: auto; width: 100%; height: 108px; max-height: 108px; object-fit: contain; object-position: center; order: 1; } .category-card-content { order: 2; width: 100%; height: auto; padding: 5px 4px 0; align-items: center; justify-content: flex-start; text-align: center; } .category-name { margin-bottom: 2px; font-size: 11px; line-height: 1.5; } .category-count { font-size: 9px; } .category-navigation { margin-top: 12px; gap: 10px; } .category-nav-btn, .discount-nav-btn, .new-products-nav-btn, .blog-mobile-nav-btn { width: 24px; height: 24px; font-size: 11px; } /* Product sections: 2 cards per row */ .discount-section { min-height: 500px; } .discount-section::after { height: 185px; clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%); } .discount-container { padding-inline: var(--bs-gutter-x, .5rem); } .product-card, .new-product-card { height: 300px; border-radius: 14px; } .product-discount { top: 10px; right: 10px; gap: 3px; font-size: 8px; } .product-discount i { font-size: 11px; } .product-media, .new-product-card .product-media { height: 185px; padding: 28px 12px 8px; } .product-card--audio .product-media img, .product-card--tube .product-media img, .product-card--stabilizer .product-media img, .product-card--strip .product-media img, .new-product-card--camera .product-media img, .new-product-card--intercom .product-media img, .new-product-card--protector .product-media img, .new-product-card--gate .product-media img { width: auto; max-width: 100%; max-height: 100%; } .product-content { margin-inline: 10px; padding: 8px 0 9px; } .product-name, .new-product-card .product-name { min-height: 47px; font-size: 9.5px; line-height: 1.7; } .product-price-row { gap: 4px; } .product-old-price { font-size: 7px; } .product-new-price { font-size: 11px; } .product-unit { margin-right: 2px; font-size: 7px; } .product-cart-btn { width: 28px; height: 28px; flex-basis: 28px; font-size: 12px; } .discount-controls, .new-products-controls { margin-top: 12px; gap: 10px; } .discount-view-all, .new-products-view-all, .blog-view-all { min-width: 94px; height: 31px; padding-inline: 11px; gap: 6px; font-size: 9px; } .discount-view-all-icon, .new-products-view-all-icon, .blog-view-all-icon { width: 12px; height: 12px; font-size: 7px; } /* New products */ .new-product-card .product-media { padding-top: 24px; } /* Benefits: compact stacked cards */ .benefit-card { min-height: 92px; padding: 14px !important; position: relative; border-radius: 13px; } .benefit-icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 18px; position: absolute; top: 12px; right: 12px; } .benefit-title { margin: 0 48px 3px 0; font-size: 12px; } .benefit-description { margin-right: 48px; font-size: 9px; line-height: 1.8; } .benefits-section .row { --bs-gutter-y: .55rem; } /* Brands */ .brands-title { margin-bottom: 14px; } .brands-swiper { overflow: hidden; } .brand-card { height: 58px; border-radius: 0; background: transparent; } .brand-card img { max-width: 94%; max-height: 38px; } /* Blog: one featured card on mobile */ .blog-secondary-column { display: none; } .blog-featured-image { aspect-ratio: 1.7 / 1; border-radius: 13px; } .blog-featured-title { margin: 9px 0 0; font-size: 11px; line-height: 1.7; text-align: center; } .blog-featured-excerpt { display: none; } .blog-date { right: 8px; bottom: 8px; min-height: 22px; padding-inline: 7px; gap: 4px; font-size: 8px; } .blog-date i { font-size: 9px; } .blog-mobile-nav-btn { border: 0; border-radius: 50%; background: var(--g2); color: var(--white); display: inline-flex; align-items: center; justify-content: center; padding: 0; } .blog-mobile-slider .blog-date { right: 12px; bottom: 12px; min-height: 28px; padding-inline: 10px; gap: 6px; font-size: 11px; } .blog-mobile-slider .blog-date i { font-size: 13px; } .blog-mobile-slider .blog-card-image { border-radius: 13px; } /* Footer */ .site-footer { width: calc(100% - 12px); margin-inline: 6px; border-radius: 18px 18px 0 0; padding: 64px 12px 10px; } .site-footer::before { width: 72%; height: 46px; } .back-to-top { top: 2px; width: 38px; height: 38px; } .back-to-top span { width: 18px; height: 18px; font-size: 9px; } .footer-brand { margin-bottom: 8px; } .footer-brand-logo { width: 145px; height: 34px; object-fit: contain; } .footer-description { max-width: 310px; margin-bottom: 14px; font-size: 9px; line-height: 1.9; } .footer-divider { display: none; } .footer-mobile { display: block; } .footer-accordion { --bs-accordion-border-width: 0; --bs-accordion-border-radius: 9px; --bs-accordion-inner-border-radius: 9px; --bs-accordion-btn-focus-box-shadow: none; display: grid; gap: 6px; } .footer-accordion .accordion-item { overflow: hidden; border: 0; border-radius: 9px !important; background: rgba(255, 255, 255, .55); } .footer-accordion .accordion-button { min-height: 36px; padding: 8px 11px; background: transparent; color: var(--g1); font-size: 10px; font-weight: 600; box-shadow: none; } .footer-accordion .accordion-button:not(.collapsed) { background: rgba(255, 255, 255, .35); } .footer-accordion .accordion-button::after { width: 12px; height: 12px; background-size: 12px; margin-right: auto; margin-left: 0; } .footer-accordion .accordion-body { padding: 8px 11px 10px; } .footer-accordion .footer-links { gap: 8px; } .footer-accordion .footer-links a, .footer-accordion .contact-item { font-size: 9px; } .footer-accordion .contact-list { gap: 7px; } .footer-accordion .contact-item i { font-size: 12px; } .footer-mobile-trust .trust-logos { width: 112px; gap: 7px; } .footer-mobile-trust .trust-logo { width: 47px; height: 47px; } .footer-copyright { padding-top: 10px; font-size: 8px; } } /* ========================================================================= 6) WordPress integration layer The mockup was static HTML with the RTL Bootstrap build; the theme ships the LTR build and renders menus as