الگو:محصولات دایره ای
/*===================================================== Deniz Door Products Section Version : 2.0 Responsive + SEO + Accessibility ======================================================*/ @charset "UTF-8"; /*------------------------- IRANSans Font --------------------------*/ @font-face{ font-family:'IRANSans'; src:url('/fonts/IRANSans.woff2') format('woff2'), url('/fonts/IRANSans.woff') format('woff'); font-display:swap; font-weight:normal; } @font-face{ font-family:'IRANSans'; src:url('/fonts/IRANSans-Bold.woff2') format('woff2'), url('/fonts/IRANSans-Bold.woff') format('woff'); font-display:swap; font-weight:bold; } /*------------------------- Variables --------------------------*/ :root{ --primary:#222222; --secondary:#666666; --border:#ececec; --bg:#ffffff; --hover:#fafafa; --radius:22px; --shadow: 0 8px 20px rgba(0,0,0,.06); --shadow-hover: 0 18px 40px rgba(0,0,0,.12); --transition:.35s ease; } /*------------------------- Reset --------------------------*/ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } html{ font-size:16px; scroll-behavior:smooth; } body{ font-family:'IRANSans',Tahoma,sans-serif; direction:rtl; background:#fff; color:var(--primary); line-height:2; overflow-x:hidden; text-rendering:optimizeLegibility; } img{ display:block; max-width:100%; height:auto; } a{ text-decoration:none; color:inherit; } ul{ list-style:none; } /*================================================== PRODUCTS SECTION ===================================================*/ .deniz-products{ padding:90px 20px; background:#fff; position:relative; } .deniz-products .container{ max-width:1320px; margin:auto; } /*========================= Heading ==========================*/ .deniz-heading{ text-align:center; margin-bottom:70px; } .deniz-heading h2{ font-size:46px; font-weight:700; color:#111; line-height:1.3; } .deniz-heading::after{ content:""; display:block; width:90px; height:2px; background:#d9d9d9; margin:22px auto 0; } /*========================= Grid ==========================*/ .deniz-grid{ display:grid; grid-template-columns: repeat(4,minmax(240px,1fr)); gap:42px; align-items:start; } /*========================= Card ==========================*/ .deniz-card{ position:relative; padding:0; text-align:center; transition:var(--transition); } .deniz-card:hover{ transform:translateY(-10px); } .deniz-card a{ display:block; padding:10px; border-radius:var(--radius); transition:var(--transition); } .deniz-card:hover a{ background:var(--hover); box-shadow:var(--shadow-hover); } /*========================= Image Area ==========================*/ .deniz-card .image-box{ position:relative; width:100%; aspect-ratio:1 / 1; overflow:hidden; border-radius:var(--radius); background:#f7f7f7; margin-bottom:22px; } .deniz-card .image-box img{ width:100%; height:100%; object-fit:cover; transition:var(--transition); } .deniz-card:hover .image-box img{ transform:scale(1.08); } /*========================= Product Title ==========================*/ .deniz-card h3{ font-size:22px; font-weight:700; color:#111; line-height:1.8; margin-bottom:12px; transition:var(--transition); } .deniz-card:hover h3{ color:#444; } /*========================= Description ==========================*/ .deniz-card p{ font-size:15px; color:var(--secondary); line-height:2; max-width:280px; margin:0 auto; } /*========================= Read More ==========================*/ .deniz-card .read-more{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; font-size:14px; font-weight:bold; color:#555; transition:var(--transition); } .deniz-card .read-more::after{ content:"←"; font-size:18px; transition:var(--transition); } .deniz-card:hover .read-more{ color:#111; } .deniz-card:hover .read-more::after{ transform:translateX(-6px); } /*========================= Accessibility Focus ==========================*/ .deniz-card a:focus-visible{ outline:3px solid #777; outline-offset:5px; } /*================================================== TABLET RESPONSIVE ===================================================*/ @media(max-width:1100px){ .deniz-products{ padding:70px 20px; } .deniz-heading h2{ font-size:38px; } .deniz-grid{ grid-template-columns: repeat(2,minmax(240px,1fr)); gap:35px; } .deniz-card h3{ font-size:20px; } } /*================================================== MOBILE RESPONSIVE ===================================================*/ @media(max-width:600px){ .deniz-products{ padding:45px 15px; } .deniz-heading{ margin-bottom:40px; } .deniz-heading h2{ font-size:28px; } .deniz-heading::after{ width:60px; } .deniz-grid{ grid-template-columns:1fr; gap:28px; } .deniz-card a{ padding:8px; } .deniz-card .image-box{ border-radius:18px; } .deniz-card h3{ font-size:18px; } .deniz-card p{ font-size:14px; } .deniz-card:hover{ transform:none; } } /*================================================== SMALL MOBILE ===================================================*/ @media(max-width:380px){ .deniz-heading h2{ font-size:24px; } .deniz-card h3{ font-size:17px; } .deniz-card p{ font-size:13px; } } /*================================================== SEO + PERFORMANCE OPTIMIZATION ===================================================*/ /* جلوگیری از پرش محتوا هنگام لود تصاویر */ .deniz-card .image-box{ contain:layout paint; } /* بهینه سازی رندر متن */ .deniz-products, .deniz-products *{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /*================================================== IMAGE SEO SUPPORT ===================================================*/ .deniz-card img{ loading:lazy; object-fit:cover; } /*================================================== HIGH CONTRAST SUPPORT ===================================================*/ @media (prefers-contrast:high){ .deniz-card h3{ color:#000; } .deniz-card p{ color:#222; } .deniz-card a{ border:1px solid #333; } } /*================================================== REDUCED MOTION ACCESSIBILITY ===================================================*/ @media(prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } } /*================================================== DARK MODE SUPPORT ===================================================*/ @media(prefers-color-scheme:dark){ .deniz-products{ background:#111; } .deniz-heading h2{ color:#fff; } .deniz-heading::after{ background:#444; } .deniz-card:hover a{ background:#1b1b1b; } .deniz-card h3{ color:#fff; } .deniz-card p{ color:#bbb; } .deniz-card .image-box{ background:#1c1c1c; } .deniz-card .read-more{ color:#ddd; } } /*================================================== LARGE DESKTOP OPTIMIZATION ===================================================*/ @media(min-width:1400px){ .deniz-products .container{ max-width:1450px; } .deniz-grid{ gap:50px; } .deniz-card h3{ font-size:24px; } } /*================================================== PRINT OPTIMIZATION ===================================================*/ @media print{ .deniz-products{ padding:20px; } .deniz-card:hover{ transform:none; } .deniz-card a{ box-shadow:none!important; background:none!important; } .deniz-card .read-more{ display:none; } } /*================================================== PRODUCT BADGE (ویژگی / جدید / پرفروش) ===================================================*/ .deniz-card .product-badge{ position:absolute; top:18px; right:18px; z-index:5; background:#111; color:#fff; font-size:13px; padding:6px 14px; border-radius:30px; font-weight:bold; line-height:1.5; } /* رنگهای مختلف Badge */ .deniz-card .product-badge.new{ background:#2ecc71; } .deniz-card .product-badge.sale{ background:#e74c3c; } .deniz-card .product-badge.best{ background:#f39c12; } /*================================================== PRODUCT FEATURE LIST ===================================================*/ .deniz-features{ margin-top:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .deniz-features span{ background:#f6f6f6; border-radius:20px; padding:5px 12px; font-size:12px; color:#555; transition:var(--transition); } .deniz-card:hover .deniz-features span{ background:#fff; box-shadow:0 5px 15px rgba(0,0,0,.06); } /*================================================== PRODUCT BUTTON ===================================================*/ .deniz-card .product-btn{ display:inline-flex; align-items:center; justify-content:center; margin-top:22px; padding:10px 28px; border-radius:30px; background:#111; color:#fff; font-size:14px; font-weight:bold; transition:var(--transition); } .deniz-card .product-btn:hover{ background:#333; transform:translateY(-3px); } /*================================================== FEATURED PRODUCT CARD ===================================================*/ .deniz-card.featured a{ background:#fafafa; box-shadow: 0 10px 30px rgba(0,0,0,.08); } .deniz-card.featured:hover a{ box-shadow: 0 20px 45px rgba(0,0,0,.15); } /*================================================== PRODUCT IMAGE OVERLAY ===================================================*/ .deniz-card .image-overlay{ position:absolute; inset:0; background:linear-gradient( to top, rgba(0,0,0,.35), transparent 60% ); opacity:0; transition:var(--transition); } .deniz-card:hover .image-overlay{ opacity:1; } /*================================================== ICON SUPPORT ===================================================*/ .deniz-icon{ width:45px; height:45px; display:flex; align-items:center; justify-content:center; margin:0 auto 15px; border-radius:50%; background:#f4f4f4; color:#222; font-size:20px; transition:var(--transition); } .deniz-card:hover .deniz-icon{ transform:translateY(-5px); background:#111; color:#fff; } /*================================================== MOBILE CARD IMPROVEMENT ===================================================*/ @media(max-width:600px){ .deniz-card .product-badge{ top:12px; right:12px; font-size:11px; padding:5px 10px; } .deniz-features span{ font-size:11px; padding:4px 9px; } .deniz-card .product-btn{ width:100%; padding:9px 20px; } }