/* ============================================================================= THEME PRESETS ----------------------------------------------------------------------------- Un unico attributo data-theme su commuta tutta la cromia del sito. Il preset attivo arriva dal SiteSetting "theme_preset" (pannello CMS), quindi il cambio e reversibile senza deploy: se il salvia non convince, si torna a "terracotta" dalla tendina e il sito e come prima. Struttura a tre livelli: 1. Scala tonale grezza (--sage-*, --terra-*, --oxide, --ochre): i colori. 2. Token semantici (--surface-*, --ink-*, --accent*, --pop, --geo-*): il ruolo. Le regole nuove usano SOLO questi, mai la scala grezza. 3. Alias legacy (--primary, --page-bg, --text-900...): i nomi che le 540 righe di siteFE.css usano gia. Ridefinirli qui fa scivolare tutto il sito sul preset nuovo senza riscrivere le regole esistenti. I preset salvia seguono una regola di composizione precisa, non decorativa: il campo e salvia, la struttura e inchiostro, le superfici di lettura sono gesso, e UN solo colore urla (l ossido). L ocra compare come forma piena e non porta mai testo, perche ocra e salvia hanno quasi la stessa luminanza (1,3:1) e qualsiasi scritta ci sparirebbe dentro. ============================================================================= */ :root { /* --- Scala salvia, derivata da #7B957C = hsl(122, 11%, 53%), brand cliente --- */ --sage-50: #F2F4F2; --sage-100: #EBEFEB; --sage-200: #D7DFD8; --sage-300: #BDCABE; --sage-400: #9CAF9D; --sage-500: #7B957C; /* il verde del brand: il campo */ --sage-600: #627763; --sage-700: #4A594A; --sage-deep: #3F5142; /* seconda fascia: separa le sezioni a tutta larghezza */ --sage-800: #313C32; --sage-900: #1F251F; /* Inchiostro verde-nero: struttura e tipografia. Non e un nero tinto per ammorbidire, e il nero di questa famiglia cromatica. */ --ink: #16201A; /* Gesso: la superficie di lettura. Piu fredda e piu opaca di una crema, cosi le tessere sembrano cartoncino montato e non carta da lettera. */ --paper: #EDEAE0; --paper-dim: #DFDBCD; /* I due colori del Bauhaus riletti in chiave contemporanea: bruciati, terrosi, mai squillanti. */ --oxide: #9E3B24; /* il rosso: l unico colore che urla */ --oxide-deep: #7F2C18; --ochre: #D99A2B; /* il giallo: solo forme piene */ --slate: #3F5F6B; /* il blu: la terza figura e le linee */ /* Letterali, non ruoli: restano fissi in tutti i preset. */ --white: #ffffff; --black: #000000; /* --- Scala terracotta (preset storico) --- */ --terra-500: #C56844; --terra-300: #DAB587; --terra-700: #875C46; --olive-700: #5A5B3E; --sand-50: #F5F1ED; } /* ============================================================================= PRESET 1 - terracotta (default, stato attuale del sito) ============================================================================= */ :root, :root[data-theme="terracotta"] { --surface-page: var(--sand-50); --surface-alt: #f7f7f7; --surface-raised: #ffffff; --surface-placeholder: #f0ede8; --surface-band: var(--terra-500); --surface-inverse: #1a1a1a; --ink-strong: #0f172a; --ink-body: #334155; --ink-muted: #64748b; --ink-on-accent: #ffffff; --ink-on-band: #ffffff; --ink-on-inverse: #f5f5f5; --border-subtle: #e5e7eb; --border-strong: var(--terra-700); --accent: var(--terra-500); --accent-hover: var(--olive-700); --accent-soft: var(--terra-300); /* Nel tema storico il colore che urla e l accento stesso: nessun cambio. */ --pop: var(--terra-500); --pop-hover: #a9512f; --ink-on-pop: #ffffff; --rule: #e5e7eb; --field-wash: rgba(15,23,42,.03); --chip: var(--terra-500); --chip-ink: #ffffff; /* Forme decorative del layout, con le trasparenze originali. */ --geo-1: rgba(226,114,91,.20); --geo-2: rgba(90,91,62,.20); --geo-3: rgba(135,92,70,.30); --geo-line-h: var(--olive-700); --geo-line-v: var(--terra-500); --photo-tint: var(--terra-300); } /* ============================================================================= PRESET 2 - sage-light: campo chiaro, struttura inchiostro. Stessa composizione del salvia pieno, ma con il campo schiarito: resta leggibile su shop e checkout, dove le pagine sono lunghe e piene di dati. ============================================================================= */ :root[data-theme="sage-light"] { --surface-page: var(--sage-100); --surface-alt: var(--sage-500); --surface-raised: var(--paper); --surface-placeholder: var(--paper-dim); --surface-band: var(--sage-deep); --surface-inverse: var(--sage-deep); --ink-strong: var(--ink); --ink-body: #2B362D; --ink-muted: #4A5A4C; --ink-on-accent: var(--paper); --ink-on-band: var(--paper); --ink-on-inverse: var(--paper); --border-subtle: var(--sage-300); --border-strong: var(--ink); --accent: #2F4034; --accent-hover: var(--ink); --accent-soft: var(--sage-300); --pop: var(--oxide); --pop-hover: var(--oxide-deep); --ink-on-pop: var(--paper); --rule: rgba(63,81,66,.45); --field-wash: rgba(22,32,26,.05); --chip: var(--sage-500); --chip-ink: var(--ink); --geo-1: var(--ochre); --geo-2: var(--oxide); --geo-3: var(--slate); --geo-line-h: var(--oxide); --geo-line-v: var(--slate); --photo-tint: var(--sage-500); } /* ============================================================================= PRESET 3 - sage-full: #7B957C come campo di tutto il sito. E la richiesta letterale del cliente, composta come una tavola: campo salvia, tavole in gesso montate sopra, struttura inchiostro, un solo colore che urla. ============================================================================= */ :root[data-theme="sage-full"] { --surface-page: var(--sage-500); --surface-alt: var(--sage-deep); --surface-raised: var(--paper); --surface-placeholder: var(--paper-dim); --surface-band: var(--sage-deep); --surface-inverse: var(--sage-deep); /* Inchiostro su salvia = 5,1:1, passa AA. Il bianco si ferma a 3,3:1, quindi sul campo il testo e sempre scuro. */ --ink-strong: var(--ink); --ink-body: var(--ink); --ink-muted: #2B362D; --ink-on-accent: var(--paper); --ink-on-band: var(--paper); --ink-on-inverse: var(--paper); --border-subtle: var(--sage-deep); --border-strong: var(--ink); /* L accento porta testo (link, titoli), quindi resta verde profondo. Il rosso sta in --pop, dove non deve mai reggere una riga di testo sul campo salvia. */ --accent: #2A3A2D; --accent-hover: var(--ink); --accent-soft: var(--sage-300); --pop: var(--oxide); --pop-hover: var(--oxide-deep); --ink-on-pop: var(--paper); --rule: rgba(63,81,66,.5); --field-wash: rgba(22,32,26,.05); --chip: var(--sage-500); --chip-ink: var(--ink); --geo-1: var(--ochre); --geo-2: var(--oxide); --geo-3: var(--slate); --geo-line-h: var(--oxide); --geo-line-v: var(--slate); --photo-tint: var(--sage-500); } /* ============================================================================= PRESET 4 - sage-dark: campo inchiostro, tavole in salvia profondo. Il taglio da catalogo: ottimo sul portfolio, impegnativo sull e-commerce. ============================================================================= */ :root[data-theme="sage-dark"] { --surface-page: var(--ink); --surface-alt: #101811; --surface-raised: var(--sage-deep); --surface-placeholder: #35452F; --surface-band: var(--sage-700); --surface-inverse: #101811; --ink-strong: var(--paper); --ink-body: #D9DED6; --ink-muted: var(--sage-300); --ink-on-accent: var(--ink); --ink-on-band: var(--paper); --ink-on-inverse: var(--paper); --border-subtle: #3A4A3C; --border-strong: var(--sage-400); --accent: var(--sage-400); --accent-hover: var(--sage-300); --accent-soft: var(--sage-700); --pop: #C05235; --pop-hover: var(--oxide); --ink-on-pop: var(--ink); --rule: rgba(237,234,224,.22); --field-wash: rgba(237,234,224,.06); --chip: var(--sage-deep); --chip-ink: var(--paper); --geo-1: var(--ochre); --geo-2: #C05235; --geo-3: #6E93A1; --geo-line-h: #C05235; --geo-line-v: #6E93A1; --photo-tint: var(--sage-400); } /* ============================================================================= ALIAS LEGACY I nomi che siteFE.css, portfolio-home.css e gli style inline usano da sempre. Puntandoli ai token semantici, cambiare preset ridipinge tutto il sito senza toccare una singola regola di layout. ============================================================================= */ :root { --primary: var(--accent); --primary-light: var(--accent-soft); --primary-dark: var(--accent-hover); --warm-brown: var(--border-strong); --page-bg: var(--surface-page); --portfolio-bg: var(--surface-alt); --text-900: var(--ink-strong); --text-800: var(--ink-body); --text-600: var(--ink-body); --text-500: var(--ink-muted); --placeholder-bg: var(--surface-placeholder); --bauhaus-terracotta: var(--pop); --bauhaus-olive: var(--accent-hover); --bauhaus-brown: var(--border-strong); } /* ============================================================================= COMPOSIZIONE DEI PRESET SALVIA ----------------------------------------------------------------------------- Regola di peso: l inchiostro fa la tipografia e le tre figure, nient altro. I confini sono fili tenui, non cornici. Quello che separa i piani e il salto di superficie (gesso sul campo salvia), non una riga nera intorno a ogni cosa. Vale solo fuori dal preset terracotta, cosi il rollback non lascia residui. ============================================================================= */ :root[data-theme^="sage"] body { background-color: var(--surface-page); color: var(--ink-body); } /* --- Le tavole: cartoncino appoggiato sul campo. Il contrasto di superficie basta a staccarle, quindi niente cornice e niente ombra. --- */ :root[data-theme^="sage"] .bg-white, :root[data-theme^="sage"] .bg-light { background-color: var(--surface-raised) !important; color: var(--ink-body); } :root[data-theme^="sage"] .card, :root[data-theme^="sage"] .modal-content, :root[data-theme^="sage"] .offcanvas, :root[data-theme^="sage"] .dropdown-menu { background-color: var(--surface-raised); color: var(--ink-body); border: 1px solid var(--rule); } :root[data-theme^="sage"] .shadow, :root[data-theme^="sage"] .shadow-sm, :root[data-theme^="sage"] .shadow-lg { box-shadow: none !important; } /* Le stampe del portfolio tengono un filo netto: li il bordo e il passepartout della tavola, non una decorazione. */ :root[data-theme^="sage"] .pf-plate, :root[data-theme^="sage"] .pf-plate-photo { box-shadow: none; border: 1px solid var(--rule); border-radius: 0; } :root[data-theme^="sage"] .img-framed, :root[data-theme="sage-full"] .card img, :root[data-theme="sage-dark"] .card img { background-color: var(--surface-raised); } /* Widget di terze parti (PayPal, reCAPTCHA, Google) non si tingono: vanno isolati su una superficie di lettura invece di lottare col campo. */ :root[data-theme^="sage"] .third-party-surface { background-color: var(--surface-raised); border: 1px solid var(--rule); padding: 1rem; } :root[data-theme^="sage"] .text-muted { color: var(--ink-muted) !important; } :root[data-theme^="sage"] hr { border-color: var(--rule); border-top-width: 1px; opacity: 1; } /* L header appoggia sul campo con un filo, non con una trave. */ :root[data-theme^="sage"] .sticky-top-blur { backdrop-filter: none; background-color: var(--surface-page); border-bottom: 1px solid var(--rule); } /* Il footer e la fascia piu profonda della stessa famiglia verde, non un blocco nero incollato in fondo alla pagina. */ :root[data-theme^="sage"] .site-footer { background: var(--surface-inverse); color: var(--ink-on-inverse); border-top: 2px solid var(--rule); } /* --- I campi del modulo: linee, non scatole. Sei rettangoli bordati uno sotto l altro pesano quanto un muro. Qui resta solo la riga di base, come le linee di quota di un disegno: il modulo si legge, ma non grida. --- */ :root[data-theme^="sage"] .form-control, :root[data-theme^="sage"] .form-select { background-color: var(--field-wash); border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; color: var(--ink-strong); box-shadow: none; transition: border-color .15s, background-color .15s; } :root[data-theme^="sage"] .form-control::placeholder { color: var(--ink-muted); opacity: .75; } /* Al fuoco la riga si ispessisce e prende l ossido: un solo segnale, netto. */ :root[data-theme^="sage"] .form-control:focus, :root[data-theme^="sage"] .form-select:focus { background-color: var(--field-wash); border-bottom: 2px solid var(--pop); box-shadow: none; outline: none; } :root[data-theme^="sage"] .form-label { color: var(--ink-muted); } /* --- Il footer e una superficie scura: i toni tenui che valgono sul campo chiaro qui diventano illeggibili. Invece di forzare ogni regola, il footer ridefinisce al proprio interno i nomi legacy: gli style inline che usano var(--text-500) o var(--primary-dark) si schiariscono da soli, contenuti dell editor footer compresi. --- */ :root[data-theme^="sage"] .site-footer { --text-900: var(--paper); --text-800: #D9DED6; --text-600: #D9DED6; --text-500: var(--sage-300); --ink-strong: var(--paper); --ink-body: #D9DED6; --ink-muted: var(--sage-300); --primary: var(--sage-300); --primary-dark: var(--paper); --primary-light: var(--sage-400); } :root[data-theme^="sage"] .site-footer a { color: var(--paper); } :root[data-theme^="sage"] .site-footer a:hover { color: var(--paper); box-shadow: inset 0 -1px 0 var(--pop); } :root[data-theme^="sage"] .site-footer .text-muted { color: var(--sage-300) !important; } /* --- Menu: al passaggio il testo va a inchiostro pieno e sotto compare una riga d ossido. Il colore da il segnale, l inchiostro tiene la leggibilita: l ossido come testo sul campo salvia farebbe solo 2:1. --- */ :root[data-theme^="sage"] header nav a, :root[data-theme^="sage"] header .nav-dropdown-toggle { color: var(--ink-body); text-decoration: none; transition: color .15s, box-shadow .15s; } :root[data-theme^="sage"] header nav a:hover, :root[data-theme^="sage"] header nav a:focus-visible, :root[data-theme^="sage"] header .nav-dropdown:hover .nav-dropdown-toggle { color: var(--ink-strong); box-shadow: inset 0 -2px 0 var(--pop); } /* Le voci dentro il menu a tendina stanno su gesso, non sul campo. */ :root[data-theme^="sage"] .nav-dropdown-menu a:hover { background-color: var(--field-wash); box-shadow: inset 2px 0 0 var(--pop); } /* Stessa logica nel menu mobile. */ :root[data-theme^="sage"] .offcanvas a:hover { color: var(--ink-strong); box-shadow: inset 0 -2px 0 var(--pop); } /* --- L unico colore che urla: ossido. Bottone d azione, cursore dello scalimetro, filo di lettura. Nient altro. --- */ :root[data-theme^="sage"] .btn-primary-warm { background: var(--pop); color: var(--ink-on-pop); border-radius: 0; box-shadow: none; } :root[data-theme^="sage"] .btn-primary-warm:hover { background: var(--pop-hover); filter: none; } :root[data-theme^="sage"] .btn-outline-warm { border: 1px solid var(--ink-strong); color: var(--ink-strong); border-radius: 0; } :root[data-theme^="sage"] .btn-outline-warm:hover { background: var(--pop); border-color: var(--pop); color: var(--ink-on-pop); } /* Lo scalimetro e il pezzo caratteristico del sito: il cursore va visto. */ :root[data-theme^="sage"] .pf-cursor { border-color: var(--pop); background: color-mix(in srgb, var(--paper) 16%, transparent); } :root[data-theme^="sage"] .pf-cursor::before { background: linear-gradient(var(--pop) 0 28%, transparent 28% 72%, var(--pop) 72% 100%); } /* Le graduazioni erano sabbia fissa: passano al gesso del preset. */ :root[data-theme^="sage"] .pf-ruler-track { --pf-tick: color-mix(in srgb, var(--paper) 45%, transparent); --pf-tick-strong: color-mix(in srgb, var(--paper) 85%, transparent); } /* --- Geometria: tre figure piene e ferme, non nuvole al 20%. Sono l unico punto, con il bottone, dove il colore e pieno. --- */ :root[data-theme^="sage"] .bauhaus-shape { opacity: 1; } @supports not (background-color: color-mix(in srgb, red 50%, transparent)) { :root[data-theme^="sage"] .pf-cursor { background: transparent; } :root[data-theme^="sage"] .pf-ruler-track { --pf-tick: rgba(237,234,224,.45); --pf-tick-strong: rgba(237,234,224,.85); } } /* --- Le stampe non sono in bianco e nero: sono virate nel colore del sito. Il velo va steso con il salvia pieno, non con la sua variante chiara, o il duotone si spegne in grigio. Al passaggio il colore vero torna. --- */ :root[data-theme^="sage"] .pf-plate::after { background: var(--photo-tint); opacity: .62; } :root[data-theme^="sage"] .pf-plate-photo { filter: grayscale(1) contrast(1.12) brightness(1.02); } /* --- Nel footer il segno d ossido sotto ogni voce era un cerotto. Basta la sottolineatura tipografica, alla distanza giusta. --- */ :root[data-theme^="sage"] .site-footer a:hover { box-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--sage-300); }