/* TAG */ textarea { min-height: 150px;} hr { border-top: 1px solid #ddd; } /* ID */ #divHelp { visibility: hidden; position: fixed; width: 350px; height: 250px; background: #fff; z-index: 10000; right: 20px; bottom: 20px; border: 1px solid darksalmon; border-radius: 10px; padding: 20px; } #footer .footer-widgets-wrap { padding: 40px 0!important;} #helpTitle { border-bottom: 2px solid darksalmon } #helpClose { visibility: hidden; position: fixed; right: 30px; bottom: 240px } #helpImage { visibility: hidden; position: fixed; z-index: 15; right: 340px; bottom: 240px; width: 60px; height: 60px; border: 1px solid darksalmon; border-radius: 50%; background: #fff; padding: 5px; } #helpText { padding: 5px; font-size: 12px } /* CLASS */ .powered_by { display:inline-block; box-sizing:border-box; vertical-align:baseline; height:23px; font-size:11px; line-height:23px; padding:0 8px; background:white; border-radius:3px; color:rgba(0,0,0,0.65)!important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 1px -1px rgba(0, 0, 0, 0.15); font-weight: 600; } .powered_by:hover { background-color: #ddd; } .powered_by img { height:14px!important; width:auto; margin-right:5px; vertical-align:middle } .iframe_google { height: 300px!important } .activity_img { border-radius: 10px; box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.3); } .button-border.button-pr { color: darksalmon; border-color: darksalmon; } .button-3d.button-pr:hover, .button-reveal.button-pr:hover, .button-border.button-pr:hover, .button-border.button-pr.button-fill::before { background-color: darksalmon !important; } .box_shadow { box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3) } .font_dancing {font-family: 'Dancing Script', cursive !important;} .font_bad {font-family: 'Bad Script' !important;} .font_comfortaa {font-family: 'Comfortaa', light !important;} .circle_logo { height:60px!important; padding: 5px; background: #fff; border-radius: 50%; } .circle_logo_footer { height:100px!important; padding: 10px; background: #fff; border-radius: 50%; } .dashboardIcon { border-radius: 10px; margin: auto; margin-bottom: 10px; border: 3px solid darksalmon; height: 150px; width:150px; padding: 30px; background: #fff; box-shadow: 5px 5px rgba(0,0,0,0.2) } .dashboardIcon:hover{ margin-left: 5px; margin-top: 5px; margin-bottom: 5px; box-shadow: none; } .divider_md{ display: none } .div_title { text-transform: uppercase; border-bottom: 2px solid darksalmon; padding-bottom: 10px; margin-bottom: 40px } .div_cover { max-height: 250px; overflow: hidden; border-radius: 5px } .error input, .error textarea, .error select, .error div.well, .error img, .error video, .error .thumbnail, .error .richText { border-color: #CB0C0F!important } .fbox-content h3 { font-size: 20px; font-family: 'Comfortaa', regular; text-transform: none;} .hidden { display: none !important;} .home_title { font-size: 44px!important; letter-spacing: -1px !important; line-height: 1.2!important; text-transform: none!important;} .icon_pr { border: 2px solid darksalmon; padding: 3px } .icon_amber { border: 2px solid #EB9C4D; padding: 3px } .icon_red { border: 2px solid #C02942; padding: 3px } .icon_green { border: 2px solid #59ba41; padding: 3px } .icon_grey { border: 2px solid #777777; padding: 3px } .icon_info { width: 15px; height: 15px } .icon_directory, .icon_file { width: 20px; height: 20px; margin-right: 10px } .modal_stripe { border-bottom: 1px solid darksalmon; background: darksalmon; height: 20px } .notice { width: 400px; position: fixed; z-index: 1050; right: 5px; top: 5px; } .pagination { float: right; margin-bottom: 20px } .pagination span { margin-right: 5px; background: darksalmon; padding: 5px; width: 30px; height: 30px; text-align: center; border-radius: 50%; } .pagination span.current { color:#fff!important; cursor: pointer } .pagination span a { color:#fff!important } .table {font-family: 'Comfortaa', light !important; font-size: 14px } .table > th, .table > td { vertical-align: middle!important; } .table.p_025p th, .table.p_025p td { padding: 0.25rem !important } .td_action { min-width: 50px; width: 50px } .td_action img, .icon_action { min-width: 30px; min-height: 30px; width: 30px; height: 30px; cursor:pointer } .tp-caption { white-space: nowrap; } .tp-video-play-button { display: none !important; } .social_name { display: block; margin-top: 3px; line-height: 35px;} .sticky-side-element { position: fixed; top: 50%; margin-top: -24px; left: auto; right: -31px; height: 48px; line-height: 48px; padding: 0 15px; background-color: #EEE; color: #222; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; z-index: 100; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .visually-hidden { visibility: hidden } /* COOKIE BUTTON */ .cookie_button { height: 50px; width: 50px; position: fixed; bottom: 20px; left: 20px; z-index: 100; padding:8px; background-color: darksalmon; color: #fff; border-radius: 5px; } .cookie_button:hover { background-color: darksalmon } .cookie_icon { width: 34px; height:34px } /* MEDIA */ @media (min-width: 992px){ .side-header #logo { margin: 10px 0 20px; } .divider_md{ display: block } } /* ===== FIX SYMFONY PROFILER TOOLBAR ===== */ [id^="sfwdt"].sf-toolbar-closed .sf-toolbar-clearer { display: none !important; } [id^="sfwdt"].sf-toolbar-closed .sf-toolbarreset .sf-toolbar-block { display: none !important; } [id^="sfwdt"].sf-toolbar-closed .sf-toolbarreset .sf-toolbar-toggle-button { top: -37px !important; border-top: 2px solid #262626 !important; } [id^="sfwdt"].sf-toolbar-opened .sf-toolbar-toggle-button .sf-toolbar-icon-closed { display: none !important; } [id^="sfwdt"].sf-toolbar-opened .sf-toolbar-toggle-button .sf-toolbar-icon-opened { display: block !important; } [id^="sfwdt"].sf-toolbar-closed .sf-toolbar-toggle-button .sf-toolbar-icon-closed { display: block !important; } [id^="sfwdt"].sf-toolbar-closed .sf-toolbar-toggle-button .sf-toolbar-icon-opened { display: none !important; } /* ===== WHATSAPP FLOATING BUTTON ===== */ /* In basso a destra, sopra il gotoTop */ #whatsappBtn { position:fixed; bottom:16px; right: 16px; width: 38px; height: 38px; z-index: 10000 } /* ===== GOTOP OVERRIDE ===== */ /* Override CSS variables Canvas per evitare sovrapposizione con WhatsApp */ /* bottom: 70px = 16px (bottom WA) + 38px (altezza WA) + margine */ #gotoTop { --cnvs-gotoTop-position-boxed-right: 16px; --cnvs-gotoTop-position-boxed-bottom: 70px; } /* ===== MENU - sottomenu servizi ===== */ /* il tema fissa il sottomenu a 220px e i nomi lunghi (es. "Come la nostra storia ...") andavano a capo: da lg in su il riquadro si allarga fino al nome piu' lungo */ @media (min-width: 992px){ .primary-menu .menu-item.sub-menu > .sub-menu-container { width: auto; min-width: 220px } .primary-menu .sub-menu-container .menu-item > .menu-link { white-space: nowrap } } /* ===== ELENCO ATTIVITA (activities / activity_type) ===== */ .activity_item { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #eee } .activity_item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none } .activity_thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px } .activity_title { font-family: 'Comfortaa', sans-serif; font-size: 20px; text-transform: none; margin-bottom: 10px } .activity_title a { color: #333 } .activity_title a:hover { color: darksalmon } .activity_tags { margin-bottom: 10px } /* tag, testo e descrizione hanno lo stesso font e la stessa misura del corpo del sito (come .description della scheda), cosi il blocco si legge tutto uguale */ .tag { display: inline-block; font-family: inherit; font-size: 14px; line-height: 1.2; padding: 6px 12px; margin: 0 5px 5px 0; border-radius: 14px; background: #f4f4f4; color: #666; text-transform: none } .tag_type { background: darksalmon; color: #fff } .activity_desc { font-family: inherit; font-size: 14px; line-height: 24px; color: #555; text-align: justify; margin-bottom: 15px } /* nell'elenco servizi i tag sono le attività collegate, quindi cliccabili */ a.tag { color: #666 } a.tag:hover { background: darksalmon; color: #fff } /* ===== FILTRO TAG ===== */ .filter { background: #fafafa; border: 1px solid #eee; border-radius: 5px; padding: 20px 20px 10px } .filter_title { font-family: 'Comfortaa', sans-serif; font-size: 16px; text-transform: uppercase; border-bottom: 2px solid darksalmon; padding-bottom: 10px; margin-bottom: 15px } .filter label { display: block; font-size: 13px; font-weight: 400; text-transform: none; margin-bottom: 10px; cursor: pointer } .filter input { margin-right: 8px; vertical-align: middle } /* scelta fra "almeno un tag" (or) e "tutti i tag" (and): due pillole affiancate */ .filter_mode { display: flex; gap: 4px; padding: 3px; margin-bottom: 15px; background: #fff; border: 1px solid #eee; border-radius: 50px } .filter_mode label { flex: 1 1 0; margin: 0; padding: 6px 4px; border-radius: 50px; text-align: center; font-size: 12px; line-height: 1.2; color: #666 } .filter_mode input { position: absolute; opacity: 0; pointer-events: none } .filter_mode label:has(input:checked) { background: darksalmon; color: #fff } /* Da lg in su il filtro resta agganciato in alto mentre si scorre l'elenco: l'offset tiene conto dell'header fisso. Con molti tag il riquadro scorre al suo interno invece di sfondare. */ @media (min-width: 992px) { .filter { position: sticky; top: 100px; max-height: calc(100vh - 130px); overflow-y: auto } } /* ===== GALLERIA SCHEDA ATTIVITA - immagini di dimensione uniforme ===== */ .gallery_item { display: block; padding: 5px } .gallery_item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px } /* ===== ADMIN - anteprima immagine nelle tabelle materiali ===== */ .admin_table_thumb { display: block; width: 60px; height: 60px; object-fit: cover; border-radius: 3px; background: #f7f7f7; margin: auto } /* ===== ADMIN - box di caricamento file ===== */ .upload_box { background: #fafafa; border: 1px solid #eee; border-radius: 5px; padding: 20px } .upload_box label { display: block; font-size: 13px; text-transform: none; margin-bottom: 8px } .upload_box .form-control { margin-bottom: 20px } /* il bottone nativo del campo file sborda dal box: lo si riporta dentro al bordo */ .upload_box input[type="file"].form-control { overflow: hidden } .upload_box input[type="file"].form-control::file-selector-button { padding: 0.375rem 0.75rem; margin: -0.375rem 0.75rem -0.375rem -0.75rem; border: none; border-right: 1px solid #ced4da; border-radius: 0; background: #f0f0f0; color: #495057; font: inherit; line-height: 1.5; cursor: pointer } .upload_box input[type="file"].form-control::-webkit-file-upload-button { padding: 0.375rem 0.75rem; margin: -0.375rem 0.75rem -0.375rem -0.75rem; border: none; border-right: 1px solid #ced4da; border-radius: 0; background: #f0f0f0; color: #495057; font: inherit; line-height: 1.5; cursor: pointer } .upload_box input[type="file"].form-control::file-selector-button:hover { background: #e6e6e6 } .upload_box input[type="file"].form-control::-webkit-file-upload-button:hover { background: #e6e6e6 } .upload_actions { text-align: center } .upload_actions .button { margin: 0; width: 100%; text-align: center } /* ===== SCHEDA ATTIVITA - blocco informazioni ===== */ .info_list { list-style: none; margin: 0; padding: 0 } .info_row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0 } .info_row:first-child { padding-top: 0 } .info_row:last-child { padding-bottom: 0 } /* le informazioni seguono la descrizione: un filo sottile le separa dal testo */ .description + .info_list { margin-top: 24px; padding-top: 22px; border-top: 1px solid #f0e9e6 } .info_icon { width: 26px; height: 26px; min-width: 26px; flex: 0 0 26px; margin-top: 2px } .info_body { flex: 1 1 auto; font-family: 'Comfortaa', sans-serif; font-size: 14px; line-height: 24px; color: #444 } .info_label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #aaa; margin-bottom: 2px } /* ===== SCHEDA ATTIVITA - luoghi e link alla mappa ===== */ .place { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0 } .place + .place { margin-top: 4px } .place_text { flex: 1 1 200px } .place_name { display: block; font-weight: 700; line-height: 20px } .place_address { display: block; font-size: 13px; color: #888; line-height: 20px } /* La via apre la mappa: niente riquadro, solo la sottolineatura a dire che e un link; il colore resta nero come il testo. !important perche il tema azzera la sottolineatura di ogni link con 'a { text-decoration: none !important }' in style.css. */ a.place_map, a.place_map:hover, a.place_map:focus { color: #000; text-decoration: underline !important; text-underline-offset: 3px } /* ===== SCHEDA ATTIVITA - box contatti ===== */ /* box contatti sotto l'immagine, nella colonna di destra */ .contact_box { margin-top: 20px; background: #fafafa; border: 1px solid #eee; border-radius: 5px; padding: 18px 15px } .contact_title { font-family: 'Comfortaa', sans-serif; font-size: 15px; text-align: center; color: #555; margin-bottom: 15px } .contact_actions { display: flex; flex-wrap: wrap; gap: 8px } .contact_btn { flex: 1 1 0; min-width: 90px; display: block; text-align: center; padding: 12px 6px; border: 1px solid transparent; border-radius: 3px; font-family: 'Comfortaa', sans-serif; font-size: 12px; font-weight: 700; line-height: 1.2; color: #fff } .contact_btn i { display: block; font-size: 18px; margin-bottom: 6px } .contact_btn:hover { color: #fff; opacity: .85 } .contact_btn_call { background: darksalmon; border-color: darksalmon } .contact_btn_wa { background: #25d366; border-color: #25d366 } .contact_btn_mail { background: #fff; color: darksalmon; border-color: darksalmon } .contact_btn_mail:hover { background: darksalmon; color: #fff; opacity: 1 } /* ===== SCHEDA ATTIVITA - blocchi descrizione / documenti / link / galleria ===== */ /* la descrizione segue le informazioni nella stessa colonna */ .block { margin-top: 32px } .block_title { font-family: 'Comfortaa', sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid darksalmon; padding-bottom: 10px; margin-bottom: 15px } /* scheda pubblica: titoli senza riga, le colonne hanno larghezze diverse e le righe risultavano disallineate */ .block_title_plain { border-bottom: none; padding-bottom: 0 } /* niente pre-wrap: gli a capo li gestisce il template in paragrafi, cosi il testo va a capo da solo e arriva fino al bordo del riquadro */ .description { word-wrap: break-word; font-family: inherit; font-size: 14px; line-height: 24px; text-align: justify; color: #555; background: none; border: none; padding: 0; margin: 0 } .description p { margin: 0 0 12px } .description p:last-child { margin-bottom: 0 } .file_list { list-style: none; margin: 0; padding: 0 } .file_item { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px } .file_item:last-child { padding-bottom: 0 } .file_item img { width: 20px; height: 20px; min-width: 20px; flex: 0 0 20px } .file_item a { color: #555; word-break: break-word } .file_item a:hover { color: darksalmon } /* ===== MODALE AVVISI - locandina a sinistra, testo a destra ===== */ /* Riquadro quadrato e sempre della stessa misura, qualunque sia il formato della locandina: con piu avvisi il carosello non cambia piu altezza a ogni scorrimento. object-fit: contain tiene dentro tutta la locandina senza tagliarne il testo (per riempire il quadrato ritagliando i bordi basta scrivere cover). */ .advice_img { display: block; margin: auto; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; height: auto; object-fit: contain; background: #fff; cursor: zoom-in } /* Il lightbox della locandina si apre sopra al modale degli avvisi: Bootstrap mette il modale a z-index 1055, Magnific Popup si fermerebbe a 1042/1043 e resterebbe nascosto dietro */ body.modal-open .mfp-bg { z-index: 1060 } body.modal-open .mfp-wrap { z-index: 1061 } /* Il testo non deve mai superare il bordo basso della locandina: le due colonne sono larghe uguali (col-md-6), quindi ripetendo qui width/max-width/aspect-ratio dell'immagine il riquadro del testo risulta alto esattamente quanto il quadrato, a qualsiasi larghezza del modale. Niente barra di scorrimento: la descrizione piu lunga viene troncata con i puntini. Le righe sono calcolate sull'altezza del quadrato divisa per l'interlinea (26px). */ .advice_desc { font-family: 'Comfortaa', sans-serif; font-size: 14px; line-height: 26px; color: #555; text-align: justify; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7 } /* da lg il modale e largo 800px: la locandina arriva a 320px e ci stanno 12 righe */ @media (min-width: 992px) { .advice_desc { -webkit-line-clamp: 12 } } .advice_media { margin-bottom: 20px } /* Su mobile le due colonne si impilerebbero: locandina alta + descrizione sotto sfondava lo schermo e si finiva per scorrere la pagina invece del modale. Sotto md la descrizione e nascosta (d-none d-md-block nel template) e resta la sola locandina, nel suo quadrato. */ @media (max-width: 767.98px) { #modalAdvice .modal-dialog { margin: 10px; max-width: none } #modalAdvice .modal-content { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow: hidden } /* header e striscia non si comprimono: a restringersi e solo il corpo */ #modalAdvice .modal-header { padding: 12px 16px; flex: 0 0 auto } #modalAdvice .modal-title { font-size: 16px; line-height: 1.3 } #modalAdvice .modal_stripe { height: 10px; flex: 0 0 auto } #modalAdvice .modal-body { padding: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch } /* senza descrizione sotto non serve staccare la locandina dal fondo */ .advice_media { margin-bottom: 0 } /* il quadrato resta tale anche qui, solo piu piccolo: cosi entra nel modale senza obbligare a scorrere la pagina invece del riquadro */ .advice_img { max-width: 260px } } .gallery_video { position: relative } .gallery_video::after { content: "\f04b"; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; line-height: 44px; text-align: center; padding-left: 4px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 16px } .gallery_video_frame { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px; background: linear-gradient(135deg, #5a423a 0%, #2b1f1b 100%); pointer-events: none } /* ===== LIGHTBOX (magnific popup) - frecce di navigazione galleria ===== */ /* Il tema disegna le frecce con il font "lined-icons", che pero non e mai dichiarato con una @font-face: i glifi restano vuoti. Le ridisegno con FontAwesome, gia caricato. */ .mfp-arrow { font-family: FontAwesome; line-height: var(--cnvs-mfp-arrow-size); text-align: center; border-radius: 50%; opacity: 1 } button.mfp-arrow { background: rgba(0,0,0,.45) } button.mfp-arrow:hover { background: rgba(0,0,0,.7) } .mfp-arrow-left { left: 10px } .mfp-arrow-left:before { content: "\f053" } .mfp-arrow-right { right: 10px } .mfp-arrow-right:before { content: "\f054" } /* Il tema nasconde i comandi dopo 1 secondo: le frecce restano sempre visibili */ .mfp-ready .mfp-arrow { animation: none; opacity: 1 } /* ===== SCHEDA SERVIZIO - elenco attivita su una o due colonne ===== */ /* Ogni attivita sta in una colonna propria, quindi e sempre :last-child dentro di essa: qui il separatore viene ripristinato e tolto solo all'ultima colonna della griglia */ .activity_cell .activity_item { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #eee } .activity_cell:last-child .activity_item { padding-bottom: 0; margin-bottom: 0; border-bottom: none } /* ===== HERO (sostituisce lo slider Revolution a tutta altezza) ===== */ /* Impaginazione del blocco hero dei template Canvas (kindergarten 2): etichetta a pillola, titolo, frase, bottoni arrotondati e pillole con i dati in fondo, tutto allineato a sinistra. Li lo sfondo e una sfumatura chiara con la foto di fianco, qui la foto resta lo sfondo di tutta la fascia. */ .hero { position: relative; overflow: hidden; height: clamp(300px, 46vh, 440px); background-color: #3a2a24; background-size: cover; background-position: center; background-repeat: no-repeat } /* Velo piu scuro a sinistra, dove sta il testo, e piu leggero a destra: la foto si vede dove non c'e niente scritto, come nel blocco Canvas dove a destra c'e l'immagine */ .hero_overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(100deg, rgba(48,32,26,.74) 0%, rgba(48,32,26,.58) 45%, rgba(48,32,26,.28) 100%) } .hero_wrap { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 20px; padding-bottom: 20px } /* Il blocco di testo sta a sinistra, sulla stessa colonna del contenuto della pagina */ .hero_content { max-width: 640px; text-align: left } /* Etichetta sopra al titolo: solo testo con il cuore davanti, senza pillola intorno */ .hero_eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: 'Comfortaa', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); margin-bottom: 12px } .hero_eyebrow::before { content: "\f004"; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px; letter-spacing: 0; line-height: 1; color: darksalmon } .hero_title { font-family: 'Dancing Script', cursive; font-size: clamp(34px, 5vw, 54px); line-height: 1.15; color: #fff; margin: 0 0 14px; text-shadow: 0 2px 12px rgba(0,0,0,.35) } .hero_text { font-family: 'Comfortaa', sans-serif; font-size: clamp(14px, 1.4vw, 16px); line-height: 1.7; color: rgba(255,255,255,.92); max-width: 540px; margin: 0 0 22px; text-shadow: 0 1px 8px rgba(0,0,0,.35) } .hero_cta { display: flex; flex-wrap: wrap; gap: 12px } /* Bottoni a pillola come nel blocco Canvas: uno pieno e uno con il solo bordo */ .hero_btn { display: inline-block; font-family: 'Comfortaa', sans-serif; font-size: 14px; font-weight: 700; line-height: 1; padding: 14px 28px; border: 2px solid transparent; border-radius: 50px } .hero_btn_primary { background: darksalmon; border-color: darksalmon; color: #fff } .hero_btn_primary:hover { background: #fff; border-color: #fff; color: darksalmon } .hero_btn_ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); color: #fff } .hero_btn_ghost:hover { background: #fff; border-color: #fff; color: #444 } /* Pillole dei dati in breve: nel blocco Canvas sono colorate su fondo chiaro, qui sono chiare con il testo scuro perche stanno sopra la foto */ .hero_chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px } .hero_chip { display: inline-block; padding: 8px 15px; border-radius: 50px; background: rgba(255,255,255,.92); font-family: 'Comfortaa', sans-serif; font-size: 12px; font-weight: 700; line-height: 1; color: #6b4a3d } /* Home: lo slider di apertura e piu alto degli altri, l'immagine si vede per intero. Sta prima della media query: sotto md l'altezza torna a seguire il contenuto. */ .hero_home { height: clamp(440px, 70vh, 640px) } @media (max-width: 767.98px) { .hero { height: auto; min-height: 280px } /* Schermo stretto: il testo copre tutta la fascia, quindi il velo torna uniforme */ .hero_overlay { background: linear-gradient(to bottom, rgba(48,32,26,.58) 0%, rgba(48,32,26,.68) 100%) } .hero_wrap { padding-top: 35px; padding-bottom: 35px } .hero_home { min-height: 380px } } /* ===== INTESTAZIONE DI SEZIONE - etichetta, titolo-slogan e paragrafo ===== */ /* Schema ripreso dal sito rpgmultimedia.it: sopra una etichetta breve che dice in che parte del sito ci si trova, poi il titolo che spiega a cosa serve la pagina e infine il paragrafo di presentazione. Allineato a sinistra: la riga parte dal bordo della colonna, cosi il testo lungo resta leggibile invece di aprirsi a ventaglio dal centro. */ .intro { margin: 0 0 30px; text-align: left } .intro_eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: 'Comfortaa', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: darksalmon; margin-bottom: 12px } /* Il cuoricino davanti al sopratitolo: stesso schema del sopratitolo di rpgmultimedia.it, dove il segno sta nel ::before e non nel markup, cosi non va ripetuto in ogni pagina. */ .intro_eyebrow::before { content: "\f004"; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px; letter-spacing: 0; line-height: 1 } .intro_title { font-family: 'Dancing Script', cursive; font-size: 44px; line-height: 1.2; text-transform: none; letter-spacing: -1px; color: #333; margin: 0 0 15px } /* sopratitolo cliccabile (tipologia nella scheda attivita) */ a.intro_eyebrow:hover { color: #c9765c } .intro_text { font-size: 15px; line-height: 27px; color: #555; margin: 0 } /* Variante compatta: quando il titolo introduce direttamente il testo che sta sotto */ .intro_tight { margin-bottom: 16px } /* ===== HOME - card collaborazioni ===== */ /* Logo a sinistra dentro un quadrato col bordo darksalmon (classe b_pr), nome e descrizione di fianco. Niente riquadro grigio attorno: il bordo del logo e l'unica cornice. */ .collab { display: flex; align-items: flex-start; gap: 20px; height: 100% } /* I loghi sono 300x300 ma non tutti quadrati: il quadrato e fisso e object-fit li tiene dentro interi, senza stirarli ne tagliarli. */ .collab_media { flex: 0 0 auto; display: block } .collab_img { display: block; width: 150px; height: 150px; object-fit: contain; background: #fff; border-radius: 3px; padding: 6px } .collab_body { flex: 1 1 auto; min-width: 0; text-align: left } .collab_name { font-family: 'Comfortaa', sans-serif; font-size: 17px; line-height: 1.4; text-transform: none; margin: 0 } .collab_name a { color: #333 } .collab_name a:hover { color: darksalmon } .collab_text { font-family: 'Comfortaa', sans-serif; font-size: 14px; line-height: 24px; color: #666; text-align: justify; margin: 10px 0 0 } /* Sul telefono la colonna e stretta: il quadrato si riduce, cosi al testo resta spazio utile */ @media (max-width: 575.98px) { .collab { gap: 15px } .collab_img { width: 100px; height: 100px } .collab_text { text-align: left } } /* ===== GALLERIA - miniature quadrate ===== */ /* Il masonry del tema posiziona i riquadri in assoluto misurandoli prima che il lazy load carichi le foto: con il segnaposto le miniature finivano sovrapposte. Qui il riquadro e quadrato e l'ingombro e noto da subito, quindi la griglia non si scompone. */ .photogrid_item { display: block; overflow: hidden; background: #f3efec } .photogrid_item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block } /* ===== SCRIVANIA ADMIN - due caselle per riga su mobile ===== */ /* Le icone sono fisse a 150px: sotto i 576px vanno ridotte per stare in mezza riga */ @media (max-width: 575.98px) { .dashboardIcon { height: auto; width: 100%; max-width: 150px; aspect-ratio: 1 / 1; padding: 18px } } /* ===== ADMIN SCHEDA ATTIVITA - tabelle dati piu leggibili ===== */ /* Le etichette diventano una colonna grigia in stile "scheda": Bootstrap disegna solo il bordo inferiore delle celle, qui usiamo il bordo superiore per separare le righe */ .sheet_table { border: 1px solid #eee; border-radius: 5px; overflow: hidden; background: #fff } .sheet_table > :not(caption) > * > * { border-bottom: none; box-shadow: none; padding: 12px 15px } .sheet_table th { background: #fbf8f7; font-family: 'Comfortaa', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #8a7168; vertical-align: top } .sheet_table td { font-size: 14px; line-height: 1.6; vertical-align: top } .sheet_table tr + tr th, .sheet_table tr + tr td { border-top: 1px solid #f1ecea } .sheet_pre { font-family: inherit; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; background: none; border: none; border-radius: 0; padding: 0; margin: 0; color: inherit } .sheet_empty { color: #b3a8a3 } .sheet_badge { display: inline-block; font-family: 'Comfortaa', sans-serif; font-size: 12px; font-weight: 700; line-height: 1; padding: 7px 13px; border-radius: 20px } .sheet_badge_wait { background: #fff4d6; color: #8a6400 } .sheet_badge_ok { background: #e3f4e5; color: #2d6b34 } .sheet_badge_ko { background: #fbe3e4; color: #a11d21 } .sheet_img_box { border: 1px solid #eee; border-radius: 5px; background: #fafafa; padding: 15px } .sheet_img_box label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #8a7168 } /* Sotto i 576px etichetta e valore vanno incolonnati, la colonna fissa da 200px non ci sta */ @media (max-width: 575.98px) { .sheet_table th, .sheet_table td { display: block; width: 100%; min-width: 0 } .sheet_table > :not(caption) > * > td { padding-top: 0 } .sheet_table tr + tr td { border-top: none } } /* ===== RITMO VERTICALE DELLE SEZIONI (pagine pubbliche) ===== */ /* Prima ogni sezione aveva 100px di margine sopra e sotto (m_tb_100p): fra un blocco e l'altro restavano 200px vuoti. Qui lo spazio e padding interno e scala con la finestra, cosi su telefono le sezioni si stringono invece di tenere il buco fisso. */ .sec { position: relative; padding: clamp(42px, 5vw, 70px) 0; margin: 0 } /* Sezioni alternate: al posto delle fasce immagine a tutta altezza, un fondo appena piu caldo del bianco separa un blocco dall'altro senza staccarli con una riga netta */ .sec_tint { background: #fbf8f6 } /* Due sezioni bianche di fila: filo sottile largo quanto il contenuto, non da bordo a bordo */ .sec_line::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1140px, calc(100% - 30px)); height: 1px; background: #f0e9e6 } /* Ultima sezione prima del footer: lo stacco lo fa gia il footer colorato */ .sec_last { padding-bottom: clamp(30px, 3.5vw, 45px) } /* ===== FASCIA IMMAGINE (sostituisce i separatori a onde) ===== */ /* I vecchi separatori erano sezioni alte 75vh con due onde da 190px: occupavano piu spazio dei contenuti. La fascia e alta poche centinaia di pixel, senza onde: l'immagine fa da respiro fra due sezioni e puo portare una frase. */ .band { position: relative; display: flex; align-items: center; height: clamp(160px, 22vw, 260px); background-color: #3a2a24; background-size: cover; background-position: center center; background-repeat: no-repeat } .band::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(48,32,26,.40) } .band_wrap { position: relative; z-index: 2 } .band_text { font-family: 'Dancing Script', cursive; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.25; color: #fff; text-align: center; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.35) } /* ===== HOME - mappa dentro al contenuto ===== */ /* Prima la mappa era a tutta larghezza dentro un riquadro con 30px di padding su ogni lato: ora sta nella colonna del testo, con gli angoli arrotondati come le altre foto */ .map_box { overflow: hidden; border-radius: 8px; line-height: 0 } /* ===== HOME - foto della sezione missione ===== */ /* Una foto sola accanto ai tre punti: formato verticale (4:5), cosi la colonna della foto e alta quanto quella dei punti. Su telefono la foto sta da sola in riga e torna 4:3. */ .mission_photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.07) } @media (max-width: 575.98px) { .mission_photo { aspect-ratio: 4 / 3 } } /* ===== FASCIA SENZA FOTO (band_plain) ===== */ /* Variante del separatore per quando la sezione sopra ha gia le sue immagini: solo un fondo caldo con la frase, piu basso della fascia fotografica */ .band_plain { height: auto; padding: clamp(32px, 4vw, 52px) 0; background: linear-gradient(180deg, #fdf7f4 0%, #f7eae4 100%) } .band_plain::before { display: none } .band_plain .band_text { color: #8a5f4f; text-shadow: none } /* ===== HOME - punti della sezione missione ===== */ /* Schema del blocco Canvas "hero instructor": accanto alla foto tre punti brevi, ognuno con il titolo colorato e due righe di testo. I colori sono quelli gia usati per le icone del sito (darksalmon, rosso, ambra), cosi i punti si distinguono senza aggiungere riquadri. */ .mission_point + .mission_point { margin-top: 22px } .mission_point_title { font-family: 'Comfortaa', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.35; text-transform: none; margin: 0 0 6px } .mission_point_text { font-family: 'Comfortaa', sans-serif; font-size: 13px; line-height: 22px; color: #777; margin: 0 } .mission_point_pr .mission_point_title { color: darksalmon } .mission_point_red .mission_point_title { color: #C02942 } .mission_point_amber .mission_point_title { color: #EB9C4D } /* ===== CARD SERVIZI (home e pagina Servizi) ===== */ /* Schema della card "boxed" di www.designpuntozero.it: riquadro bianco con ombra morbida sul fondo tenue della sezione, foto sopra e testo sotto, senza bottone. Tutta la card e un unico link (.service_card_link), quindi si clicca ovunque. Prima ogni servizio occupava una riga intera con l'immagine a sinistra: con 11 servizi l'elenco era lunghissimo. */ .service_card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.05); transition: box-shadow .5s ease } .service_card:hover { box-shadow: 0 24px 48px -16px rgba(6,7,7,.2) } .service_card_link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none } .service_card_link:hover, .service_card_link:focus { color: inherit; text-decoration: none } .service_card:focus-within { outline: 2px solid darksalmon; outline-offset: 4px } .service_card_link:focus-visible { outline: none } /* Le immagini caricate da admin hanno formati diversi (500x333, 1920x800, anche quadrate): il riquadro e sempre 3:2 e object-fit le ritaglia, cosi le card restano allineate */ .service_card_media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #f4ece8 } .service_card_media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease } .service_card:hover .service_card_media img { transform: scale(1.05) } .service_card_body { flex: 1; display: block; padding: 34px 28px 36px } /* titolo in Comfortaa, il carattere dei titoli del sito */ .service_card_title { font-family: 'Comfortaa', sans-serif; font-size: 21px; font-weight: 700; line-height: 1.35; text-transform: none; letter-spacing: 0; margin: 0 0 14px } .service_card_title span { color: #222; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s ease } .service_card:hover .service_card_title span { background-size: 100% 1px } /* Descrizione intera, senza taglio: le card della stessa riga restano alte uguali per la griglia */ .service_card_text { font-family: 'Lato', sans-serif; font-size: 15px; line-height: 1.75; color: #666; margin: 0 } /* Griglia delle card in home: elenco