/* === GOOGLE FONTS === */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* === BRAND TOKENS === */ :root { --brand-primary: #009168; --brand-primary-dark: #006B4E; --brand-primary-light: #00B582; --brand-soft: #E0F2EC; --ink: #111111; --body-text: #444444; --muted: #888888; --border: #EAEAEA; --color-win: #009168; --color-loss: #C53030; --dark-surface: #0F1311; --dark-accent: #00D982; --font-display: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --accent: #009168 !important; --accent-color: #009168 !important; --link-color: #009168 !important; --link-hover-color: #006B4E !important; --space-accent: #009168 !important; } /* Sprječava horizontalni scroll od 100vw sekcija (hero) na mobitelu. overflow-y MORA biti visible: tema ima body{overflow:hidden}, a bilo kakav overflow osim visible/clip od body-ja radi scroll kontejner, pa position:sticky prestane raditi SVIM potomcima. To je 27.07. lomilo ljepljivu traku i donju navigaciju na /vijesti/, a lomi i ljepljive stupce na /rezultati/. Par (clip, visible) je dopusten, pa visible ostaje visible i ne postane auto. */ body{overflow-x:clip;overflow-y:visible} /* === GLOBAL TIPOGRAFIJA === */ body,body p,body span,body div,body li{font-family:'Inter',-apple-system,sans-serif!important;color:#444444} h1,h2,h3,h4,h5,h6,body h1,body h2,body h3,body h4,body h5,body h6{font-family:'Inter',sans-serif!important;color:#111111!important;font-weight:600!important;letter-spacing:-0.3px} /* === BUTTONS === */ .button-primary,.btn-primary,.wp-block-button__link,button.button,a.button,input[type="submit"],.space-button{background:#009168!important;border-color:#009168!important;color:#FFFFFF!important;border-radius:6px;font-weight:500} .button-primary:hover,.btn-primary:hover,button.button:hover,a.button:hover,input[type="submit"]:hover,.space-button:hover{background:#006B4E!important;border-color:#006B4E!important} /* === NUMBERS / KVOTE === */ .kvota,.odd,.tip-price,[data-numeric="true"]{font-family:'JetBrains Mono',monospace;font-feature-settings:'tnum' 1;font-weight:500} /* === W/L BADGES === */ .badge-win{background:#E0F2EC;color:#006B4E;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:500} .badge-loss{background:#FDECEC;color:#C53030;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:500} /* === MERCURY SVG LOGO FIX === */ img.attachment-mercury-custom-logo,img.size-mercury-custom-logo{width:auto!important;height:40px!important;max-width:200px} /* === CONTENT LINKS === */ .space-content a,.space-content a:link,.space-content a:visited,.entry-content a,.entry-content a:link,.entry-content a:visited,.post-content a,.post-content a:visited,.page-content a,.page-content a:visited,.wp-block-post-content a{color:#009168!important;text-decoration:none!important} .space-content a:hover,.entry-content a:hover,.post-content a:hover,.page-content a:hover,.wp-block-post-content a:hover{color:#006B4E!important;text-decoration:underline!important} /* === FOOTER LINKS === */ .space-footer-copy-left a,.space-footer-copy-left a:visited,.space-footer a,.space-footer a:visited{color:#009168!important;text-decoration:none!important} .space-footer-copy-left a:hover,.space-footer a:hover{color:#006B4E!important;text-decoration:underline!important} /* === NAVIGACIJA === */ .space-header-height .space-header-menu ul.main-menu > li > a,.space-header-height .space-header-menu ul.main-menu > li > a:visited{color:#111111!important;border-bottom:none!important} .space-header-height .space-header-menu ul.main-menu > li > a:hover,.space-header-height .space-header-menu ul.main-menu > li:hover > a,.space-header-height .space-header-menu ul.main-menu > li.current-menu-item > a,.space-header-height .space-header-menu ul.main-menu > li.current_page_item > a,.space-header-height .space-header-menu ul.main-menu > li.current-menu-ancestor > a,.space-header-height .space-header-menu ul.main-menu > li.current-menu-parent > a{color:#009168!important;border-bottom:2px solid #009168!important} .space-header-height .space-header-menu ul.main-menu ul.sub-menu li a,.space-header-height .space-header-menu ul.main-menu ul.sub-menu li a:visited,.space-header-height .space-header-menu ul.main-menu li li a,.space-header-height .space-header-menu ul.main-menu li li a:visited{color:#111111!important;border-bottom:none!important;text-decoration:none!important} .space-header-height .space-header-menu ul.main-menu ul.sub-menu li a:hover,.space-header-height .space-header-menu ul.main-menu ul.sub-menu li:hover a,.space-header-height .space-header-menu ul.main-menu li li a:hover,.space-header-height .space-header-menu ul.main-menu li li:hover a{color:#009168!important;border-bottom:none!important;text-decoration:none!important} .site-title a,.site-description{color:#009168!important} /* === SPACE-PAGE-CONTENT LINKS === */ .space-page-content a,.space-page-content a:link,.space-page-content a:visited,.space-page-content p a,.space-page-content .wp-block-paragraph a{color:#009168!important;text-decoration:none!important} .space-page-content a:hover,.space-page-content p a:hover,.space-page-content .wp-block-paragraph a:hover{color:#006B4E!important;text-decoration:underline!important} /* === MERCURY LJUBIČASTA/ROZA → BRAND ZELENA (globalni override) === */ .space-header-menu ul.main-menu li a:hover,.space-header-menu ul.main-menu li:hover a,.space-header-2-nav ul.main-menu li a:hover,.space-header-2-nav ul.main-menu li:hover a{color:#009168!important;border-bottom-color:#009168!important} .space-header-menu ul.main-menu li.current-menu-item a,.space-header-2-nav ul.main-menu li.current-menu-item a,.space-header-menu ul.main-menu li.current_page_item a,.space-header-2-nav ul.main-menu li.current_page_item a{color:#009168!important;border-bottom-color:#009168!important} .space-header-menu ul.main-menu ul.sub-menu li a:hover,.space-header-2-nav ul.main-menu ul.sub-menu li a:hover{color:#009168!important} .space-header-2-top-soc a:hover{color:#009168!important;border-color:#009168!important} .space-block-title span:after,.space-widget-title span:after{background-color:#009168!important} .space-block-title span:before,.space-widget-title span:before{background-color:#00B582!important} .space-text-gradient{background:linear-gradient(to right,#009168 0%,#00B582 100%)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important} .space-news-2-item-big-box-category span,.space-news-2-small-item-img-category a,.space-news-3-item-img-category a,.space-news-4-item.small-news-block .space-news-4-item-img-category a,.space-news-6-item-top-category span,.space-news-7-item-category span,.space-news-8-item-title-category span,.space-news-9-item-info-category span,.space-title-box-category a,.space-archive-loop-item-img-category a{background-color:#009168!important} .space-news-10-item-category a,.small .space-news-11-item-category a,.space-comments-list-item-author a:hover,h3.comment-reply-title small a,p.logged-in-as a:hover,h3.comment-reply-title small a:hover,.space-comments-list-item-date a.comment-reply-link,.space-comments-list-item-date a.comment-reply-link:hover,.space-widget ul li a:hover,#recentcomments li a:hover,#recentcomments li span.comment-author-link a:hover,.home-page .textwidget a{color:#009168!important} .space-categories-list-box ul li a{color:#009168!important;border-color:#009168!important} .widget_tag_cloud a{background-color:#009168!important} nav.pagination a,nav.comments-pagination a,nav.pagination-post a span.page-number{background-color:#009168!important;border-color:#009168!important} nav.pagination a:hover,nav.comments-pagination a:hover{background-color:#006B4E!important} .space-footer-top-age span.age-limit{background-color:#009168!important} #scrolltop{color:#009168!important} .space-page-content ul.space-mark li:before,.home-page .textwidget ul li:before{color:#009168!important} /* === KLR H1 UPGRADE (veći, hrabriji hero naslovi) === */ .klr h1{font-size:clamp(36px,6.5vw,54px)!important;letter-spacing:-1.6px!important;line-height:1.08!important;margin:0 0 20px!important;padding-bottom:2px} html{scroll-behavior:smooth} .kl-vd-main h2[id],.klr h2[id]{scroll-margin-top:96px} /* TOC redizajn — kartica → nav rail s mono brojevima */ .kl-vd-toc{background:transparent!important;border:none!important;border-left:2px solid #EAEAEA!important;border-radius:0!important;padding:2px 0 2px 18px!important;margin:0 0 28px} .kl-vd-toc-h{margin:0 0 10px} .kl-vd-toc ol{list-style:none!important;padding:0!important;margin:0!important;counter-reset:klt} .kl-vd-toc li{counter-increment:klt;margin:0 0 2px!important;line-height:1.4!important;font-size:14px} .kl-vd-toc li::marker{content:none} .kl-vd-toc li a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;margin:0 0 0 -10px;border-radius:8px;color:#444!important;font-weight:500!important;text-decoration:none!important;transition:background .15s ease,color .15s ease} .kl-vd-toc li a::before{content:counter(klt,decimal-leading-zero);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:#009168;flex:0 0 auto} .kl-vd-toc li a:hover{background:#E0F2EC;color:#006B4E!important} /* TOC redizajn — klr .toc redovi (hub /vodici/): hover pozadina + strelica */ .klr .toc .row{position:relative;padding:18px 14px!important;margin:0 -14px;border-radius:10px;transition:background .15s ease} .klr .toc .row:hover{background:#F3FAF7} .klr .toc .num{background:#E0F2EC;color:#006B4E!important;border-radius:6px;padding:2px 7px;font-size:11px!important;min-width:auto!important} .klr .toc .ttl a::after{content:'→';font-family:'JetBrains Mono',monospace;font-weight:600;color:#009168;margin-left:8px;opacity:0;display:inline-block;transform:translateX(-4px);transition:opacity .15s ease,transform .15s ease} .klr .toc .row:hover .ttl a::after{opacity:1;transform:translateX(0)} /* Sticky TOC layout za vodiče */ @media(min-width:1080px){ .kl-vd-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;align-items:start} .kl-vd-side{position:sticky;top:96px} .kl-vd-side .kl-vd-toc{margin:0} .kl-vd-main{min-width:0} } .klr .kick{margin-top:6px} .klr .lead{font-size:21px} /* === KLR RULES → BRAND CHECK LISTA (bez default bulleta) === */ .klr ul.rules,.klr .rules{list-style:none!important;margin:4px 0 17px!important;padding:0!important} .klr .rules li{list-style:none!important;position:relative;padding:12px 0 12px 34px!important;border-bottom:1px solid var(--line);font-size:16px;line-height:1.6} .klr .rules li::marker{content:none} .klr .rules li:before{content:''!important;position:absolute;left:0;top:14px;width:19px;height:19px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009168' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12.2 2.4 2.4 4.6-5'/%3E%3C/svg%3E") no-repeat center/19px} /* === IDX LINKOVI (tipovi rubrike kao prave poveznice) === */ .klr .idx .nm a,.klr .idx .nm a:visited{color:var(--ink)!important;border-bottom:none!important;font-weight:800;text-decoration:none!important;display:inline-flex;align-items:center;gap:8px} .klr .idx .nm a .arr{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--brand);transition:transform .2s ease} .klr .idx .r:hover .nm a{color:var(--brand)!important} .klr .idx .r:hover .nm a .arr{transform:translateX(4px)} /* === RANK MATH FAQ (globalni dizajn) === */ .wp-block-rank-math-faq-block{max-width:980px;margin:8px auto 28px} .rank-math-faq-item{border:1px solid #EAEAEA;border-radius:12px;padding:20px 24px;margin:0 0 12px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease} .rank-math-faq-item:hover{border-color:#009168;box-shadow:0 6px 18px rgba(0,107,78,.08)} .rank-math-faq-item .rank-math-question{font-family:'Inter',sans-serif!important;font-size:17px!important;font-weight:700!important;color:#111!important;margin:0 0 9px!important;padding:0;letter-spacing:-.2px;display:flex;gap:11px;align-items:baseline;line-height:1.35} .rank-math-faq-item .rank-math-question::before{content:'Q';font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;color:#006B4E;background:#E0F2EC;border-radius:6px;padding:3px 8px;flex:0 0 auto;line-height:1.4} .rank-math-faq-item .rank-math-answer{font-size:15px;line-height:1.65;color:#444;margin:0 0 0 40px} @media(max-width:540px){.rank-math-faq-item{padding:16px 18px}.rank-math-faq-item .rank-math-answer{margin-left:0;margin-top:4px}} /* FAQ accordion — nativni
, radi bez JS-a */ details.rank-math-faq-item{padding:0!important} details.rank-math-faq-item .rank-math-question{cursor:pointer;margin:0!important;padding:19px 56px 19px 24px!important;position:relative;list-style:none;user-select:none} details.rank-math-faq-item .rank-math-question::-webkit-details-marker{display:none} details.rank-math-faq-item .rank-math-question::after{content:'';position:absolute;right:26px;top:50%;width:9px;height:9px;border-right:2px solid #009168;border-bottom:2px solid #009168;transform:translateY(-70%) rotate(45deg);transition:transform .3s ease} details.rank-math-faq-item[open] .rank-math-question::after{transform:translateY(-30%) rotate(225deg)} details.rank-math-faq-item .rank-math-answer{padding:0 26px 20px;animation:klfade .3s ease} @keyframes klfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} @media(max-width:540px){details.rank-math-faq-item .rank-math-question{padding:16px 44px 16px 18px!important}details.rank-math-faq-item .rank-math-answer{padding:0 18px 16px;margin-left:0!important}} /* Count-up brojke — čisti CSS (@property), fallback = statični broj */ @property --kn{syntax:'';inherits:true;initial-value:0} @supports (animation-timeline: view()){ .kl-cnt b{font-size:0;line-height:0} .kl-cnt::before{content:counter(kn)} .kl-cnt{--kn:var(--kt,0);counter-reset:kn var(--kn);animation:klcnt 1.4s cubic-bezier(.22,.8,.36,1) .5s both} @keyframes klcnt{from{--kn:0}} } /* Feed najnovijih tipova (wp:latest-posts, /tipovi/ sub-stranice) */ ul.kl-tips-feed{list-style:none!important;padding:0!important;margin:8px auto 34px;max-width:760px} ul.kl-tips-feed li{list-style:none!important;border:1px solid #EAEAEA;border-radius:12px;padding:16px 20px;margin:0 0 10px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease} ul.kl-tips-feed li::marker{content:none} ul.kl-tips-feed li:hover{border-color:#009168;box-shadow:0 6px 18px rgba(0,107,78,.08)} ul.kl-tips-feed li a{font-weight:700;color:#111!important;text-decoration:none!important;font-size:16.5px;letter-spacing:-.2px;line-height:1.4} ul.kl-tips-feed li a:hover{color:#006B4E!important} ul.kl-tips-feed .wp-block-latest-posts__post-date{display:block;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#8a8a8a;margin-top:5px} /* kl-meth grid varijanta s 3 stupca (tipovi sub-stranice) */ .kl-meth-grid.cols3{grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.kl-meth-grid.cols3{grid-template-columns:1fr}} /* kl-faq (vodici) — unificiran s globalnim FAQ card dizajnom */ .kl-faq details{border:1px solid #EAEAEA!important;border-radius:12px;background:#fff;margin:0 0 12px;transition:border-color .2s ease,box-shadow .2s ease} .kl-faq details:first-child{border-top:1px solid #EAEAEA!important} .kl-faq details:hover{border-color:#009168!important;box-shadow:0 6px 18px rgba(0,107,78,.08)} .kl-faq summary{padding:19px 56px 19px 24px!important;position:relative;justify-content:flex-start!important} .kl-faq summary::before{content:'Q';font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;color:#006B4E;background:#E0F2EC;border-radius:6px;padding:3px 8px;flex:0 0 auto;line-height:1.4} .kl-faq summary::after{content:''!important;position:absolute;right:26px;top:50%;width:9px;height:9px;border-right:2px solid #009168;border-bottom:2px solid #009168;transform:translateY(-70%) rotate(45deg);transition:transform .3s ease} .kl-faq details[open] summary::after{content:''!important;transform:translateY(-30%) rotate(225deg)} .kl-faq details>p{padding:0 26px 20px!important;animation:klfade .3s ease} @media(max-width:540px){.kl-faq summary{padding:16px 44px 16px 18px!important}.kl-faq details>p{padding:0 18px 16px!important}} /* ============ KLVIJ2: /vijesti/ redizajn (27.07.) ============ Varijanta A: hero preko sirine, lista lijevo, kut i widgeti desno. Paleta C (prigusena zalfija) jer je tamni emerald pao na /rezultati/ i operator ga je odbio i ovdje. Oznake su Inter, ne mono; mono ostaje samo na brojevima. Mobitel je aplikacijski, kao /rezultati/. */ .klvij2{--v-hero:linear-gradient(150deg,#3E6E58,#4E8067 55%,#5E9077); --v-scrim:linear-gradient(0deg,rgba(40,72,58,.92),rgba(40,72,58,.45) 58%,transparent); --v-kut:#EDF4F0; --v-kutbd:#D6E5DD; --v-kuth:#3E6E58; --v-kuttt:#233A2F; --v-line:#EAEAEA; --v-mut:#888; --v-ink:#111; /* 28px odmaka od sive trake iznad: bez toga filtri sjedaju tocno na rub .kl-pagehead plohe i citaju se kao dio nje */ max-width:1180px;margin:28px auto 0} /* filtri, pilule */ /* 30px, ne 20: na 20 su pilule sjedale prakticki na rub hero kartice */ .klvij2-filt{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 30px} .klvij2-filt button{font-family:inherit;font-size:13px;font-weight:600;padding:9px 18px; border-radius:999px;border:1px solid var(--v-line);background:#fff;color:#444;cursor:pointer; transition:background .15s ease,border-color .15s ease,color .15s ease} .klvij2-filt button:hover{border-color:#009168;color:#006B4E;background:#E0F2EC} .klvij2-filt button[aria-pressed="true"]{background:#009168;border-color:#009168;color:#fff} /* hero: fotografija gore, tekst na punoj plohi ispod Preklop preko fotografije pao je 27.07. Scrim se podesava za JEDNU sliku, a feed dovlaci novu svaki dan: svijetla fotografija proguta i bijeli i tamni tekst. Ploha je staticna pa je naslov citljiv bez obzira sto je na slici, i fotografija ostaje cijela, bez zatamnjenja preko donje trecine. */ .klvij2-hero{position:relative;border-radius:14px;overflow:hidden;display:block; text-decoration:none;background:var(--v-hero);margin:0 0 22px} .klvij2-hero img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover} .klvij2-hero .ov{display:block;padding:22px 26px 20px;background:var(--v-hero)} /* V2 "editorial meta red" (29.07.): rubrika seli sa slike u meta red iznad naslova, fotografija ostaje potpuno cista; podnozje s hairlineom, potpisom i CTA signalom. Cijeli hero je i dalje jedan , pa su meta red i CTA spanovi, ne linkovi. Eksplicitna boja na SVAKOM spanu jer site-wide body span{color:#444} gazi nasljedjivanje (pravilo sajta). Stari markup (chip na fotografiji) i dalje radi — chip pravila ostaju nize. */ .klvij2-hero .met{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 10px} .klvij2-hero .met span{font-size:12.5px;font-weight:600;letter-spacing:.03em;color:#B9CEC4} .klvij2-hero .met .r{color:#fff} .klvij2-hero .met i{font-style:normal;font-size:12.5px;font-weight:600;color:#B9CEC4;opacity:.55} .klvij2-hero .ft{display:flex;align-items:center;justify-content:space-between;gap:12px; margin:14px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.16)} .klvij2-hero .wh{font-size:12.5px;font-weight:600;color:#9FBDB0} .klvij2-hero .go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#fff} .klvij2-hero .go .ar{display:inline-block;color:#fff;transition:transform .2s} .klvij2-hero:hover .go .ar{transform:translateX(3px)} @media (prefers-reduced-motion:reduce){.klvij2-hero .go .ar{transition:none}} .klvij2-hero .chip{position:absolute;top:14px;left:16px;z-index:3;display:inline-flex; font-size:11px;font-weight:600;color:#2E5744;background:#fff;padding:4px 12px; border-radius:999px;margin:0} /* !important jer site-wide h1..h6{color:#111!important} inace pregazi bijelo. Odlomak ispod nema takvo pravilo, pa je do sada lead bio bijel a naslov crn. */ .klvij2-hero h3{margin:0 0 7px;font-size:32px;line-height:1.14;color:#fff!important; font-weight:800;letter-spacing:-.025em;max-width:24ch} .klvij2-hero p{margin:0;color:#DDEAE3;font-size:15px;max-width:60ch} /* Kad sloj slika ne nadje nista, hero izlazi bez pa je .ov prvo dijete. Tada oznaka nema fotografiju na kojoj bi stajala i vraca se u tok teksta, inace bi lebdjela preko naslova. */ .klvij2-hero .ov:first-child .chip{position:static;margin:0 0 9px} @media(max-width:640px){ .klvij2-hero img{aspect-ratio:16/9} .klvij2-hero .ov{padding:14px 15px 16px} .klvij2-hero .chip{top:10px;left:10px} .klvij2-hero h3{font-size:19px;line-height:1.25;max-width:none} .klvij2-hero p{font-size:13px;max-width:none} .klvij2-hero .met{margin:0 0 8px} .klvij2-hero .met span{font-size:11.5px} .klvij2-hero .met i{font-size:11.5px} .klvij2-hero .wh{display:none} .klvij2-hero .ft{margin:12px 0 0;padding:12px 0 0} } /* raspored */ .klvij2-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px; align-items:start} /* minmax(0,1fr), NE 1fr. Stupac mreze ima min-width:auto, sto znaci "ne smijem biti uzi od svog sadrzaja". Desni stupac se puni TEK nakon fetcha (~2-3 s), a "Uzivo sada" zna donijeti par tipa "Samtskhe Akhaltsikhe – Gagra" s white-space:nowrap. Tada stupac gurne cijelu mrezu siru od ekrana i stranica se na mobitelu "razvuce" — tocno 2-3 sekunde nakon otvaranja. */ @media(max-width:900px){.klvij2-cols{grid-template-columns:minmax(0,1fr)}} .klvij2-main,.klvij2-rail{min-width:0} .klvij2-box .li{min-width:0} .klvij2-box .li .nm{flex:1 1 auto} .klvij2-rail{position:sticky;top:14px;display:flex;flex-direction:column;gap:14px} /* Na mobitelu stupac pada ispod liste. Kut tamo ne ide: operator ga je htio samo unutar clanka, jer na hubu na uskom ekranu gura vijesti ispod pregiba. */ @media(max-width:900px){.klvij2-rail{position:static} .klvij2-rail .klvij2-kut{display:none}} .klvij2-box{border:1px solid var(--v-line);border-radius:14px;padding:16px;background:#fff} .klvij2-box .h{font-size:13px;font-weight:600;color:var(--v-mut);margin:0 0 10px} .klvij2-box .li{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:15px; color:var(--v-ink)} .klvij2-box .li + .li{border-top:1px solid var(--v-line)} .klvij2-box .li b{margin-left:auto;font-family:'JetBrains Mono',monospace;font-weight:700; font-size:15px;font-feature-settings:'tnum' 1} .klvij2-box .li .cr{width:20px;height:20px;border-radius:50%;flex:0 0 auto;object-fit:contain; background:#EEF2F0} .klvij2-box .go{display:block;margin-top:10px;font-size:13px;font-weight:600;color:#009168; text-decoration:none} /* kut na naslovnici */ .klvij2-kut{background:var(--v-kut);border:1px solid var(--v-kutbd);border-radius:14px; padding:18px 20px} .klvij2-kut .h{font-size:13px;font-weight:600;color:var(--v-kuth);margin:0 0 12px; display:flex;align-items:center;gap:7px} .klvij2-kut .h i{width:6px;height:6px;border-radius:50%;background:#009168;display:block} .klvij2-kut .it{padding:11px 0;border-top:1px solid #DCE9E3} .klvij2-kut .it:first-of-type{border-top:0;padding-top:0} .klvij2-kut b{display:block;font-size:15px;color:var(--v-kuttt);font-weight:700;margin-bottom:3px} .klvij2-kut span{font-size:13px;color:#4E6B5E;line-height:1.55} /* lista vijesti (wp:query) */ .klvij2-feed .wp-block-post-template{list-style:none;margin:0;padding:0;gap:0} .klvij2-feed .wp-block-post{display:flex;gap:14px;padding:14px 0; border-top:1px solid var(--v-line);list-style:none} .klvij2-feed .wp-block-post::marker{content:none} .klvij2-feed .klvij2-txt{min-width:0;flex:1;display:block} .klvij2-feed .wp-block-post:first-child{border-top:0;padding-top:0} .klvij2-feed .wp-block-post-featured-image{width:104px;flex:0 0 auto;margin:0} .klvij2-feed .wp-block-post-featured-image img{width:104px;height:78px;object-fit:cover; border-radius:10px;display:block} .klvij2-feed .wp-block-post-title{margin:0 0 4px;font-size:15px;line-height:1.35;font-weight:700} .klvij2-feed .wp-block-post-title a{color:var(--v-ink);text-decoration:none} .klvij2-feed .wp-block-post-title a:hover{color:#006B4E} .klvij2-feed .wp-block-post-excerpt{margin:0;font-size:13px;color:var(--v-mut);line-height:1.5} .klvij2-feed .wp-block-post-excerpt__more-text{display:none} .klvij2-feed .wp-block-post-date{font-size:13px;color:var(--v-mut);margin:6px 0 0} @media(max-width:480px){ .klvij2-feed .wp-block-post-featured-image, .klvij2-feed .wp-block-post-featured-image img{width:84px;height:64px} } /* Tema ima vlastita pravila za naslove, odlomke i liste u blokovima, pa nasa moraju biti specificnija. Bez ovoga naslov u listi ostaje 19px, sazetak 17px, a ispod slike se pojavi crta iz theme stila za figure. */ .klvij2 .klvij2-feed ul.wp-block-post-template{list-style:none!important;margin:0!important; padding:0!important;display:block!important} .klvij2 .klvij2-feed li.wp-block-post{display:flex!important;gap:14px;padding:14px 0!important; margin:0!important;border-top:1px solid var(--v-line);border-bottom:0!important; list-style:none!important;align-items:flex-start} .klvij2 .klvij2-feed li.wp-block-post:first-child{border-top:0;padding-top:0!important} /* Filtri sakrivaju kroz [hidden]. Bez ovoga display:flex!important gore pobijedi ugradjeno [hidden]{display:none} i redak ostane vidljiv. */ .klvij2 .klvij2-feed li.wp-block-post[hidden]{display:none!important} .klvij2-hero[hidden],.klvij2-pag[hidden]{display:none} .klvij2-nema{font-size:15px;color:var(--v-mut);margin:0;padding:26px 0;text-align:center} .klvij2 .klvij2-feed figure.wp-block-post-featured-image{width:104px!important;flex:0 0 auto; margin:0!important;padding:0!important;border:0!important;overflow:hidden;border-radius:10px} .klvij2 .klvij2-feed figure.wp-block-post-featured-image a{display:block;border:0!important} .klvij2 .klvij2-feed figure.wp-block-post-featured-image img{width:104px!important; height:78px!important;object-fit:cover;display:block;border-radius:10px;margin:0!important} .klvij2 .klvij2-feed .klvij2-txt{flex:1;min-width:0;margin:0!important;padding:0!important} .klvij2 .klvij2-feed h3.wp-block-post-title{margin:0 0 4px!important;font-size:15px!important; line-height:1.35!important;font-weight:700!important;letter-spacing:0} .klvij2 .klvij2-feed h3.wp-block-post-title a{color:var(--v-ink)!important; text-decoration:none!important;border-bottom:0!important} .klvij2 .klvij2-feed h3.wp-block-post-title a:hover{color:#006B4E!important} .klvij2 .klvij2-feed .wp-block-post-excerpt{margin:0!important} .klvij2 .klvij2-feed .wp-block-post-excerpt p, .klvij2 .klvij2-feed .wp-block-post-excerpt__excerpt{margin:0!important;font-size:13px!important; line-height:1.5!important;color:var(--v-mut)!important} .klvij2 .klvij2-feed .wp-block-post-date{margin:6px 0 0!important;font-size:13px!important; color:var(--v-mut)!important;line-height:1.4!important} .klvij2 .klvij2-feed .wp-block-post-date a{color:var(--v-mut)!important; text-decoration:none!important;border-bottom:0!important} /* Desni stupac. Sve kutije govore isti jezik: bijela ploha, 14px radijus, oznaka 13px Inter. Radar i brzi linkovi dolaze iz Apps Scripta i sad izlaze odmah u klvij2 razredima, pa nema nadjacavanja starih klvij- pravila. */ .klvij2-box .h .dot{width:7px;height:7px;border-radius:50%;background:#C53030; display:inline-block;margin-right:7px;vertical-align:middle; animation:klvij2puls 1.6s ease-in-out infinite} @keyframes klvij2puls{0%,100%{opacity:1}50%{opacity:.3}} @media(prefers-reduced-motion:reduce){.klvij2-box .h .dot{animation:none}} .klvij2-box .li .cr{object-fit:contain} .klvij2-box .li .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .klvij2-box .li .min{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:13px; color:var(--v-mut);font-feature-settings:'tnum' 1} .klvij2-box .li .min + b{margin-left:10px} .klvij2-box .em{font-size:13px;color:var(--v-mut);margin:0;padding:2px 0} /* Redci u "Nas tip danas" su poveznice na sam tip */ .klvij2-box a.li{text-decoration:none!important;border-bottom:0!important; color:var(--v-ink)!important} .klvij2-box a.li:hover{color:#006B4E!important} /* Izvan 23:00-06:00 kvota se ne smije prikazati (NN 72/2025), pa desno stoji sam tip. Pilula umjesto brojke, da se ne cita kao kvota. */ .klvij2-box .li .tp{margin-left:auto;flex:0 0 auto;font-size:13px;font-weight:600; color:#006B4E;background:#E0F2EC;padding:3px 10px;border-radius:999px} /* radar: ista bijela kutija, redovi kao u kutu */ .klvij2-tk{border:1px solid var(--v-line);border-radius:12px;padding:12px 14px} .klvij2-tk-top{display:flex;justify-content:space-between;align-items:center;gap:10px; padding-bottom:9px;margin-bottom:5px;border-bottom:1px solid var(--v-line)} .klvij2-tk-top b{font-size:15px;font-weight:700;color:var(--v-ink);display:flex; align-items:center;gap:7px;min-width:0;line-height:1.3} .klvij2-tk-top i{font-style:normal;font-size:13px;color:var(--v-mut);flex:0 0 auto} .klvij2-tk-crest{width:18px;height:18px;border-radius:50%;object-fit:contain;background:#EEF2F0; flex:0 0 auto} .klvij2-tk-row{display:flex;justify-content:space-between;align-items:center;gap:8px; padding:5px 0;font-size:13px;color:var(--v-mut)} .klvij2-tk-row b{font-family:'JetBrains Mono',monospace;font-feature-settings:'tnum' 1; font-weight:700;font-size:15px;color:var(--v-ink)} .klvij2-tk-row b.klvij2-edge{color:#009168} .klvij2-disc{font-size:13px;color:var(--v-mut);margin:11px 0 0;line-height:1.5} .klvij2-disc a{color:inherit} /* brzi linkovi */ .klvij2-ql{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:10px 0;border-top:1px solid var(--v-line);font-size:15px;font-weight:600; color:var(--v-ink)!important;text-decoration:none!important;border-bottom:0!important} .klvij2-ql:first-of-type{border-top:0;padding-top:0} .klvij2-ql:hover{color:#006B4E!important} .klvij2-ql em{font-style:normal;color:#009168;flex:0 0 auto} /* CTA na dnu stupca: puna sirina, inace pilula pluta uz lijevi rub */ .klvij2-rail .klvij-cta{margin:0} .klvij2-rail .klvij-pill{justify-content:center;width:100%} /* paginacija: krugovi */ .klvij2-pag{display:flex;align-items:center;justify-content:center;gap:8px;margin:26px 0 0; padding-top:22px;border-top:1px solid var(--v-line);flex-wrap:wrap} .klvij2-pag .page-numbers{width:44px;height:44px;display:inline-flex;align-items:center; justify-content:center;border:1px solid var(--v-line);border-radius:50%; font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:#006B4E; text-decoration:none;font-feature-settings:'tnum' 1;transition:all .15s ease} .klvij2-pag .page-numbers:hover{border-color:#009168;background:#E0F2EC} .klvij2-pag .page-numbers.current{background:#009168;border-color:#009168;color:#fff} .klvij2-pag .page-numbers.dots{border:0;width:auto;color:var(--v-mut)} @media(max-width:480px){.klvij2-pag .page-numbers{width:38px;height:38px;font-size:13px}} /* ---- mobitel: aplikacijski sloj, isti obrazac kao /rezultati/ ---- Ljepljiva traka s naslovom, ispod nje traka rubrika koja se klizi vodoravno, hero se pretvara iz preklopa u karticu (slika gore, tekst na bijelom ispod), i donja navigacija. Isti markup kao desktop, druga prezentacija. */ .klvij2-mtop,.klvij2-nav{display:none} @media(max-width:640px){ /* var(...,rezerva) jer clanci koriste iste klase, a --v-* zive na .klvij2 omotacu kojeg u clanku nema */ .klvij2-mtop{display:flex;align-items:center;gap:10px;padding:13px 2px 11px; border-bottom:1px solid var(--v-line,#EAEAEA);position:sticky;top:0;z-index:20; background:#fff;margin:0 0 14px} .klvij2-mtop .t{font-size:17px;font-weight:800;color:var(--v-ink,#111);letter-spacing:-.02em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .klvij2-mtop .bk{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto; border:1px solid var(--v-line,#EAEAEA);border-radius:9px;color:var(--v-ink,#111)!important; text-decoration:none!important;border-bottom:1px solid var(--v-line,#EAEAEA)!important} .klvij2-mtop .bk svg{width:15px;height:15px} /* traka rubrika se klizi umjesto da se lomi u dva reda */ .klvij2-filt{position:sticky;top:46px;z-index:19;background:#fff;flex-wrap:nowrap; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; padding:10px 0;margin:0 0 14px;border-bottom:1px solid var(--v-line)} .klvij2-filt::-webkit-scrollbar{display:none} .klvij2-filt button{flex:0 0 auto} /* hero je i na desktopu vec kartica (slika gore, ploha ispod), pa ga ovdje ne treba prekrajati; velicine su u njegovom vlastitom prijelomu gore */ .klvij2-nav{display:grid;grid-template-columns:repeat(4,1fr);position:sticky;bottom:0; z-index:30;background:#fff;border-top:1px solid var(--v-line,#EAEAEA);margin-top:18px; box-shadow:0 -6px 20px -16px rgba(9,28,20,.4)} /* :link i :visited MORAJU biti u selektoru. Na vrhu ovog fajla stoji ".space-content a:link{color:#009168!important}", a to je specificnost (0,2,1) jer se pseudo-klasa broji u stupac KLASA. Moj "nav.klvij2-nav a" je (0,1,2) i gubi, jer se stupac klasa usporedjuje prvi — dodavanje elementa u selektor tu ne pomaze. Zato su sve cetiri stavke bile zelene. Isti recept vec koriste .klvij-pill i .klvij-rel a nize u fajlu. /rezultati/ je bio postedjen jer ondje nav koristi