/* ============================================================ King Kong — Light theme (Solar4Good Company OS) The shared skin every HQ/room copies. Light surfaces only: cream ground · paper cards · sage bottom-line · ink text · ONE dark-neon accent per view. Bebas display + Inter body. Load fonts in the page : ============================================================ */ :root{ --cream:#f5f7f0; --paper:#ffffff; --sage:#eef7e0; --sage-2:#d6e6c0; --read:#22271e; --ink:#0a0d08; --ink2:#141a11; --muted:#5a625c; --line:#e4e8e0; --neon-d:#7fae00; --neon-d2:#4d7a12; --neon:#c3f53c; --red:#b3402a; --red-soft:#fbece9; --disp:'Bebas Neue',Oswald,'Arial Narrow',sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace; --wrap:1120px; } *{box-sizing:border-box} html,body{margin:0} body{ background:var(--cream); color:var(--read); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; } /* Layout ---------------------------------------------------- */ .kk-wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,40px)} .kk-band{padding:clamp(40px,6vw,72px) 0} .kk-band.paper{background:var(--paper)} .kk-band.sage{background:var(--sage)} /* Type ------------------------------------------------------ */ .kk-kicker{ font-family:var(--disp); font-size:clamp(14px,1.5vw,17px); letter-spacing:.18em; text-transform:uppercase; color:var(--neon-d2); } .kk-title{ font-family:var(--disp); font-weight:400; line-height:.86; letter-spacing:.01em; font-size:clamp(34px,6vw,72px); color:var(--ink); margin:.12em 0 0; } .kk-h2{ font-family:var(--disp); font-weight:400; line-height:.9; letter-spacing:.01em; font-size:clamp(24px,3vw,36px); color:var(--ink); text-transform:uppercase; } .kk-lead{font-size:clamp(16px,1.7vw,19px);line-height:1.65;max-width:62ch;color:var(--muted);margin-top:12px} .kk-label{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .kk-meta{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);font-weight:600} .kk-mono{font-family:var(--mono)} .kk-num{font-variant-numeric:tabular-nums} /* Cards / surfaces ----------------------------------------- */ .kk-card{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:22px; } .kk-grid{display:grid;gap:14px} .kk-grid.g4{grid-template-columns:repeat(4,1fr)} .kk-grid.g3{grid-template-columns:repeat(3,1fr)} .kk-grid.g2{grid-template-columns:repeat(2,1fr)} @media(max-width:900px){.kk-grid.g4{grid-template-columns:repeat(2,1fr)}.kk-grid.g3{grid-template-columns:1fr}} @media(max-width:560px){.kk-grid.g4,.kk-grid.g2{grid-template-columns:1fr}} /* Stat — the enormous number is the point ------------------ */ .kk-stat .l{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .kk-stat .v{font-family:var(--disp);font-weight:400;line-height:.9;font-size:clamp(40px,5vw,60px);color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums} .kk-stat.hero .v{color:var(--neon-d2)} /* the ONE hero figure per view */ .kk-stat .d{font-size:12.5px;color:var(--muted);margin-top:4px} /* Buttons — pill, Bebas ------------------------------------ */ .kk-btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--disp);font-size:19px;letter-spacing:.04em; border-radius:30px;padding:11px 26px;border:1px solid transparent;cursor:pointer; text-decoration:none;white-space:nowrap;line-height:1; } .kk-btn.primary{background:var(--neon);color:var(--ink)} /* one per view */ .kk-btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line)} /* Chips / badges ------------------------------------------- */ .kk-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 10px;letter-spacing:.02em} .kk-chip.pos{background:var(--sage);color:var(--neon-d2)} .kk-chip.neg{background:var(--red-soft);color:var(--red)} .kk-chip.key{background:var(--neon);color:var(--ink)} .kk-chip.mute{background:#eef1ec;color:var(--muted)} /* Table ---------------------------------------------------- */ .kk-table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:13px} .kk-table thead th{ font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.10em;text-transform:uppercase; color:var(--muted);text-align:left;padding:11px 12px;background:var(--cream);border-bottom:1px solid var(--line); } .kk-table td{padding:11px 12px;border-top:1px solid var(--line);color:var(--read);vertical-align:top} .kk-table tbody tr:hover{background:#fafbf8} /* Nav / tabs ----------------------------------------------- */ .kk-tab{font-family:var(--disp);font-size:18px;letter-spacing:.04em;color:var(--muted);padding:8px 2px;cursor:pointer;border:none;background:none;border-bottom:2px solid transparent} .kk-tab.on{color:var(--ink);border-bottom-color:var(--neon-d)} a{color:var(--neon-d2)}