/* ========================================================================== FPL GAME ON V12 — Liquid Glass theme Minimalist "clean app" look: translucent frosted glass over a soft gradient wallpaper, system font (SF on Apple), gold accent used sparingly. Full light / dark / system theming via tokens (see theming block). ========================================================================== */ /* ---------- THEME TOKENS ---------- */ :root { color-scheme: light; /* neutrals (cool-warm balanced, not pure grey) */ --ink:#191922; --ink-soft:#54545f; --ink-faint:#5f5f6d; --line:rgba(20,20,45,.10); --line-strong:rgba(20,20,45,.16); /* Premier League palette */ --pl-purple:#37003c; --pl-pink:#e90052; --pill-bg:#37003c; --pl-green:#00ff87; --pl-cyan:#04f5ff; /* accent + semantics */ --accent:#d0004f; --accent-2:#6b1f7a; --on-accent:#ffffff; --accent-wash:rgba(208,0,79,.13); --accent-lift:#d61f64; --accent-tint:rgba(208,0,79,.10); --gold-wash:rgba(169,121,26,.14); --pink-wash:rgba(233,0,82,.12); --gold:#a9791a; /* the coloured bar (same in both themes) */ --bar-bg:linear-gradient(120deg, #37003c 0%, #4a0050 55%, #6a0a5c 100%); --bar-ink:#ffffff; --bar-soft:rgba(255,255,255,.72); --bar-line:rgba(255,255,255,.18); --bar-fill:rgba(255,255,255,.14); --head-ink:#37003c; --good:#0f9d58; --good-wash:rgba(15,157,88,.12); --bad:#d1483a; --bad-wash:rgba(209,72,58,.12); --cyan:#0e8fb0; /* chart series: validated for lightness, chroma, CVD separation and contrast against this mode's surface — see the dataviz validator */ --chart-a:#d0004f; --chart-b:#0e8fb0; --card-bg:#f7f5fb; /* glass */ --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.4); --glass-bar:rgba(255,255,255,.62); --glass-border:rgba(255,255,255,.7); /* A sticky table header needs to hide the rows sliding under it. The blur on .freeze already owns the backdrop, so a nested backdrop-filter has nothing left to work on and the rows read straight through — this carries the opacity itself instead. */ --head-solid:#fbf8fc; --sheet-bg:#fbf8fc; --prog-up:#9fe6c4; --prog-up-ink:#0d5136; --prog-down:#ffc0b0; --prog-down-ink:#7a2413; --prog-go:#25c274; --prog-go-ink:#05301e; --prog-drop:#ff725e; --prog-drop-ink:#3d0d05; --rate-up:#0a7a41; --rate-down:#b53326; --due-soon:#d0004f; --dash:#5f5f6d; --glass-hi:rgba(255,255,255,.9); --glass-shadow:0 10px 34px -12px rgba(30,30,70,.22); --field:rgba(255,255,255,.6); --chip:rgba(20,20,45,.05); /* wallpaper */ --wall: radial-gradient(760px 460px at 6% -4%, #f6d8ff, transparent 60%), radial-gradient(900px 560px at 102% 2%, #ffd7e6, transparent 55%), radial-gradient(680px 520px at 50% 108%, #d2f8ff, transparent 60%), linear-gradient(180deg, #f8f5fc, #edeaf5); --radius:22px; --radius-s:15px; --radius-xs:11px; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink:#f3f2f8; --ink-soft:#c1c0cc; --ink-faint:#8a8996; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18); --pl-purple:#37003c; --pl-pink:#e90052; --pill-bg:#5b1668; --pl-green:#00ff87; --pl-cyan:#04f5ff; --accent:#ff2882; --accent-2:#c98bff; --on-accent:#2a0014; --accent-wash:rgba(255,40,130,.15); --accent-lift:#ff4291; --accent-tint:rgba(255,40,130,.12); --gold-wash:rgba(246,196,69,.16); --pink-wash:rgba(233,0,82,.18); --gold:#f6c445; --head-ink:#f2d9ff; --good:#4ade80; --good-wash:rgba(74,222,128,.14); --bad:#f87171; --bad-wash:rgba(248,113,113,.14); --cyan:#38bdf8; --chart-a:#ff2882; --chart-b:#2b9ed6; --card-bg:#20202c; --glass:rgba(38,38,52,.46); --glass-2:rgba(30,30,44,.4); --glass-bar:rgba(24,24,36,.55); --glass-border:rgba(255,255,255,.14); --head-solid:#171724; --sheet-bg:#171724; --prog-up:#1d6347; --prog-up-ink:#b7f4d8; --prog-down:#7a2f22; --prog-down-ink:#ffd0c4; --prog-go:#25c274; --prog-go-ink:#042416; --prog-drop:#ff725e; --prog-drop-ink:#2b0a04; --rate-up:#25c274; --rate-down:#ff725e; --due-soon:#ff4fa3; --dash:#9a98a6; --glass-hi:rgba(255,255,255,.10); --glass-shadow:0 14px 40px -12px rgba(0,0,0,.6); --field:rgba(255,255,255,.06); --chip:rgba(255,255,255,.07); --wall: radial-gradient(820px 500px at 8% -6%, #45095180, transparent 60%), radial-gradient(940px 600px at 104% 0%, #12313f80, transparent 55%), radial-gradient(700px 540px at 50% 112%, #3a0a3d80, transparent 60%), linear-gradient(180deg, #16011c, #0b0010); } } :root[data-theme="dark"] { color-scheme: dark; --ink:#f3f2f8; --ink-soft:#c1c0cc; --ink-faint:#8a8996; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18); --pl-purple:#37003c; --pl-pink:#e90052; --pill-bg:#5b1668; --pl-green:#00ff87; --pl-cyan:#04f5ff; --accent:#ff2882; --accent-2:#c98bff; --on-accent:#2a0014; --accent-wash:rgba(255,40,130,.15); --accent-lift:#ff4291; --accent-tint:rgba(255,40,130,.12); --gold-wash:rgba(246,196,69,.16); --pink-wash:rgba(233,0,82,.18); --gold:#f6c445; --head-ink:#f2d9ff; --good:#4ade80; --good-wash:rgba(74,222,128,.14); --bad:#f87171; --bad-wash:rgba(248,113,113,.14); --cyan:#38bdf8; --chart-a:#ff2882; --chart-b:#2b9ed6; --card-bg:#20202c; --glass:rgba(38,38,52,.46); --glass-2:rgba(30,30,44,.4); --glass-bar:rgba(24,24,36,.55); --glass-border:rgba(255,255,255,.14); --head-solid:#171724; --sheet-bg:#171724; --prog-up:#1d6347; --prog-up-ink:#b7f4d8; --prog-down:#7a2f22; --prog-down-ink:#ffd0c4; --prog-go:#25c274; --prog-go-ink:#042416; --prog-drop:#ff725e; --prog-drop-ink:#2b0a04; --rate-up:#25c274; --rate-down:#ff725e; --due-soon:#ff4fa3; --dash:#9a98a6; --glass-hi:rgba(255,255,255,.10); --glass-shadow:0 14px 40px -12px rgba(0,0,0,.6); --field:rgba(255,255,255,.06); --chip:rgba(255,255,255,.07); --wall: radial-gradient(820px 500px at 8% -6%, #45095180, transparent 60%), radial-gradient(940px 600px at 104% 0%, #12313f80, transparent 55%), radial-gradient(700px 540px at 50% 112%, #3a0a3d80, transparent 60%), linear-gradient(180deg, #16011c, #0b0010); } /* ---------- base ---------- */ * { box-sizing:border-box; } html,body { margin:0; padding:0; } /* iOS Safari inflates text on its own judgement unless told not to, which made the same tables set larger there than on Android. */ html { -webkit-text-size-adjust:100%; text-size-adjust:100%; } body { font-family:var(--sans); color:var(--ink); background-color:#edeaf5; min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; padding-bottom:calc(96px + env(safe-area-inset-bottom)); } /* The wallpaper must hang on the viewport, not the page: its gradients are sized for one screen. background-attachment:fixed did that everywhere but iOS Safari, which has never supported it — there the gradients anchored to the full document height and mid-scroll looked washed flat. A fixed layer behind everything paints identically on every engine. */ body::before { content:""; position:fixed; top:0; right:0; bottom:0; left:0; z-index:-1; background:var(--wall); pointer-events:none; } /* The dark ground colour must follow the dark theme only. Unguarded, the :not([data-theme="light"]) half also matched the default "system" setting on a light OS, leaving a near-black body behind the fixed wallpaper — which showed through on iOS overscroll. */ :root[data-theme="dark"] body { background-color:#0b0010; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background-color:#0b0010; } } h1,h2,h3,h4 { margin:0; letter-spacing:-.01em; text-wrap:balance; } a { color:var(--accent); text-decoration:none; } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; } /* ---------- top bar ---------- */ .topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px; padding:calc(10px + env(safe-area-inset-top)) 16px 10px; background:var(--bar-bg); color:var(--bar-ink); border-bottom:2px solid transparent; border-image:linear-gradient(90deg, var(--pl-pink), var(--pl-cyan), var(--pl-green)) 1; box-shadow:0 6px 22px -12px rgba(55,0,60,.85); } .topbar .bartitle { color:var(--bar-ink); } .topbar .barsub { color:var(--bar-soft); } .bartitle { font-size:19px; font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.1; } @media (max-width:380px){ .bartitle { font-size:17px; } } .topbar .spacer { flex:1; } .profilebtn { border:1px solid var(--bar-line); background:var(--bar-fill); color:var(--bar-ink); cursor:pointer; /* flex:none, or a crowded bar shrinks these below a thumb's reach — the title beside them has min-width:0 and is the right thing to give up */ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; padding:0; } .profilebtn svg { width:20px; height:20px; } .profilebtn:hover { border-color:var(--pl-green); color:var(--pl-green); } /* Header controls are small circles by design, but a 26-38px circle is a poor target for a thumb — Apple asks for 44pt, Android for 48dp. Each one keeps its size and grows an invisible hit area out to 44px. The 12px bar gap keeps the enlarged areas clear of each other. */ .profilebtn, .infobtn, .backbtn { position:relative; } .profilebtn::after, .infobtn::after, .backbtn::after { content:""; position:absolute; } .profilebtn::after { top:-3px; right:-3px; bottom:-3px; left:-3px; } .backbtn::after { top:-6px; right:-6px; bottom:-6px; left:-6px; } .infobtn::after { top:-9px; right:-9px; bottom:-9px; left:-9px; } /* ---------- bottom nav ---------- */ .navbar { position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; justify-content:space-around; align-items:stretch; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:var(--glass-bar); -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); border-top:1px solid var(--line); box-shadow:0 -10px 26px -18px rgba(0,0,0,.5); } .navitem { flex:1; max-width:120px; border:0; background:transparent; color:var(--ink-faint); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 6px; border-radius:14px; font-size:10.5px; font-weight:600; letter-spacing:.2px; transition:color .18s, background .18s; } .navitem svg { width:23px; height:23px; } .navitem .tile { width:29px; height:29px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.28)); transition:transform .16s ease; } .navitem:hover { color:var(--ink-soft); } .navitem.active { color:var(--accent); } .navitem.active::after { content:""; position:absolute; bottom:2px; width:16px; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--pl-pink), var(--pl-cyan)); } .navitem { position:relative; } .navitem.active .tile { transform:translateY(-1px) scale(1.08); filter:drop-shadow(0 3px 6px rgba(0,0,0,.34)); } @media (prefers-reduced-motion: reduce){ .navitem .tile { transition:none; } } @media (max-width:420px){ .navitem span { font-size:10px; } .navitem .tile { width:27px; height:27px; } } /* frozen-header scroll container (Classic / Monthly full tables) */ .freeze { /* Reaching the bottom of the table must not then start dragging the page — the header and the row of controls above it are meant to stay put. */ overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; max-height:calc(100vh - 250px); max-height:calc(100dvh - 250px); background:var(--glass); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi); } .freeze table.t { width:100%; } .freeze table.t thead th { position:sticky; top:0; z-index:3; /* .freeze already owns the backdrop, so a nested backdrop-filter here has nothing left to work on and the rows slide legibly under the headings. The header carries the opacity itself instead. */ background:var(--head-solid); } .freeze table.t th:first-child, .freeze table.t td:first-child { padding-left:16px; } .freeze table.t th:last-child, .freeze table.t td:last-child { padding-right:16px; } /* ---------- layout ---------- */ .wrap { max-width:1000px; margin:0 auto; padding:18px 16px 24px; } .view { display:none; } .view.active { display:block; animation:fade .28s ease; } @keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} } @media (prefers-reduced-motion: reduce){ .view.active{ animation:none; } } .section-title { display:flex; align-items:center; gap:10px; margin:24px 2px 12px; } .section-title:first-child { margin-top:6px; } .section-title h2 { font-size:18px; font-weight:800; color:var(--head-ink); letter-spacing:-.02em; } .section-title .rule { flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--pl-pink), var(--pl-cyan) 70%, transparent); opacity:.55; } .section-title .chip { font-size:11px; color:var(--ink-soft); background:var(--chip); padding:3px 10px; border-radius:999px; } .infobtn { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; padding:0; border:1px solid var(--bar-line); background:var(--bar-fill); color:var(--bar-soft); cursor:pointer; } .infobtn svg { width:17px; height:17px; } .infobtn:hover { color:var(--pl-green); border-color:var(--pl-green); } /* per-GW disclosure ("dropdown for each GW") */ .out-name { color:var(--bad); font-weight:700; } tr.gone td { background:var(--bad-wash); } /* ---------- cards ---------- */ .card { background:var(--glass); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi); overflow:hidden; } .card + .card { margin-top:14px; } .card .hd { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); } .card .hd h3 { font-size:15px; font-weight:600; } .card .hd .sub { font-size:12px; color:var(--ink-faint); margin-left:auto; text-align:right; } .card .bd { padding:15px 16px; } .grid { display:grid; gap:12px; } .grid.cols-3 { grid-template-columns:repeat(3,1fr); } .grid.cols-4 { grid-template-columns:repeat(4,1fr); } @media (max-width:760px){ .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr);} } @media (max-width:520px){ .grid.cols-3{grid-template-columns:1fr;} .grid.cols-4{grid-template-columns:repeat(2,1fr);} } /* ---------- stat tiles ---------- */ .stat { background:var(--glass-2); border:1px solid var(--glass-border); border-radius:var(--radius-s); padding:15px 12px; text-align:center; box-shadow:inset 0 1px 0 var(--glass-hi); } .stat .k { font-size:27px; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .stat .l { font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.8px; margin-top:8px; } /* The overview's four numbers on one line at every width. Two rows of two made four figures the tallest thing on the page. */ .grid.cols-4.ovstats { grid-template-columns:repeat(4,1fr); gap:8px; } .ovstats .stat { padding:12px 6px; } .ovstats .stat .k { font-size:19px; } .ovstats .stat .l { font-size:9px; letter-spacing:.5px; margin-top:5px; } @media (max-width:359px) { .ovstats .stat .k { font-size:16px; } } /* ---------- tables ---------- */ .tablewrap { overflow-x:auto; } table.t { width:100%; border-collapse:collapse; font-size:13.5px; } table.t th, table.t td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; } table.t th { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-faint); font-weight:600; } table.t td.num, table.t th.num { text-align:right; font-variant-numeric:tabular-nums; } table.t tbody tr:last-child td, table.t tr:last-child td { border-bottom:0; } table.t tr:hover td { background:var(--chip); } table.t td.name { white-space:normal; min-width:150px; } table.t td .who { font-weight:600; } table.t td .mgr { font-size:11.5px; color:var(--ink-faint); } .rankcell { display:inline-flex; align-items:center; gap:7px; } .rankcell .r, table.t .r { font-weight:800; min-width:22px; display:inline-block; font-variant-numeric:tabular-nums; } .prize { color:var(--gold); font-weight:700; font-variant-numeric:tabular-nums; } .move.up { color:var(--good); } .move.down { color:var(--bad); } .move.flat { color:var(--ink-faint); } /* The classic table's move, under the rank it belongs to, in the room the two-line name cell already leaves beside it. */ .mvu { font-size:10px; font-weight:700; line-height:1; margin-top:3px; text-align:right; letter-spacing:-.2px; } .mvu.up { color:var(--good); } .mvu.down { color:var(--bad); } /* A phone is narrower than these tables. Rather than scrolling sideways to a column nobody knew was there, the secondary ones step back, the way the Premier League table's do: bench and hits are tie-break detail, W/D/L are already summed in Pts, and the XP column is blank for two hundred of the classic table's rows and on every profile besides. */ /* The name column's floor was 150px at every width, which on its own put four-column tables past a 320px screen. It steps down with the screen, and the cell padding with it, as the Premier League table's already do. */ @media (max-width:389px) { /* A fixed cap on the name column is the same overflow one size down: what the name may take is the card less the number columns beside it, so the cap follows the screen. 216 is the widest set of number columns at this padding (Manager of the Month's three), plus the card's edges. */ table.t td.name { min-width:128px; max-width:calc(100vw - 216px); } /* One unbreakable team name — "MainooKiFarakPainda" — held the column open past the screen on its own. On a phone the name and the manager each keep to one line and trail off, as the Premier League table's do. */ table.t td.name .who, table.t td.name .mgr { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } @media (max-width:359px) { table.t td.name { min-width:112px; max-width:calc(100vw - 200px); } table.t th, table.t td { padding:10px 8px; } } @media (max-width:519px) { table.t.classictbl .c-xp { display:none; } } @media (max-width:459px) { table.t.monthtbl .c-bench { display:none; } } /* LMS carries three number columns beside the name, and a team name with no spaces in it cannot wrap, so it steps down sooner than the others: bench goes below 480, the numbers tighten and the name trails off below 420, and hits go below 360. Measured against the card, not the screen. */ @media (max-width:479px) { table.t.lmstbl .c-bench { display:none; } } @media (max-width:419px) { table.t.lmstbl th.num, table.t.lmstbl td.num { padding-left:8px; padding-right:8px; } table.t.lmstbl td.name { min-width:128px; max-width:170px; } table.t.lmstbl td.name .who, table.t.lmstbl td.name .mgr { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } @media (max-width:389px) { table.t.lmstbl td.name { max-width:158px; } } @media (max-width:359px) { table.t.lmstbl .c-hits { display:none; } } @media (max-width:359px) { table.t.voltbl .c-gw { display:none; } } @media (max-width:479px) { table.t.grptbl .c-w, table.t.grptbl .c-d, table.t.grptbl .c-l { display:none; } } /* The UCL/UEL tag on the manager's line, sized to it. */ table.t td .mgr .pill { font-size:9.5px; padding:1px 7px; vertical-align:1px; margin-left:2px; } /* Promotion and relegation zones carry a bar at the edge, like "you" does. */ tr.zone-top td:first-child { box-shadow:inset 3px 0 0 var(--good); } tr.zone-bot td:first-child { box-shadow:inset 3px 0 0 var(--bad); } tr.me.zone-top td:first-child, tr.me.zone-bot td:first-child { box-shadow:inset 3px 0 0 var(--accent); } /* How far along a player is towards his price moving. The bar fills from the left in both directions — the colour says which way he is going, so the fill only has to say how far. Full and over-full read as "tonight". */ .prog { position:relative; display:block; width:100%; height:19px; border-radius:5px; background:var(--chip); overflow:hidden; } .prog i { position:absolute; left:0; top:0; bottom:0; display:block; border-radius:5px; } .prog b { position:relative; display:block; line-height:19px; text-align:center; font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; } .prog.up i { background:var(--prog-up); } .prog.down i { background:var(--prog-down); } .prog.up b { color:var(--prog-up-ink); } .prog.down b { color:var(--prog-down-ink); } /* a floor rather than a reading, so the fill is softened */ .prog.floor i { opacity:.55; } /* ordering only, with no number to read: a slimmer bar so it does not look like a measurement that has simply lost its label */ .prog.bare { height:11px; } /* Past the line he is going tonight, which is worth saying loudly — but in the colour of the direction he is going. One shared "going" green here painted a player 155% of the way to a FALL the same as one about to rise. */ .prog.up.full i { background:var(--prog-go); } .prog.up.full b { color:var(--prog-go-ink); } .prog.down.full i { background:var(--prog-drop); } .prog.down.full b { color:var(--prog-drop-ink); } tr.zone-top td { background:var(--good-wash); } tr.zone-bot td { background:var(--bad-wash); } tr.me td { background:var(--accent-wash); } tr.me td:first-child { box-shadow:inset 3px 0 0 var(--accent); } /* my row keeps its wash even where zebra striping or zone tints apply */ tr.me:nth-child(even) td { background:var(--accent-wash); } .pill { display:inline-block; font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-soft); letter-spacing:.2px; background:var(--chip); } .pill.ucl { color:var(--cyan); border-color:var(--cyan); border-color:color-mix(in srgb, var(--cyan) 45%, transparent); background:color-mix(in srgb, var(--cyan) 10%, transparent); } .pill.uel { color:var(--gold); border-color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, transparent); background:color-mix(in srgb, var(--gold) 10%, transparent); } .pill.up { color:var(--good); border-color:var(--good); border-color:color-mix(in srgb, var(--good) 45%, transparent); } .pill.down { color:var(--bad); border-color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, transparent); } .pill.live { color:var(--good); border-color:var(--good); border-color:color-mix(in srgb, var(--good) 45%, transparent); background:var(--good-wash); } .pill.out { color:var(--bad); border-color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent); } .pill.gold { color:var(--gold); border-color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, transparent); background:color-mix(in srgb, var(--gold) 10%, transparent); } .note { font-size:12px; color:var(--ink-faint); line-height:1.55; } .note.warn { color:var(--accent); } .callout { border:1px solid var(--line-strong); border-radius:var(--radius-s); padding:14px 16px; color:var(--ink-soft); font-size:13px; line-height:1.55; background:var(--glass-2); } .callout b { color:var(--ink); } /* Last Manager's header: picker, search and the count that matters, on one line. The search takes what is left and the eliminated half steps aside before anything is squeezed to nothing. */ .lmsrow { flex-wrap:nowrap; gap:8px; } .lmsrow select.in.narrow { flex:0 0 auto; min-width:0; } .lmsrow .in.srch { flex:1 1 60px; min-width:0; max-width:none; } .lmscount { flex:none; white-space:nowrap; font-size:12px; font-weight:600; color:var(--ink-faint); } .lmscount b { font-size:15px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } @media (max-width:389px){ .lmscount .gone { display:none; } } /* the menu drawer: in from the left, full height, the way a burger implies */ .modal-back.drawer { align-items:stretch; justify-content:flex-start; padding:0; } .modal-back.drawer .modal { width:min(340px, 88vw); max-width:none; max-height:none; height:100%; border-radius:0 20px 20px 0; border-left:0; transform:translateX(-100%); transition:transform .24s cubic-bezier(.2,.7,.3,1); display:flex; flex-direction:column; } .modal-back.drawer.show .modal { transform:translateX(0); } .modal-back.drawer .bd { padding:calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); overflow:auto; -webkit-overflow-scrolling:touch; flex:1; min-height:0; } @media (prefers-reduced-motion: reduce) { .modal-back.drawer .modal { transition:none; } } /* ...and the same drawer from the right, for the button that opens it. You and the league sit under a control on the right of the bar, so the sheet comes from the side it was asked for rather than crossing the screen to arrive. */ .modal-back.drawer.right { justify-content:flex-end; } .modal-back.drawer.right .modal { border-radius:20px 0 0 20px; border-left:1px solid var(--glass-border); border-right:0; transform:translateX(100%); } .modal-back.drawer.right.show .modal { transform:translateX(0); } /* the section burger, sitting where the back arrow does in a sub-view */ .menubtn { flex:none; width:32px; height:32px; padding:0; border-radius:50%; cursor:pointer; border:1px solid var(--bar-line); background:var(--bar-fill); color:var(--bar-ink); display:grid; place-items:center; position:relative; } .menubtn::after { content:""; position:absolute; top:-6px; right:-6px; bottom:-6px; left:-6px; } .menubtn:hover { border-color:var(--pl-green); color:var(--pl-green); } /* The section list inside the burger drawer. These are two-line cards rather than the single-line rows below them, so every property .menu button sets has to be answered here — it carries more specificity than a lone class. */ .menulist { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; } .menulist .menuitem { display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:2px; align-items:center; justify-items:start; width:100%; text-align:left; cursor:pointer; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--chip); color:var(--ink); } .menulist .menuitem .mi-i { grid-row:1 / span 2; display:flex; } .menulist .menuitem:hover { background:var(--chip); border-color:var(--accent); } .menulist .menuitem.on { border-color:var(--accent); background:var(--accent-tint); } .menulist .menuitem .mi-t { font-size:15px; font-weight:700; line-height:1.25; } .menulist .menuitem .mi-s { font-size:12px; color:var(--ink-faint); font-weight:500; line-height:1.3; } table.t b.up { color:var(--good); } table.t b.down { color:var(--bad); } /* the squad's live caveat: bonus not yet confirmed */ .provnote { text-align:center; font-size:11.5px; font-weight:600; color:var(--ink-faint); margin:-4px 0 12px; } .provnote b { color:var(--ink-soft); font-variant-numeric:tabular-nums; } /* the knockout round's own detail line, since the picker names the round */ .koline { text-align:center; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:2px 0 12px; } /* a shared place in the classic table */ .rankcell .jt { font-size:11px; font-weight:800; color:var(--ink-faint); margin-right:1px; } /* ---------- LMS grid ---------- */ .lmsgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } @media (max-width:720px){ .lmsgrid{grid-template-columns:1fr;} } .lmsgrid table.t tr.now td { background:var(--accent-tint); } .lmsgrid table.t tr.champ td { background:var(--gold-wash); } /* ---------- pyramid ---------- */ .pyr { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0 4px; } .pyr .lvl { border-radius:12px; padding:12px 16px; text-align:center; font-weight:800; letter-spacing:.6px; border:1px solid var(--glass-border); color:#160f24; box-shadow:inset 0 1px 0 rgba(255,255,255,.4); } .pyr .lvl small { display:block; font-weight:600; font-size:10.5px; opacity:.85; letter-spacing:.3px; } .pyr .elite { background:linear-gradient(180deg,#ffe07a,#e0a418); width:48%; } .pyr .championship { background:linear-gradient(180deg,#c7a3ff,#9333ea); color:#fff; width:64%; } .pyr .challenger { background:linear-gradient(180deg,#8dc0ff,#2563eb); color:#fff; width:82%; } .pyr .conference { background:linear-gradient(180deg,#8ff0b4,#16a34a); color:#0a2016; width:98%; } /* ---------- prize tables ---------- */ .prizetable { width:100%; border-collapse:collapse; font-size:13px; } .prizetable td { padding:7px 10px; border-bottom:1px solid var(--line); } .prizetable tr:last-child td { border-bottom:0; } .prizetable td.num { text-align:right; color:var(--gold); font-weight:700; font-variant-numeric:tabular-nums; } /* ---------- forms ---------- */ label.field { display:block; margin-bottom:13px; } .selrow { display:flex; gap:12px; flex-wrap:wrap; } .selrow .field { flex:1 1 45%; min-width:150px; margin-bottom:12px; } select.in.narrow { width:auto; min-width:120px; max-width:250px; padding-right:30px; } /* month/season picker row: narrow dropdown + GW status chips beside it */ .pickrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; } /* One extra picker sits inline beside the stage; the group stage instead stacks a Matches/Standings slider over that mode's own pickers. */ .pickrow #stageExtra { display:contents; } .pickrow #stageExtra.col { display:flex; flex-direction:column; gap:10px; flex:1 0 100%; min-width:0; } .segsub { display:flex; gap:8px; min-width:0; } .segsub select.in.narrow { min-width:0; max-width:none; flex:0 0 auto; } .segsub select.in.narrow.grow { flex:1 1 auto; } /* My own fixture wears the official app's banner: the cyan-to-violet sweep, white type, and the score pill unchanged for contrast. */ .fx.mine { background:linear-gradient(100deg, #04d9f0 0%, #4f7df9 55%, #8b5cf6 100%); border-radius:14px; margin:5px 6px; } .fx.mine .fxm { color:#fff; } .fx.mine .fxt { color:rgba(255,255,255,.82); } .fx.mine .fxw { color:rgba(255,255,255,.85); } .fx.mine .fxsc.ahead { background:rgba(20,10,50,.35); color:#fff; } /* no hairline into or out of the banner */ .fxgrp .fx.mine::before, .fxgrp .fx.mine + .fx::before { display:none; } /* me, in a knockout tie and on the stats lists */ .side.me { background:var(--accent-wash); border-radius:8px; } .side.me .nm { color:var(--accent); } .hrow.me { background:var(--accent-wash); border-radius:10px; } /* The corner chip that swaps the finished group stage in and out once the knockouts have taken the tab over. */ .archrow { display:flex; justify-content:flex-end; margin:0 2px 10px; } .archbtn { appearance:none; border:1px solid var(--line-strong); background:var(--chip); color:var(--ink-soft); font-family:inherit; font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; cursor:pointer; } .archbtn:hover { color:var(--accent); border-color:var(--accent); } /* The two-way slider, as the official app draws it: a soft track holding two equal tabs, the active one lifted on its own card. */ .seg { display:flex; padding:3px; border-radius:15px; background:var(--chip); border:1px solid var(--line); } .segb { flex:1; min-width:0; appearance:none; border:0; background:transparent; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--ink-soft); padding:10px 8px; border-radius:12px; cursor:pointer; transition:background .15s ease, color .15s ease; } .segb.active { background:var(--head-solid); color:var(--ink); font-weight:700; box-shadow:0 1px 5px rgba(20,20,45,.14), inset 0 1px 0 var(--glass-hi); } .pickmeta { min-width:0; font-size:13px; font-weight:600; color:var(--ink-soft); } .gwchips { display:flex; flex-wrap:wrap; gap:4px; } .gwchip { font-size:10.5px; font-weight:700; min-width:22px; text-align:center; padding:2px 5px; border-radius:6px; font-variant-numeric:tabular-nums; border:1px solid var(--line); color:var(--ink-soft); background:var(--chip); } .gwchip.done { color:#fff; background:var(--good); border-color:transparent; } .gwchip.live { color:var(--on-accent); background:var(--accent); border-color:transparent; } .gwchip.upcoming { color:var(--ink-faint); } .gwlegend { font-size:11px; color:var(--ink-faint); margin-top:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .gwlegend .lg { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:2px; vertical-align:middle; } .gwlegend .lg.done { background:var(--good); } .gwlegend .lg.live { background:var(--accent); } .gwlegend .lg.upcoming { background:var(--chip); border:1px solid var(--line-strong); } label.field .lab { font-size:12px; color:var(--ink-soft); font-weight:600; margin-bottom:6px; display:block; } input.in, select.in, textarea.in { width:100%; background:var(--field); border:1px solid var(--glass-border); color:var(--ink); border-radius:12px; padding:10px 12px; font-size:15px; font-family:inherit; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } textarea.in { min-height:96px; font-family:var(--mono); font-size:12px; resize:vertical; } input.in:focus, select.in:focus, textarea.in:focus { outline:none; border-color:var(--accent); } select.in { appearance:none; } .btn { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--glass-border); background:var(--glass-2); color:var(--ink); border-radius:12px; padding:10px 16px; font-size:14px; font-weight:600; cursor:pointer; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 var(--glass-hi); } .btn:hover { border-color:var(--accent); } .btn.primary { background:linear-gradient(180deg, var(--accent-lift), var(--accent)); color:var(--on-accent); border-color:transparent; } .btn.ghost { background:transparent; box-shadow:none; } .btn.danger { border-color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, transparent); color:var(--bad); } .btn[disabled]{ opacity:.5; cursor:not-allowed; } .btnrow { display:flex; flex-wrap:wrap; gap:8px; } /* ---------- segmented control (theme) ---------- */ .seg { display:flex; gap:3px; padding:3px; border-radius:13px; background:var(--chip); border:1px solid var(--line); } .seg button { flex:1; border:0; background:transparent; color:var(--ink-soft); font:inherit; font-size:13px; font-weight:600; padding:8px 10px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; } .seg button svg { width:16px; height:16px; } .seg button.on { background:var(--glass); color:var(--ink); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi); } /* ---------- progress ---------- */ .progress { height:8px; border-radius:999px; background:var(--chip); overflow:hidden; border:1px solid var(--line); } .progress > i { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent-lift), var(--accent)); transition:width .2s; } /* ---------- empty ---------- */ .empty { text-align:center; padding:46px 20px; color:var(--ink-faint); } .empty .big { font-size:44px; } .empty h3 { color:var(--ink); margin:12px 0 6px; font-weight:700; } /* ---------- toast ---------- */ #toast { position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px); background:var(--glass-bar); color:var(--ink); border:1px solid var(--glass-border); border-radius:14px; padding:11px 18px; font-size:13.5px; font-weight:600; box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:80; max-width:90vw; text-align:center; } #toast.show { opacity:1; transform:translateX(-50%) translateY(0); } /* ---------- modal + profile sheet ---------- */ .modal-back { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(10,8,20,.4); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:70; padding:16px; } .modal-back.show { display:flex; } /* Opaque, not glass. The backdrop behind it is still blurred and dimmed, but a sheet you can read the table through is a sheet you have to work to read, and these carry small numbers. It also drops two backdrop-filters that were compositing the whole page on every scroll of the sheet. */ .modal { background:var(--sheet-bg); border:1px solid var(--glass-border); border-radius:20px; width:min(560px,100%); max-height:86vh; overflow:auto; box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi); /* reaching the end of the sheet must not start scrolling the page behind it */ overscroll-behavior:contain; } .modal .hd { padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; position:sticky; top:0; background:var(--sheet-bg); } .modal .hd h3 { font-size:16px; font-weight:700; } .modal .hd .x { margin-left:auto; cursor:pointer; color:var(--ink-faint); font-size:22px; line-height:1; } .modal .bd { padding:18px; } /* profile sheet: same modal, aligned to top-right on wide screens */ .modal-back.sheet { align-items:flex-start; justify-content:flex-end; padding:70px 14px 14px; } .modal-back.sheet .modal { width:min(380px,100%); } .profile-hd { display:flex; align-items:center; gap:12px; margin-bottom:6px; } .profile-hd .av { width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--glass-2); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 var(--glass-hi); } .profile-hd .av svg { width:24px; height:24px; color:var(--ink-soft); } .profile-hd .who { font-weight:700; font-size:15px; } .profile-hd .sub { font-size:12px; color:var(--ink-faint); } .menu { display:flex; flex-direction:column; gap:2px; margin-top:6px; } .menu button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; background:transparent; color:var(--ink); font:inherit; font-size:14.5px; padding:12px 10px; border-radius:12px; cursor:pointer; } .menu button:hover { background:var(--chip); } .menu button svg { width:19px; height:19px; color:var(--ink-soft); flex:none; } .menu .divider { height:1px; background:var(--line); margin:6px 2px; } .menu .lab-sm { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-faint); padding:8px 10px 4px; font-weight:600; } /* ---------- footer ---------- */ /* ---- dropdown caret (all selects) ---- */ select.in { background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 11px center; padding-right:32px; } /* ---- clickable manager names ---- */ td.name[data-entry] { cursor:pointer; } td.name[data-entry] .who { text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:2px; text-decoration-thickness:1px; } td.name[data-entry]:hover .who { color:var(--accent); text-decoration-color:var(--accent); } /* ---- fill mode: frozen-header table fills the screen under a fixed top ---- */ :root { --topbar-h:56px; --nav-h:66px; } body.fill { padding-bottom:0; } main.wrap.fill { display:flex; flex-direction:column; padding-top:16px; padding-bottom:0; overflow:hidden; height:calc(100vh - var(--topbar-h) - var(--nav-h)); height:calc(100dvh - var(--topbar-h) - var(--nav-h)); } main.wrap.fill .view.active { flex:1; min-height:0; display:flex; flex-direction:column; } main.wrap.fill #monthPanel, main.wrap.fill #pyrPanel, main.wrap.fill #grpPanel, main.wrap.fill #lmsGwPanel, main.wrap.fill #prPanel, main.wrap.fill #volPanel { display:contents; } main.wrap.fill .freeze { flex:1; min-height:0; max-height:none; } /* A little room at the foot of the scroller so the last row can always clear the tab bar, even before the measured heights land on first paint. */ main.wrap.fill .freeze table.t tbody tr:last-child td { padding-bottom:14px; } main.wrap.fill .freeze .fxwrap > :last-child { padding-bottom:16px; } /* ---- profile: squad on a pitch (FPL-style) ---------------------------- */ .pitchcard .bd { padding:14px 12px 12px; } .pgwline { text-align:center; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:12px; } .pgwline .pill { vertical-align:middle; } /* three stats: Average | Total Pts | Highest */ .pstats { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-bottom:14px; } .pstat { text-align:center; } .pstat .v { font-size:26px; font-weight:800; line-height:1.05; letter-spacing:-.5px; font-variant-numeric:tabular-nums; } .pstat .l { font-size:11.5px; font-weight:600; color:var(--ink-faint); margin-top:2px; } .pstat.main { min-width:104px; padding:10px 16px; border-radius:var(--radius-s); background:linear-gradient(150deg, #5a0a63, var(--pl-pink)); color:#fff; box-shadow:0 8px 20px -10px rgba(233,0,82,.7); } .pstat.main .v { font-size:30px; color:#fff; } .pstat.main .l { color:rgba(255,255,255,.9); } /* The realisable value, under the squad value it qualifies. It sits on the magenta gradient, so it takes its colour from that tile — the faint grey used elsewhere on the card is all but invisible here. */ .pstat .sub { font-size:11px; font-weight:700; color:var(--ink-soft); line-height:1.25; margin-top:1px; } .pstat.main .sub { color:rgba(255,255,255,.92); } .pstat .hit { color:#ffd7d1; font-weight:800; } .pstat.hi { cursor:pointer; } .pstat.hi .arw { font-weight:800; } .pstat.hi:hover .v { color:var(--accent); } /* Pitch | List segmented control */ .pseg { display:flex; gap:2px; padding:3px; margin:0 auto 12px; width:max-content; background:var(--chip); border:1px solid var(--line); border-radius:999px; } .pseg button { appearance:none; border:0; background:transparent; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:var(--ink-soft); padding:6px 22px; border-radius:999px; } .pseg button.on { background:var(--glass-hi); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.14); } /* the pitch itself */ .pitch { position:relative; border-radius:12px 12px 4px 4px; padding:74px 6px 22px; overflow:hidden; display:flex; flex-direction:column; gap:14px; min-height:556px; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 20%, rgba(255,255,255,.12)), repeating-linear-gradient(180deg, #24a35a 0 56px, #1f9553 56px 112px); box-shadow:inset 0 0 40px rgba(0,0,0,.18); } /* white markings, drawn from the top goal down to the halfway line */ .pmark { position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none; } .pmark span { position:absolute; left:50%; transform:translateX(-50%); border:2px solid rgba(255,255,255,.5); } .pmark .goal { top:0; width:76px; height:9px; border-top:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 2px, transparent 2px 5px); } .pmark .box18 { top:0; width:62%; max-width:250px; height:64px; border-top:0; } .pmark .box6 { top:0; width:31%; max-width:124px; height:28px; border-top:0; } .pmark .spot { top:47px; width:4px; height:4px; border-radius:50%; border:0; background:rgba(255,255,255,.55); } /* the D on the edge of the box */ .pmark .arc { top:56px; width:74px; height:24px; border-radius:0 0 74px 74px / 0 0 24px 24px; border-top:0; } .pmark .halfway { top:50%; width:100%; height:0; border-width:2px 0 0; } .pmark .circle { top:50%; width:118px; height:118px; margin-top:-59px; border-radius:50%; } .pitch > .prow { position:relative; z-index:1; display:flex; justify-content:center; gap:var(--pgap, 14px); flex:1; align-items:center; } /* One player. Every card is the same size whatever the formation: sharing the row out instead made a four-man midfield wider and squatter than the three in front of it, and pushed its cards edge to edge with no grass between them. Fixed width and a real gap, and the row centres itself — but they can still give ground, so a Bench Boost XI (up to six across) shrinks to fit rather than spilling over the touchline. */ .pcell { width:calc((100% - (var(--across, 4) - 1) * var(--pgap, 14px)) / var(--across, 4)); max-width:72px; min-width:0; } .pitch > .prow > .pcell { flex:0 1 auto; } .pposlbl { text-align:center; font-size:10px; font-weight:800; letter-spacing:.6px; color:var(--ink-faint); text-transform:uppercase; margin-bottom:4px; } .pcard { position:relative; border-radius:7px; overflow:hidden; background:rgba(6,60,32,.42); box-shadow:0 2px 6px rgba(0,0,0,.28); } /* The shirt gets the room to be the thing you see first — the card reads as a portrait rather than a squat tile. */ /* content-box, because the height here is the jersey's own and the padding sits around it; under the page's border-box default the padding would eat the height and the floated picture would land on the name bar. */ .pshirt { display:block; padding:10px 0 6px; height:var(--shirt-h); box-sizing:content-box; } .pshirt { --shirt-w:42px; --shirt-h:40px; } /* The photograph is not the jersey and need not be its size. The jersey sets the height of the slot and so the height of the card, which is why it does not move; the photograph is absolutely positioned inside that slot, so it can take more of the room without shifting a single thing around it. It is a crop of a head and shoulders, and it was sitting small in a card with ten points of air above it. These fill more of that air: wider than the jersey, taller, and starting higher, while still clearing the name bar. */ .pshirt { --face-w:48px; --face-h:46px; --face-top:6px; --face-gut:6px; } /* The jersey now floats in the slot exactly as the photograph does, at the photograph's size, so a player without a picture is not drawn smaller than the men beside him. The slot's height is set on .pshirt by hand instead. */ .jsy { position:absolute; left:50%; top:var(--face-top); transform:translateX(-50%); width:min(var(--face-w), calc(100% - var(--face-gut))); height:var(--face-h); filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); } /* Tight, because the name bar is the width of the card and some surnames are not: every point of padding is a character of "Calvert-Lewin". */ .pname { background:#fff; color:#2b0b34; font-size:10px; font-weight:700; line-height:1.3; letter-spacing:-.2px; padding:3px 2px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ppts { background:#37003c; color:#fff; font-size:11.5px; font-weight:800; line-height:1.3; padding:3px 3px; text-align:center; font-variant-numeric:tabular-nums; } /* his match is in play: the points bar lights up, the official app's pink-to-orange */ .ppts.live { background:linear-gradient(90deg, #e4004f, #ec5a12); } /* the opponent, shown in the points slot until kick-off */ .ppts.opp { font-size:9px; letter-spacing:.02em; color:#eaf7ff; opacity:.92; font-weight:700; } /* captain / vice / top-scorer badges */ .pb { position:absolute; top:2px; z-index:2; width:16px; height:16px; border-radius:50%; font-size:9.5px; font-weight:800; font-style:normal; line-height:16px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.45); } .pb.cap, .pb.vice { left:2px; background:#37003c; color:#fff; } .pb.star { right:2px; background:#00ff87; color:#0a3d24; font-size:9px; } /* How close a player's price is to moving, in the corner of his card. Only in the value view, only on the newest pitch, and only for the players actually near the line — see MOVE_MIN in compute.js for why fifteen of these would be noise. Filled is going tonight; outlined is drifting that way, darkened behind so the bright ink still clears 5.4:1 over either stripe of the grass. */ .pmv { position:absolute; top:2px; right:2px; z-index:3; display:flex; align-items:center; gap:1px; padding:1px 3px 1px 2px; border-radius:4px; font-style:normal; font-weight:800; font-size:8.5px; line-height:1.15; font-variant-numeric:tabular-nums; background:rgba(0,0,0,.6); box-shadow:0 1px 3px rgba(0,0,0,.4); } .pmv b { font-size:7px; line-height:1; } /* three digits — past the line, waiting for the night — go a shade tighter so they clear a 320px card */ .pmv.w3 { font-size:8px; padding:1px 2px 1px 1px; gap:0; } .pmv.up { color:var(--prog-go); box-shadow:inset 0 0 0 1px var(--prog-go), 0 1px 3px rgba(0,0,0,.4); } .pmv.down { color:var(--prog-drop); box-shadow:inset 0 0 0 1px var(--prog-drop), 0 1px 3px rgba(0,0,0,.4); } .pmv.soon.up { background:var(--prog-go); color:var(--prog-go-ink); box-shadow:0 1px 3px rgba(0,0,0,.45); } .pmv.soon.down { background:var(--prog-drop); color:var(--prog-drop-ink); box-shadow:0 1px 3px rgba(0,0,0,.45); } /* bench strip */ .pbench { display:flex; justify-content:center; gap:var(--pgap, 14px); padding:14px 8px 12px; border-radius:0 0 12px 12px; background:linear-gradient(180deg, #d9f2e2, #f4fbf7); } .pbench .pcard { background:#2a8a55; } /* the bench strip is always light, so its labels stay dark in both themes */ .pbench .pposlbl { color:#4a6b58; } /* ---- gameweek picker inside the pitch header -------------------------- */ .pgwline select.gwsel { width:auto; display:inline-block; font-weight:700; font-size:13px; padding:5px 30px 5px 12px; border-radius:999px; } /* ---- head to head ------------------------------------------------------ */ .cmppick { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:0 0 12px; } .cmppick select { min-width:0; } .cmppick .vs { font-size:11px; font-weight:800; color:var(--ink-faint); text-transform:uppercase; } .cmphead { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:10px 0 12px; } .cmphead .side { text-align:center; min-width:0; } .cmphead .nm { font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cmphead .nm:hover { color:var(--accent); } .cmphead .sc { font-size:30px; font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums; color:var(--ink-faint); } .cmphead .sc.win { color:var(--good); } .cmphead .mid { font-size:11px; font-weight:800; color:var(--ink-faint); } /* two pitches, side by side, at half scale */ .cmppitch { display:grid; grid-template-columns:1fr 1fr; gap:6px; } .cmppitch .col { min-width:0; } .cmppitch .pitch { padding:40px 2px 10px; min-height:300px; gap:5px; border-radius:8px; } .cmppitch .pitch { --pgap:4px; } .cmppitch .pitch .prow { gap:4px; } .cmppitch .pcell { min-width:0; max-width:52px; } /* Five cards to a row on the narrowest screen: the card itself is under 20px there and max-width already has the photograph filling it edge to edge, so there is no room here to give and these stay as they were. */ .cmppitch .pshirt { --shirt-w:24px; --shirt-h:23px; --face-w:24px; --face-h:23px; --face-top:10px; --face-gut:0px; } .cmppitch .pname { font-size:8px; padding:2px 1px; } .cmppitch .ppts { font-size:9px; padding:2px 1px; } .cmppitch .pb { width:12px; height:12px; font-size:7.5px; line-height:12px; } .cmppitch .pmark .box18 { height:38px; } .cmppitch .pmark .box6 { height:16px; } .cmppitch .pmark .goal { width:44px; height:6px; } .cmppitch .pmark .spot { top:28px; } .cmppitch .pmark .arc { top:33px; width:44px; height:14px; } .cmppitch .pmark .circle { width:70px; height:70px; margin-top:-35px; } .cmppitch .pbench { padding:8px 3px 8px; gap:2px; } .cmppitch .pposlbl { font-size:8px; margin-bottom:2px; } /* comparison table: middle column is the label, outer columns the values */ table.t.cmptable th, table.t.cmptable td { white-space:normal; } table.t.cmptable th.num, table.t.cmptable td.num { width:29%; text-align:center; font-variant-numeric:tabular-nums; } table.t.cmptable th.num { font-size:11px; } table.t.cmptable td.num { font-size:16px; font-weight:800; color:var(--ink-soft); } table.t.cmptable td.num.win { color:var(--good); } table.t.cmptable .cmid { text-align:center; font-size:11.5px; font-weight:600; color:var(--ink-faint); } table.t.cmptable .cmid .note { font-size:10px; margin-top:1px; } table.t.cmptable td.num .txt { display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft); line-height:1.35; } /* ---- stats & highlights ------------------------------------------------ */ .hgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:14px; } .hcard { padding:13px 14px; border-radius:var(--radius-s); background:var(--glass); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi); } .hcard[data-entry] { cursor:pointer; } .hcard[data-entry]:hover { border-color:var(--accent); } .hcard .hl { display:flex; align-items:center; gap:5px; min-width:0; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-faint); } /* the label can run long on a narrow card; the icon must never be the thing that gives way */ .hcard .hl span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hcard .hl .hi-ic { flex:none; color:var(--accent); opacity:.85; } .hcard .hv { font-size:27px; font-weight:800; line-height:1.1; letter-spacing:-.6px; margin:4px 0 2px; font-variant-numeric:tabular-nums; } .hcard .hw { font-size:12.5px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hcard .hs { font-size:11px; color:var(--ink-faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ranked mini-lists, two per row on wider screens */ .hcols { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px 22px; } .hlist .lab-sm { margin-bottom:6px; } .hrow { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--line); } .hrow:last-of-type { border-bottom:0; } .hrow[data-entry] { cursor:pointer; } .hrow[data-entry]:hover .hn { color:var(--accent); } .hrow .hi { width:16px; flex:none; font-size:10.5px; font-weight:800; color:var(--ink-faint); font-variant-numeric:tabular-nums; } .hrow .hn { flex:1; min-width:0; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hrow .htag { font-size:9.5px; font-weight:700; color:var(--ink-faint); } .hrow .hp { font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; } .chiprow { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .section-title .pill { flex:none; } /* ---- metric toggle (points / ownership / value) ------------------------ */ .psegrow { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin-bottom:12px; } .psegrow .pseg { margin:0; } .pseg.sm button { font-size:11.5px; padding:5px 13px; } /* the value bar switches colour away from the points purple */ .ppts.alt { background:#0d5c63; } .pbench .ppts.alt { background:#0d5c63; } /* the selling price, tucked under the market price where the two differ */ .pcard .psub { background:#0d5c63; color:#b9dfe2; font-size:8.5px; font-weight:700; line-height:1.2; text-align:center; padding:0 2px 3px; margin-top:-1px; } /* Transfers, turned over. The new face is ringed on the way in; the card he replaced takes his place, greyed and named, and turns as it arrives. */ .swapbtn { display:block; width:100%; margin:0 0 8px; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; padding:8px 12px; border-radius:var(--radius-s); border:1px solid var(--line-strong); background:var(--chip); color:var(--ink-soft); } .swapbtn.on { border-color:var(--accent); background:var(--accent-tint); color:var(--accent); } .pcard.came { box-shadow:0 0 0 2px var(--pl-green), 0 2px 8px rgba(0,0,0,.35); } .pcard.gone { background:#4a4a55; animation:pflip .32s ease-out both; } .pcard.gone .pshirt { opacity:.55; filter:grayscale(.65); } .pcard.gone .pname { background:#efeef2; color:#4a4a55; } .pcard.gone .ppts { background:#3a3a44; } .pcard.gone .psub { background:#3a3a44; color:#c9c8d0; } .pb.out { right:2px; background:#c2354a; color:#fff; width:auto; padding:0 4px; border-radius:7px; font-size:8px; letter-spacing:.04em; } @keyframes pflip { from { transform:rotateY(-90deg); } to { transform:rotateY(0); } } @media (prefers-reduced-motion: reduce) { .pcard.gone { animation:none; } } /* ---- head to head: chip tag above each squad --------------------------- */ .cmppitch .colchip { min-height:22px; text-align:center; margin-bottom:4px; } /* ---- head to head: all fifteen side by side ---------------------------- */ table.t.sqtable { width:100%; table-layout:fixed; } table.t.sqtable td { padding:0; border-bottom:1px solid var(--line); white-space:normal; } td.sqp { padding:0; width:50%; vertical-align:middle; } .sqin { display:flex; align-items:center; gap:6px; padding:6px 8px; min-height:34px; } td.sqp.empty { background:repeating-linear-gradient(135deg, transparent 0 6px, var(--chip) 6px 12px); } td.sqp .sq-pos { flex:none; width:26px; font-size:9px; font-weight:800; color:var(--ink-faint); letter-spacing:.3px; } td.sqp .sq-nm { flex:1; min-width:0; font-size:11.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } td.sqp .sq-v { flex:none; font-size:11.5px; font-weight:800; font-variant-numeric:tabular-nums; } td.sqp.benched .sq-nm, td.sqp.benched .sq-v { opacity:.55; } .pb.sq { position:static; display:inline-block; margin-left:4px; vertical-align:middle; width:13px; height:13px; line-height:13px; font-size:8px; box-shadow:none; } table.t.sqtable tr.same td { background:var(--accent-tint); } table.t.sqtable tr.same td.sqp .sq-nm { color:var(--ink); } /* ---- head to head: season by season ------------------------------------ */ table.t.cmptable.seasons td.num { font-size:13px; } table.t.cmptable.seasons .sr { font-weight:800; } table.t.cmptable.seasons .sp { font-size:10.5px; font-weight:600; color:var(--ink-faint); } /* ---- top bar: back arrow + team/manager subtitle ----------------------- */ .backbtn { flex:none; width:32px; height:32px; padding:0; border-radius:50%; cursor:pointer; border:1px solid var(--bar-line); background:var(--bar-fill); color:var(--bar-ink); display:grid; place-items:center; } .backbtn::before { content:""; width:9px; height:9px; margin-left:3px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); } .backbtn:hover { border-color:var(--pl-green); color:var(--pl-green); } .barwrap { min-width:0; } .barsub { font-size:11.5px; font-weight:600; color:var(--ink-faint); line-height:1.2; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .topbar .bartitle { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---- profile: compact competition cards ------------------------------- */ .youline { margin-bottom:2px; } /* On someone else's profile, the way into a head-to-head with them. */ .cmpme { width:100%; cursor:pointer; font:inherit; font-size:13.5px; font-weight:700; padding:10px 14px; border-radius:var(--radius-s); margin-bottom:8px; border:1px solid var(--accent); background:var(--accent-tint); color:var(--accent); } .cmpme:hover { background:var(--accent-wash); } .cmpme:active { transform:translateY(1px); } .pcards { display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:6px; margin-bottom:4px; } .pc { padding:9px 10px; border-radius:var(--radius-xs); background:var(--glass); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 var(--glass-hi); } .pc .pcl { font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-faint); } .pc .pcv { font-size:17px; font-weight:800; line-height:1.15; margin:2px 0 1px; font-variant-numeric:tabular-nums; } .pc .pcs { font-size:10px; color:var(--ink-faint); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---- profile: the four chips ------------------------------------------ */ /* all four chips on one row, whatever the width */ .chipgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; } .chipcard { padding:8px 4px; border-radius:var(--radius-xs); text-align:center; min-width:0; border:1px dashed var(--line-strong); color:var(--ink-faint); background:var(--chip); } .chipcard .cn { font-size:10px; font-weight:700; line-height:1.2; } .chipcard .cg { font-size:10px; font-weight:800; margin-top:2px; } .chipcard.used { border-style:solid; background:var(--pink-wash); border-color:var(--pl-pink); border-color:color-mix(in srgb, var(--pl-pink) 50%, transparent); color:var(--ink); } .chipcard.used .cg { color:var(--accent); } /* ---- head to head: type-ahead manager fields -------------------------- */ .mgrin { width:100%; } .mgrin.bad { border-color:var(--bad); } /* ---- stats: category tabs --------------------------------------------- */ .tabrow { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 8px; margin:0 -2px 4px; scrollbar-width:none; } .tabrow::-webkit-scrollbar { display:none; } /* The row scrolls, and nothing said so: the last chip was simply cut off at the edge. A fade there reads as "more this way". */ .tabrow { -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .tabbtn { flex:none; appearance:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--glass-2); color:var(--ink-soft); } .tabbtn:hover { color:var(--ink); } .tabbtn.on { color:#fff; border-color:transparent; background:linear-gradient(135deg, var(--pl-purple), var(--pl-pink)); box-shadow:0 4px 12px -6px rgba(233,0,82,.8); } .statlead { font-size:12.5px; font-weight:700; color:var(--ink-faint); margin:2px 2px 12px; } /* a group heading inside a tab: quieter than a section title, which would shout six times down one screen */ .statgrp { display:flex; align-items:center; gap:8px; margin:2px 2px 8px; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-faint); } .statgrp::after { content:""; flex:1; height:1px; background:var(--line); } .hcard[data-chipgo] { cursor:pointer; } .hcard[data-chipgo]:hover { border-color:var(--accent); } .statlead .pill { vertical-align:middle; } /* ---- spacing for the per-competition control rows --------------------- */ /* In fill mode the table is the only thing that should flex; without this the cards and pickers above it get squeezed and run into each other. */ main.wrap.fill .view.active > *:not(.freeze) { flex:none; } main.wrap.fill .pickrow, main.wrap.fill .selrow, main.wrap.fill .pickmeta, main.wrap.fill .section-title { flex:none; } /* the pyramid's gameweek chips and their legend need room either side */ #pyrMeta { margin:12px 2px 14px; } #pyrMeta .gwlegend { margin-top:8px; } #monthMeta { margin-left:2px; } /* inline search box that sits beside a picker */ .in.srch { flex:1 1 130px; min-width:110px; max-width:220px; } .nohits { margin-top:10px; } /* the better season of the two reads green, rank and points together */ table.t.cmptable.seasons td.num.win .sr { color:var(--good); } table.t.cmptable.seasons td.num.win .sp { color:var(--good); } /* ---- the gear sheet, as a profile -------------------------------------- */ .profile-hd { margin-bottom:14px; } .profile-hd .idwrap { min-width:0; flex:1; } .profile-hd .who { font-size:17px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .profile-hd .sub { font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* an identified manager gets the league's colours behind their initial */ .profile-hd .av { font-size:20px; font-weight:800; color:#fff; background:linear-gradient(150deg, var(--pl-purple), var(--pl-pink)); } .profile-hd .av svg { color:#fff; } .linkbtn { flex:none; appearance:none; border:0; background:transparent; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:var(--accent); padding:6px 2px; } .linkbtn:hover { text-decoration:underline; } .pffoot { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); font-size:11.5px; line-height:1.5; color:var(--ink-faint); text-align:center; } .pffoot .warn { color:var(--accent); font-weight:600; } /* ---- form chart: points on the left, league position on the right ------ */ /* ---- form charts ------------------------------------------------------- Points as bars from zero, league position as a line, in stacked panels sharing one gameweek axis. Never two y-scales over one plot: the measures have no common scale, so an overlay would make their crossings look like something the data does not say. */ .fchart svg { display:block; width:100%; height:auto; overflow:visible; } .fchart .barP { fill:var(--chart-a); } .fchart .lnR { fill:none; stroke:var(--chart-b); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; } .fchart .mkR { fill:var(--chart-b); stroke:var(--card-bg); stroke-width:1.6; vector-effect:non-scaling-stroke; } .fchart .avg { stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; } .fchart .hit { fill:transparent; } .fchart text { font-size:9px; font-weight:700; font-variant-numeric:tabular-nums; paint-order:stroke; stroke:var(--card-bg); stroke-width:2.6px; stroke-linejoin:round; } /* values wear ink, never the series colour — the mark beside them carries identity */ .fchart .dlP { fill:var(--ink); text-anchor:middle; } .fchart .dlR { fill:var(--ink-soft); text-anchor:middle; } .fchart .axV { fill:var(--ink-faint); text-anchor:end; font-size:8.5px; } .fchart .axG { fill:var(--ink-faint); text-anchor:middle; font-size:8.5px; font-weight:600; } /* the legend is the control: tap a series to take it off the chart */ .fchart .lgd { display:flex; flex-wrap:wrap; gap:6px 8px; margin-bottom:8px; } .fchart .lg { display:inline-flex; align-items:center; gap:6px; appearance:none; cursor:pointer; font:inherit; font-size:11px; font-weight:700; color:var(--ink-faint); padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:transparent; } .fchart .lg.on { color:var(--ink); border-color:var(--line-strong); background:var(--glass-hi); } .fchart .lg i { width:10px; height:10px; border-radius:2px; background:var(--ink-faint); flex:none; } .fchart .lg.on i.bar { background:var(--chart-a); } .fchart .lg.on i.dot { background:var(--chart-b); border-radius:50%; } .fchart .pnl { font-size:8.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; fill:var(--ink-faint); text-anchor:start; } /* two managers: colour says who, and the panels say which measure */ .cmpchart .barA, .cmpchart .mkA { fill:var(--chart-a); } .cmpchart .barB, .cmpchart .mkB { fill:var(--chart-b); } .cmpchart .mkA, .cmpchart .mkB { stroke:var(--card-bg); stroke-width:1.4; vector-effect:non-scaling-stroke; } .cmpchart .lnA { fill:none; stroke:var(--chart-a); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; } .cmpchart .lnB { fill:none; stroke:var(--chart-b); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; } .cmpchart .dlW { fill:var(--ink); text-anchor:middle; } .cmpchart .lg.a.on i { background:var(--chart-a); } .cmpchart .lg.b.on i { background:var(--chart-b); } /* one gameweek is a number, not a line */ .sparkone { display:flex; align-items:baseline; gap:10px; } .sparkone .v { font-size:30px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; } .sparkone .l { font-size:11.5px; color:var(--ink-faint); } /* ---- profile: the prize table ------------------------------------------ */ /* Four columns on a phone: the competition keeps its name on one line where there is room, the position column is only as wide as its number, and the XP on the right must never run under the card's edge — so the cells give up padding first, and the "pts clear" line wraps before anything else does. */ table.t.prizetbl td { vertical-align:middle; white-space:nowrap; padding:10px 10px; } @media (max-width:389px) { table.t.prizetbl td { padding:10px 8px; } table.t.prizetbl td.pcomp { min-width:100px; } table.t.prizetbl td.ppos { width:auto; } table.t.prizetbl .prize { font-size:12.5px; } } table.t.prizetbl td.pcomp { white-space:normal; min-width:118px; } /* The "+32 pts clear of 45th" line is the one cell that can give: on a phone it wraps rather than the XP on its right running under the card's edge. */ table.t.prizetbl td.pstate .mgr { white-space:normal; } table.t.prizetbl td.pprize { white-space:nowrap; } table.t.prizetbl td.pcomp b { font-size:13.5px; } table.t.prizetbl td.ppos { font-size:15px; font-weight:800; width:46px; } table.t.prizetbl td.pstate .mgr { margin-top:2px; } table.t.prizetbl .mgr { font-size:10.5px; } /* Data older than the updater's ten minutes: said plainly rather than left to be noticed. Bright enough to read as a warning on the bar's dark purple. */ .barsub .syncago.stale { color:#ffd166; font-weight:800; } .topbar .barsub .syncago.stale { color:#ffd166; } /* the deadline matters more than the sync age when the bar is tight, but a warning that the numbers are old is never the half to drop */ @media (max-width:349px) { .barsub .syncago { display:none; } .barsub .syncago.stale { display:inline; } } /* ---- knockout bracket -------------------------------------------------- */ .korow { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; } .kobody { display:flex; flex-direction:column; gap:8px; } .tie { display:flex; align-items:stretch; gap:10px; } .tie .tn { flex:none; width:22px; display:grid; place-items:center; font-size:10.5px; font-weight:800; color:var(--ink-faint); font-variant-numeric:tabular-nums; } .tie .ts { flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--radius-xs); overflow:hidden; } .tie .side { display:flex; align-items:baseline; gap:8px; padding:7px 10px; } .tie .side + .side { border-top:1px solid var(--line); } .tie .side[data-entry] { cursor:pointer; } .tie .side[data-entry]:hover .nm { color:var(--accent); } .tie .nm { flex:1; min-width:0; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tie .sd { flex:none; font-size:10px; font-weight:700; color:var(--ink-faint); } .tie.pending .nm { color:var(--ink-faint); font-weight:600; font-style:italic; } /* The price table carries seven columns, six of them numeric. On a 320px phone the generic table metrics push the last two off the edge — and those two are the whole point of the table — so it gets its own tighter spacing. Every column but the player is centred: they are short readings of one thing each, and centring keeps six of them evenly spaced across a narrow screen where right-alignment would bunch them against their neighbours. */ table.t.pricetbl { width:100%; table-layout:auto; } table.t.pricetbl th, table.t.pricetbl td { padding:9px 3px; } table.t.pricetbl td.num, table.t.pricetbl th.num { text-align:center; } .freeze table.t.pricetbl th:first-child, .freeze table.t.pricetbl td:first-child { padding-left:9px; } .freeze table.t.pricetbl th:last-child, .freeze table.t.pricetbl td:last-child { padding-right:9px; } table.t.pricetbl th { font-size:9px; letter-spacing:.2px; } table.t.pricetbl td.num { font-size:12.5px; } table.t.pricetbl .move { font-size:11.5px; white-space:nowrap; } /* A long surname must give way rather than push the last column off the edge — the position and club underneath still say who this is. */ table.t.pricetbl td.name { min-width:0; max-width:76px; white-space:nowrap; } table.t.pricetbl td.name .who, table.t.pricetbl td.name .mgr { display:block; overflow:hidden; text-overflow:ellipsis; } table.t.pricetbl td.name .who { font-size:13px; } table.t.pricetbl td.name .mgr { font-size:10px; } /* How fast, and when. The rate takes the same up/down colours as the bar, so a glance down the two columns tells one story rather than two. */ table.t.pricetbl .rate { font-variant-numeric:tabular-nums; font-weight:600; } /* Its own pair rather than the app's --good/--bad, which are tuned for badges and larger type: at this size on this row they read 3.5:1 and 4.5:1. These two are matched to each other in lightness — 0.51 against 0.52 in light, 0.72 against 0.72 in dark, where they are the same two colours the bar wears once a change is due — and clear 5.4:1 at their worst. */ table.t.pricetbl .rate.up { color:var(--rate-up); } table.t.pricetbl .rate.down { color:var(--rate-down); } /* The dash is a reading too — "nothing expected" — so it has to clear the same bar as the figures. The app's faint ink sits just under it on a dark row. */ table.t.pricetbl .rate.flat, table.t.pricetbl .due.flat { color:var(--dash); font-weight:500; } table.t.pricetbl .due { font-size:11px; font-weight:600; color:var(--ink-soft); } /* The night it actually happens is the one worth spotting from across the table. Not the plain accent: at 11px on a dark row that reads 4.2:1, so this is the same pink lifted until it clears 5.4:1. */ table.t.pricetbl .due.soon { color:var(--due-soon); font-weight:800; } /* Seven columns only fit a phone in their short wording — "GO", "Prog", "Tmrw" — so that is the default and the full words come back when there is room. Headers carry the full name as their label either way, so nothing a screen reader announces is ever the abbreviation. */ table.t.pricetbl .lw { display:none; } table.t.pricetbl .sw { display:inline; } /* Tap a header to sort by it; tap again to reverse. The arrow only shows on the column actually in use, and it reserves its width either way so the columns do not shift as the sort moves between them. */ table.t th.sortable { cursor:pointer; user-select:none; -webkit-user-select:none; white-space:nowrap; position:relative; } table.t th.sortable:hover, table.t th.sortable:focus-visible { color:var(--accent); outline:none; } table.t th.sortable.sorted { color:var(--accent); } table.t th.sortable .sarrow { display:inline-block; margin-left:2px; font-size:10px; font-weight:700; } /* Reserving the arrow's width on all five headers costs more than a 320px screen has to give, so only the column wearing it pays for it. */ table.t th.sortable .sarrow:empty { display:none; } /* The very narrow phones (320px) need a little more give still: the surname gives up more of itself, and "Tomorrow" becomes "Tmrw" rather than the last column falling off the edge. */ @media (max-width:360px) { table.t.pricetbl td.name { max-width:62px; } table.t.pricetbl th, table.t.pricetbl td { padding:9px 2px; } table.t.pricetbl th { font-size:8.5px; letter-spacing:0; } table.t.pricetbl td.num { font-size:11.5px; } table.t.pricetbl .move { font-size:10.5px; } table.t.pricetbl .due { font-size:10.5px; } } /* Each step up spends the room it has on the surname first, which is the only thing here that was ever being cut. The full header wordings cost about 90px across six columns, so they wait until the card can carry them — which is a good deal wider than the screen, the card being inset either side. */ @media (min-width:400px) { table.t.pricetbl th, table.t.pricetbl td { padding:10px 5px; } table.t.pricetbl td.name { max-width:96px; } table.t.pricetbl td.num { font-size:13px; } table.t.pricetbl th { font-size:9.5px; } } @media (min-width:640px) { table.t.pricetbl th, table.t.pricetbl td { padding:10px 7px; } table.t.pricetbl td.name { max-width:150px; } table.t.pricetbl td.name .who { font-size:14px; } table.t.pricetbl td.num, table.t.pricetbl .move { font-size:13.5px; } table.t.pricetbl th { font-size:10px; letter-spacing:.3px; } table.t.pricetbl .due { font-size:12px; } table.t.pricetbl .lw { display:inline; } table.t.pricetbl .sw { display:none; } } @media (min-width:860px) { table.t.pricetbl th, table.t.pricetbl td { padding:10px 9px; } table.t.pricetbl td.name { max-width:240px; } } /* a decision the league still has to make, not a state of the data */ .callout.warn-callout { border-color:var(--accent); background:var(--accent-tint); } .callout.warn-callout b { color:var(--accent); } /* ---------- rules pages ------------------------------------------------ */ /* A competition's rules read as prose, not as a settings screen: a lede, then what you have to do, then what happens when two managers cannot be split. */ .rulelede { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: -2px 2px 14px; max-width: 62ch; } .rulelist { list-style: none; margin: 0; padding: 0; } .rulelist li { position: relative; padding-left: 18px; margin-bottom: 10px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); } .rulelist li:last-child { margin-bottom: 0; } .rulelist li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--line-strong); } .rulelist b { color: var(--ink); font-weight: 600; } /* The tie-break chain is numbered because the order is the rule. The last step is what applies when nothing has separated them, so it is marked, not numbered. */ .rulechain { list-style: none; margin: 0; padding: 0 0 0 2px; counter-reset: rc; border-left: 1.5px solid var(--line); } .rulechain li { counter-increment: rc; position: relative; padding: 0 0 14px 30px; font-size: 13.5px; line-height: 1.6; } .rulechain li:last-child { padding-bottom: 0; } .rulechain li::before { content: counter(rc); position: absolute; left: -10px; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--glass); border: 1.5px solid var(--line-strong); color: var(--ink-soft); font-size: 10px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; } .rulechain li.end::before { content: "\2192"; border-color: var(--accent); color: var(--accent); font-size: 11px; } .rulechain .rc-t { display: block; font-weight: 700; color: var(--ink); } .rulechain .rc-s { display: block; color: var(--ink-soft); margin-top: 1px; } /* ---------- rules overview: the whole season on one page --------------- */ /* Where the money goes. The bar is each competition against the biggest, so the shape of the pot is readable before any number is. */ .potlist { display: flex; flex-direction: column; gap: 2px; } .potrow { display: grid; grid-template-columns: 1fr 78px; grid-template-areas: "name amount" "bar bar" "paid paid"; gap: 3px 10px; align-items: center; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 10px; padding: 9px 10px; cursor: pointer; font: inherit; color: inherit; } .potrow:hover, .potrow:focus-visible { background: var(--chip); outline: none; } .potrow:focus-visible { box-shadow: 0 0 0 2px var(--accent); } .pr-n { grid-area: name; font-weight: 700; font-size: 14px; } .pr-a { grid-area: amount; text-align: right; font-weight: 700; font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; } .pr-bar { grid-area: bar; height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; } .pr-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); opacity: .75; } .pr-p { grid-area: paid; font-size: 11.5px; color: var(--ink-faint); } /* One card per competition, and the way into its own rules. */ .compcard { display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; cursor: pointer; box-shadow: var(--glass-shadow); } .compcard:hover, .compcard:focus-visible { border-color: var(--accent); outline: none; } .cc-h { display: flex; align-items: baseline; gap: 10px; } .cc-n { font-weight: 700; font-size: 15px; flex: 1; } .cc-a { font-weight: 700; font-size: 13.5px; color: var(--accent); font-variant-numeric: tabular-nums; } .cc-s { font-size: 13px; line-height: 1.55; color: var(--ink-soft); } .cc-go { font-size: 11.5px; font-weight: 700; color: var(--accent); letter-spacing: .01em; } /* The league's own wording, kept exactly as written. */ ol.verbatim { list-style: none; margin: 0; padding: 0; counter-reset: vr; } ol.verbatim li { counter-increment: vr; position: relative; padding-left: 26px; margin-bottom: 13px; } ol.verbatim li:last-child { margin-bottom: 0; } ol.verbatim li::before { content: counter(vr); position: absolute; left: 0; top: 1px; font-size: 11px; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; } ol.verbatim b { display: block; font-size: 13.5px; font-weight: 700; } ol.verbatim span { display: block; font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-top: 2px; } /* The league and the app are two different credits, so they read as two. */ .credit { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; } .credit + .credit { border-top: 1px solid var(--line); } .cr-l { flex: none; width: 70px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); } .cr-b { flex: 1; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); } .cr-b b { color: var(--ink); font-weight: 700; } @media (max-width: 420px) { .credit { flex-direction: column; gap: 3px; } .cr-l { width: auto; } } /* ---------- head-to-head fixtures ------------------------------------- */ .fxwrap { display: flex; flex-direction: column; } .fxg { position: sticky; top: 0; z-index: 2; background: var(--head-solid); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 9px 14px 7px; border-bottom: 1px solid var(--line); } .fxgrp { padding: 2px 0; } /* Manager over team on each side, score in the middle, gameweek underneath. */ .fx { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 10px; row-gap: 6px; padding: 14px 12px 12px; } /* An inset hairline between matches, not a full-width rule. */ .fxgrp .fx + .fx::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: var(--line); } .fxs { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fxs[data-entry] { cursor: pointer; } .fxs.l { text-align: right; } .fxs.r { text-align: left; } .fxm { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fxt { font-size: 11.5px; font-weight: 500; color: var(--ink-faint); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fxsc { flex: none; display: flex; align-items: stretch; align-self: center; background: var(--pill-bg); color: #fff; border-radius: 9px; overflow: hidden; min-width: 74px; } .fxp { flex: 1; padding: 7px 9px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .fxp + .fxp { border-left: 1px solid rgba(255,255,255,.28); } .fxp.lost { color: rgba(255,255,255,.55); font-weight: 600; } .fxsc.ahead { background: var(--chip); color: var(--ink-faint); } .fxv { flex: 1; padding: 7px 9px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; line-height: 1.5; } .fxw { grid-column: 1 / -1; text-align: center; font-size: 11px; font-weight: 500; color: var(--ink-faint); } .fx.ahead .fxm { color: var(--ink-soft); } /* on my banner the type stays white even for a fixture still to come (this sits after the .ahead rule on purpose — source order decides) */ .fx.mine.ahead .fxm { color:#fff; } /* the Premier League scoreboard: a day header inside each card, and the running minute in the caption picked out in the gain color */ .plday { padding: 12px 14px 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; } .fxw .golive { color: var(--good); font-weight: 700; } /* The gameweek's shape: one row per band, the bar carrying the comparison so the eye finds the fat middle without reading a single number. */ table.t.bktbl td.bkband { font-weight:700; white-space:nowrap; } table.t.bktbl th.bkbarh { width:45%; } table.t.bktbl td.bkbar { padding:0 8px; } table.t.bktbl td.bkbar span { display:block; height:10px; border-radius:5px; min-width:2px; background:linear-gradient(90deg, var(--accent-2), var(--accent)); } table.t.bktbl tr.me td.bkbar span { background:linear-gradient(90deg, var(--gold), #e6a417); } /* the caption under the table sits against the card wall without this */ .bknote { margin:6px 14px 0; } /* ---- winnings ---------------------------------------------------------- One row per manager who has actually been paid, most first. The breakdown sits under the name rather than in columns of its own: a manager can win several things and the list has to hold them all on a phone. */ table.t.wintbl { width:100%; table-layout:auto; } table.t.wintbl th, table.t.wintbl td { padding:11px 6px; vertical-align:top; } table.t.wintbl th.pos, table.t.wintbl td.pos { width:1%; text-align:right; padding-left:12px; font-size:12px; font-weight:800; color:var(--ink-faint); font-variant-numeric:tabular-nums; } table.t.wintbl td.name { white-space:normal; min-width:0; } table.t.wintbl td.name .who { display:block; font-size:14px; font-weight:700; } table.t.wintbl td.name .mgr { font-size:11.5px; } table.t.wintbl td.num { text-align:right; white-space:nowrap; padding-right:12px; } table.t.wintbl .prize { font-size:15px; font-weight:800; } table.t.wintbl td.num .mgr { font-size:10.5px; margin-top:1px; } /* what each amount was won for */ .wfor { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; } .wtag { display:inline-flex; align-items:baseline; gap:4px; max-width:100%; font-size:10.5px; line-height:1.5; color:var(--ink-soft); background:var(--chip); border:1px solid var(--line); border-radius:999px; padding:2px 8px; } .wtag b { font-weight:800; color:var(--ink); } .wtag i { font-style:normal; font-weight:800; color:var(--gold); } /* nothing settled yet — a state, not an empty page */ .wnone b { display:block; font-size:15px; margin-bottom:6px; } .wnone p { margin:0 0 8px; font-size:13px; color:var(--ink-soft); line-height:1.5; } .wnone p:last-child { margin-bottom:0; } /* ---- the Premier League table ------------------------------------------ Eleven columns is more than a phone has. Played, goal difference and points always show, because they are what the table is for; won/drawn/lost and the goals either way can be worked out from each other, so they wait for room. The user asked for no sideways scroll on the price table and the same holds here — measured at every width from 320 up. */ table.t.pltbl { width:100%; table-layout:auto; } table.t.pltbl th, table.t.pltbl td { padding:9px 3px; } table.t.pltbl th { font-size:9px; letter-spacing:.2px; } table.t.pltbl td.num, table.t.pltbl th.num { text-align:center; font-variant-numeric:tabular-nums; } table.t.pltbl td.num { font-size:12.5px; } table.t.pltbl .pts { font-weight:800; } /* the position, and the band that says where the club sits */ table.t.pltbl th.pos, table.t.pltbl td.pos { width:1%; text-align:right; padding-left:9px; font-size:11.5px; font-weight:700; color:var(--ink-faint); font-variant-numeric:tabular-nums; } table.t.pltbl td.name { min-width:0; max-width:96px; white-space:nowrap; } table.t.pltbl td.name .who { display:block; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; } /* A 3px edge rather than a whole tinted row: twenty rows of wash would fight the numbers, and the edge is what a league table actually uses. */ table.t.pltbl tr.plrow td.pos { border-left:3px solid transparent; } table.t.pltbl tr.plrow.top td.pos { border-left-color:var(--good); } table.t.pltbl tr.plrow.drop td.pos { border-left-color:var(--bad); } /* last five, newest last */ .l5 { display:inline-flex; gap:2px; align-items:center; } .l5r { width:13px; height:13px; border-radius:50%; flex:none; font-style:normal; font-size:8px; font-weight:800; line-height:13px; text-align:center; } .l5r.w { background:var(--good); color:#fff; } .l5r.l { background:var(--bad); color:#fff; } .l5r.d { background:var(--ink-faint); color:#fff; } .l5r.none { background:var(--chip); border:1px solid var(--line); } @media (max-width:359px) { table.t.pltbl th, table.t.pltbl td { padding:9px 2px; } table.t.pltbl td.name { max-width:74px; } table.t.pltbl .c-w, table.t.pltbl .c-d, table.t.pltbl .c-l { display:none; } } @media (max-width:520px) { table.t.pltbl .c-gf, table.t.pltbl .c-ga { display:none; } } /* The form run only goes when the club names would start losing letters for it — measured, not assumed: the name column carries the slack, so at 360 and up it can give the run its 45px and still print every club in full. */ @media (max-width:359px) { table.t.pltbl .c-l5 { display:none; } } @media (min-width:560px) { table.t.pltbl th, table.t.pltbl td { padding:10px 7px; } table.t.pltbl td.name { max-width:none; } table.t.pltbl th { font-size:10px; } table.t.pltbl td.num { font-size:13.5px; } } /* the toggle spans the card, so Fixtures and Table read as one control */ .pseg.psegwide { width:100%; max-width:320px; } .pseg.psegwide button { flex:1 1 0; padding:7px 10px; } .plnav { display:flex; align-items:center; justify-content:center; gap:10px; margin:2px 0 14px; } .plnav h2 { margin:0; min-width:170px; text-align:center; } .gwarr { width:36px; height:36px; border-radius:50%; flex:none; cursor:pointer; border:1px solid var(--line); background:var(--chip); color:var(--ink); font-size:20px; line-height:1; padding-bottom:3px; } .gwarr:disabled { opacity:.35; cursor:default; } @media (max-width: 360px) { .fx { column-gap: 6px; padding: 12px 8px 10px; } .fxm { font-size: 12.5px; } .fxt { font-size: 10.5px; } .fxsc { min-width: 64px; } .fxp { padding: 6px 6px; font-size: 14px; } } /* The head-to-head record strip on a manager's profile. */ .h2hsum { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); } .h2hst { padding: 11px 4px 9px; text-align: center; min-width: 0; } .h2hst + .h2hst { border-left: 1px solid var(--line); } .h2hst .hv { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); } .h2hst .hl { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; } @media (max-width: 340px) { .h2hst .hv { font-size: 14px; } .h2hst .hl { font-size: 9px; } } /* the profile's season of head-to-heads, folded to this gameweek */ .fxgrp[hidden] { display:none; } .fxtoggle { display:block; width:100%; appearance:none; border:0; border-top:1px solid var(--line); background:transparent; color:var(--accent); font-family:inherit; font-size:12.5px; font-weight:700; padding:11px 8px; cursor:pointer; } /* the tap-a-player points breakdown */ .pcard[data-el] { cursor:pointer; } .bdtbl { width:100%; } .bdtbl td, .bdtbl th { padding:10px 8px; } .bdtbl .bdtotal td { border-top:2px solid var(--line-strong); font-weight:700; } /* chip pills that open the who-played-it page */ button.chipgo { cursor:pointer; font:inherit; font-size:12px; border:1px solid var(--gold); } /* a Premier League fixture opened: the two squads side by side */ .fx.tap { cursor:pointer; } .mhead { padding:0; overflow:hidden; } .mcols { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:start; } .mcol, .mcols > .card + .card { margin:0; padding:0; overflow:hidden; min-width:0; } .mclub { display:flex; align-items:baseline; justify-content:space-between; gap:6px; padding:10px 10px 8px; border-bottom:1px solid var(--line-strong); } .mclub b { font-size:13px; font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mtot { flex:none; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--accent); } .mrow { display:flex; align-items:center; gap:5px; padding:9px 10px; min-width:0; border-bottom:1px solid var(--line); cursor:pointer; } .mrow:last-child { border-bottom:0; } .mrow:active { background:var(--glass-hi); } .mn { flex:1 1 auto; min-width:0; font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mpos { flex:none; font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--ink-faint); } .mv { flex:none; min-width:30px; text-align:right; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; } .mrow.dim .mn, .mrow.dim .mv { color:var(--ink-faint); font-weight:600; } .mrest { border-top:1px solid var(--line); } .mcols + .koline { margin-top:14px; } .mrest summary { list-style:none; cursor:pointer; padding:9px 10px; font-size:11.5px; font-weight:700; color:var(--ink-soft); user-select:none; } .mrest summary::-webkit-details-marker { display:none; } .mrest summary::after { content:" ▾"; } .mrest[open] summary::after { content:" ▴"; } .mrest[open] summary { border-bottom:1px solid var(--line); } @media (max-width: 359px) { .mpos { display:none; } .mrow { padding:9px 7px; } .mclub { padding:9px 7px 7px; } .mn { font-size:12px; } } /* how far along each gameweek is: green done, red not yet */ .gwsteps { padding: 4px 0; } .gwstep { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); } .gwstep:last-child { border-bottom: 0; } .gwmark { flex: none; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; background: var(--bad-wash); color: var(--bad); } .gwstep.on .gwmark { background: var(--good-wash); color: var(--good); } .gwlab { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; } .gwwhen { display: block; font-size: 11px; font-weight: 600; color: var(--ink-faint); margin-top: 2px; font-variant-numeric: tabular-nums; } .gwwhen.est { font-style: italic; } .gwyn { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--bad); } .gwstep.on .gwyn { color: var(--good); } .gwfoot { padding: 11px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); } /* the information button beside a card's title */ .hinfo { appearance: none; border: 0; background: transparent; padding: 0; margin-left: 7px; color: var(--ink-faint); cursor: pointer; line-height: 0; flex: none; } .hinfo:active { color: var(--accent); } /* what the steps and badges mean, read once */ .gwh4 { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 16px 0 8px; } .gwh4:first-child { margin-top: 0; } .gwdl { margin: 0; } .gwdl dt { font-size: 13px; font-weight: 700; margin-top: 10px; } .gwdl dt:first-child { margin-top: 0; } .gwdl dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); } /* the two or three days a gameweek is played over, each clearing on its own */ .gwday { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); } .gwday:last-child { border-bottom: 0; } .gwdn { flex: 1 1 auto; min-width: 0; } .gwdn b { display: block; font-size: 13px; font-weight: 700; } .gwdm { display: block; font-size: 11px; font-weight: 600; color: var(--ink-faint); margin-top: 1px; } .gwpill { flex: none; padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: var(--bad-wash); color: var(--bad); } .gwday.on .gwpill { background: var(--good-wash); color: var(--good); } .gwnote { margin-top: 12px; } @media (max-width: 359px) { .gwstep, .gwday { padding: 11px 12px; } .gwlab { font-size: 12.5px; } .gwpill { padding: 5px 9px; font-size: 10px; } } /* the field as a shape: how many managers landed in each band of points */ .sprlead { padding: 12px 16px 10px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); border-bottom: 1px solid var(--line); } .sprow { display: flex; align-items: center; gap: 9px; padding: 7px 16px; } .sprow.me { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); } .sprg { flex: none; width: 68px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-soft); } .sprb { flex: 1 1 auto; min-width: 0; height: 15px; border-radius: 4px; background: var(--glass-hi); overflow: hidden; } .sprb i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .sprn { flex: none; min-width: 46px; text-align: right; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .sprme { display: block; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .sprfoot { padding: 11px 16px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.45; color: var(--ink-faint); } @media (max-width: 359px) { .sprow { padding: 7px 11px; gap: 7px; } .sprg { width: 62px; font-size: 11px; } .sprn { min-width: 40px; } } /* the squad that is coming: a list, because the transfer log names who is in and out and nothing about the eleven, the captain or the bench order */ .pendhd { display:flex; align-items:center; gap:9px; padding:2px 0 10px; } .pendhd b { font-size:15px; font-weight:800; } .pendmeta { font-size:11.5px; font-weight:600; color:var(--ink-faint); padding-bottom:10px; border-bottom:1px solid var(--line); } .pdgrp { padding-top:10px; } .pdgrp .lab-sm { margin-bottom:2px; } .pdrow { display:flex; align-items:center; gap:8px; padding:8px 2px; border-bottom:1px solid var(--line); } .pdrow:last-child { border-bottom:0; } .pdn { flex:1 1 auto; min-width:0; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pdnew { display:inline-block; margin-left:6px; padding:1px 5px; border-radius:4px; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:var(--good-wash); color:var(--good); vertical-align:1px; } .pdt { flex:none; font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--ink-faint); } .pdp { flex:none; min-width:52px; text-align:right; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; } .pdmv { flex:none; font-style:normal; font-size:10px; font-weight:800; padding:1px 4px; border-radius:4px; font-variant-numeric:tabular-nums; } .pdmv.up { color:var(--good); box-shadow:inset 0 0 0 1px var(--good); } .pdmv.down { color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad); } .pdmv.soon.up { background:var(--good); color:var(--on-accent); box-shadow:none; } .pdmv.soon.down { background:var(--bad); color:var(--on-accent); box-shadow:none; } .pdio { padding-top:12px; border-top:1px solid var(--line); margin-top:10px; } .pdswap { display:flex; align-items:center; gap:8px; padding:6px 2px; font-size:12.5px; } .pdin { font-weight:800; color:var(--good); } .pdarr { color:var(--ink-faint); } .pdout { font-weight:600; color:var(--ink-soft); text-decoration:line-through; } .pendnote { margin-top:12px; } @media (max-width: 359px) { .pdt { display:none; } .pdp { min-width:46px; font-size:12px; } } /* ---- the season's player leaderboards ---------------------------------- Ten small tables, each a rank, a name and three numbers. The name takes whatever the numbers leave, so a long one ellipses rather than pushing a column off a narrow screen. */ table.t.psbtbl { width:100%; table-layout:auto; } table.t.psbtbl th, table.t.psbtbl td { padding:8px 4px; } table.t.psbtbl th:first-child, table.t.psbtbl td:first-child { padding-left:12px; } table.t.psbtbl th:last-child, table.t.psbtbl td:last-child { padding-right:12px; } table.t.psbtbl th { font-size:9.5px; letter-spacing:.2px; } table.t.psbtbl th.num, table.t.psbtbl td.num { text-align:center; white-space:nowrap; } table.t.psbtbl td.num { font-size:12.5px; font-variant-numeric:tabular-nums; } table.t.psbtbl td.pos { width:1%; font-size:12px; font-weight:700; color:var(--ink-faint); } table.t.psbtbl td.name { min-width:0; max-width:120px; white-space:nowrap; } table.t.psbtbl td.name .who, table.t.psbtbl td.name .mgr { display:block; overflow:hidden; text-overflow:ellipsis; } table.t.psbtbl td.name .who { font-size:13px; font-weight:600; } table.t.psbtbl td.name .mgr { font-size:10px; } table.t.psbtbl .move { font-size:11.5px; white-space:nowrap; } table.t.psbtbl tbody tr { cursor:pointer; } table.t.psbtbl td.psnone { text-align:center; color:var(--ink-faint); font-size:12.5px; padding:14px 12px; } /* the caption under each board, off the card wall like the bucket table's */ .psnote { margin:8px 14px 12px; } /* ---- player faces ------------------------------------------------------- Our own copies of the league's cut-out portraits, 110x140 with a transparent background. Every one of them is decoration over something that already works: the pitch keeps its jersey underneath, a table row keeps its initials. Nothing here sets a size that depends on the picture arriving, so a face that never loads leaves the layout exactly where it was. */ .pshirt { position:relative; } /* Cropped to the head and shoulders: the whole portrait at this size is a thumbnail of a man standing in a field. It is laid over the jersey's slot rather than matched to the jersey's size — being absolutely positioned, it can be the larger of the two without the card moving when one replaces the other, which is the only thing that had to stay true. */ .pcard .facepic { position:absolute; left:50%; top:var(--face-top); transform:translateX(-50%); /* Wide enough to fill the card, but never wider than it leaves room for: four cards to a row on a 320px screen makes the card 52px, and a 48px photograph there sits two points from each edge. The gutter holds it off instead, and the compare pitch sets it to zero because its cards are narrower than the picture and are meant to fill edge to edge. */ width:min(var(--face-w), calc(100% - var(--face-gut))); height:var(--face-h); object-fit:cover; object-position:50% 6%; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); } .pcard.gone .facepic { opacity:.55; filter:grayscale(.65); } /* Once the photograph is really there the jersey has nothing left to do, and a cut-out on a transparent background would otherwise wear it as a backdrop. Hidden, not removed: the jersey is what gives the slot its height, and a card that resized when a picture arrived would be worse than the backdrop. */ .pshirt.hasface .jsy { visibility:hidden; } .face.hasface > i { visibility:hidden; } /* A row's face: initials underneath, photograph over them, one box either way. */ .face { position:relative; display:inline-block; flex:none; overflow:hidden; border-radius:50%; background:var(--chip); vertical-align:middle; } .face > i { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; color:var(--ink-faint); letter-spacing:-.02em; } .face > .facepic { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 4%; } .face.sm { width:28px; height:28px; } .face.sm > i { font-size:10.5px; } .face.lg { width:52px; height:52px; } .face.lg > i { font-size:17px; } /* The name cell that carries one. The text column can shrink; the face cannot, so a long name ellipses instead of squeezing the picture. */ .nwrap { display:flex; align-items:center; gap:9px; min-width:0; } .ntxt { min-width:0; display:block; } .ntxt .who, .ntxt .mgr { display:block; overflow:hidden; text-overflow:ellipsis; } /* Who the breakdown is about, before what he did. */ .bdwho { display:flex; align-items:center; gap:12px; margin-bottom:14px; } .bdname b { display:block; font-size:15px; font-weight:700; } .bdname span { display:block; font-size:12px; color:var(--ink-faint); margin-top:2px; } /* ---- the breakdown's two tabs ------------------------------------------ */ .bdtabs { width:100%; max-width:none; margin:0 0 14px; } .bdtabs button { flex:1 1 0; } table.t.bdhist th, table.t.bdhist td { padding:9px 6px; } table.t.bdhist th:first-child, table.t.bdhist td:first-child { padding-left:2px; } table.t.bdhist td.num { font-variant-numeric:tabular-nums; } table.t.bdhist tbody tr.bdrow { cursor:pointer; } table.t.bdhist tbody tr.bdrow.on { background:var(--chip); } /* Home or away, small enough to ride beside the club without taking a column */ .bdha { font-size:9px; font-weight:800; color:var(--ink-faint); margin-left:4px; border:1px solid var(--line); border-radius:4px; padding:0 3px; vertical-align:1px; } .bdblank { color:var(--dash); } /* the star that says a figure still has provisional bonus in it */ .bdprov { font-style:normal; color:var(--accent); font-weight:800; margin-left:2px; } /* ---- what a player is today, above his gameweeks ----------------------- */ .bdfacts { display:flex; gap:8px; margin:0 0 14px; } .bdfact { flex:1 1 0; min-width:0; background:var(--chip); border-radius:9px; padding:8px 9px; text-align:center; } .bdfact .k { font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bdfact .v { font-size:16px; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums; } .bdfact .s { font-size:9px; color:var(--ink-faint); margin-top:2px; line-height:1.25; } /* Five columns in a modal on a small phone: the padding is what gives way. */ table.t.bdhist.wgo th, table.t.bdhist.wgo td { padding:9px 3px; } table.t.bdhist.wgo th:first-child, table.t.bdhist.wgo td:first-child { padding-left:0; } /* ---- the page holds still under an overlay ------------------------------ A table scrolling away behind a player's card is disorienting, and on a phone it is what happens whenever a thumb lands outside the card. Held on the root element as well as the body, because body alone is not enough on iOS. The scroll position is restored in script when the last overlay goes. */ html.ovl, html.ovl body { overflow:hidden !important; } /* overflow alone stops a wheel but has never reliably stopped a thumb on iOS, and a thumb landing outside the card is exactly how this goes wrong. The backdrop refuses gestures outright; the card itself still takes a vertical one, because a sheet you cannot scroll is no better than one that lets the page slide away behind it. */ .modal-back { touch-action:none; } .modal-back .modal { touch-action:pan-y; } /* the information button on a player's card, out at the end of his name row */ .bdinfo { margin-left:auto; align-self:flex-start; } .bdinfo.on { color:var(--accent); } /* ---- the voluntary leagues ---------------------------------------------- Five tabs and a table, and the table gets the rest of the screen. */ .volhead { display:flex; align-items:center; gap:8px; margin-bottom:12px; } .volseg { flex:1 1 auto; min-width:0; margin:0; width:auto; max-width:none; } .volseg button { flex:1 1 0; min-width:0; padding:6px 4px; font-size:11.5px; } table.t.voltbl th, table.t.voltbl td { padding:9px 5px; } table.t.voltbl th.num, table.t.voltbl td.num { text-align:center; white-space:nowrap; } table.t.voltbl td.num { font-variant-numeric:tabular-nums; } table.t.voltbl td.name { min-width:0; } table.t.voltbl td.name .who, table.t.voltbl td.name .mgr { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }