/* Theme Name: Osijek Najnovije Theme URI: https://top365.online Description: Lagana namjenska news tema za lokalni portal OSIJEK NAJNOVIJE (Slavonija i Baranja). Custom raspored: hero + blokovi po rubrikama + sidebar s lokalnim hookovima (Najnovije uživo, NK Osijek, Najčitanije, Što-gdje-kada). Test faza. Author: Matija Version: 0.1 Text Domain: osijek-najnovije */ :root{ --brand:#0a3d62; --brand-2:#1e6091; --accent:#e6312b; --gold:#f0a500; --ink:#16202b; --muted:#6b7785; --line:#e6e9ee; --bg:#f4f6f9; --card:#fff; } *{box-sizing:border-box} body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.45;overflow-x:clip} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} a:hover{color:var(--accent)} .wrap{max-width:1180px;margin:0 auto;padding:0 16px} .ph{display:block;width:100%;background:linear-gradient(135deg,#c9d6e3,#9fb3c8)} .screen-reader-text{position:absolute;left:-9999px} /* TOPBAR */ .topbar{background:var(--brand);color:#dfe8f1;font-size:12.5px} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px} .topbar .meta{display:flex;gap:16px;align-items:center} .topbar .wx{color:var(--gold);font-weight:600} .topbar .links{display:flex;gap:14px} .topbar a{color:#dfe8f1} /* HEADER */ header.site{background:var(--card);border-bottom:1px solid var(--line)} header.site .wrap{display:flex;align-items:center;gap:24px;padding:14px 16px} .logo{display:flex;align-items:center} .logo img{max-height:52px;width:auto} .logo .txt{font-weight:900;font-size:30px;letter-spacing:-.5px;line-height:1;color:var(--brand)} .logo .txt span{color:var(--accent);font-size:.66em;font-weight:800;letter-spacing:-.3px} .logo .txt small{display:block;font-size:11px;font-weight:600;letter-spacing:3px;color:var(--muted);margin-top:3px} /* scope-ano na header.site: klasa .search se inace sudara s na search stranicama */ header.site .search{margin-left:auto;display:flex;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:7px 14px;min-width:220px;color:var(--muted);font-size:13px} header.site .search input{border:0;background:transparent;outline:0;width:100%;color:var(--ink);font-size:13px} .leaderboard{background:#dde3ea;color:#8a97a5;text-align:center;font-size:11px;padding:18px;border-radius:6px;margin:14px 16px 0;max-width:1180px;margin-left:auto;margin-right:auto} /* NAV */ nav.cats{background:var(--brand);position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.12)} nav.cats .wrap{display:flex;align-items:center;gap:2px;overflow-x:auto} nav.cats a{color:#fff;font-weight:700;font-size:14px;padding:13px 14px;white-space:nowrap;border-bottom:3px solid transparent} nav.cats a:hover,nav.cats li.current-cat>a,nav.cats li.current-menu-item>a{background:var(--brand-2);border-bottom-color:var(--gold);color:#fff} nav.cats ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0} nav.cats a.live{color:var(--gold)} nav.cats a.live::before{content:"●";color:var(--accent);font-size:10px;margin-right:5px} .burger{display:none;color:#fff;font-weight:800;padding:13px 14px;background:none;border:0;cursor:pointer} /* TICKER */ .ticker{background:var(--accent);color:#fff;font-size:13.5px;padding:8px 0} .ticker .wrap{display:flex;align-items:center;gap:12px} .ticker .tag{background:#fff;color:var(--accent);font-weight:900;font-size:11px;padding:3px 9px;border-radius:3px;letter-spacing:1px;flex:none} .ticker .item{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* GRID */ .grid{display:grid;grid-template-columns:1fr 320px;gap:26px;margin:22px auto} /* HERO */ .hero{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:stretch} /* lead: 16:9 visina IZ SIRINE (padding spacer) — nikad ne prelijeva stupac; slika uvijek puni kutiju */ .lead{position:relative;border-radius:8px;overflow:hidden;background:#000;min-width:0} .lead::before{content:"";display:block;padding-top:56.25%} .lead > a{position:absolute;inset:0;display:block} .lead img,.lead .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .lead .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff} .lead .kicker{color:var(--gold);font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase} .lead h1{font-size:27px;line-height:1.2;margin:7px 0 6px;color:#fff} .lead h1 a{color:#fff} .lead .sub{font-size:14px;color:#d7dde5} .lead .by{font-size:12px;color:#aeb9c6;margin-top:8px} /* 3 sekundarne kartice ravnomjerno popune visinu lead-a (bez rupe) */ .secondary{display:flex;flex-direction:column;gap:14px} .sec-card{flex:1;min-height:0;display:grid;grid-template-columns:128px 1fr;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden} .sec-card img,.sec-card .ph{width:128px;height:100%;min-height:100%;object-fit:cover} .sec-card .t{padding:9px 10px 9px 0;min-width:0} .sec-card .kicker{color:var(--accent);font-weight:800;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase} .sec-card h3{font-size:14.5px;line-height:1.25;margin:3px 0 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical} /* SECTION HEADERS */ .sec-head{display:flex;align-items:center;gap:10px;margin:30px 0 14px;border-bottom:2px solid var(--brand);padding-bottom:7px} .sec-head h2{font-size:19px;color:var(--brand);text-transform:uppercase;letter-spacing:.5px;margin:0} .sec-head a.more{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600} .sec-head.red{border-bottom-color:var(--accent)} .sec-head.red h2{color:var(--accent)} /* CARDS */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.15s} .card:hover{box-shadow:0 6px 18px rgba(10,61,98,.13);transform:translateY(-2px)} .card img,.card .ph{aspect-ratio:16/9;height:auto;width:100%;object-fit:cover} .card .body{padding:11px 12px 14px} .card .kicker{color:var(--accent);font-weight:800;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase} .card h3{font-size:15px;line-height:1.25;margin:5px 0 6px} .card .meta{font-size:11.5px;color:var(--muted)} .readmore{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:700;color:var(--brand-2)} .readmore::after{content:" →"} /* SIDEBAR */ aside.sidebar{display:flex;flex-direction:column;gap:22px} .widget{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden} .widget .wh{background:var(--brand);color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px;text-transform:uppercase;padding:10px 14px;margin:0} .widget .wh.red{background:var(--accent)} .widget .wh.gold{background:var(--gold);color:#3a2a00} .feed{padding:4px 0;margin:0;list-style:none} .feed li{display:grid;grid-template-columns:54px 1fr;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)} .feed li:last-child{border-bottom:0} .feed .time{color:var(--accent);font-weight:800;font-size:12px} .feed h4{font-size:13.5px;line-height:1.3;font-weight:600;margin:0} .rank{counter-reset:r;padding:4px 0;margin:0;list-style:none} .rank li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line)} .rank li:last-child{border-bottom:0} .rank li::before{counter-increment:r;content:counter(r);font-weight:900;font-size:22px;color:var(--gold);text-align:center} .rank h4{font-size:13.5px;line-height:1.3;font-weight:600;margin:0} .match{padding:14px} .match .row{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:15px} .match .vs{color:var(--muted);font-size:12px;font-weight:600} .match .when{text-align:center;color:var(--muted);font-size:12px;margin-top:8px} .events{margin:0;list-style:none;padding:0} .events li{display:grid;grid-template-columns:46px 1fr;gap:11px;padding:10px 14px;border-bottom:1px solid var(--line)} .events li:last-child{border-bottom:0} .events .date{background:var(--bg);border-radius:6px;text-align:center;padding:5px 0;line-height:1.05} .events .date b{display:block;font-size:17px;color:var(--brand)} .events .date span{font-size:10px;color:var(--muted);text-transform:uppercase} .events h4{font-size:13px;font-weight:600;margin:0} .events small{color:var(--muted);font-size:11.5px} .mpu{background:#dde3ea;color:#8a97a5;text-align:center;font-size:11px;padding:60px 10px;border-radius:8px} .nl{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-radius:8px;padding:18px 16px;text-align:center} .nl h3{font-size:16px;margin:0 0 5px} .nl p{font-size:12.5px;color:#d3deea;margin:0 0 11px} .nl .inp{background:#fff;border-radius:6px;color:var(--muted);font-size:12.5px;padding:9px 12px;text-align:left} .nl .btn{display:block;width:100%;background:var(--gold);color:#3a2a00;font-weight:800;border:0;border-radius:6px;padding:9px;margin-top:8px;font-size:13px;cursor:pointer} /* SINGLE / ARCHIVE */ .article{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:26px 30px} .article .kicker{color:var(--accent);font-weight:800;font-size:12px;letter-spacing:.5px;text-transform:uppercase} .article h1{font-size:30px;line-height:1.2;margin:8px 0 10px} .article .by{color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px} .article img{border-radius:8px;margin:0 0 18px} .article .content{font-size:16.5px;line-height:1.7} .article .content p{margin:0 0 16px} .archive-head{margin:22px 0 16px} .archive-head h1{color:var(--brand);font-size:24px;margin:0;text-transform:uppercase;border-bottom:2px solid var(--brand);padding-bottom:8px} .archive-desc{color:var(--muted);font-size:14px;margin:9px 0 0;line-height:1.5} main > .hero{margin-bottom:20px} .pagination{display:flex;gap:8px;margin:24px 0;flex-wrap:wrap} .pagination a,.pagination span{padding:8px 13px;background:var(--card);border:1px solid var(--line);border-radius:6px;font-weight:700;font-size:13px} .pagination .current{background:var(--brand);color:#fff;border-color:var(--brand)} /* FOOTER */ footer.site{background:var(--ink);color:#aab6c2;margin-top:40px;font-size:13px} footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px;padding:34px 16px} footer.site h5{color:#fff;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:0 0 12px} footer.site a{display:block;padding:4px 0;color:#aab6c2} footer.site .brand{font-weight:900;font-size:22px;color:#fff} footer.site .brand span{color:var(--accent)} footer.site .copy{border-top:1px solid #2a3744;text-align:center;padding:16px;color:#7c8a98;font-size:12px} /* KRUH (breadcrumbs) */ .crumbs{font-size:12.5px;color:var(--muted);margin:18px 0 10px} .crumbs a{color:var(--brand-2);font-weight:600} .crumbs span{color:var(--muted)} /* PODIJELI */ .share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 4px;border-top:1px solid var(--line);padding-top:16px} .share .lbl{font-weight:800;font-size:13px;color:var(--ink);margin-right:2px} .share .sh{color:#fff;font-weight:700;font-size:12.5px;padding:7px 13px;border-radius:5px} .share .fb{background:#1877f2}.share .wa{background:#25d366}.share .x{background:#111} .share .cp{background:var(--bg);color:var(--brand-2);border:1px solid var(--line)} .share .sh:hover{opacity:.9;color:#fff}.share .cp:hover{color:var(--brand)} /* PRETHODNI / SLJEDEĆI */ .prevnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 0} .pn{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:13px 15px} .pn span{display:block;font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px} .pn b{font-size:14px;line-height:1.3;color:var(--ink)} .pn.next{text-align:right} .pn:hover b{color:var(--accent)} /* POVEZANE (koristi .cards; bez readmore) */ .cards.rel .card .meta{margin-top:2px} /* NA DANAŠNJI DAN widget */ .ndd{padding:14px} .ndd .yr{display:inline-block;background:var(--brand);color:#fff;font-weight:900;font-size:13px;padding:3px 9px;border-radius:4px;margin-bottom:8px} .ndd p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink)} /* VIC DANA widget */ .vic{padding:14px;font-size:13.5px;line-height:1.5;color:var(--ink)} .vic p{margin:0 0 8px}.vic p:last-child{margin:0} /* RESPONSIVE */ @media(max-width:900px){ .grid{grid-template-columns:1fr} .hero{grid-template-columns:1fr} .cards{grid-template-columns:1fr 1fr} aside.sidebar{order:3} footer.site .cols{grid-template-columns:1fr 1fr} .topbar .links{display:none} } @media(max-width:560px){ .cards{grid-template-columns:1fr} .lead h1{font-size:21px} /* mobilni dropdown: neproziran, iznad sadrzaja, separator koji NE sijece tekst */ nav.cats{overflow:visible} nav.cats .wrap{gap:0;overflow:visible} .burger{display:block} nav.cats ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--brand);align-items:stretch;z-index:60;box-shadow:0 10px 22px rgba(0,0,0,.30)} nav.cats ul.open{display:flex} nav.cats ul li{background:var(--brand)} nav.cats ul a{display:block;padding:14px 16px;border:0;border-top:1px solid rgba(255,255,255,.12)} nav.cats ul li:first-child a{border-top:0} nav.cats .live-pin{display:inline-block} footer.site .cols{grid-template-columns:1fr} .logo img{max-height:40px} header.site .wrap{flex-wrap:wrap;gap:12px} .logo .txt{font-size:23px} header.site .search{order:3;width:100%;min-width:0;margin-left:0} .leaderboard{margin-left:16px;margin-right:16px} .article{padding:20px 18px} .article h1{font-size:23px} .prevnext{grid-template-columns:1fr} .pn.next{text-align:left} }