:root { /* Light is the default theme */ --bg: #f5f7fa; --panel: #ffffff; --panel-2: #eef1f6; --border: #d8dee8; --text: #1a2230; --muted: #5a6573; --brand: #2f6fe0; --brand-ink: #ffffff; --risk-low: #1f9d55; --risk-medium: #b59413; --risk-elevated: #c4641c; --risk-high: #c0392b; --radius: 10px; --maxw: 1100px; } /* Dark theme overrides (opt-in via data-theme="dark" on ) */ [data-theme="dark"] { --bg: #0f1216; --panel: #171b21; --panel-2: #1e232b; --border: #2a313b; --text: #e7ecf2; --muted: #9aa6b3; --brand: #4f8cff; --brand-ink: #ffffff; } [data-theme="dark"] .disclaimer-bar { background: #3a2a12; color: #ffd98a; border-bottom-color: #5a4316; } [data-theme="dark"] .ex-logo { background: #fff; } * { box-sizing: border-box; } /* ── LATEST NEWS ticker (dark band, both themes) ─────────────── */ .ticker { display: flex; align-items: stretch; background: #0e1424; color: #e7ecf2; overflow: hidden; font-size: .85rem; border-bottom: 1px solid #1b2238; } .ticker-label { display: flex; align-items: center; gap: 8px; background: #d51e2a; color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 9px 16px; white-space: nowrap; flex: 0 0 auto; } .ticker-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ticker-blink 1.4s ease-in-out infinite; } .ticker-track { position: relative; flex: 1 1 auto; overflow: hidden; } .ticker-track::after { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 40px; background: linear-gradient(to right, transparent, #0e1424); pointer-events: none; } .ticker-move { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; padding-left: 14px; will-change: transform; animation: ticker-scroll 45s linear infinite; } .ticker:hover .ticker-move { animation-play-state: paused; } .ticker-item { color: #e7ecf2; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 9px 0; } .ticker-item:hover { color: #fff; text-decoration: none; } .ticker-date { background: #1e2740; color: #9fb0d0; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 4px; letter-spacing: .03em; } .ticker-sep { color: #46527a; } .ticker-all { display: flex; align-items: center; background: #0a0f1c; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .76rem; padding: 9px 16px; white-space: nowrap; flex: 0 0 auto; } .ticker-all:hover { color: #fff; background: #131a2e; text-decoration: none; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes ticker-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .ticker-move { animation: none; } } /* External network links in the header nav */ .nav-sep { color: var(--border); margin-left: 18px; } .main-nav a.nav-ext { font-size: .82rem; opacity: .8; } .main-nav a.nav-ext:hover { opacity: 1; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } /* Header */ .site-header { border-bottom: 1px solid var(--border); background: var(--panel); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; max-width: var(--maxw); margin: 0 auto; } .brand { font-weight: 700; font-size: 1.2rem; color: var(--text); } .brand:hover { text-decoration: none; } .main-nav a { color: var(--muted); margin-left: 18px; font-weight: 500; } .main-nav a.active, .main-nav a:hover { color: var(--text); text-decoration: none; } .lang-switch { margin-left: 18px; } .lang-switch a { margin-left: 8px; font-size: .85rem; } /* Disclaimer bar (always visible) */ .disclaimer-bar { background: #fff4d6; color: #7a5b00; border-bottom: 1px solid #f0dca0; font-size: .9rem; } .disclaimer-bar .container { padding-top: 8px; padding-bottom: 8px; text-align: center; } main.container { padding-top: 32px; padding-bottom: 48px; } /* Buttons */ .btn { display: inline-block; padding: 10px 18px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: var(--panel-2); font-weight: 600; cursor: pointer; } .btn:hover { border-color: var(--brand); text-decoration: none; } .btn-primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } /* Hero */ .hero { text-align: center; padding: 40px 0 28px; } .hero h1 { font-size: 2.2rem; margin: 0 0 12px; } .hero-sub { color: var(--muted); font-size: 1.1rem; max-width: 640px; margin: 0 auto 24px; } /* Feature cards */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .card h2 { font-size: 1.05rem; margin: 0 0 8px; } .card p { color: var(--muted); margin: 0; } .how { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin: 28px 0; } .how h2 { margin-top: 0; } .how p { color: var(--muted); } .risk-legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; } /* Compare page */ .compare-head h1 { margin-bottom: 4px; } .compare-head p { color: var(--muted); margin-top: 0; } .filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 20px 0 12px; } .filters label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted); } .filters label.grow { flex: 1; min-width: 180px; } .filters label.checkbox { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 8px; } .filters select, .filters input[type="search"] { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font-size: .95rem; min-width: 150px; } .filters input[type="search"] { width: 100%; } .filters .btn { padding: 9px 16px; } .rowcount { color: var(--muted); font-size: .9rem; margin: 6px 2px 12px; } /* Table */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } table.yields { width: 100%; border-collapse: collapse; font-size: .95rem; table-layout: auto; } table.yields th, table.yields td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; } /* Text columns (Coin, Protocol, Blockchain = cols 1-3) may wrap so the table always fits; numeric + Risk + link columns stay on one line. */ table.yields td:nth-child(1), table.yields td:nth-child(2), table.yields td:nth-child(3) { word-break: break-word; } table.yields th.num, table.yields td.num, table.yields th:nth-child(6), table.yields td:nth-child(6), table.yields th.nolink, table.yields td.nolink { white-space: nowrap; } table.yields thead th { background: var(--panel-2); color: var(--muted); font-weight: 600; position: sticky; top: 0; } table.yields th.sortable { cursor: pointer; user-select: none; } table.yields th.sortable:hover { color: var(--text); } table.yields th.num, table.yields td.num { text-align: right; } table.yields th:nth-child(6), table.yields td:nth-child(6) { width: 1%; } /* Risk: shrink to content */ table.yields td.nolink, table.yields th.nolink { width: 1%; text-align: center; } table.yields tbody tr:hover { background: var(--panel); } table.yields td.coin { font-weight: 600; } table.yields td.apy { color: #6fd08c; font-weight: 600; } table.yields td.nolink a { font-size: 1.1rem; } .tag-stable { display: inline-block; font-size: .68rem; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; } /* Risk badges */ .risk-badge { display: inline-block; font-size: .78rem; font-weight: 700; color: #fff; border-radius: 999px; padding: 3px 11px; } .risk-low { background: var(--risk-low); } .risk-medium { background: var(--risk-medium); } .risk-elevated { background: var(--risk-elevated); } .risk-high { background: var(--risk-high); } .empty-msg { text-align: center; color: var(--muted); padding: 28px; } /* Footer */ .site-footer { border-top: 1px solid var(--border); background: var(--panel); margin-top: 40px; } .footer-grid { display: grid; grid-template-columns: 1.1fr 1.6fr; gap: 40px; padding-top: 28px; padding-bottom: 22px; } .footer-about { max-width: 320px; } .footer-brand { font-weight: 700; font-size: 1.15rem; color: var(--text); } .footer-tagline { color: var(--muted); font-size: .88rem; margin: 6px 0 12px; line-height: 1.5; } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .footer-col h4 { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin: 0 0 7px; } .footer-col a { color: var(--text); font-size: .9rem; } .footer-col a:hover { color: var(--brand); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 18px; padding-bottom: 30px; } .disclaimer-full { color: var(--muted); font-size: .82rem; line-height: 1.5; max-width: 900px; margin-top: 0; } .footer-meta { color: var(--muted); font-size: .8rem; margin: 6px 0 0; } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } .footer-links { grid-template-columns: 1fr 1fr; } } /* ── News / articles ─────────────────────────────────────── */ .home-news { margin: 40px 0 8px; } .home-news-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .home-news-head h2 { margin: 0; } .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .article-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .15s; } .article-card:hover { border-color: var(--brand); } .article-card a { display: block; padding: 18px; color: var(--text); } .article-card a:hover { text-decoration: none; } .article-card h2, .article-card h3 { margin: 8px 0 8px; font-size: 1.08rem; line-height: 1.35; } .article-cat { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); } .article-excerpt { color: var(--muted); font-size: .9rem; margin: 0 0 12px; } .article-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .8rem; } .readmore { color: var(--brand); font-weight: 600; font-size: .82rem; } .pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 28px 0; color: var(--muted); font-size: .9rem; } .breadcrumbs { color: var(--muted); font-size: .85rem; margin-bottom: 18px; } .breadcrumbs a { color: var(--muted); } .breadcrumbs a:hover { color: var(--text); } /* Single article */ .article-page { max-width: 760px; margin: 0 auto; } .article-page-header h1 { font-size: 2rem; line-height: 1.2; margin: 8px 0 12px; } .article-page-header .article-meta { justify-content: flex-start; gap: 16px; margin-bottom: 24px; } .article-body { font-size: 1.06rem; line-height: 1.7; } .article-body h2 { font-size: 1.35rem; margin: 28px 0 10px; } .article-body h3 { font-size: 1.12rem; margin: 22px 0 8px; } .article-body p { margin: 0 0 16px; } .article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 22px; } .article-body li { margin: 4px 0; } .article-body a { color: var(--brand); } .article-body blockquote { border-left: 3px solid var(--border); margin: 16px 0; padding: 4px 16px; color: var(--muted); } .article-body code { background: var(--panel-2); padding: 1px 6px; border-radius: 5px; font-size: .9em; } .article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; } .article-tag { font-size: .78rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } .article-cta { margin: 28px 0; padding: 22px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; } .article-back { max-width: 760px; margin: 8px auto 0; } .article-back a { color: var(--muted); } /* ── Exchanges section ───────────────────────────────────── */ .explainer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; } .explainer-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .explainer-card h2 { margin: 0 0 8px; font-size: 1.1rem; } .explainer-card p { color: var(--muted); margin: 0 0 10px; } .explainer-link { font-weight: 600; } .explainer-tag { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--risk-low); border: 1px solid var(--risk-low); border-radius: 999px; padding: 2px 10px; } .aff-disclosure { font-size: .85rem; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin: 8px 0 20px; } .aff-demo-note { display: inline-block; color: var(--risk-elevated); font-weight: 600; margin-left: 6px; } .exchange-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .exchange-card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; } .exchange-card.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; } .ex-featured { position: absolute; top: -10px; right: 16px; background: var(--brand); color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; } .ex-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .ex-logo { width: 48px; height: 48px; border-radius: 12px; flex: 0 0 48px; object-fit: contain; background: #fff; } .ex-avatar { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.4rem; } .ex-name { margin: 0; font-size: 1.15rem; } .ex-type { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 5px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); } .ex-type-wallet { color: #8b5cf6; } .ex-type-swap { color: #0ea5e9; } .ex-cat { font-size: .78rem; color: var(--muted); margin-left: 6px; } .ex-tagline { color: var(--text); margin: 0 0 14px; } .ex-specs { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 16px; font-size: .88rem; } .ex-specs dt { color: var(--muted); } .ex-specs dd { margin: 0; text-align: right; } .ex-cta { margin-top: auto; text-align: center; } /* ── Footer legal nav ────────────────────────────────────── */ .footer-nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 14px; } .footer-nav a { color: var(--muted); font-size: .85rem; } .footer-nav a:hover { color: var(--text); } .footer-col-title { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 6px; } /* ── Legal pages ─────────────────────────────────────────── */ .legal-page { max-width: 760px; margin: 0 auto; } .legal-page h1 { margin-bottom: 4px; } .legal-updated { color: var(--muted); font-size: .85rem; margin: 0 0 20px; } .legal-note { background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 8px; padding: 12px 16px; color: var(--muted); font-size: .9rem; margin-bottom: 24px; } .legal-page h2 { font-size: 1.2rem; margin: 26px 0 8px; } .legal-page p, .legal-page li { color: var(--text); line-height: 1.65; } .legal-page ul { padding-left: 20px; } .legal-page a { color: var(--brand); } /* ── Theme toggle ────────────────────────────────────────── */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 6px 9px; margin-left: 14px; } .theme-toggle:hover { color: var(--text); border-color: var(--brand); } /* ── Cookie consent banner ───────────────────────────────── */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; max-width: 720px; margin: 0 auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.4); display: none; } .cookie-banner.show { display: block; } .cookie-banner p { margin: 0 0 12px; font-size: .9rem; color: var(--muted); } .cookie-banner p a { color: var(--brand); } .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie-actions .btn { padding: 8px 18px; } @media (max-width: 720px) { .features { grid-template-columns: 1fr; } .articles-grid { grid-template-columns: 1fr; } .explainer-grid { grid-template-columns: 1fr; } .exchange-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 1.7rem; } .article-page-header h1 { font-size: 1.5rem; } .header-inner { flex-direction: column; gap: 10px; } /* Keep the comparison table readable + Risk column visible on phones */ table.yields { font-size: .85rem; } table.yields th, table.yields td { padding: 8px 9px; } .risk-badge { font-size: .7rem; padding: 2px 8px; } table.yields td.nolink, table.yields th.nolink { display: none; } /* drop the ↗ link col to free space for Risk */ }