/* * RotoBaller — College Fantasy Football "Who Should I Draft?" * * Same visual system as the CFB rankings board (cfb-rankings.css) and the NFL rankings card tool: * Outfit body type, Anton display headings, RotoBaller blue, pill controls, position-coloured * badges, and a left-pinned label column beside a horizontally scrolling comparison grid. * * THREE THEME OVERRIDES THIS FILE HAS TO WIN, all learned the hard way on the rankings tool: * 1. SWIFT ships `.entry-content h2 { font-family: … !important }`, which is more specific than a * class rule and beats it even with !important. Brand-font rules are therefore ID-scoped * (#rb-cfbd) so they win on specificity, not on !important alone. * 2. The theme force-sets `font-size: 19px` on everything inside `.entry-content`, which blows the * tool up on mobile. Every type size here is #rb-cfbd-scoped and !important. * 3. `overflow-x: hidden` on makes the body the scroll container. Nothing here is sticky or * fixed, deliberately — the comparison is short enough not to need a pinned header, which keeps * this tool clear of that whole class of bug. */ #rb-cfbd { display: none; } /* revealed by the JS once it has mounted */ .rb-cfbd-wrap { --rb-navy: #1b2a4a; --rb-blue: #006DC8; --rb-blue-dk: #005099; --rb-accent: #1668c7; --rb-line: #e6eaf1; --rb-ink: #1a2027; --rb-mute: #6b7280; --rb-win: #e8f3ff; font-family: 'Outfit', -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--rb-ink); -webkit-text-size-adjust: 100%; margin: 0 0 24px; } .rb-cfbd-wrap * { box-sizing: border-box; } .rb-cfbd-wrap, .rb-cfbd-wrap input, .rb-cfbd-wrap button, .rb-cfbd-wrap div, .rb-cfbd-wrap span, .rb-cfbd-wrap p { font-family: 'Outfit', -apple-system, "Helvetica Neue", Arial, sans-serif; } /* ---------- outer card + blue title bar ---------- * The NFL tool wraps the whole widget in a bordered white card and opens with a solid RotoBaller-blue * band carrying the heading and the scoring radios. Matching that is most of what makes the two tools * read as the same product on a phone. */ .rb-cfbd-box { border: 1px solid #ccc; background: #fff; } .rb-cfbd-bar { background: var(--rb-blue); color: #fff; padding: 12px 14px 13px; } #rb-cfbd .rb-cfbd-title, #rb-cfbd .rb-cfbd-vname, #rb-cfbd .rb-cfbd-cardnm { font-family: 'Anton', 'Outfit', sans-serif !important; font-weight: 400 !important; } #rb-cfbd .rb-cfbd-title { font-size: 25px !important; line-height: 1.15 !important; letter-spacing: .3px; color: #fff; margin: 0 0 9px !important; } /* Scoring: buttons drawn as radios, matching .div_pmode. The disc is a ::before-free span so the * label text stays selectable and the hit area covers both. */ .rb-cfbd-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; } #rb-cfbd .rb-cfbd-mode { appearance: none; background: none; border: 0; cursor: pointer; padding: 2px 0; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 16px !important; line-height: 1.2 !important; font-weight: 500; } .rb-cfbd-radio { width: 19px; height: 19px; border-radius: 50%; background: #fff; flex: 0 0 19px; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } #rb-cfbd .rb-cfbd-mode.on .rb-cfbd-radio::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--rb-blue); } #rb-cfbd .rb-cfbd-prompt { font-size: 16px !important; line-height: 1.45 !important; font-weight: 700; color: var(--rb-ink); margin: 20px 0 18px !important; text-align: center; padding: 0 6px; } #rb-cfbd .rb-cfbd-note { font-size: 12px !important; color: var(--rb-mute); margin: 12px 0 0 !important; line-height: 1.5 !important; padding: 0 10px 10px; } /* ---------- loading / empty ---------- */ .rb-cfbd-loading { height: 4px; background: #eef2f7; border-radius: 3px; overflow: hidden; margin: 30px 0; } .rb-cfbd-loading span { display: block; height: 100%; width: 40%; background: var(--rb-blue); animation: rbcfbdbar 1.1s ease-in-out infinite; } @keyframes rbcfbdbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } } #rb-cfbd .rb-cfbd-empty { padding: 22px 10px; text-align: center; color: var(--rb-mute); font-size: 14px !important; } /* Everything below the blue bar is inset from the card edge. Full-bleed sections (the tab strips, * the ranked lists and the comparison) opt out with a negative margin where they need the edge. */ .rb-cfbd-picker, .rb-cfbd-compare { padding: 0 13px 18px; } /* ---------- search boxes ---------- */ /* The NFL tool's two columns are ~41% of the width each with a ~12% gutter down the middle — * its .draft_search_box is a half-width box holding a narrower input. Reproduced here as an explicit * column gap rather than box padding, so the dropdown can still span its input exactly. */ /* Spacing below is ID-scoped and !important because the theme zeroes margins on divs inside * .entry-content — the plain class rules were being dropped, which is why the Player 3/4 row sat * flush against the tiles under it and the Player 3/4 captions collided with the buttons. */ .rb-cfbd-searches, .rb-cfbd-editbar { display: flex; flex-wrap: wrap; gap: 16px 42px; } #rb-cfbd .rb-cfbd-searches { margin: 0 0 30px !important; } /* The compare view has no prompt line between the blue bar and its inputs, so the top margin has to * come from the row itself or the boxes sit flush against the bar. */ #rb-cfbd .rb-cfbd-editbar { margin: 26px 0 26px !important; } .rb-cfbd-searches .rb-cfbd-sbox, .rb-cfbd-editbar .rb-cfbd-sbox { flex: 1 1 160px; position: relative; } #rb-cfbd .rb-cfbd-input { width: 100%; border: 1px solid #cfd8e3; border-radius: 6px; padding: 12px 13px; font-size: 14px !important; line-height: 1.25 !important; background: #fff; color: var(--rb-ink); } #rb-cfbd .rb-cfbd-input:focus { outline: 0; border-color: var(--rb-blue); box-shadow: 0 0 0 2px rgba(0, 109, 200, .14); } .rb-cfbd-slist { display: none; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 3px); background: #fff; border: 1px solid var(--rb-line); border-radius: 8px; box-shadow: 0 10px 26px rgba(16, 24, 40, .16); max-height: 320px; overflow-y: auto; } .rb-cfbd-slist.open { display: block; } #rb-cfbd .rb-cfbd-sitem { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #f1f4f8; cursor: pointer; padding: 7px 10px; font-size: 13px !important; } #rb-cfbd .rb-cfbd-sitem:hover { background: #f5f9ff; } .rb-cfbd-sitem img, .rb-cfbd-nologo { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; } #rb-cfbd .rb-cfbd-sname { display: block; font-weight: 600; font-size: 13.5px !important; line-height: 1.2 !important; } #rb-cfbd .rb-cfbd-steam { display: block; color: var(--rb-mute); font-size: 11.5px !important; line-height: 1.3 !important; } /* ---------- player cards ---------- * The caption ("Player 1") lives in .rb-cfbd-slotwrap BELOW the bordered card, as the NFL tool has * it — inside the card it read as a field of the player rather than as a slot number. */ .rb-cfbd-cards { display: flex; gap: 26px 42px; } #rb-cfbd .rb-cfbd-cards { margin: 0 0 10px !important; } .rb-cfbd-cards > .rb-cfbd-slotwrap { flex: 1 1 0; min-width: 0; padding-bottom: 6px; } .rb-cfbd-card { position: relative; background: #fff; border: 1px solid #ccc; border-radius: 0; overflow: hidden; text-align: center; } /* An empty slot still gets the blue cap: on the NFL tool the four blue-topped placeholders are what * tell you at a glance that this is a four-way comparison waiting to be filled. */ .rb-cfbd-card.empty { background: #fff; } .rb-cfbd-card.empty .rb-cfbd-cardtop { background: var(--rb-blue); } .rb-cfbd-cardtop { background: var(--rb-navy); min-height: 64px; display: flex; align-items: center; justify-content: center; padding: 8px; } #rb-cfbd .rb-cfbd-cardnm { color: #fff; font-size: 18px !important; line-height: 1.2 !important; letter-spacing: .2px; overflow-wrap: anywhere; } /* A flex column so the logo disc can be centred with align-self instead of `margin: 0 auto`. * The theme zeroes margin-left on divs inside .entry-content, which on a phone was collapsing the * auto margins AND the negative top margin — the disc rendered hard left and sitting entirely below * the blue band instead of centred and straddling it. align-self doesn't go through margins at all, * so it can't be undone the same way. */ .rb-cfbd-cardbody { padding: 0 8px 12px; min-height: 120px; display: flex; flex-direction: column; } .rb-cfbd-logo { /* Half the card wide and pulled up so roughly its top fifth sits in the blue band — the NFL card's proportions. Sized as a PERCENTAGE so it holds those proportions at every card width (picker tile, comparison column, desktop), with a cap so it can't balloon on a wide desktop card. aspect-ratio keeps it a circle without a hardcoded height. */ width: 58%; max-width: 100px; aspect-ratio: 1 / 1; align-self: center; border-radius: 50%; background: #fff; border: 3px solid #e4e6e9; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; overflow: hidden; } /* !important because the theme's div margin reset would otherwise drop the overlap and drop the * disc below the band. */ #rb-cfbd .rb-cfbd-logo { margin: -16px 0 8px !important; } .rb-cfbd-logo img { width: 58%; height: 58%; object-fit: contain; } #rb-cfbd .rb-cfbd-meta { font-size: 12.5px !important; line-height: 1.5 !important; color: #33415c; } #rb-cfbd .rb-cfbd-mini { font-size: 11.5px !important; color: var(--rb-mute); } #rb-cfbd .rb-cfbd-mini b { color: var(--rb-ink); font-weight: 600; } #rb-cfbd .rb-cfbd-slot { font-size: 14px !important; line-height: 1.3 !important; font-weight: 700; color: var(--rb-ink); padding: 7px 0 0; text-align: center; } #rb-cfbd .rb-cfbd-x { position: absolute; top: 3px; right: 4px; z-index: 3; background: rgba(255, 255, 255, .22); border: 0; color: #fff; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; line-height: 1 !important; font-size: 15px !important; padding: 0; } #rb-cfbd .rb-cfbd-x:hover { background: rgba(255, 255, 255, .42); } /* position badges — same palette as the rankings board */ .rb-cfbd-badge { display: inline-block; border-radius: 4px; padding: 1px 6px; font-weight: 700; font-size: 11px !important; letter-spacing: .3px; background: #eef2f7; color: #33415c; } .rb-cfbd-badge.qb { background: #efe9fc; color: #5a3bbf; } .rb-cfbd-badge.rb { background: #d9f1f4; color: #0e7490; } .rb-cfbd-badge.wr { background: #e6f1fb; color: #185fa5; } .rb-cfbd-badge.te { background: #fdefdb; color: #9a5b09; } .rb-cfbd-badge.dst { background: #e7f0e9; color: #2f6b46; } .rb-cfbd-badge.team { background: #f0eee9; color: #6b5a3e; } /* ---------- buttons ---------- */ .rb-cfbd-buttons { display: flex; gap: 12px; justify-content: center; } #rb-cfbd .rb-cfbd-buttons { margin: 26px 0 30px !important; } #rb-cfbd .rb-cfbd-btn { appearance: none; cursor: pointer; border: 1px solid var(--rb-blue); background: var(--rb-blue); color: #fff; border-radius: 6px; padding: 10px 20px; font-size: 14px !important; font-weight: 600; line-height: 1.1 !important; } #rb-cfbd .rb-cfbd-btn:hover { background: var(--rb-blue-dk); border-color: var(--rb-blue-dk); } #rb-cfbd .rb-cfbd-btn[disabled] { opacity: .45; cursor: not-allowed; } #rb-cfbd .rb-cfbd-ghost { background: #f5f7fa; color: var(--rb-blue); border-color: #e2e8f0; } #rb-cfbd .rb-cfbd-ghost:hover { background: #e9eef5; border-color: #d6dfea; } /* ---------- tabs ---------- */ .rb-cfbd-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--rb-line); margin: 0 0 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Scrollable but without the grey bar painting under the tabs — a visible scrollbar on a tab strip reads as a broken layout rather than as an affordance. */ scrollbar-width: none; -ms-overflow-style: none; } .rb-cfbd-tabs::-webkit-scrollbar { display: none; } #rb-cfbd .rb-cfbd-tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; padding: 10px 13px; color: var(--rb-ink); white-space: nowrap; font-size: 15px !important; font-weight: 700; line-height: 1.2 !important; } #rb-cfbd .rb-cfbd-tab:hover { color: var(--rb-blue); } #rb-cfbd .rb-cfbd-tab.sel { color: var(--rb-blue); border-bottom-color: var(--rb-blue); } .rb-cfbd-dtabs { margin-top: 26px; } /* ---------- top-ranked / popular blocks ---------- */ /* Section blocks run to the card edge (the -10px cancels .rb-cfbd-picker's inset) so their rules and * row separators reach the border, the way the NFL tool's sections do. */ .rb-cfbd-block { border-top: 1px solid #ccc; padding: 20px 13px 4px; } #rb-cfbd .rb-cfbd-blocksub { text-align: center; color: var(--rb-mute); font-size: 12.5px !important; line-height: 1.4 !important; margin: -6px 0 12px !important; } .rb-cfbd-more { display: flex; justify-content: center; padding: 4px 0 12px; } #rb-cfbd .rb-cfbd-pairmore span { font-weight: 400; color: var(--rb-mute); } /* Negative side margins bleed the section rule to the card edge; ID-scoped for the same reason as * the rest of the vertical spacing (the theme drops plain margins on divs in .entry-content). */ #rb-cfbd .rb-cfbd-block { margin: 26px -13px 0 !important; } #rb-cfbd .rb-cfbd-blocktitle { font-size: 17px !important; font-weight: 700; line-height: 1.3 !important; color: var(--rb-ink); text-align: center; margin-bottom: 14px; } .rb-cfbd-cols { display: flex; gap: 10px; } .rb-cfbd-col { flex: 1 1 0; min-width: 0; width: 100%; } /* A ranked row: number, then a blue player link, then the team hard right — the NFL tool's * .player_item. The name is allowed to WRAP rather than ellipsis-truncate: college programs have * long names and "Ohio St…" / "Notre D…" is not a list you can pick from. */ #rb-cfbd .rb-cfbd-pitem { display: flex; align-items: baseline; gap: 4px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #eee; cursor: pointer; padding: 14px 6px; font-size: 15px !important; line-height: 1.35 !important; } #rb-cfbd .rb-cfbd-pitem:hover { background: #f5f9ff; } #rb-cfbd .rb-cfbd-pitem.on { background: #e8f3ff; box-shadow: inset 3px 0 0 var(--rb-blue); } #rb-cfbd .rb-cfbd-pnum { color: var(--rb-mute); flex: 0 0 34px; font-size: 14px !important; } /* The team mark sits between the rank and the name. align-self keeps it optically centred on the * row without a margin (the theme's div-margin reset would drop one), and the fixed basis means a * team with no logo still leaves the lane so names stay aligned down the column. */ .rb-cfbd-pilogo { flex: 0 0 26px; width: 26px; height: 26px; align-self: center; display: inline-flex; align-items: center; justify-content: center; } .rb-cfbd-pilogo img { width: 100%; height: 100%; object-fit: contain; } #rb-cfbd .rb-cfbd-pname { font-weight: 600; color: var(--rb-blue); overflow-wrap: anywhere; } #rb-cfbd .rb-cfbd-pteam { color: var(--rb-mute); font-size: 13px !important; margin-left: auto; white-space: nowrap; padding-left: 8px; } /* A suggested/popular matchup, shaped like the NFL tool's pair tile: a grey "vs" disc on the left, * then the two players stacked and separated by a rule, each name-left / team-right. */ #rb-cfbd .rb-cfbd-pair { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; background: #fff; border: 1px solid #e3e7ee; border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; font-size: 15px !important; } #rb-cfbd .rb-cfbd-pair:hover { border-color: #b9d4ee; background: #f7fbff; } #rb-cfbd .rb-cfbd-vs { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #eceff3; display: inline-flex; align-items: center; justify-content: center; color: #8b94a3; font-size: 13px !important; font-weight: 700; text-transform: uppercase; } .rb-cfbd-pairbody { flex: 1 1 auto; min-width: 0; } .rb-cfbd-pairside { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eceff3; } .rb-cfbd-pairside:last-child { border-bottom: 0; } .rb-cfbd-pairside .rb-cfbd-pname { color: var(--rb-blue); font-weight: 600; overflow-wrap: anywhere; } .rb-cfbd-pairside .rb-cfbd-pteam { margin-left: auto; white-space: nowrap; } /* ---------- verdict ---------- */ .rb-cfbd-verdict { background: linear-gradient(180deg, #f7fbff 0%, #fff 100%); border: 1px solid var(--rb-line); border-left: 5px solid var(--rb-blue); border-radius: 8px; padding: 16px 18px 18px; } #rb-cfbd .rb-cfbd-verdict { margin: 10px 0 8px !important; } #rb-cfbd .rb-cfbd-vlabel { font-size: 11px !important; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rb-blue); font-weight: 700; margin-bottom: 2px; } #rb-cfbd .rb-cfbd-vname { font-size: 25px !important; line-height: 1.1 !important; color: var(--rb-navy); } #rb-cfbd .rb-cfbd-vline { font-size: 13.5px !important; line-height: 1.55 !important; color: #33415c; margin-top: 7px !important; } #rb-cfbd .rb-cfbd-caveat { font-size: 12.5px !important; line-height: 1.5 !important; color: #8a5a12; background: #fff8ec; border-radius: 5px; padding: 6px 9px; margin-top: 7px; } /* ---------- comparison grid ---------- * A CSS grid rather than a table so the label column can be pinned while the player columns scroll * sideways on a phone: four columns of numbers do not fit a 375px screen, and squeezing them makes * the whole comparison unreadable. The wrapper is the scroll container so the page body never * scrolls horizontally. */ .rb-cfbd-gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rb-line); border-radius: 8px; } .rb-cfbd-grid { display: grid; min-width: max-content; background: #fff; } #rb-cfbd .rb-cfbd-lbl { position: sticky; left: 0; z-index: 2; background: #f7f9fc; border-right: 1px solid var(--rb-line); border-bottom: 1px solid #f1f4f8; padding: 8px 10px; font-size: 12px !important; line-height: 1.3 !important; font-weight: 600; color: #4a5567; display: flex; align-items: center; } #rb-cfbd .rb-cfbd-cell { border-bottom: 1px solid #f1f4f8; padding: 8px 10px; text-align: center; font-size: 13.5px !important; line-height: 1.3 !important; display: flex; align-items: center; justify-content: center; } #rb-cfbd .rb-cfbd-cell.wincol { background: #fbfdff; } #rb-cfbd .rb-cfbd-cell.best { font-weight: 700; color: var(--rb-blue-dk); background: var(--rb-win); } #rb-cfbd .rb-cfbd-group { background: #eef2f7; color: var(--rb-navy); text-transform: uppercase; letter-spacing: .7px; font-size: 10.5px !important; font-weight: 700; padding: 5px 10px; } .rb-cfbd-corner { background: #f7f9fc !important; border-bottom: 1px solid var(--rb-line) !important; } .rb-cfbd-hcell { border-bottom: 1px solid var(--rb-line); border-left: 1px solid #f1f4f8; padding: 0 6px 8px; } .rb-cfbd-hcell .rb-cfbd-card { border: 0; } .rb-cfbd-hcell.win { background: #fbfdff; } #rb-cfbd .rb-cfbd-pick { text-align: center; background: var(--rb-blue); color: #fff; font-weight: 700; font-size: 12px !important; line-height: 1.1 !important; letter-spacing: .9px; text-transform: uppercase; padding: 7px 0; margin: 0 -6px 8px; } #rb-cfbd .rb-cfbd-pick.ghost { background: transparent; } /* ---------- comparison, mobile ---------- * Below 600px the JS renders a different shape (narrowCompare): one self-contained column per * player, each pinned to half the viewport, scrolling sideways as a row — the NFL tool's layout. * A shared label column doesn't survive a phone; see the comment on narrowCompare() for why. */ .rb-cfbd-mrow { margin: 18px -13px 0; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #fff; } .rb-cfbd-mcol { flex: 0 0 50%; min-width: 50%; max-width: 50%; border-right: 1px solid var(--rb-line); } .rb-cfbd-mcol:last-child { border-right: 0; } .rb-cfbd-mcol.win { background: #fbfdff; } .rb-cfbd-mcol .rb-cfbd-card { border: 0; border-radius: 0; } /* ID-scoped to beat `#rb-cfbd .rb-cfbd-pick`, whose negative side margins bleed the desktop ribbon * to its cell edges. A plain two-class selector loses to that ID and the ribbon stayed 12px wider * than its column, which was enough to make a two-player comparison scroll sideways for no reason. */ #rb-cfbd .rb-cfbd-mcol .rb-cfbd-pick { margin: 0 0 4px; } #rb-cfbd .rb-cfbd-mgroup { background: #eef2f7; color: var(--rb-navy); text-transform: uppercase; letter-spacing: .7px; font-size: 10.5px !important; font-weight: 700; padding: 7px 8px; line-height: 1.3 !important; } .rb-cfbd-mitem { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 12px 10px; border-bottom: 1px solid #f1f4f8; } #rb-cfbd .rb-cfbd-mlbl { color: #4a5567; font-size: 11.5px !important; line-height: 1.3 !important; font-weight: 600; } #rb-cfbd .rb-cfbd-mval { font-size: 13px !important; line-height: 1.3 !important; text-align: right; white-space: nowrap; } .rb-cfbd-mitem.best { background: var(--rb-win); } #rb-cfbd .rb-cfbd-mitem.best .rb-cfbd-mval { font-weight: 700; color: var(--rb-blue-dk); } /* ---------- narrow screens ---------- */ @media (max-width: 600px) { #rb-cfbd .rb-cfbd-title { font-size: 23px !important; } #rb-cfbd .rb-cfbd-vname { font-size: 21px !important; } /* Three columns of ten names each is a grid of unreadable truncations on a phone, so the top-ranked / popular lists collapse to one column that simply runs 1-30. Plain block stacking rather than a column flexbox. As a flex column the .rb-cfbd-col children depend on cross-axis stretch for their width, and on some mobile browsers they were coming out shrink-to-fit at ~60% — which left the team label sitting next to the player's name instead of hard right, and made the matchup tiles far narrower than the screen. Block removes the dependency: a block child of a block parent is full width, everywhere. */ .rb-cfbd-cols { display: block; } .rb-cfbd-col { width: 100%; } /* Two search boxes per row keeps all four reachable without a tall stack pushing the button below the fold. */ .rb-cfbd-searches .rb-cfbd-sbox, .rb-cfbd-editbar .rb-cfbd-sbox { flex: 1 1 calc(50% - 21px); } .rb-cfbd-cards { flex-wrap: wrap; } .rb-cfbd-cards > .rb-cfbd-slotwrap { flex: 1 1 calc(50% - 21px); } #rb-cfbd .rb-cfbd-cardnm { font-size: 16px !important; } /* Inside a 50%-wide comparison column the card has to give up its desktop proportions — but not its air. Everything here was tuned tight enough that the verdict, the tabs, the pick ribbon and the card ran together as one busy block on a phone. */ #rb-cfbd .rb-cfbd-mcol .rb-cfbd-logo { max-width: 66px; margin: -18px 0 10px !important; } .rb-cfbd-mcol .rb-cfbd-cardbody { padding: 0 6px 12px; min-height: 0; } .rb-cfbd-mcol .rb-cfbd-cardtop { min-height: 54px; padding: 10px 8px; } #rb-cfbd .rb-cfbd-mcol .rb-cfbd-meta { font-size: 12px !important; line-height: 1.6 !important; } #rb-cfbd .rb-cfbd-mcol .rb-cfbd-mini { font-size: 11px !important; } #rb-cfbd .rb-cfbd-verdict { padding: 18px 18px 20px; margin: 14px 0 4px !important; } #rb-cfbd .rb-cfbd-vline { margin-top: 9px !important; } .rb-cfbd-dtabs { margin-top: 24px; } #rb-cfbd .rb-cfbd-dtabs .rb-cfbd-tab { padding: 11px 9px; font-size: 12.5px !important; } #rb-cfbd .rb-cfbd-mgroup { padding: 9px 9px; } .rb-cfbd-mitem { padding: 13px 10px; } /* Tab strips scroll sideways instead of wrapping — the NFL tool's behaviour. Wrapping left "Team Offense" orphaned on a second row under the position tabs, which read as a stray link. */ .rb-cfbd-tabs { flex-wrap: nowrap; } #rb-cfbd .rb-cfbd-tab { padding: 8px 10px; } }