@font-face { font-family: "Press Start 2P"; src: url("assets/fonts/PressStart2P.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "VT323"; src: url("assets/fonts/VT323.ttf") format("truetype"); font-display: swap; } :root { --px: "Press Start 2P", monospace; --vt: "VT323", monospace; /* No wordmark face. Every page title used to be set in Basset, loaded from a Typekit kit. The site's only runtime third-party host. The drawn logo in the corner is the wordmark now, so the page title beside it is ordinary UI text in --px and the kit is gone from every . */ /* Control type scale. Three sizes, keyed to what kind of control it is. Before this, the same kind of button was 9px on the desktop header, 8px in the mobile bar and 7px in a dropdown, because each spot had been tuned on its own. --btn-fs primary controls: buttons, tabs, page links --btn-fs-sm dense controls: type chips, segmented controls, menu options --field-fs things you type in or choose from: search fields, selects The mobile block near the bottom of this file drops each one a step; that is the only place they change. Nothing should set a font-size on a control directly. If a label does not fit, shorten the label or widen the control. */ --btn-fs: 9px; --btn-fs-sm: 8px; --field-fs: 19px; --paper: #f8efd8; --paper-2: #efe3c2; --paper-ink: #2a251a; --paper-dim: #6b6250; /* Rules and outlines on paper surfaces. Its own variable and not --paper-ink, which these used to borrow: that one has to go light in dark mode because it is the TEXT colour, which turned every detail tab's outline and the rule under them white. A border is not text and does not flip with it. Same value as --paper-ink in the light palette, so nothing moves there. */ --paper-edge: #2a251a; --c-normal: #a8a77a; --c-fire: #f08030; --c-water: #6390f0; --c-electric: #f7d02c; --c-grass: #7ac74c; --c-ice: #96d9d6; --c-fighting: #d3425f; --c-poison: #b567ce; --c-ground: #e2bf65; --c-flying: #a98ff3; --c-psychic: #f95587; --c-bug: #a6b91a; --c-rock: #b6a136; --c-ghost: #7975d4; --c-dragon: #6f35fc; --c-dark: #75574c; --c-steel: #b7b7ce; --c-fairy: #d685ad; /* One colour per game, for the version chips on a dex entry. Taken from each game's box or mascot, so Sword is Zacian blue and Shield is Zamazenta red. Every version key in data.json needs an entry here or its chip falls back to the plain grey. */ /* Gen 1 */ --v-red: #d0342c; --v-blue: #3d6dc4; --v-yellow: #f2c218; --v-red-japan: #d0342c; --v-green-japan: #3fa34a; --v-blue-japan: #5b8fd6; /* Gen 2 */ --v-gold: #d5a533; --v-silver: #a7aeb5; --v-crystal: #5fc4d8; /* Gen 3 */ --v-ruby: #c0392b; --v-sapphire: #2a6fbe; --v-emerald: #2f9e5e; --v-firered: #ef6a2b; --v-leafgreen: #63b544; --v-colosseum: #6b5b8a; --v-xd: #7a4fa3; /* Gen 4 */ --v-diamond: #7fb2dd; --v-pearl: #e39ab5; --v-platinum: #8e9aa6; --v-heartgold: #d5a533; --v-soulsilver: #a7aeb5; /* Gen 5 */ --v-black: #33333a; --v-white: #e8e8e8; --v-black-2: #33333a; --v-white-2: #e8e8e8; /* Gen 6 */ --v-x: #2f7ec4; --v-y: #c0392b; --v-omega-ruby: #b8342a; --v-alpha-sapphire: #2360a8; /* Gen 7 */ --v-sun: #f0972b; --v-moon: #5a52a8; --v-ultra-sun: #e0761b; --v-ultra-moon: #463f92; --v-lets-go-pikachu: #f2c218; --v-lets-go-eevee: #b98254; /* Gen 8 */ --v-sword: #2f80c4; --v-shield: #c8353c; --v-the-isle-of-armor: #3fa38c; --v-the-crown-tundra: #8cc0dd; --v-brilliant-diamond: #7fb2dd; --v-shining-pearl: #e39ab5; --v-legends-arceus: #c9a44c; /* Gen 9 */ --v-scarlet: #d4432c; --v-violet: #7c4fa8; --v-the-teal-mask: #2f9e93; --v-the-indigo-disk: #3f4fa8; --v-legends-z-a: #3fa34a; /* Gen 10: the soft mint of the Pokemon Winds wordmark. Pale, so the chip takes dark ink like the other light games. */ --v-winds-waves: #8ed3a6; } /* ---------- Handheld-screen palette (bright, reads on any wallpaper) ---------- JS sets --wall, --scene, --accent, --accent-ink and --field per wallpaper. */ body { --field: #cbb78a; --wall: none; --scene: none; --accent: #e5484d; --accent-ink: #fff; --panel: color-mix(in srgb, var(--field) 14%, #f7f2e6); --panel-2: color-mix(in srgb, var(--field) 22%, #ece3cd); --edge: #37301f; --edge-hi: #fffdf3; --ink: #2b2519; --ink-dim: #7a7058; } /* ---------- Dark mode ---------- A standalone toggle in the header, unlike Dream World and Porygon's Cache where the palette is tied to which companion is out. Class on , set pre-paint by an inline script in index.html so a reload never flashes light. The wallpaper is untouched. --field, --wall and --accent are the scenery and the wallpaper picker owns them; this flips only the surfaces drawn ON that scenery: panels, cards, borders, text. So Forest stays Forest at midnight, and every wallpaper keeps working without a second dark-mode colour being chosen for each of the eighteen. --panel and --panel-2 keep mixing in --field exactly as the light palette does, so a panel still picks up a tint from the wallpaper behind it instead of going flat grey. Only the base they mix into changes. */ .dex-dark { --paper: #1b2133; --paper-2: #232a40; --paper-ink: #e9edf9; --paper-dim: #99a4c2; /* Matches --edge, so a rule on a dialog reads like every other border on the page instead of glowing white against it. */ --paper-edge: #05070e; } .dex-dark body { --panel: color-mix(in srgb, var(--field) 12%, #191f2f); --panel-2: color-mix(in srgb, var(--field) 18%, #141926); --edge: #05070e; --edge-hi: #3a4460; --ink: #e9edf9; --ink-dim: #98a3c1; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Site-wide: on iOS Safari the rubber-band overscroll bounce reveals blank space (or whatever sits behind a fixed overlay) past the top/bottom edge of the page. overscroll-behavior kills that bounce everywhere for free, so no position:fixed body-locking hack is needed (that trick pins the ENTIRE page as one compositor layer, which is expensive/crash-prone on a page this long). */ html, body { overscroll-behavior-y: none; } /* Site-wide: showModal() moves focus to the first control inside the dialog, and Safari paints its blue ring for that even though nobody pressed a key. It landed on the first sprite in the archive and on the close X elsewhere. Chrome hides it under its own :focus-visible heuristics. That is why it only showed up on iPhone and desktop Safari. Every focus style on this site is already written against :focus-visible, so drop the UA ring whenever that does not match. A browser without :focus-visible throws the whole rule out and keeps its ring, which is the safe way to fail. */ :focus:not(:focus-visible) { outline: none; } body { margin: 0; font-family: var(--vt); color: var(--ink); background: var(--field) var(--wall) repeat top left; background-size: 96px auto; min-height: 100vh; transition: background-color 0.4s; } /* Particle field sits above the wallpaper, below the cards. */ #fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; } img { image-rendering: pixelated; } img.smooth, .smooth { image-rendering: auto; } /* ---------- Pixel building blocks ---------- */ .pxbox { background: var(--panel); border: 3px solid var(--edge); border-radius: 3px; box-shadow: inset 0 0 0 2px var(--edge-hi), 4px 4px 0 rgba(0, 0, 0, 0.35); } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--panel-2); border-bottom: 3px solid var(--edge); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); /* Extend the opaque header up into the iOS status-bar / notch zone so scrolled content can't peek through it there. Zero on every device without a safe area (env resolves to 0px), so this changes nothing off iOS. */ padding-top: env(safe-area-inset-top, 0px); } .topbar-inner { max-width: 1280px; margin: 0 auto; /* Vertical and horizontal padding differ: 22px top and bottom is the header's rhythm, but the sides stay at 24px so the brand row lines up with the filter band and the grid, which both sit on a 24px gutter. */ padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; } .brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* One optical rhythm across the whole lockup: sprite art, wordmark, divider and subtitle all sit 12px apart TO the eye. `gap` alone can't deliver that, because two of these carry invisible space a box-level gap knows nothing about: the sprite's transparent canvas margin and the wordmark's italic overhang. Both are cancelled at their source below, so this number means what it says. */ .brand { display: flex; align-items: center; gap: 12px; } .brand h1 { margin: 0; font-family: var(--px); font-size: 16px; letter-spacing: 0.04em; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4); } /* Every page title is now live text in Basset, replacing the old wordmark SVGs, so the

carries the real words and the title is selectable and translatable. Where 28px comes from: Basset's caps are 0.667 of the font size, and the wordmark this replaced drew its letters 18.6px tall (a 30px tall box whose glyphs filled 152.03 of a 245.23 viewBox). 28 x 0.667 = 18.7, so the title sits at the same weight against the sprite as it always did. Basset is a caps-only face; the markup stays sentence case so the text reads correctly when the font does not load, and the shaping does the rest. line-height:1 replaces the old 0: that zero only worked because the child was a block . Left on text it collapses the h1 and lets long titles stack on themselves on a phone. Scoped inside .brand for specificity: every one of these titles is already in a .brand, and a bare .brand-logo (0,1,0) loses to `.brand h1` (0,1,1) above, which would serve the whole site's wordmarks in 16px Press Start 2P. The old .brand .tcg-logo rule was written around the same problem. */ /* The page title, beside the corner logo. Press Start 2P, not the Basset wordmark face it replaced: with a drawn logo carrying the brand, the title is just a label and the site already has a face for those. 15px, not the 28 Basset ran at. Basset's caps are 0.667 of the font size, so 28px drew 18.7px letters; Press Start 2P fills its em almost entirely, and 15 here lands at about the same cap height. No margin-right either, that reserved the overhang of a steep italic, and this face is upright. Scoped inside .brand: a bare .brand-logo (0,1,0) loses to `.brand h1` (0,1,1) above, which would serve every title in 16px. That specificity trap has bitten this rule before. */ .brand .brand-logo { font-family: var(--px); font-size: 15px; line-height: 1.4; letter-spacing: 0.04em; white-space: nowrap; color: var(--ink); /* No drop shadow. `.brand h1` above throws one, which suited a big wordmark but reads as noise on a 15px label sitting under the drawn logo. */ text-shadow: none; } /* The page header shape, everywhere but the dex: corner logo, then the page title with its subheading stacked underneath. */ .brand-mark { flex: 0 0 auto; line-height: 0; } .brand-mark img { display: block; height: 44px; width: auto; } .brand-stack { display: flex; flex-direction: column; /* Tight: the title and its subheading are one unit, not two rows. */ gap: 3px; min-width: 0; } /* Inside the stack the subheading sits UNDER the title, so it drops the divider rule and the indent it needs when it sits beside one. */ .brand-stack .brand-tagline { padding-left: 0; border-left: 0; font-size: 8px; line-height: 1.5; } /* The dex keeps the drawn logo AS its title, with no page name beside it. Scoped to its own class so every other page keeps its text title. margin-right goes back to 0: the 3.5px above reserves the italic overhang of a Basset glyph, and an image has no overhang to reserve. line-height:0 stops the h1 keeping a text line's worth of height under the picture. */ .brand .brand-logo-img { margin-right: 0; line-height: 0; } .brand .brand-logo-img img { display: block; height: 44px; width: auto; } /* The subheading naming what a page holds. It now sits under its title inside .brand-stack, which zeroes the divider below; the rule and indent here are what it uses anywhere it still sits beside something. Hidden on the narrower widths by the queries further down. */ .brand-tagline { margin: 0; padding-left: 12px; border-left: 2px solid var(--edge-hi); font-family: var(--px); font-size: 9px; line-height: 1.7; letter-spacing: 0.04em; color: var(--ink-dim); /* Never wrap: a two-line subtitle beside a one-line wordmark looks like a layout accident, and the extra height pushes the sticky header taller. It is hidden entirely below the breakpoint instead. */ white-space: nowrap; } /* Each page's line is a different length, so each disappears at its own width; neither defers to the longer one. The numbers are measured: brand + gap + buttons + padding comes to 1059px on Dream World and 1246px on Porygon's Cache, and below that the topbar wraps the buttons onto a second row, which is worse than losing the subtitle. */ @media (max-width: 1080px) { .dw-body .brand-tagline { display: none; } } @media (max-width: 1270px) { .pc-body .brand-tagline { display: none; } } /* World Archives, measured the same way: brand + tagline is 609px and its actions 463px, which with the 12px gap and 40px of padding needs 1124px before the buttons wrap onto a second row. 1130 keeps a little margin. */ @media (max-width: 1130px) { .wa-body .brand-tagline { display: none; } } /* UNUSED as of the header rework: every page now opens with the drawn corner logo, and no markup carries this class. Kept because the sprite is the obvious thing to reach for if a compact header is ever wanted again, and the arithmetic below took measuring. bebe.webp holds 5x art with a 20px top and 5px bottom margin on a 155px canvas, so her ink sits 1.65px low once contained into 34px, and the negative inline margin pulls her empty canvas out of the flex gap. */ .brand-sprite { --box: 34px; width: var(--box); height: var(--box); margin-inline: calc((var(--box) * 95 / 155 - var(--box)) / 2); object-fit: contain; image-rendering: pixelated; transform: translateY(-2px); } .hdr-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } /* Desktop: .filters is transparent to layout, so the dex-tabs / controls / type rows sit directly in the header exactly as before. Mobile turns it into a collapsible overlay (see media query). */ .filters { display: contents; } /* Desktop header splits into two zones, mirroring Dream World: site-level navigation on the brand row (Bebe's PC, Donate, Dream World, Tier List Builder), then everything that acts on the dex grouped below a divider. The controls previously ran straight on from the brand row as one long block, which made the header hard to scan. This also leaves an obvious place to add another top-level section alongside Dream World later. The band lives OUTSIDE .topbar-inner (see index.html) so it spans the full header width like Dream World's tab band, instead of stopping at the content cap. Doing it from inside that container would have needed a 100vw escape, which overflows horizontally wherever scrollbars take up layout space. Scoped to a min-width that pairs with the 720px mobile breakpoint, leaving the base rule alone, because mobile turns .filters into a drop-down overlay with its own display, background and borders; styling the base rule would leak into that. */ @media (min-width: 721px) { .filters { display: flex; flex-direction: column; gap: 10px; /* Full-bleed band, but the padding re-centres its contents onto the same column as the brand row above and the grid below. max() keeps a sane gutter once the viewport is narrower than the content cap. Top and bottom match, so the first control row sits as far from the divider as the last one sits from the header edge. */ padding: 18px max(24px, calc((100% - 1280px) / 2 + 24px)) 18px; border-top: 3px solid var(--edge); background: var(--panel); } /* Collapsed: the whole band goes, divider included, so the header shrinks to just the navigation row. */ body.filters-collapsed .filters { display: none; } /* .topbar-inner keeps its base 24px all round, so the brand row sits with equal space above it and below it before the divider. */ } /* Shown only on mobile: the hamburger and the relocated search+shiny bar. */ .mobile-only { display: none; } .mobile-primary { display: none; } .count { font-family: var(--px); font-size: 8px; line-height: 1.6; color: var(--ink-dim); text-align: right; max-width: 300px; } /* Counter sits just right of the "Bebe's PC" logo. No margin of its own: it is the third beat of the lockup and takes the shared 12px like everything else. The old 2px was propping up a gap the wordmark's overhang was eating. */ .brand .count { align-self: center; text-align: left; white-space: nowrap; } /* ---------- Theme picker ---------- */ /* ---------- Wallpaper picker ---------- */ .wp-wrap { position: relative; } /* One line, always: names like "Snow 2" and "Team Aqua" were wrapping into a two-line button wherever the bar got tight. The button grows instead. */ .wp-btn { display: flex; align-items: center; gap: 7px; white-space: nowrap; } /* Trim the vertical padding (higher specificity than .px-btn) so the swatch doesn't make this button taller than the plain buttons beside it. */ .px-btn.wp-btn { padding: 6px 12px; } .wp-swatch { width: 18px; height: 15px; border: 2px solid var(--edge); background-size: cover; background-position: center; image-rendering: pixelated; } .wp-pop[hidden] { display: none; } .wp-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; width: 320px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; background: var(--panel-2); border: 3px solid var(--edge); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--edge-hi), 6px 6px 0 rgba(0, 0, 0, 0.4); animation: pop-in 0.18s ease-out both; } .wp-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 4px 4px; background: none; border: 2px solid transparent; border-radius: 3px; cursor: pointer; transition: transform 0.12s ease-out; } .wp-opt img { width: 100%; height: 42px; object-fit: cover; object-position: top; border: 2px solid var(--edge); image-rendering: pixelated; } .wp-opt span { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--ink-dim); } .wp-opt:hover { transform: translateY(-2px); } .wp-opt:hover span { color: var(--ink); } .wp-opt.on { border-color: var(--accent); } .wp-opt.on span { color: var(--ink); } /* ---------- Companion picker ---------- */ /* Same shape as the wallpaper picker, but the swatch/options are PMD portraits instead of scenery. "None" reuses Mew's portrait, greyed out. */ .fol-wrap { position: relative; } .fol-btn { display: flex; align-items: center; gap: 7px; } .px-btn.fol-btn { padding: 6px 12px; } .fol-swatch { width: 18px; height: 15px; /* Match .wp-swatch so the button isn't taller than its neighbours */ border: 2px solid var(--edge); background-size: cover; background-position: center; image-rendering: pixelated; } .fol-swatch.dim { filter: grayscale(1) opacity(0.45); } .fol-pop[hidden] { display: none; } .fol-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; width: 288px; display: grid; /* Minmax(0, ...) because a bare 1fr can't shrink below the label's min-content width, which let the longest name (JIRACHI) steal space and squeeze the shorter ones into slivers. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; background: var(--panel-2); border: 3px solid var(--edge); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--edge-hi), 6px 6px 0 rgba(0, 0, 0, 0.4); animation: pop-in 0.18s ease-out both; } .fol-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 4px 4px; background: none; border: 2px solid transparent; border-radius: 3px; cursor: pointer; transition: transform 0.12s ease-out; } /* A fixed square (width:100% would vary) keeps every option the same shape whatever its label. 44px = the 40px portrait + 2px border each side (border-box), so the pixel art still renders 1:1; a fractional scale would blur it. */ .fol-opt img { width: 44px; height: 44px; object-fit: contain; border: 2px solid var(--edge); background: var(--panel); image-rendering: pixelated; } .fol-opt img.dim { filter: grayscale(1) opacity(0.45); } .fol-opt span { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; } .fol-opt:hover { transform: translateY(-2px); } .fol-opt:hover span { color: var(--ink); } .fol-opt.on { border-color: var(--accent); } .fol-opt.on span { color: var(--ink); } /* ---------- Dex tabs ---------- */ .dex-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .dex-tab { font-family: var(--px); font-size: var(--btn-fs); padding: 9px 13px 8px; color: var(--ink-dim); background: var(--panel); border: 3px solid var(--edge); border-radius: 3px; cursor: pointer; transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, color 0.12s; } .dex-tab:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3); } .dex-tab:active { transform: translate(1px, 1px); box-shadow: none; } .dex-tab.on { color: var(--accent-ink); background: var(--accent); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.25), 3px 3px 0 rgba(0, 0, 0, 0.3); } /* On desktop the action buttons (sprite toggle/wallpaper/team/mew/guide/shiny) sit on the dex-tabs row; the sprite toggle starts the right-aligned group so the count stays next to "Other" on the left. */ .dex-tabs { align-items: center; } .dex-tabs > .spr-toggle { margin-left: auto; } /* Sprite/HOME toggle: a plain square icon button, no label. */ /* Needs the .px-btn double-class specificity to zero the padding: plain .px-btn { padding: 9px 12px } is declared later and would otherwise win, leaving a 4px content box that squeezes the icon to a sliver. Same fix the wallpaper button uses. */ .px-btn.spr-toggle { display: inline-flex; align-items: center; justify-content: center; /* Square, sized to the 33px the sibling .px-btns resolve to (9px padding + 9px line box + 3px borders), so the row of buttons lines up flush. */ width: 33px; height: 33px; padding: 0; flex: 0 0 auto; } /* Sits a little inset in the 33px square. The disc isn't at an exact integer scale; it relies on shape-rendering:crispEdges (set in the markup) to keep its steps hard-edged at this size. */ .spr-toggle svg { width: 20px; height: 20px; display: block; flex: 0 0 auto; } /* Positive/negative pair, both carrying the active wallpaper's accent colour (JS sets --accent per wallpaper, so these follow the scenery automatically): pixel mode -> blocky disc filled with the accent on the plain button HOME mode -> inverted, the whole square fills with the accent and a smooth circle is knocked out of it. The knockout uses --accent-ink, which JS derives per wallpaper as black-or-white against that accent, so it lands on white for these mid-dark accents and reads exactly like a punched hole. */ .spr-toggle .spr-px rect { fill: var(--accent); } .spr-toggle .spr-round circle { fill: var(--accent-ink); } .px-btn.spr-toggle.on { background: var(--accent); } /* The tier toolbar stretches its controls to 38px (set by the search field's taller box), so the square is 38px there, versus the header's 33px. Both numbers are "match the siblings"; aspect-ratio can't do it automatically, since a flex item's main size still comes from its content. */ .tier-toolbar .px-btn.spr-toggle { width: 38px; height: 38px; } /* .on marks HOME mode, so the smooth circle shows there and the disc otherwise. */ .spr-toggle .spr-round { display: none; } .spr-toggle.on .spr-px { display: none; } .spr-toggle.on .spr-round { display: block; } /* ---------- Site-wide search ---------- Sits at the left of the header actions, before Donate. Not to be confused with #q in the filter band, which narrows the grid; this one navigates. */ /* .topbar-inner is capped at max-width 1280px, so the header's budget does NOT grow with the screen, there is the same room at 2560px as at 1280px, and this width has to be measured against it, not picked. Measured, the other controls take 529px of the 712px this row gets. At 220px the dark-mode and collapse buttons were pushed onto a second line at EVERY width, so this is 170px. Dropping Bebe's sprite from the corner gave the brand back 46px, so there is slack now, but re-measure before spending it, and re-measure again if anything else joins this row. */ .site-search { position: relative; flex: 0 1 170px; min-width: 120px; } /* .px-btn.ss-open, not .ss-open: .px-btn is defined further down this file, so a bare class ties on specificity and loses on source order, which is why .spr-toggle, .dark-toggle and .filters-toggle are all written this way too. Left plain, .px-btn's 9px 12px padding squeezed the magnifier into a 9px box and it rendered 3px wide. */ .px-btn.ss-open { display: none; } #siteSearchInput { width: 100%; height: 33px; /* Matches the buttons either side of it */ padding: 0 10px; font-family: var(--vt); font-size: 17px; color: var(--ink); background: var(--panel-2); border: 3px solid var(--edge); border-radius: 3px; outline: none; } #siteSearchInput::placeholder { color: var(--ink-dim); } #siteSearchInput:focus { box-shadow: inset 0 0 0 2px var(--accent); } .ss-pop { position: absolute; top: calc(100% + 6px); /* Start flush with the box; app.js nudges it after each render so it stays on screen. A fixed anchor cannot work here: the header row wraps at some widths, which moves this box from the right-hand end of the row to the left, and whichever side were pinned would be the wrong one half the time. */ left: 0; /* Wider than the bar: "Gym Leaders, Elite Four and Champions" has nowhere to go in 220px. */ width: max(430px, 100%); z-index: 60; max-height: 60vh; overflow: auto; padding: 4px; background: var(--panel); border: 3px solid var(--edge); border-radius: 4px; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35); } .ss-row { width: 100%; display: grid; /* The label gets a floor and the hint gives way: with plain `auto` on the hint, a long one squeezed "Dream World" down to "Dream W...". */ grid-template-columns: 28px minmax(110px, 1fr) minmax(0, auto); align-items: center; gap: 8px; padding: 6px 7px; font-family: var(--vt); font-size: 17px; text-align: left; color: var(--ink); background: none; border: 0; border-radius: 3px; cursor: pointer; } .ss-row.on { color: var(--accent-ink); background: var(--accent); } .ss-art { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; } .ss-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-kind { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-row.on .ss-kind { color: var(--accent-ink); opacity: 0.85; } .ss-empty { padding: 10px 8px; font-family: var(--vt); font-size: 17px; color: var(--ink-dim); } /* Below this width the header cannot hold the bar AND the four controls beside it: measured at 900px there were 31px spare, so the row wrapped onto two lines. Instead of let that happen the bar becomes a square icon and the field opens over the header when clicked. The threshold is where a usable ~190px field stops fitting, not a round number picked by eye. 1080px is already a breakpoint further up this file, for the Dream World tagline. Same number, unrelated reason. Do not merge the two blocks. */ @media (max-width: 1080px) { .site-search { flex: 0 0 auto; min-width: 0; } .px-btn.ss-open { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; padding: 0; } .px-btn.ss-open svg { width: 19px; height: 19px; color: var(--accent); } /* Absolute, so opening the field never reflows the row it sits in. */ #siteSearchInput { position: absolute; right: 0; top: 0; width: 260px; z-index: 61; display: none; } .site-search.open #siteSearchInput { display: block; } .site-search.open .px-btn.ss-open { visibility: hidden; } } /* Dark mode toggle. Same 33px square as the collapse control beside it, and the icon carries the wallpaper's accent like the sprite toggle does, so it belongs to the row instead of sitting on it. */ .px-btn.dark-toggle { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; padding: 0; flex: 0 0 auto; } /* One size for both: each icon's artwork fills its own viewBox edge to edge (measured, not assumed), so equal boxes give equal ink. An earlier pair needed different numbers because that sun carried its rays as padding around a much smaller disc, if the artwork is ever swapped again, check that before trusting this single rule. */ .dark-toggle svg { width: 18px; height: 18px; display: block; fill: var(--accent); } /* Shows the mode you are in, not the one you would switch to: sun while light, moon once dark. Matches .spr-toggle, which also shows its current state. */ .dark-toggle .dm-moon { display: none; } .dex-dark .dark-toggle .dm-sun { display: none; } .dex-dark .dark-toggle .dm-moon { display: block; } /* Collapse control for the filter band. Square icon button like the sprite toggle, so it lines up with its neighbours in the row. The triangle points up while the band is open (click to hide) and flips when it is collapsed. */ .px-btn.filters-toggle { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; padding: 0; flex: 0 0 auto; } .filters-toggle svg { width: 12px; height: 8px; fill: currentColor; transition: rotate 0.18s ease-out; } /* The archive pages' toolbar and the card browser's, collapsed by the same body flag. NOT inside a media query: these two collapse at every width, , and that is what the arrow is for on a phone, where the header is just the logo and this control and everything else lives in the strip below. */ body.filters-collapsed .beta-toolbar, body.filters-collapsed .tier-toolbar, body.filters-collapsed .tcg-toolbar { display: none; } body.filters-collapsed .filters-toggle svg { rotate: 180deg; } /* Button icons are inline SVGs, replacing the ✦ and ☰ characters. Those were sized by font-size, so at the 8-9px these rows use they were unreadable, and their baselines never lined up with the label. These sit in a flex row with the text, which also centres the pair properly. */ .btn-ico { fill: currentColor; flex: 0 0 auto; } .ico-shiny { width: 13px; height: 13px; } /* 13x10 is 1.30; the mark's own viewBox is 431.29x332.48, or 1.297. Close enough that the box needs no change. NOTE the markup drops the `shape-rendering="crispEdges"` the old three-bar icon carried: that mark sat on a 10x8 integer grid where snapping was free, and this one does not, so snapping would round its three bars to different thicknesses. */ .ico-menu { width: 13px; height: 10px; } /* Alignment only. No `display` here: .adv-toggle is .mobile-only, and `.mobile-only { display: none }` further up carries the same specificity, so setting display on this shared rule would win on document order alone and leak the Filters button onto desktop. Each button gets its display where it is actually shown. */ .shiny-tab, .adv-toggle { align-items: center; justify-content: center; gap: 6px; } /* The 13px icon is taller than the 9px text line it sits beside, so it would otherwise push this button past the dex tabs it lines up with. Give the difference back from the vertical padding to hold 32px. Mobile and the tier toolbar set an explicit height, so they are unaffected either way. */ .shiny-tab { display: inline-flex; padding-top: 7px; padding-bottom: 6px; } /* Shiny toggle gets a golden sparkle when active. */ .shiny-tab.on { color: #3a2c00; background: linear-gradient(#ffe485, #f5c518); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.45), 3px 3px 0 rgba(0, 0, 0, 0.3); } /* ---------- "Other" category picker (dex-tabs row) ---------- */ .other-select { display: none; } /* Mobile swaps this in for the popover */ .other-wrap { position: relative; display: inline-flex; } .other-pop[hidden] { display: none; } /* ---------- Archives menu ---------- */ /* One button opening the list of sibling collection pages, used by both layouts: it sits in the header on desktop and on its own row in the mobile bar, styled after the "Other" menu below. The links inside are the same elements in either place, so this has to override their header button styling outright; adding to it isn't enough. */ .archives-wrap { position: relative; display: flex; } .archives-btn { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } .archives-pop[hidden] { display: none; } .archives-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; width: max(190px, 100%); display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--panel-2); border: 3px solid var(--edge); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--edge-hi), 6px 6px 0 rgba(0, 0, 0, 0.4); animation: pop-in 0.18s ease-out both; } .archives-pop .archives-opt { display: flex; align-items: center; justify-content: center; height: auto; padding: 11px 10px 10px; font-size: var(--btn-fs-sm); color: var(--ink); background: var(--panel); border: 2px solid var(--edge); border-radius: 3px; } .archives-pop .archives-opt:hover { color: var(--ink); } /* The entry for the page you are already on. It keeps its slot so the menu reads identically everywhere, but has no href and does not respond, so it cannot be mistaken for somewhere else to go. */ .archives-pop .archives-opt.on { background: var(--accent); color: var(--accent-ink); cursor: default; pointer-events: none; } .other-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 120; width: 230px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--panel-2); border: 3px solid var(--edge); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--edge-hi), 6px 6px 0 rgba(0, 0, 0, 0.4); animation: pop-in 0.18s ease-out both; } .other-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 8px; font-family: var(--px); font-size: var(--btn-fs-sm); /* Full ink: a menu row is pressable, and dim means "toggle is off". */ color: var(--ink); background: var(--panel); border: 2px solid var(--edge); border-radius: 3px; cursor: pointer; transition: transform 0.12s ease-out, color 0.12s, background 0.12s; } .other-opt:hover { color: var(--ink); transform: translate(-1px, -1px); } .other-opt.on { color: var(--accent-ink); background: var(--accent); border-color: var(--edge); } .oc-count { font-size: 8px; color: var(--ink-dim); } .other-opt.on .oc-count { color: var(--accent-ink); } /* ---------- Controls ---------- */ .controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; } .search-wrap { position: relative; flex: 1 1 200px; min-width: 180px; } .search-icon { position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 14px; height: 14px; color: var(--ink-dim); pointer-events: none; } #search, #tlSearch, .select, .px-btn { font-family: var(--vt); font-size: var(--field-fs); color: var(--ink); background: var(--panel); border: 3px solid var(--edge); border-radius: 3px; outline: none; } #search, #tlSearch { width: 100%; padding: 7px 12px 6px 32px; transition: box-shadow 0.12s; } #search::placeholder, #tlSearch::placeholder { color: var(--ink-dim); } #search:focus, #tlSearch:focus { box-shadow: inset 0 0 0 2px var(--accent); } .select { appearance: none; -webkit-appearance: none; padding: 7px 30px 6px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0h12L6 7z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; transition: transform 0.12s ease-out, box-shadow 0.12s; } .select:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3); } .select:focus { box-shadow: inset 0 0 0 2px var(--accent); } .px-btn, .clear-btn { font-family: var(--px); font-size: var(--btn-fs); padding: 9px 12px; color: var(--ink); background: var(--panel); border: 3px solid var(--edge); border-radius: 3px; cursor: pointer; transition: transform 0.12s ease-out, box-shadow 0.12s ease-out; } .px-btn:hover, .clear-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3); } .px-btn:active, .clear-btn:active { transform: translate(1px, 1px); box-shadow: none; } .clear-btn { color: #fff; background: #d3425f; border-color: #47101d; } .px-btn.on { color: var(--accent-ink); background: var(--accent); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.25); } /* Dream World nav + its Back link are s styled as buttons, so they need the underline reset to match the