*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--gold: #BFA46A;
--gold-light: #DDD0A8;
--gold-dim: #7A6840;
--cream: #F2EBD9;
--ink: #0E0A08;
--ink-mid: #17110E;
--ink-soft: #201610;
--ember: #C84B18;
--ember-light: #E8733A;
--ember-deep: #7A2608;
--muted: #C9B89A;
--light: #DDD0B8;
--wa-green: #25D366;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--ink);
color: var(--cream);
font-family: 'Jost', sans-serif;
font-weight: 300;
overflow-x: hidden;
cursor: none;
}
/* ─── CURSOR ─────────────────────────────── */
.cur {
position: fixed;
pointer-events: none;
z-index: 9999;
border-radius: 50%;
transform: translate(-50%,-50%);
transition: width .25s,height .25s;
}
#c1 {
width: 10px;
height: 10px;
background: var(--gold);
}
#c2 {
width: 38px;
height: 38px;
border: 1px solid rgba(191,164,106,.5);
top: 0;
left: 0;
}
/* ─── NAV ─────────────────────────────────── */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 2.2rem 5rem;
transition: padding .4s, background .4s, border-color .4s;
border-bottom: 1px solid transparent;
}
nav.scrolled {
background: rgba(22,18,16,.96);
backdrop-filter: blur(16px);
padding: 1.2rem 5rem;
border-color: rgba(191,164,106,.18);
}
.nav-logo {
display: flex;
flex-direction: column;
gap: 2px;
text-decoration: none;
}
.nav-logo-main {
font-family: 'Playfair Display',serif;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: .04em;
color: var(--gold);
line-height: 1;
}
.nav-logo-sub {
font-family: 'Jost',sans-serif;
font-size: .68rem;
font-weight: 300;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--muted);
}
.nav-links {
display: flex;
gap: 2.8rem;
list-style: none;
}
.nav-links a {
font-size: .8rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--light);
text-decoration: none;
position: relative;
transition: color .3s;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 1px;
background: var(--gold);
transition: width .35s;
}
.nav-links a:hover {
color: var(--gold);
}
.nav-links a:hover::after {
width: 100%;
}
.nav-reserve {
border: 1px solid var(--gold);
color: var(--gold) !important;
padding: .55rem 1.6rem;
}
.nav-reserve::after {
display: none !important;
}
.nav-reserve:hover {
background: var(--gold) !important;
color: var(--ink) !important;
}
/* Mobile hamburger */
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: none;
padding: .4rem;
}
.nav-hamburger span {
display: block;
width: 24px;
height: 1px;
background: var(--gold);
transition: transform .3s, opacity .3s;
}
.nav-hamburger.open span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* Mobile drawer */
.nav-drawer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(22,18,16,.98);
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
opacity: 0;
pointer-events: none;
transition: opacity .4s;
}
.nav-drawer.open {
opacity: 1;
pointer-events: all;
}
.nav-drawer a {
font-family: 'Playfair Display',serif;
font-size: 2rem;
font-weight: 800;
font-style: italic;
color: var(--light);
text-decoration: none;
transition: color .3s;
}
.nav-drawer a:hover {
color: var(--gold);
}
.nav-drawer .drawer-cta {
font-family: 'Jost',sans-serif;
font-size: .7rem;
font-weight: 500;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid var(--gold);
padding: .8rem 2.2rem;
margin-top: 1rem;
background: none;
text-decoration: none;
}
.nav-drawer .drawer-cta:hover {
background: var(--gold);
color: var(--ink);
}
/* ─── HERO ───────────────────────────────── */
/* ═══════════════════════════════════════════
HERO — FULLSCREEN SLIDER
═══════════════════════════════════════════ */
#heroSection {
position: relative;
height: 100svh;
min-height: 600px;
overflow: hidden;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.4s ease;
}
.hero-slide.active {
opacity: 1;
}
.hero-slide-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.06);
transition: transform 7s ease;
}
.hero-slide.active .hero-slide-img {
transform: scale(1);
}
/* Video dello hero: devono COPRIRE l'intero box come un background,
altrimenti su mobile portrait il video 16:9 a width:100% resta una
striscia bassa con lo sfondo scuro sopra/sotto. */
.hero-slide-img.video-wrap {
overflow: hidden;
}
.hero-slide-img .video-grill-cut {
position: absolute;
top: 50%;
left: 50%;
width: 100% !important;
height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient( 135deg, rgba(10,7,5,.85) 0%, rgba(15,12,9,.55) 50%, rgba(10,7,5,.3) 100% );
}
/* Bottom fade */
.hero-overlay::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 35%;
background: linear-gradient(to top, var(--dark) 0%, transparent 100%);
}
/* Slide indicators */
.hero-indicators {
position: absolute;
bottom: 2rem;
right: 1.5rem;
z-index: 3;
display: flex;
flex-direction: column;
gap: .5rem;
}
.hero-dot {
width: 2px;
height: 22px;
background: rgba(201,169,110,.3);
cursor: pointer;
transition: background .3s, height .3s;
border: none;
padding: 0;
}
.hero-dot.active {
background: var(--gold);
height: 36px;
}
/* Scroll hint */
.hero-scroll-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem;
opacity: 0;
animation: fadeIn 1s ease 2.2s forwards;
}
.scroll-label {
font-family: 'Barlow Condensed', sans-serif;
font-size: .5rem;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--muted);
}
.scroll-line {
width: 1px;
height: 44px;
background: linear-gradient(to bottom, var(--gold), transparent);
animation: scrollPulse 2s ease infinite;
}
@keyframes scrollPulse {
0%,100% {
opacity: .7;
transform: scaleY(1)
}
50% {
opacity: .3;
transform: scaleY(.5)
}
}
.hero {
position: relative;
height: 100vh;
min-height: 680px;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background: linear-gradient(125deg, #0C0906 0%, #161210 45%, #1E1912 100%);
}
.hero-atmosphere {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 60% 70% at 70% 50%, rgba(200,75,24,.13) 0%, transparent 55%), radial-gradient(ellipse 40% 50% at 15% 75%, rgba(191,164,106,.07) 0%, transparent 45%);
}
/* Elba sea-inspired subtle pattern */
.hero-texture {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.hero-texture::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient( -30deg, transparent 0, transparent 48px, rgba(191,164,106,.03) 48px, rgba(191,164,106,.03) 49px );
}
/* Ember particles */
.embers {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index:10;
}
.em {
position: absolute;
border-radius: 50%;
opacity: 0;
animation: floatUp linear infinite;
}
@keyframes floatUp {
0% {
opacity: 0;
transform: translateY(0) translateX(0) scale(1);
}
8% {
opacity: .9;
}
80% {
opacity: .5;
}
100% {
opacity: 0;
transform: translateY(-110vh) translateX(var(--d)) scale(.15);
}
}
/* Large right-side illustration */
.hero-art {
position: absolute;
right: -3%;
top: 50%;
transform: translateY(-50%);
width: 50%;
opacity: 0;
animation: slideInRight 1.5s cubic-bezier(.2,.8,.3,1) .2s forwards;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateY(-50%) translateX(80px);
}
to {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
.hero-content {
position: relative;
z-index: 2;
padding: 0 5rem;
max-width: 600px;
}
.hero-tag {
font-size: .6rem;
letter-spacing: .45em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 1rem;
opacity: 0;
animation: fadeUp .9s ease .6s forwards;
}
.hero-tag::before {
content: '';
width: 36px;
height: 1px;
background: var(--gold);
flex-shrink: 0;
}
.hero-h1 {
font-family: 'Playfair Display',serif;
font-size: clamp(3.2rem,6vw,6rem);
font-weight: 900;
line-height: 1.0;
color: var(--cream);
opacity: 0;
animation: fadeUp 1s ease .8s forwards;
}
.hero-h1 em {
font-style: italic;
color: var(--gold);
display: block;
}
.hero-location {
display: flex;
align-items: center;
gap: .8rem;
font-family: 'Cormorant Garamond',serif;
font-size: 1.05rem;
font-style: italic;
color: var(--light);
margin-top: 1.6rem;
opacity: 0;
animation: fadeUp .9s ease 1s forwards;
}
.hero-location::before {
content: '';
width: 20px;
height: 1px;
background: var(--muted);
flex-shrink: 0;
}
.hero-rule {
width: 55px;
height: 1px;
background: linear-gradient(90deg,var(--gold),transparent);
margin: 2rem 0;
opacity: 0;
animation: fadeUp .9s ease 1.15s forwards;
}
.hero-desc {
/*font-family: 'Cormorant Garamond',serif;*/
font-size: 1.2rem;
line-height: 1.8;
color: var(--light);
font-weight: 300;
opacity: 0;
animation: fadeUp .9s ease 1.3s forwards;
}
.hero-btns {
display: flex;
gap: 1.4rem;
align-items: center;
margin-top: 2.5rem;
opacity: 0;
animation: fadeUp .9s ease 1.5s forwards;
}
.btn-gold {
background: var(--gold);
color: var(--ink);
font-size: .65rem;
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 500;
padding: 1rem 2.6rem;
text-decoration: none;
transition: background .3s, transform .2s;
position: relative;
overflow: hidden;
display: inline-block;
}
.btn-gold::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,.18);
transform: translateX(-105%);
transition: transform .35s;
}
.btn-gold:hover::after {
transform: translateX(0);
}
.btn-gold:hover {
transform: translateY(-2px);
}
.btn-text {
font-size: .65rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .7rem;
transition: color .3s, gap .3s;
}
.btn-text:hover {
color: var(--gold);
gap: 1.1rem;
}
.btn-text::after {
content: '→';
font-size: .9rem;
}
.hero-scroll {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
opacity: 0;
animation: fadeIn 1s ease 2.2s forwards;
}
.hero-scroll span {
font-size: .52rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--muted);
}
.scroll-bar {
width: 1px;
height: 48px;
background: linear-gradient(to bottom,var(--gold),transparent);
animation: pulse 2s ease infinite;
}
@keyframes pulse {
0%,100% {
opacity: .7
}
50% {
opacity: .25
}
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
/* ─── MARQUEE ─────────────────────────────── */
.strip {
background: var(--gold);
overflow: hidden;
white-space: nowrap;
padding: .85rem 0;
}
.strip-inner {
display: inline-flex;
animation: marquee 32s linear infinite;
}
.strip-item {
font-family: 'Cormorant Garamond',serif;
font-size: .9rem;
font-weight: 500;
letter-spacing: .08em;
color: var(--ink);
padding: 0 2.8rem;
display: inline-flex;
align-items: center;
gap: .9rem;
}
.strip-dot {
width: 4px;
height: 4px;
background: var(--ink);
border-radius: 50%;
opacity: .45;
}
@keyframes marquee {
from {
transform: translateX(0)
}
to {
transform: translateX(-50%)
}
}
/* ─── SECTIONS ────────────────────────────── */
.sec {
padding: 8rem 5rem;
}
.sec-label {
font-size: .58rem;
letter-spacing: .38em;
text-transform: uppercase;
color: var(--gold);
display: flex;
align-items: center;
gap: .9rem;
margin-bottom: .9rem;
}
.sec-label::before {
content: '';
width: 28px;
height: 1px;
background: var(--gold);
flex-shrink: 0;
}
/* ─── CHI SIAMO / STORIA ─────────────────── */
.storia {
background: var(--ink-mid);
position: relative;
overflow: hidden;
}
.storia::before {
content: '1885';
position: absolute;
right: -1rem;
bottom: -3rem;
font-family: 'Playfair Display',serif;
font-size: 16rem;
font-weight: 900;
color: rgba(191,164,106,.04);
line-height: 1;
pointer-events: none;
white-space: nowrap;
}
.storia-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
max-width: 1280px;
margin: 0 auto;
}
.storia-text h2 {
font-family: 'Playfair Display',serif;
font-size: clamp(1.9rem,3.5vw,3.4rem);
font-weight: 800;
line-height: 1.15;
color: var(--cream);
margin-bottom: 2rem;
}
.storia-text h2 em {
font-style: italic;
color: var(--gold);
}
.storia-text p {
/*font-family: 'Cormorant Garamond',serif;*/
font-size: 1.12rem;
line-height: 1.95;
color: var(--light);
margin-bottom: 1.4rem;
}
.anno-badge {
display: inline-flex;
align-items: center;
gap: 1.2rem;
border: 1px solid rgba(191,164,106,.3);
padding: 1.2rem 2rem;
margin-top: 1rem;
}
.anno-badge span:first-child {
font-family: 'Playfair Display',serif;
font-size: 2.8rem;
font-weight: 900;
color: var(--gold);
line-height: 1;
}
.anno-badge span:last-child {
font-family: 'Cormorant Garamond',serif;
font-size: .95rem;
font-style: italic;
color: var(--muted);
line-height: 1.5;
}
.team-card-image {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
}
/* Team cards */
.team-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(191,164,106,.1);
}
.team-card {
background: var(--ink-soft);
padding: 2.8rem 2.2rem;
position: relative;
overflow: hidden;
transition: background .3s;
}
.team-card:hover {
background: #302618;
}
.team-card-photo {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
filter: grayscale(30%) sepia(20%);
display: block;
margin-bottom: 1.5rem;
border: 1px solid rgba(191,164,106,.15);
}
.team-card h3 {
font-family: 'Playfair Display',serif;
font-size: 1.4rem;
font-weight: 800;
color: var(--cream);
margin-bottom: .3rem;
}
.team-card-role {
font-size: .6rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: .8rem;
}
.team-card p {
/*font-family: 'Cormorant Garamond',serif;
font-style: italic;
*/
font-size: .98rem;
color: var(--muted);
line-height: 1.65;
}
/* ─── MENU / PIATTI ──────────────────────── */
.menu-sec {
background: var(--ink);
}
.menu-header {
text-align: center;
margin-bottom: 5rem;
}
.menu-header .sec-label {
justify-content: center;
font-family: 'Cormorant Garamond',serif;
font-style: italic;
}
.menu-header .sec-label::before {
display: none;
}
.menu-header h2 {
font-family: 'Playfair Display',serif;
font-size: clamp(2rem,4vw,3.8rem);
font-weight: 800;
color: var(--cream);
margin-top: 1rem;
}
.menu-header h2 em {
font-style: italic;
color: var(--gold);
}
.menu-header p {
font-size: 1.1rem;
color: var(--muted);
margin-top: .9rem;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1px;
background: rgba(191,164,106,.12);
border: 1px solid rgba(191,164,106,.12);
max-width: 1280px;
margin: 0 auto;
}
.m-card {
background: var(--ink-mid);
padding: 2.8rem 2.4rem;
position: relative;
overflow: hidden;
transition: background .35s;
}
.m-card::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,var(--gold),var(--ember));
transform: scaleX(0);
transform-origin: left;
transition: transform .4s;
}
.m-card:hover {
background: var(--ink-soft);
}
.m-card:hover::before {
transform: scaleX(1);
}
.m-tag {
font-size: .55rem;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: 1.4rem;
}
.m-card h3 {
font-family: 'Playfair Display',serif;
font-size: 1.65rem;
font-weight: 800;
color: var(--cream);
margin-bottom: .4rem;
}
.m-sub {
font-family: 'Cormorant Garamond',serif;
font-size: .95rem;
font-style: italic;
color: var(--gold);
display: block;
margin-bottom: 1.1rem;
}
.m-card p {
/*font-family: 'Cormorant Garamond',serif;*/
font-size: 1rem;
color: var(--muted);
line-height: 1.75;
}
.m-num {
position: absolute;
bottom: 1.8rem;
right: 2rem;
font-family: 'Playfair Display',serif;
font-size: 5rem;
font-weight: 900;
color: rgba(191,164,106,.05);
line-height: 1;
}
/* Special highlight card */
.m-card.highlight {
background: linear-gradient(135deg, #231a0e, var(--ink-soft));
}
/* ─── VINI ───────────────────────────────── */
.vini {
background: var(--ink-mid);
position: relative;
}
.vini-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: 1400px;
margin: 0 auto;
}
.vini-text {
padding: 6rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.vini-text h2 {
font-family: 'Playfair Display',serif;
font-size: clamp(1.8rem,3vw,3.2rem);
font-weight: 800;
line-height: 1.2;
color: var(--cream);
margin-bottom: 1.8rem;
}
.vini-text h2 em {
font-style: italic;
color: var(--gold);
}
.vini-text p {
/*font-family: 'Cormorant Garamond',serif;*/
font-size: 1.1rem;
color: var(--light);
line-height: 1.9;
margin-bottom: 1.4rem;
}
.vini-visual {
position: relative;
overflow: hidden;
min-height: 550px;
background: var(--ink);
display: flex;
align-items: center;
justify-content: center;
}
/* Wine bottle SVG illustration */
.bottle-wrap {
padding: 2rem;
}
.wine-features {
display: flex;
flex-direction: column;
gap: 1.1rem;
margin-top: 2.2rem;
}
.wf {
display: flex;
align-items: flex-start;
gap: 1rem;
font-family: 'Cormorant Garamond',serif;
font-size: 1.05rem;
color: var(--light);
line-height: 1.5;
}
.wf-dash {
width: 22px;
height: 1px;
background: var(--gold);
flex-shrink: 0;
margin-top: .7rem;
}
/* ─── INFO / DETAILS ─────────────────────── */
.details {
background: var(--ink-soft);
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 1px;
border-top: 1px solid rgba(191,164,106,.15);
border-bottom: 1px solid rgba(191,164,106,.15);
}
.detail-box {
padding: 3.5rem 2.5rem;
background: var(--ink-mid);
transition: background .3s;
}
.detail-box:hover {
background: #231a0e;
}
.detail-box .d-label {
font-size: .58rem;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: 1rem;
}
.detail-box .d-val {
font-family: 'Playfair Display',serif;
font-size: 1.5rem;
font-weight: 800;
color: var(--cream);
display: block;
line-height: 1.25;
}
.detail-box .d-sub {
font-family: 'Cormorant Garamond',serif;
font-size: .95rem;
color: var(--muted);
font-style: italic;
display: block;
margin-top: .4rem;
}
/* ─── GRIGLIA / FILOSOFIA ────────────────── */
.griglia {
background: var(--ink);
position: relative;
overflow: hidden;
}
.griglia-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: 1400px;
margin: 0 auto;
}
.griglia-art {
position: relative;
min-height: 600px;
background: var(--ink-mid);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.griglia-art::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient( 45deg,transparent 0,transparent 20px, rgba(191,164,106,.025) 20px,rgba(191,164,106,.025) 21px );
pointer-events: none;
}
.griglia-text {
padding: 6rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.griglia-text h2 {
font-family: 'Playfair Display',serif;
font-size: clamp(1.8rem,3vw,3.2rem);
font-weight: 800;
line-height: 1.2;
color: var(--cream);
margin-bottom: 1.8rem;
}
.griglia-text h2 em {
font-style: italic;
color: var(--gold);
}
.griglia-text p {
/*font-family: 'Cormorant Garamond',serif;*/
font-size: 1.1rem;
color: var(--light);
line-height: 1.9;
margin-bottom: 1.4rem;
}
.feat-list {
list-style: none;
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.feat-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
font-family: 'Cormorant Garamond',serif;
font-size: 1.05rem;
color: var(--light);
line-height: 1.5;
}
.feat-dash {
width: 22px;
height: 1px;
background: var(--gold);
flex-shrink: 0;
margin-top: .7rem;
}
/* ─── CTA / PRENOTAZIONI ─────────────────── */
.cta {
background: var(--ink-mid);
text-align: center;
padding: 9rem 5rem;
position: relative;
overflow: hidden;
}
.cta::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 700px;
height: 700px;
background: radial-gradient(circle,rgba(200,75,24,.15) 0%,transparent 65%);
pointer-events: none;
}
.cta-inner {
position: relative;
z-index: 1;
max-width: 640px;
margin: 0 auto;
}
.cta h2 {
font-family: 'Playfair Display',serif;
font-size: clamp(2.5rem,5vw,5rem);
font-weight: 900;
line-height: 1.1;
color: var(--cream);
margin-bottom: 1.2rem;
}
.cta h2 em {
font-style: italic;
color: var(--gold);
display: block;
}
.cta p {
font-family: 'Cormorant Garamond',serif;
font-size: 1.15rem;
color: var(--light);
font-style: italic;
margin-bottom: 3rem;
}
.cta-tel {
display: block;
margin-top: 2rem;
font-family: 'Playfair Display',serif;
font-size: clamp(2.2rem, 5.5vw, 4rem);
font-weight: 900;
color: var(--gold);
text-decoration: none;
letter-spacing: .04em;
transition: color .3s;
font-style: italic;
margin-bottom: .4rem;
}
.cta-tel:hover {
color: var(--cream);
}
.cta-tel-label {
display: block;
font-size: .7rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 3.5rem;
}
/* ═══════════════════════════════════════════════════
PRENOTA — WHATSAPP
═══════════════════════════════════════════════════ */
.prenota {
background: var(--ink-mid);
position: relative;
overflow: hidden;
}
.prenota::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 700px;
height: 700px;
background: radial-gradient(circle,rgba(200,75,24,.14) 0%,transparent 65%);
pointer-events: none;
}
.prenota-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: 1400px;
margin: 0 auto;
align-items: stretch;
position: relative;
z-index: 1;
}
/* Left: photo */
.prenota-photo {
position: relative;
overflow: hidden;
min-height: 580px;
}
.prenota-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
filter: grayscale(10%) sepia(8%);
transform: scale(1.04);
transition: transform .8s;
}
.prenota-photo:hover img {
transform: scale(1);
}
.prenota-photo::after {
content: '';
position: absolute;
top: 0;
right: -1px;
bottom: 0;
width: 80px;
background: var(--ink-mid);
clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%);
}
/* Right: form area */
.prenota-form-wrap {
padding: 6rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.prenota-form-wrap h2 {
font-family: 'Playfair Display',serif;
font-size: clamp(1.8rem,3vw,3.2rem);
font-weight: 800;
line-height: 1.2;
color: var(--cream);
margin-bottom: 1rem;
}
.prenota-form-wrap h2 em {
font-style: italic;
color: var(--gold);
}
.prenota-form-wrap > p {
font-family: 'Cormorant Garamond',serif;
font-size: 1.1rem;
color: var(--light);
line-height: 1.9;
margin-bottom: 2.5rem;
}
/* Form fields */
.prenota-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-field {
display: flex;
flex-direction: column;
gap: .45rem;
}
.form-field label {
font-size: .58rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--muted);
}
.form-field input,
.form-field select,
.form-field textarea {
background: rgba(191,164,106,.06);
border: 1px solid rgba(191,164,106,.2);
color: var(--cream);
/*
font-family: 'Cormorant Garamond',serif;
font-style: italic;
*/
font-size: 1rem;
padding: .85rem 1.2rem;
outline: none;
transition: border-color .3s, background .3s;
width: 100%;
appearance: none;
-webkit-appearance: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: var(--muted);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: rgba(191,164,106,.55);
background: rgba(191,164,106,.1);
}
.form-field select {
cursor: none;
}
.form-field select option {
background: var(--ink-mid);
color: var(--cream);
}
.form-field textarea {
resize: none;
min-height: 90px;
}
/* WhatsApp CTA button */
.btn-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .9rem;
background: var(--wa-green);
color: #fff;
font-family: 'Jost',sans-serif;
font-size: .7rem;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
padding: 1.1rem 2.8rem;
text-decoration: none;
border: none;
transition: background .3s, transform .2s;
position: relative;
overflow: hidden;
cursor: none;
margin-top: .5rem;
}
.btn-whatsapp::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,.15);
transform: translateX(-105%);
transition: transform .35s;
}
.btn-whatsapp:hover::before {
transform: translateX(0);
}
.btn-whatsapp:hover {
transform: translateY(-2px);
background: #1ebe57;
}
.btn-whatsapp svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* WhatsApp floating bubble */
.wa-float {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 800;
width: 56px;
height: 56px;
background: var(--wa-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 20px rgba(37,211,102,.35);
transition: transform .3s, box-shadow .3s;
opacity: 0;
animation: fadeIn 1s ease 3s forwards;
}
.wa-float:hover {
transform: scale(1.1);
box-shadow: 0 6px 28px rgba(37,211,102,.5);
}
.wa-float svg {
width: 28px;
height: 28px;
}
.wa-float-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(37,211,102,.4);
animation: waPulse 2.5s ease infinite;
}
@keyframes waPulse {
0% {
transform: scale(1);
opacity: .7;
}
70% {
transform: scale(1.6);
opacity: 0;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}
/* Info side info blocks */
.prenota-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(191,164,106,.1);
margin-top: 2.5rem;
}
.pi-box {
background: var(--ink-soft);
padding: 1.6rem;
transition: background .3s;
}
.pi-box:hover {
background: #2e2216;
}
.pi-box-label {
font-size: .55rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: .5rem;
}
.pi-box-val {
font-family: 'Playfair Display',serif;
font-size: 1.1rem;
font-weight: 800;
color: var(--cream);
display: block;
line-height: 1.2;
}
.pi-box-note {
font-family: 'Cormorant Garamond',serif;
font-size: .85rem;
font-style: italic;
color: var(--muted);
margin-top: .2rem;
display: block;
}
/* Or divider */
.prenota-or {
display: flex;
align-items: center;
gap: 1.5rem;
margin: 2rem 0;
}
.prenota-or span {
font-family: 'Cormorant Garamond',serif;
font-size: .85rem;
font-style: italic;
color: var(--muted);
}
.prenota-or::before, .prenota-or::after {
content: '';
flex: 1;
height: 1px;
background: rgba(191,164,106,.2);
}
.prenota-tel {
display: block;
font-family: 'Playfair Display',serif;
font-size: 1.8rem;
font-weight: 900;
font-style: italic;
color: var(--gold);
text-decoration: none;
letter-spacing: .02em;
transition: color .3s;
margin-bottom: .3rem;
}
.prenota-tel:hover {
color: var(--cream);
}
.prenota-tel-note {
font-size: .58rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--muted);
}
/* ─── ORARI BAND ─────────────────────────── */
.orari-band {
background: var(--ink-soft);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-top: 1px solid rgba(191,164,106,.15);
}
.ob {
padding: 3rem 3.5rem;
border-right: 1px solid rgba(191,164,106,.1);
}
.ob:last-child {
border: none;
}
.ob-label {
font-size: .58rem;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: .9rem;
}
.ob-val {
font-family: 'Playfair Display',serif;
font-size: 1.3rem;
font-weight: 800;
color: var(--cream);
display: block;
line-height: 1.3;
}
.ob-note {
font-family: 'Cormorant Garamond',serif;
font-size: .9rem;
color: var(--muted);
font-style: italic;
display: block;
margin-top: .4rem;
}
/* ─── FOOTER ─────────────────────────────── */
footer {
background: var(--ink);
border-top: 1px solid rgba(191,164,106,.12);
padding: 5rem 5rem 3rem;
}
.foot-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 5rem;
max-width: 1280px;
margin: 0 auto 4rem;
}
.foot-brand .nav-logo-main {
font-size: 1.5rem;
display: block;
margin-bottom: .4rem;
}
.foot-brand p {
/*font-family: 'Cormorant Garamond',serif;
font-style: italic;
*/
font-size: 1rem;
color: var(--muted);
line-height: 1.85;
margin-top: 1.2rem;
max-width: 360px;
}
.foot-col h4 {
font-size: .58rem;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.4rem;
}
.foot-col ul {
list-style: none;
padding-left:0;
}
.foot-col ul li {
margin-bottom: .75rem;
}
.foot-col ul li a {
font-size: .85rem;
color: var(--muted);
text-decoration: none;
transition: color .3s;
}
.foot-col ul li a:hover {
color: var(--gold);
}
.foot-col address {
font-size: .85rem;
color: var(--muted);
line-height: 1.9;
}
.foot-col address a {
color: var(--gold);
text-decoration: none;
}
/* Contatti footer con icone inline (telefono + email)
- icona linea oro, eredita colore via currentColor (segue il link)
- allineamento inline-flex con gap fisso, no wrap interno */
.foot-contact {
display: inline-flex;
align-items: center;
gap: .55rem;
text-decoration: none;
color: var(--gold);
transition: color .25s ease, transform .25s ease;
/* baseline visiva con il resto dell'address */
line-height: 1.9;
}
.foot-contact:hover {
color: var(--gold-light);
}
.foot-contact-ico {
width: 14px;
height: 14px;
flex: 0 0 auto;
opacity: .85;
transition: opacity .25s ease;
}
.foot-contact:hover .foot-contact-ico {
opacity: 1;
}
/* Banda dati societari (obbligo legge italiana) */
.foot-legal {
border-top: 1px solid rgba(191,164,106,.1);
padding-top: 1.6rem;
margin-top: 1.5rem;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.foot-legal-grid {
display: flex;
flex-wrap: wrap;
gap: 1.2rem 2rem;
}
.foot-legal-item {
display: flex;
flex-direction: column;
gap: .15rem;
min-width: 160px;
}
.foot-legal-label {
font-size: .58rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--muted);
}
.foot-legal-val {
font-size: .85rem;
color: var(--light);
font-family: 'Jost', sans-serif;
}
.foot-bottom {
border-top: 1px solid rgba(191,164,106,.1);
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1280px;
margin: 0 auto;
}
.foot-bottom p {
font-size: .6rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--muted);
}
.foot-social {
display: flex;
gap: 2rem;
}
.foot-social a {
font-size: .6rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color .3s;
}
.foot-social a:hover {
color: var(--gold);
}
/* ─── FOOTER LEGAL LINKS (privacy + cookie) ──────────────── */
.foot-bottom-left {
display: flex;
flex-direction: column;
gap: .55rem;
}
.foot-legal-links {
font-size: .6rem !important;
letter-spacing: .2em !important;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
.foot-legal-links a {
color: var(--muted);
text-decoration: none;
transition: color .3s ease;
}
.foot-legal-links a:hover { color: var(--gold); }
.foot-legal-links span {
margin: 0 .55rem;
opacity: .55;
}
/* ─── REVEAL ─────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity .8s ease,transform .8s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.section-video-grill {
width: 100%;
height: 70vh;
overflow: hidden;
position: relative;
}
.section-video-grill .video-wrap {
width: 100%;
height: 100%;
padding: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
position: relative;
z-index: 3;
}
.section-video-grill .video-wrap:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.35); /* regola qui l'opacità */
z-index: 4;
pointer-events: none;
}
.section-video-grill .video-grill-cut {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: auto;
display: block;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
.section-video-grill .video-content {
position: relative;
z-index: 10;
color: #ffffff;
padding: 20px;
max-width: 900px;
}
.section-video-grill .title-video {
font-size: 42px;
line-height: 1.2;
margin-bottom: 15px;
font-weight: 700;
}
.section-video-grill .desc-video {
font-size: 20px;
line-height: 1.5;
margin-bottom: 0;
}
/* ═══════════════════════════════════════════════════
GALLERY
═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
GALLERY GRID FULL BLOCK
═══════════════════════════════════════════════════ */
.gallery-section {
width: 100%;
background: var(--ink);
padding: 0 0 0 0;
overflow: hidden;
}
.gallery-head {
padding: 7rem 5rem 3rem 5rem;
max-width: 900px;
}
.gallery-head h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 4vw, 4.6rem);
font-weight: 800;
line-height: 1.05;
color: var(--cream);
margin-bottom: 1rem;
}
.gallery-head h2 em {
font-style: italic;
color: var(--gold);
}
.gallery-head p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--muted);
}
.gallery-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 18vw);
gap: 1px;
background: rgba(191,164,106,.08);
}
.gallery-card {
position: relative;
display: block;
overflow: hidden;
background: var(--ink-soft);
text-decoration: none;
}
.gallery-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.02);
transition: transform .7s ease, filter .35s ease;
filter: brightness(.86) contrast(1.02);
}
.gallery-card:hover img {
transform: scale(1.08);
filter: brightness(.98) contrast(1.06);
}
.gallery-card-hero {
grid-column: span 3;
grid-row: span 2;
}
.gallery-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.08) 100%);
z-index: 1;
transition: background .35s ease;
}
.gallery-card:hover .gallery-overlay {
background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.20) 55%, rgba(191,164,106,.08) 100%);
}
.gallery-copy {
position: absolute;
left: 1.3rem;
right: 1.3rem;
bottom: 1.2rem;
z-index: 2;
transform: translateY(8px);
transition: transform .35s ease;
}
.gallery-card:hover .gallery-copy {
transform: translateY(0);
}
.gallery-kicker {
display: inline-block;
font-size: .55rem;
letter-spacing: .30em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .65rem;
}
.gallery-copy h3 {
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
line-height: 1.2;
color: var(--cream);
margin: 0;
}
.gallery-card-hero .gallery-copy h3 {
font-size: clamp(1.4rem, 2vw, 2.2rem);
}
.gallery-lightbox {
position: fixed;
inset: 0;
background: rgba(7, 6, 5, .94);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .35s ease, visibility .35s ease;
z-index: 99999;
}
.gallery-lightbox.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.gallery-lightbox-inner {
position: relative;
max-width: 92vw;
max-height: 90vh;
text-align: center;
}
.gallery-lightbox-inner img {
max-width: 100%;
max-height: 80vh;
display: block;
margin: 0 auto;
border: 1px solid rgba(191,164,106,.14);
box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.gallery-lightbox-caption {
margin-top: 1rem;
color: var(--muted);
font-size: .95rem;
}
.gallery-lightbox-close {
position: absolute;
top: 1rem;
right: 1.5rem;
background: transparent;
border: none;
color: var(--cream);
font-size: 2.4rem;
line-height: 1;
cursor: pointer;
z-index: 2;
}
.gallery-lightbox-close:hover {
color: var(--gold);
}
/* ===== FRECCE PREV / NEXT del lightbox ===== */
.gallery-lightbox-prev,
.gallery-lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
background: rgba(0, 0, 0, .45);
border: 1px solid rgba(255, 255, 255, .18);
color: var(--cream);
border-radius: 50%;
cursor: pointer;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.gallery-lightbox-prev { left: 1.5rem; }
.gallery-lightbox-next { right: 1.5rem; }
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
background: rgba(191, 164, 106, .25);
border-color: var(--gold);
color: var(--gold);
}
.gallery-lightbox-prev:active { transform: translateY(-50%) scale(.95) translateX(-2px); }
.gallery-lightbox-next:active { transform: translateY(-50%) scale(.95) translateX(2px); }
/* Contatore "3 / 13" in basso a destra */
.gallery-lightbox-counter {
margin-top: .5rem;
font-family: 'Jost', sans-serif;
font-size: .72rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--muted);
}
/* ===== FIX CURSORE quando il lightbox e' aperto =====
Il sito usa un cursore custom (.cur con z-index 9999) che pero' sta
SOTTO al lightbox (z:99999), quindi sparisce dietro l'overlay.
Nascondiamo il cursore custom e riabilitiamo il cursore standard del browser,
con varianti specifiche per zone interattive (frecce/chiudi/immagine). */
body.lightbox-open .cur { display: none; }
body.lightbox-open { cursor: default; }
.gallery-lightbox { cursor: zoom-out; }
.gallery-lightbox-inner { cursor: default; }
.gallery-lightbox-inner img { cursor: zoom-out; }
.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next { cursor: pointer; }
/* ═══════════════════════════════════════════════════════════
MENU DIGITALE - pagina /{lng}/{menu-seg-tradotto}/{hash}/
═══════════════════════════════════════════════════════════ */
.md-hero {
position: relative;
text-align: center;
padding: 14rem 2rem 5rem;
background: radial-gradient(ellipse at top, rgba(191,164,106,.10), transparent 60%), var(--ink);
}
.md-hero-inner { max-width: 820px; margin: 0 auto; }
.md-hero-kicker {
font-size: .68rem;
letter-spacing: .55em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.4rem;
}
.md-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 5vw, 4.5rem);
font-weight: 800;
line-height: 1.05;
color: var(--cream);
margin: 0 0 1.4rem;
}
.md-hero-lead {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1rem, 1.5vw, 1.2rem);
color: var(--muted);
line-height: 1.7;
max-width: 680px;
margin: 0 auto;
}
/* Nav SEMPRE visibile durante lo scroll, posizionata ESATTAMENTE sotto al
nav principale del sito.
Usiamo position:fixed (non sticky) perche' lo sticky viene rotto da
overflow-x:hidden sul body, presente in tutto il sito. Fixed e' deterministico.
La variabile --md-nav-offset viene aggiornata da JS al load + on resize con
l'altezza REALE del nav principale, cosi' non rischiamo mai sovrapposizioni
anche se il logo cambia o le font-size scalano. Fallback 70px. */
.md-cat-nav {
position: fixed;
top: var(--md-nav-offset, 70px);
left: 0;
right: 0;
z-index: 900; /* sotto al nav principale (z-index:1000) ma sopra al contenuto */
background: rgba(15,12,10,.96);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(191,164,106,.18);
}
/* Nella pagina menu forziamo il nav principale del sito sempre in stato "compatto"
(sfondo opaco + padding ridotto) per non avere un gap variabile tra nav del sito
e barra menu. Questa e' la convenzione UX di TripAdvisor, Yelp, Resy quando la
pagina ha gia' una propria toolbar interna.
La classe menu-page viene aggiunta al body via JS nella aspx.
transition:none e' CRUCIALE: senza, il nav anima da 2.2rem a 1.2rem di padding
in 400ms al load, e la misurazione JS dell'altezza arriva DURANTE l'animazione
sbagliando di 30-40px (il sintomo era "barra staccata al load, ok dopo resize"). */
body.menu-page #nav {
background: rgba(22,18,16,.96);
backdrop-filter: blur(16px);
padding: 1.2rem 5rem;
border-bottom: 1px solid rgba(191,164,106,.18);
transition: none;
}
/* Le categorie partono SOTTO la barra menu fixed (compenso visivo del top) */
.md-categories-spacer { height: 0; }
.md-cat-nav-inner {
display: flex;
gap: 1.6rem;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(191,164,106,.3) transparent;
padding: 1rem 2rem;
justify-content: center;
flex-wrap: wrap;
}
.md-cat-nav-inner::-webkit-scrollbar { height: 4px; }
.md-cat-nav-inner::-webkit-scrollbar-thumb { background: rgba(191,164,106,.3); border-radius: 2px; }
.md-cat-nav a {
flex: 0 0 auto;
font-family: 'Jost', sans-serif;
font-size: .72rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
padding: .35rem .1rem;
border-bottom: 1px solid transparent;
transition: color .25s ease, border-color .25s ease;
white-space: nowrap;
}
.md-cat-nav a:hover,
.md-cat-nav a.active {
color: var(--gold);
border-bottom-color: var(--gold);
}
/* Sezioni categoria */
.md-categories { background: var(--ink); padding: 0 0 8rem; }
.md-cat {
padding: 5rem 5rem 3rem;
max-width: 1100px;
margin: 0 auto;
/* Quando si arriva via anchor (#cat-xxx) lo scroll si ferma sotto la barra menu fixed.
Si basa sulla CSS var aggiornata da JS (altezza nav del sito + ~60px barra menu). */
scroll-margin-top: calc(var(--md-nav-offset, 70px) + 70px);
}
.md-cat-intro {
text-align: center;
margin-bottom: 3rem;
padding-bottom: 1.4rem;
border-bottom: 1px solid rgba(191,164,106,.18);
}
.md-cat-counter {
display: inline-block;
font-size: .68rem;
letter-spacing: .55em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .9rem;
font-family: 'Jost', sans-serif;
}
.md-cat-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 800;
color: var(--cream);
margin: 0 0 .8rem;
line-height: 1.1;
}
.md-cat-sub {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.1rem;
color: var(--gold);
margin: 0 0 .6rem;
}
.md-cat-desc {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
line-height: 1.75;
color: var(--muted);
margin: 0;
max-width: 640px;
margin: 0 auto;
}
/* Lista elementi del menu */
.md-items {
display: flex;
flex-direction: column;
gap: 1.8rem;
max-width: 880px;
margin: 0 auto;
}
.md-item {
position: relative;
padding-bottom: 1.4rem;
border-bottom: 1px dashed rgba(191,164,106,.12);
}
.md-item:last-child { border-bottom: none; }
/* Variante con immagine: layout 2 colonne (img sinistra + body destra).
Su mobile passa a 1 colonna con immagine sopra. */
.md-item.has-img {
display: grid;
grid-template-columns: 110px 1fr;
gap: 1.2rem;
align-items: start;
}
.md-item-img {
width: 110px;
height: 110px;
overflow: hidden;
border-radius: 4px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(191,164,106,.12);
}
.md-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s ease, filter .35s ease;
filter: brightness(.95);
}
.md-item.has-img:hover .md-item-img img {
transform: scale(1.06);
filter: brightness(1.05);
}
.md-item-body {
min-width: 0; /* per non far esplodere la grid quando i testi sono lunghi */
}
.md-item-top {
display: flex;
align-items: baseline;
gap: .8rem;
}
.md-item-name {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--cream);
margin: 0;
flex-shrink: 0;
}
.md-item-dots {
flex: 1;
border-bottom: 1px dotted rgba(191,164,106,.3);
transform: translateY(-3px);
min-width: 20px;
}
.md-item-price {
flex-shrink: 0;
display: inline-flex;
align-items: baseline;
gap: .35rem;
font-family: 'Jost', sans-serif;
font-weight: 500;
color: var(--gold);
font-size: 1rem;
}
.md-price-old {
color: var(--muted);
text-decoration: line-through;
font-size: .85rem;
margin-right: .3rem;
}
.md-price-new { color: var(--gold); font-weight: 600; }
.md-price-unit {
font-size: .72rem;
color: var(--muted);
margin-left: .15rem;
text-transform: lowercase;
}
.md-item-qta {
font-size: .75rem;
color: var(--muted);
margin-top: .35rem;
letter-spacing: .05em;
}
.md-item-desc {
margin: .55rem 0 0;
font-family: 'Jost', sans-serif;
font-size: .92rem;
font-weight: 300;
line-height: 1.65;
color: var(--light);
max-width: 620px;
letter-spacing: .01em;
}
.md-item-tags {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-top: .7rem;
}
.md-tag {
display: inline-block;
font-family: 'Jost', sans-serif;
font-size: .62rem;
letter-spacing: .18em;
text-transform: uppercase;
padding: .25rem .6rem;
background: rgba(191,164,106,.08);
border: 1px solid rgba(191,164,106,.25);
color: var(--gold);
}
/* ============= ICONE FILTRI / ALLERGENI sulle card =============
3 livelli di differenziazione filtri vs allergeni:
1) micro-label di prefisso ("CARATTERISTICHE" / "CONTIENE")
2) forma: cerchio singolo (filtri) vs cerchio con ring esterno (allergeni)
3) colore: oro (filtri) vs ramato/warning (allergeni)
Triplice ridondanza = a colpo d'occhio si capisce sempre cosa stai guardando,
importante perche' un errore sugli allergeni puo' essere pericoloso. */
.md-icons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem;
margin-top: .65rem;
}
.md-icons-allerg { margin-top: .45rem; }
/* Micro-label prefisso "CARATTERISTICHE" / "CONTIENE" */
.md-icons-label {
font-family: 'Jost', sans-serif;
font-size: .58rem;
font-weight: 500;
letter-spacing: .25em;
text-transform: uppercase;
color: rgba(191,164,106,.65); /* oro tenue per filtri */
margin-right: .25rem;
padding-right: .25rem;
border-right: 1px solid rgba(191,164,106,.2);
flex-shrink: 0;
}
.md-icons-label-warn {
color: rgba(217,122,62,.85); /* ramato per allergeni */
border-right-color: rgba(217,122,62,.3);
}
/* Piccolo glyph "warning" prima della label allergeni (subito riconoscibile) */
.md-icons-label-warn::before {
content: "\26A0\FE0E"; /* ⚠ in stile testuale, no emoji */
margin-right: .35em;
font-weight: 400;
}
.md-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid;
transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
cursor: help;
flex-shrink: 0;
}
.md-ico-food {
color: var(--gold);
border-color: rgba(191,164,106,.35);
background: rgba(191,164,106,.08);
}
.md-ico-food:hover {
transform: translateY(-2px);
background: rgba(191,164,106,.18);
border-color: var(--gold);
}
/* ALLERGENI: cerchio singolo come i filtri (no doppio bordo), distinzione
affidata a colore ramato + micro-label "CONTIENE" che li precede. */
.md-ico-allerg {
color: #d97a3e;
border-color: rgba(217,122,62,.45);
background: rgba(217,122,62,.1);
}
.md-ico-allerg:hover {
transform: translateY(-2px);
background: rgba(217,122,62,.22);
border-color: #d97a3e;
}
.md-ico svg {
width: 16px;
height: 16px;
display: block;
}
/* ============= RIQUADRO "SFOGLIA ANCHE" - banner evocativi cross-link ============= */
/* Mostrato in coda al menu (sia "menu cibo" che "carta dei vini").
Ogni altro menu disponibile diventa un BANNER FULL-WIDTH con:
- immagine di sfondo cover (vini.jpg / costine.jpg o quella del CMS)
- overlay sfumato dall'ink (in basso) verso trasparente (in alto)
- testo bottom-left con titolo display, descrizione, CTA "vai al menu"
- micro animazioni hover: zoom immagine, freccia che scorre, overlay piu' soft
E' pensato per chiamare visivamente l'attenzione su "guarda anche questo",
non un quadratino piatto ma un assaggio fotografico dell'altro menu. */
.md-other-menus {
display: block;
background: var(--ink);
padding: 4rem 1.2rem 5rem;
color: var(--bone);
border-top: 1px solid rgba(191,164,106,.18);
}
.md-other-menus-head {
max-width: 70rem;
margin: 0 auto 2.5rem;
text-align: center;
}
.md-other-menus-eyebrow {
display: inline-block;
font-family: var(--font-display, "Cormorant Garamond", serif);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-style: italic;
font-weight: 400;
letter-spacing: .02em;
color: var(--gold, #bfa46a);
margin: 0 0 .8rem;
position: relative;
padding: 0 1.4rem;
}
/* Decorazione: due lineette sottili ai lati dell'eyebrow */
.md-other-menus-eyebrow::before,
.md-other-menus-eyebrow::after {
content: "";
display: inline-block;
position: absolute;
top: 50%;
width: 32px;
height: 1px;
background: rgba(191,164,106,.45);
}
.md-other-menus-eyebrow::before { left: -34px; }
.md-other-menus-eyebrow::after { right: -34px; }
.md-other-menus-intro {
font-size: 1rem;
line-height: 1.6;
color: rgba(245,239,224,.78);
max-width: 36rem;
margin: 0 auto;
}
/* Stack verticale dei banner (uno per menu). Su mobile e desktop. */
.md-other-menus-banners {
max-width: 78rem;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.6rem;
}
/* ----------------- BANNER SINGOLO ----------------- */
.md-other-banner {
position: relative;
display: block;
overflow: hidden;
border-radius: 14px;
color: var(--bone);
text-decoration: none;
isolation: isolate; /* contiene i blend dei figli */
min-height: 260px; /* mobile */
box-shadow: 0 18px 48px -20px rgba(0,0,0,.6);
transition: transform .35s ease, box-shadow .35s ease;
}
.md-other-banner:hover,
.md-other-banner:focus-visible {
transform: translateY(-3px);
box-shadow: 0 24px 60px -22px rgba(0,0,0,.75);
color: var(--bone);
text-decoration: none;
}
/* Immagine di sfondo (assoluta, cover, zoom su hover) */
.md-other-banner-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.md-other-banner-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.02);
transition: transform 1s ease;
filter: saturate(1.05);
}
.md-other-banner:hover .md-other-banner-bg img {
transform: scale(1.08);
}
/* Overlay sfumato verticale per leggibilita' testo (bottom -> top) */
.md-other-banner-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(15,15,15,0.15) 0%,
rgba(15,15,15,0.55) 55%,
rgba(15,15,15,0.92) 100%);
transition: opacity .35s ease;
}
.md-other-banner:hover .md-other-banner-overlay {
opacity: .88;
}
/* Inner: contenuto testuale (bottom-left padded) */
.md-other-banner-inner {
position: relative;
z-index: 2;
height: 100%;
min-height: inherit;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.6rem 1.4rem 1.4rem;
gap: .5rem;
}
.md-other-banner-eyebrow {
font-size: .7rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold, #bfa46a);
opacity: .95;
}
.md-other-banner-title {
font-family: var(--font-display, "Cormorant Garamond", serif);
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 500;
line-height: 1.1;
margin: .15rem 0 .35rem;
color: var(--bone);
text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.md-other-banner-desc {
font-size: .95rem;
line-height: 1.55;
color: rgba(245,239,224,.85);
margin: 0 0 .8rem;
max-width: 32rem;
text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
/* CTA inline: testo + freccia + underline animato */
.md-other-banner-cta {
margin-top: .4rem;
display: inline-flex;
align-items: center;
gap: .6rem;
font-size: .85rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold, #bfa46a);
align-self: flex-start;
padding: .6rem 1rem;
border: 1px solid rgba(191,164,106,.6);
border-radius: 999px;
backdrop-filter: blur(2px);
background: rgba(15,15,15,.18);
transition: background .3s ease, border-color .3s ease, gap .3s ease, color .3s ease;
}
.md-other-banner:hover .md-other-banner-cta {
background: rgba(191,164,106,.95);
border-color: rgba(191,164,106,1);
color: var(--ink);
gap: .9rem;
}
.md-other-banner-cta svg {
transition: transform .35s ease;
}
.md-other-banner:hover .md-other-banner-cta svg {
transform: translateX(4px);
}
/* Variante visiva soft per tipo (utile per micro-tuning futuro):
- is-wine: leggero tint amaranto sul gradient
- is-food: leggero tint terra
Per ora invariato il gradient default. Lasciate qui le classi pronte. */
.md-other-banner.is-wine .md-other-banner-overlay {
background:
linear-gradient(180deg,
rgba(40,15,20,0.18) 0%,
rgba(20,12,15,0.55) 55%,
rgba(15,10,12,0.92) 100%);
}
.md-other-banner.is-food .md-other-banner-overlay {
background:
linear-gradient(180deg,
rgba(30,20,12,0.18) 0%,
rgba(20,14,10,0.55) 55%,
rgba(15,12,10,0.92) 100%);
}
/* ============= FAB "LEGENDA" - bottone fisso basso-sinistra ============= */
.md-legend-fab {
position: fixed;
left: 1.2rem;
bottom: 1.2rem;
z-index: 800; /* sotto al drawer, sopra ai contenuti */
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .7rem 1.1rem .7rem .9rem;
background: var(--gold);
color: var(--ink);
border: 1px solid var(--gold);
border-radius: 999px;
font-family: 'Jost', sans-serif;
font-size: .72rem;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 6px 22px rgba(0,0,0,.35);
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.md-legend-fab:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(191,164,106,.45);
background: var(--gold-light);
}
.md-legend-fab svg { flex: 0 0 auto; }
/* ============= DRAWER LEGENDA (overlay full-screen) ============= */
.md-legend-overlay {
position: fixed;
inset: 0;
z-index: 1500;
background: rgba(10,7,5,.65);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity .3s ease;
display: flex;
justify-content: flex-start;
}
.md-legend-overlay.is-open { opacity: 1; }
.md-legend-panel {
width: min(560px, 92vw);
max-height: 100vh;
overflow-y: auto;
background: var(--ink);
border-right: 1px solid rgba(191,164,106,.18);
transform: translateX(-100%);
transition: transform .35s cubic-bezier(.2,.7,.1,1);
display: flex;
flex-direction: column;
}
.md-legend-overlay.is-open .md-legend-panel { transform: translateX(0); }
.md-legend-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.6rem 1.6rem 1rem;
border-bottom: 1px solid rgba(191,164,106,.15);
position: sticky;
top: 0;
background: var(--ink);
z-index: 2;
}
.md-legend-header h2 {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 800;
color: var(--cream);
margin: 0;
}
.md-legend-header h2::before {
content: '';
display: inline-block;
width: 24px;
height: 1px;
background: var(--gold);
vertical-align: middle;
margin-right: 12px;
}
.md-legend-close {
background: transparent;
border: 1px solid rgba(191,164,106,.3);
color: var(--gold);
width: 38px;
height: 38px;
border-radius: 50%;
cursor: pointer;
transition: background .25s, border-color .25s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.md-legend-close:hover { background: rgba(191,164,106,.1); border-color: var(--gold); }
.md-legend-intro {
padding: .6rem 1.6rem 0;
font-family: 'Jost', sans-serif;
font-size: .85rem;
font-weight: 300;
color: var(--muted);
margin: 0;
}
.md-legend-content { padding: 1.4rem 1.6rem 3rem; }
.md-legend-section + .md-legend-section { margin-top: 2rem; }
.md-legend-section-title {
font-family: 'Jost', sans-serif;
font-size: .65rem;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 1rem;
padding-bottom: .55rem;
border-bottom: 1px solid rgba(191,164,106,.2);
}
.md-legend-grid { display: flex; flex-direction: column; gap: 1rem; }
.md-legend-card {
display: grid;
grid-template-columns: 40px 1fr;
gap: 1rem;
align-items: start;
}
.md-legend-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid;
flex: 0 0 auto;
}
.md-legend-card.is-food .md-legend-ico {
color: var(--gold);
border-color: rgba(191,164,106,.45);
background: rgba(191,164,106,.1);
}
.md-legend-card.is-allerg .md-legend-ico {
color: #d97a3e;
border-color: rgba(217,122,62,.5);
background: rgba(217,122,62,.1);
}
.md-legend-title {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 700;
color: var(--cream);
margin-bottom: .2rem;
}
.md-legend-desc {
font-family: 'Jost', sans-serif;
font-size: .82rem;
font-weight: 300;
line-height: 1.55;
color: var(--muted);
}
.md-item.is-esaurito { opacity: .55; }
.md-item-soldout {
display: inline-block;
margin-top: .6rem;
padding: .2rem .55rem;
font-size: .62rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--ember);
border: 1px solid var(--ember);
}
/* Elementi separatori (Title / Subtitle / Text dentro la categoria) */
.md-item-title {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1.3rem;
color: var(--gold);
margin: 2.4rem 0 .6rem;
padding-bottom: .4rem;
border-bottom: 1px solid rgba(191,164,106,.2);
}
.md-item-subtitle {
font-family: 'Jost', sans-serif;
font-size: .72rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--muted);
margin: 1.6rem 0 .4rem;
}
.md-item-text {
font-family: 'Jost', sans-serif;
font-size: .92rem;
font-weight: 300;
line-height: 1.65;
color: var(--muted);
margin: .8rem 0 1.4rem;
max-width: 640px;
letter-spacing: .01em;
}
/* ═══════════════════════════════════════════════════════════
GALLERY DEDICATA - pagina /{lng}/gallery/
Filosofia editoriale asimmetrica:
- Hero pulito con titolo Playfair
- Sezioni per categoria con numero progressivo "01 / 06"
- Griglia "broken" con foto miste (span variabili)
- Reveal-on-scroll fluido
- Mobile: 2 colonne, gap ridotto, tipografia scalata
═══════════════════════════════════════════════════════════ */
/* HERO compatto della pagina */
.gp-hero {
position: relative;
min-height: 50svh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 14rem 2rem 6rem;
background:
radial-gradient(ellipse at top, rgba(191,164,106,.10), transparent 60%),
var(--ink);
overflow: hidden;
}
.gp-hero-inner {
max-width: 820px;
z-index: 2;
}
.gp-hero-kicker {
font-size: .68rem;
letter-spacing: .55em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.4rem;
}
.gp-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.4rem, 5.2vw, 5rem);
font-weight: 800;
line-height: 1.05;
color: var(--cream);
margin: 0 0 1.4rem;
}
.gp-hero-title em {
font-style: italic;
color: var(--gold);
}
.gp-hero-lead {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1rem, 1.5vw, 1.2rem);
color: var(--muted);
line-height: 1.7;
max-width: 620px;
margin: 0 auto;
}
.gp-hero-scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 60px;
background: linear-gradient(to bottom, transparent, var(--gold));
opacity: .55;
}
/* CATEGORIE - sezioni a tutto schermo */
.gp-categories {
background: var(--ink);
padding: 0 0 8rem;
}
.gp-cat {
padding: 6rem 5rem 3rem;
}
.gp-cat-intro {
max-width: 980px;
margin: 0 auto 2.8rem;
padding-bottom: 1.4rem;
border-bottom: 1px solid rgba(191,164,106,.18);
}
.gp-cat-counter {
display: inline-block;
font-size: .68rem;
letter-spacing: .55em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
font-family: 'Jost', sans-serif;
}
.gp-cat-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.6rem);
font-weight: 800;
line-height: 1.05;
color: var(--cream);
margin: 0;
}
.gp-cat-desc {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
line-height: 1.8;
color: var(--muted);
margin-top: 1.2rem;
max-width: 720px;
}
/* GRIGLIA "BROKEN" - foto di dimensioni miste */
.gp-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 220px;
gap: 14px;
grid-auto-flow: dense; /* riempie i buchi delle card grandi */
}
.gp-card {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
background: var(--ink-soft);
cursor: pointer;
/* reveal default */
opacity: 0;
transform: translateY(40px);
transition: opacity .8s ease, transform .8s ease;
}
.gp-card.visible,
.gp-card.reveal:not(.visible) ~ .gp-card.reveal,
.gp-card:not(.reveal) {
opacity: 1;
transform: translateY(0);
}
/* L'IntersectionObserver aggiunge .visible quando entra in viewport */
.gp-card.visible {
opacity: 1;
transform: translateY(0);
}
.gp-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.04);
transition: transform .9s ease, filter .35s ease;
filter: brightness(.88) contrast(1.02);
}
.gp-card:hover img {
transform: scale(1.1);
filter: brightness(1) contrast(1.05);
}
/* SPAN VARIABILI (creano il ritmo) */
.gp-span-2x2 { grid-column: span 2; grid-row: span 2; }
.gp-span-2x1 { grid-column: span 2; }
.gp-span-1x2 { grid-row: span 2; }
/* OVERLAY testuale sulla card */
.gp-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10,7,5,.88) 0%, rgba(10,7,5,.25) 55%, transparent 100%);
opacity: .85;
transition: opacity .4s ease;
pointer-events: none;
}
.gp-card:hover .gp-card-overlay {
opacity: 1;
}
.gp-card-copy {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.2rem 1.4rem;
color: var(--cream);
pointer-events: none;
}
.gp-card-kicker {
display: inline-block;
font-size: .58rem;
letter-spacing: .4em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .35rem;
font-family: 'Jost', sans-serif;
}
.gp-card-copy h3 {
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.25;
color: var(--cream);
margin: 0;
}
.gp-span-2x2 .gp-card-copy h3 {
font-size: 1.4rem;
}
/* Reveal Intro categoria */
.gp-cat-intro.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity .9s ease, transform .9s ease;
}
.gp-cat-intro.reveal.visible,
.gp-cat-intro.visible {
opacity: 1;
transform: translateY(0);
}
/* ═══════════════════════════════════════════════════
LANGUAGE SWITCHER (nav top + footer + drawer mobile)
Markup di base:
- Desktop: hover apre il menu
- Mobile/touch: tap apre/chiude (JS aggiunge classe .open)
- Variante .foot-lang: dropup (menu appare verso l'alto)
═══════════════════════════════════════════════════ */
.lang-switcher {
position: relative;
display: inline-block;
}
.lang-switcher-btn {
display: inline-flex;
align-items: center;
gap: .4rem;
background: transparent;
border: 1px solid rgba(191,164,106,.35);
color: var(--gold);
font-family: 'Jost', sans-serif;
font-size: .72rem;
font-weight: 400;
letter-spacing: .22em;
text-transform: uppercase;
padding: .4rem .7rem .35rem .8rem;
cursor: none;
transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.lang-switcher-btn:hover,
.lang-switcher.open .lang-switcher-btn {
border-color: var(--gold);
background: rgba(191,164,106,.08);
}
.lang-switcher-current {
line-height: 1;
}
.lang-switcher-chevron {
transition: transform .25s ease;
display: block;
}
.lang-switcher:hover .lang-switcher-chevron,
.lang-switcher.open .lang-switcher-chevron {
transform: rotate(180deg);
}
.lang-switcher-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 72px;
list-style: none;
margin: 0;
padding: .3rem 0;
background: rgba(22,18,16,.98);
backdrop-filter: blur(14px);
border: 1px solid rgba(191,164,106,.22);
z-index: 1100;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity .25s ease, transform .25s ease;
}
/* PONTE INVISIBILE per non perdere :hover nel gap di 8px tra bottone e menu.
Senza questo, il mouse passa "nel vuoto" e il dropdown si chiude prima
di poter cliccare una voce. Lo pseudo-elemento e' figlio del menu
(che e' a sua volta figlio del .lang-switcher) quindi mantiene attivo l'hover. */
.lang-switcher-menu::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -10px;
height: 10px;
background: transparent;
}
.lang-switcher-menu li {
list-style: none;
}
.lang-switcher-menu a {
display: block;
padding: .5rem 1.1rem;
font-family: 'Jost', sans-serif;
font-size: .72rem;
font-weight: 400;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--light);
text-decoration: none;
transition: color .25s ease, background .25s ease;
}
.lang-switcher-menu a:hover {
color: var(--gold);
background: rgba(191,164,106,.08);
}
/* Desktop: hover apre. Su touch hover non funziona quindi serve la classe .open via JS. */
@media (hover: hover) {
.lang-switcher:hover .lang-switcher-menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
}
.lang-switcher.open .lang-switcher-menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Variante footer: dropup (apre verso l'alto) */
.foot-lang .lang-switcher-menu {
top: auto;
bottom: calc(100% + 8px);
transform: translateY(6px);
}
/* Stesso bridge anti-gap, ma in basso (il menu apre verso l'alto) */
.foot-lang .lang-switcher-menu::before {
top: auto;
bottom: -10px;
}
.foot-lang:hover .lang-switcher-menu,
.foot-lang.open .lang-switcher-menu {
transform: translateY(0);
}
/* Nel nav: spaziatura prima dell'hamburger */
.nav-lang {
margin-left: 1.2rem;
}
/* Riga inferiore footer: gruppo a destra (social + lang) */
.foot-bottom-right {
display: flex;
align-items: center;
gap: 1.6rem;
}
/* Lingue affiancate nel drawer mobile */
.drawer-lang {
display: flex;
gap: 1.4rem;
margin-top: 2rem;
padding-top: 1.6rem;
border-top: 1px solid rgba(191,164,106,.15);
}
.drawer-lang a {
font-family: 'Jost', sans-serif !important;
font-size: .82rem !important;
font-weight: 400 !important;
font-style: normal !important;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--muted) !important;
text-decoration: none;
padding: .3rem .15rem;
border-bottom: 1px solid transparent;
transition: color .25s ease, border-color .25s ease;
}
.drawer-lang a.active,
.drawer-lang a:hover {
color: var(--gold) !important;
border-bottom-color: var(--gold);
}
/* Responsive language switcher: nel nav su mobile resta visibile accanto all'hamburger
ma piu' compatto. */
@media (max-width: 960px) {
.nav-lang {
margin-left: auto; /* spinge a destra accanto all'hamburger */
margin-right: .6rem;
}
.nav-lang .lang-switcher-btn {
padding: .35rem .55rem .3rem .65rem;
font-size: .68rem;
}
.foot-bottom {
flex-direction: column;
gap: 1.4rem;
text-align: center;
}
.foot-bottom-right {
flex-direction: column;
gap: 1rem;
}
.foot-lang .lang-switcher-menu {
right: 50%;
transform: translate(50%, 6px);
}
.foot-lang:hover .lang-switcher-menu,
.foot-lang.open .lang-switcher-menu {
transform: translate(50%, 0);
}
}
/* ═══════════════════════════════════════════════════
PRENOTAZIONE - BOTTONI INVIO + FEEDBACK
═══════════════════════════════════════════════════ */
.btn-prenota-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
width: 100%;
margin-top: 1.2rem;
padding: 1rem 1.6rem;
background: var(--gold);
color: var(--ink);
border: 1px solid var(--gold);
font-family: 'Jost', sans-serif;
font-size: .82rem;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
cursor: none;
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-prenota-primary:hover:not(:disabled) {
background: transparent;
color: var(--gold);
transform: translateY(-1px);
}
.btn-prenota-primary:disabled {
opacity: .55;
cursor: not-allowed;
}
.btn-prenota-primary svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
/* WhatsApp diventa SECONDARIO: bordo verde, niente fill.
Su DESKTOP (>= 768px) viene nascosto: pochi utenti desktop hanno WhatsApp
configurato sul PC, e il bottone "Invia Richiesta" del form e' migliore UX.
Su mobile/tablet resta visibile come scorciatoia rapida. */
.btn-whatsapp {
margin-top: .6rem !important;
background: transparent !important;
color: var(--wa-green) !important;
border: 1px solid var(--wa-green) !important;
}
.btn-whatsapp svg path {
fill: var(--wa-green) !important;
}
.btn-whatsapp:hover:not(:disabled) {
background: var(--wa-green) !important;
color: #fff !important;
}
.btn-whatsapp:hover:not(:disabled) svg path {
fill: #fff !important;
}
/* ═══════════════════════════════════════════════════
PRIVACY CHECKBOX (GDPR) - obbligatorio prima di inviare
═══════════════════════════════════════════════════ */
.form-privacy {
margin-top: 1.4rem;
margin-bottom: .4rem;
}
.form-privacy-label {
display: flex;
align-items: flex-start;
gap: .7rem;
cursor: pointer;
user-select: none;
font-family: 'Jost', sans-serif;
font-weight: 300;
font-size: .88rem;
line-height: 1.5;
color: rgba(245, 235, 220, .82);
transition: color .25s ease;
margin: 0;
}
.form-privacy-label:hover { color: rgba(245, 235, 220, .98); }
/* Nascondiamo il checkbox nativo ma lo lasciamo focusabile / accessibile */
.form-privacy-label input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.form-privacy-box {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 1px;
border: 1.5px solid rgba(245, 235, 220, .45);
border-radius: 3px;
background: rgba(0, 0, 0, .25);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .2s ease, border-color .2s ease;
}
.form-privacy-box svg {
width: 14px;
height: 14px;
color: var(--bg);
opacity: 0;
transform: scale(.6);
transition: opacity .18s ease, transform .18s ease;
}
.form-privacy-label input[type="checkbox"]:checked + .form-privacy-box {
background: var(--ember);
border-color: var(--ember);
}
.form-privacy-label input[type="checkbox"]:checked + .form-privacy-box svg {
opacity: 1;
transform: scale(1);
}
.form-privacy-label input[type="checkbox"]:focus-visible + .form-privacy-box {
box-shadow: 0 0 0 3px rgba(200, 75, 24, .35);
}
.form-privacy-text a {
color: var(--gold);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
transition: color .25s ease;
}
.form-privacy-text a:hover { color: var(--ember); }
.form-privacy-required {
color: var(--ember);
font-weight: 500;
margin-left: 2px;
}
/* Stato errore: highlight rosso quando il form prova a inviare senza spunta */
.form-privacy.has-error .form-privacy-box {
border-color: var(--ember);
background: rgba(200, 75, 24, .12);
animation: privacyShake .35s ease;
}
.form-privacy.has-error .form-privacy-text {
color: #f0b9a4;
}
@keyframes privacyShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
.prenota-feedback {
margin-top: 1.2rem;
padding: 1rem 1.2rem;
border-radius: 2px;
font-size: .88rem;
line-height: 1.55;
border-left: 3px solid;
}
.prenota-feedback-success {
background: rgba(38, 166, 91, .08);
color: #b8e6c9;
border-left-color: #26a65b;
}
.prenota-feedback-error {
background: rgba(200, 75, 24, .08);
color: #f0b9a4;
border-left-color: var(--ember);
}
/* ═══════════════════════════════════════════════════
PRENOTAZIONE - DATE CARDS + TIME PILLS
Sostituisce gli e