/* ──────────────────────────────────────────────────────────────────────── LUKASZ W. · AI COMMUNITY Editorial / spec-sheet style: cream canvas, condensed ink display type, hairline grid, pink + blue accents, dark terminal cards. ──────────────────────────────────────────────────────────────────────── */ :root { --cream: #f2efe8; --paper: #f7f5ef; --ink: #141414; --pink: #e8456b; --blue: #5cc4d0; --amber: #df9926; --green: #3fb96a; --cyan: #57c7d4; --term-bg: #17171c; --term-edge: #2b2b33; --hair: rgba(20, 20, 20, 0.18); --hair-strong: rgba(20, 20, 20, 0.85); --rail-w: 64px; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --display: "Anton", "Arial Narrow", sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } /* ── Horizontal movement lock ──────────────────────────────────────── `body { overflow-x: hidden }` on its own is not enough on real phones: the element can still pan, and after a pinch-zoom the page stays draggable sideways. Four things together make it impossible: 1. overflow-x on BOTH html and body. `clip` is preferred over `hidden` because it does not create a scroll container, so position:sticky and smooth scrolling keep working; `hidden` stays first as the fallback for Safari < 16, and the later declaration wins elsewhere. 2. max-width:100% so neither element can be sized past the viewport. 3. overscroll-behavior-x:none to kill sideways rubber-banding. 4. touch-action:pan-y pinch-zoom on body drops horizontal drag gestures while keeping vertical scroll AND pinch-zoom. Zoom is deliberately left enabled; disabling it is an accessibility failure, and panning while zoomed acts on the visual viewport, which touch-action does not block. */ html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; } html { scroll-behavior: smooth; } body { background: var(--cream); color: var(--ink); font-family: var(--mono); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; touch-action: pan-y pinch-zoom; } ::selection { background: var(--pink); color: #fff; } a { color: inherit; } /* ── Dynamic typesetting utilities ─────────────────────────────────── */ .hl-box { /* inverted box highlight, like [BOTH] */ background: var(--ink); color: var(--cream); padding: 0 0.32em; display: inline-block; } .hl-box-pink { background: var(--pink); color: #fff; padding: 0 0.32em; display: inline-block; } .outline { /* hollow display type */ color: transparent; -webkit-text-stroke: 1.5px var(--ink); } .outline-pink { color: transparent; -webkit-text-stroke: 1.5px var(--pink); } .muted-display { color: rgba(20, 20, 20, 0.32); } .t-price { color: var(--pink); } /* ── Stripe-pattern drop shadows (instead of flat black) ───────────── ::before = offset stripe sheet (z -2); ::after = solid cover matching the card surface (z -1) so stripes only show in the overhang. */ /* Stripe drop-shadow, fully BEHIND the box: ::before = offset stripe sheet (z -2) ::after = solid page-coloured cover, 6px LARGER than the box (z -1), so it masks every stripe within the box AND a 6px ring around it, leaving a clean gap between the outline and the detached shadow. */ .terminal, .form-card { position: relative; } .terminal::before, .terminal::after, .form-card::before, .form-card::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; } .terminal::before, .form-card::before { inset: 0; z-index: -2; } .terminal::after, .form-card::after { inset: -4px; /* 4px larger than the box → gap before the stripes */ z-index: -1; background: inherit; /* matches each box's own surface (dark / paper) */ } .terminal::before { transform: translate(24px, 24px); background: repeating-linear-gradient(-45deg, rgba(20,20,20,.22) 0 3px, transparent 3px 10px); } .form-card::before { transform: translate(22px, 22px); background: repeating-linear-gradient(-45deg, rgba(20,20,20,.18) 0 3px, transparent 3px 10px); } /* ── Left rail ─────────────────────────────────────────────────────── */ .rail { position: fixed; inset: 0 auto 0 0; width: var(--rail-w); background: var(--ink); color: var(--cream); z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 28px 0; } .rail-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; display: flex; gap: 28px; align-items: center; } .rail-text .accent { color: var(--pink); } .rail-mark { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--pink); } /* ── Page frame ────────────────────────────────────────────────────── */ .page { margin-left: var(--rail-w); border-left: 1px solid var(--hair); min-height: 100vh; } .frame { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } /* ── Top bar ───────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--hair); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } .topbar .tag { color: rgba(20,20,20,.55); } .price-tag { font-size: 26px; font-weight: 700; letter-spacing: 0; border-bottom: 2px solid var(--pink); padding-bottom: 4px; white-space: nowrap; } .price-tag .num { color: var(--pink); } .price-tag .sep { color: rgba(20,20,20,.35); font-weight: 400; } /* ── Hero ──────────────────────────────────────────────────────────── */ .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding: clamp(36px, 6vh, 72px) 0 clamp(40px, 7vh, 88px); align-items: start; } .hero-left, .hero-right { position: relative; z-index: 2; } /* ── Animated vector cutouts (transparent SVG) ─────────────────────── */ .hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; } .deco { position: absolute; will-change: transform; } .deco-plus { top: 17%; right: 46.5%; width: 50px; opacity: 0.5; } .deco-tri { top: 46%; right: 45.5%; width: 62px; opacity: 0.4; } .deco-wave { top: 8%; left: 42%; width: 148px; opacity: 0.4; } .founder-photo { display: block; width: 170px; height: 170px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); margin-bottom: 18px; } .display { font-family: var(--display); font-weight: 400; font-size: clamp(52px, 7.6vw, 112px); line-height: 0.92; letter-spacing: -0.01em; text-transform: lowercase; } /* padding+negative margin lets glyph descenders (e.g. "y") show while overflow:hidden still masks the line-reveal animation */ .line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; } .line-inner { display: inline-block; will-change: transform; } .hero-bar { width: 88px; height: 14px; background: var(--pink); margin: 26px 0 30px; transform-origin: left center; } .hero-kicker { font-size: clamp(17px, 1.6vw, 22px); font-weight: 600; letter-spacing: 4px; text-transform: uppercase; } .hero-copy { margin-top: 14px; max-width: 46ch; font-size: 14px; color: rgba(20,20,20,.75); } .hero-copy strong { color: var(--ink); } .hero-cta-row { margin-top: 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } /* ── Buttons ───────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: var(--cream); border: none; cursor: pointer; font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; padding: 18px 28px; transition: background 0.2s ease; } .btn .arrow { display: inline-block; color: var(--pink); } .btn:hover { background: var(--pink); } .btn:hover .arrow { color: var(--cream); } .btn-pink { background: var(--pink); } .btn-pink .arrow { color: var(--cream); } .btn-pink:hover { background: var(--ink); } .btn[disabled] { opacity: 0.6; cursor: wait; } .micro-note { font-size: 11px; letter-spacing: 1px; color: rgba(20,20,20,.55); text-transform: uppercase; } /* ── Stats list ────────────────────────────────────────────────────── */ .stats { list-style: none; margin-top: 44px; border-top: 1px solid var(--hair); } .stats li { display: grid; grid-template-columns: 44px 110px 1fr; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--hair); } .stat-icon { width: 34px; height: 34px; color: var(--pink); } .stat-icon svg { width: 100%; height: 100%; } .stat-num { font-family: var(--display); font-size: 44px; line-height: 1; } .stat-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(20,20,20,.65); } .stat-label em { font-style: normal; color: var(--amber); } .infinity-mark { font-size: 2em; line-height: 0; display: inline-block; vertical-align: middle; position: relative; top: 0.05em; } .stat-label-centered { display: inline-flex; align-items: center; gap: 6px; } /* Featured stats: hero-scale numbers, like the reference "93%" */ .stats li.stat-big { grid-template-columns: 44px minmax(0, auto) 1fr; padding: 26px 0; align-items: center; } .stat-big .stat-num { font-size: clamp(60px, 6.6vw, 96px); line-height: 0.85; text-transform: uppercase; white-space: nowrap; } .stat-big .stat-label { font-size: 12.5px; align-self: start; padding-top: 0.15em; } /* ── Terminal ──────────────────────────────────────────────────────── */ .terminal { background: var(--term-bg); color: #d8d8de; border-radius: 10px; font-size: 13.5px; } .term-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--term-edge); } .dot { width: 12px; height: 12px; border-radius: 50%; } .dot-r { background: #ff5f57; } .dot-y { background: #febc2e; } .dot-g { background: #28c840; } .term-title { flex: 1; text-align: center; font-size: 12px; color: #8b8b96; } .term-body { padding: 22px 24px 26px; } .term-line { display: block; white-space: pre-wrap; padding: 2px 0; } .prompt { color: var(--pink); font-weight: 700; } .cmd { color: #f2efe8; font-weight: 700; } .t-dim { color: #8b8b96; } .t-pink { color: var(--pink); font-weight: 700; } .t-cyan { color: var(--cyan); } .t-yellow { color: #e8c35a; } .t-green { color: var(--green); } .t-amber { color: var(--amber); font-weight: 700; } .t-live { color: var(--green); font-weight: 700; } .term-rule { color: #3a3a44; } .term-right { float: right; } .caret { display: inline-block; width: 9px; height: 17px; background: var(--pink); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ── Marquee ───────────────────────────────────────────────────────── */ .marquee { border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong); overflow: hidden; padding: 14px 0; white-space: nowrap; } .marquee-track { display: inline-flex; will-change: transform; } .marquee-chunk { font-family: var(--display); font-size: 22px; letter-spacing: 2px; text-transform: uppercase; padding-right: 12px; } .marquee-chunk .dotsep { color: var(--pink); padding: 0 14px; } /* ── Sections ──────────────────────────────────────────────────────── */ .section { padding: clamp(48px, 8vh, 96px) 0; } .section-head { display: flex; align-items: baseline; gap: 22px; margin-bottom: clamp(28px, 4vh, 48px); } .section-num { font-size: 14px; font-weight: 700; color: var(--pink); letter-spacing: 2px; } .section-title { font-family: var(--display); font-size: clamp(34px, 4.6vw, 60px); text-transform: uppercase; letter-spacing: 0; line-height: 1; } .section-side { margin-left: auto; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(20,20,20,.5); } /* ── Perk cards ────────────────────────────────────────────────────── */ .perk-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair-strong); border-left: 1px solid var(--hair-strong); } .perk-card { border-right: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong); padding: 26px 22px 30px; min-height: 250px; display: flex; flex-direction: column; gap: 14px; background: transparent; transition: background 0.25s ease; position: relative; } .perk-card:hover { background: var(--paper); } .perk-top { display: flex; justify-content: space-between; align-items: center; } .perk-head { display: flex; align-items: center; gap: 14px; } .perk-mark { width: 34px; height: 34px; color: var(--ink); flex-shrink: 0; } .perk-mark svg { width: 100%; height: 100%; display: block; } /* Raster logo marks: recolored via mask so they match --ink exactly (no img element needed) */ .perk-mark.is-raster { background-color: var(--ink); -webkit-mask-image: var(--mark-src); mask-image: var(--mark-src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .perk-index { font-size: 12px; font-weight: 700; color: rgba(20,20,20,.4); letter-spacing: 2px; } .pill { font-size: 10px; font-weight: 700; letter-spacing: 2px; padding: 4px 10px; text-transform: uppercase; } .pill-live { background: var(--pink); color: #fff; } .pill-soon { background: transparent; color: var(--amber); border: 1px solid var(--amber); } .perk-name { font-family: var(--display); font-size: 26px; line-height: 1.05; text-transform: uppercase; } .perk-desc { font-size: 12.5px; color: rgba(20,20,20,.7); flex: 1; } .perk-foot { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pink); font-weight: 700; } .perk-card.is-soon .perk-foot { color: var(--amber); } /* ── Info strip (3 col) ────────────────────────────────────────────── */ .strip { display: grid; grid-template-columns: repeat(3, 1fr); } .strip-col { padding: 26px 26px 30px; display: flex; gap: 18px; align-items: flex-start; } .strip-col + .strip-col { border-left: none; } .strip-icon { width: 40px; height: 40px; color: var(--pink); flex-shrink: 0; } .strip-icon svg { width: 100%; height: 100%; } .strip-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--pink); text-transform: uppercase; margin-bottom: 8px; } .strip-body { font-size: 13px; line-height: 1.7; } /* ── Join / signup ─────────────────────────────────────────────────── */ .join-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; } .join-title { font-family: var(--display); font-size: clamp(44px, 6vw, 86px); line-height: 0.95; text-transform: uppercase; } .join-title .hl { color: var(--pink); } .steps { list-style: none; margin-top: 34px; counter-reset: step; } .steps li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--hair); } .step-num { font-family: var(--display); font-size: 30px; color: var(--ink); } .step-name { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .step-desc { font-size: 12.5px; color: rgba(20,20,20,.65); margin-top: 4px; } .form-card { border: 2px solid var(--ink); background: var(--paper); padding: clamp(24px, 3vw, 40px); } .form-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--hair-strong); } .form-head-title { font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } .form-head-price { font-size: 22px; font-weight: 700; color: var(--pink); } .field { margin-bottom: 18px; } .field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; } .field input { width: 100%; background: var(--cream); border: 1px solid var(--hair-strong); padding: 14px 16px; font-family: var(--mono); font-size: 14px; color: var(--ink); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .field input:focus { border-color: var(--pink); box-shadow: 4px 4px 0 rgba(232,69,107,.25); } /* ── Kill every source of browser-blue, keep the palette pink ────────── */ /* Native focus rings on buttons/links/inputs (Chrome + Safari default blue) */ :root { accent-color: var(--pink); } .field input, .amount-input-wrap input { caret-color: var(--pink); } .amount-chip:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } /* Chrome autofill paints inputs pale blue; repaint with our cream + ink */ .field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus, .amount-input-wrap input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--cream) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--pink); transition: background-color 9999s ease-in-out 0s; /* defeat the blue flash */ } /* ── Invalid field state: red border + shake, cleared on next input ───── */ .field.has-error input, .field.has-error .amount-input-wrap input { border-color: var(--pink); border-width: 2px; box-shadow: 4px 4px 0 rgba(232, 69, 107, 0.3); } .field.has-error label { color: var(--pink); } @keyframes field-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .field.is-shaking { animation: field-shake 0.4s ease; } @media (prefers-reduced-motion: reduce) { .field.is-shaking { animation: none; } } .field .hint { font-size: 10.5px; color: rgba(20,20,20,.45); margin-top: 6px; letter-spacing: 1px; } /* ── Donation amount picker ────────────────────────────────────────── */ .amount-presets { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .amount-chip { flex: 1 1 0; min-width: 62px; background: var(--cream); border: 1px solid var(--hair-strong); color: var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 700; padding: 10px 6px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .amount-chip:hover { border-color: var(--pink); color: var(--pink); } .amount-chip.is-selected { background: var(--pink); border-color: var(--pink); color: #fff; } .amount-input-wrap { position: relative; display: block; } .amount-currency { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 700; color: var(--pink); pointer-events: none; } .amount-input-wrap input { width: 100%; background: var(--cream); border: 1px solid var(--hair-strong); padding: 14px 16px 14px 30px; /* room for the $ */ font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .amount-input-wrap input:focus { border-color: var(--pink); box-shadow: 4px 4px 0 rgba(232, 69, 107, 0.25); } .form-error { display: none; background: var(--ink); color: #fff; font-size: 12.5px; padding: 12px 14px; margin-bottom: 16px; } .form-error.show { display: block; } .form-error a { color: var(--pink); font-weight: 700; } .btn-full { width: 100%; justify-content: center; padding: 20px; font-size: 15px; } .secure-row { display: flex; justify-content: center; gap: 8px; align-items: center; margin-top: 14px; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(20,20,20,.5); } .secure-row svg { width: 13px; height: 13px; color: var(--pink); flex-shrink: 0; } .stripe-mark { width: 15px; height: 15px; border-radius: 3px; vertical-align: -3px; margin: 0 2px; } .notice { display: none; border: 1px solid var(--amber); color: var(--ink); background: rgba(223,153,38,.09); font-size: 12.5px; padding: 12px 16px; margin: 18px 0 0; } .notice.show { display: block; } /* ── Footer ────────────────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--hair-strong); padding: 34px 0 44px; display: flex; align-items: center; gap: 26px; } .footer-arrow { width: 44px; height: 44px; color: var(--pink); flex-shrink: 0; } .footer-arrow svg { width: 100%; height: 100%; } .footer-note { font-size: 13px; max-width: 52ch; } .dot-grid { margin-left: auto; display: grid; grid-template-columns: repeat(10, 6px); gap: 7px; } .dot-grid i { width: 3px; height: 3px; border-radius: 50%; background: rgba(20,20,20,.35); } /* ── Accent distribution (pink primary · blue secondary · amber soon) ── */ .stat-num.is-pink { color: var(--pink); } .stat-num.is-blue { color: var(--blue); } .strip-col:nth-child(2) .strip-icon, .strip-col:nth-child(2) .strip-label { color: var(--blue); } .marquee-chunk .o { color: transparent; -webkit-text-stroke: 1.5px var(--ink); } .marquee-chunk .dotsep:nth-of-type(even) { color: var(--blue); } /* ── Bottom band ───────────────────────────────────────────────────── */ .bottom-band { background: var(--pink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; padding: 16px 0; } .bottom-band .frame { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .band-dots { display: grid; grid-template-columns: repeat(8, 8px); gap: 6px; } .band-dots i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.7); } /* ── Auth / utility pages ──────────────────────────────────────────── */ .center-wrap { min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; padding: 48px 0; } .auth-card { width: min(480px, 100%); } .auth-display { font-family: var(--display); font-size: clamp(46px, 7vw, 76px); line-height: 0.95; text-transform: lowercase; margin-bottom: 8px; } .auth-sub { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(20,20,20,.55); margin-bottom: 30px; } .auth-links { margin-top: 20px; font-size: 12px; text-align: center; } .auth-links a { color: var(--blue); font-weight: 700; } .big-check { width: 84px; height: 84px; color: var(--pink); margin-bottom: 24px; } .big-check svg { width: 100%; height: 100%; } .member-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; } /* ── Responsive ────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .perk-grid { grid-template-columns: repeat(2, 1fr); } /* minmax(0,…) not bare 1fr: bare 1fr has an `auto` minimum, so the column refuses to shrink below the terminal's intrinsic width and overflows. */ .hero { grid-template-columns: minmax(0, 1fr); } .terminal { max-width: 640px; } } @media (max-width: 820px) { /* Rail always stays, just slims down. Never hidden. */ :root { --rail-w: 48px; } .rail { padding: 20px 0; } .rail-mark { font-size: 22px; } .rail-text { gap: 20px; font-size: 10px; letter-spacing: 2px; } .strip { grid-template-columns: minmax(0, 1fr); } .strip-col + .strip-col { border-left: none; border-top: none; } .join-grid { grid-template-columns: minmax(0, 1fr); } .hero-deco { display: none; } /* keep single-column mobile clean */ } @media (max-width: 820px) { /* Terminal is the widest element on the page; let it breathe on phones */ .terminal { font-size: 11.5px; max-width: 100%; } /* Was overflow-x:auto, which made the terminal its own sideways-draggable pane. The wrapping rules below already keep every line inside, so clip it instead: nothing to drag, nothing lost. */ .term-body { padding: 16px 14px 18px; overflow-x: clip; } .term-line { overflow-wrap: anywhere; } /* Floated status tags ("LIVE"/"SOON") get stranded off-screen when the line wraps, so pin them inline at the end of the line instead. */ .term-right { float: none; margin-left: 8px; } .term-title { font-size: 10.5px; } .founder-photo { width: 112px; height: 112px; } } @media (max-width: 560px) { :root { --rail-w: 40px; } .rail-mark { font-size: 18px; } .rail-text { font-size: 9px; letter-spacing: 1.5px; } .perk-grid { grid-template-columns: minmax(0, 1fr); } .stats li { grid-template-columns: 36px 90px 1fr; } .topbar .tag { display: none; } .stats li.stat-big { grid-template-columns: 36px 1fr; } .stat-big .stat-label { grid-column: 2; } } @media (max-width: 360px) { /* Keep the rail visible but minimal; hide the vertical label if it crowds */ :root { --rail-w: 34px; } .rail-text { display: none; } }