git / moonbite-network / website/css/spark.css · raw
/* ============================================================ Spark — "The Caseback" Single symmetric column. Consent is the most-designed screen. Mining screen is deliberate emptiness. Inherits tokens from style.css. ============================================================ */.mono { font-family: var(--mono); }.num { font-variant-numeric: tabular-nums; }.spark { max-width: 620px; margin: 0 auto; padding: 64px 24px 40px; }/* top-right handbrake + thermal dots */.spark-topright { display: flex; align-items: center; gap: 14px; }.thermal { display: inline-flex; gap: 5px; }.thermal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hair); }.thermal__dot.on { background: #4a7a52; } /* calm/ok green, muted */.thermal__dot.warn { background: var(--gold); }.btn-stop { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ivory); background: transparent; border: 1px solid var(--hair); border-radius: 8px; padding: 7px 16px; cursor: pointer; transition: border-color .15s;}.btn-stop:hover { border-color: var(--gold-dim); }/* ---------- Consent ---------- */.consent__lead { font-size: 22px; color: var(--ivory); text-align: center; margin: 24px 0 20px; line-height: 1.5; }.consent__lead .num { color: var(--gold); font-weight: 500; }.consent__batt { text-align: center; font-size: 15px; color: var(--ivory); margin: 0 0 8px; }.consent__hr { height: 1px; background: var(--hair); margin: 28px 0; }.consent__slider { }.consent__sliderhead { display: flex; justify-content: space-between; font-size: 14px; color: var(--mist); margin-bottom: 12px; }.era-label { color: var(--gold); font-weight: 600; letter-spacing: 0.06em; }input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--hair); outline: none; margin: 6px 0;}input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--gold); cursor: pointer;}input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--gold); cursor: pointer;}.consent__ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--mist); margin-top: 8px; }.consent__ticksunit { color: var(--mist); }.consent__links { display: flex; gap: 24px; justify-content: center; margin: 26px 0 0; }.consent__links a { color: var(--ivory); font-size: 14px; border-bottom: 1px solid var(--hair); padding-bottom: 2px; transition: border-color .15s; }.consent__links a:hover { border-color: var(--gold-dim); }.consent__truth { text-align: center; font-size: 14px; color: var(--mist); line-height: 1.6; margin: 0; }.consent__truth strong { color: var(--ivory); font-weight: 600; }.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 14px; }.btn-accept, .btn-decline { font-family: var(--sans); font-size: 15px; font-weight: 600; padding: 14px 0; border-radius: 8px; cursor: pointer; min-height: 48px; transition: filter .15s, border-color .15s;}.btn-accept { color: var(--obsidian); background: var(--gold); border: 1px solid var(--gold); }.btn-accept:hover { filter: brightness(1.08); }.btn-decline { color: var(--ivory); background: transparent; border: 1px solid var(--hair); }.btn-decline:hover { border-color: var(--gold-dim); }.consent__declined { text-align: center; color: var(--mist); font-size: 14px; }/* ---------- Mining ---------- */.mining { text-align: center; padding-top: 20px; }.mining .counter { padding-bottom: 8px; }.mining .counter__num { font-size: clamp(38px, 8vw, 72px); }.mining__hr { height: 1px; background: var(--hair); margin: 40px 0; }.honesty-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.honesty { text-align: center; }.honesty__v { display: block; font-size: 20px; color: var(--ivory); }.honesty__k { display: block; font-size: 12px; color: var(--mist); margin-top: 6px; }.claim-label { font-size: 14px; margin: 0 0 12px; }.claim { display: flex; gap: 10px; justify-content: center; }.claim__btn { font-family: var(--sans); font-size: 14px; color: var(--mist); background: transparent; border: 1px solid var(--hair); border-radius: 8px; padding: 10px 16px; cursor: not-allowed; opacity: .7;}.claim-note { font-size: 13px; margin-top: 14px; }.toast { margin: 26px auto 0; max-width: 460px; font-size: 14px; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 8px; padding: 12px 16px;}/* ---- Live-chain miner panel ---- */.livemine { max-width: 560px; margin: 0 auto; text-align: center; }.livemine__hint { font-size: 13px; line-height: 1.6; margin: 0 0 16px; }.livemine__row { display: flex; gap: 10px; margin-bottom: 12px; }.livemine__input { flex: 1; font-family: var(--mono); font-size: 13px; color: var(--ivory); background: rgba(255, 255, 255, .03); border: 1px solid var(--hair); border-radius: 8px; padding: 11px 14px; outline: none;}.livemine__input:focus { border-color: var(--gold-dim); }.livemine__input::placeholder { color: var(--mist); }.livemine #mineLiveBtn { white-space: nowrap; }.livemine__status { font-size: 13px; margin: 4px 0 10px; word-break: break-all; color: var(--mist);}.livemine__status.is-ok { color: #5fd08a; }.livemine__status.is-err { color: #e08a7a; }.livemine__status.is-busy { color: var(--gold); }@media (max-width: 560px) { .honesty-row { grid-template-columns: 1fr; gap: 22px; } .livemine__row { flex-direction: column; }}