پرش به محتوا

بخش اطلاعات تماس/عطاری حافظ - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۲: خط ۲:
<style>
<style>
/* ============================
/* ============================
   کارت تماس — نسخه سئو + ریسپانسیو
   کارت تماس — نسخه هم‌عرض با تصویر + ریسپانسیو
   ============================ */
   ============================ */


.deniz-contact-card {
.deniz-contact-card {
     width: 100%;
     width: 100%;
     max-width: 800px;
     max-width: 1100px;   /* هم‌عرض با عکس قبلی */
     margin: 20px auto;
     margin: 20px auto;
    /* نسبت تصویر پس‌زمینه */
     aspect-ratio: 1561 / 1008;
     aspect-ratio: 1561 / 1008;
 
     padding: clamp(28px, 8%, 92px) clamp(18px, 6%, 56px) clamp(18px, 6%, 56px);
    /* پدینگ ریسپانسیو با clamp */
     padding: clamp(40px, 12%, 120px) clamp(20px, 8%, 64px) clamp(20px, 8%, 64px);
 
     direction: rtl;
     direction: rtl;
     text-align: center;
     text-align: center;
    /* پس‌زمینه */
     background-image: url('https://dl.faraghaib.ir/m/105/12.png');
     background-image: url('https://dl.faraghaib.ir/m/105/12.png');
     background-size: 100% 100%;
     background-size: 100% 100%;
     background-position: center;
     background-position: center;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     color: #3e2723;
     color: #3e2723;
     box-sizing: border-box;
     box-sizing: border-box;
     font-family: 'IRANSans', sans-serif;
     font-family: 'IRANSans', sans-serif;
    overflow: hidden;
}


     /* جلوگیری از سرریز */
.wiki-custom-body {
     overflow: hidden;
     width: 100%;
    height: 100%;
     box-sizing: border-box;
}
}


/* تیتر بالای کارت */
/* تیتر بالا */
/* اصلاح اندازه فونت تیتر برای همسان‌سازی با بقیه متن */
.contact-intro {
.contact-intro {
     display: block;
     display: block;
     margin-bottom: clamp(15px, 3%, 30px);
     margin-bottom: clamp(12px, 2.5%, 24px);
    /* هم‌اندازه با .icon-block .caption */
     font-size: clamp(0.78em, 1.8vw, 0.95em);
     font-size: clamp(0.72em, 2vw, 0.9em);  
     line-height: 1.7;
     line-height: 1.6;
     color: #2e4633;
     color: #2e4633;
     font-weight: bold; /* برای تمایز اندک، حالت ضخیم حفظ شده است */
     font-weight: bold;
 
}
}


/* ============================
/* ردیف آیکون‌ها */
  ردیف آیکون‌ها — Flexbox
  ============================ */
.icons-row {
.icons-row {
     display: flex;
     display: flex;
     justify-content: space-around;
     justify-content: space-around;
     flex-wrap: wrap;
     flex-wrap: wrap;
     gap: clamp(10px, 2%, 24px);
     gap: clamp(10px, 2%, 22px);
     margin-top: 10px;
     margin-top: 10px;
}
}
خط ۶۳: خط ۵۴:
     text-align: center;
     text-align: center;
     flex: 1 1 0;
     flex: 1 1 0;
     min-width: 100px;
     min-width: 120px;
}
}


/* تصویر آیکون */
.icon-block img {
.icon-block img {
     width: clamp(28px, 5vw, 42px);
     width: clamp(30px, 4vw, 44px);
     height: clamp(28px, 5vw, 42px);
     height: clamp(30px, 4vw, 44px);
     margin-bottom: clamp(6px, 1.5%, 12px);
     margin-bottom: clamp(6px, 1.5%, 12px);
     object-fit: contain;
     object-fit: contain;
}
}


/* کپشن زیر آیکون */
.icon-block .caption {
.icon-block .caption {
     font-size: clamp(0.72em, 2vw, 0.9em);
     font-size: clamp(0.75em, 1.8vw, 0.92em);
     line-height: 1.6;
     line-height: 1.7;
     color: #3e2723;
     color: #3e2723;
}
}
خط ۸۵: خط ۷۴:
     color: #2e4633;
     color: #2e4633;
     margin-bottom: 4px;
     margin-bottom: 4px;
     font-size: clamp(0.8em, 2.2vw, 1em);
     font-size: clamp(0.85em, 2vw, 1em);
}
}


خط ۱۰۱: خط ۹۰:
}
}


/* بخش پایینی — آدرس و رزرو */
/* بخش پایینی */
.contact-footer {
.contact-footer {
     margin-top: clamp(20px, 4%, 40px);
     margin-top: clamp(18px, 3.5%, 34px);
     padding-top: clamp(15px, 3%, 25px);
     padding-top: clamp(12px, 2.5%, 20px);
     border-top: 1px solid rgba(46, 70, 51, 0.2);
     border-top: 1px solid rgba(46, 70, 51, 0.2);
     font-size: clamp(0.8em, 2.2vw, 0.95em);
     font-size: clamp(0.82em, 2vw, 0.95em);
     line-height: 1.8;
     line-height: 1.8;
     color: #3e2723;
     color: #3e2723;
خط ۱۱۵: خط ۱۰۴:
}
}


/* ============================
/* تبلت */
  مدیا کوئری‌ها
@media (max-width: 768px) {
  ============================ */
    .deniz-contact-card {
        padding: clamp(22px, 7%, 60px) clamp(14px, 4%, 30px) clamp(14px, 4%, 30px);
    }


/* تبلت — ۵ آیکون در یک ردیف */
@media (max-width: 768px) {
     .icon-block {
     .icon-block {
         min-width: 90px;
         min-width: 100px;
     }
     }
}
}


/* موبایل — ۳ ستون */
/* موبایل */
@media (max-width: 600px) {
@media (max-width: 600px) {
     .deniz-contact-card {
     .deniz-contact-card {
        /* حذف aspect-ratio برای جلوگیری از فشردگی محتوا */
         aspect-ratio: auto;
         aspect-ratio: auto;
         min-height: 420px;
         min-height: 420px;
        padding: 22px 14px 18px;
     }
     }


خط ۱۳۹: خط ۱۲۸:


     .icon-block {
     .icon-block {
         flex: 1 1 30%; /* ۳ ستون */
         flex: 1 1 30%;
         min-width: 80px;
         min-width: 80px;
     }
     }
}
}


/* موبایل کوچک — ۲ ستون */
/* موبایل کوچک */
@media (max-width: 380px) {
@media (max-width: 380px) {
     .icon-block {
     .icon-block {
         flex: 1 1 42%; /* ۲ ستون */
         flex: 1 1 42%;
         min-width: 70px;
         min-width: 70px;
     }
     }
خط ۱۵۳: خط ۱۴۲:
</style>
</style>


<!-- ============================
    داده‌های ساختاریافته Schema.org
    ============================ -->
<script type="application/ld+json">
<script type="application/ld+json">
{
{
خط ۱۷۵: خط ۱۶۱:
             "telephone": "+989188816696",
             "telephone": "+989188816696",
             "contactType": "reservations",
             "contactType": "reservations",
            "contactOption": "TollFree",
             "areaServed": "IR"
             "areaServed": "IR"
         }
         }
خط ۱۸۵: خط ۱۷۰:
</script>
</script>


<!-- ============================
    محتوای کارت
    ============================ -->
<section class="deniz-contact-card" aria-label="راه‌های ارتباطی عطاری و ادویه سرای حافظ">
<section class="deniz-contact-card" aria-label="راه‌های ارتباطی عطاری و ادویه سرای حافظ">
     <div class="wiki-custom-body">
     <div class="wiki-custom-body">
خط ۱۹۳: خط ۱۷۵:
         <b class="contact-intro">جهت دریافت اطلاعات بیشتر و پشتیبانی، از راه‌های ارتباطی زیر استفاده کنید:</b>
         <b class="contact-intro">جهت دریافت اطلاعات بیشتر و پشتیبانی، از راه‌های ارتباطی زیر استفاده کنید:</b>


        <!-- ردیف ۵ آیکون -->
         <nav class="icons-row" aria-label="اطلاعات تماس">
         <nav class="icons-row" aria-label="اطلاعات تماس">


            <!-- ۱. شماره تماس -->
             <div class="icon-block">
             <div class="icon-block">
                 <img src="https://dl.faraghaib.ir/m/100/phone.png"
                 <img src="https://dl.faraghaib.ir/m/100/phone.png"
خط ۲۰۷: خط ۱۸۷:
             </div>
             </div>


            <!-- ۲. تلگرام -->
             <div class="icon-block">
             <div class="icon-block">
                 <img src="https://dl.faraghaib.ir/m/100/telegram.png"
                 <img src="https://dl.faraghaib.ir/m/100/telegram.png"
خط ۲۲۰: خط ۱۹۹:
             </div>
             </div>


            <!-- ۳. آدرس -->
             <div class="icon-block">
             <div class="icon-block">
                 <img src="https://dl.faraghaib.ir/m/100/telegram.png"
                 <img src="https://dl.faraghaib.ir/m/100/telegram.png"
خط ۲۲۸: خط ۲۰۶:
                     <b>آدرس</b>
                     <b>آدرس</b>
                     <address style="font-style: normal; display: inline;">
                     <address style="font-style: normal; display: inline;">
                      <a href="https://neshan.org/maps/places/19087e7434f593216155a7c6bde38efd#c26.681-61.665-22z-0p"> شهر آشار</a>
                        <a href="https://neshan.org/maps/places/19087e7434f593216155a7c6bde38efd#c26.681-61.665-22z-0p">شهر آشار</a>
                     </address>
                     </address>
                 </div>
                 </div>
             </div>
             </div>


            <!-- ۴. رزرو سریع -->
             <div class="icon-block">
             <div class="icon-block">
                 <img src="https://dl.faraghaib.ir/m/100/telegram.png"
                 <img src="https://dl.faraghaib.ir/m/100/telegram.png"
خط ۲۴۴: خط ۲۲۱:
             </div>
             </div>


            <!-- ۵. مشاوره تلفنی -->
             <div class="icon-block">
             <div class="icon-block">
                 <img src="https://dl.faraghaib.ir/m/100/chat.png"
                 <img src="https://dl.faraghaib.ir/m/100/chat.png"
خط ۲۵۷: خط ۲۳۳:
         </nav>
         </nav>


        <!-- بخش پایینی -->
         <div class="contact-footer">
         <div class="contact-footer">
             <span><img src="https://dl.faraghaib.ir/m/100/chat.png"
             <span>
                <img src="https://dl.faraghaib.ir/m/100/chat.png"
                     alt="ثبت درخواست و مشاوره تلفنی"
                     alt="ثبت درخواست و مشاوره تلفنی"
                     loading="lazy" width="40" height="40"></span>
                     loading="lazy" width="40" height="40">
            <b>رزرو سریع و مشاوره:</b>
            <a href="tel:09188816696" title="مشاوره و رزرو">09188816696</a>
        </div>
 
    </div>
</section>
</html>
</html>

نسخهٔ ‏۱۶ ژوئیهٔ ۲۰۲۶، ساعت ۰۹:۲۳

جهت دریافت اطلاعات بیشتر و پشتیبانی، از راه‌های ارتباطی زیر استفاده کنید:
ثبت درخواست و مشاوره تلفنی

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:بخش_اطلاعات_تماس/عطاری_حافظ&oldid=3106»