/* ============================================================================ Qyron — Cross-Game Coaching Hub · prototype design system One neutral, premium base + a per-game accent layer (.game-civ / .game-lol / .game-chess on ). Brand thread = Qyron gold. Coach/AI accent = violet. Reconciles the two palettes currently split across the LoL pages and chess.html. ========================================================================== */ :root { /* base surfaces — deep, calm, premium dark */ --bg: #0a0d14; --bg-glow: #14203a; --panel: #121826; --panel2: #1a2233; --panel3: #222c40; --line: #283143; --line2: #36415a; /* text */ --txt: #cfd9e8; --txt2: #aab6cb; --dim: #aab6cb; --faint:#8d99b0; /* brand + semantic */ --gold: #e8c275; /* Qyron brand */ --gold2: #f3ead4; --violet: #a98cff; /* coach / AI */ --blue: #5aa9e6; --win: #3fb950; --warn: #e3b341; --loss: #f0556b; --teal: #2bb2a6; /* per-game accent (defaults to brand gold; overridden per .game-* ) */ --accent: #e8c275; --accent2: #5aa9e6; --accent-soft: rgba(232,194,117,.14); --accent-line: rgba(232,194,117,.42); --radius: 16px; --radius-s: 11px; --radius-xs:8px; --shadow: 0 18px 48px rgba(0,0,0,.45); --shadow-s: 0 8px 22px rgba(0,0,0,.35); --ease: cubic-bezier(.22,.61,.36,1); } /* ---- per-game soul: accent + ambient glow ---- */ .game-civ { --accent:#e0a93f; --accent2:#7bb8a6; --accent-soft:rgba(224,169,63,.15); --accent-line:rgba(224,169,63,.5); --glow:#2a2410; } .game-lol { --accent:#0bc6e3; --accent2:#c8aa6e; --accent-soft:rgba(11,198,227,.14); --accent-line:rgba(11,198,227,.5); --glow:#0a2740; } .game-chess { --accent:#cda46a; --accent2:#6f9e57; --accent-soft:rgba(205,164,106,.15); --accent-line:rgba(205,164,106,.5); --glow:#211b12; } .game-hs { --accent:#f2903a; --accent2:#5aa9e6; --accent-soft:rgba(242,144,58,.15); --accent-line:rgba(242,144,58,.5); --glow:#2c1a09; } .game-all { --accent:#a98cff; --accent2:#e8c275; --accent-soft:rgba(169,140,255,.15); --accent-line:rgba(169,140,255,.5); --glow:#1a1633; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: radial-gradient(1200px 620px at 50% -260px, var(--glow, var(--bg-glow)) 0%, transparent 62%), var(--bg); background-attachment: fixed; color: var(--txt); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--accent2); text-decoration: none; } a:hover { color: var(--gold2); } .tnum { font-variant-numeric: tabular-nums; } /* ---------- top navigation (shared, injected by proto.js) ---------- */ .topnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 12px clamp(14px, 4vw, 30px); background: rgba(10,13,20,.72); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--gold2); letter-spacing: .3px; } .brand .mark { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; font-size: 16px; font-weight: 900; color: #1a1206; background: linear-gradient(150deg, var(--gold), #b6892f); box-shadow: 0 3px 10px rgba(0,0,0,.4); } .brand small { color: var(--dim); font-weight: 500; font-size: 12px; } .navlinks { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; } .navlinks a { color: var(--txt2); font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: 9px; transition: .15s var(--ease); } .navlinks a:hover { color: var(--gold2); background: var(--panel2); } .navlinks a.on { color: #12121a; background: linear-gradient(180deg, var(--gold), #c9a24e); } .navavatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; margin-left: 6px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--gold2); background: var(--panel2); border: 1px solid var(--line2); } /* ---------- layout ---------- */ .wrap { max-width: 1060px; margin: 0 auto; padding: 26px clamp(14px, 4vw, 30px) 90px; } .wrap.narrow { max-width: 760px; } .pagehead { margin: 6px 0 18px; } .pagehead h1 { font-size: clamp(22px, 4vw, 30px); margin: 0 0 3px; color: var(--gold2); letter-spacing: .2px; font-weight: 800; } .pagehead h1 span { color: var(--accent); } .pagehead .sub { color: var(--dim); font-size: 13.5px; } .eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .9px; color: var(--accent); font-weight: 800; } .section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); font-weight: 700; margin: 26px 2px 10px; } /* ---------- cards ---------- */ .card { background: linear-gradient(180deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 88%, #000) 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 14px 0; box-shadow: var(--shadow-s); } .card.flush { padding: 0; overflow: hidden; } .card .ch { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; } .card .ch h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--gold); margin: 0; font-weight: 800; } .card .ch .right { margin-left: auto; font-size: 12.5px; color: var(--dim); font-weight: 500; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 760px) { .grid2, .grid3 { grid-template-columns: 1fr; } } /* accent left-rail card (hero verdict) */ .verdict { position: relative; overflow: hidden; border-color: var(--accent-line); background: radial-gradient(420px 180px at 0% 0%, var(--accent-soft), transparent 70%), linear-gradient(180deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 86%, #000) 100%); } .verdict .lead { font-size: clamp(19px, 3.4vw, 25px); font-weight: 800; color: var(--gold2); line-height: 1.28; letter-spacing: .1px; } .verdict .why { color: var(--txt2); margin-top: 8px; font-size: 15px; } /* ---------- buttons ---------- */ .btn, .ghost, .pill-btn { font-size: 14px; font-weight: 700; border-radius: var(--radius-xs); padding: 10px 16px; cursor: pointer; border: 1px solid transparent; transition: .15s var(--ease); display: inline-flex; align-items: center; gap: 7px; } .btn { background: linear-gradient(180deg, var(--gold), #c19a4c); color: #1a1206; } .btn:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn.accent { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: #0b0e14; } .ghost { background: var(--panel2); color: var(--violet); border-color: var(--line2); } .ghost:hover { border-color: var(--accent); color: var(--gold2); } .pill-btn { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); border-radius: 20px; padding: 7px 14px; font-size: 13px; } .pill-btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } .trackbtn { background: rgba(169,140,255,.14); color: var(--violet); border: 1px solid #3a4a86; border-radius: 8px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .15s var(--ease); } .trackbtn:hover { background: rgba(169,140,255,.26); } .trackbtn.tracked { color: #79e6a8; border-color: rgba(63,185,80,.5); background: rgba(63,185,80,.13); cursor: default; } /* ---------- pills / chips / tags ---------- */ .pill { background: var(--panel2); border: 1px solid var(--line2); border-radius: 20px; padding: 5px 12px; font-size: 12.5px; color: var(--txt2); display: inline-flex; align-items: center; gap: 6px; } .pill b { color: var(--gold2); } .pill.accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .chip { background: var(--panel2); border: 1px solid var(--line2); border-radius: 9px; padding: 6px 11px; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; } .tag { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 9px; border-radius: 20px; font-weight: 800; } .tag.win { background: rgba(63,185,80,.16); color: #79e6a8; } .tag.loss { background: rgba(240,85,107,.16); color: #ff8e9c; } .tag.neutral { background: var(--panel3); color: var(--txt2); } /* delta badge (since last) */ .delta { font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 16px; } .delta.up { color: #79e6a8; background: rgba(63,185,80,.12); } .delta.down { color: #ff8e9c; background: rgba(240,85,107,.12); } .delta.flat { color: var(--dim); background: var(--panel2); } /* ---------- stat tiles ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 9px; } .stat { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 11px 10px; text-align: center; } .stat .v { font-size: 20px; font-weight: 800; color: var(--gold2); line-height: 1; } .stat .v.good { color: var(--win); } .stat .v.bad { color: var(--loss); } .stat .v.acc { color: var(--accent); } .stat .v small { font-size: 12px; color: var(--dim); font-weight: 500; } .stat .k { font-size: 11px; color: var(--dim); margin-top: 6px; text-transform: uppercase; letter-spacing: .3px; } /* ---------- metric bars (value + benchmark) ---------- */ .metric { margin: 11px 0; } .metric .lbl { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; } .metric .lbl .val { color: var(--gold2); font-weight: 700; } .metric .lbl .val .bench { color: var(--dim); font-weight: 500; } .bar { height: 9px; background: var(--panel3); border-radius: 6px; position: relative; overflow: hidden; } .bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width .9s var(--ease); } .bar .benchmark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--gold2); opacity: .85; } /* ---------- rings (score / momentum) ---------- */ .ring { position: relative; width: var(--sz, 104px); height: var(--sz, 104px); border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: conic-gradient(var(--rc, var(--accent)) calc(var(--p, 0) * 1%), var(--panel3) 0); } .ring::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--panel); } .ring .inner { position: relative; z-index: 1; text-align: center; } .ring .inner .big { font-size: 27px; font-weight: 900; color: var(--gold2); line-height: 1; } .ring .inner .lbl { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; } /* ---------- priority / leak blocks ---------- */ .prio { border-left: 4px solid var(--line2); background: var(--panel2); border-radius: var(--radius-xs); padding: 13px 15px; margin: 10px 0; } .prio.high { border-color: var(--loss); } .prio.med { border-color: var(--warn); } .prio.low { border-color: var(--blue); } .prio .head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; flex-wrap: wrap; } .prio .num { color: var(--violet); font-weight: 900; } .prio .sev { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 9px; border-radius: 20px; font-weight: 800; } .prio.high .sev { background: rgba(240,85,107,.18); color: #ff9ba6; } .prio.med .sev { background: rgba(227,179,65,.18); color: #f0c659; } .prio.low .sev { background: rgba(90,169,230,.18); color: #93c6f0; } .prio .ttl { font-weight: 800; color: var(--gold2); } .prio .cat { color: var(--dim); font-size: 12px; } .prio .diag { font-size: 14px; margin-top: 3px; color: var(--txt); } .prio .fix { margin-top: 9px; padding: 9px 11px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-xs); font-size: 13.5px; } .prio .fix b { color: var(--accent); } .prio .ev { margin-top: 7px; font-size: 12px; color: var(--dim); } .prio .ev a { color: var(--violet); } /* ---------- per-era / per-phase scorecard ---------- */ .pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .ptile { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 10px; text-align: center; cursor: pointer; user-select: none; transition: .15s var(--ease); position: relative; } .ptile:hover { border-color: var(--accent); transform: translateY(-1px); } .ptile.sel { border-color: var(--accent); background: var(--panel3); box-shadow: inset 0 0 0 1px var(--accent-line); } .ptile .grade { font-size: 30px; font-weight: 900; line-height: 1; } .ptile .pn { font-size: 13px; color: var(--gold2); margin-top: 7px; font-weight: 700; } .ptile .ps { font-size: 11px; color: var(--dim); margin-top: 4px; } .g-good { color: var(--win); } .g-ok { color: var(--accent); } .g-bad { color: var(--loss); } .pdetail { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px; margin-top: 11px; animation: fadein .2s var(--ease); } .pdetail .pdhead { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 15px; color: var(--gold2); flex-wrap: wrap; } .gbadge { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 7px; font-weight: 900; } .gbadge.g-good { background: rgba(63,185,80,.18); } .gbadge.g-ok { background: rgba(224,169,63,.2); } .gbadge.g-bad { background: rgba(240,85,107,.18); } /* ---------- timeline (turning points / session log) ---------- */ .timeline { position: relative; margin: 6px 0 2px; padding-left: 4px; } .tl-row { display: grid; grid-template-columns: 58px 22px 1fr; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); } .tl-row:last-child { border-bottom: none; } .tl-time { font-size: 12.5px; color: var(--dim); text-align: right; padding-top: 2px; } .tl-dot { position: relative; display: grid; place-items: center; padding-top: 3px; } .tl-dot i { width: 12px; height: 12px; border-radius: 50%; background: var(--dim); box-shadow: 0 0 0 4px color-mix(in srgb, var(--panel2) 70%, transparent); } .tl-row.good .tl-dot i { background: var(--win); } .tl-row.bad .tl-dot i { background: var(--loss); } .tl-row.key .tl-dot i { background: var(--accent); } .tl-body .tl-title { font-weight: 700; color: var(--gold2); font-size: 14px; } .tl-body .tl-title .mv { color: var(--accent); font-weight: 800; } .tl-body .tl-lesson { font-size: 13.5px; color: var(--txt2); margin-top: 3px; } .tl-body .tl-act { margin-top: 6px; } .namegrade { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 6px; } .namegrade.good { background: rgba(63,185,80,.16); color: #79e6a8; } .namegrade.bad { background: rgba(240,85,107,.16); color: #ff8e9c; } /* session chat-style timeline rows */ .logrow { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; align-items: baseline; } .logrow:last-child { border-bottom: none; } .logrow .lt { color: var(--dim); min-width: 46px; font-variant-numeric: tabular-nums; font-size: 12.5px; } .logrow.dim { opacity: .62; } .logrow .who { font-weight: 800; } .logrow .who.coach { color: var(--violet); } .logrow .who.you { color: var(--blue); } .logrow .who.game { color: var(--dim); } /* ---------- playstyle radar + axes ---------- */ .radarwrap { display: grid; grid-template-columns: minmax(0,300px) 1fr; gap: 18px; align-items: center; } @media (max-width: 680px) { .radarwrap { grid-template-columns: 1fr; } } .axisbar { margin: 9px 0; } .axisbar .lbl { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; } .axisbar .lbl b { color: var(--gold2); } .axisbar .track { height: 8px; background: var(--panel3); border-radius: 5px; position: relative; overflow: hidden; } .axisbar .track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); transition: width .9s var(--ease); } .axisbar .track .peer { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--gold2); opacity: .8; } /* archetype hero */ .archetype { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .archetype .glyph { width: 76px; height: 76px; border-radius: 18px; flex: 0 0 auto; display: grid; place-items: center; font-size: 38px; background: radial-gradient(120% 120% at 30% 20%, var(--accent-soft), transparent 70%), var(--panel2); border: 1px solid var(--accent-line); } .archetype .name { font-size: 24px; font-weight: 900; color: var(--gold2); } .archetype .name span { color: var(--accent); } .archetype .meta { color: var(--dim); font-size: 13px; } /* confidence meter */ .confid { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--dim); margin-top: 4px; } .confid .cm { flex: 1; max-width: 160px; height: 6px; background: var(--panel3); border-radius: 4px; overflow: hidden; } .confid .cm > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; } /* ---------- home: game cards ---------- */ .gamecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 14px; } @media (max-width: 520px) { .gamecards { grid-template-columns: 1fr; } } .gamecard { position: relative; overflow: hidden; cursor: pointer; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); padding: 0; background: linear-gradient(180deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 86%, #000) 100%); transition: .18s var(--ease); display: block; color: inherit; } .gamecard:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); } .gamecard .gc-top { padding: 15px 16px 12px; background: radial-gradient(360px 120px at 100% -20%, var(--accent-soft), transparent 70%); } .gamecard .gc-game { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--gold2); font-size: 15px; } .gamecard .gc-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; background: var(--panel2); border: 1px solid var(--accent-line); } .gamecard .gc-score { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; } .gamecard .gc-score .n { font-size: 36px; font-weight: 900; color: var(--gold2); line-height: 1; } .gamecard .gc-score .u { font-size: 12px; color: var(--dim); } .gamecard .gc-spark { height: 38px; margin-top: 6px; } .gamecard .gc-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; } .gamecard .gc-leak { font-size: 13px; color: var(--txt2); } .gamecard .gc-leak b { color: var(--accent); } .gamecard .gc-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); } /* ---------- misc ---------- */ .muted { color: var(--dim); } .small { font-size: 12.5px; } .divider { height: 1px; background: var(--line); margin: 14px 0; border: none; } svg.chart { width: 100%; height: auto; display: block; } .empty { color: var(--dim); font-size: 13px; padding: 8px 0; } @keyframes fadein { from { opacity: 0; transform: translateY(6px); } } @keyframes ringfill { from { --p: 0; } } .footer { text-align: center; color: var(--faint); font-size: 12px; margin-top: 40px; } .proto-banner { text-align: center; font-size: 12px; color: var(--dim); background: var(--panel2); border: 1px dashed var(--line2); border-radius: 10px; padding: 7px 12px; margin: 0 0 12px; } .proto-banner b { color: var(--accent); }