/*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #region HOME INTRO */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ .homeIntro { width: min(90%, 820px); margin: 110px auto 0; padding: 0; text-align: center; /* Colore iniziale, come il menu */ color: rgb(250,250,250); } .homeIntro p { margin: 0 0 22px 0; font-size: 1.25rem; line-height: 1.7; letter-spacing: 0.02em; font-weight: 300; } .homeIntro p:last-child { margin-bottom: 0; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #region BODY */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* L'assegnazione dello sfondo delle pagine avviene in modo dinamico dal body, per permettere al menu burger di avere lo stesso sfondo all'apertura */ html, body { min-height: 100vh; width: 100%; margin: 0px; font-family: var(--main-font-family); font-size: var(--main-font-size); font-weight: var(--main-font-weight); line-height: var(--main-line-height); } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #region FONTS */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Scelta del font */ @font-face { font-family: 'Quicksand'; src: url('fonts/Quicksand-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Quicksand'; src: url('fonts/Quicksand-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Quicksand'; src: url('fonts/Quicksand-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Quicksand'; src: url('fonts/Quicksand-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Quicksand'; src: url('fonts/Quicksand-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #region ANIMATION: classi anima# che delineano la durate delle animazioni */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ .animafast { -webkit-animation-duration: var(--animation-fast-duration); animation-duration: var(--animation-fast-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animaslow { -webkit-animation-duration: var(--animation-slow-duration); animation-duration: var(--animation-slow-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #region FADE: classi fade# che descrivono gli effetti grafici fade */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Utilizzata nel caricamento del logo principale e degli sfondi */ .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}} /* Utilizzata nel caricamento del menu */ .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #region LINKS */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Definisce l'aspetto grafico dei link esterni */ .linkPNATE, .linkPN5T, .linkEUROPARC, .linkWenatour, .linkPARKS, .linkFORMA, .linkLANZI { text-decoration: none; color: rgb(40,40,40); } /* Definisce l'aspetto dei link interni al sito */ .internal_link { color: inherit; text-decoration: none; } .internal_link:hover { opacity: 0.7; transition: opacity 0.2s ease; font-weight: 500; color: rgb(40,40,40); } /* Evita che About Me vada a capo nella versione mobile */ .linkAboutMe { white-space: nowrap; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #region FOOTER */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Linea decorativa */ div.footer hr { width:16%; color: rgb(250, 250, 250); margin-left: 42%; } div.footerContent { width: 100%; position: absolute; vertical-align: middle; } div.footSocial { display: block; text-align: center; } div.footSocial a { text-decoration: none; font-size:24px; color: rgb(250, 250, 250); margin:5px 15px; } div.copyRight p { color: rgb(250, 250, 250); text-align: center; } div.footSocial a:hover { color: rgb(250, 250, 250); transform: scale(1.1); transition: transform var(--transition-fast) ease-in-out; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #region ELEMENTI SEPARATORI: definisce vari separatori usati per il layout */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Regole comuni per tutti gli elementi separatori separatori */ .separator, .tiny-separator, .big-separator, .xtra-separator { width: 100%; } /* Altezze specifiche dei singoli elementi separatori */ div.tiny-separator { height: 5px; } div.separator { height: 15px; } div.big-separator { height: 30px; } div.xtra-separator { height: 100px; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #region SFONDI */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Regole comuni per tutti gli sfondi */ [id^="page-"] { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* Assegna uno sfondo specifico per ogni pagina */ #page-index { background-image: url("../Site_Images/bkg_img/01-index.jpg"); } #page-activity { background-image: url("../Site_Images/bkg_img/02-activity.jpg"); } #page-destinations { background-image: url("../Site_Images/bkg_img/03-destinations.jpg"); } #page-aboutme { background-image: url("../Site_Images/bkg_img/04-aboutme.jpg"); } #page-contacts { background-image: url("../Site_Images/bkg_img/05-contacts.jpg"); } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* region TITOLI */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*Utilizzata per l'header home mobile */ h1.titleFont, h2.titleFont, h3.titleFont { margin: 0; font-weight: var(--title-font-weight); color: rgb(250, 250, 250); font-family: 'Quicksand', sans-serif; } h1.titleFont { font-size: 2em; } h2.titleFont { font-size: 2.5em; } h3.titleFont { font-size: 3.5em; } /*Utilizzata per i titoli delle card */ .card h2 { position:relative; z-index:2; margin: 0px; font-size: 1.2em; font-weight: var(--title-font-weight); letter-spacing:1px; color: rgb(250, 250, 250); font-family: 'Quicksand', sans-serif; } /* Utilizzato per la citazione su About Me */ div.cita { display: flex; flex-direction: column; align-items: flex-end; } .cita > * { margin: 0; } /* Titolo pagina Home sotto al logo */ div.homeTitle { position: relative; margin: auto; margin-top: 2%; text-align: center; color: rgb(250, 250, 250); cursor: default; /*background-color: rgba(0,0,0,0.6);*/ /* Eventuale sfondo della zona titolo */ /*border: 5px solid azure;*/ /* Eventuali decorazioni della zona titolo */ } /* Caratteristiche del logo home */ img.Logo { height: 110px; } /* Uniforma tuttii titoli */ h1, h2, h3, h4, h5, h6 { font-family: 'Quicksand', sans-serif; font-weight: var(--title-font-weight); } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* region CONTATTI */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ body#page-contacts form { max-width: 900px; margin: 30px auto; padding: 30px; background: rgba(165,165,160,.90); border-radius: 10px; box-sizing: border-box; } /* Messaggi form */ #message { padding: 10px; margin-bottom: 20px; display: none; opacity: 1; transition: opacity var(--message-transition-duration) ease-out; } #message.success { border: 1px solid #4CAF50; background: #DFF2BF; color: #4F8A10; } #message.error { border: 1px solid #f44336; background: #FFBABA; color: #D8000C; } /* Campi form */ form input[type="text"], form input[type="email"], form textarea { width: 100%; padding: 12px 14px; font-family: 'Quicksand', sans-serif; font-size: 16px; color: rgb(40, 40, 40); background-color: rgba(255, 255, 255, 0.95); border: 1px solid rgba(40, 40, 40, 0.2); border-radius: 6px; transition: border-color var(--transition-normal) ease, background-color var(--transition-normal) ease; } /* Altezza specifica input */ form input[type="text"], form input[type="email"] { height: 50px; } /* Altezza textarea */ form textarea { min-height: 140px; resize: vertical; } /* Placeholder */ form input::placeholder, form textarea::placeholder { color: rgba(40, 40, 40, 0.55); font-style: italic; } /* Focus */ form input:focus, form textarea:focus { outline: none; border-color: rgb(40, 40, 40); background-color: rgba(255, 255, 255); } /* Bottone */ form button { margin-top: 20px; /* Spazio sopra il bottone */ font-family: 'Quicksand', sans-serif; font-size: 18px; font-weight: 500; background-color: rgba(255, 255, 255); color: rgb(40, 40, 40); border: none; border-radius: 6px; padding: 12px 28px; cursor: pointer; transition: .25s; } form button:hover { background: rgba(250,250,250,.12); } form button:focus { outline: none; } button.disabled { opacity: 0.5; cursor: not-allowed; } /* Mobile LO SPOSTIAMO POI IN MOBILE????*/ form input, form textarea, form button { box-sizing: border-box; } @media (max-width: 768px) { form input[type="text"], form input[type="email"], form textarea, form button { width: 100%; } form button { margin-top: 30px; /* distanza dai campi */ font-size: 18px; padding: 16px; } } /* Messaggio OK */ .form-message p { color: green; } /* Honeypot */ .honeypot { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; } /* Screen-reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* region ACTIVITY */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ .dualAccordion { width:60vw; margin:0 auto; color: rgb(40,40,40); /*font-size: 1em; Se vuoi variare la dimensione del carattere nelle finestre; considera che eredita già la font-size di textContainer */ } /* Linea separatrice .accordionItem{ border-top:1px solid rgba(255,255,255,0.3); } */ .accordionTitle { display: block; width: 100%; border: 0; padding:18px 0px; cursor:pointer; background:none; color: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; text-align: left; font-size:1em; letter-spacing:normal; } .accordionTitle:hover { font-size: 1.08em; } .accordionContent { max-height:0; overflow:hidden; padding:0 25px; /*background:rgba(0,0,0,0.5); Eventuale sfondo finestra aperta */ opacity:0; transform:translateY(-10px); transition: max-height var(--accordion-height-duration) ease, opacity var(--transition-medium) ease, transform var(--transition-medium) ease-in-out, padding-top var(--transition-medium) ease-in-out, padding-bottom var(--transition-medium) ease-in-out; } .accordionItem.open .accordionContent { max-height:800px; /* alza se serve */ padding-top:25px; padding-bottom:25px; opacity:1; transform:translateY(0); } /* Activity: apertura diretta della categoria in una pagina interna. */ .activityOverview.hidden, .activityOverlay { display: none; } .activityOverlay.open { display: block; } .activityLanding { min-height: 520px; } .activityMainView { padding-top: 54px; } /* Elenco spuntato ervizi: annulla le regole globali del menu */ ul.services-list { display: block; text-align: left; list-style-type: disc; list-style-position: outside; padding-left: 1.5em; margin: 1em 0; line-height: inherit; /* Interlinea nell'elenco */ letter-spacing: normal; font-weight: inherit; } ul.services-list > li { display: list-item; margin: 0 0 1em 0; cursor: default; font-weight: inherit; } ul.services-list > li:hover { cursor: default; font-weight: inherit; } ul.services-list > li::marker { color: inherit; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* region LAYOUT COMUNE */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ :root { /* VALORI COMUNI Le dimensioni e i tempi specifici sono nei pannelli iniziali di Desktop.css e Mobile.css. */ --main-font-family: 'Quicksand', sans-serif; --subpage-font-family: 'Quicksand', sans-serif; --white-veil-opacity: 0.75; --dark-text-color: rgb(40,40,40); --page-opacity: 0.95; --body-line-height: 1.8; /* Imposta l'interlinea di tutte le pagine della cards destinations; come riferimento per cercare, line-height: var(--body-line-height); */ /* Per il sistema brush */ --brush-height: 120px; --brush-image-top: url("../Site_Images/pennellen.png?v=54"); --brush-image-bottom: url("../Site_Images/pennellen2.png?v=54"); } .heroSection { height: 150px; } .contentSection { position: relative; background: rgba(250,250,250,var(--page-opacity)); margin-top: 170px; /* Per abbassare la parte bianca, aumenta */ overflow: visible; z-index: 1; } .contentSection::before { content: ""; position: absolute; left: 0; top: -120px; width: 100%; height: 120px; background: url("../Site_Images/pennellen.png?v=51") center bottom / auto 120px repeat-x; /*opacity: var(--page-opacity);*/ opacity: 1; z-index: 5; /* Era 9999.. abbassato per semplificare debug */ pointer-events: none; } .bottomSection { background: rgba(250,250,250,var(--page-opacity)) !important; } /* Gestisce l'interlinea tra i paragrafi nei testi */ .contentSection .textContainer p { margin-top: 0; margin-bottom: 0.5em; } .contentSection .textContainer p:last-child { margin-bottom: 0; } .sectionTitle { color: rgb(40,40,40); font-size: 3.5rem; font-weight: var(--title-font-weight); margin: 0 0 30px 0; } /*--------------------------------------------------------------------------------------------------------------------------------------------------------*/ body > * { position: relative; z-index: 1; } .titleFont, .homeIntro, /* Scritta intro */ .menuHomeTop a, .menuTopMobile a, .footSocial a, .copyRight p, .footer hr { transition: color var(--text-duration) ease-in-out, border-color var(--text-duration) ease-in-out; } body.white-veil-active .titleFont, body.white-veil-active .homeIntro, /* Scritta intro */ body.white-veil-active .menuHomeTop a, body.white-veil-active .menuTopMobile a, body.white-veil-active .footSocial a, body.white-veil-active .copyRight p { color: var(--dark-text-color) !important; } body.white-veil-active .footer hr { border-color: var(--dark-text-color); } .Logo { transition: filter var(--animation-slow-duration) cubic-bezier(.4, 0, .2, 1); } body.white-veil-active .Logo { filter: invert(1); } /* Velo globale: solo Home */ body::before { content: ""; position: fixed; inset: 0; background: rgba(255,255,255,var(--white-veil-opacity)); opacity: 0; pointer-events: none; z-index: 0; transition: opacity var(--veil-duration) ease-in-out; } body.white-veil-active::before { opacity: 1; } /* Disattiva il velo globale sulle 4 pagine secondarie */ body:not(#page-index)::before { display: none; } /* Velo solo sulla contentSection delle pagine secondarie */ body:not(#page-index) .contentSection::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,var(--white-veil-opacity)); opacity: 0; pointer-events: none; z-index: 0; transition: opacity var(--veil-duration) ease-in-out; } body.white-veil-active:not(#page-index) .contentSection::after { opacity: 1; } /* Testo sopra al velo */ body:not(#page-index) .contentSection .textContainer { position: relative; z-index: 1; } /* Riduce le dimensioni del testo nel curriculum nella pagina About Me*/ .details { font-size: 0.85em; /* 85% della dimensione normale */ line-height: 1.5; color: rgb(120, 120, 120); } /*--------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================== BRUSH SYSTEM ========================================================================== */ /* Ci sono elementi del sistema Brush in :root */ /* -------------------------------------------------------------------------- Pennellata superiore applicata alla sezione -------------------------------------------------------------------------- */ .contentSection.brushTop { position: relative; overflow: visible; } .contentSection.brushTop::before { content: ""; position: absolute; left: 0; top: calc(-1 * var(--brush-height)); width: 100%; height: var(--brush-height); background-image: var(--brush-image-top); background-repeat: repeat-x; background-position: left bottom; background-size: auto var(--brush-height); pointer-events: none; z-index: 10; } /* -------------------------------------------------------------------------- Pennellata inferiore: elemento separato -------------------------------------------------------------------------- */ .brushBottom { position: relative; display: block; width: 100%; height: var(--brush-height); margin: 0; padding: 0; background-image: var(--brush-image-bottom); background-repeat: repeat-x; background-position: left top; background-size: auto var(--brush-height); pointer-events: none; z-index: 10; } .brushBottom { transform: scaleY(-1); } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* region DESTINATIONS */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================== */ /* DESTINATIONS: LANDING PAGE - REGOLE COMUNI DESKTOP E MOBILE */ /* ========================================================================== */ /* Qui si trovano SOLO le caratteristiche condivise da desktop e mobile: font, colori, bordi, animazioni e aspetto generale dei componenti. Le misure legate alla larghezza dello schermo si trovano invece in: - Desktop.css: due card affiancate, larghezze e altezze desktop; - Mobile_DESTINATIONS.css: una card per riga e misure mobile/tablet. Per cambiare rapidamente font o dimensioni cerca le etichette: "FONT", "DIMENSIONE", "INTERLINEA", "COLORE". */ /* -------------------------------------------------------------------------- */ /* APERTURA E CHIUSURA DELLA PAGINA INTERNA */ /* -------------------------------------------------------------------------- */ .cardText { display: none; } .destinations { display:flex; flex-direction:column; gap:30px; max-width:1400px; margin:0 auto; } .destGroup { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:350px; gap:30px; } .destRemainder { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:250px; gap:30px; } .card { border-radius:15px; overflow:hidden; position:relative; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:22px; color:rgb(250,250,250); cursor:pointer; transition: transform var(--transition-normal); } .card:hover { transform:translateY(-5px); } /* Pattern fisso del gruppo da 6 */ /* [1][1][2] */ .destGroup .card:nth-child(1) { grid-column:1 / span 2; grid-row:1; } .destGroup .card:nth-child(2) { grid-column:3; grid-row:1 / span 2; } .destGroup .card:nth-child(3) { grid-column:1 / span 2; grid-row:2; } /* [4][5][5] */ .destGroup .card:nth-child(4) { grid-column:1; grid-row:3 / span 2; } .destGroup .card:nth-child(5) { grid-column:2 / span 2; grid-row:3; } .destGroup .card:nth-child(6) { grid-column:2 / span 2; grid-row:4; } /* Gestione eventuali card restanti */ .destRemainder .card { grid-column:auto; grid-row:auto; } @media (max-width:1000px) { .destGroup, .destRemainder{ grid-template-columns:repeat(2,1fr); grid-auto-rows:220px; } .destGroup .card, .destRemainder .card{ grid-column:auto !important; grid-row:auto !important; } } @media (max-width:700px) { .destGroup, .destRemainder{ grid-template-columns:1fr; grid-auto-rows:220px; } } .destRemainder .card:only-child { grid-column:1 / span 3; /* grid-row:span 2; */ } .destinationOverlay { display: none; width: 100%; } .destinationOverlay.open { display: block; } .destinations.hidden { display: none; } /* Distanza fra il titolo "Destinations" e il titolo della pagina interna. Il valore e separato fra Desktop.css e Mobile.css. */ body.destination-is-open .sectionTitle + .xtra-separator { height: var(--destination-open-title-gap); } /* -------------------------------------------------------------------------- */ /* CONTENITORE BIANCO DELLA DESTINAZIONE APERTA */ /* -------------------------------------------------------------------------- */ .destinationLanding { position: relative; /* Serve per posizionare la X. */ width: 100%; min-height: 680px; box-sizing: border-box; /*background: rgb(250,250,250); /* Colore dello sfondo */ color: rgb(40,40,40); /* Colore del testo */ /* FONT GENERALE DELLA PAGINA INTERNA. Cambialo qui per tutti gli elementi che non hanno un font specifico. */ font-family: var(--subpage-font-family); font-size: var(--subpage-font-size); font-weight: var(--subpage-font-weight); line-height: var(--subpage-line-height); } /* -------------------------------------------------------------------------- */ /* PULSANTE X */ /* -------------------------------------------------------------------------- */ /* Comportamento: - nella pagina di dettaglio torna a "All ideas"; - nella pagina principale della destinazione torna alla griglia generale. */ .destinationClose { position: absolute; z-index: 10; /* POSIZIONE DELLA X La X è agganciata al contenitore .destinationLanding, che ha la stessa larghezza del testo e delle fotografie. In questo modo il suo bordo destro resta sempre allineato al bordo destro delle immagini. Per spostarla verticalmente modifica top. Per spostarla orizzontalmente modifica right: - right: 0; = allineata esattamente al bordo della foto; - right: 15px = spostata di 15 px verso l'interno; - right: -15px = spostata di 15 px verso l'esterno. */ top: 18px; right: 0; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; color: rgb(40,40,40); /* Colore della X */ font-family: 'Quicksand', sans-serif; /* Font della X */ font-size: 38px; /* Dimensione della X */ font-weight: 200; /* Spessore della X */ line-height: 1; cursor: pointer; opacity: .68; transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease; } .destinationClose:hover, .destinationClose:focus-visible { opacity: 1; transform: scale(1.08); /* Ingrandimento al mouseover */ outline: none; } /* -------------------------------------------------------------------------- */ /* PULSANTE "ALL IDEAS" IN FONDO AL DETTAGLIO */ /* -------------------------------------------------------------------------- */ .destinationBack { display: inline-block; margin-top: 42px; padding: 9px 0; border: 0; background: transparent; color: rgb(40,40,40); font-family: inherit; font-size: .72em; /* Dimensione del testo "ALL IDEAS". */ cursor: pointer; } .destinationBack:hover { opacity: .58; } /* I due contenitori condividono lo stesso allineamento orizzontale. */ .destinationMainView, .destinationDetailView { width: 100%; /* Occupa tutta la larghezza disponibile. */ max-width: none; /* Nessun limite interno: decide il contenitore esterno. */ box-sizing: border-box; margin-right: auto; margin-left: auto; } /* -------------------------------------------------------------------------- */ /* TITOLO DELLA DESTINAZIONE */ /* -------------------------------------------------------------------------- */ .destinationMainView h2 { margin: 0 0 30px; color: rgb(40,40,40); /* Colore del titolo */ font-family: 'Quicksand', sans-serif; /* Font del titolo */ font-size: 2em; /* Dimensione del titolo */ font-weight: var(--subpage-title-font-weight); /* Peso del titolo interno */ line-height: 1.1; /* Interlinea del titolo */ text-align: left; } /* -------------------------------------------------------------------------- */ /* TESTO INTRODUTTIVO DELLA DESTINAZIONE */ /* -------------------------------------------------------------------------- */ /* Il testo usa il 100% della stessa area occupata dalla griglia delle foto. Non sono presenti max-width o percentuali riduttive. NOTA: una frase lunga può comunque andare a capo: questo è il normale comportamento del testo e non significa che il suo contenitore sia più stretto. */ .destinationIntro { display: block; width: 100%; /* Stessa larghezza della griglia delle foto */ max-width: none; /* Rimuove qualsiasi vecchio limite di larghezza */ box-sizing: border-box; padding: 0; /* Evita rientri laterali rispetto alle immagini */ margin: 0 0 64px; font-family: 'Quicksand', sans-serif; /* Font del testo introduttivo */ font-size: 1em; /* Segue --subpage-font-size */ line-height: 1.8; /* Innterlinea testo destination principale */ text-align: justify; /* Allineamento giustificato */ text-justify: inter-word; hyphens: auto; } .destinationIntro p { width: 100%; /* Il paragrafo riempie tutto il contenitore */ max-width: none; /* Elimina eventuali vecchi limiti di larghezza */ margin: 0; } /* Forzatura mirata sul vecchio ID usato dal JavaScript. Evita che regole precedenti su #overlayText restringano il testo. */ #overlayText { width: 100%; max-width: none; } /* -------------------------------------------------------------------------- */ /* ETICHETTA "IDEAS" */ /* -------------------------------------------------------------------------- */ .destinationIdeasLabel { margin: 0 0 22px; font-family: 'Quicksand', sans-serif; font-size: .82em; /* DIMENSIONE DELLA SCRITTA IDEAS. */ font-weight: 500; letter-spacing: .18em; /* SPAZIO FRA LE LETTERE. */ text-transform: uppercase; } /* -------------------------------------------------------------------------- */ /* GRIGLIA E CARD DELLE IDEE */ /* -------------------------------------------------------------------------- */ .destinationIdeas { display: grid; width: 100%; /* Riferimento esatto per la larghezza del testo. */ max-width: none; box-sizing: border-box; margin: 0; padding: 0; gap: 34px; /* Distanza tra le card */ } .destinationIdeaCard { overflow: hidden; padding: 0; border: 1px solid rgba(40,40,40,.11); /* Colore e spessore del bordo */ border-radius: 2px; /* Arrotondamento degli angoli */ background: #fff; color: rgb(40,40,40); font-family: inherit; text-align: left; cursor: pointer; transition: transform var(--transition-normal) ease, box-shadow var(--transition-normal) ease; } .destinationIdeaCard:hover, .destinationIdeaCard:focus-visible { transform: translateY(-6px); /* Spostamento verso l'alto al passaggio */ box-shadow: 0 18px 42px rgba(0,0,0,.12); /* Ombra della card */ outline: none; } /* Fotografia della card. Il rapporto 16 / 9.2 rende le immagini più basse e più editoriali. Aumenta il secondo numero per abbassarle ancora (es. 16 / 8). */ .destinationIdeaImage { display: block; aspect-ratio: 16 / 9.2; /* Rapporto lunghezza/altezza */ background-position: center; background-size: cover; transition: transform var(--transition-slow) ease; } .destinationIdeaImage--2 { background-position: center 62%; } .destinationIdeaCard:hover .destinationIdeaImage { transform: scale(1.025); } /* Parte testuale sotto la fotografia. */ .destinationIdeaText { position: relative; display: flex; min-height: 108px; /* Altezza minima del blocco testo */ box-sizing: border-box; flex-direction: column; justify-content: center; gap: 7px; /* DIistanza tra titolo e sottotitolo */ padding: 22px 58px 22px 24px; } /* PRIMA RIGA DEL BOX: titolo dell'idea. */ .destinationIdeaText strong { font-family: 'Quicksand', sans-serif; /* Font titolo del box */ font-size: 1.1em; /* Dimensione titolo del box */ font-weight: 500; line-height: 1.25; } /* SECONDA RIGA DEL BOX: sottotitolo. */ .destinationIdeaText small { overflow: hidden; color: rgba(40,40,40,.64); /* Colore del sottotitolo */ font-family: 'Quicksand', sans-serif; /* Font del sottotitolo */ font-size: 1.1em; /* Dimensione del sottotitolo */ line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .destinationIdeaArrow { position: absolute; right: 24px; top: 50%; font-size: 1.2em; /* Dimensione della freccia */ transform: translateY(-50%); } /* -------------------------------------------------------------------------- */ /* PAGINA DI DETTAGLIO DELLA SINGOLA IDEA */ /* -------------------------------------------------------------------------- */ .destinationDetailView { display: none; } .destinationDetailView.open { display: block; } .destinationDetailImage { width: 100%; margin-top: 18px; background-position: center; background-size: cover; } /* -------------------------------------------------------------------------- */ /* CONTENITORE TESTUALE DEL DETTAGLIO */ /* -------------------------------------------------------------------------- */ /* Questo blocco comprende kicker, titolo, descrizione e pulsante "All ideas". IMPORTANTE: - width: 100% fa partire e terminare il testo sugli stessi bordi della foto; - max-width: none elimina il vecchio limite di 790px; - padding: 0 evita rientri laterali nascosti; - box-sizing: border-box mantiene affidabile il calcolo della larghezza. Per restringere nuovamente il testo in futuro, puoi sostituire: max-width: none; con, per esempio: max-width: 900px; e lasciare margin-left/right su auto per centrarlo. */ .destinationDetailCopy { width: 100%; /* STESSA LARGHEZZA DELLA FOTO GRANDE. */ max-width: none; /* NESSUN LIMITE DI LARGHEZZA. */ box-sizing: border-box; padding: 0; /* NESSUN RIENTRO RISPETTO ALLA FOTO. */ margin-right: 0; margin-left: 0; text-align: left; } /* Riga piccola sopra il titolo del dettaglio */ .destinationDetailKicker { margin: 0 0 13px; color: rgba(40,40,40,.62); /* COLORE DEL KICKER. */ font-family: 'Quicksand', sans-serif; font-size: .63em; /* DIMENSIONE DEL KICKER. */ letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; } /* TITOLO DELLA SINGOLA IDEA APERTA */ .destinationDetailView h3 { margin: 0 0 24px; color: rgb(40,40,40); font-family: 'Quicksand', sans-serif;/* FONT DEL TITOLO DETTAGLIO. */ font-size: 1.8em; /* DIMENSIONE DEL TITOLO DETTAGLIO. */ font-weight: var(--subpage-title-font-weight); /* PESO DEL TITOLO DETTAGLIO. */ line-height: 1.5; } /* TESTO COMPLETO DELLA SINGOLA IDEA APERTA */ .destinationDetailView #destinationDetailText { margin: 0; font-family: 'Quicksand', sans-serif;/* FONT DEL TESTO DETTAGLIO. */ font-size: 1em; /* Segue --subpage-font-size. */ line-height: var(--body-line-height);/* INTERLINEA DEL TESTO DETTAGLIO. */ text-align: justify; /* ALLINEAMENTO GIUSTIFICATO. */ text-justify: inter-word; hyphens: auto; } /* PARAGRAFI DEL TESTO DETTAGLIO. */ .destinationDetailView #destinationDetailText p { margin: 0 0 0.8em; } .destinationDetailView #destinationDetailText p:last-child { margin-bottom: 0; } /* Eventuali titoletti ed elenchi inseriti nei template delle descrizioni. */ .destinationDetailView #destinationDetailText h4 { margin: 1.6em 0 .65em; font-size: 1em; font-weight: 600; } .destinationDetailView #destinationDetailText ul, .destinationDetailView #destinationDetailText ol { margin: 0 0 1.2em; padding-left: 1.4em; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #region VEIL: funzioni veil, utilizzate per effetti grafici di ombreggiatura */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Funzioni non utilizzate, mantenute per eventuali riutilizzi futuri * div.veil { background-color: rgba(0,0,0,0.6); } div.midveil { background-color: rgba(0,0,0,0.4); } div.lightveil { background-color: rgba(0,0,0,0.2); } /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #endregion */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/