.search-page { max-width: 1400px; margin: 0 auto; padding: 10px 20px 40px; } .search-page-title { font-size: 1.8em; margin: 10px 0 20px; color: var(--text-primary); } .search-layout { display: flex; align-items: flex-start; gap: 24px; } /* Uses the site's real theme variables (defined in style.css, toggled via [data-theme="dark"] on ) — not invented ad-hoc ones. A first version of this file used a made-up --chip-bg with only a light fallback, which left chip text (inheriting body's --text-primary, white in dark mode) on a light background regardless of theme — unreadable in dark mode. */ .search-sidebar { flex: 0 0 260px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; } .search-main { flex: 1; min-width: 0; } .sf-search .search-input { width: 100%; } .sf-group { display: flex; flex-direction: column; gap: 8px; } .sf-group-label { font-weight: 600; font-size: 0.9em; color: var(--text-secondary); } .sf-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sf-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 20px; padding: 6px 12px; font-size: 0.85em; cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s; } .sf-chip input { accent-color: var(--accent-color); margin: 0; } .sf-chip:has(input:checked) { background: color-mix(in srgb, var(--accent-color) 20%, var(--card-bg)); border-color: var(--accent-color); font-weight: 600; } .sf-group-stack { gap: 10px; } .sf-group-stack select { width: 100%; } .sf-inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9em; cursor: pointer; color: var(--text-primary); } .reset-filters { width: 100%; justify-content: center; } .sf-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .sf-count { font-size: 0.95em; color: var(--text-secondary); } /* Bigger cards, 3 per row, overriding the global 5x200px grid used elsewhere (tale-cards.css) — scoped to .search-grid only. */ .search-grid.tales-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; width: 100%; max-width: none; background: transparent; } .search-grid .tale-card-wrapper, .search-grid .tale-card { width: 100%; max-width: none; } .search-grid .tale-poster img, .search-grid .tale-poster video { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; } .sf-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 24px; } .sf-pagination button { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 6px; padding: 8px 16px; cursor: pointer; font-weight: 600; } .sf-pagination button:disabled { opacity: 0.4; cursor: default; } .sf-pagination .sf-page-info { font-size: 0.9em; color: var(--text-secondary); } @media (max-width: 900px) { .search-layout { flex-direction: column; } .search-sidebar { flex: 1 1 auto; width: 100%; position: static; } .search-grid.tales-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .search-grid.tales-grid { grid-template-columns: 1fr; } .sf-topbar { flex-direction: column; align-items: flex-start; } }