/* ========================================================================= PALETTE DI PROVA — "test 1" Si attiva SOLO con ?theme=test (o ?theme=test2) nell'URL. Senza il parametro questo foglio resta disabilitato e il sito e' identico a prima. bordeaux #520507 — le fasce (sezione booking + footer) marrone #34170b — le scritte oliva #696b54 — i bottoni e tutto l'interattivo Il file si carica per ultimo nel , quindi a parita' di specificita' vince su styles.css: bastano le stesse selezioni, senza !important. ========================================================================= */ :root { /* ---- Fasce: bordeaux ---- Token NUOVO. Serve perche' in styles.css `--brown` fa due lavori insieme (sfondo delle fasce E colore dei titoli) e qui i due devono divergere. */ --band: #520507; /* ---- Scritte: marrone profondo ---- */ --brown: #34170b; /* titoli, testo forte */ --brown-soft: #5e3117; /* testo secondario — derivato tenendo la stessa distanza di luminosita' che #5a4426 aveva da #3e2805, cosi' la gerarchia non si appiattisce. Contrasto su crema: 10.1:1 */ /* ---- Azione: verde oliva ---- Nota: il cipresso #4a5d43 era 7.15:1 su bianco (AAA). L'oliva scende a 5.48:1 — conforme AA (>= 4.5), non piu' AAA. */ --cypress: #696b54; --cypress-dark: #54563f; /* hover — derivato */ --cypress-soft: #a0a28c; /* versione chiara su fondi scuri — derivato */ } /* ---------- Le due fasce ---------- Leggevano `--brown`, che ora e' il colore del testo: vanno ripuntate a mano. */ .section--brown { background: var(--band); } .site-footer { background: var(--band); } /* ========================================================================= Verde cablato a mano Punti dove styles.css scrive il colore invece di usare il token: senza questi resterebbero isole salvia in mezzo all'oliva. ========================================================================= */ /* --- calendario --- */ /* stato "demo" */ .cal__status.is-demo { background: #f4f4ee; color: var(--cypress); } /* frecce del mese */ .cal__arrow:hover:not(:disabled) { background: #f4f4ee; } /* giorni al passaggio del mouse */ .cal__day:not(.is-off):not(.is-empty):hover { background: #f0f0e7; } /* fasce orarie al passaggio del mouse */ .cal__slot:hover { background: #f0f0e7; } /* --- booking --- */ /* etichetta della durata sotto il titolo dell'extra */ .extra__time { background: #f0f0e7; } /* chip al passaggio del mouse */ .chip:hover span { background: #f4f4ee; } /* banner "prenotazione confermata": in styles.css e' dichiarato due volte, vince quello col gradiente (riga ~1041). Qui basta ridichiarare quello. */ .booking__confirmed { background: linear-gradient(180deg, #f5f5ee, #eff0e5); border-color: #d4d5c3; } /* --- anelli di focus --- rgba(74, 93, 67) e' il cipresso in chiaro: stessi alfa, tinta oliva. */ .field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(105, 107, 84, 0.18); } .phonecc__btn:focus-visible, .phonecc__btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(105, 107, 84, 0.16); } /* dichiarato due volte anche questo (righe ~706 e ~1035), con alfa diversi: vince l'ultimo, 0.28. */ .chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(105, 107, 84, 0.28); } /* ------------------------------------------------------------------------- DUE INTERRUTTORI, se serve — togli il commento per attivarli ------------------------------------------------------------------------- */ /* 1. Footer piu' scuro della fascia, come e' oggi (#2a1c06 vs #3e2805). Con un solo bordeaux le due tinte diventano identiche e la pagina chiude sullo stesso colore della sezione booking. */ /* .site-footer { background: #3d0405; } */ /* 2. Spunta verde di conferma: lasciata #4e8a45 perche' e' un segnale semantico di successo, ma resta l'unico verde acceso della pagina. */ /* .booking__confirmed .tick { background: var(--cypress); } */