/* ============================================================ PINNIE — shared design system Light theme = "Sideline" · Dark theme = "Night Match" Theme is driven by [data-theme] on . All color decisions flow through tokens so a single toggle restyles the whole app. ============================================================ */ /* ---------- TOKENS: light / Sideline (default) ---------- */ :root{ --bg:#F2EFE6; --card:#FFFFFF; --card-2:#ECE8DC; --ink:#16180F; --muted:#73776A; --line:#E3DECE; --accent:#0C9F4F; --accent-deep:#0A7E3E; --accent-2:#0A7E3E; --accent-soft:rgba(12,159,79,.14); --brand:#FFFFFF; --header-bg:linear-gradient(140deg,#0A7E3E,#0C9F4F); --header-fg:#FFFFFF; --chalk:rgba(255,255,255,.55); --chip-bg:rgba(255,255,255,.18); --chip-border:rgba(255,255,255,.30); --seg-bg:#E3DECE; --seg-active-bg:#FFFFFF; --seg-active-fg:#16180F; --knob-bg:#F2EFE6; --knob-border:#E3DECE; --knob-fg:#16180F; --bignum:#16180F; --bignum-shadow:none; --plan-bg:#15180F; --plan-fg:#FFFFFF; --plan-accent:#7ff0a6; --plan-border:transparent; --btn-bg:linear-gradient(135deg,#0C9F4F,#0A7E3E); --btn-fg:#FFFFFF; --btn-glow:0 12px 26px -10px rgba(12,159,79,.7); --tab-bg:rgba(255,255,255,.94); --tab-active:#0A7E3E; --tab-active-bg:rgba(12,159,79,.14); --team-border:transparent; /* JS adds glow + border in dark */ --match-bg:linear-gradient(140deg,#15180F,#23271c); /* subs header (dark in both) */ --shadow:0 1px 0 rgba(0,0,0,.04),0 8px 24px -12px rgba(20,30,18,.35); --display:'Anton','Hanken Grotesk',system-ui,sans-serif; --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif; } /* ---------- TOKENS: dark / Night Match ---------- */ :root[data-theme="dark"]{ --bg:#070D0A; --card:#0E1813; --card-2:#13211A; --ink:#EAF3EC; --muted:#7E8E84; --line:rgba(255,255,255,.10); --accent:#C6FF3D; --accent-deep:#A6E000; --accent-2:#19E0A0; --accent-soft:rgba(198,255,61,.16); --brand:#C6FF3D; --header-bg:linear-gradient(140deg,#0B1611,#11201A); --header-fg:#EAF3EC; --chalk:rgba(198,255,61,.22); --chip-bg:rgba(198,255,61,.07); --chip-border:rgba(198,255,61,.40); --seg-bg:#0E1813; --seg-active-bg:#C6FF3D; --seg-active-fg:#08120A; --knob-bg:rgba(198,255,61,.05); --knob-border:rgba(198,255,61,.45); --knob-fg:#C6FF3D; --bignum:#EAF3EC; --bignum-shadow:0 0 24px rgba(198,255,61,.25); --plan-bg:linear-gradient(135deg,#13211A,#0E1813); --plan-fg:#EAF3EC; --plan-accent:#19E0A0; --plan-border:rgba(25,224,160,.25); --btn-bg:linear-gradient(135deg,#C6FF3D,#A6E000); --btn-fg:#07120A; --btn-glow:0 0 36px -6px rgba(198,255,61,.6); --tab-bg:rgba(8,14,10,.92); --tab-active:#C6FF3D; --tab-active-bg:rgba(198,255,61,.16); --team-border:rgba(255,255,255,.12); --match-bg:linear-gradient(140deg,#0B1611,#11201A); --shadow:0 1px 0 rgba(0,0,0,.2),0 10px 26px -14px rgba(0,0,0,.7); } /* ---------- base ---------- */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%} body{font-family:var(--body);color:var(--ink);background:var(--bg);display:flex;justify-content:center; overscroll-behavior:none;transition:background .25s,color .25s} a{text-decoration:none;color:inherit} .app{width:100%;max-width:440px;min-height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--bg)} /* ---------- header ---------- */ .hdr{position:relative;padding:calc(18px + env(safe-area-inset-top)) 20px 16px;color:var(--header-fg);background:var(--header-bg);overflow:hidden} .hdr--pitch::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none; background:radial-gradient(circle at 50% -34px,transparent 90px,var(--chalk) 91px,var(--chalk) 93px,transparent 94px); -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)} .brand{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1} .logo{display:flex;align-items:center;gap:9px} .logo svg{width:25px;height:29px} .logo svg path{fill:var(--brand)} .logo b{font-family:var(--display);font-size:25px;letter-spacing:.06em;line-height:1;color:var(--brand)} :root[data-theme="dark"] .logo b{text-shadow:0 0 14px rgba(198,255,61,.45)} .hdr-right{display:flex;align-items:center;gap:9px;position:relative;z-index:1} .chip{display:flex;align-items:center;gap:7px;background:var(--chip-bg);border:1px solid var(--chip-border); padding:7px 12px;border-radius:999px;font-weight:700;font-size:13.5px;cursor:pointer;color:var(--header-fg);backdrop-filter:blur(4px)} .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--chip-bg)} .theme-toggle{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;font-size:17px; background:var(--chip-bg);border:1px solid var(--chip-border);cursor:pointer;color:var(--header-fg)} .lede{position:relative;z-index:1;margin-top:16px;font-family:var(--display);font-size:30px;line-height:.98;letter-spacing:.01em} .lede small{display:block;font-family:var(--body);font-weight:600;font-size:13px;opacity:.86;letter-spacing:0;margin-top:6px} /* ---------- main ---------- */ main{padding:18px 16px 110px;display:flex;flex-direction:column;gap:14px} /* ---------- segmented control ---------- */ .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--seg-bg);padding:5px;border-radius:16px} .seg button{border:0;background:transparent;padding:11px 6px;border-radius:12px;cursor:pointer;font-family:var(--body); font-weight:700;font-size:13.5px;color:var(--muted);transition:.18s;display:flex;flex-direction:column;align-items:center;gap:3px} .seg button .ic{font-size:18px;line-height:1} .seg button.on{background:var(--seg-active-bg);color:var(--seg-active-fg);box-shadow:var(--shadow)} :root[data-theme="dark"] .seg button.on{box-shadow:0 0 20px -4px rgba(198,255,61,.55)} /* ---------- stepper ---------- */ .stepper{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow); padding:18px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:4px} .stepper .row{display:flex;align-items:center;gap:18px} .knob{width:64px;height:64px;border-radius:50%;border:2px solid var(--knob-border);background:var(--knob-bg); font-size:32px;font-weight:700;color:var(--knob-fg);cursor:pointer;display:grid;place-items:center;transition:.12s;user-select:none} .knob:active{transform:scale(.92);filter:brightness(.95)} .bignum{font-family:var(--display);font-size:84px;line-height:.85;min-width:96px;text-align:center;color:var(--bignum);text-shadow:var(--bignum-shadow)} .what{font-weight:700;color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.08em} /* ---------- plan summary ---------- */ .plan{background:var(--plan-bg);color:var(--plan-fg);border:1px solid var(--plan-border);border-radius:20px; padding:16px 18px;display:flex;align-items:center;gap:14px} .plan .big{font-family:var(--display);font-size:46px;line-height:.85;color:var(--plan-accent)} .plan .txt{font-weight:600;font-size:15px;line-height:1.25} .plan .txt b{color:var(--plan-accent)} .plan .sub{display:block;font-weight:500;font-size:12.5px;opacity:.72;margin-top:3px;color:var(--plan-fg)} /* ---------- fill toggle row ---------- */ .fillrow{display:flex;align-items:center;justify-content:space-between;padding:2px 4px} .fillrow span{font-weight:600;font-size:13.5px;color:var(--muted)} .toggle{width:46px;height:27px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:.18s;border:0} .toggle::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s} .toggle.on{background:var(--accent)} .toggle.on::after{transform:translateX(19px)} /* ---------- primary button ---------- */ .generate{border:0;cursor:pointer;width:100%;padding:20px;border-radius:20px;color:var(--btn-fg);background:var(--btn-bg); font-family:var(--display);font-size:25px;letter-spacing:.05em;box-shadow:var(--btn-glow);transition:.12s; display:flex;align-items:center;justify-content:center;gap:10px;text-transform:uppercase} .generate:active{transform:translateY(2px) scale(.99)} /* ---------- results ---------- */ .results{display:flex;flex-direction:column;gap:11px} .results-head{display:none;align-items:center;justify-content:space-between;margin-top:2px} .results-head h2{font-family:var(--display);font-size:22px;letter-spacing:.02em} .results-head .re{display:flex;gap:8px} .pill{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px} .pill:active{background:var(--card-2)} .field-label{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:6px 2px 0;display:flex;align-items:center;gap:8px} .field-label::before,.field-label::after{content:"";height:1px;background:var(--line);flex:1} .vs{font-family:var(--display);text-align:center;color:var(--muted);font-size:14px;letter-spacing:.1em;margin:1px 0} .team{border-radius:18px;padding:14px 15px;color:#fff;box-shadow:var(--shadow);border:1px solid var(--team-border); opacity:0;transform:translateY(10px);animation:pop .42s cubic-bezier(.2,.9,.3,1.2) forwards} @keyframes pop{to{opacity:1;transform:none}} .team .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px} .team .name{font-family:var(--display);font-size:21px;letter-spacing:.04em;display:flex;align-items:center;gap:9px} .team .swatch{width:16px;height:18px;border-radius:3px;background:rgba(255,255,255,.85);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)} .team .count{font-weight:800;font-size:14px;background:rgba(0,0,0,.18);padding:4px 11px;border-radius:999px} .chips{display:flex;flex-wrap:wrap;gap:7px} .chip-name{background:rgba(255,255,255,.92);color:#15180F;font-weight:700;font-size:14px;padding:7px 12px;border-radius:10px} .empty{color:var(--muted);text-align:center;padding:38px 20px;font-weight:500} .empty .ball{font-size:40px;display:block;margin-bottom:10px} /* ---------- bottom tab bar ---------- */ .tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:440px;display:grid;grid-template-columns:repeat(4,1fr); background:var(--tab-bg);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:8px 8px calc(10px + env(safe-area-inset-bottom));z-index:30} .tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-weight:700;font-size:11px} .tab .ti{width:50px;height:30px;display:grid;place-items:center;border-radius:999px;font-size:19px;transition:.15s} .tab.on{color:var(--tab-active)} .tab.on .ti{background:var(--tab-active-bg)} /* ============================================================ HOME ============================================================ */ .greet{position:relative;z-index:1;margin-top:18px} .greet .hi{font-family:var(--display);font-size:34px;line-height:.95;letter-spacing:.01em} .greet .dt{font-weight:600;font-size:13.5px;opacity:.85;margin-top:5px} .tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px} .tile{border-radius:22px;padding:18px 16px 16px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow);position:relative;overflow:hidden} .tile .ic{font-size:30px} .tile .tt{font-family:var(--display);font-size:24px;line-height:.95;letter-spacing:.02em;margin-top:auto} .tile .ts{font-weight:600;font-size:12.5px;opacity:.82;margin-top:5px} .tile.go{background:var(--btn-bg);color:var(--btn-fg)} .tile.subs{background:var(--plan-bg);color:var(--plan-fg);border:1px solid var(--plan-border)} .tile .arrow{position:absolute;top:16px;right:16px;opacity:.8;font-size:18px} .card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow)} .card .ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .card .ch h3{font-family:var(--display);font-size:16px;letter-spacing:.04em} .card .ch a{font-weight:700;font-size:13px;color:var(--accent-deep)} :root[data-theme="dark"] .card .ch a{color:var(--accent)} .today{display:flex;gap:10px} .stat{flex:1;background:var(--card-2);border-radius:14px;padding:12px 14px} .stat .n{font-family:var(--display);font-size:30px;line-height:.9} .stat .l{font-weight:700;font-size:11px;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-top:3px} .mins{display:flex;flex-direction:column;gap:9px} .mline{display:flex;align-items:center;gap:11px} .mline .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:13px;color:#fff;flex:none} .mline .nm{font-weight:700;font-size:14.5px;min-width:64px} .mline .bar{flex:1;height:8px;border-radius:5px;background:var(--line);overflow:hidden} .mline .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-deep))} .mline .v{font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:42px;text-align:right} .mline.low .v{color:#E0392F} :root[data-theme="dark"] .mline.low .v{color:#FF6F61} .quick{display:flex;gap:9px;flex-wrap:wrap} .quick .q{flex:1;min-width:90px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 10px;text-align:center;box-shadow:var(--shadow)} .quick .q b{font-family:var(--display);font-size:22px;display:block} .quick .q span{font-weight:700;font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase} /* ============================================================ ROSTER ============================================================ */ .counts{display:flex;gap:10px;margin-top:16px;position:relative;z-index:1} .count-card{flex:1;background:var(--chip-bg);border:1px solid var(--chip-border);border-radius:16px;padding:12px 14px} .count-card .n{font-family:var(--display);font-size:38px;line-height:.9} .count-card .l{font-weight:600;font-size:12px;opacity:.85;text-transform:uppercase;letter-spacing:.08em;margin-top:2px} .hint{color:var(--muted);font-weight:600;font-size:13px;padding:2px 6px 6px} .player{display:flex;align-items:center;gap:13px;background:var(--card);border-radius:15px;padding:13px 14px;box-shadow:var(--shadow);cursor:pointer;transition:.13s;border:1px solid var(--line)} .player:active{transform:scale(.99)} .player.out{opacity:.5;background:transparent;box-shadow:none;border:1px dashed var(--line)} .avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:18px;color:#fff;flex:none} .player .nm{font-weight:700;font-size:17px;flex:1} .player.out .nm{text-decoration:line-through;text-decoration-thickness:2px} .status{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;font-size:16px;font-weight:800} .player:not(.out) .status{background:var(--accent);border-color:var(--accent);color:#fff} :root[data-theme="dark"] .player:not(.out) .status{color:#08120A} .player.out .status{color:transparent} .tag{font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:7px;background:var(--card-2);color:var(--muted);text-transform:uppercase} .fab{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;width:min(412px,calc(100% - 28px)); background:var(--btn-bg);color:var(--btn-fg);border:0;cursor:pointer;padding:18px;border-radius:18px;font-family:var(--display); font-size:21px;letter-spacing:.04em;box-shadow:var(--btn-glow);display:flex;align-items:center;justify-content:center;gap:10px} .fab:active{transform:translateX(-50%) translateY(2px)} /* ============================================================ SUBS (header is dark in both themes; accents are theme-aware) ============================================================ */ .hdr--match{color:#fff;background:var(--match-bg)} .hdr--match .chip,.hdr--match .theme-toggle{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2)} .clk-wrap{display:flex;flex-direction:column;align-items:center} .clock{font-family:var(--display);font-size:52px;line-height:.85;letter-spacing:.02em;font-variant-numeric:tabular-nums} .clk-wrap .period{font-weight:700;font-size:11px;letter-spacing:.14em;opacity:.7;text-transform:uppercase} .ctrl button{background:rgba(255,255,255,.16);border:0;color:#fff;font-weight:800;font-size:13px;padding:9px 14px;border-radius:11px;cursor:pointer} .ctrl button.go{background:var(--accent);color:var(--btn-fg)} .mixbar{margin-top:12px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:9px 13px;color:#fff} .mixbar .lab{font-weight:700;font-size:12.5px;flex:1} .mixbar .lab b{color:var(--accent)} .mixbar.due{background:rgba(224,57,47,.25);border-color:rgba(255,140,130,.5);animation:flash 1s infinite} @keyframes flash{50%{background:rgba(224,57,47,.45)}} .mixbar .t{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums} .banner{position:sticky;top:0;z-index:7;display:none;align-items:center;gap:10px;padding:13px 16px;color:#fff;font-weight:700;font-size:14px} .banner.show{display:flex} .banner.into{background:#15924A} .banner.outof{background:#E0392F} .banner button{margin-left:auto;background:rgba(0,0,0,.2);border:0;color:#fff;font-weight:800;padding:7px 12px;border-radius:9px;cursor:pointer} .sechead{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:16px;letter-spacing:.05em;color:var(--muted);margin:10px 4px 2px} .sechead .n{background:var(--card-2);color:var(--ink);border-radius:999px;padding:1px 10px;font-size:13px} .sechead.field{color:var(--accent-deep)} :root[data-theme="dark"] .sechead.field{color:var(--accent)} .p{display:flex;align-items:center;gap:11px;background:var(--card);border-radius:14px;padding:11px 13px;box-shadow:var(--shadow);cursor:pointer;transition:.12s;border:2px solid transparent} .p:active{transform:scale(.99)} .p.bench{background:var(--card-2);box-shadow:none} .p.armed{border-color:var(--ink);box-shadow:0 0 0 4px var(--accent-soft)} .pos{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-family:var(--display);font-size:14px;color:#fff;flex:none;letter-spacing:.02em} .p.bench .pos{background:#B9B4A4 !important;color:#fff} .p .nm{font-weight:700;font-size:16px;flex:none;min-width:78px} .meta{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums} .meta .big{font-weight:800;font-size:15px} .meta .lab{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase} .subbar{flex:1;height:9px;border-radius:5px;background:var(--line);overflow:hidden;min-width:30px;max-width:120px} .subbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent-deep))} .p.bench .subbar i{background:#9c9888} .lowtag{font-size:10px;font-weight:800;color:#E0392F;letter-spacing:.04em} .log{background:var(--plan-bg);border:1px solid var(--plan-border);border-radius:18px;padding:6px 4px;margin-top:14px} .log h3{color:var(--plan-fg);font-family:var(--display);font-size:15px;letter-spacing:.06em;padding:12px 14px 8px;display:flex;align-items:center;gap:8px} .log .empty{color:rgba(255,255,255,.5);font-size:13px;padding:4px 16px 14px;font-weight:500} :root[data-theme="dark"] .log .empty{color:var(--muted)} .entry{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.07)} .entry .t{font-variant-numeric:tabular-nums;font-family:var(--display);font-size:15px;color:var(--plan-accent);min-width:48px} .entry .swap{flex:1;color:var(--plan-fg);font-size:14px;font-weight:600;line-height:1.3} .entry .swap .pin{color:#7ff0a6;font-weight:800} :root[data-theme="dark"] .entry .swap .pin{color:var(--accent-2)} .entry .swap .pout{color:#ff9a90;font-weight:800} .entry .badge{background:rgba(255,255,255,.12);color:var(--plan-fg);font-weight:800;font-size:11px;padding:3px 8px;border-radius:7px}