@greghowe79/the-lib 2.10.0 → 2.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const styles = "/* =========================================\r\n 1. BASE\r\n ========================================= */\r\n.glue-page {\r\n margin: 0 20px;\r\n --duration: 8000ms;\r\n --active-size: 28px;\r\n --inactive-size: 20px;\r\n --spacing-top: 118px;\r\n overflow-x: hidden;\r\n text-rendering: optimizeLegibility;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.glue-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, minmax(5px, 1fr));\r\n column-gap: 28px;\r\n overflow-anchor: none;\r\n align-items: center;\r\n}\r\n\r\n.glue-cell-pre-title,\r\n.glue-cell-post-title,\r\n.glue-cell-pre-slider {\r\n display: none;\r\n}\r\n\r\n.glue-cell-title {\r\n grid-column: 1 / -1;\r\n}\r\n\r\n.glue-text-center {\r\n text-align: center;\r\n}\r\n\r\n.glue-headline {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n color: #333;\r\n font-size: 1.75rem;\r\n line-height: 1.2857;\r\n font-weight: 500;\r\n margin: 0;\r\n}\r\n\r\n.glue-body {\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n color: #3c4043;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.glue-spacer {\r\n margin-top: 24px;\r\n}\r\n\r\n/* =========================================\r\n 2. ACCORDION\r\n ========================================= */\r\n.animated-text-list {\r\n grid-column: 1 / -1;\r\n align-self: center;\r\n margin-top: 40px;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.glue-item-animated-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.item-animated {\r\n position: relative;\r\n cursor: pointer;\r\n padding-left: 32px;\r\n border: none;\r\n scroll-margin-top: calc(var(--spacing-top) + 16px);\r\n transition: padding 0.3s ease;\r\n}\r\n\r\n.item-animated:not(:first-child) {\r\n margin-top: 32px;\r\n}\r\n\r\n.item-title {\r\n margin: 0;\r\n font-size: var(--inactive-size);\r\n color: #5f6368;\r\n font-weight: 400;\r\n transition:\r\n font-size 0.3s ease,\r\n color 0.3s ease;\r\n}\r\n\r\n.item-animated.is-active .item-title {\r\n font-size: var(--active-size);\r\n color: #333;\r\n}\r\n\r\n.accordion-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n opacity: 0;\r\n transition:\r\n max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n opacity 0.4s ease;\r\n}\r\n\r\n.item-animated.is-active .accordion-content {\r\n max-height: 250px;\r\n opacity: 1;\r\n}\r\n\r\n.accordion-inner {\r\n padding-top: 12px;\r\n}\r\n\r\n/* Progress bar */\r\n.item-animated::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 2px;\r\n background-color: #f1f3f4;\r\n}\r\n\r\n.progress-track {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 1.5px;\r\n background-color: #dadce0;\r\n overflow: hidden;\r\n}\r\n\r\n.progress-bar {\r\n width: 100%;\r\n height: 0%;\r\n background-color: #333;\r\n}\r\n\r\n.item-animated.is-active .progress-bar {\r\n animation: progressFillVertical var(--duration) linear forwards;\r\n}\r\n\r\n@keyframes progressFillVertical {\r\n from {\r\n height: 0%;\r\n }\r\n to {\r\n height: 100%;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 3. IMMAGINI\r\n ========================================= */\r\n.glue-slider-image-container {\r\n display: none;\r\n grid-column: 1 / -1;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n min-width: 280px;\r\n aspect-ratio: 999 / 1000;\r\n}\r\n\r\n.slide-picture {\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n z-index: 0;\r\n visibility: hidden;\r\n transition:\r\n opacity 0.6s ease-in-out,\r\n visibility 0.6s;\r\n}\r\n\r\n.slide-picture.show {\r\n opacity: 1;\r\n z-index: 1;\r\n visibility: visible;\r\n}\r\n\r\n.slide-image-element {\r\n width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n display: block;\r\n}\r\n\r\n/* =========================================\r\n 4. PAGINATION (nascosta di default)\r\n ========================================= */\r\n.glue-pagination {\r\n display: none;\r\n}\r\n\r\n.pagination-arrow {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 8px;\r\n color: #5f6368;\r\n font-size: 18px;\r\n line-height: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: color 0.2s ease;\r\n}\r\n\r\n.pagination-arrow:hover {\r\n color: #333;\r\n}\r\n\r\n.pagination-arrow:disabled {\r\n visibility: hidden;\r\n}\r\n\r\n.pagination-number {\r\n border: 1px solid #dadce0;\r\n padding: 6px 20px;\r\n border-radius: 20px;\r\n font-size: 14px;\r\n color: #5f6368;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n user-select: none;\r\n}\r\n\r\n/* =========================================\r\n 5. MOBILE + TABLET (< 1024px)\r\n Layout carousel condiviso\r\n ========================================= */\r\n@media (max-width: 1023px) {\r\n .glue-grid {\r\n grid-template-columns: 1fr;\r\n column-gap: 0;\r\n grid-template-areas:\r\n 'title'\r\n 'image'\r\n 'slider'\r\n 'pagination';\r\n justify-items: center;\r\n align-items: start;\r\n }\r\n\r\n .glue-cell-pre-title,\r\n .glue-cell-post-title,\r\n .glue-cell-pre-slider {\r\n display: none;\r\n }\r\n\r\n .glue-cell-title {\r\n grid-area: title;\r\n grid-column: auto;\r\n width: 100%;\r\n max-width: 780px;\r\n }\r\n\r\n .glue-headline {\r\n max-width: clamp(480px, 75%, 720px);\r\n margin: 0 auto;\r\n }\r\n\r\n /* Immagine centrata sopra */\r\n .glue-slider-image-container {\r\n grid-area: image;\r\n grid-column: auto;\r\n display: flex;\r\n width: 100%;\r\n max-width: 780px;\r\n padding: 20px;\r\n margin-top: 40px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 280px;\r\n }\r\n\r\n /* Carousel: scroll-snap orizzontale */\r\n .animated-text-list {\r\n grid-area: slider;\r\n grid-column: auto;\r\n flex-direction: row;\r\n overflow-x: auto;\r\n scroll-snap-type: x mandatory;\r\n scroll-behavior: smooth;\r\n scrollbar-width: none;\r\n -ms-overflow-style: none;\r\n margin-top: 0;\r\n padding: 0;\r\n width: 100%;\r\n max-width: 780px;\r\n }\r\n\r\n .animated-text-list::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .glue-item-animated-wrapper {\r\n flex-direction: row;\r\n min-width: 100%;\r\n /* Altezza fissa: previene il resize a fisarmonica.\r\n Tutti gli item si allineano in alto,\r\n il wrapper mantiene l'altezza del più alto */\r\n align-items: flex-start;\r\n }\r\n\r\n .item-animated {\r\n flex: 0 0 100%;\r\n scroll-snap-align: center;\r\n padding: 0 40px;\r\n text-align: center;\r\n margin-top: 0 !important;\r\n box-sizing: border-box;\r\n }\r\n\r\n .item-animated::before,\r\n .progress-track {\r\n display: none;\r\n }\r\n\r\n .item-title {\r\n font-size: 1.5rem;\r\n font-weight: 500;\r\n color: #333;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .accordion-content {\r\n max-height: none;\r\n opacity: 1;\r\n overflow: visible;\r\n transition: none;\r\n }\r\n\r\n /* Paginazione visibile */\r\n .glue-pagination {\r\n grid-area: pagination;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n margin-top: 20px;\r\n margin-bottom: 40px;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 5b. TABLET ≥ 600px (sovrascrive solo spacing)\r\n ========================================= */\r\n@media (min-width: 600px) and (max-width: 1023px) {\r\n .glue-page {\r\n margin: 0 40px;\r\n }\r\n\r\n .glue-headline {\r\n font-size: 2.5rem;\r\n line-height: 1.2;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 320px;\r\n }\r\n\r\n .item-title {\r\n font-size: 24px;\r\n font-weight: 400;\r\n margin: 32px 0 0 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: 24px;\r\n color: #333;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 5a. MOBILE < 600px (sovrascrive font)\r\n ========================================= */\r\n@media (max-width: 599px) {\r\n .glue-headline {\r\n font-size: 1.75rem;\r\n line-height: 1.2857;\r\n letter-spacing: 0;\r\n }\r\n\r\n .item-title {\r\n font-size: 20px;\r\n font-weight: 400;\r\n margin: 24px 0 0 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: 20px;\r\n color: #333;\r\n }\r\n\r\n .glue-slider-image-container {\r\n padding: 0 20px;\r\n margin-top: 60px;\r\n }\r\n\r\n .accordion-inner {\r\n color: #5f6368;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 6. DESKTOP ≥ 1024px\r\n ========================================= */\r\n@media (min-width: 1024px) {\r\n .glue-page {\r\n margin: 0 72px;\r\n }\r\n\r\n .glue-grid {\r\n grid-template-columns: repeat(12, minmax(5px, 1fr));\r\n grid-template-areas: none;\r\n column-gap: 48px;\r\n height: 750px;\r\n align-items: center;\r\n justify-items: stretch;\r\n }\r\n\r\n /* Riga 1: titolo */\r\n .glue-cell-pre-title {\r\n display: block;\r\n grid-column: 1 / span 1;\r\n grid-row: 1;\r\n }\r\n\r\n .glue-cell-title {\r\n grid-column: 2 / span 10;\r\n grid-row: 1;\r\n width: auto;\r\n max-width: none;\r\n }\r\n\r\n .glue-cell-post-title {\r\n display: block;\r\n grid-column: 12 / span 1;\r\n grid-row: 1;\r\n }\r\n\r\n .glue-headline {\r\n font-size: 3rem;\r\n line-height: 1.1666;\r\n max-width: none;\r\n }\r\n\r\n .glue-cell-pre-slider {\r\n display: block;\r\n grid-column: 1 / span 1;\r\n grid-row: 2;\r\n }\r\n\r\n /* Riga 2: accordion (sinistra) */\r\n .animated-text-list {\r\n grid-column: 2 / span 5;\r\n grid-row: 2;\r\n flex-direction: column;\r\n overflow: visible;\r\n scroll-snap-type: none;\r\n width: auto;\r\n max-width: none;\r\n margin-top: 0;\r\n }\r\n\r\n .glue-item-animated-wrapper {\r\n flex-direction: column;\r\n min-width: unset;\r\n }\r\n\r\n .item-animated {\r\n flex: unset;\r\n text-align: left;\r\n padding: 0 0 0 32px;\r\n scroll-snap-align: unset;\r\n }\r\n\r\n .item-animated:not(:first-child) {\r\n margin-top: 32px !important;\r\n }\r\n\r\n .item-title {\r\n font-size: var(--inactive-size);\r\n color: #5f6368;\r\n font-weight: 400;\r\n margin-bottom: 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: var(--active-size);\r\n color: #333;\r\n }\r\n\r\n .item-animated::before,\r\n .progress-track {\r\n display: block;\r\n }\r\n\r\n .accordion-content {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n transition:\r\n max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n opacity 0.4s ease;\r\n }\r\n\r\n .item-animated.is-active .accordion-content {\r\n max-height: 250px;\r\n opacity: 1;\r\n }\r\n\r\n .accordion-inner {\r\n color: #3c4043;\r\n }\r\n\r\n /* Riga 2: immagine (destra) */\r\n .glue-slider-image-container {\r\n display: flex;\r\n grid-column: 8 / span 4;\r\n grid-row: 2;\r\n transform: translateX(-32px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n height: 100%;\r\n width: auto;\r\n max-width: none;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 434px;\r\n }\r\n\r\n .glue-pagination {\r\n display: none;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .glue-grid {\r\n column-gap: 64px;\r\n height: 800px;\r\n }\r\n\r\n .glue-slider-image-container {\r\n grid-column: 8 / span 5;\r\n transform: translateX(-125px);\r\n }\r\n\r\n .glue-cell-title {\r\n grid-column: 3 / span 8;\r\n }\r\n\r\n /* Reverse ≥ 1440px */\r\n .glue-reverse .glue-slider-image-container {\r\n grid-column: 1 / span 5;\r\n transform: translateX(125px);\r\n }\r\n\r\n .glue-reverse .animated-text-list {\r\n grid-column: 7 / span 5;\r\n }\r\n}\r\n\r\n@media (min-width: 1600px) {\r\n .glue-grid {\r\n margin-inline: auto;\r\n max-width: 1456px;\r\n }\r\n}\r\n\r\n/* =========================================\r\n REVERSE LAYOUT (desktop only)\r\n Immagine a sinistra, accordion a destra\r\n ========================================= */\r\n@media (min-width: 1024px) {\r\n .glue-reverse .glue-slider-image-container {\r\n grid-column: 2 / span 4;\r\n transform: translateX(32px);\r\n }\r\n\r\n .glue-reverse .animated-text-list {\r\n grid-column: 7 / span 5;\r\n }\r\n}\r\n";
|
|
2
|
+
const styles = "/* =========================================\r\n 1. BASE\r\n ========================================= */\r\n.glue-page {\r\n margin: 0 20px;\r\n --duration: 8000ms;\r\n --active-size: 28px;\r\n --inactive-size: 20px;\r\n --spacing-top: 118px;\r\n overflow-x: hidden;\r\n text-rendering: optimizeLegibility;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.glue-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, minmax(5px, 1fr));\r\n column-gap: 28px;\r\n overflow-anchor: none;\r\n align-items: center;\r\n}\r\n\r\n.glue-cell-pre-title,\r\n.glue-cell-post-title,\r\n.glue-cell-pre-slider {\r\n display: none;\r\n}\r\n\r\n.glue-cell-title {\r\n grid-column: 1 / -1;\r\n}\r\n\r\n.glue-text-center {\r\n text-align: center;\r\n}\r\n\r\n.glue-headline {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n color: #333;\r\n font-size: 1.75rem;\r\n line-height: 1.2857;\r\n font-weight: 500;\r\n margin: 0;\r\n}\r\n\r\n.glue-body {\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n color: #3c4043;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.glue-spacer {\r\n margin-top: 24px;\r\n}\r\n\r\n/* =========================================\r\n 2. ACCORDION\r\n ========================================= */\r\n.animated-text-list {\r\n grid-column: 1 / -1;\r\n align-self: center;\r\n margin-top: 40px;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.glue-item-animated-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.item-animated {\r\n position: relative;\r\n cursor: pointer;\r\n padding-left: 32px;\r\n border: none;\r\n scroll-margin-top: calc(var(--spacing-top) + 16px);\r\n transition: padding 0.3s ease;\r\n}\r\n\r\n.item-animated:not(:first-child) {\r\n margin-top: 32px;\r\n}\r\n\r\n.item-title {\r\n margin: 0;\r\n font-size: var(--inactive-size);\r\n color: #5f6368;\r\n font-weight: 400;\r\n transition:\r\n font-size 0.3s ease,\r\n color 0.3s ease;\r\n}\r\n\r\n.item-animated.is-active .item-title {\r\n font-size: var(--active-size);\r\n color: #333;\r\n}\r\n\r\n.accordion-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n opacity: 0;\r\n transition:\r\n max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n opacity 0.4s ease;\r\n}\r\n\r\n.item-animated.is-active .accordion-content {\r\n max-height: 250px;\r\n opacity: 1;\r\n}\r\n\r\n/* .accordion-inner {\r\n padding-top: 12px;\r\n} */\r\n\r\n.accordion-inner {\r\n margin-top: 16px;\r\n}\r\n\r\n/* Progress bar */\r\n.item-animated::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 2px;\r\n background-color: #f1f3f4;\r\n}\r\n\r\n.progress-track {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 1.5px;\r\n background-color: #dadce0;\r\n overflow: hidden;\r\n}\r\n\r\n.progress-bar {\r\n width: 100%;\r\n height: 0%;\r\n background-color: #333;\r\n}\r\n\r\n.item-animated.is-active .progress-bar {\r\n animation: progressFillVertical var(--duration) linear forwards;\r\n}\r\n\r\n@keyframes progressFillVertical {\r\n from {\r\n height: 0%;\r\n }\r\n to {\r\n height: 100%;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 3. IMMAGINI\r\n ========================================= */\r\n.glue-slider-image-container {\r\n display: none;\r\n grid-column: 1 / -1;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n min-width: 280px;\r\n aspect-ratio: 999 / 1000;\r\n}\r\n\r\n.slide-picture {\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n z-index: 0;\r\n visibility: hidden;\r\n transition:\r\n opacity 0.6s ease-in-out,\r\n visibility 0.6s;\r\n}\r\n\r\n.slide-picture.show {\r\n opacity: 1;\r\n z-index: 1;\r\n visibility: visible;\r\n}\r\n\r\n.slide-image-element {\r\n width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n display: block;\r\n}\r\n\r\n/* =========================================\r\n 4. PAGINATION (nascosta di default)\r\n ========================================= */\r\n.glue-pagination {\r\n display: none;\r\n}\r\n\r\n.pagination-arrow {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 8px;\r\n color: #5f6368;\r\n font-size: 18px;\r\n line-height: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: color 0.2s ease;\r\n}\r\n\r\n.pagination-arrow:hover {\r\n color: #333;\r\n}\r\n\r\n.pagination-arrow:disabled {\r\n visibility: hidden;\r\n}\r\n\r\n.pagination-number {\r\n border: 1px solid #dadce0;\r\n padding: 6px 20px;\r\n border-radius: 20px;\r\n font-size: 14px;\r\n color: #5f6368;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n user-select: none;\r\n}\r\n\r\n/* =========================================\r\n 5. MOBILE + TABLET (< 1024px)\r\n Layout carousel condiviso\r\n ========================================= */\r\n@media (max-width: 1023px) {\r\n .glue-grid {\r\n grid-template-columns: 1fr;\r\n column-gap: 0;\r\n grid-template-areas:\r\n 'title'\r\n 'image'\r\n 'slider'\r\n 'pagination';\r\n justify-items: center;\r\n align-items: start;\r\n }\r\n\r\n .glue-cell-pre-title,\r\n .glue-cell-post-title,\r\n .glue-cell-pre-slider {\r\n display: none;\r\n }\r\n\r\n .glue-cell-title {\r\n grid-area: title;\r\n grid-column: auto;\r\n width: 100%;\r\n max-width: 780px;\r\n }\r\n\r\n .glue-headline {\r\n max-width: clamp(480px, 75%, 720px);\r\n margin: 0 auto;\r\n }\r\n\r\n /* Immagine centrata sopra */\r\n .glue-slider-image-container {\r\n grid-area: image;\r\n grid-column: auto;\r\n display: flex;\r\n width: 100%;\r\n max-width: 780px;\r\n\r\n /* padding: 20px;\r\n margin-top: 40px;\r\n margin-bottom: 40px; */\r\n padding: 0 20px;\r\n margin-top: 60px;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 280px;\r\n }\r\n\r\n /* Carousel: scroll-snap orizzontale */\r\n .animated-text-list {\r\n grid-area: slider;\r\n grid-column: auto;\r\n flex-direction: row;\r\n overflow-x: auto;\r\n scroll-snap-type: x mandatory;\r\n scroll-behavior: smooth;\r\n scrollbar-width: none;\r\n -ms-overflow-style: none;\r\n margin-top: 0;\r\n padding: 0;\r\n width: 100%;\r\n max-width: 780px;\r\n }\r\n\r\n .animated-text-list::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .glue-item-animated-wrapper {\r\n flex-direction: row;\r\n min-width: 100%;\r\n /* Altezza fissa: previene il resize a fisarmonica.\r\n Tutti gli item si allineano in alto,\r\n il wrapper mantiene l'altezza del più alto */\r\n align-items: flex-start;\r\n }\r\n\r\n .item-animated {\r\n flex: 0 0 100%;\r\n scroll-snap-align: center;\r\n padding: 0 40px;\r\n text-align: center;\r\n margin-top: 0 !important;\r\n box-sizing: border-box;\r\n }\r\n\r\n .item-animated::before,\r\n .progress-track {\r\n display: none;\r\n }\r\n\r\n .item-title {\r\n font-size: 1.5rem;\r\n font-weight: 500;\r\n color: #333;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .accordion-content {\r\n max-height: none;\r\n opacity: 1;\r\n overflow: visible;\r\n transition: none;\r\n }\r\n\r\n /* Paginazione visibile */\r\n .glue-pagination {\r\n grid-area: pagination;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n margin-top: 20px;\r\n margin-bottom: 40px;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 5b. TABLET ≥ 600px (sovrascrive solo spacing)\r\n ========================================= */\r\n@media (min-width: 600px) and (max-width: 1023px) {\r\n .glue-page {\r\n margin: 0 40px;\r\n }\r\n\r\n .glue-headline {\r\n font-size: 2.5rem;\r\n line-height: 1.2;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 320px;\r\n }\r\n\r\n .item-title {\r\n font-size: 24px;\r\n font-weight: 400;\r\n margin: 32px 0 0 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: 24px;\r\n color: #333;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 5a. MOBILE < 600px (sovrascrive font)\r\n ========================================= */\r\n@media (max-width: 599px) {\r\n .glue-headline {\r\n font-size: 1.75rem;\r\n line-height: 1.2857;\r\n letter-spacing: 0;\r\n }\r\n\r\n .item-title {\r\n font-size: 20px;\r\n font-weight: 400;\r\n margin: 24px 0 0 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: 20px;\r\n color: #333;\r\n }\r\n\r\n .accordion-inner {\r\n color: #5f6368;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 6. DESKTOP ≥ 1024px\r\n ========================================= */\r\n@media (min-width: 1024px) {\r\n .accordion-inner {\r\n margin-top: 24px;\r\n }\r\n\r\n .glue-page {\r\n margin: 0 72px;\r\n }\r\n\r\n .glue-grid {\r\n grid-template-columns: repeat(12, minmax(5px, 1fr));\r\n grid-template-areas: none;\r\n column-gap: 48px;\r\n height: 750px;\r\n align-items: center;\r\n justify-items: stretch;\r\n }\r\n\r\n /* Riga 1: titolo */\r\n .glue-cell-pre-title {\r\n display: block;\r\n grid-column: 1 / span 1;\r\n grid-row: 1;\r\n }\r\n\r\n .glue-cell-title {\r\n grid-column: 2 / span 10;\r\n grid-row: 1;\r\n width: auto;\r\n max-width: none;\r\n }\r\n\r\n .glue-cell-post-title {\r\n display: block;\r\n grid-column: 12 / span 1;\r\n grid-row: 1;\r\n }\r\n\r\n .glue-headline {\r\n font-size: 3rem;\r\n line-height: 1.1666;\r\n max-width: none;\r\n }\r\n\r\n .glue-cell-pre-slider {\r\n display: block;\r\n grid-column: 1 / span 1;\r\n grid-row: 2;\r\n }\r\n\r\n /* Riga 2: accordion (sinistra) */\r\n .animated-text-list {\r\n grid-column: 2 / span 5;\r\n grid-row: 2;\r\n flex-direction: column;\r\n overflow: visible;\r\n scroll-snap-type: none;\r\n width: auto;\r\n max-width: none;\r\n margin-top: 0;\r\n }\r\n\r\n .glue-item-animated-wrapper {\r\n flex-direction: column;\r\n min-width: unset;\r\n }\r\n\r\n .item-animated {\r\n flex: unset;\r\n text-align: left;\r\n padding: 0 0 0 32px;\r\n scroll-snap-align: unset;\r\n }\r\n\r\n .item-animated:not(:first-child) {\r\n margin-top: 32px !important;\r\n }\r\n\r\n .item-title {\r\n font-size: var(--inactive-size);\r\n color: #5f6368;\r\n font-weight: 400;\r\n margin-bottom: 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: var(--active-size);\r\n color: #333;\r\n }\r\n\r\n .item-animated::before,\r\n .progress-track {\r\n display: block;\r\n }\r\n\r\n .accordion-content {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n transition:\r\n max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n opacity 0.4s ease;\r\n }\r\n\r\n .item-animated.is-active .accordion-content {\r\n max-height: 250px;\r\n opacity: 1;\r\n }\r\n\r\n .accordion-inner {\r\n color: #3c4043;\r\n }\r\n\r\n /* Riga 2: immagine (destra) */\r\n .glue-slider-image-container {\r\n display: flex;\r\n grid-column: 8 / span 4;\r\n grid-row: 2;\r\n transform: translateX(-32px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n height: 100%;\r\n width: auto;\r\n max-width: none;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 434px;\r\n }\r\n\r\n .glue-pagination {\r\n display: none;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .glue-grid {\r\n column-gap: 64px;\r\n height: 800px;\r\n }\r\n\r\n .glue-slider-image-container {\r\n grid-column: 8 / span 5;\r\n transform: translateX(-125px);\r\n }\r\n\r\n .glue-cell-title {\r\n grid-column: 3 / span 8;\r\n }\r\n\r\n /* Reverse ≥ 1440px */\r\n .glue-reverse .glue-slider-image-container {\r\n grid-column: 1 / span 5;\r\n transform: translateX(125px);\r\n }\r\n\r\n .glue-reverse .animated-text-list {\r\n grid-column: 7 / span 5;\r\n }\r\n}\r\n\r\n@media (min-width: 1600px) {\r\n .glue-grid {\r\n margin-inline: auto;\r\n max-width: 1456px;\r\n }\r\n}\r\n\r\n/* =========================================\r\n REVERSE LAYOUT (desktop only)\r\n Immagine a sinistra, accordion a destra\r\n ========================================= */\r\n@media (min-width: 1024px) {\r\n .glue-reverse .glue-slider-image-container {\r\n grid-column: 2 / span 4;\r\n transform: translateX(32px);\r\n }\r\n\r\n .glue-reverse .animated-text-list {\r\n grid-column: 7 / span 5;\r\n }\r\n}\r\n";
|
|
3
3
|
module.exports = styles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = "/* =========================================\r\n 1. BASE\r\n ========================================= */\r\n.glue-page {\r\n margin: 0 20px;\r\n --duration: 8000ms;\r\n --active-size: 28px;\r\n --inactive-size: 20px;\r\n --spacing-top: 118px;\r\n overflow-x: hidden;\r\n text-rendering: optimizeLegibility;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.glue-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, minmax(5px, 1fr));\r\n column-gap: 28px;\r\n overflow-anchor: none;\r\n align-items: center;\r\n}\r\n\r\n.glue-cell-pre-title,\r\n.glue-cell-post-title,\r\n.glue-cell-pre-slider {\r\n display: none;\r\n}\r\n\r\n.glue-cell-title {\r\n grid-column: 1 / -1;\r\n}\r\n\r\n.glue-text-center {\r\n text-align: center;\r\n}\r\n\r\n.glue-headline {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n color: #333;\r\n font-size: 1.75rem;\r\n line-height: 1.2857;\r\n font-weight: 500;\r\n margin: 0;\r\n}\r\n\r\n.glue-body {\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n color: #3c4043;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.glue-spacer {\r\n margin-top: 24px;\r\n}\r\n\r\n/* =========================================\r\n 2. ACCORDION\r\n ========================================= */\r\n.animated-text-list {\r\n grid-column: 1 / -1;\r\n align-self: center;\r\n margin-top: 40px;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.glue-item-animated-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.item-animated {\r\n position: relative;\r\n cursor: pointer;\r\n padding-left: 32px;\r\n border: none;\r\n scroll-margin-top: calc(var(--spacing-top) + 16px);\r\n transition: padding 0.3s ease;\r\n}\r\n\r\n.item-animated:not(:first-child) {\r\n margin-top: 32px;\r\n}\r\n\r\n.item-title {\r\n margin: 0;\r\n font-size: var(--inactive-size);\r\n color: #5f6368;\r\n font-weight: 400;\r\n transition:\r\n font-size 0.3s ease,\r\n color 0.3s ease;\r\n}\r\n\r\n.item-animated.is-active .item-title {\r\n font-size: var(--active-size);\r\n color: #333;\r\n}\r\n\r\n.accordion-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n opacity: 0;\r\n transition:\r\n max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n opacity 0.4s ease;\r\n}\r\n\r\n.item-animated.is-active .accordion-content {\r\n max-height: 250px;\r\n opacity: 1;\r\n}\r\n\r\n.accordion-inner {\r\n padding-top: 12px;\r\n}\r\n\r\n/* Progress bar */\r\n.item-animated::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 2px;\r\n background-color: #f1f3f4;\r\n}\r\n\r\n.progress-track {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 1.5px;\r\n background-color: #dadce0;\r\n overflow: hidden;\r\n}\r\n\r\n.progress-bar {\r\n width: 100%;\r\n height: 0%;\r\n background-color: #333;\r\n}\r\n\r\n.item-animated.is-active .progress-bar {\r\n animation: progressFillVertical var(--duration) linear forwards;\r\n}\r\n\r\n@keyframes progressFillVertical {\r\n from {\r\n height: 0%;\r\n }\r\n to {\r\n height: 100%;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 3. IMMAGINI\r\n ========================================= */\r\n.glue-slider-image-container {\r\n display: none;\r\n grid-column: 1 / -1;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n min-width: 280px;\r\n aspect-ratio: 999 / 1000;\r\n}\r\n\r\n.slide-picture {\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n z-index: 0;\r\n visibility: hidden;\r\n transition:\r\n opacity 0.6s ease-in-out,\r\n visibility 0.6s;\r\n}\r\n\r\n.slide-picture.show {\r\n opacity: 1;\r\n z-index: 1;\r\n visibility: visible;\r\n}\r\n\r\n.slide-image-element {\r\n width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n display: block;\r\n}\r\n\r\n/* =========================================\r\n 4. PAGINATION (nascosta di default)\r\n ========================================= */\r\n.glue-pagination {\r\n display: none;\r\n}\r\n\r\n.pagination-arrow {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 8px;\r\n color: #5f6368;\r\n font-size: 18px;\r\n line-height: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: color 0.2s ease;\r\n}\r\n\r\n.pagination-arrow:hover {\r\n color: #333;\r\n}\r\n\r\n.pagination-arrow:disabled {\r\n visibility: hidden;\r\n}\r\n\r\n.pagination-number {\r\n border: 1px solid #dadce0;\r\n padding: 6px 20px;\r\n border-radius: 20px;\r\n font-size: 14px;\r\n color: #5f6368;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n user-select: none;\r\n}\r\n\r\n/* =========================================\r\n 5. MOBILE + TABLET (< 1024px)\r\n Layout carousel condiviso\r\n ========================================= */\r\n@media (max-width: 1023px) {\r\n .glue-grid {\r\n grid-template-columns: 1fr;\r\n column-gap: 0;\r\n grid-template-areas:\r\n 'title'\r\n 'image'\r\n 'slider'\r\n 'pagination';\r\n justify-items: center;\r\n align-items: start;\r\n }\r\n\r\n .glue-cell-pre-title,\r\n .glue-cell-post-title,\r\n .glue-cell-pre-slider {\r\n display: none;\r\n }\r\n\r\n .glue-cell-title {\r\n grid-area: title;\r\n grid-column: auto;\r\n width: 100%;\r\n max-width: 780px;\r\n }\r\n\r\n .glue-headline {\r\n max-width: clamp(480px, 75%, 720px);\r\n margin: 0 auto;\r\n }\r\n\r\n /* Immagine centrata sopra */\r\n .glue-slider-image-container {\r\n grid-area: image;\r\n grid-column: auto;\r\n display: flex;\r\n width: 100%;\r\n max-width: 780px;\r\n padding: 20px;\r\n margin-top: 40px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 280px;\r\n }\r\n\r\n /* Carousel: scroll-snap orizzontale */\r\n .animated-text-list {\r\n grid-area: slider;\r\n grid-column: auto;\r\n flex-direction: row;\r\n overflow-x: auto;\r\n scroll-snap-type: x mandatory;\r\n scroll-behavior: smooth;\r\n scrollbar-width: none;\r\n -ms-overflow-style: none;\r\n margin-top: 0;\r\n padding: 0;\r\n width: 100%;\r\n max-width: 780px;\r\n }\r\n\r\n .animated-text-list::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .glue-item-animated-wrapper {\r\n flex-direction: row;\r\n min-width: 100%;\r\n /* Altezza fissa: previene il resize a fisarmonica.\r\n Tutti gli item si allineano in alto,\r\n il wrapper mantiene l'altezza del più alto */\r\n align-items: flex-start;\r\n }\r\n\r\n .item-animated {\r\n flex: 0 0 100%;\r\n scroll-snap-align: center;\r\n padding: 0 40px;\r\n text-align: center;\r\n margin-top: 0 !important;\r\n box-sizing: border-box;\r\n }\r\n\r\n .item-animated::before,\r\n .progress-track {\r\n display: none;\r\n }\r\n\r\n .item-title {\r\n font-size: 1.5rem;\r\n font-weight: 500;\r\n color: #333;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .accordion-content {\r\n max-height: none;\r\n opacity: 1;\r\n overflow: visible;\r\n transition: none;\r\n }\r\n\r\n /* Paginazione visibile */\r\n .glue-pagination {\r\n grid-area: pagination;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n margin-top: 20px;\r\n margin-bottom: 40px;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 5b. TABLET ≥ 600px (sovrascrive solo spacing)\r\n ========================================= */\r\n@media (min-width: 600px) and (max-width: 1023px) {\r\n .glue-page {\r\n margin: 0 40px;\r\n }\r\n\r\n .glue-headline {\r\n font-size: 2.5rem;\r\n line-height: 1.2;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 320px;\r\n }\r\n\r\n .item-title {\r\n font-size: 24px;\r\n font-weight: 400;\r\n margin: 32px 0 0 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: 24px;\r\n color: #333;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 5a. MOBILE < 600px (sovrascrive font)\r\n ========================================= */\r\n@media (max-width: 599px) {\r\n .glue-headline {\r\n font-size: 1.75rem;\r\n line-height: 1.2857;\r\n letter-spacing: 0;\r\n }\r\n\r\n .item-title {\r\n font-size: 20px;\r\n font-weight: 400;\r\n margin: 24px 0 0 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: 20px;\r\n color: #333;\r\n }\r\n\r\n .glue-slider-image-container {\r\n padding: 0 20px;\r\n margin-top: 60px;\r\n }\r\n\r\n .accordion-inner {\r\n color: #5f6368;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 6. DESKTOP ≥ 1024px\r\n ========================================= */\r\n@media (min-width: 1024px) {\r\n .glue-page {\r\n margin: 0 72px;\r\n }\r\n\r\n .glue-grid {\r\n grid-template-columns: repeat(12, minmax(5px, 1fr));\r\n grid-template-areas: none;\r\n column-gap: 48px;\r\n height: 750px;\r\n align-items: center;\r\n justify-items: stretch;\r\n }\r\n\r\n /* Riga 1: titolo */\r\n .glue-cell-pre-title {\r\n display: block;\r\n grid-column: 1 / span 1;\r\n grid-row: 1;\r\n }\r\n\r\n .glue-cell-title {\r\n grid-column: 2 / span 10;\r\n grid-row: 1;\r\n width: auto;\r\n max-width: none;\r\n }\r\n\r\n .glue-cell-post-title {\r\n display: block;\r\n grid-column: 12 / span 1;\r\n grid-row: 1;\r\n }\r\n\r\n .glue-headline {\r\n font-size: 3rem;\r\n line-height: 1.1666;\r\n max-width: none;\r\n }\r\n\r\n .glue-cell-pre-slider {\r\n display: block;\r\n grid-column: 1 / span 1;\r\n grid-row: 2;\r\n }\r\n\r\n /* Riga 2: accordion (sinistra) */\r\n .animated-text-list {\r\n grid-column: 2 / span 5;\r\n grid-row: 2;\r\n flex-direction: column;\r\n overflow: visible;\r\n scroll-snap-type: none;\r\n width: auto;\r\n max-width: none;\r\n margin-top: 0;\r\n }\r\n\r\n .glue-item-animated-wrapper {\r\n flex-direction: column;\r\n min-width: unset;\r\n }\r\n\r\n .item-animated {\r\n flex: unset;\r\n text-align: left;\r\n padding: 0 0 0 32px;\r\n scroll-snap-align: unset;\r\n }\r\n\r\n .item-animated:not(:first-child) {\r\n margin-top: 32px !important;\r\n }\r\n\r\n .item-title {\r\n font-size: var(--inactive-size);\r\n color: #5f6368;\r\n font-weight: 400;\r\n margin-bottom: 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: var(--active-size);\r\n color: #333;\r\n }\r\n\r\n .item-animated::before,\r\n .progress-track {\r\n display: block;\r\n }\r\n\r\n .accordion-content {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n transition:\r\n max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n opacity 0.4s ease;\r\n }\r\n\r\n .item-animated.is-active .accordion-content {\r\n max-height: 250px;\r\n opacity: 1;\r\n }\r\n\r\n .accordion-inner {\r\n color: #3c4043;\r\n }\r\n\r\n /* Riga 2: immagine (destra) */\r\n .glue-slider-image-container {\r\n display: flex;\r\n grid-column: 8 / span 4;\r\n grid-row: 2;\r\n transform: translateX(-32px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n height: 100%;\r\n width: auto;\r\n max-width: none;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 434px;\r\n }\r\n\r\n .glue-pagination {\r\n display: none;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .glue-grid {\r\n column-gap: 64px;\r\n height: 800px;\r\n }\r\n\r\n .glue-slider-image-container {\r\n grid-column: 8 / span 5;\r\n transform: translateX(-125px);\r\n }\r\n\r\n .glue-cell-title {\r\n grid-column: 3 / span 8;\r\n }\r\n\r\n /* Reverse ≥ 1440px */\r\n .glue-reverse .glue-slider-image-container {\r\n grid-column: 1 / span 5;\r\n transform: translateX(125px);\r\n }\r\n\r\n .glue-reverse .animated-text-list {\r\n grid-column: 7 / span 5;\r\n }\r\n}\r\n\r\n@media (min-width: 1600px) {\r\n .glue-grid {\r\n margin-inline: auto;\r\n max-width: 1456px;\r\n }\r\n}\r\n\r\n/* =========================================\r\n REVERSE LAYOUT (desktop only)\r\n Immagine a sinistra, accordion a destra\r\n ========================================= */\r\n@media (min-width: 1024px) {\r\n .glue-reverse .glue-slider-image-container {\r\n grid-column: 2 / span 4;\r\n transform: translateX(32px);\r\n }\r\n\r\n .glue-reverse .animated-text-list {\r\n grid-column: 7 / span 5;\r\n }\r\n}\r\n";
|
|
1
|
+
const styles = "/* =========================================\r\n 1. BASE\r\n ========================================= */\r\n.glue-page {\r\n margin: 0 20px;\r\n --duration: 8000ms;\r\n --active-size: 28px;\r\n --inactive-size: 20px;\r\n --spacing-top: 118px;\r\n overflow-x: hidden;\r\n text-rendering: optimizeLegibility;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.glue-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, minmax(5px, 1fr));\r\n column-gap: 28px;\r\n overflow-anchor: none;\r\n align-items: center;\r\n}\r\n\r\n.glue-cell-pre-title,\r\n.glue-cell-post-title,\r\n.glue-cell-pre-slider {\r\n display: none;\r\n}\r\n\r\n.glue-cell-title {\r\n grid-column: 1 / -1;\r\n}\r\n\r\n.glue-text-center {\r\n text-align: center;\r\n}\r\n\r\n.glue-headline {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n color: #333;\r\n font-size: 1.75rem;\r\n line-height: 1.2857;\r\n font-weight: 500;\r\n margin: 0;\r\n}\r\n\r\n.glue-body {\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n color: #3c4043;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.glue-spacer {\r\n margin-top: 24px;\r\n}\r\n\r\n/* =========================================\r\n 2. ACCORDION\r\n ========================================= */\r\n.animated-text-list {\r\n grid-column: 1 / -1;\r\n align-self: center;\r\n margin-top: 40px;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.glue-item-animated-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.item-animated {\r\n position: relative;\r\n cursor: pointer;\r\n padding-left: 32px;\r\n border: none;\r\n scroll-margin-top: calc(var(--spacing-top) + 16px);\r\n transition: padding 0.3s ease;\r\n}\r\n\r\n.item-animated:not(:first-child) {\r\n margin-top: 32px;\r\n}\r\n\r\n.item-title {\r\n margin: 0;\r\n font-size: var(--inactive-size);\r\n color: #5f6368;\r\n font-weight: 400;\r\n transition:\r\n font-size 0.3s ease,\r\n color 0.3s ease;\r\n}\r\n\r\n.item-animated.is-active .item-title {\r\n font-size: var(--active-size);\r\n color: #333;\r\n}\r\n\r\n.accordion-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n opacity: 0;\r\n transition:\r\n max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n opacity 0.4s ease;\r\n}\r\n\r\n.item-animated.is-active .accordion-content {\r\n max-height: 250px;\r\n opacity: 1;\r\n}\r\n\r\n/* .accordion-inner {\r\n padding-top: 12px;\r\n} */\r\n\r\n.accordion-inner {\r\n margin-top: 16px;\r\n}\r\n\r\n/* Progress bar */\r\n.item-animated::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 2px;\r\n background-color: #f1f3f4;\r\n}\r\n\r\n.progress-track {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 1.5px;\r\n background-color: #dadce0;\r\n overflow: hidden;\r\n}\r\n\r\n.progress-bar {\r\n width: 100%;\r\n height: 0%;\r\n background-color: #333;\r\n}\r\n\r\n.item-animated.is-active .progress-bar {\r\n animation: progressFillVertical var(--duration) linear forwards;\r\n}\r\n\r\n@keyframes progressFillVertical {\r\n from {\r\n height: 0%;\r\n }\r\n to {\r\n height: 100%;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 3. IMMAGINI\r\n ========================================= */\r\n.glue-slider-image-container {\r\n display: none;\r\n grid-column: 1 / -1;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n min-width: 280px;\r\n aspect-ratio: 999 / 1000;\r\n}\r\n\r\n.slide-picture {\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n z-index: 0;\r\n visibility: hidden;\r\n transition:\r\n opacity 0.6s ease-in-out,\r\n visibility 0.6s;\r\n}\r\n\r\n.slide-picture.show {\r\n opacity: 1;\r\n z-index: 1;\r\n visibility: visible;\r\n}\r\n\r\n.slide-image-element {\r\n width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n display: block;\r\n}\r\n\r\n/* =========================================\r\n 4. PAGINATION (nascosta di default)\r\n ========================================= */\r\n.glue-pagination {\r\n display: none;\r\n}\r\n\r\n.pagination-arrow {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 8px;\r\n color: #5f6368;\r\n font-size: 18px;\r\n line-height: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: color 0.2s ease;\r\n}\r\n\r\n.pagination-arrow:hover {\r\n color: #333;\r\n}\r\n\r\n.pagination-arrow:disabled {\r\n visibility: hidden;\r\n}\r\n\r\n.pagination-number {\r\n border: 1px solid #dadce0;\r\n padding: 6px 20px;\r\n border-radius: 20px;\r\n font-size: 14px;\r\n color: #5f6368;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n user-select: none;\r\n}\r\n\r\n/* =========================================\r\n 5. MOBILE + TABLET (< 1024px)\r\n Layout carousel condiviso\r\n ========================================= */\r\n@media (max-width: 1023px) {\r\n .glue-grid {\r\n grid-template-columns: 1fr;\r\n column-gap: 0;\r\n grid-template-areas:\r\n 'title'\r\n 'image'\r\n 'slider'\r\n 'pagination';\r\n justify-items: center;\r\n align-items: start;\r\n }\r\n\r\n .glue-cell-pre-title,\r\n .glue-cell-post-title,\r\n .glue-cell-pre-slider {\r\n display: none;\r\n }\r\n\r\n .glue-cell-title {\r\n grid-area: title;\r\n grid-column: auto;\r\n width: 100%;\r\n max-width: 780px;\r\n }\r\n\r\n .glue-headline {\r\n max-width: clamp(480px, 75%, 720px);\r\n margin: 0 auto;\r\n }\r\n\r\n /* Immagine centrata sopra */\r\n .glue-slider-image-container {\r\n grid-area: image;\r\n grid-column: auto;\r\n display: flex;\r\n width: 100%;\r\n max-width: 780px;\r\n\r\n /* padding: 20px;\r\n margin-top: 40px;\r\n margin-bottom: 40px; */\r\n padding: 0 20px;\r\n margin-top: 60px;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 280px;\r\n }\r\n\r\n /* Carousel: scroll-snap orizzontale */\r\n .animated-text-list {\r\n grid-area: slider;\r\n grid-column: auto;\r\n flex-direction: row;\r\n overflow-x: auto;\r\n scroll-snap-type: x mandatory;\r\n scroll-behavior: smooth;\r\n scrollbar-width: none;\r\n -ms-overflow-style: none;\r\n margin-top: 0;\r\n padding: 0;\r\n width: 100%;\r\n max-width: 780px;\r\n }\r\n\r\n .animated-text-list::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .glue-item-animated-wrapper {\r\n flex-direction: row;\r\n min-width: 100%;\r\n /* Altezza fissa: previene il resize a fisarmonica.\r\n Tutti gli item si allineano in alto,\r\n il wrapper mantiene l'altezza del più alto */\r\n align-items: flex-start;\r\n }\r\n\r\n .item-animated {\r\n flex: 0 0 100%;\r\n scroll-snap-align: center;\r\n padding: 0 40px;\r\n text-align: center;\r\n margin-top: 0 !important;\r\n box-sizing: border-box;\r\n }\r\n\r\n .item-animated::before,\r\n .progress-track {\r\n display: none;\r\n }\r\n\r\n .item-title {\r\n font-size: 1.5rem;\r\n font-weight: 500;\r\n color: #333;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .accordion-content {\r\n max-height: none;\r\n opacity: 1;\r\n overflow: visible;\r\n transition: none;\r\n }\r\n\r\n /* Paginazione visibile */\r\n .glue-pagination {\r\n grid-area: pagination;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n margin-top: 20px;\r\n margin-bottom: 40px;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 5b. TABLET ≥ 600px (sovrascrive solo spacing)\r\n ========================================= */\r\n@media (min-width: 600px) and (max-width: 1023px) {\r\n .glue-page {\r\n margin: 0 40px;\r\n }\r\n\r\n .glue-headline {\r\n font-size: 2.5rem;\r\n line-height: 1.2;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 320px;\r\n }\r\n\r\n .item-title {\r\n font-size: 24px;\r\n font-weight: 400;\r\n margin: 32px 0 0 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: 24px;\r\n color: #333;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 5a. MOBILE < 600px (sovrascrive font)\r\n ========================================= */\r\n@media (max-width: 599px) {\r\n .glue-headline {\r\n font-size: 1.75rem;\r\n line-height: 1.2857;\r\n letter-spacing: 0;\r\n }\r\n\r\n .item-title {\r\n font-size: 20px;\r\n font-weight: 400;\r\n margin: 24px 0 0 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: 20px;\r\n color: #333;\r\n }\r\n\r\n .accordion-inner {\r\n color: #5f6368;\r\n }\r\n}\r\n\r\n/* =========================================\r\n 6. DESKTOP ≥ 1024px\r\n ========================================= */\r\n@media (min-width: 1024px) {\r\n .accordion-inner {\r\n margin-top: 24px;\r\n }\r\n\r\n .glue-page {\r\n margin: 0 72px;\r\n }\r\n\r\n .glue-grid {\r\n grid-template-columns: repeat(12, minmax(5px, 1fr));\r\n grid-template-areas: none;\r\n column-gap: 48px;\r\n height: 750px;\r\n align-items: center;\r\n justify-items: stretch;\r\n }\r\n\r\n /* Riga 1: titolo */\r\n .glue-cell-pre-title {\r\n display: block;\r\n grid-column: 1 / span 1;\r\n grid-row: 1;\r\n }\r\n\r\n .glue-cell-title {\r\n grid-column: 2 / span 10;\r\n grid-row: 1;\r\n width: auto;\r\n max-width: none;\r\n }\r\n\r\n .glue-cell-post-title {\r\n display: block;\r\n grid-column: 12 / span 1;\r\n grid-row: 1;\r\n }\r\n\r\n .glue-headline {\r\n font-size: 3rem;\r\n line-height: 1.1666;\r\n max-width: none;\r\n }\r\n\r\n .glue-cell-pre-slider {\r\n display: block;\r\n grid-column: 1 / span 1;\r\n grid-row: 2;\r\n }\r\n\r\n /* Riga 2: accordion (sinistra) */\r\n .animated-text-list {\r\n grid-column: 2 / span 5;\r\n grid-row: 2;\r\n flex-direction: column;\r\n overflow: visible;\r\n scroll-snap-type: none;\r\n width: auto;\r\n max-width: none;\r\n margin-top: 0;\r\n }\r\n\r\n .glue-item-animated-wrapper {\r\n flex-direction: column;\r\n min-width: unset;\r\n }\r\n\r\n .item-animated {\r\n flex: unset;\r\n text-align: left;\r\n padding: 0 0 0 32px;\r\n scroll-snap-align: unset;\r\n }\r\n\r\n .item-animated:not(:first-child) {\r\n margin-top: 32px !important;\r\n }\r\n\r\n .item-title {\r\n font-size: var(--inactive-size);\r\n color: #5f6368;\r\n font-weight: 400;\r\n margin-bottom: 0;\r\n }\r\n\r\n .item-animated.is-active .item-title {\r\n font-size: var(--active-size);\r\n color: #333;\r\n }\r\n\r\n .item-animated::before,\r\n .progress-track {\r\n display: block;\r\n }\r\n\r\n .accordion-content {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n transition:\r\n max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n opacity 0.4s ease;\r\n }\r\n\r\n .item-animated.is-active .accordion-content {\r\n max-height: 250px;\r\n opacity: 1;\r\n }\r\n\r\n .accordion-inner {\r\n color: #3c4043;\r\n }\r\n\r\n /* Riga 2: immagine (destra) */\r\n .glue-slider-image-container {\r\n display: flex;\r\n grid-column: 8 / span 4;\r\n grid-row: 2;\r\n transform: translateX(-32px);\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n height: 100%;\r\n width: auto;\r\n max-width: none;\r\n }\r\n\r\n .image-wrapper {\r\n min-width: 434px;\r\n }\r\n\r\n .glue-pagination {\r\n display: none;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .glue-grid {\r\n column-gap: 64px;\r\n height: 800px;\r\n }\r\n\r\n .glue-slider-image-container {\r\n grid-column: 8 / span 5;\r\n transform: translateX(-125px);\r\n }\r\n\r\n .glue-cell-title {\r\n grid-column: 3 / span 8;\r\n }\r\n\r\n /* Reverse ≥ 1440px */\r\n .glue-reverse .glue-slider-image-container {\r\n grid-column: 1 / span 5;\r\n transform: translateX(125px);\r\n }\r\n\r\n .glue-reverse .animated-text-list {\r\n grid-column: 7 / span 5;\r\n }\r\n}\r\n\r\n@media (min-width: 1600px) {\r\n .glue-grid {\r\n margin-inline: auto;\r\n max-width: 1456px;\r\n }\r\n}\r\n\r\n/* =========================================\r\n REVERSE LAYOUT (desktop only)\r\n Immagine a sinistra, accordion a destra\r\n ========================================= */\r\n@media (min-width: 1024px) {\r\n .glue-reverse .glue-slider-image-container {\r\n grid-column: 2 / span 4;\r\n transform: translateX(32px);\r\n }\r\n\r\n .glue-reverse .animated-text-list {\r\n grid-column: 7 / span 5;\r\n }\r\n}\r\n";
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|