/* Kameleon 2026 - generisano iz design/07-clanak.html Ne uredjivati rucno; izmijeni dizajn stranicu pa pokreni build-css.ps1 */ /* ============================================================ RADIO KAMELEON — tokeni dizajn sistema (verbatim) ============================================================ */ :root{ --font-display:'Bricolage Grotesque',sans-serif; --font-serif:'Instrument Serif',Georgia,serif; --font-body:'Manrope',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; --k-lime:#B3CE52; --k-teal:#28B499; --k-blue:#2F7DC1; --k-violet:#B377D9; --k-magenta:#D81B60; --k-yellow:#F2C920; --k-coral:#EF6363; --k-orchid:#C77BD9; --k-logo-red:#CD3539; --k-ink:#16162B; --k-ink-2:#2A2A40; --k-ink-muted:#6B6B7A; --k-ink-faint:#A8A8B8; --k-paper:#FFFFFF; --k-grey-50:#FAFAFC; --k-grey-100:#F4F4F7; --k-grey-200:#E6E6EE; --brand-primary:var(--k-lime); --brand-focus:var(--k-logo-red); --cat-radio:var(--k-lime); --cat-news:var(--k-blue); --cat-kultura:var(--k-teal); --cat-lifestyle:var(--k-yellow); --cat-sport:var(--k-coral); --cat-tech:var(--k-violet); --cat-feature:var(--k-magenta); --cat-highlight:var(--k-orchid); --text-strong:var(--k-ink); --text-body:var(--k-ink); --text-muted:var(--k-ink-muted); --text-faint:var(--k-ink-faint); --text-on-dark:var(--k-paper); --text-on-dark-muted:rgba(255,255,255,.6); --text-on-dark-faint:rgba(255,255,255,.4); --surface-page:var(--k-grey-100); --surface-page-alt:var(--k-grey-50); --surface-card:var(--k-paper); --surface-dark:var(--k-ink); --surface-dark-2:var(--k-ink-2); --surface-glass:rgba(255,255,255,.75); --line:var(--k-grey-200); --line-glass:rgba(230,230,238,.6); --line-on-dark:rgba(255,255,255,.08); --line-on-dark-strong:rgba(255,255,255,.3); --grad-chameleon:linear-gradient(120deg,#B3CE52 0%,#28B499 25%,#2F7DC1 50%,#B377D9 75%,#D81B60 100%); --grad-tropic:linear-gradient(135deg,#B3CE52 0%,#28B499 60%,#2F7DC1 100%); --grad-berry:linear-gradient(135deg,#B377D9 0%,#D81B60 60%,#EF6363 100%); --grad-sunset:linear-gradient(135deg,#F2C920 0%,#EF6363 50%,#D81B60 100%); --grad-citrus:linear-gradient(135deg,#F2C920 0%,#B3CE52 100%); --wash-kultura:linear-gradient(135deg,#28B499,#2F7DC1); --wash-news:linear-gradient(135deg,#2F7DC1,#28B499); --wash-sport:linear-gradient(135deg,#EF6363,#D81B60); --wash-tech:linear-gradient(135deg,#B377D9,#2F7DC1); --wash-muzika:linear-gradient(135deg,#D81B60,#C77BD9); --wash-lifestyle:linear-gradient(135deg,#F2C920,#B3CE52); --gap-grid:16px; --section-y:64px; --wrap-max:1440px; --wrap-pad:32px; --topbar-h:80px; --player-h:72px; --body-pad-bottom:96px; --r-sm:12px; --r-md:18px; --r-lg:28px; --r-xl:40px; --r-pill:100px; --shadow-sm:0 1px 3px rgba(22,22,43,.04),0 4px 14px rgba(22,22,43,.04); --shadow-md:0 4px 12px rgba(22,22,43,.06),0 14px 40px rgba(22,22,43,.08); --shadow-lg:0 8px 24px rgba(22,22,43,.08),0 28px 80px rgba(22,22,43,.12); --shadow-glass-top:0 2px 12px rgba(22,22,43,.04); --shadow-glass-bottom:0 -4px 24px rgba(22,22,43,.06); --ease-out-soft:cubic-bezier(.2,.8,.2,1); --dur-fast:.2s; --dur-mid:.35s; } /* ============================================================ BASE */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} body{ font-family:var(--font-body);background:var(--surface-page);color:var(--text-body); font-size:16px;line-height:1.55;text-wrap:pretty;padding-bottom:var(--body-pad-bottom); } a{color:var(--text-body);text-decoration:none} img,svg{display:block;max-width:100%} button{font-family:inherit;cursor:pointer;border:none;background:none} em{font-family:var(--font-serif);font-style:italic;font-weight:400} ul{list-style:none} :focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px} @keyframes k-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes k-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html{scroll-behavior:auto} } .k-wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)} .eyebrow{ font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:8px; } .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .k-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .meta{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--text-muted)} .btn{ font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;border:1.5px solid var(--k-ink);border-radius:var(--r-pill); padding:10px 20px;display:inline-flex;align-items:center;gap:8px;color:var(--k-ink);background:transparent; transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast),border-color var(--dur-fast); } .btn:hover{background:var(--k-ink);color:var(--k-paper);transform:translateY(-1px)} .btn-live{background:var(--k-ink);color:var(--k-paper);border-color:var(--k-ink)} .btn-live:hover{background:var(--brand-primary);color:var(--k-ink);border-color:var(--brand-primary)} /* dok program uzivo svira: isto stanje kao hover, bez novih tokena */ .btn-live.svira{background:var(--brand-primary);color:var(--k-ink);border-color:var(--brand-primary)} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:28px;flex-wrap:wrap} .sec-head h2{ font-family:var(--font-display);font-weight:600;font-size:36px;line-height:1; letter-spacing:-.045em;font-variation-settings:"opsz" 96;text-wrap:balance; } .grad-text{background:var(--grad-chameleon);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.14em;margin-right:-.1em} /* ============================================================ TICKER / TOPBAR */ .ticker{background:var(--k-ink);color:var(--k-paper);display:flex;align-items:center;overflow:hidden;height:38px} .ticker-label{ background:var(--brand-focus);color:var(--k-paper);font-family:var(--font-mono); font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:0 16px;height:38px;display:flex;align-items:center;gap:8px;flex:none; } .ticker-label i{width:6px;height:6px;border-radius:50%;background:var(--k-paper);animation:k-pulse 1.4s infinite} .ticker-track{overflow:hidden;flex:1} .ticker-move{display:flex;width:max-content;animation:k-marquee 38s linear infinite} .ticker-move span{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.06em;padding:0 22px;white-space:nowrap;color:rgba(255,255,255,.85)} .ticker-move span::after{content:'◆';margin-left:22px;color:var(--brand-primary)} .topbar{ position:sticky;top:0;z-index:100;background:var(--surface-glass); border-bottom:1px solid var(--line-glass);box-shadow:var(--shadow-glass-top); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } .topbar-in{ max-width:var(--wrap-max);margin:0 auto;padding:18px var(--wrap-pad); display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px; } .topbar-logo img{height:44px;width:auto} .nav{display:flex;gap:28px;font-size:14px;font-weight:600} .nav a{position:relative;padding:8px 0;opacity:.7;transition:opacity var(--dur-fast),color var(--dur-fast)} .nav a::after{content:'';position:absolute;bottom:2px;left:0;width:0;height:2px;background:var(--brand-primary);transition:width .3s} .nav a:hover,.nav a.on{opacity:1;color:var(--brand-primary)} .nav a:hover::after,.nav a.on::after{width:100%} .topbar-act{display:flex;align-items:center;gap:12px} .k-search{ background:var(--surface-page);border:1px solid var(--line);border-radius:var(--r-pill); padding:9px 18px;width:210px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--text-muted); } .live-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-focus);animation:k-pulse 1.4s infinite;flex:none} /* ---- mobilna traka: ikonica pretrage + dugme Meni ------------------- Na desktopu su dugmad skrivena, a .topbar-drop je display:contents, pa nav i topbar-act ostaju direktna djeca grida .topbar-in. */ .topbar-drop{display:contents} .topbar-mob{display:none;align-items:center;gap:8px} .icon-btn{ width:42px;height:42px;border-radius:50%;display:grid;place-items:center; border:1.5px solid var(--k-ink);color:var(--k-ink);background:transparent; transition:background var(--dur-fast),color var(--dur-fast); } .icon-btn:hover,.icon-btn[aria-expanded="true"]{background:var(--k-ink);color:var(--k-paper)} .icon-btn svg{width:18px;height:18px;display:block;fill:currentColor} .meni-x{width:14px;height:10px;position:relative;display:block;flex:none} .meni-x i{position:absolute;left:0;width:100%;height:2px;background:currentColor;transition:transform var(--dur-fast),opacity var(--dur-fast)} .meni-x i:nth-child(1){top:0} .meni-x i:nth-child(2){top:4px} .meni-x i:nth-child(3){top:8px} [aria-expanded="true"] .meni-x i:nth-child(1){transform:translateY(4px) rotate(45deg)} [aria-expanded="true"] .meni-x i:nth-child(2){opacity:0} [aria-expanded="true"] .meni-x i:nth-child(3){transform:translateY(-4px) rotate(-45deg)} /* traka napretka citanja */ .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:transparent} .progress i{display:block;height:100%;width:0;background:var(--grad-chameleon);transition:width .1s linear} /* ============================================================ LAYOUT ČLANKA */ .art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;padding-top:20px;align-items:start} .crumbs{ font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--text-faint);margin-bottom:22px; display:flex;gap:9px;flex-wrap:wrap;align-items:center; } .crumbs a{color:var(--text-muted);transition:color var(--dur-fast)} .crumbs a:hover{color:var(--brand-primary)} .crumbs span{color:var(--text-faint)} .art-head{max-width:860px} .art-cat{ font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--c,var(--cat-news)); display:inline-flex;align-items:center;gap:8px;margin-bottom:16px; } .art-cat i{width:7px;height:7px;border-radius:50%;background:currentColor} .art-head h1{ font-family:var(--font-display);font-weight:600;font-size:56px;line-height:1.02; letter-spacing:-.045em;font-variation-settings:"opsz" 96;margin-bottom:20px;text-wrap:balance; } .lede{font-size:20px;line-height:1.55;color:var(--text-muted);max-width:64ch;margin-bottom:26px} .byline{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .avatar{ width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--grad-tropic);color:var(--k-paper);position:relative;overflow:hidden; font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.02em; } .avatar::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.35),transparent 48%)} .avatar span{position:relative} .byline-who strong{font-size:14px;font-weight:700;display:block;margin-bottom:3px} .byline-who .meta{font-size:10px} .byline-share{margin-left:auto;position:relative} .share-list{display:flex;gap:8px;flex-wrap:wrap} /* Ikonica se pojavljuje tek na telefonu; ovdje je samo skrivena. */ .share-trg{ display:none;align-items:center;gap:7px; font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;border:1.5px solid var(--line);border-radius:var(--r-pill); padding:7px 13px;color:var(--text-muted);background:none;cursor:pointer; transition:border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast); } .share-trg svg{ width:15px;height:15px;fill:none;stroke:currentColor; stroke-width:1.9;stroke-linecap:round; } .share{ font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;border:1.5px solid var(--line);border-radius:var(--r-pill); padding:7px 14px;color:var(--text-muted); transition:border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast); } .share:hover, .share-trg:hover{border-color:var(--k-ink);color:var(--k-ink);transform:translateY(-1px)} .hero-fig{margin:32px 0 8px} .hero-img{ position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden; background:var(--c-wash,var(--wash-news));box-shadow:var(--shadow-md); } .hero-img::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--c,var(--cat-news));z-index:2} .hero-img::after{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 24% 26%,rgba(255,255,255,.3),transparent 48%), radial-gradient(circle at 78% 76%,rgba(22,22,43,.34),transparent 54%); } figcaption{ font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--text-faint); padding-top:12px;line-height:1.6; } /* ---------- TIJELO TEKSTA ---------- */ .art-body{max-width:68ch;font-size:18px;line-height:1.75;padding-top:22px} .art-body > * + *{margin-top:22px} /* Prvi element tijela je cesto naslov: njegov margin-top je sabirao sa padding-top-om tijela i odvajao ga od slike. */ .art-body > :first-child{margin-top:0} .art-body p{color:var(--text-body)} /* Naslovi u tekstu. Prvo su bili nestilizovani, pa prekrupni: h2 od 31px je na telefonu bio gotovo jednak naslovu clanka (30px) i sa 40px zraka iznad je lomio citanje na komade. Sada su velicine tijela teksta, samo podebljani — razlikuju se tezinom, ne krupnocom. AI pipeline u sadrzaj ubacuje i

(drugi naslov clanka), koji je ostajao nestilizovan i padao na preglednikovih 2em — zato je i on ovdje, samo jedan stepen iznad h2. */ .art-body h1, .art-body h2, .art-body h3, .art-body h4, .art-body h5, .art-body h6{ font-family:var(--font-display);font-weight:700;line-height:1.35; letter-spacing:-.015em;font-variation-settings:"opsz" 16; margin-top:26px;text-wrap:balance;color:var(--k-ink); } .art-body h1{font-size:21px} .art-body h2{font-size:19px} .art-body h3{font-size:18px} .art-body h4, .art-body h5, .art-body h6{font-size:18px} .art-body :is(h1,h2,h3,h4,h5,h6) + p{margin-top:8px} .art-body a{color:var(--k-ink);border-bottom:2px solid var(--brand-primary);transition:background var(--dur-fast)} .art-body a:hover{background:var(--brand-primary)} .art-body strong{font-weight:700} .art-body ul{display:flex;flex-direction:column;gap:11px;padding-left:2px} .art-body ul li{position:relative;padding-left:26px} .art-body ul li::before{ content:'';position:absolute;left:0;top:12px;width:8px;height:8px; border-radius:50%;background:var(--c,var(--cat-news)); } blockquote{ border-left:3px solid var(--brand-primary);padding:6px 0 6px 26px;margin:36px 0; font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.28; letter-spacing:-.03em;font-variation-settings:"opsz" 48; } blockquote cite{ display:block;font-family:var(--font-mono);font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint); font-style:normal;margin-top:14px; } .inline-fig{margin:36px 0} .inline-img{ position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden; background:var(--wash-lifestyle); } .inline-img::after{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.28),transparent 50%), linear-gradient(180deg,transparent 60%,rgba(22,22,43,.2) 100%); } /* oglasni slot (AdRotate) */ .ad{ margin:40px 0;border:1px dashed var(--line);border-radius:var(--r-md); background:var(--surface-page-alt);padding:20px;text-align:center; } .ad-lbl{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px} .ad-slot{ aspect-ratio:728/90;border-radius:var(--r-sm);background:var(--surface-card); border:1px solid var(--line);display:grid;place-items:center; font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--text-faint); } /* tagovi */ .tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)} .tag-pill{ font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;border:1.5px solid var(--line);border-radius:var(--r-pill); padding:7px 14px;color:var(--text-muted); transition:border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast); } .tag-pill:hover{border-color:var(--k-ink);color:var(--k-ink);transform:translateY(-1px)} /* autor */ .author-box{ margin-top:32px;background:var(--surface-card);border:1px solid var(--line); border-radius:var(--r-lg);padding:28px;display:grid;grid-template-columns:64px 1fr;gap:22px; } .author-box .avatar{width:64px;height:64px;font-size:22px} .author-box h4{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.03em;font-variation-settings:"opsz" 48;margin-bottom:5px} .author-box .meta{margin-bottom:10px} .author-box p{font-size:14px;color:var(--text-muted);line-height:1.55;margin-bottom:14px} .author-link{ font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--text-muted);display:inline-flex;align-items:center;gap:8px; transition:color var(--dur-fast),gap var(--dur-fast); } .author-link:hover{color:var(--brand-focus);gap:13px} /* prethodni / sljedeći */ .pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid);margin-top:32px} .pn-card{ background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-md); padding:20px 22px;transition:transform var(--dur-mid) var(--ease-out-soft),box-shadow var(--dur-mid); } .pn-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .pn-lbl{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:9px;display:block} .pn-card h5{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.2;letter-spacing:-.025em;font-variation-settings:"opsz" 24;text-wrap:balance} .pn-next{text-align:right} /* ============================================================ SIDEBAR */ .side{position:sticky;top:calc(var(--topbar-h) + 20px);display:flex;flex-direction:column;gap:var(--gap-grid)} .side-box{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px} .side-box h5{ font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--brand-primary); padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:4px; } .side-item{ display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start; padding:13px 0;border-bottom:1px solid var(--line); transition:padding-left var(--dur-mid) var(--ease-out-soft); } .side-item:last-child{border-bottom:none;padding-bottom:0} .side-item:hover{padding-left:6px} .side-num{ font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1.2; letter-spacing:-.04em;font-variation-settings:"opsz" 48;color:var(--c,var(--brand-primary)); } .side-item h6{font-size:14px;font-weight:600;line-height:1.32;margin-bottom:4px} .side-item:hover h6{color:var(--brand-focus)} .side-item .meta{font-size:10px} .side-ad{border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface-page-alt);padding:18px;text-align:center} .side-ad .ad-slot{aspect-ratio:300/250} .news-box{background:var(--surface-dark);border:none;position:relative;overflow:hidden;color:var(--text-on-dark)} .news-box::before{ content:'';position:absolute;bottom:-110px;right:-70px;width:300px;height:300px; border-radius:50%;background:var(--grad-chameleon);filter:blur(60px);opacity:.4; } .news-box > *{position:relative} .news-box h5{color:var(--brand-primary);border-bottom-color:var(--line-on-dark);margin-bottom:16px} .news-box h4{font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.15;letter-spacing:-.03em;font-variation-settings:"opsz" 48;color:var(--k-paper);margin-bottom:10px} .news-box p{font-size:13px;color:var(--text-on-dark-muted);line-height:1.5;margin-bottom:16px} .news-input{ width:100%;background:rgba(255,255,255,.07);border:1px solid var(--line-on-dark-strong); border-radius:var(--r-pill);padding:11px 18px;color:var(--k-paper); font-family:var(--font-body);font-size:14px;margin-bottom:10px; } .news-input::placeholder{color:var(--text-on-dark-faint)} .news-input:focus{outline:2px solid var(--brand-primary);outline-offset:1px;background:rgba(255,255,255,.12)} .news-btn{ width:100%;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;background:var(--brand-primary);color:var(--k-ink); border-radius:var(--r-pill);padding:12px;transition:background var(--dur-fast); } .news-btn:hover{background:var(--k-paper)} /* ============================================================ SRODNO */ .related{margin-top:var(--section-y)} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)} .card{ background:var(--surface-card);border-radius:var(--r-md);overflow:hidden; display:flex;flex-direction:column;box-shadow:var(--shadow-sm); transition:transform var(--dur-mid) var(--ease-out-soft),box-shadow var(--dur-mid); } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .card-img{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--c-wash,var(--wash-news))} .card-img::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--c,var(--brand-primary));z-index:2} .card-img::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,transparent 55%,rgba(22,22,43,.22) 100%), radial-gradient(circle at 72% 26%,rgba(255,255,255,.22),transparent 48%); } .card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1} .card-body .k-tag{color:var(--c,var(--brand-primary))} .card-body h5{ font-family:var(--font-display);font-weight:600;font-size:15px;line-height:1.2; letter-spacing:-.02em;font-variation-settings:"opsz" 24;text-wrap:balance; } .card-body .meta{margin-top:auto;font-size:10px} /* ============================================================ FOOTER / PLAYER */ .foot{background:var(--surface-card);border-top:1px solid var(--line);padding:72px 0 40px;margin-top:var(--section-y)} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid var(--line)} .foot-brand img{height:60px;width:auto;margin-bottom:18px} .foot-brand p{font-size:14px;color:var(--text-muted);max-width:420px;margin-bottom:20px;line-height:1.6} .foot-brand p strong{color:var(--brand-primary)} .freq{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.06em;line-height:1.9} .freq strong{color:var(--text-strong)} .foot-col h5{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-primary);margin-bottom:18px} .foot-col li{margin-bottom:10px} .foot-col a{font-size:14px;color:var(--text-muted);transition:color var(--dur-fast)} .foot-col a:hover{color:var(--text-strong)} .foot-bar{ padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--text-faint); } /* Potpis izradjivaca, desno u traci. Logo nosi ime firme, pa uz njega ide samo „Kreirao" — a link se ne podvlaci, jer podvucen logo izgleda kao greska. Logo ide na punoj snazi, bez prigusenja, i zadrzava svoju boju (#A8A8C8): to je tudja marka i nije na nama da je prebojimo. */ .foot-appit{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none} .foot-appit img,.foot-appit .appit-logo{height:22px;width:auto;display:block} .foot-appit:hover{color:var(--text-strong)} .player{ position:fixed;bottom:0;left:0;right:0;z-index:200;height:var(--player-h); background:var(--surface-glass);border-top:1px solid var(--line-glass); box-shadow:var(--shadow-glass-bottom);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:20px;padding:0 var(--wrap-pad); } .player-art{width:52px;height:52px;border-radius:10px;background:var(--grad-berry);position:relative;overflow:hidden} .player-art::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent 40%)} .player-show{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-primary);margin-bottom:4px;display:flex;align-items:center;gap:7px} .player-track{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.02em;font-variation-settings:"opsz" 24;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .player-ctrl{display:flex;align-items:center;gap:10px} /* Jacina zvuka u donjoj traci. Klizac je `input[type=range]` — pravi element, pa radi mišem, prstom i strelicama, i citaci ekrana ga znaju. Trazi se rucno stilizovanje jer podrazumijevani izgled ne postoji jedinstven: `-webkit-` i `-moz-` thumb se podesavaju odvojeno. */ .player-vol{display:flex;align-items:center;gap:9px} .player-vol svg{width:16px;height:16px;fill:var(--text-muted);flex:none;display:block} .vol-range{ -webkit-appearance:none;appearance:none; width:92px;height:4px;border-radius:2px;background:var(--line); cursor:pointer;flex:none; } .vol-range::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%; background:var(--k-ink);border:0;cursor:pointer; } .vol-range::-moz-range-thumb{ width:13px;height:13px;border-radius:50%;background:var(--k-ink);border:0;cursor:pointer; } .vol-range:focus-visible{outline:2px solid var(--brand-focus);outline-offset:3px} /* Na telefonu ga nema: traka je tijesna, a telefon ima svoja dugmad. */ @media (max-width:560px){ .player-vol{display:none} } .ctrl{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center; border:1.5px solid rgba(22,22,43,.25);color:var(--k-ink); transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast),border-color var(--dur-fast); } .ctrl:hover{background:var(--k-ink);color:var(--k-paper);border-color:var(--k-ink)} .ctrl-play{width:44px;height:44px;background:var(--k-ink);color:var(--k-paper);border-color:var(--k-ink)} .ctrl-play:hover{background:var(--brand-primary);color:var(--k-ink);border-color:var(--brand-primary);transform:scale(1.06)} /* ============================================================ RESPONSIVE */ @media (max-width:1180px){ /* minmax(0,1fr), ne 1fr: `1fr` je `minmax(auto,1fr)`, pa se staza ne smije skupiti ispod sadrzaja — jedna siroka tabela ili dugacak link u tekstu odgura cijeli clanak, zajedno sa potpisom i slikom, izvan ekrana. Ista zamka kao na TV ekranu i horizontalnim karticama. */ .art-wrap{grid-template-columns:minmax(0,1fr);gap:40px} .side{position:static} .art-head h1{font-size:42px} .grid4{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr;gap:32px} } @media (max-width:860px){ .topbar-in{grid-template-columns:1fr auto;gap:10px;padding:12px 16px;position:relative} .topbar-logo img{height:36px} .topbar-mob{display:flex} .topbar-drop{ display:none;position:absolute;top:100%;left:0;right:0; background:var(--k-paper);border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);padding:6px 16px 20px; max-height:calc(100dvh - 100%);overflow-y:auto; } .topbar-drop.je-otvoren{display:block} .topbar-drop .nav,.topbar-drop .topbar-act{display:none} .topbar-drop.mod-meni .nav{display:flex;flex-direction:column;gap:0;font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.02em} .topbar-drop .nav a{padding:14px 0;opacity:1;border-bottom:1px solid var(--line)} .topbar-drop .nav a::after{display:none} .topbar-drop.mod-pretraga .topbar-act{display:block;padding:8px 0} .topbar-drop .k-search,.topbar-drop .search-mini{display:block;width:100%;padding:13px 18px} .topbar-drop .btn-live{display:none} .art-head h1{font-size:32px} .lede{font-size:17px} .art-body{font-size:17px;padding-top:12px} /* Na uzem ekranu naslovi u tekstu idu punom sirinom reda: `balance` izjednacava duzine redova, pa je naslov od tri reda izgledao uvucen u odnosu na sliku i tekst oko sebe. */ .art-body :is(h1,h2,h3,h4,h5,h6){text-wrap:wrap} .art-body h1{font-size:19px} .art-body h2{font-size:18px} .art-body h3,.art-body h4{font-size:17px} .art-body h5,.art-body h6{font-size:17px} .art-body :is(h1,h2,h3,h4,h5,h6){margin-top:22px} blockquote{font-size:21px} /* Dijeljenje se skuplja pod jednu ikonicu cim potpis izgubi bocnu kolonu. Ranije je to bilo tek ispod 560px, pa je na sirem telefonu i tabletu pet oznaka prelamalo u drugi red ispod imena autora. Sada je ikonica u istom redu sa imenom, datumom i vremenom citanja, a mreze su u padajucem meniju (ili u sistemskom share listu, ako preglednik ima navigator.share). */ .byline{ flex-wrap:nowrap } .byline-who{ min-width:0 } .byline-share{ margin-left:auto;width:auto } .share-trg{ display:inline-flex } .share-list{ display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:40; flex-direction:column;gap:0;align-items:stretch;min-width:172px; background:var(--k-paper);border:1px solid var(--line); border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:5px; } .byline-share.je-otvoren .share-list{ display:flex } .share-list .share{ border:0;border-radius:var(--r-sm);text-align:left;padding:10px 12px; font-size:10px;letter-spacing:.09em; } .share-list .share:hover{ transform:none;background:var(--surface-page-alt) } .pn{grid-template-columns:1fr} .pn-next{text-align:left} .author-box{grid-template-columns:1fr;gap:16px} /* Marka preko obje kolone, tri bloka linkova ispod nje — jedna kolona je ovdje davala nepotrebno dugacko podnozje. */ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} .player{grid-template-columns:52px 1fr auto;padding:0 16px} } @media (max-width:560px){ .grid4{grid-template-columns:1fr} } /* ── Plejer na telefonu ──────────────────────────────────────────── Omot je 52px čiste dekoracije. Na telefonu se skida pa linija „Uživo · 102,7 · N slušalaca" dobije punu širinu i stane cijela. Traka ostaje u jednom redu — fiksna je i ne smije pojesti ekran. */ @media (max-width:560px){ :root{--body-pad-bottom:calc(96px + env(safe-area-inset-bottom,0px))} .player{ height:auto;min-height:var(--player-h); grid-template-columns:minmax(0,1fr) auto; padding:0 16px env(safe-area-inset-bottom,0px); } .player-art{display:none} .player-info{min-width:0} } /* ══════════════ ZBIJANJE NA TELEFONU ══════════════ Razmaci su racunati za desktop, gdje 64px izmedju sekcija i 32px sa strana izgledaju mirno. Na ekranu od 390px to pojede skoro polovinu sirine i gurne sadrzaj daleko nadolje. Sve ispod je samo zbijanje — nijedna komponenta ne mijenja izgled ni redoslijed. */ @media (max-width:560px){ /* 16px je rub koji topbar i plejer vec koriste; sad ga koristi i sadrzaj, pa je linija ivice ista kroz cijelu stranicu. */ :root{ --wrap-pad:16px; --section-y:34px } .sec-head{ margin-bottom:18px } /* Oglas je imao 40px razmaka gore i dolje plus 20px unutrasnjeg — 120px oko jedne trake. */ .ad{ margin:20px 0;padding:10px } .ad-lbl{ margin-bottom:7px } /* Podnozje na telefonu: logo, cetiri obavezna linka, potpis — sve centrirano u jednoj koloni. Cetiri bloka jedan ispod drugog davala su traku dugu gotovo koliko i sam sadrzaj, pa se sklanja sve sto se na telefonu ne cita: opis stanice, frekvencije, „Stranice" i drustvene mreze. Frekvencije stoje na naslovnoj i u plejeru, mreze u topbaru — nista se ne gubi. Desktop ostaje nedirnut. */ .foot{ padding:26px 0 18px;text-align:center } .foot-grid{ display:block;padding-bottom:16px } .foot-brand p, .foot-col h5, .foot-col--stranice, .foot-col--mreze, .fl-o-nama{ display:none } .foot-brand img{ display:block;height:40px;margin:0 auto 16px } /* Linkovi u jedan centriran red koji se lomi — uspravna lista od cetiri stavke je ovdje bila najduzi dio podnozja. */ .foot-col--info ul{ display:flex;flex-wrap:wrap;justify-content:center;gap:9px 18px } .foot-col--info li{ margin:0 } .foot-col--info a{ font-size:13px } /* Tri stavke u traci su se na 390px lomile u tri reda razbacana po sirini; uspravno je isti broj redova, ali poravnat. */ .foot-bar{ padding-top:14px;flex-direction:column;align-items:center; gap:7px;font-size:10px;letter-spacing:.06em; } } /* ── Clanak na telefonu: naslov, slika, pa odmah tekst ──────────── Cilj je da se na prvom ekranu vide naslov i slika, a da donja polovina ekrana vec bude tekst. Redoslijed se mijenja samo ovdje: u DOM-u je uobicajen (nadnaslov, naslov, podnaslov, potpis, slika), a na telefonu podnaslov silazi ispod slike i postaje prvi tekst koji citalac vidi. Zato je clanak flex kolona — bez toga `order` nema dejstva. Putanja se sklanja: na telefonu je lomila u dva reda, a nazad vodi dugme preglednika. Na desktopu ostaje. */ @media (max-width:560px){ .crumbs{ display:none } .art-wrap{ padding-top:10px;gap:28px } .art-wrap > article{ display:flex;flex-direction:column } .art-wrap > article > *{ order:5 } .art-head{ order:1 } .byline{ order:2 } .hero-fig{ order:3 } .lede{ order:4 } .art-body{ order:5 } .tags{ order:6 } .author-box{ order:7 } .pn{ order:8 } /* Rubrika je bila inline-flex: red teksta oko nje dodavao je jos desetak piksela praznog zraka ispod zaglavlja. Kao blok-flex nema poluvodjenja, pa je razmak tacno onaj koji je zadan. */ .art-cat{ display:flex;width:max-content;margin-bottom:6px;font-size:10px } .art-head h1{ font-size:27px;margin-bottom:0 } .lede{ font-size:16px;margin:12px 0 0 } /* Potpis je jedan red iznad slike: avatar je 42px dekoracije koja diktira visinu. Ostaju ime, datum i ikonica za dijeljenje — skupljanje mreza pod tu ikonicu radi vec od 860px (vidi gore). */ .byline{ margin-top:10px;padding:9px 0;gap:9px } .avatar{ display:none } .byline-who strong{ margin-bottom:1px } .share-trg{ padding:8px 10px } .share-trg svg{ width:16px;height:16px } .hero-fig{ margin:12px 0 0 } .art-body{ padding-top:8px } .art-body > * + *{ margin-top:16px } .art-body :is(h1,h2,h3,h4,h5,h6){ margin-top:20px } .tags{ margin-top:26px;padding-top:20px } .pn{ margin-top:22px } .related{ margin-top:var(--section-y) } .author-box{ margin-top:26px } } /* ── Paginacija ─────────────────────────────────────────────────── Zajednicka komponenta: ispisuje je `kameleon_paginacija()` na arhivi, pretrazi, arhivi emisija i kroz index.php. Zato stoji ovdje, u theme.css, a ne samo u CSS-u pojedinih stranica — inace ostane bez stilova tamo gdje se nije ocekivala (arhiva dogadjaja). */ .pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap} .pg{ min-width:44px;height:44px;padding:0 14px;border-radius:var(--r-pill); border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em; color:var(--text-muted);font-variant-numeric:tabular-nums; transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast); } .pg:hover{border-color:var(--k-ink);color:var(--k-ink);transform:translateY(-1px)} .pg.on{background:var(--k-ink);border-color:var(--k-ink);color:var(--k-paper)} .pg-gap{color:var(--text-faint);padding:0 4px;font-family:var(--font-mono);font-size:12px} .pager-note{width:100%;text-align:center;margin-top:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)} /* Paginacija na telefonu: brojevi zauzimaju tri reda i nemaju smisla kad rubrika ima 800 strana. Ostaju samo strelice, a izmedju njih stoji „Stranica X od Y" — jedan red, sve jasno. */ @media (max-width:560px){ .pager{gap:10px;flex-wrap:nowrap} /* Samo brojevi stranica, koje WordPress ispisuje kao /. Strelice u plejlisti epizoda su