/* Evolving Brokers — the mint page.
*
* One screen, no scroll: the trading floor breathes along the bottom, the
* decision sits in the dark above it. Loads main.css first — every component
* here (.hire-board, .qty, .claim-btn) is already styled there, this file
* only builds the shell around them and shrinks them to fit one viewport.
*/
html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); }
/* ------------------------------------------------------------ the floor --
* The art is 21:9 and the band is driven by WIDTH, not by a slice of the
* height: crop it from the top and the first thing to go is the raised fist
* and then the head of the broker the whole banner is built around.
*
* On a phone the natural height would collapse to ~170 px, so a floor of
* 46vh takes over and `cover` crops the sides instead — which is the free
* version of a separate vertical render, centred on the same broker.
*/
#floor {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
height: clamp(46vh, calc(100vw / 2.3335), 82vh);
background: var(--bg);
}
/* The still is an ![]()
, not a background, so it carries the same stamped and
* responsive url the preload asks for — as a background it downloaded twice,
* once per spelling. The clip lies on top of it and fades in over it. */
#floor img, #floor video {
position: absolute; inset: 0; display: block;
width: 100%; height: 100%;
object-fit: cover; object-position: center bottom;
}
#floor video { opacity: 0; transition: opacity .9s ease; }
#floor video.on { opacity: 1; }
/* ------------------------------------------------------------- the dark --
* Measured against the viewport, not against the band, so the split reads as
* "top half dark, bottom half floor" on every screen. The top of the art is
* already near-black ceiling, so this dissolves the upper edge completely —
* there is no horizontal seam anywhere on the page.
*/
#scrim {
position: fixed; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(to bottom,
var(--bg) 0%,
rgba(6, 8, 15, .96) 24%,
rgba(6, 8, 15, .80) 38%,
rgba(6, 8, 15, .42) 52%,
rgba(6, 8, 15, .12) 68%,
rgba(6, 8, 15, .06) 84%,
rgba(6, 8, 15, .38) 100%),
linear-gradient(to right,
rgba(6, 8, 15, .60) 0%, rgba(6, 8, 15, 0) 20%,
rgba(6, 8, 15, 0) 80%, rgba(6, 8, 15, .60) 100%);
}
/* ------------------------------------------------------------- the bar -- */
#mint-nav {
position: fixed; z-index: 3; top: 0; left: 0; right: 0;
display: flex; align-items: center; gap: 22px;
padding: 16px var(--pad);
font-size: 12px; letter-spacing: .16em;
}
#mint-nav .brand {
font-family: "Space Grotesk", sans-serif; font-weight: 700;
letter-spacing: .12em; color: var(--ink); font-size: 13px;
}
#mint-nav .brand:hover { text-decoration: none; }
#mint-nav nav { display: flex; gap: 20px; margin-left: auto; }
#mint-nav nav a { color: var(--dim); }
#mint-nav nav a:hover { color: var(--green); text-decoration: none; }
/* ------------------------------------------------------------ the card --
* On a short laptop the whole thing scales down with vh rather than clipping,
* and if it still will not fit, the column scrolls: "no scroll" must never
* mean "the mint button is out of reach".
*/
#mint-stage {
position: fixed; inset: 0; z-index: 2;
display: grid; align-content: start; justify-items: center;
padding: clamp(38px, 4.8vh, 58px) var(--pad) 0;
overflow-y: auto; overscroll-behavior: contain;
}
#mint-card { width: min(1280px, 100%); }
/* the headline sits in the middle column, level with the panel tops */
.mint-head { grid-column: 2; text-align: center; padding: 2px 8px 0; }
#mint-card .kicker { margin-bottom: 6px; text-align: center; }
#mint-card h1 {
margin: 0 0 8px; text-align: center;
font-size: clamp(24px, min(3.2vw, 5.4vh), 42px); line-height: 1.06;
}
#mint-card .sub {
margin: 0 auto; text-align: center;
max-width: none; color: var(--dim);
font-size: clamp(12px, 1.5vh, 14px);
}
/* The empty middle column is the point: the register and the action sit off
* to the sides and the broker with the raised fist comes up through the gap
* between them instead of being buried under a panel. */
.mint-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(230px, 28vw, 470px) minmax(0, 1fr);
gap: 0;
align-items: start;
}
.mint-grid > :first-child { grid-column: 1; }
.mint-grid > :last-child { grid-column: 3; }
.mint-grid .hire-board,
.mint-grid .hire-act {
position: relative;
background: linear-gradient(180deg, rgba(20, 26, 41, .84), rgba(9, 12, 20, .76));
border: 1px solid #242d47;
backdrop-filter: blur(16px) saturate(.8);
-webkit-backdrop-filter: blur(16px) saturate(.8);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .05),
0 26px 48px -26px rgba(0, 0, 0, .9),
0 0 46px -20px rgba(79, 214, 122, .16);
}
/* a hairline of green light along the top edge of each panel */
.mint-grid .hire-board::before,
.mint-grid .hire-act::before {
content: ""; position: absolute; top: -1px; left: 8%; right: 8%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(79, 214, 122, .65), transparent);
}
/* faint scanlines — the terminal grain, almost subliminal */
.mint-grid .hire-board::after,
.mint-grid .hire-act::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(0deg,
rgba(255, 255, 255, .015) 0 1px, transparent 1px 3px);
}
.mint-grid .hire-act {
display: flex; flex-direction: column; gap: 14px;
padding: 19px 21px 21px;
}
/* the register reads like a live terminal, not a spec sheet */
.mint-grid .board-head {
background: rgba(8, 11, 19, .55);
padding: 15px 20px;
}
.mint-grid .board-head b {
padding: 4px 10px; font-size: 10px;
background: rgba(255, 183, 77, .08);
box-shadow: inset 0 0 0 1px rgba(255, 183, 77, .28);
}
.mint-grid .board-rows > div { padding: 7px 0; transition: background .15s; }
.mint-grid .board-rows > div:hover { background: rgba(255, 255, 255, .022); }
.mint-grid .board-rows dd { font-weight: 500; }
/* the bar glows and carries a passing glint while it fills */
.mint-grid .board-bar {
height: 38px; background: #070a12;
box-shadow: inset 0 2px 10px rgba(0, 0, 0, .65);
}
.mint-grid .board-bar i {
overflow: hidden;
box-shadow: 0 0 18px rgba(79, 214, 122, .35);
transition: width .8s ease;
}
.mint-grid .board-bar span { line-height: 38px; }
/* the stepper and the button are the decision — let them look like one */
.mint-grid .qty button { width: 60px; font-size: 22px; transition: background .15s, color .15s; }
.mint-grid .qty button:hover { background: #16281d; color: var(--green); }
.mint-grid .qty b { font-size: 22px; min-height: 52px; text-shadow: 0 0 14px rgba(79, 214, 122, .35); }
.mint-grid .claim-btn.wide {
background: linear-gradient(180deg, #5fe08c, #3fae64);
box-shadow: 0 12px 30px -12px rgba(79, 214, 122, .55);
}
.mint-grid .claim-btn.wide:hover:not([disabled]) {
background: linear-gradient(180deg, #6ff09b, #4cc274);
transform: translateY(-1px);
}
.mint-grid .claim-btn.wide[disabled] { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.mint-grid .note { font-size: 12px; line-height: 1.55; }
/* garnish only for people who did not ask for less motion */
@media (prefers-reduced-motion: no-preference) {
.mint-grid .board-head .green { animation: eb-blink 1.6s steps(2, start) infinite; }
@keyframes eb-blink { 50% { opacity: .25; } }
.mint-grid .board-bar i::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
transform: translateX(-100%); animation: eb-sweep 3s ease-in-out infinite;
}
@keyframes eb-sweep { 55%, 100% { transform: translateX(100%); } }
}
/* ------------------------------------------------------------- small --
* A phone gets the SQUARE cut of the floor, not the wide one — see the
* in mint.html. 100vw of a 1:1 frame is ~46vh of a phone, which is
* the bottom half the whole idea is built on; the wide frame would be a
* 170 px ribbon there.
*
* That swap is keyed to aspect-ratio 3/5, not to this width breakpoint: a
* tablet is under 900 px but its band is still 1.6 wide, so the square would
* be cropped top and bottom there — taking the hero's head with it. Shape
* decides the artwork, width decides the layout.
*
* Which means the panel has to fit in the other half. So: the register and
* the action fuse into one box, six rows of TBA fold into two, and the
* standalone X button goes — the header keeps that link.
*/
@media (max-width: 900px) {
#floor { height: clamp(34vh, 100vw, 46vh); }
#mint-nav { padding: 13px var(--pad); }
#mint-nav nav a:not(:last-child) { display: none; } /* keep X, drop the rest */
#mint-nav nav { gap: 0; }
#mint-stage { padding-top: 46px; padding-bottom: 12px; }
/* one box, not two stacked ones: the seam between them cost a gap, two
borders and two lots of padding for nothing. The headline goes back on
top — a phone has no middle column for it to live in. */
.mint-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.mint-grid > :first-child,
.mint-grid > :last-child,
.mint-grid .mint-head { grid-column: 1; }
.mint-grid .mint-head { order: -1; padding: 0 0 8px; }
.mint-grid .hire-act { border-top: 0; }
#mint-card h1 { font-size: clamp(25px, 7.2vw, 35px); margin-bottom: 7px; }
#mint-card .kicker { margin-bottom: 7px; font-size: 11px; }
#mint-card .sub { margin-bottom: 12px; font-size: 12px; max-width: 42ch; }
/* the header already links to X; a second full-width button for it is what
was pushing the floor off the screen */
.mint-grid .hire-act > .btn { display: none; }
.mint-grid .board-head { padding: 10px 15px; }
/* three across, label stacked over value: six rows of TBA collapse to two,
and "Robinhood Chain" gets a whole cell instead of colliding with its
own label in a half-width one */
.mint-grid .board-rows {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 12px; padding: 4px 15px 10px;
}
.mint-grid .board-rows > div { display: block; padding: 9px 0; }
.mint-grid .board-rows > div:nth-last-child(-n+3) { border-bottom: 0; }
.mint-grid .board-rows dt { font-size: 10.5px; letter-spacing: .12em; }
.mint-grid .board-rows dd { font-size: 13px; margin-top: 2px; }
.mint-grid .board-bar { margin: 0 15px 15px; height: 30px; }
.mint-grid .board-bar span { line-height: 30px; }
.mint-grid .hire-act { gap: 9px; padding: 13px 15px 14px; }
.mint-grid .claim-btn { padding: 12px 16px; }
.mint-grid .note { font-size: 11px; line-height: 1.42; }
}
/* A short screen has no room for a floor and a decision stacked — the art
* drops behind the panels and the lede goes. */
@media (max-height: 560px) {
#floor { height: 74vh; }
#mint-card .sub { display: none; }
#mint-card h1 { margin-bottom: 10px; }
#mint-stage { padding-top: 42px; }
}
/* ...and a landscape phone is wide enough to put the two panels back beside
* each other, which is the only way the button stays above the fold. */
@media (max-height: 560px) and (min-width: 620px) {
#mint-card { width: min(880px, 100%); }
.mint-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 14px; }
.mint-grid > :last-child { grid-column: 2; }
.mint-grid .mint-head { grid-column: 1 / -1; order: -1; padding: 0 0 6px; }
#mint-card h1 { font-size: clamp(24px, 4.4vh, 32px); }
.mint-grid .note { font-size: 11px; line-height: 1.4; }
}
/* --------------------------------------------------------- the control --
* Small, in the corner, and it only appears once the clip can actually play —
* a pause button over a video that never arrived would be a lie.
*/
#floor-toggle {
position: fixed; z-index: 4; right: 14px; bottom: 12px;
width: 30px; height: 30px; padding: 0; line-height: 1;
display: grid; place-items: center; cursor: pointer;
background: rgba(13, 17, 27, .66); color: var(--dim);
border: 1px solid var(--line);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
font: 10px/1 "IBM Plex Mono", ui-monospace, monospace;
opacity: .45; transition: opacity .2s, color .2s, border-color .2s;
}
#floor-toggle:hover, #floor-toggle:focus-visible {
opacity: 1; color: var(--green); border-color: var(--green);
}
#floor-toggle[hidden] { display: none; }
/* it is a control, not decoration — never let it fall under the mint panel */
#floor-toggle { z-index: 6; }
/* Someone who asked for less motion gets the control on sight rather than
having to find it — for them it is the way in, not a way out. */
@media (prefers-reduced-motion: reduce) {
#floor-toggle { opacity: .95; color: var(--green); border-color: #2c3550; }
}