/* ========================================================================== The Next Coin Club — design system foundation Loads FIRST, before every other stylesheet. That ordering is deliberate and load-bearing: everything here can be overridden by the files that follow, so adding this layer cannot break a single existing page. It only fills in what is missing and gives the next round of work something to migrate onto. --------------------------------------------------------------------------- WHY THIS FILE EXISTS — the measurement that prompted it --------------------------------------------------------------------------- An audit of the 6,000 lines of CSS in this folder found: 26 distinct breakpoints 340, 375, 380, 400, 430, 480, 520, 560, 600, 620, 640, 700, 760, 820, 860, 899, 900, 920, 1024, 1099, 1100, 1280, 1440, 1920, 2560 48 max-width vs 14 min the site is DESKTOP-FIRST, despite the intent 25 font sizes including 9.5, 10.5, 11.5, 12.5, 13.5, 14.5px 32 spacing values no scale, every number chosen ad hoc 89 !important specificity debt 325 selectors 4+ deep fragile to any structural change 18 tokens used, undefined --accent, --err, --err-bg and others resolve to nothing and silently fall back The first two lines explain the complaint that started this: "mobile is jacked up and it looks the same way when PC is not fullscreen." Those are the same bug. In a desktop-first cascade, a narrow window and a phone hit the identical stack of max-width overrides, so both are rendered as a degraded desktop rather than as their own layout. Mobile is not being designed — it is being subtracted from. That is why this is a foundation problem and not a styling problem. No amount of visual polish on top of a desktop-first cascade produces a premium phone experience, because the phone is never the thing being described. --------------------------------------------------------------------------- WHAT PREMIUM MEANS HERE, CONCRETELY --------------------------------------------------------------------------- "Premium" is not more decoration. Every brand that reads expensive — Stripe, Linear, Apple — reads that way through restraint: Few sizes, used consistently. Eight type sizes on a ratio look considered. Twenty-five look accidental, because they are. Generous, rhythmic space. Space on a scale creates rhythm. Space chosen per-component creates noise. One accent, used sparingly. A colour that appears everywhere stops meaning anything. Typography carries the weight. Not gradients, not shadows. Motion that explains. Purposeful, fast, and gone. Consistency is the signal. A user cannot articulate why one interface feels more expensive than another, but they are reading regularity — and its absence — every time their eye moves. ========================================================================== */ :root { /* ---- Breakpoint contract ------------------------------------------------ Three, and they are the only three. Documented as custom properties so they can be referenced in comments and reasoned about, even though CSS will not let a variable be used inside a media query. base 0-599px phone. THE DEFAULT. No media query. If a rule is not inside a breakpoint, it describes a phone. md 600px+ tablet and small laptop. Adds columns. lg 1000px+ desktop. Adds the sidebar and the full screener. Every new rule is written mobile-first: describe the phone, then use min-width to ADD. Never max-width to subtract. Subtracting is how you end up with 26 breakpoints and no idea which one is firing. The existing 26 are being consolidated onto these three. See DESIGN_DIRECTION.md for the order of that work. */ --bp-md: 600px; --bp-lg: 1000px; /* ---- Type scale --------------------------------------------------------- Eight sizes on a ~1.2 ratio. This replaces 25 ad-hoc values including seven half-pixel sizes that no one chose on purpose. Half-pixel font sizes are worth a specific note: they do not render consistently across browsers, they round differently at different zoom levels, and the visual difference between 12.5px and 13px is invisible while the maintenance cost of having both is permanent. */ --fs-2xs: 11px; /* legal, timestamps, table units */ --fs-xs: 12px; /* captions, meta, secondary labels */ --fs-sm: 14px; /* UI labels, buttons, dense tables */ --fs-base: 16px; /* body. Never smaller — 16px also stops iOS zooming the viewport when a text input is focused, which is a real and very visible mobile bug. */ --fs-md: 19px; /* lead paragraphs, card titles */ --fs-lg: 23px; /* section headings */ --fs-xl: 30px; /* page titles */ --fs-2xl: 40px; /* hero */ /* Fluid display sizes for hero type. clamp() means one rule covers every width instead of a breakpoint per size. */ --fs-hero: clamp(32px, 7vw, 64px); --fs-display: clamp(24px, 5vw, 40px); /* ---- Line heights ------------------------------------------------------- Tight for large type, loose for body. Large text at 1.5 looks unglued; body text at 1.1 is unreadable. */ --lh-tight: 1.08; --lh-snug: 1.25; --lh-base: 1.6; --lh-loose: 1.75; /* ---- Letter spacing ----------------------------------------------------- Large type needs negative tracking to look intentional. This is one of the clearest tells between a considered interface and a default one. */ --ls-tight: -0.022em; --ls-snug: -0.012em; --ls-base: 0; --ls-wide: 0.1em; /* uppercase eyebrows only */ /* ---- Spacing scale ------------------------------------------------------ Base-4, which replaces 32 ad-hoc values. Every padding and margin should resolve to one of these. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---- Layout ------------------------------------------------------------- Measure is capped in ch rather than px because the readable line length is a function of the font, not the screen. 66 characters is the middle of the range typographers have converged on. */ --measure: 66ch; --measure-wide: 78ch; --page-max: 1200px; /* Gutters grow with the viewport. A phone needs edge breathing room; a desktop needs the content not to touch the window. */ --gutter: 16px; --gutter-md: 24px; --gutter-lg: 40px; /* ---- Touch targets ------------------------------------------------------ 44px is Apple's documented minimum and 48px is Google's. The audit found the primary mobile navigation at 40px, the theme switcher at 38px and the FAB icon at 26px — all below both. This is not a pedantic accessibility note. Undersized targets in a bottom tab bar produce mis-taps on exactly the navigation a phone user touches most, and mis-taps read as "this app feels cheap" long before anyone works out why. */ --tap-min: 44px; --tap-cozy: 48px; /* ---- Missing tokens ----------------------------------------------------- These are referenced by var() across the existing CSS and by markup added recently, but were never defined anywhere. Until now every one of them silently fell through to its fallback — or to nothing. --accent was the most consequential: it is defined in one place, never used, and referenced with fallbacks in several. The interface has effectively had no accent colour at all. */ --accent: #1F6FEB; --accent-hi: #4C8DF5; --accent-bg: rgba(31, 111, 235, .08); --accent-bd: rgba(31, 111, 235, .28); --err: var(--bad, #B42318); --err-bg: rgba(180, 35, 24, .07); --err-bd: rgba(180, 35, 24, .26); --bad-bg: rgba(180, 35, 24, .07); --bad-bd: rgba(180, 35, 24, .26); /* ---- Elevation ---------------------------------------------------------- Four steps. Shadows are the easiest way to make an interface look cheap: too dark, too large, or too many distinct values and everything floats. These are deliberately subtle. */ --el-0: none; --el-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03); --el-2: 0 2px 8px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04); --el-3: 0 8px 24px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04); --el-4: 0 18px 48px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05); } /* Dark theme needs its own values. Shadows barely read on a dark surface, so depth there comes from lighter surfaces and borders rather than darker shadows — the mistake is reusing the light-theme shadow stack and wondering why dark mode looks flat. */ [data-theme="dark"] { --accent: #4C8DF5; --accent-hi: #7EAEFF; --accent-bg: rgba(76, 141, 245, .12); --accent-bd: rgba(76, 141, 245, .32); --err-bg: rgba(255, 107, 96, .10); --err-bd: rgba(255, 107, 96, .30); --bad-bg: rgba(255, 107, 96, .10); --bad-bd: rgba(255, 107, 96, .30); --el-1: 0 1px 2px rgba(0,0,0,.30); --el-2: 0 2px 8px rgba(0,0,0,.36); --el-3: 0 8px 24px rgba(0,0,0,.44); --el-4: 0 18px 48px rgba(0,0,0,.52); } @media (min-width: 600px) { :root { --gutter: var(--gutter-md); } } @media (min-width: 1000px){ :root { --gutter: var(--gutter-lg); } } /* ========================================================================== Baseline guarantees Kept deliberately small. This file's job is to define the system, not to restyle the site — anything broader would collide with 6,000 lines of existing CSS and cause exactly the regressions this layer is meant to avoid. ========================================================================== */ /* Form controls at 16px minimum on phones. Below 16px, iOS Safari zooms the viewport when the field is focused and does not zoom back out. The user is left on a horizontally scrolled page mid-form, which is among the most common ways a mobile signup silently fails. */ @media (max-width: 599px) { input, select, textarea { font-size: max(16px, 1em); } } /* Honour reduced motion globally. Someone who has asked their operating system to stop animations has usually asked because motion makes them ill, and a site that ignores it is not merely unpolished. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Visible focus for keyboard users only. :focus-visible means a mouse click does not draw a ring while tab navigation still does — the behaviour people expect without being able to name it. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Long strings — mint addresses, wallet addresses — must never widen the page. A single 44-character base58 string in a narrow column is enough to introduce a horizontal scrollbar across an entire phone layout. */ :where(code, .mono, .addr) { overflow-wrap: anywhere; } /* ========================================================================== Utilities Namespaced with u- so they cannot collide with any existing class. These are the migration path: a component moved onto the scale uses these instead of a new ad-hoc value. ========================================================================== */ .u-measure { max-width: var(--measure); } .u-measure-wide { max-width: var(--measure-wide); } .u-stack > * + * { margin-top: var(--s-4); } .u-stack-sm > * + * { margin-top: var(--s-2); } .u-stack-lg > * + * { margin-top: var(--s-6); } .u-tap { min-width: var(--tap-min); min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; } .u-title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .u-eyebrow { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--mute); } /* Tabular figures for anything in a column that gets compared down its length. Without this, proportional digits make prices jitter as they update and misalign vertically — the single most obvious tell of an amateur financial interface. */ .u-num { font-variant-numeric: tabular-nums; }