Shine's Company - Drinks Station
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Dark Theme Palette */
--night-sky: #0a0d14;
--midnight-blue: #10141f;
--slate-gray: #2c3140;
--light-slate: #b0c4de;
--moonlight: #e6f1ff;
--bright-moon: #f5f5f5;
--accent-gold: #d4af37;
--accent-copper: #b87333;
--accent-warm: #deb887;
--glass-primary: rgba(44, 49, 64, 0.4);
--glass-secondary: rgba(44, 49, 64, 0.2);
--shadow-soft: rgba(0, 0, 0, 0.5);
--shadow-deep: rgba(0, 0, 0, 0.7);
--glow-gold: rgba(212, 175, 55, 0.25);
--glow-light: rgba(230, 241, 255, 0.1);
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background:
radial-gradient(ellipse at top left, rgba(30, 35, 48, 1) 0%, transparent 50%),
radial-gradient(ellipse at top right, rgba(44, 49, 64, 1) 0%, transparent 50%),
linear-gradient(135deg, var(--night-sky) 0%, var(--midnight-blue) 100%);
color: var(--light-slate);
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
/* Enhanced dark texture overlay */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 25% 25%, rgba(176, 196, 222, 0.04) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e6f1ff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
z-index: -1;
}
/* Advanced Liquid Glass Effect */
.liquid-glass {
position: relative;
background: linear-gradient(135deg,
rgba(44, 49, 64, 0.5) 0%,
rgba(44, 49, 64, 0.3) 50%,
rgba(44, 49, 64, 0.5) 100%);
backdrop-filter: blur(20px) saturate(1.3);
border: 1px solid rgba(176, 196, 222, 0.2);
border-radius: 24px;
overflow: hidden;
box-shadow:
0 8px 32px var(--shadow-deep),
0 2px 8px var(--glow-light),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.liquid-glass::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(230, 241, 255, 0.2) 0%,
rgba(230, 241, 255, 0.1) 30%,
transparent 70%);
border-radius: inherit;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.liquid-glass:hover::before {
opacity: 1;
}
/* Premium Liquid Glass */
.liquid-glass-premium {
position: relative;
background: linear-gradient(145deg,
rgba(44, 49, 64, 0.6) 0%,
rgba(44, 49, 64, 0.4) 50%,
rgba(44, 49, 64, 0.6) 100%);
backdrop-filter: blur(30px) saturate(1.4) brightness(1.1);
border: 2px solid;
border-image: linear-gradient(145deg,
rgba(255, 255, 255, 0.4) 0%,
rgba(212, 175, 55, 0.4) 50%,
rgba(255, 255, 255, 0.4) 100%) 1;
border-radius: 28px;
overflow: hidden;
box-shadow:
0 12px 40px var(--shadow-deep),
0 4px 12px var(--glow-gold),
inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
}
.liquid-glass-premium::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(255, 255, 255, 0.3) 0%,
rgba(212, 175, 55, 0.3) 20%,
transparent 80%);
border-radius: inherit;
opacity: 0;
transition: all 0.4s ease;
pointer-events: none;
}
.liquid-glass-premium:hover {
transform: translateY(-8px) rotateX(5deg) scale(1.02);
box-shadow:
0 20px 60px var(--shadow-deep),
0 8px 20px var(--glow-gold),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.liquid-glass-premium:hover::before {
opacity: 1;
}
/* Header */
.header {
position: fixed;
top: 0;
width: 100%;
background: linear-gradient(135deg,
rgba(16, 20, 31, 0.85) 0%,
rgba(10, 13, 20, 0.8) 100%);
backdrop-filter: blur(25px) saturate(1.2);
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
z-index: 1000;
transition: all 0.4s ease;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.header.header--hidden {
transform: translateY(-100%);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem 2.5rem;
max-width: 1600px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
}
.logo-img {
width: 120px;
height: auto;
transition: transform 0.3s ease;
}
.logo-img:hover {
transform: scale(1.05);
}
.nav-links {
display: flex;
list-style: none;
gap: 3rem;
}
.nav-links a {
color: var(--light-slate);
text-decoration: none;
font-weight: 500;
font-size: 1.05rem;
transition: all 0.4s ease;
position: relative;
padding: 0.8rem 0;
letter-spacing: 0.02em;
}
.nav-links a:hover {
color: var(--accent-gold);
transform: translateY(-2px);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(45deg, var(--accent-copper), var(--accent-gold));
transition: all 0.4s ease;
border-radius: 2px;
transform: translateX(-50%);
}
.nav-links a:hover::after {
width: 100%;
}
.mobile-menu {
display: none;
font-size: 1.6rem;
color: var(--bright-moon);
cursor: pointer;
transition: all 0.3s ease;
z-index: 1001;
}
.mobile-menu:hover {
color: var(--accent-gold);
transform: scale(1.1);
}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.menu-overlay.active {
opacity: 1;
visibility: visible;
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
z-index: 0;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 13, 20, 0.7);
z-index: 1;
}
.hero-content {
max-width: 1000px;
z-index: 2;
animation: hero-entrance 1.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.hero-badge {
display: inline-block;
padding: 0.8rem 2rem;
background: var(--glass-secondary);
backdrop-filter: blur(15px);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 50px;
color: var(--accent-gold);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 2rem;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}
.hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(3.5rem, 10vw, 8rem);
font-weight: 400;
margin-bottom: 1.5rem;
color: var(--bright-moon);
letter-spacing: -0.03em;
line-height: 0.9;
}
.hero-subtitle {
font-family: 'Playfair Display', serif;
font-size: clamp(1.4rem, 4vw, 2.5rem);
font-weight: 300;
font-style: italic;
margin-bottom: 2rem;
color: var(--accent-gold);
letter-spacing: 0.02em;
}
.hero p {
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
margin-bottom: 3.5rem;
color: var(--light-slate);
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.8;
font-weight: 400;
}
.cta-button {
background: linear-gradient(135deg, var(--accent-copper) 0%, var(--accent-gold) 100%);
color: white;
padding: 20px 45px;
border: none;
border-radius: 60px;
font-size: 1.15rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 10px 30px rgba(184, 115, 51, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
letter-spacing: 0.02em;
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.8s ease;
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:hover {
transform: translateY(-5px) scale(1.05);
box-shadow:
0 20px 50px rgba(184, 115, 51, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Menu Section */
.menu {
padding: 150px 2.5rem;
max-width: 1600px;
margin: 0 auto;
position: relative;
}
.section-title {
text-align: center;
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 8vw, 5.5rem);
font-weight: 400;
margin-bottom: 1.5rem;
color: var(--bright-moon);
letter-spacing: -0.02em;
line-height: 1.1;
}
.section-subtitle {
text-align: center;
font-size: 1.3rem;
color: var(--light-slate);
margin-bottom: 5rem;
font-style: italic;
font-weight: 300;
letter-spacing: 0.01em;
}
.menu-categories {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 5rem;
flex-wrap: wrap;
}
.category-btn {
padding: 15px 35px;
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 40px;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.05em;
position: relative;
overflow: hidden;
color: var(--light-slate);
background: linear-gradient(135deg,
rgba(44, 49, 64, 0.6) 0%,
rgba(44, 49, 64, 0.3) 100%);
backdrop-filter: blur(15px);
box-shadow: 0 4px 15px var(--glow-light);
}
.category-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--accent-copper), var(--accent-gold));
transition: left 0.5s ease;
z-index: -1;
}
.category-btn.active::before,
.category-btn:hover::before {
left: 0;
}
.category-btn.active,
.category-btn:hover {
color: white;
border-color: transparent;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(184, 115, 51, 0.4);
}
.drinks-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
align-items: stretch;
}
/* CORRECTED DRINK CARD STYLES */
.drink-card {
padding: 3rem 2.5rem;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
transform-style: preserve-3d;
overflow: hidden;
}
.drink-card .card-content {
position: relative;
z-index: 2;
flex-grow: 1;
display: flex;
flex-direction: column;
background: transparent; /* Allows background image to be seen */
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.drink-icon {
font-size: 4rem;
margin-bottom: 2rem;
text-align: center;
transition: all 0.4s ease;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}
.drink-card-background-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
width: auto;
max-width: 95%;
object-fit: contain;
z-index: 1;
opacity: 0.1;
filter: blur(3px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.drink-card:hover .drink-card-background-image {
z-index: 3;
opacity: 1;
filter: blur(0);
transform: translate(-50%, -50%) scale(1.1);
}
.drink-card:hover .card-content {
opacity: 0.1; /* Fade text on hover to showcase image */
}
.drink-card:hover .drink-icon {
transform: scale(1.1) rotateY(10deg);
filter: brightness(1.2);
}
.drink-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 1rem;
color: var(--bright-moon);
letter-spacing: -0.01em;
}
.drink-card p {
color: var(--light-slate);
margin-bottom: 2rem;
line-height: 1.8;
font-size: 1.05rem;
font-weight: 400;
flex-grow: 1;
}
.drink-price {
font-size: 1.6rem;
font-weight: 700;
color: var(--accent-gold);
display: flex;
align-items: center;
gap: 1rem;
font-family: 'Playfair Display', serif;
}
.drink-price::before {
content: '';
width: 40px;
height: 2px;
background: linear-gradient(45deg, var(--accent-copper), var(--accent-gold));
border-radius: 1px;
}
.view-recipe {
margin-top: 1rem;
color: var(--accent-warm);
font-weight: 600;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
opacity: 0.8;
}
.drink-card:hover .view-recipe {
opacity: 1;
color: var(--accent-gold);
}
/* --- 3D CAROUSEL GALLERY STYLES (Desktop) --- */
.mobile-slider {
display: none;
}
#gallery {
padding: 150px 0;
overflow: hidden;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.carousel {
position: relative;
width: 100%;
height: 70vh;
min-height: 600px;
perspective: 2000px;
transform-style: preserve-3d;
}
.carousel__stage {
position: absolute;
top: 50%;
left: 50%;
width: 1100px;
height: 600px;
transform-style: preserve-3d;
transform: translate(-50%, -50%) translateZ(-300px);
display: flex;
gap: 2rem;
align-items: center;
justify-content: center;
}
.spinner {
position: relative;
width: 540px;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.js-spin-fwd .spinner--left { transform: rotateX(-90deg); }
.js-spin-bwd .spinner--left { transform: rotateX(90deg); }
.js-spin-fwd .spinner--right { transform: rotateX(90deg); }
.js-spin-bwd .spinner--right { transform: rotateX(-90deg); }
.spinner__face {
position: absolute;
width: 100%;
height: 100%;
display: none;
backface-visibility: hidden;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 10px 40px var(--shadow-deep);
}
.spinner__face img {
width: 100%;
height: 100%;
object-fit: cover;
}
.spinner--left .spinner__face.js-active { display: block; transform: translateZ(300px); }
.spinner--left .spinner__face.js-next { display: block; transform: rotateX(90deg) translateZ(300px); }
.js-spin-bwd .spinner--left .spinner__face.js-next { transform: rotateX(-90deg) translateZ(300px); }
.spinner--right .spinner__face.js-active { display: block; transform: translateZ(300px); }
.spinner--right .spinner__face.js-next { display: block; transform: rotateX(-90deg) translateZ(300px); }
.js-spin-bwd .spinner--right .spinner__face.js-next { transform: rotateX(90deg) translateZ(300px); }
.content__left, .content__right {
width: 100%;
height: 100%;
}
.content__right img {
cursor: pointer;
}
.carousel__control {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 5%;
z-index: 10;
}
.carousel__control button {
width: 60px;
height: 60px;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 1.5rem;
color: var(--bright-moon);
transition: all 0.4s;
background: linear-gradient(145deg, rgba(44, 49, 64, 0.8) 0%, rgba(44, 49, 64, 0.6) 100%);
backdrop-filter: blur(25px);
border: 2px solid rgba(212, 175, 55, 0.4);
box-shadow: 0 8px 25px var(--shadow-deep), 0 2px 8px var(--glow-gold);
}
.carousel__control button:hover { transform: scale(1.1); color: var(--accent-gold); }
.js-transitions-disabled * { transition: none !important; }
/* Image Lightbox */
.lightbox {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 13, 20, 0.9);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.lightbox.active {
opacity: 1;
visibility: visible;
}
.lightbox__content {
margin: auto;
display: block;
max-width: 80%;
max-height: 85vh;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.7);
animation: zoomIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.lightbox__close {
position: absolute;
top: 30px;
right: 45px;
color: var(--bright-moon);
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
.lightbox__close:hover {
color: var(--accent-gold);
transform: scale(1.1);
}
@keyframes zoomIn {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* Recipe Modal */
.recipe-modal {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(10, 13, 20, 0.8);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.recipe-modal.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background: linear-gradient(135deg,
rgba(26, 30, 41, 0.95) 0%,
rgba(16, 20, 31, 0.98) 100%);
backdrop-filter: blur(30px);
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 30px;
padding: 3rem;
max-width: 800px;
max-height: 90vh;
overflow-y: auto;
margin: 2rem;
transform: scale(0.8) translateY(50px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
position: relative;
}
.recipe-modal.active .modal-content {
transform: scale(1) translateY(0);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
}
.modal-title {
display: flex;
align-items: center;
gap: 1rem;
}
.modal-drink-icon {
font-size: 3rem;
height: 48px;
width: 48px;
display: flex;
justify-content: center;
align-items: center;
}
.modal-drink-icon img {
height: 100%;
width: auto;
object-fit: contain;
}
.modal-drink-name {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
font-weight: 500;
color: var(--bright-moon);
margin: 0;
}
.modal-drink-price {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--accent-gold);
}
.modal-drink-image {
width: 100%;
height: auto;
max-height: 400px;
object-fit: cover;
border-radius: 16px;
margin-bottom: 2rem;
border: 1px solid rgba(212, 175, 55, 0.3);
}
.close-modal {
background: none;
border: none;
font-size: 2rem;
color: var(--light-slate);
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.3s ease;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.close-modal:hover {
background: rgba(184, 115, 51, 0.1);
color: var(--accent-gold);
transform: scale(1.1);
}
.modal-description {
font-size: 1.1rem;
color: var(--light-slate);
line-height: 1.7;
margin-bottom: 2.5rem;
}
.recipe-section h4 {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
font-weight: 600;
color: var(--accent-gold);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.recipe-section h4::before {
content: '';
width: 30px;
height: 2px;
background: linear-gradient(45deg, var(--accent-copper), var(--accent-gold));
border-radius: 1px;
}
.recipe-ingredients ul {
list-style: none;
padding: 0;
}
.recipe-ingredients li {
padding: 0.5rem 0;
color: var(--light-slate);
font-size: 1.05rem;
position: relative;
padding-left: 2rem;
}
.recipe-ingredients li::before {
content: '🥄';
position: absolute;
left: 0;
top: 0.5rem;
}
.recipe-steps ol {
padding-left: 1.5rem;
}
.recipe-steps li {
padding: 0.8rem 0;
color: var(--light-slate);
font-size: 1.05rem;
line-height: 1.6;
}
.recipe-steps li::marker {
color: var(--accent-gold);
font-weight: 600;
}
.recipe-history {
background: rgba(212, 175, 55, 0.1);
padding: 1.5rem;
border-radius: 15px;
border: 1px solid rgba(212, 175, 55, 0.2);
}
.recipe-history p {
margin: 0;
font-style: italic;
color: var(--light-slate);
}
/* About Section */
.about {
padding: 150px 2.5rem;
background:
linear-gradient(135deg, rgba(16, 20, 31, 0.9) 0%, rgba(10, 13, 20, 0.95) 100%);
position: relative;
overflow: hidden;
}
.about-content {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 6rem;
align-items: center;
}
.about-text h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 400;
margin-bottom: 2.5rem;
color: var(--bright-moon);
}
.about-text p {
font-size: 1.15rem;
line-height: 1.9;
margin-bottom: 2rem;
color: var(--light-slate);
}
.about-highlight {
padding: 2.5rem;
font-style: italic;
color: var(--accent-warm);
}
.about-visual {
position: relative;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.about-video {
width: clamp(250px, 60vw, 400px);
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: cover;
z-index: 2;
position: relative;
box-shadow: 0 0 40px var(--glow-gold);
}
/* Gastronomy Section */
.gastronomy {
padding: 150px 2.5rem;
max-width: 1600px;
margin: 0 auto;
}
.food-menu-container {
max-width: 900px;
margin: 5rem auto 0;
}
.food-menu-container h3 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 500;
color: var(--bright-moon);
margin-bottom: 2.5rem;
position: relative;
padding-bottom: 1rem;
text-align: center;
}
.food-menu-container h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--accent-copper), var(--accent-gold));
border-radius: 2px;
}
.food-menu-category {
margin-bottom: 3rem;
}
.food-menu-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 1.2rem 0;
border-bottom: 1px solid rgba(176, 196, 222, 0.1);
}
.food-menu-item-details p {
margin: 0;
color: var(--bright-moon);
font-weight: 500;
font-size: 1.1rem;
}
.food-menu-item-details span {
font-size: 0.9rem;
font-style: italic;
color: var(--light-slate);
opacity: 0.8;
}
.food-menu-item-price {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
font-weight: 600;
color: var(--accent-gold);
white-space: nowrap;
padding-left: 1.5rem;
}
/* --- Pairing Gallery Section --- */
.pairing-gallery-container {
font-family: "Montserrat", sans-serif;
color: var(--light-slate);
}
.pairing-gallery-container h2, .pairing-gallery-container h3, .pairing-gallery-container h4, .pairing-gallery-container h5, .pairing-gallery-container h6 {
margin: 0;
}
.pairing-gallery-container .container {
--container-padding-horizontal: 32px;
position: relative;
padding-inline: var(--container-padding-horizontal);
display: grid;
place-items: center;
/* height: 100%; Se elimina esta línea para que el contenedor se ajuste a su contenido */
margin-top: 5rem;
}
.pairing-gallery-container .carousel {
pointer-events: none;
position: relative; /* Se cambia de 'absolute' a 'relative' para corregir la superposición */
padding-block-start: 67px;
padding-block-end: max(24px, calc(29px + 1.88rem));
perspective: 100px;
width: 100%;
}
@media (max-width: 568px) {
.pairing-gallery-container .carousel {
padding-block-end: 52px;
}
}
.pairing-gallery-container .carousel__wrapper {
position: relative;
display: flex;
justify-content: center;
height: 61.2vh;
min-height: 400px;
}
.pairing-gallery-container .carousel .item {
position: absolute;
max-width: 418px;
height: 100%;
margin-inline: var(--container-padding-horizontal);
opacity: 0;
will-change: transform, opacity;
animation: carousel-animate 27s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@media (max-width: 568px) {
.pairing-gallery-container .carousel .item {
margin-inline: calc(var(--container-padding-horizontal) + 1px);
}
}
.pairing-gallery-container .carousel .item:nth-child(1) { animation-delay: calc(3.8571428571s * -1); }
.pairing-gallery-container .carousel .item:nth-child(2) { animation-delay: calc(3.8571428571s * 0); }
.pairing-gallery-container .carousel .item:nth-child(3) { animation-delay: calc(3.8571428571s * 1); }
.pairing-gallery-container .carousel .item:nth-child(4) { animation-delay: calc(3.8571428571s * 2); }
.pairing-gallery-container .carousel .item:nth-child(5) { animation-delay: calc(3.8571428571s * 3); }
.pairing-gallery-container .carousel .item:nth-child(6) { animation-delay: calc(3.8571428571s * 4); }
.pairing-gallery-container .carousel .item:nth-child(7) { animation-delay: calc(3.8571428571s * 5); }
.pairing-gallery-container .carousel img {
max-width: 100%;
object-fit: cover;
height: 100%;
}
@keyframes carousel-animate {
0% {
visibility: hidden;
opacity: 0;
transform: translateX(200%) scale(0.7);
}
3%,
14.2857% {
visibility: visible;
opacity: 0.8;
transform: translateX(100%) scale(0.9);
}
17.2857%,
28.5714% {
visibility: visible;
opacity: 1;
transform: translateX(0) scale(1);
}
31.5714%,
42.8571% {
visibility: visible;
opacity: 0.8;
transform: translateX(-100%) scale(0.9);
}
45.8571% {
visibility: visible;
opacity: 0;
transform: translateX(-200%) scale(0.9);
}
100% {
visibility: hidden;
opacity: 0;
transform: translateX(-200%) scale(0.7);
}
}
.pairing-gallery-container .instagram {
--padding-horizontal: 16px;
--border: 1px solid var(--accent-gold);
max-width: 420px;
width: 100%;
border: var(--border);
border-radius: 20px;
background: rgba(10, 13, 20, 0.7);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.pairing-gallery-container .instagram__header {
padding-block: 12px;
border-bottom: var(--border);
}
.pairing-gallery-container .instagram__header figure {
padding-block: 0;
padding-inline: var(--padding-horizontal);
margin: 0;
display: flex;
align-items: center;
}
.pairing-gallery-container .instagram__header figure img {
border-radius: 50%;
object-fit: cover;
border: var(--border);
margin-inline-end: 8px;
width: 32px;
height: 32px;
}
.pairing-gallery-container .instagram__header figcaption {
font-weight: 600;
color: var(--bright-moon);
}
.pairing-gallery-container .instagram__media {
display: flex;
border-bottom: var(--border);
}
.pairing-gallery-container .instagram__media .img {
max-width: 100%;
height: 61.2vh;
min-height: 400px;
}
.pairing-mobile-slider { display: none; }
/* Contact Section */
.contact {
padding: 150px 2.5rem;
max-width: 1600px;
margin: 0 auto;
}
.contact-grid-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: stretch;
margin-top: 5rem;
justify-content: center;
}
/* CORRECCIÓN 1: Estilos para las tarjetas de contacto en escritorio */
.contact-content {
display: grid;
/* Se define explícitamente una grilla de 3 columnas para la vista de escritorio */
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
/* Se aumenta el ancho máximo para que las 3 tarjetas quepan cómodamente en una fila */
max-width: 1200px;
margin: 0 auto;
}
.contact-card {
padding: 3rem 2.5rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-icon {
font-size: 3.5rem;
margin-bottom: 2rem;
color: var(--accent-gold);
transition: all 0.4s ease;
}
.contact-card:hover .contact-icon {
transform: scale(1.1) rotateY(15deg);
}
.contact-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 500;
margin-bottom: 1.5rem;
color: var(--bright-moon);
}
.contact-card p {
color: var(--light-slate);
}
/* Footer */
.footer {
background: linear-gradient(135deg, #05060a 0%, var(--night-sky) 100%);
color: var(--light-slate);
padding: 4rem 2.5rem 3rem;
text-align: center;
position: relative;
overflow: hidden;
}
.social-links {
display: flex;
justify-content: center;
gap: 2.5rem;
margin-bottom: 2.5rem;
flex-wrap: wrap;
}
.social-links a {
color: var(--light-slate);
font-size: 1.8rem;
transition: all 0.4s ease;
padding: 15px;
border-radius: 50%;
background: rgba(44, 49, 64, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(176, 196, 222, 0.2);
}
.social-links a:hover {
color: var(--accent-gold);
background: rgba(212, 175, 55, 0.2);
transform: translateY(-5px) scale(1.1);
box-shadow: 0 10px 25px var(--glow-gold);
}
/* Animations */
@keyframes hero-entrance {
from { opacity: 0; transform: translateY(80px); }
to { opacity: 1; transform: translateY(0); }
}
/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 1024px) {
.nav {
padding: 0.5rem 1.5rem;
}
.logo-img {
width: 100px;
}
.nav-links {
position: fixed;
top: 0;
right: -320px;
width: 300px;
height: 100vh;
background: linear-gradient(135deg, rgba(10, 13, 20, 0.95) 0%, rgba(26, 30, 41, 0.98) 100%);
backdrop-filter: blur(30px) saturate(1.2);
box-shadow: -10px 0 30px rgba(0,0,0,0.5);
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
gap: 1.5rem;
padding: 100px 40px;
border-left: 1px solid rgba(212, 175, 55, 0.2);
z-index: 1000;
}
.nav-links.active {
right: 0;
}
.nav-links a {
font-size: 1.2rem;
}
.mobile-menu {
display: block;
}
.about-content {
grid-template-columns: 1fr;
gap: 4rem;
text-align: center;
}
.about-visual {
height: 350px;
}
.contact-grid-wrapper {
grid-template-columns: 1fr;
}
/* Para tabletas, permitimos que las tarjetas de contacto se ajusten automáticamente */
.contact-content {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
max-width: 90%;
}
}
@media (max-width: 900px) {
#gallery {
height: auto;
padding-top: 120px;
padding-bottom: 120px;
overflow: visible;
}
.carousel {
display: none; /* Hide desktop carousel */
}
.mobile-slider {
display: block; /* Show mobile slider */
}
.mobile-slider {
background-color: transparent;
box-shadow: none;
width: 90%;
max-width: 450px;
margin: 0 auto;
padding: 0;
position: relative;
aspect-ratio: 3 / 4;
}
.mobile-slider:before, .mobile-slider:after {
display: none; /* Hide frame and mat */
}
.mobile-slider li {
list-style: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* position: relative; */ /* Se elimina esta línea que entraba en conflicto */
}
.mobile-slider input {
display: none;
}
.mobile-slider img {
height: 100%;
width: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .5s;
visibility: hidden;
border-radius: 24px;
}
.mobile-slider li input:checked ~ img {
opacity: 1;
visibility: visible;
z-index: 1;
}
/* Navigation */
.mobile-slider label {
background-color: #111;
background-image: linear-gradient(transparent, hsla(0,0%,0%,.25));
border: .2em solid transparent;
bottom: 1em;
border-radius: 100%;
cursor: pointer;
display: block;
height: .8em;
opacity: 0;
position: absolute;
transition: .25s;
width: .8em;
visibility: hidden;
z-index: 10;
}
.mobile-slider label:after {
border-radius: 100%;
bottom: -.2em;
box-shadow: inset 0 0 0 .2em #111,
inset 0 2px 2px #000,
0 1px 1px hsla(0,0%,100%,.25);
content: '';
left: -.2em;
position: absolute;
right: -.2em;
top: -.2em;
}
.mobile-slider:hover label {
opacity: 1;
visibility: visible;
}
.mobile-slider input:checked + label {
background-color: var(--accent-gold);
}
/* Position labels for Creaciones Gallery */
.mobile-slider li:nth-child(1) label { left: calc(50% - 6.0em); }
.mobile-slider li:nth-child(2) label { left: calc(50% - 4.8em); }
.mobile-slider li:nth-child(3) label { left: calc(50% - 3.6em); }
.mobile-slider li:nth-child(4) label { left: calc(50% - 2.4em); }
.mobile-slider li:nth-child(5) label { left: calc(50% - 1.2em); }
.mobile-slider li:nth-child(6) label { left: calc(50% - 0em); }
.mobile-slider li:nth-child(7) label { left: calc(50% + 1.2em); }
.mobile-slider li:nth-child(8) label { left: calc(50% + 2.4em); }
.mobile-slider li:nth-child(9) label { left: calc(50% + 3.6em); }
.mobile-slider li:nth-child(10) label { left: calc(50% + 4.8em); }
.mobile-slider li:nth-child(11) label { left: calc(50% + 6.0em); }
/* ...and so on for all 16 */
/* Pairing Gallery Mobile */
.pairing-mobile-slider {
display: block;
margin-top: 3rem;
}
/* Se elimina el bloque .pairing-mobile-caption para que se comporte como la otra galería */
.pairing-mobile-slider li:nth-child(1) label { left: calc(50% - 3.6em); }
.pairing-mobile-slider li:nth-child(2) label { left: calc(50% - 2.4em); }
.pairing-mobile-slider li:nth-child(3) label { left: calc(50% - 1.2em); }
.pairing-mobile-slider li:nth-child(4) label { left: calc(50% - 0em); }
.pairing-mobile-slider li:nth-child(5) label { left: calc(50% + 1.2em); }
.pairing-mobile-slider li:nth-child(6) label { left: calc(50% + 2.4em); }
.pairing-mobile-slider li:nth-child(7) label { left: calc(50% + 3.6em); }
}
@media (max-width: 768px) {
.section-title {
font-size: clamp(2.8rem, 10vw, 4rem);
}
.menu, .about, .contact, .gastronomy {
padding: 120px 1.5rem;
}
.footer {
padding: 3rem 1.5rem;
}
.hero p {
padding: 0 1rem;
}
.drinks-grid {
grid-template-columns: 1fr;
}
.drink-card {
padding: 2.5rem 2rem;
}
.modal-content {
padding: 2.5rem 1.5rem;
margin: 1rem;
}
.about-content {
gap: 3rem;
}
.social-links {
gap: 1.5rem;
}
.social-links a {
font-size: 1.5rem;
padding: 12px;
}
.food-menu-item {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.food-menu-item-price {
padding-left: 0;
}
.contact-content {
/* Para móviles, una sola columna es mejor */
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero-content {
padding: 0 1rem;
}
.cta-button {
padding: 18px 35px;
font-size: 1rem;
}
}
✨ Experiencia Mixológica Premium
Shine's Company
Drinks Station
Donde cada cóctel es una sinfonía de sabores cuidadosamente orquestada, creada con los destilados más selectos y la maestría de una verdadera artista de la mixología.
Descubrir Nuestra Carta
Galería de Creaciones
Momentos capturados de nuestra arte en la mixología
El Arte de la Mixología Elevada
En Shine's Company, cada cóctel trasciende la definición de una simple bebida para convertirse en una experiencia sensorial meticulosamente orquestada. Nuestra filosofía se fundamenta en la selección de los ingredientes más excepcionales del mundo, técnicas tradicionales perfeccionadas a lo largo de generaciones y un toque de innovación contemporánea.
Trabajamos exclusivamente con destilados premium de edición limitada, frutas de temporada seleccionadas personalmente en mercados especializados, y especias aromáticas importadas directamente de sus regiones de origen. Cada preparación es una ceremonia que honra tanto la tradición milenaria como la creatividad vanguardista.
"La perfección no es un accidente, sino el resultado inevitable de la excelencia aplicada consistentemente en cada detalle, por mínimo que parezca."
Gastronomía & Maridajes
Sabores que complementan la experiencia
![]()
Descripción del cóctel aquí...
×
![]()
document.addEventListener('DOMContentLoaded', () => {
// --- 3D CAROUSEL LOGIC ---
let activeIndex = 0;
let limit = 0;
let disabled = false;
const SPIN_FORWARD_CLASS = 'js-spin-fwd';
const SPIN_BACKWARD_CLASS = 'js-spin-bwd';
const DISABLE_TRANSITIONS_CLASS = 'js-transitions-disabled';
const SPIN_DUR = 1000;
const $stage = document.querySelector('.carousel__stage');
const setIndexes = () => {
const faces = document.querySelectorAll('.spinner--left .spinner__face');
faces.forEach((face, i) => {
face.setAttribute('data-index', i);
document.querySelector(`.spinner--right .spinner__face:nth-child(${i + 1})`)?.setAttribute('data-index', i);
limit++;
});
document.querySelectorAll('.spinner__face[data-index="0"]').forEach(el => el.classList.add('js-active'));
};
const spin = (inc = 1) => {
if (disabled) return;
disabled = true;
const nextIndex = (activeIndex + inc + limit) % limit;
const $activeEls = document.querySelectorAll('.spinner__face.js-active');
const $nextEls = document.querySelectorAll(`.spinner__face[data-index="${nextIndex}"]`);
$nextEls.forEach(el => el.classList.add('js-next'));
if (inc > 0) {
$stage.classList.add(SPIN_FORWARD_CLASS);
} else {
$stage.classList.add(SPIN_BACKWARD_CLASS);
}
setTimeout(() => {
$activeEls.forEach(el => el.classList.remove('js-active'));
$nextEls.forEach(el => {
el.classList.remove('js-next');
el.classList.add('js-active');
});
$stage.classList.add(DISABLE_TRANSITIONS_CLASS);
$stage.classList.remove(SPIN_FORWARD_CLASS, SPIN_BACKWARD_CLASS);
document.querySelectorAll('.spinner').forEach(spinner => {
const activeFace = spinner.querySelector('.spinner__face.js-active');
if (activeFace) {
spinner.prepend(activeFace);
}
});
setTimeout(() => {
$stage.classList.remove(DISABLE_TRANSITIONS_CLASS);
disabled = false;
}, 100);
}, SPIN_DUR);
activeIndex = nextIndex;
};
const attachCarouselListeners = () => {
document.getElementById('carousel-prev-3d')?.addEventListener('click', () => spin(-1));
document.getElementById('carousel-next-3d')?.addEventListener('click', () => spin(1));
document.onkeyup = (e) => {
switch (e.keyCode) {
case 38: spin(-1); break; // Up arrow
case 40: spin(1); break; // Down arrow
}
};
let lastY = 0;
document.querySelector('.carousel')?.addEventListener('wheel', (e) => {
e.preventDefault();
if (Date.now() - lastY 0) spin(1);
else spin(-1);
});
};
if ($stage && window.innerWidth > 900) {
setIndexes();
attachCarouselListeners();
}
// --- GENERAL PAGE LOGIC ---
const mobileMenuBtn = document.querySelector('.mobile-menu');
const navLinks = document.querySelector('.nav-links');
const menuOverlay = document.querySelector('.menu-overlay');
function toggleMobileMenu() {
const icon = mobileMenuBtn.querySelector('i');
navLinks.classList.toggle('active');
menuOverlay.classList.toggle('active');
icon.classList.toggle('fa-bars');
icon.classList.toggle('fa-times');
document.body.style.overflow = navLinks.classList.contains('active') ? 'hidden' : '';
}
if (mobileMenuBtn) mobileMenuBtn.addEventListener('click', toggleMobileMenu);
if (menuOverlay) menuOverlay.addEventListener('click', toggleMobileMenu);
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (navLinks.classList.contains('active')) {
toggleMobileMenu();
}
// A small delay ensures the menu is closing before we calculate positions
setTimeout(() => {
if (targetId === "#home" || targetId === "#") {
window.scrollTo({ top: 0, behavior: 'smooth' });
return;
}
const target = document.querySelector(targetId);
if (target) {
const header = document.querySelector('.header');
const headerHeight = header ? header.offsetHeight : 0;
const targetPosition = target.offsetTop - headerHeight;
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
}
}, 100);
});
});
const categoryButtons = document.querySelectorAll('.category-btn');
categoryButtons.forEach(button => {
button.addEventListener('click', () => {
const category = button.dataset.category;
document.querySelectorAll('.drink-card').forEach(card => {
const isVisible = category === 'all' || card.dataset.category === category;
card.style.display = isVisible ? 'flex' : 'none';
});
categoryButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
});
});
const recipeModal = document.getElementById('recipeModal');
const closeModalBtn = document.getElementById('closeModalBtn');
function openDrinkModal(cardElement) {
if(!recipeModal) return;
const cardContent = cardElement.querySelector('.card-content');
const drinkData = cardElement.querySelector('.drink-data');
const imageSrc = cardElement.dataset.imageSrc;
const modalIconContainer = recipeModal.querySelector('#modalDrinkIcon');
const modalImage = recipeModal.querySelector('#modalDrinkImage');
const iconElement = cardElement.querySelector('.drink-icon');
// Clear previous icon and content
modalIconContainer.innerHTML = '';
// Append the actual icon element (text or img)
if (iconElement) { // For cards with emojis
modalIconContainer.textContent = iconElement.textContent;
} else { // For cards with background images
const backImage = cardElement.querySelector('.drink-card-background-image');
if(backImage) {
const imgClone = backImage.cloneNode(true);
imgClone.style = ''; // Reset inline styles
modalIconContainer.appendChild(imgClone);
}
}
recipeModal.querySelector('#modalDrinkName').textContent = cardContent.querySelector('h3').textContent;
recipeModal.querySelector('#modalDescription').textContent = cardContent.querySelector('p').textContent;
recipeModal.querySelector('#modalDrinkPrice').textContent = cardContent.querySelector('.drink-price').textContent;
if (imageSrc) {
modalImage.src = imageSrc;
modalImage.style.display = 'block';
} else {
modalImage.style.display = 'none';
}
if (drinkData) {
recipeModal.querySelector('#modalIngredients').innerHTML = drinkData.querySelector('.recipe-ingredients')?.innerHTML || '';
recipeModal.querySelector('#modalSteps').innerHTML = drinkData.querySelector('.recipe-steps')?.innerHTML || '';
recipeModal.querySelector('#modalHistory').innerHTML = drinkData.querySelector('.recipe-history')?.innerHTML || '';
}
recipeModal.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeModal() {
if(!recipeModal) return;
recipeModal.classList.remove('active');
document.body.style.overflow = '';
}
document.querySelectorAll('.drink-card').forEach(card => card.addEventListener('click', () => openDrinkModal(card)));
closeModalBtn?.addEventListener('click', closeModal);
recipeModal?.addEventListener('click', (e) => { if (e.target === recipeModal) closeModal(); });
// Lightbox Logic
const lightbox = document.getElementById('imageLightbox');
const lightboxImg = document.getElementById('lightboxImg');
const closeLightboxBtn = lightbox?.querySelector('.lightbox__close');
const closeLightBoxFunc = () => {
if (lightbox) {
lightbox.classList.remove('active');
}
};
document.querySelectorAll('.spinner__face img, .food-gallery-item img').forEach(img => {
img.style.cursor = 'pointer';
img.addEventListener('click', (e) => {
e.stopPropagation();
if (lightbox && lightboxImg) {
lightboxImg.src = img.src;
lightbox.classList.add('active');
}
});
});
closeLightboxBtn?.addEventListener('click', closeLightBoxFunc);
lightbox?.addEventListener('click', (e) => {
if (e.target === lightbox) {
closeLightBoxFunc();
}
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeModal();
closeLightBoxFunc();
}
});
let lastScrollY = window.scrollY;
window.addEventListener('scroll', () => {
const header = document.querySelector('.header');
if (!header) return;
if (lastScrollY 150) {
if (!navLinks.classList.contains('active')) header.classList.add('header--hidden');
} else {
header.classList.remove('header--hidden');
}
lastScrollY = window.scrollY <= 0 ? 0 : window.scrollY;
});
document.body.style.opacity = '1';
});
