* {
margin: 0;
padding: 0;
box-sizing: border-box
}
.cooking-bg .container {
position: relative;
z-index: 10;
visibility: visible
}
.cooking-bg::after {
z-index: 5;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.56)
}
.section h2, .section p, .section .cooking-form {
z-index: 10;
position: relative
}
.cooking-input-container {
position: relative;
z-index: 100002;
overflow: visible;
display: flex;
align-items: center;
width: 100%;
max-width: 600px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
gap: 0.5rem;
margin: 0 auto
}
.cooking-form {
position: relative;
z-index: 1000;
overflow: visible;
/*! display: flex; */
justify-content: center;
margin-top: 20px
}
.suggestions {
position: absolute;
top: calc(100% + 5px);
left: 0;
right: 0;
background: white;
border: 1px solid #ccc;
border-radius: 5px;
max-height: 300px;
overflow-y: auto;
z-index: 1000;
display: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
visibility: visible;
min-height: 50px;
min-width: 200px;
opacity: 1;
padding: 5px;
width: 100%;
box-sizing: border-box;
pointer-events: none
}
.suggestions ul {
list-style: none;
margin: 0;
padding: 0
}
.suggestions li {
display: flex;
align-items: center;
padding: 8px 10px;
cursor: pointer;
font-size: 1rem;
border-bottom: 1px solid #eee
}
.suggestions li.no-results {
padding: 10px;
color: #666;
cursor: default
}
.suggestions li:last-child {
border-bottom: none
}
.suggestions li:hover:not(.no-results) {
background: #f0f0f0
}
.suggestions img {
width: 50px;
height: 50px;
object-fit: cover;
margin-right: 10px;
border-radius: 5px
}
.btn {
display: inline-block;
padding: 12px 1rem;
font-size: 1rem;
font-weight: 700;
text-align: center;
text-decoration: none;
border: none;
border-radius: 5px;
background-color: #f1f1f1;
color: #333;
cursor: pointer;
transition: all 0.2s ease-in-out
}
.btn-primary {
background-color: #fa8c28;
color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border: 1px solid #d1d5db
}
.btn-primary:hover {
background-color: #e67b20;
color: #fff
}
.btn-primary:focus {
outline: none
}
.recipe-card {
cursor: pointer;
transition: opacity 0.3s ease, transform 0.3s ease;
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
opacity: 0;
max-width: 230px;
position: relative;
margin: 0 auto;
width: 100%;
background: #fff;
transform: scale(0.95)
}
.recipe-card:hover {
transform: translatey(-5px) scale(1.02)
}
.send-icon {
width: 20px;
height: 20px;
fill: currentColor;
vertical-align: middle
}
.hero {
color: #fff;
padding: 100px 0;
text-align: center;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: url(../images/hero-bg.gif);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
animation: backgroundFade 10s infinite ease-in-out
}
.hero::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5)
}
.hero .container {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center
}
.hero h2 {
/*! font-family: ; */
font-size: 40px;
/*! margin-bottom: 20px; */
color: #fff
}
.hero p {
font-size: 18px;
margin-bottom: 30px;
color: #fff
}
.custom-bg {
background-color: #3f3f3f;
color: #fff
}
.grey-bg {
background-color: #fff
}
.cooking-bg {
background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(52, 152, 219, 0.1)), url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 800 600\"%3E%3Cpath d=\"M400 300c100 0 180-80 180-180S500 0 400 0 220 80 220 180s80 180 180 180zm0 100c-100 0-180 80-180 180s80 180 180 180 180-80 180-180-80-180-180-180z\" fill=\"rgba(155,89,182,0.2)\" /%3E%3Ccircle cx=\"600\" cy=\"400\" r=\"100\" fill=\"rgba(52,152,219,0.2)\" /%3E%3Ccircle cx=\"200\" cy=\"200\" r=\"150\" fill=\"rgba(46,204,113,0.2)\" /%3E%3C/svg%3E");
background-size: cover;
position: relative;
padding: 1.5rem
}
#food-suggestions.food-suggestions-bg {
background-color: #111;
color: #fff;
padding: 80px 0
}
.section h2 {
text-align: center;
margin-bottom: 20px;
font-size: 32px;
font-weight: 700
}
.section p {
text-align: center;
/*! margin-bottom: 40px; */
font-size: 18px;
max-width: 800px;
margin-left: auto;
margin-right: auto
}
.cards-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 1.5rem;
padding: 0 !important;
margin: 0 auto !important
}
.card {
padding: 25px;
margin: 15px;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s;
font-family: "Roboto", sans-serif;
width: 250px
}
.card:hover {
transform: translatey(-5px)
}
.card h3 {
margin-bottom: 10px;
font-size: 24px;
font-weight: 700
}
.card p {
margin-bottom: 20px;
color: #fff;
font-size: 1rem
}
.dietary-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
justify-items: center;
margin-bottom: 20px;
justify-content: center;
margin-inline: auto
}
.dietary-btn {
max-width: 150px;
padding: 10px 15px;
font-size: 1.5rem;
font-weight: 500;
border: 2px solid #000;
border-radius: 5px;
background-color: #fff;
color: #000;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
background: #fff
}
.dietary-btn:hover {
background-color: #e8e8e8;
border-color: #f06a00
}
.dietary-advice {
background-color: #fff;
padding: 25px;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
min-height: 100px;
font-size: 1rem;
line-height: 1.5
}
#cooking-input {
flex: 1;
padding: 12px;
border: none;
outline: none;
font-size: 1.2rem;
font-family: "Roboto", sans-serif;
background-color: transparent;
line-height: 1.4;
width: 100%;
box-sizing: border-box;
border-radius: 5px
}
#cooking-input::placeholder {
color: #999
}
#cooking-input:focus {
border-bottom: 2px solid #000
}
.ai-container {
background-color: #9b59b6;
padding: 80px 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 60px
}
.ai-top-section {
display: flex;
flex-direction: row;
align-items: center;
max-width: 1000px;
width: 100%;
gap: 40px;
padding: 20px
}
.ai-image img {
width: 100%;
height: auto;
max-width: 300px;
border-radius: 5px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
object-fit: cover
}
.ai-text {
flex: 1;
font-size: 1.1em;
color: #333;
max-width: 600px
}
.ai-intro {
text-align: left
}
.ai-intro h3 {
font-size: 32px;
font-weight: 700;
margin-bottom: 15px
}
.ai-intro p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: left
}
.ai-chat-section {
width: 100%;
max-width: 500px;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s ease;
margin: 0 auto;
aspect-ratio: 4/3;
min-width: 300px;
min-height: 400px;
box-sizing: border-box
}
.ai-chat-section:hover {
transform: translatey(-5px)
}
.chat-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 10px 20px;
box-sizing: border-box
}
.chat-box {
flex: 1;
width: 100%;
overflow-y: auto;
border: 1px solid #ddd;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 15px;
box-sizing: border-box
}
.chat-message {
display: flex;
flex-direction: column
}
.chat-message.user .message-content {
align-self: flex-end;
background-color: #fff;
color: #000;
border: 1px solid #ddd;
border-radius: 20px 20px 0 20px;
padding: 10px 15px
}
.chat-message.ai .message-content {
align-self: flex-start;
background-color: rgba(255, 181, 0, 0.4);
color: #000;
border: 1px solid #ddd;
border-radius: 20px 20px 20px 0;
padding: 10px 15px
}
.message-content {
max-width: 80%;
position: relative;
word-wrap: break-word;
font-size: inherit;
background-color: inherit
}
.timestamp {
display: block;
font-size: 1rem;
color: #555;
margin-top: 5px;
text-align: right
}
.chat-message.ai .message-content .timestamp {
text-align: left;
color: #555
}
.chat-form {
display: flex;
border-top: 1px solid #eaeaea;
width: 100%;
padding-top: 10px
}
#user-input {
flex: 1;
padding: 12px 20px;
border: none;
border-bottom: 2px solid #ddd;
outline: none;
background-color: transparent;
transition: border-color 0.3s ease;
border-radius: 5px;
font-size: 1.5rem
}
#user-input:focus {
border-bottom: 2px solid #000
}
#user-input::placeholder {
color: #999
}
footer {
background-color: #000;
border-top: 4px solid #fa8c28;
font-size: 1rem;
margin-top: auto;
width: 100%
}
.footer-container {
display: flex;
flex-direction: column;
align-items: center
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%
}
.footer-logo {
display: flex;
align-items: center;
margin-bottom: 0
}
.footer-logo-image {
width: 120px;
margin-bottom: 30px;
height: auto
}
.footer-logo-text {
font-size: 20px;
font-weight: 700;
color: #fff
}
.footer-links {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px
}
.footer-links li {
margin: 0 15px
}
.footer-links a {
text-decoration: none;
color: #fff;
font-weight: 500;
transition: color 0.3s
}
.footer-links a:hover {
color: #f06a00
}
.footer-social {
display: flex;
gap: 15px;
margin-bottom: 20px
}
.footer-social a {
color: #fff;
font-size: 20px;
transition: color 0.3s
}
.footer-social a:hover {
color: #f06a00
}
.footer-bottom {
border-top: 1px solid #fa8c28;
padding-top: 10px
}
.footer-bottom p {
color: #fff;
font-size: 1rem;
text-align: center
}
.international-cuisine-bg {
background: linear-gradient(120deg, #f9e7d9 0%, #d4e4f7 100%);
background-size: cover;
position: relative;
padding: 10px 0;
overflow: hidden
}
.international-cuisine-bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 0
}
.international-cuisine-bg .container {
position: relative;
z-index: 1
}
.cuisine-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 15px;
justify-items: center;
margin-bottom: 20px;
margin-top: 1.5rem;
margin: 0 auto 20px;
padding: 0 15px;
max-width: 1100px
}
.cuisine-btn {
width: 100%;
max-width: 150px;
padding: 10px 15px;
font-size: 1.5rem;
font-weight: 500;
border: none;
border-radius: 1rem;
background-color: #fff;
color: #000;
cursor: pointer;
transition: transform 0.4s ease, box-shadow 0.4s ease;
position: relative;
height: 160px;
overflow: hidden;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
justify-content: center;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15)
}
.cuisine-btn:hover {
background-color: #e8e8e8;
border-color: #f06a00;
transform: translatey(-4px) scale(1.03);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25)
}
.best-dishes-bg {
background: linear-gradient(120deg, #f9e7d9 0%, #d4e4f7 100%)
}
.dish-card {
background-color: #fff;
padding: 10px;
margin: 0;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s;
font-family: "Roboto", sans-serif;
width: auto;
flex: 1 1 calc(33.333% - 20px);
max-width: calc(33.333% - 20px);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
min-height: 250px;
z-index: 15;
pointer-events: auto;
align-items: center;
padding-bottom: 15px;
border: 1px solid #d9d9d9
}
.dish-card:hover {
transform: translatey(-5px)
}
.dish-card img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 5px;
margin-bottom: 15px;
flex: 0 0 auto;
opacity: 0;
transition: filter 0.6s ease, transform 0.6s ease, opacity 0.4s ease 0.15s;
display: block;
filter: blur(20px);
transform: scale(1.05)
}
.dish-card h3 {
margin-bottom: 5px;
font-size: 1rem;
/*! font-weight: 685; */
}
.dish-card p {
margin-bottom: 0;
color: #555;
font-size: 0.8rem;
flex: 1 1 auto;
overflow: hidden;
font-family: "Roboto", sans-serif;
margin: 18px 10px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical
}
.contact-bg {
background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1)), url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 800 600\"%3E%3Ccircle cx=\"400\" cy=\"300\" r=\"200\" fill=\"rgba(52,152,219,0.2)\" /%3E%3Cpath d=\"M600 400c100 0 150-80 150-150S700 100 600 100s-150 80-150 150 80 150 150 150z\" fill=\"rgba(46,204,113,0.2)\" /%3E%3Ccircle cx=\"200\" cy=\"200\" r=\"100\" fill=\"rgba(241,196,15,0.2)\" /%3E%3C/svg%3E");
background-size: cover;
position: relative
}
.contact-bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 0
}
.contact-bg .container {
position: relative;
z-index: 1
}
.contact-form-container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 30px;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 600px;
margin: 0 auto
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 20px
}
.form-group label {
font-size: 1rem;
font-weight: 500;
margin-bottom: 5px;
color: #333;
display: block
}
.form-group input, .form-group textarea {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-family: "Roboto", sans-serif;
font-size: 1rem;
outline: none;
transition: border-color 0.3s;
width: 100%
}
.form-group input:focus, .form-group textarea:focus {
border-color: #f06a00;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3)
}
.form-group textarea {
resize: vertical;
min-height: 100px
}
.about-bg {
background: linear-gradient(135deg, rgba(255, 159, 64, 0.1), rgba(255, 99, 132, 0.1)), url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 800 600\"%3E%3Ccircle cx=\"400\" cy=\"300\" r=\"200\" fill=\"rgba(255,159,64,0.2)\" /%3E%3Cpath d=\"M600 400c100 0 150-80 150-150S700 100 600 100s-150 80-150 150 80 150 150 150z\" fill=\"rgba(255,99,132,0.2)\" /%3E%3Ccircle cx=\"200\" cy=\"200\" r=\"100\" fill=\"rgba(75,192,192,0.2)\" /%3E%3C/svg%3E");
background-size: cover;
position: relative
}
.about-bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 0
}
.about-bg .container {
position: relative;
z-index: 1
}
.about-container {
padding: 40px 0
}
.about-content {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap
}
.about-image img {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 5px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
object-fit: cover
}
.about-text {
flex: 1;
min-width: 300px
}
.about-text h3 {
font-size: 32px;
font-weight: 700;
margin-bottom: 15px
}
.about-text p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
text-align: left
}
.recipes-bg {
background: linear-gradient(135deg, rgba(241, 196, 15, 0.1), rgba(46, 204, 113, 0.1)), url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 800 600\"%3E%3Ccircle cx=\"400\" cy=\"300\" r=\"200\" fill=\"rgba(241,196,15,0.2)\" /%3E%3Cpath d=\"M600 400c100 0 150-80 150-150S700 100 600 100s-150 80-150 150 80 150 150 150z\" fill=\"rgba(46,204,113,0.2)\" /%3E%3Ccircle cx=\"200\" cy=\"200\" r=\"100\" fill=\"rgba(52,152,219,0.2)\" /%3E%3C/svg%3E");
background-size: cover;
position: relative
}
.recipes-bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 0
}
.recipes-bg .container {
position: relative;
z-index: 1
}
.recipes-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
place-content: center;
justify-content: center;
margin-inline: auto;
max-width: 1100px;
justify-items: center;
padding: 0;
margin: 0 auto
}
.recipes-container::-webkit-scrollbar {
width: 8px
}
.recipes-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px
}
.recipes-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px
}
.recipe-card.featured {
display: flex;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
overflow: hidden;
transition: transform 0.3s
}
.recipe-card.featured:hover {
transform: translatey(-5px)
}
.recipe-image {
width: 100%;
object-fit: cover;
height: 130px
}
.recipe-content {
padding: 0.3125rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
gap: 0.3125rem;
flex-grow: 1
}
.country-flag {
width: 2.5rem;
height: auto;
margin-bottom: 0;
margin-left: 6px
}
.recipe-content h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 10px;
margin: 5px;
text-align: left;
line-height: 1.25;
word-break: break-word
}
.recipe-content p {
font-size: 1rem;
color: #333;
margin-bottom: 15px;
text-align: left;
margin: 5px;
line-height: 1.2;
flex-grow: 1
}
.recipe-list {
display: flex;
flex-direction: column;
gap: 15px
}
.recipe-item {
display: flex;
align-items: center;
background-color: #fff;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s
}
.recipe-item:hover {
transform: translatey(-3px)
}
.recipe-item .country-flag {
width: 2.5rem;
margin-right: 15px
}
.recipe-info {
flex: 1
}
.recipe-info h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 5px
}
.recipe-info p {
font-size: 1.5rem;
color: #333;
margin-bottom: 10px
}
.hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 37px;
height: 20px;
cursor: pointer;
z-index: 1001
}
.hamburger span {
display: block;
width: 100%;
height: 3px;
background-color: #333;
transition: all 0.3s ease
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px)
}
.hamburger.active span:nth-child(2) {
opacity: 0
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px)
}
.nav-links {
display: flex;
align-items: center;
list-style: none
}
.nav-links li a {
display: flex;
align-items: center;
gap: 10px
}
.nav-links li a .nav-image {
display: none
}
.nav-btn {
display: inline-block;
padding: 8px 1rem;
background: linear-gradient(135deg, #28a745, #218838);
color: #fff;
border-radius: 5px;
transition: all 0.3s ease
}
.nav-btn:hover {
background: linear-gradient(135deg, #218838, #1c7430);
color: #fff;
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.5)
}
body.menu-open > *:not(nav) {
filter: blur(5px);
transition: filter 0.3s ease
}
.nav-links.active {
display: -webkit-inline-box;
flex-direction: column;
position: fixed;
top: 80px;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.98);
padding-top: 20px;
padding-bottom: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 100000;
align-items: center;
justify-content: flex-start
}
body {
font-family: "Roboto", sans-serif;
color: #313131;
background-color: #fff;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
h1 {
font-size: 48px;
margin-bottom: 20px
}
h2 {
font-size: 2.8rem;
margin-bottom: 15px;
font-family: "Playfair Display", serif;
font-weight: 700;
color: #2c2c2c;
text-align: center;
letter-spacing: 1px
}
h3 {
font-size: 24px;
margin-bottom: 15px
}
h4 {
font-size: 18px;
margin-bottom: 10px
}
p {
font-size: 1.1rem;
/*! margin-bottom: 40px; */
font-family: "Roboto", sans-serif;
color: #4a4a4a;
text-align: center;
max-width: 600px;
margin-left: auto;
margin-right: auto
}
a {
color: #f06a00;
text-decoration: none;
transition: color 0.3s ease
}
a:hover {
color: #0056b3
}
.container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 20px 15px;
position: relative;
z-index: 1;
box-sizing: border-box
}
nav {
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 4px solid #fa8c28;
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px)
}
nav::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: -1
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
height: 80px
}
.logo-title-container {
display: flex;
align-items: center;
position: relative;
z-index: 1;
padding-bottom: 0;
padding-left: 40px
}
.logo-text {
width: 90px;
height: auto;
margin: 0;
font-family: "Montserrat", sans-serif;
font-size: 60px;
font-weight: 700;
fill: #fff;
stroke: #ffca28;
stroke-width: 2;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: glowStroke 2s infinite alternate, colorShift 5s infinite
}
.nav-links li {
margin-left: 20px
}
.nav-links a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s;
font-family: "Roboto", sans-serif;
font-size: 1rem
}
.nav-links a:hover {
color: #f06a00
}
.recipe-section {
padding: 40px 0;
/*! margin: 40px; */
}
.recipe-hero {
position: relative;
margin-bottom: 40px;
max-height: 400px;
}
.recipe-hero-image {
width: 100%;
max-height: 500px;
object-fit: cover;
/*! border-radius: 5px; */
}
.recipe-hero-content {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.7);
padding: 15px 20px;
border-radius: 5px;
color: #fff;
display: flex;
flex-direction: column;
gap: 10px
}
.recipe-hero-content h1 {
font-size: 36px;
color: #fff;
margin: 0
}
.recipe-meta-container {
margin-bottom: 20px;
display: none
}
.recipe-meta {
font-size: 1.5rem;
color: #ddd
}
.recipe-layout {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
align-items: flex-start
}
.recipe-details {
flex: 1 1 580px;
min-width: 300px;
background: #fff;
padding: 2rem 1.5rem;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)
}
.recipe-ingredients, .recipe-instructions, .recipe-comments {
margin-bottom: 30px
}
.recipe-ingredients ul, .recipe-instructions ol {
padding-left: 20px
}
.recipe-ingredients li, .recipe-instructions li {
margin-bottom: 10px;
font-size: 1rem
}
.recipe-comments .comments-list {
margin-bottom: 20px
}
.comment {
border-bottom: 1px solid #dedede;
padding: 15px 0;
padding-bottom: 1rem;
margin-bottom: 1rem
}
.comment p {
margin: 5px 0
}
.comment p strong {
color: #f06a00
}
.comment p span {
font-size: 1rem;
color: #777
}
.comment-form h3 {
font-size: 20px;
margin-bottom: 15px
}
.similar-recipes {
flex: 1;
min-width: 300px
}
.similar-recipes h2 {
font-size: 24px;
margin-bottom: 20px
}
.similar-recipes-list {
display: flex;
flex-direction: column;
gap: 20px
}
.recipe-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.9375rem;
margin-bottom: 1.875rem
}
.filter-select {
padding: 0.75rem 1.5rem;
border: 2px solid #7b7b7b;
border-radius: 0.5rem;
background: linear-gradient(135deg, #f1f1f1, #e0e0e0);
color: #333;
font-family: "Roboto", sans-serif;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
max-width: 200px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.625rem center;
margin: 5px
}
.filter-select:hover {
background: linear-gradient(135deg, #f5f5f5, #e5e5e5)
}
.filter-select:focus {
outline: none;
border-color: #0056b3;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5)
}
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../../assets/images/hero-bg.webp) no-repeat center center/cover;
color: #fff;
padding: 100px 0;
text-align: center
}
.hero-section h1 {
font-size: 60px;
margin-bottom: 20px
}
.hero-section p {
font-size: 20px;
max-width: 600px;
margin: 0 auto 30px
}
.featured-recipes {
padding: 60px 0;
background-color: #f8f9fa
}
.featured-recipes h2 {
text-align: center;
margin-bottom: 40px
}
.recipe-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px
}
.recipe-grid .recipe-card {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s
}
.recipe-grid .recipe-card:hover {
transform: translatey(-5px)
}
.recipe-grid .recipe-image {
width: 100%;
height: 200px;
object-fit: cover
}
.recipe-grid .recipe-content {
padding: 15px
}
.about-section {
padding: 60px 0
}
.about-section h2 {
text-align: center;
margin-bottom: 30px
}
.about-image {
flex: 1;
min-width: 300px;
min-height: 240px
}
.contact-section {
padding: 60px 0;
background-color: #f8f9fa
}
.contact-section h2 {
text-align: center;
margin-bottom: 30px
}
.blog-section {
padding: 60px 0
}
.blog-section h2 {
text-align: center;
margin-bottom: 40px
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px
}
.blog-post {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden
}
.blog-post img {
width: 100%;
height: 200px;
object-fit: cover
}
.blog-post-content {
padding: 15px
}
.blog-post-content h3 {
font-size: 20px;
margin-bottom: 10px
}
.blog-post-content p {
font-size: 1.5rem;
color: #555
}
.carousel {
position: relative;
max-width: 100%;
overflow: hidden
}
.carousel-inner {
display: flex;
transition: transform 0.3s ease
}
.carousel-item {
flex: 0 0 100%
}
.carousel-item img {
width: 100%;
height: 400px;
object-fit: cover
}
.carousel-prev, .carousel-next {
position: absolute;
top: 50%;
transform: translatey(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
padding: 10px;
cursor: pointer
}
.carousel-prev {
left: 10px
}
.carousel-next {
right: 10px
}
.pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px
}
.pagination a {
padding: 8px 1rem;
border: 1px solid #ddd;
border-radius: 5px;
color: #333;
text-decoration: none;
transition: all 0.3s
}
.pagination a:hover {
background-color: #f06a00;
color: #fff;
border-color: #f06a00
}
.pagination a.active {
background-color: #f06a00;
color: #fff;
border-color: #f06a00
}
.fade-in {
animation: fadeIn 1s ease-in
}
.slide-in {
animation: slideIn 0.8s ease-out
}
.m-0 {
margin: 0
}
.mt-5 {
margin-top: 5px
}
.mt-10 {
margin-top: 10px
}
.mt-15 {
margin-top: 15px
}
.mt-20 {
margin-top: 20px
}
.mt-30 {
margin-top: 30px
}
.mt-40 {
margin-top: 40px
}
.mb-5 {
margin-bottom: 5px
}
.mb-10 {
margin-bottom: 10px
}
.mb-15 {
margin-bottom: 15px
}
.mb-20 {
margin-bottom: 20px
}
.mb-30 {
margin-bottom: 30px
}
.mb-40 {
margin-bottom: 40px
}
.ml-5 {
margin-left: 5px
}
.ml-10 {
margin-left: 10px
}
.ml-15 {
margin-left: 15px
}
.ml-20 {
margin-left: 20px
}
.mr-5 {
margin-right: 5px
}
.mr-10 {
margin-right: 10px
}
.mr-15 {
margin-right: 15px
}
.mr-20 {
margin-right: 20px
}
.p-0 {
padding: 0
}
.pt-5 {
padding-top: 5px
}
.pt-10 {
padding-top: 10px
}
.pt-15 {
padding-top: 15px
}
.pt-20 {
padding-top: 20px
}
.pt-30 {
padding-top: 30px
}
.pt-40 {
padding-top: 40px
}
.pb-5 {
padding-bottom: 5px
}
.pb-10 {
padding-bottom: 10px
}
.pb-15 {
padding-bottom: 15px
}
.pb-20 {
padding-bottom: 20px
}
.pb-30 {
padding-bottom: 30px
}
.pb-40 {
padding-bottom: 40px
}
.pl-5 {
padding-left: 5px
}
.pl-10 {
padding-left: 10px
}
.pl-15 {
padding-left: 15px
}
.pl-20 {
padding-left: 20px
}
.pr-5 {
padding-right: 5px
}
.pr-10 {
padding-right: 10px
}
.pr-15 {
padding-right: 15px
}
.pr-20 {
padding-right: 20px
}
.text-center {
text-align: center
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.bg-primary {
background-color: #f06a00
}
.bg-success {
background-color: #28a745
}
.bg-danger {
background-color: #dc3545
}
.bg-light {
background-color: #f8f9fa
}
.bg-dark {
background-color: #343a40
}
.text-primary {
color: #f06a00
}
.text-success {
color: #28a745
}
.text-danger {
color: #dc3545
}
.text-light {
color: #f8f9fa
}
.text-dark {
color: #343a40
}
.fs-10 {
font-size: 10px
}
.fs-12 {
font-size: 1rem
}
.fs-14 {
font-size: 1.5rem
}
.fs-16 {
font-size: 1rem
}
.fs-18 {
font-size: 18px
}
.fs-20 {
font-size: 20px
}
.fs-24 {
font-size: 24px
}
.fs-28 {
font-size: 28px
}
.fs-32 {
font-size: 32px
}
.fs-36 {
font-size: 36px
}
.fs-40 {
font-size: 40px
}
.fs-48 {
font-size: 48px
}
.fw-light {
font-weight: 300
}
.fw-normal {
font-weight: 400
}
.fw-medium {
font-weight: 500
}
.fw-bold {
font-weight: 700
}
.br-0 {
border-radius: 5px
}
.br-4 {
border-radius: 5px
}
.br-8 {
border-radius: 5px
}
.br-12 {
border-radius: 5px
}
.shadow-sm {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
}
.shadow {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
}
.shadow-lg {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
}
.btn:focus {
outline: 2px solid #9ca3af;
outline-offset: 2px
}
.btn-send {
border: none;
background-color: #fff;
color: #939393;
width: 40px;
height: 40px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s
}
.btn-send .send-icon {
width: 20px;
height: 20px;
fill: #3E3E3E
}
.recipe-card-animate {
opacity: 1;
transform: scale(1)
}
.modal {
display: none;
position: fixed;
top: 50% !important;
width: 300px !important;
height: 380px !important;
background-color: #fff !important;
z-index: 100 !important;
transition: top 0.5s ease, right 0.5s ease, width 0.5s ease, height 0.5s ease, transform 0.5s ease
}
.modal-centered {
left: 50% !important;
transform: translate(-50%, -50%) !important
}
.modal.small-top-right {
top: 96px !important;
right: 20px !important;
transform: none !important;
width: 170px !important;
height: 60px !important;
border-radius: 5px
}
.modal-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 10px;
box-sizing: border-box;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)
}
.modal.small-top-right .modal-content {
padding: 5px
}
.loader-container, .confirmation-container, .error-container {
display: none;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 100%;
box-sizing: border-box
}
.modal.small-top-right .loader-container, .modal.small-top-right .confirmation-container, .modal.small-top-right .error-container {
gap: 5px
}
.loader {
border: 4px solid rgba(0, 0, 0, 0.12);
border-top: 4px solid #fa8c28;
border-radius: 50%;
width: 25px;
height: 25px;
animation: loader-spin 0.8s linear infinite;
margin-bottom: 0;
box-sizing: border-box
}
.modal.small-top-right .loader {
width: 15px;
height: 15px;
border-width: 3px
}
.modal-content p {
font-size: 1.5rem;
font-weight: 700;
color: #333;
margin: 0;
text-align: center
}
.modal.small-top-right .modal-content p {
font-size: 15px
}
.view-recipe-btn, .retry-btn {
padding: 8px 1rem;
font-size: 1rem;
font-weight: 700;
color: #fff;
background-color: #fa8c28;
border: none;
border-radius: 0;
cursor: pointer;
text-decoration: none;
/*! margin: 10px; */
}
.modal.small-top-right .view-recipe-btn, .modal.small-top-right .retry-btn {
padding: 8px 10px;
font-size: 10px;
margin: 10px;
border-radius: 5px
}
.view-recipe-btn:hover, .retry-btn:hover {
background-color: #ec7063
}
.loader-wrapper {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2000
}
.recipe-details h2 {
margin-top: 0;
margin-bottom: 1.5rem;
text-align: left;
padding-left: 0.25rem
}
.recipe-details ul, .recipe-details ol {
margin-left: 1.5rem;
margin-bottom: 1.5rem
}
.recipe-comments {
flex: 0 0 340px;
border: 1px solid #e5e5e5;
border-radius: 6px;
padding: 1.5rem 1.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05)
}
.comments-list {
margin-bottom: 1.5rem
}
.comment-form {
display: flex;
flex-direction: column;
gap: 1rem
}
.comment-form .form-group {
margin: 0
}
.comment-form input, .comment-form textarea {
width: 100%
}
.recipe-comments h2 {
text-align: center;
margin-top: 0
}
.similar-recipes .recipe-card {
opacity: 1;
transform: none
}
.similar-recipes .recipe-image {
width: 100%;
aspect-ratio: 3/2;
object-fit: cover
}
.similar-recipes .recipe-content {
display: block;
margin-top: 10px
}
.fade-zoom {
opacity: 0;
transform: scale(0.95) translatey(10px);
will-change: opacity, transform
}
.fade-zoom.show {
opacity: 1;
transform: scale(1);
animation: fadeZoom 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
border: 1px solid #d9d9d9
}
body.preload * {
opacity: 0 !important
}
.dish-card::before {
content: "";
position: absolute;
inset: 0;
background: #eee;
transition: opacity 0.3s ease;
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
background-size: 200% 100%;
animation: shimmer 1.2s infinite
}
.dish-card.loaded::before {
opacity: 0;
transition: opacity 0.3s ease
}
.dish-card img.loaded {
opacity: 1;
filter: blur(0);
transform: scale(1)
}
.recipe-card.featured .recipe-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3/2;
object-fit: cover
}
.dietary-bg {
background: linear-gradient(120deg, #f9e7d9 0%, #d4e4f7 100%);
padding: 20px 0;
position: relative;
overflow: hidden
}
.dietary-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYV2NkYGD4z8DAwMgABXAGNg4ODABz6A7sB3F0ZAAAAAElFTkSuQmCC") repeat;
opacity: 0.1;
z-index: 0
}
.dietary-btn, .show-more-btn {
width: 100%;
height: 80px;
border: 1px solid #e0e0e0;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/*! transition: border-color 0.3s ease; */
font-family: "Roboto", sans-serif;
font-size: 1rem;
font-weight: 500;
text-align: center;
padding: 10px;
word-break: break-word;
overflow: hidden
}
.show-more-btn {
background: #ff6f61;
color: #fff;
border: none;
width: 100%;
height: 160px;
/*! border-radius: 1rem; */
font-family: "Playfair Display", serif;
font-size: 1rem;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/*! transition: transform 0.4s ease, box-shadow 0.4s ease; */
/*! box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); */
}
.dietary-btn:hover, .show-more-btn:hover {
border-color: #fa8c28
}
.international-cuisine-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYV2NkYGD4z8DAwMgABXAGNg4ODABz6A7sB3F0ZAAAAAElFTkSuQmCC") repeat;
opacity: 0.1;
z-index: 0
}
.search-container {
max-width: 1100px;
margin: 0 auto 30px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
z-index: 1;
flex-direction: column;
gap: 15px
}
.search-input {
width: 100%;
padding: 12px 20px;
font-size: 1rem;
font-family: "Roboto", sans-serif;
border: none;
border-radius: 30px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
outline: none;
transition: box-shadow 0.3s ease, transform 0.3s ease
}
.search-input::placeholder {
color: #999;
font-style: italic
}
.cuisine-btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
z-index: 1
}
.cuisine-btn span {
position: relative;
z-index: 2;
font-family: "Playfair Display", serif;
font-size: 1.3rem;
font-weight: 700;
color: #fff;
padding: 8px;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6)
}
.recipe-card::before {
content: "";
position: absolute;
inset: 0;
background: #eee;
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
background-size: 200% 100%;
animation: shimmer 1.2s infinite
}
.recipe-card img.recipe-image {
width: 100%;
display: block;
filter: blur(20px);
transform: scale(1.05);
opacity: 0;
transition: filter 0.6s ease, transform 0.6s ease, opacity 0.4s ease 0.15s
}
.recipe-card.loaded::before {
opacity: 0;
transition: opacity 0.3s ease
}
.recipe-card img.recipe-image.loaded {
filter: blur(0);
transform: scale(1);
opacity: 1
}
#country-search {
width: 100%;
max-width: 400px;
padding: 14px 24px;
border-radius: 32px;
border: 1px solid #ccc;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
font-size: 1rem;
line-height: 1.4
}
#international-cuisine .search-container {
margin-bottom: 3rem !important
}
@media (max-width: 768px) {
.nav-links {
display: none
}
.logo-title-container {
justify-content: flex-start;
padding-left: 10px;
padding-bottom: 10px
}
.logo-text {
padding-left: 100px;
color: #333
}
.logo-image {
position: absolute;
bottom: -25px;
left: 10px
}
.hero h2 {
font-size: 32px
}
.hero p {
font-size: 1rem
}
.ai-container {
padding: 0 10px
}
.ai-chat-section {
max-width: 90%;
padding: 15px
}
.ai-top-section {
flex-direction: column;
text-align: center
}
.ai-intro {
text-align: center
}
.ai-intro h3 {
font-size: 24px
}
.ai-intro p {
font-size: 1rem
}
.ai-image img {
max-width: 250px;
margin-bottom: 20px
}
.ai-text {
max-width: 100%
}
.chat-box {
height: 250px
}
.ai-chat-section, .ai-image {
min-width: 100%
}
.cooking-input-container {
max-width: 90%
}
.cuisine-options, .dietary-options {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
}
.dish-card {
width: 100%;
max-width: 300px
}
.about-content {
flex-direction: column;
text-align: center;
gap: 20px
}
.about-text p {
text-align: center
}
.about-image img {
max-width: 300px
}
.about-container {
padding: 20px 10px
}
.recipe-card.featured {
flex-direction: column
}
.recipe-image {
width: 100%;
height: 170px
}
.recipe-content {
padding: 15px
}
.recipe-content h3 {
font-size: 20px
}
.recipe-content p {
font-size: 1.5rem
}
.recipe-item {
padding: 10px
}
.recipe-info h4 {
font-size: 1rem
}
.recipe-info p {
font-size: 1rem
}
}
@media (max-width: 992px) {
.ai-container {
flex-direction: column
}
.ai-image {
order: -1
}
}
@media (max-width: 576px) {
.ai-container {
padding: 0 10px
}
.ai-chat-section {
padding: 10px;
max-width: 100%
}
.chat-container {
width: 100%;
max-width: 400px;
margin: auto
}
.chat-box {
height: 200px
}
.footer-content {
align-items: center
}
.footer-links {
flex-direction: column
}
.footer-links li {
margin: 10px 0
}
.ai-intro h3 {
font-size: 22px
}
.ai-intro p {
font-size: 1.5rem
}
.cooking-input-container {
max-width: 100%
}
.cuisine-options, .dietary-options {
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr))
}
.about-text h3 {
font-size: 24px
}
.about-text p {
font-size: 1rem
}
.recipe-content h3 {
font-size: 18px
}
.recipe-content p {
font-size: 13px
}
.recipe-item .country-flag {
width: 20px
}
.recipe-info h4 {
font-size: 1.5rem
}
}
@media (min-width: 577px) and (max-width: 991px) {
.ai-chat-section {
max-width: 600px
}
.chat-box {
height: 250px
}
}
@media (min-width: 1200px) {
.ai-container {
gap: 60px
}
.chat-box {
height: 350px
}
.ai-image img {
max-width: 350px
}
.ai-intro h3 {
font-size: 32px
}
.ai-intro p {
font-size: 18px
}
}
@media (max-width: 576px) {
.section h2 {
font-size: 24px
}
.section p {
font-size: 1.5rem
}
.recipe-hero-image {
height: 250px
}
.recipe-hero-content h1 {
font-size: 24px
}
.recipe-meta-container .recipe-meta {
font-size: 13px
}
.recipes-container {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))
}
.recipe-content h3 {
font-size: 1rem
}
.recipe-content p {
font-size: 1rem
}
.country-flag {
width: 20px
}
.hero-section h1 {
font-size: 32px
}
.hero-section p {
font-size: 1.5rem
}
.carousel-item img {
height: 200px
}
.blog-post-content h3 {
font-size: 1rem
}
.hamburger {
width: 37px;
height: 18px
}
.hamburger span {
height: 2px
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px)
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px)
}
.nav-links.active li {
width: 100%
}
.nav-links.active li a span {
font-size: 1.5rem;
padding: 3px 8px;
height: 30px
}
}
@media (max-width: 768px) {
.hamburger {
display: flex
}
.nav-links {
display: none
}
.nav-links.active {
/*! display: grid; */
grid-template-columns: repeat(auto-fit, minmax(calc(50% - 2px), 1fr));
row-gap: 0;
column-gap: 1px;
padding: 20px 1px 20px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center
}
.nav-links.active li {
margin: 0;
width: 100%
}
.nav-links.active li a {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 0;
text-align: center;
transition: transform 0.3s ease;
width: 100%;
aspect-ratio: 3/2
}
.nav-links.active li a:hover {
transform: translatey(-5px)
}
.nav-links.active li a .nav-image {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 3/2;
object-fit: cover;
border-radius: 5px
}
.nav-links.active li a span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 1rem;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
padding: 5px 10px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
height: 40px
}
.nav-links.active li a.nav-btn {
background: none;
color: inherit
}
.nav-links.active li a.nav-btn:hover {
background: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
}
.nav-links.active li a.nav-btn .nav-image {
display: block
}
}
@media (max-width: 576px) {
.section h2 {
font-size: 24px
}
.section p {
font-size: 1.5rem
}
.recipe-hero-image {
height: 250px
}
.recipe-hero-content h1 {
font-size: 24px
}
.recipe-meta-container .recipe-meta {
font-size: 13px
}
.recipes-container {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))
}
.recipe-content h3 {
font-size: 1rem
}
.recipe-content p {
font-size: 1rem
}
.country-flag {
width: 20px
}
.hero-section h1 {
font-size: 32px
}
.hero-section p {
font-size: 1.5rem
}
.carousel-item img {
height: 200px
}
.blog-post-content h3 {
font-size: 1rem
}
.hamburger {
width: 37px;
height: 18px
}
.hamburger span {
height: 2px
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px)
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px)
}
.nav-links.active li {
width: 100%
}
.nav-links.active li a span {
font-size: 1.5rem;
padding: 3px 8px;
height: 30px
}
}
@media (max-width: 768px) {
.nav-links {
display: none
}
.logo-title-container {
justify-content: flex-start;
padding-left: 0;
padding-bottom: 0
}
.logo-text {
padding-left: 0;
color: #333
}
.section h2 {
font-size: 28px
}
.section p {
font-size: 1rem
}
.recipe-filter {
flex-direction: column;
gap: 0.625rem;
align-items: center
}
.filter-select {
max-width: 100%;
/*! font-size: 1.5rem; */
padding: 0.625rem 0.9375rem
}
.recipe-hero-image {
height: 300px
}
.recipe-hero-content {
flex-direction: row;
align-items: center;
gap: 15px;
padding: 10px 15px
}
.recipe-hero-content h1 {
font-size: 28px
}
.recipe-hero-content .recipe-meta {
display: none
}
.recipe-meta-container {
display: block
}
.recipe-meta-container .recipe-meta {
font-size: 1.5rem;
color: #333;
font-weight: 500
}
.recipe-layout {
flex-direction: column
}
.recipe-content h3 {
font-size: 18px
}
.recipe-content p {
font-size: 13px
}
.country-flag {
width: 2.5rem
}
.hero-section h1 {
font-size: 40px
}
.hero-section p {
font-size: 1rem
}
.about-content {
flex-direction: column
}
.carousel-item img {
height: 300px
}
.blog-post-content h3 {
font-size: 18px
}
}
@media (max-width: 576px) {
.section h2 {
font-size: 24px
}
.section p {
font-size: 1.5rem
}
.recipe-hero-image {
height: 250px
}
.recipe-hero-content h1 {
font-size: 24px
}
.recipe-meta-container .recipe-meta {
font-size: 13px
}
.recipes-container {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))
}
.recipe-content h3 {
font-size: 1rem
}
.recipe-content p {
font-size: 1rem
}
.country-flag {
width: 20px
}
.hero-section h1 {
font-size: 32px
}
.hero-section p {
font-size: 1.5rem
}
.carousel-item img {
height: 200px
}
.blog-post-content h3 {
font-size: 1rem
}
.hamburger {
width: 37px;
height: 18px
}
.hamburger span {
height: 2px
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px)
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px)
}
.nav-links.active li {
width: 100%
}
.nav-links.active li a span {
font-size: 1.5rem;
padding: 3px 8px;
height: 30px
}
}
@media (max-width: 768px) {
.hamburger {
display: flex
}
.nav-links {
display: none
}
.nav-links.active {
/*! display: grid; */
grid-template-columns: repeat(auto-fit, minmax(calc(50% - 2px), 1fr));
row-gap: 0;
column-gap: 1px;
padding: 20px 1px 20px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center
}
.nav-links.active li {
margin: 0;
width: 100%
}
.nav-links.active li a {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 0;
text-align: center;
transition: transform 0.3s ease;
width: 100%;
aspect-ratio: 3/2
}
.nav-links.active li a:hover {
transform: translatey(-5px)
}
.nav-links.active li a .nav-image {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 3/2;
object-fit: cover;
border-radius: 5px
}
.nav-links.active li a span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 1rem;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
padding: 5px 10px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
height: 40px
}
.nav-links.active li a.nav-btn {
background: none;
color: inherit
}
.nav-links.active li a.nav-btn:hover {
background: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
}
.nav-links.active li a.nav-btn .nav-image {
display: block
}
}
@media (max-width: 576px) {
.section h2 {
font-size: 24px
}
.section p {
font-size: 1.5rem
}
.recipe-hero-image {
height: 250px
}
.recipe-hero-content h1 {
font-size: 24px
}
.recipe-meta-container .recipe-meta {
font-size: 13px
}
.recipes-container {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))
}
.recipe-content h3 {
font-size: 1rem
}
.recipe-content p {
font-size: 15px
}
.country-flag {
width: 2.5rem;
padding-left: 8px
}
.hero-section h1 {
font-size: 32px
}
.hero-section p {
font-size: 1.5rem
}
.carousel-item img {
height: 200px
}
.blog-post-content h3 {
font-size: 1rem
}
.hamburger {
width: 37px;
height: 18px
}
.hamburger span {
height: 2px
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px)
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px)
}
.nav-links.active li {
width: 100%
}
.nav-links.active li a span {
font-size: 1.5rem;
padding: 3px 8px;
height: 30px
}
}
@media (min-width: 1200px) {
.recipes-container {
grid-template-columns: repeat(4, 1fr)
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.recipes-container {
grid-template-columns: repeat(4, 1fr)
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.recipes-container {
grid-template-columns: repeat(3, 1fr)
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.recipes-container {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width: 575.98px) {
.recipes-container {
grid-template-columns: 1fr;
justify-items: center
}
.recipe-card {
max-width: 320px;
width: 100%
}
}
@media (max-width: 991.98px) {
.recipe-details, .recipe-comments {
flex: 1 1 100%
}
}
@media (min-width: 992px) {
.similar-recipes-list {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 20px;
flex-wrap: nowrap;
margin: 0 auto;
width: 100%
}
.similar-recipes-list .recipe-card {
flex: 0 0 280px;
max-width: 280px
}
}
@media (min-width: 576px) and (max-width: 991px) {
.similar-recipes-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 0 20px
}
.similar-recipes-list .recipe-card {
width: 100%;
max-width: 380px;
flex: none
}
}
@media (max-width: 575px) {
.similar-recipes-list {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 15px;
padding: 0 10px
}
.similar-recipes-list .recipe-card {
width: 100%;
max-width: none;
flex: none
}
}
@media (max-width: 991px) {
.dish-card {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px)
}
}
@media (max-width: 575px) {
.dish-card {
flex: 1 1 100%;
max-width: 100%
}
}
@media (min-width: 576px) and (max-width: 991.98px) {
.recipes-container {
grid-template-columns: repeat(auto-fit, minmax(12rem, max-content));
justify-content: center;
justify-items: center
}
}
@media (max-width: 575.98px) {
.recipe-card.featured .recipe-content {
flex: 0 1 auto;
justify-content: flex-start;
padding: 10px 15px
}
.recipe-card.featured .recipe-image {
width: 100%;
height: auto;
aspect-ratio: 3/2;
display: block
}
}
@media (max-width: 575.98px) {
.recipe-card.featured .recipe-image {
display: block;
height: 130px;
object-fit: cover
}
}
@media (max-width: 768px) {
h2 {
font-size: 1.8rem
}
p {
font-size: 1.5rem
}
.dietary-options {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem
}
.dietary-btn, .show-more-btn {
height: 70px;
/*! font-size: 1.5rem; */
}
}
@media (max-width: 576px) {
.dietary-options {
grid-template-columns: 1fr
}
.dietary-btn, .show-more-btn {
height: 60px;
font-size: 1.5rem
}
}
@media (max-width: 576px) {
.dietary-options {
grid-template-columns: repeat(2, 1fr);
gap: 1rem
}
}
@media (min-width: 577px) {
.dietary-options {
display: grid;
grid-template-columns: repeat(auto-fit, 120px);
justify-content: center;
gap: 10px
}
.dietary-btn, .show-more-btn {
width: 110px;
height: 80px
}
}
@media (max-width: 768px) {
.nav-links {
display: none
}
.logo-title-container {
justify-content: flex-start;
padding-left: 10px;
padding-bottom: 10px
}
.logo-text {
padding-left: 100px;
color: #333
}
.logo-image {
position: absolute;
bottom: -25px;
left: 10px
}
.hero h2 {
font-size: 32px
}
.hero p {
font-size: 1rem
}
.ai-container {
padding: 0 10px
}
.ai-chat-section {
max-width: 90%;
padding: 15px
}
.ai-top-section {
flex-direction: column;
text-align: center
}
.ai-intro {
text-align: center
}
.ai-intro h3 {
font-size: 24px
}
.ai-intro p {
font-size: 1rem
}
.ai-image img {
max-width: 250px;
margin-bottom: 20px
}
.ai-text {
max-width: 100%
}
.chat-box {
height: 250px
}
.ai-chat-section, .ai-image {
min-width: 100%
}
.cooking-input-container {
max-width: 90%
}
.cuisine-options, .dietary-options {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
}
.dish-card {
width: 100%;
/*! max-width: 300px; */
}
.about-content {
flex-direction: column;
text-align: center;
gap: 20px
}
.about-text p {
text-align: center
}
.about-image img {
max-width: 300px
}
.about-container {
padding: 20px 10px
}
.recipe-card.featured {
flex-direction: column
}
.recipe-image {
width: 100%;
height: 170px
}
.recipe-content {
padding: 15px
}
.recipe-content h3 {
font-size: 20px
}
.recipe-content p {
font-size: 1.5rem
}
.recipe-item {
padding: 10px
}
.recipe-info h4 {
font-size: 1rem
}
.recipe-info p {
font-size: 1rem
}
}
@media (max-width: 992px) {
.ai-container {
flex-direction: column
}
.ai-image {
order: -1
}
}
@media (max-width: 576px) {
.ai-container {
padding: 0 10px
}
.ai-chat-section {
padding: 10px;
max-width: 100%
}
.chat-container {
width: 100%;
max-width: 400px;
margin: auto
}
.chat-box {
height: 200px
}
.footer-content {
align-items: center
}
.footer-links {
flex-direction: column
}
.footer-links li {
margin: 10px 0
}
.ai-intro h3 {
font-size: 22px
}
.ai-intro p {
font-size: 1.5rem
}
.cooking-input-container {
max-width: 100%
}
.cuisine-options, .dietary-options {
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr))
}
.about-text h3 {
font-size: 24px
}
.about-text p {
font-size: 1rem
}
.recipe-content h3 {
font-size: 18px
}
.recipe-content p {
font-size: 13px
}
.recipe-item .country-flag {
width: 20px
}
.recipe-info h4 {
font-size: 1.5rem
}
}
@media (min-width: 577px) and (max-width: 991px) {
.ai-chat-section {
max-width: 600px
}
.chat-box {
height: 250px
}
}
@media (min-width: 1200px) {
.ai-container {
gap: 60px
}
.chat-box {
height: 350px
}
.ai-image img {
max-width: 350px
}
.ai-intro h3 {
font-size: 32px
}
.ai-intro p {
font-size: 18px
}
}
@media (max-width: 576px) {
.section h2 {
font-size: 24px
}
.section p {
font-size: 1.5rem
}
.recipe-hero-image {
height: 250px
}
.recipe-hero-content h1 {
font-size: 24px
}
.recipe-meta-container .recipe-meta {
font-size: 13px
}
.recipes-container {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))
}
.recipe-content h3 {
font-size: 1rem
}
.recipe-content p {
font-size: 1rem
}
.country-flag {
width: 20px
}
.hero-section h1 {
font-size: 32px
}
.hero-section p {
font-size: 1.5rem
}
.carousel-item img {
height: 200px
}
.blog-post-content h3 {
font-size: 1rem
}
.hamburger {
width: 37px;
height: 18px
}
.hamburger span {
height: 2px
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px)
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px)
}
.nav-links.active li {
width: 100%
}
.nav-links.active li a span {
font-size: 1.5rem;
padding: 3px 8px;
height: 30px
}
}
@media (max-width: 768px) {
.hamburger {
display: flex
}
.nav-links {
display: none
}
.nav-links.active {
/*! display: grid; */
grid-template-columns: repeat(auto-fit, minmax(calc(50% - 2px), 1fr));
row-gap: 0;
column-gap: 1px;
padding: 20px 1px 20px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center
}
.nav-links.active li {
margin: 0;
width: 100%
}
.nav-links.active li a {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 0;
text-align: center;
transition: transform 0.3s ease;
width: 100%;
aspect-ratio: 3/2
}
.nav-links.active li a:hover {
transform: translatey(-5px)
}
.nav-links.active li a .nav-image {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 3/2;
object-fit: cover;
border-radius: 5px
}
.nav-links.active li a span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 1rem;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
padding: 5px 10px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
height: 40px
}
.nav-links.active li a.nav-btn {
background: none;
color: inherit
}
.nav-links.active li a.nav-btn:hover {
background: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
}
.nav-links.active li a.nav-btn .nav-image {
display: block
}
}
@media (max-width: 576px) {
.section h2 {
font-size: 24px
}
.section p {
font-size: 1.5rem
}
.recipe-hero-image {
height: 250px
}
.recipe-hero-content h1 {
font-size: 24px
}
.recipe-meta-container .recipe-meta {
font-size: 13px
}
.recipes-container {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))
}
.recipe-content h3 {
font-size: 1rem
}
.recipe-content p {
font-size: 1rem
}
.country-flag {
width: 20px
}
.hero-section h1 {
font-size: 32px
}
.hero-section p {
font-size: 1.5rem
}
.carousel-item img {
height: 200px
}
.blog-post-content h3 {
font-size: 1rem
}
.hamburger {
width: 37px;
height: 18px
}
.hamburger span {
height: 2px
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px)
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px)
}
.nav-links.active li {
width: 100%
}
.nav-links.active li a span {
font-size: 1.5rem;
padding: 3px 8px;
height: 30px
}
}
@media (max-width: 768px) {
.nav-links {
display: none
}
.logo-title-container {
justify-content: flex-start;
padding-left: 0;
padding-bottom: 0
}
.logo-text {
padding-left: 0;
color: #333
}
.section h2 {
font-size: 28px
}
.section p {
font-size: 1rem
}
.recipe-filter {
flex-direction: column;
gap: 0.625rem;
align-items: center
}
.filter-select {
max-width: 100%;
/*! font-size: 1.5rem; */
padding: 0.625rem 0.9375rem
}
.recipe-hero-image {
height: 300px
}
.recipe-hero-content {
flex-direction: row;
align-items: center;
gap: 15px;
padding: 10px 15px
}
.recipe-hero-content h1 {
font-size: 28px
}
.recipe-hero-content .recipe-meta {
display: none
}
.recipe-meta-container {
display: block
}
.recipe-meta-container .recipe-meta {
font-size: 1.5rem;
color: #333;
font-weight: 500
}
.recipe-layout {
flex-direction: column
}
.recipe-content h3 {
font-size: 18px
}
.recipe-content p {
font-size: 13px
}
.country-flag {
width: 2.5rem
}
.hero-section h1 {
font-size: 40px
}
.hero-section p {
font-size: 1rem
}
.about-content {
flex-direction: column
}
.carousel-item img {
height: 300px
}
.blog-post-content h3 {
font-size: 18px
}
}
@media (max-width: 576px) {
.section h2 {
font-size: 24px
}
.section p {
font-size: 1.5rem
}
.recipe-hero-image {
height: 250px
}
.recipe-hero-content h1 {
font-size: 24px
}
.recipe-meta-container .recipe-meta {
font-size: 13px
}
.recipes-container {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))
}
.recipe-content h3 {
font-size: 1rem
}
.recipe-content p {
font-size: 1rem
}
.country-flag {
width: 20px
}
.hero-section h1 {
font-size: 32px
}
.hero-section p {
font-size: 1.5rem
}
.carousel-item img {
height: 200px
}
.blog-post-content h3 {
font-size: 1rem
}
.hamburger {
width: 37px;
height: 18px
}
.hamburger span {
height: 2px
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px)
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px)
}
.nav-links.active li {
width: 100%
}
.nav-links.active li a span {
font-size: 1.5rem;
padding: 3px 8px;
height: 30px
}
}
@media (max-width: 768px) {
.hamburger {
display: flex
}
.nav-links {
display: none
}
.nav-links.active {
/*! display: grid; */
grid-template-columns: repeat(auto-fit, minmax(calc(50% - 2px), 1fr));
row-gap: 0;
column-gap: 1px;
padding: 20px 1px 20px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center
}
.nav-links.active li {
margin: 0;
width: 100%
}
.nav-links.active li a {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 0;
text-align: center;
transition: transform 0.3s ease;
width: 100%;
aspect-ratio: 3/2
}
.nav-links.active li a:hover {
transform: translatey(-5px)
}
.nav-links.active li a .nav-image {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 3/2;
object-fit: cover;
border-radius: 5px
}
.nav-links.active li a span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 1rem;
color: #cacaca;
background-color: rgba(0, 0, 0, 0.7);
padding: 5px 10px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
height: 40px
}
.nav-links.active li a.nav-btn {
background: none;
color: inherit
}
.nav-links.active li a.nav-btn:hover {
background: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
}
.nav-links.active li a.nav-btn .nav-image {
display: block
}
}
@media (max-width: 576px) {
.section h2 {
font-size: 2rem
}
.section p {
font-size: 1rem
}
.recipe-hero-image {
height: 250px
}
.recipe-hero-content h1 {
font-size: 24px
}
.recipe-meta-container .recipe-meta {
font-size: 13px
}
.recipes-container {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))
}
.recipe-content h3 {
font-size: 1rem
}
.recipe-content p {
font-size: 15px
}
.country-flag {
width: 2.5rem;
padding-left: 8px
}
.hero-section h1 {
font-size: 32px
}
.hero-section p {
font-size: 1.5rem
}
.carousel-item img {
height: 200px
}
.blog-post-content h3 {
font-size: 1rem
}
.hamburger {
width: 37px;
height: 18px;
margin-right: 15px;
}
.hamburger span {
height: 2px
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px)
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px)
}
.nav-links.active li {
width: 50%
}
.nav-links.active li a span {
font-size: 1.5rem;
padding: 3px 8px;
height: 25px
}
}
@media (min-width: 1200px) {
.recipes-container {
grid-template-columns: repeat(4, 1fr)
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.recipes-container {
grid-template-columns: repeat(4, 1fr)
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.recipes-container {
grid-template-columns: repeat(3, 1fr)
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.recipes-container {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width: 575.98px) {
.recipes-container {
grid-template-columns: 1fr;
justify-items: center
}
.recipe-card {
max-width: 320px;
width: 100%
}
}
@media (max-width: 991.98px) {
.recipe-details, .recipe-comments {
flex: 1 1 100%
}
}
@media (min-width: 992px) {
.similar-recipes-list {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 20px;
flex-wrap: nowrap;
margin: 0 auto;
width: 100%
}
.similar-recipes-list .recipe-card {
flex: 0 0 280px;
max-width: 280px
}
}
@media (min-width: 576px) and (max-width: 991px) {
.similar-recipes-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 0 20px
}
.similar-recipes-list .recipe-card {
width: 100%;
max-width: 380px;
flex: none
}
}
@media (max-width: 575px) {
.similar-recipes-list {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 15px;
padding: 0 10px
}
.similar-recipes-list .recipe-card {
width: 100%;
max-width: none;
flex: none
}
}
@media (max-width: 991px) {
.dish-card {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px)
}
}
@media (max-width: 575px) {
.dish-card {
/*! flex: 1 1 100%; */
max-width: 100%
}
}
@media (min-width: 576px) and (max-width: 991.98px) {
.recipes-container {
grid-template-columns: repeat(auto-fit, minmax(12rem, max-content));
justify-content: center;
justify-items: center
}
}
@media (max-width: 575.98px) {
.recipe-card.featured .recipe-content {
flex: 0 1 auto;
justify-content: flex-start;
padding: 10px 15px
}
.recipe-card.featured .recipe-image {
width: 100%;
height: auto;
aspect-ratio: 3/2;
display: block
}
}
@media (max-width: 575.98px) {
.recipe-card.featured .recipe-image {
display: block;
height: 130px;
object-fit: cover
}
}
@media (max-width: 768px) {
h2 {
font-size: 2.1 0.5rem
}
p {
font-size: 1rem
}
.cuisine-options {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px
}
.cuisine-btn, .show-more-btn {
height: 140px
}
.cuisine-btn span, .show-more-btn {
font-size: 1.1rem
}
.search-container {
max-width: 350px
}
}
@media (max-width: 480px) {
.cuisine-options {
grid-template-columns: 1fr
}
.cuisine-btn, .show-more-btn {
height: 120px
}
.cuisine-btn span, .show-more-btn {
font-size: 1rem
}
.search-container {
max-width: 100%
}
}
@media (max-height: 550px) {
.cuisine-options {
margin-top: 2.5rem
}
}
/* keep your existing .loader block */
/* THIS was missing / mis-named */
@keyframes loader-spin {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}
/* optional vendor prefix for older Safari */
@-webkit-keyframes loader-spin {
from {
-webkit-transform: rotate(0deg);
} to {
-webkit-transform: rotate(360deg);
}
}
/* Ensure the shimmer animation is defined and applied correctly */
@keyframes shimmer {
0% {
background-position: 200% 0;
} 100% {
background-position: -200% 0;
}
}
/* Fix dish-card skeleton placeholder */
/* Ensure recipe-card skeleton placeholder has the correct animation */
/* Fix fade-zoom animation */
@keyframes fadeZoom {
0% {
opacity: 0;
transform: scale(.95) translateY(10px);
} 100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.search-bar {
flex: 1;
max-width: 600px;
width: 100%;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.85);
border-radius: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
}
.search-bar input {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 30px;
font-family: "Roboto", sans-serif;
font-size: 1rem;
background: transparent;
outline: none
}
.search-bar input::placeholder {
color: #999;
font-style: italic
}
.search-btn {
padding: 12px 20px;
border: none;
border-radius: 30px;
background-color: #fa8c28;
color: #fff;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px
}
.search-btn:hover {
background-color: #e67b20;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
}
.search-btn svg {
width: 1rem;
height: 1rem;
fill: #fff
}
.search-divider {
display: flex;
align-items: center;
width: 100%;
max-width: 600px;
text-align: center;
font-family: "Roboto", sans-serif;
font-size: 1rem;
color: #4a4a4a;
margin: 10px 0
}
.search-divider::before, .search-divider::after {
content: "";
flex: 1;
border-top: 1px solid #ddd;
margin: 0 10px
}
.search-divider a {
color: #f06a00;
text-decoration: none;
font-weight: 496;
transition: color 0.3s ease
}
.search-divider a:hover {
color: #0056b3
}
.search-row {
display: flex;
flex-direction: row;
gap: 10px;
width: 100%;
max-width: 600px;
align-items: center
}
@media (max-width: 768px) {
.search-container {
margin-bottom: 20px;
padding: 0 15px
}
.search-row {
flex-direction: row;
gap: 10px
}
.search-bar {
max-width: 100%
}
.search-divider {
/*! font-size: 1.5rem; */
}
}
@media (max-width: 576px) {
.search-row {
flex-direction: column;
gap: 8px
}
.search-bar input {
font-size: 1rem;
padding: 10px 15px
}
.search-btn {
padding: 10px 15px;
font-size: 1.5rem;
width: 100%
}
.search-divider {
/*! font-size: 0.75rem; */
margin: 8px 0
}
}
/* Ensure recipes-container is centered universally */
/* Override for tablet breakpoint (576px - 991.98px) */
@media (min-width: 576px) and (max-width: 991.98px) {
.recipes-container {
grid-template-columns: repeat(auto-fit, minmax(12rem, 230px));
justify-content: center;
justify-items: center
}
}
/* Override for mobile breakpoint (< 576px) */
@media (max-width: 575.98px) {
.recipes-container {
grid-template-columns: 1fr;
/* Single column for mobile */
justify-items: center;
/* Center the single card */
padding: 0 1rem
}
.recipe-card {
max-width: 320px;
width: 100%;
margin: 0 auto;
/* Ensure card is centered */
}
}
/* Ensure recipe-card is centered within its grid cell */
/* ──────────────── 1. THE GRID: ALWAYS 2 COLS ──────────────── */
/* ──────────── 2. CARD: STRUCTURE & RESPONSIVENESS ─────────── */
/* Image always fills width, keeps aspect ratio */
.recipe-card .recipe-image {
width: 100%;
height: auto;
object-fit: cover;
display: block
}
/* Content area flex-grows to push the button to the bottom */
.recipe-card .recipe-content {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex-grow: 1
}
/* Title */
.recipe-card .recipe-content h3 {
font-size: 1rem;
margin: 0;
line-height: 1.2
}
/* Flag next to title or below—fluid width */
.recipe-card .recipe-content .country-flag {
width: 20px;
height: auto;
margin-bottom: 0.5rem
}
/* Meta paragraph */
.recipe-card .recipe-content p {
font-size: 1rem;
margin: 0;
color: #555
}
/* View button stuck to bottom */
.recipe-card .recipe-content .btn-primary {
margin-top: auto;
font-weight: 700;
text-align: center;
background-color: #fa8c28;
color: #fff;
border: none;
border-radius: 0.25rem;
text-decoration: none;
transition: background-color 0.2s ease
}
.recipe-card .recipe-content .btn-primary:hover {
background-color: #e67b20
}
/* Hover effect on the card itself */
/* ──────── 3. FADE-ZOOM & LOADED STATES ──────── */
.recipe-card.loaded, .recipe-card.recipe-card-animate, .fade-zoom.show {
opacity: 1;
transform: scale(1)
}
/* Optional keyframe for fade-zoom.show */
@keyframes fadeZoom {
from {
opacity: 0;
transform: scale(0.95) translateY(5px);
} to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* ──────── RESPONSIVE TYPOGRAPHY ──────── */
/* Base root sizing */
html {
font-size: 1rem;
zoom: 110%;
font-family: "Inter", sans-serif;
line-height: 1.6;
color: #333
}
/* Tablets and small desktops */
@media (max-width: 768px) {
html {
/*! font-size: 1.5rem; */
}
h2 {
font-size: 1.75rem
}
/* ~28px */
h3, .recipe-content h3 {
font-size: 1rem
}
/* ~18px */
p, .recipe-content p {
font-size: 1.5rem
}
/* ~14px */
.btn-primary {
font-size: 1.5rem;
padding: 0.6rem 1.5rem
}
}
/* Phones */
@media (max-width: 576px) {
html {
font-size: 0.8rem
}
h2 {
font-size: 1.5rem
}
/* ~24px */
h3, .recipe-content h3 {
font-size: 1rem
}
/* ~16px */
p, .recipe-content p {
font-size: 1.5rem
}
/* ~13px */
.btn-primary {
font-size: 1.5rem;
padding: 0.5rem 0.75rem
}
.recipe-card .recipe-content {
padding: 0.75rem
}
.recipes-container {
gap: 0.75rem
}
}
/* ─────────────────────────────────────────────────────────────────── */
/* 2–6 COLUMN RESPONSIVE GRID */
/* ─────────────────────────────────────────────────────────────────── */
/* on very small screens, force at least 2 columns */
@media (max-width: 500px) {
.recipes-container {
grid-template-columns: repeat(2, 1fr)
}
}
/* ────── HERO SECTION SCALING ────── */
.hero .container h2 {
font-size: 3rem;
line-height: 1.2;
max-width: 800px;
margin: 0 auto 1rem
}
.hero .container p {
font-size: 1.5rem;
max-width: 700px;
margin: 0 auto 1.5rem;
line-height: 1.4
}
.hero .container .btn-primary {
/*! padding: 1rem 1.5rem; */
font-size: 1rem
}
/* ───────── Phones ───────── */
@media (max-width: 576px) {
.hero {
padding: 60px 0
}
.hero .container h2 {
font-size: 2.5rem
}
.hero .container p {
font-size: 1.9rem;
max-width: 90%
}
.hero .container .btn-primary {
padding: 0.6rem 1.1 0.5rem;
/*! font-size: 1.5rem; */
padding: 0.5rem 1rem;
font-size: 1rem
}
}
/* ───── Cooking Request Section ───── */
#cooking-request {
/* reuse your existing section styles… */
}
/* ───── Input + Button Row ───── */
/* let the text field flex to fill available space */
.cooking-input-container #cooking-input {
flex: 1 1 auto;
min-width: 0;
/* allow it to shrink under flex */
font-size: 1rem
}
/* pin the button at its intrinsic size on the right */
.cooking-input-container button {
flex: 0 0 auto
}
/* Suggestions dropdown under the input */
.cooking-input-container .suggestions {
position: absolute;
top: calc(100% + 5px);
left: 0;
width: 100%;
box-sizing: border-box;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
max-height: 300px;
overflow-y: auto;
z-index: 1000;
display: none;
padding: 0.5rem;
/*! max-width: 600px */
}
/* Basic responsive tweaks */
@media (max-width: 576px) {
.cooking-input-container {
gap: 0.25rem
}
.cooking-input-container #cooking-input, .cooking-input-container button {
font-size: 1.5rem;
padding: 0.6rem 0.8rem
}
}
@media (max-width: 768px) {
.nav-links.active {
top: 84px;
height: calc(114vh - 196px - 82px);
/* fills to 20px above bottom */
padding: 20px;
/* inner spacing on all sides */
background: linear-gradient(120deg, #f9e7d9 0%, #d4e4f7 100%);
overflow-y: auto;
gap: 20px;
/* space between items horizontally and vertically */
}
}
.cuisine-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 160px;
padding: 1rem;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease
}
.cuisine-card:hover {
transform: translatey(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
}
.cuisine-flag {
width: 60px;
height: 60px;
background-size: cover;
background-position: center;
border-radius: 50%;
margin-bottom: 8px;
border: 2px solid #f1f1f1;
position: relative;
overflow: hidden
}
.cuisine-name {
font-family: "Roboto", sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: #2c2c2c;
text-align: center;
line-height: 1.3
}
.show-more-card {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 160px;
padding: 1rem;
background-color: #fa8c28;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease
}
.show-more-card:hover {
transform: translatey(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background-color: #e67b20
}
.show-more-card span {
font-family: "Playfair Display", serif;
font-size: 1rem;
font-weight: 700;
color: #fff;
text-align: center
}
/* Responsive adjustments */
@media (max-width: 768px) {
.cuisine-options {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 1rem;
max-width: 1100px;
padding: 0 !important;
margin: 0 auto !important
}
.cuisine-card, .show-more-card {
max-width: 140px;
padding: 10px
}
.cuisine-flag {
width: 50px;
height: 50px
}
.cuisine-name {
font-size: 1.5rem
}
.show-more-card span {
font-size: 1.5rem
}
}
@media (max-width: 480px) {
.cuisine-options {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px
}
.cuisine-card, .show-more-card {
max-width: 120px;
padding: 10px
}
.cuisine-flag {
width: 45px;
height: 45px
}
.cuisine-name {
font-size: 1rem
}
.show-more-card span {
font-size: 1.5rem
}
}
/* ---- SKELETON PLACEHOLDER ---- */
.cuisine-flag::before {
/* shimmering block */
content: "";
position: absolute;
inset: 0;
background: #eee;
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
background-size: 200% 100%;
animation: shimmer 1.2s infinite
}
@keyframes shimmer {
0% {
background-position: 200% 0;
} 100% {
background-position: -200% 0;
}
}
/* ---- THE REAL IMAGE ---- */
.cuisine-flag img {
width: 100%;
height: 100%;
display: block;
filter: blur(20px);
transform: scale(1.05);
opacity: 0;
transition: filter 0.6s ease, transform 0.6s ease, opacity 0.4s ease 0.15s
}
/* ---- ONCE LOADED ---- */
.cuisine-flag.loaded::before {
opacity: 0;
transition: opacity 0.3s ease
}
.cuisine-flag img.loaded {
filter: blur(0);
transform: scale(1);
opacity: 1
}
/* on small screens (<576px) force exactly 2 columns */
@media (max-width: 576px) {
.dietary-options {
grid-template-columns: repeat(2, 1fr);
max-width: none;
/* let it expand to container width */
/*! max-width: 1100px; */
padding: 0 !important;
margin: 0 auto !important
}
}
/* Ensure only .suggestions appears above #best-dishes */
/* Neutralize transform stacking context for #best-dishes */
#best-dishes.fade-zoom.show {
transform: none;
z-index: 10;
position: relative
}
/* ─── Override any mobile stacking of buttons ─── */
.button-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 10px;
justify-content: space-between;
margin-top: 15px;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto
}
/* allow them to shrink rather than wrap */
.button-container .btn {
flex: 1;
min-width: 0;
width: auto;
padding: 12px;
font-size: 1rem;
font-family: "Montserrat", sans-serif;
font-weight: 700;
text-align: center;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease-in-out
}
/* make sure our override beats any existing media-query */
@media (max-width: 576px) {
.button-container {
flex-direction: row !important
}
.button-container .btn {
width: auto !important
}
}
/* Suggestions Styling */
.suggestions[style*="display: block"], .suggestions.active {
display: block;
pointer-events: auto;
opacity: 1;
visibility: visible
}
.suggestions li img {
width: 50px;
height: 50px;
object-fit: cover;
margin-right: 10px;
border-radius: 5px
}
.suggestions li span {
font-family: "Roboto", sans-serif;
color: #333
}
/* Ensure best-dishes-bg section remains clickable */
.section.best-dishes-bg {
position: relative;
z-index: 10;
pointer-events: auto
}
/* Neutralize transform stacking context for #best-dishes */
/* Ensure dish-card elements within best-dishes-bg are clickable */
/* Fade-Zoom Animation */
@keyframes fadeZoom {
0% {
opacity: 0;
transform: scale(.95) translateY(10px);
} 100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Shimmer Animation for Skeleton Placeholder */
@keyframes shimmer {
0% {
background-position: 200% 0;
} 100% {
background-position: -200% 0;
}
}
/* Dish Card Skeleton Placeholder */
/* Dish Card Image Loading */
.dish personally {
filter: blur(0);
transform: scale(1);
opacity: 1
}
/* Dish Card Description */
/* View Recipe Button */
.dish-card .view-recipe-btn {
margin-top: auto;
padding: 10px 16px;
font-size: 0.9rem;
font-family: "Montserrat", sans-serif;
font-weight: 700;
color: #fff;
background-color: #fa8c28;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease-in-out
}
.dish-card .view-recipe-btn:hover {
background-color: #e67b20
}
/* Container adjustments for better mobile padding */
/* Input container adjustments */
/* Button container for Ask Chef and Search buttons */
.btn-secondary {
background-color: #6b7280;
/* Gray for contrast */
color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border: 1px solid #4b5563
}
.btn-secondary:hover {
background-color: #4b5563;
color: #fff
}
/* Ensure suggestions match the input width */
/* New Subsections Styling */
.cooking-tips, .popular-ingredients {
margin-top: 30px;
padding: 30px 15px;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 100%;
box-sizing: border-box;
border: 1px solid #d9d9d9
}
.cooking-tips h3, .popular-ingredients h3 {
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 700;
color: #2c2c2c;
text-align: center;
margin-bottom: 15px
}
.cooking-tips p, .popular-ingredients p {
font-family: "Roboto", sans-serif;
font-size: 1rem;
color: #4a4a4a;
text-align: center;
max-width: 700px;
margin: 0 auto 20px
}
.tips-grid, .ingredients-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 15px;
justify-items: center;
max-width: 1100px;
margin: 0 auto
}
.tip-card, .ingredient-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease;
max-width: 300px;
width: 100%;
cursor: pointer;
box-sizing: border-box
}
.tip-card:hover, .ingredient-card:hover {
transform: translatey(-5px)
}
.tip-card img, .ingredient-card img {
width: 100%;
height: 200px;
object-fit: cover;
display: block
}
.tip-card-content, .ingredient-card-content {
padding: 15px
}
.tip-card-content h4, .ingredient-card-content h4 {
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 700;
color: #333;
margin-bottom: 10px
}
.tip-card-content p, .ingredient-card-content p {
font-family: "Roboto", sans-serif;
font-size: 0.9rem;
color: #555;
margin: 0;
text-align: left
}
/* Responsive adjustments */
@media (max-width: 768px) {
.container {
padding: 15px 10px
}
.cooking-input-container {
max-width: 90%
}
#cooking-input {
padding: 10px;
font-size: 1rem
}
.button-container {
gap: 8px
}
.cooking-tips, .popular-ingredients {
padding: 20px 10px;
margin-top: 20px
}
.cooking-tips h3, .popular-ingredients h3 {
font-size: 20px
}
.cooking-tips p, .popular-ingredients p {
font-size: 0.9rem;
max-width: 90%
}
.tips-grid, .ingredients-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px
}
.tip-card, .ingredient-card {
max-width: 240px
}
.tip-card img, .ingredient-card img {
height: 180px
}
.tip-card-content, .ingredient-card-content {
padding: 12px
}
.tip-card-content h4, .ingredient-card-content h4 {
font-size: 14px
}
.tip-card-content p, .ingredient-card-content p {
font-size: 0.85rem
}
}
@media (max-width: 576px) {
.container {
padding: 10px 8px
}
.cooking-input-container {
max-width: 100%
}
#cooking-input {
padding: 8px;
font-size: 0.9rem
}
.button-container {
flex-direction: column;
/* Stack buttons vertically on mobile */
gap: 10px
}
.button-container .btn {
width: 100%;
/* Full width on mobile */
}
.cooking-tips, .popular-ingredients {
padding: 15px 8px;
margin-top: 15px
}
.cooking-tips h3, .popular-ingredients h3 {
font-size: 18px
}
.cooking-tips p, .popular-ingredients p {
font-size: 0.85rem
}
.tips-grid, .ingredients-grid {
grid-template-columns: 1fr;
gap: 10px
}
.tip-card, .ingredient-card {
max-width: 100%
}
.tip-card img, .ingredient-card img {
height: 150px
}
.tip-card-content, .ingredient-card-content {
padding: 10px
}
}
@media (min-width: 1200px) {
.container {
padding: 30px 20px
}
.cooking-input-container {
max-width: 700px
}
#cooking-input {
padding: 15px;
font-size: 1.4rem
}
.button-container {
gap: 15px
}
.cooking-tips, .popular-ingredients {
padding: 40px 20px;
margin-top: 40px
}
.cooking-tips h3, .popular-ingredients h3 {
font-size: 28px
}
.cooking-tips p, .popular-ingredients p {
font-size: 1.1rem
}
.tips-grid, .ingredients-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px
}
.tip-card, .ingredient-card {
max-width: 320px
}
.tip-card img, .ingredient-card img {
height: 240px
}
.tip-card-content h4, .ingredient-card-content h4 {
font-size: 18px
}
.tip-card-content p, .ingredient-card-content p {
font-size: 1rem
}
}
html, body {
height: 100%;
margin: 0
}
/* 1) Import the font */
/* 2) Apply it site-wide */
/* 3) Ensure form inputs, buttons, etc. match */
input, button, textarea, select {
font-family: inherit
}
/* Hero Section Styling */
.wevier-logo {
width: 100%;
max-width: 400px;
height: auto;
animation: logoFade 10s infinite ease-in-out
}
/* Animations */
@keyframes logoFade {
0%, 100% {
opacity: 1;
transform: scale(1);
} 50% {
opacity: 0.7;
transform: scale(1.03);
}
}
@keyframes backgroundFade {
0%, 100% {
opacity: 1;
transform: translateY(0);
} 50% {
opacity: 0.8;
transform: translateY(-10px);
}
}
@keyframes glowStroke {
0% {
stroke: #ffca28;
filter: drop-shadow(0 0 5px #ffca28);
} 100% {
stroke: #ff5722;
filter: drop-shadow(0 0 40px #ff5722);
}
}
@keyframes colorShift {
0% {
fill: #fff;
} 50% {
fill: #ffca28;
} 100% {
fill: #fff;
}
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.wevier-logo {
max-width: 300px
}
.logo-text {
font-size: 40px
}
}
@media (max-width: 576px) {
.wevier-logo {
max-width: 200px
}
.logo-text {
font-size: 30px
}
}
@media (max-width: 768px) {
/* switch to a 2-column grid for the active nav */
.nav-links.active {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
/* optional gutter */
padding: 25px 5px;
/*! margin: 3px; */
}
/* make each exactly half the width */
.nav-links.active li {
width: 100%;
/* grid items fill their columns */
margin: 0;
/* remove any extra spacing */
/*! padding: rem; */
}
/* ensure each link fills its cell */
.nav-links.active li a {
display: block;
width: 100%
}
}
/* Hero Section Styling */
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: url('../images/hero-bg.gif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
animation: backgroundFade 10s infinite ease-in-out;
}
.hero .container {
text-align: center;
z-index: 2;
}
.hero h2 {
font-family: "Montserrat", sans-serif;
font-size: 2.5rem;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
}
.hero .btn-primary {
background-color: #fa8c28;
color: #fff;
padding: 12px 24px;
font-size: 1.2rem;
font-family: "Montserrat", sans-serif;
font-weight: 700;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.2s ease-in-out;
}
.hero .btn-primary:hover {
background-color: #e67b20;
}
/* Hero Background Animation */
@keyframes backgroundFade {
0%, 100% { opacity: 1; transform: translateY(0); }
50% { opacity: 0.8; transform: translateY(-10px); }
}
/* Suggestions Styling */
.suggestions {
position: absolute;
top: calc(100% + 5px);
left: 0;
right: 0;
background: white;
border: 1px solid #ccc;
border-radius: 5px;
max-height: 300px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
min-height: 50px;
min-width: 200px;
padding: 5px;
width: 100%;
box-sizing: border-box;
display: none;
pointer-events: none;
}
.suggestions.active {
display: block;
pointer-events: auto;
opacity: 1;
visibility: visible;
}
.suggestions ul {
list-style: none;
margin: 0;
padding: 0;
}
.suggestions li {
display: flex;
align-items: center;
padding: 8px 10px;
cursor: pointer;
font-size: 1rem;
border-bottom: 1px solid #eee;
}
.suggestions li img {
width: 50px;
height: 50px;
object-fit: cover;
margin-right: 10px;
border-radius: 5px;
}
.suggestions li span {
font-family: "Roboto", sans-serif;
color: #333;
}
.suggestions li.no-results {
padding: 10px;
color: #666;
cursor: default;
}
.suggestions li:last-child {
border-bottom: none;
}
.suggestions li:hover:not(.no-results) {
background: #f0f0f0;
}
/* Ensure best-dishes-bg section remains clickable */
.section.best-dishes-bg {
position: relative;
z-index: 10;
pointer-events: auto;
}
/* Neutralize transform stacking context for #best-dishes */
#best-dishes.fade-zoom.show {
transform: none;
z-index: 10;
}
/* Ensure dish-card elements within best-dishes-bg are clickable */
.dish-card {
position: relative;
z-index: 15;
pointer-events: auto;
}
/* Fade-Zoom Animation */
@keyframes fadeZoom {
0% { opacity: 0; transform: scale(.95) translateY(10px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.fade-zoom {
opacity: 0;
transform: scale(.95) translateY(10px);
will-change: opacity, transform;
}
.fade-zoom.show {
animation: fadeZoom .6s cubic-bezier(.25,.8,.25,1) forwards;
}
/* Shimmer Animation for Skeleton Placeholder */
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Dish Card Skeleton Placeholder */
.dish-card {
position: relative;
min-height: 250px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-bottom: 15px;
}
.dish-card::before {
content: '';
position: absolute;
inset: 0;
background: #eee;
background-image: linear-gradient(
100deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.4) 50%,
rgba(255,255,255,0) 100%
);
background-size: 200% 100%;
animation: shimmer 1.2s infinite;
}
.dish-card.loaded::before {
opacity: 0;
transition: opacity .3s ease;
}
/* Dish Card Image Loading */
.dish-card img {
width: 100%;
height: auto;
display: block;
filter: blur(20px);
transform: scale(1.05);
opacity: 0;
transition: filter .6s ease, transform .6s ease, opacity .4s ease .15s;
}
.dish-card img.loaded {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
/* Dish Card Description */
.dish-card p {
font-family: "Roboto", sans-serif;
font-size: 0.9rem;
color: #555;
margin: 10px 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* Limit to 3 lines for consistency */
-webkit-box-orient: vertical;
}
/* View Recipe Button */
.dish-card .view-recipe-btn {
margin-top: auto;
padding: 8px 16px;
font-size: 0.9rem;
font-family: "Montserrat", sans-serif;
font-weight: 700;
color: #fff;
background-color: #fa8c28;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.dish-card .view-recipe-btn:hover {
background-color: #e67b20;
}
/* Tip Card and Ingredient Card Skeleton Placeholder */
.tip-card, .ingredient-card {
position: relative;
overflow: hidden;
}
.tip-card::before, .ingredient-card::before {
content: '';
position: absolute;
inset: 0;
background: #eee;
background-image: linear-gradient(
100deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.4) 50%,
rgba(255,255,255,0) 100%
);
background-size: 200% 100%;
animation: shimmer 1.2s infinite;
}
.tip-card.loaded::before, .ingredient-card.loaded::before {
opacity: 0;
transition: opacity .3s ease;
}
/* Tip Card and Ingredient Card Image Loading */
.tip-card img, .ingredient-card img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
filter: blur(20px);
transform: scale(1.05);
opacity: 0;
transition: filter .6s ease, transform .6s ease, opacity .4s ease .15s;
}
.tip-card img.loaded, .ingredient-card img.loaded {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
/* Container adjustments for better mobile padding */
.container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 20px 30px;
position: relative;
z-index: 1;
box-sizing: border-box;
}
/* Input container adjustments */
.cooking-input-container {
max-width: 600px;
width: 100%;
z-index: 100002;
margin: 0 auto;
position: relative; /* For suggestions positioning */
}
#cooking-input {
padding: 12px;
font-size: 1.2rem;
line-height: 1.4;
width: 100%;
box-sizing: border-box;
border-radius: 5px; /* Fully rounded input */
border: 1px solid #ccc; /* Ensure input is visible */
}
/* Button container for Ask Chef and Search buttons */
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 15px; /* Space below input */
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
transition: margin-top 0.3s ease; /* Smooth transition for margin changes */
}
.button-container .btn {
flex: 1; /* Equal width for both buttons */
padding: 12px;
font-size: 1rem;
font-family: "Montserrat", sans-serif;
font-weight: 700;
text-align: center;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.btn-primary {
background-color: #fa8c28;
color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border: 1px solid #d1d5db;
}
.btn-primary:hover {
background-color: #e67b20;
color: #fff;
}
.btn-secondary {
background-color: #6b7280; /* Gray for contrast */
color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border: 1px solid #4b5563;
}
.btn-secondary:hover {
background-color: #4b5563;
color: #fff;
}
/* Ensure suggestions match the input width */
.cooking-input-container .suggestions {
width: 100%;
/*! max-width: 600px; */
box-sizing: border-box;
border-radius: 5px; /* Match input */
}
/* New Subsections Styling */
.cooking-tips, .popular-ingredients {
margin-top: 30px;
padding: 30px 15px;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 100%;
box-sizing: border-box;
}
.cooking-tips h3, .popular-ingredients h3 {
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 700;
color: #2c2c2c;
text-align: center;
margin-bottom: 15px;
}
.cooking-tips p, .popular-ingredients p {
font-family: "Roboto", sans-serif;
font-size: 1rem;
color: #4a4a4a;
text-align: center;
max-width: 700px;
margin: 0 auto 20px;
}
.tips-grid, .ingredients-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 15px;
justify-items: center;
max-width: 1100px;
margin: 0 auto;
}
.tip-card, .ingredient-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease;
max-width: 300px;
width: 100%;
cursor: pointer;
box-sizing: border-box;
}
.tip-card:hover, .ingredient-card:hover {
transform: translateY(-5px);
}
.tip-card-content, .ingredient-card-content {
padding: 15px;
}
.tip-card-content h4, .ingredient-card-content h4 {
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
}
.tip-card-content p, .ingredient-card-content p {
font-family: "Roboto", sans-serif;
font-size: 0.9rem;
color: #555;
margin: 0;
text-align: left;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.container {
padding: 15px 10px;
}
.cooking-input-container {
max-width: 90%;
}
#cooking-input {
padding: 10px;
font-size: 1rem;
}
.button-container {
gap: 8px;
}
.cooking-tips, .popular-ingredients {
padding: 20px 10px;
margin-top: 20px;
}
.cooking-tips h3, .popular-ingredients h3 {
font-size: 20px;
}
.cooking-tips p, .popular-ingredients p {
font-size: 0.9rem;
max-width: 90%;
}
.tips-grid, .ingredients-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.tip-card, .ingredient-card {
max-width: 240px;
}
.tip-card img, .ingredient-card img {
height: 180px;
}
.tip-card-content, .ingredient-card-content {
padding: 12px;
}
.tip-card-content h4, .ingredient-card-content h4 {
font-size: 14px;
}
.tip-card-content p, .ingredient-card-content p {
font-size: 0.85rem;
}
}
@media (max-width: 576px) {
.container {
/* padding: 10px 5px; */
}
.cooking-input-container {
max-width: 100%;
}
#cooking-input {
padding: 8px;
font-size: 0.9rem;
}
.button-container {
flex-direction: column; /* Stack buttons vertically on mobile */
gap: 10px;
}
.button-container .btn {
width: 100%; /* Full width on mobile */
}
.cooking-tips, .popular-ingredients {
padding: 15px 8px;
margin-top: 15px;
}
.cooking-tips h3, .popular-ingredients h3 {
font-size: 18px;
}
.cooking-tips p, .popular-ingredients p {
font-size: 0.85rem;
}
.tips-grid, .ingredients-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.tip-card, .ingredient-card {
max-width: 100%;
}
.tip-card img, .ingredient-card img {
height: 150px;
}
.tip-card-content, .ingredient-card-content {
padding: 10px;
}
}
@media (min-width: 1200px) {
.container {
padding: 30px 20px;
}
.cooking-input-container {
max-width: 700px;
}
#cooking-input {
padding: 15px;
font-size: 1.4rem;
}
.button-container {
gap: 15px;
}
.cooking-tips, .popular-ingredients {
padding: 40px 20px;
margin-top: 40px;
}
.cooking-tips h3, .popular-ingredients h3 {
font-size: 28px;
}
.cooking-tips p, .popular-ingredients p {
font-size: 1.1rem;
}
.tips-grid, .ingredients-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.tip-card, .ingredient-card {
max-width: 320px;
}
.tip-card img, .ingredient-card img {
height: 240px;
}
.tip-card-content h4, .ingredient-card-content h4 {
font-size: 18px;
}
.tip-card-content p, .ingredient-card-content p {
font-size: 1rem;
}
}
/* Filter Button and Dropdown Styling */
.recipe-filter {
position: relative;
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.filter-btn {
background-color: #fa8c28;
color: #fff;
padding: 12px 20px;
font-size: 1rem;
font-family: "Montserrat", sans-serif;
font-weight: 700;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
display: flex;
align-items: center;
gap: 8px;
}
.filter-btn:hover {
background-color: #e67b20;
}
.filter-btn i {
font-size: 1.2rem;
}
.filter-menu {
position: absolute;
top: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
background: white;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 15px;
z-index: 10000;
width: 300px;
max-width: 90%;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
transform: translateX(-50%) translateY(-10px);
}
.filter-menu.active {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.filter-menu select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
font-size: 1rem;
font-family: "Roboto", sans-serif;
border: 1px solid #d1d5db;
border-radius: 5px;
background: #fff;
color: #333;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.7rem center;
background-size: 1em;
}
.filter-menu select:last-child {
margin-bottom: 0;
}
.filter-menu select:focus {
outline: none;
border-color: #fa8c28;
box-shadow: 0 0 0 2px rgba(250, 140, 40, 0.2);
}
/* Center search icon */
.search-btn {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background-color: #fa8c28;
border: none;
border-radius: 20px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.search-btn:hover {
background-color: #e67b20;
}
.search-btn i.fas.fa-search {
font-size: 1.2rem;
color: #fff;
}
/* Style for Ask the Chef button */
.ask-chef-btn {
background-color: #fa8c28;
color: #fff;
padding: 12px;
font-size: 1rem;
font-family: "Montserrat", sans-serif;
font-weight: 700;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
text-align: center;
width: 100%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.ask-chef-btn:hover {
background-color: #e67b20;
}
/* Ensure filter menu is centered on mobile */
@media (max-width: 768px) {
.filter-menu {
width: 90%;
left: 50%;
transform: translateX(-50%);
}
}
/* Mobile-specific adjustments for the About section */
@media (max-width: 768px) {
.about-content {
flex-direction: column;
align-items: center;
gap: 15px; /* Reduced gap for tighter mobile layout */
padding: 0 10px; /* Ensure content doesn't touch edges */
}
.about-image {
max-width: 100%; /* Full width on mobile */
width: 100%; /* Ensure image scales to container */
}
.about-image img {
max-width: 250px; /* Smaller image size for mobile */
height: auto; /* Maintain aspect ratio */
margin: 0 auto; /* Center the image */
display: block; /* Prevent inline spacing issues */
}
.about-text {
text-align: center;
padding: 0 10px; /* Add padding to prevent text from touching edges */
}
.about-text h3 {
font-size: 20px; /* Slightly smaller heading for mobile */
margin-bottom: 10px; /* Reduced spacing */
}
.about-text p {
font-size: 0.9rem; /* Smaller paragraph text for readability */
max-width: 100%; /* Ensure text uses full width */
margin-bottom: 15px; /* Adjusted spacing */
}
.about-text .btn-primary {
font-size: 0.9rem; /* Smaller button text */
padding: 10px 20px; /* Adjusted button padding */
width: 100%; /* Full-width button on mobile */
max-width: 200px; /* Limit button width */
margin: 0 auto; /* Center the button */
}
}
@media (max-width: 576px) {
.about-content {
gap: 10px; /* Further reduce gap for very small screens */
}
.about-image img {
max-width: 200px; /* Even smaller image for very small screens */
}
.about-text h3 {
font-size: 18px; /* Smaller heading */
}
.about-text p {
font-size: 0.85rem; /* Slightly smaller text */
}
.about-text .btn-primary {
font-size: 0.85rem; /* Smaller button text */
padding: 8px 16px; /* Smaller button padding */
}
}