/* ========================================================================== Species pages and the index above them. /who/ is one Pokemon and every printing of it the shop has had, English and Japanese together; /who.html is the eleven hundred of them, by letter. Deliberately small. There are more of these pages than of everything else on the site put together, so this file adds a band, a fact row, a letter index and nothing else -- the shelf, the tiles and the encounter tiers all come from set.css, which every one of these pages already loads. Hand-maintained; served as-is. Loaded after styles.css and set.css. ========================================================================== */ .page-who, .page-whoindex { background: var(--wash); color: var(--ink-white); } .page-who ::selection, .page-whoindex ::selection { background: var(--navy); color: #fff; } .crumb__sep { opacity: 0.32; font-size: 0.8rem; } /* ------------------------------------------------------------- the band */ /* The habitat's own hue, handed in as --who on by the importer, so one stylesheet dresses eleven hundred pages in eleven colours. */ .whoband { position: relative; overflow: hidden; padding-block: clamp(1.8rem, 4.5vw, 3rem); background: radial-gradient(74% 120% at 96% 8%, color-mix(in srgb, var(--who, #0e4a7b) 26%, transparent) 0%, transparent 70%), linear-gradient(166deg, color-mix(in srgb, var(--who, #0e4a7b) 12%, #fff) 0%, color-mix(in srgb, var(--who-light, #cfe3f5) 34%, #fff) 100%); border-bottom: 1px solid color-mix(in srgb, var(--who, #0e4a7b) 22%, var(--rule-white)); } .whoband__inner { display: grid; grid-template-columns: clamp(3.4rem, 9vw, 5.6rem) 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: start; } .whoband__art { width: 100%; height: auto; color: var(--who, #0e4a7b); opacity: 0.42; } .whoband h1 { margin: 0.25rem 0 0.6rem; font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.05; } .whoband__blurb { margin: 0 0 1.1rem; max-width: 40rem; } /* One row, one fact each, in the type's colour. Same shape as the set page's band facts; not shared with them because that band is a different width and the two have drifted before. */ .whoband__facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0; font-size: 0.92rem; } .whoband__facts dd { margin: 0; } .whoband__facts b { color: color-mix(in srgb, var(--who, #0e4a7b) 78%, #000); font-variant-numeric: lining-nums tabular-nums; } .whoshelf { padding-block: clamp(1.6rem, 4vw, 2.4rem) clamp(3rem, 7vw, 4.5rem); } /* ------------------------------------------------------- round here */ .whonext { margin-top: clamp(2rem, 5vw, 3rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--rule-white); } .whonext h2 { margin: 0 0 0.8rem; font-size: clamp(1.1rem, 2.6vw, 1.35rem); } .whonext p { margin: 0 0 1rem; } .whonext__room { font-weight: 600; color: color-mix(in srgb, var(--who, #0e4a7b) 82%, #000); } .whonear { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; } .whonear a, .whoindex__cell a, .landed__from a { text-decoration: none; } .whonear a { display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid color-mix(in srgb, var(--who, #0e4a7b) 24%, var(--rule-white)); border-radius: 999px; background: #fff; color: var(--navy-deep); font-size: 0.88rem; } .whonear a:hover { border-color: var(--who, #0e4a7b); } /* ------------------------------------------------------------ the index */ .whoindex { padding-block: clamp(1.6rem, 4vw, 2.6rem) clamp(3rem, 7vw, 5rem); } .whoindex__head { max-width: 46rem; } .whoindex__head h1 { margin: 0.3rem 0 0.8rem; } .whoindex__head p { margin: 0 0 1.2rem; } /* The letter rail, sticky so it stays reachable through eleven hundred names. */ .whorail { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); padding: 0.6rem 0; list-style: none; background: var(--wash); } .whorail a { display: grid; place-items: center; min-width: 2rem; min-height: 2rem; border: 1px solid var(--rule-white); border-radius: 0.4rem; background: #fff; color: var(--navy-deep); font-weight: 600; text-decoration: none; } .whorail a:hover { border-color: var(--navy); } .wholetter { margin: 0 0 clamp(1.8rem, 4vw, 2.6rem); scroll-margin-top: 4rem; } .wholetter h2 { margin: 0 0 0.8rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule-white); font-size: 1.5rem; } /* Names in columns rather than a list: eleven hundred of them down one edge of a wide screen is a scroll nobody finishes. */ .whoindex__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.35rem 1.2rem; margin: 0; padding: 0; list-style: none; } .whoindex__cell a { color: var(--ink-white); } .whoindex__cell a:hover { color: var(--navy-deep); text-decoration: underline; } .whoindex__cell span { opacity: 0.45; font-size: 0.82rem; font-variant-numeric: tabular-nums; } /* A name with nothing in stock is still catalogued and still linked -- the next copy through the door is usually one of these -- but it says so. */ .whoindex__cell.is-out a { opacity: 0.55; }