پرش به محتوا

تست۳ - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
خط ۶: خط ۶:
<meta charset="UTF-8">
<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0">


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


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


<meta name="robots" content="index, follow">
<meta name="keywords"
content="کافه پاتوق محمد, قهوه خانه سنتی, کافه سنتی, چای, املت, عدسی, صبحانه, عصرانه, دورهمی, پاتوق جوانان">


<link rel="preconnect" href="https://fonts.googleapis.com">
<meta name="robots"
      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"
      href="https://fonts.googleapis.com">


<link rel="preconnect"
<link rel="preconnect"
خط ۳۲: خط ۵۴:
/* =========================================================
/* =========================================================
   PATOGH MOHAMMAD
   PATOGH MOHAMMAD
  TRADITIONAL CAFE
   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:#716656;


     --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:
خط ۱۱۳: خط ۱۳۵:


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


     color:inherit;
button,
input{
     font-family:inherit;
}
}
/* =========================================================
  CONTAINER
========================================================= */


.container{
.container{


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


     margin-inline:auto;
     margin-inline:auto;
خط ۱۳۶: خط ۱۵۷:
.section{
.section{


     padding:60px 0;
     padding:65px 0;


    position:relative;
}
}
/* =========================================================
  SECTION TITLE
========================================================= */


.section-title{
.section-title{
خط ۱۴۵: خط ۱۷۰:
     text-align:center;
     text-align:center;


     margin-bottom:34px;
     margin-bottom:35px;
 
    position:relative;
}
}


.section-title .small-title{
.section-title .eyebrow{


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


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


     font-weight:800;
     font-weight:800;
خط ۱۶۵: خط ۱۸۸:
.section-title h2{
.section-title h2{


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


     font-size:
     font-size:
         clamp(1.8rem,6vw,2.6rem);
         clamp(
            1.9rem,
            6vw,
            2.7rem
        );


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


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


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


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


     max-width:700px;
     max-width:680px;


     margin:10px auto 0;
     margin:9px auto 0;


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


     font-size:1rem;
     font-size:.95rem;


     line-height:2;
     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:8px 0;
     text-align:center;


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


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


.top-strip i{
.topbar 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;


     box-shadow:
    border-bottom:
        1px solid var(--border);
 
     box-shadow:
         0 5px 25px rgba(0,0,0,.25);
         0 5px 25px rgba(0,0,0,.25);
}
}
خط ۲۵۰: خط ۲۷۵:
.header-inner{
.header-inner{


     min-height:74px;
     min-height:72px;


     display:flex;
     display:flex;
خط ۲۶۱: خط ۲۸۶:
}
}


.brand{
.logo{


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


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


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


     height:46px;
     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.15rem;
    color:var(--gold-light);
 
     font-size:1.05rem;
}
}


.brand-name{
.logo-text{


     display:flex;
     display:flex;
خط ۲۹۵: خط ۳۲۰:
     flex-direction:column;
     flex-direction:column;


     line-height:1.3;
     line-height:1.35;
}
}


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


     font-family:
     font-family:
خط ۳۰۷: خط ۳۳۲:
     color:var(--gold-light);
     color:var(--gold-light);


     font-size:1.35rem;
     font-size:1.3rem;


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


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


     color:#aaa092;
     color:#9d9587;


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


.desktop-menu{
.desktop-nav{


     display:none;
     display:none;
}
}


.header-button{
.header-cta{


     display:none;
     display:none;
خط ۳۳۴: خط ۳۵۹:
========================================================= */
========================================================= */


.top-banner{
.banner-section{


     background:#080807;
     background:#080807;
خط ۳۴۰: خط ۳۶۵:
     padding:10px;
     padding:10px;


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


.banner-frame{
.banner{


     width:100%;
     width:100%;


     max-width:1500px;
     max-width:1500px;
    min-height:190px;
    max-height:520px;


     margin:auto;
     margin:auto;


     min-height:220px;
     background:#11100e;
 
    max-height:520px;


     border-radius:18px;
     border-radius:17px;


     overflow:hidden;
     overflow:hidden;


     background:#11100e;
     position:relative;


     display:flex;
     display:flex;
خط ۳۶۶: خط ۳۹۴:


     justify-content:center;
     justify-content:center;
    box-shadow:
        0 8px 30px rgba(0,0,0,.25);
    position:relative;
}
}


.banner-frame img{
.banner img{


     width:100%;
     width:100%;
خط ۳۸۴: خط ۴۰۷:


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


    display:block;
.banner::after{
}


.banner-overlay{
    content:"";


     position:absolute;
     position:absolute;
خط ۳۹۴: خط ۴۱۷:
     inset:0;
     inset:0;


     pointer-events:none;
     border:
        1px solid
        rgba(213,170,69,.35);


     border:1px solid rgba(216,173,69,.35);
     border-radius:17px;


     border-radius:18px;
     pointer-events:none;
}
}


.banner-caption{
.banner-label{


     position:absolute;
     position:absolute;


     right:18px;
     right:15px;


     bottom:18px;
     bottom:14px;


     background:rgba(10,9,7,.82);
     background:
        rgba(10,9,7,.82);


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


     border:1px solid var(--border);
     padding:6px 12px;


     border-radius:10px;
     border-radius:8px;


     padding:7px 12px;
     border:
        1px solid var(--border);


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


     font-weight:700;
     font-weight:700;
خط ۴۳۰: خط ۴۵۷:


.hero{
.hero{
    min-height:610px;


     position:relative;
     position:relative;


     min-height:650px;
     overflow:hidden;


     color:#fff;
     display:flex;


     background:
     align-items:center;


        linear-gradient(
    color:#fff;
            90deg,
            rgba(0,0,0,.92),
            rgba(0,0,0,.63),
            rgba(0,0,0,.78)
        ),


        url("IMAGE-HERO.jpg");
    background-color:#17130e;
}


    background-size:cover;


    background-position:center;
/*
  تصویر محیط کافه
  عمداً محو شده
*/


    overflow:hidden;
.hero-bg{
}


.hero::before{
    position:absolute;


     content:"";
     inset:0;


     position:absolute;
     width:100%;


     width:180px;
     height:100%;


     height:180px;
     object-fit:cover;


     border:1px solid rgba(216,173,69,.3);
     object-position:center;


     border-radius:50%;
     filter:
        blur(5px);


     left:-80px;
     transform:scale(1.06);


     top:-70px;
     opacity:.58;
}
}


.hero::after{
 
/* لایه تاریک روی تصویر */
 
.hero::before{


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


     width:250px;
     inset:0;


     height:250px;
     background:


    border:1px solid rgba(216,173,69,.12);
        linear-gradient(
            90deg,
            rgba(8,7,5,.94),
            rgba(8,7,5,.68),
            rgba(8,7,5,.82)
        );


     border-radius:50%;
     z-index:1;
}


    right:-110px;


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


.hero-inner{
.hero::after{


     min-height:650px;
     content:"";


     display:grid;
     position:absolute;


     grid-template-columns:1fr;
     width:420px;


     align-items:center;
     height:420px;


     padding:55px 0;
     border-radius:50%;


     position:relative;
     background:
        radial-gradient(
            circle,
            rgba(213,170,69,.15),
            transparent 68%
        );


     z-index:2;
     left:-120px;
}


.hero-content{
    bottom:-180px;


     max-width:720px;
     z-index:1;
}
}


.hero-stamp{
.hero-inner{


     width:82px;
     position:relative;


     height:82px;
     z-index:2;


     border:2px solid var(--gold);
     width:100%;


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


     display:flex;
     display:flex;
خط ۵۳۲: خط ۵۷۰:


     text-align:center;
     text-align:center;
}
.hero-content{
    max-width:760px;
    margin:auto;
}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 13px;
    border-radius:30px;


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


     font-size:.72rem;
     background:
        rgba(213,170,69,.1);
 
    border:
        1px solid
        rgba(213,170,69,.35);


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


     transform:rotate(-8deg);
     font-weight:700;


     margin-bottom:20px;
     margin-bottom:18px;
}
}


خط ۵۵۰: خط ۶۱۳:
         "Vazirmatn",
         "Vazirmatn",
         sans-serif;
         sans-serif;
    font-size:
        clamp(
            2.65rem,
            10vw,
            5.2rem
        );


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


     font-size:
     line-height:1.25;
        clamp(2.6rem,11vw,5rem);


     line-height:1.2;
     margin-bottom:14px;


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


خط ۵۶۸: خط ۶۳۵:
}
}


.hero-subtitle{
.hero-text{
 
    color:#e4dccd;


     font-size:
     font-size:
         clamp(1.05rem,4vw,1.3rem);
         clamp(
            .98rem,
            3.5vw,
            1.15rem
        );


     color:#ddd2bd;
     line-height:2;


     margin-bottom:20px;
     max-width:680px;


     font-weight:600;
     margin:0 auto 24px;
}
}


.hero-description{
.hero-actions{


     color:#c5bdaf;
     display:flex;


     font-size:1rem;
     flex-direction:column;


     max-width:620px;
     align-items:stretch;


     margin-bottom:28px;
     gap:10px;


     line-height:2;
     max-width:400px;
}


.hero-actions{
     margin:auto;
 
     display:flex;
 
    flex-direction:column;
 
    gap:11px;
}
}


خط ۶۰۶: خط ۶۷۲:
     min-height:52px;
     min-height:52px;


     padding:11px 21px;
     padding:11px 20px;


     border-radius:12px;
     border-radius:11px;


     display:inline-flex;
     display:inline-flex;
    justify-content:center;


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


     gap:8px;
     gap:8px;


     font-size:.92rem;
     font-size:.88rem;


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


     transition:.25s ease;
     transition:.2s ease;
}
}


خط ۶۲۹: خط ۶۹۵:
     background:var(--gold);
     background:var(--gold);


     color:var(--black);
     color:#15120c;


     box-shadow:
     box-shadow:
         0 8px 25px rgba(216,173,69,.22);
         0 8px 25px
        rgba(213,170,69,.22);
}
}


خط ۶۴۴: خط ۷۱۱:
.btn-outline{
.btn-outline{


     border:1px solid rgba(216,173,69,.5);
     border:
        1px solid
        rgba(255,255,255,.55);


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


     background:rgba(0,0,0,.2);
     background:
        rgba(0,0,0,.18);
}
}


.btn-outline:hover{


/* =========================================================
    border-color:var(--gold);
  HERO NOTES
========================================================= */


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


.hero-note{
.hero-trust{


     position:absolute;
     margin-top:25px;


     background:rgba(18,16,12,.85);
     display:flex;


     border:1px solid var(--border);
     justify-content:center;


     padding:11px 14px;
     align-items:center;


     border-radius:12px;
     gap:10px;


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


     font-size:.76rem;
     font-size:.72rem;
}
}


.trust-icons{


/* =========================================================
     display:flex;
  RIBBON
========================================================= */
 
.ribbon{
 
     background:var(--gold);
 
    color:var(--black);
 
    padding:10px 0;
 
    border-top:3px solid var(--black);


     border-bottom:3px solid var(--black);
     direction:ltr;
}
}


.ribbon-inner{
.trust-icons span{


     display:flex;
     width:30px;


     align-items:center;
     height:30px;


     justify-content:center;
     margin-left:-7px;


     flex-wrap:wrap;
     border-radius:50%;


     gap:15px;
     background:#67563b;


     font-weight:800;
     border:2px solid #1b1812;


     font-size:.82rem;
     display:grid;
}


.ribbon span::before{
    place-items:center;


     content:"✦";
     color:#fff;


     margin-left:8px;
     font-size:.65rem;
}
}




/* =========================================================
/* =========================================================
   VIBE
   BENEFITS
========================================================= */
========================================================= */


.vibe{
.benefits{


     background:var(--black-2);
     position:relative;


     color:#fff;
     z-index:5;


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


.vibe .section-title h2{
.benefit-box{
 
    background:var(--cream-2);


     color:#fff;
     border-radius:20px;
}


.vibe .section-title p{
    box-shadow:
        0 15px 45px rgba(0,0,0,.14);


     color:#aaa397;
     border:
}
        1px solid
        rgba(121,85,47,.15);


.vibe-grid{
    padding:15px;


     display:grid;
     display:grid;
خط ۷۵۱: خط ۸۰۹:
         repeat(2,1fr);
         repeat(2,1fr);


     gap:12px;
     gap:5px;
}
}


.vibe-card{
.benefit{


     min-height:175px;
     padding:17px 9px;


     border:1px solid var(--border);
    text-align:center;
 
     border-left:
        1px solid
        rgba(121,85,47,.13);
}
 
.benefit:nth-child(2n){
 
    border-left:0;
}
 
.benefit i{


     border-radius:16px;
     width:48px;


     padding:20px 15px;
     height:48px;


     background:
     border-radius:50%;
        linear-gradient(
            145deg,
            #242018,
            #14130f
        );


     position:relative;
     background:#eee4d1;


     overflow:hidden;
     color:var(--brown);
}


.vibe-icon{
    display:grid;


     color:var(--gold);
     place-items:center;


     font-size:1.6rem;
     margin:0 auto 9px;


     margin-bottom:11px;
     font-size:1.05rem;
}
}


.vibe-card h3{
.benefit h3{


     color:#fff;
     font-size:.9rem;


     font-size:1rem;
     margin-bottom:2px;


     margin-bottom:5px;
     color:var(--black);
}
}


.vibe-card p{
.benefit p{


     color:#aaa194;
     font-size:.7rem;


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


     line-height:1.9;
     line-height:1.7;
}
}




/* =========================================================
/* =========================================================
   MENU
   CATEGORIES
========================================================= */
========================================================= */


.menu-section{
.categories{


     background:var(--cream);
     background:var(--cream-2);
}
}


.menu-board{
.category-grid{


     background:#171510;
     display:grid;


     color:#fff;
     grid-template-columns:
        repeat(2,1fr);
 
    gap:10px;
}
 
.category-card{


     border:5px solid #9a7039;
     position:relative;


     outline:1px solid var(--gold);
     height:175px;


     outline-offset:-10px;
     overflow:hidden;


     border-radius:8px;
     border-radius:15px;


     padding:38px 18px;
     background:#272119;


     box-shadow:
     box-shadow:
         0 15px 40px rgba(0,0,0,.25);
         0 8px 25px rgba(0,0,0,.09);
}
}


.menu-board-title{
.category-card img{


     text-align:center;
     width:100%;


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


     font-family:
     object-fit:cover;
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     font-size:2.2rem;
     object-position:center;


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


    margin-bottom:28px;
.category-card::after{
}


.menu-grid{
    content:"";


     display:grid;
     position:absolute;


     grid-template-columns:1fr;
     inset:0;


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


.menu-item{
.category-name{


     display:grid;
     position:absolute;
 
    right:13px;


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


     gap:11px;
     z-index:2;


     align-items:center;
     color:#fff;


     padding:14px 8px;
     font-size:.9rem;


     border-bottom:
     font-weight:800;
        1px dashed rgba(216,173,69,.25);
}
}


.menu-icon{
.category-name i{


     width:44px;
     color:var(--gold-light);


     height:44px;
     margin-left:5px;
}


    border-radius:50%;


    border:1px solid var(--gold);
/* =========================================================
  POPULAR MENU
========================================================= */


    display:grid;
.popular{


     place-items:center;
     background:var(--cream);
 
    color:var(--gold-light);
 
    font-size:1rem;
}
}


.menu-item h3{
.products-grid{


     color:#fff;
     display:grid;


     font-size:1rem;
     grid-template-columns:
        repeat(2,1fr);


     margin-bottom:3px;
     gap:12px;
}
}


.menu-item p{
.product-card{


     color:#aaa194;
     background:#fff;


     font-size:.78rem;
     border-radius:15px;


     line-height:1.8;
     overflow:hidden;
}


.menu-price{
    border:
        1px solid
        rgba(121,85,47,.14);


     color:var(--gold-light);
     box-shadow:
        0 7px 25px rgba(0,0,0,.07);


     font-size:.8rem;
     position:relative;
}


    white-space:nowrap;
.product-image{


     font-weight:800;
     height:170px;
}


.menu-note{
    background:#e8ddc9;


     text-align:center;
     display:flex;


     color:#938a7b;
     align-items:center;


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


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


.product-image img{


/* =========================================================
    width:100%;
  BREAKFAST
========================================================= */


.breakfast{
    height:100%;


     background:var(--black);
     object-fit:cover;


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


.breakfast-grid{
.product-badge{


     display:grid;
     position:absolute;


     grid-template-columns:1fr;
     top:9px;


     gap:16px;
     right:9px;
}


.food-card{
    background:var(--gold);


     border-radius:18px;
     color:#19150d;


     overflow:hidden;
     border-radius:7px;


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


     background:#1c1a15;
     font-size:.63rem;


     box-shadow:var(--shadow);
     font-weight:800;
}
}


.food-image{
.product-info{


     height:240px;
     padding:13px;
}


    background:#2a261d;
.product-info h3{


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


     align-items:center;
     font-size:.95rem;


     justify-content:center;
     margin-bottom:3px;
}


    padding:12px;
.product-info p{


     overflow:hidden;
     color:var(--muted);
}


.food-image img{
    font-size:.7rem;


     width:100%;
     line-height:1.7;


     height:100%;
     min-height:42px;
}


    object-fit:contain;
.rating{


     object-position:center;
     margin:7px 0;
}


.food-content{
    color:#d89f22;


     padding:19px;
     font-size:.65rem;
}
}


.food-content h3{
.rating span{


     color:var(--gold-light);
     color:#8c8273;


     font-size:1.05rem;
     margin-right:4px;
}


    margin-bottom:6px;
.product-bottom{
}


.food-content p{
    display:flex;


     color:#a59c8e;
     align-items:center;


     font-size:.82rem;
     justify-content:space-between;


     line-height:1.9;
     gap:7px;
}
}


.price{


/* =========================================================
    color:var(--brown);
  YOUNG PEOPLE
========================================================= */


.young{
    font-size:.78rem;


     background:var(--cream);
     font-weight:900;


     position:relative;
     white-space:nowrap;
}
}


.young-grid{
.buy-btn{


     display:grid;
     background:var(--black);


     grid-template-columns:1fr;
     color:var(--gold-light);
 
    border:0;


     gap:16px;
     border-radius:8px;
}


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


     background:#fff;
     font-size:.66rem;


     border:1px solid rgba(104,75,46,.15);
     font-weight:700;
}


    border-radius:18px;


    padding:25px 19px;
/* =========================================================
  SPECIAL OFFER
========================================================= */


    position:relative;
.offer{


     box-shadow:
     padding:25px 0;
        0 7px 25px rgba(75,53,32,.08);


     overflow:hidden;
     background:var(--cream);
}
}


.young-card i{
.offer-box{
 
    min-height:220px;


     font-size:1.55rem;
     border-radius:22px;


     color:var(--brown);
     overflow:hidden;


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


.young-card h3{
    display:flex;


     color:var(--black);
     align-items:center;


     font-size:1.03rem;
     background:


    margin-bottom:6px;
        linear-gradient(
            90deg,
            rgba(15,13,9,.95),
            rgba(37,29,18,.83)
        );
}
}


.young-card p{
.offer-image{


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


     font-size:.82rem;
     inset:0;
 
    width:100%;
 
    height:100%;
 
    object-fit:cover;


     line-height:2;
     opacity:.27;
}
}


.offer-content{
    position:relative;
    z-index:2;


/* =========================================================
    padding:30px 25px;
  QUOTE
========================================================= */


.quote-section{
    max-width:650px;
}


    background:
.offer-label{
        linear-gradient(
            135deg,
            #171510,
            #2b2418
        );


     color:#fff;
     display:inline-block;


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


     padding:70px 20px;
     color:#1a150d;


     position:relative;
     border-radius:7px;


     overflow:hidden;
     padding:4px 9px;
}


.quote-section blockquote{
    font-size:.68rem;


     position:relative;
     font-weight:900;


     max-width:800px;
     margin-bottom:8px;
}


    margin:auto;
.offer h2{


     color:var(--gold-light);
     color:var(--gold-light);
خط ۱٬۱۲۶: خط ۱٬۲۰۹:
         "Vazirmatn",
         "Vazirmatn",
         sans-serif;
         sans-serif;
    font-weight:400;


     font-size:
     font-size:
         clamp(1.65rem,6vw,2.7rem);
         clamp(
            1.8rem,
            6vw,
            2.8rem
        );


     line-height:1.65;
     line-height:1.4;
}
}


.quote-author{
.offer p{
 
    color:#d0c5b3;


     margin-top:12px;
     font-size:.82rem;


     color:#a09685;
     line-height:2;


     font-size:.8rem;
     margin-bottom:15px;
}
}




/* =========================================================
/* =========================================================
   GALLERY
   ATMOSPHERE
========================================================= */
========================================================= */


.gallery{
.atmosphere{


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


     color:#fff;
     color:#fff;
}
}


.gallery .section-title h2{
.atmosphere .section-title h2{


     color:#fff;
     color:#fff;
}
}


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


     color:#aaa194;
     color:#aaa093;
}
}


.gallery-grid{
.atmosphere-grid{


     display:grid;
     display:grid;
خط ۱٬۱۷۱: خط ۱٬۲۶۲:
         repeat(2,1fr);
         repeat(2,1fr);


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


.gallery-item{
.atmosphere-card{


     height:180px;
     min-height:175px;


     border-radius:12px;
     padding:20px 15px;


     overflow:hidden;
     border:
        1px solid
        var(--border);


     background:#29251e;
     border-radius:15px;


     border:1px solid var(--border);
     background:
        linear-gradient(
            145deg,
            #252118,
            #15130f
        );
}


    position:relative;
.atmosphere-card i{
}


.gallery-item.large{
    color:var(--gold);


     grid-column:span 2;
     font-size:1.45rem;


     height:220px;
     margin-bottom:9px;
}
}


.gallery-item img{
.atmosphere-card h3{


     width:100%;
     color:#fff;


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


     object-fit:cover;
     margin-bottom:5px;
 
    object-position:center;
}
}


.gallery-label{
.atmosphere-card p{


     position:absolute;
     color:#aaa092;


     bottom:8px;
     font-size:.73rem;


     right:8px;
     line-height:1.9;
}


    background:rgba(0,0,0,.78);


    color:var(--gold-light);
/* =========================================================
 
  BLOG
    border:1px solid var(--border);
========================================================= */
 
    padding:4px 9px;


    border-radius:7px;
.blog{


     font-size:.68rem;
     background:var(--cream-2);
}
}


.blog-grid{


/* =========================================================
    display:grid;
  SOCIAL
========================================================= */


.social{
     grid-template-columns:1fr;
 
     background:var(--cream);


     text-align:center;
     gap:14px;
}
}


.social-box{
.blog-card{


     background:#fff;
     background:#fff;


     border:1px solid rgba(104,75,46,.18);
     border-radius:16px;


     border-radius:22px;
     overflow:hidden;


     padding:32px 18px;
     border:
        1px solid
        rgba(121,85,47,.13);


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


.social-icons{
.blog-image{
 
    display:flex;


     justify-content:center;
     height:190px;


     gap:11px;
     background:#ddd0ba;


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


.social-icons a{
.blog-image img{


     width:47px;
     width:100%;


     height:47px;
     height:100%;


     border-radius:50%;
     object-fit:cover;


     display:grid;
     object-position:center;
}


    place-items:center;
.blog-content{


     background:var(--black);
     padding:17px;
}


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


     border:1px solid var(--border);
     color:var(--brown-light);
}


    font-size:.68rem;
}


/* =========================================================
.blog-content h3{
  CTA
========================================================= */


.cta{
    font-size:1rem;


     background:
     color:var(--black);


        linear-gradient(
    margin:5px 0;
            rgba(12,11,9,.93),
            rgba(12,11,9,.93)
        ),


        url("IMAGE-CAFE.jpg");
    line-height:1.7;
}


    background-size:cover;
.blog-content p{


     background-position:center;
     color:var(--muted);


     color:#fff;
     font-size:.76rem;


     text-align:center;
     line-height:1.9;
 
    padding:75px 15px;
}
}


.cta h2{
.read-more{


     font-family:
     display:inline-flex;
        "Lalezar",
        "Vazirmatn",
        sans-serif;


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


     font-size:
     gap:6px;
        clamp(2.1rem,8vw,3.2rem);


     font-weight:400;
     margin-top:10px;


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


.cta p{
    font-size:.73rem;


    color:#c0b8aa;
     font-weight:800;
 
     font-size:.92rem;
 
    max-width:650px;
 
    margin:0 auto 24px;
 
    line-height:2;
}
}


.cta-actions{


    display:flex;
/* =========================================================
  CTA
========================================================= */


    flex-direction:column;
.cta{


     gap:11px;
     background:


    justify-content:center;
        linear-gradient(
}
            rgba(11,10,8,.92),
            rgba(11,10,8,.92)
        ),


        url("IMAGE-CAFE-INTERIOR.jpg");


/* =========================================================
    background-size:cover;
  FOOTER
========================================================= */


.footer{
     background-position:center;
 
     background:#0b0a08;


     color:#fff;
     color:#fff;


     padding:45px 0 90px;
     text-align:center;


     border-top:1px solid var(--border);
     padding:75px 15px;
}
}


.footer-grid{
.cta h2{
 
    display:grid;
 
    grid-template-columns:1fr;
 
    gap:28px;
}
 
.footer h3{
 
    color:var(--gold-light);


     font-family:
     font-family:
خط ۱٬۳۸۶: خط ۱٬۴۵۰:
         sans-serif;
         sans-serif;


     font-size:1.25rem;
     font-size:
        clamp(
            2.1rem,
            8vw,
            3.4rem
        );
 
    color:var(--gold-light);


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


     margin-bottom:10px;
     margin-bottom:8px;
}
}


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


     color:#908779;
     color:#c5baaa;


     font-size:.8rem;
     font-size:.88rem;


     line-height:2;
     line-height:2;
}
}


.footer ul{
.cta-actions{


     list-style:none;
     display:flex;


     display:grid;
     flex-direction:column;


     gap:6px;
     gap:10px;
}


.footer-bottom{
    max-width:400px;


    border-top:1px solid rgba(216,173,69,.12);
     margin:auto;
 
     margin-top:28px;
 
    padding-top:20px;
 
    text-align:center;
 
    color:#70685b;
 
    font-size:.72rem;
}
}




/* =========================================================
/* =========================================================
   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:68px;
.footer-grid{


     display:grid;
     display:grid;


     grid-template-columns:
     grid-template-columns:1fr;
        repeat(5,1fr);
 
    background:#11100e;
 
    border-top:1px solid var(--border);
 
    z-index:9999;


     box-shadow:
     gap:30px;
        0 -5px 25px rgba(0,0,0,.3);
}
}


.mobile-nav a{
.footer h3{


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


     flex-direction:column;
     font-family:
        "Lalezar",
        "Vazirmatn",
        sans-serif;
 
    font-weight:400;


     align-items:center;
     font-size:1.25rem;


     justify-content:center;
     margin-bottom:8px;
}


    gap:3px;
.footer p,
.footer li{


     color:#91897a;
     color:#918879;


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


     font-weight:600;
     line-height:2;
}
}


.mobile-nav i{
.footer ul{


     font-size:1.05rem;
     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);
}


    .top-banner{
.footer-social{


        padding:14px;
    display:flex;
     }
 
     gap:8px;


     .banner-frame{
     margin-top:14px;
}


        min-height:260px;
.footer-social a{


        border-radius:20px;
    width:38px;
    }


     .hero-actions{
     height:38px;


        flex-direction:row;
    display:grid;
    }


     .btn{
     place-items:center;


         min-width:155px;
    border:
    }
         1px solid var(--border);


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


        grid-template-columns:
    color:var(--gold-light);
            repeat(4,1fr);
}
    }


    .menu-grid{
.footer-bottom{


        grid-template-columns:
    border-top:
            repeat(2,1fr);
        1px solid
        rgba(213,170,69,.12);


        column-gap:30px;
    margin-top:30px;
    }


     .breakfast-grid{
     padding-top:18px;


        grid-template-columns:
    text-align:center;
            repeat(2,1fr);
    }


     .young-grid{
     color:#6f685d;


        grid-template-columns:
    font-size:.68rem;
            repeat(2,1fr);
}
    }


    .gallery-grid{


        grid-template-columns:
/* =========================================================
            repeat(4,1fr);
  MOBILE BOTTOM NAV
    }
========================================================= */


    .gallery-item.large{
.mobile-nav{


        grid-column:span 2;
    position:fixed;
    }


     .cta-actions{
     right:0;


        flex-direction:row;
    bottom:0;
    }
}


    left:0;


/* =========================================================
    height:67px;
  DESKTOP
========================================================= */


@media (min-width:900px){
    background:#11100e;


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


        padding:90px 0;
    z-index:9999;
    }


     .banner-frame{
     display:grid;


        min-height:320px;
    grid-template-columns:
        repeat(5,1fr);


         max-height:600px;
    box-shadow:
    }
         0 -6px 25px rgba(0,0,0,.3);
}


    .desktop-menu{
.mobile-nav a{


        display:flex;
    display:flex;


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


        gap:24px;
    align-items:center;
    }


     .desktop-menu a{
     justify-content:center;


        color:#c0b7a8;
    gap:3px;


        font-size:.84rem;
    color:#8e8678;


        font-weight:600;
    font-size:.63rem;


        transition:.2s;
    font-weight:600;
    }
}


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


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


    .header-button{
.mobile-nav a.active{


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


        align-items:center;


        gap:7px;
/* =========================================================
  TABLET
========================================================= */


        padding:9px 14px;
@media (min-width:600px){


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


         border-radius:10px;
         min-height:250px;
    }


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


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


         font-weight:700;
         justify-content:center;
 
        max-width:none;
     }
     }


     .hero-inner{
     .btn{
 
        min-height:720px;


         padding:70px 0;
         min-width:160px;
     }
     }


     .hero-notes{
     .benefit-box{


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


         position:absolute;
         padding:8px;
    }


        inset:0;
    .benefit{


         pointer-events:none;
         border-left:
            1px solid
            rgba(121,85,47,.13);
     }
     }


     .hero-note.note-one{
     .benefit:nth-child(2n){
 
        top:22%;


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


     .hero-note.note-two{
     .benefit:last-child{
 
        bottom:20%;


         left:15%;
         border-left:0;
     }
     }


     .hero-note.note-three{
     .category-grid{


         top:30%;
         grid-template-columns:
 
            repeat(5,1fr);
        right:5%;
     }
     }


     .menu-board{
     .products-grid{


         padding:50px 55px;
         grid-template-columns:
            repeat(3,1fr);
     }
     }


     .menu-grid{
     .atmosphere-grid{


         column-gap:60px;
         grid-template-columns:
            repeat(4,1fr);
     }
     }


     .breakfast-grid{
     .blog-grid{


         grid-template-columns:
         grid-template-columns:
خط ۱٬۶۸۰: خط ۱٬۷۴۱:
     }
     }


     .food-image{
     .cta-actions{


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


    .young-grid{
        justify-content:center;


         grid-template-columns:
         max-width:none;
            repeat(4,1fr);
     }
     }
}


    .gallery-item{
/* =========================================================
  DESKTOP
========================================================= */


        height:230px;
@media (min-width:900px){
    }


     .gallery-item.large{
     body{


         height:310px;
         font-size:17px;
     }
     }


     .footer-grid{
     .section{


         grid-template-columns:
         padding:90px 0;
            1.5fr 1fr 1fr;
     }
     }


     .footer{
     .banner-section{


         padding-bottom:45px;
         padding:14px;
     }
     }


     .mobile-nav{
     .banner{
 
        min-height:320px;


         display:none;
         border-radius:20px;
     }
     }
}


    .banner::after{
        border-radius:20px;
    }


/* =========================================================
    .desktop-nav{
  LARGE DESKTOP
========================================================= */


@media (min-width:1200px){
        display:flex;


    .hero h1{
        align-items:center;


         font-size:5rem;
         gap:24px;
     }
     }


     .banner-frame{
     .desktop-nav a{


         min-height:350px;
         color:#bdb4a5;
    }
}


        font-size:.8rem;


/* =========================================================
        font-weight:600;
  REDUCED MOTION
========================================================= */


@media (prefers-reduced-motion:reduce){
        transition:.2s;
    }


     html{
     .desktop-nav a:hover{
         scroll-behavior:auto;
 
         color:var(--gold-light);
     }
     }


     *,
     .header-cta{
    *::before,
    *::after{


         transition:none !important;
         display:inline-flex;


         animation:none !important;
         align-items:center;
    }
}


</style>
        gap:7px;


</head>
        border:
            1px solid var(--border);


        border-radius:9px;


<body>
        color:var(--gold-light);


        padding:8px 13px;


<!-- =====================================================
        font-size:.72rem;
    TOP STRIP
===================================================== -->


<div class="top-strip">
        font-weight:700;
    }


     <div class="container">
     .hero{


         <i class="fa-solid fa-mug-hot"></i>
         min-height:690px;
    }


        یه چای، یه گپ، یه پاتوق خوب...
    .hero-inner{


         <i class="fa-solid fa-mug-saucer"></i>
         min-height:690px;
    }


     </div>
     .hero-text{


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


    .benefits{


<!-- =====================================================
        margin-top:-45px;
    HEADER
    }
===================================================== -->


<header class="header">
    .benefit-box{


     <div class="container header-inner">
        padding:10px;
     }
 
    .benefit{


         <a href="#home" class="brand">
         padding:18px;
    }


            <span class="brand-icon">
    .benefit h3{


                <i class="fa-solid fa-mug-hot"></i>
        font-size:.95rem;
    }


            </span>
    .benefit p{


            <span class="brand-name">
        font-size:.73rem;
    }


                <strong>
    .category-card{
                    کافه پاتوق محمد
                </strong>


                <span>
        height:220px;
                    قهوه خانه سنتی و پاتوق دوستانه
    }
                </span>


            </span>
    .products-grid{


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


    .product-image{


         <nav class="desktop-menu"
         height:220px;
            aria-label="منوی اصلی">
    }


            <a href="#menu">
    .product-info{
                منو
            </a>


            <a href="#vibe">
        padding:15px;
                حال و هوا
    }
            </a>


            <a href="#breakfast">
    .product-info h3{
                صبحانه
            </a>


            <a href="#gallery">
        font-size:1rem;
                فضای کافه
    }
            </a>


            <a href="#contact">
    .product-info p{
                تماس
            </a>


         </nav>
         font-size:.72rem;
    }


    .blog-image{


         <a href="#menu"
         height:220px;
          class="header-button">
    }


            <i class="fa-solid fa-utensils"></i>
    .footer{


            دیدن منو
        padding-bottom:45px;
    }


        </a>
    .footer-grid{


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


</header>
    .mobile-nav{


        display:none;
    }
}


<main>


/* =========================================================
  LARGE DESKTOP
========================================================= */


<!-- =====================================================
@media (min-width:1200px){
    NEW TOP BANNER
===================================================== -->


<section class="top-banner"
    .hero h1{
        aria-label="بنر کافه پاتوق محمد">


     <div class="container">
        font-size:5.2rem;
     }


        <div class="banner-frame">
    .hero{


            <!-- تصویر بنر را اینجا قرار بده -->
        min-height:720px;
    }


            <img
    .hero-inner{
                src="https://dl.faraghaib.ir/m/260012-01/baner-01.png"
                alt="بنر کافه پاتوق محمد"
                loading="eager"
            >


            <div class="banner-overlay"></div>
        min-height:720px;
    }


            <div class="banner-caption">
    .banner{


                <i class="fa-solid fa-mug-hot"></i>
        min-height:350px;
    }
}


                کافه پاتوق محمد


            </div>
/* =========================================================
  ACCESSIBILITY
========================================================= */


        </div>
@media (prefers-reduced-motion:reduce){


     </div>
     html{
        scroll-behavior:auto;
    }


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


        animation:none !important;


<!-- =====================================================
        transition:none !important;
    HERO
    }
===================================================== -->
}


<section class="hero"
</style>
        id="home">


    <div class="container hero-inner">
</head>




        <div class="hero-content">
<body>


            <div class="hero-stamp">


                پاتوق
<!-- =====================================================
                <br>
    TOP BAR
                محمد
===================================================== -->
                <br>
                ۱۴۰۵


            </div>
<div class="topbar">


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


            <h1>
    یه چای، یه گپ، یه پاتوق خوب...


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


            </h1>


<!-- =====================================================
    HEADER
===================================================== -->


            <div class="hero-subtitle">
<header class="site-header">


                یه پاتوق برای چای، صبحانه،
    <div class="container header-inner">
                گپ و خاطره ساختیم.


            </div>


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


             <p class="hero-description">
             <span class="logo-icon">


                 کافه پاتوق محمد؛ حال‌وهوای قهوه‌خانه‌های
                 <i class="fa-solid fa-mug-hot"></i>
                قدیمی با سلیقه امروز.
                جایی برای صبحانه، املت، عدسی، چای و عصرانه؛
                برای وقتی که دلت یک جای خودمانی می‌خواهد.


             </p>
             </span>


            <span class="logo-text">


            <div class="hero-actions">
                <strong>
                    کافه پاتوق محمد
                </strong>


                 <a href="#menu"
                 <span>
                  class="btn btn-gold">
                    قهوه خانه سنتی و دورهمی
                </span>


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


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


                </a>


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


                <a href="#vibe"
            <a href="#home">
                  class="btn btn-outline">
                خانه
            </a>


                    <i class="fa-solid fa-heart"></i>
            <a href="#menu">
                منو
            </a>


                    چرا پاتوق؟
            <a href="#why">
                درباره پاتوق
            </a>


                 </a>
            <a href="#gallery">
                 فضای کافه
            </a>


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


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


        </nav>


        <div class="hero-notes">


            <div class="hero-note note-one">
        <a href="#menu"
                ☕ چای تازه‌دم
          class="header-cta">
            </div>


             <div class="hero-note note-two">
             <i class="fa-solid fa-utensils"></i>
                🍳 املت مخصوص
            </div>


             <div class="hero-note note-three">
             مشاهده منو
                ✦ جای رفیق‌بازی
            </div>


         </div>
         </a>


     </div>
     </div>


</section>
</header>




<!-- =====================================================
<main>
     RIBBON
 
 
<!-- =====================================================
     TOP BANNER
===================================================== -->
===================================================== -->


<div class="ribbon">
<section class="banner-section"
        aria-label="بنر کافه پاتوق محمد">
 
    <div class="container">


    <div class="container ribbon-inner">
        <div class="banner">


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


        <span>چای</span>
            <span class="banner-label">


        <span>املت</span>
                <i class="fa-solid fa-mug-hot"></i>


        <span>عدسی</span>
                کافه پاتوق محمد


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


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


     </div>
     </div>


</div>
</section>




<!-- =====================================================
<!-- =====================================================
     VIBE
     HERO
===================================================== -->
===================================================== -->


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


    <div class="container">


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


            <span class="small-title">
    <img
                حال‌وهوای پاتوق
        class="hero-bg"
            </span>
        src="https://dl.faraghaib.ir/m/260012-01/260012-01-01.jpg"
        alt=""
        aria-hidden="true"
    >


            <h2>
                اینجا قراره بهت خوش بگذره
            </h2>


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


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




        <div class="vibe-grid">
            <div class="hero-badge">


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


            <article class="vibe-card">
                یک پاتوق متفاوت برای آدم‌های متفاوت


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


                <h3>
                    چای و گپ
                </h3>


                <p>
            <h1 id="hero-title">
                    چای تازه‌دم و حرف‌هایی که قرار نیست زود تمام شوند.
                </p>


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


            </h1>


            <article class="vibe-card">


                <div class="vibe-icon">
            <p class="hero-text">
                    <i class="fa-solid fa-users"></i>
                </div>


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


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


            </article>


            <div class="hero-actions">


            <article class="vibe-card">
                <a href="#menu"
                  class="btn btn-gold">


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


                <h3>
                     مشاهده منو
                     جای عکس گرفتن
                </h3>


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


            </article>


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


            <article class="vibe-card">
                    درباره پاتوق


                <div class="vibe-icon">
                     <i class="fa-solid fa-arrow-left"></i>
                     <i class="fa-solid fa-music"></i>
                </div>


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


                 <p>
            </div>
                     جایی برای فاصله گرفتن از شلوغی روزمره.
 
                 </p>
 
            <div class="hero-trust">
 
                 <div class="trust-icons">
 
                     <span>
                        <i class="fa-solid fa-user"></i>
                    </span>
 
                    <span>
                        <i class="fa-solid fa-user"></i>
                    </span>
 
                    <span>
                        <i class="fa-solid fa-user"></i>
                    </span>
 
                    <span>
                        <i class="fa-solid fa-user"></i>
                    </span>
 
                 </div>


            </article>
                <span>
                    جای رفیق‌بازی و دورهمی
                </span>


            </div>


         </div>
         </div>
خط ۲٬۱۲۳: خط ۲٬۲۲۴:


<!-- =====================================================
<!-- =====================================================
     MENU
     BENEFITS
===================================================== -->
===================================================== -->


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


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


         <div class="section-title">
         <div class="benefit-box">


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


             <h2>
             <article class="benefit">
                ساده، خوشمزه، خودمونی
            </h2>


            <p>
                <i class="fa-solid fa-mug-hot"></i>
                منوی اولیه بر اساس آیتم‌های فعلی طراحی شده
                و می‌توانی نام، توضیحات و قیمت‌ها را تغییر بدهی.
            </p>


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


                <p>
                    برای یک گپ طولانی
                </p>


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


            <div class="menu-board-title">


                منوی کافه پاتوق محمد
            <article class="benefit">


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


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


            <div class="menu-grid">
                <p>
                    شروع خوشمزه روز
                </p>


            </article>


                <article class="menu-item">


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


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


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


                        <p>
                <p>
                            چای تازه‌دم برای یک گپ درست‌وحسابی
                    مناسب دورهمی
                        </p>
                </p>


                    </div>
            </article>


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


                </article>
            <article class="benefit">


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


                 <article class="menu-item">
                 <h3>
                    حال خوب
                </h3>


                    <div class="menu-icon">
                <p>
                        <i class="fa-solid fa-egg"></i>
                    یک پاتوق متفاوت
                    </div>
                </p>


                    <div>
            </article>


                        <h3>املت</h3>


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


                    </div>
    </div>


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


                </article>


<!-- =====================================================
    CATEGORIES
===================================================== -->


                <article class="menu-item">
<section class="section categories"
        id="menu">


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


                    <div>


                        <h3>عدسی</h3>
        <div class="section-title">


                        <p>
            <span class="eyebrow">
                            یک انتخاب گرم و دلچسب برای صبح
                چیزی برای هر سلیقه
                        </p>
            </span>


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


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


                </article>
        </div>




                <article class="menu-item">
        <div class="category-grid">


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


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


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


                        <p>
                <span class="category-name">
                            برای شروع روز با انرژی و حال خوب
                        </p>


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


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


                 </article>
                 </span>


            </a>


                <article class="menu-item">


                    <div class="menu-icon">
            <a href="#omelet"
                        <i class="fa-solid fa-cookie-bite"></i>
              class="category-card">
                    </div>


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


                        <h3>عصرانه</h3>
                <span class="category-name">


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


                     </div>
                     املت


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


                </article>
            </a>




                <article class="menu-item">
            <a href="#adasi"
              class="category-card">


                     <div class="menu-icon">
                <img
                        <i class="fa-solid fa-people-group"></i>
                     src="https://dl.faraghaib.ir/m/260012-01/260012-01-25.jpg"
                     </div>
                    alt="عدسی کافه پاتوق محمد"
                     loading="lazy"
                >


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


                        <h3>دورهمی</h3>
                    <i class="fa-solid fa-bowl-food"></i>


                        <p>
                    عدسی
                            میزت را با رفیق‌هایت شریک شو
 
                        </p>
                </span>
 
            </a>
 
 
            <a href="#breakfast"
              class="category-card">
 
                <img
                    src="https://dl.faraghaib.ir/m/260012-01/260012-01-08.jpg"
                    alt="صبحانه سنتی کافه پاتوق محمد"
                    loading="lazy"
                >
 
                <span class="category-name">
 
                    <i class="fa-solid fa-sun"></i>
 
                    صبحانه
 
                </span>
 
            </a>


                    </div>


                    <div class="menu-price">
            <a href="#snack"
                        ویژه
              class="category-card">
                    </div>


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


                <span class="category-name">


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


                    عصرانه


            <div class="menu-note">
                </span>


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


            </div>


         </div>
         </div>
خط ۲٬۳۱۷: خط ۲٬۴۴۱:


<!-- =====================================================
<!-- =====================================================
     BREAKFAST
     POPULAR
===================================================== -->
===================================================== -->


<section class="section breakfast"
<section class="section popular"
         id="breakfast">
         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 style="color:#fff;">
             <h2 id="popular-title">
                 صبحانه‌ای که ارزش بیدار شدن دارد!
                 محبوب‌ترین‌های پاتوق
             </h2>
             </h2>


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


خط ۲٬۳۴۳: خط ۲٬۴۶۸:




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


            <!-- PRODUCT 1 -->


             <article class="food-card">
             <article class="product-card">


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


                     <img
                     <img
                         src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg"
                         src="https://dl.faraghaib.ir/m/260012-01/260012-01-07.jpg"
                         alt="املت کافه پاتوق محمد"
                         alt="چای مخصوص کافه پاتوق محمد"
                         loading="lazy"
                         loading="lazy"
                     >
                     >
خط ۲٬۳۵۸: خط ۲٬۴۸۵:
                 </div>
                 </div>


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


                     <h3>
                     <h3>
                         املت پاتوق
                         چای مخصوص پاتوق
                     </h3>
                     </h3>


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


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


            </article>
                        ★★★★★


                        <span>
                            ۴.۹
                        </span>


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


                <div class="food-image">
                    <div class="product-bottom">


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


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


                <div class="food-content">
                     </div>
 
                    <h3>
                        عدسی
                     </h3>
 
                    <p>
                        گرم، دلچسب و مناسب یک صبح آرام.
                    </p>


                 </div>
                 </div>
خط ۲٬۴۰۰: خط ۲٬۵۲۶:




             <article class="food-card">
            <!-- PRODUCT 2 -->
 
             <article class="product-card">


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


                     <img
                     <img
                         src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg"
                         src="https://dl.faraghaib.ir/m/260012-01/260012-01-05.jpg"
                         alt="صبحانه سنتی کافه پاتوق محمد"
                         alt="املت مخصوص کافه پاتوق محمد"
                         loading="lazy"
                         loading="lazy"
                     >
                     >
خط ۲٬۴۱۲: خط ۲٬۵۴۰:
                 </div>
                 </div>


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


                     <h3>
                     <h3>
                         صبحانه سنتی
                         املت مخصوص
                     </h3>
                     </h3>


                     <p>
                     <p>
                         شروع روز با طعم و حال‌وهوای ایرانی.
                         داغ و تازه برای شروع یک روز خوب
                     </p>
                     </p>


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


            </article>
                        ★★★★★


                        <span>
                            ۴.۸
                        </span>


        </div>
                    </div>


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


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


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


<!-- =====================================================
                    </div>
    YOUNG PEOPLE
===================================================== -->


<section class="section young">
                </div>


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


        <div class="section-title">


             <span class="small-title">
             <!-- PRODUCT 3 -->
                پاتوق نسل جدید
            </span>


             <h2>
             <article class="product-card">
                 چرا جوان‌ها باید پاتوق محمد را امتحان کنند؟
 
            </h2>
                 <div class="product-image">


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


        </div>
                </div>


                <span class="product-badge">
                    صبحانه
                </span>


        <div class="young-grid">
                <div class="product-info">


                    <h3>
                        عدسی
                    </h3>


            <article class="young-card">
                    <p>
                        انتخابی گرم و دلچسب برای صبح
                    </p>


                <i class="fa-solid fa-camera-retro"></i>
                    <div class="rating">


                <h3>
                        ★★★★★
                    فضای اینستاگرامی
                </h3>


                <p>
                        <span>
                    ترکیب فضای سنتی، رنگ‌های گرم و المان‌های
                            ۴.۷
                    قدیمی می‌تواند برای عکس و تولید محتوا جذاب باشد.
                        </span>
                </p>


            </article>
                    </div>


                    <div class="product-bottom">


            <article class="young-card">
                        <strong class="price">
                            قیمت
                        </strong>


                <i class="fa-solid fa-gamepad"></i>
                        <button class="buy-btn">
                            سفارش
                        </button>


                <h3>
                     </div>
                     وقت‌گذرانی با رفیق‌ها
                </h3>


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


             </article>
             </article>




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


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


                 <h3>
                 <div class="product-image">
                    یک گوشه برای خودت
                </h3>


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


            </article>
                </div>


                <span class="product-badge">
                    جدید
                </span>


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


                <i class="fa-solid fa-heart"></i>
                    <h3>
                        عصرانه پاتوق
                    </h3>


                <h3>
                     <p>
                     حس نوستالژی
                        مناسب عصرهای دوستانه و دورهمی
                </h3>
                     </p>
 
                <p>
                    حال‌وهوای قهوه‌خانه‌های قدیمی با زبان
                     طراحی امروزی و مناسب نسل جوان.
                </p>
 
            </article>


                    <div class="rating">


        </div>
                        ★★★★★


    </div>
                        <span>
                            ۴.۸
                        </span>


</section>
                    </div>


                    <div class="product-bottom">


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


<section class="quote-section">
                        <button class="buy-btn">
                            سفارش
                        </button>


    <blockquote>
                    </div>


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


    </blockquote>
            </article>


    <div class="quote-author">


         کافه پاتوق محمد
         </div>


     </div>
     </div>
خط ۲٬۵۵۸: خط ۲٬۶۹۹:


<!-- =====================================================
<!-- =====================================================
     GALLERY
     SPECIAL OFFER
===================================================== -->
===================================================== -->


<section class="section gallery"
<section class="offer">
        id="gallery">


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


         <div class="section-title">
         <div class="offer-box">


            <span class="small-title">
                قاب‌های پاتوق
            </span>
            <h2>
                اینجا را باید دید!
            </h2>
            <p>
                تصاویر واقعی فضای کافه، غذاها و دورهمی‌ها را
                در این قسمت قرار بده تا صفحه شخصیت بیشتری پیدا کند.
            </p>
        </div>


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


        <div class="gallery-grid">


            <div class="offer-content">


            <div class="gallery-item large">
                <span class="offer-label">


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


                <span class="gallery-label">
                    فضای پاتوق
                 </span>
                 </span>


            </div>
                <h2>


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


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


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


                <span class="gallery-label">
                    اگر صبح‌ها دنبال یک جای متفاوت
                     حال خوب
                     برای چای، املت یا صبحانه هستی،
                </span>
                    پاتوق محمد منتظر توست.


            </div>
                </p>


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


            <div class="gallery-item">
                    <i class="fa-solid fa-location-dot"></i>


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


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


             </div>
             </div>


        </div>
    </div>


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


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


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


            </div>
<section class="section atmosphere"
        id="why">


    <div class="container">


            <div class="gallery-item">


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


                <span class="gallery-label">
            <span class="eyebrow">
                    صبحانه
                چرا پاتوق محمد؟
                </span>
            </span>


             </div>
            <h2>
                فقط یک کافه نیست
             </h2>


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


         </div>
         </div>


    </div>


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




<!-- =====================================================
            <article class="atmosphere-card">
    SOCIAL
===================================================== -->


<section class="section social">
                <i class="fa-solid fa-house"></i>


    <div class="container">
                <h3>
                    حس خودمانی
                </h3>
 
                <p>
                    بدون تشریفات و فاصله؛
                    یک فضای راحت برای نشستن و گپ زدن.
                </p>
 
            </article>


        <div class="social-box">


             <div class="section-title"
             <article class="atmosphere-card">
                style="margin-bottom:0;">


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


                 <h2>
                 <h3>
                     عکس‌هات رو با ما شریک شو
                     فضای متفاوت
                 </h2>
                 </h3>


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


             </div>
             </article>
 


            <article class="atmosphere-card">


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


                 <a href="#"
                 <h3>
                  aria-label="اینستاگرام">
                    دورهمی
                </h3>


                    <i class="fa-brands fa-instagram"></i>
                <p>
                    قرار دوستانه، گپ شبانه یا
                    یک صبحانه جمعی.
                </p>


                </a>
            </article>


                <a href="#"
                  aria-label="تلگرام">


                    <i class="fa-brands fa-telegram"></i>
            <article class="atmosphere-card">


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


                 <a href="#"
                 <h3>
                  aria-label="واتساپ">
                    خاطره‌سازی
                </h3>


                    <i class="fa-brands fa-whatsapp"></i>
                <p>
                    قرار نیست فقط چیزی بخوری؛
                    قرار است یک خاطره خوب بسازی.
                </p>


                </a>
            </article>


            </div>


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


<!-- =====================================================
<!-- =====================================================
     CTA
     BLOG
===================================================== -->
===================================================== -->


<section class="cta"
<section class="section blog"
         id="contact">
         id="blog">


     <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="blog-grid">




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


                 <i class="fa-solid fa-mug-hot"></i>
                 <div class="blog-image">


                دیدن منو
                    <img
                        src="https://dl.faraghaib.ir/m/260012-01/260012-01-17.jpg"
                        alt="تاریخچه چای و فرهنگ چای نوشیدن"
                        loading="lazy"
                    >


            </a>
                </div>


        </div>
                <div class="blog-content">


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


</section>
                    <h3>
                        چرا چای بخش جدانشدنی دورهمی‌های ایرانی است؟
                    </h3>


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


</main>
                    <a href="#"
                      class="read-more">


                        ادامه مطلب


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


<footer class="footer">
                    </a>


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


        <div class="footer-grid">
            </article>




             <div>
             <article class="blog-card">


                 <h3>
                 <div class="blog-image">
                    کافه پاتوق محمد
                </h3>


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


            </div>
                </div>


                <div class="blog-content">


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


                <h3>
                    <h3>
                     منوی پاتوق
                        یک صبحانه سنتی خوب چه ویژگی‌هایی دارد؟
                </h3>
                     </h3>


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


                     <li>چای</li>
                     <a href="#"
                      class="read-more">


                    <li>املت</li>
                        ادامه مطلب


                    <li>عدسی</li>
                        <i class="fa-solid fa-arrow-left"></i>


                     <li>صبحانه</li>
                    </a>
 
 
                     <li>عصرانه</li>
                </div>
 
 
                 </ul>
            </article>
 
 
             </div>
 
 
            <article class="blog-card">
 
 
             <div>
                <div class="blog-image">
 
 
                 <h3>
                    <img
                     اطلاعات تماس
                        src="https://dl.faraghaib.ir/m/260012-01/260012-01-22.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">
                     <li>
                        مجله پاتوق
                         <i class="fa-solid fa-location-dot"></i>
                    </span>
                         آدرس کافه
 
                     </li>
                    <h3>
 
                        قهوه‌خانه سنتی یا کافه مدرن؛ چرا ترکیب این دو جذاب است؟
                     <li>
                    </h3>
                         <i class="fa-solid fa-clock"></i>
 
                         ساعات کاری
                    <p>
                     </li>
                        ترکیب نوستالژی و سلیقه امروزی می‌تواند
 
                        تجربه‌ای متفاوت برای جوان‌ها بسازد.
                 </ul>
                    </p>
 
 
             </div>
                    <a href="#"
 
                      class="read-more">
 
 
         </div>
                        ادامه مطلب
 
                        <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>
 
                 </ul>
 
             </div>
 
 
         </div>




         <div class="footer-bottom">
         <div class="footer-bottom">


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


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


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


     <a href="#home"
     <a href="#home"
خط ۲٬۸۹۸: خط ۳٬۲۵۹:




     <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>
خط ۲٬۹۲۳: خط ۳٬۲۸۴:


     </a>
     </a>


</nav>
</nav>

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

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

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

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

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

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

چای تازه‌دم

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

صبحانه و املت

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

فضای دوستانه

مناسب دورهمی

حال خوب

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

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

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

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

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

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

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

املت مخصوص

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

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

عدسی

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

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

عصرانه پاتوق

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

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

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

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

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

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

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

حس خودمانی

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

فضای متفاوت

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

دورهمی

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

خاطره‌سازی

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

مجله پاتوق

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

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

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

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

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

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

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

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

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

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

ترکیب نوستالژی و سلیقه امروزی می‌تواند تجربه‌ای متفاوت برای جوان‌ها بسازد.

ادامه مطلب

قرار بعدی، پاتوق؟

یک چای، یک صبحانه یا یک عصرانه... هر دلیلی که داشته باشی، پاتوق محمد می‌تواند مقصد بعدی دورهمی شما باشد.

تماس با پاتوق دیدن منو

کافه پاتوق محمد

قهوه‌خانه سنتی با حال‌وهوای امروزی؛ جایی برای چای، صبحانه، املت، عدسی، عصرانه و دورهمی دوستانه.

اطلاعات کافه

  • آدرس کافه
  • 021-00000000
  • ساعات کاری
  • چای و صبحانه
© تمامی حقوق برای کافه پاتوق محمد محفوظ است.

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=تست۳&oldid=7046»