html{
scroll-behavior:smooth;
}
body{
margin:0;
font-family:'Poppins', sans-serif;
color:#222;
background:#f8f5ef;
}
/* ===========================
HEADER
=========================== */
header{
position:fixed;
top:0;
left:0;
width:100%;
background:rgba(43,0,0,.82);
backdrop-filter:blur(8px);
z-index:1000;
transition:.35s ease;
}
/* Homepage header is hidden until the visitor scrolls */
.home-header {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
.home-header.scrolled {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
/* Container */
.header-container{
max-width:1400px;
margin:auto;
height:95px;
padding:0 40px;
display:flex;
justify-content:space-between;
align-items:center;
transition:.35s ease;
}
/* Logo */
.logo img{
height:160px;
width:auto;
display:block;
transition:.35s ease;
}
/* Navigation */
nav{
display:flex;
align-items:center;
gap:35px;
}
nav a{
color:white;
text-decoration:none;
font-size:17px;
letter-spacing:2px;
text-transform:uppercase;
position:relative;
transition:.3s;
}
nav a::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:2px;
background:#d4af37;
transition:.3s;
}
nav a:hover{
color:#d4af37;
}
nav a:hover::after{
width:100%;
}
/* Active Navigation Link */
nav a.active{
color:#d4af37;
}
nav a.active::after{
width:100%;
}
/* ===========================
HERO
=========================== */
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
padding-left: 8%;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to right,
rgba(0,0,0,.68),
rgba(0,0,0,.18)
),
url("images/hero.jpg");
background-size: cover;
background-position: 25% center;
animation: heroZoom 30s ease-out forwards;
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 650px;
margin-left: 90px;
transform: translateY(-50px);
}
@keyframes heroZoom {
from {
transform: scale(1);
}
to {
transform: scale(1.05);
}
}
/* ===========================
HERO FADE-IN
=========================== */
.hero-content .tagline,
.hero-content h1,
.hero-content .hero-button {
opacity: 0;
transform: translateY(25px);
animation: heroFadeUp .8s ease forwards;
}
.hero-content .tagline {
animation-delay: .5s;
}
.hero-content h1 {
animation-delay: 1s;
}
.hero-content .hero-button {
animation-delay: 1.5s;
}
@keyframes heroFadeUp {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Tagline */
.tagline{
color:#ffffff;
letter-spacing:6px;
font-size:18px;
font-weight:500;
text-transform:uppercase;
margin:0 0 12px 0;
}
/* Heading */
.hero h1 {
color: white;
font-size: 72px;
line-height: .95;
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
margin: 0 0 28px;
text-shadow: 2px 2px 20px rgba(0,0,0,.45);
}
/* Hero paragraph */
.hero-content > p:not(.tagline){
font-size:22px;
line-height:1.8;
margin:35px 0;
color:white;
}
/* Button */
.hero-button{
display:inline-block;
padding:18px 42px;
border:2px solid #d4af37;
color:#d4af37;
text-decoration:none;
text-transform:uppercase;
letter-spacing:2px;
font-weight:500;
transition:.35s;
}
.hero-button:hover{
background:#d4af37;
color:#2b0000;
}
/* ===========================
WELCOME
=========================== */
#welcome{
background:#ffffff;
text-align:center;
}
.welcome-container{
max-width:900px;
margin:auto;
}
.welcome-small{
color:#b68b2c;
letter-spacing:5px;
text-transform:uppercase;
font-size:16px;
margin-bottom:10px;
}
#welcome h2{
font-family:'Cormorant Garamond', serif;
font-size:72px;
color:#3b0000;
margin:0;
}
.gold-divider.center{
margin:30px auto 45px;
}
.welcome-text{
font-size:22px;
line-height:1.9;
color:#555;
max-width:760px;
margin:auto;
}
/* ABOUT */
.about-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
.about-text h2{
text-align:left;
margin-bottom:20px;
}
.about-text p{
font-size:18px;
line-height:1.9;
color:#444;
margin-bottom:20px;
}
.about-image img{
width:100%;
height:560px;
object-fit:cover;
object-position:center;
border-radius:20px;
box-shadow:0 20px 45px rgba(0,0,0,.15);
}
/* ===========================
GALLERY
=========================== */
#gallery{
background:#faf8f3;
}
.gallery-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}
.gallery-item{
overflow:hidden;
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,.12);
}
.gallery-item img{
width:100%;
height:280px;
object-fit:cover;
display:block;
transition:.4s;
}
.gallery-item:hover img{
transform:scale(1.08);
}
/* SECTIONS */
section{
padding:140px 8%;
}
h2{
font-family:'Cinzel', serif;
font-size:48px;
color:#2b0000;
text-align:center;
margin-bottom:60px;
}
/* MENU */
.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(300px, 1fr));
gap: 35px;
max-width: 1200px;
margin: auto;
align-items: stretch;
}
.card {
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 18px 45px rgba(0,0,0,.12);
border-top: 4px solid #d4af37;
transition: .35s;
min-height: 260px;
height: 100%;
display: flex;
flex-direction: column;
}
.card:hover{
transform:translateY(-14px) scale(1.02);
box-shadow:0 30px 60px rgba(0,0,0,.18);
}
.card img{
width:100%;
height:220px;
object-fit:cover;
border-radius:12px;
margin-bottom:20px;
}
.card h3{
font-family:'Cinzel', serif;
color:#3b0000;
font-size:28px;
margin:0 0 15px;
}
.card p{
color:#555;
line-height:1.8;
margin:0;
flex-grow: 1;
}
/* ===========================
CONTACT
=========================== */
#contact{
background:#f8f5ef;
}
.contact-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:380px 1fr;
gap:60px;
align-items:center;
}
.contact-info{
background:white;
padding:45px;
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,.10);
}
.contact-info h3{
font-family:'Cinzel', serif;
color:#3b0000;
margin-top:0;
margin-bottom:35px;
}
.contact-info p{
font-size:18px;
line-height:2;
}
.contact-info i{
color:#d4af37;
width:30px;
font-size:22px;
}
.social-icons{
display:flex;
gap:18px;
margin-top:35px;
}
.social-icons a{
width:60px;
height:60px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;
font-size:28px;
background:#fff;
border:2px solid #eee;
transition:.35s;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.facebook{
color:#1877F2;
}
.instagram{
color:#E4405F;
}
.google{
color:#34A853;
}
.social-icons a:hover{
transform:translateY(-6px) scale(1.08);
box-shadow:0 15px 35px rgba(0,0,0,.15);
}
.map iframe{
width:100%;
height:450px;
border:none;
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,.10);
}
.hours{
margin:30px 0;
}
.hours h3{
margin-bottom:15px;
color:#3b0000;
}
.hours p{
margin:0;
line-height:1.8;
}
.contact-info hr{
border:none;
height:1px;
background:#e5d5aa;
margin:30px 0;
}
/* ===========================
BACK TO TOP BUTTON
=========================== */
#backToTop{
position:fixed;
bottom:35px;
right:35px;
width:60px;
height:60px;
border:2px solid #d4af37;
border-radius:50%;
background:#2b0000;
color:#d4af37;
font-size:22px;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 12px 30px rgba(0,0,0,.25);
opacity:0;
visibility:hidden;
transform:translateY(20px);
transition:all .35s ease;
z-index:999;
}
#backToTop.show{
opacity:1;
visibility:visible;
transform:translateY(0);
}
#backToTop:hover{
background:#d4af37;
color:#2b0000;
transform:translateY(-5px);
box-shadow:0 18px 40px rgba(0,0,0,.30);
}
/* FOOTER */
footer{
background:#2b0000;
color:white;
text-align:center;
padding:40px;
}
.menu-toggle{
display:none;
border:none;
background:transparent;
color:white;
font-size:30px;
cursor:pointer;
}
@media (max-width: 900px){
.hero{
width:100%;
min-height:100vh;
height:auto;
box-sizing:border-box;
padding:220px 24px 70px;
justify-content:center;
text-align:center;
background-position:center center;
}
.hero-content{
width:100%;
max-width:650px;
margin-left:0;
margin-top:0;
}
.hero-divider{
justify-content:center;
}
.hero h1{
font-size:clamp(48px, 14vw, 68px);
}
.hero-content > p:not(.tagline){
font-size:18px;
line-height:1.6;
}
.header-container{
position:relative;
width:auto;
max-width:none;
box-sizing:border-box;
flex-direction:row;
align-items:center;
margin:0;
padding:10px 80px 10px 20px;
}
.menu-toggle{
display:block;
position:absolute;
top:50%;
right:20px;
margin:0;
padding:10px;
transform:translateY(-50%);
}
nav{
display:none;
position:absolute;
top:100%;
left:0;
width:100%;
box-sizing:border-box;
flex-direction:column;
gap:0;
margin-top:0;
padding:20px 0;
background:rgba(43,0,0,.98);
}
nav.mobile-open{
display:flex;
}
nav a{
width:100%;
box-sizing:border-box;
padding:16px 24px;
text-align:center;
}
.logo{
flex-shrink:1;
}
.logo img{
display:block;
max-width:220px;
height:85px;
}
.about-container{
grid-template-columns:1fr;
gap:35px;
}
.about-image{
order:1;
}
.about-text{
order:2;
}
.about-image img{
width:100%;
height:320px;
object-fit:cover;
}
.about-text h2{
text-align:center;
}
.contact-container{
grid-template-columns:1fr;
gap:35px;
}
.contact-info{
width:100%;
box-sizing:border-box;
}
.map{
width:100%;
min-width:0;
}
.map iframe{
display:block;
width:100%;
}
}
/* ===========================
SHRINK HEADER
=========================== */
header.scrolled{
background:rgba(43,0,0,.95);
}
header.scrolled .header-container{
height:75px;
}
header.scrolled .logo img{
height:120px;
}
/* Menu Card Animation Delays */
.grid .card:nth-child(1){
transition-delay:.1s;
}
.grid .card:nth-child(2){
transition-delay:.3s;
}
.grid .card:nth-child(3){
transition-delay:.5s;
}
/* ===========================
SCROLL ANIMATIONS
=========================== */
.fade-in{
opacity:0;
transform:translateY(50px);
transition:
opacity .8s ease,
transform .8s ease;
}
.fade-in.show{
opacity:1;
transform:translateY(0);
}
/* ===========================
TAKEOUT MENU PAGE
=========================== */
.takeout-menu-page{
padding-top:120px;
background:#f8f5ef;
}
.takeout-menu-hero{
max-width:900px;
margin:0 auto;
text-align:center;
padding:80px 20px 50px;
}
.takeout-eyebrow{
color:#b68b2c;
letter-spacing:5px;
text-transform:uppercase;
font-size:15px;
margin-bottom:15px;
}
.takeout-menu-hero h1{
font-family:'Cinzel', serif;
font-size:68px;
color:#2b0000;
margin:0 0 20px;
}
.takeout-intro{
max-width:700px;
margin:0 auto 40px;
font-size:22px;
line-height:1.8;
color:#555;
}
.takeout-highlights{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
margin-top:50px;
}
.takeout-highlights span{
display:flex;
align-items:center;
gap:10px;
font-size:18px;
color:#444;
}
.takeout-highlights i{
color:#d4af37;
font-size:22px;
}
.menu-content{
max-width:1100px;
margin:80px auto;
background:white;
border-radius:20px;
padding:60px;
box-shadow:0 20px 50px rgba(0,0,0,.08);
}
.menu-page-heading{
text-align:center;
margin-bottom:60px;
}
.menu-page-heading h2{
margin-bottom:20px;
}
.menu-page-heading p{
font-size:20px;
color:#666;
}
/* ===========================
MENU ITEMS
=========================== */
.menu-section-number {
margin: 0 0 8px;
color: #b68b2c;
font-family: 'Cinzel', serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 4px;
}
.menu-items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 70px;
}
.menu-item {
padding: 20px 0;
border-bottom:
1px solid rgba(182, 139, 44, 0.3);
}
.menu-item-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
}
.menu-item h3 {
margin: 0;
color: #2b0000;
font-family: 'Cinzel', serif;
font-size: 20px;
line-height: 1.4;
}
.menu-price {
flex-shrink: 0;
color: #9b741f;
font-size: 18px;
font-weight: 700;
}
.menu-item p {
max-width: 440px;
margin: 7px 0 0;
color: #666;
font-size: 16px;
line-height: 1.6;
}
/* ===========================
TAKEOUT MENU RESPONSIVE
=========================== */
@media (max-width: 760px) {
.takeout-menu-page {
padding-top: 90px;
}
.takeout-menu-hero h1 {
font-size: 44px;
}
.takeout-intro {
font-size: 18px;
}
.menu-content {
margin: 40px 16px;
padding: 40px 24px;
}
.menu-items {
grid-template-columns: 1fr;
}
.menu-item-header {
gap: 16px;
}
.menu-item h3 {
font-size: 18px;
}
}
/* ===========================
SPICE LEVEL BADGES
=========================== */
.menu-meta {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.spice-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.spice-mild {
background: #eef8ee;
color: #2e7d32;
}
.spice-medium {
background: #fff6df;
color: #b77900;
}
.spice-spicy {
background: #fdeaea;
color: #c62828;
}
/* Display spice levels as chilli icons */
.spice-badge {
padding: 0;
background: transparent;
font-size: 0;
letter-spacing: 2px;
}
.spice-badge::before {
font-size: 18px;
line-height: 1;
}
.spice-mild::before {
content: "🌶";
}
.spice-medium::before {
content: "🌶 🌶";
}
.spice-spicy::before {
content: "🌶 🌶 🌶";
}
.menu-item-feature {
display: inline-block;
margin: 10px 0 0;
color: #b08a3c;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* ===========================
EXTRAS AND SPECIALS
=========================== */
.menu-subsection-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
}
.menu-subsection {
min-width: 0;
}
.menu-subsection-wide {
grid-column: 1 / -1;
}
.menu-subsection-title {
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(176, 138, 60, 0.35);
color: #b08a3c;
font-size: 1.35rem;
letter-spacing: 1px;
}
.menu-items-single {
grid-template-columns: 1fr;
}
.menu-special-card {
background: linear-gradient(
135deg,
rgba(176,138,60,.18),
rgba(176,138,60,.05)
);
border: 1px solid rgba(176,138,60,.35);
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 22px rgba(0,0,0,.08);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.menu-special-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 35px rgba(0,0,0,.15);
}
.menu-special-badge {
display: inline-block;
margin-bottom: 14px;
padding: 6px 14px;
border-radius: 999px;
background: #b08a3c;
color: white;
font-size: .72rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
@media (max-width: 760px) {
.menu-subsection-grid {
grid-template-columns: 1fr;
}
.menu-subsection-wide {
grid-column: auto;
}
}
/* ===========================
TAKEOUT MENU HERO UPGRADE
=========================== */
.takeout-menu-hero {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 24px;
background-image:
url("images/butter-chicken.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
.takeout-menu-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(25, 8, 10, 0.92),
rgba(25, 8, 10, 0.68),
rgba(25, 8, 10, 0.42)
);
}
.takeout-menu-hero-content {
position: relative;
z-index: 1;
width: min(1100px, 100%);
margin: 0 auto;
color: #ffffff;
}
.takeout-menu-hero-content .eyebrow {
margin: 0 0 14px;
color: #d7b568;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
.takeout-menu-hero-content h1 {
max-width: 700px;
margin: 0 auto 20px;
color: #ffffff;
font-size: clamp(3rem, 7vw, 5.5rem);
line-height: 0.98;
}
.takeout-menu-hero-text {
max-width: 590px;
margin: 0 auto 32px;
color: rgba(255, 255, 255, 0.88);
font-size: 1.15rem;
line-height: 1.75;
}
.takeout-menu-hero .hero-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 190px;
padding: 15px 26px;
border: 1px solid #b08a3c;
border-radius: 999px;
background: #b08a3c;
color: #ffffff;
font-weight: 700;
letter-spacing: 0.5px;
text-decoration: none;
transition:
transform 0.25s ease,
background 0.25s ease,
box-shadow 0.25s ease;
}
.takeout-menu-hero .hero-button:hover {
transform: translateY(-3px);
background: #c49a48;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}
html {
scroll-behavior: smooth;
}
@media (max-width: 760px) {
.takeout-menu-hero {
min-height: 360px;
padding: 55px 22px;
background-position: 60% center;
}
.takeout-menu-hero .hero-button {
display: none;
}
.takeout-menu-hero-overlay {
background: rgba(25, 8, 10, 0.74);
}
.takeout-menu-hero-content {
text-align: center;
}
.takeout-menu-hero-text {
margin-right: auto;
margin-left: auto;
}
.takeout-menu-page {
padding-top: 85px;
}
.takeout-menu-hero-content h1 {
font-size: clamp(2.8rem, 14vw, 4rem);
}
.takeout-menu-hero-text {
margin-bottom: 24px;
font-size: 1rem;
line-height: 1.55;
}
}
/* ===========================
STICKY MENU NAVIGATION
=========================== */
.category-menu-toggle{
display:none;
}
.menu-category-nav {
position: sticky;
top: 70px; /* same height as your header */
z-index: 100;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
padding: 16px 20px;
background: rgba(25, 8, 10, 0.96);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(176,138,60,.25);
border-bottom: 1px solid rgba(176,138,60,.25);
}
.menu-category-nav a {
color: #f6f1e7;
text-decoration: none;
font-size: .9rem;
font-weight: 600;
padding: 8px 16px;
border-radius: 999px;
transition:
background .25s ease,
color .25s ease,
transform .25s ease;
}
.menu-category-nav a:hover {
background: #b08a3c;
color: white;
transform: translateY(-2px);
}
.menu-category-nav a.active {
background: #d4af37;
color: #2b0000;
box-shadow:
0 5px 16px rgba(212, 175, 55, 0.24);
transform: translateY(-1px);
}
.menu-category-nav a.active:hover {
background: #d4af37;
color: #2b0000;
}
.menu-content {
scroll-margin-top: 190px;
padding-top: 85px;
padding-bottom: 85px;
}
/* ===========================
MOBILE CATEGORY NAVIGATION
=========================== */
@media (max-width: 760px){
.menu-content{
padding-top:65px;
padding-bottom:65px;
}
.category-menu-toggle{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
position:sticky;
top:70px;
z-index:100;
width:100%;
padding:16px 20px;
border:none;
background:#2b0000;
color:white;
font-family:'Poppins', sans-serif;
font-size:16px;
font-weight:600;
cursor:pointer;
}
.menu-category-nav{
display:none;
position:fixed;
top:90px;
right:16px;
left:16px;
z-index:200;
max-height:calc(100vh - 120px);
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
flex-direction:column;
align-items:stretch;
gap:4px;
padding:16px;
border:1px solid rgba(176, 138, 60, 0.45);
border-radius:16px;
background:rgba(25, 8, 10, 0.98);
box-shadow:0 20px 50px rgba(0, 0, 0, 0.45);
}
.menu-category-nav::after{
content:"Swipe to see more categories";
display:block;
padding:12px 8px 4px;
color:rgba(255,255,255,.65);
font-size:12px;
text-align:center;
}
.menu-category-nav.mobile-open{
display:flex;
}
.menu-category-nav a{
width:100%;
box-sizing:border-box;
padding:13px 16px;
text-align:center;
}
}
/* ==============================
404 PAGE
============================== */
.error-page {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px;
background:
linear-gradient(rgba(30,10,10,.70),
rgba(30,10,10,.70)),
url("images/hero.jpg") center/cover no-repeat;
}
.error-content {
max-width: 700px;
color: white;
}
.error-content h1 {
font-family: 'Cinzel', serif;
font-size: 7rem;
color: #d4af37;
margin-bottom: 25px;
}
.error-content h2 {
font-family: 'Cormorant Garamond', serif;
color: #d4af37;
font-size: 2.8rem;
margin-bottom: 30px;
}
.error-content p {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 18px;
}
.error-content .hero-button {
margin-top: 20px;
display: inline-block;
}
.phone-link {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.phone-link:hover {
color: #d4af37;
}