/* The Footy King — design system. "Regal sporting almanac": midnight pitch, chalk-line texture, turf glow, royal gold, condensed poster display. Shared by every /app page (tokens + components + motion + mobile tab bar). Fonts are ed in each page (see pagekit.head). */ :root{ --bg:#05100b; --bg-2:#081a11; --panel:#0c1d14; --panel-2:#112a1d; --panel-3:#16331f; --line:#1d3a28; --line-lite:#2c4a35; --ink:#eef6ef; --ink-2:#a9c0b1; --ink-3:#6c8576; --grass:#19c06a; --grass-hi:#3ff08c; --grass-deep:#0a5e3a; --gold:#F5C542; --gold-hi:#ffd86e; --gold-2:#caa033; --pos:#3ff08c; --neg:#ff8a8a; --discord:#5865F2; --grad:linear-gradient(135deg,#0a5e3a 0%,#19c06a 52%,#F5C542 128%); --grad-gold:linear-gradient(135deg,#F5C542 0%,#ffd86e 100%); --shadow:0 18px 40px -18px rgba(0,0,0,.7); --shadow-gold:0 6px 22px -8px rgba(245,197,66,.35); --r:16px; --r-sm:10px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Archivo',system-ui,sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background-image: radial-gradient(1100px 520px at 78% -8%, rgba(25,192,106,.13), transparent 60%), radial-gradient(900px 480px at 8% 4%, rgba(245,197,66,.07), transparent 55%), linear-gradient(180deg,#05100b 0%,#040d09 100%); background-attachment:fixed; min-height:100vh; padding-bottom:env(safe-area-inset-bottom); } /* faint chalk-line / grain atmosphere */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 78px), repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 78px); mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%); } body>*{position:relative; z-index:1} .display,h1,h2,h3{font-family:'Bebas Neue',sans-serif;letter-spacing:.03em;margin:0;font-weight:400;line-height:.98} .mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em} a{color:inherit;text-decoration:none} ::selection{background:rgba(245,197,66,.3);color:#fff} /* ---------- topbar ---------- */ .topbar{display:flex;align-items:center;gap:16px;padding:14px 22px; background:linear-gradient(180deg,rgba(5,16,11,.92),rgba(5,16,11,.72)); border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60; backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)} .logo{display:flex;align-items:center;gap:11px;transition:transform .2s} .logo:hover{transform:translateY(-1px)} .crown{width:34px;height:34px;display:grid;place-items:center;border-radius:10px; background:var(--grad);font-size:19px;box-shadow:var(--shadow-gold),0 0 0 1px rgba(245,197,66,.25);color:#06140c} .name{font-family:'Bebas Neue',sans-serif;font-size:21px;letter-spacing:.13em;white-space:nowrap} .name .gold{color:var(--gold)} .nav{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap} .nav a{color:var(--ink-2);padding:8px 12px;border-radius:8px;font-size:12.5px;font-weight:700; letter-spacing:.01em;transition:background .15s,color .15s;position:relative} .nav a:hover{background:var(--panel-2);color:var(--ink)} .nav a.active{color:var(--gold)} .nav a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px; border-radius:2px;background:var(--grad-gold)} [data-auth-slot]{display:flex;gap:10px;align-items:center;margin-left:8px} .fk-discord{display:inline-flex;align-items:center;gap:7px;background:var(--discord);color:#fff;border:0; font-weight:800;font-size:12.5px;padding:9px 15px;border-radius:9px;cursor:pointer;transition:filter .15s,transform .15s} .fk-discord:hover{filter:brightness(1.1);transform:translateY(-1px)} .fk-signout{border:1px solid var(--line-lite);background:transparent;color:var(--ink-2);font-weight:700; font-size:12px;padding:7px 12px;border-radius:8px;cursor:pointer;transition:border-color .15s,color .15s} .fk-signout:hover{border-color:var(--gold-2);color:var(--ink)} .fk-user{font-weight:800;color:var(--gold);font-size:13px} /* ---------- layout ---------- */ .wrap{max-width:1120px;margin:0 auto;padding:34px 22px 96px} .hero{margin-bottom:8px} .hero h1{font-size:clamp(42px,7.5vw,82px);line-height:.92;letter-spacing:.01em} .hero h1 .gold{color:var(--gold)} .hero p{color:var(--ink-2);max-width:660px;margin:12px 0 0;font-size:16px} .sect{margin-top:38px} .sect h2{font-size:27px;letter-spacing:.05em;margin-bottom:15px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--gold);background:rgba(245,197,66,.1); border:1px solid rgba(245,197,66,.22);padding:6px 13px;border-radius:999px} /* ---------- panels / cards ---------- */ .panel{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden} .note{margin-top:28px;color:var(--ink-3);font-size:12.5px;line-height:1.7; border-top:1px solid var(--line);padding-top:18px} .note a{color:var(--grass-hi)} /* ---------- probability bars ---------- */ .bar{position:relative;height:5px;border-radius:99px;background:rgba(255,255,255,.06);margin-top:5px;overflow:hidden} .bar span{position:absolute;left:0;top:0;bottom:0;border-radius:99px;animation:grow .7s cubic-bezier(.2,.8,.2,1) both} .bar.home span,.bar.adv span{background:linear-gradient(90deg,var(--grass-deep),var(--grass))} .bar.draw span,.bar.wg span{background:var(--grad-gold)} .bar.away span{background:linear-gradient(90deg,#5d6b75,#8b99a4)} .bar.title span{background:var(--grad)} @keyframes grow{from{width:0 !important}} /* ---------- match rows (Matches page) ---------- */ .mrow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 18px; border-bottom:1px solid var(--line);transition:background .15s} .mrow:last-child{border-bottom:0}.mrow:hover{background:var(--panel-2)} .mteams{font-weight:800;font-size:15px}.mmeta{color:var(--ink-3);font-size:12px;margin-top:3px} .mprob{display:flex;gap:14px;font-size:12px;color:var(--ink-2);font-weight:700;white-space:nowrap} .mprob b{color:var(--ink);display:block;font-size:13.5px} .tag-pick{color:var(--gold);font-weight:800} /* ---------- staggered page-load reveal ---------- */ .sect,.hero,.panel{animation:rise .55s cubic-bezier(.2,.8,.2,1) both} .hero{animation-delay:.02s}.sect:nth-of-type(1){animation-delay:.08s} .sect:nth-of-type(2){animation-delay:.14s}.sect:nth-of-type(3){animation-delay:.2s} .sect:nth-of-type(4){animation-delay:.26s} @keyframes rise{from{opacity:0;transform:translateY(14px)}} @media (prefers-reduced-motion:reduce){*{animation:none !important}} /* ---------- mobile bottom tab bar (PWA shell) ---------- */ .tabbar{display:none} @media(max-width:720px){ .nav a:not(.active){display:none} /* collapse desktop links on mobile */ .nav a.active{display:none} .topbar{padding:12px 16px} .wrap{padding:24px 16px 110px} .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(8,26,17,.86),rgba(5,16,11,.97)); border-top:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; color:var(--ink-3);font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 0} .tabbar a .ti{font-size:18px;line-height:1} .tabbar a.active{color:var(--gold)} } /* ---------- generic table (Stats/Knockout) ---------- */ table.fk{width:100%;border-collapse:collapse;font-size:13px} table.fk th{position:sticky;top:0;background:var(--panel-2);color:var(--ink-3);font-size:10px; text-transform:uppercase;letter-spacing:.05em;padding:10px 10px;text-align:right;cursor:pointer; white-space:nowrap;border-bottom:1px solid var(--line)} table.fk th.l,table.fk td.l{text-align:left} table.fk th:hover{color:var(--gold)} table.fk td{padding:9px 10px;text-align:right;border-bottom:1px solid rgba(29,58,40,.5);font-variant-numeric:tabular-nums} table.fk tr:hover td{background:var(--panel-2)} /* loading shimmer for client-rendered pages */ .skel{background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 50%,var(--panel) 75%); background-size:200% 100%;animation:sh 1.3s infinite;border-radius:8px;height:14px} @keyframes sh{from{background-position:200% 0}to{background-position:-200% 0}}