/* ===== $Send design system — cypherpunk synthwave ===== * Identity hues (green/gold/diamond) are unchanged: they ARE the brand. * Everything else moved from blue-black to a violet-black ramp, which is what * makes neon read as neon rather than as "bright colour on grey". * * SILENT-FAILURE WARNINGS for future edits: * - Restoring `body { background: var(--ink) }` deletes the horizon grid and * scanlines with no error, because both are body pseudo-elements. * - Any ancestor of body gaining transform/filter/will-change/contain breaks * `position: fixed` on those two layers. * - --ink-4 is DECORATIVE ONLY. Interactive borders use --edge-ctl, which is * the only value that clears WCAG 1.4.11 (3:1) against our surfaces. * - --focus is deliberately NOT accent-derived. prefs.js lets a user set the * accent to anything, including something invisible; the focus ring must * survive that, so it is pinned to --text. */ :root { /* ---------- IDENTITY (prefs.js live-overrides the first three) ---------- */ /* The acid green the brand art is built on. It was #b4ff2b — already a yellow-green, and close — but the mark sits on a field that is a shade deeper and more saturated, and "close" is what makes a logo look like it was dropped onto somebody else's site. prefs.js live-overrides these three per reader, so this is the DEFAULT accent, not a fixed value anything may assume. --green-dark is NOT free to follow the hue down. Seventeen rules paint a button as `linear-gradient(180deg, var(--green-bright), var(--green-dark))` with a fixed --on-green label, and the label spans the whole button — so the contrast that matters is against the gradient's BOTTOM. A first pass took it to #5e7a00, which is the right hue and a 39% luminance drop, and put that label at 3.44:1: a real WCAG failure on every primary button on the site, introduced by the rebrand and invisible to any check that only measures tokens against the page background. #7e9a00 keeps the new hue at the old luminance — 5.26:1 on the label, 6.05:1 as a hairline. */ --green: #a8ce00; --green-bright: #c6f000; --green-dark: #7e9a00; --rh-green: #00C805; --gold: #ffb340; --gold-deep: #e07b00; --diamond: #9fe0ff; --diamond-deep: #2a7fb0; --red: #ff5d5d; /* ---------- ATMOSPHERE (decoration only — never text, never state) ---------- */ --neon-magenta: #ff3ba7; --neon-violet: #a45cff; --neon-cyan: #45e5ff; /* ---------- SURFACE RAMP ---------- Was a VIOLET-black ramp, chosen (see the note at the top of this file) because violet is what made the old neon read as neon rather than as bright colour on grey. The brand's marks are MATTE NEUTRAL black, so that violet cast was the one thing on the page actively disagreeing with the logo. Not a pure neutral grey either — a ramp with no bias at all reads as unconsidered, and grey under an acid-green accent reads as cold. The bias is a few points toward the accent's own hue, so the dark belongs to the same family as the mark sitting on it. Every step keeps or improves the contrast it had: --text-dim went 9.59 → 10.18, --text-mute 6.58 → 6.86. */ --void: #000000; --ink: #050604; --ink-1: #020301; /* darkest ink — high-contrast text ON bright green/gold highlights */ --ink-2: #0c0e09; --ink-3: #14170f; --ink-4: #22261b; /* DECORATIVE separator ONLY — not a control boundary */ --ink-5: #3a4032; /* ---------- TEXT ---------- The blue cast went with the violet ramp; on a green-biased dark it read as a second accent nobody asked for. Warmed to a near-white that belongs to the same family, at the same contrast. */ --text: #f2f6ec; --text-dim: #b6beac; --text-mute: #949c8a; /* ---------- FOCUS (never accent-derived — prefs.js must not be able to hide it) ---------- */ --focus: #f2f6ec; /* How much of the bottom of the VIEWPORT the two pinned controls own — #music-player (bottom 1rem, ~61px tall, z 250) and #compose-fab (bottom 1rem, ~51px, z 240). Anything that puts a control near the bottom of the screen has to clear this or the pinned ones sit on top of it: they are pinned to the viewport, not to the column, so it happens at every width, not just on a phone. Declared once because it was already being re-derived in two places. */ --fab-clear: calc(5.5rem + env(safe-area-inset-bottom, 0px)); --focus-halo: rgba(5,3,14,0.92); /* ---------- INK-ON-ACCENT ---------- */ --on-green: var(--ink-1); --on-gold: var(--ink-1); --on-diamond: #04121c; --on-red: #140606; /* ---------- CONTROL FILLS ---------- Every button on the site carries BLACK type (--on-green / --on-gold / --ctl-ink). A control that is not a brand-gradient primary therefore needs a LIGHT fill under it — a transparent or ink-coloured pill with black type is invisible. The ladder: rest → hover lightens toward --text → selected takes the green (or gold) fill → disabled drops to a muted mix that still clears 4.5:1 for --ink-1. Mixes of tokens only, so prefs.js's re-solved --text / --green families carry straight through. */ /* Every control fill is the brand green — never a white wash. Black type sits on all of them, and --green-dark is the floor: prefs.js lifts a user-chosen accent until --ink-1 clears 4.5:1 on it. */ --ctl-fill: var(--green); --ctl-fill-hi: var(--green-bright); --ctl-fill-lo: var(--green-dark); --ctl-fill-mute: var(--green-dark); --ctl-fill-dis: color-mix(in srgb, var(--green-dark) 75%, var(--ink-4) 25%); /* the matrix grid every control wears: dark cells on the green, lit cells around the pointer */ --mx-line: color-mix(in srgb, var(--ink-1) 26%, transparent); --mx-cell: var(--green-bright); --mx-glow: color-mix(in srgb, var(--green-bright) 55%, transparent); --mx-size: 7px; --ctl-ink: var(--ink-1); /* ---------- CONTROL BOUNDARY (WCAG 1.4.11 >= 3:1) ---------- */ --edge-ctl: #7e8a6e; --edge-ctl-lit: var(--green); /* ---------- ACCENT TINTS (follow the user's accent automatically) ---------- */ --g-wash: color-mix(in srgb, var(--green) 7%, transparent); --g-tint: color-mix(in srgb, var(--green) 13%, transparent); --g-veil: color-mix(in srgb, var(--green) 22%, transparent); --g-edge: color-mix(in srgb, var(--green) 33%, transparent); --g-lit: color-mix(in srgb, var(--green) 45%, transparent); --g-hot: color-mix(in srgb, var(--green) 62%, transparent); --o-wash: color-mix(in srgb, var(--gold) 7%, transparent); --o-tint: color-mix(in srgb, var(--gold) 13%, transparent); --o-veil: color-mix(in srgb, var(--gold) 22%, transparent); --o-edge: color-mix(in srgb, var(--gold) 35%, transparent); --o-lit: color-mix(in srgb, var(--gold) 45%, transparent); --o-hot: color-mix(in srgb, var(--gold) 62%, transparent); --r-wash: color-mix(in srgb, var(--red) 8%, transparent); --r-tint: color-mix(in srgb, var(--red) 15%, transparent); --r-edge: color-mix(in srgb, var(--red) 40%, transparent); --d-tint: color-mix(in srgb, var(--diamond) 12%, transparent); --d-edge: color-mix(in srgb, var(--diamond) 40%, transparent); /* ---------- GLASS ---------- */ /* These are the ramp again, as rgba so they can sit translucently over content — and being rgba they are INVISIBLE to any search for hex colours, which is how they stayed violet while every token around them moved. They paint the nav, the mobile menu, modal scrims and card surfaces, i.e. the most-seen chrome on every page. Same alphas, new ramp. */ --glass-nav: rgba(5, 6, 4, 0.86); /* --ink */ --glass-menu: rgba(5, 6, 4, 0.975); /* mobile dropdown sits over scrolling content — stays near-opaque */ --glass-scrim: rgba(0, 0, 0, 0.80); /* --void */ --glass-hi: rgba(20, 23, 15, 0.82); /* --ink-3 */ --glass-lo: rgba(12, 14, 9, 0.86); /* --ink-2 */ --glass-well: rgba(2, 3, 1, 0.55); /* --ink-1 */ --glass-sheen: color-mix(in srgb, var(--green) 9%, transparent); /* green, not a white wash — the world layer is one colour */ --glass-edge: color-mix(in srgb, var(--green) 20%, transparent); --hair: color-mix(in srgb, var(--green) 14%, transparent); --blur: 18px; --blur-sm: 10px; --blur-scrim: 8px; --sat: 1.35; /* ---------- GLOW ---------- */ --glow-g: color-mix(in srgb, var(--green) 55%, transparent); --glow-o: color-mix(in srgb, var(--gold) 50%, transparent); --glow-d: rgba(159,224,255,0.50); --glow-m: rgba(255,59,167,0.45); --glow-r: rgba(255,93,93,0.45); --glow-1: 8px; --glow-2: 20px; --glow-3: 44px; --shadow-1: 0 2px 10px rgba(3,2,10,0.45); --shadow-2: 0 12px 30px rgba(3,2,10,0.50); --shadow-3: 0 24px 56px rgba(3,2,10,0.60); /* ---------- GRID / SCANLINE ---------- */ --grid-line: color-mix(in srgb, var(--green) 9%, transparent); /* was magenta — the last of the old identity in the world layer */ --grid-line-2: color-mix(in srgb, var(--green) 15%, transparent); --grid-gap: 48px; --grid-tilt: 58deg; --grid-persp: 340px; /* referenced by components but never defined — they resolved to their fallbacks (an old blue-black) or inherited */ --bg-1: var(--ink-2); --mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); --muted: var(--text-dim); --red-soft: #ffb4b4; /* loss text on dark wells; was the same literal in seven places */ --scan: rgba(255,255,255,0.026); --scan-period: 3px; /* ---------- GEOMETRY / MOTION / TYPE ---------- */ --r-1: 10px; --r-2: 14px; --r-3: 18px; --r-4: 22px; --r-pill: 999px; --dur-1: 120ms; --dur-2: 180ms; --dur-3: 320ms; --dur-4: 600ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-pop: cubic-bezier(0.2, 2.2, 0.4, 1); --ease-xp: cubic-bezier(0.2, 0.8, 0.3, 1); --font-body: 'Rubik', system-ui, -apple-system, sans-serif; --font-disp: 'Luckiest Guy', 'Rubik', cursive; /* ---------- TEXT SIZE: a fluid scale with a floor ---------- Every font-size in every stylesheet, inline style and script-built style is max(var(--text-floor), ) (tests/textsize.mjs holds the line), and the rem scale hangs off --text-base on . Both grow with the viewport: on a phone (375px) the base is the reader's own 1rem (16px by default — the text a phone always had) and nothing is smaller than 14px, the accessibility floor for the smallest captions; from there both rise linearly with the width to a 1.25rem base and a 19pt (25.3px) floor at 1280px and wider. rem on means a reader's browser font-size preference still scales the whole site; browser zoom scales all of it too. */ --text-floor: clamp(14px, calc(14px + (100vw - 375px) * 0.01252), 19pt); --text-base: clamp(1rem, calc(1rem + (100vw - 375px) * 0.00442), 1.25rem); /* ---------- THE NAV'S OWN SCALE ---------- A bar has one row to spend, so its text does not follow the page floor: links and the wordmark use --nav-fs (15px on a phone, 17px from 1500px up), the pills' labels and figures --nav-fs-s (13px to 15px) — never under 13px, the floor for a control label. Every pill and button in the bar is --nav-ctl tall (44px where a finger does the pointing). tests/textsize.mjs allows exactly these tokens outside the page floor. */ --nav-fs: clamp(15px, calc(15px + (100vw - 375px) * 0.00178), 17px); --nav-fs-s: clamp(13px, calc(13px + (100vw - 375px) * 0.00178), 15px); --nav-ctl: 40px; /* the notification count: a circle sized with the bell (20px on a phone, 22px from 1500px up) and digits at 58% of it — about 12–13px bold, so "9+" sits inside the red circle at every width instead of spilling out of it */ --notif-badge: clamp(20px, calc(20px + (100vw - 375px) * 0.00178), 22px); --nav-fs-badge: calc(var(--notif-badge) * 0.58); /* ---------- TEXT DRAWN INSIDE A GRAPHIC ---------- A label painted into a ring or a medal has to fit the graphic's geometry, so it is sized in the graphic's own units and grows with the graphic — the page floor would push it into its neighbours (the level ring's "LEVEL" sat on its number). The dashboard ring itself grows with the text scale: 148px on a phone to 188px. */ --gfx-ring: clamp(148px, calc(var(--text-floor) * 7), 188px); --gfx-ring-num: 30px; /* SVG user units in a 120-unit viewBox: 37px on a phone, 44–47px on a desktop */ --gfx-ring-lbl: 11px; /* 13.6px on a phone, 16–17px on a desktop */ --gfx-relic-lv: 13px; /* the diamond medal's "LV n", in its own 120-unit viewBox */ --fs-micro: 0.75rem; --fs-xs: 0.8125rem; --fs-s: 0.875rem; --fs-base: 1rem; --fs-m: 1.125rem; --fs-l: 1.375rem; --fs-xl: clamp(1.5rem, 3.4vw, 2rem); --fs-2xl: clamp(1.9rem, 4.6vw, 3rem); --fs-3xl: clamp(2.4rem, 7vw, 4.6rem); --lh-tight: 1.08; --lh-snug: 1.35; --lh-body: 1.6; --lh-loose: 1.72; --tr-display: 0.02em; --tr-caps: 0.08em; } /* Static fallbacks for engines without color-mix(). Values are the same mixes pre-computed against the default accent, so the site degrades in shade only. */ @supports not (color: color-mix(in srgb, red 50%, transparent)) { :root { /* rgba of --green, so it must move with it. These were still 142,224,0 — the retired #8ee000 — which meant every green wash on the site rendered in the OLD brand on any engine without color-mix(). An rgba fallback for a token is a second copy of that token, and a second copy is what gets left behind by a rebrand. */ --g-wash: rgba(168,206,0,0.07); --g-tint: rgba(168,206,0,0.13); --g-veil: rgba(168,206,0,0.22); --g-edge: rgba(168,206,0,0.33); --g-lit: rgba(168,206,0,0.45); --g-hot: rgba(168,206,0,0.62); --o-wash: rgba(255,179,64,0.07); --o-tint: rgba(255,179,64,0.13); --o-veil: rgba(255,179,64,0.22); --o-edge: rgba(255,179,64,0.35); --o-lit: rgba(255,179,64,0.45); --o-hot: rgba(255,179,64,0.62); --r-wash: rgba(255,93,93,0.08); --r-tint: rgba(255,93,93,0.15); --r-edge: rgba(255,93,93,0.40); --d-tint: rgba(159,224,255,0.12); --d-edge: rgba(159,224,255,0.40); --ctl-fill: #a8ce00; --ctl-fill-dis: #6d8318; --mx-line: rgba(2,3,1,0.26); --mx-glow: rgba(198,240,0,0.55); --glass-sheen: rgba(168,206,0,0.09); --glass-edge: rgba(168,206,0,0.20); --hair: rgba(168,206,0,0.14); --glow-g: rgba(168,206,0,0.55); --glow-o: rgba(255,179,64,0.50); --grid-line-2: rgba(168,206,0,0.15); } } * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; font-size: var(--text-base); } /* a contract address or a hash is one unbreakable string: it may break anywhere rather than run off a phone's screen */ code, .mono, .addr { overflow-wrap: anywhere; } /* ...except where an address is drawn to fit its box on ONE line: as much of it as fits, then …, then always its last 4 characters (0x1234…abcd at the narrowest). Markup: all but the last 4last 4, the two halves aria-hidden beside an sr-only copy of the whole address — a reader hears it once, in one piece. */ .addr-fit { display: inline-flex; max-width: 100%; min-width: 0; white-space: nowrap; overflow-wrap: normal; word-break: normal; vertical-align: bottom; } .addr-fit .addr-head { min-width: 7ch; overflow: hidden; text-overflow: ellipsis; } .addr-fit .addr-tail { flex: none; } body { background: var(--ink); color: var(--text); font-family: 'Rubik', system-ui, -apple-system, sans-serif; font-size: max(var(--text-floor), 1rem); /* what every element with no size of its own inherits: never under the floor */ line-height: 1.5; /* body copy at the spacing WCAG 1.4.12 expects; headings and controls set their own */ overflow-x: hidden; } .display { font-family: 'Luckiest Guy', 'Rubik', cursive; font-weight: 400; letter-spacing: 0.02em; } a { color: var(--gold); } /* ===== Nav ===== */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 0.75rem; flex-wrap: nowrap; min-height: 60px; padding: 0.5rem 1rem; background: color-mix(in srgb, var(--ink) calc(0.86 * 100%), transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); } .nav-logo { display: flex; align-items: center; justify-content: center; gap: 0.55rem; min-width: var(--nav-ctl); min-height: var(--nav-ctl); text-decoration: none; } /* a control like the rest of the bar: the 42px mark was 2px short of the 44px a finger gets */ .nav-logo img { width: 42px; height: 42px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--green) 50%, transparent)); } .nav-logo span { font-family: 'Luckiest Guy', cursive; font-size: calc(var(--nav-fs) * 1.35); color: var(--green-bright); } .nav-menu { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; flex-wrap: wrap; min-width: 0; } /* wraps only while nav.js measures; a row that would wrap becomes the pop-down */ .nav-menu a { color: var(--text-mute); text-decoration: none; font-weight: 600; font-size: var(--nav-fs); letter-spacing: 0.01em; white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--nav-ctl); padding: 0 0.5rem; border-radius: 999px; transition: color 0.15s ease, background 0.15s ease; } /* the balances pill never rides in the bar: one row to spend, and the balances live on the profile and the connected-wallet card */ .nav .nav-bal { display: none !important; } /* while nav.js measures the bar, the pop-down's open/close transitions are off — or every measurement (page load, resize, sign-in) would briefly fade the closed menu in and out */ .nav.is-measuring .nav-menu, .nav.is-measuring .nav-menu * { transition: none !important; } /* nothing in the row is ever squashed — a pill, the bell or the logo mark at the wrong width is a broken graphic. When the row cannot fit, nav.js steps down through measured tiers instead: .is-tight drops the live count and the Send Power figures; .is-tighter the wordmark and the @name (the avatar stays); .is-tightest the level pill; .is-bare, the last, the OG badge in the name pill (an OG member's bar was still 29px past a 320px phone without it). */ .nav > *:not(.nav-menu), #nav-auth.nav-persist > *, .nav-profile > * { flex-shrink: 0; } .nav-logo img { flex: 0 0 auto; } .profile-link .pl-name { display: inline-block; white-space: nowrap; vertical-align: bottom; } /* shown whole or not at all: nav.js hides it (.is-tighter) when the bar has no room */ .nav.is-tight .nav-live, .nav.is-tight .nav-xp-sep, .nav.is-tight .nav-xp-pts, .nav.is-tight .nav-xp-boost { display: none; } .nav.is-tighter .nav-logo span, .nav.is-tighter .profile-link .pl-name { display: none; } .nav.is-tighter .profile-link .pl-ava { margin-right: 0; } /* with the name hidden, the gap it kept sat on one side and pushed the avatar 3px off the pill's middle */ .nav.is-tighter { gap: 0.45rem; } /* the 3px this saves keeps a one-digit level pill on a 360px phone now that the logo and the pill are a full --nav-ctl */ .nav.is-tightest .nav-xp { display: none; } .nav.is-tightest { gap: 0.35rem; padding-left: 0.6rem; padding-right: 0.6rem; } .nav.is-bare .profile-link .og-badge { display: none; } .nav-menu a:hover { color: var(--green-bright); background: color-mix(in srgb, var(--green) 10%, transparent); } .nav-menu a.active { color: var(--on-green); background: var(--green); } /* persistent right-side cluster: Send Level + account button — always visible, even collapsed */ #nav-auth.nav-persist { display: inline-flex; align-items: center; gap: 0.35rem; } .profile-link { color: var(--on-gold); text-decoration: none; font-weight: 800; font-size: var(--nav-fs); font-family: inherit; padding: 0 0.9rem; border-radius: 999px; white-space: nowrap; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: var(--nav-ctl); background: linear-gradient(180deg, var(--gold), var(--gold-deep)); transition: transform 0.15s ease; } .profile-link:hover { transform: translateY(-1px); } .profile-link:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; } .pl-ava { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 0.4rem; border-radius: 50%; overflow: hidden; } .pl-ava-emo { font-size: var(--nav-fs-s); line-height: 1; } /* inside a 24px circle: the nav's scale, not the page floor */ .pl-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; } .pl-name { min-width: 0; white-space: nowrap; } /* whole or hidden, never cut (see .profile-link .pl-name) */ .np-caret { flex: 0 0 auto; font-size: max(var(--text-floor), 0.7rem); line-height: 1; transition: transform 0.15s ease; } .profile-link .og-badge { flex: 0 0 auto; } .nav-profile.open .np-caret { transform: rotate(180deg); } /* ===== Nav account menu (hover on desktop · click/keyboard everywhere) ===== */ .nav-profile { position: relative; display: inline-flex; } .nav-profile-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60; min-width: 224px; background: var(--ink-2); border: 1.5px solid var(--ink-4); border-radius: 14px; padding: 0.4rem; box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 0 1px color-mix(in srgb, var(--green) 6%, transparent); display: grid; gap: 0.12rem; } .npm-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; padding: 0.6rem 0.7rem; border-radius: 10px; border: none; background: var(--ctl-fill-lo); cursor: pointer; color: var(--ctl-ink); font-family: 'Rubik', sans-serif; font-weight: 700; font-size: max(var(--text-floor), 0.9rem); text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .npm-item:hover, .npm-item:focus-visible { background: var(--green); color: var(--on-green); } .npm-ico { flex: 0 0 auto; width: 1.2em; text-align: center; } .npm-sep { height: 1px; background: var(--ink-4); margin: 0.25rem 0.2rem; } .npm-danger { background: var(--ctl-fill-mute); color: var(--ctl-ink); } .npm-danger:hover, .npm-danger:focus-visible { background: var(--red); color: var(--on-red); } .npm-item.armed { background: var(--red-soft); color: var(--ctl-ink); } @media (prefers-reduced-motion: reduce) { .np-caret, .profile-link { transition: none; } } /* ===== Auth modal: log in / sign up segmented choice (login-first) ===== */ .auth-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin: 0 0 1rem; background: var(--ctl-fill-lo); border: 1.5px solid var(--ctl-fill-lo); border-radius: 999px; padding: 0.28rem; } .auth-seg { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border: none; background: none; border-radius: 999px; cursor: pointer; color: var(--ctl-ink); font-family: 'Rubik', sans-serif; font-weight: 800; font-size: max(var(--text-floor), 0.95rem); transition: background 0.14s ease, color 0.14s ease; } .auth-seg.active { background: linear-gradient(180deg, var(--green-bright), var(--green-dark)); color: var(--on-green); } .auth-seg:focus-visible { outline: 3px solid var(--ctl-ink); outline-offset: 2px; } /* the ring now sits on a light track, so it is the ink */ @media (prefers-reduced-motion: reduce) { .auth-seg { transition: none; } } /* sign-up extras: a quiet hint beside a label, the optional email+password fold, and the opt-in boxes */ .f-hint { font-weight: 500; color: var(--text-dim); } .w-extra { margin: 0.4rem 0 0.2rem; border: 1px solid var(--ink-4); border-radius: var(--r-2, 12px); padding: 0.5rem 0.75rem; } .w-extra > summary { cursor: pointer; font-weight: 700; font-size: max(var(--text-floor), 0.88rem); list-style: none; } .w-extra > summary::-webkit-details-marker { display: none; } .w-extra > summary:focus-visible { outline: 3px solid var(--focus, var(--green-bright)); outline-offset: 2px; border-radius: 6px; } .w-extra[open] > summary { margin-bottom: 0.2rem; } .w-opt { display: flex; align-items: center; gap: 0.5rem; margin: 0.7rem 0 0.4rem; font-size: max(var(--text-floor), 0.88rem); font-weight: 600; cursor: pointer; } .w-opt input { width: 1.05rem; height: 1.05rem; accent-color: var(--green-bright); flex: none; } /* the confirm pane is about the account in hand: no "or continue with Google" under it */ #auth-modal.is-confirm #oauth-row { display: none; } #pane-confirm #cf-go { margin-top: 0.8rem; } /* Security card: the unlock state, and the note a brand-new account lands on */ .sudo-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.9rem; padding: 0.55rem 0.75rem; border-radius: var(--r-2, 12px); border: 1px solid var(--ink-4); background: var(--ctl-fill-lo); font-size: max(var(--text-floor), 0.85rem); font-weight: 600; } .sudo-bar.is-open { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); } .setup-2fa-note { padding: 0.6rem 0.75rem; border-radius: var(--r-2, 12px); background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); } /* hamburger toggle — hidden on desktop, revealed when the nav collapses (≤1280px: 8 links + search + bell + account need ~1280 to sit on one line) */ .nav-toggle { display: none; width: var(--nav-ctl); height: var(--nav-ctl); flex: 0 0 auto; align-items: center; justify-content: center; border: none; background: var(--ctl-fill-lo); cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; } .nav-toggle:hover { background: var(--ctl-fill-hi); } .nav-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--green-bright); } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--ctl-ink); transition: transform 0.25s ease, opacity 0.2s ease; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before { position: absolute; top: -7px; left: 0; } .nav-toggle-bars::after { position: absolute; top: 7px; left: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); } /* ===== Collapsible mobile nav (pop-down panel) ===== */ /* The pop-down form of the menu. nav.js puts .is-compact on the bar whenever the row of links would wrap or overflow — measured, not guessed by width, because the signed-in cluster (bell, level, live count, balances, account) is hundreds of px wider than the signed-out one. The pages ship the class on, so nothing flashes. */ .nav.is-compact .nav-toggle { display: inline-flex; order: 3; } .nav.is-compact #nav-auth.nav-persist { margin-left: auto; order: 2; } .nav.is-compact .nav-menu { order: 4; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0.15rem; margin: 0; padding: 0.5rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--ink) calc(0.98 * 100%), transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--g-veil); box-shadow: 0 22px 44px rgba(0,0,0,0.55); max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.28s ease, opacity 0.24s ease, visibility 0.28s; } .nav.is-compact .nav-menu.open { max-height: var(--menu-room, min(80vh, 560px)); overflow-y: auto; overscroll-behavior: contain; opacity: 1; visibility: visible; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--green) 60%, transparent) transparent; } /* Owner, 2026-10-15: "make sure there is no scroll if there doesn't have to be on the page menu if you have to have a scroll on smaller screens make sure users know they need to scroll". The pop-down is as tall as its links need, up to the room under the bar (--menu-room, set by nav.js — it was capped at 560px, under the ~580px the links take, so it scrolled on every screen). When one column would not fit there the links go into columns as wide as the widest link (--menu-col, measured); only when even that is too tall does it scroll, and then the "Scroll for more ↓" button (nav.js) sits at the bottom until the end, with a shade along the top once it has moved. The button is a real target: a tap on it scrolls, never lands on a link under it. */ .nav.is-compact .nav-menu.is-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--menu-col, 8em)), 1fr)); align-content: start; gap: 0.15rem 0.3rem; } .nav.is-compact .nav-menu.is-cols > #nav-search-slot { grid-column: 1 / -1; } .nav.is-compact .nav-menu.is-cols a { justify-content: center; text-align: center; padding-inline: 0.5rem; } .nav-more { display: none; } .nav.is-compact .nav-menu.open.has-more > .nav-more { display: block; position: sticky; bottom: 0; z-index: 1; grid-column: 1 / -1; flex: none; width: 100%; min-height: 44px; margin: 0.3rem 0 0; padding: 0.4rem 0.5rem; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: max(var(--text-floor), 0.85rem); font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; text-align: center; color: var(--green-bright); background: var(--ink); box-shadow: 0 -18px 14px -4px var(--ink); } /* the shadow is the fade above it */ .nav.is-compact .nav-menu.open.has-more > .nav-more:hover, .nav.is-compact .nav-menu.open.has-more > .nav-more:focus-visible { background: var(--ink-2); outline: 2px solid var(--green); outline-offset: -2px; } .nav.is-compact .nav-menu.open.has-more { scroll-padding-bottom: 3.6rem; } /* a link reached with Tab scrolls clear of the button */ .nav.is-compact .nav-menu.open.is-scrolled { box-shadow: inset 0 12px 10px -10px rgba(0,0,0,0.75), 0 22px 44px rgba(0,0,0,0.55); } @media (forced-colors: active) { .nav.is-compact .nav-menu.open.has-more > .nav-more { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none; } } /* the pop-down sits under the menu button on the right, so its links line up on the right edge too, and the sender search comes first (it is first in each page's markup, so the tab order agrees) */ .nav.is-compact .nav-menu a { font-size: calc(var(--nav-fs) * 1.06); padding: 0.6rem 1rem; min-height: 44px; border-radius: 12px; white-space: normal; justify-content: flex-end; text-align: right; } .nav.is-compact #nav-search-slot { width: 100%; margin: 0 0 0.35rem; } /* in the wide bar the search keeps its place at the end of the row of links */ .nav:not(.is-compact) #nav-search-slot { order: 1; } .nav.is-compact #nav-search-slot.nav-search input, .nav.is-compact .nav-menu .nav-search input:focus { width: 100% !important; } .nav.is-compact .nav-bal { display: none !important; } .nav.is-compact #nav-auth.nav-persist, .nav.is-compact .nav-profile { min-width: 0; } .nav.is-compact .profile-link { white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .nav-menu { transition: none; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; } } /* ===== Ticker ===== */ .ticker { background: linear-gradient(90deg, var(--green-dark), var(--green), var(--green-dark)); color: #08130a; font-weight: 800; font-size: max(var(--text-floor), 0.95rem); padding: 0.45rem 0; white-space: nowrap; overflow: hidden; position: relative; z-index: 20; } .ticker-track { display: inline-block; animation: ticker 22s linear infinite; } .ticker-track span { margin: 0 1.4rem; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ===== Hero ===== */ .hero { position: relative; min-height: 88vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.25rem 4.5rem; /* overflow was written to crop the background video. The video is gone and this stays: it is now the only thing clipping the .float-emoji spans, which travel 26px past these edges. Not a leftover to sweep. */ overflow: hidden; background: radial-gradient(ellipse 90% 60% at 50% 110%, color-mix(in srgb, var(--green) 18%, transparent), transparent 60%), radial-gradient(ellipse 60% 40% at 80% -10%, rgba(255,179,64,0.12), transparent 60%), var(--ink); } .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 30%, var(--ink) 100%); pointer-events: none; } .hero > .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; } .hero-logo { width: min(340px, 68vw); height: auto; cursor: pointer; filter: drop-shadow(0 0 45px var(--glow-g)) drop-shadow(0 12px 30px rgba(0,0,0,0.6)); animation: bob 4s ease-in-out infinite; transition: transform 0.2s ease; } .hero-logo:hover { animation-play-state: paused; transform: scale(1.04) rotate(1deg); } /* bob owns transform otherwise */ @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } } .hero h1 { font-size: max(var(--text-floor), clamp(2.4rem, 7vw, 4.6rem)); line-height: 1.05; margin-top: 1.4rem; color: var(--green-bright); text-shadow: 0 3px 0 var(--green-dark), 0 8px 24px rgba(0,0,0,0.8); transform: rotate(-2deg); } .hero h1 .rocket { display: inline-block; animation: rocket-wiggle 1.6s ease-in-out infinite; } @keyframes rocket-wiggle { 0%, 100% { transform: translate(0,0) rotate(0deg); } 25% { transform: translate(2px,-4px) rotate(8deg); } 75% { transform: translate(-2px,2px) rotate(-6deg); } } .hero .tag { margin-top: 1rem; font-size: max(var(--text-floor), clamp(1rem, 2.4vw, 1.3rem)); font-weight: 600; color: var(--text-dim); max-width: 40ch; } /* what the site is, in one plain sentence: for a first-time visitor, and for the search engines and AI crawlers that read the HTML without running scripts (the H1 is a slogan) */ .hero .hero-lede { margin: 0.6rem auto 0; max-width: 52ch; font-size: max(var(--text-floor), 0.95rem); line-height: 1.55; color: var(--text-dim); text-align: center; text-wrap: balance; } .hero .tag strong { color: var(--gold); } .rh-badge { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.3rem; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--rh-green); background: rgba(0,200,5,0.1); color: var(--rh-green); font-weight: 800; font-size: max(var(--text-floor), 0.92rem); letter-spacing: 0.03em; box-shadow: 0 0 24px rgba(0,200,5,0.25); } .rh-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rh-green); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: 0.4; transform: scale(0.7);} } .cta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; line-height: 1.15; padding: 0.9rem 2rem; border-radius: 999px; border: none; cursor: pointer; font-family: 'Luckiest Guy', cursive; font-size: max(var(--text-floor), 1.15rem); letter-spacing: 0.04em; text-decoration: none; text-align: center; box-sizing: border-box; transition: transform 0.12s ease, box-shadow 0.12s ease; /* safe default: a variant-less .btn is a light pill with black type, never a bare label */ background: var(--ctl-fill); color: var(--ctl-ink); } .btn:active { transform: scale(0.93) !important; } .btn-primary { background: linear-gradient(180deg, var(--green-bright), var(--green-dark)); color: var(--on-green); box-shadow: 0 6px 0 var(--green-dark), 0 14px 34px color-mix(in srgb, var(--green) 35%, transparent); } .btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 9px 0 var(--green-dark), 0 20px 44px var(--g-lit); } .btn-gold { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: var(--on-gold); box-shadow: 0 6px 0 var(--gold-deep), 0 14px 34px rgba(255,179,64,0.3); } .btn-gold:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 9px 0 var(--gold-deep), 0 20px 44px rgba(255,179,64,0.4); } .btn-rh { background: var(--rh-green); color: var(--ctl-ink); box-shadow: 0 6px 0 color-mix(in srgb, var(--rh-green) 70%, var(--ink)), 0 14px 34px color-mix(in srgb, var(--rh-green) 30%, transparent); } .btn-rh:hover { transform: translateY(-3px) scale(1.03); } .btn-ghost { background: var(--ctl-fill); color: var(--ctl-ink); border: 2px solid var(--ctl-fill); font-family: 'Rubik', sans-serif; font-weight: 700; font-size: max(var(--text-floor), 1rem); } .btn-ghost:hover { border-color: var(--green); background: var(--ctl-fill-hi); color: var(--ctl-ink); transform: translateY(-2px); } .btn-sm { padding: 0.5rem 1.1rem; font-size: max(var(--text-floor), 0.95rem); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* disabled: a muted fill, still black type (>= 4.5:1), no lift, no shadow — distinguishable from the live pill without an opacity wash */ .btn:disabled, .btn[aria-disabled="true"] { background: var(--ctl-fill-dis); color: var(--ctl-ink); border-color: transparent; box-shadow: none; text-shadow: none; cursor: not-allowed; opacity: 1; } .btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; } /* ===== Sections ===== */ section { padding: 3.6rem 1.25rem; position: relative; } .wrap { max-width: 1040px; margin: 0 auto; } .section-title { text-align: center; font-size: max(var(--text-floor), clamp(1.9rem, 4.6vw, 3rem)); color: var(--gold); text-shadow: 0 3px 0 var(--gold-deep); margin-bottom: 0.6rem; transform: rotate(-1deg); } .section-title.green { color: var(--green-bright); text-shadow: 0 3px 0 var(--green-dark), 0 0 30px color-mix(in srgb, var(--green) 35%, transparent); } .section-sub { text-align: center; color: var(--text-dim); font-size: max(var(--text-floor), 1.05rem); margin-bottom: 2.4rem; max-width: 60ch; margin-left: auto; margin-right: auto; } /* A limit-of-the-data caveat sitting inside a section subtitle — present, readable, not shouting. */ .section-sub-note { display: block; margin-top: 0.35rem; font-size: max(var(--text-floor), 0.88rem); opacity: 0.8; } .alt-bg { background: linear-gradient(180deg, var(--ink), var(--ink-2)); } .alt-bg-2 { background: var(--ink-2); } /* ===== Cards ===== */ .card { background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 1.5rem; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent), 0 12px 32px rgba(0,0,0,0.35); } .card.gold-card { border-color: rgba(255,179,64,0.4); } /* ===== Token cards ===== */ .token-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 1.6rem; } .token-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; } .token-emblem { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-family: 'Luckiest Guy', cursive; font-size: max(var(--text-floor), 1.15rem); flex-shrink: 0; } .token-emblem.send { background: radial-gradient(circle at 30% 30%, var(--green-bright), var(--green-dark)); color: var(--on-green); box-shadow: 0 0 22px color-mix(in srgb, var(--green) 50%, transparent); } .token-emblem.gwc { background: radial-gradient(circle at 30% 30%, var(--gold), var(--gold-deep)); color: var(--on-gold); box-shadow: 0 0 22px rgba(255,179,64,0.5); } .token-head h3 { font-size: max(var(--text-floor), 1.35rem); } .token-head .sub { color: var(--text-dim); font-size: max(var(--text-floor), 0.88rem); font-weight: 600; } /* Dexscreener branding on the token cards (logo + banner), matching each token's listing */ .tok-banner { margin: -1.6rem -1.6rem 1.1rem; border-radius: 20px 20px 0 0; overflow: hidden; line-height: 0; } .tok-banner-img { width: 100%; height: 130px; object-fit: cover; display: block; } .token-emblem.has-logo { background: none; overflow: hidden; padding: 0; } .token-emblem.send.has-logo { box-shadow: 0 0 22px color-mix(in srgb, var(--green) 35%, transparent); } .token-emblem.gwc.has-logo { box-shadow: 0 0 22px rgba(255,179,64,0.35); } .tok-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .price-row { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .price-big { font-size: max(var(--text-floor), 1.7rem); font-weight: 800; color: var(--green-bright); } .price-chip { font-size: max(var(--text-floor), 0.85rem); font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; } .price-chip.up { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-bright); } .price-chip.down { background: rgba(255,93,93,0.14); color: var(--red); } .stat-mini { display: flex; gap: 1.2rem; flex-wrap: wrap; color: var(--text-dim); font-size: max(var(--text-floor), 0.85rem); font-weight: 600; margin-bottom: 1rem; } .stat-mini b { color: var(--text); } .contract-box { display: flex; align-items: center; gap: 0.6rem; background: var(--ink); border: 1.5px dashed color-mix(in srgb, var(--green) 40%, transparent); border-radius: 12px; padding: 0.65rem 0.85rem; margin-bottom: 1rem; } .contract-box code { font-size: max(var(--text-floor), 0.78rem); color: var(--green-bright); word-break: break-all; font-family: ui-monospace, 'SF Mono', Menlo, monospace; } .copy-btn { flex-shrink: 0; background: var(--ctl-fill-lo); color: var(--ctl-ink); border: none; border-radius: 9px; padding: 0.45rem 0.7rem; font-weight: 700; font-size: max(var(--text-floor), 0.8rem); cursor: pointer; transition: all 0.12s ease; } .copy-btn:hover { background: var(--green); color: var(--on-green); } .copy-btn:active { transform: scale(0.88); } .token-links { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* ===== Guide ===== */ .step-list { display: grid; gap: 1.3rem; max-width: 780px; margin: 0 auto; counter-reset: step; } .step { display: flex; gap: 1.1rem; align-items: flex-start; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 2px solid var(--g-veil); border-radius: 18px; padding: 1.3rem 1.4rem; transition: transform 0.15s ease, border-color 0.15s ease; } .step:hover { transform: translateX(6px); border-color: var(--glow-g); } .step-num { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--green-bright), var(--green-dark)); color: var(--on-green); font-family: 'Luckiest Guy', cursive; font-size: max(var(--text-floor), 1.3rem); box-shadow: 0 4px 0 var(--green-dark); } .step h4, .step h3 { font-size: max(var(--text-floor), 1.15rem); margin-bottom: 0.35rem; } .step p { color: var(--text-dim); font-size: max(var(--text-floor), 0.95rem); line-height: 1.55; } .step p b, .step li b { color: var(--text); } .step ul { margin: 0.5rem 0 0 1.1rem; color: var(--text-dim); font-size: max(var(--text-floor), 0.92rem); line-height: 1.6; } .step .step-actions { margin-top: 0.75rem; display: flex; gap: 0.6rem; flex-wrap: wrap; } .security-step { border-color: rgba(255,179,64,0.45); } .security-step .step-num { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: var(--on-diamond); box-shadow: 0 4px 0 var(--gold-deep); } .warn-box { max-width: 780px; margin: 1.6rem auto 0; background: var(--r-wash); border: 1px solid var(--r-edge); border-radius: var(--r-2); padding: 1.1rem 1.3rem; font-size: max(var(--text-floor), 0.92rem); color: var(--text-dim); line-height: 1.6; } .warn-box b { color: var(--red); } .chain-params { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: max(var(--text-floor), 0.85rem); } .chain-params td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--ink-4); color: var(--text-dim); } .chain-params td:first-child { font-weight: 700; color: var(--text); white-space: nowrap; } .chain-params code { color: var(--green-bright); font-size: max(var(--text-floor), 0.8rem); word-break: break-all; } /* ===== Swap ===== */ .swap-panel { max-width: 640px; margin: 0 auto; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 2px solid rgba(0,200,5,0.4); border-radius: 24px; padding: 2rem; box-shadow: 0 0 50px rgba(0,200,5,0.12), 0 24px 50px rgba(0,0,0,0.5); } .swap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; } .swap-choice { border: 2px solid var(--ink-4); border-radius: 16px; padding: 1.1rem; text-align: center; cursor: pointer; transition: all 0.15s ease; background: var(--ctl-fill-lo); color: var(--ctl-ink); } .swap-choice:hover { transform: translateY(-3px); } .swap-choice.selected.send { border-color: var(--green); background: var(--green); color: var(--on-green); box-shadow: 0 0 24px color-mix(in srgb, var(--green) 30%, transparent); } .swap-choice.selected.gwc { border-color: var(--gold); background: var(--gold); color: var(--on-gold); box-shadow: 0 0 24px rgba(255,179,64,0.3); } .swap-choice .big { font-family: 'Luckiest Guy', cursive; font-size: max(var(--text-floor), 1.4rem); } .swap-choice.send .big { color: inherit; } .swap-choice.gwc .big { color: inherit; } .swap-choice .sub { color: inherit; font-size: max(var(--text-floor), 0.82rem); font-weight: 600; margin-top: 0.2rem; } .swap-note { color: var(--text-dim); font-size: max(var(--text-floor), 0.85rem); line-height: 1.55; margin-top: 1rem; } .swap-note a { color: var(--rh-green); } /* ===== Video sections ===== */ .feature-frame { position: relative; border-radius: 22px; overflow: hidden; border: 3px solid var(--glow-g); box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 8%, transparent), 0 0 60px var(--g-veil), 0 30px 60px rgba(0,0,0,0.55); background: #000; } .feature-frame video { display: block; width: 100%; height: auto; } .clip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.6rem; max-width: 760px; margin: 0 auto; } .clip-card { border-radius: 20px; overflow: hidden; border: 3px solid rgba(255,179,64,0.5); box-shadow: 0 0 40px rgba(255,179,64,0.14), 0 18px 40px rgba(0,0,0,0.5); background: #000; transform: rotate(-1.2deg); transition: transform 0.2s ease; } .clip-card:nth-child(2) { transform: rotate(1.2deg); } .clip-card:hover { transform: rotate(0deg) scale(1.035); } .clip-card video { display: block; width: 100%; height: auto; } .clip-ctl { text-align: center; margin-top: 0.9rem; } /* ===== GWC card ===== */ .gwc-hero { max-width: 620px; margin: 0 auto; text-align: center; padding: 2.6rem 2rem; border-radius: 26px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 2px solid rgba(255,179,64,0.4); box-shadow: 0 0 50px rgba(255,179,64,0.12), 0 24px 50px rgba(0,0,0,0.5); } .gwc-hero .coins { font-size: max(var(--text-floor), 2.4rem); letter-spacing: 0.3rem; } .gwc-hero h3 { font-family: 'Luckiest Guy', cursive; font-size: max(var(--text-floor), clamp(1.5rem, 4vw, 2.1rem)); color: var(--gold); margin: 0.7rem 0 0.4rem; text-shadow: 0 2px 0 var(--gold-deep); } .gwc-hero p { color: var(--text-dim); margin-bottom: 1.6rem; } .gwc-hero p strong { color: var(--green-bright); } .community-links { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 0.4rem; } /* The $GWC card and the OG $SEND site's card side by side where two fit, stacked on a phone and a tablet. Each card is a column, so the two button rows sit on the same line whatever the copy's length. */ .origin-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1.4rem; max-width: 1240px; margin: 0 auto; } .origin-pair > .gwc-hero { max-width: none; margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 0; } .origin-pair > .gwc-hero > p:not(.og-site-tag) { flex: 1 0 auto; max-width: 34em; } .origin-pair > .gwc-hero > .community-links { margin-top: 0; } @media (max-width: 1099px) { .origin-pair { max-width: 620px; } } /* the OG site in the site's own green: $SEND's colour, where the $GWC card is gold */ .gwc-hero.og-site { border-color: color-mix(in srgb, var(--green-bright) 45%, transparent); box-shadow: 0 0 50px color-mix(in srgb, var(--green) 14%, transparent), 0 24px 50px rgba(0,0,0,0.5); } .gwc-hero.og-site h3 { color: var(--green-bright); text-shadow: 0 2px 0 var(--green-dark); margin-top: 0.5rem; overflow-wrap: anywhere; } .gwc-hero.og-site em { color: var(--text); font-style: normal; font-weight: 700; } .gwc-hero .og-site-tag { display: inline-block; margin: 0.7rem 0 0; padding: 0.15em 0.8em; border-radius: 999px; font-size: max(var(--text-floor), 0.8rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-gold); background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); } /* ===== Profile ===== */ .profile-hero { text-align: center; padding: 3rem 1.25rem 1.5rem; } .my-wall-btn { display: inline-flex; margin-top: 1rem; } .connect-panel { max-width: 560px; margin: 0 auto; text-align: center; } .addr-input { width: 100%; background: var(--ink-1); color: var(--green-bright); border: 1px solid var(--edge-ctl); border-radius: var(--r-2); padding: 0.85rem 1rem; font-family: ui-monospace, Menlo, monospace; font-size: max(var(--text-floor), 1rem); margin-bottom: 0.8rem; } .addr-input:focus { border-color: var(--green); } .addr-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ink-3); border: 1.5px solid color-mix(in srgb, var(--green) 35%, transparent); border-radius: 999px; padding: 0.45rem 1rem; font-family: ui-monospace, Menlo, monospace; font-size: max(var(--text-floor), 0.85rem); color: var(--green-bright); } .holdings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.4rem; margin-top: 1.8rem; } .holding-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1rem; } .hstat { background: var(--ink); border-radius: 12px; padding: 0.7rem 0.9rem; } .hstat .lbl { font-size: max(var(--text-floor), 0.72rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .hstat .val { font-size: max(var(--text-floor), 1.05rem); font-weight: 800; margin-top: 0.15rem; } .hstat .val.green { color: var(--green-bright); } .hstat .val.gold { color: var(--gold); } .hstat .val.red { color: var(--red); } .pnl-note { color: var(--text-dim); font-size: max(var(--text-floor), 0.8rem); margin-top: 0.8rem; line-height: 1.5; } .skeleton { position: relative; overflow: hidden; background: var(--ink-4); border-radius: 8px; color: transparent !important; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--g-tint), transparent); /* green sweep, not a white one */ animation: shimmer 1.2s infinite; } @keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} } /* ===== Wall ===== */ .composer { max-width: 640px; margin: 0 auto 0.5rem; } /* tight below the composer — same 0.5rem rhythm as the Convicted-In chips */ .composer textarea { width: 100%; min-height: 90px; resize: vertical; background: var(--ink-1); color: var(--text); border: 1px solid var(--edge-ctl); border-radius: var(--r-2); padding: 0.9rem 1rem; font-family: 'Rubik', sans-serif; font-size: max(var(--text-floor), 16px); } .composer textarea:focus { border-color: var(--green); } .composer-bar { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.7rem; flex-wrap: wrap; } .composer-bar .hint { color: var(--text-dim); font-size: max(var(--text-floor), 0.8rem); margin-left: auto; } .file-label { cursor: pointer; background: var(--ctl-fill-lo); color: var(--ctl-ink); border-radius: 10px; padding: 0.5rem 0.9rem; font-weight: 700; font-size: max(var(--text-floor), 0.85rem); transition: all 0.12s ease; /* the 📷 control is a