/* CODLOCKER polish layer (v30). Loaded after locker.css so these corrections win the cascade. Everything here is a fix for something measured on the built pages, noted inline. */ /* =========================================================================== v30 polish pass =========================================================================== */ /* --- floor on label size ------------------------------------------------- A run of supporting labels rendered at 8-10px: the evidence caption on player profiles, the provenance badge, the comparison kickers, the guide kickers and the MW4 date tag. Under Lighthouse's 12px legibility threshold and hard to read on a phone. Nudged up without changing the hierarchy. */ .profile-provenance-badge{font-size:11.5px} .profile-evidence-label{font-size:11.5px} .popular-compare-kicker,.guide-kicker,.mw4b-tag{font-size:11.5px} .popular-compare-open,.news-read,.summary-detail, .insight-copy,.insight-label,.chart-note{font-size:12px} @media(max-width:820px){ .data-table td,.stats-table td{font-size:12px} .lead-tape u,.tm-card u{font-size:11.5px} } /* --- tap targets --------------------------------------------------------- Links inside cards, rails and back-navigation measured 14-22px tall. Under ~30px is fiddly with a thumb; this raises the hit area without moving any of the type. */ @media(max-width:820px){ .page-back,.view-team,.news-read,.popular-compare-open, .locker-text-link,.section-rail a,.league-rail a{ min-height:34px;display:inline-flex;align-items:center;gap:6px} .team-drop-link{min-height:42px} .nav>a,.nav .navbtn,.nav-team>summary{ min-height:38px;display:inline-flex;align-items:center} label[for],input[type=checkbox]{min-height:24px} } /* --- keep group padding after h4 became h3 ------------------------------- */ .lgb-group>h3{padding:10px 12px} /* --- images now declare intrinsic size ----------------------------------- width/height attributes let the browser reserve space before the image decodes, which is what stops the page jumping as it loads. Pairing them with height:auto is required: without it the attribute height is treated as a literal presentational hint and any image whose width comes from CSS gets stretched. This rule is element-level specificity, so every component rule that sets an explicit img height (.league-rail img, .tm-portrait img, .team-drop-logo img and the rest) still wins. */ img{max-width:100%;height:auto} /* --- footer links and guide tiles were 17-22px tall on a phone ------------ These are block navigation, not inline prose links, so they get a proper hit area. Inline links inside paragraphs and tables are left alone -- they are meant to sit in the line of text. */ @media(max-width:820px){ .footer-links a{min-height:34px;display:inline-flex;align-items:center} .guide-tool a{min-height:34px;display:inline-flex;align-items:center} } /* --- muted secondary text sat just under WCAG AA ------------------------- The mid-grey label colours measured 3.7-4.3 against the panel backgrounds where AA wants 4.5. Lifted a few steps; the hierarchy is unchanged. */ /* Team colours used as small text sat at 4.3-4.4 against the dark panels -- the blue (#2E6BFF) and the reds especially. Rather than change any team's colour globally, lighten it only where it carries small text. Swatches, bars, rails and borders keep the exact brand value. */ @supports (color: color-mix(in srgb, red, white)){ .profile-section-kicker,.team-block-kicker,.teamname, .view-team,.profile-provenance-badge,.profile-evidence-item em{ color:color-mix(in srgb, var(--team, var(--accent)) 84%, #ffffff)} } /* locker.css scopes these under .locker-ui, so match that specificity -- fixes.css loads last, so an equal-specificity rule here wins. */ @supports (color: color-mix(in srgb, red, white)){ .locker-ui.locker-ui .graphics-fov-label, .locker-ui.locker-ui .profile-section-kicker, .locker-ui.locker-ui .teamname, .locker-ui.locker-ui .view-team, .locker-ui.locker-ui .profile-provenance-badge, .locker-ui.locker-ui .profile-evidence-item em, .locker-ui.locker-ui .team-block-kicker{ color:color-mix(in srgb, var(--team, var(--accent2, var(--accent))) 76%, #ffffff)} } /* =========================================================================== v30.1 =========================================================================== */ /* --- hero team rail: greyed out by default ------------------------------- locker.css shipped the twelve team logos at grayscale(1) and 65% opacity, so the rail read as disabled until you hovered a tile. Show every crest in full colour and move the emphasis to hover instead: a tint in that team's colour, a brighter label, an underline in the team colour and a small lift on the crest. Keyboard focus gets the same treatment. */ .locker-ui.locker-ui .league-rail img{ filter:none; opacity:1; transition:transform .18s ease,filter .18s ease} .locker-ui.locker-ui .league-rail a{ color:#c4ced9; transition:background .18s ease,color .18s ease,box-shadow .18s ease} .locker-ui.locker-ui .league-rail a:hover, .locker-ui.locker-ui .league-rail a:focus-visible{ background:color-mix(in srgb,var(--team) 15%,#151c24); box-shadow:inset 0 -2px var(--team); color:#fff} .locker-ui.locker-ui .league-rail a:hover img, .locker-ui.locker-ui .league-rail a:focus-visible img{ transform:scale(1.12); filter:brightness(1.12)} @media(prefers-reduced-motion:reduce){ .locker-ui.locker-ui .league-rail a:hover img, .locker-ui.locker-ui .league-rail a:focus-visible img{transform:none} } /* --- compare page ran about a fifth too large ---------------------------- Once two players were picked the cards were set at 43px names, 31px stat values and a 27px dropdown, which crowded the layout on desktop and forced team names onto two lines on a phone. Scaled the whole block down roughly 20% at each of locker.css's breakpoints; proportions are unchanged. */ .locker-ui.locker-ui .cp-name{font-size:34px} .locker-ui.locker-ui .cp-kicker, .locker-ui.locker-ui .cp-team{font-size:12.5px} .locker-ui.locker-ui .compare-quick{margin-top:16px;padding-top:14px} .locker-ui.locker-ui .compare-quick b{font-size:25px} .locker-ui.locker-ui .compare-quick span{font-size:12px} .locker-ui.locker-ui .compare-vs{font-size:22px} .locker-ui.locker-ui .compare-table .pro-name{font-size:19px} .locker-ui.locker-ui .compare-picker select{font-size:19px;height:46px} @media(max-width:700px){ .locker-ui.locker-ui .cp-name{font-size:27px} .locker-ui.locker-ui .compare-quick b{font-size:20px} .locker-ui.locker-ui .compare-quick span{font-size:11.5px} .locker-ui.locker-ui .compare-vs{font-size:18px} .locker-ui.locker-ui .compare-picker select{font-size:17px;height:44px} } @media(max-width:450px){ .locker-ui.locker-ui .cp-name{font-size:23px} .locker-ui.locker-ui .cp-kicker, .locker-ui.locker-ui .cp-team{font-size:12px} } /* =========================================================================== v30.2 — mobile menu =========================================================================== */ @media(max-width:900px){ /* --- menu rows did not line up ------------------------------------------ The open menu is a two-column grid. locker.css gives every nav link padding:10px 12px and a 42px floor, but an older sheet carries .navbtn{padding:0!important}, so MW4 and Classes rendered 42px tall and flush to the column edge while their neighbours were 50px tall and inset 12px. Rows and separator lines were staggered on both axes. Same box for every item, so the two columns track each other. */ .locker-ui header.site.menu-open .nav>a, .locker-ui header.site.menu-open .nav>a.navbtn, .locker-ui header.site.menu-open .nav .nav-team>summary{ display:flex; align-items:center; box-sizing:border-box; min-height:48px; margin:0; padding:10px 12px!important; border-bottom:1px solid #293847; line-height:1.15} /* six links fill three clean rows, then Teams takes a full row of its own */ .locker-ui header.site.menu-open .nav>a{order:1} .locker-ui header.site.menu-open .nav>.nav-team{order:2;grid-column:1/-1} .locker-ui header.site.menu-open .nav>.nav-team>summary{border-bottom:0} /* --- Teams opened as a two-column panel 71px off the right edge --------- locker.css sets this list to a single full-width column on small screens, but pages.css carries .nav-team[open] .team-dropdown{grid-template-columns: 1fr 1fr} at higher specificity, so it won and half the teams sat outside the viewport. One column, in flow, sized to the menu. */ .locker-ui .nav-team[open] .team-dropdown, .locker-ui .nav-team:hover .team-dropdown{ position:static; grid-template-columns:1fr; width:100%; max-width:100%; inset:auto; transform:none; max-height:none; gap:0; margin:0; padding:2px 0 6px; border:0; border-radius:0; background:none; box-shadow:none} .locker-ui .nav-team .team-drop-link{ box-sizing:border-box; min-height:46px; padding:8px 12px; border-bottom:1px solid #1d2836} .locker-ui .nav-team .team-drop-link:last-child{border-bottom:0} .locker-ui .nav-team .team-drop-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* the panel scrolls vertically already; stop anything spilling sideways */ .locker-ui header.site .nav{overflow-x:hidden;overflow-y:auto} } /* =========================================================================== v30.3 =========================================================================== */ /* --- search icon stayed put once you typed ------------------------------- The magnifier is absolutely positioned inside the field and the input keeps a 30px left inset for it, so after typing a name the value sat wedged between the magnifier and the browser's own clear button. The "/" focus hint had the same problem on desktop, colliding with that clear button. Both are affordances for an empty field, so both step aside once the field has something in it, and the text reclaims the space. */ .header-searchbox input:not(:placeholder-shown)~.header-search-icon{ opacity:0; visibility:hidden; transition:opacity .12s ease} .header-searchbox input:not(:placeholder-shown){ padding-left:11px} .header-searchbox input:focus~.search-shortcut, .header-searchbox input:not(:placeholder-shown)~.search-shortcut{ display:none} /* The hero's own search field is left alone on purpose: its magnifier is a flex item sitting beside the input, not layered over it, so it never covers what you type and hiding it would just leave a gap. */ /* =========================================================================== v30.4 =========================================================================== */ /* --- directory search: the magnifier sat on top of the text --------------- locker.css moves that mark to the left of the field and pairs it with a 44px inset on the input. But home.css carries .directory #search{padding- left:18px}, and an ID beats three classes, so the inset collapsed to 18px while the mark stayed at 16px. Text and glyph started within 2px of each other and the first characters were struck through. The ID has to be matched to win it back. */ .locker-ui .directory .search-wrap #search{padding-left:46px} @media(max-width:520px){ .locker-ui .directory .search-wrap #search{padding-left:42px} .locker-ui .directory .search-mark{left:14px;font-size:23px} } /* the mark is an empty-field prompt like the header one, so it steps aside once there is a query and the text takes the full width */ .locker-ui .directory .search-wrap #search:not(:placeholder-shown){padding-left:16px} .search-wrap #search:not(:placeholder-shown)~.search-mark{ opacity:0; visibility:hidden; transition:opacity .12s ease} /* --- hero eyebrow now holds a single item -------------------------------- The season badge is gone from the markup, so stop the flex row pushing the remaining label around. */ .locker-home .locker-eyebrow{justify-content:flex-start}