/* BKH chrome — paleta, font, header/footer, ispravke clanka. */ /* BKH chrome — paleta, font, header/footer, ispravke clanka. Konsolidovano. */ /* varijable koje su ranije dolazile iz bkat.css (sada se ne ucitava) */ :root{--bk-measure:790px;--bk-radius:14px;--bk-radius-lg:20px;--bk-white:#FFFFFF;--bk-shadow:0 1px 2px rgba(28,28,33,.04), 0 8px 24px rgba(28,28,33,.06);--bk-shadow-lg:0 2px 4px rgba(28,28,33,.05), 0 18px 44px rgba(28,28,33,.10)} @font-face{font-family:'Hanken Grotesk';src:url(/assets/fonts/hanken-var.woff2) format('woff2');font-weight:100 900;font-display:swap} @font-face{font-family:'Archivo';src:url(/assets/fonts/archivo-var.woff2) format('woff2');font-weight:100 900;font-display:swap} /* ============================================================ BKH CHROME — samo header i footer, za stranice clanaka. Ucitava se POSLIJE tbk-base.css i bkat.css. Namjerno NEMA globalnih pravila (nema *, body, h1-h4), da ne dira izgled samog clanka. Selektori su vezani klasama .bkh-hdr / .bkh-ftr, jer stranice clanaka vec imaju svoj
. ============================================================ */ /* ---------- traka na vrhu ---------- */ .bkh-top{background:#242A30;color:#ECE8E0;font-family:'Hanken Grotesk',system-ui,sans-serif} .bkh-top .bkh-wrap{display:flex;align-items:center;justify-content:center;gap:11px;height:38px;font-size:12.5px;font-weight:500;overflow:hidden;letter-spacing:-.006em} .bkh-top .bkh-sep{opacity:.4} .bkh-wrap{max-width:1180px;margin:0 auto;padding:0 20px} /* ---------- header + mobilni meni (kao myfrenchie) ---------- */ .bkh-hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #E6E6E9;font-family:'Hanken Grotesk',system-ui,sans-serif;letter-spacing:-.006em} .bkh-hdr .bkh-bar{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px} .bkh-hdr .bkh-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#1C1C21} .bkh-hdr .bkh-logo img{height:46px;width:auto;display:block} .bkh-hdr .bkh-logo b{line-height:1.15;display:block} .bkh-hdr .bkh-logo i{display:block;font-style:normal;text-transform:uppercase} .bkh-hdr .bkh-nav{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0} .bkh-hdr .bkh-nav li{margin:0;padding:0;list-style:none} .bkh-hdr .bkh-nav a{font-size:14.5px;font-weight:600;color:#1C1C21;white-space:nowrap;text-decoration:none;padding:5px 0;border-bottom:2px solid transparent;display:inline-block} .bkh-hdr .bkh-nav a:hover{color:#363C42} .bkh-hdr .bkh-nav a[aria-current="page"]{border-bottom-color:#363C42} .bkh-scrim,.bkh-nav-head{display:none} .bkh-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#1C1C21;cursor:pointer;padding:0 6px} .bkh-mlabel{font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1} /* ---------- footer ---------- */ .bkh-ftr{background:#000;color:#fff;padding:54px 0 30px;margin-top:0;font-family:'Hanken Grotesk',system-ui,sans-serif;letter-spacing:-.006em;line-height:1.55} .bkh-ftr .bkh-fgrid{display:grid;gap:30px;grid-template-columns:1fr;margin-bottom:32px} .bkh-ftr h3{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:0 0 14px} .bkh-ftr ul{list-style:none;display:grid;gap:9px;margin:0;padding:0} .bkh-ftr li{margin:0;padding:0;list-style:none} .bkh-ftr a{font-size:13.5px;color:rgba(255,255,255,.85);text-decoration:none} .bkh-ftr a:hover{color:#fff} .bkh-ftr .bkh-fbrand img{height:64px;width:auto;margin-bottom:8px;display:block} .bkh-ftr .bkh-fbrand p{color:rgba(255,255,255,.7);font-size:14px;line-height:1.65;max-width:34ch;margin:18px 0 0} .bkh-ftr .bkh-fbrand p::before{content:"";display:block;width:54px;height:2px;background:#EFE7D9;opacity:.5;border-radius:2px;margin-bottom:18px} .bkh-ftr .bkh-fbot{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,.6)} /* ---------- font: isti par kao myfrenchie (Hanken Grotesk + Archivo) ---------- bkat.css koristi var(--bk-font) na vise mjesta, pa je dovoljno pregaziti varijablu. */ :root{--bk-font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif} body,.tbk-article-page,.tbk-lp,.tbk-article-content{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:-.006em} .tbk-article-header h1{font-weight:900;letter-spacing:-.02em} .tbk-article-content h2{font-weight:800;letter-spacing:-.012em} .tbk-article-content h3{font-weight:800;letter-spacing:-.01em} /* ============================================================ BREND BOJE — antracit + bez, na cijelom sajtu. Stari skin je imao dvije palete: narandzastu iz tbk-base (--tbk-orange #df6c4b, 27 upotreba) i bakarnu iz bkat (--bk-accent #C88A4A). Varijable u tbk-base NISU u :root nego u .tbk-*-page, pa se moraju pregaziti na istim selektorima. ============================================================ */ .tbk-article-page,.tbk-legal-page,.tbk-magazine-home,.tbk-lp{--tbk-black:#1C1C21;--tbk-body:#4C525A;--tbk-muted:#6B6B72;--tbk-line:#E6E6E9;--tbk-soft:#F5F5F6;--tbk-note:#F7F2E9;/* bila blijedo roza, sada bez */ --tbk-orange:#363C42;/* akcent:antracit umjesto narandzaste */ --tbk-blue:#242A30;--tbk-bg:#FFFFFF;--tbk-card:#FFFFFF;--tbk-shadow:0 14px 32px rgba(28,28,33,.07)} :root{--bk-base:#363C42;--bk-base-dark:#242A30;--bk-dark:#1C1C21;--bk-body:#4C525A;--bk-muted:#6B6B72;--bk-bg:#F7F2E9;--bk-light:#EFE7D9;--bk-soft:#F7F7F8;--bk-accent:#363C42;/* bakarna -> antracit */ --bk-accent-dark:#242A30;--bk-border:#E6E6E9;--bk-line:#EFE9DF} /* ---------- kontrast: bijeli tekst na antracit podlozi ---------- tbk-base postavlja color:#fff na te naslove, ali bkat.css se ucitava poslije i pregazi ih u sivo (--bk-muted). Na antracitu to je neciljivo. Ovo vraca bijelu, ali samo tamo gdje je podloga tamna. */ .tbk-sidebar-widget h3, .tbk-sidebar-widget > strong, .tbk-sidebar-widget h2, .tbk-legal-sidebar-card h2, .tbk-feature-badge, .tbk-card-link:hover{color:#FFFFFF} /* naslovi u bocnoj koloni koji NEMAJU tamnu podlogu ostaju prigušeni */ .tbk-sidebar-widget > p:first-child{color:#6B6B72} /* ---------- bocna kolona: slicice su sada pravi ---------- bkat.css je skracenim zapisom "background:" brisao background-image iz klasa tema. Sada slika ide kao , pa toga vise nema. */ .tbk-sidebar-recent__image{width:62px;height:62px;border-radius:10px;overflow:hidden;background:#F3EFE8;flex:none} .tbk-sidebar-recent__image img{width:100%;height:100%;object-fit:cover;display:block} /* ---------- svjetlija bez pozadina ---------- */ :root{--bk-bg:#FBF9F5;--bk-light:#F4EFE6} .tbk-article-page,.tbk-legal-page,.tbk-magazine-home,.tbk-lp{--tbk-note:#FBF9F5} body{background:#FBF9F5} /* ---------- FAQ: kao kod myfrenchie ---------- Stari stil nije imao nijedno pravilo za , pa je stajao podrazumijevani trougao preglednika. */ .tbk-article-section.tbk-faq h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:20px} .tbk-faq-list{display:grid;gap:10px;margin-top:18px;max-width:760px} .tbk-faq-item{background:#fff;border:1px solid #E6E6E9;border-radius:12px;padding:2px 16px;overflow:visible;transition:border-color .15s} .tbk-faq-item:hover{border-color:#D5D5DA} .tbk-faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:15px;font-weight:600;color:#1C1C21;padding:15px 0;cursor:pointer;list-style:none} .tbk-faq-item summary::-webkit-details-marker{display:none} .tbk-faq-item summary::marker{content:""} .tbk-faq-item summary::after{content:"+";color:#6B6B72;font-size:20px;font-weight:400;line-height:1;flex:none} .tbk-faq-item[open] summary::after{content:"–"} .tbk-faq-answer{padding:0 0 15px;color:#6B6B72;font-size:14.5px;line-height:1.65} .tbk-faq-answer p{margin:0 0 .7em} .tbk-faq-answer p:last-child{margin-bottom:0} .tbk-article-content .tbk-article-inline-figure img, .tbk-article-content figure:not(.tbk-article-hero) img, .tbk-article-content > img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid #E6E6E9} .tbk-article-content .tbk-article-inline-figure figcaption, .tbk-article-content figure:not(.tbk-article-hero) figcaption{max-width:var(--bk-measure);font-size:13.5px;color:#6B6B72;line-height:1.55;margin-top:9px} /* ============================================================ 1) APPLE SISTEMSKI FONT — tbk-base ga tvrdo postavlja na dva mjesta (.tbk-article-author-card + .tbk-lp .tbk-share-link span). ============================================================ */ .tbk-article-author-card,.tbk-author-panel,.tbk-author, .tbk-lp .tbk-share-link span,.tbk-share-link,.tbk-share-link span, .tbk-article-meta,.tbk-article-meta-item,.tbk-article-meta-item b{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important} /* ============================================================ JEDNA KOLONA ZA SVE — tekst, slike, kartice, autor. Prije je svaki element imao svoju max-width (p i li na 68ch, figure bez ogranicenja, kartice na 68ch), pa su se razilazili. Sada sirinu drzi SAMO kolona, a sve unutra je 100%. ============================================================ */ .tbk-article-content{max-width:var(--bk-measure)} .tbk-article-content p, .tbk-article-content li, .tbk-article-content h2, .tbk-article-content h3, .tbk-article-content ul, .tbk-article-content ol{max-width:none} .tbk-article-content .tbk-article-inline-figure figcaption{max-width:100%} /* ---------- JEDNA SIRINA KOLONE ZA CIJELI CLANAK ---------- var(--bk-measure) je u 'ch', a ch ovisi o velicini slova SAMOG elementa. Uvod je 18px, tijelo 17px, meta 15px -> isti broj ch daje tri razlicite sirine i elementi se razilaze. Zato jedna mjera u pikselima. */ .tbk-article-main{--bkh-col:790px} .tbk-article-content > *{max-width:100%} /* ============================================================ JEDAN STIL PASUSA ZA CIJELI CLANAK tbk-base ima tri pravila s razlicitim vrijednostima: .tbk-lp h2 + p 16px / 1.55 <- gadja PRVI pasus poslije naslova .tbk-lp p 16px / 1.58 .tbk-article-section p 16.6px / 1.68 Prvo ima vecu specificnost pa je prvi pasus svake sekcije bio sitniji i zbijeniji od ostalih. Ovdje se izjednacavaju. ============================================================ */ .tbk-lp .tbk-article-content p, .tbk-lp .tbk-article-section p, .tbk-lp .tbk-article-content h2 + p, .tbk-lp .tbk-article-section h2 + p, .tbk-article-content p, .tbk-article-section p{font-size:1.04rem;line-height:1.68;color:var(--tbk-body);margin:0 0 19px;max-width:none} .tbk-lp .tbk-article-content li, .tbk-article-content li{font-size:1.04rem;line-height:1.68;max-width:none} /* hero slika: ista kolona kao tekst */ .tbk-article-hero, .tbk-article-hero__image, .tbk-article-hero img{max-width:var(--bkh-col);width:100%} .tbk-article-hero{margin-left:0;margin-right:0} .tbk-article-hero figcaption{max-width:var(--bkh-col)} /* ============================================================ MOBILNO: raspored iznad autora 1) Aktualisiert + Lesezeit zajedno u jednom redu 2) ikonice ISPOD njih, centrirane 3) kartica autora uza, ime u istoj liniji s natpisom ============================================================ */ /* ---------- zaglavlje: logo i hamburger kao na .at ---------- */ .bkh-hdr .bkh-logo img{height:58px} .bkh-hdr .bkh-logo b{font-size:15px;letter-spacing:.02em;text-transform:uppercase;font-weight:800} .bkh-hdr .bkh-logo i{font-size:14px;letter-spacing:.02em;color:#363C42;margin-top:1px;font-weight:800} .bkh-burger{border:1px solid #E6E6E9;border-radius:12px;background:#fff;min-width:66px;height:56px} .bkh-burger:hover{background:#FBF9F5;border-color:#D5D5DA} .bkh-burger svg{width:34px;height:34px} .bkh-mlabel{font-size:13px} /* ---------- slike u tekstu: TACNO sirina teksta ---------- Nijedan stylesheet ne postavlja margin za
, pa vrijedi podrazumijevani margin:1em 40px preglednika -> slika je bila uvucena 40px s obje strane i time uza od teksta. */ .tbk-article-content figure, .tbk-article-content .tbk-article-inline-figure{margin-left:0;margin-right:0;width:100%;max-width:100%} .tbk-article-content figure img, .tbk-article-content .tbk-article-inline-figure img{width:100%;max-width:100%;height:auto;display:block} .tbk-article-content figure figcaption{margin-left:0;margin-right:0;max-width:100%} @media (max-width:1023px){.bkh-burger{display:flex}.bkh-hdr{backdrop-filter:none}.bkh-navwrap{position:fixed;inset:0;z-index:100;visibility:hidden;opacity:0;transition:opacity .25s}.bkh-toggle:checked ~ .bkh-navwrap{visibility:visible;opacity:1}.bkh-scrim{display:block;position:absolute;inset:0;background:rgba(20,23,26,.5)}.bkh-panel{position:absolute;top:0;left:0;bottom:0;width:min(86vw,340px);background:#fff;transform:translateX(-100%);transition:transform .28s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;overflow-y:auto}.bkh-toggle:checked ~ .bkh-navwrap .bkh-panel{transform:none}.bkh-nav-head{display:flex;align-items:center;justify-content:space-between;padding:15px 12px 14px 20px;border-bottom:1px solid #E6E6E9}.bkh-nav-head span{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#A6A6AD}.bkh-x{width:40px;height:40px;border:0;background:none;border-radius:11px;color:#1C1C21;display:grid;place-items:center;cursor:pointer;padding:0}.bkh-x svg{width:22px;height:22px}.bkh-x:hover{background:#F0F0F2}.bkh-hdr .bkh-nav{flex-direction:column;align-items:stretch;gap:0;padding:6px 0}.bkh-hdr .bkh-nav a{font-size:17px;padding:14px 20px;border-bottom:1px solid #F0F0F2;border-radius:0;white-space:normal;display:block}.bkh-hdr .bkh-nav a[aria-current="page"]{border-bottom-color:#F0F0F2;color:#363C42}.bkh-hdr .bkh-bar{height:78px}.bkh-hdr .bkh-logo img{height:56px}.bkh-hdr .bkh-logo b{font-size:14px}.bkh-hdr .bkh-logo i{font-size:13px}} @media (max-width:767.98px){body{font-size:17px}.tbk-lp .tbk-article-content p, .tbk-lp .tbk-article-section p, .tbk-lp .tbk-article-content h2 + p, .tbk-lp .tbk-article-section h2 + p, .tbk-lp .tbk-article-content li, .tbk-article-content p,.tbk-article-section p,.tbk-article-content li{font-size:17px;line-height:1.72;color:var(--tbk-body)}.tbk-article-deck{font-size:17.5px;line-height:1.6}.tbk-article-header h1{font-size:30px;line-height:1.15}.tbk-lp .tbk-article-content h2,.tbk-article-content h2,.tbk-article-section h2{font-size:23px}.tbk-article-content h3{font-size:19px}.tbk-article-content table{font-size:15px}.tbk-faq-item summary{font-size:16px}.tbk-faq-answer{font-size:15.5px;line-height:1.7}} @media (max-width:640px){.bkh-top .bkh-wrap{font-size:11px;gap:8px}.bkh-top .bkh-hidesm{display:none}} @media (max-width:430px){.bkh-hdr .bkh-logo img{height:48px}.bkh-hdr .bkh-logo b{font-size:12.5px}.bkh-hdr .bkh-logo i{font-size:11.5px}.bkh-burger{min-width:58px;height:50px}.bkh-burger svg{width:30px;height:30px}.bkh-mlabel{font-size:11.5px}} @media (min-width:720px){.bkh-ftr .bkh-fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr}} /* ---------- stranica clanka: bijela podloga, kartice se ocrtavaju ---------- Bez ovoga su kartice bile bez na bez pozadini i stapale su se. */ body,.tbk-article-page,.tbk-lp{background:#FFFFFF} .tbk-product-info-card{background:#FFFFFF;border:1px solid #E4E4E7;border-radius:12px; padding:15px 17px 16px} .tbk-product-info-card b{display:block;margin:0 0 7px;font-size:11px;font-weight:800; letter-spacing:.075em;text-transform:uppercase;color:#1C1C21;line-height:1.35} .tbk-product-info-card span{display:block;font-size:15px;line-height:1.55;color:#4C525A} .tbk-product-info-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr)); margin:20px 0 0} @media(max-width:620px){.tbk-product-info-grid{grid-template-columns:1fr;gap:12px}} .tbk-product-brief__note{margin:20px 0 0;padding:15px 18px;background:#FBF6F2; border-left:4px solid #363C42;border-radius:0 10px 10px 0;font-size:15px;line-height:1.6; color:#4C525A} /* manji radijus na pilulama i ikonicama za dijeljenje */ .tbk-article-meta-item{border-radius:6px} .tbk-lp .tbk-article-share,.tbk-article-share{border-radius:6px} /* mobilno: kartica autora samo s bitnim podacima — biografija se izostavlja */ @media(max-width:620px){ .tbk-article-author-card{align-items:center;gap:11px} .tbk-article-avatar{width:42px;height:42px} } /* mobilno: ram s ikonicama za dijeljenje centriran */ @media(max-width:620px){ .tbk-article-meta > .tbk-article-meta-row:last-child{justify-content:center} .tbk-article-share{margin-left:auto;margin-right:auto;justify-content:center} } /* desktop: ikonice u istom redu s datumom, iznad autora. Ikonice su u HTML-u u drugom redu zajedno s karticom autora, pa taj red rasklapamo s display:contents da oba udju u mrezu. */ @media(min-width:621px){ .tbk-article-meta{display:grid;grid-template-columns:1fr auto;align-items:center; gap:14px 16px;grid-template-areas:"meta share" "author author"} .tbk-article-meta > .tbk-article-meta-row:first-child{grid-area:meta;display:flex; flex-wrap:wrap;gap:10px;justify-content:flex-start} .tbk-article-meta > .tbk-article-meta-row:last-child{display:contents} .tbk-article-author-card{grid-area:author} .tbk-article-share{grid-area:share;justify-self:end;margin:0} } /* ---------- JEDNA SIRINA ZA CIJELI CLANAK ---------- Bilo je tri: 790px (meta/uvod/H1), 700px (hero), 68ch (~647px, tekst). 68ch je promjenjiv jer ovisi o velicini slova elementa, pa se sve razilazilo. */ .tbk-article-breadcrumbs, .tbk-article-header h1, .tbk-article-deck, .tbk-article-meta, .tbk-article-content, .tbk-article-hero, .tbk-article-hero__image, .tbk-article-hero img, .tbk-article-hero figcaption{max-width:var(--bkh-col);width:100%} /* ---------- tabela gewicht ---------- */ .tbk-tabwrap{overflow-x:auto;border:1px solid #E4E4E7;border-radius:12px;margin:20px 0 0; background:#fff;-webkit-overflow-scrolling:touch} table.tbk-gewicht{width:100%;border-collapse:collapse;font-size:15px;min-width:560px} table.tbk-gewicht th,table.tbk-gewicht td{padding:12px 14px;text-align:left;vertical-align:top; border-bottom:1px solid #EFEFF1} table.tbk-gewicht thead th{background:#F7F5F1;font-size:11px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:#1C1C21;white-space:nowrap;border-bottom:1px solid #E4E4E7} table.tbk-gewicht tbody th{font-weight:700;color:#1C1C21;white-space:nowrap;width:1%} table.tbk-gewicht td{color:#4C525A;font-variant-numeric:tabular-nums} table.tbk-gewicht td:nth-child(2),table.tbk-gewicht td:nth-child(3){font-weight:600;color:#1C1C21; white-space:nowrap} table.tbk-gewicht .tbk-both{color:#1C1C21;font-weight:600} table.tbk-gewicht tbody tr:last-child th,table.tbk-gewicht tbody tr:last-child td{border-bottom:0} table.tbk-gewicht tbody tr:hover th,table.tbk-gewicht tbody tr:hover td{background:#FBFAF8} /* mobilno: tabela se razlaze u kartice — bez vodoravnog klizanja */ @media(max-width:620px){ .tbk-tabwrap{border:0;border-radius:0;background:none;overflow:visible} table.tbk-gewicht{min-width:0;display:block;font-size:15px} table.tbk-gewicht thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} table.tbk-gewicht tbody,table.tbk-gewicht tr{display:block} table.tbk-gewicht tr{background:#fff;border:1px solid #E4E4E7;border-radius:12px; padding:12px 14px 13px;margin:0 0 10px} table.tbk-gewicht tbody th{display:block;width:auto;padding:0 0 9px;border:0; font-size:16px;font-weight:800;color:#1C1C21} table.tbk-gewicht td{display:flex;gap:10px;align-items:baseline;padding:5px 0;border:0; white-space:normal} table.tbk-gewicht td::before{content:attr(data-label);flex:0 0 42%;font-size:11px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;color:#8A8F96;line-height:1.5} table.tbk-gewicht td:nth-child(2),table.tbk-gewicht td:nth-child(3){white-space:normal} table.tbk-gewicht tbody tr:hover th,table.tbk-gewicht tbody tr:hover td{background:transparent} } /* tabela: cist zavrsetak — pozadina reda se sijece po zaobljenju okvira */ .tbk-tabwrap{overflow:hidden;overflow-x:auto} table.tbk-gewicht{margin:0;border-radius:inherit} table.tbk-gewicht tbody tr:nth-child(even) th, table.tbk-gewicht tbody tr:nth-child(even) td{background:#FBFAF8} table.tbk-gewicht tbody tr:hover th, table.tbk-gewicht tbody tr:hover td{background:#F5F2EC} @media(max-width:620px){ table.tbk-gewicht tbody tr:nth-child(even) th, table.tbk-gewicht tbody tr:nth-child(even) td{background:transparent} } /* ---------- citirane izjave: koso i tanje, da se isticu ---------- */ .zitat{font-style:italic;font-weight:350;color:#3A4046;font-synthesis-style:auto} .tbk-article-content .zitat,.tbk-lp .zitat{letter-spacing:.002em} /* ---------- tudja etiketa: navodnici sitniji i tisi ---------- Znakovi se crtaju kroz CSS pa im se moze zadati velicina i boja. */ .etikett .q{font-size:.85em;color:#8A8F96} .etikett .q:first-child{vertical-align:.06em;margin-right:.02em} .etikett .q:last-child{vertical-align:.3em;margin-left:.02em} /* ---------- Ratgeber pregled ---------- */ .rgrp{margin:0 0 34px} .rgrp h2{margin:0 0 6px} .rsub{margin:0 0 14px;color:#6B6B72;font-size:15px} .rlist{list-style:none;margin:0;padding:0;display:grid;gap:10px} .rlist li{margin:0} .rlist a{display:block;border:1px solid #E4E4E7;border-radius:12px;background:#fff; padding:14px 16px;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s} .rlist a:hover{border-color:#C9C9CF;box-shadow:0 16px 32px -26px rgba(28,28,33,.45);transform:translateY(-2px)} .rlist .rt{display:block;font-size:16px;font-weight:700;color:#1C1C21;line-height:1.35; letter-spacing:-.01em} .rlist .rd{display:block;margin-top:5px;font-size:14px;line-height:1.55;color:#6B6B72} .rlist .rz{display:inline-block;margin-top:9px;font-size:10.5px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:#8A8F96} @media(min-width:760px){.rlist{grid-template-columns:1fr 1fr}} @media(prefers-reduced-motion:reduce){.rlist a:hover{transform:none}} /* kartica je , pa nasljedjuje debljinu linkova iz osnove — vracamo normalnu */ .rlist a,.rlist a:hover{text-decoration:none;font-weight:400;color:inherit;background:#fff} .rlist .rt{font-weight:700} .rlist .rd{font-weight:400} /* podmeni: linkovi ne smiju nasljediti stil glavnih stavki (viša specifičnost) */ /* ---------- meni bez JavaScripta ---------- Otvaranje ide preko skrivenog polja i CSS-a, pa meni radi i kad skripta ne prodje. Skripta sluzi samo za tastaturu i Escape. */ .bkh-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0} .bkh-burger{-webkit-user-select:none;user-select:none} .bkh-burger:focus-visible,.bkh-x:focus-visible{outline:2px solid #363C42;outline-offset:2px} @media(max-width:1023px){ .bkh-toggle:checked ~ .bkh-navwrap{visibility:visible;opacity:1} .bkh-toggle:checked ~ .bkh-navwrap .bkh-panel{transform:none} }