/* ========================================================= Il mio giardino — stili frontend Le variabili colore sono su :root (non solo su .mg-app): almeno un elemento del plugin (il modale "Confronta le proposte", costruito da JavaScript) viene aggiunto fuori da .mg-app con document.body.appendChild() per evitare problemi di sovrapposizione — se le variabili restassero disponibili solo dentro .mg-app, quell'elemento non le vedrebbe affatto: causa reale, verificata nel codice, dell'intestazione della tabella di confronto invisibile (sfondo verde scuro previsto ma mai applicato, testo bianco su sfondo trasparente). Il resto del plugin resta comunque racchiuso in .mg-app per non toccare il tema. ========================================================= */ :root { /* Le variabili puntano ai colori/font veri del tema (definiti in style.css del tema, gia' caricato su ogni pagina) invece di un proprio set indipendente — cosi' il plugin resta visivamente coerente col resto del sito senza dover riscrivere ogni singola regola qui sotto, che continua a usare solo queste variabili. */ --mg-bosco: var(--p-green-deep, #2E4A1C); --mg-bosco2: var(--p-green-ink, #1E3312); --mg-foglia: var(--p-green, #4A762F); --mg-foglia2: var(--p-green, #4A762F); --mg-velo: var(--p-tint, #EAF0DF); --mg-lino: var(--p-off, #F7F5EB); --mg-carta: var(--p-white, #FFFFFF); --mg-bordo: var(--p-line, #E4E1D2); --mg-inchiostro: var(--p-text, #24311D); --mg-grigio: var(--p-text-soft, #4E5C46); --mg-tenue: var(--p-text-soft, #8A937F); --mg-acqua:#2F6F8F; --mg-concime:#B4762A; --mg-sole:#C79A2E; --mg-cura:#5E8A54; --mg-ruggine:#A8432E; --mg-r: var(--p-radius, 20px); --mg-r-sm:12px; --mg-shadow: var(--p-shadow-md, 0 18px 40px -24px rgba(30,51,18,.5)); --mg-shadow-sm: var(--p-shadow-sm, 0 6px 18px -12px rgba(30,51,18,.45)); } .mg-app { font-family: var(--p-font-sans, "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); color:var(--mg-grigio); line-height:1.6; -webkit-font-smoothing:antialiased; } .mg-app *, .mg-app *::before, .mg-app *::after { box-sizing:border-box; } .mg-app [hidden] { display:none !important; } /* Stessa protezione, ma senza richiedere il contenitore ".mg-app": le pagine di riconoscimento (riconosci-*.php) non lo usano, quindi un elemento nascosto via JavaScript (es. il pulsante "Scatta una foto" su desktop, dove riconosci.js lo nasconde apposta) restava comunque visibile — una regola come ".mg-btn{display:inline-flex}" vinceva sull'attributo "hidden" a parita' di specificita', per il solo motivo di essere scritta nel foglio di stile (che vince sempre sullo stile predefinito del browser). Causa reale del pulsante "morto" segnalato dal vivo: restava visibile e cliccabile, ma su desktop apriva solo la scelta file normale (i browser desktop ignorano l'attributo "capture", pensato solo per il mobile), sembrando non fare nulla. */ [hidden] { display:none !important; } .mg-app h1,.mg-app h2,.mg-app h3 { color:var(--mg-inchiostro); line-height:1.15; margin:0; } .mg-app p { margin:0; } .mg-app a { color:var(--mg-foglia); text-decoration:none; } .mg-display { font-family: var(--p-font-serif, "Fraunces", Georgia, "Times New Roman", serif); font-weight: 500; letter-spacing:-.01em; } .mg-display em { font-style:italic; color:var(--mg-foglia); } .mg-eyebrow { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mg-foglia); margin-bottom:14px; } .mg-ic { width:1.15em; height:1.15em; display:inline-block; vertical-align:-.16em; flex:none; } .mg-ic--flip { transform:scaleX(-1); } /* ---------- Bottoni ---------- */ .mg-btn { display:inline-flex; align-items:center; gap:.5em; cursor:pointer; font-family:inherit; font-size:16px; font-weight:600; line-height:1; border:1px solid transparent; border-radius:999px; padding:15px 26px; transition:transform .12s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap; text-decoration:none !important; } .mg-btn:hover { transform:translateY(-1px); } .mg-btn--sm { font-size:14px; padding:11px 18px; } .mg-btn--primary { background: var(--p-green-deep, #2E4A1C); color:#fff !important; box-shadow:var(--mg-shadow-sm); } .mg-btn--primary:hover { background: var(--p-green-ink, #1E3312); color:#fff !important; } .mg-btn--ghost { background:transparent; color:var(--mg-bosco); border-color:var(--mg-bordo); } .mg-btn--ghost:hover { background:var(--mg-lino); } .mg-btn--light { background:#fff; color:var(--mg-bosco); } .mg-btn--danger { background:#B3261E; color:#fff !important; } .mg-btn--danger:hover { background:#8C1D17; color:#fff !important; } .mg-btn--danger-outline { background:#fff; color:#B3261E; border-color:#E8B4B0; } .mg-btn--danger-outline:hover { background:#FBEEED; border-color:#B3261E; color:#8C1D17; } .mg-oggi__bulk { display:flex; gap:18px; flex-wrap:wrap; margin:12px 0 14px; } .mg-link-piccolo { display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:2px; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--mg-bosco); cursor:pointer; } .mg-link-piccolo .mg-ic { width:14px; height:14px; } .mg-link-piccolo:hover { color:var(--mg-foglia); text-decoration:underline; } /* "Elimina questa pianta": ora un vero pulsante (prima era un link troppo poco visibile) — bordo/testo rosso per segnalare che e' un'azione distruttiva, ma senza il rosso pieno che le azioni primarie della pagina (verdi) usano, per non competere con quelle. */ .mg-scheda__elimina { text-align:center; margin:36px 0 0; } /* Sotto i 480px: il testo del pulsante non va mai a capo di suo (".mg-btn" ha "white-space:nowrap") e "Elimina questa pianta"/ "Elimina questo riconoscimento" sono abbastanza lunghi da superare la larghezza di un telefono stretto anche da soli, centrati come sono qui — stessa causa e correzione gia' viste per altri pulsanti in questa pagina. Vale sia qui sia per Il mio giardino, che condivide la stessa classe. */ @media(max-width:480px) { .mg-scheda__elimina .mg-btn { width:100%; justify-content:center; white-space:normal; } } /* ---------- Chip ---------- */ .mg-chip { display:inline-flex; align-items:center; gap:.4em; font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:999px; background:var(--mg-velo); color:var(--mg-foglia); line-height:1; } .mg-chip--ok { background:var(--mg-velo); color:var(--mg-foglia); } .mg-chip--room { background:var(--mg-lino); color:var(--mg-grigio); } .mg-chip--late { background:#F7E2DC; color:var(--mg-ruggine); } /* ========================================================= INVITO ========================================================= */ .mg-invito { display:block; padding-bottom: 64px; } .mg-dash, .mg-scheda { display:block; padding-bottom: 64px; } .mg-ric { display:block; } .mg-ric .mg-card { margin-top:20px; } .mg-ric__cta { margin-top:16px; } .mg-ric #mgr-nuova { margin-top:20px; } /* Box "mirino": angoli a L in stile inquadratura fotocamera, icona e testo centrati — stessa struttura del mockup fornito, con la palette reale del plugin al posto dei colori a se' del mockup. */ .mg-ric-mirino { position:relative; border:1.5px dashed #B9C4AC; border-radius:14px; background:var(--mg-lino); padding:32px 18px; text-align:center; } .mg-ric-mirino::before, .mg-ric-mirino::after { content:""; position:absolute; width:24px; height:24px; border:2.5px solid var(--mg-foglia); opacity:.55; } .mg-ric-mirino::before { top:10px; left:10px; border-right:0; border-bottom:0; border-radius:5px 0 0 0; } .mg-ric-mirino::after { bottom:10px; right:10px; border-left:0; border-top:0; border-radius:0 0 5px 0; } .mg-ric-mirino__ic { display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0 auto 12px; color:var(--mg-bosco); } .mg-ric-mirino__ic .mg-ic { width:100%; height:100%; } .mg-ric-mirino strong { display:block; font-size:16px; color:var(--mg-inchiostro); margin-bottom:4px; } .mg-ric-mirino p { margin:0; color:var(--mg-tenue); font-size:13.5px; } .mg-ric-azioni { display:grid; gap:10px; margin-top:16px; } @media(min-width:560px) { .mg-ric-azioni { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } .mg-ric-azioni .mg-btn { width:100%; justify-content:center; white-space:normal; text-align:center; } /* Su desktop (nessun puntatore "a dito", vedi riconosci.js) niente fotocamera da scattare sul momento: solo il caricamento di un file gia' presente sul computer, a piena larghezza. */ .mg-ric-azioni.mg-ric-azioni--no-cam { grid-template-columns:1fr; } /* Stesso criterio del controllo JS (pointer:coarse = touch), ma in CSS puro: si applica subito al caricamento della pagina, senza il breve lampo del pulsante verde visibile prima che il JavaScript facesse in tempo a nasconderlo (visto dal vivo su desktop). Il JS resta come rete di sicurezza per i browser che non supportano questa media query, ma qui la CSS arriva sempre prima. */ @media (pointer: fine) { #mgr-opt-cam { display:none; } .mg-ric-azioni { grid-template-columns:1fr; } } .mg-ric-contatore { display:flex; align-items:center; gap:9px; margin-top:16px; padding-top:14px; font-size:13.5px; color:var(--mg-tenue); } .mg-ric-pallino { width:9px; height:9px; border-radius:50%; background:var(--mg-foglia); flex:none; } .mg-ric-pallino--vuoto { background:var(--mg-bordo); } /* Vista ospiti: card bianca che ospita lo strumento dentro la colonna "visual" dell'hero (stesso .mg-hero__visual gia' usato altrove nel plugin, qui senza le decorazioni statiche che normalmente contiene). */ .mg-ric-tool-card { position:relative; z-index:1; background:#fff; border:1px solid var(--mg-bordo); border-radius:var(--mg-r); padding:28px; box-shadow:var(--mg-shadow-sm); } .mg-ric-tool-card .mg-ric { max-width:none; padding-bottom:0; } /* La riduzione (80%) e il margine sopra servono solo a lasciar vedere la foglia decorativa dietro (vedi .mg-ric-hero-leaf, nascosta sotto i 900px) — sotto quella soglia niente foglia da mostrare, quindi la card resta a piena larghezza. Ristretta anche li' senza motivo, avrebbe compresso troppo i due pulsanti "Scatta"/"Carica": il testo non si comprime (nessun a-capo), e una cella piu' stretta del testo costringe la riga a sbordare oltre i bordi della card — probabile causa reale dello sbordamento visto dal vivo su mobile. */ @media(min-width:901px) { .mg-ric-tool-card { width:80%; margin:70px 0 0 auto; } /* "Cos'ha la mia pianta?" (ospiti): il riquadro qui e' piu' alto delle pagine gemelle (due campi in piu'), quindi anche con lo stesso margine di 70px usato altrove finisce per scendere troppo rispetto al testo a sinistra. Resta in alto (niente margine), e la foglia decorativa sbuca da sinistra invece che dall'alto — usa lo spazio gia' libero a sinistra del box (che e' all'80% e allineato a destra), non serve spingere nulla verso il basso per fare posto. */ .pit-diagnosi-page:not(.pit-diagnosi-loggedin) .mg-ric-tool-card { margin-top:0; } .pit-diagnosi-page:not(.pit-diagnosi-loggedin) .mg-ric-hero-leaf { top:auto; right:auto; bottom:-8%; left:-16%; width:34%; transform:scaleX(-1); } } /* Foglia decorativa nell'hero, stessa gia' usata altrove nel sito — in alto a destra, in parte coperta dal box dello strumento (z-index piu' basso, vedi .mg-ric-tool-card sopra). */ .mg-ric-hero-leaf { position:absolute; top:0; right:0; width:38%; height:auto; z-index:0; opacity:.95; pointer-events:none; } @media(max-width:900px) { .mg-ric-hero-leaf { display:none; } } /* Vista registrati: piu' stretta e centrata, senza le fasce a piena larghezza della vista ospiti. */ .mg-ric-wrap--min { display:block; padding-bottom:64px; } .mg-ric-wrap--min h1 { margin-bottom:20px; } .mg-ric-consigli { display:grid; gap:20px; margin-top:24px; margin-bottom:48px; } @media(min-width:760px) { .mg-ric-consigli { grid-template-columns:1fr 1fr; } } .mg-ric-lista { list-style:none; margin:0; padding:0; color:var(--mg-grigio); font-size:14.5px; } .mg-ric-lista li { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; } .mg-ric-lista .mg-ic { width:17px; height:17px; flex:none; margin-top:2px; } .mg-ric-lista--si .mg-ic { color:var(--mg-foglia2); } .mg-ric-lista--no .mg-ic { color:var(--mg-ruggine); } /* Spazio in piu' dove richiesto. Il paragrafo vive ORA fuori da .mg-sechead (che lo limitava a 640px senza un modo sicuro di allargarlo): qui usa solo max-width+margin:auto, che a differenza del vecchio trucco (larghezza fissa + margini negativi) non sbordava mai a nessuna dimensione di schermo — quel trucco causava davvero uno sbordamento orizzontale nella fascia di larghezze intermedie (tablet/mobile in orizzontale), segnalato dal vivo. */ p.mg-lead.mg-ric-lead--staccato { margin: 22px auto 0; max-width: 62ch; text-align: center; } /* Ultima sezione della pagina (FAQ): un po' di respiro dal footer. */ .mg-ric-sec--ultima { padding-bottom:40px; } /* Il paragrafo introduttivo della sezione "oggi" nella pagina del lunario non ha nulla sotto per compensare il margine solo-sopra della regola condivisa qui sopra: risultava attaccato al box della dashboard subito dopo. */ #mgl-oggi p.mg-lead.mg-ric-lead--staccato { margin-bottom: 24px; } #mgl-mese p.mg-lead.mg-ric-lead--staccato { margin-bottom: 24px; } #mgl-email p.mg-lead.mg-ric-lead--staccato { margin-bottom: 24px; } /* Avviso tossicita'/attenzioni nel risultato — stesso principio gia' usato nella tabella riassuntiva delle schede pianta degli articoli: nota a parte, non una riga tra i parametri. */ .mg-ric-avviso { margin:14px 0 0; padding:12px 14px; background:var(--mg-lino); border-left:3px solid var(--mg-foglia); border-radius:0 10px 10px 0; font-size:13.5px; line-height:1.5; color:var(--mg-inchiostro); } .mg-quale-vincitrice .mg-ric-avviso { margin-top:22px; } .mg-ric-avviso strong { color:var(--mg-inchiostro); } .mg-ric-tabella { width:100%; table-layout:fixed; border-collapse:collapse; margin-top:24px; background:#fff; border:1px solid var(--mg-bordo); border-radius:var(--mg-r); overflow:hidden; font-size:14.5px; box-shadow:var(--mg-shadow-sm); } .mg-ric-tabella th, .mg-ric-tabella td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--mg-bordo); word-break:break-word; } .mg-ric-tabella th:first-child, .mg-ric-tabella td:first-child { width:26%; } .mg-ric-tabella thead th { background:var(--mg-bosco); color:#fff; font-size:12px; letter-spacing:.06em; text-transform:uppercase; } .mg-ric-tabella tbody tr:last-child th, .mg-ric-tabella tbody tr:last-child td { border-bottom:0; } .mg-ric-tabella tbody tr:nth-child(even) { background:var(--mg-lino); } .mg-ric-tabella td:not(:first-child) { text-align:center; font-weight:700; } .mg-ric-tabella thead th:not(:first-child) { text-align:center; } .mg-ric-tabella tbody th { font-weight:600; color:var(--mg-inchiostro); } .mg-ric-tabella td.mg-ric-tabella__si { color:var(--mg-foglia2); } .mg-ric-tabella td.mg-ric-tabella__no { color:var(--mg-tenue); font-weight:400; } /* Opt-in posizione (solo loggati) e link alla scheda completa */ .mg-ric__geo { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--mg-tenue); margin-top:14px; cursor:pointer; } .mg-ric__geo input { margin-top:2px; } .mg-azioni-ric { margin-top:16px; } .mg-azioni-ric .mg-btn { width:100%; justify-content:center; } /* Storico dei riconoscimenti (vista registrati) */ /* Card dello storico riconoscimenti: riusa .mg-pcard/.mg-plants di "Il mio giardino" (stessa presentazione de "Le mie piante"), con una variante propria solo dove serve davvero. */ .mg-ric-card { cursor:pointer; } .mg-ric-aggiungi:hover { background:var(--mg-velo); color:var(--mg-foglia); } .mg-ric-cerca { display:flex; align-items:center; gap:10px; margin-top:18px; padding:10px 14px; background:#fff; border:1px solid var(--mg-bordo); border-radius:999px; max-width:360px; } .mg-ric-cerca .mg-ic { width:18px; height:18px; color:var(--mg-tenue); flex:none; } .mg-ric-cerca input { border:0; outline:0; font-family:inherit; font-size:14.5px; width:100%; background:none; } .mg-ric-filtri { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .mg-ric-filtro { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:13.5px; font-weight:600; padding:7px 14px; border-radius:999px; border:1px solid var(--mg-bordo); background:#fff; color:var(--mg-grigio); cursor:pointer; } .mg-ric-filtro span { font-size:12px; opacity:.75; } .mg-ric-filtro.is-attivo { background:var(--mg-bosco); border-color:var(--mg-bosco); color:#fff; } .mg-ric-filtro.is-attivo span { opacity:.85; } /* Card laterali "Oggi" e consigli foto — stessa griglia .mg-grid2 di "Il mio giardino" (main + aside sticky), vedi riconosci-registrati.php. */ .mg-ric-credito { display:flex; align-items:baseline; gap:8px; justify-content:center; margin-top:6px; } .mg-ric-credito b { font-size:40px; font-weight:800; color:var(--mg-bosco); line-height:1; } .mg-ric-credito small { font-size:13px; color:var(--mg-tenue); } .mg-ric-pallini { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin:14px 0; } .mg-ric-consiglibrevi { list-style:none; margin:0; padding:0; } .mg-ric-consiglibrevi li { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--mg-bordo); font-size:13.5px; color:var(--mg-grigio); } .mg-ric-consiglibrevi li:last-child { border-bottom:0; } .mg-ric-consiglibrevi .mg-ic { width:17px; height:17px; flex:none; margin-top:1px; color:var(--mg-foglia); } .mg-linkbtn { border:0; background:none; padding:0; font-family:inherit; font-size:inherit; color:var(--mg-foglia); text-decoration:underline; cursor:pointer; } .mg-gettoni-riga { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; } .mg-azioni-ric--doppia { display:flex; flex-wrap:wrap; gap:10px; } .mg-azioni-ric--doppia .mg-btn { width:auto; flex:1 1 0; min-width:200px; justify-content:center; } @media(max-width:480px) { .mg-azioni-ric--doppia { flex-direction:column; } } /* Nella vista registrati il contatore "ricco" e' nella colonna laterale (.mg-ric-credito): quello semplice dentro lo strumento resterebbe ridondante, meglio nasconderlo li'. */ .mg-ric-wrap--min .mg-ric-contatore { display:none; } .mg-ric-dati { margin-top:40px; } .mg-ric-dati__griglia { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; } .mg-ric-dato { background:#fff; border:1px solid var(--mg-bordo); border-radius:var(--mg-r-sm); padding:18px 14px; text-align:center; } .mg-ric-dato b { display:block; font-size:28px; font-weight:800; color:var(--mg-bosco); line-height:1; } .mg-ric-dato span { display:block; margin-top:6px; font-size:12.5px; color:var(--mg-grigio); } @media(max-width:560px) { .mg-ric-dati__griglia { grid-template-columns:1fr; } } .mg-hero-band { background: var(--p-off, #F7F5EB); width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } .mg-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; /* "start", non "center": con "center" la colonna di testo viene centrata verticalmente rispetto alla riga piu' alta tra le due colonne — se l'illustrazione a destra e' piu' alta o piu' bassa da una pagina all'altra (es. "Il mio giardino" contro "Che pianta e'"), lo stesso identico padding-top produce uno spazio visibile diverso sopra l'eyebrow/testo, pur essendo il CSS letteralmente identico — osservato dal vivo confrontando le due pagine. Con "start" entrambe le colonne cominciano sempre subito dopo il padding, a prescindere da quanto e' alta l'illustrazione. */ align-items:start; max-width: var(--p-max, 1240px); margin: 0 auto; padding: 48px clamp(20px, 4vw, 40px); position:relative; overflow:hidden; } .mg-hero__copy { position:relative; z-index:2; } .mg-display.mg-hero__copy, .mg-hero__copy h1 { font-size:clamp(34px,4.2vw,52px); } .mg-hero h1 { font-family: var(--p-font-sans, inherit); font-weight:800; font-size:clamp(34px,4.2vw,52px); letter-spacing:-.035em; line-height:1.08; margin-bottom:18px; } .mg-lead { font-size:18px; max-width:40ch; margin-bottom:26px; } .mg-hero__claim { font-family: var(--p-font-serif, "Fraunces", Georgia, "Times New Roman", serif); font-size:20px; font-weight:500; color:var(--mg-foglia); margin:6px 0 14px; } .mg-hero__claim em { font-style:italic; } /* Widget di riconoscimento per visitatori non registrati (invito.php) */ .mg-anon-widget { margin-top:26px; padding:22px; background:#fff; border-radius:var(--mg-r); } .mg-anon-widget__upload { text-align:center; } .mg-anon-widget__nota { margin:14px 0 0 !important; font-size:13px; color:var(--mg-tenue); } .mg-anon-widget__risultato { text-align:center; } .mg-anon-widget__esito { font-size:19px; margin:0 0 8px; } .mg-anon-widget__esito em { color:var(--mg-tenue); font-weight:400; } .mg-anon-widget__risultato p { margin:0 0 14px; color:var(--mg-grigio); } .mg-anon-widget__risultato .mg-btn { margin:0 auto; } /* Sezione a sfondo scuro (es. "Come funziona"), stesso verde bosco scuro usato per il resto del sito in blocchi analoghi (footer ecc.) A piena larghezza, stessa tecnica di ".mg-hero-band": un involucro esterno sfonda a 100vw per il colore, il contenuto vero resta dentro alla larghezza normale di lettura. IMPORTANTE: le card dei singoli passi (".mg-steps .mg-step") sono bianche — la versione precedente rendeva bianco anche il LORO testo, invisibile su una card bianca. Qui si tocca solo il testo che sta DIRETTAMENTE sullo sfondo scuro (etichetta ed titolo di sezione), le card restano come sono altrove (gia' leggibili). */ .mg-sec-band--scuro { background: var(--mg-bosco2); width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 48px 0; } .mg-sec-band--scuro .mg-sec { margin-top: 0; max-width: var(--p-max, 1240px); margin-left: auto; margin-right: auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); } .mg-sec-band--scuro .mg-eyebrow { color: rgba(255,255,255,.72); } .mg-sec-band--scuro .mg-sechead h2.mg-display { color: #fff; } /* Il paragrafo "lead" (es. ".mg-ric-lead--staccato") sta direttamente sullo sfondo scuro, non dentro una card bianca come i passi sotto: qui va reso bianco apposta, e staccato con un margine sotto piu' ampio del solito, per non sembrare incollato ai box che seguono. */ .mg-sec-band--scuro > .mg-sec > .mg-lead { color: rgba(255,255,255,.82); margin-bottom: 32px !important; } /* Domande frequenti: testo semplice, non a riquadri — collassate di serie, si aprono al clic (
/ nativi, nessun JavaScript necessario). */ .mg-faq { border-top:1px solid var(--mg-bordo); } .mg-faq__voce { border-bottom:1px solid var(--mg-bordo); padding:18px 0; } .mg-faq__voce summary { cursor:pointer; font-weight:700; font-size:16.5px; color:var(--mg-inchiostro); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } .mg-faq__voce summary::-webkit-details-marker { display:none; } .mg-faq__voce summary::after { content:'+'; font-size:24px; font-weight:400; line-height:1; color:var(--mg-foglia); flex-shrink:0; } .mg-faq__voce[open] summary::after { content:'−'; } .mg-faq__voce p { margin:12px 0 0; color:var(--mg-grigio); font-size:15px; line-height:1.6; } .mg-hero__ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; margin-bottom:26px; } /* Sotto i 480px, a piena larghezza impilati: il testo dei pulsanti non va mai a capo (".mg-btn" ha "white-space:nowrap"), quindi "Iscriviti e aumenta i limiti" da solo puo' essere piu' largo di un telefono stretto anche come unico elemento della riga — il flex-wrap del contenitore aiuta solo a mandare a capo piu' elementi tra loro, non restringe il contenuto non spezzabile di uno solo. Sbordamento orizzontale segnalato dal vivo, causa qui. */ @media(max-width:480px) { .mg-hero__ctas { flex-direction:column; align-items:stretch; } .mg-hero__ctas .mg-btn { width:100%; justify-content:center; white-space:normal; } } .mg-hero__small { display:flex; flex-wrap:wrap; gap:18px; font-size:13.5px; font-weight:600; color:var(--mg-grigio); margin-top:18px; margin-bottom:20px; } .mg-hero__small span { display:inline-flex; align-items:center; gap:.4em; } .mg-hero__small .mg-ic { color:var(--mg-foglia); } .mg-hero__login { margin-top:8px; font-size:14.5px; color:var(--mg-tenue); } .mg-hero__login a { font-weight:600; } .mg-hero__visual { position:relative; min-height:380px; } .mg-blob { position:absolute; inset:8% 4% 8% 8%; width: 84%; height: 84%; object-fit: contain; object-position: center; } .mg-democard { position:absolute; left:12%; top:20%; width:230px; background:#fff; border-radius:var(--mg-r); box-shadow:var(--mg-shadow); overflow:hidden; z-index:2; } .mg-democard__ph { height:120px; overflow:hidden; background:var(--mg-lino); } .mg-democard__ph img { width:100%; height:100%; object-fit:cover; display:block; } .mg-democard__body { padding:14px 16px 16px; } .mg-democard__body h3 { font-size:16px; } .mg-democard__body p { font-size:13px; color:var(--mg-tenue); margin:2px 0 10px; } .mg-democard__task { display:flex; align-items:center; gap:.5em; font-size:12.5px; font-weight:600; color:var(--mg-acqua); background:#eaf3f7; border-radius:10px; padding:8px 10px; } .mg-fchip { position:absolute; display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:10px 14px; box-shadow:var(--mg-shadow); z-index:3; font-size:12.5px; } .mg-fchip .mg-ic { width:20px; height:20px; } .mg-fchip b, .mg-fchip div { font-weight:700; color:var(--mg-inchiostro); line-height:1.25; } .mg-fchip small { display:block; font-weight:500; color:var(--mg-tenue); } .mg-fchip--ai { top:8%; right:2%; color:var(--mg-foglia); animation:mg-float 5s ease-in-out infinite; } .mg-fchip--mail { bottom:8%; right:6%; color:var(--mg-acqua); animation:mg-float 6s ease-in-out .8s infinite; } @keyframes mg-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } } .mg-ptag { position:absolute; top:12px; left:12px; z-index:3; background:rgba(255,255,255,.94); color:var(--mg-bosco); font-size:11.5px; font-style:italic; font-family: var(--p-font-serif, "Fraunces", serif); padding:5px 12px; border-radius:999px; box-shadow:var(--mg-shadow-sm); } .mg-ptag::before { content:""; } .mg-sec { margin-top:56px; } /* La sezione bianca subito prima di una banda scura (es. "Come funziona") a volte contiene un contenuto variabile al suo interno (es. il box "Carica una foto e scoprilo gratis" in invito.php, presente solo se il riconoscimento anonimo e' attivo dalle impostazioni) — senza un margine sotto proprio, lo spazio prima della banda scura dipendeva "in prestito" dal margine di quel contenuto opzionale: se assente, spariva anche lo spazio. Selettore ":has()" invece di aggiungere una classe dedicata nei tre template che condividono questa stessa struttura (vedi invito.php, riconosci-ospiti.php, quale-ospiti.php) — un solo punto da aggiornare in futuro. */ .mg-sec:has(+ .mg-sec-band--scuro) { margin-bottom:56px; } .mg-sechead { text-align:center; max-width:640px; margin:0 auto 34px; } .mg-sechead h2 { font-family: var(--p-font-sans, inherit); font-weight:800; font-size:clamp(24px,2.6vw,32px); letter-spacing:-.03em; font-style:normal; } .mg-sechead h2 em { font-style: normal; color: inherit; } .mg-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .mg-steps .mg-step { background:#fff; border:1px solid var(--mg-bordo); border-radius:var(--mg-r); padding:26px; /* Icona e titolo affiancati sulla stessa riga (icona a larghezza fissa, titolo che si adatta accanto), la descrizione va comunque a capo su tutta la larghezza della card: si ottiene con un unico contenitore flex "a capo" (flex-wrap), senza dover cambiare l'HTML — il paragrafo sotto ha "flex-basis:100%", che lo forza sempre a cominciare una riga nuova, qualunque sia la larghezza di icona+titolo sulla prima. */ display:flex; flex-wrap:wrap; align-items:center; column-gap:14px; row-gap:0; } .mg-step__ic { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--mg-velo); color:var(--mg-foglia); flex-shrink:0; } .mg-step__ic .mg-ic { width:24px; height:24px; } .mg-steps .mg-step h3 { font-size:18px; margin:0; flex:1 1 auto; min-width:0; } .mg-steps .mg-step p { font-size:14.5px; flex-basis:100%; width:100%; margin:12px 0 0; } .mg-feats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .mg-feat { background:var(--mg-lino); border-radius:var(--mg-r); padding:24px; /* Stesso principio di ".mg-steps .mg-step" qui sopra: icona e titolo affiancati, descrizione forzata a capo su tutta la larghezza — nessuna modifica ai template HTML necessaria. */ display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; row-gap:0; } .mg-feat__ic { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--mg-foglia); flex-shrink:0; box-shadow:var(--mg-shadow-sm); } .mg-feat__ic .mg-ic { width:22px; height:22px; } .mg-feat h3 { font-size:16.5px; margin:0; flex:1 1 auto; min-width:0; } .mg-feat p { font-size:14px; flex-basis:100%; width:100%; margin:10px 0 0; } /* ========================================================= DASHBOARD ========================================================= */ .mg-dashhead { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:26px; flex-wrap:wrap; } .mg-dashhead h1 { font-family: var(--p-font-sans, inherit); font-weight:800; font-size:clamp(28px,3.6vw,42px); letter-spacing:-.035em; line-height:1.12; font-style:normal; } .mg-dashhead__date { color:var(--mg-tenue); font-size:14.5px; margin-top:8px; } .mg-vuoto { text-align:center; background:var(--mg-lino); border:1px dashed var(--mg-bordo); border-radius:24px; padding:60px 28px; } .mg-vuoto__ic { width:64px; height:64px; margin:0 auto 18px; border-radius:18px; background:var(--mg-velo); color:var(--mg-foglia); display:flex; align-items:center; justify-content:center; } .mg-vuoto__ic .mg-ic { width:32px; height:32px; } .mg-vuoto h2 { font-size:22px; margin-bottom:8px; } .mg-vuoto p { margin-bottom:20px; } .mg-grid2 { display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:start; } .mg-main { display:flex; flex-direction:column; gap:22px; } .mg-side { display:flex; flex-direction:column; gap:22px; position:sticky; top:20px; } /* "Quale pianta", vista registrati: quando il quiz mostra il risultato, SOLO il box del risultato (#mgq-esito) sporge oltre la sua colonna, verso lo spazio della barra laterale — non l'intera colonna ".mg-main", che resterebbe altrimenti larga uguale anche per "Le tue individuazioni passate" subito sotto (due tentativi precedenti, uno con due griglie separate e uno con le aree di griglia riassegnate, avevano proprio questo effetto indesiderato, segnalato dal vivo con schermate). La barra laterale resta al suo posto nella griglia (non e' ne' spostata ne' rimossa dal DOM) ma diventa invisibile SOLO per la durata di questo stato, cosi' il box del risultato puo' coprire visivamente quello spazio senza che i due si sovrappongano contenutisticamente. */ .mg-quale-esito-attivo .mg-quale-quiz { width: calc(100% + 340px + 26px); margin-right: calc(-340px - 26px); } .mg-quale-esito-attivo .mg-side { visibility: hidden; } .mg-card { background:#fff; border:1px solid var(--mg-bordo); border-radius:var(--mg-r); padding:24px; } /* Stesso contenuto di una .mg-card, ma senza il riquadro visivo — usata dove il testo deve fondersi nella pagina invece di apparire in un box a se' stante (vedi #mgr-breve-box in riconosci-strumento.php). */ .mg-card--nudo { background:none; border:none; border-radius:0; padding:0; } .mg-card__head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px; } .mg-card__head h2 { font-size:18px; } .mg-ric-consigli__head { margin-bottom:14px; } .mg-card__sub { font-size:13px; color:var(--mg-tenue); margin-bottom:14px; } .mg-empty { display:flex; align-items:center; gap:.6em; color:var(--mg-tenue); font-size:14.5px; padding:14px 0; } .mg-empty .mg-ic { color:var(--mg-foglia); } /* Task */ .mg-task { display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--mg-bordo); } .mg-task:first-child { border-top:0; } .mg-task__check { width:26px; height:26px; flex:none; border-radius:50%; border:2px solid var(--mg-bordo); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; transition:.16s; } .mg-task__check .mg-ic { width:16px; height:16px; opacity:0; transition:.16s; } .mg-task:hover .mg-task__check { border-color:var(--mg-foglia); } .mg-task.is-done .mg-task__check { background:var(--mg-foglia); border-color:var(--mg-foglia); } .mg-task.is-done .mg-task__check .mg-ic { opacity:1; } .mg-task.is-done .mg-task__title { text-decoration:line-through; color:var(--mg-tenue); } .mg-task__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .mg-task__title { font-weight:600; color:var(--mg-inchiostro); font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .mg-task__meta { font-size:13px; color:var(--mg-tenue); } .mg-task__snooze { background:none; border:0; color:var(--mg-tenue); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:6px 8px; border-radius:8px; } .mg-task__snooze:hover { background:var(--mg-lino); color:var(--mg-foglia); } /* Pastiglia tipo cura */ .mg-tt { width:36px; height:36px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center; } .mg-tt .mg-ic { width:19px; height:19px; } .mg-tt--acqua { background:#e7f1f6; color:var(--mg-acqua); } .mg-tt--concime { background:#f6ecdc; color:var(--mg-concime); } .mg-tt--sole { background:#f7f0d8; color:var(--mg-sole); } .mg-tt--cura { background:var(--mg-velo); color:var(--mg-foglia); } /* Settimana */ .mg-week { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:8px 0 14px; } .mg-day { text-align:center; border:1px solid var(--mg-bordo); border-radius:14px; padding:12px 4px 10px; background:#fff; } .mg-day.is-today { border-color:var(--mg-foglia); background:var(--mg-velo); } .mg-day small { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--mg-tenue); } .mg-day b { display:block; font-size:18px; color:var(--mg-inchiostro); margin:2px 0 6px; font-family: var(--p-font-serif, "Fraunces", serif); } .mg-day__dots { display:flex; gap:3px; justify-content:center; min-height:7px; } .mg-dot { width:7px; height:7px; border-radius:50%; display:inline-block; } .mg-dot--acqua { background:var(--mg-acqua); } .mg-dot--concime { background:var(--mg-concime); } .mg-dot--sole { background:var(--mg-sole); } .mg-dot--cura { background:var(--mg-foglia); } .mg-legend { display:flex; flex-wrap:wrap; gap:16px; font-size:12.5px; color:var(--mg-grigio); margin-top:14px; } .mg-legend span { display:inline-flex; align-items:center; gap:.4em; } /* I giorni della settimana sono ora bottoni cliccabili: stesso aspetto di prima, solo con le proprieta' di reset di un