@charset "utf-8"; /* ========================================================================== NFL Office Pool - modern design layer -------------------------------------------------------------------------- Loaded LAST, on top of bootstrap.css (grid + primitives) and font-awesome. The old Porto theme sheets (theme.css / theme-elements.css / theme-animate / theme-responsive / skins/blue.css / custom.css) are no longer linked; everything the app renders is styled here. ========================================================================== */ /* --------------------------------------------------------------- 1. Tokens */ :root { --navy: #12326b; --navy-700: #0d2450; --navy-900: #071630; --blue: #1b57b8; --blue-050: #eaf1fd; --red: #d50a0a; --red-050: #fdecec; --green: #0f7a4f; --green-050: #e7f6ef; --amber: #b45309; --amber-050: #fdf3e5; --ink: #0f1b2d; --ink-2: #33445c; --muted: #6b7a90; --line: #e2e8f1; --line-2: #eef2f7; --surface: #ffffff; --surface-2: #f7f9fc; --bg: #eff3f8; --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(16,32,60,.05), 0 1px 3px rgba(16,32,60,.07); --sh-2: 0 2px 4px rgba(16,32,60,.05), 0 8px 20px rgba(16,32,60,.07); --sh-3: 0 20px 46px rgba(9,22,45,.20); --header-h: 66px; --tap: 44px; --ff: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ff-num: "Inter", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ----------------------------------------------------------------- 2. Base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* The closed mobile nav sits off-canvas to the right; without this the document scroll width grows and the whole page pans sideways. `clip` is preferred over `hidden` because it does not turn the root into a scroll container, which would disable the sticky header. */ overflow-x: hidden; overflow-x: clip; } body { font-family: var(--ff); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); margin: 0; /* beats bootstrap-responsive's phone gutter and the old sticky-menu inline padding */ padding: 0 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* No overflow-x here: it would make a scroll container and stop the sticky header from sticking. The root element does the clipping. */ } img { max-width: 100%; height: auto; border: 0; } a { color: var(--blue); text-decoration: none; transition: color .15s ease; } a:hover, a:focus { color: var(--navy); text-decoration: none; } hr, hr.tall { border: 0; border-top: 1px solid var(--line); margin: 32px 0; height: 0; } :focus-visible { outline: 3px solid rgba(27,87,184,.45); outline-offset: 2px; border-radius: 4px; } ::selection { background: rgba(27,87,184,.18); } /* Container: fluid and gutter-safe instead of Bootstrap 2's fixed 940px */ .container { width: 100% !important; max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* Bootstrap 2 gives .container a ::before/::after clearfix. We lay containers out with flex and grid, where those pseudo-elements would become real items - and silently shunt the hero's two columns out of order. Kill them. */ .container::before, .container::after { content: none; display: none; } /* Anchor targets clear the sticky header */ [id] { scroll-margin-top: calc(var(--header-h) + 16px); } /* Old theme leftovers we never want to see */ .selectnav { display: none !important; } /* ----------------------------------------------------------- 3. Typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--ff); color: var(--ink); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; margin: 0 0 .5em; text-transform: none; } h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem); } h2 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2rem); } h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); } h4 { font-size: 1.1rem; } h5 { font-size: 1rem; } h6 { font-size: .9rem; } h2 strong, h3 strong, h4 strong { font-weight: 800; color: var(--navy); } p { margin: 0 0 1rem; color: var(--ink-2); } p.lead, .lead { font-size: 1.06rem; color: var(--ink-2); } p.featured.lead { font-size: 1.1rem; } small, .small_text { font-size: .8125rem; } .muted, .text-muted { color: var(--muted) !important; } .black { color: var(--ink-2) !important; } .text-error { color: var(--red) !important; } .text-success { color: var(--green) !important; } strong.inverted { display: inline-block; background: var(--navy); color: #fff; padding: .05em .5em; border-radius: var(--r-sm); font-weight: 700; } .center { text-align: center; } .section-head { text-align: center; max-width: 720px; margin: 0 auto 28px; } .section-head h2 { margin-bottom: .35em; } .section-head p { margin-bottom: 0; } /* --------------------------------------------------------------- 4. Header */ /* No backdrop-filter here on purpose: a filtered element becomes the containing block for its position:fixed descendants, which would pin the mobile nav drawer to the header instead of the viewport. */ .site-header { position: sticky; top: 0; z-index: 1040; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(16,32,60,.05); } .site-header__bar { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 8px 0; } .brand img { height: 34px; width: auto; display: block; } .nav-toggle { margin-left: auto; /* The drawer is a child of the header's stacking context, so it paints over the header bar. Lift the toggle above it so it stays tappable (and reads as the close button) while the drawer is open. */ position: relative; z-index: 2; width: var(--tap); height: var(--tap); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; padding: 0; } .nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--navy); transition: transform .22s ease, opacity .18s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; } .site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; float: none; } .site-nav__list > li { float: none; margin: 0; line-height: normal; } .site-nav__list > li > a { display: block; padding: 9px 13px; border-radius: var(--r-pill); font-size: .9rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; background: transparent; text-shadow: none; } .site-nav__list > li > a:hover, .site-nav__list > li > a:focus { background: var(--blue-050); color: var(--navy); } .site-nav__list > li.is-current > a { background: var(--navy); color: #fff; } .site-nav__list > li > a.is-cta { background: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(213,10,10,.28); } .site-nav__list > li > a.is-cta:hover, .site-nav__list > li > a.is-cta:focus { background: #b70909; color: #fff; } .site-nav__meta { display: flex; align-items: center; gap: 12px; padding-left: 16px; border-left: 1px solid var(--line); font-size: .85rem; color: var(--muted); } .site-nav__meta a { color: var(--muted); font-weight: 600; } .site-nav__meta a:hover { color: var(--navy); } .site-nav__who { font-weight: 600; color: var(--ink-2); white-space: nowrap; } .nav-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(8,20,40,.5); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1030; } body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; } body.nav-open { overflow: hidden; } @media (max-width: 900px) { .nav-toggle { display: flex; } .site-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--surface); box-shadow: var(--sh-3); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: calc(var(--header-h) + 12px) 18px 28px; transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; z-index: 1; margin-left: 0; } body.nav-open .site-nav { transform: translateX(0); } .site-nav__list { flex-direction: column; align-items: stretch; gap: 4px; } .site-nav__list > li > a { padding: 13px 14px; border-radius: var(--r); font-size: 1rem; min-height: var(--tap); display: flex; align-items: center; } .site-nav__meta { order: -1; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 14px 16px; margin-bottom: 12px; border-left: 0; border-bottom: 1px solid var(--line); } } /* ---------------------------------------------------------- 5. Site notice */ .site-notice:empty { display: none; } .site-notice { background: var(--amber-050); border-bottom: 1px solid #f3e2c6; color: #7a4a08; font-size: .9rem; padding: 10px 0; } .site-notice p:last-child { margin-bottom: 0; } .site-notice p { color: inherit; } /* ----------------------------------------------------------------- 6. Hero */ .hero { position: relative; background: radial-gradient(1100px 460px at 78% -20%, rgba(27,87,184,.55), transparent 62%), radial-gradient(700px 380px at 8% 120%, rgba(213,10,10,.28), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%); color: #fff; overflow: hidden; } .hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 68px); pointer-events: none; } .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(40px, 6vw, 76px); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9fc0ff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: 6px 12px; border-radius: var(--r-pill); margin: 0 0 18px; } .hero__title { color: #fff; margin: 0 0 14px; font-weight: 800; letter-spacing: -.03em; } .hero__title em { font-style: normal; color: #ffd166; } .hero__sub { color: rgba(255,255,255,.78); font-size: 1.06rem; max-width: 48ch; margin-bottom: 26px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .winner-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-lg); padding: 24px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: center; } .winner-card__label { display: block; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #9fc0ff; margin-bottom: 10px; } .winner-card__trophy { font-size: 2rem; line-height: 1; display: block; margin-bottom: 8px; } .winner-card__name { display: block; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.15; word-break: break-word; } .winner-card__note { display: block; margin-top: 8px; font-size: .86rem; color: rgba(255,255,255,.66); } .winner-card.is-pending .winner-card__name { color: rgba(255,255,255,.72); font-size: 1.25rem; } @media (max-width: 820px) { .hero__inner { grid-template-columns: 1fr; gap: 28px; } .hero__actions .btn { flex: 1 1 190px; } } /* Page banner used on the inner pages */ .page-banner { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%); color: #fff; padding: clamp(26px, 4vw, 44px) 0; } .page-banner h1, .page-banner h2 { color: #fff; margin-bottom: 6px; } .page-banner .crumbs { list-style: none; margin: 0 0 10px; padding: 0; display: flex; gap: 8px; font-size: .85rem; } .page-banner .crumbs li { color: rgba(255,255,255,.6); } .page-banner .crumbs a { color: rgba(255,255,255,.85); font-weight: 600; } .page-banner .crumbs a:hover { color: #fff; } .page-banner p { color: rgba(255,255,255,.75); margin-bottom: 0; } /* -------------------------------------------------------------- 7. Layout */ .main, .content, .content.full { background: transparent; padding: 0; margin: 0; } .section { padding: clamp(34px, 5vw, 56px) 0; } .section--tint { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section--dark { background: linear-gradient(160deg, #10233f 0%, #071630 100%); color: #fff; } .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .section--dark h2 strong, .section--dark h3 strong { color: #ffd166; } .section--dark p { color: rgba(255,255,255,.7); } .section--dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; } .section--dark .card table.table, .section--dark .card table.small-table { background: transparent; color: rgba(255,255,255,.85); } .section--dark .card table th, .section--dark .card table td { border-color: rgba(255,255,255,.12); } .section--dark .card table thead th { background: rgba(255,255,255,.04); color: #9fc0ff; } .section--dark .card table tbody tr:nth-child(odd) > td, .section--dark .card table.table-striped tbody tr:nth-child(odd) > td { background: rgba(255,255,255,.05); } .section--dark .card table tbody tr:nth-child(even) > td, .section--dark .card table.table-striped tbody tr:nth-child(even) > td { background: transparent; } .section--dark .card table tbody tr:hover > td, .section--dark .card table.table-striped tbody tr:hover > td { background: rgba(255,255,255,.10); } .section--dark .card table td b, .section--dark .card table tfoot td, .section--dark .card table tfoot th { color: #fff; } .section--dark .card table tfoot td, .section--dark .card table tfoot th, .section--dark .card table tr[bgcolor] { background: rgba(255,255,255,.06) !important; } .section--dark .table-wrap { border-color: rgba(255,255,255,.12); background: transparent; } .section--dark .card a { color: #9fc0ff; } .section--dark .card a:hover { color: #fff; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: clamp(18px, 3vw, 26px); } .card + .card { margin-top: 20px; } .card__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .card__title h2, .card__title h3 { margin: 0; } .card > :last-child { margin-bottom: 0; } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: start; } /* ------------------------------------------------------- 8. Toolbar / bars */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 16px; margin-bottom: 22px; } .toolbar__field { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; } .toolbar__field label { margin: 0; font-weight: 600; font-size: .9rem; color: var(--ink-2); white-space: nowrap; } .toolbar__status { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; } .toolbar__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; } @media (max-width: 640px) { .toolbar__field, .toolbar__status { width: 100%; } .toolbar__actions { margin-left: 0; width: 100%; } .toolbar__actions .btn { flex: 1 1 auto; } .toolbar__field select { flex: 1 1 auto; } } /* -------------------------------------------------------------- 9. Buttons */ .btn, a.btn, button.btn, input[type="submit"].btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 10px 18px; font-family: var(--ff); font-size: .95rem; font-weight: 600; line-height: 1.2; color: var(--ink); text-align: center; text-shadow: none; vertical-align: middle; cursor: pointer; background: var(--surface); background-image: none; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .06s ease; -webkit-appearance: none; appearance: none; touch-action: manipulation; } .btn:hover, .btn:focus { background: var(--surface-2); color: var(--ink); box-shadow: var(--sh-2); } .btn:active { transform: translateY(1px); box-shadow: var(--sh-1); } .btn[disabled], .btn.disabled { opacity: .55; cursor: not-allowed; } .btn.btn-large, .btn-large { padding: 14px 26px; font-size: 1.02rem; min-height: 50px; border-radius: var(--r); } .btn.btn-small, .btn-small { padding: 6px 12px; font-size: .82rem; min-height: 34px; } .btn i { font-size: .95em; } /* Variants are written as .btn.btn-x so they out-specify the a.btn / button.btn base rule above; a plain .btn-primary would lose to it on elements. */ .btn.btn-primary, .btn.btn-info, .btn.btn-success, .btn.btn-danger, .btn.btn-warning { box-shadow: 0 2px 6px rgba(16,32,60,.16); color: #fff; } .btn.btn-primary { background: var(--navy); border-color: var(--navy); } .btn.btn-primary:hover, .btn.btn-primary:focus { background: var(--navy-700); border-color: var(--navy-700); color: #fff; } .btn.btn-info { background: var(--blue); border-color: var(--blue); } .btn.btn-info:hover, .btn.btn-info:focus { background: #17489a; border-color: #17489a; color: #fff; } .btn.btn-success { background: var(--green); border-color: var(--green); } .btn.btn-success:hover, .btn.btn-success:focus { background: #0c6642; border-color: #0c6642; color: #fff; } .btn.btn-danger { background: var(--red); border-color: var(--red); } .btn.btn-danger:hover, .btn.btn-danger:focus { background: #b70909; border-color: #b70909; color: #fff; } .btn.btn-warning { background: var(--amber); border-color: var(--amber); } .btn.btn-warning:hover, .btn.btn-warning:focus { background: #96450a; border-color: #96450a; color: #fff; } /* Hero buttons */ .btn.btn-hero { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 8px 22px rgba(213,10,10,.35); } .btn.btn-hero:hover, .btn.btn-hero:focus { background: #b70909; border-color: #b70909; color: #fff; } .btn.btn-ghost { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); color: #fff; box-shadow: none; } .btn.btn-ghost:hover, .btn.btn-ghost:focus { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.42); } /* ---------------------------------------------------------------- 10. Form */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], textarea, select, .uneditable-input { display: inline-block; width: 100%; max-width: 100%; min-height: var(--tap); height: auto; padding: 10px 12px; font-family: var(--ff); font-size: 16px; /* 16px stops iOS Safari zooming on focus */ line-height: 1.4; color: var(--ink); background: var(--surface); background-image: none; border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none; margin: 0; } textarea { min-height: 96px; resize: vertical; width: 100% !important; } select { padding-right: 38px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7a90' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px 7px; cursor: pointer; } input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27,87,184,.16); outline: 0; } input::placeholder, textarea::placeholder { color: #9aa8bb; } input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--blue); cursor: pointer; -webkit-appearance: auto; appearance: auto; box-shadow: none; border: 0; vertical-align: middle; flex: 0 0 auto; } label { display: block; font-weight: 600; font-size: .875rem; color: var(--ink-2); margin: 0 0 6px; } .field { margin-bottom: 14px; } .field:last-child { margin-bottom: 0; } .field-inline { display: flex; align-items: center; gap: 10px; } .field-inline label { margin: 0; font-weight: 500; } /* Inline "select a week" control */ .toolbar select, .week-select { width: auto; min-width: 150px; font-weight: 600; } /* Input + button group (footer password reminder) */ .input-append { display: flex; gap: 8px; width: 100%; } .input-append input, .input-append input.span2 { flex: 1 1 auto; width: auto; border-radius: var(--r); } .input-append .btn { flex: 0 0 auto; border-radius: var(--r); } /* -------------------------------------------------------- 11. Alerts/badge */ .alert { border-radius: var(--r); border: 1px solid #cbdcf8; padding: 13px 16px; margin-bottom: 18px; font-size: .93rem; text-shadow: none; background: var(--blue-050); color: #14356e; } .alert h4, .alert h5 { color: inherit; margin-bottom: 6px; } .alert p { color: inherit; } .alert-success { background: var(--green-050); border-color: #bfe4d1; color: #0a5c3b; } .alert-error, .alert-danger { background: var(--red-050); border-color: #f6cccc; color: #98150f; } .alert-info { background: var(--blue-050); border-color: #cbdcf8; color: #14356e; } .alert.hidden { display: none !important; } .alert:empty { display: none; } .label, .badge { display: inline-block; padding: .25em .6em; font-size: .78rem; font-weight: 700; line-height: 1.4; border-radius: var(--r-pill); text-shadow: none; background: var(--line-2); color: var(--ink-2); white-space: nowrap; vertical-align: baseline; } .label-success, .badge-success { background: var(--green-050); color: var(--green); } .label-important, .label-danger, .badge-important { background: var(--red-050); color: var(--red); } .label-info, .badge-info { background: var(--blue-050); color: var(--blue); } .label-warning, .badge-warning { background: var(--amber-050); color: var(--amber); } /* --------------------------------------------------------- 12. Game cards */ .daygroup { margin-bottom: 30px; } .daygroup:last-child { margin-bottom: 0; } .daygroup__title { display: flex; align-items: baseline; gap: 10px; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); padding-bottom: 10px; margin-bottom: 16px; border-bottom: 2px solid var(--line); } .daygroup__date { font-size: .85rem; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; } .gamegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; } .gamecard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .gamecard:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: #d3ddea; } .gamecard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: .8rem; font-weight: 700; color: var(--ink-2); } .gamecard__tv { font-weight: 600; color: var(--muted); font-style: normal; text-transform: uppercase; font-size: .72rem; } .gamecard__teams { padding: 6px 14px; flex: 1 1 auto; } .teamrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; } .teamrow + .teamrow { border-top: 1px dashed var(--line); } .teamrow__logo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 34px; } .teamrow__body { min-width: 0; flex: 1 1 auto; } .teamrow__name { display: block; font-weight: 600; font-size: .95rem; color: var(--ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .teamrow__rec { display: block; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; } .teamrow__score { flex: 0 0 auto; font-family: var(--ff-num); font-size: 1.15rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; } .teamrow.is-win .teamrow__name { color: var(--navy); font-weight: 800; } .teamrow.is-win .teamrow__score { color: var(--green); } .teamrow__win { color: var(--green); font-size: .85rem; flex: 0 0 auto; } .gamecard__foot { padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gamecard__foot a { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; } .gamecard__status { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .gamecard.is-final .gamecard__status { color: var(--green); } /* ------------------------------------------------------ 13. Pick list (UI) */ .picklist { list-style: none; margin: 0; padding: 0; } .picklist-help { display: flex; gap: 10px; align-items: flex-start; background: var(--blue-050); border: 1px solid #cbdcf8; border-radius: var(--r); padding: 12px 14px; font-size: .88rem; color: #14356e; margin-bottom: 16px; } .picklist-help i { margin-top: 3px; } .picklist-help p { margin: 0; color: inherit; } .pickhead { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; } .pickhead h3 { margin: 0; } .weekstate { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill); font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .weekstate::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .weekstate.is-open { background: var(--green-050); color: var(--green); } .weekstate.is-closed { background: var(--red-050); color: var(--red); } .tiebreak { display: flex; align-items: center; gap: 10px; margin-left: auto; } .tiebreak label { margin: 0; white-space: nowrap; } .tiebreak input { width: 92px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .tiebreak { margin-left: 0; width: 100%; } } .pick-item { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); padding: 10px 12px; margin: 0 0 10px; font-weight: 400; color: var(--ink); opacity: 1; filter: none; list-style: none; } .pick-item.is-unpicked { border-left: 4px solid var(--amber); background: #fffdf6; } .pick-item a { text-decoration: none; } .pick-handle { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: grab; cursor: -webkit-grab; touch-action: none; /* lets touch-punch drag without scrolling the page */ flex: 0 0 auto; } .pick-handle:active { cursor: grabbing; background: var(--line-2); } .pick-handle i { font-size: 1rem; } .pick-rank { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 54px; min-height: var(--tap); padding: 4px 10px; border: 1px solid var(--navy); background: var(--navy); color: #fff; border-radius: var(--r-sm); font-family: var(--ff-num); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer; box-shadow: var(--sh-1); } .pick-rank:hover, .pick-rank:focus { background: var(--navy-700); color: #fff; } .pick-rank small { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .72; margin-top: 3px; } .pick-teams { display: flex; align-items: center; gap: 8px; min-width: 0; } .pick-vs { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; } .teampick { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; margin: 0; padding: 8px 10px; min-height: var(--tap); border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; font-weight: 500; font-size: .92rem; color: var(--ink-2); transition: border-color .15s ease, background-color .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent; } .teampick:hover { border-color: #b9cbe6; background: var(--surface-2); } .teampick__logo { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; } .teampick__body { min-width: 0; } .teampick__name { display: block; font-size: .92rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .teampick__rec { display: block; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 500; } .teampick.is-selected { border-color: var(--green); background: var(--green-050); color: var(--green); font-weight: 700; } .teampick.is-selected .teampick__rec { color: #3d8a68; } .pick-when { flex: 0 0 auto; font-size: .78rem; color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Sortable feedback */ .ui-sortable-helper { border: 1px solid var(--blue); box-shadow: var(--sh-3); background: var(--surface); opacity: .96; filter: none; color: var(--ink); } .pick-placeholder { border: 2px dashed var(--blue); background: var(--blue-050); border-radius: var(--r); margin-bottom: 10px; list-style: none; } @media (max-width: 860px) { .pick-item { grid-template-columns: auto 1fr; grid-template-areas: "handle meta" "teams teams"; gap: 10px; padding: 12px; } .pick-handle { grid-area: handle; } .pick-meta { grid-area: meta; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pick-teams { grid-area: teams; flex-direction: column; align-items: stretch; gap: 8px; } .pick-vs { align-self: center; } .teampick { flex: 1 1 auto; padding: 10px 12px; min-height: 52px; } .teampick__name { font-size: 1rem; } .teampick__logo { width: 30px; height: 30px; flex-basis: 30px; } } @media (min-width: 861px) { /* .pick-meta only exists to group the rank + kickoff time on phones. On desktop it dissolves, and `order` puts the four cells back in the reading order the grid template expects: handle, rank, teams, time. */ .pick-meta { display: contents; } .pick-handle { order: 1; } .pick-rank { order: 2; } .pick-teams { order: 3; } .pick-when { order: 4; } } /* --------------------------------------------------------------- 14. Table */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } .table-wrap > table { margin-bottom: 0 !important; border: 0; } table.table, table.small-table { width: 100%; max-width: 100%; margin-bottom: 18px; border-collapse: collapse; background: var(--surface); font-size: .9rem; } table.table th, table.table td, table.small-table th, table.small-table td { padding: 11px 14px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line); border-left: 0; line-height: 1.4; font-size: .9rem; } table.table thead th, table.small-table thead th { border-top: 0; border-bottom: 2px solid var(--line); background: var(--surface-2); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; vertical-align: middle; } /* Zebra striping. The extra .table-striped in the selector is deliberate: it has to out-specify Bootstrap 2's own striping rule, which is otherwise stronger than ours and paints #f9f9f9 straight over the dark sections. */ table.table tbody tr:nth-child(odd) > td, table.small-table tbody tr:nth-child(odd) > td, table.table.table-striped tbody tr:nth-child(odd) > td, table.small-table.table-striped tbody tr:nth-child(odd) > td { background: var(--surface-2); } table.table tbody tr:nth-child(even) > td, table.small-table tbody tr:nth-child(even) > td, table.table.table-striped tbody tr:nth-child(even) > td, table.small-table.table-striped tbody tr:nth-child(even) > td { background: transparent; } table.table tbody tr:hover > td, table.small-table tbody tr:hover > td, table.table.table-striped tbody tr:hover > td, table.small-table.table-striped tbody tr:hover > td { background: var(--blue-050); } table.table tfoot td, table.table tfoot th, table.small-table tfoot td, table.small-table tfoot th { background: var(--surface-2) !important; font-weight: 800; border-top: 2px solid var(--line); color: var(--ink); } table.table tr[bgcolor], table.small-table tr[bgcolor] { background: var(--surface-2) !important; } table.table img, table.small-table img { vertical-align: middle; max-width: 30px; height: auto; } table.table td b, table.small-table td b { font-weight: 700; color: var(--ink); } /* ...but bold text sitting inside a coloured button must follow the button, not the cell, or the label goes dark-on-dark and disappears. */ .btn b, .btn strong, table.table td .btn b, table.table td .btn strong, table.small-table td .btn b, table.small-table td .btn strong { color: inherit; } table.table .btn, table.small-table .btn { min-height: 36px; padding: 6px 12px; font-size: .82rem; } table.table input[type="text"], table.small-table input[type="text"] { min-height: 38px; padding: 6px 8px; } table.table input.span1, table.small-table input.span1 { width: 58px !important; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } .numeric { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- 15. Modal */ .modal-backdrop, .modal-backdrop.fade.in { background: rgba(8,20,40,.55); opacity: 1; } .modal { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; width: min(760px, calc(100vw - 28px)) !important; max-height: calc(100vh - 40px); height: auto !important; margin: 0 !important; padding: 0 !important; transform: translate(-50%, -50%); background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1050; } .modal.fade { transition: opacity .2s linear; } .modal-inner { padding: clamp(18px, 3vw, 28px); } .modal h2, .modal h3, .modal h4 { margin-top: 0; } .modal-close { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer; opacity: 1; text-shadow: none; z-index: 3; padding: 0; } .modal-close:hover { background: var(--line-2); color: var(--ink); } .modal .footer { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; background: none; } .modal table { width: 100%; } .modal-inner > .table-wrap { margin-bottom: 4px; } @media (max-width: 640px) { .modal { top: auto !important; bottom: 0 !important; left: 0 !important; transform: none; width: 100% !important; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; } } /* Auth (login / register) modal */ .authgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 0; } .authpane { padding: clamp(20px, 3vw, 28px); } .authpane + .authpane { background: var(--surface-2); border-left: 1px solid var(--line); } .authpane h2 { font-size: 1.35rem; margin-bottom: 4px; } .authpane__hint { font-size: .86rem; color: var(--muted); margin-bottom: 18px; } .authpane__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; } .authpane__actions .btn { flex: 1 1 auto; } .authpane__link { font-size: .875rem; font-weight: 600; white-space: nowrap; } .auth-remember { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); font-size: .875rem; font-weight: 600; color: var(--ink-2); cursor: pointer; margin: 0; } .authpane + .authpane .auth-remember { background: var(--surface); } @media (max-width: 600px) { .authpane + .authpane { border-left: 0; border-top: 1px solid var(--line); } } /* Two-column form grid inside admin modals */ .formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; } .formgrid .field { margin-bottom: 0; } .formgrid .field--wide { grid-column: 1 / -1; } /* Tap-to-rank grid (the rank picker modal on My Picks) */ .rankgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; margin-top: 18px; } .rankchip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 8px 6px; border: 1px solid var(--navy); border-radius: var(--r); background: var(--navy); color: #fff; cursor: pointer; box-shadow: var(--sh-1); transition: background-color .14s ease, border-color .14s ease, transform .06s ease; -webkit-appearance: none; appearance: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .rankchip:hover, .rankchip:focus { background: var(--navy-700); border-color: var(--navy-700); color: #fff; } .rankchip:active { transform: translateY(1px); } .rankchip__num { font-family: var(--ff-num); font-size: 1.25rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: inherit; } .rankchip small { font-size: .58rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .75; color: inherit; } /* Taken ranks read as secondary but stay fully tappable - tapping one reassigns that rank to the game the modal was opened from. */ .rankchip.is-used { background: var(--surface); border-color: var(--line); color: var(--muted); box-shadow: none; } .rankchip.is-used .rankchip__num { color: var(--ink-2); } .rankchip.is-used:hover, .rankchip.is-used:focus { background: var(--amber-050); border-color: var(--amber); color: var(--amber); } .rankchip.is-used:hover .rankchip__num, .rankchip.is-used:focus .rankchip__num { color: var(--amber); } /* -------------------------------------------------------------- 16. Footer */ .site-footer { background: linear-gradient(160deg, #10233f 0%, #071630 100%); color: rgba(255,255,255,.72); padding: 0; margin: 0; border: 0; } .site-footer__ribbon { background: var(--red); color: #fff; text-align: center; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; padding: 10px 20px; } .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; padding: 42px 0; } .site-footer h4 { color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; } .site-footer p { color: rgba(255,255,255,.66); font-size: .9rem; } .site-footer a { color: rgba(255,255,255,.82); } .site-footer a:hover { color: #fff; } .site-footer ul.contact { list-style: none; margin: 0; padding: 0; } .site-footer ul.contact li { margin-bottom: 8px; font-size: .9rem; } .site-footer ul.contact p { margin: 0; } .site-footer ul.contact i { width: 18px; color: #7fa8f0; margin-right: 6px; } .site-footer .input-append input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; } .site-footer .input-append input::placeholder { color: rgba(255,255,255,.5); } .site-footer .input-append input:focus { border-color: #7fa8f0; box-shadow: 0 0 0 3px rgba(127,168,240,.2); } .site-footer .alert { font-size: .85rem; } .social-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; } .social-list a { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--r-pill); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 1rem; } .social-list a:hover { background: rgba(255,255,255,.18); } .site-footer__base { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-size: .82rem; } .site-footer__base p { margin: 0; } .site-footer__base nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; } /* -------------------------------------------------- 17. Back-to-top button */ .to-top { position: fixed; right: 18px; bottom: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-pill); background: var(--navy); color: #fff; box-shadow: var(--sh-2); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; z-index: 1020; } .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { background: var(--navy-700); color: #fff; } /* ----------------------------------------------------------- 18. Utilities */ .stack > * + * { margin-top: 14px; } .hidden { display: none !important; } .nowrap { white-space: nowrap; } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } /* Legacy Bootstrap-2 grid classes still appear in a few server-rendered strings; stop them re-introducing fixed pixel widths on small screens. */ @media (max-width: 767px) { [class*="span"], .row-fluid [class*="span"] { width: 100% !important; margin-left: 0 !important; float: none !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---------------------------------------------------------------- 19. Print */ .print-sheet { background: #fff; padding: 24px; max-width: 1000px; margin: 0 auto; } .print-sheet__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 3px solid var(--navy); padding-bottom: 14px; margin-bottom: 20px; } .print-sheet__head img { height: 40px; width: auto; } .print-sheet__head h2 { margin: 0; font-size: 1.15rem; } .print-actions { margin-bottom: 18px; } @media print { body { background: #fff; font-size: 12px; } .site-header, .site-footer, .to-top, .hero, .print-actions, .nav-backdrop { display: none !important; } .print-sheet { padding: 0; max-width: none; } .table-wrap { border: 0; overflow: visible; } table.table th, table.table td, table.small-table th, table.small-table td { padding: 5px 7px; font-size: 11px; } }