/* ODATANO API pages on @odatano/brand (tokens.css). Night is the default (the kit's graphite palette), Day is ODATANO / Cardano on light ground; `data-theme` on switches, the header button sets it, the pages set night in the head script unless localStorage says day. Code windows are always dark, like on odatano.dev. */ @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: radial-gradient(60% 50% at 20% 0%, rgba(59,142,240,.14), transparent 70%), radial-gradient(40% 40% at 90% 10%, rgba(0,27,94,.06), transparent 70%); --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; --midnight: #1b3a96; } [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); --midnight: var(--odt-night-accent); } :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); /* names the script uses */ --text: var(--ink); --muted: var(--ink-2); --ok: var(--good); --warn: var(--warning); --err: var(--critical); --font: var(--sans); } [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); background-image: var(--glow); background-repeat: no-repeat; 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] { padding-top: 2.5rem; } 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); } header.top .brand img { height: 60px; display: block; } header.top .brand .label { color: var(--ink-2); font-size: 1.05rem; font-weight: 500; padding-left: 1rem; border-left: 1px solid var(--border); line-height: 1; letter-spacing: .01em; } /* the network the gateway serves: one host per network, the badge names it */ 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:hover { text-decoration: none; } /* links as light pills next to the primary "Get a key", like odatano.dev's header */ 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: phones only, same round button as the theme toggle, bars turn into an X when open */ .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; } /* header: between 1101 and 1240px the pills, the CTA and the theme button only fit next to a smaller logo; from 1100px down the links drop under the header behind the burger (same menu as odatano.dev) */ @media (max-width: 1240px) { header.top .brand img { height: 48px; } header.top .brand .label { display: none; } } @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%; } } @media (max-width: 760px) { header.top .brand { gap: .6rem; min-width: 0; } header.top .brand img { height: 40px; } 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; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .section-head h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; } .section-head span { color: var(--ink-3); font-size: .9rem; } .eyebrow { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; } /* 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); } /* accent words like on the OG image: sans, accent blue, a soft glow at night */ .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 pre { margin: 0; font-size: .82rem; } /* generic page title (account, redeem) */ h1.page { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: .4rem; } :root:not([data-theme="night"]) h1.page { color: var(--odt-day-navy); } p.lead { color: var(--ink-2); font-size: 1rem; max-width: 640px; } h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; } /* grids and cards */ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; } .grid > * { min-width: 0; } .grid.lanes { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; } /* the two chain tiles side by side, ASTRA (both chains) as a wide paragraph under them */ .grid.products .product.astra { grid-column: 1 / -1; } .product.astra ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; } @media (min-width: 861px) { .product.astra ul li:nth-child(2) { padding-top: 0; } .product.astra ul li:nth-last-child(2) { border-bottom: 0; padding-bottom: 0; } } @media (max-width: 860px) { .product.astra ul { grid-template-columns: 1fr; } } @media (max-width: 560px) { .product.astra .logo { flex-wrap: wrap; row-gap: .75rem; } .product.astra .logo .chains { flex-basis: 100%; } } /* the three ways to a key: compact, same shape (icon, title, two facts, one action) */ .lanes .card { padding: 1.05rem 1.15rem; } .lanes .lane-head { gap: .7rem; padding-bottom: .7rem; } .lanes .lane-head .icon { width: 40px; height: 40px; border-radius: 11px; } .lanes .lane-head .icon svg { width: 21px; height: 21px; } .lanes .lane-head .icon img { height: 40px; width: 40px; border-radius: 11px; } /* an icon that brings its own tile (x402) fills the box instead of sitting in it */ .lane-head .icon:has(img) { background: none; } .lanes .lane-head h2 { font-size: 1.05rem; } .lanes .lane-head .sub { font-size: .8rem; } .lanes .card ul li { padding: .4rem 0; grid-template-columns: 5.5rem 1fr; gap: .75rem; font-size: .9rem; } .lanes .card ul li b { font-size: .82rem; } .lanes .card .row { margin-top: .9rem; } .lanes .btn { min-height: 38px; padding: .5rem 1rem; font-size: .88rem; } /* AI agents: two product tiles with tool chips, the .mcp.json window under them */ .mcp .card ul li { grid-template-columns: 4.5rem 1fr; } .chips { display: flex; flex-wrap: wrap; gap: .3rem; } .chips code { font-size: .74rem; padding: .12rem .45rem; } .card .links { display: flex; gap: 1rem; margin-top: .9rem; font-size: .88rem; font-weight: 600; } .mcp-json { margin-top: 1.25rem; } .issued-mcp { margin-top: .9rem; font-size: .74rem; } /* x402 page */ .steps li { grid-template-columns: 2rem 1fr !important; align-items: start !important; } .steps li b { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; } .steps li span strong { color: var(--ink); font-weight: 600; } table.packs-table { margin-bottom: 1rem; } @media (max-width: 860px) { .grid, .grid.lanes { 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; } .card ul { list-style: none; color: var(--ink-2); font-size: .92rem; } .card ul li { padding: .5rem 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; align-items: baseline; } .card ul li:last-child { border-bottom: 0; padding-bottom: 0; } .card ul li:first-child { padding-top: 0; } .card ul li b { color: var(--ink); font-weight: 600; font-size: .86rem; } .card ul li span { min-width: 0; overflow-wrap: anywhere; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .card-head h2 { font-size: 1.2rem; } .card-head > div { min-width: 0; } .card-head .pill { flex: none; } .card-head img { height: 40px; width: auto; max-width: 60%; object-fit: contain; object-position: right; display: block; } /* product cards: logo on top, coloured top edge */ .product { border-top: 4px solid var(--accent); } .product.midnight { border-top-color: var(--midnight); } /* ASTRA spans both chains: its edge runs from the Cardano blue into the Midnight tone */ .product.astra { border-top-color: transparent; } .product.astra::before { content: ''; position: absolute; top: -4px; left: -1px; right: -1px; height: 4px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: linear-gradient(90deg, var(--accent), var(--midnight)); } .product .logo .wordmark { font: 800 1.35rem/1 var(--sans); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; } .product .logo .wordmark b { color: var(--accent); } :root:not([data-theme="night"]) .product .logo .wordmark { color: var(--odt-day-navy); } .product .logo .chains { display: inline-flex; align-items: center; gap: 1rem; flex: none; } .product.astra .logo img.chain { height: 20px; max-width: none; } .product .logo { min-height: 60px; display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .product .logo .spacer { flex: 1; } /* boxes differ, cap heights match: the CORE / NIGHTGATE files carry more air around the glyphs */ /* product first and large (ODATANO CORE / NIGHTGATE), the chain smaller on the right */ .product .logo img.chain { height: 30px; width: auto; max-width: 42%; display: block; } .product .logo img.via { height: 44px; width: auto; max-width: 55%; display: block; } .product p.sub { font-size: .95rem; color: var(--ink-2); } @media (max-width: 480px) { .product .logo { flex-wrap: nowrap; gap: .5rem; min-height: 0; } .product .logo img.via { max-width: 62%; } .product .logo img.chain { max-width: 34%; } } .product h2 { font-size: 1.25rem; } .product .sub { font-size: .9rem; color: var(--ink-2); margin-top: .25rem; } /* lane cards: icon + title */ .lane-head { display: flex; align-items: center; gap: .85rem; } .lane-head { padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .lane-head .icon { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); flex: none; } .lane-head .icon svg { width: 26px; height: 26px; } .lane-head .icon img { height: 52px; width: 52px; border-radius: 14px; } .lane-head .icon img + svg { display: none; } .lane-head h2 { font-size: 1.2rem; } .lane-head .sub { font-size: .85rem; color: var(--ink-3); } .card--accent { border-color: var(--accent-line); box-shadow: var(--shadow-md); } /* packs (x402) */ .packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .pack { position: relative; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: .85rem .8rem; display: flex; flex-direction: column; } .pack--featured { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); } .pack__units { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); } .pack__label { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); font-weight: 600; margin-top: .15rem; } .pack__price { margin-top: .7rem; font-weight: 700; color: var(--ink); font-size: 1rem; } .pack__rate { font-size: .74rem; color: var(--ink-3); } /* stat tiles */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); } .stat .label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; } .stat .value { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; margin-top: .2rem; color: var(--ink); } :root:not([data-theme="night"]) .stat .value { color: var(--odt-day-navy); } .stat .hint { font-size: .78rem; color: var(--ink-3); } /* buttons and inputs */ .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--danger { background: var(--surface); color: var(--critical); border-color: var(--border); box-shadow: none; } .btn--danger:hover { background: var(--err-bg); border-color: var(--critical); } .btn--sm { padding: .3rem .7rem; font-size: .8rem; min-height: 30px; border-radius: 6px; } input[type=text], select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink); padding: .55rem .85rem; font: .92rem var(--sans); min-height: 42px; } input[type=text] { width: 100%; } input[type=text]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .actions { display: flex; gap: .3rem; justify-content: flex-end; flex-wrap: wrap; } .status { font-size: .86rem; color: var(--ink-2); min-height: 1.3em; } .status:empty { display: none; } .status--ok { color: var(--good); } .status--err { color: var(--critical); } .muted { color: var(--ink-2); } .small { font-size: .82rem; color: var(--ink-3); } /* 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--plan { color: var(--accent); background: var(--accent-soft); border-color: transparent; } /* tables */ .table-wrap { overflow-x: auto; margin: 0 -1.6rem; padding: 0 1.6rem; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; } thead th { color: var(--ink-2); font-weight: 600; font-size: .68rem; 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 { font-variant-numeric: tabular-nums; } table.compact td, table.compact th { padding: .5rem .6rem; } /* the one-time token */ .token { background: var(--code-bg); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: 1rem 1.1rem; } .token code { display: block; word-break: break-all; background: none; color: var(--code-key); padding: 0; font-family: var(--mono); font-size: .95rem; } .token .note { color: var(--ink-2); font-size: .8rem; margin-top: .5rem; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; font-size: .9rem; } .kv dt { color: var(--ink-2); } .kv dd { font-family: var(--mono); font-size: .82rem; word-break: break-all; color: var(--ink); } @media (max-width: 560px) { .kv { grid-template-columns: 1fr; } .kv dt { margin-top: .4rem; } } 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; } /* phones: last so these win over the base rules above */ @media (max-width: 760px) { .card ul li { grid-template-columns: 1fr; gap: .15rem; padding: .55rem 0; } .card ul li b { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); } .card ul li span { font-size: .95rem; color: var(--ink); } .card ul li .mono { font-size: .84rem; } .product .logo img.chain { height: 21px; } .product .logo img.via { height: 28px; } .packs { grid-template-columns: repeat(3, 1fr); gap: .5rem; } .pack { padding: .7rem .6rem; } .pack__units { font-size: 1.2rem; } .stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { table.plans thead { display: none; } table.plans tr { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--border); } table.plans tr:last-child { border-bottom: 0; } table.plans td { border: 0; padding: 0; } table.plans td::before { content: attr(data-label); display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .15rem; } } @media (max-width: 760px) { /* the keys table becomes one block per key */ table.keys thead { display: none; } table.keys tr { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--border); } table.keys tr:last-child { border-bottom: 0; } table.keys td { border: 0; padding: 0; } table.keys td::before { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .15rem; } table.keys td:nth-child(1) { grid-column: 1 / -1; } table.keys td:nth-child(1)::before { content: 'Key'; } table.keys td:nth-child(2)::before { content: 'Status'; } table.keys td:nth-child(3)::before { content: 'Units'; } table.keys td:nth-child(4)::before { content: 'Today'; } table.keys td:nth-child(5)::before { content: '30 days'; } table.keys td:nth-child(6)::before { content: 'Valid until'; } table.keys td:nth-child(7)::before { content: 'Wallet'; } table.keys td:nth-child(8) { grid-column: 1 / -1; } table.keys td.actions { justify-content: flex-start; margin-top: .25rem; } table.keys td:empty { display: none; } } /* reference page */ .stack { display: grid; gap: 1.25rem; } .section-head img { display: block; } table.ref td:first-child { white-space: nowrap; } @media (max-width: 760px) { table.ref th:nth-child(2), table.ref td:nth-child(2), table.ref th:nth-child(3), table.ref td:nth-child(3) { display: none; } table.ref td:first-child { white-space: normal; overflow-wrap: anywhere; } } @media (max-width: 760px) { body[data-page="reference"] .card-head { flex-wrap: wrap; gap: .5rem 1rem; } body[data-page="reference"] .card-head > div { flex: 1 1 100%; } } /* Reference: one
per call, request and result as code windows. */ /* reference: a service folds out to its calls; the head is the summary */ .service > summary { list-style: none; cursor: pointer; } .service > summary::-webkit-details-marker { display: none; } .service > summary:hover h2 { color: var(--accent); } .service > summary > div { flex: 1; } .service { scroll-margin-top: 110px; } .service .chev { flex: none; width: .6rem; height: .6rem; margin: 0 .35rem 0 .25rem; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform .15s ease; } .service[open] .chev { transform: rotate(45deg); } .service > .small.mono { margin-top: 1rem; } .calls { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .call { border-bottom: 1px solid var(--line); } .call summary { display: grid; grid-template-columns: 1fr 6rem 4rem; gap: 1rem; align-items: center; padding: .6rem .25rem; cursor: pointer; list-style: none; font-size: .9rem; } .call summary::-webkit-details-marker { display: none; } .call summary > span:first-child::before { content: ''; display: inline-block; vertical-align: middle; width: .45rem; height: .45rem; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); margin-right: .7rem; transition: transform .15s; } .call[open] summary > span:first-child::before { transform: rotate(45deg); } .call summary .kind { color: var(--ink-3); font-size: .85rem; } .call summary .method { color: var(--ink-2); } .call summary:hover { color: var(--blue); } .call__body { display: grid; gap: .75rem; padding: .25rem 0 1rem; align-items: start; } .call__body pre { margin: 0; font-size: .76rem; } @media (max-width: 760px) { .call summary { grid-template-columns: 1fr auto; } .call summary .kind { display: none; } .call summary > .mono:first-child { overflow-wrap: anywhere; } } /* pointer glow on cards and packs: --mx / --my come from console.js, same effect as odatano.dev */ .card, .pack { isolation: isolate; } .card::after, .pack::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, .pack:hover::after { opacity: 1; } [data-theme="night"] .card::after, [data-theme="night"] .pack::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; } /* day ground: one gradient from top to bottom, no blue glow, like odatano.dev */ :root:not([data-theme="night"]) body { background: linear-gradient(180deg, #f5f5f7 0%, #eeeef1 55%, #e8e8eb 100%); background-attachment: fixed; } /* night ground: same clean gradient as odatano.dev */ [data-theme="night"] body { background: linear-gradient(180deg, #15171d 0%, #0e0f13 55%, #0a0b0e 100%); background-attachment: fixed; }