/* ============================================================ blog.css — „Priče" (/price/): listing + članak. Port design_handoff_blog (2026-07-09), pravac „Indeks" (Listing A), oznaka brzine = Merač, POVEZANO = Mreža, Signal = redukovan šablon. Scope: SVE pod body.page-price — tokeni, tipografija i komponente ne cure na druge strane. Header/footer partial-i su deljeni; futer ovde dobija TAMNI tretman (samo za Priče — Denisova odluka: telo i tamni futer vezuju Priče za dosije familiju, standardni futer partial je vezuje za obične strane). Tema: default TAMNA (theme-toggle.js, cookie cp_theme); :light varijanta ispod. Header/futer ostaju tamni u obe teme. ============================================================ */ /* Skrol-bar pripada (ne ) — base.css forsira color-scheme:light, pa na tamnoj strani gornje dugme skrol-bara „svetli" preko tamnog hedera. Isti obrazac kao simulator/lozinka/alati: html prati temu (default dark). scrollbar-gutter: stable — rezerviše žleb za skrolbar pa se ni na pregledačima sa OVERLAY skrolbarom (Opera GX/Brave/macOS) ne crta preko sticky hedera; na klasičnom skrolbaru (Win Chrome) nema promene. */ html { color-scheme: dark; scrollbar-gutter: stable; } html[data-theme="light"] { color-scheme: light; } /* Viewport-lock (Priče): heder ostaje fiksiran na vrhu, a sadržaj (main+footer, uvijeni u .cp-scroll) skroluje u sopstvenom kontejneru ISPOD hedera → skrolbar živi ispod hedera i nikad ne prelazi preko njega (jedini pristup koji radi i na iOS-u, gde CSS za skrolbar strane ne pomaže). Konzola /vesti/ koristi isti obrazac. */ html:has(body.page-price) { height: 100%; overflow: hidden; } /* html pozadina MORA da prati temu Priča. Bez ovoga ostaje na svetloj difolt boji sajta (#f4f4f2) dok je telo tamno → na iOS-u ta svetla površina probija ispod sadržaja (overscroll/dvh) i kroz transparentne krajeve crvene niti (.hdr::after / .ftA::after su transparent→crveno→transparent) → linija se čita kao „belo→crveno→belo" na dnu. Tamna html-pozadina to gasi. */ /* S84 (Denis): NOTCH boja = BODY pozadina. Na iOS-u body (100dvh, overflow: hidden) prekriva ceo viewport uključujući notch traku → notch pokazuje BODY bg, ne html canvas (zato ranija html izmena nije pomogla na telefonu). Heder je TAMAN u obe teme (#0f0f0d) → body mora #0f0f0d da se notch stopi sa hederom (kao /simulator/, gde je body već #0f0f0d). Zato je body bg dole u token-bloku promenjen na #0f0f0d, a članak (paper) je premešten na .cp-scroll pa se SADRŽAJ ne menja. html ostaje dark/paper (rub overscroll-a). */ html:has(body.page-price) { background: #0f0f0d; } /* S85 (Denis): html TAMAN i u light temi — svetli html je na iOS-u provirivao kao svetla linijica između tamnog futera i Safari trake. Hrom (notch/rubovi/ safe-area) je uvek taman [[feedback_dark_chrome]]; paper nosi .cp-scroll. */ html[data-theme="light"]:has(body.page-price) { background: #0f0f0d; } body.page-price { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } body.page-price > .hdr { position: static; flex: none; } body.page-price > .cp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; background: var(--paper); /* članak nosi paper; body je #0f0f0d (notch) */ scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } /* ── Tokeni — svetli sadržaj ── */ body.page-price { --paper: #f7f6f3; --cream: #fafaf8; --sand: #eceae4; --stone: #d6d4ce; --slate: #5a5754; /* sitni meta tekst (datum, broj pojmova, idx-note): #9a9a98/#8a8783 su na svetlom papiru merili 2.61–3.31:1 (AA traži 4.5) — bile su hardkodovane, pa ih tamna tema (gde prolaze) nije mogla spasiti. */ --meta: #6f6d68; --coal: #2a2825; --ink: #1a1a18; --deep: #141412; --brand: #9b1919; /* --brand nosi i podloge i niti; za slova ide -text (S131) */ --brand-text: var(--brand); --brand-hover: #7d1414; --brand-faint: rgba(155, 25, 25, 0.10); --steel: #3a5570; /* #a6731f je na papiru merio 3,81 — jedini od sest koji je padao. */ --amber: #8c611a; --forest: #4a5d3e; /* Ove tri su ranije postojale SAMO u tamnom bloku, pa je --cat za kategorije „softver", „ljudi" i „praksa" u svetloj temi ostajao nerazresen i boja se gubila. Vrednosti su tamne parnjake spustene na papir (2,48-3,06 -> 5,07+). */ --teal: #41716b; --clay: #9f5538; --plum: #835b84; --border-light: #e0dedd; --border-soft: #e8e6e3; /* alat blok — invertovana „terminal" kartica; tamna u obe teme */ --alat-bg: #1a1a18; --alat-fg-strong: #f0ede8; --alat-fg: #b0ada8; --alat-fg-mute: #8a8780; --alat-border: transparent; color-scheme: light; /* Širina kolone članka (desktop). Istorija: start 48rem (~80 znakova/red), pa +20% na 57.6rem — ali broj „~78" u starom komentaru opisivao je 48rem, ne 57.6rem; stvarno je bilo 97 znakova/red (brojano Range API-jem, S130). Denisova odluka S130: sredina — 52rem = medijana 88, prosek 87, max 97. */ --art-w: 52rem; /* Osnovna veličina teksta u telu članka — menja je kontrola „veličina teksta" (data-tsize na .art); default 18px. */ --art-fs: 18px; /* body bg = #0f0f0d (boja hedera) da se notch stopi s hederom (S84, Denis). Sadržaj članka nosi --paper preko .cp-scroll (gore). */ background: #0f0f0d; color: var(--ink); font-size: 18px; line-height: 1.7; } /* ── Tokeni — tamni sadržaj (default) + dot-tekstura „digitalni teren" (telo se jasno razlikuje od pune tamne futer ploče) ── */ body.page-price[data-theme="dark"] { --paper: #161614; --cream: #1e1e1c; --sand: #232320; --stone: #35342f; --slate: #a5a29c; --meta: #9a9a98; --coal: #d0cdc6; --ink: #ece9e3; --deep: #f3f0ea; --brand: #c52828; --brand-text: var(--brand-on-plate); --brand-hover: #a51f1f; --brand-faint: rgba(197, 40, 40, 0.16); --steel: #6a8db2; --amber: #c79248; --forest: #8aa578; --teal: #5fa39a; --clay: #cf8f76; --plum: #a781a8; --border-light: #2c2c29; --border-soft: #26251f; --alat-bg: #0d0d0b; --alat-border: #2c2c29; color-scheme: dark; background-image: radial-gradient(circle at 1px 1px, rgba(236,233,227,0.032) 1px, transparent 1.5px); background-size: 46px 46px; } body.page-price ::selection { background: var(--brand-faint); } .page-price main :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .page-price main a { color: inherit; text-decoration: none; } .page-price main button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } /* ============================================================ SPEED — oznaka brzine, forma MERAČ (usvojeno; segmenti = minuti) ============================================================ */ .page-price .speed { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; } .page-price .speed b { color: var(--ink); font-weight: 600; letter-spacing: 0.08em; } /* Boja labela vezana za tip (ne samo segmenti): Signal = brend „puls", Dosije = smiren ink meter. Jača razlika dve brzine na listingu. */ .page-price .speed--sig b { color: var(--brand-text); } .page-price .speed--dos b { color: var(--ink); } .page-price .speed .speed-gauge { display: inline-flex; gap: 2px; align-items: center; flex: none; } .page-price .speed .speed-gauge i { width: 5px; height: 12px; background: var(--stone); border-radius: 1px; } .page-price .speed--sig .speed-gauge i.on { background: var(--brand); } .page-price .speed--dos .speed-gauge i.on { background: var(--ink); } /* Signal ima jedan segment — dajmo mu malo veću težinu da „brzi" token ne deluje kao usamljena crtica pored višesegmentnog Dosijea. */ .page-price .speed--sig .speed-gauge i.on { width: 7px; } /* legenda (dve brzine) */ .page-price .speed-legend { display: flex; flex-wrap: wrap; gap: 16px 26px; margin-top: 24px; } .page-price .speed-legend .li { display: inline-flex; align-items: center; gap: 10px; } .page-price .speed-legend .lx { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--slate); line-height: 1.5; white-space: nowrap; /* opis brzine ostaje u jednom redu */ } /* na uskim ekranima dve legende se slažu jedna ispod druge (item ostaje ceo) */ @media (max-width: 560px) { .page-price .speed-legend { flex-direction: column; gap: 10px; } .page-price .speed-legend .lx { white-space: normal; } } /* ============================================================ LISTING — glava + čipovi + nota ============================================================ */ .page-price .idx-head { max-width: 64rem; margin: 0 auto; padding: 66px 24px 0; } .page-price .kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-text); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; } .page-price .kicker .dash { width: 22px; height: 1px; background: var(--brand); } .page-price .idx-head h1 { font-size: clamp(34px, 5vw, 50px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 18px; text-wrap: balance; color: var(--deep); font-weight: 700; } .page-price .idx-dek { max-width: 44rem; color: var(--slate); font-size: 19px; margin: 0; } .page-price .idx-dek b { color: var(--ink); font-weight: 600; } .page-price .chips { max-width: 64rem; margin: 34px auto 0; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 8px; } .page-price .chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; border: 1px solid var(--stone); background: var(--cream); color: var(--slate); padding: 6px 13px; border-radius: 2px; transition: border-color 0.15s, color 0.15s, background 0.15s; } .page-price .chip:hover { border-color: var(--slate); color: var(--ink); } .page-price .chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); } .page-price .idx-note { max-width: 64rem; margin: 0 auto; padding: 30px 24px 90px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--meta); display: flex; gap: 8px 20px; flex-wrap: wrap; border-top: 1px solid var(--border-light); } .page-price .idxA .row.hide { display: none !important; } /* Udovice bez tvrdih spojeva: pregledač koji zna `pretty` prelama tako da poslednji red ne ostane sa jednom rečju; ostali prelamaju normalno. */ .page-price .art .body p, .page-price .art .body li, .page-price .art .body blockquote, .page-price .art .dek { text-wrap: pretty; } /* Samo za čitače ekrana (živa regija filtera) — vizuelno nepostojeće. */ .page-price .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── PINOVANI LEAD (srednji tretman — izdvojen, indeks ostaje glavni) ── */ .page-price .lead-wrap { max-width: 64rem; margin: 36px auto 4px; padding: 0 24px; } .page-price .lead { display: grid; grid-template-columns: auto 1fr; gap: 0 26px; align-items: start; background: var(--cream); border: 1px solid var(--border-light); border-left: 3px solid var(--brand); padding: 30px 34px 28px; transition: border-color 0.15s; } .page-price .lead:hover { border-left-color: var(--brand-hover); } .page-price .lead:hover h2 { color: var(--brand-text); } .page-price .lead .lead-flag { grid-row: 1 / span 3; align-self: start; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brand-text); padding-top: 2px; } .page-price .lead .row-kicker { grid-column: 2; } .page-price .row-kicker { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin: 0 0 12px; display: flex; gap: 12px; align-items: center; } .page-price .row-kicker .cat { color: var(--cat, var(--steel)); } /* Identitet kategorija — svaka nosi svoju mute boju (data-cat na redu/leadu/ članku → --cat). Boja se pojavljuje na oznaci kategorije (registar levo, lead kicker, kicker članka); telo ostaje neutralno. Fallback = steel. */ .page-price [data-cat="analize"] { --cat: var(--steel); } .page-price [data-cat="softver"] { --cat: var(--teal); } .page-price [data-cat="edukacija"] { --cat: var(--amber); } .page-price [data-cat="ljudi"] { --cat: var(--clay); } .page-price [data-cat="poslovanje"] { --cat: var(--forest); } .page-price [data-cat="praksa"] { --cat: var(--plum); } .page-price .lead h2 { grid-column: 2; font-size: clamp(24px, 3.2vw, 33px); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 12px; text-wrap: balance; color: var(--deep); font-weight: 700; transition: color 0.15s; } .page-price .lead .dek { grid-column: 2; color: var(--slate); font-size: 17.5px; max-width: 46rem; margin: 0 0 18px; } .page-price .lead .row-meta { grid-column: 2; } .page-price .row-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--slate); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-variant-numeric: tabular-nums; } .page-price .row-meta .dot { width: 3px; height: 3px; background: var(--stone); border-radius: 50%; } /* ============================================================ LISTING A — INDEKS (editorijalni registar) ============================================================ */ .page-price .idxA { max-width: 64rem; margin: 40px auto 0; padding: 0 24px; } .page-price .idxA .row { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; gap: 26px; padding: 26px 6px; border-top: 1px solid var(--border-light); align-items: start; } .page-price .idxA .row:last-of-type { border-bottom: 1px solid var(--border-light); } .page-price .idxA .row .col-cat { display: flex; flex-direction: column; gap: 6px; padding-top: 3px; } .page-price .idxA .row .cat { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cat, var(--steel)); } .page-price .idxA .row .date { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--meta); } .page-price .idxA .row h3 { font-size: 21px; line-height: 1.32; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 7px; transition: color 0.15s; } .page-price .idxA .row:hover h3 { color: var(--brand-text); } .page-price .idxA .row .dek { color: var(--slate); font-size: 16.5px; max-width: 42rem; margin: 0; } .page-price .idxA .row .col-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; padding-top: 2px; text-align: right; } .page-price .idxA .row .poj { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--meta); } @media (max-width: 820px) { .page-price .idxA .row { grid-template-columns: 1fr; gap: 10px; padding: 22px 2px; } .page-price .idxA .row .col-cat { flex-direction: row; gap: 12px; align-items: center; padding-top: 0; } .page-price .idxA .row .col-meta { align-items: flex-start; text-align: left; flex-direction: row; gap: 14px; } } /* ============================================================ ČLANAK ============================================================ */ /* Audio verzija — tiha traka: cream + tanka ivica, BEZ crvenog akcenta (kartica sa crvenom ivicom čitala se kao navod, go red kao uglavljen — Denis S129, sredina). Nativni