/* ========================================================================== pages/blog.css — Baza wiedzy /pomoc/{tag} + post /post/{slug} (DESIGN_SPEC §6.5) Loaded after tb.css (blok stylesheets). Composes the tb components (.tb-pagehead, .tb-input, .tb-btn, .tb-chips, .tb-cards/.tb-card, .tb-prose); only page patterns live here: .kb-search (search form in the page head) · .kb-quick (Przydatne artykuły) · .kb-results / .kb-empty (filtered views) · .kb-nb (line-break guards) · .kb-post / .kb-rail / .kb-toc / .kb-video / .kb-tags / .kb-related (post page) · DB-content overrides inside .tb-prose. Mobile-first; breakpoints 480 / 640 / 960 / 1100 (§4). Colours = tokens only. !important ONLY against inline style="" attributes stored in the posts table (each one commented). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Search in the dark page head — field + button on one row at every width (320 px: 180 px field + 100 px button), example searches as chips below. -------------------------------------------------------------------------- */ .kb-search { margin: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem) 0 0; } .kb-search__row { display: flex; align-items: stretch; gap: .5rem; max-width: 42rem; } .kb-search__field { position: relative; flex: 1 1 auto; min-width: 0; } .kb-search__icon { position: absolute; top: 50%; left: 15px; width: 20px; height: 20px; margin-top: -10px; color: var(--c-on-dark-3); pointer-events: none; } /* type=search: drop the UA search-field look (Safari ignores padding otherwise) */ .kb-search :is(input, .tb-x).kb-search__input { -webkit-appearance: none; appearance: none; padding-left: 46px; } .kb-search__input::-webkit-search-decoration, .kb-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .kb-search :is(button, .tb-x).kb-search__submit { flex: none; } .kb-search__hint { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .75rem; margin-top: 1rem; } /* padding-top = chip border + padding, so the label sits on the first chip row's baseline */ .kb-search__hint-label { flex: none; padding-top: 7px; font-size: var(--fs-sm); line-height: 1.3; color: var(--c-on-dark-3); } .kb-search__hint .tb-chips { flex: 1 1 18rem; min-width: 0; } /* Chips on the dark head are §5.10 chips (text --c-on-dark-2), not links: tb.css' dark link rule (:is(.tb-pagehead,…) a:not(.tb-btn), 0,2,1) out-ranks its dark chip rule (0,2,0) and painted them sky blue. Same specificity here, later in the cascade; the chip hover (0,3,1) and the active chip below still win. */ .kb-head a.tb-chip { color: var(--c-on-dark-2); } /* Active filter (/pomoc/{tag} or a submitted phrase): tinted like the dark icon tiles, not a light pill */ .kb-head a.tb-chip[aria-current] { background: color-mix(in srgb, var(--c-blue-500) 16%, transparent); border-color: var(--c-blue-500); color: var(--c-on-dark); } /* -------------------------------------------------------------------------- 2. Listing body — „Przydatne artykuły” sits on the card grid's columns (title = column 1, links = the rest), a hairline, then the cards. -------------------------------------------------------------------------- */ .kb-quick { display: grid; gap: .5rem clamp(1rem, .75rem + 1vw, 1.5rem); /* column gap = .tb-cards gap */ margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); border-bottom: 1px solid var(--c-line); } .kb-quick .kb-quick__title { margin: 0; font: 600 var(--fs-h3)/var(--lh-heading) var(--font-display); letter-spacing: var(--tracking-h3); color: var(--c-ink); } .kb-quick .kb-quick__links { max-width: var(--measure); margin: 0; color: var(--c-text); line-height: 1.75; } /* „1. link” rows: the number is its own column, so a wrapped link hangs under the link text, not under „1.” */ .kb-quick__item { display: grid; grid-template-columns: 1.375em minmax(0, 1fr); } /* fixed column: „1.” and „2.” differ in width */ .kb-quick__item + .kb-quick__item { margin-top: .25rem; } /* Filtered views (/pomoc/{tag}, a submitted search): the block follows the results instead of preceding them */ .kb-quick.kb-quick--after { margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; border-top: 1px solid var(--c-line); border-bottom: 0; } /* results heading (h2): same voice as the „Przydatne artykuły” title */ .kb-list .kb-results { margin: 0 0 clamp(1.25rem, 1rem + 1vw, 1.75rem); font: 600 var(--fs-h3)/var(--lh-heading) var(--font-display); letter-spacing: var(--tracking-h3); color: var(--c-ink); } .kb-list .kb-empty { max-width: var(--measure); margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-ink); } .kb-list .kb-empty a { display: block; width: fit-content; margin-top: .75rem; font-size: 1rem; color: var(--c-blue-700); text-decoration-line: underline; } /* -------------------------------------------------------------------------- 2b. Line-break guards — kb.nb() in blog.html.twig wraps what must stay on one line (a hyphenated word, a one-letter word + the next word, a word + its dash) in .kb-nb; the text itself is untouched. inline-block rather than white-space:nowrap: a group wider than the whole line (a long compound in a 32 px title on a 320 px phone) can still wrap inside instead of pushing the page sideways. text-decoration does not reach inline-blocks, so the card title's hover underline is inherited explicitly. -------------------------------------------------------------------------- */ /* font-weight: legacy legacy.css has „h1 span, … h6 span { font-weight: 200 }”, which thinned every guarded word */ .kb-nb { display: inline-block; max-width: 100%; font-weight: inherit; text-decoration: inherit; } /* table headers: the column sizes itself to the unbroken word (an inline-block would be measured at its broken width) */ .tb-prose :is(th, td) .kb-nb { display: inline; white-space: nowrap; } @media (min-width: 640px) { .kb-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kb-quick .kb-quick__title { padding-top: .125rem; } } @media (min-width: 960px) { .kb-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kb-quick .kb-quick__links { grid-column: span 2; } } /* -------------------------------------------------------------------------- 3. Post — title in the page head, one 42 rem reading column on the content axis -------------------------------------------------------------------------- */ /* Back link above the title — the header's „Baza wiedzy” link again, as the article's breadcrumb */ .kb-post__head .kb-post__crumb { margin: 0 0 .75rem; font-size: var(--fs-sm); line-height: 1.3; } .kb-post__crumb a { display: inline-flex; align-items: center; gap: .25rem; min-height: 24px; text-decoration-line: none; } .kb-post__crumb a:hover { text-decoration-line: underline; } .kb-post__crumb .tb-icon { flex: none; width: 16px; height: 16px; margin-left: -3px; transform: rotate(90deg); } /* chevron-down → points back */ /* Deliberate deviation from --fs-h1 (32→50): titles over 50 characters start at 26 px, so a 60–79 character title takes 3–5 lines on a 320–375 px phone instead of 5–7; from ~1320 px it is the same 50 px. */ .tb-pagehead.kb-post__head--long h1 { font-size: clamp(1.625rem, 1.15rem + 2.4vw, 3.125rem); } .kb-post__body { padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem) var(--section-y); } .kb-prose { max-width: 42rem; } .kb-prose h2[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); } /* contents-list targets clear the sticky header */ /* Side rail. Below 1100 px it is just the tags under the article. From 1100 px (full-menu breakpoint) the post is two tracks: the 42 rem text on the content axis and a 15–20 rem rail on the container's right edge — contents list (the post's h2) + tags, sticky while the text scrolls; a long list scrolls inside the rail. */ .kb-toc { display: none; } .kb-toc .kb-toc__title { margin: 0 0 .75rem; font: 600 var(--fs-sm)/1.3 var(--font-body); color: var(--c-ink); } .kb-toc .kb-toc__list { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--c-line); } .kb-toc .kb-toc__list li { margin: 0; padding: 0; } .kb-toc .kb-toc__list a { display: block; margin-left: -1px; padding: .3125rem 0 .3125rem 1rem; border-left: 1px solid transparent; font-size: .9375rem; line-height: 1.4; color: var(--c-muted); text-decoration-line: none; } .kb-toc .kb-toc__list a:hover { border-left-color: var(--c-blue-600); color: var(--c-ink); } @media (min-width: 1100px) { .kb-post__body { display: grid; grid-template-columns: minmax(0, 42rem) minmax(15rem, 20rem); justify-content: space-between; column-gap: 3rem; align-items: start; } .kb-post__body > .kb-prose { grid-column: 1; grid-row: 1; } .kb-post__body > .kb-video { grid-column: 1 / -1; grid-row: 2; } .kb-rail { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 2rem); max-height: calc(100vh - var(--header-h) - 4rem); margin: -4px; /* + padding: room for focus rings inside the scroll box */ padding: 4px; overflow-y: auto; scrollbar-width: thin; } .kb-toc { display: block; } .kb-rail .kb-tags { max-width: none; } .kb-rail > .kb-tags:first-child { margin-top: 0; padding-top: 0; border-top: 0; } } .tb-prose.kb-prose > :last-child, .tb-prose.kb-prose > .article > :last-child { margin-bottom: 0; } /* Video facade: 16:9 frame reserved up front (no CLS); the iframe replaces the button in place. Screen recordings of the app need size to stay legible: the frame breaks out of the 42 rem text measure to 56 rem (same left axis). */ .kb-video { position: relative; max-width: 56rem; aspect-ratio: 16 / 9; margin-top: clamp(1.5rem, 1.25rem + 1vw, 2rem); border-radius: var(--radius-lg); background: var(--c-midnight-900); } :is(button, .tb-x).kb-video__btn { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: var(--c-midnight-900); box-shadow: none; line-height: 0; cursor: pointer; } :is(button, .tb-x).kb-video__btn:hover, :is(button, .tb-x).kb-video__btn:active { background: var(--c-midnight-900); box-shadow: none; } .kb-video__thumb, .kb-video__frame { display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; object-fit: cover; /* hqdefault is 4:3 with letterbox bars — cover crops them */ } .kb-video__frame { position: absolute; inset: 0; } .kb-video__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--c-blue-600); color: var(--c-paper); box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--c-midnight-950) 55%, transparent); /* lifts the disc off light app screenshots */ transition: background-color .15s var(--ease); } .kb-video__play .tb-icon { width: 28px; height: 28px; margin-left: 3px; stroke-width: 2; } :is(button, .tb-x).kb-video__btn:hover .kb-video__play { background: var(--c-blue-700); } @media (forced-colors: active) { .kb-video__play { border: 2px solid ButtonText; } /* the disc fill is dropped in forced colours: keep its edge */ } /* Tags: label + chips under the article, separated by a hairline */ .kb-tags { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .75rem; max-width: 42rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--c-line); } .kb-tags__label { flex: none; padding-top: 7px; font: 600 var(--fs-sm)/1.3 var(--font-body); color: var(--c-ink); } .kb-tags .tb-chips { flex: 1 1 16rem; min-width: 0; } /* Related posts */ .kb-related .kb-related__title { margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.75rem); } /* -------------------------------------------------------------------------- 4. DB content inside .tb-prose (posts table). The per-post