. */ .skip-link { position: absolute; left: 0.75rem; top: -100px; z-index: 200; padding: 0.7rem 1.1rem; border-radius: 0 0 10px 10px; background: var(--accent); color: #10121A; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: top 0.16s ease; } .skip-link:focus { top: 0; text-decoration: none; } /*

is only focusable so the skip link has somewhere to land; it should never draw a ring of its own when it receives that programmatic focus. */ #main:focus { outline: none; } /* Anchored headings have to clear the fixed topbar, or a jump link parks the target underneath it and reads as "nothing happened". The category strip adds its own height on top of this, which its click handler measures at the time rather than guessing here, since the strip changes height as it pins. */ [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); } .fade-in { animation: fadeIn 0.45s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ================= topbar ================= */ #site-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 60; background: rgba(14, 16, 22, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav-inner { height: 100%; max-width: 1560px; margin: 0 auto; padding: 0 1.6rem; display: flex; align-items: center; gap: 0.9rem; } .brand { display: flex; align-items: center; gap: 0.6rem; flex: none; color: var(--text); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .brand:hover { text-decoration: none; color: var(--accent); } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 1.1rem; color: var(--bg); background: linear-gradient(135deg, var(--accent), var(--r4)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } /* One non-wrapping line; children never shrink and the row clips. */ .nav-links { flex: 1 1 auto; min-width: 0; margin-left: 1.4rem; display: flex; align-items: center; gap: 0.5rem; overflow: hidden; white-space: nowrap; } .nav-links > * { flex: none; } .nav-main { display: flex; align-items: center; gap: 0.2rem; } .nav-link { color: var(--muted); padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; transition: color 0.16s ease, background 0.16s ease; } .nav-link:hover { color: var(--text); background: var(--panel); text-decoration: none; } .nav-link.active { color: var(--accent); background: var(--accent-soft); } /* ================= topbar search ================= Lives outside .nav-links on purpose: that row is overflow:hidden, so a dropdown parented inside it would be clipped at the first result. #site-nav sets no overflow, which is what lets the panel hang below. Visible by default rather than behind a magnifier: the point of the feature is that someone who lands on a game page can type a unit name instead of guessing which of eleven sub-pages it lives on, and a search you have to find first does not get used. The / and Ctrl-K hints are for the people who will never touch it with a mouse. */ /* 216px, not 280. The bar has to hold a brand, three section links, three game chips, a Discord link and an account chip, and at 1440 the wider field was costing exactly the two game chips the user asked to have back. The field is still unmistakably a search field at this width; it does not grow on focus, because growing it would silently clip the chip row beside it. */ .nav-search { position: relative; flex: 0 1 216px; min-width: 0; display: flex; align-items: center; gap: 0.45rem; height: 38px; padding: 0 0.55rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .nav-search:focus-within { border-color: var(--accent); background: var(--panel-2); box-shadow: 0 0 0 3px var(--accent-soft); } .nav-search-ic { flex: 0 0 auto; font-size: 0.9rem; opacity: 0.75; } .nav-search-in { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 0.88rem; padding: 0; } .nav-search-in::placeholder { color: var(--muted); } /* Chrome draws its own clear button on type=search and it collides with the kbd hint. */ .nav-search-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .nav-search-kbd { flex: 0 0 auto; font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 0.05rem 0.35rem; line-height: 1.5; } .nav-search:focus-within .nav-search-kbd { opacity: 0; } /* The magnifier button is the phone affordance only; on desktop the field is always there and a button next to it would just be a second way in. */ .nav-search-btn { display: none; } /* ---- results ---- */ .nav-search-res { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 61; width: min(420px, calc(100vw - 2rem)); min-width: 100%; max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; background: #0E1016; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55); padding: 0.35rem; animation: navDrop 0.16s ease; } .nav-search-res[hidden] { display: none; } /* Results group under the GAME, not under the kind of thing they are. "Which game is this unit in, and which page of it" is the actual question being asked; a header that said "Characters" would answer the one nobody asked. */ .nsr-group { display: block; font-family: var(--font-display); font-weight: 800; font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); padding: 0.55rem 0.6rem 0.3rem; } .nsr-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.55rem; border-radius: 8px; color: var(--text); text-decoration: none; } .nsr-item:hover, .nsr-item[aria-selected="true"] { background: var(--accent-soft); text-decoration: none; } .nsr-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; background: var(--panel-2) center 12% / cover no-repeat; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .nsr-ic-glyph { font-size: 0.9rem; } .nsr-ph { font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; color: var(--muted); } .nsr-ic.has-img .nsr-ph { display: none; } .nsr-tx { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; } .nsr-t { font-size: 0.88rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nsr-s { font-size: 0.72rem; color: var(--muted); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nsr-kind { flex: 0 0 auto; font-size: 0.66rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.08rem 0.45rem; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nsr-empty { padding: 0.9rem 0.7rem; font-size: 0.85rem; color: var(--muted); text-align: center; } /* Both Discord buttons carry a label. Two unlabelled Discord marks side by side, one blue and one yellow, gave no clue which one joined the server and which one signed you in. */ .btn-discord { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; height: 40px; padding: 0 0.85rem; border-radius: 9px; background: var(--accent); color: #fff; flex: none; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; white-space: nowrap; transition: transform 0.15s ease, filter 0.15s ease; } .btn-discord:hover { transform: translateY(-2px); filter: brightness(1.15); text-decoration: none; } .btn-discord svg { flex: none; } .bd-short { display: none; } .nav-toggle, .side-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--text); font-size: 1.05rem; padding: 0.3rem 0.65rem; border-radius: 6px; cursor: pointer; } /* ================= sidebar layout ================= */ #sidebar { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w); background: var(--panel-2); border-right: 1px solid var(--line); padding: 0.8rem 0.7rem 2rem; overflow-y: auto; z-index: 50; transition: transform 0.3s ease-in-out; } body.with-sidebar #main, body.with-sidebar #site-footer { margin-left: var(--sidebar-w); } .side-game { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.8rem; margin-bottom: 0.6rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; } .side-game-name { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; line-height: 1.25; } .side-switch { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); transition: all 0.2s ease; } .side-switch:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; transform: rotate(180deg); } .side-label { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 0.9rem 0.8rem 0.25rem; } .side-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.8rem; border-radius: 7px; color: var(--text); font-weight: 600; font-size: 0.98rem; border-left: 3px solid transparent; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .side-item:hover { background: var(--panel); text-decoration: none; transform: translateX(3px); } .side-item.active { background: var(--accent-soft); border-left-color: var(--accent); color: var(--accent); } .side-icon { width: 1.2em; text-align: center; opacity: 0.9; } /* ================= shared layout ================= */ #main { min-height: calc(100vh - var(--topbar-h) - 90px); } .page-pad { max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.4rem 3.5rem; } .section { margin-top: 2.4rem; } .hero-sub { color: var(--muted); font-size: 1rem; margin-bottom: 1rem; } /* Prydwen-style section header: accent square + rule */ .sec-head { display: flex; align-items: center; gap: 0.6rem; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 2px solid var(--accent-line); padding-bottom: 0.45rem; margin-bottom: 1.1rem; } .sec-square { width: 12px; height: 12px; background: var(--accent); flex: none; } .crumbs { font-size: 0.86rem; color: var(--muted); margin-bottom: 0.9rem; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--accent); } .crumb-sep { margin: 0 0.45rem; opacity: 0.6; } .crumb-here { color: var(--text); } /* ================= home ================= */ /* The hero is a signpost, not a splash screen. It says what the site is, offers the one-tap jumps, and then gets out of the way of the games grid, which is what people actually came for. Everything here is sized to keep the top of the grid above the fold on a laptop. */ .home-hero { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; background-color: var(--panel-2); background-size: cover; background-position: center top; border-bottom: 1px solid var(--line); overflow: hidden; } .home-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 260px at 75% 0%, var(--accent-soft), transparent 60%), linear-gradient(rgba(10, 11, 16, 0.72), rgba(10, 11, 16, 0.86)); } /* Trimmed again, for the same reason as the band below it: "rather than giving me time to think, wait, should I read that title? augh, where is the guides..". The copy still has to exist for search engines and for anyone who has genuinely never heard of the site, but it should cost one glance, not a paragraph, and it must not push the band below the fold. */ .home-hero-inner { position: relative; text-align: center; max-width: 720px; padding: 1.15rem 1.4rem 1.05rem; animation: fadeIn 0.7s ease; } .home-hero h1 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.16; } .home-hero-blurb { color: #CBD1E8; font-size: 0.84rem; line-height: 1.45; margin-top: 0.35rem; max-width: 58ch; margin-left: auto; margin-right: auto; } /* ============================================================ THE BROWSE BAND (home) Round one it was ghost pills inside the hero and the tester never saw them. Round two it became its own band and he still said: "the 3 game names should be like the whole screen size... you force me not to look at anything else but that." So the resting state is art: edge-to-edge poster tiles that own the width of the page and are the loudest thing on it. ROUND FOUR REMOVED THE PIN. Do not put position:sticky back on .qnav. The band used to stick under the topbar and shrink 216px -> 54px as you scrolled past. Sticky elements are still in normal flow, so animating the height rewrote the document's flow height by ~160px in the middle of a scroll gesture and every section below slid under the reader while they were reading it. That is what "it glitches out and the elements get messed up" meant, and it is not an easing problem - the page really was moving. On phones the pinned row was also 496px of chips inside a 358px viewport, which is where the horizontal scrolling came from. The pin was also making navigation worse, not better. The topbar carries all three game chips now, so a pinned copy one line below it meant either two identical rows on screen at once or fading the topbar's row out - which left the reader with FEWER options the further down they went. So: constant height, scrolls away like any other section, and the topbar is the thing that persists with every link intact. The tester's own alternative was "or you can make it disappear and it appears in the top"; the top is simply where it already lives. ============================================================ */ .qnav { background: linear-gradient(180deg, var(--panel-2), var(--bg)); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 var(--accent-soft); } .qnav-inner { max-width: 1400px; margin: 0 auto; padding: 0.9rem 1.4rem 1rem; } .qnav-label { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; overflow: hidden; white-space: nowrap; } /* Wrap, not nowrap. With a fixed count of three this behaves as one row on any desktop width, but if a fourth game is registered the row folds instead of overflowing the page, and the phone override below depends on it too. */ .qnav-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; } .qnav-tile { position: relative; overflow: hidden; isolation: isolate; flex: 1 1 220px; min-width: 0; display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-start; min-height: 126px; padding: 0.85rem 0.95rem; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none; transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } /* The poster. Same URLs the game hub headers already request, so the browser serves both from one fetch and the band costs no extra bytes. */ .qnav-art { position: absolute; inset: 0; z-index: -2; background: var(--panel-2) center/cover no-repeat; transition: transform 0.4s ease; } /* Scrim. Key art is bright and busy and the label has to stay readable on top of all three games without hand-tuning any of them. */ .qnav-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 11, 16, 0.20) 0%, rgba(10, 11, 16, 0.55) 45%, rgba(10, 11, 16, 0.88) 100%); } .qnav-tile:hover, .qnav-tile:focus-visible { border-color: var(--accent); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); transform: translateY(-2px); text-decoration: none; } .qnav-tile:hover .qnav-art, .qnav-tile:focus-visible .qnav-art { transform: scale(1.06); } /* New / Popular, moved up from the "Games we cover" cards this band replaced. */ .qnav-tile .gcard-badges { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; } /* The game icon, sitting next to the title rather than hidden behind it. With no collapse to animate there is no reason for the old negative-margin trick, and a real in-flow box is also what the lazy image loader needs: it is an IntersectionObserver, and an element with no box never fires. */ .qnav-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; margin-right: 0.6rem; background: var(--panel-2) center/cover no-repeat; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); display: grid; place-items: center; overflow: hidden; } .qnav-ph { font-family: var(--font-display); font-weight: 800; color: var(--muted); font-size: 1rem; } .qnav-ic.has-img .qnav-ph { display: none; } .qnav-tx { position: relative; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 0.15rem; } .qnav-t { font-family: var(--font-display); font-weight: 800; font-size: 1.06rem; line-height: 1.15; color: #fff; letter-spacing: 0.01em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qnav-s { font-size: 0.74rem; color: #C7CDE4; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); } /* Second-tier destinations. Deliberately a thin line of text: the band only works if there are three things shouting, not seven. */ .qnav-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; margin-top: 0.75rem; } .qnav-more a { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); text-decoration: none; } .qnav-more a:hover, .qnav-more a:focus-visible { color: var(--accent); text-decoration: none; } @media (prefers-reduced-motion: reduce) { .qnav-tile, .qnav-art { transition: none; } .qnav-tile:hover, .qnav-tile:focus-visible { transform: none; } .qnav-tile:hover .qnav-art, .qnav-tile:focus-visible .qnav-art { transform: none; } } .home-body { max-width: 1400px; margin: 0 auto; padding: 1.6rem 1.4rem 3.5rem; } .home-body > .section + .section { margin-top: 2.4rem; } /* Every home heading is a .sec-head inside a .sec-head-row now (see homeHead() in renderers.js) so the page has one alignment instead of two. */ .home-ico { font-size: 1.05rem; } .home-body .sec-head-row { margin-bottom: 1.1rem; } .home-body .sec-head-row .sec-head { flex: 1 1 auto; } .gcard-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .gcard-grid-small { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } /* Popular / New are badges now rather than their own duplicate grids. */ .gcard-badges { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.35rem; } .gcard-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; background: rgba(8, 9, 14, 0.72); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px); } .gcard-badge.is-new { border-color: #7ADCA8; color: #C6F5DC; } .gcard-badge.is-hot { border-color: #F0A24E; color: #FFDCB4; } .gcard { position: relative; display: block; aspect-ratio: 16 / 7; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .gcard:hover { transform: translateY(-4px) scale(1.02); border-color: var(--accent); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent-line); text-decoration: none; z-index: 2; } .gcard-media { position: absolute; inset: 0; background: linear-gradient(130deg, var(--panel) 30%, var(--accent-soft) 100%); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; filter: saturate(1.02) brightness(0.9); transition: transform 0.4s ease, filter 0.3s ease; } .gcard:hover .gcard-media { transform: scale(1.06); filter: saturate(1.06) brightness(1.02); } .gcard-ph { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--line); } /* Prydwen-style transparency: a soft vignette over the banner so the key art reads as a background and the game name stays legible on top. */ .gcard-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 7, 11, 0.18) 0%, rgba(6, 7, 11, 0) 32%, rgba(6, 7, 11, 0.38) 58%, rgba(6, 7, 11, 0.9) 100%); } .gcard-name { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.7rem; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); } /* Two equal rails below the games grid. The old 1.6fr/1fr split left a tall dead column beside the banner row. */ .home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; align-items: start; } .home-col { min-width: 0; } .up-list { display: flex; flex-direction: column; gap: 0.55rem; } .up-row { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem 0.9rem; transition: border-color 0.15s ease, transform 0.15s ease; } .up-link:hover { border-color: var(--accent); transform: translateX(3px); text-decoration: none; } .up-name { display: block; font-weight: 600; color: var(--text); font-size: 0.95rem; } .up-note { display: block; font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-date { font-size: 0.8rem; color: var(--accent); white-space: nowrap; font-weight: 600; } /* Cropped banner thumb. Falls back to a tinted initial when no art resolves, so a rail with half its art missing still lines up. */ .up-thumb { position: relative; flex: none; width: 76px; height: 46px; overflow: hidden; border-radius: 6px; border: 1px solid var(--line); background: linear-gradient(130deg, var(--panel-2) 30%, var(--accent-soft) 100%); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .up-link:hover .up-thumb { transform: scale(1.04); } .up-thumb-ph { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--muted); } .up-thumb.has-img .up-thumb-ph { display: none; } /* min-width:0 is what lets the ellipsis on .up-note actually kick in. */ .up-txt { flex: 1 1 auto; min-width: 0; } /* ================= game hub ================= */ .hub-hero { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; background-color: var(--panel-2); background-size: cover; background-position: center top; border-bottom: 1px solid var(--line); } .hub-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 11, 16, 0.7), rgba(10, 11, 16, 0.88)); } .hub-hero-inner { position: relative; text-align: center; max-width: 860px; padding: 3rem 1.4rem; animation: fadeIn 0.6s ease; } .hub-hero p { color: #CBD1E8; margin-top: 0.6rem; } .hub-meta { font-size: 0.85rem; color: var(--accent) !important; text-transform: uppercase; letter-spacing: 0.1em; } /* Guild notice: sits under the "Updated" stamp on a game page and points at the Discord button in the top bar. The icon breathes gently so the eye is drawn upward to the matching button rather than past the line. */ .guild-note { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.55rem; padding: 0.5rem 0.85rem; border: 1px solid rgba(88, 101, 242, 0.5); border-radius: 999px; background: rgba(88, 101, 242, 0.12); color: var(--text) !important; font-size: 0.86rem; line-height: 1.35; text-decoration: none; max-width: 46rem; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .guild-note:hover { text-decoration: none; transform: translateY(-1px); border-color: rgba(88, 101, 242, 0.95); background: rgba(88, 101, 242, 0.2); } .guild-note-ic { display: inline-flex; flex: none; color: #7A87F5; animation: guildNudge 3.2s ease-in-out infinite; } @keyframes guildNudge { 0%, 72%, 100% { transform: translateY(0); } 80% { transform: translateY(-3px); } 88% { transform: translateY(0); } } @media (max-width: 560px) { .guild-note { font-size: 0.8rem; padding: 0.45rem 0.7rem; } } @media (prefers-reduced-motion: reduce) { .guild-note-ic { animation: none; } } .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .tool-card { display: flex; align-items: center; gap: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--text); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .tool-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); text-decoration: none; } .tool-ico { font-size: 1.5rem; } .tool-card strong { display: block; font-family: var(--font-display); font-size: 1.08rem; } .tool-card span:not(.tool-ico):not(.guide-arrow) { font-size: 0.85rem; color: var(--muted); } .tool-card .guide-arrow { margin-left: auto; } .cat-head { font-size: 1.12rem; font-weight: 700; margin: 1.5rem 0 0.8rem; color: var(--text); } .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.9rem; } .guide-card { display: flex; align-items: center; gap: 0.9rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.9rem 0.55rem 0.55rem; color: var(--text); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .guide-card:hover { border-color: var(--accent); background: var(--panel-2); transform: translateY(-2px); text-decoration: none; } .guide-thumb { width: 74px; height: 74px; flex: none; border-radius: 6px; background-color: var(--panel-2); background-size: cover; background-position: center; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } .guide-card-title { font-weight: 600; font-size: 1rem; line-height: 1.3; } .guide-arrow { margin-left: auto; color: var(--muted); font-size: 1.1rem; transition: transform 0.2s ease, color 0.2s ease; } .guide-card:hover .guide-arrow, .tool-card:hover .guide-arrow { transform: translateX(5px); color: var(--accent); } /* ================= guide cards + drop-down shelves (.gdx-*) ================= Used by the guides index and the game-hub guides section. Cards carry cover art, a category chip, a summary and a byline; they live inside collapsible shelves so nothing dumps out all at once. Per-game tint arrives through data-clr -> --dyn (no inline styles, CSP-safe). */ .gdx-head { margin: 0 0 1.2rem; } .gdx-head h1 { margin: 0 0 0.3rem; } .gdx-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin: 0 0 1.2rem; } .gdx-search { flex: 1 1 240px; min-width: 180px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; font-size: 0.92rem; padding: 0.55rem 0.8rem; } .gdx-search:focus { outline: none; border-color: var(--accent); } /* label wrapper: tiny caps caption above the select, same shape as .upg-sel */ .gdx-sel { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; } .gdx-sel select { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 0.85rem; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; padding: 0.45rem 0.6rem; } .gdx-sel select:focus { outline: none; border-color: var(--accent); } .gdx-tool-btns { display: flex; gap: 0.45rem; margin-left: auto; } .gdx-tbtn { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0.5rem 0.8rem; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .gdx-tbtn:hover { color: var(--text); border-color: var(--accent); background: var(--panel-2); } .gdx-list { display: flex; flex-direction: column; gap: 0.6rem; } /* ---- shelf (click the title, it drops down) ---- */ .gdx-acc { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; transition: border-color 0.22s ease, background 0.22s ease; } .gdx-acc.open { background: var(--panel-2); border-color: color-mix(in srgb, var(--dyn, var(--accent)) 55%, var(--line)); } .gdx-acc-head { display: flex; align-items: center; gap: 0.65rem; width: 100%; background: transparent; border: none; cursor: pointer; text-align: left; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; padding: 0.9rem 1.1rem; } .gdx-acc-head:hover { color: var(--dyn, var(--accent)); } .gdx-acc-chev { flex: none; color: var(--dyn, var(--accent)); font-size: 0.95rem; line-height: 1; transition: transform 0.22s ease; } .gdx-acc.open .gdx-acc-chev { transform: rotate(90deg); } .gdx-acc-title { flex: 1 1 auto; } .gdx-acc-sub { flex: none; color: var(--muted); font-family: var(--font-body, inherit); font-size: 0.8rem; font-weight: 500; } .gdx-acc-body { display: none; padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--line); padding-top: 1rem; } .gdx-acc.open .gdx-acc-body { display: block; animation: gdxDrop 0.24s ease; } @keyframes gdxDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .gdx-cat + .gdx-cat { margin-top: 1.2rem; } .gdx-cat-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.7rem; } .gdx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.85rem; } /* ---- card ---- */ .gdx-card { display: flex; flex-direction: column; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .gdx-acc.open .gdx-card { background: var(--panel); } .gdx-card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--dyn, var(--accent)); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); } .gdx-cover { position: relative; display: flex; align-items: center; justify-content: center; height: 96px; flex: none; background-color: var(--panel-2); background-size: cover; background-position: center; border-bottom: 1px solid var(--line); } /* No cover art yet: a soft tint wash behind the category glyph beats dead space. */ .gdx-cover:not(.has-img) { background-image: linear-gradient(135deg, color-mix(in srgb, var(--dyn, var(--accent)) 26%, transparent), transparent 72%); } .gdx-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.45) 100%); opacity: 0; transition: opacity 0.2s ease; } .gdx-cover.has-img::after { opacity: 1; } .gdx-cover-ic { font-size: 2rem; opacity: 0.85; } .gdx-cover.has-img .gdx-cover-ic { display: none; } .gdx-lock { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; background: rgba(0, 0, 0, 0.6); border-radius: 999px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; } .gdx-card.is-locked .gdx-cover { filter: saturate(0.5); } .gdx-body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem 0.85rem 0.7rem; flex: 1 1 auto; } .gdx-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; } .gdx-chip { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 999px; padding: 0.18rem 0.5rem; border: 1px solid var(--line); color: var(--muted); } .gdx-chip-cat { color: var(--dyn, var(--accent)); border-color: color-mix(in srgb, var(--dyn, var(--accent)) 45%, transparent); } .gdx-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3; } .gdx-card:hover .gdx-title { color: var(--dyn, var(--accent)); } .gdx-sum { color: var(--muted); font-size: 0.85rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gdx-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: auto; padding-top: 0.5rem; } .gdx-meta { color: var(--muted); font-size: 0.76rem; } .gdx-go { color: var(--dyn, var(--accent)); font-size: 0.8rem; font-weight: 700; white-space: nowrap; } .gdx-card:hover .gdx-go span { display: inline-block; transform: translateX(4px); transition: transform 0.2s ease; } @media (max-width: 620px) { .gdx-tool-btns { margin-left: 0; } .gdx-grid { grid-template-columns: 1fr; } .gdx-acc-head { font-size: 0.98rem; padding: 0.8rem 0.85rem; } .gdx-acc-body { padding-left: 0.85rem; padding-right: 0.85rem; } .gdx-acc-sub { display: none; } } /* ================= accordions (tier list) ================= */ .acc-stack { display: flex; flex-direction: column; gap: 0.55rem; margin: 1.2rem 0 1.6rem; } .acc { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; transition: background 0.25s ease; } .acc.open { background: var(--panel-2); } .acc-head { display: flex; justify-content: space-between; align-items: center; width: 100%; background: transparent; border: none; cursor: pointer; color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; padding: 0.8rem 1.1rem; text-align: left; transition: color 0.2s ease; } .acc-head:hover, .acc.open .acc-head { color: var(--accent); } .acc-chev { transition: transform 0.25s ease; font-size: 1.1rem; } .acc.open .acc-chev { transform: rotate(180deg); } /* Smooth height animation via the grid 0fr -> 1fr technique */ .acc-body-outer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease; } .acc.open .acc-body-outer { grid-template-rows: 1fr; } .acc-body { min-height: 0; overflow: hidden; padding: 0 1.1rem; color: #C9CEE2; font-size: 0.93rem; border-top: 1px solid transparent; opacity: 0; transition: padding 0.32s ease, opacity 0.3s ease, border-color 0.3s ease; } .acc.open .acc-body { padding: 0.2rem 1.1rem 1rem; opacity: 1; border-top-color: var(--line); } .acc-body ul { padding-left: 1.2rem; } .acc-body li { margin: 0.35rem 0; } .chg { margin: 0.45rem 0; } .chg-date { color: var(--accent); font-weight: 600; margin-right: 0.4rem; } /* ================= tier list ================= */ .cat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.7rem; margin-bottom: 0.7rem; } .cat-banner { position: relative; overflow: hidden; cursor: pointer; padding: 1.15rem 1rem; border-radius: 8px; border: 2px solid var(--line); background: linear-gradient(120deg, var(--panel), var(--panel-2)); color: var(--muted); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.25s ease; } .cat-banner:hover { color: var(--text); border-color: var(--accent-line); } .cat-banner.active { color: var(--text); border-color: var(--accent); background: linear-gradient(120deg, var(--accent-soft), var(--panel-2)); box-shadow: 0 0 18px var(--accent-soft); } .cat-banner.active::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.06), transparent); animation: shimmer 3.8s ease-in-out infinite; } @keyframes shimmer { 0% { left: -50%; } 60%, 100% { left: 120%; } } .cat-blurb { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.1rem; min-height: 1.4em; } .tl-toolbar { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.2rem; } .search-input { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 0.6rem 0.9rem; font-size: 0.95rem; font-family: var(--font-body); } .search-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); } .pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .pill-gap { width: 0.7rem; } .pill { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 0.85rem; padding: 0.32rem 0.8rem; cursor: pointer; transition: all 0.18s ease; } .pill:hover { color: var(--text); border-color: var(--accent-line); } .pill.active { color: var(--text); border-color: var(--accent); background: var(--accent-soft); } .pill-el.active { border-color: var(--dyn, var(--accent)); background: transparent; box-shadow: 0 0 10px var(--dyn, transparent) inset; } .el-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dyn, var(--muted)); flex: none; } .pill-reset { margin-left: auto; border-style: dashed; } .pill-reset:hover { color: #F3555A; border-color: #F3555A; } .tl-grid-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel-2); } .tl-row { display: grid; grid-template-columns: 72px repeat(var(--cols, 3), 1fr); border-bottom: 1px solid var(--line); } .tl-row:last-child { border-bottom: none; } .tl-head-row { background: var(--panel); } .tl-col-head { padding: 0.55rem 0.8rem; text-align: center; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; border-left: 1px solid var(--line); } .tl-col-0 { color: #F3555A; } .tl-col-1 { color: #A278FF; } .tl-col-2 { color: #5AD98A; } .tl-col-3 { color: #F0A24E; } .tl-col-4 { color: #55C8F0; } .tl-col-5 { color: #EFC94C; } .tl-tier-label { display: flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 700; color: #0B0C10; background: var(--dyn, var(--panel)); } .tl-tier-blank { background: var(--panel); } .tl-cell { display: flex; flex-wrap: wrap; gap: 0.55rem; align-content: flex-start; padding: 0.65rem; border-left: 1px solid var(--line); min-height: 84px; } .tl-empty { padding: 1.2rem; } .tl-avatar { position: relative; width: 64px; text-align: center; color: var(--text); transition: transform 0.18s ease; } .tl-avatar:hover { transform: translateY(-3px); text-decoration: none; z-index: 3; } .tl-avatar-img { width: 64px; height: 64px; border-radius: 8px; background-color: var(--panel); background-size: cover; background-position: center top; border: 2px solid var(--dyn, var(--line)); display: flex; align-items: center; justify-content: center; transition: box-shadow 0.18s ease; } /* Tier list avatars carry the same breathing rarity frame as the database cards, so a row of S tier reads at a glance as gold, violet or blue. Hover still wins: the halo in the element colour is what tells you which avatar the cursor is actually on. */ .tl-avatar.r5 .tl-avatar-img, .tl-avatar.r4 .tl-avatar-img, .tl-avatar.r3 .tl-avatar-img { border-color: rgba(var(--rc-glow), 0.6); animation: rarityEdge var(--rc-beat, 2.6s) ease-in-out infinite, rarityHalo var(--rc-beat, 2.6s) ease-in-out infinite; } .tl-avatar:hover .tl-avatar-img { box-shadow: 0 0 14px var(--dyn, var(--accent)); animation: none; border-color: var(--dyn, var(--line)); } @media (prefers-reduced-motion: reduce) { .tl-avatar .tl-avatar-img { animation: none; border-color: var(--rc, var(--dyn, var(--line))); } } .tl-avatar-ph { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--muted); } .tl-avatar-name { display: block; font-size: 0.68rem; font-weight: 600; margin-top: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-new { position: absolute; top: -6px; right: -8px; z-index: 2; background: #F3555A; color: #fff; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.1rem 0.32rem; border-radius: 4px; animation: newPulse 1.6s infinite alternate; } @keyframes newPulse { from { box-shadow: 0 0 3px #F3555A; } to { box-shadow: 0 0 10px #F3555A; } } /* ================= tooltip ================= */ .char-tip { position: fixed; z-index: 200; width: 240px; background: rgba(12, 14, 20, 0.96); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6), 0 0 18px var(--accent-soft); backdrop-filter: blur(8px); padding: 0.8rem 0.9rem; opacity: 0; transform: scale(0.97); pointer-events: none; transition: opacity 0.14s ease-out, transform 0.14s ease-out; } .char-tip.show { opacity: 1; transform: scale(1); } .tip-name { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; margin-bottom: 0.35rem; } .tip-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.55rem; } .tip-chip { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 5px; background: var(--panel); border: 1px solid var(--dyn, var(--line)); color: var(--dyn, var(--muted)); } .tip-tier-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--muted); padding: 0.22rem 0; border-top: 1px solid var(--line); } .tip-tier-badge { display: inline-block; min-width: 40px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: #0B0C10; background: var(--dyn, var(--muted)); padding: 0.08rem 0.45rem; border-radius: 5px; } .tip-hint { font-size: 0.72rem; color: var(--accent); margin-top: 0.5rem; text-align: right; } /* ================= characters DB ================= */ .db-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.1rem; margin-top: 1.2rem; } .db-card { position: relative; display: block; background: var(--panel); border-radius: 12px; overflow: visible; border: 2px solid var(--line); color: var(--text); transition: transform 0.2s ease, box-shadow 0.2s ease; } .db-card:hover { transform: translateY(-4px) scale(1.03); text-decoration: none; z-index: 2; } .db-portrait { position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px 10px 0 0; background-color: var(--panel-2); background-size: cover; background-position: center top; display: flex; align-items: center; justify-content: center; } .db-card .tl-avatar-ph { font-size: 2.6rem; } .db-card-body { padding: 0.55rem 0.7rem 0.7rem; display: flex; flex-direction: column; gap: 0.15rem; } .db-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; } .db-role { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--muted); } /* Rarity flair — adapted from the old site's pulse system */ .stars-wrap { letter-spacing: 0.08em; font-size: 0.72rem; line-height: 1; } .star.filled { display: inline-block; animation: starPulse 2s infinite ease-in-out; } .star.filled:nth-child(2) { animation-delay: 0.12s; } .star.filled:nth-child(3) { animation-delay: 0.24s; } .star.filled:nth-child(4) { animation-delay: 0.36s; } .star.filled:nth-child(5) { animation-delay: 0.48s; } @keyframes starPulse { 0%, 100% { transform: scale(1); opacity: 0.82; } 50% { transform: scale(1.16); opacity: 1; } } .r5 .star.filled { color: var(--r5); } .r4 .star.filled { color: var(--r4); } .r3 .star.filled { color: var(--r3); } /* Every rarity now breathes, not just SSR. Each tier drives the same two keyframes through its own --rc / --rc-glow pair, so the border brightens and the halo swells in the tier's colour: gold for SSR, violet for SR, blue for R. Speed steps down with rarity so an SSR card reads as the liveliest thing on the grid and an R card is a slow, quiet shimmer. */ .db-card.r5, .db-card.r4, .db-card.r3 { border-color: rgba(var(--rc-glow), 0.55); animation: rarityEdge var(--rc-beat, 2.6s) ease-in-out infinite, rarityHalo var(--rc-beat, 2.6s) ease-in-out infinite; } .r5 { --rc: var(--r5); --rc-glow: var(--r5-glow); --rc-beat: 2.4s; } .r4 { --rc: var(--r4); --rc-glow: var(--r4-glow); --rc-beat: 3s; } .r3 { --rc: var(--r3); --rc-glow: var(--r3-glow); --rc-beat: 3.8s; } @keyframes rarityEdge { 0%, 100% { border-color: rgba(var(--rc-glow), 0.45); } 50% { border-color: rgba(var(--rc-glow), 1); } } @keyframes rarityHalo { 0%, 100% { box-shadow: 0 0 4px rgba(var(--rc-glow), 0.28); } 50% { box-shadow: 0 0 15px rgba(var(--rc-glow), 0.62); } } /* Kept for anything still calling the old name by hand. */ @keyframes pulseGold { 0%, 100% { box-shadow: 0 0 4px rgba(247, 198, 75, 0.45); } 50% { box-shadow: 0 0 14px rgba(247, 198, 75, 0.6); } } /* Rarity ribbon across the top of the portrait, the same gradient as the card frame it is taken from, sliding slowly so gold reads as metallic. */ .db-card.r5 .db-portrait::after, .db-card.r4 .db-portrait::after, .db-card.r3 .db-portrait::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, rgba(var(--rc-glow), 0.15) 0%, rgba(var(--rc-glow), 1) 35%, #FFFFFF 50%, rgba(var(--rc-glow), 1) 65%, rgba(var(--rc-glow), 0.15) 100%); background-size: 220% 100%; animation: raritySheen var(--rc-beat, 2.6s) linear infinite; } @keyframes raritySheen { from { background-position: 140% 0; } to { background-position: -60% 0; } } @media (prefers-reduced-motion: reduce) { .db-card.r5, .db-card.r4, .db-card.r3 { animation: none; border-color: var(--rc); } .db-card .db-portrait::after { animation: none; } .star.filled { animation: none; } } /* ================= character page ================= */ .char-head { display: flex; gap: 1.4rem; align-items: center; margin-top: 0.4rem; } .char-head-portrait { width: 132px; height: 132px; flex: none; border-radius: 12px; border: 2px solid var(--line); } .char-head.r5 .char-head-portrait, .char-head.r4 .char-head-portrait, .char-head.r3 .char-head-portrait { border-color: rgba(var(--rc-glow), 0.55); animation: rarityEdge var(--rc-beat, 2.6s) ease-in-out infinite, rarityHalo var(--rc-beat, 2.6s) ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .char-head .char-head-portrait { animation: none; border-color: var(--rc, var(--line)); } } .char-title { color: var(--muted); font-style: italic; margin: 0.1rem 0 0.4rem; } .char-tags { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .tier-badge-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.8rem; } .tier-badge-block { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .tier-badge-cat { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .char-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; } .char-columns .sec-head { margin-top: 1.6rem; } .char-columns > div > .sec-head:first-child { margin-top: 0; } .rating { display: grid; grid-template-columns: 90px 1fr 42px; align-items: center; gap: 0.7rem; margin-bottom: 0.55rem; font-size: 0.88rem; } .rating-label { color: var(--muted); } .rating-track { height: 8px; background: var(--panel); border-radius: 99px; overflow: hidden; } .rating-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--r4), var(--accent)); transition: width 0.7s ease; } .rating-num { text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--accent); } .build-list dt { font-family: var(--font-display); text-transform: uppercase; font-size: 0.76rem; letter-spacing: 0.12em; color: var(--accent); margin-top: 0.8rem; } .build-list dd { margin: 0.15rem 0 0; font-size: 0.95rem; } .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; } .pros-cons h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.4rem; } .pros h3 { color: #7FD98F; } .cons h3 { color: #F3555A; } .pros-cons ul { padding-left: 1.1rem; font-size: 0.9rem; color: var(--muted); } .pros-cons li { margin-bottom: 0.35rem; } /* ================= guide article ================= */ .article { max-width: 780px; } .article-head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.6rem; } .article-thumb { width: 96px; height: 96px; font-size: 2rem; } .article-sub { color: var(--muted); margin-top: 0.2rem; } .article-meta { font-size: 0.84rem; color: var(--muted); margin-top: 0.35rem; } .article-meta strong { color: var(--text); } .article-body p { margin: 0.9rem 0; } .article-body ul { padding-left: 1.3rem; margin: 0.9rem 0; } .article-body li { margin-bottom: 0.45rem; } .article-body .sec-head { margin-top: 2rem; } .note { border: 1px solid var(--accent-line); border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; padding: 0.9rem 1.1rem; margin: 1.3rem 0; } .note-head { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; color: var(--accent); margin-bottom: 0.35rem; } .note p { margin: 0; font-size: 0.95rem; } .tip { border-left: 3px solid var(--r5); background: rgba(245, 185, 66, 0.07); padding: 0.75rem 1rem; margin: 1.2rem 0; border-radius: 0 8px 8px 0; font-size: 0.93rem; } .tip strong { color: var(--r5); font-family: var(--font-display); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.12em; margin-right: 0.5rem; } /* ================= footer ================= */ #site-footer { border-top: 1px solid var(--line); } .footer-inner { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.4rem 2.2rem; color: var(--muted); font-size: 0.85rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; } .footer-info { min-width: 240px; flex: 1 1 320px; } .footer-social a { text-transform: capitalize; margin-right: 0.3rem; } @media (max-width: 720px) { .footer-inner { flex-direction: column; align-items: flex-start; } } /* ================= responsive ================= */ @media (max-width: 1020px) { .home-cols { grid-template-columns: 1fr; } .char-columns { grid-template-columns: 1fr; } } @media (max-width: 860px) { .side-toggle { display: block; } .side-collapse { display: none; } #sidebar { transform: translateX(-100%); box-shadow: 12px 0 30px rgba(0,0,0,0.5); } body.sidebar-open #sidebar, body.with-sidebar.sidebar-collapsed.sidebar-open #sidebar { transform: translateX(0); } body.with-sidebar #main, body.with-sidebar #site-footer { margin-left: 0; } /* ---- mobile nav: hamburger sheet, games as a vertical accordion ---- */ .nav-toggle { display: block; margin-left: auto; } .nav-links { display: none; position: absolute; top: var(--topbar-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.15rem; background: #0E1016; border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); padding: 0.6rem 0.9rem 1rem; max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; white-space: normal; margin-left: 0; } .nav-links.open { display: flex; animation: fadeIn 0.25s ease; } .nav-main { flex-direction: column; align-items: stretch; gap: 0.15rem; } /* ---- mobile search ---- A 280px pill will not fit next to a brand, a hamburger, a Discord link and an account chip on a 390px screen, so the field collapses to a magnifier and reopens as its own full-width row hanging below the bar. #site-nav sets no overflow, which is what lets that row hang there instead of being clipped. The field is only display:none while closed, and JS focuses it after the class flips, so nothing is focused inside a hidden element. */ .nav-search-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: 1rem; cursor: pointer; padding: 0; transition: border-color 0.16s ease, background 0.16s ease; } .nav-search-btn[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); } .nav-search { display: none; } body.search-open .nav-search { display: flex; position: absolute; top: calc(var(--topbar-h) - 0.35rem); left: 0.9rem; right: 0.9rem; z-index: 61; flex: none; height: 42px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); animation: navDrop 0.2s ease; } .nav-search-kbd { display: none; } .nav-search-res { width: auto; left: 0; right: 0; } .brand-name { font-size: 1rem; } .tl-row { grid-template-columns: 52px repeat(var(--cols, 3), 1fr); } .tl-tier-label { font-size: 1rem; } .tl-avatar, .tl-avatar-img { width: 54px; } .tl-avatar-img { height: 54px; } .char-head { flex-direction: column; align-items: flex-start; } .pros-cons { grid-template-columns: 1fr; } .pill-reset { margin-left: 0; } } /* ================= accessibility ================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* Unknown-rarity cards (stub entries, pets) — neutral border */ .db-card.r0 { border-color: var(--line); } .char-head.r0 .char-head-portrait { border-color: var(--line); } .tip-col { color: var(--muted); font-size: 0.72rem; } /* Wide multi-column tier grids scroll horizontally on small screens */ .tl-grid-wrap { overflow-x: auto; } @media (max-width: 1020px) { .tl-grid-wrap .tl-row { min-width: 820px; } } /* ================= per-game keyart background ================= Two fixed layers crossfade between game backgrounds. The gradient overlay fades the art into the page background so content stays readable (Prydwen-style). */ .site-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; } .site-bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center 18%; opacity: 0; transform: scale(1.04); /* Smoother, silkier cross-fade for game-selection wallpaper swaps. core.js stacks one layer per wallpaper and uses this duration (BG_FADE_MS) to know when a retired layer has finished fading and can be removed. */ transition: opacity 1.3s cubic-bezier(0.33, 0, 0.2, 1), transform 2.2s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .site-bg-layer.show { opacity: 0.38; transform: scale(1); } .site-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 40%, var(--bg) 82%); } @supports not (background: color-mix(in srgb, red 50%, blue)) { .site-bg::after { background: linear-gradient(180deg, rgba(10, 11, 16, 0.55) 0%, rgba(10, 11, 16, 0.82) 40%, rgba(10, 11, 16, 0.99) 82%); } } /* ================= page transitions ================= */ /* Cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+) */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation-duration: 0.22s; } ::view-transition-new(root) { animation-duration: 0.28s; } /* JS fallback: fade the page out before navigating */ body { transition: opacity 0.17s ease; } body.page-exit { opacity: 0; } /* ================= scroll polish ================= */ #site-nav { transition: box-shadow 0.25s ease; } #site-nav.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); } /* ===== scroll reveal ===== Two layers. The section itself fades and lifts on a transition, because a section never has a hover state to protect. The items inside it (game tiles, update rows, banner cards, guide and upcoming rails) stagger in one after another on a KEYFRAME with no fill-mode, and that detail is load-bearing: a transition, or animation-fill-mode: forwards, would leave a transform sitting on the element after the reveal finished and silently kill the hover lift on every card it touched. Ending with no fill means the element goes back to owning its own transform the moment the animation is over, and .rv-in - added by the same observer - is what holds the final opacity. Both classes are added by JS, so a browser without IntersectionObserver never sees .reveal or .rv and gets a plain, fully visible page. */ .section.reveal, .role-group.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; } .section.reveal.in-view, .role-group.reveal.in-view { opacity: 1; transform: none; } @keyframes rvUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rv { opacity: 0; } .rv.rv-in { opacity: 1; animation: rvUp 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } /* `backwards`, never `forwards` or `both`. Backwards fills only during the stagger delay, so an item waiting its turn is already hidden instead of flashing at full opacity first. Forwards would keep applying the last keyframe after the animation ended, and that last keyframe sets transform: none - which is exactly the property every card hover needs. */ @media (prefers-reduced-motion: reduce) { .section.reveal, .role-group.reveal { transition: none; opacity: 1; transform: none; } .rv, .rv.rv-in { opacity: 1; animation: none; } } .to-top { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 80; width: 44px; height: 44px; border-radius: 10px; background: var(--panel); color: var(--accent); border: 1px solid var(--line); font-size: 1.15rem; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { border-color: var(--accent); box-shadow: 0 0 14px var(--accent-soft); } /* ============================================================ PHONE BOTTOM BAR, GAMES SHEET, SECTION JUMP ------------------------------------------------------------ Everything here is inert above 860px. The bar itself is display:none and the sheet is only ever opened by a button that lives inside the bar, so desktop never renders any of it. That is deliberate: this is a phone affordance, not a responsive restyle of an existing desktop one. --mbar-h is the bar's own height; the reserved space underneath the page is that plus the iOS home-indicator inset, which is why the two are separate variables. Anything fixed to the bottom of the screen (the back-to-top button, the contribute bar, the translate popup) has to sit above --mbar-space or it lands underneath the bar and cannot be tapped. ============================================================ */ :root { --mbar-h: 58px; --mbar-space: 0px; } .mbar { display: none; } .msheet-ov { display: none; } .mjump { display: none; } @media (max-width: 860px) { :root { --mbar-space: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px)); } .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: stretch; height: var(--mbar-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: color-mix(in srgb, var(--panel) 92%, transparent); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.34); } /* backdrop-filter is progressive: where it is unsupported the 92% panel mix above is already opaque enough to read against. */ @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) { .mbar { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--panel) 76%, transparent); } } .mbar-i { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.14rem; padding: 0.3rem 0.15rem 0.2rem; background: none; border: 0; border-radius: 0; font: inherit; color: var(--muted); text-decoration: none; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; transition: color 0.16s ease; } .mbar-i:hover, .mbar-i:focus-visible { color: var(--text); text-decoration: none; } .mbar-i.active { color: var(--accent); } /* The lit tab gets a short rule along the top edge rather than a filled pill. A pill under a 58px bar leaves no room for a legible label, and the label is the part that makes a four-icon bar learnable. */ .mbar-i.active::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 30px; height: 2px; border-radius: 0 0 3px 3px; background: var(--accent); } .mbar-svg { width: 22px; height: 22px; flex: none; } .mbar-l { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Inside a game the Games tab wears that game's icon. */ .mbar-gic { width: 22px; height: 22px; border-radius: 7px; flex: none; background: var(--panel-2) center/cover no-repeat; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .mbar-i.active .mbar-gic { border-color: var(--accent); } .mbar-gph { font-family: var(--font-display); font-weight: 800; font-size: 0.7rem; color: var(--muted); } .mbar-gic.has-img .mbar-gph { display: none; } /* Reserve the bar's space at the end of the document rather than on . Padding on the body would also pad the fixed topbar's containing block and is a common source of a phantom scrollbar; the footer is the last thing in flow, so growing it moves nothing else. */ body.has-mbar #site-footer { padding-bottom: calc(var(--mbar-space) + 0.9rem); } body.has-mbar .to-top { bottom: calc(var(--mbar-space) + 0.7rem); } body.has-mbar .contrib-bar { bottom: calc(var(--mbar-space) + 0.7rem); } body.has-mbar .ct-pop { bottom: calc(var(--mbar-space) + 10px); } /* ---- the hamburger goes away ---- CFG.nav is Home / Upcoming games / Guides and the sheet holds every game. The bar therefore carries the whole of the hamburger sheet, and keeping both would mean two menus with identical contents - which teaches a reader to trust neither, and costs ~46px of a topbar that measured 36px short. */ .nav-toggle { display: none !important; } .nav-links { display: none !important; } /* ---- the section jump pill ---- Left side, because the back-to-top button owns the right. It names the section you are scrolled to, so it is doing work even when it is not tapped. */ .mjump { position: fixed; left: 0.9rem; bottom: calc(var(--mbar-space) + 0.7rem); z-index: 88; display: inline-flex; align-items: center; gap: 0.4rem; max-width: min(62vw, 260px); height: 38px; padding: 0 0.75rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 94%, transparent); color: var(--text); font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); -webkit-tap-highlight-color: transparent; } .mjump { opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s ease; } .mjump.show { opacity: 1; transform: none; pointer-events: auto; } .mjump:hover, .mjump:focus-visible { border-color: var(--accent); } .mjump .mbar-svg { width: 16px; height: 16px; color: var(--accent); } .mjump-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- the sheet ---- */ .msheet-ov { position: fixed; inset: 0; z-index: 120; display: block; background: rgba(6, 7, 11, 0.62); opacity: 0; transition: opacity 0.22s ease; } .msheet-ov.open { opacity: 1; } .msheet-ov[hidden] { display: none; } .msheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.4rem 0.9rem calc(1rem + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55); transform: translateY(101%); transition: transform 0.24s cubic-bezier(0.22, 0.8, 0.3, 1); } .msheet-ov.open .msheet { transform: none; } .msheet-grab { width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: 0.35rem auto 0.6rem; } .msheet-h { margin: 0 0 0.55rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .mrow + .mrow { margin-top: 0.5rem; } .mrow-head { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 0.6rem; min-height: 66px; padding: 0.6rem 0.75rem; border-radius: 13px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); text-decoration: none; } .mrow.current .mrow-head { border-color: var(--accent); } .mrow-art { position: absolute; inset: 0; z-index: -2; background: var(--panel-2) center/cover no-repeat; } .mrow-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 11, 16, 0.9) 0%, rgba(10, 11, 16, 0.72) 55%, rgba(10, 11, 16, 0.5) 100%); } .mrow-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--panel) center/cover no-repeat; border: 1px solid rgba(255, 255, 255, 0.2); display: grid; place-items: center; overflow: hidden; } .mrow-ph { font-family: var(--font-display); font-weight: 800; color: var(--muted); } .mrow-ic.has-img .mrow-ph { display: none; } .mrow-tx { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .mrow-t { font-family: var(--font-display); font-weight: 800; font-size: 0.98rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mrow-s { font-size: 0.7rem; color: #C7CDE4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mrow-tick { margin-left: auto; color: var(--accent); font-weight: 800; } .mrow-go { margin-left: auto; color: #C7CDE4; font-size: 1.2rem; line-height: 1; } /* Only the game you are already inside opens up. Expanding all three would be a wall of forty links, which is the sidebar the phone deliberately hides. */ .mrow-secs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: 0.4rem 0 0; padding: 0.5rem; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; background: var(--panel-2); } .msec { display: flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0.4rem 0.55rem; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msec:hover, .msec:focus-visible { border-color: var(--accent); text-decoration: none; } .msec-i { flex: none; font-size: 0.9rem; } .msheet-all { display: block; margin-top: 0.65rem; padding: 0.7rem; text-align: center; border-radius: 11px; border: 1px dashed var(--accent-line); color: var(--accent); font-size: 0.82rem; font-weight: 700; text-decoration: none; } .msheet-all:hover { text-decoration: none; background: var(--accent-soft); } .msheet-h2 { margin-top: 0.9rem; } .mrow-secs-flat { margin: 0; border-radius: 12px; border-top: 1px solid var(--line); } .msec.current { border-color: var(--accent); color: var(--accent); } .mjump-list { display: flex; flex-direction: column; gap: 0.3rem; } .mjump-i { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.5rem 0.7rem; width: 100%; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 0.86rem; font-weight: 600; text-align: left; cursor: pointer; } .mjump-i:hover, .mjump-i:focus-visible { border-color: var(--accent); } .mjump-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* position: fixed, not overflow: hidden. overflow:hidden on does not stop the page scrolling behind a sheet on iOS Safari; pinning it does, and the JS restores the scroll offset when the sheet closes. */ body.sheet-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .msheet, .msheet-ov { transition: none; } } /* Staggered card entrances (new nodes re-trigger on each render) */ @keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .gcard, .guide-card, .tool-card, .db-card { animation: riseIn 0.45s ease backwards; } .gcard:nth-child(2), .guide-card:nth-child(2), .tool-card:nth-child(2), .db-card:nth-child(2) { animation-delay: 0.05s; } .gcard:nth-child(3), .guide-card:nth-child(3), .tool-card:nth-child(3), .db-card:nth-child(3) { animation-delay: 0.1s; } .gcard:nth-child(4), .guide-card:nth-child(4), .tool-card:nth-child(4), .db-card:nth-child(4) { animation-delay: 0.15s; } .gcard:nth-child(5), .guide-card:nth-child(5), .tool-card:nth-child(5), .db-card:nth-child(5) { animation-delay: 0.2s; } .gcard:nth-child(6), .guide-card:nth-child(6), .tool-card:nth-child(6), .db-card:nth-child(6) { animation-delay: 0.25s; } .gcard:nth-child(n+7), .guide-card:nth-child(n+7), .tool-card:nth-child(n+7), .db-card:nth-child(n+7) { animation-delay: 0.3s; } .tl-grid-wrap.fade-in .tl-row, .role-grid .role-row { animation: riseIn 0.4s ease backwards; } .tl-grid-wrap.fade-in .tl-row:nth-child(2), .role-grid .role-row:nth-child(2) { animation-delay: 0.04s; } .tl-grid-wrap.fade-in .tl-row:nth-child(3), .role-grid .role-row:nth-child(3) { animation-delay: 0.08s; } .tl-grid-wrap.fade-in .tl-row:nth-child(4), .role-grid .role-row:nth-child(4) { animation-delay: 0.12s; } .tl-grid-wrap.fade-in .tl-row:nth-child(n+5), .role-grid .role-row:nth-child(n+5) { animation-delay: 0.16s; } /* ================= roles & effects page ================= */ .page-wide { max-width: 1400px; } .role-key-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem 1.1rem; margin: 1.1rem 0 1.4rem; } .role-key-legend { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; font-size: 0.92rem; } .role-legend-item { display: inline-flex; align-items: center; gap: 0.45rem; } .role-legend-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: none; } .role-legend-perm { background: linear-gradient(135deg, #6FA8F0, #F0A0C8); } .role-legend-dur { background: #101219; border: 1px solid var(--line); } .role-key-panel ul { padding-left: 1.2rem; margin: 0 0 0.9rem; color: #C9CEE2; font-size: 0.9rem; } .role-key-panel li { margin: 0.25rem 0; } .role-key-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .role-key { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.28rem 0.75rem; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .role-key .el-dot { background: var(--dyn, var(--muted)); } .role-key:hover { text-decoration: none; border-color: var(--dyn, var(--accent)); transform: translateY(-1px); } .role-group { margin-top: 2rem; scroll-margin-top: calc(var(--topbar-h) + 14px); } .role-group-head { display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding-bottom: 0.45rem; margin-bottom: 0.8rem; border-bottom: 2px solid var(--dyn, var(--line)); } .role-square { width: 12px; height: 12px; background: var(--dyn, var(--accent)); flex: none; } .role-count { margin-left: auto; font-size: 0.72rem; font-family: var(--font-body); color: var(--muted); letter-spacing: 0.12em; font-weight: 600; } .role-grid { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel-2); } .role-row { display: grid; grid-template-columns: 250px 1fr; border-bottom: 1px solid var(--line); } .role-row:last-child { border-bottom: none; } .role-label { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding: 0.7rem 0.9rem; background: var(--panel); border-left: 4px solid var(--dyn, var(--line)); font-family: var(--font-display); } @supports (background: color-mix(in srgb, red 50%, blue)) { .role-label { background: color-mix(in srgb, var(--dyn) 16%, var(--panel-2)); } } /* Dark label = duration-based effect (see the page key) */ .role-duration .role-label { background: #0C0E14; } .role-name { font-weight: 700; font-size: 0.95rem; line-height: 1.25; } .role-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; } .role-scope { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-body); color: var(--text); opacity: 0.85; background: rgba(255, 255, 255, 0.08); padding: 0.06rem 0.45rem; border-radius: 4px; } .role-dur { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-body); color: #F0C04E; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(240, 192, 78, 0.4); padding: 0.06rem 0.45rem; border-radius: 4px; } .role-cell { display: flex; flex-wrap: wrap; gap: 0.55rem; align-content: flex-start; padding: 0.65rem; min-height: 84px; } .role-ghost { cursor: default; } .role-ghost .tl-avatar-img { border-style: dashed; } .role-hidden { display: none !important; } .role-footnote { margin-top: 1.6rem; font-size: 0.85rem; } @media (max-width: 860px) { .role-row { grid-template-columns: 1fr; } .role-label { flex-direction: row; align-items: center; justify-content: flex-start; border-left: none; border-top: 3px solid var(--dyn, var(--line)); padding: 0.5rem 0.9rem; } } /* ================= sidebar collapse & game switcher ================= */ .side-collapse { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 1.02rem; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .side-collapse:hover { color: var(--accent); border-color: var(--accent); } body.with-sidebar #main, body.with-sidebar #site-footer { transition: margin-left 0.3s ease; } body.with-sidebar.sidebar-collapsed #sidebar { transform: translateX(-100%); box-shadow: none; } body.with-sidebar.sidebar-collapsed #main, body.with-sidebar.sidebar-collapsed #site-footer { margin-left: 0; } .side-game { position: relative; padding: 0; } .side-game-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.8rem; background: none; border: none; color: var(--text); font-family: var(--font-display); cursor: pointer; text-align: left; } .side-game-btn:hover .side-switch { color: var(--accent); border-color: var(--accent); transform: rotate(180deg); } .side-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55); padding: 0.35rem; } .side-menu.open { display: block; animation: fadeIn 0.18s ease; } .side-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.65rem; border-radius: 6px; color: var(--text); font-weight: 600; font-size: 0.92rem; } .side-menu-item:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; } .side-menu-item.current { color: var(--accent); } .side-menu-tick { color: var(--accent); } .side-menu-home { border-top: 1px solid var(--line); margin-top: 0.25rem; color: var(--muted); } .side-menu-home .side-icon { margin-right: 0.35rem; } /* ================= filter toolbar (Prydwen-style) ================= */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 1.2rem; } .filter-search { flex: 1 1 240px; max-width: 420px; } .fgroup { display: inline-flex; overflow: hidden; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .fbtn { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: none; border-left: 1px solid var(--line); color: var(--muted); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; padding: 0.5rem 0.8rem; transition: background 0.15s ease, color 0.15s ease; } .fgroup .fbtn:first-child { border-left: none; } .fbtn:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); } .fbtn.active, .fbtn-all.active { background: var(--accent); color: #0B0C10; } .fbtn-el .el-dot { background: var(--dyn, var(--muted)); } .fbtn-el.active { background: var(--dyn, var(--accent)); color: #0B0C10; } .fbtn-el.active .el-dot { background: rgba(0, 0, 0, 0.55); } .fbtn-reset { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .fbtn-reset:hover { color: #F3555A; border-color: #F3555A; background: transparent; } .filter-count { margin-left: auto; color: var(--muted); font-size: 0.82rem; white-space: nowrap; } @media (max-width: 860px) { .filter-count { margin-left: 0; width: 100%; } } /* ================= upcoming games tracker ================= */ .upg-head { text-align: center; margin-bottom: 1.4rem; } .upg-search { margin: 1rem auto 0; display: block; } .upg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; } .upg-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; animation: riseIn 0.45s ease backwards; } .upg-card:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); } .upg-band { padding: 0.85rem 1rem 0.75rem; background: var(--panel-2); border-bottom: 2px solid var(--dyn, var(--line)); } @supports (background: color-mix(in srgb, red 50%, blue)) { .upg-band { background: color-mix(in srgb, var(--dyn) 26%, var(--panel-2)); } } .upg-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; } .upg-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; } .upg-chip { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(0, 0, 0, 0.4); color: #fff; padding: 0.12rem 0.5rem; border-radius: 4px; } .upg-chip-region { background: rgba(255, 255, 255, 0.14); } .upg-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem 1rem; flex: 1; } .upg-blurb { font-size: 0.9rem; color: #C9CEE2; flex: 1; } .upg-meta-row { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.85rem; } .upg-meta-label { flex: none; width: 96px; color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; } .upg-date { color: #7FD98F; } .upg-tba { color: var(--muted); } .upg-plat { display: inline-block; background: var(--panel-2); border: 1px solid var(--line); font-size: 0.72rem; padding: 0.06rem 0.45rem; border-radius: 4px; margin-right: 0.25rem; } .up-more .up-name { color: var(--accent); } /* ================= team builder ================= */ .tb-actions { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; } .tb-btn { border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 0.45rem 0.95rem; border-radius: 8px; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; transition: border-color 0.15s ease, color 0.15s ease, filter 0.15s ease; } .tb-btn:hover { border-color: var(--accent); color: var(--accent); } .tb-btn-accent { background: var(--accent); border-color: var(--accent); color: #0B0C10; } .tb-btn-accent:hover { filter: brightness(1.15); color: #0B0C10; } .tb-copied { color: #7FD98F; font-size: 0.85rem; word-break: break-all; } .tb-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; max-width: 940px; } .tb-slot { position: relative; min-height: 190px; padding: 0.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; border: 2px dashed var(--line); border-radius: 12px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease; } .tb-slot:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); } .tb-slot-filled { border-style: solid; border-color: var(--dyn, var(--line)); background: var(--panel); } /* A filled team slot glows in its unit's rarity colour, so a team of five reads as gold-heavy or blue-heavy before you have read a single name. */ .tb-slot-filled.r5, .tb-slot-filled.r4, .tb-slot-filled.r3 { border-color: rgba(var(--rc-glow), 0.6); animation: rarityEdge var(--rc-beat, 2.6s) ease-in-out infinite, rarityHalo var(--rc-beat, 2.6s) ease-in-out infinite; } .tb-slot-filled:hover { animation: none; } @media (prefers-reduced-motion: reduce) { .tb-slot-filled { animation: none; border-color: var(--rc, var(--dyn, var(--line))); } } .tb-plus { font-size: 1.7rem; color: var(--accent); line-height: 1; } .tb-portrait { display: flex; align-items: center; justify-content: center; width: 84px; aspect-ratio: 1; border-radius: 10px; background-color: var(--panel-2); background-size: cover; background-position: center top; } .tb-slot-name { color: var(--text); font-size: 1rem; } .tb-slot-sub { display: flex; align-items: center; gap: 0.35rem; font-family: var(--font-body); font-size: 0.72rem; color: var(--muted); font-weight: 400; } .tb-slot-sub .el-dot { background: var(--dyn, var(--muted)); } .tb-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 0.8rem; } .tb-remove:hover { color: #F3555A; border-color: #F3555A; } .tb-analysis { margin-top: 1.2rem; max-width: 940px; } .tb-comp { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; } .tb-msg { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.55rem 0.85rem; border-radius: 8px; border: 1px solid; margin-bottom: 0.45rem; font-size: 0.9rem; } .tb-msg-ico { flex: none; } .tb-msg-warn { background: rgba(243, 85, 90, 0.1); border-color: rgba(243, 85, 90, 0.45); color: #F8B4B6; } .tb-msg-good { background: rgba(127, 217, 143, 0.08); border-color: rgba(127, 217, 143, 0.4); color: #BFE9C8; } .tb-msg-tip { background: rgba(245, 185, 66, 0.08); border-color: rgba(245, 185, 66, 0.4); color: #F0D9A8; } .tb-msg-info { background: var(--panel); border-color: var(--line); color: var(--muted); } .preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; } .preset-card { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem; color: var(--text); cursor: pointer; font-family: var(--font-body); transition: border-color 0.2s ease, transform 0.2s ease; } .preset-card:hover { border-color: var(--accent); transform: translateY(-3px); } .preset-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; } .preset-minis { display: flex; gap: 0.3rem; flex-wrap: wrap; } .preset-mini { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 2px solid var(--line); background-color: var(--panel-2); background-size: cover; background-position: center top; font-family: var(--font-display); color: var(--muted); font-size: 0.9rem; } .preset-mini.r5, .preset-mini.r4, .preset-mini.r3 { border-color: rgba(var(--rc-glow), 0.6); } .preset-desc { font-size: 0.82rem; color: var(--muted); } .preset-load { color: var(--accent); font-size: 0.82rem; font-weight: 700; } /* ---- modal (character picker) ---- */ body.modal-open { overflow: hidden; } .modal-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(5, 6, 10, 0.72); backdrop-filter: blur(4px); padding: 1.2rem; opacity: 0; transition: opacity 0.18s ease; } .modal-overlay.open { opacity: 1; } .modal-overlay[hidden] { display: none; } .modal { width: 100%; max-width: 920px; max-height: 86vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem 1.2rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); transform: translateY(12px) scale(0.98); transition: transform 0.18s ease; } .modal-overlay.open .modal { transform: none; } .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; } .modal-head h2 { font-size: 1.25rem; } .modal-close { width: 34px; height: 34px; border-radius: 8px; background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer; font-size: 0.95rem; } .modal-close:hover { color: #F3555A; border-color: #F3555A; } .modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.7rem; margin-top: 0.4rem; } .modal-card { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; background: var(--panel); border: 2px solid var(--line); border-radius: 10px; padding: 0 0 0.5rem; overflow: hidden; color: var(--text); cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; } .modal-card:hover { transform: translateY(-3px); border-color: var(--dyn, var(--accent)); } .modal-card.r5, .modal-card.r4, .modal-card.r3 { border-color: rgba(var(--rc-glow), 0.5); } .modal-card .tb-portrait { width: 100%; border-radius: 0; } .modal-card-name { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; padding: 0 0.3rem; } /* ================= events page ================= */ .event-content { margin-top: 1.5rem; } .event-blurb { font-size: 1.05rem; color: var(--text); margin-bottom: 1.2rem; } .event-reqs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.8rem; } .event-req-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(243, 85, 90, 0.1); border: 1px solid rgba(243, 85, 90, 0.3); color: #F8B4B6; padding: 0.35rem 0.8rem; border-radius: 8px; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; } .event-req-chip .el-dot { background: #F3555A; } .event-teams-grid { display: grid; gap: 1.2rem; } .event-team-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem; } .event-team-head { margin-bottom: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; } .event-team-head h3 { font-size: 1.15rem; color: var(--accent); margin: 0; } .event-team-desc { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; } .event-team-roster { display: flex; flex-wrap: wrap; gap: 0.8rem; } .event-empty-slot { width: 64px; height: 64px; border-radius: 8px; border: 2px dashed var(--line); background: var(--panel-2); } .event-note { margin-top: 1.5rem; } /* ===== Resolved asset images (data-imgset) ===== */ /* When an image loads, hide the letter/emoji placeholder underneath it. */ .has-img { background-size: cover; background-position: center top; } .has-img > .gcard-ph, .has-img > .tl-avatar-ph, .has-img > .preset-mini-ph, .guide-thumb.has-img > span, .article-thumb.has-img > span { display: none; } /* Per-game logo swapped into the top-bar brand on game pages. */ .brand.has-logo { gap: 0; } .brand-logo { display: block; height: 30px; width: auto; max-width: 190px; object-fit: contain; } @media (max-width: 720px) { .brand-logo { max-width: 130px; } } /* ===== Animated logo ===== */ /* The diamond mark gently pulses/shimmers; a hover spins it. The per-game logo image drifts subtly and lifts on hover. All motion is disabled under prefers-reduced-motion (handled by the global rule above). */ @keyframes ld-mark-pulse { 0%, 100% { transform: rotate(0deg) scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); } 50% { transform: rotate(0deg) scale(1.08); box-shadow: 0 0 14px var(--accent-line); } } @keyframes ld-mark-sheen { 0% { background-position: -140% 0; } 60%, 100% { background-position: 240% 0; } } .brand-mark { position: relative; overflow: hidden; background-size: 220% 100%; background-image: linear-gradient(115deg, var(--accent) 0%, var(--r4) 45%, #ffffff 52%, var(--accent) 60%, var(--r4) 100%); animation: ld-mark-pulse 3.4s ease-in-out infinite, ld-mark-sheen 4.6s ease-in-out infinite; transition: transform 0.5s cubic-bezier(.2,.8,.2,1); } .brand:hover .brand-mark { transform: rotate(180deg) scale(1.1); } @keyframes ld-logo-float { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); } 50% { transform: translateY(-2px); filter: drop-shadow(0 3px 8px rgba(0,0,0,0.45)); } } .brand-logo { animation: ld-logo-float 4s ease-in-out infinite; transition: transform 0.35s ease; } .brand:hover .brand-logo { transform: scale(1.05); } /* ===== Footer preferences: theme + language switchers ===== */ .footer-prefs { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; justify-content: flex-end; } .pref { display: flex; align-items: center; gap: 0.6rem; } .pref-label { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; color: var(--muted); } .theme-dots { display: flex; gap: 0.5rem; } .theme-dot { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; border: 2px solid var(--line); background: var(--dyn, var(--accent)); cursor: pointer; padding: 0; transition: transform 0.15s ease, border-color 0.15s ease; } .theme-dot:hover { transform: scale(1.15); } .theme-dot.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--dyn, var(--accent)); } .lang-select { appearance: none; -webkit-appearance: none; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 2rem 0.5rem 0.75rem; font: inherit; font-size: 0.85rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ===== Rendering-perf: skip layout/paint for offscreen sections ===== */ /* The home page is only a few sections tall, and the 640px placeholder each one reserved before it scrolled in was the main reason the page looked full of gaps. The perf win there was negligible, so home is off this list now. */ .role-group, .upg-grid { content-visibility: auto; contain-intrinsic-size: auto 640px; } /* ===== Extra mobile tuning (small phones) ===== */ @media (max-width: 860px) { .footer-prefs { gap: 1rem 1.4rem; } .theme-dot { width: 30px; height: 30px; min-width: 30px; } /* larger touch target */ .lang-select { padding-top: 0.6rem; padding-bottom: 0.6rem; } .nav-links a { padding: 0.6rem 0.75rem; } /* comfortable tap size */ /* Three posters side by side on a 390px screen would be three 115px slivers, and two-up plus a full-width orphan underneath is what produced the ragged 175/175/358 row in the tester's screenshot. So on phones each game is its own full-width banner: same poster, same badges, three identical rows. It still owns the first screenful, which is the part that matters, and there is no odd one out to explain. Nothing here is a pinned variant. The band scrolls away now (see the note on .qnav above), so the phone layout has exactly one state and there is nothing to animate, overflow or snap. */ .qnav-row { flex-wrap: wrap; gap: 0.5rem; } .qnav-tile { flex: 1 1 100%; min-height: 96px; padding: 0.7rem 0.8rem; border-radius: 12px; } /* Positive gap, not the old margin-right: -32px. That negative margin existed only to tuck the icon behind the title while the tile was collapsing; with no collapse it just overlapped the text. */ .qnav-ic { width: 32px; height: 32px; border-radius: 8px; margin-right: 0.55rem; } .qnav-inner { padding: 0.7rem 1rem 0.85rem; } .qnav-label { margin-bottom: 0.45rem; } .qnav-more { gap: 0.35rem 0.9rem; margin-top: 0.6rem; } /* ---- the topbar has to fit inside the phone, not merely look like it does ---- Measured at 360 / 390 / 414 the account chip was landing at L338 R426 on a 390px screen: 36px of it hanging off the right edge, which is what put a horizontal scrollbar on the whole document and shifted the home page left so "OUR GAMES" read as "JR GAMES". The bar is a zero-sum flex row, so the fix is to spend fewer pixels on it rather than to clip the overflow. */ .nav-inner { padding: 0 0.9rem; gap: 0.5rem; min-width: 0; } /* Let the wordmark be the thing that gives, since it is the one item on the bar that is decoration rather than a destination. */ .brand { flex: 0 1 auto; min-width: 0; } .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Both Discord buttons keep a word on phones. Stripping them back to bare marks is what made the bar unreadable in the first place: two Discord glyphs, one blue and one yellow, with nothing to say which was which. The width comes back from a shorter join label and tighter padding. */ .acct-slot { margin-left: 0.25rem; } .acct-login { padding: 0 0.6rem; height: 38px; border-radius: 999px; gap: 0.35rem; } .acct-login span { font-size: 0.82rem; } .btn-discord { height: 38px; padding: 0 0.6rem; gap: 0.35rem; font-size: 0.8rem; } .bd-long { display: none; } .bd-short { display: inline; } .acct-chip { padding: 0.28rem 0.5rem; } .acct-name { max-width: 68px; } } @media (max-width: 560px) { /* The merged game cards carry badges and a name, so one per row on a phone. The small grid is still fine two-up. */ .gcard-grid { grid-template-columns: 1fr; } .gcard-grid-small { grid-template-columns: 1fr 1fr; } .home-hero-inner { padding: 0.95rem 1rem 0.9rem; } .home-hero h1 { font-size: 1.18rem; } .home-hero-blurb { font-size: 0.79rem; margin-top: 0.3rem; } .home-credits { margin-top: 0.55rem; } .qnav-t { font-size: 0.92rem; } .qnav-s { font-size: 0.66rem; } .qnav-tile { min-height: 98px; } .home-body { padding: 1.2rem 1rem 2.6rem; } .home-body > .section + .section { margin-top: 1.8rem; } .home-cols { gap: 1.6rem; } h1 { font-size: 1.5rem; } .page-pad { padding-left: 1rem; padding-right: 1rem; } .footer-prefs { flex-direction: column; align-items: flex-start; gap: 1rem; } .tool-grid { grid-template-columns: 1fr; } .db-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } } @media (max-width: 400px) { .gcard-grid-small { grid-template-columns: 1fr; } .brand-name { font-size: 0.92rem; } } /* Touch devices: char tooltips can sit under a persistent tap; keep them from blocking */ @media (hover: none) { .char-tip { display: none !important; } } /* ===== Content-translation popup / progress / settings ===== */ .ct-pop { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); z-index: 120; max-width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; background: var(--panel); color: var(--text); border: 1px solid var(--accent-line); border-radius: 12px; padding: 0.7rem 0.9rem; box-shadow: 0 14px 40px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), opacity 0.35s ease; } .ct-pop.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .ct-pop-text { font-weight: 600; font-size: 0.92rem; } .ct-pop-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .ct-btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 0.45rem 0.8rem; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .ct-btn:hover { border-color: var(--accent-line); } .ct-btn-accent { background: var(--accent); color: var(--bg); border-color: var(--accent); } .ct-x { border: none; background: transparent; color: var(--muted); font-size: 0.95rem; cursor: pointer; padding: 0.2rem 0.35rem; line-height: 1; } .ct-x:hover { color: var(--text); } .ct-badge { position: fixed; right: 16px; bottom: 16px; z-index: 115; background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.8rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.4); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .ct-badge.show { opacity: 1; transform: translateY(0); } .ct-switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem; } .ct-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .ct-switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); transition: background 0.2s ease, border-color 0.2s ease; } .ct-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform 0.2s ease, background 0.2s ease; } .ct-switch input:checked + .ct-switch-track { background: var(--accent-soft); border-color: var(--accent-line); } .ct-switch input:checked + .ct-switch-track .ct-switch-thumb { transform: translateX(16px); background: var(--accent); } .ct-switch input:focus-visible + .ct-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 560px) { .ct-pop { left: 12px; right: 12px; transform: translateY(140%); max-width: none; } .ct-pop.show { transform: translateY(0); } .ct-pop-actions { margin-left: 0; width: 100%; } .ct-pop-actions .ct-btn { flex: 1; } } /* ===== Light mode (data-mode="light") — surfaces come from CSS vars set in applyTheme(); these rules fix the few places with hardcoded dark colors. */ html[data-mode="light"] #site-nav { background: rgba(255, 255, 255, 0.9); } html[data-mode="light"] #site-nav.scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } html[data-mode="light"] .nav-links { background: rgba(255, 255, 255, 0.98); } html[data-mode="light"] .nav-panel { background: #fff; } html[data-mode="light"] .char-tip { background: rgba(255, 255, 255, 0.98); color: var(--text); } html[data-mode="light"] .acc-body, html[data-mode="light"] .role-key-panel ul, html[data-mode="light"] .upg-blurb { color: var(--muted); } html[data-mode="light"] .role-duration .role-label { background: #E9ECF4; } html[data-mode="light"] .role-legend-dur { background: #E1E5EF; } html[data-mode="light"] .home-hero::before, html[data-mode="light"] .hub-hero::before { background: radial-gradient(900px 380px at 75% 0%, var(--accent-soft), transparent 60%), linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.82)); } html[data-mode="light"] .home-hero-blurb, html[data-mode="light"] .hub-hero p { color: var(--muted); } /* ===== Appearance (light/dark) segmented toggle ===== */ .mode-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .mode-btn { border: none; background: var(--panel-2); color: var(--muted); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.42rem 0.85rem; cursor: pointer; } .mode-btn + .mode-btn { border-left: 1px solid var(--line); } .mode-btn.active { background: var(--accent); color: #0B0C10; } .more-settings-btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 0.5rem 0.9rem; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .more-settings-btn:hover { border-color: var(--accent-line); color: var(--accent); } /* ===== Full settings overlay (bottom sheet) ===== */ .settings-overlay { position: fixed; inset: 0; z-index: 130; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .settings-overlay.open { opacity: 1; pointer-events: auto; } .settings-panel { width: 100%; max-width: 640px; max-height: 82vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 1.1rem 1.35rem 1.7rem; transform: translateY(100%); transition: transform 0.32s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5); } .settings-overlay.open .settings-panel { transform: none; } .settings-grabber { width: 42px; height: 5px; border-radius: 999px; background: var(--line); margin: 0 auto 0.7rem; flex: none; } .settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; } .settings-head h2 { font-size: 1.3rem; } .settings-body { display: flex; flex-direction: column; gap: 1.15rem; padding-top: 0.6rem; } .settings-body .pref { justify-content: space-between; gap: 1rem; } .settings-body .pref .pref-label { font-size: 0.78rem; } .settings-hint { text-align: center; color: var(--muted); font-size: 0.76rem; margin-top: 1.1rem; opacity: 0.8; } body.modal-open { overflow: hidden; } /* ===== PWA "new version available" update banner ===== */ .sw-pop { position: fixed; left: 50%; top: calc(var(--topbar-h) + 12px); transform: translate(-50%, -170%); z-index: 125; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; max-width: min(520px, calc(100vw - 24px)); background: var(--panel); color: var(--text); border: 1px solid var(--accent-line); border-radius: 12px; padding: 0.6rem 0.9rem; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), opacity 0.35s ease; } .sw-pop.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .sw-pop.busy { opacity: 0.7; pointer-events: none; } .sw-pop-text { font-weight: 600; font-size: 0.92rem; } .sw-pop-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } @media (max-width: 560px) { .sw-pop { left: 12px; right: 12px; transform: translateY(-170%); max-width: none; } .sw-pop.show { transform: translateY(0); } .sw-pop-actions { margin-left: 0; width: 100%; } .sw-pop-actions .ct-btn { flex: 1; } } /* ============================================================ BUILDS — recommended-build blocks (Builds page + character pages) ============================================================ */ .build-tier-head { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin: 1.6rem 0 0.6rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--accent-line); } .build-block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.15rem; margin-bottom: 1.1rem; } .build-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; } .build-portrait { width: 56px; height: 56px; min-width: 56px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); background-size: cover; background-position: center top; display: flex; align-items: center; justify-content: center; } .build-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--text); display: inline-block; } a.build-name:hover { color: var(--accent); text-decoration: none; } .build-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; } .build-tier, .build-type, .build-prop { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .build-type-attack { color: #F3555A; border-color: rgba(243,85,90,0.5); } .build-type-magic { color: #55A8F0; border-color: rgba(85,168,240,0.5); } .build-grid { display: grid; gap: 0.8rem; } .build-grid-top { grid-template-columns: 1.4fr 1fr 0.8fr; } .build-grid-bottom { grid-template-columns: 1fr 1fr 1.4fr; margin-top: 0.8rem; } .build-sec { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.8rem; } .build-sec-head { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.55rem; } .build-trans { display: flex; flex-wrap: wrap; gap: 0.4rem; } .build-node { position: relative; display: inline-flex; align-items: center; padding: 0.3rem 0.55rem; border-radius: 6px; font-size: 0.78rem; background: var(--panel); border: 1px solid var(--line); color: var(--muted); } .build-node-up { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent-line) inset; } .build-node-up-tag { font-size: 0.55rem; font-weight: 800; color: var(--bg); background: var(--accent); border-radius: 4px; padding: 0.05rem 0.25rem; margin-right: 0.35rem; letter-spacing: 0.02em; } .build-skills { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; } .build-skills li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; } .build-skills li.off { color: var(--muted); opacity: 0.65; } .build-skill-mark { width: 18px; height: 18px; min-width: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; } .build-skills li.on .build-skill-mark { background: rgba(90,217,138,0.18); color: #5AD98A; border: 1px solid rgba(90,217,138,0.5); } .build-skills li.off .build-skill-mark { background: var(--panel); color: var(--muted); border: 1px solid var(--line); } .build-pots { display: flex; gap: 0.4rem; flex-wrap: wrap; } .build-pot { flex: 1; min-width: 54px; text-align: center; font-size: 0.72rem; font-weight: 700; padding: 0.35rem 0.3rem; border-radius: 6px; border: 1px dashed var(--line); color: var(--muted); background: var(--panel); } .build-pot.on { border-style: solid; border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); } .gear-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.7rem; } .gear-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem 0.7rem; } .gear-card-name { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text); margin-bottom: 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); } .gear-slots { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.55rem; } .gear-slot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.8rem; } .gear-slot-name { color: var(--muted); } .gear-slot-main { font-weight: 600; color: var(--text); text-align: right; } .gear-subs { margin-bottom: 0.5rem; } .gear-subs-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.3rem; } .gear-subs ol { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; } .gear-subs li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; } .gear-sub-rank { width: 16px; height: 16px; min-width: 16px; border-radius: 4px; font-size: 0.62rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); } .gear-set { font-size: 0.78rem; font-weight: 700; color: #F0C04E; background: rgba(240,192,78,0.08); border: 1px solid rgba(240,192,78,0.35); border-radius: 6px; padding: 0.35rem 0.5rem; margin-bottom: 0.5rem; } .gear-notes { font-size: 0.8rem; color: var(--muted); margin: 0; } .gear-notes strong { color: var(--text); } .build-dedeq .dedeq-name { display: inline-block; font-weight: 700; color: var(--text); margin-bottom: 0.35rem; } .build-dedeq ul { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; } .build-dedeq li { font-size: 0.8rem; color: var(--muted); } .build-usage { display: flex; flex-direction: column; gap: 0.6rem; } .usage-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.3rem; } .usage-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; } .usage-chip { font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); color: var(--text); } .build-blurb { font-size: 0.84rem; color: var(--muted); margin: 0; line-height: 1.55; } @media (max-width: 900px) { .build-grid-top, .build-grid-bottom { grid-template-columns: 1fr; } } /* ============================================================ NEW MODULES: updates timeline, skill kits, pets, gear, rings ============================================================ */ /* --- shared section header with a trailing link --- */ .sec-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .sec-head-row .sec-head { margin-bottom: 0; } .sec-head-link { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--accent); text-decoration: none; white-space: nowrap; } .sec-head-link:hover { text-decoration: underline; } /* --- update chips / tags (shared by hub + timeline) --- */ .upd-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; } .upd-chip { font-size: 0.74rem; padding: 0.2rem 0.5rem; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); } .upd-chip-unit { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); font-weight: 600; } .upd-chip-costume { color: var(--muted); } /* --- unit chips with a face on them --- A unit name in an update file is a string, and a string is the one thing a reader has to stop and decode. The portrait is deliberately small: an update row is a headline, and full-size art would turn this block back into the half-screen wall the collapsed peek rows were built to replace. */ .upd-chips-art { gap: 0.35rem; } .upd-chip-art { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.55rem 0.2rem 0.22rem; text-decoration: none; transition: border-color 0.16s ease, transform 0.16s ease; } a.upd-chip-art:hover, a.upd-chip-art:focus-visible { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; } /* Portraits are framed art, not faces on a transparent background, so the crop is top-anchored: center/cover on a full-body portrait shows a torso. */ .upd-chip-ph { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 5px; background: var(--panel) center 12% / cover no-repeat; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .upd-chip-ph-tx { font-family: var(--font-display); font-weight: 800; font-size: 0.7rem; color: var(--muted); } .upd-chip-ph.has-img .upd-chip-ph-tx { display: none; } .upd-chip-nm { line-height: 1.1; } /* --- the game icon on an update row --- Same asset as the topbar chips, so "which game is this" is answered by the same picture in both places instead of by reading the subtitle. */ .upd-gic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; background: var(--panel-2) center/cover no-repeat; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .upd-gic-ph { font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; color: var(--muted); } .upd-gic.has-img .upd-gic-ph { display: none; } /* --- update filters --- Buttons rather than