1162 lines
21 KiB
CSS
1162 lines
21 KiB
CSS
.main {
|
|
background-color: #f5e6d3;
|
|
color: var(--color-text-light);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.hero {
|
|
padding: 200px 0px;
|
|
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/inner-banners/catering-banner.webp');
|
|
background-size: cover;
|
|
background-position: center;
|
|
/* background-attachment: fixed; */
|
|
text-align: center;
|
|
}
|
|
|
|
.heroContent {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.heroTitle {
|
|
font-family: var(--font-playfair);
|
|
font-size: var(--hero-title-size);
|
|
color: #d3cab3;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.breadcrumb {
|
|
font-size: 1.2rem;
|
|
color: var(--color-paragraph);
|
|
font-family: var(--font-lato);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.breadcrumb a {
|
|
color: #d3cab3;
|
|
transition: color 0.3s;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb a:hover {
|
|
color: var(--color-gold);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.heroTitle {
|
|
font-size: 48px;
|
|
}
|
|
|
|
.hero {
|
|
padding: 150px 20px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
TOP SECTION - 3 CARDS
|
|
============================================ */
|
|
|
|
.topSection {
|
|
padding: 0px 20px 80px;
|
|
background-color: #f5e6d3;
|
|
}
|
|
|
|
.topContainer {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.topHeading {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.topLabel {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #8b7355;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
margin-bottom: 15px;
|
|
font-weight: 600;
|
|
font-family: var(--font-lato);
|
|
}
|
|
|
|
.sectionHeading1 {
|
|
padding: 80px 20px 40px;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.smallHeading1 {
|
|
font-size: var(--small-text-size);
|
|
color: var(--color-paragraph);
|
|
font-family: var(--font-lato);
|
|
font-weight: 600;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mainHeading1 {
|
|
font-family: var(--font-playfair);
|
|
font-size: var(--main-heading-size);
|
|
color: #5d4037;
|
|
line-height: 1.3;
|
|
font-weight: 700;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.description1 {
|
|
font-size: var(--body-size);
|
|
color: var(--color-paragraph);
|
|
line-height: 1.8;
|
|
font-family: var(--font-lato);
|
|
/* max-width: 800px; */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.sectionHeading3 {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.smallHeading3 {
|
|
font-size: var(--small-text-size);
|
|
color: var(--color-paragraph);
|
|
font-family: var(--font-lato);
|
|
font-weight: 600;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mainHeading3 {
|
|
font-family: var(--font-playfair);
|
|
font-size: var(--main-heading-size);
|
|
color: #5d4037;
|
|
line-height: 1.3;
|
|
font-weight: 700;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.description3 {
|
|
font-size: var(--body-size);
|
|
color: var(--color-paragraph);
|
|
line-height: 1.8;
|
|
font-family: var(--font-lato);
|
|
/* max-width: 800px; */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.topCardsGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 30px;
|
|
}
|
|
|
|
.topCard {
|
|
position: relative;
|
|
height: 450px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: transform 0.4s ease, box-shadow 0.4s ease;
|
|
}
|
|
|
|
.topCard:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.topCardImage {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.6s ease;
|
|
}
|
|
|
|
.topCard:hover .topCardImage {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.topCardOverlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
|
|
z-index: 1;
|
|
}
|
|
|
|
.topCardContent {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 40px;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.topCardTitle {
|
|
font-family: var(--font-playfair);
|
|
font-size: 36px;
|
|
color: #d3cab3;
|
|
font-weight: 700;
|
|
margin-bottom: 30px;
|
|
text-transform: capitalize;
|
|
font-style: italic;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.topCardButton {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 24px;
|
|
color: #2d2d2d;
|
|
}
|
|
|
|
.topCardButton:hover {
|
|
background-color: #d3cab3;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.topCardsGrid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.topTitle {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.topCardsGrid {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
.topCard {
|
|
height: 400px;
|
|
}
|
|
|
|
.topTitle {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.topCardTitle {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
WELCOME SECTION (WITH SLIDER)
|
|
============================================ */
|
|
|
|
.welcomeSection {
|
|
padding: 80px 20px;
|
|
background-color: #ffffff;
|
|
background-image: url('/images/about-us/guest-bg.webp');
|
|
}
|
|
|
|
.welcomeContainer {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 80px;
|
|
align-items: center;
|
|
}
|
|
|
|
.welcomeImagesWrapper {
|
|
position: relative;
|
|
height: 550px;
|
|
}
|
|
|
|
/* Slider Styles */
|
|
.sliderContainer {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.sliderWrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.sliderSlide {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
transition: opacity 0.8s ease-in-out;
|
|
z-index: 0;
|
|
}
|
|
|
|
.sliderSlideActive {
|
|
opacity: 1;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sliderSlide img {
|
|
transition: transform 0.6s ease;
|
|
}
|
|
|
|
.sliderContainer:hover .sliderSlideActive img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Navigation Arrows */
|
|
.sliderArrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background-color: rgba(211, 202, 179, 0.9);
|
|
border: 2px solid var(--color-border);
|
|
color: #5d4037;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.sliderArrow:hover {
|
|
background-color: var(--color-button);
|
|
color: #fff;
|
|
transform: translateY(-50%) scale(1.1);
|
|
}
|
|
|
|
.sliderArrowLeft {
|
|
left: 20px;
|
|
}
|
|
|
|
.sliderArrowRight {
|
|
right: 20px;
|
|
}
|
|
|
|
/* Slide Indicators */
|
|
.sliderIndicators {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.sliderIndicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
border: 2px solid var(--color-border);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
padding: 0;
|
|
}
|
|
|
|
.sliderIndicator:hover {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.sliderIndicatorActive {
|
|
background-color: var(--color-button);
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
.welcomeContent {
|
|
padding: 25px;
|
|
}
|
|
|
|
.welcomeLabel {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: #8b7355;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
font-family: var(--font-lato);
|
|
}
|
|
|
|
.welcomeTitle {
|
|
font-family: var(--font-playfair);
|
|
font-size: 52px;
|
|
color: #2d2d2d;
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.welcomeDivider {
|
|
margin-bottom: 35px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.welcomeDescription {
|
|
font-size: var(--body-size);
|
|
color: var(--color-paragraph);
|
|
line-height: 1.8;
|
|
font-family: var(--font-lato);
|
|
/* max-width: 800px; */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mainHeading {
|
|
font-family: var(--font-playfair);
|
|
font-size: var(--main-heading-size);
|
|
color: #5d4037;
|
|
line-height: 1.3;
|
|
font-weight: 700;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.smallHeading {
|
|
font-size: var(--small-text-size);
|
|
color: var(--color-paragraph);
|
|
font-family: var(--font-lato);
|
|
font-weight: 600;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mainHeadingSection {
|
|
font-family: var(--font-cinzel), serif;
|
|
color: var(--color-paragraph);
|
|
/* text-transform: uppercase; */
|
|
letter-spacing: 2px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.welcomeSignature {
|
|
text-align: left;
|
|
}
|
|
|
|
.welcomeSignatureLabel {
|
|
display: block;
|
|
font-size: 11px;
|
|
color: #8b7355;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 10px;
|
|
font-weight: 600;
|
|
font-family: var(--font-lato);
|
|
}
|
|
|
|
.welcomeSignatureName {
|
|
font-family: 'Dancing Script', cursive;
|
|
font-size: 48px;
|
|
color: #2d2d2d;
|
|
font-weight: 400;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.welcomeContainer {
|
|
grid-template-columns: 1fr;
|
|
gap: 60px;
|
|
}
|
|
|
|
.welcomeImagesWrapper {
|
|
height: 450px;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
order: 1;
|
|
}
|
|
|
|
.welcomeContent {
|
|
padding: 20px 0;
|
|
order: 2;
|
|
}
|
|
|
|
.sliderArrow {
|
|
width: 45px;
|
|
height: 45px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.sliderArrowLeft {
|
|
left: 15px;
|
|
}
|
|
|
|
.sliderArrowRight {
|
|
right: 15px;
|
|
}
|
|
|
|
.welcomeTitle {
|
|
font-size: 44px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.welcomeSection {
|
|
padding: 80px 15px;
|
|
}
|
|
|
|
.welcomeContainer {
|
|
gap: 40px;
|
|
}
|
|
|
|
.welcomeImagesWrapper {
|
|
height: 400px;
|
|
}
|
|
|
|
.sliderArrow {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.sliderArrowLeft {
|
|
left: 10px;
|
|
}
|
|
|
|
.sliderArrowRight {
|
|
right: 10px;
|
|
}
|
|
|
|
.sliderIndicators {
|
|
bottom: 15px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sliderIndicator {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.welcomeTitle {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.welcomeSignatureName {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.welcomeImagesWrapper {
|
|
height: 350px;
|
|
}
|
|
|
|
.sliderArrow {
|
|
width: 35px;
|
|
height: 35px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sliderArrowLeft {
|
|
left: 8px;
|
|
}
|
|
|
|
.sliderArrowRight {
|
|
right: 8px;
|
|
}
|
|
|
|
.sliderIndicators {
|
|
bottom: 12px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.sliderIndicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.welcomeTitle {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.welcomeDescription {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.welcomeSignatureName {
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
SERVING SECTION
|
|
============================================ */
|
|
|
|
.servingSection {
|
|
padding: 80px 20px;
|
|
background-color: #f5e6d3;
|
|
}
|
|
|
|
.servingContainer {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 80px;
|
|
align-items: center;
|
|
}
|
|
|
|
.servingContent {
|
|
padding: 40px;
|
|
}
|
|
|
|
.servingLabel {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #b8a88a;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
font-family: var(--font-lato);
|
|
}
|
|
|
|
.servingTitle {
|
|
font-family: var(--font-playfair);
|
|
font-size: 52px;
|
|
color: #ffffff;
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.servingDescription {
|
|
font-size: var(--body-size);
|
|
color: var(--color-paragraph);
|
|
line-height: 1.8;
|
|
font-family: var(--font-lato);
|
|
/* max-width: 800px; */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.servingSignature {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.servingSignatureName {
|
|
font-family: 'Dancing Script', cursive;
|
|
font-size: 56px;
|
|
color: #d3cab3;
|
|
font-weight: 400;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.servingSignatureTitle {
|
|
font-size: 15px;
|
|
color: #ffffff;
|
|
font-family: var(--font-lato);
|
|
}
|
|
|
|
.servingImagesWrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.servingImagesGrid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 20px;
|
|
height: 600px;
|
|
}
|
|
|
|
.servingImageLarge {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.servingImageSmallTop {
|
|
grid-column: 1;
|
|
grid-row: 1 / 3;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.servingImageSmallBottom {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.servingImageLarge img,
|
|
.servingImageSmallTop img,
|
|
.servingImageSmallBottom img {
|
|
transition: transform 0.6s ease;
|
|
}
|
|
|
|
.servingImagesGrid:hover .servingImageLarge img,
|
|
.servingImagesGrid:hover .servingImageSmallTop img,
|
|
.servingImagesGrid:hover .servingImageSmallBottom img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.servingContainer {
|
|
grid-template-columns: 1fr;
|
|
gap: 60px;
|
|
}
|
|
|
|
.servingImagesGrid {
|
|
height: 500px;
|
|
}
|
|
|
|
.servingTitle {
|
|
font-size: 44px;
|
|
}
|
|
|
|
.servingContent {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.servingSignatureName {
|
|
font-size: 48px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.servingSection {
|
|
padding: 80px 15px;
|
|
}
|
|
|
|
.servingContainer {
|
|
gap: 40px;
|
|
}
|
|
|
|
.servingImagesGrid {
|
|
height: 400px;
|
|
gap: 15px;
|
|
}
|
|
|
|
.servingTitle {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.servingDescription {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.servingSignatureName {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.servingSignatureTitle {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.servingImagesGrid {
|
|
height: 350px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.servingTitle {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.servingDescription {
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.servingSignatureName {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.servingSignatureTitle {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
STORY SECTION
|
|
============================================ */
|
|
|
|
.storySection {
|
|
padding: 200px 20px;
|
|
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/catering/bring-authentic.webp');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.storyContent {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.storyLabel {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #d3cab3;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
font-family: var(--font-lato);
|
|
}
|
|
|
|
.storyTitle {
|
|
font-family: var(--font-playfair);
|
|
font-size: 64px;
|
|
color: #d3cab3;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 50px;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.storydesc {
|
|
font-family: var(--font-playfair);
|
|
font-size: 32px;
|
|
color: #d3cab3;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 50px;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.storyButton {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 18px 40px;
|
|
background-color: #fff;
|
|
color: #2d2d2d;
|
|
border: none;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
cursor: pointer;
|
|
transition: all 0.4s ease;
|
|
font-family: var(--font-lato);
|
|
}
|
|
|
|
.storyButton:hover {
|
|
background-color: #d3cab3;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.storyButtonIcon {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background-color: #2d2d2d;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.storyButton:hover .storyButtonIcon {
|
|
background-color: #fff;
|
|
color: #2d2d2d;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.storySection {
|
|
padding: 150px 20px;
|
|
}
|
|
|
|
.storyTitle {
|
|
font-size: 42px;
|
|
}
|
|
|
|
.storyButton {
|
|
padding: 15px 30px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.storyTitle {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
ABOUT SECTION
|
|
============================================ */
|
|
|
|
.aboutSection {
|
|
padding: 80px 20px;
|
|
background-color: #f5e6d3;
|
|
}
|
|
|
|
.aboutContainer {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 80px;
|
|
align-items: center;
|
|
}
|
|
|
|
.aboutImagesWrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.aboutImagesGrid {
|
|
position: relative;
|
|
height: 600px;
|
|
display: block;
|
|
/* Changed from grid to allow absolute positioning of children */
|
|
}
|
|
|
|
.aboutImageLarge {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 65%;
|
|
height: 75%;
|
|
z-index: 1;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.aboutImageSmallTop {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 45%;
|
|
height: 45%;
|
|
z-index: 2;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
|
border: 5px solid #f5e6d3;
|
|
/* Match background color for separation */
|
|
}
|
|
|
|
.aboutImageSmallBottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 45%;
|
|
height: 45%;
|
|
z-index: 2;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
|
border: 5px solid #f5e6d3;
|
|
/* Match background color for separation */
|
|
}
|
|
|
|
.aboutImageLarge img,
|
|
.aboutImageSmallTop img,
|
|
.aboutImageSmallBottom img {
|
|
transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
.aboutImagesGrid:hover .aboutImageLarge img {
|
|
transform: translate(-0%, -0%) scale(1.05);
|
|
/* Maintain centering while scaling */
|
|
}
|
|
|
|
.aboutImagesGrid:hover .aboutImageSmallTop img,
|
|
.aboutImagesGrid:hover .aboutImageSmallBottom img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.aboutContent {
|
|
padding: 40px;
|
|
}
|
|
|
|
.aboutSpecials {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.aboutSpecialsList {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.aboutSpecialsItem {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
font-size: var(--body-size);
|
|
color: var(--color-paragraph);
|
|
font-family: var(--font-lato);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.aboutSpecialsIcon {
|
|
color: var(--color-button);
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.lastButton {
|
|
color: var(--color-paragraph);
|
|
font-family: var(--font-lato);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
background: none;
|
|
border: 2px solid #b07c4b;
|
|
margin-top: 1rem;
|
|
padding: 15px 40px;
|
|
font-size: 1.1rem;
|
|
text-decoration: none;
|
|
transition: all .3s;
|
|
display: inline-block;
|
|
}
|
|
|
|
.lastButton:hover {
|
|
background-color: #c49c5c;
|
|
color: #F5E6D3;
|
|
transform: translateY(-2px);
|
|
/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); */
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.aboutContainer {
|
|
grid-template-columns: 1fr;
|
|
gap: 60px;
|
|
}
|
|
|
|
.aboutImagesGrid {
|
|
height: 500px;
|
|
}
|
|
|
|
.aboutImageLarge {
|
|
width: 70%;
|
|
height: 70%;
|
|
}
|
|
|
|
.aboutImageSmallTop,
|
|
.aboutImageSmallBottom {
|
|
width: 40%;
|
|
height: 40%;
|
|
}
|
|
|
|
.aboutContent {
|
|
padding: 20px 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.aboutSection {
|
|
padding: 80px 15px;
|
|
}
|
|
|
|
.aboutContainer {
|
|
gap: 40px;
|
|
}
|
|
|
|
.aboutImagesGrid {
|
|
height: 400px;
|
|
gap: 15px;
|
|
}
|
|
|
|
.aboutSpecialsItem {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.aboutImagesGrid {
|
|
height: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto auto;
|
|
gap: 15px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.aboutImageLarge {
|
|
position: relative;
|
|
top: auto;
|
|
left: auto;
|
|
transform: none;
|
|
width: 100%;
|
|
height: 300px;
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.aboutImageSmallTop {
|
|
position: relative;
|
|
top: auto;
|
|
right: auto;
|
|
width: 100%;
|
|
height: 200px;
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
border-radius: 15px;
|
|
border: none;
|
|
}
|
|
|
|
.aboutImageSmallBottom {
|
|
position: relative;
|
|
bottom: auto;
|
|
left: auto;
|
|
width: 100%;
|
|
height: 200px;
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
border-radius: 15px;
|
|
border: none;
|
|
}
|
|
|
|
.aboutImagesGrid:hover .aboutImageLarge img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.aboutSpecialsItem {
|
|
font-size: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
} |