پرش به محتوا

تست۳ - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(یک نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۹: خط ۹:
       content="width=device-width, initial-scale=1.0">
       content="width=device-width, initial-scale=1.0">


<title>کافه پاتوق محمد | قهوه خانه سنتی و پاتوق جوان‌ها</title>
<title>کافه پاتوق محمد | قهوه خانه سنتی، چای، صبحانه و عصرانه</title>


<meta name="description"
<meta name="description"
content="کافه پاتوق محمد؛ قهوه خانه سنتی با چای، املت، عدسی، صبحانه و عصرانه. جایی برای دورهمی، گپ دوستانه، صبحانه و یک عصر خوب.">
content="کافه پاتوق محمد؛ قهوه خانه سنتی با حال‌وهوای صمیمی برای چای، املت، عدسی، صبحانه، عصرانه و دورهمی دوستانه. یک پاتوق متفاوت برای جوان‌ها و علاقه‌مندان به فضای سنتی.">
 
<meta name="keywords"
content="کافه پاتوق محمد, قهوه خانه سنتی, کافه سنتی, چای, املت, عدسی, صبحانه, عصرانه, دورهمی, پاتوق جوانان">


<meta name="robots"
<meta name="robots"
content="index, follow">
      content="index, follow">
 
<meta name="author"
      content="کافه پاتوق محمد">
 
<meta property="og:title"
      content="کافه پاتوق محمد | قهوه خانه سنتی">
 
<meta property="og:description"
      content="چای، صبحانه، املت، عدسی، عصرانه و دورهمی در کافه پاتوق محمد">
 
<meta property="og:type"
      content="website">
 
<meta name="theme-color"
      content="#11100e">
 


<link rel="preconnect"
<link rel="preconnect"
خط ۳۵: خط ۵۴:
/* =========================================================
/* =========================================================
   PATOGH MOHAMMAD
   PATOGH MOHAMMAD
  TRADITIONAL CAFE / TEA HOUSE
   MOBILE FIRST
   MOBILE FIRST
========================================================= */
========================================================= */
خط ۴۱: خط ۵۹:
:root{
:root{


     --black:#11100e;
     --black:#0d0c0a;
     --black-2:#191713;
     --black-2:#15130f;
     --black-3:#242019;
     --black-3:#211d16;
 
    --gold:#d8ad45;
    --gold-light:#f1d98b;
    --yellow:#e8c968;


     --cream:#f4ead4;
     --gold:#d5aa45;
     --paper:#ead9b8;
     --gold-light:#f0d98c;
    --yellow:#e7c765;


     --brown:#684b2e;
     --cream:#f5ecdb;
     --brown-light:#9a7043;
     --cream-2:#fffaf0;


     --red:#7c2f24;
     --brown:#79552f;
    --brown-light:#a67b43;


     --white:#fffaf0;
     --text:#282219;
    --muted:#756a5b;


     --text:#29231b;
     --white:#fff;
    --muted:#827762;


     --border:rgba(216,173,69,.28);
     --border:
        rgba(213,170,69,.28);


     --shadow:
     --shadow:
         0 12px 35px rgba(0,0,0,.25);
         0 15px 40px rgba(0,0,0,.16);


     --container:1200px;
     --container:1200px;
خط ۷۸: خط ۹۵:


*{
*{
    box-sizing:border-box;
     margin:0;
     margin:0;
     padding:0;
     padding:0;
    box-sizing:border-box;
}
}


خط ۸۸: خط ۱۰۵:


body{
body{
    margin:0;


     font-family:
     font-family:
خط ۱۰۲: خط ۱۲۱:


     overflow-x:hidden;
     overflow-x:hidden;
    font-size:16px;
}
}


خط ۱۱۴: خط ۱۳۵:


a{
a{
 
    color:inherit;
     text-decoration:none;
     text-decoration:none;
}


     color:inherit;
button,
input{
     font-family:inherit;
}
}


.container{


/* =========================================================
    width:
  TEXTURE
        min(
========================================================= */
            calc(100% - 28px),
            var(--container)
        );


.paper-texture{
    margin-inline:auto;
}


    background-color:var(--cream);
.section{
 
    background-image:


        radial-gradient(
    padding:65px 0;
            rgba(104,75,46,.08) 1px,
            transparent 1px
        );


    background-size:14px 14px;
}
}




/* =========================================================
/* =========================================================
   CONTAINER
   SECTION TITLE
========================================================= */
========================================================= */


.container{
.section-title{


     width:min(
     text-align:center;
        calc(100% - 28px),
        var(--container)
    );


     margin-inline:auto;
     margin-bottom:35px;
}
}


.section{
.section-title .eyebrow{
 
    padding:55px 0;
 
    position:relative;
}
 
.section-title{
 
    text-align:center;
 
    margin-bottom:32px;
 
    position:relative;
}
 
.section-title .small-title{


     display:block;
     display:block;
خط ۱۷۶: خط ۱۷۹:
     color:var(--gold);
     color:var(--gold);


     font-size:.78rem;
     font-size:.9rem;


     font-weight:800;
     font-weight:800;


    letter-spacing:.5px;
     margin-bottom:6px;
 
     margin-bottom:5px;
}
}


.section-title h2{
.section-title h2{


     color:var(--black);
     font-family:
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     font-size:
     font-size:
         clamp(1.7rem,6vw,2.5rem);
         clamp(
            1.9rem,
            6vw,
            2.7rem
        );


     line-height:1.4;
     font-weight:400;


     font-family:"Lalezar","Vazirmatn",sans-serif;
     color:var(--black);


     font-weight:400;
     line-height:1.45;
}
}


.section-title p{
.section-title p{


     max-width:650px;
     max-width:680px;


     margin:8px auto 0;
     margin:9px auto 0;


     color:var(--muted);
     color:var(--muted);


     font-size:.88rem;
     font-size:.95rem;
 
    line-height:2;
}
}




/* =========================================================
/* =========================================================
   TOP STRIP
   TOP BAR
========================================================= */
========================================================= */


.top-strip{
.topbar{


     background:var(--black);
     background:var(--black);
خط ۲۲۱: خط ۲۳۱:
     color:var(--gold-light);
     color:var(--gold-light);


     border-bottom:1px solid var(--border);
     border-bottom:
        1px solid var(--border);


     padding:7px 0;
     text-align:center;


     font-size:.7rem;
     padding:8px 10px;


     text-align:center;
     font-size:.78rem;
}


    letter-spacing:.2px;
.topbar i{
}


.top-strip i{
    margin-left:5px;


     color:var(--yellow);
     color:var(--yellow);
    margin-left:5px;
}
}


خط ۲۴۴: خط ۲۵۳:
========================================================= */
========================================================= */


.header{
.site-header{
 
    background:
 
        linear-gradient(
            180deg,
            #12110e,
            #0d0c0a
        );
 
    color:#fff;


     position:sticky;
     position:sticky;
خط ۲۶۲: خط ۲۶۱:
     z-index:1000;
     z-index:1000;


     border-bottom:1px solid var(--border);
    background:
        rgba(13,12,10,.97);
 
    color:#fff;
 
     border-bottom:
        1px solid var(--border);


     box-shadow:
     box-shadow:
خط ۲۸۱: خط ۲۸۶:
}
}


.brand{
.logo{


     display:flex;
     display:flex;
خط ۲۸۷: خط ۲۹۲:
     align-items:center;
     align-items:center;


     gap:10px;
     gap:9px;
}
}


.brand-icon{
.logo-icon{
 
    width:44px;


     height:44px;
     width:43px;


     border-radius:50%;
     height:43px;


     border:2px solid var(--gold);
     border:2px solid var(--gold);


     color:var(--gold-light);
     border-radius:50%;


     display:grid;
     display:grid;
خط ۳۰۶: خط ۳۰۹:
     place-items:center;
     place-items:center;


     font-size:1.1rem;
     color:var(--gold-light);


     box-shadow:
     font-size:1.05rem;
        inset 0 0 0 4px rgba(216,173,69,.08);
}
}


.brand-name{
.logo-text{


     display:flex;
     display:flex;
خط ۳۱۸: خط ۳۲۰:
     flex-direction:column;
     flex-direction:column;


     line-height:1.25;
     line-height:1.35;
}
}


.brand-name strong{
.logo-text strong{


     font-family:"Lalezar","Vazirmatn",sans-serif;
     font-family:
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     color:var(--gold-light);
     color:var(--gold-light);


     font-size:1.25rem;
     font-size:1.3rem;


     font-weight:400;
     font-weight:400;
}
}


.brand-name span{
.logo-text span{


     color:#aaa092;
     color:#9d9587;


     font-size:.62rem;
     font-size:.66rem;
}
}


.desktop-menu{
.desktop-nav{


     display:none;
     display:none;
}
}


.header-button{
.header-cta{


     display:none;
     display:none;
خط ۳۵۱: خط ۳۵۶:


/* =========================================================
/* =========================================================
   HERO
   BANNER
========================================================= */
========================================================= */


.hero{
.banner-section{


     position:relative;
     background:#080807;


     min-height:650px;
     padding:10px;


     color:#fff;
     border-bottom:
        1px solid var(--border);
}


    background:
.banner{


        linear-gradient(
    width:100%;
            90deg,
            rgba(0,0,0,.92),
            rgba(0,0,0,.63),
            rgba(0,0,0,.78)
        ),


        url("IMAGE-HERO.jpg");
    max-width:1500px;


     background-size:cover;
     min-height:190px;


     background-position:center;
     max-height:520px;


     overflow:hidden;
     margin:auto;
}


    background:#11100e;


/* Decorative golden lines */
    border-radius:17px;


.hero::before{
    overflow:hidden;


     content:"";
     position:relative;


     position:absolute;
     display:flex;


     width:180px;
     align-items:center;


     height:180px;
     justify-content:center;
}


    border:1px solid rgba(216,173,69,.3);
.banner img{


     border-radius:50%;
     width:100%;


     left:-80px;
     height:auto;


     top:-70px;
     max-height:520px;
}


.hero::after{
    object-fit:contain;
 
    object-position:center;
}
 
.banner::after{


     content:"";
     content:"";
خط ۴۰۸: خط ۴۱۵:
     position:absolute;
     position:absolute;


     width:250px;
     inset:0;
 
    border:
        1px solid
        rgba(213,170,69,.35);


     height:250px;
     border-radius:17px;


     border:1px solid rgba(216,173,69,.12);
     pointer-events:none;
}


    border-radius:50%;
.banner-label{


     right:-110px;
     position:absolute;


     bottom:-100px;
     right:15px;
}


.hero-inner{
    bottom:14px;


     min-height:650px;
     background:
        rgba(10,9,7,.82);


     display:grid;
     color:var(--gold-light);


     grid-template-columns:1fr;
     padding:6px 12px;


     align-items:center;
     border-radius:8px;


     padding:55px 0;
     border:
        1px solid var(--border);


     position:relative;
     font-size:.72rem;


     z-index:2;
     font-weight:700;
}
}


.hero-content{


    max-width:720px;
/* =========================================================
}
  HERO
========================================================= */


.hero-stamp{
.hero{


     width:78px;
     min-height:610px;


     height:78px;
     position:relative;


     border:2px solid var(--gold);
     overflow:hidden;
 
    border-radius:50%;


     display:flex;
     display:flex;
خط ۴۵۷: خط ۴۶۸:
     align-items:center;
     align-items:center;


     justify-content:center;
     color:#fff;


     text-align:center;
     background-color:#17130e;
}


    color:var(--gold-light);


    font-size:.62rem;
/*
  تصویر محیط کافه
  عمداً محو شده
*/


    font-weight:800;
.hero-bg{


     transform:rotate(-8deg);
     position:absolute;


     margin-bottom:18px;
     inset:0;
}


.hero h1{
    width:100%;


     font-family:
     height:100%;
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     font-weight:400;
     object-fit:cover;


     font-size:
     object-position:center;
        clamp(2.5rem,11vw,5rem);


     line-height:1.15;
     filter:
        blur(5px);


     color:#fff;
     transform:scale(1.06);


     margin-bottom:12px;
     opacity:.58;
}
}


.hero h1 span{


    color:var(--gold-light);
/* لایه تاریک روی تصویر */
}


.hero-subtitle{
.hero::before{


     font-size:
     content:"";
        clamp(1rem,4vw,1.25rem);


     color:#ddd2bd;
     position:absolute;


     margin-bottom:20px;
     inset:0;
}


.hero-description{
    background:


    color:#bcb5a7;
        linear-gradient(
            90deg,
            rgba(8,7,5,.94),
            rgba(8,7,5,.68),
            rgba(8,7,5,.82)
        );


     font-size:.88rem;
     z-index:1;
}


    max-width:600px;


    margin-bottom:25px;
/* لکه نور */
}


.hero-actions{
.hero::after{


     display:flex;
     content:"";


     flex-direction:column;
     position:absolute;


     gap:10px;
     width:420px;
}


.btn{
    height:420px;


     min-height:50px;
     border-radius:50%;


     padding:10px 20px;
     background:
        radial-gradient(
            circle,
            rgba(213,170,69,.15),
            transparent 68%
        );


     border-radius:12px;
     left:-120px;


     display:inline-flex;
     bottom:-180px;


     align-items:center;
     z-index:1;
}


    justify-content:center;
.hero-inner{


     gap:8px;
     position:relative;


     font-size:.88rem;
     z-index:2;


     font-weight:800;
     width:100%;


     transition:.25s ease;
     min-height:610px;
}


.btn-gold{
    display:flex;


     background:var(--gold);
     align-items:center;


     color:var(--black);
     justify-content:center;


     box-shadow:
     text-align:center;
        0 8px 25px rgba(216,173,69,.22);
}
}


.btn-gold:hover{
.hero-content{


     background:var(--gold-light);
     max-width:760px;


     transform:translateY(-2px);
     margin:auto;
}
}


.btn-outline{
.hero-badge{


     border:1px solid rgba(216,173,69,.5);
     display:inline-flex;


     color:var(--gold-light);
     align-items:center;


     background:rgba(0,0,0,.2);
     gap:7px;
}


    padding:7px 13px;


/* =========================================================
    border-radius:30px;
  HERO SIDE NOTES
========================================================= */


.hero-notes{
    color:var(--gold-light);


     display:none;
     background:
}
        rgba(213,170,69,.1);


.hero-note{
    border:
        1px solid
        rgba(213,170,69,.35);


     position:absolute;
     font-size:.75rem;


     background:rgba(18,16,12,.85);
     font-weight:700;


     border:1px solid var(--border);
     margin-bottom:18px;
}


    padding:10px 13px;
.hero h1{


     border-radius:12px;
     font-family:
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     color:var(--gold-light);
     font-size:
        clamp(
            2.65rem,
            10vw,
            5.2rem
        );
 
    font-weight:400;
 
    line-height:1.25;
 
    margin-bottom:14px;


     font-size:.7rem;
     color:#fff;
}
}


.hero h1 span{


/* =========================================================
    color:var(--gold-light);
  MARQUEE-LIKE STATIC STRIP
}
========================================================= */
 
.ribbon{


    background:var(--gold);
.hero-text{


     color:var(--black);
     color:#e4dccd;


     padding:9px 0;
     font-size:
        clamp(
            .98rem,
            3.5vw,
            1.15rem
        );


     overflow:hidden;
     line-height:2;


     border-top:3px solid var(--black);
     max-width:680px;


     border-bottom:3px solid var(--black);
     margin:0 auto 24px;
}
}


.ribbon-inner{
.hero-actions{


     display:flex;
     display:flex;


     align-items:center;
     flex-direction:column;


     justify-content:center;
     align-items:stretch;


     flex-wrap:wrap;
     gap:10px;


     gap:15px;
     max-width:400px;


     font-weight:800;
     margin:auto;
 
    font-size:.72rem;
}
}


.ribbon span::before{
.btn{


     content:"✦";
     min-height:52px;


     margin-left:8px;
     padding:11px 20px;
}


    border-radius:11px;


/* =========================================================
    display:inline-flex;
  VIBE CARDS
 
========================================================= */
    justify-content:center;
 
    align-items:center;


.vibe{
    gap:8px;


     background:
     font-size:.88rem;
        var(--black-2);


     color:#fff;
     font-weight:800;


     overflow:hidden;
     transition:.2s ease;
}
}


.vibe .section-title h2{
.btn-gold{


     color:#fff;
     background:var(--gold);
}


.vibe .section-title p{
    color:#15120c;


     color:#aaa397;
     box-shadow:
        0 8px 25px
        rgba(213,170,69,.22);
}
}


.vibe-grid{
.btn-gold:hover{


     display:grid;
     background:var(--gold-light);


     grid-template-columns:
     transform:translateY(-2px);
        repeat(2,1fr);
 
    gap:10px;
}
}


.vibe-card{
.btn-outline{


     min-height:155px;
     border:
        1px solid
        rgba(255,255,255,.55);


     border:1px solid var(--border);
     color:#fff;


     border-radius:16px;
     background:
        rgba(0,0,0,.18);
}


    padding:18px 13px;
.btn-outline:hover{


     background:
     border-color:var(--gold);
        linear-gradient(
 
            145deg,
    color:var(--gold-light);
            #242018,
}
            #14130f
        );


    position:relative;
.hero-trust{


     overflow:hidden;
     margin-top:25px;
}


.vibe-card::after{
    display:flex;


     content:"";
     justify-content:center;


     position:absolute;
     align-items:center;


     width:75px;
     gap:10px;


     height:75px;
     color:#aaa294;


     border:1px solid rgba(216,173,69,.12);
     font-size:.72rem;
}


    border-radius:50%;
.trust-icons{


     left:-25px;
     display:flex;


     bottom:-25px;
     direction:ltr;
}
}


.vibe-icon{
.trust-icons span{


     color:var(--gold);
     width:30px;


     font-size:1.5rem;
     height:30px;


     margin-bottom:10px;
     margin-left:-7px;
}


.vibe-card h3{
    border-radius:50%;


     color:#fff;
     background:#67563b;


     font-size:.92rem;
     border:2px solid #1b1812;


     margin-bottom:3px;
     display:grid;
}


.vibe-card p{
    place-items:center;


     color:#918a7d;
     color:#fff;


     font-size:.7rem;
     font-size:.65rem;
}
}




/* =========================================================
/* =========================================================
   MENU
   BENEFITS
========================================================= */
========================================================= */


.menu-section{
.benefits{


     background:
     position:relative;
 
        linear-gradient(
            rgba(244,234,212,.95),
            rgba(244,234,212,.95)
        ),


        url("IMAGE-TEXTURE.jpg");
    z-index:5;


     background-size:cover;
     margin-top:-35px;
}
}


.menu-board{
.benefit-box{
 
    background:var(--cream-2);


     background:
     border-radius:20px;
        #171510;


     color:#fff;
     box-shadow:
        0 15px 45px rgba(0,0,0,.14);


     border:
     border:
         5px solid #9a7039;
         1px solid
        rgba(121,85,47,.15);
 
    padding:15px;
 
    display:grid;
 
    grid-template-columns:
        repeat(2,1fr);


     outline:
     gap:5px;
        1px solid var(--gold);
}


    outline-offset:-10px;
.benefit{


     border-radius:8px;
     padding:17px 9px;


     padding:35px 18px;
     text-align:center;


     box-shadow:
     border-left:
         0 15px 40px rgba(0,0,0,.25);
         1px solid
        rgba(121,85,47,.13);
}
}


.menu-board-title{
.benefit:nth-child(2n){


     text-align:center;
     border-left:0;
}


    color:var(--gold-light);
.benefit i{


     font-family:"Lalezar","Vazirmatn",sans-serif;
     width:48px;


     font-size:2rem;
     height:48px;


     font-weight:400;
     border-radius:50%;


     margin-bottom:25px;
     background:#eee4d1;
}


.menu-grid{
    color:var(--brown);


     display:grid;
     display:grid;


     grid-template-columns:1fr;
     place-items:center;
 
    margin:0 auto 9px;


     gap:12px;
     font-size:1.05rem;
}
}


.menu-item{
.benefit h3{


     display:grid;
     font-size:.9rem;


     grid-template-columns:
     margin-bottom:2px;
        50px 1fr auto;


     gap:10px;
     color:var(--black);
}


    align-items:center;
.benefit p{


     padding:12px 8px;
     font-size:.7rem;


     border-bottom:
     color:var(--muted);
        1px dashed rgba(216,173,69,.25);
}
 
.menu-item:last-child{


     border-bottom:0;
     line-height:1.7;
}
}


.menu-icon{


    width:42px;
/* =========================================================
  CATEGORIES
========================================================= */


    height:42px;
.categories{


     border-radius:50%;
     background:var(--cream-2);
}


    border:1px solid var(--gold);
.category-grid{


     display:grid;
     display:grid;


     place-items:center;
     grid-template-columns:
        repeat(2,1fr);


     color:var(--gold-light);
     gap:10px;
}
}


.menu-item h3{
.category-card{


     color:#fff;
     position:relative;


     font-size:.92rem;
     height:175px;


     margin-bottom:2px;
     overflow:hidden;
}


.menu-item p{
    border-radius:15px;


     color:#8f897d;
     background:#272119;


     font-size:.68rem;
     box-shadow:
        0 8px 25px rgba(0,0,0,.09);
}
}


.menu-price{
.category-card img{


     color:var(--gold-light);
     width:100%;


     font-size:.75rem;
     height:100%;


     white-space:nowrap;
     object-fit:cover;
 
    object-position:center;


     font-weight:800;
     transition:.3s ease;
}
}


.menu-note{
.category-card::after{


     text-align:center;
     content:"";


     color:#827b6e;
     position:absolute;


     font-size:.7rem;
     inset:0;


     margin-top:20px;
     background:
        linear-gradient(
            to top,
            rgba(0,0,0,.78),
            rgba(0,0,0,.04)
        );
}
}


.category-name{
    position:absolute;


/* =========================================================
    right:13px;
  FEATURED BREAKFAST
========================================================= */


.breakfast{
    bottom:12px;


     background:var(--black);
     z-index:2;


     color:#fff;
     color:#fff;
    font-size:.9rem;
    font-weight:800;
}
}


.breakfast-grid{
.category-name i{


     display:grid;
     color:var(--gold-light);


     grid-template-columns:1fr;
     margin-left:5px;
 
    gap:15px;
}
}


.food-card{


    border-radius:18px;
/* =========================================================
  POPULAR MENU
========================================================= */


    overflow:hidden;
.popular{


    border:1px solid var(--border);
     background:var(--cream);
 
     background:#1c1a15;
 
    box-shadow:var(--shadow);
}
}


.food-image{
.products-grid{


     height:220px;
    display:grid;
 
    grid-template-columns:
        repeat(2,1fr);
 
    gap:12px;
}
 
.product-card{
 
    background:#fff;
 
    border-radius:15px;
 
    overflow:hidden;
 
    border:
        1px solid
        rgba(121,85,47,.14);
 
    box-shadow:
        0 7px 25px rgba(0,0,0,.07);
 
    position:relative;
}
 
.product-image{
 
     height:170px;


     background:#2a261d;
     background:#e8ddc9;


     display:flex;
     display:flex;
خط ۹۳۵: خط ۱٬۰۰۵:


     justify-content:center;
     justify-content:center;
    padding:12px;


     overflow:hidden;
     overflow:hidden;
}
}


.food-image img{
.product-image img{


     width:100%;
     width:100%;
خط ۹۴۷: خط ۱٬۰۱۵:
     height:100%;
     height:100%;


     object-fit:contain;
     object-fit:cover;


     object-position:center;
     object-position:center;
}
}


.food-content{
.product-badge{


     padding:17px;
     position:absolute;
}


.food-content h3{
    top:9px;


     color:var(--gold-light);
     right:9px;


     font-size:1rem;
     background:var(--gold);


     margin-bottom:5px;
     color:#19150d;
}
 
    border-radius:7px;


.food-content p{
    padding:3px 7px;


     color:#999184;
     font-size:.63rem;


     font-size:.75rem;
     font-weight:800;
}
}


.product-info{
    padding:13px;
}


/* =========================================================
.product-info h3{
  YOUNG PEOPLE SECTION
========================================================= */


.young{
    color:var(--black);


     background:
     font-size:.95rem;
        var(--cream);


     position:relative;
     margin-bottom:3px;
}
}


.young-grid{
.product-info p{
 
    color:var(--muted);


     display:grid;
     font-size:.7rem;


     grid-template-columns:1fr;
     line-height:1.7;


     gap:15px;
     min-height:42px;
}
}


.young-card{
.rating{
 
    background:#fff;


     border:1px solid rgba(104,75,46,.15);
     margin:7px 0;


     border-radius:18px;
     color:#d89f22;


     padding:22px 18px;
     font-size:.65rem;
}


    position:relative;
.rating span{


     box-shadow:
     color:#8c8273;
        0 7px 25px rgba(75,53,32,.08);


     overflow:hidden;
     margin-right:4px;
}
}


.young-card::before{
.product-bottom{


     content:"";
     display:flex;


     position:absolute;
     align-items:center;


     width:80px;
     justify-content:space-between;


     height:80px;
     gap:7px;
}


     border-radius:50%;
.price{
 
     color:var(--brown);


     background:rgba(216,173,69,.10);
     font-size:.78rem;


     left:-25px;
     font-weight:900;


     top:-25px;
     white-space:nowrap;
}
}


.young-card i{
.buy-btn{


     font-size:1.45rem;
     background:var(--black);


     color:var(--brown);
     color:var(--gold-light);
 
    margin-bottom:10px;
}


.young-card h3{
    border:0;


     color:var(--black);
     border-radius:8px;
 
    font-size:.98rem;
 
    margin-bottom:5px;
}


.young-card p{
    padding:7px 9px;


     color:var(--muted);
     font-size:.66rem;


     font-size:.76rem;
     font-weight:700;
}
}




/* =========================================================
/* =========================================================
   QUOTE
   SPECIAL OFFER
========================================================= */
========================================================= */


.quote-section{
.offer{


     background:
     padding:25px 0;
        linear-gradient(
            135deg,
            #171510,
            #2b2418
        );


     color:#fff;
     background:var(--cream);
}


    text-align:center;
.offer-box{


     padding:65px 20px;
     min-height:220px;


     position:relative;
     border-radius:22px;


     overflow:hidden;
     overflow:hidden;
}


.quote-section::before{
    position:relative;


     content:"«";
     display:flex;
 
    align-items:center;
 
    background:
 
        linear-gradient(
            90deg,
            rgba(15,13,9,.95),
            rgba(37,29,18,.83)
        );
}
 
.offer-image{


     position:absolute;
     position:absolute;


     font-family:Georgia,serif;
     inset:0;


     font-size:15rem;
     width:100%;


     color:rgba(216,173,69,.06);
     height:100%;


     top:-100px;
     object-fit:cover;


     right:5%;
     opacity:.27;
}
}


.quote-section blockquote{
.offer-content{


     position:relative;
     position:relative;


     max-width:800px;
     z-index:2;


     margin:auto;
     padding:30px 25px;


     color:var(--gold-light);
     max-width:650px;
 
    font-family:"Lalezar","Vazirmatn",sans-serif;
 
    font-size:
        clamp(1.5rem,6vw,2.6rem);
 
    line-height:1.6;
}
}


.quote-author{
.offer-label{


     margin-top:10px;
     display:inline-block;


     color:#958c7c;
     background:var(--gold);


     font-size:.75rem;
     color:#1a150d;
}


    border-radius:7px;


/* =========================================================
    padding:4px 9px;
  PHOTO WALL
========================================================= */


.gallery{
    font-size:.68rem;


     background:var(--black-2);
     font-weight:900;


     color:#fff;
     margin-bottom:8px;
}
}


.gallery-grid{
.offer h2{


     display:grid;
     color:var(--gold-light);


     grid-template-columns:
     font-family:
         repeat(2,1fr);
         "Lalezar",
        "Vazirmatn",
        sans-serif;


     gap:8px;
     font-weight:400;
}


.gallery-item{
    font-size:
        clamp(
            1.8rem,
            6vw,
            2.8rem
        );


     height:170px;
     line-height:1.4;
}


    border-radius:12px;
.offer p{


     overflow:hidden;
     color:#d0c5b3;


     background:#29251e;
     font-size:.82rem;


     border:1px solid var(--border);
     line-height:2;


     position:relative;
     margin-bottom:15px;
}
}


.gallery-item.large{


    grid-column:span 2;
/* =========================================================
  ATMOSPHERE
========================================================= */


    height:210px;
.atmosphere{
}


.gallery-item img{
    background:var(--black);


     width:100%;
     color:#fff;
 
}
    height:100%;


    object-fit:cover;
.atmosphere .section-title h2{


     object-position:center;
     color:#fff;
}
}


.gallery-label{
.atmosphere .section-title p{


     position:absolute;
     color:#aaa093;
}


    bottom:7px;
.atmosphere-grid{


     right:7px;
     display:grid;


     background:rgba(0,0,0,.75);
     grid-template-columns:
        repeat(2,1fr);
 
    gap:10px;
}
 
.atmosphere-card{


     color:var(--gold-light);
     min-height:175px;


     border:1px solid var(--border);
     padding:20px 15px;


     padding:3px 8px;
     border:
        1px solid
        var(--border);


     border-radius:7px;
     border-radius:15px;


     font-size:.6rem;
     background:
        linear-gradient(
            145deg,
            #252118,
            #15130f
        );
}
}


.atmosphere-card i{


/* =========================================================
    color:var(--gold);
  SOCIAL
========================================================= */


.social{
     font-size:1.45rem;
 
     background:var(--cream);


     text-align:center;
     margin-bottom:9px;
}
}


.social-box{
.atmosphere-card h3{


     background:#fff;
     color:#fff;


     border:1px solid rgba(104,75,46,.18);
     font-size:.95rem;


     border-radius:22px;
     margin-bottom:5px;
 
    padding:30px 18px;
 
    box-shadow:
        0 8px 30px rgba(0,0,0,.07);
}
}


.social-icons{
.atmosphere-card p{


     display:flex;
     color:#aaa092;


     justify-content:center;
     font-size:.73rem;


     gap:10px;
     line-height:1.9;
 
    margin-top:18px;
}
}


.social-icons a{


    width:45px;
/* =========================================================
  BLOG
========================================================= */
 
.blog{


     height:45px;
     background:var(--cream-2);
}


    border-radius:50%;
.blog-grid{


     display:grid;
     display:grid;


     place-items:center;
     grid-template-columns:1fr;


     background:var(--black);
     gap:14px;
}


    color:var(--gold-light);
.blog-card{


     border:1px solid var(--border);
     background:#fff;


     transition:.2s;
     border-radius:16px;
}


.social-icons a:hover{
    overflow:hidden;


     background:var(--gold);
     border:
        1px solid
        rgba(121,85,47,.13);


     color:var(--black);
     box-shadow:
        0 8px 25px rgba(0,0,0,.07);
}
}


.blog-image{


/* =========================================================
    height:190px;
  CTA
========================================================= */


.cta{
    background:#ddd0ba;


     background:
     overflow:hidden;
}


        linear-gradient(
.blog-image img{
            rgba(12,11,9,.93),
            rgba(12,11,9,.93)
        ),


        url("IMAGE-CAFE.jpg");
    width:100%;


     background-size:cover;
     height:100%;


     background-position:center;
     object-fit:cover;


     color:#fff;
     object-position:center;
}


    text-align:center;
.blog-content{


     padding:70px 15px;
     padding:17px;
}
}


.cta h2{
.blog-content .date{


     font-family:"Lalezar","Vazirmatn",sans-serif;
     color:var(--brown-light);


    color:var(--gold-light);
     font-size:.68rem;
 
     font-size:
        clamp(2rem,8vw,3rem);
 
    font-weight:400;
 
    margin-bottom:8px;
}
}


.cta p{
.blog-content h3{


     color:#bcb4a6;
     font-size:1rem;


     font-size:.85rem;
     color:var(--black);


     max-width:600px;
     margin:5px 0;


     margin:0 auto 20px;
     line-height:1.7;
}
}


.cta-actions{
.blog-content p{


     display:flex;
     color:var(--muted);


     flex-direction:column;
     font-size:.76rem;


     gap:10px;
     line-height:1.9;
 
    justify-content:center;
}
}


.read-more{


/* =========================================================
    display:inline-flex;
  FOOTER
========================================================= */


.footer{
    align-items:center;


     background:#0b0a08;
     gap:6px;


     color:#fff;
    margin-top:10px;
 
     color:var(--brown);


     padding:40px 0 85px;
     font-size:.73rem;


     border-top:1px solid var(--border);
     font-weight:800;
}
}


.footer-grid{


    display:grid;
/* =========================================================
  CTA
========================================================= */
 
.cta{


     grid-template-columns:1fr;
     background:


    gap:25px;
        linear-gradient(
}
            rgba(11,10,8,.92),
            rgba(11,10,8,.92)
        ),


.footer h3{
        url("IMAGE-CAFE-INTERIOR.jpg");


     color:var(--gold-light);
     background-size:cover;


     font-family:"Lalezar","Vazirmatn",sans-serif;
     background-position:center;


     font-size:1.15rem;
     color:#fff;


     font-weight:400;
     text-align:center;


     margin-bottom:8px;
     padding:75px 15px;
}
}


.footer p,
.cta h2{
.footer li{


     color:#817a6e;
     font-family:
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     font-size:.72rem;
     font-size:
        clamp(
            2.1rem,
            8vw,
            3.4rem
        );
 
    color:var(--gold-light);
 
    font-weight:400;
 
    margin-bottom:8px;
}
}


.footer ul{
.cta p{
 
    max-width:650px;
 
    margin:0 auto 22px;


     list-style:none;
     color:#c5baaa;


     display:grid;
     font-size:.88rem;


     gap:5px;
     line-height:2;
}
}


.footer-bottom{
.cta-actions{


     border-top:1px solid rgba(216,173,69,.12);
     display:flex;


     margin-top:25px;
     flex-direction:column;


     padding-top:18px;
     gap:10px;
 
    text-align:center;


     color:#625c51;
     max-width:400px;


     font-size:.65rem;
     margin:auto;
}
}




/* =========================================================
/* =========================================================
   MOBILE NAV
   FOOTER
========================================================= */
========================================================= */


.mobile-nav{
.footer{


     position:fixed;
     background:#0a0907;


     right:0;
     color:#fff;


     left:0;
     padding:50px 0 90px;


     bottom:0;
     border-top:
        1px solid var(--border);
}


    height:65px;
.footer-grid{


     display:grid;
     display:grid;


     grid-template-columns:
     grid-template-columns:1fr;
        repeat(5,1fr);


     background:#11100e;
     gap:30px;
}


    border-top:1px solid var(--border);
.footer h3{


     z-index:9999;
     color:var(--gold-light);


     box-shadow:
     font-family:
         0 -5px 25px rgba(0,0,0,.3);
         "Lalezar",
}
        "Vazirmatn",
        sans-serif;


.mobile-nav a{
    font-weight:400;


     display:flex;
     font-size:1.25rem;


     flex-direction:column;
     margin-bottom:8px;
}


    align-items:center;
.footer p,
.footer li{


     justify-content:center;
     color:#918879;


     gap:2px;
     font-size:.78rem;
 
    color:#827b6d;


     font-size:.59rem;
     line-height:2;
}
}


.mobile-nav i{
.footer ul{


     font-size:1rem;
     list-style:none;
}


.mobile-nav a.active{
    display:grid;


     color:var(--gold-light);
     gap:5px;
}
}


.footer li i{


/* =========================================================
    width:20px;
  TABLET
========================================================= */


@media (min-width:600px){
    color:var(--gold);
}


    .hero-actions{
.footer-social{


        flex-direction:row;
    display:flex;
    }


     .btn{
     gap:8px;


        min-width:150px;
    margin-top:14px;
    }
}


    .vibe-grid{
.footer-social a{


        grid-template-columns:
    width:38px;
            repeat(4,1fr);
    }


     .menu-grid{
     height:38px;


        grid-template-columns:
    display:grid;
            repeat(2,1fr);


        column-gap:30px;
    place-items:center;
    }


     .breakfast-grid{
     border:
        1px solid var(--border);


        grid-template-columns:
    border-radius:50%;
            repeat(2,1fr);
    }


     .young-grid{
     color:var(--gold-light);
}


        grid-template-columns:
.footer-bottom{
            repeat(2,1fr);
    }


     .gallery-grid{
     border-top:
        1px solid
        rgba(213,170,69,.12);


        grid-template-columns:
    margin-top:30px;
            repeat(4,1fr);
    }


     .gallery-item.large{
     padding-top:18px;


        grid-column:span 2;
    text-align:center;
    }


     .cta-actions{
     color:#6f685d;


        flex-direction:row;
    font-size:.68rem;
    }
}
}




/* =========================================================
/* =========================================================
   DESKTOP
   MOBILE BOTTOM NAV
========================================================= */
========================================================= */


@media (min-width:900px){
.mobile-nav{


     .section{
     position:fixed;


        padding:85px 0;
    right:0;
    }


     .desktop-menu{
     bottom:0;


        display:flex;
    left:0;


        align-items:center;
    height:67px;


        gap:22px;
    background:#11100e;
    }


     .desktop-menu a{
     border-top:
        1px solid var(--border);


        color:#bcb4a6;
    z-index:9999;


        font-size:.78rem;
    display:grid;


        font-weight:600;
    grid-template-columns:
        repeat(5,1fr);


         transition:.2s;
    box-shadow:
    }
         0 -6px 25px rgba(0,0,0,.3);
}


    .desktop-menu a:hover{
.mobile-nav a{


        color:var(--gold-light);
    display:flex;
    }


     .header-button{
     flex-direction:column;


        display:inline-flex;
    align-items:center;


        align-items:center;
    justify-content:center;


        gap:7px;
    gap:3px;


        padding:8px 13px;
    color:#8e8678;


        border:1px solid var(--border);
    font-size:.63rem;


        border-radius:10px;
    font-weight:600;
}


        color:var(--gold-light);
.mobile-nav i{


        font-size:.7rem;
    font-size:1rem;
}


        font-weight:700;
.mobile-nav a.active{
    }


     .hero-inner{
     color:var(--gold-light);
}


        min-height:720px;


         padding:70px 0;
/* =========================================================
  TABLET
========================================================= */
 
@media (min-width:600px){
 
    .banner{
 
         min-height:250px;
     }
     }


     .hero-notes{
     .hero-actions{


         display:block;
         flex-direction:row;
 
        position:absolute;


         inset:0;
         justify-content:center;


         pointer-events:none;
         max-width:none;
     }
     }


     .hero-note.note-one{
     .btn{
 
        top:22%;


         left:5%;
         min-width:160px;
     }
     }


     .hero-note.note-two{
     .benefit-box{


         bottom:20%;
         grid-template-columns:
            repeat(4,1fr);


         left:15%;
         padding:8px;
     }
     }


     .hero-note.note-three{
     .benefit{
 
        top:30%;


         right:5%;
         border-left:
            1px solid
            rgba(121,85,47,.13);
     }
     }


     .menu-board{
     .benefit:nth-child(2n){


         padding:50px 55px;
         border-left:
            1px solid
            rgba(121,85,47,.13);
     }
     }


     .menu-grid{
     .benefit:last-child{


         column-gap:60px;
         border-left:0;
     }
     }


     .breakfast-grid{
     .category-grid{


         grid-template-columns:
         grid-template-columns:
             repeat(3,1fr);
             repeat(5,1fr);
     }
     }


     .food-image{
     .products-grid{


         height:270px;
         grid-template-columns:
            repeat(3,1fr);
     }
     }


     .young-grid{
     .atmosphere-grid{


         grid-template-columns:
         grid-template-columns:
خط ۱٬۶۴۳: خط ۱٬۷۳۵:
     }
     }


     .gallery-item{
     .blog-grid{


         height:220px;
         grid-template-columns:
            repeat(3,1fr);
     }
     }


     .gallery-item.large{
     .cta-actions{


         height:300px;
         flex-direction:row;
    }


    .footer-grid{
        justify-content:center;


         grid-template-columns:
         max-width:none;
            1.5fr 1fr 1fr;
     }
     }
}


    .footer{


        padding-bottom:40px;
/* =========================================================
    }
  DESKTOP
========================================================= */
 
@media (min-width:900px){


     .mobile-nav{
     body{


         display:none;
         font-size:17px;
     }
     }
}


    .section{


/* =========================================================
        padding:90px 0;
  LARGE
    }
========================================================= */
 
@media (min-width:1200px){


     .hero h1{
     .banner-section{


         font-size:5rem;
         padding:14px;
     }
     }
}


/* =========================================================
    .banner{
  ACCESSIBILITY
========================================================= */


@media (prefers-reduced-motion:reduce){
        min-height:320px;


    html{
         border-radius:20px;
         scroll-behavior:auto;
     }
     }


     *,
     .banner::after{
    *::before,
    *::after{
 
        transition:none !important;


         animation:none !important;
         border-radius:20px;
     }
     }
}


</style>
    .desktop-nav{


</head>
        display:flex;


        align-items:center;


<body>
        gap:24px;
    }


    .desktop-nav a{


<!-- =====================================================
        color:#bdb4a5;
    TOP STRIP
===================================================== -->


<div class="top-strip">
        font-size:.8rem;


    <div class="container">
        font-weight:600;


         <i class="fa-solid fa-mug-hot"></i>
         transition:.2s;
    }


        یه چای، یه گپ، یه پاتوق خوب...
    .desktop-nav a:hover{


         <i class="fa-solid fa-mug-saucer"></i>
         color:var(--gold-light);
    }


     </div>
     .header-cta{


</div>
        display:inline-flex;


        align-items:center;


        gap:7px;


<!-- =====================================================
        border:
    HEADER
            1px solid var(--border);
===================================================== -->


<header class="header">
        border-radius:9px;


    <div class="container header-inner">
        color:var(--gold-light);


        padding:8px 13px;


         <a href="#home"
         font-size:.72rem;
          class="brand">


            <span class="brand-icon">
        font-weight:700;
    }


                <i class="fa-solid fa-mug-hot"></i>
    .hero{


            </span>
        min-height:690px;
    }


            <span class="brand-name">
    .hero-inner{


                <strong>
        min-height:690px;
                    کافه پاتوق محمد
    }
                </strong>


                <span>
    .hero-text{
                    قهوه خانه سنتی و پاتوق دوستانه
                </span>


            </span>
        font-size:1.08rem;
    }


        </a>
    .benefits{


        margin-top:-45px;
    }


        <nav class="desktop-menu"
    .benefit-box{
            aria-label="منوی اصلی">


            <a href="#menu">
        padding:10px;
                منو
    }
            </a>


            <a href="#vibe">
    .benefit{
                حال و هوا
            </a>


            <a href="#breakfast">
        padding:18px;
                صبحانه
    }
            </a>


            <a href="#gallery">
    .benefit h3{
                فضای کافه
            </a>


            <a href="#contact">
        font-size:.95rem;
                تماس
    }
            </a>


        </nav>
    .benefit p{


        font-size:.73rem;
    }


        <a href="#menu"
    .category-card{
          class="header-button">


            <i class="fa-solid fa-utensils"></i>
        height:220px;
    }


            دیدن منو
    .products-grid{


         </a>
         grid-template-columns:
            repeat(4,1fr);
    }


     </div>
     .product-image{


</header>
        height:220px;
    }


    .product-info{


        padding:15px;
    }


<main>
    .product-info h3{


        font-size:1rem;
    }


<!-- =====================================================
    .product-info p{
    HERO
===================================================== -->


<section class="hero"
        font-size:.72rem;
        id="home">
    }


     <div class="container hero-inner">
     .blog-image{


        height:220px;
    }


        <div class="hero-content">
    .footer{


            <div class="hero-stamp">
        padding-bottom:45px;
    }


                پاتوق
    .footer-grid{
                <br>
                محمد
                <br>
                ۱۴۰۵


             </div>
        grid-template-columns:
             1.5fr 1fr 1fr;
    }


    .mobile-nav{


            <h1>
        display:none;
    }
}


                اینجا فقط
                <span>
                    چای نمی‌خوریم!
                </span>


            </h1>
/* =========================================================
  LARGE DESKTOP
========================================================= */


@media (min-width:1200px){


            <div class="hero-subtitle">
    .hero h1{


                یه پاتوق برای چای، صبحانه،
        font-size:5.2rem;
                گپ و خاطره ساختیم.
    }


            </div>
    .hero{


        min-height:720px;
    }


            <p class="hero-description">
    .hero-inner{


                کافه پاتوق محمد؛ حال‌وهوای قهوه‌خانه‌های
        min-height:720px;
                قدیمی با سلیقه امروز.
    }
                جایی برای صبحانه، املت، عدسی، چای و عصرانه؛
                برای وقتی که دلت یک جای خودمانی می‌خواهد.


            </p>
    .banner{


        min-height:350px;
    }
}


            <div class="hero-actions">


                <a href="#menu"
/* =========================================================
                  class="btn btn-gold">
  ACCESSIBILITY
========================================================= */


                    <i class="fa-solid fa-utensils"></i>
@media (prefers-reduced-motion:reduce){


                    منوی پاتوق
    html{
        scroll-behavior:auto;
    }


                </a>
    *,
    *::before,
    *::after{


        animation:none !important;


                <a href="#vibe"
        transition:none !important;
                  class="btn btn-outline">
    }
}


                    <i class="fa-solid fa-heart"></i>
</style>


                    چرا پاتوق؟
</head>


                </a>


            </div>
<body>


        </div>


<!-- =====================================================
    TOP BAR
===================================================== -->


        <div class="hero-notes">
<div class="topbar">


            <div class="hero-note note-one">
    <i class="fa-solid fa-mug-hot"></i>
                ☕ چای تازه‌دم
            </div>


            <div class="hero-note note-two">
    یه چای، یه گپ، یه پاتوق خوب...
                🍳 املت مخصوص
            </div>


            <div class="hero-note note-three">
</div>
                ✦ جای رفیق‌بازی
            </div>


        </div>


    </div>
<!-- =====================================================
    HEADER
===================================================== -->


</section>
<header class="site-header">


    <div class="container header-inner">




<!-- =====================================================
        <a href="#home"
    RIBBON
          class="logo"
===================================================== -->
          aria-label="کافه پاتوق محمد">


<div class="ribbon">
            <span class="logo-icon">


    <div class="container ribbon-inner">
                <i class="fa-solid fa-mug-hot"></i>


        <span>
             </span>
             صبحانه
        </span>


        <span>
             <span class="logo-text">
             چای
        </span>


        <span>
                <strong>
            املت
                    کافه پاتوق محمد
        </span>
                </strong>


        <span>
                <span>
            عدسی
                    قهوه خانه سنتی و دورهمی
        </span>
                </span>


        <span>
             </span>
             عصرانه
        </span>


        <span>
         </a>
            دورهمی
         </span>


    </div>


</div>
        <nav class="desktop-nav"
            aria-label="منوی اصلی">


            <a href="#home">
                خانه
            </a>


            <a href="#menu">
                منو
            </a>


<!-- =====================================================
            <a href="#why">
    VIBE
                درباره پاتوق
===================================================== -->
            </a>


<section class="section vibe"
            <a href="#gallery">
        id="vibe">
                فضای کافه
            </a>


    <div class="container">
            <a href="#blog">
                مجله پاتوق
            </a>


            <a href="#contact">
                تماس
            </a>


         <div class="section-title">
         </nav>


            <span class="small-title">
                حال‌وهوای پاتوق
            </span>


            <h2>
        <a href="#menu"
                اینجا قراره بهت خوش بگذره
          class="header-cta">
            </h2>


             <p>
             <i class="fa-solid fa-utensils"></i>
                پاتوق محمد برای کسانی است که یک جای
                ساده، صمیمی و متفاوت برای وقت گذراندن می‌خواهند.
            </p>


        </div>
            مشاهده منو


        </a>


        <div class="vibe-grid">
    </div>


</header>


            <article class="vibe-card">


                <div class="vibe-icon">
<main>
                    <i class="fa-solid fa-mug-hot"></i>
 
                </div>


                <h3>
<!-- =====================================================
                    چای و گپ
    TOP BANNER
                </h3>
===================================================== -->


                <p>
<section class="banner-section"
                    چای تازه‌دم و حرف‌هایی که قرار نیست زود تمام شوند.
        aria-label="بنر کافه پاتوق محمد">
                </p>


            </article>
    <div class="container">


        <div class="banner">


             <article class="vibe-card">
             <img
                src="https://dl.faraghaib.ir/m/260012-01/baner-01-01.png"
                alt="بنر تبلیغاتی کافه پاتوق محمد"
                loading="eager"
            >


                <div class="vibe-icon">
            <span class="banner-label">
                    <i class="fa-solid fa-users"></i>
                </div>


                 <h3>
                 <i class="fa-solid fa-mug-hot"></i>
                    دورهمی رفیقانه
                </h3>


                 <p>
                 کافه پاتوق محمد
                    یک میز، چند رفیق و کلی حرف نگفته.
                </p>


             </article>
             </span>


        </div>


            <article class="vibe-card">
    </div>


                <div class="vibe-icon">
</section>
                    <i class="fa-solid fa-camera"></i>
                </div>


                <h3>
                    جای عکس گرفتن
                </h3>


                <p>
<!-- =====================================================
                    فضای سنتی و متفاوت برای ثبت لحظه‌های خوب.
    HERO
                </p>
===================================================== -->


            </article>
<section class="hero"
        id="home"
        aria-labelledby="hero-title">




            <article class="vibe-card">
    <!--
        تصویر محیط کافه
        تصویر عمداً با CSS محو می‌شود
    -->


                <div class="vibe-icon">
    <img
                    <i class="fa-solid fa-music"></i>
        class="hero-bg"
                </div>
        src="https://dl.faraghaib.ir/m/260012-01/260012-01-01.jpg"
        alt=""
        aria-hidden="true"
    >


                <h3>
                    حال خوب
                </h3>


                <p>
    <div class="container hero-inner">
                    جایی برای فاصله گرفتن از شلوغی روزمره.
                </p>


            </article>
        <div class="hero-content">




        </div>
            <div class="hero-badge">


    </div>
                <i class="fa-solid fa-star"></i>


</section>
                یک پاتوق متفاوت برای آدم‌های متفاوت


            </div>




<!-- =====================================================
            <h1 id="hero-title">
    MENU
===================================================== -->


<section class="section menu-section"
                اینجا فقط
        id="menu">
                <span>
 
                    چای نمی‌خوری...
    <div class="container">
                </span>


            </h1>


        <div class="section-title">


             <span class="small-title">
             <p class="hero-text">
                منوی پاتوق
            </span>


            <h2>
                اینجا جایی برای چند دقیقه فاصله گرفتن از
                 ساده، خوشمزه، خودمونی
                شلوغی روزمره است؛
            </h2>
                 برای یک چای داغ، صبحانه، املت، عدسی،
                عصرانه و البته یک گپ دوستانه.


            <p>
                منوی اولیه بر اساس آیتم‌هایی که گفتی طراحی شده
                و می‌توانی نام، توضیحات و قیمت‌ها را تغییر بدهی.
             </p>
             </p>


        </div>


            <div class="hero-actions">


        <div class="menu-board">
                <a href="#menu"
                  class="btn btn-gold">


                    <i class="fa-solid fa-utensils"></i>


            <div class="menu-board-title">
                    مشاهده منو


                 منوی کافه پاتوق محمد
                 </a>


            </div>


                <a href="#why"
                  class="btn btn-outline">


            <div class="menu-grid">
                    درباره پاتوق


                    <i class="fa-solid fa-arrow-left"></i>


                 <article class="menu-item">
                 </a>


                    <div class="menu-icon">
            </div>
                        <i class="fa-solid fa-mug-hot"></i>
                    </div>


                    <div>


                        <h3>
            <div class="hero-trust">
                            چای
                        </h3>


                        <p>
                <div class="trust-icons">
                            چای تازه‌دم برای یک گپ درست‌وحسابی
                        </p>


                     </div>
                     <span>
                        <i class="fa-solid fa-user"></i>
                    </span>


                     <div class="menu-price">
                     <span>
                        قیمت
                        <i class="fa-solid fa-user"></i>
                     </div>
                     </span>


                </article>
                    <span>
                        <i class="fa-solid fa-user"></i>
                    </span>


                    <span>
                        <i class="fa-solid fa-user"></i>
                    </span>


                 <article class="menu-item">
                 </div>


                    <div class="menu-icon">
                <span>
                        <i class="fa-solid fa-egg"></i>
                    جای رفیق‌بازی و دورهمی
                    </div>
                </span>


                    <div>
            </div>


                        <h3>
        </div>
                            املت
                        </h3>


                        <p>
    </div>
                            ساده، داغ و مناسب شروع یک روز خوب
                        </p>


                    </div>
</section>


                    <div class="menu-price">
                        قیمت
                    </div>


                </article>
<!-- =====================================================
    BENEFITS
===================================================== -->


<section class="benefits"
        aria-label="مزایای کافه پاتوق محمد">


                <article class="menu-item">
    <div class="container">


                    <div class="menu-icon">
        <div class="benefit-box">
                        <i class="fa-solid fa-bowl-food"></i>
                    </div>


                    <div>


                        <h3>
            <article class="benefit">
                            عدسی
                        </h3>


                        <p>
                <i class="fa-solid fa-mug-hot"></i>
                            یک انتخاب گرم و دلچسب برای صبح
                        </p>


                     </div>
                <h3>
                     چای تازه‌دم
                </h3>


                    <div class="menu-price">
                <p>
                        قیمت
                    برای یک گپ طولانی
                    </div>
                </p>


                </article>
            </article>




                <article class="menu-item">
            <article class="benefit">


                    <div class="menu-icon">
                <i class="fa-solid fa-egg"></i>
                        <i class="fa-solid fa-sun"></i>
                    </div>


                     <div>
                <h3>
                     صبحانه و املت
                </h3>


                        <h3>
                <p>
                            صبحانه
                    شروع خوشمزه روز
                        </h3>
                </p>


                        <p>
            </article>
                            برای شروع روز با انرژی و حال خوب
                        </p>


                    </div>


                    <div class="menu-price">
            <article class="benefit">
                        قیمت
                    </div>


                 </article>
                 <i class="fa-solid fa-users"></i>


                <h3>
                    فضای دوستانه
                </h3>


                 <article class="menu-item">
                 <p>
                    مناسب دورهمی
                </p>


                    <div class="menu-icon">
            </article>
                        <i class="fa-solid fa-cookie-bite"></i>
                    </div>


                    <div>


                        <h3>
            <article class="benefit">
                            عصرانه
                        </h3>


                        <p>
                <i class="fa-solid fa-heart"></i>
                            یک انتخاب خوشمزه برای عصرهای دوستانه
                        </p>


                     </div>
                <h3>
                     حال خوب
                </h3>


                    <div class="menu-price">
                <p>
                        قیمت
                    یک پاتوق متفاوت
                    </div>
                </p>


                </article>
            </article>




                <article class="menu-item">
        </div>


                    <div class="menu-icon">
    </div>
                        <i class="fa-solid fa-people-group"></i>
                    </div>


                    <div>
</section>


                        <h3>
                            دورهمی
                        </h3>


                        <p>
<!-- =====================================================
                            میزت را با رفیق‌هایت شریک شو
    CATEGORIES
                        </p>
===================================================== -->


                    </div>
<section class="section categories"
        id="menu">


                    <div class="menu-price">
    <div class="container">
                        ویژه
                    </div>


                </article>


        <div class="section-title">


             </div>
            <span class="eyebrow">
                چیزی برای هر سلیقه
             </span>


            <h2>
                منوی پاتوق
            </h2>


             <div class="menu-note">
             <p>
                از چای تازه‌دم و صبحانه تا املت، عدسی و عصرانه؛
                انتخاب با توست.
            </p>


                قیمت‌ها و آیتم‌های نهایی منو را می‌توانید
        </div>
                مطابق منوی واقعی کافه جایگزین کنید.


            </div>


         </div>
         <div class="category-grid">


    </div>


</section>
            <a href="#tea"
              class="category-card">


                <img
                    src="https://dl.faraghaib.ir/m/260012-01/260012-01-13.jpg"
                    alt="چای تازه دم کافه پاتوق محمد"
                    loading="lazy"
                >


                <span class="category-name">


<!-- =====================================================
                    <i class="fa-solid fa-mug-hot"></i>
    BREAKFAST
===================================================== -->


<section class="section breakfast"
                    چای
        id="breakfast">


    <div class="container">
                </span>


            </a>


        <div class="section-title">


             <span class="small-title">
             <a href="#omelet"
                صبح‌های پاتوق
              class="category-card">
            </span>


            <h2 style="color:#fff;">
                <img
                 صبحانه‌ای که ارزش بیدار شدن دارد!
                    src="https://dl.faraghaib.ir/m/260012-01/260012-01-01.jpg"
            </h2>
                    alt="املت کافه پاتوق محمد"
                    loading="lazy"
                 >


            <p>
                 <span class="category-name">
                صبحانه یکی از بخش‌های جذاب برای جذب مشتری‌های جوان،
                 دانشجوها، کارمندها و دورهمی‌های صبحگاهی است.
            </p>


        </div>
                    <i class="fa-solid fa-egg"></i>


                    املت


        <div class="breakfast-grid">
                </span>


            </a>


            <article class="food-card">


                <div class="food-image">
            <a href="#adasi"
              class="category-card">


                    <img
                <img
                        src="IMAGE-OMELET.jpg"
                    src="https://dl.faraghaib.ir/m/260012-01/260012-01-25.jpg"
                        alt="املت کافه پاتوق محمد"
                    alt="عدسی کافه پاتوق محمد"
                        loading="lazy"
                    loading="lazy"
                    >
                >


                 </div>
                 <span class="category-name">


                <div class="food-content">
                    <i class="fa-solid fa-bowl-food"></i>


                     <h3>
                     عدسی
                        املت پاتوق
                    </h3>


                    <p>
                </span>
                        یک انتخاب ساده، گرم و محبوب برای صبحانه.
                    </p>


                </div>
            </a>


            </article>


            <a href="#breakfast"
              class="category-card">


            <article class="food-card">
                <img
                    src="https://dl.faraghaib.ir/m/260012-01/260012-01-08.jpg"
                    alt="صبحانه سنتی کافه پاتوق محمد"
                    loading="lazy"
                >


                 <div class="food-image">
                 <span class="category-name">


                     <img
                     <i class="fa-solid fa-sun"></i>
                        src="IMAGE-ADASI.jpg"
                        alt="عدسی صبحانه کافه پاتوق محمد"
                        loading="lazy"
                    >


                </div>
                    صبحانه


                 <div class="food-content">
                 </span>


                    <h3>
            </a>
                        عدسی
                    </h3>


                    <p>
                        گرم، دلچسب و مناسب یک صبح آرام.
                    </p>


                </div>
            <a href="#snack"
              class="category-card">


            </article>
                <img
                    src="https://dl.faraghaib.ir/m/260012-01/260012-01-26.jpg"
                    alt="عصرانه کافه پاتوق محمد"
                    loading="lazy"
                >


                <span class="category-name">


            <article class="food-card">
                    <i class="fa-solid fa-cookie-bite"></i>


                <div class="food-image">
                    عصرانه


                    <img
                </span>
                        src="IMAGE-BREAKFAST.jpg"
                        alt="صبحانه سنتی کافه پاتوق محمد"
                        loading="lazy"
                    >


                </div>
             </a>
 
                <div class="food-content">
 
                    <h3>
                        صبحانه سنتی
                    </h3>
 
                    <p>
                        شروع روز با طعم و حال‌وهوای ایرانی.
                    </p>
 
                </div>
 
             </article>




خط ۲٬۳۷۹: خط ۲٬۴۳۸:


</section>
</section>




<!-- =====================================================
<!-- =====================================================
     YOUNG PEOPLE
     POPULAR
===================================================== -->
===================================================== -->


<section class="section young">
<section class="section popular"
        aria-labelledby="popular-title">


     <div class="container">
     <div class="container">
خط ۲٬۳۹۳: خط ۲٬۴۵۲:
         <div class="section-title">
         <div class="section-title">


             <span class="small-title">
             <span class="eyebrow">
                 پاتوق نسل جدید
                 انتخاب پاتوقی‌ها
             </span>
             </span>


             <h2>
             <h2 id="popular-title">
                 چرا جوان‌ها باید پاتوق محمد را امتحان کنند؟
                 محبوب‌ترین‌های پاتوق
             </h2>
             </h2>


             <p>
             <p>
                 چون یک کافه خوب فقط غذا و نوشیدنی نیست؛
                 چند انتخاب خوشمزه برای شروع تجربه
                 جایی است که دوست داری دوباره به آن برگردی.
                 کافه پاتوق محمد.
             </p>
             </p>


خط ۲٬۴۰۹: خط ۲٬۴۶۸:




         <div class="young-grid">
         <div class="products-grid">




             <article class="young-card">
             <!-- PRODUCT 1 -->


                <i class="fa-solid fa-camera-retro"></i>
            <article class="product-card">


                 <h3>
                 <div class="product-image">
                    فضای اینستاگرامی
                </h3>


                <p>
                    <img
                    ترکیب فضای سنتی، رنگ‌های گرم و المان‌های
                        src="https://dl.faraghaib.ir/m/260012-01/260012-01-07.jpg"
                     قدیمی می‌تواند برای عکس و تولید محتوا جذاب باشد.
                        alt="چای مخصوص کافه پاتوق محمد"
                </p>
                        loading="lazy"
                     >


            </article>
                </div>


                <span class="product-badge">
                    محبوب
                </span>


            <article class="young-card">
                <div class="product-info">


                <i class="fa-solid fa-gamepad"></i>
                    <h3>
                        چای مخصوص پاتوق
                    </h3>


                <h3>
                    <p>
                     وقت‌گذرانی با رفیق‌ها
                        چای تازه‌دم مناسب گپ‌های دوستانه
                </h3>
                     </p>


                <p>
                     <div class="rating">
                    یک جای خودمانی برای حرف زدن، خندیدن و
                     دورهم بودن بدون تشریفات.
                </p>


            </article>
                        ★★★★★


                        <span>
                            ۴.۹
                        </span>


            <article class="young-card">
                    </div>


                <i class="fa-solid fa-laptop"></i>
                    <div class="product-bottom">


                <h3>
                        <strong class="price">
                    یک گوشه برای خودت
                            قیمت
                </h3>
                        </strong>


                <p>
                        <button class="buy-btn">
                    اگر دنبال فضایی متفاوت برای مطالعه،
                            سفارش
                    کار یا کمی خلوت کردن هستی، پاتوق می‌تواند
                        </button>
                    انتخاب متفاوتی باشد.
                </p>


            </article>
                    </div>


                </div>


             <article class="young-card">
             </article>


                <i class="fa-solid fa-heart"></i>


                <h3>
            <!-- PRODUCT 2 -->
                    حس نوستالژی
                </h3>


                <p>
            <article class="product-card">
                    حال‌وهوای قهوه‌خانه‌های قدیمی با زبان
                    طراحی امروزی و مناسب نسل جوان.
                </p>


            </article>
                <div class="product-image">


                    <img
                        src="https://dl.faraghaib.ir/m/260012-01/260012-01-05.jpg"
                        alt="املت مخصوص کافه پاتوق محمد"
                        loading="lazy"
                    >


        </div>
                </div>


    </div>
                <span class="product-badge">
                    محبوب
                </span>


</section>
                <div class="product-info">


                    <h3>
                        املت مخصوص
                    </h3>


                    <p>
                        داغ و تازه برای شروع یک روز خوب
                    </p>


<!-- =====================================================
                    <div class="rating">
    QUOTE
===================================================== -->


<section class="quote-section">
                        ★★★★★


    <blockquote>
                        <span>
                            ۴.۸
                        </span>


        «بعضی قرارها را نمی‌شود در خانه گذاشت...
                    </div>
        باید آمد پاتوق.»


    </blockquote>
                    <div class="product-bottom">


    <div class="quote-author">
                        <strong class="price">
                            قیمت
                        </strong>


        کافه پاتوق محمد
                        <button class="buy-btn">
                            سفارش
                        </button>


    </div>
                    </div>


</section>
                </div>


            </article>




<!-- =====================================================
            <!-- PRODUCT 3 -->
    GALLERY
===================================================== -->


<section class="section gallery"
            <article class="product-card">
        id="gallery">


    <div class="container">
                <div class="product-image">


                    <img
                        src="https://dl.faraghaib.ir/m/260012-01/260012-01-26.jpg"
                        alt="عدسی صبحانه کافه پاتوق محمد"
                        loading="lazy"
                    >


        <div class="section-title">
                </div>


            <span class="small-title">
                <span class="product-badge">
                 قاب‌های پاتوق
                    صبحانه
            </span>
                 </span>


            <h2 style="color:#fff;">
                <div class="product-info">
                اینجا را باید دید!
            </h2>


            <p>
                    <h3>
                تصاویر واقعی فضای کافه، غذاها و دورهمی‌ها را
                        عدسی
                در این قسمت قرار بده تا صفحه شخصیت بیشتری پیدا کند.
                    </h3>
            </p>
 
                    <p>
                        انتخابی گرم و دلچسب برای صبح
                    </p>


        </div>
                    <div class="rating">


                        ★★★★★


        <div class="gallery-grid">
                        <span>
                            ۴.۷
                        </span>


                    </div>


            <div class="gallery-item large">
                    <div class="product-bottom">


                <img
                        <strong class="price">
                    src="IMAGE-CAFE-1.jpg"
                            قیمت
                    alt="فضای داخلی کافه پاتوق محمد"
                        </strong>
                    loading="lazy"
                >


                <span class="gallery-label">
                        <button class="buy-btn">
                    فضای پاتوق
                            سفارش
                </span>
                        </button>


            </div>
                    </div>


                </div>


             <div class="gallery-item">
             </article>


                <img
                    src="IMAGE-CAFE-2.jpg"
                    alt="فضای سنتی کافه پاتوق محمد"
                    loading="lazy"
                >


                <span class="gallery-label">
            <!-- PRODUCT 4 -->
                    حال خوب
                </span>


             </div>
             <article class="product-card">


                <div class="product-image">


            <div class="gallery-item">
                    <img
                        src="https://dl.faraghaib.ir/m/260012-01/260012-01-26.jpg"
                        alt="عصرانه کافه پاتوق محمد"
                        loading="lazy"
                    >


                 <img
                 </div>
                    src="IMAGE-TEA.jpg"
                    alt="چای تازه دم کافه پاتوق محمد"
                    loading="lazy"
                >


                 <span class="gallery-label">
                 <span class="product-badge">
                     چای تازه‌دم
                     جدید
                 </span>
                 </span>


            </div>
                <div class="product-info">


                    <h3>
                        عصرانه پاتوق
                    </h3>
                    <p>
                        مناسب عصرهای دوستانه و دورهمی
                    </p>
                    <div class="rating">


            <div class="gallery-item">
                        ★★★★★


                <img
                        <span>
                    src="IMAGE-FRIENDS.jpg"
                            ۴.۸
                    alt="دورهمی دوستان در کافه پاتوق محمد"
                        </span>
                    loading="lazy"
                >


                <span class="gallery-label">
                     </div>
                     دورهمی
                </span>


            </div>
                    <div class="product-bottom">


                        <strong class="price">
                            قیمت
                        </strong>


            <div class="gallery-item">
                        <button class="buy-btn">
                            سفارش
                        </button>


                <img
                    </div>
                    src="IMAGE-BREAKFAST-2.jpg"
                    alt="صبحانه سنتی در کافه پاتوق محمد"
                    loading="lazy"
                >


                <span class="gallery-label">
                 </div>
                    صبحانه
                 </span>


             </div>
             </article>




خط ۲٬۶۱۹: خط ۲٬۶۹۶:


</section>
</section>




<!-- =====================================================
<!-- =====================================================
     SOCIAL
     SPECIAL OFFER
===================================================== -->
===================================================== -->


<section class="section social">
<section class="offer">


     <div class="container">
     <div class="container">


        <div class="offer-box">
            <img
                class="offer-image"
                src="https://dl.faraghaib.ir/m/260012-01/260012-01-08.jpg"
                alt=""
                aria-hidden="true"
                loading="lazy"
            >
            <div class="offer-content">


        <div class="social-box">
                <span class="offer-label">


            <div class="section-title"
                    پیشنهاد ویژه پاتوق
                style="margin-bottom:0;">


                <span class="small-title">
                    پاتوق مجازی
                 </span>
                 </span>


                 <h2>
                 <h2>
                     عکس‌هات رو با ما شریک شو
 
                     صبح را با یک
                    <br>
                    صبحانه خوب شروع کن!
 
                 </h2>
                 </h2>


                 <p>
                 <p>
                    اگر از پاتوق عکس گرفتی، ما را در شبکه‌های اجتماعی
                    تگ کن تا قاب تو هم بخشی از داستان پاتوق شود.
                </p>


            </div>
                    اگر صبح‌ها دنبال یک جای متفاوت
                    برای چای، املت یا صبحانه هستی،
                    پاتوق محمد منتظر توست.


                </p>


            <div class="social-icons">
                <a href="#contact"
                  class="btn btn-gold">


                <a href="#"
                    <i class="fa-solid fa-location-dot"></i>
                  aria-label="اینستاگرام">


                     <i class="fa-brands fa-instagram"></i>
                     پیدا کردن پاتوق
 
                </a>
 
                <a href="#"
                  aria-label="تلگرام">
 
                    <i class="fa-brands fa-telegram"></i>
 
                </a>
 
                <a href="#"
                  aria-label="واتساپ">
 
                    <i class="fa-brands fa-whatsapp"></i>


                 </a>
                 </a>
خط ۲٬۶۸۲: خط ۲٬۷۵۸:


</section>
</section>




<!-- =====================================================
<!-- =====================================================
     CTA
     WHY
===================================================== -->
===================================================== -->


<section class="cta"
<section class="section atmosphere"
         id="contact">
         id="why">


     <div class="container">
     <div class="container">


        <h2>
            قرار بعدی کجاست؟
        </h2>


         <p>
         <div class="section-title">
            اگر دنبال یک جای صمیمی برای چای، صبحانه،
            عصرانه یا دورهمی هستی، شاید پاتوق محمد
            همان جایی باشد که دنبالش می‌گشتی.
        </p>


            <span class="eyebrow">
                چرا پاتوق محمد؟
            </span>


        <div class="cta-actions">
            <h2>
                فقط یک کافه نیست
            </h2>


             <a href="tel:02100000000"
             <p>
              class="btn btn-gold">
                پاتوق یعنی جایی که بعد از اولین بار،
                دلت می‌خواهد دوباره به آن برگردی.
            </p>


                <i class="fa-solid fa-phone"></i>
        </div>


                تماس با پاتوق


            </a>
        <div class="atmosphere-grid">




             <a href="#menu"
             <article class="atmosphere-card">
              class="btn btn-outline">


                 <i class="fa-solid fa-mug-hot"></i>
                 <i class="fa-solid fa-house"></i>


                 دیدن منو
                 <h3>
                    حس خودمانی
                </h3>


            </a>
                <p>
                    بدون تشریفات و فاصله؛
                    یک فضای راحت برای نشستن و گپ زدن.
                </p>


        </div>
            </article>


    </div>


</section>
            <article class="atmosphere-card">


                <i class="fa-solid fa-camera"></i>


</main>
                <h3>
                    فضای متفاوت
                </h3>


                <p>
                    ترکیب المان‌های سنتی با حال‌وهوای
                    مناسب نسل امروز.
                </p>


            </article>


<!-- =====================================================
    FOOTER
===================================================== -->
<footer class="footer">
    <div class="container">
        <div class="footer-grid">


            <article class="atmosphere-card">


            <div>
                <i class="fa-solid fa-users"></i>


                 <h3>
                 <h3>
                     کافه پاتوق محمد
                     دورهمی
                 </h3>
                 </h3>


                 <p>
                 <p>
                     قهوه‌خانه سنتی با حال‌وهوای امروزی؛
                     قرار دوستانه، گپ شبانه یا
                    جایی برای چای، صبحانه، عصرانه،
                     یک صبحانه جمعی.
                     گپ دوستانه و دورهمی.
                 </p>
                 </p>


             </div>
             </article>




             <div>
             <article class="atmosphere-card">
 
                <i class="fa-solid fa-heart"></i>


                 <h3>
                 <h3>
                     منوی پاتوق
                     خاطره‌سازی
                 </h3>
                 </h3>


                 <ul>
                 <p>
                    قرار نیست فقط چیزی بخوری؛
                    قرار است یک خاطره خوب بسازی.
                </p>
 
            </article>
 
 
        </div>
 
    </div>
 
</section>
 
 
<!-- =====================================================
    BLOG
===================================================== -->
 
<section class="section blog"
        id="blog">
 
    <div class="container">
 


                    <li>
        <div class="section-title">
                        چای
                    </li>


                    <li>
            <span class="eyebrow">
                        املت
                مجله پاتوق
                    </li>
            </span>


                     <li>
            <h2>
                         عدسی
                از دنیای پاتوق
                     </li>
            </h2>
 
 
                     <li>
            <p>
                         صبحانه
                مطالب کوتاه و جذاب درباره چای،
                     </li>
                صبحانه، قهوه‌خانه‌های سنتی و فرهنگ دورهمی.
 
            </p>
                     <li>
 
                         عصرانه
        </div>
                     </li>
 
 
 
                 </ul>
        <div class="blog-grid">
 
 
             </div>
 
 
            <article class="blog-card">
 
 
             <div>
                <div class="blog-image">
 
 
                 <h3>
                    <img
                     اطلاعات تماس
                        src="https://dl.faraghaib.ir/m/260012-01/260012-01-17.jpg"
                 </h3>
                        alt="تاریخچه چای و فرهنگ چای نوشیدن"
 
                        loading="lazy"
                 <ul>
                    >
 
 
                     <li>
                </div>
                         <i class="fa-solid fa-phone"></i>
 
                         021-00000000
                <div class="blog-content">
                     </li>
 
                    <span class="date">
                        مجله پاتوق
                    </span>
 
                    <h3>
                        چرا چای بخش جدانشدنی دورهمی‌های ایرانی است؟
                    </h3>
 
                    <p>
                        نگاهی کوتاه به فرهنگ چای و جایگاه آن
                        در دورهمی‌های دوستانه.
                    </p>
 
                    <a href="#"
                      class="read-more">
 
                        ادامه مطلب
 
                        <i class="fa-solid fa-arrow-left"></i>
 
                    </a>
 
                </div>
 
            </article>
 
 
            <article class="blog-card">
 
                <div class="blog-image">
 
                    <img
                        src="https://dl.faraghaib.ir/m/260012-01/260012-01-21.JPG"
                        alt="صبحانه سنتی ایرانی"
                        loading="lazy"
                    >
 
                </div>
 
                <div class="blog-content">
 
                    <span class="date">
                        مجله پاتوق
                    </span>
 
                    <h3>
                        یک صبحانه سنتی خوب چه ویژگی‌هایی دارد؟
                    </h3>
 
                    <p>
                        صبحانه ساده، گرم و خوشمزه؛
                        همان چیزی که یک روز خوب نیاز دارد.
                    </p>
 
                    <a href="#"
                      class="read-more">
 
                        ادامه مطلب
 
                        <i class="fa-solid fa-arrow-left"></i>
 
                    </a>
 
                </div>
 
            </article>
 
 
            <article class="blog-card">
 
                <div class="blog-image">
 
                    <img
                        src="https://dl.faraghaib.ir/m/260012-01/260012-01-22.JPG"
                        alt="فضای قهوه خانه سنتی"
                        loading="lazy"
                    >
 
                </div>
 
                <div class="blog-content">
 
                    <span class="date">
                        مجله پاتوق
                    </span>
 
                    <h3>
                        قهوه‌خانه سنتی یا کافه مدرن؛ چرا ترکیب این دو جذاب است؟
                    </h3>
 
                    <p>
                        ترکیب نوستالژی و سلیقه امروزی می‌تواند
                        تجربه‌ای متفاوت برای جوان‌ها بسازد.
                    </p>
 
                    <a href="#"
                      class="read-more">
 
                        ادامه مطلب
 
                        <i class="fa-solid fa-arrow-left"></i>
 
                    </a>
 
                </div>
 
            </article>
 
 
        </div>
 
    </div>
 
</section>
 
 
<!-- =====================================================
    CTA
===================================================== -->
 
<section class="cta"
        id="contact">
 
    <div class="container">
 
        <h2>
            قرار بعدی، پاتوق؟
        </h2>
 
        <p>
            یک چای، یک صبحانه یا یک عصرانه...
            هر دلیلی که داشته باشی،
            پاتوق محمد می‌تواند مقصد بعدی دورهمی شما باشد.
        </p>
 
 
        <div class="cta-actions">
 
            <a href="tel:02100000000"
              class="btn btn-gold">
 
                <i class="fa-solid fa-phone"></i>
 
                تماس با پاتوق
 
            </a>
 
 
            <a href="#menu"
              class="btn btn-outline">
 
                <i class="fa-solid fa-utensils"></i>
 
                دیدن منو
 
            </a>
 
        </div>
 
    </div>
 
</section>
 
 
</main>
 
 
<!-- =====================================================
    FOOTER
===================================================== -->
 
<footer class="footer">
 
    <div class="container">
 
        <div class="footer-grid">
 
 
            <div>
 
                <h3>
                    کافه پاتوق محمد
                </h3>
 
                <p>
                    قهوه‌خانه سنتی با حال‌وهوای امروزی؛
                    جایی برای چای، صبحانه، املت،
                    عدسی، عصرانه و دورهمی دوستانه.
                </p>
 
 
                <div class="footer-social">
 
                    <a href="#"
                      aria-label="اینستاگرام">
 
                        <i class="fa-brands fa-instagram"></i>
 
                    </a>
 
                    <a href="#"
                      aria-label="تلگرام">
 
                        <i class="fa-brands fa-telegram"></i>
 
                    </a>
 
                    <a href="#"
                      aria-label="واتساپ">
 
                        <i class="fa-brands fa-whatsapp"></i>
 
                    </a>
 
                </div>
 
            </div>
 
 
            <div>
 
                <h3>
                    دسترسی سریع
                </h3>
 
                <ul>
 
                    <li>
                        <a href="#home">
                            خانه
                        </a>
                    </li>
 
                     <li>
                         <a href="#menu">
                            منو
                        </a>
                     </li>
 
                     <li>
                         <a href="#why">
                            درباره پاتوق
                        </a>
                    </li>
 
                    <li>
                        <a href="#blog">
                            مجله پاتوق
                        </a>
                     </li>
 
                     <li>
                         <a href="#contact">
                            تماس
                        </a>
                     </li>
 
                 </ul>
 
             </div>
 
 
             <div>
 
                 <h3>
                     اطلاعات کافه
                 </h3>
 
                 <ul>
 
                     <li>
 
                        <i class="fa-solid fa-location-dot"></i>
 
                        آدرس کافه
 
                    </li>
 
                    <li>
 
                         <i class="fa-solid fa-phone"></i>
 
                         021-00000000
 
                     </li>
 
                    <li>
 
                        <i class="fa-solid fa-clock"></i>
 
                        ساعات کاری
 
                    </li>
 
                    <li>
 
                        <i class="fa-solid fa-mug-hot"></i>


                    <li>
                         چای و صبحانه
                         <i class="fa-solid fa-location-dot"></i>
                        آدرس کافه
                    </li>


                    <li>
                        <i class="fa-solid fa-clock"></i>
                        ساعات کاری
                     </li>
                     </li>


خط ۲٬۸۳۰: خط ۳٬۲۱۹:
         <div class="footer-bottom">
         <div class="footer-bottom">


             © تمامی حقوق برای کافه پاتوق محمد محفوظ است.
             © تمامی حقوق برای
            <strong>
                کافه پاتوق محمد
            </strong>
            محفوظ است.


         </div>
         </div>
خط ۲٬۸۳۷: خط ۳٬۲۳۰:


</footer>
</footer>




خط ۲٬۸۴۵: خط ۳٬۲۳۷:


<nav class="mobile-nav"
<nav class="mobile-nav"
     aria-label="منوی موبایل">
     aria-label="منوی پایین موبایل">




خط ۲٬۸۶۷: خط ۳٬۲۵۹:




     <a href="#breakfast">
     <a href="#why">


         <i class="fa-solid fa-egg"></i>
         <i class="fa-solid fa-heart"></i>


         صبحانه
         پاتوق


     </a>
     </a>




     <a href="#gallery">
     <a href="#blog">


         <i class="fa-solid fa-camera"></i>
         <i class="fa-solid fa-newspaper"></i>


         عکس‌ها
         مجله


     </a>
     </a>

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

کافه پاتوق محمد | قهوه خانه سنتی، چای، صبحانه و عصرانه

یه چای، یه گپ، یه پاتوق خوب...
مشاهده منو
یک پاتوق متفاوت برای آدم‌های متفاوت

اینجا فقط چای نمی‌خوری...

اینجا جایی برای چند دقیقه فاصله گرفتن از شلوغی روزمره است؛ برای یک چای داغ، صبحانه، املت، عدسی، عصرانه و البته یک گپ دوستانه.

مشاهده منو درباره پاتوق
جای رفیق‌بازی و دورهمی

چای تازه‌دم

برای یک گپ طولانی

صبحانه و املت

شروع خوشمزه روز

فضای دوستانه

مناسب دورهمی

حال خوب

یک پاتوق متفاوت

انتخاب پاتوقی‌ها

چند انتخاب خوشمزه برای شروع تجربه کافه پاتوق محمد.

چای مخصوص کافه پاتوق محمد
محبوب

چای مخصوص پاتوق

چای تازه‌دم مناسب گپ‌های دوستانه

★★★★★ ۴.۹
قیمت
املت مخصوص کافه پاتوق محمد
محبوب

املت مخصوص

داغ و تازه برای شروع یک روز خوب

★★★★★ ۴.۸
قیمت
عدسی صبحانه کافه پاتوق محمد
صبحانه

عدسی

انتخابی گرم و دلچسب برای صبح

★★★★★ ۴.۷
قیمت
عصرانه کافه پاتوق محمد
جدید

عصرانه پاتوق

مناسب عصرهای دوستانه و دورهمی

★★★★★ ۴.۸
قیمت
پیشنهاد ویژه پاتوق

صبح را با یک
صبحانه خوب شروع کن!

اگر صبح‌ها دنبال یک جای متفاوت برای چای، املت یا صبحانه هستی، پاتوق محمد منتظر توست.

پیدا کردن پاتوق
چرا پاتوق محمد؟

فقط یک کافه نیست

پاتوق یعنی جایی که بعد از اولین بار، دلت می‌خواهد دوباره به آن برگردی.

حس خودمانی

بدون تشریفات و فاصله؛ یک فضای راحت برای نشستن و گپ زدن.

فضای متفاوت

ترکیب المان‌های سنتی با حال‌وهوای مناسب نسل امروز.

دورهمی

قرار دوستانه، گپ شبانه یا یک صبحانه جمعی.

خاطره‌سازی

قرار نیست فقط چیزی بخوری؛ قرار است یک خاطره خوب بسازی.

مجله پاتوق

از دنیای پاتوق

مطالب کوتاه و جذاب درباره چای، صبحانه، قهوه‌خانه‌های سنتی و فرهنگ دورهمی.

تاریخچه چای و فرهنگ چای نوشیدن
مجله پاتوق

چرا چای بخش جدانشدنی دورهمی‌های ایرانی است؟

نگاهی کوتاه به فرهنگ چای و جایگاه آن در دورهمی‌های دوستانه.

ادامه مطلب
صبحانه سنتی ایرانی
مجله پاتوق

یک صبحانه سنتی خوب چه ویژگی‌هایی دارد؟

صبحانه ساده، گرم و خوشمزه؛ همان چیزی که یک روز خوب نیاز دارد.

ادامه مطلب
فضای قهوه خانه سنتی
مجله پاتوق

قهوه‌خانه سنتی یا کافه مدرن؛ چرا ترکیب این دو جذاب است؟

ترکیب نوستالژی و سلیقه امروزی می‌تواند تجربه‌ای متفاوت برای جوان‌ها بسازد.

ادامه مطلب

قرار بعدی، پاتوق؟

یک چای، یک صبحانه یا یک عصرانه... هر دلیلی که داشته باشی، پاتوق محمد می‌تواند مقصد بعدی دورهمی شما باشد.

تماس با پاتوق دیدن منو

کافه پاتوق محمد

قهوه‌خانه سنتی با حال‌وهوای امروزی؛ جایی برای چای، صبحانه، املت، عدسی، عصرانه و دورهمی دوستانه.

اطلاعات کافه

  • آدرس کافه
  • 021-00000000
  • ساعات کاری
  • چای و صبحانه
© تمامی حقوق برای کافه پاتوق محمد محفوظ است.

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=تست۳&oldid=7046»