/* ========================================================================== §E23 — Template ospite "Notturno" (guest_template = night) Scuro, serif editoriale, accenti oro, contenuti in lista verticale. Tutto è scoped su `.g-body[data-guest-template="night"]`: gli altri template e il pannello non vedono una riga di questo file. Il grosso del lavoro lo fa il blocco di token qui sotto — l'app ospite disegna quasi tutto con `var(--c-*)` / `var(--sb-*)`, quindi ridefinirli su ritematizza da solo servizi, categorie, informazioni, richieste e chat. Sotto restano solo le regole che in application.css hanno colori letterali (#fff, gradienti). ========================================================================== */ /* --- Font self-hosted (niente CDN: residenza dati UE, cfr. ADR-0005) ------- */ @font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/InstrumentSerif-400-latin-ext-b3d5c31c.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/InstrumentSerif-400-latin-5e24a7c0.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/Manrope-400-800-latin-ext-3c111aa4.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/Manrope-400-800-latin-822bc47d.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/JetBrainsMono-400-700-latin-ext-b0c48b7a.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/JetBrainsMono-400-700-latin-68dbce1c.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* --- Token ---------------------------------------------------------------- */ .g-body[data-guest-template="night"] { --gt-bg: #0F1420; --gt-surface: #161D2C; --gt-surface-2: #1D2537; --gt-accent: #C9A24A; --gt-ink: #F2EEE6; --gt-muted: rgba(242, 238, 230, 0.55); --gt-muted-2: rgba(242, 238, 230, 0.40); --gt-line: rgba(242, 238, 230, 0.10); --gt-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --gt-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --gt-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Rimappa i token dell'app ospite: da qui in giù application.css si ridipinge da sola. Sono gli stessi nomi che il tema StayBell definisce su :root. */ --c-white: var(--gt-surface); --c-ink: var(--gt-ink); --c-ink-soft: var(--gt-muted); --c-azure-50: var(--gt-surface-2); --c-azure-100: var(--gt-line); --c-blue-900: var(--gt-ink); --c-blue-700: var(--gt-accent); --c-blue-500: var(--gt-accent); --c-blue-300: rgba(201, 162, 74, 0.45); --sb-ink: var(--gt-ink); --sb-muted: var(--gt-muted); --sb-muted-2: var(--gt-muted-2); --sb-line: var(--gt-line); --sb-line-2: var(--gt-line); --sb-bg: var(--gt-bg); --sb-bg-2: var(--gt-surface); --sb-page: var(--gt-bg); --sb-chip: rgba(201, 162, 74, 0.16); --sb-chip-line: rgba(201, 162, 74, 0.32); --sb-primary: var(--gt-accent); --sb-primary-2: var(--gt-accent); --sb-primary-300: rgba(201, 162, 74, 0.45); --sb-grad: linear-gradient(135deg, #1D2537, #161D2C); --sb-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --sb-shadow-h: 0 12px 32px rgba(0, 0, 0, 0.45); --sb-r-card: 16px; --sb-sans: var(--gt-sans); --sb-display: var(--gt-serif); --radius: 16px; --shadow: var(--sb-shadow); --font: var(--gt-sans); background: var(--gt-bg); color: var(--gt-ink); font-family: var(--gt-sans); } .g-body[data-guest-template="night"] .g-app { background: var(--gt-bg); } /* I titoli in serif: `application.css` li lega a --sb-display, ma quella regola sta su una lista di selettori con specificità 0,1,0 — qui basta il token. */ .g-body[data-guest-template="night"] h1, .g-body[data-guest-template="night"] h2, .g-body[data-guest-template="night"] h3 { font-family: var(--gt-serif); font-weight: 400; } /* --- Topbar --------------------------------------------------------------- */ /* Sopra la copertina la testata è trasparente e galleggia sull'immagine; senza copertina torna in flusso, appoggiata sullo sfondo scuro. */ .g-body[data-guest-template="night"] .g-topbar { background: transparent; box-shadow: none; backdrop-filter: none; color: var(--gt-ink); padding: 16px 20px; } .g-body[data-guest-template="night"][data-guest-hero="cover"] .g-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 30; } .g-body[data-guest-template="night"] .g-app { position: relative; } .g-body[data-guest-template="night"] .g-topbar__brand { color: var(--gt-ink); font-family: var(--gt-sans); font-weight: 600; letter-spacing: .04em; } /* Il logo lo carica la struttura e può essere di qualsiasi colore, spesso scuro: la piastrina resta chiara anche nel tema notturno, altrimenti un marchio in nero sparirebbe. */ .g-body[data-guest-template="night"] .g-topbar__plate { background: rgba(242, 238, 230, 0.94); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } .g-body[data-guest-template="night"] .g-topbar__room { background: rgba(242, 238, 230, 0.10); color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-topbar__action { color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-lang__current { background: rgba(15, 20, 32, 0.45); border: 1px solid rgba(242, 238, 230, 0.28); color: var(--gt-ink); font-family: var(--gt-sans); letter-spacing: .06em; } .g-body[data-guest-template="night"] .g-lang__current .g-lang__code { color: inherit; } .g-body[data-guest-template="night"] .g-lang__menu { background: var(--gt-surface-2); border-color: var(--gt-line); } .g-body[data-guest-template="night"] .g-lang__item { color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-lang__item:hover, .g-body[data-guest-template="night"] .g-lang__item--active { background: rgba(242, 238, 230, 0.08); } .g-body[data-guest-template="night"] .g-lang__code { color: var(--gt-accent); } /* --- Hero ----------------------------------------------------------------- */ /* L'apertura sta in `.g-app` (fuori da `.g-main`) per essere a tutta larghezza senza margini negativi: il padding orizzontale lo portano `.g-main` e i blocchi che non sono a tutta larghezza. */ .g-body[data-guest-template="night"] .g-app { padding: 0 0 calc(24px + env(safe-area-inset-bottom)); } .g-body[data-guest-template="night"] .g-main { padding: 8px 18px 0; } .g-body[data-guest-template="night"] .g-flash { margin: 8px 18px 0; } .g-body[data-guest-template="night"] .gt-hero--cover { position: relative; height: 300px; overflow: hidden; background: #1b2334; } .g-body[data-guest-template="night"] .gt-hero--cover .gt-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Velatura: deve reggere anche una copertina chiarissima, perché ci vanno sopra la testata (in alto) e il nome della struttura (in basso). Il fondo arriva quasi opaco ben prima del bordo, altrimenti l'occhiello dorato si perde su una foto luminosa. */ .g-body[data-guest-template="night"] .gt-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,20,32,.78) 0%, rgba(15,20,32,.12) 32%, rgba(15,20,32,.86) 74%, rgba(15,20,32,.98) 100%); } .g-body[data-guest-template="night"] .gt-hero--cover .gt-hero__body { position: absolute; left: 22px; right: 22px; bottom: 22px; } .g-body[data-guest-template="night"] .gt-hero--plain { padding: 22px 18px 20px; border-bottom: 1px solid var(--gt-line); } .g-body[data-guest-template="night"] .gt-eyebrow { display: block; margin-bottom: 8px; font: 500 10px/1 var(--gt-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gt-accent); } .g-body[data-guest-template="night"] .gt-hero__title { margin: 0; font-family: var(--gt-serif); font-weight: 400; font-size: 2.4rem; line-height: 1.02; letter-spacing: -.01em; color: var(--gt-ink); } .g-body[data-guest-template="night"] .gt-hero--plain .gt-hero__title { font-size: 2.6rem; } .g-body[data-guest-template="night"] .gt-hero__sub { margin: 8px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--gt-muted); } .g-body[data-guest-template="night"] .gt-hero__badge { display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(201, 162, 74, 0.16); color: var(--gt-accent); font-size: 0.72rem; font-weight: 700; } /* --- Card assistente ------------------------------------------------------- */ .g-body[data-guest-template="night"] .g-assistant { background: linear-gradient(135deg, #1D2537, #161D2C); border: 1px solid rgba(201, 162, 74, 0.28); border-radius: 16px; } .g-body[data-guest-template="night"] .g-assistant__icon { background: rgba(201, 162, 74, 0.16); color: var(--gt-accent); border-radius: 50%; } /* Il marchio ConSergio è scuro: sul fondo notturno serve il suo disco chiaro, come nel tema `classic` dove la card è bianca. */ .g-body[data-guest-template="night"] .g-assistant__icon--brand { background: rgba(242, 238, 230, 0.94); } .g-body[data-guest-template="night"] .g-assistant__title { font-family: var(--gt-sans); font-weight: 700; font-size: 0.95rem; color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-assistant__sub { color: var(--gt-muted); } /* --- Sezioni --------------------------------------------------------------- */ .g-body[data-guest-template="night"] .g-section__title { font-family: var(--gt-serif); font-weight: 400; font-size: 1.5rem; color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-section__count { font: 500 10px/1 var(--gt-mono); letter-spacing: .12em; color: var(--gt-accent); } .g-body[data-guest-template="night"] .g-link { color: var(--gt-accent); } /* --- Servizi: dalla griglia alla lista ------------------------------------ */ /* Il mockup mette i servizi in colonna, foto quadrata a sinistra. Il markup è lo stesso di `classic` (`_card.html.erb`): cambia solo la direzione. */ .g-body[data-guest-template="night"] .g-grid { grid-template-columns: 1fr; gap: 12px; } .g-body[data-guest-template="night"] .g-service { flex-direction: row; gap: 14px; align-items: stretch; padding: 12px; border: none; border-radius: 16px; background: var(--gt-surface); box-shadow: none; } .g-body[data-guest-template="night"] .g-service:hover { transform: none; background: var(--gt-surface-2); } /* Altezza esplicita e niente stiramento: dentro un flex l'immagine porta la propria altezza intrinseca e batterebbe `aspect-ratio`, facendo miniature di misure diverse riga per riga. */ .g-body[data-guest-template="night"] .g-service__media { flex: 0 0 92px; width: 92px; height: 92px; align-self: flex-start; border-radius: 12px; overflow: hidden; background: var(--gt-surface-2); } .g-body[data-guest-template="night"] .g-service__body { flex: 1; min-width: 0; padding: 2px 2px 2px 0; } .g-body[data-guest-template="night"] .g-service__cat { font: 500 9px/1.2 var(--gt-mono); letter-spacing: .14em; color: var(--gt-accent); } .g-body[data-guest-template="night"] .g-service__name { font-family: var(--gt-serif); font-weight: 400; font-size: 1.2rem; line-height: 1.15; margin: 5px 0 6px; color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-service__hours { color: var(--gt-muted); font-size: 0.72rem; } .g-body[data-guest-template="night"] .g-service__price { font-family: var(--gt-sans); font-weight: 700; font-size: 0.82rem; color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-service__placeholder { color: rgba(201, 162, 74, 0.45); } /* Su una miniatura da 92px due etichette a grandezza piena coprono la foto: nel tema notturno restano leggibili ma minute. */ .g-body[data-guest-template="night"] .g-service__badges { gap: 4px; top: 6px; left: 6px; } .g-body[data-guest-template="night"] .g-badge { padding: 2px 7px; font-size: 0.56rem; letter-spacing: 0.2px; } .g-body[data-guest-template="night"] .g-badge--featured { background: rgba(15, 20, 32, 0.78); color: var(--gt-accent); } .g-body[data-guest-template="night"] .g-badge--popular { background: var(--gt-accent); color: #0F1420; } /* --- Categorie: righe con filetto ------------------------------------------ */ .g-body[data-guest-template="night"] .g-cat { flex-direction: row; align-items: baseline; gap: 12px; padding: 15px 0; border: none; border-bottom: 1px solid var(--gt-line); border-radius: 0; background: transparent; box-shadow: none; } .g-body[data-guest-template="night"] .g-cat:hover { transform: none; background: transparent; } .g-body[data-guest-template="night"] .g-cat__media { display: none; } /* Nome e conteggio sulla STESSA riga: la direzione va dichiarata, ora che il layer base mette le card di categoria in colonna. */ .g-body[data-guest-template="night"] .g-cat__body { flex: 1; padding: 0; display: flex; flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap; } .g-body[data-guest-template="night"] .g-cat__count { margin-top: 0; } .g-body[data-guest-template="night"] .g-cat__name { flex: 1; font-family: var(--gt-serif); font-weight: 400; font-size: 1.25rem; color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-cat__desc { flex: 1 1 100%; margin: 4px 0 0; color: var(--gt-muted); } .g-body[data-guest-template="night"] .g-cat__count { margin: 0; font: 500 10px/1 var(--gt-mono); color: var(--gt-muted-2); text-transform: none; } /* Il chevron dice che la riga si apre: senza card né bordo è l'unico segnale. */ .g-body[data-guest-template="night"] .g-cat::after { content: "›"; align-self: baseline; color: var(--gt-accent); font-size: 1.1rem; line-height: 1; } /* La copertina di categoria resta nella pagina di dettaglio: lì è il soggetto. */ .g-body[data-guest-template="night"] .g-cat-head__media { background: var(--gt-surface-2); } /* --- CTA, liste, dettaglio, form ------------------------------------------- */ /* Le superfici a card dell'app ospite: in application.css condividono una regola sola con `background: #fff` letterale, quindi vanno ridipinte tutte insieme — Wi-Fi e Contatti compresi, altrimenti restano bianche con sopra il testo chiaro del tema. */ .g-body[data-guest-template="night"] .g-cta, .g-body[data-guest-template="night"] .g-list__item, .g-body[data-guest-template="night"] .g-faq, .g-body[data-guest-template="night"] .g-facts--card, .g-body[data-guest-template="night"] .g-form-card, .g-body[data-guest-template="night"] .g-recap, .g-body[data-guest-template="night"] .g-wifi, .g-body[data-guest-template="night"] .g-contacts, .g-body[data-guest-template="night"] .g-empty { background: var(--gt-surface); border-color: var(--gt-line); box-shadow: none; color: var(--gt-ink); } .g-body[data-guest-template="night"] .chip { background: rgba(201, 162, 74, 0.16); border-color: rgba(201, 162, 74, 0.32); color: var(--gt-accent); } .g-body[data-guest-template="night"] .chip:hover { background: rgba(201, 162, 74, 0.26); } .g-body[data-guest-template="night"] .chip--copied { background: rgba(70, 180, 80, 0.18); border-color: rgba(70, 180, 80, 0.35); color: #7BD98F; } .g-body[data-guest-template="night"] .g-empty { border-style: dashed; border-color: var(--gt-line); } .g-body[data-guest-template="night"] .g-cta__icon { background: rgba(201, 162, 74, 0.16); color: var(--gt-accent); } .g-body[data-guest-template="night"] .g-cta__title { font-family: var(--gt-sans); font-weight: 700; color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-detail__title, .g-body[data-guest-template="night"] .g-page__title, .g-body[data-guest-template="night"] .g-chat__title { font-family: var(--gt-serif); font-weight: 400; color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-detail__media, .g-body[data-guest-template="night"] .g-service__media, .g-body[data-guest-template="night"] .g-cat__media { background: var(--gt-surface-2); } .g-body[data-guest-template="night"] .g-detail__cat { color: var(--gt-accent); } .g-body[data-guest-template="night"] .g-back { color: var(--gt-accent); } .g-body[data-guest-template="night"] .g-file__icon { background: var(--gt-surface-2); color: var(--gt-accent); } .g-body[data-guest-template="night"] .g-contact__icon { background: rgba(201, 162, 74, 0.16); color: var(--gt-accent); } .g-body[data-guest-template="night"] .form__input, .g-body[data-guest-template="night"] .g-chat__input { background-color: var(--gt-surface); border-color: var(--gt-line); color: var(--gt-ink); } .g-body[data-guest-template="night"] .form__input::placeholder, .g-body[data-guest-template="night"] .g-chat__input::placeholder { color: var(--gt-muted-2); } .g-body[data-guest-template="night"] .form__label { color: var(--gt-ink); } .g-body[data-guest-template="night"] .form__hint { color: var(--gt-muted); } .g-body[data-guest-template="night"] .btn--primary { background: var(--gt-accent); color: #0F1420; box-shadow: none; font-family: var(--gt-sans); } .g-body[data-guest-template="night"] .btn--primary:hover { background: #d8b25c; } .g-body[data-guest-template="night"] .btn--ghost { background: var(--gt-surface); border-color: var(--gt-line); color: var(--gt-ink); } /* --- Richieste e chat ------------------------------------------------------ */ .g-body[data-guest-template="night"] .g-req, .g-body[data-guest-template="night"] .g-offer { background: var(--gt-surface); border-color: var(--gt-line); color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-chat__log { background: var(--gt-surface); } .g-body[data-guest-template="night"] .g-msg__bubble { background: var(--gt-surface-2); color: var(--gt-ink); box-shadow: none; } .g-body[data-guest-template="night"] .g-msg--user .g-msg__bubble { background: rgba(201, 162, 74, 0.18); color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-msg--user .g-msg__bubble a { color: var(--gt-accent); } .g-body[data-guest-template="night"] .g-offer__cta { background: var(--gt-accent); color: #0F1420; } .g-body[data-guest-template="night"] .g-status--received { background: rgba(201, 162, 74, 0.16); color: var(--gt-accent); } .g-body[data-guest-template="night"] .g-confirm__check { background: rgba(70, 180, 80, 0.16); color: #7BD98F; } .g-body[data-guest-template="night"] .g-status--done { background: rgba(70, 180, 80, 0.16); color: #7BD98F; } .g-body[data-guest-template="night"] .g-flash--notice { background: rgba(70, 180, 80, 0.16); color: #7BD98F; } .g-body[data-guest-template="night"] .g-flash--alert { background: rgba(198, 40, 40, 0.20); color: #FF9C9C; } .g-body[data-guest-template="night"] .g-wifi__value { color: var(--gt-ink); } /* --- Footer ---------------------------------------------------------------- */ .g-body[data-guest-template="night"] .g-footer { margin-top: 22px; padding: 22px 18px 26px; border-top: 1px solid var(--gt-line); text-align: center; } .g-body[data-guest-template="night"] .g-footer__name { font-family: var(--gt-serif); font-weight: 400; font-size: 1.1rem; color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-footer__line { color: var(--gt-muted-2); } .g-body[data-guest-template="night"] .g-footer__link { color: var(--gt-accent); } .g-body[data-guest-template="night"] .g-footer__note { font: 500 9px/1.8 var(--gt-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 238, 230, 0.30); } /* --- Immagini di ripiego --------------------------------------------------- Le default sono disegnate nell'indigo storico: qui stonerebbero. Al loro posto il riquadro tratteggiato del mockup, nei colori del tema. */ .g-body[data-guest-template="night"] .g-img--placeholder { display: none; } .g-body[data-guest-template="night"] .g-service__media, .g-body[data-guest-template="night"] .g-cat__media, .g-body[data-guest-template="night"] .g-cat-head__media, .g-body[data-guest-template="night"] .g-detail__media { background: repeating-linear-gradient(135deg, #232c40 0 8px, #28324a 8px 16px); } /* Su schermi larghi la lista resta una lista: è la cifra del template. */ @media (min-width: 600px) { .g-body[data-guest-template="night"] .g-grid { grid-template-columns: 1fr; } } /* Il campo della chat non ha uno stile di focus proprio in application.css e ricadrebbe sull'anello azzurro del browser, fuori tema su fondo scuro. */ .g-body[data-guest-template="night"] .g-chat__input:focus { outline: none; border-color: var(--gt-accent); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.28); } /* §E23/UX — navigazione fra le sezioni nella palette del tema. */ .g-body[data-guest-template="night"] .g-sectionnav__list { padding: 12px 18px 6px; } .g-body[data-guest-template="night"] .g-sectionnav__item { background: var(--gt-surface); border-color: var(--gt-line); color: var(--gt-muted); font-family: var(--gt-sans); } .g-body[data-guest-template="night"] .g-sectionnav__item:hover { color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-sectionnav__item--active { background: rgba(201, 162, 74, 0.16); border-color: rgba(201, 162, 74, 0.45); color: var(--gt-accent); } /* §E23/UX — "Le mie richieste" nella testata: pagina corrente marcata. */ .g-body[data-guest-template="night"] .g-topbar__action--active { background: rgba(201, 162, 74, 0.20); color: var(--gt-accent); } /* ========================================================================== §E23/UX — Scheda orari/prezzo, riepilogo e modulo di richiesta. ========================================================================== */ .g-body[data-guest-template="night"] .g-fact + .g-fact { border-top-color: var(--gt-line); } .g-body[data-guest-template="night"] .g-fact__icon, .g-body[data-guest-template="night"] .g-recap__cat { color: var(--gt-accent); } .g-body[data-guest-template="night"] .g-fact__label, .g-body[data-guest-template="night"] .g-fact__key, .g-body[data-guest-template="night"] .g-fact__note { color: var(--gt-muted); } .g-body[data-guest-template="night"] .g-fact__value, .g-body[data-guest-template="night"] .g-total { color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-recap__name { font-family: var(--gt-serif); font-weight: 400; color: var(--gt-ink); } /* Nel buio la superficie che emerge è la PIÙ CHIARA: il campo sale su `--gt-surface-2` invece di scendere. Lasciandolo su `--gt-surface` sarebbe esattamente lo stesso colore della card — cioè il difetto di `classic` ricreato qui. Il contorno regge 3.46:1 sulla card. */ .g-body[data-guest-template="night"] .form__input { background-color: var(--gt-surface-2); border-color: var(--gt-muted-2); } .g-body[data-guest-template="night"] .form__input:focus { background-color: var(--gt-surface-2); border-color: var(--gt-accent); box-shadow: 0 0 0 3px rgba(201, 162, 74, .25); } /* Il chevron di serie è disegnato in grigio scuro: sul campo notturno sparisce. */ .g-body[data-guest-template="night"] select.form__input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C9A24A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .g-body[data-guest-template="night"] .g-stepper__btn { background: var(--gt-surface-2); border-color: var(--gt-muted-2); color: var(--gt-ink); } .g-body[data-guest-template="night"] .g-stepper__btn:hover:not(:disabled) { background: var(--gt-line); }