/* Light-theme layer for the Channel page. Design source: claude.ai/design project 3f4b6a4e — "Channel Page Light.dc.html" (option 1a "Editorial" — all-white cards, airy, faithful to the light system). Self-contained: the page opts in with and loads this instead of dc-dark.css. Everything is scoped under .dc-cn-light so other pages never see it. Class names stay the production (cnx-/dk-) ones so dc-dark.js and dc.js behaviour carries over unchanged. */ body.dc-cn-light { --dc-bg: #EDEBE4; --dc-ink: #14130F; --dc-body-ink: #3A362E; --dc-muted: #6E6A60; --dc-faint: #A29C8F; --dc-hair: #DAD5CA; --dc-hair2: #F0ECE3; --dc-card-bd: rgba(20, 19, 15, .10); --dc-panel: #FAF9F5; --dc-paper: #F7F5F0; --dc-gold: #C7A24A; --dc-gold-ink: #B8871A; --dc-mint: #6EE7B7; --dc-green: #0A9E5F; --dc-green-ink: #0A6E4C; --dc-green-bg: #EAF6EF; --dc-green-bd: #C4E7D5; --dc-red: #B0432B; --dc-red-bg: #FBEDE8; --dc-red-bd: #F2D5CB; --dc-purple: #7C3AED; --dc-blue: #2563EB; --dc-blue-bg: #EAF1FF; --f-disp: 'Anton', sans-serif; --f-head: 'Archivo', sans-serif; --f-body: 'Hanken Grotesk', sans-serif; --f-mono: 'JetBrains Mono', monospace; background: var(--dc-bg); color: var(--dc-ink); } body.dc-cn-light .dc-main { max-width: 1120px; padding: 18px 30px 96px; } @media (max-width: 720px) { body.dc-cn-light .dc-main { padding: 14px 14px 96px; } } /* scope link colour to the page body only — the shared dark header/nav (and the mobile tab bar) live outside .dc-main and must keep their base styling */ body.dc-cn-light .dc-main a { color: var(--dc-green-ink); } body.dc-cn-light .dc-demo { background: var(--dc-panel); border: 1px solid var(--dc-card-bd); color: var(--dc-muted); border-radius: 10px; } body.dc-cn-light .dc-back { display: inline-flex; align-items: center; gap: 6px; color: var(--dc-muted); } body.dc-cn-light .dc-back:hover { color: var(--dc-ink); } body.dc-cn-light .dc-flash { background: var(--dc-panel); border: 1px solid var(--dc-card-bd); color: var(--dc-ink); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; } body.dc-cn-light .dc-flash.success { border-color: var(--dc-green-bd); } body.dc-cn-light .dc-flash.danger, body.dc-cn-light .dc-flash.error { border-color: var(--dc-red-bd); } /* dc-dark.js drives the chart draw-on + trophy/gold-bar effects by these names */ @keyframes dk-shimmer { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } } @keyframes dk-fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes dk-dashline { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { body.dc-cn-light * { animation-duration: .01s !important; transition-duration: .01s !important; } } /* ------------------------------------------------------------ primitives */ body.dc-cn-light .dk-cap { font-family: var(--f-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--dc-faint); } body.dc-cn-light .dk-pos { color: var(--dc-green-ink) !important; } body.dc-cn-light .dk-neg { color: var(--dc-red) !important; } body.dc-cn-light .dk-card { background: #fff; border: 1px solid var(--dc-card-bd); border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(16, 16, 20, .04); } body.dc-cn-light .dk-card + .dk-card, body.dc-cn-light .dk-grid2 + .dk-card, body.dc-cn-light .dk-card + .dk-grid2 { margin-top: 14px; } body.dc-cn-light .dk-grid2 > .dk-card { margin-top: 0; } body.dc-cn-light .dk-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } body.dc-cn-light .dk-card-t { font-family: var(--f-disp); font-weight: 400; font-size: 15px; text-transform: uppercase; letter-spacing: .01em; color: var(--dc-ink); } body.dc-cn-light .dk-card-line { flex: 1; height: 1px; background: var(--dc-hair2); } body.dc-cn-light .dk-card-note { font-family: var(--f-mono); font-size: 10px; color: var(--dc-faint); } body.dc-cn-light .dk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 860px) { body.dc-cn-light .dk-grid2 { grid-template-columns: 1fr; } } /* channel avatar — dark tile with mint monogram, matching the light leaderboard */ body.dc-cn-light .dk-av { border-radius: 12px; overflow: hidden; background: linear-gradient(150deg, #2A2A30, #101014); color: var(--dc-mint); display: flex; align-items: center; justify-content: center; font-family: var(--f-disp); font-weight: 400; letter-spacing: 1px; flex-shrink: 0; position: relative; } body.dc-cn-light .dk-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } body.dc-cn-light .dk-av.grn { background: linear-gradient(150deg, #13372A, #0A1611); } body.dc-cn-light .dk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--f-head); font-weight: 700; font-size: 13.5px; border-radius: 11px; padding: 10px 18px; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; } body.dc-cn-light .dk-btn.mint { background: var(--dc-mint); color: #0B0B0E; border-color: var(--dc-mint); } body.dc-cn-light .dk-btn.mint:hover { background: #5CDCA8; } body.dc-cn-light .dk-btn.ghost { background: #fff; color: var(--dc-ink); border-color: var(--dc-card-bd); } body.dc-cn-light .dk-btn.ghost:hover { border-color: rgba(20, 19, 15, .28); } body.dc-cn-light .dk-btn.paper { background: #fff; color: var(--dc-ink); border-color: var(--dc-card-bd); padding: 10px 16px; } body.dc-cn-light .dk-btn.paper:hover { border-color: rgba(20, 19, 15, .28); color: var(--dc-ink); } body.dc-cn-light .dk-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; } body.dc-cn-light .dk-chip.mint { color: var(--dc-green-ink); background: var(--dc-green-bg); border: 1px solid var(--dc-green-bd); } body.dc-cn-light .dk-chip.mint-solid { color: #0B0B0E; background: var(--dc-mint); } body.dc-cn-light .dk-chip.gold { color: #3B2E08; background: linear-gradient(135deg, #F6D471, #D9A21A); } body.dc-cn-light .dk-chip.dim { color: var(--dc-muted); border: 1px solid var(--dc-hair); } body.dc-cn-light .dk-gold-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 5; background: linear-gradient(90deg, #B8871A, #F6C544 45%, #FFF0BF 50%, #F6C544 55%, #B8871A); background-size: 200% 100%; animation: dk-shimmer 3.4s linear infinite; } body.dc-cn-light .acx-empty { font-size: 13px; line-height: 1.6; color: var(--dc-faint); } /* =============================================================== hero */ body.dc-cn-light .cnx-hero { position: relative; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--dc-card-bd); box-shadow: 0 1px 2px rgba(16, 16, 20, .05), 0 24px 60px rgba(20, 18, 12, .12); margin-top: 10px; } body.dc-cn-light .cnx-banner { position: relative; height: 150px; overflow: hidden; background: radial-gradient(120% 200% at 85% -40%, rgba(199, 162, 74, .28), transparent 55%), linear-gradient(120deg, #13372A, #0A1611); } body.dc-cn-light .cnx-banner.plain { background: radial-gradient(120% 200% at 85% -40%, rgba(255, 255, 255, .08), transparent 55%), linear-gradient(120deg, #1C1C22, #0A0A0E); } body.dc-cn-light .cnx-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 22px); pointer-events: none; } body.dc-cn-light .cnx-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } body.dc-cn-light .cnx-banner-blur { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(28px) brightness(.72) saturate(1.1); } body.dc-cn-light .cnx-banner-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(6, 10, 8, .4), transparent 46%); } body.dc-cn-light .cnx-rankpill { position: absolute; left: 20px; top: 16px; z-index: 3; } body.dc-cn-light .cnx-rankpill.gold { box-shadow: 0 2px 10px rgba(0, 0, 0, .25); } body.dc-cn-light .cnx-rankpill.dim { color: rgba(247, 245, 240, .9); background: rgba(10, 12, 10, .45); border-color: rgba(255, 255, 255, .25); backdrop-filter: blur(4px); } body.dc-cn-light .cnx-hero-body { position: relative; background: #fff; padding: 0 24px 20px; } body.dc-cn-light .cnx-hero-row { display: flex; align-items: flex-end; gap: 16px; padding: 16px 0 0 102px; min-height: 58px; } body.dc-cn-light .cnx-hero-body .dk-av { position: absolute; left: 24px; top: -42px; width: 86px; height: 86px; border-radius: 20px; font-size: 26px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(20, 19, 15, .14); } body.dc-cn-light .cnx-hero-body .dk-av.champ { box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px rgba(199, 162, 74, .55); } body.dc-cn-light .cnx-hero-mid { flex: 1; min-width: 0; padding-bottom: 2px; } body.dc-cn-light .cnx-name { font-family: var(--f-disp); font-weight: 400; font-size: clamp(24px, 4vw, 34px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; margin: 0; color: var(--dc-ink); } body.dc-cn-light .cnx-meta { font-family: var(--f-mono); font-size: 11px; color: var(--dc-muted); margin-top: 9px; } body.dc-cn-light .cnx-lastvid { color: var(--dc-muted); } body.dc-cn-light .cnx-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; padding-bottom: 3px; } @media (max-width: 720px) { body.dc-cn-light .cnx-banner { height: 118px; } body.dc-cn-light .cnx-hero-body { padding: 0 16px 16px; } body.dc-cn-light .cnx-hero-row { flex-wrap: wrap; gap: 12px; padding: 12px 0 0; min-height: 44px; } body.dc-cn-light .cnx-hero-mid { padding-left: 84px; } body.dc-cn-light .cnx-hero-body .dk-av { left: 16px; top: -32px; width: 66px; height: 66px; border-radius: 16px; font-size: 20px; } body.dc-cn-light .cnx-actions { width: 100%; padding: 6px 0 0; } body.dc-cn-light .cnx-actions .dk-btn { flex: 1; } } /* =============================================================== stat strip */ body.dc-cn-light .dk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } body.dc-cn-light .cnx-stats { margin-top: 14px; } body.dc-cn-light .dk-stat { background: #fff; border: 1px solid var(--dc-card-bd); border-radius: 14px; padding: 16px 18px; min-width: 0; box-shadow: 0 1px 2px rgba(16, 16, 20, .04); } body.dc-cn-light .dk-stat b { display: block; font-family: var(--f-disp); font-weight: 400; font-size: 30px; color: var(--dc-ink); margin-top: 6px; line-height: 1; white-space: nowrap; } @media (max-width: 860px) { body.dc-cn-light .dk-stats { grid-template-columns: repeat(2, 1fr); } body.dc-cn-light .dk-stat b { font-size: 24px; } } /* ================================================ track record + CLV rail */ body.dc-cn-light .cnx-track { margin-top: 14px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--dc-card-bd); box-shadow: 0 1px 2px rgba(16, 16, 20, .04), 0 18px 44px rgba(20, 18, 12, .08); } body.dc-cn-light .cnx-track-grid { display: grid; grid-template-columns: 1fr 312px; } @media (max-width: 860px) { body.dc-cn-light .cnx-track-grid { grid-template-columns: 1fr !important; } } body.dc-cn-light .cnx-chart { padding: 18px 22px 16px; border-right: 1px solid var(--dc-hair2); min-width: 0; } @media (max-width: 860px) { body.dc-cn-light .cnx-chart { border-right: 0; border-bottom: 1px solid var(--dc-hair2); } } body.dc-cn-light .cnx-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } body.dc-cn-light .cnx-chart-t { font-family: var(--f-disp); font-weight: 400; font-size: 19px; text-transform: uppercase; letter-spacing: .01em; color: var(--dc-ink); } body.dc-cn-light .cnx-chart-t i { font-style: normal; font-family: var(--f-mono); font-weight: 400; font-size: 10px; letter-spacing: .5px; color: var(--dc-faint); text-transform: none; } body.dc-cn-light .dk-chartwrap { display: flex; gap: 10px; } body.dc-cn-light .dk-chart-ylab { width: 42px; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 0 22px; text-align: right; font-family: var(--f-mono); font-size: 9px; letter-spacing: .5px; color: var(--dc-faint); } body.dc-cn-light .dk-chart-body { flex: 1; min-width: 0; } body.dc-cn-light .dk-chart-body svg { width: 100%; display: block; } body.dc-cn-light .dk-chart-xlab { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--dc-faint); margin-top: 2px; } /* range toggle — a soft panel of segments (design .tr-range) */ body.dc-cn-light .dk-ranges { display: flex; gap: 3px; background: var(--dc-panel); border: 1px solid var(--dc-hair2); border-radius: 9px; padding: 3px; } body.dc-cn-light .dk-range { font-family: var(--f-mono); font-size: 10px; font-weight: 700; color: var(--dc-muted); border: none; background: transparent; border-radius: 6px; padding: 4px 10px; cursor: pointer; } body.dc-cn-light .dk-range.on { color: #0B0B0E; background: var(--dc-mint); } /* series legend — swatch pills on white (design .tr-leg) */ body.dc-cn-light .dk-serieslegend { background: transparent; border: none; padding: 0; gap: 5px; } body.dc-cn-light .dk-serieslegend .dk-range { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; color: var(--dc-muted); background: #fff; border: 1px solid var(--dc-card-bd); border-radius: 999px; padding: 5px 11px; } body.dc-cn-light .dk-serieslegend .dk-range.on { background: var(--dc-mint); color: #0B0B0E; border-color: var(--dc-mint); font-weight: 700; } body.dc-cn-light .dk-range .dk-sw { display: inline-block; width: 13px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; flex-shrink: 0; } body.dc-cn-light .dk-sw.total { background: var(--dc-green); } body.dc-cn-light .dk-serieslegend .dk-range.on .dk-sw.total { background: var(--dc-green-ink); } body.dc-cn-light .dk-sw.ml { background: var(--dc-gold); } body.dc-cn-light .dk-sw.props { background: repeating-linear-gradient(90deg, var(--dc-purple) 0 3px, transparent 3px 5px); } /* CLV rail */ body.dc-cn-light .cnx-clv { padding: 18px 22px 20px; display: flex; flex-direction: column; } body.dc-cn-light .cnx-clv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.dc-cn-light .cnx-clv-lab { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #A98A3E; } body.dc-cn-light .cnx-clv-big { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; } body.dc-cn-light .cnx-clv-big b { font-family: var(--f-disp); font-weight: 400; font-size: 56px; line-height: .82; color: var(--dc-ink); } body.dc-cn-light .cnx-clv-big b.pos { color: var(--dc-green-ink); } body.dc-cn-light .cnx-clv-big b.neg { color: var(--dc-red); } body.dc-cn-light .cnx-clv-big span { font-family: var(--f-head); font-weight: 800; font-size: 13.5px; line-height: 1.15; text-transform: uppercase; color: var(--dc-ink); max-width: 110px; } body.dc-cn-light .cnx-clv-rest { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dc-hair2); display: flex; flex-direction: column; gap: 9px; } body.dc-cn-light .cnx-clv-cap { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dc-faint); } body.dc-cn-light .cnx-clv-eg { display: flex; align-items: center; gap: 8px; background: var(--dc-panel); border: 1px solid var(--dc-card-bd); border-radius: 12px; padding: 9px 10px; } body.dc-cn-light .cnx-clv-eg .th { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; background: linear-gradient(150deg, #2A2A30, #121216); position: relative; } body.dc-cn-light .cnx-clv-eg .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } body.dc-cn-light .cnx-clv-eg .who { flex: 1; min-width: 0; } body.dc-cn-light .cnx-clv-eg .who b { display: block; font-family: var(--f-head); font-weight: 700; font-size: 12.5px; color: var(--dc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.dc-cn-light .cnx-clv-eg svg { flex: none; } body.dc-cn-light .cnx-clv-eg .en { font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; color: var(--dc-green-ink); white-space: nowrap; } body.dc-cn-light .cnx-clv-eg .cl { font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; color: var(--dc-muted); white-space: nowrap; } body.dc-cn-light .cnx-clv-eg .pct { margin-left: auto; flex: none; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; color: #0B0B0E; background: var(--dc-mint); border-radius: 999px; padding: 3px 7px; } /* =============================================================== trophy cabinet */ body.dc-cn-light .cnx-shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } @media (max-width: 860px) { body.dc-cn-light .cnx-shelf { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { body.dc-cn-light .cnx-shelf { grid-template-columns: repeat(2, 1fr); } } body.dc-cn-light .trx { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 11px; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background .2s ease, border-color .2s ease; text-decoration: none; text-align: center; } body.dc-cn-light .trx:hover { border-color: rgba(20, 19, 15, .1); background: #FBFAF6; } body.dc-cn-light .trx-coinbox { display: block; perspective: 700px; width: 54px; height: 54px; } body.dc-cn-light .trx-coin { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform 1.15s cubic-bezier(.5, 0, .2, 1); will-change: transform; } @media (hover: hover) { body.dc-cn-light .trx:hover .trx-coin { transform: rotateY(540deg); } } body.dc-cn-light .trx.flip .trx-coin { transform: rotateY(540deg); } body.dc-cn-light .trx-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; } body.dc-cn-light .trx-front { transform: rotateY(0deg); opacity: 1; transition: opacity .22s ease .42s; color: #fff; font-size: 20px; box-shadow: 0 5px 13px rgba(0, 0, 0, .2), inset 0 0 0 3px rgba(255, 255, 255, .42), inset 0 -6px 10px rgba(0, 0, 0, .16); } @media (hover: hover) { body.dc-cn-light .trx:hover .trx-front { opacity: 0; } body.dc-cn-light .trx:hover .trx-back { opacity: 1; } } body.dc-cn-light .trx.flip .trx-front { opacity: 0; } body.dc-cn-light .trx.flip .trx-back { opacity: 1; } body.dc-cn-light .trx-front.gold { background: radial-gradient(120% 120% at 30% 20%, #FBE08A, #E0B93A 55%, #B8871A); } body.dc-cn-light .trx-front.silver { background: radial-gradient(120% 120% at 30% 20%, #EDF0F3, #B7BCC4 55%, #8A909A); } body.dc-cn-light .trx-front.bronze { background: radial-gradient(120% 120% at 30% 20%, #EBC49B, #C08A56 55%, #96662F); } body.dc-cn-light .trx-front.top10 { background: radial-gradient(120% 120% at 30% 20%, #4A463C, #2A2A30 60%, #14130F); } body.dc-cn-light .trx-front .n { position: absolute; bottom: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px; background: #14130F; color: #F7F5F0; font-family: var(--f-mono); font-style: normal; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } body.dc-cn-light .trx-back { transform: rotateY(180deg); opacity: 0; transition: opacity .22s ease .42s; flex-direction: column; gap: 1px; background: radial-gradient(120% 120% at 30% 20%, #14352A, #06110B); box-shadow: inset 0 0 0 2px rgba(110, 231, 183, .42), 0 5px 13px rgba(0, 0, 0, .25); } body.dc-cn-light .trx-back b { font-family: var(--f-head); font-weight: 800; font-size: 14px; color: var(--dc-mint); line-height: 1; } body.dc-cn-light .trx-back span { font-family: var(--f-mono); font-size: 6px; letter-spacing: .5px; text-transform: uppercase; color: rgba(247, 245, 240, .6); max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.dc-cn-light .trx-lab { font-family: var(--f-head); font-weight: 700; font-size: 12px; color: var(--dc-ink); line-height: 1.15; } body.dc-cn-light .trx-sub { font-family: var(--f-mono); font-size: 9px; color: var(--dc-faint); } body.dc-cn-light .cnx-shelf-note { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .3px; color: var(--dc-faint); margin-top: 12px; } /* ================================================ bet types + divisions */ body.dc-cn-light .cnx-bt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--dc-hair2); } body.dc-cn-light .cnx-bt:last-of-type { border-bottom: 0; } body.dc-cn-light .cnx-bt-cap { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; padding: 10px 0 2px; border-top: 1px solid var(--dc-hair); } body.dc-cn-light .cnx-bt-cap span { font-family: var(--f-head); font-weight: 800; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-body-ink); } body.dc-cn-light .cnx-bt-cap i { font-style: normal; font-family: var(--f-mono); font-size: 9.5px; color: var(--dc-faint); margin-left: auto; } body.dc-cn-light .cnx-bt-ico { width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--dc-card-bd); background: var(--dc-panel); display: flex; align-items: center; justify-content: center; color: var(--dc-muted); flex: none; } body.dc-cn-light .cnx-bt-ico.ko { color: var(--dc-red); } body.dc-cn-light .cnx-bt-ico.sub { color: var(--dc-gold-ink); } body.dc-cn-light .cnx-bt-ico.dec { color: var(--dc-muted); } body.dc-cn-light .cnx-bt-ico.ml, body.dc-cn-light .cnx-bt-ico.prop { color: var(--dc-green-ink); } body.dc-cn-light .cnx-bt-mid { flex: 1; min-width: 0; } body.dc-cn-light .cnx-bt-mid b { display: block; font-size: 13px; font-weight: 600; color: var(--dc-ink); } body.dc-cn-light .cnx-bt-mid i { font-style: normal; font-family: var(--f-mono); font-size: 10px; color: var(--dc-faint); } body.dc-cn-light .cnx-bt-foot { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--dc-faint); padding-top: 12px; border-top: 1px solid var(--dc-hair2); margin-top: 2px; } body.dc-cn-light .cnx-bt-roi { font-family: var(--f-mono); font-size: 14px; font-weight: 700; color: var(--dc-green-ink); text-align: right; } body.dc-cn-light .cnx-bt-roi.neg { color: var(--dc-red); } body.dc-cn-light .cnx-bt-roi small { display: block; font-size: 9.5px; font-weight: 400; color: var(--dc-faint); } body.dc-cn-light .cnx-bt-roi small.neg { color: var(--dc-red); opacity: .75; } body.dc-cn-light .cnx-bt-roi.dim { color: var(--dc-faint); } body.dc-cn-light .cnx-wc { margin-bottom: 14px; } body.dc-cn-light .cnx-wc:last-child { margin-bottom: 0; } body.dc-cn-light .cnx-divs { display: flex; flex-direction: column; } body.dc-cn-light .cnx-divs .cnx-wc { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; } body.dc-cn-light .cnx-wc-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; } body.dc-cn-light .cnx-wc-top b { font-weight: 600; color: var(--dc-ink); } body.dc-cn-light .cnx-wc-top span { font-family: var(--f-mono); font-weight: 700; color: var(--dc-green-ink); } body.dc-cn-light .cnx-wc-bar { height: 7px; border-radius: 999px; background: #EFECE4; overflow: hidden; } body.dc-cn-light .cnx-wc-bar span { display: block; height: 100%; border-radius: 999px; background: var(--dc-green); } body.dc-cn-light .cnx-wc-sub { font-family: var(--f-mono); font-size: 9.5px; color: var(--dc-faint); margin-top: 5px; } /* =============================================================== breakdowns */ body.dc-cn-light .cnx-vid { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--dc-hair2); text-decoration: none; } body.dc-cn-light .cnx-vid:last-of-type { border-bottom: 0; } body.dc-cn-light .cnx-vid:hover .cnx-vid-mid b { text-decoration: underline; } body.dc-cn-light .cnx-vid.xtra { display: none; } body.dc-cn-light .cnx-vid.xtra.shown { display: flex; } body.dc-cn-light .cnx-thumb { width: 76px; height: 46px; border-radius: 8px; background: linear-gradient(135deg, #1C1C22, #0B0B0E); display: flex; align-items: center; justify-content: center; font-family: var(--f-disp); font-weight: 400; font-size: 16px; color: rgba(199, 162, 74, .9); flex-shrink: 0; overflow: hidden; position: relative; } body.dc-cn-light .cnx-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } body.dc-cn-light .cnx-vid-mid { flex: 1; min-width: 0; } body.dc-cn-light .cnx-vid-mid b { display: block; font-size: 13.5px; font-weight: 600; color: var(--dc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.dc-cn-light .cnx-vid-mid i { font-style: normal; font-family: var(--f-mono); font-size: 10.5px; color: var(--dc-faint); margin-top: 3px; } body.dc-cn-light .cnx-vid-roi { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--dc-green-ink); white-space: nowrap; } body.dc-cn-light .cnx-vid-roi.neg { color: var(--dc-red); } body.dc-cn-light .cnx-vid-up { font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dc-blue); background: var(--dc-blue-bg); border: 1px solid #CFE0FB; border-radius: 999px; padding: 4px 9px; white-space: nowrap; } body.dc-cn-light .cnx-vid-search { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; } body.dc-cn-light .cnx-vid-search input { flex: 1; min-width: 0; background: #fff; border: 1px solid rgba(20, 19, 15, .12); border-radius: 9px; padding: 8px 12px; font-family: var(--f-body); font-size: 13px; color: var(--dc-ink); } body.dc-cn-light .cnx-vid-search input:focus { outline: none; border-color: var(--dc-green-ink); background: #fff; } body.dc-cn-light .cnx-vid-search input::placeholder { color: var(--dc-faint); } body.dc-cn-light .cnx-vid-count { font-family: var(--f-mono); font-size: 10px; color: var(--dc-faint); white-space: nowrap; } body.dc-cn-light .cnx-vid.nomatch { display: none !important; } body.dc-cn-light #cn-vids.searching .cnx-vid.xtra { display: flex; } body.dc-cn-light #cn-vids.searching .cnx-vid-more { display: none; } body.dc-cn-light .cnx-vid-more { text-align: center; padding-top: 12px; } body.dc-cn-light .cnx-vid-more button { font-family: var(--f-head); font-weight: 700; font-size: 12.5px; color: var(--dc-ink); background: #fff; border: 1px solid var(--dc-card-bd); border-radius: 999px; padding: 8px 16px; cursor: pointer; } body.dc-cn-light .cnx-vid-more button:hover { background: var(--dc-panel); } @media (max-width: 520px) { body.dc-cn-light .cnx-vid-mid b { white-space: normal; } }