{"id":65,"date":"2025-10-11T12:22:43","date_gmt":"2025-10-11T12:22:43","guid":{"rendered":"https:\/\/web31251290.lab1.almamater.si\/?page_id=65"},"modified":"2025-10-16T15:08:00","modified_gmt":"2025-10-16T15:08:00","slug":"barcelona","status":"publish","type":"page","link":"https:\/\/web31251290.lab1.almamater.si\/index.php\/barcelona\/","title":{"rendered":"Barcelona"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"65\" class=\"elementor elementor-65\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9e0c6f1 e-flex e-con-boxed e-con e-parent\" data-id=\"9e0c6f1\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d07517 elementor-widget elementor-widget-html\" data-id=\"8d07517\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMART CITY \u2014 TOP NAV (vedno viden, z napisom \u201cTokio\u201d) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<header class=\"smart-topnav\" role=\"navigation\" aria-label=\"Main\">\r\n  <div class=\"nav-frame\">\r\n    <div class=\"nav-inner\">\r\n      <a class=\"brand\" href=\"https:\/\/web31251290.lab1.almamater.si\" aria-label=\"Home\">\r\n        <span class=\"dot\"><\/span> Smart City\r\n      <\/a>\r\n\r\n      <button class=\"nav-toggle\" aria-label=\"Open menu\" aria-expanded=\"false\">\r\n        <span><\/span><span><\/span><span><\/span>\r\n      <\/button>\r\n\r\n      <nav class=\"nav-links\">\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\" data-route=\"home\" class=\"is-active\">Home<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/singapur\" data-route=\"singapore\">Singapur<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/tokio\" data-route=\"tokio\">Tokio<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/london\" data-route=\"london\">London<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/barcelona\" data-route=\"barcelona\">Barcelona<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/ljubljana\" data-route=\"ljubljana\">Ljubljana<\/a>\r\n      <\/nav>\r\n    <\/div>\r\n  <\/div>\r\n<\/header>\r\n\r\n<style>\r\n:root{\r\n  --bg-0:#05070c; --bg-1:#0b0f18;\r\n  --txt-1:#e7fbff; --txt-2:#9fd8ea;\r\n  --accent:#00eaff;\r\n  --border:rgba(255,255,255,.08);\r\n}\r\n\r\n\/* ====== TOP NAV ====== *\/\r\n.smart-topnav{\r\n    top: 20px; \r\n  position:fixed;\r\n  top:0; left:0; width:100%;\r\n  z-index:9999;\r\n  font-family:\"Poppins\",system-ui,Segoe UI,Arial,sans-serif;\r\n  color:var(--txt-1);\r\n  transition: background .3s ease, box-shadow .3s ease;\r\n  backdrop-filter: blur(10px);\r\n}\r\n\r\n\/* okvir menija *\/\r\n.smart-topnav .nav-frame{\r\n  background: rgba(5,7,12,0.7);\r\n  border-bottom: 1px solid var(--border);\r\n  box-shadow: 0 6px 20px rgba(0,0,0,.35);\r\n}\r\n\r\n\/* notranjost *\/\r\n.smart-topnav .nav-inner{\r\n  max-width: 1200px; margin: 0 auto;\r\n  padding: 12px 18px;\r\n  display: flex; align-items: center; justify-content: space-between;\r\n}\r\n\r\n\/* brand *\/\r\n.smart-topnav .brand{\r\n  display:flex; align-items:center; gap:.6rem;\r\n  font-weight:800; letter-spacing:.5px; text-decoration:none; color:var(--txt-1);\r\n}\r\n.smart-topnav .brand .dot{\r\n  width:10px; height:10px; border-radius:999px;\r\n  background: radial-gradient(circle at 50% 50%, var(--accent) 0%, transparent 70%);\r\n  box-shadow: 0 0 12px var(--accent), 0 0 28px var(--accent);\r\n}\r\n\r\n\/* links *\/\r\n.smart-topnav .nav-links{\r\n  display:flex; align-items:center; gap:.6rem;\r\n}\r\n.smart-topnav .nav-links a{\r\n  --pad-x: 14px; --pad-y: 8px;\r\n  position:relative; display:inline-flex; align-items:center;\r\n  padding: var(--pad-y) var(--pad-x);\r\n  font-weight:600; color:var(--txt-1); text-decoration:none;\r\n  border-radius:12px;\r\n  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;\r\n}\r\n\r\n\/* underline + glow *\/\r\n.smart-topnav .nav-links a::after{\r\n  content:\"\"; position:absolute; left:10px; right:10px; bottom:6px; height:2px;\r\n  background: linear-gradient(90deg, transparent 0 6%, var(--accent) 35% 65%, transparent 94% 100%);\r\n  opacity:0; transform: translateY(3px); transition: all .18s ease;\r\n  box-shadow: 0 0 10px var(--accent);\r\n}\r\n\r\n\/* hover \/ focus *\/\r\n.smart-topnav .nav-links a:hover,\r\n.smart-topnav .nav-links a:focus-visible{\r\n  background: rgba(124,249,255,.07);\r\n  box-shadow: 0 0 0 1px rgba(124,249,255,.18) inset;\r\n  transform: translateY(-1px);\r\n}\r\n.smart-topnav .nav-links a:hover::after,\r\n.smart-topnav .nav-links a:focus-visible::after{ opacity:1; transform:translateY(0); }\r\n\r\n\/* active\/current page *\/\r\n.smart-topnav .nav-links a.is-active,\r\n.smart-topnav .nav-links a[aria-current=\"page\"]{\r\n  background: rgba(124,249,255,.12);\r\n  box-shadow: 0 0 0 1px rgba(124,249,255,.26) inset, 0 0 20px rgba(0,234,255,.15);\r\n}\r\n.smart-topnav .nav-links a.is-active::after,\r\n.smart-topnav .nav-links a[aria-current=\"page\"]::after{\r\n  opacity:1; transform:translateY(0);\r\n}\r\n\r\n\/* hamburger for mobile *\/\r\n.nav-toggle{\r\n  display:none; background:none; border:0; cursor:pointer;\r\n  width:42px; height:36px; border-radius:10px;\r\n}\r\n.nav-toggle span{\r\n  display:block; height:2px; margin:7px 8px; background:var(--txt-1);\r\n  transition: transform .2s ease, opacity .2s ease;\r\n}\r\n\r\n\/* responsive *\/\r\n@media (max-width: 930px){\r\n  .nav-toggle{ display:block; }\r\n  .smart-topnav .nav-inner{ padding:10px 14px; }\r\n  .smart-topnav .nav-links{\r\n    position:fixed; top:64px; right:14px; left:14px;\r\n    display:flex; flex-direction:column; gap:.4rem;\r\n    background: linear-gradient(180deg, rgba(10,14,22,.92), rgba(10,14,22,.86));\r\n    border:1px solid var(--border);\r\n    border-radius:14px; padding:10px;\r\n    box-shadow: 0 12px 40px rgba(0,0,0,.45);\r\n    opacity:0; pointer-events:none; transform: translateY(-8px);\r\n    transition: all .2s ease;\r\n  }\r\n  .smart-topnav.open .nav-links{\r\n    opacity:1; pointer-events:auto; transform: translateY(0);\r\n  }\r\n  .smart-topnav.open .nav-toggle span:nth-child(1){ transform: translateY(9px) rotate(45deg); }\r\n  .smart-topnav.open .nav-toggle span:nth-child(2){ opacity:0; }\r\n  .smart-topnav.open .nav-toggle span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const header = document.querySelector('.smart-topnav');\r\n  const btn = header.querySelector('.nav-toggle');\r\n  const links = header.querySelector('.nav-links');\r\n\r\n  btn.addEventListener('click', () => {\r\n    const open = header.classList.toggle('open');\r\n    btn.setAttribute('aria-expanded', open ? 'true' : 'false');\r\n  });\r\n\r\n  links.querySelectorAll('a').forEach(a=>{\r\n    a.addEventListener('click', ()=> header.classList.remove('open'));\r\n  });\r\n\r\n  const path = location.pathname.toLowerCase();\r\n  links.querySelectorAll('a').forEach(a=>{\r\n    const href = a.getAttribute('href') || '';\r\n    if(href && path !== '\/' && href !== '\/' && path.startsWith(new URL(href, location.origin).pathname.toLowerCase())){\r\n      a.classList.add('is-active'); a.setAttribute('aria-current','page');\r\n    }\r\n    if(path === '\/' && (href === '\/' || href.endsWith('\/index.php'))){\r\n      a.classList.add('is-active'); a.setAttribute('aria-current','page');\r\n    }\r\n  });\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-73b62c9 e-flex e-con-boxed e-con e-parent\" data-id=\"73b62c9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8ae83d6 elementor-widget elementor-widget-html\" data-id=\"8ae83d6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMART BARCELONA \u2014 Final (Smaller Text, Enlarged Frame) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;500;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<section class=\"smart-hero fw\" id=\"barcelona\">\r\n  <div class=\"hero-frame hero-frame--scaled\">\r\n    <img decoding=\"async\"\r\n      src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/Sunset_City_Fair_of_Malaga_Andalusia_Spain_Bing_4K_3840x2160-scaled.jpg\"\r\n      alt=\"Barcelona skyline with Sagrada Fam\u00edlia\"\r\n      class=\"hero-img\"\r\n    \/>\r\n\r\n    <div class=\"inner-border inner-border--es\"><\/div>\r\n\r\n    <div class=\"hero-overlay\">\r\n      <h1 class=\"smart-title smart-title--barcelona\">SMART<br>BARCELONA<\/h1>\r\n\r\n      <p class=\"smart-sub\">\r\n        Barcelona blends <strong>citizen-centric design<\/strong>, <strong>open data<\/strong> and\r\n        <strong>low-emission mobility<\/strong>. From <strong>Superilles (Superblocks)<\/strong> and the\r\n        <strong>22@ innovation district<\/strong> to sensor-driven services and a citywide fiber\/5G mesh,\r\n        the metropolis scales sustainable tech for everyday life.\r\n      <\/p>\r\n\r\n      <a class=\"smart-btn smart-btn--es\" href=\"#next\" aria-label=\"Explore Smart Barcelona\">Explore<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n:root{\r\n  --bg-0:#000;\r\n  --white:#fff;\r\n  --es-red:#C60B1E;\r\n  --es-gold:#FFC400;\r\n}\r\n\r\n\/* Background *\/\r\n.smart-hero.fw{\r\n  width:100%;\r\n  min-height:100vh;\r\n  background:var(--bg-0);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  font-family:Poppins,system-ui,sans-serif;\r\n}\r\n\r\n\/* Enlarged frame *\/\r\n.hero-frame{\r\n  position:relative;\r\n  width:110%;\r\n  max-width:2200px;\r\n  aspect-ratio:16\/9;\r\n  border-radius:20px;\r\n  overflow:hidden;\r\n  box-shadow:0 0 40px rgba(0,0,0,.6);\r\n  transform:scale(1.4);\r\n  transform-origin:center;\r\n}\r\n.hero-img{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  border-radius:20px;\r\n  display:block;\r\n}\r\n\r\n\/* Outer white border *\/\r\n.hero-frame::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  border-radius:20px;\r\n  border:6px solid var(--white);\r\n  box-shadow:0 0 18px rgba(255,255,255,.9),\r\n             0 0 34px rgba(255,255,255,.5);\r\n  pointer-events:none;\r\n}\r\n\r\n\/* Inner dashed Spain border *\/\r\n.inner-border{\r\n  position:absolute;\r\n  inset:20px;\r\n  border-radius:16px;\r\n  border:6px dashed transparent;\r\n  background-size:300% 100%;\r\n  animation:esFlow 3s linear infinite, esPulse 2.5s ease-in-out infinite alternate;\r\n  pointer-events:none;\r\n  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n  -webkit-mask-composite:xor;\r\n  mask-composite:exclude;\r\n  padding:6px;\r\n}\r\n.inner-border--es{\r\n  background-image:linear-gradient(90deg, var(--es-red), var(--es-gold), var(--es-red));\r\n  box-shadow:\r\n    0 0 28px rgba(198,11,30,.85),\r\n    0 0 65px rgba(255,196,0,.7),\r\n    inset 0 0 20px rgba(255,255,255,.25);\r\n}\r\n@keyframes esFlow{\r\n  0%{background-position:0% 50%;}\r\n  100%{background-position:300% 50%;}\r\n}\r\n@keyframes esPulse{\r\n  from{\r\n    box-shadow:\r\n      0 0 20px rgba(198,11,30,.6),\r\n      0 0 40px rgba(255,196,0,.45),\r\n      inset 0 0 12px rgba(255,255,255,.15);\r\n  }\r\n  to{\r\n    box-shadow:\r\n      0 0 38px rgba(198,11,30,1),\r\n      0 0 80px rgba(255,196,0,.9),\r\n      inset 0 0 24px rgba(255,255,255,.35);\r\n  }\r\n}\r\n\r\n\/* Overlay *\/\r\n.hero-overlay{\r\n  position:absolute;\r\n  inset:0;\r\n  display:grid;\r\n  place-items:center;\r\n  text-align:center;\r\n  padding:clamp(14px,3vw,28px);\r\n  z-index:2;\r\n}\r\n\r\n\/* Title \u2014 smaller *\/\r\n.smart-title{\r\n  margin:0 0 .35em 0;\r\n  line-height:.9;\r\n  font-weight:800;\r\n  letter-spacing:.05em;\r\n  font-size:clamp(30px,6vw,80px); \/* smaller *\/\r\n  text-transform:uppercase;\r\n}\r\n.smart-title--barcelona{\r\n  color:#fff;\r\n  text-shadow:\r\n    0 0 6px rgba(255,255,255,.95),\r\n    0 0 14px rgba(198,11,30,.9),\r\n    0 0 28px rgba(255,196,0,.9),\r\n    0 0 58px rgba(255,196,0,.65);\r\n  animation:bcnGlow 2.4s ease-in-out infinite alternate;\r\n}\r\n@keyframes bcnGlow{\r\n  from{\r\n    text-shadow:\r\n      0 0 6px rgba(255,255,255,.95),\r\n      0 0 12px rgba(198,11,30,.7),\r\n      0 0 24px rgba(255,196,0,.55),\r\n      0 0 40px rgba(255,196,0,.45);\r\n  }\r\n  to{\r\n    text-shadow:\r\n      0 0 8px rgba(255,255,255,1),\r\n      0 0 18px rgba(198,11,30,1),\r\n      0 0 36px rgba(255,196,0,.95),\r\n      0 0 70px rgba(255,196,0,.8);\r\n  }\r\n}\r\n\r\n\/* Subtitle \u2014 smaller *\/\r\n.smart-sub{\r\n  color:#f3f6f9;\r\n  font-weight:300;\r\n  font-size:clamp(13px,1.5vw,16px); \/* smaller *\/\r\n  max-width:60ch;\r\n  text-shadow:0 0 10px rgba(0,0,0,.55), 0 2px 22px rgba(0,0,0,.55);\r\n  opacity:.95;\r\n  margin-bottom:1.2em;\r\n  backdrop-filter:blur(.5px);\r\n}\r\n\r\n\/* Button \u2014 smaller *\/\r\n.smart-btn{\r\n  display:inline-block;\r\n  padding:0.8em 1.4em;\r\n  font-weight:700;\r\n  font-size:clamp(12px,1.5vw,15px);\r\n  text-decoration:none;\r\n  border-radius:12px;\r\n  transition:transform .18s ease, box-shadow .18s ease;\r\n}\r\n.smart-btn--es{\r\n  background:linear-gradient(180deg,#fff,#fff0cc);\r\n  color:#4a1200;\r\n  border:2px solid rgba(255,196,0,.95);\r\n  box-shadow:0 0 16px rgba(255,196,0,.6),\r\n             inset 0 0 8px rgba(255,255,255,.6);\r\n}\r\n.smart-btn--es:hover{\r\n  transform:translateY(-2px);\r\n  box-shadow:0 0 22px rgba(255,196,0,.9),\r\n             inset 0 0 12px rgba(255,255,255,.9);\r\n}\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cee2e68 e-flex e-con-boxed e-con e-parent\" data-id=\"cee2e68\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0276766 elementor-widget elementor-widget-html\" data-id=\"0276766\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================= SMART SPAIN \u2014 BARCELONA (content under hero) ================= -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;500;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<section class=\"smart-es\">\r\n\r\n    <!-- 1) KPI trak (DEMO vrednosti) -->\r\n    <section class=\"section es-kpis\">\r\n        <div class=\"container kpi-row\">\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"212\">0<\/div><div class=\"l\">km kolesarskih poti<\/div><\/div>\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"6500\">0<\/div><div class=\"l\">IoT senzorjev po mestu<\/div><\/div>\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"78\">0<\/div><div class=\"l\">% elektri\u010dnih avtobusov TMB<\/div><\/div>\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"92\">0<\/div><div class=\"l\">% e-storitve mesta<\/div><\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- 2) Smart Mobility mini-dashboard -->\r\n    <section id=\"mobility-es\" class=\"section es-mobility pro\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">Smart Mobility (Barcelona)<\/h2>\r\n            <div class=\"dash\">\r\n                <article class=\"tile\">\r\n                    <h3>Zasedenost parkiri\u0161\u010d<\/h3>\r\n                    <p class=\"big\"><span class=\"val\" data-min=\"48\" data-max=\"76\">\u2013<\/span>%<\/p>\r\n                    <p class=\"muted\">B:SM gara\u017ee (agregat)<\/p>\r\n                <\/article>\r\n                <article class=\"tile\">\r\n                    <h3>Povpr. hitrost na Avinguda Diagonal<\/h3>\r\n                    <p class=\"big\"><span class=\"val\" data-min=\"18\" data-max=\"32\">\u2013<\/span> km\/h<\/p>\r\n                    <p class=\"muted\">Adaptivni cikli & prioritetni pasovi<\/p>\r\n                <\/article>\r\n                <article class=\"tile\">\r\n                    <h3>Uporaba Bicing<\/h3>\r\n                    <p class=\"big\"><span class=\"val\" data-min=\"32000\" data-max=\"52000\">\u2013<\/span> vo\u017eenj\/dan<\/p>\r\n                    <p class=\"muted\">7-dnevno povpre\u010dje<\/p>\r\n                <\/article>\r\n                <article class=\"tile\">\r\n                    <h3>CO\u2082 prihranki<\/h3>\r\n                    <p class=\"big\"><span class=\"val\" data-min=\"85\" data-max=\"130\">\u2013<\/span> t\/dan<\/p>\r\n                    <p class=\"muted\">Superilles + e-bus + kolesa<\/p>\r\n                <\/article>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- 3) E-storitve (Barcelona \/ Spain) -->\r\n    <section id=\"egov-es\" class=\"section es-egov cards\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">Digital Governance<\/h2>\r\n            <div class=\"quick-cards\">\r\n                <a class=\"q\" href=\"https:\/\/seu-e.cat\/ca\/web\/barcelona\" target=\"_blank\" rel=\"noopener\">\r\n                    <strong>Sede Electr\u00f2nic<\/strong><span>vloge & potrdila (BCN)<\/span>\r\n                <\/a>\r\n                <a class=\"q\" href=\"https:\/\/w30.bcn.cat\/telefons-i-tramits\/\" target=\"_blank\" rel=\"noopener\">\r\n                    <strong>Tr\u00e0mits Barcelona<\/strong><span>mestne e-storitve<\/span>\r\n                <\/a>\r\n                <a class=\"q\" href=\"https:\/\/www.agenciatributaria.es\" target=\"_blank\" rel=\"noopener\">\r\n                    <strong>AEAT<\/strong><span>eDavki (ES)<\/span>\r\n                <\/a>\r\n                <a class=\"q\" href=\"https:\/\/sede.seg-social.gob.es\" target=\"_blank\" rel=\"noopener\">\r\n                    <strong>Seguridad Social<\/strong><span>e-storitev \u0160panije<\/span>\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- 4) Pilotni projekti -->\r\n    <section id=\"projects-es\" class=\"section es-projects\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">Pilotni projekti & 22@ Barcelona<\/h2>\r\n            <div class=\"proj-grid\">\r\n                <article class=\"proj\">\r\n                    <h3>Superilla (Superblock)<\/h3>\r\n                    <p>Preureditev sosesk za miren promet, ve\u010d zelenih povr\u0161in in bolj\u0161i zrak.<\/p>\r\n                    <div class=\"tags\"><span>Urbanism<\/span><span>Low-Emission<\/span><span>Citizen-first<\/span><\/div>\r\n                <\/article>\r\n                <article class=\"proj\">\r\n                    <h3>e-Bus & prioritetna kri\u017ei\u0161\u010da<\/h3>\r\n                    <p>Bus priority pri semaforjih in dinami\u010dni \u010dasovni cikli.<\/p>\r\n                    <div class=\"tags\"><span>V2I<\/span><span>Edge AI<\/span><span>TMB<\/span><\/div>\r\n                <\/article>\r\n                <article class=\"proj\">\r\n                    <h3>Solar BCN<\/h3>\r\n                    <p>PV strehe na \u0161olah in javnih stavbah + odprti podatki o proizvodnji.<\/p>\r\n                    <div class=\"tags\"><span>PV<\/span><span>Open Data<\/span><span>EMS<\/span><\/div>\r\n                <\/article>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- 5) Tech Highlights (filterji + tooltips) -->\r\n    <section id=\"highlights-es\" class=\"section es-gallery\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">City Highlights<\/h2>\r\n            <p class=\"muted\">Pametne to\u010dke Barcelone \u2014 filtriraj in preglej metrike.<\/p>\r\n            <div class=\"filter-row\" role=\"tablist\" aria-label=\"Highlights filter\">\r\n                <button class=\"fbtn active\" data-filter=\"all\">All<\/button>\r\n                <button class=\"fbtn\" data-filter=\"mobility\">Mobility<\/button>\r\n                <button class=\"fbtn\" data-filter=\"energy\">Energy<\/button>\r\n                <button class=\"fbtn\" data-filter=\"environment\">Environment<\/button>\r\n                <button class=\"fbtn\" data-filter=\"services\">Services<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gallery-grid smart\">\r\n\r\n            <!-- MOBILITY -->\r\n            <figure class=\"g\" data-cat=\"mobility\" data-tip=\"Linije e-bus: 10+ \u2022 Baterije: 350\u2013450 kWh \u2022 Depo: Zona Franca\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/irizar-barcelona-autobuses-electricos-1220x656-1.jpg\" alt=\"TMB Electric Bus\" loading=\"lazy\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\ude8d<\/span> e-Bus<\/span> TMB elektri\u010dni avtobus<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <figure class=\"g\" data-cat=\"mobility\" data-tip=\"Bicing postaje: 500+ \u2022 Kolesa: 7000+ \u2022 e-Bikes ~50%\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/w9999.avif\" alt=\"Bicing Barcelona\" loading=\"lazy\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\udeb2<\/span> Bicing<\/span> Bicing (bike-share)<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <figure class=\"g\" data-cat=\"mobility\" data-tip=\"Superilles: 20+ obmo\u010dij \u2022 Zmanj\u0161anje prometa: \u221225% \u2022 CO\u2082: \u221215%\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/Superilles-model-1024x576-1.png\" alt=\"Superilla Barcelona\" loading=\"lazy\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\udfe2<\/span> Superilla<\/span> Superblock uli\u010dni prostor<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <!-- ENERGY -->\r\n            <figure class=\"g\" data-cat=\"energy\" data-tip=\"PV na javnih stavbah \u2022 10+ MWp \u2022 Letna proizvodnja: 12+ GWh\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/161807306_9a4025ca24_z.jpg\" alt=\"Barcelona Solar\" loading=\"lazy\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\udd06<\/span> PV<\/span> Solarne strehe (BCN)<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <!-- ENVIRONMENT -->\r\n            <figure class=\"g\" data-cat=\"environment\" data-tip=\"Senzorji NO\u2082\/PM \u2022 100+ to\u010dk \u2022 Odprti podatki (Sentilo)\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/smart_parking_sensor_board-recortada-med.png\" alt=\"Air quality sensor Barcelona\" loading=\"lazy\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83c\udf2b\ufe0f<\/span> AQ<\/span> Zrak (NO\u2082\/PM) senzor<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <!-- SERVICES -->\r\n            <figure class=\"g\" data-cat=\"services\" data-tip=\"Pametne uli\u010dne svetilke \u2022 LED + senzor prisotnosti \u2022 Var\u010devanje ~30%\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/Foto-3-copia-scaled-1.jpg\" alt=\"Smart Lighting Barcelona\" loading=\"lazy\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\udca1<\/span> Lighting<\/span> Pametna razsvetljava<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <figure class=\"g\" data-cat=\"services\" data-tip=\"Pametni ko\u0161i \u2022 Merjenje napolnjenosti \u2022 Optimizacija logistike\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/thumb_1200x630_Bin.png\" alt=\"Smart bins Barcelona\" loading=\"lazy\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\uddd1\ufe0f<\/span> Waste<\/span> Pametni ko\u0161i<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- 6) Zemljevid: Bicing + IoT (Leaflet \/ OSM) -->\r\n    <section id=\"map-es\" class=\"section es-map\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">Pametna infrastruktura \u2014 zemljevid<\/h2>\r\n            <p class=\"muted\">Demo prikaz: <strong>Bicing postaje<\/strong> in <strong>IoT\/Sentilo senzorji<\/strong> v Barceloni.<\/p>\r\n        <\/div>\r\n        <div class=\"map-wrap\">\r\n            <div id=\"es-map\"><\/div>\r\n            <div class=\"map-legend\">\r\n                <span class=\"dot bike\"><\/span> Bicing\r\n                <span class=\"spacer\"><\/span>\r\n                <span class=\"dot sensor\"><\/span> IoT senzor\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n<style>\r\n    \/* ===== Scoped tema za Spain\/Barcelona ===== *\/\r\n    .smart-es{--bg:#0a0d16;--bg2:#0d1220;--txt:#eafaff;--muted:#a7d8f0;--acc:#00d0ff;--accent2:#ff7b00;--glass:rgba(10,14,22,.55);font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--txt);}\r\n    .smart-es .section{padding:72px 0;background:linear-gradient(180deg,var(--bg),var(--bg2));position:relative;overflow:hidden;}\r\n    .smart-es .container{width:min(1200px,92%);margin:0 auto;}\r\n    .smart-es .sec-title{font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin:0 0 14px;font-size:clamp(24px,3vw,36px);color:#8ef1ff;text-shadow:0 0 18px rgba(0,208,255,.45);}\r\n    .smart-es .muted{color:var(--muted)}\r\n\r\n    \/* KPIs *\/\r\n    .smart-es .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\r\n    .smart-es .kpi{background:rgba(255,255,255,.04);border:1px solid rgba(124,249,255,.25);border-radius:18px;padding:16px;text-align:center}\r\n    .smart-es .kpi .n{font-size:clamp(28px,4vw,40px);font-weight:800;color:#8ef1ff;text-shadow:0 0 14px rgba(0,208,255,.35)}\r\n    .smart-es .kpi .l{color:#d9f5ff}\r\n\r\n    \/* Dashboard *\/\r\n    .smart-es .dash{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\r\n    .smart-es .tile{background:rgba(255,255,255,.04);border:1px solid rgba(124,249,255,.25);border-radius:18px;padding:18px}\r\n    .smart-es .tile h3{margin:0 0 6px}\r\n    .smart-es .tile .big{margin:4px 0 2px;font-weight:800;font-size:clamp(22px,3.2vw,32px);color:#e9fdff}\r\n\r\n    \/* Quick actions *\/\r\n    .smart-es .quick-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\r\n    .smart-es .q{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;border:1px solid rgba(124,249,255,.35);background:linear-gradient(180deg,rgba(124,249,255,.08),rgba(124,249,255,.02));color:#e7fbff;text-decoration:none;transition:.2s transform,.2s box-shadow}\r\n    .smart-es .q strong{font-size:18px}\r\n    .smart-es .q:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,208,255,.18)}\r\n\r\n    \/* Projects *\/\r\n    .smart-es .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}\r\n    .smart-es .proj{padding:18px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(124,249,255,.25)}\r\n    .smart-es .proj .tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}\r\n    .smart-es .proj .tags span{font-size:12px;padding:6px 8px;border-radius:999px;border:1px solid rgba(124,249,255,.35)}\r\n\r\n    \/* Highlights + filterji *\/\r\n    .smart-es .filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}\r\n    .smart-es .fbtn{height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(124,249,255,.35);background:rgba(124,249,255,.06);color:#e7fbff;font-weight:700;cursor:pointer;transition:.2s transform,.2s box-shadow}\r\n    .smart-es .fbtn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,208,255,.18)}\r\n    .smart-es .fbtn.active{background:linear-gradient(180deg,rgba(0,208,255,.85),rgba(0,208,255,.55));color:#01222a;border-color:transparent}\r\n\r\n    .smart-es .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(1200px,92%);margin:10px auto 0}\r\n    .smart-es .g{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(124,249,255,.2);box-shadow:0 10px 26px rgba(0,0,0,.35);background:rgba(255,255,255,.02)}\r\n    .smart-es .g img{width:100%;height:240px;object-fit:cover;display:block;transition:transform .4s ease}\r\n    .smart-es .g:hover img{transform:scale(1.04)}\r\n    .smart-es .g figcaption{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:rgba(11,15,24,.6);backdrop-filter:blur(6px);font-size:12px;border:1px solid rgba(124,249,255,.35);color:#dffaff}\r\n    .smart-es .chip{position:absolute;left:10px;top:10px;background:rgba(0,208,255,.18);border:1px solid rgba(124,249,255,.45);padding:4px 8px;border-radius:999px;font-size:11px;color:#dffaff}\r\n    .smart-es .chip .ico{margin-right:6px;font-size:12px;filter:drop-shadow(0 0 6px rgba(0,208,255,.35))}\r\n    .smart-es .tt{position:absolute;inset:auto 10px 10px auto;min-width:220px;max-width:70%;padding:10px 12px;border-radius:12px;background:rgba(5,9,16,.8);border:1px solid rgba(124,249,255,.35);color:#dffaff;font-size:12px;line-height:1.35;opacity:0;pointer-events:none;transition:.2s opacity}\r\n    .smart-es .g:hover .tt{opacity:1}\r\n\r\n    \/* Map *\/\r\n    .smart-es .map-wrap{width:min(1200px,92%);margin:12px auto 0;position:relative}\r\n    #es-map{height:520px;border-radius:18px;border:1px solid rgba(124,249,255,.25);box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden}\r\n    .smart-es .map-legend{position:absolute;right:12px;top:12px;background:rgba(11,15,24,.65);backdrop-filter:blur(6px);border:1px solid rgba(124,249,255,.35);border-radius:12px;padding:8px 10px;font-size:12px;color:#dffaff;display:flex;align-items:center;gap:12px}\r\n    .smart-es .map-legend .spacer{display:inline-block;width:10px}\r\n    .smart-es .dot{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 12px currentColor}\r\n    .smart-es .dot.bike{color:#65ff87;background:#65ff87}\r\n    .smart-es .dot.sensor{color:#ffad42;background:#ffad42}\r\n\r\n    \/* CTA + buttons *\/\r\n    .smart-es .es-cta .cta-box{background:linear-gradient(180deg,rgba(124,249,255,.08),rgba(124,249,255,.03));border:1px solid rgba(124,249,255,.25);border-radius:22px;padding:28px;box-shadow:0 14px 40px rgba(0,0,0,.35)}\r\n    .smart-es .cta-actions{display:flex;gap:10px;flex-wrap:wrap}\r\n    .smart-es .btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:14px;text-decoration:none;font-weight:700;border:1px solid rgba(124,249,255,.4);background:rgba(124,249,255,.08);color:var(--txt);backdrop-filter:blur(6px);transition:.2s transform,.2s box-shadow}\r\n    .smart-es .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,208,255,.25)}\r\n    .smart-es .btn-primary{background:linear-gradient(180deg,rgba(0,208,255,.85),rgba(0,208,255,.55));color:#01222a;border-color:transparent}\r\n    .smart-es .btn-ghost{background:transparent}\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width:1024px){\r\n        .smart-es .kpi-row{grid-template-columns:1fr 1fr}\r\n        .smart-es .dash{grid-template-columns:1fr 1fr}\r\n        .smart-es .quick-cards{grid-template-columns:1fr 1fr}\r\n        .smart-es .proj-grid{grid-template-columns:1fr 1fr}\r\n        .smart-es .gallery-grid{grid-template-columns:repeat(2,1fr)}\r\n    }\r\n    @media (max-width:640px){\r\n        .smart-es .kpi-row,.smart-es .dash,.smart-es .quick-cards,.smart-es .proj-grid{grid-template-columns:1fr}\r\n        .smart-es .gallery-grid{grid-template-columns:1fr}\r\n        #es-map{height:420px}\r\n    }\r\n<\/style>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" crossorigin>\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" crossorigin><\/script>\r\n<script>\r\n    \/* KPI animacija *\/\r\n    function esAnimateKPIs(){\r\n        document.querySelectorAll('.smart-es .kpi .n').forEach(el=>{\r\n            const target=+el.dataset.val; let cur=0; const step=Math.max(1,Math.round(target\/40));\r\n            const t=setInterval(()=>{cur+=step;if(cur>=target){cur=target;clearInterval(t);}el.textContent=cur;},20);\r\n        });\r\n    }\r\n    \/* Dashboard refresh *\/\r\n    const esRand=(a,b)=>Math.round(a+Math.random()*(b-a));\r\n    function esRefreshVals(){\r\n        document.querySelectorAll('.smart-es .tile .val').forEach(el=>{\r\n            el.textContent=esRand(+el.dataset.min,+el.dataset.max);\r\n        });\r\n    }\r\n    \/* Highlights: filter + tooltip *\/\r\n    function esInitHighlights(){\r\n        const btns=document.querySelectorAll('.smart-es .fbtn');\r\n        const cards=document.querySelectorAll('.smart-es .gallery-grid .g');\r\n        btns.forEach(b=>b.addEventListener('click',()=>{\r\n            btns.forEach(x=>x.classList.remove('active')); b.classList.add('active');\r\n            const f=b.dataset.filter;\r\n            cards.forEach(c=>{ c.style.display=(f==='all'||c.dataset.cat===f)?'':'none'; });\r\n        }));\r\n        cards.forEach(c=>{\r\n            const tip=c.querySelector('.tt'); if(tip && c.dataset.tip){ tip.textContent=c.dataset.tip; }\r\n        });\r\n    }\r\n    \/* Leaflet mapa (Barcelona demo) *\/\r\n    function initEsMap(){\r\n        const map=L.map('es-map',{zoomControl:true,scrollWheelZoom:true}).setView([41.3874,2.1686],13); \/\/ Pla\u00e7a Catalunya\r\n        L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png',{maxZoom:19,attribution:'&copy; OpenStreetMap'}).addTo(map);\r\n        const bikeStyle={radius:8,color:'#65ff87',fillColor:'#65ff87',fillOpacity:.9,weight:1};\r\n        const sensorStyle={radius:8,color:'#ffad42',fillColor:'#ffad42',fillOpacity:.9,weight:1};\r\n\r\n        const bicing=[\r\n            {name:'Bicing \u2013 Pla\u00e7a Catalunya',coords:[41.3870,2.1700]},\r\n            {name:'Bicing \u2013 Arc de Triomf',coords:[41.3911,2.1807]},\r\n            {name:'Bicing \u2013 Poblenou',coords:[41.4023,2.2036]},\r\n            {name:'Bicing \u2013 Barceloneta',coords:[41.3813,2.1895]}\r\n        ];\r\n        const sensors=[\r\n            {name:'AQ \/ NO\u2082 \u2013 Eixample',coords:[41.3895,2.1618]},\r\n            {name:'AQ \/ PM \u2013 Sagrada Fam\u00edlia',coords:[41.4036,2.1744]},\r\n            {name:'Met \/ Temp \u2013 Montju\u00efc',coords:[41.3635,2.1580]},\r\n            {name:'Flood \u2013 Bes\u00f2s',coords:[41.4306,2.2187]}\r\n        ];\r\n\r\n        const bikeLayer=L.layerGroup(bicing.map(s=>L.circleMarker(s.coords,bikeStyle).bindPopup(`<strong>${s.name}<\/strong>`))).addTo(map);\r\n        const sensorLayer=L.layerGroup(sensors.map(s=>L.circleMarker(s.coords,sensorStyle).bindPopup(`<strong>${s.name}<\/strong>`))).addTo(map);\r\n        L.control.layers(null,{'Bicing':bikeLayer,'IoT senzorji':sensorLayer},{collapsed:true}).addTo(map);\r\n        const all=[...bicing.map(s=>s.coords),...sensors.map(s=>s.coords)];\r\n        if(all.length) map.fitBounds(all,{padding:[30,30]});\r\n    }\r\n\r\n    \/* Vstopne animacije sekcij *\/\r\n    document.querySelectorAll('.smart-es .section').forEach(sec=>{sec.style.opacity=0;sec.style.transform='translateY(12px)';});\r\n    const esIO=new IntersectionObserver((ents)=>{ents.forEach(e=>{if(e.isIntersecting){e.target.style.transition='opacity .55s ease, transform .55s ease';e.target.style.opacity=1;e.target.style.transform='none';esIO.unobserve(e.target);}})},{threshold:.12});\r\n    document.querySelectorAll('.smart-es .section').forEach(s=>esIO.observe(s));\r\n\r\n    \/* Init *\/\r\n    window.addEventListener('DOMContentLoaded',()=>{\r\n        esAnimateKPIs();\r\n        esRefreshVals(); setInterval(esRefreshVals,4000);\r\n        esInitHighlights();\r\n        initEsMap();\r\n    });\r\n<\/script>\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Smart City Home Singapur Tokio London Barcelona Ljubljana SMARTBARCELONA Barcelona blends citizen-centric design, open data and low-emission mobility. From Superilles (Superblocks) and the 22@ innovation district to sensor-driven services and a citywide fiber\/5G mesh, the metropolis scales sustainable tech for everyday life. Explore 0km kolesarskih poti 0IoT senzorjev po mestu 0% elektri\u010dnih avtobusov TMB 0% [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-65","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":38,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/65\/revisions"}],"predecessor-version":[{"id":608,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/65\/revisions\/608"}],"wp:attachment":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/media?parent=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}