/* ==========================================================================
Kurstabell (CoinGecko) — kgn-kt
Self-contained block styles. Breaks out of the 895px article column to a
CoinMarketCap-like width (max 1320px) without needing a new page template.
No /
inside the module — the theme forces 17px/1.9 on those.
========================================================================== */
.kgn-kt {
--kt-ink: #181818;
--kt-ink-2: #595c5c;
--kt-muted: #8b95a3;
--kt-line: #ededed;
--kt-surface: #f5f7f9;
--kt-surface-2: #fafafa;
--kt-bg: #fff;
--kt-up: #0e9f6e;
--kt-down: #e02424;
--kt-line-chart: #0051ff;
--kt-accent: #0051ff;
--kt-radius: 14px;
--kt-max: 1320px;
/* JS sets --kt-vw to the real client width so the breakout never adds a horizontal scrollbar. */
--kt-w: min(var(--kt-max), calc(var(--kt-vw, 100vw) - 32px));
position: relative;
box-sizing: border-box;
width: var(--kt-w);
margin: 32px 0 40px calc(50% - var(--kt-w) / 2);
color: var(--kt-ink);
font-family: inherit;
font-size: 15px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
.kgn-kt *, .kgn-kt *::before, .kgn-kt *::after { box-sizing: border-box; }
.kgn-kt button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.kgn-kt a { text-decoration: none; }
.kgn-kt svg { display: block; }
/* The theme gives img/svg max-width:100%, which makes auto table layout misbehave — reset inside the module. */
.kgn-kt svg, .kgn-kt img { max-width: none; }
.kgn-kt .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* --------------------------------------------------------------------------
Page layout on pages that contain the block (body.kgn-has-kurstabell, set in PHP)
The article container itself is widened to the module width, so the H1, intro
and table share one left edge. The module then fills the container instead of
breaking out of it. Running text is capped so lines don't get too long.
-------------------------------------------------------------------------- */
body.kgn-has-kurstabell .page-content .container.page-info { max-width: 1800px; padding-left: 24px; padding-right: 24px; }
body.kgn-has-kurstabell .kgn-kt { width: 100%; margin-left: 0; margin-right: 0; }
/* Full page width belongs to the price module (and the partner bar inside it). EVERYTHING
else in the article — headings, text, «Les også»-boxes, images, the signup block — keeps a
readable measure and is CENTRED under it. Written as "every child except the module" rather
than a list of tags, so a block type we haven't thought of can't end up flush left.
Text stays left-aligned inside the column; only the column itself is centred. */
body.kgn-has-kurstabell .container.page-info > * {
max-width: 860px;
margin-left: auto !important;
margin-right: auto !important;
}
body.kgn-has-kurstabell .container.page-info > .kgn-kt,
body.kgn-has-kurstabell .container.page-info > .kgn-km,
body.kgn-has-kurstabell .container.page-info > .alignfull,
body.kgn-has-kurstabell .container.page-info > .alignwide {
max-width: none;
}
/* Type: the theme forces 17px/1.9 on p and li, which reads thin and airy at this width. */
body.kgn-has-kurstabell .container.page-info > p,
body.kgn-has-kurstabell .container.page-info > ul li,
body.kgn-has-kurstabell .container.page-info > ol li {
font-size: 18px !important;
line-height: 1.75 !important;
color: #24303c !important;
}
body.kgn-has-kurstabell .container.page-info > p { margin-bottom: 22px !important; }
/* Headings: tighter, darker, with real rhythm around them. */
body.kgn-has-kurstabell .container.page-info > h1 {
margin-bottom: 16px !important;
font-size: 44px;
line-height: 1.12;
font-weight: 900;
letter-spacing: -0.02em;
color: #0a2540;
text-wrap: balance;
}
body.kgn-has-kurstabell .container.page-info > h1 + p {
margin-bottom: 34px !important;
font-size: 19px !important;
line-height: 1.6 !important;
color: #35414d !important;
}
body.kgn-has-kurstabell .container.page-info > h2 {
margin: 46px auto 14px !important;
font-size: 30px;
line-height: 1.22;
font-weight: 800;
letter-spacing: -0.015em;
color: #0a2540;
}
body.kgn-has-kurstabell .container.page-info > h3 {
margin: 30px auto 10px !important;
font-size: 22px;
line-height: 1.3;
font-weight: 800;
color: #0a2540;
}
@media (max-width: 782px) {
body.kgn-has-kurstabell .page-content .container.page-info { padding-left: 16px; padding-right: 16px; }
body.kgn-has-kurstabell .container.page-info > h1 { font-size: 32px; }
body.kgn-has-kurstabell .container.page-info > h1 + p { font-size: 18px !important; }
body.kgn-has-kurstabell .container.page-info > h2 { margin-top: 34px !important; font-size: 25px; }
body.kgn-has-kurstabell .container.page-info > h3 { font-size: 20px; }
body.kgn-has-kurstabell .container.page-info > p,
body.kgn-has-kurstabell .container.page-info > ul li,
body.kgn-has-kurstabell .container.page-info > ol li { font-size: 17px !important; line-height: 1.7 !important; }
}
/* --------------------------------------------------------------------------
Promo bar (top, scrolls away, single outbound link)
-------------------------------------------------------------------------- */
.kgn-kt__bar {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 22px;
border-radius: var(--kt-radius);
background: linear-gradient(120deg, #0a2540 0%, #0b3a5e 50%, #075434 100%); /* ends in eToro Forest */
color: #fff;
overflow: hidden;
}
.kgn-kt__bar-main { display: flex; align-items: center; gap: 20px 28px; padding: 22px 26px 20px 26px; }
/* partner logo straight on the dark bar (eToro: Mint on dark is their default mark) */
.kgn-kt__bar-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 150px; padding-right: 28px; border-right: 1px solid rgba(255,255,255,.14); }
.kgn-kt__bar-logo img { display: block; height: 30px; width: auto; max-width: 160px; }
.kgn-kt__bar-text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kgn-kt__bar-title { display: block; font-size: 23px; line-height: 1.2; font-weight: 900; letter-spacing: -0.015em; text-wrap: balance; }
.kgn-kt__bar-sub { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.82); }
/* checkmark points — the theme forces 17px/1.9 on li, so these are pinned with !important */
.kgn-kt__bar-points { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0 0 !important; padding: 0 !important; list-style: none !important; }
.kgn-kt__bar-points li { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 700; color: #fff !important; list-style: none !important; }
.kgn-kt__bar-points li::before { content: none !important; }
.kgn-kt__bar-points svg { flex: 0 0 16px; color: #6dff8a; } /* eToro Mint */
.kgn-kt__bar-cta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.kgn-kt__bar-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,0.6); text-align: center; }
/* Wording drawn from the stylesheet rather than sitting as text in the document. */
.kgn-kt__bar-label::before { content: "Annon" "selenke"; }
.kgn-kt__bar-btn {
display: inline-block;
min-width: 260px;
padding: 14px 34px;
border-radius: 999px;
background: #00d084;
color: #fff !important;
font-weight: 800;
font-size: 18px;
text-align: center;
text-shadow: 0 1px 1px rgba(0,0,0,.18);
white-space: nowrap;
transition: transform .15s ease, background .15s ease;
}
.kgn-kt__bar-btn:hover { background: #35b782; transform: translateY(-1px); }
.kgn-kt__bar-warn { padding: 10px 28px 12px; border-top: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.18); font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.72); text-align: center; }
.kgn-kt__bar-warn a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.kgn-kt__bar-warn a:hover { color: #00d084; }
/* The bar's iframe on the live site. Initial heights are a guess to avoid layout shift;
the child document posts its real height as soon as it renders. */
.kgn-kt__barframe { display: block; width: 100%; height: 160px; border: 0; margin: 0 0 22px; border-radius: var(--kt-radius); overflow: hidden; background: #0a2540; color-scheme: light; transition: height .15s ease; }
.kgn-kt__barframe.has-points { height: 190px; }
/* --------------------------------------------------------------------------
Market strip (derived from the rows) + quick filters + favourites
-------------------------------------------------------------------------- */
.kgn-kt__market { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kgn-kt__market > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--kt-line); border-radius: 12px; background: var(--kt-surface-2); min-width: 0; }
.kgn-kt__market small { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--kt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kgn-kt__market b { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.kgn-kt__market-sep { color: var(--kt-muted); font-weight: 600; }
.kgn-kt__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 0 12px; }
.kgn-kt__filters.has-next { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.kgn-kt__filters.has-prev { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.kgn-kt__filters.has-prev.has-next { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.kgn-kt__chipbtn { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--kt-line); background: var(--kt-bg); font-size: 13px; font-weight: 800; color: var(--kt-ink-2); transition: background .15s, color .15s, border-color .15s; }
.kgn-kt__chipbtn:hover { border-color: var(--kt-muted); color: var(--kt-ink); }
.kgn-kt__chipbtn.is-active { background: var(--kt-ink); color: #fff; border-color: var(--kt-ink); }
.kgn-kt__chipbtn [data-role="fav-count"] { font-weight: 700; opacity: .75; }
.kgn-kt__filters-gap { flex: 1 1 auto; }
.kgn-kt__toggle-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--kt-line); font-size: 13px; font-weight: 700; color: var(--kt-ink-2); cursor: pointer; user-select: none; }
.kgn-kt__toggle-chip input { width: 15px; height: 15px; margin: 0 !important; accent-color: var(--kt-ink); cursor: pointer; }
.kgn-kt__toggle-chip:has(input:checked) { border-style: solid; border-color: var(--kt-ink); color: var(--kt-ink); background: var(--kt-surface); }
.kgn-kt__fav { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: -4px; border-radius: 50%; color: var(--kt-line); flex: 0 0 24px; transition: color .15s, transform .15s; }
.kgn-kt__fav svg { fill: currentColor; }
.kgn-kt__row:hover .kgn-kt__fav { color: var(--kt-muted); }
.kgn-kt__fav:hover { color: #f5b301; transform: scale(1.15); }
.kgn-kt__fav.is-on, .kgn-kt__row:hover .kgn-kt__fav.is-on { color: #f5b301; }
.kgn-kt__fav:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 1px; }
/* --------------------------------------------------------------------------
Header: title, updated, search, currency
-------------------------------------------------------------------------- */
.kgn-kt__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 14px 24px;
margin-bottom: 14px;
}
.kgn-kt__title h2 {
margin: 0 0 4px !important;
font-size: 28px;
line-height: 1.15;
font-weight: 900;
letter-spacing: -0.02em;
}
.kgn-kt__updated { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--kt-ink-2); padding-bottom: 10px; }
.kgn-kt__live { width: 8px; height: 8px; border-radius: 50%; background: var(--kt-up); box-shadow: 0 0 0 0 rgba(14,159,110,.5); animation: kgn-kt-pulse 2s infinite; }
.kgn-kt.is-stale .kgn-kt__live { background: #f59e0b; animation: none; }
@keyframes kgn-kt-pulse { 0% { box-shadow: 0 0 0 0 rgba(14,159,110,.45); } 70% { box-shadow: 0 0 0 7px rgba(14,159,110,0); } 100% { box-shadow: 0 0 0 0 rgba(14,159,110,0); } }
.kgn-kt__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kgn-kt__search {
display: flex; align-items: center; gap: 8px;
height: 40px; padding: 0 14px;
border: 1px solid var(--kt-line); border-radius: 999px; background: var(--kt-bg);
color: var(--kt-muted);
transition: border-color .15s, box-shadow .15s;
}
.kgn-kt__search:focus-within { border-color: var(--kt-accent); box-shadow: 0 0 0 3px rgba(0,81,255,.12); color: var(--kt-ink); }
.kgn-kt__search input {
width: 200px; height: 100%; border: 0 !important; outline: 0; background: transparent !important;
padding: 0 !important; margin: 0 !important; font: inherit !important; font-size: 14px !important; color: var(--kt-ink); box-shadow: none !important;
}
.kgn-kt__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kgn-kt__cur { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--kt-surface); }
.kgn-kt__cur button {
height: 34px; padding: 0 16px; border-radius: 999px;
font-size: 13px; font-weight: 800; color: var(--kt-ink-2);
transition: background .15s, color .15s, box-shadow .15s;
}
.kgn-kt__cur button[aria-pressed="true"] { background: var(--kt-bg); color: var(--kt-ink); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
/* --------------------------------------------------------------------------
Table
-------------------------------------------------------------------------- */
.kgn-kt__scroll {
border: 1px solid var(--kt-line);
border-radius: var(--kt-radius);
background: var(--kt-bg);
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.kgn-kt__table {
width: 100%;
min-width: 980px;
margin: 0 !important;
border-collapse: separate;
border-spacing: 0;
font-size: 15px;
table-layout: auto;
}
.kgn-kt__table th, .kgn-kt__table td {
padding: 0 14px;
border: 0 !important;
border-bottom: 1px solid var(--kt-line) !important;
background: var(--kt-bg);
vertical-align: middle;
text-align: left;
white-space: nowrap;
}
.kgn-kt__table th { height: 46px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--kt-ink-2); text-transform: none; }
.kgn-kt__table td { height: 64px; }
.kgn-kt__table tbody tr:last-child td { border-bottom: 0 !important; }
.kgn-kt__table thead th { position: sticky; top: 0; z-index: 3; background: var(--kt-surface-2); }
.kgn-kt__table thead th:first-child { border-top-left-radius: var(--kt-radius); }
.kgn-kt__table thead th:last-child { border-top-right-radius: var(--kt-radius); }
.kgn-kt__table th[data-sort] button { display: inline-flex; align-items: center; gap: 4px; padding: 0; height: 100%; }
.kgn-kt__table th[data-sort] button::after {
content: ""; width: 0; height: 0; opacity: 0;
border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
transition: opacity .15s, transform .15s;
}
.kgn-kt__table th[data-sort]:hover button::after { opacity: .35; }
.kgn-kt__table th[aria-sort="ascending"] button::after { opacity: 1; transform: rotate(180deg); }
.kgn-kt__table th[aria-sort="descending"] button::after { opacity: 1; }
.kgn-kt__table th.c-num button { flex-direction: row-reverse; }
.kgn-kt__table .c-num { text-align: right; font-variant-numeric: tabular-nums; }
.kgn-kt__table .c-rank { width: 56px; color: var(--kt-muted); font-size: 13px; text-align: center; }
.kgn-kt__table .c-name { min-width: 220px; }
.kgn-kt__table .c-spark { width: 150px; text-align: center; }
.kgn-kt__table .c-exp { width: 48px; padding-left: 0; padding-right: 10px; text-align: right; }
.kgn-kt__table th.c-spark { text-align: center; }
.kgn-kt__row { cursor: pointer; transition: background .12s; }
.kgn-kt__row:hover td { background: var(--kt-surface-2); }
.kgn-kt__row.is-hidden { display: none; }
.kgn-kt__empty { text-align: center !important; color: var(--kt-ink-2); height: 96px !important; }
.kgn-kt__coin { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kgn-kt__coin img { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; background: var(--kt-surface); }
.kgn-kt__coin-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
/* Some top-100 entries are tokenised funds with 50-character names — cap and ellipsise so one row never blows up the column. Full name shows in title and popup. */
.kgn-kt__coin-name { display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; color: var(--kt-ink); letter-spacing: -0.01em; }
a.kgn-kt__coin-name:hover { color: var(--kt-accent); text-decoration: underline; text-underline-offset: 2px; }
.kgn-kt__coin-sym { font-size: 12px; font-weight: 700; color: var(--kt-muted); letter-spacing: .02em; }
.kgn-kt__table td[data-role="price"] { font-weight: 700; }
.kgn-kt .is-up { color: var(--kt-up); }
.kgn-kt .is-down { color: var(--kt-down); }
.kgn-kt__table td.is-up::before, .kgn-kt__table td.is-down::before {
content: ""; display: inline-block; width: 0; height: 0; margin-right: 5px; vertical-align: 2px;
border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.kgn-kt__table td.is-up::before { border-bottom: 6px solid currentColor; }
.kgn-kt__table td.is-down::before { border-top: 6px solid currentColor; }
/* price flash on live update */
.kgn-kt td.flash-up { animation: kgn-kt-flash-up .9s ease-out; }
.kgn-kt td.flash-down { animation: kgn-kt-flash-down .9s ease-out; }
@keyframes kgn-kt-flash-up { 0% { background: rgba(14,159,110,.18); } 100% { background: transparent; } }
@keyframes kgn-kt-flash-down { 0% { background: rgba(224,36,36,.16); } 100% { background: transparent; } }
/* sparkline */
.kgn-kt__spark { display: block; width: 120px; height: 36px; margin: 0 auto; overflow: visible; }
.kgn-kt__spark path { fill: none; stroke: var(--kt-up); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kgn-kt__spark.is-down path { stroke: var(--kt-down); }
.kgn-kt__spark[data-lazy] { background: linear-gradient(90deg, transparent, var(--kt-surface) 50%, transparent); background-size: 200% 100%; animation: kgn-kt-shimmer 1.4s linear infinite; border-radius: 4px; }
@keyframes kgn-kt-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.kgn-kt__toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%;
color: var(--kt-muted);
transition: background .15s, color .15s;
}
.kgn-kt__row:hover .kgn-kt__toggle { background: var(--kt-surface); color: var(--kt-ink); }
.kgn-kt__toggle:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 2px; }
/* footer */
.kgn-kt__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 12px 4px 0; font-size: 13px; color: var(--kt-muted); }
/* stale */
.kgn-kt.is-stale .kgn-kt__table td[data-role="price"] { color: var(--kt-ink-2); }
/* --------------------------------------------------------------------------
Detail popup (