/* EvolvingPunks × $EVOLVE — shared cyberpunk theme */ :root { --bg: #0a0a0f; --bg-2: #11111a; --panel: rgba(20, 20, 30, 0.6); --border: rgba(120, 255, 180, 0.15); --neon: #7CFFB2; /* primary accent — toxic green */ --neon-2: #FF4D8D; /* secondary — punk magenta */ --neon-3: #4DD7FF; /* tertiary — cyan */ --gold: #FFD66B; --text: #E6E6F0; --text-dim: #9090A8; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } /* Prevent horizontal scrollbars caused by glow/grain decorations. IMPORTANT: only on body — setting overflow-x:hidden on breaks smooth-scroll and overscroll behavior on iOS Safari. */ body { overflow-x: clip; } /* Pixel grain background */ body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(1200px 600px at 20% -10%, rgba(124,255,178,0.08), transparent 60%), radial-gradient(1000px 500px at 110% 10%, rgba(255,77,141,0.07), transparent 60%), radial-gradient(900px 500px at 50% 110%, rgba(77,215,255,0.06), transparent 60%); pointer-events: none; z-index: 0; } body::after { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); } main, nav, footer { position: relative; z-index: 1; } .mono { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; } .display { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.02em; } /* Nav */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); background: rgba(10, 10, 15, 0.7); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.04em; } .brand-mark { width: 28px; height: 28px; background-image: url('/favicon.png'); background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 5px; box-shadow: 0 0 16px rgba(124, 255, 178, 0.15); } /* ── X / Twitter link ───────────────────────────────────────────────── Used in the footer (text + icon) and in the nav (icon-only). The X "logo" is the official 2023 wordmark traced as one SVG path. */ .ep-x-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 999px; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; } .ep-x-link:hover { background: rgba(124, 255, 178, 0.08); border-color: rgba(124, 255, 178, 0.35); color: var(--neon); transform: translateY(-1px); } .ep-x-link svg { width: 14px; height: 14px; flex: 0 0 auto; } .ep-x-link .at { color: inherit; } .ep-x-link .arrow { font-size: 11px; opacity: 0.6; } .ep-x-nav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-dim); background: transparent; border: 1px solid transparent; text-decoration: none; transition: color 0.15s, background 0.15s, border-color 0.15s; } .ep-x-nav:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); border-color: var(--border); } .ep-x-nav svg { width: 16px; height: 16px; } /* ── EP brand · Alien pixel logo + monospace wordmark + $EVOLVE pill ── */ .ep-brand { text-decoration: none !important; gap: 12px; } .ep-brand-mark { width: 32px; height: 32px; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 5px; box-shadow: 0 0 18px rgba(124, 255, 178, 0.15); display: block; } .ep-brand-wordmark { display: inline-flex; align-items: center; gap: 10px; line-height: 1; } .ep-brand-name { color: var(--text); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .ep-brand-token { color: var(--neon); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 10px; letter-spacing: 0.12em; padding: 3px 8px; border: 1px solid rgba(124, 255, 178, 0.25); border-radius: 3px; background: rgba(124, 255, 178, 0.04); } .nav-links { display: flex; gap: 24px; } .nav-links a { color: var(--text-dim); text-decoration: none; font-size: 14px; transition: color 0.15s; } .nav-links a:hover, .nav-links a.active { color: var(--neon); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s, background 0.2s; } .btn-primary { background: var(--neon); color: var(--bg); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 40px rgba(124,255,178,0.5); } .btn-primary:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(124,255,178,0.4); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: rgba(255,255,255,0.04); color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: rgba(124,255,178,0.08); border-color: var(--neon); color: var(--neon); } /* Containers */ .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .section { padding: 96px 0; } .section-sm { padding: 56px 0; } /* Panels */ .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; backdrop-filter: blur(10px); } /* Typography helpers */ .eyebrow { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--neon); font-weight: 600; } h1.hero { font-size: clamp(48px, 8vw, 96px); line-height: 0.95; margin: 16px 0 24px; } .lead { font-size: 18px; line-height: 1.6; color: var(--text-dim); max-width: 620px; } /* Pixel punk grid */ .punk-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; } .punk-cell { aspect-ratio: 1; border-radius: 4px; position: relative; overflow: hidden; background: #1a1a26; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); animation: pulse 4s ease-in-out infinite; } .punk-cell svg { width: 100%; height: 100%; image-rendering: pixelated; } @keyframes pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } } /* Feature cards */ .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; } .feature { padding: 28px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid var(--border); transition: transform 0.2s, border-color 0.2s; } .feature:hover { transform: translateY(-3px); border-color: rgba(124,255,178,0.4); } .feature .icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(124,255,178,0.08); border: 1px solid rgba(124,255,178,0.2); color: var(--neon); margin-bottom: 16px; } .feature .icon svg { width: 20px; height: 20px; } .feature h3 { margin: 0 0 8px; font-size: 20px; } .feature p { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.6; } /* Stat strip */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border); border-radius: 16px; overflow: hidden; } .stat { background: var(--bg-2); padding: 24px 20px; text-align: center; } .stat .num { font-size: 32px; font-weight: 700; color: var(--neon); font-family: 'Space Grotesk', sans-serif; } .stat .lbl { font-size: 12px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; } /* Q&A */ .qa { border-top: 1px solid var(--border); } .qa details { border-bottom: 1px solid var(--border); padding: 20px 0; position: relative; /* anchor for the +/× toggle icon */ } /* Summary used to be a flex container with `justify-content: space-between`, which treated inline pieces (text + + "?" + ::after) as separate flex children and spread them across the full row — looked broken on any summary that mixed text + inline code. Now the summary is a normal inline text block with right padding reserved for the toggle icon, which is absolutely positioned on the .details. */ .qa summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; padding: 4px 36px 4px 0; line-height: 1.45; } .qa summary::-webkit-details-marker { display: none; } .qa details > summary::after { content: "+"; position: absolute; top: 20px; right: 0; color: var(--neon); font-size: 24px; line-height: 1; width: 24px; text-align: center; transition: transform 0.2s; } .qa details[open] > summary::after { transform: rotate(45deg); } .qa .answer { padding: 12px 0 4px; color: var(--text-dim); line-height: 1.7; } .qa .answer code { background: rgba(124,255,178,0.08); color: var(--neon); padding: 2px 6px; border-radius: 4px; font-size: 0.92em; } /* Diagram block */ .diagram { font-family: 'JetBrains Mono', monospace; background: #07070c; border: 1px solid var(--border); border-radius: 12px; padding: 22px; font-size: 13px; line-height: 1.6; color: #b8b8ce; overflow-x: auto; white-space: pre; } .diagram .k { color: var(--neon); } .diagram .v { color: var(--neon-3); } .diagram .m { color: var(--neon-2); } /* Mint UI specific */ .mint-card { padding: 36px; background: linear-gradient(160deg, rgba(124,255,178,0.06), rgba(255,77,141,0.04)); border: 1px solid var(--border); border-radius: 20px; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .field input, .field select { background: rgba(0,0,0,0.4); border: 1px solid var(--border); color: var(--text); padding: 14px 16px; border-radius: 10px; font-family: 'JetBrains Mono', monospace; font-size: 16px; transition: border-color 0.2s; } .field input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(124,255,178,0.15); } .tabs { display: inline-flex; padding: 4px; background: rgba(0,0,0,0.4); border-radius: 12px; border: 1px solid var(--border); } .tab { padding: 10px 20px; border-radius: 8px; background: transparent; border: 0; color: var(--text-dim); font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.15s; } .tab.active { background: var(--neon); color: #001a0d; } .price-display { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 56px; line-height: 1; color: var(--neon); letter-spacing: -0.02em; } .price-display .unit { font-size: 22px; color: var(--text-dim); margin-left: 8px; } .dutch-bar { height: 8px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; margin: 16px 0; } .dutch-bar > div { height: 100%; background: linear-gradient(90deg, var(--neon-2), var(--gold), var(--neon)); border-radius: 999px; } .row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px dashed var(--border); font-size: 14px; } .row:last-child { border-bottom: 0; } .row .lbl { color: var(--text-dim); } .row .val { font-family: 'JetBrains Mono', monospace; color: var(--text); } /* Badge / Chip */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(124,255,178,0.1); color: var(--neon); font-size: 12px; font-weight: 600; border: 1px solid rgba(124,255,178,0.25); } .chip.warn { background: rgba(255,214,107,0.08); color: var(--gold); border-color: rgba(255,214,107,0.25); } .chip.pink { background: rgba(255,77,141,0.08); color: var(--neon-2); border-color: rgba(255,77,141,0.25); } .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } /* Footer */ footer { border-top: 1px solid var(--border); padding: 40px 0; margin-top: 80px; color: var(--text-dim); font-size: 13px; } footer .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; } /* Marquee */ .marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(124,255,178,0.04); } .marquee-track { display: inline-flex; gap: 48px; padding: 14px 0; white-space: nowrap; animation: scroll 30s linear infinite; font-family: 'JetBrains Mono', monospace; font-size: 14px; } .marquee-track span { color: var(--neon); } .marquee-track .sep { color: var(--text-dim); } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Step list */ .steps { counter-reset: step; display: flex; flex-direction: column; gap: 16px; } .step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; padding: 22px; border-radius: 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 24px; color: var(--neon); background: rgba(124,255,178,0.08); border-radius: 10px; display: grid; place-items: center; width: 56px; height: 56px; } .step h4 { margin: 0 0 6px; font-size: 17px; } .step p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.6; } /* Slot legend */ .slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .slot { padding: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; } .slot .name { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--text); } .slot .meta { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 12px; } .slot .bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; margin: 10px 0 0; overflow: hidden; } .slot .bar > div { height: 100%; background: var(--neon); border-radius: 2px; } /* ===================================================================== MECHANISM PAGE — visual diagrams that replace the old code blocks ===================================================================== */ /* Scroll-offset so anchored sections don't hide under the sticky rail+nav */ section[id^="sec-"] { scroll-margin-top: 140px; } @media (max-width: 768px) { section[id^="sec-"] { scroll-margin-top: 120px; } } /* Section progress rail (sticky below the global nav) */ .mech-rail { position: sticky; top: 64px; z-index: 20; background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(14px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 24px; } .mech-rail-track { display: flex; gap: 4px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mech-rail-track::-webkit-scrollbar { display: none; } .mech-rail-track a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; color: var(--text-dim); text-decoration: none; font-size: 13px; font-weight: 500; transition: color 150ms, background 150ms, border-color 150ms; border: 1px solid transparent; min-height: 36px; } .mech-rail-track a:hover { color: var(--neon); background: rgba(124,255,178,0.05); } .mech-rail-track a.is-active { color: var(--neon); background: rgba(124,255,178,0.1); border-color: rgba(124,255,178,0.3); } .mech-rail-track .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; opacity: 0.7; } .mech-rail-track a.is-active .num { color: var(--neon); opacity: 1; } .mech-rail-track .label { font-family: 'Inter', sans-serif; } @media (max-width: 768px) { .mech-rail { top: 60px; } .mech-rail-track { padding: 8px 0; } .mech-rail-track a { padding: 7px 12px; font-size: 12px; min-height: 32px; } .mech-rail-track .label { display: none; } .mech-rail-track .num { font-size: 12px; opacity: 1; } .mech-rail-track a.is-active .label { display: inline; } } /* Topology */ .topology { display: flex; flex-direction: column; gap: 18px; } .topo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .topo-row.single { grid-template-columns: 1fr; max-width: 720px; } .topo-card { background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: 16px; padding: 22px; position: relative; overflow: hidden; } .topo-card.primary { border-color: rgba(124,255,178,0.35); background: linear-gradient(160deg, rgba(124,255,178,0.07), rgba(124,255,178,0.01)); } .topo-card.secondary { border-color: rgba(255,214,107,0.35); background: linear-gradient(160deg, rgba(255,214,107,0.06), rgba(255,214,107,0.01)); } .topo-card.accent { border-color: rgba(77,215,255,0.3); } .topo-card.phase2 { border-style: dashed; opacity: 0.85; } .topo-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .topo-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(124,255,178,0.08); border: 1px solid rgba(124,255,178,0.2); color: var(--neon); flex: 0 0 auto; } .topo-icon svg { width: 20px; height: 20px; } .topo-card.secondary .topo-icon { background: rgba(255,214,107,0.08); border-color: rgba(255,214,107,0.25); color: var(--gold); } .topo-card.accent .topo-icon { background: rgba(77,215,255,0.08); border-color: rgba(77,215,255,0.22); color: var(--neon-3); } .topo-card.phase2 .topo-icon { background: rgba(255,77,141,0.06); border-color: rgba(255,77,141,0.2); color: var(--neon-2); } .topo-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; flex: 1; min-width: 0; } .topo-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; background: rgba(255,255,255,0.04); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); } .topo-card p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.6; } .topo-card ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .topo-card li { font-size: 13px; color: var(--text-dim); line-height: 1.5; padding-left: 16px; position: relative; } .topo-card li::before { content: "›"; position: absolute; left: 0; color: var(--neon); font-weight: 700; } .topo-card strong { color: var(--text); } .topo-card code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: rgba(124,255,178,0.08); color: var(--neon); padding: 1px 6px; border-radius: 4px; } .topo-arrow-cluster { display: flex; justify-content: flex-start; gap: 32px; flex-wrap: wrap; padding-left: 22px; } .topo-arrow { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .topo-arrow span:first-child { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; } .topo-arrow .arrow-line { width: 2px; height: 22px; margin-left: 18px; background: linear-gradient(180deg, var(--neon), var(--neon-3)); border-radius: 2px; position: relative; } .topo-arrow .arrow-line::after { content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--neon-3); } /* Seed flow */ .seed-flow { display: flex; flex-direction: column; gap: 18px; align-items: stretch; } .seed-source { width: 100%; max-width: 720px; padding: 20px 24px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,77,141,0.08), rgba(255,77,141,0.02)); border: 1px solid rgba(255,77,141,0.25); } .seed-source-head { display: flex; align-items: center; gap: 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 10px; color: var(--neon-2); } .seed-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,77,141,0.1); border: 1px solid rgba(255,77,141,0.25); color: var(--neon-2); flex: 0 0 auto; } .seed-icon svg { width: 18px; height: 18px; } .seed-source p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.6; } .seed-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; width: 100%; } .seed-card { padding: 22px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005)); } .seed-immutable { border-color: rgba(124,255,178,0.35); } .seed-mutable { border-color: rgba(77,215,255,0.3); } .seed-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .seed-card-head h3 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 22px; } .seed-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(124,255,178,0.1); color: var(--neon); border: 1px solid rgba(124,255,178,0.3); } .seed-badge.mutable { background: rgba(77,215,255,0.1); color: var(--neon-3); border-color: rgba(77,215,255,0.3); } .seed-desc { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0 0 12px; } .seed-card ul { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .seed-card li { font-size: 13px; color: var(--text-dim); line-height: 1.5; padding-left: 16px; position: relative; } .seed-card li::before { content: "›"; position: absolute; left: 0; color: var(--neon); font-weight: 700; } .seed-card strong { color: var(--text); } .seed-card code { font-family: 'JetBrains Mono', monospace; font-size: 11px; background: rgba(255,255,255,0.04); color: var(--neon-3); padding: 1px 5px; border-radius: 4px; } .seed-tag { padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,0.25); border: 1px dashed var(--border); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text); text-align: center; letter-spacing: 0.02em; } .seed-tag em { color: var(--neon); font-style: normal; font-weight: 700; } .seed-arrow { margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); letter-spacing: 0.15em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; padding-left: 4px; } .seed-arrow::before { content: ""; width: 80px; height: 1px; background: linear-gradient(90deg, rgba(124,255,178,0.4), transparent); } /* Burn reward visual */ .burn-card { padding: 24px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005)); border: 1px solid var(--border); } .burn-step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; margin-bottom: 16px; } .burn-step:last-of-type { margin-bottom: 0; } .burn-num { width: 40px; height: 40px; border-radius: 10px; background: rgba(124,255,178,0.08); color: var(--neon); display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; } .burn-step h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; } .burn-step p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.6; } .burn-step .mono, .burn-step span.mono { font-family: 'JetBrains Mono', monospace; background: rgba(124,255,178,0.08); color: var(--neon); padding: 1px 6px; border-radius: 4px; font-size: 12px; } .burn-card a { color: var(--neon); } /* Dutch graph */ .dutch-graph { padding: 18px; background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005)); border: 1px solid var(--border); border-radius: 16px; } .dutch-graph-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 10px; } .dutch-svg { width: 100%; height: auto; display: block; } .dutch-flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .dutch-step { padding: 8px 14px; border-radius: 999px; background: rgba(124,255,178,0.06); border: 1px solid rgba(124,255,178,0.22); font-size: 12px; color: var(--text); } .dutch-step strong { color: var(--neon); } .dutch-arr { color: var(--text-dim); font-size: 16px; } /* Buyback flywheel */ .flywheel { display: flex; flex-direction: column; gap: 14px; max-width: 720px; } .flywheel-step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 20px; background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005)); border: 1px solid var(--border); border-radius: 14px; } .flywheel-step h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; } .flywheel-step p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.6; } .fw-num { width: 40px; height: 40px; border-radius: 10px; background: rgba(77,215,255,0.08); color: var(--neon-3); display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; } .flywheel-arrow { text-align: left; padding-left: 20px; color: var(--text-dim); font-size: 22px; line-height: 1; } .flywheel-step.double-burn { background: linear-gradient(160deg, rgba(255,77,141,0.05), rgba(124,255,178,0.03)); border-color: rgba(255,77,141,0.25); } .flywheel-step.double-burn h4 { color: var(--neon-2); } .burn-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } @media (max-width: 480px) { .burn-twin { grid-template-columns: 1fr; } } .burn-twin-card { padding: 12px; border-radius: 10px; background: rgba(0,0,0,0.3); border: 1px dashed rgba(255,77,141,0.25); display: flex; flex-direction: column; gap: 4px; } .burn-twin-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,77,141,0.08); border: 1px solid rgba(255,77,141,0.22); color: var(--neon-2); margin-bottom: 4px; } .burn-twin-card strong { color: var(--neon-2); font-size: 14px; } .burn-twin-card span { font-size: 12px; color: var(--text-dim); line-height: 1.5; } /* Buyback flywheel — redesigned */ .fw-outcome { margin: 0 0 28px; padding: 22px 24px; border-radius: 18px; background: linear-gradient(135deg, rgba(255,77,141,0.07), rgba(124,255,178,0.04)); border: 1px solid rgba(255,77,141,0.22); } .fw-outcome-head { margin-bottom: 16px; } .fw-outcome-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--neon-2); font-weight: 600; } .fw-outcome-head h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; margin: 6px 0 0; line-height: 1.25; } .fw-outcome-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; } .fw-burn-tile { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 12px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,77,141,0.22); } .fw-burn-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,77,141,0.1); border: 1px solid rgba(255,77,141,0.25); color: var(--neon-2); } .fw-burn-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fw-burn-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); } .fw-burn-meta strong { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; color: var(--neon-2); line-height: 1.2; } .fw-burn-sub { font-size: 12px; color: var(--text-dim); line-height: 1.4; } .fw-burn-plus { display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 24px; color: var(--neon-2); width: 32px; } @media (max-width: 640px) { .fw-outcome-grid { grid-template-columns: 1fr; } .fw-burn-plus { transform: rotate(90deg); justify-self: center; height: 24px; } } .fw-loop { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 820px; } .fw-phase { position: relative; padding: 18px 18px 18px 22px; border-radius: 16px; background: rgba(77,215,255,0.025); border: 1px solid rgba(77,215,255,0.15); display: flex; flex-direction: column; gap: 10px; } .fw-phase-deploy { background: rgba(255,77,141,0.04); border-color: rgba(255,77,141,0.18); } .fw-phase-label { position: absolute; top: -10px; left: 18px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--neon-3); border: 1px solid rgba(77,215,255,0.3); } .fw-phase-deploy .fw-phase-label { color: var(--neon-2); border-color: rgba(255,77,141,0.3); } .fw-step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005)); border: 1px solid var(--border); border-radius: 12px; } .fw-step-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .fw-step h4 { margin: 0; font-size: 15px; font-weight: 600; } .fw-step p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.6; } .fw-step code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: rgba(124,255,178,0.07); color: var(--neon); padding: 1px 6px; border-radius: 4px; } .fw-step-burn { background: linear-gradient(160deg, rgba(255,77,141,0.08), rgba(124,255,178,0.03)); border-color: rgba(255,77,141,0.3); } .fw-step-burn h4 { color: var(--neon-2); } .fw-step-burn .fw-num { background: rgba(255,77,141,0.12); color: var(--neon-2); } .fw-token-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .fw-tok { display: inline-flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); color: var(--text-dim); } .fw-tok-eth { color: var(--gold); border-color: rgba(255,214,107,0.3); background: rgba(255,214,107,0.06); } .fw-tok-nft { color: var(--neon-3); border-color: rgba(77,215,255,0.3); background: rgba(77,215,255,0.06); } .fw-tok-burn { color: var(--neon-2); border-color: rgba(255,77,141,0.35); background: rgba(255,77,141,0.07); } .fw-connector { display: flex; align-items: center; gap: 10px; padding: 0 22px; color: var(--text-dim); font-size: 12px; } .fw-connector svg { color: var(--neon-3); flex: 0 0 auto; } .fw-return { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-top: 4px; border-radius: 12px; background: rgba(124,255,178,0.04); border: 1px dashed rgba(124,255,178,0.25); color: var(--text-dim); font-size: 13px; } .fw-return svg { color: var(--neon); flex: 0 0 auto; } .fw-note { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; margin-top: 24px; padding: 18px 20px; max-width: 820px; } .fw-note-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(77,215,255,0.08); border: 1px solid rgba(77,215,255,0.22); color: var(--neon-3); } .fw-note strong { color: var(--text); font-size: 14px; } .fw-note p { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.65; } /* Section heading */ .section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; max-width: 760px; } .section-head h2 { font-size: clamp(32px, 4.5vw, 48px); margin: 0; line-height: 1.05; } /* ===================================================================== RESPONSIVE — mobile-first cascade Breakpoints: 360 / 480 / 768 / 1024 Touch targets ≥44×44, gaps ≥8, no horizontal overflow. ===================================================================== */ html { scroll-behavior: smooth; } body { overscroll-behavior-y: contain; -webkit-text-size-adjust: 100%; } /* All interactive widgets get a comfy touch target */ .btn, .tab, .pc-opt, .pc-close, .filter-chip, .slot-dot { min-height: 44px; } .btn { padding: 12px 22px; } button { font-family: inherit; } /* ===================================================================== CONNECT WALLET — minimal, native to the site's button language Matches .btn shape (8px corner) · neon mono · no rainbow, no pulse glow ===================================================================== */ #connect-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 8px; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.01em; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid var(--border); cursor: pointer; transition: color 150ms, background 150ms, border-color 150ms; } #connect-btn:hover { color: var(--neon); background: rgba(124,255,178,0.06); border-color: rgba(124,255,178,0.3); } #connect-btn:active { background: rgba(124,255,178,0.1); } #connect-btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; } #connect-btn .wallet-ico { width: 14px; height: 14px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; } #connect-btn:hover .wallet-ico { opacity: 1; } /* Restoring (rehydrating a previous session) — subtle pulsing dot, no actionable hover */ #connect-btn.is-restoring { color: var(--text-dim); cursor: default; } #connect-btn.is-restoring .live-dot { background: var(--text-dim); box-shadow: none; animation: restoring-pulse 1.2s ease-in-out infinite; } @keyframes restoring-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #connect-btn.is-restoring .live-dot { animation: none; opacity: 0.6; } } /* Connected variant — same dimensions, just neon-flavored */ #connect-btn.is-connected { color: var(--neon); background: rgba(124,255,178,0.06); border-color: rgba(124,255,178,0.25); } #connect-btn.is-connected:hover { color: var(--neon-2); background: rgba(255,77,141,0.06); border-color: rgba(255,77,141,0.3); } #connect-btn .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px rgba(124,255,178,0.7); flex: 0 0 auto; } #connect-btn.is-connected:hover .live-dot { background: var(--neon-2); box-shadow: 0 0 6px rgba(255,77,141,0.7); } #connect-btn .addr { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; } #connect-btn .addr-wrap { display: inline-flex; align-items: center; } #connect-btn .disc-label { display: none; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } #connect-btn.is-connected:hover .addr { display: none; } #connect-btn.is-connected:hover .disc-label { display: inline; } @media (max-width: 1024px) { #connect-btn { padding: 9px 12px; gap: 6px; font-size: 12px; } #connect-btn .addr { font-size: 11px; } } /* Hamburger button (shared) */ .nav-burger { display: none; width: 44px; height: 44px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 10px; color: var(--text); cursor: pointer; align-items: center; justify-content: center; position: relative; margin-left: 8px; } .nav-burger:hover { background: rgba(124,255,178,0.08); border-color: rgba(124,255,178,0.3); } .nav-burger svg { width: 22px; height: 22px; } .nav-burger .conn-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); display: none; } .nav-burger.connected { border-color: rgba(124,255,178,0.45); } .nav-burger.connected .conn-dot { display: block; } .nav-burger.restoring { border-color: rgba(255,255,255,0.18); } .nav-burger.restoring .conn-dot { display: block; background: var(--text-dim); box-shadow: none; animation: restoring-pulse 1.2s ease-in-out infinite; } .nav-burger .bars { display: block; } .nav-burger .close { display: none; } .nav-burger[aria-expanded="true"] .bars { display: none; } .nav-burger[aria-expanded="true"] .close { display: block; } /* Mobile drawer (slide-in from right). Hidden by default. */ .mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: linear-gradient(160deg, rgba(15,15,22,0.98), rgba(10,10,15,0.98)); border-left: 1px solid rgba(124,255,178,0.18); z-index: 60; transform: translateX(100%); transition: transform 280ms cubic-bezier(.2,.8,.2,1); padding: 80px 24px 24px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-drawer.open { transform: translateX(0); pointer-events: auto; box-shadow: -20px 0 60px rgba(0,0,0,0.5); } .mobile-drawer a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; color: var(--text-dim); text-decoration: none; font-size: 16px; font-weight: 500; border-radius: 12px; border: 1px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s; } .mobile-drawer a:hover, .mobile-drawer a.active { color: var(--neon); background: rgba(124,255,178,0.06); border-color: rgba(124,255,178,0.2); } .mobile-drawer a.external::after { content: " ↗"; color: var(--text-dim); margin-left: 6px; font-size: 13px; } .mobile-drawer .drawer-cta { margin-top: 8px; width: 100%; justify-content: center; min-height: 48px; } /* Drawer wallet — same flat language as #connect-btn, just full-width */ .drawer-connect-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 18px; border-radius: 10px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; color: var(--neon); background: rgba(124,255,178,0.06); border: 1px solid rgba(124,255,178,0.3); cursor: pointer; transition: background 150ms, border-color 150ms; } .drawer-connect-btn:hover { background: rgba(124,255,178,0.12); border-color: rgba(124,255,178,0.5); } .drawer-connect-btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; } .drawer-wallet-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(124,255,178,0.05); border: 1px solid rgba(124,255,178,0.2); } .drawer-wallet-card .live-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px rgba(124,255,178,0.7); } .drawer-wallet-meta { flex: 1; min-width: 0; } .drawer-wallet-meta .lbl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2px; } .drawer-wallet-meta .addr { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--neon); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-disconnect { flex: 0 0 auto; min-height: 36px; padding: 8px 12px; border-radius: 999px; background: rgba(255,77,141,0.08); border: 1px solid rgba(255,77,141,0.25); color: var(--neon-2); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .drawer-disconnect:hover { background: rgba(255,77,141,0.16); border-color: rgba(255,77,141,0.45); } .mobile-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 220ms; } .mobile-drawer-backdrop.open { opacity: 1; pointer-events: auto; } body.drawer-open { overflow: hidden; } /* ============== Tablet ≤ 1024 ============== */ @media (max-width: 1024px) { .container { padding: 0 20px; } .section { padding: 72px 0; } h1.hero { font-size: clamp(40px, 7vw, 80px); } } /* ============== Phones ≤ 768 ============== */ @media (max-width: 768px) { /* Nav */ .nav-inner { padding: 12px 16px; } .nav-links { display: none; } .nav-burger { display: inline-flex; } .brand .mono { display: none; } /* hide "× $EVOLVE" subtitle */ .brand .display { font-size: 16px; } /* On mobile the connect-btn lives inside the drawer alongside other nav items. Hide the header copy entirely to keep the bar uncluttered; the green pill state still surfaces in the drawer when connected. */ #connect-btn { display: none; } .nav-inner > .btn { padding: 10px 14px; font-size: 13px; } /* Hero & similar inline two-column grids: stack to one column */ .container > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 28px !important; } .hero-grid { gap: 24px !important; } /* Hero evolution canvas wrapper: cap height so canvas doesn't fill viewport */ #evo-canvas-wrap { max-width: 100%; } .hero-grid .panel { max-width: 100%; } /* On phones, constrain canvas to a comfortable size — full width but never taller than ~60vh */ #evo-canvas-wrap { max-height: 60vh; aspect-ratio: 1; width: 100%; } #evo-canvas { max-height: 60vh; width: 100% !important; height: auto !important; aspect-ratio: 1; } /* Sections */ .section { padding: 56px 0; } .section-sm { padding: 40px 0; } .section-head { margin-bottom: 28px; } .section-head h2 { font-size: clamp(26px, 6vw, 36px); } .lead { font-size: 16px; } /* Stats strip */ .stats { grid-template-columns: repeat(2, 1fr); } .stat { padding: 18px 14px; } .stat .num { font-size: 26px; } /* Grids */ .grid-2, .grid-3 { gap: 14px; } .feature { padding: 22px; } .feature h3 { font-size: 18px; } /* Mint card */ .mint-card { padding: 22px; border-radius: 16px; } .price-display { font-size: 40px; } .price-display .unit { font-size: 16px; } /* Tabs: horizontal-scrollable when overflow */ .tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; padding: 10px 14px; font-size: 13px; } .tab .chip { display: none; } /* hide "Phase 2" chip on small to keep tabs compact */ /* Tables / diagrams horizontal scroll */ .diagram { font-size: 11px; padding: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Marquee speed up a touch on mobile */ .marquee-track { font-size: 12px; gap: 36px; } /* Footer stacks */ footer .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; } /* Steps */ .step { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; } .step::before { width: 44px; height: 44px; font-size: 18px; } /* Slot legend */ .slot-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .slot { padding: 12px; font-size: 12px; } /* Q&A summaries get more space for thumbs */ .qa summary { padding: 8px 36px 8px 0; font-size: 16px; min-height: 44px; } .qa details > summary::after { top: 16px; } .qa .answer { font-size: 14px; } /* Section-head titles */ .section-head h2 { font-size: clamp(24px, 6vw, 32px); line-height: 1.1; } /* Big CTA boxes */ .panel[style*="padding:56px"] { padding: 36px 20px !important; } .panel[style*="padding:48px"] { padding: 32px 20px !important; } } /* ============== Small phones ≤ 480 ============== */ @media (max-width: 480px) { .container { padding: 0 16px; } .section { padding: 44px 0; } .section-sm { padding: 32px 0; } h1.hero { font-size: clamp(34px, 9vw, 56px); } .section-head h2 { font-size: clamp(22px, 7vw, 30px); } .nav-inner > .btn { padding: 8px 12px; font-size: 12px; } .brand .display { font-size: 15px; } .stats { grid-template-columns: 1fr 1fr; } .stat { padding: 14px 10px; } .stat .num { font-size: 22px; } .stat .lbl { font-size: 10px; } .feature { padding: 18px; } .feature h3 { font-size: 17px; } .feature p { font-size: 14px; } .price-display { font-size: 34px; } .field input, .field select { font-size: 16px; padding: 12px 14px; } /* 16px prevents iOS zoom */ .col-grid { grid-template-columns: 1fr !important; } .filter-bar { gap: 6px; padding: 10px; } .filter-chip { padding: 8px 12px; font-size: 12px; } /* Hero progress bar shrink */ #evo-progress { height: 5px; gap: 2px; } /* Hide nav CTA on tiny phones; burger is enough */ .nav-inner > a.btn-primary { display: none; } /* Modal */ .pc-modal { padding: 22px; border-radius: 16px; } .pc-title { font-size: 18px; } .pc-opt { padding: 12px 14px; } .pc-opt .pc-icon { width: 36px; height: 36px; } .pc-opt .pc-label { font-size: 14px; } } /* ============== Tiny phones ≤ 360 ============== */ @media (max-width: 360px) { .stats { grid-template-columns: 1fr; } .slot-grid { grid-template-columns: 1fr; } .marquee-track span { font-size: 11px; } } /* ============== Targeted polish ============== */ @media (max-width: 768px) { /* Collection cards */ .col-card .actions button { padding: 12px 8px; font-size: 13px; } .col-card .slot-list { grid-template-columns: 1fr; font-size: 12px; } .col-card .body { padding: 14px; } .col-card .meta-row { flex-wrap: wrap; gap: 6px; } .col-card .base-name { font-size: 15px; } /* Tabs: never wrap a single tab's text */ .tab { white-space: nowrap; } /* Connect banner on mint page: stack metadata vertically */ #contract-banner { flex-direction: column; align-items: flex-start !important; gap: 8px !important; padding: 14px 16px !important; font-size: 12px !important; } /* Big CTA panels — collapse generous desktop padding everywhere */ .panel[style*="padding:56px 32px"], .panel[style*="padding:48px 32px"], .panel[style*="padding:36px"] { padding: 28px 18px !important; } .panel[style*="padding:36px"] .display { font-size: clamp(22px, 6vw, 32px) !important; } /* Hero evolution canvas wrap — tighter on phones */ #evo-canvas-wrap + #evo-progress { display: flex; } /* Overlay base/trait labels inside canvas can overlap on narrow widths */ #evo-overlay { left: 10px !important; right: 10px !important; bottom: 10px !important; } #evo-base-name { font-size: 15px !important; } #evo-trait-name { font-size: 12px !important; } /* Hero chip row may wrap awkwardly — keep tight */ .chip { padding: 4px 8px; font-size: 11px; } /* Marquee speed: slightly faster so all content scrolls into view */ @keyframes scroll-mobile { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { animation-duration: 22s; } /* Filter bar wraps cleanly */ .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; } .filter-bar > div[style*="flex:1"] { display: none; } .filter-bar .filter-label { margin-right: 0; margin-bottom: 2px; } #refresh-btn { width: 100%; } /* Collection stats: 2-up rather than auto-fit (which gave 1 col with minmax 160) */ .collection-stats { grid-template-columns: repeat(2, 1fr); } .col-stat { padding: 16px 14px; } .col-stat .num { font-size: 22px; } /* Steps: align with section width */ .step h4 { font-size: 16px; } /* Mint page primary card grid: real columns on phone use 1 col cleanly */ .mint-card .grid-2 { gap: 22px !important; } } /* (Mobile connect now lives inside the drawer, not the header.) */ /* Prefer reduced motion — kill non-essential animations */ @media (prefers-reduced-motion: reduce) { .punk-cell, .marquee-track, .slot-dot[data-status="evolving"], .skeleton { animation: none !important; } }