پرش به محتوا

الگو:کانتینر 3 در 2

از فراغیب
نسخهٔ تاریخ ‏۲۹ ژوئیهٔ ۲۰۲۶، ساعت ۱۰:۰۰ توسط Javid (بحث | مشارکت‌ها)
(تفاوت) → نسخهٔ قدیمی‌تر | نمایش نسخهٔ فعلی (تفاوت) | نسخهٔ جدیدتر ← (تفاوت)

/*============================== Damavand Polymer Blog Cards Base Layout ===============================*/ :root{ --dp-primary:#009688; --dp-primary-dark:#00796b; --dp-secondary:#00bcd4; --dp-bg:#f5f9fb; --dp-card:#ffffff; --dp-text:#243746; --dp-muted:#6b7280; --dp-border:#e6edf2; --dp-radius:18px; --dp-shadow: 0 8px 24px rgba(0,0,0,.05); --dp-shadow-hover: 0 18px 45px rgba(0,0,0,.10); --dp-transition:.35s ease; } /*==============================*/ *, *::before, *::after{ box-sizing:border-box; } .dp-blog-section{ width:100%; max-width:1400px; margin:auto; padding:25px 18px; } .dp-blog-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:stretch; } /*============================== Card ===============================*/ .dp-card{ background:var(--dp-card); border-radius:var(--dp-radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--dp-shadow); border:1px solid var(--dp-border); transition:var(--dp-transition); height:100%; position:relative; } /*============================== Image ===============================*/ .dp-card-image{ position:relative; display:block; overflow:hidden; aspect-ratio:16/10; background:#eef6f8; } .dp-card-image img{ width:100%; height:100%; display:block; object-fit:cover; } /*============================== Badge ===============================*/ .dp-badge{ position:absolute; top:16px; right:16px; background:#e7faf8; color:var(--dp-primary); font-size:12px; font-weight:700; padding:7px 14px; border-radius:30px; line-height:1; } /*============================== Content ===============================*/ .dp-card-content{ display:flex; flex-direction:column; flex:1; padding:24px; } /*============================== Meta ===============================*/ .dp-meta{ display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:16px; font-size:13px; color:var(--dp-muted); } .dp-category{ color:var(--dp-primary); font-weight:700; } /*============================== Title ===============================*/ .dp-title{ margin:0; font-size:22px; line-height:1.7; font-weight:800; } .dp-title a{ color:var(--dp-text); text-decoration:none; } /*============================== Description ===============================*/ .dp-desc{ margin-top:18px; color:var(--dp-muted); font-size:15px; line-height:2; flex:1; } /*============================== Button ===============================*/ .dp-btn{ margin-top:28px; align-self:flex-start; display:inline-flex; align-items:center; gap:10px; text-decoration:none; background:linear-gradient( 135deg, var(--dp-secondary), var(--dp-primary) ); color:#fff; padding:13px 22px; border-radius:40px; font-size:14px; font-weight:700; } .dp-btn svg{ width:18px; height:18px; stroke:#fff; stroke-width:2; fill:none; } /*============================== Tablet ===============================*/ @media (max-width:1024px){ .dp-blog-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } .dp-title{ font-size:20px; } } /*============================== Mobile ===============================*/ @media (max-width:768px){ .dp-blog-section{ padding:18px 12px; } .dp-blog-grid{ grid-template-columns:1fr; gap:18px; } .dp-card-content{ padding:18px; } .dp-title{ font-size:18px; line-height:1.8; } .dp-desc{ font-size:14px; } .dp-meta{ font-size:12px; } .dp-btn{ width:100%; justify-content:center; } } /*========================================= Professional Hover Effects ==========================================*/ /* حرکت نرم */ .dp-card, .dp-card img, .dp-btn, .dp-title a, .dp-badge{ transition:all .35s cubic-bezier(.4,0,.2,1); } /* نوار رنگی کنار کارت */ .dp-card::before{ content:""; position:absolute; top:0; right:0; width:6px; height:100%; background:linear-gradient( to bottom, #00c853, #00acc1 ); opacity:.85; } /* هاله گرادیانی */ .dp-card::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at top right, rgba(0,188,212,.08), transparent 60%); opacity:0; transition:.45s; pointer-events:none; } /* Hover کارت */ .dp-card:hover{ transform:translateY(-10px); box-shadow: 0 18px 40px rgba(0,0,0,.10), 0 8px 16px rgba(0,188,212,.10); } /* نمایش گرادیان */ .dp-card:hover::after{ opacity:1; } /* زوم تصویر */ .dp-card:hover img{ transform:scale(1.08); } /* تیره شدن ملایم تصویر */ .dp-card-image::before{ content:""; position:absolute; inset:0; background:linear-gradient( rgba(0,0,0,0), rgba(0,0,0,.08) ); opacity:0; transition:.4s; z-index:1; } .dp-card:hover .dp-card-image::before{ opacity:1; } /* عنوان */ .dp-title a:hover{ color:var(--dp-primary); } /* Badge */ .dp-card:hover .dp-badge{ background:#009688; color:#fff; } /* دکمه */ .dp-btn{ overflow:hidden; position:relative; } .dp-btn::before{ content:""; position:absolute; top:0; left:-120%; width:120%; height:100%; background: linear-gradient( 120deg, transparent, rgba(255,255,255,.35), transparent ); transition:.65s; } .dp-btn:hover::before{ left:130%; } .dp-btn:hover{ transform:translateY(-2px); box-shadow: 0 10px 22px rgba(0,150,136,.28); } /* آیکون */ .dp-btn svg{ transition:.3s; } .dp-btn:hover svg{ transform:translateX(-5px); } /* عکس */ .dp-card-image{ background:#eef7f8; } .dp-card img{ will-change:transform; } /* ظاهر متن */ .dp-desc{ text-align:justify; } /* فاصله خطوط بهتر */ .dp-title{ letter-spacing:-.2px; } /* انتخاب متن */ .dp-card ::selection{ background:#009688; color:#fff; } /* فوکوس برای سئو و دسترس‌پذیری */ .dp-card a:focus-visible{ outline:2px solid #00bcd4; outline-offset:4px; border-radius:8px; } /* انیمیشن ورود */ @keyframes dpFade{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } } .dp-card{ animation:dpFade .55s ease both; } /* تاخیر کارت‌ها */ .dp-card:nth-child(2){ animation-delay:.08s; } .dp-card:nth-child(3){ animation-delay:.16s; } .dp-card:nth-child(4){ animation-delay:.24s; } .dp-card:nth-child(5){ animation-delay:.32s; } .dp-card:nth-child(6){ animation-delay:.40s; } /* کاهش انیمیشن برای کاربران حساس */ @media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } } /*====================================================== Damavand Polymer Professional Responsive ======================================================*/ /* جلوگیری از پرش تصویر (CLS) */ .dp-card-image{ aspect-ratio:16 / 10; min-height:220px; overflow:hidden; background:#eef5f7; } .dp-card-image img{ width:100%; height:100%; object-fit:cover; object-position:center; } /* ارتفاع مساوی تمام کارت‌ها */ .dp-blog-grid{ align-items:stretch; } .dp-card{ display:flex; flex-direction:column; height:100%; } .dp-card-content{ flex:1; display:flex; flex-direction:column; } /* توضیح همیشه فضای میانی را پر کند */ .dp-desc{ flex:1; } /* دکمه همیشه پایین کارت */ .dp-btn{ margin-top:auto; } /* عنوان حداکثر دو خط */ .dp-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* توضیح حداکثر چهار خط */ .dp-desc{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } /* Badge شیشه‌ای */ .dp-badge{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.5); } /* متای مقاله */ .dp-meta{ border-bottom:1px solid #edf2f5; padding-bottom:12px; margin-bottom:18px; } /* تاریخ */ .dp-meta time{ white-space:nowrap; } /* لینک عنوان */ .dp-title a{ display:inline; } /* دکمه */ .dp-btn{ min-height:48px; border-radius:50px; } /* تصاویر همیشه Responsive */ .dp-card img{ max-width:100%; height:auto; } /* فاصله بین کارت‌ها در نمایشگرهای بزرگ */ @media (min-width:1400px){ .dp-blog-grid{ gap:34px; } } /* لپ‌تاپ */ @media (max-width:1200px){ .dp-blog-grid{ grid-template-columns:repeat(3,1fr); gap:22px; } .dp-title{ font-size:20px; } } /* تبلت */ @media (max-width:992px){ .dp-blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .dp-card-image{ min-height:200px; } } /* موبایل */ @media (max-width:768px){ .dp-blog-grid{ grid-template-columns:1fr; gap:18px; } .dp-card{ border-radius:16px; } .dp-card-content{ padding:18px; } .dp-card-image{ min-height:210px; } .dp-title{ font-size:18px; line-height:1.8; } .dp-desc{ font-size:14px; line-height:2; } .dp-meta{ flex-wrap:wrap; gap:8px; } .dp-btn{ width:100%; justify-content:center; } } /* موبایل کوچک */ @media (max-width:480px){ .dp-blog-section{ padding:12px; } .dp-card-content{ padding:16px; } .dp-title{ font-size:17px; } .dp-desc{ font-size:13px; } .dp-card-image{ min-height:190px; } .dp-badge{ font-size:11px; padding:6px 12px; } } /* مانیتورهای بزرگ */ @media (min-width:1700px){ .dp-blog-section{ max-width:1600px; } } /* بهبود کیفیت فونت */ .dp-blog-section{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* جلوگیری از شکستن کلمات */ .dp-title, .dp-desc{ word-break:normal; overflow-wrap:break-word; } /* تصاویر بدون کشیدگی */ .dp-card img{ display:block; } /* حذف فاصله اضافی لینک‌ها */ .dp-card a{ text-decoration:none; }

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:کانتینر_3_در_2&oldid=4664»