/* ========================================================== Crybitz Tokenomics — v1.0.0 (AUDIT-FIXED, pass 2) Shared stylesheet: hub page + coin page RTL Arabic layout (dir="rtl" on ) Changes vs. original: 1. --cb-text-3 darkened #0d9488 -> #0f766e (small teal text was ~3.8:1 on white, below WCAG AA 4.5:1; now ~5.5:1). 2. `.hide-mob` now actually hides: the original only defined `.cb-hide-mob` in the 540px query, but the hub template tags columns with `.hide-mob`, so secondary columns never collapsed on mobile. Rule added at <=768px. ========================================================== */ /* ── Custom properties ── */ :root { --cb-bg: #f7f9f7; --cb-bg-card: rgba(0,0,0,.06); --cb-bg-card-h: rgba(0,0,0,.1); --cb-border: rgba(0,0,0,.13); --cb-border-h: rgba(0,0,0,.24); --cb-green: #16a34a; --cb-green-l: #22c55e; --cb-green-d: #052e16; --cb-red: #dc2626; --cb-teal: #0d9488; --cb-teal-l: #14b8a6; --cb-text: #111827; --cb-text-2: #374151; --cb-text-3: #0f766e; /* AUDIT: was #0d9488 (~3.8:1 on white). #0f766e ≈ 5.5:1 (AA). */ --cb-label: #4b5563; --cb-radius: 12px; } /* ── Reset ── */ .cb-wrap *, .cb-wrap *::before, .cb-wrap *::after, .cb-hero *, .cb-nav *, .cb-layout * { box-sizing: border-box; margin: 0; padding: 0; } /* ── NAV ── */ .cb-nav { position: sticky; top: 0; z-index: 200; background: rgba(247,249,247,.97); border-bottom: 1px solid var(--cb-border); backdrop-filter: blur(12px); padding: 0 24px; box-shadow: 0 1px 0 rgba(0,0,0,.05); } .cb-nav-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 58px; } .cb-logo { font-size: 1.2rem; font-weight: 800; color: var(--cb-green); text-decoration: none; } .cb-nav-links { display: flex; align-items: center; gap: 20px; } .cb-nav-links a { font-size: .85rem; color: var(--cb-text-3); text-decoration: none; transition: color .15s; } .cb-nav-links a:hover { color: var(--cb-text); } .cb-nav-links a.active { color: var(--cb-green-l); font-weight: 600; } /* ── HERO (shared) ── */ .cb-hero { position: relative; overflow: hidden; padding: 52px 24px 44px; border-bottom: 1px solid var(--cb-border); background: linear-gradient(135deg, #052e16 0%, #064e24 50%, #0a3d1f 100%); } #cb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .7; } .cb-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,46,22,.1) 0%, rgba(5,46,22,.5) 100%); z-index: 1; pointer-events: none; } .cb-hero-inner { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; } /* Hero text — all white on dark green */ .cb-hero .cb-bc, .cb-hero .cb-bc a, .cb-hero .cb-bc .sep { color: rgba(255,255,255,.55); } .cb-hero .cb-coin-name { color: #fff; } .cb-hero .cb-coin-name span { color: rgba(255,255,255,.55); } .cb-hero .cb-price-big { color: #fff; } .cb-hero .cb-stat-pill { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); } .cb-hero .cb-stat-pill .sp-label { color: rgba(255,255,255,.6); } .cb-hero .cb-stat-pill .sp-label .ar { color: rgba(255,255,255,.9); } .cb-hero .cb-stat-pill .sp-label .en { color: rgba(255,255,255,.5); } .cb-hero .cb-stat-pill .sp-value { color: #fff; } .cb-hero .cb-change.up { background: rgba(34,197,94,.18); color: #4ade80; } .cb-hero .cb-change.down { background: rgba(239,68,68,.28); color: #fca5a5; } .cb-hero .cb-badge-rank { color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); } .cb-hero .cb-badge-green { color: #4ade80; background: rgba(34,197,94,.2); border-color: rgba(34,197,94,.38); } .cb-hero .cb-badge-gold { color: #5eead4; background: rgba(20,184,166,.18); border-color: rgba(20,184,166,.35); } .cb-hero-sub-label { color: rgba(255,255,255,.55); font-size: .82rem; margin-bottom: 6px; } /* Breadcrumb */ .cb-bc { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--cb-text-3); margin-bottom: 28px; } .cb-bc a { color: var(--cb-text-3); text-decoration: none; } .cb-bc a:hover { color: var(--cb-text-2); } .cb-bc .sep { opacity: .5; } /* Coin identity */ .cb-coin-id { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; flex-wrap: wrap; } .cb-coin-logo { width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg,#f7931a,#ffb347); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 32px rgba(247,147,26,.28); } .cb-coin-logo svg { width: 38px; height: 38px; } .cb-coin-name { font-size: 2rem; font-weight: 800; color: var(--cb-text); line-height: 1.2; margin-bottom: 8px; } .cb-coin-name span { color: var(--cb-text-3); font-size: 1rem; font-weight: 400; margin-right: 10px; } .cb-coin-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cb-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; font-size: .73rem; font-weight: 700; padding: 3px 10px; white-space: nowrap; border: 1px solid transparent; } .cb-badge-rank { background: rgba(0,0,0,.06); color: var(--cb-text-2); border-color: var(--cb-border); } .cb-badge-green { background: rgba(34,197,94,.1); color: var(--cb-green); border-color: rgba(34,197,94,.25); } .cb-badge-gold { background: rgba(13,148,136,.1); color: var(--cb-teal-l); border-color: rgba(13,148,136,.3); } /* Price row */ .cb-price-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .cb-price-big { font-size: clamp(2.2rem,5vw,3.4rem); font-weight: 800; color: var(--cb-text); line-height: 1; } .cb-change { display: flex; align-items: center; gap: 5px; font-size: 1.05rem; font-weight: 700; padding: 4px 12px; border-radius: 8px; margin-bottom: 4px; } .cb-change.up { background: rgba(34,197,94,.12); color: var(--cb-green); } .cb-change.down { background: rgba(248,113,113,.12); color: var(--cb-red); } /* Stat pills */ .cb-stats-row { display: flex; gap: 12px; flex-wrap: wrap; } .cb-stat-pill { background: var(--cb-bg-card); border: 1px solid var(--cb-border); border-radius: 10px; padding: 12px 18px; min-width: 158px; } .cb-stat-pill .sp-label { font-size: .72rem; color: var(--cb-label); margin-bottom: 4px; line-height: 1.4; } .cb-stat-pill .sp-label .ar { display: block; font-weight: 700; color: var(--cb-text-2); } .cb-stat-pill .sp-label .en { font-size: .67rem; color: var(--cb-label); } .cb-stat-pill .sp-value { font-size: 1rem; font-weight: 700; color: var(--cb-text); } /* Hub hero subtitle */ .cb-hero-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.2; } .cb-hero-sub { font-size: .97rem; color: rgba(255,255,255,.7); max-width: 560px; line-height: 1.7; margin-bottom: 0; } /* ── UX: Scroll progress bar ── */ .cb-progress-bar { position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 9999; background: linear-gradient(90deg, var(--cb-green) var(--progress, 0%), transparent 0%); transition: background .1s; } /* ── UX: Sticky price bar ── */ .cb-sticky-price { position: fixed; top: 0; right: 0; left: 0; z-index: 180; /* AUDIT: was 58px (old plugin nav); theme header now sits above */ background: rgba(5,46,22,.97); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.08); padding: 0 24px; transform: translateY(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); will-change: transform; } .cb-sticky-price.visible { transform: translateY(0); } .cb-sticky-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 18px; height: 44px; } .cb-sticky-logo { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#f7931a,#ffb347); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 900; color: #fff; flex-shrink: 0; } .cb-sticky-name { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.9); } .cb-sticky-sym { font-size: .72rem; color: rgba(255,255,255,.45); } .cb-sticky-price-val { font-size: 1rem; font-weight: 800; color: #fff; margin-right: 4px; } .cb-sticky-chg { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 5px; } .cb-sticky-chg.up { background: rgba(34,197,94,.2); color: #4ade80; } .cb-sticky-chg.down { background: rgba(220,38,38,.25); color: #fca5a5; } .cb-sticky-sep { width: 1px; height: 18px; background: rgba(255,255,255,.12); } .cb-sticky-stat { font-size: .74rem; color: rgba(255,255,255,.5); } .cb-sticky-stat span { color: rgba(255,255,255,.8); font-weight: 600; margin-right: 4px; } .cb-sticky-cta { margin-right: auto; font-size: .74rem; font-weight: 700; color: var(--cb-green-l); text-decoration: none; border: 1px solid rgba(34,197,94,.35); border-radius: 6px; padding: 4px 12px; transition: all .15s; } .cb-sticky-cta:hover { background: rgba(34,197,94,.15); } /* ── UX: Skeleton loader ── */ @keyframes cb-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .cb-skeleton { background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.08) 75%); background-size: 600px 100%; animation: cb-shimmer 1.4s infinite linear; border-radius: 8px; color: transparent !important; user-select: none; } .cb-skeleton * { visibility: hidden; } .cb-skeleton-wrap { transition: opacity .5s ease; } .cb-skeleton-wrap.revealed { opacity: 1; } /* ── @property: animatable angle for laser beam ── */ @property --ba { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes cbBeam { from { --ba: 0deg; } to { --ba: 360deg; } } /* ── LAYOUT (coin page) ── */ .cb-layout { width: 100%; max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr minmax(0, 980px) 1fr; gap: 0; align-items: start; } .cb-main { padding: 36px 40px 80px; } .cb-main > * + * { margin-top: 28px; } /* ── TOC panel ── */ .cb-toc-panel { position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow-y: auto; scrollbar-width: none; padding: 36px 24px 36px 20px; border-left: 1px solid var(--cb-border); background: rgba(0,0,0,.018); } .cb-toc-panel::-webkit-scrollbar { display: none; } .cb-toc { background: var(--cb-bg-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); padding: 18px 16px; position: relative; transition: transform .22s ease, box-shadow .22s ease; } .cb-toc:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,.13), 0 4px 14px rgba(22,163,74,.07); } .cb-toc-list { display: flex; flex-direction: column; gap: 2px; } .cb-toc-link { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; text-decoration: none; color: var(--cb-text-2); font-size: .79rem; line-height: 1.4; transition: all .15s; border-right: 2px solid transparent; } .cb-toc-link:hover { background: rgba(0,0,0,.05); color: var(--cb-text); } .cb-toc-link.toc-active { color: var(--cb-green); background: rgba(22,163,74,.08); border-right-color: var(--cb-green); font-weight: 700; } .cb-toc-link .tl-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .55; } .cb-toc-link.toc-active .tl-dot { opacity: 1; } /* ── CARD (with laser beam) ── */ .cb-card { background: #fff; border: 1px solid var(--cb-border); border-radius: var(--cb-radius); padding: 22px 20px; position: relative; transition: transform .22s ease, box-shadow .22s ease; } .cb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,.13), 0 4px 14px rgba(22,163,74,.07); } /* Laser border beam — shared by .cb-card, .cb-toc, .cb-side-card */ .cb-card::before, .cb-toc::before, .cb-side-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ba), rgba(34,197,94,0) 0%, rgba(34,197,94,0) 56%, rgba(22,163,74,.35) 68%, rgba(34,197,94,.95) 79%, rgba(200,255,214,1) 86%, rgba(34,197,94,.95) 93%, rgba(22,163,74,.35) 99%, rgba(34,197,94,0) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 4px rgba(34,197,94,.7)); transition: opacity .35s ease; /* continuous clockwise loop (no alternate bounce), steady speed, slowed down */ animation: cbBeam var(--beam-spd, 6.5s) linear infinite paused; } .cb-card:hover::before, .cb-toc:hover::before, .cb-side-card:hover::before { opacity: 1; animation-play-state: running; } .cb-card-title { font-size: .7rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cb-text-2); margin-bottom: 18px; } /* ── Chart ── */ .cb-chart-tabs { display: flex; gap: 6px; margin-bottom: 20px; } .cb-chart-tab { background: transparent; border: 1px solid var(--cb-border); border-radius: 7px; color: var(--cb-text-2); font-family: inherit; font-size: .8rem; font-weight: 600; padding: 5px 14px; cursor: pointer; transition: all .15s; } .cb-chart-tab:hover { border-color: rgba(0,0,0,.2); color: var(--cb-text); } .cb-chart-tab.active { background: var(--cb-green); border-color: var(--cb-green); color: #fff; } .cb-chart-container { position: relative; height: 220px; } .cb-chart-container #cb-price-chart { display: block; width: 100%; height: 100%; } /* ── Data grid ── */ .cb-data-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .cb-data-item { background: rgba(0,0,0,.02); border: 1px solid var(--cb-border); border-radius: 10px; padding: 14px 16px; } .cb-data-label { font-size: .72rem; color: var(--cb-label); margin-bottom: 6px; line-height: 1.4; } .cb-data-label .ar { display: block; font-weight: 700; font-size: .75rem; color: var(--cb-text-2); } .cb-data-label .en { font-size: .66rem; color: var(--cb-label); } .cb-data-value { font-size: .95rem; font-weight: 700; color: var(--cb-text); } .cb-data-sub { font-size: .7rem; color: var(--cb-text-3); margin-top: 3px; } /* ── On-chain metrics ── */ .cb-onchain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cb-onchain-item { background: rgba(0,0,0,.02); border: 1px solid var(--cb-border); border-radius: 10px; padding: 16px; display: flex; align-items: flex-start; gap: 12px; } .cb-onchain-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; } .cb-onchain-icon.green { background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.2); } .cb-onchain-icon.gold { background: rgba(13,148,136,.1); border: 1px solid rgba(13,148,136,.2); } .cb-onchain-body .ob-label { font-size: .7rem; color: var(--cb-text-2); margin-bottom: 3px; font-weight: 600; } .cb-onchain-body .ob-label .en { font-size: .63rem; color: var(--cb-label); display: block; } .cb-onchain-body .ob-value { font-size: 1.1rem; font-weight: 800; color: var(--cb-text); } .cb-onchain-body .ob-trend { font-size: .72rem; margin-top: 3px; } .cb-onchain-body .ob-trend.up { color: var(--cb-green); } .cb-onchain-body .ob-trend.gold { color: var(--cb-teal); } /* ── Consensus ── */ .cb-consensus { background: rgba(13,148,136,.05); border: 1px solid rgba(13,148,136,.2); border-right: 3px solid var(--cb-teal); border-radius: var(--cb-radius); padding: 18px 20px; } .cb-consensus-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .cb-consensus-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(13,148,136,.1); border: 1px solid rgba(13,148,136,.2); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .cb-consensus-label { font-size: .7rem; color: var(--cb-text-3); margin-bottom: 2px; } .cb-consensus-name { font-size: 1.05rem; font-weight: 700; color: var(--cb-text); } .cb-consensus-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .cb-consensus-step { background: rgba(0,0,0,.02); border: 1px solid var(--cb-border); border-radius: 8px; padding: 12px 14px; } .cb-consensus-step .cs-num { font-size: .65rem; color: var(--cb-text-3); font-weight: 700; margin-bottom: 4px; letter-spacing: 1px; } .cb-consensus-step .cs-title { font-size: .85rem; font-weight: 700; color: var(--cb-text); margin-bottom: 3px; } .cb-consensus-step .cs-desc { font-size: .78rem; color: var(--cb-text-2); line-height: 1.5; } /* ── Sections ── */ .cb-section-title { font-size: 1.15rem; font-weight: 700; color: var(--cb-text); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--cb-border); display: flex; align-items: center; gap: 10px; } .cb-section-title .en-sub { font-size: .77rem; color: var(--cb-text-3); font-weight: 400; } .cb-body { font-size: .95rem; color: var(--cb-text-2); line-height: 1.9; } .cb-body p + p { margin-top: 12px; } .cb-body h3 { font-size: 1rem; font-weight: 700; color: var(--cb-text); margin: 20px 0 8px; } .cb-body strong { color: var(--cb-text); } /* ── Tokenomics bars ── */ .cb-toko-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .cb-toko-top { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 6px; } .cb-toko-name { color: var(--cb-text-2); font-weight: 600; } .cb-toko-pct { color: var(--cb-text-3); } .cb-toko-bar { height: 6px; background: rgba(0,0,0,.08); border-radius: 99px; overflow: hidden; } .cb-toko-fill { height: 100%; border-radius: 99px; background: var(--cb-green); width: 0; transition: width 1.2s cubic-bezier(.4,0,.2,1); } /* ── Ecosystem ── */ .cb-eco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cb-eco-item { background: rgba(0,0,0,.02); border: 1px solid var(--cb-border); border-radius: 10px; padding: 14px 16px; transition: all .18s; } .cb-eco-item:hover { background: rgba(0,0,0,.05); border-color: var(--cb-border-h); transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,0,0,.09); } .cb-eco-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .cb-eco-name { font-size: .9rem; font-weight: 700; color: var(--cb-text); } .cb-eco-tag { font-size: .67rem; color: var(--cb-teal); background: rgba(13,148,136,.08); border: 1px solid rgba(13,148,136,.15); border-radius: 5px; padding: 2px 7px; margin-top: 2px; display: inline-block; } .cb-eco-desc { font-size: .8rem; color: var(--cb-text-2); line-height: 1.5; } /* ── Comparison table ── */ .cb-compare-wrap { overflow-x: auto; } .cb-compare { width: 100%; border-collapse: collapse; font-size: .88rem; } .cb-compare thead th { padding: 12px 16px; text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-label); border-bottom: 1px solid var(--cb-border); } .cb-compare thead th.feature-col { text-align: right; } .cb-compare thead th.highlight { color: var(--cb-green-l); background: rgba(34,197,94,.05); } .cb-compare tbody tr { border-bottom: 1px solid rgba(0,0,0,.05); } .cb-compare tbody tr:hover { background: rgba(0,0,0,.03); } .cb-compare tbody td { padding: 12px 16px; text-align: center; color: var(--cb-text-2); } .cb-compare tbody td.feature-col { text-align: right; color: var(--cb-text-2); font-size: .8rem; font-weight: 600; } .cb-compare tbody td.feature-col .en { display: block; font-size: .68rem; opacity: .65; font-weight: 400; } .cb-compare tbody td.highlight { color: var(--cb-text); font-weight: 700; background: rgba(22,163,74,.06); } .cb-compare .win { color: var(--cb-green); font-weight: 700; } .cb-compare .neutral { color: var(--cb-text-2); } .cb-compare .caution { color: var(--cb-teal); } /* ── Analyst targets ── */ .cb-analyst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .cb-analyst-item { background: rgba(0,0,0,.02); border: 1px solid var(--cb-border); border-radius: 10px; padding: 14px 16px; } .cb-analyst-firm { font-size: .72rem; color: var(--cb-text-3); margin-bottom: 4px; font-weight: 700; } .cb-analyst-target { font-size: 1.1rem; font-weight: 800; color: var(--cb-text); margin-bottom: 3px; } .cb-analyst-note { font-size: .75rem; color: var(--cb-text-2); line-height: 1.5; } .cb-analyst-item.bullish { border-color: rgba(22,163,74,.25); } .cb-analyst-item.bearish { border-color: rgba(220,38,38,.2); } .cb-analyst-item.neutral { border-color: rgba(13,148,136,.25); } .cb-analyst-source { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: .72rem; font-weight: 600; color: var(--cb-teal); text-decoration: none; border-bottom: 1px dashed currentColor; padding-bottom: 1px; transition: color .15s; } .cb-analyst-source:hover { color: var(--cb-green); } /* ── Wallet guide ── */ .cb-wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } .cb-wallet-type { background: rgba(0,0,0,.02); border: 1px solid var(--cb-border); border-radius: 10px; padding: 16px; } .cb-wallet-type h4 { font-size: .9rem; font-weight: 700; color: var(--cb-text); margin-bottom: 4px; } .cb-wallet-type .wt-sub { font-size: .75rem; color: var(--cb-text-3); margin-bottom: 12px; } .cb-wallet-list { display: flex; flex-direction: column; gap: 7px; } .cb-wallet-pill { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.02); border: 1px solid var(--cb-border); border-radius: 7px; padding: 8px 12px; font-size: .82rem; color: var(--cb-text-2); } .cb-wallet-pill .wp-badge { font-size: .65rem; padding: 2px 7px; border-radius: 4px; font-weight: 700; } .cb-wallet-pill .wp-badge.free { background: rgba(34,197,94,.1); color: var(--cb-green); } .cb-wallet-pill .wp-badge.paid { background: rgba(13,148,136,.1); color: var(--cb-teal); } .cb-seed-warning { background: rgba(248,113,113,.05); border: 1px solid rgba(248,113,113,.2); border-right: 3px solid var(--cb-red); border-radius: var(--cb-radius); padding: 14px 16px; font-size: .85rem; color: var(--cb-text-2); line-height: 1.7; margin-top: 14px; } .cb-seed-warning strong { color: var(--cb-red); } /* ── Where to buy ── */ .cb-buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cb-buy-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(0,0,0,.02); border: 1px solid var(--cb-border); border-radius: 9px; text-decoration: none; color: var(--cb-text-2); font-size: .85rem; font-weight: 600; transition: all .18s; } .cb-buy-item:hover { background: rgba(0,0,0,.06); border-color: var(--cb-border-h); color: var(--cb-text); transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,0,0,.09); } .cb-buy-logo { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 900; color: #fff; flex-shrink: 0; } .cb-buy-info .bi-name { font-weight: 700; color: var(--cb-text); font-size: .88rem; } .cb-buy-info .bi-type { font-size: .7rem; color: var(--cb-text-3); } /* ── External links ── */ .cb-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cb-ext-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(0,0,0,.02); border: 1px solid var(--cb-border); border-radius: 9px; text-decoration: none; color: var(--cb-text-2); font-size: .85rem; font-weight: 600; transition: all .18s; } .cb-ext-link:hover { background: rgba(0,0,0,.06); border-color: var(--cb-border-h); color: var(--cb-text); transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,0,0,.09); } .cb-ext-link .icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--cb-green); } .cb-ext-link .el-label { font-size: .7rem; color: var(--cb-text-3); display: block; } /* ── FAQ ── */ .cb-faq-list { display: flex; flex-direction: column; gap: 10px; } .cb-faq-item { background: var(--cb-bg-card); border: 1px solid var(--cb-border); border-radius: 10px; overflow: hidden; } .cb-faq-q { width: 100%; background: none; border: none; color: var(--cb-text); font-family: inherit; font-size: .93rem; font-weight: 600; padding: 15px 18px; text-align: right; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: background .15s; } .cb-faq-q:hover { background: rgba(0,0,0,.03); } .cb-faq-q svg { flex-shrink: 0; transition: transform .25s; color: var(--cb-text-3); } .cb-faq-item.open .cb-faq-q svg { transform: rotate(180deg); } .cb-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .cb-faq-item.open .cb-faq-a { max-height: 500px; } .cb-faq-a p { padding: 0 18px 18px; font-size: .9rem; color: var(--cb-text-2); line-height: 1.8; } /* ── Risks ── */ .cb-risk-list { display: flex; flex-direction: column; gap: 10px; } .cb-risk-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: rgba(248,113,113,.04); border: 1px solid rgba(248,113,113,.12); border-right: 3px solid var(--cb-red); border-radius: var(--cb-radius); } .cb-risk-item .ri-icon { color: var(--cb-red); flex-shrink: 0; margin-top: 2px; } .cb-risk-item .ri-text { font-size: .88rem; color: var(--cb-text-2); line-height: 1.7; } .cb-risk-item .ri-title { font-weight: 700; color: var(--cb-text); margin-bottom: 3px; font-size: .9rem; } .cb-alert { background: rgba(13,148,136,.05); border: 1px solid rgba(13,148,136,.2); border-right: 3px solid var(--cb-teal); border-radius: var(--cb-radius); padding: 14px 16px; font-size: .82rem; color: var(--cb-text-2); line-height: 1.65; } /* ── Disclaimer ── */ .cb-disclaimer { background: rgba(245,158,11,.05); border: 1px solid rgba(245,158,11,.22); border-right: 3px solid #f59e0b; border-radius: var(--cb-radius); padding: 20px 22px; } .cb-disclaimer-text { font-size: .86rem; color: var(--cb-text-2); line-height: 1.85; } .cb-disclaimer-text p + p { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); font-size: .8rem; color: var(--cb-label); } /* ── SIDEBAR ── */ .cb-sidebar { display: flex; flex-direction: column; gap: 18px; position: static; padding: 36px 20px 36px 24px; border-right: 1px solid var(--cb-border); background: rgba(0,0,0,.018); } .cb-side-card { background: var(--cb-bg-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); padding: 18px 16px; position: relative; transition: transform .22s ease, box-shadow .22s ease; } .cb-side-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,.13), 0 4px 14px rgba(22,163,74,.07); } .cb-side-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; color: var(--cb-label); margin-bottom: 14px; } .cb-info-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.07); gap: 10px; } .cb-info-row:last-child { border-bottom: none; } .cb-info-row .ik { font-size: .8rem; color: var(--cb-text-2); line-height: 1.3; font-weight: 500; } .cb-info-row .ik .en { font-size: .67rem; display: block; color: var(--cb-label); } .cb-info-row .iv { font-size: .85rem; color: var(--cb-text); font-weight: 600; text-align: left; } .cb-related-list { display: flex; flex-direction: column; gap: 8px; } .cb-related-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(0,0,0,.02); border: 1px solid var(--cb-border); border-radius: 8px; text-decoration: none; color: var(--cb-text-2); font-size: .88rem; transition: all .18s; } .cb-related-link:hover { background: rgba(0,0,0,.06); border-color: var(--cb-border-h); color: var(--cb-text); transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,.07); } .cb-coin-mini { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 900; color: #fff; flex-shrink: 0; } .cb-related-info { flex: 1; } .cb-related-name { font-weight: 700; font-size: .85rem; color: var(--cb-text); } .cb-related-sym { font-size: .7rem; color: var(--cb-text-3); } .cb-related-price { text-align: left; } .cb-related-price .rp-val { font-size: .82rem; font-weight: 700; color: var(--cb-text); } .cb-related-price .rp-chg { font-size: .7rem; } .cb-related-price .rp-chg.up { color: var(--cb-green); } .cb-related-price .rp-chg.down { color: var(--cb-red); } /* ── HUB PAGE ── */ .cb-wrap { max-width: 1400px; margin: 0 auto; padding: 36px 24px 80px; } .cb-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; } .cb-search-wrap { position: relative; flex: 1; min-width: 220px; } .cb-search { width: 100%; padding: 10px 16px 10px 40px; border: 1px solid var(--cb-border); border-radius: 10px; background: #fff; font-family: inherit; font-size: .88rem; color: var(--cb-text); outline: none; transition: border-color .15s; } .cb-search:focus { border-color: var(--cb-green); box-shadow: 0 0 0 3px rgba(22,163,74,.1); } .cb-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cb-label); pointer-events: none; } .cb-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .cb-tab { background: transparent; border: 1px solid var(--cb-border); border-radius: 8px; color: var(--cb-text-2); font-family: inherit; font-size: .82rem; font-weight: 600; padding: 7px 16px; cursor: pointer; transition: all .15s; white-space: nowrap; } .cb-tab:hover { border-color: var(--cb-green); color: var(--cb-green); background: rgba(22,163,74,.06); } .cb-tab.active { background: var(--cb-green); border-color: var(--cb-green); color: #fff; } /* Table */ .cb-table-wrap { background: #fff; border: 1px solid var(--cb-border); border-radius: var(--cb-radius); overflow: hidden; margin-bottom: 24px; } .cb-table-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--cb-border); } .cb-table-header-title { font-size: .88rem; font-weight: 700; color: var(--cb-text); } .cb-table-count { font-size: .78rem; color: var(--cb-label); background: var(--cb-bg-card); border: 1px solid var(--cb-border); border-radius: 6px; padding: 3px 10px; } .cb-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .cb-table thead th { padding: 12px 16px; text-align: right; font-size: .7rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-label); border-bottom: 1px solid var(--cb-border); white-space: nowrap; } .cb-table thead th.num, .cb-table thead th.num-col, .cb-table thead th.price-col { text-align: left; } .cb-table tbody tr { border-bottom: 1px solid rgba(0,0,0,.05); transition: background .12s; cursor: pointer; } .cb-table tbody tr:last-child { border-bottom: none; } .cb-table tbody tr:hover { background: rgba(22,163,74,.04); } .cb-table tbody td { padding: 14px 16px; color: var(--cb-text-2); vertical-align: middle; } .cb-table tbody td.num, .cb-table tbody td.num-col, .cb-table tbody td.price-col { text-align: left; font-weight: 600; color: var(--cb-text); } .cb-coin-cell { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .cb-coin-info .ci-name { font-weight: 700; font-size: .9rem; color: var(--cb-text); } .cb-coin-info .ci-sym { font-size: .72rem; color: var(--cb-label); } .cb-chg { font-size: .82rem; font-weight: 700; } .cb-chg.up { color: var(--cb-green); } .cb-chg.down { color: var(--cb-red); } .cb-coin-tag { font-size: .63rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; } .cb-tag-l1 { background: rgba(22,163,74,.1); color: var(--cb-green); border: 1px solid rgba(22,163,74,.2); } .cb-tag-l2 { background: rgba(13,148,136,.1); color: var(--cb-teal); border: 1px solid rgba(13,148,136,.2); } .cb-tag-defi { background: rgba(138,43,226,.1); color: #7c3aed; border: 1px solid rgba(138,43,226,.2); } .cb-tag-stable{ background: rgba(59,130,246,.1); color: #2563eb; border: 1px solid rgba(59,130,246,.2); } .cb-tag-meme { background: rgba(249,115,22,.1); color: #ea580c; border: 1px solid rgba(249,115,22,.2); } .cb-view-btn { display: inline-flex; align-items: center; padding: 5px 12px; background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.2); border-radius: 7px; color: var(--cb-green); font-size: .78rem; font-weight: 700; text-decoration: none; transition: all .15s; white-space: nowrap; } .cb-view-btn:hover { background: var(--cb-green); color: #fff; } .hide-mob { } /* Pagination */ .cb-pagination { display: flex; align-items: center; gap: 8px; } .cb-page-btn { background: #fff; border: 1px solid var(--cb-border); border-radius: 8px; color: var(--cb-text-2); font-family: inherit; font-size: .85rem; font-weight: 600; padding: 7px 14px; cursor: pointer; transition: all .15s; } .cb-page-btn:hover { border-color: var(--cb-green); color: var(--cb-green); } .cb-page-btn.active { background: var(--cb-green); border-color: var(--cb-green); color: #fff; } .cb-page-dots { color: var(--cb-label); padding: 0 4px; } /* ── RESPONSIVE ── */ @media (max-width: 1100px) { .cb-layout { grid-template-columns: minmax(0, 860px) 1fr; } .cb-toc-panel { display: none; } } @media (max-width: 900px) { .cb-layout { grid-template-columns: 1fr; } .cb-sidebar { order: -1; border-right: none; border-top: 1px solid var(--cb-border); padding: 24px 16px; } .cb-data-grid, .cb-onchain-grid { grid-template-columns: 1fr 1fr; } .cb-wallet-grid { grid-template-columns: 1fr; } .cb-main { padding: 28px 20px 60px; } } /* AUDIT FIX: hub table tags secondary columns with `.hide-mob`; the original only hid `.cb-hide-mob`, so they never collapsed. Hide them on tablet/phone. */ @media (max-width: 768px) { .cb-table .hide-mob { display: none; } } @media (max-width: 540px) { .cb-data-grid, .cb-onchain-grid, .cb-eco-grid, .cb-analyst-grid, .cb-buy-grid, .cb-links-grid { grid-template-columns: 1fr; } .cb-compare thead th, .cb-compare tbody td { padding: 8px 10px; font-size: .78rem; } .cb-consensus-steps { grid-template-columns: 1fr; } .hide-mob, .cb-hide-mob { display: none; } }