/* ============================================================================ MarketPro academy — the browse surface: search, level chips, sort, result count, empty state and the category rail. Loaded only on /academy, /academy/all and the 16 hubs, via `page.head`, so it comes after site.css and seo.css in the cascade and wins any tie with them. Tokens come from site.css. Class names match the `browseBar` component in src/pages/academy.mjs. One rule of this file matters more than the rest: nothing here hides content. The browse bar, the results list and the empty state carry the `hidden` attribute in the served HTML and assets/academy.js removes it, so with the script gone the page is the static directory it always was. No selector in this file hides anything a reader is entitled to see, which is the distinction `.reveal` in site.css gets wrong. ========================================================================== */ /* --------------------------------------------------------------------------- 1. The browse bar ------------------------------------------------------------------------- */ /* `display: grid` below outranks the UA sheet's `[hidden] { display: none }`, so without this the browse bar leaked through with JS disabled and offered a dead search box. academy.js clears the attribute once it has booted. */ .academy-browse[hidden] { display: none; } .academy-browse { display: grid; gap: 14px; margin: 18px 0 26px; padding: 20px 22px; border: 1px solid var(--hairline); border-radius: var(--r-card-sm); background: var(--surface); } /* ---- search field ---- */ .ab-label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--text-secondary); margin-bottom: 7px; } .ab-input { font-family: var(--font-body); font-size: 16px; /* never below 16px: iOS zooms the page on focus */ color: var(--text-primary); background-color: rgba(255,255,255,0.04); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 13px 16px 13px 44px; width: 100%; transition: border-color .25s, background-color .25s; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='9' cy='9' r='6' stroke='%239FB0BC' stroke-width='1.7'/%3E%3Cpath d='M13.5 13.5 17 17' stroke='%239FB0BC' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 15px center; background-size: 18px; } .ab-input::placeholder { color: var(--text-muted); } .ab-input:focus { outline: none; border-color: var(--signal); background-color: rgba(0,179,126,0.06); } /* Safari draws its own widgets on type=search and they land on the icon. */ .ab-input::-webkit-search-decoration, .ab-input::-webkit-search-results-button { -webkit-appearance: none; } /* ---- level chips and the sort control ---- */ .ab-facets { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; } .ab-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ab-chip { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--text-secondary); background: transparent; border: 1px solid var(--hairline-strong); border-radius: var(--r-chip); padding: 7px 15px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; } .ab-chip:hover { color: var(--text-primary); border-color: var(--text-muted); } .ab-chip.is-on, .ab-chip[aria-pressed="true"] { color: var(--signal); border-color: var(--signal-muted); background: var(--signal-faint); } .ab-n { margin-left: 5px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .ab-chip.is-on .ab-n, .ab-chip[aria-pressed="true"] .ab-n { color: var(--signal); opacity: .75; } .ab-sort { display: flex; align-items: center; gap: 9px; } .ab-sort-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); } .ab-select { font-family: var(--font-body); font-size: 13.5px; color: var(--text-primary); background-color: rgba(255,255,255,0.04); border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 8px 34px 8px 12px; cursor: pointer; transition: border-color .25s, background-color .25s; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%239FB0BC' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 11px; } .ab-select:hover { border-color: var(--text-muted); } .ab-select:focus { outline: none; border-color: var(--signal); background-color: rgba(0,179,126,0.06); } .ab-select option { background: var(--surface-overlay); color: var(--text-primary); } /* ---- result count and empty state ---- */ .ab-count { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-height: 1.3em; /* reserved, so announcing a count never shifts the list */ } .ab-count:empty { min-height: 0; } .ab-empty { margin: 8px 0 0; padding: 22px 20px; border: 1px dashed var(--hairline-strong); border-radius: var(--r-icon); font-size: 14.5px; color: var(--text-secondary); text-align: center; } .ab-clear { font: inherit; color: var(--signal); background: none; border: 0; border-bottom: 1px solid var(--signal-muted); padding: 0 0 1px; cursor: pointer; } .ab-clear:hover { border-bottom-color: var(--signal); } /* --------------------------------------------------------------------------- 2. Focus. Every control here is reached by keyboard before it is reached by a pointer, and the lesson rows are the search results themselves. ------------------------------------------------------------------------- */ .ab-chip:focus-visible, .ab-select:focus-visible, .ab-clear:focus-visible, .academy-rail a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; } .ab-input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* seo.css gives .lesson-rows a hover state and no focus state, and arrow keys move focus through those rows. Scoped to lists that sit under a mounted browse bar, so this file never restyles the row component anywhere else. */ .academy-browse ~ .lesson-rows a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-color: var(--signal-muted); background: var(--surface-raised); } /* --------------------------------------------------------------------------- 3. Two rules that belong to the filter, not to the row component ------------------------------------------------------------------------- */ /* .lesson-rows is a grid, so a filtered-out row has to leave the flow rather than collapse to a zero-height track. `hidden` is the only state academy.js ever puts on a row: rows are never detached, so the served markup and the crawl path are intact whatever the reader has filtered to. */ .lesson-rows > li[hidden] { display: none !important; } /* The numbered variant counts rows in DOM order. Once the reader has sorted by length or by relevance that number is no longer the curriculum position, so it stops claiming to be one. The attribute is set only by academy.js. */ .lesson-rows[data-academy-sorted].lesson-rows--numbered a::before { display: none; } /* --------------------------------------------------------------------------- 4. The category rail One element, two shapes: a horizontal scrolling chip strip on narrow screens, a sticky column from 1080px up. One element rather than two so the sixteen category links appear once per page rather than twice, which keeps the internal link graph honest and the screen-reader tree short. It is a plain