چای و گپ
چای تازهدم و حرفهایی که قرار نیست زود تمام شوند.
تست۳ - فراغیب
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۶: | خط ۶: | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<meta name="viewport" | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>کافه پاتوق محمد | قهوه خانه سنتی و پاتوق جوانها</title> | <title>کافه پاتوق محمد | قهوه خانه سنتی و پاتوق جوانها</title> | ||
| خط ۱۴: | خط ۱۳: | ||
content="کافه پاتوق محمد؛ قهوه خانه سنتی با چای، املت، عدسی، صبحانه و عصرانه. جایی برای دورهمی، گپ دوستانه، صبحانه و یک عصر خوب."> | content="کافه پاتوق محمد؛ قهوه خانه سنتی با چای، املت، عدسی، صبحانه و عصرانه. جایی برای دورهمی، گپ دوستانه، صبحانه و یک عصر خوب."> | ||
<meta name="robots" | <meta name="robots" content="index, follow"> | ||
content="index, follow"> | |||
<link rel="preconnect" | <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link rel="preconnect" | <link rel="preconnect" | ||
| خط ۳۵: | خط ۳۲: | ||
/* ========================================================= | /* ========================================================= | ||
PATOGH MOHAMMAD | PATOGH MOHAMMAD | ||
TRADITIONAL CAFE | TRADITIONAL CAFE | ||
MOBILE FIRST | MOBILE FIRST | ||
========================================================= */ | ========================================================= */ | ||
| خط ۶۰: | خط ۵۷: | ||
--text:#29231b; | --text:#29231b; | ||
--muted:# | --muted:#716656; | ||
--border:rgba(216,173,69,.28); | --border:rgba(216,173,69,.28); | ||
| خط ۱۰۲: | خط ۹۹: | ||
overflow-x:hidden; | overflow-x:hidden; | ||
font-size:16px; | |||
} | } | ||
| خط ۱۱۸: | خط ۱۱۷: | ||
color:inherit; | color:inherit; | ||
} | } | ||
| خط ۱۵۶: | خط ۱۳۶: | ||
.section{ | .section{ | ||
padding: | padding:60px 0; | ||
position:relative; | position:relative; | ||
| خط ۱۶۵: | خط ۱۴۵: | ||
text-align:center; | text-align:center; | ||
margin-bottom: | margin-bottom:34px; | ||
position:relative; | position:relative; | ||
| خط ۱۷۶: | خط ۱۵۶: | ||
color:var(--gold); | color:var(--gold); | ||
font-size:. | font-size:.92rem; | ||
font-weight:800; | font-weight:800; | ||
margin-bottom:6px; | |||
margin-bottom: | |||
} | } | ||
| خط ۱۹۰: | خط ۱۶۸: | ||
font-size: | font-size: | ||
clamp(1. | clamp(1.8rem,6vw,2.6rem); | ||
line-height:1. | line-height:1.45; | ||
font-family:"Lalezar","Vazirmatn",sans-serif; | font-family: | ||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
font-weight:400; | font-weight:400; | ||
| خط ۲۰۱: | خط ۱۸۲: | ||
.section-title p{ | .section-title p{ | ||
max-width: | max-width:700px; | ||
margin: | margin:10px auto 0; | ||
color:var(--muted); | color:var(--muted); | ||
font-size: | font-size:1rem; | ||
line-height:2; | |||
} | } | ||
| خط ۲۲۳: | خط ۲۰۶: | ||
border-bottom:1px solid var(--border); | border-bottom:1px solid var(--border); | ||
padding: | padding:8px 0; | ||
font-size:. | font-size:.82rem; | ||
text-align:center; | text-align:center; | ||
} | } | ||
| خط ۲۴۷: | خط ۲۲۸: | ||
background: | background: | ||
linear-gradient( | linear-gradient( | ||
180deg, | 180deg, | ||
| خط ۲۷۰: | خط ۲۵۰: | ||
.header-inner{ | .header-inner{ | ||
min-height: | min-height:74px; | ||
display:flex; | display:flex; | ||
| خط ۲۹۲: | خط ۲۷۲: | ||
.brand-icon{ | .brand-icon{ | ||
width: | width:46px; | ||
height: | height:46px; | ||
border-radius:50%; | border-radius:50%; | ||
| خط ۳۰۶: | خط ۲۸۶: | ||
place-items:center; | place-items:center; | ||
font-size:1. | font-size:1.15rem; | ||
} | } | ||
| خط ۳۱۸: | خط ۲۹۵: | ||
flex-direction:column; | flex-direction:column; | ||
line-height:1. | line-height:1.3; | ||
} | } | ||
.brand-name strong{ | .brand-name strong{ | ||
font-family:"Lalezar","Vazirmatn",sans-serif; | font-family: | ||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
color:var(--gold-light); | color:var(--gold-light); | ||
font-size:1. | font-size:1.35rem; | ||
font-weight:400; | font-weight:400; | ||
| خط ۳۳۶: | خط ۳۱۶: | ||
color:#aaa092; | color:#aaa092; | ||
font-size:. | font-size:.72rem; | ||
} | } | ||
| خط ۳۵۱: | خط ۳۳۱: | ||
/* ========================================================= | /* ========================================================= | ||
BANNER | |||
========================================================= */ | ========================================================= */ | ||
. | .top-banner{ | ||
background:#080807; | |||
padding:10px; | |||
border-bottom:1px solid var(--border); | |||
} | |||
.banner-frame{ | |||
width:100%; | |||
max-width:1500px; | |||
margin:auto; | |||
min-height:220px; | |||
max-height:520px; | |||
border-radius:18px; | |||
overflow:hidden; | overflow:hidden; | ||
background:#11100e; | |||
display:flex; | |||
align-items:center; | |||
content: | justify-content:center; | ||
position: | box-shadow: | ||
0 8px 30px rgba(0,0,0,.25); | |||
position:relative; | |||
} | |||
.banner-frame img{ | |||
width: | width:100%; | ||
height: | height:auto; | ||
max-height:520px; | |||
object-fit:contain; | |||
object-position:center; | |||
display:block; | |||
} | } | ||
. | .banner-overlay{ | ||
position:absolute; | position:absolute; | ||
inset:0; | |||
pointer-events:none; | |||
border:1px solid rgba(216,173,69,. | border:1px solid rgba(216,173,69,.35); | ||
border-radius: | border-radius:18px; | ||
} | |||
.banner-caption{ | |||
position:absolute; | |||
right:18px; | |||
bottom:18px; | |||
background:rgba(10,9,7,.82); | |||
color:var(--gold-light); | |||
border:1px solid var(--border); | |||
border-radius:10px; | |||
padding: | padding:7px 12px; | ||
font-size:.78rem; | |||
font-weight:700; | |||
} | } | ||
/* ========================================================= | |||
HERO | |||
========================================================= */ | |||
.hero | .hero{ | ||
position:relative; | |||
height: | min-height:650px; | ||
color:#fff; | |||
background: | |||
linear-gradient( | |||
90deg, | |||
rgba(0,0,0,.92), | |||
rgba(0,0,0,.63), | |||
rgba(0,0,0,.78) | |||
), | |||
url("IMAGE-HERO.jpg"); | |||
background-size:cover; | |||
background-position:center; | |||
overflow:hidden; | |||
} | |||
.hero::before{ | |||
content:""; | |||
position:absolute; | |||
width:180px; | |||
height:180px; | |||
border:1px solid rgba(216,173,69,.3); | |||
border-radius:50%; | |||
left:-80px; | |||
top:-70px; | |||
} | } | ||
.hero | .hero::after{ | ||
content:""; | |||
position:absolute; | |||
width:250px; | |||
height:250px; | |||
border:1px solid rgba(216,173,69,.12); | |||
border-radius:50%; | |||
right:-110px; | |||
bottom:-100px; | |||
} | } | ||
.hero- | .hero-inner{ | ||
min-height:650px; | |||
display:grid; | |||
grid-template-columns:1fr; | |||
align-items:center; | |||
padding:55px 0; | |||
position:relative; | |||
z-index:2; | |||
} | |||
.hero-content{ | |||
max-width:720px; | |||
} | } | ||
. | .hero-stamp{ | ||
width:82px; | |||
height:82px; | |||
border- | border:2px solid var(--gold); | ||
display: | border-radius:50%; | ||
display:flex; | |||
align-items:center; | align-items:center; | ||
| خط ۵۴۰: | خط ۵۳۱: | ||
justify-content:center; | justify-content:center; | ||
text-align:center; | |||
color:var(--gold-light); | |||
font-size:. | font-size:.72rem; | ||
font-weight:800; | font-weight:800; | ||
transform:rotate(-8deg); | |||
margin-bottom:20px; | |||
} | } | ||
. | .hero h1{ | ||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
font-weight:400; | |||
font-size: | |||
clamp(2.6rem,11vw,5rem); | |||
line-height:1.2; | |||
color:#fff; | |||
margin-bottom:14px; | |||
} | } | ||
. | .hero h1 span{ | ||
color:var(--gold-light); | color:var(--gold-light); | ||
} | |||
.hero-subtitle{ | |||
font-size: | |||
clamp(1.05rem,4vw,1.3rem); | |||
color:#ddd2bd; | |||
margin-bottom:20px; | |||
font-weight:600; | |||
} | } | ||
.hero- | .hero-description{ | ||
color:#c5bdaf; | |||
font-size:1rem; | |||
max-width:620px; | |||
margin-bottom:28px; | |||
line-height:2; | |||
} | |||
.hero-actions{ | |||
display:flex; | |||
flex-direction:column; | |||
gap:11px; | |||
} | |||
. | .btn{ | ||
min-height:52px; | |||
padding:11px 21px; | |||
border-radius:12px; | |||
display:inline-flex; | |||
align-items:center; | align-items:center; | ||
| خط ۶۳۰: | خط ۶۱۶: | ||
justify-content:center; | justify-content:center; | ||
gap:8px; | |||
font-size:.92rem; | |||
font-weight:800; | font-weight:800; | ||
transition:.25s ease; | |||
} | } | ||
. | .btn-gold{ | ||
background:var(--gold); | |||
color:var(--black); | |||
box-shadow: | |||
0 8px 25px rgba(216,173,69,.22); | |||
} | } | ||
.btn-gold:hover{ | |||
background:var(--gold-light); | |||
transform:translateY(-2px); | |||
} | |||
.btn-outline{ | |||
color: | border:1px solid rgba(216,173,69,.5); | ||
color:var(--gold-light); | |||
background:rgba(0,0,0,.2); | |||
} | } | ||
/* ========================================================= | |||
HERO NOTES | |||
========================================================= */ | |||
. | .hero-notes{ | ||
display:none; | |||
} | } | ||
. | .hero-note{ | ||
position:absolute; | |||
background:rgba(18,16,12,.85); | |||
border:1px solid var(--border); | |||
padding:11px 14px; | |||
border-radius:12px; | |||
color:var(--gold-light); | |||
font-size:.76rem; | |||
} | |||
/* ========================================================= | |||
RIBBON | |||
========================================================= */ | |||
.ribbon{ | |||
background:var(--gold); | |||
color:var(--black); | |||
padding:10px 0; | |||
border-top:3px solid var(--black); | |||
border-bottom:3px solid var(--black); | |||
} | |||
.ribbon-inner{ | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
flex-wrap:wrap; | |||
gap:15px; | |||
font-weight:800; | |||
font- | |||
font-size:.82rem; | |||
} | } | ||
. | .ribbon span::before{ | ||
content:"✦"; | |||
margin-left:8px; | |||
margin- | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
VIBE | |||
========================================================= */ | ========================================================= */ | ||
. | .vibe{ | ||
background: | background:var(--black-2); | ||
color:#fff; | |||
overflow:hidden; | |||
} | } | ||
. | .vibe .section-title h2{ | ||
color:#fff; | color:#fff; | ||
} | |||
.vibe .section-title p{ | |||
color:#aaa397; | |||
} | |||
.vibe-grid{ | |||
display:grid; | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
gap:12px; | |||
} | } | ||
. | .vibe-card{ | ||
min-height:175px; | |||
border:1px solid var(--border); | |||
border-radius:16px; | |||
padding:20px 15px; | |||
background: | |||
linear-gradient( | |||
145deg, | |||
#242018, | |||
#14130f | |||
); | |||
position:relative; | |||
overflow:hidden; | |||
} | } | ||
. | .vibe-icon{ | ||
color:var(--gold); | |||
font-size:1.6rem; | |||
margin-bottom:11px; | |||
} | } | ||
. | .vibe-card h3{ | ||
color:#fff; | |||
font-size:1rem; | |||
margin-bottom:5px; | |||
} | |||
.vibe-card p{ | |||
color:#aaa194; | |||
font-size:.82rem; | |||
line-height:1.9; | |||
} | } | ||
/* ========================================================= | |||
MENU | |||
========================================================= */ | |||
.menu- | .menu-section{ | ||
background:var(--cream); | |||
} | |||
.menu-board{ | |||
background:#171510; | |||
color:#fff; | |||
border:5px solid #9a7039; | |||
outline:1px solid var(--gold); | |||
outline-offset:-10px; | |||
border-radius:8px; | |||
padding:38px 18px; | |||
box-shadow: | |||
0 15px 40px rgba(0,0,0,.25); | |||
} | } | ||
.menu- | .menu-board-title{ | ||
text-align:center; | |||
color:var(--gold-light); | |||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
font-size:2.2rem; | |||
font- | font-weight:400; | ||
margin-bottom:28px; | |||
} | } | ||
.menu- | .menu-grid{ | ||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:12px; | |||
} | } | ||
.menu-item{ | |||
display:grid; | |||
grid-template-columns: | |||
50px 1fr auto; | |||
gap:11px; | |||
align-items:center; | |||
padding:14px 8px; | |||
border-bottom: | |||
1px dashed rgba(216,173,69,.25); | |||
} | |||
.menu-icon{ | |||
width:44px; | |||
height:44px; | |||
border-radius:50%; | |||
border- | border:1px solid var(--gold); | ||
display:grid; | |||
place-items:center; | |||
color:var(--gold-light); | |||
font-size:1rem; | |||
} | } | ||
. | .menu-item h3{ | ||
color:#fff; | |||
font-size:1rem; | |||
margin-bottom:3px; | |||
} | |||
.menu-item p{ | |||
color:#aaa194; | |||
font-size:.78rem; | |||
line-height:1.8; | |||
} | } | ||
. | .menu-price{ | ||
color:var(--gold-light); | |||
font-size:.8rem; | |||
white-space:nowrap; | |||
font-weight:800; | |||
} | } | ||
. | .menu-note{ | ||
text-align:center; | |||
color: | color:#938a7b; | ||
font-size: | font-size:.76rem; | ||
margin- | margin-top:22px; | ||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
BREAKFAST | |||
========================================================= */ | ========================================================= */ | ||
. | .breakfast{ | ||
background: | background:var(--black); | ||
color:#fff; | |||
} | } | ||
. | .breakfast-grid{ | ||
display:grid; | display:grid; | ||
| خط ۹۹۲: | خط ۹۵۴: | ||
grid-template-columns:1fr; | grid-template-columns:1fr; | ||
gap: | gap:16px; | ||
} | } | ||
. | .food-card{ | ||
border-radius:18px; | border-radius:18px; | ||
overflow:hidden; | |||
border:1px solid var(--border); | |||
background:#1c1a15; | |||
box-shadow:var(--shadow); | |||
} | } | ||
. | .food-image{ | ||
height:240px; | |||
background:#2a261d; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
padding:12px; | |||
overflow:hidden; | |||
} | } | ||
. | .food-image img{ | ||
width:100%; | |||
height:100%; | |||
object-fit:contain; | |||
object-position:center; | |||
} | } | ||
. | .food-content{ | ||
padding:19px; | |||
} | |||
.food-content h3{ | |||
color:var(-- | color:var(--gold-light); | ||
font-size:. | font-size:1.05rem; | ||
margin-bottom: | margin-bottom:6px; | ||
} | } | ||
. | .food-content p{ | ||
color:#a59c8e; | |||
font-size:.82rem; | |||
line-height:1.9; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
YOUNG PEOPLE | |||
========================================================= */ | ========================================================= */ | ||
. | .young{ | ||
background: | background:var(--cream); | ||
position:relative; | |||
} | |||
.young-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:16px; | |||
} | } | ||
. | .young-card{ | ||
background:#fff; | |||
border:1px solid rgba(104,75,46,.15); | |||
border-radius:18px; | |||
padding:25px 19px; | |||
position:relative; | |||
box-shadow: | |||
0 7px 25px rgba(75,53,32,.08); | |||
overflow:hidden; | |||
} | } | ||
. | .young-card i{ | ||
font-size:1.55rem; | |||
color:var(--brown); | |||
margin: | margin-bottom:11px; | ||
} | |||
.young-card h3{ | |||
color:var(--black); | |||
font-size: | font-size:1.03rem; | ||
margin-bottom:6px; | |||
} | } | ||
. | .young-card p{ | ||
color:var(--muted); | |||
font-size:.82rem; | |||
line-height:2; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
QUOTE | |||
========================================================= */ | ========================================================= */ | ||
. | .quote-section{ | ||
background: | background: | ||
linear-gradient( | |||
color:#fff; | 135deg, | ||
#171510, | |||
#2b2418 | |||
); | |||
color:#fff; | |||
text-align:center; | |||
padding:70px 20px; | |||
position:relative; | |||
overflow:hidden; | |||
} | } | ||
. | .quote-section blockquote{ | ||
position:relative; | |||
max-width:800px; | |||
margin:auto; | |||
color:var(--gold-light); | |||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
font-size: | |||
clamp(1.65rem,6vw,2.7rem); | |||
line-height:1.65; | |||
} | } | ||
. | .quote-author{ | ||
margin-top:12px; | |||
color:#a09685; | |||
font-size:.8rem; | |||
} | } | ||
/* ========================================================= | |||
GALLERY | |||
========================================================= */ | |||
.gallery{ | |||
background:var(--black-2); | |||
color:#fff; | |||
} | } | ||
.gallery- | .gallery .section-title h2{ | ||
color:#fff; | |||
} | |||
.gallery .section-title p{ | |||
color:#aaa194; | |||
} | |||
.gallery-grid{ | |||
display:grid; | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
gap:9px; | |||
} | |||
.gallery-item{ | |||
height:180px; | |||
border-radius:12px; | |||
overflow:hidden; | |||
background:#29251e; | |||
border:1px solid var(--border); | |||
position:relative; | |||
} | } | ||
. | .gallery-item.large{ | ||
grid-column:span 2; | |||
height:220px; | |||
} | } | ||
. | .gallery-item img{ | ||
width:100%; | |||
height:100%; | |||
object-fit:cover; | |||
object-position:center; | |||
} | } | ||
. | .gallery-label{ | ||
position:absolute; | |||
bottom:8px; | |||
right:8px; | |||
background: | background:rgba(0,0,0,.78); | ||
color:var(--gold-light); | color:var(--gold-light); | ||
| خط ۱٬۲۵۷: | خط ۱٬۲۲۱: | ||
border:1px solid var(--border); | border:1px solid var(--border); | ||
padding:4px 9px; | |||
border-radius:7px; | |||
font-size:.68rem; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
SOCIAL | |||
========================================================= */ | ========================================================= */ | ||
. | .social{ | ||
background: | background:var(--cream); | ||
text-align:center; | |||
} | |||
.social-box{ | |||
background | background:#fff; | ||
border:1px solid rgba(104,75,46,.18); | |||
border-radius:22px; | |||
padding:32px 18px; | |||
box-shadow: | |||
0 8px 30px rgba(0,0,0,.07); | |||
} | } | ||
. | .social-icons{ | ||
display:flex; | |||
justify-content:center; | |||
gap:11px; | |||
margin-top:20px; | |||
margin- | |||
} | } | ||
. | .social-icons a{ | ||
width:47px; | |||
height:47px; | |||
border-radius:50%; | |||
display:grid; | |||
place-items:center; | |||
background:var(--black); | |||
color:var(--gold-light); | |||
border:1px solid var(--border); | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
CTA | |||
========================================================= */ | ========================================================= */ | ||
. | .cta{ | ||
background: | background: | ||
linear-gradient( | |||
rgba(12,11,9,.93), | |||
rgba(12,11,9,.93) | |||
), | |||
url("IMAGE-CAFE.jpg"); | |||
background-size:cover; | |||
background-position:center; | |||
color:#fff; | |||
text-align:center; | |||
padding:75px 15px; | |||
} | } | ||
. | .cta h2{ | ||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
color:var(--gold-light); | color:var(--gold-light); | ||
font- | font-size: | ||
clamp(2.1rem,8vw,3.2rem); | |||
font-weight:400; | font-weight:400; | ||
margin-bottom: | margin-bottom:10px; | ||
} | } | ||
. | .cta p{ | ||
color:# | color:#c0b8aa; | ||
font-size:. | font-size:.92rem; | ||
max-width:650px; | |||
margin:0 auto 24px; | |||
line-height:2; | |||
} | } | ||
. | .cta-actions{ | ||
display:flex; | |||
flex-direction:column; | |||
gap:11px; | |||
justify-content:center; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
FOOTER | |||
========================================================= */ | ========================================================= */ | ||
. | .footer{ | ||
background:#0b0a08; | |||
color:#fff; | |||
padding:45px 0 90px; | |||
border-top:1px solid var(--border); | |||
} | |||
.footer-grid{ | |||
display:grid; | display:grid; | ||
grid-template-columns: | grid-template-columns:1fr; | ||
gap:28px; | |||
} | |||
.footer h3{ | |||
color:var(--gold-light); | |||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
. | font-size:1.25rem; | ||
font-weight:400; | |||
margin-bottom:10px; | |||
} | |||
.footer p, | |||
.footer li{ | |||
color:#908779; | |||
font-size:.8rem; | |||
line-height:2; | |||
} | } | ||
. | .footer ul{ | ||
list-style:none; | |||
display:grid; | |||
gap:6px; | |||
} | } | ||
.footer-bottom{ | |||
border-top:1px solid rgba(216,173,69,.12); | |||
margin-top:28px; | |||
padding-top:20px; | |||
text-align:center; | |||
color:#70685b; | |||
font-size:.72rem; | |||
} | |||
/* ========================================================= | |||
MOBILE NAV | |||
========================================================= */ | |||
.mobile-nav{ | |||
position:fixed; | |||
right:0; | |||
left:0; | |||
bottom:0; | |||
height:68px; | |||
display:grid; | |||
grid-template-columns: | |||
repeat(5,1fr); | |||
background:#11100e; | |||
border-top:1px solid var(--border); | |||
z-index:9999; | |||
box-shadow: | |||
0 -5px 25px rgba(0,0,0,.3); | |||
} | } | ||
.mobile-nav a{ | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
justify-content:center; | |||
gap:3px; | |||
color:#91897a; | |||
font-size:.68rem; | |||
font-weight:600; | |||
} | |||
.mobile-nav i{ | |||
font-size:1.05rem; | |||
} | |||
.mobile-nav a.active{ | |||
color:var(--gold-light); | |||
} | |||
. | /* ========================================================= | ||
TABLET | |||
========================================================= */ | |||
@media (min-width:600px){ | |||
.top-banner{ | |||
padding:14px; | |||
} | } | ||
. | .banner-frame{ | ||
min-height:260px; | |||
border-radius:20px; | |||
} | |||
.hero-actions{ | |||
flex-direction:row; | |||
} | |||
.btn{ | |||
min-width:155px; | |||
} | |||
.vibe-grid{ | |||
grid-template-columns: | |||
repeat(4,1fr); | |||
} | } | ||
. | .menu-grid{ | ||
grid-template-columns: | |||
repeat(2,1fr); | |||
column-gap:30px; | |||
} | } | ||
. | .breakfast-grid{ | ||
grid-template-columns: | |||
repeat(2,1fr); | |||
} | |||
.young-grid{ | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
} | } | ||
. | .gallery-grid{ | ||
grid-template-columns: | |||
repeat(4,1fr); | |||
} | } | ||
. | .gallery-item.large{ | ||
grid-column:span 2; | |||
} | } | ||
. | .cta-actions{ | ||
flex-direction:row; | |||
} | } | ||
} | |||
/* ========================================================= | |||
DESKTOP | |||
========================================================= */ | |||
@media (min-width:900px){ | |||
. | .section{ | ||
padding:90px 0; | |||
} | } | ||
. | .banner-frame{ | ||
min-height:320px; | |||
max-height:600px; | |||
} | } | ||
. | .desktop-menu{ | ||
display:flex; | |||
align-items:center; | |||
gap:24px; | |||
} | } | ||
. | .desktop-menu a{ | ||
color:#c0b7a8; | |||
font-size:.84rem; | |||
font-weight:600; | |||
transition:.2s; | |||
} | } | ||
. | .desktop-menu a:hover{ | ||
color:var(--gold-light); | |||
} | } | ||
. | .header-button{ | ||
display:inline-flex; | |||
align-items:center; | |||
gap:7px; | |||
padding:9px 14px; | |||
border:1px solid var(--border); | |||
border-radius:10px; | |||
color:var(--gold-light); | |||
font-size:.76rem; | |||
font- | font-weight:700; | ||
} | } | ||
.hero-inner{ | |||
min-height:720px; | |||
padding:70px 0; | |||
} | } | ||
.hero-notes{ | |||
display:block; | |||
position:absolute; | |||
inset:0; | |||
pointer-events:none; | |||
} | |||
.hero-note.note-one{ | |||
top:22%; | |||
left:5%; | |||
} | |||
.hero-note.note-two{ | |||
bottom:20%; | |||
left:15%; | |||
} | |||
.hero-note.note-three{ | |||
top:30%; | |||
right:5%; | |||
} | |||
.menu-board{ | |||
padding:50px 55px; | |||
} | |||
.menu-grid{ | |||
column-gap:60px; | |||
} | |||
.breakfast-grid{ | |||
grid-template-columns: | |||
repeat(3,1fr); | |||
} | |||
.food-image{ | |||
height:290px; | |||
} | |||
.young-grid{ | |||
grid-template-columns: | |||
repeat(4,1fr); | |||
} | |||
.gallery-item{ | |||
height:230px; | |||
} | |||
.gallery-item.large{ | |||
height:310px; | |||
} | |||
.footer-grid{ | |||
grid-template-columns: | |||
1.5fr 1fr 1fr; | |||
} | |||
.footer{ | |||
padding-bottom:45px; | |||
} | |||
.mobile-nav{ | |||
display:none; | |||
} | |||
} | |||
/* ========================================================= | |||
LARGE DESKTOP | |||
========================================================= */ | |||
@media (min-width:1200px){ | |||
.hero h1{ | |||
font-size:5rem; | |||
} | |||
.banner-frame{ | |||
min-height:350px; | |||
} | |||
} | |||
/* ========================================================= | |||
REDUCED MOTION | |||
========================================================= */ | |||
@media (prefers-reduced-motion:reduce){ | |||
html{ | |||
scroll-behavior:auto; | |||
} | |||
*, | |||
*::before, | |||
*::after{ | |||
transition:none !important; | |||
animation:none !important; | |||
} | |||
} | |||
</ | </style> | ||
</head> | |||
< | <body> | ||
<!-- ===================================================== | <!-- ===================================================== | ||
TOP STRIP | |||
===================================================== --> | ===================================================== --> | ||
<section class="hero" | <div class="top-strip"> | ||
id="home"> | |||
<div class="container"> | |||
<div class="container hero-inner"> | |||
<i class="fa-solid fa-mug-hot"></i> | |||
<div class="hero-content"> | یه چای، یه گپ، یه پاتوق خوب... | ||
<div class="hero-stamp"> | <i class="fa-solid fa-mug-saucer"></i> | ||
پاتوق | </div> | ||
<br> | |||
محمد | </div> | ||
<br> | |||
۱۴۰۵ | |||
<!-- ===================================================== | |||
</div> | HEADER | ||
===================================================== --> | |||
<h1> | <header class="header"> | ||
اینجا فقط | <div class="container header-inner"> | ||
<span> | |||
چای نمیخوریم! | <a href="#home" class="brand"> | ||
</span> | |||
<span class="brand-icon"> | |||
</h1> | |||
<i class="fa-solid fa-mug-hot"></i> | |||
<div class="hero-subtitle"> | </span> | ||
یه پاتوق برای چای، صبحانه، | <span class="brand-name"> | ||
گپ و خاطره ساختیم. | |||
<strong> | |||
</div> | کافه پاتوق محمد | ||
</strong> | |||
<span> | |||
قهوه خانه سنتی و پاتوق دوستانه | |||
</span> | |||
</span> | |||
</a> | |||
<nav class="desktop-menu" | |||
aria-label="منوی اصلی"> | |||
<a href="#menu"> | |||
منو | |||
</a> | |||
<a href="#vibe"> | |||
حال و هوا | |||
</a> | |||
<a href="#breakfast"> | |||
صبحانه | |||
</a> | |||
<a href="#gallery"> | |||
فضای کافه | |||
</a> | |||
<a href="#contact"> | |||
تماس | |||
</a> | |||
</nav> | |||
<a href="#menu" | |||
class="header-button"> | |||
<i class="fa-solid fa-utensils"></i> | |||
دیدن منو | |||
</a> | |||
</div> | |||
</header> | |||
<main> | |||
<!-- ===================================================== | |||
NEW TOP BANNER | |||
===================================================== --> | |||
<section class="top-banner" | |||
aria-label="بنر کافه پاتوق محمد"> | |||
<div class="container"> | |||
<div class="banner-frame"> | |||
<!-- تصویر بنر را اینجا قرار بده --> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260012-01/baner-01.png" | |||
alt="بنر کافه پاتوق محمد" | |||
loading="eager" | |||
> | |||
<div class="banner-overlay"></div> | |||
<div class="banner-caption"> | |||
<i class="fa-solid fa-mug-hot"></i> | |||
کافه پاتوق محمد | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
HERO | |||
===================================================== --> | |||
<section class="hero" | |||
id="home"> | |||
<div class="container hero-inner"> | |||
<div class="hero-content"> | |||
<div class="hero-stamp"> | |||
پاتوق | |||
<br> | |||
محمد | |||
<br> | |||
۱۴۰۵ | |||
</div> | |||
<h1> | |||
اینجا فقط | |||
<span> | |||
چای نمیخوریم! | |||
</span> | |||
</h1> | |||
<div class="hero-subtitle"> | |||
یه پاتوق برای چای، صبحانه، | |||
گپ و خاطره ساختیم. | |||
</div> | |||
<p class="hero-description"> | <p class="hero-description"> | ||
| خط ۱٬۹۰۵: | خط ۱٬۹۹۰: | ||
</section> | </section> | ||
| خط ۱٬۹۱۶: | خط ۲٬۰۰۰: | ||
<div class="container ribbon-inner"> | <div class="container ribbon-inner"> | ||
<span> | <span>صبحانه</span> | ||
<span> | <span>چای</span> | ||
<span> | <span>املت</span> | ||
<span> | <span>عدسی</span> | ||
<span> | <span>عصرانه</span> | ||
<span> | <span>دورهمی</span> | ||
</div> | </div> | ||
</div> | </div> | ||
| خط ۱٬۹۵۴: | خط ۲٬۰۲۵: | ||
<div class="container"> | <div class="container"> | ||
<div class="section-title"> | <div class="section-title"> | ||
| خط ۲٬۰۵۰: | خط ۲٬۱۲۰: | ||
</section> | </section> | ||
| خط ۲٬۰۶۱: | خط ۲٬۱۳۰: | ||
<div class="container"> | <div class="container"> | ||
<div class="section-title"> | <div class="section-title"> | ||
| خط ۲٬۰۷۴: | خط ۲٬۱۴۲: | ||
<p> | <p> | ||
منوی اولیه بر اساس | منوی اولیه بر اساس آیتمهای فعلی طراحی شده | ||
و میتوانی نام، توضیحات و قیمتها را تغییر بدهی. | و میتوانی نام، توضیحات و قیمتها را تغییر بدهی. | ||
</p> | </p> | ||
| خط ۲٬۰۸۲: | خط ۲٬۱۵۰: | ||
<div class="menu-board"> | <div class="menu-board"> | ||
<div class="menu-board-title"> | <div class="menu-board-title"> | ||
| خط ۲٬۱۰۲: | خط ۲٬۱۶۹: | ||
<div> | <div> | ||
<h3> | <h3>چای</h3> | ||
<p> | <p> | ||
| خط ۲٬۱۲۷: | خط ۲٬۱۹۲: | ||
<div> | <div> | ||
<h3> | <h3>املت</h3> | ||
<p> | <p> | ||
| خط ۲٬۱۵۲: | خط ۲٬۲۱۵: | ||
<div> | <div> | ||
<h3> | <h3>عدسی</h3> | ||
<p> | <p> | ||
| خط ۲٬۱۷۷: | خط ۲٬۲۳۸: | ||
<div> | <div> | ||
<h3> | <h3>صبحانه</h3> | ||
<p> | <p> | ||
| خط ۲٬۲۰۲: | خط ۲٬۲۶۱: | ||
<div> | <div> | ||
<h3> | <h3>عصرانه</h3> | ||
<p> | <p> | ||
| خط ۲٬۲۲۷: | خط ۲٬۲۸۴: | ||
<div> | <div> | ||
<h3> | <h3>دورهمی</h3> | ||
<p> | <p> | ||
| خط ۲٬۲۵۹: | خط ۲٬۳۱۴: | ||
</section> | </section> | ||
| خط ۲٬۲۷۰: | خط ۲٬۳۲۴: | ||
<div class="container"> | <div class="container"> | ||
<div class="section-title"> | <div class="section-title"> | ||
| خط ۲٬۲۸۳: | خط ۲٬۳۳۶: | ||
<p> | <p> | ||
صبحانه، املت و عدسی میتوانند از جذابترین | |||
بخشهای منوی پاتوق برای شروع روز باشند. | |||
</p> | </p> | ||
| خط ۲٬۲۹۸: | خط ۲٬۳۵۱: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | ||
alt="املت کافه پاتوق محمد" | alt="املت کافه پاتوق محمد" | ||
loading="lazy" | loading="lazy" | ||
| خط ۲٬۳۲۵: | خط ۲٬۳۷۸: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | ||
alt="عدسی صبحانه کافه پاتوق محمد" | alt="عدسی صبحانه کافه پاتوق محمد" | ||
loading="lazy" | loading="lazy" | ||
| خط ۲٬۳۵۲: | خط ۲٬۴۰۵: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | ||
alt="صبحانه سنتی کافه پاتوق محمد" | alt="صبحانه سنتی کافه پاتوق محمد" | ||
loading="lazy" | loading="lazy" | ||
| خط ۲٬۳۷۹: | خط ۲٬۴۳۲: | ||
</section> | </section> | ||
| خط ۲٬۳۸۹: | خط ۲٬۴۴۱: | ||
<div class="container"> | <div class="container"> | ||
<div class="section-title"> | <div class="section-title"> | ||
| خط ۲٬۴۸۲: | خط ۲٬۵۳۳: | ||
</section> | </section> | ||
| خط ۲٬۵۰۵: | خط ۲٬۵۵۵: | ||
</section> | </section> | ||
<!-- ===================================================== | <!-- ===================================================== | ||
GALLERY | GALLERY | ||
===================================================== --> | ===================================================== --> | ||
<section class="section gallery" | <section class="section gallery" | ||
id="gallery"> | id="gallery"> | ||
<div class="container"> | <div class="container"> | ||
<div class="section-title"> | |||
<div class="section-title"> | |||
<span class="small-title"> | |||
<span class="small-title"> | قابهای پاتوق | ||
قابهای پاتوق | </span> | ||
</span> | |||
<h2> | |||
<h2 | |||
اینجا را باید دید! | اینجا را باید دید! | ||
</h2> | </h2> | ||
| خط ۲٬۵۴۲: | خط ۲٬۵۹۰: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | ||
alt="فضای داخلی کافه پاتوق محمد" | alt="فضای داخلی کافه پاتوق محمد" | ||
loading="lazy" | loading="lazy" | ||
| خط ۲٬۵۵۷: | خط ۲٬۶۰۵: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | ||
alt="فضای سنتی کافه پاتوق محمد" | alt="فضای سنتی کافه پاتوق محمد" | ||
loading="lazy" | loading="lazy" | ||
| خط ۲٬۵۷۲: | خط ۲٬۶۲۰: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | ||
alt="چای تازه دم کافه پاتوق محمد" | alt="چای تازه دم کافه پاتوق محمد" | ||
loading="lazy" | loading="lazy" | ||
| خط ۲٬۵۸۷: | خط ۲٬۶۳۵: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | ||
alt="دورهمی دوستان در کافه پاتوق محمد" | alt="دورهمی دوستان در کافه پاتوق محمد" | ||
loading="lazy" | loading="lazy" | ||
| خط ۲٬۶۰۲: | خط ۲٬۶۵۰: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | ||
alt="صبحانه سنتی در کافه پاتوق محمد" | alt="صبحانه سنتی در کافه پاتوق محمد" | ||
loading="lazy" | loading="lazy" | ||
| خط ۲٬۶۱۹: | خط ۲٬۶۶۷: | ||
</section> | </section> | ||
| خط ۲٬۶۲۹: | خط ۲٬۶۷۶: | ||
<div class="container"> | <div class="container"> | ||
<div class="social-box"> | <div class="social-box"> | ||
| خط ۲٬۶۸۲: | خط ۲٬۷۲۸: | ||
</section> | </section> | ||
| خط ۲٬۷۳۴: | خط ۲٬۷۷۹: | ||
</main> | </main> | ||
| خط ۲٬۷۴۴: | خط ۲٬۷۸۸: | ||
<div class="container"> | <div class="container"> | ||
<div class="footer-grid"> | <div class="footer-grid"> | ||
| خط ۲٬۷۷۲: | خط ۲٬۸۱۵: | ||
<ul> | <ul> | ||
<li> | <li>چای</li> | ||
<li> | <li>املت</li> | ||
<li> | <li>عدسی</li> | ||
<li> | <li>صبحانه</li> | ||
<li> | <li>عصرانه</li> | ||
</ul> | </ul> | ||
| خط ۲٬۸۳۷: | خط ۲٬۸۷۰: | ||
</footer> | </footer> | ||
| خط ۲٬۸۴۶: | خط ۲٬۸۷۸: | ||
<nav class="mobile-nav" | <nav class="mobile-nav" | ||
aria-label="منوی موبایل"> | aria-label="منوی موبایل"> | ||
<a href="#home" | <a href="#home" | ||
| خط ۲٬۸۹۲: | خط ۲٬۹۲۳: | ||
</a> | </a> | ||
</nav> | </nav> | ||
نسخهٔ ۲۶ اوت ۲۰۲۶، ساعت ۰۹:۲۸
یه چای، یه گپ، یه پاتوق خوب...
پاتوق
محمد
۱۴۰۵
محمد
۱۴۰۵
اینجا فقط چای نمیخوریم!
یه پاتوق برای چای، صبحانه،
گپ و خاطره ساختیم.
کافه پاتوق محمد؛ حالوهوای قهوهخانههای قدیمی با سلیقه امروز. جایی برای صبحانه، املت، عدسی، چای و عصرانه؛ برای وقتی که دلت یک جای خودمانی میخواهد.
☕ چای تازهدم
🍳 املت مخصوص
✦ جای رفیقبازی
صبحانه
چای
املت
عدسی
عصرانه
دورهمی
حالوهوای پاتوق
اینجا قراره بهت خوش بگذره
پاتوق محمد برای کسانی است که یک جای ساده، صمیمی و متفاوت برای وقت گذراندن میخواهند.
دورهمی رفیقانه
یک میز، چند رفیق و کلی حرف نگفته.
جای عکس گرفتن
فضای سنتی و متفاوت برای ثبت لحظههای خوب.
حال خوب
جایی برای فاصله گرفتن از شلوغی روزمره.
صبحهای پاتوق
صبحانهای که ارزش بیدار شدن دارد!
صبحانه، املت و عدسی میتوانند از جذابترین بخشهای منوی پاتوق برای شروع روز باشند.
املت پاتوق
یک انتخاب ساده، گرم و محبوب برای صبحانه.
عدسی
گرم، دلچسب و مناسب یک صبح آرام.
صبحانه سنتی
شروع روز با طعم و حالوهوای ایرانی.
پاتوق نسل جدید
چرا جوانها باید پاتوق محمد را امتحان کنند؟
چون یک کافه خوب فقط غذا و نوشیدنی نیست؛ جایی است که دوست داری دوباره به آن برگردی.
فضای اینستاگرامی
ترکیب فضای سنتی، رنگهای گرم و المانهای قدیمی میتواند برای عکس و تولید محتوا جذاب باشد.
وقتگذرانی با رفیقها
یک جای خودمانی برای حرف زدن، خندیدن و دورهم بودن بدون تشریفات.
یک گوشه برای خودت
اگر دنبال فضایی متفاوت برای مطالعه، کار یا کمی خلوت کردن هستی، پاتوق میتواند انتخاب متفاوتی باشد.
حس نوستالژی
حالوهوای قهوهخانههای قدیمی با زبان طراحی امروزی و مناسب نسل جوان.
«بعضی قرارها را نمیشود در خانه گذاشت... باید آمد پاتوق.»
قابهای پاتوق
اینجا را باید دید!
تصاویر واقعی فضای کافه، غذاها و دورهمیها را در این قسمت قرار بده تا صفحه شخصیت بیشتری پیدا کند.
فضای پاتوق
حال خوب
چای تازهدم
دورهمی
صبحانه
قرار بعدی کجاست؟
اگر دنبال یک جای صمیمی برای چای، صبحانه، عصرانه یا دورهمی هستی، شاید پاتوق محمد همان جایی باشد که دنبالش میگشتی.