/* ViZZ redesign 2026 — search screen. Loads after vizz-tokens.css (tokens, primitives, drawer) and vizz-shell.css (which owns the box-sizing reset, --ink-rgb and the motion variables). Every value is measured from the approved prototype (design_handoff_vizz/prototype/ViZZ-v5-offline.html); see 02-screens.md, "Search". Breakpoints match the shell: 900px (narrow) and 620px (mobile). */ .vizz-search { /* is a column flex container (vizz-shell.css), and an auto side margin on a flex item switches off the stretch — without the explicit width this box shrinks to fit-content and the result grid comes out two cards wide. */ width: 100%; max-width: var(--page-max); margin-inline: auto; padding: 0 var(--page-pad) 88px; /* Doc 02: the search container clips — the sidebar slides in from outside it. */ overflow: hidden; } /* The sidebar is a grid column that collapses to zero width when closed, so opening it is one property on the wrapper and nothing has to be re-rendered. `minmax(210px, 240px)` is the prototype's sidebar track. */ .vizz-search__grid { display: grid; grid-template-columns: minmax(300px, 1fr); align-items: start; } [data-filters="open"] .vizz-search__grid { grid-template-columns: minmax(210px, 240px) minmax(300px, 1fr); } /* ── filter sidebar ───────────────────────────────────────────────── */ .vizz-facets { padding: 34px 34px 40px 0; min-width: 0; } [data-filters="closed"] .vizz-facets { display: none; } /* The ☰ Filteri pill only exists while the sidebar is shut (doc 02). It and the sidebar's ✕ are links (so they work without JS), which means opting them out of the accent link colour and underline from vizz-tokens.css. */ [data-filters="open"] .vizz-toolbar__filters { display: none; } .vizz-toolbar__filters, .vizz-toolbar__filters:hover, .vizz-facets__close:hover { text-decoration: none; } .vizz-toolbar__filters { color: var(--color-text); } .vizz-facets__head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; } .vizz-facets__title { /* The title pushes, rather than "Očisti sve" or the ✕ pulling. Anchoring on either of those moved the other one whenever the clear link came and went with the active filters; anchoring on the title holds both. */ margin-right: auto; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; } .vizz-facets__clear { font-size: 12px; font-weight: 600; color: var(--color-accent-700); } .vizz-facets__close { flex: none; display: inline-flex; align-items: center; justify-content: center; /* Every group header below ends its chevron on the content edge, and this button's glyph, centred in a 26px hit area, stopped 6px short of that column. Moving the whole button rather than the glyph inside it keeps the hover square centred on the ✕; the overhang lands in the sidebar's own 34px padding, where nothing is drawn. */ margin-right: -7px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: rgba(var(--ink-rgb), .55); font-size: 13px; cursor: pointer; } .vizz-facets__close:hover { background: var(--color-neutral-200); color: var(--color-text); } .vizz-facets__clear:hover { color: var(--color-accent-800); } /* The no-JS submit; vizz-search.js sets data-js="on" on and it goes. */ .vizz-facets__apply { margin-top: 18px; justify-content: center; } [data-js="on"] .vizz-facets__apply { display: none; } /* ── one filter group ─────────────────────────────────────────────── */ .vizz-facet { border-top: 1px solid var(--hairline); } .vizz-facet:first-of-type { border-top: 0; } .vizz-facet__head { margin: 0; } .vizz-facet__toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 0; border: 0; background: transparent; color: rgba(var(--ink-rgb), .6); cursor: pointer; text-align: left; } .vizz-facet__toggle:hover { color: var(--color-text); } .vizz-facet__label { flex: 1 1 auto; min-width: 0; font-family: var(--font-heading); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .vizz-facet__chevron { flex: none; font-size: 12px; /* Closed points right, open points down (doc 02). */ transform: rotate(-90deg); transition: transform .15s ease; } .vizz-facet[data-open] .vizz-facet__chevron { transform: rotate(0deg); } /* Collapsed with grid-template-rows so the body animates to its own height and nothing has to be measured. It stays in the DOM: its checkboxes are part of the form and must keep submitting whether the group is open or not. The single .vizz-facet__inner child is not optional. `grid-template-rows: 0fr` sizes row 1 only; with the rows, the "Prikaži još" link and the year histogram as separate children, everything after the first landed in an implicit auto row and stayed visible while the group read as closed. */ .vizz-facet__body { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows var(--motion-duration) var(--motion-ease); } .vizz-facet[data-open] .vizz-facet__body { grid-template-rows: 1fr; } /* `min-height: 0` zeroes the item's *content* contribution, but its own padding still counts toward the automatic minimum — 8px of padding here left every collapsed group 8px tall, enough to leak the top of its first row. The spacing therefore goes on a child, inside the zeroed content box. */ .vizz-facet__inner { min-height: 0; } .vizz-facet__inner > :last-child { margin-bottom: 8px; } .vizz-facet__row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 14px; line-height: 1.35; cursor: pointer; } .vizz-facet__row:hover { color: var(--color-accent-700); } .vizz-facet__input { position: absolute; opacity: 0; width: 0; height: 0; } .vizz-facet__input:focus-visible + .vizz-check { outline: 2px solid var(--color-accent-700); outline-offset: 2px; } .vizz-check { margin-top: 1px; color: transparent; } :checked + .vizz-check { color: #fff; } .vizz-facet__value { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .vizz-facet__count { flex: none; font-size: 12px; color: rgba(var(--ink-rgb), .5); } .vizz-facet__empty { margin: 2px 0 6px; font-size: 12px; color: rgba(var(--ink-rgb), .5); } /* "Prikaži još N" re-renders this group in full on the server, so it is a plain link and nothing is unreachable without a script. */ .vizz-facet__more-link { display: inline-block; padding: 8px 0 14px; font-size: 12px; font-weight: 600; color: var(--color-accent-700); } .vizz-facet__more-link:hover { color: var(--color-accent-800); } /* An expanded group scrolls instead of pushing the results column down the page — `Predmet / tema` runs to 300-odd values here. */ .vizz-facet[data-expanded] .vizz-facet__rows { max-height: 340px; overflow-y: auto; /* Room for the scrollbar, so it does not sit on top of the counts. */ padding-right: 8px; } /* ── year histogram + range ───────────────────────────────────────── */ .vizz-hist { display: flex; align-items: flex-end; gap: 2px; height: 52px; margin: 6px 0 14px; } .vizz-hist__bar { flex: 1 1 0; min-height: 3px; background: rgba(var(--ink-rgb), .42); border-radius: 1px; } .vizz-hist__bar--empty { background: rgba(var(--ink-rgb), .09); } /* Two range inputs sharing one track. Both fill the box; the tracks are made invisible and click-through, and only the thumbs take pointer events, so the lower handle stays grabbable where the two overlap. --from / --to are set by vizz-search.js; without it they stay at 0%/100% and the fill spans the whole track, which is the correct unfiltered picture. */ .vizz-range { position: relative; height: 18px; margin-bottom: 6px; } .vizz-range__track, .vizz-range__fill { position: absolute; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; } .vizz-range__track { left: 0; right: 0; background: rgba(var(--ink-rgb), .25); } .vizz-range__fill { left: var(--from); right: calc(100% - var(--to)); background: var(--color-accent); } .vizz-range__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none; } .vizz-range__input::-webkit-slider-runnable-track { height: 100%; background: transparent; } .vizz-range__input::-moz-range-track { height: 100%; background: transparent; } .vizz-range__input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border: 0; border-radius: 2px; background: var(--color-text); cursor: grab; pointer-events: auto; } .vizz-range__input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 2px; background: var(--color-text); cursor: grab; pointer-events: auto; } .vizz-range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-accent-700); outline-offset: 2px; } .vizz-range__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-accent-700); outline-offset: 2px; } .vizz-range__bounds { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; padding-bottom: 4px; } /* ── results column ───────────────────────────────────────────────── */ .vizz-results { min-width: 0; padding-top: 34px; } .vizz-query { display: flex; align-items: center; gap: 4px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--color-divider); border-radius: var(--radius-pill); background: var(--color-surface); } .vizz-query:focus-within { outline: 2px solid var(--color-accent-700); outline-offset: 2px; } .vizz-query__input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 18px; border: 0; background: transparent; font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--color-text); } .vizz-query__input:focus { outline: none; } .vizz-query__input::placeholder { font-weight: 400; color: rgba(var(--ink-rgb), .42); } /* The UA's own clear affordance would sit beside ours. */ .vizz-query__input::-webkit-search-cancel-button { display: none; } .vizz-query__clear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: rgba(var(--ink-rgb), .5); font-size: 12px; } .vizz-query__clear:hover { background: var(--color-neutral-200); color: var(--color-text); text-decoration: none; } .vizz-query__submit { flex: none; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--motion-duration) var(--motion-ease); } .vizz-query__submit:hover { background: var(--color-accent-600); } .vizz-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .vizz-toolbar__count { font-family: var(--font-heading); font-size: 15px; font-weight: 600; } .vizz-chip:hover { background: var(--color-accent-300); text-decoration: none; color: var(--color-accent-800); } .vizz-toolbar__sort { display: flex; align-items: center; gap: 10px; margin-left: auto; } .vizz-toolbar__sort label { font-size: 13px; color: rgba(var(--ink-rgb), .55); } /* The prototype's "Relevantnost ▾" pill is a real