*{
box-sizing:border-box;
}
html{
min-height:100%;
background:#050505;
overflow-x:hidden;
}
body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:white;
text-align:center;
overflow-x:hidden;
background:
radial-gradient(
circle at 10% 15%,
rgba(35,120,45,.28),
transparent 25%
),
radial-gradient(
circle at 90% 40%,
rgba(35,120,45,.22),
transparent 30%
),
radial-gradient(
circle at 50% 90%,
rgba(35,120,45,.18),
transparent 35%
),
linear-gradient(
rgba(0,0,0,.92),
rgba(0,0,0,.98)
),
#020202;
background-attachment:scroll;
}
/* =========================
FULL PAGE JUNGLE GLOW
========================= */
body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(
circle at 10% 15%,
rgba(35,120,45,.25),
transparent 25%
),
radial-gradient(
circle at 90% 40%,
rgba(35,120,45,.18),
transparent 30%
);
pointer-events:none;
z-index:0;
}
/* =========================
NOTIFICATION
========================= */
.notification{
background:#c90000;
color:white;
padding:15px;
font-size:18px;
font-weight:bold;
letter-spacing:1px;
}
.notification:empty{
display:none;
}
/* =========================
HERO
========================= */
.hero{
height:auto;
min-height:0;
padding:0 20px 20px;
position:relative;
overflow:visible;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
background:transparent;
}
/* =========================
CONTENT LAYER
========================= */
.hero > *{
position:relative;
z-index:5;
}
body > *{
position:relative;
z-index:1;
}
/* =========================
LOGO
========================= */
.logo{
width:180px;
max-width:80%;
border-radius:20px;
margin:0;
display:block;
}
h1{
font-size:50px;
color:#d4af37;
letter-spacing:5px;
margin:10px 0;
}
.tagline{
font-size:22px;
letter-spacing:8px;
color:white;
margin:10px 0 20px;
}
/* =========================
BUTTONS
========================= */
button{
background:#d4af37;
color:black;
border:none;
padding:15px 35px;
font-weight:bold;
font-size:16px;
border-radius:10px;
cursor:pointer;
margin:15px;
transition:.3s;
}
button:hover{
transform:scale(1.05);
}
/* =========================
LOYALTY
========================= */
.loyalty{
padding:20px;
background:transparent;
}
#card{
background:
linear-gradient(
135deg,
#151515,
#050505
);
border:2px solid #d4af37;
border-radius:20px;
padding:35px;
max-width:420px;
margin:auto;
box-shadow:
0 0 25px rgba(212,175,55,.25);
}
#card h2{
color:#d4af37;
}
#qrcode{
background:white;
padding:15px;
width:max-content;
margin:25px auto;
}
/* =========================
MENU
========================= */
.menu{
padding:20px 20px 60px;
background:transparent;
}
.menu h2,
.delivery h2,
.instagram h2{
color:#d4af37;
font-size:34px;
letter-spacing:2px;
margin-bottom:30px;
}
.food-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(230px,1fr));
gap:30px;
max-width:1100px;
margin:auto;
}
.food-card{
background:#111;
border:1px solid #333;
border-radius:18px;
overflow:hidden;
transition:.3s;
}
.food-card:hover{
transform:translateY(-8px);
border-color:#d4af37;
}
.food-card img{
width:100%;
height:230px;
object-fit:cover;
}
.food-card h3{
color:#d4af37;
font-size:21px;
margin:18px 10px 5px;
}
.food-card p{
font-size:20px;
font-weight:bold;
margin-bottom:20px;
}
/* =========================
DELIVERY
========================= */
.delivery{
padding:50px 0;
background:transparent;
}
.delivery h2,
.delivery > p{
padding-left:20px;
padding-right:20px;
}
.delivery p{
font-size:18px;
}
/* =========================
FULL WIDTH YANGO BAR
========================= */
.yango-order-box{
position:relative;
display:flex;
justify-content:center;
align-items:center;
/* FULL VIEWPORT WIDTH */
width:100vw;
height:170px;
background:#000;
overflow:hidden;
margin-top:20px;
margin-bottom:20px;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
}
.delivery-mascot{
position:absolute;
width:140px;
height:140px;
object-fit:contain;
z-index:5;
}
.mascot-left{
left:20px;
}
.mascot-right{
right:20px;
}
.yango-order-box button{
position:relative;
z-index:10;
}
/* =========================
SOCIAL SECTION
========================= */
.instagram{
padding:50px 0;
background:transparent;
}
.instagram h2{
padding-left:20px;
padding-right:20px;
}
/* FULL WIDTH BLACK SOCIAL BAR */
.social-bar{
width:100vw;
min-height:130px;
background:#000;
display:flex;
justify-content:center;
align-items:center;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
}
.social-icons{
display:flex;
justify-content:center;
align-items:center;
gap:25px;
}
.social-icons a{
display:flex;
justify-content:center;
align-items:center;
width:50px;
height:50px;
}
.social-icons img{
width:45px;
height:45px;
object-fit:contain;
display:block;
transition:.3s;
}
.social-icons img:hover{
transform:scale(1.15);
}
/* TIKTOK IMAGE NEEDS TO BE VISUALLY LARGER */
.social-icons .tiktok-icon{
width:55px;
height:55px;
}
/* =========================
FOOTER
========================= */
footer{
padding:25px;
background:#000;
color:#d4af37;
font-size:16px;
}
section{
position:relative;
z-index:1;
}
/* =========================
MOBILE
========================= */
@media(max-width:600px){
h1{
font-size:36px;
}
.tagline{
font-size:15px;
letter-spacing:4px;
}
.hero{
min-height:0;
padding:0 20px 20px;
}
.logo{
width:150px;
}
.food-card img{
height:200px;
}
.menu h2,
.delivery h2,
.instagram h2{
font-size:28px;
}
.delivery-mascot{
width:80px;
height:80px;
}
.mascot-left{
left:5px;
}
.mascot-right{
right:5px;
}
.yango-order-box{
height:120px;
}
.yango-order-box button{
padding:14px 24px;
font-size:14px;
}
.social-bar{
min-height:110px;
}
.social-icons{
gap:16px;
}
.social-icons a{
width:46px;
height:46px;
}
.social-icons img{
width:40px;
height:40px;
}
.social-icons .tiktok-icon{
width:50px;
height:50px;
}
}