/* Paragrafi leggibili e giustificati */ p { text-align: justify; text-justify: inter-word; line-height: 1.6; hyphens: auto; /* sillabazione migliore con */ } /* 0) Reset per calcoli responsive */ *, *::before, *::after { box-sizing: border-box; } /* 1) Tipografia fluida */ html { font-size: 16px; overflow-y: scroll; } body { -webkit-text-size-adjust: 100%; line-height: 1.6; font-size: clamp(15px, 1.1vw + 0.9rem, 18px); margin: 0; } /* 2) Contenuto centrato con respiro ai lati */ .wrapper, .page-content, main, article, section { max-width: 1000px; margin: 0 auto; padding-inline: 4vw; /* gutter laterale fluido */ } /* 3) Evita testi/URL che “escono” dai bordi */ .page-content p, .page-content li, .page-content blockquote, .page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 { overflow-wrap: anywhere; word-break: break-word; /* fallback */ hyphens: auto; } /* 4) Media adattivi */ img, video, figure { max-width: 100%; height: auto; display: block; margin: 1em auto; } /* 5) Tabelle e code block scrollabili se larghi */ table, pre, code, .highlight { max-width: 100%; overflow-x: auto; } /* 6) Target tap comodi su mobile */ a { touch-action: manipulation; } a, button { min-height: 44px; } /* 7) Titoli centrati */ h1, h2, h3, h4, h5, h6 { text-align: center; } /* 8) Banner full-bleed (con leggero margine interno) */ .fullbleed-banner { width: 100vw; height: 320px; /* regola a piacere */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-inline: 3vw; /* respiro ai lati */ box-sizing: border-box; background: center/cover no-repeat; background-image: url('/assets/images/booth.jpg'); } @media (max-width: 768px) { .fullbleed-banner { height: 200px; } } /* 9) Footer centrato */ .custom-footer { margin-top: 2rem; color: #777; font-size: .95rem; padding: 1rem 0; border-top: 1px solid #e5e5e5; text-align: center; } /* 10) Evita “tagli” orizzontali globali */ body { overflow-x: visible; } /* 11) HEADER MINIMA: allinea navbar al corpo e previeni zoom/tagli */ .site-header, .site-footer { width: 100%; } .site-header .wrapper, .site-footer .wrapper { max-width: 1000px; /* usa lo stesso valore del contenuto */ align-items: center; margin: 0 auto; padding-inline: 4vw; /* gutter fluido come il corpo */ box-sizing: border-box; } /* Header flessibile: titolo + menu non forzano lo zoom .site-header .wrapper { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; /* su mobile possono andare a capo } /* Titolo che si adatta e non “spinge” fuori */ .site-title { display: flex; align-items: center; font-size: clamp(1.1rem, 4vw, 1.5rem); line-height: 1.2; /* white-space: normal; /* consenti a capo */ word-break: break-word; /* spezza titoli lunghi */ min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Menu: usa lo stesso spazio e consenti scroll orizzontale se serve */ /*.site-nav { max-width: 100%; min-width: 0; overflow-x: auto; /* evita taglio: meglio scroll che overflow */ /* -webkit-overflow-scrolling: touch; } */ .site-nav .page-link { white-space: nowrap; display: inline-block; padding: .25rem 0; } /* Sui telefoni il menu occupa la riga sotto al titolo */ @media (max-width: 768px) { .site-nav { /* width: 100%; */ display: flex; flex-direction: column; /* align-items: flex-start; /* o center se vuoi centrarle */ padding: 0.5em 0; } .site-nav .page-link { display: block; width: 100%; margin: 0; padding: 0.5em 1em; border-top: 1px solid #e5e5e5; /* separatore tra le voci */ } .site-nav .page-link:last-child { border-bottom: 1px solid #e5e5e5; } /* ===== FOOTER MINIMA: colonne responsive, stessa larghezza del body ===== */ .site-footer .footer-col-wrapper { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-start; justify-content: space-between; } /* Annulla i float/width predefiniti di Minima e rendi le colonne elastiche */ .site-footer .footer-col { float: none !important; width: auto !important; flex: 1 1 220px; /* ogni colonna può andare a capo su mobile */ } /* Su mobile centra il contenuto del footer */ @media (max-width: 768px) { .site-footer .footer-col-wrapper { justify-content: center; text-align: center; } } /* ===== Anti-zoom/tagli causati da sezioni full-bleed sui telefoni ===== */ @media (max-width: 768px) { .fullbleed-banner { width: 100%; /* invece di 100vw su mobile */ margin-left: 0; margin-right: 0; padding-inline: 3vw; height: clamp(80px, 12vw, 240px); } } /* Un filo di sicurezza contro il classico 1px di overflow */ html { -webkit-text-size-adjust: 100%; overflow-y: scroll; } body { margin: 0; overflow-x: hidden; }