/* ========================================================================= PAGINA VENDITE — sezione speciale ------------------------------------------------------------------------- L'IDEA Nel resto del sito l'intestazione è blu-grigio (ardesia) e il corpo della pagina è bianco, con il marrone del logo come accento. Qui i ruoli si scambiano: l'intestazione diventa verde salvia, il corpo blu-grigio scuro con testo crema, e il marrone resta solo per la banda finale. Chi entra in Vendite se ne accorge subito: non è una pagina di lavori fatti, è un'offerta. Il tema è attivo solo con . Nessuna regola qui sotto tocca le altre pagine. Per cambiare i colori modifica i valori della sezione 1 (il verde salvia è definito in style.css come --salvia). ========================================================================= */ /* ------------------------------------------------------------------------- 1) COLORI DELLA SEZIONE ------------------------------------------------------------------------- */ .sales{ --s-ground: var(--ardesia-d); /* fondo dell'elenco (blu-grigio scuro) */ --s-photo: var(--ardesia); /* fondo delle foto mentre si caricano */ --s-ink: var(--band); /* testo (crema) */ --s-green: var(--salvia); /* verde salvia: intestazione, stato "ristrutturato", dettagli */ --s-accent: #F0D9C8; /* prezzo, etichette (già usato nella home) */ --s-rule: rgba(147,165,173,.36); /* linee sottili (il blu delle linee di costruzione) */ } /* ------------------------------------------------------------------------- 2) FONDI E TESTI INVERTITI L'header resta bianco (il logo è disegnato per il fondo chiaro). ------------------------------------------------------------------------- */ .sales .page-head{ background:var(--s-green); } .sales .page-head h1, .sales .page-head p, .sales .page-head .eyebrow{ color:var(--s-ground); } .sales .page-head .eyebrow::before{ background:var(--s-ground); } .sales .page-head .setout path, .sales .page-head .setout circle, .sales .page-head .setout line{ stroke:rgba(42,57,65,.22); } .sales-list{ background:var(--s-ground); color:var(--s-ink); /* l'elenco non deve mai risultare "tagliato" quando è vuoto */ min-height:min(56vh, 520px); } .sales-list p{ color:rgba(246,242,237,.78); } .sales-list .btn:focus-visible, .sales-list a:focus-visible, .sales-list button:focus-visible{ outline:2px solid var(--s-accent); outline-offset:3px; } /* La banda finale resta marrone come nel resto del sito: qui è l'unico punto in cui il marrone occupa una fascia intera. */ /* [hidden] non deve essere vinto da altre regole di display */ .sales [hidden]{ display:none !important; } /* ------------------------------------------------------------------------- 3) STATO VUOTO Un riquadro con due squadrette agli angoli (le stesse che si aprono sulle foto dei progetti): è lo spazio riservato al prossimo immobile. ------------------------------------------------------------------------- */ .sales-empty{ position:relative; max-width:52rem; padding:clamp(36px,6vw,64px) clamp(28px,5vw,60px); border:1px solid var(--s-rule); } .sales-empty::before, .sales-empty::after{ content:""; position:absolute; width:22px; height:22px; border:0 solid var(--s-green); } .sales-empty::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; } .sales-empty::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; } .sales-empty h2{ color:var(--s-ink); font-size:clamp(1.7rem, 4vw, 2.6rem); line-height:1.2; max-width:20ch; margin-bottom:18px; } .sales-empty p{ max-width:52ch; margin-bottom:32px; } /* ------------------------------------------------------------------------- 4) SCHEDA IMMOBILE (generata da js/vendite.js) Non è la griglia di foto della pagina Progetti: ogni immobile è una scheda a tutta riga, foto a sinistra e dati tecnici a destra. ------------------------------------------------------------------------- */ .lot{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start; padding:64px 0; border-top:1px solid var(--s-rule); } .lot:first-child{ border-top:0; padding-top:0; } .lot:last-child{ padding-bottom:0; } .lot__figure{ margin:0; } .lot__photo{ aspect-ratio:3/2; width:100%; object-fit:cover; border-radius:var(--radius); background:var(--s-photo); } .lot__thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .lot__thumbs button{ width:76px; padding:0; cursor:pointer; background:none; border:1px solid transparent; opacity:.6; transition:opacity .2s, border-color .2s; } .lot__thumbs button:hover{ opacity:.9; } .lot__thumbs button[aria-current="true"]{ opacity:1; border-color:var(--s-accent); } .lot__thumbs img{ aspect-ratio:3/2; width:100%; object-fit:cover; } /* Stato dei lavori: verde pieno = ristrutturato, contorno pesca = da ristrutturare */ .lot__status{ display:inline-block; margin-bottom:16px; padding:5px 12px 4px; font-family:var(--font-util); font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; border:1px solid var(--s-accent); color:var(--s-accent); } .lot__status--done{ background:var(--s-green); border-color:var(--s-green); color:var(--s-ground); } .lot__title{ color:var(--s-ink); font-size:clamp(1.55rem, 3vw, 2.1rem); margin-bottom:6px; } .sales-list .lot__place{ color:var(--s-accent); font-size:.98rem; margin-bottom:0; } .sales-list .lot__price{ font-family:var(--font-display); font-weight:500; color:var(--s-accent); font-size:clamp(2rem, 4.4vw, 2.9rem); line-height:1.1; margin:26px 0 24px; } /* dati tecnici: righe con linea sottile, come l'elenco dei contatti */ .lot__specs{ margin:0 0 24px; } .lot__specs div{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:11px 0; border-bottom:1px solid var(--s-rule); } .lot__specs div:first-child{ border-top:1px solid var(--s-rule); } .lot__specs dt{ font-family:var(--font-util); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(246,242,237,.66); } .lot__specs dd{ margin:0; color:var(--s-ink); text-align:right; } .sales-list .lot__desc{ max-width:56ch; margin-bottom:28px; } /* ------------------------------------------------------------------------- 5) RESPONSIVE ------------------------------------------------------------------------- */ @media (max-width:1000px){ .lot{ grid-template-columns:1fr; gap:26px; padding:48px 0; } } @media (max-width:680px){ .lot__cta{ width:100%; } .sales-empty .btn{ width:100%; } } @media (prefers-reduced-motion:reduce){ .lot__thumbs button{ transition:none; } }