/* ------------------------------------------------------------------
local-mirror.css — the only stylesheet added by the local mirror.
Everything else is the site's original CSS, untouched.
Delete this file (and its ) to get back to stock behaviour.
------------------------------------------------------------------ */
/* main.js is minified with an encoded string table, so its hard-coded
asset base (https://heronai-bp.netlify.app) cannot be rewritten by a
text replace. It sets --ph-mask-image as an inline style on ;
an !important author rule outranks a normal inline declaration, so
this points the mask at the local copy and keeps the page offline. */
:root {
--ph-mask-image: url("/assets/img/pixel-mask.svg") !important;
}
/* ------------------------------------------------------------------
/dashboard hero mock-up.
The original art was oversized on purpose (the ![]()
renders ~1399px
wide inside a ~713px window) so a composed image could bleed past the
frame. The replacement is built to the slot's real aspect instead, so
it is pinned to the frame and shown whole rather than cropped.
------------------------------------------------------------------ */
.product-hero-img-main {
width: 100% !important;
height: 100% !important;
left: 0 !important;
top: 0 !important;
object-fit: contain !important;
object-position: center !important;
}
/* ------------------------------------------------------------------
dApp surfaces: the convert panel (/convert) and live reserve tiles
(/dashboard). Written in the site's own language — mono labels, hard
1px borders, the same ink and brand colours — so the interactive
parts don't read as bolted on.
------------------------------------------------------------------ */
.rt-convert,
.rt-stats {
--rt-ink: #282828;
--rt-muted: #626260;
--rt-line: #c9c9c2;
--rt-surface: #f7f7f1;
--rt-brand: #fa3600;
font-family: "BT Grotesk", Arial, sans-serif;
color: var(--rt-ink);
}
/* ---- convert panel ---- */
.rt-convert {
max-width: 46rem;
border: 1px solid var(--rt-line);
background: var(--rt-surface);
padding: 2.4rem;
}
.rt-convert__tabs { display: flex; margin: -2.4rem -2.4rem 2.4rem; }
.rt-convert__tab {
flex: 1; padding: 1.4rem 1rem; background: none; cursor: pointer;
border: none; border-bottom: 1px solid var(--rt-line);
font-family: "Geist Mono", monospace; font-size: 1.2rem; letter-spacing: .06em;
color: var(--rt-muted); text-transform: uppercase;
}
.rt-convert__tab + .rt-convert__tab { border-left: 1px solid var(--rt-line); }
.rt-convert__tab.is-active { background: #262625; color: #f3f3ec; border-bottom-color: #262625; }
.rt-convert__field { display: block; margin-bottom: 1.6rem; }
.rt-convert__label {
display: block; font-family: "Geist Mono", monospace; font-size: 1.1rem;
letter-spacing: .06em; text-transform: uppercase; color: var(--rt-muted); margin-bottom: .8rem;
}
.rt-convert__inputrow {
display: flex; align-items: center; gap: 1rem;
border: 1px solid var(--rt-line); background: #fff; padding: 1.2rem 1.4rem;
}
.rt-convert__input {
flex: 1; min-width: 0; border: none; outline: none; background: none;
font-family: inherit; font-size: 2.4rem; font-weight: 700; color: var(--rt-ink);
letter-spacing: -.02em;
}
.rt-convert__input:read-only { color: var(--rt-muted); }
.rt-convert__ticker { font-family: "Geist Mono", monospace; font-size: 1.3rem; color: var(--rt-muted); }
.rt-convert__meta {
display: flex; align-items: center; gap: .8rem; margin-top: .8rem;
font-family: "Geist Mono", monospace; font-size: 1.1rem; color: var(--rt-muted);
}
.rt-convert__meta--foot { justify-content: flex-start; }
.rt-convert__meta a { color: var(--rt-brand); text-decoration: none; }
.rt-convert__max {
border: 1px solid var(--rt-line); background: none; cursor: pointer;
font-family: "Geist Mono", monospace; font-size: 1rem; letter-spacing: .06em;
padding: .2rem .6rem; color: var(--rt-ink);
}
.rt-convert__rate {
font-family: "Geist Mono", monospace; font-size: 1.1rem; color: var(--rt-muted);
text-align: center; margin: 0 0 1.6rem; letter-spacing: .04em;
}
.rt-convert__cta {
width: 100%; border: none; cursor: pointer;
background: var(--rt-brand); color: #fff;
font-family: "Geist Mono", monospace; font-size: 1.3rem; letter-spacing: .07em;
text-transform: uppercase; padding: 1.5rem 2rem;
}
.rt-convert__cta:disabled { background: #d3d3cc; color: #8a8a85; cursor: not-allowed; }
.rt-convert__notice,
.rt-convert__error {
font-size: 1.3rem; line-height: 1.5; margin-bottom: 1.6rem;
padding: 1.2rem 1.4rem; border: 1px solid var(--rt-line); background: #fff;
}
.rt-convert__error { border-color: var(--rt-brand); color: var(--rt-brand); margin: 1.6rem 0 0; }
.rt-convert code { font-family: "Geist Mono", monospace; font-size: .92em; }
/* ---- reserve tiles ---- */
.rt-stats__grid {
display: grid; grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--rt-line); border-right: none; border-bottom: none;
}
.rt-stats__tile {
border-right: 1px solid var(--rt-line); border-bottom: 1px solid var(--rt-line);
background: var(--rt-surface); padding: 2rem;
}
.rt-stats__k {
font-family: "Geist Mono", monospace; font-size: 1.1rem; letter-spacing: .06em;
text-transform: uppercase; color: var(--rt-muted);
}
.rt-stats__v { font-size: 3.2rem; font-weight: 700; letter-spacing: -.02em; margin: 1rem 0 .4rem; }
.rt-stats__note { font-size: 1.2rem; color: var(--rt-muted); }
.rt-stats__foot {
margin-top: 1.2rem; font-family: "Geist Mono", monospace;
font-size: 1.1rem; color: var(--rt-muted);
}
.rt-stats__foot a { color: var(--rt-brand); text-decoration: none; }
.rt-stats__err { color: var(--rt-brand); }
.rt-stats--empty { border: 1px solid var(--rt-line); background: var(--rt-surface); padding: 2rem; font-size: 1.3rem; }
@media only screen and (max-width: 991px) {
.rt-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
.rt-stats__grid { grid-template-columns: 1fr; }
.rt-convert { padding: 1.6rem; }
.rt-convert__tabs { margin: -1.6rem -1.6rem 1.6rem; }
}
/* Section wrapper for the portalled dApp surfaces, matching the page gutters. */
.rt-section { padding: 8rem 0; border-bottom: 1px solid var(--content--border, #b3b3af); }
.rt-section__inner { max-width: 128rem; margin: 0 auto; padding: 0 3.2rem; }
.rt-section__title { font-size: 4rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 1.2rem; }
.rt-section__sub { font-size: 1.6rem; color: #626260; max-width: 58rem; margin: 0 0 3.2rem; line-height: 1.5; }
@media only screen and (max-width: 767px) {
.rt-section { padding: 5.6rem 0; }
.rt-section__inner { padding: 0 1.6rem; }
.rt-section__title { font-size: 2.8rem; }
}
/* The live balance. USDR accrues per second, so this number visibly moves —
tabular figures stop it jittering as digits change width. */
.rt-convert__live {
margin-top: 1.6rem; padding: 1.4rem 1.6rem;
border: 1px solid var(--rt-line); background: #fff;
display: flex; flex-direction: column; gap: .4rem;
}
.rt-convert__livevalue {
font-size: 2.8rem; font-weight: 700; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.rt-convert__livenote {
font-family: "Geist Mono", monospace; font-size: 1.1rem; color: var(--rt-brand);
letter-spacing: .04em;
}
/* Contract details block on /convert. */
.rt-contracts { max-width: 92rem; font-family: "BT Grotesk", Arial, sans-serif; color: #282828; }
.rt-contracts__chain {
display: flex; flex-wrap: wrap; gap: 2.4rem; padding-bottom: 1.6rem;
font-family: "Geist Mono", monospace; font-size: 1.1rem; letter-spacing: .06em;
text-transform: uppercase; color: #626260;
}
.rt-contracts__list { border: 1px solid #c9c9c2; border-bottom: none; }
.rt-contracts__row {
display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center;
justify-content: space-between; padding: 1.8rem 2rem;
border-bottom: 1px solid #c9c9c2; background: #f7f7f1;
}
.rt-contracts__name { font-size: 1.5rem; font-weight: 700; }
.rt-contracts__what { font-size: 1.2rem; color: #626260; margin-top: .3rem; }
.rt-contracts__addr { display: flex; align-items: center; gap: 1rem; }
.rt-contracts__addr a {
font-family: "Geist Mono", monospace; font-size: 1.2rem;
color: #282828; text-decoration: none; border-bottom: 1px solid #c9c9c2;
word-break: break-all;
}
.rt-contracts__addr a:hover { color: #fa3600; border-bottom-color: #fa3600; }
.rt-contracts__copy {
border: 1px solid #c9c9c2; background: none; cursor: pointer; flex: none;
font-family: "Geist Mono", monospace; font-size: 1rem; letter-spacing: .06em;
padding: .4rem .8rem; color: #282828;
}
.rt-contracts__foot { margin-top: 1.2rem; font-size: 1.2rem; color: #626260; }
.rt-section__sub-title { font-size: 2.4rem; font-weight: 700; margin: 5.6rem 0 1.6rem; }
@media only screen and (max-width: 767px) {
.rt-contracts__row { flex-direction: column; align-items: flex-start; }
}
/* ---- personal dashboard ---- */
.rt-me { font-family: "BT Grotesk", Arial, sans-serif; color: #282828; max-width: 92rem; }
.rt-me--connect { border: 1px solid #c9c9c2; background: #f7f7f1; padding: 2.4rem; max-width: 46rem; }
.rt-me--connect p { font-size: 1.4rem; margin-bottom: 1.6rem; }
.rt-me__wallet {
display: flex; gap: 1.6rem; font-family: "Geist Mono", monospace;
font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase;
color: #626260; margin-bottom: 1.2rem;
}
.rt-me__wallet a { color: #fa3600; text-decoration: none; }
.rt-me__balances { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #c9c9c2; }
.rt-me__bal { padding: 2rem; background: #f7f7f1; }
.rt-me__bal + .rt-me__bal { border-left: 1px solid #c9c9c2; }
.rt-me__k {
display: block; font-family: "Geist Mono", monospace; font-size: 1.1rem;
letter-spacing: .06em; text-transform: uppercase; color: #626260;
}
.rt-me__v {
font-size: 3.6rem; font-weight: 700; letter-spacing: -.02em; margin: .8rem 0 .4rem;
font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.rt-me__v--live { color: #282828; }
.rt-me__note { font-size: 1.2rem; color: #626260; }
.rt-me__note a { color: #fa3600; text-decoration: none; }
.rt-me__calc { margin-top: 3.2rem; border: 1px solid #c9c9c2; background: #f7f7f1; }
.rt-me__calchead { padding: 2rem; border-bottom: 1px solid #c9c9c2; }
.rt-me__calchead h3 { font-size: 2rem; font-weight: 700; margin: 0 0 .6rem; }
.rt-me__calchead p { font-size: 1.3rem; color: #626260; margin: 0; max-width: 62rem; line-height: 1.5; }
.rt-me__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2rem; }
.rt-me__inputs label { display: block; }
.rt-me__inputrow {
display: flex; align-items: center; gap: 1rem; margin-top: .8rem;
border: 1px solid #c9c9c2; background: #fff; padding: 1rem 1.2rem;
}
.rt-me__inputrow input {
flex: 1; min-width: 0; border: none; outline: none; background: none;
font-family: inherit; font-size: 2rem; font-weight: 700; color: #282828;
}
.rt-me__inputrow span {
font-family: "Geist Mono", monospace; font-size: 1.2rem; color: #626260;
}
.rt-me__inputs .rt-convert__max { margin-top: .8rem; }
.rt-me__inputs .rt-me__note { margin-top: .8rem; }
.rt-me__table { width: 100%; border-collapse: collapse; }
.rt-me__table th {
text-align: left; padding: 1rem 2rem; border-top: 1px solid #c9c9c2;
font-family: "Geist Mono", monospace; font-size: 1.1rem; letter-spacing: .06em;
text-transform: uppercase; color: #626260; font-weight: 500;
}
.rt-me__table td { padding: 1.2rem 2rem; border-top: 1px solid #ddddd6; font-size: 1.5rem; }
.rt-me__num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.rt-me__num--gain { color: #2e7d54; font-weight: 700; }
.rt-me__foot { padding: 1.4rem 2rem 2rem; font-size: 1.2rem; color: #626260; margin: 0; }
@media only screen and (max-width: 767px) {
.rt-me__balances, .rt-me__inputs { grid-template-columns: 1fr; }
.rt-me__bal + .rt-me__bal { border-left: none; border-top: 1px solid #c9c9c2; }
.rt-me__table th, .rt-me__table td { padding: 1rem 1.2rem; font-size: 1.3rem; }
}
/* Live reserve figures sitting in the dashboard hero, where the mock-up was.
The slot is roughly square, so the tiles stack two-up rather than in a row. */
.rt-herostats { width: 100%; height: 100%; display: flex; align-items: center; padding: 3.2rem; }
.rt-herostats .rt-stats { width: 100%; }
.rt-herostats .rt-stats__grid { grid-template-columns: 1fr 1fr; }
.rt-herostats .rt-stats__v { font-size: 2.6rem; }
.rt-herostats .rt-stats__tile { padding: 1.6rem; }
@media only screen and (max-width: 767px) {
.rt-herostats { padding: 1.6rem; }
.rt-herostats .rt-stats__grid { grid-template-columns: 1fr; }
}
/* The hero images are kept in the DOM only because main.js reads their
parentElement during init. Nothing should see them. */
.rt-herostats { position: relative; z-index: 2; }
.product-hero-img-inner .img-basic[src$="blank.png"] { opacity: 0 !important; }
/* Hidden rather than removed: main.js reads these during init, and deleting
them throws before any animation runs. See HIDE_BLOCKS in apply-rewrite.js. */
.footer-logo,
section.cta {
display: none !important;
}