{"id":6,"date":"2026-09-07T15:19:32","date_gmt":"2026-09-07T15:19:32","guid":{"rendered":"https:\/\/fiume.mg-web.it\/?page_id=6"},"modified":"2026-09-07T17:30:45","modified_gmt":"2026-09-07T15:30:45","slug":"home","status":"publish","type":"page","link":"https:\/\/fiume.mg-web.it\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6\" class=\"elementor elementor-6\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dfb2b61 e-flex e-con-boxed e-con e-parent\" data-id=\"dfb2b61\" 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-5f99e0a elementor-widget elementor-widget-html\" data-id=\"5f99e0a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================================\n     FIUME ARCHITECTURE \u2014 Home page \"Progetti\"\n     Stile analizzato e replicato da big.dk\/projects\/dymak-hq-16408\n     (colori, tipografia, spaziature e meccanica dello scroll orizzontale\n     estratti dal sito reale il 07\/09\/2026).\n\n     COME USARLO IN ELEMENTOR\n     1) Aggiungi un widget \"HTML\" nella Home Page.\n     2) Incolla tutto questo file (HTML + <style> + <script> inclusi).\n     3) Pubblica: nessuna dipendenza esterna richiesta a parte le\n        immagini segnaposto (picsum.photos).\n\n     NOTA SUL FONT\n     Il sito BIG usa \"Everett\", un font a pagamento (Dinamo Type) non\n     distribuibile liberamente. Su richiesta \u00e8 impostato Helvetica\n     (con \"Helvetica Neue\" e Arial come fallback se Helvetica non \u00e8\n     installato sul dispositivo, es. Windows). Per cambiarlo basta\n     modificare --fpr-font qui sotto.\n\n     COSA \u00c8 STATO REPLICATO 1:1 DAL SITO REALE\n     - Nessun bordo\/divisore da nessuna parte: le sezioni sono separate\n       solo da spazio bianco (margini), mai da linee.\n     - Grigio etichette #6b6b6b, testo nero puro #000, sfondo #fff.\n     - Etichette maiuscole 10-12px, tracking 0.3px; valori 14px neri.\n     - Icone \"Share\" = piccoli quadrati neri 16x16 con simbolo bianco,\n       zero border-radius.\n     - Nella pagina di progetto reale la vista \u00e8 UNA striscia orizzontale\n       continua (non \"slide\" a schermo intero): sidebar informazioni,\n       poi la foto (altezza fissa, larghezza libera in base al rapporto\n       immagine), poi un blocco testo largo 290px, poi le foto della\n       gallery \u2014 tutto separato da 64px di spazio (5vw su mobile), senza\n       scroll-snap. Qui \u00e8 replicato esattamente con questa logica.\n     - Su schermi stretti (sotto 1024px) il sito reale ABBANDONA lo\n       scroll orizzontale e impila tutto verticalmente in scorrimento\n       normale: replicato anche questo comportamento.\n\n     COSA \u00c8 STATO VOLUTAMENTE CAMBIATO (perch\u00e9 qui il progetto resta\n     sulla stessa pagina invece di navigare a un URL dedicato, come\n     richiesto)\n     - Due controlli per chiudere la vista (il sito reale non ne ha\n       bisogno: usa il tasto \"indietro\" del browser): \"Tutti i progetti\"\n       in alto a sinistra e una X in alto a destra, entrambi con la\n       stessa identica azione.\n     - La rotellina del mouse (gesto verticale) viene mappata sullo\n       scroll orizzontale quando la vista progetto \u00e8 aperta da desktop.\n\n     DATI SEGNAPOSTO\n     L'array DATA pi\u00f9 sotto contiene 6 progetti finti. Quando i custom\n     post reali saranno pronti, sostituiscilo con i dati veri (es. JSON\n     generato lato PHP, oppure fetch alle REST API di WordPress su\n     wp-json\/wp\/v2\/progetti).\n     ===================================================================== -->\n\n<div id=\"fiume-projects-root\">\n\n  <div class=\"fpr-feed-head\">\n    <span class=\"fpr-feed-head-label\">Progetti<\/span>\n    <span class=\"fpr-feed-head-count\" id=\"fprCount\"><\/span>\n  <\/div>\n\n  <div class=\"fpr-feed\" id=\"fprFeed\"><\/div>\n\n  <noscript><p style=\"padding:40px;\">Attiva JavaScript per visualizzare i progetti.<\/p><\/noscript>\n<\/div>\n\n<!-- Il visualizzatore a schermo intero viene spostato in fondo al <body>\n     via JS al caricamento, cos\u00ec \"position:fixed\" copre sempre tutto lo\n     schermo anche se il tema\/Elementor applica transform ai contenitori. -->\n<div class=\"fpr-overlay\" id=\"fprOverlay\" aria-hidden=\"true\">\n  <button class=\"fpr-close\" id=\"fprClose\" type=\"button\" aria-label=\"Torna a tutti i progetti\">\n    <span class=\"fpr-close-arrow\">&#8592;<\/span> Tutti i progetti\n  <\/button>\n  <button class=\"fpr-close-x\" id=\"fprCloseX\" type=\"button\" aria-label=\"Chiudi e torna a tutti i progetti\">&#10005;<\/button>\n\n  <div class=\"fpr-hscroll\" id=\"fprHscroll\"><\/div>\n<\/div>\n\n<style>\n  :root{\n    --fpr-black:#000000;\n    --fpr-gray:#6b6b6b;\n    --fpr-bg:#ffffff;\n    --fpr-font:Helvetica,\"Helvetica Neue\",Arial,sans-serif;\n    --fpr-ease:cubic-bezier(.22,.61,.36,1);\n    --fpr-box-h:74vh;\n  }\n  #fiume-projects-root{\n    box-sizing:border-box;\n    background:var(--fpr-bg);\n    color:var(--fpr-black);\n    font-family:var(--fpr-font);\n    -webkit-font-smoothing:antialiased;\n  }\n  #fiume-projects-root *,\n  #fiume-projects-root *::before,\n  #fiume-projects-root *::after{ box-sizing:border-box; }\n\n  \/* ---------- Intestazione sezione ---------- *\/\n  .fpr-feed-head{\n    display:flex;\n    align-items:baseline;\n    justify-content:space-between;\n    max-width:900px;\n    margin:0 auto;\n    padding:32px 40px 24px;\n  }\n  .fpr-feed-head-label{\n    font-size:12px;\n    letter-spacing:.3px;\n    text-transform:uppercase;\n    font-weight:400;\n  }\n  .fpr-feed-head-count{\n    font-size:12px;\n    letter-spacing:.3px;\n    color:var(--fpr-gray);\n    text-transform:uppercase;\n  }\n\n  \/* ---------- Feed verticale ---------- *\/\n  .fpr-feed{\n    width:100%;\n    max-width:900px;\n    margin:0 auto;\n    padding:0 40px;\n  }\n\n  .fpr-row{\n    display:grid;\n    grid-template-columns:220px 1fr;\n    gap:64px;\n    align-items:start;\n    width:100%;\n    padding:0;\n    margin:0 0 38px;\n    background:none;\n    border:none;\n    text-align:left;\n    cursor:pointer;\n    opacity:0;\n    transform:translateY(24px);\n    transition:opacity .8s ease, transform .8s var(--fpr-ease);\n  }\n  .fpr-row.is-visible{ opacity:1; transform:none; }\n  .fpr-row:focus-visible{ outline:2px solid var(--fpr-black); outline-offset:6px; }\n\n  .fpr-row-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; padding-top:4px; }\n  .fpr-mark{\n    width:32px; height:32px;\n    background:var(--fpr-black);\n    color:#fff;\n    display:flex; align-items:center; justify-content:center;\n    font-size:12px; font-weight:400;\n    flex:0 0 auto;\n    margin-bottom:6px;\n  }\n  .fpr-row-title{ font-size:18px; font-weight:400; margin:0; line-height:1.2; text-align:right; }\n  .fpr-row-loc{ font-size:11px; letter-spacing:.3px; color:var(--fpr-gray); text-transform:uppercase; margin:0; text-align:right; }\n\n  .fpr-row-media{ width:100%; aspect-ratio:16\/9.4; overflow:hidden; background:#f2f2f2; }\n  .fpr-row-media img{ width:100%; height:100%; object-fit:cover; display:block; }\n\n  @media (max-width:1023px){\n    .fpr-feed{ padding:0 20px; }\n    .fpr-row{ grid-template-columns:1fr; gap:16px; margin-bottom:26px; }\n    .fpr-row-media{ aspect-ratio:4\/3; order:2; }\n    .fpr-row-meta{ order:1; flex-direction:row; align-items:center; gap:12px; padding-top:0; }\n    .fpr-mark{ margin-bottom:0; }\n    .fpr-row-title{ font-size:15px; text-align:left; }\n    .fpr-row-loc{ text-align:left; }\n    .fpr-feed-head{ padding:24px 20px 16px; }\n  }\n\n  \/* ---------- Overlay progetto (schermo intero) ---------- *\/\n  .fpr-overlay{\n    position:fixed; inset:0;\n    height:100vh; height:100dvh;\n    background:var(--fpr-bg);\n    opacity:0; visibility:hidden;\n    transition:opacity .35s ease, visibility 0s linear .35s;\n    z-index:999999;\n    font-family:var(--fpr-font);\n    color:var(--fpr-black);\n    overflow-y:auto;\n    -webkit-overflow-scrolling:touch;\n  }\n  .fpr-overlay.is-open{\n    opacity:1; visibility:visible;\n    transition:opacity .35s ease, visibility 0s linear 0s;\n  }\n  .fpr-overlay *,\n  .fpr-overlay *::before,\n  .fpr-overlay *::after{ box-sizing:border-box; }\n\n  .fpr-close{\n    position:fixed; top:24px; left:24px; z-index:2;\n    display:flex; align-items:center; gap:8px;\n    background:var(--fpr-bg); border:none; cursor:pointer;\n    font-family:var(--fpr-font);\n    font-size:12px; letter-spacing:.3px; text-transform:uppercase;\n    color:var(--fpr-gray); padding:6px 8px; margin:-6px -8px;\n    opacity:1;\n    transition:color .2s ease, opacity .4s ease;\n  }\n  .fpr-close:hover{ color:var(--fpr-black); }\n  .fpr-close-arrow{ font-size:14px; }\n\n  \/* X di chiusura, speculare a \"Tutti i progetti\" ma sul lato destro:\n     stessa azione (torna sempre a tutti i progetti). *\/\n  .fpr-close-x{\n    position:fixed; top:24px; right:24px; z-index:2;\n    display:flex; align-items:center; justify-content:center;\n    width:16px; height:16px;\n    background:var(--fpr-bg); border:none; cursor:pointer;\n    font-family:var(--fpr-font);\n    font-size:16px; line-height:1;\n    color:var(--fpr-gray); padding:6px; margin:-6px;\n    opacity:1;\n    transition:color .2s ease, opacity .4s ease;\n  }\n  .fpr-close-x:hover{ color:var(--fpr-black); }\n\n  \/* Mentre la foto cliccata \"vola\" verso la sua posizione finale (vedi JS),\n     il resto del contenuto (sidebar, descrizione, gallery, chiusura) resta\n     invisibile e appare in dissolvenza solo a atterraggio avvenuto \u2014 \u00e8\n     l'effetto \"il progetto si apre e mostrano le informazioni\". *\/\n  .fpr-overlay.is-zooming .fpr-close,\n  .fpr-overlay.is-zooming .fpr-close-x{ opacity:0; }\n  .fpr-overlay.is-zooming .fpr-sidebar,\n  .fpr-overlay.is-zooming .fpr-box-desc,\n  .fpr-overlay.is-zooming .fpr-box-image:not(.fpr-box-hero){\n    opacity:0; transform:translateY(10px);\n  }\n  .fpr-overlay.is-zooming .fpr-box-hero img{ opacity:0; }\n\n  \/* ---------- Striscia orizzontale (desktop) ---------- *\/\n  .fpr-hscroll{\n    display:flex;\n    align-items:flex-start;\n    flex-wrap:nowrap;\n    gap:64px;\n    overflow-x:auto;\n    overflow-y:hidden;\n    -webkit-overflow-scrolling:touch;\n    scrollbar-width:none;\n    height:100%;\n    padding:104px 8vw 64px;\n  }\n  .fpr-hscroll::-webkit-scrollbar{ display:none; }\n\n  \/* Sidebar informazioni progetto *\/\n  .fpr-sidebar{\n    flex:0 0 auto;\n    width:280px;\n    opacity:1; transform:none;\n    transition:opacity .5s ease .05s, transform .5s var(--fpr-ease) .05s;\n  }\n  .fpr-sidebar .fpr-mark{ margin-bottom:20px; }\n  .fpr-sidebar-title{ font-size:20px; font-weight:400; margin:0 0 4px; line-height:1.15; }\n  .fpr-sidebar-loc{ font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:var(--fpr-gray); margin:0; }\n  .fpr-sidebar-year{ font-size:14px; letter-spacing:.3px; text-transform:uppercase; color:var(--fpr-gray); margin:16px 0 0; }\n  .fpr-sidebar-list{ margin:0; }\n  .fpr-sidebar-list dt{ font-size:11px; text-transform:uppercase; color:var(--fpr-gray); margin-top:16px; }\n  .fpr-sidebar-list dt:first-child{ margin-top:16px; }\n  .fpr-sidebar-list dd{ font-size:14px; color:var(--fpr-black); margin:2px 0 0; }\n  .fpr-sidebar-share-label{ font-size:11px; letter-spacing:.3px; text-transform:uppercase; color:var(--fpr-gray); margin:20px 0 8px; }\n  .fpr-sidebar-share{ display:flex; gap:6px; }\n  .fpr-sidebar-share a{\n    width:16px; height:16px;\n    background:var(--fpr-black); color:#fff;\n    display:flex; align-items:center; justify-content:center;\n    font-size:9px; line-height:1; text-decoration:none;\n  }\n\n  \/* Foto (hero + gallery): altezza fissa, larghezza libera *\/\n  .fpr-box-image{\n    flex:0 0 auto;\n    height:var(--fpr-box-h);\n    max-height:820px;\n    opacity:1; transform:none;\n    transition:opacity .5s ease .05s, transform .5s var(--fpr-ease) .05s;\n  }\n  .fpr-box-image img{\n    height:100%; width:auto; max-width:82vw;\n    display:block; object-fit:cover;\n  }\n  .fpr-box-hero img{ opacity:1; transition:opacity .3s ease; }\n  .fpr-box-caption{\n    margin-top:8px;\n    font-size:11px; letter-spacing:.3px; color:var(--fpr-gray);\n  }\n\n  \/* Blocco descrizione: colonna stretta di testo *\/\n  .fpr-box-desc{\n    flex:0 0 290px;\n    width:290px;\n    padding-top:4px;\n    opacity:1; transform:none;\n    transition:opacity .5s ease .05s, transform .5s var(--fpr-ease) .05s;\n  }\n  .fpr-box-desc h3{\n    font-size:11px; letter-spacing:.3px; text-transform:uppercase;\n    color:var(--fpr-gray); margin:0 0 14px; font-weight:400;\n  }\n  .fpr-box-desc p{ font-size:14px; line-height:1.3; margin:0 0 14px; font-weight:400; }\n\n  \/* ---------- Mobile \/ tablet: niente scroll orizzontale ---------- *\/\n  @media (max-width:1023px){\n    .fpr-overlay{ overflow-y:auto; }\n    .fpr-close{ position:absolute; top:16px; left:16px; background:var(--fpr-bg); }\n    .fpr-close-x{ position:absolute; top:16px; right:16px; background:var(--fpr-bg); }\n    .fpr-hscroll{\n      display:block;\n      height:auto;\n      overflow:visible;\n      padding:64px 20px 60px;\n    }\n    .fpr-sidebar{ width:100%; margin-bottom:32px; }\n    .fpr-box-image{ height:auto; width:100%; margin-bottom:32px; }\n    .fpr-box-image img{ width:100%; height:auto; max-width:none; }\n    .fpr-box-desc{ width:100%; margin-bottom:32px; }\n    .fpr-box-desc p{ font-size:16px; line-height:1.5; }\n  }\n\n  body.fpr-lock{ overflow:hidden !important; }\n\n  \/* Clone temporaneo della foto cliccata: vola dalla lista fino alla\n     posizione della foto grande. Rimosso dal JS a atterraggio avvenuto. *\/\n  .fpr-zoom-clone{\n    position:fixed;\n    top:0; left:0;\n    margin:0; padding:0;\n    object-fit:cover;\n    display:block;\n    z-index:1000000;\n    pointer-events:none;\n    will-change:transform,width,height,top,left;\n  }\n<\/style>\n\n<script>\n(function(){\n  if(window.__fprInit) return;\n  window.__fprInit = true;\n\n  \/* ===================================================================\n     DATI SEGNAPOSTO \u2014 sostituire con i progetti reali (custom post)\n     =================================================================== *\/\n  var DATA_BASE = [\n    {\n      id:1,\n      title:\"Residenza sul Fiume\",\n      location:\"Torino, Italia\",\n      year:2024,\n      client:\"Privato\",\n      typology:\"Residenziale\",\n      size:\"420 \/ 4.520\",\n      status:\"Completato\",\n      cover:\"https:\/\/picsum.photos\/seed\/fiume-1-cover\/1600\/1000\",\n      description:[\n        \"Immersa nella vegetazione lungo il corso del fiume, la residenza si sviluppa come una sequenza di volumi sfalsati che seguono la pendenza naturale del terreno.\",\n        \"I materiali, legno, pietra locale e ampie vetrate, creano un dialogo continuo tra interno ed esterno, mentre gli spazi comuni si aprono verso il paesaggio circostante.\"\n      ],\n      gallery:[\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-1-g1\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-1-g2\/1200\/1600\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-1-g3\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-1-g4\/1600\/1000\"}\n      ]\n    },\n    {\n      id:2,\n      title:\"Torre Vetro\",\n      location:\"Milano, Italia\",\n      year:2025,\n      client:\"Vetro Group SpA\",\n      typology:\"Uffici\",\n      size:\"12.000 \/ 129.167\",\n      status:\"In costruzione\",\n      cover:\"https:\/\/picsum.photos\/seed\/fiume-2-cover\/1600\/1000\",\n      description:[\n        \"Un volume verticale rivestito da una doppia pelle di vetro serigrafato, pensato per ridurre il carico solare mantenendo la massima trasparenza verso la citt\u00e0.\",\n        \"Ogni piano \u00e8 organizzato attorno a un nucleo centrale flessibile, capace di adattarsi a configurazioni di lavoro differenti nel tempo.\"\n      ],\n      gallery:[\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-2-g1\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-2-g2\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-2-g3\/1200\/1600\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-2-g4\/1600\/1000\"}\n      ]\n    },\n    {\n      id:3,\n      title:\"Centro Culturale Adige\",\n      location:\"Verona, Italia\",\n      year:2023,\n      client:\"Comune di Verona\",\n      typology:\"Cultura\",\n      size:\"3.200 \/ 34.444\",\n      status:\"Completato\",\n      cover:\"https:\/\/picsum.photos\/seed\/fiume-3-cover\/1600\/1000\",\n      description:[\n        \"Il centro culturale nasce come una piega continua del suolo pubblico, che si solleva per accogliere sale espositive, un auditorium e una biblioteca aperta al quartiere.\",\n        \"La copertura praticabile diventa una nuova piazza sopraelevata, restituendo alla citt\u00e0 uno spazio collettivo affacciato sul fiume.\"\n      ],\n      gallery:[\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-3-g1\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-3-g2\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-3-g3\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-3-g4\/1200\/1600\"}\n      ]\n    },\n    {\n      id:4,\n      title:\"Villa Meridiana\",\n      location:\"Como, Italia\",\n      year:2022,\n      client:\"Privato\",\n      typology:\"Residenziale\",\n      size:\"680 \/ 7.319\",\n      status:\"Completato\",\n      cover:\"https:\/\/picsum.photos\/seed\/fiume-4-cover\/1600\/1000\",\n      description:[\n        \"Disposta su un unico livello, la villa segue l'orientamento solare per garantire luce naturale in ogni ambiente durante tutto l'arco della giornata.\",\n        \"Un patio interno funge da fulcro distributivo e da regolatore climatico, mediando tra gli spazi privati e quelli conviviali.\"\n      ],\n      gallery:[\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-4-g1\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-4-g2\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-4-g3\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-4-g4\/1600\/1000\"}\n      ]\n    },\n    {\n      id:5,\n      title:\"Padiglione Ligneo\",\n      location:\"Bolzano, Italia\",\n      year:2025,\n      client:\"Fondazione Dolomiti\",\n      typology:\"Padiglione\",\n      size:\"150 \/ 1.615\",\n      status:\"In progetto\",\n      cover:\"https:\/\/picsum.photos\/seed\/fiume-5-cover\/1600\/1000\",\n      description:[\n        \"Una struttura leggera in legno lamellare, pensata per essere montata e smontata stagionalmente ai piedi delle Dolomiti.\",\n        \"Il disegno della copertura richiama il profilo delle montagne circostanti, filtrando la luce attraverso una trama di listelli distanziati.\"\n      ],\n      gallery:[\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-5-g1\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-5-g2\/1200\/1600\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-5-g3\/1600\/1000\"}\n      ]\n    },\n    {\n      id:6,\n      title:\"Uffici Portuali\",\n      location:\"Genova, Italia\",\n      year:2024,\n      client:\"Autorit\u00e0 Portuale\",\n      typology:\"Uffici\",\n      size:\"5.400 \/ 58.125\",\n      status:\"Completato\",\n      cover:\"https:\/\/picsum.photos\/seed\/fiume-6-cover\/1600\/1000\",\n      description:[\n        \"L'edificio per uffici si allunga parallelamente alla banchina, con una facciata scorrevole che protegge gli ambienti interni dal vento e dalla salsedine.\",\n        \"Al piano terra un percorso pubblico coperto collega il fronte mare al tessuto urbano retrostante, restituendo continuit\u00e0 pedonale all'area portuale.\"\n      ],\n      gallery:[\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-6-g1\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-6-g2\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-6-g3\/1600\/1000\"},\n        {src:\"https:\/\/picsum.photos\/seed\/fiume-6-g4\/1600\/1000\"}\n      ]\n    }\n  ];\n\n  \/* Ripete i progetti segnaposto x5 (id resi univoci) solo per avere\n     una lista abbastanza lunga da testare bene lo scroll. Quando\n     arrivano i progetti reali, questo blocco va rimosso: baster\u00e0 usare\n     direttamente DATA_BASE (rinominandolo DATA) con i dati veri. *\/\n  var DATA = [];\n  for(var __rep=0; __rep<5; __rep++){\n    for(var __i=0; __i<DATA_BASE.length; __i++){\n      var __p = Object.assign({}, DATA_BASE[__i]);\n      __p.id = __rep * 100 + DATA_BASE[__i].id;\n      DATA.push(__p);\n    }\n  }\n\n  \/* ===================================================================\n     RIFERIMENTI DOM\n     =================================================================== *\/\n  var root     = document.getElementById('fiume-projects-root');\n  var feedEl   = document.getElementById('fprFeed');\n  var countEl  = document.getElementById('fprCount');\n  var overlay  = document.getElementById('fprOverlay');\n  var hscroll  = document.getElementById('fprHscroll');\n  var closeBtn = document.getElementById('fprClose');\n  var closeBtnX = document.getElementById('fprCloseX');\n\n  if(!root || !feedEl || !overlay) return;\n\n  \/* Sposta l'overlay come figlio diretto del <body>: cos\u00ec \"position:fixed\"\n     copre sempre l'intero schermo anche se il tema\/Elementor applica\n     transform\/overflow al contenitore del widget. *\/\n  document.body.appendChild(overlay);\n\n  var lastTrigger = null;\n  var desktopMQ = window.matchMedia('(min-width:1024px)');\n\n  function escapeHtml(str){\n    return String(str).replace(\/[&<>\"']\/g, function(c){\n      return ({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'})[c];\n    });\n  }\n\n  \/* ===================================================================\n     FEED VERTICALE\n     =================================================================== *\/\n  function buildFeed(){\n    var html = '';\n    for(var i=0;i<DATA.length;i++){\n      var p = DATA[i];\n      html += ''+\n        '<div class=\"fpr-row\" data-id=\"'+p.id+'\" tabindex=\"0\" role=\"button\" '+\n             'aria-label=\"Apri progetto '+escapeHtml(p.title)+'\">'+\n          '<div class=\"fpr-row-meta\">'+\n            '<div class=\"fpr-mark\">'+escapeHtml(p.title.charAt(0))+'<\/div>'+\n            '<p class=\"fpr-row-title\">'+escapeHtml(p.title)+'<\/p>'+\n            '<p class=\"fpr-row-loc\">'+escapeHtml(p.location)+'<\/p>'+\n          '<\/div>'+\n          '<div class=\"fpr-row-media\">'+\n            '<img decoding=\"async\" src=\"'+p.cover+'\" alt=\"'+escapeHtml(p.title)+'\" loading=\"lazy\">'+\n          '<\/div>'+\n        '<\/div>';\n    }\n    feedEl.innerHTML = html;\n    countEl.textContent = DATA.length + ' progetti';\n  }\n\n  function bindFeedEvents(){\n    feedEl.addEventListener('click', function(e){\n      var row = e.target.closest('.fpr-row');\n      if(!row) return;\n      openProject(row.getAttribute('data-id'), row);\n    });\n    feedEl.addEventListener('keydown', function(e){\n      if(e.key !== 'Enter' && e.key !== ' ') return;\n      var row = e.target.closest('.fpr-row');\n      if(!row) return;\n      e.preventDefault();\n      openProject(row.getAttribute('data-id'), row);\n    });\n  }\n\n  function observeReveal(){\n    if(!('IntersectionObserver' in window)){\n      var rows = feedEl.querySelectorAll('.fpr-row');\n      for(var i=0;i<rows.length;i++) rows[i].classList.add('is-visible');\n      return;\n    }\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(entry){\n        if(entry.isIntersecting){\n          entry.target.classList.add('is-visible');\n          io.unobserve(entry.target);\n        }\n      });\n    }, { threshold:.12 });\n    var rows = feedEl.querySelectorAll('.fpr-row');\n    for(var j=0;j<rows.length;j++) io.observe(rows[j]);\n  }\n\n  \/* ===================================================================\n     OVERLAY PROGETTO \u2014 striscia orizzontale continua\n     (sidebar, foto principale, testo, foto della gallery)\n     =================================================================== *\/\n  function shareLinksHtml(p){\n    var url = encodeURIComponent(window.location.href);\n    var text = encodeURIComponent(p.title + ' - Fiume Architecture');\n    return ''+\n      '<a href=\"mailto:?subject='+text+'&body='+url+'\" aria-label=\"Condividi via email\">&#9993;<\/a>'+\n      '<a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u='+url+'\" target=\"_blank\" rel=\"noopener\" aria-label=\"Condividi su Facebook\">f<\/a>'+\n      '<a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url='+url+'\" target=\"_blank\" rel=\"noopener\" aria-label=\"Condividi su LinkedIn\">in<\/a>'+\n      '<a href=\"https:\/\/twitter.com\/intent\/tweet?text='+text+'&url='+url+'\" target=\"_blank\" rel=\"noopener\" aria-label=\"Condividi su X\">X<\/a>';\n  }\n\n  function sidebarHtml(p){\n    return ''+\n      '<aside class=\"fpr-sidebar\">'+\n        '<div class=\"fpr-mark\">'+escapeHtml(p.title.charAt(0))+'<\/div>'+\n        '<h1 class=\"fpr-sidebar-title\">'+escapeHtml(p.title)+'<\/h1>'+\n        '<p class=\"fpr-sidebar-loc\">'+escapeHtml(p.location)+'<\/p>'+\n        '<p class=\"fpr-sidebar-year\">'+p.year+'<\/p>'+\n        '<dl class=\"fpr-sidebar-list\">'+\n          '<dt>Cliente<\/dt><dd>'+escapeHtml(p.client)+'<\/dd>'+\n          '<dt>Tipologia<\/dt><dd>'+escapeHtml(p.typology)+'<\/dd>'+\n          '<dt>Superficie m&sup2; \/ ft&sup2;<\/dt><dd>'+escapeHtml(p.size)+'<\/dd>'+\n          '<dt>Stato<\/dt><dd>'+escapeHtml(p.status)+'<\/dd>'+\n        '<\/dl>'+\n        '<p class=\"fpr-sidebar-share-label\">Condividi<\/p>'+\n        '<div class=\"fpr-sidebar-share\">'+shareLinksHtml(p)+'<\/div>'+\n      '<\/aside>';\n  }\n\n  function imageBoxHtml(src, alt, isHero){\n    return ''+\n      '<div class=\"fpr-box-image'+(isHero?' fpr-box-hero':'')+'\">'+\n        '<img decoding=\"async\" src=\"'+src+'\" alt=\"'+escapeHtml(alt)+'\" loading=\"'+(isHero?'eager':'lazy')+'\">'+\n      '<\/div>';\n  }\n\n  function descBoxHtml(p){\n    var paras = p.description.map(function(t){ return '<p>'+escapeHtml(t)+'<\/p>'; }).join('');\n    return ''+\n      '<div class=\"fpr-box-desc\">'+\n        '<h3>Descrizione<\/h3>'+\n        paras+\n      '<\/div>';\n  }\n\n  function renderProject(p){\n    var html = sidebarHtml(p) + imageBoxHtml(p.cover, p.title, true) + descBoxHtml(p);\n    for(var i=0;i<p.gallery.length;i++){\n      html += imageBoxHtml(p.gallery[i].src, p.title + ' - immagine ' + (i+1), false);\n    }\n    hscroll.innerHTML = html;\n    hscroll.scrollLeft = 0;\n    hscroll.scrollTop = 0;\n  }\n\n  function getProjectById(id){\n    id = String(id);\n    for(var i=0;i<DATA.length;i++){\n      if(String(DATA[i].id) === id) return DATA[i];\n    }\n    return null;\n  }\n\n  \/* Fa \"volare\" un clone della foto cliccata dalla sua posizione nella\n     lista fino alla posizione\/dimensione della foto grande nella vista\n     progetto, poi lascia il posto alla foto vera e rivela il resto\n     (sidebar, descrizione, gallery) in dissolvenza. Questo \u00e8 l'effetto\n     \"il progetto stesso si apre mostrando le informazioni\". *\/\n  function flyImageIntoPlace(sourceImg, targetImg){\n    var sourceRect = sourceImg.getBoundingClientRect();\n    var clone = sourceImg.cloneNode(false);\n    clone.className = 'fpr-zoom-clone';\n    clone.style.top = sourceRect.top + 'px';\n    clone.style.left = sourceRect.left + 'px';\n    clone.style.width = sourceRect.width + 'px';\n    clone.style.height = sourceRect.height + 'px';\n    document.body.appendChild(clone);\n\n    var landed = false;\n    function land(){\n      if(landed) return;\n      landed = true;\n      clone.removeEventListener('transitionend', onEnd);\n      targetImg.style.opacity = '1';\n      overlay.classList.remove('is-zooming');\n      clone.remove();\n    }\n    function onEnd(e){\n      if(e.propertyName !== 'width') return;\n      \/\/ piccola dissolvenza incrociata tra il clone e la foto vera,\n      \/\/ poi via libera a sidebar\/descrizione\/gallery.\n      targetImg.style.opacity = '1';\n      overlay.classList.remove('is-zooming');\n      clone.style.transition = 'opacity .25s ease';\n      clone.style.opacity = '0';\n      setTimeout(land, 260);\n    }\n    clone.addEventListener('transitionend', onEnd);\n    \/\/ Rete di sicurezza indipendente dai requestAnimationFrame qui sotto:\n    \/\/ se per qualsiasi motivo l'animazione non parte o non finisce (tab\n    \/\/ in background, layout lento, ecc.) le informazioni comunque\n    \/\/ compaiono dopo poco invece di restare bloccate in attesa.\n    setTimeout(land, 1400);\n\n    \/\/ Doppio rAF: aspetta che il layout della vista progetto (nascosta\n    \/\/ da .is-zooming ma gi\u00e0 nel DOM) sia stabile prima di misurarlo.\n    requestAnimationFrame(function(){\n      requestAnimationFrame(function(){\n        if(landed) return;\n        var targetRect = targetImg.getBoundingClientRect();\n        clone.style.transition =\n          'top .62s var(--fpr-ease), left .62s var(--fpr-ease), '+\n          'width .62s var(--fpr-ease), height .62s var(--fpr-ease)';\n        clone.style.top = targetRect.top + 'px';\n        clone.style.left = targetRect.left + 'px';\n        clone.style.width = targetRect.width + 'px';\n        clone.style.height = targetRect.height + 'px';\n      });\n    });\n  }\n\n  function openProject(id, triggerEl){\n    var p = getProjectById(id);\n    if(!p) return;\n    lastTrigger = triggerEl || null;\n\n    var sourceImg = triggerEl ? triggerEl.querySelector('.fpr-row-media img') : null;\n\n    renderProject(p);\n\n    document.body.classList.add('fpr-lock');\n    overlay.setAttribute('aria-hidden', 'false');\n    overlay.classList.add('is-open');\n    if(sourceImg) overlay.classList.add('is-zooming');\n\n    document.addEventListener('keydown', onKeydown);\n\n    if(sourceImg){\n      var heroImg = hscroll.querySelector('.fpr-box-hero img');\n      heroImg.style.opacity = '0';\n      flyImageIntoPlace(sourceImg, heroImg);\n    }\n  }\n\n  function closeProject(){\n    overlay.classList.remove('is-open');\n    overlay.classList.remove('is-zooming');\n    overlay.setAttribute('aria-hidden', 'true');\n    document.body.classList.remove('fpr-lock');\n    document.removeEventListener('keydown', onKeydown);\n    if(lastTrigger && lastTrigger.focus) lastTrigger.focus();\n    \/\/ Se si chiude mentre la foto \u00e8 ancora \"in volo\", rimuove il clone.\n    var stray = document.querySelectorAll('.fpr-zoom-clone');\n    for(var i=0;i<stray.length;i++) stray[i].remove();\n  }\n\n  function onKeydown(e){\n    if(e.key === 'Escape'){ closeProject(); return; }\n    if(!desktopMQ.matches) return;\n    if(e.key === 'ArrowRight'){ hscroll.scrollLeft += hscroll.clientWidth * .8; }\n    if(e.key === 'ArrowLeft'){ hscroll.scrollLeft -= hscroll.clientWidth * .8; }\n  }\n\n  \/* Rotellina del mouse verticale -> scorrimento orizzontale.\n     Solo da 1024px in su: sotto quella soglia la vista \u00e8 impilata\n     verticalmente (come nel sito reale) e lo scroll resta normale. *\/\n  hscroll.addEventListener('wheel', function(e){\n    if(!desktopMQ.matches) return;\n    if(Math.abs(e.deltaY) > Math.abs(e.deltaX)){\n      hscroll.scrollLeft += e.deltaY;\n      e.preventDefault();\n    }\n  }, { passive:false });\n\n  closeBtn.addEventListener('click', closeProject);\n  closeBtnX.addEventListener('click', closeProject);\n\n  \/* ===================================================================\n     INIT\n     =================================================================== *\/\n  buildFeed();\n  bindFeedEvents();\n  observeReveal();\n})();\n<\/script>\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>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/fiume.mg-web.it\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fiume.mg-web.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fiume.mg-web.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fiume.mg-web.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fiume.mg-web.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":7,"href":"https:\/\/fiume.mg-web.it\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/fiume.mg-web.it\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/fiume.mg-web.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}