/* =============================================
DAR MED ART EVENT — Modern Heritage Design
Moroccan Cooking Classes · Marrakech Medina
============================================= */
/* ---------- Google Fonts ----------
Loaded via + in index.html
(a render-blocking CSS @import was removed here for faster first paint). */
/* ---------- CSS Custom Properties ---------- */
:root {
/* Brand Colours */
--majorelle: #0055A4;
--majorelle-dark: #003D78;
--majorelle-light: #1A6FBE;
--saffron: #E9A106;
--saffron-light: #F5C94D;
--saffron-dark: #C48A05;
--terracotta: #B35D38;
--terracotta-h: #C97555;
--sand: #F9F4E8;
--sand-dark: #F0E8D5;
--charcoal: #2C2C2C;
--charcoal-light: #4A4A4A;
--white: #FFFFFF;
--black: #0A0A0A;
--overlay: rgba(0,30,60,.65);
--glass-bg: rgba(0,85,164,.08);
--glass-border: rgba(0,85,164,.15);
/* Typography */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Outfit', -apple-system, sans-serif;
/* Spacing */
--space-xs: .5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 4rem;
--space-xxl: 6rem;
--space-hero: 8rem;
/* Radii */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 40px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0,0,0,.06);
--shadow-md: 0 8px 30px rgba(0,0,0,.1);
--shadow-lg: 0 20px 60px rgba(0,0,0,.15);
--shadow-glow: 0 0 40px rgba(233,161,6,.25);
--shadow-book: 12px 12px 30px rgba(0,0,0,.2), -4px -4px 20px rgba(255,255,255,.05);
/* Transitions */
--ease-out: cubic-bezier(.22,1,.36,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
--duration-fast: .2s;
--duration-med: .4s;
--duration-slow: .7s;
/* Layout */
--max-width: 1320px;
--nav-height: 80px;
}
/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; font-size:16px }
body {
font-family: var(--font-body);
color: var(--charcoal);
background: var(--sand);
line-height: 1.7;
overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block }
a { text-decoration:none; color:inherit; transition: color var(--duration-fast) var(--ease-out) }
ul,ol { list-style:none }
button { cursor:pointer; border:none; background:none; font-family:inherit }
input,textarea,select { font-family:inherit; font-size:inherit }
/* ---------- Utility ---------- */
.container { width:90%; max-width:var(--max-width); margin:0 auto }
.section { padding: var(--space-hero) 0 }
.section-sand { background: var(--sand-dark) }
.text-center { text-align:center }
/* Scroll reveal system — CSS transitions triggered by IntersectionObserver */
[data-reveal] {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
}
[data-reveal].revealed {
opacity: 1;
transform: translateY(0);
}
/* ---------- Typography ---------- */
h1,h2,h3,h4,h5 { font-family:var(--font-display); font-weight:700; line-height:1.15; color:var(--charcoal) }
h1 { font-size:clamp(2.8rem,6vw,5.5rem); letter-spacing:-.02em }
h2 { font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.01em }
h3 { font-size:clamp(1.3rem,2.5vw,1.7rem) }
h4 { font-size:1.15rem; font-family:var(--font-body); font-weight:600 }
.accent-font { font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--majorelle) }
.accent { color:var(--saffron); font-style:italic }
.label {
font-family: var(--font-body);
font-size: .75rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--saffron);
display: inline-block;
margin-bottom: var(--space-sm);
}
.lead { font-size:1.1rem; line-height:1.85; max-width:660px; color:var(--charcoal-light) }
/* Section header */
.section-header {
text-align: center;
margin-bottom: var(--space-xl);
}
.section-header h2 { margin-bottom: var(--space-md) }
.section-header .lead { margin: 0 auto }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: .9rem 2rem;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-weight: 600; font-size: .9rem;
letter-spacing: .03em;
transition: all var(--duration-med) var(--ease-spring);
position: relative; overflow: hidden;
border: 2px solid transparent;
}
.btn::after {
content:''; position:absolute; inset:0;
background: linear-gradient(135deg,rgba(255,255,255,.2),transparent);
opacity:0; transition: opacity var(--duration-fast);
}
.btn:hover::after { opacity:1 }
.btn-icon { font-size:1.2rem; transition:transform var(--duration-fast) var(--ease-spring) }
.btn:hover .btn-icon { transform:translateX(4px) }
.btn-primary {
background: var(--saffron); color: var(--charcoal);
box-shadow: 0 4px 20px rgba(233,161,6,.35);
}
.btn-primary:hover {
background: var(--saffron-light);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(233,161,6,.45);
}
.btn-outline-light {
border: 2px solid rgba(255,255,255,.5); color: var(--white);
}
.btn-outline-light:hover {
background: rgba(255,255,255,.12);
border-color: var(--white);
transform: translateY(-2px);
}
.btn-saffron {
background: linear-gradient(135deg, var(--saffron), var(--saffron-light));
color: var(--charcoal);
}
.btn-saffron:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
}
.btn-white {
background: var(--white); color: var(--majorelle);
border: 2px solid var(--majorelle);
}
.btn-white:hover {
background: var(--majorelle); color: var(--white);
transform: translateY(-2px);
}
.btn-buy {
background: var(--majorelle); color: var(--white);
padding: .6rem 1.5rem;
font-size: .85rem;
}
.btn-buy:hover {
background: var(--majorelle-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,85,164,.3);
}
/* ---------- Loader ---------- */
.loader {
position: fixed; inset:0; z-index:9999;
background: var(--majorelle);
display: flex; align-items:center; justify-content:center;
transition: opacity .6s ease, visibility .6s ease;
}
.loader.hidden { opacity:0; visibility:hidden; pointer-events:none }
.loader-inner { text-align:center }
.loader-logo {
font-family: var(--font-display);
font-size: 1.8rem; font-weight: 700;
color: var(--white);
display: flex; align-items:center; gap:.6rem;
justify-content: center;
margin-bottom: var(--space-md);
}
.loader-icon {
font-size: 1.4rem;
color: var(--saffron);
animation: spin 3s linear infinite;
}
@keyframes spin {
0% { transform:rotate(0deg) }
100% { transform:rotate(360deg) }
}
.loader-bar {
width: 200px; height:3px;
background: rgba(255,255,255,.2);
border-radius: var(--radius-full);
overflow: hidden;
}
.loader-bar-fill {
width:0; height:100%;
background: var(--saffron);
border-radius: var(--radius-full);
animation: loadBar .8s ease-out forwards;
}
@keyframes loadBar { to { width:100% } }
.loader-tagline {
font-family: var(--font-display);
font-style: italic;
color: rgba(255,255,255,.6);
font-size: .9rem;
margin-top: var(--space-sm);
}
/* ---------- Navigation ---------- */
.nav {
position: fixed; top:0; left:0; width:100%; z-index:1000;
padding: 0 5%;
height: var(--nav-height);
display: flex; align-items:center; justify-content:space-between;
transition: all var(--duration-med) var(--ease-out);
}
.nav.scrolled {
background: rgba(249,244,232,.95);
backdrop-filter: blur(20px);
box-shadow: 0 2px 30px rgba(0,0,0,.08);
}
.nav.scrolled .nav-logo { color: var(--charcoal) }
.nav.scrolled .nav-links a { color: var(--charcoal) }
.nav.scrolled .nav-links a::after { background: var(--majorelle) }
.nav.scrolled .nav-toggle span { background: var(--charcoal) }
.nav.scrolled .logo-icon { color: var(--majorelle) }
.nav-logo {
font-family: var(--font-display);
font-weight: 800; font-size: 1.5rem;
color: var(--white);
display: flex; align-items:center; gap:.5rem;
}
.logo-icon {
font-size: 1.2rem;
color: var(--saffron);
transition: transform var(--duration-med) var(--ease-spring);
}
.logo-img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid var(--saffron);
transition: transform var(--duration-med) var(--ease-spring);
}
.nav-logo:hover .logo-img {
transform: scale(1.1) rotate(15deg);
}
.loader-logo .logo-img {
width: 48px;
height: 48px;
border: 2px solid var(--saffron);
animation: spin 3s linear infinite;
}
.nav-logo:hover .logo-icon { transform:rotate(90deg) }
.nav-links { display:flex; gap:2rem; align-items:center }
.nav-links a {
color: var(--white);
font-family: var(--font-body);
font-weight: 500; font-size: .85rem;
letter-spacing: .06em;
text-transform: uppercase;
position: relative; padding: .3rem 0;
}
.nav-links a::after {
content:''; position:absolute; bottom:0; left:0;
width:0; height:2px;
background: var(--saffron);
transition: width var(--duration-med) var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a.active::after { width:100% }
.nav-cta {
padding: .55rem 1.4rem !important;
border-radius: var(--radius-full);
background: var(--saffron);
color: var(--charcoal) !important;
font-weight: 700;
text-transform: uppercase;
font-size: .8rem !important;
letter-spacing: .08em;
}
.nav-cta::after { display:none !important }
.nav-cta:hover {
background: var(--saffron-light);
transform: scale(1.05);
box-shadow: var(--shadow-glow);
}
/* Mobile nav */
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001 }
.nav-toggle span {
width:26px; height:2px; background:var(--white);
transition: all var(--duration-fast) var(--ease-out);
border-radius: 2px;
}
.nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.nav-toggle.open span:nth-child(2) { opacity:0 }
.nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }
@media(max-width:900px){
.nav-toggle { display:flex }
.nav-links {
position:fixed; top:0; right:-100%;
width:80%; max-width:380px; height:100vh;
background: var(--majorelle-dark);
flex-direction:column; justify-content:center;
padding: var(--space-xl); gap:1.5rem;
transition:right var(--duration-med) var(--ease-out);
box-shadow: -10px 0 40px rgba(0,0,0,.3);
}
.nav-links.open { right:0 }
.nav-links a { font-size:1.1rem; color:var(--white) !important }
}
/* ---------- Hero ---------- */
.hero {
position: relative;
min-height: 100vh;
display: flex; align-items:center;
overflow: hidden;
background: var(--majorelle-dark);
}
.hero-bg {
position: absolute; inset:0;
background-size: cover; background-position:center;
transform: scale(1.1);
will-change: transform;
}
.hero-overlay {
position: absolute; inset:0;
background: linear-gradient(
135deg,
rgba(0,30,60,.82) 0%,
rgba(0,55,100,.45) 50%,
rgba(0,30,60,.75) 100%
);
}
.hero-content {
position: relative; z-index:2;
padding: calc(var(--nav-height) + var(--space-xl)) 5% var(--space-xl);
max-width: 820px;
}
.hero-label {
display: inline-flex; align-items:center; gap:.6rem;
padding: .5rem 1.2rem;
border-radius: var(--radius-full);
background: rgba(233,161,6,.12);
border: 1px solid rgba(233,161,6,.25);
color: var(--saffron);
font-family: var(--font-body); font-size:.78rem; font-weight:600;
letter-spacing:.12em; text-transform:uppercase;
margin-bottom: var(--space-md);
}
.label-dot {
width: 8px; height: 8px;
background: var(--saffron);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,100% { opacity:1; transform:scale(1) }
50% { opacity:.5; transform:scale(.8) }
}
.hero h1 { color:var(--white); margin-bottom:var(--space-md) }
.hero-text {
color: rgba(255,255,255,.75);
font-size: 1.12rem; line-height:1.85;
max-width: 580px;
margin-bottom: var(--space-lg);
}
.hero-buttons { display:flex; gap:var(--space-sm); flex-wrap:wrap }
.hero-stats {
display: flex; gap:var(--space-xl);
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid rgba(255,255,255,.12);
}
.hero-stat { text-align:center }
.hero-stat-number {
font-family: var(--font-display);
font-size: 2.6rem; font-weight:800;
color: var(--saffron);
line-height:1;
}
.hero-stat-label {
font-size: .82rem; color:rgba(255,255,255,.65);
margin-top: .3rem; letter-spacing:.03em;
}
/* Hero decorative */
.hero-geo {
position: absolute;
border: 2px solid rgba(233,161,6,.12);
border-radius: 50%;
pointer-events: none;
animation: floatGeo 12s ease-in-out infinite;
}
.hero-geo-1 { width:350px; height:350px; top:8%; right:3%; animation-delay:0s }
.hero-geo-2 { width:200px; height:200px; bottom:12%; right:18%; animation-delay:4s }
@keyframes floatGeo {
0%,100% { transform:translate(0,0) rotate(0deg) }
33% { transform:translate(10px,-15px) rotate(5deg) }
66% { transform:translate(-8px,10px) rotate(-3deg) }
}
/* Scroll indicator */
.scroll-indicator {
position: absolute; bottom:2rem; left:50%; transform:translateX(-50%);
display: flex; flex-direction:column; align-items:center; gap:.5rem;
color: rgba(255,255,255,.35); font-size:.72rem;
letter-spacing: .15em; text-transform:uppercase;
font-family: var(--font-body);
}
.scroll-line {
width:1px; height:50px;
background: linear-gradient(to bottom,var(--saffron),transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%,100% { opacity:.3; transform:scaleY(.5) }
50% { opacity:1; transform:scaleY(1) }
}
/* ---------- Experience Section ---------- */
.experience-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: var(--space-lg);
}
.experience-card {
border-radius: var(--radius-lg);
background: var(--white);
overflow: hidden;
border: 1px solid rgba(0,0,0,.05);
transition: all var(--duration-med) var(--ease-spring);
}
.experience-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.experience-card-image {
position: relative;
height: 280px;
overflow: hidden;
}
.experience-card-image img {
width:100%; height:100%; object-fit:cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.experience-card:hover .experience-card-image img { transform:scale(1.08) }
.experience-step {
position: absolute; top:var(--space-sm); left:var(--space-sm);
width:40px; height:40px;
display: flex; align-items:center; justify-content:center;
background: var(--majorelle);
color: var(--white);
font-family: var(--font-display); font-weight:700; font-size:.9rem;
border-radius: 50%;
box-shadow: var(--shadow-md);
}
.experience-card-body {
padding: var(--space-lg);
}
.experience-card-body h3 {
margin-bottom: var(--space-sm);
transition: color var(--duration-fast);
}
.experience-card:hover .experience-card-body h3 { color:var(--majorelle) }
.experience-card-body p {
font-size: .92rem; color: var(--charcoal-light);
line-height: 1.75;
}
@media(max-width:900px) { .experience-grid { grid-template-columns:repeat(2,1fr) } }
@media(max-width:600px) { .experience-grid { grid-template-columns:1fr } }
/* ---------- E-Book Section ---------- */
.ebooks-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: var(--space-lg);
}
.ebook-card {
border-radius: var(--radius-lg);
background: var(--white);
overflow: hidden;
border: 1px solid rgba(0,0,0,.06);
transition: all var(--duration-med) var(--ease-spring);
perspective: 800px;
}
.ebook-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.ebook-card-image {
position: relative;
height: 320px;
overflow: hidden;
background: linear-gradient(135deg, var(--sand) 0%, var(--sand-dark) 100%);
display: flex; align-items:center; justify-content:center;
padding: var(--space-md);
}
.ebook-card-image img {
width:85%; height:85%; object-fit:contain;
transition: transform var(--duration-med) var(--ease-spring);
filter: drop-shadow(8px 8px 20px rgba(0,0,0,.15));
}
.ebook-card:hover .ebook-card-image img {
transform: rotateY(-5deg) scale(1.05);
}
.ebook-card-body {
padding: var(--space-lg);
}
.ebook-badge {
display: inline-block;
padding: .2rem .7rem;
border-radius: var(--radius-full);
font-size: .7rem; font-weight:700;
text-transform: uppercase; letter-spacing:.08em;
background: var(--saffron); color:var(--charcoal);
margin-bottom: var(--space-sm);
}
.ebook-badge-new { background:var(--majorelle); color:var(--white) }
.ebook-badge-popular { background:var(--terracotta); color:var(--white) }
.ebook-card-body h3 {
margin-bottom: var(--space-xs);
font-size: 1.25rem;
}
.ebook-card-body p {
font-size: .88rem; color:var(--charcoal-light);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.ebook-footer {
display: flex; align-items:center; justify-content:space-between;
padding-top: var(--space-sm);
border-top: 1px solid rgba(0,0,0,.06);
}
.ebook-price {
font-family: var(--font-display);
font-size: 1.5rem; font-weight:800;
color: var(--majorelle);
}
@media(max-width:900px) { .ebooks-grid { grid-template-columns:repeat(2,1fr) } }
@media(max-width:600px) { .ebooks-grid { grid-template-columns:1fr } }
/* ---------- Rooms Section ---------- */
.rooms-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
max-width: 840px;
margin: 0 auto;
}
.room-card {
border-radius: var(--radius-lg);
background: var(--white);
overflow: hidden;
border: 1px solid rgba(0,0,0,.05);
transition: all var(--duration-med) var(--ease-spring);
display: flex;
flex-direction: column;
}
.room-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.room-card-image {
position: relative;
height: 280px;
overflow: hidden;
}
.room-card-image img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.room-card:hover .room-card-image img { transform: scale(1.08) }
.room-price-tag {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
padding: .35rem .9rem;
border-radius: var(--radius-full);
background: rgba(0,55,164,.9);
backdrop-filter: blur(8px);
color: var(--white);
font-family: var(--font-body);
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: var(--shadow-sm);
}
.room-card-body {
padding: var(--space-lg);
display: flex;
flex-direction: column;
flex: 1;
}
.room-card-body h3 {
font-family: var(--font-display);
font-size: 1.25rem;
margin-bottom: var(--space-xs);
transition: color var(--duration-fast);
}
.room-card:hover .room-card-body h3 { color: var(--majorelle) }
.room-card-body p {
font-size: .92rem;
color: var(--charcoal-light);
line-height: 1.75;
margin-bottom: var(--space-md);
flex: 1;
}
.room-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-sm);
border-top: 1px solid rgba(0,0,0,.06);
gap: var(--space-sm);
}
.room-price {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
color: var(--majorelle);
white-space: nowrap;
}
.btn-whatsapp {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .6rem 1.3rem;
border-radius: var(--radius-full);
background: #25D366;
color: var(--white);
font-weight: 600;
font-size: .82rem;
letter-spacing: .02em;
transition: all var(--duration-med) var(--ease-spring);
white-space: nowrap;
}
.btn-whatsapp:hover {
background: #1EBE5A;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37,211,102,.35);
color: var(--white);
}
.whatsapp-icon {
flex-shrink: 0;
}
@media(max-width:900px) {
.rooms-grid { grid-template-columns: repeat(2, 1fr) }
.room-card-body { padding: 1.5rem; }
}
@media(max-width:600px) {
.rooms-grid { grid-template-columns: 1fr }
.room-card-body { padding: 1.25rem; }
.room-price { font-size: 1rem; }
.btn-view-room { padding: 0.5rem 1rem; }
}
/* ---------- Menu Section ---------- */
.section-menu {
position: relative;
background: var(--charcoal);
color: var(--white);
overflow: hidden;
}
.section-menu::before {
content:''; position:absolute; inset:0;
background: url('images/menu-bg.png') center/cover no-repeat;
opacity: .06;
pointer-events: none;
}
.menu-bg-overlay {
position: absolute; inset:0;
background: radial-gradient(ellipse at 30% 50%, rgba(0,85,164,.08), transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(233,161,6,.06), transparent 50%);
pointer-events: none;
}
.menu-container { position:relative; z-index:1 }
.section-menu .label { color:var(--saffron) }
.section-menu h2 { color:var(--white) }
.section-menu .lead { color:rgba(255,255,255,.72) }
.section-menu .accent-font { color:var(--saffron) }
/* ---------- Menu sets (two cooking-class menus) ---------- */
.menus-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
max-width: 1000px;
margin: 0 auto;
}
.menu-set {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--radius-lg);
padding: var(--space-lg) var(--space-lg) var(--space-xl);
}
.menu-set-featured {
border-color: rgba(233,161,6,.4);
box-shadow: 0 0 50px rgba(233,161,6,.08);
}
.menu-set-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--space-sm);
}
.menu-set-name {
font-family: var(--font-display);
color: var(--white);
font-size: 1.6rem;
}
.menu-set-price {
font-family: var(--font-display);
font-weight: 700;
color: var(--saffron);
font-size: 1.35rem;
white-space: nowrap;
}
.menu-set-divider {
height: 1px;
background: linear-gradient(to right, rgba(233,161,6,.55), transparent);
margin: var(--space-sm) 0 var(--space-lg);
}
.menu-course { margin-bottom: var(--space-md); }
.menu-course:last-child { margin-bottom: 0; }
.menu-course-label {
display: block;
font-family: var(--font-body);
font-size: .72rem; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--saffron);
margin-bottom: .5rem;
}
.menu-dish {
color: rgba(255,255,255,.85);
font-size: .98rem;
line-height: 1.5;
padding: .35rem 0;
}
.menu-dish + .menu-dish {
border-top: 1px solid rgba(255,255,255,.07);
}
/* Custom dish request CTA */
.menu-custom {
max-width: 640px;
margin: var(--space-xl) auto 0;
text-align: center;
padding: var(--space-lg);
border-radius: var(--radius-lg);
background: rgba(0,85,164,.14);
border: 1px solid rgba(255,255,255,.08);
}
.menu-custom-title {
font-family: var(--font-display);
color: var(--white);
font-size: 1.4rem;
margin-bottom: var(--space-sm);
}
.menu-custom-text {
color: rgba(255,255,255,.72);
font-size: .95rem;
line-height: 1.7;
margin-bottom: var(--space-md);
}
@media(max-width:768px) {
.menus-grid { grid-template-columns: 1fr; max-width: 520px; }
}
/* ---------- About Section ---------- */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
align-items: center;
}
.about-image {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
}
.about-image img {
width:100%; height:520px; object-fit:cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.about-image:hover img { transform:scale(1.04) }
.about-image-badge {
position: absolute; bottom:var(--space-md); left:var(--space-md);
background: rgba(0,85,164,.92);
backdrop-filter: blur(10px);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
color: var(--white);
}
.about-image-badge strong {
font-family: var(--font-display);
font-size: 1.5rem; color:var(--saffron);
display: block;
}
.about-image-badge span { font-size:.85rem; color:rgba(255,255,255,.75) }
.about-text .label { margin-bottom:var(--space-sm) }
.about-text h2 { margin-bottom:var(--space-md) }
.about-text p { margin-bottom:var(--space-md); color:var(--charcoal-light); line-height:1.85 }
.about-features {
display: grid; grid-template-columns:1fr 1fr;
gap: var(--space-md);
margin-top: var(--space-lg);
}
.about-feature {
display: flex; gap:.75rem; align-items:flex-start;
}
.about-feature-icon {
width: 44px; height:44px; flex-shrink:0;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--majorelle), var(--majorelle-light));
display: flex; align-items:center; justify-content:center;
font-size: 1.15rem;
}
.about-feature strong {
display: block; font-size:.9rem; color:var(--charcoal);
}
.about-feature span {
font-size: .8rem; color:var(--charcoal-light);
}
@media(max-width:768px){
.about-grid { grid-template-columns:1fr; gap:var(--space-lg) }
.about-image img { height:350px }
.about-features { grid-template-columns:1fr }
}
/* ---------- About Map Embed ---------- */
.about-map {
margin-top: var(--space-xxl);
}
.about-map-title {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.5vw, 1.7rem);
text-align: center;
margin-bottom: var(--space-lg);
color: var(--charcoal);
}
.about-map-wrapper {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid rgba(0,0,0,.06);
}
.about-map-wrapper iframe {
display: block;
width: 100%;
min-height: 400px;
}
/* Google Maps direct link */
.about-map-link {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: var(--space-md);
padding: .7rem 1.6rem;
border-radius: var(--radius-full);
background: var(--majorelle);
color: var(--white);
font-family: var(--font-body);
font-weight: 600;
font-size: .9rem;
letter-spacing: .02em;
transition: all var(--duration-med) var(--ease-spring);
text-decoration: none;
}
.about-map-link:hover {
background: var(--majorelle-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,85,164,.3);
color: var(--white);
}
.about-map-link svg {
flex-shrink: 0;
}
.map-link-arrow {
transition: transform var(--duration-fast) var(--ease-spring);
}
.about-map-link:hover .map-link-arrow {
transform: translateX(4px);
}
.about-map {
text-align: center;
}
.about-map-wrapper {
text-align: left;
}
/* Room card as link */
a.room-card {
text-decoration: none;
color: inherit;
display: flex;
cursor: pointer;
}
.btn-view-room {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .55rem 1.2rem;
border-radius: var(--radius-full);
background: var(--majorelle);
color: var(--white);
font-weight: 600;
font-size: .82rem;
letter-spacing: .02em;
transition: all var(--duration-med) var(--ease-spring);
white-space: nowrap;
}
a.room-card:hover .btn-view-room {
background: var(--majorelle-dark);
box-shadow: 0 4px 16px rgba(0,85,164,.3);
}
/* ---------- CTA Banner ---------- */
.cta-banner {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
background: linear-gradient(135deg, var(--majorelle) 0%, var(--majorelle-light) 50%, var(--majorelle) 100%);
padding: var(--space-xxl) var(--space-xl);
text-align: center;
color: var(--white);
}
.cta-pattern {
position: absolute; inset:0;
background:
radial-gradient(circle at 25% 40%, rgba(233,161,6,.15), transparent 55%),
radial-gradient(circle at 75% 70%, rgba(179,93,56,.1), transparent 45%);
pointer-events: none;
}
.cta-banner > *:not(.cta-pattern) { position:relative; z-index:1 }
.cta-banner .label { color:var(--saffron); margin-bottom:var(--space-sm) }
.cta-banner h2 { color:var(--white); margin-bottom:var(--space-md) }
.cta-banner .accent-font { color:var(--saffron) }
.cta-banner p {
max-width: 520px; margin:0 auto var(--space-lg);
color: rgba(255,255,255,.7); font-size:1rem;
}
.cta-buttons { display:flex; gap:var(--space-sm); justify-content:center; flex-wrap:wrap }
.cta-banner .btn-white {
border-color: rgba(255,255,255,.4);
color: var(--white);
}
.cta-banner .btn-white:hover {
background: var(--white);
color: var(--majorelle);
border-color: var(--white);
}
/* ---------- Footer ---------- */
.footer {
background: var(--charcoal);
color: rgba(255,255,255,.7);
padding: var(--space-xl) 0 var(--space-lg);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr .8fr;
gap: var(--space-xl);
padding-bottom: var(--space-xl);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand .nav-logo {
color: var(--white);
margin-bottom: var(--space-sm);
}
.footer-brand p { font-size:.9rem; line-height:1.7; max-width:300px }
.footer h4 {
color: var(--white);
font-family: var(--font-display);
font-size: 1rem;
margin-bottom: var(--space-md);
}
.footer-links {
display: flex; flex-direction:column; gap:.6rem;
}
.footer-links a {
font-size: .88rem; color:rgba(255,255,255,.55);
transition: color var(--duration-fast);
}
.footer-links a:hover { color:var(--saffron) }
.footer-socials { display:flex; gap:var(--space-sm) }
.footer-social {
width: 42px; height:42px; border-radius:50%;
background: rgba(255,255,255,.08);
display: flex; align-items:center; justify-content:center;
color: var(--white); font-size:.7rem; font-weight:700;
letter-spacing: .02em;
transition: all var(--duration-fast) var(--ease-spring);
}
.footer-social:hover {
background: var(--saffron); color:var(--charcoal);
transform: scale(1.1);
}
.footer-bottom {
display: flex; justify-content:space-between; align-items:center;
padding-top: var(--space-lg);
font-size: .82rem;
flex-wrap: wrap; gap:var(--space-sm);
}
.footer-bottom-links { display:flex; gap:var(--space-md) }
.footer-bottom-links a { color:rgba(255,255,255,.4) }
.footer-bottom-links a:hover { color:var(--saffron) }
@media(max-width:768px){
.footer-grid { grid-template-columns:1fr 1fr; gap:var(--space-lg) }
}
@media(max-width:480px){
.footer-grid { grid-template-columns:1fr }
.footer-bottom { flex-direction:column; text-align:center }
}
/* ---------- Responsive Hero ---------- */
@media(max-width:768px){
.hero-content { padding: calc(var(--nav-height) + var(--space-lg)) 5% var(--space-lg) }
.hero-stats { gap:var(--space-lg) }
.hero-stat-number { font-size:2rem }
.hero-geo { display:none }
.section { padding:var(--space-xl) 0 }
}
@media(max-width:480px){
.hero-stats { flex-direction:column; gap:var(--space-md); align-items:flex-start }
}
/* =============================================
THE JOURNAL — Blog Section
Grid-Based Blog Cards Layout
============================================= */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-top: var(--space-xl);
}
.blog-card {
border-radius: var(--radius-lg);
background: var(--white);
overflow: hidden;
border: 1px solid rgba(0,0,0,.05);
transition: all var(--duration-med) var(--ease-spring);
display: flex;
flex-direction: column;
height: 100%;
}
.blog-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.blog-card-image {
position: relative;
height: 220px;
overflow: hidden;
}
.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.blog-card:hover .blog-card-image img {
transform: scale(1.08);
}
.blog-card-badge {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
padding: 0.25rem 0.65rem;
border-radius: var(--radius-sm);
background: var(--saffron);
color: var(--charcoal);
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: var(--shadow-sm);
z-index: 2;
}
.blog-card-body {
padding: var(--space-lg);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog-card-category {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--majorelle);
margin-bottom: var(--space-xs);
}
.blog-card-body h3 {
font-family: var(--font-display);
font-size: 1.25rem;
line-height: 1.35;
margin-bottom: var(--space-xs);
transition: color var(--duration-fast);
color: var(--charcoal);
}
.blog-card:hover .blog-card-body h3 {
color: var(--majorelle);
}
.blog-card-body p {
font-size: 0.88rem;
color: var(--charcoal-light);
line-height: 1.65;
margin-bottom: var(--space-md);
flex-grow: 1;
}
.blog-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
border-top: 1px solid rgba(0,0,0,.05);
padding-top: var(--space-sm);
}
.blog-read-time {
font-size: 0.75rem;
color: var(--charcoal-light);
font-weight: 500;
}
.btn-blog-read {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--majorelle);
transition: color var(--duration-fast);
text-decoration: none;
}
.btn-blog-read:hover {
color: var(--majorelle-dark);
}
@media(max-width:900px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width:600px) {
.blog-grid {
grid-template-columns: 1fr;
}
}
/* =============================================
LANGUAGE TOGGLE
============================================= */
.lang-toggle {
display: flex;
align-items: center;
gap: 0;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius-full);
padding: 3px;
margin-left: var(--space-sm);
backdrop-filter: blur(8px);
transition: all var(--duration-med) var(--ease-out);
}
.nav.scrolled .lang-toggle {
background: rgba(0,0,0,.06);
border-color: rgba(0,0,0,.1);
}
.lang-btn {
padding: .35rem .75rem;
font-family: var(--font-body);
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
border-radius: var(--radius-full);
transition: all var(--duration-fast) var(--ease-spring);
cursor: pointer;
line-height: 1;
}
.nav.scrolled .lang-btn {
color: rgba(0,0,0,.4);
}
.lang-btn.active {
background: var(--saffron);
color: var(--charcoal);
box-shadow: 0 2px 8px rgba(233,161,6,.3);
}
.nav.scrolled .lang-btn.active {
background: var(--saffron);
color: var(--charcoal);
}
.lang-btn:not(.active):hover {
color: var(--white);
background: rgba(255,255,255,.1);
}
.nav.scrolled .lang-btn:not(.active):hover {
color: var(--charcoal);
background: rgba(0,0,0,.06);
}
/* Mobile language toggle */
@media(max-width:900px) {
.lang-toggle {
position: absolute;
right: 60px;
top: 50%;
transform: translateY(-50%);
}
}
/* =============================================
RESERVATION SIMULATOR SECTION
============================================= */
.reservation-section {
background: var(--sand-dark);
padding: var(--space-xl) 0;
}
.reservation-card {
max-width: 720px;
margin: 0 auto;
background: var(--white);
padding: var(--space-xl) var(--space-lg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
border: 1px solid var(--glass-border);
}
.reservation-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.form-group-full {
grid-column: span 2;
}
.reservation-form label {
display: block;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--charcoal-light);
margin-bottom: 6px;
}
.reservation-form input,
.reservation-form select,
.reservation-form textarea {
width: 100%;
padding: 0.85rem 1.2rem;
border-radius: var(--radius-sm);
border: 1px solid var(--glass-border);
background: var(--sand);
color: var(--charcoal);
font-family: var(--font-body);
font-size: 0.95rem;
transition: all var(--duration-fast) var(--ease-out);
outline: none;
}
.reservation-form input:focus,
.reservation-form select:focus,
.reservation-form textarea:focus {
border-color: var(--majorelle);
background: var(--white);
box-shadow: 0 0 0 4px rgba(0, 85, 164, 0.08);
}
.reservation-form textarea {
resize: vertical;
min-height: 100px;
}
.reservation-error {
display: none;
grid-column: span 2;
background: rgba(220, 53, 69, 0.08);
border: 1px solid rgba(220, 53, 69, 0.2);
color: #dc3545;
padding: var(--space-sm);
border-radius: var(--radius-sm);
font-size: 0.88rem;
font-weight: 500;
text-align: center;
}
.reservation-submit-container {
grid-column: span 2;
text-align: center;
margin-top: var(--space-md);
}
.reservation-note {
display: block;
font-size: 0.8rem;
color: var(--charcoal-light);
margin-top: var(--space-sm);
font-weight: 500;
}
@media (max-width: 768px) {
.reservation-form {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.form-group-full,
.reservation-error,
.reservation-submit-container {
grid-column: span 1;
}
}
/* =============================================
TESTIMONIALS SECTION
============================================= */
.testimonials-section {
background: var(--sand);
position: relative;
overflow: hidden;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.testimonial-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-sm);
border: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all var(--duration-med) var(--ease-spring);
position: relative;
gap: var(--space-md);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: rgba(0, 85, 164, 0.15);
}
.testimonial-stars {
color: var(--saffron);
font-size: 1.1rem;
margin-bottom: var(--space-xs);
letter-spacing: 0.1em;
}
.testimonial-text-container {
position: relative;
padding-left: 1.8rem;
}
.testimonial-quote {
position: absolute;
left: 0;
top: -1.2rem;
font-size: 4rem;
color: var(--saffron);
font-family: var(--font-display);
line-height: 1;
user-select: none;
pointer-events: none;
}
.testimonial-text {
font-size: 0.95rem;
color: var(--charcoal-light);
line-height: 1.7;
font-style: italic;
}
.testimonial-footer {
margin-top: var(--space-xs);
border-top: 1px solid var(--sand-dark);
padding-top: var(--space-sm);
}
.testimonial-reviewer-container {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-xs);
flex-wrap: wrap;
}
.testimonial-reviewer {
color: var(--majorelle);
font-weight: 700;
font-size: 1rem;
}
.local-guide-badge {
background: #FDF6E2;
color: #B25D38;
font-size: 0.72rem;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-full);
border: 1px solid rgba(179, 93, 56, 0.15);
display: inline-flex;
align-items: center;
}
.testimonial-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.testimonial-badges .badge {
font-size: 0.75rem;
font-weight: 500;
color: var(--charcoal-light);
background: var(--sand-dark);
padding: 4px 10px;
border-radius: var(--radius-full);
border: 1px solid rgba(0, 0, 0, 0.03);
}
.testimonial-badges .badge-special {
background: #EAF7ED;
color: #28A745;
border-color: rgba(40, 167, 69, 0.15);
}
.testimonials-action {
text-align: center;
margin-top: var(--space-xl);
}
.btn-outline-navy {
background: transparent;
border: 2px solid var(--majorelle);
color: var(--majorelle);
}
.btn-outline-navy:hover {
background: var(--majorelle);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 85, 164, 0.15);
}
@media (max-width: 900px) {
.testimonials-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
}
/* =============================================
FAQ SECTION
============================================= */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
background: var(--white);
border: 1px solid rgba(0,0,0,.06);
border-radius: var(--radius-md);
margin-bottom: var(--space-sm);
padding: 0 var(--space-lg);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--duration-fast) var(--ease-out);
}
.faq-item[open] { box-shadow: var(--shadow-md); }
.faq-item summary {
list-style: none;
cursor: pointer;
padding: var(--space-md) 0;
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 600;
color: var(--charcoal);
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
font-size: 1.6rem; line-height: 1;
color: var(--majorelle);
flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p {
padding: 0 0 var(--space-md);
margin: 0;
color: var(--charcoal-light);
line-height: 1.75;
font-size: .95rem;
}
/* =============================================
REDUCED MOTION — respect user OS preference
Disables parallax, tilt, magnetic buttons, counters,
floating shapes, and scroll reveals.
============================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
[data-reveal] { opacity: 1 !important; transform: none !important; }
.hero-bg { transform: scale(1.1) !important; }
}