/* CRCC Ricochet Ladder — styles v1.0.0 (2026-07-15) * All selectors are scoped under .crcc-r so nothing bleeds in from (or out to) * the site theme. The .crcc-r-tip tooltip is appended to , so it sits * outside that scope by design. */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&display=swap'); .crcc-r{ /* club logo ball colours — sampled from COOKS_RIVER_COLOUR_1200.jpg */ --ball-black:#000000; --ball-blue:#2c3590; --ball-red:#d52027; --ball-yellow:#dabf26; /* title-block field: a truer navy than the logo blue, which goes violet at scale */ --hero-blue:#24417c; --card:#ffffff; --ink:#1a1f26; --muted:#5d6672; --line:#d8dee6; --up:#1f7a46; --down:#b5392f; --shadow:0 1px 3px rgba(26,35,54,.06),0 8px 28px rgba(26,35,54,.07); max-width:840px; margin:0 auto; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-feature-settings:"tnum" 1,"lnum" 1; line-height:1.5; -webkit-font-smoothing:antialiased; } .crcc-r *{box-sizing:border-box;} /* hero — navy field, four-ball rule beneath */ .crcc-r .rl-hero{ position:relative; overflow:hidden; background:var(--hero-blue); background-image:linear-gradient(115deg,#2b4e93 0%,#24417c 52%,#1b3160 100%); color:#eef2f9; border-radius:14px; padding:28px 26px 26px; margin-bottom:22px; } /* four-ball rule along the foot of the block, in logo order */ .crcc-r .rl-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, var(--ball-black) 0 33.333%, var(--ball-yellow) 33.333% 66.666%, var(--ball-red) 66.666% 100%); } .crcc-r .rl-eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#9fb2d4;margin:0 0 8px;font-weight:600;} .crcc-r .rl-title{font-family:"Cinzel",Georgia,serif;font-weight:700;font-size:clamp(26px,5vw,40px);letter-spacing:.02em;margin:0;color:#fff;line-height:1.05;} .crcc-r .rl-sub{margin:10px 0 0;color:#adbedd;font-size:14px;} .crcc-r .rl-sub b{color:var(--ball-yellow);font-weight:600;} /* intro text block */ .crcc-r .rl-intro{ font-size:15px; line-height:1.65; color:#3d4a42; border-left:3px solid var(--ball-yellow); padding:2px 0 2px 18px; margin:0 2px; } .crcc-r .rl-intro p{margin:0 0 12px; color:inherit;} .crcc-r .rl-intro p:last-child{margin-bottom:0;} @media(max-width:560px){ .crcc-r .rl-intro{font-size:14.5px;padding-left:14px;} } /* tabs — joined to the card below, folder-style */ .crcc-r .rl-tabs{display:flex;gap:3px;margin:26px 0 0;padding:0 0 0 8px;position:relative;z-index:1;} .crcc-r .rl-tab{ appearance:none;background:#eef1f6;cursor:pointer; border:1px solid var(--line);border-bottom:0; border-radius:9px 9px 0 0; margin-bottom:-1px; font-family:"Cinzel",Georgia,serif;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600; color:var(--muted);padding:10px 18px 11px; transition:color .12s,background .12s; } .crcc-r .rl-tab:hover{color:var(--hero-blue);background:#e7edf7;} .crcc-r .rl-tab.is-on{ background:var(--card);color:var(--hero-blue); border-top:2px solid var(--ball-yellow); padding-top:9px; } .crcc-r .rl-tab:focus-visible{outline:2px solid var(--hero-blue);outline-offset:-3px;} .crcc-r .rl-panel{display:none;} .crcc-r .rl-panel.is-on{display:block;} /* card sitting under the tabs: square the top-left so the join reads as one surface */ .crcc-r .rl-panel .rl-card{border-top-left-radius:0;border-top-right-radius:0;} .crcc-r .rl-cap{ font-size:12.5px;color:var(--muted);margin:0; padding:12px 14px;border-bottom:1px solid var(--line);background:#fbfcfe; } /* small multiples */ .crcc-r .rl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px;background:var(--line);padding:1px;} .crcc-r .rl-mini{background:#fff;padding:12px 12px 10px;} .crcc-r .rl-mini-hd{display:flex;align-items:center;gap:7px;margin-bottom:4px;} .crcc-r .rl-mini-nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .crcc-r .rl-mini-v{margin-left:auto;font-size:14px;font-weight:700;} .crcc-r .rl-mini-svg{display:block;width:100%;height:auto;} .crcc-r .rl-mini-ft{font-size:11px;color:var(--muted);margin-top:2px;} /* card */ .crcc-r .rl-card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;} /* table */ .crcc-r table{width:100%;border-collapse:collapse;margin:0;background:transparent;} .crcc-r thead th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:transparent;} .crcc-r th.rl-num,.crcc-r td.rl-num{text-align:right;} .crcc-r th.rl-ctr,.crcc-r td.rl-ctr{text-align:center;} .crcc-r tbody tr{cursor:default;transition:background .12s ease;outline:none;} .crcc-r tbody tr:nth-child(even){background:#f6f8fb;} .crcc-r tbody tr:hover,.crcc-r tbody tr:focus-visible,.crcc-r tbody tr.rl-active{background:#e7edf7;} .crcc-r tbody tr.rl-active{box-shadow:inset 3px 0 0 var(--sw,var(--hero-blue));} .crcc-r td{padding:11px 14px;border-bottom:1px solid #e9edf3;font-size:14.5px;vertical-align:middle;color:var(--ink);background:transparent;} .crcc-r tbody tr:last-child td{border-bottom:none;} .crcc-r .rl-rank{font-family:"Cinzel",serif;font-weight:600;font-size:16px;white-space:nowrap;width:1%;} .crcc-r .rl-rank .rl-mv{font-size:10px;font-weight:700;margin-left:5px;vertical-align:1px;} .crcc-r .rl-mv.up{color:var(--up);} .crcc-r .rl-mv.down{color:var(--down);} .crcc-r .rl-mv.same{color:#b9c2bb;} .crcc-r tbody tr:first-child .rl-rank{color:var(--hero-blue);} .crcc-r .rl-player{display:flex;align-items:center;gap:10px;font-weight:500;} .crcc-r .rl-swatch{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(0,0,0,.04);} .crcc-r .rl-idx{font-weight:700;font-size:16px;} .crcc-r tbody tr:first-child .rl-idx{color:var(--hero-blue);} .crcc-r .rl-delta{font-weight:600;font-size:13px;} .crcc-r .rl-delta.pos{color:var(--up);} .crcc-r .rl-delta.zero{color:#aeb8b0;} .crcc-r .rl-spark{display:block;margin:0 auto;} /* chart */ .crcc-r .rl-chartcard{padding:0 8px 8px;} .crcc-r .rl-chartcard .rl-cap{margin:0 -8px 10px;} .crcc-r .rl-hint{font-size:12.5px;color:var(--muted);padding:2px 12px 12px;} .crcc-r svg.rl-chart{display:block;width:100%;height:auto;} .crcc-r .rl-grid{stroke:#e9edf3;stroke-width:1;} .crcc-r .rl-axis{fill:var(--muted);font-size:11px;} .crcc-r .rl-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;transition:opacity .15s,stroke-width .15s;} .crcc-r .rl-dot{transition:opacity .15s;} .crcc-r .rl-end{font-size:11px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s;} .crcc-r svg.rl-chart.dim .rl-line{opacity:.13;} .crcc-r svg.rl-chart.dim .rl-dot{opacity:.13;} .crcc-r svg.rl-chart .rl-line.hot{opacity:1;stroke-width:3.4;} .crcc-r svg.rl-chart .rl-dot.hot{opacity:1;} .crcc-r svg.rl-chart .rl-end.hot{opacity:1;} /* footer + message */ .crcc-r .rl-foot{margin-top:22px;font-size:12px;color:var(--muted);text-align:center;line-height:1.7;} .crcc-r .rl-msg{padding:28px;text-align:center;color:var(--muted);} /* tooltip (lives on ) */ .crcc-r-tip{position:fixed;pointer-events:none;z-index:9999;opacity:0;transition:opacity .1s; background:#24417c;color:#fff;font-size:12px;padding:6px 9px;border-radius:7px; box-shadow:0 6px 18px rgba(0,0,0,.18);white-space:nowrap;transform:translate(-50%,-130%); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;} .crcc-r-tip b{color:#dabf26;} @media(max-width:560px){ .crcc-r .rl-hide-sm{display:none;} .crcc-r td,.crcc-r thead th{padding:10px 10px;} } @media (prefers-reduced-motion:reduce){ .crcc-r *{transition:none!important;} }