/* -------------------------------------------------------------------------- znanost.ba — stil portala Jedna datoteka, bez vanjskih fontova i bez okvira: stranica se učitava iz jednog HTML-a i jednog CSS-a. -------------------------------------------------------------------------- */ :root { color-scheme: light; /* tamna tema je isključena */ --bg: #ffffff; /* ploha sadržaja */ --canvas: #e3e8f1; /* podloga oko plohe */ --bg-soft: #eef2f8; --bg-deep: #0b1120; --ink: #0d1526; --body: #35435c; --muted: #57677d; --line: #e1e7ef; --line-strong: #c8d2e0; --accent: #1d4ed8; --accent-soft: #eaf0ff; --accent-ink: #1e40af; --accent-2: #c2410c; /* topla, „uredničkaˮ boja: nadnaslovi i oznake */ --max: 1220px; --gut: 26px; /* bočna margina sadržaja */ --radius: 2px; /* novine, ne aplikacija */ --radius-ui: 3px; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: Georgia, "Iowan Old Style", "Times New Roman", serif; } /* Tamna tema je isključena — portal je uvijek svijetao, bez obzira na to što je postavljeno u operativnom sustavu. Paleta je sačuvana i pali se dodavanjem data-theme="dark" na . */ html[data-theme="dark"] { --bg: #0b1120; --canvas: #05090f; --bg-soft: #121a2b; --ink: #f1f5f9; --body: #c3cddd; --muted: #8d9cb3; --line: #1e293b; --line-strong: #2b3950; --accent: #7ba2ff; --accent-soft: #16203a; --accent-ink: #9db8ff; --accent-2: #fb923c; color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--canvas); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { color: var(--ink); font-weight: 800; letter-spacing: -.022em; line-height: 1.18; margin: 0; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); } /* Sadržaj stoji na bijelom „listu“ iznad sive podloge — rub stranice je vidljiv kao na tiskanim novinama, a ne beskrajno bijelo polje. */ main { display: flow-root; /* zadržava margine djece unutar bijele plohe */ max-width: var(--max); margin: 0 auto; background: var(--bg); border-left: 1px solid var(--line); border-right: 1px solid var(--line); } @media (min-width: 1260px) { main { box-shadow: 0 2px 28px rgba(13, 21, 38, .07); } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; } .skip:focus { left: 8px; top: 8px; } /* ------------------------------------------------------------- zaglavlje --- */ .topbar { background: var(--bg-deep); color: #93a4bd; font-size: 12px; } .topbar-in { display: flex; align-items: center; justify-content: space-between; height: 36px; gap: 18px; } .today { text-transform: lowercase; letter-spacing: .02em; } .topbar-links { display: flex; gap: 18px; align-items: center; } .topbar-links a { color: #93a4bd; } .topbar-links a:hover { color: #fff; } .topbar-links .rss { border: 1px solid #2b3950; padding: 2px 9px; border-radius: var(--radius-ui); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } /* Zaglavlje i navigacija stoje na istom bijelom „listu“ kao i sadržaj, pa sive margine teku od vrha stranice do podnožja. */ .masthead { background: transparent; } .masthead-in { display: flex; align-items: center; gap: 22px; padding-top: 22px; padding-bottom: 22px; background: var(--bg); border: 1px solid var(--line); border-bottom: 0; } .logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: -.045em; font-size: 34px; } .logo-text { display: inline-flex; align-items: baseline; } .logo-word { color: var(--ink); } .logo-suffix { color: var(--accent); } /* Znak portala — kvadrat s izrezanim „zˮ. */ .brand-mark { width: 1.06em; height: 1.06em; flex: none; color: var(--ink); border-radius: 3px; overflow: hidden; transition: color .2s ease, transform .2s ease; } .logo:hover .brand-mark, .nav-logo:hover .brand-mark { color: var(--accent); } .nav-logo:active .brand-mark { transform: scale(.94); } .tagline { flex: 1; margin: 0; padding-left: 20px; border-left: 1px solid var(--line); color: var(--muted); font-size: 13px; letter-spacing: .01em; } .search { display: flex; align-items: stretch; } .search input { border: 1px solid var(--line-strong); border-right: 0; background: var(--bg); color: var(--ink); padding: 10px 14px; font: inherit; font-size: 14px; border-radius: var(--radius-ui) 0 0 var(--radius-ui); min-width: 230px; } .search input:focus { outline: 2px solid var(--accent); outline-offset: -2px; } .search button { border: 0; background: var(--ink); color: #fff; padding: 0 18px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border-radius: 0 var(--radius-ui) var(--radius-ui) 0; } .search button:hover { background: var(--accent); } .search.big { margin-top: 18px; } .search.big input { min-width: 0; flex: 1; padding: 14px 16px; font-size: 16px; } /* ------------------------------------------------------------ navigacija --- */ .mainnav { position: sticky; top: 0; z-index: 40; background: transparent; } /* Kad se lista, traka se „odvojiˮ od sadržaja mekom sjenom. */ .nav-in { transition: box-shadow .25s ease; } .mainnav.scrolled .nav-in { box-shadow: 0 10px 22px -14px rgba(13, 21, 38, .55); } /* Tanka crta koja prati koliko je vijesti pročitano. */ .read-progress { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--accent-2); transform: scaleX(0); transform-origin: left; transition: transform .1s linear; pointer-events: none; z-index: 41; } body:not(.article-page) .read-progress { display: none; } .nav-in { position: relative; display: flex; align-items: stretch; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-bottom: 2px solid var(--ink); } /* Logo u traci: vidljiv čim zaglavlje odscrolla (i uvijek, ako nema skripte). */ .nav-logo { display: flex; align-items: center; gap: 9px; flex: none; font-weight: 900; font-size: 21px; letter-spacing: -.045em; text-transform: none; max-width: 190px; opacity: 1; overflow: hidden; white-space: nowrap; padding-right: 18px; margin-right: 2px; transition: max-width .8s cubic-bezier(.22, .61, .36, 1), opacity .45s ease, padding-right .8s cubic-bezier(.22, .61, .36, 1); } .mainnav.js:not(.scrolled) .nav-logo { max-width: 0; opacity: 0; padding-right: 0; } /* Naslov onoga što se upravo čita — puni traku kad se red s vijestima skupi. */ .nav-context { display: none; flex: 1; min-width: 0; padding: 0 14px; font-size: 13.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-links { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-links a { display: flex; align-items: center; white-space: nowrap; padding: 13px 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); border-bottom: 3px solid transparent; } .nav-links a { position: relative; border-bottom-color: transparent; } /* Podcrta se izvuče ispod rubrike na koju pokažete. */ .nav-links a::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--cat, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } .nav-links a:hover { color: var(--cat, var(--accent)); } .nav-links a:hover::after { transform: scaleX(1); } .nav-links a.active { color: var(--cat, var(--accent)); } .nav-links a.active::after { transform: scaleX(1); } /* Pretraga i izbornik u traci — rade i bez JavaScripta (
). */ .nav-tool { position: relative; display: flex; align-items: center; flex: none; } .nav-tool > summary { list-style: none; cursor: pointer; color: var(--ink); display: flex; align-items: center; padding: 0 12px; height: 100%; } .nav-tool > summary::-webkit-details-marker { display: none; } .nav-tool > summary:hover { color: var(--accent); } .nav-tool[open] > summary { color: var(--accent); background: var(--bg-soft); } .nav-tool svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .nav-panel { position: absolute; top: calc(100% + 2px); right: 0; z-index: 60; width: min(380px, calc(100vw - 24px)); background: var(--bg); border: 1px solid var(--line-strong); box-shadow: 0 14px 34px rgba(13, 21, 38, .16); padding: 16px; } .nav-panel .search input { min-width: 0; flex: 1; } .panel-title { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .panel-title + .panel-links { margin-bottom: 18px; } .panel-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .panel-links a { display: block; padding: 10px 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--ink); border-bottom: 0; border-left: 3px solid var(--cat, var(--line)); background: var(--bg-soft); } .panel-links a:hover { color: var(--accent); } .panel-links.secondary a { border-left-color: var(--line); color: var(--muted); background: transparent; } .nav-panel .panel-links a.active { color: var(--cat, var(--accent)); } /* --------------------------------------------------- traka najnovijih --- */ /* Ispod izbornika teče red s najsvježijim naslovima koji se sami izmjenjuju. Ako urednik upiše izdvojenu vijest, ona zauzme to mjesto. */ /* Red s rubrikama na telefonu — izvan ljepljive trake, odlazi sa stranicom. */ .subnav { display: none; } .subnav-in { display: flex; overflow-x: auto; scrollbar-width: none; background: var(--bg); border: 1px solid var(--line); border-top: 0; } .subnav-in::-webkit-scrollbar { display: none; } .subnav a { position: relative; display: flex; align-items: center; white-space: nowrap; padding: 13px 13px 12px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .subnav a:first-child { padding-left: 0; } .subnav a::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px; background: var(--cat, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } .subnav a:first-child::after { left: 0; } .subnav a.active { color: var(--cat, var(--accent)); } .subnav a.active::after { transform: scaleX(1); } .newsbar { background: transparent; } .newsbar-in { display: flex; align-items: center; gap: 16px; height: 40px; background: var(--bg); border: 1px solid var(--line); border-top: 0; font-size: 13.5px; } .newsbar-label { display: inline-flex; align-items: center; gap: 9px; flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); } .live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); flex: none; } .live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent-2); animation: live-pulse 2.4s ease-out infinite; } @keyframes live-pulse { 0% { transform: scale(.5); opacity: .8; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } } .newsbar-items { position: relative; flex: 1; min-width: 0; height: 20px; overflow: hidden; } .newsbar-item { position: absolute; left: 0; right: 0; top: 0; display: block; line-height: 20px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(105%); pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .3, 1); } .newsbar-item.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; } .newsbar-item.is-out { opacity: 0; transform: translateY(-105%); } .newsbar-item:hover { color: var(--accent); } .newsbar-all { flex: none; color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .newsbar-all:hover { color: var(--accent); } .newsbar.breaking .newsbar-in { background: var(--accent-soft); border-color: var(--accent-soft); } .newsbar.breaking .newsbar-item { font-weight: 700; } /* ---------------------------------------------------------------- kartice --- */ .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); border-radius: var(--radius); } .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .thumb.wide { aspect-ratio: 16 / 9; } .thumb.placeholder { display: grid; place-items: center; background: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px) 0 0 / 9px 9px, linear-gradient(135deg, var(--c, #2563eb) 0%, rgba(11, 17, 32, .94) 100%); } .thumb.placeholder span { color: #fff; font-size: 30px; font-weight: 900; opacity: .3; letter-spacing: -.06em; } .thumb.placeholder::after { content: attr(data-label); position: absolute; left: 12px; bottom: 10px; right: 12px; color: rgba(255, 255, 255, .72); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card.compact .thumb.placeholder::after, .stream-item .thumb.placeholder::after { content: none; } .card:hover .thumb img, .stream-item:hover .thumb img { transform: scale(1.04); } .cat-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; color: var(--cat, var(--accent)); /* Boju koju urednik odabere potamnimo za tekst, da kontrast prođe AA bez obzira na to koliko je svijetla. */ color: color-mix(in srgb, var(--cat, var(--accent)) 72%, #0b1120); } .cat-tag:hover { text-decoration: underline; } .meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; margin-top: 10px; } .meta .dot { opacity: .5; } .card { display: flex; flex-direction: column; gap: 14px; } .card h2 { font-size: 30px; } .card h3 { font-size: 19px; } .card h2 a:hover, .card h3 a:hover, .stream-body h3 a:hover { color: var(--accent); } .card .dek { margin: 8px 0 0; color: var(--body); font-size: 15px; } .card.compact { flex-direction: row; gap: 14px; align-items: flex-start; } .card.compact .card-image { flex: 0 0 104px; } .card.compact .thumb { aspect-ratio: 1 / 1; } .card.compact h3 { font-size: 15.5px; line-height: 1.32; } .card.compact .meta { margin-top: 7px; font-size: 11.5px; } .card.compact .cat-tag { font-size: 10px; margin-bottom: 5px; } .lead-card h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.03em; } .lead-card .dek { font-size: 17px; margin-top: 12px; } /* ----------------------------------------------------------------- hero --- */ .hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; padding-top: 26px; padding-bottom: 26px; background: var(--bg-soft); border-bottom: 1px solid var(--line-strong); } .hero-side { display: flex; flex-direction: column; gap: 20px; } .hero-side .card + .card { border-top: 1px solid var(--line); padding-top: 20px; } /* -------------------------------------------------------------- stupci --- */ .columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 42px; padding-top: 30px; padding-bottom: 46px; align-items: start; } .block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 9px; margin-bottom: 22px; } .block-head h2 { font-size: 20px; letter-spacing: -.01em; } .cat-block .block-head { border-bottom-color: var(--cat, var(--ink)); border-bottom-width: 3px; } .cat-block .block-head h2 { color: var(--cat, var(--ink)); display: flex; align-items: center; gap: 10px; } .cat-block .block-head h2::before { content: ''; width: 10px; height: 10px; background: var(--cat, var(--ink)); flex: none; } .more { color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; } .more:hover { color: var(--accent); } .stream-section { margin-bottom: 36px; } .stream { display: flex; flex-direction: column; } .stream-item { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); } .stream-item:first-child { padding-top: 0; } .stream-body h3 { font-size: 21px; } .stream-body .dek { margin: 9px 0 0; font-size: 14.5px; color: var(--muted); } .cat-block { margin-bottom: 36px; } .cat-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; } .cat-grid .card.compact { grid-column: 2; } .cat-grid .card:first-child { grid-row: span 3; } .related .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .related .cat-grid .card:first-child { grid-row: auto; } .related .cat-grid .card.compact { grid-column: auto; } /* ------------------------------------------------------------- bočno --- */ .col-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 70px; padding-left: 30px; } .side-block { background: var(--bg-soft); border: 1px solid var(--line); border-top: 2px solid var(--ink); padding: 13px 16px 16px; } .side-title { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .side-title::before { content: ''; width: 10px; height: 10px; background: var(--accent-2); flex: none; } .ranked { list-style: none; margin: 0; padding: 0; counter-reset: r; } .ranked li { display: flex; gap: 13px; padding: 10px 0; border-bottom: 1px solid var(--line); } .ranked li:last-child { border-bottom: 0; } .ranked .rank { font-size: 22px; font-weight: 900; color: var(--line-strong); line-height: 1; min-width: 24px; font-variant-numeric: tabular-nums; } .ranked li:nth-child(-n+3) .rank { color: var(--accent-2); } .ti-title { display: block; color: var(--ink); font-weight: 700; font-size: 14.5px; line-height: 1.35; } .ranked a:hover .ti-title, .side-cards h3 a:hover { color: var(--accent); } .ti-meta { display: block; color: var(--muted); font-size: 11.5px; margin-top: 4px; } .side-cards { display: flex; flex-direction: column; gap: 16px; } /* U užem bočnom stupcu naslov treba više prostora nego sličica. */ .side-cards .card.compact { gap: 12px; } .side-cards .card.compact .card-image { flex: 0 0 78px; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag-cloud a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); padding: 7px 11px; border-radius: var(--radius); font-size: 13px; color: var(--ink); background: var(--bg); } .tag-cloud a:hover { border-color: var(--accent); color: var(--accent); } .tag-cloud small { color: var(--muted); font-size: 11px; } .side-cta p:last-of-type { margin-bottom: 16px; } .side-cta p { margin: 0 0 14px; font-size: 14px; color: var(--muted); } .btn-rss { display: inline-block; background: var(--ink); color: #fff; padding: 11px 18px; border-radius: var(--radius-ui); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .btn-rss:hover { background: var(--accent); } /* ---------------------------------------------------------- popis stran. --- */ .page-head { padding-top: 26px; padding-bottom: 22px; background: var(--bg-soft); border-bottom: 1px solid var(--line-strong); } .kicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--cat, var(--accent-2)); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 9px; } .kicker::before { content: ''; width: 18px; height: 3px; background: currentColor; flex: none; } .page-head h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; } .page-intro { margin: 12px 0 0; font-size: 17px; color: var(--muted); max-width: 62ch; } .count { margin: 12px 0 0; font-size: 13px; color: var(--muted); } .pagination { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 32px; } .pagination a, .pagination .current, .pagination .gap { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-ui); font-size: 14px; font-weight: 700; color: var(--ink); } .pagination a:hover { border-color: var(--accent); color: var(--accent); } .pagination .current { background: var(--ink); border-color: var(--ink); color: #fff; } .pagination .gap { border: 0; min-width: 20px; color: var(--muted); } .empty-state { padding: 48px 0 56px; color: var(--muted); } .empty-state p { margin: 0 0 8px; } .empty-title { color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.01em; } .empty-state .btn-rss { margin-top: 14px; } .empty-state h1 { margin-bottom: 12px; } .muted { color: var(--muted); } .error-page { padding: 70px 0 90px; } .error-page h1 { font-size: clamp(30px, 5vw, 48px); margin-bottom: 14px; } .error-page .stream { margin: 30px 0; } /* --------------------------------------------------------------- vijest --- */ .article { max-width: 820px; padding-top: 22px; padding-bottom: 34px; } .article.narrow { max-width: 760px; } .preview-flag { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; padding: 11px 16px; margin-top: 16px; border-radius: var(--radius); font-size: 13.5px; font-weight: 700; } .crumbs { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 18px; } .crumbs a:hover { color: var(--accent); } .article-head h1 { font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -.032em; line-height: 1.12; } .article-lead { font-size: 19px; color: var(--muted); margin: 16px 0 0; line-height: 1.55; } .byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); } .byline .author { color: var(--ink); font-weight: 700; } .byline .dot { opacity: .5; } .article-cover { margin: 26px 0 0; } .article-cover img { width: 100%; border-radius: var(--radius); } .article-cover figcaption { margin-top: 9px; font-size: 12.5px; color: var(--muted); } .article-body { font-family: var(--serif); font-size: 19px; line-height: 1.75; color: var(--body); margin-top: 26px; } .article-body p { margin: 0 0 1.1em; } .article-body h2 { font-family: var(--sans); font-size: 25px; margin: 1.55em 0 .5em; } .article-body h3 { font-family: var(--sans); font-size: 20px; margin: 1.4em 0 .45em; } .article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .article-body ul, .article-body ol { margin: 0 0 1.25em; padding-left: 1.35em; } .article-body li { margin-bottom: .5em; } .article-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent-2); color: var(--ink); font-style: italic; } .article-body figure { margin: 1.8em 0; } .article-body img { border-radius: var(--radius); } .article-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; } .article-body pre { background: var(--bg-soft); padding: 16px; border-radius: var(--radius); overflow-x: auto; } .article-body pre code { background: none; padding: 0; } .article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; } .article-body table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 15px; } .article-body th, .article-body td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; } .source-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; padding: 14px 18px; background: var(--bg-soft); border-left: 3px solid var(--accent); border-radius: 0; font-size: 14.5px; } .source-label { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .source-box a { color: var(--accent); font-weight: 700; } .source-box a:hover { text-decoration: underline; } .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .tag-list a { font-size: 13px; color: var(--muted); border: 1px solid var(--line); padding: 6px 11px; border-radius: var(--radius); } .tag-list a:hover { border-color: var(--accent); color: var(--accent); } .share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); } .share-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .share a, .share button { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink); border: 1px solid var(--line-strong); background: var(--bg); padding: 8px 13px; border-radius: var(--radius-ui); cursor: pointer; } .share a:hover, .share button:hover { border-color: var(--accent); color: var(--accent); } .neighbours { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; } .neighbours.single { grid-template-columns: 1fr; } .neighbours.single .nb.prev { text-align: left; } .nb { border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; } .nb:hover { border-color: var(--accent); } .nb span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .nb strong { color: var(--ink); font-size: 15px; line-height: 1.35; } .nb.prev { text-align: right; } .related { margin: 34px 0 60px; } /* -------------------------------------------------------------- podnožje --- */ .site-footer { background: var(--bg-deep); color: #93a4bd; margin-top: 0; padding: 44px 0 0; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; } .footer-grid h3 { color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 7px; font-size: 14px; } .footer-grid a:hover { color: #fff; } .footer-brand-col p { margin: 14px 0 0; font-size: 14px; max-width: 46ch; } .footer-logo { font-size: 27px; } .footer-logo .logo-word { color: #fff; } .footer-logo .logo-suffix { color: #7ba2ff; } .footer-social { display: flex; gap: 14px; margin-top: 16px; font-size: 13px; font-weight: 700; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; } /* ------------------------------------------------------------- responzivno --- */ @media (max-width: 1200px) { /* Uži ekran: rubrike u traci se stisnu umjesto da se počnu skrivati. */ .nav-links a { padding: 13px 9px; font-size: 11.5px; letter-spacing: .05em; } .nav-logo { font-size: 19px; padding-right: 12px; } } @media (max-width: 1080px) { .columns { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; } .hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 26px; } } @media (max-width: 1000px) { /* Slogan se gubi prvi — logotip i tražilica su važniji od ukrasa. */ .masthead-in { gap: 16px; } .tagline { display: none; } .head-search { flex: 1; } .head-search input { min-width: 0; width: 100%; } } @media (max-width: 900px) { :root { --gut: 18px; } .hero { grid-template-columns: 1fr; } .columns { grid-template-columns: 1fr; } .col-side { position: static; padding-left: 0; padding-top: 10px; } .cat-grid { grid-template-columns: 1fr; } .cat-grid .card:first-child { grid-row: auto; } .cat-grid .card.compact { grid-column: auto; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand-col { grid-column: 1 / -1; } } @media (max-width: 1260px) { main, .masthead-in, .nav-in, .newsbar-in { border-left: 0; border-right: 0; } } /* Na telefonu zaglavlje nestaje, a traka s logotipom, pretragom i izbornikom ostaje na vrhu — sve rubrike su u izborniku, ništa se ne guši u širinu. */ @media (max-width: 860px) { .topbar, .masthead, .nav-links { display: none; } .nav-in { align-items: center; justify-content: flex-start; gap: 0; border-top: 1px solid var(--line); } /* Obje ikone idu skupa uz desni rub. */ #nav-search { margin-left: auto; } .nav-logo { max-width: none !important; opacity: 1 !important; padding: 13px 0 !important; font-size: 23px; flex: none; } .nav-logo .logo-text { max-width: 200px; overflow: hidden; transition: max-width .8s cubic-bezier(.22, .61, .36, 1), opacity .45s ease; } /* Dok se lista: ostaje samo znak, a u traku ulazi naslov stranice. */ .mainnav.has-context.compact .nav-logo .logo-text { max-width: 0; opacity: 0; } .mainnav.has-context.compact .nav-context { display: block; animation: fade-in .3s ease both; } /* Naslovnica: dok se lista prema dolje traka nestaje i ostaje samo znak, a sadržaj prolazi ispod njega. Listanje prema gore vraća cijelu traku. */ body.home .mainnav .nav-in, body.home .mainnav .nav-tool { transition: opacity .25s ease, background-color .25s ease, box-shadow .25s ease; } body.home .mainnav.compact .nav-in { background: transparent; border-color: transparent; box-shadow: none; pointer-events: none; } body.home .mainnav.compact .nav-tool { opacity: 0; pointer-events: none; } body.home .mainnav.compact .nav-logo .logo-text { max-width: 0; opacity: 0; } /* Znak je malen, ali dodirna površina ostaje puna. Rez se mora ukloniti — `overflow: hidden` na linku (potreban za izvlačenje imena) inače odreže bijeli obrub znaka s lijeve strane. Ime skriva vlastiti overflow. */ body.home .mainnav.compact .nav-logo { pointer-events: auto; min-width: 46px; overflow: visible; padding-left: 4px !important; } /* Znak je kvadrat s izrezanim „z“, pa mu treba puna podloga — inače se kroz slovo vidi fotografija ispod i izgleda razlomljeno. Bijela podloga čini slovo bijelim, a uski bijeli rub i sjena odvajaju znak od sadržaja. */ body.home .mainnav.compact .brand-mark { width: 30px; height: 30px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 4px #fff, 0 4px 16px rgba(13, 21, 38, .3); } @keyframes fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } .nav-tool { position: static; } .nav-tool > summary { padding: 14px 10px; } /* Na telefonu panel ide preko cijele širine trake, a ne ispod ikone. */ .nav-panel { left: 0; right: 0; width: auto; border-left: 0; border-right: 0; } /* Rubrike su u vlastitom redu ispod trake; na naslovnici ih nema jer su ondje ionako niže, u blokovima. */ .nav-links { display: none; } .subnav { display: block; } body.home .subnav { display: none; } .newsbar-in { height: 38px; gap: 12px; } .newsbar-all { display: none; } .wrap { padding: 0 var(--gut); } } @media (min-width: 861px) { /* Na širokim ekranima ikona pretrage se pojavljuje tek kad zaglavlje odscrolla — do tada je tražilica ionako vidljiva u zaglavlju. */ .mainnav.js:not(.scrolled) #nav-search { display: none; } } @media (min-width: 1201px) { /* Sve rubrike stanu u traku, pa izbornik nije potreban. */ #nav-menu { display: none; } } /* ------------------------------------------------------------- telefon --- */ /* Portal na telefonu: slika ide od ruba do ruba, tekst zadržava marginu. Vodeća priča je velika, ostalo su kratki redovi sa sličicom lijevo. */ @media (max-width: 700px) { :root { --gut: 16px; } body { font-size: 15.5px; } /* Slike vodećih priča i teksta idu preko cijele širine zaslona. */ .lead-card .card-image, .cat-block .cat-grid > .card:first-child:not(.compact) .card-image, .article-cover, .stream-section .card:not(.compact) .card-image { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); } .lead-card .thumb, .cat-block .cat-grid > .card:first-child:not(.compact) .thumb, .article-cover img { border-radius: 0; } .lead-card .thumb.wide { aspect-ratio: 16 / 9; } /* Vodeća priča */ .hero { padding-top: 0; padding-bottom: 14px; gap: 0; } .hero-main { margin-bottom: 4px; } .lead-card { gap: 12px; } .lead-card h2 { font-size: 27px; line-height: 1.13; letter-spacing: -.03em; } .lead-card .dek { font-size: 15.5px; margin-top: 8px; } .lead-tags { margin-bottom: 6px; } /* Sve „kartica + sličica lijevo“ vrste složene su isto: jedan red, 112 px. */ .hero-side { gap: 0; } .hero-side .card + .card { border-top: 0; padding-top: 0; } .hero-side .card, .side-cards .card.compact { padding: 8px 0; border-top: 1px solid var(--line); } .card.compact { gap: 13px; align-items: flex-start; } .card.compact .card-image, .side-cards .card.compact .card-image { flex: 0 0 102px; } .card.compact .thumb { aspect-ratio: 3 / 2; } .card.compact h3 { font-size: 16px; line-height: 1.24; } .card.compact .cat-tag { font-size: 10px; margin-bottom: 4px; } .stream-item { grid-template-columns: 102px minmax(0, 1fr); gap: 12px; padding: 8px 0; } .stream-item .thumb { aspect-ratio: 3 / 2; } .stream-body h3 { font-size: 16px; line-height: 1.24; } .stream-body .dek { display: none; } /* Na telefonu je vrijeme dovoljno — „min čitanja“ ide samo u vijest. */ .card .meta > :nth-last-child(-n + 2), .stream-item .meta > :nth-last-child(-n + 2) { display: none; } .meta { font-size: 11.5px; margin-top: 4px; } /* Naslovi blokova */ .columns { padding-top: 18px; padding-bottom: 26px; gap: 18px; } .block-head { margin-bottom: 10px; padding-bottom: 6px; } .block-head h2 { font-size: 17px; } .stream-section, .cat-block { margin-bottom: 22px; } .cat-grid { gap: 16px; } .card.compact .cat-tag { font-size: 9.5px; margin-bottom: 3px; letter-spacing: .1em; } /* Naslov u redu ide najviše u dva retka — s tri se red razvuče i razmakne od sličice, pa popis prestane biti pregledan. */ .card.compact h3, .stream-body h3, .ti-title, .nb strong { line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .ti-title { line-height: 1.3; } .side-title { margin-bottom: 11px; } /* Bočni stupac: tonirani pojasevi preko cijele širine, bez okvira u okviru. */ .col-side { gap: 0; padding-top: 0; border-top: 0; } .side-block { margin: 0 calc(-1 * var(--gut)) 0; padding: 14px var(--gut) 18px; border-left: 0; border-right: 0; border-bottom: 0; } .side-block + .side-block { border-top: 2px solid var(--ink); } .ranked li { padding: 7px 0; } /* Vijest */ .article { padding-top: 14px; } .article-head h1 { font-size: 25.5px; line-height: 1.16; } .article-lead { font-size: 16.5px; margin-top: 11px; } .byline { margin-top: 13px; padding: 9px 0; font-size: 12.5px; } .article-cover { margin-top: 16px; } .article-cover figcaption { padding: 0 var(--gut); } .article-body { font-size: 17.5px; margin-top: 18px; } .article-body > figure, .article-body > .gallery { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); } .article-body > figure img { border-radius: 0; } .article-body > figure > figcaption, .article-body > .gallery > figure > figcaption { padding: 0 var(--gut); } .article-body > .gallery { gap: 3px; } .share { gap: 8px; } .share a, .share button { flex: 1; justify-content: center; text-align: center; min-width: 88px; } .neighbours { grid-template-columns: 1fr; gap: 10px; } .nb.prev { text-align: left; } .related .cat-grid { grid-template-columns: 1fr; } /* Popisi i ostalo */ .page-head { padding-top: 18px; padding-bottom: 16px; } .page-head h1 { font-size: 30px; } .page-intro { font-size: 16px; } .footer-grid { grid-template-columns: 1fr; gap: 18px; } .panel-links { grid-template-columns: 1fr; } .site-footer { padding: 30px 0 0; } .footer-bottom { margin-top: 20px; padding: 14px 0; } .footer-grid { gap: 14px; } .footer-grid h3 { margin-bottom: 8px; } .footer-grid li { margin-bottom: 5px; font-size: 13.5px; } .footer-brand-col p { margin-top: 9px; font-size: 13.5px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media print { .topbar, .mainnav, .newsbar, .col-side, .share, .neighbours, .related, .site-footer, .search { display: none; } .article { max-width: none; } } .lead-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .lead-tags .cat-tag { margin-bottom: 0; } .lead-flag { background: var(--accent-2); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; } /* U tamnoj temi „tinta” postaje svijetla, pa tipke i oznake koje su na svijetloj temi tamne moraju okrenuti boje da tekst ostane čitljiv. */ /* Popravci kontrasta za tamnu paletu (rade samo uz data-theme="dark"). */ html[data-theme="dark"] .search button, html[data-theme="dark"] .btn-rss, html[data-theme="dark"] .pagination .current, html[data-theme="dark"] .lead-flag, html[data-theme="dark"] .newsbar-label { background: var(--accent); color: #0b1120; border-color: var(--accent); } html[data-theme="dark"] .search button:hover, html[data-theme="dark"] .btn-rss:hover { background: #fff; color: #0b1120; } /* Na tamnoj podlozi boju rubrike treba posvijetliti, a ne potamniti. */ html[data-theme="dark"] .cat-tag { color: color-mix(in srgb, var(--cat, var(--accent)) 58%, #f1f5f9); } html[data-theme="dark"] .search input { background: var(--bg-soft); } html[data-theme="dark"] .topbar, html[data-theme="dark"] .site-footer { background: #070c17; } html[data-theme="dark"] .thumb.placeholder { background: linear-gradient(135deg, var(--c, #2563eb) 0%, rgba(7, 12, 23, .95) 100%); } html[data-theme="dark"] .preview-flag { background: #3b2f10; border-color: #7c5e16; color: #fcd34d; } /* --------------------------------------------------------- slike i galerija --- */ picture { display: contents; } .article-body img, .article-cover img { height: auto; } .gallery { display: grid; gap: 12px; margin: 1.8em 0; } .gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery figure { margin: 0; display: flex; flex-direction: column; } /* Slike u galeriji dobivaju isti omjer da red ne izgleda nasumično. */ .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .gallery-1 img { aspect-ratio: auto; } .gallery figcaption { font-size: 12px; margin-top: 6px; } @media (max-width: 640px) { .gallery-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .article-body figure { margin: 1.8em 0; } .article-body figcaption { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-top: 9px; }