/* ========================================================================= shell-components.css — SHARED design tokens + component classes for the HKPL premium app home. Consumed by ALL device shells (webview-mobile now; wechat-mini + desktop-pro later) via @import from their own shell CSS. Everything is namespaced under the `.hkplc-scope` root class (tokens) and `.hkplc-*` component classes so it can NEVER leak into the standard site. Fixed-position pieces (minibar, tab bar) are appended to outside the home host, so each of them ALSO carries `.hkplc-scope` to inherit the tokens. Pixel target = scratchpad/app_mockup7.png (signed off). Palette matches the mockup; --hkc-brand defers to the site's own var(--brand) when present so the brand is never hardcoded into behaviour, but defaults to the mockup green. ========================================================================= */ .hkplc-scope, .hkplc-minibar, .hkplc-tabbar { --hkc-brand: var(--brand, #0aa065); --hkc-brand-d: #053d24; --hkc-lime: #c6f24a; --hkc-bg: #eef1f0; --hkc-card: #fff; --hkc-ink: #101613; --hkc-sec: #7c847f; --hkc-sep: #eef0ef; --hkc-win: #12b76a; --hkc-loss: #e2e5e3; --hkc-purple: #8a6cf0; --hkc-gold: #e0a11c; --hkc-red: #ff3b30; } .hkplc-scope, .hkplc-scope *, .hkplc-minibar, .hkplc-minibar *, .hkplc-tabbar, .hkplc-tabbar * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .hkplc-scope { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", sans-serif; -webkit-font-smoothing: antialiased; color: var(--hkc-ink); } @keyframes hkc-pulse { 0%,100%{opacity:1} 50%{opacity:.25} } @keyframes hkc-spin { to{transform:rotate(360deg)} } @keyframes hkc-draw { to{stroke-dashoffset:0} } /* ---- live-scores ticker ---- */ .hkplc-ticker { background:var(--hkc-brand-d); color:#fff; display:flex; align-items:center; gap:10px; padding:8px 14px; overflow:hidden; white-space:nowrap; } .hkplc-ticker .lbl { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:var(--hkc-lime); flex:0 0 auto; } .hkplc-ticker .lbl .p { width:6px; height:6px; border-radius:50%; background:var(--hkc-red); animation:hkc-pulse 1.2s infinite; } .hkplc-ticker .strip { display:flex; gap:18px; font-size:12.5px; font-weight:600; overflow:hidden; } .hkplc-ticker .strip b { font-weight:800; } .hkplc-ticker .strip .fin { color:#9fd8bf; } /* ---- cinematic hero ---- */ .hkplc-hero { position:relative; height:322px; overflow:hidden; color:#fff; } .hkplc-hero .bg { position:absolute; inset:0; background-size:cover; background-position:center 26%; background-color:#0e5a3a; } .hkplc-hero .ov { position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,45,27,.55),rgba(5,61,36,.12) 32%,rgba(4,40,24,.82) 74%,#052a19 100%); } .hkplc-hero .grad { position:absolute; inset:0; mix-blend-mode:overlay; background:linear-gradient(120deg,rgba(10,160,101,.55),transparent 58%); } .hkplc-hero .bar { position:relative; display:flex; align-items:center; justify-content:space-between; padding:calc(15px + env(safe-area-inset-top,0px)) 18px 0; } .hkplc-hero .bar img { height:26px; } .hkplc-hero .bar .ic { display:flex; gap:2px; align-items:center; } /* A11Y-A3: gap 16->2 to offset the new svg tap padding, keeping glyph spacing ~16px */ .hkplc-hero .bar .ic svg { width:23px; height:23px; box-sizing:content-box; padding:8.5px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); } /* A11Y-A3: 23x23 glyph + 8.5px padding = 40x40 tap target; glyph size unchanged */ .hkplc-hero .lp { position:absolute; top:calc(55px + env(safe-area-inset-top,0px)); left:20px; display:inline-flex; align-items:center; gap:7px; background:rgba(255,59,48,.94); padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:800; box-shadow:0 6px 16px rgba(255,59,48,.4); } .hkplc-hero .lp .p { width:6px; height:6px; border-radius:50%; background:#fff; animation:hkc-pulse 1.2s infinite; } .hkplc-hero .body { position:absolute; left:20px; right:20px; bottom:88px; } .hkplc-hero .eyebrow { font-size:11.5px; font-weight:800; letter-spacing:.15em; opacity:.82; } .hkplc-hero h1 { font-size:46px; font-weight:900; letter-spacing:-.045em; line-height:.9; margin:8px 0 10px; text-shadow:0 3px 24px rgba(0,0,0,.45); } .hkplc-hero h1 em { font-style:normal; color:var(--hkc-lime); } .hkplc-hero .kpis { display:flex; gap:18px; font-size:12.5px; font-weight:700; } .hkplc-hero .kpis b { font-size:16px; font-weight:900; margin-right:4px; } /* ---- filter chips ---- */ .hkplc-chips { position:relative; margin-top:-64px; display:flex; gap:8px; overflow-x:auto; padding:0 18px 2px; scrollbar-width:none; z-index:4; } .hkplc-chips::-webkit-scrollbar { display:none; } .hkplc-chip { flex:0 0 auto; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:.5px solid rgba(0,0,0,.06); color:var(--hkc-ink); font-size:13px; font-weight:700; padding:8px 15px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; box-shadow:0 4px 12px rgba(0,0,0,.08); } .hkplc-chip.on { background:var(--hkc-ink); color:#fff; border-color:transparent; } .hkplc-chip .d { width:6px; height:6px; border-radius:50%; background:var(--hkc-red); animation:hkc-pulse 1.2s infinite; } /* ---- stories rings ---- */ .hkplc-stories { display:flex; align-items:flex-start; gap:13px; overflow-x:auto; padding:14px 18px 4px; scrollbar-width:none; } .hkplc-stories::-webkit-scrollbar { display:none; } .hkplc-story { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:7px; width:64px; text-decoration:none; } .hkplc-story .ring { width:58px; height:58px; border-radius:50%; padding:2.5px; background:conic-gradient(from 210deg,var(--hkc-lime),var(--hkc-brand),var(--hkc-purple),var(--hkc-lime)); animation:hkc-spin 6s linear infinite; } .hkplc-story .ring.live { background:var(--hkc-red); animation:none; } .hkplc-story .ring.plain { background:#d9dedc; animation:none; } .hkplc-story .in { width:100%; height:100%; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; color:#fff; overflow:hidden; } .hkplc-story .in img { width:100%; height:100%; object-fit:cover; border-radius:50%; } .hkplc-story small { font-size:10.5px; color:var(--hkc-ink); font-weight:600; white-space:nowrap; max-width:64px; overflow:hidden; text-overflow:ellipsis; height:14px; line-height:14px; } /* ---- division chips (DIVCHIP-V1 2026-09-08): refined league division selector pills — replaces the childish A/B/C/M letter-circle avatars. Rounded pill, subtle brand-tinted accent dot, tabular label; shares the .hkplc-stories horizontal scroller. Light + dark. ---- */ .hkplc-divchip { flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; gap:8px; padding:9px 15px 9px 12px; border-radius:999px; text-decoration:none; white-space:nowrap; background:var(--hkc-card,#fff); border:1px solid rgba(16,22,19,.1); color:var(--hkc-ink,#101613); font-weight:700; font-size:13.5px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; box-shadow:0 1px 2px rgba(16,24,32,.05); transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .hkplc-divchip:hover { transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(4,45,27,.55); border-color:var(--hkc-brand,#0aa065); } .hkplc-divchip:active { transform:translateY(0); } .hkplc-divchip .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--hkc-brand,#0aa065); box-shadow:0 0 0 3px rgba(10,160,101,.14); } .hkplc-divchip .lbl { line-height:1; } html[data-theme="dark"] .hkplc-divchip { background:#16261d; border-color:#28402f; color:#e9f1ec; box-shadow:none; } html[data-theme="dark"] .hkplc-divchip:hover { border-color:var(--hkc-brand,#0aa065); } /* ---- live / final scorebug ---- */ .hkplc-live { margin:6px 16px 0; background:var(--hkc-card); border-radius:24px; padding:16px 18px; box-shadow:0 18px 40px -16px rgba(4,45,27,.4),0 2px 6px rgba(0,0,0,.05); } .hkplc-live .lh { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; } .hkplc-live .lh .meta { font-size:12px; color:var(--hkc-sec); font-weight:700; } .hkplc-live .lh .badge { display:inline-flex; align-items:center; gap:5px; color:#fff; background:var(--hkc-red); padding:3px 10px; border-radius:999px; font-size:11px; font-weight:800; } .hkplc-live .lh .badge.final { background:var(--hkc-ink); } .hkplc-live .lh .badge .p { width:6px; height:6px; border-radius:50%; background:#fff; animation:hkc-pulse 1.2s infinite; } .hkplc-live .vs { display:flex; align-items:center; justify-content:space-between; } .hkplc-live .tm { display:flex; flex-direction:column; align-items:center; gap:7px; width:84px; position:relative; } .hkplc-live .tm .lg { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:17px; color:#fff; box-shadow:0 6px 14px rgba(0,0,0,.12); overflow:hidden; } .hkplc-live .tm .lg img { width:100%; height:100%; object-fit:cover; border-radius:14px; } .hkplc-live .tm b { font-size:12.5px; font-weight:700; text-align:center; line-height:1.1; } .hkplc-live .tm .serve { position:absolute; top:0; right:14px; width:9px; height:9px; border-radius:50%; background:var(--hkc-lime); box-shadow:0 0 0 3px rgba(198,242,74,.35); animation:hkc-pulse 1.4s infinite; } .hkplc-live .score .n { font-size:38px; font-weight:900; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1; text-align:center; } .hkplc-live .sets { display:flex; justify-content:center; gap:6px; margin-top:8px; } .hkplc-live .sets span { font-size:11px; font-weight:800; background:#f0f3f1; color:var(--hkc-sec); border-radius:7px; padding:3px 8px; font-variant-numeric:tabular-nums; } .hkplc-live .sets span.on { background:var(--hkc-brand); color:#fff; } .hkplc-court { margin-top:14px; position:relative; height:70px; border-radius:12px; background:linear-gradient(180deg,#0e7d52,#0aa065); overflow:hidden; } .hkplc-court svg { position:absolute; inset:0; width:100%; height:100%; } .hkplc-court .ball { position:absolute; top:22px; left:64%; width:11px; height:11px; border-radius:50%; background:var(--hkc-lime); box-shadow:0 0 0 4px rgba(198,242,74,.3),0 2px 5px rgba(0,0,0,.3); } .hkplc-court .tag { position:absolute; bottom:6px; left:10px; font-size:10px; font-weight:800; color:#eafff4; letter-spacing:.03em; } .hkplc-live .mvp { margin-top:12px; display:flex; align-items:center; gap:9px; background:#fbf7ea; border:1px solid #f2e6bf; border-radius:12px; padding:9px 12px; } .hkplc-live .mvp .st { width:26px; height:26px; border-radius:50%; background:var(--hkc-gold); display:flex; align-items:center; justify-content:center; font-size:13px; } .hkplc-live .mvp b { font-size:13.5px; font-weight:800; } .hkplc-live .mvp small { color:var(--hkc-sec); font-size:12px; } .hkplc-watch { margin-top:13px; text-align:center; background:var(--hkc-ink); color:#fff; font-weight:800; font-size:14px; border-radius:14px; padding:12px; text-decoration:none; display:block; } /* ---- section header ---- */ .hkplc-sec { padding:0 18px; } .hkplc-sh { display:flex; align-items:center; justify-content:space-between; margin:26px 2px 13px; } .hkplc-sh h2 { font-size:22px; font-weight:900; letter-spacing:-.02em; } .hkplc-sh a { font-size:14px; color:var(--hkc-brand); font-weight:700; text-decoration:none; } /* ---- highlights reel ---- */ .hkplc-reel { display:flex; gap:12px; overflow-x:auto; padding:2px 18px; scrollbar-width:none; } .hkplc-reel::-webkit-scrollbar { display:none; } .hkplc-hl { flex:0 0 232px; border-radius:18px; overflow:hidden; position:relative; height:140px; box-shadow:0 6px 18px rgba(0,0,0,.12); text-decoration:none; } .hkplc-hl .thumb { position:absolute; inset:0; background-size:cover; background-position:center; background-color:#0e5a3a; } .hkplc-hl .sh2 { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(4,40,24,.82)); } .hkplc-hl .play { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; } .hkplc-hl .play svg { width:15px; height:15px; fill:var(--hkc-ink); margin-left:2px; } .hkplc-hl .cap { position:absolute; left:13px; right:13px; bottom:12px; color:#fff; } .hkplc-hl .cap b { font-size:14px; font-weight:800; display:block; line-height:1.2; } .hkplc-hl .cap small { font-size:11.5px; opacity:.85; } /* ---- my team card ---- */ .hkplc-myteam { position:relative; overflow:hidden; border-radius:22px; padding:17px 18px; color:#fff; background:linear-gradient(120deg,#2f8f4e,#0aa065 55%,#0fbe78); text-decoration:none; display:block; } .hkplc-myteam .g { position:absolute; right:-30px; top:-30px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,rgba(198,242,74,.35),transparent 62%); } .hkplc-myteam .top { position:relative; display:flex; align-items:center; gap:12px; } .hkplc-myteam .crest { width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:19px; overflow:hidden; } .hkplc-myteam .crest img { width:100%; height:100%; object-fit:cover; border-radius:14px; } .hkplc-myteam .nm b { font-size:18px; font-weight:900; } .hkplc-myteam .nm small { opacity:.86; font-size:12px; display:block; margin-top:1px; } .hkplc-myteam .streak { margin-left:auto; background:rgba(255,255,255,.18); border-radius:999px; padding:6px 11px; font-size:12px; font-weight:800; } .hkplc-myteam .next { position:relative; margin-top:14px; background:rgba(255,255,255,.15); border-radius:13px; padding:11px 13px; display:flex; align-items:center; justify-content:space-between; font-size:13px; } .hkplc-myteam .next b { font-weight:800; } /* ---- stat leaders ---- */ .hkplc-stat { background:var(--hkc-card); border-radius:18px; padding:16px 16px 10px; box-shadow:0 2px 8px rgba(0,0,0,.04); } .hkplc-stat .lead-hd { display:flex; align-items:center; gap:12px; padding-bottom:8px; } .hkplc-stat .row2 { display:flex; align-items:center; gap:12px; padding:9px 0; border-top:.5px solid var(--hkc-sep); } .hkplc-stat .row2:first-of-type { border-top:0; } .hkplc-stat .av { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; font-size:14px; } .hkplc-stat .nx { flex:1; } .hkplc-stat .nx b { font-size:15px; font-weight:700; } .hkplc-stat .nx small { color:var(--hkc-sec); font-size:12px; } .hkplc-stat .big { font-size:22px; font-weight:900; font-variant-numeric:tabular-nums; } /* ---- playoff bracket ---- */ .hkplc-bracket { background:var(--hkc-card); border-radius:18px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.04); display:flex; gap:6px; align-items:stretch; } .hkplc-bcol { flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:10px; } .hkplc-bteam { background:#f4f7f5; border-radius:11px; padding:9px 11px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; position:relative; } .hkplc-bteam.win { background:linear-gradient(90deg,rgba(10,160,101,.14),#f4f7f5); border:1px solid rgba(10,160,101,.25); } .hkplc-bteam .lg { width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:10px; flex:0 0 auto; overflow:hidden; } .hkplc-bteam .lg img { width:100%; height:100%; object-fit:cover; border-radius:6px; } .hkplc-bteam .bnm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hkplc-bteam .sc { margin-left:auto; font-weight:900; font-variant-numeric:tabular-nums; flex:0 0 auto; } .hkplc-bcol.fin { justify-content:center; } .hkplc-bcol .lbl { font-size:10px; font-weight:800; color:var(--hkc-sec); text-align:center; letter-spacing:.05em; margin-bottom:2px; } .hkplc-bteam.champ { background:linear-gradient(120deg,var(--hkc-brand),#0fbe78); color:#fff; } /* ---- standings card ---- */ .hkplc-standings { background:var(--hkc-card); border-radius:18px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04); } .hkplc-srow { display:flex; align-items:center; padding:13px 16px; border-top:.5px solid var(--hkc-sep); text-decoration:none; color:inherit; } .hkplc-srow:first-child { border-top:0; } .hkplc-srow.me { background:linear-gradient(90deg,rgba(10,160,101,.09),transparent); } .hkplc-srow .rk { width:20px; font-weight:900; font-size:15px; color:var(--hkc-sec); text-align:center; } .hkplc-srow.t1 .rk { color:var(--hkc-gold); } .hkplc-srow.t2 .rk, .hkplc-srow.t3 .rk { color:var(--hkc-brand); } .hkplc-srow .mv { width:14px; font-size:9px; margin-right:6px; text-align:center; } .hkplc-srow .mv.u { color:var(--hkc-win); } .hkplc-srow .mv.d { color:var(--hkc-red); } .hkplc-srow .lg { width:29px; height:29px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:12px; color:#fff; margin-right:11px; flex:0 0 auto; overflow:hidden; } .hkplc-srow .lg img { width:100%; height:100%; object-fit:cover; border-radius:9px; } .hkplc-srow .nm { flex:1; font-weight:700; font-size:15px; display:flex; align-items:center; gap:6px; min-width:0; } .hkplc-srow .nm .tnm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hkplc-srow .nm .fire { font-size:12px; flex:0 0 auto; } .hkplc-srow .form { display:flex; gap:3px; margin-right:12px; flex:0 0 auto; } .hkplc-srow .form i { width:7px; height:7px; border-radius:2px; } .hkplc-srow .form i.w { background:var(--hkc-win); } .hkplc-srow .form i.l { background:var(--hkc-loss); } .hkplc-srow .pt { font-weight:900; font-size:16px; min-width:22px; text-align:right; font-variant-numeric:tabular-nums; flex:0 0 auto; } /* ---- now-playing mini bar (docked above the tab bar) ---- */ .hkplc-minibar { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(86px + env(safe-area-inset-bottom,0px)); width:calc(100% - 28px); max-width:362px; background:rgba(16,22,19,.92); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); color:#fff; border-radius:18px; padding:10px 14px; display:flex; align-items:center; gap:11px; box-shadow:0 12px 30px rgba(0,0,0,.28); z-index:40; text-decoration:none; } .hkplc-minibar .d { width:8px; height:8px; border-radius:50%; background:var(--hkc-red); animation:hkc-pulse 1.2s infinite; flex:0 0 auto; } .hkplc-minibar .tx { flex:1; font-size:13px; font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .hkplc-minibar .tx b { font-weight:900; } .hkplc-minibar .sc { font-weight:900; font-variant-numeric:tabular-nums; font-size:15px; color:var(--hkc-lime); flex:0 0 auto; } .hkplc-minibar .go { width:30px; height:30px; border-radius:50%; background:var(--hkc-lime); display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .hkplc-minibar .go svg { width:15px; height:15px; fill:var(--hkc-ink); margin-left:2px; } /* ---- iOS floating tab bar ---- */ .hkplc-tabbar { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:calc(100% - 28px); max-width:362px; height:62px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); border:.5px solid rgba(0,0,0,.05); border-radius:26px; display:flex; box-shadow:0 12px 30px rgba(5,61,36,.18); z-index:41; } /* TABBAR-CONTRAST-V1 (2026-09-09, shell UAT): the HOME floating tab-bar (bg stays white-frosted in both themes) had inactive #a2a8a4 (2.4:1) and active brand-green (~4.2:1 dark) — both under WCAG AA. Darken to pass on the white bar: inactive #6b7280 (5.33:1), active #006b30 (6.68:1). */ .hkplc-tabbar a { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:#6b7280; font-size:10.5px; font-weight:600; } .hkplc-tabbar a.on { color:#006b30; } .hkplc-tabbar a svg { width:24px; height:24px; } .hkplc-tabbar a.on .pill { position:absolute; top:8px; width:44px; height:30px; border-radius:11px; background:rgba(10,160,101,.12); z-index:-1; } /* ---- featured-announcement banner (top slot of every shell) ---- */ .hkplc-announce { display:flex; align-items:center; gap:11px; margin:10px 16px 0; padding:12px 15px; border-radius:16px; text-decoration:none; color:var(--hkc-brand-d); background:linear-gradient(120deg,rgba(198,242,74,.9),rgba(10,160,101,.16)); border:.5px solid rgba(10,160,101,.28); box-shadow:0 6px 16px -10px rgba(4,45,27,.4); } .hkplc-announce .ai { flex:0 0 auto; font-size:18px; line-height:1; } .hkplc-announce .atx { flex:1; min-width:0; } .hkplc-announce .atx b { display:block; font-size:14px; font-weight:800; line-height:1.25; } .hkplc-announce .atx small { display:block; font-size:12px; color:var(--hkc-sec); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hkplc-announce .ago { flex:0 0 auto; font-weight:900; font-size:18px; color:var(--hkc-brand-d); opacity:.6; align-self:center; } .hkplc-announce .acov { flex:0 0 auto; width:44px; height:44px; border-radius:11px; background-size:cover; background-position:center; background-color:var(--hkc-brand); } .hkplc-announce .atx .apill { display:inline-block; font-size:9.5px; font-weight:900; letter-spacing:.08em; color:var(--hkc-brand-d); background:rgba(255,255,255,.5); border-radius:5px; padding:2px 6px; margin-bottom:3px; } .hkplc-announce .atx small { display:block; font-size:12px; color:var(--hkc-brand-d); opacity:.78; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; line-height:1.35; } /* ---- stat leaders — top players (DUPR) ---- */ .hkplc-topplayers { background:var(--hkc-card); border-radius:18px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04); } .hkplc-tprow { display:flex; align-items:center; gap:11px; padding:11px 16px; border-top:.5px solid var(--hkc-sep); } .hkplc-tprow:first-child { border-top:0; } .hkplc-tprow .rk { width:20px; text-align:center; font-weight:900; font-size:15px; color:var(--hkc-sec); flex:0 0 auto; font-variant-numeric:tabular-nums; } .hkplc-tprow.t1 .rk { color:var(--hkc-gold); } .hkplc-tprow.t2 .rk, .hkplc-tprow.t3 .rk { color:var(--hkc-brand); } .hkplc-tprow .av { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; font-size:14px; flex:0 0 auto; overflow:hidden; } .hkplc-tprow .av img { width:100%; height:100%; object-fit:cover; border-radius:50%; } .hkplc-tprow .nx { flex:1; min-width:0; } .hkplc-tprow .nx b { font-size:14.5px; font-weight:700; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hkplc-tprow .nx small { font-size:11.5px; color:var(--hkc-sec); font-variant-numeric:tabular-nums; } .hkplc-tprow .rt { text-align:right; flex:0 0 auto; } .hkplc-tprow .rt b { font-size:18px; font-weight:900; color:var(--hkc-brand); font-variant-numeric:tabular-nums; display:block; line-height:1; } .hkplc-tprow .rt small { font-size:9.5px; font-weight:800; color:var(--hkc-sec); letter-spacing:.06em; } /* ---- club leaderboard ---- */ .hkplc-clubs { background:var(--hkc-card); border-radius:18px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04); } .hkplc-crow { display:flex; align-items:center; gap:11px; padding:11px 16px; border-top:.5px solid var(--hkc-sep); text-decoration:none; color:inherit; } .hkplc-crow:first-child { border-top:0; } .hkplc-crow .rk { width:20px; text-align:center; font-weight:900; font-size:15px; color:var(--hkc-sec); flex:0 0 auto; font-variant-numeric:tabular-nums; } .hkplc-crow.t1 .rk { color:var(--hkc-gold); } .hkplc-crow.t2 .rk, .hkplc-crow.t3 .rk { color:var(--hkc-brand); } .hkplc-crow .lg { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; font-size:13px; flex:0 0 auto; overflow:hidden; } .hkplc-crow .lg img { width:100%; height:100%; object-fit:cover; border-radius:10px; } .hkplc-crow .nx { flex:1; min-width:0; } .hkplc-crow .nx b { font-size:14.5px; font-weight:700; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hkplc-crow .nx small { font-size:11.5px; color:var(--hkc-sec); font-variant-numeric:tabular-nums; } .hkplc-crow .pts { text-align:right; flex:0 0 auto; } .hkplc-crow .pts b { font-size:18px; font-weight:900; font-variant-numeric:tabular-nums; display:block; line-height:1; } .hkplc-crow .pts small { font-size:10px; font-weight:700; color:var(--hkc-sec); } /* ---- league by numbers (demographics) ---- */ .hkplc-demo { background:var(--hkc-card); border-radius:18px; padding:16px 18px; box-shadow:0 2px 8px rgba(0,0,0,.04); } .hkplc-demo .dm-total { display:flex; align-items:baseline; gap:9px; } .hkplc-demo .dm-total b { font-size:34px; font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .hkplc-demo .dm-total span { font-size:12.5px; color:var(--hkc-sec); font-weight:700; } .hkplc-demo .dm-gender { margin-top:14px; } .hkplc-demo .dm-gbar { display:flex; height:12px; border-radius:999px; overflow:hidden; background:#eef0ef; } .hkplc-demo .dm-gbar .m { background:var(--hkc-brand); } .hkplc-demo .dm-gbar .f { background:var(--hkc-purple); } .hkplc-demo .dm-glegend { display:flex; justify-content:space-between; margin-top:8px; font-size:11.5px; font-weight:700; color:var(--hkc-ink); } .hkplc-demo .dm-glegend span { display:inline-flex; align-items:center; gap:5px; } .hkplc-demo .dm-glegend i { width:9px; height:9px; border-radius:3px; } .hkplc-demo .dm-glegend i.m { background:var(--hkc-brand); } .hkplc-demo .dm-glegend i.f { background:var(--hkc-purple); } .hkplc-demo .dm-alabel { margin-top:16px; font-size:10px; font-weight:900; letter-spacing:.08em; color:var(--hkc-sec); } .hkplc-demo .dm-ages { display:flex; align-items:flex-end; gap:6px; margin-top:9px; height:88px; } .hkplc-demo .dm-acol { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; } .hkplc-demo .dm-atrack { width:100%; height:66px; display:flex; align-items:flex-end; } .hkplc-demo .dm-atrack span { position:relative; width:100%; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--hkc-brand),#0e7d52); min-height:6px; } .hkplc-demo .dm-aval { position:absolute; top:-14px; left:0; right:0; text-align:center; font-size:9px; font-weight:800; color:var(--hkc-sec); } .hkplc-demo .dm-acol small { font-size:8.5px; color:var(--hkc-sec); font-weight:700; white-space:nowrap; } /* ---- media / highlights reel (photo albums + video) ---- */ .hkplc-media { display:flex; gap:12px; overflow-x:auto; padding:2px 18px; scrollbar-width:none; } .hkplc-media::-webkit-scrollbar { display:none; } .hkplc-mcard { flex:0 0 210px; height:130px; border-radius:18px; overflow:hidden; position:relative; box-shadow:0 6px 18px rgba(0,0,0,.12); text-decoration:none; } .hkplc-mcard .thumb { position:absolute; inset:0; background-size:cover; background-position:center; background-color:#0e5a3a; } .hkplc-mcard.nocover .thumb { background:linear-gradient(135deg,var(--hkc-brand-d),var(--hkc-brand) 70%,#0fbe78); } .hkplc-mcard .sh { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(4,40,24,.82)); } .hkplc-mcard .mic { position:absolute; top:11px; right:11px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--hkc-ink); } .hkplc-mcard .cap { position:absolute; left:13px; right:13px; bottom:11px; color:#fff; } .hkplc-mcard .cap b { font-size:14px; font-weight:800; display:block; line-height:1.2; } .hkplc-mcard .cap small { font-size:11px; opacity:.85; } /* ---- announcement carousel (top slot; multi-banner) ---- */ .hkplc-carousel { position:relative; margin:10px 16px 0; overflow:hidden; border-radius:16px; box-shadow:0 6px 16px -10px rgba(4,45,27,.4); } .hkplc-carousel .hkplc-ctrack { display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1); } .hkplc-acslide { flex:0 0 100%; box-sizing:border-box; display:flex; align-items:center; gap:11px; padding:12px 15px; text-decoration:none; color:var(--hkc-brand-d); background:linear-gradient(120deg,rgba(198,242,74,.9),rgba(10,160,101,.16)); border:.5px solid rgba(10,160,101,.28); } .hkplc-acslide .ai { flex:0 0 auto; font-size:18px; line-height:1; } .hkplc-acslide .acov { flex:0 0 auto; width:44px; height:44px; border-radius:11px; background-size:cover; background-position:center; background-color:var(--hkc-brand); } .hkplc-acslide .atx { flex:1; min-width:0; } .hkplc-acslide .atx .apill { display:inline-block; font-size:9.5px; font-weight:900; letter-spacing:.08em; color:var(--hkc-brand-d); background:rgba(255,255,255,.5); border-radius:5px; padding:2px 6px; margin-bottom:3px; } .hkplc-acslide .atx b { display:block; font-size:14px; font-weight:800; line-height:1.25; } .hkplc-acslide .atx small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; color:var(--hkc-brand-d); opacity:.78; white-space:normal; line-height:1.35; margin-top:2px; } .hkplc-acslide .ago { flex:0 0 auto; font-weight:900; font-size:18px; color:var(--hkc-brand-d); opacity:.6; align-self:center; } .hkplc-cdots { position:absolute; bottom:7px; left:0; right:0; display:flex; justify-content:center; gap:6px; } .hkplc-cdots .hkplc-cdot { width:6px; height:6px; border-radius:50%; background:rgba(5,61,36,.28); transition:width .25s,background .25s; cursor:pointer; } .hkplc-cdots .hkplc-cdot.on { width:16px; border-radius:3px; background:var(--hkc-brand-d); } /* ---- sponsors / partners ---- */ .hkplc-sponsors { margin:24px 0 40px; } .hkplc-sponsors .hkplc-sp-title { font-size:22px; font-weight:900; letter-spacing:-.02em; margin:0 2px 12px; color:var(--hkc-ink); } .hkplc-sponsors .hkplc-sp-tier { font-size:10.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--hkc-sec); margin:16px 2px 10px; } .hkplc-sponsors .hkplc-sp-tier:first-of-type { margin-top:2px; } .hkplc-sponsors .hkplc-sp-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; } .hkplc-sp-card { flex:1 1 160px; max-width:240px; min-width:132px; background:var(--hkc-card); border-radius:16px; padding:18px 14px 13px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:9px; text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.05); border:.5px solid rgba(0,0,0,.04); } .hkplc-sp-logo { width:100%; height:56px; display:flex; align-items:center; justify-content:center; } .hkplc-sp-logo img { max-width:100%; max-height:56px; object-fit:contain; } .hkplc-sp-logo.noimg { height:auto; min-height:46px; font-size:14px; font-weight:900; color:var(--hkc-brand-d); text-align:center; line-height:1.2; } .hkplc-sp-name { font-size:11.5px; font-weight:700; color:var(--hkc-sec); text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Section hidden when its data source is unavailable (honest degrade). */ .hkplc-hidden { display:none !important; } /* ---- Latest News editorial deck (HKPLC.newsDeck) ---------------------- */ .hkplc-news{margin:6px 0 2px} .hkplc-news-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 4px 12px} .hkplc-news-title{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em;color:#053d24;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif} .hkplc-news-all{font-size:13px;font-weight:700;color:#0aa065;text-decoration:none;white-space:nowrap} .hkplc-news-all:active{opacity:.6} .hkplc-news-grid{display:grid;grid-template-columns:1fr;gap:12px} @media (min-width:560px){.hkplc-news-grid{grid-template-columns:1fr 1fr}} .hkplc-news-card{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(5,61,36,.06),0 8px 24px -14px rgba(5,61,36,.28);border:1px solid rgba(10,160,101,.08);transition:transform .15s ease,box-shadow .15s ease} .hkplc-news-card:active{transform:translateY(1px)} @media (hover:hover){.hkplc-news-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(5,61,36,.08),0 16px 34px -16px rgba(5,61,36,.4)}} .hkplc-news-cov{display:block;width:100%;height:150px;background:#e8f3ec 50% / cover no-repeat} .hkplc-news-body{display:flex;flex-direction:column;gap:7px;padding:14px 15px 16px} .hkplc-news-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .hkplc-news-chip{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;line-height:1;white-space:nowrap} .hkplc-news-chip.news{background:#053d24;color:#c6f24a} .hkplc-news-chip.ann{background:#e8f3ec;color:#0a7a4e} .hkplc-news-date{font-size:11.5px;font-weight:600;color:#6b7f74;font-variant-numeric:tabular-nums} .hkplc-news-h{font-size:15.5px;font-weight:800;line-height:1.3;color:#10241a;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hkplc-news-sn{font-size:12.5px;line-height:1.5;color:#5c6f64;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ===== GBPA / Core Mission band + On The Court gallery (SHARED, all 3 shells) ===== Ported from production public/index.html. Deep green / lime brand language. Responsive columns use explicit repeat(N,1fr) (NOT auto-fill) so cards FILL the full content width on desktop with no dead space on the right. */ .hkplc-mission { margin: 18px 16px; } .hkplc-mission-head { text-align: center; margin-bottom: 16px; } .hkplc-mission-title { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 900; letter-spacing: -.02em; color: var(--hkc-brand-d); text-transform: uppercase; } .hkplc-mission-gbpa { color: var(--hkc-brand); } .hkplc-mission-row { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; margin-bottom: 18px; } .hkplc-mission-vid { position: relative; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 18px 44px -18px rgba(4,45,27,.5); } .hkplc-mission-vid::before { content: ''; display: block; padding-top: 56.25%; } .hkplc-mission-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } .hkplc-mission-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .hkplc-mission-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hkc-brand); background: rgba(10,160,101,.1); padding: 4px 11px; border-radius: 999px; } .hkplc-mission-h3 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.2; letter-spacing: -.015em; color: var(--hkc-ink); text-transform: uppercase; } .hkplc-mission-body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--hkc-sec); } .hkplc-mission-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; } .hkplc-mission-cards::-webkit-scrollbar { display: none; } .hkplc-mission-card { position: relative; flex: 0 0 150px; scroll-snap-align: start; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 34px -16px rgba(4,45,27,.45); background: var(--hkc-brand-d); } .hkplc-mission-card::before { content: ''; display: block; padding-top: 125%; } .hkplc-mission-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .hkplc-mission-card:hover img { transform: scale(1.07); } .hkplc-mission-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,29,18,.92) 8%, rgba(5,29,18,.35) 45%, transparent 75%); } .hkplc-mission-cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 11px; color: #fff; } .hkplc-mission-bar { width: 34px; height: 4px; border-radius: 3px; background: var(--hkc-lime); margin-bottom: 4px; } .hkplc-mission-ct { font-size: 13.5px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; } .hkplc-mission-cb { font-size: 10.5px; line-height: 1.5; color: rgba(255,255,255,.9); } .hkplc-gallery { margin: 18px 16px; } .hkplc-gallery-head { text-align: center; margin-bottom: 14px; } .hkplc-gallery-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hkc-brand); background: rgba(10,160,101,.1); padding: 4px 11px; border-radius: 999px; } .hkplc-gallery-title { margin: 8px 0 0; font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: var(--hkc-brand-d); text-transform: uppercase; } .hkplc-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .hkplc-gallery-cell { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px -14px rgba(4,45,27,.4); background: var(--hkc-sep); } .hkplc-gallery-cell::before { content: ''; display: block; padding-top: 75%; } .hkplc-gallery-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .hkplc-gallery-cell:hover img { transform: scale(1.06); } @media (min-width: 560px) { .hkplc-mission-cards { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; margin: 0; padding: 0; } .hkplc-mission-card { flex: none; } } @media (min-width: 760px) { .hkplc-mission-row { grid-template-columns: 1fr 1fr; gap: 26px; } .hkplc-mission-title { font-size: 30px; } .hkplc-mission-h3 { font-size: 26px; } } @media (min-width: 900px) { .hkplc-mission { margin: 26px 0; } .hkplc-gallery { margin: 26px 0; } .hkplc-mission-cards { grid-template-columns: repeat(4, 1fr); gap: 16px; } /* GALLERY-NO-EMPTY-CELL (2026-09-08): a fixed 3-col grid leaves a blank trailing slot when the item count isn't a multiple of 3 (5 photos => 1 empty cell). Use a centered flex row instead — 3 per row, the last row centers, no empty plate. */ .hkplc-gallery-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .hkplc-gallery-cell { flex: 0 1 calc((100% - 28px) / 3); } .hkplc-gallery-title { font-size: 28px; } } /* ===== DARK THEME heading legibility (DARK-HEADINGS-V1 2026-09-08) ===== In dark mode the page ground goes dark but these shared shell headings/labels keep their light-mode dark ink (--hkc-ink / --hkc-brand-d / dark literals) and vanish. Flip ONLY the TEXT that sits on the dark PAGE GROUND to light — white content cards (standings / top players / clubs / demographics / news cards) keep their own dark-on-white text and are deliberately left untouched. Scoped to html[data-theme="dark"] so light mode is 100% unchanged. */ html[data-theme="dark"] .hkplc-sh h2 { color: #f1f5f4; } html[data-theme="dark"] .hkplc-sh a { color: var(--hkc-lime, #c6f24a); } html[data-theme="dark"] .hkplc-sp-title { color: #f1f5f4; } html[data-theme="dark"] .hkplc-sp-tier { color: rgba(255,255,255,.66); } /* SPONSOR-DARK-FIX (2026-09-08): the sponsor logo cards are WHITE content plates in dark (consistent with standings/clubs/top-player cards), and the sponsor logos are dark artwork on transparent PNGs — verified by pixel audit (airfly/mckeal/skx/syw ~100% dark opaque pixels). Pin the card + logo box to a light ground so dark logos stay visible (belt-and-suspenders with the global [class*="sponsor"] img plate), and DON'T flip the name to light — it sits ON the white card, so keep the light-mode dark ink (was rgba(255,255,255,.72) => white-on-white, invisible). */ html[data-theme="dark"] .hkplc-sp-card { background: #fff; border-color: rgba(0,0,0,.06); box-shadow: 0 2px 10px rgba(0,0,0,.34); } html[data-theme="dark"] .hkplc-sp-logo { background: #fff; border-radius: 10px; } html[data-theme="dark"] .hkplc-sp-name { color: var(--hkc-sec, #7c847f); } html[data-theme="dark"] .hkplc-mission-title { color: #f1f5f4; } html[data-theme="dark"] .hkplc-mission-gbpa { color: var(--hkc-lime, #c6f24a); } html[data-theme="dark"] .hkplc-mission-h3 { color: #f1f5f4; } html[data-theme="dark"] .hkplc-mission-body { color: rgba(255,255,255,.72); } html[data-theme="dark"] .hkplc-gallery-title { color: #f1f5f4; } html[data-theme="dark"] .hkplc-news-title { color: #f1f5f4; } /* eyebrows keep brand-green text; lift their tint so the pill reads on dark ground */ html[data-theme="dark"] .hkplc-mission-eyebrow, html[data-theme="dark"] .hkplc-gallery-eyebrow { color: var(--hkc-lime, #c6f24a); background: rgba(198,242,74,.14); }