/* ============================================================ JustStreak — marketplace styles Built on IMAN tokens (navy / red / gold, Montserrat / Inter / Mono) pushed into a bold, high-contrast meme-coin direction. Theme + accent are driven by [data-theme] / [data-accent] on . ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap"); :root, [data-theme="dark"] { --bg: #06070e; --bg-elev: #0c0e1b; --bg-elev2: #141733; --bg-poster: #0a0c18; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --txt: #f5f6fc; --txt-2: #aab0c8; --txt-3: #6d7493; --gold: #f3c64d; --gold-soft: #f3c64d; --money: #f3c64d; --red: #ff2d2d; --navy: #2440ff; --good: #2ee27a; --warn: #f5a524; --scrim: rgba(4,5,12,.72); --card-grad: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); } [data-theme="light"] { --bg: #f4f4f1; --bg-elev: #ffffff; --bg-elev2: #ffffff; --bg-poster: #0a0c18; --line: rgba(11,16,32,.12); --line-2: rgba(11,16,32,.20); --txt: #0b1020; --txt-2: #3a3f55; --txt-3: #8a91a6; --gold: #a9801a; --gold-soft: #c9a24a; --money: #a9801a; --red: #f00000; --navy: #000080; --good: #167c3b; --warn: #b7791f; --scrim: rgba(8,10,22,.55); --card-grad: linear-gradient(180deg, rgba(11,16,32,.015), rgba(11,16,32,0)); } [data-accent="red"] { --accent: var(--red); --accent-ink:#fff; } [data-accent="gold"] { --accent: #f0b528; --accent-ink:#1a1505; } [data-accent="violet"] { --accent: #7c5cff; --accent-ink:#fff; } [data-accent="acid"] { --accent: #C6FF3A; --accent-ink:#16210a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--txt); font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; } .dsp { font-family: "Montserrat", system-ui, sans-serif; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ---------------- ticker marquee ---------------- */ .ticker { position: sticky; top: 0; z-index: 60; background: var(--accent); color: var(--accent-ink); border-bottom: 1px solid rgba(0,0,0,.25); overflow: hidden; white-space: nowrap; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; } .ticker__track { display: inline-flex; gap: 30px; padding: 8px 0; animation: marq 38s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker__item { display: inline-flex; align-items: center; gap: 8px; } .ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); opacity: .55; } .ticker b { font-weight: 800; } @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------------- shell ---------------- */ .wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; } /* ---------------- header ---------------- */ .hdr { position: sticky; top: 33px; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .hdr__in { display: flex; align-items: center; gap: 26px; height: 70px; } .nav { display: flex; gap: 4px; margin-left: 8px; } .nav a { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--txt-2); text-decoration: none; padding: 9px 13px; border-radius: 9px; transition: .18s; } .nav a:hover { color: var(--txt); background: var(--bg-elev2); } .nav a.on { color: var(--txt); } .nav a.on::after { content:""; display:block; height:2px; margin-top:6px; border-radius:2px; background: var(--accent); } .hdr__sp { flex: 1; } /* wordmark */ .mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .mark__glyph { width: 30px; height: 30px; border-radius: 8px; position: relative; flex: none; background: var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset; display: grid; place-items: center; overflow: hidden; } .mark__glyph::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(115deg, transparent 0 5px, rgba(0,0,0,.16) 5px 7px); } .mark__bolt { position: relative; color: var(--accent-ink); font-size: 17px; font-weight: 900; line-height: 1; } .mark__txt { font-family:"Montserrat",sans-serif; font-weight: 900; font-size: 21px; letter-spacing: -.02em; color: var(--txt); } .mark__txt .fun { color: var(--accent); } /* wallet + buttons */ .btn { font-family:"Montserrat",sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; border: 0; cursor: pointer; padding: 11px 17px; border-radius: 11px; display: inline-flex; align-items: center; gap: 8px; transition: transform .14s var(--ease,ease), filter .18s, background .18s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--accent { background: var(--accent); color: var(--accent-ink); } .btn--accent:hover { filter: brightness(1.08); } .btn--gold { background: var(--gold); color: #1a1505; } .btn--gold:hover { filter: brightness(1.06); } .btn--ghost { background: var(--bg-elev2); color: var(--txt); border: 1px solid var(--line); } .btn--ghost:hover { border-color: var(--line-2); } .btn--lg { padding: 15px 24px; font-size: 14px; border-radius: 13px; } .btn--block { width: 100%; justify-content: center; } .wallet { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-elev); } .wallet__bal { display: flex; flex-direction: column; padding: 6px 13px; line-height: 1.1; } .wallet__bal + .wallet__bal { border-left: 1px solid var(--line); } .wallet__bal .k { font-size: 9.5px; letter-spacing:.08em; text-transform: uppercase; color: var(--txt-3); font-weight:700; } .wallet__bal .v { font-family:"JetBrains Mono",monospace; font-weight:700; font-size: 13px; color: var(--txt); } .wallet__who { display:flex; align-items:center; gap:8px; padding: 0 13px 0 14px; border-left:1px solid var(--line); align-self:stretch; } .wallet__av { width:20px;height:20px;border-radius:6px;background:conic-gradient(from 200deg,#ab9ff2,#6d4cff,#ab9ff2); } .wallet__who .addr { font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:600; color: var(--txt-2); } .dot-live { width:7px;height:7px;border-radius:50%;background:var(--good); box-shadow:0 0 0 0 var(--good); animation:pulse 1.8s infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} } /* ---------------- hero ---------------- */ .hero { padding: 46px 0 30px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: stretch; } .hero__eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:"Montserrat",sans-serif; font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 18px; } .hero__eyebrow .bar { width:26px;height:2px;background:var(--accent); } .hero h1 { font-family:"Montserrat",sans-serif; font-weight:900; letter-spacing:-.025em; line-height:.96; font-size: clamp(40px, 5.2vw, 72px); margin: 0; text-transform: uppercase; text-wrap: balance; } .hero h1 .hl { color: var(--accent); position: relative; } .hero h1 .strike { color: var(--txt-3); text-decoration: line-through; text-decoration-thickness: 4px; } .hero p.lede { font-size: 17px; line-height: 1.55; color: var(--txt-2); max-width: 46ch; margin: 20px 0 26px; } .hero__cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .hero__note { font-size:12.5px; color:var(--txt-3); display:flex; align-items:center; gap:8px; } /* token panel */ .token { background: var(--bg-elev); border:1px solid var(--line); border-radius:20px; padding:20px; display:flex; flex-direction:column; position:relative; overflow:hidden; } .token::after{ content:""; position:absolute; inset:0; pointer-events:none; background: var(--card-grad); } .token__top { display:flex; justify-content:space-between; align-items:flex-start; } .token__tkr { display:flex; align-items:center; gap:9px; } .token__tkr .badge { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:18px; color:var(--txt); } .chip-chain { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-3); border:1px solid var(--line); border-radius:999px; padding:3px 8px; } .chip-pump { font-size:10px; font-weight:800; letter-spacing:.04em; color:#0a0c18; background:linear-gradient(90deg,#5be584,#2ee27a); border-radius:999px; padding:3px 9px; } .token__price { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:34px; letter-spacing:-.01em; margin:14px 0 2px; } .token__chg { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:14px; } .up { color: var(--good); } .down { color: var(--red); } .token__spark { margin:14px -4px 8px; } .token__grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:8px 0 16px; } .token__cell { background:var(--bg-elev); padding:10px 12px; } .token__cell .k { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-3); font-weight:700; } .token__cell .v { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:15px; margin-top:3px; } /* stats strip */ .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding: 8px 0 40px; } .stat { background:var(--bg-elev); border:1px solid var(--line); border-radius:14px; padding:16px 18px; position:relative; overflow:hidden; } .stat::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; background:var(--accent); border-radius:3px; } .stat .v { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:24px; letter-spacing:-.01em; } .stat .k { font-family:"Montserrat",sans-serif; font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--txt-2); margin-top:6px; } .stat .sub { font-size:11.5px; color:var(--txt-3); margin-top:3px; } /* ---------------- toolbar / filters ---------------- */ .board-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px; } .board-head h2 { font-family:"Montserrat",sans-serif; font-weight:900; font-size:30px; letter-spacing:-.02em; text-transform:uppercase; margin:0; } .board-head .meta { font-size:13px; color:var(--txt-3); margin-top:6px; } .board-head .meta b { color:var(--accent); } .chips { display:flex; gap:9px; flex-wrap:wrap; } .chip { font-family:"Montserrat",sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.01em; border:1px solid var(--line); background:var(--bg-elev); color:var(--txt-2); padding:9px 14px; border-radius:999px; cursor:pointer; transition:.16s; display:inline-flex; align-items:center; gap:7px; } .chip:hover { border-color:var(--line-2); color:var(--txt); } .chip.on { background:var(--txt); color:var(--bg); border-color:var(--txt); } .chip .g { opacity:.6; } .chip.on .g { opacity:.9; } .tools { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin: 18px 0 24px; } .tools__sp { flex:1; } .seg { display:flex; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--bg-elev); } .seg button { font-family:"Montserrat",sans-serif; font-weight:700; font-size:12px; letter-spacing:.02em; text-transform:uppercase; border:0; background:transparent; color:var(--txt-3); padding:9px 14px; cursor:pointer; transition:.15s; display:flex; align-items:center; gap:6px; } .seg button + button { border-left:1px solid var(--line); } .seg button.on { background:color-mix(in srgb,var(--accent) 18%, transparent); color:var(--txt); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%, transparent); } .select { font-family:"Inter",sans-serif; font-weight:600; font-size:13px; color:var(--txt); background:var(--bg-elev); border:1px solid var(--line); border-radius:11px; padding:9px 13px; cursor:pointer; } /* ---------------- bounty card (grid) ---------------- */ .grid { display:grid; gap:20px; grid-template-columns:repeat(3,1fr); } .grid.cols2 { grid-template-columns:repeat(2,1fr); } .bcard { background:var(--bg-elev); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .2s var(--ease,ease), border-color .2s, box-shadow .2s; position:relative; } .bcard:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 18px 40px rgba(0,0,0,.35); } [data-theme="light"] .bcard:hover { box-shadow:0 18px 40px rgba(11,16,32,.12); } .poster { position:relative; height:148px; background:var(--bg-poster); overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:14px; } .poster__bg { position:absolute; inset:0; opacity:.9; } .poster__bg::after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(125deg, transparent 0 14px, rgba(255,255,255,.05) 14px 16px); } .poster__bg::before{ content:""; position:absolute; right:-30px; bottom:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); } .poster__row { position:relative; display:flex; justify-content:space-between; align-items:flex-start; } .poster__tag { font-family:"Montserrat",sans-serif; font-weight:900; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.28); padding:5px 9px; border-radius:7px; backdrop-filter:blur(3px); white-space:nowrap; } .poster__hot { font-family:"Montserrat",sans-serif; font-weight:900; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--red); padding:5px 9px; border-radius:7px; display:inline-flex; align-items:center; gap:5px; } .poster__cat { position:relative; font-family:"Montserrat",sans-serif; font-weight:900; font-size:30px; line-height:.9; letter-spacing:-.02em; text-transform:uppercase; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.4); opacity:.96; max-width:80%; } .poster__glyph { position:absolute; right:-6px; top:-14px; font-size:120px; line-height:1; color:rgba(255,255,255,.12); pointer-events:none; } .bcard__body { padding:16px 17px 17px; display:flex; flex-direction:column; gap:12px; flex:1; } .bcard__title { font-family:"Montserrat",sans-serif; font-weight:800; font-size:16.5px; line-height:1.22; letter-spacing:-.01em; color:var(--txt); margin:0; } .bcard__blurb { font-size:13px; line-height:1.5; color:var(--txt-2); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .bcard__meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; } .pill { font-size:11px; font-weight:600; color:var(--txt-2); background:var(--bg-elev2); border:1px solid var(--line); border-radius:999px; padding:4px 9px; display:inline-flex; align-items:center; gap:5px; } .pill .i { opacity:.6; font-weight:800; } .pill--escrow { color:var(--good); border-color:color-mix(in srgb,var(--good) 35%,transparent); background:color-mix(in srgb,var(--good) 12%,transparent); } .pill--review { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 35%,transparent); background:color-mix(in srgb,var(--warn) 12%,transparent); } .cause-line { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--txt-3); padding-top:11px; border-top:1px solid var(--line); } .cause-line .lbl { text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:10px; color:var(--txt-3); } .cause-line .nm { color:var(--txt-2); font-weight:600; } .cause-line .pct { margin-left:auto; font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--money); font-size:11.5px; } .bcard__foot { display:flex; align-items:center; gap:12px; padding:14px 17px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg-elev2) 50%, transparent); } .reward { display:flex; flex-direction:column; line-height:1.05; } .reward .amt { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:19px; color:var(--money); } .reward .usd { font-size:11.5px; color:var(--txt-3); font-weight:600; } .bcard__foot .btn { margin-left:auto; } /* progress of claims */ .claimbar { height:4px; background:var(--bg-elev2); border-radius:3px; overflow:hidden; } .claimbar > i { display:block; height:100%; background:var(--accent); border-radius:3px; } /* ---------------- list view ---------------- */ .list { display:flex; flex-direction:column; gap:10px; } .lrow { display:grid; grid-template-columns: 56px 1fr auto auto; gap:16px; align-items:center; background:var(--bg-elev); border:1px solid var(--line); border-radius:14px; padding:13px 16px; cursor:pointer; transition:.18s; } .lrow:hover { border-color:var(--line-2); transform:translateX(2px); } .lrow__poster { width:56px; height:56px; border-radius:11px; position:relative; overflow:hidden; display:grid; place-items:center; } .lrow__poster span { position:relative; font-family:"Montserrat",sans-serif; font-weight:900; color:#fff; font-size:11px; letter-spacing:.04em; } .lrow__main { min-width:0; } .lrow__title { font-family:"Montserrat",sans-serif; font-weight:800; font-size:15px; letter-spacing:-.01em; margin:0 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lrow__sub { display:flex; gap:8px; flex-wrap:wrap; } .lrow__reward { text-align:right; } .lrow__reward .amt { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:17px; color:var(--money); } .lrow__reward .usd { font-size:11px; color:var(--txt-3); } /* ---------------- map view ---------------- */ .mapwrap { display:grid; grid-template-columns: 1fr 340px; gap:18px; } .map { position:relative; height:560px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background: radial-gradient(900px 500px at 30% 20%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 60%), var(--bg-elev); } .map__grid { position:absolute; inset:0; opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px; -webkit-mask:radial-gradient(120% 120% at 50% 40%,#000 55%,transparent); } .map__usa { position:absolute; inset:0; display:grid; place-items:center; } .map__usa svg { width:78%; height:78%; opacity:.16; } .pin { position:absolute; transform:translate(-50%,-100%); cursor:pointer; } .pin__dot { width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(45deg); background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%, transparent), 0 4px 10px rgba(0,0,0,.4); } .pin.hot .pin__dot { animation: pinpulse 1.6s infinite; } @keyframes pinpulse { 0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent),0 4px 10px rgba(0,0,0,.4);} 60%{box-shadow:0 0 0 13px transparent,0 4px 10px rgba(0,0,0,.4);} 100%{box-shadow:0 0 0 4px transparent;} } .pin.sel .pin__dot { background:var(--gold); } .pin__lbl { position:absolute; top:-26px; left:50%; transform:translateX(-50%); font-family:"JetBrains Mono",monospace; font-weight:700; font-size:11px; background:var(--txt); color:var(--bg); padding:2px 7px; border-radius:6px; white-space:nowrap; opacity:0; transition:.15s; } .pin:hover .pin__lbl, .pin.sel .pin__lbl { opacity:1; } .map__side { display:flex; flex-direction:column; gap:12px; overflow:auto; max-height:560px; padding-right:2px; } /* ---------------- modal ---------------- */ .modal-scrim { position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(6px); z-index:200; display:grid; place-items:center; padding:24px; } @keyframes fade { from{opacity:0;} to{opacity:1;} } @keyframes fade { from{opacity:.4;} to{opacity:1;} } .modal { width:min(440px,94vw); background:var(--bg-elev); border:1px solid var(--line-2); border-radius:20px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); animation:pop .26s var(--ease,cubic-bezier(.2,.7,.2,1)); } @keyframes pop { from{transform:translateY(14px) scale(.97);} to{transform:none;} } .modal__head { padding:20px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .modal__head h3 { font-family:"Montserrat",sans-serif; font-weight:900; font-size:18px; text-transform:uppercase; letter-spacing:-.01em; margin:0; white-space:nowrap; } .modal__x { border:0; background:var(--bg-elev2); color:var(--txt-2); width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:16px; } .modal__body { padding:22px; display:flex; flex-direction:column; gap:16px; } .kv { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; } .kv .k { color:var(--txt-3); } .kv .v { font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--txt); } .ack { display:flex; gap:11px; align-items:flex-start; font-size:12.5px; color:var(--txt-2); line-height:1.5; background:var(--bg-elev2); border:1px solid var(--line); border-radius:12px; padding:13px; } .ack input { margin-top:2px; accent-color:var(--accent); width:16px; height:16px; } .buyfield { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:13px; padding:12px 14px; background:var(--bg-elev2); } .buyfield input { flex:1; background:transparent; border:0; outline:0; color:var(--txt); font-family:"JetBrains Mono",monospace; font-weight:700; font-size:22px; width:100%; } .buyfield .max { font-size:11px; font-weight:800; color:var(--accent); cursor:pointer; letter-spacing:.04em; } /* toast */ .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:300; background:var(--txt); color:var(--bg); font-family:"Montserrat",sans-serif; font-weight:800; font-size:13px; padding:13px 20px; border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.4); display:flex; align-items:center; gap:10px; animation:toastin .24s ease; } @keyframes toastin { from{transform:translate(-50%,12px);} to{transform:translate(-50%,0);} } .toast .ok { color:var(--good); font-size:16px; } footer.foot { border-top:1px solid var(--line); margin-top:36px; padding:30px 0 70px; color:var(--txt-3); font-size:12.5px; } .foot__in { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .foot__sp { flex:1; } .foot a { color:var(--txt-2); text-decoration:none; } .foot a:hover { color:var(--txt); } @media (max-width: 1000px) { .hero { grid-template-columns:1fr; } .stats { grid-template-columns:repeat(2,1fr); } .grid { grid-template-columns:repeat(2,1fr); } .mapwrap { grid-template-columns:1fr; } .nav { display:none; } } @media (max-width: 640px) { .grid, .grid.cols2 { grid-template-columns:1fr; } .stats { grid-template-columns:1fr 1fr; } }