/* ===== responsive.css — the responsive & touch layer, loaded LAST on every page ========== The site is built from ten stylesheets: styles.css first, then the per-feature ones (moderation, tokentext, tracker, arcade, compete, weekly, checkin, governance, rocketize). The later sheets win at equal specificity, so this layer has to load after all of them — otherwise a component sheet quietly undoes a rule meant to hold everywhere. Nothing in here is a new look: it is the floor the rest of the site is allowed to sit on. Measuring every page at 320 / 375 / 767 / 1024 / 1280 found three causes behind almost all of what was wrong: a. Touch sizing keyed off VIEWPORT WIDTH (`max-width: 560px` / `600px`). An iPad is a touch device 768–1024px wide, so it fell through every one of those rules and got the desktop's 28px controls. What decides whether a finger or a mouse is doing the pointing is the POINTER, not the width — so everything here keys off `pointer: coarse` and holds at any width, iPad and touch laptop included. b. Two bottom-fixed overlays — the music player (bottom-left) and the ✏️ compose button (bottom-right) — floated over the page with nothing reserved for them, so the last rows of every list, and the whole footer, sat permanently underneath them. c. Controls styled as text carried no hit area at all: an 18×12px copy button, 16–19px link buttons, 17px footer links. WCAG 2.5.8 (AA) asks 24×24 CSS px; a finger wants 44. Where the design wants a small mark, the mark KEEPS its size and an invisible ::after does the catching — so none of this changes what the page looks like. One deliberate exception: the ::after trick is never used on an element that clips its own overflow (`.gb-name`, `.cmp-name`, the token name in a radar row all ellipsis-truncate). The clip would cut the hit area off with the text, so those get real padding instead. ======================================================================================== */ /* --- a. Nothing is stranded under the two fixed bottom buttons ------------------------- */ :root { --fab-reserve: calc(4.75rem + env(safe-area-inset-bottom, 0px)); } body { padding-bottom: var(--fab-reserve); } /* player and FAB both stand ~70px off the bottom */ /* --- b. A finger gets 44px, at every width -------------------------------------------- */ @media (pointer: coarse) { .np-chip, .np-den, .np-more, .np-refresh, .np-seg, .np-sort, .np-search-input, .np-vs-btn, .copy-btn, .sort-btn, .cw-tab, .wl-tab, .risk-chip, .np-pin, .np-runner-pin, .np-runner-chart, .b0-conn summary, .feed-tab, .arena-tab, .gearn-row, .mp-hint, #music-player .mp-btn, .theme-hex, input[type="color"] { min-height: 44px; } .copy-btn, .np-refresh, .np-pin, .np-runner-pin, .np-runner-chart, #music-player .mp-btn, input[type="color"] { min-width: 44px; } .np-search-input { padding-block: 0.5rem; } /* a bare input in a flex row laid out 19px tall */ } /* Small by design, still a full target. Only where no ancestor clips overflow. */ .nav-logo, .notif-bell, .nav-xp, .nav-live, .profile-link, .np-caret-btn, .np-hidden-link, .linklike, .gobj-link, .trk-sel-link, .comm-viewtoken, .ge-info, .ll-info { position: relative; } .nav-logo::after, .notif-bell::after, .nav-xp::after, .nav-live::after, .profile-link::after, .np-caret-btn::after, .np-hidden-link::after, .linklike::after, .gobj-link::after, .trk-sel-link::after, .comm-viewtoken::after, .ge-info::after, .ll-info::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, 24px); height: max(100%, 24px); pointer-events: auto; /* see "matrix tiles vs. phantom boxes" below */ } @media (pointer: coarse) { .nav-logo::after, .notif-bell::after, .nav-xp::after, .nav-live::after, .profile-link::after, .np-caret-btn::after, .np-hidden-link::after, .linklike::after, .gobj-link::after, .trk-sel-link::after, .comm-viewtoken::after, .ge-info::after, .ll-info::after { width: max(100%, 44px); height: max(100%, 44px); } } .ll-info { width: 24px; height: 24px; } /* was 20×20 — under the AA floor even with a mouse */ /* The ones that ellipsis-truncate: padding, because a phantom box would be clipped away. */ .gb-name, .cmp-name, .beta-nm { padding-block: 0.25rem; } @media (pointer: coarse) { .gb-name, .cmp-name, .beta-nm { padding-block: 0.8rem; } } /* The 📋 copy-contract button lives INSIDE the token name, which truncates — same reason. */ .np-tickcopy { min-width: 24px; min-height: 24px; padding: 0.2rem 0.3rem; display: inline-flex; align-items: center; justify-content: center; } /* Footer navigation is navigation: eight 17px-tall links in a row is not a tap target. */ footer .nav-foot a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.35rem; } /* --- c. Readable type, and no iOS focus-zoom ------------------------------------------ */ /* iOS Safari zooms the whole page when a focused field is under 16px, which throws the layout off-screen mid-typing. 16px is also simply the floor for something you type into. */ @media (pointer: coarse) { input, select, textarea { font-size: max(var(--text-floor), max(16px, 1em)); } } /* Nothing below ~11.5px. Each of these was measured under it on a phone. */ .og-tag { font-size: max(var(--text-floor), 0.72rem); } /* was 0.58rem ≈ 9.3px */ .og-timer i { font-size: max(var(--text-floor), 0.7rem); } /* was 0.57rem ≈ 9.1px */ .notif-badge { font-size: var(--nav-fs-badge); } /* sized with its circle (styles.css --notif-badge): ~12–13px bold, always inside it */ .np-stat-lbl, .np-liq-lbl { font-size: max(var(--text-floor), 0.72rem); } /* was 0.66rem ≈ 10.6px */ .np-slide-newtag { font-size: max(var(--text-floor), 0.72rem); } .np-badge--dex { font-size: max(var(--text-floor), 0.72rem); } .pc-lbl { font-size: var(--gfx-ring-lbl); } /* drawn inside the ring: sized with it (styles.css --gfx-ring-lbl) */ /* SVG chart axis labels, were 9px */ .kpi-sub, .kpi-up { font-size: max(var(--text-floor), 0.72rem); } .ll-top { font-size: max(var(--text-floor), 0.72rem); } .cmp-cava--txt, .cmp-sandbox, .cmp-move { font-size: max(var(--text-floor), 0.72rem); } .wk-you, .wk-xp-l { font-size: max(var(--text-floor), 0.72rem); } .tok-comm, .np-runner-name .tok-comm, .pin-chip .tok-comm { font-size: max(var(--text-floor), 0.72rem); } /* --- d. 320px phones: the ticker and its copy button were eaten by the ellipsis -------- */ /* $SYMBOL and the 📋 button sit inside .np-name, which is nowrap + ellipsis. Below ~400px the truncation was swallowing a working control, so the name wraps to a second line instead. */ @media (max-width: 400px) { .np-name { white-space: normal; overflow: visible; text-overflow: clip; } } /* A Conviction Play chip carries the symbol, a level, the market cap, the move since it was convicted and a community link on one line, about 480 px, so on a phone it pushed the whole profile page sideways. Below 560 px it wraps inside itself, and its corners relax there so two rows still read as one chip; wider, it stays a pill. */ @media (max-width: 560px) { .pin-chip { max-width: 100%; flex-wrap: wrap; row-gap: 0.3rem; border-radius: 1.1rem; } } /* The sandbox label on a community in the competition ("🧪 Sandbox · stock, not a token · no 10×") was nowrap inside a column about 150 px wide on a phone, so it ran out of its row and pushed the arcade page sideways. It wraps now, whole words, and its corners relax for the second line. */ html .cmp-sandbox { white-space: normal; max-width: calc(100% - 0.4rem); border-radius: 0.6rem; } /* A leaderboard row's score column kept its level line ("Lv 23 · Rocket Rider 🚀") on one line and refused to shrink, so on a 320 px phone it squeezed the member's name to zero width and ran past the card. The score stays on one line, the level line under it wraps, and the column takes at most a little over half the row. */ html .cmp-val { flex-shrink: 1; min-width: 0; max-width: 55%; } html .cmp-val small { white-space: normal; } /* On a 320 px phone the how-to-buy steps kept their number beside the text, which left the text a column about 136 px wide; the wallet list in step 1 could not fit it, the grid track grew to 338 px, and the home page scrolled sideways. Below 360 px the number sits above the text and the column can shrink. */ @media (max-width: 360px) { .step-list { grid-template-columns: minmax(0, 1fr); } .step { flex-direction: column; gap: 0.6rem; padding: 1rem; } .step > * { min-width: 0; max-width: 100%; } } /* stragglers the second sweep turned up. NOTE .switch uses ::before, not ::after: its ::after is already the sliding knob (styles.css:991), and taking that over would leave the toggle with nothing to slide. */ .switch, .ll-toggle button, .swatch { position: relative; } .switch::before, .ll-toggle button::after, .swatch::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, 24px); height: max(100%, 24px); pointer-events: auto; } @media (pointer: coarse) { .switch::before, .ll-toggle button::after, .swatch::after { width: max(100%, 44px); height: max(100%, 44px); } .np-search-clear, .oc-tf, .oc-reset, .oc-data > summary, .sc-senders-toggle, .oc-w, .oc-tx { min-height: 44px; } .react-btn { min-height: 44px; } /* avatar radios reached 44px only at ≤560px; coarse-pointer tablets were at ~31px */ .gobj-primary a, .gobj-primary .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } .wall-stat, .pin-chip-open, .pin-chip-rm { position: relative; } .wall-stat::after, .pin-chip-open::after, .pin-chip-rm::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, 24px); height: max(100%, 24px); pointer-events: auto; } @media (pointer: coarse) { .wall-stat::after, .pin-chip-open::after, .pin-chip-rm::after { width: max(100%, 44px); height: max(100%, 44px); } .wall-tab { min-height: 44px; } } /* matrix tiles vs. phantom boxes. styles.css ("The matrix grid", at its end) now draws two layers under every control it lists, and its pointer-light layer is the ::after — the same pseudo-element the phantom hit boxes above live on. Eleven of the boxes are on listed controls (.notif-bell, .profile-link, .np-caret-btn, .np-hidden-link, .linklike, .gobj-link, .ge-info, .ll-info, .ll-toggle button, .pin-chip-open, .pin-chip-rm). This sheet loads last, so the box keeps its geometry — but the tile rule's `pointer-events: none` would have quietly turned every one of those boxes back into a mark nobody can tap, which is the whole reason the boxes exist. `pointer-events: auto` above puts the catch back. Two consequences of the shared pseudo, handled here rather than by giving up either feature: · under a finger the box is 44px around a mark that may be 20px, and a tap leaves :hover stuck on phones — so the lit cells would have painted a 44px square of green dots around a tiny ✕. On coarse pointers the light layer draws nothing on a phantom box; the grid (::before, inset 0) still drifts on the mark itself. With a mouse the box is at most 24px, a few px past the mark at worst. · forced-colors hides the tile layers (display: none), which would take the hit box with it. The box comes back as a transparent block there, with nothing to paint. · the tile rule also gives its ::after `border-radius: inherit`, so on a round / pill mark the 44px box was a 44px CIRCLE — the corners no longer caught (~21% less area than the square the box is meant to be). Under a finger nothing paints on the box anyway, so it goes back to square here; with a mouse it stays round so the lit cells keep inside the mark. The seven boxes in this list that are not tiled never had a radius, so `0` is a no-op on them. */ @media (pointer: coarse) { .nav-logo::after, .notif-bell::after, .nav-xp::after, .nav-live::after, .profile-link::after, .np-caret-btn::after, .np-hidden-link::after, .linklike::after, .gobj-link::after, .trk-sel-link::after, .comm-viewtoken::after, .ge-info::after, .ll-info::after, .ll-toggle button::after, .swatch::after, .wall-stat::after, .pin-chip-open::after, .pin-chip-rm::after { background-image: none; border-radius: 0; } } @media (forced-colors: active) { .nav-logo::after, .notif-bell::after, .nav-xp::after, .nav-live::after, .profile-link::after, .np-caret-btn::after, .np-hidden-link::after, .linklike::after, .gobj-link::after, .trk-sel-link::after, .comm-viewtoken::after, .ge-info::after, .ll-info::after, .ll-toggle button::after, .swatch::after, .wall-stat::after, .pin-chip-open::after, .pin-chip-rm::after { display: block; background-image: none; -webkit-mask-image: none; mask-image: none; } } /* The radar's search field is a bare in a flex row with no padding of its own, so it laid out 19px tall — under the 24px AA floor with a mouse too, not just under a finger. */ .np-search-input { padding-block: 0.25rem; } /* The Best Runners rows: the $SYMBOL button is the way into a token's detail and laid out 18px tall, and the 🏘️ tag is 19px inside the name strip. The strip clips its own overflow, so the tag gets padding while the symbol takes the phantom box. */ .np-runner-sym { position: relative; } .np-runner-sym::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: max(100%, 24px); } @media (pointer: coarse) { .np-runner-sym::after { height: max(100%, 44px); } } .np-runner-name .tok-comm { padding-block: 0.3rem; } /* ===== live Xs (livex.js) ================================================================ Every X on the site re-reads the chain on a shared clock. When a figure actually moves it gets one brief lift — enough to notice out of the corner of an eye, not enough to pull you off what you were reading. Only on a real change: a pulse on an unchanged number would be a lie about new data. Motion-sensitive readers get a fade with no movement instead. */ @keyframes livex-pulse { 0% { transform: translateY(0); filter: brightness(1); } 28% { transform: translateY(-2px); filter: brightness(1.55); } 100% { transform: translateY(0); filter: brightness(1); } } .livex-pulse { animation: livex-pulse 0.75s ease-out; } @media (prefers-reduced-motion: reduce) { @keyframes livex-pulse { 0% { opacity: 0.45; } 100% { opacity: 1; } } .livex-pulse { animation: livex-pulse 0.5s ease-out; } } @media (prefers-reduced-motion: reduce) { /* the global clamp collapses the fade to nothing; a changed value still needs a cue, so it underlines */ .livex-pulse { text-decoration: underline; text-decoration-color: var(--green-bright); text-underline-offset: 2px; } } /* the wall's loading / error block: the retry button needs room from the copy above it */ .empty-wall .btn { margin-top: 0.9rem; } .empty-wall .modal-note { margin: 0.4rem auto 0; max-width: 46ch; } /* ===== Support board (support.html) ===================================================== */ .sup-contact { padding: 0.9rem 1.1rem; margin-bottom: 1rem; border-left: 3px solid var(--gold); } .sup-contact p { margin: 0 0 0.4rem; } .sup-contact p:last-child { margin-bottom: 0; } .sup-contact a { font-weight: 800; } .sup-contact .hint { color: var(--text-dim); font-size: max(var(--text-floor), 0.82rem); line-height: 1.5; } .sup-note { color: var(--text-dim); margin: 0.5rem 0 0; line-height: 1.5; } .sup-foot { text-align: center; color: var(--text-dim); font-size: max(var(--text-floor), 0.88rem); margin: 2rem auto 0; max-width: 52ch; line-height: 1.6; } .sup-foot a { font-weight: 800; } /* a carried-forward price (the feed could not be read) is labelled, never drawn as a live one */ .np-mc .np-stat-lbl { white-space: nowrap; } /* ===== Telegram scanner offer (New Pairs) ================================================ */ .np-tg { max-width: 760px; margin: 2.2rem auto 0; padding: 1.1rem 1.2rem; text-align: center; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1.5px solid var(--ink-4); border-radius: 16px; } .np-tg-h { font-family: 'Luckiest Guy', cursive; font-size: max(var(--text-floor), 1.15rem); color: var(--green-bright); margin: 0 0 0.4rem; letter-spacing: 0.02em; } .np-tg-sub { color: var(--text); font-size: max(var(--text-floor), 0.92rem); line-height: 1.55; margin: 0 auto 0.9rem; max-width: 56ch; } .np-tg-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; align-items: center; } .np-tg-cmd { font-family: ui-monospace, Menlo, monospace; font-size: max(var(--text-floor), 0.82rem); color: var(--text-dim); background: var(--ink); border: 1px solid var(--ink-4); border-radius: 8px; padding: 0.45rem 0.7rem; } .np-tg-off { color: var(--text-dim); font-size: max(var(--text-floor), 0.88rem); margin: 0; } .np-tg-fine { color: var(--text-dim); font-size: max(var(--text-floor), 0.8rem); line-height: 1.55; margin: 0.9rem auto 0; max-width: 60ch; } .np-tg-fine b { color: var(--text); } .np-tg-row { margin: 0.7rem 0 0; } .np-tg-token { display: inline-flex; align-items: center; gap: 0.35rem; font-size: max(var(--text-floor), 0.82rem); font-weight: 800; color: var(--on-diamond); background: var(--diamond); text-decoration: none; border: 1px solid var(--diamond); border-radius: var(--r-pill); padding: 0.3rem 0.7rem; } .np-tg-token:hover { border-color: var(--diamond-deep); } @media (pointer: coarse) { .np-tg-token { min-height: 44px; } } /* 🚀 Send Call and 📌 Convict, straight off a row. Both are compact icon buttons in a tight action rail, so they take the rail's own sizing — and the touch floor from §b above still applies to them. */ .np-runner-call { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ctl-fill-lo); border: 1.5px solid var(--ctl-fill-lo); color: var(--ctl-ink); font-size: max(var(--text-floor), 1rem); cursor: pointer; } .np-runner-call:hover { border-color: var(--green); background: var(--ctl-fill-hi); color: var(--ctl-ink); } .np-runner-call:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 1px; } /* armed = "press again to post". A Send Call is permanent, so the confirm state has to be unmissable. */ .np-runner-call.is-armed, .np-row-pin.is-armed { width: auto; padding: 0 0.6rem; border-color: var(--gold); color: var(--on-gold); background: var(--gold); font-weight: 800; } .np-row-pin { background: var(--ctl-fill-lo); border: 1.5px solid var(--ctl-fill-lo); color: var(--ctl-ink); font-size: max(var(--text-floor), 0.95rem); cursor: pointer; border-radius: 8px; padding: 0.2rem 0.35rem; line-height: 1; } .np-row-pin:hover { color: var(--on-gold); border-color: var(--gold); background: var(--gold); } .np-row-pin.is-pinned { color: var(--on-gold); border-color: var(--gold); background: var(--gold); } .np-row-pin:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 1px; } @media (pointer: coarse) { .np-runner-call, .np-row-pin { min-height: 44px; min-width: 44px; } } /* ===== Token audit summary — the whole token in sentences, atop every detail ============= */ .np-audit { background: var(--ink); border: 1.5px solid var(--ink-4); border-left: 3px solid var(--green); border-radius: 14px; padding: 0.9rem 1rem; margin: 0 0 0.9rem; } .np-audit-h { font-family: 'Luckiest Guy', cursive; font-size: max(var(--text-floor), 1rem); color: var(--green-bright); margin: 0 0 0.45rem; letter-spacing: 0.02em; } .np-audit-lead { font-size: max(var(--text-floor), 0.95rem); line-height: 1.6; color: var(--text); margin: 0 0 0.8rem; } .np-audit-lead b { color: var(--green-bright); } .np-audit-rows { margin: 0; display: grid; gap: 0.6rem; } .np-audit-row { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 0.2rem 0.9rem; align-items: start; } .np-audit-row dt { font-weight: 800; font-size: max(var(--text-floor), 0.82rem); color: var(--text-dim); } .np-audit-row dd { margin: 0; font-size: max(var(--text-floor), 0.88rem); line-height: 1.6; color: var(--text-dim); } .np-audit-row dd b { color: var(--text); font-weight: 800; } .np-audit-fine { margin: 0.85rem 0 0; font-size: max(var(--text-floor), 0.76rem); line-height: 1.55; color: var(--text-dim); } @media (max-width: 560px) { .np-audit-row { grid-template-columns: 1fr; gap: 0.1rem; } } /* first-N buyers: the rank, when they got in, and the block-0 subset marked as such */ .b0-early { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--ink-4); } .b0-early h4 { margin: 0 0 0.3rem; font-size: max(var(--text-floor), 0.92rem); color: var(--text); } .b0-rank { font-family: ui-monospace, Menlo, monospace; font-size: max(var(--text-floor), 0.76rem); font-weight: 800; color: var(--text-dim); background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: 6px; padding: 0.05rem 0.35rem; } .b0-atzero { background: rgba(255,179,64,0.16); color: var(--gold); } .b0-later { background: var(--ink-2); color: var(--text-dim); } .b0-e .b0-w-stats { row-gap: 0.3rem; } .b0-contra { border-left: 3px solid var(--gold); padding-left: 0.6rem; } /* ===== A community post on the public Send Wall ========================================== */ .post-comm { display: flex; align-items: center; gap: 0.5rem; margin: -0.2rem -0.2rem 0.7rem; padding: 0.4rem 0.6rem; background: linear-gradient(90deg, color-mix(in srgb, var(--green) 10%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--green) 28%, transparent); border-radius: 10px; text-decoration: none; color: var(--text); overflow: hidden; } /* a long symbol must never paint the → outside the badge's own border */ .post-comm:hover { border-color: var(--green); background: linear-gradient(90deg, color-mix(in srgb, var(--green) 18%, transparent), transparent); } .post-comm:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; } .post-comm-logo, .post-comm-logo-none { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; } .post-comm-logo-none { display: grid; place-items: center; background: var(--ink-4); font-size: max(var(--text-floor), 0.8rem); } .post-comm-name { font-weight: 800; font-size: max(var(--text-floor), 0.85rem); color: var(--green-bright); min-width: 0; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-comm-sub { font-size: max(var(--text-floor), 0.75rem); color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-comm-go { margin-left: auto; color: var(--text-dim); font-weight: 800; flex: 0 0 auto; } @media (pointer: coarse) { .post-comm { min-height: 44px; } } /* the sandbox wears the diamond blue it already uses on the community pages, never the token-community green */ .post-comm-sandbox { background: linear-gradient(90deg, rgba(159,224,255,0.12), transparent); border-color: rgba(159,224,255,0.35); } .post-comm-sandbox:hover { border-color: var(--diamond); background: linear-gradient(90deg, rgba(159,224,255,0.2), transparent); } .post-comm-sandbox .post-comm-name { color: var(--diamond); } /* the sub-11px text the floor above missed (styles.css sizes are cited in the restyle inventory) */ .glevel-lbl, .eq-chip small, .np-rail-count, .np-f-moved::after, .np-feed-dyor, .wc-badge, .rekt-rung-you, .oc-tip-note, .oc-mk-out, .g1-w-tag, .og-badge, .rec-k, .rekt-state, .gd-text, .wl-tag, .cmb-l, .trk-w-badge { font-size: max(var(--text-floor), 0.72rem); } /* mouse-size floor for the chart and senders controls (24px, WCAG 2.5.8) */ .np-search-clear, .oc-tf, .oc-reset, .oc-data > summary, .sc-senders-toggle, .oc-w, .oc-tx { min-height: 24px; min-width: 24px; } /* targets the coarse-pointer list missed: the media-preview remover (the only way to drop an attachment), the leaderboard window pills, the tracker's wallet buttons, the modal close */ @media (pointer: coarse) { .media-preview-rm, .modal-x { min-width: 44px; min-height: 44px; } .lb-win { min-height: 44px; } .trk-w-btn { min-width: 44px; min-height: 44px; } } /* more sub-11px text: OG timer captions and tag, chart source, bar/x-axis captions, the holders-only badge */ .og-timer i, .og-tag, .np-vbar i, .sc-x i, .oc-src, .post-lock { font-size: max(var(--text-floor), 0.72rem); } /* the swap's quick-amount presets: 44px everywhere, not only under pointer:coarse — a touch-screen laptop reports pointer:fine and was getting ~30px targets */ [data-amt] { min-height: 44px; } /* ═══ Every word visible ═══════════════════════════════════════════════════════════════════════════════ Names, titles and one-line readings used to be cut with "…" when they did not fit, so part of the text could not be read at all. They wrap instead, breaking a long handle or address anywhere rather than running out of their box. (The nav's @name is the one exception: shown whole or not at all — nav.js hides it when the bar has no room.) Loaded last, so it outranks each component sheet's own one-line rule. */ /* under html: invite.css and a few others are added by script after this sheet, so equal specificity would lose */ html :is(.cmp-name, .cmp-comm-main small, .inv-chars, .sq-card-name, .sq-card-metrics .sq-gate, .post-comm-name, .post-comm-sub, .sqd-tok-name, .wk-sym, .wk-name, .np-meta .tok-comm, .t-sym, .trk-token .t-sym, .search-hit .h-sub, .gb-name, .np-name, .np-vs-txt, .sc-name, .lb-name, .sc-sender-name, .comm-card-name, .cm-name, .cmp-call-name, .gsec-d, .trk-w-label) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } html .post-comm-name { max-width: none; } /* ═══ Text centred in its graphic ═══════════════════════════════════════════════════════════════════════════ A glyph inside a fixed-size disc (an emoji avatar, a coin, a ✕, an ⓘ, a count, a gauge's number) is sized from the disc, not from the page's text floor. At the floor's 19pt a 25px emoji sat in a 20–38px circle: its 1.5 line box was taller than the circle, the grid row grew from the circle's top, and the glyph hung 1–5px low and past the edge. --ava is the disc's size; the glyph is a share of it, on a line-height of 1, with the content centred even when it is larger than the box. (tests/textsize.mjs allows --ava: a glyph that scales with its circle is a drawing, like the --gfx sizes.) */ html :is(.post-avatar, .search-hit .h-ava, .sc-sender-ava-emoji, .cmp-cava--txt, .gb-ava, .post-comm-logo-none, .sqd-tok-logo, .pin-chip-logo-none, .ll-info, .lb-ava, .wc-ico-emoji, .np-count-badge, .np-search-clear, .pin-chip-rm, .cmp-ava, .trk-report .trk-info, .media-preview-rm, .modal-x, .mute-flag, .cm-ava, .ge-info) { line-height: 1; place-content: center; } html .post-avatar { --ava: 38px; font-size: calc(var(--ava) * 0.6); } html .search-hit .h-ava { --ava: 36px; font-size: calc(var(--ava) * 0.6); } html .sc-sender-ava-emoji { --ava: var(--sc-ava, 20px); font-size: calc(var(--ava) * 0.62); } /* --sc-ava: the sender row's disc, which grows with its text (styles.css) */ html .cmp-cava--txt { --ava: 32px; font-size: calc(var(--ava) * 0.36); } /* up to three capitals of a ticker */ html .gb-ava { --ava: 26px; font-size: calc(var(--ava) * 0.6); } html .post-comm-logo-none { --ava: 22px; font-size: calc(var(--ava) * 0.62); } html .sqd-tok-logo { --ava: 28px; font-size: calc(var(--ava) * 0.6); } html .pin-chip-logo-none { --ava: 24px; font-size: calc(var(--ava) * 0.6); } html .ll-info { --ava: 24px; font-size: calc(var(--ava) * 0.6); } html .lb-ava { --ava: 34px; font-size: calc(var(--ava) * 0.6); } html .wc-ico-emoji { --ava: 34px; font-size: calc(var(--ava) * 0.6); } html .np-count-badge { --ava: 1.25rem; font-size: calc(var(--ava) * 0.6); } html .np-search-clear { --ava: 22px; font-size: calc(var(--ava) * 0.55); } html .pin-chip-rm { --ava: 24px; width: var(--ava); height: var(--ava); min-width: var(--ava); min-height: var(--ava); padding: 0; font-size: calc(var(--ava) * 0.55); } html .pin-chip-rm.is-armed { width: auto; height: auto; padding: 2px 0.6rem; border-radius: 999px; white-space: nowrap; font-size: max(var(--text-floor), 0.8rem); } /* "Remove $X?" grows into a pill rather than spilling over the tag beside it, where a tap would land on it */ html .cmp-ava { --ava: 44px; font-size: calc(var(--ava) * 0.55); } html .cmp-step--1 .cmp-ava { --ava: 56px; } @media (max-width: 420px) { html .cmp-ava { --ava: 38px; } html .cmp-step--1 .cmp-ava { --ava: 48px; } } html .cmp-ava.cmp-ava--sm { --ava: 28px; } /* the leaderboard's small avatar: its own 28px circle */ @media (max-width: 420px) { html .cmp-ava.cmp-ava--sm { --ava: 38px; } } /* compete.css makes every .cmp-ava 38px on a phone */ html .trk-report .trk-info { --ava: 28px; font-size: calc(var(--ava) * 0.6); } /* a 44px disc under a finger (tracker.css sizes the disc from --ava too) — keyed on the pointer, not the width */ @media (pointer: coarse) { html .trk-report .trk-info { --ava: 44px; } } html .trk-report .trk-info { font-family: Rubik, system-ui, sans-serif; } /* it inherited the heading's Luckiest Guy */ html .media-preview-rm { --ava: 30px; font-size: calc(var(--ava) * 0.5); } html .modal-x { --ava: 34px; font-size: calc(var(--ava) * 0.5); } @media (max-width: 560px) { html .modal-x { --ava: 44px; } } html .mute-flag { --ava: 28px; font-size: calc(var(--ava) * 0.6); } html .cm-ava { --ava: 30px; font-size: calc(var(--ava) * 0.6); } html .ge-info { --ava: 30px; font-size: calc(var(--ava) * 0.6); } html .np-rail-count { font-size: max(11px, calc(var(--ava) * 0.22)); } /* the private "you ×N" tally: inside its 46–52px disc, never under 11px (the size of the notification count's digits) */ /* the gauge's number sits in the ring's 34px hole (104px and 80px rings on the slide) */ html .np-gauge { --ava: 44px; } html .np-slide .np-gauge { --ava: 104px; } @media (max-width: 640px), (max-height: 700px) { html .np-slide .np-gauge { --ava: 80px; } } html .np-gauge-num, html .np-slide .np-gauge-num { font-size: calc(var(--ava) * 0.34); line-height: 1; } /* a touch-sized pin button kept its 📌 packed to the start of the 44px square */ html .np-row-pin { justify-content: center; } /* the invite codes: cells sized from the text, and the fixed word in the tag kept whole */ html .inv-codes, html .inv-dash .inv-codes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13em), 1fr)); } html .inv-code:not(.is-used) .inv-tag { flex: none; white-space: nowrap; } /* An emoji drawn by Apple Color Emoji sits about 0.03–0.05em above the middle of the line that centres it (its artwork runs from about 0.1em below the baseline to 0.87em above, where the line's middle is 0.34em up). A top padding of 0.08em in its own size moves the glyph down half of that, onto the disc's centre. Text avatars only: an or