senza contenuto) non ha
bisogno di padding: gli basta essere alto quanto la clearance. */
[id$="HeaderSpacer"]:empty {
padding-top: 0 !important;
height: var(--hs-clear);
}
/* ----------------------------------------------------------------------
3. Fascia 768–1199px: l'header è ancora fixed-top, quindi la clearance
deve valere davvero — ma quanto l'header alto, non 8rem.
Se su una pagina rendi l'header sticky anche qui (come fa
check-availability-mobile.css al punto 4), aggiungi class="header-in-flow"
al di quella pagina: la clearance torna a quella tipografica.
---------------------------------------------------------------------- */
@media (min-width: 1200px) {
:root { --hs-clear: 6.5rem; }
}
/* ----------------------------------------------------------------------
4. Coda del titolo: gli stessi spaziatori chiudono spesso con una .pb-*
altrettanto alta, che sotto i 1200px allontana il contenuto dal
titolo senza motivo.
---------------------------------------------------------------------- */
#pageTitle :is(.pb-8, .pb-10, .pb-12) { padding-bottom: 0.75rem !important; }
}
/* ==========================================================================
2. Impianto mobile: prima schermata, arco, banda "Prenota Ora"
(era mobile-1d.css)
========================================================================== */
/* ==========================================================================
Hotel Sonia — resa mobile / tablet: variante 1d "editoriale, con barra fissa"
v2 — corregge la fascia tablet (768–1199px) e il titolo a due voci
--------------------------------------------------------------------------
Da caricare DOPO theme.css:
<-- questa
Tutto il file vive dentro @media (max-width: 1199.98px): da 1200px in su
NON viene emessa nessuna regola, quindi il desktop resta identico a oggi.
Cosa cambia rispetto alla v1
----------------------------
A) TABLET 768–1199px, rifatto da capo (era la parte inguardabile): · l'header lì è ancora fixed-top con data-bs-theme="dark" (theme.js forza
lo stato "sticked" solo sotto i 768px): era trasparente col gradiente
scuro, senza logo, e copriva il titolo. Ora è bianco, sticky, col logo
vero — le stesse regole che theme.css applica già sotto i 768px.
· .promo-banner è display:none solo sotto i 768px: sopra restava absolute
e galleggiava sul titolo. Ora entra nel flusso come striscia sotto
l'header, ridisegnata per fondo chiaro (era pensata per stare su foto).
· impaginazione a due colonne — titolo a sinistra, foto a destra — invece
del telefono stirato in mezzo allo schermo, contatti su 4 colonne e
campi del form in fila.
B) TITOLO A DUE VOCI: "l'accoglienza più calda" in stile diverso richiede un
elemento suo; _HOTEL_SONIA_TAGLINE è una stringa unica, quindi il CSS non
può separarla. Le regole sono pronte qui sotto: basta questa modifica in
reservation/include/messages.it.inc.php (le parole non cambiano di una
virgola, si aggiunge solo il tag):
define("_HOTEL_SONIA_TAGLINE_1","La soluzione più vicina,");
define("_HOTEL_SONIA_TAGLINE_2","l'accoglienza più calda");
e in index.php, nell'h1 della hero mobile:
)
Riquadro chiaro con cornice sottile e bollino a sinistra, nei toni del sito.
========================================================================== */
.msg {
--msg-tone: var(--bs-primary, var(--ss-marrone-sec));
--msg-bg: var(--ss-fondo);
--msg-line: var(--ss-riq-scuro);
--msg-sign: "i";
display: flex;
align-items: flex-start;
gap: 16px;
margin: 24px 0;
padding: 18px 22px;
background: var(--msg-bg);
border: 1px solid var(--msg-line);
border-radius: 6px;
box-shadow: 0 6px 18px rgba(26, 26, 24, 0.05);
color: var(--bs-body-color, #3a3530);
}
.msg::before {
content: var(--msg-sign);
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--msg-tone);
color: #fff;
font: 600 18px/34px Georgia, "Times New Roman", serif;
text-align: center;
}
.msg p { margin: 0; padding-top: 4px; line-height: 1.55; text-wrap: pretty; }
.msg p b, .msg p strong { color: var(--msg-tone); font-weight: 600; }
.msg.fail { --msg-tone: #a0522d; --msg-bg: var(--ss-fondo); --msg-line: #ecd6c6; --msg-sign: "!"; }
.msg.success { --msg-tone: #4f7a52; --msg-bg: #f4f8f2; --msg-line: #d3e2cf; --msg-sign: "\2713"; }
.msg.notice { --msg-tone: var(--bs-primary, var(--ss-marrone-sec)); }
[data-bs-theme="dark"] .msg { --msg-bg: rgba(255,255,255,0.04); --msg-line: rgba(255,255,255,0.12); color: var(--bs-body-color); box-shadow: none; }
[data-bs-theme="dark"] .msg.fail { --msg-tone: #d08a63; }
[data-bs-theme="dark"] .msg.success { --msg-tone: #8fbf8f; }
[data-bs-theme="dark"] .msg.notice { --msg-tone: #c9a888; }
@media (max-width: 575.98px) {
.msg { gap: 12px; padding: 14px 16px; }
.msg::before { flex-basis: 28px; width: 28px; height: 28px; font-size: 15px; line-height: 28px; }
}
/* Vetrina camere: pillola "Offerta · fino a -X%" in alto a destra sulla foto */
.sonia-offerta-pill { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2; background: #c0392bc9; color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .02em; padding: .35rem .8rem; border-radius: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,.18); white-space: nowrap; }
@media (max-width: 575.98px) { .sonia-offerta-pill { top: 1rem; right: 1rem; font-size: 1rem; padding: .3rem .65rem; } }
/* ==========================================================================
Home — "Senza carta di credito" accanto a Cerca camere (settembre 2026)
Markup in index.php (.sonia-bollino-wrap sul contenitore del pulsante).
========================================================================== */
/* Albergo Sonia: bollino "Senza carta di credito" in linea con Cerca camere (solo desktop largo).
Solo testo, stessi caratteri del bollino dello sconto (promo-banner-badge). Su schermi piu' stretti di
1400px non c'e' spazio a destra della ricerca: nascosto (mobile da decidere). */
/* solo testo: niente vetro, niente anello */
/* ==========================================================================
Home 768-1199px (versione desktop su tablet) — 28/09/2026
1) Il pulsante WhatsApp "Chiedi info alla reception" a pagina ferma copriva la
barra di ricerca: qui compare solo dopo lo scroll, gia' raccolto in tondo
(la classe is-collapsed la mette assets/js/whatsapp.js).
2) 768-991px: la ricerca va su tre righe e toccava il sottotitolo: titolo e
sottotitolo salgono un po' e il sottotitolo si rimpicciolisce.
========================================================================== */
/* ==========================================================================
Footer — Condizioni | Privacy Policy | Cookie Policy (28/09/2026)
Prima i separatori erano testo (" | ") e andando a capo restavano
appesi all'inizio della riga. Ora li disegna il CSS e le voci non si spezzano.
========================================================================== */
.sonia-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; row-gap: .25rem; margin: 0; padding: 0; list-style: none; }
.sonia-footer-links > li { margin: 0 !important; white-space: nowrap; }
.sonia-footer-links > li + li::before { content: "|"; margin: 0 .9em; color: var(--bs-primary); }
@media (min-width: 1200px) { .sonia-footer-links { justify-content: flex-end; } }
/* ==========================================================================
Pagine di contenuto (es. Contatti) — 28/09/2026
Il motore stampa il titolo della pagina () fuori da
_HOTEL_SONIA_TAGLINE resta com'è per il resto del sito. In alternativa, senza toccare index.php, basta un nella stringa esistente: define("_HOTEL_SONIA_TAGLINE","La soluzione più vicina, l'accoglienza più calda"); Finché non c'è né l'uno né l'altro, il titolo resta a una voce sola. ========================================================================== */ /* Albergo Sonia (28/09/2026): una sola soglia a 768px. Da 768px in su la home usa la versione desktop (foto grande + ricerca sulla foto, menu con il pulsante ☰ sotto i 1200px); sotto i 768px la versione telefono. Prima questo blocco valeva fino a 1199px e creava una versione "tablet" a due colonne. Per tornare indietro: rimettere max-width: 1199.98px. Le regole interne con min-width: 768px / 900px / 992px ora non si applicano piu'. */ @media (max-width: 1199.98px) { /* La barra "Prenota Ora" è fissata in basso: questo spazio evita che copra la fine della pagina (footer compreso). */ body { padding-bottom: 4.75rem; } /* --- 1. Sotto i 768px si usa la hero mobile, non quella desktop --- */ .hero-carousel #heroStatic { display: none !important; } .hero-carousel #heroArchMobile, .hero-carousel .hero-arch-contacts { display: block !important; } /* --- 2. Ordine: promo -> titolo+foto -> contatti -> form ------------------ Solo ordine visivo: in pagina il markup resta dov'è. */ .hero-carousel { display: flex; flex-direction: column; position: relative; /* Niente overflow:hidden qui: il pannello del calendario (e la tendina degli ospiti) esce dal riquadro della sezione e veniva tagliato a metà. Lo z-index tiene la hero — calendario aperto compreso — sopra le sezioni che seguono in pagina. */ z-index: 5; background-color: var(--bs-body-bg); } .hero-carousel .promo-banner { order: 0; } .hero-carousel #heroArchMobile { order: 1; display: flex !important; flex-direction: column; } .hero-carousel .hero-arch-contacts { order: 2; } .hero-carousel #checkRooms.check-room { order: 3; } .hero-carousel #heroArchMobile .hero-arch-contacts { order: 4; } /* --- 3. Il titolo, trattato come apertura editoriale ---------------------- */ /* Era italico #93755d su crema, 3,4:1 — sotto soglia. Cinzel (la famiglia dei titoli del desktop) in inchiostro pieno: circa 15:1, a scala editoriale. */ /* Titolo a due voci. Funziona in tre casi, in ordine di preferenza: 1) due costanti separate in due (vedi nota B in testa al file): il primo resta Cinzel, il secondo passa a Jost light corsivo; 2) un solo dentro la stringa: stessa resa, seconda voce in corsivo; 3) nessun elemento: titolo a una voce, tutto Cinzel. */ /* --- 4. La foto montata a passe-partout, al posto dell'arco -------------- Il cartoncino chiaro e il filetto grigio avevano lo stesso peso della foto: una cornice da negozio. Ora il cartoncino è sottile, il filetto è un filo d'ottone nel marrone del sito e l'ombra è calda e morbida: un passepartout da galleria, che sostiene la foto invece di competerci. */ /* --- 5. Contatti: griglia 2x2 con filetti, a tocco pieno ----------------- */ .hero-carousel .hero-arch-contacts { background-color: var(--bs-body-bg); padding: 0; border-top: 1px solid var(--bs-primary-100); } .hero-carousel .hero-arch-contacts > .container { padding-left: 0; padding-right: 0; } .hero-carousel .hero-arch-contacts .service-featured-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; } .hero-carousel .hero-arch-contacts .service-featured-list > li { width: auto; max-width: none; flex: none; padding: 0; margin: 0; border-bottom: 1px solid var(--bs-primary-100); } .hero-carousel .hero-arch-contacts .service-featured-list > li:nth-child(odd) { border-right: 1px solid var(--bs-primary-100); } .hero-carousel .hero-arch-contacts .service-featured-list > li:nth-last-child(-n+2) { border-bottom: 0; } .hero-carousel .hero-arch-contacts .featured-item { height: 100%; min-height: 66px; gap: 0.625rem; padding: 0.75rem 1.125rem; margin-bottom: 0; color: var(--bs-body-color); } .hero-carousel .hero-arch-contacts .featured-item i { flex: none; font-size: 1.375rem; margin-right: 0; } .hero-carousel .hero-arch-contacts .featured-desc { min-width: 0; } .hero-carousel .hero-arch-contacts .featured-desc small { font-family: "Red Hat Text", sans-serif; font-weight: 500; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bs-secondary-color); } .hero-carousel .hero-arch-contacts .featured-desc span { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.25; overflow-wrap: anywhere; /* l'indirizzo email non sfonda la cella */ } .hero-carousel .hero-arch-contacts .featured-item a { min-height: 44px; display: flex; align-items: center; } /* Schermi stretti: la cella scende sotto i 230px e il numero andava a capo. Si recupera larghezza dall'icona e dalle spaziature, non dal testo, che resta leggibile (12px semibold). Sotto i 380px un secondo scatto. */ @media (max-width: 465.98px) { .hero-carousel .hero-arch-contacts .featured-item { gap: 0.5rem; padding: 0.625rem 0.75rem; min-height: 62px; } .hero-carousel .hero-arch-contacts .featured-item i { font-size: 1.125rem; } .hero-carousel .hero-arch-contacts .featured-desc small { font-size: 0.55rem; letter-spacing: 0.1em; } .hero-carousel .hero-arch-contacts .featured-desc span { font-size: 0.75rem; letter-spacing: 0; } } @media (max-width: 379.98px) { .hero-carousel .hero-arch-contacts .featured-item { gap: 0.4375rem; padding: 0.5625rem 0.625rem; } .hero-carousel .hero-arch-contacts .featured-item i { font-size: 1rem; } .hero-carousel .hero-arch-contacts .featured-desc small { font-size: 0.525rem; } .hero-carousel .hero-arch-contacts .featured-desc span { font-size: 0.7rem; } } /* --- 6. Il form: blocco chiaro in coda, non più nero --------------------- */ .hero-carousel .check-room { position: relative; /* theme.css, dentro @media (min-width: 1200px), rende .check-room absolute con margin-bottom:7rem: serviva per farla galleggiare sulla hero desktop. Ora che da 768 a 1199px si usa la hero mobile va azzerato tutto, altrimenti restano ~112px di vuoto in coda alla sezione. */ inset: auto; z-index: 6; margin-top: 0; margin-bottom: 0; padding: 1.375rem 1.25rem 0.5rem; } .hero-carousel .check-room > .container { padding-left: 0; padding-right: 0; } /* Il calendario e la tendina ospiti devono poter uscire dalla card. */ .hero-carousel .check-room .card-check-room, .hero-carousel .check-room .card-body, .hero-carousel .check-room .control-icon { overflow: visible; } .hero-carousel .check-room .dropdown-menu { z-index: 1030; } .hero-carousel .check-room .card-check-room { background-color: transparent; border: 0; border-radius: 0; box-shadow: none; } .hero-carousel .check-room .card-body { padding: 0; } /* Campi: nel markup portano bg-white bg-opacity-15 / text-light / border-white, pensati per il fondo nero. Su fondo crema vanno riportati a inchiostro pieno. */ .hero-carousel .check-room .form-control, .hero-carousel .check-room .form-select { min-height: 54px; background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-primary-100) !important; font-size: 1rem; } .hero-carousel .check-room .form-control::placeholder { color: var(--bs-secondary-color) !important; } .hero-carousel .check-room .form-select.form-select-indicator-light { --bs-form-select-bg-img-light: var(--bs-form-select-bg-img); } .hero-carousel .check-room .form-select .text-nowrap, .hero-carousel .check-room .form-select span { color: var(--bs-body-color) !important; } .hero-carousel .check-room .control-icon > label.hicon { color: var(--bs-primary) !important; font-size: 1.25rem; z-index: 4; } /* "Cerca Camere" in versione outline: il pieno resta alla barra fissa, così i due comandi non competono. Bordo e testo in inchiostro pieno, 15:1. */ .hero-carousel .check-room .btn-primary { --bs-btn-bg: transparent; --bs-btn-color: var(--bs-emphasis-color); --bs-btn-border-color: var(--bs-emphasis-color); --bs-btn-hover-bg: var(--bs-emphasis-color); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--bs-emphasis-color); min-height: 54px; letter-spacing: 0.08em; } /* --- 7. "Prenota Ora" — una sola barra, con il contesto del desktop ------ */ /* Prima c'erano due pulsanti con due logiche diverse: la barra fissa dell'arco (sempre presente) e il pulsante flottante #scrollTopBtn del desktop, che ha già le sue regole di contesto (compare dopo i contatti, sparisce fra le camere, si ritira accanto al WhatsApp della mappa, resta nascosto con header scuro). Ora la logica è una sola, quella del desktop: cambia solo lo stile, che su mobile diventa una banda ancorata in basso. */ /* Nell'arco il pulsante non serve: la banda in basso è sempre a portata di pollice e dice la stessa cosa. Due "Prenota ora" a mezzo schermo di distanza erano solo rumore. */ /* Il pulsante flottante del desktop diventa la banda in basso. La classe .active la mette e la toglie lo script già presente in index.php. */ #scrollTopBtn.scroll-top-book { position: fixed; z-index: 1020; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; display: flex !important; align-items: center; justify-content: center; min-height: 4.75rem; padding: 0.75rem 1rem; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0 !important; background-color: #a78468eb; color: #fff; font-weight: 600; font-size: 1.3rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; box-shadow: 0 -8px 24px rgba(17, 17, 17, 0.18); /* Fuori contesto scende sotto il bordo, invece di scomparire di colpo */ transform: translateY(110%); opacity: 0; pointer-events: none; transition: transform 0.24s ease, opacity 0.24s ease; } #scrollTopBtn.scroll-top-book.active { transform: translateY(0); opacity: 1; pointer-events: auto; } #scrollTopBtn.scroll-top-book:hover, #scrollTopBtn.scroll-top-book:focus-visible { background-color: var(--bs-primary-600); color: #fff; } /* Con il calendario aperto la banda sparisce: cadeva a pochi centimetri dal "Fatto" del calendario e veniva premuta al suo posto, uscendo dalla scelta delle date. La classe la mette theme.js (hotelDatePicker). */ body.datepicker-is-open #scrollTopBtn.scroll-top-book { display: none !important; } /* ====================================================================== 8. TABLET 768–1199px — impaginazione a due colonne ====================================================================== */ @media (min-width: 1200px) { /* 8.1 Header: bianco, sticky, con il logo vero — come già fa theme.css sotto i 768px. Qui sopra era fixed-top, trasparente e senza logo, e finiva sopra al titolo. Perché nella v1 restava nero: #header porta data-bs-theme="dark", quindi var(--bs-body-bg) lì dentro vale #212121 — chiedere quel token dava nero, non bianco. Qui i token chiari vengono ridichiarati sull'header stesso (stessa tecnica che theme.css usa su #offcanvasNavbar), così anche testo, icone e bordi ereditati risultano coerenti. Il menu offcanvas resta scuro: ha un proprio [data-bs-theme=dark] che vince sull'ereditarietà. */ #header { position: sticky; top: 0; --bs-bg-opacity: 1; --bs-body-bg: #fff; --bs-body-bg-rgb: 255, 255, 255; --bs-body-color: #111; --bs-emphasis-color: #111; --bs-emphasis-color-rgb: 17, 17, 17; --bs-secondary-color: rgba(17, 17, 17, 0.65); --bs-border-color: #dedede; background-color: #fff !important; border-bottom-color: var(--bs-primary-100); } #header .navbar::before { display: none !important; } #header .brand-logo-sticky { display: inline-block !important; } #header .asset-default { display: none !important; } #header .asset-sticky { display: inline-block !important; } #header .navbar-brand .logo { height: 40px; width: auto; } /* L'header porta data-bs-theme="dark": l'icona del toggler resta chiara e spariva sul bianco. Qui torna quella a inchiostro scuro di theme.css. */ #header .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2817, 17, 17, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } #header .navbar-toggler { background-color: transparent; border-color: var(--bs-primary-100); box-shadow: none; } #header .navbar-text, #header .navbar-nav .nav-link { color: rgba(var(--bs-emphasis-color-rgb), 0.85); } /* 8.2 Banner promo: dentro il flusso, striscia sotto l'header. Era absolute sopra la hero e finiva sul titolo; il suo stile (testo bianco, vetro, ombra) è pensato per stare su una foto, qui va portato su fondo chiaro. */ .hero-carousel .promo-banner { position: static; width: 100%; max-width: none; margin: 0; /* Fondo pieno a tutta larghezza, contenuto allineato alla stessa colonna da 1140px di titolo, contatti e form. */ padding: 1rem max(2rem, calc((100% - 1140px) / 2)); gap: 1.125rem; align-items: center; border-left: 0; border-top: 1px solid var(--bs-primary-100); border-bottom: 1px solid var(--bs-primary-100); border-radius: 0; background-color: var(--bs-body-bg); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; color: var(--bs-body-color); } /* Medaglia: cerchio chiaro con doppio filetto brand — il riempimento a vetro e l'anello rosso servivano a staccare da una foto, qui stonavano. */ .hero-carousel .promo-banner-badge { width: 52px; height: 52px; background: var(--bs-primary-50); border: 1px solid var(--bs-primary-200); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--bs-primary-600); } .hero-carousel .promo-banner-badge::before { inset: 3px; border: 1px solid rgba(var(--bs-primary-rgb), 0.35); } .hero-carousel .promo-banner-badge-value { font-size: 1.0625rem; letter-spacing: 0.01em; text-shadow: none; color: var(--bs-primary-600); } .hero-carousel .promo-banner-badge-label { font-family: "Red Hat Text", sans-serif; font-size: 0.5rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bs-secondary-color); text-shadow: none; } /* Una sola riga: occhiello, titolo, e la scadenza spinta a destra oltre un filetto — invece di tre voci ammucchiate a sinistra. */ .hero-carousel .promo-banner-text { flex: 1 1 auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.125rem 1rem; text-shadow: none; } .hero-carousel .promo-banner-eyebrow { font-family: "Red Hat Text", sans-serif; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bs-primary); text-shadow: none; } .hero-carousel .promo-banner-title { font-family: "Cinzel", serif; font-weight: 500; font-size: 1rem; letter-spacing: 0.02em; text-transform: none; color: var(--bs-emphasis-color); text-shadow: none; } /* 8.3 Hero: titolo a sinistra, foto a destra — non più un telefono stirato. Le due colonne partono da 900px: a 768–899px la colonna del titolo scenderebbe sotto i 340px e "l'accoglienza più calda" sbordava sulla foto. */ .hero-carousel #heroArchMobile { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 2rem; max-width: 1140px; margin: 0 auto; padding: 2.5rem 2rem 3rem; } .hero-carousel .hero-arch-title { font-size: clamp(2rem, 4.4vw, 3rem); max-width: 20ch; margin-bottom: 0; } .hero-carousel .hero-arch-photo { padding: 0.5rem; } .hero-carousel .hero-arch-photo::before { inset: 0; } .hero-carousel .hero-arch-photo img { height: clamp(320px, 42vh, 460px); } } @media (min-width: 900px) { .hero-carousel #heroArchMobile { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 2.5rem; padding: 3rem 2rem 3.25rem; } } @media (min-width: 1200px) { /* 8.4 Contatti: quattro colonne in una riga */ .hero-carousel .hero-arch-photo { margin: 0 auto; } .hero-carousel .hero-arch-contacts > .container { max-width: 1140px; padding: 0 2rem; } .hero-carousel .hero-arch-contacts .service-featured-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hero-carousel .hero-arch-contacts .service-featured-list > li { border-bottom: 0; border-right: 1px solid var(--bs-primary-100); } .hero-carousel .hero-arch-contacts .service-featured-list > li:nth-child(odd) { border-right: 1px solid var(--bs-primary-100); } .hero-carousel .hero-arch-contacts .service-featured-list > li:last-child { border-right: 0; } .hero-carousel .hero-arch-contacts .featured-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.5rem; min-height: 104px; padding: 1.125rem 1.25rem; } .hero-carousel .hero-arch-contacts .featured-desc span { font-size: 0.9375rem; } /* 8.5 Form: fino a 991px la data prende una riga sua e ospiti+pulsante la seconda. Prima erano tre in fila anche a 768px: al pulsante restavano ~180px e "Cerca Camere" andava a capo, crescendo in altezza rispetto ai campi (l'anomalia tra 768 e 933px). */ .hero-carousel .check-room { padding: 1.75rem 2rem 0.75rem; } .hero-carousel .check-room > .container { max-width: 1140px; } .hero-carousel .check-room .card-body > .row.g-2 { display: flex; flex-wrap: wrap; align-items: flex-start; } .hero-carousel .check-room .card-body > .row.g-2 > .col-12 { width: auto; flex: 1 1 100%; } .hero-carousel .check-room .card-body .row.g-2 .row.g-2 { display: flex; flex-wrap: nowrap; align-items: flex-start; } .hero-carousel .check-room .card-body .row.g-2 .row.g-2 > .col-12:first-child { width: auto; flex: 1 1 62%; } .hero-carousel .check-room .card-body .row.g-2 .row.g-2 > .col-12:last-child { width: auto; flex: 1 1 38%; } /* L'etichetta del pulsante non va mai a capo: resta alta come i campi. */ .hero-carousel .check-room .btn-primary { white-space: nowrap; letter-spacing: 0.05em; } .hero-carousel .check-room .btn-primary span { white-space: nowrap; } /* 8.6 Banda in basso: il testo non deve galleggiare al centro di 1200px */ #scrollTopBtn.scroll-top-book { min-height: 4.25rem; } } /* --- 8bis. Da 992px i tre controlli stanno in una riga sola ------------- */ @media (min-width: 1200px) { .hero-carousel .check-room .card-body > .row.g-2 { flex-wrap: nowrap; } .hero-carousel .check-room .card-body > .row.g-2 > .col-12:first-child { flex: 1 1 38%; } .hero-carousel .check-room .card-body > .row.g-2 > .col-12:last-child { flex: 1 1 62%; } .hero-carousel .check-room .card-body .row.g-2 .row.g-2 > .col-12:first-child { flex: 1 1 56%; } .hero-carousel .check-room .card-body .row.g-2 .row.g-2 > .col-12:last-child { flex: 1 1 44%; } } /* --- 9. Tema scuro ------------------------------------------------------- */ [data-bs-theme=dark] .hero-carousel, [data-bs-theme=dark] .hero-carousel .hero-arch-contacts { background-color: #212121; } [data-bs-theme=dark] .hero-carousel .check-room { background-color: #1b1b1b; } [data-bs-theme=dark] .hero-carousel .check-room .form-control, [data-bs-theme=dark] .hero-carousel .check-room .form-select { background-color: #2b2b2b !important; border-color: rgba(255, 255, 255, 0.12) !important; } [data-bs-theme=dark] .hero-carousel .hero-arch-contacts, [data-bs-theme=dark] .hero-carousel .hero-arch-contacts .service-featured-list > li { border-color: rgba(255, 255, 255, 0.1); } [data-bs-theme=dark] .hero-carousel .check-room .btn-primary { --bs-btn-color: #f8f8f8; --bs-btn-border-color: #f8f8f8; --bs-btn-hover-bg: #f8f8f8; --bs-btn-hover-color: #111; --bs-btn-hover-border-color: #f8f8f8; } [data-bs-theme=dark] #heroArchMobile .hero-arch-cta, [data-bs-theme=dark] #scrollTopBtn.scroll-top-book { background-color: var(--bs-primary-600); border-top-color: rgba(255, 255, 255, 0.16); } [data-bs-theme=dark] #heroArchMobile .hero-arch-cta:hover, [data-bs-theme=dark] #heroArchMobile .hero-arch-cta:focus-visible, [data-bs-theme=dark] #scrollTopBtn.scroll-top-book:hover, [data-bs-theme=dark] #scrollTopBtn.scroll-top-book:focus-visible { background-color: var(--bs-primary); color: #111; } @media (min-width: 1200px) { [data-bs-theme=dark] .hero-carousel .promo-banner { background-color: #212121; border-top-color: rgba(255, 255, 255, 0.1); border-bottom-color: rgba(255, 255, 255, 0.1); } [data-bs-theme=dark] .hero-carousel .promo-banner-badge { background: #2b2b2b; border-color: rgba(255, 255, 255, 0.18); color: var(--bs-primary); } [data-bs-theme=dark] .hero-carousel .promo-banner-badge-value { color: var(--bs-primary); } } } /* ========================================================================== 10. Chiama, WhatsApp e sottotitolo nella prima schermata — telefono Chi cerca una stanza vicino a Careggi spesso vuole parlare con qualcuno, non compilare un modulo: i due recapiti diventano pulsanti pieni dentro l'arco, sopra la piega. Nella griglia contatti più sotto le stesse due voci vengono nascoste, per non dirle due volte. ========================================================================== */ @media (max-width: 1199.98px) { /* Con due sole celle l'email ha spazio per stare su una riga: si toglie la rottura a metà parola (overflow-wrap:anywhere, utile quando le celle erano quattro) e il corpo si adatta alla larghezza dello schermo. */ .hero-carousel .hero-arch-contacts .service-featured-list > li:nth-child(3) .featured-desc span { white-space: nowrap; overflow-wrap: normal; word-break: normal; font-size: clamp(0.625rem, 3.05vw, 0.8125rem); letter-spacing: 0; } /* Telefono e WhatsApp sono già qui sopra: nella griglia restano email e orari */ .hero-carousel .hero-arch-contacts .service-featured-list > li:nth-child(1), .hero-carousel .hero-arch-contacts .service-featured-list > li:nth-child(2) { display: none; } .hero-carousel .hero-arch-contacts .service-featured-list > li:nth-child(3) { border-right: 1px solid var(--bs-primary-100); } } /* La seconda riga del titolo è una frase intera ("a soli 500 metri...") e non una coda del titolo: corpo più piccolo, due righe, senza il corsivo grande. */ /* I due pulsanti e la riga dei contatti sotto devono incolonnarsi: i pulsanti vanno a filo dei bordi della griglia, e le icone dei contatti si rimpiccioliscono per non sporgere oltre il testo. */ @media (max-width: 1199.98px) { .hero-carousel .hero-arch-contacts .service-featured-list > li { padding-left: 1rem; padding-right: 1rem; } .hero-carousel .hero-arch-contacts .service-featured-list img, .hero-carousel .hero-arch-contacts .service-featured-list svg, .hero-carousel .hero-arch-contacts .service-featured-list i { width: 1.5rem !important; height: 1.5rem !important; font-size: 1.5rem !important; flex: 0 0 auto; } } /* ========================================================================== 11. I tre motivi per prenotare, sovrimpressi alla foto — telefono Erano l'argomento più forte e restavano sotto la piega. Ora stanno in basso sulla foto: il legno della reception lì è già scuro e una sfumatura appena accennata garantisce il contrasto anche cambiando immagine. ========================================================================== */ /* ========================================================================== 3. Prima schermata desktop: pannello offerta, tre punti, banda (era hero-usp-desktop.css) ========================================================================== */ /* ========================================================================== Prima schermata della home — desktop I tre motivi non stanno più sovrapposti alla foto: sono una banda a sé fra la prima schermata e i recapiti (.usp-strip, più sotto). Sulla foto restano solo lo slogan e il pannello di ricerca. ========================================================================== */ @media (min-width: 1200px) { /* Pannello della ricerca: velo translucido al posto del grigio pieno, che spegneva la reception dietro. */ .hero-carousel .card-check-room, .check-room .card-check-room { background-color: rgba(20, 14, 10, 0.34) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; } /* Slogan: un gradino sotto il titolo, righe più fitte */ .hero-carousel .carousel-caption p.fs-4 { font-size: 1.1875rem !important; line-height: 1.5; max-width: 44rem; margin-left: auto; margin-right: auto; text-wrap: pretty; } } /* ========================================================================== I tre motivi per prenotare — banda sotto la prima schermata Fuori dalla foto il testo si legge senza veli e non litiga con la barra di ricerca a nessuna larghezza. Fondo chiaro di servizio e filetto sotto, che fa da soglia verso i recapiti; le tre colonne sono divise da filetti, non dai bordi esterni. Su telefono la banda è nascosta: i tre motivi sono già sovrimpressi alla foto dell'arco (mobile-1d.css, sez. 11). ========================================================================== */ /* Fondo a inchiostro: la banda era chiara su pagina chiara, con filetti tenui, e si perdeva. Scura diventa il respiro fra la foto e il resto della pagina, e i tre argomenti si leggono da lontano. */ .usp-strip { position: relative; background-color: var(--ss-riq); border-bottom: 0; /* Ombra interna in alto: ancora la banda alla foto senza disegnare una linea. Il filetto marrone da 3px era troppo marcato su un fondo avorio; qui basta un velo che si dissolve in 10px, come se la foto vi appoggiasse sopra. */ box-shadow: inset 0 10px 12px -10px rgba(26, 26, 24, 0.22); } /* Nessun filetto: l'ancoraggio alla foto lo dà l'ombra interna qui sopra */ .usp-strip::before { content: none; } .usp-strip-list { display: flex; margin: 0; padding: 0; list-style: none; } .usp-strip-list > li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0.875rem; padding: 1.375rem 1.25rem; font-family: "Jost", sans-serif; font-size: 1.225rem; line-height: 1.35; color: #473320; text-align: left; text-wrap: pretty; } /* Filetti fra le colonne, non ai bordi esterni */ .usp-strip-list > li + li { border-left: 1px solid rgba(255, 255, 255, 0.14); } /* Numero in serif, nell'accento del marchio: richiama il titolo della hero */ .usp-strip-num { flex: 0 0 auto; font-family: "Cinzel", serif; font-size: 1.875rem; font-weight: 600; line-height: 1; color: var(--bs-primary-300, #c9a888); } /* Tablet: le tre voci stanno in colonna, una sotto l'altra */ @media (max-width: 1199.98px) { .usp-strip-list { flex-direction: column; } .usp-strip-list > li { justify-content: flex-start; padding: 0.875rem 0; font-size: 0.9375rem; } .usp-strip-list > li + li { border-left: 0; border-top: 1px solid var(--bs-border-color, var(--ss-riq-scuro)); } } /* Tema scuro */ [data-bs-theme=dark] .usp-strip { background-color: rgba(255, 255, 255, 0.04); border-bottom-color: rgba(255, 255, 255, 0.1); } [data-bs-theme=dark] .usp-strip-list > li + li { border-left-color: rgba(255, 255, 255, 0.1); } @media (max-width: 1199.98px) { [data-bs-theme=dark] .usp-strip-list > li + li { border-top-color: rgba(255, 255, 255, 0.1); } } /* ========================================================================== Badge dell'offerta Prima diceva "−€10" con il segno meno accanto a una cifra grande: a colpo d'occhio si leggeva come un trattino, e più di un cliente l'ha inteso come un sovrapprezzo. Ora il verso dello sconto è scritto a parole — "Sconto" sopra, "a notte" sotto — e il segno meno è sparito. La data di scadenza è stata tolta dal testo accanto: resta "Offerta a tempo". ========================================================================== */ .promo-banner-badge { gap: 0; } /* "Sconto" — piccolo, in maiuscoletto spaziato, sopra la cifra */ .promo-banner-badge-word { display: block; font-family: "Jost", sans-serif; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; color: var(--bs-primary-200); } /* La cifra resta la voce principale del badge */ .promo-banner-badge-value { line-height: 1.05; } /* "a notte" — l'unità, sotto la cifra */ .promo-banner-badge-label { display: block; line-height: 1.2; text-transform: lowercase; } /* ========================================================================== Riga dei recapiti (#recapiti) — fascia 1200-1400px Da 1200px le quattro colonne passano a col-xl-3, cioè un quarto ciascuna: circa 190px utili per il testo, accanto all'icona. L'indirizzo email è una parola sola di 21 caratteri, non può andare a capo e sbordava sulla colonna della reception; i numeri di telefono si spezzavano lasciando "241" orfano. In questa sola fascia il testo si stringe quanto basta: sopra i 1400px e sotto i 1200px (dove le colonne sono due) nulla cambia. ========================================================================== */ @media (min-width: 1200px) and (max-width: 1399.98px) { /* Icone un poco più piccole: restituiscono larghezza al testo */ #recapiti .featured-item > .hicon { font-size: 2.5rem; } /* Etichetta e valore si stringono; via la spaziatura fra le lettere, che qui costa più di quanto renda */ #recapiti .featured-desc small { font-size: 0.8125rem; letter-spacing: 0; } #recapiti .featured-desc span { display: block; font-size: 1rem; letter-spacing: 0; white-space: nowrap; /* numeri e orari su una riga, senza cifre orfane */ } /* L'email è la voce più lunga: scende di un altro gradino e, se lo spazio mancasse comunque, si adatta invece di sbordare */ #recapiti .service-featured-list > li:nth-child(3) .featured-desc span { font-size: 0.9375rem; white-space: nowrap; overflow-wrap: normal; text-overflow: ellipsis; overflow: hidden; } } /* ========================================================================== 4. Servizi in home — sei tessere (era services-tiles.css) ========================================================================== */ /* ========================================================================== Servizi in home (#facilitiesAmenities) — sei tessere Prima erano sei paragrafi della stessa lunghezza su due file di tre colonne, senza confini e tutti dello stesso peso: la sezione si leggeva come una pagina di giornale. Qui ogni servizio ha il suo cartoncino, l'icona sta in un tondo pieno e il testo scende a una riga. ========================================================================== */ /* Il testo introduttivo non è più giustificato: era il residuo più "da giornale". Centrato e con una misura di lettura contenuta. */ .svc-tile { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; padding: 1.75rem 1.25rem 1.5rem; background-color: var(--bs-body-bg, #fff); border-radius: var(--bs-border-radius); text-align: center; box-shadow: 0 2px 12px rgba(26, 26, 24, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Si solleva al passaggio, come le schede delle camere */ .svc-tile:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(var(--bs-primary-rgb), 0.16), 0 3px 10px rgba(26, 26, 24, 0.06); } /* Tondo pieno nell'accento: l'icona diventa un elemento, non un ornamento a filo sottile accanto al testo. */ .svc-tile-icon { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--bs-primary); color: #fff; font-size: 1.5rem; line-height: 1; transition: background-color 0.3s ease; } .svc-tile:hover .svc-tile-icon { background-color: var(--bs-primary-600); } .svc-tile-title { margin: 0; font-family: "Jost", sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; color: var(--bs-emphasis-color); } .svc-tile-text { margin: 0; font-size: 1.2rem; line-height: 1.45; color: var(--bs-secondary-color, #7a7573); text-wrap: pretty; } /* Su telefono le tessere restano una per riga, un poco più compatte */ @media (max-width: 575.98px) { .svc-tile { padding: 1.375rem 1.125rem 1.25rem; } .svc-tile-icon { width: 3rem; height: 3rem; font-size: 1.3rem; } } /* Tema scuro: il cartoncino si schiarisce appena, invece di sparire */ [data-bs-theme=dark] .svc-tile { background-color: rgba(255, 255, 255, 0.04); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } /* ========================================================================== 5. Riquadro della mappa in home (era map-lite.css) ========================================================================== */ /* ========================================================================== Riquadro mappa in home (#mapLite) — due segnaposto e la distanza La schermata di Google, coi suoi grigi e i fucsia, era estranea alla pagina e soprattutto non mostrava i 500 metri promessi dal testo accanto: in evidenza c'erano Villa Incontri e uno studio di osteopatia. Qui la mappa vira nei toni del marchio e sopra restano due soli segnaposto, uniti da un tratteggio con la distanza. Le coordinate dei segnaposto stanno in index.php, come --x e --y in percentuale dell'immagine. Il ritaglio "cover" tocca solo i lati (l'altezza entra sempre per intero), ed è centrato: vicino al centro lo scarto è di pochi pixel, e i due segnaposto sono entrambi lì. Va caricato DOPO theme.css, che definisce .map-lite-whatsapp. ========================================================================== */ /* Virata nei toni caldi della pagina: la mappa resta leggibile ma smette di essere una schermata di Google incollata dentro il sito. */ /* Velo avorio: spegne ancora un poco le etichette estranee e fa staccare i due segnaposto, che restano gli unici elementi a piena saturazione. */ /* --- Tratteggio fra i due segnaposto ------------------------------------- */ /* In SVG con preserveAspectRatio="none": le coordinate della linea sono percentuali, quindi seguono il riquadro qualunque sia la sua forma. */ /* Il tragitto vero lungo le strade, non la distanza in linea d'aria: è la risposta alla domanda che un familiare si fa davvero. Gli stessi valori sono anche attributi nel markup (fill="none" ecc.), così il percorso resta corretto perfino se questo foglio non venisse caricato. */ /* Alone bianco: il filo resta leggibile anche sopra le strade chiare */ /* --- Segnaposto ---------------------------------------------------------- */ /* Il pallino è il punto esatto: si centra sulle coordinate, l'etichetta cresce di lato senza spostarlo. */ /* Ospedale: etichetta chiara a destra del pallino, pallino rosso mattone */ /* Hotel: etichetta a inchiostro, e sta SOPRA il pallino perché il punto cade in basso, dove corrono i due comandi. */ /* --- La distanza, al centro del tratteggio ------------------------------- */ /* --- I due comandi, sulla stessa linea di base --------------------------- */ /* Prima il pulsante della mappa stava al centro, sopra i segnaposto, e quello di WhatsApp galleggiava a mezza altezza: ora sono due pastiglie negli angoli in basso, una chiara e una a inchiostro. */ /* Non il verde tipico di WhatsApp, che qui sarebbe l'unico colore estraneo alla pagina: a inchiostro fa coppia con la pastiglia chiara, e il simbolo basta a far capire di che si tratta. */ /* --- Schermi stretti ----------------------------------------------------- */ /* Tema scuro: il velo avorio diventa un velo d'inchiostro */ /* ========================================================================== 6. Giudizio degli ospiti — schede e carosello (era testimonials.css) ========================================================================== */ /* ========================================================================== Recensioni in home (#testimonials) — schede Prima: tondi con le iniziali in blu, marrone e fucsia (tre colori fuori tavolozza), stelline giallo-oro, il pulsante blu di Booking in mezzo al sottotitolo, nessun punteggio, e il giglio a galleggiare in una fascia vuota. Qui le citazioni prendono lo stesso cartoncino delle tessere dei servizi, il voto sale nel titolo e il giglio ne diventa il fregio. ========================================================================== */ /* --- Fregio del titolo --------------------------------------------------- */ /* --- Punteggio Booking --------------------------------------------------- */ /* Riquadro a inchiostro: è il numero, non la parola, a fare la differenza */ /* --- Scheda della citazione ---------------------------------------------- */ /* Il carosello resta quello di prima (splide): cambia solo il contenuto della singola diapositiva. */ /* Virgoletta in serif al posto delle virgolette nel testo */ /* Tondo, non corsivo: tre colonne in corsivo affaticano la lettura */ /* L'iniziale in un tondo avorio: riconoscibile senza introdurre colori nuovi */ /* Stelle nei toni del marchio, e col voto accanto: cinque stelline gialle dicevano "5 su 5", che non è il dato vero. */ /* Tema scuro: il cartoncino si schiarisce appena, come le tessere dei servizi */ /* --- Frecce e tacche del carosello --------------------------------------- */ /* Le frecce di splide erano spinte fuori dal riquadro dai margini ms-10/me-10, e le tacche, posizionate in assoluto, finivano sopra il pulsante di Booking: su telefono non si capiva che le schede scorrono. */ .testimonial-slider .splide__arrows { display: block; } .testimonial-slider .splide__arrow { position: absolute; top: 50%; z-index: 3; width: 2.5rem; height: 2.5rem; margin: 0 !important; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background-color: var(--bs-body-bg, #fff); color: var(--bs-emphasis-color); font-size: 1rem; opacity: 1; box-shadow: 0 3px 12px rgba(26, 26, 24, 0.18); transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .testimonial-slider .splide__arrow:hover, .testimonial-slider .splide__arrow:focus-visible { background-color: var(--bs-primary); color: #fff; box-shadow: 0 6px 18px rgba(26, 26, 24, 0.24); } .testimonial-slider .splide__arrow:disabled { opacity: 0.35; } .testimonial-slider .splide__arrow--prev { left: -0.5rem; } .testimonial-slider .splide__arrow--next { right: -0.5rem; } /* Tacche: fuori dal flusso del carosello, con aria sopra e sotto, così non toccano né le schede né il pulsante. */ .testimonial-slider .splide__pagination { position: static; display: flex; justify-content: center; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; } .testimonial-slider .splide__pagination__page { width: 1.5rem; height: 3px; margin: 0; border: 0; border-radius: 0; background-color: var(--bs-primary-200, #ded3c7); opacity: 1; transform: none; transition: background-color 0.25s ease, width 0.25s ease; } .testimonial-slider .splide__pagination__page.is-active { width: 2.5rem; background-color: var(--bs-primary); transform: none; } @media (max-width: 575.98px) { /* Il link "leggile tutte" andava a capo da solo, e sotto c'è già il pulsante che porta alle stesse recensioni: su telefono è di troppo. */ /* Le frecce stanno sopra i bordi della scheda, dove il pollice le trova */ .testimonial-slider .splide__arrow { width: 2.25rem; height: 2.25rem; } .testimonial-slider .splide__arrow--prev { left: -0.25rem; } .testimonial-slider .splide__arrow--next { right: -0.25rem; } } [data-bs-theme=dark] .testimonial-slider .splide__arrow { background-color: var(--ss-testo); color: var(--ss-riq); } /* ========================================================================== 7. Footer chiaro in modalità giorno (era footer-light.css) ========================================================================== */ /* ========================================================================== Footer — terra chiara in modalità giorno Il footer porta data-bs-theme="dark" scritto nel markup: in modalità giorno prendeva quindi il fondo del tema scuro (var(--ss-testo), quasi nero) sotto un corpo avorio, con uno stacco secco e senza relazione con i marroni del sito. Qui la strada opposta: il footer resta CHIARO, un beige più carico del corpo con inchiostro sopra. Nessun salto, pagina luminosa da cima a fondo. Il modo più pulito di ottenerlo è ridichiarare le variabili di Bootstrap sul solo #footer: tutte le utility del tema (text-body, text-body-emphasis, text-body-tertiary, link-hover-primary, border-bottom…) le leggono da qui e si adeguano da sé, senza dover inseguire ogni singola classe. Vale SOLO in modalità giorno: con il tema notte attivo (html[data-bs-theme="dark"]) non si applica nulla e resta tutto come prima. ========================================================================== */ html:not([data-bs-theme="dark"]) #footer { /* Fondo e testo. Tonalità della tinteggiatura delle camere. Nel pannello del browser era #cdb8a736, cioè #cdb8a7 al 21%: sovrapposto al bianco della pagina dà questo var(--ss-riq). In tinta piena rende lo stesso colore senza dipendere da cosa sta dietro. */ --bs-body-bg: #cdb8a736; --bs-body-bg-rgb: 242, 236, 228; --bs-body-color: #5c564e; --bs-body-color-rgb: 92, 86, 78; /* Titoletti delle colonne e testo in evidenza */ --bs-emphasis-color: #241f1a; --bs-emphasis-color-rgb: 36, 31, 26; --bs-heading-color: #241f1a; /* Toni di servizio: il footer stesso porta .text-body-tertiary */ --bs-secondary-color: rgba(92, 86, 78, 0.78); --bs-tertiary-color: rgba(92, 86, 78, 0.9); /* Filetti: il beige più scuro, non il bianco trasparente del tema notte */ --bs-border-color: #e0d6c8; --bs-border-color-translucent: rgba(36, 31, 26, 0.12); /* Marrone del marchio un gradino più scuro: su fondo chiaro quello chiaro non avrebbe contrasto sufficiente per i collegamenti */ --bs-primary: var(--ss-marrone-sec); --bs-primary-rgb: 138, 106, 74; background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; } /* Il logo bianco su fondo chiaro sparirebbe: in modalità giorno si mostra quello scuro, in modalità notte quello bianco (footer.php porta entrambi). */ /* Riquadri delle note legali: erano grigio neutro su fondo scuro. Qui beige più carico con inchiostro sopra, nella stessa famiglia del fondo. */ html:not([data-bs-theme="dark"]) #footer .badge.bg-secondary { background-color: #e3d8c9 !important; color: #3d372f !important; } /* Collegamenti: il colore di base lo dà --bs-body-color, al passaggio si accende nel marrone del marchio. */ html:not([data-bs-theme="dark"]) #footer a.text-body { color: var(--bs-body-color) !important; } html:not([data-bs-theme="dark"]) #footer a.link-hover-primary:hover, html:not([data-bs-theme="dark"]) #footer a.link-hover-primary:focus-visible { color: var(--ss-marrone-sec) !important; } /* Il footer chiaro perde il peso di chiusura che aveva il fondo scuro: un filetto in alto lo separa dal corpo della pagina, che è appena più chiaro. */ html:not([data-bs-theme="dark"]) #footer { border-top: 1px solid #cbbfad; } /* ========================================================================== 8. Descrizione della camera — telefono (era room-description-mobile.css) ========================================================================== */ /* ========================================================================== Descrizione della camera (index.php?page=rooms) — solo telefono Il testo del tema è tarato sul desktop: su schermo piccolo scende a 14px e diventa faticoso. Qui si alza il corpo di lettura e si allarga l'interlinea, senza toccare la gerarchia: i titoli restano quelli del tema. Niente di tutto questo sopra i 768px. ========================================================================== */ @media (max-width: 1199.98px) { /* --- Corpo di lettura ---------------------------------------------------- */ /* 16px: la misura sotto la quale i browser mobili iniziano a ingrandire da sé */ #detailRoom p, #detailRoom li, #detailRoom .card-text, #detailRoom dd, #detailRoom td { font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; /* evita la riga finale con una parola sola */ } /* La descrizione lunga è il testo che si legge davvero: un filo più grande */ #detailRoom p { font-size: 1.1875rem; margin-bottom: 1rem; } /* Elenco dei servizi dentro la descrizione: rientro più contenuto, così le voci lunghe non vanno a capo per un soffio */ #detailRoom ul:not(.list-unstyled) { padding-left: 1.25rem; } #detailRoom ul:not(.list-unstyled) > li { margin-bottom: 0.25rem; } /* --- Informazioni sulla camera ------------------------------------------ */ /* Icona e testo restano sulla stessa riga anche col corpo maggiorato */ #detailRoom .list-unstyled.row > li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.1875rem 0; line-height: 1.5 !important; } #detailRoom .list-unstyled.row > li > i { flex: 0 0 auto; font-size: 1.1875rem; line-height: 1.4; } #detailRoom .list-unstyled.row > li > span { font-size: 1.125rem; text-wrap: pretty; } /* --- Titoli di sezione -------------------------------------------------- */ /* Appena più piccoli del desktop: restano dominanti, ma lasciano spazio al testo maggiorato e non spezzano "PROMOZIONI E SCONTI" in tre righe. */ #detailRoom h2.h3, #detailRoom h1.h3 { font-size: 1.375rem; line-height: 1.25; } /* --- Spazi: recuperati dal padding, non dal testo ----------------------- */ #detailRoom .pt-12 { padding-top: 2rem !important; } /* --- Condizioni di cancellazione e promozioni --------------------------- */ #detailRoom .table td, #detailRoom .table th { font-size: 1.0625rem; line-height: 1.5; } } /* ========================================================================== Albergo Sonia — messaggi del sito (draw_important_message / draw_message / draw_success_message:
…