{"id":699,"date":"2026-08-21T08:13:35","date_gmt":"2026-08-21T08:13:35","guid":{"rendered":"https:\/\/sgtiranni.com\/?page_id=699"},"modified":"2026-10-14T06:17:38","modified_gmt":"2026-10-14T06:17:38","slug":"urban-planning","status":"publish","type":"page","link":"https:\/\/sgtiranni.com\/en\/urban-planning\/","title":{"rendered":"Urban Planning"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"699\" class=\"elementor elementor-699\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af25849 e-flex e-con-boxed e-con e-parent\" data-id=\"af25849\" 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-128fdc7 elementor-widget elementor-widget-html\" data-id=\"128fdc7\" 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    gap: 40px 30px;\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\tright: 15px; \/* AGGIUNTO: evita che il titolo sfora *\/\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\tpointer-events: none; \/* AGGIUNTO: fondamentale per sbloccare il click sul link *\/\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<\/style>\r\n\r\n<div class=\"vb-portfolio-wrapper\">\r\n    <div class=\"vb-portfolio-grid\">\r\n        \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\/enyang-cultural-centre\/\" 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\/6-modEnyang-Coltural-centre.jpg\" alt=\"ENYANG CULTURAL CENTRE\" class=\"vb-image\">\r\n                <h3 class=\"vb-title\">ENYANG CULTURAL CENTRE<\/h3>\r\n            <\/div>\r\n            <div class=\"vb-meta-container\">\r\n                <div class=\"vb-meta-item\">\r\n              \r\n                    <span class=\"vb-meta-value\">Project 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 2\r\n             ============================================== -->\r\n        <!-- 1. INSERISCI QUI IL LINK DELLA PAGINA SOSTITUENDO IL SIMBOLO # -->\r\n        <a href=\"#\" 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\/ENYANG-1.jpg\" alt=\"BATHROOM FOR ORCHARD<br>VILLA COMPOUND\" class=\"vb-image\">\r\n                <h3 class=\"vb-title\">ENYANG COMMERCIAL STREET<\/h3>\r\n            <\/div>\r\n            <div class=\"vb-meta-container\">\r\n                 <div class=\"vb-meta-item\">\r\n          \r\n                    <span class=\"vb-meta-value\">Project for BCCI<\/span>\r\n                <\/div>\r\n               \r\n            <\/div>\r\n        <\/a>\r\n\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\/leishan-new-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\/1modLeishan-new-town.jpg\" alt=\"\" class=\"vb-image\">\r\n                <h3 class=\"vb-title\">LE SHAN NEW TOWN<\/h3>\r\n            <\/div>\r\n            <div class=\"vb-meta-container\">\r\n                 <div class=\"vb-meta-item\">\r\n\t\t\t\t\t<span class=\"vb-meta-value\">Project for BCCI<\/span>\r\n                <\/div> \r\n               \r\n            <\/div>\r\n        <\/a>\r\n\r\n\t\t<!-- ==============================================\r\n             PROGETTO 4\r\n             ============================================== -->\r\n        <!-- 1. INSERISCI QUI IL LINK DELLA PAGINA SOSTITUENDO IL SIMBOLO # -->\r\n        <a href=\"https:\/\/sgtiranni.com\/en\/lizhuan-stone-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\/2modLizhuan-Stone-Town.jpg\" alt=\"LIZHUAN STONE TOWN\" class=\"vb-image\">\r\n                <h3 class=\"vb-title\">LIZHUANG STONE TOWN<\/h3>\r\n            <\/div>\r\n            <div class=\"vb-meta-container\">\r\n                <div class=\"vb-meta-item\">\r\n     \r\n                    <span class=\"vb-meta-value\">Project for BCCI<\/span>\r\n                <\/div>\r\n               \r\n            <\/div>\r\n        <\/a>\r\n\r\n\t\t<!-- ==============================================\r\n             PROGETTO 5\r\n             ============================================== -->\r\n        <!-- 1. INSERISCI QUI IL LINK DELLA PAGINA SOSTITUENDO IL SIMBOLO # -->\r\n        <a href=\"#\" 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\/qiong.png\" alt=\"QIONG LAI\" class=\"vb-image\">\r\n                <h3 class=\"vb-title\">QIONG LAI<\/h3>\r\n            <\/div>\r\n            <div class=\"vb-meta-container\">\r\n               <div class=\"vb-meta-item\">\r\n           \r\n                    <span class=\"vb-meta-value\">Project 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 6\r\n             ============================================== -->\r\n        <!-- 1. INSERISCI QUI IL LINK DELLA PAGINA SOSTITUENDO IL SIMBOLO # -->\r\n        <a href=\"https:\/\/sgtiranni.com\/en\/nanchong-research-centre\/\" 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\/2modNanchong-Research-Centre.jpg\" alt=\"NANCHONG RESEARCH CENTRE\" class=\"vb-image\">\r\n                <h3 class=\"vb-title\">NANCHONG RESEARCH CENTRE<\/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\">Project for BCCI<\/span>\r\n                <\/div>\r\n               \r\n            <\/div>\r\n        <\/a>\r\n\r\n        <!-- VUOI PI\u00d9 PROGETTI? Copia e incolla uno dei blocchi qui sopra (da <a href...> fino a <\/a>) -->\r\n\r\n    <\/div>\r\n\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>ENYANG CULTURAL CENTRE Project 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-699","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\/699","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=699"}],"version-history":[{"count":49,"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/pages\/699\/revisions"}],"predecessor-version":[{"id":1264,"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/pages\/699\/revisions\/1264"}],"wp:attachment":[{"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/media?parent=699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}