/* ODATANO ASTRA dashboard on @odatano/brand (tokens.css), same look as the API pages. `data-theme` on switches day / night (night default, localStorage remembers). Chart colours: --series-cardano (light blue), --series-midnight (dark blue), --series-1..5 for the mix charts. */ @import url("./brand/tokens.css"); :root, [data-theme="day"] { --panel-2: var(--odt-day-bg-alt); --ink-3: #8a93ab; --accent-soft: #e8f0fe; --accent-line: rgba(12,94,207,.28); --code-bg: #e9e9ec; --code-bar: #e2e2e6; --code-ink: #1a1a2e; --code-muted: #55607a; --code-border: #dde3ef; --code-key: #0c5ecf; --header-bg: rgba(250,250,251,.88); --hover: #ededf0; --glow: none; --shadow-sm: 0 1px 2px rgba(0,27,94,.05), 0 1px 3px rgba(0,27,94,.06); --shadow-md: 0 10px 30px -12px rgba(0,27,94,.18), 0 2px 6px rgba(0,27,94,.06); --btn-bg: linear-gradient(135deg, var(--odt-day-blue), var(--odt-day-blue-400)); --btn-shadow: 0 6px 16px -6px rgba(12,94,207,.55); --ok-bg: #eefaf0; --err-bg: #fdf1f1; --warn-bg: #fff6e0; --midnight: #1b3a96; /* chart tokens (day surface #fafafb) */ --series-cardano: var(--odt-day-blue-400); --series-midnight: #1b3a96; --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-mute: #a6adbf; --grid: #e4e6ec; --axis: #c9cdd8; --tip-bg: #1a1a2e; --tip-ink: #f4f5f8; } [data-theme="night"] { --panel-2: var(--odt-night-panel-2); --ink-3: var(--odt-night-ink-3); --accent-soft: rgba(122,162,255,.14); --accent-line: rgba(122,162,255,.35); --code-bg: #13151b; --code-bar: #181b22; --code-ink: #e8eaf0; --code-muted: #6b7280; --code-border: #262a35; --code-key: #7aa2ff; --header-bg: rgba(14,15,19,.88); --hover: var(--odt-night-panel-2); --glow: none; --shadow-sm: none; --shadow-md: 0 12px 32px -14px rgba(0,0,0,.6); --btn-bg: linear-gradient(135deg, var(--odt-day-blue), var(--odt-night-accent)); --btn-shadow: none; --ok-bg: rgba(12,163,12,.14); --err-bg: rgba(208,59,59,.14); --warn-bg: rgba(250,178,25,.14); --midnight: var(--odt-night-accent); /* chart tokens (night surface #16181f) */ --series-cardano: var(--odt-day-blue-200); --series-midnight: var(--odt-night-accent-2); --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-mute: #5c6375; --grid: #232732; --axis: #333846; --tip-bg: #0b0c10; --tip-ink: #e8eaf0; } :root { --good: var(--odt-good); --warning: var(--odt-warning); --critical: var(--odt-critical); --sans: var(--odt-font-sans); --mono: var(--odt-font-mono); --r-sm: var(--odt-radius-sm); --r-md: var(--odt-radius-md); --r-lg: var(--odt-radius-lg); --r-xl: var(--odt-radius-xl); } [data-theme="night"] .only-day, :root:not([data-theme="night"]) .only-night { display: none !important; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .mono { font-family: var(--mono); } :not(pre) > code { font-family: var(--mono); font-size: .86em; background: var(--accent-soft); color: var(--accent); padding: .1rem .35rem; border-radius: var(--r-sm); } :root:not([data-theme="night"]) :not(pre) > code { color: var(--odt-day-navy); } /* code windows */ pre { position: relative; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-border); border-radius: var(--r-lg); padding: 2.5rem 1.1rem 1rem; overflow: hidden; white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; line-height: 1.6; font-family: var(--mono); font-size: .8rem; box-shadow: var(--shadow-md); } pre::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 1.9rem; background: var(--code-bar); border-bottom: 1px solid var(--code-border); } pre::after { content: '>_'; position: absolute; left: 1rem; top: 0; height: 1.9rem; display: flex; align-items: center; font-family: var(--mono); font-size: .9rem; font-weight: 700; letter-spacing: -.02em; color: var(--code-key); } pre[data-label] .label { position: absolute; right: 1rem; top: .5rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--code-muted); } pre code { background: none; padding: 0; color: var(--code-ink); font: inherit; } pre .c { color: var(--code-muted); } pre .k { color: var(--code-key); } pre .s { color: var(--code-ink); } /* header */ header.top { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px); } header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 92px; } header.top .brand { display: inline-flex; align-items: center; gap: 1rem; color: var(--ink); } /* the ASTRA wordmark is 7:1, so it sits lower than the ODATANO logo on the API pages: 48px keeps the links, the CTA and the theme button inside the 1120px wrap */ header.top .brand img { height: 48px; display: block; } header.top .brand .net { display: inline-flex; align-items: center; gap: .4rem; font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: .32rem .7rem; } header.top .brand .net::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(12,163,12,.16); } header.top .brand .net.off::before { background: var(--critical); box-shadow: 0 0 0 3px rgba(208,59,59,.16); } header.top .brand .net.warn::before { background: var(--warning); box-shadow: 0 0 0 3px rgba(250,178,25,.2); } header.top .brand:hover { text-decoration: none; } header.top nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; } header.top .nav-links { display: flex; align-items: center; gap: .6rem; } header.top .nav-links a { white-space: nowrap; color: var(--ink); font-size: .9375rem; font-weight: 600; padding: .5rem 1rem; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line); transition: color .15s, background-color .15s, border-color .15s; } :root:not([data-theme="night"]) header.top .nav-links a { color: var(--odt-day-navy); } header.top .nav-links a:hover { color: var(--accent); background: rgba(12,94,207,.12); border-color: rgba(12,94,207,.32); text-decoration: none; } [data-theme="night"] header.top .nav-links a:hover { background: rgba(122,162,255,.22); border-color: rgba(122,162,255,.5); } header.top nav .cta { min-height: 44px; padding: .625rem 1.25rem; font-size: .9375rem; } .theme { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 1.25rem; box-shadow: var(--shadow-sm); } .theme:hover { color: var(--accent); border-color: var(--accent); } .theme svg { width: 18px; height: 18px; } .top-actions { display: inline-flex; align-items: center; gap: .5rem; } .burger { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; box-shadow: var(--shadow-sm); } .burger:hover { color: var(--accent); border-color: var(--accent); } .burger span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } header.top.open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } header.top.open .burger span:nth-child(2) { opacity: 0; } header.top.open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .theme .moon { display: none; } [data-theme="night"] .theme .moon { display: block; } [data-theme="night"] .theme .sun { display: none; } @media (max-width: 1240px) { header.top .brand img { height: 40px; } } @media (max-width: 1100px) { header.top .wrap { min-height: 0; padding: .6rem 0; flex-wrap: nowrap; } header.top .brand { flex: 1; } header.top .top-actions { margin-left: auto; } header.top .theme { margin-left: 0; } header.top .burger { display: inline-flex; } header.top nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: .25rem 1.5rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); } header.top.open nav { display: flex; } header.top .nav-links { flex-direction: column; align-items: stretch; gap: 0; } header.top .nav-links a { display: block; padding: .875rem .25rem; font-size: 1rem; font-weight: 600; color: var(--ink); background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--border); } :root:not([data-theme="night"]) header.top .nav-links a { color: var(--ink); } header.top .nav-links a:last-child { border-bottom: 0; } header.top .nav-links a:hover { color: var(--accent); background: none; } header.top nav .cta { margin-top: 1rem; width: 100%; } } header.top .brand img.mark { display: none; height: 40px; width: 40px; border-radius: 9px; } @media (max-width: 760px) { header.top .brand { gap: .6rem; min-width: 0; } header.top .brand img { height: 40px; } /* the wordmark is 7:1, on a phone only the tile fits next to the badge and the buttons */ header.top .brand img.wordmark { display: none !important; } header.top .brand img.mark { display: block; } header.top .brand .net { font-size: .64rem; padding: .28rem .5rem; letter-spacing: .06em; } .hero h1 { font-size: 1.8rem; } .hero pre { font-size: .76rem; } main { padding-top: 1.5rem; } .card { padding: 1.15rem 1.15rem; } .table-wrap { margin: 0 -1.15rem; padding: 0 1.15rem; } } /* layout */ .wrap { width: min(1120px, 100% - 3rem); margin: 0 auto; } main { padding: 3rem 0 4rem; flex: 1; } main > * + * { margin-top: 1.25rem; } main > .section { margin-top: 3rem; scroll-margin-top: 110px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .section-head h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; } .section-head span { color: var(--ink-3); font-size: .9rem; } .stack { display: grid; gap: 1.25rem; } /* hero */ .hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 1.5rem; } } .hero h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; margin-bottom: .9rem; color: var(--ink); text-wrap: balance; } :root:not([data-theme="night"]) .hero h1 { color: var(--odt-day-navy); } .hero h1 em { font-style: normal; color: #9dbcff; text-shadow: 0 0 28px rgba(122,162,255,.55), 0 0 2px rgba(122,162,255,.4); } :root:not([data-theme="night"]) .hero h1 em { color: var(--accent); text-shadow: none; } .hero .lead { color: var(--ink-2); font-size: 1.08rem; max-width: 560px; margin-bottom: 1.4rem; } .hero .facts { display: flex; flex-wrap: wrap; gap: .5rem; } .hero .facts span { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .8rem; } .hero .facts span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .hero .facts span.cardano::before { background: var(--series-cardano); } .hero .facts span.midnight::before { background: var(--series-midnight); } .hero pre { margin: 0; font-size: .74rem; padding-left: .9rem; padding-right: .9rem; word-break: normal; overflow-wrap: anywhere; } /* filter row: the window scopes every chart and ranking below it */ .filters { position: sticky; top: 92px; z-index: 5; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; padding: .6rem .75rem; background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } @media (max-width: 1100px) { .filters { top: 64px; } } @media (max-width: 760px) { .filters { position: static; } } .filters .spacer { flex: 1; } .seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; gap: 2px; } .seg button { border: 0; background: none; color: var(--ink-2); font: 600 .84rem var(--sans); padding: .35rem .8rem; border-radius: 6px; cursor: pointer; min-height: 30px; } .seg button:hover { color: var(--ink); } .seg button.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); } :root:not([data-theme="night"]) .seg button.on { color: var(--odt-day-navy); } .netswitch { display: inline-flex; gap: .35rem; flex-wrap: wrap; } .netswitch a, .netswitch span { display: inline-flex; align-items: center; gap: .35rem; font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-2); background: var(--surface); } .netswitch a:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); } .netswitch .on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); } .netswitch .soon { opacity: .55; } .netswitch .soon i { font: 500 .6rem var(--sans); letter-spacing: .04em; text-transform: none; font-style: normal; color: var(--ink-3); } /* grids and cards */ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; } .grid > * { min-width: 0; } @media (max-width: 860px) { .grid { grid-template-columns: 1fr; } } .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-sm); min-width: 0; display: flex; flex-direction: column; } .card > * + * { margin-top: .9rem; } .card p { color: var(--ink-2); font-size: .92rem; } .card .grow { flex: 1; margin: 0; } h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; } h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; } .chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .chart-head .sub { font-size: .82rem; color: var(--ink-3); } .chart-head .tools { margin-left: auto; } /* product cards: coloured top edge in the chain's series colour */ .product { border-top: 4px solid var(--series-cardano); } .product.midnight { border-top-color: var(--series-midnight); } .product .logo { min-height: 52px; display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .product .logo .spacer { flex: 1; } .product .logo img.chain { height: 30px; width: auto; max-width: 55%; display: block; } @media (max-width: 760px) { .product .logo img.chain { height: 22px; } } /* stat tiles */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; } .stat { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: .8rem 1rem; min-width: 0; display: flex; flex-direction: column; } /* the chain cards: nine tiles in a fixed 3 x 3 grid with equal rows, so both cards line up tile for tile */ .product .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .6rem; } .product .stat { padding: .7rem .85rem; } .stat .label { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; line-height: 1.3; } .stat .value { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; margin-top: .15rem; color: var(--ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat .value small { font-size: .8rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0; margin-left: .2rem; white-space: nowrap; display: inline-block; } :root:not([data-theme="night"]) .stat .value { color: var(--odt-day-navy); } .stat .hint { font-size: .76rem; color: var(--ink-3); margin-top: .1rem; min-height: 1.2em; } .stat .delta { display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; font-weight: 600; color: var(--ink-2); margin-top: .1rem; min-height: 1.2em; white-space: nowrap; } .stat .delta.up { color: var(--good); } .stat .delta.down { color: var(--critical); } :root:not([data-theme="night"]) .stat .delta.up { color: #006300; } .stats.compact { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; } .stats.compact .stat { padding: .55rem .75rem; } .stats.compact .stat .value { font-size: 1.15rem; } @media (max-width: 760px) { .stats, .product .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .stat { padding: .6rem .7rem; } .stat .value { font-size: 1.2rem; overflow-wrap: normal; } .stat .label { font-size: .6rem; letter-spacing: .08em; } } /* charts */ .chart .plot { position: relative; margin-top: .75rem; } .chart .plot svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); } .chart .plot .grid-line { stroke: var(--grid); stroke-width: 1; } .chart .plot .axis-line { stroke: var(--axis); stroke-width: 1; } .chart .plot text { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; } .chart .plot text.end { fill: var(--ink); font-weight: 600; font-size: 11px; } .chart .plot .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart .plot .area { opacity: .1; } .chart .plot .dot { stroke: var(--surface); stroke-width: 2; } .chart .plot .bar.hover, .chart .plot .bar:hover { filter: brightness(1.18); } .chart .plot .hit { fill: transparent; } .chart .plot .cross { stroke: var(--ink-3); stroke-width: 1; pointer-events: none; } .chart .plot .hit-cross { fill: transparent; cursor: crosshair; } .chart.loading .plot, .card.loading .table-wrap, .card.loading .stats { opacity: .45; transition: opacity .2s; } .chart .legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--ink-2); margin-top: .5rem; } .chart .legend span { display: inline-flex; align-items: center; gap: .4rem; } .chart .legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; } .chart .legend i.rect { width: 10px; height: 10px; border-radius: 2px; } .chart .empty, .card .empty { color: var(--ink-3); font-size: .88rem; padding: 2rem 0; text-align: center; border: 1px dashed var(--border); border-radius: var(--r-lg); } /* tooltip */ .tip { position: fixed; z-index: 20; pointer-events: none; background: var(--tip-bg); color: var(--tip-ink); border-radius: var(--r-md); padding: .5rem .7rem; font-size: .78rem; box-shadow: var(--shadow-md); min-width: 130px; max-width: 280px; } .tip .t { color: var(--ink-3); font-size: .7rem; margin-bottom: .25rem; letter-spacing: .04em; } .tip .r { display: flex; align-items: center; gap: .5rem; justify-content: space-between; } .tip .r i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; flex: none; } .tip .r b { font-weight: 700; font-variant-numeric: tabular-nums; } .tip .r span { color: #b9bfcf; flex: 1; display: inline-flex; align-items: center; gap: .4rem; } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem 1.2rem; border-radius: var(--r-md); font: 600 .92rem var(--sans); cursor: pointer; border: 1px solid transparent; color: #fff; background: var(--btn-bg); box-shadow: var(--btn-shadow); white-space: nowrap; min-height: 42px; transition: transform .12s ease, box-shadow .12s ease; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn:disabled { opacity: .5; cursor: default; transform: none; } .btn--ghost { background: var(--surface); color: var(--accent); border-color: var(--border); box-shadow: none; } .btn--ghost:hover { border-color: var(--accent); background: var(--accent-soft); } .btn--sm { padding: .3rem .7rem; font-size: .8rem; min-height: 30px; border-radius: 6px; } .small { font-size: .82rem; color: var(--ink-3); } .muted { color: var(--ink-2); } /* chips */ .pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: .15rem .65rem; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-2); background: var(--surface); white-space: nowrap; } .pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill--ok { color: var(--good); background: var(--ok-bg); border-color: transparent; } .pill--off { color: var(--critical); background: var(--err-bg); border-color: transparent; } .pill--warn { color: #9a6a00; background: var(--warn-bg); border-color: transparent; } [data-theme="night"] .pill--warn { color: var(--warning); } :root:not([data-theme="night"]) .pill--ok { color: #006300; } /* tables */ .table-wrap { overflow-x: auto; margin: 0 -1.6rem; padding: 0 1.6rem; } table { width: 100%; border-collapse: collapse; font-size: .88rem; } th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; } thead th { color: var(--ink-2); font-weight: 600; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; } tbody tr:hover { background: var(--hover); } tbody tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } td.id { font-family: var(--mono); font-size: .78rem; overflow-wrap: anywhere; } td.rank { color: var(--ink-3); font-variant-numeric: tabular-nums; width: 2rem; } /* a bar inside a ranking row: one hue, length is the value */ td .inbar { display: block; height: 4px; border-radius: 2px; background: var(--series-1); margin-top: .35rem; max-width: 100%; } .midnight td .inbar, [data-board$="Midnight"] td .inbar { background: var(--series-midnight); } [data-board$="Cardano"] td .inbar, [data-board="tokens"] td .inbar, [data-board="policies"] td .inbar, [data-board="addresses"] td .inbar, [data-board="scripts"] td .inbar { background: var(--series-cardano); } .anom { list-style: none; display: grid; gap: .5rem; } .anom li { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: baseline; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel-2); font-size: .88rem; } .anom li .z { font-weight: 700; font-variant-numeric: tabular-nums; } .anom li .z.up { color: var(--good); } .anom li .z.down { color: var(--critical); } :root:not([data-theme="night"]) .anom li .z.up { color: #006300; } .anom li .what { color: var(--ink); } .anom li .what small { display: block; color: var(--ink-3); font-size: .76rem; } .anom li .chain { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } footer { border-top: 1px solid var(--border); padding: 2rem 0; color: var(--ink-3); font-size: .95rem; background: var(--surface); } footer .wrap { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; align-items: center; } footer img { height: 60px; opacity: .9; } footer a { color: var(--ink-2); } footer .spacer { flex: 1; } @media (max-width: 760px) { footer img { flex: 0 0 100%; width: 100%; height: 48px; object-fit: contain; object-position: left; margin-bottom: .4rem; } } .hidden, [hidden] { display: none !important; } /* pointer glow on cards, same effect as the API pages */ .card { isolation: isolate; } .card::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -20%), rgba(12,94,207,.12), transparent 65%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .card:hover::after { opacity: 1; } [data-theme="night"] .card::after { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -20%), rgba(122,162,255,.2), transparent 65%); } /* softer day surfaces, same values as odatano.dev; night untouched */ :root:not([data-theme="night"]) { --odt-day-bg: #f1f1f3; --odt-day-bg-alt: #ebebee; --odt-day-surface: #fafafb; --odt-day-border: #d9dadf; } :root:not([data-theme="night"]) body { background: linear-gradient(180deg, #f5f5f7 0%, #eeeef1 55%, #e8e8eb 100%); background-attachment: fixed; } [data-theme="night"] body { background: linear-gradient(180deg, #15171d 0%, #0e0f13 55%, #0a0b0e 100%); background-attachment: fixed; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card::after, .btn { transition: none; } }