/* * Mobile override layer for the Italiaonline (IO) desktop snapshots. * Loaded after the IO CSS so it wins in the cascade. Confined to small * viewports so the desktop layout (>=1025px) renders identically. * Targets real IO classes (.dmInner, .dmRespRow, Foundation grid) — no * template edits, no IO mobile runtime. */ :root { --mnav-lake: #4ab3c9; --mnav-lake-dark: #2f8a9e; --mnav-ink: #1b2530; --mnav-font: 'Montserrat', system-ui, sans-serif; } /* Hamburger + panel exist in the DOM on every viewport but only show on mobile. */ .m-navbtn { display: none; } .m-navpanel { display: none; } @media (max-width: 1024px) { html, body { max-width: 100%; overflow-x: hidden; } /* ---- CTA buttons (IO dmButtonLink): la dimensione desktop (width:calc(100%-355px), min-width:25px) li riduce a una pillola di ~25px che taglia il testo. Su mobile: larghezza piena, altezza auto, testo non tagliato. ---- */ #dm .dmBody a.dmButtonLink { width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 50px !important; padding-left: 24px !important; padding-right: 24px !important; } /* ---- Unlock the desktop min-width that forces horizontal scroll ---- */ .dmDesktopBody .dmInner, #dm, .dmBody, .u_hcontainer, .dmLayoutWrapper, #site_content, #iscrollBody { min-width: 0 !important; width: 100% !important; max-width: 100% !important; } /* ---- Stack the Foundation grid in a single column ---- */ .dmRespRow, .dmRespCol, [class*="large-"], [class*="medium-"] { width: 100% !important; max-width: 100% !important; float: none !important; left: auto !important; right: auto !important; } .dmRespRow { display: block !important; } /* Desktop columns carry large asymmetric side padding (e.g. 60px) that wastes width on a phone. Normalise to a modest, symmetric inset. */ .dmRespCol, .dmRespDesignCol { padding-left: 16px !important; padding-right: 16px !important; } /* IO lays multi-column rows out as a flex row (and reverses order via .mobile-columns-reversed). With columns forced to 100% they would overflow sideways — stack them vertically instead. */ .dmRespColsWrapper { display: flex !important; flex-direction: column !important; } /* IO sometimes positions columns absolutely on desktop; neutralise it. */ .dmRespColsWrapper > .dmRespCol { position: relative !important; } img { max-width: 100% !important; height: auto !important; } /* ---- Hero / image sections: drop fixed desktop heights ---- */ .u_hcontainer .dmRespRow[style*="height"], .heroBlock, [data-element-type="hero"] { height: auto !important; min-height: 0 !important; } [style*="background-image"] { background-size: cover !important; background-position: center !important; } /* ---- Typography: rein in oversized desktop headings ---- */ h1, .u_txt h1, [class*="title"] h1 { font-size: 30px !important; line-height: 1.2 !important; } h2, .u_txt h2 { font-size: 24px !important; line-height: 1.25 !important; } h3, .u_txt h3 { font-size: 20px !important; line-height: 1.3 !important; } .u_txt, .dmNewParagraph { word-break: break-word; } /* ---- Forms: full-width fields, tap targets >= 44px ---- Excludes checkbox/radio so the native controls keep their intrinsic size. */ .contact-form .dmform-field, .contact-form input:not([type="checkbox"]):not([type="radio"]), .contact-form select, .contact-form textarea, .dmforminput { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .contact-form input:not([type="checkbox"]):not([type="radio"]), .contact-form select, .contact-form textarea { min-height: 44px; font-size: 16px; /* prevents iOS zoom-on-focus */ } .contact-form textarea { min-height: 96px; } .dmformsubmit, .dmformsubmit input, .dmformsubmit button { width: 100% !important; min-height: 48px; } /* IO normally sizes checkbox wrappers via its (stripped) form runtime; without it .checkboxwrapper.horizontal collapses to ~1ch and breaks the label vertically. Force full width with wrapping text. */ .dmform .checkboxwrapper, .dmform .optinwrapper, .dmform .radiowrapper { width: 100% !important; float: none !important; margin-left: 0 !important; } /* IO's custom-checkable is a flex row whose text span (inline-block) shrinks to ~1ch under word-break:break-word once the runtime-set width is gone. Block flow lets the native checkbox and label text wrap normally. */ .contact-checkable-container, .for-checkable { display: block !important; width: 100% !important; word-break: normal !important; } .for-checkable .rteBlock, .for-checkable div, .for-checkable span:not(.img-wrapper) { display: inline !important; white-space: normal !important; word-break: normal !important; } /* ---- Footer / OSM map: full-width, no overflow ---- */ .dmFooterContainer, .dmFooter { width: 100% !important; max-width: 100% !important; } /* Cap any embed (OSM map, Komoot tours) to the viewport without forcing a stretch that could distort a fixed aspect ratio. */ iframe { max-width: 100% !important; } /* ---- Replace the IO nav menus with the hamburger ---- The links stay in the DOM (querySelectorAll ignores display:none), so site.js can still read them to build the panel. */ .main-navigation.unifiednav, .dmLinksMenu { display: none !important; } .dmHeaderContainer, .u_hcontainer { display: block !important; } .m-navbtn { display: flex !important; align-items: center; justify-content: center; position: fixed; top: 12px; right: 12px; z-index: 2147483600; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 8px; background: var(--mnav-lake); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); cursor: pointer; } .m-navbtn span, .m-navbtn span::before, .m-navbtn span::after { display: block; position: absolute; width: 24px; height: 3px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .m-navbtn span::before { content: ""; transform: translateY(-8px); } .m-navbtn span::after { content: ""; transform: translateY(8px); } body.m-nav-open .m-navbtn span { background: transparent; } body.m-nav-open .m-navbtn span::before { transform: rotate(45deg); } body.m-nav-open .m-navbtn span::after { transform: rotate(-45deg); } .m-navpanel { display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 2147483590; width: 76%; max-width: 320px; padding: 72px 0 24px; background: var(--mnav-ink); box-shadow: -4px 0 24px rgba(0, 0, 0, .4); transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.m-nav-open .m-navpanel { transform: translateX(0); } .m-navpanel a { display: block; padding: 16px 24px; color: #fff; font-family: var(--mnav-font); font-size: 18px; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .12); } .m-navpanel a:active, .m-navpanel a.is-current { color: var(--mnav-lake); } .m-navscrim { display: none; position: fixed; inset: 0; z-index: 2147483580; background: rgba(0, 0, 0, .5); } body.m-nav-open .m-navscrim { display: block; } /* ---- E-bike cards 1-per-row ---- IO's photo-gallery widget carries data-mobile-columns="1" (its intent), but the IO mobile runtime that would apply it is stripped. Replicate it: wrap the flex row and force each column full-width. Scoped to the attribute so only galleries that opted into 1 column are affected. */ .dmPhotoGallery[data-mobile-columns="1"] .photogallery-row { flex-wrap: wrap !important; } .dmPhotoGallery[data-mobile-columns="1"] .photogallery-column[class*="column-"] { width: 100% !important; } /* IO sizes each thumbnail as a square (image-container a { padding-top:100% }, keyed off width). On desktop the column is 1/4 width -> small square; in a full-width single column that square becomes ~viewport-tall ("enorme"). Flatten to a landscape banner. IO sets padding-top without !important, so this wins regardless of its higher specificity. */ .dmPhotoGallery[data-mobile-columns="1"] .image-container a { padding-top: 66% !important; } /* ---- Lightbox: touch-friendly overrides (win over the inline