/* Theme Name: AP Bootstrap Child Theme URI: Description: Ap_bootstrap child theme. Author: Karmaweb Author URI: https://www.karmaweb.it Template: ap_bootstrap Version: 0.1.0 */ /* Token */ :root { --green: #034B35; --green-rgb: 3, 75, 53; --green-dark: #023626; --gold: #D2AE50; --gold-rgb: 210, 174, 80; --gold-dark: #B8963F; --surface: #FAF8F4; --surface-alt: #EDF1EE; --text: #1F2421; --text-rgb: 31, 36, 33; --text-muted: #5A625C; --border: #DDD8CE; --font-heading: 'Fraunces', Georgia, serif; --font-body: 'Figtree', system-ui, sans-serif; } /* Override delle variabili Bootstrap */ :root { --bs-body-bg: var(--surface); --bs-body-color: var(--text); --bs-body-color-rgb: var(--text-rgb); --bs-body-font-family: var(--font-body); --bs-body-font-size: 1.125rem; --bs-body-line-height: 1.65; --bs-heading-color: var(--green); --bs-link-color: var(--green); --bs-link-color-rgb: var(--green-rgb); --bs-link-hover-color: var(--gold-dark); --bs-link-hover-color-rgb: 184, 150, 63; --bs-secondary-color: var(--text-muted); --bs-border-color: var(--border); --bs-focus-ring-color: rgba(var(--gold-rgb), .35); --bs-primary: var(--green); --bs-primary-rgb: var(--green-rgb); } /* Blocchi Gutenberg a larghezza piena dentro il container */ .entry-content .alignfull, .content .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .entry-content .alignwide, .content .alignwide { width: 90vw; max-width: 1400px; margin-left: calc(50% - min(45vw, 700px)); margin-right: calc(50% - min(45vw, 700px)); } /*TITOLI*/ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-heading); font-weight: 600; } /* Il verde è troppo scuro per distinguersi dal testo senza sottolineatura */ a { text-decoration: underline; text-underline-offset: .15em; } .navbar a, .btn, .wp-block-button__link, .page-link { text-decoration: none; } /* Bootstrap compila i colori dei BOTTONI come valori letterali, non li deriva da --bs-primary */ .btn-primary, .wp-block-button .wp-block-button__link { --bs-btn-color: #fff; --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--green-dark); --bs-btn-hover-border-color: var(--green-dark); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--green-dark); --bs-btn-active-border-color: var(--green-dark); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--green); --bs-btn-disabled-border-color: var(--green); --bs-btn-focus-shadow-rgb: var(--gold-rgb); } .btn-secondary { --bs-btn-color: var(--text); --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold); --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--gold-dark); --bs-btn-hover-border-color: var(--gold-dark); --bs-btn-active-color: var(--text); --bs-btn-active-bg: var(--gold-dark); --bs-btn-active-border-color: var(--gold-dark); --bs-btn-disabled-color: var(--text); --bs-btn-disabled-bg: var(--gold); --bs-btn-disabled-border-color: var(--gold); --bs-btn-focus-shadow-rgb: var(--green-rgb); } .btn-outline-primary, .wp-block-button.is-style-outline .wp-block-button__link { --bs-btn-color: var(--green); --bs-btn-border-color: var(--green); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--green); --bs-btn-hover-border-color: var(--green); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--green); --bs-btn-active-border-color: var(--green); --bs-btn-disabled-color: var(--green); --bs-btn-disabled-border-color: var(--green); --bs-btn-focus-shadow-rgb: var(--green-rgb); } /* Usato dallo shortcode kw_single_post */ .btn-success { --bs-btn-color: #fff; --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--green-dark); --bs-btn-hover-border-color: var(--green-dark); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--green-dark); --bs-btn-active-border-color: var(--green-dark); --bs-btn-focus-shadow-rgb: var(--gold-rgb); } /* Bootstrap applica un gradiente e un'ombra interna ai bottoni + applicazione radius e padding*/ .btn, .wp-block-button .wp-block-button__link { --bs-gradient: none; --bs-btn-box-shadow: none; font-family: var(--font-heading); font-weight: 600; --bs-btn-padding-y: .625rem; --bs-btn-padding-x: 1.5rem; --bs-btn-border-radius: 2rem; --bs-btn-font-size: 1rem; } .btn-sm, .btn-lg, .wp-block-button.btn-sm .wp-block-button__link, .wp-block-button.btn-lg .wp-block-button__link { --bs-btn-border-radius: 2rem; } /*HEADER*/ /* Header */ .custom-logo { height: 100px; width: auto; } @media (max-width: 767.98px) { .custom-logo { height: 80px; } } #blocco-header { position: sticky; top: 0; z-index: 1030; } body.admin-bar #blocco-header { top: var(--wp-admin--admin-bar--height, 32px); } #header.navbar { background-color: var(--surface) !important; background-image: linear-gradient(180deg, #E8E0D2 -20%, var(--surface) 45%, var(--surface) 55%, #E8E0D2 120%); border-bottom: 2px solid var(--gold); } .navbar-nav { --bs-nav-link-color: var(--green); --bs-nav-link-hover-color: var(--green-dark); --bs-navbar-active-color: var(--gold-dark); } .navbar-nav .nav-link { font-family: var(--font-heading); font-size: 1.5rem; } /* L'icona hamburger ha il colore del tratto dentro l'SVG */ #header .navbar-toggler { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23034B35' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); border-color: rgba(var(--green-rgb), .3); } #header .navbar-toggler:focus { box-shadow: 0 0 0 .25rem rgba(var(--green-rgb), .35); } #navbar.offcanvas { background-color: var(--gold); } #navbar .btn-close { margin-left: 0; margin-right: auto; width: 1.5em; height: 1.5em; opacity: 1; padding: .75rem; } /*FOOTER*/ #footer { background-color: var(--green-dark); color: var(--surface); --bs-link-color-rgb: var(--gold-rgb); --bs-link-hover-color-rgb: 250, 248, 244; } #footer a { text-decoration: none; } #footer .footer-copy a { --bs-link-color-rgb: 250, 248, 244; --bs-link-hover-color-rgb: var(--gold-rgb); } #footer .footer-logo img { width: 150px; height: auto; } #footer .menu { list-style: none; padding-left: 0; margin-bottom: 0; } #footer .menu-item a[aria-current="page"] { color: var(--gold); } /* ===================================================================== HOME — Mission / Valori / Vision · banda pulsanti · ultimi articoli Usa i token già definiti (--green, --gold, --surface, --text, --font-heading…). (Sezione aggiunta in coda al CSS originale del child theme.) ===================================================================== */ :root { /* Token aggiuntivi */ --sand: #F3EAD3; /* crema caldo derivato dall'oro */ --sand-dark: #E6D9B8; --gold-light: #E9D28E; /* Cinture judo — accenti e varianti sezione */ --belt-white: #F5F1E8; --belt-yellow: #F2C94C; --belt-orange: #F0863A; --belt-green: #2E8B57; --belt-blue: #1F5FBF; --belt-brown: #6E4526; --belt-black: #141414; /* Assegnazione colori alle tre sezioni: cambia qui per provare */ --sec1-bg: var(--green); --sec1-fg: var(--surface); --sec1-accent: var(--gold); /* Mission */ --sec2-bg: var(--sand); --sec2-fg: var(--text); --sec2-accent: var(--green); /* Valori */ --sec3-bg: var(--belt-blue); --sec3-fg: var(--surface); --sec3-accent: var(--belt-yellow); /* Vision */ --pad-y: clamp(4rem, 10vw, 9rem); --pad-x: clamp(1.25rem, 6vw, 7rem); } /* evita lo scroll orizzontale dovuto alle sezioni a 100vw */ #main { overflow-x: clip; margin-top: 0rem!important;} /* ===================================================================== 1. MISSION / VALORI / VISION ===================================================================== */ .card.card-mission, .card.card-valori, .card.card-vision { position: relative; width: 100vw; margin: 0 0 0 calc(50% - 50vw); border: 0; border-radius: 0; padding: var(--pad-y) var(--pad-x); overflow: hidden; isolation: isolate; font-family: var(--font-body); } .card.card-mission { background: var(--sec1-bg); color: var(--sec1-fg); background-image: radial-gradient(120% 80% at 100% 0%, var(--green-dark) 0%, transparent 60%); } .card.card-valori { background: var(--sec2-bg); color: var(--sec2-fg); background-image: radial-gradient(90% 70% at 0% 100%, var(--sand-dark) 0%, transparent 60%); } .card.card-vision { background: var(--sec3-bg); color: var(--sec3-fg); background-image: radial-gradient(110% 80% at 100% 100%, rgba(0,0,0,.35) 0%, transparent 60%); } .card.card-mission > .wp-block-group__inner-container, .card.card-valori > .wp-block-group__inner-container, .card.card-vision > .wp-block-group__inner-container { max-width: 1100px; margin: 0 auto; } .card.card-mission .wp-block-group__inner-container > *, .card.card-valori .wp-block-group__inner-container > *, .card.card-vision .wp-block-group__inner-container > * { max-width: none; } /* Titolo gigante + filo oro */ .card.card-mission h2, .card.card-valori h2, .card.card-vision h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(3.5rem, 12vw, 9.5rem); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 1.5rem; display: inline-block; position: relative; } .card.card-mission h2::after, .card.card-valori h2::after, .card.card-vision h2::after { content: ""; display: block; width: 1.2em; height: .08em; margin-top: .15em; border-radius: 99px; } .card.card-mission h2 { color: var(--sec1-fg); } .card.card-mission h2::after { background: var(--sec1-accent); } .card.card-valori h2 { color: transparent; -webkit-text-stroke: 2px var(--sec2-accent); } .card.card-valori h2::after { background: var(--gold); } .card.card-vision h2 { color: var(--belt-black); } .card.card-vision h2::after { background: var(--sec3-accent); } /* Claim: prima riga dopo il titolo */ .card.card-mission h2 + p, .card.card-vision h2 + p { font-family: var(--font-heading); font-weight: 600; font-style: italic; font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.15; margin: 0 0 2rem; max-width: 18ch; } .card.card-mission h2 + p { color: var(--gold-light); } .card.card-vision h2 + p { color: var(--belt-yellow); } /* Testo corrente */ .card.card-mission p, .card.card-valori p, .card.card-vision p { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.55; max-width: 60ch; } /* Sottotitoli Valori con barra a “cintura” */ .card.card-valori h3 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.05; letter-spacing: -.02em; margin: 2.5rem 0 .75rem; color: var(--green); padding-left: .6em; border-left: .22em solid var(--belt-yellow); } .card.card-valori h3:nth-of-type(2) { border-color: var(--belt-orange); } .card.card-valori h3:nth-of-type(3) { border-color: var(--belt-blue); } /* Iniziale gigante in background */ .card.card-mission::before, .card.card-valori::before, .card.card-vision::before { position: absolute; z-index: -1; font-family: var(--font-heading); font-weight: 700; font-style: italic; font-size: clamp(16rem, 48vw, 40rem); line-height: 1; opacity: .09; pointer-events: none; user-select: none; } .card.card-mission::before { content: "M"; right: -.05em; top: -.12em; } .card.card-valori::before { content: "V"; left: -.08em; bottom: -.22em; color: var(--green); } .card.card-vision::before { content: "V"; right: -.02em; bottom: -.24em; transform: scaleX(-1); } @media (min-width: 992px) { .card.card-mission { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw)); padding-bottom: calc(var(--pad-y) + 6vw); } .card.card-valori { clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw)); margin-top: -6vw; padding-top: calc(var(--pad-y) + 6vw); padding-bottom: calc(var(--pad-y) + 6vw); } .card.card-vision { clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 100%); margin-top: -6vw; padding-top: calc(var(--pad-y) + 6vw); } .card.card-mission .wp-block-group__inner-container { margin-left: 0; padding-right: 20%; } .card.card-mission h2 { transform: rotate(-3deg) translateX(-.5rem); transform-origin: left bottom; } .card.card-valori .wp-block-group__inner-container { margin-right: 0; padding-left: 25%; } .card.card-valori h2 { transform: rotate(2deg) translateX(-8%); transform-origin: right bottom; } .card.card-valori h3:nth-of-type(2), .card.card-valori h3:nth-of-type(2) + p { margin-left: 8%; } .card.card-valori h3:nth-of-type(3), .card.card-valori h3:nth-of-type(3) + p { margin-left: 16%; } .card.card-vision .wp-block-group__inner-container { text-align: center; } .card.card-vision p { margin-left: auto; margin-right: auto; } .card.card-vision h2 { transform: rotate(-2deg) translateY(.4rem); } .card.card-vision h2 + p { max-width: 24ch; } } /* ===================================================================== 2. BANDA PULSANTI — Sedi / Corsi / Contatti ===================================================================== */ .home .wp-block-buttons { position: relative; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: clamp(3rem, 7vw, 5.5rem) var(--pad-x); justify-content: center; gap: clamp(.75rem, 2vw, 1.5rem); background-color: var(--sand-dark); /* filo oro tratteggiato sopra e sotto, come il bordo del tatami */ background-image: repeating-linear-gradient(90deg, var(--gold) 0 18px, transparent 18px 30px), repeating-linear-gradient(90deg, var(--gold) 0 18px, transparent 18px 30px); background-size: 100% 4px, 100% 4px; background-position: 0 0, 0 100%; background-repeat: no-repeat; } .home .wp-block-buttons .wp-block-button { flex: 0 1 auto; } /* sovrascrive i token --bs-btn-* impostati più sopra nel tema */ .home .wp-block-buttons .wp-block-button__link { --bs-btn-font-size: clamp(1.25rem, 2.6vw, 2rem); --bs-btn-padding-y: .55em; --bs-btn-padding-x: 1.6em; --bs-btn-border-width: 3px; --bs-btn-hover-color: var(--green); --bs-btn-hover-bg: var(--gold); --bs-btn-hover-border-color: var(--green); --bs-btn-active-color: var(--green); --bs-btn-active-bg: var(--gold-dark); --bs-btn-active-border-color: var(--green); font-family: var(--font-heading); font-weight: 700; font-size: var(--bs-btn-font-size); padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); letter-spacing: -.01em; background-color: var(--green); color: var(--surface); border: 3px solid var(--green); border-radius: 999px; box-shadow: .35em .35em 0 var(--gold); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; } .home .wp-block-buttons .wp-block-button__link:hover, .home .wp-block-buttons .wp-block-button__link:focus-visible { background-color: var(--gold); color: var(--green); transform: translate(-.15em, -.15em); box-shadow: .5em .5em 0 var(--green); } @media (min-width: 992px) { .home .wp-block-buttons .wp-block-button:nth-child(1) { transform: translateY(-.6rem) rotate(-2deg); } .home .wp-block-buttons .wp-block-button:nth-child(2) { transform: translateY(.9rem); } .home .wp-block-buttons .wp-block-button:nth-child(3) { transform: translateY(-.3rem) rotate(2deg); } } /* ===================================================================== 3. ULTIMI ARTICOLI griglia sfalsata (shortcode [st_ultimi_articoli]) ===================================================================== */ .st-news { position: relative; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: var(--pad-y) var(--pad-x); background: var(--surface); color: var(--green); font-family: var(--font-body); overflow: hidden; } .st-news__inner { max-width: 1200px; margin: 0 auto; } .st-news__head, .st-news__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 5vw, 4rem); } .st-news__foot { justify-content: center; margin-top: clamp(2rem, 5vw, 4rem); } .st-news__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.8rem, 8vw, 6rem); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; color: var(--green); margin: 0; } .st-news__title em { font-style: italic; color: var(--gold); } .st-news__all { font-weight: 700; color: var(--gold); text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: .15em; } .st-news__all:hover { color: var(--green); border-color: var(--green); } .st-news__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); } @media (min-width: 600px) { .st-news__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .st-news__grid { grid-template-columns: repeat(12, 1fr); align-items: start; } .st-news__item:nth-child(1) { grid-column: 1 / span 5; transform: rotate(-1.2deg); } .st-news__item:nth-child(2) { grid-column: 6 / span 4; margin-top: 4rem; transform: rotate(1deg); } .st-news__item:nth-child(3) { grid-column: 10 / span 3; margin-top: 1.5rem; } .st-news__item:nth-child(4) { grid-column: 3 / span 6; margin-top: -2rem; transform: rotate(.8deg); } .st-news__item:nth-child(1) .st-news__thumb { aspect-ratio: 4/3; } .st-news__item:nth-child(2) .st-news__thumb { aspect-ratio: 1; } .st-news__item:nth-child(3) .st-news__thumb { aspect-ratio: 3/4; } .st-news__item:nth-child(4) .st-news__thumb { aspect-ratio: 16/9; } } .st-news__item { position: relative; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border-radius: 1.25rem; overflow: hidden; box-shadow: .6rem .6rem 0 var(--gold); transition: transform .2s ease, box-shadow .2s ease; } .st-news__item:hover { transform: translate(-.25rem, -.25rem) rotate(0) !important; box-shadow: .9rem .9rem 0 var(--gold); } .st-news__item > a { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; } .st-news__thumb { display: block; width: 100%; aspect-ratio: 16/10; object-fit: contain; background: var(--sand-dark); } .st-news__body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; } .st-news__meta { display: flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--green); } .st-news__meta::before { content: ""; width: 1.6rem; height: .35rem; border-radius: 99px; background: var(--gold); } .st-news__item:nth-child(1) .st-news__meta::before { background: var(--belt-yellow); } .st-news__item:nth-child(2) .st-news__meta::before { background: var(--belt-orange); } .st-news__item:nth-child(3) .st-news__meta::before { background: var(--belt-green); } .st-news__item:nth-child(4) .st-news__meta::before { background: var(--belt-blue); } .st-news__item h3 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; color: var(--green); margin: 0; } .st-news__excerpt { font-size: 1rem; line-height: 1.5; margin: 0; color: var(--text-muted); } .st-news__more { margin-top: auto; padding-top: .5rem; font-weight: 700; color: var(--green); } .st-news__item:hover .st-news__more { color: var(--gold-dark); } /* ===================================================================== Animazione d'ingresso allo scroll (solo browser che la supportano) ===================================================================== */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .card.card-mission .wp-block-group__inner-container > *, .card.card-valori .wp-block-group__inner-container > *, .card.card-vision .wp-block-group__inner-container > *, .home .wp-block-buttons .wp-block-button, .st-news__item { animation: st-rise both linear; animation-timeline: view(); animation-range: entry 0% entry 35%; } } } @keyframes st-rise { from { opacity: 0; translate: 0 2.5rem; } to { opacity: 1; translate: 0 0; } } /* ===================================================================== HERO SLIDER + MENU — da accodare a style.css del child theme (dopo il blocco HOME). Usa i token esistenti + --belt-* + --sand. ===================================================================== */ /* --------------------------------------------------------------------- 0. #main a tutta larghezza SOLO in home (così le sezioni non hanno più bisogno del trucco 100vw: puoi lasciarlo, non disturba) --------------------------------------------------------------------- */ .home #main.container { max-width: none; padding-left: 0; padding-right: 0; } .home #main > .row { margin-left: 0; margin-right: 0; } .home #main > .row > .col-12 { padding-left: 0; padding-right: 0; } /* ===================================================================== 2. MENU — variante "marker oro" (desktop) + offcanvas a tutto schermo ===================================================================== */ .navbar-nav { gap: .25rem 1.5rem; } .navbar-nav .nav-link { position: relative; font-weight: 700; padding: .35rem .15rem; } /* evidenziatore oro che scivola sotto la voce */ .navbar-nav .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: .45em; z-index: -1; background: var(--gold); border-radius: 2px; transform: scaleX(0) rotate(-1.5deg); transform-origin: left center; transition: transform .22s cubic-bezier(.2,.8,.2,1); } .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { transform: scaleX(1) rotate(-1.5deg); } .navbar-nav .nav-link.active { color: var(--green-dark); } /* Hamburger: pillola verde con tre righe oro */ #header .navbar-toggler { border: 0; border-radius: 999px; background: var(--green); padding: .55rem .8rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23D2AE50' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 8h22M4 15h16M4 22h22'/%3e%3c/svg%3e"); } /* Offcanvas mobile: schermo intero verde, voci giganti numerate a cintura */ @media (max-width: 767.98px) { #navbar.offcanvas { --bs-offcanvas-width: 100vw; background: var(--green); background-image: radial-gradient(90% 60% at 100% 100%, var(--green-dark) 0%, transparent 60%); color: var(--surface); } #navbar .btn-close { filter: invert(1) sepia(1) saturate(4) hue-rotate(10deg); /* X in oro */ } #navbar .offcanvas-body { padding: 1rem 1.75rem 3rem; } #navbar .navbar-nav { gap: .25rem; counter-reset: voce; } #navbar .nav-item { counter-increment: voce; } #navbar .nav-link { font-family: var(--font-heading); font-size: clamp(2.4rem, 11vw, 3.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--surface); padding: .35rem 0 .35rem 1.6em; } #navbar .nav-link::before { content: "0" counter(voce); position: absolute; left: 0; top: .9em; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .1em; padding: .2em .6em; border-radius: 999px; color: var(--green-dark); background: var(--gold); } #navbar .nav-item:nth-child(2) .nav-link::before { background: var(--belt-yellow, #F2C94C); } #navbar .nav-item:nth-child(3) .nav-link::before { background: var(--belt-orange, #F0863A); } #navbar .nav-item:nth-child(4) .nav-link::before { background: var(--belt-blue, #1F5FBF); color: var(--surface); } #navbar .nav-link::after { display: none; } #navbar .nav-link.active { color: var(--gold); } } /* ===================================================================== HERO YIN SLIDER — da accodare a style.css (sostituisce il vecchio blocco .hero-green-card / .hero-row / .hero-image-container, che puoi rimuovere). Usa i token esistenti + --belt-* + --gold-light. ===================================================================== */ .yin-slider { position: relative; padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.5rem); background: var(--surface); } /* --- Palco: foto sotto, forma colorata mascherata sopra --- */ .yin__stage { position: relative; aspect-ratio: 5 / 3; min-height: 420px; border-radius: 2rem; overflow: hidden; isolation: isolate; background: var(--green-dark); } .yin__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .yin__shape { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-start; /* la S dello yin: due semicerchi, il verde occupa la metà sinistra */ -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .yin--green .yin__shape { background: var(--green); background-image: radial-gradient(70% 90% at 0% 100%, var(--green-dark) 0%, transparent 65%); color: var(--surface); } .yin--gold .yin__shape { background: var(--gold); background-image: radial-gradient(70% 90% at 100% 100%, var(--gold-dark) 0%, transparent 65%); color: var(--green-dark); } /* variante specchiata: forma a destra, foto a sinistra */ .yin--flip .yin__shape { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); justify-content: flex-end; } /* --- Spirale d'oro che gira piano nella parte colorata --- */ .yin__spiral { position: absolute; z-index: 0; width: 75%; aspect-ratio: 1; left: -22%; top: -25%; color: var(--gold); opacity: .28; pointer-events: none; } .yin--gold .yin__spiral { color: var(--green); opacity: .18; } .yin--flip .yin__spiral { left: auto; right: -22%; transform: scaleX(-1); } @media (prefers-reduced-motion: no-preference) { .yin__spiral { animation: yin-spin 90s linear infinite; } .yin--flip .yin__spiral { animation-name: yin-spin-flip; } } @keyframes yin-spin { to { transform: rotate(360deg); } } @keyframes yin-spin-flip { to { transform: scaleX(-1) rotate(-360deg); } } /* --- Testo --- */ .yin__text { position: relative; z-index: 1; width: 40%; padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 3.5vw, 3rem) 0; } .yin--flip .yin__text { padding-left: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(1.25rem, 3vw, 2.5rem); } .yin__kicker { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; padding: .45em 1em; border-radius: 999px; margin-bottom: 1rem; } .yin--green .yin__kicker { background: var(--gold); color: var(--green-dark); } .yin--gold .yin__kicker { background: var(--green); color: var(--surface); } .yin__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.8rem); line-height: .95; letter-spacing: -.03em; margin: 0 0 1rem; color: inherit; } .yin__title em { font-style: italic; font-weight: 600; } .yin--green .yin__title em { color: var(--gold-light, #E9D28E); } .yin--gold .yin__title em { color: var(--surface); } .yin__claim { font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.5; margin: 0 0 1.5rem; max-width: 42ch; } .yin__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; } .yin-btn { --bs-btn-font-size: 1.05rem; --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.5rem; border: 2px solid transparent; transition: transform .15s ease; } .yin-btn:hover { transform: translateY(-2px); } .yin-btn--gold { background: var(--gold); color: var(--green-dark); box-shadow: .3em .3em 0 rgba(0,0,0,.25); } .yin-btn--gold:hover { background: var(--gold-light, #E9D28E); color: var(--green-dark); } .yin-btn--green { background: var(--green); color: var(--surface); box-shadow: .3em .3em 0 var(--green-dark); } .yin-btn--green:hover { background: var(--green-dark); color: var(--surface); } .yin-btn--ghost { background: transparent; color: var(--surface); border-color: var(--surface); } .yin-btn--ghost:hover { background: var(--surface); color: var(--green); } .yin-btn--ghost-dark { background: transparent; color: var(--green-dark); border-color: var(--green-dark); } .yin-btn--ghost-dark:hover { background: var(--green-dark); color: var(--gold); } /* --- I due punti dello yin --- */ .yin__dot { position: absolute; z-index: 2; width: 15%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: var(--font-heading); font-weight: 700; line-height: 1.05; transform: translate(-50%, -50%); } /* punto chiaro dentro la parte colorata (in alto) */ .yin__dot--light { left: 63%; top: 24%; font-style: italic; font-size: clamp(.85rem, 1.5vw, 1.35rem); background: var(--surface); color: var(--green); box-shadow: 0 0 0 .35rem var(--gold); animation: yin-bob 5s ease-in-out infinite; } /* punto scuro dentro la foto (in basso) */ .yin__dot--dark { left: 37%; top: 82%; width: 11%; font-size: clamp(1.2rem, 2.4vw, 2.2rem); letter-spacing: -.03em; background: var(--green-dark); color: var(--gold); box-shadow: 0 0 0 .35rem var(--surface); } .yin__dot--dark small { font-size: .45em; opacity: .7; letter-spacing: 0; } .yin--gold .yin__dot--light { color: var(--green-dark); box-shadow: 0 0 0 .35rem var(--green); } .yin--gold .yin__dot--dark { background: var(--green); color: var(--gold); box-shadow: 0 0 0 .35rem var(--gold); } .yin--flip .yin__dot--light { left: 37%; } .yin--flip .yin__dot--dark { left: 60%; } @keyframes yin-bob { 50% { translate: 0 -6px; } } /* --- Ingresso a scaletta a ogni cambio slide --- */ @media (prefers-reduced-motion: no-preference) { .carousel-item.active .yin__kicker, .carousel-item.active .yin__title, .carousel-item.active .yin__claim, .carousel-item.active .yin__actions { animation: yin-in .6s cubic-bezier(.2,.8,.2,1) both; } .carousel-item.active .yin__title { animation-delay: .08s; } .carousel-item.active .yin__claim { animation-delay: .16s; } .carousel-item.active .yin__actions { animation-delay: .24s; } .carousel-item.active .yin__dot { animation: yin-pop .5s cubic-bezier(.2,.8,.2,1) .3s both, yin-bob 5s ease-in-out .8s infinite; } .carousel-item.active .yin__dot--dark { animation: yin-pop .5s cubic-bezier(.2,.8,.2,1) .4s both; } } @keyframes yin-in { from { opacity: 0; translate: 0 1.2rem; } to { opacity: 1; translate: 0 0; } } @keyframes yin-pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } } /* --- Controlli sotto il palco: cinture + frecce --- */ .yin-slider__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; } .yin-slider__belts { position: static; margin: 0; gap: .5rem; } .yin-slider__belts [data-bs-target] { width: 3.5rem; height: .6rem; border: 0; border-radius: 999px; margin: 0; opacity: .35; background: var(--green); transition: width .2s ease, opacity .2s ease, background .2s ease; } .yin-slider__belts .active { width: 6rem; opacity: 1; } .yin-slider__belts [data-bs-slide-to="0"].active { background: var(--green); } .yin-slider__belts [data-bs-slide-to="1"].active { background: var(--gold); } .yin-slider__arrows { display: flex; gap: .5rem; } .yin-slider__arrow { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--green); background: transparent; color: var(--green); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; } .yin-slider__arrow:hover { background: var(--green); color: var(--gold); transform: scale(1.08); } /* --- Mobile / tablet: niente maschera, foto sopra e blocco colorato sotto --- */ @media (max-width: 991.98px) { .yin__stage { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; border-radius: 1.5rem; background: transparent; } .yin__img { position: relative; aspect-ratio: 4/3; border-radius: 1.5rem 1.5rem 0 0; } .yin .yin__shape, .yin--flip .yin__shape { position: relative; inset: auto; -webkit-mask-image: none; mask-image: none; justify-content: flex-start; border-radius: 0 0 1.5rem 1.5rem; /* sul mobile lo yin diventa un'onda morbida sul bordo alto */ margin-top: -1.5rem; clip-path: ellipse(120% 100% at 50% 100%); padding-top: 1.5rem; } .yin__text, .yin--flip .yin__text { width: 100%; padding: 1.5rem 1.5rem 2rem; } .yin__dot, .carousel-item.active .yin__dot { animation: none; } .yin__spiral { width: 110%; left: 30%; top: 40%; } .yin--flip .yin__spiral { right: 30%; left: auto; } .yin__dot { width: 6rem; } .yin__dot--light, .yin--flip .yin__dot--light { left: auto; right: -1rem; top: 1.5rem; transform: rotate(-8deg); } .yin__dot--dark { display: none; } .yin__title { font-size: clamp(2.2rem, 9vw, 3rem); } .yin__actions { flex-direction: row; flex-wrap: wrap; } } /* ===================================================================== PATCH — menu (hover/attivo) e altezza hero. Accoda in fondo a style.css. Le regole qui sotto vincono su quelle precedenti, quindi non serve modificare nulla sopra. ===================================================================== */ /* ---------- MENU desktop ---------- */ /* isolation crea lo stacking context: il marker con z-index -1 resta dentro il link invece di finire dietro lo sfondo della navbar */ .navbar-nav .nav-link { isolation: isolate; color: var(--green); transition: color .2s ease; } .navbar-nav .nav-link::after { z-index: -1; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus-visible { color: var(--green-dark); } /* pagina attiva: WordPress mette .active sul link e .current-menu-item sul li */ .navbar-nav .nav-link.active, .navbar-nav .current-menu-item > .nav-link, .navbar-nav .current_page_item > .nav-link, .navbar-nav .current-menu-ancestor > .nav-link { color: var(--green-dark); } .navbar-nav .nav-link.active::after, .navbar-nav .current-menu-item > .nav-link::after, .navbar-nav .current_page_item > .nav-link::after, .navbar-nav .current-menu-ancestor > .nav-link::after { transform: scaleX(1) rotate(-1.5deg); background: var(--gold); } /* al passaggio il marker della voce attiva scurisce, così si distingue dal hover */ .navbar-nav .nav-link.active:hover::after, .navbar-nav .current-menu-item > .nav-link:hover::after { background: var(--gold-dark); } /* ---------- HERO: meno spazio sopra, altezza con tetto ---------- */ .yin-slider { padding-top: clamp(.5rem, 1.5vw, 1.25rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); } @media (min-width: 992px) { .yin__stage { /* altezza guidata dalla viewport, larghezza sempre piena: ~5:3 finché ci sta, poi si ferma sotto l'header */ aspect-ratio: auto; width: 100%; height: clamp(400px, 52vw, min(640px, 100svh - 200px)); } body.admin-bar .yin__stage { height: clamp(400px, 52vw, min(640px, 100svh - 232px)); } /* con l'altezza tappata il testo va ridimensionato di conseguenza */ .yin__text { padding-top: clamp(1.5rem, 3.5vw, 3rem); } .yin__title { font-size: clamp(1.9rem, 3.6vw, 3.4rem); } .yin__claim { font-size: clamp(.95rem, 1.2vw, 1.15rem); margin-bottom: 1.1rem; } .yin-btn { --bs-btn-font-size: 1rem; --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.3rem; } } .yin-slider__controls { margin-top: .75rem; } /* ===================================================================== PAGINE INTERNE (Chi siamo, Sedi, Contatti…) + ARTICOLI Da accodare in fondo a style.css. main è .full-container, quindi il contenitore del testo lo crea questo CSS. Usa i token del tema. ===================================================================== */ :root { --st-measure: 72ch; /* larghezza massima del testo corrente */ --st-wide: 1140px; /* larghezza dei layout a colonne */ --st-gutter: clamp(1.25rem, 4vw, 2.5rem); } /* la .row di Bootstrap ha margini negativi: a tutta larghezza farebbe scroll */ #main > .row { margin-left: 0; margin-right: 0; } #main > .row > .col-12 { padding-left: 0; padding-right: 0; } /* ===================================================================== 1. TESTATA — h1 in fascia verde a tutta larghezza ===================================================================== */ body:not(.home) .page-title, body:not(.home) h1.entry-title { position: relative; isolation: isolate; overflow: hidden; /* a tutta larghezza anche se sta dentro l'article centrato */ width: 100vw; margin: 0 0 clamp(2rem, 5vw, 4rem) calc(50% - 50vw); padding: clamp(3rem, 8vw, 6rem) var(--st-gutter) clamp(2.5rem, 6vw, 4.5rem); background: var(--green); background-image: radial-gradient(110% 90% at 100% 0%, var(--green-dark) 0%, transparent 60%); color: var(--surface); font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: .92; letter-spacing: -.03em; text-transform: uppercase; } /* rientro allineato al contenitore del testo */ body:not(.home) .page-title::after, body:not(.home) h1.entry-title::after { content: ""; display: block; width: 1.1em; height: .08em; margin-top: .2em; border-radius: 99px; background: var(--gold); } /* filo oro "tatami" sul bordo basso della fascia */ body:not(.home) .page-title::before, body:not(.home) h1.entry-title::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--gold) 0 18px, transparent 18px 30px); } @media (min-width: 992px) { body:not(.home) .page-title, body:not(.home) h1.entry-title { /* testo allineato al bordo sinistro del contenuto sottostante */ padding-left: max(var(--st-gutter), calc((100vw - var(--st-wide)) / 2 + var(--st-gutter))); padding-right: var(--st-gutter); /* taglio diagonale come le sezioni della home */ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2.5vw)); padding-bottom: calc(clamp(2.5rem, 6vw, 4.5rem) + 2.5vw); } /* con il taglio diagonale il filo oro in basso verrebbe tagliato: via */ body:not(.home) .page-title::before, body:not(.home) h1.entry-title::before { display: none; } } /* ===================================================================== 2. CONTENITORE DEL CONTENUTO ===================================================================== */ body:not(.home) article.content { padding: 0 var(--st-gutter) clamp(3rem, 7vw, 5rem); max-width: var(--st-wide); margin: 0 auto; } /* testo a misura di lettura, colonne/immagini larghe possono uscire */ body:not(.home) article.content > p, body:not(.home) article.content > ul, body:not(.home) article.content > ol, body:not(.home) article.content > h2, body:not(.home) article.content > h3, body:not(.home) article.content > h4, body:not(.home) article.content > blockquote, body:not(.home) article.content > .wp-block-group, body:not(.home) article.content > .wp-block-quote { max-width: var(--st-measure); } body:not(.home) article.content p { font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.7; } body:not(.home) article.content p:empty { display: none; } /* Titoli di sezione con barra cintura-oro */ body:not(.home) article.content h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.05; letter-spacing: -.02em; color: var(--green); margin: 2.5rem 0 1rem; padding-left: .55em; border-left: .22em solid var(--gold); } body:not(.home) article.content h2:first-child, body:not(.home) article.content .wp-block-group__inner-container > h2:first-child { margin-top: 0; } body:not(.home) article.content h3 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.8rem); color: var(--green-dark); margin: 2rem 0 .6rem; } body:not(.home) article.content strong { color: var(--green-dark); } /* Citazioni: il corsivo isolato (come "You are Tidal") e il blocco quote */ body:not(.home) article.content p > em:only-child { display: block; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.15; color: var(--green); padding: .4em 0 .4em 1em; margin: .5rem 0; border-left: .18em solid var(--gold); position: relative; } body:not(.home) article.content p > em:only-child::before { content: "\201C"; position: absolute; left: .15em; top: -.15em; font-size: 2.2em; line-height: 1; color: var(--gold); opacity: .8; } body:not(.home) article.content blockquote, body:not(.home) article.content .wp-block-quote { margin: 2rem 0; padding: 1.5rem 2rem; background: var(--sand, #F3EAD3); border-left: .3rem solid var(--gold); border-radius: 0 1.25rem 1.25rem 0; font-family: var(--font-heading); font-size: 1.25rem; } /* Liste con puntino oro */ body:not(.home) article.content ul { padding-left: 1.3em; } body:not(.home) article.content ul li::marker { color: var(--gold); } /* Immagini: cornice arrotondata, ombra piatta oro, leggera rotazione */ body:not(.home) article.content .wp-block-image img, body:not(.home) article.content figure img { border-radius: 1.25rem; box-shadow: .6rem .6rem 0 var(--gold); width: 100%; height: auto; } body:not(.home) article.content .wp-block-image figure, body:not(.home) article.content figure.wp-block-image { margin: 0 .6rem 1.5rem 0; } @media (min-width: 782px) { body:not(.home) article.content .wp-block-column .wp-block-image { transform: rotate(-1.5deg); } body:not(.home) article.content .wp-block-column:last-child .wp-block-image { transform: rotate(1.5deg); } } body:not(.home) article.content figcaption { font-family: var(--font-body); font-size: .85rem; color: var(--text-muted); text-align: center; margin-top: 1rem; } /* loghi/PNG con trasparenza: niente ombra */ body:not(.home) article.content img[src$=".png"] { box-shadow: none; border-radius: 0; } /* Colonne: più respiro e gruppo con sfondo crema quando ha un titolo */ body:not(.home) article.content .wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem); margin-bottom: clamp(2rem, 5vw, 3.5rem); } body:not(.home) article.content .wp-block-column .wp-block-group { max-width: none; } body:not(.home) article.content .wp-block-column > .wp-block-group > .wp-block-group__inner-container > * { max-width: none; } /* ===================================================================== 3. ARTICOLI (single post) ===================================================================== */ body.single .page-title, body.single h1.entry-title { text-transform: none; font-size: clamp(2.2rem, 6vw, 5rem); } /* meta: data / categoria / autore — classi più comuni dei temi Bootstrap */ body.single .entry-meta, body.single .post-meta, body.single .byline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-family: var(--font-body); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--green); margin: -1rem 0 2rem; } body.single .entry-meta::before, body.single .post-meta::before, body.single .byline::before { content: ""; width: 1.6rem; height: .35rem; border-radius: 99px; background: var(--gold); } body.single .entry-meta a, body.single .post-meta a { text-decoration: none; } /* immagine in evidenza */ body.single .post-thumbnail img, body.single img.wp-post-image { width: 100%; height: auto; aspect-ratio: 16/8; object-fit: cover; border-radius: 1.5rem; box-shadow: .8rem .8rem 0 var(--gold); margin: 0 .8rem 2.5rem 0; } /* capolettera sul primo paragrafo dell'articolo */ body.single article.content > p:first-of-type::first-letter { font-family: var(--font-heading); font-weight: 700; font-size: 3.6em; line-height: .8; float: left; color: var(--green); padding: .1em .12em 0 0; } /* tag e categorie in fondo */ body.single .tags-links a, body.single .cat-links a, body.single .post-tags a { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .35em .9em; margin: .25rem .25rem 0 0; border-radius: 999px; background: var(--sand, #F3EAD3); color: var(--green); text-decoration: none; } body.single .tags-links a:hover, body.single .cat-links a:hover { background: var(--gold); color: var(--green-dark); } /* navigazione articolo precedente / successivo */ body.single .post-navigation, body.single .nav-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 4px solid transparent; border-image: repeating-linear-gradient(90deg, var(--gold) 0 18px, transparent 18px 30px) 1; } body.single .post-navigation a, body.single .nav-links a { font-family: var(--font-heading); font-weight: 700; text-decoration: none; color: var(--green); } body.single .post-navigation a:hover, body.single .nav-links a:hover { color: var(--gold-dark); } /* badge "Modifica" dell'editor: discreto */ .edit-link { display: block; margin-top: 2rem; } /* ===================================================================== 4. ARCHIVIO / BLOG (elenco articoli) — riusa le card della home ===================================================================== */ body.blog article.content, body.archive article.content { padding-bottom: 0; } /* ===================================================================== CONTATTI · CORSI · SEDI — da accodare a style.css (dopo pagine-interne) ===================================================================== */ /* intro comune sotto il titolo */ .st-intro { font-family: var(--font-heading); font-weight: 600; font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.9rem) !important; line-height: 1.25 !important; color: var(--green); max-width: 30ch; margin: 0 0 clamp(2rem, 5vw, 3.5rem); } /* ===================================================================== CONTATTI — tre card sfalsate ===================================================================== */ .st-contact { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: 2rem; } @media (min-width: 992px) { .st-contact { grid-template-columns: repeat(12, 1fr); align-items: start; } .st-contact__card--wa { grid-column: 1 / span 5; transform: rotate(-1deg); } .st-contact__card--mail { grid-column: 6 / span 4; margin-top: 3rem; transform: rotate(1deg); } .st-contact__card--form { grid-column: 3 / span 8; margin-top: 1rem; } } .st-contact__card { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 1.5rem; box-shadow: .6rem .6rem 0 var(--gold); overflow: hidden; } .st-contact__card h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important; line-height: 1.05; letter-spacing: -.02em; border: 0 !important; padding: 0 !important; margin: .25rem 0 .75rem !important; color: inherit !important; } .st-contact__card p { margin: 0 0 1.25rem; max-width: 40ch; font-size: 1.05rem !important; } .st-contact__kicker { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; padding: .4em .9em; border-radius: 999px; } .st-contact__icon { position: absolute; right: 1.5rem; top: 1.5rem; opacity: .9; } .st-contact__btn { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; padding: .7em 1.5em; border-radius: 999px; text-decoration: none !important; transition: transform .15s ease, background .15s ease, color .15s ease; } .st-contact__btn:hover { transform: translateY(-2px); } .st-contact__note { display: block; margin-top: .9rem; font-size: .85rem; opacity: .85; } .st-contact__card--wa { background: var(--green); color: var(--surface); background-image: radial-gradient(90% 90% at 100% 100%, var(--green-dark) 0%, transparent 60%); } .st-contact__card--wa .st-contact__kicker { background: var(--belt-green, #2E8B57); color: var(--surface); } .st-contact__card--wa .st-contact__icon { color: var(--gold); } .st-contact__card--wa .st-contact__btn { background: var(--gold); color: var(--green-dark); } .st-contact__card--wa .st-contact__btn:hover { background: var(--gold-light, #E9D28E); } .st-contact__card--mail { background: var(--gold); color: var(--green-dark); background-image: radial-gradient(90% 90% at 0% 100%, var(--gold-dark) 0%, transparent 60%); box-shadow: .6rem .6rem 0 var(--green); } .st-contact__card--mail .st-contact__kicker { background: var(--green); color: var(--surface); } .st-contact__card--mail .st-contact__icon { color: var(--green); } .st-contact__card--mail .st-contact__btn { background: var(--green); color: var(--surface); } .st-contact__card--mail .st-contact__btn:hover { background: var(--green-dark); } .st-contact__card--form { background: var(--sand, #F3EAD3); color: var(--text); } .st-contact__card--form .st-contact__kicker { background: var(--surface); color: var(--green); } .st-contact__card--form h2 { color: var(--green) !important; } /* ---- form ---- */ .st-form { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 600px) { .st-form { grid-template-columns: 1fr 1fr; } } .st-form__hp { position: absolute; left: -9999px; } .st-form__field { display: flex; flex-direction: column; gap: .35rem; } .st-form__field--full, .st-form__choice, .st-form__consent, .st-form__submit { grid-column: 1 / -1; } .st-form__field > span, .st-form__choice legend { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--green); } .st-form__field small { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; } .st-form input[type="text"], .st-form input[type="tel"], .st-form input[type="email"], .st-form textarea { width: 100%; font: inherit; font-size: 1rem; padding: .75rem 1rem; border-radius: .9rem; border: 2px solid var(--border); background: var(--surface); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; } .st-form input:focus, .st-form textarea:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 .25rem rgba(var(--gold-rgb), .35); } .st-form__choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .st-form__choice legend { width: 100%; margin-bottom: .35rem; float: left; } .st-form__choice label { position: relative; } .st-form__choice input { position: absolute; opacity: 0; inset: 0; } .st-form__choice span { display: inline-block; padding: .5em 1.1em; border-radius: 999px; border: 2px solid var(--green); color: var(--green); font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .15s ease, color .15s ease; } .st-form__choice input:checked + span { background: var(--green); color: var(--surface); } .st-form__choice input:focus-visible + span { box-shadow: 0 0 0 .25rem rgba(var(--gold-rgb), .5); } .st-form__consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; } .st-form__consent input { margin-top: .3em; accent-color: var(--green); width: 1.1em; height: 1.1em; } .st-form__submit { justify-self: start; --bs-btn-font-size: 1.1rem; --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.75rem; background: var(--green); color: var(--surface); border: 0; border-radius: 999px; font-family: var(--font-heading); font-weight: 700; box-shadow: .35em .35em 0 var(--gold); transition: transform .15s ease, box-shadow .15s ease; } .st-form__submit:hover { background: var(--green-dark); color: var(--surface); transform: translate(-.1em, -.1em); box-shadow: .45em .45em 0 var(--gold); } .st-form__ok, .st-form__err { padding: 1rem 1.25rem; border-radius: 1rem; font-weight: 700; } .st-form__ok { background: var(--green); color: var(--surface); } .st-form__err { background: #fff; color: #b3261e; border: 2px solid #b3261e; margin-bottom: 1rem; } /* ===================================================================== CORSI — due fasce a tutta larghezza (bambini / adulti) ===================================================================== */ .st-band { position: relative; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: clamp(3rem, 7vw, 6rem) var(--st-gutter); overflow: hidden; isolation: isolate; } .st-band__inner { max-width: var(--st-wide); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 992px) { .st-band__inner { grid-template-columns: 7fr 5fr; gap: 4rem; } .st-band--adults .st-band__inner { grid-template-columns: 5fr 7fr; } .st-band--adults .st-band__text { order: 2; } .st-band--adults .st-band__media { order: 1; } /* la fascia adulti sale sopra quella bambini con il bordo tagliato in diagonale */ .st-band--adults { margin-top: -4vw; padding-top: calc(clamp(3rem, 7vw, 6rem) + 4vw); clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); } } .st-band--kids { background: var(--belt-yellow, #F2C94C); color: var(--green-dark); background-image: radial-gradient(80% 90% at 100% 0%, var(--gold) 0%, transparent 60%); } .st-band--adults { background: var(--green); color: var(--surface); background-image: radial-gradient(80% 90% at 0% 100%, var(--green-dark) 0%, transparent 60%); } /* iniziale gigante come in home */ .st-band::before { position: absolute; z-index: -1; pointer-events: none; font-family: var(--font-heading); font-weight: 700; font-style: italic; font-size: clamp(14rem, 40vw, 32rem); line-height: 1; opacity: .08; } .st-band--kids::before { content: "B"; right: -.05em; bottom: -.25em; } .st-band--adults::before { content: "A"; left: -.05em; top: -.15em; } .st-band__kicker { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; padding: .45em 1em; border-radius: 999px; margin-bottom: 1rem; } .st-band--kids .st-band__kicker { background: var(--green); color: var(--surface); } .st-band--adults .st-band__kicker { background: var(--gold); color: var(--green-dark); } .st-band__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.4rem, 6vw, 5rem) !important; line-height: .95; letter-spacing: -.03em; border: 0 !important; padding: 0 !important; margin: 0 0 1rem !important; color: inherit !important; } .st-band__title em { font-style: italic; font-weight: 600; } .st-band--kids .st-band__title em { color: var(--green); } .st-band--adults .st-band__title em { color: var(--gold-light, #E9D28E); } .st-band__lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important; line-height: 1.5 !important; max-width: 48ch; margin: 0 0 1.25rem; } .st-band__list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .5rem; max-width: 48ch; } .st-band__list li { padding-left: 1.6rem; position: relative; font-size: 1.05rem; } .st-band__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 1rem; height: .35rem; border-radius: 99px; background: currentColor; opacity: .7; } .st-band--kids .st-band__list li::before { background: var(--green); } .st-band--adults .st-band__list li::before { background: var(--gold); } .st-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; } .st-band__btn { font-family: var(--font-heading); font-weight: 700; border-radius: 999px; border: 0; transition: transform .15s ease; } .st-band__btn:hover { transform: translateY(-2px); } .st-band--kids .st-band__btn { background: var(--green); color: var(--surface); box-shadow: .3em .3em 0 var(--green-dark); } .st-band--kids .st-band__btn:hover { background: var(--green-dark); color: var(--surface); } .st-band--adults .st-band__btn { background: var(--gold); color: var(--green-dark); box-shadow: .3em .3em 0 rgba(0,0,0,.3); } .st-band--adults .st-band__btn:hover { background: var(--gold-light, #E9D28E); color: var(--green-dark); } .st-band__link { font-weight: 700; color: inherit; text-decoration: none; border-bottom: 2px solid currentColor; } .st-band__link:hover { color: inherit; opacity: .75; } .st-band__media { position: relative; margin: 0; transform: rotate(2deg); } .st-band--adults .st-band__media { transform: rotate(-2deg); } .st-band__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 1.5rem; box-shadow: .8rem .8rem 0 var(--green); } .st-band--adults .st-band__media img { box-shadow: .8rem .8rem 0 var(--gold); } body:not(.home) article.content .st-band__sticker, .st-band__sticker { position: absolute; left: -1rem; bottom: 1.5rem; transform: rotate(-6deg); font-family: var(--font-heading); font-weight: 700; font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); background: var(--surface); color: var(--green); padding: .4em 1em; border-radius: 999px; box-shadow: .25em .25em 0 var(--green); text-align: left; margin: 0; } .st-band__sticker--gold { background: var(--gold); color: var(--green-dark); box-shadow: .25em .25em 0 var(--green-dark); } @media (max-width: 991.98px) { .st-band__media { max-width: 420px; margin-inline: auto; } .st-band__media img { aspect-ratio: 4/3; } } /* le fasce ignorano il limite di larghezza del testo delle pagine interne */ body:not(.home) article.content .st-band p, body:not(.home) article.content .st-band ul { max-width: none; } /* ===================================================================== SEDI — due card alternate con mappa ===================================================================== */ .st-venues { display: grid; gap: clamp(2rem, 5vw, 4rem); margin-bottom: 2rem; } .st-venue { display: grid; grid-template-columns: 1fr; gap: 0; border-radius: 1.75rem; overflow: hidden; background: var(--surface); box-shadow: .8rem .8rem 0 var(--gold); } @media (min-width: 992px) { .st-venue { grid-template-columns: 6fr 5fr; transform: rotate(-.8deg); } .st-venue--alt { transform: rotate(.8deg); } .st-venue--alt .st-venue__map { order: 2; } .st-venue--alt .st-venue__body { order: 1; } .st-venue--alt { box-shadow: -.8rem .8rem 0 var(--green); } } .st-venue__map { position: relative; min-height: 280px; background: var(--sand, #F3EAD3); } .st-venue__map img, .st-venue__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0 !important; box-shadow: none !important; } .st-venue__body { padding: clamp(1.75rem, 3.5vw, 3rem); } .st-venue__kicker { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; padding: .4em .9em; border-radius: 999px; background: var(--gold); color: var(--green-dark); margin-bottom: .75rem; } .st-venue--alt .st-venue__kicker { background: var(--green); color: var(--surface); } .st-venue__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 4vw, 3.4rem) !important; line-height: .95; letter-spacing: -.03em; border: 0 !important; padding: 0 !important; margin: 0 0 .75rem !important; color: var(--green) !important; } .st-venue__address { font-size: 1.05rem !important; line-height: 1.5 !important; margin: 0 0 1.25rem; color: var(--text-muted); } .st-venue__hours { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: var(--sand, #F3EAD3); border-radius: 1rem; font-size: .95rem; } .st-venue__hours dt { font-weight: 700; color: var(--green); } .st-venue__hours dd { margin: 0; } .st-venue__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; } .st-venue__btn { font-family: var(--font-heading); font-weight: 700; border-radius: 999px; border: 0; background: var(--green); color: var(--surface); box-shadow: .3em .3em 0 var(--gold); transition: transform .15s ease; } .st-venue__btn:hover { background: var(--green-dark); color: var(--surface); transform: translateY(-2px); } .st-venue__link { font-weight: 700; color: var(--green); text-decoration: none; border-bottom: 2px solid var(--gold); } .st-venue__link:hover { color: var(--gold-dark); } /* ===================================================================== VITA DELL'ASSOCIAZIONE + ARTICOLO CONSIGLIO — da accodare a style.css ===================================================================== */ /* titolo di sezione riutilizzabile (con barra oro come gli h2 interni) */ .st-section-title { margin-top: 0 !important; } /* ---- avviso "in arrivo" e CTA (articolo consiglio) ---- */ .st-notice { position: relative; overflow: hidden; background: var(--sand, #F3EAD3); border-radius: 1.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); margin: 2rem 0; box-shadow: .6rem .6rem 0 var(--gold); } .st-notice::before { content: "→"; position: absolute; right: -.1em; bottom: -.35em; z-index: 0; font-family: var(--font-heading); font-weight: 700; font-size: 9rem; line-height: 1; color: var(--gold); opacity: .25; pointer-events: none; } .st-notice > * { position: relative; z-index: 1; } .st-notice__kicker, .st-why__kicker, .st-channel__kicker { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; padding: .4em .9em; border-radius: 999px; margin-bottom: .75rem; } .st-notice__kicker { background: var(--green); color: var(--surface); } .st-notice h2 { border: 0 !important; padding: 0 !important; margin: 0 0 .5rem !important; } .st-notice p { margin: 0; } .st-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 2rem 0; } .st-cta__btn { --bs-btn-font-size: 1.15rem; --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.75rem; background: var(--green); color: var(--surface); border: 0; border-radius: 999px; font-family: var(--font-heading); font-weight: 700; box-shadow: .35em .35em 0 var(--gold); transition: transform .15s ease; } .st-cta__btn:hover { background: var(--green-dark); color: var(--surface); transform: translate(-.1em, -.1em); } .st-cta__note { font-size: .9rem; color: var(--text-muted); max-width: 32ch; } /* ---- documenti ---- */ .st-docs { margin-bottom: clamp(2.5rem, 6vw, 4rem); } .st-docs__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; max-width: 60rem; } .st-docs__list li a, .st-docs__soon { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; row-gap: .15rem; padding: 1rem 1.25rem 1rem 1.5rem; background: var(--surface); border-radius: 1rem; border: 2px solid var(--border); border-left: .4rem solid var(--gold); text-decoration: none !important; color: var(--text); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .st-docs__list li a:hover { transform: translateX(.25rem); border-color: var(--green); border-left-color: var(--green); box-shadow: .4rem .4rem 0 var(--gold); } .st-docs__list li:nth-child(2) a { border-left-color: var(--belt-yellow, #F2C94C); } .st-docs__list li:nth-child(3) a { border-left-color: var(--belt-orange, #F0863A); } .st-docs__list li:nth-child(4) a { border-left-color: var(--belt-green, #2E8B57); } .st-docs__list li:nth-child(5) a { border-left-color: var(--belt-blue, #1F5FBF); } .st-docs__list li:nth-child(6) a { border-left-color: var(--belt-brown, #6E4526); } .st-docs__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--green); } .st-docs__list li a::after { content: "PDF ↓"; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--gold-dark); } .st-docs__meta { font-size: .85rem; color: var(--text-muted); grid-column: 1; } .st-docs__list li a::after { grid-column: 2; grid-row: 1 / span 2; } .st-docs__soon { border-style: dashed; border-left-style: solid; border-left-color: var(--border); opacity: .8; } .st-docs__soon .st-docs__name { color: var(--text-muted); } /* ---- fascia "perché conta" ---- */ .st-why { position: relative; width: 100vw; margin: 0 0 clamp(2.5rem, 6vw, 4rem) calc(50% - 50vw); padding: clamp(3rem, 7vw, 5.5rem) var(--st-gutter); background: var(--green); color: var(--surface); background-image: radial-gradient(90% 90% at 100% 0%, var(--green-dark) 0%, transparent 60%); overflow: hidden; isolation: isolate; } .st-why::before { content: "!"; position: absolute; z-index: -1; right: .05em; top: -.2em; font-family: var(--font-heading); font-weight: 700; font-style: italic; font-size: clamp(14rem, 36vw, 28rem); line-height: 1; color: var(--gold); opacity: .12; } .st-why__inner { max-width: var(--st-wide); margin: 0 auto; } .st-why__kicker { background: var(--gold); color: var(--green-dark); } .st-why__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.2rem, 5.5vw, 4.5rem) !important; line-height: .95; letter-spacing: -.03em; border: 0 !important; padding: 0 !important; margin: 0 0 1rem !important; color: inherit !important; max-width: 16ch; } .st-why__title em { font-style: italic; font-weight: 600; color: var(--gold-light, #E9D28E); } .st-why p { font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important; line-height: 1.55 !important; max-width: 60ch !important; margin: 0; } @media (min-width: 992px) { .st-why { clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%); padding-top: calc(clamp(3rem, 7vw, 5.5rem) + 3vw); padding-bottom: calc(clamp(3rem, 7vw, 5.5rem) + 3vw); } } /* ---- tre canali ---- */ .st-channels { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: 2rem; } @media (min-width: 992px) { .st-channels { grid-template-columns: repeat(3, 1fr); align-items: start; } .st-channel--safe { transform: rotate(-1deg); } .st-channel--quality { margin-top: 2.5rem; } .st-channel--ideas { transform: rotate(1deg); margin-top: 1rem; } } .st-channel { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 1.5rem; display: flex; flex-direction: column; gap: .75rem; } .st-channel h3 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; line-height: 1.05; letter-spacing: -.02em; margin: 0 !important; color: inherit !important; } .st-channel p { margin: 0; font-size: 1rem !important; line-height: 1.55 !important; } .st-channel__who { font-size: .95rem !important; } .st-channel__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin-top: .5rem; } .st-channel__btn { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; padding: .7em 1.4em; border-radius: 999px; text-decoration: none !important; transition: transform .15s ease; max-width: 100%; overflow-wrap: anywhere; } .st-channel__btn:hover { transform: translateY(-2px); } .st-channel__link { font-weight: 700; color: inherit; text-decoration: none; border-bottom: 2px solid currentColor; } .st-channel__link:hover { color: inherit; opacity: .75; } .st-channel__small { font-size: .85rem !important; opacity: .85; margin-top: auto !important; padding-top: .5rem; } .st-channel--safe { background: var(--green); color: var(--surface); box-shadow: .6rem .6rem 0 var(--gold); background-image: radial-gradient(90% 90% at 100% 100%, var(--green-dark) 0%, transparent 60%); } .st-channel--safe .st-channel__kicker { background: var(--gold); color: var(--green-dark); } .st-channel--safe .st-channel__btn { background: var(--gold); color: var(--green-dark); } .st-channel--safe strong { color: var(--gold-light, #E9D28E); } .st-channel--quality { background: var(--gold); color: var(--green-dark); box-shadow: .6rem .6rem 0 var(--green); background-image: radial-gradient(90% 90% at 0% 100%, var(--gold-dark) 0%, transparent 60%); } .st-channel--quality .st-channel__kicker { background: var(--green); color: var(--surface); } .st-channel--quality .st-channel__btn { background: var(--green); color: var(--surface); } .st-channel--ideas { background: var(--sand, #F3EAD3); color: var(--text); box-shadow: .6rem .6rem 0 var(--gold); } .st-channel--ideas .st-channel__kicker { background: var(--surface); color: var(--green); } .st-channel--ideas h3 { color: var(--green) !important; } .st-channel--ideas .st-channel__btn { background: var(--green); color: var(--surface); } .st-channel--ideas .st-channel__link { color: var(--green); border-color: var(--gold); } /* ===================================================================== VITA DELL'ASSOCIAZIONE + ARTICOLO CONSIGLIO — da accodare a style.css ===================================================================== */ /* titolo di sezione riutilizzabile (con barra oro come gli h2 interni) */ .st-section-title { margin-top: 0 !important; } /* ---- avviso "in arrivo" e CTA (articolo consiglio) ---- */ .st-notice { position: relative; overflow: hidden; background: var(--sand, #F3EAD3); border-radius: 1.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); margin: 2rem 0; box-shadow: .6rem .6rem 0 var(--gold); } .st-notice::before { content: "→"; position: absolute; right: -.1em; bottom: -.35em; z-index: 0; font-family: var(--font-heading); font-weight: 700; font-size: 9rem; line-height: 1; color: var(--gold); opacity: .25; pointer-events: none; } .st-notice > * { position: relative; z-index: 1; } .st-notice__kicker, .st-why__kicker, .st-channel__kicker { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; padding: .4em .9em; border-radius: 999px; margin-bottom: .75rem; } .st-notice__kicker { background: var(--green); color: var(--surface); } .st-notice h2 { border: 0 !important; padding: 0 !important; margin: 0 0 .5rem !important; } .st-notice p { margin: 0; } .st-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 2rem 0; } .st-cta__btn { --bs-btn-font-size: 1.15rem; --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.75rem; background: var(--green); color: var(--surface); border: 0; border-radius: 999px; font-family: var(--font-heading); font-weight: 700; box-shadow: .35em .35em 0 var(--gold); transition: transform .15s ease; } .st-cta__btn:hover { background: var(--green-dark); color: var(--surface); transform: translate(-.1em, -.1em); } .st-cta__note { font-size: .9rem; color: var(--text-muted); max-width: 32ch; } /* ---- documenti ---- */ .st-docs { margin-bottom: clamp(2.5rem, 6vw, 4rem); } .st-docs__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; max-width: 60rem; } .st-docs__list li a, .st-docs__soon { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; row-gap: .15rem; padding: 1rem 1.25rem 1rem 1.5rem; background: var(--surface); border-radius: 1rem; border: 2px solid var(--border); border-left: .4rem solid var(--gold); text-decoration: none !important; color: var(--text); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .st-docs__list li a:hover { transform: translateX(.25rem); border-color: var(--green); border-left-color: var(--green); box-shadow: .4rem .4rem 0 var(--gold); } .st-docs__list li:nth-child(2) a { border-left-color: var(--belt-yellow, #F2C94C); } .st-docs__list li:nth-child(3) a { border-left-color: var(--belt-orange, #F0863A); } .st-docs__list li:nth-child(4) a { border-left-color: var(--belt-green, #2E8B57); } .st-docs__list li:nth-child(5) a { border-left-color: var(--belt-blue, #1F5FBF); } .st-docs__list li:nth-child(6) a { border-left-color: var(--belt-brown, #6E4526); } .st-docs__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--green); } .st-docs__list li a::after { content: "PDF ↓"; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--gold-dark); } .st-docs__meta { font-size: .85rem; color: var(--text-muted); grid-column: 1; } .st-docs__list li a::after { grid-column: 2; grid-row: 1 / span 2; } .st-docs__soon { border-style: dashed; border-left-style: solid; border-left-color: var(--border); opacity: .8; } .st-docs__soon .st-docs__name { color: var(--text-muted); } /* ---- fascia "perché conta" ---- */ .st-why { position: relative; width: 100vw; margin: 0 0 clamp(2.5rem, 6vw, 4rem) calc(50% - 50vw); padding: clamp(3rem, 7vw, 5.5rem) var(--st-gutter); background: var(--green); color: var(--surface); background-image: radial-gradient(90% 90% at 100% 0%, var(--green-dark) 0%, transparent 60%); overflow: hidden; isolation: isolate; } .st-why::before { content: "!"; position: absolute; z-index: -1; right: .05em; top: -.2em; font-family: var(--font-heading); font-weight: 700; font-style: italic; font-size: clamp(14rem, 36vw, 28rem); line-height: 1; color: var(--gold); opacity: .12; } .st-why__inner { max-width: var(--st-wide); margin: 0 auto; } .st-why__kicker { background: var(--gold); color: var(--green-dark); } .st-why__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.2rem, 5.5vw, 4.5rem) !important; line-height: .95; letter-spacing: -.03em; border: 0 !important; padding: 0 !important; margin: 0 0 1rem !important; color: inherit !important; max-width: 16ch; } .st-why__title em { font-style: italic; font-weight: 600; color: var(--gold-light, #E9D28E); } .st-why p { font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important; line-height: 1.55 !important; max-width: 60ch !important; margin: 0; } @media (min-width: 992px) { .st-why { clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%); padding-top: calc(clamp(3rem, 7vw, 5.5rem) + 3vw); padding-bottom: calc(clamp(3rem, 7vw, 5.5rem) + 3vw); } } /* ---- tre canali ---- */ .st-channels { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: 2rem; } @media (min-width: 992px) { .st-channels { grid-template-columns: repeat(3, 1fr); align-items: start; } .st-channel--safe { transform: rotate(-1deg); } .st-channel--quality { margin-top: 2.5rem; } .st-channel--ideas { transform: rotate(1deg); margin-top: 1rem; } } .st-channel { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 1.5rem; display: flex; flex-direction: column; gap: .75rem; } .st-channel h3 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; line-height: 1.05; letter-spacing: -.02em; margin: 0 !important; color: inherit !important; } .st-channel p { margin: 0; font-size: 1rem !important; line-height: 1.55 !important; } .st-channel__who { font-size: .95rem !important; } .st-channel__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin-top: .5rem; } .st-channel__btn { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; padding: .7em 1.4em; border-radius: 999px; text-decoration: none !important; transition: transform .15s ease; max-width: 100%; overflow-wrap: anywhere; } .st-channel__btn:hover { transform: translateY(-2px); } .st-channel__link { font-weight: 700; color: inherit; text-decoration: none; border-bottom: 2px solid currentColor; } .st-channel__link:hover { color: inherit; opacity: .75; } .st-channel__small { font-size: .85rem !important; opacity: .85; margin-top: auto !important; padding-top: .5rem; } .st-channel--safe { background: var(--green); color: var(--surface); box-shadow: .6rem .6rem 0 var(--gold); background-image: radial-gradient(90% 90% at 100% 100%, var(--green-dark) 0%, transparent 60%); } .st-channel--safe .st-channel__kicker { background: var(--gold); color: var(--green-dark); } .st-channel--safe .st-channel__btn { background: var(--gold); color: var(--green-dark); } .st-channel--safe strong { color: var(--gold-light, #E9D28E); } .st-channel--quality { background: var(--gold); color: var(--green-dark); box-shadow: .6rem .6rem 0 var(--green); background-image: radial-gradient(90% 90% at 0% 100%, var(--gold-dark) 0%, transparent 60%); } .st-channel--quality .st-channel__kicker { background: var(--green); color: var(--surface); } .st-channel--quality .st-channel__btn { background: var(--green); color: var(--surface); } .st-channel--ideas { background: var(--sand, #F3EAD3); color: var(--text); box-shadow: .6rem .6rem 0 var(--gold); } .st-channel--ideas .st-channel__kicker { background: var(--surface); color: var(--green); } .st-channel--ideas h3 { color: var(--green) !important; } .st-channel--ideas .st-channel__btn { background: var(--green); color: var(--surface); } .st-channel--ideas .st-channel__link { color: var(--green); border-color: var(--gold); } /* ===================================================================== PRIVACY / COOKIE — tabella cookie e data. Da accodare a style.css. ===================================================================== */ .st-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5rem 0 2rem; font-size: .95rem; line-height: 1.45; background: var(--surface); border: 2px solid var(--border); border-radius: 1rem; overflow: hidden; } .st-table th, .st-table td { padding: .8rem 1rem; vertical-align: top; text-align: left; } .st-table thead th { background: var(--green); color: var(--surface); font-family: var(--font-body); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } .st-table tbody tr + tr td { border-top: 1px solid var(--border); } .st-table tbody tr:nth-child(even) td { background: var(--sand, #F3EAD3); } .st-table code { font-size: .85em; color: var(--green-dark); background: rgba(var(--gold-rgb), .2); padding: .1em .4em; border-radius: .35em; } @media (max-width: 767.98px) { .st-table thead { display: none; } .st-table, .st-table tbody, .st-table tr, .st-table td { display: block; width: 100%; } .st-table td { padding: .35rem 1rem; } .st-table td:first-child { padding-top: .9rem; } .st-table td:last-child { padding-bottom: .9rem; } .st-table td:nth-child(2)::before { content: "Tipo: "; font-weight: 700; color: var(--green); } .st-table td:nth-child(4)::before { content: "Durata: "; font-weight: 700; color: var(--green); } } .st-privacy__date { margin-top: 3rem !important; font-size: .9rem !important; color: var(--text-muted); padding-top: 1rem; border-top: 4px solid transparent; border-image: repeating-linear-gradient(90deg, var(--gold) 0 18px, transparent 18px 30px) 1; } /* ===================================================================== ULTIMI ARTICOLI — griglia a 6 card + spazio tra le file. Da accodare a style.css (vince sulle regole .st-news__item già presenti). ===================================================================== */ @media (min-width: 992px) { .st-news__grid { grid-template-columns: repeat(12, 1fr); align-items: start; row-gap: clamp(3.5rem, 7vw, 6rem); /* respiro tra prima e seconda fila */ column-gap: clamp(1.25rem, 3vw, 2.5rem); } /* prima fila: 3 card di larghezza diversa */ .st-news__item:nth-child(1) { grid-column: 1 / span 5; grid-row: 1; margin-top: 0; transform: rotate(-1.2deg); } .st-news__item:nth-child(2) { grid-column: 6 / span 4; grid-row: 1; margin-top: 3rem; transform: rotate(1deg); } .st-news__item:nth-child(3) { grid-column: 10 / span 3; grid-row: 1; margin-top: 1.5rem; transform: none; } /* seconda fila: specchiata, così le due file non si allineano */ .st-news__item:nth-child(4) { grid-column: 1 / span 3; grid-row: 2; margin-top: 1.5rem; transform: rotate(1.2deg); } .st-news__item:nth-child(5) { grid-column: 4 / span 4; grid-row: 2; margin-top: -1rem; transform: rotate(-1deg); } .st-news__item:nth-child(6) { grid-column: 8 / span 5; grid-row: 2; margin-top: 2.5rem; transform: rotate(.8deg); } .st-news__item:nth-child(1) .st-news__thumb { aspect-ratio: 4/3; } .st-news__item:nth-child(2) .st-news__thumb { aspect-ratio: 1; } .st-news__item:nth-child(3) .st-news__thumb { aspect-ratio: 3/4; } .st-news__item:nth-child(4) .st-news__thumb { aspect-ratio: 3/4; } .st-news__item:nth-child(5) .st-news__thumb { aspect-ratio: 1; } .st-news__item:nth-child(6) .st-news__thumb { aspect-ratio: 16/9; } /* con 4 card (es. nel single) la quarta occupa il centro della seconda fila */ .st-news--4 .st-news__item:nth-child(4) { grid-column: 3 / span 6; transform: rotate(.8deg); } .st-news--4 .st-news__item:nth-child(4) .st-news__thumb { aspect-ratio: 16/9; } } @media (min-width: 600px) and (max-width: 991.98px) { .st-news__grid { row-gap: 2.5rem; } } /* nel single la sezione esce dal contenitore del testo e va a tutta larghezza */ body.single .st-news { width: 100vw; margin: clamp(3rem, 6vw, 5rem) 0 0 calc(50% - 50vw); } body.single .st-news h3 { border: 0; padding: 0; margin: 0; } body.single .st-news p { max-width: none; }