/* * RotoBaller — College Fantasy Football Rankings card/table layer. * Same visual system as the NFL rankings tool (rankings-mobile-cards.css): Outfit type, Anton * display headings, a left-pinned rank/player column with a horizontally scrolling stat grid, * sticky controls + header, tier separators and position-coloured badges. Base styles apply at * every width; the min-width:601px block adds desktop roominess. */ #rb-cfb { display: none; } .rb-cfb-wrap { --rb-navy: #1b2a4a; --rb-blue: #006DC8; /* RotoBaller blue — the column-header bar */ --rb-blue-dk: #005099; /* darker shade for the hero column + active sort on the blue bar */ --rb-accent: #006DC8; /* RotoBaller blue — tier rules */ --rb-sort: #1e7fd6; /* sort caret (matches the NFL rankings tool) */ --rb-line: #e6eaf1; --rb-ink: #1a2027; --rb-mute: #6b7280; font-family: 'Outfit', -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--rb-ink); -webkit-text-size-adjust: 100%; margin: 0 0 22px; } .rb-cfb-wrap * { box-sizing: border-box; } /* Force the brand fonts through the theme's own element styles — some theme rules put a serif on * table/heading-like elements, which is why the column headers rendered in Times on mobile. * Outfit is the body/UI face; Anton is the display face for titles only (brand type system). */ .rb-cfb-wrap, .rb-cfb-wrap input, .rb-cfb-wrap select, .rb-cfb-wrap button, .rb-cfb-c, .rb-cfb-rk, .rb-cfb-nm, .rb-cfb-tier, .rb-cfb-foot, .rb-cfb-card, .rb-cfb-card * { font-family: 'Outfit', -apple-system, "Helvetica Neue", Arial, sans-serif; } /* ---------- header ---------- */ .rb-cfb-hd { padding: 0 0 12px; } /* ID-scoped so it beats the theme's own `.entry-content h2 { … !important }`: a class selector * loses to that even with !important (it's more specific), which silently kept the title in Outfit * on the live site while the standalone harness — with no theme wrapper — rendered Anton fine. */ #rb-cfb .rb-cfb-title, #rb-cfb-ov .rb-cfb-cardnm { font-family: 'Anton', 'Outfit', sans-serif !important; font-weight: 400 !important; } #rb-cfb .rb-cfb-title { font-size: 26px !important; line-height: 1.1 !important; letter-spacing: .3px; color: var(--rb-navy); margin: 0 0 6px; } .rb-cfb-sub { font-size: 13.5px; line-height: 1.45; color: var(--rb-mute); margin: 0; } /* ---------- controls ---------- * The filter bar pins to the top of the viewport while scrolling. It's pinned by JS toggling * .rb-cfb-pinned (position:fixed), NOT position:sticky — the theme's `overflow-x:hidden` on * makes the body the scroll container, which breaks sticky for descendants. fixed is viewport-relative * here (no transformed ancestor) so it holds. The sentinel/spacer keep the page from jumping. */ .rb-cfb-controls { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 2px 9px; margin: 0; background: #fff; } /* Nuclear: while the tool's toolbar is pinned at the top, hide the theme's OWN sticky bars — its * fixed "Search For Player Names" search form (#searchform, z 99999) and the breaking-news promo — * which were colliding with and painting over the tool's pinned toolbar/header on desktop and * mobile. They're only hidden during the pinned state (body.rb-cfb-pinned-mode), so they return * intact the instant you scroll back to the top. */ body.rb-cfb-pinned-mode #searchform { display: none !important; } /* Pinned below the site nav (JS sets top = navBottom), full viewport width with side padding so the * controls still line up with the centred content column — the same shape the NFL rankings tool uses. */ .rb-cfb-controls.rb-cfb-pinned { position: fixed; top: 0; left: 0; right: 0; width: auto; z-index: 2000000006; background: #fff; box-shadow: 0 3px 8px rgba(16, 24, 40, .12); } .rb-cfb-sentinel { height: 0; margin: 0; } .rb-cfb-cspacer { height: 0; } /* Pill controls, matching the production rankings tool (.rb-mc-sel): solid-blue bubbles with white * text and a white chevron on one row; search is a white field with a blue outline. */ .rb-cfb-sel { flex: 0 0 auto; height: 34px; width: 128px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: clip; cursor: pointer; padding: 0 24px 0 13px; border: none; border-radius: 20px; background-color: var(--rb-sort); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.7' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .rb-cfb-search { flex: 0 1 190px; min-width: 96px; height: 34px; font: inherit; font-size: 13px; color: var(--rb-ink); padding: 0 13px; background: #fff; border: 1px solid var(--rb-sort); border-radius: 20px; -webkit-appearance: none; appearance: none; } .rb-cfb-sel:focus, .rb-cfb-search:focus { outline: none; box-shadow: 0 0 0 3px rgba(30, 127, 214, .25); } /* download-CSV icon button (matches the pill height, blue outline) */ .rb-cfb-dl { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--rb-sort); border-radius: 50%; background: #fff; color: var(--rb-sort); cursor: pointer; transition: background .12s ease; } .rb-cfb-dl:hover { background: #eef4fb; } .rb-cfb-dl:active { background: #e3eefb; } /* thin determinate blue loading bar under the controls — a quick fill on every selection change */ .rb-cfb-loadbar { position: relative; height: 3px; overflow: hidden; background: transparent; } .rb-cfb-loadbar i { display: none; position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--rb-accent); } .rb-cfb-loadbar.on i { display: block; animation: rb-cfb-loadfill .45s ease-out forwards; } @keyframes rb-cfb-loadfill { 0% { width: 0; } 80% { width: 92%; } 100% { width: 100%; } } /* team logo in the Team column + detail card. The cell clips so a wide logo/abbr can never bleed * into the Conference column on a narrow phone. */ .rb-cfb-cteam { overflow: hidden; } .rb-cfb-team { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; } .rb-cfb-team b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .rb-cfb-logo { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; } .rb-cfb-cardlogo { float: left; width: 40px; height: 40px; object-fit: contain; margin: 2px 12px 6px 0; } /* ---------- table ---------- * Full-bleed and unframed: horizontal scroll only, no border, no rounded box, no capped height. * The page scrolls vertically as one document (matching the RotoBaller rankings page) and the * filter controls above pin via position:sticky; the column header is pinned by JS (mountFixedHead) * because a CSS-sticky header can't stick to the window from inside a horizontal-scroll container. */ .rb-cfb-scroll { position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .rb-cfb-row { display: flex; align-items: stretch; min-width: max-content; } .rb-cfb-pin { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: 8px; width: 178px; min-width: 178px; padding: 0 8px 0 4px; background: #fff; box-shadow: 6px 0 6px -6px rgba(16, 24, 40, .18); } .rb-cfb-rk { width: 38px; min-width: 38px; text-align: center; line-height: 1.05; } .rb-cfb-rk b { display: block; font-size: 15px; font-weight: 700; color: var(--rb-navy); } .rb-cfb-rk span { display: block; font-size: 9.5px; font-weight: 600; color: var(--rb-mute); } .rb-cfb-nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; } .rb-cfb-nm .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rb-cfb-xfer { flex: 0 0 auto; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .3px; padding: 1px 4px; border-radius: 3px; background: #fdecc8; color: #8a5a00; } .rb-cfb-grid { display: flex; align-items: stretch; } .rb-cfb-c { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-size: 13px; font-variant-numeric: tabular-nums; } .rb-cfb-c.hero { font-weight: 700; color: var(--rb-sort); background: #f4f8fd; } /* header row — white, matching the production rankings tool (light-grey labels, blue accents only) */ .rb-cfb-head { position: relative; z-index: 6; background: #fff; border-top: 1px solid #e6e9ed; border-bottom: 1px solid #d8dce1; } .rb-cfb-head .rb-cfb-pin { z-index: 7; background: #fff; box-shadow: 6px 0 6px -6px rgba(16, 24, 40, .14); } #rb-cfb .rb-cfb-head .rb-cfb-rk, #rb-cfb .rb-cfb-head .rb-cfb-nm { font-size: 11px !important; line-height: 1.15 !important; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #4b5563; } .rb-cfb-head .rb-cfb-rk { display: flex; align-items: center; justify-content: center; gap: 2px; } .rb-cfb-head .rb-cfb-nm { gap: 3px; } #rb-cfb .rb-cfb-head .rb-cfb-c { min-height: 44px; font-size: 10.5px !important; line-height: 1.1 !important; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #6b7280; text-align: center; white-space: normal; gap: 2px; } #rb-cfb .rb-cfb-head .rb-cfb-c.hero { color: var(--rb-sort) !important; background: #f4f8fd; } /* JS-pinned clone of the header, fixed just under the sticky filter bar while scrolling. It's a * horizontal scroll container (overflow hidden, scrollLeft set in JS) so the cloned RK/Player column * stays sticky-pinned exactly like the real table's, with no overlap. */ .rb-cfb-fixedhead { position: fixed; z-index: 2000000005; display: none; overflow: hidden; box-shadow: 0 3px 6px rgba(16, 24, 40, .16); } .rb-cfb-fixedhead .rb-cfb-head { position: static; } /* sortable headers */ .rb-cfb-sortable { cursor: pointer; user-select: none; -webkit-user-select: none; } .rb-cfb-head .rb-cfb-sortable:hover { background: #f1f4f8; } #rb-cfb .rb-cfb-head .rb-cfb-c.sorted { background: #eef4fb; color: var(--rb-sort) !important; } #rb-cfb .rb-cfb-head .rb-cfb-c.hero.sorted { background: #e3eefb; color: var(--rb-sort) !important; } #rb-cfb .rb-cfb-head .rb-cfb-rk.sorted, #rb-cfb .rb-cfb-head .rb-cfb-nm.sorted { color: var(--rb-sort) !important; } .rb-cfb-ar { font-size: 8px; line-height: 1; opacity: .45; font-style: normal; color: #9aa0a8; } .rb-cfb-ar.on { opacity: 1; color: var(--rb-sort); } .rb-cfb-hl { display: inline; } /* ---------- typography lock ---------- * The SWIFT theme forces font-size (19px on mobile) onto everything inside the post content, which * beats plain class selectors and blew the whole tool up. Re-declaring every text size under the * #rb-cfb id with !important (ID specificity + !important) makes the tool's own scale win. These are * the DESKTOP sizes; the mobile query at the bottom overrides them the same way. */ #rb-cfb .rb-cfb-body .rb-cfb-nm { font-size: 14px !important; line-height: 1.2 !important; } #rb-cfb .rb-cfb-body .rb-cfb-grid .rb-cfb-c { font-size: 13px !important; line-height: 1.2 !important; } #rb-cfb .rb-cfb-rk b { font-size: 15px !important; line-height: 1.05 !important; } #rb-cfb .rb-cfb-rk span { font-size: 9.5px !important; line-height: 1.05 !important; } #rb-cfb .rb-cfb-pos { font-size: 10.5px !important; line-height: 1 !important; } #rb-cfb .rb-cfb-gr { font-size: 11px !important; line-height: 22px !important; } #rb-cfb .rb-cfb-xfer { font-size: 9px !important; line-height: 1.2 !important; } #rb-cfb .rb-cfb-tier span { font-size: 13px !important; line-height: 1.1 !important; } #rb-cfb .rb-cfb-foot { font-size: 12px !important; line-height: 1.5 !important; } #rb-cfb .rb-cfb-sub { font-size: 13.5px !important; line-height: 1.45 !important; } #rb-cfb .rb-cfb-sel, #rb-cfb .rb-cfb-search { font-size: 13px !important; line-height: 34px !important; } #rb-cfb .rb-cfb-more button { font-size: 14px !important; } /* body rows */ .rb-cfb-body { min-height: 46px; border-bottom: 1px solid var(--rb-line); cursor: pointer; } .rb-cfb-body:nth-child(even) { background: #fafbfd; } .rb-cfb-body:nth-child(even) .rb-cfb-pin { background: #fafbfd; } .rb-cfb-body:hover { background: #eef4ff; } .rb-cfb-body:hover .rb-cfb-pin { background: #eef4ff; } /* tier separators * The band runs the FULL width of the table, not just the visible viewport. That needs the rows * wrapper to size to its widest child (min-width:max-content) so a width:100% band inside it spans * every column rather than stopping at the container edge — otherwise the band ends mid-table and * the tier looks like it only applies to the frozen columns. The label itself stays pinned to the * left so it's still readable after scrolling right. */ .rb-cfb-rows { min-width: max-content; } /* Tier separator, styled to match the RotoBaller rankings tool: the "TIER n" label in brand blue * with a brand-blue rule running the full width of the table. The rule spans every column (not just * the viewport) because .rb-cfb-rows sizes to its widest child; the label stays pinned left so it's * readable after scrolling the grid right. */ .rb-cfb-tier { display: flex; align-items: flex-end; width: 100%; min-height: 34px; padding: 14px 0 0; background: #fff; border-bottom: 2px solid var(--rb-accent); } .rb-cfb-tier span { position: sticky; left: 0; z-index: 2; display: inline-block; margin-left: 2px; padding: 0 2px 5px; background: transparent; color: var(--rb-accent); font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } /* position + grade badges — soft pastel pills with a coloured label, matching the production * rankings tool (.rb-mc-pos): a filled saturated badge read as heavier/louder than production's. */ .rb-cfb-pos { display: inline-block; min-width: 30px; padding: 2px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-align: center; background: #eef1f4; color: #444; } .rb-cfb-pos.qb { background: #efe9fc; color: #5a3bbf; } .rb-cfb-pos.rb { background: #d9f1f4; color: #0e7490; } .rb-cfb-pos.wr { background: #e6f1fb; color: #185fa5; } .rb-cfb-pos.te { background: #fdefdb; color: #9a5b09; } .rb-cfb-pos.dst { background: #eceff2; color: #3f4a57; } .rb-cfb-pos.team { background: #f6e8f4; color: #9d2c7a; } .rb-cfb-gr { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; text-align: center; } .rb-cfb-gr.ga { background: #1a7f37; } .rb-cfb-gr.gb { background: #4f9c3a; } .rb-cfb-gr.gc { background: #c48a12; } .rb-cfb-gr.gd { background: #d1691f; } .rb-cfb-gr.gf { background: #b21f2d; } .rb-cfb-msg { padding: 26px 10px; text-align: center; font-size: 14px; color: var(--rb-mute); } .rb-cfb-more { display: flex; justify-content: center; margin: 14px 0 2px; } .rb-cfb-more button { font: inherit; font-size: 14px; font-weight: 600; color: var(--rb-navy); padding: 11px 26px; border: 1px solid #cfd8e6; border-radius: 999px; background: #fff; cursor: pointer; transition: background .15s, border-color .15s; } .rb-cfb-more button:hover:not(:disabled) { background: #eef4ff; border-color: var(--rb-blue); } .rb-cfb-more button:disabled { opacity: .6; cursor: default; } .rb-cfb-foot { margin: 10px 2px 0; font-size: 12px; line-height: 1.5; color: var(--rb-mute); } /* ---------- detail card ---------- */ body.rb-cfb-lock { overflow: hidden; } .rb-cfb-ov { position: fixed; inset: 0; z-index: 1000003; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .55); font-family: 'Outfit', -apple-system, "Helvetica Neue", Arial, sans-serif; } .rb-cfb-ov.open { display: flex; } .rb-cfb-card { position: relative; --rb-tc: #2f5fa8; width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto; background: #fff; border-radius: 14px; color: #1a2027; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); } .rb-cfb-card.qb { --rb-tc: #5a3bbf; } .rb-cfb-card.rb { --rb-tc: #0e7490; } .rb-cfb-card.wr { --rb-tc: #185fa5; } .rb-cfb-card.te { --rb-tc: #9a5b09; } .rb-cfb-card.dst { --rb-tc: #3f4a57; } .rb-cfb-card.team { --rb-tc: #9d2c7a; } .rb-cfb-cardtrim { height: 18px; background: var(--rb-tc); border-radius: 14px 14px 0 0; } .rb-cfb-x { position: absolute; top: 26px; right: 10px; z-index: 2; width: 27px; height: 27px; border: none; border-radius: 50%; background: rgba(15, 23, 42, .40); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; } .rb-cfb-cardhd { padding: 13px 18px 4px; overflow: hidden; } /* BFC so the floated logo is contained */ .rb-cfb-cardnm { font-family: 'Anton', 'Outfit', sans-serif; font-weight: 400; font-size: 25px; line-height: 1.05; letter-spacing: .4px; padding-right: 30px; } .rb-cfb-cardsub { font-size: 13.5px; color: #6b7280; margin-top: 4px; } .rb-cfb-cardxfer { display: inline-block; margin-top: 7px; padding: 2px 7px; border-radius: 4px; background: #fdecc8; color: #8a5a00; font-size: 11.5px; font-weight: 600; } .rb-cfb-cardkey { display: flex; justify-content: space-around; gap: 8px; margin: 10px 16px 0; padding: 11px 0 4px; border-top: 1px solid #eef1f4; } .rb-cfb-cardkey > div { text-align: center; } .rb-cfb-cardkey span { display: block; font-size: 10px; font-weight: 600; letter-spacing: .3px; color: #9aa0a8; white-space: nowrap; } .rb-cfb-cardkey b { display: block; margin-top: 5px; font-size: 19px; font-weight: 600; } .rb-cfb-cardkey > div:nth-child(3) b { color: var(--rb-tc); } .rb-cfb-cardrole { padding: 10px 18px 0; font-size: 13.5px; color: #3a4651; } .rb-cfb-cardgrp { padding: 12px 18px 0; } .rb-cfb-cardgrp h4 { margin: 0 0 7px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #9aa0a8; } .rb-cfb-cardstats { display: flex; gap: 6px; } .rb-cfb-cardstats > div { flex: 1; text-align: center; padding: 7px 2px; background: #f5f7fa; border-radius: 7px; } .rb-cfb-cardstats span { display: block; font-size: 9.5px; font-weight: 600; color: #9aa0a8; } .rb-cfb-cardstats b { display: block; margin-top: 3px; font-size: 15px; font-weight: 700; } .rb-cfb-cardconf { display: flex; align-items: flex-start; gap: 10px; margin: 14px 16px 16px; padding: 11px 12px; background: #f5f7fa; border-radius: 9px; font-size: 12.5px; line-height: 1.45; color: #3a4651; } .rb-cfb-cardconf b { flex: 0 0 auto; } /* ---------- mobile tightening ---------- * The phone view was rendering everything at the theme's forced 19px, so the whole tool was * oversized and header labels overflowed. Everything below is #rb-cfb-scoped + !important so it * actually wins, and dialled down to a compact phone scale: smaller type, shorter rows, a narrower * pinned column and smaller badges. */ @media (max-width: 600px) { #rb-cfb .rb-cfb-title { font-size: 20px !important; } #rb-cfb .rb-cfb-sub { font-size: 12px !important; } .rb-cfb-pin { width: 126px; min-width: 126px; padding: 0 6px 0 3px; gap: 5px; } #rb-cfb .rb-cfb-body .rb-cfb-nm { font-size: 12px !important; line-height: 1.15 !important; } .rb-cfb-body { min-height: 40px; } .rb-cfb-rk { width: 30px; min-width: 30px; } #rb-cfb .rb-cfb-rk b { font-size: 13px !important; } #rb-cfb .rb-cfb-rk span { font-size: 8.5px !important; } #rb-cfb .rb-cfb-body .rb-cfb-grid .rb-cfb-c { font-size: 11px !important; } .rb-cfb-c { padding: 0 3px; } #rb-cfb .rb-cfb-head .rb-cfb-c { min-height: 44px; font-size: 8.5px !important; letter-spacing: .2px; padding: 4px 3px; } #rb-cfb .rb-cfb-head .rb-cfb-rk, #rb-cfb .rb-cfb-head .rb-cfb-nm { font-size: 9px !important; } #rb-cfb .rb-cfb-pos { font-size: 9.5px !important; padding: 2px 4px; min-width: 26px; } #rb-cfb .rb-cfb-gr { font-size: 10px !important; width: 19px; height: 19px; line-height: 19px !important; } .rb-cfb-ar { font-size: 7px; } #rb-cfb .rb-cfb-tier span { font-size: 12px !important; } #rb-cfb .rb-cfb-foot { font-size: 11px !important; } /* compact pills so all three + search + download stay on one row (production keeps it to one line) */ .rb-cfb-controls { flex-wrap: nowrap; gap: 4px; } .rb-cfb-sel { width: 72px; padding: 0 18px 0 8px; background-position: right 6px center; } #rb-cfb .rb-cfb-sel, #rb-cfb .rb-cfb-search { font-size: 11.5px !important; } .rb-cfb-search { flex: 1 1 auto; min-width: 0; padding: 0 10px; } .rb-cfb-dl { width: 32px; height: 32px; } .rb-cfb-logo { width: 15px; height: 15px; } } /* ---------- desktop ---------- */ @media (min-width: 601px) { #rb-cfb .rb-cfb-title { font-size: 32px !important; } .rb-cfb-sel { width: 138px; } #rb-cfb .rb-cfb-sel, #rb-cfb .rb-cfb-search { font-size: 14px !important; } .rb-cfb-pin { width: 236px; min-width: 236px; padding-left: 8px; } .rb-cfb-rk { width: 44px; min-width: 44px; } #rb-cfb .rb-cfb-body .rb-cfb-nm { font-size: 15px !important; } .rb-cfb-body { min-height: 50px; } #rb-cfb .rb-cfb-body .rb-cfb-grid .rb-cfb-c { font-size: 13.5px !important; } }