/* SK Active website UI kit — page styles built on top of colors_and_type.css */
* { box-sizing: border-box; }
/* Blocca lo scroll/spostamento orizzontale (decori "jagged" e sezioni a tutta
larghezza non devono creare spazio laterale). `clip` non rompe position:sticky. */
html, body { margin: 0; padding: 0; overflow-x: clip; max-width: 100%; }
/* Desktop: testi un po' più generosi (la scala tipografica è in rem, quindi
tutto — menu compreso — si ingrandisce in proporzione). */
@media (min-width: 1024px) { html { font-size: 17.5px; } }
@media (min-width: 1440px) { html { font-size: 18px; } }
body { background: var(--bg); color: var(--fg); position: relative; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* ------------------ NAV ------------------ */
.nav {
position: sticky; top: 0; left: 0; right: 0; z-index: var(--z-nav);
background: #f9f7f2;
height: 72px; padding: 0 2.5rem;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid rgba(26,42,68,0.08);
box-shadow: 0 4px 16px rgba(26,42,68,0.08);
transition: background 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.nav.scrolled { background: rgba(249,247,242,0.94); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(26,42,68,0.10), 0 1px 0 rgba(26,42,68,0.06); }
.nav-logo { display: flex; align-items: center; gap: 0.85rem; color: var(--sk-deep-mineral); }
.nav-logo-img { height: 44px; width: auto; max-width: 64px; display: block; object-fit: contain; transition: filter 0.35s var(--ease-out); }
.nav.nav-on-overlay .nav-logo-img { filter: brightness(0) invert(1); }
.nav-logo-word { font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--sk-deep-mineral); line-height: 1; transition: color 0.35s var(--ease-out); }
.nav-logo-sub { display: block; font-weight: 400; font-size: 0.54rem; opacity: 0.6; margin-top: 4px; letter-spacing: 0.24em; }
.nav.nav-on-overlay .nav-logo-word { color: var(--sk-cloud-dancer); }
.nav-logo .mark { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; color: var(--sk-deep-mineral); line-height: 0.8; }
.nav-logo .word { font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; }
.nav-logo .word .sub { display: block; font-weight: 400; font-size: 0.55rem; opacity: 0.55; margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; padding: 0; margin: 0; }
.nav-links a { font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sk-deep-mineral); position: relative; padding: 0.5rem 0; cursor: pointer; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--accent); transition: right 0.3s var(--ease-out); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--accent); }
.nav-cta { background: var(--sk-deep-mineral); color: #f9f7f2 !important; padding: 0.65rem 1.4rem; font-weight: 600 !important; transition: background 0.3s; border: 0; }
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--sk-deep-mineral-2); }
/* === Santre-style nav-right + hamburger === */
.nav-right { display: flex; align-items: center; gap: 1.2rem; }
.nav-on-overlay { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
.nav-on-overlay .nav-logo, .nav-on-overlay .nav-logo .mark, .nav-on-overlay .nav-util { color: var(--sk-cloud-dancer); }
.nav-on-overlay .nav-logo .sub { color: rgba(241,240,236,0.6); }
.nav-on-overlay .lang { border-color: rgba(241,240,236,0.3); }
.nav-on-overlay .lang button { color: rgba(241,240,236,0.65); }
.nav-on-overlay .lang button.active { background: var(--accent); color: var(--sk-deep-mineral); }
.nav-on-overlay .hamburger span:not(.hamburger-label) { background: var(--sk-cloud-dancer); }
.nav-on-overlay .hamburger-label { color: var(--sk-cloud-dancer); }
.hamburger { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; background: transparent; border: 0; padding: 6px 0 6px 10px; cursor: pointer; }
.hamburger > span:not(.hamburger-label) { display: block; width: 26px; height: 1.5px; background: var(--sk-deep-mineral); border-radius: 1px; transition: transform 0.4s var(--ease-out), background 0.35s var(--ease-out), width 0.35s var(--ease-out), opacity 0.3s var(--ease-out); }
.hamburger > span:nth-child(1),
.hamburger > span:nth-child(2),
.hamburger > span:nth-child(3) { width: 26px; align-self: flex-start; }
.hamburger.is-open > span:nth-child(1) { transform: translateY(6px) rotate(45deg); width: 26px; }
.hamburger.is-open > span:nth-child(2) { opacity: 0; width: 26px; }
.hamburger.is-open > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 26px; }
.hamburger-label { display: none; }
/* === FULL-SCREEN OVERLAY === */
.sk-overlay { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); overflow: hidden; }
.sk-overlay-bg { position: absolute; inset: 0; background: var(--sk-deep-mineral); transform-origin: top; }
/* IL PULSANTE TONDO « X » NON C'E' PIU'.
Stava quasi sopra l'hamburger, che quando il menu e' aperto diventa gia' una
X: a schermo se ne vedevano DUE, da computer e da telefono. Segnalato
l'8 settembre 2026. Si chiude con l'hamburger, che e' lo stesso pulsante con
cui si e' aperto — vedi Website.components.js, componente Nav.
Le regole restano qui commentate per un attimo, poi si tolgono del tutto:
se un giorno servisse un secondo comando, va messo LONTANO dal primo. */
.sk-overlay.opening .sk-overlay-bg { animation: sk-bg-in 0.6s var(--ease-out) forwards; }
.sk-overlay.closing .sk-overlay-bg { animation: sk-bg-out 0.55s var(--ease-out) forwards; transform-origin: bottom; }
@keyframes sk-bg-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sk-bg-out { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.sk-overlay-grid { position: relative; height: 100vh; padding: 110px 5rem 3rem; display: grid; grid-template-columns: 1fr; max-width: 1640px; margin: 0 auto; overflow: hidden; }
.sk-overlay-eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 1rem; opacity: 0; animation: sk-fade-in 0.6s var(--ease-out) 0.3s forwards; margin-bottom: 3rem; }
.sk-overlay-eyebrow::before { content: ''; display: inline-block; width: 36px; height: 1.5px; background: var(--accent); }
.sk-overlay-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 3rem 4rem; flex: 1; align-content: start; }
.sk-overlay-menu { overflow-y: auto; padding: 0 1rem 2rem 0; min-height: 0; display: flex; flex-direction: column; }
.sk-overlay-menu::-webkit-scrollbar { width: 4px; }
.sk-overlay-menu::-webkit-scrollbar-thumb { background: rgba(196,168,120,0.4); border-radius: 4px; }
.sk-section { padding: 0; border: 0; opacity: 0; transform: translateY(20px); animation: sk-rise-in 0.55s var(--ease-out) forwards; display: flex; flex-direction: column; gap: 0.7rem; }
.sk-overlay.closing .sk-section { animation: sk-rise-out 0.4s var(--ease-out) forwards; }
.sk-section-head { display: flex; align-items: baseline; gap: 1rem; padding: 0; }
.sk-section-num { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 0.9rem; color: var(--accent); }
.sk-section-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.1; color: var(--sk-cloud-dancer); letter-spacing: -0.01em; transition: color 0.25s var(--ease-out); }
.sk-section:hover .sk-section-title { color: var(--accent); }
.sk-section-arrow { margin-left: auto; color: var(--accent); font-size: 1.2rem; transform: translateX(-6px); opacity: 0; transition: all 0.3s var(--ease-out); }
.sk-section:hover .sk-section-arrow { transform: translateX(0); opacity: 1; }
.sk-section-micro { font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: 0.78rem; color: rgba(241,240,236,0.55); line-height: 1.4; padding-left: 2.1rem; max-width: 28ch; }
.sk-section-list { list-style: none; padding: 0.4rem 0 0 2.1rem; margin: 0; display: flex; flex-direction: column; gap: 0.1rem; border-top: 1px solid rgba(241,240,236,0.10); padding-top: 0.9rem; margin-top: 0.4rem; }
.sk-section-list a { display: block; padding: 0.4rem 0; cursor: pointer; transition: transform 0.22s var(--ease-out); }
.sk-section-list a:hover { transform: translateX(4px); }
.sk-section-list a.active .sk-item-label { color: var(--accent); }
.sk-item-label { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.88rem; color: var(--sk-cloud-dancer); }
.sk-item-hint { display: block; font-family: var(--font-body); font-weight: 300; font-size: 0.7rem; color: rgba(241,240,236,0.5); margin-top: 0.1rem; line-height: 1.3; }
.sk-overlay-foot { display: flex; align-items: center; gap: 2rem; padding: 2.5rem 0 0; margin-top: 2.5rem; border-top: 1px solid rgba(241,240,236,0.1); opacity: 0; animation: sk-fade-in 0.5s var(--ease-out) 0.65s forwards; }
.sk-overlay-foot a { font-family: var(--font-body); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241,240,236,0.7); cursor: pointer; transition: color 0.2s var(--ease-out); }
.sk-overlay-foot a:hover { color: var(--accent); }
.sk-overlay-cta { margin-left: auto; background: var(--accent); color: var(--sk-deep-mineral) !important; padding: 0.95rem 1.8rem; border-radius: 999px; font-weight: 700 !important; transition: all 0.3s var(--ease-out); }
.sk-overlay-cta:hover { background: var(--sk-cloud-dancer); transform: translateY(-2px); }
@keyframes sk-fade-in { to { opacity: 1; } }
@keyframes sk-rise-in { to { opacity: 1; transform: translateY(0); } }
@keyframes sk-rise-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }
@media (max-width: 980px) {
.nav-logo-img { height: 34px; max-width: 50px; }
.nav-logo-word { font-size: 0.62rem; letter-spacing: 0.28em; }
.nav-right { gap: 0.6rem; }
.nav-util, .lang { display: none; }
.nav-cta { padding: 0.5rem 1rem; }
.sk-overlay-grid { padding: 90px 1.25rem 1.5rem; height: 100dvh; }
.sk-overlay-cols { gap: 2rem; }
.sk-section-title { font-size: 1.5rem; }
.sk-overlay-foot { flex-wrap: wrap; gap: 1rem; }
.sk-overlay-cta { margin-left: 0; width: 100%; text-align: center; }
}
/* === EDITORIAL UTILITY + EXPLORE TRIGGER === */
.nav-util { font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-deep-mineral); cursor: pointer; padding: 0.5rem 0; position: relative; }
.nav-util::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--accent); transition: right 0.3s var(--ease-out); }
.nav-util:hover { color: var(--accent); }
.nav-util:hover::after { right: 0; }
.nav-explore {
display: inline-flex; align-items: center; gap: 10px;
padding: 0.55rem 1rem 0.55rem 0.85rem;
border: 1px solid rgba(26,42,68,0.18);
border-radius: 999px;
font-family: var(--font-body); font-weight: 600; font-size: 0.72rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--sk-deep-mineral); cursor: pointer;
transition: all 0.25s var(--ease-out);
background: transparent;
}
.nav-explore:hover { background: var(--sk-deep-mineral); color: #f9f7f2; border-color: var(--sk-deep-mineral); }
.nav-explore-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.nav-explore:hover .nav-explore-dot { background: #f9f7f2; }
.nav-explore .nav-caret { transition: transform 0.25s var(--ease-out); }
/* === MEGA CANVAS (full-bleed editorial menu) === */
.mega-canvas {
position: fixed; left: 0; right: 0; top: 72px; bottom: 0;
background: rgba(249,247,242,0.98); backdrop-filter: blur(16px);
z-index: calc(var(--z-nav) - 1);
overflow-y: auto;
animation: mega-canvas-in 0.35s var(--ease-out);
}
@keyframes mega-canvas-in {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
.mega-canvas-inner { padding: 3rem 3.5rem 4rem; max-width: 1480px; margin: 0 auto; }
.mega-canvas-eyebrow {
font-family: var(--font-body); font-weight: 600; font-size: 0.65rem;
letter-spacing: 0.42em; text-transform: uppercase; color: var(--accent);
display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 2rem;
}
.mega-canvas-eyebrow::before { content: ''; display: inline-block; width: 36px; height: 1.5px; background: var(--accent); }
.mega-canvas-grid {
display: grid;
grid-template-columns: repeat(3, 1fr) 1.35fr;
grid-auto-rows: minmax(180px, auto);
gap: 1.6rem;
}
.mega-canvas-hero {
grid-column: 4 / 5; grid-row: 1 / 4;
position: relative; background: var(--sk-stone-200);
overflow: hidden; min-height: 580px;
}
.mega-canvas-hero-micro {
position: absolute; left: 1.8rem; right: 1.8rem; bottom: 1.8rem;
font-family: var(--font-display); font-style: italic;
font-size: 1.6rem; line-height: 1.2; color: #f9f7f2;
text-shadow: 0 2px 16px rgba(26,42,68,0.5);
background: linear-gradient(0deg, rgba(26,42,68,0.55), transparent 70%);
padding: 2rem 0.4rem 0.4rem;
}
.mega-card {
position: relative;
padding: 1.3rem 1.4rem 1.5rem;
background: transparent;
border: 1px solid rgba(26,42,68,0.10);
border-radius: 2px;
cursor: pointer;
transition: all 0.3s var(--ease-out);
overflow: hidden;
}
.mega-card::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: var(--accent); transform: scaleY(0); transform-origin: top;
transition: transform 0.35s var(--ease-out);
}
.mega-card.hover::before, .mega-card:hover::before { transform: scaleY(1); }
.mega-card:hover { border-color: rgba(26,42,68,0.25); background: #f4f1ea; }
.mega-card-num { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--accent); margin-bottom: 0.2rem; }
.mega-card-title { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; color: var(--sk-deep-mineral); margin-bottom: 0.4rem; letter-spacing: -0.005em; }
.mega-card-micro { font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: 0.78rem; color: rgba(26,42,68,0.6); margin-bottom: 1rem; line-height: 1.4; }
.mega-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.mega-card-list a { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0; cursor: pointer; transition: transform 0.18s var(--ease-out); }
.mega-card-list a:hover { transform: translateX(3px); }
.mega-card-arrow { color: var(--accent); font-size: 0.9rem; line-height: 1.3; flex-shrink: 0; }
.mc-label { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.82rem; color: var(--sk-deep-mineral); letter-spacing: 0.01em; }
.mc-hint { display: block; font-family: var(--font-body); font-weight: 300; font-size: 0.7rem; color: rgba(26,42,68,0.55); margin-top: 0.1rem; }
@media (max-width: 1180px) {
.mega-canvas-grid { grid-template-columns: repeat(3, 1fr); }
.mega-canvas-hero { display: none; }
}
@media (max-width: 980px) {
.mega-canvas { display: none; }
}
.lang { display: flex; border: 1px solid rgba(26,42,68,0.25); border-radius: 999px; overflow: hidden; }
.lang button { background: transparent; border: 0; color: rgba(26,42,68,0.55); padding: 0.4rem 0.8rem; font-family: var(--font-body); font-weight: 600; font-size: 0.65rem; letter-spacing: 0.12em; transition: background 0.2s; }
.lang button.active { background: var(--sk-deep-mineral); color: #f9f7f2; }
/* ------------------ HERO / PAGE HEADER ------------------ */
.page-header {
position: relative;
background: var(--sk-deep-mineral);
color: var(--fg-on-dark);
padding: 7rem 4rem 9rem;
overflow: hidden;
}
.page-header.light { background: var(--bg); color: var(--fg); }
/* Section index badge — small marker in top-left corner of every page-header */
.section-index {
position: absolute; top: 6.5rem; left: 4rem; z-index: 3;
display: flex; align-items: center; gap: 0.75rem;
font-family: var(--font-body); font-weight: 600; font-size: 0.65rem;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--accent);
}
.section-index .num {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 1.1rem; letter-spacing: 0; color: var(--accent); opacity: 0.85;
}
.section-index::after { content: ''; width: 32px; height: 1px; background: currentColor; opacity: 0.5; }
.page-header.light .section-index { color: var(--sk-earthy-rust); }
@media (max-width: 720px) { .section-index { top: 4.5rem; left: 1.5rem; } }
/* Wireframe brand backdrop — boats / mountains / kite line illustration.
Sits BEHIND every chiaro surface (page-header.light, section.light, section.paper).
Fixed-attached so the artwork stays put while content scrolls past it. */
.page-header.light, .section.light, .section.paper { position: relative; isolation: isolate; }
.page-header.light::before, .section.light::before, .section.paper::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image: var(--sk-page-pattern, url('bg-wireframe.jpg'));
background-size: cover; background-position: right center;
background-attachment: fixed; background-repeat: no-repeat;
opacity: var(--sk-page-light-op, 0.20); mix-blend-mode: multiply;
}
.page-header.light > *, .section.light > *, .section.paper > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
.page-header.light::before, .section.light::before, .section.paper::before {
background-attachment: scroll; opacity: calc(var(--sk-page-light-op, 0.20) * 0.7);
}
}
/* Background placeholder slots — author drops PNG/SVG illustrations here */
.bg-slot { position: absolute; pointer-events: auto; opacity: 0.55; mix-blend-mode: multiply; z-index: 0; }
.bg-slot.left { left: 0; top: 8%; width: 320px; height: 70%; }
.bg-slot.right { right: 0; top: 12%; width: 320px; height: 70%; }
.bg-slot.under { left: 50%; transform: translateX(-50%); bottom: 0; width: min(900px, 90%); height: 180px; }
.bg-slot image-slot { width: 100%; height: 100%; display: block; }
.section.dark .bg-slot { mix-blend-mode: screen; opacity: 0.35; }
@media (max-width: 720px) { .bg-slot.left, .bg-slot.right { width: 45%; opacity: 0.4; } }
.page-header .bg-mesh {
position: absolute; inset: 0; opacity: 0.06; pointer-events: none;
background-image:
linear-gradient(30deg, currentColor 1px, transparent 1px),
linear-gradient(150deg, currentColor 1px, transparent 1px);
background-size: 80px 80px;
}
.page-header .pulse-line { display: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
/* === MEGA MENU (desktop) === */
.nav-group { position: relative; }
.nav-group > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { transition: transform 0.2s var(--ease-out); }
.nav-group:hover .nav-caret, .nav-group.open .nav-caret { transform: rotate(180deg); }
.mega {
position: absolute; top: calc(100% - 2px); left: 50%; transform: translateX(-50%);
min-width: 280px; max-width: 360px;
background: #f9f7f2; border: 1px solid rgba(26,42,68,0.08);
box-shadow: 0 24px 60px rgba(26,42,68,0.18), 0 4px 12px rgba(26,42,68,0.10);
padding: 1.2rem 1.4rem 1.4rem;
z-index: var(--z-nav);
animation: mega-in 0.22s var(--ease-out);
}
@keyframes mega-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.mega-title { font-family: var(--font-body); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(26,42,68,0.08); }
.mega-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.mega-list li a { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.6rem; border-radius: 4px; transition: background 0.18s var(--ease-out); cursor: pointer; }
.mega-list li a:hover { background: rgba(196,168,120,0.12); }
.mega-list li.active a { background: rgba(196,168,120,0.18); }
.mega-label { font-family: var(--font-body); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.02em; text-transform: none; color: var(--sk-deep-mineral); }
.mega-hint { font-family: var(--font-body); font-weight: 300; font-size: 0.72rem; color: rgba(26,42,68,0.6); }
/* === MOBILE DRAWER + ACCORDION === */
.nav-drawer {
display: none;
position: fixed; left: 0; right: 0; top: 60px; bottom: 0;
background: #f9f7f2; z-index: calc(var(--z-nav) - 1);
overflow-y: auto;
transform: translateY(-12px); opacity: 0; pointer-events: none;
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.nav-drawer.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-drawer-inner { padding: 1rem 1.25rem 3rem; }
.acc { border-bottom: 1px solid rgba(26,42,68,0.10); }
.acc-head {
width: 100%; background: transparent; border: 0; padding: 1.1rem 0.3rem;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-deep-mineral);
cursor: pointer;
}
.acc-icon { color: var(--accent); font-size: 1.2rem; font-weight: 400; transition: transform 0.25s var(--ease-out); }
.acc.open .acc-icon { transform: rotate(45deg); }
.acc-body { list-style: none; padding: 0 0 0.6rem; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease-out); display: flex; flex-direction: column; gap: 0.2rem; }
.acc.open .acc-body { max-height: 600px; }
.acc-body li a { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.6rem; cursor: pointer; }
.acc-body li.active a { background: rgba(196,168,120,0.18); border-radius: 4px; }
.acc-label { font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--sk-deep-mineral); }
.acc-hint { font-family: var(--font-body); font-weight: 300; font-size: 0.78rem; color: rgba(26,42,68,0.55); }
.acc-foot { padding: 2rem 0.3rem 0; display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
.nav-burger { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; flex-direction: column; gap: 4px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--sk-deep-mineral); transition: transform 0.25s, opacity 0.2s; }
.nav.open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 880px) {
.nav-burger { display: flex; order: 2; }
.nav-links { display: none; }
.nav-drawer { display: block; }
.mega { display: none; }
.nav-links { position: fixed; top: 60px; left: 0; right: 0; background: #f9f7f2; flex-direction: column; gap: 0; padding: 1rem 1.25rem 2rem; box-shadow: 0 16px 32px rgba(26,42,68,0.12); transform: translateY(-120%); transition: transform 0.3s var(--ease-out); }
.nav.open .nav-links { transform: translateY(0); }
.nav-links li { width: 100%; }
.nav-links li:not(:last-child) { display: list-item !important; }
.nav-links a { display: block; padding: 0.9rem 0; font-size: 0.9rem; }
.nav-cta { display: inline-block; margin-top: 0.6rem; }
}
.page-header .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.page-header .eyebrow::before { content:''; width: 30px; height: 1.5px; background: var(--accent); }
.page-header h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1; margin: 0; letter-spacing: -0.01em; max-width: 18ch; color: var(--fg-on-dark); }
.page-header.light h1 { color: var(--fg); }
.page-header h1 em { font-style: italic; color: var(--accent); }
.page-header .lede { font-family: var(--font-body); font-weight: 300; font-size: 1.1rem; line-height: 1.7; color: rgba(241,240,236,0.7); margin-top: 1.5rem; max-width: 56ch; }
.page-header.light .lede { color: var(--fg-muted); }
/* Hero — copy on left, oblique moodboard slot on right (stacks on mobile) */
.hero-jagged { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; min-height: 80vh; position: relative; z-index: 2; }
/* Oblique single moodboard slot */
.oblique-wrap { position: relative; padding: 2rem 1rem 2.5rem; }
.oblique-slot { position: relative; aspect-ratio: 4 / 5; transform: rotate(-3deg); border: 8px solid #f9f7f2; box-shadow: 0 28px 60px rgba(26,42,68,0.28), 0 6px 16px rgba(26,42,68,0.14); overflow: hidden; }
.oblique-tag { position: absolute; left: 1.5rem; bottom: 0.5rem; font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(26,42,68,0.5); transform: rotate(-3deg); }
@media (max-width: 720px) { .oblique-slot { transform: rotate(-2deg); } }
.moodboard { position: relative; height: 540px; }
.moodboard .tile { position: absolute; box-shadow: 0 12px 36px rgba(0,0,0,0.35); border: 6px solid #f1f0ec; overflow: hidden; }
.moodboard .tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent); }
.moodboard .t1 { left: 0; top: 4%; width: 52%; height: 60%; transform: rotate(-3deg); z-index: 1; }
.moodboard .t2 { left: 28%; top: 28%; width: 56%; height: 64%; transform: rotate(2.5deg); z-index: 3; }
.moodboard .t3 { right: 4%; top: 0; width: 38%; height: 42%; transform: rotate(-2deg); z-index: 2; }
.moodboard .t4 { left: 8%; bottom: 0; width: 36%; height: 38%; transform: rotate(4deg); z-index: 4; }
/* Element-tinted tile fallbacks (until real photography arrives) */
.tile.tint-fuoco { background: linear-gradient(135deg, var(--sk-brick-red) 0%, var(--sk-earthy-rust) 60%, #4a1f12 100%); }
.tile.tint-acqua { background: linear-gradient(135deg, var(--sk-tech-noir) 0%, #1f5b60 60%, var(--sk-deep-mineral) 100%); }
.tile.tint-terra { background: linear-gradient(135deg, #b8a082 0%, #8a7460 60%, var(--sk-earthy-rust) 100%); }
.tile.tint-aria { background: linear-gradient(135deg, var(--sk-botanical-green) 0%, #4a4d2e 100%); }
.tile.tint-luce { background: linear-gradient(135deg, var(--sk-raw-oak) 0%, #8a7050 60%, var(--sk-earthy-rust) 100%); }
.tile.tint-night { background: linear-gradient(135deg, var(--sk-deep-mineral) 0%, #0d1a30 100%); }
.tile.tint-metallo { background: linear-gradient(135deg, #4a5660 0%, #2c3e50 50%, var(--sk-deep-mineral) 100%); }
/* ------------------ SECTIONS ------------------ */
.section { padding: 7rem 4rem; position: relative; }
.section.dark { background: var(--sk-deep-mineral); color: var(--fg-on-dark); }
.section.light { background: var(--bg); }
.section.paper { background: var(--bg-paper); }
.section.light, .section.paper { overflow: hidden; }
.section .texture-overlay {
position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
background-image:
linear-gradient(30deg, var(--fg) 1px, transparent 1px),
linear-gradient(150deg, var(--fg) 1px, transparent 1px);
background-size: 60px 60px;
}
.section .corner-bracket {
position: absolute; pointer-events: none;
width: 120px; height: 120px;
border: 2px solid var(--accent); opacity: 0.25;
}
.section .corner-bracket.tl { top: 2rem; left: 2rem; border-right: 0; border-bottom: 0; }
.section .corner-bracket.br { bottom: 2rem; right: 2rem; border-left: 0; border-top: 0; }
.section-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 4rem; max-width: 60rem; }
.section-head .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 1rem; }
.section-head .eyebrow::before { content:''; width: 30px; height: 1.5px; background: var(--accent); }
.section-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
.section-head h2 em { font-style: italic; color: var(--accent); }
.section-head .lede { font-family: var(--font-body); font-weight: 300; font-size: 1.05rem; line-height: 1.7; color: var(--fg-muted); max-width: 56ch; margin-top: 0.5rem; }
.section.dark .section-head .lede { color: rgba(241,240,236,0.7); }
/* I TITOLI SU FONDO SCURO.
colors_and_type.css dichiara `h1,h2,h3,h4 { color: var(--fg) }` — un colore
ESPLICITO, che quindi non eredita il chiaro di `.section.dark`. Risultato:
blu su blu, un titolo che semplicemente non c'e'. Succedeva gia' in home,
sul titolo "Il vostro Outdoor Hub", e su ogni sezione scura costruita dal
backend.
Si nominano i contenitori di testo invece di scrivere `.section.dark h2`:
dentro una sezione scura possono esserci card CHIARE — le date degli eventi
sono bianche — e li' un titolo chiaro sparirebbe allo stesso modo, solo
dall'altra parte. */
.section.dark .section-head h2,
.section.dark .section-head h3,
.section.dark .split h2,
.section.dark .legal-prose h2,
.section.dark .legal-prose h3,
.section.dark .legal-prose h4 { color: var(--fg-on-dark); }
.section.dark .legal-prose,
.section.dark .legal-prose p,
.section.dark .legal-prose li { color: var(--fg-on-dark-muted); }
/* ------------------ PILLARS ------------------ */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid rgba(241,240,236,0.08); }
.pillar { padding: 2.5rem 2rem; border-right: 1px solid rgba(241,240,236,0.08); position: relative; min-height: 280px; }
.pillar .num { position: absolute; top: 1.5rem; right: 1.5rem; font-family: var(--font-display); font-size: 2rem; color: rgba(196,168,120,0.22); }
.pillar .icon { width: 38px; height: 38px; margin-bottom: 1.5rem; }
.pillar .icon svg { width: 100%; height: 100%; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.pillar h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--fg-on-dark); margin: 0 0 0.6rem; }
.pillar p { font-family: var(--font-body); font-weight: 300; font-size: 0.92rem; line-height: 1.6; color: rgba(241,240,236,0.6); margin: 0; }
/* ------------------ ROOM CARDS ------------------ */
.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.rooms-grid.tall { grid-template-columns: repeat(4, 1fr); }
.room-card { aspect-ratio: 4/5; border-radius: 2px; position: relative; overflow: hidden; cursor: pointer; background: var(--sk-stone-300); }
.room-card.is-clickable:hover { box-shadow: 0 18px 40px rgba(26,42,68,0.18); }
.room-card.is-clickable:focus-visible { outline: 2px solid var(--sk-raw-oak); outline-offset: 3px; }
.room-card .img { position: absolute; inset: 0; transition: transform 0.6s var(--ease-out); }
.room-card:hover .img { transform: scale(1.04); }
.room-card .overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(26,42,68,0.92) 100%); pointer-events: none; }
.room-card .info { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.4rem; color: var(--fg-on-dark); pointer-events: auto; }
.room-card .info > * { pointer-events: auto; }
/* Let drops on the lower text band fall through to the image-slot beneath */
.room-card .info { -webkit-user-drag: none; }
.room-card image-slot { position: relative; z-index: 0; }
.room-card .card-tools {
position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3;
display: flex; gap: 0.35rem; opacity: 0; transform: translateY(-4px);
transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.room-card:hover .card-tools { opacity: 1; transform: translateY(0); }
.room-card .card-tools button {
width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(249,247,242,0.92); color: var(--sk-deep-mineral);
font-size: 14px; font-weight: 500; display: grid; place-items: center;
box-shadow: 0 2px 8px rgba(26,42,68,0.25); backdrop-filter: blur(4px);
}
.room-card .card-tools button:hover { background: var(--sk-deep-mineral); color: var(--sk-cloud-dancer); }
/* Global slot tools — injected on every bare image-slot */
.has-slot-tools { position: relative; }
.slot-tools {
position: absolute; top: 0.6rem; right: 0.6rem; z-index: 50;
display: flex; gap: 0.35rem; opacity: 0; transform: translateY(-4px);
transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
pointer-events: none;
}
.has-slot-tools:hover .slot-tools { opacity: 1; transform: translateY(0); pointer-events: auto; }
.slot-tools button {
width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(249,247,242,0.95); color: var(--sk-deep-mineral);
font-size: 14px; font-weight: 500; display: grid; place-items: center;
box-shadow: 0 2px 8px rgba(26,42,68,0.25); backdrop-filter: blur(4px);
}
.slot-tools button:hover { background: var(--sk-deep-mineral); color: var(--sk-cloud-dancer); }
.room-card .el { font-family: var(--font-body); font-weight: 300; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.room-card .nm { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.6rem; line-height: 1.1; margin-top: 0.3rem; }
.room-card .meta { font-family: var(--font-body); font-weight: 300; font-size: 0.75rem; color: rgba(241,240,236,0.7); margin-top: 0.5rem; letter-spacing: 0.06em; }
.room-card .cta-link { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-top: 0.9rem; display: inline-flex; align-items: center; gap: 0.6rem; opacity: 0; transform: translateY(8px); transition: all 0.4s var(--ease-out); }
.room-card:hover .cta-link { opacity: 1; transform: translateY(0); }
/* ------------------ STICKY BOOKING BAR ------------------ */
.sticky-book { position: fixed; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: var(--z-booking); background: linear-gradient(180deg, #f9f7f2 0%, #ebe7df 100%); padding: 1rem 2rem; display: flex; align-items: center; gap: 2rem; border: 1px solid rgba(26,42,68,0.08); border-radius: 4px; box-shadow: 0 24px 60px rgba(26,42,68,0.28), 0 4px 12px rgba(26,42,68,0.12); transform: translateY(calc(100% + 2rem)); transition: transform 0.45s var(--ease-cinema); }
.sticky-book.shown { transform: translateY(0); }
.sticky-book .tag { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-earthy-rust); white-space: nowrap; }
.sticky-book .fields { display: flex; gap: 2rem; flex: 1; align-items: end; }
.sticky-book .field { display: flex; flex-direction: column; gap: 0.2rem; }
.sticky-book .field label { font-family: var(--font-body); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26,42,68,0.5); }
.sticky-book .field input, .sticky-book .field select { background: transparent; border: 0; border-bottom: 1px solid rgba(26,42,68,0.25); color: var(--sk-deep-mineral); font-family: var(--font-body); font-size: 0.95rem; padding: 0.3rem 0; outline: none; min-width: 110px; transition: border-color 0.3s; }
.sticky-book .field input:focus, .sticky-book .field select:focus { border-color: var(--accent); }
.sticky-book .field select option { background: #f9f7f2; }
.book-cta { background: var(--sk-deep-mineral); color: #f9f7f2; border: 0; border-radius: 999px; padding: 0.85rem 1.6rem; font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; transition: all 0.3s var(--ease-out); box-shadow: 0 4px 12px rgba(26,42,68,0.25); }
.book-cta:hover { background: var(--sk-earthy-rust); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(128,58,39,0.35); }
/* Floating cluster */
.fab-stack { position: fixed; right: 1.5rem; bottom: 6rem; z-index: var(--z-floating); display: flex; flex-direction: column; gap: 0.7rem; align-items: center; }
.fab { width: 52px; height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); cursor: pointer; border: 0; }
.fab.wa { background: #25D366; color: white; }
.fab.a11y { background: white; color: var(--sk-deep-mineral); }
/* Mobile floating book pill — shown only when narrow */
.mobile-book { display: none; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: var(--z-booking); background: var(--sk-deep-mineral); color: var(--accent); padding: 1rem 1.4rem; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; box-shadow: var(--shadow-up); align-items: center; justify-content: space-between; }
@media (max-width: 880px) {
.nav { padding: 0 1.25rem; height: 60px; }
.nav-links li:not(:last-child) { display: none; }
.nav-cta { padding: 0.5rem 1rem; }
.page-header { padding: 4rem 1.5rem 5rem; }
.hero-jagged { grid-template-columns: 1fr; min-height: auto; gap: 2rem; }
.moodboard { height: 360px; }
.oblique-wrap { padding: 1rem 0 2rem; }
.section { padding: 4rem 1.5rem; }
.pillars { grid-template-columns: 1fr 1fr; }
.rooms-grid { grid-template-columns: 1fr; }
/* IL PANNELLO DI PRENOTAZIONE SU TELEFONO.
Qui c'era display:none, e il pannello non si apriva mai. La pastiglia
.mobile-book chiama skApriBooking(), che accende la classe .shown su
.sticky-book — ma su un elemento nascosto non succede niente. Da telefono
non si poteva prenotare in nessun modo: ne' dalla pastiglia in basso, ne'
dal « Prenota » in alto, ne' scorrendo. Misurato il 25 agosto 2026:
.sticky-book alta 0 pixel, con dentro il motore Simple Booking montato,
funzionante e invisibile.
Ora il pannello esiste anche su telefono. Sta fuori schermo — se ne occupa
il transform della regola base — e sale dal basso come un foglio quando si
apre. */
.sticky-book {
display: block;
left: 0; right: 0; bottom: 0;
padding: 1.1rem 1rem;
padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
border-radius: 14px 14px 0 0;
border-left: 0; border-right: 0; border-bottom: 0;
max-height: 78vh;
/* NIENTE overflow qui dentro: vedi la regola subito sotto. */
-webkit-overflow-scrolling: touch;
}
/* IL CALENDARIO CHE SI VEDEVA SOLO PER UNA RIGA.
Segnalato il 5 settembre 2026, da telefono: aprendo la data compariva una
striscia con « 28 29 30 » e nient'altro, quindi il giorno non si poteva
scegliere — cioe' non si poteva prenotare.
LA CAUSA. Il calendario di Simple Booking e' un elemento in posizione
assoluta alto 297px e si apre VERSO L'ALTO, perche' la barra sta in fondo
allo schermo. Qui c'era overflow-y:auto, e un contenitore che ritaglia
ritaglia anche i figli in posizione assoluta: su uno schermo da 844 il
calendario andava da 312 a 609 mentre la barra partiva da 559, quindi ne
sporgevano 246px, tagliati via. Restava visibile l'ultima riga di giorni.
LA CORREZIONE. La barra non ritaglia piu'. Non le serviva: il suo
contenuto e' alto 285px contro un massimo di 78vh, non ha mai avuto
niente da scorrere. A non sbordare ci pensa il calendario, con la sua
altezza e il suo scorrimento interno — la stessa soluzione gia' in uso
sulla pagina Prenota, piu' in basso in questo file.
Misurato dopo: su 390x844 e su 360x640 il calendario sta tutto dentro lo
schermo e tutti e 26 i giorni selezionabili si possono toccare. */
.sticky-book { overflow: visible; }
.sticky-book #sb-container .sb__calendar,
.sticky-book #sb-container [class*="sb__panel"],
.sticky-book #sb-container [class*="sb__occupancy"] {
max-height: 70vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* La pastiglia serve finche' il pannello e' chiuso. Aperto, finirebbero
l'una sopra l'altro nello stesso angolo. */
.sticky-book.shown ~ .mobile-book { display: none; }
.mobile-book { display: flex; }
/* IL MODULO CONTATTI CHE SBORDAVA.
Misurato su uno schermo da 375: il modulo era largo 410 pixel, 59 di
troppo, e usciva dal bordo destro. Non era il modulo: erano due righe a
due colonne (arrivo/partenza, adulti/bambini) scritte 1fr 1fr. In una
griglia le celle non scendono sotto la larghezza naturale del contenuto,
e un campo data ne pretende 196 — due fanno 392, piu' lo spazio in mezzo.
Il « 1fr » non riusciva a stringere.
Le regole hanno !important perche' quei valori sono scritti dentro
l'attributo style dal codice compilato, e senza non verrebbero superati. */
.sk-info-form { max-width: 100% !important; }
.sk-info-form > div { grid-template-columns: 1fr !important; }
.sk-info-form input,
.sk-info-form select,
.sk-info-form textarea { min-width: 0; width: 100%; box-sizing: border-box; }
/* IL MOTORE DI PRENOTAZIONE DENTRO IL PANNELLO, SU TELEFONO.
Simple Booking impagina il suo modulo come una riga che non va a capo.
In una barra larga funziona; in 375 pixel no: misurati il 25 agosto 2026,
i due gruppi di campi — date e ospiti — erano larghi 4 pixel l'uno,
schiacciati dal flex, col contenuto che debordava e si accavallava sul
pulsante. Qui la riga diventa colonna e ogni gruppo si prende tutta la
larghezza. Le regole hanno !important perche' devono superare il foglio
di stile che Simple Booking serve dal suo dominio. */
.sticky-book #sb-container div.sb .sb__form {
flex-direction: column !important;
align-items: stretch !important;
gap: 0.9rem !important;
}
.sticky-book #sb-container div.sb .sb__dates,
.sticky-book #sb-container div.sb .sb__guests-rooms,
.sticky-book #sb-container div.sb .sb__btn {
width: 100% !important;
flex: 0 0 auto !important;
min-width: 0 !important;
}
/* Le due date restano affiancate: ci stanno, e separarle allungherebbe il
pannello oltre lo schermo. */
.sticky-book #sb-container div.sb .sb__dates { display: flex !important; gap: 0.8rem !important; }
.sticky-book #sb-container div.sb .sb__dates > * { flex: 1 1 0 !important; min-width: 0 !important; }
/* LA CHIUSURA DEL PANNELLO.
Aperto, il pannello resta li' per tutta la visita: React gli riaccende la
classe .shown a ogni scorrimento oltre i 600 pixel. Su schermo grande sta
in un angolo e non disturba; su telefono occupa il fondo e non se ne va.
La classe su vince sul .shown e non passa dalle mani di React,
quindi il pannello resta chiuso finche' l'ospite non lo richiede. */
html.sk-sb-chiusa .sticky-book { transform: translateY(calc(100% + 2rem)) !important; }
html.sk-sb-chiusa .sticky-book.shown ~ .mobile-book { display: flex !important; }
/* La X serve solo da telefono, dove il pannello occupa il fondo dello
schermo e ci resta. Da computer sta in un angolo e non da' fastidio a
nessuno: un pulsante per chiudere una cosa che non disturba e' un invito
a chiudere il motore di prenotazione. Per questo la regola vive qui
dentro, nella soglia dei telefoni, e sopra gli 880 pixel non esiste. */
.sticky-book .sk-sb-chiudi-mobile {
position: absolute; top: .45rem; right: .6rem;
width: 34px; height: 34px; padding: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(26,42,68,.07); color: var(--sk-deep-mineral);
border: 0; border-radius: 999px; cursor: pointer;
}
.sticky-book .sk-sb-chiudi-mobile:active { background: rgba(26,42,68,.16); }
/* Il pulsante non deve stare sopra il primo campo: il pannello si sposta
un po' piu' in basso per fargli posto. Misurato: con 2,6rem si sfioravano
di un pelo sul bordo destro. */
.sticky-book { padding-top: 3.1rem !important; }
/* LA MAPPA DELLA PAGINA CONTATTI.
.sk-arrivo e' una griglia a due colonne scritta nel codice compilato
(1.2fr 1fr) con alignItems: stretch. Su 375 pixel la mappa si riduceva a
157 di larghezza e, dovendo pareggiare la colonna di testo accanto,
cresceva fino a 967 di altezza: una striscia verticale. Qui diventa una
colonna sola, col testo « come arrivare » sopra e la mappa sotto, alta
quanto serve per leggerla. */
.sk-arrivo { grid-template-columns: 1fr !important; gap: 1.6rem !important; align-items: start !important; }
.sk-arrivo > *:first-child { order: 2; }
.sk-arrivo > *:nth-child(2) { order: 1; }
.sk-arrivo .leaflet-container { height: 300px !important; min-height: 0 !important; }
.fab-stack { bottom: 5rem; right: 1rem; }
}
/* ------------------ FOOTER ------------------ */
footer .footer-bottom { display: none; }
.footer-newsletter { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 3rem; align-items: end; padding-bottom: 1.8rem; border-bottom: 1px solid rgba(241,240,236,0.08); }
.footer-newsletter-text { grid-column: 1 / span 1; }
.footer-newsletter-form { grid-column: 5 / span 1; display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }
.footer-newsletter-title { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: #f9f7f2; }
.footer-newsletter-sub { font-family: var(--font-body); font-weight: 300; font-size: 0.78rem; color: rgba(241,240,236,0.6); margin-top: 0.2rem; max-width: 42ch; }
.footer-newsletter-form input { width: 100%; min-width: 0; padding: 0.5rem 0; font-size: 0.8rem; background: transparent; border: 0; border-bottom: 1px solid rgba(241,240,236,0.3); color: #f9f7f2; font-family: var(--font-body); outline: none; }
.footer-newsletter-form input::placeholder { color: rgba(241,240,236,0.45); }
.footer-newsletter-form button { padding: 0.5rem 1rem; font-size: 0.65rem; background: var(--accent); color: var(--sk-deep-mineral); border: 0; border-radius: 999px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; white-space: nowrap; align-self: flex-start; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-family: var(--font-body); font-size: 0.72rem; color: rgba(241,240,236,0.4); letter-spacing: 0.05em; }
.footer-legal-links { display: flex; gap: 1.2rem; }
.footer-legal-links a { cursor: pointer; }
/* « Preferenze cookie » e' un pulsante, non un link: riapre un pannello, non
porta a una pagina. Un senza href Google lo segnala come non
scansionabile. Qui il pulsante riprende tipo, colore e dimensione dai
fratelli, cosi' la riga resta identica a prima. */
.footer-legal-links button {
cursor: pointer; background: none; border: 0; padding: 0;
font: inherit; color: inherit; letter-spacing: inherit;
}
.footer-legal-links a:hover, .footer-legal-links button:hover { color: rgba(241,240,236,0.75); }
@media (max-width: 980px) {
.footer-newsletter { grid-template-columns: 1fr; gap: 1.2rem; }
.footer-newsletter-text, .footer-newsletter-form { grid-column: auto; }
}
footer { background: var(--sk-deep-mineral); color: var(--fg-on-dark); padding: 5rem 4rem 8rem; }
footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(241,240,236,0.1); }
footer .grid.grid-5 { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
.footer-row-bottom { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 2.4rem 0; border-bottom: 1px solid rgba(241,240,236,0.08); align-items: start; }
.footer-row-bottom .footer-contacts { grid-column: 1 / span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.footer-row-bottom .footer-contacts h5 { grid-column: 1 / -1; margin: 0 0 0.4rem; }
.footer-row-bottom .footer-contacts ul { margin: 0; }
.footer-social { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-social-label { font-family: var(--font-body); font-weight: 600; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(241,240,236,0.5); }
.footer-social-icons { display: flex; gap: 0.6rem; }
.footer-social-icons a { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(241,240,236,0.2); color: rgba(241,240,236,0.85); cursor: pointer; transition: all 0.25s var(--ease-out); }
.footer-social-icons a:hover { background: var(--accent); color: var(--sk-deep-mineral); border-color: var(--accent); }
.footer-newsletter-col { grid-column: 4 / span 1; }
.footer-newsletter-col h5 { margin: 0 0 0.5rem; }
.footer-newsletter-col p.footer-newsletter-sub { font-family: var(--font-body); font-weight: 300; font-size: 0.78rem; color: rgba(241,240,236,0.6); margin: 0 0 1rem; line-height: 1.45; }
.footer-newsletter-col .footer-newsletter-form { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-newsletter-col .footer-newsletter-form input { width: 100%; padding: 0.5rem 0; font-size: 0.82rem; background: transparent; border: 0; border-bottom: 1px solid rgba(241,240,236,0.3); color: #f9f7f2; font-family: var(--font-body); outline: none; }
.footer-newsletter-col .footer-newsletter-form input::placeholder { color: rgba(241,240,236,0.45); }
.footer-newsletter-col .footer-newsletter-form button { padding: 0.55rem 1.1rem; font-size: 0.65rem; background: var(--accent); color: var(--sk-deep-mineral); border: 0; border-radius: 999px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; align-self: flex-start; white-space: nowrap; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 2rem; font-family: var(--font-body); font-size: 0.72rem; color: rgba(241,240,236,0.4); letter-spacing: 0.05em; }
.footer-legal-links { display: flex; gap: 1.2rem; }
.footer-legal-links a { cursor: pointer; }
/* « Preferenze cookie » e' un pulsante, non un link: riapre un pannello, non
porta a una pagina. Un senza href Google lo segnala come non
scansionabile. Qui il pulsante riprende tipo, colore e dimensione dai
fratelli, cosi' la riga resta identica a prima. */
.footer-legal-links button {
cursor: pointer; background: none; border: 0; padding: 0;
font: inherit; color: inherit; letter-spacing: inherit;
}
.footer-legal-links a:hover, .footer-legal-links button:hover { color: rgba(241,240,236,0.75); }
@media (max-width: 1180px) {
.footer-row-bottom { grid-template-columns: 1fr 1fr; }
.footer-row-bottom .footer-contacts { grid-column: 1 / -1; }
.footer-newsletter-col { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.footer-row-bottom .footer-contacts { grid-template-columns: 1fr; }
}
@media (max-width: 980px) { footer .grid.grid-5 { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { footer .grid.grid-5 { grid-template-columns: 1fr 1fr; gap: 2rem; } }
footer h5 { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.5rem; }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.8rem; }
footer a { font-family: var(--font-body); font-weight: 300; font-size: 0.88rem; color: rgba(241,240,236,0.7); }
footer a:hover { color: var(--accent); }
footer .legal { padding-top: 2rem; display: flex; justify-content: space-between; font-family: var(--font-body); font-size: 0.72rem; color: rgba(241,240,236,0.4); letter-spacing: 0.05em; }
/* ------------------ MISC ------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.stat-row { display: flex; gap: 3rem; flex-wrap: wrap; }
.stat { padding: 1rem 1.4rem; border-left: 2px solid var(--accent); }
.stat .num { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; color: var(--fg); line-height: 1; }
.section.dark .stat .num { color: var(--fg-on-dark); }
.stat .lbl { font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-subtle); margin-top: 0.4rem; }
.section.dark .stat .lbl { color: rgba(241,240,236,0.55); }
.btn-primary { background: var(--accent); color: var(--sk-deep-mineral); border: 0; padding: 0.95rem 1.8rem; font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.3s; cursor: pointer; }
.btn-primary:hover { background: var(--sk-raw-oak-soft); }
.btn-ghost-light { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); padding: 0.95rem 1.8rem; font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; transition: all 0.3s; }
.btn-ghost-light:hover { background: var(--sk-deep-mineral); color: var(--fg-on-dark); border-color: var(--sk-deep-mineral); }
.btn-ghost-dark { background: transparent; color: var(--fg-on-dark); border: 1px solid rgba(241,240,236,0.3); padding: 0.95rem 1.8rem; font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; transition: all 0.3s; }
.btn-ghost-dark:hover { background: var(--fg-on-dark); color: var(--sk-deep-mineral); }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border: 1px solid rgba(196,168,120,0.4); font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-earthy-rust); background: var(--bg); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
/* image-slot baseline */
image-slot { display: block; width: 100%; height: 100%; }
/* MediaCard — accepts photo OR video */
.media-card .upload-hint { position: absolute; top: 12px; right: 12px; padding: 4px 10px; background: rgba(249,247,242,0.92); color: var(--sk-deep-mineral); border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 4; }
.media-card:hover .upload-hint { opacity: 1; }
.media-card video.media-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.media-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 5; }
/* ------------------ SERVICES (card a icona) ------------------ */
.sk-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.sk-service-card { background: var(--bg-elevated, #fff); border: 1px solid var(--sk-stone-300); border-radius: 3px;
padding: 2.2rem 1.8rem; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.sk-service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.sk-service-icon { width: 54px; height: 54px; color: var(--accent); margin-bottom: 1.1rem; }
.sk-service-icon svg { width: 100%; height: 100%; display: block; }
.sk-service-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; margin: 0 0 0.5rem; color: var(--sk-deep-mineral); line-height: 1.15; }
.sk-service-card p { font-family: var(--font-body); font-weight: 300; line-height: 1.6; color: var(--fg-muted); margin: 0; font-size: 0.95rem; }
@media (max-width: 900px) { .sk-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sk-services-grid { grid-template-columns: 1fr; } }
/* ============================================================
PRIVACY & COOKIE POLICY — prosa legale + tabella strumenti
============================================================ */
.legal-prose { max-width: 70ch; margin: 0 auto; font-family: var(--font-body); color: var(--sk-deep-mineral); }
.legal-prose h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--sk-deep-mineral); margin: 2.6rem 0 0.8rem; }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { font-weight: 300; line-height: 1.75; margin: 0 0 1rem; color: var(--fg-muted); }
.legal-prose ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.legal-prose li { font-weight: 300; line-height: 1.7; margin: 0 0 0.55rem; color: var(--fg-muted); }
.legal-prose strong { font-weight: 600; color: var(--sk-deep-mineral); }
.legal-prose a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.legal-table-wrap { overflow-x: auto; margin: 0.5rem 0 1.4rem; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 640px; }
.legal-table th, .legal-table td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--sk-overlay-line, rgba(26,42,68,0.12)); vertical-align: top; line-height: 1.5; }
.legal-table th { font-family: var(--font-display); font-weight: 500; color: var(--sk-deep-mineral); background: rgba(26,42,68,0.04); }
.legal-table td { font-weight: 300; color: var(--fg-muted); }
.legal-cta { margin-top: 2.4rem; }
@media (max-width: 560px) { .legal-prose h2 { font-size: 1.3rem; } }
/* Credit Flowence nel footer */
.footer-credit { opacity: 0.75; transition: opacity 0.2s ease; }
.footer-credit:hover { opacity: 1; }
/* ============================================================
COOKIE BANNER — su misura, tono brand (blu profondo + oak)
============================================================ */
.sk-cookie { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 1200; max-width: 340px; width: calc(100% - 2.5rem); animation: sk-cookie-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes sk-cookie-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sk-cookie-card { background: var(--sk-deep-mineral); color: var(--sk-textural-white); border: 1px solid rgba(196, 168, 120, 0.3); border-radius: 12px; padding: 1.05rem 1.15rem; box-shadow: 0 18px 48px -16px rgba(10, 18, 32, 0.6); }
.sk-cookie-mini { font-family: var(--font-body); font-weight: 300; font-size: 0.82rem; line-height: 1.5; color: rgba(241, 240, 236, 0.82); margin: 0; }
.sk-cookie-mini a { color: var(--sk-raw-oak); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.sk-cookie-eyebrow { display: block; font-family: var(--font-body); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-raw-oak); margin-bottom: 0.35rem; }
.sk-cookie-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; line-height: 1.15; margin: 0; color: var(--sk-textural-white); }
.sk-cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.8rem; }
.sk-cookie-btn { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; padding: 0.42rem 0.9rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease; }
.sk-cookie-btn.primary { background: var(--sk-raw-oak); color: var(--sk-deep-mineral); }
.sk-cookie-btn.primary:hover { background: #d4b888; }
.sk-cookie-btn.ghost { background: transparent; color: var(--sk-textural-white); border-color: rgba(241, 240, 236, 0.38); }
.sk-cookie-btn.ghost:hover { border-color: var(--sk-raw-oak); color: var(--sk-raw-oak); }
.sk-cookie-btn.link { background: transparent; color: rgba(241, 240, 236, 0.72); padding: 0.42rem 0.35rem; text-decoration: underline; text-underline-offset: 3px; margin-left: auto; }
.sk-cookie-btn.link:hover { color: var(--sk-raw-oak); }
/* preferenze */
.sk-cookie-cats { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; }
.sk-cookie-cat { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(241, 240, 236, 0.1); }
.sk-cookie-cat:last-child { border-bottom: none; }
.sk-cookie-cat-txt { display: flex; flex-direction: column; gap: 0.12rem; }
.sk-cookie-cat-txt strong { font-family: var(--font-body); font-weight: 600; font-size: 0.86rem; color: var(--sk-textural-white); }
.sk-cookie-cat-txt em { font-style: normal; font-weight: 300; font-size: 0.72rem; line-height: 1.4; color: rgba(241, 240, 236, 0.58); }
.sk-cookie-switch { position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; border: none; background: rgba(241, 240, 236, 0.22); cursor: pointer; transition: background 0.22s ease; padding: 0; }
.sk-cookie-switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--sk-textural-white); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.sk-cookie-switch.on { background: var(--sk-raw-oak); }
.sk-cookie-switch.on i { transform: translateX(18px); }
.sk-cookie-switch.locked { opacity: 0.7; cursor: not-allowed; }
@media (max-width: 560px) { .sk-cookie { left: 0.7rem; right: 0.7rem; bottom: 0.7rem; width: auto; max-width: none; } }
/* Highlighted service (es. Sauna — nuova aggiunta) */
.sk-service-card.is-highlighted {
background: linear-gradient(180deg, var(--bg-elevated, #fff) 0%, rgba(232, 127, 104, 0.06) 100%);
border-color: var(--sk-earthy-rust, #803a27);
position: relative;
}
.sk-service-card.is-highlighted::before {
content: 'NEW';
position: absolute; top: 12px; right: 12px;
background: var(--sk-earthy-rust, #803a27); color: #fff;
font-family: var(--font-body); font-size: 0.6rem; font-weight: 700;
letter-spacing: 0.2em; padding: 0.25rem 0.6rem; border-radius: 2px;
}
.sk-service-card.is-highlighted .sk-service-icon { color: var(--sk-earthy-rust, #803a27); }
/* Wellness · elenco highlight (idioma .stat, filetto raw-oak) */
.sk-wellness-list { display: grid; gap: 1rem; margin-top: 2.4rem; }
.sk-wellness-item { padding: 0.85rem 1.2rem; border-left: 2px solid var(--accent); }
.sk-wellness-item .t { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--fg); }
.sk-wellness-item .d { font-family: var(--font-body); font-weight: 300; font-size: 0.88rem; line-height: 1.5; color: var(--fg-muted); margin-top: 0.35rem; }
.section.dark .sk-wellness-item .t { color: var(--fg-on-dark); }
.section.dark .sk-wellness-item .d { color: rgba(241,240,236,0.6); }
/* Highlight in evidenza (es. SK Tote Bag — nuovo servizio) */
.sk-wellness-item.is-new { border-left-color: var(--sk-earthy-rust, #803a27); position: relative; }
.sk-wellness-item.is-new .t::after {
content: 'NEW';
display: inline-block; vertical-align: middle; margin-left: 0.7rem;
background: var(--sk-earthy-rust, #803a27); color: #fff;
font-family: var(--font-body); font-size: 0.55rem; font-weight: 700;
letter-spacing: 0.2em; padding: 0.2rem 0.5rem; border-radius: 2px;
}
/* Simple Booking SyncroBox — contenitori montati da sk-syncrobox.js.
Il widget porta il proprio CSS: qui si definisce solo lo spazio che occupa. */
.sk-sb-bar { flex: 1 1 auto; min-width: 0; }
.sk-sb-bar:empty { min-height: 56px; }
.sk-sb-page { width: 100%; max-width: 1180px; margin: 0 auto; }
.sk-sb-page:empty { min-height: 220px; }
.sk-ibe-fallback {
max-width: 1180px; margin: 1.4rem auto 0; text-align: center;
font-family: var(--font-body); font-weight: 300; font-size: 0.85rem; color: var(--fg-subtle);
}
.sk-ibe-fallback a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* ------------------------------------------------------------------ *
* Simple Booking SyncroBox — vestita come la barra prenotazione SK.
*
* Il widget arriva con un blocco scuro proprio (.sb ha sfondo #0b2027 e
* testo chiaro) e campi a riquadro: dentro la nostra barra chiara facevano
* a pugni. Qui viene riportato all'aspetto di .sticky-book: superficie
* trasparente, campi con solo filetto inferiore, etichette in maiuscoletto
* tracciato, CTA deep mineral a pillola.
*
* I selettori sono volutamente lunghi: il foglio del widget viene inserito
* in coda al body, quindi a parita' di specificita' vincerebbe lui.
* ------------------------------------------------------------------ */
/* Superficie: via il blocco scuro, il testo torna deep mineral */
#sb-container div.sb.sb-custom-bg-color,
#sb-container-page div.sb.sb-custom-bg-color,
#sb-container .sb, #sb-container-page .sb {
background: transparent !important;
color: var(--sk-deep-mineral) !important;
box-shadow: none !important;
}
#sb-container .sb, #sb-container-page .sb,
#sb-container .sb input, #sb-container-page .sb input,
#sb-container .sb button, #sb-container-page .sb button,
#sb-container .sb select, #sb-container-page .sb select {
font-family: var(--font-body) !important;
}
#sb-container .sb *, #sb-container-page .sb * { border-radius: 0 !important; }
/* Campi: nessun riquadro, solo filetto inferiore come .sticky-book .field */
#sb-container div.sb .sb__form-field,
#sb-container-page div.sb .sb__form-field {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid rgba(26, 42, 68, 0.25) !important;
box-shadow: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#sb-container div.sb .sb__form-field:focus-within,
#sb-container-page div.sb .sb__form-field:focus-within {
border-bottom-color: var(--accent) !important;
}
/* Etichette = .sticky-book .field label */
#sb-container div.sb .sb__form-field-label,
#sb-container-page div.sb .sb__form-field-label {
font-weight: 600 !important;
font-size: 0.62rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
background: transparent !important;
}
/* Valori: deep mineral, corpo compatto come gli input della barra */
#sb-container div.sb .sb__form-field-input,
#sb-container-page div.sb .sb__form-field-input,
#sb-container div.sb .sb__form-field-date-number,
#sb-container-page div.sb .sb__form-field-date-number,
#sb-container div.sb .sb__form-field-month-year,
#sb-container-page div.sb .sb__form-field-month-year,
#sb-container div.sb .sb__form-field-weekday,
#sb-container-page div.sb .sb__form-field-weekday {
color: var(--sk-deep-mineral) !important;
background: transparent !important;
}
#sb-container div.sb .sb__form-field-date-number,
#sb-container-page div.sb .sb__form-field-date-number {
font-size: 0.95rem !important;
font-weight: 500 !important;
}
#sb-container div.sb .sb__form-field-weekday,
#sb-container-page div.sb .sb__form-field-weekday {
color: rgba(26, 42, 68, 0.5) !important;
}
/* CTA = .book-cta: deep mineral, pillola, hover earthy rust */
#sb-container div.sb input.sb__btn--verify,
#sb-container div.sb button.sb__btn--verify,
#sb-container-page div.sb input.sb__btn--verify,
#sb-container-page div.sb button.sb__btn--verify {
background: var(--sk-deep-mineral) !important;
color: #f9f7f2 !important;
border: 0 !important;
border-radius: 999px !important;
padding: 0.85rem 1.6rem !important;
font-weight: 700 !important;
font-size: 0.78rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
box-shadow: 0 4px 12px rgba(26, 42, 68, 0.25) !important;
transition: all 0.3s var(--ease-out) !important;
}
#sb-container div.sb input.sb__btn--verify:hover,
#sb-container div.sb button.sb__btn--verify:hover,
#sb-container-page div.sb input.sb__btn--verify:hover,
#sb-container-page div.sb button.sb__btn--verify:hover {
background: var(--sk-earthy-rust) !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 18px rgba(128, 58, 39, 0.35) !important;
}
/* Barra compatta: il footer (codice promo / modifica prenotazione) toglie
spazio e non c'era nel disegno. Resta sulla pagina /prenota. */
#sb-container div.sb .sb__footer { display: none !important; }
#sb-container-page div.sb .sb__footer {
margin-top: 1rem !important;
font-size: 0.78rem !important;
}
#sb-container-page div.sb .sb__footer a { color: var(--accent) !important; }
/* Calendario: superficie chiara, filetto e ombra del sito */
#sb-container div.sb .sb__calendar, #sb-container-page div.sb .sb__calendar {
background: var(--bg-elevated, #fff) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-lg) !important;
color: var(--sk-deep-mineral) !important;
}
/* Barra in basso: riga unica e compatta come .sticky-book .fields.
La CTA nasce .sb__btn--block (larghezza piena) e mandava tutto a capo,
raddoppiando l'altezza della barra. */
#sb-container div.sb { padding: 0 !important; }
#sb-container div.sb .sb__form {
flex-wrap: nowrap !important;
align-items: center !important;
gap: 1.75rem !important;
}
#sb-container div.sb .sb__dates,
#sb-container div.sb .sb__guests-rooms {
flex: 1 1 auto !important;
padding: 0 !important;
min-width: 0 !important;
}
#sb-container div.sb input.sb__btn--verify,
#sb-container div.sb button.sb__btn--verify {
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
white-space: nowrap !important;
}
/* ------------------------------------------------------------------ *
* Slot della SyncroBox
* Il contenitore #sb-container e' unico e vive fuori da React; viene
* spostato nello slot attivo. Qui si definisce solo lo spazio che occupa
* nelle due posizioni.
* ------------------------------------------------------------------ */
#sb-host { display: none; }
.sk-sb-bar { flex: 1 1 auto; min-width: 0; }
.sk-sb-page { width: 100%; max-width: 1180px; margin: 0 auto; min-height: 120px; }
/* Nel corpo della pagina Prenota il modulo respira e impila su schermi stretti */
.sk-sb-page #sb-container div.sb .sb__form {
flex-wrap: wrap !important;
gap: 1.5rem !important;
align-items: end !important;
}
.sk-sb-page #sb-container div.sb .sb__dates,
.sk-sb-page #sb-container div.sb .sb__guests-rooms { flex: 1 1 240px !important; }
.sk-sb-page #sb-container div.sb input.sb__btn--verify,
.sk-sb-page #sb-container div.sb button.sb__btn--verify { flex: 0 0 auto !important; }
@media (max-width: 880px) {
.sk-sb-page #sb-container div.sb .sb__dates,
.sk-sb-page #sb-container div.sb .sb__guests-rooms { flex: 1 1 100% !important; }
.sk-sb-page #sb-container div.sb input.sb__btn--verify,
.sk-sb-page #sb-container div.sb button.sb__btn--verify {
width: 100% !important; flex: 1 0 100% !important;
}
}
/* ------------------------------------------------------------------ *
* Pagina "Prenota": fare spazio al calendario.
*
* IL DIFETTO. Il pannello del calendario di Simple Booking e' alto oltre
* 600px. Sulla pagina prenota il box finiva in fondo allo schermo — l'hero
* occupa 615px — quindi il widget apriva il calendario VERSO L'ALTO,
* coprendo la testata; e la sezione che lo contiene ha overflow:hidden,
* quindi da mobile il pannello veniva tagliato dalle fasce sopra e sotto.
*
* LA CORREZIONE, in due mosse:
* 1. la sezione del box smette di tagliare. Lo sfondo wireframe resta
* dentro i suoi limiti da solo: e' un ::before con inset:0, era
* overflow:hidden a essere di troppo, non lui a servirsene.
* 2. la testata si accorcia su questa pagina. Il box sale nella meta'
* alta dello schermo e il calendario ha spazio per aprirsi in giu',
* che e' il verso che l'ospite si aspetta.
* ------------------------------------------------------------------ */
body.sk-sb-in-page .section.light:has(.sk-sb-page),
body.sk-sb-in-page .section.paper:has(.sk-sb-page) { overflow: visible; }
/* La sezione del box sta sopra a quelle successive: senza, il calendario
finirebbe dietro la fascia seguente. */
body.sk-sb-in-page .section:has(.sk-sb-page) { position: relative; z-index: 5; }
body.sk-sb-in-page .sk-sb-page { position: relative; z-index: 6; }
/* Testata piu' bassa: su questa pagina il contenuto e' il modulo, non il claim. */
body.sk-sb-in-page .page-header { padding-top: 4.5rem; padding-bottom: 4.5rem; }
body.sk-sb-in-page .page-header h1 { margin-bottom: 0.4rem; }
/* Il pannello sta dentro lo schermo, sempre.
E' la regola che risolve il difetto per davvero. Il calendario e' alto
oltre 600px: dove non ci sta, Simple Booking lo apriva verso l'alto sopra
la testata, oppure lo faceva uscire dal fondo. Limitandone l'altezza e
dandogli uno scorrimento interno, il pannello resta leggibile ovunque si
apra — e nessuno deve spostare la pagina sotto le dita dell'ospite.
NON si tocca la posizione di scorrimento: farlo al clic ruba l'evento al
widget, che poi apre il calendario solo al secondo tentativo. */
body.sk-sb-in-page #sb-container .sb__calendar,
body.sk-sb-in-page #sb-container [class*="sb__panel"],
body.sk-sb-in-page #sb-container [class*="sb__occupancy"] {
max-height: 78vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
@media (max-width: 900px) {
body.sk-sb-in-page .page-header { padding-top: 3.2rem; padding-bottom: 3rem; }
body.sk-sb-in-page #sb-container .sb__calendar,
body.sk-sb-in-page #sb-container [class*="sb__panel"],
body.sk-sb-in-page #sb-container [class*="sb__occupancy"] { max-height: 70vh !important; }
}
/* ═══════════════ I LINK IN FONDO AL MOTORE, SU FONDO CHIARO ═══════════════
« Codice promo » e « modifica/cancella una prenotazione » erano scritti
nell'oro del brand su fondo chiaro: contrasto 2:1, sotto la meta' del
minimo. Sono due link piccoli, e uno serve a chi deve disdire — cioe' a
qualcuno che ha gia' fretta.
Non si cambia l'oro del brand: si usa la sua versione scura, che resta
riconoscibile come lo stesso colore e arriva a 5,2:1. La sottolineatura fa
il resto: un link che si distingue solo per il colore non si distingue per
chi i colori non li vede. */
#sb-container div.sb .sb__footer-link,
#sb-container-page div.sb .sb__footer-link{
color:#7d5f33 !important;
text-decoration:underline;
text-underline-offset:2px}
/* Stesso problema, stesso rimedio, altro link: « apri la prenotazione in una
nuova finestra », in fondo alla pagina Prenota. L'oro del marchio su crema
fa 2,0 di rapporto di contrasto — meno della meta' della soglia. Con la
versione scura arriva a 5,2, e resta lo stesso oro. */
.sk-ibe-fallback a{
color:#7d5f33;
text-decoration:underline;
text-underline-offset:2px}
#sb-container div.sb .sb__footer-link:hover,
#sb-container-page div.sb .sb__footer-link:hover{
color:var(--sk-deep-mineral,#1a2a44) !important}
/* ============================================================================
IL BANNER DEI COOKIE SU TELEFONO
Sta in fondo al foglio di proposito: le regole di .sk-cookie sono piu' su, e
una regola con la stessa forza vince solo se viene dopo. Messo insieme alle
altre correzioni per telefono, non funzionava: la barra restava larga come
una scheda.
Il problema che risolve: il banner e' una scheda fissa in basso e, finche'
non si risponde, sta SOPRA il pannello di prenotazione, i campi del modulo
contatti e la prima domanda delle FAQ. Su telefono occupa mezzo schermo.
Chi arriva sul sito trova coperta la prima cosa che vorrebbe fare.
Non si sposta — dev'essere visto e dev'essere risposto — ma smette di
coprire: diventa una barra a tutta larghezza, la pagina si accorcia in fondo
dell'altezza esatta del banner, e la pastiglia e il pannello di prenotazione
salgono sopra di lui. Risposto il banner, tutto torna dov'era.
L'altezza la misura sk-moduli.js: cambia con la lingua e col testo.
========================================================================== */
@media (max-width: 880px) {
.sk-cookie { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; }
.sk-cookie-card { border-radius: 14px 14px 0 0;
padding-bottom: calc(1.05rem + env(safe-area-inset-bottom, 0px)); }
}
html.sk-cookie-aperto body { padding-bottom: var(--sk-cookie-h, 0px); }
@media (max-width: 880px) {
html.sk-cookie-aperto .mobile-book { bottom: calc(1rem + var(--sk-cookie-h, 0px)); }
html.sk-cookie-aperto .sticky-book.shown { transform: translateY(calc(-1 * var(--sk-cookie-h, 0px))); }
}
/* ============================================================================
LA CONFERMA DOPO L'INVIO
Prima era una riga di testo piccola sotto il pulsante. Il problema non era
il colore — quello lo avevamo gia' sistemato — ma il momento: appena il
server risponde il modulo si svuota, l'occhio va ai campi che si azzerano,
e la riga di conferma passa inosservata. Chi ha appena scritto all'hotel
non ha modo di sapere se e' partito davvero.
Qui la conferma diventa una finestrella al centro, che si chiude con un
tasto, con Esc o toccando fuori. Solo per gli ESITI RIUSCITI: un errore
— indirizzo sbagliato, consenso non spuntato — resta sotto il modulo, dove
sta il campo da correggere. Una finestra che dice « controlla l'email » e
copre l'email non aiuta nessuno.
========================================================================== */
.sk-grazie-velo {
position: fixed; inset: 0; z-index: 2000;
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
background: rgba(10, 18, 32, .55);
animation: sk-grazie-velo-in .22s ease both;
}
.sk-grazie {
position: relative;
width: min(24rem, 100%);
background: var(--sk-deep-mineral, #1a2a44);
color: var(--sk-textural-white, #f1f0ec);
border: 1px solid rgba(196, 168, 120, .3);
border-radius: 14px;
padding: 2rem 1.6rem 1.5rem;
text-align: center;
box-shadow: 0 30px 70px -20px rgba(10, 18, 32, .7);
animation: sk-grazie-in .3s cubic-bezier(.16, 1, .3, 1) both;
}
.sk-grazie-segno {
width: 46px; height: 46px; margin: 0 auto 1rem;
display: flex; align-items: center; justify-content: center;
border-radius: 999px;
background: rgba(196, 168, 120, .16);
color: var(--sk-raw-oak, #c4a878);
}
.sk-grazie p {
margin: 0 0 1.4rem;
font-family: var(--font-body); font-size: .98rem; line-height: 1.55;
color: var(--sk-textural-white, #f1f0ec);
}
.sk-grazie button {
font-family: var(--font-body); font-weight: 700;
font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
padding: .8rem 2rem; border: 0; border-radius: 999px;
background: var(--sk-raw-oak, #c4a878); color: var(--sk-deep-mineral, #1a2a44);
cursor: pointer; transition: background .25s;
}
.sk-grazie button:hover { background: #d3ba91; }
.sk-grazie button:focus-visible { outline: 2px solid #f1f0ec; outline-offset: 3px; }
@keyframes sk-grazie-velo-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes sk-grazie-in { from { opacity: 0; transform: translateY(12px) scale(.97) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
.sk-grazie-velo, .sk-grazie { animation: none }
}
/* ============================================================================
L'ANGOLO IN BASSO A DESTRA
Ci stanno in colonna la freccia « torna su », l'omino dell'accessibilita' e
WhatsApp; sotto passa la barra di prenotazione, e quando c'e' il banner dei
cookie passa anche quello. Misurato su 1440 pixel: barra e gruppo si
sovrapponevano per 32 pixel, e la barra vinceva — z-index 100 contro 90 —
quindi il pulsante WhatsApp restava mezzo coperto.
DA COMPUTER il gruppo sale sopra quello che c'e'. Il calcolo parte dal
fondo della barra (1,5rem), aggiunge la sua altezza misurata e quella del
banner, e lascia un dito di spazio. max() tiene il valore di partenza come
pavimento: senza niente sotto, il gruppo resta dov'e' sempre stato.
DA TELEFONO il gruppo si toglie di mezzo mentre il pannello e' aperto. Non
e' pigrizia: il pannello occupa 285 pixel su 812, e alzare tre pulsanti
sopra di lui li spingerebbe in mezzo al contenuto. Chi ha aperto la
prenotazione sta facendo una cosa sola, e per chiuderla ha la X. Appena
chiude, i pulsanti tornano.
========================================================================== */
html.sk-barra-aperta .fab-stack,
html.sk-cookie-aperto .fab-stack {
bottom: max(6rem, calc(2.5rem + var(--sk-barra-h, 0px) + var(--sk-cookie-h, 0px)));
}
@media (max-width: 880px) {
/* Da telefono nell'angolo c'e' anche la pastiglia « Prenota ora », larga
tutto lo schermo. Il gruppo deve stare sopra di lei, non addosso: il
calcolo parte dal fondo della pastiglia (1rem), aggiunge la sua altezza
misurata e quella del banner, e lascia mezzo dito. Alzando gruppo e
pastiglia da basi diverse si erano incontrati: 46 pixel di sovrapposizione,
con i pulsanti tondi sopra la META' destra della pastiglia — e un dito che
mira a « Prenota ora » avrebbe premuto WhatsApp. */
.fab-stack,
html.sk-cookie-aperto .fab-stack {
bottom: max(5rem, calc(1.75rem + var(--sk-pastiglia-h, 54px) + var(--sk-cookie-h, 0px)));
}
html.sk-barra-aperta .fab-stack { display: none; }
}
/* ============================================================================
LA X DEL PANNELLO DI PRENOTAZIONE: SOLO DA TELEFONO
Il pulsante lo crea il codice su ogni schermo, ma il suo stile viveva solo
dentro la soglia dei telefoni: da computer restava li' senza posizione, una
X spaesata dentro la barra. E non serve — da computer la barra sta in un
angolo e non copre niente: offrire un pulsante per chiuderla e' un invito a
chiudere il motore di prenotazione, che e' l'ultima cosa che vogliamo.
Qui e' nascosto di regola, e riappare solo sotto gli 880 pixel.
========================================================================== */
.sticky-book .sk-sb-chiudi-mobile { display: none; }
@media (max-width: 880px) {
.sticky-book .sk-sb-chiudi-mobile { display: flex; }
}
/* ============================================================================
IL COLLEGAMENTO « PRENOTA » DA METTERE DOVE SERVE
Apre il pannello di prenotazione che c'e' gia' in fondo a ogni pagina,
senza portare l'ospite altrove: chi sta leggendo un articolo o la pagina di
una camera resta dov'e', e le date le sceglie li'.
Si scrive cosi', in qualunque blocco di testo del pannello:
Prenota ora
L'indirizzo /prenota c'e' apposta: se lo script non parte, il collegamento
porta comunque alla pagina di prenotazione invece di non fare niente.
Lo stile lo prende dal contesto: dentro un blocco pulsante sembra un
pulsante, dentro un paragrafo sembra un collegamento. Nessuna classe da
ricordare.
========================================================================== */
[data-sk-prenota] { cursor: pointer; }