{"id":23,"date":"2026-05-28T17:23:58","date_gmt":"2026-05-28T15:23:58","guid":{"rendered":"https:\/\/www.romasiillumina.it\/?page_id=23"},"modified":"2026-05-28T17:23:58","modified_gmt":"2026-05-28T15:23:58","slug":"23-2","status":"publish","type":"page","link":"https:\/\/www.romasiillumina.com\/?page_id=23","title":{"rendered":""},"content":{"rendered":"


\n
\n
\n
\n
\nRoma si illumina<\/title><\/p>\n<style>\n * { box-sizing: border-box; margin: 0; padding: 0; }<\/p>\n<p> :root {\n --navy: #1a2547;\n --gold: #b59530;\n --gold-light: #c9a945;\n --bg: #ffffff;\n }<\/p>\n<p> html, body {\n height: 100%;\n background: var(--bg);\n font-family: 'Helvetica Neue', Arial, sans-serif;\n color: var(--navy);\n -webkit-font-smoothing: antialiased;\n }<\/p>\n<p> .app {\n max-width: 460px;\n margin: 0 auto;\n min-height: 100vh;\n position: relative;\n background: #fff;\n box-shadow: 0 0 30px rgba(0,0,0,0.08);\n padding-bottom: 110px;\n }<\/p>\n<p> \/* HEADER *\/\n .header {\n background: var(--navy);\n height: 140px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n }\n .logo {\n text-align: center;\n line-height: 1;\n }\n .logo .roma {\n font-family: Georgia, 'Times New Roman', serif;\n font-size: 38px;\n letter-spacing: 4px;\n font-weight: 400;\n }\n .logo .illumina {\n font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;\n font-size: 26px;\n font-style: italic;\n margin-top: 2px;\n letter-spacing: 1px;\n }<\/p>\n<p> \/* VIEWS *\/\n .view { display: none; padding: 30px 25px 20px; }\n .view.active { display: block; }<\/p>\n<p> \/* MAP VIEW *\/\n .map-title {\n color: var(--gold);\n font-size: 22px;\n font-weight: 800;\n letter-spacing: 1px;\n margin: 10px 0 15px;\n }<\/p>\n<p> .map-svg-wrap {\n width: 100%;\n margin-top: 10px;\n }\n .map-svg { width: 100%; height: auto; display: block; }<\/p>\n<p> \/* LEGEND VIEW *\/\n .legend-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 30px 20px;\n padding-top: 20px;\n }\n .legend-col h2 {\n color: var(--gold);\n font-size: 19px;\n font-weight: 800;\n letter-spacing: 1px;\n margin-bottom: 18px;\n }\n .legend-item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n margin-bottom: 14px;\n font-size: 11.5px;\n font-weight: 700;\n letter-spacing: 0.3px;\n }\n .badge {\n flex: 0 0 26px;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 700;\n line-height: 1;\n }\n .badge.num {\n background: #fff;\n border: 1.5px solid var(--navy);\n color: var(--navy);\n }\n .badge.letter {\n background: var(--navy);\n color: #fff;\n }\n .legend-item .label {\n padding-top: 6px;\n line-height: 1.25;\n color: var(--navy);\n }<\/p>\n<p> \/* BOTTOM TAB BAR *\/\n .tabbar {\n position: fixed;\n bottom: 18px;\n left: 50%;\n transform: translateX(-50%);\n width: calc(100% - 50px);\n max-width: 410px;\n background: #fff;\n border: 1.5px solid var(--navy);\n border-radius: 50px;\n display: flex;\n overflow: hidden;\n box-shadow: 0 6px 20px rgba(0,0,0,0.08);\n }\n .tabbar button {\n flex: 1;\n background: transparent;\n border: 0;\n padding: 18px 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--navy);\n cursor: pointer;\n border-radius: 50px;\n transition: background 0.25s, color 0.25s;\n font-family: inherit;\n }\n .tabbar button.active {\n background: var(--navy);\n color: #fff;\n }<\/p>\n<p> \/* SVG node styles *\/\n .node-letter circle {\n fill: var(--gold);\n }\n .node-letter text {\n fill: #fff;\n font-weight: 700;\n font-family: Arial, sans-serif;\n }\n .node-num circle {\n fill: #fff;\n stroke: var(--gold);\n stroke-width: 1.3;\n }\n .node-num text {\n fill: var(--gold);\n font-weight: 600;\n font-family: Arial, sans-serif;\n font-size: 10px;\n }\n .path-line {\n stroke: var(--gold);\n stroke-width: 3;\n fill: none;\n stroke-linecap: round;\n }\n .star { fill: var(--gold); }\n .dot { fill: var(--gold); }\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"app\">\n<p> <!-- HEADER --><\/p>\n<div class=\"header\">\n<div class=\"logo\">\n<div class=\"roma\">ROMA<\/div>\n<div class=\"illumina\">si illumina<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- MAP VIEW --><\/p>\n<section id=\"view-map\" class=\"view active\">\n<h1 class=\"map-title\">IL PERCORSO LUMINOSO<\/h1>\n<div class=\"map-svg-wrap\">\n <svg class=\"map-svg\" viewBox=\"0 0 600 1150\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><\/p>\n<p> <!-- Decorative sparkles -->\n <g class=\"star\" font-family=\"Arial\" font-size=\"28\">\n <text x=\"80\" y=\"225\">\u2733<\/text>\n <text x=\"400\" y=\"305\">\u2733<\/text>\n <text x=\"555\" y=\"320\">\u2733<\/text>\n <text x=\"35\" y=\"475\">\u2733<\/text>\n <text x=\"535\" y=\"565\">\u2733<\/text>\n <text x=\"195\" y=\"685\">\u2733<\/text>\n <text x=\"40\" y=\"900\">\u2733<\/text>\n <text x=\"450\" y=\"900\">\u2733<\/text>\n <text x=\"245\" y=\"980\">\u2733<\/text>\n <\/g><\/p>\n<p> <!-- Small dots -->\n <g class=\"dot\">\n <circle cx=\"340\" cy=\"270\" r=\"3.5\"\/>\n <circle cx=\"140\" cy=\"370\" r=\"3.5\"\/>\n <circle cx=\"560\" cy=\"455\" r=\"3.5\"\/>\n <circle cx=\"455\" cy=\"715\" r=\"3.5\"\/>\n <circle cx=\"125\" cy=\"785\" r=\"3.5\"\/>\n <circle cx=\"510\" cy=\"940\" r=\"3.5\"\/>\n <circle cx=\"380\" cy=\"1010\" r=\"3.5\"\/>\n <\/g><\/p>\n<p> <!-- PATH LINES (drawn before nodes so nodes overlap) -->\n <!-- A down through 1 to C continuing to G and I -->\n <path class=\"path-line\" d=\"M 215 145 L 330 530\"\/>\n <path class=\"path-line\" d=\"M 330 530 L 430 800\"\/>\n <path class=\"path-line\" d=\"M 430 800 L 480 1075\"\/>\n<p> <!-- A down-left to 3 -->\n <path class=\"path-line\" d=\"M 215 145 L 175 715\"\/>\n<p> <!-- A through 4-2 to B -->\n <path class=\"path-line\" d=\"M 215 145 Q 320 300 500 405\"\/>\n<p> <!-- B to C via 5 -->\n <path class=\"path-line\" d=\"M 500 405 L 330 530\"\/>\n<p> <!-- C to D -->\n <path class=\"path-line\" d=\"M 330 530 L 255 588\"\/>\n<p> <!-- C to F via 17 -->\n <path class=\"path-line\" d=\"M 330 530 L 445 700\"\/>\n<p> <!-- G to H -->\n <path class=\"path-line\" d=\"M 430 800 L 290 830\"\/>\n<p> <!-- J long arc curving down to F -->\n <path class=\"path-line\" d=\"M 725 245 Q 700 600 445 700\"\/>\n<p> <!-- LETTER NODES (large gold) -->\n <g class=\"node-letter\">\n <!-- A -->\n <circle cx=\"215\" cy=\"145\" r=\"30\"\/>\n <text x=\"215\" y=\"153\" text-anchor=\"middle\" font-size=\"22\">A<\/text>\n <!-- B -->\n <circle cx=\"500\" cy=\"405\" r=\"22\"\/>\n <text x=\"500\" y=\"412\" text-anchor=\"middle\" font-size=\"17\">B<\/text>\n <!-- C -->\n <circle cx=\"330\" cy=\"530\" r=\"22\"\/>\n <text x=\"330\" y=\"537\" text-anchor=\"middle\" font-size=\"17\">C<\/text>\n <!-- D -->\n <circle cx=\"255\" cy=\"588\" r=\"18\"\/>\n <text x=\"255\" y=\"594\" text-anchor=\"middle\" font-size=\"14\">D<\/text>\n <!-- E -->\n <circle cx=\"320\" cy=\"615\" r=\"17\"\/>\n <text x=\"320\" y=\"621\" text-anchor=\"middle\" font-size=\"13\">E<\/text>\n <!-- F -->\n <circle cx=\"445\" cy=\"700\" r=\"20\"\/>\n <text x=\"445\" y=\"707\" text-anchor=\"middle\" font-size=\"15\">F<\/text>\n <!-- G -->\n <circle cx=\"430\" cy=\"800\" r=\"18\"\/>\n <text x=\"430\" y=\"806\" text-anchor=\"middle\" font-size=\"14\">G<\/text>\n <!-- H -->\n <circle cx=\"290\" cy=\"830\" r=\"17\"\/>\n <text x=\"290\" y=\"836\" text-anchor=\"middle\" font-size=\"13\">H<\/text>\n <!-- I -->\n <circle cx=\"480\" cy=\"1075\" r=\"22\"\/>\n <text x=\"480\" y=\"1082\" text-anchor=\"middle\" font-size=\"17\">I<\/text>\n <!-- J -->\n <circle cx=\"725\" cy=\"245\" r=\"20\"\/>\n <text x=\"725\" y=\"252\" text-anchor=\"middle\" font-size=\"15\">J<\/text>\n <\/g><\/p>\n<p> <!-- NUMBER NODES (small outlined) -->\n <g class=\"node-num\">\n <!-- 1 -->\n <circle cx=\"265\" cy=\"265\" r=\"12\"\/>\n <text x=\"265\" y=\"269\" text-anchor=\"middle\">1<\/text>\n <!-- 2 -->\n <circle cx=\"380\" cy=\"320\" r=\"12\"\/>\n <text x=\"380\" y=\"324\" text-anchor=\"middle\">2<\/text>\n <!-- 3 (far bottom-left along A's line) -->\n <circle cx=\"175\" cy=\"715\" r=\"12\"\/>\n <text x=\"175\" y=\"719\" text-anchor=\"middle\">3<\/text>\n <!-- 4 -->\n <circle cx=\"355\" cy=\"280\" r=\"12\"\/>\n <text x=\"355\" y=\"284\" text-anchor=\"middle\">4<\/text>\n <!-- 5 -->\n <circle cx=\"385\" cy=\"490\" r=\"12\"\/>\n <text x=\"385\" y=\"494\" text-anchor=\"middle\">5<\/text>\n <!-- 6 -->\n <circle cx=\"318\" cy=\"463\" r=\"12\"\/>\n <text x=\"318\" y=\"467\" text-anchor=\"middle\">6<\/text>\n <!-- 7 -->\n <circle cx=\"320\" cy=\"430\" r=\"12\"\/>\n <text x=\"320\" y=\"434\" text-anchor=\"middle\">7<\/text>\n <!-- 8 -->\n <circle cx=\"320\" cy=\"385\" r=\"12\"\/>\n <text x=\"320\" y=\"389\" text-anchor=\"middle\">8<\/text>\n <!-- 9 -->\n <circle cx=\"345\" cy=\"400\" r=\"12\"\/>\n <text x=\"345\" y=\"404\" text-anchor=\"middle\">9<\/text>\n <!-- 10 -->\n <circle cx=\"372\" cy=\"388\" r=\"12\"\/>\n <text x=\"372\" y=\"392\" text-anchor=\"middle\">10<\/text>\n <!-- 11 -->\n <circle cx=\"400\" cy=\"400\" r=\"12\"\/>\n <text x=\"400\" y=\"404\" text-anchor=\"middle\">11<\/text>\n <!-- 12 -->\n <circle cx=\"225\" cy=\"513\" r=\"12\"\/>\n <text x=\"225\" y=\"517\" text-anchor=\"middle\">12<\/text>\n <!-- 13 -->\n <circle cx=\"290\" cy=\"555\" r=\"12\"\/>\n <text x=\"290\" y=\"559\" text-anchor=\"middle\">13<\/text>\n <!-- 14 -->\n <circle cx=\"445\" cy=\"498\" r=\"12\"\/>\n <text x=\"445\" y=\"502\" text-anchor=\"middle\">14<\/text>\n <!-- 15 -->\n <circle cx=\"480\" cy=\"528\" r=\"12\"\/>\n <text x=\"480\" y=\"532\" text-anchor=\"middle\">15<\/text>\n <!-- 16 -->\n <circle cx=\"490\" cy=\"560\" r=\"12\"\/>\n <text x=\"490\" y=\"564\" text-anchor=\"middle\">16<\/text>\n <!-- 17 -->\n <circle cx=\"385\" cy=\"668\" r=\"12\"\/>\n <text x=\"385\" y=\"672\" text-anchor=\"middle\">17<\/text>\n <!-- 18 -->\n <circle cx=\"583\" cy=\"495\" r=\"12\"\/>\n <text x=\"583\" y=\"499\" text-anchor=\"middle\">18<\/text>\n <\/g><\/p>\n<p> <\/svg>\n <\/div>\n<\/section>\n<p> <!-- LEGEND VIEW --><\/p>\n<section id=\"view-legend\" class=\"view\">\n<div class=\"legend-grid\">\n<div class=\"legend-col\">\n<h2>LE LUMINARIE<\/h2>\n<div class=\"legend-item\"><span class=\"badge num\">1<\/span><span class=\"label\">VIA DEL CORSO<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">2<\/span><span class=\"label\">VIA DEI CONDOTTI<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">3<\/span><span class=\"label\">VIA DI RIPETTA<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">4<\/span><span class=\"label\">VIA DEL BABUINO<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">5<\/span><span class=\"label\">VIA MARGUTTA<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">6<\/span><span class=\"label\">VIA DELLA FONTANELLA BORGHESE<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">7<\/span><span class=\"label\">VIA TOMACELLI<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">8<\/span><span class=\"label\">VIA BOCCA DI LEONE<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">9<\/span><span class=\"label\">VIA BELSIANA<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">10<\/span><span class=\"label\">VIA MARIO DE FIORI<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">11<\/span><span class=\"label\">VIA DEL GAMBERO<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">12<\/span><span class=\"label\">VIA BORGOGNONA<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">13<\/span><span class=\"label\">VIA DELLA CROCE<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">14<\/span><span class=\"label\">VIA DELLA VITE<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">15<\/span><span class=\"label\">VIA DELLE CARROZZE<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">16<\/span><span class=\"label\">VIA VITTORIA<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">17<\/span><span class=\"label\">VIA FRATTINA<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge num\">18<\/span><span class=\"label\">VIA SISTINA<\/span><\/div>\n<\/p><\/div>\n<div class=\"legend-col\">\n<h2>GLI ALBERI<\/h2>\n<div class=\"legend-item\"><span class=\"badge letter\">A<\/span><span class=\"label\">PIAZZA DEL POPOLO<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge letter\">B<\/span><span class=\"label\">PIAZZA SAN LORENZO IN LUCINA<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge letter\">C<\/span><span class=\"label\">PIAZZA DI SPAGNA<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge letter\">D<\/span><span class=\"label\">PIAZZA SAN SILVESTRO<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge letter\">E<\/span><span class=\"label\">PIAZZA CAPRANICA<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge letter\">F<\/span><span class=\"label\">VIA VENETO<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge letter\">G<\/span><span class=\"label\">PIAZZA DEL CAMPIDOGLIO<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge letter\">H<\/span><span class=\"label\">LARGO DELLA FONTANELLA DI BORGHESE<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge letter\">I<\/span><span class=\"label\">LARGO GOLDONI<\/span><\/div>\n<div class=\"legend-item\"><span class=\"badge letter\">J<\/span><span class=\"label\">GALLERIA ALBERTO SORDI<\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <!-- TABBAR --><\/p>\n<nav class=\"tabbar\">\n <button id=\"tab-map\" class=\"active\" type=\"button\">Mappa<\/button><br \/>\n <button id=\"tab-legend\" type=\"button\">Legenda<\/button><br \/>\n <\/nav>\n<\/div>\n<p><script>\n const tabMap = document.getElementById('tab-map');\n const tabLegend = document.getElementById('tab-legend');\n const viewMap = document.getElementById('view-map');\n const viewLegend = document.getElementById('view-legend');<\/p>\n<p> function showMap() {\n viewMap.classList.add('active');\n viewLegend.classList.remove('active');\n tabMap.classList.add('active');\n tabLegend.classList.remove('active');\n }\n function showLegend() {\n viewLegend.classList.add('active');\n viewMap.classList.remove('active');\n tabLegend.classList.add('active');\n tabMap.classList.remove('active');\n }<\/p>\n<p> tabMap.addEventListener('click', showMap);\n tabLegend.addEventListener('click', showLegend);\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Roma si illumina ROMA si illumina IL PERCORSO LUMINOSO \u2733 \u2733 \u2733 \u2733 \u2733 \u2733 \u2733 \u2733 \u2733 A B C D E F G H I J 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 LE LUMINARIE 1VIA DEL CORSO 2VIA DEI CONDOTTI 3VIA […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-23","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.romasiillumina.com\/index.php?rest_route=\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.romasiillumina.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.romasiillumina.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.romasiillumina.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.romasiillumina.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=23"}],"version-history":[{"count":1,"href":"https:\/\/www.romasiillumina.com\/index.php?rest_route=\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/www.romasiillumina.com\/index.php?rest_route=\/wp\/v2\/pages\/23\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/www.romasiillumina.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}