{"id":705,"date":"2026-08-21T08:14:37","date_gmt":"2026-08-21T08:14:37","guid":{"rendered":"https:\/\/sgtiranni.com\/?page_id=705"},"modified":"2026-10-14T06:23:27","modified_gmt":"2026-10-14T06:23:27","slug":"eco-design-strategy","status":"publish","type":"page","link":"https:\/\/sgtiranni.com\/en\/eco-design-strategy\/","title":{"rendered":"Eco-design Strategy"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"705\" class=\"elementor elementor-705\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c97431 e-flex e-con-boxed e-con e-parent\" data-id=\"8c97431\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3e5a38 elementor-widget elementor-widget-html\" data-id=\"d3e5a38\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================\r\n   STILI GENERALI E GRIGLIA\r\n   ========================================= *\/\r\n.vb-portfolio-wrapper {\r\n    background-color: #e6e6e6; \/* Sfondo grigio chiaro simile alla tua reference *\/\r\n    padding: 40px 20px 40px 240px;\r\n    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n    position: relative;\r\n}\r\n\r\n.vb-portfolio-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n    \/* AUMENTATO LO SPAZIO: 80px in verticale, 50px in orizzontale *\/\r\n    gap: 80px 50px; \r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* =========================================\r\n   SINGOLO PROGETTO (CARD CLICCABILE)\r\n   ========================================= *\/\r\n.vb-portfolio-card {\r\n    text-decoration: none !important;\r\n    display: block;\r\n    position: relative;\r\n    cursor: pointer;\r\n    border: none !important;\r\n    box-shadow: none !important;\r\n}\r\n\r\n.vb-image-container {\r\n    position: relative;\r\n    overflow: hidden;\r\n    width: 100%;\r\n\tdisplay: block;\r\n    \r\n}\r\n\r\n.vb-image {\r\n    width: 100%;\r\n    aspect-ratio: 4 \/ 3;\r\n    object-fit: cover;\r\n    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\r\n    display: block;\r\n}\r\n\r\n\/* Miglioria: Gradiente scuro sul fondo per far leggere sempre il titolo bianco *\/\r\n.vb-image-container::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 40%;\r\n    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Titolo in sovraimpressione *\/\r\n.vb-title {\r\n    position: absolute;\r\n    bottom: 15px;\r\n    left: 15px;\r\n    color: #ffffff;\r\n    font-size: 22px;\r\n    font-weight: 700;\r\n    line-height: 1.1;\r\n    margin: 0;\r\n    z-index: 2;\r\n    text-transform: uppercase;\r\n    transition: color 0.3s ease, text-shadow 0.3s ease;\r\n}\r\n\r\n\/* --- EFFETTI HOVER (Zoom + Cambio Colore) --- *\/\r\n.vb-portfolio-card:hover .vb-image {\r\n    transform: scale(1.08); \/* Effetto Zoom richiesto *\/\r\n}\r\n\r\n.vb-portfolio-card:hover .vb-title {\r\n    color: #000000; \/* Da bianco a nero come richiesto *\/\r\n    text-shadow: 2px 2px 0px rgba(255,255,255,0.9); \/* Miglioria: contorno bianco per contrasto *\/\r\n}\r\n\r\n\/* =========================================\r\n   METADATI (Categoria, Location, Area)\r\n   ========================================= *\/\r\n.vb-meta-container {\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    gap: 35px;\r\n    margin-top: 15px;\r\n}\r\n\r\n.vb-meta-item {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.vb-meta-label {\r\n    font-size: 9px;\r\n    color: #888;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.vb-meta-value {\r\n    font-size: 11px;\r\n    color: #111;\r\n    font-weight: 700;\r\n}\r\n\r\n\/* =========================================\r\n   MENU FILTRI IN BASSO A DESTRA\r\n   ========================================= *\/\r\n.vb-filter-menu {\r\n    position: fixed; \/* Rimane incollato allo schermo anche scorrendo *\/\r\n    bottom: 30px;\r\n    right: 30px;\r\n    background-color: #1a1a1a; \/* Rettangolo nero *\/\r\n    padding: 15px 30px;\r\n    display: flex;\r\n    gap: 20px;\r\n    z-index: 999;\r\n}\r\n\r\n.vb-filter-link {\r\n    color: #888888; \/* Testo grigietto di base *\/\r\n    text-decoration: none;\r\n    font-size: 13px;\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n.vb-filter-link:hover, .vb-filter-link.active {\r\n    color: #ffffff; \/* Diventa bianco al passaggio del mouse o se attivo *\/\r\n}\r\n\r\n\/* =========================================\r\n   MIGLIORIA: ADATTAMENTO PER CELLULARI\r\n   ========================================= *\/\r\n@media (max-width: 768px) {\r\n    \r\n\t.vb-portfolio-wrapper {\r\n        padding: 40px 20px; \/* Ripristina lo spazio normale su smartphone *\/\r\n    }\r\n\t\r\n\t.vb-portfolio-grid {\r\n        grid-template-columns: 1fr; \/* Una colonna su smartphone *\/\r\n    }\r\n    .vb-filter-menu {\r\n        bottom: 0;\r\n        right: 0;\r\n        width: 100%; \/* Il menu filtri prende tutta la larghezza in basso *\/\r\n        justify-content: center;\r\n        padding: 15px 10px;\r\n        box-sizing: border-box;\r\n    }\r\n}\r\n\r\n.vb-meta-container {\r\n    transition: transform 0.4s ease;\r\n}\r\n\r\n.vb-portfolio-card:hover .vb-meta-container {\r\n    transform: translateY(-2px);\r\n}\r\n\r\n\/* =========================================\r\n   ANIMAZIONE ENTRATA DA SINISTRA IN CASCATA\r\n   ========================================= *\/\r\n\r\n@keyframes slideInFromLeft {\r\n    0% {\r\n        opacity: 0;\r\n        transform: translateX(-50px);\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n}\r\n\r\n.vb-portfolio-card {\r\n    opacity: 0; \/* Mantiene la card nascosta prima dell'inizio dell'animazione *\/\r\n    animation: slideInFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n}\r\n\r\n\/* Ritardi progressivi per l'effetto sequenziale (uno dopo l'altro) *\/\r\n.vb-portfolio-card:nth-child(1) { animation-delay: 0.1s; }\r\n.vb-portfolio-card:nth-child(2) { animation-delay: 0.25s; }\r\n.vb-portfolio-card:nth-child(3) { animation-delay: 0.4s; }\r\n.vb-portfolio-card:nth-child(4) { animation-delay: 0.55s; }\r\n.vb-portfolio-card:nth-child(5) { animation-delay: 0.7s; }\r\n.vb-portfolio-card:nth-child(6) { animation-delay: 0.85s; }\r\n\r\n\r\n\/* =========================================\r\n   MODIFICA ESCLUSIVA PER IL PROGETTO 1 E 2\r\n   ========================================= *\/\r\n.vb-portfolio-card:nth-child(1),\r\n.vb-portfolio-card:nth-child(2),\r\n.vb-portfolio-card:nth-child(3) {\r\n    grid-column: span 2; \r\n}\r\n\r\n\/* Modifica il contenitore e l'immagine dei primi progetti per mostrarla intera *\/\r\n.vb-portfolio-card:nth-child(1) .vb-image,\r\n.vb-portfolio-card:nth-child(2) .vb-image,\r\n.vb-portfolio-card:nth-child(3) .vb-image {\r\n    aspect-ratio: auto; \/* Rimuove il vincolo del 4:3 *\/\r\n    object-fit: contain; \/* Evita il ritaglio e mostra tutta l'immagine *\/\r\n}\r\n\r\n<\/style>\r\n\r\n<div class=\"vb-portfolio-wrapper\">\r\n    <div class=\"vb-portfolio-grid\">\r\n        \t\t\t\r\n\t\t<!-- ==============================================\r\n             PROGETTO 1\r\n             ============================================== -->\r\n        <!-- 1. INSERISCI QUI IL LINK DELLA PAGINA SOSTITUENDO IL SIMBOLO # -->\r\n        <a href=\"https:\/\/sgtiranni.com\/en\/experimental-school\/\" class=\"vb-portfolio-card\">\r\n            <div class=\"vb-image-container\">\r\n                <!-- 2. INSERISCI QUI IL LINK DELL'IMMAGINE SOSTITUENDO QUELLO PRESENTE -->\r\n                <img decoding=\"async\" src=\"https:\/\/sgtiranni.com\/wp-content\/uploads\/2026\/08\/1modExperimental-School.jpg\" alt=\"EXPERIMENTAL SCHOOL IN CHENGDU\" class=\"vb-image\">\r\n                <h3 class=\"vb-title\">EXPERIMENTAL SCHOOL IN CHENGDU<\/h3>\r\n            <\/div>\r\n            <div class=\"vb-meta-container\">\r\n                <div class=\"vb-meta-item\">\r\n                    <!--<span class=\"vb-meta-value\">For BCCI<\/span>-->\r\n                <\/div>\r\n               \r\n            <\/div>\r\n        <\/a>\r\n\t\r\n\t\t\r\n\t\t<!-- ==============================================\r\n             PROGETTO 2\r\n             ============================================== -->\r\n        <!-- 1. INSERISCI QUI IL LINK DELLA PAGINA SOSTITUENDO IL SIMBOLO # -->\r\n        <a href=\"https:\/\/sgtiranni.com\/en\/quiong-lai-town\/\" class=\"vb-portfolio-card\">\r\n            <div class=\"vb-image-container\">\r\n                <!-- 2. INSERISCI QUI IL LINK DELL'IMMAGINE SOSTITUENDO QUELLO PRESENTE -->\r\n                <img decoding=\"async\" src=\"https:\/\/sgtiranni.com\/wp-content\/uploads\/2026\/08\/1Quiong-Lai-Townmod.jpg\" alt=\"QUIONG LAI TOWN\" class=\"vb-image\">\r\n                <h3 class=\"vb-title\">QIONG LAI TOWN<\/h3>\r\n            <\/div>\r\n            <div class=\"vb-meta-container\">\r\n                <div class=\"vb-meta-item\">\r\n                    <span class=\"vb-meta-value\">For BCCI<\/span>\r\n                <\/div>\r\n               \r\n            <\/div>\r\n        <\/a>\r\n\t\t\r\n\t\t<!-- ==============================================\r\n             PROGETTO 3\r\n             ============================================== -->\r\n        <!-- 1. INSERISCI QUI IL LINK DELLA PAGINA SOSTITUENDO IL SIMBOLO # -->\r\n        <a href=\"https:\/\/sgtiranni.com\/en\/lizhuan-cultural-building\/\" class=\"vb-portfolio-card\">\r\n            <div class=\"vb-image-container\">\r\n                <!-- 2. INSERISCI QUI IL LINK DELL'IMMAGINE SOSTITUENDO QUELLO PRESENTE -->\r\n                <img decoding=\"async\" src=\"https:\/\/sgtiranni.com\/wp-content\/uploads\/2026\/09\/1LIZHUAN-CULTURAL-BUILDINGMOD.jpg\" alt=\"LIZHUAN CULTURAL BUILDING\" class=\"vb-image\">\r\n                <h3 class=\"vb-title\">LIZHUANG CULTURAL BUILDING<\/h3>\r\n            <\/div>\r\n            <div class=\"vb-meta-container\">\r\n                <div class=\"vb-meta-item\">\r\n                    <span class=\"vb-meta-value\">For BCCI<\/span>\r\n                <\/div>\r\n               \r\n            <\/div>\r\n        <\/a>\r\n\r\n\r\n    <\/div><!-- vb-portfolio-grid -->\r\n<\/div><!-- vb-portfolio-wrapper -->\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>EXPERIMENTAL SCHOOL IN CHENGDU QIONG LAI TOWN For BCCI LIZHUANG CULTURAL BUILDING For BCCI<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-705","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/pages\/705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/comments?post=705"}],"version-history":[{"count":22,"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/pages\/705\/revisions"}],"predecessor-version":[{"id":1270,"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/pages\/705\/revisions\/1270"}],"wp:attachment":[{"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/media?parent=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}