/* mapsitalia.org tidy pass, 2026-09-30 (MAPS-ITALIA-WEBSITE). Loaded after the theme stylesheet on every static page. Goals: one type system, calmer color, one left edge, consistent rhythm, one button. No content changes. */ :root { --tidy-navy: #092F56; --tidy-cream: #F4F2E9; --tidy-red: #CC3623; --tidy-radius: 24px; --tidy-edge: var(--wp--preset--spacing--80); } /* ---------- 1. Type system ---------- */ body { font-size: 1.0625rem; line-height: 1.6; } h1, h2, h3 { font-family: "ABCDailySlab", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; line-height: 1.12; color: inherit; } h1 { font-size: clamp(2.5rem, 2rem + 2.2vw, 3.5rem); } h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); } h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); } h4, h5, h6 { font-family: "Inter", system-ui, sans-serif; font-weight: 600; line-height: 1.25; } /* the theme marks sub-headings with has-inter-font-family: those become the one Inter semi-bold style */ .entry-content :is(h2, h3, h4).has-inter-font-family { font-family: "Inter", system-ui, sans-serif !important; font-weight: 600 !important; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem) !important; letter-spacing: -0.005em; line-height: 1.3 !important; } .entry-content p { max-width: 42rem; } .has-xxx-large-font-size, .has-xx-large-font-size { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem) !important; } p.has-x-large-font-size, p.has-large-font-size { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem) !important; line-height: 1.35 !important; } p.has-medium-font-size { font-size: 1.125rem !important; line-height: 1.5 !important; } .has-small-font-size { font-size: 0.875rem !important; } /* homepage hero keeps its own scale */ .pattern-homepage-header h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 4rem); hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal !important; word-break: normal !important; } @media (max-width: 480px) { .pattern-homepage-header h1 { font-size: 1.8rem; } } /* event cards: slab titles at one size */ .wp-block-post-template h2, .wp-block-post-template h3 { font-size: 1.5rem; line-height: 1.2; } .is-style-equal-grid h3 { font-size: 1.75rem !important; margin-bottom: 0.5rem !important; } .is-style-equal-grid h3 + p { margin-top: 0 !important; } /* ---------- 2. One button ---------- */ .wp-block-button__link, .wp-element-button, .maps-dona-widget a, .maps-dona-widget button { font-family: "Inter", system-ui, sans-serif !important; font-weight: 600 !important; font-size: 0.95rem !important; line-height: 1.2 !important; padding: 0.8em 1.6em !important; border-radius: 999px !important; background: var(--tidy-navy); color: #fff; border: 2px solid var(--tidy-navy); text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .wp-block-button__link:hover, .wp-element-button:hover, .maps-dona-widget a:hover, .maps-dona-widget button:hover { background: #0d3f73; border-color: #0d3f73; color: #fff; } /* light variant on dark tiles (navy / coral / footer) */ .has-blue-one-background-color .wp-block-button__link, footer .wp-block-button__link, .is-style-outline .wp-block-button__link, header .wp-block-buttons.hide-mobile .wp-block-button__link { background: #fff; color: var(--tidy-navy); border-color: #fff; } .has-blue-one-background-color .wp-block-button__link:hover, footer .wp-block-button__link:hover, header .wp-block-buttons.hide-mobile .wp-block-button__link:hover { background: var(--tidy-cream); border-color: var(--tidy-cream); color: var(--tidy-navy); } .maps-dona-widget a, .maps-dona-widget button { min-width: 7.5rem; } /* ---------- 3. Color discipline ---------- */ /* mission tiles: white cards with a colored edge instead of four saturated fills */ .is-style-equal-grid > .wp-block-group.has-background { background: #fff !important; color: var(--tidy-navy); border: 1px solid rgba(9, 47, 86, .10); box-shadow: inset 10px 0 0 var(--tile, var(--tidy-navy)); padding-left: calc(var(--wp--preset--spacing--60) + 10px) !important; } .is-style-equal-grid > .has-green-one-background-color { --tile: #AAB08A; } .is-style-equal-grid > .has-yellow-one-background-color { --tile: #E6A40F; } .is-style-equal-grid > .has-coral-background-color { --tile: #FF725F; } .is-style-equal-grid > .has-pink-one-background-color { --tile: #E274A1; } .is-style-equal-grid > .wp-block-group.has-background h3 { margin-bottom: 0.75rem; } /* Terapie: navy body, red only for the section title and the "approfondisci" links */ #terapia p, #terapia li, #terapia h3, #terapia h4, #terapia .wp-block-details summary { color: var(--tidy-navy) !important; } #terapia h2 { color: var(--tidy-red) !important; } #terapia a { color: var(--tidy-red) !important; } #terapia hr, #terapia .wp-block-separator { border-color: rgba(204, 54, 35, .35) !important; background: none !important; } /* ---------- 4. Alignment and rhythm ---------- */ .entry-content.is-layout-constrained > * + * { margin-block-start: 2rem !important; } /* section titles that sit outside a tile (Eventi on the home page, archive titles): H2 size, room above, a short accent rule below, and the same left edge as the tile text, so each section start is unmistakable */ .entry-content > .wp-block-group:not([class*="border-40"]):not(.has-background) > :is(h1, h2, h3):first-child, .entry-content > :is(h1, h2, h3), main > :is(h1, h2, h3), .wp-block-query-title, h1.archive-title, .tidy-section-title { padding-left: var(--tidy-edge); padding-right: var(--tidy-edge); font-family: "ABCDailySlab", Georgia, serif; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); font-weight: 400; line-height: 1.1; margin-top: 3rem !important; margin-bottom: 1.75rem !important; position: relative; } .entry-content > .wp-block-group:not([class*="border-40"]):not(.has-background):not(:first-child):not(header) { margin-top: 3.5rem !important; } .entry-content > header.pattern-homepage-header, .wp-site-blocks > header.wp-block-template-part { margin-top: 0 !important; } /* Missione / Visione: text block centred beside the image, no void under the title */ #Missione .wp-block-group.alignfull.is-vertical, #Visione .wp-block-group.alignfull.is-vertical { justify-content: center !important; gap: 1.25rem !important; } #Missione .wp-block-group.alignfull.is-vertical > *, #Visione .wp-block-group.alignfull.is-vertical > * { margin: 0 !important; } .is-style-full-height-columns { min-height: 520px !important; } #Missione [style*="radius:40px"], #Visione [style*="radius:40px"] { border-radius: 0 !important; } /* media-text tiles (La storia, Dona): text vertically centred against the image */ .wp-block-media-text .wp-block-media-text__content { align-self: center; } /* crisper corners everywhere */ .is-style-group-border-40-desktop-20-mobile, .is-style-border-40-desktop-20-mobile, .is-style-full-height-columns, .wp-block-columns[style*="border-radius:40px"], .is-style-border-radius-2-elements .wp-block-media-text__media, .wp-block-post-template .is-style-group-border-40-desktop-20-mobile, header.wp-block-template-part > .wp-block-group, .pattern-homepage-header .is-style-border-40-desktop-20-mobile { border-radius: var(--tidy-radius) !important; } @media (max-width: 781px) { .is-style-group-border-40-desktop-20-mobile, .is-style-border-40-desktop-20-mobile, .is-style-full-height-columns { border-radius: 16px !important; } } /* event cards: picture, title, meta */ .wp-block-post-template .wp-block-post-featured-image { border-radius: 16px !important; overflow: hidden; } /* inside a tile, every two-column row shares the same column widths, so stacked rows line up (Bosco credits, training facts) */ @media (min-width: 782px) { .is-style-group-border-40-desktop-20-mobile > .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 0 !important; flex-grow: 1; } } /* tile titles (Terapia, Stati espansi, Network): no void under the heading */ .is-style-group-border-40-desktop-20-mobile > h2.alignwide { margin-bottom: 1.5rem !important; } .is-style-group-border-40-desktop-20-mobile > h2.alignwide + .wp-block-columns, .is-style-group-border-40-desktop-20-mobile > h2.alignwide + .wp-block-group { margin-top: 0 !important; } /* ---------- 5. Small fixes ---------- */ p.paragraph-line::after { content: none; } p.paragraph-line { margin-bottom: 1rem; } footer .wp-block-column p { max-width: 36rem; } footer .tidy-newsletter { margin-top: 1rem; } /* homepage hero: a single DONA (the header one); the mobile duplicate under the title is hidden */ @media (max-width: 959px) { .pattern-homepage-header .wp-block-cover__inner-container .wp-block-buttons:not(.hide-mobile) { display: none !important; } } /* ---------- 6. Newsletter section (Substack posts via /api/substack, 2026-09-30) ---------- */ #newsletter .maps-newsletter-intro { max-width: calc(42rem + 2 * var(--tidy-edge)); margin: 0 0 1.5rem !important; padding-left: var(--tidy-edge); padding-right: var(--tidy-edge); } .maps-newsletter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; min-height: 8rem; } @media (max-width: 959px) { .maps-newsletter-grid { grid-template-columns: 1fr; } } .maps-newsletter-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(9, 47, 86, .10); border-radius: var(--tidy-radius); overflow: hidden; text-decoration: none; color: var(--tidy-navy); transition: transform .15s ease, box-shadow .15s ease; } .maps-newsletter-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(9, 47, 86, .12); } .maps-newsletter-cover { display: block; aspect-ratio: 16 / 9; background: var(--tidy-cream); overflow: hidden; } .maps-newsletter-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .maps-newsletter-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem; } .maps-newsletter-date { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(9, 47, 86, .65); } .maps-newsletter-title { font-family: "ABCDailySlab", Georgia, serif; font-size: 1.35rem; line-height: 1.2; } .maps-newsletter-sub { font-size: 0.95rem; line-height: 1.45; color: rgba(9, 47, 86, .8); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .maps-newsletter-more { margin-top: auto; padding-top: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--tidy-red); } .maps-newsletter-fallback a { color: var(--tidy-red); } #newsletter .wp-block-buttons { margin-top: 1.5rem; padding-left: var(--tidy-edge); justify-content: flex-start; } /* ---------- 7. Home training card (concluded edition, 2026-09-30) ---------- */ #training-card { gap: 3rem; align-items: center; } #training-card h3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); margin-bottom: 1rem; } #training-card p { max-width: 36rem; } #training-card .wp-block-buttons { gap: 0.75rem; margin-top: 1.5rem; } #training-card .is-style-outline .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); } #training-card .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; } #training-card figure { margin: 0; } #training-card img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 16px; display: block; } @media (max-width: 781px) { #training-card { gap: 1.5rem; } #training-card img { max-height: 320px; } } /* ---------- 8. Hero video: no play button, still frame while paused ---------- */ .wp-block-cover__video-background::-webkit-media-controls, .wp-block-cover__video-background::-webkit-media-controls-start-playback-button, .wp-block-cover__video-background::-webkit-media-controls-panel, .wp-block-cover__video-background::-webkit-media-controls-play-button { display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; } .wp-block-cover__video-background { pointer-events: none; background-size: cover; background-position: center; } /* ---------- 9. Cookie banner (Complianz): centred at the bottom, compact, site buttons ---------- */ .cmplz-cookiebanner.cmplz-bottom-right, .cmplz-cookiebanner.cmplz-bottom-left, .cmplz-cookiebanner.cmplz-bottom-center { --cmplz_banner_width: 600px; left: 50% !important; right: auto !important; bottom: 20px !important; transform: translateX(-50%) !important; width: min(600px, calc(100vw - 32px)) !important; max-width: none !important; padding: 18px 22px 16px !important; border-radius: 16px !important; border: 1px solid rgba(9, 47, 86, .12) !important; box-shadow: 0 16px 48px rgba(9, 47, 86, .18) !important; font-family: "Inter", system-ui, sans-serif !important; color: var(--tidy-navy) !important; } .cmplz-cookiebanner .cmplz-divider { display: none !important; } .cmplz-cookiebanner .cmplz-header { padding: 0 !important; min-height: 0 !important; } .cmplz-cookiebanner .cmplz-title { font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--tidy-navy) !important; } .cmplz-cookiebanner .cmplz-close { width: 22px !important; height: 22px !important; } .cmplz-cookiebanner .cmplz-body { padding: 0 !important; margin: 0 !important; } .cmplz-cookiebanner .cmplz-message { font-size: 13.5px !important; line-height: 1.45 !important; margin: 8px 0 12px !important; color: rgba(9, 47, 86, .85) !important; } .cmplz-cookiebanner .cmplz-message p { margin: 0 !important; max-width: none !important; font-size: inherit !important; } .cmplz-cookiebanner .cmplz-buttons { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; } .cmplz-cookiebanner .cmplz-btn { font-family: "Inter", system-ui, sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.2 !important; padding: 0.65em 1.25em !important; border-radius: 999px !important; margin: 0 !important; width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: var(--tidy-navy) !important; color: #fff !important; border: 1.5px solid var(--tidy-navy) !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-deny { background: transparent !important; color: var(--tidy-navy) !important; border: 1.5px solid rgba(9, 47, 86, .5) !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { background: transparent !important; color: var(--tidy-navy) !important; border: none !important; text-decoration: underline !important; padding: 0.65em 0.4em !important; } .cmplz-cookiebanner .cmplz-links { margin: 10px 0 0 !important; padding: 0 !important; font-size: 12.5px !important; } .cmplz-cookiebanner .cmplz-links li { display: none !important; margin: 0 !important; } .cmplz-cookiebanner .cmplz-links li:has(a.privacy-statement[href]), .cmplz-cookiebanner .cmplz-links li:has(a.cookie-statement[href]:not(:empty)) { display: inline-block !important; margin-right: 12px !important; } .cmplz-cookiebanner .cmplz-links a { color: var(--tidy-navy) !important; text-decoration: underline !important; } @media (max-width: 600px) { .cmplz-cookiebanner.cmplz-bottom-right { bottom: 12px !important; padding: 16px 18px 14px !important; } .cmplz-cookiebanner .cmplz-buttons { gap: 6px !important; } } /* ---------- 10. Header logo never shrinks (the 7-item menu was squeezing it); menu gives way first ---------- */ header .wp-block-site-logo { flex: 0 0 auto !important; } header .custom-logo { width: 190px !important; max-width: none !important; height: auto !important; } @media (max-width: 599px) { header .custom-logo { width: 140px !important; } } @media (min-width: 1100px) { header.pattern-homepage-header .wp-block-navigation ul.wp-block-navigation__container, header.wp-block-template-part .wp-block-navigation ul.wp-block-navigation__container { gap: clamp(0.8rem, 1.9vw, 2.5rem) !important; } header.pattern-homepage-header .wp-block-navigation .wp-block-navigation-item__content, header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content { font-size: clamp(0.85rem, 0.3rem + 0.75vw, 1.05rem) !important; } } /* cookie banner buttons stay on one row on phones too */ .cmplz-cookiebanner .cmplz-buttons, .cmplz-cookiebanner .cmplz-body > div:has(> .cmplz-btn) { flex-direction: row !important; } /* (no display override on .cmplz-btn: Complianz keeps the save/preferences buttons hidden until the preferences view) */ @media (max-width: 600px) { .cmplz-cookiebanner .cmplz-message { font-size: 13px !important; } .cmplz-cookiebanner .cmplz-btn { font-size: 13px !important; padding: 0.6em 1.1em !important; } } /* ---------- 11. Footer: tighter stacked columns on phones, tidy copyright row ---------- */ @media (max-width: 781px) { footer .wp-block-columns { gap: 2rem !important; } } footer .flex-start-on-mobile { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 0.15rem 0.35rem !important; justify-content: flex-start !important; } footer .flex-start-on-mobile p { margin: 0 !important; font-size: 0.85rem !important; line-height: 1.5 !important; } @media (max-width: 599px) { footer .flex-start-on-mobile p:last-child { flex-basis: 100% !important; } } footer .is-content-justification-space-between { margin-top: 2rem !important; } /* ---------- 12. Hero on phones: animated WebP instead of