/* Artificial Gorilla — green on black. Soft, glossy, heavily rounded. Pill nav, pill buttons, one big 3D object. */ :root { --bg: #050806; --bg-2: #080d09; --surface: #0c120e; --surface-2: #121a15; --line: #1d2921; --line-2: #2c3b31; --text: #eef4ef; --text-2: #aebbb2; --muted: #74857b; --acc: #c4ee3f; --acc-hi: #dcff6e; --acc-deep: #8fbb17; --acc-ink: #0b1400; --acc-soft: rgba(196, 238, 63, 0.13); --glow: rgba(196, 238, 63, 0.42); --bad: #ff6a52; --warn: #ffc44d; --s: 0.8125rem; --m: 0.9375rem; --l: 1.0625rem; --xl: 1.5rem; --max: 1180px; --bar-h: 0px; --r-lg: 26px; --r-md: 18px; --r-sm: 12px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); /* overflow-x on alone doesn't stop the page scrolling sideways under a position:fixed bar — the root has to clip it too. The hero glow bleeds past the viewport by design, so something has to contain it. */ overflow-x: clip; } body { margin: 0; color: var(--text); font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; font-size: var(--m); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; padding-bottom: var(--bar-h); background: radial-gradient(70% 48% at 50% -6%, rgba(196,238,63,0.13), transparent 62%), radial-gradient(46% 34% at 88% 14%, rgba(196,238,63,0.07), transparent 66%), var(--bg); background-attachment: fixed; } a { color: var(--acc); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 8px; } .num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 var(--glow); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes shimmer { from { background-position: -180% 0; } to { background-position: 280% 0; } } @keyframes flashRow { 0% { background: var(--acc-soft); } 100% { background: transparent; } } @keyframes spinner { to { transform: rotate(360deg); } } @keyframes bob { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-16px) rotate(-5deg); } } @keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes ringPop { 0% { transform: scale(0.7); opacity: 0.85; } 100% { transform: scale(2.4); opacity: 0; } } .flash-row { animation: flashRow 1.6s ease-out; } [data-reveal] { opacity: 0; transform: translateY(20px); } [data-reveal].in { opacity: 1; transform: none; transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1); } /* ── pill nav ─────────────────────────────────────────── */ .navwrap { position: sticky; top: 0; z-index: 60; padding: 0.85rem clamp(0.6rem, 3vw, 1.4rem); } .brand { display: flex; align-items: center; gap: 0.55rem; color: var(--text); } .brand:hover { text-decoration: none; } .brand img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); } .brand b { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; } .navlinks { display: none; gap: 0.15rem; margin-left: 0.6rem; } .navlinks a { color: var(--text-2); font-size: 0.85rem; padding: 0.35rem 0.7rem; border-radius: 999px; transition: color 160ms, background 160ms; } .navlinks a:hover { color: var(--text); background: rgba(255,255,255,0.05); text-decoration: none; } @media (min-width: 900px) { .navlinks { display: flex; } } .navpill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--muted); white-space: nowrap; } .navpill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .navpill[data-live='true'] { color: var(--acc); border-color: rgba(196,238,63,0.4); background: var(--acc-soft); animation: livePulse 2.8s ease-out infinite; } .navpill[data-live='false'] { color: var(--warn); border-color: rgba(255,196,77,0.35); } /* ── pill buttons ─────────────────────────────────────── */ .pill, button { font: inherit; font-weight: 600; letter-spacing: -0.01em; border-radius: 999px; cursor: pointer; padding: 0.62rem 1.25rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: 1px solid transparent; transition: transform 160ms cubic-bezier(0.22,1,0.36,1), box-shadow 200ms, background 200ms, filter 200ms; } .pill-solid, button:not(.pill-ghost):not(.chip):not(.pick) { color: var(--acc-ink); background: linear-gradient(180deg, var(--acc-hi), var(--acc) 52%, var(--acc-deep)); border-color: var(--acc-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 26px -12px var(--glow); } .pill-solid:hover:not(:disabled), button:not(.pill-ghost):not(.chip):not(.pick):hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 18px 34px -14px var(--glow); } .pill-solid:active:not(:disabled) { transform: translateY(0) scale(0.985); } .pill-ghost { color: var(--text); background: rgba(255,255,255,0.04); border-color: var(--line-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .pill-ghost:hover:not(:disabled) { border-color: var(--acc); background: rgba(255,255,255,0.07); transform: translateY(-2px); } button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; } button.busy { position: relative; color: transparent; } button.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(11,20,0,0.3); border-top-color: var(--acc-ink); animation: spinner 700ms linear infinite; } .pill-ghost.busy::after { border-color: var(--line-2); border-top-color: var(--text); } .nav-cta { padding: 0.5rem 1.05rem; min-height: 38px; font-size: 0.85rem; } @media (max-width: 620px) { .nav-cta { display: none; } } /* ── hero ─────────────────────────────────────────────── */ @media (min-width: 940px) { } .hero h1 em { font-style: normal; color: var(--acc); text-shadow: 0 0 60px var(--glow); } #contract-pill { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; cursor: pointer; } #contract-pill[data-copied='true'] { color: var(--acc); border-color: var(--acc); } /* the one big glossy object */ .hero-art { display: grid; place-items: center; } .plate { width: min(78%, 360px); aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center; background: linear-gradient(155deg, var(--acc-hi) 0%, var(--acc) 46%, var(--acc-deep) 100%); box-shadow: inset 0 8px 26px rgba(255,255,255,0.55), inset 0 -22px 46px rgba(60,90,0,0.4), 0 60px 90px -46px rgba(0,0,0,0.95), 0 0 130px -24px var(--glow); animation: bob 7s ease-in-out infinite; } .orb { width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 26%, rgba(255,255,255,0.9), rgba(255,255,255,0) 42%), url('/logo.png') center/cover no-repeat, #1b2028; box-shadow: inset -12px -16px 34px rgba(0,0,0,0.45), inset 8px 10px 22px rgba(255,255,255,0.28), 0 26px 40px -18px rgba(0,0,0,0.7); } @media (max-width: 939px) { .plate { width: min(58%, 250px); } .hero-art { order: -1; } } /* ── stat strip ───────────────────────────────────────── */ @media (min-width: 800px) { } .stat:hover { transform: translateY(-3px); border-color: var(--line-2); } @media (min-width: 800px) { } .meter { margin-top: 0.55rem; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; position: relative; } .meter i { display: block; height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--acc-deep), var(--acc)); box-shadow: 0 0 14px var(--glow); transition: width 900ms cubic-bezier(0.22,1,0.36,1); } .meter::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(220,255,110,0.5), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: shimmer 3s linear infinite; } .banner { margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; padding: 1rem 1.3rem; border-radius: var(--r-lg); background: var(--acc-soft); border: 1px solid rgba(196,238,63,0.22); font-size: var(--l); } .banner b { color: var(--acc); } .banner span { color: var(--muted); font-size: var(--m); } /* ── ticker ───────────────────────────────────────────── */ .tape { margin-top: clamp(2rem, 5vw, 3rem); border-block: 1px solid var(--line); background: var(--bg-2); overflow: hidden; position: relative; } .tape::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, transparent 7%, transparent 93%, var(--bg) 100%); } .tape-track { display: flex; gap: 2.25rem; width: max-content; padding: 0.55rem 1rem; animation: tape 36s linear infinite; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; } .tape:hover .tape-track { animation-play-state: paused; } .tape-item { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; color: var(--muted); } .tape-item b { color: var(--text); font-weight: 600; } .tape-item .up { color: var(--acc); } .tape-logo { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; } /* ── page ─────────────────────────────────────────────── */ main { max-width: var(--max); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(0.9rem, 4vw, 1.5rem) 4rem; display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); } .split { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); } @media (min-width: 940px) { .split { grid-template-columns: 1.05fr 1fr; align-items: start; } } .card { position: relative; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.15rem, 3vw, 1.8rem); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 50px -34px rgba(0,0,0,0.95); } section > h2 { margin: 0 0 0.2rem; font-size: var(--xl); font-weight: 700; letter-spacing: -0.035em; } section > p.lede, p.lede { margin: 0 0 1.15rem; color: var(--muted); font-size: var(--s); max-width: 60ch; } h3.sub { margin: 1.8rem 0 0.65rem; font-size: var(--l); font-weight: 700; letter-spacing: -0.025em; } /* rows */ .rows { display: grid; gap: 0.5rem; } .row { display: grid; grid-template-columns: 3px auto 1fr auto; align-items: center; gap: 0.8rem; padding: 0.7rem 0.95rem 0.7rem 0; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,0.02); overflow: hidden; transition: transform 220ms cubic-bezier(0.22,1,0.36,1), border-color 220ms; } .row:hover { transform: translateY(-2px); border-color: var(--line-2); } .row__tick { align-self: stretch; background: var(--c, var(--muted)); box-shadow: 0 0 16px var(--c, transparent); } .row__name { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; min-width: 0; } .row__sym { font-weight: 700; letter-spacing: -0.02em; } .row__sub { color: var(--muted); font-size: var(--s); } .row__val { text-align: right; } .row__val b { display: block; font-weight: 600; } .row__val small { color: var(--muted); font-size: 0.72rem; } /* token marks */ .tmark { width: var(--s2, 34px); height: var(--s2, 34px); border-radius: 50%; flex: 0 0 auto; display: block; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 10px -4px rgba(0,0,0,0.8); transition: transform 420ms cubic-bezier(0.34,1.4,0.5,1); } .tmark-text { display: grid; place-items: center; font-weight: 700; font-size: calc(var(--s2, 34px) * 0.3); color: var(--c, var(--text)); background: color-mix(in srgb, var(--c, var(--acc)) 16%, var(--surface-2)); } .row:hover .tmark, .pair:hover .tmark, .pick:hover .tmark { transform: scale(1.08) rotate(-6deg); } /* pairs */ .pairs { display: grid; gap: 0.5rem; } .pair { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.8rem 1rem; background: rgba(255,255,255,0.02); transition: transform 220ms cubic-bezier(0.22,1,0.36,1), border-color 220ms; } .pair:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c, var(--acc)) 45%, var(--line)); } .pair-tok { font-weight: 700; letter-spacing: -0.02em; display: block; } .pair-sub { font-size: var(--s); color: var(--muted); } .pair-out { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); font-size: 0.78rem; white-space: nowrap; } .pair-out b { color: var(--p, var(--text)); font-weight: 700; } .pair-arrow { color: var(--muted); } @media (max-width: 520px) { .pair { grid-template-columns: auto 1fr; row-gap: 0.6rem; } .pair-out { grid-column: 1 / -1; justify-content: center; } } /* flow */ .flow { display: grid; gap: 0.6rem; } @media (min-width: 780px) { .flow { grid-template-columns: repeat(2, 1fr); } } .flow-step { display: grid; grid-template-columns: 36px 1fr; gap: 0.85rem; align-items: start; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.95rem 1.05rem; background: rgba(255,255,255,0.02); } .flow-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(196,238,63,0.4); color: var(--acc); background: var(--acc-soft); font-weight: 700; font-size: 0.85rem; } .flow-step h4 { margin: 0.3rem 0 0.2rem; font-size: var(--m); font-weight: 600; } .flow-step p { margin: 0; color: var(--muted); font-size: var(--s); } /* position panel */ .wallet-bar { display: flex; gap: 0.55rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .safe { display: flex; gap: 0.55rem; font-size: var(--s); color: var(--muted); background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.75rem 0.9rem; margin: 0 0 1.1rem; } .safe svg { width: 16px; height: 16px; fill: var(--acc); flex: 0 0 auto; margin-top: 2px; } .safe b { color: var(--text); font-weight: 600; } .status { border-left: 3px solid var(--line-2); padding: 0.6rem 0 0.6rem 0.9rem; margin-bottom: 1.1rem; } .status b { display: block; } .status p { margin: 0.15rem 0 0; color: var(--muted); font-size: var(--s); } .status[data-state='eligible'] { border-color: var(--acc); } .status[data-state='pending'] { border-color: var(--warn); } .status[data-state='short'] { border-color: var(--bad); } .picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; margin-top: 0.75rem; } @media (min-width: 520px) { .picker { grid-template-columns: repeat(4, 1fr); } } .pick { text-align: left; background: rgba(255,255,255,0.02); border: 1px solid var(--line-2); color: var(--text); border-radius: var(--r-md); padding: 0.75rem; display: grid; gap: 0.25rem; justify-items: start; min-height: 92px; min-width: 0; transition: transform 200ms cubic-bezier(0.22,1,0.36,1), border-color 200ms, background 200ms; } .pick:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--acc); } .pick strong { font-size: var(--m); letter-spacing: -0.02em; color: var(--c, var(--text)); } .pick span { font-size: 0.68rem; color: var(--muted); } .pick[aria-pressed='true'] { border-color: var(--c, var(--acc)); background: color-mix(in srgb, var(--c, var(--acc)) 12%, transparent); } .note { color: var(--muted); font-size: var(--s); margin: 0.85rem 0 0; } .note[data-tone='error'] { color: var(--bad); } .note[data-tone='ok'] { color: var(--acc); } .warn-txt { color: var(--warn); } .row__sub .warn-txt { display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* tables */ table { width: 100%; border-collapse: collapse; font-size: var(--s); } th { text-align: left; font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 0 0.6rem; border-bottom: 1px solid var(--line); } td { padding: 0.65rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; } td.r, th.r { text-align: right; } tbody tr:last-child td { border-bottom: 0; } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--muted)); margin-right: 0.4rem; } .addr { font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; color: var(--muted); word-break: break-all; } .empty { color: var(--muted); padding: 1.15rem 0; } .scroller { max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; margin-right: -0.35rem; padding-right: 0.35rem; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 2.2rem), transparent 100%); } .scroller[data-end='true'] { mask-image: none; } .scroller::-webkit-scrollbar { width: 8px; } .scroller::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; } .scroller table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); } /* rules + contract */ .rules { display: grid; gap: 0.8rem; } .rule-item { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; } .rule-item b { color: var(--acc); font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.78rem; white-space: nowrap; background: var(--acc-soft); border-radius: 999px; padding: 0.2rem 0.6rem; } .rule-item p { margin: 0; color: var(--muted); font-size: var(--s); } .rule-item p strong { color: var(--text); font-weight: 600; } .contract { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.85rem 0.95rem; background: rgba(255,255,255,0.02); display: grid; gap: 0.5rem; } .contract dt { font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0; } .contract dd { margin: 0; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 0.38rem; border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); color: var(--text-2); border-radius: 999px; padding: 0.34rem 0.75rem; min-height: 34px; font: inherit; font-size: 0.76rem; cursor: pointer; transition: border-color 180ms, color 180ms, transform 180ms; } .chip:hover { color: var(--text); border-color: var(--acc); transform: translateY(-1px); text-decoration: none; } .chip svg { width: 14px; height: 14px; fill: currentColor; } .chip.icon-only { padding: 0.4rem; min-height: 34px; } .chip[data-copied='true'] { color: var(--acc); border-color: var(--acc); } .mobilebar { position: fixed; inset: auto 0 0 0; z-index: 40; box-sizing: border-box; width: 100%; display: none; gap: 0.5rem; padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom)); background: rgba(8, 11, 9, 0.95); backdrop-filter: blur(16px); border-top: 1px solid var(--rule); box-shadow: 0 -10px 34px -18px rgba(0,0,0,0.95); } /* flex items default to min-width:auto, so a long label — a connected wallet address, say — refuses to shrink and shoves the next button off-screen. */ .mobilebar button { flex: 1 1 0; min-width: 0; padding-inline: 0.6rem; border-radius: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 760px) { .mobilebar { display: flex; } body { --bar-h: 74px; } } footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 2rem clamp(0.9rem, 4vw, 1.5rem) 2.5rem; color: var(--muted); font-size: 0.78rem; } footer > div { max-width: var(--max); margin: 0 auto; } footer p { margin: 0 0 0.5rem; max-width: 78ch; } .social { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .pulse-ring { position: fixed; left: 50%; top: 22%; z-index: 900; width: 130px; height: 130px; margin: -65px 0 0 -65px; border: 2px solid var(--acc); border-radius: 50%; pointer-events: none; animation: ringPop 1.1s cubic-bezier(0.22,1,0.36,1) forwards; } /* ── mobile ───────────────────────────────────────────── */ @media (max-width: 760px) { .navwrap { padding: 0.6rem; } .brand b { font-size: 0.85rem; } .banner { font-size: var(--m); padding: 0.9rem 1rem; } .banner span { display: block; margin-top: 0.25rem; font-size: var(--s); } .card { padding: 1rem; border-radius: var(--r-md); } .scroller { max-height: 16rem; } table { font-size: 0.76rem; } .row { padding-right: 0.7rem; gap: 0.55rem; } } @media (hover: none) { .row:hover, .pair:hover, .stat:hover, .pick:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ═══════════════════════════════════════════════════════════ Floating pill nav ═══════════════════════════════════════════════════════════ */ .nav { position: sticky; top: 0.85rem; z-index: 60; width: min(1180px, calc(100% - 1.6rem)); margin: 0.85rem auto 0; display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0.55rem 0.5rem 0.85rem; border-radius: 999px; background: rgba(16, 21, 17, 0.86); backdrop-filter: blur(20px) saturate(1.3); border: 1px solid var(--rule); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 40px -22px rgba(0,0,0,1); } .nav .brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); flex: 0 0 auto; } .nav .brand img { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--rule-2); } .nav .brand b { font-size: 0.95rem; letter-spacing: -0.03em; white-space: nowrap; } .nav-links { display: none; gap: 1.15rem; flex: 1; } .nav-links a { color: var(--muted); text-decoration: none; font-size: 0.86rem; transition: color 180ms; } .nav-links a:hover { color: var(--ink); } @media (min-width: 940px) { .nav-links { display: flex; } } .nav-right { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; } .nav-timer { display: none; align-items: center; gap: 0.4rem; padding: 0.32rem 0.7rem; border-radius: 999px; background: var(--green-wash); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); color: var(--green-text); font-size: 0.78rem; } .nav-timer i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: livePulse 2.4s ease-out infinite; } @media (min-width: 620px) { .nav-timer { display: inline-flex; } } .btn-sm { min-height: 38px; padding: 0.42rem 1rem; border-radius: 999px; font-size: 0.86rem; font-weight: 650; } /* ═══════════════════════════════════════════════════════════ Hero ═══════════════════════════════════════════════════════════ */ .hero { position: relative; isolation: isolate; overflow: hidden; /* the ::before glow extends past the edges on purpose */ max-width: 1180px; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) clamp(0.9rem, 3vw, 1rem) clamp(2rem, 5vw, 3.5rem); } .hero::before { content: ''; position: absolute; inset: -10% -30% 20%; pointer-events: none; z-index: -1; background: radial-gradient(42% 46% at 22% 26%, rgba(201,238,58,0.15), transparent 64%), radial-gradient(38% 42% at 82% 40%, rgba(143,232,90,0.11), transparent 66%); filter: blur(30px); animation: aurora 19s ease-in-out infinite; } .hero-grid { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center; } @media (min-width: 940px) { .hero-grid { grid-template-columns: 1.12fr 0.88fr; } } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.4rem; padding: 0.4rem 0.9rem 0.4rem 0.7rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--green) 30%, var(--rule)); background: var(--green-wash); font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; color: var(--green-text); } .eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: livePulse 2.4s ease-out infinite; } .hero h1 { margin: 0; font-size: clamp(2.9rem, 7.4vw, 5.4rem); font-weight: 700; letter-spacing: -0.055em; line-height: 0.92; color: var(--ink); } .hero h1 .accent { color: var(--green); } .hero-sub { margin: 1.35rem 0 0; max-width: 46ch; color: var(--muted); font-size: 1.02rem; line-height: 1.6; } .hero-sub b { color: var(--ink); font-weight: 600; } .hero-cta { display: flex; align-items: center; gap: 0.6rem; margin-top: 2rem; flex-wrap: wrap; } .hero-cta button { border-radius: 999px; padding: 0.8rem 1.6rem; } .pill-addr { background: var(--wash); color: var(--ink-2); border: 1px solid var(--rule-2); font-family: 'IBM Plex Mono', monospace; font-size: 0.84rem; font-weight: 500; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .pill-addr:hover:not(:disabled) { filter: none; border-color: var(--green); color: var(--ink); } .pill-addr[data-copied='true'] { border-color: var(--green); color: var(--green-text); background: var(--green-wash); } /* the glossy plate */ .hero-art { display: grid; place-items: center; perspective: 900px; } .plate { position: relative; width: min(74vw, 340px); aspect-ratio: 1; border-radius: 26%; background: linear-gradient(150deg, #e6ff72 0%, var(--green) 42%, #7cae14 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,0.5), inset 0 -6px 14px rgba(0,0,0,0.25), 0 30px 60px -22px rgba(160,232,74,0.45), 0 50px 90px -40px rgba(0,0,0,1); transform: rotateX(8deg) rotateY(-10deg) rotate(-3deg); animation: floatY 7s ease-in-out infinite; display: grid; place-items: center; } .plate::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(155deg, rgba(255,255,255,0.5) 0%, transparent 40%); pointer-events: none; } .orb { width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #ffffff 0%, #dfe8dc 32%, #9fae99 78%, #6f7d6a 100%), #cfd8cb; box-shadow: inset -10px -14px 26px rgba(0,0,0,0.32), inset 8px 10px 18px rgba(255,255,255,0.65), 0 18px 30px -12px rgba(0,0,0,0.6); position: relative; overflow: hidden; } /* the logo sits on the orb like a printed mark */ .orb::after { content: ''; position: absolute; inset: 12%; background: url('/logo.png') center/contain no-repeat; border-radius: 50%; mix-blend-mode: multiply; opacity: 0.94; } /* ═══════════════════════════════════════════════════════════ Flat stat row ═══════════════════════════════════════════════════════════ */ .hero-stats { display: grid; gap: 0.7rem; margin-top: clamp(2rem, 5vw, 3.25rem); grid-template-columns: repeat(2, 1fr); } @media (min-width: 860px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } } .stat { margin: 0; padding: 1rem 1.15rem 1.1rem; border-radius: 16px; background: linear-gradient(180deg, var(--wash) 0%, var(--paper) 100%); border: 1px solid var(--rule); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); transition: border-color 260ms, transform 260ms; } .stat:hover { border-color: var(--rule-2); transform: translateY(-2px); } .stat dt { margin: 0 0 0.45rem; font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); } .stat dd { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); } .stat.wide { grid-column: 1 / -1; } @media (min-width: 860px) { .stat.wide { grid-column: span 2; } } .meter { margin-top: 0.7rem; height: 6px; border-radius: 4px; background: #0d120e; border: 1px solid var(--rule); overflow: hidden; position: relative; } /* ═══════════════════════════════════════════════════════════ Banner strip ═══════════════════════════════════════════════════════════ */ .strip { margin-top: 0.7rem; padding: 1.1rem 1.35rem; border-radius: 18px; background: linear-gradient(180deg, var(--green-wash) 0%, rgba(201,238,58,0.05) 100%); border: 1px solid color-mix(in srgb, var(--green) 22%, var(--rule)); font-size: 1rem; color: var(--ink); } .strip b { color: var(--green-text); font-weight: 650; } .strip em { color: var(--muted); font-style: normal; } @media (max-width: 620px) { .strip { font-size: 0.9rem; padding: 0.9rem 1rem; } } /* nav + hero on small screens */ @media (max-width: 620px) { .nav { width: calc(100% - 1rem); padding: 0.45rem 0.45rem 0.45rem 0.7rem; gap: 0.5rem; } .nav .brand b { font-size: 0.82rem; } .nav .brand img { width: 26px; height: 26px; } .hero { padding-top: 2rem; } .hero h1 { font-size: clamp(2.5rem, 13vw, 3.6rem); } .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta button { width: 100%; } .plate { width: min(62vw, 220px); } }