git / moonbite-network / static/shell-v2.css · raw
/* ============================================================ v2: editorial system Inner pages read like one publication: an editorial masthead in the homepage's display face, numbered sections, hairline data. Researched against Linear / SSENSE / Kinfolk headers and Origin / Uniswap data views. Loaded after shell.css by the site header partial. */:root { --mbs-display-x: 'Archivo Black', 'Inter', ui-sans-serif, system-ui, sans-serif; }/* masthead */body.mbs-page .mb-hero { padding: clamp(64px, 9vw, 128px) 0 clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--mbs-line); text-align: left; }body.mbs-page .mb-hero::after { display: none; } /* no faded or recoloured mark (d01) */body.mbs-page .mb-hero-inner { margin-left: 0; margin-right: auto; text-align: left; max-width: 920px; }body.mbs-page .mb-hero .mb-cta-row { justify-content: flex-start; }body.mbs-page .mb-hero-title { font-family: var(--mbs-display-x); font-weight: 400; font-size: clamp(44px, 7vw, 104px); line-height: .95; letter-spacing: -.035em; margin-top: 22px; }body.mbs-page .mb-hero-sub { font-size: clamp(17px, 1.5vw, 20px); color: rgba(245, 242, 234, .68); max-width: 56ch; margin-top: 26px; margin-left: 0; }body.mbs-page .mb-hero .mb-eyebrow, body.mbs-page .mb-hero .mb-badge { border: 1px solid var(--mbs-line-2); border-radius: 999px; padding: 8px 14px 8px 12px; color: var(--mbs-bone); }body.mbs-page .mb-hero .mb-eyebrow::before, body.mbs-page .mb-hero .mb-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mbs-gold); }body.mbs-page .mb-hero .mb-dot { display: none; }/* numbered sections */body.mbs-page main { counter-reset: mbs-sec; }body.mbs-page .mb-section-head .mb-eyebrow { counter-increment: mbs-sec; }body.mbs-page .mb-section-head .mb-eyebrow::before { content: counter(mbs-sec, decimal-leading-zero) " \2014 "; color: var(--mbs-ash-2); }body.mbs-page .mb-section-title { font-family: var(--mbs-sans); font-weight: 800; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -.02em; }body.mbs-page .mb-section-head { text-align: left !important; margin-left: 0; }body.mbs-page .mb-section { position: relative; }/* cards: a gold hairline draws across on hover, links carry an arrow */body.mbs-page .mb-card, body.mbs-page .mb-feature { position: relative; }body.mbs-page .mb-grid > .mb-card::before, body.mbs-page .mb-grid > .mb-feature::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--mbs-bone); transition: width 240ms cubic-bezier(.22, 1, .36, 1); }body.mbs-page .mb-grid > .mb-card:hover::before, body.mbs-page .mb-grid > .mb-feature:hover::before { width: 100%; }/* tables */body.mbs-page main table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }body.mbs-page main table th { text-align: left; font: 500 11px/1 var(--mbs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mbs-ash-2); padding: 14px 16px; border-bottom: 1px solid var(--mbs-line); background: none; }body.mbs-page main table td { padding: 14px 16px; border-bottom: 1px solid var(--mbs-line); color: var(--mbs-bone); background: none; }body.mbs-page main table tr:hover td { background: rgba(245, 242, 234, .025); }/* forms */body.mbs-page main input[type="text"], body.mbs-page main input[type="search"], body.mbs-page main input[type="number"], body.mbs-page main input[type="email"],body.mbs-page main input:not([type]), body.mbs-page main select, body.mbs-page main textarea { background: var(--mbs-ink); color: var(--mbs-bone); border: 1px solid var(--mbs-line-2); border-radius: 6px; padding: 12px 16px; font: 400 15px/1.4 var(--mbs-sans); box-shadow: none; outline: none; transition: border-color 120ms cubic-bezier(.22, 1, .36, 1); }body.mbs-page main input:focus, body.mbs-page main select:focus, body.mbs-page main textarea:focus { border-color: var(--mbs-gold); box-shadow: 0 0 0 4px rgba(217, 164, 65, .12); }body.mbs-page main input::placeholder, body.mbs-page main textarea::placeholder { color: var(--mbs-ash-2); }body.mbs-page main label { color: var(--mbs-ash); font-size: 13px; }/* explorer and other data pages (legacy .card / .stat markup) */body.mbs-page .main-content { max-width: var(--mbs-max); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--mbs-gutter) 96px; }body.mbs-page .main-content h1 { font-family: var(--mbs-display-x); font-weight: 400; font-size: clamp(44px, 6.4vw, 92px); line-height: .95; letter-spacing: -.035em; text-align: left; color: var(--mbs-bone); background: none; -webkit-text-fill-color: currentColor; }body.mbs-page .main-content h1 + p, body.mbs-page .main-content .page-header p { text-align: left; color: rgba(245, 242, 234, .68); max-width: 60ch; font-size: 18px; margin-left: 0; }body.mbs-page .main-content .page-header, body.mbs-page .main-content header { text-align: left; }body.mbs-page .card { padding: 0; overflow: hidden; margin-bottom: 20px; }body.mbs-page .card-header { font: 500 11px/1 var(--mbs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mbs-ash-2); padding: 16px 20px; }body.mbs-page .card-body { padding: 20px; }body.mbs-page .card-value, body.mbs-page .stat-value { font-family: var(--mbs-mono); font-variant-numeric: tabular-nums; color: var(--mbs-bone); font-size: clamp(26px, 3vw, 40px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: none; -webkit-text-fill-color: currentColor; }body.mbs-page .card-subtitle, body.mbs-page .stat-label { color: var(--mbs-ash); font-size: 13px; }body.mbs-page .mining-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--mbs-line); border: 1px solid var(--mbs-line); border-radius: 10px; overflow: hidden; }body.mbs-page .mining-stats .stat { background: var(--mbs-void); padding: 22px; border: 0; border-radius: 0; box-shadow: none; text-align: left; }body.mbs-page .tx-item { border: 0; border-bottom: 1px solid var(--mbs-line); border-radius: 0; background: none; padding: 14px 20px; }body.mbs-page .tx-item:hover { background: rgba(245, 242, 234, .025); }body.mbs-page .tx-id, body.mbs-page .monospace { font-family: var(--mbs-mono); font-size: 13px; color: var(--mbs-bone); word-break: break-all; }body.mbs-page .tx-meta, body.mbs-page .tx-detail { color: var(--mbs-ash); font-size: 13px; }@media (max-width: 900px) { body.mbs-page .mb-hero::after { opacity: .045; right: -140px; } }@media (prefers-reduced-motion: reduce) { body.mbs-page .mb-grid > .mb-card::before, body.mbs-page .mb-grid > .mb-feature::before { transition: none; } }/* legacy dashboard markup: cards waited on the removed loader to "rise" in and stayed invisible (opacity 0); the hero was centred and small */body.mbs-page .card { animation: none !important; opacity: 1 !important; transform: none !important; }body.mbs-page .main-content .hero { text-align: left; padding: 0 0 clamp(36px, 5vw, 56px); margin-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--mbs-line); background: none; }body.mbs-page .main-content .hero h1, body.mbs-page .main-content .hero h2 { font-family: var(--mbs-display-x); font-weight: 400; font-size: clamp(44px, 6.4vw, 92px); line-height: .95; letter-spacing: -.035em; color: var(--mbs-bone); background: none; -webkit-text-fill-color: currentColor; margin: 0; }body.mbs-page .main-content .hero p { color: rgba(245, 242, 234, .68); font-size: 18px; max-width: 60ch; margin: 22px 0 0; text-align: left; }