/* ── Kvartovi.hr vizualni identitet (tokeni iz DESIGN.md — palette nepromijenjena) ── */ @font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD} @font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk-latin-ext-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD} @font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk-latin-ext-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';src:url('assets/fonts/inter-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD} @font-face{font-family:'Inter';src:url('assets/fonts/inter-latin-ext-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';src:url('assets/fonts/inter-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD} @font-face{font-family:'Inter';src:url('assets/fonts/inter-latin-ext-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';src:url('assets/fonts/inter-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD} @font-face{font-family:'Inter';src:url('assets/fonts/inter-latin-ext-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-latin-ext-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-latin-ext-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ /* design tokeni (DESIGN.md §3) */ --zd-tramvaj:#0B4EA2; --zd-tramvaj-tamna:#083A78; --zd-plavac:#E7EEF9; --zd-asfalt:#16191D; --zd-papir:#F6F4EE; --zd-bijela:#FFFFFF; --zd-signal:#F5C400; --zd-linija:#DCD6C8; --zd-tekst-tih:#5C6470; --zd-font-display:'Space Grotesk',system-ui,sans-serif; --zd-font-body:'Inter',system-ui,-apple-system,sans-serif; --zd-font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; --zd-radius:10px; --zd-radius-pill:999px; /* interne varijable mapirane na tokene */ --bg:var(--zd-papir); --card:var(--zd-bijela); --ink:var(--zd-asfalt); --muted:var(--zd-tekst-tih); --line:var(--zd-linija); --accent:var(--zd-tramvaj); --accent-hover:var(--zd-tramvaj-tamna); --accent-ink:#fff; --chip:var(--zd-plavac); --chip-ink:#2A4E86; --note-bg:#FBF3D9; --note-ink:#7A6200; --loc:#0b7a5b; --hdr:var(--zd-tramvaj); --ok-bg:#DCEFE3; --ok-ink:#1E6B43; --warn-bg:#F7E6D5; --warn-ink:#8A4B14; --bad-bg:#F8DEDC; --bad-ink:#B23A2E; --scrollshadow:rgba(0,0,0,.18); } /* tamna tema: OS postavka je default, data-theme (switcher) ima prednost */ @media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#14171C; --card:#1C2026; --ink:#E9EBEE; --muted:#9AA1AB; --line:#30353D; --accent:#7CA9E6; --accent-hover:#9FC0EE; --accent-ink:#0a1220; --chip:#223046; --chip-ink:#AFC7EA; --note-bg:#332a12; --note-ink:#e6c477; --loc:#57c9a3; --hdr:var(--zd-tramvaj-tamna); --ok-bg:#1E3A2B; --ok-ink:#7BD3A2; --warn-bg:#3D2E1A; --warn-ink:#E8B378; --bad-bg:#3D211C; --bad-ink:#E8927E; --scrollshadow:rgba(0,0,0,.4);}} :root[data-theme=dark]{--bg:#14171C; --card:#1C2026; --ink:#E9EBEE; --muted:#9AA1AB; --line:#30353D; --accent:#7CA9E6; --accent-hover:#9FC0EE; --accent-ink:#0a1220; --chip:#223046; --chip-ink:#AFC7EA; --note-bg:#332a12; --note-ink:#e6c477; --loc:#57c9a3; --hdr:var(--zd-tramvaj-tamna); --ok-bg:#1E3A2B; --ok-ink:#7BD3A2; --warn-bg:#3D2E1A; --warn-ink:#E8B378; --bad-bg:#3D211C; --bad-ink:#E8927E; --scrollshadow:rgba(0,0,0,.4);} *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden; font:16px/1.55 var(--zd-font-body)} /* sigurnosna mreža protiv vodoravnog scrolla na bilo kojoj širini zaslona */ img,svg,table,pre{max-width:100%} h1,h2,h3,.zd-wordmark{font-family:var(--zd-font-display);font-weight:700; letter-spacing:-0.02em} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} main{max-width:960px;margin:0 auto;padding:24px 20px 60px} .muted{color:var(--muted)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .zd-header :focus-visible{outline-color:var(--zd-signal)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important; scroll-behavior:auto!important} } .zd-hl{background:linear-gradient(transparent 55%,var(--zd-signal) 55%)} header.site{position:sticky;top:0;z-index:5;display:flex;align-items:center; justify-content:space-between;gap:12px;padding:10px 20px;background:var(--hdr); color:var(--zd-bijela);border-bottom:5px solid var(--zd-signal)} /* mobilni/tablet prilagodbe headera (position:static, nav-traka, ...) su konsolidirane u sekciju "MOBILNI TEMELJ" na kraju ovog CSS-a (traži ":root:not([data-view=" niže) — tamo i objašnjenje breakpointa. */ .brand{display:flex;align-items:center;gap:12px;color:inherit} .brand:hover{text-decoration:none} .zd-mark{width:34px;height:34px;flex:0 0 auto;color:var(--zd-bijela)} .brand strong{font-size:17px} .brand small{display:block;color:rgba(255,255,255,.72);font-size:11.5px;font-weight:400} .cetvrt{color:var(--muted);font-size:14px;font-weight:600} /* wordmark + kontekst-chip "Zagreb" (gradsko izdanje) — vidi page() u build.py */ .brandwrap{display:flex;align-items:center;gap:10px;min-width:0} .ctx-chip{flex:0 0 auto;display:inline-flex;align-items:center;padding:3px 11px; border:1px solid rgba(255,255,255,.4);border-radius:var(--zd-radius-pill); font-size:12.5px;font-weight:600;color:var(--zd-bijela);opacity:.92} .ctx-chip:hover{border-color:var(--zd-signal);color:var(--zd-signal); text-decoration:none;opacity:1} .hdr-right{display:flex;align-items:center;gap:14px} .themebtn{background:none;border:1px solid rgba(255,255,255,.35);color:var(--zd-bijela); border-radius:50%;width:30px;height:30px;font-size:15px;line-height:1;cursor:pointer; flex:0 0 auto} .themebtn:hover{border-color:var(--zd-signal);color:var(--zd-signal)} .hero h1{font-size:30px;margin:.2em 0 .1em} .hero p{color:var(--muted);max-width:60ch} /* korijenska brand naslovnica (dist/index.html — root_page/render_root_home) */ .root-hero h1{font-size:38px;max-width:16ch;margin:.15em 0 .2em} .root-hero p{font-size:16.5px} .root-cta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 4px} .cta-primary,.cta-secondary{display:inline-flex;align-items:center;padding:12px 22px; border-radius:var(--zd-radius-pill);font-weight:600;font-size:15px} .cta-primary{background:var(--accent);color:var(--accent-ink)} .cta-primary:hover{background:var(--accent-hover);color:var(--accent-ink);text-decoration:none} .cta-secondary{border:1px solid var(--line);color:var(--ink);background:var(--card)} .cta-secondary:hover{border-color:var(--accent);color:var(--accent);text-decoration:none} ul.root-recent{list-style:none;padding:0;margin:0;display:grid; grid-template-columns:minmax(0,1fr);gap:2px} ul.root-recent a{display:flex;justify-content:space-between;align-items:baseline;gap:14px; padding:9px 2px;border-bottom:1px solid var(--line);color:var(--ink)} ul.root-recent a:hover{color:var(--accent);text-decoration:none} ul.root-recent .rd-meta{white-space:nowrap;flex:0 0 auto} .root-disclaimer{margin-top:18px} .subnav{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px} .subnav a{padding:6px 12px;border:1px solid var(--line);border-radius:var(--zd-radius-pill); font-size:13.5px;font-weight:600;color:var(--chip-ink);background:var(--card)} .subnav a:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)} .sech{font-size:22px;margin:34px 0 4px;padding-top:18px;border-top:1px dashed var(--line); scroll-margin-top:70px} .controls{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 10px} /* samo izravna djeca — inače stil curi na checkboxe unutar dropdown popupa */ .controls>input,.controls>select{padding:10px 12px;border:1px solid var(--line); border-radius:10px;background:var(--card);color:var(--ink);font-size:15px} .controls>input{flex:1;min-width:220px} .tchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} .tchip{border:1px solid var(--line);background:var(--card);color:var(--chip-ink); border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer} .tchip:hover{border-color:var(--accent);color:var(--accent)} .tchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} #cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:8px} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--zd-radius);padding:16px} /* boja četvrti kao lijevi rub — SAMO kartice koje znaju svoju četvrt */ .card[data-cetvrt]{border-left:5px solid var(--cetvrt,var(--zd-tramvaj))} /* VGČ rezultati: razina gradske četvrti se vidi na prvi pogled — plavac podloga + tramvaj rub (MO kartice ostaju bijele s bojom svoje četvrti) */ .card.vgcc,.card.vgcc[data-cetvrt]{background:var(--chip); border-left:5px solid var(--zd-tramvaj)} .card.vgcc .badge{background:var(--zd-tramvaj);color:#fff} .card .ch{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:13px} .card .ch .muted{font-family:var(--zd-font-mono);font-size:12.5px} .card p{margin:.3em 0 .8em;font-size:14.5px} .badge{background:var(--accent);color:var(--accent-ink);border-radius:var(--zd-radius-pill);padding:3px 10px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums} .cf{display:flex;flex-wrap:wrap;align-items:center;gap:6px} /* samo "Detalji →" ide desno — prije je `.cf a` hvatao i chipove (koji su sad linkovi) pa je svaki dobio margin-left:auto i radio rupe */ .cf a.det{margin-left:auto;font-weight:600;white-space:nowrap; border-bottom:2px solid var(--chip)} .cf a.det:hover{text-decoration:none;border-bottom-color:var(--zd-signal)} /* laičke "Ukratko" natuknice — na karticama i na stranici sjednice */ ul.kb{list-style:none;padding:0;margin:.3em 0 .8em;display:grid; grid-template-columns:minmax(0,1fr);gap:6px;overflow-wrap:anywhere} ul.kb li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.45} ul.kb li::before{content:'';position:absolute;left:2px;top:.52em;width:7px;height:7px; border-radius:2px;background:var(--zd-signal)} .ukratko{background:var(--card);border:1px solid var(--line); border-left:4px solid var(--zd-signal);border-radius:var(--zd-radius); padding:14px 18px 10px;margin:14px 0} .ukratko h3{margin:0 0 8px;font-size:13px;text-transform:uppercase; letter-spacing:.04em;color:var(--muted)} .ukratko ul.kb li{font-size:16px} .chip{display:inline-block;background:var(--chip);color:var(--chip-ink); border-radius:999px;padding:3px 10px;font-size:12.5px;margin:2px 2px 0 0; border:1px solid transparent} .chip.loc{color:var(--loc);background:transparent;border-color:var(--line)} /* status realizacije akcije na stranicama planova */ .chip.faza{background:var(--chip);color:var(--chip-ink);font-size:11.5px;white-space:nowrap} /* vrste aktivnosti vijećnika */ .chip.avr{font-size:11.5px;white-space:nowrap} .chip.avr-pitanje{background:var(--chip);color:var(--chip-ink)} .chip.avr-prijedlog{background:var(--zd-signal);color:#3d3000} .chip.avr-izvjestaj{background:var(--ok-bg);color:var(--ok-ink)} .chip.avr-vodenje{background:transparent;border:1px solid var(--line);color:var(--muted)} .chip.avr-ostalo{background:transparent;border:1px dashed var(--line);color:var(--muted)} .chip.faza.ok{background:var(--ok-bg);color:var(--ok-ink)} .chip.faza.warn{background:var(--warn-bg);color:var(--warn-ink)} /* oznaka "automatski sažetak" na stranici sjednice */ .chip.ai{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:11.5px} .plantbl td{vertical-align:top;font-size:13.5px} /* karta lokacija (Leaflet) */ #k-map{background:var(--bg)} .klabel{font:600 11px var(--zd-font-body);color:var(--ink);white-space:nowrap; pointer-events:none;text-shadow:0 1px 2px var(--bg),0 -1px 2px var(--bg), 1px 0 2px var(--bg),-1px 0 2px var(--bg);transform:translate(-50%,-50%)} .klabel.kgc{font:700 13px var(--zd-font-display);letter-spacing:.02em} .klabel.kmo{font-size:10.5px;opacity:.85} .kclu{background:rgba(11,78,162,.88);color:#fff;border:2px solid #fff; border-radius:50%;display:flex;align-items:center;justify-content:center; font:600 12px var(--zd-font-body);box-shadow:0 1px 6px rgba(0,0,0,.3)} .kclu-m{background:rgba(8,58,120,.92)} .kclu-l{background:rgba(22,25,29,.92)} .kclu div{display:flex;align-items:center;justify-content:center;width:100%;height:100%} /* kapitalna ulaganja: zasebna (bordo) boja klastera, vizualno odvojena od plavih "lokacija" i statusnih boja "akcija" */ .kclu-ku{background:rgba(122,27,59,.88);color:#fff;border:2px solid #fff; border-radius:50%;display:flex;align-items:center;justify-content:center; font:600 12px var(--zd-font-body);box-shadow:0 1px 6px rgba(0,0,0,.3)} .kclu-ku-m{background:rgba(94,15,43,.92)} .kclu-ku-l{background:rgba(22,25,29,.92)} .kclu-ku div{display:flex;align-items:center;justify-content:center;width:100%;height:100%} .ku-tag{font-size:10px;text-transform:uppercase;letter-spacing:.03em; color:var(--muted);border:1px solid var(--line);border-radius:4px; padding:0 4px;margin-left:4px;white-space:nowrap} .leaflet-popup-content{font:14px/1.45 var(--zd-font-body)} .leaflet-container a{color:var(--zd-tramvaj)} .klbl{display:flex;align-items:center;gap:6px;font-size:14px;padding:10px 4px} .klbl input{accent-color:var(--accent)} /* info: manifest + povijest verzija */ .manifest ol.manlist{margin:0;padding-left:1.3em;display:grid; grid-template-columns:minmax(0,1fr);gap:9px;overflow-wrap:anywhere} .manifest ol.manlist li{font-size:15.5px;line-height:1.5;padding-left:4px} .manifest ol.manlist li::marker{color:var(--accent);font-weight:700; font-family:var(--zd-font-mono);font-size:13px} ul.vlist{list-style:none;padding:0;display:grid; grid-template-columns:minmax(0,1fr);gap:12px;margin:14px 0} li.verz{background:var(--card);border:1px solid var(--line); border-left:4px solid var(--line);border-radius:var(--zd-radius);padding:14px 18px} li.verz.zadnja{border-left-color:var(--zd-signal)} li.verz h3{margin:.35em 0 .2em;font-size:17px} li.verz p{margin:0;font-size:14.5px;color:var(--ink)} .vhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .vozn{font:700 15px var(--zd-font-display);color:var(--accent);letter-spacing:-0.01em} .vdat{font-family:var(--zd-font-mono);font-size:12px;color:var(--muted)} .chip.vnow{background:var(--zd-signal);color:#3d3000;font-size:12.5px;font-weight:600} ul.vstavke{margin:.6em 0 0;padding-left:1.1em;display:grid; grid-template-columns:minmax(0,1fr);gap:3px;overflow-wrap:anywhere} ul.vstavke li{font-size:13.5px;color:var(--muted);line-height:1.45} ul.izvori{margin:.2em 0 .8em;padding-left:1.1em;display:grid; grid-template-columns:minmax(0,1fr);gap:6px;overflow-wrap:anywhere} ul.izvori li{font-size:14.5px;line-height:1.45} ul.chainlist{list-style:none;padding:0;display:grid; grid-template-columns:minmax(0,1fr);gap:10px} ul.chainlist li{padding:10px 14px;background:var(--bg);border:1px solid var(--line); border-left:4px solid var(--cetvrt,var(--zd-tramvaj));border-radius:var(--zd-radius)} /* lanac MO → VGČ → plan → akcija (inicijative.html) — vodoravno na desktopu/ tabletu (strelica → između koraka preko ::after), okomito na mobitelu (v. ":root:not([data-view=desktop]) ol.chain-steps" niže u MOBILNI TEMELJ). */ ol.chain-steps{list-style:none;display:flex;flex-wrap:wrap;align-items:center; gap:4px 0;margin:8px 0 4px;padding:0;font-size:13px} ol.chain-steps li{display:inline-flex;align-items:center} ol.chain-steps li:not(:last-child)::after{content:'→';margin:0 8px;color:var(--muted)} .chain-status{display:block;margin-top:2px} .kbox{position:relative} .kbox:fullscreen{background:var(--bg);padding:20px;overflow:auto} /* iznad Leaflet slojeva (leaflet-top ima z-index 1000) — inače je gumb zakopan */ .kctrl{position:absolute;top:26px;right:26px;z-index:1001;display:flex; flex-direction:column;gap:6px} .kctrl button{width:34px;height:34px;border:1px solid var(--line);border-radius:8px; background:var(--card);color:var(--ink);font-size:18px;line-height:1;cursor:pointer} .kctrl button:hover{border-color:var(--accent);color:var(--accent)} /* ceste: A = autoceste/obilaznica (uvijek), B = državne, C = županijske */ .kcA{fill:none;stroke:var(--muted);stroke-width:2;opacity:.65; vector-effect:non-scaling-stroke;pointer-events:none} .kcB{fill:none;stroke:var(--muted);stroke-width:1.2;opacity:.5; vector-effect:non-scaling-stroke;pointer-events:none} .kcC{fill:none;stroke:var(--muted);stroke-width:.8;opacity:.35; vector-effect:non-scaling-stroke;pointer-events:none} /* Tag koji VODI DALJE (≥2 sjednice): izražen, jasno klikabilan. */ a.chip.tag{cursor:pointer;font-weight:600; transition:border-color .12s,color .12s,background .12s} a.chip.tag:hover{text-decoration:none;background:var(--accent);color:var(--accent-ink); border-color:var(--accent)} a.chip.loc.tag:hover{background:transparent;border-color:var(--loc);color:var(--loc)} /* Tag BEZ LINKA (spominje se samo na toj sjednici): prigušen i vidljivo inertan — i dalje čitljiv da se zna koja je tema, ali bez afordancije klika. */ .chip.mute{background:transparent;border:1px dashed var(--line);color:var(--muted); font-weight:400;cursor:default} .chip.loc.mute{color:var(--muted)} a.loc:hover{text-decoration:underline} .crumbs{color:var(--muted);font-size:14px;margin-bottom:14px} article.session h1{font-size:26px;margin:.2em 0} article.session[data-cetvrt] h1{box-shadow:inset 4px 0 0 var(--cetvrt,var(--zd-tramvaj)); padding-left:14px;margin-left:-14px} .session .meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;color:var(--muted); font-family:var(--zd-font-mono);font-size:12.5px;margin:10px 0 18px; padding-bottom:14px;border-bottom:1px solid var(--line)} .session .meta .src{margin-left:auto;font-weight:600;font-family:var(--zd-font-body); font-size:14px;border-bottom:2px solid var(--chip)} .session .meta .src:hover{text-decoration:none;border-bottom-color:var(--zd-signal)} .session .lead{font-size:18px;line-height:1.7} .session h2{font-size:18px;margin:26px 0 8px;padding-top:8px} .session h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 6px} ol.dr li,ul.odluke li{margin:6px 0} ul.odluke{list-style:none;padding:0} ul.odluke li{padding:10px 14px;background:var(--card);border:1px solid var(--line); border-radius:10px;margin:8px 0} .loc{color:var(--loc);font-size:13px;white-space:nowrap} .tags{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px} @media(max-width:600px){.tags{grid-template-columns:1fr}} .note{background:var(--note-bg);color:var(--note-ink);border-radius:10px;padding:10px 14px;font-size:14px;margin:12px 0} ul.slist{list-style:none;padding:0;display:grid; grid-template-columns:minmax(0,1fr);gap:8px} ul.slist a{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:baseline; background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:inherit} ul.slist a:hover{border-color:var(--accent);text-decoration:none} ul.slist[data-cetvrt] a{border-left:4px solid var(--cetvrt,var(--zd-tramvaj))} ul.slist a[data-cetvrt]{border-left:4px solid var(--cetvrt,var(--zd-tramvaj))} ul.gclist a{grid-template-columns:1fr auto} ul.slist .n{font-weight:600;white-space:nowrap} ul.slist .d{color:var(--muted);font-family:var(--zd-font-mono);font-size:12px} ul.slist .s{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} footer.site{max-width:960px;margin:24px auto 0;padding:20px 20px 28px; border-top:1px dashed var(--line);color:var(--muted);font-size:13px} footer.site p{margin:.4em 0;max-width:80ch} footer.site strong{color:var(--ink)} .mainnav{display:flex;gap:16px;font-size:14px;flex-wrap:wrap} .mainnav a{color:rgba(255,255,255,.85);font-weight:600;padding-bottom:2px; border-bottom:2px solid transparent} .mainnav a:hover{color:#fff;text-decoration:none;border-bottom-color:var(--zd-signal)} .mainnav a.on{color:#fff;border-bottom-color:var(--zd-signal)} .statshead{margin-top:28px;padding-top:16px;border-top:1px solid var(--line)} .cs-saziv{margin:18px 0} /* wrap: 4 brojke u nizu inače iscure izvan ekrana na mobitelu */ .statrow{display:flex;flex-wrap:wrap;gap:16px 26px;margin:10px 0 4px} .stat{display:flex;flex-direction:column} .stat .num{font:700 26px var(--zd-font-display);letter-spacing:-0.02em; font-variant-numeric:tabular-nums;color:var(--accent)} .stat .lbl{font-size:12.5px;color:var(--muted)} table.stattbl{width:100%;border-collapse:collapse;font-size:14.5px} table.stattbl th,table.stattbl td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line)} table.stattbl th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)} /* sortiranje: zaglavlje je gumb — strelica pokazuje smjer, ⇅ nagovještaj na hover */ table.stattbl:not(.nosort) thead th{cursor:pointer;user-select:none;white-space:nowrap} table.stattbl:not(.nosort) thead th:hover{color:var(--accent)} table.stattbl:not(.nosort) thead th::after{content:'⇅';margin-left:5px;font-size:10px; opacity:0;transition:opacity .12s} table.stattbl:not(.nosort) thead th:hover::after{opacity:.45} table.stattbl thead th.sdesc::after{content:'▼';opacity:1;color:var(--accent)} table.stattbl thead th.sasc::after{content:'▲';opacity:1;color:var(--accent)} table.stattbl td.c,table.stattbl th.c{text-align:center;white-space:nowrap} .toplists{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media(max-width:620px){.toplists{grid-template-columns:1fr}} ol.toplist{margin:0;padding-left:0;list-style:none;counter-reset:t} ol.toplist li{counter-increment:t;padding:6px 0;border-bottom:1px solid var(--line)} ol.toplist li::before{content:counter(t);display:inline-block;width:22px;color:var(--muted);font-weight:700} ol.toplist b{color:var(--accent)} .pills{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px} .pill{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--chip-ink)} .pill:hover{border-color:var(--accent);text-decoration:none} ul.reflist{list-style:none;padding:0;display:grid; grid-template-columns:minmax(0,1fr);gap:4px} ul.reflist li{padding:5px 0;border-bottom:1px solid var(--line);font-size:14px} .mk{display:inline-block;width:20px;font-weight:700} .mk.yes{color:var(--loc)} .mk.no{color:#c0563b} ul.slist.plain a{grid-template-columns:none;display:block} .small{font-size:13px} /* ── dashboard ── */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--zd-radius); padding:14px 16px;display:flex;flex-direction:column;gap:2px} .kpi .num{font:700 26px var(--zd-font-display);letter-spacing:-0.02em; font-variant-numeric:tabular-nums;color:var(--ink)} .kpi .hero-num{font-size:48px} .kpi .lbl{font-size:12.5px;color:var(--muted)} .card{background:var(--card);border:1px solid var(--line);border-radius:14px; padding:16px 18px;margin:14px 0} .card h2{font-size:17px;margin:0 0 10px} .cardhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .two{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:760px){.two{grid-template-columns:1fr}} .mapsvg{width:100%;height:auto;max-height:520px;display:block} .mppath{stroke:var(--bg);stroke-width:2;cursor:pointer;transition:filter .1s} .mppath:hover{filter:brightness(1.15)} .mppath.sel{stroke:var(--accent);stroke-width:3.5} .mppath.off{cursor:default} /* karta za odabir na početnoj: boja nosi stanje (odabrano/dostupno/prazno); 'prazno' mora biti jasno tamnije od 'dostupno' — --line se stopi s karticom */ .hm-av{fill:var(--chip)} .hm-off{fill:var(--muted);opacity:.35} .mppath.off:hover{filter:none} .mppath.hm-on{fill:var(--accent)} .mppath:focus-visible{outline:none;stroke:var(--accent);stroke-width:3.5} .mapbtn{padding:10px 12px;border:1px solid var(--line);border-radius:10px; background:var(--card);color:var(--ink);cursor:pointer;font:inherit;font-size:15px} .mapbtn.on{border-color:var(--accent);color:var(--accent)} #homemap{margin:4px 0 12px} .maplegend{display:flex;align-items:center;gap:3px;margin-top:8px} .maplegend i{width:22px;height:10px;border-radius:2px} .maplegend span{margin:0 6px} .more.small{padding:6px 12px;font-size:13px} .blist{display:flex;flex-direction:column} .blrow{display:grid;grid-template-columns:minmax(110px,42%) 1fr auto;gap:10px; align-items:center;padding:5px 0;border-bottom:1px solid var(--line); color:inherit;font-size:14px} .blrow:hover{text-decoration:none;background:var(--chip)} .blist.wide .blrow{grid-template-columns:minmax(120px,1fr) auto auto} .bll{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .blb{height:12px;background:transparent;border-radius:3px;overflow:hidden} .blb i{display:block;height:100%;border-radius:3px} .blv{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;white-space:nowrap} .heat{--cell:20px;display:grid;gap:2px;overflow-x:auto;padding-bottom:6px; align-items:center;font-size:12px} .hcell{width:var(--cell);height:var(--cell);border-radius:3px;display:block} .hrow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px} /* .hcol ostaje na 10.5px (ispod inače traženog 12.5px minimuma) namjerno: ovo je stupčani naslov gusto pakirane heatmap rešetke (--cell:20px po stupcu), vertikalno ispisan (writing-mode) unutar max-height:64px — na 12.5px+ font širina teksta prekoračuje 20px širinu stupca i preklapa susjedne oznake, gora čitljivost nego trenutni manji ali čitljiv font. */ .hcol{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px; max-height:64px;overflow:hidden} .dtip{position:fixed;z-index:50;background:var(--card);border:1px solid var(--line); border-radius:10px;padding:8px 12px;font-size:13px;pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.22);max-width:280px} .dtip b{font-size:15px} .linesvg{width:100%;height:auto;display:block} .linesvg .grid{stroke:var(--line);stroke-width:1} .linesvg .tick{fill:var(--muted);font-size:10.5px} .linesvg .cross{stroke:var(--muted);stroke-width:1} .scrollx{overflow-x:auto} tr.selrow{outline:2px solid var(--accent);outline-offset:-2px} #gc-tbody tr{cursor:pointer} #gc-tbody tr:hover{background:var(--chip)} /* točkica u boji četvrti ispred naziva (ista mapa kao rubovi kartica) */ table.stattbl tr[data-cetvrt]>td:first-child::before{content:'';display:inline-block; width:9px;height:9px;border-radius:2px;background:var(--cetvrt,transparent); margin-right:8px} td.num{font-variant-numeric:tabular-nums} /* multi-select dropdown (GČ / kvartovi) */ details.ms{position:relative} details.ms>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px; padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card); font-size:15px;white-space:nowrap;user-select:none} details.ms>summary::-webkit-details-marker{display:none} details.ms[open]>summary{border-color:var(--accent);color:var(--accent)} details.ms .caret{color:var(--muted);font-size:12.5px} .ms-pop{position:absolute;z-index:20;top:calc(100% + 6px);left:0;width:320px; max-width:calc(100vw - 2rem); background:var(--card);border:1px solid var(--line);border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.18);padding:8px} /* Na uskim/srednjim ekranima popup se sidri na cijeli .controls blok (a ne na pojedini dropdown) pa nikad ne visi izvan zaslona — prag mora biti ≥820px (naša "tablet" granica), inače drugi dropdown u nizu (npr. "Svi kvartovi") na ~700px i dalje probija desni rub jer je taj gumb sam po sebi već blizu ruba .controls reda. Čisti @media (ne :root[data-view=mobile] dvojnik) jer je ovo stvarni pixel-overflow problem, ne stilski mobilni izgled — u prisilnom "mobile" pregledu na širokom desktop prozoru popup fizički ima dovoljno mjesta pa mu ne treba full-bleed tretman. */ @media(max-width:820px){ .controls{position:relative} details.ms{position:static} .ms-pop{left:0;right:0;width:auto;max-width:none} } .ms-find{box-sizing:border-box;width:100%;padding:8px 10px;border:1px solid var(--line); border-radius:8px;background:var(--bg);color:var(--ink);font-size:14px;margin-bottom:6px} .ms-list{max-height:300px;overflow-y:auto;overflow-x:hidden} .ms-grp{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted); padding:8px 6px 4px;position:sticky;top:0;background:var(--card);z-index:1} .ms-it{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px; font-size:14px;line-height:1.35;cursor:pointer} .ms-it:hover{background:var(--chip)} .ms-it.off{opacity:.45;cursor:not-allowed} /* checkbox mora ostati mali i ne rastezati se */ .ms-it>input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;min-width:0;margin:0; padding:0;accent-color:var(--accent);cursor:inherit} /* ime smije wrapati i skupljati se (min-width:0 gasi flex auto-min) */ .ms-it>span:first-of-type{flex:1 1 auto;min-width:0;overflow-wrap:anywhere} .ms-n{flex:0 0 auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums} .ms-foot{display:flex;justify-content:flex-end;border-top:1px solid var(--line);margin-top:6px;padding-top:6px} .lnk{background:none;border:0;color:var(--accent);cursor:pointer;font-size:13px;font-weight:600} .pill.x{cursor:pointer;background:var(--chip);border-color:transparent;color:var(--chip-ink)} .pill.x:hover{border-color:var(--accent);color:var(--accent)} #more-wrap{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:18px 0} .more{padding:10px 20px;border:1px solid var(--line);border-radius:10px;background:var(--card); color:var(--ink);font-size:15px;font-weight:600;cursor:pointer} .more:hover{border-color:var(--accent);color:var(--accent)} /* ── prekidač prikaza (Sažeto/Normalno/Opsežno) na početnoj ─────────────── */ .countrow{display:flex;justify-content:space-between;align-items:center;gap:10px; flex-wrap:wrap;margin:10px 0 6px} .vswitch{display:flex;border:1px solid var(--line);border-radius:var(--zd-radius-pill); overflow:hidden} .vswitch button{border:0;background:transparent;color:var(--muted);padding:6px 14px; font:600 13px var(--zd-font-body);cursor:pointer} .vswitch button:hover:not(.on){color:var(--accent)} .vswitch button.on{background:var(--accent);color:var(--accent-ink)} /* prikaz 'Normalno' — jedan redak po sjednici umjesto kartice */ #cards.nview{display:flex;flex-direction:column;gap:8px} .nrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;color:inherit; background:var(--card);border:1px solid var(--line); border-left:4px solid var(--cetvrt,var(--zd-tramvaj)); border-radius:var(--zd-radius);padding:10px 14px} .nrow:hover{border-color:var(--accent);text-decoration:none} .nrow.vgcn{background:var(--chip)} .nrow .nid{flex:0 0 auto} .nrow .nmeta{flex:0 0 auto;font-family:var(--zd-font-mono);color:var(--muted);font-size:12.5px; white-space:nowrap} .nrow .ntitle{flex:1 1 240px;min-width:0;color:var(--muted);font-size:14px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:600px){ .nrow .ntitle{flex-basis:100%;white-space:normal;display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} } /* prikaz 'Sažeto' — kompaktna tablica svih rezultata, sortiranje na podacima */ #cards.sview{display:block} .tblwrap{max-height:70vh;overflow:auto} .cmp thead th{position:sticky;top:0;background:var(--card);z-index:2; cursor:pointer;user-select:none} .cmp thead th:hover{color:var(--accent)} .cmp tbody tr{cursor:pointer} .cmp tbody tr:hover{background:var(--chip)} .cmp tr.vgcr{background:var(--chip)} /* ── planovi: prekidač prikaza + scatter + metodologija ─────────────────── */ #pd-more-wrap{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:18px 0} .scattersvg{max-height:340px} .linesvg .lbl{fill:var(--ink);font-weight:600;font-size:11px} details.methodology{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)} details.methodology summary{cursor:pointer;font-weight:600;color:var(--accent)} details.methodology ul{margin:10px 0 0;padding-left:1.2em;display:grid; grid-template-columns:minmax(0,1fr);gap:6px;overflow-wrap:anywhere; font-size:14px;color:var(--muted)} /* ── kvartomjer: "čiji je kvart jači?" ───────────────────────────────────── */ .vsgrid{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;margin:20px 0} @media(max-width:640px){.vsgrid{grid-template-columns:1fr;text-align:center}} .fighter{background:var(--card);border:1px solid var(--line);border-radius:var(--zd-radius); padding:18px 14px;text-align:center;border-top:5px solid var(--cetvrt,var(--zd-tramvaj)); display:flex;flex-direction:column;justify-content:center;gap:4px} .fighter .fname{font:700 22px var(--zd-font-display);letter-spacing:-.01em} .fighter .fgc{color:var(--muted);font-size:13px} .vsbig{font:700 32px var(--zd-font-display);color:var(--accent);display:flex; align-items:center;justify-content:center;padding:0 6px} @media(max-width:640px){.vsbig{font-size:22px;padding:4px 0}} table.duel{width:100%;border-collapse:collapse;margin-top:4px} table.duel td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:14.5px; vertical-align:middle} table.duel td.kqv{width:34%;text-align:center;font-weight:700;font-variant-numeric:tabular-nums} table.duel td.kqv.win{background:var(--ok-bg);color:var(--ok-ink);border-radius:8px} table.duel td.kqlbl{width:32%;text-align:center;color:var(--muted);font-size:13px;font-weight:600} .kqsub{font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px} table.duel tr.kqbarrow td{padding:0 12px 10px;border-bottom:1px solid var(--line)} .kqbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--bg)} .kqbar i{display:block;height:100%} .kq-verdict{text-align:center;font-size:16px;padding:18px 16px} .kq-verdict b{font-size:20px;display:block;margin-bottom:4px} .kq-verdict p{margin:.3em 0 0;font-weight:400;font-size:14.5px} /* ── bazeni: status bazena/dvorana (chip) — zeleno/narančasto/crveno/plavo ── */ .chip.status-radi{background:var(--ok-bg);color:var(--ok-ink)} .chip.status-privremeno{background:var(--warn-bg);color:var(--warn-ink)} .chip.status-obnova{background:var(--bad-bg);color:var(--bad-ink)} .chip.status-otvara{background:var(--chip);color:var(--chip-ink)} .chip.status-nepoznato{background:transparent;border:1px dashed var(--line);color:var(--muted)} /* legenda karte (bazeni/dvorane/udaljenost) */ .bleg{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 4px;font-size:13px;color:var(--muted)} .bleg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px; vertical-align:middle;border:1.5px solid var(--muted)} .bleg i.sq{border-radius:2px} .bleg i.hollow{background:transparent} .bleg span.grp{color:var(--ink);font-weight:600;margin-right:2px} /* ══════════════════════════════════════════════════════════════════════════ MOBILNI TEMELJ v1 — tri breakpointa (dosljedno kroz cijeli CSS): --uski : ≤360px Galaxy Fold 7 VANJSKI zaslon (~340px) — najteži slučaj. --mobilni : 361–540px iPhone 16 Pro Max (430px) i slični telefoni. --tablet : 541–820px Fold 7 UNUTARNJI zaslon (~670–750px), tableti. >820px : postojeći desktop izgled — NE dirati (sve dosad definirano iznad ove sekcije ostaje netaknuto na >820px). CSS custom media query nisu dostupne bez build koraka pa su brojevi pisani doslovno u @media pravilima ispod; tri razine rade kao "max-width" kaskada (820, pa 540, pa 360 — kasnije/uže pravilo u izvoru pobjeđuje kad se preklapaju, isti broj deklaracija/specifičnost pa odlučuje redoslijed). RUČNI PREKIDAČ PRIKAZA — gumb #view-btn (odmah do #theme-btn, ista klasa .themebtn, ista veličina/stil). Postavlja atribut data-view="auto|mobile| desktop" na , inicijalno inline-skriptom u PRIJE prvog rendera (isti obrazac kao postojeći data-theme init — nema bljeska). Sprema se u localStorage 'zd-view-mode'. Klik-logika: VIEW_BTN_JS konstanta u build.py (dijele je page() i root_page()). Ciklus na klik: auto → mobile → desktop → auto. auto (zadano) — ponaša se prema stvarnoj širini = čisti @media, bez ikakvog data-view uvjeta. mobile — prisilno mobilni izgled na BILO KOJOJ širini (npr. da se mobilni izgled provjeri u desktop pregledniku) = ISTE deklaracije ponovljene pod ":root[data-view=mobile] SELEKTOR", izvan media queryja, pa vrijede bez obzira na stvarnu širinu. (--uski/360 razina NEMA "mobile" duplikat: prisilni "mobile" simulira ~400–430px telefon, ne Fold-ov ekstremni 340px vanjski zaslon — taj rub slučaj i dalje pokriva samo pravi @media(360).) desktop — prisilno desktop izgled na BILO KOJOJ širini = @media pravila ispod eksplicitno isključuju taj slučaj selektorom ":root:not([data-view=desktop])" ispred svakog selektora — pravilo tada NIKAD ne matcha kad je desktop prisilan (dakle "desktop pobjeđuje" bez ikakvog !important ili specifičnost-rata, jednostavno se mobilno pravilo nikad ne primijeni). OBRAZAC ZA NOVE MOBILNE DODATKE (kopiraj kad radiš pojedinu stranicu): @media(max-width:Npx){ :root:not([data-view="desktop"]) SELEKTOR{ ... } } :root[data-view="mobile"] SELEKTOR{ ... } — isti sadržaj NOVE CSS KLASE / POMOĆNE FUNKCIJE ZA DRUGE AGENTE (pojedine stranice): .cardify na → tablica postaje kartice na ≤540px (auto) ili kad je prikaz prisilno mobilan. Ćelije MORAJU imati data-label — koristi Python helper _td(value, label, cls="") iz build.py (piše nije posebno stiliziran za cardify (nijedna dosadašnja .cardify tablica ga nema) — ako neka treba tfoot, dodaj mu analogna pravila po istom obrascu. .controls>input, .controls>select → već puna širina + min-height 44px + font-size 16px na ≤540px (spriječava iOS auto-zoom pri fokusu). ══════════════════════════════════════════════════════════════════════════ */ /* ── header/nav: brand+gumbi ostaju u redu 1, nav postaje vodoravno skrolabilan red 2 (odabrano umjesto hamburgera — obrazloženje u izvještaju agenta koji je ovo uveo: sve stavke ostaju jedan dodir daleko, bez dodatnog JS stanja/fokus-zamke, dosljedno s postojećim .scrollx obrascem sitea). Skriveni scrollbar + scroll-snap + blagi fade na desnom rubu kao nagovještaj da ima još stavki. ────────────────────────────────────────── */ @media(max-width:820px){ :root:not([data-view="desktop"]) header.site.zd-header{ flex-wrap:wrap;row-gap:8px;position:static} :root:not([data-view="desktop"]) header.site.zd-header>.brandwrap, :root:not([data-view="desktop"]) header.site.zd-header>.brand{ flex:0 1 auto;min-width:0} :root:not([data-view="desktop"]) .hdr-right{ flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:8px} :root:not([data-view="desktop"]) .mainnav{ order:2;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none; mask-image:linear-gradient(to right,#000 92%,transparent); -webkit-mask-image:linear-gradient(to right,#000 92%,transparent)} :root:not([data-view="desktop"]) .mainnav::-webkit-scrollbar{display:none;height:0} :root:not([data-view="desktop"]) .mainnav a{ scroll-snap-align:start;white-space:nowrap;flex:0 0 auto; padding:11px 12px;min-height:44px;display:inline-flex;align-items:center} } :root[data-view="mobile"] header.site.zd-header{ flex-wrap:wrap;row-gap:8px;position:static} :root[data-view="mobile"] header.site.zd-header>.brandwrap, :root[data-view="mobile"] header.site.zd-header>.brand{flex:0 1 auto;min-width:0} :root[data-view="mobile"] .hdr-right{ flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:8px} :root[data-view="mobile"] .mainnav{ order:2;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none; mask-image:linear-gradient(to right,#000 92%,transparent); -webkit-mask-image:linear-gradient(to right,#000 92%,transparent)} :root[data-view="mobile"] .mainnav::-webkit-scrollbar{display:none;height:0} :root[data-view="mobile"] .mainnav a{ scroll-snap-align:start;white-space:nowrap;flex:0 0 auto; padding:11px 12px;min-height:44px;display:inline-flex;align-items:center} /* uski (Fold vanjski ~340px): brandwrap se dodatno steže — sakrij ctx-chip ("Zagreb" pill) i podnaslov ispod wordmarka, smanji padding headera, da ništa ne pukne na najtežem slučaju. Nema "mobile" duplikat (v. obrazloženje gore) — auto @media je dovoljan jer ovo je stvarno samo za pravu širinu. */ @media(max-width:360px){ :root:not([data-view="desktop"]) header.site.zd-header{padding:8px 10px} :root:not([data-view="desktop"]) .ctx-chip{display:none} :root:not([data-view="desktop"]) .brand small{display:none} } /* ── kontejner + tipografija: manji razmaci, manji H1 na užim zaslonima ── */ @media(max-width:820px){ :root:not([data-view="desktop"]) main{padding:20px 16px 50px} :root:not([data-view="desktop"]) .hero h1{font-size:26px} :root:not([data-view="desktop"]) .root-hero h1{font-size:30px} } :root[data-view="mobile"] main{padding:20px 16px 50px} :root[data-view="mobile"] .hero h1{font-size:26px} :root[data-view="mobile"] .root-hero h1{font-size:30px} @media(max-width:540px){ :root:not([data-view="desktop"]) main{padding:16px 12px 40px} :root:not([data-view="desktop"]) .hero h1{font-size:23px} :root:not([data-view="desktop"]) .root-hero h1{font-size:26px} } :root[data-view="mobile"] main{padding:16px 12px 40px} :root[data-view="mobile"] .hero h1{font-size:23px} :root[data-view="mobile"] .root-hero h1{font-size:26px} @media(max-width:360px){ :root:not([data-view="desktop"]) main{padding:12px 10px 32px} :root:not([data-view="desktop"]) .hero h1{font-size:21px} :root:not([data-view="desktop"]) .root-hero h1{font-size:23px} } /* ── forme na mobitelu: puna širina, min 44px visine, 16px fonta (iOS ne zumira polje pri fokusu kad je font ≥16px). Skup je namjerno uzak (".controls>" izravna djeca) — isti razlog kao postojeći .controls>input komentar iznad: širi selektor bi procurio na checkboxove u dropdown popupu. */ @media(max-width:540px){ :root:not([data-view="desktop"]) .controls{flex-direction:column;align-items:stretch} :root:not([data-view="desktop"]) .controls>input, :root:not([data-view="desktop"]) .controls>select{ width:100%;min-height:44px;font-size:16px} } :root[data-view="mobile"] .controls{flex-direction:column;align-items:stretch} :root[data-view="mobile"] .controls>input, :root[data-view="mobile"] .controls>select{width:100%;min-height:44px;font-size:16px} /* ── table.stattbl.cardify → kartice na mobitelu. Generator ispisuje data-label preko _td() (build.py); prva ćelija u retku ostaje naslov kartice (CSS "td+td" namjerno preskače prvu ćeliju pri dodavanju labela). thead se vizualno skriva (ne display:none) da čitači zaslona i dalje imaju nazive stupaca dostupne. Dokaz koncepta: _tbl_gc() na bazeni.html. */ @media(max-width:540px){ :root:not([data-view="desktop"]) table.stattbl.cardify{display:block;width:100%} :root:not([data-view="desktop"]) table.stattbl.cardify thead{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap} :root:not([data-view="desktop"]) table.stattbl.cardify tbody{display:block} :root:not([data-view="desktop"]) table.stattbl.cardify tr{ display:block;border:1px solid var(--line);border-radius:var(--zd-radius); padding:10px 12px;margin:0 0 10px} :root:not([data-view="desktop"]) table.stattbl.cardify td{ display:flex;justify-content:space-between;align-items:baseline;gap:10px; border-bottom:1px dashed var(--line);padding:7px 0} :root:not([data-view="desktop"]) table.stattbl.cardify td:first-child{ display:block;font-weight:700;font-size:15px; border-bottom:1px solid var(--line);padding:0 0 8px;margin-bottom:4px} :root:not([data-view="desktop"]) table.stattbl.cardify td:last-child{border-bottom:0} :root:not([data-view="desktop"]) table.stattbl.cardify td+td::before{ content:attr(data-label);color:var(--muted);font-size:12px;text-transform:uppercase; letter-spacing:.02em;flex:0 0 auto} } :root[data-view="mobile"] table.stattbl.cardify{display:block;width:100%} :root[data-view="mobile"] table.stattbl.cardify thead{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap} :root[data-view="mobile"] table.stattbl.cardify tbody{display:block} :root[data-view="mobile"] table.stattbl.cardify tr{ display:block;border:1px solid var(--line);border-radius:var(--zd-radius); padding:10px 12px;margin:0 0 10px} :root[data-view="mobile"] table.stattbl.cardify td{ display:flex;justify-content:space-between;align-items:baseline;gap:10px; border-bottom:1px dashed var(--line);padding:7px 0} :root[data-view="mobile"] table.stattbl.cardify td:first-child{ display:block;font-weight:700;font-size:15px; border-bottom:1px solid var(--line);padding:0 0 8px;margin-bottom:4px} :root[data-view="mobile"] table.stattbl.cardify td:last-child{border-bottom:0} :root[data-view="mobile"] table.stattbl.cardify td+td::before{ content:attr(data-label);color:var(--muted);font-size:12px;text-transform:uppercase; letter-spacing:.02em;flex:0 0 auto} /* ── karta.html + bazeni.html: Leaflet karta na mobitelu ───────────────────── #k-map/#bz-map su prije imali fiksni inline height/border-radius (560px/8px) izravno u HTML-u (render_karta/render_bazeni) — maknuto odande jer bi inline style nadjačao media query pravila ispod bez !important; zamijenjeno CSS zadanim vrijednostima (identičnima dosadašnjem desktop izgledu) koje mobilni breakpointi ispod prepisuju. Karta ide od ruba do ruba zaslona na mobilnom/uskom: umjesto lova na main-ov/.card-ov breakpoint-specifičan padding, koristi se standardni 100vw+calc(50% - 50vw) "breakout" trik koji radi neovisno o predku. */ #k-map,#bz-map{height:560px;border-radius:8px} @media(max-width:540px){ :root:not([data-view="desktop"]) #k-map, :root:not([data-view="desktop"]) #bz-map{ width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); border-radius:0;height:65vh;min-height:320px} :root:not([data-view="desktop"]) .klbl{min-height:44px} :root:not([data-view="desktop"]) .kctrl{top:12px;right:12px} :root:not([data-view="desktop"]) .kctrl button{width:40px;height:40px;font-size:20px} :root:not([data-view="desktop"]) .leaflet-control-zoom a{ width:40px;height:40px;line-height:40px;font-size:20px} :root:not([data-view="desktop"]) .leaflet-popup-content-wrapper{ max-width:calc(100vw - 40px)} :root:not([data-view="desktop"]) .leaflet-popup-content{max-width:calc(100vw - 60px)} } :root[data-view="mobile"] #k-map, :root[data-view="mobile"] #bz-map{ width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); border-radius:0;height:65vh;min-height:320px} :root[data-view="mobile"] .klbl{min-height:44px} :root[data-view="mobile"] .kctrl{top:12px;right:12px} :root[data-view="mobile"] .kctrl button{width:40px;height:40px;font-size:20px} :root[data-view="mobile"] .leaflet-control-zoom a{ width:40px;height:40px;line-height:40px;font-size:20px} :root[data-view="mobile"] .leaflet-popup-content-wrapper{max-width:calc(100vw - 40px)} :root[data-view="mobile"] .leaflet-popup-content{max-width:calc(100vw - 60px)} /* uski (Fold vanjski ~340px): niža karta, nema "mobile" duplikat (isto obrazloženje kao header/nav gore — prisilni "mobile" simulira ~400-430px telefon, ne ovaj ekstremni rub slučaj). */ @media(max-width:360px){ :root:not([data-view="desktop"]) #k-map, :root:not([data-view="desktop"]) #bz-map{height:60vh;min-height:320px} } /* ── kvartomjer: dvoboj-tablica čitljiva na uskom BEZ pretvaranja u kartice (usporedba dva stupca gubi smisao kao kartica) — manji font, tanji razmaci, labela metrike smije prelomiti u dva retka (već nema white-space:nowrap, samo joj skraćujemo font/padding da stane). VS zaglavlje (.vsgrid) već ima pravi @media(max-width:640px) koji slaže borce jedan ispod drugog na stvarno uskom zaslonu — ovdje mu dodajemo samo :root[data-view="mobile"] dvojnik da isto vrijedi i kad je mobilni prikaz prisilno uključen. */ @media(max-width:540px){ :root:not([data-view="desktop"]) table.duel td{padding:7px 4px;font-size:12.5px} :root:not([data-view="desktop"]) table.duel td.kqlbl{ font-size:12.5px;line-height:1.25;padding:7px 3px;width:34%} :root:not([data-view="desktop"]) table.duel td.kqv{width:33%;padding-left:2px;padding-right:2px} :root:not([data-view="desktop"]) .kqsub{font-size:11.5px} } :root[data-view="mobile"] table.duel td{padding:7px 4px;font-size:12.5px} :root[data-view="mobile"] table.duel td.kqlbl{ font-size:12.5px;line-height:1.25;padding:7px 3px;width:34%} :root[data-view="mobile"] table.duel td.kqv{width:33%;padding-left:2px;padding-right:2px} :root[data-view="mobile"] .kqsub{font-size:11.5px} :root[data-view="mobile"] .vsgrid{grid-template-columns:1fr;text-align:center} :root[data-view="mobile"] .vsbig{font-size:22px;padding:4px 0} /* ── kvartomjer duel @ ≤360px (Fold vanjski i sličan ekstremni uski slučaj): font na 9,5/11,5/10px (prijašnji pokušaj "zadrži tablicu, smanji font") ispod je praga čitljivosti — umjesto stiskanja fonta, redak metrike se raspada u BLOK preko flexboxa: label ide u vlastiti puni red, ISPOD njega dvije vrijednosti jedna do druge (50/50) — dvoboj (usporedba dvije brojke) ostaje čitljiv, label dobiva prostor umjesto da se guši. HTML/JS koji gradi tablicu NIJE dirano (v. buildRows() u KVARTOMJER_JS): i dalje sadrži
) umjesto ručnog f'...'. Prva ćelija u retku ostaje "naslov" kartice (podebljano, bez prefiksa) — obično naziv/prva kolona; ostale dobivaju data-label prefiks preko ::before. Primjer primjene: _tbl_gc() (gradske četvrti na bazeni.html). Napomena: sortiranje zaglavljem (thead th klik) nije dostupno dok je tablica u kartičnom prikazu (thead je vizualno sakriven na mobitelu) — očekivan kompromis kod kartifikacije, sortiranje i dalje radi na tablet/desktop širinama.
tim redoslijedom u DOM-u; CSS `order` samo vizualno premješta kqlbl ispred oba kqv (order:-1) — flex ne mijenja fokus/tab-redoslijed problematично jer su ćelije čisti prikaz podataka bez interaktivnih elemenata. tr.kqbarrow (traka proporcije ispod retka) ostaje netaknuta (block, puna širina) — nije dio flex/order preraspodjele. Nema ":root[data-view=mobile]" dvojnika — isto obrazloženje kao drugi ≤360 blokovi u ovoj datoteci (prisilni "mobile" simulira ~400-430px telefon, ne ovaj ekstremni 340px rub slučaj). */ @media(max-width:360px){ :root:not([data-view="desktop"]) table.duel{display:block;width:100%} :root:not([data-view="desktop"]) table.duel tbody{display:block;width:100%} :root:not([data-view="desktop"]) table.duel tr{display:flex;flex-wrap:wrap;width:100%} :root:not([data-view="desktop"]) table.duel tr.kqbarrow{display:block} :root:not([data-view="desktop"]) table.duel tr.kqbarrow td{ display:block;width:100%;box-sizing:border-box} :root:not([data-view="desktop"]) table.duel td.kqlbl{ order:-1;flex:0 0 100%;width:100%;box-sizing:border-box;text-align:center; font-size:12.5px;line-height:1.3;padding:6px 4px 2px;border-bottom:0} :root:not([data-view="desktop"]) table.duel td.kqv{ flex:1 1 50%;width:50%;box-sizing:border-box;padding:2px 4px 6px;font-size:13px} :root:not([data-view="desktop"]) .kqsub{font-size:11.5px} } /* ── vswitch dodirna meta: min 40px visine na svim širinama ≤820 (pv-switch "Po godinama/GČ detaljno/Analitika", homepage Sažeto/Normalno/Opsežno i bazeni scenarij dijele istu .vswitch klasu pa ih ovo pravilo pokriva sve odjednom). Jedno mjesto deklaracije — uže @media pravila ispod mijenjaju samo padding/font (kaskada po svojstvu), min-height ostaje 40px kroz sve. */ @media(max-width:820px){ :root:not([data-view="desktop"]) .vswitch button{min-height:40px} } :root[data-view="mobile"] .vswitch button{min-height:40px} /* ── bazeni: prekidač scenarija (.vswitch, 4 gumba) mora stati na 340px ── Kompresija paddinga počinje već na --mobilni razini (4 puna naziva scenarija inače ne stanu ni na 430px zaslon); na --uski (Fold vanjski, ~340px) dodatno dopuštamo prelom u red 2×2 jer ni komprimirano ne stane u jedan red. Font ostaje ≥13px na svim razinama (čitljivost) — širinu rješava prelom u 2×2, ne smanjivanje fonta ispod praga. Nema "mobile" duplikat za 2×2 prelom — isto obrazloženje kao drugdje (prisilni "mobile" simulira ~400-430px, gdje jedan red staje). */ @media(max-width:540px){ :root:not([data-view="desktop"]) .vswitch button{padding:9px 9px;font-size:13px} } :root[data-view="mobile"] .vswitch button{padding:9px 9px;font-size:13px} @media(max-width:360px){ :root:not([data-view="desktop"]) .vswitch{flex-wrap:wrap} :root:not([data-view="desktop"]) .vswitch button{ flex:1 1 44%;min-width:0;padding:9px 4px;font-size:13px;line-height:1.2; white-space:normal} } /* ── gradska početna (render_index) i korijenska naslovnica (render_root_home) ── mobilni dovršetak ──────────────────────────────────────────────────── "Filtri" harmonika (id="filtri-acc") na gradskoj početnoj: SAMO na ≤540/prisilnom mobilnom (ne na tabletu/desktopu).
se u HTML-u uvijek renderira s open — desktop/tablet ostaju točno kao prije (sažetak je sakriven pa nema vizualnog "harmonika" efekta). Na mobilnom mali inline skript (odmah iza elementa, isti obrazac kao data-theme/data-view init) briše `open` PRIJE prvog crtanja da nema bljeska otvorenih filtara, pa popis rezultata ostaje odmah vidljiv ispod. */ .filtri-sum{display:none;align-items:center;justify-content:space-between;gap:8px; cursor:pointer;list-style:none;padding:11px 14px;margin-bottom:10px; border:1px solid var(--line);border-radius:10px;background:var(--card); color:var(--ink);font-size:15px;font-weight:600;user-select:none;min-height:44px} .filtri-sum::-webkit-details-marker{display:none} .filtri-sum .caret{color:var(--muted);font-size:12px;transition:transform .15s} details.filtri-acc[open]>.filtri-sum .caret{transform:rotate(180deg)} @media(max-width:540px){ :root:not([data-view="desktop"]) .filtri-sum{display:flex} } :root[data-view="mobile"] .filtri-sum{display:flex} /* filtri: dropdown gumbi (GČ/kvart) i "Odaberi na karti" pune širine kao i input/select (koji to već imaju iz .controls>input,.controls>select gore) */ @media(max-width:540px){ :root:not([data-view="desktop"]) .controls>details.ms, :root:not([data-view="desktop"]) .controls>button{width:100%} :root:not([data-view="desktop"]) .controls>details.ms>summary{ width:100%;box-sizing:border-box;justify-content:space-between;min-height:44px} } :root[data-view="mobile"] .controls>details.ms, :root[data-view="mobile"] .controls>button{width:100%} :root[data-view="mobile"] .controls>details.ms>summary{ width:100%;box-sizing:border-box;justify-content:space-between;min-height:44px} /* kartice sjednica: manji padding + red s bedžom/datumom smije prelomiti (umjesto da stisne dugi naziv odbora u jedan redak) */ @media(max-width:540px){ :root:not([data-view="desktop"]) .card{padding:12px 14px} :root:not([data-view="desktop"]) .card .ch{flex-wrap:wrap;row-gap:4px} } :root[data-view="mobile"] .card{padding:12px 14px} :root[data-view="mobile"] .card .ch{flex-wrap:wrap;row-gap:4px} /* korijenska naslovnica: dva CTA gumba jedan ispod drugog, puna širina */ @media(max-width:540px){ :root:not([data-view="desktop"]) .root-cta{flex-direction:column;align-items:stretch} :root:not([data-view="desktop"]) .cta-primary, :root:not([data-view="desktop"]) .cta-secondary{ justify-content:center;width:100%;box-sizing:border-box} } :root[data-view="mobile"] .root-cta{flex-direction:column;align-items:stretch} :root[data-view="mobile"] .cta-primary, :root[data-view="mobile"] .cta-secondary{ justify-content:center;width:100%;box-sizing:border-box} /* korijenska naslovnica: KPI red (zapisnici/četvrti/mo) u 2 stupca na Fold-ovom vanjskom ~340px zaslonu umjesto stisnuto u jedan red. Nema "mobile" duplikat (isto obrazloženje kao drugdje) — na ~400-430px se 3 brojke već lijepo prelome preko postojećeg flex-wrap. */ @media(max-width:360px){ :root:not([data-view="desktop"]) .statrow{display:grid;grid-template-columns:1fr 1fr; gap:12px 16px} } /* korijenska naslovnica: "Najnovije sjednice" — na najužem zaslonu dopusti da datum/četvrt (rd-meta) padne u novi red umjesto da stisne naslov. */ @media(max-width:360px){ :root:not([data-view="desktop"]) ul.root-recent a{flex-wrap:wrap;row-gap:2px} :root:not([data-view="desktop"]) ul.root-recent .rd-meta{white-space:normal} } /* ══ stranica sjednice (render_session, 12.697 stranica): mrvice, lokacije/ k.č., "Ukratko", dnevni red, odluke, poveznica na izvorni dokument ══ */ /* mrvice: lome umjesto da se prelijevaju preko ruba na dugim nazivima MO/VGČ */ @media(max-width:820px){ :root:not([data-view="desktop"]) .crumbs{overflow-wrap:anywhere} } :root[data-view="mobile"] .crumbs{overflow-wrap:anywhere} /* 📍 poveznice na lokacije (i tekst uz k.č. u odlukama) — bez nowrap-a da duga adresa lomi unutar kartice odluke umjesto da izbije preko ruba. */ @media(max-width:540px){ :root:not([data-view="desktop"]) .loc{white-space:normal;overflow-wrap:anywhere} } :root[data-view="mobile"] .loc{white-space:normal;overflow-wrap:anywhere} /* izvorni dokument: iz diskretne poveznice u meta-retku postaje puna, palcem lako dohvatljiva "traka" — isti .meta ostaje flex-wrap, samo se .src izdvaja u vlastiti puni red s okvirom i min. 44px visine. */ @media(max-width:540px){ :root:not([data-view="desktop"]) .session .meta{gap:8px 14px} :root:not([data-view="desktop"]) .session .meta .src{ margin-left:0;flex:1 1 100%;display:flex;align-items:center;justify-content:center; min-height:44px;padding:10px 14px;border:1px solid var(--line); border-radius:var(--zd-radius);background:var(--card)} } :root[data-view="mobile"] .session .meta{gap:8px 14px} :root[data-view="mobile"] .session .meta .src{ margin-left:0;flex:1 1 100%;display:flex;align-items:center;justify-content:center; min-height:44px;padding:10px 14px;border:1px solid var(--line); border-radius:var(--zd-radius);background:var(--card)} /* "Ukratko", sažetak, dnevni red, odluke — manji razmaci na uskom da stane više sadržaja bez pretjeranog skrolanja. */ @media(max-width:540px){ :root:not([data-view="desktop"]) .ukratko{padding:12px 14px 8px;margin:12px 0} :root:not([data-view="desktop"]) .session .lead{font-size:16.5px} :root:not([data-view="desktop"]) ul.odluke li{padding:9px 12px;margin:6px 0} :root:not([data-view="desktop"]) .session h2{margin:20px 0 6px} } :root[data-view="mobile"] .ukratko{padding:12px 14px 8px;margin:12px 0} :root[data-view="mobile"] .session .lead{font-size:16.5px} :root[data-view="mobile"] ul.odluke li{padding:9px 12px;margin:6px 0} :root[data-view="mobile"] .session h2{margin:20px 0 6px} @media(max-width:360px){ :root:not([data-view="desktop"]) .ukratko{padding:10px 12px 6px} :root:not([data-view="desktop"]) ul.kb li{font-size:13.5px} :root:not([data-view="desktop"]) .session .lead{font-size:15.5px} :root:not([data-view="desktop"]) ul.odluke li{padding:8px 10px} } /* "Komunalne teme"/"Spomenute lokacije" (.tags) i "Najaktivniji"/"Najbolja prisutnost" (.toplists) imaju već stariji, uski @media (600/620px) koji auto-prikazu radi ispravno; ovdje im samo dodajemo ":root[data-view=mobile]" dvojnik da isto vrijedi i kad je mobilni prikaz PRISILNO uključen na širem zaslonu (v. obrazac gore u ovoj sekciji). */ :root[data-view="mobile"] .tags{grid-template-columns:1fr} :root[data-view="mobile"] .toplists{grid-template-columns:1fr} /* kvartovski popis sjednica po sazivu (ul.slist — mjesni-odbori/*.html i gradske-cetvrti/*.html): "broj · datum · sažetak" grid od 3 stupca na uskom zaslonu zgnječi zadnji stupac; na mobitelu slaži okomito, sažetak smije prelomiti u 2 retka umjesto ellipsis na 1. */ @media(max-width:540px){ :root:not([data-view="desktop"]) ul.slist:not(.plain) a{ display:flex;flex-direction:column;align-items:flex-start;gap:3px} :root:not([data-view="desktop"]) ul.slist:not(.plain) a .s{ white-space:normal;overflow:visible;text-overflow:clip;font-size:13.5px} } :root[data-view="mobile"] ul.slist:not(.plain) a{ display:flex;flex-direction:column;align-items:flex-start;gap:3px} :root[data-view="mobile"] ul.slist:not(.plain) a .s{ white-space:normal;overflow:visible;text-overflow:clip;font-size:13.5px} /* table.stattbl.cardify: ".c" stupci imaju na desktopu white-space:nowrap (centriranje kratkih brojeva) — u kartičnom prikazu vrijednost mora smjeti prelomiti (npr. "82% (12/14)") umjesto da izbije preko ruba kartice. */ @media(max-width:540px){ :root:not([data-view="desktop"]) table.stattbl.cardify td.c{white-space:normal;text-align:right} } :root[data-view="mobile"] table.stattbl.cardify td.c{white-space:normal;text-align:right} /* inicijative.html: lanac koraka (MO → VGČ → Plan → Akcija) okomito na mobitelu — strelica postaje "↓" i ide u svoj red umjesto uz tekst. */ @media(max-width:540px){ :root:not([data-view="desktop"]) ol.chain-steps{flex-direction:column;align-items:flex-start;gap:6px} :root:not([data-view="desktop"]) ol.chain-steps li:not(:last-child)::after{ content:'↓';display:block;margin:2px 0 2px 2px} } :root[data-view="mobile"] ol.chain-steps{flex-direction:column;align-items:flex-start;gap:6px} :root[data-view="mobile"] ol.chain-steps li:not(:last-child)::after{ content:'↓';display:block;margin:2px 0 2px 2px} /* info.html: manifest / povijest verzija (22 unosa) / izvori — manji razmaci na uskom da dugačak popis ne bude preprostran (već je jedan stupac). */ @media(max-width:540px){ :root:not([data-view="desktop"]) ul.vlist{gap:9px} :root:not([data-view="desktop"]) li.verz{padding:11px 14px} :root:not([data-view="desktop"]) .manifest ol.manlist{gap:7px} :root:not([data-view="desktop"]) ul.izvori{gap:4px} } :root[data-view="mobile"] ul.vlist{gap:9px} :root[data-view="mobile"] li.verz{padding:11px 14px} :root[data-view="mobile"] .manifest ol.manlist{gap:7px} :root[data-view="mobile"] ul.izvori{gap:4px} /* ── .gcmatrix: prava matrica (npr. GČ × godina, GČ × metrika) koja NE smije postati kartica — previše stupaca ili čisto numerička rešetka gdje bi kartica bila besmislena. Umjesto cardify: ostaje vodoravno skrolabilna (.scrollx, uz ovu klasu), uz mask-image fade na desnom rubu (isti obrazac kao .mainnav gore — svojstvo maskira sam element, ne umeće pseudo-element, pa je sigurno i unutar CSS grida, v. .heat niže) kao nagovještaj da ima još stupaca, i zaleđen prvi stupac (naziv retka, obično GČ) preko position:sticky, da se zna koji je redak dok se vodoravno skrola. Primjena: omotaj postojeći ".scrollx" div dodatnom klasom "gcmatrix" — ".scrollx gcmatrix" (planovi.html "Po godinama"/"Izvršenje", statistika.html "Gradske četvrti — brojke" i tablica-blizanac heatmape). Samo ≤820 (tablet/mobilni) — na desktopu (>820, "NE dirati") matrice ostaju kao dosad, bez fade/sticky, jer se tamo obično već vide u cijelosti. */ @media(max-width:820px){ :root:not([data-view="desktop"]) .gcmatrix{ mask-image:linear-gradient(to right,#000 92%,transparent); -webkit-mask-image:linear-gradient(to right,#000 92%,transparent)} :root:not([data-view="desktop"]) .gcmatrix table th:first-child, :root:not([data-view="desktop"]) .gcmatrix table td:first-child{ position:sticky;left:0;background:var(--card);z-index:1} } :root[data-view="mobile"] .gcmatrix{ mask-image:linear-gradient(to right,#000 92%,transparent); -webkit-mask-image:linear-gradient(to right,#000 92%,transparent)} :root[data-view="mobile"] .gcmatrix table th:first-child, :root[data-view="mobile"] .gcmatrix table td:first-child{ position:sticky;left:0;background:var(--card);z-index:1} /* ── .heat (statistika.html, heatmapa tema × vrijeme): isti fade+sticky tretman kao .gcmatrix, ali je .heat CSS grid (ne ) pa prvi "stupac" nisu td/th nego .hrow (naziv teme, po retku) i .hcorner (prazna kutna ćelija u zaglavlju, v. renderHeat() u DASH_JS). mask-image je sigurna za grid container (za razliku od ::after pseudo-elementa, koji bi se generirao kao dodatna grid stavka i pomaknuo raspored). */ @media(max-width:820px){ :root:not([data-view="desktop"]) .heat{ mask-image:linear-gradient(to right,#000 92%,transparent); -webkit-mask-image:linear-gradient(to right,#000 92%,transparent)} :root:not([data-view="desktop"]) .heat .hrow, :root:not([data-view="desktop"]) .heat .hcorner{ position:sticky;left:0;background:var(--card);z-index:1} } :root[data-view="mobile"] .heat{ mask-image:linear-gradient(to right,#000 92%,transparent); -webkit-mask-image:linear-gradient(to right,#000 92%,transparent)} :root[data-view="mobile"] .heat .hrow, :root[data-view="mobile"] .heat .hcorner{ position:sticky;left:0;background:var(--card);z-index:1} /* ── table.stattbl.cardify tfoot: dopuna postojećeg cardify obrasca (v. MOBILNI TEMELJ gore) — prva tablica koja treba tfoot u kartičnom prikazu je "Redovni pogon vijeća GČ" na planovi.html (Analitika → isplate). tr/td pravila su već generička (ne razlikuju tbody/tfoot), nedostaje samo display:block na samom tfoot elementu (bez ovoga bi tfoot ostao table-footer-group unutar tablice koja je već display:block). */ @media(max-width:540px){ :root:not([data-view="desktop"]) table.stattbl.cardify tfoot{display:block} } :root[data-view="mobile"] table.stattbl.cardify tfoot{display:block} /* ── skrol-signal na .scrollx (generički, BEZ .gcmatrix — ta klasa već ima svoj mask-image fade+sticky tretman gore). Pokriva "gole" .scrollx omote koji NISU cardify tablice (te se na mobitelu pretvore u kartice pa više nema vodoravnog skrola) — npr. scatter-graf (SVG) i par tablica koje namjerno ostaju prave tablice. background-attachment:local trik: dva "poklapača" boje kartice (attachment:local, putuju SA sadržajem) prekriju dva fiksna "sjenila" (attachment:scroll, miruju uz rub) dok god je taj rub sadržaja na vidiku; čim se sadržaj odskrola, poklapač otkrije sjenilo — signal se pojavljuje/nestaje ovisno o STVARNOM stanju skrola, čisti CSS bez JS-a. --scrollshadow je definiran po temi (v. :root/--bg:#14171C; --card:#1C2026; --ink:#E9EBEE; --muted:#9AA1AB; --line:#30353D; --accent:#7CA9E6; --accent-hover:#9FC0EE; --accent-ink:#0a1220; --chip:#223046; --chip-ink:#AFC7EA; --note-bg:#332a12; --note-ink:#e6c477; --loc:#57c9a3; --hdr:var(--zd-tramvaj-tamna); --ok-bg:#1E3A2B; --ok-ink:#7BD3A2; --warn-bg:#3D2E1A; --warn-ink:#E8B378; --bad-bg:#3D211C; --bad-ink:#E8927E; --scrollshadow:rgba(0,0,0,.4); gore) pa radi u obje teme. */ @media(max-width:820px){ :root:not([data-view="desktop"]) .scrollx:not(.gcmatrix){ background-image: linear-gradient(to right,var(--card) 40%,rgba(0,0,0,0)), linear-gradient(to left,var(--card) 40%,rgba(0,0,0,0)), linear-gradient(to right,var(--scrollshadow),rgba(0,0,0,0) 100%), linear-gradient(to left,var(--scrollshadow),rgba(0,0,0,0) 100%); background-repeat:no-repeat; background-size:24px 100%,24px 100%,14px 100%,14px 100%; background-position:left center,right center,left center,right center; background-attachment:local,local,scroll,scroll} } :root[data-view="mobile"] .scrollx:not(.gcmatrix){ background-image: linear-gradient(to right,var(--card) 40%,rgba(0,0,0,0)), linear-gradient(to left,var(--card) 40%,rgba(0,0,0,0)), linear-gradient(to right,var(--scrollshadow),rgba(0,0,0,0) 100%), linear-gradient(to left,var(--scrollshadow),rgba(0,0,0,0) 100%); background-repeat:no-repeat; background-size:24px 100%,24px 100%,14px 100%,14px 100%; background-position:left center,right center,left center,right center; background-attachment:local,local,scroll,scroll} /* ── dodirne mete glavnih kontrola (≥40px) na ≤820px ───────────────────── #k-reset ("Cijeli grad"), #pd-clear/#sel-clear ("Očisti") i slični izravni
u table.stattbl (izmjereno 12px — vidljivo kad tablica NIJE kartificirana, tj. tablet 541–820px; na ≤540px .cardify sakriva thead vizualno pa th font ondje nije praktični problem, ali pravilo svejedno pokriva cijeli ≤820 raspon radi dosljednosti). Iznimka .hcol (heatmapa, 10,5px) NIJE dirana — v. njeno zasebno obrazloženje kod definicije. */ @media(max-width:820px){ :root:not([data-view="desktop"]) span.chip.avr{font-size:12.5px} :root:not([data-view="desktop"]) table.stattbl th{font-size:12.5px} } :root[data-view="mobile"] span.chip.avr{font-size:12.5px} :root[data-view="mobile"] table.stattbl th{font-size:12.5px} /* ── FIX preklapanja (nađeno tijekom finalne ≤820px provjere, PREDpostojeći bug, ne izazvan gornjim izmjenama): statistika.html, top-liste vijećnika (#vij-akt/#vij-pris, .blist.wide .blrow) — srednji stupac (GČ/kvart naziv, span.muted.small) nema ni ellipsis ni min-width:0, pa "auto" grid-stupac raste na punu širinu teksta bez omeđivanja. Dugi nazivi (npr. "Vijeće gradske četvrti" — pseudo-kvart za VGČ inicijative) guraju redak na 348px pri 340px viewportu → document.documentElement.scrollWidth > clientWidth (izmjereno, ≤360px raspon; na 361px+ nema efekta jer je kartica šira). min-width:0 na grid-stavci je nužan uz ellipsis (grid stavke imaju zadano min-width:auto koje sprječava skupljanje ispod sadržaja). */ @media(max-width:360px){ :root:not([data-view="desktop"]) .blist.wide .blrow{ grid-template-columns:minmax(70px,1fr) minmax(0,auto) auto} :root:not([data-view="desktop"]) .blist.wide .blrow>.muted.small{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} } [data-cetvrt="donji-grad"]{--cetvrt:#3D6B99} [data-cetvrt="gornji-grad-medvescak"]{--cetvrt:#8E7DBE} [data-cetvrt="trnje"]{--cetvrt:#4F9D9D} [data-cetvrt="maksimir"]{--cetvrt:#6A994E} [data-cetvrt="pescenica-zitnjak"]{--cetvrt:#C97B4A} [data-cetvrt="novi-zagreb-istok"]{--cetvrt:#B23A48} [data-cetvrt="novi-zagreb-zapad"]{--cetvrt:#D96C8E} [data-cetvrt="tresnjevka-sjever"]{--cetvrt:#3E7CB1} [data-cetvrt="tresnjevka-jug"]{--cetvrt:#557C83} [data-cetvrt="crnomerec"]{--cetvrt:#A24936} [data-cetvrt="gornja-dubrava"]{--cetvrt:#7A9E7E} [data-cetvrt="donja-dubrava"]{--cetvrt:#C9A227} [data-cetvrt="stenjevec"]{--cetvrt:#946BA6} [data-cetvrt="podsused-vrapce"]{--cetvrt:#B85C38} [data-cetvrt="podsljeme"]{--cetvrt:#5B7553} [data-cetvrt="sesvete"]{--cetvrt:#E2725B} [data-cetvrt="brezovica"]{--cetvrt:#F2A65A}