:root {
--yellow: #F8CA12;
--red: #A71E22;
--blue: #1A4A9A;
--black: #000000;
--gold: #D89A3D;
}
body {
background-color: var(--black);
color: white;
font-family: 'LT Sip Regular1', Tahoma, Geneva, Verdana, sans-serif;
}
@font-face {
font-family: 'LT Sip';
src: url('It_sip/LT-Sip-Regular1.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
/* Navigation Section */
.navbar {
background-color: var(--black) !important;
border-bottom: 2px solid var(--gold);
}
.navbar-brand {
color: var(--yellow) !important;
font-weight: bold;
font-size: 1.8rem;
}
.nav-link {
color: white !important;
font-weight: 500;
margin: 0 10px;
transition: color 0.3s;
}
.nav-link:hover {
color: var(--yellow) !important;
}
/* Promo Header Sticky Styles */
.promo-header {
position: sticky;
top: 0;
z-index: 1040;
background: linear-gradient(135deg, var(--red), #c11a1f);
color: white;
}
.navbar.sticky-top {
top: 40px; /* Height of promo header */
z-index: 1030;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--black) 0%, #0a0a0a 50%, var(--blue) 150%);
padding: 100px 0 80px;
position: relative;
overflow: hidden;
}
.hero:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 20% 80%, rgba(248, 202, 18, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(26, 74, 154, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(216, 154, 61, 0.05) 0%, transparent 50%);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
background: linear-gradient(to right, var(--yellow), var(--gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.3s forwards;
}
.hero-subtitle {
font-size: 1.3rem;
margin-bottom: 2rem;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.5s forwards;
}
/* Hero Image Gallery */
.hero-image-container {
position: relative;
height: 500px;
opacity: 0;
transform: translateX(30px);
animation: fadeInRight 1s ease 0.9s forwards;
}
.image-main {
position: absolute;
width: 70%;
height: 70%;
top: 0;
right: 0;
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 3px solid var(--gold);
object-fit: cover;
transition: all 0.5s ease;
transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
z-index: 3;
}
.image-main:hover {
transform: perspective(1000px) rotateY(0) rotateX(0) scale(1.03);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}
.image-secondary {
position: absolute;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
border: 2px solid var(--yellow);
object-fit: cover;
transition: all 0.5s ease;
}
.image-1 {
width: 50%;
height: 40%;
bottom: 10%;
left: 0;
z-index: 2;
transform: perspective(800px) rotateY(5deg) rotateX(-5deg);
animation: floatImage1 20s ease-in-out infinite;
}
.image-2 {
width: 45%;
height: 35%;
top: 10%;
left: 5%;
z-index: 1;
transform: perspective(800px) rotateY(10deg) rotateX(5deg);
animation: floatImage2 25s ease-in-out infinite;
}
.image-3 {
width: 40%;
height: 30%;
bottom: 30%;
left: 15%;
z-index: 2;
transform: perspective(800px) rotateY(-5deg) rotateX(-3deg);
animation: floatImage3 30s ease-in-out infinite;
}
.image-secondary:hover {
transform: scale(1.05);
z-index: 4;
box-shadow: 0 20px 50px rgba(248, 202, 18, 0.3);
}
.floating-bowl {
position: absolute;
width: 120px;
height: 120px;
background: radial-gradient(circle, var(--yellow) 0%, var(--gold) 100%);
border-radius: 50%;
opacity: 0.1;
animation: float 8s ease-in-out infinite;
z-index: 1;
}
.floating-bowl:nth-child(1) {
top: 10%;
left: 5%;
width: 100px;
height: 100px;
animation-delay: 0s;
}
.floating-bowl:nth-child(2) {
top: 20%;
right: 10%;
width: 150px;
height: 150px;
animation-delay: 2s;
}
.floating-bowl:nth-child(3) {
bottom: 20%;
left: 10%;
width: 80px;
height: 80px;
animation-delay: 4s;
}
.floating-bowl:nth-child(4) {
bottom: 10%;
right: 5%;
width: 120px;
height: 120px;
animation-delay: 6s;
}
.pulse-dot {
position: absolute;
width: 10px;
height: 10px;
background-color: var(--yellow);
border-radius: 50%;
animation: pulse 2s infinite;
}
.pulse-dot:nth-child(1) {
top: 30%;
left: 15%;
animation-delay: 0s;
}
.pulse-dot:nth-child(2) {
top: 60%;
right: 20%;
animation-delay: 0.5s;
}
.pulse-dot:nth-child(3) {
bottom: 40%;
left: 20%;
animation-delay: 1s;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInRight {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
100% {
transform: translateY(0) rotate(360deg);
}
}
@keyframes floatImage1 {
0%, 100% {
transform: perspective(800px) rotateY(5deg) rotateX(-5deg) translateY(0);
}
50% {
transform: perspective(800px) rotateY(5deg) rotateX(-5deg) translateY(-15px);
}
}
@keyframes floatImage2 {
0%, 100% {
transform: perspective(800px) rotateY(10deg) rotateX(5deg) translateY(0);
}
50% {
transform: perspective(800px) rotateY(10deg) rotateX(5deg) translateY(-10px);
}
}
@keyframes floatImage3 {
0%, 100% {
transform: perspective(800px) rotateY(-5deg) rotateX(-3deg) translateY(0);
}
50% {
transform: perspective(800px) rotateY(-5deg) rotateX(-3deg) translateY(-20px);
}
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(248, 202, 18, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(248, 202, 18, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(248, 202, 18, 0);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.hero-image-container {
height: 400px;
margin-top: 30px;
}
.image-main {
width: 80%;
height: 60%;
transform: none;
}
.image-secondary {
transform: none !important;
}
.image-main:hover {
transform: scale(1.03);
}
}
@media (max-width: 768px) {
/* Hide secondary images on mobile */
.image-secondary {
display: none !important;
}
/* Adjust main image to take full width on mobile */
.image-main {
width: 100% !important;
height: 300px !important;
position: relative !important;
transform: none !important;
}
/* Adjust container height for mobile */
.hero-image-container {
height: 300px !important;
}
}
/* Menu Items - recipes */
.section-title {
color: var(--yellow);
text-align: center;
margin-bottom: 40px;
position: relative;
padding-bottom: 15px;
}
.section-title:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: var(--red);
}
.menu-card {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 20px;
margin-bottom: 30px;
transition: transform 0.3s, box-shadow 0.3s;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.menu-img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 15px;
display: block;
border: 3px solid var(--gold);
}
.menu-title {
color: var(--yellow);
font-weight: bold;
margin-bottom: 5px;
}
.menu-price {
color: var(--gold);
font-weight: bold;
margin-bottom: 15px;
}
.btn-cart {
background-color: var(--red);
color: white;
border: none;
padding: 8px 20px;
border-radius: 50px;
font-weight: 500;
transition: background-color 0.3s;
}
.btn-cart:hover {
background-color: var(--yellow);
color: var(--black);
}
/* Soup of the Day  */
.soup-of-day-section {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
url('https://cdn.pixabay.com/photo/2016/05/09/10/26/rice-1381146_1280.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.soup-content {
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 50px;
max-width: 800px;
margin: 0 auto;
border: 3px solid var(--gold);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 2;
}
.soup-tag {
display: inline-block;
background: var(--red);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9rem;
margin-right: 10px;
margin-bottom: 15px;
}
.soup-title {
color: var(--yellow);
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.soup-description {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 25px;
color: #f0f0f0;
}
.soup-price {
color: var(--gold);
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 30px;
}
.btn-cart {
background: linear-gradient(135deg, var(--red), #c11a1f);
color: white;
border: none;
padding: 15px 40px;
border-radius: 50px;
font-weight: 600;
font-size: 1.2rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(167, 30, 34, 0.4);
}
.btn-cart:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(167, 30, 34, 0.6);
background: linear-gradient(135deg, #c11a1f, var(--red));
}
.soup-highlight {
animation: pulse 3s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(248, 202, 18, 0.4);
}
70% {
box-shadow: 0 0 0 15px rgba(248, 202, 18, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(248, 202, 18, 0);
}
}
.steam {
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: steam 5s infinite ease-in-out;
z-index: 1;
}
.steam:nth-child(1) {
width: 100px;
height: 100px;
top: 10%;
left: 20%;
animation-delay: 0s;
}
.steam:nth-child(2) {
width: 150px;
height: 150px;
top: 5%;
right: 15%;
animation-delay: 1s;
}
.steam:nth-child(3) {
width: 80px;
height: 80px;
bottom: 10%;
left: 10%;
animation-delay: 2s;
}
.steam:nth-child(4) {
width: 120px;
height: 120px;
bottom: 15%;
right: 20%;
animation-delay: 3s;
}
@keyframes steam {
0% {
transform: translateY(0) scale(1);
opacity: 0.5;
}
50% {
transform: translateY(-50px) scale(1.2);
opacity: 0.2;
}
100% {
transform: translateY(-100px) scale(1.5);
opacity: 0;
}
}
.soup-badge {
position: absolute;
top: -20px;
right: 30px;
background: var(--red);
color: white;
padding: 10px 25px;
border-radius: 50px;
font-weight: bold;
font-size: 1.2rem;
transform: rotate(5deg);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.soup-content {
padding: 30px;
margin: 20px;
}
.soup-title {
font-size: 2.5rem;
}
.soup-description {
font-size: 1rem;
}
.soup-price {
font-size: 2rem;
}
}
/* Location and Schedule Section */
.location-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 25px;
border: 1px solid rgba(248, 202, 18, 0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.7s forwards;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.location-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.location-icon {
color: var(--yellow);
margin-right: 10px;
}
.time-icon {
color: var(--gold);
margin-right: 10px;
}
.btn-location {
background: linear-gradient(135deg, var(--red), #c11a1f);
color: white;
border: none;
padding: 12px 25px;
border-radius: 50px;
font-weight: 600;
margin-top: 15px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(167, 30, 34, 0.4);
}
.btn-location:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(167, 30, 34, 0.6);
background: linear-gradient(135deg, #c11a1f, var(--red));
}
.location-card {
background-color: rgba(26, 74, 154, 0.2);
border-radius: 10px;
padding: 25px;
margin-bottom: 20px;
}
.schedule-card {
background-color: rgba(216, 154, 61, 0.1);
border-radius: 10px;
padding: 25px;
margin-bottom: 20px;
}
.social-icons {
font-size: 1.5rem;
margin-top: 20px;
}
.social-icons a {
color: var(--yellow);
margin: 0 10px;
transition: color 0.3s;
}
.social-icons a:hover {
color: white;
}
/* Footer Styles */
footer {
background: linear-gradient(135deg, #0a0a0a 0%, var(--black) 50%, #1a1a1a 100%);
padding: 60px 0 20px;
position: relative;
overflow: hidden;
}
footer:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--yellow), var(--red), var(--blue), var(--gold));
}
.footer-logo {
color: var(--yellow);
font-weight: bold;
font-size: 2.2rem;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.footer-logo i {
margin-right: 10px;
font-size: 2rem;
}
.footer-tagline {
color: #ccc;
margin-bottom: 20px;
line-height: 1.6;
}
.footer-heading {
color: var(--yellow);
font-size: 1.3rem;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer-heading:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--red);
}
.contact-info {
list-style: none;
padding: 0;
margin: 0;
}
.contact-info li {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}
.contact-info i {
color: var(--gold);
margin-right: 10px;
margin-top: 3px;
width: 20px;
text-align: center;
}
.social-links {
display: flex;
margin-top: 20px;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
color: var(--yellow);
border-radius: 50%;
margin-right: 10px;
transition: all 0.3s ease;
text-decoration: none;
}
.social-links a:hover {
background: var(--yellow);
color: var(--black);
transform: translateY(-3px);
}
.footer-btn {
background: linear-gradient(135deg, var(--red), #c11a1f);
color: white;
border: none;
padding: 12px 25px;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(167, 30, 34, 0.4);
display: inline-flex;
align-items: center;
margin-top: 10px;
}
.footer-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(167, 30, 34, 0.6);
background: linear-gradient(135deg, #c11a1f, var(--red));
color: white;
}
.footer-btn i {
margin-right: 8px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 40px;
padding-top: 20px;
text-align: center;
color: #999;
}
.footer-bowl {
position: absolute;
width: 80px;
height: 80px;
background: radial-gradient(circle, var(--yellow) 0%, var(--gold) 100%);
border-radius: 50%;
opacity: 0.05;
animation: float 15s ease-in-out infinite;
}
.footer-bowl:nth-child(1) {
bottom: 10%;
left: 5%;
animation-delay: 0s;
}
.footer-bowl:nth-child(2) {
bottom: 20%;
right: 10%;
animation-delay: 5s;
}
.footer-bowl:nth-child(3) {
bottom: 30%;
left: 15%;
animation-delay: 10s;
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
100% {
transform: translateY(0) rotate(360deg);
}
}
.payment-methods {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.payment-icon {
background: rgba(255, 255, 255, 0.05);
padding: 8px 12px;
border-radius: 5px;
font-size: 0.9rem;
color: #ccc;
}
.newsletter-form {
margin-top: 15px;
}
.newsletter-input {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50px;
padding: 10px 15px;
color: white;
width: 100%;
margin-bottom: 10px;
}
.newsletter-input:focus {
outline: none;
border-color: var(--yellow);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.footer-logo {
font-size: 1.8rem;
justify-content: center;
}
.footer-heading {
margin-top: 25px;
}
.footer-heading:after {
left: 50%;
transform: translateX(-50%);
}
.social-links {
justify-content: center;
}
}