/* ================================================================== SUITE GD PRO — la pagina di presentazione ================================================================== Si carica solo dove compare lo shortcode [sgd_vetrina]: sono duecento righe che non servono a nessun'altra pagina del sito. TUTTO STA DENTRO .sgds-vetrina I nomi delle classi sono generici - wrap, colonna, bottone - e in un tema che ne usa di uguali si scontrerebbero. Il recinto evita che la pagina cambi aspetto al resto del sito, e viceversa. ================================================================== */ :root{ /* Inchiostro da registro, carta, righe, e il verde dei bolli */ --inchiostro:#16232F; --inchiostro-soft:#4A5A68; --carta:#FBFAF6; --carta-alt:#F3F1EA; --riga:#D6DBE0; --bollo:#1F6F5C; --bollo-chiaro:#E7F0ED; /* Tinta del solo blocco AI: piu' tenue di --bollo-chiaro, che le righe dei limiti in cima alla tabella usano gia'. Con la stessa tinta i due blocchi si sarebbero letti come la stessa cosa. */ --ai-fondo:#F1F6F4; --ottone:#B08A2E; --max:1120px; } /* * IL MODELLO DI RIQUADRO VALE ANCHE PER I DISCENDENTI. * * Era dichiarato solo sul contenitore: dentro valeva ancora il modello * predefinito, in cui i rientri si SOMMANO alla larghezza. Una sezione con * width:100% e un rientro laterale sbordava - ed e' successo. * * Si limita alla vetrina per non toccare il resto del sito. */ .sgds-vetrina, .sgds-vetrina *, .sgds-vetrina *::before, .sgds-vetrina *::after {box-sizing:border-box} .sgds-vetrina {scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } .sgds-vetrina { /* * LA PAGINA ESCE DALLA COLONNA DEL TEMA. * * I temi WordPress chiudono il contenuto in una colonna - spesso 600 o 800 * pixel - pensata per articoli. Questa pagina e' nata a larghezza piena, con * sezioni da un bordo all'altro e un listino di quattro colonne: dentro * quella colonna diventa illeggibile. * * Si tira fuori dal contenitore con margini negativi calcolati sulla meta' * della finestra. Funziona qualunque sia la larghezza che il tema impone, * senza doverla conoscere. */ /* 100% e non 100vw. 100vw comprende la barra di scorrimento verticale: dove il browser la disegna sopra il contenuto - iOS - la differenza e' zero, ma su desktop sono una ventina di pixel in piu' della finestra, e la pagina scorre di lato. Con 100% la larghezza e' quella del contenitore, barra esclusa. */ width:100%; max-width:100%; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); /* * NIENTE overflow-x QUI. * * Serviva quando la pagina usciva dal contenitore con 100vw. Ora i * contenitori si aprono e non serve piu' - e soprattutto impediva alla barra * in cima di restare ferma: un antenato con overflow diverso da "visible" * annulla position:sticky, senza dare nessun errore. */ margin-top:0; margin-bottom:0; background:var(--carta); color:var(--inchiostro); font-family:'Public Sans',system-ui,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } .sgds-vetrina .wrap {max-width:var(--max);margin:0 auto;padding:0 28px} .sgds-vetrina h1, .sgds-vetrina h2, .sgds-vetrina h3 {font-family:'Newsreader',Georgia,serif;font-weight:500;letter-spacing:-.01em;margin:0} .sgds-vetrina h1 {font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.08} .sgds-vetrina h2 {font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.15} .sgds-vetrina h3 {font-size:1.18rem;line-height:1.3;font-weight:600} .sgds-vetrina p {margin:0 0 1.1rem} .sgds-vetrina a {color:var(--bollo)} .sgds-vetrina .mono {font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums} /* L'occhiello: numerato solo dove l'ordine conta davvero */ .sgds-vetrina .occhiello { font-family:'IBM Plex Mono',monospace; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--bollo);margin-bottom:1.1rem;display:block; } /* ---------- intestazione ---------- */ .sgds-vetrina .testa {border-bottom:1px solid var(--riga);position:sticky;top:0;background:rgba(251,250,246,.94);backdrop-filter:blur(6px);z-index:50} .sgds-vetrina .testa .wrap {display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px} .sgds-vetrina .marchio {font-family:'Newsreader',serif;font-size:1.28rem;font-weight:600;letter-spacing:-.02em;text-decoration:none;color:var(--inchiostro)} .sgds-vetrina .marchio span {color:var(--bollo)} .sgds-vetrina .nav {display:flex;gap:26px;align-items:center} .sgds-vetrina .nav a {font-size:.92rem;text-decoration:none;color:var(--inchiostro-soft);font-weight:500} .sgds-vetrina .nav a:hover {color:var(--inchiostro)} /* SU SCHERMO STRETTO SPARISCONO LE VOCI DI MENU, NON LE LINGUE. La regola nascondeva TUTTI i collegamenti della barra tranne il pulsante, per togliere "Come funziona", "Dove stanno i documenti", "Prezzi" che non ci stanno. Ma il selettore delle lingue e' fatto anch'esso di collegamenti - uno per lingua - e veniva preso insieme agli altri. L'effetto: su pliko.bg chi arriva da telefono e non legge il bulgaro non aveva alcun modo di cambiare lingua. Tre sigle di due lettere lo spazio ce l'hanno, accanto al pulsante. */ @media(max-width:760px){ .sgds-vetrina .nav a:not(.bottone):not(.sgds-lingua){display:none} .sgds-lingue-barra{margin-right:10px} .sgds-vetrina .nav .sgds-lingua{padding:4px 7px;font-size:13px} } .sgds-vetrina .bottone { display:inline-block;background:var(--bollo);color:#fff!important; padding:11px 20px;border-radius:3px;text-decoration:none; font-weight:600;font-size:.94rem;line-height:1; border:1px solid var(--bollo);transition:background .15s,color .15s; } .sgds-vetrina .bottone:hover {background:#18594A} .sgds-vetrina .bottone.vuoto {background:transparent;color:var(--bollo)!important} .sgds-vetrina .bottone.vuoto:hover {background:var(--bollo-chiaro)} .sgds-vetrina .bottone.grande {padding:15px 30px;font-size:1.02rem} .sgds-vetrina a:focus-visible, .sgds-vetrina button:focus-visible {outline:2px solid var(--ottone);outline-offset:3px} /* ---------- apertura ---------- */ .sgds-vetrina .apertura {padding:88px 0 0} .sgds-vetrina .apertura .esergo {max-width:730px} .sgds-vetrina .apertura h1 em {font-style:italic;color:var(--bollo)} .sgds-vetrina .sottotitolo {font-size:1.19rem;color:var(--inchiostro-soft);max-width:600px;margin:1.5rem 0 2.1rem} .sgds-vetrina .azioni {display:flex;gap:14px;flex-wrap:wrap;align-items:center} .sgds-vetrina .nota-azioni {font-size:.88rem;color:var(--inchiostro-soft)} /* ---------- IL REGISTRO: l'elemento firma ---------- */ .sgds-vetrina .registro {margin:70px 0 0;border-top:2px solid var(--inchiostro);border-bottom:1px solid var(--riga)} .sgds-vetrina .registro-testa { display:grid;grid-template-columns:1.7fr .9fr repeat(4,1fr); gap:0;padding:11px 0;border-bottom:1px solid var(--riga); font-family:'IBM Plex Mono',monospace;font-size:.68rem; letter-spacing:.1em;text-transform:uppercase;color:var(--inchiostro-soft); } .sgds-vetrina .riga-cliente { display:grid;grid-template-columns:1.7fr .9fr repeat(4,1fr); gap:0;padding:15px 0;border-bottom:1px solid var(--riga);align-items:center; } .sgds-vetrina .riga-cliente:last-child {border-bottom:none} .sgds-vetrina .nome-cliente {font-weight:600;font-size:.98rem} .sgds-vetrina .eik {font-family:'IBM Plex Mono',monospace;font-size:.86rem;color:var(--inchiostro-soft)} .sgds-vetrina .mese {display:flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:.8rem} .sgds-vetrina .pallino {width:9px;height:9px;border-radius:50%;flex:none} .sgds-vetrina .pieno {background:var(--bollo)} .sgds-vetrina .parziale {background:var(--ottone)} .sgds-vetrina .vuoto {background:transparent;border:1.5px solid var(--riga)} .sgds-vetrina .registro-piede { padding:13px 0;font-family:'IBM Plex Mono',monospace;font-size:.74rem; color:var(--inchiostro-soft);display:flex;gap:22px;flex-wrap:wrap; } .sgds-vetrina .legenda {display:flex;align-items:center;gap:7px} @media(max-width:820px){ .sgds-vetrina .registro-testa,.sgds-vetrina .riga-cliente{grid-template-columns:1.4fr repeat(3,1fr)} .sgds-vetrina .registro-testa span:nth-child(2),.sgds-vetrina .riga-cliente .eik, .sgds-vetrina .registro-testa span:last-child,.sgds-vetrina .riga-cliente .mese:last-child{display:none} } /* ---------- sezioni ---------- */ .sgds-vetrina section {padding:86px 0} .sgds-vetrina .bordo-sopra {border-top:1px solid var(--riga)} .sgds-vetrina .fondo-alt {background:var(--carta-alt)} .sgds-vetrina .intro-sezione {max-width:640px;margin-bottom:52px} .sgds-vetrina .intro-sezione p {color:var(--inchiostro-soft);font-size:1.07rem;margin-bottom:0} /* * 3.41.5, V5: "PLIKO NON SOSTITUISCE IL PROGRAMMA DI CONTABILITA'". * * Il documento chiede una riga distinta dal paragrafo, non un'altra riga di * testo normale. Come una chiusura di registro: fra due righe - quella sopra * d'inchiostro, quella sotto la riga di sempre - con la prima frase nel * carattere dei titoli. Niente riquadro colorato: il verde dei bolli qui * direbbe "funzione", e questa riga dice cosa Pliko NON fa. */ .sgds-vetrina .intro-sezione .non-sostituisce { margin-top:1.6rem; padding:14px 0 15px; border-top:1px solid var(--inchiostro); border-bottom:1px solid var(--riga); color:var(--inchiostro-soft); font-size:.98rem; } .sgds-vetrina .intro-sezione .non-sostituisce strong { display:block; margin-bottom:4px; font-family:'Newsreader',Georgia,serif; font-size:1.3rem; font-weight:500; letter-spacing:-.01em; line-height:1.3; color:var(--inchiostro); text-wrap:balance; } /* ---------- il flusso: qui l'ordine conta, quindi si numera ---------- */ .sgds-vetrina .passi {display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--riga)} .sgds-vetrina .passo {padding:30px 30px 34px 0;border-right:1px solid var(--riga)} .sgds-vetrina .passo:last-child {border-right:none;padding-right:0} .sgds-vetrina .passo:not(:first-child) {padding-left:30px} .sgds-vetrina .numero-passo { font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--bollo); letter-spacing:.1em;display:block;margin-bottom:14px; } .sgds-vetrina .passo h3 {margin-bottom:9px} .sgds-vetrina .passo p {font-size:.97rem;color:var(--inchiostro-soft);margin-bottom:0} @media(max-width:820px){ /* IL PREFISSO .sgds-vetrina QUI MANCAVA, E LA REGOLA NON FACEVA NULLA. La regola a tre colonne e' scritta ".sgds-vetrina .passi" - due classi - mentre questa era il solo ".passi": una classe, quindi piu' debole, e perdeva anche stando dopo e dentro la media query. Risultato: sul telefono i tre passi restavano affiancati, il terzo usciva dallo schermo e la pagina scorreva di lato. Nel foglio "sembrava" corretto: l'errore si vede solo confrontando il PESO dei due selettori, non la loro posizione. */ .sgds-vetrina .passi{grid-template-columns:1fr} .sgds-vetrina .passo{border-right:none;border-bottom:1px solid var(--riga);padding:26px 0} .sgds-vetrina .passo:not(:first-child){padding-left:0} .sgds-vetrina .passo:last-child{border-bottom:none} } /* ---------- funzioni ---------- */ .sgds-vetrina .griglia-funzioni {display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--riga);border:1px solid var(--riga)} .sgds-vetrina .funzione {background:var(--carta);padding:26px 24px} .sgds-vetrina .fondo-alt .funzione {background:var(--carta-alt)} .sgds-vetrina .funzione h3 {margin-bottom:8px;font-size:1.05rem} .sgds-vetrina .funzione p {font-size:.94rem;color:var(--inchiostro-soft);margin-bottom:0} /* * 3.41.8, V6: LA SEZIONE "CARTELLA CONDIVISA SU DRIVE". * * La griglia di "Cosa fa", con le colonne decise qui: cinque blocchi in una * griglia che si riempie da sola lascerebbero celle vuote - grigie, perche' * le righe della griglia sono il suo sfondo. Tre colonne col blocco dell'IA * largo due, due colonne col blocco dell'IA su tutta la riga, una colonna sul * telefono: le righe sono sempre piene. I punti di passaggio sono quelli in * cui la griglia di "Cosa fa" (268px per colonna) cambia da sola: le due * sezioni, una sopra l'altra, cambiano insieme. */ .sgds-vetrina .griglia-funzioni.griglia-drive {grid-template-columns:repeat(3,1fr)} .sgds-vetrina .griglia-drive .funzione-ia {grid-column:span 2} .sgds-vetrina .griglia-drive.senza-ia .funzione:last-child {grid-column:1 / -1} @media(max-width:861px){ .sgds-vetrina .griglia-funzioni.griglia-drive {grid-template-columns:repeat(2,1fr)} .sgds-vetrina .griglia-drive.senza-ia .funzione:last-child {grid-column:auto} } @media(max-width:592px){ .sgds-vetrina .griglia-funzioni.griglia-drive {grid-template-columns:1fr} .sgds-vetrina .griglia-drive .funzione-ia {grid-column:auto} } /* il bollino dei piani: il sigillo della stella "Include IA", piccolo, in alto a destra del blocco */ .sgds-vetrina .ia-stella.ia-stella-blocco {float:right;width:74px;height:74px;margin:-8px -6px 8px 16px} .sgds-vetrina .ia-stella.ia-stella-blocco .ia-stella-su {font-size:.5rem;max-width:56px} .sgds-vetrina .ia-stella.ia-stella-blocco .ia-stella-giu {font-size:1.2rem} /* la riga di chiusura: porta alla sezione dopo, che comincia da Google Drive */ .sgds-vetrina .chiusura-drive {margin:30px 0 0;max-width:640px;font-family:'Newsreader',Georgia,serif;font-size:1.25rem;line-height:1.4;color:var(--inchiostro);text-wrap:balance} /* ---------- dove stanno i documenti ---------- */ .sgds-vetrina .due-colonne {display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--riga);border:1px solid var(--riga)} .sgds-vetrina .colonna {background:var(--carta);padding:32px 28px} .sgds-vetrina .colonna h3 {margin-bottom:6px} .sgds-vetrina .colonna .etichetta {font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bollo);display:block;margin-bottom:12px} .sgds-vetrina .colonna ul {margin:16px 0 0;padding:0;list-style:none} .sgds-vetrina .colonna li {font-size:.94rem;color:var(--inchiostro-soft);padding:7px 0 7px 20px;position:relative} .sgds-vetrina .colonna li::before {content:'—';position:absolute;left:0;color:var(--riga)} /* Stesso difetto dei passi: ".due-colonne" da solo pesa meno di ".sgds-vetrina .due-colonne", e la regola a due colonne vinceva anche sul telefono. Le due schede restavano affiancate e il testo andava a capo ogni due parole. */ @media(max-width:820px){.sgds-vetrina .due-colonne{grid-template-columns:1fr}} /* ---------- prezzi: un registro anche questo ---------- */ .sgds-vetrina .listino {width:100%;border-collapse:collapse;font-size:.94rem} .sgds-vetrina .listino th, .sgds-vetrina .listino td {padding:13px 16px;text-align:center;border-bottom:1px solid var(--riga)} .sgds-vetrina .listino th:first-child, .sgds-vetrina .listino td:first-child {text-align:left;padding-left:0;width:37%} .sgds-vetrina .listino thead th {border-bottom:2px solid var(--inchiostro);vertical-align:bottom;padding-bottom:18px} .sgds-vetrina .piano-nome {font-family:'Newsreader',serif;font-size:1.32rem;font-weight:600;display:block} /* 3.41.10, V10: la riga orientativa sotto il nome del piano. Lo spazio e' di tre righe in ogni colonna - il tedesco e l'inglese su schermo stretto ne usano tre - cosi' nomi e prezzi restano sulla stessa riga (le celle sono allineate in basso) */ .sgds-vetrina .piano-orienta {display:block;max-width:220px;min-height:4.05em;margin:5px auto 0;font-size:.8rem;font-weight:400;line-height:1.35;color:var(--inchiostro-soft)} .sgds-vetrina .piano-prezzo {font-family:'IBM Plex Mono',monospace;font-size:1.6rem;font-weight:500;display:block;margin-top:9px} .sgds-vetrina .piano-anno {font-size:.78rem;color:var(--inchiostro-soft);display:block;margin-top:3px} .sgds-vetrina .listino td.si {color:var(--bollo);font-weight:600} .sgds-vetrina .listino td.no {color:var(--riga)} .sgds-vetrina .listino tr.evidenzia td {background:var(--bollo-chiaro)} .sgds-vetrina .listino .gruppo td { font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;color:var(--inchiostro-soft);padding-top:26px;border-bottom:1px solid var(--inchiostro); } .sgds-vetrina .riga-cta td {padding-top:22px;border-bottom:none} /* LA RIGA IN ALTO STA SOTTO I PREZZI, NON IN FONDO A UN ELENCO. Quella in fondo chiude la tabella e ha bisogno di aria sopra; questa segue subito l'intestazione e ne serve meno, altrimenti si stacca dai prezzi a cui si riferisce. Sotto invece la linea la separa dalle funzioni che cominciano. */ .sgds-vetrina .riga-cta-alto td { padding-top: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--riga); } /* Sotto una certa larghezza la tabella non si comprime senza diventare illeggibile: meglio farla scorrere che schiacciare le colonne fino a spezzare "illimitati" su tre righe. */ .sgds-vetrina .listino-scorre {overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -28px;padding:0 28px} @media(max-width:820px){ /* IL "DONDOLIO" ORIZZONTALE VENIVA DA QUI. min-width:560px sulla tabella forzava la pagina a 560 pixel anche su uno schermo da 375: tutto il sito scorreva lateralmente, non solo il listino. Fra 761 e 820 pixel la tabella si vede ancora e le misure ridotte servono. Sotto i 760 c'e' la barra e al suo posto ci sono le schede: li' la larghezza minima non ha nulla da tenere aperto e va tolta. */ .sgds-vetrina .listino{font-size:.88rem;min-width:560px} .sgds-vetrina .listino th,.sgds-vetrina .listino td{padding:11px 10px} .sgds-vetrina .listino th:first-child,.sgds-vetrina .listino td:first-child{width:auto;min-width:170px} .sgds-vetrina .piano-prezzo{font-size:1.3rem} } @media(max-width:760px){ .sgds-vetrina .listino{min-width:0} } /* ---------- domande ---------- */ .sgds-vetrina .domanda {border-bottom:1px solid var(--riga);padding:26px 0} .sgds-vetrina .domanda:last-child {border-bottom:none} .sgds-vetrina .domanda h3 {margin-bottom:9px} .sgds-vetrina .domanda p {color:var(--inchiostro-soft);font-size:.98rem;margin-bottom:0;max-width:720px} /* ---------- chiusura ---------- */ /* IL FONDO SCURO A TUTTA LARGHEZZA. La sezione sta dentro il contenitore della vetrina: il fondo si fermava ai suoi margini e ai lati restava la pagina chiara, come se fosse ritagliato. Le altre sezioni non lo mostrano perche' hanno fondo chiaro come il resto - questa e' l'unica scura, e il taglio si vede. Stessa tecnica gia' usata piu' sopra: margini negativi calcolati sulla meta' della finestra, che funzionano qualunque larghezza imponga il tema. Il rientro interno riporta il contenuto dove stava. */ .sgds-vetrina .chiusura { background: var(--inchiostro); color: var(--carta); text-align: center; /* * LA LARGHEZZA PIENA LA DA' LA CLASSE alignfull DEL TEMA. * * I margini negativi calcolati sulla finestra non bastavano: il tema * impone "margin-left: auto !important" su tutto cio' che sta dentro un * contenitore vincolato, e !important vince su qualunque calcolo. * * Ma quella stessa regola ESCLUDE alignfull. Usare la classe del tema * invece di combatterla e' anche piu' solido: se un domani cambia il * modo in cui il tema gestisce la larghezza, la sezione lo segue. */ /* Il contenuto lo centra .wrap, che sta gia' dentro: qui solo lo spazio verticale, altrimenti si sommerebbero due rientri. */ padding: 92px 0; } .sgds-vetrina .chiusura h2 {color:var(--carta);max-width:640px;margin:0 auto 1.2rem} .sgds-vetrina .chiusura p {color:#A9B6C0;max-width:520px;margin:0 auto 2rem} .sgds-vetrina .chiusura .bottone {background:var(--carta);color:var(--inchiostro)!important;border-color:var(--carta)} .sgds-vetrina .chiusura .bottone:hover {background:#fff} /* ---------- piede ---------- */ .sgds-vetrina footer {border-top:1px solid var(--riga);padding:38px 0;font-size:.88rem;color:var(--inchiostro-soft)} /* * 3.41.11, V11: "CHI SIAMO". Un blocco breve sopra il pie', non una sezione * grande: chi c'e' dietro, un nome e un telefono. La frase nel carattere dei * titoli, i contatti come nel pie'. Il telefono e' un collegamento tel:. */ .sgds-vetrina section.chi-siamo {padding:34px 0 30px} .sgds-vetrina .chi-siamo-testo {margin:0 0 6px;max-width:640px;font-family:'Newsreader',Georgia,serif;font-size:1.15rem;line-height:1.45;color:var(--inchiostro)} .sgds-vetrina .chi-siamo-contatti {margin:0;font-size:.95rem;color:var(--inchiostro-soft)} .sgds-vetrina .chi-siamo-contatti a {color:var(--inchiostro);text-decoration:none;border-bottom:1px solid var(--riga)} .sgds-vetrina .chi-siamo-contatti a:hover {border-bottom-color:var(--inchiostro)} .sgds-vetrina footer .wrap {display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center} .sgds-vetrina footer a {color:var(--inchiostro-soft)} /* comparsa progressiva delle righe */ .sgds-vetrina .rivela {opacity:0;transform:translateY(9px);transition:opacity .5s ease,transform .5s ease} .sgds-vetrina .rivela.visibile {opacity:1;transform:none} /* QUESTA E' LA PIU' GRAVE DELLE OTTO. .rivela parte da opacity:0 e diventa visibile con un'animazione. Chi ha chiesto meno animazioni nel sistema operativo doveva vedere tutto subito - ma ".rivela" da solo perdeva contro ".sgds-vetrina .rivela", e restava a opacity:0: mezza pagina INVISIBILE, non solo senza animazione. */ @media (prefers-reduced-motion:reduce){.sgds-vetrina .rivela{opacity:1;transform:none}} /* ------------------------------------------------------------------ Il modulo d'iscrizione, dentro la pagina. ------------------------------------------------------------------ */ /* * Il modulo ha il fondo chiaro e la sezione finale e' scura: senza questo si * vedrebbe un rettangolo bianco appiccicato in fondo, invece di una scheda * appoggiata sopra. */ /* TESTO A SINISTRA, MODULO A DESTRA. Prima il titolo e la spiegazione occupavano tutto lo schermo e il modulo cominciava sotto: chi arrivava da "Scegli" atterrava a meta' pagina e doveva scorrere per trovare il primo campo. Affiancandoli il modulo si vede subito e il testo resta accanto, invece di essere un ostacolo da superare. Sotto i 900 pixel tornano incolonnati: su un telefono due colonne non ci stanno. */ .sgds-vetrina .wrap-modulo .sgds { background: #fff; border-radius: 16px; padding: 30px 28px; box-shadow: 0 10px 40px rgba(0, 0, 0, .2); text-align: left; } @media (max-width: 640px) { .sgds-vetrina .wrap-modulo { padding: 0 14px; } .sgds-vetrina .wrap-modulo .sgds { padding: 22px 18px; } } /* ------------------------------------------------------------------ Il tema attorno alla pagina. ------------------------------------------------------------------ */ /* * MOLTI TEMI METTONO PADDING E MARGINI SUL CONTENITORE DEL CONTENUTO. * * Sommati a una pagina che va da un bordo all'altro producono due strisce * bianche ai lati, o una barra di scorrimento orizzontale. Si annullano solo * sul contenitore che contiene DAVVERO la vetrina, non su tutti: un tema puo' * usare quelle stesse classi altrove. */ .entry-content:has(.sgds-vetrina), .page-content:has(.sgds-vetrina), .site-main:has(.sgds-vetrina), .wp-block-post-content:has(.sgds-vetrina) { max-width: none; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } /* * :has() non lo conoscono i browser piu' vecchi. Per quelli il margine negativo * della pagina fa comunque il suo lavoro: si vede larga lo stesso, con al * massimo un po' di spazio di troppo sopra e sotto. */ /* ------------------------------------------------------------------ Le tre sezioni d'iscrizione: se ne vede una sola. ------------------------------------------------------------------ */ /* * Ce n'e' una per piano, ma mostrarle tutte e tre significherebbe tre moduli * identici uno sotto l'altro. Si nascondono, e :target apre quella raggiunta * dal pulsante "Prova". * * :target e' CSS puro: funziona senza script, e il collegamento resta un * collegamento - copiabile, apribile in una scheda nuova, ricordato dal * browser quando si torna indietro. */ .sgds-vetrina .sgds-iscrizione { display: none; } .sgds-vetrina .sgds-iscrizione:target { display: block; } @media (min-width: 900px) { /* La griglia sta sulla SEZIONE, non sul contenitore del testo: quello si chiude prima che il modulo cominci, quindi non potrebbe raggiungerlo. */ .sgds-vetrina .sgds-iscrizione:target { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; max-width: 1180px; margin: 0 auto; text-align: left; } .sgds-vetrina .sgds-iscrizione .wrap { max-width: none; margin: 0; text-align: left; } /* Il testo non e' piu' centrato: e' una colonna. */ .sgds-vetrina .sgds-iscrizione .wrap h2, .sgds-vetrina .sgds-iscrizione .wrap p { margin-left: 0; margin-right: 0; max-width: none; } /* Il modulo esce dal flusso della prima colonna e occupa la seconda, allineato in alto con il titolo. */ .sgds-vetrina .sgds-iscrizione .wrap-modulo { margin: 0; padding: 0; max-width: none; } } .sgds-vetrina .wrap-modulo { max-width: 720px; margin: 44px auto 0; padding: 0 24px; } /* * Finche' non se ne apre nessuna la pagina finisce col listino, che e' un buon * posto dove finire: le tre colonne coi prezzi e tre pulsanti. */ /* Il modulo dentro la vetrina non ha bisogno del proprio selettore di lingua: ce n'e' gia' uno in cima alla pagina. */ .sgds-vetrina .wrap-modulo .sgds-lingue { display: none; } /* Il selettore della lingua della pagina: in cima, discreto. */ .sgds-vetrina .sgds-lingue-vetrina { padding-top: 18px; padding-bottom: 0; } .sgds-vetrina .sgds-lingue-vetrina .sgds-lingue { margin-bottom: 0; } /* ------------------------------------------------------------------ La testata della sezione d'iscrizione. ------------------------------------------------------------------ */ /* * Il prezzo sotto il titolo: si legge subito, ma non ruba la scena al * titolo - chi e' qui ha gia' visto il listino, e questo e' un promemoria. */ .sgds-vetrina .sgds-prezzo-dopo { font-size: 1.05rem; opacity: .85; margin-bottom: .6rem; } /* * Il modo per cambiare idea sta in fondo alla testata, piccolo: chi ha * scelto bene non deve inciamparci, chi ha sbagliato lo trova. */ .sgds-vetrina .sgds-cambia-piano { font-size: .92rem; margin-bottom: 0; opacity: .75; } .sgds-vetrina .sgds-cambia-piano a { color: #7FB3A3; } /* ------------------------------------------------------------------ Il modulo dentro la sezione scura. ------------------------------------------------------------------ */ /* * LA SEZIONE E' SCURA, IL MODULO E' BIANCO. * * Le regole della sezione - .chiusura h2, .chiusura p - colorano i testi in * chiaro perche' stanno su fondo scuro. Ma il modulo ha il suo fondo bianco, e * quei testi diventavano quasi invisibili: "I dati del tuo studio" si leggeva * solo inclinando lo schermo. * * Qui si rimettono i colori giusti per tutto cio' che sta dentro il modulo. */ .sgds-vetrina .wrap-modulo .sgds h1, .sgds-vetrina .wrap-modulo .sgds h2, .sgds-vetrina .wrap-modulo .sgds h3, .sgds-vetrina .wrap-modulo .sgds .sgds-titolo { color: #1e293b; text-align: left; max-width: none; margin: 0 0 6px; } /* * NON "inherit": QUELLO EREDITA IL CHIARO DELLA SEZIONE. * * La sezione e' scura e imposta color:var(--carta) sul contenitore. Un * "inherit" qui dentro risale fino a quello, e le etichette dei campi * diventavano bianche su bianco - illeggibili come il titolo di prima, solo * un giro dopo. * * Si scrive il colore, senza scorciatoie. */ .sgds-vetrina .wrap-modulo .sgds, .sgds-vetrina .wrap-modulo .sgds p, .sgds-vetrina .wrap-modulo .sgds label, .sgds-vetrina .wrap-modulo .sgds span, .sgds-vetrina .wrap-modulo .sgds li, .sgds-vetrina .wrap-modulo .sgds strong, .sgds-vetrina .wrap-modulo .sgds div { color: #1e293b; max-width: none; margin-left: 0; margin-right: 0; text-align: left; } /* * I testi di servizio del modulo hanno un grigio loro: si rimette, altrimenti * eredita il nero delle etichette e tutto pesa uguale. */ .sgds-vetrina .wrap-modulo .sgds small, .sgds-vetrina .wrap-modulo .sgds .sgds-legenda, .sgds-vetrina .wrap-modulo .sgds .sgds-facolt { color: #64748b; } .sgds-vetrina .wrap-modulo .sgds .sgds-obbl { color: #dc2626; } /* * Il pulsante del modulo e' viola, non chiaro come quelli della pagina. */ .sgds-vetrina .wrap-modulo .sgds button { background: #6d28d9; color: #fff !important; border-color: #6d28d9; } /* Il modulo si allinea a sinistra: e' un modulo, non un manifesto. */ .sgds-vetrina .wrap-modulo .sgds { text-align: left; } /* * I campi di testo: fondo bianco e testo scuro, senza dipendere da quello che * la sezione impone attorno. */ .sgds-vetrina .wrap-modulo .sgds input[type="text"], .sgds-vetrina .wrap-modulo .sgds input[type="email"], .sgds-vetrina .wrap-modulo .sgds input[type="password"], .sgds-vetrina .wrap-modulo .sgds select, .sgds-vetrina .wrap-modulo .sgds textarea { background: #fff; color: #1e293b; -webkit-text-fill-color: #1e293b; } .sgds-vetrina .wrap-modulo .sgds input::placeholder, .sgds-vetrina .wrap-modulo .sgds textarea::placeholder { color: #94a3b8; -webkit-text-fill-color: #94a3b8; } /* * Il grigio dei testi di servizio va rimesso DOPO la regola qui sopra, * altrimenti la vince lei e tutto pesa uguale. */ .sgds-vetrina .wrap-modulo .sgds small, .sgds-vetrina .wrap-modulo .sgds .sgds-legenda, .sgds-vetrina .wrap-modulo .sgds .sgds-facolt { color: #64748b; } .sgds-vetrina .wrap-modulo .sgds .sgds-obbl { color: #dc2626; } /* ================================================================== Il tema attorno: si toglie di mezzo. ================================================================== */ /* * TITOLO DEL SITO, TITOLO DELLA PAGINA, MENU. * * La vetrina ha una barra sua, con il marchio e i collegamenti alle sezioni. * Quella del tema, sopra, dice le stesse cose in un altro modo: due intestazioni * una sull'altra fanno chiedere quale sia la pagina. * * Si nascondono solo quando la pagina contiene la vetrina - :has() - cosi' il * resto del sito resta com'e'. */ body.sgds-ha-vetrina .site-header, body.sgds-ha-vetrina .wp-block-template-part[class*="header"], body.sgds-ha-vetrina header.wp-block-template-part, body.sgds-ha-vetrina .site-branding, body.sgds-ha-vetrina .site-title, body.sgds-ha-vetrina .site-description, body.sgds-ha-vetrina .main-navigation, body.sgds-ha-vetrina .wp-block-navigation, body.sgds-ha-vetrina .entry-header, body.sgds-ha-vetrina .page-title, body.sgds-ha-vetrina .entry-title, body.sgds-ha-vetrina .wp-block-post-title { display: none !important; } /* Lo stesso, per chi apre la pagina da un editor a blocchi dove la classe sul body non arriva. Blocco separato: un selettore che il browser non capisce invaliderebbe l'intera lista. */ body:has(.sgds-vetrina) .site-header, body:has(.sgds-vetrina) .wp-block-template-part[class*="header"], body:has(.sgds-vetrina) header.wp-block-template-part, body:has(.sgds-vetrina) .site-branding, body:has(.sgds-vetrina) .site-title, body:has(.sgds-vetrina) .site-description, body:has(.sgds-vetrina) .main-navigation, body:has(.sgds-vetrina) .wp-block-navigation, body:has(.sgds-vetrina) .entry-header, body:has(.sgds-vetrina) .page-title, body:has(.sgds-vetrina) .entry-title, body:has(.sgds-vetrina) .wp-block-post-title { display: none !important; } /* * E lo spazio che restava al loro posto. * * I temi mettono padding sul contenitore principale: tolte le intestazioni * resta una striscia vuota in cima, e la pagina comincia a meta' schermo. */ body.sgds-ha-vetrina .site-main, body.sgds-ha-vetrina .entry-content, body.sgds-ha-vetrina .wp-block-post-content, body.sgds-ha-vetrina .site-content, body.sgds-ha-vetrina main { padding-top: 0 !important; margin-top: 0 !important; } /* Lo stesso, per chi apre la pagina da un editor a blocchi dove la classe sul body non arriva. Blocco separato: un selettore che il browser non capisce invaliderebbe l'intera lista. */ body:has(.sgds-vetrina) .site-main, body:has(.sgds-vetrina) .entry-content, body:has(.sgds-vetrina) .wp-block-post-content, body:has(.sgds-vetrina) .site-content, body:has(.sgds-vetrina) main { padding-top: 0 !important; margin-top: 0 !important; } /* * IL CONTENITORE DEL TEMA CHE RESTAVA FUORI. * * Le regole qui sopra azzerano .entry-content e main, ma la striscia bianca * veniva da un altro elemento: il gruppo che Twenty Twenty-Five mette attorno * al contenuto, con padding-top e padding-bottom presi dalle proprie variabili * di spaziatura. * * Dentro c'e' anche il titolo della pagina - "vetrina" - gia' nascosto: non si * vedeva, ma il suo contenitore continuava a occupare lo spazio. Da qui la * fascia sopra la barra, che c'era anche per chi non e' collegato. */ body.sgds-ha-vetrina .wp-block-group.has-global-padding, body.sgds-ha-vetrina .wp-block-post-content, body.sgds-ha-vetrina .is-layout-constrained { padding-top: 0 !important; margin-top: 0 !important; } body:has(.sgds-vetrina) .wp-block-group.has-global-padding, body:has(.sgds-vetrina) .wp-block-post-content, body:has(.sgds-vetrina) .is-layout-constrained { padding-top: 0 !important; margin-top: 0 !important; } /* * LA BARRA E' GIA' DEFINITA PIU' SOPRA. * * Ne avevo scritta una seconda con position:sticky e un fondo pieno: vinceva * sulla prima e faceva perdere il vetro smerigliato, e la barra diventava piu' * alta perche' il selettore della lingua ci aggiungeva una riga. * * Restano solo le regole che servono al selettore. */ /* Le regole del selettore stanno piu' in basso, insieme a quelle della barra. */ /* ------------------------------------------------------------------ La pagina comincia in cima. ------------------------------------------------------------------ */ /* * Tolte le intestazioni del tema resta comunque lo spazio che i temi mettono * attorno al contenuto: una striscia vuota, e la pagina che comincia a meta' * schermo. * * Qui si azzera anche sul contenitore piu' esterno, che i selettori di prima * non toccano. */ body.sgds-ha-vetrina #content, body.sgds-ha-vetrina #primary, body.sgds-ha-vetrina .wp-site-blocks, body.sgds-ha-vetrina .site { padding-top: 0 !important; margin-top: 0 !important; } /* * La barra della vetrina e' la prima cosa: niente spazio sopra di lei. */ .sgds-vetrina .testa { margin-top: 0; } /* * E l'apertura non ha piu' bisogno del respiro che aveva quando c'era * un'intestazione sopra. */ .sgds-vetrina .apertura { padding-top: 56px; } @media (max-width: 720px) { .sgds-vetrina .apertura { padding-top: 38px; } } /* ================================================================== Se la pagina resta stretta lo stesso. ================================================================== */ /* * IL MARGINE NEGATIVO NON BASTA SEMPRE. * * Funziona se il contenitore del tema lascia traboccare. Ma molti temi mettono * overflow:hidden o contain sul contenuto: li' il margine negativo viene * tagliato, e la pagina resta larga quanto la colonna - com'e' successo su * accountingbg.net. * * Qui si aprono i contenitori invece di forzare da dentro. E' piu' diretto e * non dipende da come il tema tratta il traboccamento. */ body.sgds-ha-vetrina .wp-site-blocks, body.sgds-ha-vetrina .site, body.sgds-ha-vetrina #page, body.sgds-ha-vetrina #content, body.sgds-ha-vetrina #primary, body.sgds-ha-vetrina #main, body.sgds-ha-vetrina main, body.sgds-ha-vetrina .site-main, body.sgds-ha-vetrina .site-content, body.sgds-ha-vetrina .content-area, body.sgds-ha-vetrina article, body.sgds-ha-vetrina .entry-content, body.sgds-ha-vetrina .page-content, body.sgds-ha-vetrina .wp-block-post-content, body.sgds-ha-vetrina .wp-block-group, body.sgds-ha-vetrina .container, body.sgds-ha-vetrina .wrapper { max-width: none !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; /* * NON "visible": QUELLO ROMPE LO STICKY. * * Un antenato con overflow diverso da "visible" impedisce a position:sticky * di funzionare - e' nella specifica, e non da' nessun errore: la barra * semplicemente scorre via. * * Ma anche "visible" esplicito su un contenitore crea un contesto che * taglia lo sticky in alcuni browser. Si usa "clip" solo dove serve * davvero, e qui si lascia stare l'overflow del tutto: aprire le larghezze * basta, e non tocchiamo cio' che non serve toccare. */ } /* * Lo stesso per chi apre la pagina senza che la classe arrivi sul body. * Blocco separato: un selettore non capito invaliderebbe tutta la lista. */ body:has(.sgds-vetrina) .wp-site-blocks, body:has(.sgds-vetrina) .site, body:has(.sgds-vetrina) #page, body:has(.sgds-vetrina) #content, body:has(.sgds-vetrina) #primary, body:has(.sgds-vetrina) #main, body:has(.sgds-vetrina) main, body:has(.sgds-vetrina) .site-main, body:has(.sgds-vetrina) .site-content, body:has(.sgds-vetrina) .content-area, body:has(.sgds-vetrina) article, body:has(.sgds-vetrina) .entry-content, body:has(.sgds-vetrina) .page-content, body:has(.sgds-vetrina) .wp-block-post-content, body:has(.sgds-vetrina) .wp-block-group, body:has(.sgds-vetrina) .container, body:has(.sgds-vetrina) .wrapper { max-width: none !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* * A CONTENITORI APERTI IL MARGINE NEGATIVO NON SERVE PIU'. * * Anzi: sommato a contenitori gia' larghi, spingerebbe la pagina fuori schermo * a sinistra. Si azzera, e la larghezza torna a essere quella naturale. */ body.sgds-ha-vetrina .sgds-vetrina, body:has(.sgds-vetrina) .sgds-vetrina { width: auto; max-width: none; margin-left: 0; margin-right: 0; } /* ------------------------------------------------------------------ Il selettore della lingua dentro la barra. ------------------------------------------------------------------ */ /* * Nella barra il selettore e' una voce fra le altre: niente margine sotto, * niente allineamento a destra, e sigle piu' piccole dei collegamenti perche' * e' un comando di servizio, non una voce del menu. */ .sgds-vetrina .testa .sgds-lingue { margin: 0; justify-content: flex-start; gap: 2px; } .sgds-vetrina .testa .sgds-lingue .sgds-lingua { padding: 3px 7px; font-size: .78rem; letter-spacing: .03em; } /* ------------------------------------------------------------------ La barra: altezza e sticky. ------------------------------------------------------------------ */ /* * ALTEZZA FISSA. * * La .wrap dentro la barra e' alta 66 pixel, ma i contenitori del tema * possono aggiungere spazio sopra e sotto: si azzera, cosi' l'altezza e' * quella e basta. */ .sgds-vetrina .testa { padding: 0; margin: 0; min-height: 0; } .sgds-vetrina .testa .wrap { height: 66px; min-height: 66px; padding-top: 0; padding-bottom: 0; } /* * LO STICKY HA BISOGNO CHE NESSUN ANTENATO TAGLI. * * position:sticky smette di funzionare - senza dare nessun errore - se un * elemento sopra ha overflow diverso da "visible". I temi lo mettono spesso, e * la barra scorreva via. * * Qui si dice esplicitamente che quei contenitori non tagliano. E' l'unico * punto in cui tocchiamo l'overflow del tema, e serve solo a questo. */ body.sgds-ha-vetrina, body.sgds-ha-vetrina .wp-site-blocks, body.sgds-ha-vetrina .site, body.sgds-ha-vetrina #page, body.sgds-ha-vetrina #content, body.sgds-ha-vetrina main, body.sgds-ha-vetrina .site-main, body.sgds-ha-vetrina .entry-content, body.sgds-ha-vetrina .wp-block-post-content, body.sgds-ha-vetrina .sgds-vetrina { overflow: visible; } body:has(.sgds-vetrina), body:has(.sgds-vetrina) .wp-site-blocks, body:has(.sgds-vetrina) .site, body:has(.sgds-vetrina) #page, body:has(.sgds-vetrina) #content, body:has(.sgds-vetrina) main, body:has(.sgds-vetrina) .site-main, body:has(.sgds-vetrina) .entry-content, body:has(.sgds-vetrina) .wp-block-post-content, body:has(.sgds-vetrina) .sgds-vetrina { overflow: visible; } /* E la barra resta in cima. */ .sgds-vetrina .testa { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; } /* ------------------------------------------------------------------ La lingua attiva, dentro la barra. ------------------------------------------------------------------ */ /* * LA REGOLA DELLA BARRA VINCEVA SUL BIANCO. * * Il selettore sta dentro